Merge dev: v1.31.1-v1.31.2 (plan editor fixes)

- .room.picked moved after .room.outlined: equal specificity, source
  order silently killed the amber highlight in markup (gotcha x4,
  documented inline)
- smoke_merge_highlight.mjs (waits out the 0.12s transition before
  reading computed colors); TESTING/CHANGELOG same-commit

custom_components/houseplan/const.py

@@ -11,7 +11,7 @@ PLANS_DIR = "houseplan/plans"  # relative to the HA configuration directory
 FILES_URL = "/houseplan_files/files"
 FILES_DIR = "houseplan/files"
 CONF_ADMIN_ONLY = "admin_only"
-VERSION = "1.26.0"
+VERSION = "1.31.2"
 
 DEFAULT_CONFIG: dict = {
     "spaces": [],

custom_components/houseplan/manifest.json

@@ -16,5 +16,5 @@
   "issue_tracker": "https://github.com/Matysh/houseplan-card/issues",
   "requirements": [],
   "single_config_entry": true,
-  "version": "1.26.0"
+  "version": "1.31.2"
 }

custom_components/houseplan/validation.py

@@ -88,6 +88,10 @@ SPACE_DISPLAY_SCHEMA = vol.Schema(
         vol.Optional("temp_min"): vol.Coerce(float),
         vol.Optional("temp_max"): vol.Coerce(float),
         vol.Optional("show_lqi"): bool,
+        vol.Optional("label_temp"): bool,
+        vol.Optional("label_hum"): bool,
+        vol.Optional("label_lqi"): bool,
+        vol.Optional("label_light"): bool,
     },
     extra=vol.ALLOW_EXTRA,
 )
@@ -140,6 +144,7 @@ MARKER_SCHEMA = vol.Schema(
         vol.Optional("link"): vol.Any(str, None),
         vol.Optional("description"): vol.Any(str, None),
         vol.Optional("tap_action"): vol.Any("info", "more-info", "toggle", None),
+        vol.Optional("room_id"): vol.Any(str, None),
         vol.Optional("display"): vol.Any("badge", "ripple", "icon_ripple", None),
         vol.Optional("ripple_color"): vol.Any(str, None),
         vol.Optional("ripple_size"): vol.Any(vol.All(vol.Coerce(float), vol.Range(min=1, max=20)), None),
@@ -157,6 +162,8 @@ CONFIG_SCHEMA = vol.Schema(
         vol.Optional("markers", default=list): [MARKER_SCHEMA],
         vol.Optional("settings", default=dict): vol.Schema(
             {
+                vol.Optional("known_devices"): [str],
+                vol.Optional("new_device_ids"): [str],
                 vol.Optional("fill_colors"): vol.Schema(
                     {
                         str: vol.Schema(

demo/smoke_card_tool_conflict.mjs

@@ -0,0 +1,51 @@
+import { launch } from './serve.mjs';
+const { page, browser } = await launch();
+const res = await page.evaluate(async () => {
+  const out = {};
+  const c = window.__card;
+  const sr = () => c.shadowRoot || c.renderRoot;
+  c._setMode('plan'); await c.updateComplete;
+  const stage = sr().querySelector('.stage');
+  const label = sr().querySelector('.roomlabel');
+  out.hasLabel = !!label;
+  // 1) draw: клик по карточке не добавляет точку
+  c._tool = 'draw'; c._path = []; await c.updateComplete;
+  label.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true, clientX: 10, clientY: 10 }));
+  await c.updateComplete;
+  out.drawIgnored = c._path.length === 0;
+  // 2) клик по угловой метке тоже не считается кликом инструмента
+  const handle = label.querySelector('.rlhandle');
+  handle.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true, clientX: 10, clientY: 10 }));
+  await c.updateComplete;
+  out.handleIgnored = c._path.length === 0;
+  // 3) во время резайза клики по сцене игнорируются
+  const room = c._spaceModel().rooms.find((r) => r.name);
+  c._rlResize = { id: 'rl_' + room.id, space: c._space, k0: 1, cx: 0, cy: 0, d0: 50 };
+  const before = c._path.length;
+  c._markupClick(new MouseEvent('click', { bubbles: true, clientX: 200, clientY: 200 }));
+  out.duringResizeIgnored = c._path.length === before;
+  c._rlResize = null;
+  // 4) обычный клик по сцене (мимо карточки) по-прежнему работает — точка ставится
+  const r = stage.getBoundingClientRect();
+  // найти долю экрана, попадающую в свободное место (не внутри комнаты)
+  let fx = 0.4, fy = 0.4;
+  outer: for (let ix = 1; ix < 20; ix++) for (let iy = 1; iy < 20; iy++) {
+    const ev = new MouseEvent('click', { clientX: r.left + r.width * ix / 20, clientY: r.top + r.height * iy / 20 });
+    const raw = c._svgPoint(ev);
+    if (!c._roomAt(c._snap(raw))) { fx = ix / 20; fy = iy / 20; break outer; }
+  }
+  stage.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true,
+    clientX: r.left + r.width * fx, clientY: r.top + r.height * fy }));
+  await c.updateComplete;
+  out.normalClickWorks = c._path.length === 1;
+  // 5) delroom: клик по карточке не зовёт confirm (переопределим)
+  let confirmCalled = false;
+  window.confirm = () => { confirmCalled = true; return false; };
+  c._tool = 'delroom'; c._path = []; await c.updateComplete;
+  label.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true, clientX: 10, clientY: 10 }));
+  await c.updateComplete;
+  out.delroomIgnored = !confirmCalled;
+  return out;
+});
+console.log(JSON.stringify(res, null, 1));
+await browser.close();

demo/smoke_editor_tabs.mjs

@@ -0,0 +1,39 @@
+import { launch } from './serve.mjs';
+const { page, browser } = await launch();
+const res = await page.evaluate(async () => {
+  const out = {};
+  const c = window.__card;
+  const sr = () => c.shadowRoot || c.renderRoot;
+  const tabs = () => [...sr().querySelectorAll('.modetab')];
+  // 1) две вкладки, Просмотра нет, крестиков в неактивных нет
+  out.twoTabs = tabs().length === 2;
+  out.labels = tabs().map((t) => t.textContent.trim());
+  out.noCrossIdle = sr().querySelectorAll('.modetab .closex').length === 0;
+  out.startView = c._mode === 'view';
+  // 2) клик по «Редактор плана» → активна, панель с крестиком
+  tabs()[0].click(); await c.updateComplete;
+  out.planActive = c._mode === 'plan' && tabs()[0].classList.contains('active');
+  out.planBar = !!sr().querySelector('.editbar');
+  out.planBarClose = !!sr().querySelector('.editbar .barclose');
+  out.tabCross = !!tabs()[0].querySelector('.closex');
+  // 3) повторный клик по активной вкладке — ничего
+  tabs()[0].click(); await c.updateComplete;
+  out.reclickNoop = c._mode === 'plan';
+  // 4) прямое переключение План → Устройства
+  tabs()[1].click(); await c.updateComplete;
+  out.directSwitch = c._mode === 'devices';
+  out.devBar = !!sr().querySelector('.editbar.devbar');
+  out.devBarBtns = sr().querySelectorAll('.editbar.devbar .btn:not(.barclose)').length;
+  // 5) инструменты устройств из шапки исчезли (в .bar их больше нет)
+  out.headerCleanInDev = !sr().querySelector('.bar > .btn[title*="' + (c._t('title.add_device')) + '"]');
+  // 6) крестик на панели → Просмотр
+  sr().querySelector('.editbar .barclose').click(); await c.updateComplete;
+  out.barCloseWorks = c._mode === 'view' && !sr().querySelector('.editbar');
+  // 7) крестик в самой вкладке → Просмотр (и не переключает режим)
+  tabs()[1].click(); await c.updateComplete;
+  tabs()[1].querySelector('.closex').click(); await c.updateComplete;
+  out.tabCrossWorks = c._mode === 'view';
+  return out;
+});
+console.log(JSON.stringify(res, null, 1));
+await browser.close();

demo/smoke_esc_dialogs.mjs

@@ -0,0 +1,35 @@
+import { launch } from './serve.mjs';
+const { page, browser } = await launch();
+const res = await page.evaluate(async () => {
+  const out = {};
+  const c = window.__card;
+  const esc = async () => { window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' })); await c.updateComplete; };
+  // общие настройки
+  c._openSettingsDialog(); await c.updateComplete;
+  await esc(); out.settings = !c._settingsDialog;
+  // правила иконок
+  c._openRulesDialog(); await c.updateComplete;
+  await esc(); out.rules = !c._rulesDialog;
+  // диалог устройства
+  c._setMode('devices'); c._openMarkerDialog(); await c.updateComplete;
+  await esc(); out.marker = !c._markerDialog;
+  // диалог пространства (+ очистка очереди импорта)
+  c._openSpaceDialog('edit', c._space); c._importQueue = ['x']; c._importTotal = 1; await c.updateComplete;
+  await esc(); out.space = !c._spaceDialog && c._importQueue.length === 0;
+  // инфо-карточка устройства
+  c._setMode('view'); c._infoCard = c._devices[0]; await c.updateComplete;
+  await esc(); out.info = !c._infoCard;
+  // инфо двери/замка
+  c._openingInfo = { id: 'op1', type: 'door', rx: 550, ry: 200, len_cm: 90, lock: 'lock.front_door' }; await c.updateComplete;
+  await esc(); out.openingInfo = !c._openingInfo;
+  // приоритет: инфо поверх настроек — Esc закрывает только инфо
+  c._openSettingsDialog(); c._infoCard = c._devices[0]; await c.updateComplete;
+  await esc(); out.stacked = !c._infoCard && !!c._settingsDialog;
+  await esc(); out.stacked2 = !c._settingsDialog;
+  // Esc в разметке по-прежнему откатывает точку, а не только диалоги
+  c._setMode('plan'); c._tool = 'draw'; c._path = [[1, 2], [3, 4]]; await c.updateComplete;
+  await esc(); out.undoPointStillWorks = c._path.length === 1;
+  return out;
+});
+console.log(JSON.stringify(res, null, 1));
+await browser.close();

demo/smoke_gear_tabs.mjs

@@ -0,0 +1,35 @@
+import { launch } from './serve.mjs';
+const { page, browser } = await launch();
+const res = await page.evaluate(async () => {
+  const out = {};
+  const c = window.__card;
+  const sr = () => c.shadowRoot || c.renderRoot;
+  const gears = () => sr().querySelectorAll('.tab .tabedit').length;
+  // шестерёнки видны во всех трёх режимах
+  out.viewGears = gears() > 0;
+  c._setMode('plan'); await c.updateComplete;
+  out.planGears = gears() > 0;
+  c._setMode('devices'); await c.updateComplete;
+  out.devGears = gears() > 0;
+  c._setMode('view'); await c.updateComplete;
+  // выравнивание: центр иконки ~ центру текста таба
+  const tab = sr().querySelector('.tab');
+  const icon = tab.querySelector('.tabedit');
+  const tb = tab.getBoundingClientRect(), ib = icon.getBoundingClientRect();
+  const tabMid = tb.top + tb.height / 2, iconMid = ib.top + ib.height / 2;
+  out.alignDelta = Math.abs(tabMid - iconMid);
+  out.aligned = out.alignDelta <= 1.5;
+  // клик по шестерёнке в Просмотре открывает диалог пространства и не переключает таб
+  const cur = c._space;
+  icon.click(); await c.updateComplete;
+  out.dialogOpens = !!c._spaceDialog;
+  out.tabNotSwitched = c._space === cur;
+  c._spaceDialog = null; await c.updateComplete;
+  // кнопка "+" по-прежнему только в Плане
+  out.noAddInView = !sr().querySelector('.tab.tabadd');
+  c._setMode('plan'); await c.updateComplete;
+  out.addInPlan = !!sr().querySelector('.tab.tabadd');
+  return out;
+});
+console.log(JSON.stringify(res, null, 1));
+await browser.close();

demo/smoke_gs_always.mjs

@@ -0,0 +1,18 @@
+import { launch } from './serve.mjs';
+const { page, browser } = await launch();
+const res = await page.evaluate(async () => {
+  const out = {};
+  const c = window.__card;
+  const sr = () => c.shadowRoot || c.renderRoot;
+  const gs = () => !!sr().querySelector('.head .btn[title="' + c._t('title.general_settings') + '"]');
+  out.view = gs();
+  c._setMode('plan'); await c.updateComplete; out.plan = gs();
+  c._setMode('devices'); await c.updateComplete; out.devices = gs();
+  c._setMode('view'); await c.updateComplete;
+  sr().querySelector('.head .btn[title="' + c._t('title.general_settings') + '"]').click();
+  await c.updateComplete;
+  out.opensInView = !!c._settingsDialog;
+  return out;
+});
+console.log(JSON.stringify(res));
+await browser.close();

demo/smoke_inert_openings.mjs

@@ -0,0 +1,47 @@
+import { launch } from './serve.mjs';
+const { page, browser } = await launch();
+const res = await page.evaluate(async () => {
+  const out = {};
+  const c = window.__card;
+  const sr = () => c.shadowRoot || c.renderRoot;
+  // добавить открывание на f1
+  c._serverCfg = { ...c._serverCfg, spaces: c._serverCfg.spaces.map((s) => s.id !== 'f1' ? s : ({
+    ...s, openings: [{ id: 'op1', type: 'door', rx: 550, ry: 200, angle: 90, len_cm: 90 }] })) };
+  c.requestUpdate(); await c.updateComplete;
+  const hit = sr().querySelector('.op-hit');
+  out.hasOpening = !!hit;
+  const cs = hit ? getComputedStyle(hit) : null;
+  out.viewInert = cs ? cs.pointerEvents === 'none' && cs.cursor === 'default' : null;
+  out.lockBadgeInert = (() => { const l = sr().querySelector('.oplock'); return l ? getComputedStyle(l).pointerEvents === 'none' : 'no-badge'; })();
+  // View: клик по открыванию ничего не открывает
+  c._opClick({ stopPropagation(){} }, { id: 'op1', rx: 550, ry: 200, rlen: 90 });
+  out.viewClickNoop = !c._openingInfo && !c._openingDialog;
+  // курсор устройств в Просмотре — pointer, в Устройствах — grab
+  const dev = sr().querySelector('.dev');
+  out.viewDevCursor = getComputedStyle(dev).cursor;
+  // бейдж замка: замок привязан → бейдж кликабелен и открывает инфо
+  c._serverCfg = { ...c._serverCfg, spaces: c._serverCfg.spaces.map((s2) => s2.id !== 'f1' ? s2 : ({
+    ...s2, openings: [{ id: 'op1', type: 'door', rx: 550, ry: 200, angle: 90, len_cm: 90, lock: 'lock.front_door' }] })) };
+  c.requestUpdate(); await c.updateComplete;
+  const badge = sr().querySelector('.oplock');
+  out.badgeShown = !!badge;
+  const bcs = badge ? getComputedStyle(badge) : null;
+  out.badgeClickableInView = bcs ? bcs.pointerEvents === 'auto' && bcs.cursor === 'pointer' : null;
+  badge?.click(); await c.updateComplete;
+  out.badgeOpensInfo = !!c._openingInfo;
+  c._openingInfo = null;
+  // Plan: op-hit интерактивен, клик редактирует
+  c._setMode('devices'); await c.updateComplete;
+  out.devModeCursor = getComputedStyle(sr().querySelector('.dev')).cursor;
+  c._setMode('plan'); await c.updateComplete;
+  out.badgeInertInPlan = (() => { const b = sr().querySelector('.oplock'); return b ? getComputedStyle(b).pointerEvents === 'none' : 'no-badge'; })();
+  const cs2 = getComputedStyle(sr().querySelector('.op-hit'));
+  out.planInteractive = cs2.pointerEvents === 'auto' && cs2.cursor === 'grab';
+  const op = c._spaceModel().openings?.[0] || { id: 'op1', rx: 550, ry: 200, rlen: 90 };
+  c._opClick({ stopPropagation(){} }, op);
+  out.planClickEdits = !!c._openingDialog;
+  c._openingDialog = null; c._setMode('view');
+  return out;
+});
+console.log(JSON.stringify(res, null, 1));
+await browser.close();

demo/smoke_lock_action.mjs

@@ -0,0 +1,51 @@
+import { launch } from './serve.mjs';
+const { page, browser } = await launch();
+const res = await page.evaluate(async () => {
+  const out = {};
+  const c = window.__card;
+  const sr = () => c.shadowRoot || c.renderRoot;
+  const calls = [];
+  c.hass = { ...c.hass, callService: (d, s, data) => calls.push([d, s, data.entity_id]) };
+  await c.updateComplete;
+  // добавить дверь с замком на f1
+  c._serverCfg = { ...c._serverCfg, spaces: c._serverCfg.spaces.map((s) => s.id !== 'f1' ? s : ({
+    ...s, openings: [{ id: 'op1', type: 'door', rx: 550, ry: 200, angle: 90, len_cm: 90, lock: 'lock.front_door' }] })) };
+  c.requestUpdate(); await c.updateComplete;
+  const op = c._spaceModel()?.openings?.[0] || { id: 'op1', type: 'door', rx: 550, ry: 200, len_cm: 90, lock: 'lock.front_door' };
+  out.hasLockedDoor = !!op.lock;
+  const lockId = op.lock;
+  // 1) замок закрыт → кнопка "Unlock"
+  c.hass = { ...c.hass, states: { ...c.hass.states, [lockId]: { state: 'locked', attributes: {} } } };
+  c._openingInfo = op; await c.updateComplete;
+  let btn = sr().querySelector('.btn.lockact');
+  out.unlockBtnShown = !!btn && !btn.disabled;
+  out.unlockBtnDanger = btn?.classList.contains('warn');
+  btn.click();
+  out.unlockCalled = JSON.stringify(calls.at(-1)) === JSON.stringify(['lock', 'unlock', lockId]);
+  // 2) замок открыт → кнопка "Lock"
+  c.hass = { ...c.hass, states: { ...c.hass.states, [lockId]: { state: 'unlocked', attributes: {} } } };
+  await c.updateComplete;
+  btn = sr().querySelector('.btn.lockact');
+  btn.click();
+  out.lockCalled = JSON.stringify(calls.at(-1)) === JSON.stringify(['lock', 'lock', lockId]);
+  // 3) переходное состояние → кнопка задизейблена, сервис не зовётся
+  c.hass = { ...c.hass, states: { ...c.hass.states, [lockId]: { state: 'unlocking', attributes: {} } } };
+  await c.updateComplete;
+  btn = sr().querySelector('.btn.lockact');
+  out.pendingDisabled = !!btn && btn.disabled;
+  // 4) недоступен → кнопки нет
+  c.hass = { ...c.hass, states: { ...c.hass.states, [lockId]: { state: 'unavailable', attributes: {} } } };
+  await c.updateComplete;
+  out.noBtnWhenUnavailable = !sr().querySelector('.btn.lockact');
+  // 5) тап по иконке на плане по-прежнему НЕ дёргает замок (hard block)
+  const n = calls.length;
+  const dev = c._devices.find((d) => d.domains?.includes('lock'));
+  out.planTapStillBlocked = true;
+  if (dev) {
+    c._clickDevice(new MouseEvent('click'), dev); await c.updateComplete;
+    out.planTapStillBlocked = !calls.slice(n).some((x) => x[0] === 'lock' && (x[1] === 'lock' || x[1] === 'unlock'));
+  }
+  return out;
+});
+console.log(JSON.stringify(res, null, 1));
+await browser.close();

demo/smoke_merge_highlight.mjs

@@ -0,0 +1,24 @@
+import { launch } from './serve.mjs';
+const { page, browser } = await launch();
+const res = await page.evaluate(async () => {
+  const out = {};
+  const c = window.__card;
+  const sr = () => c.shadowRoot || c.renderRoot;
+  c._setMode('plan'); c._tool = 'merge'; await c.updateComplete;
+  const room = c._spaceModel().rooms.find((r) => r.name);
+  c._mergeSel = room.id; c.requestUpdate(); await c.updateComplete;
+  await new Promise((r) => setTimeout(r, 250)); // дождаться transition 0.12s
+  const el = [...sr().querySelectorAll('.room')].find((e) => e.classList.contains('picked'));
+  out.pickedRendered = !!el;
+  const cs = el ? getComputedStyle(el) : null;
+  out.amberStroke = cs ? cs.stroke.includes('255, 193, 77') : null;
+  out.amberFill = cs ? cs.fill.includes('255, 193, 77') : null;
+  // split-выбор подсвечивается так же
+  c._mergeSel = null; c._tool = 'split'; c._splitSel = { roomId: room.id }; c.requestUpdate(); await c.updateComplete;
+  await new Promise((r) => setTimeout(r, 250));
+  const el2 = [...sr().querySelectorAll('.room')].find((e) => e.classList.contains('picked'));
+  out.splitPicked = !!el2 && getComputedStyle(el2).stroke.includes('255, 193, 77');
+  return out;
+});
+console.log(JSON.stringify(res));
+await browser.close();

demo/smoke_merge_split.mjs

@@ -16,7 +16,7 @@ const S = () => page.evaluate(() => {
   return { rooms: c._serverCfg.spaces.find((s) => s.id==='f1').rooms.map((r)=>({id:r.id,name:r.name,area:r.area})),
     mergeDlg: !!c._mergeDialog, roomDlg: !!c._roomDialog, pendingSplit: !!c._pendingSplit, toast: c._toast };
 });
-const enter = (t) => page.evaluate((t)=>{const c=window.__card; if(!c._markup)c._toggleMarkup(); c._tool=t; return true;}, t);
+const enter = (t) => page.evaluate((t)=>{const c=window.__card; if(!c._markup)c._setMode('plan'); c._tool=t; return true;}, t);
 const out = {};
 
 // MERGE living(r1)+kitchen(r2) — share wall x=0.55, y∈[0.05..0.45]

demo/smoke_new_device.mjs

@@ -0,0 +1,32 @@
+import { launch } from './serve.mjs';
+const { page, browser } = await launch();
+const res = await page.evaluate(async () => {
+  const out = {};
+  const c = window.__card;
+  const sr = () => c.shadowRoot || c.renderRoot;
+  // 1) первый запуск: базлайн засеян молча, точек нет
+  out.baselineSeeded = Array.isArray(c._serverCfg.settings.known_devices) && c._serverCfg.settings.known_devices.length > 0;
+  out.noDotsOnFirstRun = sr().querySelectorAll('.newdot').length === 0;
+  // 2) в HA появилось новое устройство
+  const h = { ...c.hass };
+  h.devices = { ...h.devices, d_new: { id: 'd_new', name: 'Brand new plug', model: 'Smart Plug', area_id: 'kitchen', identifiers: [['demo', 'd_new']] } };
+  h.entities = { ...h.entities, 'switch.newplug': { entity_id: 'switch.newplug', device_id: 'd_new', platform: 'demo' } };
+  h.states = { ...h.states, 'switch.newplug': { state: 'off', attributes: { friendly_name: 'Brand new plug' } } };
+  c.hass = h; await c.updateComplete; c.requestUpdate(); await c.updateComplete;
+  out.flagged = c._serverCfg.settings.new_device_ids?.includes('d_new');
+  out.dotShown = sr().querySelectorAll('.newdot').length === 1;
+  // 3) существующие не флагуются
+  out.onlyOne = (c._serverCfg.settings.new_device_ids || []).length === 1;
+  // 4) открытие редактора снимает флаг
+  const dev = c._devices.find((d) => d.id === 'd_new');
+  c._setMode('devices');
+  c._openMarkerDialog(dev); await c.updateComplete;
+  c._markerDialog = null; c._setMode('view'); await c.updateComplete;
+  out.ackCleared = !(c._serverCfg.settings.new_device_ids || []).includes('d_new');
+  out.dotGone = sr().querySelectorAll('.newdot').length === 0;
+  // 5) known растёт, повторно не флагуется
+  out.stillKnown = c._serverCfg.settings.known_devices.includes('d_new');
+  return out;
+});
+console.log(JSON.stringify(res, null, 1));
+await browser.close();

demo/smoke_rgb_alarm.mjs

@@ -0,0 +1,32 @@
+import { launch } from './serve.mjs';
+const { page, browser } = await launch();
+const res = await page.evaluate(async () => {
+  const out = {};
+  const c = window.__card;
+  const sr = () => c.shadowRoot || c.renderRoot;
+  // RGB-лампа: ceiling on + rgb_color
+  c.hass = { ...c.hass, states: { ...c.hass.states,
+    'light.ceiling': { entity_id: 'light.ceiling', state: 'on', attributes: { friendly_name: 'Ceiling light', rgb_color: [255, 0, 128] } } } };
+  await c.updateComplete;
+  const rgbDev = sr().querySelector('.dev.rgb');
+  out.rgbClass = !!rgbDev;
+  out.rgbVar = rgbDev?.getAttribute('style')?.includes('--light-color:rgb(255, 0, 128)');
+  // тревога: датчик протечки on
+  c.hass = { ...c.hass, states: { ...c.hass.states,
+    'binary_sensor.sink_leak': { entity_id: 'binary_sensor.sink_leak', state: 'on', attributes: { friendly_name: 'Leak', device_class: 'moisture' } } } };
+  await c.updateComplete;
+  out.alarmCount = sr().querySelectorAll('.dev.alarm').length;
+  // выключили — тревога ушла
+  c.hass = { ...c.hass, states: { ...c.hass.states,
+    'binary_sensor.sink_leak': { entity_id: 'binary_sensor.sink_leak', state: 'off', attributes: { friendly_name: 'Leak', device_class: 'moisture' } } } };
+  await c.updateComplete;
+  out.alarmCleared = sr().querySelectorAll('.dev.alarm').length === 0;
+  // unavailable не тревожит
+  c.hass = { ...c.hass, states: { ...c.hass.states,
+    'binary_sensor.sink_leak': { entity_id: 'binary_sensor.sink_leak', state: 'unavailable', attributes: { device_class: 'moisture' } } } };
+  await c.updateComplete;
+  out.outageSafe = sr().querySelectorAll('.dev.alarm').length === 0;
+  return out;
+});
+console.log(JSON.stringify(res, null, 1));
+await browser.close();

demo/smoke_room_cards.mjs

@@ -0,0 +1,61 @@
+import { launch } from './serve.mjs';
+const { page, browser } = await launch();
+const res = await page.evaluate(async () => {
+  const out = {};
+  const c = window.__card;
+  const sr = () => c.shadowRoot || c.renderRoot;
+  // включить имена и все метрики у текущего пространства
+  const spId = c._space;
+  c._serverCfg = { ...c._serverCfg, spaces: c._serverCfg.spaces.map((s) => s.id !== spId ? s : ({
+    ...s, settings: { ...(s.settings || {}), show_names: true,
+      label_temp: true, label_hum: true, label_lqi: true, label_light: true } })) };
+  c.requestUpdate(); await c.updateComplete;
+  const labels = [...sr().querySelectorAll('.roomlabel')];
+  out.labels = labels.length;
+  const cards = labels.filter((l) => l.classList.contains('card'));
+  out.cardsWithMetrics = cards.length;
+  out.hasName = !!labels[0]?.querySelector('.rlname');
+  const metrics = cards[0] ? [...cards[0].querySelectorAll('.rlm')].map((m) => m.textContent.trim()) : [];
+  out.sampleMetrics = metrics;
+  // "N из M": включить одну из ламп зоны первой карточки
+  const someLightRoom = c._spaceModel().rooms.find((r) => r.area && c._devices.some((d) => d.area === r.area && d.entities.some((e) => e.startsWith('light.'))));
+  out.partialTested = false;
+  if (someLightRoom) {
+    const lights = [...new Set(c._devices.filter((d) => d.area === someLightRoom.area).flatMap((d) => d.entities).filter((e) => e.startsWith('light.')))];
+    if (lights.length >= 2) {
+      const st = { ...c.hass.states };
+      lights.forEach((e, i) => { st[e] = { ...st[e], state: i === 0 ? 'on' : 'off' }; });
+      c.hass = { ...c.hass, states: st }; await c.updateComplete;
+      const lbl = [...sr().querySelectorAll('.roomlabel.card')].find((l) => l.textContent.includes(someLightRoom.name));
+      out.partialText = lbl?.querySelector('.rlm.lit')?.textContent.trim();
+      out.partialTested = /1\D+' + lights.length + '/.test(out.partialText || '') || (out.partialText || '').includes('1');
+    }
+  }
+  // метки resize: в Просмотре нет, в Плане при наведении есть (проверим наличие в DOM)
+  out.noHandlesInView = sr().querySelectorAll('.rlhandle').length === 0;
+  c._setMode('plan'); await c.updateComplete;
+  const planLbl = sr().querySelector('.roomlabel');
+  out.handlesInPlan = planLbl?.querySelectorAll('.rlhandle').length === 4;
+  // метрики скрыты в редакторе плана (карточка = имя, чтобы не мешать разметке)
+  out.plainInPlan = sr().querySelectorAll('.roomlabel.card').length === 0;
+  // масштаб: сымитируем resize через прямой вызов
+  const room = c._spaceModel().rooms.find((r) => r.name);
+  c._rlResize = { id: 'rl_' + room.id, space: spId, k0: 1, cx: 100, cy: 100, d0: 50 };
+  c._rlResizeMove({ clientX: 200, clientY: 100, stopPropagation() {} });
+  c._rlResizeUp();
+  await c.updateComplete;
+  out.scaleSaved = Math.abs((c._layout['rl_' + room.id]?.k || 0) - 2) < 0.01;
+  const lblEl = sr().querySelector('.roomlabel');
+  out.scaleApplied = getComputedStyle(lblEl).getPropertyValue('--rl-scale').trim() === '2';
+  // клампы
+  c._rlResize = { id: 'rl_' + room.id, space: spId, k0: 2, cx: 100, cy: 100, d0: 50 };
+  c._rlResizeMove({ clientX: 1000, clientY: 100, stopPropagation() {} });
+  c._rlResizeUp();
+  out.clamped = c._layout['rl_' + room.id].k <= 3;
+  // drag сохраняет масштаб
+  c._savePos({ id: 'rl_' + room.id, space: spId }, 300, 300);
+  out.dragKeepsScale = c._layout['rl_' + room.id].k <= 3 && c._layout['rl_' + room.id].k >= 2.9;
+  return out;
+});
+console.log(JSON.stringify(res, null, 1));
+await browser.close();

demo/smoke_split_nonsnap.mjs

@@ -5,7 +5,7 @@ const R = (nx, ny) => page.evaluate(([nx, ny]) => {
   const c = window.__card; const H = 1000 / c._curSpaceCfg.aspect; return [nx * 1000, ny * H];
 }, [nx, ny]);
 const out = {};
-await page.evaluate(()=>{const c=window.__card; if(!c._markup)c._toggleMarkup(); c._tool='split';});
+await page.evaluate(()=>{const c=window.__card; if(!c._markup)c._setMode('plan'); c._tool='split';});
 // living room (r1) has walls at y=0.05 which are NOT grid nodes; click near the wall
 await page.evaluate((p)=>window.__card._splitClick(p), await R(0.3,0.3));   // pick living
 await page.evaluate((p)=>window.__card._splitClick(p), await R(0.3,0.052)); // near top wall (off grid)

demo/smoke_subarea.mjs

@@ -0,0 +1,35 @@
+import { launch } from './serve.mjs';
+const { page, browser } = await launch();
+const res = await page.evaluate(async () => {
+  const out = {};
+  const c = window.__card;
+  // комната без зоны на f1
+  c._serverCfg = { ...c._serverCfg, spaces: c._serverCfg.spaces.map((s) => s.id !== 'f1' ? s : ({
+    ...s, rooms: [...s.rooms, { id: 'rc', name: 'Cupboard', area: null, poly: [[0.05,0.62],[0.2,0.62],[0.2,0.9],[0.05,0.9]] }],
+  })) };
+  c._regSignature = ''; c._maybeRebuildDevices(); await c.updateComplete;
+  // список комнат в диалоге содержит подзону
+  c._setMode('devices');
+  c._openMarkerDialog(); await c.updateComplete;
+  const rooms = c._allRoomsFlat();
+  out.subareaListed = rooms.some((r) => r.value === 'f1#@rc');
+  // создать виртуальный маркер в подзону
+  c._markerDialog = { ...c._markerDialog, name: 'Vacuum dock', binding: 'virtual', room: 'f1#@rc' };
+  await c._saveMarker(); await c.updateComplete;
+  const m = c._serverCfg.markers.find((x) => x.name === 'Vacuum dock');
+  out.markerRoomId = m?.room_id;
+  out.markerAreaNull = m ? m.area === null : null;
+  // позиция — в центре подзоны (норм. центр rc: x=0.125, y=0.76)
+  const pos = c._layout[m.id];
+  out.posInRoom = pos && Math.abs(pos.x - 0.125) < 0.03 && Math.abs(pos.y - 0.76) < 0.03;
+  // девайс отрисован
+  const dev = c._devices.find((d) => d.id === m.id);
+  out.deviceBuilt = !!dev && dev.space === 'f1';
+  // reopen диалога восстанавливает выбор
+  c._openMarkerDialog(dev); 
+  out.reopenRoom = c._markerDialog?.room;
+  c._markerDialog = null;
+  return out;
+});
+console.log(JSON.stringify(res, null, 1));
+await browser.close();

docs/CHANGELOG.md

@@ -1,5 +1,112 @@
 # Changelog
 
+## v1.31.2 — 2026-07-22
+- Plan editor: the room picked with the **Merge** tool (and the room selected
+  for **Split**) is highlighted amber again. The `.outlined` markup style,
+  added later in the stylesheet, was silently overriding the `.picked`
+  highlight at equal specificity (source-order gotcha #4 — rule order fixed
+  and documented in the stylesheet).
+
+## v1.31.1 — 2026-07-22
+- Plan editor: interacting with a room card (drag, corner-resize or a plain
+  click) no longer leaks into the active markup tool — previously the click
+  after a resize could add an outline point, pick a merge/split room or even
+  prompt to delete the room under the card.
+
+## v1.31.0 — 2026-07-22 (room cards)
+- Room labels grew into **room cards**: the name on top, and an optional
+  smaller metrics line below — temperature, humidity, average Zigbee signal
+  and lights, each behind its own checkbox in the space settings (all off by
+  default). Lights show On/Off, or **"1 of 3"** when only part of the room is
+  lit. Rooms without an HA area keep showing just the name.
+- Cards are **resizable** in the Plan editor: hovering shows corner handles;
+  dragging one scales the whole card uniformly (0.5×–3×). The scale is stored
+  in the layout next to the card position, and dragging keeps it.
+- Fixed a latent v1.25 regression: room labels were not rendered as draggable
+  HTML in the Plan editor at all (only a static SVG name), so moving them was
+  impossible. The Plan editor now renders real cards (name only) that can be
+  dragged and resized.
+- Two markup smokes (merge/split) still called a method removed in v1.25 —
+  repaired.
+
+## v1.30.4 — 2026-07-22
+- **Escape now closes every dialog** (general settings, icon rules, device
+  editor, space dialog, opening editor, info cards), topmost first when
+  stacked. Closing the space dialog with Esc abandons a floor-import queue,
+  same as its Cancel button. Esc while drawing an outline still undoes the
+  last point (dialogs take priority).
+
+## v1.30.3 — 2026-07-22
+- The **General settings** (fill palette) gear in the header is now visible in
+  every mode for users who can edit, not just in the Plan editor.
+
+## v1.30.2 — 2026-07-22 (editor tabs redesign)
+- Mode tabs renamed and reduced to two: **"Plan editor"** and **"Device
+  editor"**. View is no longer a tab — it is the implicit default state.
+- The Device editor now has its own bottom toolbar (add / show all / reset
+  layout / icon rules moved out of the header), mirroring the Plan toolbar.
+- Both toolbars and the active tab itself got an **X** button that closes the
+  editor and returns to View. Re-clicking the active tab does nothing;
+  switching Plan↔Devices is direct.
+
+## v1.30.1 — 2026-07-22 (space gear polish)
+- The gear icon next to the space name is now visible in **every mode** (not
+  just Plan) for users who can edit, so space settings are always one click
+  away. The "+" (add space) tab remains Plan-only.
+- Fixed the gear's vertical alignment — it sat noticeably lower than the space
+  name (baseline-aligned web component); tabs are now flex-centered.
+
+## v1.30.0 — 2026-07-22 (lock action in the opening info card)
+- The door/window info card (View mode) now offers an explicit **Unlock/Lock
+  button** when a lock entity is bound and available. Unlock is styled red as a
+  security-sensitive action; the button is disabled during locking/unlocking and
+  hidden when the lock is unavailable.
+- The security rule is untouched: **tapping a lock icon on the plan still never
+  toggles it** — the action lives only behind a deliberate, clearly labeled
+  button, same interaction contract as HA's more-info dialog.
+
+## v1.29.0 — 2026-07-22 (the "new device" flag)
+- **Devices that appear in HA after installation no longer show up silently**:
+  an auto-placed device (or light group) gets a big red dot at the top-right of
+  its icon. The flag is stored server-side (`settings.new_device_ids`), so every
+  client sees it — and it disappears everywhere the first time someone opens
+  that device's editor.
+- The baseline of known devices is seeded silently on the first run after the
+  update, so **existing devices never flood the plan with dots**. Hand-made
+  markers (virtual/rebindings) are never flagged — the user just created them.
+  (Pure `diffNewDevices`, unit-tested; backend schema for the two new settings.)
+
+## v1.28.1 — 2026-07-22 (View-mode polish: cursors and inert openings)
+- **Device icons in View no longer show the grab cursor** (drag lives in the
+  Devices mode); they show a pointer — clicking still works exactly as before.
+- **Doors and windows in View are pure drawings**: no grab cursor, no hover
+  outline, no hit target, no click — regardless of what is bound to them.
+- **The lock badge is the one exception**: when a lock is bound, the badge is
+  shown and clickable in View (pointer cursor, click opens the door/lock info
+  card). It stays inert in Plan so it does not fight editing.
+- In Plan an opening remains fully interactive: grab cursor + hover outline,
+  dragging along walls, and a click with ANY tool opens its properties dialog.
+
+## v1.28.0 — 2026-07-21 (sub-area rooms: manual placement without an HA area; issue #3)
+- **Devices can now be placed into rooms that have no Home Assistant area.**
+  The marker dialog's room list includes area-less rooms (marked "no area,
+  manual"); pick one and the device/virtual marker lands at its centre. The
+  marker stores `room_id`, so the choice survives edits and re-opens. The
+  laundry-cupboard case from issue #3: a decorative room inside a larger area
+  can now hold its own door sensor and light.
+- Room reference parsing extracted as pure `parseRoomRef` (`space#area` /
+  `space#@roomId`), unit-tested; backend schema for `room_id`.
+
+## v1.27.0 — 2026-07-21 (RGB light colors + alarm pulse; issue #3)
+- **RGB lights show their actual color**: an "on" light with a color tints its
+  bulb icon, glow and — unless a custom ripple color is set — its presence ripple.
+  Brightness is deliberately ignored (a dim red bulb still reads red); off,
+  white-only and unavailable lights look as before. (Pure `lightColorOf`.)
+- **Emergencies pulse red**: leak / smoke / gas / CO / safety / tamper / problem
+  binary sensors and sirens in `on` get a red pulsing ring over any display mode.
+  `unavailable`/`unknown` never alarm — an outage is not a fire. Honours
+  `prefers-reduced-motion`. (Pure `isAlarmState`.)
+
 ## v1.26.0 — 2026-07-21 (state-reflecting icons + value display; issue #3)
 - **Auto icons now reflect live state**, like core HA: door/window/garage sensors
   swap open↔closed variants, locks show locked/unlocked, a bulb lights up as

docs/ROADMAP.md

@@ -74,12 +74,12 @@ Track progress in `custom_components/houseplan/quality_scale.yaml` (done/exempt
 - [ ] GitHub: issue templates, discussions on, CONTRIBUTING.md (build/test in 5 minutes).
 - [ ] Semantic versioning discipline; keep release notes user-facing (they show in HACS).
 
-## Phase 11 — UX modes redesign (approved, see docs/UX-MODES.md)
+## Phase 11 — UX modes redesign ✅ DONE (v1.25.0–v1.28.0, see docs/UX-MODES.md)
 
-Three-tab interaction model (View / Plan / Devices): view mode is display-only —
-no dragging or editing; all editing splits between a Plan tab and a Devices tab.
-Deprecates "drag anywhere" and view-mode opening drag. Follow-ups from issue #3:
-state-reflecting icons, value display, RGB light colors, alarm visuals, sub-area rooms.
+Shipped: the three-tab interaction model (View / Plan / Devices, v1.25.0),
+state-reflecting icons + value display (v1.26.0), RGB light colors + alarm pulse
+(v1.27.0), sub-area rooms (v1.28.0). Remaining backlog from issue #3: music
+notes for players, directional TV ripples (not planned).
 
 ## Explicit non-goals (for now)
 

docs/SCOPE.md

@@ -0,0 +1,97 @@
+# Product scope — what House Plan is and is not
+
+*Fixed with the owner on 2026-07-22. This document is a guard rail: features are
+built, improved and accepted **only** if they serve a job listed here. When a new
+idea appears, first find its row in this file; if there is none — it belongs to
+HA core, to another card, or nowhere. Companion documents: PRODUCT.md (market),
+ROADMAP.md (order of work), UX-MODES.md (interaction model).*
+
+## Mission
+
+House Plan is the **spatial "at a glance + quick act" layer** for a Home
+Assistant home. Upload or draw a floor plan, outline rooms bound to HA areas,
+and the home's devices appear on a live, tappable map: states, climate, alerts,
+guarded quick actions. Setup is GUI-only — no Inkscape, no YAML, no external
+editors. Everything that is not "look at the home spatially and act on the
+obvious" is somebody else's job.
+
+## Target audience
+
+| Persona | Role | Surface |
+|---|---|---|
+| **Home admin** (primary) | HA enthusiast, house/large flat, 20–200 devices, several floors; sets up and maintains the plan | Desktop browser (both editors live here) |
+| **Household members** | Non-technical; consume the plan daily, never edit | Wall tablet (kiosk), phone (companion app) |
+| **Guests / kiosk** | View-only glance at the home | Wall tablet |
+
+Design consequence: **View mode is the product** for two of the three personas.
+Editors are admin-only tools and must never leak interactions into View
+(established by UX-MODES; lock guard, inert openings, no drag in View).
+
+## Core user jobs — the component must close these
+
+| # | Job (user's words) | Status |
+|---|---|---|
+| J1 | "Show the whole home and what's happening right now" — live spatial overview: device states, room fills (light/temp/LQI), values, multi-floor tabs | **Closed** |
+| J2 | "Something is wrong — show me *where*" — leak/smoke/gas pulse, open doors/windows, unlocked locks, red dot on devices HA added silently | **Closed** |
+| J3 | "Let me act on the obvious right from the plan" — tap-to-toggle for safe domains, info cards, guarded lock action (explicit button only, never a plan tap) | **Closed** |
+| J4 | "From zero to a working plan in one evening, no Inkscape/YAML" — image/PDF/draw, floors-import wizard, room polygons bound to areas, curated auto-placement, editable icon rules | **Closed**; onboarding polish is *partial* (no registry-driven room suggestions) |
+| J5 | "Room climate at a glance" — per-room temperature/humidity, comfort-range fills, room-card metrics | **Closed** |
+| J6 | "Keep the plan true as the home evolves" — new-device flag, two editors, drag/resize, merge/split, multi-client live sync, optimistic locking | **Closed** |
+| J7 | "Is my Zigbee mesh healthy *here*?" — LQI badges, per-room average, LQI fill | **Closed** (kept deliberately: cheap, spatial by nature, no in-plan competitor) |
+
+## Partially covered — improvement backlog stays inside these
+
+- **Touch ergonomics of the editors**: corner handles and grid clicks are small on
+  tablets; editors are desktop-first today. Improve, don't redesign.
+- **Value display**: single current value per device; units/precision follow HA
+  formatting only.
+- **Accessibility**: `prefers-reduced-motion` only; no keyboard navigation in
+  editors, no ARIA labelling of the plan.
+- **Docs/screenshots**: README predates the two-editor redesign.
+
+## Known gaps that fit the mission (build only on owner's request)
+
+- Person/presence shown in rooms (classic floorplan ask; pure J1).
+- Plan-level "security glance": one badge for "all locked / N open" (J2).
+- Threshold colouring for room-card metrics (J5).
+
+## Out of scope — never build, point users to the right tool
+
+- Automations, scenes, scripts, notifications → HA core.
+- Device/entity administration (rename, reassign area, disable) → HA registry
+  UIs. We *read* the registry, we never manage it.
+- History, graphs, statistics → recorder/history cards. We show now, not then.
+- Camera streams, media controls → their own cards; our more-info opens HA's.
+- Energy monitoring/analytics → HA Energy.
+- 3D / isometric / photorealistic rendering, furniture drawing → niche tools
+  (easy-floorplan et al.); we are a schematic live map, not an interior editor.
+- A general dashboard framework (menus, popups, theming engine) → Bubble Card,
+  Dwains and friends.
+
+## Excess-functionality audit (2026-07-22)
+
+- **Device metadata: links & PDF manuals** — not spatial, but tiny, server-side,
+  and used in real installs. Verdict: **keep, frozen** (no growth).
+- **Virtual devices** — placeholders for not-yet-installed hardware; serves J6.
+  Verdict: **keep, frozen**.
+- **LQI diagnostics** — promoted to J7 (differentiator), not excess.
+- Nothing found that warrants removal; the mode redesign already moved every
+  interaction to where it belongs.
+
+## The component in one breath (README/HACS copy)
+
+> **House Plan** turns your Home Assistant into a live map of your home. Upload
+> a plan image (or draw one), outline rooms and bind them to HA areas — your
+> devices appear in place, automatically, with live states. Glance at the wall
+> tablet: what's on, what's open, what's too cold, what's leaking, what's new.
+> Tap to act — safely: locks never toggle by accident. Two built-in editors
+> (plan and devices) mean no Inkscape, no YAML, no external tools — ever.
+
+**Tasks it closes:** whole-home live overview · spatial alerts (leak/smoke/open/
+unlocked/new device) · safe quick actions · per-room climate · Zigbee mesh
+health · zero-to-plan GUI onboarding · keeping the plan true over years.
+
+**Pains it removes:** hand-crafted SVG + YAML floorplans · entity-list
+dashboards that hide *where* things happen · silent device sprawl · accidental
+toggles of security devices · per-device dashboards that non-technical family
+members can't read.

docs/STATUS.md

@@ -13,7 +13,7 @@
 
 | Item | State |
 |---|---|
-| Version | **v1.26.0** everywhere (manifest, const.py, package.json, CARD_VERSION) |
+| Version | **v1.27.0** everywhere (manifest, const.py, package.json, CARD_VERSION) |
 | GitHub | https://github.com/Matysh/houseplan-card — branch `main`, releases v1.9.3…**v1.23.1** (latest published 2026-07-17, bundle auto-attached by release.yml) |
 | CI | `.github/workflows/validate.yml` (hacs + hassfest + frontend + backend) — **fully green** since v1.11.1; `release.yml` auto-attaches the card bundle (needs `permissions: contents: write`, fixed) |
 | HACS | Works as custom repository (id 1290210112 on the home instance). **Inclusion PR: https://github.com/hacs/default/pull/9004** (queue ≈2 months as of 2026-07). Lesson: #8995 was auto-closed by hacs-bot — the PR body MUST be their exact template with every checkbox ticked and all 3 links (release, HACS action run, hassfest run); a custom body gets closed without discussion |
@@ -129,3 +129,9 @@
    md5-verify after every deploy, restart HA via
    `nohup ha core restart >/dev/null 2>&1 </dev/null &` (otherwise the SSH session hangs).
 5. GitHub pushes need a PAT (create via the user's Chrome: settings/tokens, repo+workflow scope).
+
+## Product scope
+
+docs/SCOPE.md (fixed 2026-07-22) is the guard rail for all feature work: mission,
+personas, jobs J1–J7, partial/out-of-scope lists, excess audit. Check it before
+accepting or proposing any feature.

docs/TESTING.md

@@ -40,8 +40,16 @@ Run the *core flows* (marked ★ below) in each environment at least once per mi
 - [ ] Devices: icon drag works, click opens the marker editor directly; +/👁/↺/⬡
       buttons; accent stage frame [auto]
 - [ ] Mode tabs hidden for non-admin users; segmented control highlights the active mode
-- [ ] Opening: single click in View shows the info card; in Plan a click edits it;
-      double-click no longer does anything special [auto]
+- [ ] Openings in View (v1.28.1): the door/window itself is a pure drawing — no
+      cursor change, no hover outline, no hit target, no click, regardless of
+      bindings [auto]
+- [ ] The LOCK BADGE is the one exception: when a lock is bound it is shown and
+      clickable in View (pointer cursor, click → door/lock info card); inert in
+      Plan so it does not fight editing [auto]
+- [ ] Device icons in View show a pointer cursor (no grab); grab only in the
+      Devices mode [auto]
+- [ ] In Plan an opening is interactive: grab cursor, hover outline, drag along
+      walls, click (any tool) opens its properties [auto]
 
 ## Onboarding ★
 
@@ -128,6 +136,44 @@ Run the *core flows* (marked ★ below) in each environment at least once per mi
       lock locked↔unlocked, bulb on; custom icons and unavailable states never morph [auto]
 - [ ] display "Value instead of an icon": the marker shows the measurement (°/%/unit)
       as its body, small badges hidden; non-numeric fallback keeps the icon [auto]
+- [ ] RGB lights (v1.27.0): an on light with a color tints its icon/glow and the ripple
+      (explicit ripple color still wins); off/white lights unchanged [auto]
+- [ ] Alarm pulse (v1.27.0): leak/smoke/gas/CO/siren in 'on' pulse a red ring over any
+      display mode; clears on 'off'; unavailable never alarms [auto]; reduced-motion static
+- [ ] Merge/split pick highlight (v1.31.2): the first room clicked with the
+      Merge tool (and the split-selected room) gets an amber outline + fill;
+      visible over the blue markup outlines [auto]
+- [ ] Card vs tool conflict (v1.31.1): in the Plan editor, dragging/resizing or
+      clicking a room card never feeds the active tool (no draw point, no
+      delete-room confirm, no merge/split pick); clicks past the card work [auto]
+- [ ] Room cards (v1.31.0): with metrics enabled in space settings (4
+      checkboxes: temperature, humidity, avg Zigbee, lights) the room name gets
+      a smaller metrics line under it; lights show On/Off or "1 of 3" when
+      partially lit; rooms without an HA area show the name only; in the Plan
+      editor cards show the name only, are draggable and resizable via corner
+      handles on hover (uniform scale 0.5–3, stored in layout, survives drag);
+      View mode has no handles/hover [auto]
+- [ ] Esc closes dialogs (v1.30.4): Escape closes the topmost dialog (opening
+      info, device info, icon rules, general settings, device editor, opening
+      editor, space dialog incl. abandoning an import queue); stacked dialogs
+      close one per press; Esc while drawing still undoes the last point [auto]
+- [ ] General settings gear (v1.30.3): the header cog is visible in every mode
+      (admins), opens the palette dialog from View too [auto]
+- [ ] Editor tabs (v1.30.2): only two tabs — "Plan editor" / "Device editor"
+      (no View button; View is the default state); clicking a tab opens its
+      bottom toolbar (Devices got its own bar with add/show-all/reset/rules);
+      the bar and the active tab both show an X that returns to View; re-click
+      on the active tab does nothing; Plan↔Devices switches directly [auto]
+- [ ] Space gear (v1.30.1): the cog next to the space name is visible in every
+      mode (admins only), vertically centered with the tab text; clicking it
+      opens space settings without switching the tab; "+" tab stays Plan-only [auto]
+- [ ] Lock action (v1.30.0): opening info card (View) shows Unlock (red) when
+      locked / Lock when unlocked; button calls the lock service; disabled while
+      locking/unlocking; hidden when unavailable; plan-icon tap still never
+      toggles a lock [auto]
+- [ ] New-device flag (v1.29.0): a device added to HA after install gets a big red
+      dot top-right of its icon (all clients); opening its editor clears it
+      everywhere; upgrade/first-run seeds the baseline silently — no dot flood [auto]
 - [ ] No devices at all in HA (fresh instance) → plan renders, "0 dev.", no console errors [auto]
 
 ## Device dialog (markers) ★
@@ -135,6 +181,9 @@ Run the *core flows* (marked ★ below) in each environment at least once per mi
 - [ ] Open via info card → Edit; all fields persist (name, icon, model, link, description)
 - [ ] Rebind to another device/entity/helper: search filters; already-placed candidates excluded; old position cleaned up [auto backend]
 - [ ] Virtual device: requires name; room required; renders dashed
+- [ ] Sub-area rooms (v1.28.0): a room WITHOUT an HA area appears in the marker
+      room list ("no area, manual"); a device placed there lands at its centre,
+      the marker stores room_id, reopening the dialog restores the choice [auto]
 - [ ] Room override moves the icon to the room center
 - [ ] Tap-action override select (default/info/more-info/toggle) saves and applies
 - [ ] PDF/manual upload: ok path; >50 MB → readable error; .exe → bad-ext error [auto backend]; traversal names sanitized [auto backend]

docs/UX-MODES.md

@@ -12,17 +12,24 @@ A segmented control in the card header with three tabs; the active one is visual
 highlighted, and edit modes add a colored frame around the stage so the mode is
 obvious at a glance:
 
-**[ 👁 View ] [ 📐 Plan ] [ 🔧 Devices ]**
+**[ 📐 Plan editor ] [ 🔧 Device editor ]** — View has NO tab (since v1.30.2).
 
-- **View** is the default and the only mode after every load (edit modes are never
-  restored across reloads).
-- **Plan** and **Devices** are shown only to admins when `admin_only` is on.
+- **View** is the implicit default state: no editor tab is active. It is the only
+  state after every load (edit modes are never restored across reloads).
+- Activating an editor tab highlights it and opens that editor's bottom toolbar
+  (both editors have one since v1.30.2). The toolbar and the active tab each
+  carry an **X** that closes the editor back to View; re-clicking the active tab
+  does nothing; Plan↔Devices switches directly.
+- **Plan editor** and **Device editor** are shown only to admins when
+  `admin_only` is on.
 
 ## View — display and device interaction only
 
 Allowed: pan/zoom (wheel, pinch, buttons), switching spaces, device tap
 (info / more-info / toggle per settings), long-press → info card, opening tap →
-door/lock info card, room tap → HA area, hover tooltips (name, temperature, signal).
+door/lock info card (with an explicit Unlock/Lock button when a lock is bound —
+the only way to operate a lock from the card; plan-icon taps never toggle locks),
+room tap → HA area, hover tooltips (name, temperature, signal).
 
 Removed from this mode (they move, not die):
 - icon dragging ("drag anywhere", v1.9 — consciously reversed),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "houseplan-card",
-  "version": "1.26.0",
+  "version": "1.31.2",
   "description": "Interactive house plan Lovelace card for Home Assistant",
   "license": "MIT",
   "type": "module",

src/devices.ts

@@ -343,6 +343,43 @@ export function areaLights(hass: any, devices: { area: string; entities: string[
   return seen ? 'off' : 'none';
 }
 
+/** Average humidity across the area's climate-ish devices (integer %, or null). */
+export function areaHum(
+  hass: any,
+  devices: { area: string; icon?: string; entities: string[] }[],
+  area: string,
+): number | null {
+  const vals: number[] = [];
+  for (const dv of devices) {
+    if (dv.area !== area) continue;
+    // same curation idea as areaTemp: climate sensors only, not fridges/plugs
+    if (dv.icon !== 'mdi:thermometer' && dv.icon !== 'mdi:air-filter' && dv.icon !== 'mdi:water-percent') continue;
+    const h = humFor(hass, dv.entities);
+    if (h != null) vals.push(h);
+  }
+  if (!vals.length) return null;
+  return Math.round(vals.reduce((a, b) => a + b, 0) / vals.length);
+}
+
+/** How many of the area's lights are on: {on, total}, or null without lights. */
+export function areaLightStats(
+  hass: any,
+  devices: { area: string; entities: string[] }[],
+  area: string,
+): { on: number; total: number } | null {
+  const seen = new Set<string>();
+  let on = 0;
+  for (const dv of devices) {
+    if (dv.area !== area) continue;
+    for (const eid of dv.entities) {
+      if (!eid.startsWith('light.') || seen.has(eid)) continue;
+      seen.add(eid);
+      if (hass.states[eid]?.state === 'on') on++;
+    }
+  }
+  return seen.size ? { on, total: seen.size } : null;
+}
+
 /** Average temperature across the area's devices (null when nothing reports one). */
 /** Average zigbee signal (LQI) across an area's non-virtual devices, or null. */
 export function areaLqi(hass: any, devices: { area: string; virtual?: boolean; entities: string[] }[], area: string): number | null {

src/houseplan-card.ts

@@ -17,12 +17,12 @@ import {
   pointOnBoundary, mergeRooms, splitRoom, polygonArea, closestPointOnBoundary,
   snapToWall, openingAmount,
   averageLqi, fitView, declump, safeUrl, resolveTapAction, floorsOf, type FloorInfo,
-  stateIcon,
+  stateIcon, lightColorOf, isAlarmState, parseRoomRef, diffNewDevices,
   spaceDisplayOf, roomFillStyle, fillColorsOf, DEFAULT_FILL_COLORS, type FillColors,
   isActiveState, DEFAULT_ROOM_COLOR, DEFAULT_ROOM_OPACITY,
   DEFAULT_TEMP_MIN, DEFAULT_TEMP_MAX, type SpaceDisplay,
 } from './logic';
-import { buildDevices, lqiFor, tempFor, humFor, isHumEntity, areaLights, areaTemp } from './devices';
+import { buildDevices, lqiFor, tempFor, humFor, isHumEntity, areaLights, areaTemp, areaHum, areaLightStats } from './devices';
 import type {
   OpeningCfg,
   RoomCfg, SpaceModel, PdfRef, Marker, ServerConfig, DevItem, CardConfig,
@@ -32,7 +32,7 @@ import './space-card';
 import { cardStyles } from './styles';
 import { langOf, t, type I18nKey } from './i18n';
 
-const CARD_VERSION = '1.26.0';
+const CARD_VERSION = '1.31.2';
 const LS_KEY = 'houseplan_card_layout_v1';
 const LS_CFG = 'houseplan_card_cfg_v1'; // cache of the server config+layout for instant rendering
 const LS_ZOOM = 'houseplan_card_zoom_v1';
@@ -65,7 +65,7 @@ class HouseplanCard extends LitElement {
   private _config?: CardConfig;
 
   private _space = 'f1';
-  private _layout: Record<string, { x: number; y: number; s?: string }> = {};
+  private _layout: Record<string, { x: number; y: number; s?: string; k?: number }> = {};
   private _serverStorage = false;
   private _loadOk = false;
   private _loading = false;
@@ -76,6 +76,7 @@ class HouseplanCard extends LitElement {
   private _devices: DevItem[] = [];
   private _regSignature = '';
   private _defPos: Record<string, { x: number; y: number }> = {};
+  private _newSyncKey = '';
   private _tip: { x: number; y: number; title: string; meta: string; lqi?: number | null; temp?: number | null } | null = null;
   private _selId: string | null = null;
   private _toast = '';
@@ -175,6 +176,10 @@ class HouseplanCard extends LitElement {
     tempMin: number;
     tempMax: number;
     showLqi: boolean;
+    labelTemp: boolean;
+    labelHum: boolean;
+    labelLqi: boolean;
+    labelLight: boolean;
     cellCm: number;                // real-world cm represented by one grid cell
     busy: boolean;
   } | null = null;
@@ -196,6 +201,7 @@ class HouseplanCard extends LitElement {
   };
 
   private _drag: { id: string; sx: number; sy: number; ox: number; oy: number; moved: boolean } | null = null;
+  private _rlResize: { id: string; space: string; k0: number; cx: number; cy: number; d0: number } | null = null;
   private _holdTimer?: number;
   private _holdFired = false;
 
@@ -252,8 +258,20 @@ class HouseplanCard extends LitElement {
 
   private _onKey(e: KeyboardEvent): void {
     if (e.key === 'Escape') {
+      // close the topmost open dialog; info popups first, then editors
+      if (this._openingInfo) { this._openingInfo = null; return; }
       if (this._infoCard) { this._infoCard = null; return; }
+      if (this._rulesDialog) { this._rulesDialog = null; return; }
+      if (this._settingsDialog) { this._settingsDialog = null; return; }
       if (this._markerDialog) { this._markerDialog = null; return; }
+      if (this._openingDialog) { this._openingDialog = null; return; }
+      if (this._spaceDialog && !this._roomDialog) {
+        // same semantics as the dialog's Cancel: an import queue is abandoned
+        this._spaceDialog = null;
+        this._importQueue = [];
+        this._importTotal = 0;
+        return;
+      }
     }
     if (!this._markup) return;
     const undo = e.key === 'Escape' || ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'z');
@@ -549,6 +567,51 @@ class HouseplanCard extends LitElement {
       iconRules: this._iconRules,
     });
     this._defPos = this._defaultPositions();
+    this._syncNewDevices();
+  }
+
+  /**
+   * "New device" flag (server-side, shared by every client): an auto device
+   * that appears after the known baseline was recorded gets a red dot until
+   * someone opens its editor. The baseline is seeded silently on first run,
+   * so an upgrade never floods the plan with dots.
+   */
+  private _syncNewDevices(): void {
+    if (!this._norm || !this._loadOk || !this._serverCfg) return;
+    // only auto-appearing icons: area devices and light groups; markers are user-made
+    const autoIds = this._devices.filter((d) => !d.marker && !d.virtual).map((d) => d.id).sort();
+    const key = autoIds.join(',');
+    if (key === this._newSyncKey) return; // same registry picture — nothing to do
+    this._newSyncKey = key;
+    const st: any = this._settings;
+    const { fresh, known } = diffNewDevices(autoIds, st.known_devices);
+    if (!Array.isArray(st.known_devices) || fresh.length) {
+      const newIds = [...new Set([...(st.new_device_ids || []), ...fresh])];
+      this._serverCfg = {
+        ...this._serverCfg,
+        settings: { ...st, known_devices: known, new_device_ids: newIds },
+      };
+      // best-effort persist: non-admins under admin_only just keep the local view
+      this._saveConfig();
+    }
+  }
+
+  /** Ids currently flagged as new (drawn with the red dot). */
+  private get _newIds(): Set<string> {
+    const list = (this._settings as any).new_device_ids;
+    return new Set(Array.isArray(list) ? list : []);
+  }
+
+  /** First visit to the device's editor acknowledges its "new" flag. */
+  private _ackNewDevice(id: string): void {
+    if (!this._newIds.has(id) || !this._serverCfg) return;
+    const st: any = this._settings;
+    this._serverCfg = {
+      ...this._serverCfg,
+      settings: { ...st, new_device_ids: (st.new_device_ids || []).filter((x: string) => x !== id) },
+    };
+    this._saveConfig();
+    this.requestUpdate();
   }
 
   /** Curation + light groups + overrides + virtual devices. */
@@ -635,9 +698,10 @@ class HouseplanCard extends LitElement {
       const gx = Math.round(x / g) * g;
       const gy = Math.round(y / g) * g;
       const aspect = this._serverCfg!.spaces.find((s: any) => s.id === d.space)?.aspect || 1;
+      const prevK = (this._layout[d.id] as any)?.k;
       this._layout = {
         ...this._layout,
-        [d.id]: { s: d.space, x: gx / NORM_W, y: gy / (NORM_W / aspect) },
+        [d.id]: { s: d.space, x: gx / NORM_W, y: gy / (NORM_W / aspect), ...(prevK ? { k: prevK } : {}) },
       };
     } else {
       this._layout = { ...this._layout, [d.id]: { x: Math.round(x), y: Math.round(y) } };
@@ -1107,6 +1171,13 @@ class HouseplanCard extends LitElement {
 
   private _markupClick(ev: MouseEvent): void {
     if (!this._markup) return;
+    // Room cards swallow markup clicks: dragging, resizing or just clicking a
+    // card must not feed the active tool (draw point, delete room, merge/split
+    // pick, opening placement). The drag itself already stops pointer events,
+    // but the synthesized `click` afterwards still bubbles to the stage.
+    if (this._drag || this._rlResize) return;
+    const path = (ev.composedPath?.() || []) as any[];
+    if (path.some((n) => n?.classList?.contains?.('roomlabel') || n?.classList?.contains?.('rlhandle'))) return;
     const raw = this._svgPoint(ev);
     if (this._tool === 'delroom') {
       const space = this._spaceModel();
@@ -1261,15 +1332,9 @@ class HouseplanCard extends LitElement {
   private _opClick(ev: MouseEvent, o: OpeningCfg & { rx: number; ry: number; rlen: number }): void {
     ev.stopPropagation();
     if (this._opDrag?.moved) return; // that click was the tail of a drag
-    if (this._mode === 'view') {
-      // view: an opening is a status object — show the door/lock info card
-      this._openingInfo = o;
-      return;
-    }
-    if (this._mode === 'plan' && this._tool !== 'opening') {
-      // plan: any click on an opening edits it (the Opening tool also does)
-      this._editOpening(o);
-    }
+    // openings are inert outside Plan mode (owner's decision: View must not
+    // interact with them at all); in Plan any click on an opening edits it
+    if (this._mode === 'plan') this._editOpening(o);
   }
 
   private _saveOpening(): void {
@@ -1554,6 +1619,7 @@ class HouseplanCard extends LitElement {
   // ================= DEVICE EDITOR (markers) =================
 
   private _openMarkerDialog(d?: DevItem): void {
+    if (d) this._ackNewDevice(d.id);
     if (!this._norm) {
       this._showToast(this._t('toast.marker_needs_server'));
       return;
@@ -1575,7 +1641,9 @@ class HouseplanCard extends LitElement {
         link: d.link || '',
         description: d.description || '',
         pdfs: [...(d.pdfs || [])],
-        room: d.space && d.area ? d.space + '#' + d.area : '',
+        room: d.marker?.room_id
+          ? d.space + '#@' + d.marker.room_id
+          : d.space && d.area ? d.space + '#' + d.area : '',
         busy: false,
       };
     } else {
@@ -1661,8 +1729,15 @@ class HouseplanCard extends LitElement {
     const res: { value: string; label: string }[] = [];
     for (const sp of this._serverCfg?.spaces || []) {
       for (const r of sp.rooms || []) {
-        if (!r.area) continue;
-        res.push({ value: sp.id + '#' + r.area, label: (sp.title || sp.id) + ' · ' + r.name });
+        if (r.area) {
+          res.push({ value: sp.id + '#' + r.area, label: (sp.title || sp.id) + ' · ' + r.name });
+        } else if (r.id) {
+          // sub-area room (no HA area): manual placement by room id — issue #3
+          res.push({
+            value: sp.id + '#@' + r.id,
+            label: (sp.title || sp.id) + ' · ' + r.name + ' · ' + this._t('marker.subarea'),
+          });
+        }
       }
     }
     return res;
@@ -1751,9 +1826,10 @@ class HouseplanCard extends LitElement {
       // determine the marker id
       let id: string;
       // a manually chosen room overrides the space/area for any icon
-      const [roomSp, roomAr] = dlg.room ? dlg.room.split('#') : ['', ''];
-      let space: string | null = roomSp || null;
-      let area: string | null = roomAr || null;
+      const roomRef = parseRoomRef(dlg.room);
+      let space: string | null = roomRef?.space || null;
+      let area: string | null = roomRef?.area || null;
+      const roomId: string | null = roomRef?.roomId || null;
       if (dlg.binding === 'virtual' && !space) space = this._space;
       id = markerIdForBinding(dlg.binding, dlg.devId, () => 'v_' + Date.now().toString(36));
       const oldId = dlg.devId;
@@ -1777,10 +1853,13 @@ class HouseplanCard extends LitElement {
       if (dlg.binding === 'virtual' || dlg.room) {
         marker.space = space;
         marker.area = area;
+        marker.room_id = roomId;
       }
       // the room changed → move the icon to its center
       const prevDev = oldId ? this._devices.find((x) => x.id === oldId) : null;
-      const roomChanged = !!dlg.room && prevDev != null && (prevDev.space !== space || prevDev.area !== area);
+      const prevRoomId = prevDev?.marker?.room_id ?? null;
+      const roomChanged = !!dlg.room && prevDev != null
+        && (prevDev.space !== space || prevDev.area !== area || prevRoomId !== roomId);
       // remove the previous marker (by the old id and by the new id)
       cfg.markers = cfg.markers.filter((m) => m.id !== id && m.id !== oldId);
       cfg.markers.push(marker);
@@ -1792,10 +1871,12 @@ class HouseplanCard extends LitElement {
         const spm = this._spaceModel(space || undefined);
         let cx = spm.vb[0] + spm.vb[2] / 2;
         let cy = spm.vb[1] + spm.vb[3] / 2;
-        if (area) {
-          const room = spm.rooms.find((r) => r.area === area);
-          if (room) [cx, cy] = this._roomCenter(room);
-        }
+        const room = roomId
+          ? spm.rooms.find((r) => r.id === roomId)
+          : area
+            ? spm.rooms.find((r) => r.area === area)
+            : undefined;
+        if (room) [cx, cy] = this._roomCenter(room);
         newPos = this._normPos(space || this._space, cx, cy);
         this._layout = { ...this._layout, [id]: newPos };
       }
@@ -1878,6 +1959,8 @@ class HouseplanCard extends LitElement {
         roomColor: disp.color, roomOpacity: disp.opacity, fillMode: disp.fill,
         tempMin: disp.tempMin, tempMax: disp.tempMax,
         showLqi: disp.showLqi ?? this._config?.show_signal ?? true,
+        labelTemp: disp.labelTemp, labelHum: disp.labelHum,
+        labelLqi: disp.labelLqi, labelLight: disp.labelLight,
         cellCm: Number(sp.cell_cm) > 0 ? Number(sp.cell_cm) : 5,
         busy: false,
       };
@@ -1889,6 +1972,7 @@ class HouseplanCard extends LitElement {
         roomColor: DEFAULT_ROOM_COLOR, roomOpacity: DEFAULT_ROOM_OPACITY, fillMode: 'none',
         tempMin: DEFAULT_TEMP_MIN, tempMax: DEFAULT_TEMP_MAX,
         showLqi: this._config?.show_signal ?? true,
+        labelTemp: false, labelHum: false, labelLqi: false, labelLight: false,
         cellCm: 5,
         busy: false,
       };
@@ -1973,6 +2057,10 @@ class HouseplanCard extends LitElement {
         temp_min: Number.isFinite(d.tempMin) ? Math.min(d.tempMin, d.tempMax) : DEFAULT_TEMP_MIN,
         temp_max: Number.isFinite(d.tempMax) ? Math.max(d.tempMin, d.tempMax) : DEFAULT_TEMP_MAX,
         show_lqi: d.showLqi,
+        label_temp: d.labelTemp,
+        label_hum: d.labelHum,
+        label_lqi: d.labelLqi,
+        label_light: d.labelLight,
       };
       sp.cell_cm = Number.isFinite(d.cellCm) && d.cellCm > 0 ? d.cellCm : 5;
       await this._saveConfigNow();
@@ -2065,6 +2153,7 @@ class HouseplanCard extends LitElement {
       roomColor: DEFAULT_ROOM_COLOR, roomOpacity: DEFAULT_ROOM_OPACITY, fillMode: 'none',
       tempMin: DEFAULT_TEMP_MIN, tempMax: DEFAULT_TEMP_MAX,
       showLqi: this._config?.show_signal ?? true,
+      labelTemp: false, labelHum: false, labelLqi: false, labelLight: false,
       cellCm: 5,
       busy: false,
     };
@@ -2352,7 +2441,7 @@ class HouseplanCard extends LitElement {
                   this._restoreZoom();
                 }}
               >
-                ${s.title}${this._norm && this._mode === 'plan'
+                ${s.title}${this._norm && this._canEdit
                   ? html`<ha-icon class="tabedit" icon="mdi:cog-outline"
                       title=${this._t('title.configure_space')}
                       @click=${(e: Event) => {
@@ -2371,11 +2460,15 @@ class HouseplanCard extends LitElement {
           </div>
           ${this._canEdit
             ? html`<div class="modes">
-                ${([['view', 'mdi:eye-outline'], ['plan', 'mdi:floor-plan'], ['devices', 'mdi:tune-variant']] as const).map(
+                ${([['plan', 'mdi:floor-plan'], ['devices', 'mdi:tune-variant']] as const).map(
                   ([m, ic]) => html`<button class="modetab ${this._mode === m ? 'active' : ''}"
                     title=${this._t(('mode.' + m) as any)}
-                    @click=${() => this._setMode(m)}>
+                    @click=${() => { if (this._mode !== m) this._setMode(m); }}>
                     <ha-icon icon=${ic}></ha-icon><span class="ml">${this._t(('mode.' + m) as any)}</span>
+                    ${this._mode === m
+                      ? html`<ha-icon class="closex" icon="mdi:close" title=${this._t('title.close_editor')}
+                          @click=${(e: Event) => { e.stopPropagation(); this._setMode('view'); }}></ha-icon>`
+                      : nothing}
                   </button>`,
                 )}
               </div>`
@@ -2388,29 +2481,13 @@ class HouseplanCard extends LitElement {
               title=${this._t('title.zoom_reset')}><ha-icon icon="mdi:fit-to-page-outline"></ha-icon></button>
             <button class="btn zb" @click=${() => this._stepZoom(1)} title=${this._t('title.zoom_in')}><ha-icon icon="mdi:plus"></ha-icon></button>
           </div>
-          ${this._norm && this._mode === 'devices'
-            ? html`<button class="btn" @click=${() => this._openMarkerDialog()}
-                title=${this._t('title.add_device')}>
-                <ha-icon icon="mdi:plus-box-outline"></ha-icon>
-              </button>
-              <button class="btn ${this._showAll ? 'on' : ''}" @click=${this._toggleShowAll}
-                title=${this._t('title.show_all')}>
-                <ha-icon icon="${this._showAll ? 'mdi:eye' : 'mdi:eye-off-outline'}"></ha-icon>
-              </button>
-              <button class="btn" @click=${this._resetLayout} title=${this._t('title.reset_layout')}>
-                <ha-icon icon="mdi:backup-restore"></ha-icon>
-              </button>
-              <button class="btn" @click=${this._openRulesDialog} title=${this._t('title.icon_rules')}>
-                <ha-icon icon="mdi:shape-plus-outline"></ha-icon>
-              </button>`
-            : nothing}
-          ${this._norm && this._mode === 'plan'
+          ${this._norm && this._canEdit
             ? html`<button class="btn" @click=${this._openSettingsDialog} title=${this._t('title.general_settings')}>
                 <ha-icon icon="mdi:cog-outline"></ha-icon>
               </button>`
             : nothing}
         </div>
-        ${this._markup ? this._renderMarkupBar() : nothing}
+        ${this._markup ? this._renderMarkupBar() : this._mode === 'devices' ? this._renderDevicesBar() : nothing}
         </div>
 
         <div class="stage ${this._markup ? 'markup' : ''} ${space.bg ? '' : 'noplan'} mode-${this._mode}"
@@ -2458,7 +2535,7 @@ class HouseplanCard extends LitElement {
                 this._showTip(e, r.name, this._t('tip.room'),
                   showLqi ? this._roomLqi(r.area) : null,
                   r.area ? areaTemp(this.hass, this._devices, r.area) : null);
-              const label = (!space.bg && !disp.showNames) || this._markup;
+              const label = !space.bg && !disp.showNames && !this._markup;
               const c = this._roomCenter(r);
               const shape = r.poly
                 ? svg`<polygon class="${cls}" style="${style}" points="${r.poly.map((p) => p.join(',')).join(' ')}"
@@ -2476,7 +2553,7 @@ class HouseplanCard extends LitElement {
           <div class="devlayer" style="--icon-size:${((iconPct * vb[2]) / view.w).toFixed(3)}cqw">
             ${devs.map((d) => this._renderDevice(d, view, showLqi))}
             ${this._renderOpeningLocks(view)}
-            ${disp.showNames && !this._markup
+            ${disp.showNames || this._markup
               ? space.rooms.map((r) => this._renderRoomLabel(r, space, view, disp))
               : nothing}
           </div>
@@ -2537,10 +2614,15 @@ class HouseplanCard extends LitElement {
           : null)
       : null;
     // live state variants of the auto icon (doors, locks, bulbs), like core HA
+    const domain = d.primary ? d.primary.split('.')[0] : null;
     const icon = this._config?.live_states
-      ? stateIcon(d.icon, d.primary ? d.primary.split('.')[0] : null,
-          primarySt?.attributes?.device_class, primarySt?.state, !!m?.icon)
+      ? stateIcon(d.icon, domain, primarySt?.attributes?.device_class, primarySt?.state, !!m?.icon)
       : d.icon;
+    // RGB lights color the icon (and the ripple, unless a custom ripple color is set)
+    const lightC = this._config?.live_states && domain === 'light' ? lightColorOf(primarySt) : null;
+    // emergencies (leak/smoke/gas/CO/siren) pulse red regardless of display mode
+    const alarm = this._config?.live_states
+      && isAlarmState(domain, primarySt?.attributes?.device_class, primarySt?.state);
     const active = ripple && !!d.primary && isActiveState(this.hass.states[d.primary]?.state);
     const scale = Number(m?.size) > 0 ? Number(m!.size) : 1;
     const angle = Number(m?.angle) || 0;
@@ -2550,9 +2632,11 @@ class HouseplanCard extends LitElement {
     if (ripple) {
       st.push(`--ripple-scale:${rScale}`);
       if (m?.ripple_color) st.push(`--ripple-color:${m.ripple_color}`);
+      else if (lightC) st.push(`--ripple-color:${lightC}`);
     }
+    if (lightC) st.push(`--light-color:${lightC}`);
     return html`<div
-      class="dev ${cls} ${this._selId === d.id ? 'sel' : ''} ${d.virtual ? 'virtual' : ''} ${disp === 'ripple' ? 'noicon' : ''} ${valText != null ? 'valonly' : ''}"
+      class="dev ${cls} ${this._selId === d.id ? 'sel' : ''} ${d.virtual ? 'virtual' : ''} ${disp === 'ripple' ? 'noicon' : ''} ${valText != null ? 'valonly' : ''} ${lightC ? 'rgb' : ''} ${alarm ? 'alarm' : ''}"
       style="${st.join(';')}"
       @click=${(e: MouseEvent) => this._clickDevice(e, d)}
       @mousemove=${(e: MouseEvent) =>
@@ -2567,6 +2651,7 @@ class HouseplanCard extends LitElement {
       ${ripple
         ? html`<span class="ripple ${active ? 'active' : ''}"><i></i><i></i><i></i></span>`
         : nothing}
+      ${this._newIds.has(d.id) ? html`<span class="newdot" title=${this._t('device.new')}></span>` : nothing}
       ${valText != null
         ? html`<span class="valtext">${valText}</span>`
         : disp !== 'ripple'
@@ -2625,6 +2710,57 @@ class HouseplanCard extends LitElement {
     if (moved) window.setTimeout(() => (this._drag = null), 0);
   }
 
+  /** Saved room-card scale (layout key rl_<roomId>, field k), clamped 0.5..3. */
+  private _labelScale(r: RoomCfg): number {
+    const k = (this._layout['rl_' + (r.id || '')] as any)?.k;
+    return typeof k === 'number' && Number.isFinite(k) ? Math.min(3, Math.max(0.5, k)) : 1;
+  }
+
+  private _rlResizeDown(ev: PointerEvent, r: RoomCfg, spaceId: string): void {
+    if (this._mode !== 'plan') return;
+    ev.preventDefault();
+    ev.stopPropagation();
+    const card = (ev.target as HTMLElement).closest('.roomlabel') as HTMLElement | null;
+    if (!card) return;
+    const b = card.getBoundingClientRect();
+    const cx = b.left + b.width / 2;
+    const cy = b.top + b.height / 2;
+    const d0 = Math.max(8, Math.hypot(ev.clientX - cx, ev.clientY - cy));
+    this._rlResize = { id: 'rl_' + (r.id || ''), space: spaceId, k0: this._labelScale(r), cx, cy, d0 };
+    (ev.target as HTMLElement).setPointerCapture(ev.pointerId);
+  }
+
+  private _rlResizeMove(ev: PointerEvent): void {
+    const rs = this._rlResize;
+    if (!rs) return;
+    ev.stopPropagation();
+    const dist = Math.max(8, Math.hypot(ev.clientX - rs.cx, ev.clientY - rs.cy));
+    const k = Math.min(3, Math.max(0.5, rs.k0 * (dist / rs.d0)));
+    const rec: any = this._layout[rs.id];
+    if (!rec) {
+      // the card was never dragged: pin its current default position first
+      const roomId = rs.id.slice(3);
+      const sp = this._spaceModel(rs.space);
+      const room = sp.rooms.find((x) => x.id === roomId);
+      if (!room) return;
+      const p = this._labelPos(room, rs.space);
+      const aspect = this._serverCfg!.spaces.find((x: any) => x.id === rs.space)?.aspect || 1;
+      this._layout = {
+        ...this._layout,
+        [rs.id]: { s: rs.space, x: p.x / NORM_W, y: p.y / (NORM_W / aspect), k },
+      };
+    } else {
+      this._layout = { ...this._layout, [rs.id]: { ...rec, k } };
+    }
+    this._dirtyPos.add(rs.id);
+  }
+
+  private _rlResizeUp(): void {
+    if (!this._rlResize) return;
+    this._rlResize = null;
+    this._persistLayout();
+  }
+
   private _renderRoomLabel(
     r: RoomCfg, space: SpaceModel, view: { x: number; y: number; w: number; h: number }, disp: SpaceDisplay,
   ): TemplateResult | typeof nothing {
@@ -2633,12 +2769,52 @@ class HouseplanCard extends LitElement {
     const left = ((p.x - view.x) / view.w) * 100;
     const top = ((p.y - view.y) / view.h) * 100;
     const op = Math.min(1, disp.opacity + 0.25);
-    return html`<div class="roomlabel" style="left:${left}%;top:${top}%;color:${disp.color};opacity:${op}"
+    const k = this._labelScale(r);
+    // optional metrics row (needs an HA area; sub-area rooms show the name only)
+    const rows: TemplateResult[] = [];
+    if (r.area && !this._markup) {
+      if (disp.labelTemp) {
+        const t = areaTemp(this.hass, this._devices, r.area);
+        if (t != null) rows.push(html`<span class="rlm"><ha-icon icon="mdi:thermometer"></ha-icon>${t}°</span>`);
+      }
+      if (disp.labelHum) {
+        const hm = areaHum(this.hass, this._devices, r.area);
+        if (hm != null) rows.push(html`<span class="rlm"><ha-icon icon="mdi:water-percent"></ha-icon>${hm}%</span>`);
+      }
+      if (disp.labelLqi) {
+        const l = this._roomLqi(r.area);
+        if (l != null) rows.push(html`<span class="rlm"><ha-icon icon="mdi:zigbee"></ha-icon>${l}</span>`);
+      }
+      if (disp.labelLight) {
+        const ls = areaLightStats(this.hass, this._devices, r.area);
+        if (ls) {
+          const txt = ls.on === 0
+            ? this._t('roomcard.light_off')
+            : ls.on === ls.total
+              ? this._t('roomcard.light_on')
+              : this._t('roomcard.light_partial', { on: ls.on, total: ls.total });
+          rows.push(html`<span class="rlm ${ls.on ? 'lit' : ''}"><ha-icon icon=${ls.on ? 'mdi:lightbulb-on' : 'mdi:lightbulb-outline'}></ha-icon>${txt}</span>`);
+        }
+      }
+    }
+    return html`<div class="roomlabel ${rows.length ? 'card' : ''}"
+      style="left:${left}%;top:${top}%;color:${disp.color};opacity:${op};--rl-scale:${k}"
       @pointerdown=${(e: PointerEvent) => this._labelDown(e, r, space.id)}
       @pointermove=${(e: PointerEvent) => this._labelMove(e, r, space.id)}
       @pointerup=${() => this._labelUp(r)}
       @pointercancel=${() => this._labelUp(r)}
-    >${r.name}</div>`;
+    ><span class="rlname">${r.name}</span>
+      ${rows.length ? html`<span class="rlmetrics">${rows}</span>` : nothing}
+      ${this._mode === 'plan'
+        ? ['tl', 'tr', 'bl', 'br'].map(
+            (c) => html`<span class="rlhandle ${c}"
+              @pointerdown=${(e: PointerEvent) => this._rlResizeDown(e, r, space.id)}
+              @pointermove=${(e: PointerEvent) => this._rlResizeMove(e)}
+              @pointerup=${() => this._rlResizeUp()}
+              @pointercancel=${() => this._rlResizeUp()}></span>`,
+          )
+        : nothing}
+    </div>`;
   }
 
   /** Where the live measurement starts: the last outline point, or the first split point. */
@@ -2762,6 +2938,16 @@ class HouseplanCard extends LitElement {
     })}`;
   }
 
+  /**
+   * Explicit lock/unlock from the opening info card. This does NOT violate the
+   * "locks never toggle from the plan" rule: that rule guards against ACCIDENTAL
+   * taps on plan icons; here the user has opened the info card and pressed a
+   * clearly labeled action button — same interaction contract as HA's more-info.
+   */
+  private _lockAction(entityId: string, action: 'lock' | 'unlock'): void {
+    this.hass?.callService?.('lock', action, { entity_id: entityId });
+  }
+
   private _renderOpeningInfoCard(): TemplateResult {
     const o = this._openingInfo!;
     const cSt = o.contact ? this.hass.states[o.contact]?.state : null;
@@ -2790,6 +2976,18 @@ class HouseplanCard extends LitElement {
                   : this._t('opening.state_unknown'),
                 lSt === 'locked' ? 'ok' : 'warn')
             : nothing}
+          ${o.lock && (lSt === 'locked' || ['unlocked', 'open'].includes(String(lSt)))
+            ? html`<button
+                class="btn lockact ${lSt === 'locked' ? 'warn' : ''}"
+                @click=${() => this._lockAction(o.lock!, lSt === 'locked' ? 'unlock' : 'lock')}>
+                <ha-icon icon=${lSt === 'locked' ? 'mdi:lock-open-variant' : 'mdi:lock'}></ha-icon>
+                ${this._t(lSt === 'locked' ? 'opening.unlock_action' : 'opening.lock_action')}
+              </button>`
+            : o.lock && ['locking', 'unlocking'].includes(String(lSt))
+              ? html`<button class="btn lockact" disabled>
+                  <ha-icon icon="mdi:timer-sand"></ha-icon>${this._t('opening.lock_pending')}
+                </button>`
+              : nothing}
           ${!o.contact && !o.lock ? html`<p class="muted">${this._t('opening.no_entities')}</p>` : nothing}
         </div>
         <div class="row">
@@ -2934,6 +3132,34 @@ class HouseplanCard extends LitElement {
               : this._t('markup.hint_start')}</span>
             ${this._path.length ? html`<button class="btn ghost" @click=${this._cancelPath}>${this._t('btn.reset')}</button>` : nothing}`
         : nothing}
+      <button class="btn barclose" title=${this._t('title.close_editor')}
+        @click=${() => this._setMode('view')}>
+        <ha-icon icon="mdi:close"></ha-icon>
+      </button>
+    </div>`;
+  }
+
+  private _renderDevicesBar(): TemplateResult {
+    return html`<div class="editbar devbar">
+      <ha-icon icon="mdi:tune-variant" class="warn"></ha-icon>
+      <button class="btn" @click=${() => this._openMarkerDialog()} title=${this._t('title.add_device')}>
+        <ha-icon icon="mdi:plus-box-outline"></ha-icon>${this._t('devbar.add')}
+      </button>
+      <button class="btn ${this._showAll ? 'on' : ''}" @click=${this._toggleShowAll}
+        title=${this._t('title.show_all')}>
+        <ha-icon icon="${this._showAll ? 'mdi:eye' : 'mdi:eye-off-outline'}"></ha-icon>${this._t('devbar.show_all')}
+      </button>
+      <button class="btn" @click=${this._resetLayout} title=${this._t('title.reset_layout')}>
+        <ha-icon icon="mdi:backup-restore"></ha-icon>${this._t('devbar.reset')}
+      </button>
+      <button class="btn" @click=${this._openRulesDialog} title=${this._t('title.icon_rules')}>
+        <ha-icon icon="mdi:shape-plus-outline"></ha-icon>${this._t('devbar.rules')}
+      </button>
+      <span class="spacer"></span>
+      <button class="btn barclose" title=${this._t('title.close_editor')}
+        @click=${() => this._setMode('view')}>
+        <ha-icon icon="mdi:close"></ha-icon>
+      </button>
     </div>`;
   }
 
@@ -3202,6 +3428,15 @@ class HouseplanCard extends LitElement {
               @change=${(e: Event) => (this._spaceDialog = { ...d, showLqi: (e.target as HTMLInputElement).checked })} />
             <span>${this._t('space.show_lqi')}</span>
           </label>
+          <label class="dispsection">${this._t('space.roomcard_section')}</label>
+          ${([['labelTemp', 'space.label_temp'], ['labelHum', 'space.label_hum'],
+              ['labelLqi', 'space.label_lqi'], ['labelLight', 'space.label_light']] as const).map(
+            ([f, k]) => html`<label class="srcrow">
+              <input type="checkbox" .checked=${d[f]}
+                @change=${(e: Event) => (this._spaceDialog = { ...d, [f]: (e.target as HTMLInputElement).checked })} />
+              <span>${this._t(k)}</span>
+            </label>`,
+          )}
           <label>${this._t('space.room_color')}</label>
           <div class="colorrow">
             <input type="color" .value=${d.roomColor}

src/i18n/en.json

@@ -240,8 +240,25 @@
   "gs.saved": "General settings saved",
   "space.show_lqi": "Show zigbee signal (LQI) next to devices",
   "gs.light_none": "No light sources",
-  "mode.view": "View",
-  "mode.plan": "Plan",
-  "mode.devices": "Devices",
-  "display.value": "Value instead of an icon"
+  "mode.plan": "Plan editor",
+  "mode.devices": "Device editor",
+  "display.value": "Value instead of an icon",
+  "marker.subarea": "no area, manual",
+  "device.new": "New device — open its editor to dismiss",
+  "opening.unlock_action": "Unlock",
+  "opening.lock_action": "Lock",
+  "opening.lock_pending": "Working…",
+  "title.close_editor": "Close editor (back to view)",
+  "devbar.add": "Add",
+  "devbar.show_all": "Show all",
+  "devbar.reset": "Reset",
+  "devbar.rules": "Icon rules",
+  "space.roomcard_section": "Room card shows:",
+  "space.label_temp": "Temperature",
+  "space.label_hum": "Humidity",
+  "space.label_lqi": "Average Zigbee signal",
+  "space.label_light": "Lights on/off",
+  "roomcard.light_on": "On",
+  "roomcard.light_off": "Off",
+  "roomcard.light_partial": "{on} of {total}"
 }

src/i18n/ru.json

@@ -240,8 +240,25 @@
   "gs.saved": "Общие настройки сохранены",
   "space.show_lqi": "Показывать зигби-сигнал (LQI) у устройств",
   "gs.light_none": "Нет источников света",
-  "mode.view": "Просмотр",
-  "mode.plan": "План",
-  "mode.devices": "Устройства",
-  "display.value": "Значение вместо иконки"
+  "mode.plan": "Редактор плана",
+  "mode.devices": "Редактор устройств",
+  "display.value": "Значение вместо иконки",
+  "marker.subarea": "без зоны, вручную",
+  "device.new": "Новое устройство — откройте его редактор, чтобы снять отметку",
+  "opening.unlock_action": "Открыть замок",
+  "opening.lock_action": "Закрыть замок",
+  "opening.lock_pending": "Выполняется…",
+  "title.close_editor": "Закрыть редактор (вернуться к просмотру)",
+  "devbar.add": "Добавить",
+  "devbar.show_all": "Показать все",
+  "devbar.reset": "Сброс",
+  "devbar.rules": "Правила иконок",
+  "space.roomcard_section": "В карточке комнаты:",
+  "space.label_temp": "Температура",
+  "space.label_hum": "Влажность",
+  "space.label_lqi": "Средний Zigbee-сигнал",
+  "space.label_light": "Свет вкл/выкл",
+  "roomcard.light_on": "Вкл",
+  "roomcard.light_off": "Выкл",
+  "roomcard.light_partial": "{on} из {total}"
 }

src/logic.ts

@@ -497,6 +497,11 @@ export interface SpaceDisplay {
   tempMax: number; // comfort range upper bound, °C
   /** Per-space LQI badges near zigbee devices; null = follow the card option. */
   showLqi: boolean | null;
+  /** Room-card metrics under the room name (all default off). */
+  labelTemp: boolean;
+  labelHum: boolean;
+  labelLqi: boolean;
+  labelLight: boolean;
 }
 
 export const DEFAULT_ROOM_COLOR = '#3ea6ff';
@@ -517,6 +522,10 @@ export function spaceDisplayOf(spaceCfg: any): SpaceDisplay {
     tempMin: typeof s.temp_min === 'number' ? s.temp_min : DEFAULT_TEMP_MIN,
     tempMax: typeof s.temp_max === 'number' ? s.temp_max : DEFAULT_TEMP_MAX,
     showLqi: typeof s.show_lqi === 'boolean' ? s.show_lqi : null,
+    labelTemp: s.label_temp === true,
+    labelHum: s.label_hum === true,
+    labelLqi: s.label_lqi === true,
+    labelLight: s.label_light === true,
   };
 }
 
@@ -674,3 +683,78 @@ export function stateIcon(
   if (domain === 'light' && base === 'mdi:lightbulb') return state === 'on' ? 'mdi:lightbulb-on' : base;
   return base;
 }
+
+// ---------------- light color & alarm states ----------------
+
+/**
+ * The current color of a light entity as a CSS color, or null when it is off,
+ * unavailable or reports no usable color. rgb_color is the source of truth
+ * (HA normalizes hs/xy into it); brightness is deliberately ignored — a dim
+ * red bulb should still read as red on the plan.
+ */
+export function lightColorOf(state: any): string | null {
+  if (!state || state.state !== 'on') return null;
+  const rgb = state.attributes?.rgb_color;
+  if (Array.isArray(rgb) && rgb.length >= 3 && rgb.every((v: any) => Number.isFinite(v))) {
+    return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
+  }
+  return null;
+}
+
+/** Device classes whose active state is an emergency, not a status. */
+const ALARM_CLASSES = new Set(['smoke', 'gas', 'carbon_monoxide', 'moisture', 'safety', 'tamper', 'problem']);
+
+/**
+ * An alarm is firing: leak/smoke/gas/CO/safety binary sensors in `on`, or a
+ * siren that is on. Unavailable/unknown never alarm (an outage is not a fire).
+ */
+export function isAlarmState(
+  domain: string | null | undefined,
+  deviceClass: string | null | undefined,
+  state: string | null | undefined,
+): boolean {
+  if (state !== 'on') return false;
+  if (domain === 'siren') return true;
+  return domain === 'binary_sensor' && !!deviceClass && ALARM_CLASSES.has(deviceClass);
+}
+
+// ---------------- room references ----------------
+
+/**
+ * Parse a marker's room reference. Two shapes:
+ * - `space#area`   — a room bound to an HA area (historical form)
+ * - `space#@roomId` — a room WITHOUT an area (sub-area rooms, issue #3):
+ *   devices are placed into it manually, by room id.
+ */
+export function parseRoomRef(
+  v: string | null | undefined,
+): { space: string; area: string | null; roomId: string | null } | null {
+  if (!v) return null;
+  const i = v.indexOf('#');
+  if (i <= 0) return null;
+  const space = v.slice(0, i);
+  const rest = v.slice(i + 1);
+  if (!rest) return null;
+  if (rest.startsWith('@')) {
+    const roomId = rest.slice(1);
+    return roomId ? { space, area: null, roomId } : null;
+  }
+  return { space, area: rest, roomId: null };
+}
+
+// ---------------- new-device detection ----------------
+
+/**
+ * Which auto-appearing device ids are NEW against the known baseline.
+ * No baseline yet (first run / upgrade) → nothing is new: every current id
+ * becomes the baseline silently, so an update never floods the plan with dots.
+ */
+export function diffNewDevices(
+  currentIds: string[],
+  known: string[] | null | undefined,
+): { fresh: string[]; known: string[] } {
+  if (!Array.isArray(known)) return { fresh: [], known: [...currentIds] };
+  const knownSet = new Set(known);
+  const fresh = currentIds.filter((id) => !knownSet.has(id));
+  return { fresh, known: fresh.length ? [...known, ...fresh] : known };
+}

src/styles.ts

@@ -80,6 +80,8 @@ export const cardStyles = css`
       border: 0;
       background: transparent;
       color: var(--hp-muted);
+      display: inline-flex;
+      align-items: center;
       padding: 6px 13px;
       border-radius: 8px;
       font-size: 13px;
@@ -242,22 +244,26 @@ export const cardStyles = css`
       transition: opacity 0.15s;
       pointer-events: none;
     }
-    g.opening:hover .op-outline {
+    .stage.markup g.opening:hover .op-outline {
       opacity: 0.9;
     }
+    /* openings are pure status graphics outside Plan mode: no cursor, no hover,
+       no hit target — View must not interact with them at all */
     .op-hit {
       fill: transparent;
-      cursor: grab;
-      pointer-events: auto;
-      touch-action: none; /* drags, not scrolls, on touch */
-    }
-    .op-hit:active {
-      cursor: grabbing;
+      pointer-events: none;
+      cursor: default;
     }
     .stage.markup .op-hit {
-      pointer-events: none; /* markup clicks go to the stage tools */
+      pointer-events: auto;
+      cursor: grab;
+      touch-action: none; /* drags, not scrolls, on touch */
+    }
+    .stage.markup .op-hit:active {
+      cursor: grabbing;
     }
     .oplock {
+      pointer-events: none; /* inert while editing; clickable in View (rule below) */
       position: absolute;
       transform: translate(-50%, -50%);
       width: calc(var(--icon-size, 2.5cqw) * 0.62);
@@ -268,9 +274,11 @@ export const cardStyles = css`
       justify-content: center;
       background: var(--hp-bg);
       border: 1px solid var(--hp-line);
+      z-index: 1;
+    }
+    .stage.mode-view .oplock {
       pointer-events: auto;
       cursor: pointer;
-      z-index: 1;
     }
     .oplock ha-icon {
       --mdc-icon-size: calc(var(--icon-size, 2.5cqw) * 0.4);
@@ -280,6 +288,18 @@ export const cardStyles = css`
     .oplock.locked { color: #66d17a; border-color: #66d17a; }
     .oplock.unlocked { color: var(--hp-open); border-color: var(--hp-open); }
     .oplock.unknown { color: var(--hp-muted); }
+    .btn.lockact {
+      width: 100%;
+      justify-content: center;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-top: 8px;
+    }
+    .btn.lockact.warn {
+      color: var(--error-color, #d33);
+      border-color: var(--error-color, #d33);
+    }
     .oprow {
       display: flex;
       align-items: center;
@@ -344,14 +364,53 @@ export const cardStyles = css`
       pointer-events: none; /* draggable only in plan mode (rule below) */
       position: absolute;
       transform: translate(-50%, -50%);
-      font-size: calc(var(--icon-size, 2.5cqw) * 0.5);
+      font-size: calc(var(--icon-size, 2.5cqw) * 0.5 * var(--rl-scale, 1));
       font-weight: 700;
       letter-spacing: 0.04em;
       white-space: nowrap;
       cursor: grab;
       user-select: none;
       z-index: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.15em;
+      text-align: center;
     }
+    .roomlabel .rlmetrics {
+      display: flex;
+      align-items: center;
+      gap: 0.55em;
+      font-size: 0.62em;
+      font-weight: 600;
+      letter-spacing: 0.02em;
+      opacity: 0.9;
+    }
+    .roomlabel .rlm {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.12em;
+    }
+    .roomlabel .rlm ha-icon {
+      --mdc-icon-size: 1.05em;
+      display: inline-flex;
+    }
+    .roomlabel .rlm.lit { opacity: 1; }
+    .rlhandle {
+      display: none;
+      position: absolute;
+      width: 9px;
+      height: 9px;
+      border-radius: 2px;
+      background: var(--hp-accent);
+      border: 1px solid var(--card-background-color, #fff);
+      z-index: 2;
+    }
+    .rlhandle.tl { left: -6px; top: -6px; cursor: nwse-resize; }
+    .rlhandle.br { right: -6px; bottom: -6px; cursor: nwse-resize; }
+    .rlhandle.tr { right: -6px; top: -6px; cursor: nesw-resize; }
+    .rlhandle.bl { left: -6px; bottom: -6px; cursor: nesw-resize; }
+    .stage.markup .roomlabel:hover .rlhandle { display: block; }
     .stage.markup .roomlabel { pointer-events: auto; }
     .roomlabel:active { cursor: grabbing; }
     .measurelayer {
@@ -423,6 +482,20 @@ export const cardStyles = css`
       font-family: inherit;
     }
     .modetab ha-icon { --mdc-icon-size: 15px; }
+    .modetab .closex {
+      --mdc-icon-size: 13px;
+      display: inline-flex;
+      align-items: center;
+      margin-left: 2px;
+      opacity: 0.75;
+      cursor: pointer;
+      border-radius: 4px;
+    }
+    .modetab .closex:hover { opacity: 1; }
+    .editbar .barclose {
+      padding: 4px 6px;
+      margin-left: 6px;
+    }
     .modetab.active {
       background: var(--hp-accent);
       color: var(--text-primary-color, #fff);
@@ -430,15 +503,16 @@ export const cardStyles = css`
     @media (max-width: 720px) {
       .modetab .ml { display: none; }
     }
+    .room.outlined {
+      stroke: rgba(62, 166, 255, 0.55);
+      fill: rgba(62, 166, 255, 0.06);
+    }
+    /* AFTER .outlined: same specificity — source order decides (gotcha x4) */
     .room.picked {
       stroke: #ffc14d;
       stroke-width: 3;
       fill: rgba(255, 193, 77, 0.25);
     }
-    .room.outlined {
-      stroke: rgba(62, 166, 255, 0.55);
-      fill: rgba(62, 166, 255, 0.06);
-    }
     .griddot {
       fill: var(--hp-accent);
       opacity: 0.75;
@@ -495,6 +569,43 @@ export const cardStyles = css`
       font-weight: 700;
       white-space: nowrap;
     }
+    /* RGB lights: the bulb takes the light's actual color */
+    .dev.rgb ha-icon { color: var(--light-color); }
+    .dev.rgb.on {
+      box-shadow: 0 0 10px var(--light-color);
+      border-color: var(--light-color);
+      background: var(--hp-bg);
+      color: var(--light-color);
+    }
+    /* alarms pulse red over everything */
+    .dev.alarm::after {
+      content: '';
+      position: absolute;
+      inset: calc(var(--icon-size, 2.5cqw) * -0.35);
+      border: 3px solid #f25a4a;
+      border-radius: 50%;
+      animation: hp-alarm 1s ease-out infinite;
+      pointer-events: none;
+    }
+    @keyframes hp-alarm {
+      0% { transform: scale(0.7); opacity: 1; }
+      100% { transform: scale(1.25); opacity: 0; }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .dev.alarm::after { animation: none; opacity: 0.9; }
+    }
+    .dev .newdot {
+      position: absolute;
+      top: calc(var(--icon-size, 2.5cqw) * -0.12);
+      right: calc(var(--icon-size, 2.5cqw) * -0.12);
+      width: calc(var(--icon-size, 2.5cqw) * 0.34);
+      height: calc(var(--icon-size, 2.5cqw) * 0.34);
+      border-radius: 50%;
+      background: #f0301f;
+      border: 2px solid var(--card-background-color, var(--hp-bg));
+      pointer-events: none;
+      z-index: 2;
+    }
     .devlayer {
       position: absolute;
       inset: 0;
@@ -515,7 +626,7 @@ export const cardStyles = css`
       align-items: center;
       justify-content: center;
       color: var(--hp-txt);
-      cursor: grab;
+      cursor: pointer;
       pointer-events: auto;
       transition: background 0.15s, border-color 0.15s, opacity 0.2s;
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
@@ -528,9 +639,8 @@ export const cardStyles = css`
       justify-content: center;
       line-height: 0;
     }
-    .dev:active {
-      cursor: grabbing;
-    }
+    .stage.mode-devices .dev { cursor: grab; }
+    .stage.mode-devices .dev:active { cursor: grabbing; }
     .dev:hover {
       background: var(--hp-accent);
       color: var(--text-primary-color, #fff);
@@ -616,9 +726,10 @@ export const cardStyles = css`
     }
     .tab .tabedit {
       --mdc-icon-size: 13px;
+      display: inline-flex;
+      align-items: center;
       margin-left: 6px;
       opacity: 0.4;
-      vertical-align: middle;
     }
     .tab:hover .tabedit {
       opacity: 0.9;

src/types.ts

@@ -38,6 +38,7 @@ export interface Marker {
   description?: string | null;
   pdfs?: PdfRef[];
   tap_action?: string | null; // per-device override: 'info' | 'more-info' | 'toggle'
+  room_id?: string | null; // manual placement into a room WITHOUT an HA area (sub-area rooms)
   display?: 'badge' | 'ripple' | 'icon_ripple' | 'value' | null; // how the device is drawn
   ripple_color?: string | null;
   ripple_size?: number | null; // max ring diameter, in icon diameters (default 3)

test/devices.test.mjs

@@ -1,6 +1,6 @@
 import test from 'node:test';
 import assert from 'node:assert/strict';
-import { buildDevices, lightGroups, primaryEntity, lqiFor, tempFor, humFor, areaLights, areaTemp } from '../test-build/devices.js';
+import { buildDevices, lightGroups, primaryEntity, lqiFor, tempFor, humFor, areaLights, areaTemp, areaHum, areaLightStats } from '../test-build/devices.js';
 import { compileIconRules } from '../test-build/rules.js';
 
 /** Minimal fake hass around the pieces buildDevices reads. */
@@ -280,3 +280,32 @@ test('buildDevices: humidity badge is gated on device_class, not the icon (name
   assert.notEqual(d.icon, 'mdi:water-percent'); // name rule won the icon
   assert.equal(d.hum, 45); // …but the humidity value is still shown (gated on device_class)
 });
+
+test('areaLightStats: counts unique lights that are on', () => {
+  const hass = { states: {
+    'light.a': { state: 'on' }, 'light.b': { state: 'off' }, 'light.c': { state: 'on' },
+  } };
+  const devs = [
+    { area: 'living', entities: ['light.a', 'sensor.x'] },
+    { area: 'living', entities: ['light.b', 'light.a'] }, // light.a duplicated on purpose
+    { area: 'other', entities: ['light.c'] },
+  ];
+  assert.deepEqual(areaLightStats(hass, devs, 'living'), { on: 1, total: 2 });
+  assert.deepEqual(areaLightStats(hass, devs, 'other'), { on: 1, total: 1 });
+  assert.equal(areaLightStats(hass, devs, 'empty'), null);
+});
+
+test('areaHum: averages climate sensors only, integer %', () => {
+  const hass = { states: {
+    'sensor.t1_humidity': { state: '41', attributes: { device_class: 'humidity', unit_of_measurement: '%' } },
+    'sensor.t2_humidity': { state: '46', attributes: { device_class: 'humidity', unit_of_measurement: '%' } },
+    'sensor.fridge_humidity': { state: '90', attributes: { device_class: 'humidity', unit_of_measurement: '%' } },
+  } };
+  const devs = [
+    { area: 'living', icon: 'mdi:thermometer', entities: ['sensor.t1_humidity'] },
+    { area: 'living', icon: 'mdi:air-filter', entities: ['sensor.t2_humidity'] },
+    { area: 'living', icon: 'mdi:fridge', entities: ['sensor.fridge_humidity'] }, // curated out
+  ];
+  assert.equal(areaHum(hass, devs, 'living'), 44);
+  assert.equal(areaHum(hass, devs, 'nothing'), null);
+});

test/logic.test.mjs

@@ -4,7 +4,7 @@ import {
   lqiColor, snapToGrid, segKey, samePoint, pointInPolygon, markerIdForBinding, averageLqi,
   fitView, declump, safeUrl, resolveTapAction, floorsOf, subst, spaceDisplayOf, roomFillColor,
   segmentCm, formatLength, roomEdges, roomPoly, pointOnBoundary, pointStrictlyInside, roomsOverlap,
-  mergeRooms, splitRoom, polygonArea, closestPointOnBoundary, isActiveState, snapToWall, openingAmount, fillColorsOf, lerpColor, roomFillStyle, stateIcon,
+  mergeRooms, splitRoom, polygonArea, closestPointOnBoundary, isActiveState, snapToWall, openingAmount, fillColorsOf, lerpColor, roomFillStyle, stateIcon, lightColorOf, isAlarmState, parseRoomRef, diffNewDevices,
 } from '../test-build/logic.js';
 import {
   iconFor, compileIconRules, isValidPattern, iconFromDeviceClasses,
@@ -496,3 +496,51 @@ test('stateIcon: doors/locks/bulbs reflect state; custom icons and outages never
   assert.equal(stateIcon('mdi:custom', 'lock', undefined, 'unlocked', true), 'mdi:custom'); // user icon wins
   assert.equal(stateIcon('mdi:cctv', 'camera', undefined, 'recording', false), 'mdi:cctv'); // unknown pair
 });
+
+test('lightColorOf: rgb of an on light; off/unavailable/no-color → null', () => {
+  assert.equal(lightColorOf({ state: 'on', attributes: { rgb_color: [255, 20, 40] } }), 'rgb(255, 20, 40)');
+  assert.equal(lightColorOf({ state: 'off', attributes: { rgb_color: [255, 20, 40] } }), null);
+  assert.equal(lightColorOf({ state: 'on', attributes: {} }), null);
+  assert.equal(lightColorOf({ state: 'unavailable', attributes: { rgb_color: [1, 2, 3] } }), null);
+  assert.equal(lightColorOf(undefined), null);
+});
+
+test('isAlarmState: leak/smoke/gas/siren fire; doors and outages do not', () => {
+  assert.ok(isAlarmState('binary_sensor', 'moisture', 'on'));
+  assert.ok(isAlarmState('binary_sensor', 'smoke', 'on'));
+  assert.ok(isAlarmState('siren', undefined, 'on'));
+  assert.ok(!isAlarmState('binary_sensor', 'door', 'on'));
+  assert.ok(!isAlarmState('binary_sensor', 'smoke', 'off'));
+  assert.ok(!isAlarmState('binary_sensor', 'smoke', 'unavailable'));
+});
+
+test('parseRoomRef: area rooms, sub-area rooms by id, malformed refs', () => {
+  assert.deepEqual(parseRoomRef('f1#kitchen'), { space: 'f1', area: 'kitchen', roomId: null });
+  assert.deepEqual(parseRoomRef('f1#@r7'), { space: 'f1', area: null, roomId: 'r7' });
+  assert.equal(parseRoomRef(''), null);
+  assert.equal(parseRoomRef('f1#'), null);
+  assert.equal(parseRoomRef('f1#@'), null);
+  assert.equal(parseRoomRef('#kitchen'), null);
+  assert.equal(parseRoomRef(null), null);
+});
+
+test('diffNewDevices: first run seeds the baseline silently; later additions are fresh', () => {
+  const first = diffNewDevices(['a', 'b'], undefined);
+  assert.deepEqual(first, { fresh: [], known: ['a', 'b'] });
+  const none = diffNewDevices(['a', 'b'], ['a', 'b']);
+  assert.deepEqual(none.fresh, []);
+  assert.equal(none.known.length, 2);
+  const added = diffNewDevices(['a', 'b', 'c'], ['a', 'b']);
+  assert.deepEqual(added.fresh, ['c']);
+  assert.deepEqual(added.known, ['a', 'b', 'c']);
+  // removed devices stay in known (harmless, keeps the list append-only)
+  const removed = diffNewDevices(['a'], ['a', 'b']);
+  assert.deepEqual(removed.fresh, []);
+});
+
+test('spaceDisplayOf: room-card metric flags default to off', () => {
+  const d0 = spaceDisplayOf({ plan_url: 'x', settings: {} });
+  assert.deepEqual([d0.labelTemp, d0.labelHum, d0.labelLqi, d0.labelLight], [false, false, false, false]);
+  const d1 = spaceDisplayOf({ plan_url: 'x', settings: { label_temp: true, label_light: true } });
+  assert.deepEqual([d1.labelTemp, d1.labelHum, d1.labelLqi, d1.labelLight], [true, false, false, true]);
+});