{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "user-profile-page",
  "title": "User Profile Page",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/user-profile-page/UserProfilePage.svelte",
      "content": "<script lang=\"ts\">\n  import type { Component } from 'svelte'\n  import {\n    CalendarDays,\n    FilePlus2,\n    GitCommitHorizontal,\n    Link,\n    Mail,\n    MapPin,\n    MessageSquare,\n    MoreHorizontal,\n    Star,\n  } from '@lucide/svelte'\n  import { Avatar, AvatarFallback, AvatarImage } from '$lib/components/ui/avatar'\n  import { Badge } from '$lib/components/ui/badge'\n  import { Button } from '$lib/components/ui/button'\n  import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card'\n  import {\n    DropdownMenu,\n    DropdownMenuContent,\n    DropdownMenuItem,\n    DropdownMenuSeparator,\n    DropdownMenuTrigger,\n  } from '$lib/components/ui/dropdown-menu'\n  import { Progress } from '$lib/components/ui/progress'\n  import { Separator } from '$lib/components/ui/separator'\n  import { Tabs, TabsContent, TabsList, TabsTrigger } from '$lib/components/ui/tabs'\n\n  interface DetailRow {\n    icon: Component\n    label: string\n    value: string\n  }\n\n  interface ActivityItem {\n    icon: Component\n    sentence: string\n    time: string\n  }\n\n  interface ProjectCard {\n    name: string\n    description: string\n    progress: number\n  }\n\n  const details: DetailRow[] = [\n    { icon: Mail, label: 'Email', value: 'amara@acme.com' },\n    { icon: MapPin, label: 'Location', value: 'Lisbon, Portugal' },\n    { icon: CalendarDays, label: 'Joined', value: 'March 2023' },\n    { icon: Link, label: 'Website', value: 'amaraosei.dev' },\n  ]\n\n  const activity: ActivityItem[] = [\n    { icon: GitCommitHorizontal, sentence: 'Pushed 6 commits to design-tokens', time: '2h ago' },\n    { icon: MessageSquare, sentence: 'Commented on \"Sidebar collapse behavior\"', time: '5h ago' },\n    { icon: FilePlus2, sentence: 'Created project Marketing site refresh', time: 'Yesterday' },\n    { icon: Star, sentence: 'Starred repository uipkge-ui', time: '3d ago' },\n  ]\n\n  const projects: ProjectCard[] = [\n    { name: 'Design tokens', description: 'Shared OKLCH palette and theme bindings.', progress: 92 },\n    { name: 'Marketing site', description: 'Astro rebuild of the public landing pages.', progress: 64 },\n    { name: 'Component audit', description: 'Parity pass across Vue and React mirrors.', progress: 41 },\n    { name: 'Docs search', description: 'Client-side fuzzy search over registry items.', progress: 18 },\n  ]\n</script>\n\n<div data-slot=\"user-profile-page\" class=\"bg-background border-border overflow-hidden rounded-xl border shadow-xs\">\n  <div class=\"from-primary/20 via-primary/5 h-32 bg-gradient-to-br to-transparent\" aria-hidden=\"true\"></div>\n\n  <div class=\"px-6 pb-6\">\n    <div class=\"ring-background -mt-10 ml-6 flex size-20 items-center justify-center rounded-full ring-4\">\n      <Avatar size=\"2xl\" class=\"size-20\">\n        <AvatarImage src=\"https://i.pravatar.cc/160?img=47\" alt=\"Amara Osei\" />\n        <AvatarFallback>AO</AvatarFallback>\n      </Avatar>\n    </div>\n\n    <div class=\"mt-4 flex flex-wrap items-start justify-between gap-4\">\n      <div>\n        <div class=\"flex flex-wrap items-center gap-2\">\n          <h1 class=\"text-xl font-semibold tracking-tight\">Amara Osei</h1>\n          <Badge variant=\"secondary\">Design engineer</Badge>\n        </div>\n        <p class=\"text-muted-foreground mt-1 text-sm\">@amara</p>\n      </div>\n      <div class=\"flex items-center gap-2\">\n        <Button variant=\"outline\" size=\"sm\">Edit profile</Button>\n        <DropdownMenu>\n          <DropdownMenuTrigger>\n            {#snippet child({ props })}\n              <Button variant=\"ghost\" size=\"icon\" aria-label=\"More actions\" {...props}>\n                <MoreHorizontal class=\"size-4\" />\n              </Button>\n            {/snippet}\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>Copy profile link</DropdownMenuItem>\n            <DropdownMenuItem>Share…</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem variant=\"destructive\">Block user</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </div>\n\n    <p class=\"mt-4 text-sm\">\n      <span class=\"font-semibold\">24</span>\n      <span class=\"text-muted-foreground\">Projects</span>\n      <span class=\"font-semibold\">1,248</span>\n      <span class=\"text-muted-foreground\">Followers</span>\n      <span class=\"font-semibold\">380</span>\n      <span class=\"text-muted-foreground\">Following</span>\n    </p>\n\n    <Tabs defaultValue=\"overview\" class=\"mt-6 gap-4\">\n      <TabsList>\n        <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n        <TabsTrigger value=\"activity\">Activity</TabsTrigger>\n        <TabsTrigger value=\"projects\">Projects</TabsTrigger>\n      </TabsList>\n\n      <TabsContent value=\"overview\" class=\"space-y-6 pt-2\">\n        <p class=\"max-w-prose text-sm leading-relaxed\">\n          Design engineer focused on token systems and component architecture. Previously at a fintech startup, now\n          building the shared UI language for Acme. Writes about OKLCH color and registry-driven workflows.\n        </p>\n        <Separator />\n        <dl class=\"grid gap-x-8 gap-y-4 sm:grid-cols-2\">\n          {#each details as detail (detail.label)}\n            {@const DetailIcon = detail.icon}\n            <div class=\"flex items-center gap-3\">\n              <DetailIcon class=\"text-muted-foreground size-4 shrink-0\" aria-hidden=\"true\" />\n              <dt class=\"text-muted-foreground text-sm\">{detail.label}</dt>\n              <dd class=\"ml-auto text-sm font-medium\">{detail.value}</dd>\n            </div>\n          {/each}\n        </dl>\n      </TabsContent>\n\n      <TabsContent value=\"activity\" class=\"pt-2\">\n        <ul class=\"divide-y\">\n          {#each activity as item (item.sentence)}\n            {@const ActivityIcon = item.icon}\n            <li class=\"flex items-center gap-3 py-3 first:pt-0 last:pb-0\">\n              <span class=\"bg-muted text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-md\">\n                <ActivityIcon class=\"size-4\" aria-hidden=\"true\" />\n              </span>\n              <p class=\"min-w-0 flex-1 truncate text-sm\">{item.sentence}</p>\n              <time class=\"text-muted-foreground text-xs whitespace-nowrap\">{item.time}</time>\n            </li>\n          {/each}\n        </ul>\n      </TabsContent>\n\n      <TabsContent value=\"projects\" class=\"pt-2\">\n        <div class=\"grid gap-4 sm:grid-cols-2\">\n          {#each projects as project (project.name)}\n            <Card>\n              <CardHeader>\n                <CardTitle class=\"text-sm font-medium\">{project.name}</CardTitle>\n                <CardDescription class=\"truncate text-sm\">{project.description}</CardDescription>\n              </CardHeader>\n              <CardContent class=\"flex items-center gap-3\">\n                <Progress value={project.progress} class=\"flex-1\" />\n                <span class=\"text-muted-foreground text-xs tabular-nums\">{project.progress}%</span>\n              </CardContent>\n            </Card>\n          {/each}\n        </div>\n      </TabsContent>\n    </Tabs>\n  </div>\n</div>\n",
      "type": "registry:page",
      "target": "~/src/lib/components/blocks/user-profile-page/UserProfilePage.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/avatar.json",
    "https://uipkge.dev/r/svelte/badge.json",
    "https://uipkge.dev/r/svelte/button.json",
    "https://uipkge.dev/r/svelte/card.json",
    "https://uipkge.dev/r/svelte/dropdown-menu.json",
    "https://uipkge.dev/r/svelte/progress.json",
    "https://uipkge.dev/r/svelte/separator.json",
    "https://uipkge.dev/r/svelte/tabs.json"
  ],
  "description": "Profile page composition: gradient cover banner with an overlapping ringed avatar, identity row with role badge plus edit button and a kebab actions menu, an inline follower stats row, and tabs for Overview (bio + icon detail rows), Activity (muted-tile feed), and Projects (progress cards). All data is hardcoded inline for you to replace.",
  "categories": [
    "auth",
    "app"
  ]
}