$ account studiobts
This repository implements a Home Assistant custom integration that adds a visual, drag-and-drop card builder for Lovelace dashboards. Users can design custom dashboard cards by composing blocks (text, icons, gauges, charts, weather, etc.) in a canvas, configuring styles, entity bindings, and actions—all without writing YAML or code. The system includes a dedicated panel within Home Assistant, a custom Lovelace card renderer (`custom:card-builder-renderer-card`) for runtime display, and a marketplace for sharing cards via cardbuilder.pro. Architecturally, the project is split into a Python backend (`custom_components/card_builder/`) and a TypeScript/Lit frontend (`frontend/`). The backend handles integration setup, WebSocket APIs for CRUD on cards, presets, media, and account management. The frontend is a single-page application with panel views (dashboard, card list, editor), a designer canvas with Moveable-based manipulation, and a block system where each block declares its configuration, editor UI, and rendering logic. Key subsystems include a style resolver with preset inheritance and entity bindings (direct, map, threshold, condition, template), a drag-and-drop manager with adapters for canvas and containers, a chart data provider for history/statistics, and a document model with versioned migration. The codebase demonstrates high craftsmanship in its block abstraction, style system, and binding engine—patterns that could be extracted for other visual editors. However, some files are large and tightly coupled, with lingering FIXME comments and a few fragile DOM workarounds. The integration is actively maintained, with a clear roadmap and pro version planned, though the external marketplace dependency introduces some risk.