{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "customer-metrics-band",
  "title": "Customer Metrics Band",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/customer-metrics-band/customer-metrics-band.component.ts",
      "content": "// Customer velocity and ROI telemetry band with cohort segmentation (Enterprise vs\n// High-Growth), 4 verified KPI metric tiles, and a deep-dive impact inspector.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport { Gauge, LucideAngularModule } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiCardComponent } from '@/ui/card/card.component'\n\nexport type CustomerCohort = 'all' | 'enterprise' | 'startups'\n\nexport interface MetricStat {\n  id: string\n  label: string\n  value: string\n  baseline: string\n  change: string\n  isPositive: boolean\n  description: string\n  details: {\n    before: string\n    after: string\n    impact: string\n  }\n}\n\nconst metricsByCohort: Record<CustomerCohort, MetricStat[]> = {\n  all: [\n    {\n      id: 'velocity',\n      label: 'Time to First Production Release',\n      value: '4.2x',\n      baseline: 'Reduced from 14 weeks to 18 days',\n      change: '+320% Faster',\n      isPositive: true,\n      description: 'Engineering squads ship complete vertical workflows without custom CSS boilerplate.',\n      details: { before: '98 Days average', after: '18 Days average', impact: '80 days saved per major launch' },\n    },\n    {\n      id: 'vitals',\n      label: 'Core Web Vitals Pass Rate',\n      value: '99.4%',\n      baseline: 'Tested across 10M+ mobile pageviews',\n      change: '+28.4% vs monolithic',\n      isPositive: true,\n      description: 'OKLCH zero-runtime styling ensures sub-50ms INP and pristine Lighthouse 100 scores.',\n      details: { before: '71.0% Pass Rate', after: '99.4% Pass Rate', impact: 'Zero layout shift (CLS 0.00)' },\n    },\n    {\n      id: 'maintenance',\n      label: 'Design System Maintenance Cost',\n      value: '-74%',\n      baseline: 'Engineering hours spent upgrading packages',\n      change: '-74% Reduction',\n      isPositive: true,\n      description: 'Direct code ownership eliminates breaking semver dependency conflicts permanently.',\n      details: { before: '24 hrs / developer / mo', after: '6.2 hrs / developer / mo', impact: '17.8 hrs reclaimed' },\n    },\n    {\n      id: 'cloud_savings',\n      label: 'Average Annual Compute & Bandwidth Saved',\n      value: '$184k',\n      baseline: 'Calculated across high-traffic SaaS suites',\n      change: 'Zero AST bloat',\n      isPositive: true,\n      description: 'Zero unused component CSS in bundle output lowers edge bandwidth distribution costs.',\n      details: { before: '640 kB vendor chunks', after: '38 kB tree-shaken chunks', impact: '94% payload reduction' },\n    },\n  ],\n  enterprise: [\n    {\n      id: 'velocity',\n      label: 'Time to First Production Release',\n      value: '5.8x',\n      baseline: 'Enterprise multi-app design alignment',\n      change: '+480% Faster',\n      isPositive: true,\n      description: 'Standardized AST across 20+ squads without package coordination overhead.',\n      details: { before: '180 Days average', after: '31 Days average', impact: '149 days saved per project' },\n    },\n    {\n      id: 'vitals',\n      label: 'Core Web Vitals Pass Rate',\n      value: '99.8%',\n      baseline: 'Internal enterprise portals & dashboards',\n      change: '+34.2% uplift',\n      isPositive: true,\n      description: 'Strict keyboard ergonomics and WCAG AA accessibility out of the box.',\n      details: { before: '65.6% Pass Rate', after: '99.8% Pass Rate', impact: '100% compliance audit pass' },\n    },\n    {\n      id: 'maintenance',\n      label: 'Design System Maintenance Cost',\n      value: '-82%',\n      baseline: 'Eliminated dedicated registry sync team',\n      change: '-82% Saved',\n      isPositive: true,\n      description: 'Engineers customize source code in their own repo without waiting on upstream merges.',\n      details: {\n        before: '3 FTEs maintenance',\n        after: '0.5 FTE maintenance',\n        impact: '2.5 FTEs reallocated to product',\n      },\n    },\n    {\n      id: 'cloud_savings',\n      label: 'Average Annual Compute & Bandwidth Saved',\n      value: '$420k',\n      baseline: 'Tier-1 enterprise infrastructure',\n      change: 'Zero CVE risk',\n      isPositive: true,\n      description: 'No third-party runtime dependencies eliminates transitive package auditing costs.',\n      details: { before: '$650k vendor licensing', after: '$230k infrastructure', impact: '$420k saved annually' },\n    },\n  ],\n  startups: [\n    {\n      id: 'velocity',\n      label: 'Time to First Production Release',\n      value: '6.4x',\n      baseline: 'From idea to paying users in days',\n      change: '+540% Faster',\n      isPositive: true,\n      description: 'Plug-and-play workbenches and CRM blocks ready for Stripe integration on day 1.',\n      details: { before: '45 Days to MVP', after: '7 Days to MVP', impact: '38 days faster to revenue' },\n    },\n    {\n      id: 'vitals',\n      label: 'Core Web Vitals Pass Rate',\n      value: '99.1%',\n      baseline: 'Landing pages and conversion flows',\n      change: '+22.0% uplift',\n      isPositive: true,\n      description: 'Blazing fast mobile experiences drive higher conversion rates for early users.',\n      details: { before: '77.1% Pass Rate', after: '99.1% Pass Rate', impact: '+14% checkout conversion' },\n    },\n    {\n      id: 'maintenance',\n      label: 'Design System Maintenance Cost',\n      value: '-90%',\n      baseline: 'Zero full-time design engineers needed',\n      change: '-90% Overhead',\n      isPositive: true,\n      description: 'Founders and full-stack devs build world-class Linear-grade interfaces independently.',\n      details: {\n        before: 'Hiring UI designer ($140k)',\n        after: 'Self-serve registry ($0)',\n        impact: '$140k runway preserved',\n      },\n    },\n    {\n      id: 'cloud_savings',\n      label: 'Average Annual Compute & Bandwidth Saved',\n      value: '$48k',\n      baseline: 'Vercel / Cloudflare edge usage tier',\n      change: 'Sub-millisecond cold start',\n      isPositive: true,\n      description: 'Compact bundle sizes prevent edge function invocation timeouts and memory spikes.',\n      details: { before: '350ms cold starts', after: '42ms cold starts', impact: '88% compute reduction' },\n    },\n  ],\n}\n\nconst cohortOptions: { id: CustomerCohort; label: string }[] = [\n  { id: 'all', label: 'All Teams' },\n  { id: 'enterprise', label: 'Enterprise 500' },\n  { id: 'startups', label: 'High-Growth' },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-customer-metrics-band, [ui-customer-metrics-band]',\n  standalone: true,\n  // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [LucideAngularModule, UiBadgeComponent, UiCardComponent],\n  template: `\n    <section data-slot=\"customer-metrics-band\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-6xl space-y-12\">\n        <!-- Section Header with Cohort Switcher -->\n        <div\n          class=\"border-border/60 flex flex-col items-center justify-between gap-6 border-b pb-8 text-center md:flex-row md:text-left\"\n        >\n          <div class=\"space-y-2\">\n            <span ui-badge variant=\"secondary\" class=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n              <lucide-icon [img]=\"Gauge\" class=\"text-primary size-3.5\" />\n              Verified Customer Impact Benchmark\n            </span>\n            <h2 class=\"text-foreground text-3xl font-bold tracking-tight\">\n              Proven engineering velocity at global scale.\n            </h2>\n            <p class=\"text-muted-foreground text-xs sm:text-sm\">\n              Aggregated telemetry from over 1,400+ production applications built with UIPKGE.\n            </p>\n          </div>\n\n          <!-- Cohort Switcher Tabs -->\n          <div class=\"bg-background border-border flex shrink-0 items-center gap-1 rounded-xl border p-1\">\n            @for (c of cohortOptions; track c.id) {\n              <button type=\"button\" [class]=\"cohortButtonClass(c.id)\" (click)=\"activeCohort.set(c.id)\">\n                {{ c.label }}\n              </button>\n            }\n          </div>\n        </div>\n\n        <!-- 4-Tile KPI Metric Cards Grid -->\n        <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n          @for (stat of currentMetricList(); track stat.id) {\n            <div\n              ui-card\n              role=\"button\"\n              tabindex=\"0\"\n              [attr.aria-pressed]=\"activeMetricId() === stat.id\"\n              [class]=\"metricCardClass(stat.id)\"\n              (click)=\"activeMetricId.set(stat.id)\"\n              (keydown.enter)=\"activeMetricId.set(stat.id)\"\n              (keydown.space)=\"selectMetricKey(stat.id, $event)\"\n            >\n              <div class=\"space-y-2\">\n                <div class=\"flex items-center justify-between\">\n                  <span class=\"text-muted-foreground max-w-[160px] truncate font-mono text-xs\">{{ stat.label }}</span>\n                  <span\n                    ui-badge\n                    variant=\"outline\"\n                    class=\"border-success/20 bg-success/10 text-success font-mono text-xs\"\n                  >\n                    {{ stat.change }}\n                  </span>\n                </div>\n                <p class=\"text-foreground font-mono text-3xl font-bold tracking-tight sm:text-4xl\">{{ stat.value }}</p>\n              </div>\n\n              <p class=\"text-muted-foreground border-border/60 border-t pt-2 text-xs leading-relaxed\">\n                {{ stat.baseline }}\n              </p>\n            </div>\n          }\n        </div>\n\n        <!-- Interactive Detailed Breakdown Card for Selected KPI -->\n        <div\n          ui-card\n          class=\"border-border bg-card/95 space-y-6 overflow-hidden rounded-2xl p-6 text-left shadow-xl backdrop-blur-md sm:p-8\"\n        >\n          <div\n            class=\"border-border flex flex-col items-start justify-between gap-4 border-b pb-4 sm:flex-row sm:items-center\"\n          >\n            <div class=\"space-y-1\">\n              <div class=\"flex items-center gap-2\">\n                <span class=\"bg-primary size-2 rounded-full\"></span>\n                <h3 class=\"text-foreground font-mono text-base font-bold\">\n                  {{ selectedMetric().label }} &mdash; Deep Dive\n                </h3>\n              </div>\n              <p class=\"text-muted-foreground text-xs\">{{ selectedMetric().description }}</p>\n            </div>\n            <span ui-badge variant=\"secondary\" class=\"text-primary font-mono text-xs font-semibold\">\n              Cohort: {{ activeCohort().toUpperCase() }}\n            </span>\n          </div>\n\n          <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-3\">\n            <div class=\"border-border bg-background/50 space-y-1 rounded-xl border p-4\">\n              <p class=\"text-muted-foreground font-mono text-xs\">Monolithic Package Baseline</p>\n              <p class=\"text-muted-foreground font-mono text-lg font-bold line-through\">\n                {{ selectedMetric().details.before }}\n              </p>\n            </div>\n            <div class=\"border-border bg-background/50 space-y-1 rounded-xl border p-4\">\n              <p class=\"text-success font-mono text-xs font-semibold\">UIPKGE Unbundled Registry</p>\n              <p class=\"text-success font-mono text-lg font-bold\">\n                {{ selectedMetric().details.after }}\n              </p>\n            </div>\n            <div class=\"border-border bg-primary/5 space-y-1 rounded-xl border p-4\">\n              <p class=\"text-primary font-mono text-xs font-semibold\">Net Engineering Impact</p>\n              <p class=\"text-foreground font-mono text-lg font-bold\">{{ selectedMetric().details.impact }}</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  `,\n})\nexport class UiCustomerMetricsBandComponent {\n  protected readonly Gauge = Gauge\n  protected readonly cohortOptions = cohortOptions\n\n  @Input() set initialCohort(v: CustomerCohort) {\n    if (v) this.activeCohort.set(v)\n  }\n  @Input() set initialMetricId(v: string) {\n    if (v) this.activeMetricId.set(v)\n  }\n  @Input('class') className?: string\n\n  readonly activeCohort = signal<CustomerCohort>('all')\n  readonly activeMetricId = signal<string>('velocity')\n\n  readonly currentMetricList = computed(() => metricsByCohort[this.activeCohort()])\n  readonly selectedMetric = computed(() => {\n    const list = this.currentMetricList()\n    return list.find((m) => m.id === this.activeMetricId()) ?? list[0]\n  })\n\n  get rootClass(): string {\n    return cn(\n      'border-border/80 bg-muted/10 relative overflow-hidden border-y px-4 py-16 sm:px-6 sm:py-24 lg:px-8',\n      this.className,\n    )\n  }\n\n  cohortButtonClass(id: CustomerCohort): string {\n    // [class] replaces static classes: the base must live here (matches React's cn(base, active)).\n    return cn(\n      'focus-visible:ring-ring rounded-lg px-3 py-1.5 font-mono text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none',\n      this.activeCohort() === id\n        ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n        : 'text-muted-foreground hover:text-foreground',\n    )\n  }\n\n  metricCardClass(id: string): string {\n    return cn(\n      'border-border bg-card/90 focus-visible:ring-ring flex cursor-pointer flex-col justify-between space-y-4 rounded-2xl p-5 shadow-sm transition-colors hover:shadow-md focus-visible:ring-2 focus-visible:outline-none',\n      this.activeMetricId() === id && 'ring-primary border-primary/60 bg-card ring-2',\n    )\n  }\n\n  selectMetricKey(id: string, event: KeyboardEvent): void {\n    event.preventDefault()\n    this.activeMetricId.set(id)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/customer-metrics-band/customer-metrics-band.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/customer-metrics-band/index.ts",
      "content": "export { UiCustomerMetricsBandComponent, type CustomerCohort, type MetricStat } from './customer-metrics-band.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/customer-metrics-band/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/card.json"
  ],
  "description": "Customer velocity and ROI telemetry band with cohort segmentation (Enterprise vs High-Growth), 4 verified KPI metric tiles, and deep-dive impact inspector.",
  "categories": [
    "marketing"
  ]
}