{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "feature-scroll-spy-walkthrough",
  "title": "Feature Scroll Spy Walkthrough",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/feature-scroll-spy-walkthrough/feature-scroll-spy-walkthrough.component.ts",
      "content": "// 4-phase developer workflow walkthrough: clickable step cards on the left and a\n// sticky live terminal sandbox on the right with prev/next progression. Port of the\n// React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport { LucideAngularModule, Rocket } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiCardComponent } from '@/ui/card/card.component'\n\nexport interface WalkthroughStep {\n  id: string\n  stepNumber: string\n  title: string\n  subtitle: string\n  description: string\n  terminalOutput: string\n  badgeText: string\n  meta: string\n}\n\nconst steps: WalkthroughStep[] = [\n  {\n    id: 'init',\n    stepNumber: '01',\n    title: 'Initialize Registry Foundation',\n    subtitle: 'Zero configuration Tailwind tokens',\n    description:\n      'Run the init command to pull OKLCH color palettes, calibrated shadow tokens, spring physics curves, and cn() utility functions into your project.',\n    terminalOutput: `$ npx shadcn@latest add https://uipkge.dev/r/react/init.json -y\\n✔ Downloaded styles/tailwind.css (OKLCH tokens)\\n✔ Injected lib/utils.ts (cn helper)\\n✔ Configured @/ alias path mapping`,\n    badgeText: 'Instant Scaffolding',\n    meta: 'Execution time: 1.4s',\n  },\n  {\n    id: 'primitives',\n    stepNumber: '02',\n    title: 'Pull Headless Primitives',\n    subtitle: 'Radix UI powered primitives',\n    description:\n      'Pull accessible, keyboard-friendly primitives like Button, Card, Badge, and Sparklines directly into components/ui/ with full TypeScript type safety.',\n    terminalOutput: `$ npx shadcn@latest add @uipkge/button @uipkge/card -y\\n✔ Created components/ui/button/Button.tsx\\n✔ Created components/ui/button/button.variants.ts\\n✔ Zero npm package dependencies added`,\n    badgeText: 'AST Injection',\n    meta: 'Unbundled & Tree-shaken',\n  },\n  {\n    id: 'compose',\n    stepNumber: '03',\n    title: 'Compose Rich Workbenches',\n    subtitle: 'Visible markup with zero hidden templates',\n    description:\n      'Compose tiles, headers, and interactive state directly in your pages. No hidden wrapper abstractions or rigid data prop constraints.',\n    terminalOutput: `// In your React 19 JSX:\\nimport { Button } from '@/components/ui/button'\\nimport { Card } from '@/components/ui/card'\\n\\nexport function Workbench() {\\n  return <Card className=\"p-6\">...</Card>\\n}`,\n    badgeText: 'Raw Composition',\n    meta: '100% Code Ownership',\n  },\n  {\n    id: 'deploy',\n    stepNumber: '04',\n    title: 'Ship to Global Edge',\n    subtitle: 'Zero runtime overhead',\n    description:\n      'Deploy to Cloudflare, Vercel, or AWS with sub-millisecond cold starts and pristine 100/100 Core Web Vitals performance.',\n    terminalOutput: `$ npm run build\\n✔ Client build: 38.4 kB (Gzip: 11.2 kB)\\n✔ Lighthouse Performance: 100 / 100\\n✔ First Contentful Paint: 0.4s\\n🚀 Deployed to Edge CDN`,\n    badgeText: 'Production Ready',\n    meta: 'Zero CSS-in-JS Runtime',\n  },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-feature-scroll-spy-walkthrough, [ui-feature-scroll-spy-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: [LucideAngularModule, UiBadgeComponent, UiCardComponent],\n  template: `\n    <section data-slot=\"feature-scroll-spy-walkthrough\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-6xl space-y-12\">\n        <!-- Section Header -->\n        <div class=\"mx-auto max-w-3xl space-y-4 text-center\">\n          <span ui-badge variant=\"secondary\" class=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n            <lucide-icon [img]=\"Rocket\" class=\"text-primary size-3.5\" />\n            End-to-End Developer Journey\n          </span>\n          <h2 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n            From first command to global production in minutes.\n          </h2>\n          <p class=\"text-muted-foreground text-base\">\n            Follow the 4-stage unbundled workflow that gives your team total freedom and zero maintenance fatigue.\n          </p>\n        </div>\n\n        <!-- Interactive 2-Column Split: Steps Rail on Left, Sticky Live Sandbox on Right -->\n        <div class=\"grid grid-cols-1 items-start gap-8 lg:grid-cols-12\">\n          <!-- Left: Step Navigation Cards (5 Cols) -->\n          <div class=\"space-y-3 lg:col-span-5\">\n            @for (st of allSteps; track st.id; let idx = $index) {\n              <div [class]=\"stepCardClass(idx)\" (click)=\"activeStepIndex.set(idx)\">\n                <div class=\"flex items-start gap-4\">\n                  <div [class]=\"stepNumberClass(idx)\">\n                    {{ st.stepNumber }}\n                  </div>\n\n                  <div class=\"min-w-0 flex-1 space-y-1\">\n                    <div class=\"flex items-center justify-between\">\n                      <h3 class=\"text-foreground truncate font-mono text-sm font-bold\">{{ st.title }}</h3>\n                      <span ui-badge variant=\"outline\" class=\"ml-2 shrink-0 font-mono text-xs\">\n                        {{ st.badgeText }}\n                      </span>\n                    </div>\n                    <p class=\"text-muted-foreground text-xs leading-relaxed\">{{ st.description }}</p>\n                  </div>\n                </div>\n              </div>\n            }\n          </div>\n\n          <!-- Right: Sticky Live Sandbox Terminal Display (7 Cols) -->\n          <div\n            ui-card\n            class=\"border-border bg-card/95 sticky top-24 space-y-6 rounded-2xl p-6 text-left shadow-sm sm:p-8 lg:col-span-7\"\n          >\n            <!-- Terminal Header Bar -->\n            <div class=\"border-border flex items-center justify-between border-b pb-4\">\n              <div class=\"flex items-center gap-2\">\n                <div class=\"bg-destructive/80 size-3 rounded-full\"></div>\n                <div class=\"bg-warning/80 size-3 rounded-full\"></div>\n                <div class=\"bg-success/80 size-3 rounded-full\"></div>\n                <span class=\"text-muted-foreground ml-2 font-mono text-xs\">\n                  stage_{{ currentStep().stepNumber }}_{{ currentStep().id }}.sh\n                </span>\n              </div>\n              <span ui-badge variant=\"secondary\" class=\"border-success/20 bg-success/10 text-success font-mono text-xs\">\n                {{ currentStep().meta }}\n              </span>\n            </div>\n\n            <!-- Code Sandbox Body -->\n            <div class=\"space-y-2\">\n              <pre\n                class=\"border-border bg-muted/40 text-foreground overflow-x-auto rounded-xl border p-5 font-mono text-xs leading-relaxed whitespace-pre-wrap\"\n              ><code>{{ currentStep().terminalOutput }}</code></pre>\n            </div>\n\n            <!-- Step Progression Navigator -->\n            <div class=\"border-border flex items-center justify-between border-t pt-2 font-mono text-xs\">\n              <button\n                type=\"button\"\n                class=\"text-muted-foreground hover:text-foreground disabled:pointer-events-none disabled:opacity-30\"\n                [disabled]=\"activeStepIndex() === 0\"\n                (click)=\"prevStep()\"\n              >\n                &larr; Previous Step\n              </button>\n\n              <span class=\"text-muted-foreground\">Step {{ activeStepIndex() + 1 }} of {{ allSteps.length }}</span>\n\n              <button\n                type=\"button\"\n                class=\"text-primary font-semibold hover:underline disabled:pointer-events-none disabled:opacity-30\"\n                [disabled]=\"activeStepIndex() === allSteps.length - 1\"\n                (click)=\"nextStep()\"\n              >\n                Next Step &rarr;\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  `,\n})\nexport class UiFeatureScrollSpyWalkthroughComponent {\n  protected readonly Rocket = Rocket\n  protected readonly allSteps = steps\n\n  @Input() set initialStep(v: number) {\n    if (Number.isInteger(v) && v >= 0 && v < steps.length) this.activeStepIndex.set(v)\n  }\n  @Input('class') className?: string\n\n  readonly activeStepIndex = signal(0)\n\n  readonly currentStep = computed(() => steps[this.activeStepIndex()] ?? steps[0]!)\n\n  get rootClass(): string {\n    return cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', this.className)\n  }\n\n  stepCardClass(idx: number): string {\n    return cn(\n      'group relative cursor-pointer overflow-hidden rounded-2xl border p-5 text-left transition-colors',\n      this.activeStepIndex() === idx\n        ? 'border-primary/80 bg-card ring-primary/20 shadow-lg ring-1'\n        : 'border-border/70 bg-card/40 hover:border-border hover:bg-card/70',\n    )\n  }\n\n  stepNumberClass(idx: number): string {\n    return cn(\n      'flex size-8 shrink-0 items-center justify-center rounded-lg font-mono text-xs font-bold transition-colors',\n      this.activeStepIndex() === idx\n        ? 'bg-primary text-primary-foreground shadow-xs'\n        : 'bg-muted text-muted-foreground',\n    )\n  }\n\n  prevStep(): void {\n    this.activeStepIndex.update((i) => Math.max(0, i - 1))\n  }\n\n  nextStep(): void {\n    this.activeStepIndex.update((i) => Math.min(steps.length - 1, i + 1))\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/feature-scroll-spy-walkthrough/feature-scroll-spy-walkthrough.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/feature-scroll-spy-walkthrough/index.ts",
      "content": "export {\n  UiFeatureScrollSpyWalkthroughComponent,\n  type WalkthroughStep,\n} from './feature-scroll-spy-walkthrough.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/feature-scroll-spy-walkthrough/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/card.json"
  ],
  "description": "Step-by-step 4-phase developer workflow progression with sticky live code terminal sandbox and instant stage inspector.",
  "categories": [
    "marketing"
  ]
}