@blackforestsentinel/seed-web-people 0.0.0-stage → 0.4.0

package/README.md

@@ -1,3 +1,156 @@
-# Temporary Holding Version
+# @blackforestsentinel/seed-web-people
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+React-Komponenten rund um Personen für Frontends aus [Sentinel Seed](https://github.com/blackforestsentinel/seed-template): Profilbild, Name, Rolle, Abmelden, Personenauswahl, Karten, Anmelde- und Kein-Zugriff-Seite. Die Daten kommen aus Microsoft Graph, mit dem Token der angemeldeten Person direkt im Browser; einen eigenen Server-Endpunkt braucht es nicht.
+
+- Optik an Fluent 2 angelehnt (Teams, Outlook), ohne Abhängigkeit von `@fluentui/*`.
+- Ein statisches Stylesheet, keine eingefügten Styles; passt zur CSP der Seed-Apps (`style-src 'self'`).
+- Bilder als `data:`-URL; die CSP erlaubt `img-src 'self' data:` schon.
+- Rund 14 KB JavaScript und 6 KB CSS nach gzip, ohne React. Einzelne Komponenten lassen sich per Tree-Shaking einbinden.
+
+## Einbau
+
+```bash
+npm install @blackforestsentinel/seed-web-people
+```
+
+Die Version passt zu `@blackforestsentinel/seed-web-auth` (Peer-Abhängigkeit, ebenso React ab 18).
+
+```tsx
+// main.tsx
+import '@blackforestsentinel/seed-web-people/styles.css';
+import { SeedUserProvider } from '@blackforestsentinel/seed-web-auth/react';
+import { DirectoryProvider, SignInPage } from '@blackforestsentinel/seed-web-people';
+
+const config = await loadRuntimeConfig<AppConfig>();
+const auth = await startAuth(config.auth); // createSeedAuth oder null (lokal, ohne sso)
+
+if (auth && !auth.account) {
+  root.render(
+    <DirectoryProvider config={config.auth} auth={auth}>
+      <SignInPage appName="Kundenportal" />
+    </DirectoryProvider>,
+  );
+} else {
+  root.render(
+    <SeedUserProvider load={api.getMe}>
+      <DirectoryProvider config={config.auth} auth={auth}>
+        <App />
+      </DirectoryProvider>
+    </SeedUserProvider>,
+  );
+}
+```
+
+- `DirectoryProvider` entscheidet anhand von `config.auth`: mit `auth.directory` und Anmeldung Graph, im lokalen Modus die Liste aus `config.json`, sonst gar nichts. Ohne `auth.directory` zeigen die Komponenten Namen und Initialen, die die App übergibt, und rufen Graph nie auf.
+- `DirectoryProvider` gehört in `SeedUserProvider`, damit Rollen und Capabilities aus `/api/me` ankommen.
+- Die CSP der App braucht `connect-src https://graph.microsoft.com`; das Template trägt das mit `auth.directory` ein.
+
+## Komponenten
+
+```tsx
+<CurrentUserMenu menuItems={[{ label: 'Hilfe', href: '/hilfe' }]} />
+<PersonLabel id={invoice.approvedBy} secondary={formatDate(invoice.approvedAt)} card />
+<PeoplePicker multiple value={reviewers} onChange={setReviewers} onlyWithAppRole roles={['Admin']} />
+<AvatarGroup people={task.participants} max={4} />
+```
+
+| Komponente | Zeigt | Wichtige Props |
+| --- | --- | --- |
+| `Avatar` | Foto; ohne Foto Initialen auf einer Farbe aus der ID; Platzhalter beim Laden | `id`, `name`, `image`, `size` (16 bis 96, Default 32), `shape` (`circular`, `square`), `presence` (`true` oder fester Status), `color`, `decorative` |
+| `PersonLabel` | Avatar, Name, optional zweite Zeile; mit `card` die `PersonCard` beim Überfahren und per Tastatur | `id`, `name`, `person`, `secondary`, `secondaryField` (`mail`, `jobTitle`, `department`), `size`, `presence`, `card` |
+| `PersonCard` | größeres Bild, Name, Position, Abteilung, Status, Mail, Link zum Teams-Chat | `id`, `person`, `name`, `presence`, `chat`, `actions` |
+| `AvatarGroup` | mehrere Avatare überlappend, ab `max` „+n“ mit den übrigen Namen als Titel | `people` (IDs oder `{ id, name }`), `max` (Default 4), `size` |
+| `CurrentUserMenu` | Avatar, Name, Rolle (Anzeigename aus `/api/me`), Abmelden; mit `menuItems` ein Menü | `menuItems`, `renderTrigger`, `showRole`, `presence`, `onSignOut` (`null` blendet aus) |
+| `PeoplePicker` | Suchfeld mit Vorschlägen, eine oder mehrere Personen als Chips | `value`/`defaultValue`, `onChange`, `multiple`, `filter`, `renderOption`, `onlyWithAppRole`, `roles`, `minChars` (2), `debounceMs` (250), `maxSuggestions` (8), `labels` |
+| `SignInPage` | Anmeldeseite mit App-Name und Knopf | `appName`, `description`, `logo`, `onSignIn` (Default `auth.login()`), `error`, `footer` |
+| `AccessDenied` | angemeldet, aber ohne Rolle oder Capability: Erklärung, Ansprechperson, Kontowechsel | `appName`, `reason` (`no-role`, `missing-capability`), `capability`, `contact`, `actions`, `onSignOut` |
+| `RoleBadge` | Rolle als Etikett, Anzeigename aus `/api/me` | `role`, `displayName`, `appearance` (`tint`, `filled`, `outline`) |
+| `PresenceBadge` | Teams-Status als Punkt | `status`, `size`, `label` |
+
+### PeoplePicker
+
+- ARIA-Muster „Combobox“: Pfeiltasten wählen den Vorschlag, Enter übernimmt ihn, Escape schließt die Liste und leert dann das Feld, Rücktaste im leeren Feld entfernt den letzten Chip.
+- Suche ab zwei Zeichen mit 250 ms Verzögerung. Zuerst die für die Person relevanten Kontakte (`/me/people`), dann das Verzeichnis (`/users?$search`), beides in einem `$batch`.
+- `filter` blendet Vorschläge aus, `renderOption` stellt sie selbst dar.
+- **`onlyWithAppRole`** zeigt nur Personen mit einer App-Rolle der API, mit `roles` nur mit diesen Rollen. Das Paket liest die Zuweisungen der API-Registrierung (`/servicePrincipals(appId='…')/appRoleAssignedTo`) und löst Gruppen samt verschachtelter Gruppen auf (`/groups/{id}/transitiveMembers`). Das Ergebnis bleibt zehn Minuten im Zwischenspeicher.
+- Ohne `auth.directory.roleFilter` zeigt der Picker mit `onlyWithAppRole` niemanden, sondern einen Fehler im Feld (`data-state="error"`) und in der Konsole. Im lokalen Modus filtert er nach `roles` der erfundenen Personen.
+
+## Hooks
+
+Für eigene Oberflächen gibt es nur die Daten:
+
+| Hook | Liefert |
+| --- | --- |
+| `useCurrentUser()` | `{ status, user }`; `user` mit `id`, `displayName`, `username`, `roles`, `roleNames`, `capabilities`. Der Name kommt sofort aus der Anmeldung, Rollen aus `/api/me`. |
+| `usePerson(id)` | `{ status, person }` mit Name, Mail, Position, Abteilung |
+| `usePhoto(id, size)` | `{ status, url }` als `data:`-URL oder `null` |
+| `usePeopleSearch(text, options)` | `{ status, people, query }`, mit Verzögerung und Mindestlänge |
+| `usePresence(id)` | `{ status, presence }`, gebündelt und jede Minute aktualisiert, solange sichtbar |
+| `useAppRoleMembers(roles)` | `{ status, members, ids }`, Personen mit App-Rolle |
+| `useDirectory()`, `useSignOut()` | das Verzeichnis; Abmelden samt Leeren der Zwischenspeicher |
+
+`status` ist `idle` (nichts zu laden), `loading`, `ready` oder `error`. Ohne React: `createGraphDirectory()` und `createLocalDirectory()`.
+
+## Anpassen
+
+- **CSS-Variablen** für alles Sichtbare, an einer Stelle gesetzt:
+  ```css
+  :root {
+    --seed-accent: #8a2be2;
+    --seed-font: Inter, sans-serif;
+    --seed-avatar-radius: 8px;
+  }
+  ```
+  Die wichtigsten: `--seed-font`, `--seed-accent` (mit `-hover`, `-pressed`), `--seed-text` (mit `-secondary`, `-tertiary`), `--seed-surface`, `--seed-stroke`, `--seed-focus`, `--seed-radius-*`, `--seed-shadow-*`, `--seed-presence-*`, `--seed-palette-<farbe>-bg`/`-fg`. Die Werte entsprechen den Tokens von Fluent 2 (Brand `#0F6CBD`).
+- **`@layer seed`:** Alle Standard-Styles liegen in dieser Ebene. Jede Regel der App gewinnt ohne `!important`, auch eine mit geringerer Spezifität.
+- **Feste Klassennamen** nach BEM, etwa `seed-avatar`, `seed-avatar__image`, `seed-picker__option`, `seed-user-menu__role`. Zustände als `data-*`: `data-state="loading"`, `data-active`, `data-open`, `data-presence="busy"`, `data-color="cranberry"`.
+- **`className` und `classNames`:** Jede Komponente nimmt `className` für das Wurzelelement und `classNames` für ihre Teile, z. B. `classNames={{ option: 'px-2 py-1' }}`; das passt auch zu Tailwind.
+- **Eigene Darstellung:** `renderOption` im Picker, `renderTrigger` und `menuItems` im Benutzermenü, die Hooks für alles andere.
+- **Hell und Dunkel** folgen `prefers-color-scheme`. `data-seed-theme="light"` oder `"dark"` am `html`-Element legt es fest, etwa für einen eigenen Umschalter.
+- **Bedienbarkeit:** Picker als Combobox, Benutzermenü als Menu Button, Bilder mit Alternativtext über `role="img"` und `aria-label`, alles mit der Tastatur bedienbar, Fokusrahmen wie Fluent, `forced-colors` berücksichtigt.
+
+## Berechtigungen und Einwilligung
+
+Alle Berechtigungen sind delegiert: Das Frontend sieht nur, was die angemeldete Person in Outlook oder Teams ohnehin sieht. Das Terraform-Modul `sso` trägt sie an der SPA-Registrierung ein; einwilligen muss ein Mensch.
+
+| Berechtigung | Wofür | Admin-Consent nötig |
+| --- | --- | --- |
+| `User.Read` | eigenes Profil | nein |
+| `User.ReadBasic.All` | Profile und Fotos anderer, Verzeichnissuche | nein |
+| `People.Read` | relevante Personen im Picker | nein |
+| `Presence.Read.All` | Teams-Status (`presence: true`) | nein |
+| `Application.Read.All` | Rollenzuweisungen der API (`roleFilter: true`) | **ja** |
+| `GroupMember.Read.All` | Mitglieder zugewiesener Gruppen (`roleFilter: true`) | **ja** |
+
+- Viele Tenants erlauben keine eigene Einwilligung der Personen. Dann erteilt ein Admin sie einmal für alle: Entra ID, App-Registrierungen, die SPA-Registrierung, „API-Berechtigungen“, „Administratorzustimmung erteilen“.
+- Das Paket holt ein Token für alle Scopes aus `auth.directory.scopes` zugleich. Fehlt die Einwilligung für einen davon, bleibt Graph ganz aus. Mit `roleFilter: true` daher erst die Administratorzustimmung erteilen, dann ausrollen.
+- Fehlt die Einwilligung, leitet seed-web-auth je Tab einmal ohne und einmal mit Dialog zu Entra ID um, damit die Person zustimmen kann. Danach läuft die App ohne Graph weiter: Initialen statt Fotos, der Picker meldet einen Fehler, in der Konsole steht ein Hinweis.
+- Lehnt Graph Position und Abteilung ab (403), fragt das Paket nur Name und Mail ab.
+
+## Lokaler Modus
+
+Mit `"auth": { "mode": "local" }` gibt es kein MSAL und keinen Graph-Zugriff. Unter `auth.directory.people` stehen erfundene Personen; Avatare zeigen Initialen, der Picker sucht in dieser Liste, einen Status gibt es nicht.
+
+```json
+{
+  "apiBaseUrl": "http://localhost:7071",
+  "auth": {
+    "mode": "local",
+    "directory": {
+      "people": [
+        { "id": "00000000-0000-4000-8000-000000000001", "displayName": "Erika Mustermann", "mail": "erika.mustermann@example.org", "jobTitle": "Buchhalterin", "department": "Buchhaltung", "roles": ["Admin"] }
+      ]
+    }
+  }
+}
+```
+
+`roles` ist optional und nur für `onlyWithAppRole` im lokalen Modus. Ohne `auth.directory` sucht der Picker nicht und sagt das.
+
+## Laufzeit und Datenschutz
+
+- Bilder lädt das Paket nur, wenn eine Komponente sie zeigt, in festen Größen (48, 64 oder 96 Pixel aus `/photos/{size}/$value`).
+- Anfragen innerhalb weniger Millisekunden gehen gemeinsam als `$batch` (bis 20 je Aufruf). Gleiche laufende Anfragen werden zusammengefasst, gedrosselte (429) nach `Retry-After` wiederholt.
+- Der Teams-Status kommt gebündelt über `/communications/getPresencesByUserId` und wird jede Minute neu geladen, solange er sichtbar ist und der Tab im Vordergrund liegt.
+- Zwischenspeicher im Speicher und im `sessionStorage` (endet mit dem Tab), getrennt je Konto: Profile und Fotos 30 Minuten, Rollenzuweisungen 10 Minuten, Suchergebnisse und Status nur im Speicher. Personen ohne Foto merkt er sich auch. Abmelden über die Komponenten leert alles.
+- Fotos und Profile gehen nie an die eigene API und nicht in Logs. Profilbilder sind personenbezogene Daten; sie sind aber für dieselben Personen sichtbar wie in Teams und Outlook, und die Einstellungen des Tenants (etwa ausgeblendete Fotos) gelten weiter.

package/dist/cache.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Zwischenspeicher mit Lebensdauer im Speicher und optional im sessionStorage, damit ein Neuladen
+ * der Seite nicht alles neu anfragt. Der sessionStorage endet mit dem Tab. Auch „gibt es nicht“
+ * (null) wird gemerkt, etwa für Personen ohne Foto.
+ */
+export declare class TtlCache {
+    private readonly memory;
+    private readonly prefix;
+    private readonly storage;
+    private readonly now;
+    constructor(prefix: string, storage: Storage | null, now?: () => number);
+    /** Wert oder undefined, wenn unbekannt oder abgelaufen. */
+    get<T>(key: string): T | undefined;
+    set(key: string, value: unknown, ttl: number, persist?: boolean): void;
+    delete(key: string): void;
+    /** Leert Speicher und alle eigenen Einträge im sessionStorage, etwa beim Abmelden. */
+    clear(): void;
+    private load;
+    private write;
+    private prune;
+    private removeWhere;
+}
+/** sessionStorage, falls verfügbar; in privaten Fenstern oder per Richtlinie kann er fehlen. */
+export declare function defaultStorage(): Storage | null;
+//# sourceMappingURL=cache.d.ts.map

package/dist/cache.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cache.d.ts","sourceRoot":"","sources":["../src/cache.ts"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,qBAAa,QAAQ;IACnB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA4B;IACnD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAS;IAChC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAiB;IACzC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAe;IAEnC,YAAY,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,EAAE,GAAG,GAAE,MAAM,MAAiB,EAIhF;IAED,2DAA2D;IAC3D,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,GAAG,CAAC,GAAG,SAAS,CAUjC;IAED,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,UAAO,QAW3D;IAED,MAAM,CAAC,GAAG,EAAE,MAAM,QAOjB;IAED,sFAAsF;IACtF,KAAK,SAGJ;IAED,OAAO,CAAC,IAAI;IAeZ,OAAO,CAAC,KAAK;IASb,OAAO,CAAC,KAAK;IAWb,OAAO,CAAC,WAAW;CAgBpB;AAED,gGAAgG;AAChG,wBAAgB,cAAc,IAAI,OAAO,GAAG,IAAI,CAM/C"}

package/dist/cache.js

@@ -0,0 +1,116 @@
+/**
+ * Zwischenspeicher mit Lebensdauer im Speicher und optional im sessionStorage, damit ein Neuladen
+ * der Seite nicht alles neu anfragt. Der sessionStorage endet mit dem Tab. Auch „gibt es nicht“
+ * (null) wird gemerkt, etwa für Personen ohne Foto.
+ */
+export class TtlCache {
+    memory = new Map();
+    prefix;
+    storage;
+    now;
+    constructor(prefix, storage, now = Date.now) {
+        this.prefix = prefix;
+        this.storage = storage;
+        this.now = now;
+    }
+    /** Wert oder undefined, wenn unbekannt oder abgelaufen. */
+    get(key) {
+        const entry = this.memory.get(key) ?? this.load(key);
+        if (!entry) {
+            return undefined;
+        }
+        if (entry.expires <= this.now()) {
+            this.delete(key);
+            return undefined;
+        }
+        return entry.value;
+    }
+    set(key, value, ttl, persist = true) {
+        const entry = { value, expires: this.now() + ttl };
+        this.memory.set(key, entry);
+        if (persist && this.storage) {
+            const text = JSON.stringify({ v: value, e: entry.expires });
+            if (!this.write(this.prefix + key, text)) {
+                // Voll: abgelaufene eigene Einträge entfernen und einmal neu versuchen, sonst nur im Speicher.
+                this.prune();
+                this.write(this.prefix + key, text);
+            }
+        }
+    }
+    delete(key) {
+        this.memory.delete(key);
+        try {
+            this.storage?.removeItem(this.prefix + key);
+        }
+        catch {
+            // gesperrter Speicher
+        }
+    }
+    /** Leert Speicher und alle eigenen Einträge im sessionStorage, etwa beim Abmelden. */
+    clear() {
+        this.memory.clear();
+        this.removeWhere(() => true);
+    }
+    load(key) {
+        try {
+            const text = this.storage?.getItem(this.prefix + key);
+            if (!text) {
+                return undefined;
+            }
+            const parsed = JSON.parse(text);
+            const entry = { value: parsed.v, expires: parsed.e };
+            this.memory.set(key, entry);
+            return entry;
+        }
+        catch {
+            return undefined;
+        }
+    }
+    write(key, text) {
+        try {
+            this.storage?.setItem(key, text);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+    prune() {
+        const now = this.now();
+        this.removeWhere((text) => {
+            try {
+                return JSON.parse(text).e <= now;
+            }
+            catch {
+                return true;
+            }
+        });
+    }
+    removeWhere(predicate) {
+        try {
+            const storage = this.storage;
+            if (!storage) {
+                return;
+            }
+            for (let i = storage.length - 1; i >= 0; i--) {
+                const key = storage.key(i);
+                if (key?.startsWith(this.prefix) && predicate(storage.getItem(key) ?? '')) {
+                    storage.removeItem(key);
+                }
+            }
+        }
+        catch {
+            // gesperrter Speicher
+        }
+    }
+}
+/** sessionStorage, falls verfügbar; in privaten Fenstern oder per Richtlinie kann er fehlen. */
+export function defaultStorage() {
+    try {
+        return globalThis.sessionStorage ?? null;
+    }
+    catch {
+        return null;
+    }
+}
+//# sourceMappingURL=cache.js.map

package/dist/cache.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cache.js","sourceRoot":"","sources":["../src/cache.ts"],"names":[],"mappings":"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"}

package/dist/components/AccessDenied.d.ts

@@ -0,0 +1,53 @@
+import { type ReactNode } from 'react';
+export interface AccessDeniedContact {
+    name?: string;
+    email?: string;
+    /** Link, etwa ein Formular oder eine Teams-Seite. */
+    url?: string;
+}
+export interface AccessDeniedProps {
+    /** Name der App im Text. */
+    appName?: string;
+    /**
+     * no-role: angemeldet, aber ohne App-Rolle; missing-capability: Rolle da, aber nicht für diesen
+     * Bereich. Default nach den Rollen der Person.
+     */
+    reason?: 'no-role' | 'missing-capability';
+    /** Fehlende Capability, wird bei missing-capability genannt. */
+    capability?: string;
+    title?: ReactNode;
+    /** Eigener Text statt der Erklärung. */
+    message?: ReactNode;
+    /** Wen man fragen kann. */
+    contact?: AccessDeniedContact;
+    /** „Angemeldet als …“ zeigen, Default true. */
+    showUser?: boolean;
+    /** Mit anderem Konto anmelden; Default Abmelden aus DirectoryProvider, null blendet es aus. */
+    onSignOut?: (() => void | Promise<void>) | null;
+    /** Eigene Knöpfe, etwa „Zur Startseite“. */
+    actions?: ReactNode;
+    /** Überschriftenebene, Default 1. */
+    headingLevel?: 1 | 2 | 3;
+    labels?: {
+        signOut?: string;
+        signedInAs?: string;
+        contact?: string;
+    };
+    className?: string;
+    classNames?: {
+        icon?: string;
+        title?: string;
+        message?: string;
+        hint?: string;
+        contact?: string;
+        user?: string;
+        actions?: string;
+        signOut?: string;
+    };
+}
+/**
+ * Seite für Personen, die angemeldet sind, aber keine Rolle oder nicht die nötige Capability haben:
+ * was fehlt, wen man fragen kann und wie man das Konto wechselt.
+ */
+export declare function AccessDenied({ appName, reason, capability, title, message, contact, showUser, onSignOut, actions, headingLevel, labels, className, classNames, }: AccessDeniedProps): import("react").JSX.Element;
+//# sourceMappingURL=AccessDenied.d.ts.map

package/dist/components/AccessDenied.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccessDenied.d.ts","sourceRoot":"","sources":["../../src/components/AccessDenied.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAO9C,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,oBAAoB,CAAC;IAC1C,gEAAgE;IAChE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wCAAwC;IACxC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+FAA+F;IAC/F,SAAS,CAAC,EAAE,CAAC,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC;IAChD,4CAA4C;IAC5C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,qCAAqC;IACrC,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzB,MAAM,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,MAAM,EACN,UAAU,EACV,KAAK,EACL,OAAO,EACP,OAAO,EACP,QAAe,EACf,SAAS,EACT,OAAO,EACP,YAAgB,EAChB,MAAM,EACN,SAAS,EACT,UAAU,GACX,EAAE,iBAAiB,+BA2DnB"}

package/dist/components/AccessDenied.js

@@ -0,0 +1,41 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { useCurrentUser } from '../hooks.js';
+import { useSignOut } from '../provider.js';
+import { cx } from '../utils.js';
+import { LockIcon } from './icons.js';
+import { PersonLabel } from './PersonLabel.js';
+/**
+ * Seite für Personen, die angemeldet sind, aber keine Rolle oder nicht die nötige Capability haben:
+ * was fehlt, wen man fragen kann und wie man das Konto wechselt.
+ */
+export function AccessDenied({ appName, reason, capability, title, message, contact, showUser = true, onSignOut, actions, headingLevel = 1, labels, className, classNames, }) {
+    const { user } = useCurrentUser();
+    const defaultSignOut = useSignOut();
+    const signOut = onSignOut === undefined ? defaultSignOut : onSignOut;
+    const titleId = useId();
+    const kind = reason ?? (user && user.roles.length > 0 ? 'missing-capability' : 'no-role');
+    const app = appName ? `„${appName}“` : 'dieser Anwendung';
+    const Heading = `h${headingLevel}`;
+    const text = message ??
+        (kind === 'no-role'
+            ? `Du bist angemeldet, hast in ${app} aber noch keine Rolle. Ohne Rolle sind keine Inhalte freigegeben.`
+            : `Für diesen Bereich von ${app} fehlt dir eine Berechtigung.`);
+    const hint = message === undefined
+        ? kind === 'no-role'
+            ? 'Rollen vergibt die verantwortliche Person in Entra ID. Nach der Zuweisung meldest du dich einmal ab und wieder an.'
+            : 'Frag die verantwortliche Person, ob deine Rolle erweitert werden kann.'
+        : null;
+    return (_jsxs("section", { className: cx('seed-access-denied', className), "data-reason": kind, "aria-labelledby": titleId, children: [_jsx("span", { className: cx('seed-access-denied__icon', classNames?.icon), "aria-hidden": "true", children: _jsx(LockIcon, {}) }), _jsx(Heading, { id: titleId, className: cx('seed-access-denied__title', classNames?.title), children: title ?? 'Kein Zugriff' }), _jsx("p", { className: cx('seed-access-denied__message', classNames?.message), children: text }), hint && _jsx("p", { className: cx('seed-access-denied__hint', classNames?.hint), children: hint }), kind === 'missing-capability' && capability && (_jsxs("p", { className: cx('seed-access-denied__hint', classNames?.hint), children: ["Ben\u00F6tigt: ", _jsx("code", { className: "seed-access-denied__code", children: capability })] })), contact && (contact.name || contact.email || contact.url) && (_jsxs("p", { className: cx('seed-access-denied__contact', classNames?.contact), children: [labels?.contact ?? 'Ansprechperson', ": ", _jsx(ContactLink, { contact: contact })] })), showUser && user && (_jsxs("div", { className: cx('seed-access-denied__user', classNames?.user), children: [_jsx("span", { className: "seed-access-denied__user-label", children: labels?.signedInAs ?? 'Angemeldet als' }), _jsx(PersonLabel, { id: user.id, name: user.displayName, secondary: user.username ?? undefined })] })), (signOut || actions) && (_jsxs("div", { className: cx('seed-access-denied__actions', classNames?.actions), children: [actions, signOut && (_jsx("button", { type: "button", className: cx('seed-access-denied__sign-out', classNames?.signOut), onClick: () => void signOut(), children: labels?.signOut ?? 'Mit anderem Konto anmelden' }))] }))] }));
+}
+function ContactLink({ contact }) {
+    const text = contact.name || contact.email || contact.url;
+    if (contact.email) {
+        return _jsx("a", { href: `mailto:${contact.email}`, children: text });
+    }
+    if (contact.url) {
+        return (_jsx("a", { href: contact.url, target: "_blank", rel: "noopener noreferrer", children: text }));
+    }
+    return _jsx(_Fragment, { children: text });
+}
+//# sourceMappingURL=AccessDenied.js.map

package/dist/components/AccessDenied.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccessDenied.js","sourceRoot":"","sources":["../../src/components/AccessDenied.tsx"],"names":[],"mappings":"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"}

package/dist/components/Avatar.d.ts

@@ -0,0 +1,46 @@
+import { type CSSProperties } from 'react';
+import type { PresenceStatus } from '../types.js';
+import { type AvatarColor } from '../utils.js';
+export interface AvatarProps {
+    /** Objekt-ID der Person; lädt Foto und, wenn name fehlt, den Namen. */
+    id?: string | null;
+    /** Anzeigename; ohne ihn kommt er aus dem Verzeichnis. */
+    name?: string | null;
+    /** Eigenes Bild (URL oder data:-URL) statt des Fotos aus Graph. */
+    image?: string | null;
+    /** Größe in Pixeln, 16 bis 96; Default 32. */
+    size?: number;
+    /** circular (Default) oder square mit abgerundeten Ecken. */
+    shape?: 'circular' | 'square';
+    /** true lädt den Teams-Status zur ID; ein Status setzt ihn fest. */
+    presence?: boolean | PresenceStatus;
+    /** false lädt kein Foto, nur Initialen. */
+    photo?: boolean;
+    /** colorful (Default): Farbe aus der ID; neutral, brand oder eine feste Farbe der Palette. */
+    color?: 'colorful' | 'neutral' | 'brand' | AvatarColor;
+    /** Nur Schmuck, etwa wenn der Name daneben steht; dann ohne eigene Beschriftung. */
+    decorative?: boolean;
+    /** Beschriftung für Screenreader, Default Name und Status. */
+    label?: string;
+    className?: string;
+    classNames?: {
+        image?: string;
+        initials?: string;
+        icon?: string;
+        badge?: string;
+    };
+}
+/**
+ * Profilbild; ohne Bild Initialen auf einer Farbe, die aus der ID berechnet wird. Während das Foto
+ * lädt, zeigt es einen Platzhalter.
+ */
+export declare function Avatar({ id, name, image, size, shape, presence, photo, color, decorative, label, className, classNames, }: AvatarProps): import("react").JSX.Element;
+/**
+ * Größe als data-size für die Größen mit festen Regeln in styles.css, sonst als CSS-Variablen
+ * per CSSOM (erlaubt unter style-src 'self').
+ */
+export declare function avatarSizeAttributes(size: number): {
+    'data-size'?: number;
+    style?: CSSProperties;
+};
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/components/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/components/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAA6E,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAI1H,MAAM,WAAW,WAAW;IAC1B,uEAAuE;IACvE,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,KAAK,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC9B,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IACpC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,WAAW,CAAC;IACvD,oFAAoF;IACpF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACnF;AAED;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EACrB,EAAE,EACF,IAAI,EACJ,KAAK,EACL,IAAS,EACT,KAAkB,EAClB,QAAQ,EACR,KAAY,EACZ,KAAkB,EAClB,UAAkB,EAClB,KAAK,EACL,SAAS,EACT,UAAU,GACX,EAAE,WAAW,+BA+Cb;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,aAAa,CAAA;CAAE,CAWlG"}

package/dist/components/Avatar.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { usePerson, usePhoto, usePresence } from '../hooks.js';
+import { AVATAR_SIZES, avatarColor, cx, initials, PRESENCE_LABELS, presenceSizeFor } from '../utils.js';
+import { PersonIcon } from './icons.js';
+import { PresenceBadge } from './PresenceBadge.js';
+/**
+ * Profilbild; ohne Bild Initialen auf einer Farbe, die aus der ID berechnet wird. Während das Foto
+ * lädt, zeigt es einen Platzhalter.
+ */
+export function Avatar({ id, name, image, size = 32, shape = 'circular', presence, photo = true, color = 'colorful', decorative = false, label, className, classNames, }) {
+    const person = usePerson(name ? null : id);
+    const loadPhoto = photo && !image && !!id;
+    const picture = usePhoto(loadPhoto ? id : null, size);
+    const live = usePresence(presence === true ? id : null);
+    const [failed, setFailed] = useState(null);
+    const displayName = name || person.person?.displayName || null;
+    const src = image || picture.url;
+    const text = initials(displayName);
+    const status = typeof presence === 'string' ? presence : (live.presence?.status ?? null);
+    let state;
+    if (src && src !== failed) {
+        state = 'image';
+    }
+    else if ((loadPhoto && picture.status === 'loading') || (!name && person.status === 'loading')) {
+        state = 'loading';
+    }
+    else {
+        state = text ? 'initials' : 'icon';
+    }
+    const colorKey = id || displayName;
+    const colorName = color === 'colorful' ? (colorKey ? avatarColor(colorKey) : 'neutral') : color;
+    const accessibleName = label ?? [displayName ?? 'Person', status ? PRESENCE_LABELS[status] : null].filter(Boolean).join(', ');
+    return (_jsxs("span", { className: cx('seed-avatar', className), ...avatarSizeAttributes(size), "data-shape": shape, "data-state": state, "data-color": colorName, "data-presence": status ?? undefined, ...(decorative ? { 'aria-hidden': true } : { role: 'img', 'aria-label': accessibleName }), children: [state === 'image' && (_jsx("img", { className: cx('seed-avatar__image', classNames?.image), src: src, alt: "", onError: () => setFailed(src) })), state === 'initials' && (_jsx("span", { className: cx('seed-avatar__initials', classNames?.initials), "aria-hidden": "true", children: text })), state === 'icon' && _jsx(PersonIcon, { className: cx('seed-avatar__icon', classNames?.icon) }), status && _jsx(PresenceBadge, { status: status, size: presenceSizeFor(size), decorative: true, className: cx('seed-avatar__badge', classNames?.badge) })] }));
+}
+/**
+ * Größe als data-size für die Größen mit festen Regeln in styles.css, sonst als CSS-Variablen
+ * per CSSOM (erlaubt unter style-src 'self').
+ */
+export function avatarSizeAttributes(size) {
+    if (AVATAR_SIZES.includes(size)) {
+        return { 'data-size': size };
+    }
+    return {
+        style: {
+            '--seed-avatar-size': `${size}px`,
+            '--seed-avatar-font-size': `${Math.max(10, Math.round(size * 0.36))}px`,
+            '--seed-avatar-badge-size': `${presenceSizeFor(size)}px`,
+        },
+    };
+}
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../src/components/Avatar.tsx"],"names":[],"mappings":"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"}

package/dist/components/AvatarGroup.d.ts

@@ -0,0 +1,23 @@
+export type AvatarGroupPerson = string | {
+    id?: string | null;
+    name?: string | null;
+};
+export interface AvatarGroupProps {
+    /** Objekt-IDs oder Personen mit ID und Namen. */
+    people: readonly AvatarGroupPerson[];
+    /** Höchstens so viele Avatare, danach „+n“; Default 4. */
+    max?: number;
+    /** Default 32. */
+    size?: number;
+    shape?: 'circular' | 'square';
+    /** Beschriftung der Gruppe, Default „n Personen“. */
+    label?: string;
+    className?: string;
+    classNames?: {
+        avatar?: string;
+        overflow?: string;
+    };
+}
+/** Mehrere Avatare überlappend, ab max mit „+n“; der Titel von „+n“ nennt die übrigen Namen. */
+export declare function AvatarGroup({ people, max, size, shape, label, className, classNames }: AvatarGroupProps): import("react").JSX.Element;
+//# sourceMappingURL=AvatarGroup.d.ts.map

package/dist/components/AvatarGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../src/components/AvatarGroup.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG;IAAE,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAC;AAEtF,MAAM,WAAW,gBAAgB;IAC/B,iDAAiD;IACjD,MAAM,EAAE,SAAS,iBAAiB,EAAE,CAAC;IACrC,0DAA0D;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC9B,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACrD;AAED,gGAAgG;AAChG,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,GAAO,EAAE,IAAS,EAAE,KAAkB,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,gBAAgB,+BA6C7H"}

package/dist/components/AvatarGroup.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDirectory } from '../provider.js';
+import { cx } from '../utils.js';
+import { Avatar, avatarSizeAttributes } from './Avatar.js';
+/** Mehrere Avatare überlappend, ab max mit „+n“; der Titel von „+n“ nennt die übrigen Namen. */
+export function AvatarGroup({ people, max = 4, size = 32, shape = 'circular', label, className, classNames }) {
+    const directory = useDirectory();
+    const entries = people.map((entry) => (typeof entry === 'string' ? { id: entry, name: null } : entry));
+    // Bei Überlauf zählt „+n“ als eigener Platz.
+    const visible = entries.length > max ? entries.slice(0, Math.max(max - 1, 1)) : entries;
+    const hidden = entries.slice(visible.length);
+    const hiddenNames = hidden
+        .map((entry) => entry.name || (entry.id ? directory.peekPerson(entry.id)?.displayName : null))
+        .filter((name) => !!name);
+    const overflowLabel = `${hidden.length} weitere${hiddenNames.length > 0 ? `: ${hiddenNames.join(', ')}` : ''}`;
+    return (_jsxs("span", { className: cx('seed-avatar-group', className), role: "group", "aria-label": label ?? `${entries.length} ${entries.length === 1 ? 'Person' : 'Personen'}`, children: [visible.map((entry, index) => (_jsx(Avatar, { id: entry.id, name: entry.name, size: size, shape: shape, className: cx('seed-avatar-group__item', classNames?.avatar) }, entry.id ?? `${entry.name}-${index}`))), hidden.length > 0 && (_jsx("span", { className: cx('seed-avatar seed-avatar-group__overflow', classNames?.overflow), ...avatarSizeAttributes(size), "data-shape": shape, "data-state": "initials", "data-color": "neutral", role: "img", "aria-label": overflowLabel, title: hiddenNames.join(', ') || undefined, children: _jsxs("span", { className: "seed-avatar__initials", "aria-hidden": "true", children: ["+", hidden.length] }) }))] }));
+}
+//# sourceMappingURL=AvatarGroup.js.map

package/dist/components/AvatarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../src/components/AvatarGroup.tsx"],"names":[],"mappings":"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"}