{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "product-os-mock",
  "type": "registry:component",
  "title": "Product os mock",
  "description": "A mock product interface that auto cycles through inbox, pipeline and agents views with animated rows and progress bars. Click the sidebar to switch.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/badge.json",
    "https://ui.minidev.pro/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/product-os-mock.tsx",
      "type": "registry:ui",
      "target": "components/ui/product-os-mock.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Badge } from \"@/components/ui/badge\"\n\nconst STEPS = [\n  { title: \"Inbox\", detail: \"12 open · 3 SLA risk\", rows: [\"Acme renewal\", \"Billing dispute\", \"Seat upgrade\"] },\n  { title: \"Pipeline\", detail: \"Build #482 · green\", rows: [\"typecheck\", \"audit screenshots\", \"axe a11y\"] },\n  { title: \"Agents\", detail: \"2 running\", rows: [\"thicken stubs\", \"premium heroes\", \"docs DX\"] },\n]\n\nfunction ProductOsMock({ className }: { className?: string }) {\n  const reduce = useReducedMotion()\n  const [active, setActive] = React.useState(0)\n  React.useEffect(() => {\n    if (reduce) return\n    const id = window.setInterval(() => setActive((v) => (v + 1) % STEPS.length), 2800)\n    return () => window.clearInterval(id)\n  }, [reduce])\n  const step = STEPS[active]\n  return (\n    <section\n      data-slot=\"product-os-mock\"\n      data-tier=\"premium\"\n      className={cn(\n        \"overflow-hidden rounded-2xl border border-border bg-surface shadow-highlight\",\n        className\n      )}\n    >\n      <div className=\"flex items-center justify-between gap-2 border-b border-border px-3 py-3 sm:px-4\">\n        <div className=\"flex min-w-0 items-center gap-2\">\n          <span className=\"size-2.5 shrink-0 rounded-full bg-danger/80\" />\n          <span className=\"size-2.5 shrink-0 rounded-full bg-warning/80\" />\n          <span className=\"size-2.5 shrink-0 rounded-full bg-success/80\" />\n          <p className=\"ml-1 truncate font-mono text-[10px] text-fg-muted sm:ml-2 sm:text-xs\">\n            minidev.os — live product surface\n          </p>\n        </div>\n        <Badge variant=\"outline\" className=\"shrink-0\">Hairline</Badge>\n      </div>\n      <div className=\"grid gap-0 lg:grid-cols-[200px_1fr]\">\n        <aside className=\"border-b border-border bg-sunken p-3 lg:border-b-0 lg:border-r\">\n          <p className=\"px-2 text-[10px] font-medium uppercase tracking-[0.01em] text-fg-muted\">Workspace</p>\n          <ul className=\"mt-2 flex gap-1 overflow-x-auto pb-1 lg:block lg:space-y-1 lg:overflow-visible lg:pb-0\">\n            {STEPS.map((s, i) => (\n              <li key={s.title} className=\"shrink-0 lg:w-full\">\n                <button\n                  type=\"button\"\n                  onClick={() => setActive(i)}\n                  className={cn(\n                    \"flex items-center justify-between rounded-lg px-2.5 py-1.5 text-left text-sm outline-none transition-[background-color] duration-[70ms] focus-visible:ring-2 focus-visible:ring-accent lg:w-full\",\n                    i === active ? \"bg-surface text-fg shadow-highlight\" : \"text-fg-muted hover:text-fg\"\n                  )}\n                >\n                  {s.title}\n                  {i === active ? <span className=\"ml-2 size-1.5 rounded-full bg-accent lg:ml-0\" /> : null}\n                </button>\n              </li>\n            ))}\n          </ul>\n        </aside>\n        <div className=\"p-4 sm:p-5\">\n          <div className=\"flex flex-wrap items-start justify-between gap-3\">\n            <div className=\"min-w-0\">\n              <h3 className=\"text-lg font-medium tracking-[-0.014em] text-fg\">{step.title}</h3>\n              <p className=\"mt-1 text-sm text-fg-muted\">{step.detail}</p>\n            </div>\n            <Button size=\"sm\">New</Button>\n          </div>\n          <ul className=\"mt-5 space-y-2\">\n            {step.rows.map((row, i) => (\n              <motion.li\n                key={step.title + row}\n                initial={reduce ? false : { y: 8 }}\n                animate={{ y: 0 }}\n                transition={{ delay: i * 0.05, duration: 0.2, ease: [0.2, 0, 0, 1] }}\n                className=\"flex items-center justify-between gap-3 rounded-xl border border-border bg-bg px-3 py-2.5 shadow-highlight\"\n              >\n                <span className=\"min-w-0 truncate text-sm text-fg\">{row}</span>\n                <span className=\"shrink-0 font-mono text-[11px] text-fg-muted\">0{i + 1}</span>\n              </motion.li>\n            ))}\n          </ul>\n          <div className=\"mt-5 grid grid-cols-3 gap-1.5 sm:gap-2\">\n            {[72, 91, 64].map((n, i) => (\n              <div key={i} className=\"min-w-0 rounded-xl border border-border bg-sunken p-2 sm:p-3\">\n                <p className=\"text-[9px] uppercase tracking-[0.01em] text-fg-muted sm:text-[10px]\">KPI</p>\n                <p className=\"mt-1 text-base font-medium tabular-nums tracking-[-0.018em] text-fg sm:text-xl\">{n}%</p>\n                <div className=\"mt-2 h-1 overflow-hidden rounded-full bg-border\">\n                  <motion.div\n                    className=\"h-full bg-accent\"\n                    initial={reduce ? false : { width: 0 }}\n                    animate={{ width: `${n}%` }}\n                    transition={{ duration: 0.45, delay: 0.1 + i * 0.05 }}\n                  />\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\nexport { ProductOsMock }\n"
    }
  ]
}