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 <[email protected]>

design-system/.design-sync/previews/Accordion.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { Accordion, LeafRow } from "@audi-dash/ui";
+
+function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ padding: 16 }}>
+      {children}
+    </div>
+  );
+}
+
+export function Open() {
+  return (
+    <Root>
+      <div style={{ width: 300 }}>
+        <Accordion title="Reifen" summary="4,2 mm" defaultOpen>
+          <LeafRow title="Vorne" value="4,2 mm" />
+          <LeafRow title="Hinten" value="3,8 mm" />
+        </Accordion>
+      </div>
+    </Root>
+  );
+}
+
+export function Closed() {
+  return (
+    <Root>
+      <div style={{ width: 300 }}>
+        <Accordion title="Versicherung" summary="248 €/Jahr">
+          <LeafRow title="Haftpflicht" value="180 €" />
+          <LeafRow title="Teilkasko" value="68 €" />
+        </Accordion>
+      </div>
+    </Root>
+  );
+}
+
+export function NestedLevel2() {
+  return (
+    <Root>
+      <div style={{ width: 300 }}>
+        <Accordion title="Service" summary="Nächster Termin" defaultOpen>
+          <Accordion title="Inspektion" level={2} defaultOpen>
+            <LeafRow title="Fällig bei" value="45.000 km" />
+          </Accordion>
+          <Accordion title="Ölwechsel" level={2}>
+            <LeafRow title="Fällig bei" value="47.500 km" />
+          </Accordion>
+        </Accordion>
+      </div>
+    </Root>
+  );
+}