{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mockup-frame",
  "title": "Mockup Frame",
  "description": "Browser-frame UI placeholder for case studies.",
  "registryDependencies": [
    "@atroui/utils"
  ],
  "files": [
    {
      "path": "registry/default/ui/mockup-frame.tsx",
      "content": "import { cn } from \"@/lib/utils\";\n\nexport type MockupVariant = \"saas\" | \"ai\" | \"design\" | \"marketplace\";\nexport type MockupState = \"wireframe\" | \"shipped\";\n\ntype UiMockupFrameProps = {\n  variant?: MockupVariant;\n  state?: MockupState;\n  className?: string;\n  /** Accessible label for the decorative preview */\n  label?: string;\n};\n\n/**\n * Realistic browser-frame UI placeholder for case studies.\n * Wireframe = grey blocks; shipped = branded polish with amber accents.\n */\nexport function UiMockupFrame({\n  variant = \"saas\",\n  state = \"shipped\",\n  className,\n  label = \"Product UI preview mockup\",\n}: UiMockupFrameProps) {\n  const wireframe = state === \"wireframe\";\n\n  return (\n    <div\n      className={cn(\n        \"flex h-full w-full flex-col overflow-hidden rounded-lg border border-border-subtle bg-background shadow-sm\",\n        className\n      )}\n      role=\"img\"\n      aria-label={label}\n    >\n      {/* Browser chrome */}\n      <div className=\"flex items-center gap-2 border-b border-border-subtle bg-muted/50 px-3 py-2\">\n        <div className=\"flex gap-1.5\" aria-hidden>\n          <span className=\"size-2 rounded-full bg-red-400/80\" />\n          <span className=\"size-2 rounded-full bg-amber-400/80\" />\n          <span className=\"size-2 rounded-full bg-emerald-400/80\" />\n        </div>\n        <div className=\"mx-auto h-4 max-w-[55%] flex-1 rounded-md bg-muted\" aria-hidden />\n      </div>\n\n      <div className=\"flex min-h-0 flex-1\">\n        {/* Sidebar */}\n        <div\n          className={cn(\n            \"hidden w-[22%] shrink-0 border-r border-border-subtle p-2 sm:block\",\n            wireframe ? \"bg-muted/40\" : \"bg-surface\"\n          )}\n          aria-hidden\n        >\n          <div className={cn(\"mb-2 h-2 w-3/4 rounded\", wireframe ? \"bg-muted-foreground/20\" : \"bg-brand/30\")} />\n          {[1, 2, 3, 4].map((i) => (\n            <div\n              key={i}\n              className={cn(\n                \"mb-1.5 h-2 rounded\",\n                wireframe ? \"bg-muted-foreground/15\" : i === 1 ? \"bg-brand/20\" : \"bg-muted\"\n              )}\n            />\n          ))}\n        </div>\n\n        {/* Main content */}\n        <div className=\"flex min-w-0 flex-1 flex-col p-3\">\n          {variant === \"ai\" ? (\n            <AiMockup wireframe={wireframe} />\n          ) : variant === \"design\" ? (\n            <DesignMockup wireframe={wireframe} />\n          ) : variant === \"marketplace\" ? (\n            <MarketplaceMockup wireframe={wireframe} />\n          ) : (\n            <SaasMockup wireframe={wireframe} />\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction SaasMockup({ wireframe }: { wireframe: boolean }) {\n  return (\n    <>\n      <div className={cn(\"mb-3 h-3 w-1/2 rounded\", wireframe ? \"bg-muted-foreground/20\" : \"bg-foreground/80\")} />\n      <div className=\"grid flex-1 grid-cols-3 gap-2\">\n        {[1, 2, 3].map((i) => (\n          <div\n            key={i}\n            className={cn(\n              \"rounded-md border border-border-subtle p-2\",\n              wireframe ? \"bg-muted/50\" : \"bg-surface\"\n            )}\n          >\n            <div className={cn(\"h-2 w-2/3 rounded\", wireframe ? \"bg-muted-foreground/20\" : \"bg-brand/40\")} />\n            <div className={cn(\"mt-2 h-8 rounded\", wireframe ? \"bg-muted-foreground/10\" : \"bg-muted\")} />\n          </div>\n        ))}\n      </div>\n    </>\n  );\n}\n\nfunction AiMockup({ wireframe }: { wireframe: boolean }) {\n  return (\n    <div className=\"flex flex-1 flex-col gap-2\">\n      <div className={cn(\"h-16 rounded-lg border border-dashed p-2\", wireframe ? \"border-muted-foreground/20 bg-muted/30\" : \"border-brand/30 bg-brand/5\")}>\n        <div className={cn(\"h-2 w-1/3 rounded\", wireframe ? \"bg-muted-foreground/20\" : \"bg-brand/50\")} />\n        <div className={cn(\"mt-2 h-2 w-full rounded\", wireframe ? \"bg-muted-foreground/10\" : \"bg-muted\")} />\n      </div>\n      <div className={cn(\"mt-auto flex gap-2 rounded-lg p-2\", wireframe ? \"bg-muted/40\" : \"bg-surface border border-border-subtle\")}>\n        <div className={cn(\"size-6 shrink-0 rounded-full\", wireframe ? \"bg-muted-foreground/20\" : \"bg-brand/30\")} />\n        <div className=\"flex-1 space-y-1\">\n          <div className={cn(\"h-2 w-full rounded\", wireframe ? \"bg-muted-foreground/15\" : \"bg-muted\")} />\n          <div className={cn(\"h-2 w-4/5 rounded\", wireframe ? \"bg-muted-foreground/10\" : \"bg-muted\")} />\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction DesignMockup({ wireframe }: { wireframe: boolean }) {\n  return (\n    <div className=\"grid flex-1 grid-cols-2 gap-2\">\n      {[\"#f59e0b\", \"#1e293b\", \"#10b981\", \"#6366f1\"].map((color, i) => (\n        <div\n          key={i}\n          className={cn(\"rounded-md border border-border-subtle p-2\", wireframe ? \"bg-muted/40\" : \"bg-surface\")}\n        >\n          <div\n            className={cn(\n              \"h-6 w-6 rounded-full border border-border-subtle\",\n              wireframe ? \"bg-muted-foreground/20\" : \"\"\n            )}\n            style={wireframe ? undefined : { background: color }}\n          />\n          <div className={cn(\"mt-2 h-2 w-2/3 rounded\", wireframe ? \"bg-muted-foreground/15\" : \"bg-muted\")} />\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction MarketplaceMockup({ wireframe }: { wireframe: boolean }) {\n  return (\n    <div className=\"grid flex-1 grid-cols-2 gap-2\">\n      {[1, 2, 3, 4].map((i) => (\n        <div key={i} className={cn(\"overflow-hidden rounded-md border border-border-subtle\", wireframe ? \"bg-muted/40\" : \"bg-surface\")}>\n          <div className={cn(\"aspect-[4/3]\", wireframe ? \"bg-muted-foreground/10\" : \"bg-gradient-to-br from-brand/20 to-muted\")} />\n          <div className=\"p-1.5\">\n            <div className={cn(\"h-2 w-3/4 rounded\", wireframe ? \"bg-muted-foreground/20\" : \"bg-foreground/70\")} />\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/mockup-frame.tsx"
    }
  ],
  "type": "registry:ui"
}