{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "profile-header-extended-glass",
  "type": "registry:block",
  "title": "Profile Header Extended Glass",
  "description": "Formats ISO 8601 date to human-readable format",
  "dependencies": [
    "lucide-react",
    "react"
  ],
  "registryDependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "components/glass/sections/profile-header-extended-glass.tsx",
      "type": "registry:component",
      "content": "// ========================================\n// PROFILE HEADER EXTENDED GLASS COMPONENT\n// Extended user profile header with GitHub-compatible fields\n// Implements Issue #29 feature request\n// ========================================\n\nimport { forwardRef } from 'react';\nimport { Calendar, ExternalLink, FolderGit2, Users, User, MapPin, FileCode2 } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport { GlassCard } from '../ui/glass-card';\nimport { ProfileAvatarGlass } from '../specialized/profile-avatar-glass';\nimport { LanguageBarGlass, type LanguageData } from '../specialized/language-bar-glass';\nimport '@/glass-theme.css';\n\nexport interface ExtendedProfileStats {\n  readonly repos?: number;\n  readonly followers?: number;\n  readonly following?: number;\n  readonly gists?: number;\n}\n\nexport interface ExtendedProfileUser {\n  /** Display name (can be null for users without a name set) */\n  readonly name: string | null;\n  /** Username/handle (e.g., \"octocat\") */\n  readonly login: string;\n  /** Avatar URL */\n  readonly avatar: string;\n  /** Profile URL */\n  readonly url: string;\n  /** Join date (ISO 8601 string or formatted string) */\n  readonly createdAt: string;\n  /** User biography/description */\n  readonly bio?: string | null;\n  /** User location */\n  readonly location?: string | null;\n  /** Profile stats */\n  readonly stats?: ExtendedProfileStats;\n  /** Programming languages distribution */\n  readonly languages?: readonly LanguageData[];\n}\n\nexport interface ProfileHeaderExtendedGlassProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** User profile data */\n  readonly user: ExtendedProfileUser;\n  /** Whether to show the avatar with online status */\n  readonly showStatus?: boolean;\n  /** Avatar status when showStatus is true */\n  readonly status?: 'online' | 'offline' | 'away' | 'busy';\n  /** Custom action slot (replaces default external link behavior) */\n  readonly actions?: React.ReactNode;\n  /** Removes glass background, renders as plain div */\n  readonly transparent?: boolean;\n}\n\n/**\n * Formats ISO 8601 date to human-readable format\n * @example \"2011-01-25T18:44:36Z\" -> \"January 25, 2011\"\n */\nfunction formatJoinDate(dateString: string): string {\n  try {\n    const date = new Date(dateString);\n    if (isNaN(date.getTime())) {\n      // If not a valid date, return as-is (might already be formatted)\n      return dateString;\n    }\n    return date.toLocaleDateString('en-US', {\n      month: 'long',\n      day: 'numeric',\n      year: 'numeric',\n    });\n  } catch {\n    return dateString;\n  }\n}\n\n/**\n * Gets initials from a name string\n */\nfunction getInitials(name: string | null, login: string): string {\n  if (name) {\n    return name\n      .split(' ')\n      .map((n) => n[0])\n      .join('')\n      .toUpperCase()\n      .slice(0, 2);\n  }\n  return login.slice(0, 2).toUpperCase();\n}\n\n/**\n * ProfileHeaderExtendedGlass - Extended profile header with GitHub-compatible fields\n *\n * Features:\n * - Full GitHub/GitLab user field support\n * - Avatar with optional status indicator\n * - Bio display\n * - Location with icon\n * - Extended stats (repos, followers, following, gists)\n * - Language distribution bar\n * - Custom actions slot\n *\n * @example\n * ```tsx\n * <ProfileHeaderExtendedGlass\n *   user={{\n *     name: \"The Octocat\",\n *     login: \"octocat\",\n *     avatar: \"https://github.com/octocat.png\",\n *     url: \"https://github.com/octocat\",\n *     createdAt: \"2011-01-25T18:44:36Z\",\n *     bio: \"GitHub mascot\",\n *     location: \"San Francisco\",\n *     stats: { repos: 42, followers: 100, following: 50, gists: 10 },\n *     languages: [\n *       { name: \"TypeScript\", percentage: 56, color: \"#3178c6\" },\n *       { name: \"HTML\", percentage: 22, color: \"#e34c26\" },\n *     ],\n *   }}\n * />\n * ```\n */\nexport const ProfileHeaderExtendedGlass = forwardRef<\n  HTMLDivElement,\n  ProfileHeaderExtendedGlassProps\n>(\n  (\n    {\n      user,\n      showStatus = false,\n      status = 'online',\n      actions,\n      transparent = false,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const displayName = user.name || user.login;\n    const stats = {\n      repos: 0,\n      followers: 0,\n      following: 0,\n      gists: 0,\n      ...user.stats,\n    };\n\n    const content = (\n      <div className=\"flex flex-col gap-4\">\n        {/* Top section: Avatar + Identity */}\n        <div className=\"flex gap-4\">\n          {/* Avatar */}\n          {user.avatar ? (\n            <img\n              src={user.avatar}\n              alt={`${displayName}'s avatar`}\n              className=\"w-20 h-20 md:w-24 md:h-24 rounded-full ring-2 ring-white/20 object-cover flex-shrink-0\"\n            />\n          ) : (\n            <ProfileAvatarGlass\n              initials={getInitials(user.name, user.login)}\n              size=\"lg\"\n              status={showStatus ? status : undefined}\n            />\n          )}\n\n          {/* Identity section */}\n          <div className=\"flex-1 min-w-0\">\n            {/* Name */}\n            <h1\n              className=\"text-lg md:text-xl font-bold truncate\"\n              style={{ color: 'var(--text-primary)' }}\n            >\n              {displayName}\n            </h1>\n\n            {/* Username + Link */}\n            <div\n              className=\"flex items-center gap-2 text-sm mt-0.5\"\n              style={{ color: 'var(--text-secondary)' }}\n            >\n              <a\n                href={user.url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"flex items-center gap-1 hover:underline transition-colors\"\n                style={{ color: 'var(--text-accent)' }}\n              >\n                @{user.login} <ExternalLink className=\"w-3 h-3\" />\n              </a>\n            </div>\n\n            {/* Bio */}\n            {user.bio && (\n              <p className=\"text-sm mt-2 line-clamp-2\" style={{ color: 'var(--text-secondary)' }}>\n                {user.bio}\n              </p>\n            )}\n\n            {/* Location + Join date */}\n            <div\n              className=\"flex items-center gap-3 mt-2 text-sm flex-wrap\"\n              style={{ color: 'var(--text-secondary)' }}\n            >\n              {user.location && (\n                <span className=\"flex items-center gap-1\">\n                  <MapPin className=\"w-3.5 h-3.5\" style={{ color: 'var(--text-accent)' }} />\n                  {user.location}\n                </span>\n              )}\n              <span className=\"flex items-center gap-1\">\n                <Calendar className=\"w-3.5 h-3.5\" style={{ color: 'var(--text-accent)' }} />\n                Joined {formatJoinDate(user.createdAt)}\n              </span>\n            </div>\n          </div>\n\n          {/* Actions slot */}\n          {actions && <div className=\"flex-shrink-0\">{actions}</div>}\n        </div>\n\n        {/* Stats row */}\n        <div\n          className=\"flex items-center gap-4 md:gap-6 text-sm flex-wrap\"\n          style={{ color: 'var(--text-secondary)' }}\n        >\n          <span className=\"flex items-center gap-1.5\">\n            <FolderGit2 className=\"w-4 h-4\" style={{ color: 'var(--text-accent)' }} />\n            <span className=\"font-medium\" style={{ color: 'var(--text-primary)' }}>\n              {stats.repos}\n            </span>\n            repos\n          </span>\n          <span className=\"flex items-center gap-1.5\">\n            <Users className=\"w-4 h-4\" style={{ color: 'var(--text-accent)' }} />\n            <span className=\"font-medium\" style={{ color: 'var(--text-primary)' }}>\n              {stats.followers}\n            </span>\n            followers\n          </span>\n          <span className=\"flex items-center gap-1.5\">\n            <User className=\"w-4 h-4\" style={{ color: 'var(--text-accent)' }} />\n            <span className=\"font-medium\" style={{ color: 'var(--text-primary)' }}>\n              {stats.following}\n            </span>\n            following\n          </span>\n          {stats.gists > 0 && (\n            <span className=\"flex items-center gap-1.5\">\n              <FileCode2 className=\"w-4 h-4\" style={{ color: 'var(--text-accent)' }} />\n              <span className=\"font-medium\" style={{ color: 'var(--text-primary)' }}>\n                {stats.gists}\n              </span>\n              gists\n            </span>\n          )}\n        </div>\n\n        {/* Languages bar */}\n        {user.languages && user.languages.length > 0 && (\n          <LanguageBarGlass languages={user.languages} />\n        )}\n      </div>\n    );\n\n    if (transparent) {\n      return (\n        <div ref={ref} className={cn('p-5', className)} {...props}>\n          {content}\n        </div>\n      );\n    }\n\n    return (\n      <GlassCard\n        ref={ref}\n        className={cn('p-5', className)}\n        intensity=\"strong\"\n        glow=\"violet\"\n        hover={false}\n        {...props}\n      >\n        {content}\n      </GlassCard>\n    );\n  }\n);\n\nProfileHeaderExtendedGlass.displayName = 'ProfileHeaderExtendedGlass';\n"
    }
  ],
  "categories": [
    "sections"
  ]
}