{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "browser-frame", "title": "Browser Frame", "description": "A Safari-style window with traffic lights, a padlocked address field and optional tabs. Children render as the page, at natural size or laid out at desktop width and scaled to fit.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "@tealmac/media" ], "files": [ { "path": "registry/tealmac/browser-frame.tsx", "content": "// Adapted from Ballmac UI (https://github.com/vamsiy78/ballmac-ui), MIT License, Copyright (c) 2026 Ballmac.\n\"use client\"\n\nimport * as React from \"react\"\nimport {\n ChevronLeft,\n ChevronRight,\n Copy,\n Globe,\n Lock,\n PanelLeft,\n Plus,\n RotateCw,\n Share,\n X,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Media } from \"@/registry/tealmac/media\"\n\ntype BrowserFrameTab = {\n /** Tab title. */\n title: string\n /** Optional favicon; defaults to a globe icon. */\n icon?: React.ReactNode\n}\n\ntype BrowserFrameProps = Omit, \"children\"> & {\n /** Page content. Ignored when `src` is set. */\n children?: React.ReactNode\n /** Address shown in the URL field. Safari shows just the domain, so a short value reads best. */\n url?: string\n /** Show the padlock before the address. */\n secure?: boolean\n /** Tabs shown in a strip under the toolbar. Omit for a single-tab window. */\n tabs?: (string | BrowserFrameTab)[]\n /** Index of the selected tab. */\n activeTab?: number\n /** Screenshot shown as the page, cropped to fill it. */\n src?: string\n /** Alternative text for `src`. */\n alt?: string\n /**\n * Width in CSS pixels that the page is laid out at; it is then scaled to fit, like a desktop\n * window shown small. Needs a fixed height, so it implies `aspectRatio` 16/10 unless you set one.\n */\n screenWidth?: number\n /** Aspect ratio of the page area, e.g. 16 / 10. Omit to let the content set the height. */\n aspectRatio?: number\n /** Class names for the page area. */\n screenClassName?: string\n}\n\n/** Lays screen content out at `screenWidth` CSS pixels and scales it to fit, without re-rendering. */\nfunction useScreenScale(screenWidth: number | undefined) {\n const ref = React.useRef(null)\n React.useEffect(() => {\n const screen = ref.current\n if (!screen || !screenWidth) return\n const measure = () =>\n screen.style.setProperty(\n \"--screen-scale\",\n String(screen.clientWidth / screenWidth)\n )\n measure()\n const observer = new ResizeObserver(measure)\n observer.observe(screen)\n return () => observer.disconnect()\n }, [screenWidth])\n return ref\n}\n\nconst toolbarIcon = \"size-4 shrink-0 text-muted-foreground\"\n\nfunction TrafficLights() {\n return (\n \n {[\n \"bg-(--traffic-close)\",\n \"bg-(--traffic-minimize)\",\n \"bg-(--traffic-zoom)\",\n ].map((color) => (\n \n ))}\n \n )\n}\n\nfunction BrowserFrame({\n url = \"acme.com\",\n secure = true,\n tabs,\n activeTab = 0,\n src,\n alt = \"\",\n screenWidth,\n aspectRatio,\n screenClassName,\n className,\n style,\n children,\n ...props\n}: BrowserFrameProps) {\n const scaled = !src && !!screenWidth\n const screenRef = useScreenScale(scaled ? screenWidth : undefined)\n const ratio = aspectRatio ?? (scaled || src ? 16 / 10 : undefined)\n const tabList = tabs?.map((tab) =>\n typeof tab === \"string\" ? { title: tab } : tab\n )\n\n return (\n \n {/* Toolbar */}\n \n \n
\n \n \n \n
\n \n {secure && (\n \n )}\n {url}\n