@svadmin/ui 0.42.3 → 0.43.0

package/dist/components/profile/ActivityTimeline.svelte

@@ -1,101 +1,27 @@
 <script lang="ts">
   import { useTranslation } from '@svadmin/core/i18n';
-  import * as Card from '../ui/card/index.js';
+  import { MessageSquare, Plus, Star, UserPlus } from '@lucide/svelte';
   import { Avatar } from '../ui/avatar/index.js';
-  import { MessageSquare, Plus, UserPlus, Star } from '@lucide/svelte';
+  import { Button } from '../ui/button/index.js';
+  import { DataState, SectionHeader } from '../content/index.js';
+  import * as Card from '../ui/card/index.js';
   import type { Component } from 'svelte';
 
-  const i18n = useTranslation();
-
-  interface ActivityItem {
-    id: string;
-    type: 'posted' | 'commented' | 'joined' | 'created' | 'starred';
-    user: string;
-    avatar?: string;
-    content?: string;
-    target?: string;
-    timestamp: string;
-  }
-
-  interface Props {
-    activities?: ActivityItem[];
-    showAutoRefresh?: boolean;
-  }
-
+  interface ActivityItem { id: string; type: 'posted' | 'commented' | 'joined' | 'created' | 'starred'; user: string; avatar?: string; content?: string; target?: string; timestamp: string; }
+  interface Props { activities?: ActivityItem[]; showAutoRefresh?: boolean; }
   let { activities = [], showAutoRefresh = true }: Props = $props();
-
   let autoRefresh = $state(false);
-
-  const typeConfig: Record<string, { icon: Component; color: string; action: string }> = {
-    'posted': { icon: MessageSquare, color: 'bg-blue-500/10 text-blue-500', action: i18n.t('publicProfile.activityPosted') },
-    'commented': { icon: MessageSquare, color: 'bg-green-500/10 text-green-500', action: i18n.t('publicProfile.activityCommented') },
-    'joined': { icon: UserPlus, color: 'bg-purple-500/10 text-purple-500', action: i18n.t('publicProfile.activityJoined') },
-    'created': { icon: Plus, color: 'bg-amber-500/10 text-amber-500', action: i18n.t('publicProfile.activityCreated') },
-    'starred': { icon: Star, color: 'bg-yellow-500/10 text-yellow-500', action: i18n.t('publicProfile.activityCreated') },
+  const i18n = useTranslation();
+  const config: Record<string, { icon: Component; tone: string; action: string }> = {
+    posted: { icon: MessageSquare, tone: 'bg-primary/10 text-primary', action: i18n.t('publicProfile.activityPosted') },
+    commented: { icon: MessageSquare, tone: 'bg-success/10 text-success', action: i18n.t('publicProfile.activityCommented') },
+    joined: { icon: UserPlus, tone: 'bg-muted text-muted-foreground', action: i18n.t('publicProfile.activityJoined') },
+    created: { icon: Plus, tone: 'bg-warning/10 text-warning-foreground', action: i18n.t('publicProfile.activityCreated') },
+    starred: { icon: Star, tone: 'bg-primary/10 text-primary', action: i18n.t('publicProfile.activityCreated') },
   };
 </script>
 
-<div class="space-y-4">
-  <div class="flex items-center justify-between gap-3">
-    <h3 class="text-lg font-semibold text-foreground">{i18n.t('publicProfile.activity')}</h3>
-    {#if showAutoRefresh}
-      <div class="flex items-center gap-2 text-xs text-muted-foreground">
-        <span>{i18n.t('publicProfile.autoRefresh')}:</span>
-        <div class="flex rounded-md border border-border/60 p-0.5">
-          <button
-            type="button"
-            class="rounded px-2 py-0.5 text-xs font-medium transition-colors {autoRefresh ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'}"
-            onclick={() => autoRefresh = true}
-          >{i18n.t('common.on')}</button>
-          <button
-            type="button"
-            class="rounded px-2 py-0.5 text-xs font-medium transition-colors {autoRefresh ? 'text-muted-foreground hover:text-foreground' : 'bg-primary text-primary-foreground'}"
-            onclick={() => autoRefresh = false}
-          >{i18n.t('common.off')}</button>
-        </div>
-      </div>
-    {/if}
-  </div>
-
-  {#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">{i18n.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>
+<section class="space-y-4">
+  <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"><SectionHeader title={i18n.t("publicProfile.activity")} />{#if showAutoRefresh}<div class="flex items-center gap-1 rounded-md border border-border p-1"><Button size="sm" variant={autoRefresh ? "default" : "ghost"} onclick={() => autoRefresh = true}>{i18n.t("common.on")}</Button><Button size="sm" variant={!autoRefresh ? "default" : "ghost"} onclick={() => autoRefresh = false}>{i18n.t("common.off")}</Button></div>{/if}</div>
+  {#if activities.length === 0}<DataState state="empty" title={i18n.t('publicProfile.noActivity')} />{:else}<Card.Card><Card.CardContent class="p-0"><div class="divide-y divide-border">{#each activities as activity (activity.id)}{@const item = config[activity.type] ?? config.posted}<div class="flex items-start gap-3 p-4">{#if activity.avatar}<Avatar src={activity.avatar} alt={activity.user} size="sm" />{:else}<span class={'flex size-8 shrink-0 items-center justify-center rounded-full ' + item.tone}><item.icon class="size-4" /></span>{/if}<div class="min-w-0 flex-1"><p class="text-sm"><strong class="text-foreground">{activity.user}</strong><span class="text-muted-foreground"> {item.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">{activity.content}</p>{/if}<p class="mt-1 text-xs text-muted-foreground">{activity.timestamp}</p></div></div>{/each}</div></Card.CardContent></Card.Card>{/if}
+</section>

package/dist/components/profile/ProfileCard.svelte

@@ -69,24 +69,24 @@
 
 <Card.Card class="overflow-hidden border-border/60">
   {#if coverImage}
-    <div class="h-32 bg-gradient-to-r from-primary/20 via-primary/10 to-accent/20 relative">
+    <div class="h-32 bg-muted relative">
       <img src={coverImage} alt="" class="h-full w-full object-cover" />
     </div>
   {:else}
-    <div class="h-32 bg-gradient-to-r from-primary/20 via-primary/10 to-accent/20 relative">
+    <div class="h-32 bg-muted relative">
       <div class="absolute inset-0 opacity-[0.06]" style="background-image: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 20px 20px;"></div>
     </div>
   {/if}
 
   <Card.CardContent class="relative px-5 pb-5">
     <div class="-mt-10 mb-3 flex items-end gap-4">
-      <div class="ring-4 ring-card rounded-xl overflow-hidden shrink-0">
+      <div class="ring-4 ring-card rounded-lg overflow-hidden shrink-0">
         {#if avatar}
           <Avatar class="h-20 w-20">
             <img src={avatar} alt={name} />
           </Avatar>
         {:else}
-          <div class="flex h-20 w-20 items-center justify-center rounded-xl bg-primary/10 text-primary text-2xl font-bold">
+          <div class="flex h-20 w-20 items-center justify-center rounded-lg bg-primary/10 text-primary text-2xl font-bold">
             {initials}
           </div>
         {/if}

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,52 @@
 <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);
+  const i18n = useTranslation();
 
-  // 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 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 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="public-profile" width="wide">
+  <ContentPageHeader title={profileData.name} eyebrow={i18n.t('publicProfile.title')} description={profileData.tagline} />
+  <ProfileCard {...profileData} {variant} />
   {#if showSections}
     <ProfileVariantSections {variant} />
   {: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.Root value={activeTab} onValueChange={(value) => activeTab = value as ProfileTab}>
+      <Tabs.List class="w-full justify-start overflow-x-auto">
+        <Tabs.Trigger value="projects">{i18n.t('publicProfile.projects')}</Tabs.Trigger>
+        <Tabs.Trigger value="activity">{i18n.t('publicProfile.activity')}</Tabs.Trigger>
+        <Tabs.Trigger value="teams">{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.Content value="projects" class="mt-5"><ProjectsGrid {projects} {columns} /></Tabs.Content>
+      <Tabs.Content value="activity" class="mt-5"><ActivityTimeline activities={activities} /></Tabs.Content>
+      <Tabs.Content value="teams" class="mt-5"><TeamsShowcase {teams} /></Tabs.Content>
     </Tabs.Root>
   {/if}
-</div>
+</ContentPageShell>