{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "demo-guided-tour",
  "title": "Demo — Guided Tour",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/demo-guided-tour/DemoGuidedTour.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { ArrowLeft, ArrowRight } from 'lucide-vue-next'\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\nconst index = ref(0)\nconst current = computed(() => steps[index.value])\nconst progress = computed(() => ((index.value + 1) / steps.length) * 100)\n</script>\n\n<template>\n  <section data-slot=\"demo-guided-tour\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-5xl px-6 py-20 lg:py-28\">\n      <div class=\"flex flex-wrap items-end justify-between gap-6\">\n        <div class=\"max-w-xl\">\n          <Badge variant=\"secondary\">Guided tour</Badge>\n          <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Four screens, ninety seconds</h2>\n        </div>\n        <Button variant=\"ghost\" size=\"sm\">Skip and just read the docs</Button>\n      </div>\n\n      <div class=\"mt-10 grid gap-6 lg:grid-cols-[1fr_1.3fr] lg:gap-10\">\n        <div>\n          <Progress :model-value=\"progress\" class=\"h-1\" aria-label=\"Tour progress\" />\n          <p class=\"text-muted-foreground mt-3 font-mono text-xs\">Step {{ index + 1 }} of {{ steps.length }}</p>\n\n          <!-- min-h holds the copy block at its tallest so the controls do not\n               move between steps. -->\n          <div class=\"min-h-[7rem]\">\n            <h3 class=\"mt-4 text-xl font-semibold tracking-tight\">{{ current.title }}</h3>\n            <p class=\"text-muted-foreground mt-2 leading-relaxed\">{{ current.body }}</p>\n          </div>\n\n          <div class=\"mt-5 flex items-center gap-2\">\n            <Button variant=\"outline\" size=\"sm\" :disabled=\"index === 0\" @click=\"index -= 1\">\n              <ArrowLeft class=\"mr-1.5 size-3.5\" aria-hidden=\"true\" />\n              Back\n            </Button>\n            <Button size=\"sm\" :disabled=\"index === steps.length - 1\" @click=\"index += 1\">\n              Next\n              <ArrowRight class=\"ml-1.5 size-3.5\" aria-hidden=\"true\" />\n            </Button>\n          </div>\n        </div>\n\n        <Card>\n          <CardContent class=\"space-y-2 p-4\">\n            <div\n              v-for=\"panel in panels\"\n              :key=\"panel.id\"\n              class=\"rounded-lg border p-3 transition-colors\"\n              :class=\"\n                panel.id === current.target ? 'border-primary bg-muted/40' : 'border-border bg-background opacity-60'\n              \"\n            >\n              <div class=\"flex items-center justify-between gap-3\">\n                <p class=\"font-mono text-xs font-medium\">{{ panel.label }}</p>\n                <Badge v-if=\"panel.id === current.target\" variant=\"secondary\">This step</Badge>\n              </div>\n              <Separator class=\"my-2\" />\n              <ul class=\"space-y-1\">\n                <li v-for=\"row in panel.rows\" :key=\"row\" class=\"text-muted-foreground truncate font-mono text-xs\">\n                  {{ row }}\n                </li>\n              </ul>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/DemoGuidedTour.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/progress.json",
    "https://uipkge.dev/r/vue/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"
  ]
}