@svadmin/ui 0.44.0 → 0.46.0

package/dist/components/SecuritySettings.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
+  import { useNotification } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
 
-  import { AlertTriangle, CheckCircle2, KeyRound, Monitor, Shield, ShieldAlert, ShieldCheck, Smartphone, Trash2 } from '@lucide/svelte';
+  import { AlertTriangle, KeyRound, Monitor, Shield, ShieldAlert, ShieldCheck, Smartphone, Trash2 } from '@lucide/svelte';
   import type { Component } from 'svelte';
   import * as Alert from './ui/alert/index.js';
   import * as Card from './ui/card/index.js';
@@ -11,6 +12,7 @@
   import PasswordInput from './PasswordInput.svelte';
 
   const i18n = useTranslation();
+  const notification = useNotification();
 
   interface SessionInfo {
     id: string;
@@ -32,13 +34,11 @@
   let currentPassword = $state('');
   let newPassword = $state('');
   let confirmPassword = $state('');
-  let passwordSuccessMessage = $state('');
   let passwordErrorMessage = $state('');
   let lastChanged = $state('3 months ago');
 
   function handlePasswordChange(event: SubmitEvent) {
     event.preventDefault();
-    passwordSuccessMessage = '';
     passwordErrorMessage = '';
 
     if (!currentPassword) {
@@ -54,7 +54,7 @@
       return;
     }
 
-    passwordSuccessMessage = i18n.t('profile.passwordChanged');
+    notification.success(i18n.t('profile.passwordChanged'), 3000);
     lastChanged = 'Just now';
     currentPassword = '';
     newPassword = '';
@@ -111,12 +111,6 @@
     </Card.CardHeader>
     <Card.CardContent>
       <form onsubmit={handlePasswordChange} class="max-w-sm space-y-4">
-        {#if passwordSuccessMessage}
-          <Alert.Root class="border-success/30 bg-success/5 text-success">
-            <CheckCircle2 class="h-4 w-4" />
-            <Alert.Description>{passwordSuccessMessage}</Alert.Description>
-          </Alert.Root>
-        {/if}
         {#if passwordErrorMessage}
           <Alert.Root variant="destructive">
             <AlertTriangle class="h-4 w-4" />

package/dist/components/SvadminLogo.svelte

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

package/dist/components/Toast.svelte

@@ -20,11 +20,12 @@
     const queue = getToastQueue();
     if (queue.length > 0) {
       for (const t of queue) {
+        const options = { duration: t.duration, id: t.key ?? t.id };
         switch (t.type) {
-          case 'success': sonner.success(t.message, { duration: t.duration }); break;
-          case 'error': sonner.error(t.message, { duration: t.duration }); break;
-          case 'warning': sonner.warning(t.message, { duration: t.duration }); break;
-          case 'info': sonner.info(t.message, { duration: t.duration }); break;
+          case 'success': sonner.success(t.message, options); break;
+          case 'error': sonner.error(t.message, options); break;
+          case 'warning': sonner.warning(t.message, options); break;
+          case 'info': sonner.info(t.message, options); break;
         }
       }
       consumeToastQueue();
@@ -46,7 +47,8 @@
     position: "top-right",
     richColors: true,
     closeButton: true,
-    expand: true,
+    expand: false,
+    visibleToasts: 3,
     theme,
     toastOptions: {
       classes: {

package/dist/components/UpdatePasswordPage.svelte

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

package/dist/components/account/CompanyProfilePage.svelte

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

package/dist/components/account/SettingsEnterprisePage.svelte

@@ -4,9 +4,11 @@
   import { Input } from '../ui/input/index.js';
   import { Label } from '../ui/label/index.js';
   import { Switch } from '../ui/switch/index.js';
-  import * as Card from '../ui/card/index.js';
   import ContentPageShell from '../content/ContentPageShell.svelte';
   import ContentPageHeader from '../content/ContentPageHeader.svelte';
+  import SectionHeader from '../content/SectionHeader.svelte';
+  import SettingsGroup from '../content/SettingsGroup.svelte';
+  import SettingsFieldRow from '../content/SettingsFieldRow.svelte';
   import IntegrationCard from '../content/IntegrationCard.svelte';
   import type { IntegrationSummary } from '../content/IntegrationCard.svelte';
   import SecurityEventTable from '../content/SecurityEventTable.svelte';
@@ -18,9 +20,28 @@
   const events: SecurityEvent[] = [{ id: '1', event: 'SSO policy updated', actor: 'Alex Chen', location: 'Shanghai, CN', createdAt: 'Today, 09:12', severity: 'info' }, { id: '2', event: 'Audit log retention changed', actor: 'Alex Chen', location: 'Shanghai, CN', createdAt: 'Yesterday, 16:40', severity: 'warning' }];
 </script>
 
+{#snippet auditControl()}
+  <Switch bind:checked={auditLogging} aria-label={i18n.t('account.auditLogging')} />
+{/snippet}
+
+{#snippet ssoControl()}
+  <Switch bind:checked={ssoEnabled} aria-label={i18n.t('account.enableSso')} />
+{/snippet}
+
 <ContentPageShell pageId="account-settings-enterprise" width="wide">
   <ContentPageHeader title={i18n.t('account.settingsEnterprise')} description={i18n.t('account.settingsEnterpriseDescription')} />
-  <div class="grid gap-4 lg:grid-cols-2"><Card.Card><Card.CardContent class="space-y-4 p-5"><div><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.securityPolicy')}</h2><p class="mt-1 text-sm text-muted-foreground">Set organization-wide controls for authentication and sessions.</p></div><div class="space-y-2"><Label for="session-timeout">{i18n.t('account.sessionTimeout')}</Label><Input id="session-timeout" value="30" /></div><div class="space-y-2"><Label for="retention">{i18n.t('account.dataRetention')}</Label><Input id="retention" value="365" /></div><div class="flex items-center justify-between border-t border-border pt-4"><span class="text-sm text-foreground">{i18n.t('account.auditLogging')}</span><Switch bind:checked={auditLogging} /></div><Button size="sm">{i18n.t('common.save')}</Button></Card.CardContent></Card.Card><Card.Card><Card.CardContent class="space-y-4 p-5"><div><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.singleSignOn')}</h2><p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.ssoDescription')}</p></div><div class="flex items-center justify-between border-t border-border pt-4"><span class="text-sm text-foreground">{i18n.t('account.enableSso')}</span><Switch bind:checked={ssoEnabled} /></div><Input value="https://idp.example.com/metadata" aria-label={i18n.t('account.ssoProvider')} /><Button variant="outline" size="sm">{i18n.t('common.test')}</Button></Card.CardContent></Card.Card></div>
-  <section class="space-y-3"><h2 class="text-base font-semibold text-foreground">{i18n.t('account.connections')}</h2>{#each identity as integration (integration.id)}<IntegrationCard {integration} />{/each}</section>
-  <section class="space-y-3"><h2 class="text-base font-semibold text-foreground">{i18n.t('account.securityLog')}</h2><SecurityEventTable events={events} /></section>
+  <div class="grid gap-4 lg:grid-cols-2">
+    <SettingsGroup title={i18n.t('account.securityPolicy')} description="Set organization-wide controls for authentication and sessions." bodyClass="space-y-4">
+      <div class="grid gap-4 sm:grid-cols-2"><div class="space-y-2"><Label for="session-timeout">{i18n.t('account.sessionTimeout')}</Label><Input id="session-timeout" value="30" /></div><div class="space-y-2"><Label for="retention">{i18n.t('account.dataRetention')}</Label><Input id="retention" value="365" /></div></div>
+      <SettingsFieldRow label={i18n.t('account.auditLogging')} description="Preserve an auditable record of organization-level changes." control={auditControl} separated />
+      <Button size="sm">{i18n.t('common.save')}</Button>
+    </SettingsGroup>
+    <SettingsGroup title={i18n.t('account.singleSignOn')} description={i18n.t('account.ssoDescription')} bodyClass="space-y-4">
+      <SettingsFieldRow label={i18n.t('account.enableSso')} description="Require the configured identity provider for organization members." control={ssoControl} />
+      <Input value="https://idp.example.com/metadata" aria-label={i18n.t('account.ssoProvider')} />
+      <Button variant="outline" size="sm">{i18n.t('common.test')}</Button>
+    </SettingsGroup>
+  </div>
+  <section class="space-y-3"><SectionHeader title={i18n.t('account.connections')} />{#each identity as integration (integration.id)}<IntegrationCard {integration} />{/each}</section>
+  <section class="space-y-3"><SectionHeader title={i18n.t('account.securityLog')} /><SecurityEventTable events={events} emptyTitle={i18n.t('common.noData')} emptyDescription={i18n.t('empty.description')} /></section>
 </ContentPageShell>

package/dist/components/account/SettingsPlainPage.svelte

@@ -4,9 +4,10 @@
   import { Input } from '../ui/input/index.js';
   import { Label } from '../ui/label/index.js';
   import { Switch } from '../ui/switch/index.js';
-  import * as Card from '../ui/card/index.js';
   import ContentPageShell from '../content/ContentPageShell.svelte';
   import ContentPageHeader from '../content/ContentPageHeader.svelte';
+  import SettingsGroup from '../content/SettingsGroup.svelte';
+  import SettingsFieldRow from '../content/SettingsFieldRow.svelte';
   const i18n = useTranslation();
   let displayName = $state('Alex Chen');
   let email = $state('alex@example.com');
@@ -16,7 +17,28 @@
   async function save() { saving = true; await new Promise((resolve) => setTimeout(resolve, 400)); saving = false; }
 </script>
 
+{#snippet headerActions()}
+  <Button size="sm" onclick={save} disabled={saving}>{i18n.t('common.save')}</Button>
+{/snippet}
+
+{#snippet notificationControl()}
+  <Switch bind:checked={notifications} aria-label={i18n.t('settings.notifications')} />
+{/snippet}
+
+{#snippet twoFactorControl()}
+  <Switch bind:checked={twoFactor} aria-label={i18n.t('account.twoFactorAuth')} />
+{/snippet}
+
 <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>
+  <ContentPageHeader title={i18n.t('account.settingsPlain')} description={i18n.t('account.settingsPlainDescription')} actions={headerActions} />
+  <SettingsGroup title={i18n.t('account.basicSettings')} description={i18n.t('account.settingsPlainDescription')} bodyClass="space-y-5">
+    <div class="grid gap-4 sm:grid-cols-2">
+      <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>
+    <div>
+      <SettingsFieldRow label={i18n.t('settings.notifications')} description="Receive account and workflow updates." control={notificationControl} />
+      <SettingsFieldRow label={i18n.t('account.twoFactorAuth')} description="Require an additional verification code when signing in." control={twoFactorControl} separated />
+    </div>
+  </SettingsGroup>
 </ContentPageShell>

package/dist/components/account/SettingsSidebarPage.svelte

@@ -3,9 +3,10 @@
   import { Button } from '../ui/button/index.js';
   import { Input } from '../ui/input/index.js';
   import { Switch } from '../ui/switch/index.js';
-  import * as Card from '../ui/card/index.js';
   import ContentPageShell from '../content/ContentPageShell.svelte';
   import ContentPageHeader from '../content/ContentPageHeader.svelte';
+  import SettingsGroup from '../content/SettingsGroup.svelte';
+  import SettingsFieldRow from '../content/SettingsFieldRow.svelte';
   const i18n = useTranslation();
   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');
@@ -13,7 +14,35 @@
   let available = $state(true);
 </script>
 
+{#snippet visibilityControl()}
+  <Switch bind:checked={visible} aria-label={i18n.t('account.visibility')} />
+{/snippet}
+
+{#snippet availabilityControl()}
+  <Switch bind:checked={available} aria-label={i18n.t('account.availability')} />
+{/snippet}
+
 <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>
+  <div class="grid gap-6 lg:grid-cols-[12rem_minmax(0,1fr)]">
+    <nav class="flex gap-1 overflow-x-auto lg:flex-col" aria-label={i18n.t('account.settingsSidebar')}>
+      {#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:bg-muted/50 hover:text-foreground')} aria-current={active === section.id ? 'page' : undefined} onclick={() => active = section.id}>{section.title}</button>
+      {/each}
+    </nav>
+    <div class="min-w-0">
+      {#if active === 'profile'}
+        <SettingsGroup title={i18n.t('account.basicSettings')} description={i18n.t('account.settingsPlainDescription')} bodyClass="space-y-4">
+          <div class="grid gap-4 sm:grid-cols-2"><Input value="Alex Chen" aria-label={i18n.t('profile.name')} /><Input value="Nebula Labs" aria-label="Company" /></div>
+          <div><SettingsFieldRow label={i18n.t('account.visibility')} control={visibilityControl} separated /><SettingsFieldRow label={i18n.t('account.availability')} control={availabilityControl} separated /></div>
+        </SettingsGroup>
+      {:else if active === 'signin'}
+        <SettingsGroup title={i18n.t('account.socialSignIn')} description="Connect the providers your team trusts for sign in." bodyClass="flex flex-wrap gap-2"><Button variant="outline">GitHub</Button><Button variant="outline">Google</Button></SettingsGroup>
+      {:else if active === 'preferences'}
+        <SettingsGroup title={i18n.t('account.preferences')} bodyClass="grid gap-4 sm:grid-cols-3"><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')} /></SettingsGroup>
+      {:else}
+        <SettingsGroup title={i18n.t('account.manageApi')} description="Use scoped credentials and rotate them when access changes." bodyClass="flex flex-col gap-3 sm:flex-row"><Input readonly value="sv_demo_pub_9f3e********41ab" aria-label="API key" /><Button variant="outline">{i18n.t('common.copy')}</Button></SettingsGroup>
+      {/if}
+    </div>
+  </div>
 </ContentPageShell>

package/dist/components/content/ApiKeyList.svelte

@@ -1,13 +1,22 @@
 <script lang="ts">
   import { Copy, KeyRound, Trash2 } from '@lucide/svelte';
+  import { useTranslation } from '@svadmin/core/i18n';
   import { Button } from '../ui/button/index.js';
+  import DataState from './DataState.svelte';
+  import type { DataStateKind } from './DataState.svelte';
   export interface ApiKeySummary { id: string; name: string; prefix: string; createdAt?: string; lastUsedAt?: string; }
-  interface Props { keys?: ApiKeySummary[]; oncopy?: (key: ApiKeySummary) => void; onrevoke?: (key: ApiKeySummary) => void; class?: string; }
-  let { keys = [], oncopy, onrevoke, class: className = '' }: Props = $props();
+  interface Props { keys?: ApiKeySummary[]; state?: DataStateKind; stateTitle?: string; stateDescription?: string; retry?: () => void; retryLabel?: string; loadingLabel?: string; oncopy?: (key: ApiKeySummary) => void; onrevoke?: (key: ApiKeySummary) => void; class?: string; }
+  const i18n = useTranslation();
+  let { keys = [], state, stateTitle, stateDescription, retry, retryLabel, loadingLabel, oncopy, onrevoke, class: className = '' }: Props = $props();
+  const resolvedState = $derived(state ?? (keys.length === 0 ? 'empty' : undefined));
+  const isZh = $derived(i18n.locale === 'zh-CN');
 </script>
+{#if resolvedState}
+  <DataState state={resolvedState} title={stateTitle} description={stateDescription} {retry} {retryLabel} {loadingLabel} class={className} />
+{:else}
 <div class={'divide-y divide-border overflow-hidden rounded-lg border border-border bg-card ' + className}>
   {#each keys as apiKey (apiKey.id)}
-    <div class="flex flex-wrap items-center gap-3 px-4 py-3"><span class="flex size-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary"><KeyRound class="size-4" /></span><div class="min-w-0 flex-1"><p class="truncate text-sm font-medium text-foreground">{apiKey.name}</p><p class="font-mono text-xs text-muted-foreground">{apiKey.prefix}********</p></div><div class="text-right text-xs text-muted-foreground"><p>Created {apiKey.createdAt ?? 'Recently'}</p><p>Used {apiKey.lastUsedAt ?? 'Never'}</p></div><div class="flex items-center gap-1">{#if oncopy}<Button variant="ghost" size="icon-sm" aria-label={'Copy ' + apiKey.name} onclick={() => oncopy?.(apiKey)}><Copy class="size-4" /></Button>{/if}{#if onrevoke}<Button variant="ghost" size="icon-sm" aria-label={'Revoke ' + apiKey.name} onclick={() => onrevoke?.(apiKey)}><Trash2 class="size-4" /></Button>{/if}</div></div>
+    <div class="flex flex-wrap items-center gap-3 px-4 py-3"><span class="flex size-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary"><KeyRound class="size-4" /></span><div class="min-w-0 flex-1"><p class="truncate text-sm font-medium text-foreground">{apiKey.name}</p><p class="font-mono text-xs text-muted-foreground">{apiKey.prefix}********</p></div><div class="text-right text-xs text-muted-foreground"><p>{apiKey.createdAt ?? (isZh ? '最近创建' : 'Created recently')}</p><p>{apiKey.lastUsedAt ?? (isZh ? '从未使用' : 'Never used')}</p></div><div class="flex items-center gap-1">{#if oncopy}<Button variant="ghost" size="icon-sm" aria-label={i18n.t('common.copy') + ' ' + apiKey.name} onclick={() => oncopy?.(apiKey)}><Copy class="size-4" /></Button>{/if}{#if onrevoke}<Button variant="ghost" size="icon-sm" aria-label={i18n.t('common.delete') + ' ' + apiKey.name} onclick={() => onrevoke?.(apiKey)}><Trash2 class="size-4" /></Button>{/if}</div></div>
   {/each}
-  {#if keys.length === 0}<div class="p-6 text-center text-sm text-muted-foreground">No API keys</div>{/if}
 </div>
+{/if}

package/dist/components/content/ApiKeyList.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { DataStateKind } from './DataState.svelte';
 export interface ApiKeySummary {
     id: string;
     name: string;
@@ -7,6 +8,12 @@ export interface ApiKeySummary {
 }
 interface Props {
     keys?: ApiKeySummary[];
+    state?: DataStateKind;
+    stateTitle?: string;
+    stateDescription?: string;
+    retry?: () => void;
+    retryLabel?: string;
+    loadingLabel?: string;
     oncopy?: (key: ApiKeySummary) => void;
     onrevoke?: (key: ApiKeySummary) => void;
     class?: string;

package/dist/components/content/DataState.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { useTranslation } from '@svadmin/core/i18n';
   import { AlertTriangle, Inbox, LockKeyhole, RefreshCw } from '@lucide/svelte';
   import { Button } from '../ui/button/index.js';
   import * as Alert from '../ui/alert/index.js';
@@ -10,22 +11,37 @@
     title?: string;
     description?: string;
     retry?: () => void;
+    retryLabel?: string;
+    loadingLabel?: string;
     action?: Snippet;
     class?: string;
   }
-  let { state, title, description, retry, action, class: className = '' }: Props = $props();
-  const defaults = {
-    loading: ['Loading', 'Fetching the latest data.'],
-    empty: ['Nothing here yet', 'New records will appear here when they are available.'],
-    error: ['Unable to load data', 'Try again or check the connection before continuing.'],
-    forbidden: ['Access restricted', 'You do not have permission to view this content.'],
-  } as const;
+  const i18n = useTranslation();
+  let {
+    state,
+    title,
+    description,
+    retry,
+    retryLabel,
+    loadingLabel,
+    action,
+    class: className = '',
+  }: Props = $props();
+  const isZh = $derived(i18n.locale === 'zh-CN');
+  const defaults = $derived({
+    loading: [i18n.t('common.loading'), i18n.t('common.loading')],
+    empty: [i18n.t('empty.title'), i18n.t('empty.description')],
+    error: [i18n.t('common.error'), i18n.t('common.retry')],
+    forbidden: [isZh ? '无权访问' : 'Access restricted', isZh ? '你没有查看此内容的权限。' : 'You do not have permission to view this content.'],
+  } as const);
   const resolvedTitle = $derived(title ?? defaults[state][0]);
   const resolvedDescription = $derived(description ?? defaults[state][1]);
+  const resolvedRetryLabel = $derived(retryLabel ?? i18n.t('common.retry'));
+  const resolvedLoadingLabel = $derived(loadingLabel ?? i18n.t('common.loading'));
 </script>
 
 {#if state === 'loading'}
-  <div class={'space-y-3 rounded-lg border border-border bg-card p-5 ' + className} aria-busy="true">
+  <div class={'space-y-3 rounded-lg border border-border bg-card p-5 ' + className} role="status" aria-live="polite" aria-label={resolvedLoadingLabel} aria-busy="true">
     <Skeleton class="h-5 w-40" /><Skeleton class="h-4 w-full max-w-md" /><Skeleton class="h-20 w-full" />
   </div>
 {:else if state === 'error' || state === 'forbidden'}
@@ -33,7 +49,7 @@
     {#if state === 'error'}<AlertTriangle class="size-4" />{:else}<LockKeyhole class="size-4" />{/if}
     <Alert.Title>{resolvedTitle}</Alert.Title>
     <Alert.Description>{resolvedDescription}</Alert.Description>
-    {#if retry}<Button variant="outline" size="sm" class="mt-3" onclick={retry}><RefreshCw class="size-3.5" />Retry</Button>{/if}
+    {#if retry}<Button variant="outline" size="sm" class="mt-3" onclick={retry}><RefreshCw class="size-3.5" />{resolvedRetryLabel}</Button>{/if}
     {#if action}<div class="mt-3">{@render action()}</div>{/if}
   </Alert.Root>
 {:else}

package/dist/components/content/DataState.svelte.d.ts

@@ -5,6 +5,8 @@ interface Props {
     title?: string;
     description?: string;
     retry?: () => void;
+    retryLabel?: string;
+    loadingLabel?: string;
     action?: Snippet;
     class?: string;
 }

package/dist/components/content/FeedbackNotice.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { CircleAlert, Info, TriangleAlert } from '@lucide/svelte';
+  import { cn } from '../../utils.js';
+
+  export type FeedbackNoticeTone = 'info' | 'warning' | 'danger';
+  export type FeedbackNoticePriority = 'contextual' | 'blocking';
+
+  interface Props {
+    message: string;
+    tone?: FeedbackNoticeTone;
+    priority?: FeedbackNoticePriority;
+    action?: Snippet;
+    class?: string;
+  }
+
+  let {
+    message,
+    tone = 'info',
+    priority = 'contextual',
+    action,
+    class: className = '',
+  }: Props = $props();
+
+  const isBlocking = $derived(priority === 'blocking' || tone === 'danger');
+  const toneClass = $derived(
+    tone === 'danger'
+      ? 'border-destructive/40 bg-destructive/5 text-destructive'
+      : tone === 'warning'
+        ? 'border-warning/50 bg-warning/10 text-warning-foreground'
+        : 'border-border bg-muted/40 text-foreground',
+  );
+</script>
+
+<div
+  data-svadmin-feedback-notice
+  data-tone={tone}
+  data-priority={priority}
+  role={isBlocking ? 'alert' : 'status'}
+  aria-live={isBlocking ? 'assertive' : 'polite'}
+  class={cn(
+    'flex w-full flex-col gap-3 rounded-md border px-3 py-2.5 text-sm sm:flex-row sm:items-center',
+    isBlocking && 'border-l-2',
+    toneClass,
+    className,
+  )}
+>
+  <div class="flex min-w-0 flex-1 items-start gap-2.5">
+    {#if tone === 'danger'}
+      <CircleAlert class="mt-0.5 size-4 shrink-0" />
+    {:else if tone === 'warning'}
+      <TriangleAlert class="mt-0.5 size-4 shrink-0" />
+    {:else}
+      <Info class="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+    {/if}
+    <p class="min-w-0 leading-5">{message}</p>
+  </div>
+  {#if action}
+    <div class="shrink-0">{@render action()}</div>
+  {/if}
+</div>

package/dist/components/content/FeedbackNotice.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+export type FeedbackNoticeTone = 'info' | 'warning' | 'danger';
+export type FeedbackNoticePriority = 'contextual' | 'blocking';
+interface Props {
+    message: string;
+    tone?: FeedbackNoticeTone;
+    priority?: FeedbackNoticePriority;
+    action?: Snippet;
+    class?: string;
+}
+declare const FeedbackNotice: import("svelte").Component<Props, {}, "">;
+type FeedbackNotice = ReturnType<typeof FeedbackNotice>;
+export default FeedbackNotice;

package/dist/components/content/FileList.svelte

@@ -1,13 +1,21 @@
 <script lang="ts">
   import { Download, File, Trash2 } from '@lucide/svelte';
+  import { useTranslation } from '@svadmin/core/i18n';
   import { Button } from '../ui/button/index.js';
+  import DataState from './DataState.svelte';
+  import type { DataStateKind } from './DataState.svelte';
   export interface FileItem { id?: string; name: string; size?: string; type?: string; updatedAt?: string; }
-  interface Props { files?: FileItem[]; ondownload?: (file: FileItem) => void; onremove?: (file: FileItem) => void; class?: string; }
-  let { files = [], ondownload, onremove, class: className = '' }: Props = $props();
+  interface Props { files?: FileItem[]; state?: DataStateKind; stateTitle?: string; stateDescription?: string; emptyTitle?: string; emptyDescription?: string; retry?: () => void; retryLabel?: string; loadingLabel?: string; ondownload?: (file: FileItem) => void; onremove?: (file: FileItem) => void; class?: string; }
+  const i18n = useTranslation();
+  let { files = [], state, stateTitle, stateDescription, emptyTitle, emptyDescription, retry, retryLabel, loadingLabel, ondownload, onremove, class: className = '' }: Props = $props();
+  const resolvedState = $derived(state ?? (files.length === 0 ? 'empty' : undefined));
 </script>
+{#if resolvedState}
+  <DataState state={resolvedState} title={stateTitle ?? emptyTitle} description={stateDescription ?? emptyDescription} {retry} {retryLabel} {loadingLabel} class={className} />
+{:else}
 <div class={'divide-y divide-border overflow-hidden rounded-lg border border-border bg-card ' + className}>
   {#each files as file, index (file.id ?? file.name + '-' + index)}
-    <div class="flex items-center gap-3 px-4 py-3"><span class="flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground"><File class="size-4" /></span><div class="min-w-0 flex-1"><p class="truncate text-sm font-medium text-foreground">{file.name}</p><p class="text-xs text-muted-foreground">{file.size ?? file.type ?? 'File'}{file.updatedAt ? ' / ' + file.updatedAt : ''}</p></div>{#if ondownload}<Button variant="ghost" size="icon-sm" aria-label={'Download ' + file.name} onclick={() => ondownload?.(file)}><Download class="size-4" /></Button>{/if}{#if onremove}<Button variant="ghost" size="icon-sm" aria-label={'Remove ' + file.name} onclick={() => onremove?.(file)}><Trash2 class="size-4" /></Button>{/if}</div>
+    <div class="flex items-center gap-3 px-4 py-3"><span class="flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground"><File class="size-4" /></span><div class="min-w-0 flex-1"><p class="truncate text-sm font-medium text-foreground">{file.name}</p><p class="text-xs text-muted-foreground">{file.size ?? file.type ?? (i18n.locale === 'zh-CN' ? '文件' : 'File')}{file.updatedAt ? ' / ' + file.updatedAt : ''}</p></div>{#if ondownload}<Button variant="ghost" size="icon-sm" aria-label={(i18n.locale === 'zh-CN' ? '下载 ' : 'Download ') + file.name} onclick={() => ondownload?.(file)}><Download class="size-4" /></Button>{/if}{#if onremove}<Button variant="ghost" size="icon-sm" aria-label={(i18n.locale === 'zh-CN' ? '移除 ' : 'Remove ') + file.name} onclick={() => onremove?.(file)}><Trash2 class="size-4" /></Button>{/if}</div>
   {/each}
-  {#if files.length === 0}<div class="p-6 text-center text-sm text-muted-foreground">No files</div>{/if}
 </div>
+{/if}

package/dist/components/content/FileList.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { DataStateKind } from './DataState.svelte';
 export interface FileItem {
     id?: string;
     name: string;
@@ -7,6 +8,14 @@ export interface FileItem {
 }
 interface Props {
     files?: FileItem[];
+    state?: DataStateKind;
+    stateTitle?: string;
+    stateDescription?: string;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    retry?: () => void;
+    retryLabel?: string;
+    loadingLabel?: string;
     ondownload?: (file: FileItem) => void;
     onremove?: (file: FileItem) => void;
     class?: string;