{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "feature-comparison-slider",
  "title": "Feature Comparison Slider",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/feature-comparison-slider/feature-comparison-slider.component.ts",
      "content": "// Interactive architecture comparison workbench contrasting monolithic npm packages against\n// UIPKGE unbundled code ownership: preset buttons jump the slider, the range input scrubs it,\n// and the dual split view renders both sides. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport { AlertTriangle, ArrowLeftRight, CheckCircle2, Layers, LucideAngularModule, PackageX } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent } from '@/ui/card/card.component'\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-feature-comparison-slider, [ui-feature-comparison-slider]',\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, UiButtonComponent, UiCardComponent],\n  template: `\n    <section data-slot=\"feature-comparison-slider\" [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]=\"ArrowLeftRight\" class=\"text-primary size-3.5\" />\n            Side-by-Side architectural upgrade\n          </span>\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\n            updates.\n          </p>\n\n          <!-- Slider Quick Presets -->\n          <div class=\"flex items-center justify-center gap-2 pt-2\">\n            <button ui-button size=\"sm\" variant=\"outline\" [class]=\"presetClass(0)\" (click)=\"setPreset(0)\">\n              100% Monolith\n            </button>\n            <button ui-button size=\"sm\" variant=\"outline\" [class]=\"presetClass(50)\" (click)=\"setPreset(50)\">\n              50 / 50 Comparison\n            </button>\n            <button ui-button size=\"sm\" variant=\"outline\" [class]=\"presetClass(100)\" (click)=\"setPreset(100)\">\n              100% UIPKGE Registry\n            </button>\n          </div>\n        </div>\n\n        <!-- Interactive Comparison Container -->\n        <div ui-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                  <span\n                    ui-badge\n                    variant=\"outline\"\n                    class=\"text-destructive bg-destructive/10 border-destructive/20 gap-1.5 font-mono text-xs\"\n                  >\n                    <lucide-icon [img]=\"PackageX\" class=\"size-3.5\" /> Traditional NPM Package\n                  </span>\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                    <lucide-icon [img]=\"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                    <lucide-icon [img]=\"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                    <lucide-icon [img]=\"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                  <span\n                    ui-badge\n                    variant=\"outline\"\n                    class=\"border-success/20 bg-success/10 text-success gap-1.5 font-mono text-xs\"\n                  >\n                    <lucide-icon [img]=\"Layers\" class=\"size-3.5\" /> UIPKGE Component Registry\n                  </span>\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                    <lucide-icon [img]=\"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                    <lucide-icon [img]=\"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                    <lucide-icon [img]=\"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              type=\"range\"\n              min=\"0\"\n              max=\"100\"\n              [value]=\"sliderPosition()\"\n              (input)=\"onSliderInput($event)\"\n              aria-label=\"Comparison slider position\"\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        </div>\n      </div>\n    </section>\n  `,\n})\nexport class UiFeatureComparisonSliderComponent {\n  protected readonly AlertTriangle = AlertTriangle\n  protected readonly ArrowLeftRight = ArrowLeftRight\n  protected readonly CheckCircle2 = CheckCircle2\n  protected readonly Layers = Layers\n  protected readonly PackageX = PackageX\n\n  @Input() set initialPosition(v: number | undefined) {\n    this.sliderPosition.set(v ?? 50)\n  }\n  @Input('class') className?: string\n\n  readonly sliderPosition = signal(50)\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  setPreset(pos: number): void {\n    this.sliderPosition.set(pos)\n  }\n\n  presetClass(pos: number): string {\n    return cn('font-mono text-xs', this.sliderPosition() === pos && 'border-primary bg-primary/10 text-primary')\n  }\n\n  onSliderInput(event: Event): void {\n    this.sliderPosition.set(Number((event.target as HTMLInputElement).value))\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/feature-comparison-slider/feature-comparison-slider.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/feature-comparison-slider/index.ts",
      "content": "export { UiFeatureComparisonSliderComponent } from './feature-comparison-slider.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/feature-comparison-slider/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/card.json"
  ],
  "description": "Interactive architecture comparison slider workbench contrasting Monolithic npm packages against UIPKGE unbundled code ownership.",
  "categories": [
    "marketing"
  ]
}