Introduce Home Assistant Labs (#27989)

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Bram Kragten <mail@bramkragten.nl>

.github/copilot-instructions.md

@@ -2,6 +2,8 @@
 
 You are an assistant helping with development of the Home Assistant frontend. The frontend is built using Lit-based Web Components and TypeScript, providing a responsive and performant interface for home automation control.
 
+**Note**: This file contains high-level guidelines and references to implementation patterns. For detailed component documentation, API references, and usage examples, refer to the `gallery/` directory.
+
 ## Table of Contents
 
 - [Quick Reference](#quick-reference)
@@ -151,6 +153,10 @@ try {
 ### Styling Guidelines
 
 - **Use CSS custom properties**: Leverage the theme system
+- **Use spacing tokens**: Prefer `--ha-space-*` tokens over hardcoded values for consistent spacing
+  - Spacing scale: `--ha-space-0` (0px) through `--ha-space-20` (80px) in 4px increments
+  - Defined in `src/resources/theme/core.globals.ts`
+  - Common values: `--ha-space-2` (8px), `--ha-space-4` (16px), `--ha-space-8` (32px)
 - **Mobile-first responsive**: Design for mobile, enhance for desktop
 - **Follow Material Design**: Use Material Web Components where appropriate
 - **Support RTL**: Ensure all layouts work in RTL languages
@@ -159,21 +165,68 @@ try {
 static get styles() {
   return css`
     :host {
-      --spacing: 16px;
-      padding: var(--spacing);
+      padding: var(--ha-space-4);
       color: var(--primary-text-color);
       background-color: var(--card-background-color);
     }
 
+    .content {
+      gap: var(--ha-space-2);
+    }
+
     @media (max-width: 600px) {
       :host {
-        --spacing: 8px;
+        padding: var(--ha-space-2);
       }
     }
   `;
 }
 ```
 
+### View Transitions
+
+The View Transitions API creates smooth animations between DOM state changes. When implementing view transitions:
+
+**Core Resources:**
+
+- **Utility wrapper**: `src/common/util/view-transition.ts` - `withViewTransition()` function with graceful fallback
+- **Real-world example**: `src/util/launch-screen.ts` - Launch screen fade pattern with browser support detection
+- **Animation keyframes**: `src/resources/theme/animations.globals.ts` - Global `fade-in`, `fade-out`, `scale` animations
+- **Animation duration**: `src/resources/theme/core.globals.ts` - `--ha-animation-base-duration` (350ms, respects `prefers-reduced-motion`)
+
+**Implementation Guidelines:**
+
+1. Always use `withViewTransition()` wrapper for automatic fallback
+2. Keep transitions simple (subtle crossfades and fades work best)
+3. Use `--ha-animation-base-duration` CSS variable for consistent timing
+4. Assign unique `view-transition-name` to elements (must be unique at any given time)
+5. For Lit components: Override `performUpdate()` or use `::part()` for internal elements
+
+**Default Root Transition:**
+
+By default, `:root` receives `view-transition-name: root`, creating a full-page crossfade. Target with [`::view-transition-group(root)`](https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition-group) to customize the default page transition.
+
+**Important Constraints:**
+
+- Each `view-transition-name` must be unique at any given time
+- Only one view transition can run at a time
+- **Shadow DOM incompatibility**: View transitions operate at document level and do not work within Shadow DOM due to style isolation ([spec discussion](https://github.com/w3c/csswg-drafts/issues/10303)). For web components, set `view-transition-name` on the `:host` element or use document-level transitions
+
+**Current Usage & Planned Applications:**
+
+- Launch screen fade out (implemented)
+- Automation sidebar transitions (planned - #27238)
+- More info dialog content changes (planned - #27672)
+- Toolbar navigation, ha-spinner transitions (planned)
+
+**Specification & Documentation:**
+
+For browser support, API details, and current specifications, refer to these authoritative sources (note: check publication dates as specs evolve):
+
+- [MDN: View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API) - Comprehensive API reference
+- [Chrome for Developers: View Transitions](https://developer.chrome.com/docs/web-platform/view-transitions) - Implementation guide and examples
+- [W3C Draft Specification](https://drafts.csswg.org/css-view-transitions/) - Official specification (evolving)
+
 ### Performance Best Practices
 
 - **Code split**: Split code at the panel/dialog level
@@ -195,8 +248,9 @@ static get styles() {
 
 **Available Dialog Types:**
 
-- `ha-md-dialog` - Preferred for new code (Material Design 3)
-- `ha-dialog` - Legacy component still widely used
+- `ha-wa-dialog` - Preferred for new dialogs (Web Awesome based)
+- `ha-md-dialog` - Material Design 3 dialog component
+- `ha-dialog` - Legacy component (still widely used)
 
 **Opening Dialogs (Fire Event Pattern - Recommended):**
 
@@ -211,15 +265,45 @@ fireEvent(this, "show-dialog", {
 **Dialog Implementation Requirements:**
 
 - Implement `HassDialog<T>` interface
-- Use `createCloseHeading()` for standard headers
-- Import `haStyleDialog` for consistent styling
+- Use `@state() private _open = false` to control dialog visibility
+- Set `_open = true` in `showDialog()`, `_open = false` in `closeDialog()`
 - Return `nothing` when no params (loading state)
-- Fire `dialog-closed` event when closing
-- Add `dialogInitialFocus` for accessibility
+- Fire `dialog-closed` event in `_dialogClosed()` handler
+- Use `header-title` attribute for simple titles
+- Use `header-subtitle` attribute for simple subtitles
+- Use slots for custom content where the standard attributes are not enough
+- Use `ha-dialog-footer` with `primaryAction`/`secondaryAction` slots for footer content
+- Add `autofocus` to first focusable element (e.g., `<ha-form autofocus>`). The component may need to forward this attribute internally.
 
-````
+**Dialog Sizing:**
+
+- Use `width` attribute with predefined sizes: `"small"` (320px), `"medium"` (560px - default), `"large"` (720px), or `"full"`
+- Custom sizing is NOT recommended - use the standard width presets
+- Example: `<ha-wa-dialog width="small">` for alert/confirmation dialogs
+
+**Button Appearance Guidelines:**
+
+- **Primary action buttons**: Default appearance (no appearance attribute) or omit for standard styling
+- **Secondary action buttons**: Use `appearance="plain"` for cancel/dismiss actions
+- **Destructive actions**: Use `appearance="filled"` for delete/remove operations (combined with appropriate semantic styling)
+- **Button sizes**: Use `size="small"` (32px height) or default/medium (40px height)
+- Always place primary action in `slot="primaryAction"` and secondary in `slot="secondaryAction"` within `ha-dialog-footer`
+
+**Recent Examples:**
+
+See these files for current patterns:
+
+- `src/panels/config/repairs/dialog-repairs-issue.ts`
+- `src/dialogs/restart/dialog-restart.ts`
+- `src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts`
+
+**Gallery Documentation:**
+
+- `gallery/src/pages/components/ha-wa-dialog.markdown`
+- `gallery/src/pages/components/ha-dialogs.markdown`
 
 ### Form Component (ha-form)
+
 - Schema-driven using `HaFormSchema[]`
 - Supports entity, device, area, target, number, boolean, time, action, text, object, select, icon, media, location selectors
 - Built-in validation with error display
@@ -235,7 +319,11 @@ fireEvent(this, "show-dialog", {
   .computeLabel=${(schema) => this.hass.localize(`ui.panel.${schema.name}`)}
   @value-changed=${this._valueChanged}
 ></ha-form>
-````
+```
+
+**Gallery Documentation:**
+
+- `gallery/src/pages/components/ha-form.markdown`
 
 ### Alert Component (ha-alert)
 
@@ -249,6 +337,35 @@ fireEvent(this, "show-dialog", {
 <ha-alert alert-type="success" dismissable>Success message</ha-alert>
 ```
 
+**Gallery Documentation:**
+
+- `gallery/src/pages/components/ha-alert.markdown`
+
+### Keyboard Shortcuts (ShortcutManager)
+
+The `ShortcutManager` class provides a unified way to register keyboard shortcuts with automatic input field protection.
+
+**Key Features:**
+
+- Automatically blocks shortcuts when input fields are focused
+- Prevents shortcuts during text selection (configurable via `allowWhenTextSelected`)
+- Supports both character-based and KeyCode-based shortcuts (for non-latin keyboards)
+
+**Implementation:**
+
+- **Class definition**: `src/common/keyboard/shortcuts.ts`
+- **Real-world example**: `src/state/quick-bar-mixin.ts` - Global shortcuts (e, c, d, m, a, Shift+?) with non-latin keyboard fallbacks
+
+### Tooltip Component (ha-tooltip)
+
+The `ha-tooltip` component wraps Web Awesome tooltip with Home Assistant theming. Use for providing contextual help text on hover.
+
+**Implementation:**
+
+- **Component definition**: `src/components/ha-tooltip.ts`
+- **Usage example**: `src/components/ha-label.ts`
+- **Gallery documentation**: `gallery/src/pages/components/ha-tooltip.markdown`
+
 ## Common Patterns
 
 ### Creating a Panel
@@ -289,11 +406,19 @@ export class DialogMyFeature
   @state()
   private _params?: MyDialogParams;
 
+  @state()
+  private _open = false;
+
   public async showDialog(params: MyDialogParams): Promise<void> {
     this._params = params;
+    this._open = true;
   }
 
   public closeDialog(): void {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
     this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -304,23 +429,27 @@ export class DialogMyFeature
     }
 
     return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        .heading=${createCloseHeading(this.hass, this._params.title)}
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this._params.title}
+        header-subtitle=${this._params.subtitle}
+        @closed=${this._dialogClosed}
       >
-        <!-- Dialog content -->
-        <ha-button
-          appearance="plain"
-          @click=${this.closeDialog}
-          slot="secondaryAction"
-        >
-          ${this.hass.localize("ui.common.cancel")}
-        </ha-button>
-        <ha-button @click=${this._submit} slot="primaryAction">
-          ${this.hass.localize("ui.common.save")}
-        </ha-button>
-      </ha-dialog>
+        <p>Dialog content</p>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            slot="secondaryAction"
+            appearance="plain"
+            @click=${this.closeDialog}
+          >
+            ${this.hass.localize("ui.common.cancel")}
+          </ha-button>
+          <ha-button slot="primaryAction" @click=${this._submit}>
+            ${this.hass.localize("ui.common.save")}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 

.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

AGENTS.md

@@ -0,0 +1 @@
+.github/copilot-instructions.md

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/chart/ha-network-graph.ts

@@ -188,6 +188,7 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {
       layout: physicsEnabled ? "force" : "none",
       draggable: true,
       roam: true,
+      roamTrigger: "global",
       selectedMode: "single",
       label: {
         show: showLabels,

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/analytics.ts

@@ -5,7 +5,6 @@ export interface AnalyticsPreferences {
   diagnostics?: boolean;
   usage?: boolean;
   statistics?: boolean;
-  snapshots?: boolean;
 }
 
 export interface Analytics {

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/labs.ts

@@ -0,0 +1,78 @@
+import type { Connection } from "home-assistant-js-websocket";
+import { createCollection } from "home-assistant-js-websocket";
+import type { Store } from "home-assistant-js-websocket/dist/store";
+import { debounce } from "../common/util/debounce";
+import type { HomeAssistant } from "../types";
+
+export interface LabPreviewFeature {
+  preview_feature: string;
+  domain: string;
+  enabled: boolean;
+  is_built_in: boolean;
+  feedback_url?: string;
+  learn_more_url?: string;
+  report_issue_url?: string;
+}
+
+export interface LabPreviewFeaturesResponse {
+  features: LabPreviewFeature[];
+}
+
+export const fetchLabFeatures = async (
+  hass: HomeAssistant
+): Promise<LabPreviewFeature[]> => {
+  const response = await hass.callWS<LabPreviewFeaturesResponse>({
+    type: "labs/list",
+  });
+  return response.features;
+};
+
+export const labsUpdatePreviewFeature = (
+  hass: HomeAssistant,
+  domain: string,
+  preview_feature: string,
+  enabled: boolean,
+  create_backup?: boolean
+): Promise<void> =>
+  hass.callWS({
+    type: "labs/update",
+    domain,
+    preview_feature,
+    enabled,
+    ...(create_backup !== undefined && { create_backup }),
+  });
+
+const fetchLabFeaturesCollection = (conn: Connection) =>
+  conn
+    .sendMessagePromise<LabPreviewFeaturesResponse>({
+      type: "labs/list",
+    })
+    .then((response) => response.features);
+
+const subscribeLabUpdates = (
+  conn: Connection,
+  store: Store<LabPreviewFeature[]>
+) =>
+  conn.subscribeEvents(
+    debounce(
+      () =>
+        fetchLabFeaturesCollection(conn).then((features: LabPreviewFeature[]) =>
+          store.setState(features, true)
+        ),
+      500,
+      true
+    ),
+    "labs_updated"
+  );
+
+export const subscribeLabFeatures = (
+  conn: Connection,
+  onChange: (features: LabPreviewFeature[]) => void
+) =>
+  createCollection<LabPreviewFeature[]>(
+    "_labFeatures",
+    fetchLabFeaturesCollection,
+    subscribeLabUpdates,
+    conn,
+    onChange
+  );

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/data/translation.ts

@@ -72,6 +72,7 @@ export type TranslationCategory =
   | "system_health"
   | "application_credentials"
   | "issues"
+  | "preview_features"
   | "selector"
   | "services"
   | "triggers";

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/core/ha-config-analytics.ts

@@ -1,10 +1,14 @@
+import { mdiOpenInNew } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/ha-analytics";
+import "../../../components/ha-button";
 import "../../../components/ha-card";
+import "../../../components/ha-checkbox";
 import "../../../components/ha-settings-row";
+import "../../../components/ha-svg-icon";
 import type { Analytics } from "../../../data/analytics";
 import {
   getAnalyticsDetails,
@@ -13,8 +17,6 @@ import {
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
-import { isDevVersion } from "../../../common/config/version";
-import type { HaSwitch } from "../../../components/ha-switch";
 
 @customElement("ha-config-analytics")
 class ConfigAnalytics extends LitElement {
@@ -32,22 +34,10 @@ class ConfigAnalytics extends LitElement {
         : undefined;
 
     return html`
-      <ha-card
-        outlined
-        .header=${this.hass.localize("ui.panel.config.analytics.header") ||
-        "Home Assistant analytics"}
-      >
+      <ha-card outlined>
         <div class="card-content">
-          ${error ? html`<div class="error">${error}</div>` : nothing}
-          <p>
-            ${this.hass.localize("ui.panel.config.analytics.intro")}
-            <a
-              href=${documentationUrl(this.hass, "/integrations/analytics/")}
-              target="_blank"
-              rel="noreferrer"
-              >${this.hass.localize("ui.panel.config.analytics.learn_more")}</a
-            >.
-          </p>
+          ${error ? html`<div class="error">${error}</div>` : ""}
+          <p>${this.hass.localize("ui.panel.config.analytics.intro")}</p>
           <ha-analytics
             translation_key_panel="config"
             @analytics-preferences-changed=${this._preferencesChanged}
@@ -55,50 +45,26 @@ class ConfigAnalytics extends LitElement {
             .analytics=${this._analyticsDetails}
           ></ha-analytics>
         </div>
-      </ha-card>
-      ${isDevVersion(this.hass.config.version)
-        ? html`<ha-card
-            outlined
-            .header=${this.hass.localize(
-              "ui.panel.config.analytics.preferences.snapshots.header"
+        <div class="card-actions">
+          <ha-button @click=${this._save}>
+            ${this.hass.localize(
+              "ui.panel.config.core.section.core.core_config.save_button"
             )}
-          >
-            <div class="card-content">
-              <p>
-                ${this.hass.localize(
-                  "ui.panel.config.analytics.preferences.snapshots.info"
-                )}
-                <a
-                  href=${documentationUrl(this.hass, "/device-database/")}
-                  target="_blank"
-                  rel="noreferrer"
-                  >${this.hass.localize(
-                    "ui.panel.config.analytics.preferences.snapshots.learn_more"
-                  )}</a
-                >.
-              </p>
-              <ha-settings-row>
-                <span slot="heading" data-for="snapshots">
-                  ${this.hass.localize(
-                    `ui.panel.config.analytics.preferences.snapshots.title`
-                  )}
-                </span>
-                <span slot="description" data-for="snapshots">
-                  ${this.hass.localize(
-                    `ui.panel.config.analytics.preferences.snapshots.description`
-                  )}
-                </span>
-                <ha-switch
-                  @change=${this._handleDeviceRowClick}
-                  .checked=${!!this._analyticsDetails?.preferences.snapshots}
-                  .disabled=${this._analyticsDetails === undefined}
-                  name="snapshots"
-                >
-                </ha-switch>
-              </ha-settings-row>
-            </div>
-          </ha-card>`
-        : nothing}
+          </ha-button>
+        </div>
+      </ha-card>
+      <div class="footer">
+        <ha-button
+          size="small"
+          appearance="plain"
+          href=${documentationUrl(this.hass, "/integrations/analytics/")}
+          target="_blank"
+          rel="noreferrer"
+        >
+          <ha-svg-icon slot="end" .path=${mdiOpenInNew}></ha-svg-icon>
+          ${this.hass.localize("ui.panel.config.analytics.learn_more")}
+        </ha-button>
+      </div>
     `;
   }
 
@@ -130,25 +96,11 @@ class ConfigAnalytics extends LitElement {
     }
   }
 
-  private _handleDeviceRowClick(ev: Event) {
-    const target = ev.target as HaSwitch;
-
-    this._analyticsDetails = {
-      ...this._analyticsDetails!,
-      preferences: {
-        ...this._analyticsDetails!.preferences,
-        snapshots: target.checked,
-      },
-    };
-    this._save();
-  }
-
   private _preferencesChanged(event: CustomEvent): void {
     this._analyticsDetails = {
       ...this._analyticsDetails!,
       preferences: event.detail.preferences,
     };
-    this._save();
   }
 
   static get styles(): CSSResultGroup {
@@ -165,10 +117,21 @@ class ConfigAnalytics extends LitElement {
         p {
           margin-top: 0;
         }
-        ha-card:not(:first-of-type) {
-          margin-top: 24px;
+        .card-actions {
+          display: flex;
+          flex-direction: row-reverse;
+          justify-content: space-between;
+          align-items: center;
         }
-      `,
+        .footer {
+          padding: 32px 0 16px;
+          text-align: center;
+        }
+
+        ha-button[size="small"] ha-svg-icon {
+          --mdc-icon-size: 16px;
+        }
+      `, // row-reverse so we tab first to "save"
     ];
   }
 }

src/panels/config/core/ha-config-system-navigation.ts

@@ -23,6 +23,8 @@ import {
   fetchHassioHassOsInfo,
   fetchHassioHostInfo,
 } from "../../../data/hassio/host";
+import type { LabPreviewFeature } from "../../../data/labs";
+import { fetchLabFeatures } from "../../../data/labs";
 import { showRestartDialog } from "../../../dialogs/restart/show-dialog-restart";
 import "../../../layouts/hass-subpage";
 import { haStyle } from "../../../resources/styles";
@@ -50,6 +52,8 @@ class HaConfigSystemNavigation extends LitElement {
 
   @state() private _externalAccess = false;
 
+  @state() private _labFeatures?: LabPreviewFeature[];
+
   protected render(): TemplateResult {
     const pages = configSections.general
       .filter((page) => canShowPage(this.hass, page))
@@ -94,6 +98,12 @@ class HaConfigSystemNavigation extends LitElement {
               this._boardName ||
               this.hass.localize("ui.panel.config.hardware.description");
             break;
+          case "labs":
+            description =
+              this._labFeatures && this._labFeatures.some((f) => f.enabled)
+                ? this.hass.localize("ui.panel.config.labs.description_enabled")
+                : this.hass.localize("ui.panel.config.labs.description");
+            break;
 
           default:
             description = this.hass.localize(
@@ -156,6 +166,7 @@ class HaConfigSystemNavigation extends LitElement {
     const isHassioLoaded = isComponentLoaded(this.hass, "hassio");
     this._fetchBackupInfo();
     this._fetchHardwareInfo(isHassioLoaded);
+    this._fetchLabFeatures();
     if (isHassioLoaded) {
       this._fetchStorageInfo();
     }
@@ -211,6 +222,12 @@ class HaConfigSystemNavigation extends LitElement {
     this._externalAccess = this.hass.config.external_url !== null;
   }
 
+  private async _fetchLabFeatures() {
+    if (isComponentLoaded(this.hass, "labs")) {
+      this._labFeatures = await fetchLabFeatures(this.hass);
+    }
+  }
+
   private async _showRestartDialog() {
     showRestartDialog(this);
   }

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

@@ -7,6 +7,7 @@ import {
   mdiCog,
   mdiDatabase,
   mdiDevices,
+  mdiFlask,
   mdiInformation,
   mdiInformationOutline,
   mdiLabel,
@@ -328,6 +329,13 @@ export const configSections: Record<string, PageNavigation[]> = {
       iconPath: mdiShape,
       iconColor: "#f1c447",
     },
+    {
+      path: "/config/labs",
+      translationKey: "labs",
+      iconPath: mdiFlask,
+      iconColor: "#b1b134",
+      core: true,
+    },
     {
       path: "/config/network",
       translationKey: "network",
@@ -515,6 +523,10 @@ class HaPanelConfig extends SubscribeMixin(HassRouterPage) {
         tag: "ha-config-section-general",
         load: () => import("./core/ha-config-section-general"),
       },
+      labs: {
+        tag: "ha-config-labs",
+        load: () => import("./labs/ha-config-labs"),
+      },
       zha: {
         tag: "zha-config-dashboard-router",
         load: () =>

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/labs/dialog-labs-preview-feature-enable.ts

@@ -0,0 +1,223 @@
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { relativeTime } from "../../../common/datetime/relative_time";
+import { fireEvent } from "../../../common/dom/fire_event";
+import "../../../components/ha-button";
+import type { HaMdDialog } from "../../../components/ha-md-dialog";
+import "../../../components/ha-md-dialog";
+import "../../../components/ha-md-list";
+import "../../../components/ha-md-list-item";
+import type { HaSwitch } from "../../../components/ha-switch";
+import "../../../components/ha-switch";
+import type { BackupConfig } from "../../../data/backup";
+import { fetchBackupConfig } from "../../../data/backup";
+import type { HassDialog } from "../../../dialogs/make-dialog-manager";
+import type { HomeAssistant } from "../../../types";
+import type { LabsPreviewFeatureEnableDialogParams } from "./show-dialog-labs-preview-feature-enable";
+
+@customElement("dialog-labs-preview-feature-enable")
+export class DialogLabsPreviewFeatureEnable
+  extends LitElement
+  implements HassDialog<LabsPreviewFeatureEnableDialogParams>
+{
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _params?: LabsPreviewFeatureEnableDialogParams;
+
+  @state() private _backupConfig?: BackupConfig;
+
+  @state() private _createBackup = false;
+
+  @query("ha-md-dialog") private _dialog?: HaMdDialog;
+
+  public async showDialog(
+    params: LabsPreviewFeatureEnableDialogParams
+  ): Promise<void> {
+    this._params = params;
+    this._createBackup = false;
+    await this._fetchBackupConfig();
+  }
+
+  public closeDialog(): boolean {
+    this._dialog?.close();
+    return true;
+  }
+
+  private _dialogClosed(): void {
+    this._params = undefined;
+    this._backupConfig = undefined;
+    this._createBackup = false;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  private async _fetchBackupConfig() {
+    try {
+      const { config } = await fetchBackupConfig(this.hass);
+      this._backupConfig = config;
+
+      // Default to enabled if automatic backups are configured, disabled otherwise
+      this._createBackup =
+        config.automatic_backups_configured &&
+        !!config.create_backup.password &&
+        config.create_backup.agent_ids.length > 0;
+    } catch {
+      // User will get manual backup option if fetch fails
+      this._createBackup = false;
+    }
+  }
+
+  private _computeCreateBackupTexts():
+    | { title: string; description?: string }
+    | undefined {
+    if (
+      !this._backupConfig ||
+      !this._backupConfig.automatic_backups_configured ||
+      !this._backupConfig.create_backup.password ||
+      this._backupConfig.create_backup.agent_ids.length === 0
+    ) {
+      return {
+        title: this.hass.localize("ui.panel.config.labs.create_backup.manual"),
+        description: this.hass.localize(
+          "ui.panel.config.labs.create_backup.manual_description"
+        ),
+      };
+    }
+
+    const lastAutomaticBackupDate = this._backupConfig
+      .last_completed_automatic_backup
+      ? new Date(this._backupConfig.last_completed_automatic_backup)
+      : null;
+    const now = new Date();
+
+    return {
+      title: this.hass.localize("ui.panel.config.labs.create_backup.automatic"),
+      description: lastAutomaticBackupDate
+        ? this.hass.localize(
+            "ui.panel.config.labs.create_backup.automatic_description_last",
+            {
+              relative_time: relativeTime(
+                lastAutomaticBackupDate,
+                this.hass.locale,
+                now,
+                true
+              ),
+            }
+          )
+        : this.hass.localize(
+            "ui.panel.config.labs.create_backup.automatic_description_none"
+          ),
+    };
+  }
+
+  private _createBackupChanged(ev: Event): void {
+    this._createBackup = (ev.target as HaSwitch).checked;
+  }
+
+  private _handleCancel(): void {
+    this.closeDialog();
+  }
+
+  private _handleConfirm(): void {
+    if (this._params) {
+      this._params.onConfirm(this._createBackup);
+    }
+    this.closeDialog();
+  }
+
+  protected render() {
+    if (!this._params) {
+      return nothing;
+    }
+
+    const createBackupTexts = this._computeCreateBackupTexts();
+
+    return html`
+      <ha-md-dialog open @closed=${this._dialogClosed}>
+        <span slot="headline">
+          ${this.hass.localize("ui.panel.config.labs.enable_title")}
+        </span>
+        <div slot="content">
+          <p>
+            ${this.hass.localize(
+              `component.${this._params.preview_feature.domain}.preview_features.${this._params.preview_feature.preview_feature}.enable_confirmation`
+            ) || this.hass.localize("ui.panel.config.labs.enable_confirmation")}
+          </p>
+        </div>
+        <div slot="actions">
+          ${createBackupTexts
+            ? html`
+                <ha-md-list>
+                  <ha-md-list-item>
+                    <span slot="headline">${createBackupTexts.title}</span>
+                    ${createBackupTexts.description
+                      ? html`
+                          <span slot="supporting-text">
+                            ${createBackupTexts.description}
+                          </span>
+                        `
+                      : nothing}
+                    <ha-switch
+                      slot="end"
+                      .checked=${this._createBackup}
+                      @change=${this._createBackupChanged}
+                    ></ha-switch>
+                  </ha-md-list-item>
+                </ha-md-list>
+              `
+            : nothing}
+          <div>
+            <ha-button appearance="plain" @click=${this._handleCancel}>
+              ${this.hass.localize("ui.common.cancel")}
+            </ha-button>
+            <ha-button
+              appearance="filled"
+              variant="brand"
+              @click=${this._handleConfirm}
+            >
+              ${this.hass.localize("ui.panel.config.labs.enable")}
+            </ha-button>
+          </div>
+        </div>
+      </ha-md-dialog>
+    `;
+  }
+
+  static readonly styles = css`
+    ha-md-dialog {
+      --dialog-content-padding: var(--ha-space-6);
+    }
+
+    p {
+      margin: 0;
+      color: var(--secondary-text-color);
+    }
+
+    div[slot="actions"] {
+      display: flex;
+      flex-direction: column;
+      padding: 0;
+    }
+
+    ha-md-list {
+      background: none;
+      --md-list-item-leading-space: var(--ha-space-6);
+      --md-list-item-trailing-space: var(--ha-space-6);
+      margin: 0;
+      padding: 0;
+      border-top: 1px solid var(--divider-color);
+    }
+
+    div[slot="actions"] > div {
+      display: flex;
+      justify-content: flex-end;
+      gap: var(--ha-space-2);
+      padding: var(--ha-space-4) var(--ha-space-6);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-labs-preview-feature-enable": DialogLabsPreviewFeatureEnable;
+  }
+}

src/panels/config/labs/dialog-labs-progress.ts

@@ -0,0 +1,113 @@
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../../common/dom/fire_event";
+import "../../../components/ha-md-dialog";
+import "../../../components/ha-spinner";
+import type { HassDialog } from "../../../dialogs/make-dialog-manager";
+import type { HomeAssistant } from "../../../types";
+import type { LabsProgressDialogParams } from "./show-dialog-labs-progress";
+
+@customElement("dialog-labs-progress")
+export class DialogLabsProgress
+  extends LitElement
+  implements HassDialog<LabsProgressDialogParams>
+{
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _params?: LabsProgressDialogParams;
+
+  @state() private _open = false;
+
+  public async showDialog(params: LabsProgressDialogParams): Promise<void> {
+    this._params = params;
+    this._open = true;
+  }
+
+  public closeDialog(): boolean {
+    this._open = false;
+    return true;
+  }
+
+  private _handleClosed(): void {
+    this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render() {
+    if (!this._params) {
+      return nothing;
+    }
+
+    return html`
+      <ha-md-dialog
+        .open=${this._open}
+        hideActions
+        scrimClickAction=""
+        escapeKeyAction=""
+        @closed=${this._handleClosed}
+      >
+        <div slot="content">
+          <div class="summary">
+            <ha-spinner></ha-spinner>
+            <div class="content">
+              <p class="heading">
+                ${this.hass.localize(
+                  "ui.panel.config.labs.progress.creating_backup"
+                )}
+              </p>
+              <p class="description">
+                ${this.hass.localize(
+                  this._params.enabled
+                    ? "ui.panel.config.labs.progress.backing_up_before_enabling"
+                    : "ui.panel.config.labs.progress.backing_up_before_disabling"
+                )}
+              </p>
+            </div>
+          </div>
+        </div>
+      </ha-md-dialog>
+    `;
+  }
+
+  static readonly styles = css`
+    ha-md-dialog {
+      --dialog-content-padding: var(--ha-space-6);
+    }
+
+    .summary {
+      display: flex;
+      flex-direction: row;
+      column-gap: var(--ha-space-4);
+      align-items: center;
+      justify-content: center;
+      padding: var(--ha-space-4) 0;
+    }
+    ha-spinner {
+      --ha-spinner-size: 60px;
+      flex-shrink: 0;
+    }
+    .content {
+      flex: 1;
+      min-width: 0;
+    }
+    .heading {
+      font-size: var(--ha-font-size-xl);
+      line-height: var(--ha-line-height-condensed);
+      color: var(--primary-text-color);
+      margin: 0 0 var(--ha-space-1);
+    }
+    .description {
+      font-size: var(--ha-font-size-m);
+      line-height: var(--ha-line-height-condensed);
+      letter-spacing: 0.25px;
+      color: var(--secondary-text-color);
+      margin: 0;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-labs-progress": DialogLabsProgress;
+  }
+}

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

@@ -0,0 +1,549 @@
+import { mdiFlask, mdiHelpCircle, mdiOpenInNew } from "@mdi/js";
+import type { PropertyValues, TemplateResult } from "lit";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import type { LocalizeFunc } from "../../../common/translations/localize";
+import { extractSearchParam } from "../../../common/url/search-params";
+import { domainToName } from "../../../data/integration";
+import {
+  labsUpdatePreviewFeature,
+  subscribeLabFeatures,
+} from "../../../data/labs";
+import type { LabPreviewFeature } from "../../../data/labs";
+import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
+import type { HomeAssistant } from "../../../types";
+import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
+import { brandsUrl } from "../../../util/brands-url";
+import { showToast } from "../../../util/toast";
+import { haStyle } from "../../../resources/styles";
+import { showLabsPreviewFeatureEnableDialog } from "./show-dialog-labs-preview-feature-enable";
+import {
+  showLabsProgressDialog,
+  closeLabsProgressDialog,
+} from "./show-dialog-labs-progress";
+import "../../../components/ha-alert";
+import "../../../components/ha-button";
+import "../../../components/ha-card";
+import "../../../components/ha-icon-button";
+import "../../../components/ha-markdown";
+import "../../../components/ha-switch";
+import "../../../layouts/hass-subpage";
+
+@customElement("ha-config-labs")
+class HaConfigLabs extends SubscribeMixin(LitElement) {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean }) public narrow = false;
+
+  @state() private _preview_features: LabPreviewFeature[] = [];
+
+  @state() private _highlightedPreviewFeature?: string;
+
+  private _sortedPreviewFeatures = memoizeOne(
+    (localize: LocalizeFunc, features: LabPreviewFeature[]) =>
+      // Sort by localized integration name alphabetically
+      [...features].sort((a, b) =>
+        domainToName(localize, a.domain).localeCompare(
+          domainToName(localize, b.domain)
+        )
+      )
+  );
+
+  public hassSubscribe() {
+    return [
+      subscribeLabFeatures(this.hass.connection, (features) => {
+        // Load title translations for integrations with preview features
+        const domains = [...new Set(features.map((f) => f.domain))];
+        this.hass.loadBackendTranslation("title", domains);
+
+        this._preview_features = features;
+      }),
+    ];
+  }
+
+  protected firstUpdated(changedProps: PropertyValues): void {
+    super.firstUpdated(changedProps);
+    // Load preview_features translations
+    this.hass.loadBackendTranslation("preview_features");
+    this._handleUrlParams();
+  }
+
+  private _handleUrlParams(): void {
+    // Check for feature parameters in URL
+    const domain = extractSearchParam("domain");
+    const previewFeature = extractSearchParam("preview_feature");
+    if (domain && previewFeature) {
+      const previewFeatureId = `${domain}.${previewFeature}`;
+      this._highlightedPreviewFeature = previewFeatureId;
+      // Wait for next render to ensure cards are in DOM
+      this.updateComplete.then(() => {
+        this._scrollToPreviewFeature(previewFeatureId);
+      });
+    }
+  }
+
+  protected render() {
+    const sortedFeatures = this._sortedPreviewFeatures(
+      this.hass.localize,
+      this._preview_features
+    );
+
+    return html`
+      <hass-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        back-path="/config"
+        .header=${this.hass.localize("ui.panel.config.labs.caption")}
+      >
+        ${sortedFeatures.length
+          ? html`
+              <a
+                slot="toolbar-icon"
+                href="https://www.home-assistant.io/integrations/labs/"
+                target="_blank"
+                rel="noopener noreferrer"
+                .title=${this.hass.localize("ui.common.help")}
+              >
+                <ha-icon-button
+                  .label=${this.hass.localize("ui.common.help")}
+                  .path=${mdiHelpCircle}
+                ></ha-icon-button>
+              </a>
+            `
+          : nothing}
+        <div class="content">
+          ${!sortedFeatures.length
+            ? html`
+                <div class="empty">
+                  <ha-svg-icon .path=${mdiFlask}></ha-svg-icon>
+                  <h1>
+                    ${this.hass.localize("ui.panel.config.labs.empty.title")}
+                  </h1>
+                  ${this.hass.localize(
+                    "ui.panel.config.labs.empty.description"
+                  )}
+                  <a
+                    href="https://www.home-assistant.io/integrations/labs/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    ${this.hass.localize("ui.panel.config.labs.learn_more")}
+                    <ha-svg-icon .path=${mdiOpenInNew}></ha-svg-icon>
+                  </a>
+                </div>
+              `
+            : html`
+                <ha-card outlined>
+                  <div class="card-content intro-card">
+                    <h1>
+                      ${this.hass.localize("ui.panel.config.labs.intro_title")}
+                    </h1>
+                    <p class="intro-text">
+                      ${this.hass.localize(
+                        "ui.panel.config.labs.intro_description"
+                      )}
+                    </p>
+                    <ha-alert alert-type="warning">
+                      ${this.hass.localize(
+                        "ui.panel.config.labs.intro_warning"
+                      )}
+                    </ha-alert>
+                  </div>
+                </ha-card>
+
+                ${sortedFeatures.map((preview_feature) =>
+                  this._renderPreviewFeature(preview_feature)
+                )}
+              `}
+        </div>
+      </hass-subpage>
+    `;
+  }
+
+  private _renderPreviewFeature(
+    preview_feature: LabPreviewFeature
+  ): TemplateResult {
+    const featureName = this.hass.localize(
+      `component.${preview_feature.domain}.preview_features.${preview_feature.preview_feature}.name`
+    );
+
+    const description = this.hass.localize(
+      `component.${preview_feature.domain}.preview_features.${preview_feature.preview_feature}.description`
+    );
+
+    const integrationName = domainToName(
+      this.hass.localize,
+      preview_feature.domain
+    );
+
+    const integrationNameWithCustomLabel = !preview_feature.is_built_in
+      ? `${integrationName} • ${this.hass.localize("ui.panel.config.labs.custom_integration")}`
+      : integrationName;
+
+    const previewFeatureId = `${preview_feature.domain}.${preview_feature.preview_feature}`;
+    const isHighlighted = this._highlightedPreviewFeature === previewFeatureId;
+
+    // Build description with learn more link if available
+    const descriptionWithLink = preview_feature.learn_more_url
+      ? `${description}\n\n[${this.hass.localize("ui.panel.config.labs.learn_more")}](${preview_feature.learn_more_url})`
+      : description;
+
+    return html`
+      <ha-card
+        outlined
+        data-feature-id=${previewFeatureId}
+        class=${isHighlighted ? "highlighted" : ""}
+      >
+        <div class="card-content">
+          <div class="card-header">
+            <img
+              alt=""
+              src=${brandsUrl({
+                domain: preview_feature.domain,
+                type: "icon",
+                useFallback: true,
+                darkOptimized: this.hass.themes?.darkMode,
+              })}
+              crossorigin="anonymous"
+              referrerpolicy="no-referrer"
+            />
+            <div class="feature-title">
+              <span class="integration-name"
+                >${integrationNameWithCustomLabel}</span
+              >
+              <h2>${featureName}</h2>
+            </div>
+          </div>
+          <ha-markdown .content=${descriptionWithLink} breaks></ha-markdown>
+        </div>
+        <div class="card-actions">
+          <div>
+            ${preview_feature.feedback_url
+              ? html`
+                  <ha-button
+                    appearance="plain"
+                    href=${preview_feature.feedback_url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    ${this.hass.localize(
+                      "ui.panel.config.labs.provide_feedback"
+                    )}
+                  </ha-button>
+                `
+              : nothing}
+            ${preview_feature.report_issue_url
+              ? html`
+                  <ha-button
+                    appearance="plain"
+                    href=${preview_feature.report_issue_url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    ${this.hass.localize("ui.panel.config.labs.report_issue")}
+                  </ha-button>
+                `
+              : nothing}
+          </div>
+          <ha-button
+            appearance="filled"
+            .variant=${preview_feature.enabled ? "danger" : "brand"}
+            @click=${this._handleToggle}
+            .preview_feature=${preview_feature}
+          >
+            ${this.hass.localize(
+              preview_feature.enabled
+                ? "ui.panel.config.labs.disable"
+                : "ui.panel.config.labs.enable"
+            )}
+          </ha-button>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private _scrollToPreviewFeature(previewFeatureId: string): void {
+    const card = this.shadowRoot?.querySelector(
+      `[data-feature-id="${previewFeatureId}"]`
+    ) as HTMLElement;
+    if (card) {
+      card.scrollIntoView({ behavior: "smooth", block: "center" });
+      // Clear highlight after animation
+      setTimeout(() => {
+        this._highlightedPreviewFeature = undefined;
+      }, 3000);
+    }
+  }
+
+  private async _handleToggle(ev: Event): Promise<void> {
+    const buttonEl = ev.currentTarget as HTMLElement & {
+      preview_feature: LabPreviewFeature;
+    };
+    const preview_feature = buttonEl.preview_feature;
+    const enabled = !preview_feature.enabled;
+    const previewFeatureId = `${preview_feature.domain}.${preview_feature.preview_feature}`;
+
+    if (enabled) {
+      // Show custom enable dialog with backup option
+      showLabsPreviewFeatureEnableDialog(this, {
+        preview_feature,
+        previewFeatureId,
+        onConfirm: async (shouldCreateBackup) => {
+          await this._performToggle(
+            previewFeatureId,
+            enabled,
+            shouldCreateBackup
+          );
+        },
+      });
+      return;
+    }
+
+    // Show simple confirmation dialog for disable
+    const confirmed = await showConfirmationDialog(this, {
+      title: this.hass.localize("ui.panel.config.labs.disable_title"),
+      text:
+        this.hass.localize(
+          `component.${preview_feature.domain}.preview_features.${preview_feature.preview_feature}.disable_confirmation`
+        ) || this.hass.localize("ui.panel.config.labs.disable_confirmation"),
+      confirmText: this.hass.localize("ui.panel.config.labs.disable"),
+      dismissText: this.hass.localize("ui.common.cancel"),
+      destructive: true,
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    await this._performToggle(previewFeatureId, enabled, false);
+  }
+
+  private async _performToggle(
+    previewFeatureId: string,
+    enabled: boolean,
+    createBackup: boolean
+  ): Promise<void> {
+    if (createBackup) {
+      showLabsProgressDialog(this, { enabled });
+    }
+
+    const parts = previewFeatureId.split(".", 2);
+    if (parts.length !== 2) {
+      showToast(this, {
+        message: this.hass.localize("ui.common.unknown_error"),
+      });
+      return;
+    }
+    const [domain, preview_feature] = parts;
+
+    try {
+      await labsUpdatePreviewFeature(
+        this.hass,
+        domain,
+        preview_feature,
+        enabled,
+        createBackup
+      );
+    } catch (err: any) {
+      if (createBackup) {
+        closeLabsProgressDialog();
+      }
+      const errorMessage =
+        err?.message || this.hass.localize("ui.common.unknown_error");
+      showToast(this, {
+        message: this.hass.localize(
+          enabled
+            ? "ui.panel.config.labs.enable_failed"
+            : "ui.panel.config.labs.disable_failed",
+          { error: errorMessage }
+        ),
+      });
+      return;
+    }
+
+    // Close dialog before showing success toast
+    if (createBackup) {
+      closeLabsProgressDialog();
+    }
+
+    // Show success toast - collection will auto-update via labs_updated event
+    showToast(this, {
+      message: this.hass.localize(
+        enabled
+          ? "ui.panel.config.labs.enabled_success"
+          : "ui.panel.config.labs.disabled_success"
+      ),
+    });
+  }
+
+  static styles = [
+    haStyle,
+    css`
+      :host {
+        display: block;
+      }
+
+      .content {
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 16px;
+        min-height: calc(100vh - 64px);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .content:has(.empty) {
+        justify-content: center;
+      }
+
+      ha-card {
+        margin-bottom: 16px;
+        position: relative;
+        transition: box-shadow 0.3s ease;
+      }
+
+      ha-card.highlighted {
+        animation: highlight-fade 2.5s ease-out forwards;
+      }
+
+      @keyframes highlight-fade {
+        0% {
+          box-shadow:
+            0 0 0 2px var(--primary-color),
+            0 0 12px rgba(var(--rgb-primary-color), 0.4);
+        }
+        100% {
+          box-shadow:
+            0 0 0 2px transparent,
+            0 0 0 transparent;
+        }
+      }
+
+      /* Intro card */
+      .intro-card {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+
+      .intro-card h1 {
+        margin: 0;
+      }
+
+      .intro-text {
+        margin: 0 0 12px;
+      }
+
+      /* Feature cards */
+      .card-content {
+        padding: 16px;
+      }
+
+      .card-header {
+        display: flex;
+        gap: 12px;
+        margin-bottom: 16px;
+        align-items: flex-start;
+      }
+
+      .card-header img {
+        width: 38px;
+        height: 38px;
+        flex-shrink: 0;
+        margin-top: 2px;
+      }
+
+      .feature-title {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .feature-title h2 {
+        margin: 0;
+        line-height: 1.3;
+      }
+
+      .integration-name {
+        display: block;
+        margin-bottom: 2px;
+        font-size: 14px;
+        color: var(--secondary-text-color);
+      }
+
+      /* Empty state */
+      .empty {
+        max-width: 500px;
+        margin: 0 auto;
+        padding: 48px 16px;
+        text-align: center;
+      }
+
+      .empty ha-svg-icon {
+        width: 120px;
+        height: 120px;
+        color: var(--secondary-text-color);
+        opacity: 0.3;
+      }
+
+      .empty h1 {
+        margin: 24px 0 16px;
+      }
+
+      .empty p {
+        margin: 0 0 24px;
+        font-size: 16px;
+        line-height: 24px;
+        color: var(--secondary-text-color);
+      }
+
+      .empty a {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        color: var(--primary-color);
+        text-decoration: none;
+        font-weight: 500;
+      }
+
+      .empty a:hover {
+        text-decoration: underline;
+      }
+
+      .empty a:focus-visible {
+        outline: 2px solid var(--primary-color);
+        outline-offset: 2px;
+        border-radius: 4px;
+      }
+
+      .empty a ha-svg-icon {
+        width: 16px;
+        height: 16px;
+        opacity: 1;
+      }
+
+      /* Card actions */
+      .card-actions {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 8px;
+        padding: 8px;
+        border-top: 1px solid var(--divider-color);
+      }
+
+      .card-actions > div {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-config-labs": HaConfigLabs;
+  }
+}

src/panels/config/labs/show-dialog-labs-preview-feature-enable.ts

@@ -0,0 +1,22 @@
+import { fireEvent } from "../../../common/dom/fire_event";
+import type { LabPreviewFeature } from "../../../data/labs";
+
+export interface LabsPreviewFeatureEnableDialogParams {
+  preview_feature: LabPreviewFeature;
+  previewFeatureId: string;
+  onConfirm: (createBackup: boolean) => void;
+}
+
+export const loadLabsPreviewFeatureEnableDialog = () =>
+  import("./dialog-labs-preview-feature-enable");
+
+export const showLabsPreviewFeatureEnableDialog = (
+  element: HTMLElement,
+  params: LabsPreviewFeatureEnableDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-labs-preview-feature-enable",
+    dialogImport: loadLabsPreviewFeatureEnableDialog,
+    dialogParams: params,
+  });
+};

src/panels/config/labs/show-dialog-labs-progress.ts

@@ -0,0 +1,22 @@
+import { fireEvent } from "../../../common/dom/fire_event";
+import { closeDialog } from "../../../dialogs/make-dialog-manager";
+
+export interface LabsProgressDialogParams {
+  enabled: boolean;
+}
+
+export const loadLabsProgressDialog = () => import("./dialog-labs-progress");
+
+export const showLabsProgressDialog = (
+  element: HTMLElement,
+  dialogParams: LabsProgressDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-labs-progress",
+    dialogImport: loadLabsProgressDialog,
+    dialogParams,
+  });
+};
+
+export const closeLabsProgressDialog = () =>
+  closeDialog("dialog-labs-progress");

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,12 +43,17 @@ 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"
+    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
     );
 
     view.cards!.push({
@@ -76,6 +61,24 @@ export class EnergyViewStrategy extends ReactiveElement {
       collection_key: "energy_dashboard",
     });
 
+    if (hasPowerSources) {
+      if (hasPowerDevices) {
+        view.cards!.push({
+          title: hass.localize("ui.panel.energy.cards.power_sankey_title"),
+          type: "power-sankey",
+          collection_key: collectionKey,
+          grid_options: {
+            columns: 24,
+          },
+        });
+      }
+      view.cards!.push({
+        title: hass.localize("ui.panel.energy.cards.power_sources_graph_title"),
+        type: "power-sources-graph",
+        collection_key: collectionKey,
+      });
+    }
+
     // Only include if we have a grid or battery.
     if (hasGrid || hasBattery) {
       view.cards!.push({
@@ -94,24 +97,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 +107,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 +156,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 +166,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 +188,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/my/ha-panel-my.ts

@@ -188,6 +188,13 @@ export const getMyRedirects = (): Redirects => ({
   helpers: {
     redirect: "/config/helpers",
   },
+  labs: {
+    redirect: "/config/labs",
+    params: {
+      domain: "string?",
+      preview_feature: "string?",
+    },
+  },
   tags: {
     component: "tag",
     redirect: "/config/tags",

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": {
@@ -6760,7 +6768,6 @@
         },
         "analytics": {
           "caption": "Analytics",
-          "header": "Home Assistant analytics",
           "description": "Learn how to share data to improve Home Assistant",
           "preferences": {
             "base": {
@@ -6778,20 +6785,52 @@
             "diagnostics": {
               "title": "Diagnostics",
               "description": "Share crash reports when unexpected errors occur."
-            },
-            "snapshots": {
-              "title": "Devices",
-              "description": "Generic information about your devices.",
-              "header": "Device analytics",
-              "info": "Anonymously share data about your devices to help build the Open Home Foundation’s device database. This free, open source resource helps users find useful information about smart home devices. Only device-specific details (like model or manufacturer) are shared — never personally identifying information (like the names you assign).",
-              "learn_more": "Learn more about the device database and how we process your data"
             }
           },
           "need_base_enabled": "You need to enable basic analytics for this option to be available",
-          "learn_more": "Learn how we process your data",
+          "learn_more": "How we process your data",
           "intro": "Share anonymized information from your installation to help make Home Assistant better and help us convince manufacturers to add local control and privacy-focused features.",
           "download_device_info": "Preview device analytics"
         },
+        "labs": {
+          "caption": "Labs",
+          "custom_integration": "Custom integration",
+          "description": "Preview new features",
+          "description_enabled": "Preview features are enabled",
+          "intro_title": "Home Assistant Labs",
+          "intro_subtitle": "Preview upcoming features",
+          "intro_description": "Home Assistant Labs lets you preview new features we're actively working on. These features are stable and fully functional, but may not yet include the complete feature set we envision. We're still refining the design and approach based on your feedback.",
+          "intro_warning": "Preview features may change or be replaced with different solutions in future releases.",
+          "empty": {
+            "title": "No preview features available",
+            "description": "There are currently no preview features available to try. Check back in future releases for new features!"
+          },
+          "learn_more": "Learn more",
+          "provide_feedback": "Provide feedback",
+          "report_issue": "Report issue",
+          "enable": "Enable",
+          "disable": "Disable",
+          "enable_title": "Enable preview feature?",
+          "enable_confirmation": "This preview feature is stable but may evolve based on feedback. Enabling it may affect your setup, and changes may persist after disabling.",
+          "disable_title": "Disable preview feature?",
+          "disable_confirmation": "This will disable the preview feature, but changes made while it was active may still affect your setup.",
+          "enabled_success": "Preview feature enabled",
+          "disabled_success": "Preview feature disabled",
+          "enable_failed": "Enabling preview feature failed: {error}",
+          "disable_failed": "Disabling preview feature failed: {error}",
+          "progress": {
+            "creating_backup": "Creating backup",
+            "backing_up_before_enabling": "Home Assistant is being backed up before enabling the Home Assistant Labs preview feature",
+            "backing_up_before_disabling": "Home Assistant is being backed up before disabling the Home Assistant Labs preview feature"
+          },
+          "create_backup": {
+            "automatic": "Automatic backup before enabling",
+            "automatic_description_last": "Last automatic backup {relative_time}.",
+            "automatic_description_none": "No automatic backup yet.",
+            "manual": "Create manual backup before enabling",
+            "manual_description": "Includes Home Assistant settings and history."
+          }
+        },
         "network": {
           "caption": "Network",
           "description": "External access {state}",
@@ -7174,7 +7213,7 @@
               "grid": "Grid",
               "solar": "Solar",
               "battery": "Battery",
-              "usage": "Used"
+              "usage": "Consumption"
             },
             "energy_compare": {
               "info": "You are comparing the period {start} with the period {end}",
@@ -8432,10 +8471,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"
               }
             }
           },
@@ -8671,9 +8713,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",
@@ -9434,6 +9478,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": {
@@ -9458,7 +9507,10 @@
           "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",
+          "power_sources_graph_title": "Power sources"
         }
       },
       "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