{"name":"screenshot-frame","title":"Screenshot Frame","type":"registry:ui","files":[{"path":"src/components/ui/screenshot-frame.tsx","type":"registry:ui","target":"@ui/screenshot-frame.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"./lib/utils\";\n\nexport interface ScreenshotFrameProps extends React.HTMLAttributes<HTMLDivElement> {\n  url: string;\n  children: React.ReactNode;\n}\n\n/** Browser chrome mockup frame: URL address bar + window controls. */\nexport function ScreenshotFrame({ url, children, className, ...props }: ScreenshotFrameProps) {\n  return (\n    <div className={cn(\"w-full overflow-hidden rounded-lg border border-border bg-card shadow-sm\", className)} {...props}>\n      <style>{`@keyframes sfIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }`}</style>\n      {/* URL bar */}\n      <div className=\"flex items-center gap-2 border-b border-border bg-secondary/60 px-3 py-2 animate-[sfIn_0.3s_ease-out_both] motion-reduce:animate-none\">\n        <span className=\"flex gap-1.5\" aria-hidden=\"true\">\n          <span className=\"size-2.5 rounded-full bg-destructive/70\" />\n          <span className=\"size-2.5 rounded-full bg-warning/70\" />\n          <span className=\"size-2.5 rounded-full bg-success/70\" />\n        </span>\n        <span className=\"min-w-0 flex-1 truncate rounded-sm bg-background px-2 py-0.5 font-mono text-[10px] text-muted-foreground\">{url}</span>\n      </div>\n      <div className=\"bg-background\">\n        {children}\n      </div>\n    </div>\n  );\n}\n"}],"registryDependencies":["https://ui.bigbullapp.com/r/utils.json"]}