tobias
a08922e9a0
Fahrzeug-Pin auf der Standortkarte fehlte: die Marker-Effekte lesen Refs, die erst im asynchronen Leaflet-Import gesetzt werden. Beim ersten Lauf leer, Effekt steigt aus - und weil die Koordinaten sich danach nicht mehr aendern, lief er nie wieder. Ein Bereitschaftsschalter in den Abhaengigkeiten behebt das fuer Marker, Kachelebene und eigene Position zugleich. Kachelpfeil auf "Mein Audi" sass auf halber Kachelhoehe statt oben neben der Ueberschrift; Auswahlfelder hatten nach appearance:none ueberhaupt keinen Aufklapp-Pfeil mehr. SmartDeal: das Datumsfeld war fehlerhaft und die Abfrage, bis wann der Rabatt gilt, fehlte ganz. Das Panel fragt beim Einschalten und zeigt danach nur an - genau daran haengt, dass der Rabatt von selbst auslaufen kann. Portiert. Adressen statt Koordinaten: Nominatim drosselt uns inzwischen. Beide Apps fielen korrekt zurueck, merkten sich Treffer aber nur bis zum Neuladen. Jetzt dauerhaft im selben Cache wie die Tankstellensuche. Ziehen zum Aktualisieren auf dem Geraet: dem Scrollbehaelter fehlte overscroll-behavior, das native Overscroll nahm die Geste weg - derselbe Befund, den das Panel am 2026-08-17 hatte. Ausserdem: Platzhalter wieder in voller Groesse, FIN statt Fahrgestellnummer, Details als Hinweiszeile, Chevron an der Batteriespannung, Reifenzeile "aktuell montiert:", Zahnrad statt Stift am Anzugsmoment, Radkilometer in der Zahlenschrift, Layer-Icon zentriert, share-s beim Teilen, Schliessen-Knopf nur bei aufgezogener Karte. Nicht nachstellbar und zurueckgemeldet: "Fahrten/Tanken, grauer Hintergrund" - Panel und App sind dort deckungsgleich. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@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":
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
npm install
npm run typecheck
npm run build