astryx-dracula 0.5.0 → 0.6.2

package/templates/login-card.template.mjs

@@ -1,6 +1,7 @@
 export default {
-  type: 'page',
-  name: 'Login Card',
-  description: 'Centered auth card with email and password',
-  category: 'auth',
+	type: "page",
+	name: "Login Card",
+	description: "Centered auth card with email and password",
+	keywords: ["login", "sign in", "auth", "card", "credentials", "account"],
+	category: "auth",
 };

package/templates/login-card.tsx

@@ -1,83 +1,74 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   Ctr > V[g=4 a=center] > (V[g=2 a=center] > Ic + Tx"Castle Dracula"[t=body]) + (C[p=4] > V[g=4] > (V[g=1 a=center] > Hd"Welcome back to the night"[level=1] + Tx"Sign in to your crypt"[t=body]) + (V[g=2] > TI"Email"[t=email] + (V[g=1] > TI"Password"[t=password] + Lk"Forgot password?")) + B.primary"Enter the night" + D"Or continue with" + (V[g=3] > B.secondary"Login with Apple" + B.secondary"Login with Google") + (V[a=center] > Tx"New to the castle?"[t=supporting] + Lk"Sign up")) + (V[a=center] > Tx"By clicking continue, you agree to our Terms of service and Privacy policy"[t=supporting])
+// XLE (canonical structure of the tree below; the CLI had no XLE validator
+// after `astryx layout` was removed in 0.7.0, so this is a reading aid and a
+// human drift check — update it with the file, never alone):
+//   Ctr > V[g=4 a=center] > (V[g=2 a=center] > Ic + Tx"Castle Dracula"[t=body]) + (C[p=4] > V[g=4] > (V[g=1 a=center] > Hd"Welcome back to the night"[level=1 t=display-2] + Tx"Sign in to your crypt"[t=body]) + (V[g=2] > TI"Email"[t=email] + (V[g=1] > TI"Password"[t=password] + Lk"Forgot password?")) + B.primary"Sign in" + D"Or continue with" + (V[g=3] > B.secondary"Login with Apple" + B.secondary"Login with Google") + (V[a=center] > Tx"New to the castle?"[t=supporting] + Lk"Sign up")) + (V[a=center] > Tx"By clicking continue, you agree to our Terms of service and Privacy policy"[t=supporting])
 
-import {useState, useTransition} from 'react';
-import {demoLogin} from 'astryx-dracula/shared/login-demo';
-import {AppleIcon, GoogleIcon} from 'astryx-dracula/shared/sso-icons';
+import { Button } from "@astryxdesign/core/Button";
+import { Center } from "@astryxdesign/core/Center";
+import { Divider } from "@astryxdesign/core/Divider";
+import { VStack } from "@astryxdesign/core/Layout";
+import { AuthCard, AuthLoginFields, LoginBrand } from "astryx-dracula/shared/auth-chrome";
 import {
-  AUTH_SSO_DIVIDER,
-  AUTH_ERROR_MESSAGE,
-} from 'astryx-dracula/shared/auth-copy';
-import {VStack} from '@astryxdesign/core/Layout';
-import {Center} from '@astryxdesign/core/Center';
-import {Button} from '@astryxdesign/core/Button';
-import {Divider} from '@astryxdesign/core/Divider';
-
-import {authPageStyle as pageStyle, authContentStyle as contentStyle} from 'astryx-dracula/shared/auth-chrome-config';
-import {LoginBrand, AuthCard, AuthLoginFields} from 'astryx-dracula/shared/auth-chrome';
+	authContentStyle as contentStyle,
+	authPageStyle as pageStyle,
+} from "astryx-dracula/shared/auth-chrome-config";
+import { AUTH_ERROR_MESSAGE, AUTH_SSO_DIVIDER } from "astryx-dracula/shared/auth-copy";
+import { demoLogin } from "astryx-dracula/shared/login-demo";
+import { AppleIcon, GoogleIcon } from "astryx-dracula/shared/sso-icons";
+import { useState, useTransition } from "react";
 
 export default function LoginCard() {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState<string | null>(null);
-  const [isLoading, startTransition] = useTransition();
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [error, setError] = useState<string | null>(null);
+	const [isLoading, startTransition] = useTransition();
 
-  const handleLogin = () => {
-    if (!email || !password) {
-      setError(AUTH_ERROR_MESSAGE);
-      return;
-    }
-    setError(null);
-    startTransition(async () => {
-      await demoLogin();
-      setError(AUTH_ERROR_MESSAGE);
-    });
-  };
+	const handleLogin = () => {
+		if (!email || !password) {
+			setError(AUTH_ERROR_MESSAGE);
+			return;
+		}
+		setError(null);
+		startTransition(async () => {
+			await demoLogin();
+			setError(AUTH_ERROR_MESSAGE);
+		});
+	};
 
-  return (
-    <Center axis="both" style={pageStyle}>
-      <VStack gap={4} hAlign="center" style={contentStyle}>
-        <LoginBrand />
+	return (
+		<Center axis="both" style={pageStyle}>
+			<VStack gap={4} hAlign="center" style={contentStyle}>
+				<LoginBrand />
 
-        <AuthCard selfHash="#/templates/login-card">
-          <AuthLoginFields
-            email={email}
-            password={password}
-            error={error}
-            selfHash="#/templates/login-card"
-            isLoading={isLoading}
-            onEmailChange={(v: string) => {
-              setEmail(v);
-              setError(null);
-            }}
-            onPasswordChange={(v: string) => {
-              setPassword(v);
-              setError(null);
-            }}
-            onSubmit={handleLogin}
-          />
+				<AuthCard selfHash="#/templates/login-card">
+					<AuthLoginFields
+						email={email}
+						password={password}
+						error={error}
+						selfHash="#/templates/login-card"
+						isLoading={isLoading}
+						onEmailChange={(v: string) => {
+							setEmail(v);
+							setError(null);
+						}}
+						onPasswordChange={(v: string) => {
+							setPassword(v);
+							setError(null);
+						}}
+						onSubmit={handleLogin}
+					/>
 
-          {/* Divider */}
-          <Divider label={AUTH_SSO_DIVIDER} />
+					{/* Divider */}
+					<Divider label={AUTH_SSO_DIVIDER} />
 
-          {/* Social buttons */}
-          <VStack gap={3} hAlign="stretch">
-            <Button
-              label="Login with Apple"
-              variant="secondary"
-              icon={<AppleIcon />}
-              size="lg"
-            />
-            <Button
-              label="Login with Google"
-              variant="secondary"
-              icon={<GoogleIcon />}
-              size="lg"
-            />
-          </VStack>
-        </AuthCard>
-      </VStack>
-    </Center>
-  );
+					{/* Social buttons */}
+					<VStack gap={3} hAlign="stretch">
+						<Button label="Login with Apple" variant="secondary" icon={<AppleIcon />} size="lg" />
+						<Button label="Login with Google" variant="secondary" icon={<GoogleIcon />} size="lg" />
+					</VStack>
+				</AuthCard>
+			</VStack>
+		</Center>
+	);
 }

package/templates/login-split.template.mjs

@@ -1,6 +1,7 @@
 export default {
-  type: 'page',
-  name: 'Login Split',
-  description: 'Two-column auth with cover art panel',
-  category: 'auth',
+	type: "page",
+	name: "Login Split",
+	description: "Two-column auth with cover art panel",
+	keywords: ["login", "sign in", "auth", "split", "credentials", "account"],
+	category: "auth",
 };

package/templates/login-split.tsx

@@ -1,51 +1,53 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   Ctr > V[g=4] > (Ctr.horizontal > C[p=0] > G[c={min:240} g=8 a=stretch] > (S[p=0] > V[g=4] > (H[g=2 a=center] > Ic + Tx"Castle Dracula"[t=body]) + (V[g=4] > (V[g=1] > Hd"Welcome back to the night"[level=1] + Tx"Sign in to your crypt"[t=body]) + (V[g=2] > TI"Email"[t=email] + (V[g=1] > TI"Password"[t=password] + Lk"Forgot password?")) + B.primary"Enter the night" + D"Or continue with" + (G[c={min:200} g=3] > B.secondary"Login with Apple" + B.secondary"Login with Google")) + (V[a=center] > Tx"New to the castle?"[t=supporting] + Lk"Sign up")) + (C[p=0] > AR)) + (V[a=center] > Tx"By clicking continue, you agree to our Terms of service and Privacy policy"[t=supporting])
+// XLE (canonical structure of the tree below; the CLI had no XLE validator
+// after `astryx layout` was removed in 0.7.0, so this is a reading aid and a
+// human drift check — update it with the file, never alone):
+//   Ctr > V[g=4] > (Ctr.horizontal > C[p=0] > G[c={min:240} g=8 a=stretch] > (S.transparent[p=0] > V[g=4] > (H[g=2 a=center] > Ic + Tx"Castle Dracula"[t=body]) + (V[g=4] > (V[g=1] > Hd"Welcome back to the night"[level=1 t=display-2] + Tx"Sign in to your crypt"[t=body]) + (V[g=2] > TI"Email"[t=email] + (V[g=1] > TI"Password"[t=password] + Lk"Forgot password?")) + B.primary"Sign in" + D"Or continue with" + (G[c={min:200} g=3] > B.secondary"Login with Apple" + B.secondary"Login with Google")) + (V[a=center] > Tx"New to the castle?"[t=supporting] + Lk"Sign up")) + (C.transparent[p=0] > Scene{SceneCastle})) + (V[a=center] > Tx"By clicking continue, you agree to our Terms of service and Privacy policy"[t=supporting])
 
-import {useState, useTransition} from 'react';
-import {authPageStyle, inputAutoComplete} from 'astryx-dracula/shared/auth-chrome-config';
-import {demoLogin} from 'astryx-dracula/shared/login-demo';
-import {AppleIcon, GoogleIcon} from 'astryx-dracula/shared/sso-icons';
+import { Button } from "@astryxdesign/core/Button";
+import { Card } from "@astryxdesign/core/Card";
+import { Center } from "@astryxdesign/core/Center";
+import { Divider } from "@astryxdesign/core/Divider";
+import { Grid } from "@astryxdesign/core/Grid";
+import { Icon } from "@astryxdesign/core/Icon";
+import { HStack, StackItem, VStack } from "@astryxdesign/core/Layout";
+import { Link } from "@astryxdesign/core/Link";
+import { Section } from "@astryxdesign/core/Section";
+import { Heading, Text } from "@astryxdesign/core/Text";
+import { TextInput } from "@astryxdesign/core/TextInput";
+import { authPageStyle, inputAutoComplete } from "astryx-dracula/shared/auth-chrome-config";
 import {
-  AUTH_HEADING,
-  AUTH_SUBTITLE,
-  AUTH_PRIMARY_CTA,
-  AUTH_SSO_DIVIDER,
-  AUTH_FORGOT_PASSWORD,
-  AUTH_ERROR_MESSAGE,
-  AUTH_EMAIL_PLACEHOLDER,
-  AUTH_PASSWORD_PLACEHOLDER,
-  AUTH_BRAND_NAME,
-  AUTH_SIGNUP_PROMPT,
-  AUTH_SIGNUP_LINK,
-  AUTH_TERMS_PREFIX,
-  AUTH_TERMS_SERVICE,
-  AUTH_TERMS_PRIVACY,
-} from 'astryx-dracula/shared/auth-copy';
-import {SceneCastle} from 'astryx-dracula/shared/scene-castle';
-import {VStack, HStack, StackItem} from '@astryxdesign/core/Layout';
-import {Grid} from '@astryxdesign/core/Grid';
-import {Center} from '@astryxdesign/core/Center';
-import {Card} from '@astryxdesign/core/Card';
-import {Section} from '@astryxdesign/core/Section';
-import {Text, Heading} from '@astryxdesign/core/Text';
-import {Icon} from '@astryxdesign/core/Icon';
-import {TextInput} from '@astryxdesign/core/TextInput';
-import {Button} from '@astryxdesign/core/Button';
-import {Link} from '@astryxdesign/core/Link';
-import {Divider} from '@astryxdesign/core/Divider';
+	AUTH_BRAND_NAME,
+	AUTH_EMAIL_PLACEHOLDER,
+	AUTH_ERROR_MESSAGE,
+	AUTH_FORGOT_PASSWORD,
+	AUTH_HEADING,
+	AUTH_PASSWORD_PLACEHOLDER,
+	AUTH_PRIMARY_CTA,
+	AUTH_SIGNUP_LINK,
+	AUTH_SIGNUP_PROMPT,
+	AUTH_SSO_DIVIDER,
+	AUTH_SUBTITLE,
+	AUTH_TERMS_PREFIX,
+	AUTH_TERMS_PRIVACY,
+	AUTH_TERMS_SERVICE,
+} from "astryx-dracula/shared/auth-copy";
 
+import { demoLogin } from "astryx-dracula/shared/login-demo";
+import { SceneCastle } from "astryx-dracula/shared/scene-castle";
+import { AppleIcon, GoogleIcon } from "astryx-dracula/shared/sso-icons";
 // ============= ICONS (verified lucide-react exports) =============
 // Moon is the castle brand mark (see login, login-card).
-import {Moon} from 'lucide-react';
+import { Moon } from "lucide-react";
+import { useState, useTransition } from "react";
 
 // Cover art lives in shared/scene-castle (`rooftops` variant:
 // crescent-overlay moon over a rooftop skyline). The transparent Card clips
 // it to rounded corners (overflow:clip + radius), so the art needs no radius.
 const cardWrap = {
-  width: '100%',
-  maxWidth: 1000,
-  marginInline: 'auto',
+	width: "100%",
+	maxWidth: 1000,
+	marginInline: "auto",
 } as const;
 
 // The container query lives in a plain <style> tag so it needs NO CSS compiler.
@@ -79,177 +81,174 @@ const LOGIN_SPLIT_CSS = `
 `;
 
 export default function LoginSplit() {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState<string | null>(null);
-  const [isLoading, startTransition] = useTransition();
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [error, setError] = useState<string | null>(null);
+	const [isLoading, startTransition] = useTransition();
 
-  const handleLogin = () => {
-    if (!email || !password) {
-      setError(AUTH_ERROR_MESSAGE);
-      return;
-    }
-    setError(null);
-    startTransition(async () => {
-      await demoLogin();
-    });
-  };
+	const handleLogin = () => {
+		if (!email || !password) {
+			setError(AUTH_ERROR_MESSAGE);
+			return;
+		}
+		setError(null);
+		startTransition(async () => {
+			await demoLogin();
+		});
+	};
 
-  return (
-    <Center axis="both" style={authPageStyle}>
-      <style>{LOGIN_SPLIT_CSS}</style>
-      <VStack gap={4} width="100%">
-        <Center axis="horizontal" style={cardWrap}>
-          <Card padding={0} width="100%">
-            <Grid
-              columns={{minWidth: 240, repeat: 'fit'}}
-              gap={8}
-              align="stretch"
-              className="login-split-grid">
-              {/* Form */}
-              <Section variant="transparent" padding={0} height="100%">
-                <VStack gap={4} height="100%">
-                  <HStack gap={2} vAlign="center">
-                    <Icon icon={Moon} color="secondary" size="lg" />
-                    <Text type="body" weight="semibold">
-                      {AUTH_BRAND_NAME}
-                    </Text>
-                  </HStack>
+	return (
+		<Center axis="both" style={authPageStyle}>
+			<style>{LOGIN_SPLIT_CSS}</style>
+			<VStack gap={4} width="100%">
+				<Center axis="horizontal" style={cardWrap}>
+					<Card padding={0} width="100%">
+						<Grid
+							columns={{ minWidth: 240, repeat: "fit" }}
+							gap={8}
+							align="stretch"
+							className="login-split-grid"
+						>
+							{/* Form */}
+							<Section variant="transparent" padding={0} height="100%">
+								<VStack gap={4} height="100%">
+									<HStack gap={2} vAlign="center">
+										<Icon icon={Moon} color="secondary" size="lg" />
+										<Text type="body" weight="semibold">
+											{AUTH_BRAND_NAME}
+										</Text>
+									</HStack>
 
-                  <StackItem size="fill">
-                    <Center axis="vertical" height="100%">
-                      <VStack gap={4} hAlign="stretch" width="100%">
-                        <VStack gap={1}>
-                          <Heading level={1} type="display-2">
-                            {AUTH_HEADING}
-                          </Heading>
-                          <Text type="body" color="secondary">
-                            {AUTH_SUBTITLE}
-                          </Text>
-                        </VStack>
+									<StackItem size="fill">
+										<Center axis="vertical" height="100%">
+											<VStack gap={4} hAlign="stretch" width="100%">
+												<VStack gap={1}>
+													<Heading level={1} type="display-2">
+														{AUTH_HEADING}
+													</Heading>
+													<Text type="body" color="secondary">
+														{AUTH_SUBTITLE}
+													</Text>
+												</VStack>
 
-                        <VStack gap={2}>
-                          <TextInput
-                            label="Email"
-                            isLabelHidden
-                            type="email"
-                            {...inputAutoComplete('email')}
-                            placeholder={AUTH_EMAIL_PLACEHOLDER}
-                            value={email}
-                            onChange={(v: string) => {
-                              setEmail(v);
-                              setError(null);
-                            }}
-                            size="lg"
-                            onEnter={handleLogin}
-                            status={error ? {type: 'error', message: error} : undefined}
-                          />
-                          <VStack gap={1}>
-                            <TextInput
-                              label="Password"
-                              isLabelHidden
-                              placeholder={AUTH_PASSWORD_PLACEHOLDER}
-                              type="password"
-                              {...inputAutoComplete('current-password')}
-                              value={password}
-                              onChange={(v: string) => {
-                                setPassword(v);
-                                setError(null);
-                              }}
-                              size="lg"
-                              onEnter={handleLogin}
-                              status={error ? {type: 'error', message: error} : undefined}
-                            />
-                            {error && (
-                              <VStack hAlign="end">
-                                <Link
-                                  href="#/templates/login-split"
-                                  isStandalone>
-                                  {AUTH_FORGOT_PASSWORD}
-                                </Link>
-                              </VStack>
-                            )}
-                          </VStack>
-                        </VStack>
+												<VStack gap={2}>
+													<TextInput
+														label="Email"
+														isLabelHidden
+														type="email"
+														{...inputAutoComplete("email")}
+														placeholder={AUTH_EMAIL_PLACEHOLDER}
+														value={email}
+														onChange={(v: string) => {
+															setEmail(v);
+															setError(null);
+														}}
+														size="lg"
+														onEnter={handleLogin}
+														status={error ? { type: "error", message: error } : undefined}
+													/>
+													<VStack gap={1}>
+														<TextInput
+															label="Password"
+															isLabelHidden
+															placeholder={AUTH_PASSWORD_PLACEHOLDER}
+															type="password"
+															{...inputAutoComplete("current-password")}
+															value={password}
+															onChange={(v: string) => {
+																setPassword(v);
+																setError(null);
+															}}
+															size="lg"
+															onEnter={handleLogin}
+															status={error ? { type: "error", message: error } : undefined}
+														/>
+														{error && (
+															<VStack hAlign="end">
+																<Link href="#/templates/login-split" isStandalone>
+																	{AUTH_FORGOT_PASSWORD}
+																</Link>
+															</VStack>
+														)}
+													</VStack>
+												</VStack>
 
-                        <Button
-                          label={AUTH_PRIMARY_CTA}
-                          variant="primary"
-                          size="lg"
-                          isLoading={isLoading}
-                          onClick={handleLogin}
-                        />
+												<Button
+													label={AUTH_PRIMARY_CTA}
+													variant="primary"
+													size="lg"
+													isLoading={isLoading}
+													onClick={handleLogin}
+												/>
 
-                        <Divider label={AUTH_SSO_DIVIDER} />
+												<Divider label={AUTH_SSO_DIVIDER} />
 
-                        {/* minWidth (not a fixed 2-up) so the pair stacks inside
+												{/* minWidth (not a fixed 2-up) so the pair stacks inside
                             the narrow single-column container instead of
                             giving each button ~114px for an icon + label. */}
-                        <Grid
-                          columns={{minWidth: 200, repeat: 'fit'}}
-                          gap={3}
-                          justify="stretch">
-                          <Button
-                            label="Login with Apple"
-                            variant="secondary"
-                            icon={<AppleIcon />}
-                            size="lg"
-                          />
-                          <Button
-                            label="Login with Google"
-                            variant="secondary"
-                            icon={<GoogleIcon />}
-                            size="lg"
-                          />
-                        </Grid>
-                      </VStack>
-                    </Center>
-                  </StackItem>
+												<Grid columns={{ minWidth: 200, repeat: "fit" }} gap={3} justify="stretch">
+													<Button
+														label="Login with Apple"
+														variant="secondary"
+														icon={<AppleIcon />}
+														size="lg"
+													/>
+													<Button
+														label="Login with Google"
+														variant="secondary"
+														icon={<GoogleIcon />}
+														size="lg"
+													/>
+												</Grid>
+											</VStack>
+										</Center>
+									</StackItem>
 
-                  {/* Prose link: colour alone is not a cue inside a sentence
+									{/* Prose link: colour alone is not a cue inside a sentence
                       (WCAG 1.4.1 / F73), so it asks for the underline the kit
                       only gives on hover. The VStack centres the line, as the
                       other three login templates do — it was sitting flush
                       left under a left-aligned form. */}
-                  <VStack hAlign="center">
-                    <Text type="supporting" color="secondary">
-                      {AUTH_SIGNUP_PROMPT}{' '}
-                      <Link href="#/templates/login-split" type="supporting" hasUnderline>
-                        {AUTH_SIGNUP_LINK}
-                      </Link>
-                    </Text>
-                  </VStack>
-                </VStack>
-              </Section>
+									<VStack hAlign="center">
+										<Text type="supporting" color="secondary">
+											{AUTH_SIGNUP_PROMPT}{" "}
+											<Link href="#/templates/login-split" type="supporting" hasUnderline>
+												{AUTH_SIGNUP_LINK}
+											</Link>
+										</Text>
+									</VStack>
+								</VStack>
+							</Section>
 
-              {/* Cover art — the transparent Card clips it to rounded
+							{/* Cover art — the transparent Card clips it to rounded
                   corners (overflow:clip + radius), so the art needs no radius. */}
-              <Card
-                variant="transparent"
-                padding={0}
-                width="100%"
-                height="100%"
-                className="login-split-image">
-                <SceneCastle variant="rooftops" />
-              </Card>
-            </Grid>
-          </Card>
-        </Center>
+							<Card
+								variant="transparent"
+								padding={0}
+								width="100%"
+								height="100%"
+								className="login-split-image"
+							>
+								<SceneCastle variant="rooftops" />
+							</Card>
+						</Grid>
+					</Card>
+				</Center>
 
-        <VStack hAlign="center" width="100%">
-          <Text type="supporting" color="secondary" justify="center">
-            {AUTH_TERMS_PREFIX}{' '}
-            <Link href="#/templates/login-split" type="supporting" hasUnderline>
-              {AUTH_TERMS_SERVICE}
-            </Link>{' '}
-            and{' '}
-            <Link href="#/templates/login-split" type="supporting" hasUnderline>
-              {AUTH_TERMS_PRIVACY}
-            </Link>
-            .
-          </Text>
-        </VStack>
-      </VStack>
-    </Center>
-  );
+				<VStack hAlign="center" width="100%">
+					<Text type="supporting" color="secondary" justify="center">
+						{AUTH_TERMS_PREFIX}{" "}
+						<Link href="#/templates/login-split" type="supporting" hasUnderline>
+							{AUTH_TERMS_SERVICE}
+						</Link>{" "}
+						and{" "}
+						<Link href="#/templates/login-split" type="supporting" hasUnderline>
+							{AUTH_TERMS_PRIVACY}
+						</Link>
+						.
+					</Text>
+				</VStack>
+			</VStack>
+		</Center>
+	);
 }

package/templates/login-sso.template.mjs

@@ -1,6 +1,7 @@
 export default {
-  type: 'page',
-  name: 'Login SSO',
-  description: 'Email-first SSO with password fallback',
-  category: 'auth',
+	type: "page",
+	name: "Login SSO",
+	description: "Email-first SSO with password fallback",
+	keywords: ["login", "sso", "saml", "oauth", "auth", "providers", "account"],
+	category: "auth",
 };