@cosmicdrift/kumiko-samples 0.340.0 → 0.342.0

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>
   );

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

@@ -112,12 +112,10 @@ export function SignupCompleteScreen({
   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.signupComplete.missingToken")}</p>
-          <Link href={loginHref} variant="muted">
-            {t("auth.signup.haveAccount")}
-          </Link>
-        </div>
+        <p className="text-sm text-muted-foreground">{t("auth.signupComplete.missingToken")}</p>
+        <Link href={loginHref} variant="muted">
+          {t("auth.signup.haveAccount")}
+        </Link>
       </AuthCard>
     );
   }
@@ -125,57 +123,53 @@ export function SignupCompleteScreen({
   if (continueHref !== null) {
     return (
       <AuthCard title={effectiveTitle}>
-        <div className="p-6 pt-0 flex flex-col gap-4">
-          <p className="text-sm text-muted-foreground" role="status">
-            {t("auth.signupComplete.activated")}
-          </p>
-          <Link href={continueHref} variant="button">
-            {t("auth.signupComplete.continue")}
-          </Link>
-        </div>
+        <p className="text-sm text-muted-foreground" role="status">
+          {t("auth.signupComplete.activated")}
+        </p>
+        <Link href={continueHref} variant="button">
+          {t("auth.signupComplete.continue")}
+        </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.signupComplete.intro")}</p>
-        <Form onSubmit={onSubmit}>
-          <Field id="signup-password" label={t("auth.signupComplete.password")} required>
-            <Input
-              kind="password"
-              id="signup-password"
-              name="signup-password"
-              value={password}
-              onChange={setPassword}
-              disabled={submitting}
-              required
-              autoComplete="new-password"
-            />
-          </Field>
-          <Field
+      <p className="text-sm text-muted-foreground">{t("auth.signupComplete.intro")}</p>
+      <Form onSubmit={onSubmit}>
+        <Field id="signup-password" label={t("auth.signupComplete.password")} required>
+          <Input
+            kind="password"
+            id="signup-password"
+            name="signup-password"
+            value={password}
+            onChange={setPassword}
+            disabled={submitting}
+            required
+            autoComplete="new-password"
+          />
+        </Field>
+        <Field
+          id="signup-confirm-password"
+          label={t("auth.signupComplete.confirmPassword")}
+          required
+        >
+          <Input
+            kind="password"
             id="signup-confirm-password"
-            label={t("auth.signupComplete.confirmPassword")}
+            name="signup-confirm-password"
+            value={confirmPassword}
+            onChange={setConfirmPassword}
+            disabled={submitting}
             required
-          >
-            <Input
-              kind="password"
-              id="signup-confirm-password"
-              name="signup-confirm-password"
-              value={confirmPassword}
-              onChange={setConfirmPassword}
-              disabled={submitting}
-              required
-              autoComplete="new-password"
-            />
-          </Field>
-          {error !== null && <Banner variant="error">{error}</Banner>}
-          <Button type="submit" loading={submitting} disabled={submitting}>
-            {submitting ? t("auth.signupComplete.submitting") : t("auth.signupComplete.submit")}
-          </Button>
-        </Form>
-      </div>
+            autoComplete="new-password"
+          />
+        </Field>
+        {error !== null && <Banner variant="error">{error}</Banner>}
+        <Button type="submit" loading={submitting} disabled={submitting}>
+          {submitting ? t("auth.signupComplete.submitting") : t("auth.signupComplete.submit")}
+        </Button>
+      </Form>
     </AuthCard>
   );
 }

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

@@ -85,7 +85,7 @@ export function SignupScreen({
   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>
@@ -96,9 +96,9 @@ export function SignupScreen({
           <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>
@@ -121,7 +121,7 @@ export function SignupScreen({
           <Link href={loginHref} variant="muted" className="self-center">
             {t("auth.signup.haveAccount")}
           </Link>
-        </div>
+        </>
       )}
     </AuthCard>
   );