@svadmin/ui 0.45.0 → 0.46.0

package/dist/components/AuthPageShell.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import SvadminLogo from './SvadminLogo.svelte';
+
+  interface Props {
+    brand: string;
+    title: string;
+    description?: string;
+    children: Snippet;
+    footer?: Snippet;
+  }
+
+  let { brand, title, description, children, footer }: Props = $props();
+</script>
+
+<div class="grid min-h-screen bg-muted/20 lg:grid-cols-[minmax(18rem,0.72fr)_minmax(0,1.28fr)]" data-svadmin-auth-page>
+  <aside class="hidden border-r border-border bg-card p-10 lg:flex lg:flex-col lg:justify-between xl:p-12">
+    <div class="flex items-center gap-3"><SvadminLogo size={40} /><span class="text-lg font-semibold text-foreground">{brand}</span></div>
+    <div class="max-w-sm space-y-3"><h2 class="text-2xl font-semibold leading-tight text-foreground">{title}</h2>{#if description}<p class="text-sm leading-6 text-muted-foreground">{description}</p>{/if}</div>
+    <p class="text-xs text-muted-foreground">{brand}</p>
+  </aside>
+  <main class="flex items-center justify-center p-5 sm:p-8 lg:p-12">
+    <div class="w-full max-w-md space-y-5">
+      <div class="flex items-center gap-3 lg:hidden"><SvadminLogo size={36} /><span class="text-base font-semibold text-foreground">{brand}</span></div>
+      <section class="rounded-lg border border-border bg-card p-5 shadow-sm sm:p-7">
+        <header class="mb-6 space-y-2"><h1 class="text-xl font-semibold leading-tight text-foreground">{title}</h1>{#if description}<p class="text-sm leading-6 text-muted-foreground">{description}</p>{/if}</header>
+        {@render children()}
+      </section>
+      {#if footer}<div class="text-center">{@render footer()}</div>{/if}
+    </div>
+  </main>
+</div>

package/dist/components/AuthPageShell.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    brand: string;
+    title: string;
+    description?: string;
+    children: Snippet;
+    footer?: Snippet;
+}
+declare const AuthPageShell: import("svelte").Component<Props, {}, "">;
+type AuthPageShell = ReturnType<typeof AuthPageShell>;
+export default AuthPageShell;

package/dist/components/ForgotPasswordPage.svelte

@@ -6,7 +6,7 @@
   import { Input } from './ui/input/index.js';
   import { Label } from './ui/label/index.js';
   import * as Alert from './ui/alert/index.js';
-  import SvadminLogo from './SvadminLogo.svelte';
+  import AuthPageShell from './AuthPageShell.svelte';
   import { User, ArrowLeft, Loader2, AlertCircle } from '@lucide/svelte';
 
   const i18n = useTranslation();
@@ -37,65 +37,7 @@
   }
 </script>
 
-<div class="min-h-screen flex flex-col lg:flex-row">
-  <!-- Left brand panel -->
-  <div class="hidden lg:flex lg:w-[480px] xl:w-[520px] relative overflow-hidden bg-gradient-to-br from-primary/90 via-primary to-primary/80 shrink-0">
-    <div class="absolute inset-0">
-      <div class="absolute top-[12%] left-[8%] w-28 h-28 rounded-3xl border border-white/10 bg-white/5 rotate-12 backdrop-blur-sm"></div>
-      <div class="absolute top-[55%] left-[55%] w-40 h-40 rounded-full border border-white/10 bg-white/5 -rotate-6 backdrop-blur-sm"></div>
-      <div class="absolute bottom-[15%] left-[15%] w-24 h-24 rounded-2xl border border-white/10 bg-white/5 -rotate-12 backdrop-blur-sm"></div>
-      <div class="absolute top-[30%] right-[10%] w-16 h-16 rounded-xl border border-white/10 bg-white/5 rotate-45 backdrop-blur-sm"></div>
-      <div class="absolute inset-0 opacity-[0.03]" style="background-image: radial-gradient(circle, white 1px, transparent 1px); background-size: 24px 24px;"></div>
-    </div>
-
-    <div class="relative z-10 flex flex-col justify-between p-10 xl:p-12 w-full">
-      <div class="flex items-center gap-3">
-        <SvadminLogo size={36} onDark />
-        <span class="text-lg font-semibold text-white tracking-tight">{title}</span>
-      </div>
-
-      <div class="space-y-4">
-        <h2 class="text-3xl xl:text-4xl font-bold text-white leading-tight">
-          {i18n.t('auth.forgotPassword')}
-        </h2>
-        <p class="text-base text-white/70 leading-relaxed max-w-[320px]">
-          {i18n.t('auth.forgotPasswordDescription')}
-        </p>
-      </div>
-
-      <div class="flex items-center gap-3">
-        <div class="h-1 w-8 rounded-full bg-white/30"></div>
-        <div class="h-1 w-4 rounded-full bg-white/15"></div>
-        <div class="h-1 w-2 rounded-full bg-white/10"></div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Right form panel -->
-  <div class="flex-1 flex items-center justify-center bg-background p-6 sm:p-8 lg:p-12">
-    <div class="w-full max-w-[400px]">
-      <div class="mb-8 flex items-center gap-3 lg:hidden">
-        <SvadminLogo size={36} />
-        <span class="text-lg font-semibold tracking-tight">{title}</span>
-      </div>
-
-      <div class="space-y-1 mb-8">
-        <h1 class="text-2xl font-semibold tracking-tight">
-          {#if sent}
-            {i18n.t('auth.resetLinkSentTitle')}
-          {:else}
-            {i18n.t('auth.forgotPassword')}
-          {/if}
-        </h1>
-        <p class="text-sm text-muted-foreground">
-          {#if sent}
-            {i18n.t('auth.resetLinkSentDescription')}
-          {:else}
-            {i18n.t('auth.forgotPasswordDescription')}
-          {/if}
-        </p>
-      </div>
-
+<AuthPageShell brand={title} title={sent ? i18n.t('auth.resetLinkSentTitle') : i18n.t('auth.forgotPassword')} description={sent ? i18n.t('auth.resetLinkSentDescription') : i18n.t('auth.forgotPasswordDescription')}>
       {#if sent}
         <div class="space-y-4">
           <Button variant="outline" class="w-full" onclick={() => adminContext.navigate('/login')}>
@@ -135,17 +77,11 @@
           </Button>
         </form>
 
-        <div class="flex items-center justify-center mt-8 pt-6 border-t">
+        <div class="mt-6 flex items-center justify-center border-t pt-5">
           <Button variant="link" class="text-sm h-auto p-0 font-medium inline-flex items-center gap-1" onclick={() => adminContext.navigate('/login')}>
             <ArrowLeft class="h-3 w-3" />
             {i18n.t('auth.backToLogin')}
           </Button>
         </div>
       {/if}
-
-      <p class="text-xs text-muted-foreground/60 mt-8 text-center">
-        Powered by {title}
-      </p>
-    </div>
-  </div>
-</div>
+</AuthPageShell>

package/dist/components/LoginPage.svelte

@@ -5,8 +5,8 @@
   import { Input } from './ui/input/index.js';
   import { Label } from './ui/label/index.js';
   import * as Alert from './ui/alert/index.js';
+  import AuthPageShell from './AuthPageShell.svelte';
   import PasswordInput from './PasswordInput.svelte';
-  import SvadminLogo from './SvadminLogo.svelte';
   import { Separator } from './ui/separator/index.js';
   import { User, Loader2, AlertCircle } from '@lucide/svelte';
 
@@ -66,113 +66,67 @@
   }
 </script>
 
-<div class="min-h-screen flex flex-col lg:flex-row">
-  <div class="hidden lg:flex lg:w-[500px] xl:w-[560px] relative overflow-hidden bg-gradient-to-br from-primary/95 via-primary to-primary/85 shrink-0">
-    <div class="absolute inset-0">
-      <div class="absolute top-[12%] left-[8%] h-32 w-32 rounded-3xl border border-white/10 bg-white/5 rotate-12 backdrop-blur-sm"></div>
-      <div class="absolute top-[54%] left-[54%] h-44 w-44 rounded-full border border-white/10 bg-white/5 -rotate-6 backdrop-blur-sm"></div>
-      <div class="absolute bottom-[14%] left-[13%] h-28 w-28 rounded-2xl border border-white/10 bg-white/5 -rotate-12 backdrop-blur-sm"></div>
-      <div class="absolute top-[30%] right-[10%] h-20 w-20 rounded-xl border border-white/10 bg-white/5 rotate-45 backdrop-blur-sm"></div>
-      <div class="absolute inset-0 opacity-[0.04]" style="background-image: radial-gradient(circle, white 1px, transparent 1px); background-size: 24px 24px;"></div>
-    </div>
-
-    <div class="relative z-10 flex flex-col justify-between p-10 xl:p-12 w-full">
-      <div class="flex items-center gap-3">
-        <SvadminLogo size={44} onDark />
-        <span class="text-xl font-semibold text-white tracking-tight">{title}</span>
-      </div>
-
-      <div class="max-w-[360px] space-y-4">
-        <h2 class="text-4xl font-bold text-white leading-tight">
-          {i18n.t('auth.welcomeBack')}
-        </h2>
-        <p class="text-lg text-white/75 leading-relaxed">
-          {i18n.t('auth.welcomeMessage')}
-        </p>
-      </div>
-
-      <div class="flex items-center gap-3">
-        <div class="h-1.5 w-10 rounded-full bg-white/40"></div>
-        <div class="h-1.5 w-5 rounded-full bg-white/20"></div>
-        <div class="h-1.5 w-2 rounded-full bg-white/15"></div>
-      </div>
-    </div>
-  </div>
-
-  <div class="flex-1 flex items-center justify-center bg-background p-6 sm:p-10 lg:p-14">
-    <div class="w-full max-w-[460px] space-y-8">
-      <div class="mb-8 flex items-center gap-3 lg:hidden">
-        <SvadminLogo size={44} />
-        <span class="text-xl font-semibold tracking-tight text-foreground">{title}</span>
-      </div>
-
-      <div class="space-y-2.5">
-        <h1 class="text-3xl font-semibold tracking-tight text-foreground">
-          {i18n.t('auth.welcomeBack')}
-        </h1>
-        <p class="text-base text-muted-foreground leading-relaxed">
-          {i18n.t('auth.welcomeMessage')}
-        </p>
-      </div>
+{#snippet footer()}
+  {#if authProvider?.register}
+    <div class="flex items-center justify-center gap-1.5"><span class="text-sm text-muted-foreground">{i18n.t('auth.noAccount')}</span><Button variant="link" class="h-auto p-0 text-sm font-semibold" onclick={() => adminContext.navigate('/register')}>{i18n.t('auth.register')}</Button></div>
+  {/if}
+{/snippet}
 
+<AuthPageShell brand={title} title={i18n.t('auth.welcomeBack')} description={i18n.t('auth.welcomeMessage')} {footer}>
       {#if loginHint || defaultIdentifier || defaultPassword}
-        <div class="rounded-2xl border border-primary/15 bg-primary/[0.06] p-4 shadow-sm">
+        <aside class="mb-5 rounded-md border border-border bg-muted/35 p-3">
           {#if loginHint}
-            <p class="text-sm font-medium text-primary">{loginHint}</p>
+            <p class="text-sm font-medium text-foreground">{loginHint}</p>
           {/if}
-          <div class="mt-3 grid gap-2 sm:grid-cols-2">
+          <dl class="mt-3 grid gap-2 sm:grid-cols-2">
             {#if defaultIdentifier}
-              <div class="rounded-xl border border-border/70 bg-background/80 px-3 py-2">
-                <p class="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
-                  {i18n.t('auth.usernameOrEmail')}
-                </p>
-                <p class="mt-1 font-mono text-sm font-semibold text-foreground">{defaultIdentifier}</p>
+              <div class="rounded-md border border-border bg-background px-3 py-2">
+                <dt class="text-xs font-medium text-muted-foreground">{i18n.t('auth.usernameOrEmail')}</dt>
+                <dd class="mt-1 truncate font-mono text-sm text-foreground">{defaultIdentifier}</dd>
               </div>
             {/if}
             {#if defaultPassword}
-              <div class="rounded-xl border border-border/70 bg-background/80 px-3 py-2">
-                <p class="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
-                  {i18n.t('auth.password')}
-                </p>
-                <p class="mt-1 font-mono text-sm font-semibold text-foreground">{defaultPassword}</p>
+              <div class="rounded-md border border-border bg-background px-3 py-2">
+                <dt class="text-xs font-medium text-muted-foreground">{i18n.t('auth.password')}</dt>
+                <dd class="mt-1 font-mono text-sm text-foreground">{defaultPassword}</dd>
               </div>
             {/if}
-          </div>
-        </div>
+          </dl>
+        </aside>
       {/if}
 
-      <form onsubmit={handleSubmit} class="space-y-6 login-form">
+      <form onsubmit={handleSubmit} class="space-y-5">
         {#if error}
-          <Alert.Root variant="destructive" class="rounded-xl border border-destructive/20 bg-destructive/5">
+          <Alert.Root variant="destructive">
             <AlertCircle class="h-4 w-4" />
             <Alert.Description class="text-sm font-medium">{error}</Alert.Description>
           </Alert.Root>
         {/if}
 
-        <div class="space-y-2.5">
-          <Label for="login-identifier" class="text-sm font-semibold text-foreground/80 pl-0.5">
+        <div class="space-y-2">
+          <Label for="login-identifier">
             {i18n.t('auth.usernameOrEmail')}
           </Label>
           <div class="relative">
-            <User class="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground pointer-events-none z-[1]" />
+            <User class="pointer-events-none absolute left-3 top-1/2 z-[1] h-4 w-4 -translate-y-1/2 text-muted-foreground" />
             <Input
               id="login-identifier"
               type="text"
               placeholder={i18n.t('auth.identifierPlaceholder')}
               bind:value={identifier}
-              class="pl-12"
+              class="pl-9"
               autocomplete="username"
             />
           </div>
         </div>
 
-        <div class="space-y-2.5">
-          <div class="flex items-center justify-between pl-0.5">
-            <Label for="login-password" class="text-sm font-semibold text-foreground/80">
+        <div class="space-y-2">
+          <div class="flex items-center justify-between">
+            <Label for="login-password">
               {i18n.t('auth.password')}
             </Label>
             {#if authProvider?.forgotPassword}
-              <Button variant="link" class="text-xs h-auto p-0 font-medium hover:text-primary transition-colors" onclick={() => adminContext.navigate('/forgot-password')}>
+              <Button variant="link" class="h-auto p-0 text-xs font-medium" onclick={() => adminContext.navigate('/forgot-password')}>
                 {i18n.t('auth.forgotPasswordLink')}
               </Button>
             {/if}
@@ -185,7 +139,7 @@
           />
         </div>
 
-        <Button type="submit" class="w-full h-14 rounded-xl text-base font-semibold shadow-md shadow-primary/20 hover:shadow-lg hover:shadow-primary/25 hover:-translate-y-[1px] active:translate-y-0 transition-all duration-200 mt-2" disabled={login.isLoading}>
+        <Button type="submit" class="h-10 w-full" disabled={login.isLoading}>
           {#if login.isLoading}
             <Loader2 class="h-5 w-5 animate-spin mr-2" />
           {/if}
@@ -194,9 +148,9 @@
       </form>
 
       {#if socialProviders.length > 0}
-        <div class="relative my-8">
+        <div class="relative my-6">
           <Separator />
-          <span class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-background px-4 text-xs font-semibold text-muted-foreground tracking-wider uppercase">
+          <span class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card px-4 text-xs font-medium text-muted-foreground">
             {i18n.t('auth.orContinueWith')}
           </span>
         </div>
@@ -205,7 +159,7 @@
           {#each socialProviders as provider (provider.name)}
             <Button
               variant="outline"
-              class="w-full h-12 rounded-xl font-semibold border-input/60 hover:bg-muted/50 hover:text-accent-foreground transition-all duration-200"
+              class="h-10 w-full"
               onclick={provider.onClick}
             >
               {#if provider.icon}
@@ -216,49 +170,4 @@
           {/each}
         </div>
       {/if}
-
-      {#if authProvider?.register}
-        <div class="flex items-center justify-center gap-1.5 mt-8 pt-6 border-t border-border/60">
-          <span class="text-sm text-muted-foreground">{i18n.t('auth.noAccount')}</span>
-          <Button variant="link" class="text-sm h-auto p-0 font-semibold text-primary hover:underline" onclick={() => adminContext.navigate('/register')}>
-            {i18n.t('auth.register')}
-          </Button>
-        </div>
-      {/if}
-
-      <p class="text-xs text-muted-foreground/50 mt-8 text-center tracking-wide font-medium">
-        Powered by {title}
-      </p>
-    </div>
-  </div>
-</div>
-
-<style>
-  .login-form :global(input[data-slot='input']) {
-    height: 3.5rem;
-    border-radius: 0.75rem;
-    border-color: color-mix(in oklch, var(--border) 88%, var(--foreground));
-    background-color: var(--background);
-    font-size: 0.975rem;
-    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
-  }
-
-  .login-form :global(input[data-slot='input']:focus-visible) {
-    border-color: var(--primary);
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 18%, transparent);
-  }
-
-  .login-form :global(.relative > svg:first-of-type) {
-    left: 1rem;
-    height: 1.25rem;
-    width: 1.25rem;
-    color: color-mix(in oklch, var(--muted-foreground) 82%, var(--foreground));
-  }
-
-  .login-form :global(.relative > button) {
-    right: 0.625rem;
-    height: 2.25rem;
-    width: 2.25rem;
-    border-radius: 0.5rem;
-  }
-</style>
+</AuthPageShell>

package/dist/components/PermissionMatrix.svelte

@@ -80,8 +80,8 @@
 
   <div class="flex flex-col md:flex-row gap-6 flex-1 min-h-[500px]">
     <!-- Left: Role Selector Sidebar -->
-    <div class="w-full md:w-64 flex-shrink-0 bg-card rounded-xl shadow-sm border border-border p-4 flex flex-col">
-      <h2 class="text-sm font-semibold text-muted-foreground uppercase tracking-wider mb-4 px-2">{i18n.t('permissions.roles') || 'Roles'}</h2>
+    <div class="w-full md:w-64 flex-shrink-0 bg-card rounded-lg shadow-sm border border-border p-4 flex flex-col">
+      <h2 class="text-sm font-semibold text-muted-foregroundr mb-4 px-2">{i18n.t('permissions.roles') || 'Roles'}</h2>
       <div class="space-y-1 flex-1 overflow-y-auto">
         {#each roles as role, _i (_i)}
           <button 
@@ -89,7 +89,7 @@
             class="w-full text-left px-3 py-2.5 rounded-lg text-sm transition-all duration-200 {selectedRole === role.code ? 'bg-primary/10 text-primary font-medium shadow-sm ring-1 ring-primary/20' : 'text-foreground hover:bg-muted'}"
           >
             {role.name}
-            <div class="text-[10px] mt-0.5 opacity-60 font-mono tracking-tighter">{role.code}</div>
+            <div class="text-[10px] mt-0.5 opacity-60 font-monoer">{role.code}</div>
           </button>
         {/each}
         {#if roles.length === 0}
@@ -106,7 +106,7 @@
     </div>
 
     <!-- Right: Matrix Grid -->
-    <div class="flex-1 bg-card rounded-xl shadow-sm border border-border overflow-hidden flex flex-col">
+    <div class="flex-1 bg-card rounded-lg shadow-sm border border-border overflow-hidden flex flex-col">
       <!-- Matrix Header -->
       <div class="p-5 border-b border-border bg-muted/30 flex items-center justify-between">
         <div class="flex items-center gap-4">
@@ -156,7 +156,7 @@
               <!-- Section Grouping Header -->
               {#if resource.section && (i === 0 || resource.section !== resources[i-1].section)}
                 <tr class="bg-primary/5">
-                  <td colspan="{actions.length + 1}" class="px-4 py-2 text-xs font-bold text-primary uppercase tracking-wider">{resource.section}</td>
+                  <td colspan="{actions.length + 1}" class="px-4 py-2 text-xs font-bold text-primaryr">{resource.section}</td>
                 </tr>
               {/if}
               

package/dist/components/RegisterPage.svelte

@@ -5,8 +5,8 @@
   import { Input } from './ui/input/index.js';
   import { Label } from './ui/label/index.js';
   import * as Alert from './ui/alert/index.js';
+  import AuthPageShell from './AuthPageShell.svelte';
   import PasswordInput from './PasswordInput.svelte';
-  import SvadminLogo from './SvadminLogo.svelte';
   import { User, Loader2, AlertCircle } from '@lucide/svelte';
 
   const i18n = useTranslation();
@@ -41,53 +41,11 @@
   }
 </script>
 
-<div class="min-h-screen flex flex-col lg:flex-row">
-  <!-- Left brand panel (mirrors LoginPage) -->
-  <div class="hidden lg:flex lg:w-[480px] xl:w-[520px] relative overflow-hidden bg-gradient-to-br from-primary/90 via-primary to-primary/80 shrink-0">
-    <div class="absolute inset-0">
-      <div class="absolute top-[12%] left-[8%] w-28 h-28 rounded-3xl border border-white/10 bg-white/5 rotate-12 backdrop-blur-sm"></div>
-      <div class="absolute top-[55%] left-[55%] w-40 h-40 rounded-full border border-white/10 bg-white/5 -rotate-6 backdrop-blur-sm"></div>
-      <div class="absolute bottom-[15%] left-[15%] w-24 h-24 rounded-2xl border border-white/10 bg-white/5 -rotate-12 backdrop-blur-sm"></div>
-      <div class="absolute top-[30%] right-[10%] w-16 h-16 rounded-xl border border-white/10 bg-white/5 rotate-45 backdrop-blur-sm"></div>
-      <div class="absolute inset-0 opacity-[0.03]" style="background-image: radial-gradient(circle, white 1px, transparent 1px); background-size: 24px 24px;"></div>
-    </div>
-
-    <div class="relative z-10 flex flex-col justify-between p-10 xl:p-12 w-full">
-      <div class="flex items-center gap-3">
-        <SvadminLogo size={36} onDark />
-        <span class="text-lg font-semibold text-white tracking-tight">{title}</span>
-      </div>
-
-      <div class="space-y-4">
-        <h2 class="text-3xl xl:text-4xl font-bold text-white leading-tight">
-          {i18n.t('auth.createAccount')}
-        </h2>
-        <p class="text-base text-white/70 leading-relaxed max-w-[320px]">
-          {i18n.t('auth.createAccountMessage')}
-        </p>
-      </div>
-
-      <div class="flex items-center gap-3">
-        <div class="h-1 w-8 rounded-full bg-white/30"></div>
-        <div class="h-1 w-4 rounded-full bg-white/15"></div>
-        <div class="h-1 w-2 rounded-full bg-white/10"></div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Right form panel -->
-  <div class="flex-1 flex items-center justify-center bg-background p-6 sm:p-8 lg:p-12">
-    <div class="w-full max-w-[400px]">
-      <div class="mb-8 flex items-center gap-3 lg:hidden">
-        <SvadminLogo size={36} />
-        <span class="text-lg font-semibold tracking-tight">{title}</span>
-      </div>
-
-      <div class="space-y-1 mb-8">
-        <h1 class="text-2xl font-semibold tracking-tight">{i18n.t('auth.createAccount')}</h1>
-        <p class="text-sm text-muted-foreground">{i18n.t('auth.createAccountMessage')}</p>
-      </div>
+{#snippet footer()}
+  <div class="flex items-center justify-center gap-1"><span class="text-sm text-muted-foreground">{i18n.t('auth.hasAccount')}</span><Button variant="link" class="h-auto p-0 text-sm font-medium" onclick={() => adminContext.navigate('/login')}>{i18n.t('auth.login')}</Button></div>
+{/snippet}
 
+<AuthPageShell brand={title} title={i18n.t('auth.createAccount')} description={i18n.t('auth.createAccountMessage')} {footer}>
       <form onsubmit={handleSubmit} class="space-y-5">
         {#if error}
           <Alert.Root variant="destructive">
@@ -126,24 +84,11 @@
           autocomplete="new-password"
         />
 
-        <Button type="submit" class="w-full h-10" disabled={register.isLoading}>
+        <Button type="submit" class="h-10 w-full" disabled={register.isLoading}>
           {#if register.isLoading}
             <Loader2 class="h-4 w-4 animate-spin mr-2" />
           {/if}
           {i18n.t('auth.registerButton')}
         </Button>
       </form>
-
-      <div class="flex items-center justify-center gap-1 mt-8 pt-6 border-t">
-        <span class="text-sm text-muted-foreground">{i18n.t('auth.hasAccount')}</span>
-        <Button variant="link" class="text-sm h-auto p-0 font-medium" onclick={() => adminContext.navigate('/login')}>
-          {i18n.t('auth.login')}
-        </Button>
-      </div>
-
-      <p class="text-xs text-muted-foreground/60 mt-8 text-center">
-        Powered by {title}
-      </p>
-    </div>
-  </div>
-</div>
+</AuthPageShell>

package/dist/components/SvadminLogo.svelte

@@ -10,7 +10,7 @@
 
 <span
   aria-hidden="true"
-  class="inline-block shrink-0 rounded-lg bg-gradient-to-tr from-primary to-purple-500 shadow-sm {onDark ? 'ring-1 ring-white/35' : ''}"
+  class="inline-block shrink-0 rounded-lg bg-primary shadow-sm {onDark ? 'ring-1 ring-white/35' : ''}"
   style:width={`${size}px`}
   style:height={`${size}px`}
 ></span>

package/dist/components/UpdatePasswordPage.svelte

@@ -4,8 +4,8 @@
 
   import { Button } from './ui/button/index.js';
   import * as Alert from './ui/alert/index.js';
+  import AuthPageShell from './AuthPageShell.svelte';
   import PasswordInput from './PasswordInput.svelte';
-  import SvadminLogo from './SvadminLogo.svelte';
   import { Loader2, AlertCircle } from '@lucide/svelte';
 
   const i18n = useTranslation();
@@ -35,53 +35,7 @@
   }
 </script>
 
-<div class="min-h-screen flex flex-col lg:flex-row">
-  <!-- Left brand panel -->
-  <div class="hidden lg:flex lg:w-[480px] xl:w-[520px] relative overflow-hidden bg-gradient-to-br from-primary/90 via-primary to-primary/80 shrink-0">
-    <div class="absolute inset-0">
-      <div class="absolute top-[12%] left-[8%] w-28 h-28 rounded-3xl border border-white/10 bg-white/5 rotate-12 backdrop-blur-sm"></div>
-      <div class="absolute top-[55%] left-[55%] w-40 h-40 rounded-full border border-white/10 bg-white/5 -rotate-6 backdrop-blur-sm"></div>
-      <div class="absolute bottom-[15%] left-[15%] w-24 h-24 rounded-2xl border border-white/10 bg-white/5 -rotate-12 backdrop-blur-sm"></div>
-      <div class="absolute top-[30%] right-[10%] w-16 h-16 rounded-xl border border-white/10 bg-white/5 rotate-45 backdrop-blur-sm"></div>
-      <div class="absolute inset-0 opacity-[0.03]" style="background-image: radial-gradient(circle, white 1px, transparent 1px); background-size: 24px 24px;"></div>
-    </div>
-
-    <div class="relative z-10 flex flex-col justify-between p-10 xl:p-12 w-full">
-      <div class="flex items-center gap-3">
-        <SvadminLogo size={36} onDark />
-        <span class="text-lg font-semibold text-white tracking-tight">{title}</span>
-      </div>
-
-      <div class="space-y-4">
-        <h2 class="text-3xl xl:text-4xl font-bold text-white leading-tight">
-          {i18n.t('auth.resetPassword')}
-        </h2>
-        <p class="text-base text-white/70 leading-relaxed max-w-[320px]">
-          {i18n.t('auth.resetPasswordDescription')}
-        </p>
-      </div>
-
-      <div class="flex items-center gap-3">
-        <div class="h-1 w-8 rounded-full bg-white/30"></div>
-        <div class="h-1 w-4 rounded-full bg-white/15"></div>
-        <div class="h-1 w-2 rounded-full bg-white/10"></div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Right form panel -->
-  <div class="flex-1 flex items-center justify-center bg-background p-6 sm:p-8 lg:p-12">
-    <div class="w-full max-w-[400px]">
-      <div class="mb-8 flex items-center gap-3 lg:hidden">
-        <SvadminLogo size={36} />
-        <span class="text-lg font-semibold tracking-tight">{title}</span>
-      </div>
-
-      <div class="space-y-1 mb-8">
-        <h1 class="text-2xl font-semibold tracking-tight">{i18n.t('auth.resetPassword')}</h1>
-        <p class="text-sm text-muted-foreground">{i18n.t('auth.resetPasswordDescription')}</p>
-      </div>
-
+<AuthPageShell brand={title} title={i18n.t('auth.resetPassword')} description={i18n.t('auth.resetPasswordDescription')}>
       <form onsubmit={handleSubmit} class="space-y-5">
         {#if error}
           <Alert.Root variant="destructive">
@@ -118,10 +72,4 @@
           </Button>
         </div>
       </form>
-
-      <p class="text-xs text-muted-foreground/60 mt-8 text-center">
-        Powered by {title}
-      </p>
-    </div>
-  </div>
-</div>
+</AuthPageShell>

package/dist/components/account/CompanyProfilePage.svelte

@@ -4,11 +4,13 @@
   import { Button } from '../ui/button/index.js';
   import { Input } from '../ui/input/index.js';
   import { Label } from '../ui/label/index.js';
-  import * as Card from '../ui/card/index.js';
+  import { Textarea } from '../ui/textarea/index.js';
   import ContentPageShell from '../content/ContentPageShell.svelte';
   import ContentPageHeader from '../content/ContentPageHeader.svelte';
   import DescriptionList from '../content/DescriptionList.svelte';
   import MemberList from '../content/MemberList.svelte';
+  import SectionHeader from '../content/SectionHeader.svelte';
+  import SettingsGroup from '../content/SettingsGroup.svelte';
   import type { MemberSummary } from '../content/MemberList.svelte';
   const i18n = useTranslation();
   let companyName = $state('Acme Corporation');
@@ -25,11 +27,15 @@
   async function save() { saving = true; await new Promise((resolve) => setTimeout(resolve, 400)); saving = false; }
 </script>
 
+{#snippet headerActions()}
+  <Button onclick={save} disabled={saving} size="sm">{#if saving}<Loader2 class="size-3.5 animate-spin" />{/if}{i18n.t('common.save')}</Button>
+{/snippet}
+
 <ContentPageShell pageId="account-company-profile" width="wide">
-  <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"><ContentPageHeader title={i18n.t("account.companyProfile")} description={i18n.t("account.companyProfileDescription")} /><Button onclick={save} disabled={saving} size="sm">{#if saving}<Loader2 class="size-3.5 animate-spin" />{/if}{i18n.t("common.save")}</Button></div>
+  <ContentPageHeader title={i18n.t('account.companyProfile')} description={i18n.t('account.companyProfileDescription')} actions={headerActions} />
   <div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_20rem]">
-    <Card.Card><Card.CardContent class="space-y-4 p-5"><div class="grid gap-4 sm:grid-cols-2"><div class="space-y-2"><Label for="company-name">{i18n.t('profile.companyName')}</Label><Input id="company-name" bind:value={companyName} /></div><div class="space-y-2"><Label for="company-industry">{i18n.t('profile.industry')}</Label><Input id="company-industry" bind:value={industry} /></div><div class="space-y-2 sm:col-span-2"><Label for="company-website">{i18n.t('profile.website')}</Label><Input id="company-website" bind:value={website} type="url" /></div></div><div class="space-y-2"><Label for="company-description">{i18n.t('profile.companyDescription')}</Label><textarea id="company-description" bind:value={description} rows={4} class="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"></textarea></div></Card.CardContent></Card.Card>
-    <Card.Card><Card.CardContent class="space-y-4 p-5"><div><p class="text-xs font-medium text-muted-foreground">{i18n.t('profile.companyName')}</p><p class="mt-1 text-lg font-semibold text-foreground">{companyName}</p><p class="text-sm text-muted-foreground">{industry}</p></div><DescriptionList columns={1} items={[{ label: i18n.t('profile.website'), value: website, href: website }, { label: i18n.t('profile.employees'), value: '1,250' }, { label: i18n.t('profile.founded'), value: '2015' }]} /></Card.CardContent></Card.Card>
+    <SettingsGroup title={i18n.t('account.basicSettings')} description={i18n.t('account.companyProfileDescription')} bodyClass="space-y-4"><div class="grid gap-4 sm:grid-cols-2"><div class="space-y-2"><Label for="company-name">{i18n.t('profile.companyName')}</Label><Input id="company-name" bind:value={companyName} /></div><div class="space-y-2"><Label for="company-industry">{i18n.t('profile.industry')}</Label><Input id="company-industry" bind:value={industry} /></div><div class="space-y-2 sm:col-span-2"><Label for="company-website">{i18n.t('profile.website')}</Label><Input id="company-website" bind:value={website} type="url" /></div></div><div class="space-y-2"><Label for="company-description">{i18n.t('profile.companyDescription')}</Label><Textarea id="company-description" bind:value={description} rows={4} /></div></SettingsGroup>
+    <SettingsGroup title={i18n.t('profile.companyName')} description={industry} bodyClass="space-y-4"><p class="text-lg font-semibold text-foreground">{companyName}</p><DescriptionList columns={1} items={[{ label: i18n.t('profile.website'), value: website, href: website }, { label: i18n.t('profile.employees'), value: '1,250' }, { label: i18n.t('profile.founded'), value: '2015' }]} /></SettingsGroup>
   </div>
-  <section class="space-y-3"><h2 class="text-base font-semibold text-foreground">{i18n.t('profileSections.members')}</h2><MemberList {members} /></section>
+  <section class="space-y-3"><SectionHeader title={i18n.t('profileSections.members')} /><MemberList {members} emptyTitle={i18n.t('common.noData')} emptyDescription={i18n.t('empty.description')} /></section>
 </ContentPageShell>