chore: update Python dev container image to 3.13 and Home Assistant version to 2025.5.0

Author: swingerman

.devcontainer.json

@@ -1,7 +1,7 @@
 // See https://aka.ms/vscode-remote/devcontainer.json for format details.
 {
   "name": "Fluid Level Background Card",
-  "image": "mcr.microsoft.com/devcontainers/python:dev-3.12-bookworm",
+  "image": "mcr.microsoft.com/devcontainers/python:dev-3.13-bookworm",
   "context": "..",
   "postCreateCommand": "scripts/setup",
   "appPort": ["5000:5000"],

.github/copilot-instructions.md

@@ -0,0 +1,130 @@
+# Fluid Level Background Card - AI Coding Agent Instructions
+
+## Project Overview
+
+This is a Home Assistant Lovelace custom card that wraps other cards and renders an animated fluid level background. The fluid effect visualizes sensor values (like battery levels) with smooth CSS animations and canvas-based fluid physics.
+
+## Key Architecture Components
+
+### Core Card Structure
+
+- **Main Component**: `src/fluid-level-background-card.ts` - The primary LitElement custom element that wraps other Home Assistant cards
+- **Fluid Engine**: `src/fliud-meter.ts` (note: typo in filename) - Canvas-based fluid animation engine, improved from JavaScript original
+- **Background Renderer**: `src/fluid-background.ts` - LitElement that manages the canvas and fluid animation lifecycle
+- **Visual Editor**: `src/editor.ts` - Multi-tab configuration UI for the Home Assistant dashboard editor
+
+### Data Flow Pattern
+
+1. **Entity Binding**: Card watches Home Assistant entities (`entity` for level, `fill_entity` for fill state)
+2. **Value Processing**: Raw entity values → normalized percentages → severity color mapping
+3. **Rendering Pipeline**: LitElement lifecycle → Canvas animation updates → CSS styling
+
+### Development Workflow
+
+#### Local Development Setup
+
+```bash
+# Initial setup (dev container environment)
+npm install --legacy-peer-deps
+./scripts/setup  # Installs HA + dependencies
+
+# Development server
+npm start  # Rollup watch mode on port 5000
+# OR use VS Code task: "npm: start"
+```
+
+#### Home Assistant Integration
+
+- **Config**: `config/configuration.yaml` loads the card from `http://127.0.0.1:5000/`
+- **Test Dashboard**: `config/ui-lovelace.yaml` contains test configurations
+- **Run HA**: Use VS Code task "Run Home Assistant on port 9123" or `./scripts/develop`
+
+## Critical Code Patterns
+
+### LitElement Property Updates
+
+```typescript
+// State management pattern used throughout
+@state() protected _level_entity?: string;
+@property({ type: Number }) value!: number;
+
+// Property change detection
+requestUpdate(name?: PropertyKey, oldValue?: unknown): void {
+  if (name === 'value') {
+    this.fm.setPercentage(this.value);
+  }
+}
+```
+
+### Home Assistant Entity Integration
+
+```typescript
+// Entity state watching pattern
+hasConfigOrEntityChanged(this, changedProps, forceUpdate);
+// Theme color extraction
+getThemeColor(THEME_BACKGROUND_COLOR_VARIABLE, BACKGROUND_COLOR);
+```
+
+### Canvas Animation Lifecycle
+
+- **Initialization**: FluidMeter creates canvas context with size constraints
+- **Animation Loop**: requestAnimationFrame drives fluid wave calculations
+- **Performance**: Stop/start mechanisms prevent unnecessary rendering
+
+## Configuration Architecture
+
+### Multi-level Config Structure
+
+- **Card Config**: Wraps any other Home Assistant card (`card` property)
+- **Entity Config**: Level sensor + optional fill state binary sensor
+- **Appearance Config**: Colors (RGBA arrays), severity mappings, full_value scaling
+- **Editor Tabs**: Organized as Card → Entities → Appearance → Actions
+
+### Severity Color Mapping
+
+```typescript
+interface Severity {
+  from: number;
+  to: number;
+  color: number[]; // RGBA array
+}
+```
+
+## Build & Bundle Process
+
+### Rollup Configuration
+
+- **Entry**: `src/fluid-level-background-card.ts`
+- **Output**: Single `fluid-level-background-card.js` bundle
+- **Dev Mode**: Serves on port 5000 with CORS headers for HA integration
+- **Dependencies**: Bundles custom-card-helpers, lit, color utilities
+
+### HACS Distribution
+
+- **Manifest**: `hacs.json` defines filename and metadata
+- **Release**: Automated via GitHub workflows
+- **Installation**: Users add via HACS → Frontend → Custom repositories
+
+## Testing & Debugging
+
+### Local Testing Environment
+
+- Home Assistant runs in dev container on port 9123
+- Card served from Rollup dev server on port 5000
+- Test entities defined in `config/configuration.yaml` (input_number, input_boolean)
+
+### Common Issues
+
+- **Canvas Sizing**: Fluid background must match card dimensions exactly
+- **Entity State Types**: Handle undefined/null entity states gracefully
+- **Theme Integration**: Colors must work in both light/dark HA themes
+- **Performance**: Stop animations when card not visible
+
+## File Naming Conventions
+
+- **Components**: kebab-case with .ts extension
+- **Interfaces**: PascalCase in types.ts
+- **Constants**: UPPER_SNAKE_CASE in const.ts
+- **Utilities**: Organized by function in utils/ directory
+
+Note: The main fluid meter file has a typo: `fliud-meter.ts` should be `fluid-meter.ts` but changing it would break imports.

package-lock.json

@@ -1 +1 @@
-homeassistant==2024.4.3
+homeassistant==2025.5.0