{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "feature-metric-growth-stepper",
  "title": "Feature Metric Growth Stepper",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/feature-metric-growth-stepper/FeatureMetricGrowthStepper.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Activity, ArrowRight, CheckCircle2, Cpu, Globe, ShieldCheck, TrendingUp, Zap } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\nexport interface GrowthStage {\n  id: string\n  name: string\n  stageLabel: string\n  mrrRange: string\n  description: string\n  users: string\n  qps: string\n  nodes: number\n  sla: string\n  features: string[]\n}\n\nexport interface FeatureMetricGrowthStepperProps {\n  title?: string\n  description?: string\n  stages?: GrowthStage[]\n  class?: string\n}\n\nconst DEFAULT_STAGES: GrowthStage[] = [\n  {\n    id: 'seed',\n    name: 'Seed & Validation',\n    stageLabel: 'Stage 01',\n    mrrRange: '$0 – $10k / mo',\n    description:\n      'Instant zero-dependency UI primitives copied directly into your repository. Zero lock-in, zero build overhead.',\n    users: '1k – 25k MAU',\n    qps: '500 req/s',\n    nodes: 3,\n    sla: '99.9% Best Effort',\n    features: [\n      'Unbundled component source ownership',\n      'Tailwind v4 theme variables',\n      'Single-command CLI installation',\n    ],\n  },\n  {\n    id: 'series-a',\n    name: 'Series A Product-Market Fit',\n    stageLabel: 'Stage 02',\n    mrrRange: '$10k – $100k / mo',\n    description: 'Scale complex dashboards and interactive blocks with full Reka UI/Radix headless accessibility.',\n    users: '25k – 250k MAU',\n    qps: '4,500 req/s',\n    nodes: 12,\n    sla: '99.95% Standard SLA',\n    features: [\n      'Complex KPI grids & interactive charts',\n      'RBAC permission workspace switchers',\n      'Dual-framework Astro preview integration',\n    ],\n  },\n  {\n    id: 'scale',\n    name: 'Hypergrowth Expansion',\n    stageLabel: 'Stage 03',\n    mrrRange: '$100k – $1M / mo',\n    description:\n      'High-throughput global edge deployment with sub-millisecond component compilation and dedicated design system sync.',\n    users: '250k – 2.5M MAU',\n    qps: '35,000 req/s',\n    nodes: 48,\n    sla: '99.99% High Availability',\n    features: [\n      'Global edge caching mesh',\n      'Automated cross-framework AST parity tests',\n      'Custom token preset distribution',\n    ],\n  },\n  {\n    id: 'enterprise',\n    name: 'Global Enterprise Scale',\n    stageLabel: 'Stage 04',\n    mrrRange: '$1M+ / mo',\n    description:\n      'Mission-critical resilience with multi-region failover, custom compliance SLAs, and dedicated design engineering support.',\n    users: '10M+ MAU',\n    qps: '250,000 req/s',\n    nodes: 310,\n    sla: '99.999% Fault Tolerant',\n    features: [\n      'SOC2 & HIPAA compliant architecture',\n      'Sub-10ms global TTFB guarantees',\n      '24/7 dedicated incident commander',\n    ],\n  },\n]\n\nconst props = withDefaults(defineProps<FeatureMetricGrowthStepperProps>(), {\n  title: 'Scale your frontend architecture directly as your traffic expands.',\n  description:\n    'From single-developer seed prototypes to global multi-region enterprise platforms, unbundled components adapt to your infrastructure requirements.',\n})\n\nconst activeStages = computed(() => props.stages ?? DEFAULT_STAGES)\nconst selectedStageId = ref('seed')\n\nconst activeStageIndex = computed(() => {\n  return activeStages.value.findIndex((s) => s.id === selectedStageId.value)\n})\n\nconst currentStage = computed<GrowthStage>(() => {\n  return activeStages.value.find((s) => s.id === selectedStageId.value) || activeStages.value[0]\n})\n</script>\n\n<template>\n  <section\n    data-slot=\"feature-metric-growth-stepper\"\n    :class=\"cn('bg-background relative overflow-hidden py-16 sm:py-24', props.class)\"\n  >\n    <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n      <!-- Section Header -->\n      <div class=\"mx-auto max-w-3xl space-y-4 text-center\">\n        <a\n          href=\"#growth-scale\"\n          class=\"group border-border/80 bg-secondary/60 hover:bg-secondary text-foreground inline-flex items-center gap-2 rounded-full border px-3.5 py-1 text-xs font-medium shadow-2xs transition-colors\"\n        >\n          <TrendingUp class=\"text-primary size-3.5\" />\n          <span>Scale-Ready Architecture Stepper</span>\n          <ArrowRight class=\"text-muted-foreground size-3 transition-transform group-hover:translate-x-0.5\" />\n        </a>\n\n        <h2 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n          {{ title }}\n        </h2>\n\n        <p class=\"text-muted-foreground text-base sm:text-lg\">\n          {{ description }}\n        </p>\n      </div>\n\n      <!-- Stepper Milestone Bar -->\n      <div class=\"mt-12\">\n        <div class=\"grid grid-cols-2 gap-3 sm:grid-cols-4\">\n          <button\n            v-for=\"(stage, idx) in activeStages\"\n            :key=\"stage.id\"\n            type=\"button\"\n            :class=\"\n              cn(\n                'group relative flex flex-col items-start rounded-xl border p-4 text-left transition-[color,background-color,border-color,box-shadow,transform] duration-150 active:scale-[0.98] active:duration-100',\n                selectedStageId === stage.id\n                  ? 'border-primary bg-primary/5 ring-primary/20 shadow-xs ring-1'\n                  : 'border-border bg-card hover:bg-muted/40 text-muted-foreground hover:text-foreground',\n              )\n            \"\n            @click=\"selectedStageId = stage.id\"\n          >\n            <div class=\"flex w-full items-center justify-between\">\n              <span class=\"text-muted-foreground font-mono text-xs font-semibold tracking-wider uppercase\">\n                {{ stage.stageLabel }}\n              </span>\n              <span\n                :class=\"\n                  cn(\n                    'size-2 rounded-full transition-colors',\n                    selectedStageId === stage.id ? 'bg-primary animate-pulse' : 'bg-muted-foreground/30',\n                  )\n                \"\n              />\n            </div>\n\n            <div class=\"text-foreground mt-2 text-sm font-bold\">{{ stage.name }}</div>\n            <div class=\"text-muted-foreground mt-1 font-mono text-xs\">{{ stage.mrrRange }}</div>\n          </button>\n        </div>\n      </div>\n\n      <!-- Active Stage Deep-Dive Workbench -->\n      <div class=\"mt-8 grid grid-cols-1 gap-6 lg:grid-cols-12\">\n        <!-- Left: Stage Description & Architecture Capabilities (7 Cols) -->\n        <Card class=\"border-border bg-card shadow-xs lg:col-span-7\">\n          <CardContent class=\"space-y-6 p-6\">\n            <div class=\"border-border flex items-center justify-between border-b pb-4\">\n              <div class=\"space-y-0.5\">\n                <Badge variant=\"outline\" class=\"text-primary border-primary/30 bg-primary/10 font-mono text-xs\">\n                  {{ currentStage.stageLabel }} &bull; {{ currentStage.name }}\n                </Badge>\n                <div class=\"text-foreground pt-1 text-xl font-bold tracking-tight\">Architecture Capacity</div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-muted-foreground text-xs\">Target Growth Band</div>\n                <div class=\"text-foreground font-mono text-sm font-bold\">{{ currentStage.mrrRange }}</div>\n              </div>\n            </div>\n\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {{ currentStage.description }}\n            </p>\n\n            <!-- Technical Checklist -->\n            <div class=\"space-y-2.5\">\n              <div class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                Verified Infrastructure Benchmarks\n              </div>\n              <div class=\"grid grid-cols-1 gap-2\">\n                <div\n                  v-for=\"(feature, fIdx) in currentStage.features\"\n                  :key=\"fIdx\"\n                  class=\"border-border/80 bg-muted/20 text-foreground flex items-center gap-2.5 rounded-lg border p-2.5 text-xs\"\n                >\n                  <CheckCircle2 class=\"text-success size-4 shrink-0\" />\n                  <span>{{ feature }}</span>\n                </div>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <!-- Right: Infrastructure Load Telemetry (5 Cols) -->\n        <Card class=\"border-border bg-card flex flex-col justify-between shadow-xs lg:col-span-5\">\n          <CardContent class=\"space-y-6 p-6\">\n            <div class=\"border-border flex items-center justify-between border-b pb-3\">\n              <div class=\"flex items-center gap-2\">\n                <Cpu class=\"text-primary size-4\" />\n                <span class=\"text-foreground text-sm font-semibold\">Infrastructure Profile</span>\n              </div>\n              <Badge variant=\"outline\" class=\"border-border text-success font-mono text-xs\">\n                {{ currentStage.sla }}\n              </Badge>\n            </div>\n\n            <!-- Telemetry Metrics Grid -->\n            <div class=\"grid grid-cols-2 gap-3\">\n              <div class=\"border-border bg-background space-y-1 rounded-lg border p-3\">\n                <div class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                  <Activity class=\"text-success size-3\" />\n                  <span>Monthly Active Users</span>\n                </div>\n                <div class=\"text-foreground font-mono text-base font-bold\">{{ currentStage.users }}</div>\n              </div>\n\n              <div class=\"border-border bg-background space-y-1 rounded-lg border p-3\">\n                <div class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                  <Zap class=\"text-primary size-3\" />\n                  <span>Throughput (QPS)</span>\n                </div>\n                <div class=\"text-foreground font-mono text-base font-bold\">{{ currentStage.qps }}</div>\n              </div>\n\n              <div class=\"border-border bg-background space-y-1 rounded-lg border p-3\">\n                <div class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                  <Globe class=\"text-info size-3\" />\n                  <span>Edge PoP Nodes</span>\n                </div>\n                <div class=\"text-foreground font-mono text-base font-bold\">{{ currentStage.nodes }} PoPs</div>\n              </div>\n\n              <div class=\"border-border bg-background space-y-1 rounded-lg border p-3\">\n                <div class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                  <ShieldCheck class=\"text-success size-3\" />\n                  <span>Uptime Guarantee</span>\n                </div>\n                <div class=\"text-foreground font-mono text-base font-bold\">{{ currentStage.sla.split(' ')[0] }}</div>\n              </div>\n            </div>\n\n            <Button class=\"w-full gap-2 shadow-xs\" variant=\"outline\">\n              <span>View Infrastructure Blueprint</span>\n              <ArrowRight class=\"size-3.5\" />\n            </Button>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/feature-metric-growth-stepper/FeatureMetricGrowthStepper.vue"
    },
    {
      "path": "packages/registry-vue/blocks/feature-metric-growth-stepper/index.ts",
      "content": "export { default as FeatureMetricGrowthStepper } from './FeatureMetricGrowthStepper.vue'\nexport type { FeatureMetricGrowthStepperProps, GrowthStage } from './FeatureMetricGrowthStepper.vue'\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/feature-metric-growth-stepper/index.ts"
    }
  ],
  "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"
  ],
  "description": "Interactive scale progression workbench showing infrastructure capacity from Seed to Global Enterprise.",
  "categories": [
    "feature",
    "marketing"
  ]
}