Files

Matthias Meister 456b910532 feat(docs): update LemonSpace manifest and PRD for v2.0 release

- Updated version from v1.5 to v2.0 in both the LemonSpace Manifest and PRD documents.
- Expanded Phase 1 scope to include video and asset nodes, and integrated non-destructive image editing capabilities.
- Enhanced node taxonomy to reflect 6 categories with 27 node types.
- Added details on offline sync features and optimistic updates in the documentation.
- Improved clarity and structure of the product vision and problem statement sections.

2026-04-06 22:27:21 +02:00

2.5 KiB

Raw Blame History

components/ui/ — Design System

ShadCN-Komponenten mit LemonSpace-spezifischen Anpassungen. Neue UI-Primitive immer hier ablegen.

Stack

ShadCN UI — Komponentenbibliothek (copy-paste, nicht installiertes Paket)
Tailwind CSS v4 — Utility-first, config in globals.css (kein tailwind.config.ts in v4)
Manrope — Primäre Schrift (--font-sans), geladen via next/font/google

Design-Token-Konventionen

Tokens folgen dem Manifest: Teal-Primary, warme Neutraltöne (Sand/Beige), Zitronengelb als Akzent.

/* Primärfarbe */
--primary: teal          /* Hauptaktionen, Links, aktive States */

/* Neutraltöne — immer warm tönen */
--background: warm-white  /* Nie kaltes #fff oder gray-50 */
--muted: sand/beige       /* Sekundäre Hintergründe */
--border: warm-gray       /* Niemals kaltes gray-200 */

/* Akzentfarbe */
--accent: lemon-yellow    /* Sparsam einsetzen — Highlights, Badges */

Anti-Pattern: Kalte Grautöne (gray-100, slate-200) ohne Wärme-Anpassung. Immer Richtung Sand/Beige tönen.

Animationen

Übergänge mit exponentiellem Easing (ease-out / cubic-bezier). Keine linearen Transitions.

transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1); /* expo-out */

Neue Komponenten

ShadCN-Komponente mit npx shadcn@latest add <name> hinzufügen
In components/ui/ ablegen (automatisch durch ShadCN-CLI)
Anpassungen direkt in der Komponente — keine separaten Override-Dateien
Token-Konventionen aus globals.css verwenden, keine Hardcoded-Farben

Layout-Komponenten

Komponente	Pfad	Verwendung
`resizable`	`components/ui/resizable.tsx`	Sidebar-Resizing in Canvas
`dialog`	`components/ui/dialog.tsx`	Confirmations, Popovers
`popover`	`components/ui/popover.tsx`	Dropdowns, Kontext-Menüs
`badge`	`components/ui/badge.tsx`	Status-Tags, Badges
`tooltip`	`components/ui/tooltip.tsx`	Explainer-Texte
`separator`	`components/ui/separator.tsx`	Trennungen

ShadCN Integration

ShadCN-Komponenten werden nicht als npm-Paket installiert, sondern als Copy-Paste in das Projekt kopiert. Dies ermöglicht volle Kontrolle über die Implementierung und Anpassung an die LemonSpace-Design-Systeme.

Standard-Prozess:

npx shadcn@latest add button
npx shadcn@latest add input
# ... andere Komponenten

Komponenten werden direkt in components/ui/ abgelegt. Lokale Anpassungen erfolgen durch Überladen von Props oder direkt in der Komponentendatei.

2.5 KiB Raw Blame History