@cosmicdrift/kumiko-bundled-features 0.130.2 → 0.131.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-bundled-features",
-  "version": "0.130.2",
+  "version": "0.131.0",
   "description": "Built-in features — tenant, user, auth, delivery. The stuff you'd rewrite anyway, already typed.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -107,11 +107,11 @@
     "./step-dispatcher": "./src/step-dispatcher/index.ts"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.130.2",
-    "@cosmicdrift/kumiko-framework": "0.130.2",
-    "@cosmicdrift/kumiko-headless": "0.130.2",
-    "@cosmicdrift/kumiko-renderer": "0.130.2",
-    "@cosmicdrift/kumiko-renderer-web": "0.130.2",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.131.0",
+    "@cosmicdrift/kumiko-framework": "0.131.0",
+    "@cosmicdrift/kumiko-headless": "0.131.0",
+    "@cosmicdrift/kumiko-renderer": "0.131.0",
+    "@cosmicdrift/kumiko-renderer-web": "0.131.0",
     "@mollie/api-client": "^4.5.0",
     "@node-rs/argon2": "^2.0.2",
     "@types/nodemailer": "^8.0.0",

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

@@ -9,14 +9,13 @@
 //                         (full-screen, zentriert, max-w-sm). Web-only;
 //                         eine Native-Variante landet bei Bedarf
 //                         daneben (z.B. SafeArea + ScrollView).
-//   authButtonClass     — Tailwind-Class für anchor-styled-as-button
-//                         (z.B. "Zum Login"-Link nach Reset-Success).
-//                         Nur dort, wo ein <a>-Tag rendert.
-//   authMutedLinkClass  — Subtle-Link-Style.
 //   parseUrlToken       — URL-Param-Helper (window.location.search).
+//
+// Link-Styles laufen über das Link-Primitive (variant="button"/"muted") —
+// die früheren authButtonClass/authMutedLinkClass sind dorthin gewandert.
 
 import { usePrimitives } from "@cosmicdrift/kumiko-renderer";
-import { BareFormProvider, cn } from "@cosmicdrift/kumiko-renderer-web";
+import { BareFormProvider } from "@cosmicdrift/kumiko-renderer-web";
 import { createContext, type ReactNode, useContext, useEffect, useState } from "react";
 
 // Wrappt die zentrierte Auth-Card in ihre Umgebung. Default = Fullscreen-
@@ -80,20 +79,6 @@ export function AuthCard({ title, subtitle, children }: AuthCardProps): ReactNod
   return shell(card);
 }
 
-// Primary-button-Style für anchor-Tags die wie ein Button aussehen
-// (z.B. "Zum Login"-Link nach Reset-Success — kein <Button> weil <a>).
-export const authButtonClass = cn(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors",
-  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-  "disabled:pointer-events-none disabled:opacity-50",
-  "bg-primary text-primary-foreground shadow hover:bg-primary/90 h-9 px-4 py-2",
-);
-
-// Subtle-Link-Style (für "Zurück zum Login"-Anchors). Fixed margin/
-// alignment-classes lassen wir den Caller setzen — nur Farbe + hover.
-export const authMutedLinkClass =
-  "text-sm text-muted-foreground hover:text-foreground underline-offset-4 hover:underline";
-
 // Liest `?<paramName>=<value>` aus der aktuellen URL — typisches
 // Pattern für Token-bearing Pages (reset, verify). Returnt "" wenn der
 // Browser nicht da ist (SSR-safety) oder der Parameter fehlt.

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

@@ -12,7 +12,7 @@
 import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { type FormEvent, type ReactNode, useState } from "react";
 import { requestPasswordReset } from "./auth-client";
-import { AuthCard, authMutedLinkClass } from "./auth-form-primitives";
+import { AuthCard } from "./auth-form-primitives";
 
 export type ForgotPasswordScreenProps = {
   readonly title?: string;
@@ -28,7 +28,7 @@ export function ForgotPasswordScreen({
   loginHref = "/login",
 }: ForgotPasswordScreenProps): ReactNode {
   const t = useTranslation();
-  const { Form, Field, Input, Button, Banner } = usePrimitives();
+  const { Form, Field, Input, Button, Banner, Link } = usePrimitives();
   const [email, setEmail] = useState("");
   const [submitting, setSubmitting] = useState(false);
   const [done, setDone] = useState(false);
@@ -77,9 +77,9 @@ export function ForgotPasswordScreen({
             <p className="font-medium text-foreground">{t("auth.forgotPassword.successTitle")}</p>
             <p className="mt-1">{t("auth.forgotPassword.successBody")}</p>
           </Banner>
-          <a href={loginHref} className={authMutedLinkClass}>
+          <Link href={loginHref} variant="muted">
             {t("auth.forgotPassword.backToLogin")}
-          </a>
+          </Link>
         </div>
       ) : (
         <div className="p-6 pt-0 flex flex-col gap-4">
@@ -101,9 +101,9 @@ export function ForgotPasswordScreen({
               {submitting ? t("auth.forgotPassword.submitting") : t("auth.forgotPassword.submit")}
             </Button>
           </Form>
-          <a href={loginHref} className={`${authMutedLinkClass} self-center`}>
+          <Link href={loginHref} variant="muted" className="self-center">
             {t("auth.forgotPassword.backToLogin")}
-          </a>
+          </Link>
         </div>
       )}
     </AuthCard>

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

@@ -19,7 +19,7 @@
 import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { type FormEvent, type ReactNode, useContext, useState } from "react";
 import { csrfHeader } from "./auth-client";
-import { AuthCard, authMutedLinkClass, useUrlToken } from "./auth-form-primitives";
+import { AuthCard, useUrlToken } from "./auth-form-primitives";
 import { SessionContext, UNAUTHENTICATED } from "./session";
 
 export type InviteAcceptScreenProps = {
@@ -41,7 +41,7 @@ export function InviteAcceptScreen({
   loginHref = "/login",
 }: InviteAcceptScreenProps): ReactNode {
   const t = useTranslation();
-  const { Form, Field, Input, Button, Banner } = usePrimitives();
+  const { Form, Field, Input, Button, Banner, Link } = usePrimitives();
   // NOT useSession(): InviteAcceptScreen is a public route (anon invite-links
   // are the documented use case) — useSession() throws without a
   // <SessionProvider> ancestor. Read the context directly and fall back to
@@ -142,9 +142,9 @@ export function InviteAcceptScreen({
       <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>
-          <a href={loginHref} className={authMutedLinkClass}>
+          <Link href={loginHref} variant="muted">
             {t("auth.inviteAccept.goToLogin")}
-          </a>
+          </Link>
         </div>
       </AuthCard>
     );

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

@@ -12,7 +12,7 @@
 import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { type FormEvent, type ReactNode, useState } from "react";
 import { type LoginFailure, requestEmailVerification } from "./auth-client";
-import { AuthCard, authMutedLinkClass } from "./auth-form-primitives";
+import { AuthCard } from "./auth-form-primitives";
 import { useSession } from "./session";
 
 // Resend-Status für den "Bestätigungs-Mail erneut senden"-Flow, der bei
@@ -92,7 +92,7 @@ export function LoginScreen({
   legalLinks,
 }: LoginScreenProps): ReactNode {
   const t = useTranslation();
-  const { Form, Field, Input, Button, Banner } = usePrimitives();
+  const { Form, Field, Input, Button, Banner, Link } = usePrimitives();
   const session = useSession();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -186,17 +186,17 @@ export function LoginScreen({
                 {error.reason === "email_not_verified" &&
                   email.trim().length > 0 &&
                   email === failedLoginEmail && (
-                    // kumiko-lint-ignore primitives-discipline Inline-Link im Banner (UX-Choice); Button-Primitive hat keinen link-Variant
-                    <button
-                      type="button"
-                      onClick={() => void onResend()}
-                      disabled={resendStatus.kind === "sending"}
-                      className={`${authMutedLinkClass} self-start text-left disabled:opacity-50`}
-                    >
-                      {resendStatus.kind === "sending"
-                        ? t("auth.login.submitting")
-                        : t("auth.login.resendVerification")}
-                    </button>
+                    <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>
                   )}
                 {resendStatus.kind === "rateLimited" && (
                   <span className="text-xs">{t("auth.login.resendRateLimited")}</span>
@@ -212,14 +212,14 @@ export function LoginScreen({
           </Button>
         </Form>
         {forgotPasswordHref !== undefined && (
-          <a href={forgotPasswordHref} className={`${authMutedLinkClass} self-center`}>
+          <Link href={forgotPasswordHref} variant="muted" className="self-center">
             {t("auth.login.forgotPassword")}
-          </a>
+          </Link>
         )}
         {signupHref !== undefined && (
-          <a href={signupHref} className={`${authMutedLinkClass} self-center`}>
+          <Link href={signupHref} variant="muted" className="self-center">
             {t("auth.signup.title")}
-          </a>
+          </Link>
         )}
         {legalLinks !== undefined && legalLinks.length > 0 && (
           <nav
@@ -227,9 +227,9 @@ export function LoginScreen({
             className="flex items-center justify-center gap-3 pt-2 border-t border-border/50"
           >
             {legalLinks.map((link) => (
-              <a key={link.href} href={link.href} className={`${authMutedLinkClass} text-xs`}>
+              <Link key={link.href} href={link.href} variant="muted" className="text-xs">
                 {link.label}
-              </a>
+              </Link>
             ))}
           </nav>
         )}

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

@@ -13,7 +13,7 @@
 import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { type FormEvent, type ReactNode, useState } from "react";
 import { resetPassword } from "./auth-client";
-import { AuthCard, authButtonClass, authMutedLinkClass, useUrlToken } from "./auth-form-primitives";
+import { AuthCard, useUrlToken } from "./auth-form-primitives";
 
 export type ResetPasswordScreenProps = {
   readonly title?: string;
@@ -31,7 +31,7 @@ export function ResetPasswordScreen({
   loginHref = "/login",
 }: ResetPasswordScreenProps): ReactNode {
   const t = useTranslation();
-  const { Form, Field, Input, Button, Banner } = usePrimitives();
+  const { Form, Field, Input, Button, Banner, Link } = usePrimitives();
   const token = useUrlToken(tokenProp);
   const [newPassword, setNewPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
@@ -83,9 +83,9 @@ export function ResetPasswordScreen({
       <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>
-          <a href={loginHref} className={authMutedLinkClass}>
+          <Link href={loginHref} variant="muted">
             {t("auth.resetPassword.goToLogin")}
-          </a>
+          </Link>
         </div>
       </AuthCard>
     );
@@ -99,9 +99,9 @@ export function ResetPasswordScreen({
             <p className="font-medium text-foreground">{t("auth.resetPassword.successTitle")}</p>
             <p className="mt-1">{t("auth.resetPassword.successBody")}</p>
           </Banner>
-          <a href={loginHref} className={authButtonClass}>
+          <Link href={loginHref} variant="button">
             {t("auth.resetPassword.goToLogin")}
-          </a>
+          </Link>
         </div>
       ) : (
         <div className="p-6 pt-0 flex flex-col gap-4">

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

@@ -18,7 +18,7 @@
 import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { type FormEvent, type ReactNode, useState } from "react";
 import { confirmSignup } from "./auth-client";
-import { AuthCard, authMutedLinkClass, useUrlToken } from "./auth-form-primitives";
+import { AuthCard, useUrlToken } from "./auth-form-primitives";
 
 export type SignupCompleteScreenProps = {
   readonly title?: string;
@@ -43,7 +43,7 @@ export function SignupCompleteScreen({
   loginHref = "/login",
 }: SignupCompleteScreenProps): ReactNode {
   const t = useTranslation();
-  const { Form, Field, Input, Button, Banner } = usePrimitives();
+  const { Form, Field, Input, Button, Banner, Link } = usePrimitives();
   const token = useUrlToken(tokenProp);
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
@@ -98,9 +98,9 @@ export function SignupCompleteScreen({
       <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>
-          <a href={loginHref} className={authMutedLinkClass}>
+          <Link href={loginHref} variant="muted">
             {t("auth.signup.haveAccount")}
-          </a>
+          </Link>
         </div>
       </AuthCard>
     );

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

@@ -15,7 +15,7 @@
 import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { type FormEvent, type ReactNode, useState } from "react";
 import { requestSignup } from "./auth-client";
-import { AuthCard, authMutedLinkClass } from "./auth-form-primitives";
+import { AuthCard } from "./auth-form-primitives";
 
 export type SignupScreenProps = {
   readonly title?: string;
@@ -31,7 +31,7 @@ export function SignupScreen({
   loginHref = "/login",
 }: SignupScreenProps): ReactNode {
   const t = useTranslation();
-  const { Form, Field, Input, Button, Banner } = usePrimitives();
+  const { Form, Field, Input, Button, Banner, Link } = usePrimitives();
   const [email, setEmail] = useState("");
   const [submitting, setSubmitting] = useState(false);
   const [done, setDone] = useState(false);
@@ -95,9 +95,9 @@ export function SignupScreen({
           <Button variant="secondary" onClick={onResend} disabled={submitting}>
             {t("auth.signup.resend")}
           </Button>
-          <a href={loginHref} className={authMutedLinkClass}>
+          <Link href={loginHref} variant="muted">
             {t("auth.signup.haveAccount")}
-          </a>
+          </Link>
         </div>
       ) : (
         <div className="p-6 pt-0 flex flex-col gap-4">
@@ -120,9 +120,9 @@ export function SignupScreen({
               {submitting ? t("auth.signup.submitting") : t("auth.signup.submit")}
             </Button>
           </Form>
-          <a href={loginHref} className={`${authMutedLinkClass} self-center`}>
+          <Link href={loginHref} variant="muted" className="self-center">
             {t("auth.signup.haveAccount")}
-          </a>
+          </Link>
         </div>
       )}
     </AuthCard>

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

@@ -10,10 +10,10 @@
 // nicht den ersten valid-call beim Mount und den zweiten als invalid-
 // Banner sehen.
 
-import { useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { type ReactNode, useEffect, useRef, useState } from "react";
 import { verifyEmail } from "./auth-client";
-import { AuthCard, authButtonClass, authMutedLinkClass, useUrlToken } from "./auth-form-primitives";
+import { AuthCard, useUrlToken } from "./auth-form-primitives";
 
 export type VerifyEmailScreenProps = {
   readonly title?: string;
@@ -31,6 +31,7 @@ export function VerifyEmailScreen({
   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);
@@ -50,9 +51,9 @@ export function VerifyEmailScreen({
       <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>
-          <a href={loginHref} className={authMutedLinkClass}>
+          <Link href={loginHref} variant="muted">
             {t("auth.verifyEmail.goToLogin")}
-          </a>
+          </Link>
         </div>
       </AuthCard>
     );
@@ -75,9 +76,9 @@ export function VerifyEmailScreen({
       <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>
-          <a href={loginHref} className={authButtonClass}>
+          <Link href={loginHref} variant="button">
             {t("auth.verifyEmail.goToLogin")}
-          </a>
+          </Link>
         </div>
       </AuthCard>
     );
@@ -88,9 +89,9 @@ export function VerifyEmailScreen({
     <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>
-        <a href={loginHref} className={authMutedLinkClass}>
+        <Link href={loginHref} variant="muted">
           {t("auth.verifyEmail.goToLogin")}
-        </a>
+        </Link>
       </div>
     </AuthCard>
   );