{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "pricing",
  "title": "Pricing",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/pricing/Pricing01.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport { ArrowRight, Check, ChevronDown, ChevronUp, ShieldCheck, Users, Zap } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { Slider } from '@/components/ui/slider'\nimport { Switch } from '@/components/ui/switch'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n  class?: HTMLAttributes['class']\n}\n\ndefineProps<Props>()\n\ntype BillingCycle = 'monthly' | 'yearly'\ntype Currency = 'USD' | 'EUR' | 'GBP'\n\nconst billingCycle = ref<BillingCycle>('yearly')\nconst currency = ref<Currency>('USD')\nconst teamSeats = ref<number[]>([12])\nconst addDedicatedSla = ref(false)\nconst addAuditVault = ref(false)\nconst showComparisonTable = ref(false)\n\nconst currencySymbols: Record<Currency, string> = {\n  USD: '$',\n  EUR: '€',\n  GBP: '£',\n}\n\nconst currencyRates: Record<Currency, number> = {\n  USD: 1.0,\n  EUR: 0.92,\n  GBP: 0.79,\n}\n\nconst rates = computed(() => currencyRates[currency.value])\nconst sym = computed(() => currencySymbols[currency.value])\n\n// Base tier pricing (per seat / month in USD)\nconst starterBase = computed(() => (billingCycle.value === 'yearly' ? 12 : 15))\nconst teamBase = computed(() => (billingCycle.value === 'yearly' ? 28 : 35))\nconst enterpriseBase = computed(() => (billingCycle.value === 'yearly' ? 68 : 85))\n\n// Addons calculation\nconst slaCost = computed(() => (addDedicatedSla.value ? 99 : 0))\nconst vaultCost = computed(() => (addAuditVault.value ? 49 : 0))\n\n// Computed calculated totals\nconst currentSeats = computed(() => teamSeats.value[0] || 1)\n\nconst starterMonthlyTotal = computed(() => {\n  const base = starterBase.value * currentSeats.value\n  return Math.round((base + (addAuditVault.value ? 29 : 0)) * rates.value)\n})\n\nconst teamMonthlyTotal = computed(() => {\n  const base = teamBase.value * currentSeats.value\n  return Math.round((base + slaCost.value + vaultCost.value) * rates.value)\n})\n\nconst enterpriseMonthlyTotal = computed(() => {\n  const base = enterpriseBase.value * currentSeats.value\n  return Math.round((base + slaCost.value + vaultCost.value) * rates.value)\n})\n\nconst annualSavingsTeam = computed(() => {\n  const monthlyCost = 35 * currentSeats.value * 12\n  const yearlyCost = 28 * currentSeats.value * 12\n  return Math.round((monthlyCost - yearlyCost) * rates.value)\n})\n\nconst comparisonMatrix = [\n  {\n    category: 'Platform & Compute Core',\n    features: [\n      { name: 'Active Team Members', starter: 'Up to 10', team: 'Unlimited', enterprise: 'Unlimited + Org Units' },\n      { name: 'Monthly API Requests', starter: '100,000 / mo', team: '2,500,000 / mo', enterprise: 'Custom Unlimited' },\n      { name: 'Workflow Automations', starter: '10 active', team: '100 active', enterprise: 'Unlimited real-time' },\n      { name: 'Data Retention History', starter: '30 days', team: '365 days', enterprise: '7 years immutable' },\n    ],\n  },\n  {\n    category: 'Security & Enterprise Governance',\n    features: [\n      {\n        name: 'SOC 2 Type II & ISO 27001',\n        starter: 'Standard',\n        team: 'Included',\n        enterprise: 'Included + Auditor Portal',\n      },\n      { name: 'SAML SSO & SCIM Provisioning', starter: '—', team: 'Google / Okta', enterprise: 'Custom IdP + SCIM v2' },\n      {\n        name: 'Role-Based Access (RBAC)',\n        starter: '3 predefined roles',\n        team: 'Granular permissions',\n        enterprise: 'Custom policy engine',\n      },\n      {\n        name: 'Immutable Audit Trail Logs',\n        starter: '—',\n        team: '90 days exportable',\n        enterprise: 'Real-time SIEM streaming',\n      },\n    ],\n  },\n  {\n    category: 'Support & Success SLAs',\n    features: [\n      {\n        name: 'Support Channel',\n        starter: 'Community & Email',\n        team: 'Priority Email + Chat',\n        enterprise: 'Dedicated Private Slack',\n      },\n      {\n        name: 'First-Response SLA',\n        starter: '24 business hours',\n        team: '4 business hours',\n        enterprise: '< 15 mins (24/7/365)',\n      },\n      { name: 'Uptime SLA Guarantee', starter: '99.9%', team: '99.95%', enterprise: '99.99% financially backed' },\n      { name: 'Dedicated Solutions Architect', starter: '—', team: '—', enterprise: 'Assigned Principal Engineer' },\n    ],\n  },\n]\n</script>\n\n<template>\n  <section data-slot=\"pricing-01\" :class=\"cn('bg-background w-full py-16 sm:py-24', $props.class)\">\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        <div\n          class=\"border-primary/20 bg-primary/5 text-primary inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-medium shadow-2xs\"\n        >\n          <ShieldCheck class=\"size-3.5\" />\n          <span>Predictable Enterprise Pricing</span>\n        </div>\n        <h2 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl\">\n          Scale effortlessly without seat tax surprises\n        </h2>\n        <p class=\"text-muted-foreground text-base sm:text-lg\">\n          Zero setup fees, transparent volume discounts, and instant self-serve provisioning. Switch or cancel plans\n          anytime.\n        </p>\n\n        <!-- Billing Cycle & Currency Switcher Toolbar -->\n        <div class=\"mt-8 flex flex-wrap items-center justify-center gap-4 pt-2\">\n          <!-- Monthly vs Yearly -->\n          <div class=\"border-border bg-card inline-flex rounded-lg border p-1 shadow-2xs\">\n            <ToggleGroup\n              type=\"single\"\n              :model-value=\"billingCycle\"\n              @update:model-value=\"(v) => v && (billingCycle = v as BillingCycle)\"\n            >\n              <ToggleGroupItem value=\"monthly\" class=\"px-3.5 py-1.5 text-xs font-medium\"> Monthly </ToggleGroupItem>\n              <ToggleGroupItem value=\"yearly\" class=\"flex items-center gap-1.5 px-3.5 py-1.5 text-xs font-medium\">\n                <span>Annual</span>\n                <Badge variant=\"secondary\" class=\"bg-primary/10 text-primary border-primary/20 px-1.5 py-0 text-xs\">\n                  Save 20%\n                </Badge>\n              </ToggleGroupItem>\n            </ToggleGroup>\n          </div>\n\n          <!-- Currency Selector -->\n          <div class=\"border-border bg-card inline-flex rounded-lg border p-1 shadow-2xs\">\n            <ToggleGroup\n              type=\"single\"\n              :model-value=\"currency\"\n              @update:model-value=\"(v) => v && (currency = v as Currency)\"\n            >\n              <ToggleGroupItem value=\"USD\" class=\"px-2.5 py-1 font-mono text-xs font-medium\">USD ($)</ToggleGroupItem>\n              <ToggleGroupItem value=\"EUR\" class=\"px-2.5 py-1 font-mono text-xs font-medium\">EUR (€)</ToggleGroupItem>\n              <ToggleGroupItem value=\"GBP\" class=\"px-2.5 py-1 font-mono text-xs font-medium\">GBP (£)</ToggleGroupItem>\n            </ToggleGroup>\n          </div>\n        </div>\n\n        <!-- Interactive Team Seat Simulator Bar -->\n        <div class=\"border-border bg-card/60 mx-auto mt-6 max-w-xl rounded-xl border p-4 shadow-2xs backdrop-blur-xs\">\n          <div class=\"flex flex-wrap items-center justify-between gap-2 text-xs\">\n            <div class=\"text-foreground flex items-center gap-2 font-medium\">\n              <Users class=\"text-primary size-4\" />\n              <span>Simulate Team Size:</span>\n            </div>\n            <div class=\"flex items-center gap-2\">\n              <span class=\"bg-muted text-foreground rounded px-2 py-0.5 font-mono text-xs font-semibold\">\n                {{ currentSeats }} {{ currentSeats === 1 ? 'seat' : 'seats' }}\n              </span>\n              <span v-if=\"billingCycle === 'yearly' && annualSavingsTeam > 0\" class=\"text-success text-xs font-medium\">\n                (Saves ~{{ sym }}{{ annualSavingsTeam.toLocaleString() }}/yr on Team plan)\n              </span>\n            </div>\n          </div>\n          <div class=\"mt-3\">\n            <Slider v-model=\"teamSeats\" :min=\"1\" :max=\"50\" :step=\"1\" class=\"cursor-pointer\" />\n          </div>\n          <div class=\"text-muted-foreground mt-2 flex justify-between font-mono text-xs\">\n            <span>1 seat</span>\n            <span>25 seats</span>\n            <span>50+ seats</span>\n          </div>\n        </div>\n      </div>\n\n      <!-- Plan Cards Grid -->\n      <div class=\"mt-12 grid grid-cols-1 gap-8 lg:grid-cols-3 lg:items-stretch\">\n        <!-- Tier 1: Starter -->\n        <Card\n          class=\"border-border bg-card hover:border-primary/40 relative flex flex-col justify-between shadow-xs transition-colors duration-200 hover:shadow-md\"\n        >\n          <div>\n            <CardHeader class=\"pb-4\">\n              <div class=\"flex items-center justify-between\">\n                <Badge variant=\"outline\" class=\"font-mono text-xs\">Bootstrap & Indie</Badge>\n              </div>\n              <CardTitle class=\"text-foreground text-xl font-bold tracking-tight\">Starter Studio</CardTitle>\n              <CardDescription class=\"text-muted-foreground text-xs\">\n                For agile squads and early-stage product teams validating core workflows.\n              </CardDescription>\n\n              <div class=\"mt-6 space-y-1\">\n                <div class=\"flex items-baseline gap-1.5\">\n                  <span class=\"text-foreground text-4xl font-bold tracking-tight\">\n                    {{ sym }}{{ Math.round(starterBase * rates) }}\n                  </span>\n                  <span class=\"text-muted-foreground text-xs font-medium\">/ seat / month</span>\n                </div>\n                <div class=\"text-muted-foreground font-mono text-xs\">\n                  Est. {{ sym }}{{ starterMonthlyTotal.toLocaleString() }}/mo for {{ currentSeats }}\n                  {{ currentSeats === 1 ? 'seat' : 'seats' }}\n                </div>\n              </div>\n            </CardHeader>\n\n            <CardContent class=\"space-y-4 pt-2\">\n              <Separator />\n              <div class=\"space-y-2.5\">\n                <p class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">Included features</p>\n                <ul class=\"text-foreground space-y-2.5 text-xs\">\n                  <li class=\"flex items-start gap-2\">\n                    <Check class=\"text-success mt-0.5 size-4 shrink-0\" />\n                    <span>Up to 10 team seats & unlimited guests</span>\n                  </li>\n                  <li class=\"flex items-start gap-2\">\n                    <Check class=\"text-success mt-0.5 size-4 shrink-0\" />\n                    <span>100,000 monthly API event calls</span>\n                  </li>\n                  <li class=\"flex items-start gap-2\">\n                    <Check class=\"text-success mt-0.5 size-4 shrink-0\" />\n                    <span>30-day continuous audit & revision history</span>\n                  </li>\n                  <li class=\"flex items-start gap-2\">\n                    <Check class=\"text-success mt-0.5 size-4 shrink-0\" />\n                    <span>Standard Community & Email support (24h)</span>\n                  </li>\n                  <li class=\"text-muted-foreground flex items-start gap-2\">\n                    <Check class=\"text-muted-foreground/50 mt-0.5 size-4 shrink-0\" />\n                    <span>Community Discord access & quickstarts</span>\n                  </li>\n                </ul>\n              </div>\n            </CardContent>\n          </div>\n\n          <CardFooter class=\"border-border mt-auto border-t pt-4\">\n            <Button variant=\"outline\" class=\"h-10 w-full gap-1.5 text-xs font-semibold\">\n              <span>Start Free 14-Day Trial</span>\n              <ArrowRight class=\"size-3.5\" />\n            </Button>\n          </CardFooter>\n        </Card>\n\n        <!-- Tier 2: Team Pro (Highlighted Flagship) -->\n        <Card\n          class=\"border-primary bg-card ring-primary/20 relative flex flex-col justify-between shadow-lg ring-2 transition-colors duration-200 hover:shadow-xl lg:-translate-y-2\"\n        >\n          <div class=\"absolute -top-3.5 left-1/2 -translate-x-1/2\">\n            <Badge class=\"bg-primary text-primary-foreground gap-1.5 px-3 py-0.5 text-xs font-semibold shadow-sm\">\n              <Zap class=\"size-3 fill-current\" />\n              <span>Most Popular Choice</span>\n            </Badge>\n          </div>\n\n          <div>\n            <CardHeader class=\"pt-7 pb-4\">\n              <div class=\"flex items-center justify-between\">\n                <Badge variant=\"secondary\" class=\"bg-primary/10 text-primary border-primary/20 font-mono text-xs\">\n                  Scale & High-Growth\n                </Badge>\n              </div>\n              <CardTitle class=\"text-foreground text-2xl font-bold tracking-tight\">Team Scale</CardTitle>\n              <CardDescription class=\"text-muted-foreground text-xs\">\n                For fast-scaling engineering and product organizations requiring deep automation.\n              </CardDescription>\n\n              <div class=\"mt-6 space-y-1\">\n                <div class=\"flex items-baseline gap-1.5\">\n                  <span class=\"text-foreground text-4xl font-bold tracking-tight\">\n                    {{ sym }}{{ Math.round(teamBase * rates) }}\n                  </span>\n                  <span class=\"text-muted-foreground text-xs font-medium\">/ seat / month</span>\n                </div>\n                <div class=\"text-primary font-mono text-xs font-medium\">\n                  Est. {{ sym }}{{ teamMonthlyTotal.toLocaleString() }}/mo for {{ currentSeats }}\n                  {{ currentSeats === 1 ? 'seat' : 'seats' }}\n                </div>\n              </div>\n            </CardHeader>\n\n            <CardContent class=\"space-y-4 pt-2\">\n              <Separator />\n              <div class=\"space-y-2.5\">\n                <p class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                  Everything in Starter, plus\n                </p>\n                <ul class=\"text-foreground space-y-2.5 text-xs\">\n                  <li class=\"flex items-start gap-2\">\n                    <Check class=\"text-success mt-0.5 size-4 shrink-0\" />\n                    <span class=\"font-medium\">Unlimited team seats & custom workspace roles</span>\n                  </li>\n                  <li class=\"flex items-start gap-2\">\n                    <Check class=\"text-success mt-0.5 size-4 shrink-0\" />\n                    <span>2.5M monthly API calls & priority queue</span>\n                  </li>\n                  <li class=\"flex items-start gap-2\">\n                    <Check class=\"text-success mt-0.5 size-4 shrink-0\" />\n                    <span>Google & Okta SAML SSO integration</span>\n                  </li>\n                  <li class=\"flex items-start gap-2\">\n                    <Check class=\"text-success mt-0.5 size-4 shrink-0\" />\n                    <span>365-day immutable compliance logs</span>\n                  </li>\n                  <li class=\"flex items-start gap-2\">\n                    <Check class=\"text-success mt-0.5 size-4 shrink-0\" />\n                    <span>Priority ticketing with 4h guaranteed SLA</span>\n                  </li>\n                </ul>\n              </div>\n\n              <!-- Addons Selector for Team -->\n              <div class=\"border-border bg-muted/30 space-y-2.5 rounded-lg border p-3\">\n                <p class=\"text-foreground text-xs font-semibold\">Optional Power Add-ons</p>\n                <div class=\"flex items-center justify-between text-xs\">\n                  <label for=\"vue-sla-addon\" class=\"text-muted-foreground cursor-pointer\">\n                    24/7 Dedicated SLA (+{{ sym }}{{ Math.round(99 * rates) }}/mo)\n                  </label>\n                  <Switch id=\"vue-sla-addon\" v-model=\"addDedicatedSla\" />\n                </div>\n                <div class=\"flex items-center justify-between text-xs\">\n                  <label for=\"vue-vault-addon\" class=\"text-muted-foreground cursor-pointer\">\n                    SOC 2 Vault Streaming (+{{ sym }}{{ Math.round(49 * rates) }}/mo)\n                  </label>\n                  <Switch id=\"vue-vault-addon\" v-model=\"addAuditVault\" />\n                </div>\n              </div>\n            </CardContent>\n          </div>\n\n          <CardFooter class=\"border-border mt-auto border-t pt-4\">\n            <Button class=\"h-10 w-full gap-1.5 text-xs font-semibold shadow-sm\">\n              <span>Deploy Team Workspace</span>\n              <ArrowRight class=\"size-3.5\" />\n            </Button>\n          </CardFooter>\n        </Card>\n\n        <!-- Tier 3: Enterprise Platform -->\n        <Card\n          class=\"border-border bg-card hover:border-primary/40 relative flex flex-col justify-between shadow-xs transition-colors duration-200 hover:shadow-md\"\n        >\n          <div>\n            <CardHeader class=\"pb-4\">\n              <div class=\"flex items-center justify-between\">\n                <Badge variant=\"outline\" class=\"font-mono text-xs\">Enterprise & Security</Badge>\n              </div>\n              <CardTitle class=\"text-foreground text-xl font-bold tracking-tight\">Enterprise Suite</CardTitle>\n              <CardDescription class=\"text-muted-foreground text-xs\">\n                Dedicated infrastructure, custom security controls, and bespoke compliance SLAs.\n              </CardDescription>\n\n              <div class=\"mt-6 space-y-1\">\n                <div class=\"flex items-baseline gap-1.5\">\n                  <span class=\"text-foreground text-4xl font-bold tracking-tight\">\n                    {{ sym }}{{ Math.round(enterpriseBase * rates) }}\n                  </span>\n                  <span class=\"text-muted-foreground text-xs font-medium\">/ seat / month</span>\n                </div>\n                <div class=\"text-muted-foreground font-mono text-xs\">\n                  Custom volume licensing available for 100+ seats\n                </div>\n              </div>\n            </CardHeader>\n\n            <CardContent class=\"space-y-4 pt-2\">\n              <Separator />\n              <div class=\"space-y-2.5\">\n                <p class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                  Everything in Team, plus\n                </p>\n                <ul class=\"text-foreground space-y-2.5 text-xs\">\n                  <li class=\"flex items-start gap-2\">\n                    <Check class=\"text-success mt-0.5 size-4 shrink-0\" />\n                    <span>Custom SCIM v2 user provisioning & directory sync</span>\n                  </li>\n                  <li class=\"flex items-start gap-2\">\n                    <Check class=\"text-success mt-0.5 size-4 shrink-0\" />\n                    <span>Dedicated VPC peering & custom data residency</span>\n                  </li>\n                  <li class=\"flex items-start gap-2\">\n                    <Check class=\"text-success mt-0.5 size-4 shrink-0\" />\n                    <span>99.99% uptime SLA with financial penalty backing</span>\n                  </li>\n                  <li class=\"flex items-start gap-2\">\n                    <Check class=\"text-success mt-0.5 size-4 shrink-0\" />\n                    <span>Assigned Principal Solutions Engineer & private Slack</span>\n                  </li>\n                  <li class=\"flex items-start gap-2\">\n                    <Check class=\"text-success mt-0.5 size-4 shrink-0\" />\n                    <span>Custom Master Service Agreement (MSA) & DPA</span>\n                  </li>\n                </ul>\n              </div>\n            </CardContent>\n          </div>\n\n          <CardFooter class=\"border-border mt-auto border-t pt-4\">\n            <Button variant=\"outline\" class=\"h-10 w-full gap-1.5 text-xs font-semibold\">\n              <ShieldCheck class=\"text-primary size-3.5\" />\n              <span>Contact Solutions Team</span>\n            </Button>\n          </CardFooter>\n        </Card>\n      </div>\n\n      <!-- Collapsible Feature Matrix Trigger -->\n      <div class=\"mt-12 text-center\">\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          class=\"text-foreground hover:bg-muted gap-2 text-xs font-semibold\"\n          @click=\"showComparisonTable = !showComparisonTable\"\n        >\n          <span>{{\n            showComparisonTable ? 'Hide Detailed Feature Comparison' : 'Compare All Features & Enterprise Limits'\n          }}</span>\n          <ChevronUp v-if=\"showComparisonTable\" class=\"size-4\" />\n          <ChevronDown v-else class=\"size-4\" />\n        </Button>\n      </div>\n\n      <!-- Feature Comparison Matrix Table -->\n      <div v-if=\"showComparisonTable\" class=\"border-border bg-card mt-8 overflow-hidden rounded-xl border shadow-xs\">\n        <div class=\"border-border bg-muted/20 flex flex-wrap items-center justify-between gap-4 border-b p-4 sm:p-6\">\n          <div>\n            <h3 class=\"text-foreground text-base font-bold\">Detailed Specification & Limits</h3>\n            <p class=\"text-muted-foreground text-xs\">Comprehensive side-by-side breakdown across every tier.</p>\n          </div>\n          <Badge variant=\"outline\" class=\"font-mono text-xs\">All plans include SSL & automated backups</Badge>\n        </div>\n\n        <div class=\"overflow-x-auto\">\n          <Table>\n            <TableHeader>\n              <TableRow class=\"bg-muted/40\">\n                <TableHead class=\"text-foreground w-[34%] text-xs font-semibold\">Capabilities</TableHead>\n                <TableHead class=\"text-foreground w-[22%] text-xs font-semibold\">Starter Studio</TableHead>\n                <TableHead class=\"text-primary w-[22%] text-xs font-bold font-semibold\">Team Scale</TableHead>\n                <TableHead class=\"text-foreground w-[22%] text-xs font-semibold\">Enterprise Suite</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              <template v-for=\"(group, idx) in comparisonMatrix\" :key=\"idx\">\n                <TableRow class=\"bg-muted/60 text-muted-foreground text-xs font-semibold\">\n                  <TableCell colspan=\"4\" class=\"py-2.5 font-mono text-xs tracking-wider uppercase\">\n                    {{ group.category }}\n                  </TableCell>\n                </TableRow>\n                <TableRow v-for=\"(feat, fIdx) in group.features\" :key=\"fIdx\" class=\"text-xs\">\n                  <TableCell class=\"text-foreground py-3 font-medium\">\n                    {{ feat.name }}\n                  </TableCell>\n                  <TableCell class=\"text-muted-foreground py-3\">{{ feat.starter }}</TableCell>\n                  <TableCell class=\"text-foreground bg-primary/5 py-3 font-medium\">{{ feat.team }}</TableCell>\n                  <TableCell class=\"text-foreground py-3\">{{ feat.enterprise }}</TableCell>\n                </TableRow>\n              </template>\n            </TableBody>\n          </Table>\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/pricing/Pricing01.vue"
    },
    {
      "path": "packages/registry-vue/blocks/pricing/PricingCalculator.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref, type HTMLAttributes } from 'vue'\nimport { ArrowRight, Check, HardDrive, Headphones, KeyRound, ShieldCheck, Users, Zap } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { Slider } from '@/components/ui/slider'\nimport { Switch } from '@/components/ui/switch'\n\ninterface Props {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<Props>()\n\ninterface RequestTier {\n  label: string\n  requests: number\n  cost: number\n}\n\ninterface StorageTier {\n  label: string\n  gb: number\n  cost: number\n}\n\nconst REQUEST_TIERS: RequestTier[] = [\n  { label: '10K requests', requests: 10_000, cost: 0 },\n  { label: '50K requests', requests: 50_000, cost: 25 },\n  { label: '100K requests', requests: 100_000, cost: 60 },\n  { label: '250K requests', requests: 250_000, cost: 120 },\n  { label: '500K requests', requests: 500_000, cost: 220 },\n  { label: '1M requests', requests: 1_000_000, cost: 400 },\n  { label: '2.5M requests', requests: 2_500_000, cost: 750 },\n  { label: '5M requests', requests: 5_000_000, cost: 1200 },\n]\n\nconst STORAGE_TIERS: StorageTier[] = [\n  { label: '100 GB', gb: 100, cost: 10 },\n  { label: '250 GB', gb: 250, cost: 25 },\n  { label: '500 GB', gb: 500, cost: 45 },\n  { label: '1 TB', gb: 1_000, cost: 80 },\n  { label: '2 TB', gb: 2_000, cost: 150 },\n  { label: '5 TB', gb: 5_000, cost: 320 },\n  { label: '10 TB', gb: 10_000, cost: 580 },\n]\n\nconst SEAT_PRICE = 15\nconst SUPPORT_MANAGER_PRICE = 200\nconst CUSTOM_SLA_PRICE = 500\nconst SSO_PRICE = 100\n\nconst SEAT_MARKS = {\n  1: '1',\n  25: '25',\n  50: '50',\n  75: '75',\n  100: '100',\n}\n\nconst REQUEST_MARKS = {\n  0: '10K',\n  2: '100K',\n  4: '500K',\n  7: '5M',\n}\n\nconst STORAGE_MARKS = {\n  0: '100 GB',\n  2: '500 GB',\n  4: '2 TB',\n  6: '10 TB',\n}\n\nconst isAnnual = ref(true)\nconst seats = ref(12)\nconst requestIndex = ref(2)\nconst storageIndex = ref(2)\nconst addonSupport = ref(false)\nconst addonSla = ref(false)\nconst addonSso = ref(true)\n\nconst currentRequestTier = computed(() => REQUEST_TIERS[requestIndex.value] ?? REQUEST_TIERS[0])\nconst currentStorageTier = computed(() => STORAGE_TIERS[storageIndex.value] ?? STORAGE_TIERS[0])\n\nconst seatTier = computed(() => {\n  if (seats.value <= 5) return { label: 'Starter Team', variant: 'secondary' as const }\n  if (seats.value <= 25) return { label: 'Growth Team', variant: 'outline' as const }\n  return { label: 'Scale Team', variant: 'default' as const }\n})\n\nconst recommendedPlan = computed(() => {\n  if (addonSla.value || requestIndex.value >= 6 || storageIndex.value >= 5 || seats.value >= 30) {\n    return { name: 'Enterprise', badge: 'Enterprise Plan', baseFee: 199, variant: 'default' as const }\n  }\n  if (seats.value >= 8 || requestIndex.value >= 3 || storageIndex.value >= 3 || addonSupport.value) {\n    return { name: 'Growth', badge: 'Growth Plan', baseFee: 79, variant: 'default' as const }\n  }\n  return { name: 'Starter', badge: 'Starter Plan', baseFee: 29, variant: 'secondary' as const }\n})\n\nconst baseCost = computed(() => recommendedPlan.value.baseFee)\nconst seatsCost = computed(() => seats.value * SEAT_PRICE)\nconst requestsCost = computed(() => currentRequestTier.value.cost)\nconst storageCost = computed(() => currentStorageTier.value.cost)\nconst addonsCost = computed(() => {\n  let cost = 0\n  if (addonSupport.value) cost += SUPPORT_MANAGER_PRICE\n  if (addonSla.value) cost += CUSTOM_SLA_PRICE\n  if (addonSso.value) cost += SSO_PRICE\n  return cost\n})\n\nconst activeAddonsCount = computed(() => {\n  let count = 0\n  if (addonSupport.value) count++\n  if (addonSla.value) count++\n  if (addonSso.value) count++\n  return count\n})\n\nconst subtotalMonthly = computed(\n  () => baseCost.value + seatsCost.value + requestsCost.value + storageCost.value + addonsCost.value,\n)\n\nconst discountMultiplier = computed(() => (isAnnual.value ? 0.8 : 1.0))\nconst totalMonthly = computed(() => Math.round(subtotalMonthly.value * discountMultiplier.value))\nconst totalAnnual = computed(() => totalMonthly.value * 12)\nconst annualSavings = computed(() => Math.round(subtotalMonthly.value * 0.2 * 12))\n</script>\n\n<template>\n  <div data-slot=\"pricing-calculator\" :class=\"cn('mx-auto w-full max-w-6xl space-y-10 p-4 sm:p-6 lg:p-8', props.class)\">\n    <div class=\"flex flex-col items-center gap-4 text-center\">\n      <Badge variant=\"outline\" class=\"gap-1.5 px-3 py-1 text-xs font-medium tracking-wider uppercase\">\n        <ShieldCheck class=\"text-primary size-3.5\" />\n        Pricing Calculator\n      </Badge>\n      <div class=\"space-y-2\">\n        <h2 class=\"text-foreground text-2xl font-bold tracking-tight sm:text-3xl lg:text-4xl\">\n          Interactive Pricing Calculator\n        </h2>\n        <p class=\"text-muted-foreground mx-auto max-w-2xl text-sm sm:text-base\">\n          Calculate your exact monthly or annual investment based on usage.\n        </p>\n      </div>\n\n      <div class=\"border-border bg-card mt-2 inline-flex items-center gap-3 rounded-full border px-4 py-2 shadow-xs\">\n        <span\n          :class=\"\n            cn(\n              'text-xs font-medium transition-colors',\n              !isAnnual ? 'text-foreground font-semibold' : 'text-muted-foreground',\n            )\n          \"\n        >\n          Monthly\n        </span>\n        <Switch :model-value=\"isAnnual\" @update:model-value=\"(val) => (isAnnual = val)\" />\n        <span\n          :class=\"\n            cn(\n              'text-xs font-medium transition-colors',\n              isAnnual ? 'text-foreground font-semibold' : 'text-muted-foreground',\n            )\n          \"\n        >\n          Pay Annually\n        </span>\n        <Badge variant=\"secondary\" class=\"bg-primary/10 text-primary border-primary/20 text-xs font-semibold\">\n          Save 20%\n        </Badge>\n      </div>\n    </div>\n\n    <div class=\"grid grid-cols-1 gap-8 lg:grid-cols-12 lg:items-start\">\n      <div class=\"space-y-6 lg:col-span-7\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Capacity &amp; Scale</CardTitle>\n            <CardDescription>Configure team seats, API request throughput, and dedicated storage.</CardDescription>\n          </CardHeader>\n          <CardContent class=\"space-y-8\">\n            <div class=\"space-y-4\">\n              <div class=\"flex items-center justify-between\">\n                <div class=\"flex items-center gap-2.5\">\n                  <div\n                    class=\"bg-primary/10 text-primary border-primary/20 flex size-8 shrink-0 items-center justify-center rounded-md border\"\n                  >\n                    <Users class=\"size-4\" />\n                  </div>\n                  <div>\n                    <span class=\"text-foreground text-sm font-medium\">Team Seats</span>\n                    <Badge :variant=\"seatTier.variant\" class=\"ml-2 text-xs font-normal\">\n                      {{ seatTier.label }}\n                    </Badge>\n                  </div>\n                </div>\n                <div class=\"text-right\">\n                  <span class=\"text-foreground text-base font-semibold tabular-nums\">{{ seats }}</span>\n                  <span class=\"text-muted-foreground text-xs\"> seats (${{ seats * SEAT_PRICE }}/mo)</span>\n                </div>\n              </div>\n              <div class=\"pb-6\">\n                <Slider\n                  :model-value=\"seats\"\n                  :min=\"1\"\n                  :max=\"100\"\n                  :step=\"1\"\n                  :marks=\"SEAT_MARKS\"\n                  :tooltip=\"(val) => `${val} seats`\"\n                  @update:model-value=\"(val) => (seats = typeof val === 'number' ? val : val[0])\"\n                />\n              </div>\n              <p class=\"text-muted-foreground text-xs\">\n                Full workspace access, fine-grained permission controls, and audit log tracking for each member.\n              </p>\n            </div>\n\n            <Separator />\n\n            <div class=\"space-y-4\">\n              <div class=\"flex items-center justify-between\">\n                <div class=\"flex items-center gap-2.5\">\n                  <div\n                    class=\"bg-primary/10 text-primary border-primary/20 flex size-8 shrink-0 items-center justify-center rounded-md border\"\n                  >\n                    <Zap class=\"size-4\" />\n                  </div>\n                  <div>\n                    <span class=\"text-foreground text-sm font-medium\">Monthly API Requests</span>\n                  </div>\n                </div>\n                <div class=\"text-right\">\n                  <span class=\"text-foreground text-base font-semibold tabular-nums\">\n                    {{ currentRequestTier.label }}\n                  </span>\n                  <span class=\"text-muted-foreground text-xs\">\n                    ({{ currentRequestTier.cost === 0 ? 'Included' : `+$${currentRequestTier.cost}/mo` }})\n                  </span>\n                </div>\n              </div>\n              <div class=\"pb-6\">\n                <Slider\n                  :model-value=\"requestIndex\"\n                  :min=\"0\"\n                  :max=\"REQUEST_TIERS.length - 1\"\n                  :step=\"1\"\n                  :marks=\"REQUEST_MARKS\"\n                  :tooltip=\"(idx) => REQUEST_TIERS[idx]?.label ?? ''\"\n                  @update:model-value=\"(val) => (requestIndex = typeof val === 'number' ? val : val[0])\"\n                />\n              </div>\n              <p class=\"text-muted-foreground text-xs\">\n                Globally distributed edge endpoints, automatic rate limiting, and sub-50ms p99 latency SLA.\n              </p>\n            </div>\n\n            <Separator />\n\n            <div class=\"space-y-4\">\n              <div class=\"flex items-center justify-between\">\n                <div class=\"flex items-center gap-2.5\">\n                  <div\n                    class=\"bg-primary/10 text-primary border-primary/20 flex size-8 shrink-0 items-center justify-center rounded-md border\"\n                  >\n                    <HardDrive class=\"size-4\" />\n                  </div>\n                  <div>\n                    <span class=\"text-foreground text-sm font-medium\">Dedicated Cloud Storage</span>\n                  </div>\n                </div>\n                <div class=\"text-right\">\n                  <span class=\"text-foreground text-base font-semibold tabular-nums\">\n                    {{ currentStorageTier.label }}\n                  </span>\n                  <span class=\"text-muted-foreground text-xs\"> (+${{ currentStorageTier.cost }}/mo)</span>\n                </div>\n              </div>\n              <div class=\"pb-6\">\n                <Slider\n                  :model-value=\"storageIndex\"\n                  :min=\"0\"\n                  :max=\"STORAGE_TIERS.length - 1\"\n                  :step=\"1\"\n                  :marks=\"STORAGE_MARKS\"\n                  :tooltip=\"(idx) => STORAGE_TIERS[idx]?.label ?? ''\"\n                  @update:model-value=\"(val) => (storageIndex = typeof val === 'number' ? val : val[0])\"\n                />\n              </div>\n              <p class=\"text-muted-foreground text-xs\">\n                Encrypted at rest (AES-256) with multi-region automated replication and daily disaster backups.\n              </p>\n            </div>\n          </CardContent>\n        </Card>\n\n        <Card>\n          <CardHeader>\n            <CardTitle>Enterprise Add-ons</CardTitle>\n            <CardDescription\n              >Enhance your infrastructure with enterprise compliance, reliability, and support.</CardDescription\n            >\n          </CardHeader>\n          <CardContent class=\"space-y-3\">\n            <div\n              class=\"border-border bg-card hover:border-primary/30 flex flex-col justify-between gap-4 rounded-lg border p-4 transition-colors sm:flex-row sm:items-center\"\n            >\n              <div class=\"flex items-start gap-3\">\n                <div\n                  class=\"bg-primary/10 text-primary border-primary/20 mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md border\"\n                >\n                  <Headphones class=\"size-4\" />\n                </div>\n                <div class=\"space-y-0.5\">\n                  <div class=\"flex items-center gap-2\">\n                    <span class=\"text-foreground text-sm font-medium\">Dedicated Support Manager</span>\n                    <Badge variant=\"outline\" class=\"text-xs font-normal\">+$200/mo</Badge>\n                  </div>\n                  <p class=\"text-muted-foreground text-xs\">\n                    Direct Slack channel, named technical account manager &amp; 1-hour response SLA.\n                  </p>\n                </div>\n              </div>\n              <div class=\"flex sm:justify-end\">\n                <Switch :model-value=\"addonSupport\" @update:model-value=\"(val) => (addonSupport = val)\" />\n              </div>\n            </div>\n\n            <div\n              class=\"border-border bg-card hover:border-primary/30 flex flex-col justify-between gap-4 rounded-lg border p-4 transition-colors sm:flex-row sm:items-center\"\n            >\n              <div class=\"flex items-start gap-3\">\n                <div\n                  class=\"bg-primary/10 text-primary border-primary/20 mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md border\"\n                >\n                  <ShieldCheck class=\"size-4\" />\n                </div>\n                <div class=\"space-y-0.5\">\n                  <div class=\"flex items-center gap-2\">\n                    <span class=\"text-foreground text-sm font-medium\">Custom SLA Guarantee</span>\n                    <Badge variant=\"outline\" class=\"text-xs font-normal\">+$500/mo</Badge>\n                  </div>\n                  <p class=\"text-muted-foreground text-xs\">\n                    99.99% uptime guarantee with financial commitments and priority disaster recovery.\n                  </p>\n                </div>\n              </div>\n              <div class=\"flex sm:justify-end\">\n                <Switch :model-value=\"addonSla\" @update:model-value=\"(val) => (addonSla = val)\" />\n              </div>\n            </div>\n\n            <div\n              class=\"border-border bg-card hover:border-primary/30 flex flex-col justify-between gap-4 rounded-lg border p-4 transition-colors sm:flex-row sm:items-center\"\n            >\n              <div class=\"flex items-start gap-3\">\n                <div\n                  class=\"bg-primary/10 text-primary border-primary/20 mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md border\"\n                >\n                  <KeyRound class=\"size-4\" />\n                </div>\n                <div class=\"space-y-0.5\">\n                  <div class=\"flex items-center gap-2\">\n                    <span class=\"text-foreground text-sm font-medium\">Single Sign-On (SSO / SAML)</span>\n                    <Badge variant=\"outline\" class=\"text-xs font-normal\">+$100/mo</Badge>\n                  </div>\n                  <p class=\"text-muted-foreground text-xs\">\n                    Okta, Azure AD, Google Workspace, and SAML 2.0 enterprise identity integration.\n                  </p>\n                </div>\n              </div>\n              <div class=\"flex sm:justify-end\">\n                <Switch :model-value=\"addonSso\" @update:model-value=\"(val) => (addonSso = val)\" />\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n\n      <div class=\"lg:sticky lg:top-8 lg:col-span-5\">\n        <Card class=\"border-border bg-card shadow-xs\">\n          <CardHeader class=\"pb-4\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                Estimated Investment\n              </span>\n              <Badge :variant=\"recommendedPlan.variant\" class=\"gap-1 shadow-xs\">\n                <ShieldCheck v-if=\"recommendedPlan.name === 'Enterprise'\" class=\"size-3\" />\n                {{ recommendedPlan.badge }}\n              </Badge>\n            </div>\n            <div class=\"mt-4\">\n              <div class=\"flex items-baseline gap-1.5\">\n                <span class=\"text-foreground text-4xl font-bold tracking-tight tabular-nums sm:text-5xl\">\n                  ${{ totalMonthly }}\n                </span>\n                <span class=\"text-muted-foreground text-sm font-normal\"> / month</span>\n              </div>\n              <p v-if=\"isAnnual\" class=\"text-muted-foreground mt-2 text-xs\">\n                Billed annually (${{ totalAnnual.toLocaleString('en-US') }}/yr) ·\n                <span class=\"text-success font-semibold\">Save ${{ annualSavings.toLocaleString('en-US') }}/yr</span>\n              </p>\n              <p v-else class=\"text-muted-foreground mt-2 text-xs\">\n                Billed monthly · Switch to annual to save 20% (${{ annualSavings.toLocaleString('en-US') }}/yr)\n              </p>\n            </div>\n          </CardHeader>\n          <CardContent class=\"space-y-4\">\n            <Separator />\n            <div class=\"space-y-2.5\">\n              <div class=\"flex items-center justify-between text-sm\">\n                <span class=\"text-muted-foreground\">Base platform ({{ recommendedPlan.name }})</span>\n                <span class=\"font-medium tabular-nums\">${{ isAnnual ? Math.round(baseCost * 0.8) : baseCost }}/mo</span>\n              </div>\n              <div class=\"flex items-center justify-between text-sm\">\n                <span class=\"text-muted-foreground\">Team seats ({{ seats }} × ${{ SEAT_PRICE }})</span>\n                <span class=\"font-medium tabular-nums\"\n                  >${{ isAnnual ? Math.round(seatsCost * 0.8) : seatsCost }}/mo</span\n                >\n              </div>\n              <div class=\"flex items-center justify-between text-sm\">\n                <span class=\"text-muted-foreground\">API throughput ({{ currentRequestTier.label }})</span>\n                <span class=\"font-medium tabular-nums\">\n                  {{\n                    requestsCost === 0 ? 'Included' : `$${isAnnual ? Math.round(requestsCost * 0.8) : requestsCost}/mo`\n                  }}\n                </span>\n              </div>\n              <div class=\"flex items-center justify-between text-sm\">\n                <span class=\"text-muted-foreground\">Cloud storage ({{ currentStorageTier.label }})</span>\n                <span class=\"font-medium tabular-nums\">\n                  ${{ isAnnual ? Math.round(storageCost * 0.8) : storageCost }}/mo\n                </span>\n              </div>\n              <div class=\"flex items-center justify-between text-sm\">\n                <span class=\"text-muted-foreground\">Add-ons ({{ activeAddonsCount }} active)</span>\n                <span class=\"font-medium tabular-nums\">\n                  {{ addonsCost === 0 ? '$0/mo' : `$${isAnnual ? Math.round(addonsCost * 0.8) : addonsCost}/mo` }}\n                </span>\n              </div>\n              <div\n                v-if=\"isAnnual\"\n                class=\"bg-success/10 text-success flex items-center justify-between rounded-md px-2.5 py-1.5 text-xs font-medium\"\n              >\n                <span>Annual discount applied</span>\n                <span class=\"font-semibold tabular-nums\">20% off</span>\n              </div>\n            </div>\n            <Separator />\n            <ul class=\"text-muted-foreground space-y-2 text-xs\">\n              <li class=\"flex items-center gap-2\">\n                <Check class=\"text-primary size-3.5 shrink-0\" />\n                <span>14-day fully featured free trial</span>\n              </li>\n              <li class=\"flex items-center gap-2\">\n                <Check class=\"text-primary size-3.5 shrink-0\" />\n                <span>No credit card required upfront</span>\n              </li>\n              <li class=\"flex items-center gap-2\">\n                <Check class=\"text-primary size-3.5 shrink-0\" />\n                <span>Zero-downtime migration assistance</span>\n              </li>\n            </ul>\n          </CardContent>\n          <CardFooter class=\"flex flex-col gap-2.5 pt-2\">\n            <Button class=\"w-full gap-2 font-semibold shadow-xs\" size=\"lg\">\n              Start 14-Day Free Trial\n              <ArrowRight class=\"size-4\" />\n            </Button>\n            <Button variant=\"outline\" class=\"w-full\" size=\"default\"> Request Custom Quote </Button>\n          </CardFooter>\n        </Card>\n      </div>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/pricing/PricingCalculator.vue"
    },
    {
      "path": "packages/registry-vue/blocks/pricing/PricingEnterpriseSlaCard.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { ArrowRight, Building2, Calendar, CheckCircle2, Lock, Server } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { cn } from '@/lib/utils'\n\nexport interface SlaGuarantee {\n  title: string\n  metric: string\n  description: string\n  icon: string\n}\n\nexport interface ComplianceCert {\n  id: string\n  name: string\n  status: string\n  badgeVariant?: 'default' | 'outline' | 'secondary'\n}\n\nexport interface PricingEnterpriseSlaCardProps {\n  title?: string\n  description?: string\n  guarantees?: SlaGuarantee[]\n  certifications?: ComplianceCert[]\n  class?: string\n}\n\nconst DEFAULT_GUARANTEES: SlaGuarantee[] = [\n  {\n    title: 'High-Availability SLA',\n    metric: '99.999%',\n    description: 'Financial penalty-backed monthly uptime commitment across multi-region clusters.',\n    icon: 'ShieldCheck',\n  },\n  {\n    title: 'P1 Incident Response',\n    metric: '< 15 mins',\n    description: 'Direct paging to designated Staff Infrastructure Commanders 24/7/365.',\n    icon: 'Headphones',\n  },\n  {\n    title: 'Global Edge TTFB',\n    metric: '< 12ms',\n    description: 'Sub-15ms Time-To-First-Byte guaranteed via Anycast network mesh.',\n    icon: 'Zap',\n  },\n  {\n    title: 'Custom Legal & DPA',\n    metric: 'Bespoke',\n    description: 'Dedicated legal counsel review, redline allowances, and customized BAAs.',\n    icon: 'Scale',\n  },\n]\n\nconst DEFAULT_CERTS: ComplianceCert[] = [\n  { id: 'soc2', name: 'SOC 2 Type II Certified', status: 'Continuous Audit' },\n  { id: 'hipaa', name: 'HIPAA Compliant BAA', status: 'Available' },\n  { id: 'iso27001', name: 'ISO/IEC 27001:2022', status: 'Certified' },\n  { id: 'gdpr', name: 'GDPR & CCPA Verified', status: 'Compliant' },\n  { id: 'fedramp', name: 'FedRAMP In-Process', status: 'High Baseline' },\n]\n\nconst props = withDefaults(defineProps<PricingEnterpriseSlaCardProps>(), {\n  title: 'Mission-critical infrastructure with contractual legal guarantees.',\n  description:\n    'Tailored enterprise licensing, custom security reviews, isolated VPC deployments, and white-glove migration engineering.',\n})\n\nconst activeGuarantees = computed(() => props.guarantees ?? DEFAULT_GUARANTEES)\nconst activeCertifications = computed(() => props.certifications ?? DEFAULT_CERTS)\n\nconst isMeetingRequested = ref(false)\n\nfunction requestMeeting() {\n  isMeetingRequested.value = true\n  setTimeout(() => {\n    isMeetingRequested.value = false\n  }, 3000)\n}\n</script>\n\n<template>\n  <section\n    data-slot=\"pricing-enterprise-sla-card\"\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=\"#enterprise-contract\"\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          <Building2 class=\"text-primary size-3.5\" />\n          <span>Enterprise Custom Contracting</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      <!-- Main Enterprise Showcase Container -->\n      <div class=\"border-border bg-card mt-12 overflow-hidden rounded-2xl border shadow-sm\">\n        <div class=\"divide-border grid grid-cols-1 divide-y lg:grid-cols-12 lg:divide-x lg:divide-y-0\">\n          <!-- Left: SLA Guarantees & Contractual Commitments (7 Cols) -->\n          <div class=\"space-y-8 p-8 lg:col-span-7\">\n            <div class=\"space-y-1\">\n              <div class=\"text-primary text-xs font-bold tracking-wider uppercase\">Service Level Agreement</div>\n              <h3 class=\"text-foreground text-xl font-bold\">Penalty-Backed Contractual Metrics</h3>\n              <p class=\"text-muted-foreground text-xs\">\n                Every commitment is codified into your master service agreement with direct financial remedies.\n              </p>\n            </div>\n\n            <!-- Guarantees 2x2 Grid -->\n            <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n              <div\n                v-for=\"(item, idx) in activeGuarantees\"\n                :key=\"idx\"\n                class=\"border-border bg-muted/20 space-y-2 rounded-xl border p-4\"\n              >\n                <div class=\"flex items-center justify-between\">\n                  <span class=\"text-foreground text-xs font-bold\">{{ item.title }}</span>\n                  <span class=\"text-primary font-mono text-xs font-bold\">{{ item.metric }}</span>\n                </div>\n                <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                  {{ item.description }}\n                </p>\n              </div>\n            </div>\n\n            <!-- Compliance & Governance Strip -->\n            <div class=\"space-y-3 pt-2\">\n              <div class=\"text-muted-foreground flex items-center gap-2 text-xs font-bold tracking-wider uppercase\">\n                <Lock class=\"text-primary size-3.5\" />\n                <span>Security & Regulatory Attestations</span>\n              </div>\n              <div class=\"flex flex-wrap gap-2\">\n                <Badge\n                  v-for=\"cert in activeCertifications\"\n                  :key=\"cert.id\"\n                  variant=\"outline\"\n                  class=\"border-border bg-background text-foreground gap-1.5 px-3 py-1 text-xs font-medium\"\n                >\n                  <CheckCircle2 class=\"text-success size-3\" />\n                  <span>{{ cert.name }}</span>\n                  <span class=\"text-muted-foreground font-mono text-xs\">({{ cert.status }})</span>\n                </Badge>\n              </div>\n            </div>\n          </div>\n\n          <!-- Right: Direct Enterprise Solution Consultation Card (5 Cols) -->\n          <div class=\"bg-muted/30 flex flex-col justify-between space-y-6 p-8 lg:col-span-5\">\n            <div class=\"space-y-4\">\n              <div class=\"border-border flex items-center justify-between border-b pb-3\">\n                <div class=\"flex items-center gap-2\">\n                  <Server class=\"text-primary size-4\" />\n                  <span class=\"text-foreground text-sm font-semibold\">Custom Private Deployment</span>\n                </div>\n                <Badge variant=\"outline\" class=\"border-success/30 bg-success/10 text-success font-mono text-xs\">\n                  Tailored\n                </Badge>\n              </div>\n\n              <div class=\"space-y-2.5\">\n                <div class=\"text-foreground text-xs font-bold\">Included with Custom Tier:</div>\n                <ul class=\"text-muted-foreground space-y-2 text-xs\">\n                  <li class=\"flex items-center gap-2\">\n                    <CheckCircle2 class=\"text-success size-3.5 shrink-0\" />\n                    <span>Dedicated AWS / GCP VPC peering or self-hosted air-gap</span>\n                  </li>\n                  <li class=\"flex items-center gap-2\">\n                    <CheckCircle2 class=\"text-success size-3.5 shrink-0\" />\n                    <span>Custom SAML 2.0 / Okta / Azure AD SCIM provisioning</span>\n                  </li>\n                  <li class=\"flex items-center gap-2\">\n                    <CheckCircle2 class=\"text-success size-3.5 shrink-0\" />\n                    <span>Dedicated Solution Architect & design system migration team</span>\n                  </li>\n                  <li class=\"flex items-center gap-2\">\n                    <CheckCircle2 class=\"text-success size-3.5 shrink-0\" />\n                    <span>Invoiced payment via ACH, Wire Transfer, or AWS Marketplace</span>\n                  </li>\n                </ul>\n              </div>\n            </div>\n\n            <!-- Action Block -->\n            <div class=\"border-border space-y-3 border-t pt-4\">\n              <Button class=\"w-full gap-2 shadow-xs\" size=\"lg\" @click=\"requestMeeting\">\n                <Calendar class=\"size-4\" />\n                <span>{{\n                  isMeetingRequested ? 'Direct Routing to Architect...' : 'Book Enterprise Technical Review'\n                }}</span>\n              </Button>\n              <div class=\"text-muted-foreground text-center text-xs\">\n                Average executive response time: <strong>under 20 minutes</strong>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/pricing/PricingEnterpriseSlaCard.vue"
    },
    {
      "path": "packages/registry-vue/blocks/pricing/PricingFeatureAddonBuilder.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { ArrowRight, Calculator, Check, CreditCard } 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 PricingPlan {\n  id: string\n  name: string\n  monthlyPrice: number\n  description: string\n  includedSeats: number\n}\n\nexport interface PricingAddon {\n  id: string\n  name: string\n  monthlyPrice: number\n  description: string\n  category: string\n}\n\nexport interface PricingFeatureAddonBuilderProps {\n  title?: string\n  description?: string\n  plans?: PricingPlan[]\n  addons?: PricingAddon[]\n  class?: string\n}\n\nconst DEFAULT_PLANS: PricingPlan[] = [\n  {\n    id: 'starter',\n    name: 'Starter Tier',\n    monthlyPrice: 29,\n    description: 'For indie developers and early-stage prototypes needing unbundled speed.',\n    includedSeats: 2,\n  },\n  {\n    id: 'growth',\n    name: 'Growth Core',\n    monthlyPrice: 99,\n    description: 'For scaling product engineering teams building high-conversion platforms.',\n    includedSeats: 5,\n  },\n  {\n    id: 'scale',\n    name: 'Scale Enterprise',\n    monthlyPrice: 299,\n    description: 'For mission-critical production clusters requiring sub-10ms global edge delivery.',\n    includedSeats: 15,\n  },\n]\n\nconst DEFAULT_ADDONS: PricingAddon[] = [\n  {\n    id: 'dedicated-ip',\n    name: 'Dedicated Static Edge IP',\n    monthlyPrice: 49,\n    description: 'Static IPv4/IPv6 address allocations with zero-reputation penalty.',\n    category: 'Network',\n  },\n  {\n    id: 'audit-logs',\n    name: 'Immutable SOC2 Audit Logs',\n    monthlyPrice: 79,\n    description: 'Cryptographically signed telemetry logs with 365-day cold storage retention.',\n    category: 'Security',\n  },\n  {\n    id: 'multi-region',\n    name: 'Multi-Region Active-Active Mesh',\n    monthlyPrice: 129,\n    description: 'Synchronized cross-continental database replicas and automatic DNS failover.',\n    category: 'Reliability',\n  },\n  {\n    id: 'priority-sla',\n    name: '1-Hour Enterprise Response SLA',\n    monthlyPrice: 199,\n    description: 'Direct Slack / Discord hotline with senior design engineering staff.',\n    category: 'Support',\n  },\n]\n\nconst props = withDefaults(defineProps<PricingFeatureAddonBuilderProps>(), {\n  title: 'Build your custom plan with transparent, zero-surprise pricing.',\n  description:\n    'Select your base tier, adjust seat allocations, and toggle modular enterprise add-ons with real-time invoice calculations.',\n})\n\nconst activePlans = computed(() => props.plans ?? DEFAULT_PLANS)\nconst activeAddons = computed(() => props.addons ?? DEFAULT_ADDONS)\n\nconst selectedPlanId = ref('growth')\nconst selectedAddonIds = ref<string[]>(['dedicated-ip', 'audit-logs'])\nconst seatCount = ref(8)\nconst isAnnual = ref(true)\n\nconst selectedPlan = computed(() => {\n  return activePlans.value.find((p) => p.id === selectedPlanId.value) || activePlans.value[0]\n})\n\nconst extraSeats = computed(() => {\n  return Math.max(0, seatCount.value - selectedPlan.value.includedSeats)\n})\n\nconst extraSeatCost = computed(() => extraSeats.value * 15)\n\nconst totalAddonsCost = computed(() => {\n  return activeAddons.value\n    .filter((a) => selectedAddonIds.value.includes(a.id))\n    .reduce((sum, a) => sum + a.monthlyPrice, 0)\n})\n\nconst monthlySubtotal = computed(() => {\n  return selectedPlan.value.monthlyPrice + extraSeatCost.value + totalAddonsCost.value\n})\n\nconst finalMonthlyRate = computed(() => {\n  if (isAnnual.value) {\n    return Math.round(monthlySubtotal.value * 0.8)\n  }\n  return monthlySubtotal.value\n})\n\nconst annualSavings = computed(() => {\n  return (monthlySubtotal.value - Math.round(monthlySubtotal.value * 0.8)) * 12\n})\n\nfunction toggleAddon(addonId: string) {\n  if (selectedAddonIds.value.includes(addonId)) {\n    selectedAddonIds.value = selectedAddonIds.value.filter((id) => id !== addonId)\n  } else {\n    selectedAddonIds.value.push(addonId)\n  }\n}\n</script>\n\n<template>\n  <section\n    data-slot=\"pricing-feature-addon-builder\"\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=\"#pricing-calculator\"\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          <Calculator class=\"text-primary size-3.5\" />\n          <span>Real-time Add-on Cost Synthesizer</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\n        <!-- Billing Cadence Toggle -->\n        <div class=\"flex items-center justify-center gap-3 pt-2\">\n          <span\n            class=\"text-xs font-medium\"\n            :class=\"!isAnnual ? 'text-foreground font-semibold' : 'text-muted-foreground'\"\n          >\n            Monthly Billing\n          </span>\n          <button\n            type=\"button\"\n            class=\"bg-muted focus-visible:ring-ring relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus-visible:ring-2 focus-visible:outline-none\"\n            :class=\"isAnnual ? 'bg-primary' : 'bg-muted'\"\n            @click=\"isAnnual = !isAnnual\"\n          >\n            <span\n              class=\"bg-background pointer-events-none inline-block size-5 transform rounded-full shadow-lg ring-0 transition duration-200 ease-in-out\"\n              :class=\"isAnnual ? 'translate-x-5' : 'translate-x-0'\"\n            />\n          </button>\n          <span\n            class=\"flex items-center gap-1.5 text-xs font-medium\"\n            :class=\"isAnnual ? 'text-foreground font-semibold' : 'text-muted-foreground'\"\n          >\n            <span>Annual Billing</span>\n            <Badge variant=\"outline\" class=\"border-success/30 bg-success/10 text-success text-xs\"> Save 20% </Badge>\n          </span>\n        </div>\n      </div>\n\n      <!-- Add-on Builder Workbench -->\n      <div class=\"mt-12 grid grid-cols-1 gap-6 lg:grid-cols-12\">\n        <!-- Left: Plan Selection & Addon Toggles (7 Cols) -->\n        <div class=\"space-y-6 lg:col-span-7\">\n          <!-- Step 1: Base Tier Cards -->\n          <div class=\"space-y-3\">\n            <div class=\"text-muted-foreground text-xs font-bold tracking-wider uppercase\">\n              Step 1: Choose Base Core Tier\n            </div>\n            <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-3\">\n              <button\n                v-for=\"plan in activePlans\"\n                :key=\"plan.id\"\n                type=\"button\"\n                :class=\"\n                  cn(\n                    'flex flex-col justify-between rounded-xl border p-4 text-left transition-colors',\n                    selectedPlanId === plan.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=\"selectedPlanId = plan.id\"\n              >\n                <div>\n                  <div class=\"text-foreground text-xs font-bold\">{{ plan.name }}</div>\n                  <div class=\"text-foreground mt-1 font-mono text-lg font-bold\">\n                    ${{ plan.monthlyPrice }}<span class=\"text-muted-foreground text-xs font-normal\">/mo</span>\n                  </div>\n                </div>\n                <div class=\"text-muted-foreground mt-2 text-xs\">Includes {{ plan.includedSeats }} engineer seats</div>\n              </button>\n            </div>\n          </div>\n\n          <!-- Step 2: Seat Allocation Slider -->\n          <Card class=\"border-border bg-card/60 shadow-2xs\">\n            <CardContent class=\"space-y-2.5 p-4\">\n              <div class=\"flex items-center justify-between text-xs\">\n                <span class=\"text-foreground font-bold\">Engineer Team Seats</span>\n                <span class=\"text-foreground font-mono text-sm font-bold\"\n                  >{{ seatCount }} seats (${{ extraSeatCost }}/mo extra)</span\n                >\n              </div>\n              <input\n                v-model.number=\"seatCount\"\n                type=\"range\"\n                min=\"2\"\n                max=\"50\"\n                step=\"1\"\n                class=\"accent-primary w-full cursor-pointer\"\n              />\n              <div class=\"text-muted-foreground flex justify-between font-mono text-xs\">\n                <span>2 seats</span>\n                <span>50 seats</span>\n              </div>\n            </CardContent>\n          </Card>\n\n          <!-- Step 3: Enterprise Add-ons Checklist -->\n          <div class=\"space-y-3\">\n            <div class=\"text-muted-foreground text-xs font-bold tracking-wider uppercase\">\n              Step 3: Select Modular Capabilities\n            </div>\n            <div class=\"grid grid-cols-1 gap-2.5\">\n              <button\n                v-for=\"addon in activeAddons\"\n                :key=\"addon.id\"\n                type=\"button\"\n                :class=\"\n                  cn(\n                    'flex items-center justify-between rounded-xl border p-3.5 text-left transition-colors',\n                    selectedAddonIds.includes(addon.id)\n                      ? 'border-primary/60 bg-primary/5 shadow-2xs'\n                      : 'border-border bg-card hover:bg-muted/30 text-muted-foreground hover:text-foreground',\n                  )\n                \"\n                @click=\"toggleAddon(addon.id)\"\n              >\n                <div class=\"flex min-w-0 items-center gap-3\">\n                  <div\n                    :class=\"\n                      cn(\n                        'flex size-5 shrink-0 items-center justify-center rounded border transition-colors',\n                        selectedAddonIds.includes(addon.id)\n                          ? 'border-primary bg-primary text-primary-foreground'\n                          : 'border-border bg-background',\n                      )\n                    \"\n                  >\n                    <Check v-if=\"selectedAddonIds.includes(addon.id)\" class=\"size-3.5\" />\n                  </div>\n                  <div class=\"min-w-0 space-y-0.5\">\n                    <div class=\"flex items-center gap-2\">\n                      <span class=\"text-foreground text-xs font-bold\">{{ addon.name }}</span>\n                      <Badge variant=\"outline\" class=\"border-border text-muted-foreground text-xs\">\n                        {{ addon.category }}\n                      </Badge>\n                    </div>\n                    <div class=\"text-muted-foreground truncate text-xs\">{{ addon.description }}</div>\n                  </div>\n                </div>\n\n                <div class=\"text-foreground shrink-0 pl-2 font-mono text-xs font-bold\">\n                  +${{ addon.monthlyPrice }}<span class=\"text-muted-foreground text-xs font-normal\">/mo</span>\n                </div>\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <!-- Right: Real-time Invoice Estimate Card (5 Cols) -->\n        <div class=\"lg:col-span-5\">\n          <Card class=\"border-border bg-card/90 sticky top-8 shadow-md backdrop-blur-xs\">\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                  <CreditCard class=\"text-primary size-4\" />\n                  <span class=\"text-foreground text-sm font-semibold\">Estimated Monthly Invoice</span>\n                </div>\n                <Badge variant=\"outline\" class=\"border-border text-primary font-mono text-xs\">\n                  {{ isAnnual ? 'Annualized' : 'Monthly' }}\n                </Badge>\n              </div>\n\n              <!-- Price Breakdown List -->\n              <div class=\"space-y-3 text-xs\">\n                <div class=\"text-muted-foreground flex justify-between\">\n                  <span>{{ selectedPlan.name }}</span>\n                  <span class=\"text-foreground font-mono\">${{ selectedPlan.monthlyPrice }}.00</span>\n                </div>\n\n                <div v-if=\"extraSeats > 0\" class=\"text-muted-foreground flex justify-between\">\n                  <span>Extra Seats ({{ extraSeats }} &times; $15)</span>\n                  <span class=\"text-foreground font-mono\">${{ extraSeatCost }}.00</span>\n                </div>\n\n                <div\n                  v-for=\"addon in activeAddons.filter((a) => selectedAddonIds.includes(a.id))\"\n                  :key=\"addon.id\"\n                  class=\"text-muted-foreground flex justify-between\"\n                >\n                  <span class=\"truncate pr-2\">{{ addon.name }}</span>\n                  <span class=\"text-foreground font-mono\">${{ addon.monthlyPrice }}.00</span>\n                </div>\n\n                <div\n                  v-if=\"isAnnual\"\n                  class=\"border-border/60 text-success flex justify-between border-t pt-2 font-medium\"\n                >\n                  <span>Annual Billing Discount (20%)</span>\n                  <span class=\"font-mono\">&minus;${{ monthlySubtotal - finalMonthlyRate }}.00</span>\n                </div>\n              </div>\n\n              <!-- Total Sum Band -->\n              <div class=\"border-border bg-muted/40 space-y-1 rounded-lg border p-4\">\n                <div class=\"text-muted-foreground text-xs font-medium\">Net Monthly Investment</div>\n                <div class=\"flex items-baseline gap-1.5\">\n                  <span class=\"text-foreground font-mono text-3xl font-bold tracking-tight\">\n                    ${{ finalMonthlyRate }}\n                  </span>\n                  <span class=\"text-muted-foreground font-mono text-xs\">/ month</span>\n                </div>\n                <div v-if=\"isAnnual\" class=\"text-success text-xs font-medium\">\n                  Billed annually (${{ finalMonthlyRate * 12 }}/yr &bull; Save ${{ annualSavings }}/yr)\n                </div>\n              </div>\n\n              <Button class=\"w-full gap-2 shadow-xs\" size=\"lg\">\n                <span>Start 14-Day Free Evaluation</span>\n                <ArrowRight class=\"size-4\" />\n              </Button>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/pricing/PricingFeatureAddonBuilder.vue"
    },
    {
      "path": "packages/registry-vue/blocks/pricing/PricingFeatureTierSlider.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { ArrowRight, CheckCircle2, Sliders } 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 PricingFeatureTierSliderProps {\n  title?: string\n  description?: string\n  class?: string\n}\n\nconst props = withDefaults(defineProps<PricingFeatureTierSliderProps>(), {\n  title: 'Predictable usage pricing with dynamic linear scale.',\n  description:\n    'Slide to your estimated monthly active users or edge invocations to calculate your exact monthly investment.',\n})\n\n// Slider value from 0 to 100\nconst sliderIndex = ref(2)\nconst isAnnual = ref(true)\n\nconst TIERS = [\n  {\n    label: '10K MAU',\n    mauCount: '10,000',\n    basePriceMonthly: 19,\n    tierName: 'Starter Hobbyist',\n    features: [\n      '10,000 Monthly Users',\n      '2 Dedicated Edge Locations',\n      'Community Discord SLA',\n      'Standard 1-Day Log Retention',\n    ],\n  },\n  {\n    label: '50K MAU',\n    mauCount: '50,000',\n    basePriceMonthly: 49,\n    tierName: 'Pro Creator',\n    features: [\n      '50,000 Monthly Users',\n      '12 Global Anycast Edges',\n      'Next-Business-Day Support SLA',\n      '7-Day Immutable Log Retention',\n    ],\n  },\n  {\n    label: '250K MAU',\n    mauCount: '250,000',\n    basePriceMonthly: 149,\n    tierName: 'Growth Scale',\n    features: [\n      '250,000 Monthly Users',\n      'All 36 Global Edge Regions',\n      '4-Hour Priority Engineering SLA',\n      '30-Day SOC2 Audit Logs',\n    ],\n  },\n  {\n    label: '1M MAU',\n    mauCount: '1,000,000',\n    basePriceMonthly: 399,\n    tierName: 'Enterprise Core',\n    features: [\n      '1,000,000 Monthly Users',\n      'Dedicated VPC & Multi-Region Mesh',\n      '15-Minute Critical Incident SLA',\n      '365-Day Cold Storage Logs',\n    ],\n  },\n  {\n    label: '5M+ MAU',\n    mauCount: '5,000,000+',\n    basePriceMonthly: 899,\n    tierName: 'Hyperscale Cluster',\n    features: [\n      '5,000,000+ Monthly Users',\n      'Custom Bare-Metal Cloud Partitions',\n      'Dedicated Solutions Architect',\n      'Custom Security Review & BAA',\n    ],\n  },\n]\n\nconst currentTier = computed(() => TIERS[sliderIndex.value])\n\nconst effectivePrice = computed(() => {\n  const base = currentTier.value.basePriceMonthly\n  return isAnnual.value ? Math.round(base * 0.8) : base\n})\n\nconst annualSavings = computed(() => {\n  return (currentTier.value.basePriceMonthly - effectivePrice.value) * 12\n})\n</script>\n\n<template>\n  <section\n    data-slot=\"pricing-feature-tier-slider\"\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=\"#scale-pricing\"\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          <Sliders class=\"text-primary size-3.5\" />\n          <span>Continuous Scale Synthesizer</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\n        <!-- Cadence Switcher -->\n        <div class=\"flex items-center justify-center gap-3 pt-2\">\n          <span\n            :class=\"cn('text-xs font-medium', !isAnnual ? 'text-foreground font-semibold' : 'text-muted-foreground')\"\n          >\n            Monthly\n          </span>\n          <button\n            type=\"button\"\n            :class=\"\n              cn(\n                'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out',\n                isAnnual ? 'bg-primary' : 'bg-muted',\n              )\n            \"\n            @click=\"isAnnual = !isAnnual\"\n          >\n            <span\n              :class=\"\n                cn(\n                  'bg-background pointer-events-none inline-block size-5 transform rounded-full shadow-lg ring-0 transition duration-200 ease-in-out',\n                  isAnnual ? 'translate-x-5' : 'translate-x-0',\n                )\n              \"\n            />\n          </button>\n          <span\n            :class=\"\n              cn(\n                'flex items-center gap-1.5 text-xs font-medium',\n                isAnnual ? 'text-foreground font-semibold' : 'text-muted-foreground',\n              )\n            \"\n          >\n            <span>Annual Billing</span>\n            <Badge variant=\"outline\" class=\"border-success/30 bg-success/10 text-success text-xs\"> Save 20% </Badge>\n          </span>\n        </div>\n      </div>\n\n      <!-- Pricing Slider Main Card -->\n      <div class=\"mx-auto mt-12 max-w-4xl\">\n        <Card class=\"border-border bg-card overflow-hidden shadow-sm\">\n          <CardContent class=\"space-y-8 p-8\">\n            <!-- Scale Indicator Bar -->\n            <div class=\"border-border flex flex-wrap items-center justify-between gap-4 border-b pb-6\">\n              <div class=\"space-y-1\">\n                <span class=\"text-muted-foreground text-xs font-bold tracking-wider uppercase\"\n                  >Calculated Tier Plan</span\n                >\n                <h3 class=\"text-foreground text-2xl font-bold\">{{ currentTier.tierName }}</h3>\n                <div class=\"text-muted-foreground text-xs\">\n                  Engineered for {{ currentTier.mauCount }} active user sessions\n                </div>\n              </div>\n\n              <!-- Price Box -->\n              <div class=\"text-right\">\n                <div class=\"flex items-baseline justify-end gap-1\">\n                  <span class=\"text-foreground font-mono text-4xl font-bold\">${{ effectivePrice }}</span>\n                  <span class=\"text-muted-foreground font-mono text-xs\">/ month</span>\n                </div>\n                <div v-if=\"isAnnual\" class=\"text-success font-mono text-xs font-medium\">\n                  Save ${{ annualSavings }}/yr on annual\n                </div>\n              </div>\n            </div>\n\n            <!-- Interactive Stepped Range Slider -->\n            <div class=\"space-y-3\">\n              <div class=\"text-foreground flex items-center justify-between text-xs font-bold\">\n                <span>Monthly Traffic Volume</span>\n                <span class=\"text-primary font-mono font-bold\">{{ currentTier.mauCount }} Users</span>\n              </div>\n\n              <input\n                v-model.number=\"sliderIndex\"\n                type=\"range\"\n                min=\"0\"\n                max=\"4\"\n                step=\"1\"\n                class=\"accent-primary h-2 w-full cursor-pointer\"\n              />\n\n              <!-- Slider Step Labels -->\n              <div class=\"text-muted-foreground flex justify-between font-mono text-xs\">\n                <span\n                  v-for=\"(t, idx) in TIERS\"\n                  :key=\"idx\"\n                  :class=\"\n                    cn(\n                      'hover:text-foreground cursor-pointer transition-colors',\n                      sliderIndex === idx ? 'text-primary font-bold' : '',\n                    )\n                  \"\n                  @click=\"sliderIndex = idx\"\n                >\n                  {{ t.label }}\n                </span>\n              </div>\n            </div>\n\n            <!-- Features Checklist Grid for Current Tier -->\n            <div class=\"border-border space-y-3 border-t pt-4\">\n              <span class=\"text-muted-foreground text-xs font-bold tracking-wider uppercase\"\n                >Guaranteed Tier Deliverables</span\n              >\n              <div class=\"grid grid-cols-1 gap-2.5 sm:grid-cols-2\">\n                <div\n                  v-for=\"(feat, fIdx) in currentTier.features\"\n                  :key=\"fIdx\"\n                  class=\"text-foreground flex items-center gap-2 text-xs\"\n                >\n                  <CheckCircle2 class=\"text-success size-4 shrink-0\" />\n                  <span>{{ feat }}</span>\n                </div>\n              </div>\n            </div>\n\n            <!-- Action Button -->\n            <div class=\"pt-2\">\n              <Button size=\"lg\" class=\"w-full gap-2 shadow-xs\">\n                <span>Deploy with {{ currentTier.tierName }}</span>\n                <ArrowRight class=\"size-4\" />\n              </Button>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/pricing/PricingFeatureTierSlider.vue"
    },
    {
      "path": "packages/registry-vue/blocks/pricing/PricingMatrixGrouped.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Check, ChevronDown, Minus } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableRow } from '@/components/ui/table'\n\nconst plans = ['Team', 'Business', 'Enterprise']\n\nconst groups = [\n  {\n    id: 'modelling',\n    label: 'Modelling',\n    summary: 'Definitions, versioning, and review',\n    rows: [\n      { feature: 'Certified definitions', values: ['50', '500', 'Unlimited'] },\n      { feature: 'Version history', values: ['30 days', 'Unlimited', 'Unlimited'] },\n      { feature: 'Required review', values: [false, true, true] },\n      { feature: 'Period locking', values: [false, true, true] },\n    ],\n  },\n  {\n    id: 'access',\n    label: 'Access & identity',\n    summary: 'Who sees which rows',\n    rows: [\n      { feature: 'SSO (SAML)', values: [true, true, true] },\n      { feature: 'SCIM provisioning', values: [false, true, true] },\n      { feature: 'Row-level scope', values: [false, true, true] },\n      { feature: 'Customer-managed keys', values: [false, false, true] },\n    ],\n  },\n  {\n    id: 'ops',\n    label: 'Operations',\n    summary: 'Cost, alerting, and support',\n    rows: [\n      { feature: 'Query budgets', values: [false, true, true] },\n      { feature: 'Drift alerting', values: [false, true, true] },\n      { feature: 'Audit log export', values: [false, '90 days', 'Unlimited'] },\n      { feature: 'Named support engineer', values: [false, false, true] },\n    ],\n  },\n]\n\n// Opens on the first group only: a fully expanded matrix is the thing readers\n// bounce off, and every group is one click from open.\nconst open = ref<string[]>([groups[0].id])\n\nfunction toggle(id: string) {\n  open.value = open.value.includes(id) ? open.value.filter((entry) => entry !== id) : [...open.value, id]\n}\n</script>\n\n<template>\n  <section data-slot=\"pricing-matrix-grouped\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-4xl px-6 py-20 lg:py-28\">\n      <Badge variant=\"secondary\">Compare plans</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Grouped, so it stays readable</h2>\n\n      <Card class=\"mt-8\">\n        <CardContent class=\"p-0\">\n          <div\n            class=\"text-muted-foreground grid grid-cols-[1fr_repeat(3,5rem)] gap-2 px-4 py-3 text-xs font-medium sm:grid-cols-[1fr_repeat(3,7rem)]\"\n          >\n            <span>Capability</span>\n            <span v-for=\"plan in plans\" :key=\"plan\" class=\"text-center\">{{ plan }}</span>\n          </div>\n          <Separator />\n\n          <div v-for=\"group in groups\" :key=\"group.id\">\n            <button\n              type=\"button\"\n              class=\"hover:bg-muted focus-visible:ring-ring flex w-full items-center gap-3 px-4 py-3 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n              :aria-expanded=\"open.includes(group.id)\"\n              :aria-controls=\"`group-${group.id}`\"\n              @click=\"toggle(group.id)\"\n            >\n              <ChevronDown\n                class=\"text-muted-foreground size-4 shrink-0 transition-transform\"\n                :class=\"open.includes(group.id) ? '' : '-rotate-90'\"\n                aria-hidden=\"true\"\n              />\n              <span class=\"min-w-0\">\n                <span class=\"block text-sm font-medium\">{{ group.label }}</span>\n                <span class=\"text-muted-foreground block text-xs\">{{ group.summary }}</span>\n              </span>\n              <span class=\"text-muted-foreground ml-auto shrink-0 font-mono text-xs\">{{ group.rows.length }}</span>\n            </button>\n\n            <div v-show=\"open.includes(group.id)\" :id=\"`group-${group.id}`\">\n              <Table>\n                <TableBody>\n                  <TableRow v-for=\"row in group.rows\" :key=\"row.feature\">\n                    <TableCell class=\"pl-11 text-sm\">{{ row.feature }}</TableCell>\n                    <TableCell v-for=\"(value, index) in row.values\" :key=\"index\" class=\"w-20 text-center sm:w-28\">\n                      <template v-if=\"value === true\">\n                        <Check class=\"text-success mx-auto size-4\" aria-hidden=\"true\" />\n                        <span class=\"sr-only\">Included</span>\n                      </template>\n                      <template v-else-if=\"value === false\">\n                        <Minus class=\"text-muted-foreground/50 mx-auto size-4\" aria-hidden=\"true\" />\n                        <span class=\"sr-only\">Not included</span>\n                      </template>\n                      <span v-else class=\"font-mono text-xs\">{{ value }}</span>\n                    </TableCell>\n                  </TableRow>\n                </TableBody>\n              </Table>\n            </div>\n            <Separator />\n          </div>\n        </CardContent>\n      </Card>\n\n      <Button class=\"mt-6\">Start on Business</Button>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/pricing/PricingMatrixGrouped.vue"
    },
    {
      "path": "packages/registry-vue/blocks/pricing/PricingMatrixPlanCards.vue",
      "content": "<script setup lang=\"ts\">\nimport { Check, Minus } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\n\n// One capability list, three plans referencing it by index — a capability can\n// never appear on one card and silently vanish from another.\nconst capabilities = [\n  'Certified metric definitions',\n  'Connected warehouses',\n  'Query budget per team',\n  'Row-level access control',\n  'SCIM provisioning',\n  'Audit log export',\n  'Embedded dashboards',\n  'Data residency choice',\n  'Customer-managed keys',\n  'Named support engineer',\n]\n\nconst plans = [\n  { name: 'Team', price: '$0', cadence: 'while in beta', included: [0, 1], note: 'For one team proving it out.' },\n  {\n    name: 'Business',\n    price: '$1,400',\n    cadence: 'per month',\n    included: [0, 1, 2, 3, 4, 5, 6],\n    note: 'For finance and analytics running together.',\n    featured: true,\n  },\n  {\n    name: 'Enterprise',\n    price: 'Custom',\n    cadence: 'annual',\n    included: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n    note: 'For regulated estates and multi-region.',\n  },\n]\n</script>\n\n<template>\n  <section data-slot=\"pricing-matrix-plan-cards\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">Plans</Badge>\n        <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">What each plan actually includes</h2>\n        <p class=\"text-muted-foreground mt-3 text-lg\">\n          The same list on every card, with what is missing shown rather than omitted.\n        </p>\n      </div>\n\n      <div class=\"mt-10 grid gap-4 lg:grid-cols-3\">\n        <Card v-for=\"plan in plans\" :key=\"plan.name\" :class=\"plan.featured ? 'border-primary' : ''\">\n          <CardContent class=\"flex h-full flex-col p-6\">\n            <div class=\"flex items-center justify-between gap-3\">\n              <p class=\"text-sm font-semibold\">{{ plan.name }}</p>\n              <Badge v-if=\"plan.featured\" variant=\"secondary\">Most chosen</Badge>\n            </div>\n\n            <p class=\"font-display mt-4 text-3xl font-bold tracking-tight\">{{ plan.price }}</p>\n            <p class=\"text-muted-foreground mt-1 text-xs\">{{ plan.cadence }}</p>\n            <p class=\"text-muted-foreground mt-3 text-sm leading-relaxed\">{{ plan.note }}</p>\n\n            <Separator class=\"my-5\" />\n\n            <ul class=\"space-y-2.5\">\n              <li\n                v-for=\"(capability, index) in capabilities\"\n                :key=\"capability\"\n                class=\"flex items-start gap-2.5 text-sm\"\n                :class=\"plan.included.includes(index) ? '' : 'text-muted-foreground/60'\"\n              >\n                <Check\n                  v-if=\"plan.included.includes(index)\"\n                  class=\"text-success mt-0.5 size-4 shrink-0\"\n                  aria-hidden=\"true\"\n                />\n                <Minus v-else class=\"text-muted-foreground/40 mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                <span>{{ capability }}</span>\n              </li>\n            </ul>\n\n            <Button :variant=\"plan.featured ? 'default' : 'outline'\" class=\"mt-auto pt-0 [&]:mt-8\">\n              {{ plan.name === 'Enterprise' ? 'Talk to us' : `Start on ${plan.name}` }}\n            </Button>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/pricing/PricingMatrixPlanCards.vue"
    },
    {
      "path": "packages/registry-vue/blocks/pricing/PricingMatrixStickyHeader.vue",
      "content": "<script setup lang=\"ts\">\nimport { Check, Minus } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nconst plans = ['Team', 'Business', 'Enterprise']\n\n// Cells are true / false / a string, so a plan can state a limit rather than\n// only claiming a feature exists.\nconst rows = [\n  { feature: 'Certified metric definitions', values: ['50', '500', 'Unlimited'] },\n  { feature: 'Connected warehouses', values: ['1', '3', 'Unlimited'] },\n  { feature: 'Query budget per team', values: [false, true, true] },\n  { feature: 'Row-level access control', values: [false, true, true] },\n  { feature: 'SCIM provisioning', values: [false, true, true] },\n  { feature: 'Audit log export', values: [false, '90 days', 'Unlimited'] },\n  { feature: 'Period locking', values: [false, true, true] },\n  { feature: 'Embedded dashboards', values: [false, true, true] },\n  { feature: 'Data residency choice', values: [false, false, true] },\n  { feature: 'Customer-managed keys', values: [false, false, true] },\n  { feature: 'Private link', values: [false, false, true] },\n  { feature: 'Named support engineer', values: [false, false, true] },\n]\n</script>\n\n<template>\n  <section data-slot=\"pricing-matrix-sticky-header\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-4xl px-6 py-20 lg:py-28\">\n      <Badge variant=\"secondary\">Compare plans</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Every line, no asterisks</h2>\n      <p class=\"text-muted-foreground mt-3 text-lg\">\n        Limits differ between plans. Where a plan caps something, the cap is written in the cell.\n      </p>\n\n      <Card class=\"mt-8\">\n        <CardContent class=\"p-0\">\n          <!-- The header pins with CSS alone. Thirty rows down, a checkmark is\n               still attributable to a column without scrolling back up. -->\n          <div class=\"max-h-[28rem] overflow-auto\">\n            <Table>\n              <TableHeader class=\"bg-card sticky top-0 z-10\">\n                <TableRow>\n                  <TableHead class=\"bg-card\">Capability</TableHead>\n                  <TableHead v-for=\"plan in plans\" :key=\"plan\" class=\"bg-card text-center\">{{ plan }}</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                <TableRow v-for=\"row in rows\" :key=\"row.feature\">\n                  <TableCell class=\"font-medium\">{{ row.feature }}</TableCell>\n                  <TableCell v-for=\"(value, index) in row.values\" :key=\"index\" class=\"text-center\">\n                    <template v-if=\"value === true\">\n                      <Check class=\"text-success mx-auto size-4\" aria-hidden=\"true\" />\n                      <span class=\"sr-only\">Included</span>\n                    </template>\n                    <template v-else-if=\"value === false\">\n                      <Minus class=\"text-muted-foreground/50 mx-auto size-4\" aria-hidden=\"true\" />\n                      <span class=\"sr-only\">Not included</span>\n                    </template>\n                    <span v-else class=\"font-mono text-xs\">{{ value }}</span>\n                  </TableCell>\n                </TableRow>\n              </TableBody>\n            </Table>\n          </div>\n        </CardContent>\n      </Card>\n\n      <div class=\"mt-6 flex flex-wrap gap-3\">\n        <Button>Start on Team</Button>\n        <Button variant=\"outline\">Talk about Enterprise</Button>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/pricing/PricingMatrixStickyHeader.vue"
    },
    {
      "path": "packages/registry-vue/blocks/pricing/PricingSinglePlan.vue",
      "content": "<script setup lang=\"ts\">\nimport { ArrowRight, Check, X } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\n\nconst included = [\n  'Unlimited certified metric definitions',\n  'Unlimited viewers and editors',\n  'Row-level access from your identity provider',\n  'Query budgets enforced per team',\n  'Audit log export, 7-year retention',\n  'SOC 2 report under NDA',\n]\n\n// Naming exclusions is what makes a single plan credible. A list of only\n// inclusions invites the reader to assume the gap is hidden somewhere.\nconst excluded = [\n  'On-premise deployment behind your firewall',\n  'Custom SLAs below 99.9%',\n  'Professional services beyond the five-week rollout',\n]\n</script>\n\n<template>\n  <section data-slot=\"pricing-single-plan\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-3xl px-6 py-20 lg:py-28\">\n      <div class=\"text-center\">\n        <Badge variant=\"secondary\">Pricing</Badge>\n        <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">One plan, one number</h2>\n        <p class=\"text-muted-foreground mt-3 text-lg\">\n          No seat maths and no feature gates. The only thing that scales is query volume.\n        </p>\n      </div>\n\n      <Card class=\"mt-10\">\n        <CardContent class=\"p-8\">\n          <div class=\"flex flex-wrap items-baseline gap-3\">\n            <span class=\"font-display text-4xl font-bold tracking-tight\">£1,400</span>\n            <span class=\"text-muted-foreground\">per month, billed annually</span>\n          </div>\n          <p class=\"text-muted-foreground mt-2 text-sm\">\n            Includes 2 million queries a month. Beyond that it is £0.0004 per query, capped by your own budgets.\n          </p>\n\n          <Button size=\"lg\" class=\"mt-6 w-full sm:w-auto\">\n            Start the 30-day trial\n            <ArrowRight class=\"ml-2 size-4\" aria-hidden=\"true\" />\n          </Button>\n\n          <Separator class=\"my-8\" />\n\n          <p class=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">Included</p>\n          <ul class=\"mt-3 grid gap-2.5 sm:grid-cols-2\">\n            <li v-for=\"item in included\" :key=\"item\" class=\"flex items-start gap-2.5 text-sm\">\n              <Check class=\"text-success mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n              <span>{{ item }}</span>\n            </li>\n          </ul>\n\n          <Separator class=\"my-6\" />\n\n          <p class=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">Not included</p>\n          <ul class=\"mt-3 space-y-2.5\">\n            <li v-for=\"item in excluded\" :key=\"item\" class=\"flex items-start gap-2.5 text-sm\">\n              <X class=\"text-muted-foreground/50 mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n              <span class=\"text-muted-foreground\">{{ item }}</span>\n            </li>\n          </ul>\n\n          <Separator class=\"my-6\" />\n\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            Past roughly 20 million queries a month, or if any of the exclusions above are hard requirements, a\n            conversation will get you a better answer than this page can.\n          </p>\n          <Button variant=\"outline\" class=\"mt-4\">Talk to us instead</Button>\n        </CardContent>\n      </Card>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/pricing/PricingSinglePlan.vue"
    },
    {
      "path": "packages/registry-vue/blocks/pricing/PricingTierComparisonMatrix.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { ArrowRight, Check, Minus, ShieldCheck } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\n\ntype BillingCycle = 'monthly' | 'annual'\n\nconst billing = ref<BillingCycle>('annual')\n\ninterface Plan {\n  id: string\n  name: string\n  description: string\n  monthlyPrice: number\n  annualPrice: number\n  highlight: boolean\n  badge?: string\n  ctaText: string\n  ctaVariant: 'default' | 'outline' | 'secondary'\n}\n\nconst plans: Plan[] = [\n  {\n    id: 'community',\n    name: 'Community OSS',\n    description: 'For indie hackers and developers building open source products.',\n    monthlyPrice: 0,\n    annualPrice: 0,\n    highlight: false,\n    ctaText: 'Start Building Free',\n    ctaVariant: 'outline',\n  },\n  {\n    id: 'pro',\n    name: 'Pro Team',\n    description: 'For growing startup engineering teams that require high velocity.',\n    monthlyPrice: 29,\n    annualPrice: 24,\n    highlight: true,\n    badge: 'Most Popular',\n    ctaText: 'Claim Pro License',\n    ctaVariant: 'default',\n  },\n  {\n    id: 'enterprise',\n    name: 'Enterprise Scale',\n    description: 'Dedicated registry syncing, SSO, SOC2 compliance audits, and SLA.',\n    monthlyPrice: 119,\n    annualPrice: 99,\n    highlight: false,\n    ctaText: 'Talk to Sales',\n    ctaVariant: 'outline',\n  },\n]\n\ninterface FeatureComparisonRow {\n  category: string\n  features: {\n    name: string\n    tooltip: string\n    community: boolean | string\n    pro: boolean | string\n    enterprise: boolean | string\n  }[]\n}\n\nconst comparisonData: FeatureComparisonRow[] = [\n  {\n    category: 'Registry & Core Primitives',\n    features: [\n      {\n        name: 'Full AST Component Source Access',\n        tooltip: 'Raw SFC and TSX source files copied directly into your repository.',\n        community: true,\n        pro: true,\n        enterprise: true,\n      },\n      {\n        name: 'Dual-Framework Parity (Vue + React)',\n        tooltip: 'Identical DOM semantics and CVA tokens across both ecosystems.',\n        community: true,\n        pro: true,\n        enterprise: true,\n      },\n      {\n        name: 'Curated Marketing & SaaS Blocks',\n        tooltip: 'Access to 450+ production-grade unbundled layout blocks.',\n        community: '100+ Blocks',\n        pro: 'All 450+ Blocks',\n        enterprise: 'All Blocks + Custom',\n      },\n      {\n        name: 'Tailwind CSS v4 OKLCH Token System',\n        tooltip: 'Hardware-calibrated color spaces and spring curves.',\n        community: true,\n        pro: true,\n        enterprise: true,\n      },\n    ],\n  },\n  {\n    category: 'Enterprise & Security Compliance',\n    features: [\n      {\n        name: 'Private Registry Mirroring',\n        tooltip: 'Host your organization’s customized internal registry behind a firewall.',\n        community: false,\n        pro: '1 Private Repo',\n        enterprise: 'Unlimited Private Hubs',\n      },\n      {\n        name: 'SOC2 & ISO 27001 Audit Packs',\n        tooltip: 'Pre-certified security documentation and architecture proofs.',\n        community: false,\n        pro: false,\n        enterprise: true,\n      },\n      {\n        name: 'Guaranteed 99.99% Registry CDN SLA',\n        tooltip: 'Global multi-region edge distribution uptime guarantee.',\n        community: false,\n        pro: '99.9% SLA',\n        enterprise: '99.99% High Availability',\n      },\n      {\n        name: 'Dedicated Design Engineering Support',\n        tooltip: 'Direct Slack / Discord channel with core design system maintainers.',\n        community: false,\n        pro: 'Priority Email',\n        enterprise: 'Dedicated Slack Channel',\n      },\n    ],\n  },\n]\n</script>\n\n<template>\n  <section\n    data-slot=\"pricing-tier-comparison-matrix\"\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-7xl space-y-16\">\n      <!-- 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          <ShieldCheck class=\"text-primary size-3.5\" />\n          Predictable Pricing\n        </Badge>\n        <h2 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n          Zero seat taxes. Own your source code forever.\n        </h2>\n        <p class=\"text-muted-foreground text-base\">\n          Choose the tier that fits your engineering team's delivery scale and compliance needs.\n        </p>\n\n        <!-- Billing Toggle -->\n        <div class=\"flex items-center justify-center gap-3 pt-4\">\n          <span\n            class=\"font-mono text-xs\"\n            :class=\"billing === 'monthly' ? 'text-foreground font-bold' : 'text-muted-foreground'\"\n          >\n            Monthly\n          </span>\n          <div class=\"border-border bg-card relative flex items-center rounded-full border p-1\">\n            <button\n              type=\"button\"\n              class=\"relative z-10 rounded-full px-3 py-1 font-mono text-xs transition-colors\"\n              :class=\"\n                billing === 'monthly'\n                  ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n                  : 'text-muted-foreground'\n              \"\n              @click=\"billing = 'monthly'\"\n            >\n              Monthly\n            </button>\n            <button\n              type=\"button\"\n              class=\"relative z-10 flex items-center gap-1.5 rounded-full px-3 py-1 font-mono text-xs transition-colors\"\n              :class=\"\n                billing === 'annual'\n                  ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n                  : 'text-muted-foreground'\n              \"\n              @click=\"billing = 'annual'\"\n            >\n              <span>Annual</span>\n              <span class=\"bg-success rounded-full px-1.5 py-0.5 text-xs font-bold text-white\">Save 20%</span>\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <!-- Pricing Plan Cards Grid (3 Columns) -->\n      <div class=\"grid grid-cols-1 items-stretch gap-6 md:grid-cols-3\">\n        <Card\n          v-for=\"plan in plans\"\n          :key=\"plan.id\"\n          class=\"border-border bg-card relative flex flex-col justify-between space-y-6 rounded-2xl p-6 text-left shadow-xl transition-colors sm:p-8\"\n          :class=\"\n            plan.highlight\n              ? 'border-primary/80 ring-primary/20 scale-[1.02] shadow-sm ring-2'\n              : 'hover:border-border/80'\n          \"\n        >\n          <!-- Top Badge -->\n          <div v-if=\"plan.badge\" class=\"absolute -top-3 left-1/2 -translate-x-1/2\">\n            <Badge class=\"px-3 py-0.5 font-mono text-xs tracking-wider uppercase shadow-md\">\n              {{ plan.badge }}\n            </Badge>\n          </div>\n\n          <div class=\"space-y-4\">\n            <div>\n              <h3 class=\"text-foreground font-mono text-xl font-bold\">{{ plan.name }}</h3>\n              <p class=\"text-muted-foreground mt-1 min-h-[36px] text-xs\">{{ plan.description }}</p>\n            </div>\n\n            <!-- Price display -->\n            <div class=\"flex items-baseline gap-1.5 font-mono\">\n              <span class=\"text-foreground text-4xl font-bold\">\n                ${{ billing === 'annual' ? plan.annualPrice : plan.monthlyPrice }}\n              </span>\n              <span class=\"text-muted-foreground text-xs\">/ month</span>\n            </div>\n            <p class=\"text-muted-foreground font-mono text-xs\">\n              {{\n                billing === 'annual' && plan.annualPrice > 0\n                  ? 'Billed annually ($' + plan.annualPrice * 12 + '/yr)'\n                  : 'Billed monthly'\n              }}\n            </p>\n          </div>\n\n          <Button :variant=\"plan.ctaVariant\" class=\"h-10 w-full gap-1.5 font-mono text-xs shadow-xs\">\n            <span>{{ plan.ctaText }}</span>\n            <ArrowRight class=\"size-3.5\" />\n          </Button>\n        </Card>\n      </div>\n\n      <!-- Deep Feature Comparison Matrix Table -->\n      <div class=\"space-y-6\">\n        <div class=\"text-center\">\n          <h3 class=\"text-foreground font-mono text-xl font-bold\">Detailed Feature Comparison</h3>\n          <p class=\"text-muted-foreground mt-1 text-xs\">Full granular matrix of capabilities and entitlements.</p>\n        </div>\n\n        <Card class=\"border-border bg-card overflow-hidden rounded-2xl text-left shadow-sm\">\n          <div class=\"overflow-x-auto\">\n            <table class=\"w-full border-collapse text-left text-xs\">\n              <thead>\n                <tr class=\"border-border bg-muted/40 text-muted-foreground border-b font-mono\">\n                  <th class=\"w-1/2 p-4 font-semibold\">Capability</th>\n                  <th class=\"p-4 text-center font-semibold\">Community</th>\n                  <th class=\"text-primary p-4 text-center font-bold font-semibold\">Pro Team</th>\n                  <th class=\"p-4 text-center font-semibold\">Enterprise</th>\n                </tr>\n              </thead>\n              <tbody>\n                <template v-for=\"(section, sIdx) in comparisonData\" :key=\"sIdx\">\n                  <tr class=\"bg-muted/20 border-border/80 border-b\">\n                    <td\n                      colspan=\"4\"\n                      class=\"text-muted-foreground p-3 px-4 font-mono text-xs font-bold tracking-wider uppercase\"\n                    >\n                      {{ section.category }}\n                    </td>\n                  </tr>\n                  <tr\n                    v-for=\"(row, rIdx) in section.features\"\n                    :key=\"rIdx\"\n                    class=\"border-border/60 hover:bg-muted/10 border-b transition-colors\"\n                  >\n                    <td class=\"p-4\">\n                      <div class=\"text-foreground font-medium\">{{ row.name }}</div>\n                      <div class=\"text-muted-foreground mt-0.5 text-xs\">{{ row.tooltip }}</div>\n                    </td>\n                    <td class=\"p-4 text-center font-mono\">\n                      <template v-if=\"typeof row.community === 'boolean'\">\n                        <Check v-if=\"row.community\" class=\"text-success mx-auto size-4\" />\n                        <Minus v-else class=\"text-muted-foreground/40 mx-auto size-4\" />\n                      </template>\n                      <span v-else class=\"text-muted-foreground\">{{ row.community }}</span>\n                    </td>\n                    <td class=\"p-4 text-center font-mono font-semibold\">\n                      <template v-if=\"typeof row.pro === 'boolean'\">\n                        <Check v-if=\"row.pro\" class=\"text-success mx-auto size-4\" />\n                        <Minus v-else class=\"text-muted-foreground/40 mx-auto size-4\" />\n                      </template>\n                      <span v-else class=\"text-primary\">{{ row.pro }}</span>\n                    </td>\n                    <td class=\"p-4 text-center font-mono\">\n                      <template v-if=\"typeof row.enterprise === 'boolean'\">\n                        <Check v-if=\"row.enterprise\" class=\"text-success mx-auto size-4\" />\n                        <Minus v-else class=\"text-muted-foreground/40 mx-auto size-4\" />\n                      </template>\n                      <span v-else class=\"text-foreground font-semibold\">{{ row.enterprise }}</span>\n                    </td>\n                  </tr>\n                </template>\n              </tbody>\n            </table>\n          </div>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/pricing/PricingTierComparisonMatrix.vue"
    },
    {
      "path": "packages/registry-vue/blocks/pricing/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/pricing/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",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/slider.json",
    "https://uipkge.dev/r/vue/switch.json",
    "https://uipkge.dev/r/vue/table.json",
    "https://uipkge.dev/r/vue/toggle-group.json"
  ],
  "description": "Pricing collection with eleven interchangeable variants: seat matrix, interactive calculator, enterprise SLA card, feature add-on builder, feature tier slider, grouped matrix, per-plan cards, sticky-header matrix, single plan, tier comparison matrix, and usage calculator slider.",
  "categories": [
    "pricing",
    "marketing",
    "billing"
  ]
}