Initialer Import: HA-Panel, Design-System, Companion-App

Drei zusammengehörige Teile in einem Repository:

- homeassistant/  Das fertige, im Einsatz befindliche Home-Assistant-Panel
  (panel_custom Custom Element + pyscript-Backend). Echte Fahrzeug- und
  Personendaten (fahrzeugprofil.json, fahrten.jsonl, tankvorgaenge.jsonl,
  Tankbelege) bleiben per .gitignore außen vor; die anonymisierte Vorlage
  fahrzeugprofil.example.json ist mit dabei.

- design-system/  Eigenständige React-Komponentenbibliothek (@audi-dash/ui),
  die die visuelle Sprache des Panels nachbildet - ohne Audi-Markenzeichen
  und ohne die lizenzierte Hausschrift. Dient als Grundlage für Claude
  Design. War bis hierher ein eigenes Repository und ist in dieses
  eingeschmolzen worden.

- companion-app/  Datenschicht der neuen App DataMetric360 (iOS/Android via
  Capacitor, zusätzlich als Iframe im HA-Dashboard). Noch ohne Oberfläche:
  REST- und WebSocket-Zugriff auf Home Assistant plus Warteschlange für
  Änderungen ohne Netz. Ersetzt das eingespritzte hass-Objekt, das nur
  innerhalb des HA-Frontends existiert.

Dazu die Projektdokumentation: SPECIFICATION.md (Ist-Stand des Panels),
COMPANION_APP_ARCHITECTURE.md (Architekturentscheidungen der neuen App),
AUDIT_2026-08-10.md, DESIGN_BRIEF_DATAMETRIC360.md und der ursprüngliche
Bauauftrag.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

design-system/README.md

@@ -0,0 +1,66 @@
+# @audi-dash/ui
+
+Generisches React-Komponenten-Set, das die visuelle Sprache des Audi-Dashboards (Kacheln,
+Formularzeilen, Toggle, Segmented Control, Popups, Statusanzeigen, Fortschrittsanzeigen …)
+nachbildet. Enthält **keine** Audi-Marken-Assets (Font "Audi Type", Ringe, Typenschild) - diese
+sind laut Lizenzvereinbarung ausschließlich für die private Home-Assistant-Installation
+freigegeben. Diese Bibliothek nutzt einen neutralen Fallback-Font-Stack (`Helvetica, Arial,
+sans-serif`).
+
+## Verwendung
+
+Konsumierende Apps legen die `.ads-root`-Klasse um den Baum, der die Bibliothek nutzt, und setzen
+`data-theme="nacht"` (Standard) oder `data-theme="tag"`:
+
+```tsx
+import { Tile, Feld, Switch } from "@audi-dash/ui";
+import "@audi-dash/ui/styles.css";
+
+function App() {
+  return (
+    <div className="ads-root" data-theme="nacht">
+      <Tile>
+        <Feld label="Beispiel">
+          <Switch checked={true} onChange={() => {}} />
+        </Feld>
+      </Tile>
+    </div>
+  );
+}
+```
+
+## Design-Tokens
+
+Alle Farben/Radien/Abstände liegen als CSS-Custom-Properties in `src/tokens/tokens.css` vor -
+Komponenten referenzieren ausschließlich `var(--token)`, nie Literal-Hex-Werte. Siehe die Datei
+für die vollständige Liste (`--red`, `--canvas`, `--tile`, `--fg`/`--fg2`/`--fg3`, `--ok`/`--warn`/
+`--bad`, `--r-tile`/`--r-pill`/`--r-func`, `--sp-1`…`--sp-5`).
+
+## Typografie-Utility-Klassen
+
+Reine Textstil-Hooks ohne eigene Komponentenstruktur (in `tokens.css` definiert) - direkt als
+`className` anwenden:
+
+| Klasse | Verwendung |
+|---|---|
+| `.ads-eyebrow` | Kleine Überschrift über einem Seitentitel (10px, uppercase, `--fg3`) |
+| `.ads-title` | Seitentitel (23px, einzeilig, ellipsis) |
+| `.ads-label` | Feld-/Kachel-Label (10px, uppercase, `--fg3`) |
+| `.ads-sport` | Kursiver Akzenttext |
+
+Die einzige Ausnahme mit echter interner Struktur ist die `Fig`-Komponente (großer Zahlenwert +
+Einheit) - sie wird intern auch von `ProgressRing` und `StatGrid` genutzt.
+
+## Komponenten
+
+Pill, IconButton, Fig, StatusRow, ActionButton, Switch, Seg, RowList, LeafRow, Tile, Feld,
+ProgressRing, ProgressBar, StatGrid, Accordion, SwipeRow, TabBar, Popup (+PopupMenuItem),
+ImagePlaceholder. Props-Referenz: `.d.ts`-Dateien im Build bzw. die jeweilige `<Name>.tsx`.
+
+## Build
+
+```bash
+npm install
+npm run typecheck
+npm run build
+```