refactor(ui): adopt Mantine Marquee and drop mount guards

Rebuild the integration marquee on Mantine's Marquee, SimpleGrid and
ThemeIcon instead of the hand-rolled grid, track and keyframes, and
reduce the stylesheet to the mask and reduced-motion rule.

Drop the useMounted guards from the login form and let the buttons rely
on the pending state alone, and use Group for the restore flow's file
summary.

packages/onboarding/src/onboarding-studio.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import type { ReactNode } from "react";
 import { useEffect, useState } from "react";
 import { Alert, Button, Center, Paper, Stack, Text, Title } from "@mantine/core";
 
@@ -13,13 +14,18 @@ import { Finish } from "./finish";
 import { SetupStudio } from "./setup-studio";
 import { Welcome } from "./welcome";
 
+type ClaimState = "checking" | "ready" | "locked" | "signIn" | "error";
+
+const getInitialClaimState = (accessState: ReturnType<typeof getOnboardingAccessState>): ClaimState => {
+  if (accessState === "claim") return "checking";
+  return accessState;
+};
+
 export const OnboardingStudio = (props: OnboardingStudioProps) => {
   const t = useScopedI18n("init.studio.claim");
   const tCommon = useScopedI18n("common.action");
   const accessState = getOnboardingAccessState(props.environment);
-  const [claimState, setClaimState] = useState<"checking" | "ready" | "locked" | "signIn" | "error">(
-    accessState === "claim" ? "checking" : accessState,
-  );
+  const [claimState, setClaimState] = useState<ClaimState>(() => getInitialClaimState(accessState));
   const [claimError, setClaimError] = useState<string | null>(null);
 
   useEffect(() => {
@@ -56,43 +62,52 @@ export const OnboardingStudio = (props: OnboardingStudioProps) => {
   }, [accessState, t]);
 
   if (claimState !== "ready") {
-    const signIn = claimState === "signIn";
+    let title = t("errorTitle");
+    let description = claimError ?? t("errorDescription");
+    let action: ReactNode = (
+      <Stack align="center">
+        <Alert color="red" role="alert">
+          {description}
+        </Alert>
+        <Button onClick={() => window.location.reload()}>{tCommon("tryAgain")}</Button>
+      </Stack>
+    );
+
+    switch (claimState) {
+      case "checking":
+        title = t("checkingTitle");
+        description = t("checking");
+        action = null;
+        break;
+      case "signIn":
+        title = t("signInTitle");
+        description = t("signInDescription");
+        action = (
+          <Button component={Link} href="/auth/login?callbackUrl=%2Finit">
+            {t("signIn")}
+          </Button>
+        );
+        break;
+      case "locked":
+        title = t("lockedTitle");
+        description = t("lockedDescription");
+        action = <Button onClick={() => window.location.reload()}>{tCommon("tryAgain")}</Button>;
+        break;
+      case "error":
+        break;
+    }
+
     return (
       <Center mih="100dvh" p="md">
         <Paper withBorder radius="lg" p="xl" maw="32rem" w="100%">
           <Stack align="center">
             <Title order={1} size="h2" ta="center">
-              {claimState === "checking"
-                ? t("checkingTitle")
-                : signIn
-                  ? t("signInTitle")
-                  : claimState === "locked"
-                    ? t("lockedTitle")
-                    : t("errorTitle")}
+              {title}
             </Title>
             <Text c="dimmed" ta="center">
-              {signIn
-                ? t("signInDescription")
-                : claimState === "locked"
-                  ? t("lockedDescription")
-                  : claimState === "checking"
-                    ? t("checking")
-                    : (claimError ?? t("errorDescription"))}
+              {description}
             </Text>
-            {signIn ? (
-              <Button component={Link} href="/auth/login?callbackUrl=%2Finit">
-                {t("signIn")}
-              </Button>
-            ) : claimState === "locked" ? (
-              <Button onClick={() => window.location.reload()}>{tCommon("tryAgain")}</Button>
-            ) : claimState === "error" ? (
-              <Stack align="center">
-                <Alert color="red" role="alert">
-                  {claimError ?? t("errorDescription")}
-                </Alert>
-                <Button onClick={() => window.location.reload()}>{tCommon("tryAgain")}</Button>
-              </Stack>
-            ) : null}
+            {action}
           </Stack>
         </Paper>
       </Center>