create-astram-app 0.4.0 → 0.6.0

package/template/frontend/src/components/ui/table.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
+import * as React from 'react';
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils';
 
 /**
  * shadcn Table primitive set, tuned to OCA's matured DataTable look
@@ -27,84 +27,79 @@ import { cn } from "@/lib/utils";
  * components cannot be given refs".
  */
 
-const Table = React.forwardRef<
-  HTMLTableElement,
-  React.ComponentPropsWithoutRef<"table">
->(({ className, ...props }, ref) => (
-  <div data-slot="table-container" className="relative w-full overflow-x-auto">
-    <table
-      ref={ref}
-      data-slot="table"
-      className={cn("w-full caption-bottom border-collapse text-sm", className)}
-      {...props}
-    />
-  </div>
-));
-Table.displayName = "Table";
+const Table = React.forwardRef<HTMLTableElement, React.ComponentPropsWithoutRef<'table'>>(
+  ({ className, ...props }, ref) => (
+    <div data-slot="table-container" className="relative w-full overflow-x-auto">
+      <table
+        ref={ref}
+        data-slot="table"
+        className={cn('w-full caption-bottom border-collapse text-sm', className)}
+        {...props}
+      />
+    </div>
+  ),
+);
+Table.displayName = 'Table';
 
 const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
-  React.ComponentPropsWithoutRef<"thead">
+  React.ComponentPropsWithoutRef<'thead'>
 >(({ className, ...props }, ref) => (
   <thead
     ref={ref}
     data-slot="table-header"
-    className={cn("[&_tr]:border-b", className)}
+    className={cn('[&_tr]:border-b', className)}
     {...props}
   />
 ));
-TableHeader.displayName = "TableHeader";
+TableHeader.displayName = 'TableHeader';
 
 const TableBody = React.forwardRef<
   HTMLTableSectionElement,
-  React.ComponentPropsWithoutRef<"tbody">
+  React.ComponentPropsWithoutRef<'tbody'>
 >(({ className, ...props }, ref) => (
   <tbody
     ref={ref}
     data-slot="table-body"
-    className={cn("[&_tr:last-child]:border-0", className)}
+    className={cn('[&_tr:last-child]:border-0', className)}
     {...props}
   />
 ));
-TableBody.displayName = "TableBody";
+TableBody.displayName = 'TableBody';
 
 const TableFooter = React.forwardRef<
   HTMLTableSectionElement,
-  React.ComponentPropsWithoutRef<"tfoot">
+  React.ComponentPropsWithoutRef<'tfoot'>
 >(({ className, ...props }, ref) => (
   <tfoot
     ref={ref}
     data-slot="table-footer"
-    className={cn(
-      "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
-      className
-    )}
+    className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
     {...props}
   />
 ));
-TableFooter.displayName = "TableFooter";
+TableFooter.displayName = 'TableFooter';
 
-const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.ComponentPropsWithoutRef<"tr">
->(({ className, ...props }, ref) => (
-  <tr
-    ref={ref}
-    data-slot="table-row"
-    // `group` so sticky cells can react to row hover (OCA keeps the pinned
-    // Actions cell in step with the row's hover surface).
-    className={cn(
-      "group border-b border-border transition-colors hover:bg-muted/40 data-[state=selected]:bg-muted",
-      className
-    )}
-    {...props}
-  />
-));
-TableRow.displayName = "TableRow";
+const TableRow = React.forwardRef<HTMLTableRowElement, React.ComponentPropsWithoutRef<'tr'>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      data-slot="table-row"
+      // `group` so sticky cells can react to row hover (OCA keeps the pinned
+      // Actions cell in step with the row's hover surface).
+      className={cn(
+        'group border-b border-border transition-colors hover:bg-muted/40 data-[state=selected]:bg-muted',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+TableRow.displayName = 'TableRow';
 
 const TableHead = React.forwardRef<
   HTMLTableCellElement,
-  React.ComponentPropsWithoutRef<"th"> & {
+  React.ComponentPropsWithoutRef<'th'> & {
     /** Freeze this header to the right edge (the Actions column). */
     sticky?: boolean;
   }
@@ -112,26 +107,26 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     data-slot="table-head"
-    data-sticky={sticky ? "" : undefined}
+    data-sticky={sticky ? '' : undefined}
     className={cn(
       // OCA thead th: mono-uppercase, tiny, wide-tracked, muted, on a subtle
       // surface with a hairline bottom border.
-      "bg-muted/60 text-muted-foreground h-9 px-3.5 text-left align-middle font-mono text-[0.68rem] font-semibold tracking-[0.08em] whitespace-nowrap uppercase [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      'bg-muted/60 text-muted-foreground h-9 px-3.5 text-left align-middle font-mono text-[0.68rem] font-semibold tracking-[0.08em] whitespace-nowrap uppercase [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
       sticky &&
         // Pinned to the right edge: opaque header surface, sits above the
         // other sticky-top cells, centered label, token left-border (light) +
         // left shadow divider (dark).
-        "bg-muted/60 border-border sticky right-0 z-20 w-[1%] border-l text-center shadow-[-8px_0_10px_-8px_rgba(0,0,0,0.28)]",
-      className
+        'bg-muted/60 border-border sticky right-0 z-20 w-[1%] border-l text-center shadow-[-8px_0_10px_-8px_rgba(0,0,0,0.28)]',
+      className,
     )}
     {...props}
   />
 ));
-TableHead.displayName = "TableHead";
+TableHead.displayName = 'TableHead';
 
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
-  React.ComponentPropsWithoutRef<"td"> & {
+  React.ComponentPropsWithoutRef<'td'> & {
     /** Freeze this cell to the right edge (the Actions column). */
     sticky?: boolean;
   }
@@ -139,43 +134,34 @@ const TableCell = React.forwardRef<
   <td
     ref={ref}
     data-slot="table-cell"
-    data-sticky={sticky ? "" : undefined}
+    data-sticky={sticky ? '' : undefined}
     className={cn(
       // OCA tbody td: 11px/14px padding (px-3.5 py-2.5), hairline border,
       // secondary ink, middle-aligned.
-      "text-foreground/90 px-3.5 py-2.5 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      'text-foreground/90 px-3.5 py-2.5 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
       sticky &&
         // Pinned cell: opaque background that tracks the row hover surface
         // (via the row's `group` + group-hover), centered actions, token
         // left-border (light) + left shadow (dark).
-        "bg-background group-hover:bg-muted/40 border-border sticky right-0 z-10 w-[1%] border-l text-center shadow-[-8px_0_10px_-8px_rgba(0,0,0,0.28)]",
-      className
+        'bg-background group-hover:bg-muted/40 border-border sticky right-0 z-10 w-[1%] border-l text-center shadow-[-8px_0_10px_-8px_rgba(0,0,0,0.28)]',
+      className,
     )}
     {...props}
   />
 ));
-TableCell.displayName = "TableCell";
+TableCell.displayName = 'TableCell';
 
 const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
-  React.ComponentPropsWithoutRef<"caption">
+  React.ComponentPropsWithoutRef<'caption'>
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
     data-slot="table-caption"
-    className={cn("text-muted-foreground mt-4 text-sm", className)}
+    className={cn('text-muted-foreground mt-4 text-sm', className)}
     {...props}
   />
 ));
-TableCaption.displayName = "TableCaption";
+TableCaption.displayName = 'TableCaption';
 
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-};
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

package/template/frontend/src/components/ui/tooltip.tsx

@@ -1,7 +1,7 @@
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils';
 
 function TooltipProvider({
   delayDuration = 0,
@@ -16,9 +16,7 @@ function TooltipProvider({
   );
 }
 
-function Tooltip({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
   return (
     <TooltipProvider>
       <TooltipPrimitive.Root data-slot="tooltip" {...props} />
@@ -26,9 +24,7 @@ function Tooltip({
   );
 }
 
-function TooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
   return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
 }
 
@@ -44,8 +40,8 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-          className
+          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+          className,
         )}
         {...props}
       >

package/template/frontend/src/config/branding.js

@@ -43,10 +43,7 @@ export const branding = {
    * `VITE_APP_SUB_TAGLINE`); falls back to these static strings when the env is unset.
    */
   tagline: envString(import.meta.env.VITE_APP_TAGLINE, 'Welcome back'),
-  subTagline: envString(
-    import.meta.env.VITE_APP_SUB_TAGLINE,
-    'Sign in to your account',
-  ),
+  subTagline: envString(import.meta.env.VITE_APP_SUB_TAGLINE, 'Sign in to your account'),
   poweredBy: 'Astram',
 
   /**

package/template/frontend/src/hooks/useMobile.tsx

@@ -1,20 +1,18 @@
-import * as React from "react";
+import * as React from 'react';
 
 const MOBILE_BREAKPOINT = 768;
 
 export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
-    undefined
-  );
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
 
   React.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
     };
-    mql.addEventListener("change", onChange);
+    mql.addEventListener('change', onChange);
     setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
+    return () => mql.removeEventListener('change', onChange);
   }, []);
 
   return !!isMobile;

package/template/frontend/src/index.css

@@ -1,7 +1,9 @@
+/* Inter (UI) + JetBrains Mono (code/data) — the professional SaaS standard.
+   Must stay FIRST: `@import 'tailwindcss'` inlines rules, and a url @import after any
+   rule is invalid CSS (the build warns and browsers ignore it). */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
 @import 'tailwindcss';
 @import 'tw-animate-css';
-/* Inter (UI) + JetBrains Mono (code/data) — the professional SaaS standard. */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
 
 /*
   astram3 design tokens — shadcn/ui + Tailwind v4 (CSS-var driven).
@@ -180,8 +182,11 @@
 @layer components {
   /* Subtle dot-grid for auth/content backgrounds (astram-tinted). */
   .grid-bg {
-    background-image:
-      radial-gradient(circle at 1px 1px, color-mix(in oklch, var(--primary) 12%, transparent) 1px, transparent 0);
+    background-image: radial-gradient(
+      circle at 1px 1px,
+      color-mix(in oklch, var(--primary) 12%, transparent) 1px,
+      transparent 0
+    );
     background-size: 22px 22px;
   }
 

package/template/frontend/src/pages/Dashboard.jsx

@@ -53,7 +53,8 @@ export default function Dashboard() {
         <div className="mb-4">
           <h1 className="text-xl font-bold tracking-tight">Dashboard</h1>
           <p className="mt-0.5 text-sm text-muted-foreground">
-            You are signed in. Below, the app calls a protected API route as you — the framework enforces it.
+            You are signed in. Below, the app calls a protected API route as you — the framework
+            enforces it.
           </p>
         </div>
 
@@ -67,10 +68,11 @@ export default function Dashboard() {
           </CardHeader>
           <CardContent className="space-y-3">
             <p className="text-sm text-muted-foreground">
-              <code className="rounded bg-muted px-1 py-0.5 text-xs">GET /identity/companies</code> is a{' '}
-              <code className="rounded bg-muted px-1 py-0.5 text-xs">@Classified</code> route — the framework
-              resolves your bearer token to a principal and runs <code className="rounded bg-muted px-1 py-0.5 text-xs">decide()</code>{' '}
-              before the handler.
+              <code className="rounded bg-muted px-1 py-0.5 text-xs">GET /identity/companies</code>{' '}
+              is a <code className="rounded bg-muted px-1 py-0.5 text-xs">@Classified</code> route —
+              the framework resolves your bearer token to a principal and runs{' '}
+              <code className="rounded bg-muted px-1 py-0.5 text-xs">decide()</code> before the
+              handler.
             </p>
             <div className="flex flex-wrap gap-2">
               <Button variant="outline" size="sm" onClick={() => load(true)}>
@@ -104,7 +106,9 @@ export default function Dashboard() {
             </CardTitle>
           </CardHeader>
           <CardContent>
-            {status === 'loading' && <p className="py-6 text-center text-sm text-muted-foreground">Loading…</p>}
+            {status === 'loading' && (
+              <p className="py-6 text-center text-sm text-muted-foreground">Loading…</p>
+            )}
             {status !== 'loading' && rows.length === 0 && (
               <p className="py-6 text-center text-sm text-muted-foreground">
                 No companies visible (or the call was denied).
@@ -115,7 +119,9 @@ export default function Dashboard() {
                 {i > 0 && <Separator />}
                 <div className="flex items-center justify-between py-2.5 text-sm">
                   <span className="font-medium">{r.fields?.name ?? '(unnamed)'}</span>
-                  <span className="font-mono text-xs text-muted-foreground">{r.fields?.status ?? ''}</span>
+                  <span className="font-mono text-xs text-muted-foreground">
+                    {r.fields?.status ?? ''}
+                  </span>
                 </div>
               </div>
             ))}

package/template/frontend/src/pages/ForgotPassword.jsx

@@ -47,7 +47,11 @@ export default function ForgotPassword() {
         <CardContent className="p-8">
           <div className="mb-7 flex flex-col items-center gap-4">
             {/* Brand logo — color in light, white in dark (from branding config). */}
-            <img src={branding.logo.light} alt={branding.appName} className="h-9 w-auto dark:hidden" />
+            <img
+              src={branding.logo.light}
+              alt={branding.appName}
+              className="h-9 w-auto dark:hidden"
+            />
             <img
               src={branding.logo.dark}
               alt={branding.appName}
@@ -92,7 +96,10 @@ export default function ForgotPassword() {
           )}
 
           <div className="mt-6 text-center">
-            <Link to="/login" className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline">
+            <Link
+              to="/login"
+              className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline"
+            >
               <ArrowLeft className="size-4" />
               Back to sign in
             </Link>

package/template/frontend/src/pages/Login.jsx

@@ -171,7 +171,11 @@ export default function Login() {
         <CardContent className="p-8">
           {/* Brand logo — color in light, white in dark (from branding config). */}
           <div className="mb-6 flex justify-center">
-            <img src={branding.logo.light} alt={branding.appName} className="h-9 w-auto dark:hidden" />
+            <img
+              src={branding.logo.light}
+              alt={branding.appName}
+              className="h-9 w-auto dark:hidden"
+            />
             <img
               src={branding.logo.dark}
               alt={branding.appName}
@@ -306,85 +310,96 @@ export default function Login() {
               </button>
             </form>
           ) : (
-          <form onSubmit={onSubmit} className="space-y-4" noValidate>
-            <div className="space-y-1.5">
-              <label
-                htmlFor="identityHint"
-                className="block text-[11px] font-semibold uppercase tracking-wider text-muted-foreground"
-              >
-                Email or username
-              </label>
-              <Input
-                id="identityHint"
-                autoComplete="username"
-                autoFocus
-                value={identityHint}
-                onChange={(e) => setIdentityHint(e.target.value)}
-                onKeyDown={onFieldKeyDown}
-                placeholder="you@example.com"
-                className="h-11 bg-secondary/60"
-              />
-            </div>
-
-            <div className="space-y-1.5">
-              <label
-                htmlFor="password"
-                className="block text-[11px] font-semibold uppercase tracking-wider text-muted-foreground"
-              >
-                Password
-              </label>
-              <div className="relative">
+            <form onSubmit={onSubmit} className="space-y-4" noValidate>
+              <div className="space-y-1.5">
+                <label
+                  htmlFor="identityHint"
+                  className="block text-[11px] font-semibold uppercase tracking-wider text-muted-foreground"
+                >
+                  Email or username
+                </label>
                 <Input
-                  id="password"
-                  type={showPw ? 'text' : 'password'}
-                  autoComplete="current-password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
+                  id="identityHint"
+                  autoComplete="username"
+                  autoFocus
+                  value={identityHint}
+                  onChange={(e) => setIdentityHint(e.target.value)}
                   onKeyDown={onFieldKeyDown}
-                  placeholder="••••••••"
-                  className="h-11 bg-secondary/60 pr-10"
+                  placeholder="you@example.com"
+                  className="h-11 bg-secondary/60"
                 />
-                <button
-                  type="button"
-                  onClick={() => setShowPw((s) => !s)}
-                  className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-muted-foreground hover:text-foreground"
-                  aria-label={showPw ? 'Hide password' : 'Show password'}
+              </div>
+
+              <div className="space-y-1.5">
+                <label
+                  htmlFor="password"
+                  className="block text-[11px] font-semibold uppercase tracking-wider text-muted-foreground"
                 >
-                  {showPw ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
-                </button>
+                  Password
+                </label>
+                <div className="relative">
+                  <Input
+                    id="password"
+                    type={showPw ? 'text' : 'password'}
+                    autoComplete="current-password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    onKeyDown={onFieldKeyDown}
+                    placeholder="••••••••"
+                    className="h-11 bg-secondary/60 pr-10"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPw((s) => !s)}
+                    className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-muted-foreground hover:text-foreground"
+                    aria-label={showPw ? 'Hide password' : 'Show password'}
+                  >
+                    {showPw ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+                  </button>
+                </div>
               </div>
-            </div>
 
-            {/* Remember me + Forgot password, inline below the password. */}
-            <div className="flex items-center justify-between pt-0.5">
-              <label htmlFor="remember" className="flex items-center gap-2 text-sm text-muted-foreground">
-                <Checkbox id="remember" checked={remember} onCheckedChange={(v) => setRemember(Boolean(v))} />
-                Remember me
-              </label>
-              <Link to="/forgot-password" className="text-sm font-medium text-primary hover:underline">
-                Forgot password?
-              </Link>
-            </div>
+              {/* Remember me + Forgot password, inline below the password. */}
+              <div className="flex items-center justify-between pt-0.5">
+                <label
+                  htmlFor="remember"
+                  className="flex items-center gap-2 text-sm text-muted-foreground"
+                >
+                  <Checkbox
+                    id="remember"
+                    checked={remember}
+                    onCheckedChange={(v) => setRemember(Boolean(v))}
+                  />
+                  Remember me
+                </label>
+                <Link
+                  to="/forgot-password"
+                  className="text-sm font-medium text-primary hover:underline"
+                >
+                  Forgot password?
+                </Link>
+              </div>
 
-            <Button
-              type="submit"
-              disabled={busy}
-              className="h-11 w-full bg-primary font-mono text-xs font-semibold uppercase tracking-widest text-primary-foreground hover:bg-primary/90"
-            >
-              {busy ? (
-                <Loader2 className="size-4 animate-spin" />
-              ) : (
-                <>
-                  <LogIn className="size-4" />
-                  Log in
-                </>
-              )}
-            </Button>
-          </form>
+              <Button
+                type="submit"
+                disabled={busy}
+                className="h-11 w-full bg-primary font-mono text-xs font-semibold uppercase tracking-widest text-primary-foreground hover:bg-primary/90"
+              >
+                {busy ? (
+                  <Loader2 className="size-4 animate-spin" />
+                ) : (
+                  <>
+                    <LogIn className="size-4" />
+                    Log in
+                  </>
+                )}
+              </Button>
+            </form>
           )}
 
           <p className="mt-6 text-center text-[11px] tracking-wide text-muted-foreground">
-            Powered by <span className="font-semibold text-foreground/70">{branding.poweredBy}</span>
+            Powered by{' '}
+            <span className="font-semibold text-foreground/70">{branding.poweredBy}</span>
           </p>
         </CardContent>
       </Card>

package/template/frontend/src/pages/ResetPassword.jsx

@@ -78,7 +78,11 @@ export default function ResetPassword() {
         <CardContent className="p-8">
           <div className="mb-7 flex flex-col items-center gap-4">
             {/* Brand logo — color in light, white in dark (from branding config). */}
-            <img src={branding.logo.light} alt={branding.appName} className="h-9 w-auto dark:hidden" />
+            <img
+              src={branding.logo.light}
+              alt={branding.appName}
+              className="h-9 w-auto dark:hidden"
+            />
             <img
               src={branding.logo.dark}
               alt={branding.appName}
@@ -147,7 +151,10 @@ export default function ResetPassword() {
           )}
 
           <div className="mt-6 text-center">
-            <Link to="/login" className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline">
+            <Link
+              to="/login"
+              className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline"
+            >
               <ArrowLeft className="size-4" />
               Back to sign in
             </Link>