@svadmin/ui 0.45.0 → 0.46.0

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

package/dist/components/content/FilterToolbar.svelte

@@ -6,18 +6,26 @@
   interface Props {
     query?: string;
     placeholder?: string;
+    clearLabel?: string;
     filters?: Snippet;
     actions?: Snippet;
     class?: string;
   }
-  let { query = $bindable(''), placeholder = 'Search', filters, actions, class: className = '' }: Props = $props();
+  let {
+    query = $bindable(''),
+    placeholder = 'Search',
+    clearLabel = 'Clear search',
+    filters,
+    actions,
+    class: className = '',
+  }: Props = $props();
 </script>
 
 <div class={'flex flex-col gap-2 sm:flex-row sm:items-center ' + className}>
   <div class="relative min-w-0 flex-1">
     <Search class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
     <Input bind:value={query} {placeholder} class="pl-9 pr-9" aria-label={placeholder} />
-    {#if query}<Button variant="ghost" size="icon-xs" class="absolute right-1 top-1/2 -translate-y-1/2" aria-label="Clear search" onclick={() => query = ''}><X class="size-3.5" /></Button>{/if}
+    {#if query}<Button variant="ghost" size="icon-xs" class="absolute right-1 top-1/2 -translate-y-1/2" aria-label={clearLabel} title={clearLabel} onclick={() => query = ''}><X class="size-3.5" /></Button>{/if}
   </div>
   {#if filters}<div class="flex flex-wrap items-center gap-2">{@render filters()}</div>{/if}
   {#if actions}<div class="flex shrink-0 flex-wrap items-center gap-2">{@render actions()}</div>{/if}

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

@@ -2,6 +2,7 @@ import type { Snippet } from 'svelte';
 interface Props {
     query?: string;
     placeholder?: string;
+    clearLabel?: string;
     filters?: Snippet;
     actions?: Snippet;
     class?: string;

package/dist/components/content/MemberList.svelte

@@ -1,16 +1,24 @@
 <script lang="ts">
-  import { MoreHorizontal, UserRound } from '@lucide/svelte';
+  import { MoreHorizontal } from '@lucide/svelte';
+  import { useTranslation } from '@svadmin/core/i18n';
   import { Avatar } from '../ui/avatar/index.js';
   import { Button } from '../ui/button/index.js';
   import StatusBadge from './StatusBadge.svelte';
+  import DataState from './DataState.svelte';
+  import type { DataStateKind } from './DataState.svelte';
   export interface MemberSummary { id: string; name: string; email?: string; role?: string; department?: string; status?: 'success' | 'warning' | 'danger' | 'info' | 'neutral'; avatar?: string; }
-  interface Props { members?: MemberSummary[]; onaction?: (member: MemberSummary) => void; class?: string; }
-  let { members = [], onaction, class: className = '' }: Props = $props();
+  interface Props { members?: MemberSummary[]; state?: DataStateKind; stateTitle?: string; stateDescription?: string; emptyTitle?: string; emptyDescription?: string; retry?: () => void; retryLabel?: string; loadingLabel?: string; onaction?: (member: MemberSummary) => void; class?: string; }
+  const i18n = useTranslation();
+  let { members = [], state, stateTitle, stateDescription, emptyTitle, emptyDescription, retry, retryLabel, loadingLabel, onaction, class: className = '' }: Props = $props();
+  const resolvedState = $derived(state ?? (members.length === 0 ? 'empty' : undefined));
   const initials = (name: string) => name.split(' ').map((part) => part[0]).join('').slice(0, 2).toUpperCase();
 </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 members as member (member.id)}
-    <div class="flex items-center gap-3 px-4 py-3"><Avatar src={member.avatar} alt={member.name} fallback={initials(member.name)} size="sm" /><div class="min-w-0 flex-1"><p class="truncate text-sm font-medium text-foreground">{member.name}</p><p class="truncate text-xs text-muted-foreground">{member.email ?? member.department ?? 'Team member'}</p></div>{#if member.role}<span class="hidden text-xs text-muted-foreground sm:inline">{member.role}</span>{/if}{#if member.status}<StatusBadge status={member.status} label={member.status} />{/if}{#if onaction}<Button variant="ghost" size="icon-sm" aria-label={'Actions for ' + member.name} onclick={() => onaction?.(member)}><MoreHorizontal class="size-4" /></Button>{/if}</div>
+    <div class="flex items-center gap-3 px-4 py-3"><Avatar src={member.avatar} alt={member.name} fallback={initials(member.name)} size="sm" /><div class="min-w-0 flex-1"><p class="truncate text-sm font-medium text-foreground">{member.name}</p><p class="truncate text-xs text-muted-foreground">{member.email ?? member.department ?? i18n.t('profileSections.members')}</p></div>{#if member.role}<span class="hidden text-xs text-muted-foreground sm:inline">{member.role}</span>{/if}{#if member.status}<StatusBadge status={member.status} label={member.status} />{/if}{#if onaction}<Button variant="ghost" size="icon-sm" aria-label={i18n.t('common.actions') + ' ' + member.name} onclick={() => onaction?.(member)}><MoreHorizontal class="size-4" /></Button>{/if}</div>
   {/each}
-  {#if members.length === 0}<div class="flex flex-col items-center gap-2 p-6 text-center text-sm text-muted-foreground"><UserRound class="size-6" />No members</div>{/if}
 </div>
+{/if}

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

@@ -1,3 +1,4 @@
+import type { DataStateKind } from './DataState.svelte';
 export interface MemberSummary {
     id: string;
     name: string;
@@ -9,6 +10,14 @@ export interface MemberSummary {
 }
 interface Props {
     members?: MemberSummary[];
+    state?: DataStateKind;
+    stateTitle?: string;
+    stateDescription?: string;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    retry?: () => void;
+    retryLabel?: string;
+    loadingLabel?: string;
     onaction?: (member: MemberSummary) => void;
     class?: string;
 }

package/dist/components/content/MetricBlock.svelte

@@ -1,16 +1,33 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { Skeleton } from '../ui/skeleton/index.js';
+  export type MetricTrendTone = 'positive' | 'negative' | 'warning' | 'neutral';
   interface Props {
     label: string;
     value: string | number;
     detail?: string;
     trend?: string;
+    trendTone?: MetricTrendTone;
     icon?: Snippet;
     loading?: boolean;
     class?: string;
   }
-  let { label, value, detail, trend, icon, loading = false, class: className = '' }: Props = $props();
+  let {
+    label,
+    value,
+    detail,
+    trend,
+    trendTone = 'neutral',
+    icon,
+    loading = false,
+    class: className = '',
+  }: Props = $props();
+  const trendClass: Record<MetricTrendTone, string> = {
+    positive: 'text-success',
+    negative: 'text-destructive',
+    warning: 'text-warning-foreground',
+    neutral: 'text-muted-foreground',
+  };
 </script>
 
 <div data-svadmin-metric-card class={'min-w-0 rounded-lg border border-border bg-card p-4 shadow-sm ' + className}>
@@ -22,6 +39,6 @@
     <Skeleton class="mt-3 h-8 w-24" />
   {:else}
     <p class="mt-2 truncate text-2xl font-semibold tracking-normal text-foreground">{value}</p>
-    {#if detail || trend}<div class="mt-2 flex flex-wrap gap-2 text-xs">{#if trend}<span class="font-medium text-success">{trend}</span>{/if}{#if detail}<span class="text-muted-foreground">{detail}</span>{/if}</div>{/if}
+    {#if detail || trend}<div class="mt-2 flex flex-wrap gap-2 text-xs">{#if trend}<span class={'font-medium ' + trendClass[trendTone]}>{trend}</span>{/if}{#if detail}<span class="text-muted-foreground">{detail}</span>{/if}</div>{/if}
   {/if}
 </div>

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

@@ -1,9 +1,11 @@
 import type { Snippet } from 'svelte';
+export type MetricTrendTone = 'positive' | 'negative' | 'warning' | 'neutral';
 interface Props {
     label: string;
     value: string | number;
     detail?: string;
     trend?: string;
+    trendTone?: MetricTrendTone;
     icon?: Snippet;
     loading?: boolean;
     class?: string;

package/dist/components/content/NetworkTable.svelte

@@ -1,10 +1,16 @@
 <script lang="ts" generics="T extends object">
   import type { Snippet } from 'svelte';
   import * as Table from '../ui/table/index.js';
+  import DataState from './DataState.svelte';
+  import type { DataStateKind } from './DataState.svelte';
   import type { NetworkColumn } from './NetworkTable.types.js';
-  interface Props { rows?: T[]; columns: NetworkColumn<T>[]; row?: Snippet<[T]>; class?: string; }
-  let { rows = [], columns, row, class: className = '' }: Props = $props();
+  interface Props { rows?: T[]; columns: NetworkColumn<T>[]; row?: Snippet<[T]>; state?: DataStateKind; stateTitle?: string; stateDescription?: string; emptyTitle?: string; emptyDescription?: string; retry?: () => void; retryLabel?: string; loadingLabel?: string; class?: string; }
+  let { rows = [], columns, row, state, stateTitle, stateDescription, emptyTitle, emptyDescription, retry, retryLabel, loadingLabel, class: className = '' }: Props = $props();
+  const resolvedState = $derived(state ?? (rows.length === 0 ? 'empty' : undefined));
 </script>
+{#if resolvedState}
+  <DataState state={resolvedState} title={stateTitle ?? emptyTitle} description={stateDescription ?? emptyDescription} {retry} {retryLabel} {loadingLabel} class={className} />
+{:else}
 <div class={'overflow-x-auto rounded-lg border border-border bg-card ' + className}>
   <Table.Root data-svadmin-datatable>
     <Table.Header data-svadmin-table-head><Table.Row>{#each columns as column (String(column.key))}<Table.Head>{column.label}</Table.Head>{/each}</Table.Row></Table.Header>
@@ -14,5 +20,5 @@
       {/each}
     </Table.Body>
   </Table.Root>
-  {#if rows.length === 0}<div class="p-6 text-center text-sm text-muted-foreground">No records</div>{/if}
 </div>
+{/if}

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

@@ -1,10 +1,19 @@
 import type { Snippet } from 'svelte';
+import type { DataStateKind } from './DataState.svelte';
 import type { NetworkColumn } from './NetworkTable.types.js';
 declare function $$render<T extends object>(): {
     props: {
         rows?: T[];
         columns: NetworkColumn<T>[];
         row?: Snippet<[T]>;
+        state?: DataStateKind;
+        stateTitle?: string;
+        stateDescription?: string;
+        emptyTitle?: string;
+        emptyDescription?: string;
+        retry?: () => void;
+        retryLabel?: string;
+        loadingLabel?: string;
         class?: string;
     };
     exports: {};

package/dist/components/content/NetworkUserCard.svelte

@@ -1,17 +1,57 @@
 <script lang="ts">
-  import { MessageSquare, UserPlus } from '@lucide/svelte';
+  import type { Snippet } from 'svelte';
+  import { Check, MessageSquare, Plus } from '@lucide/svelte';
   import { Avatar } from '../ui/avatar/index.js';
+  import { Badge } from '../ui/badge/index.js';
   import { Button } from '../ui/button/index.js';
   import * as Card from '../ui/card/index.js';
   export interface NetworkUser { id: string; name: string; handle?: string; role?: string; avatar?: string; summary?: string; }
-  interface Props { user: NetworkUser; onconnect?: () => void; onmessage?: () => void; class?: string; }
-  let { user, onconnect, onmessage, class: className = '' }: Props = $props();
+  export interface NetworkMetric { label: string; value: string | number; }
+  interface Props {
+    user: NetworkUser;
+    tags?: string[];
+    metrics?: NetworkMetric[];
+    verified?: boolean;
+    verifiedLabel?: string;
+    connected?: boolean;
+    connectLabel?: string;
+    connectedLabel?: string;
+    onconnect?: () => void;
+    onmessage?: () => void;
+    footer?: Snippet;
+    class?: string;
+  }
+  let {
+    user,
+    tags = [],
+    metrics = [],
+    verified = false,
+    verifiedLabel = 'Verified',
+    connected = false,
+    connectLabel = 'Connect',
+    connectedLabel = 'Connected',
+    onconnect,
+    onmessage,
+    footer,
+    class: className = '',
+  }: Props = $props();
   const initials = $derived(user.name.split(' ').map((part) => part[0]).join('').slice(0, 2).toUpperCase());
 </script>
 <Card.Card class={className}>
-  <Card.CardContent class="flex items-start gap-3 p-4">
-    <Avatar src={user.avatar} alt={user.name} fallback={initials} size="lg" />
-    <div class="min-w-0 flex-1"><h3 class="truncate text-sm font-semibold text-foreground">{user.name}</h3>{#if user.handle}<p class="truncate text-xs text-muted-foreground">{user.handle}</p>{/if}{#if user.role}<p class="mt-2 text-xs font-medium text-foreground">{user.role}</p>{/if}{#if user.summary}<p class="mt-1 line-clamp-2 text-xs text-muted-foreground">{user.summary}</p>{/if}</div>
-    <div class="flex shrink-0 gap-1">{#if onmessage}<Button variant="ghost" size="icon-sm" aria-label={'Message ' + user.name} onclick={onmessage}><MessageSquare class="size-4" /></Button>{/if}{#if onconnect}<Button variant="outline" size="icon-sm" aria-label={'Connect with ' + user.name} onclick={onconnect}><UserPlus class="size-4" /></Button>{/if}</div>
+  <Card.CardContent class="space-y-4 p-4">
+    <div class="flex items-start gap-3">
+      <Avatar src={user.avatar} alt={user.name} fallback={initials} size="lg" />
+      <div class="min-w-0 flex-1">
+        <div class="flex min-w-0 items-center gap-1.5"><h3 class="truncate text-sm font-semibold text-foreground">{user.name}</h3>{#if verified}<Check class="size-3.5 shrink-0 text-primary" aria-label={verifiedLabel} />{/if}</div>
+        {#if user.handle}<p class="truncate text-xs text-muted-foreground">{user.handle}</p>{/if}
+        {#if user.role}<p class="mt-2 text-xs font-medium text-foreground">{user.role}</p>{/if}
+      </div>
+      {#if onmessage}<Button variant="ghost" size="icon-sm" aria-label={'Message ' + user.name} onclick={onmessage}><MessageSquare class="size-4" /></Button>{/if}
+    </div>
+    {#if user.summary}<p class="text-sm leading-5 text-muted-foreground">{user.summary}</p>{/if}
+    {#if tags.length > 0}<div class="flex flex-wrap gap-1.5">{#each tags as tag (tag)}<Badge variant="outline">{tag}</Badge>{/each}</div>{/if}
+    {#if metrics.length > 0}<dl class="grid gap-2 border-t border-border pt-3 text-center" style:grid-template-columns={`repeat(${metrics.length}, minmax(0, 1fr))`}>{#each metrics as metric (metric.label)}<div class="min-w-0"><dd class="truncate text-sm font-semibold text-foreground">{metric.value}</dd><dt class="mt-1 truncate text-xs text-muted-foreground">{metric.label}</dt></div>{/each}</dl>{/if}
+    {#if onconnect}<Button size="sm" variant={connected ? 'outline' : 'default'} class="w-full" onclick={onconnect}>{#if connected}<Check class="size-3.5" />{connectedLabel}{:else}<Plus class="size-3.5" />{connectLabel}{/if}</Button>{/if}
+    {#if footer}<div class="border-t border-border pt-3">{@render footer()}</div>{/if}
   </Card.CardContent>
 </Card.Card>