{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "feature-scroll-spy-walkthrough",
  "title": "Feature Scroll Spy Walkthrough",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/feature-scroll-spy-walkthrough/FeatureScrollSpyWalkthrough.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Rocket } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Card } from '@/components/ui/card'\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-vue add https://uipkge.dev/r/vue/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: 'Reka UI & Radix 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-vue add @uipkge/button @uipkge/card -y\\n✔ Created components/ui/button/Button.vue\\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:\n      `// In your Vue 3.5 SFC:\\n<script setup lang=\"ts\">\\nimport { Button } from '@/components/ui/button'\\nimport { Card } from '@/components/ui/card'\\n<` +\n      `/script>\\n\\n<template>\\n  <Card class=\"p-6\">...</Card>\\n</template>`,\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\nconst activeStepIndex = ref(0)\nconst currentStep = computed(() => steps[activeStepIndex.value])\n</script>\n\n<template>\n  <section\n    data-slot=\"feature-scroll-spy-walkthrough\"\n    class=\"bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8\"\n  >\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        <Badge variant=\"secondary\" class=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n          <Rocket class=\"text-primary size-3.5\" />\n          End-to-End Developer Journey\n        </Badge>\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          <div\n            v-for=\"(st, idx) in steps\"\n            :key=\"st.id\"\n            class=\"group relative cursor-pointer overflow-hidden rounded-2xl border p-5 text-left transition-colors\"\n            :class=\"\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            @click=\"activeStepIndex = idx\"\n          >\n            <div class=\"flex items-start gap-4\">\n              <div\n                class=\"flex size-8 shrink-0 items-center justify-center rounded-lg font-mono text-xs font-bold transition-colors\"\n                :class=\"\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 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                  <Badge variant=\"outline\" class=\"ml-2 shrink-0 font-mono text-xs\">\n                    {{ st.badgeText }}\n                  </Badge>\n                </div>\n                <p class=\"text-muted-foreground text-xs leading-relaxed\">{{ st.description }}</p>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Right: Sticky Live Sandbox Terminal Display (7 Cols) -->\n        <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\" />\n              <div class=\"bg-warning/80 size-3 rounded-full\" />\n              <div class=\"bg-success/80 size-3 rounded-full\" />\n              <span class=\"text-muted-foreground ml-2 font-mono text-xs\">\n                stage_{{ currentStep.stepNumber }}_{{ currentStep.id }}.sh\n              </span>\n            </div>\n            <Badge variant=\"secondary\" class=\"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 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=\"activeStepIndex--\"\n            >\n              &larr; Previous Step\n            </button>\n\n            <span class=\"text-muted-foreground\">Step {{ activeStepIndex + 1 }} of {{ steps.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 === steps.length - 1\"\n              @click=\"activeStepIndex++\"\n            >\n              Next Step &rarr;\n            </button>\n          </div>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/FeatureScrollSpyWalkthrough.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/card.json"
  ],
  "description": "Step-by-step 4-phase developer workflow progression with sticky live code terminal sandbox and instant stage inspector.",
  "categories": [
    "marketing"
  ]
}