@svadmin/ui 0.34.10 → 0.35.0

package/dist/components/account/SettingsPlainPage.svelte

@@ -0,0 +1,81 @@
+<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 { Label } from '../ui/label/index.js';
+  import { Switch } from '../ui/switch/index.js';
+  import { Separator } from '../ui/separator/index.js';
+  import { Loader2 } from '@lucide/svelte';
+
+  let displayName = $state('Alex Chen');
+  let email = $state('alex@example.com');
+  let emailNotifications = $state(true);
+  let pushNotifications = $state(true);
+  let twoFactor = $state(false);
+  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.settingsPlain')}</h2>
+    <p class="mt-1 text-sm text-muted-foreground">{t('account.settingsPlainDescription')}</p>
+  </div>
+
+  <Card.Card class="border-border/60">
+    <Card.CardHeader>
+      <Card.CardTitle class="text-base">{t('settings.general')}</Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent class="space-y-4">
+      <div class="grid gap-4 sm:grid-cols-2">
+        <div class="space-y-2">
+          <Label for="display-name">{t('profile.name')}</Label>
+          <Input id="display-name" bind:value={displayName} />
+        </div>
+        <div class="space-y-2">
+          <Label for="email">Email</Label>
+          <Input id="email" bind:value={email} type="email" />
+        </div>
+      </div>
+
+      <Separator />
+
+      <div class="flex items-center justify-between gap-4">
+        <div class="space-y-1">
+          <Label for="email-notif">{t('notifications.emailTitle')}</Label>
+          <p class="text-xs text-muted-foreground">{t('notifications.emailDescription')}</p>
+        </div>
+        <Switch id="email-notif" bind:checked={emailNotifications} />
+      </div>
+
+      <div class="flex items-center justify-between gap-4">
+        <div class="space-y-1">
+          <Label for="push-notif">{t('notifications.pushTitle')}</Label>
+          <p class="text-xs text-muted-foreground">{t('notifications.pushDescription')}</p>
+        </div>
+        <Switch id="push-notif" bind:checked={pushNotifications} />
+      </div>
+
+      <div class="flex items-center justify-between gap-4">
+        <div class="space-y-1">
+          <Label for="two-factor">{t('security.twoFactorAuth')}</Label>
+          <p class="text-xs text-muted-foreground">{t('security.twoFactorDescription')}</p>
+        </div>
+        <Switch id="two-factor" bind:checked={twoFactor} />
+      </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/SettingsPlainPage.svelte.d.ts

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

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

package/dist/components/profile/ActivityTimeline.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import * as Card from '../ui/card/index.js';
+  import { Avatar } from '../ui/avatar/index.js';
+  import { MessageSquare, Plus, UserPlus, Star } from '@lucide/svelte';
+  import type { Component } from 'svelte';
+
+  interface ActivityItem {
+    id: string;
+    type: 'posted' | 'commented' | 'joined' | 'created' | 'starred';
+    user: string;
+    avatar?: string;
+    content?: string;
+    target?: string;
+    timestamp: string;
+  }
+
+  interface Props {
+    activities?: ActivityItem[];
+  }
+
+  let { activities = [] }: Props = $props();
+
+  const typeConfig: Record<string, { icon: Component; color: string; action: string }> = {
+    'posted': { icon: MessageSquare, color: 'bg-blue-500/10 text-blue-500', action: t('publicProfile.activityPosted') },
+    'commented': { icon: MessageSquare, color: 'bg-green-500/10 text-green-500', action: t('publicProfile.activityCommented') },
+    'joined': { icon: UserPlus, color: 'bg-purple-500/10 text-purple-500', action: t('publicProfile.activityJoined') },
+    'created': { icon: Plus, color: 'bg-amber-500/10 text-amber-500', action: t('publicProfile.activityCreated') },
+    'starred': { icon: Star, color: 'bg-yellow-500/10 text-yellow-500', action: t('publicProfile.activityCreated') },
+  };
+</script>
+
+<div class="space-y-4">
+  <h3 class="text-lg font-semibold text-foreground">{t('publicProfile.activity')}</h3>
+
+  {#if activities.length === 0}
+    <div class="rounded-xl border border-dashed border-border/60 p-8 text-center">
+      <p class="text-sm text-muted-foreground">{t('publicProfile.noActivity')}</p>
+    </div>
+  {:else}
+    <Card.Card class="border-border/60">
+      <Card.CardContent class="p-0">
+        <div class="divide-y">
+          {#each activities as activity (activity.id)}
+            {@const config = typeConfig[activity.type] ?? typeConfig['posted']}
+            <div class="flex items-start gap-3 p-4">
+              <div class="shrink-0 mt-0.5">
+                {#if activity.avatar}
+                  <Avatar class="h-8 w-8">
+                    <img src={activity.avatar} alt={activity.user} />
+                  </Avatar>
+                {:else}
+                  <div class="flex h-8 w-8 items-center justify-center rounded-full {config.color}">
+                    <config.icon class="h-4 w-4" />
+                  </div>
+                {/if}
+              </div>
+              <div class="flex-1 min-w-0">
+                <p class="text-sm">
+                  <strong class="text-foreground">{activity.user}</strong>
+                  <span class="text-muted-foreground"> {config.action} </span>
+                  {#if activity.target}
+                    <strong class="text-foreground">{activity.target}</strong>
+                  {/if}
+                </p>
+                {#if activity.content}
+                  <p class="mt-1 text-sm text-muted-foreground line-clamp-2">{activity.content}</p>
+                {/if}
+                <p class="mt-1 text-xs text-muted-foreground/60">{activity.timestamp}</p>
+              </div>
+            </div>
+          {/each}
+        </div>
+      </Card.CardContent>
+    </Card.Card>
+  {/if}
+</div>

package/dist/components/profile/ActivityTimeline.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Component } from 'svelte';
+interface ActivityItem {
+    id: string;
+    type: 'posted' | 'commented' | 'joined' | 'created' | 'starred';
+    user: string;
+    avatar?: string;
+    content?: string;
+    target?: string;
+    timestamp: string;
+}
+interface Props {
+    activities?: ActivityItem[];
+}
+declare const ActivityTimeline: Component<Props, {}, "">;
+type ActivityTimeline = ReturnType<typeof ActivityTimeline>;
+export default ActivityTimeline;