Merge state-icons: state-reflecting icons + value display v1.26.0

- stateIcon(): door/window/garage open-closed, lock locked-unlocked, bulb on;
  custom icons and unavailable/unknown never morph; gated by live_states
- marker display 'value': the measurement (with unit) is the marker body,
  corner badges hidden; numeric fallback chain temp - hum - primary state
- TESTING.md rows, smoke_state_value.mjs, +1 unit test

README.md

@@ -119,7 +119,7 @@ Later you can add as many spaces as you like (floors, yard, garage) with the **
 
 ### Step 2. Outline the rooms
 
-After the first space is added, the card switches to markup mode by itself. Click grid points, connecting them with lines, and close the room outline by clicking the first point.
+After the first space is added, the card switches to the **Plan** tab by itself. The card has three mode tabs in the header — **View** (default: display and device control only, nothing can be moved or edited), **Plan** (rooms, openings, labels, space settings) and **Devices** (placing and configuring markers); the edit tabs are shown to administrators. In Plan, click grid points, connecting them with lines, and close the room outline by clicking the first point.
 
 As soon as the outline is closed, the room-save dialog appears. Here you need to **bind the room to a Home Assistant area** — this is exactly what enables the automation. For utility rooms with no devices (hall, sauna) there is a **"No area"** button.
 
@@ -133,6 +133,21 @@ Rooms may not overlap: a click strictly inside an existing room, or an outline t
 - **Split** — click a room, then two points on its walls; the chord cuts it in two. The bigger part stays the room it was (name, area, devices); the smaller one asks for a new name and area.
 
 
+### Doors, windows and locks
+
+In markup mode the **"Opening"** tool places doors and windows: click next to a wall and the
+opening snaps onto it. Pick the type, the **length in real centimetres** (defaults: door 90 cm,
+window 120 cm), an open/close sensor and — for doors — a **lock entity**.
+
+With a sensor bound, the plan comes alive: the door leaf swings on its hinge and the swing arc
+draws itself in as the real door opens; a window opens its two casements. While open, the moving
+parts take an accent colour. A door with a lock shows a padlock badge next to it — green when
+locked, orange when unlocked. For safety the lock can **not** be toggled from the plan; a click
+on the opening shows a status card with both states instead.
+
+Openings are easy to adjust later: hovering one highlights it, you can **drag it along the
+walls** (it slides around corners too), and a **double click opens its properties**.
+
 ### Step 3. Devices appear by themselves
 
 As soon as you save a room bound to an area, **the devices of that area are automatically laid out inside the outline**. These are the same devices shown on the **Settings → Devices → (filtered by the room)** page — only the meaningful ones, without service records, bridges and duplicates.
@@ -151,7 +166,7 @@ The mouse wheel or the **－ / ⊹ / ＋** buttons zoom the plan in and out; on
 
 ### Step 5. Put the icons in their places
 
-Device icons can be **dragged with the mouse at any time** — no separate "edit mode" needs to be enabled. Positions are saved on the server and are identical in all browsers and devices. The **↺** button in the header restores the automatic layout.
+Switch to the **Devices** tab to arrange icons: drag them with the mouse, click one to open its editor. In **View** mode nothing can be moved — panning the map never displaces a sensor (a top user request). Positions are saved on the server and are identical in all browsers and devices. The **↺** button restores the automatic layout.
 
 ![Dragging icons — available at all times](docs/images/06-edit.png)
 
@@ -178,6 +193,12 @@ You can also place a **single entity** (not just a whole device): start typing i
 
 Not everything has to be left to the automation. With the **＋** button in the header you can place any device, group or a **virtual point** on the plan (for example, an "Inlet valve" that does not exist as a device). Set a name, icon, model, link, description and, if you wish, attach a **PDF manual**.
 
+The same dialog controls how the device looks on the plan. **Display** switches between the
+icon badge, an animated **presence ripple** (pulsing rings while the entity is active, a faint
+dot when idle — great for motion sensors) or both, with a per-device ring colour and size. The
+**icon size** (×0.5–3) and **rotation** are also per-device, so a wall valve can be small and
+turned the way it is mounted.
+
 ![Adding a device manually](docs/images/07-marker-dialog.png)
 
 ---

README.ru.md

@@ -135,6 +135,21 @@ title: План дома
 - **Разделить** — кликните комнату, затем две точки на её стенах; хорда разрежет её надвое. Бо́льшая часть остаётся прежней комнатой (имя, зона, устройства), меньшая просит новое имя и зону.
 
 
+### Двери, окна и замки
+
+В режиме разметки инструмент **«Проём»** ставит двери и окна: кликните рядом со стеной — проём
+примагнитится к ней. Выберите тип, **длину в реальных сантиметрах** (по умолчанию дверь 90 см,
+окно 120 см), датчик открытия и — для двери — **замок**.
+
+С привязанным датчиком план оживает: створка двери поворачивается на петле, и дуга распахивания
+дорисовывается по мере открытия настоящей двери; окно раскрывает две створки. Пока открыто,
+подвижные части подсвечены акцентным цветом. У двери с замком рядом отображается замочек —
+зелёный, когда заперто, оранжевый, когда нет. Ради безопасности замок с плана **нельзя**
+переключить — клик по проёму показывает карточку с обоими статусами.
+
+Проёмы легко поправить позже: при наведении проём подсвечивается, его можно **перетащить вдоль
+стен** (в том числе за угол), а **двойной клик открывает свойства**.
+
 ### Шаг 3. Устройства появляются сами
 
 Как только вы сохранили комнату с привязкой к зоне, **устройства этой зоны автоматически расставляются внутри контура**. Берутся те же устройства, что показаны на странице **Настройки → Устройства → (фильтр по нужной комнате)** — только осмысленные, без служебных записей, мостов и дубликатов.
@@ -153,7 +168,7 @@ title: План дома
 
 ### Шаг 5. Расставьте значки по местам
 
-Значки устройств можно **перетаскивать мышью в любой момент** — отдельный «режим правки» включать не нужно. Позиции сохраняются на сервере и одинаковы во всех браузерах и устройствах. Кнопка **↺** в шапке возвращает автоматическую раскладку.
+Расставлять значки нужно на вкладке **«Устройства»**: там они перетаскиваются мышью, а клик открывает редактор. В режиме **«Просмотр»** ничего сдвинуть нельзя — панорамирование карты больше не сдвигает датчики (главная просьба пользователей). Позиции сохраняются на сервере и одинаковы во всех браузерах и устройствах. Кнопка **↺** возвращает автоматическую раскладку.
 
 ![Перетаскивание значков — доступно всегда](docs/images/06-edit.png)
 
@@ -182,6 +197,12 @@ title: План дома
 
 Не всё нужно оставлять на автоматику. Кнопкой **＋** в шапке можно поставить на план любое устройство, группу или **виртуальную точку** (например, «Вентиль на вводе», которого нет как устройства). Задайте имя, иконку, модель, ссылку, описание и при желании приложите **PDF-инструкцию**.
 
+В этом же диалоге настраивается вид устройства на плане. **Отображение** переключает значок,
+анимированную **пульсацию присутствия** (расходящиеся кольца, пока сущность активна, и тусклая
+точка в покое — идеально для датчиков движения) или то и другое сразу, с цветом и размером колец
+на устройство. **Размер значка** (×0,5–3) и **поворот** — тоже индивидуальные: вентиль на стене
+может быть маленьким и повёрнутым так, как он установлен.
+
 ![Добавление устройства вручную](docs/images/07-marker-dialog.png)
 
 ---

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.23.0"
+VERSION = "1.26.0"
 
 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.23.0"
+  "version": "1.26.0"
 }

custom_components/houseplan/validation.py

@@ -12,7 +12,7 @@ import voluptuous as vol
 PLAN_EXTENSIONS = {"svg": "image/svg+xml", "png": "image/png", "jpg": "image/jpeg", "webp": "image/webp"}
 MAX_PLAN_BYTES = 8 * 1024 * 1024
 FILE_EXTENSIONS = {"pdf", "png", "jpg", "jpeg", "webp", "txt"}
-MAX_FILE_BYTES = 25 * 1024 * 1024
+MAX_FILE_BYTES = 50 * 1024 * 1024
 
 SPACE_ID_RE = re.compile(r"^[a-z0-9_-]{1,64}$")
 _SAFE_NAME_RE = re.compile(r"[^A-Za-z0-9._-]+")
@@ -87,6 +87,7 @@ SPACE_DISPLAY_SCHEMA = vol.Schema(
         vol.Optional("fill_mode"): vol.In(["none", "lqi", "light", "temp"]),
         vol.Optional("temp_min"): vol.Coerce(float),
         vol.Optional("temp_max"): vol.Coerce(float),
+        vol.Optional("show_lqi"): bool,
     },
     extra=vol.ALLOW_EXTRA,
 )
@@ -154,7 +155,21 @@ CONFIG_SCHEMA = vol.Schema(
     {
         vol.Required("spaces"): [SPACE_SCHEMA],
         vol.Optional("markers", default=list): [MARKER_SCHEMA],
-        vol.Optional("settings", default=dict): vol.Schema({}, extra=vol.ALLOW_EXTRA),
+        vol.Optional("settings", default=dict): vol.Schema(
+            {
+                vol.Optional("fill_colors"): vol.Schema(
+                    {
+                        str: vol.Schema(
+                            {
+                                vol.Required("c"): vol.Match(r"^#[0-9a-fA-F]{6}$"),
+                                vol.Required("a"): vol.All(vol.Coerce(float), vol.Range(min=0, max=1)),
+                            }
+                        )
+                    }
+                ),
+            },
+            extra=vol.ALLOW_EXTRA,
+        ),
     },
     extra=vol.ALLOW_EXTRA,  # unknown (legacy) keys do not break loading
 )

demo/smoke_general_settings.mjs

@@ -0,0 +1,30 @@
+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) диалог общих настроек: 7 цветовых строк, 3 группы
+  c._openSettingsDialog(); await c.updateComplete;
+  out.rows = sr().querySelectorAll('.gsrow').length;
+  out.groups = [...sr().querySelectorAll('.dialog .dispsection')].map((l) => l.textContent.trim());
+  // 2) сменить цвет light_on и сохранить
+  c._setFillColor('light_on', { c: '#ff00ff', a: 0.5 });
+  await c._saveSettingsDialog(); await c.updateComplete;
+  out.saved = c._serverCfg.settings.fill_colors?.light_on;
+  // 3) заливка light использует кастомный цвет
+  c._serverCfg = { ...c._serverCfg, spaces: c._serverCfg.spaces.map((s) => s.id !== 'f1' ? s : ({ ...s,
+    settings: { ...(s.settings||{}), show_borders: true, fill_mode: 'light' } })) };
+  c.requestUpdate(); await c.updateComplete;
+  const styles = [...sr().querySelectorAll('.room.styled')].map((r) => r.getAttribute('style') || '');
+  out.customFillUsed = styles.some((st) => st.includes('#ff00ff') && st.includes('0.500'));
+  // 4) show_lqi=false у пространства скрывает LQI-бейджи
+  out.lqiBefore = sr().querySelectorAll('.dev .lqi').length;
+  c._serverCfg = { ...c._serverCfg, spaces: c._serverCfg.spaces.map((s) => s.id !== 'f1' ? s : ({ ...s,
+    settings: { ...(s.settings||{}), show_lqi: false } })) };
+  c.requestUpdate(); await c.updateComplete;
+  out.lqiAfter = sr().querySelectorAll('.dev .lqi').length;
+  return out;
+});
+console.log(JSON.stringify(res, null, 1));
+await browser.close();

demo/smoke_modes.mjs

@@ -0,0 +1,79 @@
+// UX modes shell (v1.25.0): view is display-only; plan/devices gate the tools.
+import { launch } from './serve.mjs';
+const { page, browser } = await launch();
+const out = {};
+const q = (sel) => page.evaluate((s) => (window.__card.shadowRoot || window.__card.renderRoot).querySelectorAll(s).length, sel);
+const st = () => page.evaluate(() => {
+  const c = window.__card;
+  const sr = c.shadowRoot || c.renderRoot;
+  return {
+    mode: c._mode,
+    modeTabs: sr.querySelectorAll('.modetab').length,
+    active: sr.querySelector('.modetab.active')?.textContent.trim(),
+    editBtns: sr.querySelectorAll('.head .btn:not(.zb)').length,
+    gears: sr.querySelectorAll('.tabedit').length,
+    markupBar: !!sr.querySelector('.editbar'),
+    stageClass: sr.querySelector('.stage').className,
+  };
+});
+// 1) старт: view, чистая шапка
+out.start = await st();
+// 2) drag в view ничего не двигает и не мешает пану
+await page.evaluate(() => {
+  const c = window.__card;
+  const d = c._devices.find((x) => x.space === 'f1');
+  const before = { ...c._pos(d) };
+  c._pointerDown({ preventDefault(){}, clientX: 10, clientY: 10, target: { setPointerCapture(){} }, pointerId: 1 }, d);
+  c._pointerMove({ clientX: 90, clientY: 60 }, d);
+  c._pointerUp({}, d);
+  const after = { ...c._pos(d) };
+  window.__viewDragMoved = Math.abs(after.x - before.x) + Math.abs(after.y - before.y) > 0.5;
+  clearTimeout(c._holdTimer);
+});
+out.viewDragMoved = await page.evaluate(() => window.__viewDragMoved);
+// long-press в view открывает инфо
+await page.evaluate(async () => {
+  const c = window.__card;
+  const d = c._devices.find((x) => x.space === 'f1');
+  c._pointerDown({ preventDefault(){}, clientX: 10, clientY: 10, target: { setPointerCapture(){} }, pointerId: 2 }, d);
+  await new Promise((r) => setTimeout(r, 700));
+});
+out.viewHoldInfo = await page.evaluate(() => { const r = !!window.__card._infoCard; window.__card._infoCard = null; window.__card._holdFired = false; return r; });
+// 3) режим План
+await page.evaluate(() => window.__card._setMode('plan'));
+await page.waitForTimeout(200);
+out.plan = await st();
+out.planIconsHidden = await page.evaluate(() => {
+  const sr = window.__card.shadowRoot || window.__card.renderRoot;
+  const dev = sr.querySelector('.dev');
+  return dev ? getComputedStyle(dev).display === 'none' : 'no-dev';
+});
+// 4) режим Устройства: drag работает, клик открывает редактор
+await page.evaluate(() => window.__card._setMode('devices'));
+await page.waitForTimeout(200);
+out.devices = await st();
+out.devDragWorks = await page.evaluate(() => {
+  const c = window.__card;
+  const d = c._devices.find((x) => x.space === 'f1');
+  const before = { ...c._pos(d) };
+  c._pointerDown({ preventDefault(){}, clientX: 10, clientY: 10, target: { setPointerCapture(){} }, pointerId: 3 }, d);
+  c._pointerMove({ clientX: 100, clientY: 70 }, d);
+  c._pointerUp({}, d);
+  const after = { ...c._pos(d) };
+  return Math.abs(after.x - before.x) + Math.abs(after.y - before.y) > 0.5;
+});
+out.devClickOpensEditor = await page.evaluate(async () => {
+  const c = window.__card;
+  c._drag = null;
+  const d = c._devices.find((x) => x.space === 'f1');
+  c._clickDevice({ stopPropagation(){} }, d);
+  await c.updateComplete;
+  const r = !!c._markerDialog;
+  c._markerDialog = null;
+  return r;
+});
+// 5) назад в view
+await page.evaluate(() => window.__card._setMode('view'));
+out.backToView = (await st()).mode;
+console.log(JSON.stringify(out, null, 1));
+await browser.close();

demo/smoke_state_value.mjs

@@ -0,0 +1,34 @@
+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 devIcon = (id) => {
+    const idx = c._devices.filter((x) => x.space === c._space).findIndex((x) => x.id === id);
+    const el = sr().querySelectorAll('.dev')[idx];
+    return el?.querySelector('ha-icon')?.getAttribute('icon');
+  };
+  // 1) state-иконки: замок locked → mdi:lock; unlocked → lock-open-variant
+  out.lockLocked = devIcon('d_lock');
+  c.hass = { ...c.hass, states: { ...c.hass.states, 'lock.front_door': { ...c.hass.states['lock.front_door'], state: 'unlocked' } } };
+  await c.updateComplete;
+  out.lockUnlocked = devIcon('d_lock');
+  // окно: on → window-open
+  out.windowOpen = devIcon('d_window');
+  c.hass = { ...c.hass, states: { ...c.hass.states, 'binary_sensor.window': { ...c.hass.states['binary_sensor.window'], state: 'off' } } };
+  await c.updateComplete;
+  out.windowClosed = devIcon('d_window');
+  // лампа on → lightbulb-on
+  out.bulbOn = devIcon('d_light1');
+  // 2) display:value у термометра
+  c._serverCfg = { ...c._serverCfg, markers: [{ id: 'd_temp', binding: 'device:d_temp', display: 'value' }] };
+  c._regSignature = ''; c._maybeRebuildDevices(); c.requestUpdate(); await c.updateComplete;
+  const vd = [...sr().querySelectorAll('.dev.valonly')];
+  out.valonly = vd.length;
+  out.valText = vd[0]?.querySelector('.valtext')?.textContent.trim();
+  out.noSmallBadge = !vd[0]?.querySelector('.tval');
+  return out;
+});
+console.log(JSON.stringify(res, null, 1));
+await browser.close();

docs/ARCHITECTURE.md

@@ -86,6 +86,15 @@ Built from the registries (`_buildDevices`), rules carried over 1-to-1 from the
 
 ## Device markers (v1.6.0+)
 
+Per-marker appearance (v1.22.0): `display: badge|ripple|icon_ripple` (+`ripple_color`,
+`ripple_size`) draws presence-style pulsing rings gated by the pure `isActiveState` —
+deliberately independent of the card-wide `live_states` toggle, with `unavailable` counting as
+idle. `size` (icon multiplier via the `--dev-size` CSS var — value badges scale along) and
+`angle` rotate/scale a single icon. Room drawing shows a live **ruler** (`segmentCm` +
+`formatLength`, metres or feet+inches by `hass.config.unit_system`); the scale is per-space
+`cell_cm` (default 5 cm per grid cell).
+
+
 `config.markers[]`: `{id, binding:'device:<id>'|'entity:<eid>'|'virtual', space?, area?, hidden?,
 name?, icon?, model?, link?, description?, pdfs:[{name,url}]}`. A hybrid: auto-discovered HA devices
 appear on their own; a marker with `binding=device:<id>` overrides them (metadata/rebinding/hiding),
@@ -109,6 +118,18 @@ Plan files: `<config>/houseplan/plans/<space>.<ext>` → URL `/houseplan_files/p
 If the server config is empty, the card falls back to the legacy bundle (the dacha) and shows a
 "To server" migration button in edit mode. The dacha was migrated on 2026-07-04.
 
+## Room geometry rules (v1.19–v1.21)
+
+A **line is never an entity of its own**: walls are *derived* from room outlines
+(`roomEdges`, deduped by `segKey`), so an abandoned outline leaves nothing behind and deleting
+a room keeps the walls its neighbours still contribute. Rooms may not overlap
+(`pointStrictlyInside` + `roomsOverlap`; being ON a shared wall is legal — real neighbouring
+walls overlap collinearly rather than match exactly). **Merge/Split** use boolean geometry from
+**polyclip-ts** (chosen over `polygon-clipping`, whose ESM build exports only a default while
+its types declare named exports — breaking either tsc or the runtime): merge accepts a pair only
+when the union collapses into one hole-free outline; split cuts wall-to-wall with a chord, the
+bigger part keeps the room identity (name/area/devices).
+
 ## Markup editor (v1.4.0+)
 
 State inside the card: `_markup` (mode), `_tool` (draw/delroom), `_path` (the current outline,
@@ -127,6 +148,26 @@ While drawing, the length of the current segment follows the cursor (`_fmtLen`
 `formatLength`): metres, or feet+inches when `hass.config.unit_system` is imperial. The scale is
 per-space `cell_cm` — cm represented by one grid cell (default 5, so 240 cells ≈ 12 m).
 
+## Doors & windows (v1.23.0+)
+
+`space.openings[]` — plan geometry, **not** markers: an opening needs an angle, a length and a
+wall, while markers are free points whose positions live in the layout store. Model:
+`{id, type: door|window, x, y, angle, length, contact?, lock?, invert?, flip_h?, flip_v?}`
+(normalized coords; `length` normalized by plan width). Placement snaps onto the nearest
+**derived** wall via `snapToWall` (logic.ts) — the angle is normalized to [-90, 90) because two
+rooms share a wall with opposite edge directions, and without that a drag across segment
+boundaries flips the hinge. The opening then keeps **absolute coordinates**, so editing, merging
+or deleting rooms never breaks it.
+
+Rendering (after easy-floorplan, MIT): SVG symbol at the origin (jambs + hinged leaf + a
+quarter-circle arc revealed via `stroke-dashoffset`), translated/rotated onto the wall; windows
+are two casement leaves. `openingAmount` (pure) maps the contact state to 0..1: no sensor →
+door drawn open / window closed (static-plan convention); `unavailable`/`unknown` freeze that
+default. The lock renders as an HTML padlock badge (`.oplock`) in the device layer; a lock is
+**never** toggled from the plan (TOGGLE_FORBIDDEN_DOMAINS rule). View-mode UX: hover outline,
+drag along walls (continuous re-snap, saved on release), click → status card (250 ms timer),
+double click → properties dialog. In markup mode the "Opening" tool handles clicks instead.
+
 ## Integration WS API
 
 | Command | Parameters | Response |

docs/CHANGELOG.md

@@ -1,5 +1,76 @@
 # Changelog
 
+## 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
+  `lightbulb-on`. Conservative by design: only well-known pairs, never when the
+  user picked a custom icon, and `unavailable`/`unknown` keep the base icon.
+  Gated by the existing "live states" card option. (Pure `stateIcon`, unit-tested.)
+- **New marker display mode "Value instead of an icon"**: the measurement itself
+  (temperature °, humidity %, or any numeric state with its unit) becomes the
+  marker body — the small corner badges disappear for such markers. Direct
+  request from issue #3. Non-numeric entities fall back to the icon.
+
+## v1.25.0 — 2026-07-21 (three interaction modes: View / Plan / Devices)
+The approved UX redesign (docs/UX-MODES.md), confirmed by user feedback (#3):
+
+- **View** (default, and the only mode after every load): display and device
+  interaction only — tap/long-press/tooltips/pan/zoom. Nothing can be dragged or
+  edited; panning may start on top of an icon and never displaces it. The header
+  carries only space tabs, the counter, zoom and the mode switcher.
+- **Plan**: everything about geometry and appearance — room outline/delete/merge/
+  split tools, openings (placement, drag along walls, click-to-edit), room-label
+  dragging, per-space gear dialog, add space, the ⚙ fill palette. Orange stage frame.
+- **Devices**: marker work — icon dragging lives ONLY here, a click opens the
+  editor directly; add device, show-all curation, reset layout, icon rules. Accent frame.
+- The mode switcher is a segmented control shown to administrators; the standalone
+  markup toggle button is gone, "drag anywhere" (v1.9) is consciously reversed,
+  and the v1.23.1 view-mode opening drag/double-click moved into Plan.
+
+## v1.24.2 — 2026-07-16 (lights fill: a color for rooms with no light sources)
+- The "Fill: lights" group in General settings gained a third color — **"No light
+  sources"**. Its default opacity is 0, so rooms without any lights stay unfilled
+  exactly as before; give it an opacity and such rooms get their own tint,
+  distinguishable from "all lights off".
+
+## v1.24.1 — 2026-07-16 (space tab: gear instead of pencil)
+- The small icon next to a space name in the tabs is now a gear (was a pencil) —
+  the dialog it opens is space *settings* (plan, display, scale), not just renaming.
+
+## v1.24.0 — 2026-07-16 (general settings: fill palette; per-space LQI toggle)
+- **New "General settings" dialog** (⚙ in the header): the fill colors used by every
+  space, grouped by mode — lights (on / all off), temperature (cold / comfortable /
+  hot) and zigbee signal (weak / strong endpoints of the gradient). Every color has
+  its **own opacity slider**; the zigbee fill interpolates between the two configured
+  endpoint colors. Stored server-side in `settings.fill_colors` (defaults are not
+  persisted); the static `houseplan-space-card` uses the same palette.
+- **Per-space "Show zigbee signal (LQI)" toggle** in the space dialog: hides or shows
+  the LQI badges next to zigbee devices (and the signal line in room tooltips) for
+  that space; when never touched, the card-level `show_signal` option applies as before.
+- Fill opacity is now governed by the per-color setting; the space "Opacity" slider
+  keeps controlling borders and names.
+- New pure helpers `fillColorsOf` / `lerpColor` / `roomFillStyle` (+4 tests: 77 → 81);
+  backend schema for `fill_colors` and `show_lqi`; smoke `smoke_general_settings`.
+
+## v1.23.2 — 2026-07-16 (manual upload limit raised to 50 MB)
+- The per-file limit for attached manuals (PDF etc.) is now **50 MB** (was 25).
+  The limit is still enforced while the multipart body streams in, so an oversized
+  upload is cut off early rather than buffered whole; the error toast reads the
+  actual limit from the server response.
+
+## v1.23.1 — 2026-07-17 (openings: hover, drag along walls, double-click properties)
+- **Hover affordance**: an accent outline hugs the opening's wall strip on hover, with a
+  grab cursor — placed openings now look grabbable.
+- **Drag along walls** (view mode): an opening re-snaps continuously to the nearest derived
+  wall while dragged; too far from any wall → it stays put. `snapToWall` now normalizes the
+  angle to [-90, 90) — two rooms share a wall with OPPOSITE edge directions, and without this
+  a drag across segment boundaries flipped the hinge side back and forth. Saved on release.
+- **Click / double click**: a single click still opens the status card (now via a 250 ms
+  timer); a **double click opens the properties dialog** right from view mode. The markup
+  "Opening" tool behaves as before. Hit zone made slightly thicker and is now a strip along
+  the wall (previously it covered the whole swing square, causing accidental hovers).
+- (+1 test: 76 → 77.)
+
 ## v1.23.0 — 2026-07-17 (doors & windows with live open/lock state)
 Visual language after easy-floorplan (MIT); the placement model is ours.
 - **New markup tool "Opening"**: click next to a wall → the opening snaps onto the nearest

docs/DEVELOPMENT.md

@@ -69,6 +69,15 @@ cp dist/houseplan-card.js custom_components/houseplan/frontend/
   ("InvalidStateError: Transition was aborted", hui-view is not created for 1–2 min).
   Cured by repeating the SPA navigation: pushState + a location-changed event, or just waiting.
 
+## Dependency and cache gotchas
+
+- **polygon-clipping is a trap**: its `.d.ts` declares named exports but the ESM build has only
+  a default export — tsc or the runtime breaks, whichever you appease. Use **polyclip-ts**
+  (proper ESM + native types; same results, +~50 KB bundle via bignumber.js).
+- **Redeploying the same version keeps the resource URL** (`/houseplan_files/houseplan-card.js?v=X`),
+  so browsers may serve the previous bundle from cache. Bump the version for anything users must
+  pick up, or hard-refresh (Ctrl+Shift+R) when testing a hotfix redeploy.
+
 ## Release
 
 Tag `vX.Y.Z` + GitHub Release → the workflow `.github/workflows/release.yml` builds and attaches

docs/ROADMAP.md

@@ -14,27 +14,27 @@ This roadmap replaces them.
 
 Track progress in `custom_components/houseplan/quality_scale.yaml` (done/exempt + comment).
 
-- [ ] `runtime-data`: move `hass.data[DOMAIN]` (stores, entry, write lock) to typed
+- [x] `runtime-data`: move `hass.data[DOMAIN]` (stores, entry, write lock) to typed
   `entry.runtime_data` (`type HouseplanConfigEntry = ConfigEntry[HouseplanData]`).
   Keep WS command registration in `async_setup` (commands must survive entry reloads).
-- [ ] `config-entry-unloading` (Silver, do it now): real `async_unload_entry` — unregister
+- [x] `config-entry-unloading` (Silver, do it now): real `async_unload_entry` — unregister
   update listeners via `entry.async_on_unload`; document what stays (static paths cannot
   be unregistered — exempt comment).
-- [ ] `test-before-setup`: verify storage is loadable/writable in `async_setup_entry`,
+- [x] `test-before-setup`: verify storage is loadable/writable in `async_setup_entry`,
   raise `ConfigEntryNotReady` on failure.
-- [ ] `unique-config-entry`: replace the manual `_async_current_entries()` check with
+- [x] `unique-config-entry`: replace the manual `_async_current_entries()` check with
   `single_config_entry: true` in manifest.
-- [ ] `config-flow-test-coverage` + backend tests for websocket_api (pytest-homeassistant-custom-component:
+- [x] `config-flow-test-coverage` + backend tests for websocket_api (pytest-homeassistant-custom-component:
   conflict/rev, admin_only enforcement, layout point ops, upload limits).
-- [ ] Storage versioning: `Store(minor_version=...)` + `_async_migrate_func` skeleton **now**,
+- [x] Storage versioning: `Store(minor_version=...)` + `_async_migrate_func` skeleton **now**,
   before the config schema evolves further (Bronze-adjacent, cheap while schema is stable).
-- [ ] `quality_scale.yaml` with honest exempt list (no entities ⇒ entity rules N/A, no polling, no deps).
+- [x] `quality_scale.yaml` with honest exempt list (no entities ⇒ entity rules N/A, no polling, no deps).
 
 ## Phase 8 — Quality Scale: Silver + selected Gold
 
 - [ ] `test-coverage` ≥95% backend; frontend: extract remaining pure logic (view math,
   marker resolution) into `logic.ts`/`devices.ts` and cover with node:test.
-- [ ] `diagnostics.py`: config + layout dump with `async_redact_data` (redact names/links/PDF paths).
+- [x] `diagnostics.py`: config + layout dump with `async_redact_data` (redact names/links/PDF paths).
 - [ ] `reconfiguration-flow` + richer **options flow**: admin_only, curation defaults
   (exclude domains — UI editable, replacing the hardcoded EXCLUDED_DOMAINS fallback),
   LQI thresholds, group_lights default.
@@ -74,6 +74,13 @@ 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)
+
+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.
+
 ## Explicit non-goals (for now)
 
 - 3D plans (.glb) — separate market (3Dash), heavy dependencies.

docs/STATUS.md

@@ -9,18 +9,18 @@
 > (versions, publication, infrastructure), DEVELOPMENT.md for new gotchas,
 > ARCHITECTURE.md for design changes, ROADMAP.md when plans move.
 
-## Snapshot (2026-07-05)
+## Snapshot (2026-07-17)
 
 | Item | State |
 |---|---|
-| Version | **v1.23.0** everywhere (manifest, const.py, package.json, CARD_VERSION) |
-| GitHub | https://github.com/Matysh/houseplan-card — branch `main`, releases v1.9.3…v1.11.2 |
+| Version | **v1.26.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 |
 | Brands | Ships **inside the integration**: `custom_components/houseplan/brand/{icon,icon@2x,logo,logo@2x}.png` (HA ≥2026.3 local-brands mechanism). home-assistant/brands PR #10700 was auto-closed — that repo no longer accepts custom integrations |
-| Home instance | ha.jbstudio.pro (SSH port 323, key `ha_jb`), deployed v1.11.2, installed *via HACS* (custom repo) — updates flow through HACS now |
+| Home instance | ha.jbstudio.pro (SSH port 323, key `ha_jb`), deployed **v1.23.1**, installed *via HACS* (custom repo). The user has real rooms, 12 openings (doors/windows with TTLock locks and contact sensors) and live fills configured |
 | Localization | UI en/ru (`src/i18n.ts`), auto by `hass.locale` + `language` card option; codebase and docs are English-first (`README.ru.md` is the Russian copy) |
-| Tests | 76 frontend (node:test, incl. a 12-test buildDevices suite on a fake hass) + 10 pure backend (anywhere) + 12 HA-harness backend (CI only, py3.13; skipped locally — sandbox has py3.10) |
+| Tests | 77 frontend (node:test, incl. a 12-test buildDevices suite on a fake hass) + 10 pure backend (anywhere) + 12 HA-harness backend (CI only, py3.13; skipped locally — sandbox has py3.10) |
 
 ## Recent milestones (details in CHANGELOG.md)
 
@@ -67,6 +67,27 @@
   space-geometry/space-render + module-level config cache (config-store).
 - **v1.16.1** — space-card renders room fills as configured on the full card (snapshot),
   no longer omitted; +shared areaLqi().
+- **v1.17.x** — entity markers get auto icon/temp (issue #1); correct resource URL documented
+  (issue #2); humidity badge (gated on device_class, not the icon).
+- **v1.18.x** — live ruler while drawing rooms (metres / feet+inches) + per-space scale
+  `cell_cm`; visibility fix (the badge lived in the markup-hidden devlayer).
+- **v1.19.0** — a line is never an entity of its own: walls derived from room outlines
+  (`roomEdges`), unfinished contours persist nothing, Erase tool removed, `space.segments`
+  stripped on save.
+- **v1.20.0** — rooms may not overlap (strictly-inside clicks refused, overlapping contours
+  refused at close; shared walls stay legal).
+- **v1.21.x** — merge & split rooms (boolean geometry via polyclip-ts; merge = union collapses
+  to one hole-free outline; split = wall-to-wall chord, bigger part keeps identity) + UX fixes.
+- **v1.22.0** — presence ripples (badge/ripple/icon_ripple + colour/size, `isActiveState`),
+  per-device icon size/rotation (`--dev-size`), one-click HACS badge. NOTE: sources were lost
+  in a sandbox reset after deploy and restored from conversation patches — push immediately
+  after building, never wait for verification.
+- **v1.23.0** — doors & windows: "Opening" markup tool (snap onto derived walls, absolute
+  coords), length in real cm, contact sensor + lock, animated leaf/arc, padlock badge, status
+  card; lock never toggled from the plan.
+- **v1.23.1** — openings UX: hover outline + grab cursor, drag along walls (angle normalized
+  to [-90,90) so the hinge never flips), click=status / double-click=properties, thicker hit
+  strip. Release v1.23.1 published on GitHub (covers v1.22.0–v1.23.1).
 
 ## Where things live
 

docs/TESTING.md

@@ -29,6 +29,20 @@ Run the *core flows* (marked ★ below) in each environment at least once per mi
 - [ ] Removal: delete entry → Lovelace resource entry disappears; `.storage/houseplan.*` survives; reinstall picks the old config up
 - [ ] Diagnostics download works; personal fields (name/link/description/pdfs) are `**REDACTED**` [auto]
 
+## Modes (v1.25.0) ★
+
+- [ ] The card always loads in **View**; edit modes are never restored [auto]
+- [ ] View: pan/zoom/space-switch/tap/long-press/tooltips only — dragging an icon,
+      label or opening does nothing; panning may start on top of an icon [auto]
+- [ ] View header: space tabs + count + zoom + mode tabs, ZERO edit buttons [auto]
+- [ ] Plan: markup toolbar, space gears, +space, ⚙ palette; device icons hidden,
+      labels/openings draggable; orange stage frame [auto]
+- [ ] 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]
+
 ## Onboarding ★
 
 - [ ] Empty config, HA has floors → floors-import wizard offers them sorted by level [auto]
@@ -57,6 +71,13 @@ Run the *core flows* (marked ★ below) in each environment at least once per mi
       smart-plug chip temperatures (`*_device_temperature`) and diagnostic-category temps are excluded [auto]
 - [ ] Space dialog is 500 px wide; the comfort-bounds inputs are compact (56 px)
 - [ ] The scale (cm per cell) input is compact (72 px), not full-width [auto]
+- [ ] General settings (⚙ in the header): fill colors grouped by mode (lights on/off/none,
+      temp cold/comfy/hot, LQI weak/strong), each with its own opacity slider [auto];
+      Reset restores defaults; saving defaults stores nothing [auto]
+- [ ] Custom fill colors apply to the full card AND the static space-card
+- [ ] LQI gradient interpolates between the configured weak/strong colors [auto]
+- [ ] Per-space "Show zigbee signal (LQI)" toggle hides/shows the badges next to
+      devices and the signal line in room tooltips for that space only [auto]
 - [ ] Device icon badge is centred exactly on its point (no 1 px down-right drift) [auto]
 - [ ] Device glyph is centred within its badge (no vertical drift — real ha-icon is block+line-height) [auto]
 - [ ] Room hover highlight still works when custom borders/fills are on
@@ -103,6 +124,10 @@ Run the *core flows* (marked ★ below) in each environment at least once per mi
 - [ ] ↺ reset restores auto layout after confirm
 - [ ] Temperature badge on thermometers; LQI value under zigbee icons with red→green color
 - [ ] Live states: light on = yellow, open cover/lock/door = orange, unavailable = faded
+- [ ] State icons (v1.26.0): auto icons morph with state — door/window/garage open↔closed,
+      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]
 - [ ] No devices at all in HA (fresh instance) → plan renders, "0 dev.", no console errors [auto]
 
 ## Device dialog (markers) ★
@@ -112,7 +137,7 @@ Run the *core flows* (marked ★ below) in each environment at least once per mi
 - [ ] Virtual device: requires name; room required; renders dashed
 - [ ] 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; >25 MB → readable error; .exe → bad-ext error [auto backend]; traversal names sanitized [auto backend]
+- [ ] PDF/manual upload: ok path; >50 MB → readable error; .exe → bad-ext error [auto backend]; traversal names sanitized [auto backend]
 - [ ] `javascript:` in the link field is not rendered as a clickable link [auto]
 - [ ] Remove: auto device → hidden marker (reappears via dialog "show all"? no — stays hidden until re-added); virtual → gone incl. its layout entry [auto backend]
 
@@ -210,6 +235,18 @@ require hands on real hardware — they remain for the human pass.
 - [ ] `show_button: false` hides the footer
 - [ ] Full card honours `#space=<id>` on load and on hashchange; invalid id ignored [auto]
 
+## Presence ripples / per-device icon (v1.22.0)
+
+- [ ] Marker dialog → Display = "Ripple only": the icon badge disappears, rings pulse while the
+      entity is on, and collapse to a faint dot when it goes off
+- [ ] Display = "Icon + ripple": both the icon and the rings are drawn
+- [ ] Ripple colour and size (×2..×8) apply per device
+- [ ] An entity going `unavailable` stops the pulsing (idle dot), never leaves it running
+- [ ] Icon size ×0.5..×3 and rotation 0..350° apply per device; the temp/humidity badges
+      scale with the icon
+- [ ] Ripples still work with the card-wide "live states" toggle OFF (they are opt-in per device)
+- [ ] With OS "reduce motion" enabled, rings do not animate
+
 ## Doors & windows (v1.23.0)
 
 - [ ] Markup → "Opening": a click away from any wall shows a toast; near a wall — the dialog
@@ -223,3 +260,9 @@ require hands on real hardware — they remain for the human pass.
       the lock can NOT be toggled from the plan
 - [ ] Flip toggles mirror the hinge side and the swing side
 - [ ] Click an existing opening with the tool → edit dialog; Delete removes it
+- [ ] (v1.23.1) Hovering an opening in view mode shows the accent outline + grab cursor
+- [ ] Dragging an opening slides it along walls (re-snapping, incl. around corners) and saves
+      on release; dragging far away from walls leaves it in place; hinge does not flip while
+      crossing wall-segment boundaries
+- [ ] Single click still opens the status card; double click opens the properties dialog;
+      a drag does NOT open either

docs/UX-MODES.md

@@ -0,0 +1,76 @@
+# UX redesign: three modes (approved 2026-07-21)
+
+> Approved design for reorganizing all card interactions into three tab-like modes.
+> Driven by the owner's mandate and confirmed by real user feedback
+> ([issue #3](https://github.com/Matysh/houseplan-card/issues/3): *"When moving the
+> map around, I sometimes move the doors/sensors around"*). This document is the
+> source of truth for the implementation iterations below. No code has been changed yet.
+
+## Principle
+
+A segmented control in the card header with three tabs; the active one is visually
+highlighted, and edit modes add a colored frame around the stage so the mode is
+obvious at a glance:
+
+**[ 👁 View ] [ 📐 Plan ] [ 🔧 Devices ]**
+
+- **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 — 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).
+
+Removed from this mode (they move, not die):
+- icon dragging ("drag anywhere", v1.9 — consciously reversed),
+- room-label dragging,
+- opening dragging along walls and double-click properties (v1.23.1),
+- every edit button in the header (+device, 👁 show-all, ↺ reset, ⬡ rules, ⚙ general,
+  per-space gear, markup toggle).
+
+Header in View: space tabs, device count, zoom cluster. Nothing else.
+
+## Plan — geometry and appearance of the space
+
+- Toolbar tools: Outline room, Delete room, Merge, Split, Opening (place / drag along
+  walls / properties), Room labels (drag positions — labels are part of the plan).
+- Space gear dialog (title, plan image / hand-drawn, scale, Display section, show_lqi),
+  add space, floors import, delete space.
+- ⚙ General settings (fill palette) lives here — it is about the plan's appearance.
+
+## Devices — placement and marker configuration
+
+- Icon dragging (ONLY here). Click on a device opens the **edit dialog directly**
+  (binding, name, icon, size/angle, display badge/ripple + colors, tap override,
+  model/link/description/PDFs, room).
+- + add device/entity/virtual, hide device, ↺ reset layout, 👁 show-all (curation
+  tool), ⬡ icon rules.
+
+## Deprecations decided
+
+1. "Drag anywhere" (v1.9) — reversed by this design.
+2. Opening drag / dbl-click properties in view (v1.23.1) — moved into Plan.
+3. The markup toggle button — replaced by the Plan tab.
+4. Legacy localStorage mode (card without the integration) — candidate for removal
+   in the next major; adds branching for a half-working scenario.
+
+## Approved follow-up features (from issue #3, by priority)
+
+1. State-reflecting icons (open/closed door variants etc., like core HA).
+2. `display: value` — show the measurement instead of an icon.
+3. Light color in the icon/ripple (RGB lights).
+4. Alarm visual (leak/smoke/doorbell): red pulse overlay.
+5. Rooms as sub-areas without an HA area + manual device placement by room id.
+6. Backlog (not planned): music notes for players, directional TV ripples.
+
+## Implementation iterations
+
+- **It.1 — mode shell:** the segmented control, mode state, View-mode gating of all
+  edit interactions/buttons (biggest UX win, smallest surface).
+- **It.2 — Plan tab:** move markup tools + space dialogs + labels drag + openings
+  editing under Plan; colored frame indicator.
+- **It.3 — Devices tab:** drag + direct-edit click + curation tools under Devices.
+- **It.4+:** follow-up features 1–5 above, each its own release.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "houseplan-card",
-  "version": "1.21.1",
+  "version": "1.23.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "houseplan-card",
-      "version": "1.21.1",
+      "version": "1.23.2",
       "license": "MIT",
       "dependencies": {
         "lit": "^3.1.3",

package.json

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

src/houseplan-card.ts

@@ -17,7 +17,9 @@ import {
   pointOnBoundary, mergeRooms, splitRoom, polygonArea, closestPointOnBoundary,
   snapToWall, openingAmount,
   averageLqi, fitView, declump, safeUrl, resolveTapAction, floorsOf, type FloorInfo,
-  spaceDisplayOf, roomFillColor, isActiveState, DEFAULT_ROOM_COLOR, DEFAULT_ROOM_OPACITY,
+  stateIcon,
+  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';
@@ -30,7 +32,7 @@ import './space-card';
 import { cardStyles } from './styles';
 import { langOf, t, type I18nKey } from './i18n';
 
-const CARD_VERSION = '1.23.0';
+const CARD_VERSION = '1.26.0';
 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';
@@ -80,7 +82,20 @@ class HouseplanCard extends LitElement {
   private _toastTimer?: number;
 
   // --- room markup editor ---
-  private _markup = false;
+  /** Interaction mode (docs/UX-MODES.md): view = display only, plan = geometry
+   * editing, devices = marker placement/config. Never persisted — every load
+   * starts in view. */
+  private _mode: 'view' | 'plan' | 'devices' = 'view';
+
+  /** Edit tabs are offered to admins only (hass.user missing → assume admin). */
+  private get _canEdit(): boolean {
+    return this._norm && this.hass?.user?.is_admin !== false;
+  }
+
+  /** Legacy alias: markup machinery is active exactly in plan mode. */
+  private get _markup(): boolean {
+    return this._mode === 'plan';
+  }
   private _tool: MarkupTool = 'draw';
   private _path: number[][] = []; // current outline (render units, vertices snapped to the grid)
   private _cursorPt: number[] | null = null;
@@ -96,7 +111,8 @@ class HouseplanCard extends LitElement {
     flipV: boolean;
     x: number; y: number; angle: number; // render units (from the wall snap)
   } | null = null;
-  private _openingInfo: OpeningCfg | null = null;                       // first room picked for a merge
+  private _openingInfo: OpeningCfg | null = null;
+  private _opDrag: { id: string; moved: boolean } | null = null;
   private _mergeDialog: { aId: string; bId: string; poly: number[][]; pick: 'a' | 'b' } | null = null;
   private _splitSel: { roomId: string; a: number[] | null } | null = null; // room being cut + first wall point
   // a split is applied only when the new room's dialog is confirmed — cancel leaves the room intact
@@ -116,6 +132,7 @@ class HouseplanCard extends LitElement {
   private _onboardingShown = false; // the auto space dialog is shown once per session
 
   private _rulesDialog: { rules: IconRule[]; test: string; busy: boolean } | null = null;
+  private _settingsDialog: { colors: FillColors; busy: boolean } | null = null;
   private _importDialog: { floors: (FloorInfo & { checked: boolean })[] } | null = null;
   private _importQueue: string[] = []; // floor titles still to create
   private _importTotal = 0;
@@ -129,7 +146,7 @@ class HouseplanCard extends LitElement {
     binding: string;     // 'device:<id>' | 'entity:<eid>' | 'virtual'
     bindingFilter: string;
     icon: string;        // '' = auto
-    display: 'badge' | 'ripple' | 'icon_ripple';
+    display: 'badge' | 'ripple' | 'icon_ripple' | 'value';
     rippleColor: string; // '' = accent
     rippleSize: number;  // in icon diameters
     size: number;        // icon size multiplier
@@ -157,6 +174,7 @@ class HouseplanCard extends LitElement {
     fillMode: 'none' | 'lqi' | 'light' | 'temp';
     tempMin: number;
     tempMax: number;
+    showLqi: boolean;
     cellCm: number;                // real-world cm represented by one grid cell
     busy: boolean;
   } | null = null;
@@ -191,7 +209,7 @@ class HouseplanCard extends LitElement {
     _selId: { state: true },
     _toast: { state: true },
     _serverCfg: { state: true },
-    _markup: { state: true },
+    _mode: { state: true },
     _tool: { state: true },
     _path: { state: true },
     _cursorPt: { state: true },
@@ -206,6 +224,7 @@ class HouseplanCard extends LitElement {
     _spaceDialog: { state: true },
     _infoCard: { state: true },
     _rulesDialog: { state: true },
+    _settingsDialog: { state: true },
     _importDialog: { state: true },
     _markerDialog: { state: true },
     _zoom: { state: true },
@@ -377,6 +396,11 @@ class HouseplanCard extends LitElement {
     return this._rulesCompiled;
   }
 
+  /** Global fill palette (config.settings.fill_colors over the defaults). */
+  private get _fillColors(): FillColors {
+    return fillColorsOf(this._settings);
+  }
+
   private get _excluded(): Set<string> {
     const list = this._settings.exclude_integrations;
     return list ? new Set(list) : EXCLUDED_DOMAINS;
@@ -671,7 +695,11 @@ class HouseplanCard extends LitElement {
   private _clickDevice(ev: MouseEvent, d: DevItem): void {
     ev.stopPropagation();
     if (this._drag?.moved || this._suppressClick || this._holdFired) return;
-    if (this._markup) return;
+    if (this._mode === 'plan') return;
+    if (this._mode === 'devices') {
+      this._openMarkerDialog(d);
+      return;
+    }
     const domain = d.primary ? d.primary.split('.')[0] : null;
     const action = resolveTapAction(d.tapAction, this._config?.tap_action, domain);
     if (action === 'toggle' && d.primary) {
@@ -814,7 +842,7 @@ class HouseplanCard extends LitElement {
   private _stagePointerDown(ev: PointerEvent): void {
     // do not interfere with icon dragging and markup drawing
     if (this._drag || this._markup) return;
-    if ((ev.target as HTMLElement).closest('.dev')) return;
+    if (this._mode === 'devices' && (ev.target as HTMLElement).closest('.dev')) return;
     this._pointers.set(ev.pointerId, { x: ev.clientX, y: ev.clientY });
     const v = this._viewOr(this._spaceModel().vb);
     if (this._pointers.size === 1) {
@@ -847,7 +875,10 @@ class HouseplanCard extends LitElement {
     } else if (this._panStart) {
       const ddx = ev.clientX - this._panStart.sx;
       const ddy = ev.clientY - this._panStart.sy;
-      if (Math.abs(ddx) + Math.abs(ddy) > 4) this._suppressClick = true;
+      if (Math.abs(ddx) + Math.abs(ddy) > 4) {
+        this._suppressClick = true;
+        clearTimeout(this._holdTimer);
+      }
       if (this._zoom > 1 && this._view) {
         const stage = this._stageEl!;
         const v = this._view;
@@ -881,23 +912,23 @@ class HouseplanCard extends LitElement {
   }
 
   private _pointerDown(ev: PointerEvent, d: DevItem): void {
-    if (this._markup) return; // in markup mode icons are not dragged
+    if (this._mode === 'plan') return; // icons are hidden in plan mode anyway
+    if (this._mode === 'view') {
+      // view: no drag, no capture — panning may start on an icon; only the
+      // long-press timer runs (cancelled by stage movement)
+      this._holdFired = false;
+      clearTimeout(this._holdTimer);
+      this._holdTimer = window.setTimeout(() => {
+        this._holdFired = true;
+        this._infoCard = d;
+      }, 600);
+      return;
+    }
     ev.preventDefault();
     const p = this._pos(d);
     this._drag = { id: d.id, sx: ev.clientX, sy: ev.clientY, ox: p.x, oy: p.y, moved: false };
     (ev.target as HTMLElement).setPointerCapture(ev.pointerId);
     this._tip = null;
-    // long-press always opens the info card — keeps metadata reachable
-    // even when the tap action is set to toggle
-    this._holdFired = false;
-    clearTimeout(this._holdTimer);
-    this._holdTimer = window.setTimeout(() => {
-      if (this._drag && this._drag.id === d.id && !this._drag.moved) {
-        this._holdFired = true;
-        this._drag = null;
-        this._infoCard = d;
-      }
-    }, 600);
   }
 
   private _pointerMove(ev: PointerEvent, d: DevItem): void {
@@ -987,12 +1018,13 @@ class HouseplanCard extends LitElement {
     return roomEdges(sp?.rooms || []).map((s) => [s[0] * NORM_W, s[1] * H, s[2] * NORM_W, s[3] * H]);
   }
 
-  private _toggleMarkup(): void {
-    if (!this._norm) {
+  private _setMode(mode: 'view' | 'plan' | 'devices'): void {
+    if (this._mode === mode) return;
+    if (mode === 'plan' && !this._norm) {
       this._showToast(this._t('toast.markup_needs_server'));
       return;
     }
-    this._markup = !this._markup;
+    this._mode = mode;
     this._path = [];
     this._cursorPt = null;
     this._tool = 'draw';
@@ -1000,8 +1032,11 @@ class HouseplanCard extends LitElement {
     this._mergeDialog = null;
     this._splitSel = null;
     this._pendingSplit = null;
+    this._selId = null;
+    this._tip = null;
   }
 
+
   private _svgPoint(ev: MouseEvent): number[] {
     const stage = this.renderRoot.querySelector('.stage') as HTMLElement;
     const r = stage.getBoundingClientRect();
@@ -1155,17 +1190,7 @@ class HouseplanCard extends LitElement {
       (o) => Math.hypot(raw[0] - o.rx, raw[1] - o.ry) <= Math.max(o.rlen / 2, eps),
     );
     if (hit) {
-      this._openingDialog = {
-        id: hit.id,
-        type: hit.type,
-        lengthCm: Math.round((hit.rlen / this._gridPitch) * this._cellCm),
-        contact: hit.contact || '',
-        lock: hit.lock || '',
-        invert: !!hit.invert,
-        flipH: !!hit.flip_h,
-        flipV: !!hit.flip_v,
-        x: hit.rx, y: hit.ry, angle: hit.angle,
-      };
+      this._editOpening(hit);
       return;
     }
     const snap = snapToWall(raw, this._spaceModel().rooms, eps);
@@ -1180,6 +1205,73 @@ class HouseplanCard extends LitElement {
     };
   }
 
+  /** Open the properties dialog for an existing opening. */
+  private _editOpening(o: OpeningCfg & { rx: number; ry: number; rlen: number }): void {
+    this._openingDialog = {
+      id: o.id,
+      type: o.type,
+      lengthCm: Math.round((o.rlen / this._gridPitch) * this._cellCm),
+      contact: o.contact || '',
+      lock: o.lock || '',
+      invert: !!o.invert,
+      flipH: !!o.flip_h,
+      flipV: !!o.flip_v,
+      x: o.rx, y: o.ry, angle: o.angle,
+    };
+  }
+
+  /** Drag an opening along the walls (view mode): it re-snaps continuously. */
+  private _opPointerDown(ev: PointerEvent, o: OpeningCfg): void {
+    if (this._mode !== 'plan') return;
+    ev.preventDefault();
+    ev.stopPropagation();
+    try {
+      (ev.target as Element).setPointerCapture?.(ev.pointerId);
+    } catch {
+      /* an inactive pointerId (synthetic events, some browsers) must not kill the drag */
+    }
+    this._opDrag = { id: o.id, moved: false };
+  }
+
+  private _opPointerMove(ev: PointerEvent, o: OpeningCfg): void {
+    if (!this._opDrag || this._opDrag.id !== o.id) return;
+    const raw = this._svgPoint(ev);
+    const snap = snapToWall(raw, this._spaceModel().rooms, this._gridPitch * 4);
+    if (!snap) return; // too far from any wall: the opening stays where it was
+    this._opDrag.moved = true;
+    const sp = this._curSpaceCfg;
+    const cfg = sp?.openings?.find((x: OpeningCfg) => x.id === o.id);
+    if (!cfg) return;
+    cfg.x = snap.x / NORM_W;
+    cfg.y = snap.y / this._spaceH;
+    cfg.angle = snap.angle;
+    this.requestUpdate();
+  }
+
+  private _opPointerUp(ev: PointerEvent, o: OpeningCfg): void {
+    if (!this._opDrag || this._opDrag.id !== o.id) return;
+    const moved = this._opDrag.moved;
+    if (moved) this._saveConfig();
+    // keep the flag until the click event that follows pointerup, then let it go
+    if (moved) window.setTimeout(() => (this._opDrag = null), 0);
+    else this._opDrag = null;
+  }
+
+  /** Click: the status card (delayed so a double click can cancel it). */
+  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);
+    }
+  }
+
   private _saveOpening(): void {
     const d = this._openingDialog;
     const sp = this._curSpaceCfg;
@@ -1619,7 +1711,7 @@ class HouseplanCard extends LitElement {
         const json = await resp.json().catch(() => ({}));
         if (!resp.ok || json.error) {
           const map: Record<string, string> = {
-            too_large: this._t('err.too_large', { mb: json.max_mb || 25 }),
+            too_large: this._t('err.too_large', { mb: json.max_mb || 50 }),
             bad_ext: this._t('err.bad_ext'),
             unauthorized: this._t('err.unauthorized'),
           };
@@ -1785,6 +1877,7 @@ class HouseplanCard extends LitElement {
         showBorders: disp.showBorders, showNames: disp.showNames,
         roomColor: disp.color, roomOpacity: disp.opacity, fillMode: disp.fill,
         tempMin: disp.tempMin, tempMax: disp.tempMax,
+        showLqi: disp.showLqi ?? this._config?.show_signal ?? true,
         cellCm: Number(sp.cell_cm) > 0 ? Number(sp.cell_cm) : 5,
         busy: false,
       };
@@ -1795,6 +1888,7 @@ class HouseplanCard extends LitElement {
         showBorders: false, showNames: false,
         roomColor: DEFAULT_ROOM_COLOR, roomOpacity: DEFAULT_ROOM_OPACITY, fillMode: 'none',
         tempMin: DEFAULT_TEMP_MIN, tempMax: DEFAULT_TEMP_MAX,
+        showLqi: this._config?.show_signal ?? true,
         cellCm: 5,
         busy: false,
       };
@@ -1878,6 +1972,7 @@ class HouseplanCard extends LitElement {
         fill_mode: d.fillMode,
         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,
       };
       sp.cell_cm = Number.isFinite(d.cellCm) && d.cellCm > 0 ? d.cellCm : 5;
       await this._saveConfigNow();
@@ -1892,7 +1987,7 @@ class HouseplanCard extends LitElement {
         // guide the user onward: straight into room markup mode
         this._importTotal = 0;
         this._space = this._serverCfg!.spaces[0]?.id || this._space;
-        this._markup = true;
+        this._mode = 'plan';
         this._tool = 'draw';
         this._path = [];
         this._cursorPt = null;
@@ -1969,6 +2064,7 @@ class HouseplanCard extends LitElement {
       showBorders: false, showNames: false,
       roomColor: DEFAULT_ROOM_COLOR, roomOpacity: DEFAULT_ROOM_OPACITY, fillMode: 'none',
       tempMin: DEFAULT_TEMP_MIN, tempMax: DEFAULT_TEMP_MAX,
+      showLqi: this._config?.show_signal ?? true,
       cellCm: 5,
       busy: false,
     };
@@ -1981,7 +2077,7 @@ class HouseplanCard extends LitElement {
     else if (this._importTotal > 0 && this._model.length) {
       this._importTotal = 0;
       this._space = this._serverCfg!.spaces[0]?.id || this._space;
-      this._markup = true;
+      this._mode = 'plan';
       this._showToast(this._t('import.done'));
     }
   }
@@ -2020,6 +2116,86 @@ class HouseplanCard extends LitElement {
     </div>`;
   }
 
+  // ================= GENERAL SETTINGS =================
+
+  private _openSettingsDialog = (): void => {
+    if (!this._norm) return;
+    // deep copy so the dialog edits do not leak into the live palette
+    this._settingsDialog = { colors: JSON.parse(JSON.stringify(this._fillColors)), busy: false };
+  };
+
+  private _setFillColor(key: keyof FillColors, patch: Partial<{ c: string; a: number }>): void {
+    const d = this._settingsDialog!;
+    this._settingsDialog = { ...d, colors: { ...d.colors, [key]: { ...d.colors[key], ...patch } } };
+  }
+
+  private async _saveSettingsDialog(): Promise<void> {
+    const d = this._settingsDialog;
+    if (!d || d.busy) return;
+    this._settingsDialog = { ...d, busy: true };
+    try {
+      const cfg = this._serverCfg!;
+      const isDefault = JSON.stringify(d.colors) === JSON.stringify(DEFAULT_FILL_COLORS);
+      const settings: any = { ...cfg.settings };
+      if (isDefault) delete settings.fill_colors;
+      else settings.fill_colors = d.colors;
+      this._serverCfg = { ...cfg, settings };
+      await this._saveConfigNow();
+      this._settingsDialog = null;
+      this.requestUpdate();
+      this._showToast(this._t('gs.saved'));
+    } catch (e: any) {
+      this._settingsDialog = { ...this._settingsDialog!, busy: false };
+      this._showToast(this._t('toast.error', { err: this._errText(e) }));
+    }
+  }
+
+  private _renderColorRow(key: keyof FillColors, labelKey: string): TemplateResult {
+    const d = this._settingsDialog!;
+    const v = d.colors[key];
+    return html`<div class="colorrow gsrow">
+      <span class="gsl">${this._t(labelKey as any)}</span>
+      <input type="color" .value=${v.c}
+        @input=${(e: Event) => this._setFillColor(key, { c: (e.target as HTMLInputElement).value })} />
+      <input type="range" min="0" max="100" .value=${String(Math.round(v.a * 100))}
+        @input=${(e: Event) => this._setFillColor(key, { a: Number((e.target as HTMLInputElement).value) / 100 })} />
+      <span class="opv">${Math.round(v.a * 100)}%</span>
+    </div>`;
+  }
+
+  private _renderSettingsDialog(): TemplateResult {
+    return html`<div class="menuwrap dialogwrap" @click=${(e: Event) => e.stopPropagation()}>
+      <div class="dialog wide" @click=${(e: Event) => e.stopPropagation()}>
+        <div class="hd"><ha-icon icon="mdi:cog-outline"></ha-icon>${this._t('gs.title')}</div>
+        <div class="body">
+          <div class="rhint">${this._t('gs.hint')}</div>
+          <label class="dispsection">${this._t('gs.light_group')}</label>
+          ${this._renderColorRow('light_on', 'gs.light_on')}
+          ${this._renderColorRow('light_off', 'gs.light_off')}
+          ${this._renderColorRow('light_none', 'gs.light_none')}
+          <label class="dispsection">${this._t('gs.temp_group')}</label>
+          ${this._renderColorRow('temp_cold', 'gs.temp_cold')}
+          ${this._renderColorRow('temp_ok', 'gs.temp_ok')}
+          ${this._renderColorRow('temp_hot', 'gs.temp_hot')}
+          <label class="dispsection">${this._t('gs.lqi_group')}</label>
+          ${this._renderColorRow('lqi_low', 'gs.lqi_low')}
+          ${this._renderColorRow('lqi_high', 'gs.lqi_high')}
+        </div>
+        <div class="row">
+          <button class="btn ghost" @click=${() =>
+            (this._settingsDialog = { ...this._settingsDialog!, colors: JSON.parse(JSON.stringify(DEFAULT_FILL_COLORS)) })}>
+            ${this._t('gs.reset')}
+          </button>
+          <span class="spacer"></span>
+          <button class="btn ghost" @click=${() => (this._settingsDialog = null)}>${this._t('btn.cancel')}</button>
+          <button class="btn on" @click=${this._saveSettingsDialog} ?disabled=${this._settingsDialog!.busy}>
+            <ha-icon icon="mdi:check"></ha-icon>${this._settingsDialog!.busy ? '…' : this._t('btn.save')}
+          </button>
+        </div>
+      </div>
+    </div>`;
+  }
+
   // ================= ICON RULES EDITOR =================
 
   private _openRulesDialog = (): void => {
@@ -2153,6 +2329,7 @@ class HouseplanCard extends LitElement {
     const vb = space.vb;
     const devs = this._devices.filter((d) => d.space === space.id);
     const disp = spaceDisplayOf(this._curSpaceCfg);
+    const showLqi = disp.showLqi ?? this._config.show_signal ?? true;
     const cfgSize = this._config.icon_size ?? 2.5;
     const iconPct = cfgSize > 8 ? 2.5 : cfgSize;
     const view = this._viewOr(vb);
@@ -2175,8 +2352,8 @@ class HouseplanCard extends LitElement {
                   this._restoreZoom();
                 }}
               >
-                ${s.title}${this._norm
-                  ? html`<ha-icon class="tabedit" icon="mdi:pencil"
+                ${s.title}${this._norm && this._mode === 'plan'
+                  ? html`<ha-icon class="tabedit" icon="mdi:cog-outline"
                       title=${this._t('title.configure_space')}
                       @click=${(e: Event) => {
                         e.stopPropagation();
@@ -2185,13 +2362,24 @@ class HouseplanCard extends LitElement {
                   : nothing}
               </button>`,
             )}
-            ${this._norm
+            ${this._norm && this._mode === 'plan'
               ? html`<button class="tab tabadd" title=${this._t('title.add_space')}
                   @click=${() => this._openSpaceDialog('create')}>
                   <ha-icon icon="mdi:plus"></ha-icon>
                 </button>`
               : nothing}
           </div>
+          ${this._canEdit
+            ? html`<div class="modes">
+                ${([['view', 'mdi:eye-outline'], ['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)}>
+                    <ha-icon icon=${ic}></ha-icon><span class="ml">${this._t(('mode.' + m) as any)}</span>
+                  </button>`,
+                )}
+              </div>`
+            : nothing}
           <span class="count">${this._t('count.devices', { n: devs.length })}</span>
           <span class="spacer"></span>
           <div class="zoomctl">
@@ -2200,14 +2388,12 @@ 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._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>`
-            : nothing}
-          ${this._norm
-            ? html`<button class="btn ${this._showAll ? 'on' : ''}" @click=${this._toggleShowAll}
+              </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>
@@ -2218,15 +2404,16 @@ class HouseplanCard extends LitElement {
                 <ha-icon icon="mdi:shape-plus-outline"></ha-icon>
               </button>`
             : nothing}
-          <button class="btn ${this._markup ? 'on' : ''}" @click=${this._toggleMarkup}
-            title=${this._t('title.markup')}>
-            <ha-icon icon="mdi:vector-square-edit"></ha-icon>
-          </button>
+          ${this._norm && this._mode === 'plan'
+            ? 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}
         </div>
 
-        <div class="stage ${this._markup ? 'markup' : ''} ${space.bg ? '' : 'noplan'}"
+        <div class="stage ${this._markup ? 'markup' : ''} ${space.bg ? '' : 'noplan'} mode-${this._mode}"
           style="height:calc(100dvh - 118px)"
           @click=${(e: MouseEvent) => this._markupClick(e)}
           @wheel=${(e: WheelEvent) => this._onWheel(e)}
@@ -2251,24 +2438,25 @@ class HouseplanCard extends LitElement {
                 // keep the stroke colour even when borders are hidden, so hover can reveal it
                 st.push(`--room-stroke:${disp.color}`, `--room-stroke-op:${disp.showBorders ? disp.opacity : 0}`);
                 const fillC = r.area
-                  ? roomFillColor(
+                  ? roomFillStyle(
                       disp.fill,
                       disp.fill === 'lqi' ? this._roomLqi(r.area) : null,
                       disp.fill === 'light' ? areaLights(this.hass, this._devices, r.area) : 'none',
                       disp.fill === 'temp' ? areaTemp(this.hass, this._devices, r.area) : null,
                       disp.tempMin,
                       disp.tempMax,
+                      this._fillColors,
                     )
                   : null;
                 if (fillC) {
                   cls += ' filled';
-                  st.push(`--room-fill:${fillC}`, `--room-fill-op:${(0.3 * disp.opacity).toFixed(3)}`);
+                  st.push(`--room-fill:${fillC.c}`, `--room-fill-op:${fillC.a.toFixed(3)}`);
                 } else st.push('--room-fill:transparent', '--room-fill-op:0');
                 style = st.join(';');
               }
               const tip = (e: MouseEvent) =>
                 this._showTip(e, r.name, this._t('tip.room'),
-                  this._config?.show_signal ? this._roomLqi(r.area) : null,
+                  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 c = this._roomCenter(r);
@@ -2286,7 +2474,7 @@ class HouseplanCard extends LitElement {
             ${this._renderOpenings(disp)}
           </svg>
           <div class="devlayer" style="--icon-size:${((iconPct * vb[2]) / view.w).toFixed(3)}cqw">
-            ${devs.map((d) => this._renderDevice(d, view))}
+            ${devs.map((d) => this._renderDevice(d, view, showLqi))}
             ${this._renderOpeningLocks(view)}
             ${disp.showNames && !this._markup
               ? space.rooms.map((r) => this._renderRoomLabel(r, space, view, disp))
@@ -2309,6 +2497,7 @@ class HouseplanCard extends LitElement {
         ${this._markerDialog ? this._renderMarkerDialog() : nothing}
         ${this._infoCard ? this._renderInfoCard() : nothing}
         ${this._rulesDialog ? this._renderRulesDialog() : nothing}
+        ${this._settingsDialog ? this._renderSettingsDialog() : nothing}
         ${this._importDialog ? this._renderImportDialog() : nothing}
         ${this._tip
           ? html`<div class="tip" style="left:${this._tip.x + 12}px;top:${this._tip.y + 12}px">
@@ -2327,17 +2516,31 @@ class HouseplanCard extends LitElement {
     `;
   }
 
-  private _renderDevice(d: DevItem, view: { x: number; y: number; w: number; h: number }): TemplateResult {
+  private _renderDevice(d: DevItem, view: { x: number; y: number; w: number; h: number }, showLqi = true): TemplateResult {
     const p = this._pos(d);
     const left = ((p.x - view.x) / view.w) * 100;
     const top = ((p.y - view.y) / view.h) * 100;
     const cls = this._stateClass(d);
     const temp = this._liveTemp(d);
     const hum = this._liveHum(d);
-    const lqi = this._config?.show_signal && !d.virtual ? lqiFor(this.hass, d.entities) : null;
+    const lqi = showLqi && !d.virtual ? lqiFor(this.hass, d.entities) : null;
     const m = d.marker;
     const disp = m?.display || 'badge';
     const ripple = disp === 'ripple' || disp === 'icon_ripple';
+    // value-only display: the measurement IS the marker
+    const primarySt = d.primary ? this.hass.states[d.primary] : undefined;
+    const valText = disp === 'value'
+      ? (temp != null ? temp + '°'
+        : hum != null ? hum + '%'
+        : primarySt && !isNaN(parseFloat(primarySt.state))
+          ? parseFloat(primarySt.state) + (primarySt.attributes?.unit_of_measurement ? ' ' + primarySt.attributes.unit_of_measurement : '')
+          : null)
+      : null;
+    // live state variants of the auto icon (doors, locks, bulbs), like core HA
+    const icon = this._config?.live_states
+      ? stateIcon(d.icon, d.primary ? d.primary.split('.')[0] : null,
+          primarySt?.attributes?.device_class, primarySt?.state, !!m?.icon)
+      : d.icon;
     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;
@@ -2349,7 +2552,7 @@ class HouseplanCard extends LitElement {
       if (m?.ripple_color) st.push(`--ripple-color:${m.ripple_color}`);
     }
     return html`<div
-      class="dev ${cls} ${this._selId === d.id ? 'sel' : ''} ${d.virtual ? 'virtual' : ''} ${disp === 'ripple' ? 'noicon' : ''}"
+      class="dev ${cls} ${this._selId === d.id ? 'sel' : ''} ${d.virtual ? 'virtual' : ''} ${disp === 'ripple' ? 'noicon' : ''} ${valText != null ? 'valonly' : ''}"
       style="${st.join(';')}"
       @click=${(e: MouseEvent) => this._clickDevice(e, d)}
       @mousemove=${(e: MouseEvent) =>
@@ -2364,11 +2567,13 @@ class HouseplanCard extends LitElement {
       ${ripple
         ? html`<span class="ripple ${active ? 'active' : ''}"><i></i><i></i><i></i></span>`
         : nothing}
-      ${disp !== 'ripple'
-        ? html`<ha-icon icon="${d.icon}" style=${angle ? `transform:rotate(${angle}deg)` : nothing}></ha-icon>`
-        : nothing}
-      ${temp != null ? html`<span class="tval">${temp}°</span>` : nothing}
-      ${hum != null ? html`<span class="hval">${hum}%</span>` : nothing}
+      ${valText != null
+        ? html`<span class="valtext">${valText}</span>`
+        : disp !== 'ripple'
+          ? html`<ha-icon icon="${icon}" style=${angle ? `transform:rotate(${angle}deg)` : nothing}></ha-icon>`
+          : nothing}
+      ${temp != null && valText == null ? html`<span class="tval">${temp}°</span>` : nothing}
+      ${hum != null && valText == null ? html`<span class="hval">${hum}%</span>` : nothing}
       ${lqi != null ? html`<span class="lqi" style="color:${lqiColor(lqi)}">${lqi}</span>` : nothing}
     </div>`;
   }
@@ -2386,7 +2591,7 @@ class HouseplanCard extends LitElement {
 
   /** Room-name labels are dragged exactly like device icons (same layout store). */
   private _labelDown(ev: PointerEvent, r: RoomCfg, spaceId: string): void {
-    if (this._markup) return;
+    if (this._mode !== 'plan') return;
     ev.preventDefault();
     ev.stopPropagation();
     const p = this._labelPos(r, spaceId);
@@ -2517,14 +2722,19 @@ class HouseplanCard extends LitElement {
             </g>
           </g>`;
       }
-      return svg`<g transform="translate(${o.rx} ${o.ry}) rotate(${o.angle})">
+      return svg`<g class="opening" transform="translate(${o.rx} ${o.ry}) rotate(${o.angle})">
         <g transform="scale(${sx} ${sy})">
           <line x1="${-half}" y1="${-jamb / 2}" x2="${-half}" y2="${jamb / 2}" stroke="${base}" stroke-width="2.5"></line>
           <line x1="${half}" y1="${-jamb / 2}" x2="${half}" y2="${jamb / 2}" stroke="${base}" stroke-width="2.5"></line>
           ${body}
         </g>
-        <rect class="op-hit" x="${-half - 6}" y="${-o.rlen - 8}" width="${o.rlen + 12}" height="${o.rlen * 2 + 16}"
-          @click=${(e: MouseEvent) => { e.stopPropagation(); if (!this._markup) this._openingInfo = o; }}></rect>
+        <rect class="op-outline" x="${-half - 10}" y="-16" width="${o.rlen + 20}" height="32" rx="6"></rect>
+        <rect class="op-hit" x="${-half - 12}" y="-20" width="${o.rlen + 24}" height="40"
+          @click=${(e: MouseEvent) => this._opClick(e, o)}
+          @pointerdown=${(e: PointerEvent) => this._opPointerDown(e, o)}
+          @pointermove=${(e: PointerEvent) => this._opPointerMove(e, o)}
+          @pointerup=${(e: PointerEvent) => this._opPointerUp(e, o)}
+          @pointercancel=${(e: PointerEvent) => this._opPointerUp(e, o)}></rect>
       </g>`;
     })}`;
   }
@@ -2546,7 +2756,7 @@ class HouseplanCard extends LitElement {
       const top = ((py - view.y) / view.h) * 100;
       return html`<div class="oplock ${locked ? 'locked' : known ? 'unlocked' : 'unknown'}"
         style="left:${left}%;top:${top}%"
-        @click=${(e: MouseEvent) => { e.stopPropagation(); if (!this._markup) this._openingInfo = o; }}>
+        @click=${(e: MouseEvent) => { e.stopPropagation(); if (this._mode === 'view') this._openingInfo = o; }}>
         <ha-icon icon="${locked ? 'mdi:lock' : known ? 'mdi:lock-open-variant' : 'mdi:lock-question'}"></ha-icon>
       </div>`;
     })}`;
@@ -2843,11 +3053,11 @@ class HouseplanCard extends LitElement {
           <label>${this._t('marker.display_label')}</label>
           <select class="areasel"
             @change=${(e: Event) => (this._markerDialog = { ...d, display: (e.target as HTMLSelectElement).value as any })}>
-            ${[['badge', 'display.badge'], ['ripple', 'display.ripple'], ['icon_ripple', 'display.icon_ripple']].map(
+            ${[['badge', 'display.badge'], ['ripple', 'display.ripple'], ['icon_ripple', 'display.icon_ripple'], ['value', 'display.value']].map(
               ([v, k]) => html`<option value=${v} ?selected=${d.display === v}>${this._t(k as any)}</option>`,
             )}
           </select>
-          ${d.display !== 'badge'
+          ${d.display === 'ripple' || d.display === 'icon_ripple'
             ? html`<div class="colorrow">
                 <input type="color" .value=${d.rippleColor || '#3ea6ff'}
                   @input=${(e: Event) => (this._markerDialog = { ...d, rippleColor: (e.target as HTMLInputElement).value })} />
@@ -2987,6 +3197,11 @@ class HouseplanCard extends LitElement {
               @change=${(e: Event) => (this._spaceDialog = { ...d, showNames: (e.target as HTMLInputElement).checked })} />
             <span>${this._t('space.show_names')}</span>
           </label>
+          <label class="srcrow">
+            <input type="checkbox" .checked=${d.showLqi}
+              @change=${(e: Event) => (this._spaceDialog = { ...d, showLqi: (e.target as HTMLInputElement).checked })} />
+            <span>${this._t('space.show_lqi')}</span>
+          </label>
           <label>${this._t('space.room_color')}</label>
           <div class="colorrow">
             <input type="color" .value=${d.roomColor}

src/i18n/en.json

@@ -222,5 +222,26 @@
   "editor.button_label": "Button label",
   "editor.button_target": "Target dashboard path",
   "editor.aspect_ratio": "Aspect ratio (e.g. 16:9 or auto)",
-  "marker.sub_entity": "entity"
+  "marker.sub_entity": "entity",
+  "title.general_settings": "General settings",
+  "gs.title": "General settings",
+  "gs.hint": "Fill colors apply to every space; each color has its own opacity. Which fill mode a space uses is set in that space's dialog.",
+  "gs.light_group": "Fill: lights",
+  "gs.light_on": "Lights on",
+  "gs.light_off": "All lights off",
+  "gs.temp_group": "Fill: temperature",
+  "gs.temp_cold": "Cold",
+  "gs.temp_ok": "Comfortable",
+  "gs.temp_hot": "Hot",
+  "gs.lqi_group": "Fill: zigbee signal",
+  "gs.lqi_low": "Weak signal",
+  "gs.lqi_high": "Strong signal",
+  "gs.reset": "Reset to defaults",
+  "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"
 }

src/i18n/ru.json

@@ -222,5 +222,26 @@
   "editor.button_label": "Текст кнопки",
   "editor.button_target": "Путь дашборда (куда вести)",
   "editor.aspect_ratio": "Соотношение сторон (напр. 16:9 или auto)",
-  "marker.sub_entity": "сущность"
+  "marker.sub_entity": "сущность",
+  "title.general_settings": "Общие настройки",
+  "gs.title": "Общие настройки",
+  "gs.hint": "Цвета заливок действуют на все пространства; у каждого цвета своя прозрачность. Какой режим заливки использует пространство — задаётся в его диалоге.",
+  "gs.light_group": "Заливка: освещение",
+  "gs.light_on": "Свет включён",
+  "gs.light_off": "Весь свет выключен",
+  "gs.temp_group": "Заливка: температура",
+  "gs.temp_cold": "Холодно",
+  "gs.temp_ok": "Комфорт",
+  "gs.temp_hot": "Жарко",
+  "gs.lqi_group": "Заливка: зигби-сигнал",
+  "gs.lqi_low": "Слабый сигнал",
+  "gs.lqi_high": "Сильный сигнал",
+  "gs.reset": "Сбросить к умолчаниям",
+  "gs.saved": "Общие настройки сохранены",
+  "space.show_lqi": "Показывать зигби-сигнал (LQI) у устройств",
+  "gs.light_none": "Нет источников света",
+  "mode.view": "Просмотр",
+  "mode.plan": "План",
+  "mode.devices": "Устройства",
+  "display.value": "Значение вместо иконки"
 }

src/logic.ts

@@ -97,7 +97,13 @@ export function snapToWall(
     const d = Math.hypot(p[0] - q[0], p[1] - q[1]);
     if (d < bestD) {
       bestD = d;
-      best = { x: q[0], y: q[1], angle: (Math.atan2(dy, dx) * 180) / Math.PI };
+      // normalize to [-90, 90): two rooms sharing a wall yield the same edge in
+      // OPPOSITE directions — without this, dragging an opening across segment
+      // boundaries would flip its hinge side back and forth
+      let angle = (Math.atan2(dy, dx) * 180) / Math.PI;
+      if (angle >= 90) angle -= 180;
+      else if (angle < -90) angle += 180;
+      best = { x: q[0], y: q[1], angle };
     }
   }
   return best;
@@ -489,6 +495,8 @@ export interface SpaceDisplay {
   fill: RoomFillMode;
   tempMin: number; // comfort range lower bound, °C
   tempMax: number; // comfort range upper bound, °C
+  /** Per-space LQI badges near zigbee devices; null = follow the card option. */
+  showLqi: boolean | null;
 }
 
 export const DEFAULT_ROOM_COLOR = '#3ea6ff';
@@ -508,9 +516,107 @@ export function spaceDisplayOf(spaceCfg: any): SpaceDisplay {
     fill: ['lqi', 'light', 'temp'].includes(s.fill_mode) ? s.fill_mode : 'none',
     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,
   };
 }
 
+// ---------------- global fill colors ----------------
+
+export interface FillColorEntry {
+  c: string; // #rrggbb
+  a: number; // 0..1 fill opacity
+}
+
+/** Global fill palette, grouped by fill mode; stored in config.settings.fill_colors. */
+export interface FillColors {
+  light_on: FillColorEntry;
+  light_off: FillColorEntry;
+  /** Rooms with no light sources at all; alpha 0 (default) = no fill, as before. */
+  light_none: FillColorEntry;
+  temp_cold: FillColorEntry;
+  temp_ok: FillColorEntry;
+  temp_hot: FillColorEntry;
+  lqi_low: FillColorEntry;
+  lqi_high: FillColorEntry;
+}
+
+export const DEFAULT_FILL_COLORS: FillColors = {
+  light_on: { c: '#ffd45c', a: 0.18 },
+  light_off: { c: '#9aa0a6', a: 0.14 },
+  light_none: { c: '#6b7480', a: 0 },
+  temp_cold: { c: '#4fc3f7', a: 0.18 },
+  temp_ok: { c: '#66d17a', a: 0.18 },
+  temp_hot: { c: '#ffd45c', a: 0.18 },
+  lqi_low: { c: '#f25a4a', a: 0.18 },
+  lqi_high: { c: '#4bd28f', a: 0.18 },
+};
+
+const HEX_RE = /^#[0-9a-f]{6}$/i;
+
+/** Merge stored overrides over the defaults, dropping malformed entries. */
+export function fillColorsOf(settings: any): FillColors {
+  const out: any = {};
+  const src = settings?.fill_colors || {};
+  for (const k of Object.keys(DEFAULT_FILL_COLORS) as (keyof FillColors)[]) {
+    const d = DEFAULT_FILL_COLORS[k];
+    const v = src[k];
+    out[k] = {
+      c: v && typeof v.c === 'string' && HEX_RE.test(v.c) ? v.c : d.c,
+      a: v && typeof v.a === 'number' ? Math.min(1, Math.max(0, v.a)) : d.a,
+    };
+  }
+  return out as FillColors;
+}
+
+/** Linear RGB interpolation between two hex colors, t clamped to 0..1. */
+export function lerpColor(a: string, b: string, t: number): string {
+  const tt = Math.min(1, Math.max(0, t));
+  const pa = [1, 3, 5].map((i) => parseInt(a.slice(i, i + 2), 16));
+  const pb = [1, 3, 5].map((i) => parseInt(b.slice(i, i + 2), 16));
+  const mix = pa.map((v, i) => Math.round(v + (pb[i] - v) * tt));
+  return '#' + mix.map((v) => v.toString(16).padStart(2, '0')).join('');
+}
+
+/**
+ * Room fill (color + opacity) for the selected mode, or null for "no fill",
+ * using the global palette. The LQI gradient interpolates lqi_low → lqi_high
+ * over the 40..180 LQI window (same thresholds as the badge color).
+ */
+export function roomFillStyle(
+  mode: RoomFillMode,
+  lqi: number | null,
+  lights: 'on' | 'off' | 'none',
+  temp: number | null | undefined,
+  tempMin: number,
+  tempMax: number,
+  colors: FillColors,
+): FillColorEntry | null {
+  if (mode === 'lqi') {
+    if (lqi == null) return null;
+    const t = (lqi - 40) / 140;
+    return { c: lerpColor(colors.lqi_low.c, colors.lqi_high.c, t),
+             a: colors.lqi_low.a + (colors.lqi_high.a - colors.lqi_low.a) * Math.min(1, Math.max(0, t)) };
+  }
+  if (mode === 'light') {
+    if (lights === 'none') {
+      // configurable "no light sources" color; alpha 0 keeps the historical
+      // no-fill behavior (and the unfilled hover), so nothing changes until
+      // the user assigns an opacity
+      return colors.light_none.a > 0 ? colors.light_none : null;
+    }
+    return lights === 'on' ? colors.light_on : colors.light_off;
+  }
+  if (mode === 'temp') {
+    if (temp == null) return null;
+    const lo = Math.min(tempMin, tempMax);
+    const hi = Math.max(tempMin, tempMax);
+    if (temp < lo) return colors.temp_cold;
+    if (temp > hi) return colors.temp_hot;
+    return colors.temp_ok;
+  }
+  return null;
+}
+
 /**
  * Room fill color for the selected mode, or null for "no fill".
  * - lqi: red→green gradient by the room's average zigbee signal (null LQI → no fill)
@@ -543,3 +649,28 @@ export function roomFillColor(
   }
   return null;
 }
+
+// ---------------- state-reflecting icons ----------------
+
+/**
+ * Swap the auto icon for a state variant (open door, unlocked lock…), like core
+ * HA does. Conservative: only well-known pairs, only when the user has NOT set
+ * a custom icon, and unknown/unavailable states keep the base icon.
+ */
+export function stateIcon(
+  base: string,
+  domain: string | null | undefined,
+  deviceClass: string | null | undefined,
+  state: string | null | undefined,
+  hasCustomIcon: boolean,
+): string {
+  if (hasCustomIcon || !state || state === 'unavailable' || state === 'unknown') return base;
+  if (domain === 'binary_sensor') {
+    if (deviceClass === 'door') return state === 'on' ? 'mdi:door-open' : 'mdi:door-closed';
+    if (deviceClass === 'window') return state === 'on' ? 'mdi:window-open' : 'mdi:window-closed';
+    if (deviceClass === 'garage_door') return state === 'on' ? 'mdi:garage-open-variant' : 'mdi:garage-variant';
+  }
+  if (domain === 'lock') return state === 'locked' ? 'mdi:lock' : 'mdi:lock-open-variant';
+  if (domain === 'light' && base === 'mdi:lightbulb') return state === 'on' ? 'mdi:lightbulb-on' : base;
+  return base;
+}

src/space-render.ts

@@ -8,7 +8,7 @@
  */
 import { html, svg, nothing, type TemplateResult } from 'lit';
 import { buildDevices, areaLqi, areaLights, areaTemp } from './devices';
-import { spaceDisplayOf, roomFillColor } from './logic';
+import { spaceDisplayOf, roomFillStyle, fillColorsOf } from './logic';
 import { DEFAULT_ICON_RULES, compileIconRules, EXCLUDED_DOMAINS } from './rules';
 import { t, type Lang } from './i18n';
 import type { ServerConfig } from './types';
@@ -71,18 +71,19 @@ export function renderSpaceStatic(o: StaticRenderOpts): TemplateResult | null {
         const parts = [`--room-stroke:${disp.color}`, `--room-stroke-op:${disp.showBorders ? disp.opacity : 0}`];
         // fill rendered exactly as configured on the full card (snapshot of current states)
         const fillC = r.area
-          ? roomFillColor(
+          ? roomFillStyle(
               disp.fill,
               disp.fill === 'lqi' ? areaLqi(o.hass, devs, r.area) : null,
               disp.fill === 'light' ? areaLights(o.hass, devs, r.area) : 'none',
               disp.fill === 'temp' ? areaTemp(o.hass, devs, r.area) : null,
               disp.tempMin,
               disp.tempMax,
+              fillColorsOf(o.cfg?.settings),
             )
           : null;
         if (fillC) {
           cls += ' filled';
-          parts.push(`--room-fill:${fillC}`, `--room-fill-op:${(0.3 * disp.opacity).toFixed(3)}`);
+          parts.push(`--room-fill:${fillC.c}`, `--room-fill-op:${fillC.a.toFixed(3)}`);
         } else {
           parts.push('--room-fill:transparent', '--room-fill-op:0');
         }

src/styles.ts

@@ -233,10 +233,26 @@ export const cardStyles = css`
       stroke-width: 1.5;
       transition: stroke-dashoffset 0.6s ease;
     }
+    /* hover affordance: a rounded outline hugging the wall strip + a grab cursor */
+    .op-outline {
+      fill: none;
+      stroke: var(--hp-accent);
+      stroke-width: 1.5;
+      opacity: 0;
+      transition: opacity 0.15s;
+      pointer-events: none;
+    }
+    g.opening:hover .op-outline {
+      opacity: 0.9;
+    }
     .op-hit {
       fill: transparent;
-      cursor: pointer;
+      cursor: grab;
       pointer-events: auto;
+      touch-action: none; /* drags, not scrolls, on touch */
+    }
+    .op-hit:active {
+      cursor: grabbing;
     }
     .stage.markup .op-hit {
       pointer-events: none; /* markup clicks go to the stage tools */
@@ -325,6 +341,7 @@ export const cardStyles = css`
       .ripple.active i:nth-child(n + 2) { display: none; }
     }
     .roomlabel {
+      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);
@@ -332,10 +349,10 @@ export const cardStyles = css`
       letter-spacing: 0.04em;
       white-space: nowrap;
       cursor: grab;
-      pointer-events: auto;
       user-select: none;
       z-index: 1;
     }
+    .stage.markup .roomlabel { pointer-events: auto; }
     .roomlabel:active { cursor: grabbing; }
     .measurelayer {
       position: absolute;
@@ -372,8 +389,46 @@ export const cardStyles = css`
     .stage.markup .room {
       pointer-events: none;
     }
-    .stage.markup .devlayer {
-      display: none; /* in markup mode icons must not get in the way */
+    .stage.markup .devlayer .dev {
+      display: none; /* in plan mode the icons do not get in the way; labels stay */
+    }
+    /* mode frames: the edit modes are visible at a glance */
+    .stage.mode-plan {
+      outline: 2px solid #ffc14d;
+      outline-offset: -2px;
+    }
+    .stage.mode-devices {
+      outline: 2px solid var(--hp-accent);
+      outline-offset: -2px;
+    }
+    .modes {
+      display: inline-flex;
+      gap: 2px;
+      background: rgba(127, 127, 127, 0.12);
+      border-radius: 10px;
+      padding: 3px;
+    }
+    .modetab {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      border: 0;
+      background: transparent;
+      color: var(--hp-muted);
+      padding: 5px 10px;
+      border-radius: 8px;
+      font-size: 12.5px;
+      font-weight: 600;
+      cursor: pointer;
+      font-family: inherit;
+    }
+    .modetab ha-icon { --mdc-icon-size: 15px; }
+    .modetab.active {
+      background: var(--hp-accent);
+      color: var(--text-primary-color, #fff);
+    }
+    @media (max-width: 720px) {
+      .modetab .ml { display: none; }
     }
     .room.picked {
       stroke: #ffc14d;
@@ -430,6 +485,16 @@ export const cardStyles = css`
     .namein {
       width: 130px;
     }
+    .dev.valonly {
+      width: auto;
+      min-width: var(--dev-size, var(--icon-size, 2.5cqw));
+      padding: 0 calc(var(--icon-size, 2.5cqw) * 0.16);
+    }
+    .dev.valonly .valtext {
+      font-size: calc(var(--icon-size, 2.5cqw) * 0.45);
+      font-weight: 700;
+      white-space: nowrap;
+    }
     .devlayer {
       position: absolute;
       inset: 0;
@@ -858,6 +923,11 @@ export const cardStyles = css`
     .rrow .ract:hover { color: var(--hp-txt); }
     .rrow .ract.del:hover { color: #ff7a5c; }
 
+    .gsrow .gsl {
+      min-width: 150px;
+      font-size: 12.5px;
+      color: var(--hp-muted);
+    }
     .dialogwrap {
       background: rgba(0, 0, 0, 0.45);
       display: flex;

src/types.ts

@@ -38,7 +38,7 @@ export interface Marker {
   description?: string | null;
   pdfs?: PdfRef[];
   tap_action?: string | null; // per-device override: 'info' | 'more-info' | 'toggle'
-  display?: 'badge' | 'ripple' | 'icon_ripple' | null; // how the device is drawn
+  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)
   size?: number | null;        // icon size multiplier (default 1)

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,
+  mergeRooms, splitRoom, polygonArea, closestPointOnBoundary, isActiveState, snapToWall, openingAmount, fillColorsOf, lerpColor, roomFillStyle, stateIcon,
 } from '../test-build/logic.js';
 import {
   iconFor, compileIconRules, isValidPattern, iconFromDeviceClasses,
@@ -432,3 +432,67 @@ test('openingAmount: doors default open, windows closed; outages freeze the defa
   assert.equal(openingAmount('door', 'off', true), 1);
   assert.equal(openingAmount('door', 'unavailable', true), 1);
 });
+
+test('snapToWall: the angle is normalized to [-90, 90) so opposite edge directions cannot flip a dragged opening', () => {
+  // the same wall as seen from two neighbouring rooms (opposite winding)
+  const a = [{ poly: [[0, 0], [10, 0], [10, 10], [0, 10]] }];
+  const b = [{ poly: [[10, 0], [0, 0], [0, 10], [10, 10]] }]; // reversed
+  const sa = snapToWall([5, 0.4], a, 1);
+  const sb = snapToWall([5, 0.4], b, 1);
+  assert.equal(sa.angle, sb.angle);
+  assert.ok(sa.angle >= -90 && sa.angle < 90);
+  const v = snapToWall([10.3, 5], a, 1); // vertical wall
+  assert.ok(v.angle >= -90 && v.angle < 90);
+});
+
+test('fillColorsOf: defaults, merge, malformed entries dropped', () => {
+  const d = fillColorsOf({});
+  assert.equal(d.light_on.c, '#ffd45c');
+  const o = fillColorsOf({ fill_colors: { light_on: { c: '#ff0000', a: 0.5 }, temp_hot: { c: 'javascript:x', a: 9 } } });
+  assert.equal(o.light_on.c, '#ff0000');
+  assert.equal(o.light_on.a, 0.5);
+  assert.equal(o.temp_hot.c, '#ffd45c'); // malformed hex → default
+  assert.equal(o.temp_hot.a, 1);         // clamped
+});
+
+test('lerpColor: endpoints and midpoint', () => {
+  assert.equal(lerpColor('#000000', '#ffffff', 0), '#000000');
+  assert.equal(lerpColor('#000000', '#ffffff', 1), '#ffffff');
+  assert.equal(lerpColor('#000000', '#ffffff', 0.5), '#808080');
+  assert.equal(lerpColor('#000000', '#ffffff', -5), '#000000'); // clamped
+});
+
+test('roomFillStyle: palette-driven fills, lqi gradient between custom endpoints', () => {
+  const colors = fillColorsOf({ fill_colors: { lqi_low: { c: '#000000', a: 0.1 }, lqi_high: { c: '#ffffff', a: 0.3 } } });
+  assert.equal(roomFillStyle('lqi', 110, 'none', null, 20, 25, colors).c, '#808080'); // mid of 40..180
+  assert.equal(roomFillStyle('lqi', null, 'none', null, 20, 25, colors), null);
+  assert.deepEqual(roomFillStyle('light', null, 'on', null, 20, 25, colors), colors.light_on);
+  assert.deepEqual(roomFillStyle('temp', 18, 'none', 18, 20, 25, colors), colors.temp_cold);
+  assert.equal(roomFillStyle('none', 100, 'on', 22, 20, 25, colors), null);
+});
+
+test('spaceDisplayOf: show_lqi tri-state (null = follow the card option)', () => {
+  assert.equal(spaceDisplayOf({}).showLqi, null);
+  assert.equal(spaceDisplayOf({ settings: { show_lqi: false } }).showLqi, false);
+  assert.equal(spaceDisplayOf({ settings: { show_lqi: true } }).showLqi, true);
+});
+
+test('roomFillStyle light_none: alpha 0 keeps no-fill; a custom color fills lightless rooms', () => {
+  const def = fillColorsOf({});
+  assert.equal(roomFillStyle('light', null, 'none', null, 20, 25, def), null); // default: unchanged
+  const c = fillColorsOf({ fill_colors: { light_none: { c: '#123456', a: 0.2 } } });
+  assert.deepEqual(roomFillStyle('light', null, 'none', null, 20, 25, c), { c: '#123456', a: 0.2 });
+});
+
+test('stateIcon: doors/locks/bulbs reflect state; custom icons and outages never morph', () => {
+  assert.equal(stateIcon('mdi:door', 'binary_sensor', 'door', 'on', false), 'mdi:door-open');
+  assert.equal(stateIcon('mdi:door', 'binary_sensor', 'door', 'off', false), 'mdi:door-closed');
+  assert.equal(stateIcon('mdi:window-closed', 'binary_sensor', 'window', 'on', false), 'mdi:window-open');
+  assert.equal(stateIcon('mdi:garage-variant', 'binary_sensor', 'garage_door', 'on', false), 'mdi:garage-open-variant');
+  assert.equal(stateIcon('mdi:lock', 'lock', undefined, 'unlocked', false), 'mdi:lock-open-variant');
+  assert.equal(stateIcon('mdi:lightbulb', 'light', undefined, 'on', false), 'mdi:lightbulb-on');
+  assert.equal(stateIcon('mdi:lightbulb', 'light', undefined, 'off', false), 'mdi:lightbulb');
+  assert.equal(stateIcon('mdi:door', 'binary_sensor', 'door', 'unavailable', false), 'mdi:door');
+  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
+});