{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "browser",
  "title": "browser",
  "description": "A browser SVG component.",
  "dependencies": [
    "react",
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "button",
    "badge",
    "card",
    "separator",
    "input"
  ],
  "files": [
    {
      "path": "registry/eldoraui/browser.tsx",
      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { useEffect, useState } from \"react\"\nimport Image from \"next/image\"\nimport {\n  Battery,\n  BookmarkIcon,\n  ChevronLeft,\n  ChevronRight,\n  Download,\n  Globe,\n  History,\n  Home,\n  Lock,\n  Maximize2,\n  Minimize2,\n  MoreHorizontal,\n  Plus,\n  RotateCcw,\n  Search,\n  Settings,\n  Shield,\n  Square,\n  Star,\n  StarOff,\n  Volume2,\n  Wifi,\n  X,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Separator } from \"@/components/ui/separator\"\n\ninterface Tab {\n  id: string\n  title: string\n  url: string\n  favicon?: string\n  isActive: boolean\n  isLoading: boolean\n}\n\ninterface Bookmark {\n  id: string\n  title: string\n  url: string\n  favicon?: string\n}\n\ninterface HistoryItem {\n  id: string\n  title: string\n  url: string\n  timestamp: Date\n  favicon?: string\n}\n\ninterface BrowserProps {\n  image?: string\n  initialUrl?: string\n  initialTabs?: Partial<Tab>[]\n  theme?: \"light\" | \"dark\" | \"system\"\n  showWindowControls?: boolean\n  showBookmarksBar?: boolean\n  showStatusBar?: boolean\n  className?: string\n  enableTabManagement?: boolean\n  enableBookmarks?: boolean\n  enableHistory?: boolean\n  enableDownloads?: boolean\n  enableSettings?: boolean\n  maxTabs?: number\n  customBookmarks?: Bookmark[]\n  customHistory?: HistoryItem[]\n  onNavigate?: (url: string, tabId: string) => void\n  onTabCreate?: (tab: Tab) => void\n  onTabClose?: (tabId: string) => void\n  onTabSwitch?: (tabId: string) => void\n  onBookmarkToggle?: (url: string, isBookmarked: boolean) => void\n  onDownload?: (url: string) => void\n  renderContent?: (url: string, isLoading: boolean) => React.ReactNode\n  customFavicons?: Record<string, string>\n  openLinksInNewTab?: boolean\n  autoFocusAddressBar?: boolean\n  simulateLoading?: boolean\n  loadingDuration?: number\n}\n\nexport function Browser({\n  image = \"/placeholder.svg\",\n  initialUrl = \"https://eldoraui.site\",\n  initialTabs,\n  showWindowControls = false,\n  showBookmarksBar = false,\n  showStatusBar = true,\n  className,\n  enableTabManagement = false,\n  enableBookmarks = true,\n  enableHistory = true,\n  enableDownloads = true,\n  enableSettings = true,\n  maxTabs = 10,\n  customBookmarks,\n  customHistory,\n  onNavigate,\n  onTabCreate,\n  onTabClose,\n  onTabSwitch,\n  onBookmarkToggle,\n  onDownload,\n  renderContent,\n  autoFocusAddressBar = false,\n  simulateLoading = true,\n  loadingDuration = 1000,\n}: BrowserProps = {}) {\n  const [tabs, setTabs] = useState<Tab[]>(() => {\n    if (initialTabs && initialTabs.length > 0) {\n      return initialTabs.map((tab, index) => ({\n        id: tab.id || Date.now().toString() + index,\n        title: tab.title || \"New Tab\",\n        url: tab.url || initialUrl,\n        favicon: tab.favicon,\n        isActive: index === 0,\n        isLoading: false,\n      }))\n    }\n    return [\n      {\n        id: \"1\",\n        title: \"New Tab\",\n        url: initialUrl,\n        isActive: true,\n        isLoading: false,\n      },\n    ]\n  })\n\n  const [currentUrl, setCurrentUrl] = useState(initialUrl)\n  const [inputUrl, setInputUrl] = useState(initialUrl)\n  const [isSecure, setIsSecure] = useState(true)\n  const [canGoBack, setCanGoBack] = useState(false)\n  const [canGoForward, setCanGoForward] = useState(false)\n  const [isBookmarked, setIsBookmarked] = useState(false)\n  const [showBookmarks, setShowBookmarks] = useState(false)\n  const [showHistory, setShowHistory] = useState(false)\n  const [showSettings, setShowSettings] = useState(false)\n  const [isFullscreen, setIsFullscreen] = useState(false)\n  const [downloadProgress, setDownloadProgress] = useState(0)\n  const [isDownloading, setIsDownloading] = useState(false)\n\n  const [bookmarks] = useState<Bookmark[]>(\n    customBookmarks || [\n      {\n        id: \"1\",\n        title: \"Google\",\n        url: \"https://www.google.com\",\n        favicon: \"🔍\",\n      },\n      { id: \"2\", title: \"GitHub\", url: \"https://github.com\", favicon: \"🐙\" },\n      {\n        id: \"3\",\n        title: \"Stack Overflow\",\n        url: \"https://stackoverflow.com\",\n        favicon: \"📚\",\n      },\n      {\n        id: \"4\",\n        title: \"MDN Web Docs\",\n        url: \"https://developer.mozilla.org\",\n        favicon: \"📖\",\n      },\n    ]\n  )\n\n  const [history] = useState<HistoryItem[]>(\n    customHistory || [\n      {\n        id: \"1\",\n        title: \"Google\",\n        url: \"https://www.google.com\",\n        timestamp: new Date(Date.now() - 3600000),\n        favicon: \"🔍\",\n      },\n      {\n        id: \"2\",\n        title: \"GitHub\",\n        url: \"https://github.com\",\n        timestamp: new Date(Date.now() - 7200000),\n        favicon: \"🐙\",\n      },\n      {\n        id: \"3\",\n        title: \"Stack Overflow\",\n        url: \"https://stackoverflow.com\",\n        timestamp: new Date(Date.now() - 10800000),\n        favicon: \"📚\",\n      },\n    ]\n  )\n\n  const activeTab = tabs.find((tab) => tab.isActive)\n\n  useEffect(() => {\n    if (autoFocusAddressBar) {\n      const addressBar = document.querySelector(\n        'input[placeholder*=\"Search or enter address\"]'\n      ) as HTMLInputElement\n      if (addressBar) {\n        addressBar.focus()\n      }\n    }\n  }, [autoFocusAddressBar])\n\n  const createNewTab = () => {\n    if (tabs.length >= maxTabs) return\n\n    const newTab: Tab = {\n      id: Date.now().toString(),\n      title: \"New Tab\",\n      url: \"about:blank\",\n      isActive: true,\n      isLoading: false,\n    }\n\n    setTabs((prev) =>\n      prev.map((tab) => ({ ...tab, isActive: false })).concat(newTab)\n    )\n    setCurrentUrl(\"about:blank\")\n    setInputUrl(\"\")\n\n    onTabCreate?.(newTab)\n  }\n\n  const closeTab = (tabId: string) => {\n    if (tabs.length === 1) return\n\n    const tabIndex = tabs.findIndex((tab) => tab.id === tabId)\n    const wasActive = tabs[tabIndex].isActive\n\n    const newTabs = tabs.filter((tab) => tab.id !== tabId)\n\n    if (wasActive && newTabs.length > 0) {\n      const nextActiveIndex = Math.min(tabIndex, newTabs.length - 1)\n      newTabs[nextActiveIndex].isActive = true\n      setCurrentUrl(newTabs[nextActiveIndex].url)\n      setInputUrl(newTabs[nextActiveIndex].url)\n    }\n\n    setTabs(newTabs)\n\n    onTabClose?.(tabId)\n  }\n\n  const switchTab = (tabId: string) => {\n    const newTabs = tabs.map((tab) => ({\n      ...tab,\n      isActive: tab.id === tabId,\n    }))\n\n    const activeTab = newTabs.find((tab) => tab.isActive)\n    if (activeTab) {\n      setCurrentUrl(activeTab.url)\n      setInputUrl(activeTab.url)\n    }\n\n    setTabs(newTabs)\n\n    onTabSwitch?.(tabId)\n  }\n\n  const navigateToUrl = (url: string) => {\n    if (\n      !url.startsWith(\"http://\") &&\n      !url.startsWith(\"https://\") &&\n      !url.startsWith(\"about:\")\n    ) {\n      url = `https://www.google.com/search?q=${encodeURIComponent(url)}`\n    }\n\n    setCurrentUrl(url)\n    setInputUrl(url)\n    setIsSecure(url.startsWith(\"https://\"))\n\n    setTabs((prev) =>\n      prev.map((tab) =>\n        tab.isActive\n          ? {\n              ...tab,\n              url,\n              title: new URL(url).hostname || \"New Tab\",\n              isLoading: simulateLoading,\n            }\n          : tab\n      )\n    )\n\n    const activeTabId = tabs.find((tab) => tab.isActive)?.id || \"\"\n    onNavigate?.(url, activeTabId)\n\n    if (simulateLoading) {\n      setTimeout(() => {\n        setTabs((prev) =>\n          prev.map((tab) => (tab.isActive ? { ...tab, isLoading: false } : tab))\n        )\n      }, loadingDuration)\n    }\n  }\n\n  const handleUrlSubmit = (e: React.FormEvent) => {\n    e.preventDefault()\n    navigateToUrl(inputUrl)\n  }\n\n  const goBack = () => {\n    setCanGoForward(true)\n  }\n\n  const goForward = () => {\n    setCanGoBack(true)\n  }\n\n  const refresh = () => {\n    setTabs((prev) =>\n      prev.map((tab) => (tab.isActive ? { ...tab, isLoading: true } : tab))\n    )\n\n    setTimeout(() => {\n      setTabs((prev) =>\n        prev.map((tab) => (tab.isActive ? { ...tab, isLoading: false } : tab))\n      )\n    }, 1000)\n  }\n\n  const toggleBookmark = () => {\n    const newBookmarkedState = !isBookmarked\n    setIsBookmarked(newBookmarkedState)\n\n    onBookmarkToggle?.(currentUrl, newBookmarkedState)\n  }\n\n  const simulateDownload = () => {\n    onDownload?.(currentUrl)\n\n    if (!enableDownloads) return\n\n    setIsDownloading(true)\n    setDownloadProgress(0)\n\n    const interval = setInterval(() => {\n      setDownloadProgress((prev) => {\n        if (prev >= 100) {\n          clearInterval(interval)\n          setIsDownloading(false)\n          return 0\n        }\n        return prev + 10\n      })\n    }, 200)\n  }\n\n  return (\n    <div\n      className={cn(\n        \"bg-background border-border flex h-full flex-col overflow-hidden rounded-lg border\",\n        isFullscreen && \"fixed inset-0 z-50 rounded-none border-0\",\n        className\n      )}\n    >\n      {showWindowControls && (\n        <div className=\"bg-muted/50 border-border flex items-center justify-between border-b px-4 py-2\">\n          <div className=\"flex items-center gap-2\">\n            <div className=\"flex gap-2\">\n              <div className=\"h-3 w-3 rounded-full bg-red-500\"></div>\n              <div className=\"h-3 w-3 rounded-full bg-yellow-500\"></div>\n              <div className=\"h-3 w-3 rounded-full bg-green-500\"></div>\n            </div>\n          </div>\n\n          <div className=\"text-muted-foreground flex items-center gap-2 text-sm\">\n            <Wifi className=\"h-4 w-4\" />\n            <Volume2 className=\"h-4 w-4\" />\n            <Battery className=\"h-4 w-4\" />\n            <span>\n              {new Date().toLocaleTimeString([], {\n                hour: \"2-digit\",\n                minute: \"2-digit\",\n              })}\n            </span>\n          </div>\n\n          <div className=\"flex items-center gap-1\">\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => setIsFullscreen(!isFullscreen)}\n            >\n              {isFullscreen ? (\n                <Minimize2 className=\"h-4 w-4\" />\n              ) : (\n                <Maximize2 className=\"h-4 w-4\" />\n              )}\n            </Button>\n            <Button variant=\"ghost\" size=\"sm\">\n              <Square className=\"h-4 w-4\" />\n            </Button>\n            <Button variant=\"ghost\" size=\"sm\">\n              <X className=\"h-4 w-4\" />\n            </Button>\n          </div>\n        </div>\n      )}\n\n      {enableTabManagement && (\n        <div className=\"bg-muted/30 border-border flex items-center border-b\">\n          <div className=\"flex flex-1 items-center overflow-x-auto\">\n            {tabs.map((tab) => (\n              <div\n                key={tab.id}\n                className={cn(\n                  \"border-border flex max-w-64 min-w-0 cursor-pointer items-center gap-2 border-r px-4 py-2\",\n                  tab.isActive ? \"bg-background\" : \"hover:bg-muted/50\"\n                )}\n                onClick={() => switchTab(tab.id)}\n              >\n                <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n                  {tab.isLoading ? (\n                    <div className=\"border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent\" />\n                  ) : (\n                    <Globe className=\"text-muted-foreground h-4 w-4 flex-shrink-0\" />\n                  )}\n                  <span className=\"truncate text-sm\">{tab.title}</span>\n                </div>\n                {tabs.length > 1 && (\n                  <Button\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    className=\"hover:bg-muted h-4 w-4 p-0\"\n                    onClick={(e) => {\n                      e.stopPropagation()\n                      closeTab(tab.id)\n                    }}\n                  >\n                    <X className=\"h-3 w-3\" />\n                  </Button>\n                )}\n              </div>\n            ))}\n          </div>\n\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={createNewTab}\n            className=\"border-border border-l px-3 py-2\"\n          >\n            <Plus className=\"h-4 w-4\" />\n          </Button>\n        </div>\n      )}\n\n      <div className=\"bg-background border-border flex items-center gap-2 border-b p-2\">\n        <div className=\"flex items-center gap-1\">\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={goBack}\n            disabled={!canGoBack}\n          >\n            <ChevronLeft className=\"h-4 w-4\" />\n          </Button>\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={goForward}\n            disabled={!canGoForward}\n          >\n            <ChevronRight className=\"h-4 w-4\" />\n          </Button>\n          <Button variant=\"ghost\" size=\"sm\" onClick={refresh}>\n            <RotateCcw className=\"h-4 w-4\" />\n          </Button>\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={() => navigateToUrl(\"about:home\")}\n          >\n            <Home className=\"h-4 w-4\" />\n          </Button>\n        </div>\n\n        <form onSubmit={handleUrlSubmit} className=\"flex flex-1 items-center\">\n          <div className=\"relative flex flex-1 items-center\">\n            <div className=\"absolute left-3 flex items-center gap-2\">\n              {isSecure ? (\n                <Lock className=\"h-4 w-4 text-green-600\" />\n              ) : (\n                <Shield className=\"text-muted-foreground h-4 w-4\" />\n              )}\n            </div>\n            <Input\n              value={inputUrl}\n              onChange={(e) => setInputUrl(e.target.value)}\n              placeholder=\"Search or enter address\"\n              className=\"pr-4 pl-10\"\n            />\n          </div>\n        </form>\n\n        <div className=\"flex items-center gap-1\">\n          {enableBookmarks && (\n            <Button variant=\"ghost\" size=\"sm\" onClick={toggleBookmark}>\n              {isBookmarked ? (\n                <Star className=\"h-4 w-4 fill-yellow-400 text-yellow-400\" />\n              ) : (\n                <StarOff className=\"h-4 w-4\" />\n              )}\n            </Button>\n          )}\n          {enableDownloads && (\n            <Button variant=\"ghost\" size=\"sm\" onClick={simulateDownload}>\n              <Download className=\"h-4 w-4\" />\n            </Button>\n          )}\n          {enableSettings && (\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => setShowSettings(!showSettings)}\n            >\n              <MoreHorizontal className=\"h-4 w-4\" />\n            </Button>\n          )}\n        </div>\n      </div>\n\n      {showBookmarksBar && enableBookmarks && (\n        <div className=\"bg-muted/20 border-border flex items-center gap-2 border-b px-4 py-1 text-sm\">\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={() => setShowBookmarks(!showBookmarks)}\n            className=\"text-xs\"\n          >\n            <BookmarkIcon className=\"mr-1 h-3 w-3\" />\n            Bookmarks\n          </Button>\n          {enableHistory && (\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => setShowHistory(!showHistory)}\n              className=\"text-xs\"\n            >\n              <History className=\"mr-1 h-3 w-3\" />\n              History\n            </Button>\n          )}\n          <Separator orientation=\"vertical\" className=\"h-4\" />\n          {bookmarks.slice(0, 4).map((bookmark) => (\n            <Button\n              key={bookmark.id}\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => navigateToUrl(bookmark.url)}\n              className=\"text-xs\"\n            >\n              <span className=\"mr-1\">{bookmark.favicon}</span>\n              {bookmark.title}\n            </Button>\n          ))}\n        </div>\n      )}\n\n      {isDownloading && enableDownloads && (\n        <div className=\"border-border border-b bg-blue-50 px-4 py-2 dark:bg-blue-950\">\n          <div className=\"flex items-center gap-2 text-sm\">\n            <Download className=\"h-4 w-4\" />\n            <span>Downloading file...</span>\n            <div className=\"bg-muted h-2 flex-1 rounded-full\">\n              <div\n                className=\"h-2 rounded-full bg-blue-600 transition-all duration-200\"\n                style={{ width: `${downloadProgress}%` }}\n              />\n            </div>\n            <span>{downloadProgress}%</span>\n          </div>\n        </div>\n      )}\n\n      <div className=\"flex flex-1 overflow-hidden\">\n        {showBookmarks && enableBookmarks && (\n          <Card className=\"m-2 mr-0 w-80 overflow-y-auto p-4\">\n            <h3 className=\"mb-4 flex items-center gap-2 font-semibold\">\n              <BookmarkIcon className=\"h-4 w-4\" />\n              Bookmarks\n            </h3>\n            <div className=\"space-y-2\">\n              {bookmarks.map((bookmark) => (\n                <div\n                  key={bookmark.id}\n                  className=\"hover:bg-muted flex cursor-pointer items-center gap-2 rounded p-2\"\n                  onClick={() => navigateToUrl(bookmark.url)}\n                >\n                  <span>{bookmark.favicon}</span>\n                  <div className=\"min-w-0 flex-1\">\n                    <div className=\"truncate text-sm font-medium\">\n                      {bookmark.title}\n                    </div>\n                    <div className=\"text-muted-foreground truncate text-xs\">\n                      {bookmark.url}\n                    </div>\n                  </div>\n                </div>\n              ))}\n            </div>\n          </Card>\n        )}\n\n        {showHistory && enableHistory && (\n          <Card className=\"m-2 mr-0 w-80 overflow-y-auto p-4\">\n            <h3 className=\"mb-4 flex items-center gap-2 font-semibold\">\n              <History className=\"h-4 w-4\" />\n              History\n            </h3>\n            <div className=\"space-y-2\">\n              {history.map((item) => (\n                <div\n                  key={item.id}\n                  className=\"hover:bg-muted flex cursor-pointer items-center gap-2 rounded p-2\"\n                  onClick={() => navigateToUrl(item.url)}\n                >\n                  <span>{item.favicon}</span>\n                  <div className=\"min-w-0 flex-1\">\n                    <div className=\"truncate text-sm font-medium\">\n                      {item.title}\n                    </div>\n                    <div className=\"text-muted-foreground truncate text-xs\">\n                      {item.url}\n                    </div>\n                    <div className=\"text-muted-foreground text-xs\">\n                      {item.timestamp.toLocaleTimeString()}\n                    </div>\n                  </div>\n                </div>\n              ))}\n            </div>\n          </Card>\n        )}\n\n        {showSettings && enableSettings && (\n          <Card className=\"m-2 mr-0 w-80 overflow-y-auto p-4\">\n            <h3 className=\"mb-4 flex items-center gap-2 font-semibold\">\n              <Settings className=\"h-4 w-4\" />\n              Settings\n            </h3>\n            <div className=\"space-y-4\">\n              <div>\n                <h4 className=\"mb-2 font-medium\">Privacy & Security</h4>\n                <div className=\"space-y-2 text-sm\">\n                  <div className=\"flex items-center justify-between\">\n                    <span>Block pop-ups</span>\n                    <Badge variant=\"secondary\">On</Badge>\n                  </div>\n                  <div className=\"flex items-center justify-between\">\n                    <span>Safe browsing</span>\n                    <Badge variant=\"secondary\">Enhanced</Badge>\n                  </div>\n                </div>\n              </div>\n              <Separator />\n              <div>\n                <h4 className=\"mb-2 font-medium\">Appearance</h4>\n                <div className=\"space-y-2 text-sm\">\n                  <div className=\"flex items-center justify-between\">\n                    <span>Theme</span>\n                    <Badge variant=\"outline\">System</Badge>\n                  </div>\n                  <div className=\"flex items-center justify-between\">\n                    <span>Zoom</span>\n                    <Badge variant=\"outline\">100%</Badge>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </Card>\n        )}\n\n        <div className=\"dark:bg-muted/20 border-border m-2 flex flex-1 flex-col overflow-hidden rounded-md border bg-white\">\n          {renderContent ? (\n            renderContent(currentUrl, activeTab?.isLoading || false)\n          ) : currentUrl === \"about:blank\" || currentUrl === \"\" ? (\n            <div className=\"flex flex-1 items-center justify-center\">\n              <div className=\"space-y-4 text-center\">\n                <Search className=\"text-muted-foreground mx-auto h-16 w-16\" />\n                <h2 className=\"text-2xl font-semibold\">New Tab</h2>\n                <p className=\"text-muted-foreground\">\n                  Start by searching or entering a web address\n                </p>\n                <div className=\"mt-8 grid grid-cols-2 gap-4\">\n                  {bookmarks.slice(0, 4).map((bookmark) => (\n                    <Card\n                      key={bookmark.id}\n                      className=\"hover:bg-muted/50 cursor-pointer p-4 transition-colors\"\n                      onClick={() => navigateToUrl(bookmark.url)}\n                    >\n                      <div className=\"space-y-2 text-center\">\n                        <div className=\"text-2xl\">{bookmark.favicon}</div>\n                        <div className=\"text-sm font-medium\">\n                          {bookmark.title}\n                        </div>\n                      </div>\n                    </Card>\n                  ))}\n                </div>\n              </div>\n            </div>\n          ) : (\n            <div className=\"flex h-full items-center justify-center\">\n              <Image\n                src={image}\n                alt={image}\n                width={320}\n                height={320}\n                className=\"h-full w-full rounded-md object-cover\"\n              />\n            </div>\n          )}\n        </div>\n      </div>\n\n      {showStatusBar && (\n        <div className=\"bg-muted/30 border-border text-muted-foreground flex items-center justify-between border-t px-4 py-1 text-xs\">\n          <div className=\"flex items-center gap-4\">\n            <span>Ready</span>\n            {isSecure && (\n              <span className=\"flex items-center gap-1\">\n                <Lock className=\"h-3 w-3\" /> Secure\n              </span>\n            )}\n          </div>\n          <div className=\"flex items-center gap-4\">\n            <span>Zoom: 100%</span>\n            <span>\n              {tabs.length} tab{tabs.length !== 1 ? \"s\" : \"\"}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}