@svadmin/ui 0.42.3 → 0.44.0

package/dist/components/profile/ProjectsGrid.svelte

@@ -1,123 +1,45 @@
 <script lang="ts">
   import { useTranslation } from '@svadmin/core/i18n';
-  import * as Card from '../ui/card/index.js';
-  import { Badge } from '../ui/badge/index.js';
   import { Button } from '../ui/button/index.js';
-  import { Input } from '../ui/input/index.js';
-  import { Users, CheckCircle2, ArrowRight, Search, Plus, FolderKanban } from '@lucide/svelte';
-  import Progress from '../ui/progress/progress.svelte';
-
-  const i18n = useTranslation();
-
-  interface Project {
-    id: string;
-    name: string;
-    description: string;
-    members: number;
-    tasks: number;
-    status: 'active' | 'completed' | 'on-hold';
-    tags?: string[];
-    image?: string;
-    progress?: number;
-  }
+  import { DataState, FilterToolbar, ProjectCard } from '../content/index.js';
+  import type { ProjectSummary } from '../content/ProjectCard.svelte';
 
   interface Props {
     columns?: 2 | 3;
-    projects?: Project[];
+    projects?: ProjectSummary[];
   }
 
-  let {
-    columns = 2,
-    projects = [],
-  }: Props = $props();
-
-  let searchQuery = $state('');
-  const filtered = $derived(
-    searchQuery
-      ? projects.filter(p => p.name.toLowerCase().includes(searchQuery.toLowerCase()) || p.description.toLowerCase().includes(searchQuery.toLowerCase()) || p.tags?.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase())))
-      : projects
-  );
-
-  const statusConfig = {
-    'active': { color: 'bg-green-500/10 text-green-600', label: 'Active' },
-    'completed': { color: 'bg-blue-500/10 text-blue-600', label: 'Completed' },
-    'on-hold': { color: 'bg-amber-500/10 text-amber-600', label: 'On Hold' },
-  };
-
-  const gridCols = $derived(columns === 3 ? 'lg:grid-cols-3' : 'lg:grid-cols-2');
+  const i18n = useTranslation();
+  let { columns = 2, projects = [] }: Props = $props();
+  let query = $state('');
+  const filtered = $derived.by(() => {
+    const needle = query.trim().toLowerCase();
+    if (!needle) return projects;
+    return projects.filter((project) => [project.name, project.description, ...(project.tags ?? [])]
+      .filter(Boolean)
+      .some((value) => String(value).toLowerCase().includes(needle)));
+  });
+  const gridClass = $derived(columns === 3 ? 'md:grid-cols-2 xl:grid-cols-3' : 'md:grid-cols-2');
 </script>
 
-<div class="space-y-4">
-  <div class="flex flex-wrap items-center justify-between gap-3">
-    <h3 class="text-lg font-semibold text-foreground">
-      {i18n.t('publicProfile.projectsCount', { count: filtered.length })}
-    </h3>
-    <div class="flex w-full items-center gap-2 sm:w-auto">
-      <div class="relative min-w-0 flex-1 sm:flex-none">
-        <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-        <Input placeholder={i18n.t('publicProfile.searchProjects')} bind:value={searchQuery} class="w-full pl-9 sm:w-48" />
-      </div>
-      <Button size="sm"><Plus class="h-3.5 w-3.5 mr-1" />{i18n.t('common.create')}</Button>
+<section class="space-y-4" data-svadmin-profile-projects>
+  <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+    <div>
+      <h2 class="text-base font-semibold text-foreground">{i18n.t('publicProfile.projectsCount', { count: filtered.length })}</h2>
+      <p class="mt-1 text-sm text-muted-foreground">{i18n.t('publicProfile.searchProjects')}</p>
     </div>
+    <Button size="sm">{i18n.t('common.create')}</Button>
   </div>
-
-  {#if filtered.length === 0}
-    <div class="rounded-xl border border-dashed border-border/60 p-8 text-center">
-      <p class="text-sm text-muted-foreground">{i18n.t('publicProfile.noProjects')}</p>
-    </div>
+  <FilterToolbar bind:query placeholder={i18n.t('publicProfile.searchProjects')} />
+  {#if projects.length === 0}
+    <DataState state="empty" title={i18n.t('publicProfile.noProjects')} />
+  {:else if filtered.length === 0}
+    <DataState state="empty" title={i18n.t('publicProfile.noProjects')} description={i18n.t('publicProfile.searchProjects')} />
   {:else}
-    <div class="grid gap-4 sm:grid-cols-1 md:grid-cols-2 {gridCols}">
+    <div class={'grid gap-4 ' + gridClass}>
       {#each filtered as project (project.id)}
-        {@const progress = project.progress ?? (project.status === 'completed' ? 100 : project.status === 'active' ? 72 : 38)}
-        <Card.Card class="group overflow-hidden border-border/60 hover:border-primary/30 transition-colors">
-          {#if project.image}
-            <div class="h-32 overflow-hidden">
-              <img src={project.image} alt={project.name} class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-300" />
-            </div>
-          {/if}
-          <Card.CardContent class="p-4 space-y-3">
-            <div class="flex items-start justify-between gap-2">
-              <div class="flex min-w-0 items-center gap-3">
-                <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md border bg-muted/40 text-muted-foreground">
-                  <FolderKanban class="h-4 w-4" />
-                </span>
-                <h4 class="font-semibold text-foreground">{project.name}</h4>
-              </div>
-              <span class="shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold {statusConfig[project.status].color}">
-                {statusConfig[project.status].label}
-              </span>
-            </div>
-
-            <p class="text-sm text-muted-foreground line-clamp-2">{project.description}</p>
-
-            {#if project.tags && project.tags.length > 0}
-              <div class="flex flex-wrap gap-1">
-                {#each project.tags as tag (tag)}
-                  <Badge variant="outline" class="text-[10px]">{tag}</Badge>
-                {/each}
-              </div>
-            {/if}
-
-            <div class="space-y-1.5">
-              <div class="flex items-center justify-between text-[11px] text-muted-foreground">
-                <span>{i18n.t('common.progress')}</span>
-                <span class="font-medium text-foreground">{progress}%</span>
-              </div>
-              <Progress value={progress} class="h-1.5" />
-            </div>
-
-            <div class="flex items-center justify-between pt-2 border-t">
-              <div class="flex items-center gap-3 text-xs text-muted-foreground">
-                <span class="flex items-center gap-1"><Users class="h-3 w-3" />{i18n.t('publicProfile.projectMembers', { count: project.members })}</span>
-                <span class="flex items-center gap-1"><CheckCircle2 class="h-3 w-3" />{i18n.t('publicProfile.projectTasks', { count: project.tasks })}</span>
-              </div>
-              <Button variant="ghost" size="icon-sm" aria-label={project.name} title={project.name}>
-                <ArrowRight class="h-3.5 w-3.5" />
-              </Button>
-            </div>
-          </Card.CardContent>
-        </Card.Card>
+        <ProjectCard {project} />
       {/each}
     </div>
   {/if}
-</div>
+</section>

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

@@ -1,17 +1,7 @@
-interface Project {
-    id: string;
-    name: string;
-    description: string;
-    members: number;
-    tasks: number;
-    status: 'active' | 'completed' | 'on-hold';
-    tags?: string[];
-    image?: string;
-    progress?: number;
-}
+import type { ProjectSummary } from '../content/ProjectCard.svelte';
 interface Props {
     columns?: 2 | 3;
-    projects?: Project[];
+    projects?: ProjectSummary[];
 }
 declare const ProjectsGrid: import("svelte").Component<Props, {}, "">;
 type ProjectsGrid = ReturnType<typeof ProjectsGrid>;

package/dist/components/profile/PublicProfilePage.svelte

@@ -1,202 +1,50 @@
 <script lang="ts">
   import { useTranslation } 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 * as Tabs from '../ui/tabs/index.js';
+  import ProfileCard from './ProfileCard.svelte';
   import ProjectsGrid from './ProjectsGrid.svelte';
   import ActivityTimeline from './ActivityTimeline.svelte';
   import TeamsShowcase from './TeamsShowcase.svelte';
   import ProfileVariantSections from './ProfileVariantSections.svelte';
-  import { MapPin, Link, Calendar, MoreHorizontal } from '@lucide/svelte';
-
-  const i18n = useTranslation();
+  import ContentPageShell from '../content/ContentPageShell.svelte';
+  import ContentPageHeader from '../content/ContentPageHeader.svelte';
+  import { referenceDemoData } from '../../reference-data.js';
 
   type ProfileVariant = 'default' | 'company' | 'gamer';
   type ProfileTab = 'projects' | 'activity' | 'teams';
-
-  interface Props {
-    variant?: ProfileVariant;
-    initialTab?: ProfileTab;
-    columns?: 2 | 3;
-    showSections?: boolean;
-  }
-
+  interface Props { variant?: ProfileVariant; initialTab?: ProfileTab; columns?: 2 | 3; showSections?: boolean; }
   let { variant = 'default', initialTab = 'projects', columns = 2, showSections = false }: Props = $props();
-  let activeTab = $derived<ProfileTab>(initialTab);
-
-  // Demo profile data based on variant
-  const profileData = $derived.by(() => {
-    if (variant === 'company') {
-      return {
-        name: 'Acme Corporation',
-        tagline: 'Building the future of enterprise software',
-        industry: 'Technology',
-        employees: 1250,
-        founded: '2015',
-        website: 'acme.com',
-        location: 'San Francisco, CA',
-        followers: 8420,
-        following: 312,
-        stats: [
-          { label: i18n.t('profile.employees'), value: '1,250' },
-          { label: i18n.t('publicProfile.projects'), value: '48' },
-          { label: i18n.t('publicProfile.teams'), value: '12' },
-        ],
-        tags: ['SaaS', 'Enterprise', 'Cloud', 'AI'],
-      };
-    } else if (variant === 'gamer') {
-      return {
-        name: 'ShadowFox',
-        tagline: 'Pro gamer & content creator',
-        gamerTag: 'ShadowFox#7742',
-        level: 42,
-        rank: 'Diamond II',
-        location: 'Seoul, KR',
-        followers: 24600,
-        following: 180,
-        stats: [
-          { label: i18n.t('profile.gamesPlayed'), value: '1,284' },
-          { label: i18n.t('profile.winRate'), value: '68%' },
-          { label: i18n.t('profile.rank'), value: 'Diamond II' },
-        ],
-        tags: ['FPS', 'RPG', 'Streaming', 'Esports'],
-      };
-    }
-    return {
-      name: 'Alex Chen',
-      tagline: 'Full-stack developer & open source enthusiast',
-      location: 'Shanghai, CN',
-      website: 'alexchen.dev',
-      joinedDate: '2023',
-      followers: 1234,
-      following: 567,
-      stats: [
-        { label: i18n.t('publicProfile.projects'), value: '24' },
-        { label: i18n.t('publicProfile.followers'), value: '1.2K' },
-        { label: i18n.t('publicProfile.following'), value: '567' },
-      ],
-      tags: ['TypeScript', 'Svelte', 'Node.js', 'Open Source'],
-    };
-  });
-
-  // Demo data
-  const demoProjects = [
-    { id: '1', name: 'Dashboard Redesign', description: 'Modern admin dashboard with real-time analytics and customizable widgets.', members: 8, tasks: 34, status: 'active' as const, tags: ['UI', 'Analytics'] },
-    { id: '2', name: 'API Gateway v2', description: 'High-performance API gateway with rate limiting and circuit breaker patterns.', members: 5, tasks: 21, status: 'active' as const, tags: ['Backend', 'Infra'] },
-    { id: '3', name: 'Mobile App', description: 'Cross-platform mobile application built with React Native.', members: 12, tasks: 56, status: 'completed' as const, tags: ['Mobile', 'React'] },
-    { id: '4', name: 'Data Pipeline', description: 'Real-time data processing pipeline for event streaming.', members: 3, tasks: 18, status: 'on-hold' as const, tags: ['Data', 'Streaming'] },
-    { id: '5', name: 'Design System 2.0', description: 'Unified component library with tokens, theming, and accessibility built in.', members: 6, tasks: 42, status: 'active' as const, tags: ['Design', 'UI'] },
-    { id: '6', name: 'Billing Platform', description: 'Subscription billing with usage-based metering and invoicing.', members: 4, tasks: 27, status: 'active' as const, tags: ['Fintech', 'Backend'] },
-    { id: '7', name: 'Search Relevance', description: 'Ranking improvements and vector search for the product catalog.', members: 5, tasks: 19, status: 'on-hold' as const, tags: ['Search', 'ML'] },
-    { id: '8', name: 'Customer Portal', description: 'Self-service portal for account management and support tickets.', members: 9, tasks: 63, status: 'active' as const, tags: ['Web', 'Support'] },
-    { id: '9', name: 'Notification Hub', description: 'Multi-channel notification delivery with user preference controls.', members: 3, tasks: 15, status: 'completed' as const, tags: ['Infra', 'Messaging'] },
-    { id: '10', name: 'Analytics SDK', description: 'Lightweight event tracking SDK for web and mobile clients.', members: 4, tasks: 22, status: 'active' as const, tags: ['Analytics', 'SDK'] },
-    { id: '11', name: 'Docs Revamp', description: 'New documentation site with interactive examples and search.', members: 2, tasks: 31, status: 'completed' as const, tags: ['Docs', 'Content'] },
-    { id: '12', name: 'Edge Cache Layer', description: 'Distributed caching layer to cut origin latency for global users.', members: 5, tasks: 17, status: 'on-hold' as const, tags: ['Infra', 'Performance'] },
-  ];
-
-  const demoActivities = [
-    { id: '1', type: 'posted' as const, user: 'Alex Chen', content: 'Just shipped the new dashboard redesign with real-time analytics support.', timestamp: '2 hours ago' },
-    { id: '2', type: 'commented' as const, user: 'Alex Chen', target: 'API Gateway PR #42', content: 'Looks great, just a few minor suggestions on error handling.', timestamp: '5 hours ago' },
-    { id: '3', type: 'created' as const, user: 'Alex Chen', target: 'Mobile App project', timestamp: '1 day ago' },
-    { id: '4', type: 'joined' as const, user: 'Alex Chen', target: 'Design Systems Guild', timestamp: '3 days ago' },
-    { id: '5', type: 'starred' as const, user: 'Alex Chen', target: 'svadmin/svadmin', timestamp: '1 week ago' },
-  ];
-
-  const demoTeams = [
-    { id: '1', name: 'Frontend Platform', description: 'Building the core UI component library and design system.', members: [{ name: 'Alice' }, { name: 'Bob' }, { name: 'Carol' }], totalMembers: 8, rating: 4.8, color: '#3b82f6' },
-    { id: '2', name: 'Backend Services', description: 'API development, microservices architecture, and infrastructure.', members: [{ name: 'Dave' }, { name: 'Eve' }], totalMembers: 5, rating: 4.5, color: '#10b981' },
-    { id: '3', name: 'Design', description: 'User experience research and visual design.', members: [{ name: 'Frank' }, { name: 'Grace' }, { name: 'Hank' }, { name: 'Ivy' }], totalMembers: 6, rating: 4.9, color: '#f59e0b' },
-    { id: '4', name: 'DevOps', description: 'CI/CD pipelines, cloud infrastructure, and reliability engineering.', members: [{ name: 'Jack' }, { name: 'Karen' }], totalMembers: 4, rating: 4.3, color: '#8b5cf6' },
-    { id: '5', name: 'Data Engineering', description: 'Data pipelines, warehousing, and analytics infrastructure.', members: [{ name: 'Leo' }, { name: 'Mona' }, { name: 'Nina' }], totalMembers: 7, rating: 4.6, color: '#ec4899' },
-    { id: '6', name: 'Mobile', description: 'iOS and Android apps with shared native modules.', members: [{ name: 'Oscar' }, { name: 'Paula' }], totalMembers: 5, rating: 4.4, color: '#14b8a6' },
-    { id: '7', name: 'QA & Release', description: 'Test automation, release management, and quality gates.', members: [{ name: 'Quinn' }, { name: 'Rosa' }, { name: 'Sam' }], totalMembers: 4, rating: 4.2, color: '#f97316' },
-    { id: '8', name: 'Security', description: 'Application security, compliance, and incident response.', members: [{ name: 'Tina' }, { name: 'Umar' }], totalMembers: 3, rating: 4.7, color: '#ef4444' },
-    { id: '9', name: 'Developer Relations', description: 'Documentation, community programs, and developer outreach.', members: [{ name: 'Vera' }, { name: 'Will' }, { name: 'Xu' }], totalMembers: 6, rating: 4.5, color: '#0ea5e9' },
-  ];
+  const i18n = useTranslation();
+  const columnLabel = $derived(i18n.locale === 'zh-CN' ? '栏' : 'columns');
+  const pageId = $derived(showSections ? `public-profile-${variant}` : `public-profile-${initialTab}-${initialTab === 'projects' ? columns : 'view'}`);
+
+  const profileData = $derived.by(() => variant === 'company'
+    ? { name: 'Acme Corporation', tagline: 'Building the future of enterprise software', industry: 'Technology', employees: 1250, founded: '2015', website: 'acme.com', location: 'San Francisco, CA', followers: 8420, following: 312, tags: ['SaaS', 'Enterprise', 'Cloud'], stats: [{ label: i18n.t('profile.employees'), value: '1,250' }, { label: i18n.t('publicProfile.projects'), value: '48' }, { label: i18n.t('publicProfile.teams'), value: '12' }] }
+    : variant === 'gamer'
+      ? { name: 'ShadowFox', tagline: 'Pro gamer & content creator', gamerTag: 'ShadowFox#7742', level: 42, rank: 'Diamond II', location: 'Seoul, KR', followers: 24600, following: 180, tags: ['FPS', 'RPG', 'Streaming'], stats: [{ label: i18n.t('profile.gamesPlayed'), value: '1,284' }, { label: i18n.t('profile.winRate'), value: '68%' }, { label: i18n.t('profile.rank'), value: 'Diamond II' }] }
+      : { name: 'Alex Chen', tagline: 'Full-stack developer & open source enthusiast', location: 'Shanghai, CN', website: 'alexchen.dev', joinedDate: '2023', followers: 1234, following: 567, tags: ['TypeScript', 'Svelte', 'Open Source'], stats: [{ label: i18n.t('publicProfile.projects'), value: '24' }, { label: i18n.t('publicProfile.followers'), value: '1.2K' }, { label: i18n.t('publicProfile.following'), value: '567' }] });
+
+  const projects = referenceDemoData.projects;
+  const visibleProjects = $derived(columns === 2 ? projects.slice(0, 6) : projects);
+  const activities = $derived.by(() => [
+    { id: '1', type: 'posted' as const, user: profileData.name, content: 'Shipped the new dashboard redesign with real-time analytics support.', timestamp: '2 hours ago' },
+    { id: '2', type: 'commented' as const, user: profileData.name, target: 'API Gateway PR #42', content: 'Looks great, with a few minor suggestions on error handling.', timestamp: '5 hours ago' },
+    { id: '3', type: 'created' as const, user: profileData.name, target: 'Mobile App project', timestamp: '1 day ago' },
+  ]);
+  const teams = referenceDemoData.teams;
 </script>
 
-<div class="space-y-6" data-svadmin-content-page="public-profile">
-  <!-- Cover + Profile Header -->
-  <Card.Card class="overflow-hidden border-border/60">
-    <div class="h-28 bg-gradient-to-r from-primary/25 via-primary/15 to-accent/20 relative sm:h-40">
-      <div class="absolute inset-0 opacity-[0.06]" style="background-image: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 24px 24px;"></div>
-    </div>
-    <Card.CardContent class="relative px-6 pb-5">
-      <div class="-mt-10 flex flex-col gap-3 sm:-mt-12 sm:flex-row sm:items-end sm:gap-4">
-        <div class="ring-4 ring-card rounded-2xl overflow-hidden shrink-0">
-          <div class="flex h-20 w-20 items-center justify-center bg-primary/10 text-2xl font-bold text-primary sm:h-24 sm:w-24 sm:text-3xl">
-            {profileData.name.split(' ').map(n => n[0]).join('').slice(0, 2)}
-          </div>
-        </div>
-        <div class="flex-1 min-w-0">
-          <h2 class="text-xl font-bold text-foreground sm:text-2xl">{profileData.name}</h2>
-          {#if profileData.tagline}
-            <p class="text-muted-foreground">{profileData.tagline}</p>
-          {/if}
-          <div class="mt-2 flex flex-wrap gap-3 text-sm text-muted-foreground">
-            {#if profileData.location}
-              <span class="flex items-center gap-1"><MapPin class="h-3.5 w-3.5" />{profileData.location}</span>
-            {/if}
-            {#if profileData.website}
-              <span class="flex items-center gap-1"><Link class="h-3.5 w-3.5" />{profileData.website}</span>
-            {/if}
-            {#if 'joinedDate' in profileData && profileData.joinedDate}
-              <span class="flex items-center gap-1"><Calendar class="h-3.5 w-3.5" />{i18n.t('publicProfile.joinedDate', { date: profileData.joinedDate })}</span>
-            {/if}
-          </div>
-        </div>
-        <div class="flex shrink-0 flex-wrap gap-2">
-          <Button size="sm">{i18n.t('publicProfile.editProfile')}</Button>
-          <Button size="sm" variant="outline">{i18n.t('publicProfile.sendMessage')}</Button>
-          <Button size="sm" variant="ghost"><MoreHorizontal class="h-4 w-4" /></Button>
-        </div>
-      </div>
-
-      <!-- Stats -->
-      {#if profileData.stats.length > 0}
-        <div class="mt-4 grid grid-cols-3 gap-4 border-t pt-4">
-          {#each profileData.stats as stat (stat.label)}
-            <div class="text-center">
-              <div class="text-xl font-bold text-foreground">{stat.value}</div>
-              <div class="text-xs text-muted-foreground">{stat.label}</div>
-            </div>
-          {/each}
-        </div>
-      {/if}
-
-      <!-- Tags -->
-      {#if profileData.tags.length > 0}
-        <div class="mt-3 flex flex-wrap gap-1.5">
-          {#each profileData.tags as tag (tag)}
-            <Badge variant="outline" class="text-xs">{tag}</Badge>
-          {/each}
-        </div>
-      {/if}
-    </Card.CardContent>
-  </Card.Card>
-
-  <!-- Variant-specific sections (About / Projects table / Jobs / Games ...) -->
+<ContentPageShell {pageId} width="wide">
+  <ContentPageHeader title={profileData.name} eyebrow={i18n.t('publicProfile.title')} description={profileData.tagline} />
   {#if showSections}
-    <ProfileVariantSections {variant} />
+    <div class="grid gap-6 xl:grid-cols-[20rem_minmax(0,1fr)]"><ProfileCard {...profileData} {variant} /><ProfileVariantSections {variant} /></div>
+  {:else if initialTab === 'projects'}
+    <div class="flex flex-wrap items-center justify-between gap-3 border-y border-border py-3"><div class="flex items-center gap-2"><Badge variant="outline">{columns} {columnLabel}</Badge><span class="text-sm text-muted-foreground">{visibleProjects.length} {i18n.t('publicProfile.projects')}</span></div><div class="flex gap-3 text-sm"><a class="text-primary" href="#/public-profile/projects/2-columns">2 {columnLabel}</a><a class="text-primary" href="#/public-profile/projects/3-columns">3 {columnLabel}</a></div></div>
+    <div class={columns === 2 ? 'grid gap-6 xl:grid-cols-[20rem_minmax(0,1fr)]' : 'space-y-5'}>{#if columns === 2}<ProfileCard {...profileData} {variant} />{/if}<ProjectsGrid projects={visibleProjects} {columns} /></div>
+  {:else if initialTab === 'activity'}
+    <div class="grid gap-6 xl:grid-cols-[20rem_minmax(0,1fr)]"><ProfileCard {...profileData} {variant} /><div class="space-y-4"><div class="flex items-center justify-between border-b border-border pb-3"><h2 class="text-base font-semibold text-foreground">{i18n.t('publicProfile.activity')}</h2><Badge variant="outline">{activities.length}</Badge></div><ActivityTimeline activities={activities} /></div></div>
   {:else}
-    <!-- Tabs: Projects / Activity / Teams -->
-    <Tabs.Root value={activeTab}>
-      <Tabs.List class="w-full justify-start border-b">
-        <Tabs.Trigger value="projects" active={activeTab === 'projects'} onclick={() => activeTab = 'projects'} class="gap-1.5">{i18n.t('publicProfile.projects')}</Tabs.Trigger>
-        <Tabs.Trigger value="activity" active={activeTab === 'activity'} onclick={() => activeTab = 'activity'} class="gap-1.5">{i18n.t('publicProfile.activity')}</Tabs.Trigger>
-        <Tabs.Trigger value="teams" active={activeTab === 'teams'} onclick={() => activeTab = 'teams'} class="gap-1.5">{i18n.t('publicProfile.teams')}</Tabs.Trigger>
-      </Tabs.List>
-      <Tabs.Content value="projects" active={activeTab === 'projects'} class="mt-4">
-        <ProjectsGrid {columns} projects={columns === 3 ? demoProjects : demoProjects.slice(0, 6)} />
-      </Tabs.Content>
-      <Tabs.Content value="activity" active={activeTab === 'activity'} class="mt-4">
-        <ActivityTimeline activities={demoActivities} />
-      </Tabs.Content>
-      <Tabs.Content value="teams" active={activeTab === 'teams'} class="mt-4">
-        <TeamsShowcase teams={demoTeams} />
-      </Tabs.Content>
-    </Tabs.Root>
+    <div class="grid gap-4 sm:grid-cols-3">{#each profileData.stats as stat (stat.label)}<div class="border-l-2 border-primary pl-3"><p class="text-sm text-muted-foreground">{stat.label}</p><p class="mt-1 text-xl font-semibold text-foreground">{stat.value}</p></div>{/each}</div>
+    <div class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_20rem]"><TeamsShowcase {teams} /><ProfileCard {...profileData} {variant} /></div>
   {/if}
-</div>
+</ContentPageShell>

package/dist/components/profile/TeamsShowcase.svelte

@@ -1,119 +1,17 @@
 <script lang="ts">
   import { useTranslation } from '@svadmin/core/i18n';
-  import * as Card from '../ui/card/index.js';
-  import { Button } from '../ui/button/index.js';
-  import { Avatar } from '../ui/avatar/index.js';
-  import { Input } from '../ui/input/index.js';
-  import { Users, ArrowRight, Search, Star } from '@lucide/svelte';
-
-  const i18n = useTranslation();
-
-  interface TeamMember {
-    name: string;
-    avatar?: string;
-    role?: string;
-  }
-
-  interface Team {
-    id: string;
-    name: string;
-    description: string;
-    members: TeamMember[];
-    totalMembers: number;
-    color?: string;
-    rating?: number;
-  }
-
-  interface Props {
-    teams?: Team[];
-  }
-
+  import { DataState, FilterToolbar, TeamCard } from '../content/index.js';
+  import type { TeamSummary } from '../content/TeamCard.svelte';
+  interface Team extends TeamSummary { description: string; }
+  interface Props { teams?: Team[]; }
   let { teams = [] }: Props = $props();
-
-  let searchQuery = $state('');
-  const filtered = $derived(
-    searchQuery
-      ? teams.filter(t => t.name.toLowerCase().includes(searchQuery.toLowerCase()) || t.description.toLowerCase().includes(searchQuery.toLowerCase()))
-      : teams
-  );
-
-  const initials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+  let query = $state('');
+  const i18n = useTranslation();
+  const filtered = $derived(query ? teams.filter((team) => `${team.name} ${team.description}`.toLowerCase().includes(query.toLowerCase())) : teams);
 </script>
 
-<div class="space-y-4">
-  <div class="flex flex-wrap items-center justify-between gap-3">
-    <h3 class="text-lg font-semibold text-foreground">{i18n.t('publicProfile.teamsCount', { count: filtered.length })}</h3>
-    <div class="relative">
-      <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-      <Input placeholder={i18n.t('publicProfile.searchTeams')} bind:value={searchQuery} class="w-48 pl-9" />
-    </div>
-  </div>
-
-  {#if filtered.length === 0}
-    <div class="rounded-xl border border-dashed border-border/60 p-8 text-center">
-      <p class="text-sm text-muted-foreground">{i18n.t('publicProfile.noTeams')}</p>
-    </div>
-  {:else}
-    <div class="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-      {#each filtered as team (team.id)}
-        <Card.Card class="border-border/60 hover:border-primary/30 transition-colors">
-          <Card.CardContent class="p-4 space-y-3">
-            <div class="flex items-start justify-between gap-2">
-              <div class="flex items-center gap-3">
-                {#if team.color}
-                  <div class="h-8 w-8 rounded-lg" style="background-color: {team.color}20;">
-                    <Users class="h-4 w-4" style="color: {team.color}" />
-                  </div>
-                {:else}
-                  <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 text-primary">
-                    <Users class="h-4 w-4" />
-                  </div>
-                {/if}
-                <div>
-                  <h4 class="font-semibold text-foreground">{team.name}</h4>
-                  <p class="text-xs text-muted-foreground">{i18n.t('publicProfile.projectMembers', { count: team.totalMembers })}</p>
-                </div>
-              </div>
-              {#if team.rating}
-                <span class="flex shrink-0 items-center gap-1 text-xs font-semibold text-amber-500">
-                  <Star class="h-3.5 w-3.5 fill-amber-400 text-amber-400" />{team.rating}
-                </span>
-              {/if}
-            </div>
-
-            <p class="text-sm text-muted-foreground line-clamp-2">{team.description}</p>
-
-            <!-- Member avatars -->
-            <div class="flex items-center gap-1">
-              {#each team.members.slice(0, 5) as member (member.name)}
-                {#if member.avatar}
-                  <Avatar class="h-7 w-7 ring-1 ring-background">
-                    <img src={member.avatar} alt={member.name} />
-                  </Avatar>
-                {:else}
-                  <div class="flex h-7 w-7 items-center justify-center rounded-full bg-muted text-[10px] font-semibold text-muted-foreground ring-1 ring-background">
-                    {initials(member.name)}
-                  </div>
-                {/if}
-              {/each}
-              {#if team.members.length > 5}
-                <div class="flex h-7 w-7 items-center justify-center rounded-full bg-muted text-[10px] font-semibold text-muted-foreground ring-1 ring-background">
-                  +{team.members.length - 5}
-                </div>
-              {/if}
-            </div>
-
-            <div class="flex gap-2 pt-2 border-t">
-              <Button variant="outline" size="sm" class="flex-1">
-                {i18n.t('publicProfile.join')}
-              </Button>
-              <Button variant="ghost" size="sm" class="flex-1">
-                {i18n.t('publicProfile.viewProfile')} <ArrowRight class="h-3.5 w-3.5 ml-1" />
-              </Button>
-            </div>
-          </Card.CardContent>
-        </Card.Card>
-      {/each}
-    </div>
-  {/if}
-</div>
+<section class="space-y-4">
+  <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"><div><h2 class="text-base font-semibold text-foreground">{i18n.t('publicProfile.teamsCount', { count: filtered.length })}</h2><p class="mt-1 text-sm text-muted-foreground">{i18n.t('publicProfile.searchTeams')}</p></div></div>
+  <FilterToolbar bind:query placeholder={i18n.t('publicProfile.searchTeams')} />
+  {#if filtered.length === 0}<DataState state="empty" title={i18n.t('publicProfile.noTeams')} />{:else}<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">{#each filtered as team (team.id)}<TeamCard {team} />{/each}</div>{/if}
+</section>

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

@@ -1,16 +1,6 @@
-interface TeamMember {
-    name: string;
-    avatar?: string;
-    role?: string;
-}
-interface Team {
-    id: string;
-    name: string;
+import type { TeamSummary } from '../content/TeamCard.svelte';
+interface Team extends TeamSummary {
     description: string;
-    members: TeamMember[];
-    totalMembers: number;
-    color?: string;
-    rating?: number;
 }
 interface Props {
     teams?: Team[];

package/dist/index.d.ts

@@ -151,3 +151,39 @@ export { default as TeamMembersPage } from './components/account/TeamMembersPage
 export { default as UserCardsNFTPage } from './components/network/UserCardsNFTPage.svelte';
 export { default as TeamCrewTablePage } from './components/network/TeamCrewTablePage.svelte';
 export { default as TwoFactorAuthPage } from './components/TwoFactorAuthPage.svelte';
+export { default as ContentPageShell } from './components/content/ContentPageShell.svelte';
+export { default as ContentPageHeader } from './components/content/ContentPageHeader.svelte';
+export { default as SectionHeader } from './components/content/SectionHeader.svelte';
+export { default as PageToolbar } from './components/content/PageToolbar.svelte';
+export { default as MetricBlock } from './components/content/MetricBlock.svelte';
+export { default as DescriptionList } from './components/content/DescriptionList.svelte';
+export type { DescriptionItem } from './components/content/DescriptionList.svelte';
+export { default as StatusBadge } from './components/content/StatusBadge.svelte';
+export type { Status } from './components/content/StatusBadge.svelte';
+export { default as FilterToolbar } from './components/content/FilterToolbar.svelte';
+export { default as DataState } from './components/content/DataState.svelte';
+export type { DataStateKind } from './components/content/DataState.svelte';
+export { default as ProjectCard } from './components/content/ProjectCard.svelte';
+export type { ProjectSummary, ProjectStatus } from './components/content/ProjectCard.svelte';
+export { default as TeamCard } from './components/content/TeamCard.svelte';
+export type { TeamSummary } from './components/content/TeamCard.svelte';
+export { default as FileList } from './components/content/FileList.svelte';
+export type { FileItem } from './components/content/FileList.svelte';
+export { default as IntegrationCard } from './components/content/IntegrationCard.svelte';
+export type { IntegrationSummary } from './components/content/IntegrationCard.svelte';
+export { default as ApiKeyList } from './components/content/ApiKeyList.svelte';
+export type { ApiKeySummary } from './components/content/ApiKeyList.svelte';
+export { default as SecurityEventTable } from './components/content/SecurityEventTable.svelte';
+export type { SecurityEvent } from './components/content/SecurityEventTable.svelte';
+export { default as MemberList } from './components/content/MemberList.svelte';
+export type { MemberSummary } from './components/content/MemberList.svelte';
+export { default as ImportDropzone } from './components/content/ImportDropzone.svelte';
+export { default as NetworkUserCard } from './components/content/NetworkUserCard.svelte';
+export type { NetworkUser } from './components/content/NetworkUserCard.svelte';
+export { default as NetworkTable } from './components/content/NetworkTable.svelte';
+export type { NetworkColumn } from './components/content/NetworkTable.types.js';
+export { default as OtpInput } from './components/content/OtpInput.svelte';
+export { default as TwoFactorStepper } from './components/content/TwoFactorStepper.svelte';
+export { default as SystemErrorState } from './components/content/SystemErrorState.svelte';
+export { referenceDemoData } from './reference-data.js';
+export type { DemoMember, DemoProject, DemoTeam, DemoIntegration, DemoApiKey, DemoSecurityEvent, DemoNotification } from './reference-data.js';