@cosmicdrift/kumiko-samples 0.341.0 → 0.343.0

package/packages/bundled-features/src/auth-email-password/web/auth-form-primitives.tsx

@@ -15,7 +15,7 @@
 // die früheren authButtonClass/authMutedLinkClass sind dorthin gewandert.
 
 import { usePrimitives } from "@cosmicdrift/kumiko-renderer";
-import { BareFormProvider } from "@cosmicdrift/kumiko-renderer-web";
+import { BareFormProvider, cn } from "@cosmicdrift/kumiko-renderer-web";
 import { createContext, type ReactNode, useContext, useEffect, useState } from "react";
 
 // Wrappt die zentrierte Auth-Card in ihre Umgebung. Default = Fullscreen-
@@ -47,25 +47,41 @@ export function useAuthShell(): AuthShellRenderer | null {
 export type AuthCardProps = {
   readonly title?: string;
   readonly subtitle?: ReactNode;
+  /** Merged onto the Card (default `w-full max-w-sm`). */
+  readonly className?: string;
+  readonly headerClassName?: string;
+  readonly titleClassName?: string;
+  /** Merged onto the body wrapper (default `p-6 pt-0 flex flex-col gap-4`). */
+  readonly bodyClassName?: string;
   readonly children: ReactNode;
 };
 
 // kumiko-lint-ignore no-custom-primitives Wraps usePrimitives().Card, pure domain name for the auth-screen chrome, not a primitive reimplementation
-export function AuthCard({ title, subtitle, children }: AuthCardProps): ReactNode {
+export function AuthCard({
+  title,
+  subtitle,
+  className,
+  headerClassName,
+  titleClassName,
+  bodyClassName,
+  children,
+}: AuthCardProps): ReactNode {
   const { Card } = usePrimitives();
   const shell = useAuthShell() ?? defaultAuthShell;
   // h1 (Seiten-Hauptüberschrift) via Header-Slot erhalten — die Card-Default-
   // Header wäre h3. padded:false = Form sitzt randlos wie bisher (bare form).
   const card = (
     <Card
-      className="w-full max-w-sm"
+      className={cn("w-full max-w-sm", className)}
       options={{ padded: false }}
       slots={{
         header:
           title !== undefined || subtitle !== undefined ? (
-            <div className="flex flex-col space-y-1.5 p-6 pb-4">
+            <div className={cn("flex flex-col space-y-1.5 p-6 pb-4", headerClassName)}>
               {title !== undefined && (
-                <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
+                <h1 className={cn("text-xl font-semibold tracking-tight", titleClassName)}>
+                  {title}
+                </h1>
               )}
               {subtitle !== undefined && (
                 <p className="text-sm text-muted-foreground">{subtitle}</p>
@@ -74,7 +90,9 @@ export function AuthCard({ title, subtitle, children }: AuthCardProps): ReactNod
           ) : undefined,
       }}
     >
-      <BareFormProvider>{children}</BareFormProvider>
+      <BareFormProvider>
+        <div className={cn("p-6 pt-0 flex flex-col gap-4", bodyClassName)}>{children}</div>
+      </BareFormProvider>
     </Card>
   );
   return shell(card);

package/packages/bundled-features/src/auth-email-password/web/confirm-account-unlock-screen.tsx

@@ -47,12 +47,10 @@ export function ConfirmAccountUnlockScreen({
   if (status === "missing-token") {
     return (
       <AuthCard title={title ?? t("auth.unlockAccount.errorTitle")}>
-        <div className="p-6 pt-0 flex flex-col gap-4">
-          <p className="text-sm text-muted-foreground">{t("auth.unlockAccount.missingToken")}</p>
-          <Link href={loginHref} variant="muted">
-            {t("auth.unlockAccount.goToLogin")}
-          </Link>
-        </div>
+        <p className="text-sm text-muted-foreground">{t("auth.unlockAccount.missingToken")}</p>
+        <Link href={loginHref} variant="muted">
+          {t("auth.unlockAccount.goToLogin")}
+        </Link>
       </AuthCard>
     );
   }
@@ -72,12 +70,10 @@ export function ConfirmAccountUnlockScreen({
   if (status === "success") {
     return (
       <AuthCard title={title ?? t("auth.unlockAccount.successTitle")}>
-        <div className="p-6 pt-0 flex flex-col gap-4">
-          <p className="text-sm text-muted-foreground">{t("auth.unlockAccount.successBody")}</p>
-          <Link href={loginHref} variant="button">
-            {t("auth.unlockAccount.goToLogin")}
-          </Link>
-        </div>
+        <p className="text-sm text-muted-foreground">{t("auth.unlockAccount.successBody")}</p>
+        <Link href={loginHref} variant="button">
+          {t("auth.unlockAccount.goToLogin")}
+        </Link>
       </AuthCard>
     );
   }
@@ -85,12 +81,10 @@ export function ConfirmAccountUnlockScreen({
   // status === "error"
   return (
     <AuthCard title={title ?? t("auth.unlockAccount.errorTitle")}>
-      <div className="p-6 pt-0 flex flex-col gap-4">
-        <p className="text-sm text-muted-foreground">{t("auth.unlockAccount.errorBody")}</p>
-        <Link href={loginHref} variant="muted">
-          {t("auth.unlockAccount.goToLogin")}
-        </Link>
-      </div>
+      <p className="text-sm text-muted-foreground">{t("auth.unlockAccount.errorBody")}</p>
+      <Link href={loginHref} variant="muted">
+        {t("auth.unlockAccount.goToLogin")}
+      </Link>
     </AuthCard>
   );
 }

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

@@ -72,7 +72,7 @@ export function ForgotPasswordScreen({
   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.forgotPassword.successTitle")}</p>
             <p className="mt-1">{t("auth.forgotPassword.successBody")}</p>
@@ -80,9 +80,9 @@ export function ForgotPasswordScreen({
           <Link href={loginHref} variant="muted">
             {t("auth.forgotPassword.backToLogin")}
           </Link>
-        </div>
+        </>
       ) : (
-        <div className="p-6 pt-0 flex flex-col gap-4">
+        <>
           <p className="text-sm text-muted-foreground">{t("auth.forgotPassword.intro")}</p>
           <Form onSubmit={onSubmit}>
             <Field id="forgot-email" label={t("auth.forgotPassword.email")} required>
@@ -104,7 +104,7 @@ export function ForgotPasswordScreen({
           <Link href={loginHref} variant="muted" className="self-center">
             {t("auth.forgotPassword.backToLogin")}
           </Link>
-        </div>
+        </>
       )}
     </AuthCard>
   );

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

@@ -186,87 +186,83 @@ export function InviteAcceptScreen({
   if (token === "") {
     return (
       <AuthCard title={effectiveTitle}>
-        <div className="p-6 pt-0 flex flex-col gap-4">
-          <p className="text-sm text-muted-foreground">{t("auth.inviteAccept.missingToken")}</p>
-          <Link href={loginHref} variant="muted">
-            {t("auth.inviteAccept.goToLogin")}
-          </Link>
-        </div>
+        <p className="text-sm text-muted-foreground">{t("auth.inviteAccept.missingToken")}</p>
+        <Link href={loginHref} variant="muted">
+          {t("auth.inviteAccept.goToLogin")}
+        </Link>
       </AuthCard>
     );
   }
 
   return (
     <AuthCard title={effectiveTitle}>
-      <div className="p-6 pt-0 flex flex-col gap-4">
-        <p className="text-sm text-muted-foreground">{t("auth.inviteAccept.intro")}</p>
+      <p className="text-sm text-muted-foreground">{t("auth.inviteAccept.intro")}</p>
 
-        {mode === "loggedin" ? (
-          <Form onSubmit={onSubmit}>
-            <p className="text-sm">
-              {t("auth.inviteAccept.loggedInAs", { email: session.user?.email ?? "" })}
-            </p>
-            {error !== null && <Banner variant="error">{error}</Banner>}
-            <Button type="submit" loading={submitting} disabled={submitting}>
-              {submitting ? t("auth.inviteAccept.submitting") : t("auth.inviteAccept.acceptButton")}
-            </Button>
-            <Button
-              type="button"
-              variant="secondary"
-              onClick={() => {
-                setMode("anon-existing");
-              }}
-            >
-              {t("auth.inviteAccept.useOtherAccount")}
-            </Button>
-          </Form>
-        ) : (
-          <Form onSubmit={onSubmit}>
-            {mode === "anon-existing" && (
-              <Field id="invite-email" label={t("auth.inviteAccept.email")} required>
-                <Input
-                  kind="email"
-                  id="invite-email"
-                  name="invite-email"
-                  value={email}
-                  onChange={setEmail}
-                  disabled={submitting}
-                  required
-                  autoComplete="email"
-                />
-              </Field>
-            )}
-            <Field id="invite-password" label={t("auth.inviteAccept.password")} required>
+      {mode === "loggedin" ? (
+        <Form onSubmit={onSubmit}>
+          <p className="text-sm">
+            {t("auth.inviteAccept.loggedInAs", { email: session.user?.email ?? "" })}
+          </p>
+          {error !== null && <Banner variant="error">{error}</Banner>}
+          <Button type="submit" loading={submitting} disabled={submitting}>
+            {submitting ? t("auth.inviteAccept.submitting") : t("auth.inviteAccept.acceptButton")}
+          </Button>
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={() => {
+              setMode("anon-existing");
+            }}
+          >
+            {t("auth.inviteAccept.useOtherAccount")}
+          </Button>
+        </Form>
+      ) : (
+        <Form onSubmit={onSubmit}>
+          {mode === "anon-existing" && (
+            <Field id="invite-email" label={t("auth.inviteAccept.email")} required>
               <Input
-                kind="password"
-                id="invite-password"
-                name="invite-password"
-                value={password}
-                onChange={setPassword}
+                kind="email"
+                id="invite-email"
+                name="invite-email"
+                value={email}
+                onChange={setEmail}
                 disabled={submitting}
                 required
-                autoComplete={mode === "anon-existing" ? "current-password" : "new-password"}
+                autoComplete="email"
               />
             </Field>
-            {error !== null && <Banner variant="error">{error}</Banner>}
-            <Button type="submit" loading={submitting} disabled={submitting}>
-              {submitting ? t("auth.inviteAccept.submitting") : t("auth.inviteAccept.submit")}
-            </Button>
-            <Button
-              type="button"
-              variant="secondary"
-              onClick={() => {
-                setMode(mode === "anon-existing" ? "anon-new" : "anon-existing");
-                setError(null);
-              }}
-            >
-              {mode === "anon-existing"
-                ? t("auth.inviteAccept.toggleNew")
-                : t("auth.inviteAccept.toggleExisting")}
-            </Button>
-          </Form>
-        )}
-      </div>
+          )}
+          <Field id="invite-password" label={t("auth.inviteAccept.password")} required>
+            <Input
+              kind="password"
+              id="invite-password"
+              name="invite-password"
+              value={password}
+              onChange={setPassword}
+              disabled={submitting}
+              required
+              autoComplete={mode === "anon-existing" ? "current-password" : "new-password"}
+            />
+          </Field>
+          {error !== null && <Banner variant="error">{error}</Banner>}
+          <Button type="submit" loading={submitting} disabled={submitting}>
+            {submitting ? t("auth.inviteAccept.submitting") : t("auth.inviteAccept.submit")}
+          </Button>
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={() => {
+              setMode(mode === "anon-existing" ? "anon-new" : "anon-existing");
+              setError(null);
+            }}
+          >
+            {mode === "anon-existing"
+              ? t("auth.inviteAccept.toggleNew")
+              : t("auth.inviteAccept.toggleExisting")}
+          </Button>
+        </Form>
+      )}
     </AuthCard>
   );
 }

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

@@ -195,104 +195,102 @@ export function LoginScreen({
 
   return (
     <AuthCard title={effectiveTitle} subtitle={subtitle}>
-      <div className="p-6 pt-0 flex flex-col gap-4">
-        <Form onSubmit={onSubmit}>
-          <Field id="login-email" label={t("auth.login.email")} required>
-            <Input
-              kind="email"
-              id="login-email"
-              name="login-email"
-              value={email}
-              onChange={setEmail}
-              disabled={submitting}
-              required
-              autoComplete="email"
-            />
-          </Field>
-          <Field id="login-password" label={t("auth.login.password")} required>
-            <Input
-              kind="password"
-              id="login-password"
-              name="login-password"
-              value={password}
-              onChange={setPassword}
-              disabled={submitting}
-              required
-              autoComplete="current-password"
-            />
-          </Field>
-          {session.signedOutReason === "session-ended" && (
-            <Banner variant="info">{t("auth.login.sessionEnded")}</Banner>
-          )}
-          {resendStatus.kind === "success" ? (
-            <Banner variant="info">{t("auth.login.resendSuccess")}</Banner>
-          ) : error !== null ? (
-            <Banner variant="error">
-              <div className="flex flex-col gap-1">
-                <span>
-                  {(() => {
-                    const { key, params } = reasonToKey(error);
-                    return t(key, params);
-                  })()}
-                </span>
-                {error.reason === "email_not_verified" &&
-                  email.trim().length > 0 &&
-                  email === failedLoginEmail && (
-                    <span className="self-start">
-                      <Button
-                        variant="link"
-                        onClick={() => void onResend()}
-                        disabled={resendStatus.kind === "sending"}
-                      >
-                        {resendStatus.kind === "sending"
-                          ? t("auth.login.submitting")
-                          : t("auth.login.resendVerification")}
-                      </Button>
-                    </span>
-                  )}
-                {error.reason === "account_locked" && unlockAccountHref !== undefined && (
+      <Form onSubmit={onSubmit}>
+        <Field id="login-email" label={t("auth.login.email")} required>
+          <Input
+            kind="email"
+            id="login-email"
+            name="login-email"
+            value={email}
+            onChange={setEmail}
+            disabled={submitting}
+            required
+            autoComplete="email"
+          />
+        </Field>
+        <Field id="login-password" label={t("auth.login.password")} required>
+          <Input
+            kind="password"
+            id="login-password"
+            name="login-password"
+            value={password}
+            onChange={setPassword}
+            disabled={submitting}
+            required
+            autoComplete="current-password"
+          />
+        </Field>
+        {session.signedOutReason === "session-ended" && (
+          <Banner variant="info">{t("auth.login.sessionEnded")}</Banner>
+        )}
+        {resendStatus.kind === "success" ? (
+          <Banner variant="info">{t("auth.login.resendSuccess")}</Banner>
+        ) : error !== null ? (
+          <Banner variant="error">
+            <div className="flex flex-col gap-1">
+              <span>
+                {(() => {
+                  const { key, params } = reasonToKey(error);
+                  return t(key, params);
+                })()}
+              </span>
+              {error.reason === "email_not_verified" &&
+                email.trim().length > 0 &&
+                email === failedLoginEmail && (
                   <span className="self-start">
-                    <Link href={unlockAccountHref} variant="default">
-                      {t("auth.login.unlockAccount")}
-                    </Link>
+                    <Button
+                      variant="link"
+                      onClick={() => void onResend()}
+                      disabled={resendStatus.kind === "sending"}
+                    >
+                      {resendStatus.kind === "sending"
+                        ? t("auth.login.submitting")
+                        : t("auth.login.resendVerification")}
+                    </Button>
                   </span>
                 )}
-                {resendStatus.kind === "rateLimited" && (
-                  <span className="text-xs">{t("auth.login.resendRateLimited")}</span>
-                )}
-                {resendStatus.kind === "error" && (
-                  <span className="text-xs">{t("auth.login.resendError")}</span>
-                )}
-              </div>
-            </Banner>
-          ) : null}
-          <Button type="submit" loading={submitting} disabled={submitting}>
-            {submitting ? t("auth.login.submitting") : effectiveSubmit}
-          </Button>
-        </Form>
-        {forgotPasswordHref !== undefined && (
-          <Link href={forgotPasswordHref} variant="muted" className="self-center">
-            {t("auth.login.forgotPassword")}
-          </Link>
-        )}
-        {signupHref !== undefined && (
-          <Link href={signupHref} variant="muted" className="self-center">
-            {t("auth.signup.title")}
-          </Link>
-        )}
-        {legalLinks !== undefined && legalLinks.length > 0 && (
-          <nav
-            data-testid="login-legal-links"
-            className="flex items-center justify-center gap-3 pt-2 border-t border-border/50"
-          >
-            {legalLinks.map((link) => (
-              <Link key={link.href} href={link.href} variant="muted" className="text-xs">
-                {link.label}
-              </Link>
-            ))}
-          </nav>
-        )}
-      </div>
+              {error.reason === "account_locked" && unlockAccountHref !== undefined && (
+                <span className="self-start">
+                  <Link href={unlockAccountHref} variant="default">
+                    {t("auth.login.unlockAccount")}
+                  </Link>
+                </span>
+              )}
+              {resendStatus.kind === "rateLimited" && (
+                <span className="text-xs">{t("auth.login.resendRateLimited")}</span>
+              )}
+              {resendStatus.kind === "error" && (
+                <span className="text-xs">{t("auth.login.resendError")}</span>
+              )}
+            </div>
+          </Banner>
+        ) : null}
+        <Button type="submit" loading={submitting} disabled={submitting}>
+          {submitting ? t("auth.login.submitting") : effectiveSubmit}
+        </Button>
+      </Form>
+      {forgotPasswordHref !== undefined && (
+        <Link href={forgotPasswordHref} variant="muted" className="self-center">
+          {t("auth.login.forgotPassword")}
+        </Link>
+      )}
+      {signupHref !== undefined && (
+        <Link href={signupHref} variant="muted" className="self-center">
+          {t("auth.signup.title")}
+        </Link>
+      )}
+      {legalLinks !== undefined && legalLinks.length > 0 && (
+        <nav
+          data-testid="login-legal-links"
+          className="flex items-center justify-center gap-3 pt-2 border-t border-border/50"
+        >
+          {legalLinks.map((link) => (
+            <Link key={link.href} href={link.href} variant="muted" className="text-xs">
+              {link.label}
+            </Link>
+          ))}
+        </nav>
+      )}
     </AuthCard>
   );
 }

package/packages/bundled-features/src/auth-email-password/web/request-account-unlock-screen.tsx

@@ -73,7 +73,7 @@ export function RequestAccountUnlockScreen({
   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.requestUnlock.successTitle")}</p>
             <p className="mt-1">{t("auth.requestUnlock.successBody")}</p>
@@ -81,9 +81,9 @@ export function RequestAccountUnlockScreen({
           <Link href={loginHref} variant="muted">
             {t("auth.requestUnlock.backToLogin")}
           </Link>
-        </div>
+        </>
       ) : (
-        <div className="p-6 pt-0 flex flex-col gap-4">
+        <>
           <p className="text-sm text-muted-foreground">{t("auth.requestUnlock.intro")}</p>
           <Form onSubmit={onSubmit}>
             <Field id="unlock-email" label={t("auth.requestUnlock.email")} required>
@@ -105,7 +105,7 @@ export function RequestAccountUnlockScreen({
           <Link href={loginHref} variant="muted" className="self-center">
             {t("auth.requestUnlock.backToLogin")}
           </Link>
-        </div>
+        </>
       )}
     </AuthCard>
   );

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

@@ -83,12 +83,10 @@ export function ResetPasswordScreen({
   if (token === "") {
     return (
       <AuthCard title={effectiveTitle}>
-        <div className="p-6 pt-0 flex flex-col gap-4">
-          <p className="text-sm text-muted-foreground">{t("auth.resetPassword.missingToken")}</p>
-          <Link href={loginHref} variant="muted">
-            {t("auth.resetPassword.goToLogin")}
-          </Link>
-        </div>
+        <p className="text-sm text-muted-foreground">{t("auth.resetPassword.missingToken")}</p>
+        <Link href={loginHref} variant="muted">
+          {t("auth.resetPassword.goToLogin")}
+        </Link>
       </AuthCard>
     );
   }
@@ -96,7 +94,7 @@ export function ResetPasswordScreen({
   return (
     <AuthCard title={effectiveTitle}>
       {done ? (
-        <div className="p-6 pt-0 flex flex-col gap-4">
+        <>
           <Banner variant="info">
             <p className="font-medium text-foreground">{t("auth.resetPassword.successTitle")}</p>
             <p className="mt-1">{t("auth.resetPassword.successBody")}</p>
@@ -104,9 +102,9 @@ export function ResetPasswordScreen({
           <Link href={loginHref} variant="button">
             {t("auth.resetPassword.goToLogin")}
           </Link>
-        </div>
+        </>
       ) : (
-        <div className="p-6 pt-0 flex flex-col gap-4">
+        <>
           <p className="text-sm text-muted-foreground">{t("auth.resetPassword.intro")}</p>
           <Form onSubmit={onSubmit}>
             <Field id="reset-new-password" label={t("auth.resetPassword.newPassword")} required>
@@ -142,7 +140,7 @@ export function ResetPasswordScreen({
               {submitting ? t("auth.resetPassword.submitting") : t("auth.resetPassword.submit")}
             </Button>
           </Form>
-        </div>
+        </>
       )}
     </AuthCard>
   );

package/packages/bundled-features/src/auth-email-password/web/session-bootstrap-error.tsx

@@ -44,22 +44,20 @@ export function SessionBootstrapErrorScreen({
 
   return (
     <div data-testid="session-bootstrap-error" data-http-status={failure.httpStatus ?? "network"}>
-      <AuthCard title={t("auth.sessionBootstrap.errorTitle")}>
-        <div className="flex flex-col gap-4 px-6 pb-4">
-          <Banner variant="error">
-            {failure.httpStatus === 429
-              ? t("auth.sessionBootstrap.rateLimitedBody")
-              : t("auth.sessionBootstrap.errorBody")}
-          </Banner>
-          <Button variant="primary" onClick={handleRetry} disabled={retrying}>
-            {retrying ? t("auth.sessionBootstrap.retrying") : t("auth.sessionBootstrap.retry")}
+      <AuthCard title={t("auth.sessionBootstrap.errorTitle")} bodyClassName="pb-4">
+        <Banner variant="error">
+          {failure.httpStatus === 429
+            ? t("auth.sessionBootstrap.rateLimitedBody")
+            : t("auth.sessionBootstrap.errorBody")}
+        </Banner>
+        <Button variant="primary" onClick={handleRetry} disabled={retrying}>
+          {retrying ? t("auth.sessionBootstrap.retrying") : t("auth.sessionBootstrap.retry")}
+        </Button>
+        {onSignOut !== undefined && (
+          <Button variant="secondary" onClick={() => void onSignOut()} disabled={retrying}>
+            {t("auth.sessionBootstrap.signOut")}
           </Button>
-          {onSignOut !== undefined && (
-            <Button variant="secondary" onClick={() => void onSignOut()} disabled={retrying}>
-              {t("auth.sessionBootstrap.signOut")}
-            </Button>
-          )}
-        </div>
+        )}
       </AuthCard>
     </div>
   );