Zum Inhalt

Native UI — Web Look & Feel (Increment 3b-UI) Design Spec

Status: Draft · 2026-06-03 · author: Johannes (brainstormed with Claude) Builds on: the authoring editor core (3b-1). Re-skins the native UI to match the web app's look & feel before preset-mgmt (3b-2) + exploration (3b-3) are built, so those land in the right style.

1. Ziel

Die native UI soll das Look & Feel der Web-App übernehmen — gleiche Tokens, gleiche Struktur, gleiche Ästhetik — aber nativ idiomatisch (echte Inspector/Sheet-Mechanik, native Gesten, System-Fonts statt gebündelter Web-Fonts). Sie soll aussehen wie Physarum und sich nativ anfühlen.

2. Erfasste Web-Vorlage

  • Tokens (KSP / src/styles/ksp-tokens.css): Void-Dark-Surfaces (vault #060709, surface #0b0d11, raised #11141a, overlay #181c24, border #22272f/#2e343d), Pearl-Text #e8e4d8 (+ secondary #828a97, tertiary #5a6170), 12 Signal-Akzente (Accent default = phosphor #39ff7a; ember #ffb442 für „momentum"/Save). Spacing 4/8/12/16/24/32; Radii 3/6/10/14. Mono = JetBrains Mono (→ nativ: SF Mono via .monospaced).
  • Layout: schwebende Glass-Topbar (Logo links, Action-Icons rechts) · formatfüllender Player · Editor als dunkles Glass-Panel rechts mit Mono-Uppercase-Sektionslabels + Chevron, Slidern mit Mono-Wert rechts, Akzent-Button unten · Library als Overlay (Suche + Tag-Filter-Pills + Thumbnail-Card-Grid).

3. Native Umsetzung

PhysarumTheme — KSP-Tokens als Swift-Konstanten: Color(hex:)-Helper; Theme.Color (void-Skala, pearl/secondary/tertiary, accent=phosphor, ember, signal-Palette); Theme.Font (mono-label/value via .system(design: .monospaced), body via system); Theme.Space / Theme.Radius. Ein data-aspect-Äquivalent ist out-of-scope (fester Accent phosphor + ember).

Komponenten-Bibliothek (Sources/UI/): - PhysSlider — Label (mono, uppercase, tertiary) links, Mono-Wert rechts, Track (void-300) + Accent-Fill; tap-to-type + double-tap-reset bleiben. - PhysSection — Mono-Eyebrow-Label + Chevron, collapsible (ersetzt das generische DisclosureGroup-Styling). - PhysButton — gefüllt (accent/ember) bzw. ghost; mono-caps. - GlassPanel — .ultraThinMaterial/void-overlay + subtiler Border + Shadow, für Topbar + Editor-Panel + Library-Overlay. - TagPill — kleines mono-caps Chip, toggle-bar (für Tag-Filter, in 3b-2). - PresetCard — Thumbnail + Name + tagSignal-Dot (für Library).

Umbau: EditorView/Sections/ParamSlider → Theme + PhysSlider/PhysSection. Player-Chrome: schwebende Glass-Topbar (Preset-Name + Inspector/Fullscreen-Buttons) über dem Player statt der System-Toolbar. Library → GlassPanel-Overlay mit PresetCards (3b-2 baut die Verwaltung aus; hier erstmal der Look).

Nativ-idiomatisch bleibt: .inspector/Sheet-Mechanik (size-class-adaptiv), echte SwiftUI-Gesten, System-Materialien für Glass, SF-Symbols für Icons.

4. Scope

In: PhysarumTheme + Komponenten-Bibliothek; Editor + Player-Chrome im Web-Look; Library als Card-Overlay (Look). Out (Folge-Increments): volle Preset-Verwaltung (3b-2), Erkundungs-Features (3b-3), gebündelte Web-Fonts (nur falls SF-Mono nicht reicht), iPad/iPhone-compact-Feinschliff (mitgedacht via size classes, separat verifiziert).

5. Verifikation

Build (macOS) + Screenshot-Iteration mit Johannes (Look-Abgleich gegen die Web-App) — bei UI ist Sehen die Abnahme. Engine/App-Tests bleiben grün.