Update dialogs to use space tokens

add markdown to parameter descriptions for actions

.github/workflows/codeql-analysis.yml

@@ -36,14 +36,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2
+        uses: github/codeql-action/init@014f16e7ab1402f30e7c3329d33797e7948572db # v4.31.3
         with:
           languages: ${{ matrix.language }}
 
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2
+        uses: github/codeql-action/autobuild@014f16e7ab1402f30e7c3329d33797e7948572db # v4.31.3
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -57,4 +57,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2
+        uses: github/codeql-action/analyze@014f16e7ab1402f30e7c3329d33797e7948572db # v4.31.3

.yarnrc.yml

@@ -6,4 +6,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.10.3.cjs
+yarnPath: .yarn/releases/yarn-4.11.0.cjs

package.json

@@ -115,7 +115,7 @@
     "home-assistant-js-websocket": "9.5.0",
     "idb-keyval": "6.2.2",
     "intl-messageformat": "10.7.18",
-    "js-yaml": "4.1.0",
+    "js-yaml": "4.1.1",
     "leaflet": "1.9.4",
     "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
     "leaflet.markercluster": "1.5.3",
@@ -194,7 +194,7 @@
     "eslint-plugin-wc": "3.0.2",
     "fancy-log": "2.0.0",
     "fs-extra": "11.3.2",
-    "glob": "11.0.3",
+    "glob": "12.0.0",
     "gulp": "5.0.1",
     "gulp-brotli": "3.0.0",
     "gulp-json-transform": "0.5.0",
@@ -233,9 +233,10 @@
     "@fullcalendar/daygrid": "6.1.19",
     "globals": "16.5.0",
     "tslib": "2.8.1",
-    "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
+    "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
+    "glob@^10.2.2": "^10.5.0"
   },
-  "packageManager": "yarn@4.10.3",
+  "packageManager": "yarn@4.11.0",
   "volta": {
     "node": "22.21.1"
   }

src/common/areas/areas-floor-hierarchy.ts

@@ -0,0 +1,53 @@
+import type { AreaRegistryEntry } from "../../data/area_registry";
+import type { FloorRegistryEntry } from "../../data/floor_registry";
+
+export interface AreasFloorHierarchy {
+  floors: {
+    id: string;
+    areas: string[];
+  }[];
+  areas: string[];
+}
+
+export const getAreasFloorHierarchy = (
+  floors: FloorRegistryEntry[],
+  areas: AreaRegistryEntry[]
+): AreasFloorHierarchy => {
+  const floorAreas = new Map<string, string[]>();
+  const unassignedAreas: string[] = [];
+
+  for (const area of areas) {
+    if (area.floor_id) {
+      if (!floorAreas.has(area.floor_id)) {
+        floorAreas.set(area.floor_id, []);
+      }
+      floorAreas.get(area.floor_id)!.push(area.area_id);
+    } else {
+      unassignedAreas.push(area.area_id);
+    }
+  }
+
+  const hierarchy: AreasFloorHierarchy = {
+    floors: floors.map((floor) => ({
+      id: floor.floor_id,
+      areas: floorAreas.get(floor.floor_id) || [],
+    })),
+    areas: unassignedAreas,
+  };
+
+  return hierarchy;
+};
+
+export const getAreasOrder = (hierarchy: AreasFloorHierarchy): string[] => {
+  const order: string[] = [];
+
+  for (const floor of hierarchy.floors) {
+    order.push(...floor.areas);
+  }
+  order.push(...hierarchy.areas);
+
+  return order;
+};
+
+export const getFloorOrder = (hierarchy: AreasFloorHierarchy): string[] =>
+  hierarchy.floors.map((floor) => floor.id);

src/common/keyboard/shortcuts.ts

@@ -0,0 +1,67 @@
+import { tinykeys } from "tinykeys";
+import { canOverrideAlphanumericInput } from "../dom/can-override-input";
+
+/**
+ * A function to handle a keyboard shortcut.
+ */
+export type ShortcutHandler = (event: KeyboardEvent) => void;
+
+/**
+ * Configuration for a keyboard shortcut.
+ */
+export interface ShortcutConfig {
+  handler: ShortcutHandler;
+  /**
+   * If true, allows shortcuts even when text is selected.
+   * Default is false to avoid interrupting copy/paste.
+   */
+  allowWhenTextSelected?: boolean;
+}
+
+/**
+ * Register keyboard shortcuts using tinykeys.
+ * Automatically blocks shortcuts in input fields and during text selection.
+ */
+function registerShortcuts(
+  shortcuts: Record<string, ShortcutConfig>
+): () => void {
+  const wrappedShortcuts: Record<string, ShortcutHandler> = {};
+
+  Object.entries(shortcuts).forEach(([key, config]) => {
+    wrappedShortcuts[key] = (event: KeyboardEvent) => {
+      if (!canOverrideAlphanumericInput(event.composedPath())) {
+        return;
+      }
+      if (!config.allowWhenTextSelected && window.getSelection()?.toString()) {
+        return;
+      }
+      config.handler(event);
+    };
+  });
+
+  return tinykeys(window, wrappedShortcuts);
+}
+
+/**
+ * Manages keyboard shortcuts registration and cleanup.
+ */
+export class ShortcutManager {
+  private _disposer?: () => void;
+
+  /**
+   * Register keyboard shortcuts.
+   * Uses tinykeys syntax: https://github.com/jamiebuilds/tinykeys#usage
+   */
+  public add(shortcuts: Record<string, ShortcutConfig>) {
+    this._disposer?.();
+    this._disposer = registerShortcuts(shortcuts);
+  }
+
+  /**
+   * Remove all registered shortcuts.
+   */
+  public remove() {
+    this._disposer?.();
+    this._disposer = undefined;
+  }
+}

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

@@ -30,6 +30,7 @@ export class HaFilterChip extends FilterChip {
           var(--rgb-primary-text-color),
           0.15
         );
+        --_label-text-font: var(--ha-font-family-body);
         border-radius: var(--ha-border-radius-md);
       }
     `,

src/components/data-table/ha-data-table.ts

@@ -298,6 +298,18 @@ export class HaDataTable extends LitElement {
     }
 
     if (properties.has("data")) {
+      // Clean up checked rows that no longer exist in the data
+      if (this._checkedRows.length) {
+        const validIds = new Set(this.data.map((row) => String(row[this.id])));
+        const validCheckedRows = this._checkedRows.filter((id) =>
+          validIds.has(id)
+        );
+        if (validCheckedRows.length !== this._checkedRows.length) {
+          this._checkedRows = validCheckedRows;
+          this._checkedRowsChanged();
+        }
+      }
+
       this._checkableRowsCount = this.data.filter(
         (row) => row.selectable !== false
       ).length;

src/components/ha-date-input.ts

@@ -94,6 +94,12 @@ export class HaDateInput extends LitElement {
   }
 
   private _keyDown(ev: KeyboardEvent) {
+    if (["Space", "Enter"].includes(ev.code)) {
+      ev.preventDefault();
+      ev.stopPropagation();
+      this._openDialog();
+      return;
+    }
     if (!this.canClear) {
       return;
     }

src/components/ha-dialog.ts

@@ -90,7 +90,8 @@ export class HaDialog extends DialogBase {
       }
       .mdc-dialog__actions {
         justify-content: var(--justify-action-buttons, flex-end);
-        padding: 12px 16px 16px 16px;
+        padding: var(--ha-space-3) var(--ha-space-4) var(--ha-space-4)
+          var(--ha-space-4);
       }
       .mdc-dialog__actions span:nth-child(1) {
         flex: var(--secondary-action-button-flex, unset);
@@ -102,20 +103,21 @@ export class HaDialog extends DialogBase {
         align-items: var(--vertical-align-dialog, center);
       }
       .mdc-dialog__title {
-        padding: 16px 16px 0 16px;
+        padding: var(--ha-space-4) var(--ha-space-4) var(--ha-space-0)
+          var(--ha-space-4);
       }
       .mdc-dialog__title:has(span) {
-        padding: 12px 12px 0;
+        padding: var(--ha-space-3) var(--ha-space-3) var(--ha-space-0);
       }
       .mdc-dialog__title::before {
         content: unset;
       }
       .mdc-dialog .mdc-dialog__content {
         position: var(--dialog-content-position, relative);
-        padding: var(--dialog-content-padding, 24px);
+        padding: var(--dialog-content-padding, var(--ha-space-6));
       }
       :host([hideactions]) .mdc-dialog .mdc-dialog__content {
-        padding-bottom: var(--dialog-content-padding, 24px);
+        padding-bottom: var(--dialog-content-padding, var(--ha-space-6));
       }
       .mdc-dialog .mdc-dialog__surface {
         position: var(--dialog-surface-position, relative);
@@ -150,22 +152,22 @@ export class HaDialog extends DialogBase {
         text-overflow: ellipsis;
         white-space: nowrap;
         display: block;
-        padding-left: 4px;
-        padding-right: 4px;
-        margin-right: 12px;
-        margin-inline-end: 12px;
+        padding-left: var(--ha-space-1);
+        padding-right: var(--ha-space-1);
+        margin-right: var(--ha-space-3);
+        margin-inline-end: var(--ha-space-3);
         margin-inline-start: initial;
       }
       .header_button {
         text-decoration: none;
         color: inherit;
         inset-inline-start: initial;
-        inset-inline-end: -12px;
+        inset-inline-end: calc(var(--ha-space-3) * -1);
         direction: var(--direction);
       }
       .dialog-actions {
         inset-inline-start: initial !important;
-        inset-inline-end: 0px !important;
+        inset-inline-end: var(--ha-space-0) !important;
         direction: var(--direction);
       }
     `,

src/components/ha-hls-player.ts

@@ -60,6 +60,10 @@ class HaHLSPlayer extends LitElement {
   private static streamCount = 0;
 
   private _handleVisibilityChange = () => {
+    if (document.pictureInPictureElement) {
+      // video is playing in picture-in-picture mode, don't do anything
+      return;
+    }
     if (document.hidden) {
       this._cleanUp();
     } else {

src/components/ha-md-dialog.ts

@@ -175,10 +175,10 @@ export class HaMdDialog extends Dialog {
         }
 
         .container {
-          padding-top: var(--safe-area-inset-top);
-          padding-bottom: var(--safe-area-inset-bottom);
-          padding-left: var(--safe-area-inset-left);
-          padding-right: var(--safe-area-inset-right);
+          margin-top: var(--safe-area-inset-top, var(--ha-space-0));
+          margin-bottom: var(--safe-area-inset-bottom, var(--ha-space-0));
+          margin-left: var(--safe-area-inset-left, var(--ha-space-0));
+          margin-right: var(--safe-area-inset-right, var(--ha-space-0));
         }
       }
 
@@ -187,7 +187,7 @@ export class HaMdDialog extends Dialog {
       }
 
       slot[name="actions"]::slotted(*) {
-        padding: 16px;
+        padding: var(--ha-space-4);
       }
 
       .scroller {
@@ -195,7 +195,7 @@ export class HaMdDialog extends Dialog {
       }
 
       slot[name="content"]::slotted(*) {
-        padding: var(--dialog-content-padding, 24px);
+        padding: var(--dialog-content-padding, var(--ha-space-6));
       }
       .scrim {
         z-index: 10; /* overlay navigation */

src/components/ha-navigation-picker.ts

@@ -6,6 +6,7 @@ import { fireEvent } from "../common/dom/fire_event";
 import { titleCase } from "../common/string/title-case";
 import { fetchConfig } from "../data/lovelace/config/types";
 import type { LovelaceViewRawConfig } from "../data/lovelace/config/view";
+import { getDefaultPanelUrlPath } from "../data/panel";
 import type { HomeAssistant, PanelInfo, ValueChangedEvent } from "../types";
 import "./ha-combo-box";
 import type { HaComboBox } from "./ha-combo-box";
@@ -44,7 +45,7 @@ const createPanelNavigationItem = (hass: HomeAssistant, panel: PanelInfo) => ({
   path: `/${panel.url_path}`,
   icon: panel.icon ?? "mdi:view-dashboard",
   title:
-    panel.url_path === hass.defaultPanel
+    panel.url_path === getDefaultPanelUrlPath(hass)
       ? hass.localize("panel.states")
       : hass.localize(`panel.${panel.title}`) ||
         panel.title ||

src/components/ha-service-control.ts

@@ -33,6 +33,7 @@ import type { HomeAssistant, ValueChangedEvent } from "../types";
 import { documentationUrl } from "../util/documentation-url";
 import "./ha-checkbox";
 import "./ha-icon-button";
+import "./ha-markdown";
 import "./ha-selector/ha-selector";
 import "./ha-service-picker";
 import "./ha-service-section-icon";
@@ -684,10 +685,14 @@ export class HaServiceControl extends LitElement {
             dataField.key}</span
           >
           <span slot="description"
-            >${this.hass.localize(
-              `component.${domain}.services.${serviceName}.fields.${dataField.key}.description`
-            ) || dataField?.description}</span
-          >
+            ><ha-markdown
+              breaks
+              allow-svg
+              .content=${this.hass.localize(
+                `component.${domain}.services.${serviceName}.fields.${dataField.key}.description`
+              ) || dataField?.description}
+            ></ha-markdown>
+          </span>
           <ha-selector
             .context=${this._selectorContext(targetEntities)}
             .disabled=${this.disabled ||

src/components/ha-sidebar.ts

@@ -33,6 +33,7 @@ import { computeRTL } from "../common/util/compute_rtl";
 import { throttle } from "../common/util/throttle";
 import { subscribeFrontendUserData } from "../data/frontend";
 import type { ActionHandlerDetail } from "../data/lovelace/action_handler";
+import { getDefaultPanelUrlPath } from "../data/panel";
 import type { PersistentNotification } from "../data/persistent_notification";
 import { subscribeNotifications } from "../data/persistent_notification";
 import { subscribeRepairsIssueRegistry } from "../data/repairs";
@@ -142,7 +143,7 @@ const defaultPanelSorter = (
 export const computePanels = memoizeOne(
   (
     panels: HomeAssistant["panels"],
-    defaultPanel: HomeAssistant["defaultPanel"],
+    defaultPanel: string,
     panelsOrder: string[],
     hiddenPanels: string[],
     locale: HomeAssistant["locale"]
@@ -298,7 +299,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
       hass.localize !== oldHass.localize ||
       hass.locale !== oldHass.locale ||
       hass.states !== oldHass.states ||
-      hass.defaultPanel !== oldHass.defaultPanel ||
+      hass.userData !== oldHass.userData ||
+      hass.systemData !== oldHass.systemData ||
       hass.connected !== oldHass.connected
     );
   }
@@ -401,9 +403,11 @@ class HaSidebar extends SubscribeMixin(LitElement) {
       `;
     }
 
+    const defaultPanel = getDefaultPanelUrlPath(this.hass);
+
     const [beforeSpacer, afterSpacer] = computePanels(
       this.hass.panels,
-      this.hass.defaultPanel,
+      defaultPanel,
       this._panelOrder,
       this._hiddenPanels,
       this.hass.locale
@@ -418,23 +422,27 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         @scroll=${this._listboxScroll}
         @keydown=${this._listboxKeydown}
       >
-        ${this._renderPanels(beforeSpacer, selectedPanel)}
+        ${this._renderPanels(beforeSpacer, selectedPanel, defaultPanel)}
         ${this._renderSpacer()}
-        ${this._renderPanels(afterSpacer, selectedPanel)}
+        ${this._renderPanels(afterSpacer, selectedPanel, defaultPanel)}
         ${this._renderExternalConfiguration()}
       </ha-md-list>
     `;
   }
 
-  private _renderPanels(panels: PanelInfo[], selectedPanel: string) {
+  private _renderPanels(
+    panels: PanelInfo[],
+    selectedPanel: string,
+    defaultPanel: string
+  ) {
     return panels.map((panel) =>
       this._renderPanel(
         panel.url_path,
-        panel.url_path === this.hass.defaultPanel
+        panel.url_path === defaultPanel
           ? panel.title || this.hass.localize("panel.states")
           : this.hass.localize(`panel.${panel.title}`) || panel.title,
         panel.icon,
-        panel.url_path === this.hass.defaultPanel && !panel.icon
+        panel.url_path === defaultPanel && !panel.icon
           ? PANEL_ICONS.lovelace
           : panel.url_path in PANEL_ICONS
             ? PANEL_ICONS[panel.url_path]

src/components/ha-web-rtc-player.ts

@@ -62,6 +62,10 @@ class HaWebRtcPlayer extends LitElement {
   private _candidatesList: RTCIceCandidate[] = [];
 
   private _handleVisibilityChange = () => {
+    if (document.pictureInPictureElement) {
+      // video is playing in picture-in-picture mode, don't do anything
+      return;
+    }
     if (document.hidden) {
       this._cleanUp();
     } else {

src/components/search-input.ts

@@ -34,6 +34,7 @@ class SearchInput extends LitElement {
     return html`
       <ha-textfield
         .autofocus=${this.autofocus}
+        autocomplete="off"
         .label=${this.label || this.hass.localize("ui.common.search")}
         .value=${this.filter || ""}
         icon

src/data/area_floor.ts

@@ -1,3 +1,4 @@
+import { getAreasFloorHierarchy } from "../common/areas/areas-floor-hierarchy";
 import { computeAreaName } from "../common/entity/compute_area_name";
 import { computeDomain } from "../common/entity/compute_domain";
 import { computeFloorName } from "../common/entity/compute_floor_name";
@@ -12,11 +13,7 @@ import {
 } from "./device_registry";
 import type { HaEntityPickerEntityFilterFunc } from "./entity";
 import type { EntityRegistryDisplayEntry } from "./entity_registry";
-import {
-  floorCompare,
-  getFloorAreaLookup,
-  type FloorRegistryEntry,
-} from "./floor_registry";
+import type { FloorRegistryEntry } from "./floor_registry";
 
 export interface FloorComboBoxItem extends PickerComboBoxItem {
   type: "floor" | "area";
@@ -182,68 +179,59 @@ export const getAreasAndFloors = (
     );
   }
 
-  const floorAreaLookup = getFloorAreaLookup(outputAreas);
-  const unassignedAreas = Object.values(outputAreas).filter(
-    (area) => !area.floor_id || !floorAreaLookup[area.floor_id]
-  );
-
-  const compare = floorCompare(haFloors);
-
-  // @ts-ignore
-  const floorAreaEntries: [
-    FloorRegistryEntry | undefined,
-    AreaRegistryEntry[],
-  ][] = Object.entries(floorAreaLookup)
-    .map(([floorId, floorAreas]) => {
-      const floor = floors.find((fl) => fl.floor_id === floorId)!;
-      return [floor, floorAreas] as const;
-    })
-    .sort(([floorA], [floorB]) => compare(floorA.floor_id, floorB.floor_id));
+  const hierarchy = getAreasFloorHierarchy(floors, outputAreas);
 
   const items: FloorComboBoxItem[] = [];
 
-  floorAreaEntries.forEach(([floor, floorAreas]) => {
-    if (floor) {
-      const floorName = computeFloorName(floor);
+  hierarchy.floors.forEach((f) => {
+    const floor = haFloors[f.id];
+    const floorAreas = f.areas.map((areaId) => haAreas[areaId]);
 
-      const areaSearchLabels = floorAreas
-        .map((area) => {
-          const areaName = computeAreaName(area) || area.area_id;
-          return [area.area_id, areaName, ...area.aliases];
-        })
-        .flat();
+    const floorName = computeFloorName(floor);
+
+    const areaSearchLabels = floorAreas
+      .map((area) => {
+        const areaName = computeAreaName(area);
+        return [area.area_id, ...(areaName ? [areaName] : []), ...area.aliases];
+      })
+      .flat();
+
+    items.push({
+      id: formatId({ id: floor.floor_id, type: "floor" }),
+      type: "floor",
+      primary: floorName,
+      floor: floor,
+      icon: floor.icon || undefined,
+      search_labels: [
+        floor.floor_id,
+        floorName,
+        ...floor.aliases,
+        ...areaSearchLabels,
+      ],
+    });
 
-      items.push({
-        id: formatId({ id: floor.floor_id, type: "floor" }),
-        type: "floor",
-        primary: floorName,
-        floor: floor,
-        icon: floor.icon || undefined,
-        search_labels: [
-          floor.floor_id,
-          floorName,
-          ...floor.aliases,
-          ...areaSearchLabels,
-        ],
-      });
-    }
     items.push(
       ...floorAreas.map((area) => {
-        const areaName = computeAreaName(area) || area.area_id;
+        const areaName = computeAreaName(area);
         return {
           id: formatId({ id: area.area_id, type: "area" }),
           type: "area" as const,
-          primary: areaName,
+          primary: areaName || area.area_id,
           area: area,
           icon: area.icon || undefined,
-          search_labels: [area.area_id, areaName, ...area.aliases],
+          search_labels: [
+            area.area_id,
+            ...(areaName ? [areaName] : []),
+            ...area.aliases,
+          ],
         };
       })
     );
   });
 
   items.push(
-    ...unassignedAreas.map((area) => {
+    ...hierarchy.areas.map((areaId) => {
+      const area = haAreas[areaId];
       const areaName = computeAreaName(area) || area.area_id;
       return {
         id: formatId({ id: area.area_id, type: "area" }),

src/data/area_registry.ts

@@ -59,6 +59,15 @@ export const deleteAreaRegistryEntry = (hass: HomeAssistant, areaId: string) =>
     area_id: areaId,
   });
 
+export const reorderAreaRegistryEntries = (
+  hass: HomeAssistant,
+  areaIds: string[]
+) =>
+  hass.callWS({
+    type: "config/area_registry/reorder",
+    area_ids: areaIds,
+  });
+
 export const getAreaEntityLookup = (
   entities: EntityRegistryEntry[]
 ): AreaEntityLookup => {

src/data/calendar.ts

@@ -31,6 +31,7 @@ export interface CalendarEventData {
   dtend: string;
   rrule?: string;
   description?: string;
+  location?: string;
 }
 
 export interface CalendarEventMutableParams {
@@ -39,6 +40,7 @@ export interface CalendarEventMutableParams {
   dtend: string;
   rrule?: string;
   description?: string;
+  location?: string;
 }
 
 // The scope of a delete/update for a recurring event
@@ -96,6 +98,7 @@ export const fetchCalendarEvents = async (
         uid: ev.uid,
         summary: ev.summary,
         description: ev.description,
+        location: ev.location,
         dtstart: eventStart,
         dtend: eventEnd,
         recurrence_id: ev.recurrence_id,

src/data/floor_registry.ts

@@ -51,6 +51,15 @@ export const deleteFloorRegistryEntry = (
     floor_id: floorId,
   });
 
+export const reorderFloorRegistryEntries = (
+  hass: HomeAssistant,
+  floorIds: string[]
+) =>
+  hass.callWS({
+    type: "config/floor_registry/reorder",
+    floor_ids: floorIds,
+  });
+
 export const getFloorAreaLookup = (
   areas: AreaRegistryEntry[]
 ): FloorAreaLookup => {

src/data/frontend.ts

@@ -3,6 +3,7 @@ import type { Connection } from "home-assistant-js-websocket";
 export interface CoreFrontendUserData {
   showAdvanced?: boolean;
   showEntityIdPicker?: boolean;
+  defaultPanel?: string;
 }
 
 export interface SidebarFrontendUserData {
@@ -10,15 +11,24 @@ export interface SidebarFrontendUserData {
   hiddenPanels: string[];
 }
 
+export interface CoreFrontendSystemData {
+  defaultPanel?: string;
+}
+
 declare global {
   interface FrontendUserData {
     core: CoreFrontendUserData;
     sidebar: SidebarFrontendUserData;
   }
+  interface FrontendSystemData {
+    core: CoreFrontendSystemData;
+  }
 }
 
 export type ValidUserDataKey = keyof FrontendUserData;
 
+export type ValidSystemDataKey = keyof FrontendSystemData;
+
 export const fetchFrontendUserData = async <
   UserDataKey extends ValidUserDataKey,
 >(
@@ -59,3 +69,46 @@ export const subscribeFrontendUserData = <UserDataKey extends ValidUserDataKey>(
       key: userDataKey,
     }
   );
+
+export const fetchFrontendSystemData = async <
+  SystemDataKey extends ValidSystemDataKey,
+>(
+  conn: Connection,
+  key: SystemDataKey
+): Promise<FrontendSystemData[SystemDataKey] | null> => {
+  const result = await conn.sendMessagePromise<{
+    value: FrontendSystemData[SystemDataKey] | null;
+  }>({
+    type: "frontend/get_system_data",
+    key,
+  });
+  return result.value;
+};
+
+export const saveFrontendSystemData = async <
+  SystemDataKey extends ValidSystemDataKey,
+>(
+  conn: Connection,
+  key: SystemDataKey,
+  value: FrontendSystemData[SystemDataKey]
+): Promise<void> =>
+  conn.sendMessagePromise<undefined>({
+    type: "frontend/set_system_data",
+    key,
+    value,
+  });
+
+export const subscribeFrontendSystemData = <
+  SystemDataKey extends ValidSystemDataKey,
+>(
+  conn: Connection,
+  systemDataKey: SystemDataKey,
+  onChange: (data: { value: FrontendSystemData[SystemDataKey] | null }) => void
+) =>
+  conn.subscribeMessage<{ value: FrontendSystemData[SystemDataKey] | null }>(
+    onChange,
+    {
+      type: "frontend/subscribe_system_data",
+      key: systemDataKey,
+    }
+  );

src/data/panel.ts

@@ -1,26 +1,24 @@
-import { fireEvent } from "../common/dom/fire_event";
 import type { HomeAssistant, PanelInfo } from "../types";
 
 /** Panel to show when no panel is picked. */
 export const DEFAULT_PANEL = "lovelace";
 
-export const getStorageDefaultPanelUrlPath = (): string => {
+export const getLegacyDefaultPanelUrlPath = (): string | null => {
   const defaultPanel = window.localStorage.getItem("defaultPanel");
-
-  return defaultPanel ? JSON.parse(defaultPanel) : DEFAULT_PANEL;
+  return defaultPanel ? JSON.parse(defaultPanel) : null;
 };
 
-export const setDefaultPanel = (
-  element: HTMLElement,
-  urlPath: string
-): void => {
-  fireEvent(element, "hass-default-panel", { defaultPanel: urlPath });
-};
+export const getDefaultPanelUrlPath = (hass: HomeAssistant): string =>
+  hass.userData?.defaultPanel ||
+  hass.systemData?.defaultPanel ||
+  getLegacyDefaultPanelUrlPath() ||
+  DEFAULT_PANEL;
 
-export const getDefaultPanel = (hass: HomeAssistant): PanelInfo =>
-  hass.panels[hass.defaultPanel]
-    ? hass.panels[hass.defaultPanel]
-    : hass.panels[DEFAULT_PANEL];
+export const getDefaultPanel = (hass: HomeAssistant): PanelInfo => {
+  const panel = getDefaultPanelUrlPath(hass);
+
+  return (panel ? hass.panels[panel] : undefined) ?? hass.panels[DEFAULT_PANEL];
+};
 
 export const getPanelNameTranslationKey = (panel: PanelInfo) => {
   if (panel.url_path === "lovelace") {

src/dialogs/sidebar/dialog-edit-sidebar.ts

@@ -20,6 +20,7 @@ import {
 } from "../../data/frontend";
 import type { HomeAssistant } from "../../types";
 import { showConfirmationDialog } from "../generic/show-dialog-box";
+import { getDefaultPanelUrlPath } from "../../data/panel";
 
 @customElement("dialog-edit-sidebar")
 class DialogEditSidebar extends LitElement {
@@ -94,9 +95,11 @@ class DialogEditSidebar extends LitElement {
 
     const panels = this._panels(this.hass.panels);
 
+    const defaultPanel = getDefaultPanelUrlPath(this.hass);
+
     const [beforeSpacer, afterSpacer] = computePanels(
       this.hass.panels,
-      this.hass.defaultPanel,
+      defaultPanel,
       this._order,
       this._hidden,
       this.hass.locale
@@ -120,12 +123,12 @@ class DialogEditSidebar extends LitElement {
     ].map((panel) => ({
       value: panel.url_path,
       label:
-        panel.url_path === this.hass.defaultPanel
+        panel.url_path === defaultPanel
           ? panel.title || this.hass.localize("panel.states")
           : this.hass.localize(`panel.${panel.title}`) || panel.title || "?",
       icon: panel.icon || undefined,
       iconPath:
-        panel.url_path === this.hass.defaultPanel && !panel.icon
+        panel.url_path === defaultPanel && !panel.icon
           ? PANEL_ICONS.lovelace
           : panel.url_path in PANEL_ICONS
             ? PANEL_ICONS[panel.url_path]

src/layouts/home-assistant-main.ts

@@ -1,5 +1,5 @@
 import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import type { HASSDomEvent } from "../common/dom/fire_event";
 import { fireEvent } from "../common/dom/fire_event";
@@ -46,10 +46,13 @@ export class HomeAssistantMain extends LitElement {
   protected render(): TemplateResult {
     const sidebarNarrow = this._sidebarNarrow || this._externalSidebar;
 
+    const isPanelReady =
+      this.hass.panels && this.hass.userData && this.hass.systemData;
+
     return html`
       <ha-drawer
         .type=${sidebarNarrow ? "modal" : ""}
-        .open=${sidebarNarrow ? this._drawerOpen : undefined}
+        .open=${sidebarNarrow ? this._drawerOpen : false}
         .direction=${computeRTLDirection(this.hass)}
         @MDCDrawer:closed=${this._drawerClosed}
       >
@@ -59,12 +62,14 @@ export class HomeAssistantMain extends LitElement {
           .route=${this.route}
           .alwaysExpand=${sidebarNarrow || this.hass.dockedSidebar === "docked"}
         ></ha-sidebar>
-        <partial-panel-resolver
-          .narrow=${this.narrow}
-          .hass=${this.hass}
-          .route=${this.route}
-          slot="appContent"
-        ></partial-panel-resolver>
+        ${isPanelReady
+          ? html`<partial-panel-resolver
+              .narrow=${this.narrow}
+              .hass=${this.hass}
+              .route=${this.route}
+              slot="appContent"
+            ></partial-panel-resolver>`
+          : nothing}
       </ha-drawer>
     `;
   }

src/layouts/home-assistant.ts

@@ -1,10 +1,10 @@
+import type { Connection } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { html } from "lit";
 import { customElement, state } from "lit/decorators";
-import type { Connection } from "home-assistant-js-websocket";
+import { storage } from "../common/decorators/storage";
 import { isNavigationClick } from "../common/dom/is-navigation-click";
 import { navigate } from "../common/navigate";
-import { getStorageDefaultPanelUrlPath } from "../data/panel";
 import type { WindowWithPreloads } from "../data/preloads";
 import type { RecorderInfo } from "../data/recorder";
 import { getRecorderInfo } from "../data/recorder";
@@ -23,7 +23,6 @@ import {
 } from "../util/register-service-worker";
 import "./ha-init-page";
 import "./home-assistant-main";
-import { storage } from "../common/decorators/storage";
 
 const useHash = __DEMO__;
 const curPath = () =>
@@ -53,11 +52,6 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
     super();
     const path = curPath();
 
-    if (["", "/"].includes(path)) {
-      navigate(`/${getStorageDefaultPanelUrlPath()}${location.search}`, {
-        replace: true,
-      });
-    }
     this._route = {
       prefix: "",
       path,

src/panels/calendar/dialog-calendar-event-detail.ts

@@ -80,10 +80,12 @@ class DialogCalendarEventDetail extends LitElement {
               ${this._data!.rrule
                 ? this._renderRRuleAsText(this._data.rrule)
                 : ""}
+              ${this._data.location
+                ? html`${this._data.location} <br />`
+                : nothing}
               ${this._data.description
                 ? html`<br />
-                    <div class="description">${this._data.description}</div>
-                    <br />`
+                    <div class="description">${this._data.description}</div>`
                 : nothing}
             </div>
           </div>
@@ -241,7 +243,7 @@ class DialogCalendarEventDetail extends LitElement {
       haStyleDialog,
       css`
         state-info {
-          line-height: 40px;
+          margin-top: 24px;
         }
         ha-svg-icon {
           width: 40px;

src/panels/calendar/dialog-calendar-event-editor.ts

@@ -63,6 +63,8 @@ class DialogCalendarEventEditor extends LitElement {
 
   @state() private _description? = "";
 
+  @state() private _location? = "";
+
   @state() private _rrule?: string;
 
   @state() private _allDay = false;
@@ -79,6 +81,8 @@ class DialogCalendarEventEditor extends LitElement {
   // timezone, but floating without a timezone.
   private _timeZone?: string;
 
+  private _hasLocation = false;
+
   public showDialog(params: CalendarEventEditDialogParams): void {
     this._error = undefined;
     this._info = undefined;
@@ -99,6 +103,10 @@ class DialogCalendarEventEditor extends LitElement {
       this._allDay = isDate(entry.dtstart);
       this._summary = entry.summary;
       this._description = entry.description;
+      if (entry.location) {
+        this._hasLocation = true;
+        this._location = entry.location;
+      }
       this._rrule = entry.rrule;
       if (this._allDay) {
         this._dtstart = new Date(entry.dtstart + "T00:00:00");
@@ -130,6 +138,8 @@ class DialogCalendarEventEditor extends LitElement {
     this._dtend = undefined;
     this._summary = "";
     this._description = "";
+    this._location = "";
+    this._hasLocation = false;
     this._rrule = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -181,6 +191,15 @@ class DialogCalendarEventEditor extends LitElement {
             .validationMessage=${this.hass.localize("ui.common.error_required")}
             dialogInitialFocus
           ></ha-textfield>
+          <ha-textfield
+            class="location"
+            name="location"
+            .label=${this.hass.localize(
+              "ui.components.calendar.event.location"
+            )}
+            .value=${this._location}
+            @change=${this._handleLocationChanged}
+          ></ha-textfield>
           <ha-textarea
             class="description"
             name="description"
@@ -326,6 +345,10 @@ class DialogCalendarEventEditor extends LitElement {
     this._description = ev.target.value;
   }
 
+  private _handleLocationChanged(ev: Event) {
+    this._location = (ev.target as HTMLInputElement).value;
+  }
+
   private _handleRRuleChanged(ev) {
     this._rrule = ev.detail.value;
   }
@@ -399,6 +422,7 @@ class DialogCalendarEventEditor extends LitElement {
     const data: CalendarEventMutableParams = {
       summary: this._summary,
       description: this._description,
+      location: this._location || (this._hasLocation ? "" : undefined),
       rrule: this._rrule || undefined,
       dtstart: "",
       dtend: "",

src/panels/climate/strategies/climate-view-strategy.ts

@@ -1,21 +1,17 @@
 import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
+import { getAreasFloorHierarchy } from "../../../common/areas/areas-floor-hierarchy";
 import {
   findEntities,
   generateEntityFilter,
   type EntityFilter,
 } from "../../../common/entity/entity_filter";
+import { floorDefaultIcon } from "../../../components/ha-floor-icon";
 import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
 import type { LovelaceSectionRawConfig } from "../../../data/lovelace/config/section";
 import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../types";
-import {
-  computeAreaTileCardConfig,
-  getAreas,
-  getFloors,
-} from "../../lovelace/strategies/areas/helpers/areas-strategy-helper";
-import { getHomeStructure } from "../../lovelace/strategies/home/helpers/home-structure";
-import { floorDefaultIcon } from "../../../components/ha-floor-icon";
+import { computeAreaTileCardConfig } from "../../lovelace/strategies/areas/helpers/areas-strategy-helper";
 
 export interface ClimateViewStrategyConfig {
   type: "climate";
@@ -139,9 +135,9 @@ export class ClimateViewStrategy extends ReactiveElement {
     _config: ClimateViewStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
-    const areas = getAreas(hass.areas);
-    const floors = getFloors(hass.floors);
-    const home = getHomeStructure(floors, areas);
+    const areas = Object.values(hass.areas);
+    const floors = Object.values(hass.floors);
+    const hierarchy = getAreasFloorHierarchy(floors, areas);
 
     const sections: LovelaceSectionRawConfig[] = [];
 
@@ -153,10 +149,11 @@ export class ClimateViewStrategy extends ReactiveElement {
 
     const entities = findEntities(allEntities, climateFilters);
 
-    const floorCount = home.floors.length + (home.areas.length ? 1 : 0);
+    const floorCount =
+      hierarchy.floors.length + (hierarchy.areas.length ? 1 : 0);
 
     // Process floors
-    for (const floorStructure of home.floors) {
+    for (const floorStructure of hierarchy.floors) {
       const floorId = floorStructure.id;
       const areaIds = floorStructure.areas;
       const floor = hass.floors[floorId];
@@ -185,7 +182,7 @@ export class ClimateViewStrategy extends ReactiveElement {
     }
 
     // Process unassigned areas
-    if (home.areas.length > 0) {
+    if (hierarchy.areas.length > 0) {
       const section: LovelaceSectionRawConfig = {
         type: "grid",
         column_span: 2,
@@ -200,7 +197,7 @@ export class ClimateViewStrategy extends ReactiveElement {
         ],
       };
 
-      const areaCards = processAreasForClimate(home.areas, hass, entities);
+      const areaCards = processAreasForClimate(hierarchy.areas, hass, entities);
 
       if (areaCards.length > 0) {
         section.cards!.push(...areaCards);

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

@@ -2,38 +2,47 @@ import type { ActionDetail } from "@material/mwc-list";
 import {
   mdiDelete,
   mdiDotsVertical,
+  mdiDragHorizontalVariant,
   mdiHelpCircle,
   mdiPencil,
   mdiPlus,
 } from "@mdi/js";
 import {
-  LitElement,
-  type PropertyValues,
-  type TemplateResult,
   css,
   html,
+  LitElement,
   nothing,
+  type PropertyValues,
+  type TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
+import {
+  getAreasFloorHierarchy,
+  getAreasOrder,
+  getFloorOrder,
+  type AreasFloorHierarchy,
+} from "../../../common/areas/areas-floor-hierarchy";
 import { formatListWithAnds } from "../../../common/string/format-list";
 import "../../../components/ha-fab";
 import "../../../components/ha-floor-icon";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-list-item";
 import "../../../components/ha-sortable";
+import type { HaSortableOptions } from "../../../components/ha-sortable";
 import "../../../components/ha-svg-icon";
 import type { AreaRegistryEntry } from "../../../data/area_registry";
 import {
   createAreaRegistryEntry,
+  reorderAreaRegistryEntries,
   updateAreaRegistryEntry,
 } from "../../../data/area_registry";
 import type { FloorRegistryEntry } from "../../../data/floor_registry";
 import {
   createFloorRegistryEntry,
   deleteFloorRegistryEntry,
-  getFloorAreaLookup,
+  reorderFloorRegistryEntries,
   updateFloorRegistryEntry,
 } from "../../../data/floor_registry";
 import {
@@ -42,6 +51,7 @@ import {
 } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-tabs-subpage";
 import type { HomeAssistant, Route } from "../../../types";
+import { showToast } from "../../../util/toast";
 import "../ha-config-section";
 import { configSections } from "../ha-panel-config";
 import {
@@ -52,7 +62,17 @@ import { showFloorRegistryDetailDialog } from "./show-dialog-floor-registry-deta
 
 const UNASSIGNED_FLOOR = "__unassigned__";
 
-const SORT_OPTIONS = { sort: false, delay: 500, delayOnTouchOnly: true };
+const SORT_OPTIONS: HaSortableOptions = {
+  sort: true,
+  delay: 500,
+  delayOnTouchOnly: true,
+};
+
+interface AreaStats {
+  devices: number;
+  services: number;
+  entities: number;
+}
 
 @customElement("ha-config-areas-dashboard")
 export class HaConfigAreasDashboard extends LitElement {
@@ -64,55 +84,50 @@ export class HaConfigAreasDashboard extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
-  @state() private _areas: AreaRegistryEntry[] = [];
+  @state() private _hierarchy?: AreasFloorHierarchy;
 
-  private _processAreas = memoizeOne(
+  private _blockHierarchyUpdate = false;
+
+  private _blockHierarchyUpdateTimeout?: number;
+
+  private _processAreasStats = memoizeOne(
     (
-      areas: AreaRegistryEntry[],
+      areas: HomeAssistant["areas"],
       devices: HomeAssistant["devices"],
-      entities: HomeAssistant["entities"],
-      floors: HomeAssistant["floors"]
-    ) => {
-      const processArea = (area: AreaRegistryEntry) => {
-        let noDevicesInArea = 0;
-        let noServicesInArea = 0;
-        let noEntitiesInArea = 0;
+      entities: HomeAssistant["entities"]
+    ): Map<string, AreaStats> => {
+      const computeAreaStats = (area: AreaRegistryEntry) => {
+        let devicesCount = 0;
+        let servicesCount = 0;
+        let entitiesCount = 0;
 
         for (const device of Object.values(devices)) {
           if (device.area_id === area.area_id) {
             if (device.entry_type === "service") {
-              noServicesInArea++;
+              servicesCount++;
             } else {
-              noDevicesInArea++;
+              devicesCount++;
             }
           }
         }
 
         for (const entity of Object.values(entities)) {
           if (entity.area_id === area.area_id) {
-            noEntitiesInArea++;
+            entitiesCount++;
           }
         }
 
         return {
-          ...area,
-          devices: noDevicesInArea,
-          services: noServicesInArea,
-          entities: noEntitiesInArea,
+          devices: devicesCount,
+          services: servicesCount,
+          entities: entitiesCount,
         };
       };
-
-      const floorAreaLookup = getFloorAreaLookup(areas);
-      const unassignedAreas = areas.filter(
-        (area) => !area.floor_id || !floorAreaLookup[area.floor_id]
-      );
-      return {
-        floors: Object.values(floors).map((floor) => ({
-          ...floor,
-          areas: (floorAreaLookup[floor.floor_id] || []).map(processArea),
-        })),
-        unassignedAreas: unassignedAreas.map(processArea),
-      };
+      const areaStats = new Map<string, AreaStats>();
+      Object.values(areas).forEach((area) => {
+        areaStats.set(area.area_id, computeAreaStats(area));
+      });
+      return areaStats;
     }
   );
 
@@ -120,25 +135,32 @@ export class HaConfigAreasDashboard extends LitElement {
     super.willUpdate(changedProperties);
     if (changedProperties.has("hass")) {
       const oldHass = changedProperties.get("hass");
-      if (this.hass.areas !== oldHass?.areas) {
-        this._areas = Object.values(this.hass.areas);
+      if (
+        (this.hass.areas !== oldHass?.areas ||
+          this.hass.floors !== oldHass?.floors) &&
+        !this._blockHierarchyUpdate
+      ) {
+        this._computeHierarchy();
       }
     }
   }
 
-  protected render(): TemplateResult {
-    const areasAndFloors =
-      !this.hass.areas ||
-      !this.hass.devices ||
-      !this.hass.entities ||
-      !this.hass.floors
-        ? undefined
-        : this._processAreas(
-            this._areas,
-            this.hass.devices,
-            this.hass.entities,
-            this.hass.floors
-          );
+  private _computeHierarchy() {
+    this._hierarchy = getAreasFloorHierarchy(
+      Object.values(this.hass.floors),
+      Object.values(this.hass.areas)
+    );
+  }
+
+  protected render(): TemplateResult<1> | typeof nothing {
+    if (!this._hierarchy) {
+      return nothing;
+    }
+    const areasStats = this._processAreasStats(
+      this.hass.areas,
+      this.hass.devices,
+      this.hass.entities
+    );
 
     return html`
       <hass-tabs-subpage
@@ -157,81 +179,120 @@ export class HaConfigAreasDashboard extends LitElement {
           @click=${this._showHelp}
         ></ha-icon-button>
         <div class="container">
-          ${areasAndFloors?.floors.map(
-            (floor) =>
-              html`<div class="floor">
-                <div class="header">
-                  <h2>
-                    <ha-floor-icon .floor=${floor}></ha-floor-icon>
-                    ${floor.name}
-                  </h2>
-                  <ha-button-menu
-                    .floor=${floor}
-                    @action=${this._handleFloorAction}
+          <ha-sortable
+            handle-selector=".handle"
+            draggable-selector=".floor"
+            @item-moved=${this._floorMoved}
+            .options=${SORT_OPTIONS}
+            group="floors"
+            invert-swap
+          >
+            <div class="floors">
+              ${this._hierarchy.floors.map(({ areas, id }) => {
+                const floor = this.hass.floors[id];
+                if (!floor) {
+                  return nothing;
+                }
+                return html`
+                  <div class="floor">
+                    <div class="header">
+                      <h2>
+                        <ha-floor-icon .floor=${floor}></ha-floor-icon>
+                        ${floor.name}
+                      </h2>
+                      <div class="actions">
+                        <ha-svg-icon
+                          class="handle"
+                          .path=${mdiDragHorizontalVariant}
+                        ></ha-svg-icon>
+                        <ha-button-menu
+                          .floor=${floor}
+                          @action=${this._handleFloorAction}
+                        >
+                          <ha-icon-button
+                            slot="trigger"
+                            .path=${mdiDotsVertical}
+                          ></ha-icon-button>
+                          <ha-list-item graphic="icon"
+                            ><ha-svg-icon
+                              .path=${mdiPencil}
+                              slot="graphic"
+                            ></ha-svg-icon
+                            >${this.hass.localize(
+                              "ui.panel.config.areas.picker.floor.edit_floor"
+                            )}</ha-list-item
+                          >
+                          <ha-list-item class="warning" graphic="icon"
+                            ><ha-svg-icon
+                              class="warning"
+                              .path=${mdiDelete}
+                              slot="graphic"
+                            ></ha-svg-icon
+                            >${this.hass.localize(
+                              "ui.panel.config.areas.picker.floor.delete_floor"
+                            )}</ha-list-item
+                          >
+                        </ha-button-menu>
+                      </div>
+                    </div>
+                    <ha-sortable
+                      handle-selector="a"
+                      draggable-selector="a"
+                      @item-added=${this._areaAdded}
+                      @item-moved=${this._areaMoved}
+                      group="areas"
+                      .options=${SORT_OPTIONS}
+                      .floor=${floor.floor_id}
+                    >
+                      <div class="areas">
+                        ${areas.map((areaId) => {
+                          const area = this.hass.areas[areaId];
+                          if (!area) {
+                            return nothing;
+                          }
+                          const stats = areasStats.get(area.area_id);
+                          return this._renderArea(area, stats);
+                        })}
+                      </div>
+                    </ha-sortable>
+                  </div>
+                `;
+              })}
+            </div>
+          </ha-sortable>
+
+          ${this._hierarchy.areas.length
+            ? html`
+                <div class="floor">
+                  <div class="header">
+                    <h2>
+                      ${this.hass.localize(
+                        "ui.panel.config.areas.picker.unassigned_areas"
+                      )}
+                    </h2>
+                  </div>
+                  <ha-sortable
+                    handle-selector="a"
+                    draggable-selector="a"
+                    @item-added=${this._areaAdded}
+                    @item-moved=${this._areaMoved}
+                    group="areas"
+                    .options=${SORT_OPTIONS}
+                    .floor=${UNASSIGNED_FLOOR}
                   >
-                    <ha-icon-button
-                      slot="trigger"
-                      .path=${mdiDotsVertical}
-                    ></ha-icon-button>
-                    <ha-list-item graphic="icon"
-                      ><ha-svg-icon
-                        .path=${mdiPencil}
-                        slot="graphic"
-                      ></ha-svg-icon
-                      >${this.hass.localize(
-                        "ui.panel.config.areas.picker.floor.edit_floor"
-                      )}</ha-list-item
-                    >
-                    <ha-list-item class="warning" graphic="icon"
-                      ><ha-svg-icon
-                        class="warning"
-                        .path=${mdiDelete}
-                        slot="graphic"
-                      ></ha-svg-icon
-                      >${this.hass.localize(
-                        "ui.panel.config.areas.picker.floor.delete_floor"
-                      )}</ha-list-item
-                    >
-                  </ha-button-menu>
+                    <div class="areas">
+                      ${this._hierarchy.areas.map((areaId) => {
+                        const area = this.hass.areas[areaId];
+                        if (!area) {
+                          return nothing;
+                        }
+                        const stats = areasStats.get(area.area_id);
+                        return this._renderArea(area, stats);
+                      })}
+                    </div>
+                  </ha-sortable>
                 </div>
-                <ha-sortable
-                  handle-selector="a"
-                  draggable-selector="a"
-                  @item-added=${this._areaAdded}
-                  group="floor"
-                  .options=${SORT_OPTIONS}
-                  .floor=${floor.floor_id}
-                >
-                  <div class="areas">
-                    ${floor.areas.map((area) => this._renderArea(area))}
-                  </div>
-                </ha-sortable>
-              </div>`
-          )}
-          ${areasAndFloors?.unassignedAreas.length
-            ? html`<div class="floor">
-                <div class="header">
-                  <h2>
-                    ${this.hass.localize(
-                      "ui.panel.config.areas.picker.unassigned_areas"
-                    )}
-                  </h2>
-                </div>
-                <ha-sortable
-                  handle-selector="a"
-                  draggable-selector="a"
-                  @item-added=${this._areaAdded}
-                  group="floor"
-                  .options=${SORT_OPTIONS}
-                  .floor=${UNASSIGNED_FLOOR}
-                >
-                  <div class="areas">
-                    ${areasAndFloors?.unassignedAreas.map((area) =>
-                      this._renderArea(area)
-                    )}
-                  </div>
-                </ha-sortable>
-              </div>`
+              `
             : nothing}
         </div>
         <ha-fab
@@ -259,56 +320,60 @@ export class HaConfigAreasDashboard extends LitElement {
     `;
   }
 
-  private _renderArea(area) {
-    return html`<a
-      href=${`/config/areas/area/${area.area_id}`}
-      .sortableData=${area}
-    >
-      <ha-card outlined>
-        <div
-          style=${styleMap({
-            backgroundImage: area.picture ? `url(${area.picture})` : undefined,
-          })}
-          class="picture ${!area.picture ? "placeholder" : ""}"
-        >
-          ${!area.picture && area.icon
-            ? html`<ha-icon .icon=${area.icon}></ha-icon>`
-            : ""}
-        </div>
-        <div class="card-header">
-          ${area.name}
-          <ha-icon-button
-            .area=${area}
-            .path=${mdiPencil}
-            @click=${this._openAreaDetails}
-          ></ha-icon-button>
-        </div>
-        <div class="card-content">
-          <div>
-            ${formatListWithAnds(
-              this.hass.locale,
-              [
-                area.devices &&
-                  this.hass.localize(
-                    "ui.panel.config.integrations.config_entry.devices",
-                    { count: area.devices }
-                  ),
-                area.services &&
-                  this.hass.localize(
-                    "ui.panel.config.integrations.config_entry.services",
-                    { count: area.services }
-                  ),
-                area.entities &&
-                  this.hass.localize(
-                    "ui.panel.config.integrations.config_entry.entities",
-                    { count: area.entities }
-                  ),
-              ].filter((v): v is string => Boolean(v))
-            )}
+  private _renderArea(
+    area: AreaRegistryEntry,
+    stats: AreaStats | undefined
+  ): TemplateResult<1> {
+    return html`
+      <a href=${`/config/areas/area/${area.area_id}`} .sortableData=${area}>
+        <ha-card outlined>
+          <div
+            style=${styleMap({
+              backgroundImage: area.picture
+                ? `url(${area.picture})`
+                : undefined,
+            })}
+            class="picture ${!area.picture ? "placeholder" : ""}"
+          >
+            ${!area.picture && area.icon
+              ? html`<ha-icon .icon=${area.icon}></ha-icon>`
+              : ""}
           </div>
-        </div>
-      </ha-card>
-    </a>`;
+          <div class="card-header">
+            ${area.name}
+            <ha-icon-button
+              .area=${area}
+              .path=${mdiPencil}
+              @click=${this._openAreaDetails}
+            ></ha-icon-button>
+          </div>
+          <div class="card-content">
+            <div>
+              ${formatListWithAnds(
+                this.hass.locale,
+                [
+                  stats?.devices &&
+                    this.hass.localize(
+                      "ui.panel.config.integrations.config_entry.devices",
+                      { count: stats.devices }
+                    ),
+                  stats?.services &&
+                    this.hass.localize(
+                      "ui.panel.config.integrations.config_entry.services",
+                      { count: stats.services }
+                    ),
+                  stats?.entities &&
+                    this.hass.localize(
+                      "ui.panel.config.integrations.config_entry.entities",
+                      { count: stats.entities }
+                    ),
+                ].filter((v): v is string => Boolean(v))
+              )}
+            </div>
+          </div>
+        </ha-card>
+      </a>
+    `;
   }
 
   protected firstUpdated(changedProps) {
@@ -326,24 +391,170 @@ export class HaConfigAreasDashboard extends LitElement {
     });
   }
 
+  private async _floorMoved(ev) {
+    ev.stopPropagation();
+    if (!this.hass || !this._hierarchy) {
+      return;
+    }
+    const { oldIndex, newIndex } = ev.detail;
+
+    const reorderFloors = (
+      floors: AreasFloorHierarchy["floors"],
+      oldIdx: number,
+      newIdx: number
+    ) => {
+      const newFloors = [...floors];
+      const [movedFloor] = newFloors.splice(oldIdx, 1);
+      newFloors.splice(newIdx, 0, movedFloor);
+      return newFloors;
+    };
+
+    // Optimistically update UI
+    this._hierarchy = {
+      ...this._hierarchy,
+      floors: reorderFloors(this._hierarchy.floors, oldIndex, newIndex),
+    };
+
+    const areaOrder = getAreasOrder(this._hierarchy);
+    const floorOrder = getFloorOrder(this._hierarchy);
+
+    // Block hierarchy updates for 500ms to avoid flickering
+    // because of multiple async updates
+    this._blockHierarchyUpdateFor(500);
+
+    try {
+      await reorderAreaRegistryEntries(this.hass, areaOrder);
+      await reorderFloorRegistryEntries(this.hass, floorOrder);
+    } catch {
+      showToast(this, {
+        message: this.hass.localize(
+          "ui.panel.config.areas.picker.floor_reorder_failed"
+        ),
+      });
+      // Revert on error
+      this._computeHierarchy();
+    }
+  }
+
+  private async _areaMoved(ev) {
+    ev.stopPropagation();
+    if (!this.hass || !this._hierarchy) {
+      return;
+    }
+    const { floor } = ev.currentTarget;
+    const { oldIndex, newIndex } = ev.detail;
+
+    const floorId = floor === UNASSIGNED_FLOOR ? null : floor;
+
+    // Reorder areas within the same floor
+    const reorderAreas = (areas: string[], oldIdx: number, newIdx: number) => {
+      const newAreas = [...areas];
+      const [movedArea] = newAreas.splice(oldIdx, 1);
+      newAreas.splice(newIdx, 0, movedArea);
+      return newAreas;
+    };
+
+    // Optimistically update UI
+    this._hierarchy = {
+      ...this._hierarchy,
+      floors: this._hierarchy.floors.map((f) => {
+        if (f.id === floorId) {
+          return {
+            ...f,
+            areas: reorderAreas(f.areas, oldIndex, newIndex),
+          };
+        }
+        return f;
+      }),
+      areas:
+        floorId === null
+          ? reorderAreas(this._hierarchy.areas, oldIndex, newIndex)
+          : this._hierarchy.areas,
+    };
+
+    const areaOrder = getAreasOrder(this._hierarchy);
+
+    try {
+      await reorderAreaRegistryEntries(this.hass, areaOrder);
+    } catch {
+      showToast(this, {
+        message: this.hass.localize(
+          "ui.panel.config.areas.picker.area_move_failed"
+        ),
+      });
+      // Revert on error
+      this._computeHierarchy();
+    }
+  }
+
   private async _areaAdded(ev) {
     ev.stopPropagation();
+    if (!this.hass || !this._hierarchy) {
+      return;
+    }
     const { floor } = ev.currentTarget;
+    const { data: area, index } = ev.detail;
 
     const newFloorId = floor === UNASSIGNED_FLOOR ? null : floor;
 
-    const { data: area } = ev.detail;
+    // Insert area at the specified index
+    const insertAtIndex = (areas: string[], areaId: string, idx: number) => {
+      const newAreas = [...areas];
+      newAreas.splice(idx, 0, areaId);
+      return newAreas;
+    };
 
-    this._areas = this._areas.map<AreaRegistryEntry>((a) => {
-      if (a.area_id === area.area_id) {
-        return { ...a, floor_id: newFloorId };
-      }
-      return a;
-    });
+    // Optimistically update UI
+    this._hierarchy = {
+      ...this._hierarchy,
+      floors: this._hierarchy.floors.map((f) => {
+        if (f.id === newFloorId) {
+          return {
+            ...f,
+            areas: insertAtIndex(f.areas, area.area_id, index),
+          };
+        }
+        return {
+          ...f,
+          areas: f.areas.filter((id) => id !== area.area_id),
+        };
+      }),
+      areas:
+        newFloorId === null
+          ? insertAtIndex(this._hierarchy.areas, area.area_id, index)
+          : this._hierarchy.areas.filter((id) => id !== area.area_id),
+    };
 
-    await updateAreaRegistryEntry(this.hass, area.area_id, {
-      floor_id: newFloorId,
-    });
+    const areaOrder = getAreasOrder(this._hierarchy);
+
+    // Block hierarchy updates for 500ms to avoid flickering
+    // because of multiple async updates
+    this._blockHierarchyUpdateFor(500);
+
+    try {
+      await reorderAreaRegistryEntries(this.hass, areaOrder);
+      await updateAreaRegistryEntry(this.hass, area.area_id, {
+        floor_id: newFloorId,
+      });
+    } catch {
+      showToast(this, {
+        message: this.hass.localize(
+          "ui.panel.config.areas.picker.area_move_failed"
+        ),
+      });
+      // Revert on error
+      this._computeHierarchy();
+    }
+  }
+
+  private _blockHierarchyUpdateFor(time: number) {
+    this._blockHierarchyUpdate = true;
+    if (this._blockHierarchyUpdateTimeout) {
+      window.clearTimeout(this._blockHierarchyUpdateTimeout);
+    }
+    this._blockHierarchyUpdateTimeout = window.setTimeout(() => {
+      this._blockHierarchyUpdate = false;
+    }, time);
   }
 
   private _handleFloorAction(ev: CustomEvent<ActionDetail>) {
@@ -463,6 +674,10 @@ export class HaConfigAreasDashboard extends LitElement {
     .header ha-icon {
       margin-inline-end: 8px;
     }
+    .header .actions {
+      display: flex;
+      align-items: center;
+    }
     .areas {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
@@ -473,6 +688,10 @@ export class HaConfigAreasDashboard extends LitElement {
     .areas > * {
       max-width: 500px;
     }
+    .handle {
+      cursor: move; /* fallback if grab cursor is unsupported */
+      cursor: grab;
+    }
     ha-card {
       overflow: hidden;
     }

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

@@ -1336,7 +1336,7 @@ class DialogAddAutomationElement
           --md-list-item-trailing-space: var(--md-list-item-leading-space);
           --md-list-item-bottom-space: var(--ha-space-1);
           --md-list-item-top-space: var(--md-list-item-bottom-space);
-          --md-list-item-supporting-text-font: var(--ha-font-size-s);
+          --md-list-item-supporting-text-font: var(--ha-font-family-body);
           --md-list-item-one-line-container-height: var(--ha-space-10);
         }
         ha-bottom-sheet .groups {
@@ -1400,7 +1400,7 @@ class DialogAddAutomationElement
           --md-list-item-trailing-space: var(--md-list-item-leading-space);
           --md-list-item-bottom-space: var(--ha-space-2);
           --md-list-item-top-space: var(--md-list-item-bottom-space);
-          --md-list-item-supporting-text-font: var(--ha-font-size-s);
+          --md-list-item-supporting-text-font: var(--ha-font-family-body);
           gap: var(--ha-space-2);
           padding: var(--ha-space-0) var(--ha-space-4);
         }

src/panels/config/automation/ha-automation-picker.ts

@@ -1161,6 +1161,9 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
   private async _delete(automation) {
     try {
       await deleteAutomation(this.hass, automation.attributes.id);
+      this._selected = this._selected.filter(
+        (entityId) => entityId !== automation.entity_id
+      );
     } catch (err: any) {
       await showAlertDialog(this, {
         text:

src/panels/config/integrations/ha-config-entry-device-row.ts

@@ -87,7 +87,7 @@ class HaConfigEntryDeviceRow extends LitElement {
       ${!this.narrow
         ? html`<ha-icon-button
             slot="end"
-            @click=${this._handleEditDevice}
+            @click=${this._handleEditDeviceButton}
             .path=${mdiPencil}
             .label=${this.hass.localize(
               "ui.panel.config.integrations.config_entry.device.edit"
@@ -106,7 +106,7 @@ class HaConfigEntryDeviceRow extends LitElement {
           .path=${mdiDotsVertical}
         ></ha-icon-button>
         ${this.narrow
-          ? html`<ha-md-menu-item @click=${this._handleEditDevice}>
+          ? html`<ha-md-menu-item .clickAction=${this._handleEditDevice}>
               <ha-svg-icon .path=${mdiPencil} slot="start"></ha-svg-icon>
               ${this.hass.localize(
                 "ui.panel.config.integrations.config_entry.device.edit"
@@ -115,7 +115,7 @@ class HaConfigEntryDeviceRow extends LitElement {
           : nothing}
         ${entities.length
           ? html`
-              <ha-md-menu-item @click=${this._handleNavigateToEntities}>
+              <ha-md-menu-item .clickAction=${this._handleNavigateToEntities}>
                 <ha-svg-icon
                   .path=${mdiShapeOutline}
                   slot="start"
@@ -130,7 +130,7 @@ class HaConfigEntryDeviceRow extends LitElement {
           : nothing}
         <ha-md-menu-item
           class=${device.disabled_by !== "user" ? "warning" : ""}
-          @click=${this._handleDisableDevice}
+          .clickAction=${this._handleDisableDevice}
           .disabled=${device.disabled_by !== "user" && device.disabled_by}
         >
           <ha-svg-icon .path=${mdiStopCircleOutline} slot="start"></ha-svg-icon>
@@ -160,7 +160,7 @@ class HaConfigEntryDeviceRow extends LitElement {
         ${this.entry.supports_remove_device
           ? html`<ha-md-menu-item
               class="warning"
-              @click=${this._handleDeleteDevice}
+              .clickAction=${this._handleDeleteDevice}
             >
               <ha-svg-icon .path=${mdiDelete} slot="start"></ha-svg-icon>
               ${this.hass.localize(
@@ -175,21 +175,25 @@ class HaConfigEntryDeviceRow extends LitElement {
   private _getEntities = (): EntityRegistryEntry[] =>
     this.entities?.filter((entity) => entity.device_id === this.device.id);
 
-  private _handleEditDevice(ev: MouseEvent) {
+  private _handleEditDeviceButton(ev: MouseEvent) {
     ev.stopPropagation(); // Prevent triggering the click handler on the list item
+    this._handleEditDevice();
+  }
+
+  private _handleEditDevice = () => {
     showDeviceRegistryDetailDialog(this, {
       device: this.device,
       updateEntry: async (updates) => {
         await updateDeviceRegistryEntry(this.hass, this.device.id, updates);
       },
     });
-  }
+  };
 
-  private _handleNavigateToEntities() {
+  private _handleNavigateToEntities = () => {
     navigate(`/config/entities/?historyBack=1&device=${this.device.id}`);
-  }
+  };
 
-  private async _handleDisableDevice() {
+  private _handleDisableDevice = async () => {
     const disable = this.device.disabled_by === null;
 
     if (disable) {
@@ -263,9 +267,9 @@ class HaConfigEntryDeviceRow extends LitElement {
     await updateDeviceRegistryEntry(this.hass, this.device.id, {
       disabled_by: disable ? "user" : null,
     });
-  }
+  };
 
-  private async _handleDeleteDevice() {
+  private _handleDeleteDevice = async () => {
     const entry = this.entry;
     const confirmed = await showConfirmationDialog(this, {
       text: this.hass.localize("ui.panel.config.devices.confirm_delete"),
@@ -290,7 +294,7 @@ class HaConfigEntryDeviceRow extends LitElement {
         text: err.message,
       });
     }
-  }
+  };
 
   private _handleNavigateToDevice() {
     navigate(`/config/devices/device/${this.device.id}`);

src/panels/config/integrations/ha-config-entry-row.ts

@@ -302,7 +302,7 @@ class HaConfigEntryRow extends LitElement {
           item.supports_unload &&
           item.source !== "system"
             ? html`
-                <ha-md-menu-item @click=${this._handleReload}>
+                <ha-md-menu-item .clickAction=${this._handleReload}>
                   <ha-svg-icon slot="start" .path=${mdiReload}></ha-svg-icon>
                   ${this.hass.localize(
                     "ui.panel.config.integrations.config_entry.reload"
@@ -311,14 +311,14 @@ class HaConfigEntryRow extends LitElement {
               `
             : nothing}
 
-          <ha-md-menu-item @click=${this._handleRename} graphic="icon">
+          <ha-md-menu-item .clickAction=${this._handleRename} graphic="icon">
             <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
             ${this.hass.localize(
               "ui.panel.config.integrations.config_entry.rename"
             )}
           </ha-md-menu-item>
 
-          <ha-md-menu-item @click=${this._handleCopy} graphic="icon">
+          <ha-md-menu-item .clickAction=${this._handleCopy} graphic="icon">
             <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
             ${this.hass.localize(
               "ui.panel.config.integrations.config_entry.copy"
@@ -328,7 +328,7 @@ class HaConfigEntryRow extends LitElement {
           ${Object.keys(item.supported_subentry_types).map(
             (flowType) =>
               html`<ha-md-menu-item
-                @click=${this._addSubEntry}
+                .clickAction=${this._addSubEntry}
                 .entry=${item}
                 .flowType=${flowType}
                 graphic="icon"
@@ -360,7 +360,7 @@ class HaConfigEntryRow extends LitElement {
           item.supports_reconfigure &&
           item.source !== "system"
             ? html`
-                <ha-md-menu-item @click=${this._handleReconfigure}>
+                <ha-md-menu-item .clickAction=${this._handleReconfigure}>
                   <ha-svg-icon slot="start" .path=${mdiWrench}></ha-svg-icon>
                   ${this.hass.localize(
                     "ui.panel.config.integrations.config_entry.reconfigure"
@@ -369,7 +369,10 @@ class HaConfigEntryRow extends LitElement {
               `
             : nothing}
 
-          <ha-md-menu-item @click=${this._handleSystemOptions} graphic="icon">
+          <ha-md-menu-item
+            .clickAction=${this._handleSystemOptions}
+            graphic="icon"
+          >
             <ha-svg-icon slot="start" .path=${mdiCogOutline}></ha-svg-icon>
             ${this.hass.localize(
               "ui.panel.config.integrations.config_entry.system_options"
@@ -377,7 +380,7 @@ class HaConfigEntryRow extends LitElement {
           </ha-md-menu-item>
           ${item.disabled_by === "user"
             ? html`
-                <ha-md-menu-item @click=${this._handleEnable}>
+                <ha-md-menu-item .clickAction=${this._handleEnable}>
                   <ha-svg-icon
                     slot="start"
                     .path=${mdiPlayCircleOutline}
@@ -389,7 +392,7 @@ class HaConfigEntryRow extends LitElement {
               ? html`
                   <ha-md-menu-item
                     class="warning"
-                    @click=${this._handleDisable}
+                    .clickAction=${this._handleDisable}
                     graphic="icon"
                   >
                     <ha-svg-icon
@@ -403,7 +406,10 @@ class HaConfigEntryRow extends LitElement {
               : nothing}
           ${item.source !== "system"
             ? html`
-                <ha-md-menu-item class="warning" @click=${this._handleDelete}>
+                <ha-md-menu-item
+                  class="warning"
+                  .clickAction=${this._handleDelete}
+                >
                   <ha-svg-icon
                     slot="start"
                     class="warning"
@@ -611,7 +617,7 @@ class HaConfigEntryRow extends LitElement {
     }
   }
 
-  private async _handleReload() {
+  private _handleReload = async () => {
     const result = await reloadConfigEntry(this.hass, this.entry.entry_id);
     const locale_key = result.require_restart
       ? "reload_restart_confirm"
@@ -621,9 +627,9 @@ class HaConfigEntryRow extends LitElement {
         `ui.panel.config.integrations.config_entry.${locale_key}`
       ),
     });
-  }
+  };
 
-  private async _handleReconfigure() {
+  private _handleReconfigure = async () => {
     showConfigFlowDialog(this, {
       startFlowHandler: this.entry.domain,
       showAdvanced: this.hass.userData?.showAdvanced,
@@ -631,18 +637,18 @@ class HaConfigEntryRow extends LitElement {
       entryId: this.entry.entry_id,
       navigateToResult: true,
     });
-  }
+  };
 
-  private async _handleCopy() {
+  private _handleCopy = async () => {
     await copyToClipboard(this.entry.entry_id);
     showToast(this, {
       message:
         this.hass?.localize("ui.common.copied_clipboard") ||
         "Copied to clipboard",
     });
-  }
+  };
 
-  private async _handleRename() {
+  private _handleRename = async () => {
     const newName = await showPromptDialog(this, {
       title: this.hass.localize("ui.panel.config.integrations.rename_dialog"),
       defaultValue: this.entry.title,
@@ -656,7 +662,7 @@ class HaConfigEntryRow extends LitElement {
     await updateConfigEntry(this.hass, this.entry.entry_id, {
       title: newName,
     });
-  }
+  };
 
   private async _signUrl(ev) {
     const anchor = ev.currentTarget;
@@ -668,7 +674,7 @@ class HaConfigEntryRow extends LitElement {
     fileDownload(signedUrl.path);
   }
 
-  private async _handleDisable() {
+  private _handleDisable = async () => {
     const entryId = this.entry.entry_id;
 
     const confirmed = await showConfirmationDialog(this, {
@@ -706,9 +712,9 @@ class HaConfigEntryRow extends LitElement {
         ),
       });
     }
-  }
+  };
 
-  private async _handleEnable() {
+  private _handleEnable = async () => {
     const entryId = this.entry.entry_id;
 
     let result: DisableConfigEntryResult;
@@ -731,9 +737,9 @@ class HaConfigEntryRow extends LitElement {
         ),
       });
     }
-  }
+  };
 
-  private async _handleDelete() {
+  private _handleDelete = async () => {
     const entryId = this.entry.entry_id;
 
     const applicationCredentialsId =
@@ -767,20 +773,20 @@ class HaConfigEntryRow extends LitElement {
     if (applicationCredentialsId) {
       this._removeApplicationCredential(applicationCredentialsId);
     }
-  }
+  };
 
-  private _handleSystemOptions() {
+  private _handleSystemOptions = () => {
     showConfigEntrySystemOptionsDialog(this, {
       entry: this.entry,
       manifest: this.manifest,
     });
-  }
+  };
 
-  private _addSubEntry(ev) {
-    showSubConfigFlowDialog(this, this.entry, ev.target.flowType, {
+  private _addSubEntry = (item) => {
+    showSubConfigFlowDialog(this, this.entry, item.flowType, {
       startFlowHandler: this.entry.entry_id,
     });
-  }
+  };
 
   static styles = [
     haStyle,

src/panels/config/integrations/ha-config-sub-entry-row.ts

@@ -145,13 +145,16 @@ class HaConfigSubEntryRow extends LitElement {
                 </ha-md-menu-item>
               `
             : nothing}
-          <ha-md-menu-item @click=${this._handleRenameSub}>
+          <ha-md-menu-item .clickAction=${this._handleRenameSub}>
             <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
             ${this.hass.localize(
               "ui.panel.config.integrations.config_entry.rename"
             )}
           </ha-md-menu-item>
-          <ha-md-menu-item class="warning" @click=${this._handleDeleteSub}>
+          <ha-md-menu-item
+            class="warning"
+            .clickAction=${this._handleDeleteSub}
+          >
             <ha-svg-icon
               slot="start"
               class="warning"
@@ -222,7 +225,7 @@ class HaConfigSubEntryRow extends LitElement {
     });
   }
 
-  private async _handleRenameSub(): Promise<void> {
+  private _handleRenameSub = async (): Promise<void> => {
     const newName = await showPromptDialog(this, {
       title: this.hass.localize("ui.common.rename"),
       defaultValue: this.subEntry.title,
@@ -239,9 +242,9 @@ class HaConfigSubEntryRow extends LitElement {
       this.subEntry.subentry_id,
       { title: newName }
     );
-  }
+  };
 
-  private async _handleDeleteSub(): Promise<void> {
+  private _handleDeleteSub = async (): Promise<void> => {
     const confirmed = await showConfirmationDialog(this, {
       title: this.hass.localize(
         "ui.panel.config.integrations.config_entry.delete_confirm_title",
@@ -263,7 +266,7 @@ class HaConfigSubEntryRow extends LitElement {
       this.entry.entry_id,
       this.subEntry.subentry_id
     );
-  }
+  };
 
   static styles = css`
     .expand-button {

src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts

@@ -4,18 +4,20 @@ import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { slugify } from "../../../../common/string/slugify";
+import "../../../../components/ha-button";
 import { createCloseHeading } from "../../../../components/ha-dialog";
 import "../../../../components/ha-form/ha-form";
-import "../../../../components/ha-button";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
+import { saveFrontendSystemData } from "../../../../data/frontend";
 import type {
   LovelaceDashboard,
   LovelaceDashboardCreateParams,
   LovelaceDashboardMutableParams,
 } from "../../../../data/lovelace/dashboard";
-import { DEFAULT_PANEL, setDefaultPanel } from "../../../../data/panel";
+import { DEFAULT_PANEL } from "../../../../data/panel";
 import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
+import { showConfirmationDialog } from "../../../lovelace/custom-card-helpers";
 import type { LovelaceDashboardDetailsDialogParams } from "./show-dialog-lovelace-dashboard-detail";
 
 @customElement("dialog-lovelace-dashboard-detail")
@@ -59,7 +61,8 @@ export class DialogLovelaceDashboardDetail extends LitElement {
     if (!this._params || !this._data) {
       return nothing;
     }
-    const defaultPanelUrlPath = this.hass.defaultPanel;
+    const defaultPanelUrlPath =
+      this.hass.systemData?.defaultPanel || DEFAULT_PANEL;
     const titleInvalid = !this._data.title || !this._data.title.trim();
 
     return html`
@@ -251,15 +254,38 @@ export class DialogLovelaceDashboardDetail extends LitElement {
     };
   }
 
-  private _toggleDefault() {
+  private async _toggleDefault() {
     const urlPath = this._params?.urlPath;
     if (!urlPath) {
       return;
     }
-    setDefaultPanel(
-      this,
-      urlPath === this.hass.defaultPanel ? DEFAULT_PANEL : urlPath
-    );
+
+    const defaultPanel = this.hass.systemData?.defaultPanel || DEFAULT_PANEL;
+    // Add warning dialog to saying that this will change the default dashboard for all users
+    const confirm = await showConfirmationDialog(this, {
+      title: this.hass.localize(
+        urlPath === defaultPanel
+          ? "ui.panel.config.lovelace.dashboards.detail.remove_default_confirm_title"
+          : "ui.panel.config.lovelace.dashboards.detail.set_default_confirm_title"
+      ),
+      text: this.hass.localize(
+        urlPath === defaultPanel
+          ? "ui.panel.config.lovelace.dashboards.detail.remove_default_confirm_text"
+          : "ui.panel.config.lovelace.dashboards.detail.set_default_confirm_text"
+      ),
+      confirmText: this.hass.localize("ui.common.ok"),
+      dismissText: this.hass.localize("ui.common.cancel"),
+      destructive: false,
+    });
+
+    if (!confirm) {
+      return;
+    }
+
+    saveFrontendSystemData(this.hass.connection, "core", {
+      ...this.hass.systemData,
+      defaultPanel: urlPath === defaultPanel ? undefined : urlPath,
+    });
   }
 
   private async _updateDashboard() {

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -45,6 +45,7 @@ import {
   fetchDashboards,
   updateDashboard,
 } from "../../../../data/lovelace/dashboard";
+import { DEFAULT_PANEL } from "../../../../data/panel";
 import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
 import "../../../../layouts/hass-loading-screen";
 import "../../../../layouts/hass-tabs-subpage-data-table";
@@ -286,7 +287,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
   );
 
   private _getItems = memoize(
-    (dashboards: LovelaceDashboard[], defaultUrlPath: string) => {
+    (dashboards: LovelaceDashboard[], defaultUrlPath: string | null) => {
       const defaultMode = (
         this.hass.panels?.lovelace?.config as LovelacePanelConfig
       ).mode;
@@ -403,6 +404,8 @@ export class HaConfigLovelaceDashboards extends LitElement {
       return html` <hass-loading-screen></hass-loading-screen> `;
     }
 
+    const defaultPanel = this.hass.systemData?.defaultPanel || DEFAULT_PANEL;
+
     return html`
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
@@ -416,7 +419,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
           this._dashboards,
           this.hass.localize
         )}
-        .data=${this._getItems(this._dashboards, this.hass.defaultPanel)}
+        .data=${this._getItems(this._dashboards, defaultPanel)}
         .initialGroupColumn=${this._activeGrouping}
         .initialCollapsedGroups=${this._activeCollapsed}
         .initialSorting=${this._activeSorting}

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

@@ -1112,6 +1112,9 @@ ${rejected
   private async _delete(scene: SceneEntity): Promise<void> {
     if (scene.attributes.id) {
       await deleteScene(this.hass, scene.attributes.id);
+      this._selected = this._selected.filter(
+        (entityId) => entityId !== scene.entity_id
+      );
     }
   }
 

src/panels/config/script/ha-script-picker.ts

@@ -1183,6 +1183,9 @@ ${rejected
       );
       if (entry) {
         await deleteScript(this.hass, entry.unique_id);
+        this._selected = this._selected.filter(
+          (entityId) => entityId !== script.entity_id
+        );
       }
     } catch (err: any) {
       await showAlertDialog(this, {

src/panels/developer-tools/state/developer-tools-state-renderer.ts

@@ -61,7 +61,7 @@ class HaPanelDevStateRenderer extends LitElement {
   protected render() {
     const showAttributes = !this.narrow && this.showAttributes;
     return html`
-        <div 
+        <div
           class=${classMap({ entities: true, "hide-attributes": !showAttributes })}
           role="table"
         >
@@ -245,6 +245,7 @@ class HaPanelDevStateRenderer extends LitElement {
         :host([virtualize]) {
           display: block;
           height: 100%;
+          overflow: auto;
         }
 
         .entities {

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

@@ -1,4 +1,4 @@
-import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
+import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { mdiPencil, mdiDownload } from "@mdi/js";
 import { customElement, property, state } from "lit/decorators";
@@ -6,6 +6,7 @@ import "../../components/ha-menu-button";
 import "../../components/ha-icon-button-arrow-prev";
 import "../../components/ha-list-item";
 import "../../components/ha-top-app-bar-fixed";
+import "../../components/ha-alert";
 import type { LovelaceConfig } from "../../data/lovelace/config/types";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
@@ -21,6 +22,7 @@ import type {
   GasSourceTypeEnergyPreference,
   WaterSourceTypeEnergyPreference,
   DeviceConsumptionEnergyPreference,
+  EnergyCollection,
 } from "../../data/energy";
 import {
   computeConsumptionData,
@@ -30,13 +32,28 @@ import {
 import { fileDownload } from "../../util/file_download";
 import type { StatisticValue } from "../../data/recorder";
 
+export const DEFAULT_ENERGY_COLLECTION_KEY = "energy_dashboard";
+
 const ENERGY_LOVELACE_CONFIG: LovelaceConfig = {
   views: [
     {
       strategy: {
-        type: "energy",
+        type: "energy-overview",
+        collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
       },
     },
+    {
+      strategy: {
+        type: "energy-electricity",
+        collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
+      },
+      path: "electricity",
+    },
+    {
+      type: "panel",
+      path: "setup",
+      cards: [{ type: "custom:energy-setup-wizard-card" }],
+    },
   ],
 };
 
@@ -46,13 +63,30 @@ class PanelEnergy extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public narrow = false;
 
-  @state() private _viewIndex = 0;
-
   @state() private _lovelace?: Lovelace;
 
   @state() private _searchParms = new URLSearchParams(window.location.search);
 
-  public willUpdate(changedProps: PropertyValues) {
+  @state() private _error?: string;
+
+  @property({ attribute: false }) public route?: {
+    path: string;
+    prefix: string;
+  };
+
+  private _energyCollection?: EnergyCollection;
+
+  get _viewPath(): string | undefined {
+    const viewPath: string | undefined = this.route!.path.split("/")[1];
+    return viewPath ? decodeURI(viewPath) : undefined;
+  }
+
+  public connectedCallback() {
+    super.connectedCallback();
+    this._loadPrefs();
+  }
+
+  public async willUpdate(changedProps: PropertyValues) {
     if (!this.hasUpdated) {
       this.hass.loadFragmentTranslation("lovelace");
     }
@@ -62,22 +96,71 @@ class PanelEnergy extends LitElement {
     const oldHass = changedProps.get("hass") as this["hass"];
     if (oldHass?.locale !== this.hass.locale) {
       this._setLovelace();
-    }
-    if (oldHass && oldHass.localize !== this.hass.localize) {
+    } else if (oldHass && oldHass.localize !== this.hass.localize) {
       this._reloadView();
     }
   }
 
+  private async _loadPrefs() {
+    if (this._viewPath === "setup") {
+      await import("./cards/energy-setup-wizard-card");
+    } else {
+      this._energyCollection = getEnergyDataCollection(this.hass, {
+        key: DEFAULT_ENERGY_COLLECTION_KEY,
+      });
+      try {
+        // Have to manually refresh here as we don't want to subscribe yet
+        await this._energyCollection.refresh();
+      } catch (err: any) {
+        if (err.code === "not_found") {
+          navigate("/energy/setup");
+        }
+        this._error = err.message;
+        return;
+      }
+      const prefs = this._energyCollection.prefs!;
+      if (
+        prefs.device_consumption.length === 0 &&
+        prefs.energy_sources.length === 0
+      ) {
+        // No energy sources available, start from scratch
+        navigate("/energy/setup");
+      }
+    }
+  }
+
   private _back(ev) {
     ev.stopPropagation();
     goBack();
   }
 
-  protected render(): TemplateResult {
+  protected render() {
+    if (!this._energyCollection?.prefs) {
+      // Still loading
+      return html`<div class="centered">
+        <ha-spinner size="large"></ha-spinner>
+      </div>`;
+    }
+    const { prefs } = this._energyCollection;
+    const isSingleView = prefs.energy_sources.every((source) =>
+      ["grid", "solar", "battery"].includes(source.type)
+    );
+    let viewPath = this._viewPath;
+    if (isSingleView) {
+      // if only electricity sources, show electricity view directly
+      viewPath = "electricity";
+    }
+    const viewIndex = Math.max(
+      ENERGY_LOVELACE_CONFIG.views.findIndex((view) => view.path === viewPath),
+      0
+    );
+    const showBack =
+      this._searchParms.has("historyBack") || (!isSingleView && viewIndex > 0);
+
     return html`
       <div class="header">
         <div class="toolbar">
-          ${this._searchParms.has("historyBack")
+          ${showBack
             ? html`
                 <ha-icon-button-arrow-prev
                   @click=${this._back}
@@ -99,7 +182,7 @@ class PanelEnergy extends LitElement {
 
           <hui-energy-period-selector
             .hass=${this.hass}
-            collection-key="energy_dashboard"
+            .collectionKey=${DEFAULT_ENERGY_COLLECTION_KEY}
           >
             ${this.hass.user?.is_admin
               ? html` <ha-list-item
@@ -127,12 +210,21 @@ class PanelEnergy extends LitElement {
         .hass=${this.hass}
         @reload-energy-panel=${this._reloadView}
       >
-        <hui-view
-          .hass=${this.hass}
-          .narrow=${this.narrow}
-          .lovelace=${this._lovelace}
-          .index=${this._viewIndex}
-        ></hui-view>
+        ${this._error
+          ? html`<div class="centered">
+              <ha-alert alert-type="error">
+                An error occurred while fetching your energy preferences:
+                ${this._error}
+              </ha-alert>
+            </div>`
+          : this._lovelace
+            ? html`<hui-view
+                .hass=${this.hass}
+                .narrow=${this.narrow}
+                .lovelace=${this._lovelace}
+                .index=${viewIndex}
+              ></hui-view>`
+            : nothing}
       </hui-view-container>
     `;
   }
@@ -160,9 +252,7 @@ class PanelEnergy extends LitElement {
 
   private async _dumpCSV(ev) {
     ev.stopPropagation();
-    const energyData = getEnergyDataCollection(this.hass, {
-      key: "energy_dashboard",
-    });
+    const energyData = this._energyCollection!;
 
     if (!energyData.prefs || !energyData.state.stats) {
       return;
@@ -459,11 +549,11 @@ class PanelEnergy extends LitElement {
   }
 
   private _reloadView() {
-    // Force strategy to be re-run by make a copy of the view
+    // Force strategy to be re-run by making a copy of the view
     const config = this._lovelace!.config;
     this._lovelace = {
       ...this._lovelace!,
-      config: { ...config, views: [{ ...config.views[0] }] },
+      config: { ...config, views: config.views.map((view) => ({ ...view })) },
     };
   }
 
@@ -565,6 +655,13 @@ class PanelEnergy extends LitElement {
           flex: 1 1 100%;
           max-width: 100%;
         }
+        .centered {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
       `,
     ];
   }

src/panels/energy/strategies/energy-electricity-view-strategy.ts

@@ -1,55 +1,35 @@
 import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
-import type {
-  EnergyPreferences,
-  GridSourceTypeEnergyPreference,
-} from "../../../data/energy";
-import { getEnergyPreferences } from "../../../data/energy";
+import type { GridSourceTypeEnergyPreference } from "../../../data/energy";
+import { getEnergyDataCollection } from "../../../data/energy";
 import type { HomeAssistant } from "../../../types";
 import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
 import type { LovelaceStrategyConfig } from "../../../data/lovelace/config/strategy";
+import { DEFAULT_ENERGY_COLLECTION_KEY } from "../ha-panel-energy";
 
-const setupWizard = async (): Promise<LovelaceViewConfig> => {
-  await import("../cards/energy-setup-wizard-card");
-  return {
-    type: "panel",
-    cards: [
-      {
-        type: "custom:energy-setup-wizard-card",
-      },
-    ],
-  };
-};
-
-@customElement("energy-view-strategy")
-export class EnergyViewStrategy extends ReactiveElement {
+@customElement("energy-electricity-view-strategy")
+export class EnergyElectricityViewStrategy extends ReactiveElement {
   static async generate(
     _config: LovelaceStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
     const view: LovelaceViewConfig = { cards: [] };
 
-    let prefs: EnergyPreferences;
+    const collectionKey =
+      _config.collection_key || DEFAULT_ENERGY_COLLECTION_KEY;
 
-    try {
-      prefs = await getEnergyPreferences(hass);
-    } catch (err: any) {
-      if (err.code === "not_found") {
-        return setupWizard();
-      }
-      view.cards!.push({
-        type: "markdown",
-        content: `An error occurred while fetching your energy preferences: ${err.message}.`,
-      });
-      return view;
-    }
+    const energyCollection = getEnergyDataCollection(hass, {
+      key: collectionKey,
+    });
+    const prefs = energyCollection.prefs;
 
-    // No energy sources available, start from scratch
+    // No energy sources available
     if (
-      prefs!.device_consumption.length === 0 &&
-      prefs!.energy_sources.length === 0
+      !prefs ||
+      (prefs.device_consumption.length === 0 &&
+        prefs.energy_sources.length === 0)
     ) {
-      return setupWizard();
+      return view;
     }
 
     view.type = "sidebar";
@@ -63,13 +43,9 @@ export class EnergyViewStrategy extends ReactiveElement {
     const hasSolar = prefs.energy_sources.some(
       (source) => source.type === "solar"
     );
-    const hasGas = prefs.energy_sources.some((source) => source.type === "gas");
     const hasBattery = prefs.energy_sources.some(
       (source) => source.type === "battery"
     );
-    const hasWater = prefs.energy_sources.some(
-      (source) => source.type === "water"
-    );
 
     view.cards!.push({
       type: "energy-compare",
@@ -94,24 +70,6 @@ export class EnergyViewStrategy extends ReactiveElement {
       });
     }
 
-    // Only include if we have a gas source.
-    if (hasGas) {
-      view.cards!.push({
-        title: hass.localize("ui.panel.energy.cards.energy_gas_graph_title"),
-        type: "energy-gas-graph",
-        collection_key: "energy_dashboard",
-      });
-    }
-
-    // Only include if we have a water source.
-    if (hasWater) {
-      view.cards!.push({
-        title: hass.localize("ui.panel.energy.cards.energy_water_graph_title"),
-        type: "energy-water-graph",
-        collection_key: "energy_dashboard",
-      });
-    }
-
     // Only include if we have a grid or battery.
     if (hasGrid || hasBattery) {
       view.cards!.push({
@@ -122,13 +80,14 @@ export class EnergyViewStrategy extends ReactiveElement {
       });
     }
 
-    if (hasGrid || hasSolar || hasGas || hasWater || hasBattery) {
+    if (hasGrid || hasSolar || hasBattery) {
       view.cards!.push({
         title: hass.localize(
           "ui.panel.energy.cards.energy_sources_table_title"
         ),
         type: "energy-sources-table",
         collection_key: "energy_dashboard",
+        types: ["grid", "solar", "battery"],
       });
     }
 
@@ -170,20 +129,6 @@ export class EnergyViewStrategy extends ReactiveElement {
 
     // Only include if we have at least 1 device in the config.
     if (prefs.device_consumption.length) {
-      view.cards!.push({
-        title: hass.localize(
-          "ui.panel.energy.cards.energy_devices_detail_graph_title"
-        ),
-        type: "energy-devices-detail-graph",
-        collection_key: "energy_dashboard",
-      });
-      view.cards!.push({
-        title: hass.localize(
-          "ui.panel.energy.cards.energy_devices_graph_title"
-        ),
-        type: "energy-devices-graph",
-        collection_key: "energy_dashboard",
-      });
       const showFloorsNAreas = !prefs.device_consumption.some(
         (d) => d.included_in_stat
       );
@@ -194,6 +139,20 @@ export class EnergyViewStrategy extends ReactiveElement {
         group_by_floor: showFloorsNAreas,
         group_by_area: showFloorsNAreas,
       });
+      view.cards!.push({
+        title: hass.localize(
+          "ui.panel.energy.cards.energy_devices_graph_title"
+        ),
+        type: "energy-devices-graph",
+        collection_key: "energy_dashboard",
+      });
+      view.cards!.push({
+        title: hass.localize(
+          "ui.panel.energy.cards.energy_devices_detail_graph_title"
+        ),
+        type: "energy-devices-detail-graph",
+        collection_key: "energy_dashboard",
+      });
     }
 
     return view;
@@ -202,6 +161,6 @@ export class EnergyViewStrategy extends ReactiveElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "energy-view-strategy": EnergyViewStrategy;
+    "energy-electricity-view-strategy": EnergyElectricityViewStrategy;
   }
 }

src/panels/energy/strategies/energy-overview-view-strategy.ts

@@ -0,0 +1,218 @@
+import { ReactiveElement } from "lit";
+import { customElement } from "lit/decorators";
+import type { GridSourceTypeEnergyPreference } from "../../../data/energy";
+import { getEnergyDataCollection } from "../../../data/energy";
+import type { HomeAssistant } from "../../../types";
+import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
+import type { LovelaceStrategyConfig } from "../../../data/lovelace/config/strategy";
+import type { LovelaceSectionConfig } from "../../../data/lovelace/config/section";
+import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
+import { DEFAULT_ENERGY_COLLECTION_KEY } from "../ha-panel-energy";
+
+@customElement("energy-overview-view-strategy")
+export class EnergyViewStrategy extends ReactiveElement {
+  static async generate(
+    _config: LovelaceStrategyConfig,
+    hass: HomeAssistant
+  ): Promise<LovelaceViewConfig> {
+    const view: LovelaceViewConfig = {
+      type: "sections",
+      sections: [],
+      dense_section_placement: true,
+      max_columns: 2,
+    };
+
+    const collectionKey =
+      _config.collection_key || DEFAULT_ENERGY_COLLECTION_KEY;
+
+    const energyCollection = getEnergyDataCollection(hass, {
+      key: collectionKey,
+    });
+    const prefs = energyCollection.prefs;
+
+    // No energy sources available
+    if (
+      !prefs ||
+      (prefs.device_consumption.length === 0 &&
+        prefs.energy_sources.length === 0)
+    ) {
+      return view;
+    }
+
+    const hasGrid = prefs.energy_sources.find(
+      (source) =>
+        source.type === "grid" &&
+        (source.flow_from?.length || source.flow_to?.length)
+    ) as GridSourceTypeEnergyPreference;
+    const hasReturn = hasGrid && hasGrid.flow_to.length > 0;
+    const hasSolar = prefs.energy_sources.some(
+      (source) => source.type === "solar"
+    );
+    const hasGas = prefs.energy_sources.some((source) => source.type === "gas");
+    const hasBattery = prefs.energy_sources.some(
+      (source) => source.type === "battery"
+    );
+    const hasWater = prefs.energy_sources.some(
+      (source) => source.type === "water"
+    );
+    const hasPowerSources = prefs.energy_sources.find(
+      (source) =>
+        (source.type === "solar" && source.stat_rate) ||
+        (source.type === "battery" && source.stat_rate) ||
+        (source.type === "grid" && source.power?.length)
+    );
+    const hasPowerDevices = prefs.device_consumption.find(
+      (device) => device.stat_rate
+    );
+
+    const overviewSection: LovelaceSectionConfig = {
+      type: "grid",
+      column_span: 24,
+      cards: [],
+    };
+    if (hasPowerSources && hasPowerDevices) {
+      overviewSection.cards!.push({
+        title: hass.localize("ui.panel.energy.cards.power_sankey_title"),
+        type: "power-sankey",
+        collection_key: collectionKey,
+        grid_options: {
+          columns: 24,
+        },
+      });
+    }
+    // Only include if we have a grid or battery.
+    if (hasGrid || hasBattery) {
+      overviewSection.cards!.push({
+        title: hass.localize("ui.panel.energy.cards.energy_distribution_title"),
+        type: "energy-distribution",
+        collection_key: collectionKey,
+      });
+    }
+    if (hasGrid || hasSolar || hasBattery || hasGas || hasWater) {
+      overviewSection.cards!.push({
+        type: "energy-sources-table",
+        collection_key: collectionKey,
+      });
+    }
+    view.sections!.push(overviewSection);
+
+    const electricitySection: LovelaceSectionConfig = {
+      type: "grid",
+      cards: [
+        {
+          type: "heading",
+          heading: hass.localize("ui.panel.energy.overview.electricity"),
+          tap_action: {
+            action: "navigate",
+            navigation_path: "/energy/electricity",
+          },
+        },
+      ],
+    };
+
+    if (hasPowerSources) {
+      electricitySection.cards!.push({
+        type: "power-sources-graph",
+        collection_key: collectionKey,
+      });
+    }
+    if (prefs!.device_consumption.length > 3) {
+      electricitySection.cards!.push({
+        title: hass.localize(
+          "ui.panel.energy.cards.energy_top_consumers_title"
+        ),
+        type: "energy-devices-graph",
+        collection_key: collectionKey,
+        max_devices: 3,
+        modes: ["bar"],
+      });
+    } else if (hasGrid) {
+      const gauges: LovelaceCardConfig[] = [];
+      // Only include if we have a grid source & return.
+      if (hasReturn) {
+        gauges.push({
+          type: "energy-grid-neutrality-gauge",
+          view_layout: { position: "sidebar" },
+          collection_key: collectionKey,
+        });
+      }
+
+      gauges.push({
+        type: "energy-carbon-consumed-gauge",
+        view_layout: { position: "sidebar" },
+        collection_key: collectionKey,
+      });
+
+      // Only include if we have a solar source.
+      if (hasSolar) {
+        if (hasReturn) {
+          gauges.push({
+            type: "energy-solar-consumed-gauge",
+            view_layout: { position: "sidebar" },
+            collection_key: collectionKey,
+          });
+        }
+        gauges.push({
+          type: "energy-self-sufficiency-gauge",
+          view_layout: { position: "sidebar" },
+          collection_key: collectionKey,
+        });
+      }
+
+      electricitySection.cards!.push({
+        type: "grid",
+        columns: 2,
+        square: false,
+        cards: gauges,
+      });
+    }
+
+    view.sections!.push(electricitySection);
+
+    if (hasGas) {
+      view.sections!.push({
+        type: "grid",
+        cards: [
+          {
+            type: "heading",
+            heading: hass.localize("ui.panel.energy.overview.gas"),
+          },
+          {
+            title: hass.localize(
+              "ui.panel.energy.cards.energy_gas_graph_title"
+            ),
+            type: "energy-gas-graph",
+            collection_key: collectionKey,
+          },
+        ],
+      });
+    }
+
+    if (hasWater) {
+      view.sections!.push({
+        type: "grid",
+        cards: [
+          {
+            type: "heading",
+            heading: hass.localize("ui.panel.energy.overview.water"),
+          },
+          {
+            title: hass.localize(
+              "ui.panel.energy.cards.energy_water_graph_title"
+            ),
+            type: "energy-water-graph",
+            collection_key: collectionKey,
+          },
+        ],
+      });
+    }
+
+    return view;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "energy-overview-view-strategy": EnergyViewStrategy;
+  }
+}

src/panels/light/strategies/light-view-strategy.ts

@@ -1,5 +1,6 @@
 import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
+import { getAreasFloorHierarchy } from "../../../common/areas/areas-floor-hierarchy";
 import {
   findEntities,
   generateEntityFilter,
@@ -10,12 +11,7 @@ import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
 import type { LovelaceSectionRawConfig } from "../../../data/lovelace/config/section";
 import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../types";
-import {
-  computeAreaTileCardConfig,
-  getAreas,
-  getFloors,
-} from "../../lovelace/strategies/areas/helpers/areas-strategy-helper";
-import { getHomeStructure } from "../../lovelace/strategies/home/helpers/home-structure";
+import { computeAreaTileCardConfig } from "../../lovelace/strategies/areas/helpers/areas-strategy-helper";
 
 export interface LightViewStrategyConfig {
   type: "light";
@@ -85,9 +81,9 @@ export class LightViewStrategy extends ReactiveElement {
     _config: LightViewStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
-    const areas = getAreas(hass.areas);
-    const floors = getFloors(hass.floors);
-    const home = getHomeStructure(floors, areas);
+    const areas = Object.values(hass.areas);
+    const floors = Object.values(hass.floors);
+    const hierarchy = getAreasFloorHierarchy(floors, areas);
 
     const sections: LovelaceSectionRawConfig[] = [];
 
@@ -99,10 +95,11 @@ export class LightViewStrategy extends ReactiveElement {
 
     const entities = findEntities(allEntities, lightFilters);
 
-    const floorCount = home.floors.length + (home.areas.length ? 1 : 0);
+    const floorCount =
+      hierarchy.floors.length + (hierarchy.areas.length ? 1 : 0);
 
     // Process floors
-    for (const floorStructure of home.floors) {
+    for (const floorStructure of hierarchy.floors) {
       const floorId = floorStructure.id;
       const areaIds = floorStructure.areas;
       const floor = hass.floors[floorId];
@@ -131,7 +128,7 @@ export class LightViewStrategy extends ReactiveElement {
     }
 
     // Process unassigned areas
-    if (home.areas.length > 0) {
+    if (hierarchy.areas.length > 0) {
       const section: LovelaceSectionRawConfig = {
         type: "grid",
         column_span: 2,
@@ -146,7 +143,7 @@ export class LightViewStrategy extends ReactiveElement {
         ],
       };
 
-      const areaCards = processAreasForLight(home.areas, hass, entities);
+      const areaCards = processAreasForLight(hierarchy.areas, hass, entities);
 
       if (areaCards.length > 0) {
         section.cards!.push(...areaCards);

src/panels/lovelace/card-features/hui-bar-gauge-card-feature.ts

@@ -1,8 +1,9 @@
 import { css, LitElement, nothing, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
+import { isNumericFromAttributes } from "../../../common/number/format_number";
 import type { HomeAssistant } from "../../../types";
-import type { LovelaceCardFeature } from "../types";
+import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
 import type {
   LovelaceCardFeatureContext,
   BarGaugeCardFeatureConfig,
@@ -17,7 +18,7 @@ export const supportsBarGaugeCardFeature = (
     : undefined;
   if (!stateObj) return false;
   const domain = computeDomain(stateObj.entity_id);
-  return domain === "sensor" && stateObj.attributes.unit_of_measurement === "%";
+  return domain === "sensor" && isNumericFromAttributes(stateObj.attributes);
 };
 
 @customElement("hui-bar-gauge-card-feature")
@@ -34,6 +35,11 @@ class HuiBarGaugeCardFeature extends LitElement implements LovelaceCardFeature {
     };
   }
 
+  public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
+    await import("../editor/config-elements/hui-bar-gauge-card-feature-editor");
+    return document.createElement("hui-bar-gauge-card-feature-editor");
+  }
+
   public setConfig(config: BarGaugeCardFeatureConfig): void {
     if (!config) {
       throw new Error("Invalid configuration");
@@ -53,8 +59,20 @@ class HuiBarGaugeCardFeature extends LitElement implements LovelaceCardFeature {
       return nothing;
     }
     const stateObj = this.hass.states[this.context.entity_id];
-    const value = stateObj.state;
-    return html`<div style="width: ${value}%"></div>
+    const min = this._config.min ?? 0;
+    const max = this._config.max ?? 100;
+    const value = parseFloat(stateObj.state);
+
+    if (isNaN(value) || min >= max) {
+      return nothing;
+    }
+
+    const percentage = Math.max(
+      0,
+      Math.min(100, ((value - min) / (max - min)) * 100)
+    );
+
+    return html`<div style="width: ${percentage}%"></div>
       <div class="bar-gauge-background"></div>`;
   }
 

src/panels/lovelace/card-features/hui-trend-graph-card-feature.ts

@@ -124,16 +124,24 @@ class HuiHistoryChartCardFeature
     }
 
     const hourToShow = this._config.hours_to_show ?? DEFAULT_HOURS_TO_SHOW;
+    const detail = this._config.detail !== false; // default to true (high detail)
 
     return subscribeHistoryStatesTimeWindow(
       this.hass!,
       (historyStates) => {
+        // sample to 1 point per hour for low detail or 1 point per 5 pixels for high detail
+        const maxDetails = detail
+          ? Math.max(10, this.clientWidth / 5, hourToShow)
+          : Math.max(10, hourToShow);
+        const useMean = !detail;
         const { points, yAxisOrigin } =
           coordinatesMinimalResponseCompressedState(
             historyStates[this.context!.entity_id!],
             this.clientWidth,
             this.clientHeight,
-            this.clientWidth / 5 // sample to 1 point per 5 pixels
+            maxDetails,
+            undefined,
+            useMean
           );
         this._coordinates = points;
         this._yAxisOrigin = yAxisOrigin;

src/panels/lovelace/card-features/types.ts

@@ -199,6 +199,7 @@ export interface UpdateActionsCardFeatureConfig {
 export interface TrendGraphCardFeatureConfig {
   type: "trend-graph";
   hours_to_show?: number;
+  detail?: boolean;
 }
 
 export const AREA_CONTROLS = [
@@ -226,6 +227,8 @@ export interface AreaControlsCardFeatureConfig {
 
 export interface BarGaugeCardFeatureConfig {
   type: "bar-gauge";
+  min?: number;
+  max?: number;
 }
 
 export type LovelaceCardFeaturePosition = "bottom" | "inline";

src/panels/lovelace/cards/energy/common/energy-chart-options.ts

@@ -203,7 +203,7 @@ function formatTooltip(
           countNegative++;
         }
       }
-      return `${param.marker} ${filterXSS(param.seriesName!)}: ${value} ${unit}`;
+      return `${param.marker} ${filterXSS(param.seriesName!)}: <div style="direction:ltr; display: inline;">${value} ${unit}</div>`;
     })
     .filter(Boolean);
   let footer = "";

src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts

@@ -135,11 +135,13 @@ export class HuiEnergyDevicesGraphCard
       return nothing;
     }
 
+    const modes = this._getAllowedModes();
+
     return html`
       <ha-card>
         <div class="card-header">
           <span>${this._config.title ? this._config.title : nothing}</span>
-          ${this._getAllowedModes().length > 1
+          ${modes.length > 1
             ? html`
                 <ha-icon-button
                   .path=${this._chartType === "pie"
@@ -166,7 +168,7 @@ export class HuiEnergyDevicesGraphCard
               this._chartType,
               this._legendData
             )}
-            .height=${`${Math.max(300, (this._legendData?.length || 0) * 28 + 50)}px`}
+            .height=${`${Math.max(modes.includes("pie") ? 300 : 100, (this._legendData?.length || 0) * 28 + 50)}px`}
             .extraComponents=${[PieChart]}
             @chart-click=${this._handleChartClick}
             @dataset-hidden=${this._datasetHidden}
@@ -185,7 +187,7 @@ export class HuiEnergyDevicesGraphCard
       this.hass.locale,
       params.value < 0.1 ? { maximumFractionDigits: 3 } : undefined
     )} kWh`;
-    return `${title}${params.marker} ${params.seriesName}: ${value}`;
+    return `${title}${params.marker} ${params.seriesName}: <div style="direction:ltr; display: inline;">${value}</div>`;
   }
 
   private _createOptions = memoizeOne(
@@ -492,7 +494,7 @@ export class HuiEnergyDevicesGraphCard
           show: true,
           position: "center",
           color: computedStyle.getPropertyValue("--secondary-text-color"),
-          fontSize: computedStyle.getPropertyValue("--ha-font-size-l"),
+          fontSize: computedStyle.getPropertyValue("--ha-font-size-m"),
           lineHeight: 24,
           fontWeight: "bold",
           formatter: `{a}\n${formatNumber(totalChart, this.hass.locale)} kWh`,

src/panels/lovelace/cards/energy/hui-energy-sankey-card.ts

@@ -2,6 +2,7 @@ import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import "../../../../components/ha-card";
 import "../../../../components/ha-svg-icon";
 import type { EnergyData } from "../../../../data/energy";
@@ -38,6 +39,8 @@ class HuiEnergySankeyCard
 {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public layout?: string;
+
   @state() private _config?: EnergySankeyCardConfig;
 
   @state() private _data?: EnergyData;
@@ -385,7 +388,14 @@ class HuiEnergySankeyCard
       (this._config.layout !== "horizontal" && this._isMobileSize);
 
     return html`
-      <ha-card .header=${this._config.title}>
+      <ha-card
+        .header=${this._config.title}
+        class=${classMap({
+          "is-grid": this.layout === "grid",
+          "is-panel": this.layout === "panel",
+          "is-vertical": vertical,
+        })}
+      >
         <div class="card-content">
           ${hasData
             ? html`<ha-sankey-chart
@@ -402,7 +412,9 @@ class HuiEnergySankeyCard
   }
 
   private _valueFormatter = (value: number) =>
-    `${formatNumber(value, this.hass.locale, value < 0.1 ? { maximumFractionDigits: 3 } : undefined)} kWh`;
+    `<div style="direction:ltr; display: inline;">
+      ${formatNumber(value, this.hass.locale, value < 0.1 ? { maximumFractionDigits: 3 } : undefined)}
+      kWh</div>`;
 
   protected _groupByFloorAndArea(deviceNodes: Node[]) {
     const areas: Record<string, { value: number; devices: Node[] }> = {
@@ -508,17 +520,18 @@ class HuiEnergySankeyCard
   }
 
   static styles = css`
-    :host {
-      display: block;
-      height: calc(
-        var(--row-size, 8) *
-          (var(--row-height, 50px) + var(--row-gap, 0px)) - var(--row-gap, 0px)
-      );
-    }
     ha-card {
-      height: 100%;
+      height: 400px;
       display: flex;
       flex-direction: column;
+      --chart-max-height: none;
+    }
+    ha-card.is-vertical {
+      height: 500px;
+    }
+    ha-card.is-grid,
+    ha-card.is-panel {
+      height: 100%;
     }
     .card-content {
       flex: 1;

src/panels/lovelace/cards/energy/hui-power-sankey-card.ts

@@ -0,0 +1,739 @@
+import type { UnsubscribeFunc } from "home-assistant-js-websocket";
+import type { PropertyValues } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import "../../../../components/ha-card";
+import "../../../../components/ha-svg-icon";
+import type { EnergyData, EnergyPreferences } from "../../../../data/energy";
+import { getEnergyDataCollection } from "../../../../data/energy";
+import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
+import type { HomeAssistant } from "../../../../types";
+import type { LovelaceCard, LovelaceGridOptions } from "../../types";
+import type { PowerSankeyCardConfig } from "../types";
+import "../../../../components/chart/ha-sankey-chart";
+import type { Link, Node } from "../../../../components/chart/ha-sankey-chart";
+import { getGraphColorByIndex } from "../../../../common/color/colors";
+import { formatNumber } from "../../../../common/number/format_number";
+import { getEntityContext } from "../../../../common/entity/context/get_entity_context";
+import { MobileAwareMixin } from "../../../../mixins/mobile-aware-mixin";
+
+const DEFAULT_CONFIG: Partial<PowerSankeyCardConfig> = {
+  group_by_floor: true,
+  group_by_area: true,
+};
+
+interface PowerData {
+  solar: number;
+  from_grid: number;
+  to_grid: number;
+  from_battery: number;
+  to_battery: number;
+  grid_to_battery: number;
+  battery_to_grid: number;
+  solar_to_battery: number;
+  solar_to_grid: number;
+  used_solar: number;
+  used_grid: number;
+  used_battery: number;
+  used_total: number;
+}
+
+@customElement("hui-power-sankey-card")
+class HuiPowerSankeyCard
+  extends SubscribeMixin(MobileAwareMixin(LitElement))
+  implements LovelaceCard
+{
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public layout?: string;
+
+  @state() private _config?: PowerSankeyCardConfig;
+
+  @state() private _data?: EnergyData;
+
+  private _entities = new Set<string>();
+
+  protected hassSubscribeRequiredHostProps = ["_config"];
+
+  public setConfig(config: PowerSankeyCardConfig): void {
+    this._config = { ...DEFAULT_CONFIG, ...config };
+  }
+
+  public hassSubscribe(): UnsubscribeFunc[] {
+    return [
+      getEnergyDataCollection(this.hass, {
+        key: this._config?.collection_key,
+      }).subscribe((data) => {
+        this._data = data;
+      }),
+    ];
+  }
+
+  public getCardSize(): Promise<number> | number {
+    return 5;
+  }
+
+  getGridOptions(): LovelaceGridOptions {
+    return {
+      columns: 12,
+      min_columns: 6,
+      rows: 6,
+      min_rows: 2,
+    };
+  }
+
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    if (
+      changedProps.has("_config") ||
+      changedProps.has("_data") ||
+      changedProps.has("_isMobileSize")
+    ) {
+      return true;
+    }
+
+    // Check if any of the tracked entity states have changed
+    if (changedProps.has("hass")) {
+      const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+      if (!oldHass || !this._entities.size) {
+        return true;
+      }
+
+      // Only update if one of our tracked entities changed
+      for (const entityId of this._entities) {
+        if (oldHass.states[entityId] !== this.hass.states[entityId]) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
+
+  protected render() {
+    if (!this._config) {
+      return nothing;
+    }
+
+    if (!this._data) {
+      return html`${this.hass.localize(
+        "ui.panel.lovelace.cards.energy.loading"
+      )}`;
+    }
+
+    const prefs = this._data.prefs;
+    const powerData = this._computePowerData(prefs);
+    const computedStyle = getComputedStyle(this);
+
+    const nodes: Node[] = [];
+    const links: Link[] = [];
+
+    // Create home node
+    const homeNode: Node = {
+      id: "home",
+      label: this.hass.localize(
+        "ui.panel.lovelace.cards.energy.energy_distribution.home"
+      ),
+      value: Math.max(0, powerData.used_total),
+      color: computedStyle.getPropertyValue("--primary-color").trim(),
+      index: 1,
+    };
+    nodes.push(homeNode);
+
+    // Add battery source and sink if available
+    if (powerData.from_battery > 0) {
+      nodes.push({
+        id: "battery",
+        label: this.hass.localize(
+          "ui.panel.lovelace.cards.energy.energy_distribution.battery"
+        ),
+        value: powerData.from_battery,
+        color: computedStyle
+          .getPropertyValue("--energy-battery-out-color")
+          .trim(),
+        index: 0,
+      });
+      links.push({
+        source: "battery",
+        target: "home",
+      });
+    }
+
+    if (powerData.to_battery > 0) {
+      nodes.push({
+        id: "battery_in",
+        label: this.hass.localize(
+          "ui.panel.lovelace.cards.energy.energy_distribution.battery"
+        ),
+        value: powerData.to_battery,
+        color: computedStyle
+          .getPropertyValue("--energy-battery-in-color")
+          .trim(),
+        index: 1,
+      });
+      if (powerData.grid_to_battery > 0) {
+        links.push({
+          source: "grid",
+          target: "battery_in",
+        });
+      }
+      if (powerData.solar_to_battery > 0) {
+        links.push({
+          source: "solar",
+          target: "battery_in",
+        });
+      }
+    }
+
+    // Add grid source if available
+    if (powerData.from_grid > 0) {
+      nodes.push({
+        id: "grid",
+        label: this.hass.localize(
+          "ui.panel.lovelace.cards.energy.energy_distribution.grid"
+        ),
+        value: powerData.from_grid,
+        color: computedStyle
+          .getPropertyValue("--energy-grid-consumption-color")
+          .trim(),
+        index: 0,
+      });
+      links.push({
+        source: "grid",
+        target: "home",
+      });
+    }
+
+    // Add solar if available
+    if (powerData.solar > 0) {
+      nodes.push({
+        id: "solar",
+        label: this.hass.localize(
+          "ui.panel.lovelace.cards.energy.energy_distribution.solar"
+        ),
+        value: powerData.solar,
+        color: computedStyle.getPropertyValue("--energy-solar-color").trim(),
+        index: 0,
+      });
+      links.push({
+        source: "solar",
+        target: "home",
+      });
+    }
+
+    // Add grid return if available
+    if (powerData.to_grid > 0) {
+      nodes.push({
+        id: "grid_return",
+        label: this.hass.localize(
+          "ui.panel.lovelace.cards.energy.energy_distribution.grid"
+        ),
+        value: powerData.to_grid,
+        color: computedStyle
+          .getPropertyValue("--energy-grid-return-color")
+          .trim(),
+        index: 2,
+      });
+      if (powerData.battery_to_grid > 0) {
+        links.push({
+          source: "battery",
+          target: "grid_return",
+        });
+      }
+      if (powerData.solar_to_grid > 0) {
+        links.push({
+          source: "solar",
+          target: "grid_return",
+        });
+      }
+    }
+
+    let untrackedConsumption = homeNode.value;
+    const deviceNodes: Node[] = [];
+    const parentLinks: Record<string, string> = {};
+    prefs.device_consumption.forEach((device, idx) => {
+      if (!device.stat_rate) {
+        return;
+      }
+      const value = this._getCurrentPower(device.stat_rate);
+
+      if (value < 0.01) {
+        return;
+      }
+
+      const node = {
+        id: device.stat_rate,
+        label: device.name || this._getEntityLabel(device.stat_rate),
+        value,
+        color: getGraphColorByIndex(idx, computedStyle),
+        index: 4,
+        parent: device.included_in_stat,
+      };
+      if (node.parent) {
+        parentLinks[node.id] = node.parent;
+        links.push({
+          source: node.parent,
+          target: node.id,
+        });
+      } else {
+        untrackedConsumption -= value;
+      }
+      deviceNodes.push(node);
+    });
+    const devicesWithoutParent = deviceNodes.filter(
+      (node) => !parentLinks[node.id]
+    );
+
+    const { group_by_area, group_by_floor } = this._config;
+    if (group_by_area || group_by_floor) {
+      const { areas, floors } = this._groupByFloorAndArea(devicesWithoutParent);
+
+      Object.keys(floors)
+        .sort(
+          (a, b) =>
+            (this.hass.floors[b]?.level ?? -Infinity) -
+            (this.hass.floors[a]?.level ?? -Infinity)
+        )
+        .forEach((floorId) => {
+          let floorNodeId = `floor_${floorId}`;
+          if (floorId === "no_floor" || !group_by_floor) {
+            // link "no_floor" areas to home
+            floorNodeId = "home";
+          } else {
+            nodes.push({
+              id: floorNodeId,
+              label: this.hass.floors[floorId].name,
+              value: floors[floorId].value,
+              index: 2,
+              color: computedStyle.getPropertyValue("--primary-color").trim(),
+            });
+            links.push({
+              source: "home",
+              target: floorNodeId,
+            });
+          }
+          floors[floorId].areas.forEach((areaId) => {
+            let targetNodeId: string;
+
+            if (areaId === "no_area" || !group_by_area) {
+              // If group_by_area is false, link devices to floor or home
+              targetNodeId = floorNodeId;
+            } else {
+              // Create area node and link it to floor
+              const areaNodeId = `area_${areaId}`;
+              nodes.push({
+                id: areaNodeId,
+                label: this.hass.areas[areaId]?.name || areaId,
+                value: areas[areaId].value,
+                index: 3,
+                color: computedStyle.getPropertyValue("--primary-color").trim(),
+              });
+              links.push({
+                source: floorNodeId,
+                target: areaNodeId,
+                value: areas[areaId].value,
+              });
+              targetNodeId = areaNodeId;
+            }
+
+            // Link devices to the appropriate target (area, floor, or home)
+            areas[areaId].devices.forEach((device) => {
+              links.push({
+                source: targetNodeId,
+                target: device.id,
+                value: device.value,
+              });
+            });
+          });
+        });
+    } else {
+      devicesWithoutParent.forEach((deviceNode) => {
+        links.push({
+          source: "home",
+          target: deviceNode.id,
+          value: deviceNode.value,
+        });
+      });
+    }
+    const deviceSections = this._getDeviceSections(parentLinks, deviceNodes);
+    deviceSections.forEach((section, index) => {
+      section.forEach((node: Node) => {
+        nodes.push({ ...node, index: 4 + index });
+      });
+    });
+
+    // untracked consumption
+    if (untrackedConsumption > 0) {
+      nodes.push({
+        id: "untracked",
+        label: this.hass.localize(
+          "ui.panel.lovelace.cards.energy.energy_devices_detail_graph.untracked_consumption"
+        ),
+        value: untrackedConsumption,
+        color: computedStyle
+          .getPropertyValue("--state-unavailable-color")
+          .trim(),
+        index: 3 + deviceSections.length,
+      });
+      links.push({
+        source: "home",
+        target: "untracked",
+        value: untrackedConsumption,
+      });
+    }
+
+    const hasData = nodes.some((node) => node.value > 0);
+
+    const vertical =
+      this._config.layout === "vertical" ||
+      (this._config.layout !== "horizontal" && this._isMobileSize);
+
+    return html`
+      <ha-card
+        .header=${this._config.title}
+        class=${classMap({
+          "is-grid": this.layout === "grid",
+          "is-panel": this.layout === "panel",
+          "is-vertical": vertical,
+        })}
+      >
+        <div class="card-content">
+          ${hasData
+            ? html`<ha-sankey-chart
+                .data=${{ nodes, links }}
+                .vertical=${vertical}
+                .valueFormatter=${this._valueFormatter}
+              ></ha-sankey-chart>`
+            : html`${this.hass.localize(
+                "ui.panel.lovelace.cards.energy.no_data"
+              )}`}
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private _valueFormatter = (value: number) =>
+    `<div style="direction:ltr; display: inline;">
+      ${formatNumber(value, this.hass.locale, value < 0.1 ? { maximumFractionDigits: 3 } : undefined)}
+      kW</div>`;
+
+  /**
+   * Compute real-time power data from current entity states.
+   * Similar to computeConsumptionData but for instantaneous power.
+   */
+  private _computePowerData(prefs: EnergyPreferences): PowerData {
+    // Clear tracked entities and rebuild the set
+    this._entities.clear();
+
+    let solar = 0;
+    let from_grid = 0;
+    let to_grid = 0;
+    let from_battery = 0;
+    let to_battery = 0;
+
+    // Collect solar power
+    prefs.energy_sources
+      .filter((source) => source.type === "solar")
+      .forEach((source) => {
+        if (source.type === "solar" && source.stat_rate) {
+          const value = this._getCurrentPower(source.stat_rate);
+          if (value > 0) {
+            solar += value;
+          }
+        }
+      });
+
+    // Collect grid power (positive = import, negative = export)
+    prefs.energy_sources
+      .filter((source) => source.type === "grid" && source.power)
+      .forEach((source) => {
+        if (source.type === "grid" && source.power) {
+          source.power.forEach((powerSource) => {
+            const value = this._getCurrentPower(powerSource.stat_rate);
+            if (value > 0) {
+              from_grid += value;
+            } else if (value < 0) {
+              to_grid += Math.abs(value);
+            }
+          });
+        }
+      });
+
+    // Collect battery power (positive = discharge, negative = charge)
+    prefs.energy_sources
+      .filter((source) => source.type === "battery")
+      .forEach((source) => {
+        if (source.type === "battery" && source.stat_rate) {
+          const value = this._getCurrentPower(source.stat_rate);
+          if (value > 0) {
+            from_battery += value;
+          } else if (value < 0) {
+            to_battery += Math.abs(value);
+          }
+        }
+      });
+
+    // Calculate total consumption
+    const used_total = from_grid + solar + from_battery - to_grid - to_battery;
+
+    // Determine power routing using priority logic
+    // Priority: Solar -> Battery_In, Solar -> Grid_Out, Battery_Out -> Grid_Out,
+    // Grid_In -> Battery_In, Solar -> Consumption, Battery_Out -> Consumption, Grid_In -> Consumption
+
+    let solar_remaining = solar;
+    let grid_remaining = from_grid;
+    let battery_remaining = from_battery;
+    let to_battery_remaining = to_battery;
+    let to_grid_remaining = to_grid;
+    let used_total_remaining = Math.max(used_total, 0);
+
+    let grid_to_battery = 0;
+    let battery_to_grid = 0;
+    let solar_to_battery = 0;
+    let solar_to_grid = 0;
+    let used_solar = 0;
+    let used_battery = 0;
+    let used_grid = 0;
+
+    // Handle excess grid input to battery first
+    const excess_grid_in_after_consumption = Math.max(
+      0,
+      Math.min(to_battery_remaining, grid_remaining - used_total_remaining)
+    );
+    grid_to_battery += excess_grid_in_after_consumption;
+    to_battery_remaining -= excess_grid_in_after_consumption;
+    grid_remaining -= excess_grid_in_after_consumption;
+
+    // Solar -> Battery_In
+    solar_to_battery = Math.min(solar_remaining, to_battery_remaining);
+    to_battery_remaining -= solar_to_battery;
+    solar_remaining -= solar_to_battery;
+
+    // Solar -> Grid_Out
+    solar_to_grid = Math.min(solar_remaining, to_grid_remaining);
+    to_grid_remaining -= solar_to_grid;
+    solar_remaining -= solar_to_grid;
+
+    // Battery_Out -> Grid_Out
+    battery_to_grid = Math.min(battery_remaining, to_grid_remaining);
+    battery_remaining -= battery_to_grid;
+    to_grid_remaining -= battery_to_grid;
+
+    // Grid_In -> Battery_In (second pass)
+    const grid_to_battery_2 = Math.min(grid_remaining, to_battery_remaining);
+    grid_to_battery += grid_to_battery_2;
+    grid_remaining -= grid_to_battery_2;
+    to_battery_remaining -= grid_to_battery_2;
+
+    // Solar -> Consumption
+    used_solar = Math.min(used_total_remaining, solar_remaining);
+    used_total_remaining -= used_solar;
+    solar_remaining -= used_solar;
+
+    // Battery_Out -> Consumption
+    used_battery = Math.min(battery_remaining, used_total_remaining);
+    battery_remaining -= used_battery;
+    used_total_remaining -= used_battery;
+
+    // Grid_In -> Consumption
+    used_grid = Math.min(used_total_remaining, grid_remaining);
+    grid_remaining -= used_grid;
+    used_total_remaining -= used_grid;
+
+    return {
+      solar,
+      from_grid,
+      to_grid,
+      from_battery,
+      to_battery,
+      grid_to_battery,
+      battery_to_grid,
+      solar_to_battery,
+      solar_to_grid,
+      used_solar,
+      used_grid,
+      used_battery,
+      used_total: Math.max(0, used_total),
+    };
+  }
+
+  protected _groupByFloorAndArea(deviceNodes: Node[]) {
+    const areas: Record<string, { value: number; devices: Node[] }> = {
+      no_area: {
+        value: 0,
+        devices: [],
+      },
+    };
+    const floors: Record<string, { value: number; areas: string[] }> = {
+      no_floor: {
+        value: 0,
+        areas: ["no_area"],
+      },
+    };
+    deviceNodes.forEach((deviceNode) => {
+      const entity = this.hass.states[deviceNode.id];
+      const { area, floor } = entity
+        ? getEntityContext(
+            entity,
+            this.hass.entities,
+            this.hass.devices,
+            this.hass.areas,
+            this.hass.floors
+          )
+        : { area: null, floor: null };
+      if (area) {
+        if (area.area_id in areas) {
+          areas[area.area_id].value += deviceNode.value;
+          areas[area.area_id].devices.push(deviceNode);
+        } else {
+          areas[area.area_id] = {
+            value: deviceNode.value,
+            devices: [deviceNode],
+          };
+        }
+        // see if the area has a floor
+        if (floor) {
+          if (floor.floor_id in floors) {
+            floors[floor.floor_id].value += deviceNode.value;
+            if (!floors[floor.floor_id].areas.includes(area.area_id)) {
+              floors[floor.floor_id].areas.push(area.area_id);
+            }
+          } else {
+            floors[floor.floor_id] = {
+              value: deviceNode.value,
+              areas: [area.area_id],
+            };
+          }
+        } else {
+          floors.no_floor.value += deviceNode.value;
+          if (!floors.no_floor.areas.includes(area.area_id)) {
+            floors.no_floor.areas.unshift(area.area_id);
+          }
+        }
+      } else {
+        areas.no_area.value += deviceNode.value;
+        areas.no_area.devices.push(deviceNode);
+      }
+    });
+    return { areas, floors };
+  }
+
+  /**
+   * Organizes device nodes into hierarchical sections based on parent-child relationships.
+   */
+  protected _getDeviceSections(
+    parentLinks: Record<string, string>,
+    deviceNodes: Node[]
+  ): Node[][] {
+    const parentSection: Node[] = [];
+    const childSection: Node[] = [];
+    const parentIds = Object.values(parentLinks);
+    const remainingLinks: typeof parentLinks = {};
+
+    deviceNodes.forEach((deviceNode) => {
+      const isChild = deviceNode.id in parentLinks;
+      const isParent = parentIds.includes(deviceNode.id);
+      if (isParent && !isChild) {
+        // Top-level parents (have children but no parents themselves)
+        parentSection.push(deviceNode);
+      } else {
+        childSection.push(deviceNode);
+      }
+    });
+
+    // Filter out links where parent is already in current parent section
+    Object.entries(parentLinks).forEach(([child, parent]) => {
+      if (!parentSection.some((node) => node.id === parent)) {
+        remainingLinks[child] = parent;
+      }
+    });
+
+    if (parentSection.length > 0) {
+      // Recursively process child section with remaining links
+      return [
+        parentSection,
+        ...this._getDeviceSections(remainingLinks, childSection),
+      ];
+    }
+
+    // Base case: no more parent-child relationships to process
+    return [deviceNodes];
+  }
+
+  /**
+   * Get current power value from entity state, normalized to kW
+   * @param entityId - The entity ID to get power value from
+   * @returns Power value in kW, or 0 if entity not found or invalid
+   */
+  private _getCurrentPower(entityId: string): number {
+    // Track this entity for state change detection
+    this._entities.add(entityId);
+
+    const stateObj = this.hass.states[entityId];
+    if (!stateObj) {
+      return 0;
+    }
+    const value = parseFloat(stateObj.state);
+    if (isNaN(value)) {
+      return 0;
+    }
+
+    // Normalize to kW based on unit of measurement (case-sensitive)
+    // Supported units: GW, kW, MW, mW, TW, W
+    const unit = stateObj.attributes.unit_of_measurement;
+    switch (unit) {
+      case "W":
+        return value / 1000;
+      case "mW":
+        return value / 1000000;
+      case "MW":
+        return value * 1000;
+      case "GW":
+        return value * 1000000;
+      case "TW":
+        return value * 1000000000;
+      default:
+        // Assume kW if no unit or unit is kW
+        return value;
+    }
+  }
+
+  /**
+   * Get entity label (friendly name or entity ID)
+   * @param entityId - The entity ID to get label for
+   * @returns Friendly name if available, otherwise the entity ID
+   */
+  private _getEntityLabel(entityId: string): string {
+    const stateObj = this.hass.states[entityId];
+    if (!stateObj) {
+      return entityId;
+    }
+    return stateObj.attributes.friendly_name || entityId;
+  }
+
+  static styles = css`
+    ha-card {
+      height: 400px;
+      display: flex;
+      flex-direction: column;
+      --chart-max-height: none;
+    }
+    ha-card.is-vertical {
+      height: 500px;
+    }
+    ha-card.is-grid,
+    ha-card.is-panel {
+      height: 100%;
+    }
+    .card-content {
+      flex: 1;
+      display: flex;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-power-sankey-card": HuiPowerSankeyCard;
+  }
+}

src/panels/lovelace/cards/energy/hui-power-sources-graph-card.ts

@@ -21,6 +21,7 @@ import { hasConfigChanged } from "../../common/has-changed";
 import { getCommonOptions, fillLineGaps } from "./common/energy-chart-options";
 import type { ECOption } from "../../../../resources/echarts/echarts";
 import { hex2rgb } from "../../../../common/color/convert-color";
+import type { CustomLegendOption } from "../../../../components/chart/ha-chart-base";
 
 @customElement("hui-power-sources-graph-card")
 export class HuiPowerSourcesGraphCard
@@ -33,6 +34,8 @@ export class HuiPowerSourcesGraphCard
 
   @state() private _chartData: LineSeriesOption[] = [];
 
+  @state() private _legendData?: CustomLegendOption["data"];
+
   @state() private _start = startOfToday();
 
   @state() private _end = endOfToday();
@@ -91,7 +94,8 @@ export class HuiPowerSourcesGraphCard
               this.hass.locale,
               this.hass.config,
               this._compareStart,
-              this._compareEnd
+              this._compareEnd,
+              this._legendData
             )}
           ></ha-chart-base>
           ${!this._chartData.some((dataset) => dataset.data!.length)
@@ -115,9 +119,10 @@ export class HuiPowerSourcesGraphCard
       locale: FrontendLocaleData,
       config: HassConfig,
       compareStart?: Date,
-      compareEnd?: Date
-    ): ECOption =>
-      getCommonOptions(
+      compareEnd?: Date,
+      legendData?: CustomLegendOption["data"]
+    ): ECOption => ({
+      ...getCommonOptions(
         start,
         end,
         locale,
@@ -125,11 +130,18 @@ export class HuiPowerSourcesGraphCard
         "kW",
         compareStart,
         compareEnd
-      )
+      ),
+      legend: {
+        show: true,
+        type: "custom",
+        data: legendData,
+      },
+    })
   );
 
   private async _getStatistics(energyData: EnergyData): Promise<void> {
     const datasets: LineSeriesOption[] = [];
+    this._legendData = [];
 
     const statIds = {
       solar: {
@@ -238,6 +250,15 @@ export class HuiPowerSourcesGraphCard
             z: 4 - keyIndex, // draw in reverse order but above positive series
           });
         }
+        this._legendData!.push({
+          id: key,
+          secondaryIds: key !== "solar" ? [`${key}-negative`] : [],
+          name: statIds[key].name,
+          itemStyle: {
+            color: `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.75)`,
+            borderColor: colorHex,
+          },
+        });
       }
     });
 
@@ -268,11 +289,23 @@ export class HuiPowerSourcesGraphCard
       name: this.hass.localize(
         "ui.panel.lovelace.cards.energy.power_graph.usage"
       ),
-      color: computedStyles.getPropertyValue("--primary-color"),
-      lineStyle: { width: 2 },
+      color: computedStyles.getPropertyValue("--primary-text-color"),
+      lineStyle: {
+        type: [7, 2],
+        width: 1.5,
+      },
       data: usageData,
       z: 5,
     });
+    this._legendData!.push({
+      id: "usage",
+      name: this.hass.localize(
+        "ui.panel.lovelace.cards.energy.power_graph.usage"
+      ),
+      itemStyle: {
+        color: computedStyles.getPropertyValue("--primary-text-color"),
+      },
+    });
   }
 
   private _processData(stats: StatisticValue[][]) {

src/panels/lovelace/cards/types.ts

@@ -150,11 +150,6 @@ export interface EnergyCardBaseConfig extends LovelaceCardConfig {
   collection_key?: string;
 }
 
-export interface EnergySummaryCardConfig extends EnergyCardBaseConfig {
-  type: "energy-summary";
-  title?: string;
-}
-
 export interface EnergyDistributionCardConfig extends EnergyCardBaseConfig {
   type: "energy-distribution";
   title?: string;
@@ -236,6 +231,14 @@ export interface PowerSourcesGraphCardConfig extends EnergyCardBaseConfig {
   title?: string;
 }
 
+export interface PowerSankeyCardConfig extends EnergyCardBaseConfig {
+  type: "power-sankey";
+  title?: string;
+  layout?: "vertical" | "horizontal" | "auto";
+  group_by_floor?: boolean;
+  group_by_area?: boolean;
+}
+
 export interface EntityFilterCardConfig extends LovelaceCardConfig {
   type: "entity-filter";
   entities: (EntityFilterEntityConfig | string)[];

src/panels/lovelace/create-element/create-card-element.ts

@@ -68,6 +68,7 @@ const LAZY_LOAD_TYPES = {
   "energy-sankey": () => import("../cards/energy/hui-energy-sankey-card"),
   "power-sources-graph": () =>
     import("../cards/energy/hui-power-sources-graph-card"),
+  "power-sankey": () => import("../cards/energy/hui-power-sankey-card"),
   "entity-filter": () => import("../cards/hui-entity-filter-card"),
   error: () => import("../cards/hui-error-card"),
   "home-summary": () => import("../cards/hui-home-summary-card"),

src/panels/lovelace/editor/config-elements/hui-bar-gauge-card-feature-editor.ts

@@ -0,0 +1,87 @@
+import { 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 "../../../../components/ha-form/ha-form";
+import type { SchemaUnion } from "../../../../components/ha-form/types";
+import type { HomeAssistant } from "../../../../types";
+import type {
+  BarGaugeCardFeatureConfig,
+  LovelaceCardFeatureContext,
+} from "../../card-features/types";
+import type { LovelaceCardFeatureEditor } from "../../types";
+
+@customElement("hui-bar-gauge-card-feature-editor")
+export class HuiBarGaugeCardFeatureEditor
+  extends LitElement
+  implements LovelaceCardFeatureEditor
+{
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @property({ attribute: false }) public context?: LovelaceCardFeatureContext;
+
+  @state() private _config?: BarGaugeCardFeatureConfig;
+
+  public setConfig(config: BarGaugeCardFeatureConfig): void {
+    this._config = config;
+  }
+
+  private _schema = memoizeOne(
+    () =>
+      [
+        {
+          name: "min",
+          default: 0,
+          selector: {
+            number: {
+              mode: "box",
+            },
+          },
+        },
+        {
+          name: "max",
+          default: 100,
+          selector: {
+            number: {
+              mode: "box",
+            },
+          },
+        },
+      ] as const
+  );
+
+  protected render() {
+    if (!this.hass || !this._config) {
+      return nothing;
+    }
+
+    const schema = this._schema();
+
+    return html`
+      <ha-form
+        .hass=${this.hass}
+        .data=${this._config}
+        .schema=${schema}
+        .computeLabel=${this._computeLabelCallback}
+        @value-changed=${this._valueChanged}
+      ></ha-form>
+    `;
+  }
+
+  private _valueChanged(ev: CustomEvent): void {
+    fireEvent(this, "config-changed", { config: ev.detail.value });
+  }
+
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ) =>
+    this.hass!.localize(
+      `ui.panel.lovelace.editor.features.types.bar-gauge.${schema.name}`
+    );
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-bar-gauge-card-feature-editor": HuiBarGaugeCardFeatureEditor;
+  }
+}

src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts

@@ -123,6 +123,7 @@ type UiFeatureTypes = (typeof UI_FEATURE_TYPES)[number];
 const EDITABLES_FEATURE_TYPES = new Set<UiFeatureTypes>([
   "alarm-modes",
   "area-controls",
+  "bar-gauge",
   "button",
   "climate-fan-modes",
   "climate-hvac-modes",

src/panels/lovelace/editor/config-elements/hui-trend-graph-card-feature-editor.ts

@@ -20,6 +20,10 @@ const SCHEMA = [
     default: DEFAULT_HOURS_TO_SHOW,
     selector: { number: { min: 1, mode: "box" } },
   },
+  {
+    name: "detail",
+    selector: { boolean: {} },
+  },
 ] as const satisfies HaFormSchema[];
 
 @customElement("hui-trend-graph-card-feature-editor")
@@ -48,6 +52,10 @@ export class HuiTrendGraphCardFeatureEditor
       data.hours_to_show = DEFAULT_HOURS_TO_SHOW;
     }
 
+    if (this._config.detail === undefined) {
+      data.detail = true;
+    }
+
     return html`
       <ha-form
         .hass=${this.hass}
@@ -69,6 +77,10 @@ export class HuiTrendGraphCardFeatureEditor
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.generic.${schema.name}`
         );
+      case "detail":
+        return this.hass!.localize(
+          "ui.panel.lovelace.editor.features.types.trend-graph.detail"
+        );
       default:
         return "";
     }

src/panels/lovelace/editor/select-dashboard/hui-dialog-select-dashboard.ts

@@ -3,20 +3,21 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-md-dialog";
+import "../../../../components/ha-button";
 import "../../../../components/ha-dialog-header";
 import "../../../../components/ha-icon-button";
+import "../../../../components/ha-md-dialog";
+import type { HaMdDialog } from "../../../../components/ha-md-dialog";
 import "../../../../components/ha-md-select";
 import "../../../../components/ha-md-select-option";
-import "../../../../components/ha-button";
 import "../../../../components/ha-spinner";
 import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
 import type { LovelaceDashboard } from "../../../../data/lovelace/dashboard";
 import { fetchDashboards } from "../../../../data/lovelace/dashboard";
+import { getDefaultPanelUrlPath } from "../../../../data/panel";
 import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import type { SelectDashboardDialogParams } from "./show-select-dashboard-dialog";
-import type { HaMdDialog } from "../../../../components/ha-md-dialog";
 
 @customElement("hui-dialog-select-dashboard")
 export class HuiDialogSelectDashboard extends LitElement {
@@ -143,7 +144,9 @@ export class HuiDialogSelectDashboard extends LitElement {
       ...(this._params!.dashboards || (await fetchDashboards(this.hass))),
     ];
 
-    const currentPath = this._fromUrlPath || this.hass.defaultPanel;
+    const defaultPanel = getDefaultPanelUrlPath(this.hass);
+
+    const currentPath = this._fromUrlPath || defaultPanel;
     for (const dashboard of this._dashboards!) {
       if (dashboard.url_path !== currentPath) {
         this._toUrlPath = dashboard.url_path;

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

@@ -16,6 +16,7 @@ import { fetchConfig } from "../../../../data/lovelace/config/types";
 import { isStrategyView } from "../../../../data/lovelace/config/view";
 import type { LovelaceDashboard } from "../../../../data/lovelace/dashboard";
 import { fetchDashboards } from "../../../../data/lovelace/dashboard";
+import { getDefaultPanelUrlPath } from "../../../../data/panel";
 import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import type { SelectViewDialogParams } from "./show-select-view-dialog";
@@ -60,6 +61,9 @@ export class HuiDialogSelectView extends LitElement {
     if (!this._params) {
       return nothing;
     }
+
+    const defaultPanel = getDefaultPanelUrlPath(this.hass);
+
     return html`
       <ha-dialog
         open
@@ -76,7 +80,7 @@ export class HuiDialogSelectView extends LitElement {
                 "ui.panel.lovelace.editor.select_view.dashboard_label"
               )}
               .disabled=${!this._dashboards.length}
-              .value=${this._urlPath || this.hass.defaultPanel}
+              .value=${this._urlPath || defaultPanel}
               @selected=${this._dashboardChanged}
               @closed=${stopPropagation}
               fixedMenuPosition

src/panels/lovelace/strategies/get-strategy.ts

@@ -38,7 +38,10 @@ const STRATEGIES: Record<LovelaceStrategyConfigType, Record<string, any>> = {
   view: {
     "original-states": () =>
       import("./original-states/original-states-view-strategy"),
-    energy: () => import("../../energy/strategies/energy-view-strategy"),
+    "energy-overview": () =>
+      import("../../energy/strategies/energy-overview-view-strategy"),
+    "energy-electricity": () =>
+      import("../../energy/strategies/energy-electricity-view-strategy"),
     map: () => import("./map/map-view-strategy"),
     iframe: () => import("./iframe/iframe-view-strategy"),
     area: () => import("./areas/area-view-strategy"),

src/panels/lovelace/strategies/home/helpers/home-structure.ts

@@ -1,39 +0,0 @@
-import type { AreaRegistryEntry } from "../../../../../data/area_registry";
-import type { FloorRegistryEntry } from "../../../../../data/floor_registry";
-
-interface HomeStructure {
-  floors: {
-    id: string;
-    areas: string[];
-  }[];
-  areas: string[];
-}
-
-export const getHomeStructure = (
-  floors: FloorRegistryEntry[],
-  areas: AreaRegistryEntry[]
-): HomeStructure => {
-  const floorAreas = new Map<string, string[]>();
-  const unassignedAreas: string[] = [];
-
-  for (const area of areas) {
-    if (area.floor_id) {
-      if (!floorAreas.has(area.floor_id)) {
-        floorAreas.set(area.floor_id, []);
-      }
-      floorAreas.get(area.floor_id)!.push(area.area_id);
-    } else {
-      unassignedAreas.push(area.area_id);
-    }
-  }
-
-  const homeStructure: HomeStructure = {
-    floors: floors.map((floor) => ({
-      id: floor.floor_id,
-      areas: floorAreas.get(floor.floor_id) || [],
-    })),
-    areas: unassignedAreas,
-  };
-
-  return homeStructure;
-};

src/panels/lovelace/strategies/home/home-dashboard-strategy.ts

@@ -4,7 +4,6 @@ import { customElement } from "lit/decorators";
 import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
 import type { LovelaceViewRawConfig } from "../../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../../types";
-import { getAreas } from "../areas/helpers/areas-strategy-helper";
 import type { LovelaceStrategyEditor } from "../types";
 import {
   getSummaryLabel,
@@ -46,7 +45,7 @@ export class HomeDashboardStrategy extends ReactiveElement {
       };
     }
 
-    const areas = getAreas(hass.areas);
+    const areas = Object.values(hass.areas);
 
     const areaViews = areas.map<LovelaceViewRawConfig>((area) => {
       const path = `areas-${area.area_id}`;

src/panels/lovelace/strategies/home/home-main-view-strategy.ts

@@ -22,9 +22,8 @@ import type {
   MarkdownCardConfig,
   WeatherForecastCardConfig,
 } from "../../cards/types";
-import { getAreas, getFloors } from "../areas/helpers/areas-strategy-helper";
 import type { CommonControlSectionStrategyConfig } from "../usage_prediction/common-controls-section-strategy";
-import { getHomeStructure } from "./helpers/home-structure";
+import { getAreasFloorHierarchy } from "../../../../common/areas/areas-floor-hierarchy";
 import { HOME_SUMMARIES_FILTERS } from "./helpers/home-summaries";
 
 export interface HomeMainViewStrategyConfig {
@@ -64,10 +63,10 @@ export class HomeMainViewStrategy extends ReactiveElement {
     config: HomeMainViewStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
-    const areas = getAreas(hass.areas);
-    const floors = getFloors(hass.floors);
+    const areas = Object.values(hass.areas);
+    const floors = Object.values(hass.floors);
 
-    const home = getHomeStructure(floors, areas);
+    const home = getAreasFloorHierarchy(floors, areas);
 
     const floorCount = home.floors.length + (home.areas.length ? 1 : 0);
 

src/panels/lovelace/strategies/home/home-media-players-view-strategy.ts

@@ -10,8 +10,7 @@ import type { LovelaceSectionRawConfig } from "../../../../data/lovelace/config/
 import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../../types";
 import type { MediaControlCardConfig } from "../../cards/types";
-import { getAreas, getFloors } from "../areas/helpers/areas-strategy-helper";
-import { getHomeStructure } from "./helpers/home-structure";
+import { getAreasFloorHierarchy } from "../../../../common/areas/areas-floor-hierarchy";
 import { HOME_SUMMARIES_FILTERS } from "./helpers/home-summaries";
 
 export interface HomeMediaPlayersViewStrategyConfig {
@@ -85,9 +84,9 @@ export class HomeMMediaPlayersViewStrategy extends ReactiveElement {
     _config: HomeMediaPlayersViewStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
-    const areas = getAreas(hass.areas);
-    const floors = getFloors(hass.floors);
-    const home = getHomeStructure(floors, areas);
+    const areas = Object.values(hass.areas);
+    const floors = Object.values(hass.floors);
+    const home = getAreasFloorHierarchy(floors, areas);
 
     const sections: LovelaceSectionRawConfig[] = [];
 

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

@@ -365,7 +365,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
 
     @media (max-width: 600px) {
       :host {
-        --column-gap: var(--row-gap);
+        --column-gap: var(--ha-view-sections-narrow-column-gap, var(--row-gap));
       }
     }
 

src/panels/profile/ha-pick-dashboard-row.ts

@@ -6,8 +6,10 @@ import "../../components/ha-select";
 import "../../components/ha-settings-row";
 import type { LovelaceDashboard } from "../../data/lovelace/dashboard";
 import { fetchDashboards } from "../../data/lovelace/dashboard";
-import { setDefaultPanel } from "../../data/panel";
 import type { HomeAssistant } from "../../types";
+import { saveFrontendUserData } from "../../data/frontend";
+
+const USE_SYSTEM_VALUE = "___use_system___";
 
 @customElement("ha-pick-dashboard-row")
 class HaPickDashboardRow extends LitElement {
@@ -23,6 +25,7 @@ class HaPickDashboardRow extends LitElement {
   }
 
   protected render(): TemplateResult {
+    const value = this.hass.userData?.defaultPanel || USE_SYSTEM_VALUE;
     return html`
       <ha-settings-row .narrow=${this.narrow}>
         <span slot="heading">
@@ -37,14 +40,18 @@ class HaPickDashboardRow extends LitElement {
                 "ui.panel.profile.dashboard.dropdown_label"
               )}
               .disabled=${!this._dashboards?.length}
-              .value=${this.hass.defaultPanel}
+              .value=${value}
               @selected=${this._dashboardChanged}
               naturalMenuWidth
             >
+              <ha-list-item .value=${USE_SYSTEM_VALUE}>
+                ${this.hass.localize("ui.panel.profile.dashboard.system")}
+              </ha-list-item>
               <ha-list-item value="lovelace">
-                ${this.hass.localize(
-                  "ui.panel.profile.dashboard.default_dashboard_label"
-                )}
+                ${this.hass.localize("ui.panel.profile.dashboard.lovelace")}
+              </ha-list-item>
+              <ha-list-item value="home">
+                ${this.hass.localize("ui.panel.profile.dashboard.home")}
               </ha-list-item>
               ${this._dashboards.map((dashboard) => {
                 if (!this.hass.user!.is_admin && dashboard.require_admin) {
@@ -72,11 +79,18 @@ class HaPickDashboardRow extends LitElement {
   }
 
   private _dashboardChanged(ev) {
-    const urlPath = ev.target.value;
-    if (!urlPath || urlPath === this.hass.defaultPanel) {
+    const value = ev.target.value as string;
+    if (!value) {
       return;
     }
-    setDefaultPanel(this, urlPath);
+    const urlPath = value === USE_SYSTEM_VALUE ? undefined : value;
+    if (urlPath === this.hass.userData?.defaultPanel) {
+      return;
+    }
+    saveFrontendUserData(this.hass.connection, "core", {
+      ...this.hass.userData,
+      defaultPanel: urlPath,
+    });
   }
 }
 

src/panels/profile/ha-profile-section-general.ts

@@ -154,6 +154,10 @@ class HaProfileSectionGeneral extends LitElement {
               .narrow=${this.narrow}
               .hass=${this.hass}
             ></ha-pick-first-weekday-row>
+            <ha-pick-dashboard-row
+              .narrow=${this.narrow}
+              .hass=${this.hass}
+            ></ha-pick-dashboard-row>
             <ha-settings-row .narrow=${this.narrow}>
               <span slot="heading">
                 ${this.hass.localize(
@@ -208,10 +212,6 @@ class HaProfileSectionGeneral extends LitElement {
               .narrow=${this.narrow}
               .hass=${this.hass}
             ></ha-pick-theme-row>
-            <ha-pick-dashboard-row
-              .narrow=${this.narrow}
-              .hass=${this.hass}
-            ></ha-pick-dashboard-row>
             ${this.hass.dockedSidebar !== "auto" || !this.narrow
               ? html`
                   <ha-force-narrow-row

src/panels/security/strategies/security-view-strategy.ts

@@ -1,5 +1,6 @@
 import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
+import { getAreasFloorHierarchy } from "../../../common/areas/areas-floor-hierarchy";
 import {
   findEntities,
   generateEntityFilter,
@@ -10,12 +11,7 @@ import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
 import type { LovelaceSectionRawConfig } from "../../../data/lovelace/config/section";
 import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../types";
-import {
-  computeAreaTileCardConfig,
-  getAreas,
-  getFloors,
-} from "../../lovelace/strategies/areas/helpers/areas-strategy-helper";
-import { getHomeStructure } from "../../lovelace/strategies/home/helpers/home-structure";
+import { computeAreaTileCardConfig } from "../../lovelace/strategies/areas/helpers/areas-strategy-helper";
 
 export interface SecurityViewStrategyConfig {
   type: "security";
@@ -127,9 +123,9 @@ export class SecurityViewStrategy extends ReactiveElement {
     _config: SecurityViewStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
-    const areas = getAreas(hass.areas);
-    const floors = getFloors(hass.floors);
-    const home = getHomeStructure(floors, areas);
+    const areas = Object.values(hass.areas);
+    const floors = Object.values(hass.floors);
+    const hierarchy = getAreasFloorHierarchy(floors, areas);
 
     const sections: LovelaceSectionRawConfig[] = [];
 
@@ -141,10 +137,11 @@ export class SecurityViewStrategy extends ReactiveElement {
 
     const entities = findEntities(allEntities, securityFilters);
 
-    const floorCount = home.floors.length + (home.areas.length ? 1 : 0);
+    const floorCount =
+      hierarchy.floors.length + (hierarchy.areas.length ? 1 : 0);
 
     // Process floors
-    for (const floorStructure of home.floors) {
+    for (const floorStructure of hierarchy.floors) {
       const floorId = floorStructure.id;
       const areaIds = floorStructure.areas;
       const floor = hass.floors[floorId];
@@ -173,7 +170,7 @@ export class SecurityViewStrategy extends ReactiveElement {
     }
 
     // Process unassigned areas
-    if (home.areas.length > 0) {
+    if (hierarchy.areas.length > 0) {
       const section: LovelaceSectionRawConfig = {
         type: "grid",
         column_span: 2,
@@ -188,7 +185,11 @@ export class SecurityViewStrategy extends ReactiveElement {
         ],
       };
 
-      const areaCards = processAreasForSecurity(home.areas, hass, entities);
+      const areaCards = processAreasForSecurity(
+        hierarchy.areas,
+        hass,
+        entities
+      );
 
       if (areaCards.length > 0) {
         section.cards!.push(...areaCards);

src/state/connection-mixin.ts

@@ -8,13 +8,16 @@ import {
   subscribeServices,
 } from "home-assistant-js-websocket";
 import { fireEvent } from "../common/dom/fire_event";
+import { computeStateName } from "../common/entity/compute_state_name";
 import { promiseTimeout } from "../common/util/promise-timeout";
 import { subscribeAreaRegistry } from "../data/area_registry";
 import { broadcastConnectionStatus } from "../data/connection-status";
 import { subscribeDeviceRegistry } from "../data/device_registry";
-import { subscribeFrontendUserData } from "../data/frontend";
+import {
+  subscribeFrontendSystemData,
+  subscribeFrontendUserData,
+} from "../data/frontend";
 import { forwardHaptic } from "../data/haptics";
-import { DEFAULT_PANEL } from "../data/panel";
 import { serviceCallWillDisconnect } from "../data/service";
 import {
   DateFormat,
@@ -33,7 +36,6 @@ import { fetchWithAuth } from "../util/fetch-with-auth";
 import { getState } from "../util/ha-pref-storage";
 import hassCallApi, { hassCallApiRaw } from "../util/hass-call-api";
 import type { HassBaseEl } from "./hass-base-mixin";
-import { computeStateName } from "../common/entity/compute_state_name";
 
 export const connectionMixin = <T extends Constructor<HassBaseEl>>(
   superClass: T
@@ -59,8 +61,9 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
         panels: null as any,
         services: null as any,
         user: null as any,
+        userData: undefined,
+        systemData: undefined,
         panelUrl: (this as any)._panelUrl,
-        defaultPanel: DEFAULT_PANEL,
         language,
         selectedLanguage: null,
         locale: {
@@ -73,7 +76,6 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
         },
         resources: null as any,
         localize: () => "",
-
         translationMetadata,
         dockedSidebar: "docked",
         vibrate: true,
@@ -209,9 +211,9 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
         formatEntityAttributeName: (_stateObj, attribute) => attribute,
         formatEntityAttributeValue: (stateObj, attribute, value) =>
           value != null ? value : (stateObj.attributes[attribute] ?? ""),
+        formatEntityName: (stateObj) => computeStateName(stateObj),
         ...getState(),
         ...this._pendingHass,
-        formatEntityName: (stateObj) => computeStateName(stateObj),
       };
 
       this.hassConnected();
@@ -282,10 +284,26 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
       subscribeConfig(conn, (config) => this._updateHass({ config }));
       subscribeServices(conn, (services) => this._updateHass({ services }));
       subscribePanels(conn, (panels) => this._updateHass({ panels }));
-      subscribeFrontendUserData(conn, "core", ({ value: userData }) => {
-        this._updateHass({ userData });
+      // Catch errors to userData and systemData subscription (e.g. if the
+      // backend isn't up to date) and set to null so frontend can continue
+      subscribeFrontendUserData(conn, "core", ({ value: userData }) =>
+        this._updateHass({ userData: userData || {} })
+      ).catch(() => {
+        // eslint-disable-next-line no-console
+        console.error(
+          "Failed to subscribe to user data, setting to empty object"
+        );
+        this._updateHass({ userData: {} });
+      });
+      subscribeFrontendSystemData(conn, "core", ({ value: systemData }) =>
+        this._updateHass({ systemData: systemData || {} })
+      ).catch(() => {
+        // eslint-disable-next-line no-console
+        console.error(
+          "Failed to subscribe to system data, setting to empty object"
+        );
+        this._updateHass({ systemData: {} });
       });
-
       clearInterval(this.__backendPingInterval);
       this.__backendPingInterval = setInterval(() => {
         if (this.hass?.connected) {

src/state/quick-bar-mixin.ts

@@ -1,5 +1,4 @@
 import type { PropertyValues } from "lit";
-import { tinykeys } from "tinykeys";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { mainWindow } from "../common/dom/get_main_window";
@@ -12,9 +11,9 @@ import type { Constructor, HomeAssistant } from "../types";
 import { storeState } from "../util/ha-pref-storage";
 import { showToast } from "../util/toast";
 import type { HassElement } from "./hass-element";
+import { ShortcutManager } from "../common/keyboard/shortcuts";
 import { extractSearchParamsObject } from "../common/url/search-params";
 import { showVoiceCommandDialog } from "../dialogs/voice-command-dialog/show-ha-voice-command-dialog";
-import { canOverrideAlphanumericInput } from "../common/dom/can-override-input";
 import { showShortcutsDialog } from "../dialogs/shortcuts/show-shortcuts-dialog";
 import type { Redirects } from "../panels/my/ha-panel-my";
 
@@ -62,21 +61,22 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
     }
 
     private _registerShortcut() {
-      tinykeys(window, {
+      const shortcutManager = new ShortcutManager();
+      shortcutManager.add({
         // Those are for latin keyboards that have e, c, m keys
-        e: (ev) => this._showQuickBar(ev),
-        c: (ev) => this._showQuickBar(ev, QuickBarMode.Command),
-        m: (ev) => this._createMyLink(ev),
-        a: (ev) => this._showVoiceCommandDialog(ev),
-        d: (ev) => this._showQuickBar(ev, QuickBarMode.Device),
+        e: { handler: (ev) => this._showQuickBar(ev) },
+        c: { handler: (ev) => this._showQuickBar(ev, QuickBarMode.Command) },
+        m: { handler: (ev) => this._createMyLink(ev) },
+        a: { handler: (ev) => this._showVoiceCommandDialog(ev) },
+        d: { handler: (ev) => this._showQuickBar(ev, QuickBarMode.Device) },
         // Workaround see https://github.com/jamiebuilds/tinykeys/issues/130
-        "Shift+?": (ev) => this._showShortcutDialog(ev),
+        "Shift+?": { handler: (ev) => this._showShortcutDialog(ev) },
         // Those are fallbacks for non-latin keyboards that don't have e, c, m keys (qwerty-based shortcuts)
-        KeyE: (ev) => this._showQuickBar(ev),
-        KeyC: (ev) => this._showQuickBar(ev, QuickBarMode.Command),
-        KeyM: (ev) => this._createMyLink(ev),
-        KeyA: (ev) => this._showVoiceCommandDialog(ev),
-        KeyD: (ev) => this._showQuickBar(ev, QuickBarMode.Device),
+        KeyE: { handler: (ev) => this._showQuickBar(ev) },
+        KeyC: { handler: (ev) => this._showQuickBar(ev, QuickBarMode.Command) },
+        KeyM: { handler: (ev) => this._createMyLink(ev) },
+        KeyA: { handler: (ev) => this._showVoiceCommandDialog(ev) },
+        KeyD: { handler: (ev) => this._showQuickBar(ev, QuickBarMode.Device) },
       });
     }
 
@@ -87,7 +87,6 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
     private _showVoiceCommandDialog(e: KeyboardEvent) {
       if (
         !this.hass?.enableShortcuts ||
-        !canOverrideAlphanumericInput(e.composedPath()) ||
         !this._conversation(this.hass.config.components)
       ) {
         return;
@@ -105,7 +104,7 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
       e: KeyboardEvent,
       mode: QuickBarMode = QuickBarMode.Entity
     ) {
-      if (!this._canShowQuickBar(e)) {
+      if (!this._canShowQuickBar()) {
         return;
       }
 
@@ -118,7 +117,7 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
     }
 
     private _showShortcutDialog(e: KeyboardEvent) {
-      if (!this._canShowQuickBar(e)) {
+      if (!this._canShowQuickBar()) {
         return;
       }
 
@@ -131,10 +130,7 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
     }
 
     private async _createMyLink(e: KeyboardEvent) {
-      if (
-        !this.hass?.enableShortcuts ||
-        !canOverrideAlphanumericInput(e.composedPath())
-      ) {
+      if (!this.hass?.enableShortcuts) {
         return;
       }
 
@@ -193,11 +189,7 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
       });
     }
 
-    private _canShowQuickBar(e: KeyboardEvent) {
-      return (
-        this.hass?.user?.is_admin &&
-        this.hass.enableShortcuts &&
-        canOverrideAlphanumericInput(e.composedPath())
-      );
+    private _canShowQuickBar() {
+      return this.hass?.user?.is_admin && this.hass.enableShortcuts;
     }
   };

src/state/sidebar-mixin.ts

@@ -7,20 +7,14 @@ interface DockSidebarParams {
   dock: HomeAssistant["dockedSidebar"];
 }
 
-interface DefaultPanelParams {
-  defaultPanel: HomeAssistant["defaultPanel"];
-}
-
 declare global {
   // for fire event
   interface HASSDomEvents {
     "hass-dock-sidebar": DockSidebarParams;
-    "hass-default-panel": DefaultPanelParams;
   }
   // for add event listener
   interface HTMLElementEventMap {
     "hass-dock-sidebar": HASSDomEvent<DockSidebarParams>;
-    "hass-default-panel": HASSDomEvent<DefaultPanelParams>;
   }
 }
 
@@ -32,9 +26,5 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
         this._updateHass({ dockedSidebar: ev.detail.dock });
         storeState(this.hass!);
       });
-      this.addEventListener("hass-default-panel", (ev) => {
-        this._updateHass({ defaultPanel: ev.detail.defaultPanel });
-        storeState(this.hass!);
-      });
     }
   };

src/translations/en.json

@@ -1237,7 +1237,8 @@
             "times": "times"
           },
           "summary": "Summary",
-          "description": "Description"
+          "description": "Description",
+          "location": "Location"
         },
         "views": {
           "dayGridMonth": "[%key:ui::panel::lovelace::editor::card::calendar::views::dayGridMonth%]",
@@ -2456,7 +2457,10 @@
               "delete_floor": "Delete floor",
               "confirm_delete": "Delete floor?",
               "confirm_delete_text": "Deleting the floor will unassign all areas from it."
-            }
+            },
+            "area_reorder_failed": "Failed to reorder areas",
+            "area_move_failed": "Failed to move area",
+            "floor_reorder_failed": "Failed to reorder floors"
           },
           "editor": {
             "create_area": "Create area",
@@ -3515,8 +3519,12 @@
               "delete": "Delete",
               "update": "Update",
               "create": "Create",
-              "set_default": "Set as default on this device",
-              "remove_default": "Remove as default on this device"
+              "set_default": "Set as default",
+              "remove_default": "Remove as default",
+              "set_default_confirm_title": "Set as default dashboard?",
+              "set_default_confirm_text": "This will replace the current default dashboard. Users can still override their default dashboard in their profile settings.",
+              "remove_default_confirm_title": "Remove default dashboard?",
+              "remove_default_confirm_text": "The default dashboard will be changed to Overview for every user. Users can still override their default dashboard in their profile settings."
             }
           },
           "resources": {
@@ -7166,7 +7174,7 @@
               "grid": "Grid",
               "solar": "Solar",
               "battery": "Battery",
-              "usage": "Used"
+              "usage": "Consumption"
             },
             "energy_compare": {
               "info": "You are comparing the period {start} with the period {end}",
@@ -8424,10 +8432,13 @@
                 "no_compatible_controls": "No compatible controls available for this area"
               },
               "bar-gauge": {
-                "label": "Bar gauge"
+                "label": "Bar gauge",
+                "min": "Minimum value",
+                "max": "Maximum value"
               },
               "trend-graph": {
-                "label": "Trend graph"
+                "label": "Trend graph",
+                "detail": "Show more detail"
               }
             }
           },
@@ -8663,9 +8674,11 @@
         },
         "dashboard": {
           "header": "Dashboard",
-          "description": "Pick a default dashboard for this device.",
+          "description": "Pick a default dashboard to show.",
           "dropdown_label": "Dashboard",
-          "default_dashboard_label": "Overview (default)"
+          "lovelace": "Overview",
+          "home": "Home",
+          "system": "Auto (use system settings)"
         },
         "change_password": {
           "header": "Change password",
@@ -9426,6 +9439,11 @@
         }
       },
       "energy": {
+        "overview": {
+          "electricity": "Electricity",
+          "gas": "Gas",
+          "water": "Water"
+        },
         "download_data": "[%key:ui::panel::history::download_data%]",
         "configure": "[%key:ui::dialogs::quick-bar::commands::navigation::energy%]",
         "setup": {
@@ -9450,7 +9468,9 @@
           "energy_sources_table_title": "Sources",
           "energy_devices_graph_title": "Individual devices total usage",
           "energy_devices_detail_graph_title": "Individual devices detail usage",
-          "energy_sankey_title": "Energy flow"
+          "energy_sankey_title": "Energy flow",
+          "energy_top_consumers_title": "Top consumers",
+          "power_sankey_title": "Current power flow"
         }
       },
       "history": {

src/types.ts

@@ -18,7 +18,10 @@ import type { AreaRegistryEntry } from "./data/area_registry";
 import type { DeviceRegistryEntry } from "./data/device_registry";
 import type { EntityRegistryDisplayEntry } from "./data/entity_registry";
 import type { FloorRegistryEntry } from "./data/floor_registry";
-import type { CoreFrontendUserData } from "./data/frontend";
+import type {
+  CoreFrontendSystemData,
+  CoreFrontendUserData,
+} from "./data/frontend";
 import type {
   FrontendLocaleData,
   getHassTranslations,
@@ -248,10 +251,10 @@ export interface HomeAssistant {
   vibrate: boolean;
   debugConnection: boolean;
   dockedSidebar: "docked" | "always_hidden" | "auto";
-  defaultPanel: string;
   moreInfoEntityId: string | null;
   user?: CurrentUser;
-  userData?: CoreFrontendUserData | null;
+  userData?: CoreFrontendUserData;
+  systemData?: CoreFrontendSystemData;
   hassUrl(path?): string;
   callService<T = any>(
     domain: ServiceCallRequest["domain"],

src/util/ha-pref-storage.ts

@@ -8,8 +8,9 @@ const STORED_STATE = [
   "debugConnection",
   "suspendWhenHidden",
   "enableShortcuts",
-  "defaultPanel",
-];
+] as const;
+
+type StoredHomeAssistant = Pick<HomeAssistant, (typeof STORED_STATE)[number]>;
 
 export function storeState(hass: HomeAssistant) {
   try {
@@ -31,8 +32,8 @@ export function storeState(hass: HomeAssistant) {
   }
 }
 
-export function getState() {
-  const state = {};
+export function getState(): Partial<StoredHomeAssistant> {
+  const state = {} as Partial<StoredHomeAssistant>;
 
   STORED_STATE.forEach((key) => {
     const storageItem = window.localStorage.getItem(key);

test/util/ha-pref-storage.test.ts

@@ -24,7 +24,7 @@ describe("ha-pref-storage", () => {
     window.localStorage.setItem = vi.fn();
 
     storeState(mockHass as unknown as HomeAssistant);
-    expect(window.localStorage.setItem).toHaveBeenCalledTimes(8);
+    expect(window.localStorage.setItem).toHaveBeenCalledTimes(7);
     expect(window.localStorage.setItem).toHaveBeenCalledWith(
       "dockedSidebar",
       JSON.stringify("auto")

yarn.lock

@@ -8869,25 +8869,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:11.0.3":
-  version: 11.0.3
-  resolution: "glob@npm:11.0.3"
+"glob@npm:12.0.0":
+  version: 12.0.0
+  resolution: "glob@npm:12.0.0"
   dependencies:
     foreground-child: "npm:^3.3.1"
     jackspeak: "npm:^4.1.1"
-    minimatch: "npm:^10.0.3"
+    minimatch: "npm:^10.1.1"
     minipass: "npm:^7.1.2"
     package-json-from-dist: "npm:^1.0.0"
     path-scurry: "npm:^2.0.0"
   bin:
     glob: dist/esm/bin.mjs
-  checksum: 10/2ae536c1360c0266b523b2bfa6aadc10144a8b7e08869b088e37ac3c27cd30774f82e4bfb291cde796776e878f9e13200c7ff44010eb7054e00f46f649397893
+  checksum: 10/6e21b3f1f1fa635836d45e54bbe50704884cc3e310e0cc011cfb5429db65a030e12936d99b07e66236370efe45dc8c8b26fa5334dbf555d6f8709e0315c77c30
   languageName: node
   linkType: hard
 
-"glob@npm:^10.2.2":
-  version: 10.4.5
-  resolution: "glob@npm:10.4.5"
+"glob@npm:^10.5.0":
+  version: 10.5.0
+  resolution: "glob@npm:10.5.0"
   dependencies:
     foreground-child: "npm:^3.1.0"
     jackspeak: "npm:^3.1.2"
@@ -8897,7 +8897,7 @@ __metadata:
     path-scurry: "npm:^1.11.1"
   bin:
     glob: dist/esm/bin.mjs
-  checksum: 10/698dfe11828b7efd0514cd11e573eaed26b2dff611f0400907281ce3eab0c1e56143ef9b35adc7c77ecc71fba74717b510c7c223d34ca8a98ec81777b293d4ac
+  checksum: 10/ab3bccfefcc0afaedbd1f480cd0c4a2c0e322eb3f0aa7ceaa31b3f00b825069f17cf0f1fc8b6f256795074b903f37c0ade37ddda6a176aa57f1c2bbfe7240653
   languageName: node
   linkType: hard
 
@@ -9324,7 +9324,7 @@ __metadata:
     fancy-log: "npm:2.0.0"
     fs-extra: "npm:11.3.2"
     fuse.js: "npm:7.1.0"
-    glob: "npm:11.0.3"
+    glob: "npm:12.0.0"
     google-timezones-json: "npm:1.2.0"
     gulp: "npm:5.0.1"
     gulp-brotli: "npm:3.0.0"
@@ -9337,7 +9337,7 @@ __metadata:
     husky: "npm:9.1.7"
     idb-keyval: "npm:6.2.2"
     intl-messageformat: "npm:10.7.18"
-    js-yaml: "npm:4.1.0"
+    js-yaml: "npm:4.1.1"
     jsdom: "npm:27.1.0"
     jszip: "npm:3.10.1"
     leaflet: "npm:1.9.4"
@@ -10407,14 +10407,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"js-yaml@npm:4.1.0, js-yaml@npm:^4.1.0":
-  version: 4.1.0
-  resolution: "js-yaml@npm:4.1.0"
+"js-yaml@npm:4.1.1, js-yaml@npm:^4.1.0":
+  version: 4.1.1
+  resolution: "js-yaml@npm:4.1.1"
   dependencies:
     argparse: "npm:^2.0.1"
   bin:
     js-yaml: bin/js-yaml.js
-  checksum: 10/c138a34a3fd0d08ebaf71273ad4465569a483b8a639e0b118ff65698d257c2791d3199e3f303631f2cb98213fa7b5f5d6a4621fd0fff819421b990d30d967140
+  checksum: 10/a52d0519f0f4ef5b4adc1cde466cb54c50d56e2b4a983b9d5c9c0f2f99462047007a6274d7e95617a21d3c91fde3ee6115536ed70991cd645ba8521058b78f77
   languageName: node
   linkType: hard
 
@@ -11167,12 +11167,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:^10.0.3":
-  version: 10.0.3
-  resolution: "minimatch@npm:10.0.3"
+"minimatch@npm:^10.1.1":
+  version: 10.1.1
+  resolution: "minimatch@npm:10.1.1"
   dependencies:
     "@isaacs/brace-expansion": "npm:^5.0.0"
-  checksum: 10/d5b8b2538b367f2cfd4aeef27539fddeee58d1efb692102b848e4a968a09780a302c530eb5aacfa8c57f7299155fb4b4e85219ad82664dcef5c66f657111d9b8
+  checksum: 10/110f38921ea527022e90f7a5f43721838ac740d0a0c26881c03b57c261354fb9a0430e40b2c56dfcea2ef3c773768f27210d1106f1f2be19cde3eea93f26f45e
   languageName: node
   linkType: hard