{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "ab-test-variant-results",
  "title": "Ab Test Variant Results",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/ab-test-variant-results/AbTestVariantResults.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport {\n  Activity,\n  CheckCheck,\n  CheckCircle2,\n  Clock,\n  CreditCard,\n  DollarSign,\n  Pause,\n  Play,\n  ShieldCheck,\n  ShoppingCart,\n  TrendingUp,\n  Trophy,\n  Truck,\n  Users,\n  Zap,\n} 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, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\ninterface Props {\n  title?: string\n  experimentId?: string\n  duration?: string\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  title: 'Checkout Flow: Multi-Step vs Single-Page',\n  experimentId: 'EXP-1082',\n  duration: 'Running for 14 days · 48,290 visitors',\n})\n\nconst isPaused = ref(false)\nconst isWinnerDeclared = ref(false)\n\nconst primaryMetrics = [\n  {\n    id: 'conversion-lift',\n    label: 'Overall Conversion Lift',\n    value: '+24.8%',\n    unit: 'relative',\n    badge: '+1.27% Absolute',\n    badgeVariant: 'success' as const,\n    badgeIcon: TrendingUp,\n    description: 'Challenger (6.41%) vs Baseline Control (5.14%)',\n    highlight: true,\n  },\n  {\n    id: 'sample-size',\n    label: 'Total Sample Size',\n    value: '48,290',\n    unit: 'unique visitors',\n    badge: '50 / 50 Split',\n    badgeVariant: 'secondary' as const,\n    badgeIcon: Users,\n    description: '24,145 unique visitors per variant group',\n    highlight: false,\n  },\n  {\n    id: 'statistical-confidence',\n    label: 'Statistical Confidence',\n    value: '99.2%',\n    unit: 'confidence',\n    badge: 'p = 0.008',\n    badgeVariant: 'outline' as const,\n    badgeIcon: Activity,\n    description: 'Exceeds 95.0% significance threshold (α = 0.05)',\n    highlight: false,\n  },\n  {\n    id: 'revenue-impact',\n    label: 'Est. Annual Revenue Impact',\n    value: '+$142,000',\n    unit: 'ARR',\n    badge: '+$1.08 / visitor',\n    badgeVariant: 'success' as const,\n    badgeIcon: DollarSign,\n    description: 'Based on 131,500 annual checkouts ($5.28 vs $4.20 RPV)',\n    highlight: true,\n  },\n]\n\nconst variants = [\n  {\n    id: 'variant-a',\n    code: 'Variant A',\n    type: 'Control',\n    title: 'Multi-Step Wizard',\n    description: '3-step segmented checkout flow with separate shipping, billing, and review steps.',\n    split: '50%',\n    visitors: '24,145',\n    conversions: '1,240',\n    conversionLabel: '1,240 checkouts',\n    conversionRate: '5.14%',\n    rateBadge: 'Baseline',\n    rateBadgeVariant: 'secondary' as const,\n    revenuePerVisitor: '$4.20',\n    totalRevenue: '$101,409.00',\n    verdict: 'Baseline Control Group',\n    verdictVariant: 'outline' as const,\n    isWinner: false,\n  },\n  {\n    id: 'variant-b',\n    code: 'Variant B',\n    type: 'Challenger',\n    title: 'Single-Page with Accordion',\n    description: 'Unified single-page layout with collapsible accordion sections and sticky order summary.',\n    split: '50%',\n    visitors: '24,145',\n    conversions: '1,548',\n    conversionLabel: '1,548 checkouts (+308)',\n    conversionRate: '6.41%',\n    rateBadge: '+24.8% relative lift',\n    rateBadgeVariant: 'success' as const,\n    revenuePerVisitor: '$5.28',\n    revenueDelta: '+$1.08 / visitor',\n    totalRevenue: '$127,485.60',\n    verdict: 'Winner · 99.2% probability to beat control',\n    verdictVariant: 'success' as const,\n    isWinner: true,\n  },\n]\n\nconst funnelSteps = [\n  {\n    id: 'step-1',\n    stepNumber: '01',\n    name: 'Cart Review',\n    description: 'Initial checkout landing and cart items validation',\n    icon: ShoppingCart,\n    control: {\n      count: '24,145',\n      rate: '100.0%',\n      progress: 100,\n      retention: '100% of traffic',\n    },\n    challenger: {\n      count: '24,145',\n      rate: '100.0%',\n      progress: 100,\n      retention: '100% of traffic',\n    },\n    delta: '0.0%',\n    isPositive: null,\n    insight: 'Uniform 50/50 randomized traffic partition without sample ratio bias.',\n  },\n  {\n    id: 'step-2',\n    stepNumber: '02',\n    name: 'Shipping Address',\n    description: 'Delivery destination selection & shipping method',\n    icon: Truck,\n    control: {\n      count: '18,350',\n      rate: '76.0%',\n      progress: 76,\n      retention: '76.0% retained',\n    },\n    challenger: {\n      count: '20,523',\n      rate: '85.0%',\n      progress: 85,\n      retention: '85.0% retained',\n    },\n    delta: '+11.8% stage lift',\n    isPositive: true,\n    insight: 'Auto-fill and inline address validation lowered initial drop-off by 9.0 percentage points.',\n  },\n  {\n    id: 'step-3',\n    stepNumber: '03',\n    name: 'Payment Details',\n    description: 'Credit card input, digital wallet, or invoice terms',\n    icon: CreditCard,\n    control: {\n      count: '8,450',\n      rate: '35.0%',\n      progress: 35,\n      retention: '46.0% retained',\n    },\n    challenger: {\n      count: '11,831',\n      rate: '49.0%',\n      progress: 49,\n      retention: '57.6% retained',\n    },\n    delta: '+40.0% stage lift',\n    isPositive: true,\n    insight: 'Accordion structure preserved visible cart totals, reducing payment abandonment substantially.',\n  },\n  {\n    id: 'step-4',\n    stepNumber: '04',\n    name: 'Checkout Completed',\n    description: 'Payment authorized & order confirmation rendered',\n    icon: CheckCheck,\n    control: {\n      count: '1,240',\n      rate: '5.14%',\n      progress: 5.14,\n      retention: '14.7% of payment step',\n    },\n    challenger: {\n      count: '1,548',\n      rate: '6.41%',\n      progress: 6.41,\n      retention: '13.1% of payment step',\n    },\n    delta: '+24.8% final lift',\n    isPositive: true,\n    insight: 'Yielded 308 net incremental checkouts with statistical significance (p = 0.008).',\n  },\n]\n\nconst guardrails = [\n  {\n    id: 'srm',\n    title: 'Sample Ratio Mismatch (SRM)',\n    status: 'Passed',\n    badgeVariant: 'success' as const,\n    value: 'p = 0.982',\n    description: 'Chi-square goodness of fit verifies balanced 50.0% / 50.0% traffic delivery.',\n    icon: ShieldCheck,\n  },\n  {\n    id: 'mde',\n    title: 'Minimum Detectable Effect',\n    status: 'Achieved',\n    badgeVariant: 'success' as const,\n    value: 'Observed +24.8% vs MDE 5.0%',\n    description: 'Statistical power exceeds 99% for primary conversion rate metric.',\n    icon: Zap,\n  },\n  {\n    id: 'perf',\n    title: 'Performance Guardrail',\n    status: 'Healthy',\n    badgeVariant: 'secondary' as const,\n    value: '1.1s vs 1.3s LCP',\n    description: 'Single-page architecture improved largest contentful paint by 180ms.',\n    icon: Clock,\n  },\n]\n\nconst handleDeclareWinner = () => {\n  isWinnerDeclared.value = true\n  isPaused.value = true\n}\n\nconst togglePause = () => {\n  isPaused.value = !isPaused.value\n}\n</script>\n\n<template>\n  <div data-uipkge data-slot=\"ab-test-variant-results\" :class=\"cn('w-full space-y-6', props.class)\">\n    <!-- Winner Rollout Banner (if declared) -->\n    <div\n      v-if=\"isWinnerDeclared\"\n      class=\"border-success/30 bg-success/10 text-foreground dark:text-foreground flex flex-col items-start justify-between gap-3 rounded-lg border p-4 shadow-xs sm:flex-row sm:items-center\"\n    >\n      <div class=\"flex items-center gap-3\">\n        <div class=\"bg-success flex size-9 shrink-0 items-center justify-center rounded-md text-white shadow-xs\">\n          <Trophy class=\"size-4\" aria-hidden=\"true\" />\n        </div>\n        <div class=\"space-y-0.5\">\n          <p class=\"text-foreground text-sm font-semibold\">Variant B (Single-Page Accordion) Declared Winner</p>\n          <p class=\"text-muted-foreground text-xs\">\n            100% traffic rollout initiated. Estimated annual revenue increase of +$142,000 ARR in effect.\n          </p>\n        </div>\n      </div>\n      <Badge variant=\"success\" class=\"font-semibold\"> 100% Traffic Live </Badge>\n    </div>\n\n    <!-- Header Section -->\n    <div class=\"flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between\">\n      <div class=\"space-y-1.5\">\n        <div class=\"flex flex-wrap items-center gap-2.5\">\n          <h2 class=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">\n            {{ title }}\n          </h2>\n          <Badge variant=\"outline\" class=\"font-mono text-xs\">\n            {{ experimentId }}\n          </Badge>\n          <Badge variant=\"success\" class=\"border-success/20 bg-success/10 text-success gap-1.5 font-medium\">\n            <CheckCircle2 class=\"size-3\" aria-hidden=\"true\" />\n            <span>Statistically Significant · 99.2% Confidence</span>\n          </Badge>\n          <Badge v-if=\"isPaused\" variant=\"secondary\" class=\"gap-1 font-medium\">\n            <Pause class=\"size-3\" aria-hidden=\"true\" />\n            <span>Paused</span>\n          </Badge>\n        </div>\n        <p class=\"text-muted-foreground text-xs leading-relaxed sm:text-sm\">\n          {{ duration }} · Primary Goal: <span class=\"text-foreground font-medium\">Completed Checkout Rate</span>\n        </p>\n      </div>\n\n      <!-- Action Buttons -->\n      <div class=\"flex flex-wrap items-center gap-2.5\">\n        <Button size=\"sm\" variant=\"outline\" class=\"gap-1.5 shadow-xs\" @click=\"togglePause\">\n          <component :is=\"isPaused ? Play : Pause\" class=\"size-3.5\" aria-hidden=\"true\" />\n          <span>{{ isPaused ? 'Resume Test' : 'Pause Test' }}</span>\n        </Button>\n        <Button\n          size=\"sm\"\n          variant=\"default\"\n          :disabled=\"isWinnerDeclared\"\n          class=\"gap-1.5 shadow-xs\"\n          @click=\"handleDeclareWinner\"\n        >\n          <Trophy class=\"size-3.5\" aria-hidden=\"true\" />\n          <span>{{ isWinnerDeclared ? 'Winner Rolled Out 100%' : 'Declare Winner & Roll Out 100%' }}</span>\n        </Button>\n      </div>\n    </div>\n\n    <!-- 4 Primary Experiment Metrics Cards -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <Card\n        v-for=\"metric in primaryMetrics\"\n        :key=\"metric.id\"\n        class=\"border-border bg-card hover:border-border/80 shadow-xs transition-colors\"\n        :class=\"{ 'border-success/30 bg-success/[0.02] dark:bg-success/10]': metric.highlight }\"\n      >\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex items-center justify-between gap-2\">\n            <CardTitle class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">\n              {{ metric.label }}\n            </CardTitle>\n            <Badge :variant=\"metric.badgeVariant\" class=\"gap-1 font-medium tabular-nums\">\n              <component :is=\"metric.badgeIcon\" class=\"size-3\" aria-hidden=\"true\" />\n              <span>{{ metric.badge }}</span>\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-1.5 pb-4\">\n          <div class=\"flex items-baseline gap-1.5\">\n            <span\n              class=\"text-2xl font-bold tracking-tight tabular-nums sm:text-3xl\"\n              :class=\"metric.highlight ? 'text-success' : 'text-foreground'\"\n            >\n              {{ metric.value }}\n            </span>\n            <span v-if=\"metric.unit\" class=\"text-muted-foreground text-xs font-normal\">\n              {{ metric.unit }}\n            </span>\n          </div>\n          <p class=\"text-muted-foreground text-xs leading-relaxed\">\n            {{ metric.description }}\n          </p>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- Variants Comparison Table Card -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"pb-3\">\n        <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle class=\"text-foreground text-base font-semibold\">\n                Variants Comparison &amp; Statistical Significance\n              </CardTitle>\n              <Badge variant=\"outline\" class=\"font-mono text-xs\"> Statsig / Optimizely Model </Badge>\n            </div>\n            <CardDescription class=\"mt-1 text-xs\">\n              Frequentist two-tailed Z-test with continuous monitoring and sample ratio correction.\n            </CardDescription>\n          </div>\n          <div\n            class=\"border-border/80 bg-muted/30 flex items-center gap-2 self-start rounded-lg border px-3 py-1.5 text-xs sm:self-auto\"\n          >\n            <span class=\"text-muted-foreground\">Significance Alpha:</span>\n            <span class=\"text-foreground font-mono font-semibold tabular-nums\">α = 0.05</span>\n          </div>\n        </div>\n      </CardHeader>\n      <CardContent class=\"p-0\">\n        <div class=\"overflow-x-auto\">\n          <Table>\n            <TableHeader class=\"bg-muted/40\">\n              <TableRow class=\"border-border hover:bg-transparent\">\n                <TableHead class=\"text-foreground text-xs font-semibold\">Variant &amp; Layout</TableHead>\n                <TableHead class=\"text-foreground text-xs font-semibold\">Traffic Split</TableHead>\n                <TableHead class=\"text-foreground text-right text-xs font-semibold\">Conversions</TableHead>\n                <TableHead class=\"text-foreground text-right text-xs font-semibold\">Conversion Rate</TableHead>\n                <TableHead class=\"text-foreground text-right text-xs font-semibold\">Revenue / Visitor</TableHead>\n                <TableHead class=\"text-foreground text-right text-xs font-semibold\">Statistical Verdict</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              <TableRow\n                v-for=\"variant in variants\"\n                :key=\"variant.id\"\n                class=\"border-border transition-colors\"\n                :class=\"\n                  variant.isWinner ? 'bg-success/[0.04] hover:bg-success/[0.08] bg-success/[0.07]' : 'hover:bg-muted/30'\n                \"\n              >\n                <!-- Variant Name & Description -->\n                <TableCell class=\"py-4\">\n                  <div class=\"flex items-start gap-2.5\">\n                    <div\n                      class=\"flex size-7 shrink-0 items-center justify-center rounded-md text-xs font-bold shadow-xs\"\n                      :class=\"\n                        variant.isWinner\n                          ? 'bg-success text-white'\n                          : 'border-border bg-muted text-muted-foreground border'\n                      \"\n                    >\n                      {{ variant.code === 'Variant A' ? 'A' : 'B' }}\n                    </div>\n                    <div class=\"space-y-0.5\">\n                      <div class=\"flex items-center gap-1.5\">\n                        <span class=\"text-foreground text-sm font-semibold\">{{ variant.code }}</span>\n                        <Badge :variant=\"variant.isWinner ? 'success' : 'secondary'\" class=\"text-xs font-medium\">\n                          {{ variant.type }}\n                        </Badge>\n                      </div>\n                      <p class=\"text-foreground text-xs font-medium\">{{ variant.title }}</p>\n                      <p class=\"text-muted-foreground text-xs\">{{ variant.description }}</p>\n                    </div>\n                  </div>\n                </TableCell>\n\n                <!-- Traffic Split -->\n                <TableCell class=\"py-4 align-middle\">\n                  <div class=\"space-y-1\">\n                    <div class=\"flex items-center gap-1.5\">\n                      <span class=\"text-foreground text-sm font-semibold tabular-nums\">{{ variant.split }}</span>\n                      <span class=\"text-muted-foreground text-xs\">allocation</span>\n                    </div>\n                    <p class=\"text-muted-foreground text-xs tabular-nums\">{{ variant.visitors }} visitors</p>\n                  </div>\n                </TableCell>\n\n                <!-- Conversions -->\n                <TableCell class=\"py-4 text-right align-middle\">\n                  <div class=\"space-y-0.5\">\n                    <span class=\"text-foreground text-sm font-bold tabular-nums\">{{ variant.conversions }}</span>\n                    <p class=\"text-muted-foreground text-xs\">completed checkouts</p>\n                  </div>\n                </TableCell>\n\n                <!-- Conversion Rate -->\n                <TableCell class=\"py-4 text-right align-middle\">\n                  <div class=\"flex flex-col items-end gap-1\">\n                    <span\n                      class=\"text-sm font-bold tabular-nums\"\n                      :class=\"variant.isWinner ? 'text-success text-base' : 'text-foreground'\"\n                    >\n                      {{ variant.conversionRate }}\n                    </span>\n                    <Badge :variant=\"variant.rateBadgeVariant\" class=\"gap-1 text-xs font-medium tabular-nums\">\n                      <TrendingUp v-if=\"variant.isWinner\" class=\"size-3\" aria-hidden=\"true\" />\n                      <span>{{ variant.rateBadge }}</span>\n                    </Badge>\n                  </div>\n                </TableCell>\n\n                <!-- Revenue per Visitor -->\n                <TableCell class=\"py-4 text-right align-middle\">\n                  <div class=\"space-y-0.5\">\n                    <span\n                      class=\"text-sm font-bold tabular-nums\"\n                      :class=\"variant.isWinner ? 'text-success' : 'text-foreground'\"\n                    >\n                      {{ variant.revenuePerVisitor }}\n                    </span>\n                    <p v-if=\"variant.revenueDelta\" class=\"text-success text-success text-xs font-semibold tabular-nums\">\n                      {{ variant.revenueDelta }}\n                    </p>\n                    <p v-else class=\"text-muted-foreground text-xs tabular-nums\">\n                      {{ variant.totalRevenue }}\n                    </p>\n                  </div>\n                </TableCell>\n\n                <!-- Statistical Verdict -->\n                <TableCell class=\"py-4 text-right align-middle\">\n                  <div class=\"flex flex-col items-end gap-1\">\n                    <Badge\n                      :variant=\"variant.verdictVariant\"\n                      class=\"gap-1.5 py-1 text-xs font-semibold tabular-nums\"\n                      :class=\"variant.isWinner ? 'border-success/30 bg-success/15 text-success' : ''\"\n                    >\n                      <Trophy v-if=\"variant.isWinner\" class=\"text-success size-3.5\" aria-hidden=\"true\" />\n                      <CheckCircle2 v-else class=\"text-muted-foreground size-3.5\" aria-hidden=\"true\" />\n                      <span>{{ variant.verdict }}</span>\n                    </Badge>\n                  </div>\n                </TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Conversion Funnel Step Drop-off Comparison Card -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"pb-4\">\n        <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle class=\"text-foreground text-base font-semibold\">\n                Conversion Funnel Step Drop-off Comparison\n              </CardTitle>\n              <Badge variant=\"secondary\" class=\"text-xs\"> 4-Stage Funnel </Badge>\n            </div>\n            <CardDescription class=\"mt-1 text-xs\">\n              Direct comparison of drop-off, progression, and conversion retention between Control and Challenger at\n              each step.\n            </CardDescription>\n          </div>\n\n          <!-- Legend -->\n          <div class=\"flex flex-wrap items-center gap-4 text-xs\">\n            <div class=\"flex items-center gap-1.5\">\n              <span class=\"border-border bg-muted-foreground/30 size-3 rounded-xs border\" />\n              <span class=\"text-muted-foreground\">Variant A (Control)</span>\n            </div>\n            <div class=\"flex items-center gap-1.5\">\n              <span class=\"bg-success size-3 rounded-xs\" />\n              <span class=\"text-foreground font-medium\">Variant B (Challenger)</span>\n            </div>\n          </div>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"space-y-6\">\n        <div class=\"grid grid-cols-1 gap-4\">\n          <div\n            v-for=\"step in funnelSteps\"\n            :key=\"step.id\"\n            class=\"border-border bg-card/60 hover:bg-muted/10 rounded-lg border p-4 shadow-xs transition-colors\"\n          >\n            <div class=\"flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between\">\n              <!-- Step Meta -->\n              <div class=\"flex items-start gap-3 lg:w-1/3\">\n                <div\n                  class=\"border-border bg-muted/50 text-foreground flex size-9 shrink-0 items-center justify-center rounded-md border shadow-xs\"\n                >\n                  <component :is=\"step.icon\" class=\"size-4\" aria-hidden=\"true\" />\n                </div>\n                <div class=\"space-y-0.5\">\n                  <div class=\"flex items-center gap-2\">\n                    <span class=\"text-muted-foreground font-mono text-xs font-bold\">STEP {{ step.stepNumber }}</span>\n                    <span class=\"text-foreground text-sm font-semibold\">{{ step.name }}</span>\n                  </div>\n                  <p class=\"text-muted-foreground text-xs\">{{ step.description }}</p>\n                </div>\n              </div>\n\n              <!-- Comparative Bars -->\n              <div class=\"space-y-2 lg:w-1/2\">\n                <!-- Variant A (Control) Bar -->\n                <div class=\"space-y-1\">\n                  <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n                    <span class=\"flex items-center gap-1.5\">\n                      <span class=\"text-foreground font-medium\">Control:</span>\n                      <span class=\"tabular-nums\">{{ step.control.count }} visitors</span>\n                    </span>\n                    <span class=\"font-mono font-medium tabular-nums\">{{ step.control.rate }}</span>\n                  </div>\n                  <div class=\"bg-muted h-2 w-full overflow-hidden rounded-full\">\n                    <div\n                      class=\"bg-muted-foreground/40 h-full rounded-full transition-[width] duration-300\"\n                      :style=\"{ width: `${step.control.progress}%` }\"\n                    />\n                  </div>\n                </div>\n\n                <!-- Variant B (Challenger) Bar -->\n                <div class=\"space-y-1\">\n                  <div class=\"flex items-center justify-between text-xs\">\n                    <span class=\"flex items-center gap-1.5\">\n                      <span class=\"text-foreground font-medium\">Challenger:</span>\n                      <span class=\"text-foreground font-semibold tabular-nums\"\n                        >{{ step.challenger.count }} visitors</span\n                      >\n                    </span>\n                    <span class=\"text-success text-success font-mono font-bold tabular-nums\">\n                      {{ step.challenger.rate }}\n                    </span>\n                  </div>\n                  <div class=\"bg-muted h-2 w-full overflow-hidden rounded-full\">\n                    <div\n                      class=\"bg-success h-full rounded-full transition-[width] duration-300\"\n                      :style=\"{ width: `${step.challenger.progress}%` }\"\n                    />\n                  </div>\n                </div>\n              </div>\n\n              <!-- Step Lift Badge & Insight -->\n              <div class=\"flex flex-col items-start gap-1 lg:w-1/6 lg:items-end\">\n                <Badge\n                  :variant=\"step.isPositive ? 'success' : 'secondary'\"\n                  class=\"gap-1 text-xs font-semibold tabular-nums\"\n                  :class=\"step.isPositive ? 'border-success/30 bg-success/15 text-success' : ''\"\n                >\n                  <TrendingUp v-if=\"step.isPositive\" class=\"size-3\" aria-hidden=\"true\" />\n                  <span>{{ step.delta }}</span>\n                </Badge>\n                <span class=\"text-muted-foreground text-left text-xs tabular-nums lg:text-right\">\n                  {{ step.challenger.retention }}\n                </span>\n              </div>\n            </div>\n\n            <!-- Bottom micro insight -->\n            <div\n              class=\"border-border/60 bg-muted/20 text-muted-foreground mt-3 flex items-center gap-2 rounded-md border px-3 py-1.5 text-xs\"\n            >\n              <span class=\"text-foreground shrink-0 font-medium\">Stage Note:</span>\n              <span class=\"leading-relaxed\">{{ step.insight }}</span>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Guardrails & Quality Verification Footer -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"pb-3\">\n        <div class=\"flex items-center gap-2\">\n          <CardTitle class=\"text-foreground text-base font-semibold\">\n            Statistical Guardrails &amp; Health Checks\n          </CardTitle>\n          <Badge variant=\"outline\" class=\"font-mono text-xs\"> Integrity Verified </Badge>\n        </div>\n        <CardDescription class=\"text-xs\">\n          Automatic telemetry assertions verifying sample validity, statistical power, and site performance.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <div class=\"grid grid-cols-1 gap-4 md:grid-cols-3\">\n          <div\n            v-for=\"guard in guardrails\"\n            :key=\"guard.id\"\n            class=\"border-border bg-card/60 hover:bg-muted/10 flex flex-col justify-between rounded-lg border p-4 shadow-xs transition-colors\"\n          >\n            <div class=\"space-y-2.5\">\n              <div class=\"flex items-center justify-between\">\n                <div\n                  class=\"border-border bg-muted/50 text-foreground flex size-8 items-center justify-center rounded-md border shadow-xs\"\n                >\n                  <component :is=\"guard.icon\" class=\"size-4\" aria-hidden=\"true\" />\n                </div>\n                <Badge :variant=\"guard.badgeVariant\" class=\"text-xs font-medium\">\n                  {{ guard.status }}\n                </Badge>\n              </div>\n              <div class=\"space-y-1\">\n                <h4 class=\"text-foreground text-sm font-semibold\">{{ guard.title }}</h4>\n                <p class=\"text-success text-success font-mono text-xs font-semibold tabular-nums\">\n                  {{ guard.value }}\n                </p>\n                <p class=\"text-muted-foreground text-xs leading-relaxed\">{{ guard.description }}</p>\n              </div>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/AbTestVariantResults.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/table.json"
  ],
  "description": "Optimizely and Statsig style A/B test statistical significance scorecard and conversion delta comparison. Features experiment status header, 4 primary experiment metrics cards, variants comparison table with statistical verdicts, and conversion funnel step drop-off comparison.",
  "categories": [
    "analytics",
    "marketing",
    "dashboard"
  ]
}