@svadmin/ui 0.34.9 → 0.35.0

package/dist/components/account/SettingsSidebarPage.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import * as Card from '../ui/card/index.js';
+  import { Button } from '../ui/button/index.js';
+  import { Label } from '../ui/label/index.js';
+  import { Switch } from '../ui/switch/index.js';
+  import { Separator } from '../ui/separator/index.js';
+  import { Loader2, PanelLeft } from '@lucide/svelte';
+
+  let defaultCollapsed = $state(false);
+  let pinSidebar = $state(true);
+  let showLabels = $state(true);
+  let showIcons = $state(true);
+  let density = $state<'compact' | 'standard'>('standard');
+  let saving = $state(false);
+
+  async function handleSave() {
+    saving = true;
+    await new Promise(r => setTimeout(r, 800));
+    saving = false;
+  }
+</script>
+
+<div class="space-y-6">
+  <div>
+    <h2 class="text-xl font-semibold text-foreground">{t('account.settingsSidebar')}</h2>
+    <p class="mt-1 text-sm text-muted-foreground">{t('account.settingsSidebarDescription')}</p>
+  </div>
+
+  <Card.Card class="border-border/60">
+    <Card.CardHeader>
+      <Card.CardTitle class="flex items-center gap-2 text-base">
+        <PanelLeft class="h-4 w-4 text-muted-foreground" />
+        {t('account.settingsSidebar')}
+      </Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent class="space-y-4">
+      <div class="flex items-center justify-between gap-4">
+        <div class="space-y-1">
+          <Label for="default-collapsed">默认折叠</Label>
+          <p class="text-xs text-muted-foreground">启动时自动折叠侧边栏</p>
+        </div>
+        <Switch id="default-collapsed" bind:checked={defaultCollapsed} />
+      </div>
+
+      <Separator />
+
+      <div class="flex items-center justify-between gap-4">
+        <div class="space-y-1">
+          <Label for="pin-sidebar">{t('settings.general')}</Label>
+          <p class="text-xs text-muted-foreground">固定侧边栏，防止自动收起</p>
+        </div>
+        <Switch id="pin-sidebar" bind:checked={pinSidebar} />
+      </div>
+
+      <div class="flex items-center justify-between gap-4">
+        <div class="space-y-1">
+          <Label for="show-labels">显示标签文字</Label>
+          <p class="text-xs text-muted-foreground">在图标旁显示菜单项名称</p>
+        </div>
+        <Switch id="show-labels" bind:checked={showLabels} />
+      </div>
+
+      <div class="flex items-center justify-between gap-4">
+        <div class="space-y-1">
+          <Label for="show-icons">显示图标</Label>
+          <p class="text-xs text-muted-foreground">在标签旁显示菜单图标</p>
+        </div>
+        <Switch id="show-icons" bind:checked={showIcons} />
+      </div>
+
+      <Separator />
+
+      <div class="space-y-2">
+        <Label>{t('settings.sidebarDensity')}</Label>
+        <div class="flex rounded-lg border border-input overflow-hidden">
+          <button
+            class="flex-1 px-4 py-2 text-sm font-medium transition-colors
+              {density === 'compact' ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}"
+            onclick={() => density = 'compact'}
+          >{t('settings.compact')}</button>
+          <button
+            class="flex-1 px-4 py-2 text-sm font-medium transition-colors
+              {density === 'standard' ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}"
+            onclick={() => density = 'standard'}
+          >{t('settings.standard')}</button>
+        </div>
+      </div>
+
+      <div class="flex justify-end">
+        <Button onclick={handleSave} disabled={saving}>
+          {#if saving}<Loader2 class="h-4 w-4 animate-spin mr-2" />{/if}
+          {t('common.save')}
+        </Button>
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+</div>

package/dist/components/account/SettingsSidebarPage.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const SettingsSidebarPage: import("svelte").Component<Record<string, never>, {}, "">;
+type SettingsSidebarPage = ReturnType<typeof SettingsSidebarPage>;
+export default SettingsSidebarPage;

package/dist/components/account/TeamMembersPage.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import * as Card from '../ui/card/index.js';
+  import { Button } from '../ui/button/index.js';
+  import { Input } from '../ui/input/index.js';
+  import { Search, UserPlus, MoreHorizontal } from '@lucide/svelte';
+
+  interface TeamMember {
+    id: string;
+    name: string;
+    email: string;
+    role: 'Admin' | 'Editor' | 'Viewer';
+    avatar?: string;
+    department: string;
+    status: 'active' | 'invited' | 'inactive';
+    lastActive: string;
+  }
+
+  let searchQuery = $state('');
+
+  let members = $state<TeamMember[]>([
+    { id: '1', name: 'Alex Chen', email: 'alex@acme.com', role: 'Admin', department: 'Engineering', status: 'active', lastActive: 'Just now' },
+    { id: '2', name: 'Sarah Kim', email: 'sarah@acme.com', role: 'Editor', department: 'Design', status: 'active', lastActive: '5 min ago' },
+    { id: '3', name: 'Mike Johnson', email: 'mike@acme.com', role: 'Viewer', department: 'Marketing', status: 'invited', lastActive: 'Pending' },
+    { id: '4', name: 'Lisa Wang', email: 'lisa@acme.com', role: 'Editor', department: 'Engineering', status: 'active', lastActive: '1 hour ago' },
+    { id: '5', name: 'Tom Brown', email: 'tom@acme.com', role: 'Viewer', department: 'Sales', status: 'inactive', lastActive: '2 weeks ago' },
+    { id: '6', name: 'Emma Davis', email: 'emma@acme.com', role: 'Admin', department: 'Engineering', status: 'active', lastActive: '10 min ago' },
+  ]);
+
+  const filtered = $derived(
+    searchQuery
+      ? members.filter(m => m.name.toLowerCase().includes(searchQuery.toLowerCase()) || m.email.toLowerCase().includes(searchQuery.toLowerCase()) || m.department.toLowerCase().includes(searchQuery.toLowerCase()))
+      : members
+  );
+
+  const roleColors = {
+    'Admin': 'bg-red-500/10 text-red-600',
+    'Editor': 'bg-blue-500/10 text-blue-600',
+    'Viewer': 'bg-green-500/10 text-green-600',
+  };
+
+  const statusColors = {
+    'active': 'bg-green-500/10 text-green-600',
+    'invited': 'bg-amber-500/10 text-amber-600',
+    'inactive': 'bg-muted text-muted-foreground',
+  };
+
+  const initials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+</script>
+
+<div class="space-y-6">
+  <div class="flex items-start justify-between gap-4">
+    <div>
+      <h2 class="text-xl font-semibold text-foreground">{t('account.membersStarter')}</h2>
+      <p class="mt-1 text-sm text-muted-foreground">{t('account.membersStarterDescription')}</p>
+    </div>
+    <Button size="sm">
+      <UserPlus class="h-4 w-4 mr-1" />{t('account.inviteMember')}
+    </Button>
+  </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={t('common.search')} bind:value={searchQuery} class="pl-9" />
+  </div>
+
+  <!-- Members grid -->
+  <div class="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+    {#each filtered as member (member.id)}
+      <Card.Card class="border-border/60 hover:border-primary/30 transition-colors">
+        <Card.CardContent class="p-4">
+          <div class="flex items-start gap-3">
+            <div class="shrink-0">
+              <div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary text-sm font-semibold">
+                {initials(member.name)}
+              </div>
+            </div>
+            <div class="flex-1 min-w-0">
+              <div class="flex items-center gap-2">
+                <h4 class="text-sm font-semibold text-foreground truncate">{member.name}</h4>
+              </div>
+              <p class="text-xs text-muted-foreground truncate">{member.email}</p>
+              <div class="mt-2 flex flex-wrap gap-1.5">
+                <span class="rounded-full px-2 py-0.5 text-[10px] font-semibold {roleColors[member.role]}">{member.role}</span>
+                <span class="rounded-full px-2 py-0.5 text-[10px] font-semibold {statusColors[member.status]}">{member.status}</span>
+              </div>
+              <div class="mt-2 flex items-center justify-between">
+                <span class="text-xs text-muted-foreground">{member.department}</span>
+                <span class="text-xs text-muted-foreground">{member.lastActive}</span>
+              </div>
+            </div>
+            <Button variant="ghost" size="icon-sm"><MoreHorizontal class="h-4 w-4" /></Button>
+          </div>
+        </Card.CardContent>
+      </Card.Card>
+    {/each}
+  </div>
+</div>

package/dist/components/account/TeamMembersPage.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const TeamMembersPage: import("svelte").Component<Record<string, never>, {}, "">;
+type TeamMembersPage = ReturnType<typeof TeamMembersPage>;
+export default TeamMembersPage;

package/dist/components/buttons/ImportButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { useImport, useCan, t, type UseImportOptions } from '@svadmin/core';
+  import { useImport, useCan, t } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Upload } from '@lucide/svelte';
 

package/dist/components/buttons/ListButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { useNavigation, t } from '@svadmin/core';
+  import { useNavigation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { List } from '@lucide/svelte';
 

package/dist/components/charts/BarChart.svelte

@@ -24,7 +24,7 @@
 <div class="w-full overflow-x-auto {className}">
   <svg viewBox="0 0 {totalWidth} {height + 30}" class="w-full" style="min-width: {Math.min(totalWidth, 300)}px;">
     <!-- Bars -->
-    {#each data as point, i}
+    {#each data as point, i (i)}
       {@const barHeight = (point.value / maxValue) * (height - 20)}
       {@const x = 20 + i * (barWidth + gap)}
       {@const y = height - barHeight}

package/dist/components/charts/LineChart.svelte

@@ -46,7 +46,7 @@
 <div class="w-full overflow-x-auto {className}">
   <svg viewBox="0 0 {chartWidth} {height}" class="w-full" style="min-width: {Math.min(chartWidth, 300)}px;">
     <!-- Grid lines -->
-    {#each [0, 0.25, 0.5, 0.75, 1] as ratio}
+    {#each [0, 0.25, 0.5, 0.75, 1] as ratio, _i (_i)}
       {@const y = padding.top + chartHeight * (1 - ratio)}
       <line
         x1={padding.left}
@@ -88,7 +88,7 @@
 
     <!-- Dots -->
     {#if showDots}
-      {#each data as point, i}
+      {#each data as point, i (i)}
         <circle
           cx={getX(i)}
           cy={getY(point.value)}
@@ -102,7 +102,7 @@
     {/if}
 
     <!-- X-axis labels -->
-    {#each data as point, i}
+    {#each data as point, i (i)}
       <text
         x={getX(i)}
         y={height - 4}

package/dist/components/charts/PieChart.svelte

@@ -59,7 +59,7 @@
 
 <div class="inline-flex flex-col items-center gap-3 {className}">
   <svg viewBox="0 0 {size} {size}" width={size} height={size}>
-    {#each slices as slice, i}
+    {#each slices as slice, i (i)}
       <path
         d={getArcPath(slice.startAngle, slice.endAngle, radius, innerRadius)}
         fill={slice.color}
@@ -84,7 +84,7 @@
 
   <!-- Legend -->
   <div class="flex flex-wrap justify-center gap-x-4 gap-y-1">
-    {#each slices as slice}
+    {#each slices as slice, _i (_i)}
       <div class="flex items-center gap-1.5 text-xs">
         <span class="h-2.5 w-2.5 rounded-full" style="background-color: {slice.color};"></span>
         <span class="text-muted-foreground">{slice.label}</span>

package/dist/components/fieldComponentMap.js

@@ -1,9 +1,10 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 // Shared field type → display component mapping
 // Used by both ShowPage and FieldRenderer to avoid duplicate if/else chains.
 // Components are lazily resolved by field type at runtime.
 // Default display component map (read-only field display)
 // Dynamically imports components only when first used
-const displayCache = new Map();
+const _displayCache = new Map();
 // Pre-import all field display components (tree-shaken by bundler)
 import BooleanField from './fields/BooleanField.svelte';
 import ImageField from './fields/ImageField.svelte';

package/dist/components/fields/ArrayField.svelte

@@ -59,7 +59,7 @@
   </div>
   
   <div class="space-y-4 pt-2">
-    {#each arrayVal as item, i}
+    {#each arrayVal as item, i (i)}
       <div class="relative rounded-md border bg-card p-4 pt-6 shadow-sm">
         <div class="absolute right-2 top-2">
           <TooltipButton tooltip={t('common.remove') || 'Remove'} variant="ghost" size="icon" class="h-8 w-8 text-muted-foreground hover:text-destructive transition-colors" onclick={() => handleRemove(i)}>

package/dist/components/fields/MarkdownField.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+/* eslint-disable svelte/no-at-html-tags */
   import * as DOMPurifyPkg from "isomorphic-dompurify";
   interface Props { value: string | null | undefined }
   let { value }: Props = $props();

package/dist/components/fields/MultiSelectField.svelte

@@ -11,7 +11,7 @@
 
 {#if items.length > 0}
   <div class="flex flex-wrap gap-1">
-    {#each items as v}
+    {#each items as v, _i (_i)}
       {@const label = options?.find((o: { label: string; value: string | number }) => o.value === v)?.label ?? String(v)}
       <Badge variant="secondary" class="font-normal">{label}</Badge>
     {/each}

package/dist/components/fields/TagField.svelte

@@ -5,7 +5,7 @@
   const tags = $derived(Array.isArray(value) ? value : value ? [value] : []);
 </script>
 <span class="inline-flex flex-wrap gap-1">
-  {#each tags as tag}
+  {#each tags as tag, _i (_i)}
     <Badge variant="secondary">{tag}</Badge>
   {/each}
   {#if tags.length === 0}<span class="text-muted-foreground">—</span>{/if}

package/dist/components/network/TeamCrewTablePage.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import * as Card from '../ui/card/index.js';
+  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';
+
+  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 },
+  ];
+
+  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: t('account.active') },
+    'away': { icon: Clock, color: 'text-amber-500', dot: 'bg-amber-500', label: t('account.invited') },
+    'offline': { icon: XCircle, color: 'text-muted-foreground', dot: 'bg-muted-foreground', label: t('account.inactive') },
+  };
+
+  const initials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+</script>
+
+<div class="space-y-6">
+  <div class="flex items-start justify-between gap-4">
+    <div>
+      <h2 class="text-xl font-semibold text-foreground">{t('network.teamCrew')}</h2>
+      <p class="mt-1 text-sm text-muted-foreground">{t('network.teamCrewDescription')}</p>
+    </div>
+    <div class="flex gap-2">
+      <Button variant="outline" size="sm">
+        <Download class="h-3.5 w-3.5 mr-1" />{t('common.export')}
+      </Button>
+      <Button size="sm">
+        <UserPlus class="h-3.5 w-3.5 mr-1" />{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={t('common.search')} bind:value={searchQuery} class="pl-9" />
+  </div>
+
+  <!-- Table -->
+  <Card.Card class="border-border/60">
+    <Card.CardContent class="p-0">
+      <div class="overflow-x-auto">
+        <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">{t('account.member')}</th>
+              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{t('account.role')}</th>
+              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">Department</th>
+              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{t('account.status')}</th>
+              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{t('publicProfile.projects')}</th>
+              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{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"><MoreHorizontal class="h-4 w-4" /></Button>
+                </td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+</div>

package/dist/components/network/TeamCrewTablePage.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const TeamCrewTablePage: import("svelte").Component<Record<string, never>, {}, "">;
+type TeamCrewTablePage = ReturnType<typeof TeamCrewTablePage>;
+export default TeamCrewTablePage;

package/dist/components/network/UserCardsNFTPage.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import * as Card from '../ui/card/index.js';
+  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';
+
+  interface NFTUser {
+    id: string;
+    name: string;
+    username: string;
+    avatar?: 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', 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', 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', 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', 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', 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', bio: 'Curated photography NFTs from world artists', collectionCount: 31, floorPrice: '0.15 ETH', volume: '67.2 ETH', verified: false, tags: ['Photo', 'Curated'] },
+  ];
+
+  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
+  );
+
+  const initials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+
+  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);
+  }
+</script>
+
+<div class="space-y-6">
+  <div>
+    <h2 class="text-xl font-semibold text-foreground">{t('network.userCards')}</h2>
+    <p class="mt-1 text-sm text-muted-foreground">{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={t('common.search')} bind:value={searchQuery} class="pl-9" />
+  </div>
+
+  <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="overflow-hidden border-border/60 hover:border-primary/30 transition-colors">
+        <div class="h-20 bg-gradient-to-r from-violet-500/20 via-purple-500/15 to-fuchsia-500/20 relative">
+          <div class="absolute inset-0 opacity-[0.08]" style="background-image: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 16px 16px;"></div>
+        </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">
+              <div class="flex h-14 w-14 items-center justify-center bg-primary/10 text-primary font-bold">
+                {initials(user.name)}
+              </div>
+            </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">{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">{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">{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" />{t('network.connected')}
+              {:else}
+                <Plus class="h-3.5 w-3.5 mr-1" />{t('network.connect')}
+              {/if}
+            </Button>
+            <Button size="sm" variant="ghost">
+              <ExternalLink class="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        </Card.CardContent>
+      </Card.Card>
+    {/each}
+  </div>
+</div>

package/dist/components/network/UserCardsNFTPage.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const UserCardsNFTPage: import("svelte").Component<Record<string, never>, {}, "">;
+type UserCardsNFTPage = ReturnType<typeof UserCardsNFTPage>;
+export default UserCardsNFTPage;