{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "feature-comparison-slider",
  "title": "Feature Comparison Slider",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/feature-comparison-slider/FeatureComparisonSlider.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { AlertTriangle, ArrowLeftRight, CheckCircle2, Layers, PackageX } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\n\nconst sliderPosition = ref(50) // 0 to 100%\n\nfunction setPreset(pos: number) {\n  sliderPosition.value = pos\n}\n</script>\n\n<template>\n  <section\n    data-slot=\"feature-comparison-slider\"\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          <ArrowLeftRight class=\"text-primary size-3.5\" />\n          Side-by-Side architectural upgrade\n        </Badge>\n        <h2 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n          Monolithic npm packages vs Unbundled code ownership.\n        </h2>\n        <p class=\"text-muted-foreground text-base\">\n          Drag the slider to compare how UIPKGE eliminates dependency chains, bundle bloat, and breaking semver updates.\n        </p>\n\n        <!-- Slider Quick Presets -->\n        <div class=\"flex items-center justify-center gap-2 pt-2\">\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            class=\"font-mono text-xs\"\n            :class=\"sliderPosition === 0 ? 'border-primary bg-primary/10 text-primary' : ''\"\n            @click=\"setPreset(0)\"\n          >\n            100% Monolith\n          </Button>\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            class=\"font-mono text-xs\"\n            :class=\"sliderPosition === 50 ? 'border-primary bg-primary/10 text-primary' : ''\"\n            @click=\"setPreset(50)\"\n          >\n            50 / 50 Comparison\n          </Button>\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            class=\"font-mono text-xs\"\n            :class=\"sliderPosition === 100 ? 'border-primary bg-primary/10 text-primary' : ''\"\n            @click=\"setPreset(100)\"\n          >\n            100% UIPKGE Registry\n          </Button>\n        </div>\n      </div>\n\n      <!-- Interactive Comparison Container -->\n      <Card class=\"border-border bg-card relative overflow-hidden rounded-2xl shadow-sm select-none\">\n        <!-- Dual Split View Canvas -->\n        <div class=\"grid min-h-[460px] grid-cols-1 md:grid-cols-2\">\n          <!-- Left Side: Monolithic Approach -->\n          <div\n            class=\"bg-destructive/5 border-border flex flex-col justify-between space-y-6 border-b p-6 text-left sm:p-8 md:border-r md:border-b-0\"\n          >\n            <div class=\"space-y-4\">\n              <div class=\"flex items-center justify-between\">\n                <Badge\n                  variant=\"outline\"\n                  class=\"text-destructive bg-destructive/10 border-destructive/20 gap-1.5 font-mono text-xs\"\n                >\n                  <PackageX class=\"size-3.5\" /> Traditional NPM Package\n                </Badge>\n                <span class=\"text-muted-foreground font-mono text-xs\">Locked in node_modules</span>\n              </div>\n\n              <h3 class=\"text-foreground font-mono text-xl font-bold\">Black-Box Dependency Hell</h3>\n              <p class=\"text-muted-foreground text-xs leading-relaxed sm:text-sm\">\n                Monolithic component libraries ship compiled bundles with opaque internals, forcing you to fight CSS\n                specificity and wait months for upstream bug fixes.\n              </p>\n\n              <!-- Pain Points List -->\n              <ul class=\"space-y-2.5 pt-2\">\n                <li class=\"text-muted-foreground flex items-start gap-2 text-xs\">\n                  <AlertTriangle class=\"text-destructive mt-0.5 size-4 shrink-0\" />\n                  <span><strong>640 kB vendor chunk:</strong> Ships all 80+ unused components to production.</span>\n                </li>\n                <li class=\"text-muted-foreground flex items-start gap-2 text-xs\">\n                  <AlertTriangle class=\"text-destructive mt-0.5 size-4 shrink-0\" />\n                  <span\n                    ><strong>Breaking semver upgrades:</strong> Upgrading minor versions breaks custom CSS\n                    overrides.</span\n                  >\n                </li>\n                <li class=\"text-muted-foreground flex items-start gap-2 text-xs\">\n                  <AlertTriangle class=\"text-destructive mt-0.5 size-4 shrink-0\" />\n                  <span\n                    ><strong>CVE vulnerability surface:</strong> Deep transitive dependency chains trigger security\n                    flags.</span\n                  >\n                </li>\n              </ul>\n            </div>\n\n            <div\n              class=\"border-destructive/20 bg-destructive/10 text-destructive flex items-center justify-between rounded-lg border p-3.5 font-mono text-xs\"\n            >\n              <span>Maintenance Overhead</span>\n              <span class=\"font-bold\">High (24 hrs/mo)</span>\n            </div>\n          </div>\n\n          <!-- Right Side: UIPKGE Unbundled Architecture -->\n          <div class=\"bg-success/5 flex flex-col justify-between space-y-6 p-6 text-left sm:p-8\">\n            <div class=\"space-y-4\">\n              <div class=\"flex items-center justify-between\">\n                <Badge variant=\"outline\" class=\"border-success/20 bg-success/10 text-success gap-1.5 font-mono text-xs\">\n                  <Layers class=\"size-3.5\" /> UIPKGE Component Registry\n                </Badge>\n                <span class=\"text-success font-mono text-xs font-semibold\">100% Owned Source</span>\n              </div>\n\n              <h3 class=\"text-foreground font-mono text-xl font-bold\">Direct Code Ownership</h3>\n              <p class=\"text-muted-foreground text-xs leading-relaxed sm:text-sm\">\n                Source files copied directly into your repository. You have absolute control over every token, prop,\n                micro-interaction, and layout shape.\n              </p>\n\n              <!-- Superpowers List -->\n              <ul class=\"space-y-2.5 pt-2\">\n                <li class=\"text-foreground/90 flex items-start gap-2 text-xs\">\n                  <CheckCircle2 class=\"text-success mt-0.5 size-4 shrink-0\" />\n                  <span\n                    ><strong>Zero bundle bloat:</strong> Only the exact component files you install exist in your\n                    app.</span\n                  >\n                </li>\n                <li class=\"text-foreground/90 flex items-start gap-2 text-xs\">\n                  <CheckCircle2 class=\"text-success mt-0.5 size-4 shrink-0\" />\n                  <span\n                    ><strong>Zero breaking updates:</strong> No package updates ever modify your codebase without your\n                    consent.</span\n                  >\n                </li>\n                <li class=\"text-foreground/90 flex items-start gap-2 text-xs\">\n                  <CheckCircle2 class=\"text-success mt-0.5 size-4 shrink-0\" />\n                  <span\n                    ><strong>Zero CVE risk:</strong> No third-party runtime dependencies or obscure node_modules\n                    wrappers.</span\n                  >\n                </li>\n              </ul>\n            </div>\n\n            <div\n              class=\"border-success/20 bg-success/10 text-success flex items-center justify-between rounded-lg border p-3.5 font-mono text-xs\"\n            >\n              <span>Maintenance Overhead</span>\n              <span class=\"font-bold\">Zero (Permanent Stability)</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Slider Range Bar at Bottom -->\n        <div class=\"bg-muted/40 border-border flex items-center gap-4 border-t p-4\">\n          <span class=\"text-destructive shrink-0 font-mono text-xs\">Monolith</span>\n          <input\n            v-model=\"sliderPosition\"\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            class=\"accent-primary bg-border h-2 w-full cursor-pointer rounded-lg\"\n          />\n          <span class=\"text-success shrink-0 font-mono text-xs font-semibold\">UIPKGE</span>\n        </div>\n      </Card>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/FeatureComparisonSlider.vue"
    }
  ],
  "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 architecture comparison slider workbench contrasting Monolithic npm packages against UIPKGE unbundled code ownership.",
  "categories": [
    "marketing"
  ]
}