{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elements-web-preview",
  "type": "registry:component",
  "title": "Web preview",
  "description": "Chrome for a sandboxed preview: a URL bar, reload, and open-in-new around a frame you isolate.",
  "registryDependencies": [
    "https://r.assistant-ui.com/elements-surfaces.json"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/web-preview.tsx",
      "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { ExternalLinkIcon, RotateCwIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { field, ghostButton, mono, paper, ShimmerLabel } from \"./surfaces\";\n\n/**\n * Chrome around a preview: a URL bar, reload, and open-in-new. It renders\n * `children` as given and enforces no isolation of its own, so the caller is\n * responsible for passing an already-sandboxed frame.\n */\nexport function WebPreview({\n  origin,\n  loading,\n  children,\n  onReload,\n  onOpenExternal,\n  className,\n  ...props\n}: Omit<\n  ComponentProps<\"div\">,\n  \"origin\" | \"loading\" | \"children\" | \"onReload\" | \"onOpenExternal\"\n> & {\n  origin: string;\n  loading: boolean;\n  children: React.ReactNode;\n  onReload?: () => void;\n  onOpenExternal?: () => void;\n}) {\n  return (\n    <div\n      data-slot=\"web-preview\"\n      className={cn(\n        paper,\n        \"flex w-full max-w-md flex-col overflow-hidden rounded-2xl\",\n        className,\n      )}\n\n      {...props}\n    >\n      <div className=\"flex items-center gap-1.5 px-2.5 py-2\">\n        <button\n          type=\"button\"\n          aria-label=\"Reload the preview\"\n          onClick={onReload}\n          className={cn(ghostButton, \"size-7 shrink-0\")}\n        >\n          <RotateCwIcon\n            className={cn(\n              \"size-3.5\",\n              loading && \"animate-spin motion-reduce:animate-none\",\n            )}\n          />\n        </button>\n\n        <span\n          className={cn(\n            field,\n            \"flex min-w-0 flex-1 items-center gap-1.5 rounded-full px-2.5 py-1\",\n          )}\n        >\n          <span className={cn(mono, \"text-foreground/45 min-w-0 truncate\")}>\n            {origin}\n          </span>\n        </span>\n\n        <button\n          type=\"button\"\n          aria-label=\"Open the preview in a new tab\"\n          onClick={onOpenExternal}\n          className={cn(ghostButton, \"size-7 shrink-0\")}\n        >\n          <ExternalLinkIcon className=\"size-3.5\" />\n        </button>\n      </div>\n\n      <div className=\"border-foreground/[0.07] relative min-h-[9rem] border-t\">\n        <div\n          aria-hidden={loading}\n          className={cn(\n            \"transition-opacity duration-300 motion-reduce:transition-none\",\n            loading && \"invisible opacity-0\",\n          )}\n        >\n          {children}\n        </div>\n        {loading && (\n          <div className=\"absolute inset-0 flex items-center justify-center\">\n            <ShimmerLabel className=\"text-foreground/40 relative inline-block text-xs leading-none\">\n              Loading preview\n            </ShimmerLabel>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"
    }
  ]
}