Initial scaffold: Lit v3 house card with grid editor and runtime display

Phase 1 (grid editor) and Phase 2 (entity binding + runtime) complete.
Phase 3 TODOs tracked in CLAUDE.md.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: squizzer73

.github/workflows/release.yml

@@ -0,0 +1,30 @@
+name: Release
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  build-and-release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Upload release asset
+        uses: softprops/action-gh-release@v1
+        with:
+          files: dist/house-card.js
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+mnt/
+.DS_Store

CLAUDE.md

@@ -0,0 +1,84 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Commands
+
+```bash
+npm install          # install dependencies
+npm run build        # production build → dist/house-card.js
+npm run dev          # watch mode (rebuilds on save)
+npm run lint         # lint src/**/*.js with eslint
+```
+
+After building, copy `dist/house-card.js` to `/config/www/house-card.js` on the Home Assistant instance.
+
+## Architecture
+
+This is a HACS-compatible Lovelace custom card for Home Assistant, built with **Lit 3** and bundled by **Rollup**.
+
+### Source files (`src/`)
+
+- **`src/house-card.js`** — Main display card (`house-card` custom element). Extends `LitElement`. Receives `hass` (HA state object) and `_config` as properties. Renders a grid-based floorplan using percentage-positioned `div` elements; no canvas or SVG. Reads entity states via `this._hass.states[entityId]`. Registers itself in `window.customCards` for HA discovery.
+
+- **`src/house-card-editor.js`** — Visual config editor (`house-card-editor` custom element). Returned by `HouseCard.getConfigElement()`. Manages a three-state internal UI (`floors` → `grid` → `room`) with mouse-drag room painting. Fires `config-changed` custom events (bubbling, composed) to communicate config updates back to HA.
+
+### Build output
+
+Rollup bundles both source files plus the Lit library into a single **`dist/house-card.js`** ES module. The root-level `house-card.js` is also a fully bundled artifact (minified).
+
+### Config schema
+
+```
+{
+  type: 'custom:house-card',
+  title: string,
+  floors: [{ id, name, cols, rows, rooms: [{ id, name, col, row, width, height, color, entities: { light?, occupancy?, temperature? } }] }]
+}
+```
+
+Rooms use percentage-based positioning derived from `col/cols` and `row/rows`. The grid canvas uses `padding-bottom: (rows/cols * 100)%` to maintain aspect ratio, so the card scales automatically to any card width with no configuration.
+
+### HA integration points
+
+- `set hass(value)` — called by HA on every state change; triggers re-render
+- `setConfig(config)` — called by HA when card config changes
+- `static getConfigElement()` — returns editor element
+- `static getStubConfig()` — returns a valid starting config with one empty ground floor (shown in card picker)
+- Entity states checked: `light.*` (on/off), `binary_sensor.*` (on/off for occupancy), `sensor.*` (numeric state + `unit_of_measurement` attribute for temperature)
+
+### Key implementation patterns
+
+**Config-changed pattern:** The editor fires `config-changed` on every mutation (add/delete floor, add/delete room, update entity). The config object is always deep-cloned before mutation to avoid reference issues. This is the standard HA editor contract — HA catches the event and updates dashboard YAML in real time.
+
+**Overlap detection:** On drag complete, the new rectangle is checked against all existing rooms using AABB intersection before prompting for a name. Overlapping drags are silently discarded.
+
+**Room colour assignment:** Auto-assigned from an 8-colour palette (`ROOM_COLORS` array in `house-card-editor.js`) using modulo on current room count. Stored in the room config object; used for editor overlays.
+
+**HACS release:** `.github/workflows/release.yml` auto-builds and attaches `dist/house-card.js` to any published GitHub release. HACS downloads this single file.
+
+## Build status & roadmap
+
+**Phase 1 (grid editor) — complete.** Floor tabs, grid size picker, click-drag room drawing, overlap detection, room colour assignment, delete rooms.
+
+**Phase 2 (entity binding + runtime display) — complete.** Per-room entity binding in editor; runtime light/occupancy/temperature state display.
+
+**Phase 3 — TODO:**
+
+| Task | Notes |
+|------|-------|
+| `ha-entity-picker` swap | Replace the three text inputs in the ROOM editor state with `ha-entity-picker`. Import from `../../components/ha-entity-picker.js` — check HA version for correct import path. |
+| Touch/pointer events | Grid painter uses `mousedown/mousemove/mouseup`. Add `pointerdown/pointermove/pointerup` equivalents for tablet/touchscreen. |
+| Room rename | Add name input to the ROOM editor state — currently the name is fixed at creation time. |
+| Side-by-side wallboard layout | Currently always shows tabs; add a mode where floors render side-by-side for large displays. |
+| Light group support | Currently expects a single light entity; extend to handle `group` on/off aggregate. |
+
+## Environment
+
+HA instance runs on an M2 Mac Mini via Docker. After building, symlink or copy `dist/house-card.js` to `/config/www/house-card.js`, then add the resource in HA:
+
+```yaml
+resources:
+  - url: /local/house-card.js
+    type: module
+```

README.md

@@ -0,0 +1,91 @@
+# House Card
+
+A visual house floorplan card for Home Assistant. Build a stylised representation of your home using a grid-based room editor, then display entity states — lights, occupancy, temperature — directly on the floorplan.
+
+## Features
+
+- **Grid-based room editor** — draw rectangular rooms on a configurable grid per floor
+- **Multi-floor support** — tab-based floor switching on mobile, side-by-side on wallboard
+- **Light state** — rooms glow when lights are on
+- **Occupancy indicator** — green dot when a motion/occupancy sensor is triggered
+- **Temperature overlay** — displays current temperature sensor value in the room
+- **Scales to card size** — works on mobile dashboards and large wallboard displays
+- **HACS compatible**
+
+## Installation via HACS
+
+1. Open HACS → Frontend
+2. Click the three-dot menu → Custom repositories
+3. Add `squizzer73/lovelace-house-card` with category `Lovelace`
+4. Install and reload
+
+## Manual Installation
+
+Copy `dist/house-card.js` to your `/config/www/` directory, then add to your Lovelace resources:
+
+```yaml
+resources:
+  - url: /local/house-card.js
+    type: module
+```
+
+## Configuration
+
+Add via the Lovelace UI editor (recommended) or manually:
+
+```yaml
+type: custom:house-card
+title: My House
+floors:
+  - id: ground
+    name: Ground Floor
+    cols: 8
+    rows: 6
+    rooms:
+      - id: lounge
+        name: Lounge
+        col: 0
+        row: 0
+        width: 3
+        height: 2
+        color: '#4a90d9'
+        entities:
+          light: light.lounge
+          occupancy: binary_sensor.lounge_motion
+          temperature: sensor.lounge_temperature
+      - id: kitchen
+        name: Kitchen
+        col: 3
+        row: 0
+        width: 2
+        height: 2
+        color: '#50c878'
+        entities:
+          light: light.kitchen
+          occupancy: binary_sensor.kitchen_motion
+```
+
+## Room Configuration
+
+| Key | Required | Description |
+|-----|----------|-------------|
+| `id` | Yes | Unique identifier |
+| `name` | Yes | Display name |
+| `col` | Yes | Starting column (0-indexed) |
+| `row` | Yes | Starting row (0-indexed) |
+| `width` | Yes | Width in grid cells |
+| `height` | Yes | Height in grid cells |
+| `color` | No | Room accent colour (hex) |
+| `entities.light` | No | Light entity ID |
+| `entities.occupancy` | No | Binary sensor for occupancy |
+| `entities.temperature` | No | Temperature sensor entity ID |
+
+## Development
+
+```bash
+npm install
+npm run dev    # watch mode
+npm run build  # production build
+```
+
+Output is `dist/house-card.js` — copy to `/config/www/house-card.js`.

hacs.json

@@ -0,0 +1,8 @@
+{
+  "name": "House Card",
+  "description": "A visual house floorplan card for Home Assistant with grid-based room layout and entity state display.",
+  "render_readme": true,
+  "domains": [],
+  "iot_class": "local_polling",
+  "homeassistant": "2024.1.0"
+}

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "lovelace-house-card",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "Visual house floorplan card for Home Assistant",
+  "main": "dist/house-card.js",
+  "scripts": {
+    "build": "rollup -c rollup.config.js",
+    "dev": "rollup -c rollup.config.js --watch",
+    "lint": "eslint src/**/*.js"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-terser": "^0.4.0",
+    "rollup": "^4.0.0"
+  },
+  "dependencies": {
+    "lit": "^3.0.0"
+  }
+}

rollup.config.js

@@ -0,0 +1,15 @@
+import resolve from '@rollup/plugin-node-resolve';
+import terser from '@rollup/plugin-terser';
+
+export default {
+  input: 'src/house-card.js',
+  output: {
+    file: 'dist/house-card.js',
+    format: 'es',
+    sourcemap: false,
+  },
+  plugins: [
+    resolve(),
+    terser(),
+  ],
+};