Bumped version to 20260729.1

Show integration logo and name in the replace device dialog (#53384 )
Strip empty strings from http config (#53377 )
2026-07-31 11:26:12 +00:00 · 2026-07-30 10:41:32 +02:00 · 2026-07-30 10:41:12 +02:00 · 2026-07-30 10:41:11 +02:00 · 2026-07-30 10:41:11 +02:00 · 2026-07-30 10:41:10 +02:00
12 changed files with 591 additions and 244 deletions
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"

 [project]
 name         = "home-assistant-frontend"
-version      = "20260729.0"
+version      = "20260729.1"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"
@@ -6,8 +6,11 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { computeAreaName } from "../../common/entity/compute_area_name";
 import { computeDeviceName } from "../../common/entity/compute_device_name";
 import { getDeviceArea } from "../../common/entity/context/get_device_context";
+import { getConfigEntries, type ConfigEntry } from "../../data/config_entries";
+import { domainToName } from "../../data/integration";
 import type { HomeAssistant } from "../../types";
 import type { HassDialog } from "../../dialogs/make-dialog-manager";
+import { brandsUrl } from "../../util/brands-url";
 import "../ha-dialog";
 import "../ha-svg-icon";
 import "../item/ha-list-item-button";
@@ -23,11 +26,21 @@ export class DialogDeviceReplaced

  @state() private _open = false;

+  @state() private _configEntryLookup?: Record<string, ConfigEntry>;
+
  @property({ attribute: false }) public hass!: HomeAssistant;

  public async showDialog(params: DeviceReplacedDialogParams): Promise<void> {
    this._params = params;
    this._open = true;
+    this._loadConfigEntries();
+  }
+
+  private async _loadConfigEntries(): Promise<void> {
+    const configEntries = await getConfigEntries(this.hass);
+    this._configEntryLookup = Object.fromEntries(
+      configEntries.map((entry) => [entry.entry_id, entry])
+    );
  }

  public closeDialog(): boolean {
@@ -55,15 +68,23 @@ export class DialogDeviceReplaced
      candidates: string[],
      primaryId: string | null,
      devices: HomeAssistant["devices"],
-      areas: HomeAssistant["areas"]
+      areas: HomeAssistant["areas"],
+      configEntryLookup: Record<string, ConfigEntry> | undefined
    ) =>
      candidates.map((deviceId) => {
        const device = devices[deviceId];
        const area = device ? getDeviceArea(device, areas) : undefined;
+        const configEntry = device?.primary_config_entry
+          ? configEntryLookup?.[device.primary_config_entry]
+          : undefined;
        return {
          deviceId,
          name: device ? computeDeviceName(device) : deviceId,
-          secondary: area ? computeAreaName(area) : undefined,
+          area: area ? computeAreaName(area) : undefined,
+          domain: configEntry?.domain,
+          domainName: configEntry
+            ? domainToName(this.hass.localize, configEntry.domain)
+            : undefined,
          isPrimary: deviceId === primaryId,
        };
      })
@@ -92,31 +113,54 @@ export class DialogDeviceReplaced
            this._params.candidates,
            this._params.primaryId,
            this.hass.devices,
-            this.hass.areas
-          ).map(
-            (item) => html`
+            this.hass.areas,
+            this._configEntryLookup
+          ).map((item) => {
+            const supportingText = [
+              item.area,
+              item.domainName,
+              item.isPrimary
+                ? this.hass.localize(
+                    "ui.components.device-picker.replaced_dialog.recommended"
+                  )
+                : undefined,
+            ]
+              .filter(Boolean)
+              .join(" • ");
+            return html`
              <ha-list-item-button .deviceId=${item.deviceId}>
-                <ha-svg-icon slot="start" .path=${mdiDevices}></ha-svg-icon>
+                ${
+                  item.domain
+                    ? html`<img
+                        slot="start"
+                        alt=""
+                        crossorigin="anonymous"
+                        referrerpolicy="no-referrer"
+                        src=${brandsUrl(
+                          {
+                            domain: item.domain,
+                            type: "icon",
+                            darkOptimized: this.hass.themes?.darkMode,
+                          },
+                          this.hass.auth.data.hassUrl
+                        )}
+                      />`
+                    : html`<ha-svg-icon
+                        slot="start"
+                        .path=${mdiDevices}
+                      ></ha-svg-icon>`
+                }
                <span slot="headline">${item.name}</span>
                ${
-                  item.secondary || item.isPrimary
-                    ? html`<span slot="supporting-text">
-                        ${[
-                          item.secondary,
-                          item.isPrimary
-                            ? this.hass.localize(
-                                "ui.components.device-picker.replaced_dialog.recommended"
-                              )
-                            : undefined,
-                        ]
-                          .filter(Boolean)
-                          .join(" • ")}
-                      </span>`
+                  supportingText
+                    ? html`<span slot="supporting-text"
+                        >${supportingText}</span
+                      >`
                    : nothing
                }
              </ha-list-item-button>
-            `
-          )}
+            `;
+          })}
        </ha-list-base>
      </ha-dialog>
    `;
@@ -132,6 +176,10 @@ export class DialogDeviceReplaced
      padding: 0 var(--ha-space-6) var(--ha-space-4);
      color: var(--secondary-text-color);
    }
+    img[slot="start"] {
+      width: 24px;
+      height: 24px;
+    }
  `;
 }

@@ -57,7 +57,10 @@ import "./ha-code-editor-completion-items";
 import type { CompletionItem } from "./ha-code-editor-completion-items";
 import "./ha-icon";
 import "./ha-icon-button-toolbar";
-import type { HaIconButtonToolbar } from "./ha-icon-button-toolbar";
+import type {
+  HaIconButtonToolbar,
+  HaIconButtonToolbarItem,
+} from "./ha-icon-button-toolbar";

 declare global {
  interface HASSDomEvents {
@@ -115,6 +118,9 @@ export class HaCodeEditor extends ReactiveElement {
  @property({ type: Boolean, attribute: "has-test" })
  public hasTest = false;

+  @property({ attribute: false })
+  public toolbarItems?: (HaIconButtonToolbarItem | string)[];
+
  @property({ attribute: false }) public testing = false;

  @property({ type: String }) public placeholder?: string;
@@ -351,7 +357,8 @@ export class HaCodeEditor extends ReactiveElement {
      changedProps.has("_canCopy") ||
      changedProps.has("_canUndo") ||
      changedProps.has("_canRedo") ||
-      changedProps.has("testing")
+      changedProps.has("testing") ||
+      changedProps.has("toolbarItems")
    ) {
      this._updateToolbarButtons();
    }
@@ -529,6 +536,7 @@ export class HaCodeEditor extends ReactiveElement {
    }

    this._editorToolbar.items = [
+      ...(this.toolbarItems ?? []),
      ...(this.hasTest && !this._isFullscreen
        ? [
            {
@@ -0,0 +1,68 @@
+import SplitPanel from "@home-assistant/webawesome/dist/components/split-panel/split-panel";
+import type { CSSResultGroup } from "lit";
+import { css } from "lit";
+import { customElement } from "lit/decorators";
+
+@customElement("ha-split-panel")
+export class HaSplitPanel extends SplitPanel {
+  static get styles(): CSSResultGroup {
+    return [
+      SplitPanel.styles,
+      css`
+        :host {
+          --divider-width: var(--ha-split-panel-divider-width, 2px);
+          --divider-hit-area: var(--ha-split-panel-divider-hit-area, 12px);
+          --min: var(--ha-split-panel-min, 0);
+          --max: var(--ha-split-panel-max, 100%);
+        }
+
+        .divider {
+          background-color: var(--divider-color);
+          transition: background-color var(--ha-animation-duration-fast)
+            ease-out;
+        }
+
+        /* Grip affordance so the divider reads as draggable. The divider
+           already centers its children via flexbox, so keep this in flow.
+           Consumers slotting their own divider handle can hide it with
+           --ha-split-panel-grip-display: none. */
+        .divider::before {
+          content: "";
+          width: 2px;
+          height: var(--ha-space-8);
+          display: var(--ha-split-panel-grip-display, block);
+          border-radius: var(--ha-border-radius-pill, 9999px);
+          background-color: var(--secondary-text-color);
+          opacity: 0.5;
+          transition: opacity var(--ha-animation-duration-fast) ease-out;
+        }
+
+        /* In vertical orientation the divider is horizontal, so the grip pill
+           lies flat instead of standing upright. */
+        :host([orientation="vertical"]) .divider::before {
+          width: var(--ha-space-8);
+          height: 2px;
+        }
+
+        @media (hover: hover) {
+          :host(:not([disabled])) .divider:hover {
+            background-color: var(--primary-color);
+          }
+          :host(:not([disabled])) .divider:hover::before {
+            opacity: 1;
+          }
+        }
+
+        :host(:not([disabled])) .divider:focus-visible {
+          background-color: var(--primary-color);
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-split-panel": HaSplitPanel;
+  }
+}
@@ -15,6 +15,10 @@ export class HaTileContainer extends LitElement {
  @property({ type: Boolean })
  public vertical = false;

+  /* reserve a consistent height for the info block instead of sizing to content, so sibling tiles stay aligned */
+  @property({ type: Boolean, attribute: "fixed-info-height" })
+  public fixedInfoHeight = false;
+
  @property({ attribute: false })
  public interactive = false;

@@ -34,7 +38,10 @@ export class HaTileContainer extends LitElement {
  protected render() {
    const containerOrientationClass =
      this.featurePosition === "inline" ? "horizontal" : "";
-    const contentClasses = { vertical: this.vertical };
+    const contentClasses = {
+      vertical: this.vertical,
+      "fixed-info-height": this.fixedInfoHeight,
+    };

    return html`
      <div
@@ -112,7 +119,15 @@ export class HaTileContainer extends LitElement {
      flex-direction: column;
      text-align: center;
      justify-content: center;
-      padding: 10px;
+      padding: 10px var(--ha-space-2);
+    }
+    .vertical.fixed-info-height {
+      /* pin sizing so every tile in a grid reserves the same height, wrapping or not, secondary or not */
+      gap: 2px;
+      --ha-tile-info-gap: 2px;
+      --ha-tile-info-primary-line-height: var(--ha-space-4);
+      --ha-tile-info-primary-min-height: var(--ha-space-8);
+      --ha-tile-info-min-height: var(--ha-space-12);
    }
    .vertical ::slotted([slot="info"]) {
      width: 100%;
@@ -15,9 +15,13 @@ import { customElement, property } from "lit/decorators";
 *
 * @property {boolean} secondaryLoading - Whether the secondary text is loading. Shows a skeleton placeholder.
 *
+ * @cssprop --ha-tile-info-gap - The vertical gap between the primary and secondary text. defaults to `0`.
+ * @cssprop --ha-tile-info-min-height - Minimum height of the primary/secondary block. Set this to reserve space for a missing secondary so it doesn't shift surrounding content. defaults to `auto`.
+ * @cssprop --ha-tile-info-primary-min-height - Minimum height of the primary text block, independent of `--ha-tile-info-primary-line-clamp`. Lets tiles that never wrap still match the height of tiles that do. defaults to `auto` (sizes to the actual rendered lines).
 * @cssprop --ha-tile-info-primary-font-size - The font size of the primary text. defaults to `var(--ha-font-size-m)`.
 * @cssprop --ha-tile-info-primary-font-weight - The font weight of the primary text. defaults to `var(--ha-font-weight-medium)`.
 * @cssprop --ha-tile-info-primary-line-height - The line height of the primary text. defaults to `var(--ha-line-height-normal)`.
+ * @cssprop --ha-tile-info-primary-line-clamp - The maximum number of lines for the primary text before truncating with an ellipsis. defaults to `1`.
 * @cssprop --ha-tile-info-primary-letter-spacing - The letter spacing of the primary text. defaults to `0.1px`.
 * @cssprop --ha-tile-info-primary-color - The color of the primary text. defaults to `var(--primary-text-color)`.
 * @cssprop --ha-tile-info-secondary-font-size - The font size of the secondary text. defaults to `var(--ha-font-size-s)`.
@@ -59,6 +63,8 @@ export class HaTileInfo extends LitElement {
      display: block;
      width: 100%;
      min-width: 0;
+      --tile-info-gap: var(--ha-tile-info-gap, 0);
+      --tile-info-min-height: var(--ha-tile-info-min-height, auto);
      --tile-info-primary-font-size: var(
        --ha-tile-info-primary-font-size,
        var(--ha-font-size-m)
@@ -71,6 +77,11 @@ export class HaTileInfo extends LitElement {
        --ha-tile-info-primary-line-height,
        var(--ha-line-height-normal)
      );
+      --tile-info-primary-line-clamp: var(--ha-tile-info-primary-line-clamp, 1);
+      --tile-info-primary-min-height: var(
+        --ha-tile-info-primary-min-height,
+        auto
+      );
      --tile-info-primary-letter-spacing: var(
        --ha-tile-info-primary-letter-spacing,
        0.1px
@@ -106,28 +117,45 @@ export class HaTileInfo extends LitElement {
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
+      gap: var(--tile-info-gap);
+      min-height: var(--tile-info-min-height);
    }
-    span,
-    ::slotted(*) {
+    .secondary span,
+    ::slotted([slot="secondary"]) {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      width: 100%;
    }
+    .primary span,
+    ::slotted([slot="primary"]) {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: var(--tile-info-primary-line-clamp);
+      overflow: hidden;
+      overflow-wrap: anywhere;
+      width: 100%;
+    }
    .primary {
+      display: flex;
+      align-items: center;
+      width: 100%;
      font-size: var(--tile-info-primary-font-size);
      font-weight: var(--tile-info-primary-font-weight);
      line-height: var(--tile-info-primary-line-height);
      letter-spacing: var(--tile-info-primary-letter-spacing);
      color: var(--tile-info-primary-color);
+      min-height: var(--tile-info-primary-min-height);
    }
    .secondary {
+      display: flex;
+      align-items: center;
+      width: 100%;
      font-size: var(--tile-info-secondary-font-size);
      font-weight: var(--tile-info-secondary-font-weight);
      line-height: var(--tile-info-secondary-line-height);
      letter-spacing: var(--tile-info-secondary-letter-spacing);
      color: var(--tile-info-secondary-color);
-      width: 100%;
    }
    .placeholder {
      width: 140px;
@@ -397,8 +397,20 @@ class HaConfigHttpForm extends LitElement {
    this._error = undefined;
    this._fieldErrors = {};
    this._showNoChanges = false;
+    // Drop empty entries from multi-value fields, and omit the field entirely
+    // once it is empty so the backend applies its default. Otherwise a cleared
+    // "IP address to bind to" would submit [""] / [], which binds to nothing.
+    const config = Object.fromEntries(
+      Object.entries(this._config).map(([key, value]) => {
+        if (Array.isArray(value)) {
+          const filtered = value.filter(Boolean);
+          return [key, filtered.length ? filtered : undefined];
+        }
+        return [key, value];
+      })
+    ) as HttpConfig;
    try {
-      const result = await saveHttpConfig(this.hass, this._config);
+      const result = await saveHttpConfig(this.hass, config);
      if (!result.restart) {
        this._showNoChanges = true;
      }
@@ -1,17 +1,27 @@
+import {
+  mdiRestore,
+  mdiTrashCanOutline,
+  mdiViewSplitHorizontal,
+  mdiViewSplitVertical,
+} from "@mdi/js";
+import memoizeOne from "memoize-one";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import type { HASSDomEvent } from "../../../../common/dom/fire_event";
+import { customElement, property, state } from "lit/decorators";
+import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import type { LocalizeKeys } from "../../../../common/translations/localize";
 import { debounce } from "../../../../common/util/debounce";
 import "../../../../components/ha-alert";
-import "../../../../components/ha-button";
 import "../../../../components/ha-card";
 import "../../../../components/ha-code-editor";
 import "../../../../components/ha-expansion-panel";
+import type { HaIconButtonToolbarItem } from "../../../../components/ha-icon-button-toolbar";
+import "../../../../components/ha-label";
 import "../../../../components/ha-spinner";
+import "../../../../components/ha-split-panel";
+import type { HaSplitPanel } from "../../../../components/ha-split-panel";
+import "../../../../components/ha-svg-icon";
 import "../../../../components/ha-tip";
 import type { RenderTemplateResult } from "../../../../data/ws-templates";
 import { subscribeRenderTemplate } from "../../../../data/ws-templates";
@@ -50,11 +60,18 @@ const TEMPLATE_DOCS_LINKS: { key: string; path: string }[] = [
  { key: "docs_functions", path: "/template-functions/" },
 ];

+const STORAGE_KEY_TEMPLATE = "panel-dev-template-template";
+const STORAGE_KEY_SPLIT_POSITION = "panel-dev-template-split-position";
+const STORAGE_KEY_SPLIT_ORIENTATION = "panel-dev-template-split-orientation";
+const DEFAULT_SPLIT_POSITION = 50;
+
+type SplitOrientation = "horizontal" | "vertical";
+
@customElement("tools-template")
 class HaPanelDevTemplate extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

-  @property({ type: Boolean }) public narrow = false;
+  @property({ type: Boolean, reflect: true }) public narrow = false;

  @state() private _error?: string;

@@ -66,9 +83,9 @@ class HaPanelDevTemplate extends LitElement {

  @state() private _unsubRenderTemplate?: Promise<UnsubscribeFunc>;

-  @state() private _descriptionExpanded = false;
+  @state() private _splitPosition = DEFAULT_SPLIT_POSITION;

-  @query("ha-tip") private _editorTip?: HTMLElement;
+  @state() private _splitOrientation: SplitOrientation = "horizontal";

  private _template = "";

@@ -78,8 +95,6 @@ class HaPanelDevTemplate extends LitElement {
  // its late-arriving results discarded.
  private _subscribeRequestId = 0;

-  private _tipResizeObserver?: ResizeObserver;
-
  public connectedCallback() {
    super.connectedCallback();
    if (this._template && !this._unsubRenderTemplate) {
@@ -90,18 +105,25 @@ class HaPanelDevTemplate extends LitElement {
  public disconnectedCallback() {
    super.disconnectedCallback();
    this._unsubscribeTemplate();
-    this._tipResizeObserver?.disconnect();
-    this._tipResizeObserver = undefined;
  }

  protected firstUpdated() {
-    if (localStorage && localStorage["panel-dev-template-template"]) {
-      this._template = localStorage["panel-dev-template-template"];
+    if (localStorage && localStorage[STORAGE_KEY_TEMPLATE]) {
+      this._template = localStorage[STORAGE_KEY_TEMPLATE];
    } else {
      this._template = DEMO_TEMPLATE;
    }
+    const storedPosition = localStorage?.[STORAGE_KEY_SPLIT_POSITION];
+    if (storedPosition) {
+      const parsed = parseFloat(storedPosition);
+      if (!isNaN(parsed) && parsed >= 0 && parsed <= 100) {
+        this._splitPosition = parsed;
+      }
+    }
+    if (localStorage?.[STORAGE_KEY_SPLIT_ORIENTATION] === "vertical") {
+      this._splitOrientation = "vertical";
+    }
    this._subscribeTemplate();
-    this._observeTipHeight();
    this._inited = true;
  }

@@ -114,15 +136,20 @@ class HaPanelDevTemplate extends LitElement {
          : "dict"
        : type;

+    const editorCard = this._renderEditorCard();
+    const resultCard = this._renderResultCard(type, resultType);
+
+    // On narrow viewports side-by-side is too cramped, so force the (still
+    // resizable) stacked layout and hide the orientation toggle.
+    const orientation = this.narrow ? "vertical" : this._splitOrientation;
+
    return html`
-      <div class="content">
+      <div class="about">
        <ha-expansion-panel
          .header=${this.hass.localize(
            "ui.panel.config.tools.tabs.templates.about"
          )}
          outlined
-          .expanded=${this._descriptionExpanded}
-          @expanded-changed=${this._expandedChanged}
        >
          <div class="description">
            <p>
@@ -164,92 +191,159 @@ class HaPanelDevTemplate extends LitElement {
          </div>
        </ha-expansion-panel>
      </div>
-      <div
-        class="content ${classMap({
-          layout: !this.narrow,
-          horizontal: !this.narrow,
-        })}"
-        style="--description-expanded: ${this._descriptionExpanded ? 1 : 0}"
-      >
-        <ha-card
-          class="edit-pane"
-          header=${this.hass.localize(
-            "ui.panel.config.tools.tabs.templates.editor"
-          )}
-        >
-          <div class="card-content">
-            <ha-code-editor
-              mode="jinja2"
-              .value=${this._template}
-              .error=${this._error}
-              autofocus
-              autocomplete-entities
-              autocomplete-icons
-              @value-changed=${this._templateChanged}
-              dir="ltr"
-            ></ha-code-editor>
-          </div>
-          <div class="card-actions">
-            <ha-button appearance="plain" @click=${this._restoreDemo}>
-              ${this.hass.localize(
-                "ui.panel.config.tools.tabs.templates.reset"
-              )}
-            </ha-button>
-            <ha-button appearance="plain" @click=${this._clear}>
-              ${this.hass.localize("ui.common.clear")}
-            </ha-button>
-          </div>
-          <ha-tip>
-            ${this.hass.localize(
-              "ui.panel.config.tools.tabs.templates.keyboard_tip",
-              {
-                autocomplete: html`<kbd>Ctrl</kbd>+<kbd>Space</kbd>`,
-              }
-            )}
-          </ha-tip>
-        </ha-card>

-        <ha-card
-          class="render-pane"
-          header=${this.hass.localize(
-            "ui.panel.config.tools.tabs.templates.result"
-          )}
-        >
-          <div class="card-content ha-scrollbar">
-            ${
-              this._rendering
-                ? html`<ha-spinner
-                    class="render-spinner"
-                    size="small"
-                  ></ha-spinner>`
-                : ""
-            }
-            ${
-              this._error
-                ? html`<ha-alert
-                    alert-type=${this._errorLevel?.toLowerCase() || "error"}
-                    >${this._error}</ha-alert
-                  >`
-                : nothing
-            }
-            ${
-              this._templateResult
-                ? html`<pre
-                      class="rendered ${classMap({
-                        [resultType]: resultType,
-                      })}"
-                    >
+      <ha-split-panel
+        class="panes ${orientation === "vertical" ? "vertical" : ""}"
+        .position=${this._splitPosition}
+        .orientation=${orientation}
+        snap="50%"
+        @wa-reposition=${this._splitRepositioned}
+      >
+        <div slot="start" class="pane">${editorCard}</div>
+        <div slot="end" class="pane">${resultCard}</div>
+        ${this.narrow ? nothing : this._renderOrientationToggle()}
+      </ha-split-panel>
+    `;
+  }
+
+  private _renderOrientationToggle() {
+    const label = this.hass.localize(
+      this._splitOrientation === "vertical"
+        ? "ui.panel.config.tools.tabs.templates.layout_side_by_side"
+        : "ui.panel.config.tools.tabs.templates.layout_stacked"
+    );
+    return html`
+      <button
+        type="button"
+        slot="divider"
+        class="divider-toggle"
+        .title=${label}
+        aria-label=${label}
+        @mousedown=${stopPropagation}
+        @touchstart=${stopPropagation}
+        @click=${this._toggleOrientation}
+      >
+        <ha-svg-icon
+          .path=${
+            this._splitOrientation === "vertical"
+              ? mdiViewSplitVertical
+              : mdiViewSplitHorizontal
+          }
+        ></ha-svg-icon>
+      </button>
+    `;
+  }
+
+  // Reset/clear live in the editor toolbar next to the built-in undo/redo,
+  // copy, search and fullscreen buttons; the trailing divider separates them.
+  private _editorToolbarItems = memoizeOne(
+    (
+      localize: HomeAssistant["localize"]
+    ): (HaIconButtonToolbarItem | string)[] => [
+      {
+        id: "restore-demo",
+        label: localize("ui.panel.config.tools.tabs.templates.reset"),
+        path: mdiRestore,
+        action: () => this._restoreDemo(),
+      },
+      {
+        id: "clear",
+        label: localize("ui.common.clear"),
+        path: mdiTrashCanOutline,
+        action: () => this._clear(),
+      },
+      "divider",
+    ]
+  );
+
+  private _renderEditorCard() {
+    return html`
+      <ha-card
+        class="edit-pane"
+        header=${this.hass.localize(
+          "ui.panel.config.tools.tabs.templates.editor"
+        )}
+      >
+        <div class="card-content">
+          <ha-code-editor
+            mode="jinja2"
+            .value=${this._template}
+            .error=${this._error}
+            .toolbarItems=${this._editorToolbarItems(this.hass.localize)}
+            autofocus
+            autocomplete-entities
+            autocomplete-icons
+            @value-changed=${this._templateChanged}
+            dir="ltr"
+          ></ha-code-editor>
+        </div>
+        ${
+          this.narrow
+            ? nothing
+            : html`
+                <ha-tip>
+                  ${this.hass.localize(
+                    "ui.panel.config.tools.tabs.templates.keyboard_tip",
+                    {
+                      autocomplete: html`<kbd>Ctrl</kbd>+<kbd>Space</kbd>`,
+                    }
+                  )}
+                </ha-tip>
+              `
+        }
+      </ha-card>
+    `;
+  }
+
+  private _renderResultCard(type: string, resultType: string) {
+    const showEmptyState =
+      !this._error && !this._rendering && !this._template?.trim();
+
+    return html`
+      <ha-card
+        class="render-pane"
+        header=${this.hass.localize(
+          "ui.panel.config.tools.tabs.templates.result"
+        )}
+      >
+        <div class="card-content ha-scrollbar">
+          ${
+            this._rendering
+              ? html`<ha-spinner
+                  class="render-spinner"
+                  size="small"
+                ></ha-spinner>`
+              : ""
+          }
+          ${
+            this._error
+              ? html`<ha-alert
+                  alert-type=${this._errorLevel?.toLowerCase() || "error"}
+                  >${this._error}</ha-alert
+                >`
+              : nothing
+          }
+          ${
+            showEmptyState
+              ? html`<div class="empty">
+                  ${this.hass.localize(
+                    "ui.panel.config.tools.tabs.templates.result_placeholder"
+                  )}
+                </div>`
+              : this._templateResult
+                ? html`
+                    <ha-label dense>
+                      ${this.hass.localize(
+                        "ui.panel.config.tools.tabs.templates.result_type"
+                      )}:
+                      ${resultType}
+                    </ha-label>
+                    <pre class="rendered">
 ${
  type === "object"
    ? JSON.stringify(this._templateResult.result, null, 2)
    : this._templateResult.result
 }</pre>
-                    <p>
-                      ${this.hass.localize(
-                        "ui.panel.config.tools.tabs.templates.result_type"
-                      )}:
-                      ${resultType}
-                    </p>
                    ${
                      this._templateResult.listeners.time
                        ? html`
@@ -316,109 +410,179 @@ ${
                                  )}
                                </span>`
                              : nothing
-                    }`
+                    }
+                  `
                : nothing
-            }
-          </div>
-        </ha-card>
-      </div>
+          }
+        </div>
+      </ha-card>
    `;
  }

-  private _observeTipHeight() {
-    if (!this._editorTip || this._tipResizeObserver) {
-      return;
-    }
-    this._tipResizeObserver = new ResizeObserver((entries) => {
-      const height =
-        entries[0]?.borderBoxSize?.[0]?.blockSize ??
-        entries[0]?.contentRect.height;
-      if (height) {
-        this.style.setProperty("--tip-height", `${height}px`);
-      }
-    });
-    this._tipResizeObserver.observe(this._editorTip);
+  private _splitRepositioned(ev: Event) {
+    this._splitPosition = (ev.target as HaSplitPanel).position;
+    this._storeSplitPosition();
  }

-  private _expandedChanged(
-    ev: HASSDomEvent<HASSDomEvents["expanded-changed"]>
-  ) {
-    this._descriptionExpanded = ev.detail.expanded;
+  private _toggleOrientation() {
+    this._splitOrientation =
+      this._splitOrientation === "vertical" ? "horizontal" : "vertical";
+    if (this._inited) {
+      localStorage[STORAGE_KEY_SPLIT_ORIENTATION] = this._splitOrientation;
+    }
  }

+  private _storeSplitPosition = debounce(
+    () => {
+      if (!this._inited) {
+        return;
+      }
+      localStorage[STORAGE_KEY_SPLIT_POSITION] = String(this._splitPosition);
+    },
+    500,
+    false
+  );
+
  static get styles(): CSSResultGroup {
    return [
      haStyle,
      haStyleScrollbar,
      css`
        :host {
-          user-select: none;
+          display: flex;
+          flex-direction: column;
+          height: 100%;
        }

-        .content {
-          gap: var(--ha-space-4);
+        .about {
+          flex: none;
          padding: var(--ha-space-4);
-        }
-
-        .content:has(ha-expansion-panel) {
          padding-bottom: 0;
        }

-        .content.horizontal {
-          --panel-header-height: calc(
-            var(--header-height) + 1em * 2 + var(--ha-line-height-normal) *
-              var(--ha-font-size-m) + 1px + 2px
-          );
-          --description-pane-height: calc(
-            var(--ha-space-4) + 48px +
-              (
-                var(--ha-line-height-normal) * var(--ha-font-size-m) * 3 +
-                  var(--ha-space-1) * 2
-              ) *
-              var(--description-expanded) + var(--ha-card-border-width, 1px) * 2
-          );
-          --card-header-height: calc(
-            var(--ha-space-3) + var(--ha-space-4) +
-              var(--ha-line-height-expanded) *
-              var(--ha-card-header-font-size, var(--ha-font-size-2xl))
-          );
-          --card-actions-height: calc(1px + var(--ha-space-2) * 2 + 40px);
-          --tip-height-minimal: calc(
-            var(--mdc-icon-size, 24px) + var(--ha-space-4)
-          );
-          --edit-pane-height: calc(
-            100vh - var(--panel-header-height) - var(
-                --description-pane-height
-              ) - var(--ha-space-4) *
-              2
-          );
-          --code-mirror-max-height: calc(
-            var(--edit-pane-height) - var(--card-header-height) +
-              var(--ha-space-2) - var(--card-actions-height) - var(
-                --tip-height,
-                var(--tip-height-minimal)
-              ) - var(--ha-space-4) - var(--ha-card-border-width, 1px) *
-              2
-          );
+        .about a {
+          color: var(--primary-color);
+        }
+
+        .panes {
+          flex: 1;
+          min-height: 0;
+          box-sizing: border-box;
+          padding: var(--ha-space-4);
+          --ha-split-panel-min: 20%;
+          --ha-split-panel-max: 80%;
+          --ha-split-panel-divider-hit-area: var(--ha-space-4);
+        }
+
+        /* On wide viewports we slot our own handle (the orientation toggle)
+           into the divider, so hide the default grip. On narrow there is no
+           toggle, so keep the default grip as the resize affordance. */
+        :host(:not([narrow])) .panes {
+          --ha-split-panel-grip-display: none;
+        }
+
+        /* Orientation toggle that lives on the divider. Clicking it toggles
+           orientation; resizing is done by dragging the divider elsewhere. */
+        .divider-toggle {
+          position: relative;
+          z-index: 1;
+          flex: none;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          box-sizing: border-box;
+          width: 24px;
+          height: 24px;
+          margin: 0;
+          padding: 0;
+          border: 1px solid var(--divider-color);
+          border-radius: 50%;
+          background-color: var(--card-background-color);
+          color: var(--secondary-text-color);
+          cursor: pointer;
+          --mdc-icon-size: 16px;
+          transition:
+            color var(--ha-animation-duration-fast) ease-out,
+            border-color var(--ha-animation-duration-fast) ease-out;
+        }
+
+        @media (hover: hover) {
+          .divider-toggle:hover {
+            color: var(--primary-color);
+            border-color: var(--primary-color);
+          }
+        }
+
+        .divider-toggle:focus-visible {
+          outline: none;
+          color: var(--primary-color);
+          border-color: var(--primary-color);
+        }
+
+        .pane {
+          display: flex;
+          min-width: 0;
+          height: 100%;
+          box-sizing: border-box;
+          contain: size;
+        }
+
+        .pane[slot="start"] {
+          padding-inline-end: var(--ha-space-4);
+        }
+
+        .pane[slot="end"] {
+          padding-inline-start: var(--ha-space-4);
+        }
+
+        .panes.vertical .pane[slot="start"] {
+          padding-inline-end: 0;
+          padding-block-end: var(--ha-space-4);
+        }
+
+        .panes.vertical .pane[slot="end"] {
+          padding-inline-start: 0;
+          padding-block-start: var(--ha-space-4);
+        }
+
+        .pane ha-card {
+          flex: 1;
+          min-width: 0;
        }

        ha-card {
-          margin-bottom: var(--ha-space-4);
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          margin: 0;
+        }
+
+        .edit-pane .card-content {
+          flex: 1;
+          min-height: 0;
+          display: flex;
+        }
+
+        .edit-pane ha-code-editor {
+          flex: 1;
+          min-height: 0;
+          width: 100%;
+          --code-mirror-height: 100%;
+        }
+
+        .render-pane .card-content {
+          flex: 1;
+          min-height: 0;
+          overflow: auto;
+          display: flex;
+          flex-direction: column;
+          gap: var(--ha-space-2);
        }

        .edit-pane {
          direction: var(--direction);
        }

-        .edit-pane a {
-          color: var(--primary-color);
-        }
-
-        .content.horizontal > * {
-          width: 50%;
-          margin-bottom: 0px;
-        }
-
        .render-spinner {
          position: absolute;
          top: var(--ha-space-2);
@@ -428,10 +592,24 @@ ${
        }

        ha-alert {
-          margin-bottom: var(--ha-space-2);
          display: block;
        }

+        .render-pane ha-label {
+          align-self: flex-start;
+        }
+
+        .empty {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 100%;
+          min-height: 120px;
+          padding: var(--ha-space-4);
+          text-align: center;
+          color: var(--secondary-text-color);
+        }
+
        .rendered {
          font-family: var(--ha-font-family-code);
          -webkit-font-smoothing: var(--ha-font-smoothing);
@@ -439,6 +617,7 @@ ${
          clear: both;
          white-space: pre-wrap;
          background-color: var(--secondary-background-color);
+          border-radius: var(--ha-border-radius-md);
          padding: var(--ha-space-2);
          margin-top: 0;
          margin-bottom: 0;
@@ -447,7 +626,7 @@ ${

        p,
        ul {
-          margin-block-end: 0;
+          margin-block: 0;
        }
        .description > p {
          margin-block-start: 0;
@@ -468,26 +647,6 @@ ${
          color: var(--secondary-text-color);
        }

-        .render-pane .card-content {
-          user-select: text;
-        }
-
-        .content.horizontal .render-pane .card-content {
-          overflow: auto;
-          max-height: calc(
-            var(--code-mirror-max-height) +
-              47px - var(--ha-card-border-radius, var(--ha-border-radius-lg))
-          );
-        }
-
-        .content.horizontal .render-pane {
-          overflow: hidden;
-          padding-bottom: var(
-            --ha-card-border-radius,
-            var(--ha-border-radius-lg)
-          );
-        }
-
        .all_listeners {
          color: var(--warning-color);
        }
@@ -507,19 +666,6 @@ ${
          background-color: var(--secondary-background-color);
          white-space: nowrap;
        }
-
-        @media all and (max-width: 870px) {
-          .content ha-card {
-            max-width: 100%;
-          }
-        }
-
-        .card-actions {
-          display: flex;
-        }
-        .card-actions > ha-button:last-child {
-          margin-inline-start: auto;
-        }
      `,
    ];
  }
@@ -615,7 +761,7 @@ ${
    if (!this._inited) {
      return;
    }
-    localStorage["panel-dev-template-template"] = this._template;
+    localStorage[STORAGE_KEY_TEMPLATE] = this._template;
  }

  private async _restoreDemo() {
@@ -631,7 +777,7 @@ ${
    }
    this._template = DEMO_TEMPLATE;
    this._subscribeTemplate();
-    delete localStorage["panel-dev-template-template"];
+    delete localStorage[STORAGE_KEY_TEMPLATE];
  }

  private async _clear() {
@@ -647,12 +793,8 @@ ${
    }
    this._unsubscribeTemplate();
    this._template = "";
-    // Reset to empty result. Setting to 'undefined' results in a different visual
-    // behaviour compared to manually emptying the template input box.
-    this._templateResult = {
-      result: "",
-      listeners: { all: false, entities: [], domains: [], time: false },
-    };
+    // An empty template shows the placeholder empty state.
+    this._templateResult = undefined;
  }
 }

@@ -620,6 +620,9 @@ export class HuiAreaCard extends LitElement implements LovelaceCard {
      "--tile-color": color,
    };

+    const fixedInfoHeight =
+      this.layout === "grid" && this._config.grid_options?.rows !== "auto";
+
    return html`
      <ha-card style=${styleMap(style)}>
        ${
@@ -683,6 +686,7 @@ export class HuiAreaCard extends LitElement implements LovelaceCard {
        <ha-tile-container
          .featurePosition=${featurePosition}
          .vertical=${Boolean(this._config.vertical)}
+          .fixedInfoHeight=${fixedInfoHeight}
          .interactive=${Boolean(this._hasCardAction)}
          @action=${this._handleAction}
        >
@@ -699,6 +703,9 @@ export class HuiAreaCard extends LitElement implements LovelaceCard {
          </ha-tile-icon>
          <ha-tile-info
            slot="info"
+            class=${ifDefined(
+              this._config.vertical && fixedInfoHeight ? "twoline" : undefined
+            )}
            .primary=${primary}
            .secondary=${secondary}
          ></ha-tile-info>
@@ -818,6 +825,10 @@ export class HuiAreaCard extends LitElement implements LovelaceCard {
        justify-content: center;
        color: white;
      }
+      ha-tile-info.twoline {
+        --ha-tile-info-primary-line-clamp: 2;
+        --ha-tile-info-primary-line-height: var(--ha-space-4);
+      }
    `,
  ];
 }
@@ -40,6 +40,8 @@ export class HuiShortcutCard extends LitElement implements LovelaceCard {

  @property({ attribute: false }) public hass?: HomeAssistant;

+  @property({ attribute: false }) public layout?: string;
+
  @state() private _config?: ShortcutCardConfig;

  private _navInfo = new NavigationPathInfoController(this);
@@ -128,10 +130,14 @@ export class HuiShortcutCard extends LitElement implements LovelaceCard {

    const style = color ? { "--tile-color": color } : {};

+    const fixedInfoHeight =
+      this.layout === "grid" && this._config.grid_options?.rows !== "auto";
+
    return html`
      <ha-card style=${styleMap(style)}>
        <ha-tile-container
          .vertical=${Boolean(this._config.vertical)}
+          .fixedInfoHeight=${fixedInfoHeight}
          .interactive=${this._hasCardAction}
          .actionHandlerOptions=${{
            hasHold: hasAction(this._config.hold_action),
@@ -81,6 +81,8 @@ export class HuiTileCard extends LitElement implements LovelaceCard {

  @property({ attribute: false }) public hass?: HomeAssistant;

+  @property({ attribute: false }) public layout?: string;
+
  @state() private _config?: TileCardConfig;

  @state() private _featureContext: LovelaceCardFeatureContext = {};
@@ -288,11 +290,15 @@ export class HuiTileCard extends LitElement implements LovelaceCard {

    const hasImage = Boolean(imageUrl);

+    const fixedInfoHeight =
+      this.layout === "grid" && this._config.grid_options?.rows !== "auto";
+
    return html`
      <ha-card style=${styleMap(style)} class=${classMap({ active })}>
        <ha-tile-container
          .featurePosition=${featurePosition}
          .vertical=${Boolean(this._config.vertical)}
+          .fixedInfoHeight=${fixedInfoHeight}
          .interactive=${this._hasCardAction}
          .actionHandlerOptions=${{
            hasHold: hasAction(this._config!.hold_action),
@@ -3955,6 +3955,9 @@
              "about": "About templates",
              "editor": "Template editor",
              "result": "Result",
+              "result_placeholder": "Your template result will appear here.",
+              "layout_stacked": "Drag to resize, click for stacked view",
+              "layout_side_by_side": "Drag to resize, click for side-by-side view",
              "reset": "Reset to demo template",
              "confirm_reset": "Do you want to reset your current template back to the demo template?",
              "confirm_clear": "Do you want to clear your current template?",
Author	SHA1	Message	Date
Bram Kragten	ff814167c6	Bumped version to 20260729.1	2026-07-30 10:41:32 +02:00
Paul Bottein	d08d8dde64	Show integration logo and name in the replace device dialog (#53384 )	2026-07-30 10:41:12 +02:00
Bram Kragten	5da441ceed	Strip empty strings from http config (#53377 )	2026-07-30 10:41:11 +02:00
Paul Bottein	22e646a68a	Allow area card name to wrap to two lines in vertical layout (#53370 ) * Allow area card name to wrap to two lines in vertical layout * Align vertical tile icons in grid sections * Cut single big word	2026-07-30 10:41:11 +02:00
Maarten Lakerveld	d0ab20479f	Tools > Template use WA Split Panel (#53021 ) * Add Web Awesome Split Panel component * Use SplitPanel for template page. Add vertical/horizontal option. Cleanup, use flexbox. --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>	2026-07-30 10:41:10 +02:00