@svadmin/ui 0.34.9 → 0.35.0

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;

package/dist/components/profile/ProfileCard.svelte

@@ -0,0 +1,216 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { Button } from '../ui/button/index.js';
+  import { Badge } from '../ui/badge/index.js';
+  import * as Card from '../ui/card/index.js';
+  import { Avatar } from '../ui/avatar/index.js';
+  import { MapPin, Link, Calendar, Users, Star, Trophy, Building2, Gamepad2 } from '@lucide/svelte';
+
+  interface ProfileStats {
+    label: string;
+    value: string | number;
+  }
+
+  interface Props {
+    variant?: 'default' | 'company' | 'gamer';
+    name: string;
+    tagline?: string;
+    avatar?: string;
+    coverImage?: string;
+    location?: string;
+    website?: string;
+    joinedDate?: string;
+    stats?: ProfileStats[];
+    tags?: string[];
+    followers?: number;
+    following?: number;
+    // Company-specific
+    industry?: string;
+    employees?: number;
+    founded?: string;
+    // Gamer-specific
+    gamerTag?: string;
+    level?: number;
+    rank?: string;
+  }
+
+  let {
+    variant = 'default',
+    name,
+    tagline = '',
+    avatar,
+    coverImage,
+    location,
+    website,
+    joinedDate,
+    stats = [],
+    tags = [],
+    followers = 0,
+    following = 0,
+    industry,
+    employees,
+    founded,
+    gamerTag,
+    level,
+    rank,
+  }: Props = $props();
+
+  const initials = $derived(name ? name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2) : '?');
+  const statsGridClass = $derived(stats.length > 3 ? 'grid-cols-4' : stats.length === 3 ? 'grid-cols-3' : stats.length === 2 ? 'grid-cols-2' : 'grid-cols-1');
+
+  let isConnected = $state(false);
+
+  function toggleConnect() {
+    isConnected = !isConnected;
+  }
+</script>
+
+<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">
+      <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="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">
+        {#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">
+            {initials}
+          </div>
+        {/if}
+      </div>
+      <div class="flex-1 min-w-0 pb-1">
+        <div class="flex items-center gap-2">
+          <h3 class="text-lg font-semibold text-foreground truncate">{name}</h3>
+          {#if variant === 'company'}
+            <Badge variant="secondary" class="shrink-0"><Building2 class="h-3 w-3 mr-1" />{t('profile.company')}</Badge>
+          {:else if variant === 'gamer'}
+            <Badge variant="secondary" class="shrink-0"><Gamepad2 class="h-3 w-3 mr-1" />{t('profile.gamer')}</Badge>
+          {/if}
+        </div>
+        {#if tagline}
+          <p class="text-sm text-muted-foreground truncate">{tagline}</p>
+        {/if}
+      </div>
+    </div>
+
+    <!-- Variant-specific info -->
+    {#if variant === 'company' && (industry || employees || founded)}
+      <div class="mb-3 grid grid-cols-2 gap-2 text-sm">
+        {#if industry}
+          <div class="flex items-center gap-2 text-muted-foreground">
+            <Building2 class="h-3.5 w-3.5" />
+            <span>{industry}</span>
+          </div>
+        {/if}
+        {#if employees}
+          <div class="flex items-center gap-2 text-muted-foreground">
+            <Users class="h-3.5 w-3.5" />
+            <span>{employees} {t('profile.employees')}</span>
+          </div>
+        {/if}
+        {#if founded}
+          <div class="flex items-center gap-2 text-muted-foreground">
+            <Calendar class="h-3.5 w-3.5" />
+            <span>{t('profile.founded')} {founded}</span>
+          </div>
+        {/if}
+        {#if website}
+          <div class="flex items-center gap-2 text-muted-foreground">
+            <Link class="h-3.5 w-3.5" />
+            <span class="truncate">{website}</span>
+          </div>
+        {/if}
+      </div>
+    {:else if variant === 'gamer' && (gamerTag || level || rank)}
+      <div class="mb-3 grid grid-cols-2 gap-2 text-sm">
+        {#if gamerTag}
+          <div class="flex items-center gap-2 text-muted-foreground">
+            <Gamepad2 class="h-3.5 w-3.5" />
+            <span>{gamerTag}</span>
+          </div>
+        {/if}
+        {#if level}
+          <div class="flex items-center gap-2 text-muted-foreground">
+            <Star class="h-3.5 w-3.5" />
+            <span>{t('profile.level')} {level}</span>
+          </div>
+        {/if}
+        {#if rank}
+          <div class="flex items-center gap-2 text-muted-foreground">
+            <Trophy class="h-3.5 w-3.5" />
+            <span>{rank}</span>
+          </div>
+        {/if}
+      </div>
+    {:else}
+      <!-- Default profile info -->
+      <div class="mb-3 flex flex-wrap gap-3 text-sm text-muted-foreground">
+        {#if location}
+          <div class="flex items-center gap-1.5"><MapPin class="h-3.5 w-3.5" /><span>{location}</span></div>
+        {/if}
+        {#if website}
+          <div class="flex items-center gap-1.5"><Link class="h-3.5 w-3.5" /><span class="truncate">{website}</span></div>
+        {/if}
+        {#if joinedDate}
+          <div class="flex items-center gap-1.5"><Calendar class="h-3.5 w-3.5" /><span>{t('publicProfile.joinedDate', { date: joinedDate })}</span></div>
+        {/if}
+      </div>
+    {/if}
+
+    <!-- Tags -->
+    {#if tags.length > 0}
+      <div class="mb-3 flex flex-wrap gap-1.5">
+        {#each tags as tag (tag)}
+          <Badge variant="outline" class="text-xs">{tag}</Badge>
+        {/each}
+      </div>
+    {/if}
+
+    <!-- Stats -->
+    {#if stats.length > 0}
+      <div class="mb-3 grid {statsGridClass} gap-3 border-t pt-3">
+        {#each stats as stat (stat.label)}
+          <div class="text-center">
+            <div class="text-lg font-semibold text-foreground">{stat.value}</div>
+            <div class="text-xs text-muted-foreground">{stat.label}</div>
+          </div>
+        {/each}
+      </div>
+    {/if}
+
+    <!-- Followers / Following -->
+    {#if followers > 0 || following > 0}
+      <div class="flex gap-4 text-sm border-t pt-3">
+        {#if followers > 0}
+          <span><strong class="text-foreground">{followers}</strong> <span class="text-muted-foreground">{t('publicProfile.followers')}</span></span>
+        {/if}
+        {#if following > 0}
+          <span><strong class="text-foreground">{following}</strong> <span class="text-muted-foreground">{t('publicProfile.following')}</span></span>
+        {/if}
+      </div>
+    {/if}
+
+    <!-- Actions -->
+    <div class="mt-3 flex gap-2">
+      <Button
+        size="sm"
+        variant={isConnected ? 'outline' : 'default'}
+        onclick={toggleConnect}
+      >
+        {isConnected ? t('network.connected') : t('network.connect')}
+      </Button>
+      <Button size="sm" variant="outline">{t('publicProfile.sendMessage')}</Button>
+    </div>
+  </Card.CardContent>
+</Card.Card>

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

@@ -0,0 +1,27 @@
+interface ProfileStats {
+    label: string;
+    value: string | number;
+}
+interface Props {
+    variant?: 'default' | 'company' | 'gamer';
+    name: string;
+    tagline?: string;
+    avatar?: string;
+    coverImage?: string;
+    location?: string;
+    website?: string;
+    joinedDate?: string;
+    stats?: ProfileStats[];
+    tags?: string[];
+    followers?: number;
+    following?: number;
+    industry?: string;
+    employees?: number;
+    founded?: string;
+    gamerTag?: string;
+    level?: number;
+    rank?: string;
+}
+declare const ProfileCard: import("svelte").Component<Props, {}, "">;
+type ProfileCard = ReturnType<typeof ProfileCard>;
+export default ProfileCard;

package/dist/components/profile/ProjectsGrid.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import { t } 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 { Users, CheckCircle2, ArrowRight } from '@lucide/svelte';
+
+  interface Project {
+    id: string;
+    name: string;
+    description: string;
+    members: number;
+    tasks: number;
+    status: 'active' | 'completed' | 'on-hold';
+    tags?: string[];
+    image?: string;
+  }
+
+  interface Props {
+    columns?: 2 | 3;
+    projects?: Project[];
+  }
+
+  let {
+    columns = 2,
+    projects = [],
+  }: Props = $props();
+
+  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');
+</script>
+
+<div class="space-y-4">
+  <div class="flex items-center justify-between">
+    <h3 class="text-lg font-semibold text-foreground">
+      {columns === 2 ? t('publicProfile.projects2Col') : t('publicProfile.projects3Col')}
+    </h3>
+    <Badge variant="secondary">{projects.length}</Badge>
+  </div>
+
+  {#if projects.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.noProjects')}</p>
+    </div>
+  {:else}
+    <div class="grid gap-4 sm:grid-cols-1 md:grid-cols-2 {gridCols}">
+      {#each projects as project (project.id)}
+        <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">
+              <h4 class="font-semibold text-foreground">{project.name}</h4>
+              <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="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" />{t('publicProfile.projectMembers', { count: project.members })}</span>
+                <span class="flex items-center gap-1"><CheckCircle2 class="h-3 w-3" />{t('publicProfile.projectTasks', { count: project.tasks })}</span>
+              </div>
+              <Button variant="ghost" size="icon-sm">
+                <ArrowRight class="h-3.5 w-3.5" />
+              </Button>
+            </div>
+          </Card.CardContent>
+        </Card.Card>
+      {/each}
+    </div>
+  {/if}
+</div>

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

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

package/dist/components/profile/PublicProfilePage.svelte

@@ -0,0 +1,179 @@
+<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 * as Tabs from '../ui/tabs/index.js';
+  import ProjectsGrid from './ProjectsGrid.svelte';
+  import ActivityTimeline from './ActivityTimeline.svelte';
+  import TeamsShowcase from './TeamsShowcase.svelte';
+  import { MapPin, Link, Calendar, MoreHorizontal } from '@lucide/svelte';
+
+  type ProfileVariant = 'default' | 'company' | 'gamer';
+  type ProfileTab = 'projects' | 'activity' | 'teams';
+
+  interface Props {
+    variant?: ProfileVariant;
+    initialTab?: ProfileTab;
+    columns?: 2 | 3;
+  }
+
+  let { variant = 'default', initialTab = 'projects', columns = 2 }: 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: t('profile.employees'), value: '1,250' },
+          { label: t('publicProfile.projects'), value: '48' },
+          { label: 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: t('profile.gamesPlayed'), value: '1,284' },
+          { label: t('profile.winRate'), value: '68%' },
+          { label: 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: t('publicProfile.projects'), value: '24' },
+        { label: t('publicProfile.followers'), value: '1.2K' },
+        { label: 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'] },
+  ];
+
+  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, color: '#3b82f6' },
+    { id: '2', name: 'Backend Services', description: 'API development, microservices architecture, and infrastructure.', members: [{ name: 'Dave' }, { name: 'Eve' }], totalMembers: 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, color: '#f59e0b' },
+  ];
+</script>
+
+<div class="space-y-6">
+  <!-- Cover + Profile Header -->
+  <Card.Card class="overflow-hidden border-border/60">
+    <div class="h-40 bg-gradient-to-r from-primary/25 via-primary/15 to-accent/20 relative">
+      <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-12 flex flex-col sm:flex-row sm:items-end gap-4">
+        <div class="ring-4 ring-card rounded-2xl overflow-hidden shrink-0">
+          <div class="flex h-24 w-24 items-center justify-center bg-primary/10 text-primary text-3xl font-bold">
+            {profileData.name.split(' ').map(n => n[0]).join('').slice(0, 2)}
+          </div>
+        </div>
+        <div class="flex-1 min-w-0">
+          <h2 class="text-2xl font-bold text-foreground">{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" />{t('publicProfile.joinedDate', { date: profileData.joinedDate })}</span>
+            {/if}
+          </div>
+        </div>
+        <div class="flex gap-2 shrink-0">
+          <Button size="sm">{t('publicProfile.editProfile')}</Button>
+          <Button size="sm" variant="outline">{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>
+
+  <!-- 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">{t('publicProfile.projects')}</Tabs.Trigger>
+      <Tabs.Trigger value="activity" active={activeTab === 'activity'} onclick={() => activeTab = 'activity'} class="gap-1.5">{t('publicProfile.activity')}</Tabs.Trigger>
+      <Tabs.Trigger value="teams" active={activeTab === 'teams'} onclick={() => activeTab = 'teams'} class="gap-1.5">{t('publicProfile.teams')}</Tabs.Trigger>
+    </Tabs.List>
+    <Tabs.Content value="projects" active={activeTab === 'projects'} class="mt-4">
+      <ProjectsGrid {columns} projects={demoProjects} />
+    </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>

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

@@ -0,0 +1,10 @@
+type ProfileVariant = 'default' | 'company' | 'gamer';
+type ProfileTab = 'projects' | 'activity' | 'teams';
+interface Props {
+    variant?: ProfileVariant;
+    initialTab?: ProfileTab;
+    columns?: 2 | 3;
+}
+declare const PublicProfilePage: import("svelte").Component<Props, {}, "">;
+type PublicProfilePage = ReturnType<typeof PublicProfilePage>;
+export default PublicProfilePage;