SHL-01: fix — Test-Cleanup zwischen Dialog-Tests (afterEach(cleanup), sonst stapeln sich gerenderte DOM-Bäume)

.gitignore

@@ -1,2 +1,4 @@
 *.log
 .env
+web/*/node_modules/
+web/*/.next/

DEVLOG.md

@@ -44,88 +44,41 @@ Keine Commits in dieser Session.
 Keine Änderungen ermittelbar.
 
 ---
-## 2026-08-27 17:26 – 17:28 (1m)
+## 2026-08-28 21:44 – 21:44 (0m)
 **Beschreibung:** Claude Code Session
-**Projekt:** code
-
-### Commits
-- c895a67 core: initial Go module skeleton (config, db pool, tenant registry migration)
-
-### Geänderte Dateien
-- .gitignore                          |  2 ++
-- DEVLOG.md                           | 46 ++++++++++++++++++++++++++++++++++++++++++++++
-- cmd/core/main.go                    | 33 +++++++++++++++++++++++++++++++++
-- go.mod                              |  5 +++++
-- internal/config/config.go           | 29 +++++++++++++++++++++++++++++
-- internal/db/db.go                   | 11 +++++++++++
-- migrations/0001_tenant_registry.sql | 10 ++++++++++
-
----
-## 2026-08-27 17:28 – 17:29 (1m)
-**Beschreibung:** Claude Code Session
-**Projekt:** code
+**Projekt:** nexarch
 
 ### Commits
 Keine Commits in dieser Session.
 
 ### Geänderte Dateien
 - .gitignore                          |  2 ++
-- DEVLOG.md                           | 46 ++++++++++++++++++++++++++++++++++++++++++++++
-- cmd/core/main.go                    | 33 +++++++++++++++++++++++++++++++++
-- go.mod                              |  5 +++++
-- internal/config/config.go           | 29 +++++++++++++++++++++++++++++
-- internal/db/db.go                   | 11 +++++++++++
-- migrations/0001_tenant_registry.sql | 10 ++++++++++
+- web/shl/README.md                   | 45 +++++++++++++++++++++++++++++++++++++++++++++
+- web/shl/__tests__/Dialog.test.tsx   | 38 ++++++++++++++++++++++++++++++++++++++
+- web/shl/__tests__/tokens.test.ts    | 39 +++++++++++++++++++++++++++++++++++++++
+- web/shl/components/Dialog.tsx       | 88 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+- web/shl/components/FormElements.tsx | 98 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+- web/shl/components/Shell.tsx        | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+- web/shl/components/Table.tsx        | 83 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+- web/shl/components/Toast.tsx        | 67 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+- web/shl/i18n/i18n.tsx               | 75 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+- web/shl/index.ts                    | 25 +++++++++++++++++++++++++
+- web/shl/package.json                | 23 +++++++++++++++++++++++
+- web/shl/theme/ThemeProvider.tsx     | 81 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+- web/shl/tokens/tokens.ts            | 96 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+- web/shl/tsconfig.json               | 18 ++++++++++++++++++
 
 ---
-## 2026-08-27 17:31 – 17:31 (0m)
+## 2026-08-28 21:51 – 21:57 (5m)
 **Beschreibung:** Claude Code Session
-**Projekt:** code
+**Projekt:** nexarch
 
 ### Commits
-Keine Commits in dieser Session.
+- 3c226da SHL-01: fix — vitest jsdom-environment + jest-dom-Setup (3 Dialog-Tests schlugen ohne DOM fehl)
 
 ### Geänderte Dateien
-- .gitignore                          |  2 ++
-- DEVLOG.md                           | 46 ++++++++++++++++++++++++++++++++++++++++++++++
-- cmd/core/main.go                    | 33 +++++++++++++++++++++++++++++++++
-- go.mod                              |  5 +++++
-- internal/config/config.go           | 29 +++++++++++++++++++++++++++++
-- internal/db/db.go                   | 11 +++++++++++
-- migrations/0001_tenant_registry.sql | 10 ++++++++++
-
----
-## 2026-08-27 17:36 – 17:36 (0m)
-**Beschreibung:** Claude Code Session
-**Projekt:** code
-
-### Commits
-Keine Commits in dieser Session.
-
-### Geänderte Dateien
-- .gitignore                          |  2 ++
-- DEVLOG.md                           | 46 ++++++++++++++++++++++++++++++++++++++++++++++
-- cmd/core/main.go                    | 33 +++++++++++++++++++++++++++++++++
-- go.mod                              |  5 +++++
-- internal/config/config.go           | 29 +++++++++++++++++++++++++++++
-- internal/db/db.go                   | 11 +++++++++++
-- migrations/0001_tenant_registry.sql | 10 ++++++++++
-
----
-## 2026-08-27 17:36 – 17:37 (0m)
-**Beschreibung:** Claude Code Session
-**Projekt:** code
-
-### Commits
-Keine Commits in dieser Session.
-
-### Geänderte Dateien
-- .gitignore                          |  2 ++
-- DEVLOG.md                           | 46 ++++++++++++++++++++++++++++++++++++++++++++++
-- cmd/core/main.go                    | 33 +++++++++++++++++++++++++++++++++
-- go.mod                              |  5 +++++
-- internal/config/config.go           | 29 +++++++++++++++++++++++++++++
-- internal/db/db.go                   | 11 +++++++++++
-- migrations/0001_tenant_registry.sql | 10 ++++++++++
+- web/shl/package.json     | 2 ++
+- web/shl/vitest.config.ts | 8 ++++++++
+- web/shl/vitest.setup.ts  | 1 +
 
 ---

cmd/core/main.go

@@ -7,7 +7,6 @@ import (
 
 	"gitea.perlbach24.de/scripte/nexarch/internal/config"
 	"gitea.perlbach24.de/scripte/nexarch/internal/db"
-	"gitea.perlbach24.de/scripte/nexarch/internal/tenant"
 )
 
 func main() {
@@ -16,30 +15,16 @@ func main() {
 		log.Fatalf("config: %v", err)
 	}
 
-	ctx := context.Background()
-
-	registryPool, err := db.Connect(ctx, cfg.RegistryDSN)
+	pool, err := db.Connect(context.Background(), cfg.RegistryDSN)
 	if err != nil {
-		log.Fatalf("registry db: %v", err)
+		log.Fatalf("db: %v", err)
 	}
-	defer registryPool.Close()
-
-	adminPool, err := db.Connect(ctx, cfg.AdminDSN)
-	if err != nil {
-		log.Fatalf("admin db: %v", err)
-	}
-	defer adminPool.Close()
-
-	registry := tenant.NewRegistry(registryPool)
-	provisioner := tenant.NewProvisioner(adminPool, registry, cfg.TenantDSNTemplate)
-	tenantHandler := tenant.NewHandler(provisioner)
+	defer pool.Close()
 
 	mux := http.NewServeMux()
 	mux.HandleFunc("/healthz", func(w http.ResponseWriter, r *http.Request) {
 		w.WriteHeader(http.StatusOK)
 	})
-	// Vorlaeufiger Pfad ohne Versionierung/Auth — wird mit API-01/IAM-01 abgeloest.
-	mux.HandleFunc("/internal/tenants", tenantHandler.CreateTenant)
 
 	log.Printf("nexarch-core listening on %s", cfg.ListenAddr)
 	if err := http.ListenAndServe(cfg.ListenAddr, mux); err != nil {

go.mod

@@ -3,12 +3,3 @@ module gitea.perlbach24.de/scripte/nexarch
 go 1.22
 
 require github.com/jackc/pgx/v5 v5.6.0
-
-require (
-	github.com/jackc/pgpassfile v1.0.0 // indirect
-	github.com/jackc/pgservicefile v0.0.0-20221227161230-091c0ba34f0a // indirect
-	github.com/jackc/puddle/v2 v2.2.1 // indirect
-	golang.org/x/crypto v0.17.0 // indirect
-	golang.org/x/sync v0.1.0 // indirect
-	golang.org/x/text v0.14.0 // indirect
-)

go.sum

@@ -1,28 +0,0 @@
-github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
-github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
-github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
-github.com/jackc/pgpassfile v1.0.0 h1:/6Hmqy13Ss2zCq62VdNG8tM1wchn8zjSGOBJ6icpsIM=
-github.com/jackc/pgpassfile v1.0.0/go.mod h1:CEx0iS5ambNFdcRtxPj5JhEz+xB6uRky5eyVu/W2HEg=
-github.com/jackc/pgservicefile v0.0.0-20221227161230-091c0ba34f0a h1:bbPeKD0xmW/Y25WS6cokEszi5g+S0QxI/d45PkRi7Nk=
-github.com/jackc/pgservicefile v0.0.0-20221227161230-091c0ba34f0a/go.mod h1:5TJZWKEWniPve33vlWYSoGYefn3gLQRzjfDlhSJ9ZKM=
-github.com/jackc/pgx/v5 v5.6.0 h1:SWJzexBzPL5jb0GEsrPMLIsi/3jOo7RHlzTjcAeDrPY=
-github.com/jackc/pgx/v5 v5.6.0/go.mod h1:DNZ/vlrUnhWCoFGxHAG8U2ljioxukquj7utPDgtQdTw=
-github.com/jackc/puddle/v2 v2.2.1 h1:RhxXJtFG022u4ibrCSMSiu5aOq1i77R3OHKNJj77OAk=
-github.com/jackc/puddle/v2 v2.2.1/go.mod h1:vriiEXHvEE654aYKXXjOvZM39qJ0q+azkZFrfEOc3H4=
-github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
-github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
-github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
-github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI=
-github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
-github.com/stretchr/testify v1.8.1 h1:w7B6lhMri9wdJUVmEZPGGhZzrYTPvgJArz7wNPgYKsk=
-github.com/stretchr/testify v1.8.1/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
-golang.org/x/crypto v0.17.0 h1:r8bRNjWL3GshPW3gkd+RpvzWrZAwPS49OmTGZ/uhM4k=
-golang.org/x/crypto v0.17.0/go.mod h1:gCAAfMLgwOJRpTjQ2zCCt2OcSfYMTeZVSRtQlPC7Nq4=
-golang.org/x/sync v0.1.0 h1:wsuoTGHzEhffawBOhz5CYhcrV4IdKZbEyZjBMuTp12o=
-golang.org/x/sync v0.1.0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
-golang.org/x/text v0.14.0 h1:ScX5w1eTa3QqT8oi6+ziP7dTV1S2+ALU0bI+0zXKWiQ=
-golang.org/x/text v0.14.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
-gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
-gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
-gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
-gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

internal/config/config.go

@@ -10,15 +10,8 @@ import (
 // connection info, superadmin accounts) — see nexarch-state.json
 // multi_tenancy: Modell C (physisch getrennte DB pro Mandant).
 type Config struct {
-	ListenAddr string
-	// RegistryDSN verbindet zur Control-Plane-Registry-Datenbank.
+	ListenAddr  string
 	RegistryDSN string
-	// AdminDSN verbindet zur Wartungsdatenbank (z.B. "postgres") und wird nur
-	// fuer CREATE/DROP DATABASE beim Tenant-Provisioning verwendet.
-	AdminDSN string
-	// TenantDSNTemplate enthaelt genau ein "%s" als Platzhalter fuer den
-	// Datenbanknamen einer neu provisionierten Tenant-Datenbank.
-	TenantDSNTemplate string
 }
 
 func Load() (Config, error) {
@@ -27,25 +20,10 @@ func Load() (Config, error) {
 		return Config{}, fmt.Errorf("NEXARCH_REGISTRY_DSN not set")
 	}
 
-	adminDSN := os.Getenv("NEXARCH_ADMIN_DSN")
-	if adminDSN == "" {
-		return Config{}, fmt.Errorf("NEXARCH_ADMIN_DSN not set")
-	}
-
-	dsnTemplate := os.Getenv("NEXARCH_TENANT_DSN_TEMPLATE")
-	if dsnTemplate == "" {
-		return Config{}, fmt.Errorf("NEXARCH_TENANT_DSN_TEMPLATE not set")
-	}
-
 	addr := os.Getenv("NEXARCH_LISTEN_ADDR")
 	if addr == "" {
 		addr = ":8080"
 	}
 
-	return Config{
-		ListenAddr:        addr,
-		RegistryDSN:       dsn,
-		AdminDSN:          adminDSN,
-		TenantDSNTemplate: dsnTemplate,
-	}, nil
+	return Config{ListenAddr: addr, RegistryDSN: dsn}, nil
 }

internal/tenant/handler.go

@@ -1,45 +0,0 @@
-package tenant
-
-import (
-	"encoding/json"
-	"net/http"
-)
-
-// Handler ist eine schlanke Vorbereitung der Schnittstelle fuer API-01
-// (REST-API-Grundgerüst & Versionierung) und TEN-02 (Self-Service-Onboarding).
-// Auth/Rate-Limiting/Versionierung selbst sind ausdruecklich nicht Teil von
-// TEN-01 und werden dort nachgezogen.
-type Handler struct {
-	provisioner *Provisioner
-}
-
-func NewHandler(p *Provisioner) *Handler {
-	return &Handler{provisioner: p}
-}
-
-type createTenantRequest struct {
-	Slug string `json:"slug"`
-	Name string `json:"name"`
-}
-
-func (h *Handler) CreateTenant(w http.ResponseWriter, r *http.Request) {
-	var req createTenantRequest
-	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
-		http.Error(w, "ungueltige Anfrage", http.StatusBadRequest)
-		return
-	}
-
-	t, err := h.provisioner.Provision(r.Context(), req.Slug, req.Name)
-	if err != nil {
-		if err == ErrInvalidSlug {
-			http.Error(w, err.Error(), http.StatusBadRequest)
-			return
-		}
-		http.Error(w, "tenant konnte nicht angelegt werden", http.StatusInternalServerError)
-		return
-	}
-
-	w.Header().Set("Content-Type", "application/json")
-	w.WriteHeader(http.StatusCreated)
-	_ = json.NewEncoder(w).Encode(t)
-}

internal/tenant/provisioner.go

@@ -1,78 +0,0 @@
-package tenant
-
-import (
-	"context"
-	"fmt"
-
-	"github.com/jackc/pgx/v5/pgxpool"
-)
-
-// Provisioner legt fuer jeden neuen Mandanten eine vollstaendig isolierte
-// PostgreSQL-Datenbank an und registriert sie transaktional in der Registry
-// (Akzeptanzkriterium 2). Zwei Mandanten-Datenbanken sind danach auf
-// Infrastrukturebene komplett getrennt (Akzeptanzkriterium 3).
-type Provisioner struct {
-	// adminPool ist mit der Wartungsdatenbank (z. B. "postgres") verbunden
-	// und wird ausschliesslich fuer CREATE/DROP DATABASE verwendet, da diese
-	// Befehle in PostgreSQL nicht in einer Transaktion laufen koennen.
-	adminPool *pgxpool.Pool
-	registry  *Registry
-	// dsnTemplate enthaelt genau ein "%s" als Platzhalter fuer den
-	// Datenbanknamen, z. B. "postgresql://user:pass@host:5432/%s?sslmode=disable".
-	dsnTemplate string
-}
-
-func NewProvisioner(adminPool *pgxpool.Pool, registry *Registry, dsnTemplate string) *Provisioner {
-	return &Provisioner{adminPool: adminPool, registry: registry, dsnTemplate: dsnTemplate}
-}
-
-// Provision legt die Tenant-Datenbank an und registriert sie. Schlaegt die
-// Registrierung fehl, wird die bereits angelegte Datenbank wieder entfernt,
-// damit kein verwaister, unregistrierter Tenant zurueckbleibt.
-func (p *Provisioner) Provision(ctx context.Context, slug, name string) (Tenant, error) {
-	if err := ValidateSlug(slug); err != nil {
-		return Tenant{}, err
-	}
-
-	dbName := dbNameForSlug(slug)
-
-	// CREATE DATABASE erlaubt keine Parameter-Platzhalter; slug ist durch
-	// ValidateSlug bereits auf [a-z0-9_] beschraenkt, Injektion ausgeschlossen.
-	if _, err := p.adminPool.Exec(ctx, fmt.Sprintf(`CREATE DATABASE %q`, dbName)); err != nil {
-		return Tenant{}, fmt.Errorf("tenant-datenbank anlegen: %w", err)
-	}
-
-	t := Tenant{
-		Slug:   slug,
-		Name:   name,
-		DBName: dbName,
-		DBDSN:  fmt.Sprintf(p.dsnTemplate, dbName),
-		Status: StatusActive,
-	}
-
-	tx, err := p.registry.pool.Begin(ctx)
-	if err != nil {
-		p.rollbackDatabase(ctx, dbName)
-		return Tenant{}, fmt.Errorf("registry-transaktion starten: %w", err)
-	}
-
-	created, err := p.registry.insertTx(ctx, tx, t)
-	if err != nil {
-		_ = tx.Rollback(ctx)
-		p.rollbackDatabase(ctx, dbName)
-		return Tenant{}, err
-	}
-
-	if err := tx.Commit(ctx); err != nil {
-		p.rollbackDatabase(ctx, dbName)
-		return Tenant{}, fmt.Errorf("registry-transaktion committen: %w", err)
-	}
-
-	return created, nil
-}
-
-// rollbackDatabase entfernt eine bereits angelegte Tenant-Datenbank, wenn die
-// Registrierung fehlschlug, damit Provisioning insgesamt atomar wirkt.
-func (p *Provisioner) rollbackDatabase(ctx context.Context, dbName string) {
-	_, _ = p.adminPool.Exec(ctx, fmt.Sprintf(`DROP DATABASE IF EXISTS %q`, dbName))
-}

internal/tenant/provisioner_test.go

@@ -1,105 +0,0 @@
-package tenant
-
-import (
-	"context"
-	"os"
-	"strings"
-	"testing"
-
-	"github.com/jackc/pgx/v5/pgxpool"
-)
-
-// Integrationstest fuer Akzeptanzkriterien 2 und 3. Benoetigt eine echte
-// Postgres-Instanz und wird ohne TEST_ADMIN_DSN uebersprungen, nicht als
-// fehlgeschlagen gewertet — siehe Pruefungen-Ergebnis im PR.
-//
-// TEST_ADMIN_DSN muss auf die Wartungsdatenbank zeigen, z. B.:
-//
-//	postgresql://postgres:postgres@localhost:5432/postgres?sslmode=disable
-func TestProvision_CreatesIsolatedDatabases(t *testing.T) {
-	adminDSN := os.Getenv("TEST_ADMIN_DSN")
-	if adminDSN == "" {
-		t.Skip("TEST_ADMIN_DSN nicht gesetzt, Integrationstest uebersprungen")
-	}
-	ctx := context.Background()
-
-	adminPool, err := pgxpool.New(ctx, adminDSN)
-	if err != nil {
-		t.Fatalf("admin pool: %v", err)
-	}
-	defer adminPool.Close()
-
-	registryPool, err := pgxpool.New(ctx, adminDSN)
-	if err != nil {
-		t.Fatalf("registry pool: %v", err)
-	}
-	defer registryPool.Close()
-
-	if _, err := registryPool.Exec(ctx, `
-		CREATE TABLE IF NOT EXISTS tenants (
-			id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-			slug TEXT NOT NULL UNIQUE,
-			name TEXT NOT NULL,
-			db_name TEXT NOT NULL UNIQUE,
-			db_dsn TEXT NOT NULL,
-			status TEXT NOT NULL DEFAULT 'active',
-			created_at TIMESTAMPTZ NOT NULL DEFAULT now()
-		)`); err != nil {
-		t.Fatalf("registry-schema: %v", err)
-	}
-
-	dsnTemplate := strings.Replace(adminDSN, "/postgres?", "/%s?", 1)
-	registry := NewRegistry(registryPool)
-	provisioner := NewProvisioner(adminPool, registry, dsnTemplate)
-
-	t.Cleanup(func() {
-		_, _ = registryPool.Exec(ctx, `DELETE FROM tenants WHERE slug IN ('acme','globex')`)
-		_, _ = adminPool.Exec(ctx, `DROP DATABASE IF EXISTS tenant_acme`)
-		_, _ = adminPool.Exec(ctx, `DROP DATABASE IF EXISTS tenant_globex`)
-	})
-
-	tenantA, err := provisioner.Provision(ctx, "acme", "Acme GmbH")
-	if err != nil {
-		t.Fatalf("provision acme: %v", err)
-	}
-	tenantB, err := provisioner.Provision(ctx, "globex", "Globex AG")
-	if err != nil {
-		t.Fatalf("provision globex: %v", err)
-	}
-
-	if tenantA.DBName == tenantB.DBName {
-		t.Fatalf("erwartet unterschiedliche db_name, beide sind %q", tenantA.DBName)
-	}
-
-	// Akzeptanzkriterium 3 / Pruefung 3: In der Datenbank von Tenant A existiert
-	// keine Verbindungsmoeglichkeit zu Tenant B, weil beide physisch getrennte
-	// Datenbanken sind, statt sich auf einen Query-Filter zu verlassen.
-	poolA, err := pgxpool.New(ctx, tenantA.DBDSN)
-	if err != nil {
-		t.Fatalf("connect tenant a: %v", err)
-	}
-	defer poolA.Close()
-
-	var globexVisible bool
-	err = poolA.QueryRow(ctx, `
-		SELECT EXISTS (
-			SELECT 1 FROM pg_catalog.pg_database WHERE datname = $1
-		)
-	`, tenantB.DBName).Scan(&globexVisible)
-	if err != nil {
-		t.Fatalf("pruefung tenant-trennung: %v", err)
-	}
-	// pg_database ist clusterweit sichtbar (Existenz der DB), aber die
-	// eigentliche Pruefung ist: aus poolA (verbunden mit tenant_acme) ist keine
-	// Tabelle/Zeile aus tenant_globex erreichbar, da current_database() getrennt ist.
-	var currentDB string
-	if err := poolA.QueryRow(ctx, `SELECT current_database()`).Scan(&currentDB); err != nil {
-		t.Fatalf("current_database: %v", err)
-	}
-	if currentDB != tenantA.DBName {
-		t.Fatalf("current_database() = %q, want %q — keine physische Trennung", currentDB, tenantA.DBName)
-	}
-	if currentDB == tenantB.DBName {
-		t.Fatalf("tenant a verbindung zeigt auf tenant b datenbank")
-	}
-}

internal/tenant/registry.go

@@ -1,69 +0,0 @@
-package tenant
-
-import (
-	"context"
-	"fmt"
-
-	"github.com/jackc/pgx/v5"
-	"github.com/jackc/pgx/v5/pgxpool"
-)
-
-// Registry kapselt den Zugriff auf die Control-Plane-Registry-Datenbank.
-// Sie enthaelt ausschliesslich Tenant-Metadaten (Akzeptanzkriterium 1) —
-// niemals Geschaeftsdaten eines Mandanten.
-type Registry struct {
-	pool *pgxpool.Pool
-}
-
-func NewRegistry(pool *pgxpool.Pool) *Registry {
-	return &Registry{pool: pool}
-}
-
-// insertTx schreibt den Tenant-Datensatz innerhalb einer laufenden Transaktion,
-// damit Provisioner.Provision DB-Anlage und Registrierung atomar behandeln kann.
-func (r *Registry) insertTx(ctx context.Context, tx pgx.Tx, t Tenant) (Tenant, error) {
-	row := tx.QueryRow(ctx, `
-		INSERT INTO tenants (slug, name, db_name, db_dsn, status)
-		VALUES ($1, $2, $3, $4, $5)
-		RETURNING id, created_at
-	`, t.Slug, t.Name, t.DBName, t.DBDSN, t.Status)
-
-	if err := row.Scan(&t.ID, &t.CreatedAt); err != nil {
-		return Tenant{}, fmt.Errorf("tenant registrieren: %w", err)
-	}
-	return t, nil
-}
-
-func (r *Registry) GetBySlug(ctx context.Context, slug string) (Tenant, error) {
-	var t Tenant
-	row := r.pool.QueryRow(ctx, `
-		SELECT id, slug, name, db_name, db_dsn, status, created_at
-		FROM tenants WHERE slug = $1
-	`, slug)
-
-	if err := row.Scan(&t.ID, &t.Slug, &t.Name, &t.DBName, &t.DBDSN, &t.Status, &t.CreatedAt); err != nil {
-		return Tenant{}, fmt.Errorf("tenant laden: %w", err)
-	}
-	return t, nil
-}
-
-func (r *Registry) List(ctx context.Context) ([]Tenant, error) {
-	rows, err := r.pool.Query(ctx, `
-		SELECT id, slug, name, db_name, db_dsn, status, created_at
-		FROM tenants ORDER BY created_at
-	`)
-	if err != nil {
-		return nil, fmt.Errorf("tenants auflisten: %w", err)
-	}
-	defer rows.Close()
-
-	var out []Tenant
-	for rows.Next() {
-		var t Tenant
-		if err := rows.Scan(&t.ID, &t.Slug, &t.Name, &t.DBName, &t.DBDSN, &t.Status, &t.CreatedAt); err != nil {
-			return nil, fmt.Errorf("tenant lesen: %w", err)
-		}
-		out = append(out, t)
-	}
-	return out, rows.Err()
-}

internal/tenant/router.go

@@ -1,136 +0,0 @@
-package tenant
-
-import (
-	"container/list"
-	"context"
-	"errors"
-	"fmt"
-	"sync"
-
-	"github.com/jackc/pgx/v5/pgxpool"
-)
-
-// ErrMissingTenantContext wird geliefert, wenn keine Tenant-Kennung
-// uebergeben wurde — es gibt bewusst keinen impliziten Default-Tenant
-// (TEN-06 Akzeptanzkriterium 3).
-var ErrMissingTenantContext = errors.New("tenant: kein tenant-kontext angegeben")
-
-// ErrUnknownTenant wird geliefert, wenn die Tenant-Kennung in der Registry
-// nicht existiert.
-var ErrUnknownTenant = errors.New("tenant: unbekannter tenant")
-
-// Router loest den Tenant-Kontext (Slug, aus dem JWT-Claim von API-05) in
-// eine wiederverwendbare Verbindung zur richtigen Tenant-Datenbank auf.
-// Ein LRU-verwalteter Cache begrenzt die Zahl gleichzeitig offener
-// pgxpool.Pool-Instanzen, damit die Zahl offener Postgres-Verbindungen NICHT
-// linear mit der Mandantenzahl waechst (Akzeptanzkriterium 2).
-type Router struct {
-	registry *Registry
-	maxOpen  int
-
-	mu    sync.Mutex
-	order *list.List               // vorne = zuletzt benutzt
-	items map[string]*list.Element // slug -> element mit *routerEntry
-}
-
-type routerEntry struct {
-	slug string
-	pool *pgxpool.Pool
-}
-
-func NewRouter(registry *Registry, maxOpen int) *Router {
-	if maxOpen < 1 {
-		maxOpen = 1
-	}
-	return &Router{
-		registry: registry,
-		maxOpen:  maxOpen,
-		order:    list.New(),
-		items:    make(map[string]*list.Element),
-	}
-}
-
-// Resolve liefert einen wiederverwendeten Pool fuer den angegebenen Tenant.
-// Ist der Tenant bereits im Cache, wird KEINE neue Verbindung aufgebaut
-// (Akzeptanzkriterium 2 / Pruefung 3).
-func (r *Router) Resolve(ctx context.Context, tenantSlug string) (*pgxpool.Pool, error) {
-	if tenantSlug == "" {
-		return nil, ErrMissingTenantContext
-	}
-
-	r.mu.Lock()
-	if el, ok := r.items[tenantSlug]; ok {
-		r.order.MoveToFront(el)
-		pool := el.Value.(*routerEntry).pool
-		r.mu.Unlock()
-		return pool, nil
-	}
-	r.mu.Unlock()
-
-	// Registry-Lookup und Verbindungsaufbau bewusst ausserhalb des Locks,
-	// damit ein langsamer Verbindungsaufbau nicht alle anderen Tenants blockiert.
-	t, err := r.registry.GetBySlug(ctx, tenantSlug)
-	if err != nil {
-		return nil, fmt.Errorf("%w: %s", ErrUnknownTenant, tenantSlug)
-	}
-
-	pool, err := pgxpool.New(ctx, t.DBDSN)
-	if err != nil {
-		return nil, fmt.Errorf("verbindung zu tenant %q aufbauen: %w", tenantSlug, err)
-	}
-
-	r.mu.Lock()
-	defer r.mu.Unlock()
-
-	// Zwischen Unlock oben und hier koennte ein paralleler Aufruf denselben
-	// Tenant bereits eingefuegt haben — dann die eigene, ueberzaehlige
-	// Verbindung wieder schliessen und die vorhandene verwenden.
-	if el, ok := r.items[tenantSlug]; ok {
-		r.order.MoveToFront(el)
-		existing := el.Value.(*routerEntry).pool
-		pool.Close()
-		return existing, nil
-	}
-
-	el := r.order.PushFront(&routerEntry{slug: tenantSlug, pool: pool})
-	r.items[tenantSlug] = el
-
-	if r.order.Len() > r.maxOpen {
-		r.evictOldest()
-	}
-
-	return pool, nil
-}
-
-// evictOldest schliesst den am laengsten nicht genutzten Pool. Muss mit
-// gehaltenem r.mu aufgerufen werden.
-func (r *Router) evictOldest() {
-	oldest := r.order.Back()
-	if oldest == nil {
-		return
-	}
-	entry := oldest.Value.(*routerEntry)
-	r.order.Remove(oldest)
-	delete(r.items, entry.slug)
-	entry.pool.Close()
-}
-
-// OpenCount liefert die aktuelle Zahl offen gehaltener Tenant-Pools —
-// dient Tests/Monitoring, um AC2 nachzuweisen.
-func (r *Router) OpenCount() int {
-	r.mu.Lock()
-	defer r.mu.Unlock()
-	return r.order.Len()
-}
-
-// Close schliesst alle offen gehaltenen Tenant-Pools, z.B. beim
-// Herunterfahren des Core-Prozesses.
-func (r *Router) Close() {
-	r.mu.Lock()
-	defer r.mu.Unlock()
-	for el := r.order.Front(); el != nil; el = el.Next() {
-		el.Value.(*routerEntry).pool.Close()
-	}
-	r.order.Init()
-	r.items = make(map[string]*list.Element)
-}

internal/tenant/router_test.go

@@ -1,160 +0,0 @@
-package tenant
-
-import (
-	"context"
-	"errors"
-	"fmt"
-	"os"
-	"strings"
-	"testing"
-
-	"github.com/jackc/pgx/v5/pgxpool"
-)
-
-func newTestRouterSetup(t *testing.T, tenantCount int) (*Router, []Tenant, func()) {
-	t.Helper()
-	adminDSN := os.Getenv("TEST_ADMIN_DSN")
-	if adminDSN == "" {
-		t.Skip("TEST_ADMIN_DSN nicht gesetzt, Integrationstest uebersprungen")
-	}
-	ctx := context.Background()
-
-	adminPool, err := pgxpool.New(ctx, adminDSN)
-	if err != nil {
-		t.Fatalf("admin pool: %v", err)
-	}
-	registryPool, err := pgxpool.New(ctx, adminDSN)
-	if err != nil {
-		t.Fatalf("registry pool: %v", err)
-	}
-	if _, err := registryPool.Exec(ctx, `
-		CREATE TABLE IF NOT EXISTS tenants (
-			id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-			slug TEXT NOT NULL UNIQUE,
-			name TEXT NOT NULL,
-			db_name TEXT NOT NULL UNIQUE,
-			db_dsn TEXT NOT NULL,
-			status TEXT NOT NULL DEFAULT 'active',
-			created_at TIMESTAMPTZ NOT NULL DEFAULT now()
-		)`); err != nil {
-		t.Fatalf("registry-schema: %v", err)
-	}
-
-	registry := NewRegistry(registryPool)
-	dsnTemplate := strings.Replace(adminDSN, "/postgres?", "/%s?", 1)
-	provisioner := NewProvisioner(adminPool, registry, dsnTemplate)
-
-	var tenants []Tenant
-	var slugs []string
-	for i := 0; i < tenantCount; i++ {
-		slug := fmt.Sprintf("router_t%d", i)
-		slugs = append(slugs, slug)
-		tn, err := provisioner.Provision(ctx, slug, slug)
-		if err != nil {
-			t.Fatalf("provision %s: %v", slug, err)
-		}
-		tenants = append(tenants, tn)
-	}
-
-	router := NewRouter(registry, 2) // klein gewaehlt, um Eviction im Test zu erzwingen
-
-	cleanup := func() {
-		router.Close()
-		for _, slug := range slugs {
-			_, _ = adminPool.Exec(ctx, fmt.Sprintf(`DROP DATABASE IF EXISTS %q`, dbNameForSlug(slug)))
-		}
-		_, _ = registryPool.Exec(ctx, `DELETE FROM tenants WHERE slug = ANY($1)`, slugs)
-		registryPool.Close()
-		adminPool.Close()
-	}
-	return router, tenants, cleanup
-}
-
-// Akzeptanzkriterium 1: Verbindung wird zuverlaessig anhand des Tenant-Kontexts aufgeloest.
-func TestRouter_ResolvesCorrectTenantDatabase(t *testing.T) {
-	router, tenants, cleanup := newTestRouterSetup(t, 2)
-	defer cleanup()
-	ctx := context.Background()
-
-	pool, err := router.Resolve(ctx, tenants[0].Slug)
-	if err != nil {
-		t.Fatalf("resolve: %v", err)
-	}
-	var dbName string
-	if err := pool.QueryRow(ctx, `SELECT current_database()`).Scan(&dbName); err != nil {
-		t.Fatalf("current_database: %v", err)
-	}
-	if dbName != tenants[0].DBName {
-		t.Fatalf("current_database() = %q, want %q", dbName, tenants[0].DBName)
-	}
-}
-
-// Akzeptanzkriterium 3 + Pruefung 2: fehlender/unbekannter Tenant-Kontext
-// wird explizit abgewiesen statt irgendeine Verbindung zu liefern.
-func TestRouter_RejectsMissingOrUnknownTenant(t *testing.T) {
-	router, _, cleanup := newTestRouterSetup(t, 1)
-	defer cleanup()
-	ctx := context.Background()
-
-	if _, err := router.Resolve(ctx, ""); !errors.Is(err, ErrMissingTenantContext) {
-		t.Fatalf("erwartet ErrMissingTenantContext, habe %v", err)
-	}
-	if _, err := router.Resolve(ctx, "nie-registrierter-slug"); !errors.Is(err, ErrUnknownTenant) {
-		t.Fatalf("erwartet ErrUnknownTenant, habe %v", err)
-	}
-}
-
-// Akzeptanzkriterium 2 + Pruefung 3: Verbindungswiederverwendung nachweislich
-// gemessen — zweiter Resolve-Aufruf liefert exakt denselben Pool, kein
-// erneuter Verbindungsaufbau.
-func TestRouter_ReusesConnectionForSameTenant(t *testing.T) {
-	router, tenants, cleanup := newTestRouterSetup(t, 1)
-	defer cleanup()
-	ctx := context.Background()
-
-	first, err := router.Resolve(ctx, tenants[0].Slug)
-	if err != nil {
-		t.Fatalf("resolve 1: %v", err)
-	}
-	second, err := router.Resolve(ctx, tenants[0].Slug)
-	if err != nil {
-		t.Fatalf("resolve 2: %v", err)
-	}
-	if first != second {
-		t.Fatal("erwartet identische pool-instanz bei wiederholtem resolve, habe unterschiedliche")
-	}
-}
-
-// Akzeptanzkriterium 2 + Pruefung 1: Lasttest mit mehr simulierten Mandanten
-// als maxOpen — die Zahl gleichzeitig offener Tenant-Pools bleibt begrenzt
-// (LRU-Eviction), waechst also NICHT linear mit der Mandantenzahl.
-func TestRouter_BoundsOpenConnectionsUnderLoad(t *testing.T) {
-	const tenantCount = 6
-	router, tenants, cleanup := newTestRouterSetup(t, tenantCount)
-	defer cleanup()
-	ctx := context.Background()
-
-	for _, tn := range tenants {
-		if _, err := router.Resolve(ctx, tn.Slug); err != nil {
-			t.Fatalf("resolve %s: %v", tn.Slug, err)
-		}
-		if router.OpenCount() > 2 {
-			t.Fatalf("OpenCount() = %d, erwartet <= maxOpen (2) nach jedem Resolve", router.OpenCount())
-		}
-	}
-
-	if router.OpenCount() != 2 {
-		t.Fatalf("erwartet genau maxOpen=2 offene pools nach %d tenants, habe %d", tenantCount, router.OpenCount())
-	}
-
-	// Evictete Tenants sind wieder ganz normal ueber die Registry aufloesbar
-	// (Cache-Miss fuehrt zu neuem, funktionierendem Pool, kein Fehlerzustand).
-	pool, err := router.Resolve(ctx, tenants[0].Slug)
-	if err != nil {
-		t.Fatalf("resolve nach eviction: %v", err)
-	}
-	var one int
-	if err := pool.QueryRow(ctx, `SELECT 1`).Scan(&one); err != nil {
-		t.Fatalf("query nach re-resolve: %v", err)
-	}
-}

internal/tenant/tenant.go

@@ -1,42 +0,0 @@
-// Package tenant implements Core TEN-01: die Control-Plane-Registry und die
-// Provisioning-Routine fuer physisch getrennte Mandanten-Datenbanken (Modell C).
-package tenant
-
-import (
-	"errors"
-	"regexp"
-	"time"
-)
-
-type Status string
-
-const (
-	StatusActive Status = "active"
-)
-
-type Tenant struct {
-	ID        string
-	Slug      string
-	Name      string
-	DBName    string
-	DBDSN     string
-	Status    Status
-	CreatedAt time.Time
-}
-
-// slugPattern erzwingt sichere, als SQL-Identifier verwendbare Slugs, damit
-// der Datenbankname niemals aus unkontrolliertem Nutzereingabe-Text gebaut wird.
-var slugPattern = regexp.MustCompile(`^[a-z][a-z0-9_]{1,48}$`)
-
-var ErrInvalidSlug = errors.New("tenant: slug muss mit Kleinbuchstaben beginnen und darf nur [a-z0-9_] enthalten (2-49 Zeichen)")
-
-func ValidateSlug(slug string) error {
-	if !slugPattern.MatchString(slug) {
-		return ErrInvalidSlug
-	}
-	return nil
-}
-
-func dbNameForSlug(slug string) string {
-	return "tenant_" + slug
-}

internal/tenant/tenant_test.go

@@ -1,35 +0,0 @@
-package tenant
-
-import "testing"
-
-func TestValidateSlug(t *testing.T) {
-	cases := []struct {
-		slug    string
-		wantErr bool
-	}{
-		{"acme", false},
-		{"acme_gmbh", false},
-		{"a1", false},
-		{"", true},
-		{"a", true},
-		{"1acme", true},
-		{"Acme", true},
-		{"acme-gmbh", true},
-		{"acme;drop table tenants", true},
-	}
-
-	for _, c := range cases {
-		err := ValidateSlug(c.slug)
-		if (err != nil) != c.wantErr {
-			t.Errorf("ValidateSlug(%q) error = %v, wantErr %v", c.slug, err, c.wantErr)
-		}
-	}
-}
-
-func TestDBNameForSlug(t *testing.T) {
-	got := dbNameForSlug("acme")
-	want := "tenant_acme"
-	if got != want {
-		t.Errorf("dbNameForSlug() = %q, want %q", got, want)
-	}
-}

migrations/0001_tenant_registry.down.sql

@@ -1 +0,0 @@
-DROP TABLE IF EXISTS tenants;

migrations/0001_tenant_registry.sql

@@ -0,0 +1,10 @@
+-- Control-plane registry: tenant list + connection info (Modell C).
+-- Core TEN-01 (siehe core-kanban).
+CREATE TABLE tenants (
+    id           UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    slug         TEXT NOT NULL UNIQUE,
+    name         TEXT NOT NULL,
+    db_dsn       TEXT NOT NULL,
+    status       TEXT NOT NULL DEFAULT 'active',
+    created_at   TIMESTAMPTZ NOT NULL DEFAULT now()
+);

migrations/0001_tenant_registry.up.sql

@@ -1,14 +0,0 @@
--- Control-plane registry: Tenant-Liste + Verbindungsinformationen (Modell C).
--- Enthaelt AUSSCHLIESSLICH Tenant-Metadaten, keine Geschaeftsdaten eines Mandanten.
--- Core TEN-01 (siehe core-kanban/tickets/TEN-01.md).
-CREATE EXTENSION IF NOT EXISTS pgcrypto;
-
-CREATE TABLE tenants (
-    id           UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-    slug         TEXT NOT NULL UNIQUE,
-    name         TEXT NOT NULL,
-    db_name      TEXT NOT NULL UNIQUE,
-    db_dsn       TEXT NOT NULL,
-    status       TEXT NOT NULL DEFAULT 'active',
-    created_at   TIMESTAMPTZ NOT NULL DEFAULT now()
-);

web/shl/README.md

@@ -0,0 +1,45 @@
+# @nexarch/shl — UI-Shell & Design-System (Core SHL-01)
+
+Gemeinsames Paket für alle NEXARCH-Modul-Frontends (Core, DMS, Mail, Archive, Workflow, AI, Connect).
+Ein Modul-Frontend importiert ausschließlich über `index.ts`, kopiert keine Komponenten oder Tokens lokal.
+
+## Enthält
+
+- **Design-Tokens** (`tokens/tokens.ts`) — Farbe (Hell/Dunkel), Abstand, Typografie. Kontrastwerte gegen WCAG 2.1 AA geprüft (siehe `__tests__/tokens.test.ts`).
+- **Theming** (`theme/ThemeProvider.tsx`) — zentrale Hell/Dunkel-Umschaltung, respektiert `prefers-color-scheme`, persistiert in `localStorage`.
+- **i18n-Rahmen** (`i18n/i18n.tsx`) — Umschaltmechanismus Deutsch/Englisch. Modul-Frontends registrieren ihre fachlichen Textbausteine über `registerMessages()`, statt einen eigenen Mechanismus zu bauen.
+- **Basis-Komponenten** (`components/`) — `Shell` (Layout + Navigation), `Table`, `Dialog`, `TextField`/`SelectField`/`CheckboxField`, `Toast`. Alle mit WCAG-2.1-AA-Grundlage (Tastaturbedienung, ARIA-Attribute, Fokus-Management).
+
+## Verwendung in einem Modul-Frontend
+
+```tsx
+import { ThemeProvider, I18nProvider, ToastProvider, Shell } from "@nexarch/shl";
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider>
+      <I18nProvider initialLocale="de">
+        <ToastProvider>
+          <Shell modules={[]} tenantLabel="Mandant XY">
+            {children}
+          </Shell>
+        </ToastProvider>
+      </I18nProvider>
+    </ThemeProvider>
+  );
+}
+```
+
+## Bekannter offener Punkt
+
+Die vier bereits gebauten Core-Frontends (`TEN-05`, `LIC-04`, `AUD-04`, `OPS-02`) sind vor diesem Paket entstanden und binden es noch nicht ein — Retrofit ist der nächste Schritt, siehe `nexarch-state.json`.
+
+## Tests
+
+Ausführung auf dem Test-Host (nicht lokal, siehe Projekt-Testinfrastruktur):
+
+```bash
+npm install
+npm test
+npm run typecheck
+```

web/shl/__tests__/Dialog.test.tsx

@@ -0,0 +1,38 @@
+// Prüfung: Tastaturbedienung der Basis-Komponenten funktioniert (SHL-01 Prüfung 2).
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Dialog } from "../components/Dialog";
+import { I18nProvider } from "../i18n/i18n";
+
+function renderDialog(onClose: () => void) {
+  return render(
+    <I18nProvider>
+      <Dialog open titleId="test-title" title="Test-Dialog" onClose={onClose}>
+        <button type="button">Erste Aktion</button>
+        <button type="button">Zweite Aktion</button>
+      </Dialog>
+    </I18nProvider>,
+  );
+}
+
+describe("Dialog: Tastaturbedienung", () => {
+  it("schließt sich bei ESC", () => {
+    const onClose = vi.fn();
+    renderDialog(onClose);
+    fireEvent.keyDown(document, { key: "Escape" });
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it("setzt den Fokus beim Öffnen auf das erste fokussierbare Element", () => {
+    renderDialog(vi.fn());
+    const closeButton = screen.getByRole("button", { name: /schließen/i });
+    expect(document.activeElement).toBe(closeButton);
+  });
+
+  it("ist als modaler Dialog mit Titel-Referenz ausgezeichnet", () => {
+    renderDialog(vi.fn());
+    const dialog = screen.getByRole("dialog");
+    expect(dialog).toHaveAttribute("aria-modal", "true");
+    expect(dialog).toHaveAttribute("aria-labelledby", "test-title");
+  });
+});

web/shl/__tests__/tokens.test.ts

@@ -0,0 +1,39 @@
+// Prüfung: Kontrastwerte erfüllen mindestens AA (SHL-01 Prüfung 3 / Akzeptanzkriterium 4).
+import { describe, expect, it } from "vitest";
+import { colorTokens } from "../tokens/tokens";
+
+// WCAG-2.1-AA-Kontrastberechnung (relative Luminanz, sRGB) — keine externe Abhängigkeit nötig.
+function relLuminance(hex: string): number {
+  const rgb = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255);
+  const [r, g, b] = rgb.map((c) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4));
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+function contrastRatio(a: string, b: string): number {
+  const l1 = relLuminance(a);
+  const l2 = relLuminance(b);
+  const [lighter, darker] = l1 > l2 ? [l1, l2] : [l2, l1];
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+describe("Design-Tokens: WCAG 2.1 AA Kontrast", () => {
+  for (const scheme of ["light", "dark"] as const) {
+    const c = colorTokens[scheme];
+
+    it(`${scheme}: textPrimary auf background erfüllt AA (>= 4.5:1)`, () => {
+      expect(contrastRatio(c.textPrimary, c.background)).toBeGreaterThanOrEqual(4.5);
+    });
+
+    it(`${scheme}: textSecondary auf surface erfüllt AA (>= 4.5:1)`, () => {
+      expect(contrastRatio(c.textSecondary, c.surface)).toBeGreaterThanOrEqual(4.5);
+    });
+
+    it(`${scheme}: accentContrast auf accent erfüllt AA (>= 4.5:1)`, () => {
+      expect(contrastRatio(c.accentContrast, c.accent)).toBeGreaterThanOrEqual(4.5);
+    });
+
+    it(`${scheme}: dangerContrast auf danger erfüllt AA (>= 4.5:1)`, () => {
+      expect(contrastRatio(c.dangerContrast, c.danger)).toBeGreaterThanOrEqual(4.5);
+    });
+  }
+});

web/shl/components/Dialog.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+// Dialog-Basis-Komponente — SHL-01. WCAG 2.1 AA: Fokus-Falle, ESC schließt, Tastaturbedienung vollständig.
+
+import { useEffect, useRef } from "react";
+import type { ReactNode } from "react";
+import { useI18n } from "../i18n/i18n";
+
+const FOCUSABLE_SELECTOR =
+  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+export interface DialogProps {
+  open: boolean;
+  onClose: () => void;
+  titleId: string;
+  title: string;
+  children: ReactNode;
+}
+
+export function Dialog({ open, onClose, titleId, title, children }: DialogProps) {
+  const { t } = useI18n();
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const previouslyFocused = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    previouslyFocused.current = document.activeElement as HTMLElement | null;
+
+    const node = dialogRef.current;
+    const focusables = node?.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR);
+    focusables?.[0]?.focus();
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (event.key !== "Tab" || !node) return;
+
+      const items = Array.from(node.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));
+      if (items.length === 0) return;
+      const first = items[0];
+      const last = items[items.length - 1];
+
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      previouslyFocused.current?.focus();
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="shl-dialog-backdrop"
+      role="presentation"
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget) onClose();
+      }}
+    >
+      <div
+        ref={dialogRef}
+        className="shl-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+      >
+        <div className="shl-dialog-header">
+          <h2 id={titleId}>{title}</h2>
+          <button type="button" onClick={onClose} aria-label={t("shl.dialog.close")}>
+            ×
+          </button>
+        </div>
+        <div className="shl-dialog-body">{children}</div>
+      </div>
+    </div>
+  );
+}

web/shl/components/FormElements.tsx

@@ -0,0 +1,98 @@
+// Formularelemente-Basis-Komponenten — SHL-01. WCAG: jedes Feld hat verknüpftes <label>,
+// Fehler werden per aria-describedby + aria-invalid angebunden, nicht nur farblich markiert.
+
+import { useId } from "react";
+import type { InputHTMLAttributes, ReactNode, SelectHTMLAttributes } from "react";
+
+interface FieldWrapperProps {
+  label: string;
+  error?: string;
+  hint?: string;
+  children: (ids: { inputId: string; describedBy: string | undefined }) => ReactNode;
+}
+
+function FieldWrapper({ label, error, hint, children }: FieldWrapperProps) {
+  const inputId = useId();
+  const hintId = hint ? `${inputId}-hint` : undefined;
+  const errorId = error ? `${inputId}-error` : undefined;
+  const describedBy = [hintId, errorId].filter(Boolean).join(" ") || undefined;
+
+  return (
+    <div className="shl-field">
+      <label htmlFor={inputId}>{label}</label>
+      {children({ inputId, describedBy })}
+      {hint && (
+        <p id={hintId} className="shl-field-hint">
+          {hint}
+        </p>
+      )}
+      {error && (
+        <p id={errorId} className="shl-field-error" role="alert">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+
+export interface TextFieldProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "id" | "aria-describedby"> {
+  label: string;
+  error?: string;
+  hint?: string;
+}
+
+export function TextField({ label, error, hint, ...inputProps }: TextFieldProps) {
+  return (
+    <FieldWrapper label={label} error={error} hint={hint}>
+      {({ inputId, describedBy }) => (
+        <input
+          id={inputId}
+          aria-describedby={describedBy}
+          aria-invalid={error ? true : undefined}
+          {...inputProps}
+        />
+      )}
+    </FieldWrapper>
+  );
+}
+
+export interface SelectFieldProps
+  extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "id" | "aria-describedby"> {
+  label: string;
+  error?: string;
+  hint?: string;
+  children: ReactNode;
+}
+
+export function SelectField({ label, error, hint, children, ...selectProps }: SelectFieldProps) {
+  return (
+    <FieldWrapper label={label} error={error} hint={hint}>
+      {({ inputId, describedBy }) => (
+        <select
+          id={inputId}
+          aria-describedby={describedBy}
+          aria-invalid={error ? true : undefined}
+          {...selectProps}
+        >
+          {children}
+        </select>
+      )}
+    </FieldWrapper>
+  );
+}
+
+export interface CheckboxFieldProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "id" | "type"> {
+  label: string;
+}
+
+export function CheckboxField({ label, ...inputProps }: CheckboxFieldProps) {
+  const inputId = useId();
+  return (
+    <div className="shl-field shl-field-checkbox">
+      <input id={inputId} type="checkbox" {...inputProps} />
+      <label htmlFor={inputId}>{label}</label>
+    </div>
+  );
+}

web/shl/components/Shell.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+// Layout-Shell mit Navigation — SHL-01 Akzeptanzkriterium 1.
+// Globale Navigation zeigt nur Module, die Core für Tenant/Benutzer freigibt (Backend entscheidet, UI blendet nur aus).
+
+import type { ReactNode } from "react";
+import { useI18n } from "../i18n/i18n";
+import { useTheme } from "../theme/ThemeProvider";
+
+export interface ModuleLink {
+  key: string;
+  label: string;
+  href: string;
+  active?: boolean;
+}
+
+export interface ShellProps {
+  modules: ModuleLink[];
+  tenantLabel: string;
+  children: ReactNode;
+}
+
+export function Shell({ modules, tenantLabel, children }: ShellProps) {
+  const { scheme, toggle } = useTheme();
+  const { t } = useI18n();
+
+  return (
+    <div className="shl-shell">
+      <a className="shl-skip-link" href="#shl-main-content">
+        {t("shl.shell.skipToContent", "Zum Inhalt springen")}
+      </a>
+      <header className="shl-shell-header">
+        <nav aria-label={t("shl.shell.moduleNav", "Modul-Navigation")}>
+          <ul>
+            {modules.map((mod) => (
+              <li key={mod.key}>
+                <a href={mod.href} aria-current={mod.active ? "page" : undefined}>
+                  {mod.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </nav>
+        <div className="shl-shell-context">
+          <span className="shl-tenant-context">{tenantLabel}</span>
+          <button
+            type="button"
+            onClick={toggle}
+            aria-label={
+              scheme === "light" ? t("shl.theme.toggleToDark") : t("shl.theme.toggleToLight")
+            }
+          >
+            {scheme === "light" ? "🌙" : "☀️"}
+          </button>
+        </div>
+      </header>
+      <main id="shl-main-content" className="shl-shell-content" tabIndex={-1}>
+        {children}
+      </main>
+    </div>
+  );
+}

web/shl/components/Table.tsx

@@ -0,0 +1,83 @@
+// Table-Basis-Komponente — SHL-01. WCAG: semantische <table>, scope auf Kopfzellen, sortierbare Spalten per Tastatur.
+
+import type { ReactNode } from "react";
+import { useI18n } from "../i18n/i18n";
+
+export interface TableColumn<Row> {
+  key: string;
+  header: string;
+  render: (row: Row) => ReactNode;
+  sortable?: boolean;
+}
+
+export interface TableProps<Row> {
+  columns: TableColumn<Row>[];
+  rows: Row[];
+  rowKey: (row: Row) => string;
+  sortKey?: string;
+  sortDirection?: "asc" | "desc";
+  onSort?: (key: string) => void;
+  caption?: string;
+}
+
+export function Table<Row>({
+  columns,
+  rows,
+  rowKey,
+  sortKey,
+  sortDirection,
+  onSort,
+  caption,
+}: TableProps<Row>) {
+  const { t } = useI18n();
+
+  return (
+    <table className="shl-table">
+      {caption && <caption>{caption}</caption>}
+      <thead>
+        <tr>
+          {columns.map((column) => {
+            const isSorted = column.key === sortKey;
+            const ariaSort = column.sortable
+              ? isSorted
+                ? sortDirection === "asc"
+                  ? "ascending"
+                  : "descending"
+                : "none"
+              : undefined;
+            return (
+              <th key={column.key} scope="col" aria-sort={ariaSort}>
+                {column.sortable ? (
+                  <button
+                    type="button"
+                    onClick={() => onSort?.(column.key)}
+                    className="shl-table-sort-button"
+                  >
+                    {column.header}
+                  </button>
+                ) : (
+                  column.header
+                )}
+              </th>
+            );
+          })}
+        </tr>
+      </thead>
+      <tbody>
+        {rows.length === 0 ? (
+          <tr>
+            <td colSpan={columns.length}>{t("shl.table.noRows")}</td>
+          </tr>
+        ) : (
+          rows.map((row) => (
+            <tr key={rowKey(row)}>
+              {columns.map((column) => (
+                <td key={column.key}>{column.render(row)}</td>
+              ))}
+            </tr>
+          ))
+        )}
+      </tbody>
+    </table>
+  );
+}

web/shl/components/Toast.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+// Toast-Basis-Komponente — SHL-01. WCAG: aria-live sorgt dafür, dass Screenreader Meldungen ansagen.
+
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
+import type { ReactNode } from "react";
+import { useI18n } from "../i18n/i18n";
+
+export type ToastVariant = "info" | "success" | "danger" | "warning";
+
+export interface ToastMessage {
+  id: string;
+  text: string;
+  variant: ToastVariant;
+}
+
+interface ToastContextValue {
+  toasts: ToastMessage[];
+  push: (text: string, variant?: ToastVariant) => void;
+  dismiss: (id: string) => void;
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<ToastMessage[]>([]);
+  const { t } = useI18n();
+
+  const dismiss = useCallback((id: string) => {
+    setToasts((current) => current.filter((toast) => toast.id !== id));
+  }, []);
+
+  const push = useCallback((text: string, variant: ToastVariant = "info") => {
+    const id = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+    setToasts((current) => [...current, { id, text, variant }]);
+  }, []);
+
+  const value = useMemo(() => ({ toasts, push, dismiss }), [toasts, push, dismiss]);
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      <div className="shl-toast-region" role="status" aria-live="polite" aria-atomic="false">
+        {toasts.map((toast) => (
+          <div key={toast.id} className={`shl-toast shl-toast-${toast.variant}`}>
+            <span>{toast.text}</span>
+            <button
+              type="button"
+              onClick={() => dismiss(toast.id)}
+              aria-label={t("shl.toast.dismiss")}
+            >
+              ×
+            </button>
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast(): ToastContextValue {
+  const ctx = useContext(ToastContext);
+  if (!ctx) {
+    throw new Error("useToast muss innerhalb von <ToastProvider> aufgerufen werden");
+  }
+  return ctx;
+}

web/shl/i18n/i18n.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+// i18n-Rahmen (mind. Deutsch/Englisch) — SHL-01 Akzeptanzkriterium 5.
+// Liefert nur den Umschaltmechanismus + Basis-Komponenten-Texte.
+// Modul-Frontends liefern ihre eigenen fachlichen Textbausteine über registerMessages(),
+// statt einen eigenen i18n-Mechanismus zu bauen (siehe UI-UX-KONZEPT.md Abschnitt 4).
+
+import { createContext, useContext, useMemo, useState } from "react";
+import type { ReactNode } from "react";
+
+export type Locale = "de" | "en";
+
+type MessageDict = Record<string, string>;
+type MessageBundle = Record<Locale, MessageDict>;
+
+const baseMessages: MessageBundle = {
+  de: {
+    "shl.dialog.close": "Schließen",
+    "shl.toast.dismiss": "Meldung schließen",
+    "shl.table.noRows": "Keine Einträge vorhanden",
+    "shl.theme.toggleToLight": "Helles Erscheinungsbild",
+    "shl.theme.toggleToDark": "Dunkles Erscheinungsbild",
+  },
+  en: {
+    "shl.dialog.close": "Close",
+    "shl.toast.dismiss": "Dismiss message",
+    "shl.table.noRows": "No entries",
+    "shl.theme.toggleToLight": "Switch to light theme",
+    "shl.theme.toggleToDark": "Switch to dark theme",
+  },
+};
+
+// Registry, in die Modul-Frontends ihre eigenen Textbausteine einhängen.
+const registry: MessageBundle = { de: { ...baseMessages.de }, en: { ...baseMessages.en } };
+
+export function registerMessages(locale: Locale, messages: MessageDict): void {
+  registry[locale] = { ...registry[locale], ...messages };
+}
+
+interface I18nContextValue {
+  locale: Locale;
+  setLocale: (locale: Locale) => void;
+  t: (key: string, fallback?: string) => string;
+}
+
+const I18nContext = createContext<I18nContextValue | null>(null);
+
+export function I18nProvider({
+  initialLocale = "de",
+  children,
+}: {
+  initialLocale?: Locale;
+  children: ReactNode;
+}) {
+  const [locale, setLocale] = useState<Locale>(initialLocale);
+
+  const value = useMemo<I18nContextValue>(
+    () => ({
+      locale,
+      setLocale,
+      t: (key: string, fallback?: string) => registry[locale][key] ?? fallback ?? key,
+    }),
+    [locale],
+  );
+
+  return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>;
+}
+
+export function useI18n(): I18nContextValue {
+  const ctx = useContext(I18nContext);
+  if (!ctx) {
+    throw new Error("useI18n muss innerhalb von <I18nProvider> aufgerufen werden");
+  }
+  return ctx;
+}

web/shl/index.ts

@@ -0,0 +1,25 @@
+// Öffentliche Schnittstelle des Pakets @nexarch/shl — Modul-Frontends importieren ausschließlich hierüber,
+// nicht aus internen Unterpfaden (SHL-01 Akzeptanzkriterium 2: dokumentiert, versioniert, importierbar statt kopiert).
+
+export { colorTokens, spacing, breakpoints, typography, cssVariables } from "./tokens/tokens";
+export type { ColorScheme, ColorTokens } from "./tokens/tokens";
+
+export { ThemeProvider, useTheme, currentColors } from "./theme/ThemeProvider";
+
+export { I18nProvider, useI18n, registerMessages } from "./i18n/i18n";
+export type { Locale } from "./i18n/i18n";
+
+export { Shell } from "./components/Shell";
+export type { ShellProps, ModuleLink } from "./components/Shell";
+
+export { Dialog } from "./components/Dialog";
+export type { DialogProps } from "./components/Dialog";
+
+export { Table } from "./components/Table";
+export type { TableProps, TableColumn } from "./components/Table";
+
+export { TextField, SelectField, CheckboxField } from "./components/FormElements";
+export type { TextFieldProps, SelectFieldProps, CheckboxFieldProps } from "./components/FormElements";
+
+export { ToastProvider, useToast } from "./components/Toast";
+export type { ToastMessage, ToastVariant } from "./components/Toast";

web/shl/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@nexarch/shl",
+  "version": "0.1.0",
+  "private": true,
+  "description": "NEXARCH UI-Shell & Design-System (Core SHL-01) — gemeinsames Paket für alle Modul-Frontends.",
+  "main": "index.ts",
+  "types": "index.ts",
+  "scripts": {
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "jsdom": "^24.1.1",
+    "typescript": "5.5.3",
+    "vitest": "^2.0.0"
+  }
+}

web/shl/theme/ThemeProvider.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+// Zentrales Theming (Hell/Dunkel) — SHL-01 Akzeptanzkriterium 6.
+// Einzige Quelle für Hell/Dunkel-Werte; Modul-Frontends schalten nur um, bauen kein eigenes Theming.
+
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import type { ReactNode } from "react";
+import { colorTokens, cssVariables, type ColorScheme } from "../tokens/tokens";
+
+const STORAGE_KEY = "nexarch-shl-theme";
+
+interface ThemeContextValue {
+  scheme: ColorScheme;
+  setScheme: (scheme: ColorScheme) => void;
+  toggle: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+function readStoredScheme(): ColorScheme | null {
+  if (typeof window === "undefined") return null;
+  try {
+    const stored = window.localStorage.getItem(STORAGE_KEY);
+    return stored === "light" || stored === "dark" ? stored : null;
+  } catch {
+    // localStorage kann in privaten Fenstern/eingeschränkten Kontexten fehlschlagen — kein Absturz, nur kein persistierter Zustand.
+    return null;
+  }
+}
+
+function systemPrefersDark(): boolean {
+  if (typeof window === "undefined" || !window.matchMedia) return false;
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [scheme, setSchemeState] = useState<ColorScheme>("light");
+
+  useEffect(() => {
+    const stored = readStoredScheme();
+    setSchemeState(stored ?? (systemPrefersDark() ? "dark" : "light"));
+  }, []);
+
+  const setScheme = useCallback((next: ColorScheme) => {
+    setSchemeState(next);
+    try {
+      window.localStorage.setItem(STORAGE_KEY, next);
+    } catch {
+      // Speichern optional — Umschaltung funktioniert auch ohne Persistenz.
+    }
+  }, []);
+
+  const toggle = useCallback(() => {
+    setScheme(scheme === "light" ? "dark" : "light");
+  }, [scheme, setScheme]);
+
+  useEffect(() => {
+    const vars = cssVariables(scheme);
+    const root = document.documentElement;
+    for (const [key, value] of Object.entries(vars)) {
+      root.style.setProperty(key, value);
+    }
+    root.dataset.shlTheme = scheme;
+  }, [scheme]);
+
+  const value = useMemo(() => ({ scheme, setScheme, toggle }), [scheme, setScheme, toggle]);
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    throw new Error("useTheme muss innerhalb von <ThemeProvider> aufgerufen werden");
+  }
+  return ctx;
+}
+
+export function currentColors(scheme: ColorScheme) {
+  return colorTokens[scheme];
+}

web/shl/tokens/tokens.ts

@@ -0,0 +1,96 @@
+// Design-Tokens: einzige Quelle für Farbe, Abstand, Typografie im gesamten Frontend-Verbund.
+// Modul-Frontends importieren diese Tokens, überschreiben sie nicht lokal (SHL-01 Akzeptanzkriterium 3).
+// Kontrastwerte sind gegen WCAG 2.1 AA geprüft (Akzeptanzkriterium 1/4): mindestens 4.5:1 für Fließtext.
+
+export type ColorScheme = "light" | "dark";
+
+export interface ColorTokens {
+  background: string;
+  surface: string;
+  surfaceRaised: string;
+  border: string;
+  textPrimary: string;
+  textSecondary: string;
+  accent: string;
+  accentContrast: string;
+  danger: string;
+  dangerContrast: string;
+  success: string;
+  warning: string;
+  focusRing: string;
+}
+
+// Kontrastwerte geprüft: textPrimary auf background/surface >= 7:1, textSecondary >= 4.5:1,
+// accentContrast auf accent >= 4.5:1 (WCAG AA, siehe SHL-01 Prüfung 3).
+export const colorTokens: Record<ColorScheme, ColorTokens> = {
+  light: {
+    background: "#FFFFFF",
+    surface: "#F5F6F8",
+    surfaceRaised: "#FFFFFF",
+    border: "#D7DBE0",
+    textPrimary: "#14181F",
+    textSecondary: "#4B5563",
+    accent: "#1D4ED8",
+    accentContrast: "#FFFFFF",
+    danger: "#B91C1C",
+    dangerContrast: "#FFFFFF",
+    success: "#15803D",
+    warning: "#B45309",
+    focusRing: "#1D4ED8",
+  },
+  dark: {
+    background: "#0F1115",
+    surface: "#181B21",
+    surfaceRaised: "#20242C",
+    border: "#333944",
+    textPrimary: "#F2F4F7",
+    textSecondary: "#B4BAC4",
+    accent: "#5B8DEF",
+    accentContrast: "#0F1115",
+    danger: "#F87171",
+    dangerContrast: "#0F1115",
+    success: "#4ADE80",
+    warning: "#FBBF24",
+    focusRing: "#5B8DEF",
+  },
+};
+
+export const spacing = {
+  xs: "4px",
+  sm: "8px",
+  md: "16px",
+  lg: "24px",
+  xl: "32px",
+  xxl: "48px",
+} as const;
+
+export const breakpoints = {
+  mobile: "0px",
+  tablet: "768px",
+  desktop: "1200px",
+} as const;
+
+export const typography = {
+  fontFamily: "'Inter', 'Segoe UI', system-ui, sans-serif",
+  fontFamilyMono: "'JetBrains Mono', ui-monospace, monospace",
+  sizeSm: "13px",
+  sizeMd: "15px",
+  sizeLg: "18px",
+  sizeXl: "24px",
+  lineHeight: 1.5,
+  weightRegular: 400,
+  weightMedium: 500,
+  weightBold: 600,
+} as const;
+
+export function cssVariables(scheme: ColorScheme): Record<string, string> {
+  const c = colorTokens[scheme];
+  const vars: Record<string, string> = {};
+  for (const [key, value] of Object.entries(c)) {
+    vars[`--shl-color-${key.replace(/([A-Z])/g, "-$1").toLowerCase()}`] = value;
+  }
+  for (const [key, value] of Object.entries(spacing)) {
+    vars[`--shl-spacing-${key}`] = value;
+  }
+  return vars;
+}

web/shl/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "declaration": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

web/shl/vitest.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    environment: "jsdom",
+    setupFiles: ["./vitest.setup.ts"],
+  },
+});

web/shl/vitest.setup.ts

@@ -0,0 +1,9 @@
+import "@testing-library/jest-dom/vitest";
+import { afterEach } from "vitest";
+import { cleanup } from "@testing-library/react";
+
+// Ohne explizites Cleanup bleiben zwischen den it()-Blöcken gerenderte Dialoge im DOM stehen
+// (mehrere <html>/<body>-Bäume stapeln sich), wodurch getByRole() mehrere Treffer statt einen findet.
+afterEach(() => {
+  cleanup();
+});