{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "pricing-usage-calculator-slider",
  "title": "Pricing Usage Calculator Slider",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/pricing-usage-calculator-slider/PricingUsageCalculatorSlider.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { ArrowRight, Calculator, Globe, Server, Users } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\n\n// Interactive Sliders\nconst mau = ref(100000) // 10k to 5M\nconst qps = ref(500) // 100 to 20k\nconst edgeReplicas = ref(3) // 1 to 12\n\nfunction formatNumber(num: number): string {\n  if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M'\n  if (num >= 1000) return (num / 1000).toFixed(0) + 'k'\n  return num.toString()\n}\n\n// Preset configurations\nfunction applyPreset(preset: 'seed' | 'growth' | 'scale') {\n  if (preset === 'seed') {\n    mau.value = 25000\n    qps.value = 150\n    edgeReplicas.value = 2\n  } else if (preset === 'growth') {\n    mau.value = 350000\n    qps.value = 2500\n    edgeReplicas.value = 5\n  } else {\n    mau.value = 2500000\n    qps.value = 12000\n    edgeReplicas.value = 10\n  }\n}\n\n// Calculations\nconst traditionalCost = computed(() => {\n  const baseSeatFee = 350\n  const perUserFee = (mau.value / 1000) * 1.8\n  const qpsSurcharge = qps.value * 0.25\n  return Math.round(baseSeatFee + perUserFee + qpsSurcharge)\n})\n\nconst uipkgeCost = computed(() => {\n  // Flat zero licensing + modest raw edge static bandwidth\n  const rawBandwidth = (mau.value / 100000) * 4\n  const flatProLicense = 24\n  return Math.round(flatProLicense + rawBandwidth)\n})\n\nconst monthlySavings = computed(() => {\n  return Math.max(0, traditionalCost.value - uipkgeCost.value)\n})\n\nconst annualSavings = computed(() => {\n  return monthlySavings.value * 12\n})\n</script>\n\n<template>\n  <section\n    data-slot=\"pricing-usage-calculator-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          <Calculator class=\"text-primary size-3.5\" />\n          Interactive Infrastructure ROI Calculator\n        </Badge>\n        <h2 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n          Calculate your annual savings with unbundled architecture.\n        </h2>\n        <p class=\"text-muted-foreground text-base\">\n          See how eliminating proprietary seat licenses and runtime SaaS wrappers cuts your front-end TCO.\n        </p>\n\n        <!-- Presets Bar -->\n        <div class=\"flex flex-wrap items-center justify-center gap-2 pt-2\">\n          <Button size=\"sm\" variant=\"outline\" class=\"font-mono text-xs\" @click=\"applyPreset('seed')\">\n            Seed Startup (25k MAU)\n          </Button>\n          <Button size=\"sm\" variant=\"outline\" class=\"font-mono text-xs\" @click=\"applyPreset('growth')\">\n            Growth Scale (350k MAU)\n          </Button>\n          <Button size=\"sm\" variant=\"outline\" class=\"font-mono text-xs\" @click=\"applyPreset('scale')\">\n            Hypergrowth (2.5M MAU)\n          </Button>\n        </div>\n      </div>\n\n      <!-- 2-Column Split: Sliders Workbench Left (7 Cols), Savings Scorecard Right (5 Cols) -->\n      <div class=\"grid grid-cols-1 items-stretch gap-8 lg:grid-cols-12\">\n        <!-- Sliders Controls (7 Cols) -->\n        <Card\n          class=\"border-border bg-card/95 flex flex-col justify-between space-y-6 rounded-2xl p-6 text-left shadow-xl sm:p-8 lg:col-span-7\"\n        >\n          <div class=\"space-y-6\">\n            <div class=\"border-border flex items-center justify-between border-b pb-4\">\n              <h3 class=\"text-foreground font-mono text-sm font-bold\">Traffic &amp; Telemetry Inputs</h3>\n              <span class=\"text-muted-foreground font-mono text-xs\">Dynamic Projection</span>\n            </div>\n\n            <!-- Slider 1: MAU -->\n            <div class=\"space-y-2\">\n              <div class=\"flex items-center justify-between font-mono text-xs\">\n                <span class=\"text-muted-foreground flex items-center gap-1.5\">\n                  <Users class=\"text-primary size-3.5\" /> Monthly Active Users (MAU)\n                </span>\n                <span class=\"text-foreground text-sm font-bold\">{{ formatNumber(mau) }} users</span>\n              </div>\n              <input\n                v-model=\"mau\"\n                type=\"range\"\n                min=\"10000\"\n                max=\"5000000\"\n                step=\"25000\"\n                class=\"accent-primary bg-border h-2 w-full cursor-pointer rounded-lg\"\n              />\n            </div>\n\n            <!-- Slider 2: QPS -->\n            <div class=\"space-y-2\">\n              <div class=\"flex items-center justify-between font-mono text-xs\">\n                <span class=\"text-muted-foreground flex items-center gap-1.5\">\n                  <Server class=\"text-primary size-3.5\" /> Peak Query Throughput\n                </span>\n                <span class=\"text-foreground text-sm font-bold\">{{ formatNumber(qps) }} QPS</span>\n              </div>\n              <input\n                v-model=\"qps\"\n                type=\"range\"\n                min=\"100\"\n                max=\"20000\"\n                step=\"100\"\n                class=\"accent-primary bg-border h-2 w-full cursor-pointer rounded-lg\"\n              />\n            </div>\n\n            <!-- Slider 3: Global Replicas -->\n            <div class=\"space-y-2\">\n              <div class=\"flex items-center justify-between font-mono text-xs\">\n                <span class=\"text-muted-foreground flex items-center gap-1.5\">\n                  <Globe class=\"text-primary size-3.5\" /> Global Edge POP Replicas\n                </span>\n                <span class=\"text-foreground text-sm font-bold\">{{ edgeReplicas }} Edge Regions</span>\n              </div>\n              <input\n                v-model=\"edgeReplicas\"\n                type=\"range\"\n                min=\"1\"\n                max=\"12\"\n                step=\"1\"\n                class=\"accent-primary bg-border h-2 w-full cursor-pointer rounded-lg\"\n              />\n            </div>\n          </div>\n\n          <div\n            class=\"border-border text-muted-foreground flex items-center justify-between border-t pt-4 font-mono text-xs\"\n          >\n            <span>Formula: Direct AST + Raw Static Hosting</span>\n            <span class=\"text-success font-semibold\">&check; Zero Seat Surcharges</span>\n          </div>\n        </Card>\n\n        <!-- ROI Cost & Savings Projection Card (5 Cols) -->\n        <Card\n          class=\"border-border bg-card/95 flex flex-col justify-between space-y-6 rounded-2xl p-6 text-left shadow-sm sm:p-8 lg:col-span-5\"\n        >\n          <div class=\"space-y-6\">\n            <Badge variant=\"outline\" class=\"border-success/20 bg-success/10 text-success font-mono text-xs\">\n              Projected Annual Net Savings\n            </Badge>\n\n            <!-- Big Stat Display -->\n            <div class=\"space-y-1\">\n              <div class=\"text-success font-mono text-4xl font-bold tracking-tight sm:text-5xl\">\n                ${{ annualSavings.toLocaleString() }}\n              </div>\n              <p class=\"text-muted-foreground font-mono text-xs\">\n                Saved every year (${{ monthlySavings.toLocaleString() }}/month)\n              </p>\n            </div>\n\n            <!-- Comparative Cost Bars -->\n            <div class=\"space-y-3 pt-2\">\n              <div class=\"space-y-1\">\n                <div class=\"flex items-center justify-between font-mono text-xs\">\n                  <span class=\"text-destructive font-medium\">Traditional Monolith Stack:</span>\n                  <span class=\"text-foreground font-bold\">${{ traditionalCost.toLocaleString() }}/mo</span>\n                </div>\n                <div class=\"bg-destructive/20 h-2 overflow-hidden rounded-full\">\n                  <div class=\"bg-destructive h-full w-full\" />\n                </div>\n              </div>\n\n              <div class=\"space-y-1\">\n                <div class=\"flex items-center justify-between font-mono text-xs\">\n                  <span class=\"text-success font-semibold\">UIPKGE Unbundled Registry:</span>\n                  <span class=\"text-foreground font-bold\">${{ uipkgeCost.toLocaleString() }}/mo</span>\n                </div>\n                <div class=\"bg-success/20 h-2 overflow-hidden rounded-full\">\n                  <div\n                    class=\"bg-success h-full transition-[width] duration-300\"\n                    :style=\"{ width: `${Math.max(5, (uipkgeCost / traditionalCost) * 100)}%` }\"\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <Button class=\"mt-4 h-10 w-full gap-1.5 font-mono text-xs shadow-md\">\n            <span>Lock In Pro Savings</span>\n            <ArrowRight class=\"size-3.5\" />\n          </Button>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/PricingUsageCalculatorSlider.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 frontend infrastructure ROI calculator with real-time MAU, QPS, and edge replica sliders and annual cost savings scorecard.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "pricing"
}