{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "use-cases-scenario-walkthrough",
  "title": "Use Cases — Scenario Walkthrough",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/use-cases-scenario-walkthrough/UseCasesScenarioWalkthrough.vue",
      "content": "<script setup lang=\"ts\">\nimport { 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 { Separator } from '@/components/ui/separator'\n\n// One concrete scenario beats four abstract ones: the reader can check it\n// against their own Tuesday.\nconst steps = [\n  {\n    actor: 'Controller',\n    action: 'Notices Q1 revenue in the board deck is £41k above the close pack.',\n    recorded: 'Nothing yet — this is the part that used to take a day to explain.',\n  },\n  {\n    actor: 'Controller',\n    action: 'Opens the metric and reads its history instead of asking the analytics team.',\n    recorded: 'Definition v127, changed 14 Feb by finance-analytics, reviewed by A. Reyes.',\n  },\n  {\n    actor: 'Analyst',\n    action: 'Sees the deck was built on v126, before the trailing window changed.',\n    recorded: 'Consumer list shows which dashboards still resolve the older version.',\n  },\n  {\n    actor: 'Analyst',\n    action: 'Republishes the deck against the current definition; the gap disappears.',\n    recorded: 'Publish event, with the before and after figures attached.',\n  },\n  {\n    actor: 'Auditor',\n    action: 'Six months later, asks why Q1 was restated.',\n    recorded: 'The whole chain above, exported as a single PDF in under a minute.',\n  },\n]\n</script>\n\n<template>\n  <section data-slot=\"use-cases-scenario-walkthrough\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-4xl px-6 py-20 lg:py-28\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">A Tuesday</Badge>\n        <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n          Two numbers disagree. Here is the whole sequence.\n        </h2>\n        <p class=\"text-muted-foreground mt-3 text-lg\">\n          Not a feature list — the actual path, including what the system writes down at each step.\n        </p>\n      </div>\n\n      <ol class=\"mt-12 space-y-4\">\n        <li v-for=\"(step, index) in steps\" :key=\"step.action\" class=\"grid grid-cols-[auto_1fr] gap-x-5\">\n          <div class=\"flex flex-col items-center\">\n            <span\n              class=\"border-border bg-card text-muted-foreground relative z-10 flex size-9 shrink-0 items-center justify-center rounded-full border font-mono text-xs font-semibold\"\n            >\n              {{ String(index + 1).padStart(2, '0') }}\n            </span>\n            <span v-if=\"index < steps.length - 1\" class=\"bg-border w-px grow\" aria-hidden=\"true\" />\n          </div>\n\n          <Card class=\"mb-4\">\n            <CardContent class=\"p-5\">\n              <Badge variant=\"outline\">{{ step.actor }}</Badge>\n              <p class=\"mt-3 text-sm leading-relaxed\">{{ step.action }}</p>\n              <Separator class=\"my-3\" />\n              <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                <span class=\"font-medium\">Recorded: </span>{{ step.recorded }}\n              </p>\n            </CardContent>\n          </Card>\n        </li>\n      </ol>\n\n      <div class=\"border-border mt-6 flex flex-wrap items-center justify-between gap-4 border-t pt-6\">\n        <p class=\"text-muted-foreground text-sm\">Total elapsed, start to resolution: about nine minutes.</p>\n        <Button>\n          Walk through it yourself\n          <ArrowRight class=\"ml-2 size-4\" aria-hidden=\"true\" />\n        </Button>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/UseCasesScenarioWalkthrough.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/separator.json"
  ],
  "description": "One concrete scenario walked end to end as a numbered sequence of what happens, who does it, and what the system records at each step.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "use-cases"
}