{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-scroll-spy-walkthrough",
  "title": "Feature Scroll Spy Walkthrough",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/feature-scroll-spy-walkthrough/FeatureScrollSpyWalkthrough.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Rocket } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Card } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\ninterface 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\nexport interface FeatureScrollSpyWalkthroughProps {\n  className?: string\n}\n\nexport function FeatureScrollSpyWalkthrough({ className }: FeatureScrollSpyWalkthroughProps) {\n  const [activeStepIndex, setActiveStepIndex] = React.useState(0)\n  const currentStep = steps[activeStepIndex]\n\n  return (\n    <section\n      data-slot=\"feature-scroll-spy-walkthrough\"\n      className={cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', className)}\n    >\n      <div className=\"mx-auto max-w-6xl space-y-12\">\n        {/* Section Header */}\n        <div className=\"mx-auto max-w-3xl space-y-4 text-center\">\n          <Badge variant=\"secondary\" className=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n            <Rocket className=\"text-primary size-3.5\" />\n            End-to-End Developer Journey\n          </Badge>\n          <h2 className=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n            From first command to global production in minutes.\n          </h2>\n          <p className=\"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 className=\"grid grid-cols-1 items-start gap-8 lg:grid-cols-12\">\n          {/* Left: Step Navigation Cards (5 Cols) */}\n          <div className=\"space-y-3 lg:col-span-5\">\n            {steps.map((st, idx) => (\n              <div\n                key={st.id}\n                className={cn(\n                  'group relative cursor-pointer overflow-hidden rounded-2xl border p-5 text-left transition-colors',\n                  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                onClick={() => setActiveStepIndex(idx)}\n              >\n                <div className=\"flex items-start gap-4\">\n                  <div\n                    className={cn(\n                      'flex size-8 shrink-0 items-center justify-center rounded-lg font-mono text-xs font-bold transition-colors',\n                      activeStepIndex === idx\n                        ? 'bg-primary text-primary-foreground shadow-xs'\n                        : 'bg-muted text-muted-foreground',\n                    )}\n                  >\n                    {st.stepNumber}\n                  </div>\n\n                  <div className=\"min-w-0 flex-1 space-y-1\">\n                    <div className=\"flex items-center justify-between\">\n                      <h3 className=\"text-foreground truncate font-mono text-sm font-bold\">{st.title}</h3>\n                      <Badge variant=\"outline\" className=\"ml-2 shrink-0 font-mono text-xs\">\n                        {st.badgeText}\n                      </Badge>\n                    </div>\n                    <p className=\"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          <Card className=\"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            {/* Terminal Header Bar */}\n            <div className=\"border-border flex items-center justify-between border-b pb-4\">\n              <div className=\"flex items-center gap-2\">\n                <div className=\"bg-destructive/80 size-3 rounded-full\" />\n                <div className=\"bg-warning/80 size-3 rounded-full\" />\n                <div className=\"bg-success/80 size-3 rounded-full\" />\n                <span className=\"text-muted-foreground ml-2 font-mono text-xs\">\n                  stage_{currentStep.stepNumber}_{currentStep.id}.sh\n                </span>\n              </div>\n              <Badge variant=\"secondary\" className=\"border-success/20 bg-success/10 text-success font-mono text-xs\">\n                {currentStep.meta}\n              </Badge>\n            </div>\n\n            {/* Code Sandbox Body */}\n            <div className=\"space-y-2\">\n              <pre className=\"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>\n              </pre>\n            </div>\n\n            {/* Step Progression Navigator */}\n            <div className=\"border-border flex items-center justify-between border-t pt-2 font-mono text-xs\">\n              <button\n                type=\"button\"\n                className=\"text-muted-foreground hover:text-foreground disabled:pointer-events-none disabled:opacity-30\"\n                disabled={activeStepIndex === 0}\n                onClick={() => setActiveStepIndex((prev) => prev - 1)}\n              >\n                &larr; Previous Step\n              </button>\n\n              <span className=\"text-muted-foreground\">\n                Step {activeStepIndex + 1} of {steps.length}\n              </span>\n\n              <button\n                type=\"button\"\n                className=\"text-primary font-semibold hover:underline disabled:pointer-events-none disabled:opacity-30\"\n                disabled={activeStepIndex === steps.length - 1}\n                onClick={() => setActiveStepIndex((prev) => prev + 1)}\n              >\n                Next Step &rarr;\n              </button>\n            </div>\n          </Card>\n        </div>\n      </div>\n    </section>\n  )\n}\nexport default FeatureScrollSpyWalkthrough\n",
      "type": "registry:block",
      "target": "~/components/blocks/FeatureScrollSpyWalkthrough.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/card.json"
  ],
  "description": "Step-by-step 4-phase developer workflow progression with sticky live code terminal sandbox and instant stage inspector.",
  "categories": [
    "marketing"
  ]
}