@cosmicdrift/kumiko-samples 0.338.0

package/packages/bundled-features/src/auth-email-password/web/signup-screen.tsx

@@ -0,0 +1,128 @@
+// @runtime client
+// SignupScreen — Magic-Link-Self-Signup, Step 1.
+//
+// Form mit Email-Input. Submit triggert /api/auth/signup-request
+// (silent-success, kein account-enumeration). UI zeigt unconditional
+// ein "Mail unterwegs"-Confirm mit Resend-Button — auch wenn die Email
+// schon registriert ist (Server schickt dann dieselbe Mail mit dem
+// existing Token aus Redis = idempotent).
+//
+// App ist verantwortlich, den Screen unter einer URL zu mounten (z.B.
+// /signup) und ihn anonymous reachable zu machen (AuthPathGate VOR
+// AuthGate). Apex-Marketing kann via Link "Kostenlos starten" auf den
+// /signup-Pfad routen.
+
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { type FormEvent, type ReactNode, useState } from "react";
+import { requestSignup } from "./auth-client.js";
+import { retryAfterMinutes } from "./auth-form-logic.js";
+import { AuthCard } from "./auth-form-primitives.js";
+
+export type SignupScreenProps = {
+  readonly title?: string;
+  readonly subtitle?: ReactNode;
+  /** href für den "Bereits einen Account?"-Link. App-spezifisch — Default
+   *  "/login". */
+  readonly loginHref?: string;
+};
+
+export function SignupScreen({
+  title,
+  subtitle,
+  loginHref = "/login",
+}: SignupScreenProps): ReactNode {
+  const t = useTranslation();
+  const { Form, Field, Input, Button, Banner, Link } = usePrimitives();
+  const [email, setEmail] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [done, setDone] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const doSubmit = async (): Promise<void> => {
+    setSubmitting(true);
+    setError(null);
+    try {
+      const res = await requestSignup(email);
+      if (res.ok) {
+        setDone(true);
+      } else if (res.error.reason === "rate_limited") {
+        const minutes = retryAfterMinutes(res.error.retryAfterSeconds);
+        setError(
+          minutes !== undefined
+            ? t("auth.errors.accountLockedRetry", { minutes })
+            : t("auth.errors.rateLimited"),
+        );
+      } else {
+        setError(t("auth.errors.unknownError"));
+      }
+    } catch {
+      setError(t("auth.errors.unknownError"));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const onSubmit = (e?: FormEvent): void => {
+    e?.preventDefault();
+    void doSubmit();
+  };
+
+  const onResend = async (): Promise<void> => {
+    // Resend nutzt den gleichen Endpunkt — Server returnt den existing
+    // Token aus Redis und schickt eine zweite Mail mit dem GLEICHEN
+    // Activation-Link (alte Mail bleibt also gültig).
+    setSubmitting(true);
+    setError(null);
+    try {
+      await requestSignup(email);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const effectiveTitle = title ?? t("auth.signup.title");
+
+  return (
+    <AuthCard title={effectiveTitle} subtitle={subtitle}>
+      {done ? (
+        <div className="p-6 pt-0 flex flex-col gap-4">
+          <Banner variant="info">
+            <p className="font-medium text-foreground">{t("auth.signup.successTitle")}</p>
+            <p className="mt-1">{t("auth.signup.successBody")}</p>
+          </Banner>
+          <Button variant="secondary" onClick={onResend} disabled={submitting}>
+            {t("auth.signup.resend")}
+          </Button>
+          <Link href={loginHref} variant="muted">
+            {t("auth.signup.haveAccount")}
+          </Link>
+        </div>
+      ) : (
+        <div className="p-6 pt-0 flex flex-col gap-4">
+          <p className="text-sm text-muted-foreground">{t("auth.signup.intro")}</p>
+          <Form onSubmit={onSubmit}>
+            <Field id="signup-email" label={t("auth.signup.email")} required>
+              <Input
+                kind="email"
+                id="signup-email"
+                name="signup-email"
+                value={email}
+                onChange={setEmail}
+                disabled={submitting}
+                required
+                autoComplete="email"
+              />
+            </Field>
+            {error !== null && <Banner variant="error">{error}</Banner>}
+            <Button type="submit" loading={submitting} disabled={submitting}>
+              {submitting ? t("auth.signup.submitting") : t("auth.signup.submit")}
+            </Button>
+          </Form>
+          <Link href={loginHref} variant="muted" className="self-center">
+            {t("auth.signup.haveAccount")}
+          </Link>
+        </div>
+      )}
+    </AuthCard>
+  );
+}

package/packages/bundled-features/src/auth-email-password/web/tenant-menu-items.tsx

@@ -0,0 +1,47 @@
+// @runtime client
+// Tenant choices as dropdown entries — the TenantSwitcher's list for a user
+// menu that carries the shell controls. Renders nothing for a single tenant.
+
+import { useTranslation } from "@cosmicdrift/kumiko-renderer";
+import {
+  DropdownMenuCheckboxItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from "@cosmicdrift/kumiko-renderer-web";
+import type { ReactNode } from "react";
+import { useSession } from "./session.js";
+
+export type TenantMenuItemsProps = {
+  readonly tenantName?: (tenantId: string) => string;
+};
+
+export function TenantMenuItems({ tenantName }: TenantMenuItemsProps): ReactNode {
+  const t = useTranslation();
+  const { user, tenants, activeTenantId, switchTenant } = useSession();
+  if (user === null || tenants.length <= 1) return null;
+
+  const nameOf = (tenantId: string): string => {
+    if (tenantName !== undefined) return tenantName(tenantId);
+    const membership = tenants.find((m) => m.tenantId === tenantId);
+    return membership?.name || membership?.key || tenantId.slice(0, 8);
+  };
+
+  return (
+    <>
+      <DropdownMenuLabel>{t("auth.tenant.switcher.label")}</DropdownMenuLabel>
+      {tenants.map((membership) => (
+        <DropdownMenuCheckboxItem
+          key={membership.tenantId}
+          checked={membership.tenantId === activeTenantId}
+          onSelect={(event) => {
+            event.preventDefault();
+            if (membership.tenantId !== activeTenantId) void switchTenant(membership.tenantId);
+          }}
+        >
+          <span className="truncate">{nameOf(membership.tenantId)}</span>
+        </DropdownMenuCheckboxItem>
+      ))}
+      <DropdownMenuSeparator />
+    </>
+  );
+}

package/packages/bundled-features/src/auth-email-password/web/tenant-switcher.tsx

@@ -0,0 +1,123 @@
+// @runtime client
+// TenantSwitcher — kleines Dropdown, zeigt den aktiven Tenant und
+// erlaubt Wechsel zu anderen Memberships. Auf Radix-DropdownMenu für
+// konsistentes Verhalten (Click-outside/Escape/Keyboard-Nav).
+//
+// Rendert NICHT wenn kein User eingeloggt ist und auch NICHT wenn der
+// User nur einen Tenant hat (Single-Tenant-Apps brauchen keinen
+// Switcher).
+//
+// Der Display-Name kommt aus einem optionalen `tenantName`-Prop
+// oder fallback zum ID-Hash. Design-Entscheidung: der TenantSwitcher
+// holt NICHT selbst tenant:query:me — das würde Round-Trips pro Mount
+// kosten und bräuchte Query-Caching-Infrastruktur. Stattdessen reicht
+// der Host den Resolver rein (kommt z.B. aus einer useTenantNames()-
+// Hook die einmalig am App-Boot geladen wird).
+
+import { useTranslation } from "@cosmicdrift/kumiko-renderer";
+import {
+  cn,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@cosmicdrift/kumiko-renderer-web";
+import { Building2, ChevronDown } from "lucide-react";
+import { type ReactNode, useCallback, useState } from "react";
+import { useSession } from "./session.js";
+
+export type TenantSwitcherProps = {
+  /** Optional: liefert einen menschenlesbaren Namen pro Tenant-ID.
+   *  Default: die ID wird direkt angezeigt (kurze UUID genügt für
+   *  Dev-Umgebungen). Für prod sollte der Host z.B. die Tenant-Namen
+   *  beim Login cachen und hier durchreichen. */
+  readonly tenantName?: (tenantId: string) => string;
+};
+
+export function TenantSwitcher({ tenantName }: TenantSwitcherProps): ReactNode {
+  const t = useTranslation();
+  const { user, tenants, activeTenantId, switchTenant } = useSession();
+  const [switching, setSwitching] = useState<string | null>(null);
+
+  const handleSwitch = useCallback(
+    async (tenantId: string) => {
+      if (tenantId === activeTenantId) return;
+      setSwitching(tenantId);
+      try {
+        await switchTenant(tenantId);
+      } finally {
+        // In der Praxis führt switchTenant zu einem full-page reload,
+        // also sehen wir den cleared-state nie — das `finally` ist nur
+        // für den Edge-Case dass switchTenant throwt, damit die UI
+        // nicht mit dem Spinner hängen bleibt.
+        setSwitching(null);
+      }
+    },
+    [activeTenantId, switchTenant],
+  );
+
+  // Label-Priorität: App-eigener Resolver (Prop) > Server-geliefertes
+  // name/key aus /auth/tenants > UUID-Präfix. Letzteres ist nur noch der
+  // Notnagel — bei Seed-Tenants (00000000-…) ist es ununterscheidbar.
+  const nameOf = (tenantId: string): string => {
+    if (tenantName !== undefined) return tenantName(tenantId);
+    const membership = tenants.find((m) => m.tenantId === tenantId);
+    // || statt ??: ein leerer name/key-String darf nicht als Label durchrutschen.
+    return membership?.name || membership?.key || tenantId.slice(0, 8);
+  };
+
+  // Rendering-Gate: kein User → nix; nur ein Tenant → auch nix
+  // (Single-Tenant-Apps brauchen keinen Switcher).
+  if (user === null || tenants.length <= 1) return null;
+
+  const activeLabel =
+    activeTenantId !== null ? nameOf(activeTenantId) : t("auth.tenant.switcher.none");
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        {/* kumiko-lint-ignore primitives-discipline radix-asChild braucht DOM-Element als Trigger; Native kriegt eigene .native.tsx-Variante mit ActionSheet */}
+        <button
+          type="button"
+          className={cn(
+            "inline-flex items-center gap-2 rounded-md border border-input bg-background px-2 py-1 text-sm",
+            "hover:bg-accent hover:text-accent-foreground",
+            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          )}
+        >
+          <Building2 className="h-3.5 w-3.5 text-muted-foreground" />
+          <span className="max-w-[14ch] truncate">{activeLabel}</span>
+          <ChevronDown className="h-3 w-3 text-muted-foreground" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-[14rem]">
+        <DropdownMenuLabel>{t("auth.tenant.switcher.label")}</DropdownMenuLabel>
+        {tenants.map((membership) => {
+          const isActive = membership.tenantId === activeTenantId;
+          const isSwitching = switching === membership.tenantId;
+          return (
+            <DropdownMenuCheckboxItem
+              key={membership.tenantId}
+              checked={isActive}
+              disabled={isSwitching}
+              onSelect={(e) => {
+                e.preventDefault();
+                void handleSwitch(membership.tenantId);
+              }}
+            >
+              <div className="flex flex-col items-start min-w-0">
+                <span className="truncate font-medium">{nameOf(membership.tenantId)}</span>
+                {membership.roles.length > 0 && (
+                  <span className="text-xs text-muted-foreground truncate">
+                    {membership.roles.join(", ")}
+                  </span>
+                )}
+              </div>
+            </DropdownMenuCheckboxItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/packages/bundled-features/src/auth-email-password/web/use-shell-user.ts

@@ -0,0 +1,37 @@
+// @runtime client
+// Liest den eingeloggten User + die Rollen aus dem aktiven Tenant aus
+// der Session. Der Hook ist die Standard-Brücke zwischen Session-State
+// und Layout-Komponenten (WorkspaceShell.user, DefaultAppShell-Gates,
+// custom permission checks).
+//
+// Returns undefined solange:
+//   - die Session lädt (status="loading")
+//   - der User unauthenticated ist
+//   - der activeTenantId in der tenants-Liste fehlt (defensiver Pfad —
+//     sollte nicht passieren, schadet aber nicht zu prüfen)
+//
+// WorkspaceShell + DefaultAppShell akzeptieren undefined als "keine
+// Workspaces sichtbar", was im Loading-/Logged-Out-Fall die richtige UX
+// ist. Apps die mehr brauchen (Loading-Indicator etc.) prüfen
+// useSession().status direkt.
+
+import { useMemo } from "react";
+import { useSession } from "./session.js";
+
+export type ShellUser = {
+  readonly id: string;
+  readonly roles: readonly string[];
+};
+
+export function useShellUser(): ShellUser | undefined {
+  const session = useSession();
+  return useMemo(() => {
+    if (session.status !== "authenticated" || session.user === null) return undefined;
+    const activeTenant = session.tenants.find((t) => t.tenantId === session.activeTenantId);
+    if (activeTenant === undefined) return undefined;
+    // session.roles merges globalRoles (e.g. SystemAdmin) + membership — same
+    // merge the server uses for handler access; membership-only broke platform
+    // workspace gating for global operators.
+    return { id: session.user.id, roles: session.roles };
+  }, [session.status, session.user, session.activeTenantId, session.tenants, session.roles]);
+}

package/packages/bundled-features/src/auth-email-password/web/user-menu.tsx

@@ -0,0 +1,149 @@
+// @runtime client
+// UserMenu — Avatar-Dropdown für die Topbar (variant="pill", Default) oder den
+// Sidebar-Footer (variant="sidebar" = die sidebar-07-NavUser-Row). Zeigt
+// Name/Email + Logout. Auf Radix-DropdownMenu, damit Click-outside, Escape,
+// Focus-Management, Keyboard-Nav (↑↓/Home/End) und ARIA-Roles aus der Kiste
+// funktionieren.
+//
+// Rendert NICHTS wenn kein User eingeloggt ist — Hosts dürfen das
+// Component außerhalb des AuthGate einhängen ohne dass ein harter
+// Fehler entsteht.
+
+import { useTranslation } from "@cosmicdrift/kumiko-renderer";
+import {
+  cn,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@cosmicdrift/kumiko-renderer-web";
+import { ChevronDown, ChevronsUpDown, LogOut } from "lucide-react";
+import type { ReactNode } from "react";
+import { useSession } from "./session.js";
+
+export type UserMenuVariant = "pill" | "sidebar";
+
+export type UserMenuProps = {
+  /** Zusätzliche Menu-Items über dem Logout. Per-item class/behaviour
+   *  controlliert der Caller — wir packen nur den Frame drumrum. */
+  readonly children?: ReactNode;
+  /** "pill" (Default) = kompakter Topbar-Trigger; "sidebar" = volle NavUser-
+   *  Row (Avatar + Name + Email) für den `sidebarFooter`-Slot der App-Shell.
+   *  Requires a `SidebarProvider` ancestor — the default App-Shell
+   *  `sidebarFooter` slot already provides one. */
+  readonly variant?: UserMenuVariant;
+};
+
+function initials(value: string): string {
+  // Vor- und Nachname falls Displayname einen Spacebar hat, sonst
+  // erste zwei Chars der Email-Lokalseite. Deterministisch,
+  // damit der Avatar-Content nicht bei jedem Re-Render flattert.
+  const trimmed = value.trim();
+  if (trimmed.length === 0) return "?";
+  const parts = trimmed.split(/\s+/);
+  if (parts.length >= 2) {
+    return (parts[0]?.[0] ?? "").concat(parts[1]?.[0] ?? "").toUpperCase();
+  }
+  return trimmed.slice(0, 2).toUpperCase();
+}
+
+export function UserMenu({ children, variant = "pill" }: UserMenuProps): ReactNode {
+  const t = useTranslation();
+  const { user, logout } = useSession();
+
+  if (user === null) return null;
+
+  const hasName = user.displayName.length > 0;
+  const displayName = hasName ? user.displayName : user.email;
+  const avatarText = initials(displayName);
+
+  const content = (
+    <DropdownMenuContent
+      align={variant === "sidebar" ? "start" : "end"}
+      aria-label={t("auth.user.menu.label")}
+    >
+      <DropdownMenuLabel className="text-xs">
+        <div className="font-medium text-foreground truncate">{displayName}</div>
+        {hasName && <div className="truncate">{user.email}</div>}
+      </DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      {children !== undefined && (
+        <>
+          {children}
+          <DropdownMenuSeparator />
+        </>
+      )}
+      <DropdownMenuItem onSelect={() => void logout()}>
+        <LogOut className="h-4 w-4" />
+        <span>{t("auth.user.menu.logout")}</span>
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  );
+
+  // Sidebar-Footer: volle NavUser-Row (sidebar-07) als Dropdown-Trigger —
+  // gleiche Optik wie SidebarUser, aber klickbar mit Logout/Profil.
+  if (variant === "sidebar") {
+    return (
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <SidebarMenuButton
+                size="lg"
+                className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+              >
+                <span
+                  aria-hidden="true"
+                  className="flex size-7 shrink-0 items-center justify-center rounded-full bg-sidebar-accent text-xs font-medium text-sidebar-accent-foreground"
+                >
+                  {avatarText}
+                </span>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-medium text-sidebar-foreground">
+                    {displayName}
+                  </span>
+                  {hasName && (
+                    <span className="truncate text-xs text-sidebar-muted">{user.email}</span>
+                  )}
+                </div>
+                <ChevronsUpDown className="ml-auto size-4 text-sidebar-muted" />
+              </SidebarMenuButton>
+            </DropdownMenuTrigger>
+            {content}
+          </DropdownMenu>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    );
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        {/* kumiko-lint-ignore primitives-discipline radix-asChild braucht DOM-Element als Trigger; Native kriegt eigene .native.tsx-Variante mit ActionSheet */}
+        <button
+          type="button"
+          className={cn(
+            "inline-flex items-center gap-2 rounded-md px-2 py-1 text-sm",
+            "text-foreground hover:bg-accent hover:text-accent-foreground",
+            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          )}
+        >
+          <span
+            aria-hidden="true"
+            className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground"
+          >
+            {avatarText}
+          </span>
+          <span className="hidden sm:inline max-w-[12ch] truncate">{displayName}</span>
+          <ChevronDown className="h-3 w-3 text-muted-foreground" />
+        </button>
+      </DropdownMenuTrigger>
+      {content}
+    </DropdownMenu>
+  );
+}

package/packages/bundled-features/src/auth-email-password/web/verify-email-screen.tsx

@@ -0,0 +1,99 @@
+// @runtime client
+// VerifyEmailScreen — liest `?token=...` aus URL, schickt ihn auto an
+// /api/auth/verify-email beim Mount, zeigt success/error. Idempotent
+// auf Server-Seite (mehrfaches Klicken setzt emailVerified=true erneut),
+// also kein Re-Submit-Risiko.
+//
+// useEffect mit empty-deps + once-Guard damit React Strict-Mode den
+// Verify-Call nur einmal feuert (Strict-Mode dispatched useEffect 2x in
+// dev). Token-roundtrip ist server-side single-use, aber wir wollen
+// nicht den ersten valid-call beim Mount und den zweiten als invalid-
+// Banner sehen.
+
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { type ReactNode, useEffect, useRef, useState } from "react";
+import { verifyEmail } from "./auth-client.js";
+import { AuthCard, useUrlToken } from "./auth-form-primitives.js";
+
+export type VerifyEmailScreenProps = {
+  readonly title?: string;
+  /** Override für Token aus URL. Default: parsed aus `?token=...`. */
+  readonly token?: string;
+  /** href für "Zum Login"-Link. Default "/login". */
+  readonly loginHref?: string;
+};
+
+type Status = "verifying" | "success" | "error" | "missing-token";
+
+export function VerifyEmailScreen({
+  title,
+  token: tokenProp,
+  loginHref = "/login",
+}: VerifyEmailScreenProps): ReactNode {
+  const t = useTranslation();
+  const { Link } = usePrimitives();
+  const token = useUrlToken(tokenProp);
+  const [status, setStatus] = useState<Status>(token === "" ? "missing-token" : "verifying");
+  const startedRef = useRef(false);
+
+  // kumiko-lint-ignore no-raw-hooks Phase-3 conversion tracked in #2312
+  useEffect(() => {
+    if (status !== "verifying") return;
+    if (startedRef.current) return;
+    startedRef.current = true;
+    void (async () => {
+      const res = await verifyEmail(token);
+      setStatus(res.ok ? "success" : "error");
+    })();
+  }, [status, token]);
+
+  if (status === "missing-token") {
+    return (
+      <AuthCard title={title ?? t("auth.verifyEmail.errorTitle")}>
+        <div className="p-6 pt-0 flex flex-col gap-4">
+          <p className="text-sm text-muted-foreground">{t("auth.verifyEmail.missingToken")}</p>
+          <Link href={loginHref} variant="muted">
+            {t("auth.verifyEmail.goToLogin")}
+          </Link>
+        </div>
+      </AuthCard>
+    );
+  }
+
+  if (status === "verifying") {
+    return (
+      <AuthCard>
+        <div className="p-6">
+          <p className="text-sm text-muted-foreground" role="status">
+            {t("auth.verifyEmail.verifying")}
+          </p>
+        </div>
+      </AuthCard>
+    );
+  }
+
+  if (status === "success") {
+    return (
+      <AuthCard title={title ?? t("auth.verifyEmail.successTitle")}>
+        <div className="p-6 pt-0 flex flex-col gap-4">
+          <p className="text-sm text-muted-foreground">{t("auth.verifyEmail.successBody")}</p>
+          <Link href={loginHref} variant="button">
+            {t("auth.verifyEmail.goToLogin")}
+          </Link>
+        </div>
+      </AuthCard>
+    );
+  }
+
+  // status === "error"
+  return (
+    <AuthCard title={title ?? t("auth.verifyEmail.errorTitle")}>
+      <div className="p-6 pt-0 flex flex-col gap-4">
+        <p className="text-sm text-muted-foreground">{t("auth.verifyEmail.errorBody")}</p>
+        <Link href={loginHref} variant="muted">
+          {t("auth.verifyEmail.goToLogin")}
+        </Link>
+      </div>
+    </AuthCard>
+  );
+}