@svadmin/ui 0.45.0 → 0.47.1

package/dist/components/account/UserProfilePage.svelte

@@ -9,6 +9,7 @@
   import DescriptionList from '../content/DescriptionList.svelte';
   import FileList from '../content/FileList.svelte';
   import IntegrationCard from '../content/IntegrationCard.svelte';
+  import WorkspaceLayout from '../content/WorkspaceLayout.svelte';
   import type { IntegrationSummary } from '../content/IntegrationCard.svelte';
   import { referenceDemoData } from '../../reference-data.js';
   const i18n = useTranslation();
@@ -22,8 +23,8 @@
 
 <ContentPageShell pageId="account-user-profile" width="wide">
   <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"><ContentPageHeader title={i18n.t('account.userProfile')} description={i18n.t('account.userProfileDescription')} /><Button onclick={save} disabled={saving} size="sm">{#if saving}<Loader2 class="size-3.5 animate-spin" />{/if}{i18n.t('common.save')}</Button></div>
-  <div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_20rem]">
-    <div class="space-y-4"><Card.Card><Card.CardContent class="space-y-5 p-5"><div><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.personalInfo')}</h2><p class="mt-1 text-sm text-muted-foreground">Keep your contact and working details current.</p></div><DescriptionList columns={2} items={[{ label: i18n.t('profile.name'), value: 'Alex Chen' }, { label: i18n.t('account.phone'), value: '+86 138 **** 9527' }, { label: i18n.t('account.dateOfBirth'), value: '1995-04-18' }, { label: i18n.t('account.address'), value: 'Shanghai, CN' }]} /></Card.CardContent></Card.Card><Card.Card><Card.CardContent class="space-y-4 p-5"><div class="flex items-center justify-between gap-3"><div><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.work')}</h2><p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.availableNow')}</p></div><Switch bind:checked={availableToHire} /></div><div class="flex flex-wrap gap-1.5">{#each ['TypeScript', 'Svelte', 'Node.js', 'Design Systems'] as skill (skill)}<span class="rounded-md border border-border px-2 py-1 text-xs text-muted-foreground">{skill}</span>{/each}</div></Card.CardContent></Card.Card><section class="space-y-3"><h2 class="text-base font-semibold text-foreground">{i18n.t('account.connections')}</h2>{#each integrations as integration (integration.id)}<IntegrationCard {integration} onconnect={() => toggle(integration.id)} />{/each}</section></div>
-    <div class="space-y-4"><Card.Card><Card.CardContent class="space-y-3 p-5"><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.myFiles')}</h2><FileList files={files} /></Card.CardContent></Card.Card><Card.Card><Card.CardContent class="space-y-3 p-5"><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.calendarAccounts')}</h2><DescriptionList items={[{ label: 'Work Calendar', value: 'alex@nebulalabs.io' }, { label: 'Personal Calendar', value: 'alex@example.com' }]} /></Card.CardContent></Card.Card></div>
-  </div>
+  <WorkspaceLayout secondaryWidth="20rem">
+    {#snippet primary()}<div class="space-y-4"><Card.Card><Card.CardContent class="space-y-5 p-5"><div><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.personalInfo')}</h2><p class="mt-1 text-sm text-muted-foreground">Keep your contact and working details current.</p></div><DescriptionList columns={2} items={[{ label: i18n.t('profile.name'), value: 'Alex Chen' }, { label: i18n.t('account.phone'), value: '+86 138 **** 9527' }, { label: i18n.t('account.dateOfBirth'), value: '1995-04-18' }, { label: i18n.t('account.address'), value: 'Shanghai, CN' }]} /></Card.CardContent></Card.Card><Card.Card><Card.CardContent class="space-y-4 p-5"><div class="flex items-center justify-between gap-3"><div><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.work')}</h2><p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.availableNow')}</p></div><Switch bind:checked={availableToHire} /></div><div class="flex flex-wrap gap-1.5">{#each ['TypeScript', 'Svelte', 'Node.js', 'Design Systems'] as skill (skill)}<span class="rounded-md border border-border px-2 py-1 text-xs text-muted-foreground">{skill}</span>{/each}</div></Card.CardContent></Card.Card><section class="space-y-3"><h2 class="text-base font-semibold text-foreground">{i18n.t('account.connections')}</h2>{#each integrations as integration (integration.id)}<IntegrationCard {integration} onconnect={() => toggle(integration.id)} />{/each}</section></div>{/snippet}
+    {#snippet secondary()}<div class="space-y-4"><Card.Card><Card.CardContent class="space-y-3 p-5"><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.myFiles')}</h2><FileList files={files} /></Card.CardContent></Card.Card><Card.Card><Card.CardContent class="space-y-3 p-5"><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.calendarAccounts')}</h2><DescriptionList items={[{ label: 'Work Calendar', value: 'alex@nebulalabs.io' }, { label: 'Personal Calendar', value: 'alex@example.com' }]} /></Card.CardContent></Card.Card></div>{/snippet}
+  </WorkspaceLayout>
 </ContentPageShell>

package/dist/components/content/ApiKeyList.svelte

@@ -1,13 +1,47 @@
 <script lang="ts">
-  import { Copy, KeyRound, Trash2 } from '@lucide/svelte';
+  import { Check, Copy, KeyRound, Trash2 } from '@lucide/svelte';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { Badge } from '../ui/badge/index.js';
   import { Button } from '../ui/button/index.js';
-  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();
+  import DataState from './DataState.svelte';
+  import type { DataStateKind } from './DataState.svelte';
+  export interface ApiKeySummary {
+    id: string;
+    name: string;
+    prefix: string;
+    maskedToken?: string;
+    createdAt?: string;
+    lastUsedAt?: string;
+    permissions?: string[];
+  }
+  interface Props { keys?: ApiKeySummary[]; state?: DataStateKind; stateTitle?: string; stateDescription?: string; retry?: () => void; retryLabel?: string; loadingLabel?: string; copiedKeyId?: string | null; oncopy?: (key: ApiKeySummary) => void; onrevoke?: (key: ApiKeySummary) => void; class?: string; }
+  const i18n = useTranslation();
+  let { keys = [], state, stateTitle, stateDescription, retry, retryLabel, loadingLabel, copiedKeyId = null, 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-48 flex-1">
+        <p class="truncate text-sm font-medium text-foreground">{apiKey.name}</p>
+        <p class="truncate font-mono text-xs text-muted-foreground">{apiKey.maskedToken ?? `${apiKey.prefix}********`}</p>
+        {#if apiKey.permissions?.length}
+          <div class="mt-2 flex flex-wrap gap-1">
+            {#each apiKey.permissions as permission (permission)}<Badge variant="secondary" class="px-2 py-0 text-[10px]">{permission}</Badge>{/each}
+          </div>
+        {/if}
+      </div>
+      <div class="text-left text-xs text-muted-foreground sm:text-right"><p>{apiKey.createdAt ?? (isZh ? '最近创建' : 'Created recently')}</p><p>{apiKey.lastUsedAt ?? (isZh ? '从未使用' : 'Never used')}</p></div>
+      <div class="ml-auto flex items-center gap-1">
+        {#if oncopy}<Button variant="ghost" size="icon-sm" aria-label={i18n.t('common.copy') + ' ' + apiKey.name} onclick={() => oncopy?.(apiKey)}>{#if copiedKeyId === apiKey.id}<Check class="size-4 text-success" />{:else}<Copy class="size-4" />{/if}</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,12 +1,22 @@
+import type { DataStateKind } from './DataState.svelte';
 export interface ApiKeySummary {
     id: string;
     name: string;
     prefix: string;
+    maskedToken?: string;
     createdAt?: string;
     lastUsedAt?: string;
+    permissions?: string[];
 }
 interface Props {
     keys?: ApiKeySummary[];
+    state?: DataStateKind;
+    stateTitle?: string;
+    stateDescription?: string;
+    retry?: () => void;
+    retryLabel?: string;
+    loadingLabel?: string;
+    copiedKeyId?: string | null;
     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>

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

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 export interface NetworkUser {
     id: string;
     name: string;
@@ -6,10 +7,22 @@ export interface NetworkUser {
     avatar?: string;
     summary?: string;
 }
+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;
 }
 declare const NetworkUserCard: import("svelte").Component<Props, {}, "">;

package/dist/components/content/SectionHeader.svelte

@@ -4,14 +4,15 @@
     title: string;
     description?: string;
     actions?: Snippet;
+    id?: string;
     class?: string;
   }
-  let { title, description, actions, class: className = '' }: Props = $props();
+  let { title, description, actions, id, class: className = '' }: Props = $props();
 </script>
 
 <div class={'flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between ' + className}>
   <div class="min-w-0 space-y-1">
-    <h2 class="text-base font-semibold text-foreground">{title}</h2>
+    <h2 {id} class="text-base font-semibold text-foreground">{title}</h2>
     {#if description}<p class="text-sm text-muted-foreground">{description}</p>{/if}
   </div>
   {#if actions}<div class="flex shrink-0 flex-wrap items-center gap-2">{@render actions()}</div>{/if}

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

@@ -3,6 +3,7 @@ interface Props {
     title: string;
     description?: string;
     actions?: Snippet;
+    id?: string;
     class?: string;
 }
 declare const SectionHeader: import("svelte").Component<Props, {}, "">;

package/dist/components/content/SecurityEventTable.svelte

@@ -1,18 +1,27 @@
 <script lang="ts">
   import * as Table from '../ui/table/index.js';
+  import { useTranslation } from '@svadmin/core/i18n';
   import StatusBadge from './StatusBadge.svelte';
+  import DataState from './DataState.svelte';
+  import type { DataStateKind } from './DataState.svelte';
   export interface SecurityEvent { id: string; event: string; actor?: string; location?: string; createdAt: string; severity: 'info' | 'warning' | 'danger'; }
-  interface Props { events?: SecurityEvent[]; class?: string; }
-  let { events = [], class: className = '' }: Props = $props();
+  interface Props { events?: SecurityEvent[]; state?: DataStateKind; stateTitle?: string; stateDescription?: string; emptyTitle?: string; emptyDescription?: string; retry?: () => void; retryLabel?: string; loadingLabel?: string; class?: string; }
+  const i18n = useTranslation();
+  let { events = [], state, stateTitle, stateDescription, emptyTitle, emptyDescription, retry, retryLabel, loadingLabel, class: className = '' }: Props = $props();
+  const resolvedState = $derived(state ?? (events.length === 0 ? 'empty' : undefined));
+  const isZh = $derived(i18n.locale === 'zh-CN');
 </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><Table.Head>Event</Table.Head><Table.Head>Actor</Table.Head><Table.Head>Location</Table.Head><Table.Head>Time</Table.Head><Table.Head>Risk</Table.Head></Table.Row></Table.Header>
+    <Table.Header data-svadmin-table-head><Table.Row><Table.Head>{isZh ? '事件' : 'Event'}</Table.Head><Table.Head>{isZh ? '操作者' : 'Actor'}</Table.Head><Table.Head>{isZh ? '位置' : 'Location'}</Table.Head><Table.Head>{isZh ? '时间' : 'Time'}</Table.Head><Table.Head>{isZh ? '风险' : 'Risk'}</Table.Head></Table.Row></Table.Header>
     <Table.Body>
       {#each events as event (event.id)}
-        <Table.Row data-svadmin-table-row><Table.Cell class="font-medium">{event.event}</Table.Cell><Table.Cell>{event.actor ?? 'System'}</Table.Cell><Table.Cell>{event.location ?? 'Unknown'}</Table.Cell><Table.Cell class="whitespace-nowrap">{event.createdAt}</Table.Cell><Table.Cell><StatusBadge status={event.severity} label={event.severity} /></Table.Cell></Table.Row>
+        <Table.Row data-svadmin-table-row><Table.Cell class="font-medium">{event.event}</Table.Cell><Table.Cell>{event.actor ?? (isZh ? '系统' : 'System')}</Table.Cell><Table.Cell>{event.location ?? (isZh ? '未知' : 'Unknown')}</Table.Cell><Table.Cell class="whitespace-nowrap">{event.createdAt}</Table.Cell><Table.Cell><StatusBadge status={event.severity} label={event.severity} /></Table.Cell></Table.Row>
       {/each}
     </Table.Body>
   </Table.Root>
-  {#if events.length === 0}<div class="p-6 text-center text-sm text-muted-foreground">No security events</div>{/if}
 </div>
+{/if}

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

@@ -1,3 +1,4 @@
+import type { DataStateKind } from './DataState.svelte';
 export interface SecurityEvent {
     id: string;
     event: string;
@@ -8,6 +9,14 @@ export interface SecurityEvent {
 }
 interface Props {
     events?: SecurityEvent[];
+    state?: DataStateKind;
+    stateTitle?: string;
+    stateDescription?: string;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    retry?: () => void;
+    retryLabel?: string;
+    loadingLabel?: string;
     class?: string;
 }
 declare const SecurityEventTable: import("svelte").Component<Props, {}, "">;