Workspace-Kopie in packages/shared-ui synchronisiert mit mana@1dc8a98 (Compat-Layer für alle v0.1.x-Patterns). 219 Files geändert — alter Code (Charts, Quick-Input-Originale, Help, Onboarding, Settings, Bottom-Stack, Search-Core, ColorPicker, Actions) entfällt; neue v1.0.0-Komponenten kommen rein. tsconfig.json self-contained (kein extends auf nicht-existierenden managarten/tsconfig.base.json). pnpm check ergibt jetzt 0 Errors über alle 10086 Files (Stand vorher: 204 Errors mit dem unverarbeiteten Sync). Zwei non-blocking Warnings stehen offen (SSR-nested-button bei TagChip, ARIA-Role bei Pill mit click-handler). AppSlider toter Code in apps/mana/apps/web/src/lib/components/ AppSlider.svelte entfernt — der Wrapper hatte keine Aufrufer mehr. mana-internal Configs (Storybook, lost-pixel, vite.config, Dockerfile, infrastructure, PORTING_PLAN.md) bewusst NICHT gesynced — die wandern nur im mana-Repo. managarten-shared-ui ist eingefrorene Kopie, kein publish-target. scripts/validate-disziplin.mjs: ungenutzte lines-Variable entfernt (ESLint no-unused-vars).
3 KiB
@mana/shared-ui
Vereins-UI-Komponenten — Svelte 5, strikte 12-Token-Disziplin nach
mana/docs/THEMING.md. Konsumiert von allen
mana-e.V.-Apps (managarten, zitare, nutriphi, wordeck, manawald, …).
Stand: v1.0.0 (2026-05-21). Konsolidiert aus
shared-ui@0.1.x+shared-ui-2@0.1.x. Ehemalige Doppel-Bibliothek ist Geschichte — eine UI-Foundation, ein Disziplin-Set, ein Verzeichnis.
Disziplin
- Styles ausschließlich in
<style>-Block. Keine Tailwind-Utility-Klassen für Farben (bg-card,text-foreground). Layout-Klassen (flex,gap-2) sind okay, wenn der Konsument Tailwind nutzt. - Nur die 12 Tokens aus
THEMING.md:background, foreground, surface, surface-hover, muted, muted-foreground, border, primary, primary-foreground, error, success, warning. Kein 13. Token. Sub-Tokens werden viacolor-mix(in srgb, var(--color-surface) 95%, var(--color-foreground))oder Alpha-Modifier (hsl(var(--color-primary) / 0.12)) gelöst. hsl()-Wrap immer.color: hsl(var(--color-foreground)), nie barevar(--color-X).- Keine Hex-Farben außer in der
--brand-*-Schicht (für App-Brand-Identität, NICHT für Theme-Tokens). - Phosphor-Icons sind raus.
DynamicIcon(40+ Inline-SVGs, 16×16, currentColor, stroke 1.4-1.6) ersetzt die phosphor-svelte-Peer-Dep. Komponenten die in v0.x nochicon: Componenthatten, akzeptieren in v1.0.0 nur nochiconSvg: string. - A11y-Pflichten: ARIA-Labels für Icon-Buttons, semantisches HTML,
:focus-visiblemit sichtbarem Outline, keyboard-Navigation. - Storybook + Lost-Pixel für die Komponenten, die diese Disziplin
schon mit Stories+Baseline belegt haben (siehe
PORTING_PLAN.md, Status ✅ vs 🚧).
Installation
pnpm add @mana/shared-ui
Voraussetzung: 12 Tokens aus
@mana/themes (oder eigene Variant) im
<html data-theme="...">-Kontext aktiv.
Nutzung
<script>
import { Button, Card, Badge } from '@mana/shared-ui/atoms';
import { PillTabGroup, PillDropdown } from '@mana/shared-ui/navigation';
import { Modal, ContextMenu, NotificationBar } from '@mana/shared-ui/organisms';
import { dragSource, dropTarget } from '@mana/shared-ui/dnd';
</script>
Tests
pnpm validate # Disziplin-Validator (12-Token-Allowlist, hsl-wrap-Pflicht)
pnpm storybook # Storybook auf :6006
pnpm test:visual # Lost-Pixel-Run gegen Baseline
pnpm test:visual:update # Baseline aktualisieren (nach bewusster Änderung)
Vorgeschichte
v0.1.1 (alt, organisch über 3 Jahre gewachsen) und v0.1.0 als
shared-ui-2 (Greenfield-Refactor seit 2026-05-09) liefen 12 Tage
parallel. Konsolidierung am 2026-05-21: alle 12 zusätzlich benötigten
Komponenten portiert, AppSlider als tot identifiziert, alte v1
vollständig durch v2-Code ersetzt, Paket-Name zurück auf
@mana/shared-ui. Details: Phasen-Log in
PORTING_PLAN.md.