Refactor code structure for improved readability and maintainability.…

.devcontainer/README.md

@@ -0,0 +1,120 @@
+# Home Assistant Custom Card - Dev Container Setup
+
+This directory contains the development container configuration for building and testing the boilerplate-card custom card for Home Assistant.
+
+## Setup Instructions
+
+1. **Install VS Code Remote Containers**
+   - [VS Code Extension: Remote - Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)
+
+2. **Open in Dev Container**
+   - Open the project folder in VS Code
+   - Press `Ctrl+Shift+P` (or `Cmd+Shift+P` on Mac)
+   - Type "Remote-Containers: Reopen in Container"
+   - Wait for the container to build (first time takes ~2-3 minutes)
+
+3. **Build the Card**
+   ```bash
+   yarn build      # Lint and build
+   yarn start      # Start dev server with hot reload (port 5000)
+   yarn lint       # Check code quality
+   yarn rollup     # Production build
+   ```
+
+4. **Access Services**
+   - **Dev Container**: Terminal in VS Code (automatic)
+   - **Home Assistant**: http://localhost:8123 (user: dev/pass: dev)
+   - **Rollup Dev Server**: http://localhost:5000
+
+5. **Configure Home Assistant to Use Your Card**
+   - In Home Assistant, go to Settings > Dashboards
+   - Create a new Dashboard
+   - Add the card from the GUI
+
+## File Structure
+
+```
+.devcontainer/
+├── devcontainer.json    # VS Code dev container config
+├── .gitignore          # Ignore HA data
+└── README.md           # This file
+```
+
+## Base Image
+
+This project uses the published image:
+
+- `ghcr.io/custom-cards/custom-card-devcontainer:latest`
+
+The image includes the `container` helper used by the devcontainer lifecycle commands.
+
+## Development Workflow
+
+### Building the Card
+
+```bash
+# One-time setup (automatic on container creation)
+yarn install
+
+# Development with hot reload
+yarn start              # Runs Rollup in watch mode on port 5000
+
+# Quality checks
+yarn lint             # ESLint check
+yarn build            # Full build pipeline (lint + rollup)
+
+# Production build
+yarn rollup           # Create optimized dist files
+```
+
+### File Locations
+
+- **Source Code**: `src/`
+- **Built Output**: `dist/` (inside container)
+- **Configuration**: Root directory (`tsconfig.json`, `rollup.config.js`, etc.)
+
+## Troubleshooting
+
+### Container Won't Start
+```bash
+# Rebuild the container
+ctrl+shift+p → "Remote: Rebuild Container"
+```
+
+### Port Already in Use
+```bash
+# Find what's using port 5000 or 8123
+lsof -i :5000
+lsof -i :8123
+```
+
+### Node Modules Issues
+```bash
+# Clear and reinstall dependencies
+rm -rf node_modules
+yarn install
+```
+
+## Additional Resources
+
+- [Home Assistant Custom Card Development](https://developers.home-assistant.io/docs/frontend/custom-ui/custom-card/)
+- [VS Code Dev Containers Docs](https://code.visualstudio.com/docs/remote/containers)
+- [Lit Documentation](https://lit.dev/)
+- [Material Design Web Components](https://github.com/material-components/material-web)
+
+## Environment Details
+
+- **Node.js**: 24
+- **TypeScript**: 5.9.3
+- **Build Tool**: Rollup 4.20
+- **Linter**: ESLint 9 + TypeScript Support
+- **Code Formatter**: Prettier 3.8
+- **Web Framework**: Lit 3.2
+- **Home Assistant Image**: Latest (optional)
+
+## Notes
+
+- The container runs as non-root user `nodejs` for security
+- Volume mounts use `cached` consistency mode for better performance on Mac/Windows
+- All Yarn commands run inside the container automatically
+- VS Code extensions are configured for TypeScript and YAML development

.devcontainer/config/configuration.yaml

@@ -0,0 +1,4 @@
+default_config:
+demo:
+homeassistant_alerts:
+  enabled: false

.devcontainer/devcontainer.json

@@ -1,32 +1,70 @@
-// See https://aka.ms/vscode-remote/devcontainer.json for format details.
+// For format details, see https://aka.ms/devcontainer.json
+// Uses custom-cards/custom-card-devcontainer image for Home Assistant + Dev environment
 {
-  "name": "Boilerplate Card Development",
-  "image": "ludeeus/container:monster",
-  "context": "..",
-  "appPort": ["5000:5000", "9123:8123"],
-  "postCreateCommand": "npm install",
-  "runArgs": [
-    "-v",
-    "${env:HOME}${env:USERPROFILE}/.ssh:/tmp/.ssh" // This is added so you can push from inside the container
+  "name": "Home Assistant Custom Card Dev",
+
+  // Use published devcontainer image
+  "image": "ghcr.io/custom-cards/custom-card-devcontainer:latest",
+  "remoteUser": "vscode",
+
+  // Set working directory
+  "workspaceFolder": "/workspaces/test",
+
+  // Mount project to workspace, dist to Lovelace plugins, and config directory for Home Assistant
+  "mounts": [
+    "source=${localWorkspaceFolder},target=/workspaces/test,type=bind",
+    "source=${localWorkspaceFolder}/dist,target=/config/www/workspace,type=bind",
+    "source=${localWorkspaceFolder}/.devcontainer/config,target=/config,type=bind"
   ],
-  "extensions": [
-    "github.vscode-pull-request-github",
-    "eamodio.gitlens",
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode",
-    "bierner.lit-html",
-    "runem.lit-plugin",
-    "auchenberg.vscode-browser-preview",
-    "davidanson.vscode-markdownlint",
-    "redhat.vscode-yaml"
-  ],
-  "settings": {
-    "files.eol": "\n",
-    "editor.tabSize": 4,
-    "terminal.integrated.shell.linux": "/bin/bash",
-    "editor.formatOnPaste": false,
-    "editor.formatOnSave": true,
-    "editor.formatOnType": true,
-    "files.trimTrailingWhitespace": true
+
+  // Forward Home Assistant port
+  "forwardPorts": [8123],
+  "portsAttributes": {
+    "8123": {
+      "label": "Home Assistant",
+      "onAutoForward": "notify"
+    }
+  },
+
+  // Container environment variables for Home Assistant setup
+  "containerEnv": {
+    "COREPACK_ENABLE_DOWNLOAD_PROMPT": "0",
+    "DEVCONTAINER": "1",
+    "HASS_USERNAME": "dev",
+    "HASS_PASSWORD": "dev",
+    "LOVELACE_REMOTE_FILES": "http://localhost:5000/boilerplate-card.js"
+  },
+
+  // Setup Home Assistant and install dependencies
+  "postCreateCommand": "container setup && corepack enable && yarn install",
+  "postStartCommand": "container launch & yarn start & wait",
+
+  // VS Code extensions for development
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "github.vscode-github-actions",
+        "github.vscode-pull-request-github",
+        "bierner.lit-html",
+        "redhat.vscode-yaml", 
+        "esbenp.prettier-vscode"
+      ],
+      "settings": {
+        "typescript.enablePromptUseWorkspaceTsdk": true,
+        "[typescript]": {
+          "editor.defaultFormatter": "esbenp.prettier-vscode",
+          "editor.formatOnSave": true,
+          "editor.codeActionsOnSave": {
+            "source.fixAll.eslint": "explicit"
+          }
+        },
+        "typescript.tsdk": "node_modules/typescript/lib",
+        "typescript.tsserver.pluginPaths": [
+          "node_modules/typescript/lib"
+        ],
+        "files.eol": "\n",
+        "task.allowAutomaticTasks": "on"
+      }
+    }
   }
 }

.gitattributes

@@ -0,0 +1,19 @@
+# Enforce LF line endings for all text files
+* text=auto eol=lf
+
+# Explicitly declare common source file types
+*.ts text eol=lf
+*.js text eol=lf
+*.json text eol=lf
+*.md text eol=lf
+*.yml text eol=lf
+*.yaml text eol=lf
+*.css text eol=lf
+*.html text eol=lf
+
+# Binary files — no line ending conversion
+*.png binary
+*.jpg binary
+*.gif binary
+*.ico binary
+*.zip binary

.github/copilot-insturctions.md

@@ -0,0 +1,101 @@
+# GitHub Copilot Instructions
+
+You are assisting with development of this Home Assistant Lovelace custom card project.
+The codebase is TypeScript + Lit and builds with Rollup.
+
+Use these instructions as project-specific guardrails when generating, editing, or reviewing code.
+
+## Quick reference
+
+### Core commands
+
+```bash
+yarn install
+yarn start
+yarn build
+yarn lint
+```
+
+### Primary files
+
+- `src/boilerplate-card.ts` — main card implementation
+- `src/editor.ts` — visual editor (`LovelaceCardEditor`)
+- `src/types.ts` — card config and type definitions
+- `src/action-handler-directive.ts` — tap/hold/double-tap directive
+- `src/localize/localize.ts` — localization helper
+- `src/localize/languages/en.json` and `src/localize/languages/nb.json` — translation files
+- `rollup.config.js` and `rollup.config.dev.js` — production and dev build config
+
+## Architecture and patterns
+
+- The custom element is `custom:boilerplate-card`.
+- Prefer Lit 3 patterns and idiomatic web component structure.
+- Keep configuration shape centralized in `src/types.ts`.
+- Keep editor schema and defaults aligned with runtime card behavior.
+- Keep feature logic in small, readable helpers instead of long monolithic methods.
+
+## TypeScript standards
+
+- Use strict, explicit typing; avoid `any` unless there is no practical alternative.
+- Use `import type` for type-only imports where appropriate.
+- Validate and narrow optional config fields before use.
+- Keep public API names stable unless explicitly requested to change them.
+
+## Lit and component guidance
+
+- Use `@property` for public reactive inputs and `@state` for internal state.
+- Avoid direct DOM mutation when Lit reactivity can handle updates.
+- Preserve existing card/editor lifecycle behavior.
+- For card config, validate early in `setConfig` and throw actionable errors.
+- Keep `getCardSize` deterministic and aligned with rendered density.
+
+## Home Assistant integration
+
+- Use Home Assistant helpers and conventions from `custom-card-helpers`.
+- Ensure tap, hold, and double-tap actions are wired through existing action patterns.
+- Support unavailable/loading/error states gracefully.
+- Keep Lovelace config compatibility in mind when changing schema or defaults.
+
+## Localization and copy
+
+- Do not hardcode user-facing strings when a localize key should be used.
+- Add new translation keys to both language files currently in the repo (`en.json`, `nb.json`).
+- Keep copy concise, sentence case, and user-facing.
+- Favor consistent terminology across card UI and editor labels.
+
+## Styling and UX
+
+- Respect Home Assistant theme variables and CSS custom properties.
+- Avoid hardcoded colors when theme tokens can be used.
+- Keep spacing and typography consistent with existing card styles.
+- Ensure layouts work in both compact and wider dashboard widths.
+
+## Build and quality expectations
+
+- Keep `yarn lint` clean for changed code.
+- Ensure `yarn build` succeeds after non-trivial changes.
+- Do not introduce unrelated refactors in focused changes.
+- If updating build tooling, keep dev and prod Rollup configs consistent.
+
+## Safe change workflow
+
+1. Read adjacent code before editing.
+2. Implement the smallest viable change.
+3. Run relevant checks (`yarn lint`, `yarn build`, or targeted command).
+4. Update docs/README when behavior or config changes.
+5. Summarize what changed and why.
+
+## Pull request guidance
+
+- Keep PRs focused to one logical change.
+- Include screenshots or short clips for visible UI/editor changes.
+- Document config changes and migration notes when applicable.
+- Call out any follow-up work explicitly instead of bundling extra scope.
+
+## Avoid these common issues
+
+- Breaking editor/card config parity
+- Adding untyped dynamic config access
+- Hardcoding text instead of localization keys
+- Overriding theme behavior with fixed styles
+- Changing output filenames or card tag without explicit request