Bubble a lone person or device in a zone

A zone group only bubbled with more than one member, so a single person or
device in a zone showed as a plain marker instead of a bubble at the zone.
Keyed (zone) groups now bubble even with one member, pinned to the zone with a
tail; a lone marker that is not in a zone still shows plainly.

src/common/map/engines/maplibre-map-engine.ts

@@ -123,8 +123,6 @@ interface ManagedMarker {
   draggable?: boolean;
   onDragEnd?: (location: MapLatLng) => void;
   dragging?: boolean;
-  /** Pre-drag location; the next update echoing it is ignored (see setLocation) */
-  staleLocation?: MapLatLng;
   mlMarker?: MapLibreMarker;
   decoration?: MapItemHandle;
   removed?: boolean;
@@ -133,6 +131,8 @@ interface ManagedMarker {
 interface ClusterGroup {
   /** Members are shown in a bubble at their spot instead of an icon */
   open?: boolean;
+  /** Grouped by key (a zone), so it bubbles even with a single member */
+  keyed?: boolean;
   members: ManagedMarker[];
   center: MapLatLng;
   iconMarker?: MapLibreMarker;
@@ -600,19 +600,10 @@ export class MapLibreMapEngine implements MapEngine {
       },
       clusterData: options.clusterData,
       setLocation: (newLocation) => {
+        // The user's hand wins while dragging; the host is the truth otherwise
         if (managed.dragging) {
           return;
         }
-        // Skip one update echoing the pre-drag location (the save has not returned yet)
-        const stale = managed.staleLocation;
-        managed.staleLocation = undefined;
-        if (
-          stale &&
-          newLocation[0] === stale[0] &&
-          newLocation[1] === stale[1]
-        ) {
-          return;
-        }
         managed.location = newLocation;
         managed.mlMarker?.setLngLat([newLocation[1], newLocation[0]]);
       },
@@ -663,7 +654,6 @@ export class MapLibreMapEngine implements MapEngine {
       if (managed.draggable) {
         managed.mlMarker.on("dragstart", () => {
           managed.dragging = true;
-          managed.staleLocation = managed.location;
         });
         managed.mlMarker.on("dragend", () => {
           managed.dragging = false;
@@ -801,10 +791,8 @@ export class MapLibreMapEngine implements MapEngine {
       resizeHandle?.setAttribute("aria-valuetext", radiusText);
     };
 
-    // Skip one update echoing the pre-edit values (the save has not returned yet)
+    // The user's hand wins while dragging; the host is the truth otherwise
     let dragging = false;
-    let staleCenter: MapLatLng | undefined;
-    let staleRadius: number | undefined;
 
     if (options.resizable) {
       const east = pointEastOf(center, options.radius);
@@ -847,8 +835,6 @@ export class MapLibreMapEngine implements MapEngine {
         if (keyboardRadius === undefined) {
           // Host updates treat a key resize like a drag
           dragging = true;
-          staleCenter = currentCenter;
-          staleRadius = currentRadius;
         }
         currentRadius = Math.max(
           1,
@@ -875,19 +861,11 @@ export class MapLibreMapEngine implements MapEngine {
     [centerMarker, resizeMarker].forEach((handleMarker) => {
       handleMarker?.on("dragstart", () => {
         dragging = true;
-        staleCenter = currentCenter;
-        staleRadius = currentRadius;
       });
       handleMarker?.on("dragend", () => {
         dragging = false;
       });
     });
-    const isStale = (candidateCenter: MapLatLng, candidateRadius: number) =>
-      staleCenter !== undefined &&
-      staleRadius !== undefined &&
-      candidateCenter[0] === staleCenter[0] &&
-      candidateCenter[1] === staleCenter[1] &&
-      candidateRadius === staleRadius;
 
     if (options.moveable) {
       centerMarker.on("drag", () => {
@@ -944,12 +922,6 @@ export class MapLibreMapEngine implements MapEngine {
         if (dragging) {
           return;
         }
-        const stale = isStale(newCenter, newRadius);
-        staleCenter = undefined;
-        staleRadius = undefined;
-        if (stale) {
-          return;
-        }
         currentCenter = newCenter;
         currentRadius = newRadius;
         centerMarker.setLngLat([newCenter[1], newCenter[0]]);
@@ -1219,13 +1191,16 @@ export class MapLibreMapEngine implements MapEngine {
     const clusterable = this._markers.filter(
       (managed) => managed.options.cluster && !managed.removed
     );
-    // A member that had focus hands it to the icon replacing it; read before
-    // the open bubble holding it is removed
+    // A member or bubble that had focus hands it to the icon replacing it;
+    // read before the bubble holding it is removed
     const active = (
       this._map.getContainer().getRootNode() as Document | ShadowRoot
     ).activeElement;
     const focusedMember = active
-      ? clusterable.find((managed) => managed.element.contains(active))
+      ? (clusterable.find((managed) => managed.element.contains(active)) ??
+        this._clusterGroups.find((group) =>
+          group.iconMarker?.getElement().contains(active)
+        )?.members[0])
       : undefined;
     this._clusterGroups.forEach((group) => group.iconMarker?.remove());
 
@@ -1250,6 +1225,7 @@ export class MapLibreMapEngine implements MapEngine {
       const groups: {
         seed: { x: number; y: number };
         members: ManagedMarker[];
+        keyed?: boolean;
       }[] = [];
 
       // Keyed groups first; one spread too wide falls through to proximity
@@ -1272,8 +1248,10 @@ export class MapLibreMapEngine implements MapEngine {
             Math.max(...xs) - Math.min(...xs),
             Math.max(...ys) - Math.min(...ys)
           );
-          if (members.length > 1 && spread <= (groupRadius ?? radius)) {
-            groups.push({ seed: points[0], members });
+          // A keyed group (a zone) bubbles even with a single member, so a lone
+          // person or device in a zone still shows in a bubble pinned to it.
+          if (members.length === 1 || spread <= (groupRadius ?? radius)) {
+            groups.push({ seed: points[0], members, keyed: true });
           } else {
             ungrouped.push(...members);
           }
@@ -1299,6 +1277,7 @@ export class MapLibreMapEngine implements MapEngine {
       }
       this._clusterGroups = groups.map((group) => ({
         members: group.members,
+        keyed: group.keyed,
         center: [
           group.members.reduce((sum, m) => sum + m.location[0], 0) /
             group.members.length,
@@ -1310,7 +1289,9 @@ export class MapLibreMapEngine implements MapEngine {
 
     for (const group of this._clusterGroups) {
       group.iconMarker = undefined;
-      if (group.members.length === 1) {
+      // A lone non-keyed marker shows plainly; a lone zone occupant falls
+      // through to the bubble path so it renders in a bubble at its zone.
+      if (group.members.length === 1 && !group.keyed) {
         this._showMarker(group.members[0]);
         continue;
       }
@@ -1379,8 +1360,10 @@ export class MapLibreMapEngine implements MapEngine {
       const group = this._clusterGroups.find((candidate) =>
         candidate.members.includes(focusedMember)
       );
-      if (group?.iconMarker && !group.open) {
-        group.iconMarker.getElement().focus();
+      if (group && !group.open) {
+        // A singleton group has no bubble icon; the member shows on its own,
+        // so send focus back to that member rather than to the document.
+        (group.iconMarker?.getElement() ?? focusedMember.element).focus();
       }
     }
   }

src/common/map/entity-map-colors.ts

@@ -0,0 +1,73 @@
+import memoizeOne from "memoize-one";
+import { getColorByIndex } from "../color/colors";
+import { computeDomain } from "../entity/compute_domain";
+import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
+
+/**
+ * Map colors for entities, by registry creation order, so an entity has the
+ * same color on every map. The registry comes from the fullEntitiesContext;
+ * entities without an entry (e.g. YAML zones) get a color derived from their
+ * id.
+ */
+
+export const HOME_ZONE_ENTITY_ID = "zone.home";
+
+/** Domains whose entities are colored by creation order */
+const ORDERED_DOMAINS = ["zone", "person", "device_tracker"];
+
+// One index per registry update, shared by every map on the page. Zones,
+// persons and trackers share one sequence, so a person never has the color
+// of the zone it is in.
+const creationIndex = memoizeOne(
+  (entries: EntityRegistryEntry[]): Record<string, number> => {
+    const index: Record<string, number> = {};
+    entries
+      .filter(
+        (entry) =>
+          ORDERED_DOMAINS.includes(computeDomain(entry.entity_id)) &&
+          // The home zone has a fixed color and does not take a palette slot
+          entry.entity_id !== HOME_ZONE_ENTITY_ID
+      )
+      .sort((a, b) => a.created_at - b.created_at || a.id.localeCompare(b.id))
+      .forEach((entry, i) => {
+        index[entry.entity_id] = i;
+      });
+    return index;
+  }
+);
+
+// For entities without a registry entry
+const hashIndex = (entityId: string): number => {
+  let hash = 5381;
+  for (let i = 0; i < entityId.length; i++) {
+    hash = (hash * 33 + entityId.charCodeAt(i)) % 2147483647;
+  }
+  return hash;
+};
+
+/** The palette color of an entity on a map */
+export const entityMapColor = (
+  entityId: string,
+  entries: EntityRegistryEntry[],
+  computedStyles: CSSStyleDeclaration
+): string =>
+  getColorByIndex(
+    creationIndex(entries)[entityId] ?? hashIndex(entityId),
+    computedStyles
+  );
+
+/** A zone's color: primary for home, muted for passive, its entity map color otherwise */
+export const zoneColor = (
+  entityId: string,
+  passive: boolean,
+  entries: EntityRegistryEntry[],
+  computedStyles: CSSStyleDeclaration
+): string => {
+  if (entityId === HOME_ZONE_ENTITY_ID) {
+    return computedStyles.getPropertyValue("--primary-color");
+  }
+  if (passive) {
+    return computedStyles.getPropertyValue("--secondary-text-color");
+  }
+  return entityMapColor(entityId, entries, computedStyles);
+};

src/common/map/marker-accessibility.ts

@@ -16,7 +16,11 @@ export const setMarkerAccessibility = (
 ): void => {
   clearMarkerAccessibility(element);
   const owned: string[] = [];
-  if (title && !element.hasAttribute("aria-label")) {
+  if (
+    title &&
+    !element.hasAttribute("aria-label") &&
+    !element.hasAttribute("aria-labelledby")
+  ) {
     element.setAttribute("aria-label", title);
     owned.push("aria-label");
   }

src/common/map/zone-marker.ts

@@ -0,0 +1,67 @@
+import { getContrastedColorHex } from "../color/rgb";
+
+/** The zone marker: a colored circle with the zone's icon or initials, shared by the map and the zone editor */
+
+export const ZONE_CIRCLE_SIZE = 36;
+
+// Content color contrasting the fill; not every theme color parses
+export const contrastingZoneContent = (color: string): string => {
+  try {
+    return getContrastedColorHex(color.trim());
+  } catch {
+    return "#ffffff";
+  }
+};
+
+export const zoneInitials = (name: string): string =>
+  name
+    .split(" ")
+    .map((part) => part[0])
+    .join("")
+    .slice(0, 2);
+
+export const createZoneMarkerElement = (options: {
+  color: string;
+  icon?: string;
+  /** Path for an ha-svg-icon, when there is no icon name */
+  iconPath?: string;
+  name: string;
+}): HTMLElement => {
+  const element = document.createElement("div");
+  element.className = "zone-circle";
+  element.style.backgroundColor = options.color;
+  element.style.color = contrastingZoneContent(options.color);
+  if (options.icon) {
+    const icon = document.createElement("ha-icon");
+    icon.setAttribute("icon", options.icon);
+    element.appendChild(icon);
+  } else if (options.iconPath) {
+    const icon = document.createElement("ha-svg-icon");
+    icon.setAttribute("path", options.iconPath);
+    element.appendChild(icon);
+  } else {
+    const initials = document.createElement("span");
+    initials.textContent = zoneInitials(options.name);
+    element.appendChild(initials);
+  }
+  return element;
+};
+
+/** Styles for the zone marker, included by ha-map */
+export const zoneMarkerStyles = `
+  .zone-circle {
+    width: ${ZONE_CIRCLE_SIZE}px;
+    height: ${ZONE_CIRCLE_SIZE}px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid var(--card-background-color, #fff);
+    box-sizing: border-box;
+    box-shadow: var(--ha-box-shadow-s);
+    overflow: hidden;
+    font-size: var(--ha-font-size-s);
+    font-weight: var(--ha-font-weight-medium);
+    --mdc-icon-size: ${ZONE_CIRCLE_SIZE / 2}px;
+  }
+`;

src/components/map/ha-entity-marker.ts

@@ -24,11 +24,13 @@ class HaEntityMarker extends LitElement {
 
   @property({ attribute: "show-icon", type: Boolean }) public showIcon = false;
 
+  @property({ type: Boolean, reflect: true }) public selected = false;
+
   protected render() {
     return html`
       <div
         class="marker ${this.entityPicture ? "picture" : ""}"
-        style=${styleMap({ "border-color": this.entityColor })}
+        style=${styleMap({ "--ha-marker-selected-color": this.entityColor })}
         @click=${this._badgeTap}
       >
         ${
@@ -94,13 +96,22 @@ class HaEntityMarker extends LitElement {
       height: var(--ha-marker-size, 48px);
       font-size: var(--ha-marker-font-size, var(--ha-font-size-xl));
       border-radius: var(--ha-marker-border-radius, 50%);
-      border: 1px solid var(--ha-marker-color, var(--primary-color));
+      border: var(--ha-marker-border-width, 3px) solid
+        var(--ha-marker-color, var(--card-background-color, #fff));
+      box-shadow: var(--ha-marker-shadow, var(--ha-box-shadow-s));
       color: var(--primary-text-color);
-      background-color: var(--card-background-color);
+      background-color: var(
+        --ha-marker-background,
+        var(--card-background-color)
+      );
     }
     .marker.picture {
       overflow: hidden;
     }
+    /* A ring in the entity color outside the frame marks the selected marker */
+    :host([selected]) .marker {
+      outline: 3px solid var(--ha-marker-selected-color, var(--primary-color));
+    }
     .entity-picture {
       background-size: cover;
       height: 100%;

src/components/map/ha-locations-editor.ts

@@ -1,14 +1,17 @@
+import type { ContextType } from "@lit/context";
 import { consume } from "@lit/context";
 import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { transform } from "../../common/decorators/transform";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { HASSDomEvent } from "../../common/dom/fire_event";
 import { MAP_MAX_ZOOM } from "../../common/map/base-layer";
 import type { MapLatLng } from "../../common/map/map-engine";
 import { circleBoundsPoints } from "../../common/map/map-engine";
-import { internationalizationContext } from "../../data/context";
+import { internationalizationContext, uiContext } from "../../data/context";
+import type { Themes } from "../../data/ws-themes";
 import type { HomeAssistantInternationalization, ThemeMode } from "../../types";
 import "../ha-alert";
 import "../ha-input-helper-text";
@@ -16,6 +19,10 @@ import "./ha-map";
 import type { HaMap, HaMapEditableLocation } from "./ha-map";
 import type { HaIcon } from "../ha-icon";
 import type { HaSvgIcon } from "../ha-svg-icon";
+import {
+  createZoneMarkerElement,
+  ZONE_CIRCLE_SIZE,
+} from "../../common/map/zone-marker";
 
 declare global {
   // for fire event
@@ -68,6 +75,15 @@ export class HaLocationsEditor extends LitElement {
 
   @state() private _editingAvailable = true;
 
+  // Marker elements bake in theme colors, so they are rebuilt on a theme
+  // change; narrow the UI context to themes to avoid unrelated rerenders
+  @state()
+  @consume({ context: uiContext, subscribe: true })
+  @transform<ContextType<typeof uiContext>, Themes>({
+    transformer: ({ themes }) => themes,
+  })
+  private _themes?: Themes;
+
   @state()
   @consume({ context: internationalizationContext, subscribe: true })
   private _i18n?: HomeAssistantInternationalization;
@@ -108,7 +124,10 @@ export class HaLocationsEditor extends LitElement {
     return html`
       <div class="map">
         <ha-map
-          .editableLocations=${this._editableLocations(this.locations)}
+          .editableLocations=${this._editableLocations(
+            this.locations,
+            this._themes
+          )}
           .zoom=${this.zoom}
           .autoFit=${this.autoFit}
           .themeMode=${this.themeMode}
@@ -140,7 +159,14 @@ export class HaLocationsEditor extends LitElement {
   }
 
   private _editableLocations = memoizeOne(
-    (locations?: MarkerLocation[]): HaMapEditableLocation[] => {
+    (
+      locations: MarkerLocation[] | undefined,
+      themes: Themes | undefined
+    ): HaMapEditableLocation[] => {
+      if (themes !== this._elementsThemes) {
+        this._elementsThemes = themes;
+        this._elements.clear();
+      }
       const ids = new Set((locations ?? []).map((location) => location.id));
       for (const id of this._elements.keys()) {
         if (!ids.has(id)) {
@@ -152,7 +178,9 @@ export class HaLocationsEditor extends LitElement {
         location: [location.latitude, location.longitude],
         radius: location.radius,
         element: this._elementFor(location),
-        elementSize: [ICON_SIZE, ICON_SIZE],
+        elementSize: location.radius
+          ? [ZONE_CIRCLE_SIZE, ZONE_CIRCLE_SIZE]
+          : [ICON_SIZE, ICON_SIZE],
         title: location.name,
         color: location.radius_color,
         locationEditable: location.location_editable,
@@ -165,30 +193,46 @@ export class HaLocationsEditor extends LitElement {
   // Reused while unchanged, so ha-map moves markers instead of rebuilding them
   private _elements = new Map<string, { key: string; element?: HTMLElement }>();
 
+  private _elementsThemes?: Themes;
+
   private _elementFor(location: MarkerLocation): HTMLElement | undefined {
+    const isZone = !!location.radius;
     const key = JSON.stringify([
+      isZone,
       location.icon,
       location.iconPath,
       location.name,
-      location.location_editable,
+      location.radius_color,
     ]);
     const cached = this._elements.get(location.id);
     if (cached?.key === key) {
       return cached.element;
     }
-    const element = this._createIcon(location);
+    // The zone marker doubles as the circle's draggable center
+    const element = isZone
+      ? this._createZoneMarker(location)
+      : this._createIcon(location);
     this._elements.set(location.id, { key, element });
     return element;
   }
 
+  private _createZoneMarker(location: MarkerLocation): HTMLElement {
+    return createZoneMarkerElement({
+      color:
+        location.radius_color ||
+        getComputedStyle(this).getPropertyValue("--accent-color"),
+      icon: location.icon,
+      iconPath: location.iconPath,
+      name: location.name ?? "",
+    });
+  }
+
   private _createIcon(location: MarkerLocation): HTMLElement | undefined {
     if (!location.icon && !location.iconPath) {
       return undefined;
     }
     const el = document.createElement("div");
-    el.className = `named-icon ${
-      location.location_editable ? "draggable" : ""
-    }`;
+    el.className = "named-icon";
     if (location.name !== undefined) {
       el.innerText = location.name;
     }
@@ -296,12 +340,13 @@ export class HaLocationsEditor extends LitElement {
       display: block;
       height: 100%;
     }
-    /* Over the map, clear of the zoom control, so a fixed-height host shows it */
+    /* Over the map, clear of the zoom control, so a fixed-height host shows it.
+       The control sits at the physical top-left in either direction. */
     ha-alert {
       position: absolute;
       top: var(--ha-space-2);
-      inset-inline-start: 56px;
-      inset-inline-end: var(--ha-space-2);
+      left: 56px;
+      right: var(--ha-space-2);
       z-index: 1;
     }
   `;

src/components/map/ha-map.ts

@@ -1,4 +1,4 @@
-import { consume } from "@lit/context";
+import { consume, ContextConsumer } from "@lit/context";
 import { isToday } from "date-fns";
 import type { HassConfig, HassEntities } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
@@ -31,15 +31,23 @@ import type {
 } from "../../common/map/map-engine";
 import { circleBoundsPoints } from "../../common/map/map-engine";
 import { editableCircleStyles } from "../../common/map/editable-circle";
+import { entityMapColor, zoneColor } from "../../common/map/entity-map-colors";
+import {
+  createZoneMarkerElement,
+  ZONE_CIRCLE_SIZE,
+  zoneMarkerStyles,
+} from "../../common/map/zone-marker";
 import { filterXSS } from "../../common/util/xss";
 import {
   configContext,
   connectionContext,
   formattersContext,
+  fullEntitiesContext,
   internationalizationContext,
   statesContext,
   uiContext,
 } from "../../data/context";
+import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
 import { ensureMapTilesToken } from "../../data/map_tiles";
 import type {
   HomeAssistantConfig,
@@ -211,9 +219,37 @@ export interface HaMapEntity {
   unit?: string;
   name?: string;
   focus?: boolean;
+  hide_accuracy?: boolean;
+  hide_radius?: boolean;
+  selected?: boolean;
 }
 
+// Data carried by entity markers for rendering cluster bubbles
+interface ClusterData {
+  entityId: string;
+  picture?: string;
+  label: string;
+  showIcon: boolean;
+  unit: string;
+  color?: string;
+  selected: boolean;
+  zoneId?: string;
+}
+
+const CLUSTER_AVATAR_SIZE = 32;
+const CLUSTER_BUBBLE_PADDING = 6;
+const CLUSTER_BUBBLE_GAP = 4;
+const CLUSTER_MAX_AVATARS = 3;
+const CLUSTER_MORE_WIDTH = 28;
+const CLUSTER_MORE_MAX = 99;
+const CLUSTER_TAIL_SIZE = 10;
+// The tail is a rotated square on the bubble's bottom edge, reaching half its diagonal below
+const CLUSTER_TAIL_HEIGHT = Math.round((CLUSTER_TAIL_SIZE * Math.SQRT2) / 2);
+const CLUSTER_ZONE_SPACING = 2;
 const CLUSTER_RADIUS = 40;
+// Same-zone markers share the zone's bubble while they span at most this many
+// pixels; further apart they show their actual positions
+const ZONE_GROUP_RADIUS = 160;
 
 @customElement("ha-map")
 export class HaMap extends ReactiveElement {
@@ -264,6 +300,8 @@ export class HaMap extends ReactiveElement {
 
   @property({ attribute: "fit-zones", type: Boolean }) public fitZones = false;
 
+  private _zonePositions: Record<string, MapLatLng> = {};
+
   @property({ attribute: "theme-mode", type: String })
   public themeMode: ThemeMode = "auto";
 
@@ -296,6 +334,11 @@ export class HaMap extends ReactiveElement {
 
   private _resizeObserver?: ResizeObserver;
 
+  // Registry creation order decides the palette colors
+  @state() private _entityReg: EntityRegistryEntry[] = [];
+
+  private _registryConsumer?: ContextConsumer<typeof fullEntitiesContext, this>;
+
   private _entityHandles: MapMarkerHandle[] = [];
 
   private _zoneHandles: MapItemHandle[] = [];
@@ -323,6 +366,21 @@ export class HaMap extends ReactiveElement {
     this._attachObserver();
   }
 
+  // Only maps that draw entities ask for the registry; an editor's map, as in
+  // onboarding, never does. The context provider shares one subscription.
+  private _watchRegistry(): void {
+    if (this._registryConsumer || !this.entities?.length) {
+      return;
+    }
+    this._registryConsumer = new ContextConsumer(this, {
+      context: fullEntitiesContext,
+      subscribe: true,
+      callback: (entries) => {
+        this._entityReg = entries;
+      },
+    });
+  }
+
   private _handleVisibilityChange = async () => {
     if (!document.hidden) {
       setTimeout(() => {
@@ -385,7 +443,7 @@ export class HaMap extends ReactiveElement {
       }
     }
 
-    if (changedProps.has("clusterMarkers")) {
+    if (changedProps.has("clusterMarkers") || changedProps.has("_entityReg")) {
       this._drawEntities();
     }
 
@@ -401,6 +459,11 @@ export class HaMap extends ReactiveElement {
 
     if (changedProps.has("_loaded") || changedProps.has("paths")) {
       this._drawPaths();
+      // Cluster bubbles show entity colors only while trails are visible
+      const oldPaths = changedProps.get("paths") as HaMapPaths[] | undefined;
+      if (!!oldPaths?.length !== !!this.paths?.length) {
+        this._engine?.refreshClusters();
+      }
     }
 
     if (changedProps.has("_loaded") || changedProps.has("editableLocations")) {
@@ -433,13 +496,19 @@ export class HaMap extends ReactiveElement {
     const oldUi = changedProps.get("_ui") as HomeAssistantUI | undefined;
     if (
       !changedProps.has("themeMode") &&
-      (!changedProps.has("_ui") ||
-        (oldUi && oldUi.themes?.darkMode === this._ui.themes?.darkMode))
+      (!changedProps.has("_ui") || (oldUi && oldUi.themes === this._ui.themes))
     ) {
       return;
     }
 
     this._updateMapStyle();
+    // Marker, trail and circle colors were resolved from the theme when drawn
+    this._drawEntities();
+    this._drawPaths();
+    if (this._editableHandles.size) {
+      this._removeEditableLocations();
+      this._drawEditableLocations();
+    }
   }
 
   private get _darkMode() {
@@ -1031,16 +1100,36 @@ export class HaMap extends ReactiveElement {
       engine.setClustering(null);
       return;
     }
+    this._watchRegistry();
 
     const computedStyles = getComputedStyle(this);
-    const zoneColor = computedStyles.getPropertyValue("--accent-color");
-    const passiveZoneColor = computedStyles.getPropertyValue(
-      "--secondary-text-color"
-    );
-
-    const darkPrimaryColor = computedStyles.getPropertyValue(
-      "--dark-primary-color"
-    );
+    // A person's state is "home" for the home zone, the zone name otherwise
+    const zoneByState: Record<string, string> = {};
+    this._zonePositions = {};
+    for (const entity of this.entities) {
+      const stateObj = states[getEntityId(entity)];
+      // A zone that is not drawn cannot anchor a bubble either
+      if (
+        stateObj &&
+        computeStateDomain(stateObj) === "zone" &&
+        (this.renderPassive || !stateObj.attributes.passive)
+      ) {
+        zoneByState[
+          stateObj.entity_id === "zone.home"
+            ? "home"
+            : computeStateName(stateObj)
+        ] = stateObj.entity_id;
+        if (
+          typeof stateObj.attributes.latitude === "number" &&
+          typeof stateObj.attributes.longitude === "number"
+        ) {
+          this._zonePositions[stateObj.entity_id] = [
+            stateObj.attributes.latitude,
+            stateObj.attributes.longitude,
+          ];
+        }
+      }
+    }
 
     for (const entity of this.entities) {
       const stateObj = states[getEntityId(entity)];
@@ -1069,26 +1158,29 @@ export class HaMap extends ReactiveElement {
           continue;
         }
 
-        const zoneMarkerColor = passive ? passiveZoneColor : zoneColor;
+        const hideRadius = typeof entity !== "string" && entity.hide_radius;
+        // A host-set color wins, except passive zones are always muted
+        const markerColor =
+          !passive && typeof entity !== "string" && entity.color
+            ? entity.color
+            : zoneColor(
+                stateObj.entity_id,
+                !!passive,
+                this._entityReg,
+                computedStyles
+              );
 
-        if (radius) {
+        if (!hideRadius && radius) {
           this._zoneHandles.push(
-            engine.addCircle(position, { radius, color: zoneMarkerColor })
+            engine.addCircle(position, { radius, color: markerColor })
           );
         }
 
-        // create icon
-        const iconEl = document.createElement("div");
-        iconEl.className = `zone-icon ${this._darkMode ? "dark" : "light"}`;
-        if (icon) {
-          const el = document.createElement("ha-icon");
-          el.setAttribute("icon", icon);
-          iconEl.appendChild(el);
-        } else {
-          const el = document.createElement("span");
-          el.textContent = title;
-          iconEl.appendChild(el);
-        }
+        const circleEl = createZoneMarkerElement({
+          color: markerColor,
+          icon,
+          name: title,
+        });
 
         if (this.interactiveZones) {
           const openMoreInfo = (ev: Event) => {
@@ -1097,8 +1189,8 @@ export class HaMap extends ReactiveElement {
               entityId: stateObj.entity_id,
             });
           };
-          iconEl.addEventListener("click", openMoreInfo);
-          iconEl.addEventListener("keydown", (ev) => {
+          circleEl.addEventListener("click", openMoreInfo);
+          circleEl.addEventListener("keydown", (ev) => {
             if (ev.key === "Enter" || ev.key === " ") {
               ev.preventDefault();
               openMoreInfo(ev);
@@ -1106,10 +1198,9 @@ export class HaMap extends ReactiveElement {
           });
         }
 
-        const zoneIconSize = this._getMarkerSize(computedStyles) / 2;
         this._zoneHandles.push(
-          engine.addMarker(iconEl, position, {
-            size: [zoneIconSize, zoneIconSize],
+          engine.addMarker(circleEl, position, {
+            size: [ZONE_CIRCLE_SIZE, ZONE_CIRCLE_SIZE],
             interactive: this.interactiveZones,
             title,
           })
@@ -1119,7 +1210,7 @@ export class HaMap extends ReactiveElement {
           this.fitZones &&
           (typeof entity === "string" || entity.focus !== false)
         ) {
-          if (radius) {
+          if (!hideRadius && radius) {
             this._focusZonePoints.push(...circleBoundsPoints(position, radius));
           } else {
             this._focusZonePoints.push(position);
@@ -1163,19 +1254,42 @@ export class HaMap extends ReactiveElement {
         entityPicture && (typeof entity === "string" || !entity.label_mode)
           ? this._connection.hassUrl(entityPicture)
           : "";
+      // A host may leave the color to the map
+      const entityColor =
+        (typeof entity !== "string" ? entity.color : undefined) ||
+        entityMapColor(getEntityId(entity), this._entityReg, computedStyles);
+      entityMarker.entityColor = entityColor;
       if (typeof entity !== "string") {
-        entityMarker.entityColor = entity.color;
+        entityMarker.selected = entity.selected ?? false;
       }
 
+      const clusterData: ClusterData = {
+        entityId: getEntityId(entity),
+        picture: entityMarker.entityPicture || undefined,
+        label: entityName,
+        showIcon: entityMarker.showIcon,
+        unit: entityMarker.entityUnit ?? "",
+        color: entityColor,
+        selected: typeof entity !== "string" && (entity.selected ?? false),
+        zoneId: ["person", "device_tracker"].includes(
+          computeStateDomain(stateObj)
+        )
+          ? zoneByState[stateObj.state]
+          : undefined,
+      };
+
+      const showAccuracy =
+        !!gpsAccuracy && !(typeof entity !== "string" && entity.hide_accuracy);
+
       const markerSize = this._getMarkerSize(computedStyles);
       this._entityHandles.push(
         engine.addMarker(entityMarker, position, {
           size: [markerSize, markerSize],
           title,
           cluster: true,
-          // create circle around if entity has accuracy
-          decoration: gpsAccuracy
-            ? { radius: gpsAccuracy, color: darkPrimaryColor }
+          clusterData,
+          decoration: showAccuracy
+            ? { radius: gpsAccuracy!, color: entityColor }
             : undefined,
         })
       );
@@ -1187,22 +1301,97 @@ export class HaMap extends ReactiveElement {
 
     engine.setClustering(
       this.clusterMarkers
-        ? { radius: CLUSTER_RADIUS, iconBuilder: this._createClusterIcon }
+        ? {
+            radius: CLUSTER_RADIUS,
+            iconBuilder: this._createClusterBubble,
+            // Everyone in a zone shares its bubble until zooming spreads them
+            groupKey: (marker) => (marker.clusterData as ClusterData)?.zoneId,
+            groupRadius: ZONE_GROUP_RADIUS,
+          }
         : null
     );
   }
 
-  // Renders a marker cluster as a circle with the member count
-  private _createClusterIcon = (members: MapMarkerHandle[]): MapClusterIcon => {
-    const size = Math.round(
-      this._getMarkerSize(getComputedStyle(this)) * (2 / 3)
-    );
-    const element = document.createElement("div");
-    element.className = "marker-cluster";
-    const count = document.createElement("span");
-    count.textContent = String(members.length);
-    element.appendChild(count);
-    return { element, size: [size, size] };
+  // Renders a marker cluster as a bubble of its members' avatars
+  private _createClusterBubble = (
+    members: MapMarkerHandle[]
+  ): MapClusterIcon => {
+    const data = members.map((member) => member.clusterData as ClusterData);
+    const shown = data.slice(0, CLUSTER_MAX_AVATARS);
+    const hidden = data.length - shown.length;
+
+    // With history trails shown, colored borders match avatars to trails
+    const showColors = !!this.paths?.length;
+
+    const bubble = document.createElement("div");
+    bubble.className = "cluster-bubble";
+    for (const member of shown) {
+      const avatar = document.createElement("ha-entity-marker");
+      avatar.entityId = member?.entityId;
+      avatar.entityName = member?.label ?? "";
+      avatar.entityUnit = member?.unit ?? "";
+      avatar.showIcon = member?.showIcon ?? false;
+      avatar.entityPicture = member?.picture ?? "";
+      avatar.entityColor = member?.color;
+      if (showColors) {
+        avatar.style.setProperty(
+          "--ha-marker-color",
+          member?.color ?? "var(--primary-color)"
+        );
+        avatar.style.setProperty("--ha-marker-border-width", "2px");
+      }
+      if (member?.selected) {
+        avatar.selected = true;
+      }
+      bubble.appendChild(avatar);
+    }
+
+    let width =
+      shown.length * CLUSTER_AVATAR_SIZE +
+      (shown.length - 1) * CLUSTER_BUBBLE_GAP +
+      2 * CLUSTER_BUBBLE_PADDING;
+    if (hidden > 0) {
+      const more = document.createElement("span");
+      more.className = "more";
+      more.textContent =
+        hidden > CLUSTER_MORE_MAX ? `${CLUSTER_MORE_MAX}+` : `+${hidden}`;
+      bubble.appendChild(more);
+      width += CLUSTER_MORE_WIDTH + CLUSTER_BUBBLE_GAP;
+    }
+
+    // A cluster of one zone's occupants attaches to that zone's marker
+    const zoneId = data[0]?.zoneId;
+    const zonePosition = zoneId ? this._zonePositions[zoneId] : undefined;
+    const atZone =
+      !!zoneId &&
+      !!zonePosition &&
+      data.every((member) => member?.zoneId === zoneId);
+
+    let height = CLUSTER_AVATAR_SIZE + 2 * CLUSTER_BUBBLE_PADDING;
+    let root: HTMLElement = bubble;
+    if (atZone) {
+      root = document.createElement("div");
+      root.className = "cluster-marker";
+      const tail = document.createElement("div");
+      tail.className = "cluster-bubble-tail";
+      root.append(bubble, tail);
+      height += CLUSTER_TAIL_HEIGHT;
+    }
+
+    return {
+      element: root,
+      size: [width, height],
+      // Float above the zone circle, tail pointing at it
+      ...(atZone && zonePosition
+        ? {
+            location: zonePosition,
+            anchor: [
+              width / 2,
+              height + ZONE_CIRCLE_SIZE / 2 + CLUSTER_ZONE_SPACING,
+            ] as [number, number],
+          }
+        : {}),
+    };
   };
 
   private _drawScaleRuler(): void {
@@ -1237,12 +1426,19 @@ export class HaMap extends ReactiveElement {
     }
     #map {
       height: 100%;
+      /* A cluster bubble and its tail cast a single shadow around their
+         combined silhouette (drop-shadow on the wrapper), so no shadow seam
+         appears between the bubble and its tail. */
+      --ha-cluster-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08))
+        drop-shadow(0 1px 3px rgba(0, 0, 0, 0.12));
     }
     #map.clickable {
       cursor: pointer;
     }
     #map.dark {
       background: #090909;
+      --ha-cluster-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4))
+        drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
     }
     #map.forced-dark {
       color: #ffffff;
@@ -1263,6 +1459,8 @@ export class HaMap extends ReactiveElement {
       display: flex;
       flex-direction: column;
       align-items: center;
+      isolation: isolate;
+      filter: var(--ha-cluster-shadow);
     }
     .cluster-open-members {
       display: flex;
@@ -1274,7 +1472,13 @@ export class HaMap extends ReactiveElement {
       max-width: calc(6 * var(--ha-marker-size, 48px) + 5 * 4px + 12px);
       background: var(--card-background-color, #fff);
       border-radius: 14px;
-      box-shadow: var(--ha-box-shadow-s);
+    }
+    /* Both tails are a rotated square whose upper half sits under the bubble;
+       drawn behind it, so it never covers a member's frame or selected ring */
+    .cluster-open-tail,
+    .cluster-bubble-tail {
+      position: relative;
+      z-index: -1;
     }
     .cluster-open-tail {
       width: 10px;
@@ -1349,17 +1553,65 @@ export class HaMap extends ReactiveElement {
     .leaflet-pane {
       z-index: 0 !important;
     }
-    /* Zone icons, sized like the Leaflet divIcon they replaced */
-    .zone-icon {
+    .cluster-marker {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      isolation: isolate;
+      filter: var(--ha-cluster-shadow);
+    }
+    /* The wrapper carries the shadow around the bubble-plus-tail outline, so
+       the bubble itself drops its own to avoid a seam at the tail. */
+    .cluster-marker .cluster-bubble {
+      filter: none;
+    }
+    .cluster-bubble-tail {
+      width: ${CLUSTER_TAIL_SIZE}px;
+      height: ${CLUSTER_TAIL_SIZE}px;
+      margin-top: ${-CLUSTER_TAIL_SIZE / 2}px;
+      border-radius: 2px;
+      background: var(--card-background-color, #fff);
+      transform: rotate(45deg);
+    }
+    .cluster-bubble {
+      display: flex;
+      align-items: center;
+      gap: ${CLUSTER_BUBBLE_GAP}px;
+      padding: ${CLUSTER_BUBBLE_PADDING}px;
+      box-sizing: border-box;
+      background: var(--card-background-color, #fff);
+      border-radius: 14px;
+      filter: var(--ha-cluster-shadow);
+      --ha-marker-size: ${CLUSTER_AVATAR_SIZE}px;
+      --ha-marker-color: transparent;
+      --ha-marker-border-width: 1px;
+      --ha-marker-shadow: none;
+      --ha-marker-font-size: var(--ha-font-size-s);
+      /* distinguish letter tiles from the bubble background */
+      --ha-marker-background: var(--ha-color-fill-neutral-quiet-resting);
+    }
+    .cluster-bubble .more {
+      flex: none;
+      width: ${CLUSTER_MORE_WIDTH}px;
+      height: ${CLUSTER_AVATAR_SIZE}px;
       display: flex;
       align-items: center;
       justify-content: center;
-      text-align: center;
-      color: var(--primary-text-color);
+      border-radius: 10px;
+      background: var(--ha-color-fill-neutral-quiet-resting, #f0f0f0);
+      color: var(--primary-text-color, #212121);
+      font-size: var(--ha-font-size-s);
+      font-weight: var(--ha-font-weight-medium);
     }
-    .zone-icon.dark {
-      color: #ffffff;
+    /* Markers are rounded squares to match the cluster bubble avatars */
+    ha-entity-marker {
+      --ha-marker-border-radius: var(--ha-border-radius-lg);
     }
+    .cluster-bubble ha-entity-marker {
+      flex: none;
+      --ha-marker-border-radius: 10px;
+    }
+    ${unsafeCSS(zoneMarkerStyles)}
     .leaflet-control,
     .leaflet-top,
     .leaflet-bottom {
@@ -1410,19 +1662,6 @@ export class HaMap extends ReactiveElement {
     ha-icon {
       --mdc-icon-size: calc(var(--ha-marker-size, 48px) / 2);
     }
-
-    .marker-cluster {
-      box-sizing: border-box;
-      background-clip: padding-box;
-      background-color: var(--primary-color);
-      border: 3px solid rgba(var(--rgb-primary-color), 0.2);
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--text-primary-color);
-      font-size: var(--ha-font-size-m);
-    }
   `;
 }
 

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

@@ -22,7 +22,12 @@ import type {
   MarkerLocation,
 } from "../../../components/map/ha-locations-editor";
 import { saveCoreConfig } from "../../../data/core";
+import type { EntityRegistryEntry } from "../../../data/entity/entity_registry";
 import { subscribeEntityRegistry } from "../../../data/entity/entity_registry";
+import {
+  HOME_ZONE_ENTITY_ID,
+  zoneColor,
+} from "../../../common/map/entity-map-colors";
 import type {
   HomeZoneMutableParams,
   Zone,
@@ -47,6 +52,19 @@ import { configSections } from "../config-sections";
 import { showHomeZoneDetailDialog } from "./show-dialog-home-zone-detail";
 import { showZoneDetailDialog } from "./show-dialog-zone-detail";
 
+interface PendingEdit {
+  latitude?: number;
+  longitude?: number;
+  radius?: number;
+}
+
+// How close the saved value must come to a pending one to count as saved
+const PENDING_TOLERANCE: Record<keyof PendingEdit, number> = {
+  latitude: 1e-7,
+  longitude: 1e-7,
+  radius: 0.5,
+};
+
 @customElement("ha-config-zone")
 export class HaConfigZone extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -61,21 +79,36 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
 
   @state() private _stateItems?: HassEntity[];
 
+  // Values dragged on the map, shown until the saved data reflects them, so
+  // a re-render while the save is in flight does not move the marker back.
+  // A failed save drops them and the marker returns to the saved values.
+  @state() private _pendingEdits: Record<string, PendingEdit> = {};
+
   @state() private _canEditCore = false;
 
   @query("ha-locations-editor") private _map?: HaLocationsEditor;
 
   private _regEntities: string[] = [];
 
+  // Registry creation order decides the zone colors
+  @state() private _entityReg: EntityRegistryEntry[] = [];
+
+  // Storage zone id (its unique id) to entity id
+  @state() private _zoneEntityIds: Record<string, string> = {};
+
+  // Bumped when entity map colors change to recompute the memoized locations
+  @state() private _colorVersion = 0;
+
   private _getZones = memoizeOne(
-    (storageItems: Zone[], stateItems: HassEntity[]): MarkerLocation[] => {
+    (
+      storageItems: Zone[],
+      stateItems: HassEntity[],
+      zoneEntityIds: Record<string, string>,
+      pendingEdits: Record<string, PendingEdit>,
+      entityReg: EntityRegistryEntry[],
+      _colorVersion: number
+    ): MarkerLocation[] => {
       const computedStyles = getComputedStyle(this);
-      const zoneRadiusColor = computedStyles.getPropertyValue("--accent-color");
-      const passiveRadiusColor = computedStyles.getPropertyValue(
-        "--secondary-text-color"
-      );
-      const homeRadiusColor =
-        computedStyles.getPropertyValue("--primary-color");
 
       const stateLocations: MarkerLocation[] = stateItems.map(
         (entityState) => ({
@@ -85,21 +118,28 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
           latitude: entityState.attributes.latitude,
           longitude: entityState.attributes.longitude,
           radius: entityState.attributes.radius,
-          radius_color:
-            entityState.entity_id === "zone.home"
-              ? homeRadiusColor
-              : entityState.attributes.passive
-                ? passiveRadiusColor
-                : zoneRadiusColor,
+          ...pendingEdits[entityState.entity_id],
+          radius_color: zoneColor(
+            entityState.entity_id,
+            !!entityState.attributes.passive,
+            entityReg,
+            computedStyles
+          ),
           location_editable:
-            entityState.entity_id === "zone.home" && this._canEditCore,
+            entityState.entity_id === HOME_ZONE_ENTITY_ID && this._canEditCore,
           radius_editable:
-            entityState.entity_id === "zone.home" && this._canEditCore,
+            entityState.entity_id === HOME_ZONE_ENTITY_ID && this._canEditCore,
         })
       );
       const storageLocations: MarkerLocation[] = storageItems.map((zone) => ({
         ...zone,
-        radius_color: zone.passive ? passiveRadiusColor : zoneRadiusColor,
+        ...pendingEdits[zone.id],
+        radius_color: zoneColor(
+          zoneEntityIds[zone.id] ?? `zone.${zone.id}`,
+          !!zone.passive,
+          entityReg,
+          computedStyles
+        ),
         location_editable: true,
         radius_editable: true,
       }));
@@ -110,9 +150,18 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
       subscribeEntityRegistry(this.hass.connection!, (entities) => {
+        this._entityReg = entities;
         this._regEntities = entities.map(
           (registryEntry) => registryEntry.entity_id
         );
+        this._zoneEntityIds = Object.fromEntries(
+          entities
+            .filter((registryEntry) => registryEntry.platform === "zone")
+            .map((registryEntry) => [
+              registryEntry.unique_id,
+              registryEntry.entity_id,
+            ])
+        );
         this._filterStates();
       }),
     ];
@@ -265,7 +314,11 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
                   <ha-locations-editor
                     .locations=${this._getZones(
                       this._storageItems,
-                      this._stateItems
+                      this._stateItems,
+                      this._zoneEntityIds,
+                      this._pendingEdits,
+                      this._entityReg,
+                      this._colorVersion
                     )}
                     @location-updated=${this._locationUpdated}
                     @radius-updated=${this._radiusUpdated}
@@ -295,7 +348,8 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
     }
   }
 
-  protected updated() {
+  protected updated(changedProps: PropertyValues<this>) {
+    super.updated(changedProps);
     if (
       !this.route.path.startsWith("/edit/") ||
       !this._stateItems ||
@@ -313,11 +367,99 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
   }
 
   public willUpdate(changedProps: PropertyValues<this>) {
-    super.updated(changedProps);
+    super.willUpdate(changedProps);
     const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
     if (oldHass && this._stateItems) {
       this._getStates(oldHass);
     }
+    // Zone colors come from theme variables
+    if (oldHass && oldHass.themes !== this.hass.themes) {
+      this._colorVersion++;
+    }
+    this._settlePendingEdits();
+  }
+
+  // A pending edit is done once the saved data carries its values
+  private _settlePendingEdits() {
+    for (const [id, pending] of Object.entries(this._pendingEdits)) {
+      const saved =
+        this._storageItems?.find((zone) => zone.id === id) ??
+        this.hass.states[id]?.attributes;
+      if (
+        saved &&
+        (Object.keys(pending) as (keyof PendingEdit)[]).every(
+          (key) =>
+            Math.abs((saved[key] as number) - pending[key]!) <
+            PENDING_TOLERANCE[key]
+        )
+      ) {
+        this._dropPendingEdit(id);
+      }
+    }
+  }
+
+  private _dropPendingEdit(id: string) {
+    const { [id]: _done, ...rest } = this._pendingEdits;
+    this._pendingEdits = rest;
+  }
+
+  // Saves for one zone run in order, so each sees the entry the previous one
+  // produced and a failure only drops the values its own request carried
+  private _saveQueue: Record<string, Promise<void>> = {};
+
+  private _saveEdit(id: string, pending: PendingEdit): Promise<void> {
+    this._pendingEdits = {
+      ...this._pendingEdits,
+      [id]: { ...this._pendingEdits[id], ...pending },
+    };
+    const save = (this._saveQueue[id] ?? Promise.resolve())
+      .then(() => this._performSave(id, pending))
+      .finally(() => {
+        // Only the last save in the chain removes the queue entry
+        if (this._saveQueue[id] === save) {
+          delete this._saveQueue[id];
+        }
+      });
+    this._saveQueue[id] = save;
+    return save;
+  }
+
+  private async _performSave(id: string, pending: PendingEdit) {
+    try {
+      if (id === HOME_ZONE_ENTITY_ID) {
+        await saveCoreConfig(this.hass, pending);
+        return;
+      }
+      const entry = this._storageItems!.find((item) => item.id === id);
+      if (entry) {
+        await this._updateEntry(entry, pending);
+      }
+    } catch (err: any) {
+      // The saved values are the truth again for what this request changed;
+      // a later edit of other values stays pending for its own save
+      this._dropPendingValues(id, pending);
+      showAlertDialog(this, {
+        title: this.hass.localize("ui.panel.config.zone.can_not_edit"),
+        text: err.message,
+      });
+    }
+  }
+
+  private _dropPendingValues(id: string, failed: PendingEdit) {
+    const current = this._pendingEdits[id];
+    if (!current) {
+      return;
+    }
+    const rest = Object.fromEntries(
+      Object.entries(current).filter(
+        ([key, value]) => failed[key as keyof PendingEdit] !== value
+      )
+    ) as PendingEdit;
+    if (Object.keys(rest).length) {
+      this._pendingEdits = { ...this._pendingEdits, [id]: rest };
+    } else {
+      this._dropPendingEdit(id);
+    }
   }
 
   private async _fetchData() {
@@ -359,37 +501,19 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
     }
   }
 
-  private async _locationUpdated(ev: CustomEvent) {
-    if (ev.detail.id === "zone.home" && this._canEditCore) {
-      await saveCoreConfig(this.hass, {
-        latitude: ev.detail.location[0],
-        longitude: ev.detail.location[1],
-      });
-      return;
-    }
-    const entry = this._storageItems!.find((item) => item.id === ev.detail.id);
-    if (!entry) {
-      return;
-    }
-    this._updateEntry(entry, {
+  private _locationUpdated(ev: CustomEvent) {
+    this._saveEdit(ev.detail.id, {
       latitude: ev.detail.location[0],
       longitude: ev.detail.location[1],
     });
   }
 
-  private async _radiusUpdated(ev: CustomEvent) {
-    if (ev.detail.id === "zone.home" && this._canEditCore) {
-      await saveCoreConfig(this.hass, {
-        radius: Math.round(ev.detail.radius),
-      });
-      return;
-    }
-    const entry = this._storageItems!.find((item) => item.id === ev.detail.id);
-    if (!entry) {
-      return;
-    }
-    this._updateEntry(entry, {
-      radius: ev.detail.radius,
+  private _radiusUpdated(ev: CustomEvent) {
+    this._saveEdit(ev.detail.id, {
+      radius:
+        ev.detail.id === HOME_ZONE_ENTITY_ID
+          ? Math.round(ev.detail.radius)
+          : ev.detail.radius,
     });
   }
 
@@ -416,7 +540,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
 
     const entryId: string = (ev.currentTarget! as any).value;
 
-    if (this.narrow && entryId === "zone.home") {
+    if (this.narrow && entryId === HOME_ZONE_ENTITY_ID) {
       this._editHomeZone(ev);
       return;
     }
@@ -475,7 +599,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
       longitude: values.longitude,
       radius: values.radius,
     });
-    this._zoomZone("zone.home");
+    this._zoomZone(HOME_ZONE_ENTITY_ID);
   }
 
   private async _updateEntry(

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

@@ -8,8 +8,13 @@ import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { getColorByIndex } from "../../../common/color/colors";
+import type { ContextType } from "@lit/context";
+import { consume, ContextConsumer } from "@lit/context";
 import { resolveThemeColor } from "../../../common/color/compute-color";
+import {
+  entityMapColor,
+  zoneColor,
+} from "../../../common/map/entity-map-colors";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
@@ -31,6 +36,10 @@ import type {
 import type { MapLatLng } from "../../../common/map/map-engine";
 import type { HistoryStates } from "../../../data/history";
 import { subscribeHistoryStatesTimeWindow } from "../../../data/history";
+import type { Themes } from "../../../data/ws-themes";
+import { fullEntitiesContext, uiContext } from "../../../data/context";
+import { transform } from "../../../common/decorators/transform";
+import type { EntityRegistryEntry } from "../../../data/entity/entity_registry";
 import type { HomeAssistant } from "../../../types";
 import { findEntities } from "../common/find-entities";
 import {
@@ -58,6 +67,18 @@ interface GeoEntity {
 
 @customElement("hui-map-card")
 class HuiMapCard extends LitElement implements LovelaceCard {
+  constructor() {
+    super();
+    new ContextConsumer(this, {
+      context: fullEntitiesContext,
+      subscribe: true,
+      callback: (entries) => {
+        this._entityReg = entries;
+        this._mapEntities = this._getMapEntities();
+      },
+    });
+  }
+
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public layout?: string;
@@ -76,12 +97,19 @@ class HuiMapCard extends LitElement implements LovelaceCard {
 
   private _filteredMapEntities: HaMapEntity[] = [];
 
-  private _colorDict: Record<string, string> = {};
-
-  private _colorIndex = 0;
-
   @state() private _error?: { code: string; message: string };
 
+  // Registry creation order decides the palette colors
+  @state() private _entityReg: EntityRegistryEntry[] = [];
+
+  // Palette colors are read from the theme when the entities are built
+  @state()
+  @consume({ context: uiContext, subscribe: true })
+  @transform<ContextType<typeof uiContext>, Themes>({
+    transformer: ({ themes }) => themes,
+  })
+  private _themes?: Themes;
+
   @state() private _clusterMarkers = true;
 
   private _subscribed?: Promise<(() => Promise<void>) | undefined>;
@@ -213,7 +241,12 @@ class HuiMapCard extends LitElement implements LovelaceCard {
           <ha-map
             .entities=${this._filteredMapEntities}
             .zoom=${this._config.default_zoom ?? DEFAULT_ZOOM}
-            .paths=${this._getHistoryPaths(this._config, this._stateHistory)}
+            .paths=${this._getHistoryPaths(
+              this._config,
+              this._stateHistory,
+              this._entityReg,
+              this._themes
+            )}
             .autoFit=${this._config.auto_fit || false}
             .fitZones=${this._config.fit_zones || false}
             .themeMode=${themeMode}
@@ -321,6 +354,10 @@ class HuiMapCard extends LitElement implements LovelaceCard {
     ) {
       this._mapEntities = this._getMapEntities();
     }
+    // Private state is not in keyof this
+    if ((changedProps as PropertyValues).has("_themes") && this.hasUpdated) {
+      this._mapEntities = this._getMapEntities();
+    }
 
     // Filter entities by conditions
     if (this._config?.conditions && this._mapEntities) {
@@ -432,18 +469,19 @@ class HuiMapCard extends LitElement implements LovelaceCard {
     this._clusterMarkers = !this._clusterMarkers;
   }
 
+  // The same color for an entity on every map; a config color still wins
   private _getColor(entityId: string): string {
-    let color = this._colorDict[entityId];
-    if (color) {
-      return color;
-    }
     const computedStyles = getComputedStyle(this);
-    color = getColorByIndex(this._colorIndex, computedStyles);
-    if (color) {
-      this._colorIndex++;
-      this._colorDict[entityId] = color;
+    if (computeDomain(entityId) === "zone") {
+      const stateObj = this.hass?.states[entityId];
+      return zoneColor(
+        entityId,
+        !!stateObj?.attributes.passive,
+        this._entityReg,
+        computedStyles
+      );
     }
-    return color;
+    return entityMapColor(entityId, this._entityReg, computedStyles);
   }
 
   private _getSourceEntities(states?: HassEntities): GeoEntity[] {
@@ -503,7 +541,10 @@ class HuiMapCard extends LitElement implements LovelaceCard {
   private _getHistoryPaths = memoizeOne(
     (
       config: MapCardConfig,
-      history?: HistoryStates
+      history: HistoryStates | undefined,
+      // Trail colors follow the registry order and the theme like the markers
+      _entityReg: EntityRegistryEntry[],
+      _themes: Themes | undefined
     ): HaMapPaths[] | undefined => {
       if (!history || !(config.hours_to_show ?? DEFAULT_HOURS_TO_SHOW)) {
         return undefined;

test/common/map/entity-map-colors.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest";
+import type { EntityRegistryEntry } from "../../../src/data/entity/entity_registry";
+import {
+  entityMapColor,
+  HOME_ZONE_ENTITY_ID,
+  zoneColor,
+} from "../../../src/common/map/entity-map-colors";
+
+// Palette slot N reads back as "color-N", so an index is visible in the result
+const styles = {
+  getPropertyValue: (name: string) => name.replace("--", ""),
+} as unknown as CSSStyleDeclaration;
+
+const entry = (entityId: string, createdAt: number, id = entityId) =>
+  ({
+    entity_id: entityId,
+    created_at: createdAt,
+    id,
+  }) as EntityRegistryEntry;
+
+describe("entity map colors", () => {
+  it("colors zones, persons and trackers in one creation order", () => {
+    const entries = [
+      entry("zone.work", 40),
+      entry("zone.school", 10),
+      entry("person.anne", 20),
+      entry("device_tracker.phone", 30),
+      entry("light.kitchen", 25),
+    ];
+
+    expect(entityMapColor("zone.school", entries, styles)).toBe("color-1");
+    // A person takes the next slot, never a zone's color
+    expect(entityMapColor("person.anne", entries, styles)).toBe("color-2");
+    expect(entityMapColor("device_tracker.phone", entries, styles)).toBe(
+      "color-3"
+    );
+    expect(entityMapColor("zone.work", entries, styles)).toBe("color-4");
+  });
+
+  it("breaks creation ties by registry id", () => {
+    const entries = [entry("zone.b", 10, "b"), entry("zone.a", 10, "a")];
+
+    expect(entityMapColor("zone.a", entries, styles)).toBe("color-1");
+    expect(entityMapColor("zone.b", entries, styles)).toBe("color-2");
+  });
+
+  it("keeps the home zone out of the palette", () => {
+    const entries = [entry(HOME_ZONE_ENTITY_ID, 10), entry("zone.work", 20)];
+
+    expect(entityMapColor("zone.work", entries, styles)).toBe("color-1");
+    expect(zoneColor(HOME_ZONE_ENTITY_ID, false, entries, styles)).toBe(
+      "primary-color"
+    );
+  });
+
+  it("mutes passive zones", () => {
+    const entries = [entry("zone.quiet", 10)];
+
+    expect(zoneColor("zone.quiet", true, entries, styles)).toBe(
+      "secondary-text-color"
+    );
+    expect(zoneColor("zone.quiet", false, entries, styles)).toBe("color-1");
+  });
+
+  it("gives entities outside the registry a stable color", () => {
+    const entries = [entry("zone.work", 10)];
+
+    const color = entityMapColor("zone.yaml_zone", entries, styles);
+    expect(entityMapColor("zone.yaml_zone", entries, styles)).toBe(color);
+    expect(entityMapColor("zone.other_yaml_zone", entries, styles)).not.toBe(
+      color
+    );
+  });
+});

test/common/map/maplibre-map-engine.test.ts

@@ -1030,10 +1030,7 @@ describe("MapLibreMapEngine", () => {
       expect(handle.radius).toBeCloseTo(110, 5);
 
       element.dispatchEvent(new KeyboardEvent("keyup", { key: "ArrowUp" }));
-      // The host echoes the old radius once before its save returns
-      handle.update([52, 4], 100);
-      expect(handle.radius).toBeCloseTo(110, 5);
-      // A later identical update is a real change
+      // Once committed, the host is the truth again
       handle.update([52, 4], 100);
       expect(handle.radius).toBe(100);
     });
@@ -1100,25 +1097,24 @@ describe("MapLibreMapEngine", () => {
       expect(element.getAttribute("aria-valuenow")).toBe("150000");
     });
 
-    it("ignores one update echoing the values from before a drag", async () => {
+    it("ignores host updates only while a drag is in progress", async () => {
       const { engine, ready } = await createEngine();
       await ready;
       const { handle, center } = addCircle(engine);
 
       center.lngLat = [4.01, 52];
       center.fire("dragstart");
-      // Nothing moves while a drag is in progress
+      // The user's hand wins while dragging
       handle.update([53, 5], 500);
       expect(handle.center).toEqual([52, 4]);
       center.fire("drag");
       center.fire("dragend");
-
-      // The host saves and echoes the old values once; that is not a move back
-      handle.update([52, 4], 100);
       expect(handle.center).toEqual([52, 4.01]);
-      // A later identical update is a real change
+
+      // Afterwards the host is the truth, even when it moves the circle back
       handle.update([52, 4], 100);
       expect(handle.center).toEqual([52, 4]);
+      expect(handle.radius).toBe(100);
     });
 
     it("activates the center by click, Enter and Space, but not after a drag", async () => {