{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "browser-window",
  "type": "registry:block",
  "title": "Browser window",
  "description": "Browser window",
  "files": [
    {
      "path": "components/usages/browserwindowusage.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport {\n\tSelect,\n\tSelectContent,\n\tSelectItem,\n\tSelectTrigger,\n\tSelectValue,\n} from \"@/components/ui/select\";\nimport { Switch } from \"@/components/ui/switch\";\nimport { BrowserWindow } from \"@/registry/open-source/browser-window\";\n\nexport function DemoPage() {\n\tconst [config, setConfig] = useState({\n\t\tvariant: \"chrome\" as \"chrome\" | \"safari\",\n\t\theaderStyle: \"full\" as \"minimal\" | \"full\",\n\t\tsize: \"lg\" as \"sm\" | \"md\" | \"lg\" | \"xl\",\n\t\tshowSidebar: true,\n\t\tsidebarPosition: \"left\" as \"left\" | \"right\" | \"top\" | \"bottom\",\n\t\turl: \"https://example.com/dashboard\",\n\t});\n\n\tconst [sidebarItems] = useState([\n\t\t{ label: \"Overview\", active: true },\n\t\t{ label: \"Users\", badge: \"12\" },\n\t\t{ label: \"Analytics\", badge: \"new\" },\n\t\t{ label: \"Settings\" },\n\t]);\n\n\treturn (\n\t\t<div className=\"min-h-screen \">\n\t\t\t<main className=\"container \">\n\t\t\t\t<div className=\"mx-auto max-w-7xl\">\n\t\t\t\t\t<div className=\"space-y-12\">\n\t\t\t\t\t\t<div className=\"space-y-8\">\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t<h2 className=\"text-lg font-semibold mb-6\">Preview</h2>\n\t\t\t\t\t\t\t\t<div className=\"flex justify-center p-8 bg-muted/30 rounded-xl border\">\n\t\t\t\t\t\t\t\t\t<BrowserWindow\n\t\t\t\t\t\t\t\t\t\tvariant={config.variant}\n\t\t\t\t\t\t\t\t\t\theaderStyle={config.headerStyle}\n\t\t\t\t\t\t\t\t\t\tsize={config.size}\n\t\t\t\t\t\t\t\t\t\tshowSidebar={config.showSidebar}\n\t\t\t\t\t\t\t\t\t\tsidebarPosition={config.sidebarPosition}\n\t\t\t\t\t\t\t\t\t\turl={config.url}\n\t\t\t\t\t\t\t\t\t\tsidebarItems={\n\t\t\t\t\t\t\t\t\t\t\tconfig.showSidebar ? sidebarItems : undefined\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tclassName=\"w-full max-w-4xl\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div className=\"space-y-8\">\n\t\t\t\t\t\t\t<h2 className=\"text-lg font-semibold\">Window Settings</h2>\n\t\t\t\t\t\t\t<div className=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n\t\t\t\t\t\t\t\t<div className=\"space-y-2\">\n\t\t\t\t\t\t\t\t\t<Label className=\"text-sm\">Browser</Label>\n\t\t\t\t\t\t\t\t\t<Select\n\t\t\t\t\t\t\t\t\t\tvalue={config.variant}\n\t\t\t\t\t\t\t\t\t\tonValueChange={(value: \"chrome\" | \"safari\") =>\n\t\t\t\t\t\t\t\t\t\t\tsetConfig((prev) => ({\n\t\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t\tvariant: value,\n\t\t\t\t\t\t\t\t\t\t\t}))\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<SelectTrigger>\n\t\t\t\t\t\t\t\t\t\t\t<SelectValue />\n\t\t\t\t\t\t\t\t\t\t</SelectTrigger>\n\t\t\t\t\t\t\t\t\t\t<SelectContent>\n\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"chrome\">Chrome</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"safari\">Safari</SelectItem>\n\t\t\t\t\t\t\t\t\t\t</SelectContent>\n\t\t\t\t\t\t\t\t\t</Select>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t<div className=\"space-y-2\">\n\t\t\t\t\t\t\t\t\t<Label className=\"text-sm\">Header Style</Label>\n\t\t\t\t\t\t\t\t\t<Select\n\t\t\t\t\t\t\t\t\t\tvalue={config.headerStyle}\n\t\t\t\t\t\t\t\t\t\tonValueChange={(value: \"minimal\" | \"full\") =>\n\t\t\t\t\t\t\t\t\t\t\tsetConfig((prev) => ({\n\t\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t\theaderStyle: value,\n\t\t\t\t\t\t\t\t\t\t\t}))\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<SelectTrigger>\n\t\t\t\t\t\t\t\t\t\t\t<SelectValue />\n\t\t\t\t\t\t\t\t\t\t</SelectTrigger>\n\t\t\t\t\t\t\t\t\t\t<SelectContent>\n\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"minimal\">\n\t\t\t\t\t\t\t\t\t\t\t\tMinimal\n\t\t\t\t\t\t\t\t\t\t\t</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"full\">\n\t\t\t\t\t\t\t\t\t\t\t\tAddress Bar\n\t\t\t\t\t\t\t\t\t\t\t</SelectItem>\n\t\t\t\t\t\t\t\t\t\t</SelectContent>\n\t\t\t\t\t\t\t\t\t</Select>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t<div className=\"space-y-2\">\n\t\t\t\t\t\t\t\t\t<Label className=\"text-sm\">Size</Label>\n\t\t\t\t\t\t\t\t\t<Select\n\t\t\t\t\t\t\t\t\t\tvalue={config.size}\n\t\t\t\t\t\t\t\t\t\tonValueChange={(\n\t\t\t\t\t\t\t\t\t\t\tvalue: \"sm\" | \"md\" | \"lg\" | \"xl\"\n\t\t\t\t\t\t\t\t\t\t) =>\n\t\t\t\t\t\t\t\t\t\t\tsetConfig((prev) => ({ ...prev, size: value }))\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<SelectTrigger>\n\t\t\t\t\t\t\t\t\t\t\t<SelectValue />\n\t\t\t\t\t\t\t\t\t\t</SelectTrigger>\n\t\t\t\t\t\t\t\t\t\t<SelectContent>\n\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"sm\">Small</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"md\">Medium</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"lg\">Large</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"xl\">Extra Large</SelectItem>\n\t\t\t\t\t\t\t\t\t\t</SelectContent>\n\t\t\t\t\t\t\t\t\t</Select>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t<div className=\"space-y-2 md:col-span-2 lg:col-span-1\">\n\t\t\t\t\t\t\t\t\t<Label className=\"text-sm\">URL</Label>\n\t\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\t\tvalue={config.url}\n\t\t\t\t\t\t\t\t\t\tonChange={(e) =>\n\t\t\t\t\t\t\t\t\t\t\tsetConfig((prev) => ({\n\t\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t\turl: e.target.value,\n\t\t\t\t\t\t\t\t\t\t\t}))\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tplaceholder=\"https://example.com\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t<div className=\"space-y-2\">\n\t\t\t\t\t\t\t\t\t<div className=\"flex items-center justify-between\">\n\t\t\t\t\t\t\t\t\t\t<Label className=\"text-sm\">Show Sidebar</Label>\n\t\t\t\t\t\t\t\t\t\t<Switch\n\t\t\t\t\t\t\t\t\t\t\tchecked={config.showSidebar}\n\t\t\t\t\t\t\t\t\t\t\tonCheckedChange={(checked) =>\n\t\t\t\t\t\t\t\t\t\t\t\tsetConfig((prev) => ({\n\t\t\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t\t\tshowSidebar: checked,\n\t\t\t\t\t\t\t\t\t\t\t\t}))\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t{config.showSidebar && (\n\t\t\t\t\t\t\t\t\t<div className=\"space-y-2\">\n\t\t\t\t\t\t\t\t\t\t<Label className=\"text-sm\">\n\t\t\t\t\t\t\t\t\t\t\tSidebar Position\n\t\t\t\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t\t\t\t<Select\n\t\t\t\t\t\t\t\t\t\t\tvalue={config.sidebarPosition}\n\t\t\t\t\t\t\t\t\t\t\tonValueChange={(\n\t\t\t\t\t\t\t\t\t\t\t\tvalue: \"left\" | \"right\" | \"top\" | \"bottom\"\n\t\t\t\t\t\t\t\t\t\t\t) =>\n\t\t\t\t\t\t\t\t\t\t\t\tsetConfig((prev) => ({\n\t\t\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t\t\tsidebarPosition: value,\n\t\t\t\t\t\t\t\t\t\t\t\t}))\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<SelectTrigger>\n\t\t\t\t\t\t\t\t\t\t\t\t<SelectValue />\n\t\t\t\t\t\t\t\t\t\t\t</SelectTrigger>\n\t\t\t\t\t\t\t\t\t\t\t<SelectContent>\n\t\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"left\">Left</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"right\">Right</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t</SelectContent>\n\t\t\t\t\t\t\t\t\t\t</Select>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t<div className=\"space-y-2 md:col-span-2 lg:col-span-1\">\n\t\t\t\t\t\t\t\t\t<Label className=\"text-sm\">Quick Presets</Label>\n\t\t\t\t\t\t\t\t\t<div className=\"flex gap-2\">\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"flex-1 bg-transparent\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\t\t\t\t\tsetConfig((prev) => ({\n\t\t\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant: \"chrome\",\n\t\t\t\t\t\t\t\t\t\t\t\t\theaderStyle: \"full\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tshowSidebar: true,\n\t\t\t\t\t\t\t\t\t\t\t\t\tsize: \"lg\",\n\t\t\t\t\t\t\t\t\t\t\t\t}))\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\tChrome Dashboard\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"flex-1 bg-transparent\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\t\t\t\t\tsetConfig((prev) => ({\n\t\t\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant: \"safari\",\n\t\t\t\t\t\t\t\t\t\t\t\t\theaderStyle: \"minimal\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tshowSidebar: false,\n\t\t\t\t\t\t\t\t\t\t\t\t\tsize: \"md\",\n\t\t\t\t\t\t\t\t\t\t\t\t}))\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\tSafari Minimal\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</main>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/browserwindowusage.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport {\n\tSelect,\n\tSelectContent,\n\tSelectItem,\n\tSelectTrigger,\n\tSelectValue,\n} from \"@/components/ui/select\";\nimport { Switch } from \"@/components/ui/switch\";\nimport { BrowserWindow } from \"@/registry/open-source/browser-window\";\n\nexport function DemoPage() {\n\tconst [config, setConfig] = useState({\n\t\tvariant: \"chrome\" as \"chrome\" | \"safari\",\n\t\theaderStyle: \"full\" as \"minimal\" | \"full\",\n\t\tsize: \"lg\" as \"sm\" | \"md\" | \"lg\" | \"xl\",\n\t\tshowSidebar: true,\n\t\tsidebarPosition: \"left\" as \"left\" | \"right\" | \"top\" | \"bottom\",\n\t\turl: \"https://example.com/dashboard\",\n\t});\n\n\tconst [sidebarItems] = useState([\n\t\t{ label: \"Overview\", active: true },\n\t\t{ label: \"Users\", badge: \"12\" },\n\t\t{ label: \"Analytics\", badge: \"new\" },\n\t\t{ label: \"Settings\" },\n\t]);\n\n\treturn (\n\t\t<div className=\"min-h-screen \">\n\t\t\t<main className=\"container \">\n\t\t\t\t<div className=\"mx-auto max-w-7xl\">\n\t\t\t\t\t<div className=\"space-y-12\">\n\t\t\t\t\t\t<div className=\"space-y-8\">\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t<h2 className=\"text-lg font-semibold mb-6\">Preview</h2>\n\t\t\t\t\t\t\t\t<div className=\"flex justify-center p-8 bg-muted/30 rounded-xl border\">\n\t\t\t\t\t\t\t\t\t<BrowserWindow\n\t\t\t\t\t\t\t\t\t\tvariant={config.variant}\n\t\t\t\t\t\t\t\t\t\theaderStyle={config.headerStyle}\n\t\t\t\t\t\t\t\t\t\tsize={config.size}\n\t\t\t\t\t\t\t\t\t\tshowSidebar={config.showSidebar}\n\t\t\t\t\t\t\t\t\t\tsidebarPosition={config.sidebarPosition}\n\t\t\t\t\t\t\t\t\t\turl={config.url}\n\t\t\t\t\t\t\t\t\t\tsidebarItems={\n\t\t\t\t\t\t\t\t\t\t\tconfig.showSidebar ? sidebarItems : undefined\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tclassName=\"w-full max-w-4xl\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div className=\"space-y-8\">\n\t\t\t\t\t\t\t<h2 className=\"text-lg font-semibold\">Window Settings</h2>\n\t\t\t\t\t\t\t<div className=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n\t\t\t\t\t\t\t\t<div className=\"space-y-2\">\n\t\t\t\t\t\t\t\t\t<Label className=\"text-sm\">Browser</Label>\n\t\t\t\t\t\t\t\t\t<Select\n\t\t\t\t\t\t\t\t\t\tvalue={config.variant}\n\t\t\t\t\t\t\t\t\t\tonValueChange={(value: \"chrome\" | \"safari\") =>\n\t\t\t\t\t\t\t\t\t\t\tsetConfig((prev) => ({\n\t\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t\tvariant: value,\n\t\t\t\t\t\t\t\t\t\t\t}))\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<SelectTrigger>\n\t\t\t\t\t\t\t\t\t\t\t<SelectValue />\n\t\t\t\t\t\t\t\t\t\t</SelectTrigger>\n\t\t\t\t\t\t\t\t\t\t<SelectContent>\n\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"chrome\">Chrome</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"safari\">Safari</SelectItem>\n\t\t\t\t\t\t\t\t\t\t</SelectContent>\n\t\t\t\t\t\t\t\t\t</Select>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t<div className=\"space-y-2\">\n\t\t\t\t\t\t\t\t\t<Label className=\"text-sm\">Header Style</Label>\n\t\t\t\t\t\t\t\t\t<Select\n\t\t\t\t\t\t\t\t\t\tvalue={config.headerStyle}\n\t\t\t\t\t\t\t\t\t\tonValueChange={(value: \"minimal\" | \"full\") =>\n\t\t\t\t\t\t\t\t\t\t\tsetConfig((prev) => ({\n\t\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t\theaderStyle: value,\n\t\t\t\t\t\t\t\t\t\t\t}))\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<SelectTrigger>\n\t\t\t\t\t\t\t\t\t\t\t<SelectValue />\n\t\t\t\t\t\t\t\t\t\t</SelectTrigger>\n\t\t\t\t\t\t\t\t\t\t<SelectContent>\n\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"minimal\">\n\t\t\t\t\t\t\t\t\t\t\t\tMinimal\n\t\t\t\t\t\t\t\t\t\t\t</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"full\">\n\t\t\t\t\t\t\t\t\t\t\t\tAddress Bar\n\t\t\t\t\t\t\t\t\t\t\t</SelectItem>\n\t\t\t\t\t\t\t\t\t\t</SelectContent>\n\t\t\t\t\t\t\t\t\t</Select>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t<div className=\"space-y-2\">\n\t\t\t\t\t\t\t\t\t<Label className=\"text-sm\">Size</Label>\n\t\t\t\t\t\t\t\t\t<Select\n\t\t\t\t\t\t\t\t\t\tvalue={config.size}\n\t\t\t\t\t\t\t\t\t\tonValueChange={(\n\t\t\t\t\t\t\t\t\t\t\tvalue: \"sm\" | \"md\" | \"lg\" | \"xl\"\n\t\t\t\t\t\t\t\t\t\t) =>\n\t\t\t\t\t\t\t\t\t\t\tsetConfig((prev) => ({ ...prev, size: value }))\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<SelectTrigger>\n\t\t\t\t\t\t\t\t\t\t\t<SelectValue />\n\t\t\t\t\t\t\t\t\t\t</SelectTrigger>\n\t\t\t\t\t\t\t\t\t\t<SelectContent>\n\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"sm\">Small</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"md\">Medium</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"lg\">Large</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"xl\">Extra Large</SelectItem>\n\t\t\t\t\t\t\t\t\t\t</SelectContent>\n\t\t\t\t\t\t\t\t\t</Select>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t<div className=\"space-y-2 md:col-span-2 lg:col-span-1\">\n\t\t\t\t\t\t\t\t\t<Label className=\"text-sm\">URL</Label>\n\t\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\t\tvalue={config.url}\n\t\t\t\t\t\t\t\t\t\tonChange={(e) =>\n\t\t\t\t\t\t\t\t\t\t\tsetConfig((prev) => ({\n\t\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t\turl: e.target.value,\n\t\t\t\t\t\t\t\t\t\t\t}))\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tplaceholder=\"https://example.com\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t<div className=\"space-y-2\">\n\t\t\t\t\t\t\t\t\t<div className=\"flex items-center justify-between\">\n\t\t\t\t\t\t\t\t\t\t<Label className=\"text-sm\">Show Sidebar</Label>\n\t\t\t\t\t\t\t\t\t\t<Switch\n\t\t\t\t\t\t\t\t\t\t\tchecked={config.showSidebar}\n\t\t\t\t\t\t\t\t\t\t\tonCheckedChange={(checked) =>\n\t\t\t\t\t\t\t\t\t\t\t\tsetConfig((prev) => ({\n\t\t\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t\t\tshowSidebar: checked,\n\t\t\t\t\t\t\t\t\t\t\t\t}))\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t{config.showSidebar && (\n\t\t\t\t\t\t\t\t\t<div className=\"space-y-2\">\n\t\t\t\t\t\t\t\t\t\t<Label className=\"text-sm\">\n\t\t\t\t\t\t\t\t\t\t\tSidebar Position\n\t\t\t\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t\t\t\t<Select\n\t\t\t\t\t\t\t\t\t\t\tvalue={config.sidebarPosition}\n\t\t\t\t\t\t\t\t\t\t\tonValueChange={(\n\t\t\t\t\t\t\t\t\t\t\t\tvalue: \"left\" | \"right\" | \"top\" | \"bottom\"\n\t\t\t\t\t\t\t\t\t\t\t) =>\n\t\t\t\t\t\t\t\t\t\t\t\tsetConfig((prev) => ({\n\t\t\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t\t\tsidebarPosition: value,\n\t\t\t\t\t\t\t\t\t\t\t\t}))\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<SelectTrigger>\n\t\t\t\t\t\t\t\t\t\t\t\t<SelectValue />\n\t\t\t\t\t\t\t\t\t\t\t</SelectTrigger>\n\t\t\t\t\t\t\t\t\t\t\t<SelectContent>\n\t\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"left\">Left</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"right\">Right</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t</SelectContent>\n\t\t\t\t\t\t\t\t\t\t</Select>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t<div className=\"space-y-2 md:col-span-2 lg:col-span-1\">\n\t\t\t\t\t\t\t\t\t<Label className=\"text-sm\">Quick Presets</Label>\n\t\t\t\t\t\t\t\t\t<div className=\"flex gap-2\">\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"flex-1 bg-transparent\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\t\t\t\t\tsetConfig((prev) => ({\n\t\t\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant: \"chrome\",\n\t\t\t\t\t\t\t\t\t\t\t\t\theaderStyle: \"full\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tshowSidebar: true,\n\t\t\t\t\t\t\t\t\t\t\t\t\tsize: \"lg\",\n\t\t\t\t\t\t\t\t\t\t\t\t}))\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\tChrome Dashboard\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"flex-1 bg-transparent\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\t\t\t\t\tsetConfig((prev) => ({\n\t\t\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant: \"safari\",\n\t\t\t\t\t\t\t\t\t\t\t\t\theaderStyle: \"minimal\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tshowSidebar: false,\n\t\t\t\t\t\t\t\t\t\t\t\t\tsize: \"md\",\n\t\t\t\t\t\t\t\t\t\t\t\t}))\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\tSafari Minimal\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</main>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/button.tsx",
      "content": "import * as React from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\n\r\nconst buttonVariants = cva(\r\n\t\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm text-white hover:text-gray-400 font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\r\n\t{\r\n\t\tvariants: {\r\n\t\t\tvariant: {\r\n\t\t\t\tsimple:\r\n\t\t\t\t\t\"bg-secondary relative z-10 bg-transparent hover:border-secondary hover:bg-secondary/50  border border-transparent dark:text-white text-sm md:text-sm transition font-medium duration-200  rounded-md px-4 py-2  flex items-center justify-center\",\r\n\t\t\t\tdefault: \"bg-primary text-primary-foreground hover:bg-primary/90\",\r\n\t\t\t\tdestructive:\r\n\t\t\t\t\t\"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\r\n\t\t\t\toutline:\r\n\t\t\t\t\t\"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\r\n\t\t\t\tsecondary:\r\n\t\t\t\t\t\"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n\t\t\t\tghost: \"hover:bg-accent hover:text-black hover:stroke-black dark:text-white text-black\",\r\n\t\t\t\tlink: \"text-primary underline-offset-4 hover:underline\",\r\n\t\t\t},\r\n\t\t\tsize: {\r\n\t\t\t\tdefault: \"h-10 px-4 py-2\",\r\n\t\t\t\tsm: \"h-9 rounded-md px-3\",\r\n\t\t\t\tlg: \"h-11 rounded-md px-8\",\r\n\t\t\t\ticon: \"h-10 w-10\",\r\n\t\t\t},\r\n\t\t},\r\n\t\tdefaultVariants: {\r\n\t\t\tvariant: \"default\",\r\n\t\t\tsize: \"default\",\r\n\t\t},\r\n\t}\r\n);\r\n\r\nexport interface ButtonProps\r\n\textends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n\t\tVariantProps<typeof buttonVariants> {\r\n\tasChild?: boolean;\r\n}\r\n\r\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n\t({ className, variant, size, asChild = false, ...props }, ref) => {\r\n\t\tconst Comp = asChild ? Slot : \"button\";\r\n\t\treturn (\r\n\t\t\t<Comp\r\n\t\t\t\tclassName={cn(buttonVariants({ variant, size, className }))}\r\n\t\t\t\tref={ref}\r\n\t\t\t\t{...props}\r\n\t\t\t/>\r\n\t\t);\r\n\t}\r\n);\r\nButton.displayName = \"Button\";\r\n\r\nexport { Button, buttonVariants };\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/input.tsx",
      "content": "// SHADCN UI GENERATED CODE\n\nimport React from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\n\nexport interface InputProps\n\textends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n\t({ className, type, ...props }, ref) => {\n\t\treturn (\n\t\t\t<input\n\t\t\t\ttype={type}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t}\n);\nInput.displayName = \"Input\";\n\nexport { Input };\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/label.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nconst labelVariants = cva(\n\t\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n);\n\nconst Label = React.forwardRef<\n\tReact.ElementRef<typeof LabelPrimitive.Root>,\n\tReact.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n\t\tVariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n\t<LabelPrimitive.Root\n\t\tref={ref}\n\t\tclassName={cn(labelVariants(), className)}\n\t\t{...props}\n\t/>\n));\nLabel.displayName = LabelPrimitive.Root.displayName;\n\nexport { Label };\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/switch.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\";\r\n\r\nconst Switch = React.forwardRef<\r\n\tReact.ElementRef<typeof SwitchPrimitives.Root>,\r\n\tReact.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>\r\n>(({ className, ...props }, ref) => (\r\n\t<SwitchPrimitives.Root\r\n\t\tclassName={cn(\r\n\t\t\t\"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\",\r\n\t\t\tclassName\r\n\t\t)}\r\n\t\t{...props}\r\n\t\tref={ref}\r\n\t>\r\n\t\t<SwitchPrimitives.Thumb\r\n\t\t\tclassName={cn(\r\n\t\t\t\t\"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0\"\r\n\t\t\t)}\r\n\t\t/>\r\n\t</SwitchPrimitives.Root>\r\n));\r\nSwitch.displayName = SwitchPrimitives.Root.displayName;\r\n\r\nexport { Switch };\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/browser-window.tsx",
      "content": "import type React from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\n\ninterface SidebarItem {\n\ticon?: React.ReactNode;\n\tlabel: string;\n\tactive?: boolean;\n\tbadge?: string | number;\n}\n\ninterface WindowControlsProps {\n\tvariant?: \"macos\" | \"windows\" | \"chrome\" | \"safari\";\n\theaderStyle?: \"minimal\" | \"full\";\n}\n\ninterface AddressBarProps {\n\turl?: string;\n\tsecure?: boolean;\n\tvariant?: \"chrome\" | \"safari\";\n\tclassName?: string;\n}\n\ninterface SidebarContentProps {\n\titems?: SidebarItem[];\n\tvariant?: \"navigation\" | \"bookmarks\" | \"history\" | \"extensions\";\n\tclassName?: string;\n}\n\ninterface BrowserWindowProps {\n\tchildren?: React.ReactNode;\n\tclassName?: string;\n\tsize?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n\tshowSidebar?: boolean;\n\tsidebarPosition?: \"left\" | \"right\" | \"top\" | \"bottom\";\n\theaderStyle?: \"minimal\" | \"full\";\n\tvariant?: \"chrome\" | \"safari\" | \"generic\";\n\ttheme?: \"light\" | \"dark\" | \"auto\";\n\turl?: string;\n\tsidebarItems?: Array<{\n\t\ticon?: React.ReactNode;\n\t\tlabel: string;\n\t\tactive?: boolean;\n\t\tbadge?: string | number;\n\t}>;\n}\n\nfunction WindowControls({\n\tvariant = \"macos\",\n\theaderStyle = \"full\",\n}: WindowControlsProps) {\n\tconst sizeClasses = \"size-2\";\n\n\tif (variant === \"macos\" || variant === \"safari\") {\n\t\tconst dotColors =\n\t\t\theaderStyle === \"minimal\"\n\t\t\t\t? {\n\t\t\t\t\tred: \"bg-muted border  border-foreground/20\",\n\t\t\t\t\tyellow: \"bg-muted border border-foreground/20\",\n\t\t\t\t\tgreen: \"bg-muted border border-foreground/20\",\n\t\t\t\t}\n\t\t\t\t: {\n\t\t\t\t\tred: \"bg-red-500 hover:bg-red-600 border border-foreground/20\",\n\t\t\t\t\tyellow:\n\t\t\t\t\t\t\"bg-yellow-500 hover:bg-yellow-600 border border-foreground/20\",\n\t\t\t\t\tgreen: \"bg-green-500 hover:bg-green-600 border border-foreground/20 \",\n\t\t\t\t};\n\n\t\treturn (\n\t\t\t<div className=\"flex gap-2\">\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\tsizeClasses,\n\t\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\tdotColors.red,\n\t\t\t\t\t\t\"transition-colors cursor-pointer flex items-center justify-center group\"\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{headerStyle !== \"minimal\" && (\n\t\t\t\t\t\t<div className=\"w-1.5 h-0.5 bg-red-900/60 opacity-0 group-hover:opacity-100 transition-opacity\"></div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\tsizeClasses,\n\t\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\tdotColors.yellow,\n\t\t\t\t\t\t\"transition-colors cursor-pointer flex items-center justify-center group\"\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{headerStyle !== \"minimal\" && (\n\t\t\t\t\t\t<div className=\"w-1.5 h-0.5 bg-yellow-900/60 opacity-0 group-hover:opacity-100 transition-opacity\"></div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\tsizeClasses,\n\t\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\tdotColors.green,\n\t\t\t\t\t\t\"transition-colors cursor-pointer flex items-center justify-center group\"\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{headerStyle !== \"minimal\" && (\n\t\t\t\t\t\t<div className=\"w-1 h-1 border border-green-900/60 opacity-0 group-hover:opacity-100 transition-opacity\"></div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tif (variant === \"windows\") {\n\t\treturn (\n\t\t\t<div className=\"flex gap-1\">\n\t\t\t\t<div className=\"w-6 h-4 bg-muted/50 hover:bg-muted transition-colors cursor-pointer flex items-center justify-center\">\n\t\t\t\t\t<div className=\"w-2 h-0.5 bg-foreground/60\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"w-6 h-4 bg-muted/50 hover:bg-muted transition-colors cursor-pointer flex items-center justify-center\">\n\t\t\t\t\t<div className=\"w-2 h-2 border border-foreground/60\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"w-6 h-4 bg-red-500/80 hover:bg-red-500 transition-colors cursor-pointer flex items-center justify-center\">\n\t\t\t\t\t<div className=\"w-2 h-0.5 bg-white rotate-45\"></div>\n\t\t\t\t\t<div className=\"w-2 h-0.5 bg-white -rotate-45 absolute\"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tif (variant === \"chrome\") {\n\t\treturn (\n\t\t\t<div className=\"flex gap-1.5\">\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\tsizeClasses,\n\t\t\t\t\t\t\"rounded-full bg-red-500 hover:bg-red-600 transition-colors cursor-pointer\"\n\t\t\t\t\t)}\n\t\t\t\t></div>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\tsizeClasses,\n\t\t\t\t\t\t\"rounded-full bg-yellow-500 hover:bg-yellow-600 transition-colors cursor-pointer\"\n\t\t\t\t\t)}\n\t\t\t\t></div>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\tsizeClasses,\n\t\t\t\t\t\t\"rounded-full bg-green-500 hover:bg-green-600 transition-colors cursor-pointer\"\n\t\t\t\t\t)}\n\t\t\t\t></div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div className=\"flex gap-1.5\">\n\t\t\t<div\n\t\t\t\tclassName={`${sizeClasses} rounded-full border border-foreground/20 bg-foreground/10`}\n\t\t\t></div>\n\t\t\t<div\n\t\t\t\tclassName={`${sizeClasses} rounded-full border border-foreground/20 bg-foreground/10`}\n\t\t\t></div>\n\t\t\t<div\n\t\t\t\tclassName={`${sizeClasses} rounded-full border border-foreground/20 bg-foreground/10`}\n\t\t\t></div>\n\t\t</div>\n\t);\n}\n\nfunction AddressBar({\n\turl = \"https://example.com\",\n\tsecure = true,\n\tvariant = \"chrome\",\n\tclassName = \"\",\n}: AddressBarProps) {\n\tconst variantStyles = {\n\t\tchrome:\n\t\t\t\"bg-muted/30 rounded-full border border-foreground/5 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.03)_inset] backdrop-blur-xs\",\n\t\tsafari:\n\t\t\t\"bg-muted/20 rounded-lg border border-foreground/5 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.03)_inset] backdrop-blur-xs\",\n\t};\n\n\tconst iconColors = {\n\t\tchrome: \"text-muted-foreground/60\",\n\t\tsafari: \"text-muted-foreground/60\",\n\t};\n\n\treturn (\n\t\t<div className={`flex-1 flex justify-center ${className}`}>\n\t\t\t<div\n\t\t\t\tclassName={`${variantStyles[variant]} px-4 py-2 text-xs text-muted-foreground/70 min-w-[200px] max-w-md flex items-center gap-2 transition-colors`}\n\t\t\t>\n\t\t\t\t{secure && (\n\t\t\t\t\t<div className={`w-3 h-3 ${iconColors[variant]}`}>\n\t\t\t\t\t\t<svg viewBox=\"0 0 12 12\" fill=\"currentColor\">\n\t\t\t\t\t\t\t<title>Secure</title>\n\t\t\t\t\t\t\t<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\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<span className=\"truncate\">{url}</span>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction SidebarContent({\n\titems = [\n\t\t{ label: \"Dashboard\", active: true },\n\t\t{ label: \"Analytics\", badge: \"3\" },\n\t\t{ label: \"Settings\" },\n\t\t{ label: \"Profile\" },\n\t],\n\tclassName = \"\",\n}: SidebarContentProps) {\n\treturn (\n\t\t<div className={`p-3 space-y-1 ${className}`}>\n\t\t\t{items.map((item, index) => (\n\t\t\t\t<div\n\t\t\t\t\tkey={`${item.label}-${index}`}\n\t\t\t\t\tclassName={`\n            flex items-center gap-2 px-2 py-1.5 rounded text-sm transition-colors cursor-pointer\n            ${item.active\n\t\t\t\t\t\t\t? \"bg-primary/5 text-primary border border-primary/5\"\n\t\t\t\t\t\t\t: \"text-muted-foreground hover:text-foreground hover:bg-muted/20\"\n\t\t\t\t\t\t}\n          `}\n\t\t\t\t>\n\t\t\t\t\t{item.icon && (\n\t\t\t\t\t\t<div className=\"w-4 h-4 shrink-0\">{item.icon}</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<span className=\"flex-1 truncate\">{item.label}</span>\n\t\t\t\t\t{item.badge && (\n\t\t\t\t\t\t<div className=\"bg-primary/5 text-primary text-xs px-1.5 py-0.5 rounded-full min-w-[16px] text-center\">\n\t\t\t\t\t\t\t{item.badge}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n}\n\nexport function BrowserWindow({\n\tchildren,\n\tclassName = \"\",\n\tsize = \"md\",\n\tshowSidebar = false,\n\tsidebarPosition = \"left\",\n\theaderStyle = \"minimal\",\n\tvariant = \"generic\",\n\ttheme = \"auto\",\n\turl,\n\tsidebarItems,\n}: BrowserWindowProps) {\n\tconst sizeClasses = {\n\t\tsm: \"h-64 max-w-sm\",\n\t\tmd: \"h-80 max-w-2xl\",\n\t\tlg: \"h-96 max-w-4xl\",\n\t\txl: \"h-128 max-w-6xl\",\n\t};\n\n\tconst sidebarSizes = {\n\t\tsm: \"w-32\",\n\t\tmd: \"w-48\",\n\t\tlg: \"w-56\",\n\t\txl: \"w-64\",\n\t};\n\n\tconst themeClasses =\n\t\ttheme === \"dark\"\n\t\t\t? \"bg-background border-border\"\n\t\t\t: theme === \"light\"\n\t\t\t\t? \"bg-background border-border\"\n\t\t\t\t: \"bg-background border-border\";\n\n\tconst getHeaderStyles = () => {\n\t\tconst baseStyles =\n\t\t\t\"h-11 border-b border-foreground/5 flex items-center px-4\";\n\n\t\tif (variant === \"chrome\") {\n\t\t\treturn `${baseStyles} bg-muted/10 overflow-hidden`;\n\t\t}\n\n\t\tif (variant === \"safari\") {\n\t\t\treturn `${baseStyles} bg-muted/10 overflow-hidden border-b border-border/30`;\n\t\t}\n\n\t\treturn `${baseStyles} bg-muted/20`;\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`\n        relative mask-b-from-50% rounded-2xl border 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)]\n        ${sizeClasses[size]} ${themeClasses} ${className} flex flex-col\n      `}\n\t\t>\n\t\t\t<div className={getHeaderStyles()}>\n\t\t\t\t<WindowControls\n\t\t\t\t\tvariant={variant === \"generic\" ? \"macos\" : variant}\n\t\t\t\t\theaderStyle={headerStyle}\n\t\t\t\t/>\n\n\t\t\t\t{headerStyle === \"full\" && (\n\t\t\t\t\t<AddressBar\n\t\t\t\t\t\turl={url}\n\t\t\t\t\t\tvariant={variant === \"generic\" ? \"chrome\" : variant}\n\t\t\t\t\t\tclassName=\"ml-4\"\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t{showSidebar && sidebarPosition === \"top\" && (\n\t\t\t\t<div className=\"border-b border-foreground/5 bg-muted/20 h-16\">\n\t\t\t\t\t<SidebarContent\n\t\t\t\t\t\titems={sidebarItems}\n\t\t\t\t\t\tvariant=\"navigation\"\n\t\t\t\t\t\tclassName=\"flex-row\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t<div className=\"flex flex-1 h-0\">\n\t\t\t\t{/* Left Sidebar */}\n\t\t\t\t{showSidebar && sidebarPosition === \"left\" && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={`border-r border-foreground/5 bg-muted/20 ${sidebarSizes[size]} shrink-0 h-full`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<SidebarContent items={sidebarItems} />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{/* Main Content Area */}\n\t\t\t\t<div className=\"flex-1 relative min-w-0 h-full\">\n\t\t\t\t\t{children || <div className=\"absolute inset-0\">{children}</div>}\n\t\t\t\t</div>\n\n\t\t\t\t{/* Right Sidebar */}\n\t\t\t\t{showSidebar && sidebarPosition === \"right\" && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={`border-l border-foreground/5 bg-muted/20 ${sidebarSizes[size]} shrink-0 h-full`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<SidebarContent items={sidebarItems} />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t{/* Bottom Sidebar */}\n\t\t\t{showSidebar && sidebarPosition === \"bottom\" && (\n\t\t\t\t<div className=\"border-t border-foreground/5 bg-muted/20 h-16\">\n\t\t\t\t\t<SidebarContent\n\t\t\t\t\t\titems={sidebarItems}\n\t\t\t\t\t\tvariant=\"navigation\"\n\t\t\t\t\t\tclassName=\"flex-row\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\n",
      "type": "registry:ui"
    }
  ]
}