@svadmin/ui 0.42.2 → 0.43.0

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    status?: '404' | '500';
+    title?: string;
+    description?: string;
+    action?: Snippet;
+}
+declare const SystemErrorState: import("svelte").Component<Props, {}, "">;
+type SystemErrorState = ReturnType<typeof SystemErrorState>;
+export default SystemErrorState;

package/dist/components/content/TeamCard.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { ArrowRight, Users } from '@lucide/svelte';
+  import { Avatar } from '../ui/avatar/index.js';
+  import { Button } from '../ui/button/index.js';
+  import * as Card from '../ui/card/index.js';
+  export interface TeamSummary {
+    id: string;
+    name: string;
+    description?: string;
+    totalMembers?: number;
+    members?: Array<{ id?: string; name: string; avatar?: string; role?: string }>;
+    color?: string;
+    rating?: number;
+  }
+  interface Props { team: TeamSummary; onjoin?: () => void; onclick?: () => void; class?: string; }
+  let { team, onjoin, onclick, class: className = '' }: Props = $props();
+  const initials = (name: string) => name.split(' ').map((part) => part[0]).join('').slice(0, 2).toUpperCase();
+</script>
+<Card.Card data-interactive={onclick ? 'true' : undefined} class={'h-full ' + className}>
+  <Card.CardContent class="flex h-full flex-col gap-3 p-4">
+    <div class="flex items-start gap-3"><span class="flex size-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary" style:background-color={team.color ? `${team.color}20` : undefined}><Users class="size-4" style={team.color ? `color: ${team.color}` : undefined} /></span><div class="min-w-0 flex-1"><h3 class="truncate text-sm font-semibold text-foreground">{team.name}</h3><p class="text-xs text-muted-foreground">{team.totalMembers ?? team.members?.length ?? 0} members</p></div>{#if team.rating}<span class="text-xs font-semibold text-warning">{team.rating}</span>{/if}</div>
+    {#if team.description}<p class="line-clamp-2 text-sm text-muted-foreground">{team.description}</p>{/if}
+    <div class="flex items-center gap-1">{#each (team.members ?? []).slice(0, 5) as member, index (member.id ?? member.name + '-' + index)}<Avatar src={member.avatar} alt={member.name} fallback={initials(member.name)} size="sm" class="-mr-1 ring-2 ring-card" />{/each}</div>
+    <div class="mt-auto flex gap-2 border-t border-border pt-3">{#if onjoin}<Button variant="outline" size="sm" class="flex-1" onclick={onjoin}>Join</Button>{/if}{#if onclick}<Button variant="ghost" size="sm" class="flex-1" onclick={onclick}>View <ArrowRight class="size-3.5" /></Button>{/if}</div>
+  </Card.CardContent>
+</Card.Card>

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

@@ -0,0 +1,23 @@
+export interface TeamSummary {
+    id: string;
+    name: string;
+    description?: string;
+    totalMembers?: number;
+    members?: Array<{
+        id?: string;
+        name: string;
+        avatar?: string;
+        role?: string;
+    }>;
+    color?: string;
+    rating?: number;
+}
+interface Props {
+    team: TeamSummary;
+    onjoin?: () => void;
+    onclick?: () => void;
+    class?: string;
+}
+declare const TeamCard: import("svelte").Component<Props, {}, "">;
+type TeamCard = ReturnType<typeof TeamCard>;
+export default TeamCard;

package/dist/components/content/TwoFactorStepper.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  interface Props { current: number; steps?: string[]; class?: string; }
+  let { current, steps = ['Setup', 'Verify', 'Recovery'], class: className = '' }: Props = $props();
+</script>
+<ol class={'grid gap-2 sm:grid-cols-3 ' + className} aria-label="Progress">
+  {#each steps as step, index (step)}
+    <li class={'flex items-center gap-2 rounded-md border px-3 py-2 text-xs ' + (index < current ? 'border-success/30 bg-success/10 text-success' : index === current ? 'border-primary/30 bg-primary/10 font-medium text-primary' : 'border-border text-muted-foreground')}>
+      <span class="flex size-5 shrink-0 items-center justify-center rounded-full border text-[11px]">{index + 1}</span><span class="truncate">{step}</span>
+    </li>
+  {/each}
+</ol>

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

@@ -0,0 +1,8 @@
+interface Props {
+    current: number;
+    steps?: string[];
+    class?: string;
+}
+declare const TwoFactorStepper: import("svelte").Component<Props, {}, "">;
+type TwoFactorStepper = ReturnType<typeof TwoFactorStepper>;
+export default TwoFactorStepper;

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

@@ -0,0 +1,32 @@
+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 MetricBlock } from './MetricBlock.svelte';
+export { default as DescriptionList } from './DescriptionList.svelte';
+export { default as StatusBadge } from './StatusBadge.svelte';
+export { default as FilterToolbar } from './FilterToolbar.svelte';
+export { default as DataState } from './DataState.svelte';
+export type { DataStateKind } from './DataState.svelte';
+export { default as ProjectCard } from './ProjectCard.svelte';
+export type { ProjectSummary, ProjectStatus } from './ProjectCard.svelte';
+export { default as TeamCard } from './TeamCard.svelte';
+export type { TeamSummary } from './TeamCard.svelte';
+export { default as FileList } from './FileList.svelte';
+export type { FileItem } from './FileList.svelte';
+export { default as IntegrationCard } from './IntegrationCard.svelte';
+export type { IntegrationSummary } from './IntegrationCard.svelte';
+export { default as ApiKeyList } from './ApiKeyList.svelte';
+export type { ApiKeySummary } from './ApiKeyList.svelte';
+export { default as SecurityEventTable } from './SecurityEventTable.svelte';
+export type { SecurityEvent } from './SecurityEventTable.svelte';
+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 { 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';

package/dist/components/content/index.js

@@ -0,0 +1,22 @@
+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 MetricBlock } from './MetricBlock.svelte';
+export { default as DescriptionList } from './DescriptionList.svelte';
+export { default as StatusBadge } from './StatusBadge.svelte';
+export { default as FilterToolbar } from './FilterToolbar.svelte';
+export { default as DataState } from './DataState.svelte';
+export { default as ProjectCard } from './ProjectCard.svelte';
+export { default as TeamCard } from './TeamCard.svelte';
+export { default as FileList } from './FileList.svelte';
+export { default as IntegrationCard } from './IntegrationCard.svelte';
+export { default as ApiKeyList } from './ApiKeyList.svelte';
+export { default as SecurityEventTable } from './SecurityEventTable.svelte';
+export { default as MemberList } from './MemberList.svelte';
+export { default as ImportDropzone } from './ImportDropzone.svelte';
+export { default as NetworkUserCard } from './NetworkUserCard.svelte';
+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';

package/dist/components/network/TeamCrewTablePage.svelte

@@ -1,189 +1,37 @@
 <script lang="ts">
-  import { captureAdminContext } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
-  import * as Card from '../ui/card/index.js';
+  import { Download, UserPlus } from '@lucide/svelte';
   import { Button } from '../ui/button/index.js';
-  import { Input } from '../ui/input/index.js';
-  import { Search, Download, UserPlus, MoreHorizontal, CheckCircle2, Clock, XCircle } from '@lucide/svelte';
-
+  import ContentPageShell from '../content/ContentPageShell.svelte';
+  import ContentPageHeader from '../content/ContentPageHeader.svelte';
+  import FilterToolbar from '../content/FilterToolbar.svelte';
+  import NetworkTable from '../content/NetworkTable.svelte';
+  import type { NetworkColumn } from '../content/NetworkTable.types.js';
+  import { Avatar } from '../ui/avatar/index.js';
+  import { Badge } from '../ui/badge/index.js';
+
+  interface CrewMember { id: string; name: string; email: string; role: string; department: string; status: 'active' | 'away' | 'offline'; projects: number; }
   const i18n = useTranslation();
-  const adminContext = captureAdminContext();
-
-  interface CrewMember {
-    id: string;
-    name: string;
-    email: string;
-    role: string;
-    department: string;
-    status: 'active' | 'away' | 'offline';
-    avatar?: string;
-    joinedAt: string;
-    projects: number;
-  }
-
-  let searchQuery = $state('');
-
-  const crew: CrewMember[] = [
-    { id: '1', name: 'Alex Chen', email: 'alex@acme.com', role: 'Tech Lead', department: 'Engineering', status: 'active', joinedAt: '2022-03-15', projects: 12 },
-    { id: '2', name: 'Sarah Kim', email: 'sarah@acme.com', role: 'Senior Designer', department: 'Design', status: 'active', joinedAt: '2022-06-22', projects: 8 },
-    { id: '3', name: 'Mike Johnson', email: 'mike@acme.com', role: 'Product Manager', department: 'Product', status: 'away', joinedAt: '2023-01-10', projects: 6 },
-    { id: '4', name: 'Lisa Wang', email: 'lisa@acme.com', role: 'Backend Engineer', department: 'Engineering', status: 'active', joinedAt: '2023-04-05', projects: 10 },
-    { id: '5', name: 'Tom Brown', email: 'tom@acme.com', role: 'QA Engineer', department: 'Engineering', status: 'offline', joinedAt: '2022-11-20', projects: 4 },
-    { id: '6', name: 'Emma Davis', email: 'emma@acme.com', role: 'Engineering Manager', department: 'Engineering', status: 'active', joinedAt: '2022-02-14', projects: 15 },
-    { id: '7', name: 'James Wilson', email: 'james@acme.com', role: 'DevOps Engineer', department: 'Infrastructure', status: 'active', joinedAt: '2023-08-01', projects: 7 },
-    { id: '8', name: 'Yuki Tanaka', email: 'yuki@acme.com', role: 'Frontend Engineer', department: 'Engineering', status: 'away', joinedAt: '2023-05-12', projects: 9 },
-    { id: '9', name: 'Priya Nair', email: 'priya@acme.com', role: 'Data Scientist', department: 'Data', status: 'active', joinedAt: '2023-09-18', projects: 5 },
-    { id: '10', name: 'Carlos Mendez', email: 'carlos@acme.com', role: 'Mobile Engineer', department: 'Engineering', status: 'active', joinedAt: '2022-07-25', projects: 11 },
-    { id: '11', name: 'Hana Sato', email: 'hana@acme.com', role: 'UX Researcher', department: 'Design', status: 'away', joinedAt: '2024-01-15', projects: 3 },
-    { id: '12', name: 'Oscar Lund', email: 'oscar@acme.com', role: 'Security Engineer', department: 'Infrastructure', status: 'active', joinedAt: '2023-03-30', projects: 6 },
-    { id: '13', name: 'Mia Torres', email: 'mia@acme.com', role: 'Content Strategist', department: 'Marketing', status: 'offline', joinedAt: '2024-02-11', projects: 2 },
-    { id: '14', name: 'Chen Wei', email: 'chen@acme.com', role: 'Platform Engineer', department: 'Engineering', status: 'active', joinedAt: '2022-10-08', projects: 13 },
-    { id: '15', name: 'Ava Novak', email: 'ava@acme.com', role: 'Product Designer', department: 'Design', status: 'active', joinedAt: '2023-06-19', projects: 7 },
-    { id: '16', name: 'Liam Ortiz', email: 'liam@acme.com', role: 'QA Automation', department: 'Engineering', status: 'away', joinedAt: '2024-04-02', projects: 4 },
-    { id: '17', name: 'Sofia Petrova', email: 'sofia@acme.com', role: 'Data Engineer', department: 'Data', status: 'active', joinedAt: '2023-11-27', projects: 8 },
-    { id: '18', name: 'David Kim', email: 'david@acme.com', role: 'Solutions Architect', department: 'Infrastructure', status: 'active', joinedAt: '2022-05-16', projects: 10 },
-    { id: '19', name: 'Elena Marsh', email: 'elena@acme.com', role: 'Engineering Manager', department: 'Engineering', status: 'active', joinedAt: '2021-12-06', projects: 14 },
-    { id: '20', name: 'Noah Fischer', email: 'noah@acme.com', role: 'Support Lead', department: 'Support', status: 'offline', joinedAt: '2024-05-20', projects: 1 },
+  let query = $state('');
+  const rows: CrewMember[] = [
+    { id: '1', name: 'Alex Chen', email: 'alex@acme.com', role: 'Tech Lead', department: 'Engineering', status: 'active', projects: 12 },
+    { id: '2', name: 'Sarah Kim', email: 'sarah@acme.com', role: 'Senior Designer', department: 'Design', status: 'active', projects: 8 },
+    { id: '3', name: 'Mike Johnson', email: 'mike@acme.com', role: 'Product Manager', department: 'Product', status: 'away', projects: 6 },
+    { id: '4', name: 'Lisa Wang', email: 'lisa@acme.com', role: 'Backend Engineer', department: 'Engineering', status: 'active', projects: 10 },
+    { id: '5', name: 'Tom Brown', email: 'tom@acme.com', role: 'QA Engineer', department: 'Engineering', status: 'offline', projects: 4 },
+    { id: '6', name: 'Emma Davis', email: 'emma@acme.com', role: 'Engineering Manager', department: 'Engineering', status: 'active', projects: 15 },
   ];
-
-  const totalCrew = 34;
-
-  const filtered = $derived(
-    searchQuery
-      ? crew.filter(m => m.name.toLowerCase().includes(searchQuery.toLowerCase()) || m.email.toLowerCase().includes(searchQuery.toLowerCase()) || m.department.toLowerCase().includes(searchQuery.toLowerCase()))
-      : crew
-  );
-
-  const statusConfig = {
-    'active': { icon: CheckCircle2, color: 'text-green-500', dot: 'bg-green-500', label: i18n.t('account.active') },
-    'away': { icon: Clock, color: 'text-amber-500', dot: 'bg-amber-500', label: i18n.t('account.invited') },
-    'offline': { icon: XCircle, color: 'text-muted-foreground', dot: 'bg-muted-foreground', label: i18n.t('account.inactive') },
-  };
-
-  const initials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
-
-  function exportCrew() {
-    const rows = [
-      ['Name', 'Email', 'Role', 'Department', 'Status', 'Projects', 'Joined'],
-      ...filtered.map(member => [member.name, member.email, member.role, member.department, member.status, String(member.projects), member.joinedAt]),
-    ];
-    const csv = rows.map(row => row.map(value => `"${value.replaceAll('"', '""')}"`).join(',')).join('\n');
-    const url = URL.createObjectURL(new Blob([csv], { type: 'text/csv;charset=utf-8' }));
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = 'team-crew.csv';
-    link.click();
-    URL.revokeObjectURL(url);
-  }
+  const filtered = $derived(query ? rows.filter((row) => `${row.name} ${row.email} ${row.department}`.toLowerCase().includes(query.toLowerCase())) : rows);
+  const columns: NetworkColumn<CrewMember>[] = [{ key: 'name', label: i18n.t('account.member') }, { key: 'role', label: i18n.t('account.role') }, { key: 'department', label: i18n.t('account.department') }, { key: 'status', label: i18n.t('account.status') }, { key: 'projects', label: i18n.t('publicProfile.projects') }];
+  const initials = (name: string) => name.split(' ').map((part) => part[0]).join('').slice(0, 2).toUpperCase();
 </script>
 
-<div class="space-y-6" data-svadmin-content-page="network">
-  <div class="flex items-start justify-between gap-4">
-    <div>
-      <h2 class="text-xl font-semibold text-foreground">{i18n.t('network.teamCrew')}</h2>
-      <p class="mt-1 text-sm text-muted-foreground">{i18n.t('network.teamCrewDescription')}</p>
-    </div>
-    <div class="flex gap-2">
-      <Button variant="outline" size="sm" onclick={exportCrew}>
-        <Download class="h-3.5 w-3.5 mr-1" />{i18n.t('common.export')}
-      </Button>
-      <Button size="sm" onclick={() => adminContext.navigate('/account/members/team-members')}>
-        <UserPlus class="h-3.5 w-3.5 mr-1" />{i18n.t('account.inviteMember')}
-      </Button>
-    </div>
-  </div>
-
-  <div class="relative">
-    <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-    <Input placeholder={i18n.t('common.search')} bind:value={searchQuery} class="pl-9" />
-  </div>
-
-  <!-- Table -->
-  <Card.Card class="border-border/60">
-    <Card.CardContent class="p-0">
-      <div class="hidden overflow-x-auto lg:block">
-        <table class="w-full">
-          <thead>
-            <tr class="border-b bg-muted/30">
-              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{i18n.t('account.member')}</th>
-              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{i18n.t('account.role')}</th>
-              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{i18n.t('account.department')}</th>
-              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{i18n.t('account.status')}</th>
-              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{i18n.t('publicProfile.projects')}</th>
-              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{i18n.t('account.joined')}</th>
-              <th class="px-4 py-3 w-12"></th>
-            </tr>
-          </thead>
-          <tbody class="divide-y">
-            {#each filtered as member (member.id)}
-              {@const sc = statusConfig[member.status]}
-              <tr class="hover:bg-accent/30 transition-colors">
-                <td class="px-4 py-3">
-                  <div class="flex items-center gap-3">
-                    <div class="relative shrink-0">
-                      <div class="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-primary text-xs font-semibold">
-                        {initials(member.name)}
-                      </div>
-                      <span class="absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-full {sc.dot} ring-2 ring-card"></span>
-                    </div>
-                    <div class="min-w-0">
-                      <p class="text-sm font-medium text-foreground truncate">{member.name}</p>
-                      <p class="text-xs text-muted-foreground truncate">{member.email}</p>
-                    </div>
-                  </div>
-                </td>
-                <td class="px-4 py-3 text-sm text-foreground">{member.role}</td>
-                <td class="px-4 py-3 text-sm text-muted-foreground">{member.department}</td>
-                <td class="px-4 py-3">
-                  <span class="flex items-center gap-1 text-xs {sc.color}">
-                    <sc.icon class="h-3 w-3" />{sc.label}
-                  </span>
-                </td>
-                <td class="px-4 py-3 text-sm text-foreground">{member.projects}</td>
-                <td class="px-4 py-3 text-sm text-muted-foreground whitespace-nowrap">{member.joinedAt}</td>
-                <td class="px-4 py-3">
-                  <Button variant="ghost" size="icon-sm" aria-label={member.name} title={member.name}><MoreHorizontal class="h-4 w-4" /></Button>
-                </td>
-              </tr>
-            {/each}
-          </tbody>
-        </table>
-      </div>
-      <div class="divide-y lg:hidden">
-        {#each filtered as member (member.id)}
-          {@const sc = statusConfig[member.status]}
-          <div class="space-y-3 p-4">
-            <div class="flex items-start justify-between gap-3">
-              <div class="flex min-w-0 items-center gap-3">
-                <div class="relative shrink-0">
-                  <div class="flex h-9 w-9 items-center justify-center rounded-full bg-primary/10 text-sm font-semibold text-primary">
-                    {initials(member.name)}
-                  </div>
-                  <span class="absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-full {sc.dot} ring-2 ring-card"></span>
-                </div>
-                <div class="min-w-0">
-                  <p class="truncate text-sm font-medium text-foreground">{member.name}</p>
-                  <p class="truncate text-xs text-muted-foreground">{member.email}</p>
-                </div>
-              </div>
-              <Button variant="ghost" size="icon-sm" class="shrink-0" aria-label={member.name} title={member.name}><MoreHorizontal class="h-4 w-4" /></Button>
-            </div>
-            <div class="grid gap-2 text-xs text-muted-foreground sm:grid-cols-2">
-              <div class="min-w-0">
-                <span class="block font-medium text-foreground">{member.role}</span>
-                <span class="truncate">{member.department}</span>
-              </div>
-              <div class="flex items-center gap-1 {sc.color}">
-                <sc.icon class="h-3 w-3" />{sc.label}
-              </div>
-              <div>{i18n.t('publicProfile.projects')}: <span class="font-medium text-foreground">{member.projects}</span></div>
-              <div>{i18n.t('account.joined')}: <span class="font-medium text-foreground">{member.joinedAt}</span></div>
-            </div>
-          </div>
-        {/each}
-      </div>
-    </Card.CardContent>
-  </Card.Card>
+{#snippet row(item: CrewMember)}
+  <tr data-svadmin-table-row><td class="px-4 py-3"><div class="flex items-center gap-3"><Avatar fallback={initials(item.name)} alt={item.name} size="sm" /><div><p class="text-sm font-medium text-foreground">{item.name}</p><p class="text-xs text-muted-foreground">{item.email}</p></div></div></td><td class="px-4 py-3 text-sm">{item.role}</td><td class="px-4 py-3 text-sm text-muted-foreground">{item.department}</td><td class="px-4 py-3"><Badge variant="outline">{item.status}</Badge></td><td class="px-4 py-3 text-sm">{item.projects}</td></tr>
+{/snippet}
 
-  <p class="text-sm text-muted-foreground">{i18n.t('network.showingUsersOf', { shown: filtered.length, total: totalCrew })}</p>
-</div>
+<ContentPageShell pageId="network-team-crew" width="wide">
+  <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"><ContentPageHeader title={i18n.t('network.teamCrew')} description={i18n.t('network.teamCrewDescription')} /><div class="flex flex-wrap gap-2"><Button variant="outline" size="sm"><Download class="size-3.5" />{i18n.t('common.export')}</Button><Button size="sm"><UserPlus class="size-3.5" />{i18n.t('account.inviteMember')}</Button></div></div>
+  <FilterToolbar bind:query placeholder={i18n.t('common.search')} />
+  <NetworkTable rows={filtered} {columns} {row} />
+</ContentPageShell>

package/dist/components/network/UserCardsNFTPage.svelte

@@ -1,146 +1,33 @@
 <script lang="ts">
   import { useTranslation } from '@svadmin/core/i18n';
-  import * as Card from '../ui/card/index.js';
+  import { Check, Plus } from '@lucide/svelte';
   import { Button } from '../ui/button/index.js';
   import { Badge } from '../ui/badge/index.js';
-  import { Input } from '../ui/input/index.js';
-  import { Search, ExternalLink, Check, Plus } from '@lucide/svelte';
-  import nftCover01 from '../../assets/nft/nft-cover-01.jpg';
-  import nftCover02 from '../../assets/nft/nft-cover-02.jpg';
-  import nftCover03 from '../../assets/nft/nft-cover-03.jpg';
-  import nftCover04 from '../../assets/nft/nft-cover-04.jpg';
-  import nftCover05 from '../../assets/nft/nft-cover-05.jpg';
-  import nftCover06 from '../../assets/nft/nft-cover-06.jpg';
-  import nftCover07 from '../../assets/nft/nft-cover-07.jpg';
-  import nftCover08 from '../../assets/nft/nft-cover-08.jpg';
-  import nftCover09 from '../../assets/nft/nft-cover-09.jpg';
+  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 type { NetworkUser } from '../content/NetworkUserCard.svelte';
 
   const i18n = useTranslation();
-
-  interface NFTUser {
-    id: string;
-    name: string;
-    username: string;
-    artwork: string;
-    bio: string;
-    collectionCount: number;
-    floorPrice: string;
-    volume: string;
-    verified: boolean;
-    tags: string[];
-  }
-
-  let searchQuery = $state('');
-
-  const users: NFTUser[] = [
-    { id: '1', name: 'CryptoArt Studio', username: '@cryptoart', artwork: nftCover01, bio: 'Digital art collection featuring generative abstracts', collectionCount: 42, floorPrice: '0.5 ETH', volume: '128.3 ETH', verified: true, tags: ['Art', 'Generative'] },
-    { id: '2', name: 'PixelPunk Collective', username: '@pixelpunk', artwork: nftCover02, bio: 'On-chain pixel art characters with unique traits', collectionCount: 18, floorPrice: '1.2 ETH', volume: '342.7 ETH', verified: true, tags: ['PFP', 'Pixel'] },
-    { id: '3', name: 'MetaVerse Builders', username: '@metabuild', artwork: nftCover03, bio: '3D architectural models for virtual worlds', collectionCount: 7, floorPrice: '0.8 ETH', volume: '56.1 ETH', verified: false, tags: ['3D', 'Virtual'] },
-    { id: '4', name: 'SoundWave NFT', username: '@soundwave', artwork: nftCover04, bio: 'Music-backed NFTs with on-chain audio', collectionCount: 23, floorPrice: '0.3 ETH', volume: '89.4 ETH', verified: true, tags: ['Music', 'Audio'] },
-    { id: '5', name: 'GameAssets DAO', username: '@gameassets', artwork: nftCover05, bio: 'In-game items and collectibles for Web3 gaming', collectionCount: 156, floorPrice: '0.05 ETH', volume: '412.8 ETH', verified: true, tags: ['Gaming', 'Items'] },
-    { id: '6', name: 'PhotoVerse', username: '@photoverse', artwork: nftCover06, bio: 'Curated photography NFTs from world artists', collectionCount: 31, floorPrice: '0.15 ETH', volume: '67.2 ETH', verified: false, tags: ['Photo', 'Curated'] },
-    { id: '7', name: 'CryptoKicks', username: '@cryptokicks', artwork: nftCover07, bio: 'Limited-edition digital sneakers and wearables', collectionCount: 64, floorPrice: '0.4 ETH', volume: '156.9 ETH', verified: true, tags: ['Fashion', 'Wearables'] },
-    { id: '8', name: 'ChainChronicles', username: '@chainchron', artwork: nftCover08, bio: 'Story-driven collectible cards with on-chain lore', collectionCount: 88, floorPrice: '0.25 ETH', volume: '203.4 ETH', verified: false, tags: ['Cards', 'Story'] },
-    { id: '9', name: 'AIArtifacts', username: '@aiartifacts', artwork: nftCover09, bio: 'AI-generated sculptures minted as unique tokens', collectionCount: 12, floorPrice: '2.1 ETH', volume: '512.6 ETH', verified: true, tags: ['AI', '3D'] },
+  type NftUser = NetworkUser & { tags: string[]; collectionCount: number; floorPrice: string; volume: string; verified: boolean };
+  let query = $state('');
+  let connected = $state<string[]>([]);
+  const users: NftUser[] = [
+    { id: '1', name: 'CryptoArt Studio', handle: '@cryptoart', role: 'Generative art', summary: 'Digital art collection featuring generative abstracts', tags: ['Art', 'Generative'], collectionCount: 42, floorPrice: '0.5 ETH', volume: '128.3 ETH', verified: true },
+    { id: '2', name: 'PixelPunk Collective', handle: '@pixelpunk', role: 'On-chain studio', summary: 'Pixel art characters with unique traits', tags: ['PFP', 'Pixel'], collectionCount: 18, floorPrice: '1.2 ETH', volume: '342.7 ETH', verified: true },
+    { id: '3', name: 'MetaVerse Builders', handle: '@metabuild', role: '3D architecture', summary: 'Architectural models for virtual worlds', tags: ['3D', 'Virtual'], collectionCount: 7, floorPrice: '0.8 ETH', volume: '56.1 ETH', verified: false },
+    { id: '4', name: 'SoundWave NFT', handle: '@soundwave', role: 'Music studio', summary: 'Music-backed NFTs with on-chain audio', tags: ['Music', 'Audio'], collectionCount: 23, floorPrice: '0.3 ETH', volume: '89.4 ETH', verified: true },
+    { id: '5', name: 'GameAssets DAO', handle: '@gameassets', role: 'Gaming collective', summary: 'In-game items and collectibles for Web3 gaming', tags: ['Gaming', 'Items'], collectionCount: 156, floorPrice: '0.05 ETH', volume: '412.8 ETH', verified: true },
+    { id: '6', name: 'PhotoVerse', handle: '@photoverse', role: 'Photography', summary: 'Curated photography from world artists', tags: ['Photo', 'Curated'], collectionCount: 31, floorPrice: '0.15 ETH', volume: '67.2 ETH', verified: false },
   ];
-
-  const filtered = $derived(
-    searchQuery
-      ? users.filter(u => u.name.toLowerCase().includes(searchQuery.toLowerCase()) || u.username.toLowerCase().includes(searchQuery.toLowerCase()) || u.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase())))
-      : users
-  );
-
-  let connectedIds = $state<string[]>([]);
-
-  function toggleConnect(id: string) {
-    connectedIds = connectedIds.includes(id)
-      ? connectedIds.filter(connectedId => connectedId !== id)
-      : [...connectedIds, id];
-  }
-
-  function isConnected(id: string): boolean {
-    return connectedIds.includes(id);
-  }
+  const filtered = $derived(query ? users.filter((user) => `${user.name} ${user.handle} ${user.tags.join(' ')}`.toLowerCase().includes(query.toLowerCase())) : users);
+  function toggle(id: string) { connected = connected.includes(id) ? connected.filter((item) => item !== id) : [...connected, id]; }
 </script>
 
-<div class="space-y-6" data-svadmin-content-page="network">
-  <div>
-    <h2 class="text-xl font-semibold text-foreground">{i18n.t('network.userCards')}</h2>
-    <p class="mt-1 text-sm text-muted-foreground">{i18n.t('network.userCardsDescription')}</p>
-  </div>
-
-  <div class="relative">
-    <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-    <Input placeholder={i18n.t('common.search')} bind:value={searchQuery} class="pl-9" />
-  </div>
-
-  <p class="text-sm font-medium text-muted-foreground">{i18n.t('network.showingUsers', { count: filtered.length })}</p>
-
-  <div class="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-    {#each filtered as user (user.id)}
-      <Card.Card class="group overflow-hidden border-border/60 hover:border-primary/30 transition-colors">
-        <div class="h-28 overflow-hidden bg-muted">
-          <img src={user.artwork} alt="" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]" />
-        </div>
-        <Card.CardContent class="relative px-4 pb-4">
-          <div class="-mt-8 mb-2 flex items-end gap-3">
-            <div class="ring-3 ring-card rounded-xl overflow-hidden shrink-0">
-              <img src={user.artwork} alt="" class="h-14 w-14 object-cover" />
-            </div>
-            <div class="flex-1 min-w-0 pb-0.5">
-              <div class="flex items-center gap-1.5">
-                <h4 class="text-sm font-semibold text-foreground truncate">{user.name}</h4>
-                {#if user.verified}
-                  <Check class="h-3.5 w-3.5 text-blue-500" />
-                {/if}
-              </div>
-              <p class="text-xs text-muted-foreground">{user.username}</p>
-            </div>
-          </div>
-
-          <p class="text-xs text-muted-foreground line-clamp-2 mb-3">{user.bio}</p>
-
-          <div class="flex flex-wrap gap-1 mb-3">
-            {#each user.tags as tag (tag)}
-              <Badge variant="outline" class="text-[10px]">{tag}</Badge>
-            {/each}
-          </div>
-
-          <!-- NFT stats -->
-          <div class="grid grid-cols-3 gap-2 border-t pt-3">
-            <div class="text-center">
-              <div class="text-sm font-semibold text-foreground">{user.collectionCount}</div>
-              <div class="text-[10px] text-muted-foreground">{i18n.t('network.nftCollection')}</div>
-            </div>
-            <div class="text-center">
-              <div class="text-sm font-semibold text-foreground">{user.floorPrice}</div>
-              <div class="text-[10px] text-muted-foreground">{i18n.t('network.floorPrice')}</div>
-            </div>
-            <div class="text-center">
-              <div class="text-xs font-semibold text-foreground">{user.volume}</div>
-              <div class="text-[10px] text-muted-foreground">{i18n.t('network.volume')}</div>
-            </div>
-          </div>
-
-          <div class="mt-3 flex gap-2">
-            <Button
-              size="sm"
-              variant={isConnected(user.id) ? 'outline' : 'default'}
-              class="flex-1"
-              onclick={() => toggleConnect(user.id)}
-            >
-              {#if isConnected(user.id)}
-                <Check class="h-3.5 w-3.5 mr-1" />{i18n.t('network.connected')}
-              {:else}
-                <Plus class="h-3.5 w-3.5 mr-1" />{i18n.t('network.connect')}
-              {/if}
-            </Button>
-            <Button size="sm" variant="ghost" aria-label={i18n.t('common.detail')} title={i18n.t('common.detail')}>
-              <ExternalLink class="h-3.5 w-3.5" />
-            </Button>
-          </div>
-        </Card.CardContent>
-      </Card.Card>
-    {/each}
-  </div>
-</div>
+<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}
+</ContentPageShell>