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>
2026-08-11 00:10:53 +02:00
commit e1d570992e
151 changed files with 18162 additions and 0 deletions
@@ -0,0 +1,24 @@
+# design-sync notes — @audi-dash/ui
+
+## Repo shape
+- Package shape (no Storybook). Build: `npm run build` (tsup) in the repo root produces `dist/index.js` (ESM), `dist/index.cjs` (CJS), `dist/index.d.ts`, `dist/styles.css`. The converter's `--entry` points at `dist/index.js`.
+- Converter deps are staged/installed under `.ds-sync/` (isolated npm project, gitignored) — never mixed into the repo's own `package.json`.
+- On Windows, `npm install` needs `npm approve-scripts esbuild` once per fresh `.ds-sync/`/`node_modules` (npm 11's allow-scripts gate blocks esbuild's postinstall that downloads its platform binary).
+
+## Known render warns (triaged, safe to ignore on re-sync)
+- `[RENDER_THIN]` on `IconButton`: "mounts have no text and paint nothing" — false positive. IconButton is intentionally icon-only (no text content, `aria-label` only). Screenshot confirms both cells (Default, Disabled) render the icons correctly; the heuristic just measures text content, which is legitimately empty here.
+
+## cfg.overrides
+- `Popup`: `cardMode: "single"` — it's a fixed-position overlay component that portals to `document.body`; grid mode collapsed/escaped its card.
+- `Accordion`, `Feld`, `TabBar`, `StatGrid`: `cardMode: "column"` — one or more of their authored stories render wider than a grid cell (multi-field forms / full-width nav bars); column mode gives them the full card width instead of being cropped.
+
+## Preview authoring conventions
+- Every preview wraps its composition in `<div className="ads-root" data-theme="nacht">` (a local `Root` helper duplicated per file) — the library only applies text color/background via `.ads-root`, and without it previews render with browser-default black-on-white instead of the app's actual dark theme. **This is required for every future preview** — the components' color tokens are on `:root` (theme-independent) but `color`/`background` inheritance only kicks in under `.ads-root`.
+- `Popup`'s children portal to `document.body`, escaping any local `.ads-root` wrapper. This doesn't break styling because `Popup`'s own CSS (`.ads-popup`, `.ads-popup-item`) sets `background`/`color` directly from `var(--tile-2)`/`var(--fg)` rather than relying on inherited color — so it renders correctly even though the wrapper technically doesn't reach it.
+- `SwipeRow`'s `SwipedOpen` story shows content clipped at the left edge behind the revealed delete button — this is correct, faithful behavior (the row slides left to reveal the delete action), not a rendering defect.
+
+## Re-sync risks
+- All 20 previews are hand-authored (no floor cards) — a future re-sync only needs to touch previews for components whose source or `.tsx` actually changed; everything else carries forward via the grade cache + `_ds_sync.json` anchor.
+- The `Root` wrapper pattern (data-theme="nacht") is duplicated per preview file rather than imported from a shared module — if a preview is added later without it, it will silently render unthemed (black text, no background). Check for `data-theme="nacht"` in any new preview before grading it.
+- Playwright/Chromium was freshly installed for this sync (`.ds-sync/node_modules/playwright`, chromium cached at `~/AppData/Local/ms-playwright`) — not committed, machine-local. A re-sync on a different machine needs to reinstall it (package-validate.mjs will prompt if missing).
+- No `docsDir`/docs were found in this repo (it's a fresh internal design system, no README-per-component docs yet) — all `.prompt.md` files are synthesized from `.d.ts` + the authored preview `.tsx`, not from hand-written docs. If per-component docs are added later, set `cfg.docsDir` to pick them up.
@@ -0,0 +1,15 @@
+{
+  "projectId": "27d66fd4-ed86-43b2-b8bf-61e281a5a1a5",
+  "shape": "package",
+  "pkg": "@audi-dash/ui",
+  "globalName": "AudiDashUI",
+  "cssEntry": "./dist/styles.css",
+  "readmeHeader": ".design-sync/conventions.md",
+  "overrides": {
+    "Popup": { "cardMode": "single", "viewport": "340x300" },
+    "Accordion": { "cardMode": "column" },
+    "Feld": { "cardMode": "column" },
+    "TabBar": { "cardMode": "column" },
+    "StatGrid": { "cardMode": "column" }
+  }
+}
@@ -0,0 +1,7 @@
+## Usage conventions
+
+- **Always wrap the tree that uses these components in `<div className="ads-root" data-theme="nacht">` (or `data-theme="tag"` for the light theme).** Color tokens (`--fg`, `--canvas`, `--tile`, etc.) are defined on `:root` and work anywhere, but text `color` and page `background` are only applied via the `.ads-root` class — content rendered outside it falls back to browser-default black-on-white.
+- Default theme is **Nacht** (dark) — this is what `:root` sets without any `data-theme` override. Use `data-theme="tag"` for the light variant.
+- No Audi brand assets (font, rings, nameplate) are included in this bundle — it uses a neutral `Helvetica, Arial, sans-serif` fallback stack by design.
+- `Popup` renders via a React portal into `document.body` by default (`position: fixed`, centers or anchors relative to the viewport) — it doesn't need to sit inside `.ads-root` itself since its own CSS sets `background`/`color` explicitly rather than inheriting them.
+- `SwipeRow` is a controlled/uncontrolled swipe-to-reveal row: swiping (or setting `swiped`) slides content left to reveal a delete action on the right, clipping the row's left edge by design — this is the intended interaction, not a layout bug.
@@ -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>
+  );
+}
@@ -0,0 +1,45 @@
+import * as React from "react";
+import { ActionButton } from "@audi-dash/ui";
+
+function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ padding: 16, display: "inline-block" }}>
+      {children}
+    </div>
+  );
+}
+
+export function Default() {
+  return (
+    <Root>
+      <ActionButton>Speichern</ActionButton>
+    </Root>
+  );
+}
+
+export function Destructive() {
+  return (
+    <Root>
+      <ActionButton variant="destructive">Fahrt löschen</ActionButton>
+    </Root>
+  );
+}
+
+export function Disabled() {
+  return (
+    <Root>
+      <ActionButton disabled>Speichern</ActionButton>
+    </Root>
+  );
+}
+
+export function Group() {
+  return (
+    <Root>
+      <div style={{ display: "flex", gap: 10 }}>
+        <ActionButton>Übernehmen</ActionButton>
+        <ActionButton variant="destructive">Verwerfen</ActionButton>
+      </div>
+    </Root>
+  );
+}
@@ -0,0 +1,46 @@
+import * as React from "react";
+import { Feld, Switch } 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 ReadOnlyValue() {
+  return (
+    <Root>
+      <div style={{ width: 280 }}>
+        <Feld label="Kennzeichen" value="M-AB 1234" />
+        <Feld label="Erstzulassung" value="03/2022" last />
+      </div>
+    </Root>
+  );
+}
+
+export function WithUnit() {
+  return (
+    <Root>
+      <div style={{ width: 280 }}>
+        <Feld label="Anzugsmoment" unit="Nm" last>
+          <input type="number" defaultValue={120} style={{ width: 60, textAlign: "right" }} />
+        </Feld>
+      </div>
+    </Root>
+  );
+}
+
+export function WithControl() {
+  const [on, setOn] = React.useState(true);
+  return (
+    <Root>
+      <div style={{ width: 280 }}>
+        <Feld label="Benachrichtigungen" last>
+          <Switch checked={on} onChange={setOn} aria-label="Benachrichtigungen" />
+        </Feld>
+      </div>
+    </Root>
+  );
+}
@@ -0,0 +1,42 @@
+import * as React from "react";
+import { Fig } from "@audi-dash/ui";
+
+function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ padding: 16, display: "inline-block" }}>
+      {children}
+    </div>
+  );
+}
+
+export function Default() {
+  return (
+    <Root>
+      <Fig value={128} unit="km" />
+    </Root>
+  );
+}
+
+export function LargeHero() {
+  return (
+    <Root>
+      <Fig value={64} unit="%" size={40} />
+    </Root>
+  );
+}
+
+export function Compact() {
+  return (
+    <Root>
+      <Fig value={7.2} unit="l/100km" size={17} />
+    </Root>
+  );
+}
+
+export function NoUnit() {
+  return (
+    <Root>
+      <Fig value={2.4} size={28} />
+    </Root>
+  );
+}
@@ -0,0 +1,53 @@
+import * as React from "react";
+import { IconButton } from "@audi-dash/ui";
+
+function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ padding: 16, display: "inline-block" }}>
+      {children}
+    </div>
+  );
+}
+
+const GearIcon = (
+  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6">
+    <circle cx="12" cy="12" r="3.2" />
+    <path d="M12 2.5v3M12 18.5v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2.5 12h3M18.5 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1" />
+  </svg>
+);
+
+const BackIcon = (
+  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.8">
+    <path d="M15 5l-7 7 7 7" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+const CloseIcon = (
+  <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.8">
+    <path d="M6 6l12 12M18 6L6 18" strokeLinecap="round" />
+  </svg>
+);
+
+export function Default() {
+  return (
+    <Root>
+      <div style={{ display: "flex", gap: 12 }}>
+        <IconButton aria-label="Zurück">{BackIcon}</IconButton>
+        <IconButton aria-label="Einstellungen">{GearIcon}</IconButton>
+        <IconButton aria-label="Schließen">{CloseIcon}</IconButton>
+      </div>
+    </Root>
+  );
+}
+
+export function Disabled() {
+  return (
+    <Root>
+      <div style={{ display: "flex", gap: 12 }}>
+        <IconButton aria-label="Einstellungen" disabled>
+          {GearIcon}
+        </IconButton>
+      </div>
+    </Root>
+  );
+}
@@ -0,0 +1,34 @@
+import * as React from "react";
+import { ImagePlaceholder } from "@audi-dash/ui";
+
+function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ padding: 16, display: "inline-block" }}>
+      {children}
+    </div>
+  );
+}
+
+export function Empty() {
+  return (
+    <Root>
+      <ImagePlaceholder alt="Fahrzeugfoto" label="Kein Foto" hint="foto.jpg" />
+    </Root>
+  );
+}
+
+export function Mini() {
+  return (
+    <Root>
+      <ImagePlaceholder alt="Vorschau" label="Kein Foto" size="mini" />
+    </Root>
+  );
+}
+
+export function Round() {
+  return (
+    <Root>
+      <ImagePlaceholder alt="Profilbild" label="Kein Bild" size="round" />
+    </Root>
+  );
+}
@@ -0,0 +1,32 @@
+import * as React from "react";
+import { 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 Default() {
+  return (
+    <Root>
+      <div style={{ width: 280 }}>
+        <LeafRow title="Sommerreifen" subTitle="Vorne" value="4,2 mm" onClick={() => {}} />
+      </div>
+    </Root>
+  );
+}
+
+export function List() {
+  return (
+    <Root>
+      <div style={{ width: 280, display: "flex", flexDirection: "column", gap: 2 }}>
+        <LeafRow title="Sommerreifen" subTitle="Vorne" value="4,2 mm" onClick={() => {}} />
+        <LeafRow title="Sommerreifen" subTitle="Hinten" value="3,8 mm" onClick={() => {}} />
+        <LeafRow title="Winterreifen" subTitle="Eingelagert" value="6,1 mm" subValue="seit Mai" onClick={() => {}} />
+      </div>
+    </Root>
+  );
+}
@@ -0,0 +1,45 @@
+import * as React from "react";
+import { Pill } from "@audi-dash/ui";
+
+function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ padding: 16, display: "inline-block" }}>
+      {children}
+    </div>
+  );
+}
+
+export function Default() {
+  return (
+    <Root>
+      <div style={{ display: "flex", gap: 8 }}>
+        <Pill>Elektro</Pill>
+        <Pill>Automatik</Pill>
+        <Pill>5 Sitze</Pill>
+      </div>
+    </Root>
+  );
+}
+
+export function Work() {
+  return (
+    <Root>
+      <div style={{ display: "flex", gap: 8 }}>
+        <Pill variant="work">Neu</Pill>
+        <Pill variant="work">-15%</Pill>
+      </div>
+    </Root>
+  );
+}
+
+export function Mixed() {
+  return (
+    <Root>
+      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+        <Pill>Diesel</Pill>
+        <Pill variant="work">SmartDeal</Pill>
+        <Pill>4x4</Pill>
+      </div>
+    </Root>
+  );
+}
@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Popup, PopupMenuItem } from "@audi-dash/ui";
+
+function Root({ children, height }: { children: React.ReactNode; height: number }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ position: "relative", width: "100%", height, padding: 0 }}>
+      {children}
+    </div>
+  );
+}
+
+export function Menu() {
+  return (
+    <Root height={260}>
+      <Popup open onClose={() => {}} variant="menu" anchor="center">
+        <PopupMenuItem onClick={() => {}}>Foto ändern</PopupMenuItem>
+        <PopupMenuItem onClick={() => {}}>Foto entfernen</PopupMenuItem>
+        <PopupMenuItem onClick={() => {}} destructive>
+          Fahrzeug löschen
+        </PopupMenuItem>
+      </Popup>
+    </Root>
+  );
+}
+
+export function Form() {
+  return (
+    <Root height={280}>
+      <Popup open onClose={() => {}} variant="form" anchor="center">
+        <label className="ads-label">Gültig bis</label>
+        <input type="date" defaultValue="2026-12-31" />
+      </Popup>
+    </Root>
+  );
+}
@@ -0,0 +1,40 @@
+import * as React from "react";
+import { PopupMenuItem } 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 Default() {
+  return (
+    <Root>
+      <div
+        className="ads-popup ads-popup--menu"
+        style={{ position: "static", transform: "none", display: "inline-flex", flexDirection: "column" }}
+      >
+        <PopupMenuItem onClick={() => {}}>Foto ändern</PopupMenuItem>
+        <PopupMenuItem onClick={() => {}}>Details anzeigen</PopupMenuItem>
+      </div>
+    </Root>
+  );
+}
+
+export function Destructive() {
+  return (
+    <Root>
+      <div
+        className="ads-popup ads-popup--menu"
+        style={{ position: "static", transform: "none", display: "inline-flex", flexDirection: "column" }}
+      >
+        <PopupMenuItem onClick={() => {}}>Bearbeiten</PopupMenuItem>
+        <PopupMenuItem onClick={() => {}} destructive>
+          Löschen
+        </PopupMenuItem>
+      </div>
+    </Root>
+  );
+}
@@ -0,0 +1,46 @@
+import * as React from "react";
+import { ProgressBar } 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 SingleFill() {
+  return (
+    <Root>
+      <div style={{ width: 260 }}>
+        <ProgressBar percent={68} />
+      </div>
+    </Root>
+  );
+}
+
+export function SegmentedWithLegend() {
+  return (
+    <Root>
+      <div style={{ width: 260 }}>
+        <ProgressBar
+          segments={[
+            { value: 4, color: "var(--ok)", label: "Kraftstoff" },
+            { value: 2, color: "var(--warn)", label: "Verschleiß" },
+            { value: 1, color: "var(--bad)", label: "Wartung" },
+          ]}
+        />
+      </div>
+    </Root>
+  );
+}
+
+export function SingleSegmentNoLegend() {
+  return (
+    <Root>
+      <div style={{ width: 260 }}>
+        <ProgressBar segments={[{ value: 1, color: "var(--fg)" }]} showLegend={false} />
+      </div>
+    </Root>
+  );
+}
@@ -0,0 +1,42 @@
+import * as React from "react";
+import { ProgressRing } from "@audi-dash/ui";
+
+function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ padding: 16, display: "inline-block" }}>
+      {children}
+    </div>
+  );
+}
+
+export function Default() {
+  return (
+    <Root>
+      <ProgressRing percent={64} unit="%" label="Ladestand" />
+    </Root>
+  );
+}
+
+export function CustomValue() {
+  return (
+    <Root>
+      <ProgressRing percent={82} value="312" unit="km" label="Reichweite" />
+    </Root>
+  );
+}
+
+export function Low() {
+  return (
+    <Root>
+      <ProgressRing percent={12} unit="%" label="Kraftstoff" />
+    </Root>
+  );
+}
+
+export function Small() {
+  return (
+    <Root>
+      <ProgressRing percent={45} unit="%" size={90} />
+    </Root>
+  );
+}
@@ -0,0 +1,41 @@
+import * as React from "react";
+import { RowList } 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 Default() {
+  return (
+    <Root>
+      <div style={{ width: 280 }}>
+        <RowList
+          items={[
+            { key: "km", label: "Kilometerstand", value: "42.318 km" },
+            { key: "verbrauch", label: "Ø Verbrauch", value: "6,8 l/100km" },
+            { key: "letzte", label: "Letzte Fahrt", value: "12 km", subValue: "vor 2 Stunden" },
+          ]}
+        />
+      </div>
+    </Root>
+  );
+}
+
+export function WithSubValues() {
+  return (
+    <Root>
+      <div style={{ width: 280 }}>
+        <RowList
+          items={[
+            { key: "vorne", label: "Solldruck vorne", value: "2,3 bar", subValue: "kalt gemessen" },
+            { key: "hinten", label: "Solldruck hinten", value: "2,1 bar", subValue: "kalt gemessen" },
+          ]}
+        />
+      </div>
+    </Root>
+  );
+}
@@ -0,0 +1,43 @@
+import * as React from "react";
+import { Seg } from "@audi-dash/ui";
+
+function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ padding: 16, display: "inline-block" }}>
+      {children}
+    </div>
+  );
+}
+
+export function TwoOptions() {
+  const [value, setValue] = React.useState<"nacht" | "tag">("nacht");
+  return (
+    <Root>
+      <Seg
+        options={[
+          { value: "nacht", label: "Nacht" },
+          { value: "tag", label: "Tag" },
+        ]}
+        value={value}
+        onChange={setValue}
+      />
+    </Root>
+  );
+}
+
+export function ThreeOptions() {
+  const [value, setValue] = React.useState("woche");
+  return (
+    <Root>
+      <Seg
+        options={[
+          { value: "tag", label: "Tag" },
+          { value: "woche", label: "Woche" },
+          { value: "monat", label: "Monat" },
+        ]}
+        value={value}
+        onChange={setValue}
+      />
+    </Root>
+  );
+}
@@ -0,0 +1,43 @@
+import * as React from "react";
+import { StatGrid } 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 FourColumns() {
+  return (
+    <Root>
+      <div style={{ width: 320 }}>
+        <StatGrid
+          items={[
+            { value: 42318, caption: "Kilometer" },
+            { value: 6.8, unit: "l", caption: "Ø Verbrauch" },
+            { value: 12, caption: "Fahrten" },
+            { value: 312, unit: "km", caption: "Reichweite" },
+          ]}
+        />
+      </div>
+    </Root>
+  );
+}
+
+export function TwoColumns() {
+  return (
+    <Root>
+      <div style={{ width: 200 }}>
+        <StatGrid
+          columns={2}
+          items={[
+            { value: 2.3, unit: "bar", caption: "Vorne" },
+            { value: 2.1, unit: "bar", caption: "Hinten" },
+          ]}
+        />
+      </div>
+    </Root>
+  );
+}
@@ -0,0 +1,32 @@
+import * as React from "react";
+import { StatusRow } 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 AllStatuses() {
+  return (
+    <Root>
+      <div style={{ display: "flex", flexDirection: "column", gap: 8, width: 260 }}>
+        <StatusRow status="ok" title="Reifendruck" subtitle="Alle vier in Ordnung" />
+        <StatusRow status="warn" title="Ölstand" subtitle="Nächster Wechsel in 800 km" />
+        <StatusRow status="bad" title="Batterie" subtitle="Spannung niedrig" />
+      </div>
+    </Root>
+  );
+}
+
+export function Clickable() {
+  return (
+    <Root>
+      <div style={{ width: 260 }}>
+        <StatusRow status="warn" title="Service fällig" subtitle="Tippen für Details" onClick={() => {}} />
+      </div>
+    </Root>
+  );
+}
@@ -0,0 +1,34 @@
+import * as React from "react";
+import { SwipeRow, 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 Closed() {
+  return (
+    <Root>
+      <div style={{ width: 280 }}>
+        <SwipeRow onDelete={() => {}} deleteLabel="Löschen">
+          <LeafRow title="Fahrt nach Hause" subTitle="Heute, 08:12" value="12 km" />
+        </SwipeRow>
+      </div>
+    </Root>
+  );
+}
+
+export function SwipedOpen() {
+  return (
+    <Root>
+      <div style={{ width: 280 }}>
+        <SwipeRow onDelete={() => {}} deleteLabel="Löschen" swiped>
+          <LeafRow title="Fahrt zur Arbeit" subTitle="Gestern, 17:40" value="18 km" />
+        </SwipeRow>
+      </div>
+    </Root>
+  );
+}
@@ -0,0 +1,36 @@
+import * as React from "react";
+import { Switch } from "@audi-dash/ui";
+
+function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ padding: 16, display: "inline-block" }}>
+      {children}
+    </div>
+  );
+}
+
+export function On() {
+  const [checked, setChecked] = React.useState(true);
+  return (
+    <Root>
+      <Switch checked={checked} onChange={setChecked} aria-label="Benachrichtigungen" />
+    </Root>
+  );
+}
+
+export function Off() {
+  const [checked, setChecked] = React.useState(false);
+  return (
+    <Root>
+      <Switch checked={checked} onChange={setChecked} aria-label="Benachrichtigungen" />
+    </Root>
+  );
+}
+
+export function Disabled() {
+  return (
+    <Root>
+      <Switch checked={true} onChange={() => {}} disabled aria-label="Benachrichtigungen" />
+    </Root>
+  );
+}
@@ -0,0 +1,61 @@
+import * as React from "react";
+import { TabBar } from "@audi-dash/ui";
+
+function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ padding: 16 }}>
+      {children}
+    </div>
+  );
+}
+
+const HomeIcon = (
+  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6">
+    <path d="M4 11l8-7 8 7v9a1 1 0 0 1-1 1h-4v-6H9v6H5a1 1 0 0 1-1-1v-9Z" strokeLinejoin="round" />
+  </svg>
+);
+const ListIcon = (
+  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6">
+    <path d="M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01" strokeLinecap="round" />
+  </svg>
+);
+const CarIcon = (
+  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6">
+    <path d="M4 16v-3l2-5h12l2 5v3M4 16h16M4 16v2M20 16v2M7 19v-2M17 19v-2" strokeLinejoin="round" />
+  </svg>
+);
+const GearIcon = (
+  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6">
+    <circle cx="12" cy="12" r="3.2" />
+    <path d="M12 2.5v3M12 18.5v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2.5 12h3M18.5 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1" />
+  </svg>
+);
+
+const items = [
+  { key: "home", label: "Übersicht", icon: HomeIcon },
+  { key: "trips", label: "Fahrten", icon: ListIcon },
+  { key: "car", label: "Fahrzeug", icon: CarIcon },
+  { key: "settings", label: "Einstellungen", icon: GearIcon },
+];
+
+export function Default() {
+  const [active, setActive] = React.useState("home");
+  return (
+    <Root>
+      <div style={{ width: 340 }}>
+        <TabBar items={items} activeKey={active} onChange={setActive} />
+      </div>
+    </Root>
+  );
+}
+
+export function IconOnly() {
+  const [active, setActive] = React.useState("trips");
+  return (
+    <Root>
+      <div style={{ width: 220 }}>
+        <TabBar items={items} activeKey={active} onChange={setActive} iconOnly />
+      </div>
+    </Root>
+  );
+}
@@ -0,0 +1,45 @@
+import * as React from "react";
+import { Tile, Fig } 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 Default() {
+  return (
+    <Root>
+      <div style={{ width: 240 }}>
+        <Tile>
+          <div className="ads-label">Reichweite</div>
+          <Fig value={312} unit="km" size={28} />
+        </Tile>
+      </div>
+    </Root>
+  );
+}
+
+export function Flat() {
+  return (
+    <Root>
+      <div style={{ width: 240 }}>
+        <Tile variant="flat">Zusatzinformation ohne Rahmenschatten</Tile>
+      </div>
+    </Root>
+  );
+}
+
+export function ButtonWithChevron() {
+  return (
+    <Root>
+      <div style={{ width: 240 }}>
+        <Tile variant="button" chevron onClick={() => {}}>
+          Alle Fahrten anzeigen
+        </Tile>
+      </div>
+    </Root>
+  );
+}