@svadmin/ui 0.34.9 → 0.35.0

package/dist/components/TwoFactorAuthPage.svelte

@@ -0,0 +1,247 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import * as Card from './ui/card/index.js';
+  import { Button } from './ui/button/index.js';
+  import { Input } from './ui/input/index.js';
+  import * as Alert from './ui/alert/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import { Separator } from './ui/separator/index.js';
+  import { Shield, Copy, CheckCircle2, AlertTriangle, ArrowRight, ArrowLeft } from '@lucide/svelte';
+
+  type Step = 'intro' | 'scan' | 'verify' | 'recovery';
+
+  let currentStep = $state<Step>('intro');
+  let is2faEnabled = $state(false);
+  let verifyError = $state('');
+  let copiedRecovery = $state(false);
+  let codeDigits = $state<string[]>(Array.from({ length: 6 }, () => ''));
+
+  const verificationCode = $derived(codeDigits.join(''));
+  const qrCells = [
+    '11111110',
+    '10010010',
+    '10111010',
+    '10100100',
+    '11101010',
+    '00101110',
+    '11010100',
+    '01110110',
+  ].flatMap(row => [...row].map(cell => cell === '1'));
+
+  const recoveryCodes = [
+    'A1B2-C3D4', 'E5F6-G7H8', 'I9J0-K1L2',
+    'M3N4-O5P6', 'Q7R8-S9T0', 'U1V2-W3X4',
+    'Y5Z6-A7B8', 'C9D0-E1F2',
+  ];
+
+  function startSetup() {
+    currentStep = 'scan';
+  }
+
+  function proceedToVerify() {
+    currentStep = 'verify';
+  }
+
+  function handleVerify() {
+    verifyError = '';
+    if (verificationCode.length !== 6) {
+      verifyError = t('auth.twoFactorEnterCode');
+      return;
+    }
+    currentStep = 'recovery';
+  }
+
+  function handleDigitInput(e: Event, index: number) {
+    const input = e.currentTarget as HTMLInputElement;
+    const digit = input.value.replace(/\D/g, '').slice(-1);
+    codeDigits[index] = digit;
+    input.value = digit;
+    if (digit && index < codeDigits.length - 1) {
+      const next = input.parentElement?.children[index + 1] as HTMLInputElement | undefined;
+      next?.focus();
+    }
+  }
+
+  function completeSetup() {
+    is2faEnabled = true;
+    currentStep = 'intro';
+  }
+
+  function disable2fa() {
+    is2faEnabled = false;
+    currentStep = 'intro';
+  }
+
+  function copyRecoveryCodes() {
+    navigator.clipboard?.writeText(recoveryCodes.join('\n'));
+    copiedRecovery = true;
+    setTimeout(() => { copiedRecovery = false; }, 2000);
+  }
+</script>
+
+<div class="flex min-h-[70vh] items-center justify-center p-4">
+  <div class="w-full max-w-lg space-y-6">
+    {#if currentStep === 'intro' && !is2faEnabled}
+      <!-- Intro -->
+      <Card.Card class="border-border/60">
+        <Card.CardContent class="space-y-6 p-8 text-center">
+          <div class="mx-auto inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-amber-500/10 text-amber-500">
+            <Shield class="h-8 w-8" />
+          </div>
+          <div class="space-y-2">
+            <h2 class="text-2xl font-semibold text-foreground">{t('auth.twoFactorSetup')}</h2>
+            <p class="text-sm text-muted-foreground">{t('security.twoFactorDescription')}</p>
+          </div>
+          <div class="space-y-3 text-left">
+            <div class="flex items-start gap-3 rounded-xl border p-3">
+              <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-blue-500/10 text-blue-500 text-sm font-bold">1</div>
+              <div>
+                <p class="text-sm font-medium text-foreground">{t('auth.twoFactorScanQR')}</p>
+                <p class="text-xs text-muted-foreground">Google Authenticator, Authy, etc.</p>
+              </div>
+            </div>
+            <div class="flex items-start gap-3 rounded-xl border p-3">
+              <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-blue-500/10 text-blue-500 text-sm font-bold">2</div>
+              <div>
+                <p class="text-sm font-medium text-foreground">{t('auth.twoFactorEnterCode')}</p>
+                <p class="text-xs text-muted-foreground">6-digit code from your authenticator</p>
+              </div>
+            </div>
+            <div class="flex items-start gap-3 rounded-xl border p-3">
+              <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-blue-500/10 text-blue-500 text-sm font-bold">3</div>
+              <div>
+                <p class="text-sm font-medium text-foreground">{t('auth.twoFactorSaveRecovery')}</p>
+                <p class="text-xs text-muted-foreground">{t('auth.twoFactorRecoveryHint')}</p>
+              </div>
+            </div>
+          </div>
+          <Button class="w-full" onclick={startSetup}>
+            {t('auth.twoFactorSetup')} <ArrowRight class="h-4 w-4 ml-2" />
+          </Button>
+        </Card.CardContent>
+      </Card.Card>
+
+    {:else if currentStep === 'scan'}
+      <!-- QR Code -->
+      <Card.Card class="border-border/60">
+        <Card.CardContent class="space-y-6 p-8">
+          <div class="text-center space-y-2">
+            <h2 class="text-xl font-semibold text-foreground">{t('auth.twoFactorScanQR')}</h2>
+            <p class="text-sm text-muted-foreground">Use your authenticator app to scan the code below.</p>
+          </div>
+          <div class="mx-auto flex h-48 w-48 items-center justify-center rounded-xl border-2 border-dashed border-border/60 bg-muted/20">
+            <div class="grid grid-cols-8 gap-[2px]">
+              {#each qrCells as filled, i (i)}
+                <div class="h-3 w-3 rounded-[1px] {filled ? 'bg-foreground' : 'bg-transparent'}"></div>
+              {/each}
+            </div>
+          </div>
+          <div class="flex gap-3">
+            <Button variant="outline" class="flex-1" onclick={() => currentStep = 'intro'}>
+              <ArrowLeft class="h-4 w-4 mr-2" />{t('common.back')}
+            </Button>
+            <Button class="flex-1" onclick={proceedToVerify}>
+              {t('common.next')} <ArrowRight class="h-4 w-4 ml-2" />
+            </Button>
+          </div>
+        </Card.CardContent>
+      </Card.Card>
+
+    {:else if currentStep === 'verify'}
+      <!-- Verify -->
+      <Card.Card class="border-border/60">
+        <Card.CardContent class="space-y-6 p-8">
+          <div class="text-center space-y-2">
+            <h2 class="text-xl font-semibold text-foreground">{t('auth.twoFactorVerify')}</h2>
+            <p class="text-sm text-muted-foreground">{t('auth.twoFactorEnterCode')}</p>
+          </div>
+
+          {#if verifyError}
+            <Alert.Root variant="destructive">
+              <AlertTriangle class="h-4 w-4" />
+              <Alert.Description>{verifyError}</Alert.Description>
+            </Alert.Root>
+          {/if}
+
+          <div class="flex justify-center gap-2">
+            {#each Array(6) as _, i (i)}
+              <Input
+                class="h-14 w-12 text-center text-xl font-bold"
+                maxlength={1}
+                inputmode="numeric"
+                pattern="[0-9]*"
+                bind:value={codeDigits[i]}
+                oninput={(e: Event) => handleDigitInput(e, i)}
+              />
+            {/each}
+          </div>
+
+          <div class="flex gap-3">
+            <Button variant="outline" class="flex-1" onclick={() => currentStep = 'scan'}>
+              <ArrowLeft class="h-4 w-4 mr-2" />{t('common.back')}
+            </Button>
+            <Button class="flex-1" onclick={handleVerify}>
+              {t('common.confirm')} <ArrowRight class="h-4 w-4 ml-2" />
+            </Button>
+          </div>
+        </Card.CardContent>
+      </Card.Card>
+
+    {:else if currentStep === 'recovery'}
+      <!-- Recovery codes -->
+      <Card.Card class="border-border/60">
+        <Card.CardContent class="space-y-6 p-8">
+          <div class="text-center space-y-2">
+            <div class="mx-auto inline-flex h-12 w-12 items-center justify-center rounded-xl bg-green-500/10 text-green-500">
+              <CheckCircle2 class="h-6 w-6" />
+            </div>
+            <h2 class="text-xl font-semibold text-foreground">{t('auth.twoFactorRecovery')}</h2>
+            <p class="text-sm text-muted-foreground">{t('auth.twoFactorRecoveryHint')}</p>
+          </div>
+
+          <div class="rounded-xl border bg-muted/20 p-4">
+            <div class="grid grid-cols-2 gap-2 font-mono text-sm">
+              {#each recoveryCodes as code, i (i)}
+                <div class="rounded-lg bg-background px-3 py-1.5 text-center text-foreground">{code}</div>
+              {/each}
+            </div>
+          </div>
+
+          <div class="flex gap-3">
+            <Button variant="outline" class="flex-1" onclick={copyRecoveryCodes}>
+              {#if copiedRecovery}
+                <CheckCircle2 class="h-4 w-4 mr-2" />{t('common.copied')}
+              {:else}
+                <Copy class="h-4 w-4 mr-2" />{t('common.copyAll')}
+              {/if}
+            </Button>
+            <Button class="flex-1" onclick={completeSetup}>
+              {t('account.completeSetup')} <ArrowRight class="h-4 w-4 ml-2" />
+            </Button>
+          </div>
+        </Card.CardContent>
+      </Card.Card>
+
+    {:else}
+      <!-- 2FA enabled state -->
+      <Card.Card class="border-border/60">
+        <Card.CardContent class="space-y-6 p-8 text-center">
+          <div class="mx-auto inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-green-500/10 text-green-500">
+            <Shield class="h-8 w-8" />
+          </div>
+          <div class="space-y-2">
+            <h2 class="text-2xl font-semibold text-foreground">{t('auth.twoFactorVerifySuccess')}</h2>
+            <p class="text-sm text-muted-foreground">{t('security.twoFactorActive')}</p>
+          </div>
+          <Badge variant="secondary" class="bg-green-500/10 text-green-600">
+            <CheckCircle2 class="h-3 w-3 mr-1" />2FA Active
+          </Badge>
+          <Separator />
+          <Button variant="destructive" onclick={disable2fa}>
+            {t('auth.twoFactorDisable')}
+          </Button>
+        </Card.CardContent>
+      </Card.Card>
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,3 @@
+declare const TwoFactorAuthPage: import("svelte").Component<Record<string, never>, {}, "">;
+type TwoFactorAuthPage = ReturnType<typeof TwoFactorAuthPage>;
+export default TwoFactorAuthPage;

package/dist/components/UpdatePasswordPage.svelte

@@ -3,10 +3,9 @@
   import { t } from '@svadmin/core/i18n';
   import { navigate } from '@svadmin/core/router';
   import { Button } from './ui/button/index.js';
-  import * as Card from './ui/card/index.js';
   import * as Alert from './ui/alert/index.js';
   import PasswordInput from './PasswordInput.svelte';
-  import { ShieldCheck, Loader2, AlertCircle } from '@lucide/svelte';
+  import { ShieldCheck, Loader2, AlertCircle, Shield } from '@lucide/svelte';
 
   let { title = 'Admin' } = $props<{
     title?: string;
@@ -32,58 +31,97 @@
   }
 </script>
 
-<div class="min-h-screen flex items-center justify-center bg-background p-4">
-  <div class="w-full max-w-[380px]">
-    <Card.Card>
-      <Card.CardHeader class="text-center pb-2">
-        <div class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10 text-primary mx-auto mb-3">
+<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">
+        <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-white/15 backdrop-blur-sm">
+          <Shield class="h-5 w-5 text-white" />
+        </div>
+        <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">
+          {t('auth.resetPassword')}
+        </h2>
+        <p class="text-base text-white/70 leading-relaxed max-w-[320px]">
+          {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="flex items-center gap-3 mb-8 lg:hidden">
+        <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
           <ShieldCheck class="h-5 w-5" />
         </div>
-        <Card.CardTitle class="text-xl">{t('auth.resetPassword')}</Card.CardTitle>
+        <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">{t('auth.resetPassword')}</h1>
         <p class="text-sm text-muted-foreground">{t('auth.resetPasswordDescription')}</p>
-      </Card.CardHeader>
-      <Card.CardContent>
-        <form onsubmit={handleSubmit} class="space-y-4">
-          {#if error}
-            <Alert.Root variant="destructive">
-              <AlertCircle class="h-4 w-4" />
-              <Alert.Description>{error}</Alert.Description>
-            </Alert.Root>
+      </div>
+
+      <form onsubmit={handleSubmit} class="space-y-5">
+        {#if error}
+          <Alert.Root variant="destructive">
+            <AlertCircle class="h-4 w-4" />
+            <Alert.Description>{error}</Alert.Description>
+          </Alert.Root>
+        {/if}
+
+        <PasswordInput
+          id="new-password"
+          label={t('auth.password')}
+          bind:value={password}
+          autocomplete="new-password"
+          showStrength
+        />
+
+        <PasswordInput
+          id="confirm-password"
+          label={t('auth.confirmPassword')}
+          bind:value={confirmPassword}
+          autocomplete="new-password"
+        />
+
+        <Button type="submit" class="w-full h-10" disabled={updatePw.isLoading}>
+          {#if updatePw.isLoading}
+            <Loader2 class="h-4 w-4 animate-spin mr-2" />
           {/if}
+          {t('auth.resetPassword')}
+        </Button>
 
-          <PasswordInput
-            id="new-password"
-            label={t('auth.password')}
-            bind:value={password}
-            autocomplete="new-password"
-            showStrength
-          />
-
-          <PasswordInput
-            id="confirm-password"
-            label={t('auth.confirmPassword')}
-            bind:value={confirmPassword}
-            autocomplete="new-password"
-          />
-
-          <Button type="submit" class="w-full" disabled={updatePw.isLoading}>
-            {#if updatePw.isLoading}
-              <Loader2 class="h-4 w-4 animate-spin mr-2" />
-            {/if}
-            {t('auth.resetPassword')}
+        <div class="flex items-center justify-center mt-2">
+          <Button variant="link" class="text-sm h-auto p-0 font-medium" onclick={() => navigate('/login')}>
+            {t('auth.backToLogin')}
           </Button>
+        </div>
+      </form>
 
-          <div class="flex items-center justify-center mt-2">
-            <Button variant="link" class="text-sm h-auto p-0 font-medium" onclick={() => navigate('/login')}>
-              {t('auth.backToLogin')}
-            </Button>
-          </div>
-        </form>
-      </Card.CardContent>
-    </Card.Card>
-
-    <p class="text-xs text-muted-foreground mt-4 text-center opacity-60">
-      Powered by {title}
-    </p>
+      <p class="text-xs text-muted-foreground/60 mt-8 text-center">
+        Powered by {title}
+      </p>
+    </div>
   </div>
 </div>

package/dist/components/VirtualTable.svelte

@@ -37,7 +37,7 @@
   let scrollTop = $state(0);
   let containerRef = $state<HTMLDivElement | null>(null);
 
-  const totalHeight = $derived(items.length * rowHeight);
+  const _totalHeight = $derived(items.length * rowHeight);
 
   const visibleRange = $derived.by(() => {
     const start = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);

package/dist/components/VoiceInput.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+/* eslint-disable no-undef */
   import { Mic, MicOff, Loader2 } from '@lucide/svelte';
   import TooltipButton from './TooltipButton.svelte';
 

package/dist/components/account/CompanyProfilePage.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import * as Card from '../ui/card/index.js';
+  import { Button } from '../ui/button/index.js';
+  import { Input } from '../ui/input/index.js';
+  import { Label } from '../ui/label/index.js';
+  import { Upload, Loader2 } from '@lucide/svelte';
+
+  let companyName = $state('Acme Corporation');
+  let industry = $state('Technology');
+  let website = $state('https://acme.com');
+  let employeeCount = $state('1,250');
+  let foundedYear = $state('2015');
+  let description = $state('Building the future of enterprise software with cutting-edge AI and cloud solutions.');
+  let saving = $state(false);
+
+  async function handleSave() {
+    saving = true;
+    await new Promise(r => setTimeout(r, 800));
+    saving = false;
+  }
+</script>
+
+<div class="space-y-6">
+  <div>
+    <h2 class="text-xl font-semibold text-foreground">{t('account.companyProfile')}</h2>
+    <p class="mt-1 text-sm text-muted-foreground">{t('account.companyProfileDescription')}</p>
+  </div>
+
+  <!-- Company Avatar & Banner -->
+  <Card.Card class="border-border/60">
+    <Card.CardContent class="p-0">
+      <div class="h-32 bg-gradient-to-r from-primary/20 via-primary/10 to-accent/20 relative rounded-t-xl">
+        <button class="absolute bottom-2 right-2 flex h-8 w-8 items-center justify-center rounded-lg bg-black/40 text-white hover:bg-black/60 transition-colors">
+          <Upload class="h-4 w-4" />
+        </button>
+      </div>
+      <div class="relative px-6 pb-5">
+        <div class="-mt-8 flex items-end gap-4">
+          <div class="ring-4 ring-card rounded-xl overflow-hidden shrink-0">
+            <div class="flex h-16 w-16 items-center justify-center bg-primary/10 text-primary text-xl font-bold">
+              {companyName.split(' ').map(n => n[0]).join('').slice(0, 2)}
+            </div>
+          </div>
+          <div class="pb-1">
+            <h3 class="text-lg font-semibold text-foreground">{companyName}</h3>
+            <p class="text-sm text-muted-foreground">{industry}</p>
+          </div>
+        </div>
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+
+  <!-- Company Details Form -->
+  <Card.Card class="border-border/60">
+    <Card.CardHeader>
+      <Card.CardTitle class="text-base">{t('profile.companyName')}</Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent class="space-y-4">
+      <div class="grid gap-4 sm:grid-cols-2">
+        <div class="space-y-2">
+          <Label for="company-name">{t('profile.companyName')}</Label>
+          <Input id="company-name" bind:value={companyName} />
+        </div>
+        <div class="space-y-2">
+          <Label for="company-industry">{t('profile.industry')}</Label>
+          <Input id="company-industry" bind:value={industry} />
+        </div>
+        <div class="space-y-2">
+          <Label for="company-website">{t('profile.website')}</Label>
+          <Input id="company-website" bind:value={website} type="url" />
+        </div>
+        <div class="space-y-2">
+          <Label for="company-employees">{t('profile.employees')}</Label>
+          <Input id="company-employees" bind:value={employeeCount} />
+        </div>
+        <div class="space-y-2">
+          <Label for="company-founded">{t('profile.founded')}</Label>
+          <Input id="company-founded" bind:value={foundedYear} />
+        </div>
+      </div>
+      <div class="space-y-2">
+        <Label for="company-description">{t('profile.companyDescription')}</Label>
+        <textarea
+          id="company-description"
+          bind:value={description}
+          rows={3}
+          class="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        ></textarea>
+      </div>
+      <div class="flex justify-end">
+        <Button onclick={handleSave} disabled={saving}>
+          {#if saving}<Loader2 class="h-4 w-4 animate-spin mr-2" />{/if}
+          {t('common.save')}
+        </Button>
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+</div>

package/dist/components/account/CompanyProfilePage.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const CompanyProfilePage: import("svelte").Component<Record<string, never>, {}, "">;
+type CompanyProfilePage = ReturnType<typeof CompanyProfilePage>;
+export default CompanyProfilePage;

package/dist/components/account/GetStartedPage.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import * as Card from '../ui/card/index.js';
+  import { Button } from '../ui/button/index.js';
+  import { Badge } from '../ui/badge/index.js';
+  import { Camera, UserPlus, Puzzle, Users, CheckCircle2, ArrowRight, Sparkles } from '@lucide/svelte';
+  import type { Component } from 'svelte';
+
+  interface Step {
+    key: string;
+    title: string;
+    description: string;
+    icon: Component;
+    completed: boolean;
+  }
+
+  let currentStep = $state(0);
+
+  let steps = $state<Step[]>([
+    { key: 'avatar', title: t('account.uploadAvatar'), description: t('account.getStartedDescription'), icon: Camera, completed: false },
+    { key: 'profile', title: t('account.setupProfile'), description: t('account.getStartedDescription'), icon: UserPlus, completed: false },
+    { key: 'connect', title: t('account.connectProvider'), description: t('account.getStartedDescription'), icon: Puzzle, completed: false },
+    { key: 'team', title: t('account.setupTeam'), description: t('account.getStartedDescription'), icon: Users, completed: false },
+  ]);
+
+  const completedCount = $derived(steps.filter(s => s.completed).length);
+  const progressPercent = $derived(Math.round((completedCount / steps.length) * 100));
+  const allCompleted = $derived(completedCount === steps.length);
+
+  function markComplete(index: number) {
+    steps[index] = { ...steps[index], completed: true };
+    if (currentStep < steps.length - 1) {
+      currentStep = index + 1;
+    }
+  }
+
+  function goToStep(index: number) {
+    if (index <= completedCount) {
+      currentStep = index;
+    }
+  }
+
+  function skipStep() {
+    if (currentStep < steps.length - 1) {
+      currentStep++;
+    }
+  }
+</script>
+
+<div class="space-y-6">
+  <div class="flex items-start justify-between gap-4">
+    <div>
+      <h2 class="text-xl font-semibold text-foreground">{t('account.getStarted')}</h2>
+      <p class="mt-1 text-sm text-muted-foreground">{t('account.getStartedDescription')}</p>
+    </div>
+    <Badge variant="secondary">{progressPercent}%</Badge>
+  </div>
+
+  <!-- Progress bar -->
+  <div class="space-y-1.5">
+    <div class="h-2 rounded-full bg-muted overflow-hidden">
+      <div class="h-full rounded-full bg-primary transition-all duration-500" style="width: {progressPercent}%"></div>
+    </div>
+    <p class="text-xs text-muted-foreground">{t('account.step', { current: completedCount, total: steps.length })}</p>
+  </div>
+
+  {#if allCompleted}
+    <Card.Card class="border-success/30 bg-success/5">
+      <Card.CardContent class="flex items-center gap-4 p-6">
+        <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-success/10 text-success">
+          <Sparkles class="h-6 w-6" />
+        </div>
+        <div>
+          <h3 class="font-semibold text-success">{t('account.completeSetup')}</h3>
+          <p class="text-sm text-success/70">{t('account.getStartedDescription')}</p>
+        </div>
+      </Card.CardContent>
+    </Card.Card>
+  {:else}
+    <!-- Step cards -->
+    <div class="space-y-3">
+      {#each steps as step, i (i)}
+        <Card.Card class="border-border/60 transition-all {currentStep === i ? 'border-primary/40 shadow-sm' : ''} {step.completed ? 'opacity-60' : ''}">
+          <Card.CardContent class="p-4">
+            <div class="flex items-start gap-4">
+              <button
+                class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl transition-colors
+                  {step.completed ? 'bg-success/10 text-success' : currentStep === i ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'}"
+                onclick={() => goToStep(i)}
+              >
+                {#if step.completed}
+                  <CheckCircle2 class="h-5 w-5" />
+                {:else}
+                  <step.icon class="h-5 w-5" />
+                {/if}
+              </button>
+              <div class="flex-1 min-w-0">
+                <div class="flex items-center gap-2">
+                  <h4 class="font-medium text-foreground">{step.title}</h4>
+                  {#if currentStep === i && !step.completed}
+                    <Badge variant="outline" class="text-[10px]">{t('account.step', { current: i + 1, total: steps.length })}</Badge>
+                  {/if}
+                </div>
+                <p class="text-sm text-muted-foreground mt-0.5">{step.description}</p>
+
+                {#if currentStep === i && !step.completed}
+                  <div class="mt-3 flex gap-2">
+                    <Button size="sm" onclick={() => markComplete(i)}>
+                      {t('account.completeSetup')} <ArrowRight class="h-3.5 w-3.5 ml-1" />
+                    </Button>
+                    <Button size="sm" variant="ghost" onclick={skipStep}>
+                      {t('account.skipSetup')}
+                    </Button>
+                  </div>
+                {/if}
+              </div>
+            </div>
+          </Card.CardContent>
+        </Card.Card>
+      {/each}
+    </div>
+  {/if}
+</div>

package/dist/components/account/GetStartedPage.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Component } from 'svelte';
+declare const GetStartedPage: Component<Record<string, never>, {}, "">;
+type GetStartedPage = ReturnType<typeof GetStartedPage>;
+export default GetStartedPage;