fix

* Improve device automation rows

* Improve device automation type picker

* Update src/panels/config/automation/condition/ha-automation-condition-row.ts

---------

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

.gitignore

@@ -15,7 +15,7 @@ dist/
 !.yarn/sdks
 !.yarn/versions
 .pnp.*
-/node_modules/
+node_modules/
 yarn-error.log
 npm-debug.log
 

.nvmrc

@@ -1 +1 @@
-24.12.0
+24.13.0

package.json

@@ -236,6 +236,6 @@
   },
   "packageManager": "yarn@4.12.0",
   "volta": {
-    "node": "24.12.0"
+    "node": "24.13.0"
   }
 }

src/common/util/deep-equal.ts

@@ -1,6 +1,16 @@
 // From https://github.com/epoberezkin/fast-deep-equal
 // MIT License - Copyright (c) 2017 Evgeny Poberezkin
-export const deepEqual = (a: any, b: any): boolean => {
+
+interface DeepEqualOptions {
+  /** Compare Symbol properties in addition to string keys */
+  compareSymbols?: boolean;
+}
+
+export const deepEqual = (
+  a: any,
+  b: any,
+  options?: DeepEqualOptions
+): boolean => {
   if (a === b) {
     return true;
   }
@@ -18,7 +28,7 @@ export const deepEqual = (a: any, b: any): boolean => {
         return false;
       }
       for (i = length; i-- !== 0; ) {
-        if (!deepEqual(a[i], b[i])) {
+        if (!deepEqual(a[i], b[i], options)) {
           return false;
         }
       }
@@ -35,7 +45,7 @@ export const deepEqual = (a: any, b: any): boolean => {
         }
       }
       for (i of a.entries()) {
-        if (!deepEqual(i[1], b.get(i[0]))) {
+        if (!deepEqual(i[1], b.get(i[0]), options)) {
           return false;
         }
       }
@@ -93,11 +103,28 @@ export const deepEqual = (a: any, b: any): boolean => {
     for (i = length; i-- !== 0; ) {
       const key = keys[i];
 
-      if (!deepEqual(a[key], b[key])) {
+      if (!deepEqual(a[key], b[key], options)) {
         return false;
       }
     }
 
+    // Compare Symbol properties if requested
+    if (options?.compareSymbols) {
+      const symbolsA = Object.getOwnPropertySymbols(a);
+      const symbolsB = Object.getOwnPropertySymbols(b);
+      if (symbolsA.length !== symbolsB.length) {
+        return false;
+      }
+      for (const sym of symbolsA) {
+        if (!Object.prototype.hasOwnProperty.call(b, sym)) {
+          return false;
+        }
+        if (!deepEqual(a[sym], b[sym], options)) {
+          return false;
+        }
+      }
+    }
+
     return true;
   }
 

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

@@ -1,8 +1,9 @@
 import { consume } from "@lit/context";
 import { css, html, LitElement, nothing } from "lit";
 import { property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
-import { stopPropagation } from "../../common/dom/stop_propagation";
+import { caseInsensitiveStringCompare } from "../../common/string/compare";
 import { fullEntitiesContext } from "../../data/context";
 import type { DeviceAutomation } from "../../data/device/device_automation";
 import {
@@ -11,11 +12,12 @@ import {
 } from "../../data/device/device_automation";
 import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
 import type { HomeAssistant } from "../../types";
+import "../ha-generic-picker";
 import "../ha-md-select";
 import "../ha-md-select-option";
+import type { PickerValueRenderer } from "../ha-picker-field";
 
 const NO_AUTOMATION_KEY = "NO_AUTOMATION";
-const UNKNOWN_AUTOMATION_KEY = "UNKNOWN_AUTOMATION";
 
 export abstract class HaDeviceAutomationPicker<
   T extends DeviceAutomation,
@@ -28,7 +30,7 @@ export abstract class HaDeviceAutomationPicker<
 
   @property({ type: Object }) public value?: T;
 
-  @state() private _automations: T[] = [];
+  @state() private _automations?: T[];
 
   // Trigger an empty render so we start with a clean DOM.
   // paper-listbox does not like changing things around.
@@ -44,12 +46,6 @@ export abstract class HaDeviceAutomationPicker<
     );
   }
 
-  protected get UNKNOWN_AUTOMATION_TEXT() {
-    return this.hass.localize(
-      "ui.panel.config.devices.automation.actions.unknown_action"
-    );
-  }
-
   private _localizeDeviceAutomation: (
     hass: HomeAssistant,
     entityRegistry: EntityRegistryEntry[],
@@ -75,7 +71,7 @@ export abstract class HaDeviceAutomationPicker<
   }
 
   private get _value() {
-    if (!this.value) {
+    if (!this.value || !this._automations) {
       return "";
     }
 
@@ -88,7 +84,7 @@ export abstract class HaDeviceAutomationPicker<
     );
 
     if (idx === -1) {
-      return UNKNOWN_AUTOMATION_KEY;
+      return this.value.alias || this.value.type || "unknown";
     }
 
     return `${this._automations[idx].device_id}_${idx}`;
@@ -99,37 +95,21 @@ export abstract class HaDeviceAutomationPicker<
       return nothing;
     }
     const value = this._value;
-    return html`
-      <ha-md-select
-        .label=${this.label}
-        .value=${value}
-        @change=${this._automationChanged}
-        @closed=${stopPropagation}
-        .disabled=${this._automations.length === 0}
-      >
-        ${value === NO_AUTOMATION_KEY
-          ? html`<ha-md-select-option .value=${NO_AUTOMATION_KEY}>
-              ${this.NO_AUTOMATION_TEXT}
-            </ha-md-select-option>`
-          : nothing}
-        ${value === UNKNOWN_AUTOMATION_KEY
-          ? html`<ha-md-select-option .value=${UNKNOWN_AUTOMATION_KEY}>
-              ${this.UNKNOWN_AUTOMATION_TEXT}
-            </ha-md-select-option>`
-          : nothing}
-        ${this._automations.map(
-          (automation, idx) => html`
-            <ha-md-select-option .value=${`${automation.device_id}_${idx}`}>
-              ${this._localizeDeviceAutomation(
-                this.hass,
-                this._entityReg,
-                automation
-              )}
-            </ha-md-select-option>
-          `
-        )}
-      </ha-md-select>
-    `;
+
+    return html`<ha-generic-picker
+      .hass=${this.hass}
+      .label=${this.label}
+      .value=${value}
+      .disabled=${!this._automations || this._automations.length === 0}
+      .getItems=${this._getItems(value, this._automations)}
+      @value-changed=${this._automationChanged}
+      .valueRenderer=${this._valueRenderer}
+      .unknownItemText=${this.hass.localize(
+        "ui.panel.config.devices.automation.actions.unknown_action"
+      )}
+      hide-clear-icon
+    >
+    </ha-generic-picker>`;
   }
 
   protected updated(changedProps) {
@@ -140,6 +120,57 @@ export abstract class HaDeviceAutomationPicker<
     }
   }
 
+  private _getItems = memoizeOne(
+    (value: string, automations: T[] | undefined) => {
+      if (!automations) {
+        return () => undefined;
+      }
+
+      const automationListItems = automations.map((automation, idx) => {
+        const primary = this._localizeDeviceAutomation(
+          this.hass,
+          this._entityReg,
+          automation
+        );
+        return {
+          id: `${automation.device_id}_${idx}`,
+          primary,
+        };
+      });
+
+      automationListItems.sort((a, b) =>
+        caseInsensitiveStringCompare(
+          a.primary,
+          b.primary,
+          this.hass.locale.language
+        )
+      );
+
+      if (value === NO_AUTOMATION_KEY) {
+        automationListItems.unshift({
+          id: NO_AUTOMATION_KEY,
+          primary: this.NO_AUTOMATION_TEXT,
+        });
+      }
+
+      return () => automationListItems;
+    }
+  );
+
+  private _valueRenderer: PickerValueRenderer = (value: string) => {
+    const automation = this._automations?.find(
+      (a, idx) => value === `${a.device_id}_${idx}`
+    );
+
+    const text = automation
+      ? this._localizeDeviceAutomation(this.hass, this._entityReg, automation)
+      : value === NO_AUTOMATION_KEY
+        ? this.NO_AUTOMATION_TEXT
+        : value;
+
+    return html`<span slot="headline">${text}</span>`;
+  };
+
   private async _updateDeviceInfo() {
     this._automations = this.deviceId
       ? (await this._fetchDeviceAutomations(this.hass, this.deviceId)).sort(
@@ -161,13 +192,14 @@ export abstract class HaDeviceAutomationPicker<
     this._renderEmpty = false;
   }
 
-  private _automationChanged(ev) {
-    const value = ev.target.value;
-    if (!value || [UNKNOWN_AUTOMATION_KEY, NO_AUTOMATION_KEY].includes(value)) {
+  private _automationChanged(ev: CustomEvent<{ value: string }>) {
+    ev.stopPropagation();
+    const value = ev.detail.value;
+    if (!value || NO_AUTOMATION_KEY === value) {
       return;
     }
     const [deviceId, idx] = value.split("_");
-    const automation = this._automations[idx];
+    const automation = this._automations![idx];
     if (automation.device_id !== deviceId) {
       return;
     }

src/components/ha-code-editor.ts

@@ -255,6 +255,7 @@ export class HaCodeEditor extends ReactiveElement {
         ...this._loadedCodeMirror.tabKeyBindings,
         saveKeyBinding,
       ]),
+      this._loadedCodeMirror.search({ top: true }),
       this._loadedCodeMirror.langCompartment.of(this._mode),
       this._loadedCodeMirror.haTheme,
       this._loadedCodeMirror.haSyntaxHighlighting,

src/components/ha-label-picker.ts

@@ -1,4 +1,4 @@
-import { mdiLabel, mdiPlus } from "@mdi/js";
+import { mdiPlus } from "@mdi/js";
 import type { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
 import { LitElement, html } from "lit";
@@ -25,11 +25,9 @@ import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-generic-picker";
 import type { HaGenericPicker } from "./ha-generic-picker";
 import type { PickerComboBoxItem } from "./ha-picker-combo-box";
-import type { PickerValueRenderer } from "./ha-picker-field";
 import "./ha-svg-icon";
 
 const ADD_NEW_ID = "___ADD_NEW___";
-const NO_LABELS = "___NO_LABELS___";
 
 @customElement("ha-label-picker")
 export class HaLabelPicker extends SubscribeMixin(LitElement) {
@@ -108,52 +106,10 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
     ];
   }
 
-  private _labelMap = memoizeOne(
-    (
-      labels: LabelRegistryEntry[] | undefined
-    ): Map<string, LabelRegistryEntry> => {
-      if (!labels) {
-        return new Map();
-      }
-      return new Map(labels.map((label) => [label.label_id, label]));
-    }
-  );
-
-  private _computeValueRenderer = memoizeOne(
-    (labels: LabelRegistryEntry[] | undefined): PickerValueRenderer =>
-      (value) => {
-        const label = this._labelMap(labels).get(value);
-
-        if (!label) {
-          return html`
-            <ha-svg-icon slot="start" .path=${mdiLabel}></ha-svg-icon>
-            <span slot="headline">${value}</span>
-          `;
-        }
-
-        return html`
-          ${label.icon
-            ? html`<ha-icon slot="start" .icon=${label.icon}></ha-icon>`
-            : html`<ha-svg-icon slot="start" .path=${mdiLabel}></ha-svg-icon>`}
-          <span slot="headline">${label.name}</span>
-        `;
-      }
-  );
-
   private _getLabelsMemoized = memoizeOne(getLabels);
 
-  private _getItems = () => {
-    if (!this._labels || this._labels.length === 0) {
-      return [
-        {
-          id: NO_LABELS,
-          primary: this.hass.localize("ui.components.label-picker.no_labels"),
-          icon_path: mdiLabel,
-        },
-      ];
-    }
-
-    return this._getLabelsMemoized(
+  private _getItems = () =>
+    this._getLabelsMemoized(
       this.hass.states,
       this.hass.areas,
       this.hass.devices,
@@ -166,7 +122,6 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
       this.entityFilter,
       this.excludeLabels
     );
-  };
 
   private _allLabelNames = memoizeOne((labels?: LabelRegistryEntry[]) => {
     if (!labels) {
@@ -219,8 +174,6 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
       this.placeholder ??
       this.hass.localize("ui.components.label-picker.label");
 
-    const valueRenderer = this._computeValueRenderer(this._labels);
-
     return html`
       <ha-generic-picker
         .disabled=${this.disabled}
@@ -237,7 +190,6 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
         .value=${this.value}
         .getItems=${this._getItems}
         .getAdditionalItems=${this._getAdditionalItems}
-        .valueRenderer=${valueRenderer}
         .searchKeys=${labelComboBoxKeys}
         @value-changed=${this._valueChanged}
       >
@@ -251,10 +203,6 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
 
     const value = ev.detail.value;
 
-    if (value === NO_LABELS) {
-      return;
-    }
-
     if (!value) {
       this._setValue(undefined);
       return;

src/data/panel.ts

@@ -11,6 +11,7 @@ import {
   mdiViewDashboard,
 } from "@mdi/js";
 import type { HomeAssistant, PanelInfo } from "../types";
+import type { PageNavigation } from "../layouts/hass-tabs-subpage";
 
 /** Panel to show when no panel is picked. */
 export const DEFAULT_PANEL = "lovelace";
@@ -72,6 +73,41 @@ export const getPanelTitleFromUrlPath = (
   return getPanelTitle(hass, panel);
 };
 
+/**
+ * Get subpage title for config panel routes.
+ * Returns the specific subpage title (e.g., "Automations") if found,
+ * or undefined to fall back to the panel title (e.g., "Settings").
+ *
+ * @param hass HomeAssistant instance
+ * @param path Full route path (e.g., "/config/automation/dashboard")
+ * @param configSections Config sections metadata for resolving subpage titles
+ * @returns Localized subpage title, or undefined if not found
+ */
+export const getConfigSubpageTitle = (
+  hass: HomeAssistant,
+  path: string,
+  configSections: Record<string, PageNavigation[]>
+): string | undefined => {
+  // Search through all config section groups for a matching path
+  for (const sectionGroup of Object.values(configSections)) {
+    const pageNav = sectionGroup.find((nav) => path.startsWith(nav.path));
+    if (pageNav) {
+      if (pageNav.translationKey) {
+        const localized = hass.localize(pageNav.translationKey as any);
+        if (localized) {
+          return localized;
+        }
+        if (pageNav.name) {
+          return pageNav.name;
+        }
+      } else if (pageNav.name) {
+        return pageNav.name;
+      }
+    }
+  }
+  return undefined;
+};
+
 export const getPanelIcon = (panel: PanelInfo): string | undefined => {
   if (!panel.icon) {
     switch (panel.component_name) {

src/data/selector.ts

@@ -377,7 +377,7 @@ interface SelectBoxOptionImage {
 }
 
 export interface SelectOption {
-  value: any;
+  value: string;
   label: string;
   description?: string;
   image?: string | SelectBoxOptionImage;

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -58,6 +58,7 @@ import { fullEntitiesContext } from "../../../../data/context";
 import type { EntityRegistryEntry } from "../../../../data/entity/entity_registry";
 import type {
   Action,
+  DeviceAction,
   NonConditionAction,
   RepeatAction,
   ServiceAction,
@@ -233,6 +234,13 @@ export default class HaAutomationActionRow extends LitElement {
   private _renderRow() {
     const type = getAutomationActionType(this.action);
 
+    const target =
+      type === "service" && "target" in this.action
+        ? (this.action as ServiceAction).target
+        : type === "device_id" && (this.action as DeviceAction).device_id
+          ? { device_id: (this.action as DeviceAction).device_id }
+          : undefined;
+
     return html`
       ${type === "service" && "action" in this.action && this.action.action
         ? html`
@@ -254,9 +262,7 @@ export default class HaAutomationActionRow extends LitElement {
         ${capitalizeFirstLetter(
           describeAction(this.hass, this._entityReg, this.action)
         )}
-        ${type === "service" && "target" in this.action
-          ? this._renderTargets((this.action as ServiceAction).target)
-          : nothing}
+        ${target ? this._renderTargets(target) : nothing}
       </h3>
 
       <slot name="icons" slot="icons"></slot>

src/panels/config/automation/add-automation-element/ha-automation-add-from-target.ts

@@ -1504,14 +1504,7 @@ export default class HaAutomationAddFromTarget extends LitElement {
       box-shadow: inset var(--ha-shadow-offset-x-lg)
         calc(var(--ha-shadow-offset-y-lg) * -1) var(--ha-shadow-blur-lg)
         var(--ha-shadow-spread-lg) var(--ha-color-shadow-light);
-    }
-
-    @media (prefers-color-scheme: dark) {
-      .targets-show-more {
-        box-shadow: inset var(--ha-shadow-offset-x-lg)
-          calc(var(--ha-shadow-offset-y-lg) * -1) var(--ha-shadow-blur-lg)
-          var(--ha-shadow-spread-lg) var(--ha-color-shadow-dark);
-      }
+      z-index: 2;
     }
 
     @media all and (max-width: 870px), all and (max-height: 500px) {

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -76,6 +76,7 @@ import "./types/ha-automation-condition-template";
 import "./types/ha-automation-condition-time";
 import "./types/ha-automation-condition-trigger";
 import "./types/ha-automation-condition-zone";
+import type { DeviceCondition } from "../../../../data/device/device_automation";
 
 export interface ConditionElement extends LitElement {
   condition: Condition;
@@ -184,6 +185,14 @@ export default class HaAutomationConditionRow extends LitElement {
   }
 
   private _renderRow() {
+    const target =
+      "target" in (this.conditionDescriptions[this.condition.condition] || {})
+        ? (this.condition as PlatformCondition).target
+        : "device_id" in this.condition &&
+            (this.condition as DeviceCondition).device_id
+          ? { device_id: [(this.condition as DeviceCondition).device_id] }
+          : undefined;
+
     return html`
       <ha-condition-icon
         slot="leading-icon"
@@ -194,10 +203,7 @@ export default class HaAutomationConditionRow extends LitElement {
         ${capitalizeFirstLetter(
           describeCondition(this.condition, this.hass, this._entityReg)
         )}
-        ${"target" in
-        (this.conditionDescriptions[this.condition.condition] || {})
-          ? this._renderTargets((this.condition as PlatformCondition).target)
-          : nothing}
+        ${target ? this._renderTargets(target) : nothing}
       </h3>
 
       <slot name="icons" slot="icons"></slot>

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

@@ -381,12 +381,12 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
         },
         voice_assistants: {
           title: localize(
-            "ui.panel.config.automation.picker.headers.voice_assistants"
+            "ui.panel.config.voice_assistants.expose.headers.assistants"
           ),
-          type: "icon",
+          type: "flex",
           defaultHidden: true,
-          minWidth: "100px",
-          maxWidth: "100px",
+          minWidth: "160px",
+          maxWidth: "160px",
           template: (automation) => {
             const exposedToVoiceAssistantIds = getEntityVoiceAssistantsIds(
               this._entityReg,

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -56,6 +56,7 @@ import { isTrigger, subscribeTrigger } from "../../../../data/automation";
 import { describeTrigger } from "../../../../data/automation_i18n";
 import { validateConfig } from "../../../../data/config";
 import { fullEntitiesContext } from "../../../../data/context";
+import type { DeviceTrigger } from "../../../../data/device/device_automation";
 import type { EntityRegistryEntry } from "../../../../data/entity/entity_registry";
 import type { TriggerDescriptions } from "../../../../data/trigger";
 import { isTriggerList } from "../../../../data/trigger";
@@ -196,6 +197,15 @@ export default class HaAutomationTriggerRow extends LitElement {
 
     const yamlMode = this._yamlMode || !supported;
 
+    const target =
+      type === "platform" &&
+      "target" in
+        this.triggerDescriptions[(this.trigger as PlatformTrigger).trigger]
+        ? (this.trigger as PlatformTrigger).target
+        : type === "device" && (this.trigger as DeviceTrigger).device_id
+          ? { device_id: (this.trigger as DeviceTrigger).device_id }
+          : undefined;
+
     return html`
       ${type === "list"
         ? html`<ha-svg-icon
@@ -210,11 +220,7 @@ export default class HaAutomationTriggerRow extends LitElement {
           ></ha-trigger-icon>`}
       <h3 slot="header">
         ${describeTrigger(this.trigger, this.hass, this._entityReg)}
-        ${type === "platform" &&
-        "target" in
-          this.triggerDescriptions[(this.trigger as PlatformTrigger).trigger]
-          ? this._renderTargets((this.trigger as PlatformTrigger).target)
-          : nothing}
+        ${target ? this._renderTargets(target) : nothing}
       </h3>
 
       <slot name="icons" slot="icons"></slot>

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

@@ -20,7 +20,6 @@ import type { HomeAssistant, ValueChangedEvent } from "../../../types";
 import { showCategoryRegistryDetailDialog } from "./show-dialog-category-registry-detail";
 
 const ADD_NEW_ID = "___ADD_NEW___";
-const NO_CATEGORIES_ID = "___NO_CATEGORIES___";
 
 @customElement("ha-category-picker")
 export class HaCategoryPicker extends SubscribeMixin(LitElement) {
@@ -101,17 +100,11 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
   );
 
   private _getCategories = memoizeOne(
-    (categories: CategoryRegistryEntry[] | undefined): PickerComboBoxItem[] => {
-      if (!categories || categories.length === 0) {
-        return [
-          {
-            id: NO_CATEGORIES_ID,
-            primary: this.hass.localize(
-              "ui.components.category-picker.no_categories"
-            ),
-            icon_path: mdiTag,
-          },
-        ];
+    (
+      categories: CategoryRegistryEntry[] | undefined
+    ): PickerComboBoxItem[] | undefined => {
+      if (!categories) {
+        return undefined;
       }
 
       const items = categories.map<PickerComboBoxItem>((category) => ({
@@ -210,10 +203,6 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
 
     const value = ev.detail.value;
 
-    if (value === NO_CATEGORIES_ID) {
-      return;
-    }
-
     if (!value) {
       this._setValue(undefined);
       return;

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

@@ -498,12 +498,12 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
       },
       voice_assistants: {
         title: localize(
-          "ui.panel.config.entities.picker.headers.voice_assistants"
+          "ui.panel.config.voice_assistants.expose.headers.assistants"
         ),
-        type: "icon",
+        type: "flex",
         defaultHidden: true,
-        minWidth: "100px",
-        maxWidth: "100px",
+        minWidth: "160px",
+        maxWidth: "160px",
         template: (entry) => {
           const exposedToVoiceAssistantIds = getEntityVoiceAssistantsIds(
             this._entities,

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

@@ -487,12 +487,12 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
       },
       voice_assistants: {
         title: localize(
-          "ui.panel.config.helpers.picker.headers.voice_assistants"
+          "ui.panel.config.voice_assistants.expose.headers.assistants"
         ),
-        type: "icon",
+        type: "flex",
         defaultHidden: true,
-        minWidth: "100px",
-        maxWidth: "100px",
+        minWidth: "160px",
+        maxWidth: "160px",
         template: (helper) => {
           const exposedToVoiceAssistantIds = getEntityVoiceAssistantsIds(
             this._entityReg,

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

@@ -415,12 +415,12 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
         },
         voice_assistants: {
           title: localize(
-            "ui.panel.config.scene.picker.headers.voice_assistants"
+            "ui.panel.config.voice_assistants.expose.headers.assistants"
           ),
-          type: "icon",
+          type: "flex",
           defaultHidden: true,
-          minWidth: "100px",
-          maxWidth: "100px",
+          minWidth: "160px",
+          maxWidth: "160px",
           template: (scene) => {
             const exposedToVoiceAssistantIds = getEntityVoiceAssistantsIds(
               this._entityReg,
@@ -1189,13 +1189,19 @@ ${rejected
   private async _duplicate(scene) {
     if (scene.attributes.id) {
       const config = await getSceneConfig(this.hass, scene.attributes.id);
-      showSceneEditor({
-        ...config,
-        id: undefined,
-        name: `${config?.name} (${this.hass.localize(
-          "ui.panel.config.scene.picker.duplicate"
-        )})`,
-      });
+      const entityRegEntry = this._entityReg.find(
+        (reg) => reg.entity_id === scene.entity_id
+      );
+      showSceneEditor(
+        {
+          ...config,
+          id: undefined,
+          name: `${config?.name} (${this.hass.localize(
+            "ui.panel.config.scene.picker.duplicate"
+          )})`,
+        },
+        entityRegEntry?.area_id || undefined
+      );
     }
   }
 

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

@@ -403,12 +403,12 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
         },
         voice_assistants: {
           title: localize(
-            "ui.panel.config.script.picker.headers.voice_assistants"
+            "ui.panel.config.voice_assistants.expose.headers.assistants"
           ),
-          type: "icon",
+          type: "flex",
           defaultHidden: true,
-          minWidth: "100px",
-          maxWidth: "100px",
+          minWidth: "160px",
+          maxWidth: "160px",
           template: (script) => {
             const exposedToVoiceAssistantIds = getEntityVoiceAssistantsIds(
               this._entityReg,

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

@@ -73,13 +73,18 @@ export class HuiCard extends ConditionalListenerMixin<LovelaceCardConfig>(
     };
 
     // If the element has fixed rows or columns, we use the values from the element
+    // unless the user has already configured their own
     if (elementOptions.fixed_rows) {
-      mergedConfig.rows = elementOptions.rows;
+      if (configOptions.rows === undefined) {
+        mergedConfig.rows = elementOptions.rows;
+      }
       delete mergedConfig.min_rows;
       delete mergedConfig.max_rows;
     }
     if (elementOptions.fixed_columns) {
-      mergedConfig.columns = elementOptions.columns;
+      if (configOptions.columns === undefined) {
+        mergedConfig.columns = elementOptions.columns;
+      }
       delete mergedConfig.min_columns;
       delete mergedConfig.max_columns;
     }

src/panels/lovelace/cards/hui-picture-elements-card.ts

@@ -11,7 +11,10 @@ import { findEntities } from "../common/find-entities";
 import type { LovelaceElement, LovelaceElementConfig } from "../elements/types";
 import type { LovelaceCard, LovelaceCardEditor } from "../types";
 import { createStyledHuiElement } from "./picture-elements/create-styled-hui-element";
-import type { PictureElementsCardConfig } from "./types";
+import {
+  PREVIEW_CLICK_CALLBACK,
+  type PictureElementsCardConfig,
+} from "./types";
 import type { PersonEntity } from "../../../data/person";
 
 @customElement("hui-picture-elements-card")
@@ -166,6 +169,7 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
             .aspectRatio=${this._config.aspect_ratio}
             .darkModeFilter=${this._config.dark_mode_filter}
             .darkModeImage=${darkModeImage}
+            @click=${this._handleImageClick}
           ></hui-image>
           ${this._elements}
         </div>
@@ -221,6 +225,19 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
       curCardEl === elToReplace ? newCardEl : curCardEl
     );
   }
+
+  private _handleImageClick(ev: MouseEvent): void {
+    if (!this.preview || !this._config?.[PREVIEW_CLICK_CALLBACK]) {
+      return;
+    }
+
+    const rect = (ev.currentTarget as HTMLElement).getBoundingClientRect();
+    const x = ((ev.clientX - rect.left) / rect.width) * 100;
+    const y = ((ev.clientY - rect.top) / rect.height) * 100;
+
+    // only the edited card has this callback
+    this._config[PREVIEW_CLICK_CALLBACK](x, y);
+  }
 }
 
 declare global {

src/panels/lovelace/cards/types.ts

@@ -487,6 +487,10 @@ export interface PictureCardConfig extends LovelaceCardConfig {
   alt_text?: string;
 }
 
+// Symbol for preview click callback - preserved through spreads, not serialized
+// This allows the editor to attach a callback that only exists on the edited card's config
+export const PREVIEW_CLICK_CALLBACK = Symbol("previewClickCallback");
+
 export interface PictureElementsCardConfig extends LovelaceCardConfig {
   title?: string;
   image?: string | MediaSelectorValue;
@@ -501,6 +505,7 @@ export interface PictureElementsCardConfig extends LovelaceCardConfig {
   theme?: string;
   dark_mode_image?: string | MediaSelectorValue;
   dark_mode_filter?: string;
+  [PREVIEW_CLICK_CALLBACK]?: (x: number, y: number) => void;
 }
 
 export interface PictureEntityCardConfig extends LovelaceCardConfig {

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

@@ -15,12 +15,16 @@ import {
 } from "superstruct";
 import type { HASSDomEvent } from "../../../../common/dom/fire_event";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-alert";
 import "../../../../components/ha-card";
 import "../../../../components/ha-form/ha-form";
 import "../../../../components/ha-icon";
 import "../../../../components/ha-switch";
 import type { HomeAssistant } from "../../../../types";
-import type { PictureElementsCardConfig } from "../../cards/types";
+import {
+  PREVIEW_CLICK_CALLBACK,
+  type PictureElementsCardConfig,
+} from "../../cards/types";
 import type { LovelaceCardEditor } from "../../types";
 import "../hui-sub-element-editor";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
@@ -28,7 +32,6 @@ import type { EditDetailElementEvent, SubElementEditorConfig } from "../types";
 import { configElementStyle } from "./config-elements-style";
 import "../hui-picture-elements-card-row-editor";
 import type { LovelaceElementConfig } from "../../elements/types";
-import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
 
 const genericElementConfigStruct = type({
@@ -66,6 +69,44 @@ export class HuiPictureElementsCardEditor
     this._config = config;
   }
 
+  private _onPreviewClick = (x: number, y: number): void => {
+    if (this._subElementEditorConfig?.type === "element") {
+      this._handlePositionClick(x, y);
+    }
+  };
+
+  private _handlePositionClick(x: number, y: number): void {
+    if (
+      !this._subElementEditorConfig?.elementConfig ||
+      this._subElementEditorConfig.type !== "element" ||
+      this._subElementEditorConfig.elementConfig.type === "conditional"
+    ) {
+      return;
+    }
+
+    const elementConfig = this._subElementEditorConfig
+      .elementConfig as LovelaceElementConfig;
+    const currentPosition = (elementConfig.style as Record<string, string>)
+      ?.position;
+    if (currentPosition && currentPosition !== "absolute") {
+      return;
+    }
+
+    const newElement = {
+      ...elementConfig,
+      style: {
+        ...((elementConfig.style as Record<string, string>) || {}),
+        left: `${Math.round(x)}%`,
+        top: `${Math.round(y)}%`,
+      },
+    };
+
+    const updateEvent = new CustomEvent("config-changed", {
+      detail: { config: newElement },
+    });
+    this._handleSubElementChanged(updateEvent);
+  }
+
   private _schema = memoizeOne(
     (localize: LocalizeFunc) =>
       [
@@ -138,6 +179,16 @@ export class HuiPictureElementsCardEditor
 
     if (this._subElementEditorConfig) {
       return html`
+        ${this._subElementEditorConfig.type === "element" &&
+        this._subElementEditorConfig.elementConfig?.type !== "conditional"
+          ? html`
+              <ha-alert alert-type="info">
+                ${this.hass.localize(
+                  "ui.panel.lovelace.editor.card.picture-elements.position_hint"
+                )}
+              </ha-alert>
+            `
+          : nothing}
         <hui-sub-element-editor
           .hass=${this.hass}
           .config=${this._subElementEditorConfig}
@@ -181,6 +232,7 @@ export class HuiPictureElementsCardEditor
       return;
     }
 
+    // no need to attach the preview click callback here, no element is being edited
     fireEvent(this, "config-changed", { config: ev.detail.value });
   }
 
@@ -191,7 +243,8 @@ export class HuiPictureElementsCardEditor
     const config = {
       ...this._config,
       elements: ev.detail.elements as LovelaceElementConfig[],
-    } as LovelaceCardConfig;
+      [PREVIEW_CLICK_CALLBACK]: this._onPreviewClick,
+    } as PictureElementsCardConfig;
 
     fireEvent(this, "config-changed", { config });
 
@@ -232,7 +285,12 @@ export class HuiPictureElementsCardEditor
       elementConfig: value,
     };
 
-    fireEvent(this, "config-changed", { config: this._config });
+    fireEvent(this, "config-changed", {
+      config: {
+        ...this._config,
+        [PREVIEW_CLICK_CALLBACK]: this._onPreviewClick,
+      },
+    });
   }
 
   private _editDetailElement(ev: HASSDomEvent<EditDetailElementEvent>): void {

src/panels/lovelace/editor/get-element-stub-config.ts

@@ -10,7 +10,9 @@ export const getElementStubConfig = async (
 ): Promise<LovelaceElementConfig> => {
   let elementConfig: LovelaceElementConfig = { type };
 
-  if (type !== "conditional") {
+  if (type === "conditional") {
+    elementConfig = { type, conditions: [], elements: [] };
+  } else {
     elementConfig.style = { left: "50%", top: "50%" };
   }
 

src/panels/lovelace/editor/hui-element-editor.ts

@@ -89,7 +89,11 @@ export abstract class HuiElementEditor<
   }
 
   public set value(config: T | undefined) {
-    if (this._config && deepEqual(config, this._config)) {
+    // Compare symbols to detect callback changes (e.g., preview click handlers)
+    if (
+      this._config &&
+      deepEqual(config, this._config, { compareSymbols: true })
+    ) {
       return;
     }
     this._config = config;

src/resources/codemirror.ts

@@ -15,7 +15,11 @@ import { tags } from "@lezer/highlight";
 export { autocompletion } from "@codemirror/autocomplete";
 export { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
 export { highlightingFor, foldGutter } from "@codemirror/language";
-export { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
+export {
+  highlightSelectionMatches,
+  search,
+  searchKeymap,
+} from "@codemirror/search";
 export { EditorState } from "@codemirror/state";
 export {
   crosshairCursor,

src/resources/theme/color/semantic.globals.ts

@@ -15,27 +15,27 @@ export const semanticColorStyles = css`
     --ha-color-text-disabled: var(--ha-color-neutral-60);
     --ha-color-text-link: var(--ha-color-primary-40);
     /* border primary */
-    --ha-color-border-primary-quiet: var(--ha-color-primary-80);
+    --ha-color-border-primary-quiet: var(--ha-color-primary-90);
     --ha-color-border-primary-normal: var(--ha-color-primary-70);
     --ha-color-border-primary-loud: var(--ha-color-primary-40);
 
     /* border neutral */
-    --ha-color-border-neutral-quiet: var(--ha-color-neutral-80);
+    --ha-color-border-neutral-quiet: var(--ha-color-neutral-90);
     --ha-color-border-neutral-normal: var(--ha-color-neutral-60);
     --ha-color-border-neutral-loud: var(--ha-color-neutral-40);
 
     /* border danger */
-    --ha-color-border-danger-quiet: var(--ha-color-red-80);
+    --ha-color-border-danger-quiet: var(--ha-color-red-90);
     --ha-color-border-danger-normal: var(--ha-color-red-70);
     --ha-color-border-danger-loud: var(--ha-color-red-40);
 
     /* border warning */
-    --ha-color-border-warning-quiet: var(--ha-color-orange-80);
+    --ha-color-border-warning-quiet: var(--ha-color-orange-90);
     --ha-color-border-warning-normal: var(--ha-color-orange-70);
     --ha-color-border-warning-loud: var(--ha-color-orange-40);
 
     /* border success */
-    --ha-color-border-success-quiet: var(--ha-color-green-80);
+    --ha-color-border-success-quiet: var(--ha-color-green-90);
     --ha-color-border-success-normal: var(--ha-color-green-70);
     --ha-color-border-success-loud: var(--ha-color-green-40);
 

src/state/panel-title-mixin.ts

@@ -1,30 +1,55 @@
-import { getPanelTitleFromUrlPath } from "../data/panel";
+import type { PropertyValues } from "lit";
+import { getConfigSubpageTitle, getPanelTitleFromUrlPath } from "../data/panel";
+import { configSections } from "../panels/config/ha-panel-config";
 import type { Constructor, HomeAssistant } from "../types";
 import type { HassBaseEl } from "./hass-base-mixin";
 
-const setTitle = (title: string | undefined) => {
+export const setPageTitle = (title: string | undefined) => {
   document.title = title ? `${title} – Home Assistant` : "Home Assistant";
 };
 
+const getRoutePath = (): string =>
+  // In demo mode, use hash; otherwise use pathname
+  __DEMO__ ? window.location.hash.substring(1) : window.location.pathname;
+
 export const panelTitleMixin = <T extends Constructor<HassBaseEl>>(
   superClass: T
 ) =>
   class extends superClass {
-    protected updated(changedProps) {
+    private _previousPath?: string;
+
+    protected updated(changedProps: PropertyValues): void {
       super.updated(changedProps);
       if (!changedProps.has("hass") || !this.hass) {
         return;
       }
 
       const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+      const currentPath = getRoutePath();
 
+      // Update title when panel, localize, or route path changes
       if (
         !oldHass ||
         oldHass.panels !== this.hass.panels ||
         oldHass.panelUrl !== this.hass.panelUrl ||
-        oldHass.localize !== this.hass.localize
+        oldHass.localize !== this.hass.localize ||
+        this._previousPath !== currentPath
       ) {
-        setTitle(getPanelTitleFromUrlPath(this.hass, this.hass.panelUrl));
+        this._previousPath = currentPath;
+
+        let title: string | undefined;
+
+        // Try to get specific subpage title for config panel
+        if (this.hass.panelUrl === "config") {
+          title = getConfigSubpageTitle(this.hass, currentPath, configSections);
+        }
+
+        // Fall back to panel title
+        if (!title) {
+          title = getPanelTitleFromUrlPath(this.hass, this.hass.panelUrl);
+        }
+
+        setPageTitle(title);
       }
     }
   };

src/translations/en.json

@@ -3341,8 +3341,7 @@
               "type": "Type",
               "editable": "Editable",
               "category": "Category",
-              "area": "Area",
-              "voice_assistants": "Voice assistants"
+              "area": "Area"
             },
             "create_helper": "Create helper",
             "no_helpers": "Looks like you don't have any helpers yet!",
@@ -8326,6 +8325,7 @@
               "dark_mode_image": "Dark mode image path",
               "state_filter": "State filter",
               "dark_mode_filter": "Dark mode state filter",
+              "position_hint": "Click on the image preview to position this element",
               "element_types": {
                 "state-badge": "State badge",
                 "state-icon": "State icon",