@svadmin/ui 0.44.0 → 0.46.0

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, {}, "">;

package/dist/components/content/SettingsFieldRow.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    label: string;
+    description?: string;
+    control: Snippet;
+    separated?: boolean;
+    class?: string;
+  }
+
+  let {
+    label,
+    description,
+    control,
+    separated = false,
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div class={cn('flex min-h-11 items-center justify-between gap-4 py-3', separated && 'border-t border-border', className)} data-svadmin-settings-field-row>
+  <div class="min-w-0">
+    <p class="text-sm font-medium text-foreground">{label}</p>
+    {#if description}<p class="mt-1 max-w-2xl text-sm leading-5 text-muted-foreground">{description}</p>{/if}
+  </div>
+  <div class="shrink-0">{@render control()}</div>
+</div>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    label: string;
+    description?: string;
+    control: Snippet;
+    separated?: boolean;
+    class?: string;
+}
+declare const SettingsFieldRow: import("svelte").Component<Props, {}, "">;
+type SettingsFieldRow = ReturnType<typeof SettingsFieldRow>;
+export default SettingsFieldRow;

package/dist/components/content/SettingsGroup.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    title: string;
+    description?: string;
+    actions?: Snippet;
+    children: Snippet;
+    class?: string;
+    bodyClass?: string;
+  }
+
+  let {
+    title,
+    description,
+    actions,
+    children,
+    class: className = '',
+    bodyClass = '',
+  }: Props = $props();
+</script>
+
+<section class={cn('overflow-hidden rounded-lg border border-border bg-card shadow-sm', className)} data-svadmin-settings-group>
+  <header class="flex flex-col gap-3 border-b border-border px-5 py-4 sm:flex-row sm:items-start sm:justify-between">
+    <div class="min-w-0 space-y-1">
+      <h2 class="text-sm font-semibold text-foreground">{title}</h2>
+      {#if description}<p class="max-w-2xl text-sm leading-6 text-muted-foreground">{description}</p>{/if}
+    </div>
+    {#if actions}<div class="flex shrink-0 flex-wrap items-center gap-2">{@render actions()}</div>{/if}
+  </header>
+  <div class={cn('p-5', bodyClass)}>{@render children()}</div>
+</section>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title: string;
+    description?: string;
+    actions?: Snippet;
+    children: Snippet;
+    class?: string;
+    bodyClass?: string;
+}
+declare const SettingsGroup: import("svelte").Component<Props, {}, "">;
+type SettingsGroup = ReturnType<typeof SettingsGroup>;
+export default SettingsGroup;

package/dist/components/content/WorkspaceLayout.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    primary: Snippet;
+    secondary?: Snippet;
+    summary?: Snippet;
+    secondaryWidth?: string;
+    class?: string;
+  }
+
+  let {
+    primary,
+    secondary,
+    summary,
+    secondaryWidth = '22rem',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div class={cn('flex flex-col gap-6', className)} data-svadmin-workspace-layout style:--workspace-secondary-width={secondaryWidth}>
+  {#if summary}<div class="order-2 sm:order-1">{@render summary()}</div>{/if}
+  <div class="order-1 grid min-w-0 gap-6 sm:order-2 lg:grid-cols-[minmax(0,1fr)_var(--workspace-secondary-width)]">
+    <div class="min-w-0" data-svadmin-workspace-primary>{@render primary()}</div>
+    {#if secondary}<aside class="min-w-0">{@render secondary()}</aside>{/if}
+  </div>
+</div>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    primary: Snippet;
+    secondary?: Snippet;
+    summary?: Snippet;
+    secondaryWidth?: string;
+    class?: string;
+}
+declare const WorkspaceLayout: import("svelte").Component<Props, {}, "">;
+type WorkspaceLayout = ReturnType<typeof WorkspaceLayout>;
+export default WorkspaceLayout;

package/dist/components/content/index.d.ts

@@ -2,6 +2,9 @@ export { default as ContentPageShell } from './ContentPageShell.svelte';
 export { default as ContentPageHeader } from './ContentPageHeader.svelte';
 export { default as SectionHeader } from './SectionHeader.svelte';
 export { default as PageToolbar } from './PageToolbar.svelte';
+export { default as WorkspaceLayout } from './WorkspaceLayout.svelte';
+export { default as SettingsGroup } from './SettingsGroup.svelte';
+export { default as SettingsFieldRow } from './SettingsFieldRow.svelte';
 export { default as MetricBlock } from './MetricBlock.svelte';
 export { default as DescriptionList } from './DescriptionList.svelte';
 export { default as StatusBadge } from './StatusBadge.svelte';
@@ -24,9 +27,11 @@ export { default as MemberList } from './MemberList.svelte';
 export type { MemberSummary } from './MemberList.svelte';
 export { default as ImportDropzone } from './ImportDropzone.svelte';
 export { default as NetworkUserCard } from './NetworkUserCard.svelte';
-export type { NetworkUser } from './NetworkUserCard.svelte';
+export type { NetworkUser, NetworkMetric } from './NetworkUserCard.svelte';
 export { default as NetworkTable } from './NetworkTable.svelte';
 export type { NetworkColumn } from './NetworkTable.types.js';
 export { default as OtpInput } from './OtpInput.svelte';
 export { default as TwoFactorStepper } from './TwoFactorStepper.svelte';
 export { default as SystemErrorState } from './SystemErrorState.svelte';
+export { default as FeedbackNotice } from './FeedbackNotice.svelte';
+export type { FeedbackNoticeTone, FeedbackNoticePriority } from './FeedbackNotice.svelte';

package/dist/components/content/index.js

@@ -2,6 +2,9 @@ export { default as ContentPageShell } from './ContentPageShell.svelte';
 export { default as ContentPageHeader } from './ContentPageHeader.svelte';
 export { default as SectionHeader } from './SectionHeader.svelte';
 export { default as PageToolbar } from './PageToolbar.svelte';
+export { default as WorkspaceLayout } from './WorkspaceLayout.svelte';
+export { default as SettingsGroup } from './SettingsGroup.svelte';
+export { default as SettingsFieldRow } from './SettingsFieldRow.svelte';
 export { default as MetricBlock } from './MetricBlock.svelte';
 export { default as DescriptionList } from './DescriptionList.svelte';
 export { default as StatusBadge } from './StatusBadge.svelte';
@@ -20,3 +23,4 @@ export { default as NetworkTable } from './NetworkTable.svelte';
 export { default as OtpInput } from './OtpInput.svelte';
 export { default as TwoFactorStepper } from './TwoFactorStepper.svelte';
 export { default as SystemErrorState } from './SystemErrorState.svelte';
+export { default as FeedbackNotice } from './FeedbackNotice.svelte';

package/dist/components/network/UserCardsNFTPage.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
   import { useTranslation } from '@svadmin/core/i18n';
-  import { Check, Plus } from '@lucide/svelte';
-  import { Button } from '../ui/button/index.js';
-  import { Badge } from '../ui/badge/index.js';
-  import * as Card from '../ui/card/index.js';
   import ContentPageShell from '../content/ContentPageShell.svelte';
   import ContentPageHeader from '../content/ContentPageHeader.svelte';
   import FilterToolbar from '../content/FilterToolbar.svelte';
   import DataState from '../content/DataState.svelte';
+  import NetworkUserCard from '../content/NetworkUserCard.svelte';
   import type { NetworkUser } from '../content/NetworkUserCard.svelte';
 
   const i18n = useTranslation();
@@ -28,6 +25,28 @@
 
 <ContentPageShell pageId="network-user-cards" width="wide">
   <ContentPageHeader title={i18n.t('network.userCards')} description={i18n.t('network.userCardsDescription')} />
-  <FilterToolbar bind:query placeholder={i18n.t('common.search')} />
-  {#if filtered.length === 0}<DataState state="empty" title={i18n.t('network.userCards')} />{:else}<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">{#each filtered as user (user.id)}<Card.Card><Card.CardContent class="space-y-4 p-4"><div class="flex items-start gap-3"><span class="flex size-10 items-center justify-center rounded-md bg-muted text-sm font-semibold text-muted-foreground">{user.name.slice(0, 2).toUpperCase()}</span><div class="min-w-0 flex-1"><div class="flex items-center gap-1.5"><h2 class="truncate text-sm font-semibold text-foreground">{user.name}</h2>{#if user.verified}<Check class="size-3.5 text-primary" />{/if}</div><p class="text-xs text-muted-foreground">{user.handle}</p></div></div><p class="text-sm text-muted-foreground">{user.summary}</p><div class="flex flex-wrap gap-1.5">{#each user.tags as tag (tag)}<Badge variant="outline">{tag}</Badge>{/each}</div><div class="grid grid-cols-3 gap-2 border-t border-border pt-3 text-center"><div><p class="text-sm font-semibold text-foreground">{user.collectionCount}</p><p class="text-xs text-muted-foreground">{i18n.t('network.nftCollection')}</p></div><div><p class="text-sm font-semibold text-foreground">{user.floorPrice}</p><p class="text-xs text-muted-foreground">{i18n.t('network.floorPrice')}</p></div><div><p class="text-sm font-semibold text-foreground">{user.volume}</p><p class="text-xs text-muted-foreground">{i18n.t('network.volume')}</p></div></div><Button size="sm" variant={connected.includes(user.id) ? 'outline' : 'default'} class="w-full" onclick={() => toggle(user.id)}>{#if connected.includes(user.id)}<Check class="size-3.5" />{i18n.t('network.connected')}{:else}<Plus class="size-3.5" />{i18n.t('network.connect')}{/if}</Button></Card.CardContent></Card.Card>{/each}</div>{/if}
+  <FilterToolbar bind:query placeholder={i18n.t('common.search')} clearLabel={i18n.locale === 'zh-CN' ? '清除搜索' : 'Clear search'} />
+  {#if filtered.length === 0}
+    <DataState state="empty" title={i18n.t('network.userCards')} />
+  {:else}
+    <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+      {#each filtered as user (user.id)}
+        <NetworkUserCard
+          {user}
+          tags={user.tags}
+          verified={user.verified}
+          verifiedLabel={i18n.locale === 'zh-CN' ? '已验证' : 'Verified'}
+          metrics={[
+            { label: i18n.t('network.nftCollection'), value: user.collectionCount },
+            { label: i18n.t('network.floorPrice'), value: user.floorPrice },
+            { label: i18n.t('network.volume'), value: user.volume },
+          ]}
+          connected={connected.includes(user.id)}
+          connectLabel={i18n.t('network.connect')}
+          connectedLabel={i18n.t('network.connected')}
+          onconnect={() => toggle(user.id)}
+        />
+      {/each}
+    </div>
+  {/if}
 </ContentPageShell>