feat v1.14.0: per-space display settings, hand-drawn spaces, manual-testing checklist

- space dialog 'Display' section: room borders/names toggles, color+opacity, fill by zigbee signal or lights (tri-state: on/off/no-lights) - draggable room name labels persisted as layout rl_<roomId> - 'no image, outline by hand' space source with canvas orientation; image optional now; switching an existing space to draw detaches its plan - demo/ synthetic-home harness lives in the repo (serve.mjs + smokes + icons gen) - docs/TESTING.md checklist (same-commit update policy); self-run found and fixed: plan_url not detached on image->draw, _stateClass crash on states without entity_id; perf measured (162 devices ~14ms build) - backend: SPACE_DISPLAY_SCHEMA validation (+test)
2026-07-31 16:38:31 +00:00 · 2026-07-07 13:41:51 +03:00
parent 6c8b509da2
commit 4f8e98cdc7
29 changed files with 2762 additions and 249 deletions
@@ -0,0 +1,17 @@
+# Synthetic demo home
+
+A fully fictional house (plans, devices, states) used for README screenshots,
+the demo GIF and headless smoke tests — so no real home data ever appears in
+public materials.
+
+- `srv/demo.html` — self-contained host page: `<ha-icon>`/`<ha-card>` stubs and a
+  fake `hass` (registries, states, `callWS`, `callService`, floors).
+- `srv/assets/` — generated plan SVGs and `icons.js` (`node demo/gen_icons.mjs`,
+  needs the repo's devDependencies). The card bundle is copied from `dist/`:
+  `cp dist/houseplan-card.js demo/srv/assets/`.
+- `serve.mjs` — playwright launcher (route interception, no web server).
+- `smoke_*.mjs` — feature smoke tests; run with a Chromium installed via
+  `PLAYWRIGHT_BROWSERS_PATH=<dir> npx playwright install chromium-headless-shell`.
+
+Note for sandboxed sessions: `/tmp` does not survive; this directory is the
+persistent home of the harness (docs/DEVELOPMENT.md has the LD_LIBRARY_PATH recipe).
@@ -0,0 +1,22 @@
+// Generate demo/srv/assets/icons.js: an { "mdi:name": "<svg path>" } map for every
+// mdi: icon referenced in src/ and demo/ (the demo host stubs <ha-icon> with it).
+import { readFileSync, writeFileSync, readdirSync } from 'node:fs';
+import * as mdi from '@mdi/js';
+
+const names = new Set();
+const scan = (dir) => {
+  for (const f of readdirSync(dir, { withFileTypes: true })) {
+    if (f.isDirectory()) { scan(`${dir}/${f.name}`); continue; }
+    if (!/\.(ts|json|html|mjs)$/.test(f.name) || f.name === 'icons.js') continue;
+    const txt = readFileSync(`${dir}/${f.name}`, 'utf8');
+    for (const m of txt.matchAll(/mdi:([a-z0-9-]+)/g)) names.add(m[1]);
+  }
+};
+scan('src'); scan('demo');
+const map = {};
+for (const n of [...names].sort()) {
+  const camel = 'mdi' + n.replace(/(^|-)(\w)/g, (_, __, c) => c.toUpperCase());
+  if (mdi[camel]) map['mdi:' + n] = mdi[camel];
+}
+writeFileSync('demo/srv/assets/icons.js', 'window.__ICONS=' + JSON.stringify(map) + ';\n');
+console.log('icons:', Object.keys(map).length, 'of', names.size, 'referenced');
@@ -0,0 +1,28 @@
+// Shared launcher for demo captures: starts headless Chromium serving demo/srv/
+// via request interception (no HTTP server needed). Usage: const {page,browser}=await launch();
+import { chromium } from 'playwright';
+import { readFileSync, existsSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
+const ROOT = dirname(fileURLToPath(import.meta.url)) + '/srv';
+const CT = { '.html': 'text/html', '.js': 'text/javascript', '.svg': 'image/svg+xml' };
+export async function launch(viewport = { width: 820, height: 760 }, scale = 1) {
+  const browser = await chromium.launch({ args: ['--no-sandbox'] });
+  const page = await (await browser.newContext({ viewport, deviceScaleFactor: scale })).newPage();
+  page.on('pageerror', (e) => console.log('EXC', e.message));
+  await page.route('**/*', (r) => {
+    const u = new URL(r.request().url());
+    let p = decodeURIComponent(u.pathname);
+    if (p === '/') p = '/demo.html';
+    const f = ROOT + p;
+    existsSync(f)
+      ? r.fulfill({ status: 200, headers: { 'content-type': CT[p.slice(p.lastIndexOf('.'))] || 'application/octet-stream' }, body: readFileSync(f) })
+      : r.fulfill({ status: 404, body: 'nf' });
+  });
+  await page.goto('http://demo.local/demo.html', { waitUntil: 'domcontentloaded' });
+  await page.waitForFunction(() => window.__card?._model?.length > 0, { timeout: 9000 });
+  // hass flows continuously in production; the stub sets it once — nudge a rebuild
+  await page.evaluate(() => { const c = window.__card; c.hass = { ...c.hass }; });
+  await page.waitForFunction(() => window.__card._devices.length > 0, { timeout: 9000 });
+  return { page, browser };
+}
@@ -0,0 +1,74 @@
+import { launch } from './serve.mjs';
+const { page, browser } = await launch();
+const res = await page.evaluate(async () => {
+  const out = {};
+  const mk = () => document.createElement('houseplan-card');
+  const sr = (c) => c.shadowRoot || c.renderRoot;
+
+  // 1) пустая инсталляция: ноль устройств/зон, конфиг с пространством без комнат
+  const c1 = mk();
+  c1.setConfig({ type: 'custom:houseplan-card' });
+  document.body.appendChild(c1);
+  c1.hass = { language:'en', locale:{language:'en'}, devices:{}, entities:{}, areas:{}, states:{},
+    callWS: async (m) => m.type==='houseplan/config/get'
+      ? { config:{ spaces:[{ id:'s1', title:'Empty', plan_url:null, aspect:1.4, view_box:[0,0,1,1], rooms:[], segments:[] }], markers:[], settings:{} }, rev:1 }
+      : { layout:{} },
+    connection:{ subscribeEvents: async()=>()=>{} } };
+  await new Promise(r=>setTimeout(r,150));
+  c1.hass = { ...c1.hass };
+  await c1.updateComplete; await new Promise(r=>setTimeout(r,50)); await c1.updateComplete;
+  out.emptyDevices = c1._devices.length;
+  out.emptyRenders = !!sr(c1).querySelector('.stage');
+  out.emptyCount = sr(c1).querySelector('.count')?.textContent.trim();
+  c1.remove();
+
+  // 2) XSS в именах комнат и устройств
+  const c2 = mk();
+  c2.setConfig({ type: 'custom:houseplan-card' });
+  document.body.appendChild(c2);
+  const evil = '<img src=x onerror=window.__pwned=1><b>bold</b>';
+  c2.hass = { language:'en', locale:{language:'en'},
+    devices:{ d1:{ id:'d1', name: evil, model:'M<script>1</script>', area_id:'a1', identifiers:[['x','1']] } },
+    entities:{}, areas:{ a1:{ area_id:'a1', name:'A1' } }, states:{},
+    callWS: async (m) => m.type==='houseplan/config/get'
+      ? { config:{ spaces:[{ id:'s1', title:'S', plan_url:null, aspect:1, view_box:[0,0,1,1],
+          rooms:[{ id:'r1', name: evil, area:'a1', poly:[[0.1,0.1],[0.9,0.1],[0.9,0.9],[0.1,0.9]] }], segments:[] }], markers:[], settings:{} }, rev:1 }
+      : { layout:{} },
+    connection:{ subscribeEvents: async()=>()=>{} } };
+  await new Promise(r=>setTimeout(r,150));
+  c2.hass = { ...c2.hass };
+  await c2.updateComplete; await new Promise(r=>setTimeout(r,50)); await c2.updateComplete;
+  out.xssPwned = !!window.__pwned;
+  const lbl = sr(c2).querySelector('.roomlabel');
+  out.xssLabelIsText = lbl ? lbl.innerHTML.includes('&lt;img') || lbl.textContent.includes('<img') : 'no label';
+  out.xssDeviceRendered = sr(c2).querySelectorAll('.dev').length;
+  c2.remove();
+
+  // 3) легаси-записи layout v1 {x,y} без ключа s — игнорируются в norm-режиме
+  const c = window.__card;
+  c._layout = { ...c._layout, d_light1_legacy_test: { x: 500, y: 300 } };
+  const fake = { id: 'd_light1_legacy_test', space: 'f1' };
+  const p = c._pos(fake);
+  out.legacyIgnored = p.y !== 300; // centre y=400 if ignored; raw 300 would mean it leaked through
+  delete c._layout.d_light1_legacy_test;
+
+  // 4) перф: 150 устройств
+  const t0 = performance.now();
+  const devices = {}; const entities = {}; const states = {};
+  for (let i = 0; i < 150; i++) {
+    devices['p'+i] = { id:'p'+i, name:'Plug '+i, model:'Smart Plug', area_id:'living_room', identifiers:[['demo','p'+i]] };
+    entities['switch.p'+i] = { entity_id:'switch.p'+i, device_id:'p'+i, platform:'demo' };
+    states['switch.p'+i] = { state: i%2?'on':'off', attributes:{ linkquality: 50+i } };
+  }
+  const bigHass = { ...window.__mkHass(), devices:{...window.__mkHass().devices, ...devices},
+    entities:{...window.__mkHass().entities, ...entities}, states:{...window.__mkHass().states, ...states} };
+  c.hass = bigHass; c._regSignature=''; c._maybeRebuildDevices();
+  out.bigBuildMs = Math.round(performance.now() - t0);
+  out.bigCount = c._devices.length;
+  await c.updateComplete;
+  const t1 = performance.now(); c.requestUpdate(); await c.updateComplete;
+  out.bigRenderMs = Math.round(performance.now() - t1);
+  return out;
+});
+console.log(JSON.stringify(res, null, 1));
+await browser.close();
@@ -0,0 +1,50 @@
+import { launch } from './serve.mjs';
+const { page, browser } = await launch();
+const res = await page.evaluate(async () => {
+  const out = {};
+  const c = window.__card;
+  const sr = () => c.shadowRoot || c.renderRoot;
+  // 1) дефолт (план есть): границ и лейблов нет
+  out.defaultStyled = sr().querySelectorAll('.room.styled').length;
+  out.defaultLabels = sr().querySelectorAll('.roomlabel').length;
+  // 2) включаем границы+имена+заливку по свету
+  c._serverCfg = { ...c._serverCfg, spaces: c._serverCfg.spaces.map((s) => s.id !== 'f1' ? s : {
+    ...s, settings: { show_borders: true, show_names: true, room_color: '#ff8800', room_opacity: 0.8, fill_mode: 'light' },
+  })};
+  c.requestUpdate(); await c.updateComplete;
+  out.styled = sr().querySelectorAll('.room.styled').length;
+  out.labels = [...sr().querySelectorAll('.roomlabel')].map((l) => l.textContent.trim());
+  const liv = [...sr().querySelectorAll('.room.styled')][0];
+  out.livingStyle = liv.getAttribute('style');
+  // living: ceiling on → жёлтая; kitchen: нет light-сущностей → без заливки; bedroom light off → серая
+  const styles = [...sr().querySelectorAll('.room.styled')].map((r) => r.getAttribute('style'));
+  out.hasYellow = styles.some((s) => s.includes('#ffd45c'));
+  out.hasGrey = styles.some((s) => s.includes('#9aa0a6'));
+  out.kitchenNoFill = styles.some((s) => s.includes('--room-fill:transparent'));
+  // 3) lqi-заливка
+  c._serverCfg = { ...c._serverCfg, spaces: c._serverCfg.spaces.map((s) => s.id !== 'f1' ? s : {
+    ...s, settings: { ...s.settings, fill_mode: 'lqi' },
+  })};
+  c.requestUpdate(); await c.updateComplete;
+  out.lqiFills = [...sr().querySelectorAll('.room.styled')].filter((r) => (r.getAttribute('style') || '').includes('hsl(')).length;
+  // 4) drag лейбла → layout rl_
+  const lbl = sr().querySelector('.roomlabel');
+  c._labelDown({ preventDefault(){}, stopPropagation(){}, clientX: 100, clientY: 100, target: { setPointerCapture(){} }, pointerId: 5 },
+    c._spaceModel().rooms[0], 'f1');
+  c._labelMove({ clientX: 160, clientY: 140 }, c._spaceModel().rooms[0], 'f1');
+  c._labelUp(c._spaceModel().rooms[0]);
+  out.labelSaved = !!c._layout['rl_r1'];
+  // 5) диалог: create + draw
+  c._openSpaceDialog('create'); await c.updateComplete;
+  c._spaceDialog = { ...c._spaceDialog, title: 'Attic', source: 'draw', orientation: 'square' };
+  await c.updateComplete;
+  out.saveEnabled = !sr().querySelector('.dialog .btn.on[disabled]');
+  await c._saveSpaceDialog(); await c.updateComplete;
+  const attic = c._serverCfg.spaces.find((s) => s.title === 'Attic');
+  out.atticAspect = attic?.aspect;
+  out.atticSettings = attic?.settings;
+  out.atticNoPlan = attic ? attic.plan_url === null : null;
+  return out;
+});
+console.log(JSON.stringify(res, null, 1));
+await browser.close();
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 800">
+<rect width="1000" height="800" fill="#f4f1ea"/>
+<g opacity="0.35" stroke="#d9d2c4" stroke-width="1"><line x1="0" y1="0" x2="0" y2="800"/><line x1="50" y1="0" x2="50" y2="800"/><line x1="100" y1="0" x2="100" y2="800"/><line x1="150" y1="0" x2="150" y2="800"/><line x1="200" y1="0" x2="200" y2="800"/><line x1="250" y1="0" x2="250" y2="800"/><line x1="300" y1="0" x2="300" y2="800"/><line x1="350" y1="0" x2="350" y2="800"/><line x1="400" y1="0" x2="400" y2="800"/><line x1="450" y1="0" x2="450" y2="800"/><line x1="500" y1="0" x2="500" y2="800"/><line x1="550" y1="0" x2="550" y2="800"/><line x1="600" y1="0" x2="600" y2="800"/><line x1="650" y1="0" x2="650" y2="800"/><line x1="700" y1="0" x2="700" y2="800"/><line x1="750" y1="0" x2="750" y2="800"/><line x1="800" y1="0" x2="800" y2="800"/><line x1="850" y1="0" x2="850" y2="800"/><line x1="900" y1="0" x2="900" y2="800"/><line x1="950" y1="0" x2="950" y2="800"/><line x1="0" y1="0" x2="1000" y2="0"/><line x1="0" y1="50" x2="1000" y2="50"/><line x1="0" y1="100" x2="1000" y2="100"/><line x1="0" y1="150" x2="1000" y2="150"/><line x1="0" y1="200" x2="1000" y2="200"/><line x1="0" y1="250" x2="1000" y2="250"/><line x1="0" y1="300" x2="1000" y2="300"/><line x1="0" y1="350" x2="1000" y2="350"/><line x1="0" y1="400" x2="1000" y2="400"/><line x1="0" y1="450" x2="1000" y2="450"/><line x1="0" y1="500" x2="1000" y2="500"/><line x1="0" y1="550" x2="1000" y2="550"/><line x1="0" y1="600" x2="1000" y2="600"/><line x1="0" y1="650" x2="1000" y2="650"/><line x1="0" y1="700" x2="1000" y2="700"/><line x1="0" y1="750" x2="1000" y2="750"/></g>
+<rect x="40" y="40" width="920" height="720" fill="none" stroke="#3b4753" stroke-width="14"/>
+<line x1="550" y1="40" x2="550" y2="300" stroke="#3b4753" stroke-width="10"/>
+<line x1="550" y1="380" x2="550" y2="620" stroke="#3b4753" stroke-width="10"/>
+<line x1="550" y1="700" x2="550" y2="760" stroke="#3b4753" stroke-width="10"/>
+<line x1="550" y1="360" x2="820" y2="360" stroke="#3b4753" stroke-width="10"/>
+<line x1="900" y1="360" x2="960" y2="360" stroke="#3b4753" stroke-width="10"/>
+<line x1="40" y1="480" x2="300" y2="480" stroke="#3b4753" stroke-width="10"/>
+<line x1="380" y1="480" x2="550" y2="480" stroke="#3b4753" stroke-width="10"/>
+<rect x="120" y="46" width="180" height="10" fill="#a8c6e8"/>
+<rect x="640" y="46" width="140" height="10" fill="#a8c6e8"/>
+<rect x="700" y="744" width="140" height="10" fill="#a8c6e8"/>
+<text x="295" y="270" font-family="Arial" font-size="30" letter-spacing="4" fill="#8b95a1" text-anchor="middle" opacity="0.55">LIVING ROOM</text>
+<text x="775" y="200" font-family="Arial" font-size="30" letter-spacing="4" fill="#8b95a1" text-anchor="middle" opacity="0.55">KITCHEN</text>
+<text x="775" y="560" font-family="Arial" font-size="30" letter-spacing="4" fill="#8b95a1" text-anchor="middle" opacity="0.55">BEDROOM</text>
+<text x="295" y="640" font-family="Arial" font-size="30" letter-spacing="4" fill="#8b95a1" text-anchor="middle" opacity="0.55">HALLWAY</text>
+</svg>
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 700">
+<rect width="1000" height="700" fill="#eef3e6"/>
+<rect x="30" y="30" width="940" height="640" fill="none" stroke="#7c9c6b" stroke-width="10" stroke-dasharray="24 14"/>
+<circle cx="260" cy="240" r="90" fill="#dbe8cd" stroke="#9dba8a" stroke-width="4"/>
+<circle cx="700" cy="450" r="130" fill="#d3e4f2" stroke="#8fb6d8" stroke-width="4"/>
+<rect x="600" y="80" width="260" height="150" fill="#e7ddc8" stroke="#b8a888" stroke-width="5"/>
+<text x="730" y="165" font-family="Arial" font-size="26" letter-spacing="3" fill="#8b95a1" text-anchor="middle" opacity="0.6">GARAGE</text>
+<text x="260" y="248" font-family="Arial" font-size="22" letter-spacing="3" fill="#7d9169" text-anchor="middle" opacity="0.7">LAWN</text>
+<text x="700" y="458" font-family="Arial" font-size="22" letter-spacing="3" fill="#6f93ad" text-anchor="middle" opacity="0.7">POOL</text>
+</svg>
@@ -0,0 +1,144 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>House Plan demo</title>
+<style>
+  :root{
+    --primary-color:#3ea6ff; --primary-text-color:#e1e1e1; --secondary-text-color:#9aa4ad;
+    --card-background-color:#1c2530; --ha-card-background:#1c2530;
+    --divider-color:#33404d; --text-primary-color:#fff; --mdc-icon-size:24px;
+    --header-height:0px;
+  }
+  html,body{margin:0;background:#0e1621;color:#e1e1e1;font-family:'Segoe UI',Roboto,Arial,sans-serif;}
+  #host{width:780px;margin:0 auto;padding:8px;}
+</style>
+</head>
+<body>
+<div id="host"></div>
+<script src="/assets/icons.js"></script>
+<script>
+class HaIcon extends HTMLElement{
+  static get observedAttributes(){return ['icon'];}
+  connectedCallback(){this._r();}
+  attributeChangedCallback(){this._r();}
+  set icon(v){this.setAttribute('icon',v);}
+  get icon(){return this.getAttribute('icon');}
+  _r(){
+    const p=(window.__ICONS||{})[this.getAttribute('icon')]||'';
+    if(!this.shadowRoot) this.attachShadow({mode:'open'});
+    this.shadowRoot.innerHTML='<style>:host{display:inline-flex;align-items:center;justify-content:center;'+
+      'width:var(--mdc-icon-size,24px);height:var(--mdc-icon-size,24px);vertical-align:middle}'+
+      'svg{width:100%;height:100%;fill:currentColor;display:block}</style>'+
+      '<svg viewBox="0 0 24 24"><path d="'+p+'"></path></svg>';
+  }
+}
+customElements.define('ha-icon',HaIcon);
+class HaCard extends HTMLElement{
+  connectedCallback(){
+    if(this.shadowRoot)return;
+    this.attachShadow({mode:'open'});
+    this.shadowRoot.innerHTML='<style>:host{display:block;background:var(--ha-card-background,#1c2530);'+
+      'border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.4);overflow:visible;color:var(--primary-text-color)}</style><slot></slot>';
+  }
+}
+customElements.define('ha-card',HaCard);
+</script>
+<script type="module">
+const CFG = {
+  spaces: [
+    { id:'f1', title:'Ground floor', plan_url:'/assets/f1.svg', aspect:1.25,
+      view_box:[0,0,1,1],
+      rooms:[
+        {id:'r1', name:'Living room', area:'living_room', poly:[[0.04,0.05],[0.55,0.05],[0.55,0.6],[0.04,0.6]]},
+        {id:'r2', name:'Kitchen', area:'kitchen', poly:[[0.55,0.05],[0.96,0.05],[0.96,0.45],[0.55,0.45]]},
+        {id:'r3', name:'Bedroom', area:'bedroom', poly:[[0.55,0.45],[0.96,0.45],[0.96,0.95],[0.55,0.95]]},
+        {id:'r4', name:'Hallway', area:'hallway', poly:[[0.04,0.6],[0.55,0.6],[0.55,0.95],[0.04,0.95]]}
+      ], segments:[] },
+    { id:'garden', title:'Garden', plan_url:'/assets/garden.svg', aspect:1.4286,
+      view_box:[0,0,1,1],
+      rooms:[ {id:'g1', name:'Garden', area:'garden', poly:[[0.03,0.04],[0.97,0.04],[0.97,0.96],[0.03,0.96]]} ], segments:[] }
+  ],
+  markers: [],
+  settings: {}
+};
+const LAYOUT = {
+  d_light1:{s:'f1',x:0.22,y:0.22}, d_lamp:{s:'f1',x:0.42,y:0.5}, d_tv:{s:'f1',x:0.13,y:0.5},
+  d_temp:{s:'f1',x:0.33,y:0.35}, d_kettle:{s:'f1',x:0.72,y:0.15}, d_leak:{s:'f1',x:0.88,y:0.34},
+  d_bedlight:{s:'f1',x:0.75,y:0.6}, d_window:{s:'f1',x:0.9,y:0.85}, d_lock:{s:'f1',x:0.1,y:0.88},
+  d_motion:{s:'f1',x:0.4,y:0.75}, d_mower:{s:'garden',x:0.25,y:0.35}, d_gate:{s:'garden',x:0.73,y:0.22}
+};
+const AREAS={living_room:{area_id:'living_room',name:'Living room'},kitchen:{area_id:'kitchen',name:'Kitchen'},
+  bedroom:{area_id:'bedroom',name:'Bedroom'},hallway:{area_id:'hallway',name:'Hallway'},garden:{area_id:'garden',name:'Garden'}};
+function dev(id,name,model,area){return [id,{id,name,model,area_id:area,identifiers:[['demo',id]],entry_type:null,via_device_id:null}];}
+const DEVICES=Object.fromEntries([
+  dev('d_light1','Ceiling light','Smart Bulb E27','living_room'),
+  dev('d_lamp','Floor lamp','Smart Bulb E14','living_room'),
+  dev('d_tv','TV','55U8HQ','living_room'),
+  dev('d_temp','Temperature sensor','TH01','living_room'),
+  dev('d_kettle','Kettle plug','Smart Plug','kitchen'),
+  dev('d_leak','Sink leak sensor','SJCGQ11LM','kitchen'),
+  dev('d_bedlight','Bedroom light','Smart Bulb E27','bedroom'),
+  dev('d_window','Window sensor','MCCGQ11LM','bedroom'),
+  dev('d_lock','Front door lock','Smart Lock S2','hallway'),
+  dev('d_motion','Motion sensor','RTCGQ11LM','hallway'),
+  dev('d_mower','Robot mower','Automower 305','garden'),
+  dev('d_gate','Gate','GDO-4','garden'),
+]);
+const ENTITIES={
+  'light.ceiling':{entity_id:'light.ceiling',device_id:'d_light1',platform:'demo'},
+  'light.floor_lamp':{entity_id:'light.floor_lamp',device_id:'d_lamp',platform:'demo'},
+  'media_player.tv':{entity_id:'media_player.tv',device_id:'d_tv',platform:'demo'},
+  'sensor.living_temp':{entity_id:'sensor.living_temp',device_id:'d_temp',platform:'demo'},
+  'switch.kettle':{entity_id:'switch.kettle',device_id:'d_kettle',platform:'demo'},
+  'binary_sensor.sink_leak':{entity_id:'binary_sensor.sink_leak',device_id:'d_leak',platform:'demo'},
+  'light.bedroom':{entity_id:'light.bedroom',device_id:'d_bedlight',platform:'demo'},
+  'binary_sensor.window':{entity_id:'binary_sensor.window',device_id:'d_window',platform:'demo'},
+  'lock.front_door':{entity_id:'lock.front_door',device_id:'d_lock',platform:'demo'},
+  'binary_sensor.hall_motion':{entity_id:'binary_sensor.hall_motion',device_id:'d_motion',platform:'demo'},
+  'vacuum.mower':{entity_id:'vacuum.mower',device_id:'d_mower',platform:'demo'},
+  'cover.gate':{entity_id:'cover.gate',device_id:'d_gate',platform:'demo'},
+};
+let STATES={
+  'light.ceiling':{entity_id:'light.ceiling',state:'on',attributes:{friendly_name:'Ceiling light'}},
+  'light.floor_lamp':{entity_id:'light.floor_lamp',state:'off',attributes:{friendly_name:'Floor lamp',linkquality:196}},
+  'media_player.tv':{entity_id:'media_player.tv',state:'playing',attributes:{friendly_name:'TV'}},
+  'sensor.living_temp':{entity_id:'sensor.living_temp',state:'22.4',attributes:{friendly_name:'Temperature',device_class:'temperature',unit_of_measurement:'°C',linkquality:154}},
+  'switch.kettle':{entity_id:'switch.kettle',state:'off',attributes:{friendly_name:'Kettle plug',linkquality:182}},
+  'binary_sensor.sink_leak':{entity_id:'binary_sensor.sink_leak',state:'off',attributes:{friendly_name:'Leak',device_class:'moisture',linkquality:117}},
+  'light.bedroom':{entity_id:'light.bedroom',state:'off',attributes:{friendly_name:'Bedroom light'}},
+  'binary_sensor.window':{entity_id:'binary_sensor.window',state:'on',attributes:{friendly_name:'Window',device_class:'window',linkquality:88}},
+  'lock.front_door':{entity_id:'lock.front_door',state:'locked',attributes:{friendly_name:'Front door',linkquality:143}},
+  'binary_sensor.hall_motion':{entity_id:'binary_sensor.hall_motion',state:'on',attributes:{friendly_name:'Motion',device_class:'motion',linkquality:64}},
+  'vacuum.mower':{entity_id:'vacuum.mower',state:'cleaning',attributes:{friendly_name:'Mower'}},
+  'cover.gate':{entity_id:'cover.gate',state:'closed',attributes:{friendly_name:'Gate'}},
+};
+function mkHass(){
+  return {
+    language:'en', locale:{language:'en'},
+    devices:DEVICES, entities:ENTITIES, areas:AREAS, states:STATES,
+    floors:{g:{floor_id:'g',name:'Ground floor',level:0},u:{floor_id:'u',name:'Upstairs',level:1}},
+    callWS:async (m)=>{
+      if(m.type==='houseplan/config/get')return{config:CFG,rev:1};
+      if(m.type==='houseplan/layout/get')return{layout:LAYOUT};
+      return {ok:true,rev:2};
+    },
+    callService:async (d,s,data)=>{
+      const eid=data.entity_id, st=STATES[eid];
+      if(st){const on=['on','playing','unlocked','open'].includes(st.state);
+        STATES={...STATES,[eid]:{...st,state:on?'off':'on'}};
+        card.hass=mkHass();}
+    },
+    connection:{subscribeEvents:async()=>()=>{}},
+    formatEntityState:(st)=>st.state,
+  };
+}
+await import('/assets/houseplan-card.js');
+const card=document.createElement('houseplan-card');
+card.setConfig({type:'custom:houseplan-card', title:'House Plan', icon_size:3.4});
+document.getElementById('host').appendChild(card);
+card.hass=mkHass();
+window.__card=card;
+window.__mkHass=mkHass;
+</script>
+</body></html>