{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "use-cases-scenario-walkthrough",
  "title": "Use Cases Scenario Walkthrough",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/use-cases-scenario-walkthrough/use-cases-scenario-walkthrough.component.ts",
      "content": "// One concrete scenario walked end to end as a numbered sequence of what happens,\n// who does it, and what the system records at each step. Port of the React block\n// 1:1 (static, no client state).\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { ArrowRight, LucideAngularModule } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\ninterface ScenarioStep {\n  actor: string\n  action: string\n  recorded: string\n}\n\nconst steps: ScenarioStep[] = [\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\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-use-cases-scenario-walkthrough, [ui-use-cases-scenario-walkthrough]',\n  standalone: true,\n  // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [\n    LucideAngularModule,\n    UiBadgeComponent,\n    UiButtonComponent,\n    UiCardComponent,\n    UiCardContentComponent,\n    UiSeparatorComponent,\n  ],\n  template: `\n    <section data-slot=\"use-cases-scenario-walkthrough\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-4xl px-6 py-20 lg:py-28\">\n        <div class=\"max-w-2xl\">\n          <span ui-badge variant=\"secondary\">A Tuesday</span>\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          @for (step of steps; track step.action; let i = $index) {\n            <li 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                  {{ (i + 1).toString().padStart(2, '0') }}\n                </span>\n                @if (i < steps.length - 1) {\n                  <span class=\"bg-border w-px grow\" aria-hidden=\"true\"></span>\n                }\n              </div>\n\n              <div ui-card class=\"mb-4\">\n                <div ui-card-content class=\"p-5\">\n                  <span ui-badge variant=\"outline\">{{ step.actor }}</span>\n                  <p class=\"mt-3 text-sm leading-relaxed\">{{ step.action }}</p>\n                  <ui-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                </div>\n              </div>\n            </li>\n          }\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 ui-button>\n            Walk through it yourself\n            <lucide-icon [img]=\"ArrowRight\" class=\"ml-2 size-4\" />\n          </button>\n        </div>\n      </div>\n    </section>\n  `,\n})\nexport class UiUseCasesScenarioWalkthroughComponent {\n  protected readonly ArrowRight = ArrowRight\n  protected readonly steps = steps\n\n  @Input('class') className?: string\n\n  get rootClass(): string {\n    return cn('bg-background', this.className)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/use-cases-scenario-walkthrough/use-cases-scenario-walkthrough.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/use-cases-scenario-walkthrough/index.ts",
      "content": "export { UiUseCasesScenarioWalkthroughComponent } from './use-cases-scenario-walkthrough.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/use-cases-scenario-walkthrough/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/card.json",
    "https://uipkge.dev/r/angular/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"
}