tobias
b1411625aa
Share-Erweiterung: ein PDF aus Mail landet ueber Teilen -> DataMetric360 als Tankbeleg. Alles Native liegt versioniert unter companion-app/native/, weil ios/ gitignored ist und npx cap add ios es sonst wieder frisst; scripts/ios-teilen-einrichten.mjs haengt es bei jedem Bau ins Xcode-Projekt und ist in ios-signieren.sh eingehaengt. Der pbxproj-Teil ist auf keinem Mac erprobt - er bricht vor dem Schreiben ab, und docs/SHARE_EXTENSION.md beschreibt dieselben Handgriffe fuer Xcode. "In den Kalender uebernehmen" ging in der App nie: WKWebView ignoriert das download-Attribut, der Klick lief ins Leere. Auf dem Geraet jetzt @capacitor/filesystem plus @capacitor/share. useTheme/useBoden legten je Aufrufer eigenen Zustand an - fuenf Kopien. Der Schalter aenderte nur seine eigene, data-theme in App.tsx blieb stehen, die Tag/Nacht-Umschaltung wirkte erst nach einem Neustart. Jetzt ein Speicher je Einstellung ueber useSyncExternalStore. Zwei Regressionstests, gegen den alten Stand als fehlschlagend nachgewiesen. Alle Popups nach Apple HIG: neue Bausteine Sheet und ActionSheet, blickdicht und mit abgedunkeltem Schleier, in beiden Codebasen. Popup portalierte nach document.body - ausserhalb von [data-theme] - und war deshalb im Tagmodus fast unsichtbar; Portal zielt jetzt auf .ads-root. ImagePlaceholder merkte sich "fehlgeschlagen" ohne die Adresse: nach einem leeren Galerieplatz zeigten auch die mit Foto nur noch den Platzhalter. Vier Regressionstests, ebenfalls gegen den alten Stand geprueft. Bildadressen tragen jetzt einen Cache-Brecher - HA liefert /local/ mit 31 Tagen Cache-Vorgabe aus, im Panel eingefuegte Radfotos erschienen in der App deshalb nicht. uebersichtsbild: Panel speichert den Namen, die App verglich gegen den Dateinamen - der Vergleich traf nie zu. Kanonisch ist der Name. Weiter: Navigationspfeil statt gleichschenkligem Dreieck auf der Streckenlinie (die Kerbe unterscheidet Kopf und Ende), CI-Symbol tour-s als Fahrten-Icon, Datumsfelder zeigen ihren Wert ohne erstes Antippen, feste Beispielnamen im Setup, Kopf-Gegengewicht fuer mittige Titel, Standort-Blatt mit festem Fussabstand, NSLocationWhenInUseUsageDescription, watchPosition fuer die Live-Ortung, Art-Pille wieder als Knopf, Zwischenablage fuer Tankbelege. 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