{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "column-profiling-summary",
  "title": "Column Profiling Summary",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/column-profiling-summary/ColumnProfilingSummary.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref, computed, type HTMLAttributes } from 'vue'\nimport {\n  Database,\n  Download,\n  CheckCircle2,\n  AlertCircle,\n  Hash,\n  Tag,\n  Binary,\n  Search,\n  BarChart2,\n  Copy,\n  Check,\n  Table as TableIcon,\n  LayoutGrid,\n} from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n  class?: HTMLAttributes['class']\n  tableName?: string\n  totalRows?: string\n  totalColumns?: number\n  memoryFootprint?: string\n  datasetVersion?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  tableName: 'customer_churn_features_v2',\n  totalRows: '148,290',\n  totalColumns: 18,\n  memoryFootprint: '24.2 MB',\n  datasetVersion: 'v2.4.1',\n})\n\nconst activeTypeFilter = ref<'all' | 'numeric' | 'categorical' | 'boolean'>('all')\nconst searchQuery = ref('')\nconst viewMode = ref<'cards' | 'table'>('cards')\nconst isExporting = ref(false)\nconst showExportSuccess = ref(false)\nconst copiedColumn = ref<string | null>(null)\nconst hoveredHistBin = ref<number | null>(null)\n\n// Column 1: monthly_spend_usd (Numeric Float64)\nconst monthlySpendStats = {\n  name: 'monthly_spend_usd',\n  type: 'Numeric Float64',\n  category: 'numeric',\n  min: '$0.00',\n  mean: '$142.50',\n  median: '$120.00',\n  max: '$2,450.00',\n  stdDev: '48.2',\n  iqr: '$115.00',\n  zerosCount: 1420,\n  zerosPct: '0.96%',\n  missingCount: 0,\n  missingPct: '0.0%',\n  distinctCount: '12,410',\n  distinctPct: '8.37%',\n  memory: '1.19 MB',\n}\n\nconst histogramBins = [\n  { bin: '$0 - $245', count: 58400, pct: 39.4, height: 95 },\n  { bin: '$245 - $490', count: 42100, pct: 28.4, height: 68 },\n  { bin: '$490 - $735', count: 22500, pct: 15.2, height: 36 },\n  { bin: '$735 - $980', count: 12800, pct: 8.6, height: 21 },\n  { bin: '$980 - $1,225', count: 6400, pct: 4.3, height: 10 },\n  { bin: '$1,225 - $1,470', count: 3100, pct: 2.1, height: 5 },\n  { bin: '$1,470 - $1,715', count: 1650, pct: 1.1, height: 3 },\n  { bin: '$1,715 - $1,960', count: 840, pct: 0.6, height: 2 },\n  { bin: '$1,960 - $2,205', count: 380, pct: 0.3, height: 1 },\n  { bin: '$2,205 - $2,450', count: 120, pct: 0.1, height: 1 },\n]\n\n// Column 2: subscription_tier (Categorical)\nconst subscriptionTierStats = {\n  name: 'subscription_tier',\n  type: 'Categorical',\n  category: 'categorical',\n  distinctCount: 4,\n  missingCount: 0,\n  missingPct: '0.0%',\n  memory: '1.19 MB',\n  topValue: 'Starter',\n  topFreqPct: '45.0%',\n}\n\nconst subscriptionTiers = [\n  { name: 'Starter', count: 66730, pct: 45.0, colorClass: 'bg-primary', badgeClass: 'border-primary/30 text-primary' },\n  {\n    name: 'Pro',\n    count: 51901,\n    pct: 35.0,\n    colorClass: 'bg-success',\n    badgeClass: 'border-success/30 text-success',\n  },\n  {\n    name: 'Enterprise',\n    count: 22243,\n    pct: 15.0,\n    colorClass: 'bg-info',\n    badgeClass: 'border-info/30 text-info',\n  },\n  {\n    name: 'Custom',\n    count: 7416,\n    pct: 5.0,\n    colorClass: 'bg-warning',\n    badgeClass: 'border-warning/30 text-warning',\n  },\n]\n\n// Column 3: account_age_days (Numeric Int32)\nconst accountAgeStats = {\n  name: 'account_age_days',\n  type: 'Numeric Int32',\n  category: 'numeric',\n  min: '1d',\n  p25: '42d',\n  p50: '180d',\n  p75: '365d',\n  p95: '580d',\n  p99: '720d',\n  max: '850d',\n  iqr: '323d',\n  mean: '214.6d',\n  stdDev: '142.1',\n  missingCount: 42,\n  missingPct: '0.03%',\n  distinctCount: '820',\n  distinctPct: '0.55%',\n  memory: '593.2 KB',\n}\n\n// Column 4: has_cancelled (Boolean)\nconst hasCancelledStats = {\n  name: 'has_cancelled',\n  type: 'Boolean',\n  category: 'boolean',\n  missingCount: 0,\n  missingPct: '0.0%',\n  distinctCount: 2,\n  memory: '144.8 KB',\n  trueCount: 21057,\n  truePct: 14.2,\n  falseCount: 127233,\n  falsePct: 85.8,\n}\n\n// Schema overview for compact table view\nconst allSchemaColumns = [\n  {\n    name: 'monthly_spend_usd',\n    type: 'Numeric Float64',\n    category: 'numeric',\n    missing: '0 (0.0%)',\n    distinct: '12,410 (8.4%)',\n    summary: 'Mean: $142.50 · Median: $120.00 · Max: $2,450.00',\n    status: 'Clean',\n  },\n  {\n    name: 'subscription_tier',\n    type: 'Categorical',\n    category: 'categorical',\n    missing: '0 (0.0%)',\n    distinct: '4 values',\n    summary: 'Starter (45%) > Pro (35%) > Enterprise (15%)',\n    status: 'Clean',\n  },\n  {\n    name: 'account_age_days',\n    type: 'Numeric Int32',\n    category: 'numeric',\n    missing: '42 (0.03%)',\n    distinct: '820 (0.6%)',\n    summary: 'P25: 42d · P50: 180d · P75: 365d · P99: 720d',\n    status: '99.97% Complete',\n  },\n  {\n    name: 'has_cancelled',\n    type: 'Boolean',\n    category: 'boolean',\n    missing: '0 (0.0%)',\n    distinct: '2 values',\n    summary: 'False: 85.8% (127.2k) · True: 14.2% (21.1k)',\n    status: 'Clean',\n  },\n  {\n    name: 'customer_id',\n    type: 'Categorical UUID',\n    category: 'categorical',\n    missing: '0 (0.0%)',\n    distinct: '148,290 (100%)',\n    summary: 'Primary Key · Unique identifier',\n    status: 'Unique Index',\n  },\n  {\n    name: 'support_tickets_count',\n    type: 'Numeric Int16',\n    category: 'numeric',\n    missing: '0 (0.0%)',\n    distinct: '18 values',\n    summary: 'Mean: 1.4 · Median: 1.0 · Max: 16.0',\n    status: 'Clean',\n  },\n  {\n    name: 'last_login_epoch',\n    type: 'Numeric Int64',\n    category: 'numeric',\n    missing: '112 (0.08%)',\n    distinct: '114,200',\n    summary: 'Min: 1770000000 · Max: 1787313600',\n    status: 'Clean',\n  },\n  {\n    name: 'signup_channel',\n    type: 'Categorical',\n    category: 'categorical',\n    missing: '439 (0.30%)',\n    distinct: '7 values',\n    summary: 'Organic (42%) > Google Ads (28%) > Partner (16%)',\n    status: 'Clean',\n  },\n]\n\nconst filteredColumns = computed(() => {\n  return allSchemaColumns.filter((col) => {\n    const matchesCategory = activeTypeFilter.value === 'all' || col.category === activeTypeFilter.value\n    const matchesSearch =\n      col.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||\n      col.type.toLowerCase().includes(searchQuery.value.toLowerCase())\n    return matchesCategory && matchesSearch\n  })\n})\n\nfunction handleExportReport() {\n  if (isExporting.value) return\n  isExporting.value = true\n  setTimeout(() => {\n    isExporting.value = false\n    showExportSuccess.value = true\n    setTimeout(() => {\n      showExportSuccess.value = false\n    }, 3500)\n  }, 600)\n}\n\nfunction handleCopy(name: string) {\n  navigator.clipboard?.writeText(name)\n  copiedColumn.value = name\n  setTimeout(() => {\n    if (copiedColumn.value === name) {\n      copiedColumn.value = null\n    }\n  }, 2000)\n}\n</script>\n\n<template>\n  <div data-slot=\"column-profiling-summary\" :class=\"cn('mx-auto w-full max-w-6xl space-y-6', props.class)\">\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          <div class=\"bg-primary/10 text-primary flex size-8 items-center justify-center rounded-lg\">\n            <Database class=\"size-4\" />\n          </div>\n          <h1 class=\"text-foreground text-2xl font-bold tracking-tight break-all sm:text-3xl\">\n            Table: {{ props.tableName }}\n          </h1>\n          <Badge variant=\"outline\" class=\"gap-1.5 font-mono text-xs font-normal\">\n            <span class=\"bg-success size-1.5 rounded-full\" />\n            <span>Apache Parquet</span>\n          </Badge>\n          <Badge variant=\"secondary\" class=\"font-mono text-xs font-normal\">\n            {{ props.datasetVersion }}\n          </Badge>\n        </div>\n        <p class=\"text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1 text-xs\">\n          <span>Profiled: 2026-08-21 14:30 UTC</span>\n          <span>•</span>\n          <span>Snappy Compressed</span>\n          <span>•</span>\n          <span class=\"text-foreground font-medium\">EDA Engine: ydata-profiler v4.8</span>\n        </p>\n      </div>\n\n      <div class=\"flex flex-wrap items-center gap-3\">\n        <!-- Quick Meta Pills -->\n        <div class=\"bg-card border-border/80 flex items-center divide-x rounded-lg border text-xs shadow-xs\">\n          <div class=\"px-3 py-1.5\">\n            <span class=\"text-muted-foreground\">Rows: </span>\n            <span class=\"text-foreground font-semibold tabular-nums\">{{ props.totalRows }}</span>\n          </div>\n          <div class=\"px-3 py-1.5\">\n            <span class=\"text-muted-foreground\">Cols: </span>\n            <span class=\"text-foreground font-semibold tabular-nums\">{{ props.totalColumns }}</span>\n          </div>\n          <div class=\"px-3 py-1.5\">\n            <span class=\"text-muted-foreground\">Memory: </span>\n            <span class=\"text-foreground font-semibold tabular-nums\">{{ props.memoryFootprint }}</span>\n          </div>\n        </div>\n\n        <!-- Export EDA Report Button -->\n        <Button\n          aria-label=\"Download attachment\"\n          size=\"sm\"\n          class=\"gap-1.5 shadow-xs\"\n          :disabled=\"isExporting\"\n          @click=\"handleExportReport\"\n        >\n          <Download v-if=\"!isExporting\" class=\"size-3.5\" />\n          <span v-else class=\"size-3.5 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n          <span>{{ isExporting ? 'Generating HTML Report...' : 'Export EDA Report' }}</span>\n        </Button>\n      </div>\n    </div>\n\n    <!-- Export Success Banner -->\n    <div\n      v-if=\"showExportSuccess\"\n      class=\"border-success/30 bg-success/10 text-foreground dark:text-foreground flex items-center justify-between rounded-lg border p-3 text-xs shadow-xs\"\n      role=\"status\"\n    >\n      <div class=\"flex items-center gap-2\">\n        <CheckCircle2 class=\"text-success size-4 shrink-0\" />\n        <span class=\"font-medium\">\n          Exploratory Data Analysis report exported. HTML summary & JSON schema bundle ready for download.\n        </span>\n      </div>\n      <button\n        type=\"button\"\n        class=\"text-success text-success text-xs font-semibold hover:underline\"\n        @click=\"showExportSuccess = false\"\n      >\n        Dismiss\n      </button>\n    </div>\n\n    <!-- 4 Dataset Overview KPI Cards -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <!-- 1. Numeric Columns -->\n      <Card class=\"flex flex-col justify-between\">\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex items-center justify-between gap-2\">\n            <div class=\"flex items-center gap-2\">\n              <div class=\"bg-muted text-foreground flex size-7 items-center justify-center rounded-md border\">\n                <Hash class=\"text-info size-3.5\" />\n              </div>\n              <CardTitle class=\"text-sm font-medium\">Numeric Columns</CardTitle>\n            </div>\n            <Badge variant=\"outline\" class=\"font-mono text-xs tabular-nums\">55.6%</Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2 pt-1\">\n          <div class=\"flex items-baseline gap-1.5\">\n            <span class=\"text-foreground text-3xl font-bold tracking-tight tabular-nums\">10</span>\n            <span class=\"text-muted-foreground text-xs font-medium\">Columns</span>\n          </div>\n          <div class=\"border-border/60 border-t pt-2 text-xs\">\n            <div class=\"text-muted-foreground flex items-center justify-between\">\n              <span>Types Breakdown:</span>\n              <span class=\"text-foreground font-medium tabular-nums\">8 Float64 · 2 Int32</span>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- 2. Categorical Columns -->\n      <Card class=\"flex flex-col justify-between\">\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex items-center justify-between gap-2\">\n            <div class=\"flex items-center gap-2\">\n              <div class=\"bg-muted text-foreground flex size-7 items-center justify-center rounded-md border\">\n                <Tag class=\"text-chart-1 size-3.5\" />\n              </div>\n              <CardTitle class=\"text-sm font-medium\">Categorical Columns</CardTitle>\n            </div>\n            <Badge variant=\"outline\" class=\"font-mono text-xs tabular-nums\">33.3%</Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2 pt-1\">\n          <div class=\"flex items-baseline gap-1.5\">\n            <span class=\"text-foreground text-3xl font-bold tracking-tight tabular-nums\">6</span>\n            <span class=\"text-muted-foreground text-xs font-medium\">Columns</span>\n          </div>\n          <div class=\"border-border/60 border-t pt-2 text-xs\">\n            <div class=\"text-muted-foreground flex items-center justify-between\">\n              <span>High Cardinality:</span>\n              <span class=\"text-foreground font-medium tabular-nums\">1 (customer_id)</span>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- 3. Missing Values % -->\n      <Card class=\"flex flex-col justify-between\">\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex items-center justify-between gap-2\">\n            <div class=\"flex items-center gap-2\">\n              <div class=\"bg-muted text-foreground flex size-7 items-center justify-center rounded-md border\">\n                <AlertCircle class=\"text-success size-3.5\" />\n              </div>\n              <CardTitle class=\"text-sm font-medium\">Missing Values</CardTitle>\n            </div>\n            <Badge variant=\"success\" class=\"text-xs\">Clean</Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2 pt-1\">\n          <div class=\"flex items-baseline gap-1.5\">\n            <span class=\"text-foreground text-3xl font-bold tracking-tight tabular-nums\">0.4%</span>\n            <span class=\"text-muted-foreground text-xs font-medium\">Missing</span>\n          </div>\n          <div class=\"border-border/60 border-t pt-2 text-xs\">\n            <div class=\"text-muted-foreground flex items-center justify-between\">\n              <span>Total Null Cells:</span>\n              <span class=\"text-foreground font-medium tabular-nums\">593 / 2,669,220</span>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- 4. Duplicate Rows -->\n      <Card class=\"flex flex-col justify-between\">\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex items-center justify-between gap-2\">\n            <div class=\"flex items-center gap-2\">\n              <div class=\"bg-muted text-foreground flex size-7 items-center justify-center rounded-md border\">\n                <CheckCircle2 class=\"text-success size-3.5\" />\n              </div>\n              <CardTitle class=\"text-sm font-medium\">Duplicate Rows</CardTitle>\n            </div>\n            <Badge variant=\"success\" class=\"text-xs\">100% Unique</Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2 pt-1\">\n          <div class=\"flex items-baseline gap-1.5\">\n            <span class=\"text-foreground text-3xl font-bold tracking-tight tabular-nums\">0</span>\n            <span class=\"text-muted-foreground text-xs font-medium\">Duplicates</span>\n          </div>\n          <div class=\"border-border/60 border-t pt-2 text-xs\">\n            <div class=\"text-muted-foreground flex items-center justify-between\">\n              <span>Primary Key Integrity:</span>\n              <span class=\"text-foreground font-medium\">100.0% Valid</span>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- Filter & Toolbar Controls -->\n    <Card className=\"border-border bg-card shadow-xs\">\n      <CardContent class=\"p-3\">\n        <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n          <!-- Type Filter Tabs -->\n          <div class=\"flex flex-wrap items-center gap-1.5\">\n            <button\n              type=\"button\"\n              :class=\"[\n                'cursor-pointer rounded-md px-2.5 py-1 text-xs font-medium transition-colors',\n                activeTypeFilter === 'all'\n                  ? 'bg-primary text-primary-foreground shadow-xs'\n                  : 'bg-muted/60 text-muted-foreground hover:bg-muted hover:text-foreground',\n              ]\"\n              @click=\"activeTypeFilter = 'all'\"\n            >\n              All Types (18)\n            </button>\n            <button\n              type=\"button\"\n              :class=\"[\n                'cursor-pointer rounded-md px-2.5 py-1 text-xs font-medium transition-colors',\n                activeTypeFilter === 'numeric'\n                  ? 'bg-primary text-primary-foreground shadow-xs'\n                  : 'bg-muted/60 text-muted-foreground hover:bg-muted hover:text-foreground',\n              ]\"\n              @click=\"activeTypeFilter = 'numeric'\"\n            >\n              Numeric (10)\n            </button>\n            <button\n              type=\"button\"\n              :class=\"[\n                'cursor-pointer rounded-md px-2.5 py-1 text-xs font-medium transition-colors',\n                activeTypeFilter === 'categorical'\n                  ? 'bg-primary text-primary-foreground shadow-xs'\n                  : 'bg-muted/60 text-muted-foreground hover:bg-muted hover:text-foreground',\n              ]\"\n              @click=\"activeTypeFilter = 'categorical'\"\n            >\n              Categorical (6)\n            </button>\n            <button\n              type=\"button\"\n              :class=\"[\n                'cursor-pointer rounded-md px-2.5 py-1 text-xs font-medium transition-colors',\n                activeTypeFilter === 'boolean'\n                  ? 'bg-primary text-primary-foreground shadow-xs'\n                  : 'bg-muted/60 text-muted-foreground hover:bg-muted hover:text-foreground',\n              ]\"\n              @click=\"activeTypeFilter = 'boolean'\"\n            >\n              Boolean (2)\n            </button>\n          </div>\n\n          <!-- Search & View Mode Switcher -->\n          <div class=\"flex items-center gap-2\">\n            <div class=\"relative flex items-center\">\n              <Search class=\"text-muted-foreground pointer-events-none absolute left-2.5 size-3.5\" />\n              <input\n                v-model=\"searchQuery\"\n                type=\"text\"\n                placeholder=\"Filter column name...\"\n                class=\"border-border bg-background text-foreground focus-visible:border-ring focus-visible:ring-ring/50 h-8 w-44 rounded-md border pr-2.5 pl-8 text-xs focus-visible:ring-2 focus-visible:outline-none sm:w-56\"\n              />\n            </div>\n\n            <div class=\"bg-muted border-border flex items-center rounded-md border p-0.5 text-xs\">\n              <button\n                type=\"button\"\n                :class=\"[\n                  'cursor-pointer rounded px-2 py-1 transition-colors',\n                  viewMode === 'cards'\n                    ? 'bg-background text-foreground shadow-xs'\n                    : 'text-muted-foreground hover:text-foreground',\n                ]\"\n                aria-label=\"Card deep dive view\"\n                @click=\"viewMode = 'cards'\"\n              >\n                <LayoutGrid class=\"size-3.5\" />\n              </button>\n              <button\n                type=\"button\"\n                :class=\"[\n                  'cursor-pointer rounded px-2 py-1 transition-colors',\n                  viewMode === 'table'\n                    ? 'bg-background text-foreground shadow-xs'\n                    : 'text-muted-foreground hover:text-foreground',\n                ]\"\n                aria-label=\"Compact table view\"\n                @click=\"viewMode = 'table'\"\n              >\n                <TableIcon class=\"size-3.5\" />\n              </button>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Compact Table View -->\n    <Card v-if=\"viewMode === 'table'\">\n      <CardHeader class=\"pb-3\">\n        <div class=\"flex items-center justify-between\">\n          <div>\n            <CardTitle class=\"text-base font-semibold\">Dataset Schema & Profiling Matrix</CardTitle>\n            <CardDescription class=\"text-xs\">\n              Tabular view of all columns with inferred types, missingness, cardinality, and distribution summary.\n            </CardDescription>\n          </div>\n          <Badge variant=\"outline\" class=\"font-mono text-xs tabular-nums\">\n            {{ filteredColumns.length }} of 18 columns\n          </Badge>\n        </div>\n      </CardHeader>\n      <CardContent class=\"p-0\">\n        <div class=\"overflow-x-auto\">\n          <Table>\n            <TableHeader>\n              <TableRow>\n                <TableHead class=\"min-w-[180px]\">Column Name</TableHead>\n                <TableHead class=\"min-w-[140px]\">Data Type</TableHead>\n                <TableHead class=\"min-w-[110px]\">Missing Values</TableHead>\n                <TableHead class=\"min-w-[120px]\">Distinct Values</TableHead>\n                <TableHead class=\"min-w-[280px]\">Distribution / Quantiles</TableHead>\n                <TableHead class=\"text-right\">Health Status</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              <TableRow v-for=\"col in filteredColumns\" :key=\"col.name\">\n                <TableCell class=\"font-mono text-xs font-medium\">\n                  <div class=\"flex items-center gap-1.5\">\n                    <span>{{ col.name }}</span>\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:text-foreground cursor-pointer\"\n                      :aria-label=\"`Copy column ${col.name}`\"\n                      @click=\"handleCopy(col.name)\"\n                    >\n                      <Check v-if=\"copiedColumn === col.name\" class=\"text-success size-3\" />\n                      <Copy v-else class=\"size-3\" />\n                    </button>\n                  </div>\n                </TableCell>\n                <TableCell class=\"text-xs\">\n                  <Badge variant=\"secondary\" class=\"font-mono text-xs font-normal\">\n                    {{ col.type }}\n                  </Badge>\n                </TableCell>\n                <TableCell class=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                  {{ col.missing }}\n                </TableCell>\n                <TableCell class=\"text-foreground font-mono text-xs tabular-nums\">\n                  {{ col.distinct }}\n                </TableCell>\n                <TableCell class=\"text-muted-foreground text-xs\">\n                  {{ col.summary }}\n                </TableCell>\n                <TableCell class=\"text-right\">\n                  <Badge :variant=\"col.status.includes('Unique') ? 'default' : 'success'\" class=\"text-xs font-normal\">\n                    {{ col.status }}\n                  </Badge>\n                </TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- 4 Detailed Column Deep-Dive Cards -->\n    <div v-else class=\"space-y-6\">\n      <!-- 1. Column 1: monthly_spend_usd (Numeric Float64 + 10-bar SVG Histogram) -->\n      <Card v-if=\"activeTypeFilter === 'all' || activeTypeFilter === 'numeric'\" class=\"border-border bg-card shadow-xs\">\n        <CardHeader class=\"pb-3\">\n          <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n            <div class=\"space-y-1\">\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <div class=\"bg-info/10 text-info flex size-6 items-center justify-center rounded-md\">\n                  <Hash class=\"size-3.5\" />\n                </div>\n                <CardTitle class=\"font-mono text-base font-semibold\">\n                  {{ monthlySpendStats.name }}\n                </CardTitle>\n                <Badge variant=\"secondary\" class=\"font-mono text-xs font-normal\">\n                  {{ monthlySpendStats.type }}\n                </Badge>\n                <button\n                  type=\"button\"\n                  class=\"text-muted-foreground hover:text-foreground cursor-pointer\"\n                  :aria-label=\"`Copy ${monthlySpendStats.name}`\"\n                  @click=\"handleCopy(monthlySpendStats.name)\"\n                >\n                  <Check v-if=\"copiedColumn === monthlySpendStats.name\" class=\"text-success size-3\" />\n                  <Copy v-else class=\"size-3\" />\n                </button>\n              </div>\n              <CardDescription class=\"text-xs\">\n                Monthly billed subscription and add-on expenditure in USD. Right-skewed distribution with long tail.\n              </CardDescription>\n            </div>\n\n            <!-- Meta Badges -->\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <Badge variant=\"outline\" class=\"text-xs font-normal\">\n                Missing:\n                <span class=\"text-success text-success ml-1 font-semibold tabular-nums\">{{\n                  monthlySpendStats.missingPct\n                }}</span>\n              </Badge>\n              <Badge variant=\"outline\" class=\"text-xs font-normal\">\n                Distinct:\n                <span class=\"text-foreground ml-1 font-semibold tabular-nums\">{{\n                  monthlySpendStats.distinctCount\n                }}</span>\n              </Badge>\n              <Badge variant=\"outline\" class=\"text-xs font-normal\">\n                Memory:\n                <span class=\"text-foreground ml-1 font-semibold tabular-nums\">{{ monthlySpendStats.memory }}</span>\n              </Badge>\n            </div>\n          </div>\n        </CardHeader>\n\n        <CardContent class=\"space-y-6 pt-1\">\n          <!-- Summary Metrics Grid -->\n          <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6\">\n            <div class=\"border-border bg-muted/30 rounded-lg border p-2.5\">\n              <span class=\"text-muted-foreground text-xs\">Minimum</span>\n              <p class=\"text-foreground font-mono text-sm font-semibold tabular-nums\">{{ monthlySpendStats.min }}</p>\n            </div>\n            <div class=\"border-border bg-muted/30 rounded-lg border p-2.5\">\n              <span class=\"text-muted-foreground text-xs\">Mean (Avg)</span>\n              <p class=\"text-foreground font-mono text-sm font-semibold tabular-nums\">{{ monthlySpendStats.mean }}</p>\n            </div>\n            <div class=\"border-border bg-muted/30 rounded-lg border p-2.5\">\n              <span class=\"text-muted-foreground text-xs\">Median (P50)</span>\n              <p class=\"text-foreground font-mono text-sm font-semibold tabular-nums\">{{ monthlySpendStats.median }}</p>\n            </div>\n            <div class=\"border-border bg-muted/30 rounded-lg border p-2.5\">\n              <span class=\"text-muted-foreground text-xs\">Maximum</span>\n              <p class=\"text-foreground font-mono text-sm font-semibold tabular-nums\">{{ monthlySpendStats.max }}</p>\n            </div>\n            <div class=\"border-border bg-muted/30 rounded-lg border p-2.5\">\n              <span class=\"text-muted-foreground text-xs\">Std. Deviation</span>\n              <p class=\"text-foreground font-mono text-sm font-semibold tabular-nums\">{{ monthlySpendStats.stdDev }}</p>\n            </div>\n            <div class=\"border-border bg-muted/30 rounded-lg border p-2.5\">\n              <span class=\"text-muted-foreground text-xs\">Interquartile (IQR)</span>\n              <p class=\"text-foreground font-mono text-sm font-semibold tabular-nums\">{{ monthlySpendStats.iqr }}</p>\n            </div>\n          </div>\n\n          <!-- 10-Bar SVG Histogram -->\n          <div class=\"space-y-2\">\n            <div class=\"flex items-center justify-between text-xs\">\n              <div class=\"flex items-center gap-2\">\n                <BarChart2 class=\"text-primary size-3.5\" />\n                <span class=\"text-foreground font-medium\">10-Bin Distribution Frequency Histogram</span>\n              </div>\n              <span v-if=\"hoveredHistBin !== null\" class=\"text-foreground font-mono tabular-nums\">\n                {{ histogramBins[hoveredHistBin].bin }}:\n                <strong class=\"text-primary\">{{ histogramBins[hoveredHistBin].count.toLocaleString() }} rows</strong>\n                ({{ histogramBins[hoveredHistBin].pct }}%)\n              </span>\n              <span v-else class=\"text-muted-foreground\">Hover bar to inspect bin interval</span>\n            </div>\n\n            <!-- SVG Histogram Visual -->\n            <div class=\"border-border bg-muted/20 w-full overflow-x-auto rounded-lg border p-4\">\n              <div class=\"h-44 w-full max-w-[420px] min-w-full\">\n                <svg\n                  class=\"h-full w-full overflow-visible\"\n                  viewBox=\"0 0 520 140\"\n                  preserveAspectRatio=\"none\"\n                  role=\"img\"\n                  aria-label=\"10-bar distribution histogram for monthly spend in USD\"\n                >\n                  <!-- Background Grid Lines -->\n                  <line\n                    x1=\"0\"\n                    y1=\"20\"\n                    x2=\"520\"\n                    y2=\"20\"\n                    stroke=\"currentColor\"\n                    class=\"text-border/40\"\n                    stroke-dasharray=\"3 3\"\n                  />\n                  <line\n                    x1=\"0\"\n                    y1=\"65\"\n                    x2=\"520\"\n                    y2=\"65\"\n                    stroke=\"currentColor\"\n                    class=\"text-border/40\"\n                    stroke-dasharray=\"3 3\"\n                  />\n                  <line x1=\"0\" y1=\"110\" x2=\"520\" y2=\"110\" stroke=\"currentColor\" class=\"text-border\" />\n\n                  <!-- 10 Bars -->\n                  <g v-for=\"(bin, idx) in histogramBins\" :key=\"idx\">\n                    <!-- Bar rect -->\n                    <rect\n                      :x=\"idx * 52 + 6\"\n                      :y=\"110 - bin.height\"\n                      width=\"40\"\n                      :height=\"bin.height\"\n                      rx=\"3\"\n                      :class=\"[\n                        'cursor-pointer transition-colors duration-150',\n                        hoveredHistBin === idx\n                          ? 'fill-primary text-primary'\n                          : 'fill-primary/75 hover:fill-primary text-primary/75',\n                      ]\"\n                      @mouseenter=\"hoveredHistBin = idx\"\n                      @mouseleave=\"hoveredHistBin = null\"\n                    />\n\n                    <!-- Percentage Label on top of high bars -->\n                    <text\n                      v-if=\"bin.pct >= 5\"\n                      :x=\"idx * 52 + 26\"\n                      :y=\"104 - bin.height\"\n                      text-anchor=\"middle\"\n                      class=\"fill-foreground font-mono text-xs font-medium select-none\"\n                    >\n                      {{ bin.pct }}%\n                    </text>\n                  </g>\n                </svg>\n              </div>\n\n              <!-- Bin Axis Ticks -->\n              <div class=\"text-muted-foreground mt-2 grid grid-cols-5 text-center font-mono text-xs tabular-nums\">\n                <span class=\"text-left\">$0.00</span>\n                <span>$490</span>\n                <span>$980</span>\n                <span>$1,715</span>\n                <span class=\"text-right\">$2,450</span>\n              </div>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- 2. Column 2: subscription_tier (Categorical + Horizontal Distribution Bars) -->\n      <Card\n        v-if=\"activeTypeFilter === 'all' || activeTypeFilter === 'categorical'\"\n        class=\"border-border bg-card shadow-xs\"\n      >\n        <CardHeader class=\"pb-3\">\n          <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n            <div class=\"space-y-1\">\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <div class=\"bg-chart-1/10 text-chart-1 flex size-6 items-center justify-center rounded-md\">\n                  <Tag class=\"size-3.5\" />\n                </div>\n                <CardTitle class=\"font-mono text-base font-semibold\">\n                  {{ subscriptionTierStats.name }}\n                </CardTitle>\n                <Badge variant=\"secondary\" class=\"font-mono text-xs font-normal\">\n                  {{ subscriptionTierStats.type }}\n                </Badge>\n                <button\n                  type=\"button\"\n                  class=\"text-muted-foreground hover:text-foreground cursor-pointer\"\n                  :aria-label=\"`Copy ${subscriptionTierStats.name}`\"\n                  @click=\"handleCopy(subscriptionTierStats.name)\"\n                >\n                  <Check v-if=\"copiedColumn === subscriptionTierStats.name\" class=\"text-success size-3\" />\n                  <Copy v-else class=\"size-3\" />\n                </button>\n              </div>\n              <CardDescription class=\"text-xs\">\n                Active customer plan classification tier. Clean categorical distribution across 4 discrete levels.\n              </CardDescription>\n            </div>\n\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <Badge variant=\"outline\" class=\"text-xs font-normal\">\n                Missing:\n                <span class=\"text-success text-success ml-1 font-semibold tabular-nums\">{{\n                  subscriptionTierStats.missingPct\n                }}</span>\n              </Badge>\n              <Badge variant=\"outline\" class=\"text-xs font-normal\">\n                Distinct:\n                <span class=\"text-foreground ml-1 font-semibold tabular-nums\"\n                  >{{ subscriptionTierStats.distinctCount }} values</span\n                >\n              </Badge>\n              <Badge variant=\"outline\" class=\"text-xs font-normal\">\n                Memory:\n                <span class=\"text-foreground ml-1 font-semibold tabular-nums\">{{ subscriptionTierStats.memory }}</span>\n              </Badge>\n            </div>\n          </div>\n        </CardHeader>\n\n        <CardContent class=\"space-y-6 pt-1\">\n          <!-- Segmented Composite Stacked Bar -->\n          <div class=\"space-y-2\">\n            <div class=\"flex items-center justify-between text-xs\">\n              <span class=\"text-foreground font-medium\">Category Proportions</span>\n              <span class=\"text-muted-foreground font-mono tabular-nums\">148,290 total instances</span>\n            </div>\n\n            <!-- Stacked bar -->\n            <div class=\"border-border flex h-4 w-full overflow-hidden rounded-full border\">\n              <div\n                v-for=\"tier in subscriptionTiers\"\n                :key=\"tier.name\"\n                :class=\"tier.colorClass\"\n                :style=\"{ width: `${tier.pct}%` }\"\n                :title=\"`${tier.name}: ${tier.pct}% (${tier.count.toLocaleString()} rows)`\"\n              />\n            </div>\n          </div>\n\n          <!-- Detailed Breakdown Rows -->\n          <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4\">\n            <div\n              v-for=\"tier in subscriptionTiers\"\n              :key=\"tier.name\"\n              class=\"border-border bg-muted/20 flex flex-col justify-between rounded-lg border p-3.5\"\n            >\n              <div class=\"space-y-1.5\">\n                <div class=\"flex items-center justify-between\">\n                  <span class=\"text-foreground font-mono text-xs font-semibold\">{{ tier.name }}</span>\n                  <Badge variant=\"outline\" :class=\"cn('font-mono text-xs font-medium tabular-nums', tier.badgeClass)\">\n                    {{ tier.pct.toFixed(1) }}%\n                  </Badge>\n                </div>\n                <p class=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                  {{ tier.count.toLocaleString() }} rows\n                </p>\n              </div>\n\n              <div class=\"mt-3\">\n                <div class=\"bg-muted relative h-1.5 w-full overflow-hidden rounded-full\">\n                  <div :class=\"cn('h-full rounded-full', tier.colorClass)\" :style=\"{ width: `${tier.pct}%` }\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- 3. Column 3: account_age_days (Numeric Int32 + Quantiles Box Plot) -->\n      <Card v-if=\"activeTypeFilter === 'all' || activeTypeFilter === 'numeric'\" class=\"border-border bg-card shadow-xs\">\n        <CardHeader class=\"pb-3\">\n          <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n            <div class=\"space-y-1\">\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <div class=\"bg-info/10 text-info flex size-6 items-center justify-center rounded-md\">\n                  <Hash class=\"size-3.5\" />\n                </div>\n                <CardTitle class=\"font-mono text-base font-semibold\">\n                  {{ accountAgeStats.name }}\n                </CardTitle>\n                <Badge variant=\"secondary\" class=\"font-mono text-xs font-normal\">\n                  {{ accountAgeStats.type }}\n                </Badge>\n                <button\n                  type=\"button\"\n                  class=\"text-muted-foreground hover:text-foreground cursor-pointer\"\n                  :aria-label=\"`Copy ${accountAgeStats.name}`\"\n                  @click=\"handleCopy(accountAgeStats.name)\"\n                >\n                  <Check v-if=\"copiedColumn === accountAgeStats.name\" class=\"text-success size-3\" />\n                  <Copy v-else class=\"size-3\" />\n                </button>\n              </div>\n              <CardDescription class=\"text-xs\">\n                Total account tenure in days since initial signup. Box plot shows median at 180d with Q1-Q3\n                interquartile band.\n              </CardDescription>\n            </div>\n\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <Badge variant=\"outline\" class=\"text-xs font-normal\">\n                Missing:\n                <span class=\"text-success text-success ml-1 font-semibold tabular-nums\"\n                  >{{ accountAgeStats.missingPct }} (42 rows)</span\n                >\n              </Badge>\n              <Badge variant=\"outline\" class=\"text-xs font-normal\">\n                Distinct:\n                <span class=\"text-foreground ml-1 font-semibold tabular-nums\">{{ accountAgeStats.distinctCount }}</span>\n              </Badge>\n              <Badge variant=\"outline\" class=\"text-xs font-normal\">\n                Memory:\n                <span class=\"text-foreground ml-1 font-semibold tabular-nums\">{{ accountAgeStats.memory }}</span>\n              </Badge>\n            </div>\n          </div>\n        </CardHeader>\n\n        <CardContent class=\"space-y-6 pt-1\">\n          <!-- Quantile Stats Grid -->\n          <div class=\"grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-7\">\n            <div class=\"border-border bg-muted/30 rounded-lg border p-2.5 text-center\">\n              <span class=\"text-muted-foreground text-xs\">Min (0%)</span>\n              <p class=\"text-foreground font-mono text-sm font-semibold tabular-nums\">{{ accountAgeStats.min }}</p>\n            </div>\n            <div class=\"border-border bg-muted/30 rounded-lg border p-2.5 text-center\">\n              <span class=\"text-muted-foreground text-xs\">Q1 (P25)</span>\n              <p class=\"text-foreground font-mono text-sm font-semibold tabular-nums\">{{ accountAgeStats.p25 }}</p>\n            </div>\n            <div class=\"border-primary/40 bg-primary/5 rounded-lg border p-2.5 text-center shadow-xs\">\n              <span class=\"text-primary text-xs font-medium\">Median (P50)</span>\n              <p class=\"text-primary font-mono text-sm font-bold tabular-nums\">{{ accountAgeStats.p50 }}</p>\n            </div>\n            <div class=\"border-border bg-muted/30 rounded-lg border p-2.5 text-center\">\n              <span class=\"text-muted-foreground text-xs\">Q3 (P75)</span>\n              <p class=\"text-foreground font-mono text-sm font-semibold tabular-nums\">{{ accountAgeStats.p75 }}</p>\n            </div>\n            <div class=\"border-border bg-muted/30 rounded-lg border p-2.5 text-center\">\n              <span class=\"text-muted-foreground text-xs\">P95</span>\n              <p class=\"text-foreground font-mono text-sm font-semibold tabular-nums\">{{ accountAgeStats.p95 }}</p>\n            </div>\n            <div class=\"border-border bg-muted/30 rounded-lg border p-2.5 text-center\">\n              <span class=\"text-muted-foreground text-xs\">P99</span>\n              <p class=\"text-foreground font-mono text-sm font-semibold tabular-nums\">{{ accountAgeStats.p99 }}</p>\n            </div>\n            <div class=\"border-border bg-muted/30 rounded-lg border p-2.5 text-center\">\n              <span class=\"text-muted-foreground text-xs\">Max</span>\n              <p class=\"text-foreground font-mono text-sm font-semibold tabular-nums\">{{ accountAgeStats.max }}</p>\n            </div>\n          </div>\n\n          <!-- Box Plot SVG Representation -->\n          <div class=\"space-y-2\">\n            <div class=\"flex items-center justify-between text-xs\">\n              <span class=\"text-foreground font-medium\">Quantile Box & Whisker Plot</span>\n              <span class=\"text-muted-foreground font-mono tabular-nums\">IQR = 323 days (P75 - P25)</span>\n            </div>\n\n            <div class=\"border-border bg-muted/20 w-full overflow-x-auto rounded-lg border p-4\">\n              <div class=\"h-28 w-full max-w-[420px] min-w-full\">\n                <svg\n                  class=\"h-full w-full overflow-visible\"\n                  viewBox=\"0 0 500 90\"\n                  preserveAspectRatio=\"none\"\n                  role=\"img\"\n                  aria-label=\"Box plot visualization of account age quantiles\"\n                >\n                  <!-- Whisker line (Min 1d to Whisker Max 720d) -->\n                  <!-- Scale: 0d -> x=30, 900d -> x=470 (width=440, ratio=440/900 = 0.4888) -->\n                  <!-- Min 1d: x=30.5 -->\n                  <!-- P25 42d: x=50.5 -->\n                  <!-- P50 180d: x=118 -->\n                  <!-- P75 365d: x=208.4 -->\n                  <!-- P99 720d: x=382 -->\n                  <!-- Max 850d: x=445.5 -->\n\n                  <!-- Axis Baseline -->\n                  <line x1=\"30\" y1=\"72\" x2=\"470\" y2=\"72\" stroke=\"currentColor\" class=\"text-border\" />\n\n                  <!-- Left Whisker: Min to Q1 -->\n                  <line\n                    x1=\"31\"\n                    y1=\"36\"\n                    x2=\"51\"\n                    y2=\"36\"\n                    stroke=\"currentColor\"\n                    class=\"text-foreground\"\n                    stroke-width=\"2\"\n                  />\n                  <!-- Min Cap -->\n                  <line\n                    x1=\"31\"\n                    y1=\"24\"\n                    x2=\"31\"\n                    y2=\"48\"\n                    stroke=\"currentColor\"\n                    class=\"text-foreground\"\n                    stroke-width=\"2\"\n                  />\n\n                  <!-- Right Whisker: Q3 to P99 -->\n                  <line\n                    x1=\"208\"\n                    y1=\"36\"\n                    x2=\"382\"\n                    y2=\"36\"\n                    stroke=\"currentColor\"\n                    class=\"text-foreground\"\n                    stroke-width=\"2\"\n                  />\n                  <!-- P99 Cap -->\n                  <line\n                    x1=\"382\"\n                    y1=\"24\"\n                    x2=\"382\"\n                    y2=\"48\"\n                    stroke=\"currentColor\"\n                    class=\"text-foreground\"\n                    stroke-width=\"2\"\n                  />\n\n                  <!-- Interquartile Box (Q1 to Q3) -->\n                  <rect\n                    x=\"51\"\n                    y=\"18\"\n                    width=\"157\"\n                    height=\"36\"\n                    rx=\"3\"\n                    class=\"fill-primary/20 stroke-primary\"\n                    stroke-width=\"2\"\n                  />\n\n                  <!-- Median (P50) Line -->\n                  <line x1=\"118\" y1=\"18\" x2=\"118\" y2=\"54\" class=\"stroke-primary\" stroke-width=\"3\" />\n\n                  <!-- Outlier Points (P99 to Max: 780d, 820d, 850d) -->\n                  <circle cx=\"411\" cy=\"36\" r=\"3.5\" class=\"fill-muted-foreground/60 stroke-foreground\" />\n                  <circle cx=\"431\" cy=\"36\" r=\"3.5\" class=\"fill-muted-foreground/60 stroke-foreground\" />\n                  <circle cx=\"446\" cy=\"36\" r=\"3.5\" class=\"fill-muted-foreground/60 stroke-foreground\" />\n\n                  <!-- Tick Labels on Axis -->\n                  <text x=\"31\" y=\"86\" text-anchor=\"middle\" class=\"fill-muted-foreground font-mono text-xs\">\n                    1d (Min)\n                  </text>\n                  <text x=\"51\" y=\"86\" text-anchor=\"middle\" class=\"fill-muted-foreground font-mono text-xs\">42d</text>\n                  <text x=\"118\" y=\"86\" text-anchor=\"middle\" class=\"fill-primary font-mono text-xs font-bold\">\n                    180d (Med)\n                  </text>\n                  <text x=\"208\" y=\"86\" text-anchor=\"middle\" class=\"fill-muted-foreground font-mono text-xs\">365d</text>\n                  <text x=\"382\" y=\"86\" text-anchor=\"middle\" class=\"fill-muted-foreground font-mono text-xs\">\n                    720d (P99)\n                  </text>\n                  <text x=\"446\" y=\"86\" text-anchor=\"middle\" class=\"fill-muted-foreground font-mono text-xs\">\n                    850d (Max)\n                  </text>\n                </svg>\n              </div>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- 4. Column 4: has_cancelled (Boolean) -->\n      <Card v-if=\"activeTypeFilter === 'all' || activeTypeFilter === 'boolean'\" class=\"border-border bg-card shadow-xs\">\n        <CardHeader class=\"pb-3\">\n          <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n            <div class=\"space-y-1\">\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <div class=\"bg-warning/10 text-warning flex size-6 items-center justify-center rounded-md\">\n                  <Binary class=\"size-3.5\" />\n                </div>\n                <CardTitle class=\"font-mono text-base font-semibold\">\n                  {{ hasCancelledStats.name }}\n                </CardTitle>\n                <Badge variant=\"secondary\" class=\"font-mono text-xs font-normal\">\n                  {{ hasCancelledStats.type }}\n                </Badge>\n                <button\n                  type=\"button\"\n                  class=\"text-muted-foreground hover:text-foreground cursor-pointer\"\n                  :aria-label=\"`Copy ${hasCancelledStats.name}`\"\n                  @click=\"handleCopy(hasCancelledStats.name)\"\n                >\n                  <Check v-if=\"copiedColumn === hasCancelledStats.name\" class=\"text-success size-3\" />\n                  <Copy v-else class=\"size-3\" />\n                </button>\n              </div>\n              <CardDescription class=\"text-xs\">\n                Binary churn indicator flag. 14.2% positive cancellation rate against 85.8% retained base.\n              </CardDescription>\n            </div>\n\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <Badge variant=\"outline\" class=\"text-xs font-normal\">\n                Missing:\n                <span class=\"text-success text-success ml-1 font-semibold tabular-nums\">{{\n                  hasCancelledStats.missingPct\n                }}</span>\n              </Badge>\n              <Badge variant=\"outline\" class=\"text-xs font-normal\">\n                Distinct:\n                <span class=\"text-foreground ml-1 font-semibold tabular-nums\"\n                  >{{ hasCancelledStats.distinctCount }} values</span\n                >\n              </Badge>\n              <Badge variant=\"outline\" class=\"text-xs font-normal\">\n                Memory:\n                <span class=\"text-foreground ml-1 font-semibold tabular-nums\">{{ hasCancelledStats.memory }}</span>\n              </Badge>\n            </div>\n          </div>\n        </CardHeader>\n\n        <CardContent class=\"space-y-6 pt-1\">\n          <!-- Boolean Split Bar -->\n          <div class=\"space-y-2\">\n            <div class=\"flex items-center justify-between text-xs\">\n              <span class=\"text-foreground font-medium\">Boolean Ratio Distribution</span>\n              <span class=\"text-muted-foreground font-mono tabular-nums\">Class Imbalance: 1 : 6.04</span>\n            </div>\n\n            <!-- Two-Tone Split Bar -->\n            <div class=\"border-border flex h-4 w-full overflow-hidden rounded-full border\">\n              <div\n                class=\"bg-success transition-colors\"\n                :style=\"{ width: `${hasCancelledStats.falsePct}%` }\"\n                :title=\"`False: ${hasCancelledStats.falsePct}% (${hasCancelledStats.falseCount.toLocaleString()} rows)`\"\n              />\n              <div\n                class=\"bg-destructive transition-colors\"\n                :style=\"{ width: `${hasCancelledStats.truePct}%` }\"\n                :title=\"`True: ${hasCancelledStats.truePct}% (${hasCancelledStats.trueCount.toLocaleString()} rows)`\"\n              />\n            </div>\n          </div>\n\n          <!-- Value Breakdown Cards -->\n          <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n            <!-- False / Active -->\n            <div class=\"border-border bg-muted/20 flex flex-col justify-between rounded-lg border p-4\">\n              <div class=\"space-y-1.5\">\n                <div class=\"flex items-center justify-between\">\n                  <div class=\"flex items-center gap-2\">\n                    <span class=\"bg-success size-2 rounded-full\" />\n                    <span class=\"text-foreground font-mono text-xs font-semibold\">False (Active / Retained)</span>\n                  </div>\n                  <Badge\n                    variant=\"outline\"\n                    class=\"border-success/30 text-success text-success font-mono text-xs font-medium tabular-nums\"\n                  >\n                    {{ hasCancelledStats.falsePct }}%\n                  </Badge>\n                </div>\n                <p class=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                  {{ hasCancelledStats.falseCount.toLocaleString() }} instances\n                </p>\n              </div>\n              <div class=\"mt-3\">\n                <Progress\n                  :model-value=\"hasCancelledStats.falsePct\"\n                  class=\"[&_[data-slot=progress-indicator]]:bg-success h-1.5\"\n                />\n              </div>\n            </div>\n\n            <!-- True / Cancelled -->\n            <div class=\"border-border bg-muted/20 flex flex-col justify-between rounded-lg border p-4\">\n              <div class=\"space-y-1.5\">\n                <div class=\"flex items-center justify-between\">\n                  <div class=\"flex items-center gap-2\">\n                    <span class=\"bg-destructive size-2 rounded-full\" />\n                    <span class=\"text-foreground font-mono text-xs font-semibold\">True (Cancelled / Churned)</span>\n                  </div>\n                  <Badge\n                    variant=\"outline\"\n                    class=\"border-destructive/30 text-destructive text-destructive font-mono text-xs font-medium tabular-nums\"\n                  >\n                    {{ hasCancelledStats.truePct }}%\n                  </Badge>\n                </div>\n                <p class=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                  {{ hasCancelledStats.trueCount.toLocaleString() }} instances\n                </p>\n              </div>\n              <div class=\"mt-3\">\n                <Progress\n                  :model-value=\"hasCancelledStats.truePct\"\n                  class=\"[&_[data-slot=progress-indicator]]:bg-destructive h-1.5\"\n                />\n              </div>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/ColumnProfilingSummary.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/progress.json",
    "https://uipkge.dev/r/vue/table.json"
  ],
  "description": "Pandas Profiling and ydata style exploratory data analysis (EDA) column profiling summary with dataset metrics, distribution histograms, quantile box plots, and categorical frequency breakdowns.",
  "categories": [
    "devops",
    "dashboard",
    "analytics",
    "data"
  ]
}