@svadmin/ui 0.34.9 → 0.35.0

package/dist/components/account/ImportMembersPage.svelte

@@ -0,0 +1,143 @@
+<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 { Upload, Download, FileText, CheckCircle2, Loader2 } from '@lucide/svelte';
+
+  let isDragging = $state(false);
+  let fileName = $state('');
+  let importState = $state<'idle' | 'uploading' | 'processing' | 'complete' | 'error'>('idle');
+  let progress = $state(0);
+  let importCount = $state(0);
+
+  function handleDragOver(e: DragEvent) {
+    e.preventDefault();
+    isDragging = true;
+  }
+
+  function handleDragLeave() {
+    isDragging = false;
+  }
+
+  function handleDrop(e: DragEvent) {
+    e.preventDefault();
+    isDragging = false;
+    const file = e.dataTransfer?.files?.[0];
+    if (file) processFile(file);
+  }
+
+  function handleFileSelect(e: Event) {
+    const file = (e.target as HTMLInputElement).files?.[0];
+    if (file) processFile(file);
+  }
+
+  function processFile(file: File) {
+    fileName = file.name;
+    importState = 'uploading';
+    progress = 0;
+
+    // Simulate upload
+    const interval = setInterval(() => {
+      progress += 10;
+      if (progress >= 100) {
+        clearInterval(interval);
+        importState = 'processing';
+        // Simulate processing
+        setTimeout(() => {
+          importCount = Math.floor(Math.random() * 50) + 20;
+          importState = 'complete';
+        }, 1500);
+      }
+    }, 200);
+  }
+
+  function resetImport() {
+    fileName = '';
+    importState = 'idle';
+    progress = 0;
+    importCount = 0;
+  }
+</script>
+
+<div class="space-y-6">
+  <div>
+    <h2 class="text-xl font-semibold text-foreground">{t('account.importMembers')}</h2>
+    <p class="mt-1 text-sm text-muted-foreground">{t('account.importMembersDescription')}</p>
+  </div>
+
+  {#if importState === 'complete'}
+    <Card.Card class="border-success/30 bg-success/5">
+      <Card.CardContent class="flex flex-col items-center gap-4 p-8">
+        <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-success/10 text-success">
+          <CheckCircle2 class="h-7 w-7" />
+        </div>
+        <div class="text-center">
+          <h3 class="text-lg font-semibold text-success">{t('account.importComplete')}</h3>
+          <p class="text-sm text-success/70 mt-1">{t('account.imported', { count: importCount })}</p>
+        </div>
+        <Button variant="outline" onclick={resetImport}>{t('common.back')}</Button>
+      </Card.CardContent>
+    </Card.Card>
+  {:else}
+    <!-- Upload area -->
+    <Card.Card class="border-border/60">
+      <Card.CardContent class="p-6">
+        <label
+          for="file-input"
+          class="block cursor-pointer rounded-xl border-2 border-dashed p-8 text-center transition-colors
+            {isDragging ? 'border-primary bg-primary/5' : 'border-border/60 hover:border-primary/40'}"
+          ondragover={handleDragOver}
+          ondragleave={handleDragLeave}
+          ondrop={handleDrop}
+        >
+          {#if importState === 'idle'}
+            <Upload class="mx-auto h-10 w-10 text-muted-foreground" />
+            <p class="mt-3 text-sm font-medium text-foreground">{t('account.dragOrClick')}</p>
+            <p class="mt-1 text-xs text-muted-foreground">{t('account.supportedFormats')}</p>
+            <div class="mt-4">
+              <span class="inline-flex h-8 items-center justify-center rounded-md border border-input bg-background px-3 text-sm font-medium shadow-xs transition-colors hover:bg-accent hover:text-accent-foreground">
+                {t('common.upload')}
+              </span>
+              <input id="file-input" type="file" accept=".csv,.xlsx" class="sr-only" onchange={handleFileSelect} />
+            </div>
+          {:else if importState === 'uploading' || importState === 'processing'}
+            <div class="space-y-3">
+              <div class="flex items-center justify-center gap-2 text-sm">
+                {#if importState === 'processing'}
+                  <Loader2 class="h-4 w-4 animate-spin" />
+                {:else}
+                  <FileText class="h-4 w-4 text-muted-foreground" />
+                {/if}
+                <span class="font-medium">{fileName}</span>
+              </div>
+              <div class="h-2 w-48 mx-auto rounded-full bg-muted overflow-hidden">
+                <div class="h-full rounded-full bg-primary transition-all duration-300" style="width: {progress}%"></div>
+              </div>
+              <p class="text-xs text-muted-foreground">
+                {importState === 'uploading' ? t('account.importProgress') : t('account.startImport')}...
+              </p>
+            </div>
+          {/if}
+        </label>
+      </Card.CardContent>
+    </Card.Card>
+
+    <!-- Template download -->
+    <Card.Card class="border-border/60">
+      <Card.CardContent class="flex items-center justify-between p-4">
+        <div class="flex items-center gap-3">
+          <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
+            <FileText class="h-4 w-4" />
+          </div>
+          <div>
+            <p class="text-sm font-medium text-foreground">{t('account.downloadTemplate')}</p>
+            <p class="text-xs text-muted-foreground">CSV template.csv</p>
+          </div>
+        </div>
+        <Button variant="outline" size="sm">
+          <Download class="h-3.5 w-3.5 mr-1" />{t('account.downloadTemplate')}
+        </Button>
+      </Card.CardContent>
+    </Card.Card>
+  {/if}
+</div>

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

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

package/dist/components/account/MembersStarterPage.svelte

@@ -0,0 +1,104 @@
+<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 { Avatar } from '../ui/avatar/index.js';
+  import { Input } from '../ui/input/index.js';
+  import { Search, UserPlus, MoreHorizontal, Clock, CheckCircle2, XCircle } from '@lucide/svelte';
+
+  interface Member {
+    id: string;
+    name: string;
+    email: string;
+    role: string;
+    status: 'active' | 'invited' | 'inactive';
+    avatar?: string;
+    joinedAt: string;
+  }
+
+  let searchQuery = $state('');
+
+  let members = $state<Member[]>([
+    { id: '1', name: 'Alex Chen', email: 'alex@acme.com', role: 'Admin', status: 'active', joinedAt: '2023-01-15' },
+    { id: '2', name: 'Sarah Kim', email: 'sarah@acme.com', role: 'Editor', status: 'active', joinedAt: '2023-03-22' },
+    { id: '3', name: 'Mike Johnson', email: 'mike@acme.com', role: 'Viewer', status: 'invited', joinedAt: '2024-01-10' },
+    { id: '4', name: 'Lisa Wang', email: 'lisa@acme.com', role: 'Editor', status: 'active', joinedAt: '2023-06-05' },
+    { id: '5', name: 'Tom Brown', email: 'tom@acme.com', role: 'Viewer', status: 'inactive', joinedAt: '2022-11-20' },
+    { id: '6', name: 'Emma Davis', email: 'emma@acme.com', role: 'Admin', status: 'active', joinedAt: '2023-02-14' },
+  ]);
+
+  const filteredMembers = $derived(
+    searchQuery
+      ? members.filter(m => m.name.toLowerCase().includes(searchQuery.toLowerCase()) || m.email.toLowerCase().includes(searchQuery.toLowerCase()))
+      : members
+  );
+
+  const statusConfig = {
+    'active': { icon: CheckCircle2, color: 'text-green-500', label: t('account.active') },
+    'invited': { icon: Clock, color: 'text-amber-500', label: t('account.invited') },
+    'inactive': { icon: XCircle, color: 'text-muted-foreground', label: t('account.inactive') },
+  };
+
+  const initials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+</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.membersStarter')}</h2>
+      <p class="mt-1 text-sm text-muted-foreground">{t('account.membersStarterDescription')}</p>
+    </div>
+    <Button size="sm">
+      <UserPlus class="h-4 w-4 mr-1" />{t('account.inviteMember')}
+    </Button>
+  </div>
+
+  <!-- Search -->
+  <div class="relative">
+    <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+    <Input
+      placeholder={t('common.search')}
+      bind:value={searchQuery}
+      class="pl-9"
+    />
+  </div>
+
+  <!-- Members list -->
+  <Card.Card class="border-border/60">
+    <Card.CardContent class="p-0">
+      <div class="divide-y">
+        {#each filteredMembers as member (member.id)}
+          {@const sc = statusConfig[member.status]}
+          <div class="flex items-center gap-3 p-4 hover:bg-accent/30 transition-colors">
+            <div class="shrink-0">
+              {#if member.avatar}
+                <Avatar class="h-9 w-9"><img src={member.avatar} alt={member.name} /></Avatar>
+              {:else}
+                <div class="flex h-9 w-9 items-center justify-center rounded-full bg-primary/10 text-primary text-sm font-semibold">
+                  {initials(member.name)}
+                </div>
+              {/if}
+            </div>
+            <div class="flex-1 min-w-0">
+              <div class="flex items-center gap-2">
+                <span class="text-sm font-medium text-foreground truncate">{member.name}</span>
+                <Badge variant="outline" class="text-[10px] shrink-0">{member.role}</Badge>
+              </div>
+              <p class="text-xs text-muted-foreground truncate">{member.email}</p>
+            </div>
+            <div class="shrink-0 flex items-center gap-3">
+              <span class="flex items-center gap-1 text-xs {sc.color}">
+                <sc.icon class="h-3 w-3" />
+                {sc.label}
+              </span>
+              <Button variant="ghost" size="icon-sm">
+                <MoreHorizontal class="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        {/each}
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+</div>

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

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

package/dist/components/account/SecurityLogPage.svelte

@@ -0,0 +1,108 @@
+<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 { Search, Download } from '@lucide/svelte';
+
+  interface LogEntry {
+    id: string;
+    event: string;
+    eventLabel: string;
+    ip: string;
+    device: string;
+    location: string;
+    time: string;
+    severity: 'info' | 'warning' | 'critical';
+  }
+
+  let searchQuery = $state('');
+  let filterSeverity = $state<'all' | 'info' | 'warning' | 'critical'>('all');
+
+  const logs: LogEntry[] = [
+    { id: '1', event: 'loginSuccess', eventLabel: t('securityLog.loginSuccess'), ip: '192.168.1.102', device: 'Chrome / macOS', location: 'Shanghai, CN', time: '2 minutes ago', severity: 'info' },
+    { id: '2', event: 'apiKeyCreated', eventLabel: t('securityLog.apiKeyCreated'), ip: '192.168.1.102', device: 'Chrome / macOS', location: 'Shanghai, CN', time: '1 hour ago', severity: 'info' },
+    { id: '3', event: 'loginFailed', eventLabel: t('securityLog.loginFailed'), ip: '203.0.113.42', device: 'Firefox / Windows', location: 'Unknown', time: '3 hours ago', severity: 'warning' },
+    { id: '4', event: 'twoFactorEnabled', eventLabel: t('securityLog.twoFactorEnabled'), ip: '192.168.1.102', device: 'Chrome / macOS', location: 'Shanghai, CN', time: '1 day ago', severity: 'info' },
+    { id: '5', event: 'passwordChanged', eventLabel: t('securityLog.passwordChanged'), ip: '192.168.1.102', device: 'Chrome / macOS', location: 'Shanghai, CN', time: '2 days ago', severity: 'info' },
+    { id: '6', event: 'loginFailed', eventLabel: t('securityLog.loginFailed'), ip: '198.51.100.77', device: 'Safari / iOS', location: 'Beijing, CN', time: '3 days ago', severity: 'critical' },
+    { id: '7', event: 'sessionRevoked', eventLabel: t('securityLog.sessionRevoked'), ip: '192.168.1.105', device: 'Safari / iOS', location: 'Shanghai, CN', time: '5 days ago', severity: 'info' },
+    { id: '8', event: 'apiKeyRevoked', eventLabel: t('securityLog.apiKeyRevoked'), ip: '192.168.1.102', device: 'Chrome / macOS', location: 'Shanghai, CN', time: '1 week ago', severity: 'warning' },
+  ];
+
+  const filteredLogs = $derived(
+    logs.filter(l => {
+      if (filterSeverity !== 'all' && l.severity !== filterSeverity) return false;
+      if (searchQuery) {
+        const q = searchQuery.toLowerCase();
+        return l.eventLabel.toLowerCase().includes(q) || l.ip.includes(q) || l.device.toLowerCase().includes(q);
+      }
+      return true;
+    })
+  );
+
+</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.securityLog')}</h2>
+      <p class="mt-1 text-sm text-muted-foreground">{t('account.securityLogDescription')}</p>
+    </div>
+    <Button variant="outline" size="sm">
+      <Download class="h-3.5 w-3.5 mr-1" />{t('common.export')}
+    </Button>
+  </div>
+
+  <!-- Filters -->
+  <div class="flex flex-wrap gap-3">
+    <div class="relative flex-1 min-w-[200px]">
+      <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+      <Input placeholder={t('common.search')} bind:value={searchQuery} class="pl-9" />
+    </div>
+    <div class="flex rounded-lg border border-input overflow-hidden">
+      {#each ['all', 'info', 'warning', 'critical'] as sev (sev)}
+        <button
+          class="px-3 py-1.5 text-xs font-medium transition-colors capitalize
+            {filterSeverity === sev ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}"
+          onclick={() => filterSeverity = sev as typeof filterSeverity}
+        >{sev === 'all' ? t('common.filter') : sev}</button>
+      {/each}
+    </div>
+  </div>
+
+  <!-- Log table -->
+  <Card.Card class="border-border/60">
+    <Card.CardContent class="p-0">
+      <div class="overflow-x-auto">
+        <table class="w-full">
+          <thead>
+            <tr class="border-b bg-muted/30">
+              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{t('securityLog.event')}</th>
+              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{t('securityLog.ip')}</th>
+              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{t('securityLog.device')}</th>
+              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{t('securityLog.location')}</th>
+              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{t('securityLog.time')}</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y">
+            {#each filteredLogs as log (log.id)}
+              <tr class="hover:bg-accent/30 transition-colors">
+                <td class="px-4 py-3">
+                  <div class="flex items-center gap-2">
+                    <span class="inline-flex h-2 w-2 rounded-full {log.severity === 'critical' ? 'bg-red-500' : log.severity === 'warning' ? 'bg-amber-500' : 'bg-blue-500'}"></span>
+                    <span class="text-sm text-foreground">{log.eventLabel}</span>
+                  </div>
+                </td>
+                <td class="px-4 py-3 text-sm text-muted-foreground font-mono">{log.ip}</td>
+                <td class="px-4 py-3 text-sm text-muted-foreground">{log.device}</td>
+                <td class="px-4 py-3 text-sm text-muted-foreground">{log.location}</td>
+                <td class="px-4 py-3 text-sm text-muted-foreground whitespace-nowrap">{log.time}</td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+</div>

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

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

package/dist/components/account/SettingsEnterprisePage.svelte

@@ -0,0 +1,131 @@
+<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 { Switch } from '../ui/switch/index.js';
+  import { Badge } from '../ui/badge/index.js';
+  import { Loader2, Shield, Building2, Lock, Globe } from '@lucide/svelte';
+
+  let ssoEnabled = $state(false);
+  let ssoProvider = $state('');
+  let domainRestriction = $state('');
+  let passwordPolicy = $state('strong');
+  let sessionTimeout = $state('30');
+  let ipWhitelist = $state('');
+  let auditLogging = $state(true);
+  let dataRetention = $state('365');
+  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 class="flex items-start justify-between gap-4">
+    <div>
+      <h2 class="text-xl font-semibold text-foreground">{t('account.settingsEnterprise')}</h2>
+      <p class="mt-1 text-sm text-muted-foreground">{t('account.settingsEnterpriseDescription')}</p>
+    </div>
+    <Badge variant="secondary"><Building2 class="h-3 w-3 mr-1" />Enterprise</Badge>
+  </div>
+
+  <!-- SSO -->
+  <Card.Card class="border-border/60">
+    <Card.CardHeader>
+      <Card.CardTitle class="flex items-center gap-2 text-base">
+        <Shield class="h-4 w-4 text-muted-foreground" />
+        单点登录 (SSO)
+      </Card.CardTitle>
+      <Card.CardDescription>配置企业身份提供商以实现统一登录体验。</Card.CardDescription>
+    </Card.CardHeader>
+    <Card.CardContent class="space-y-4">
+      <div class="flex items-center justify-between gap-4">
+        <div class="space-y-1">
+          <Label for="sso-enabled">启用 SSO</Label>
+          <p class="text-xs text-muted-foreground">允许员工通过企业 IdP 登录</p>
+        </div>
+        <Switch id="sso-enabled" bind:checked={ssoEnabled} />
+      </div>
+      {#if ssoEnabled}
+        <div class="grid gap-4 sm:grid-cols-2">
+          <div class="space-y-2">
+            <Label for="sso-provider">SSO 提供商</Label>
+            <Input id="sso-provider" bind:value={ssoProvider} placeholder="Okta, Azure AD, etc." />
+          </div>
+          <div class="space-y-2">
+            <Label for="domain-restriction">域名限制</Label>
+            <Input id="domain-restriction" bind:value={domainRestriction} placeholder="@company.com" />
+          </div>
+        </div>
+      {/if}
+    </Card.CardContent>
+  </Card.Card>
+
+  <!-- Security Policy -->
+  <Card.Card class="border-border/60">
+    <Card.CardHeader>
+      <Card.CardTitle class="flex items-center gap-2 text-base">
+        <Lock class="h-4 w-4 text-muted-foreground" />
+        安全策略
+      </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="password-policy">密码策略</Label>
+          <select id="password-policy" bind:value={passwordPolicy} class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring">
+            <option value="basic">基本</option>
+            <option value="strong">强密码</option>
+            <option value="very-strong">非常强</option>
+          </select>
+        </div>
+        <div class="space-y-2">
+          <Label for="session-timeout">会话超时（分钟）</Label>
+          <Input id="session-timeout" bind:value={sessionTimeout} type="number" />
+        </div>
+      </div>
+
+      <div class="space-y-2">
+        <Label for="ip-whitelist">IP 白名单</Label>
+        <Input id="ip-whitelist" bind:value={ipWhitelist} placeholder="10.0.0.0/8, 192.168.1.0/24" />
+        <p class="text-xs text-muted-foreground">留空表示不限制 IP</p>
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+
+  <!-- Data & Compliance -->
+  <Card.Card class="border-border/60">
+    <Card.CardHeader>
+      <Card.CardTitle class="flex items-center gap-2 text-base">
+        <Globe class="h-4 w-4 text-muted-foreground" />
+        数据与合规
+      </Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent class="space-y-4">
+      <div class="flex items-center justify-between gap-4">
+        <div class="space-y-1">
+          <Label for="audit-logging">审计日志</Label>
+          <p class="text-xs text-muted-foreground">记录所有管理操作以备合规审查</p>
+        </div>
+        <Switch id="audit-logging" bind:checked={auditLogging} />
+      </div>
+
+      <div class="space-y-2">
+        <Label for="data-retention">数据保留天数</Label>
+        <Input id="data-retention" bind:value={dataRetention} type="number" />
+      </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/SettingsEnterprisePage.svelte.d.ts

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

package/dist/components/account/SettingsPlainPage.svelte

@@ -0,0 +1,81 @@
+<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 { Switch } from '../ui/switch/index.js';
+  import { Separator } from '../ui/separator/index.js';
+  import { Loader2 } from '@lucide/svelte';
+
+  let displayName = $state('Alex Chen');
+  let email = $state('alex@example.com');
+  let emailNotifications = $state(true);
+  let pushNotifications = $state(true);
+  let twoFactor = $state(false);
+  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.settingsPlain')}</h2>
+    <p class="mt-1 text-sm text-muted-foreground">{t('account.settingsPlainDescription')}</p>
+  </div>
+
+  <Card.Card class="border-border/60">
+    <Card.CardHeader>
+      <Card.CardTitle class="text-base">{t('settings.general')}</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="display-name">{t('profile.name')}</Label>
+          <Input id="display-name" bind:value={displayName} />
+        </div>
+        <div class="space-y-2">
+          <Label for="email">Email</Label>
+          <Input id="email" bind:value={email} type="email" />
+        </div>
+      </div>
+
+      <Separator />
+
+      <div class="flex items-center justify-between gap-4">
+        <div class="space-y-1">
+          <Label for="email-notif">{t('notifications.emailTitle')}</Label>
+          <p class="text-xs text-muted-foreground">{t('notifications.emailDescription')}</p>
+        </div>
+        <Switch id="email-notif" bind:checked={emailNotifications} />
+      </div>
+
+      <div class="flex items-center justify-between gap-4">
+        <div class="space-y-1">
+          <Label for="push-notif">{t('notifications.pushTitle')}</Label>
+          <p class="text-xs text-muted-foreground">{t('notifications.pushDescription')}</p>
+        </div>
+        <Switch id="push-notif" bind:checked={pushNotifications} />
+      </div>
+
+      <div class="flex items-center justify-between gap-4">
+        <div class="space-y-1">
+          <Label for="two-factor">{t('security.twoFactorAuth')}</Label>
+          <p class="text-xs text-muted-foreground">{t('security.twoFactorDescription')}</p>
+        </div>
+        <Switch id="two-factor" bind:checked={twoFactor} />
+      </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/SettingsPlainPage.svelte.d.ts

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