{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "profile-header-glass",
  "type": "registry:block",
  "title": "Profile Header Glass",
  "description": "Layout mode for the profile header",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "components/glass/sections/profile-header-glass.tsx",
      "type": "registry:component",
      "content": "// ========================================\n// PROFILE HEADER GLASS COMPONENT\n// Compound Component API + Legacy API\n// ========================================\n\nimport { createContext, forwardRef, useContext } from 'react';\nimport { cn } from '@/lib/utils';\nimport {\n  ProfileHeaderExtendedGlass,\n  type ExtendedProfileUser,\n} from './profile-header-extended-glass';\nimport { AICardGlass, type AICardGlassProps } from '../composite/ai-card-glass';\nimport type { LanguageData } from '../specialized/language-bar-glass';\nimport '@/glass-theme.css';\n\n// ========================================\n// CONTEXT\n// ========================================\n\ninterface ProfileHeaderContextValue {\n  layout: 'horizontal' | 'stacked';\n}\n\nconst ProfileHeaderContext = createContext<ProfileHeaderContextValue | null>(null);\n\nfunction useProfileHeaderContext() {\n  const context = useContext(ProfileHeaderContext);\n  if (!context) {\n    throw new Error(\n      'ProfileHeader compound components must be used within ProfileHeaderGlass.Root'\n    );\n  }\n  return context;\n}\n\n// ========================================\n// COMPOUND COMPONENTS\n// ========================================\n\nexport interface ProfileHeaderRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Layout mode for the profile header\n   * - 'horizontal': 50/50 split on desktop (default)\n   * - 'stacked': Vertical stack on all breakpoints\n   * @default 'horizontal'\n   */\n  readonly layout?: 'horizontal' | 'stacked';\n}\n\n/**\n * ProfileHeaderGlass.Root - Container for compound component API\n *\n * @example\n * ```tsx\n * <ProfileHeaderGlass.Root layout=\"horizontal\">\n *   <ProfileHeaderGlass.Profile user={user} />\n *   <ProfileHeaderGlass.AI onGenerate={handleGenerate} />\n * </ProfileHeaderGlass.Root>\n * ```\n */\nconst ProfileHeaderRoot = forwardRef<HTMLDivElement, ProfileHeaderRootProps>(\n  ({ layout = 'horizontal', className, children, ...props }, ref) => {\n    const isHorizontal = layout === 'horizontal';\n\n    return (\n      <ProfileHeaderContext.Provider value={{ layout }}>\n        <div\n          ref={ref}\n          className={cn(\n            'flex gap-3',\n            isHorizontal ? 'flex-col lg:flex-row lg:gap-0' : 'flex-col',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </ProfileHeaderContext.Provider>\n    );\n  }\n);\n\nProfileHeaderRoot.displayName = 'ProfileHeaderGlass.Root';\n\nexport interface ProfileHeaderProfileProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'children'\n> {\n  /** User data for profile display */\n  readonly user: ExtendedProfileUser;\n  /** Show online/offline status indicator */\n  readonly showStatus?: boolean;\n  /** Status type */\n  readonly status?: 'online' | 'offline' | 'away' | 'busy';\n}\n\n/**\n * ProfileHeaderGlass.Profile - Profile information sub-component\n *\n * @example\n * ```tsx\n * <ProfileHeaderGlass.Profile\n *   user={{\n *     name: 'John Doe',\n *     login: 'johndoe',\n *     avatar: 'https://github.com/johndoe.png',\n *     createdAt: '2023-01-15',\n *     stats: { repos: 42, followers: 100, following: 50 },\n *     languages: [{ name: 'TypeScript', percent: 60 }]\n *   }}\n *   showStatus\n *   status=\"online\"\n * />\n * ```\n */\nconst ProfileHeaderProfile = forwardRef<HTMLDivElement, ProfileHeaderProfileProps>(\n  ({ user, showStatus = true, status = 'online', className, ...props }, ref) => {\n    const { layout } = useProfileHeaderContext();\n    const isHorizontal = layout === 'horizontal';\n\n    return (\n      <ProfileHeaderExtendedGlass\n        ref={ref}\n        user={user}\n        showStatus={showStatus}\n        status={status}\n        transparent\n        className={cn(isHorizontal ? 'lg:w-1/2 lg:shrink-0 p-0' : 'p-0', className)}\n        {...props}\n      />\n    );\n  }\n);\n\nProfileHeaderProfile.displayName = 'ProfileHeaderGlass.Profile';\n\nexport type ProfileHeaderAIProps = AICardGlassProps;\n\n/**\n * ProfileHeaderGlass.AI - AI card sub-component with full AICardGlass props\n *\n * @example\n * ```tsx\n * <ProfileHeaderGlass.AI\n *   onGenerate={() => console.log('Generate')}\n *   features={['Code review', 'Security audit', 'Performance tips']}\n *   estimatedTime=\"~1 minute\"\n *   className=\"p-6\"\n * />\n * ```\n */\nconst ProfileHeaderAI = forwardRef<HTMLDivElement, ProfileHeaderAIProps>(\n  ({ className, ...props }, ref) => {\n    const { layout } = useProfileHeaderContext();\n    const isHorizontal = layout === 'horizontal';\n\n    return (\n      <div\n        className={cn(\n          isHorizontal\n            ? 'lg:w-1/2 lg:flex lg:items-center lg:justify-center'\n            : 'flex justify-center'\n        )}\n      >\n        <AICardGlass ref={ref} className={className} {...props} />\n      </div>\n    );\n  }\n);\n\nProfileHeaderAI.displayName = 'ProfileHeaderGlass.AI';\n\n// ========================================\n// LEGACY API (Backward Compatible)\n// ========================================\n\nexport interface ProfileStats {\n  readonly repos?: number;\n  readonly followers?: number;\n  readonly following?: number;\n  readonly gists?: number;\n}\n\nexport interface ProfileHeaderGlassProps extends React.HTMLAttributes<HTMLDivElement> {\n  readonly name?: string;\n  readonly username?: string;\n  readonly joinDate?: string;\n  readonly bio?: string | null;\n  readonly location?: string | null;\n  readonly avatar?: string;\n  readonly url?: string;\n  readonly stats?: ProfileStats;\n  readonly languages?: readonly LanguageData[];\n  readonly onAIGenerate?: () => void;\n  /**\n   * Layout mode for the profile header\n   * - 'horizontal': 50/50 split on desktop (default)\n   * - 'stacked': Vertical stack on all breakpoints\n   * @default 'horizontal'\n   */\n  readonly layout?: 'horizontal' | 'stacked';\n}\n\n/**\n * ProfileHeaderGlass - Composite component combining ProfileHeaderExtendedGlass + AICardGlass\n *\n * Supports two APIs:\n * 1. **Legacy API** (props-based) - Simple usage with flat props\n * 2. **Compound API** - Full control with sub-components\n *\n * Layout (desktop ≥1024px for horizontal):\n * - ProfileHeaderExtendedGlass: 50% width (left half)\n * - AICardGlass: centered in remaining 50% (right half)\n *\n * @example Legacy API\n * ```tsx\n * <ProfileHeaderGlass\n *   name=\"John Doe\"\n *   username=\"johndoe\"\n *   joinDate=\"Jan 2023\"\n *   stats={{ repos: 42, followers: 100, following: 50 }}\n *   languages={[{ name: \"TypeScript\", percent: 60 }]}\n *   onAIGenerate={() => console.log(\"Generate AI summary\")}\n * />\n * ```\n *\n * @example Compound API (Issue #31)\n * ```tsx\n * <ProfileHeaderGlass.Root layout=\"horizontal\">\n *   <ProfileHeaderGlass.Profile\n *     user={{\n *       name: 'John Doe',\n *       login: 'johndoe',\n *       avatar: 'https://github.com/johndoe.png',\n *       createdAt: '2023-01-15',\n *       stats: { repos: 42, followers: 100, following: 50 },\n *       languages: [{ name: 'TypeScript', percent: 60 }]\n *     }}\n *     showStatus\n *     status=\"online\"\n *   />\n *   <ProfileHeaderGlass.AI\n *     onGenerate={() => console.log('Generate')}\n *     features={['Code review', 'Security audit']}\n *     estimatedTime=\"~1 minute\"\n *   />\n * </ProfileHeaderGlass.Root>\n * ```\n *\n * @example Custom AI Component\n * ```tsx\n * <ProfileHeaderGlass.Root>\n *   <ProfileHeaderGlass.Profile user={user} />\n *   <MyCustomAICard /> // Replace AICardGlass entirely\n * </ProfileHeaderGlass.Root>\n * ```\n */\nconst ProfileHeaderGlassLegacy = forwardRef<HTMLDivElement, ProfileHeaderGlassProps>(\n  (\n    {\n      name = 'Artem Safronov',\n      username = 'Yhooi2',\n      joinDate = 'Jan 2023',\n      bio,\n      location,\n      avatar = '',\n      url = '#',\n      stats = {},\n      languages = [],\n      onAIGenerate,\n      layout = 'horizontal',\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    // Convert simple props to ExtendedProfileUser format\n    const user: ExtendedProfileUser = {\n      name,\n      login: username,\n      avatar,\n      url,\n      createdAt: joinDate,\n      bio,\n      location,\n      stats: {\n        repos: stats.repos ?? 11,\n        followers: stats.followers ?? 1,\n        following: stats.following ?? 5,\n        gists: stats.gists ?? 0,\n      },\n      languages,\n    };\n\n    return (\n      <ProfileHeaderRoot ref={ref} layout={layout} className={className} {...props}>\n        <ProfileHeaderProfile user={user} showStatus status=\"online\" />\n        <ProfileHeaderAI onGenerate={onAIGenerate} />\n      </ProfileHeaderRoot>\n    );\n  }\n);\n\nProfileHeaderGlassLegacy.displayName = 'ProfileHeaderGlass';\n\n// ========================================\n// EXPORT WITH COMPOUND API\n// ========================================\n\nexport const ProfileHeaderGlass = Object.assign(ProfileHeaderGlassLegacy, {\n  Root: ProfileHeaderRoot,\n  Profile: ProfileHeaderProfile,\n  AI: ProfileHeaderAI,\n});\n\n// Re-export types for consumers\nexport type { ExtendedProfileUser } from './profile-header-extended-glass';\nexport type { AICardGlassProps } from '../composite/ai-card-glass';\n"
    }
  ],
  "categories": [
    "sections"
  ]
}