@svadmin/ui 0.42.3 → 0.43.0

package/dist/components/account/SettingsPlainPage.svelte

@@ -1,187 +1,22 @@
 <script lang="ts">
   import { useTranslation } 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, Camera, Trash2 } from '@lucide/svelte';
-
+  import * as Card from '../ui/card/index.js';
+  import ContentPageShell from '../content/ContentPageShell.svelte';
+  import ContentPageHeader from '../content/ContentPageHeader.svelte';
   const i18n = useTranslation();
-
   let displayName = $state('Alex Chen');
   let email = $state('alex@example.com');
-  let phone = $state('+86 138 **** 9527');
-  let dateOfBirth = $state('1995-04-18');
-  let bio = $state('Full-stack developer focused on design systems and developer tooling.');
-  let country = $state('China');
-  let region = $state('Shanghai');
-  let city = $state('Shanghai');
-  let postcode = $state('200120');
-  let currentPassword = $state('');
-  let newPassword = $state('');
-  let confirmPassword = $state('');
-  let emailNotifications = $state(true);
-  let twoFactor = $state(false);
-  let confirmDelete = $state(false);
+  let notifications = $state(true);
+  let twoFactor = $state(true);
   let saving = $state(false);
-
-  async function handleSave() {
-    saving = true;
-    await new Promise((r) => setTimeout(r, 800));
-    saving = false;
-  }
+  async function save() { saving = true; await new Promise((resolve) => setTimeout(resolve, 400)); saving = false; }
 </script>
 
-<div class="space-y-6" data-svadmin-content-page="account">
-  <div class="flex items-start justify-between gap-4">
-    <div>
-      <h2 class="text-xl font-semibold text-foreground">{i18n.t('account.settingsPlain')}</h2>
-      <p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.settingsPlainDescription')}</p>
-    </div>
-    <Button onclick={handleSave} disabled={saving} size="sm">
-      {#if saving}<Loader2 class="h-4 w-4 animate-spin mr-2" />{/if}
-      {i18n.t('common.save')}
-    </Button>
-  </div>
-
-  <!-- General Settings -->
-  <Card.Card class="border-border/60">
-    <Card.CardHeader>
-      <Card.CardTitle class="text-base">{i18n.t('settings.general')}</Card.CardTitle>
-    </Card.CardHeader>
-    <Card.CardContent class="space-y-4">
-      <div class="flex items-center gap-4">
-        <div class="relative">
-          <div class="flex h-16 w-16 items-center justify-center rounded-full bg-primary/10 text-primary text-xl font-bold">AC</div>
-          <button class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm">
-            <Camera class="h-3 w-3" />
-          </button>
-        </div>
-        <div>
-          <p class="text-sm font-medium text-foreground">{i18n.t('account.photo')}</p>
-          <p class="text-xs text-muted-foreground">150x150px JPEG, PNG Image</p>
-        </div>
-      </div>
-
-      <Separator />
-
-      <div class="grid gap-4 sm:grid-cols-2">
-        <div class="space-y-2">
-          <Label for="display-name">{i18n.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 class="space-y-2">
-          <Label for="phone">{i18n.t('account.phone')}</Label>
-          <Input id="phone" bind:value={phone} />
-        </div>
-        <div class="space-y-2">
-          <Label for="dob">{i18n.t('account.dateOfBirth')}</Label>
-          <Input id="dob" bind:value={dateOfBirth} type="date" />
-        </div>
-      </div>
-
-      <div class="space-y-2">
-        <Label for="bio">{i18n.t('account.bio')}</Label>
-        <textarea
-          id="bio"
-          bind:value={bio}
-          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>
-
-      <Separator />
-
-      <div class="flex items-center justify-between gap-4">
-        <div class="space-y-1">
-          <Label for="email-notif">{i18n.t('notifications.emailTitle')}</Label>
-          <p class="text-xs text-muted-foreground">{i18n.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="two-factor">{i18n.t('account.twoFactorAuth')}</Label>
-          <p class="text-xs text-muted-foreground">{i18n.t('security.twoFactorDescription')}</p>
-        </div>
-        <Switch id="two-factor" bind:checked={twoFactor} />
-      </div>
-    </Card.CardContent>
-  </Card.Card>
-
-  <!-- Address -->
-  <Card.Card class="border-border/60">
-    <Card.CardHeader>
-      <Card.CardTitle class="text-base">{i18n.t('account.address')}</Card.CardTitle>
-    </Card.CardHeader>
-    <Card.CardContent>
-      <div class="grid gap-4 sm:grid-cols-2">
-        <div class="space-y-2">
-          <Label for="country">{i18n.t('account.country')}</Label>
-          <Input id="country" bind:value={country} />
-        </div>
-        <div class="space-y-2">
-          <Label for="state">{i18n.t('account.state')}</Label>
-          <Input id="state" bind:value={region} />
-        </div>
-        <div class="space-y-2">
-          <Label for="city">{i18n.t('account.city')}</Label>
-          <Input id="city" bind:value={city} />
-        </div>
-        <div class="space-y-2">
-          <Label for="postcode">{i18n.t('account.postcode')}</Label>
-          <Input id="postcode" bind:value={postcode} />
-        </div>
-      </div>
-    </Card.CardContent>
-  </Card.Card>
-
-  <!-- Password -->
-  <Card.Card class="border-border/60">
-    <Card.CardHeader>
-      <Card.CardTitle class="text-base">{i18n.t('account.password')}</Card.CardTitle>
-    </Card.CardHeader>
-    <Card.CardContent>
-      <div class="grid gap-4 sm:grid-cols-3">
-        <div class="space-y-2">
-          <Label for="current-password">{i18n.t('profile.currentPassword')}</Label>
-          <Input id="current-password" bind:value={currentPassword} type="password" />
-        </div>
-        <div class="space-y-2">
-          <Label for="new-password">{i18n.t('profile.newPassword')}</Label>
-          <Input id="new-password" bind:value={newPassword} type="password" />
-        </div>
-        <div class="space-y-2">
-          <Label for="confirm-password">{i18n.t('auth.confirmPassword')}</Label>
-          <Input id="confirm-password" bind:value={confirmPassword} type="password" />
-        </div>
-      </div>
-    </Card.CardContent>
-  </Card.Card>
-
-  <!-- Delete Account -->
-  <Card.Card class="border-destructive/30">
-    <Card.CardHeader>
-      <Card.CardTitle class="text-base text-destructive">{i18n.t('account.deleteAccount')}</Card.CardTitle>
-      <Card.CardDescription>{i18n.t('account.deleteAccountDescription')}</Card.CardDescription>
-    </Card.CardHeader>
-    <Card.CardContent class="space-y-4">
-      <div class="flex items-center justify-between gap-4">
-        <Label for="confirm-delete" class="text-sm font-normal">{i18n.t('account.confirmDeleteAccount')}</Label>
-        <Switch id="confirm-delete" bind:checked={confirmDelete} />
-      </div>
-      <div class="flex justify-end">
-        <Button variant="destructive" size="sm" disabled={!confirmDelete}>
-          <Trash2 class="h-4 w-4 mr-1" />{i18n.t('account.deleteAccount')}
-        </Button>
-      </div>
-    </Card.CardContent>
-  </Card.Card>
-</div>
+<ContentPageShell pageId="account-settings-plain" width="narrow">
+  <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"><ContentPageHeader title={i18n.t('account.settingsPlain')} description={i18n.t('account.settingsPlainDescription')} /><Button size="sm" onclick={save} disabled={saving}>{i18n.t('common.save')}</Button></div>
+  <Card.Card><Card.CardContent class="space-y-5 p-5"><div class="space-y-2"><Label for="settings-name">{i18n.t('profile.name')}</Label><Input id="settings-name" bind:value={displayName} /></div><div class="space-y-2"><Label for="settings-email">Email</Label><Input id="settings-email" bind:value={email} type="email" /></div><div class="flex items-center justify-between gap-4 border-t border-border pt-4"><div><p class="text-sm font-medium text-foreground">{i18n.t('settings.notifications')}</p><p class="mt-1 text-sm text-muted-foreground">Receive account and workflow updates.</p></div><Switch bind:checked={notifications} /></div><div class="flex items-center justify-between gap-4 border-t border-border pt-4"><div><p class="text-sm font-medium text-foreground">{i18n.t('account.twoFactorAuth')}</p><p class="mt-1 text-sm text-muted-foreground">Require an additional verification code when signing in.</p></div><Switch bind:checked={twoFactor} /></div></Card.CardContent></Card.Card>
+</ContentPageShell>

package/dist/components/account/SettingsSidebarPage.svelte

@@ -1,312 +1,19 @@
 <script lang="ts">
   import { useTranslation } 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 { 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, Camera, Key, Copy, Check } from '@lucide/svelte';
-
+  import * as Card from '../ui/card/index.js';
+  import ContentPageShell from '../content/ContentPageShell.svelte';
+  import ContentPageHeader from '../content/ContentPageHeader.svelte';
   const i18n = useTranslation();
-
-  const navItems = [
-    { id: 'basic', label: 'account.basicSettings' },
-    { id: 'signin', label: 'account.socialSignIn' },
-    { id: 'password', label: 'account.password' },
-    { id: 'sso', label: 'account.singleSignOn' },
-    { id: 'preferences', label: 'account.preferences' },
-    { id: 'address', label: 'account.address' },
-    { id: 'api', label: 'account.manageApi' },
-    { id: 'delete', label: 'account.deleteAccount' },
-  ];
-
-  let activeSection = $state('basic');
-
-  function scrollTo(id: string) {
-    activeSection = id;
-    if (typeof document !== 'undefined') {
-      document.getElementById(`settings-section-${id}`)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
-    }
-  }
-
-  let displayName = $state('Alex Chen');
-  let company = $state('Nebula Labs');
-  let phone = $state('+86 138 **** 9527');
-  let email = $state('alex@example.com');
-  let availableToHire = $state(true);
-  let profileVisible = $state(true);
-  let socialGithub = $state(true);
-  let socialGoogle = $state(false);
-  let twoFactor = $state(true);
-  let language = $state('en');
-  let timezone = $state('Asia/Shanghai');
-  let currency = $state('CNY');
-  let apiKey = $state('sv_demo_pub_9f3e••••41ab');
-  let copied = $state(false);
-  let saving = $state(false);
-
-  async function handleSave() {
-    saving = true;
-    await new Promise((r) => setTimeout(r, 800));
-    saving = false;
-  }
-
-  async function copyApiKey() {
-    try {
-      await navigator.clipboard.writeText(apiKey);
-      copied = true;
-      setTimeout(() => (copied = false), 2000);
-    } catch {
-      copied = false;
-    }
-  }
+  const sections = [{ id: 'profile', title: i18n.t('account.basicSettings') }, { id: 'signin', title: i18n.t('account.socialSignIn') }, { id: 'preferences', title: i18n.t('account.preferences') }, { id: 'api', title: i18n.t('account.manageApi') }];
+  let active = $state('profile');
+  let visible = $state(true);
+  let available = $state(true);
 </script>
 
-<div class="space-y-6" data-svadmin-content-page="account">
-  <div class="flex items-start justify-between gap-4">
-    <div>
-      <h2 class="text-xl font-semibold text-foreground">{i18n.t('account.settingsSidebar')}</h2>
-      <p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.settingsSidebarDescription')}</p>
-    </div>
-    <Button onclick={handleSave} disabled={saving} size="sm">
-      {#if saving}<Loader2 class="h-4 w-4 animate-spin mr-2" />{/if}
-      {i18n.t('common.save')}
-    </Button>
-  </div>
-
-  <div class="flex flex-col gap-6 lg:flex-row">
-    <!-- Anchor nav -->
-    <nav class="w-full shrink-0 lg:w-52">
-      <div class="flex gap-1 overflow-x-auto lg:sticky lg:top-6 lg:flex-col">
-        {#each navItems as item (item.id)}
-          <button
-            class="whitespace-nowrap rounded-lg px-3 py-2 text-left text-sm transition-colors
-              {activeSection === item.id ? 'bg-primary/10 font-medium text-primary' : 'text-muted-foreground hover:bg-accent hover:text-foreground'}"
-            onclick={() => scrollTo(item.id)}
-          >
-            {i18n.t(item.label)}
-          </button>
-        {/each}
-      </div>
-    </nav>
-
-    <div class="min-w-0 flex-1 space-y-6">
-      <!-- Basic Settings -->
-      <Card.Card class="border-border/60 scroll-mt-6" id="settings-section-basic">
-        <Card.CardHeader>
-          <Card.CardTitle class="text-base">{i18n.t('account.basicSettings')}</Card.CardTitle>
-        </Card.CardHeader>
-        <Card.CardContent class="space-y-4">
-          <div class="flex items-center gap-4">
-            <div class="relative">
-              <div class="flex h-16 w-16 items-center justify-center rounded-full bg-primary/10 text-primary text-xl font-bold">AC</div>
-              <button class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm">
-                <Camera class="h-3 w-3" />
-              </button>
-            </div>
-            <div>
-              <p class="text-sm font-medium text-foreground">{i18n.t('account.photo')}</p>
-              <p class="text-xs text-muted-foreground">150x150px JPEG, PNG Image</p>
-            </div>
-          </div>
-          <Separator />
-          <div class="grid gap-4 sm:grid-cols-2">
-            <div class="space-y-2">
-              <Label for="sb-name">{i18n.t('profile.name')}</Label>
-              <Input id="sb-name" bind:value={displayName} />
-            </div>
-            <div class="space-y-2">
-              <Label for="sb-company">{i18n.t('profile.company')}</Label>
-              <Input id="sb-company" bind:value={company} />
-            </div>
-            <div class="space-y-2">
-              <Label for="sb-phone">{i18n.t('account.phone')}</Label>
-              <Input id="sb-phone" bind:value={phone} />
-            </div>
-            <div class="space-y-2">
-              <Label for="sb-email">Email</Label>
-              <Input id="sb-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="sb-visibility">{i18n.t('account.visibility')}</Label>
-              <p class="text-xs text-muted-foreground">{i18n.t('account.publicProfileCard')}</p>
-            </div>
-            <Switch id="sb-visibility" bind:checked={profileVisible} />
-          </div>
-          <div class="flex items-center justify-between gap-4">
-            <div class="space-y-1">
-              <Label for="sb-availability">{i18n.t('account.availability')}</Label>
-              <p class="text-xs text-muted-foreground">{i18n.t('account.availableToHire')}</p>
-            </div>
-            <Switch id="sb-availability" bind:checked={availableToHire} />
-          </div>
-        </Card.CardContent>
-      </Card.Card>
-
-      <!-- Social Sign in + 2FA -->
-      <Card.Card class="border-border/60 scroll-mt-6" id="settings-section-signin">
-        <Card.CardHeader>
-          <Card.CardTitle class="text-base">{i18n.t('account.socialSignIn')}</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="sb-github">Source Control</Label>
-              <p class="text-xs text-muted-foreground">alexchen</p>
-            </div>
-            <Switch id="sb-github" bind:checked={socialGithub} />
-          </div>
-          <div class="flex items-center justify-between gap-4">
-            <div class="space-y-1">
-              <Label for="sb-google">Identity Cloud</Label>
-              <p class="text-xs text-muted-foreground">alex@example.com</p>
-            </div>
-            <Switch id="sb-google" bind:checked={socialGoogle} />
-          </div>
-          <Separator />
-          <div class="flex items-center justify-between gap-4">
-            <div class="space-y-1">
-              <Label for="sb-2fa">{i18n.t('account.twoFactorAuth')}</Label>
-              <p class="text-xs text-muted-foreground">{i18n.t('security.twoFactorDescription')}</p>
-            </div>
-            <div class="flex items-center gap-2">
-              <Badge variant="secondary" class="text-[10px]">{twoFactor ? i18n.t('security.twoFactorActive') : i18n.t('security.twoFactorInactive')}</Badge>
-              <Switch id="sb-2fa" bind:checked={twoFactor} />
-            </div>
-          </div>
-        </Card.CardContent>
-      </Card.Card>
-
-      <!-- Password -->
-      <Card.Card class="border-border/60 scroll-mt-6" id="settings-section-password">
-        <Card.CardHeader>
-          <Card.CardTitle class="text-base">{i18n.t('account.password')}</Card.CardTitle>
-        </Card.CardHeader>
-        <Card.CardContent>
-          <div class="grid gap-4 sm:grid-cols-3">
-            <div class="space-y-2">
-              <Label for="sb-current-pw">{i18n.t('profile.currentPassword')}</Label>
-              <Input id="sb-current-pw" type="password" />
-            </div>
-            <div class="space-y-2">
-              <Label for="sb-new-pw">{i18n.t('profile.newPassword')}</Label>
-              <Input id="sb-new-pw" type="password" />
-            </div>
-            <div class="space-y-2">
-              <Label for="sb-confirm-pw">{i18n.t('auth.confirmPassword')}</Label>
-              <Input id="sb-confirm-pw" type="password" />
-            </div>
-          </div>
-        </Card.CardContent>
-      </Card.Card>
-
-      <!-- SSO -->
-      <Card.Card class="border-border/60 scroll-mt-6" id="settings-section-sso">
-        <Card.CardHeader>
-          <Card.CardTitle class="text-base">{i18n.t('account.singleSignOn')}</Card.CardTitle>
-        </Card.CardHeader>
-        <Card.CardContent>
-          <div class="grid gap-4 sm:grid-cols-2">
-            <div class="space-y-2">
-              <Label for="sb-client-id">Client ID</Label>
-              <Input id="sb-client-id" placeholder="xxxxxxxx-xxxx-xxxx" />
-            </div>
-            <div class="space-y-2">
-              <Label for="sb-client-secret">Client Secret</Label>
-              <Input id="sb-client-secret" type="password" placeholder="••••••••" />
-            </div>
-          </div>
-        </Card.CardContent>
-      </Card.Card>
-
-      <!-- Preferences -->
-      <Card.Card class="border-border/60 scroll-mt-6" id="settings-section-preferences">
-        <Card.CardHeader>
-          <Card.CardTitle class="text-base">{i18n.t('account.preferences')}</Card.CardTitle>
-        </Card.CardHeader>
-        <Card.CardContent>
-          <div class="grid gap-4 sm:grid-cols-3">
-            <div class="space-y-2">
-              <Label for="sb-language">{i18n.t('account.language')}</Label>
-              <select id="sb-language" bind:value={language} class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring">
-                <option value="en">English</option>
-                <option value="zh-CN">中文（简体）</option>
-              </select>
-            </div>
-            <div class="space-y-2">
-              <Label for="sb-timezone">{i18n.t('account.timezone')}</Label>
-              <select id="sb-timezone" bind:value={timezone} class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring">
-                <option value="Asia/Shanghai">Asia/Shanghai (GMT+8)</option>
-                <option value="America/Los_Angeles">America/Los_Angeles (GMT-7)</option>
-                <option value="Europe/Berlin">Europe/Berlin (GMT+2)</option>
-              </select>
-            </div>
-            <div class="space-y-2">
-              <Label for="sb-currency">{i18n.t('account.currency')}</Label>
-              <select id="sb-currency" bind:value={currency} class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring">
-                <option value="CNY">CNY (¥)</option>
-                <option value="USD">USD ($)</option>
-                <option value="EUR">EUR (€)</option>
-              </select>
-            </div>
-          </div>
-        </Card.CardContent>
-      </Card.Card>
-
-      <!-- Address -->
-      <Card.Card class="border-border/60 scroll-mt-6" id="settings-section-address">
-        <Card.CardHeader>
-          <Card.CardTitle class="text-base">{i18n.t('account.address')}</Card.CardTitle>
-        </Card.CardHeader>
-        <Card.CardContent>
-          <div class="grid gap-4 sm:grid-cols-2">
-            <div class="space-y-2">
-              <Label for="sb-country">{i18n.t('account.country')}</Label>
-              <Input id="sb-country" value="China" />
-            </div>
-            <div class="space-y-2">
-              <Label for="sb-city">{i18n.t('account.city')}</Label>
-              <Input id="sb-city" value="Shanghai" />
-            </div>
-          </div>
-        </Card.CardContent>
-      </Card.Card>
-
-      <!-- Manage API -->
-      <Card.Card class="border-border/60 scroll-mt-6" id="settings-section-api">
-        <Card.CardHeader>
-          <Card.CardTitle class="flex items-center gap-2 text-base">
-            <Key class="h-4 w-4 text-muted-foreground" />{i18n.t('account.manageApi')}
-          </Card.CardTitle>
-        </Card.CardHeader>
-        <Card.CardContent>
-          <div class="flex items-center gap-2">
-            <Input readonly value={apiKey} class="h-9 font-mono text-xs" />
-            <Button size="sm" variant="outline" onclick={copyApiKey}>
-              {#if copied}<Check class="h-4 w-4 text-green-500" />{:else}<Copy class="h-4 w-4" />{/if}
-            </Button>
-            <Button size="sm" variant="ghost">{i18n.t('api.regenerate')}</Button>
-          </div>
-        </Card.CardContent>
-      </Card.Card>
-
-      <!-- Delete Account -->
-      <Card.Card class="border-destructive/30 scroll-mt-6" id="settings-section-delete">
-        <Card.CardHeader>
-          <Card.CardTitle class="text-base text-destructive">{i18n.t('account.deleteAccount')}</Card.CardTitle>
-          <Card.CardDescription>{i18n.t('account.deleteAccountDescription')}</Card.CardDescription>
-        </Card.CardHeader>
-        <Card.CardContent>
-          <div class="flex justify-end">
-            <Button variant="destructive" size="sm">{i18n.t('account.deleteAccount')}</Button>
-          </div>
-        </Card.CardContent>
-      </Card.Card>
-    </div>
-  </div>
-</div>
+<ContentPageShell pageId="account-settings-sidebar" width="wide">
+  <ContentPageHeader title={i18n.t('account.settingsSidebar')} description={i18n.t('account.settingsSidebarDescription')} />
+  <div class="grid gap-6 lg:grid-cols-[12rem_minmax(0,1fr)]"><nav class="flex gap-1 overflow-x-auto lg:flex-col">{#each sections as section (section.id)}<button type="button" class={'whitespace-nowrap rounded-md px-3 py-2 text-left text-sm ' + (active === section.id ? 'bg-muted font-medium text-foreground' : 'text-muted-foreground hover:text-foreground')} onclick={() => active = section.id}>{section.title}</button>{/each}</nav><div class="space-y-4">{#if active === 'profile'}<Card.Card><Card.CardContent class="space-y-4 p-5"><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.basicSettings')}</h2><Input value="Alex Chen" aria-label={i18n.t('profile.name')} /><Input value="Nebula Labs" aria-label="Company" /><div class="flex items-center justify-between border-t border-border pt-4"><span class="text-sm text-foreground">{i18n.t('account.visibility')}</span><Switch bind:checked={visible} /></div><div class="flex items-center justify-between"><span class="text-sm text-foreground">{i18n.t('account.availability')}</span><Switch bind:checked={available} /></div></Card.CardContent></Card.Card>{:else if active === 'signin'}<Card.Card><Card.CardContent class="space-y-4 p-5"><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.socialSignIn')}</h2><p class="text-sm text-muted-foreground">Connect the providers your team trusts for sign in.</p><Button variant="outline">GitHub</Button><Button variant="outline">Google</Button></Card.CardContent></Card.Card>{:else if active === 'preferences'}<Card.Card><Card.CardContent class="space-y-4 p-5"><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.preferences')}</h2><Input value="English" aria-label={i18n.t('account.language')} /><Input value="Asia/Shanghai" aria-label={i18n.t('account.timezone')} /><Input value="CNY" aria-label={i18n.t('account.currency')} /></Card.CardContent></Card.Card>{:else}<Card.Card><Card.CardContent class="space-y-4 p-5"><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.manageApi')}</h2><Input readonly value="sv_demo_pub_9f3e********41ab" aria-label="API key" /><Button variant="outline">{i18n.t('common.copy')}</Button></Card.CardContent></Card.Card>{/if}</div></div>
+</ContentPageShell>