@svadmin/ui 0.34.10 → 0.35.0

package/dist/components/SidebarItem.svelte

@@ -5,7 +5,9 @@
   import SidebarItem from './SidebarItem.svelte';
   import {
     LayoutDashboard, FileText, Users, Settings, Home,
-    ChevronDown, Folder, ExternalLink, type Icon as LucideIcon,
+    ChevronDown, Folder, ExternalLink, Repeat, ClipboardCheck, SlidersHorizontal, AlertTriangle,
+    Barcode, FolderTree, Building2, Warehouse, BriefcaseBusiness, Handshake, UserRoundCheck,
+    CalendarCheck, KeyRound, MapPinned,
   } from '@lucide/svelte';
 
   import { formatLink } from '@svadmin/core/router';
@@ -24,9 +26,23 @@
     settings: Settings,
     home: Home,
     folder: Folder,
+    repeat: Repeat,
+    'clipboard-check': ClipboardCheck,
+    'sliders-horizontal': SlidersHorizontal,
+    'alert-triangle': AlertTriangle,
+    'barcode': Barcode,
+    'folder-tree': FolderTree,
+    'building-2': Building2,
+    'warehouse': Warehouse,
+    'briefcase-business': BriefcaseBusiness,
+    handshake: Handshake,
+    'user-round-check': UserRoundCheck,
+    'calendar-check': CalendarCheck,
+    'key-round': KeyRound,
+    'map-pinned': MapPinned,
   };
 
-  function getIcon(name?: string | any): typeof LayoutDashboard {
+  function getIcon(name?: string | typeof LayoutDashboard): typeof LayoutDashboard {
     if (!name) return depth === 0 ? Settings : Folder;
     if (typeof name !== 'string') return name; // if it's already a component
     return iconMap[name] ?? Settings;
@@ -69,11 +85,13 @@
   <!-- Parent node with children: render as collapsible group -->
   <Collapsible.Root bind:open={isOpen}>
     <Collapsible.Trigger
-      class="flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200
+      class="flex w-full items-center justify-between rounded-xl px-3 py-2 text-sm font-medium transition-all duration-200
       {childActive
-        ? 'text-sidebar-foreground bg-sidebar-accent/30'
-        : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
+        ? 'bg-primary/10 text-primary ring-1 ring-primary/15'
+        : 'text-sidebar-foreground/68 hover:bg-sidebar-accent/65 hover:text-sidebar-foreground'}"
       style="padding-left: {12 + depth * 12}px"
+      data-sidebar={depth === 0 ? "menu-button" : "menu-sub-button"}
+      data-active={childActive ? "true" : "false"}
     >
       <span class="flex items-center gap-3">
         <Icon class="h-4 w-4 flex-shrink-0" />
@@ -82,7 +100,7 @@
       <ChevronDown class="h-3.5 w-3.5 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
     </Collapsible.Trigger>
     <Collapsible.Content>
-      <div class="mt-0.5 space-y-0.5" style="padding-left: {depth > 0 ? 0 : 0}px">
+      <div class="mt-0.5 space-y-0.5" style="padding-left: {depth > 0 ? 0 : 0}px" data-sidebar="menu-sub">
         {#each item.children as child, _i (_i)}
           <SidebarItem item={child} {currentPath} {collapsed} depth={depth + 1} />
         {/each}
@@ -99,10 +117,12 @@
           href={finalHref}
           target={isExternal ? '_blank' : undefined}
           rel={isExternal ? 'noopener noreferrer' : undefined}
-          class="flex items-center justify-center rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200
+          class="flex items-center justify-center rounded-xl px-3 py-2.5 text-sm font-medium transition-all duration-200
           {active
-            ? 'bg-card text-sidebar-primary shadow-sm ring-1 ring-foreground/5'
-            : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
+            ? 'bg-primary/10 text-primary shadow-sm shadow-primary/10 ring-1 ring-primary/15'
+            : 'text-sidebar-foreground/68 hover:bg-sidebar-accent/65 hover:text-sidebar-foreground'}"
+          data-sidebar={depth === 0 ? "menu-button" : "menu-sub-button"}
+          data-active={active ? "true" : "false"}
         >
           <Icon class="h-4 w-4 flex-shrink-0" />
         </a>
@@ -118,12 +138,17 @@
     href={finalHref}
     target={isExternal ? '_blank' : undefined}
     rel={isExternal ? 'noopener noreferrer' : undefined}
-    class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200
+    class="relative flex items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium transition-all duration-200
     {active
-      ? 'bg-card text-sidebar-primary shadow-sm ring-1 ring-foreground/5 font-semibold before:absolute before:left-0 before:top-2 before:bottom-2 before:w-[3px] before:bg-primary before:rounded-r-md overflow-hidden relative'
-      : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
+      ? 'bg-primary/10 text-primary font-semibold shadow-sm shadow-primary/10 ring-1 ring-primary/15'
+      : 'text-sidebar-foreground/68 hover:bg-sidebar-accent/65 hover:text-sidebar-foreground'}"
     style="padding-left: {12 + depth * 12}px"
+    data-sidebar={depth === 0 ? "menu-button" : "menu-sub-button"}
+    data-active={active ? "true" : "false"}
   >
+    {#if active && !collapsed}
+      <div class="absolute left-0 top-1/2 -translate-y-1/2 h-5 w-1 rounded-r-full bg-primary"></div>
+    {/if}
     <Icon class="h-4 w-4 flex-shrink-0" />
     <span class="flex-1">{label}</span>
     {#if isExternal}

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/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;