{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mock-browser-window",
  "type": "registry:ui",
  "description": "A customizable browser window mockup component with support for Chrome, Safari, and generic styles, customizable sidebars, and themes",
  "registryDependencies": [
    "texture-overlay"
  ],
  "files": [
    {
      "path": "registry/default/ui/mock-browser-window.tsx",
      "content": "import type React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface SidebarItem {\n  icon?: React.ReactNode\n  label: string\n  active?: boolean\n  badge?: string | number\n}\n\ninterface WindowControlsProps {\n  variant?: \"macos\" | \"windows\" | \"chrome\" | \"safari\"\n  headerStyle?: \"minimal\" | \"full\"\n}\n\ninterface AddressBarProps {\n  url?: string\n  secure?: boolean\n  variant?: \"chrome\" | \"safari\"\n  className?: string\n}\n\ninterface SidebarContentProps {\n  items?: SidebarItem[]\n  variant?: \"navigation\" | \"bookmarks\" | \"history\" | \"extensions\"\n  className?: string\n}\n\ninterface BrowserWindowProps {\n  children?: React.ReactNode\n  className?: string\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\"\n  showSidebar?: boolean\n  sidebarPosition?: \"left\" | \"right\" | \"top\" | \"bottom\"\n  headerStyle?: \"minimal\" | \"full\"\n  variant?: \"chrome\" | \"safari\" | \"generic\"\n  theme?: \"light\" | \"dark\" | \"auto\"\n  url?: string\n  sidebarItems?: Array<{\n    icon?: React.ReactNode\n    label: string\n    active?: boolean\n    badge?: string | number\n  }>\n}\n\nfunction WindowControls({\n  variant = \"macos\",\n  headerStyle = \"full\",\n}: WindowControlsProps) {\n  const sizeClasses = \"size-2\"\n\n  if (variant === \"macos\" || variant === \"safari\") {\n    const dotColors =\n      headerStyle === \"minimal\"\n        ? {\n            red: \"bg-muted border  border-foreground/20\",\n            yellow: \"bg-muted border border-foreground/20\",\n            green: \"bg-muted border border-foreground/20\",\n          }\n        : {\n            red: \"bg-red-500 hover:bg-red-600 border border-foreground/20\",\n            yellow:\n              \"bg-yellow-500 hover:bg-yellow-600 border border-foreground/20\",\n            green:\n              \"bg-green-500 hover:bg-green-600 border border-foreground/20 \",\n          }\n\n    return (\n      <div className=\"flex gap-2\">\n        <div\n          className={cn(\n            sizeClasses,\n            \"rounded-full\",\n            dotColors.red,\n            \"group flex cursor-pointer items-center justify-center transition-colors\"\n          )}\n        >\n          {headerStyle !== \"minimal\" && (\n            <div className=\"h-0.5 w-1.5 bg-red-900/60 opacity-0 transition-opacity group-hover:opacity-100\"></div>\n          )}\n        </div>\n        <div\n          className={cn(\n            sizeClasses,\n            \"rounded-full\",\n            dotColors.yellow,\n            \"group flex cursor-pointer items-center justify-center transition-colors\"\n          )}\n        >\n          {headerStyle !== \"minimal\" && (\n            <div className=\"h-0.5 w-1.5 bg-yellow-900/60 opacity-0 transition-opacity group-hover:opacity-100\"></div>\n          )}\n        </div>\n        <div\n          className={cn(\n            sizeClasses,\n            \"rounded-full\",\n            dotColors.green,\n            \"group flex cursor-pointer items-center justify-center transition-colors\"\n          )}\n        >\n          {headerStyle !== \"minimal\" && (\n            <div className=\"h-1 w-1 border border-green-900/60 opacity-0 transition-opacity group-hover:opacity-100\"></div>\n          )}\n        </div>\n      </div>\n    )\n  }\n\n  if (variant === \"windows\") {\n    return (\n      <div className=\"flex gap-1\">\n        <div className=\"bg-muted/50 hover:bg-muted flex h-4 w-6 cursor-pointer items-center justify-center transition-colors\">\n          <div className=\"bg-foreground/60 h-0.5 w-2\"></div>\n        </div>\n        <div className=\"bg-muted/50 hover:bg-muted flex h-4 w-6 cursor-pointer items-center justify-center transition-colors\">\n          <div className=\"border-foreground/60 h-2 w-2 border\"></div>\n        </div>\n        <div className=\"flex h-4 w-6 cursor-pointer items-center justify-center bg-red-500/80 transition-colors hover:bg-red-500\">\n          <div className=\"h-0.5 w-2 rotate-45 bg-white\"></div>\n          <div className=\"absolute h-0.5 w-2 -rotate-45 bg-white\"></div>\n        </div>\n      </div>\n    )\n  }\n\n  if (variant === \"chrome\") {\n    return (\n      <div className=\"flex gap-1.5\">\n        <div\n          className={cn(\n            sizeClasses,\n            \"cursor-pointer rounded-full bg-red-500 transition-colors hover:bg-red-600\"\n          )}\n        ></div>\n        <div\n          className={cn(\n            sizeClasses,\n            \"cursor-pointer rounded-full bg-yellow-500 transition-colors hover:bg-yellow-600\"\n          )}\n        ></div>\n        <div\n          className={cn(\n            sizeClasses,\n            \"cursor-pointer rounded-full bg-green-500 transition-colors hover:bg-green-600\"\n          )}\n        ></div>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"flex gap-1.5\">\n      <div\n        className={`${sizeClasses} border-foreground/20 bg-foreground/10 rounded-full border`}\n      ></div>\n      <div\n        className={`${sizeClasses} border-foreground/20 bg-foreground/10 rounded-full border`}\n      ></div>\n      <div\n        className={`${sizeClasses} border-foreground/20 bg-foreground/10 rounded-full border`}\n      ></div>\n    </div>\n  )\n}\n\nfunction AddressBar({\n  url = \"https://example.com\",\n  secure = true,\n  variant = \"chrome\",\n  className = \"\",\n}: AddressBarProps) {\n  const variantStyles = {\n    chrome:\n      \"bg-muted/30 rounded-full border border-foreground/5 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.03)_inset] backdrop-blur-sm\",\n    safari:\n      \"bg-muted/20 rounded-lg border border-foreground/5 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.03)_inset] backdrop-blur-sm\",\n  }\n\n  const iconColors = {\n    chrome: \"text-muted-foreground/60\",\n    safari: \"text-muted-foreground/60\",\n  }\n\n  return (\n    <div className={`flex flex-1 justify-center ${className}`}>\n      <div\n        className={`${variantStyles[variant]} text-muted-foreground/70 flex max-w-md min-w-[200px] items-center gap-2 px-4 py-2 text-xs transition-colors`}\n      >\n        {secure && (\n          <div className={`h-3 w-3 ${iconColors[variant]}`}>\n            <svg viewBox=\"0 0 12 12\" fill=\"currentColor\">\n              <title>Secure</title>\n              <path d=\"M6 1a2.5 2.5 0 0 1 2.5 2.5V5h.5a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h.5V3.5A2.5 2.5 0 0 1 6 1z\" />\n            </svg>\n          </div>\n        )}\n        <span className=\"truncate\">{url}</span>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarContent({\n  items = [\n    { label: \"Dashboard\", active: true },\n    { label: \"Analytics\", badge: \"3\" },\n    { label: \"Settings\" },\n    { label: \"Profile\" },\n  ],\n  className = \"\",\n}: SidebarContentProps) {\n  return (\n    <div className={`space-y-1 p-3 ${className}`}>\n      {items.map((item, index) => (\n        <div\n          key={`${item.label}-${index}`}\n          className={`flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm transition-colors ${\n            item.active\n              ? \"bg-primary/5 text-primary border-primary/5 border\"\n              : \"text-muted-foreground hover:text-foreground hover:bg-muted/20\"\n          } `}\n        >\n          {item.icon && (\n            <div className=\"h-4 w-4 flex-shrink-0\">{item.icon}</div>\n          )}\n          <span className=\"flex-1 truncate\">{item.label}</span>\n          {item.badge && (\n            <div className=\"bg-primary/5 text-primary min-w-[16px] rounded-full px-1.5 py-0.5 text-center text-xs\">\n              {item.badge}\n            </div>\n          )}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport function BrowserWindow({\n  children,\n  className = \"\",\n  size = \"md\",\n  showSidebar = false,\n  sidebarPosition = \"left\",\n  headerStyle = \"minimal\",\n  variant = \"generic\",\n  theme = \"auto\",\n  url,\n  sidebarItems,\n}: BrowserWindowProps) {\n  const sizeClasses = {\n    sm: \"h-64 max-w-sm\",\n    md: \"h-80 max-w-2xl\",\n    lg: \"h-96 max-w-4xl\",\n    xl: \"h-[32rem] max-w-6xl\",\n  }\n\n  const sidebarSizes = {\n    sm: \"w-32\",\n    md: \"w-48\",\n    lg: \"w-56\",\n    xl: \"w-64\",\n  }\n\n  const themeClasses =\n    theme === \"dark\"\n      ? \"bg-background border-border\"\n      : theme === \"light\"\n        ? \"bg-background border-border\"\n        : \"bg-background border-border\"\n\n  const getHeaderStyles = () => {\n    const baseStyles =\n      \"h-11 border-b border-foreground/5 flex items-center px-4\"\n\n    if (variant === \"chrome\") {\n      return `${baseStyles} bg-muted/10 overflow-hidden`\n    }\n\n    if (variant === \"safari\") {\n      return `${baseStyles} bg-muted/10 overflow-hidden border-b border-border/30`\n    }\n\n    return `${baseStyles} bg-muted/20`\n  }\n\n  return (\n    <div\n      className={`relative rounded-2xl border mask-b-from-50% shadow-[0px_1px_1px_0px_rgba(0,_0,_0,_0.05),_0px_1px_1px_0px_rgba(255,_252,_240,_0.5)_inset,_0px_0px_0px_1px_hsla(0,_0%,_100%,_0.1)_inset,_0px_0px_1px_0px_rgba(28,_27,_26,_0.5)] dark:shadow-[0px_1px_1px_0px_rgba(0,_0,_0,_0.2),_0px_1px_1px_0px_rgba(0,_0,_0,_0.3)_inset,_0px_0px_0px_1px_hsla(0,_0%,_0%,_0.2)_inset,_0px_0px_1px_0px_rgba(255,_255,_255,_0.1)] ${sizeClasses[size]} ${themeClasses} ${className} flex flex-col`}\n    >\n      <div className={getHeaderStyles()}>\n        <WindowControls\n          variant={variant === \"generic\" ? \"macos\" : variant}\n          headerStyle={headerStyle}\n        />\n\n        {headerStyle === \"full\" && (\n          <AddressBar\n            url={url}\n            variant={variant === \"generic\" ? \"chrome\" : variant}\n            className=\"ml-4\"\n          />\n        )}\n      </div>\n\n      {showSidebar && sidebarPosition === \"top\" && (\n        <div className=\"border-foreground/5 bg-muted/20 h-16 border-b\">\n          <SidebarContent\n            items={sidebarItems}\n            variant=\"navigation\"\n            className=\"flex-row\"\n          />\n        </div>\n      )}\n\n      <div className=\"flex h-0 flex-1\">\n        {/* Left Sidebar */}\n        {showSidebar && sidebarPosition === \"left\" && (\n          <div\n            className={`border-foreground/5 bg-muted/20 border-r ${sidebarSizes[size]} h-full flex-shrink-0`}\n          >\n            <SidebarContent items={sidebarItems} />\n          </div>\n        )}\n\n        {/* Main Content Area */}\n        <div className=\"relative h-full min-w-0 flex-1\">\n          {children || <div className=\"absolute inset-0\">{children}</div>}\n        </div>\n\n        {/* Right Sidebar */}\n        {showSidebar && sidebarPosition === \"right\" && (\n          <div\n            className={`border-foreground/5 bg-muted/20 border-l ${sidebarSizes[size]} h-full flex-shrink-0`}\n          >\n            <SidebarContent items={sidebarItems} />\n          </div>\n        )}\n      </div>\n\n      {/* Bottom Sidebar */}\n      {showSidebar && sidebarPosition === \"bottom\" && (\n        <div className=\"border-foreground/5 bg-muted/20 h-16 border-t\">\n          <SidebarContent\n            items={sidebarItems}\n            variant=\"navigation\"\n            className=\"flex-row\"\n          />\n        </div>\n      )}\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}