{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-guided-tour",
  "title": "Demo — Guided Tour",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/demo-guided-tour/DemoGuidedTour.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\nimport { ArrowLeft, ArrowRight } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport { Separator } from '@/components/ui/separator'\n\n// Each step names the panel it highlights, so the copy and the mock cannot\n// drift apart when someone reorders the tour.\nconst steps = [\n  {\n    target: 'catalog',\n    title: 'Start from the catalogue',\n    body: 'Every table we mirrored, with its freshness. Pick what the metric reads from.',\n  },\n  {\n    target: 'definition',\n    title: 'Write the definition',\n    body: 'The window, the owner, and the joins. This is the file that opens a pull request.',\n  },\n  {\n    target: 'consumers',\n    title: 'See who it affects',\n    body: 'Before publishing, the consumer list shows every dashboard and export that resolves it.',\n  },\n  {\n    target: 'history',\n    title: 'Check the history',\n    body: 'Every prior version with its reviewer, and a one-click revert to any of them.',\n  },\n]\n\nconst panels = [\n  { id: 'catalog', label: 'Catalogue', rows: ['warehouse.orders', 'warehouse.refunds', 'warehouse.fx_rates'] },\n  {\n    id: 'definition',\n    label: 'revenue_net.yml',\n    rows: ['window: trailing_28d', 'owner: finance-analytics', 'joins: refunds, fx'],\n  },\n  { id: 'consumers', label: 'Consumers', rows: ['Exec summary', 'Finance close pack', 'Partner API'] },\n  {\n    id: 'history',\n    label: 'History',\n    rows: ['v128 · 14 Feb · A. Reyes', 'v127 · 02 Jan · A. Reyes', 'v126 · 11 Dec · M. Ellery'],\n  },\n]\n\nexport function DemoGuidedTour() {\n  const [index, setIndex] = useState(0)\n  const current = steps[index]\n  const progress = ((index + 1) / steps.length) * 100\n\n  return (\n    <section data-slot=\"demo-guided-tour\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-5xl px-6 py-20 lg:py-28\">\n        <div className=\"flex flex-wrap items-end justify-between gap-6\">\n          <div className=\"max-w-xl\">\n            <Badge variant=\"secondary\">Guided tour</Badge>\n            <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Four screens, ninety seconds</h2>\n          </div>\n          <Button variant=\"ghost\" size=\"sm\">\n            Skip and just read the docs\n          </Button>\n        </div>\n\n        <div className=\"mt-10 grid gap-6 lg:grid-cols-[1fr_1.3fr] lg:gap-10\">\n          <div>\n            <Progress value={progress} className=\"h-1\" aria-label=\"Tour progress\" />\n            <p className=\"text-muted-foreground mt-3 font-mono text-xs\">\n              Step {index + 1} of {steps.length}\n            </p>\n\n            {/* min-h holds the copy block at its tallest so the controls do not\n                move between steps. */}\n            <div className=\"min-h-[7rem]\">\n              <h3 className=\"mt-4 text-xl font-semibold tracking-tight\">{current.title}</h3>\n              <p className=\"text-muted-foreground mt-2 leading-relaxed\">{current.body}</p>\n            </div>\n\n            <div className=\"mt-5 flex items-center gap-2\">\n              <Button variant=\"outline\" size=\"sm\" disabled={index === 0} onClick={() => setIndex(index - 1)}>\n                <ArrowLeft className=\"mr-1.5 size-3.5\" aria-hidden=\"true\" />\n                Back\n              </Button>\n              <Button size=\"sm\" disabled={index === steps.length - 1} onClick={() => setIndex(index + 1)}>\n                Next\n                <ArrowRight className=\"ml-1.5 size-3.5\" aria-hidden=\"true\" />\n              </Button>\n            </div>\n          </div>\n\n          <Card>\n            <CardContent className=\"space-y-2 p-4\">\n              {panels.map((panel) => (\n                <div\n                  key={panel.id}\n                  className={`rounded-lg border p-3 transition-colors ${\n                    panel.id === current.target\n                      ? 'border-primary bg-muted/40'\n                      : 'border-border bg-background opacity-60'\n                  }`}\n                >\n                  <div className=\"flex items-center justify-between gap-3\">\n                    <p className=\"font-mono text-xs font-medium\">{panel.label}</p>\n                    {panel.id === current.target && <Badge variant=\"secondary\">This step</Badge>}\n                  </div>\n                  <Separator className=\"my-2\" />\n                  <ul className=\"space-y-1\">\n                    {panel.rows.map((row) => (\n                      <li key={row} className=\"text-muted-foreground truncate font-mono text-xs\">\n                        {row}\n                      </li>\n                    ))}\n                  </ul>\n                </div>\n              ))}\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/DemoGuidedTour.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/progress.json",
    "https://uipkge.dev/r/react/separator.json"
  ],
  "description": "Step-through product tour where next and previous move a highlight across a mocked interface, with a step counter and a skip control.",
  "categories": [
    "marketing"
  ]
}