{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sql-query-notebook",
  "title": "Sql Query Notebook",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/sql-query-notebook/SqlQueryNotebook.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n  BarChart3,\n  Check,\n  Clock,\n  Copy,\n  Database,\n  Download,\n  FileCode2,\n  FileText,\n  Layers,\n  Loader2,\n  Play,\n  Plus,\n  Table2,\n  Target,\n  Terminal,\n  Trash2,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport interface CohortRow {\n  signup_cohort: string\n  cohort_label: string\n  total_customers: number\n  avg_mrr: number\n  cohort_ltv: number\n  expansion_rate: string\n  retention_score: number\n}\n\nexport interface SqlQueryNotebookProps {\n  className?: string\n}\n\nconst initialCohortResults: CohortRow[] = [\n  {\n    signup_cohort: '2026-06-01',\n    cohort_label: 'Jun 2026',\n    total_customers: 4820,\n    avg_mrr: 248.5,\n    cohort_ltv: 1428500.0,\n    expansion_rate: '+18.4%',\n    retention_score: 94,\n  },\n  {\n    signup_cohort: '2026-05-01',\n    cohort_label: 'May 2026',\n    total_customers: 3940,\n    avg_mrr: 232.1,\n    cohort_ltv: 1148200.0,\n    expansion_rate: '+14.1%',\n    retention_score: 89,\n  },\n  {\n    signup_cohort: '2026-04-01',\n    cohort_label: 'Apr 2026',\n    total_customers: 3110,\n    avg_mrr: 219.8,\n    cohort_ltv: 924100.0,\n    expansion_rate: '+11.8%',\n    retention_score: 85,\n  },\n  {\n    signup_cohort: '2026-03-01',\n    cohort_label: 'Mar 2026',\n    total_customers: 2420,\n    avg_mrr: 198.4,\n    cohort_ltv: 682900.0,\n    expansion_rate: '+8.6%',\n    retention_score: 81,\n  },\n]\n\nconst sqlQuery = `SELECT \n  DATE_TRUNC('month', created_at) AS signup_cohort,\n  COUNT(DISTINCT customer_id) AS total_customers,\n  ROUND(AVG(mrr), 2) AS avg_mrr,\n  ROUND(SUM(lifetime_value), 2) AS cohort_ltv\nFROM analytics.fct_subscriptions\nWHERE created_at >= '2026-01-01'\nGROUP BY 1 ORDER BY 1 DESC;`\n\nfunction highlightSqlLine(line: string): string {\n  if (!line.trim()) return '&nbsp;'\n\n  const escaped = line.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')\n\n  // Single line comments\n  if (/^\\s*--/.test(escaped)) {\n    return `<span class=\"text-zinc-500 italic\">${escaped}</span>`\n  }\n\n  // Every emitted <span> is parked behind a letter-only placeholder so later\n  // passes cannot match inside the markup they already produced.\n  const parked: string[] = []\n  const park = (html: string) => {\n    const key = String(parked.length)\n      .split('')\n      .map((d) => String.fromCharCode(97 + Number(d)))\n      .join('')\n    parked.push(html)\n    return `\\u0000${key}\\u0000`\n  }\n\n  let out = escaped\n\n  // Strings (Emerald)\n  out = out.replace(/(['\"])(?:(?=(\\\\?))\\2.)*?\\1/g, (m) => park(`<span class=\"text-success font-normal\">${m}</span>`))\n\n  // SQL Functions (Sky / Blue)\n  out = out.replace(\n    /\\b(DATE_TRUNC|COUNT|DISTINCT|ROUND|AVG|SUM|MIN|MAX|COALESCE|CAST|CONCAT|NOW|CURRENT_TIMESTAMP)\\b/g,\n    (m) => park(`<span class=\"text-info font-semibold\">${m}</span>`),\n  )\n\n  // SQL Keywords (Tokenized)\n  out = out.replace(\n    /\\b(SELECT|FROM|WHERE|GROUP BY|ORDER BY|GROUP|ORDER|BY|DESC|ASC|AS|AND|OR|NOT|IN|ON|JOIN|LEFT|RIGHT|INNER|OUTER|LIMIT|HAVING|UNION|ALL|CASE|WHEN|THEN|ELSE|END|WITH)\\b/g,\n    (m) => park(`<span class=\"text-chart-1 font-semibold\">${m}</span>`),\n  )\n\n  // Numbers (Amber)\n  out = out.replace(/\\b(\\d+(\\.\\d+)?)\\b/g, (m) => park(`<span class=\"text-warning font-mono\">${m}</span>`))\n\n  // Restore every parked span\n  return out.replace(/\\u0000([a-j]+)\\u0000/g, (_, key: string) => {\n    const idx = Number(\n      key\n        .split('')\n        .map((c: string) => String(c.charCodeAt(0) - 97))\n        .join(''),\n    )\n    return parked[idx] ?? ''\n  })\n}\n\nexport function SqlQueryNotebook({ className }: SqlQueryNotebookProps) {\n  const [isRunningAll, setIsRunningAll] = React.useState(false)\n  const [isCellRunning, setIsCellRunning] = React.useState(false)\n  const [lastSaved, setLastSaved] = React.useState('Autosaved 1m ago')\n  const [activeCell, setActiveCell] = React.useState<'doc' | 'sql' | 'extra'>('sql')\n  const [activeResultTab, setActiveResultTab] = React.useState<'table' | 'chart'>('table')\n  const [copiedSql, setCopiedSql] = React.useState(false)\n  const [copiedCsv, setCopiedCsv] = React.useState(false)\n  const [hoveredSqlLine, setHoveredSqlLine] = React.useState<number | null>(null)\n  const [executionTime, setExecutionTime] = React.useState('1.24s')\n  const [rowCount] = React.useState(14290)\n  const [lastExecutionTimestamp, setLastExecutionTimestamp] = React.useState('14:28:40')\n  const [showMarkdownEditor, setShowMarkdownEditor] = React.useState(false)\n  const [showExtraCell, setShowExtraCell] = React.useState(false)\n  const [extraCellRunning, setExtraCellRunning] = React.useState(false)\n  const [markdownContent, setMarkdownContent] = React.useState(\n    '# Cohort Retention & Expansion Query: Grouping by monthly signup cohort to evaluate customer lifetime value (LTV) trajectory and expansion MRR across enterprise tiers. Filtered for 2026 activations from the primary subscriptions warehouse.',\n  )\n\n  const sqlLines = React.useMemo(() => sqlQuery.split('\\n'), [])\n\n  const totalCustomersSum = React.useMemo(() => {\n    return initialCohortResults.reduce((acc, r) => acc + r.total_customers, 0)\n  }, [])\n\n  const totalLtvSum = React.useMemo(() => {\n    return initialCohortResults.reduce((acc, r) => acc + r.cohort_ltv, 0)\n  }, [])\n\n  const maxCohortLtv = React.useMemo(() => {\n    return Math.max(...initialCohortResults.map((r) => r.cohort_ltv))\n  }, [])\n\n  const handleRunAll = React.useCallback(() => {\n    if (isRunningAll) return\n    setIsRunningAll(true)\n    setIsCellRunning(true)\n\n    setTimeout(() => {\n      setIsCellRunning(false)\n      setIsRunningAll(false)\n      const now = new Date()\n      setLastExecutionTimestamp(now.toTimeString().split(' ')[0])\n      setExecutionTime((1.18 + Math.random() * 0.15).toFixed(2) + 's')\n      setLastSaved('Saved just now')\n    }, 620)\n  }, [isRunningAll])\n\n  const handleRunCell = React.useCallback(() => {\n    if (isCellRunning) return\n    setIsCellRunning(true)\n\n    setTimeout(() => {\n      setIsCellRunning(false)\n      const now = new Date()\n      setLastExecutionTimestamp(now.toTimeString().split(' ')[0])\n      setExecutionTime((1.15 + Math.random() * 0.2).toFixed(2) + 's')\n    }, 480)\n  }, [isCellRunning])\n\n  const handleCopySql = React.useCallback(() => {\n    if (typeof navigator !== 'undefined' && navigator.clipboard) {\n      navigator.clipboard.writeText(sqlQuery)\n      setCopiedSql(true)\n      setTimeout(() => {\n        setCopiedSql(false)\n      }, 2000)\n    }\n  }, [])\n\n  const handleExportCsv = React.useCallback(() => {\n    const csvHeaders = 'signup_cohort,total_customers,avg_mrr,cohort_ltv\\n'\n    const csvRows = initialCohortResults\n      .map((r) => `${r.signup_cohort},${r.total_customers},${r.avg_mrr},${r.cohort_ltv}`)\n      .join('\\n')\n    const csvContent = csvHeaders + csvRows\n\n    if (typeof navigator !== 'undefined' && navigator.clipboard) {\n      navigator.clipboard.writeText(csvContent)\n      setCopiedCsv(true)\n      setTimeout(() => {\n        setCopiedCsv(false)\n      }, 2000)\n    }\n  }, [])\n\n  const handleAddCell = React.useCallback(() => {\n    setShowExtraCell(true)\n    setActiveCell('extra')\n  }, [])\n\n  const handleRunExtraCell = React.useCallback(() => {\n    setExtraCellRunning(true)\n    setTimeout(() => {\n      setExtraCellRunning(false)\n    }, 450)\n  }, [])\n\n  React.useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {\n        e.preventDefault()\n        handleRunAll()\n      }\n    }\n\n    window.addEventListener('keydown', handleKeyDown)\n    return () => window.removeEventListener('keydown', handleKeyDown)\n  }, [handleRunAll])\n\n  return (\n    <div\n      data-slot=\"sql-query-notebook\"\n      className={cn(\n        'bg-background text-foreground border-border w-full overflow-hidden rounded-xl border shadow-xs',\n        className,\n      )}\n    >\n      {/* Top Notebook Header */}\n      <header className=\"border-border bg-card/70 border-b px-4 py-3.5 sm:px-6\">\n        <div className=\"flex flex-col gap-3.5 lg:flex-row lg:items-center lg:justify-between\">\n          {/* Notebook Identity & Metadata */}\n          <div className=\"flex items-start gap-3\">\n            <div className=\"bg-primary/10 text-primary mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-lg\">\n              <FileCode2 className=\"size-4.5\" />\n            </div>\n            <div className=\"space-y-1\">\n              <div className=\"flex flex-wrap items-center gap-2\">\n                <h1 className=\"text-foreground text-sm font-semibold tracking-tight sm:text-base\">\n                  Customer Churn &amp; Cohort Analysis · Q3 2026\n                </h1>\n                <Badge variant=\"secondary\" className=\"font-mono text-xs\">\n                  v2.4\n                </Badge>\n              </div>\n\n              <div className=\"text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1 text-xs\">\n                <div className=\"flex items-center gap-1.5\">\n                  <span className=\"relative flex size-2\">\n                    <span className=\"bg-success absolute inline-flex h-full w-full rounded-full opacity-75\" />\n                    <span className=\"bg-success relative inline-flex size-2 rounded-full\" />\n                  </span>\n                  <span className=\"text-foreground/90 font-medium\">Snowflake Production Warehouse</span>\n                  <span className=\"text-muted-foreground\">· Large Cluster</span>\n                </div>\n                <div className=\"flex items-center gap-1\">\n                  <Clock className=\"size-3.5 opacity-70\" />\n                  <span>{lastSaved}</span>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          {/* Global Action Controls */}\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"h-8 gap-1.5 text-xs shadow-none\"\n              title=\"Append SQL query cell\"\n              onClick={handleAddCell}\n            >\n              <Plus className=\"size-3.5\" />\n              <span>Add SQL Cell</span>\n            </Button>\n\n            <Button\n              size=\"sm\"\n              className=\"h-8 gap-1.5 text-xs font-medium\"\n              disabled={isRunningAll}\n              onClick={handleRunAll}\n            >\n              {isRunningAll ? (\n                <Loader2 className=\"size-3.5 animate-spin\" />\n              ) : (\n                <Play className=\"size-3.5 fill-current\" />\n              )}\n              <span>{isRunningAll ? 'Running Notebook...' : 'Run All Cells'}</span>\n              <kbd className=\"border-primary-foreground/30 bg-primary-foreground/10 hidden rounded border px-1 font-mono text-xs sm:inline\">\n                ⌘↵\n              </kbd>\n            </Button>\n          </div>\n        </div>\n      </header>\n\n      {/* Notebook Content Stream Container */}\n      <main className=\"space-y-4 p-4 sm:p-6\">\n        {/* CELL 1: Markdown Documentation Cell */}\n        <Card\n          className={cn(\n            'border-border relative overflow-hidden shadow-none transition-colors',\n            activeCell === 'doc' ? 'ring-primary/20 ring-2' : '',\n          )}\n          onClick={() => setActiveCell('doc')}\n        >\n          {/* Cell Left Focus Strip */}\n          <div\n            className={cn(\n              'absolute top-0 bottom-0 left-0 w-1 transition-colors',\n              activeCell === 'doc' ? 'bg-primary' : 'bg-transparent',\n            )}\n          />\n\n          {/* Cell Top Toolbar */}\n          <div className=\"border-border bg-muted/30 flex items-center justify-between border-b px-4 py-2\">\n            <div className=\"flex items-center gap-2\">\n              <Badge variant=\"outline\" className=\"font-mono text-xs font-semibold uppercase\">\n                [MD] Doc\n              </Badge>\n              <span className=\"text-muted-foreground text-xs\">Methodology &amp; Hypothesis</span>\n            </div>\n\n            <div className=\"flex items-center gap-2\">\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"text-muted-foreground hover:text-foreground h-6 px-2 text-xs\"\n                onClick={(e) => {\n                  e.stopPropagation()\n                  setShowMarkdownEditor(!showMarkdownEditor)\n                }}\n              >\n                <FileText className=\"mr-1 size-3\" />\n                {showMarkdownEditor ? 'Preview' : 'Source'}\n              </Button>\n            </div>\n          </div>\n\n          {/* Cell Content Body */}\n          <CardContent className=\"p-4 sm:p-5\">\n            {showMarkdownEditor ? (\n              <div className=\"space-y-2\">\n                <textarea\n                  value={markdownContent}\n                  onChange={(e) => setMarkdownContent(e.target.value)}\n                  rows={3}\n                  className=\"border-input bg-muted/20 text-foreground focus-visible:ring-ring w-full rounded-md border p-3 font-mono text-xs leading-relaxed outline-none focus-visible:ring-2\"\n                />\n              </div>\n            ) : (\n              <div className=\"space-y-3\">\n                <div className=\"border-border/60 border-b pb-2\">\n                  <h2 className=\"text-foreground text-base font-semibold tracking-tight\">\n                    Cohort Retention &amp; Expansion Query\n                  </h2>\n                  <p className=\"text-muted-foreground mt-1 text-xs leading-relaxed\">\n                    Grouping by monthly signup cohort to evaluate customer lifetime value (LTV) trajectory and expansion\n                    MRR across enterprise tiers. Filtered for 2026 activations from the primary subscriptions warehouse.\n                  </p>\n                </div>\n\n                {/* Metadata Parameter Badges */}\n                <div className=\"flex flex-wrap items-center gap-2 pt-0.5\">\n                  <div className=\"border-border bg-muted/40 text-muted-foreground flex flex-wrap items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs\">\n                    <Database className=\"text-foreground/70 size-3.5\" />\n                    <span>Source:</span>\n                    <span className=\"text-foreground font-mono font-medium\">analytics.fct_subscriptions</span>\n                  </div>\n                  <div className=\"border-border bg-muted/40 text-muted-foreground flex flex-wrap items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs\">\n                    <Target className=\"text-warning size-3.5\" />\n                    <span>Target Retention:</span>\n                    <span className=\"text-foreground font-medium\">&gt; 118% Net Expansion</span>\n                  </div>\n                  <div className=\"border-border bg-muted/40 text-muted-foreground flex flex-wrap items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs\">\n                    <Layers className=\"text-foreground/70 size-3.5\" />\n                    <span>Granularity:</span>\n                    <span className=\"text-foreground font-mono font-medium\">DATE_TRUNC('month')</span>\n                  </div>\n                </div>\n              </div>\n            )}\n          </CardContent>\n        </Card>\n\n        {/* CELL 2: SQL Query Execution Cell */}\n        <Card\n          className={cn(\n            'border-border relative overflow-hidden shadow-none transition-colors',\n            activeCell === 'sql' ? 'ring-primary/20 ring-2' : '',\n          )}\n          onClick={() => setActiveCell('sql')}\n        >\n          {/* Cell Left Focus Strip */}\n          <div\n            className={cn(\n              'absolute top-0 bottom-0 left-0 w-1 transition-colors',\n              activeCell === 'sql' ? 'bg-primary' : 'bg-transparent',\n            )}\n          />\n\n          {/* Cell Toolbar */}\n          <div className=\"border-border bg-muted/30 flex flex-wrap items-center justify-between gap-2 border-b px-4 py-2\">\n            {/* Left: Cell # & Status */}\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <Badge variant=\"default\" className=\"bg-primary text-primary-foreground font-mono text-xs font-semibold\">\n                [1] SQL\n              </Badge>\n              <Badge variant=\"secondary\" className=\"font-mono text-xs\">\n                Snowflake SQL\n              </Badge>\n\n              <div className=\"border-border/80 bg-background/80 flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs\">\n                <span\n                  className={cn(\n                    'size-1.5 rounded-full transition-colors',\n                    isCellRunning ? 'bg-warning animate-pulse' : 'bg-success',\n                  )}\n                />\n                <span className=\"text-muted-foreground font-mono\">\n                  {isCellRunning ? 'Executing query...' : `${executionTime} · ${rowCount.toLocaleString()} rows`}\n                </span>\n              </div>\n            </div>\n\n            {/* Right: Cell Actions */}\n            <div className=\"flex items-center gap-1.5\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"h-7 gap-1 px-2.5 text-xs shadow-none\"\n                title=\"Copy SQL Query\"\n                onClick={(e) => {\n                  e.stopPropagation()\n                  handleCopySql()\n                }}\n              >\n                {copiedSql ? <Check className=\"text-success size-3\" /> : <Copy className=\"size-3\" />}\n                <span>{copiedSql ? 'Copied' : 'Copy SQL'}</span>\n              </Button>\n\n              <Button\n                size=\"sm\"\n                className=\"h-7 gap-1 px-2.5 text-xs font-medium\"\n                disabled={isCellRunning}\n                onClick={(e) => {\n                  e.stopPropagation()\n                  handleRunCell()\n                }}\n              >\n                {isCellRunning ? <Loader2 className=\"size-3 animate-spin\" /> : <Play className=\"size-3 fill-current\" />}\n                <span>Run Cell</span>\n                <kbd className=\"border-primary-foreground/30 bg-primary-foreground/10 ml-0.5 rounded border px-1 font-mono text-xs\">\n                  ^↵\n                </kbd>\n              </Button>\n            </div>\n          </div>\n\n          {/* Code Editor Body (Dark Theme) */}\n          <div className=\"relative flex overflow-x-auto bg-zinc-950 py-3 font-mono text-xs leading-relaxed text-zinc-100 select-text\">\n            {/* Line Numbers Gutter */}\n            <div className=\"flex flex-col border-r border-zinc-800/80 px-3 text-right text-zinc-600 select-none\">\n              {sqlLines.map((_, idx) => (\n                <span\n                  key={idx}\n                  className={cn(\n                    'h-5 leading-5 transition-colors',\n                    hoveredSqlLine === idx + 1 ? 'font-semibold text-zinc-300' : '',\n                  )}\n                >\n                  {idx + 1}\n                </span>\n              ))}\n            </div>\n\n            {/* Code Lines with Syntax Colors */}\n            <div className=\"flex-1 px-4 whitespace-pre\">\n              {sqlLines.map((line, idx) => (\n                <div\n                  key={idx}\n                  className={cn(\n                    'group flex h-5 items-center rounded-xs px-1 leading-5 transition-colors',\n                    hoveredSqlLine === idx + 1 ? 'bg-zinc-800/40' : '',\n                  )}\n                  onMouseEnter={() => setHoveredSqlLine(idx + 1)}\n                  onMouseLeave={() => setHoveredSqlLine(null)}\n                >\n                  <span dangerouslySetInnerHTML={{ __html: highlightSqlLine(line) }} />\n                </div>\n              ))}\n            </div>\n          </div>\n\n          {/* Tabular Query Results & Output Grid */}\n          <div className=\"border-border border-t\">\n            {/* Results Header & Actions Bar */}\n            <div className=\"border-border bg-card flex flex-wrap items-center justify-between gap-2 border-b px-4 py-2\">\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex items-center gap-1.5\">\n                  <Table2 className=\"text-primary size-4\" />\n                  <span className=\"text-foreground text-xs font-semibold\">Query Output</span>\n                </div>\n                <Badge variant=\"secondary\" className=\"font-mono text-xs\">\n                  4 cohorts · 14,290 records\n                </Badge>\n                <span className=\"text-muted-foreground hidden font-mono text-xs sm:inline\">\n                  Last run: {lastExecutionTimestamp}\n                </span>\n              </div>\n\n              {/* Action Controls: Tabs & Export */}\n              <div className=\"flex flex-wrap items-center gap-2\">\n                <div className=\"border-border bg-muted/40 flex items-center rounded-lg border p-0.5\">\n                  <button\n                    type=\"button\"\n                    className={cn(\n                      'flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-colors',\n                      activeResultTab === 'table'\n                        ? 'bg-background text-foreground shadow-xs'\n                        : 'text-muted-foreground hover:text-foreground',\n                    )}\n                    onClick={() => setActiveResultTab('table')}\n                  >\n                    <Table2 className=\"size-3.5\" />\n                    <span>Table</span>\n                  </button>\n                  <button\n                    type=\"button\"\n                    className={cn(\n                      'flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-colors',\n                      activeResultTab === 'chart'\n                        ? 'bg-background text-foreground shadow-xs'\n                        : 'text-muted-foreground hover:text-foreground',\n                    )}\n                    onClick={() => setActiveResultTab('chart')}\n                  >\n                    <BarChart3 className=\"size-3.5\" />\n                    <span>Chart</span>\n                  </button>\n                </div>\n\n                <Button\n                  aria-label=\"Download attachment\"\n                  variant=\"outline\"\n                  size=\"sm\"\n                  className=\"h-7 gap-1 px-2.5 text-xs shadow-none\"\n                  onClick={handleExportCsv}\n                >\n                  {copiedCsv ? <Check className=\"text-success size-3\" /> : <Download className=\"size-3\" />}\n                  <span>{copiedCsv ? 'Copied CSV!' : 'Export CSV'}</span>\n                </Button>\n\n                {activeResultTab === 'table' && (\n                  <Button\n                    variant=\"secondary\"\n                    size=\"sm\"\n                    className=\"h-7 gap-1 px-2.5 text-xs\"\n                    onClick={() => setActiveResultTab('chart')}\n                  >\n                    <BarChart3 className=\"size-3\" />\n                    <span>Visualize as Chart</span>\n                  </Button>\n                )}\n              </div>\n            </div>\n\n            {/* View 1: Tabular Results Grid */}\n            {activeResultTab === 'table' ? (\n              <div className=\"overflow-x-auto\">\n                <Table>\n                  <TableHeader>\n                    <TableRow className=\"bg-muted/40 hover:bg-muted/40\">\n                      <TableHead className=\"text-xs font-semibold\">\n                        <div className=\"flex items-center gap-1.5\">\n                          <span>signup_cohort</span>\n                          <Badge variant=\"outline\" className=\"text-muted-foreground py-0 text-xs font-normal\">\n                            DATE\n                          </Badge>\n                        </div>\n                      </TableHead>\n                      <TableHead className=\"text-right text-xs font-semibold\">\n                        <div className=\"flex items-center justify-end gap-1.5\">\n                          <span>total_customers</span>\n                          <Badge variant=\"outline\" className=\"text-muted-foreground py-0 text-xs font-normal\">\n                            INT\n                          </Badge>\n                        </div>\n                      </TableHead>\n                      <TableHead className=\"text-right text-xs font-semibold\">\n                        <div className=\"flex items-center justify-end gap-1.5\">\n                          <span>avg_mrr</span>\n                          <Badge variant=\"outline\" className=\"text-muted-foreground py-0 text-xs font-normal\">\n                            NUMERIC\n                          </Badge>\n                        </div>\n                      </TableHead>\n                      <TableHead className=\"text-right text-xs font-semibold\">\n                        <div className=\"flex items-center justify-end gap-1.5\">\n                          <span>cohort_ltv</span>\n                          <Badge variant=\"outline\" className=\"text-muted-foreground py-0 text-xs font-normal\">\n                            CURRENCY\n                          </Badge>\n                        </div>\n                      </TableHead>\n                      <TableHead className=\"text-right text-xs font-semibold\">\n                        <span>expansion_velocity</span>\n                      </TableHead>\n                    </TableRow>\n                  </TableHeader>\n                  <TableBody>\n                    {initialCohortResults.map((row, idx) => (\n                      <TableRow\n                        key={row.signup_cohort}\n                        className={cn('text-xs transition-colors', idx % 2 === 1 ? 'bg-muted/15' : '')}\n                      >\n                        <TableCell className=\"font-mono font-medium\">\n                          <div className=\"flex items-center gap-2\">\n                            <span className=\"text-muted-foreground font-mono text-xs\">{idx + 1}</span>\n                            <span className=\"text-foreground font-semibold\">{row.signup_cohort}</span>\n                            <Badge variant=\"secondary\" className=\"font-sans text-xs font-normal\">\n                              {row.cohort_label}\n                            </Badge>\n                          </div>\n                        </TableCell>\n                        <TableCell className=\"text-foreground text-right font-mono font-medium tabular-nums\">\n                          {row.total_customers.toLocaleString()}\n                        </TableCell>\n                        <TableCell className=\"text-foreground text-right font-mono tabular-nums\">\n                          ${row.avg_mrr.toFixed(2)}\n                        </TableCell>\n                        <TableCell className=\"text-foreground text-right font-mono font-semibold tabular-nums\">\n                          $\n                          {row.cohort_ltv.toLocaleString('en-US', {\n                            minimumFractionDigits: 2,\n                            maximumFractionDigits: 2,\n                          })}\n                        </TableCell>\n                        <TableCell className=\"text-right\">\n                          <span className=\"bg-success/10 text-success rounded-md px-2 py-0.5 font-mono text-xs font-semibold\">\n                            {row.expansion_rate}\n                          </span>\n                        </TableCell>\n                      </TableRow>\n                    ))}\n                  </TableBody>\n                </Table>\n\n                {/* Table Summary Footer */}\n                <div className=\"border-border bg-muted/20 flex flex-wrap items-center justify-between gap-3 border-t px-4 py-2.5 text-xs\">\n                  <span className=\"text-muted-foreground font-mono\">4 of 4 cohort partitions loaded · 0 errors</span>\n                  <div className=\"flex flex-wrap items-center gap-4\">\n                    <span className=\"text-muted-foreground\">\n                      Total Active Accounts:{' '}\n                      <strong className=\"text-foreground font-mono tabular-nums\">\n                        {totalCustomersSum.toLocaleString()}\n                      </strong>\n                    </span>\n                    <span className=\"text-muted-foreground\">\n                      Cumulative Cohort LTV:{' '}\n                      <strong className=\"text-foreground font-mono tabular-nums\">\n                        ${totalLtvSum.toLocaleString('en-US', { minimumFractionDigits: 2 })}\n                      </strong>\n                    </span>\n                  </div>\n                </div>\n              </div>\n            ) : (\n              /* View 2: Chart Visualization */\n              <div className=\"space-y-5 p-4 sm:p-6\">\n                <div className=\"flex flex-col justify-between gap-2 sm:flex-row sm:items-center\">\n                  <div>\n                    <h3 className=\"text-foreground text-sm font-semibold\">Cohort Lifetime Value Trajectory</h3>\n                    <p className=\"text-muted-foreground text-xs\">\n                      Progression of cumulative customer LTV and expansion momentum by activation month.\n                    </p>\n                  </div>\n                  <Badge variant=\"outline\" className=\"font-mono text-xs\">\n                    Snowflake Snowpark Analytics\n                  </Badge>\n                </div>\n\n                {/* Bar Chart Distribution */}\n                <div className=\"space-y-3.5\">\n                  {initialCohortResults.map((item) => (\n                    <div\n                      key={item.signup_cohort}\n                      className=\"border-border/60 bg-card space-y-1.5 rounded-lg border p-3 shadow-none\"\n                    >\n                      <div className=\"flex items-center justify-between text-xs\">\n                        <div className=\"flex items-center gap-2\">\n                          <span className=\"font-mono font-semibold\">{item.cohort_label}</span>\n                          <span className=\"text-muted-foreground font-mono\">({item.signup_cohort})</span>\n                          <Badge variant=\"secondary\" className=\"font-mono text-xs\">\n                            {item.total_customers.toLocaleString()} customers\n                          </Badge>\n                        </div>\n                        <div className=\"flex items-center gap-3\">\n                          <span className=\"text-muted-foreground font-mono\">Avg MRR: ${item.avg_mrr.toFixed(2)}</span>\n                          <span className=\"text-foreground font-mono font-bold tabular-nums\">\n                            ${item.cohort_ltv.toLocaleString('en-US', { minimumFractionDigits: 2 })}\n                          </span>\n                        </div>\n                      </div>\n\n                      {/* Visual Bar Fill */}\n                      <div className=\"bg-muted/60 relative h-3.5 w-full overflow-hidden rounded-full\">\n                        <div\n                          className=\"bg-primary absolute top-0 bottom-0 left-0 rounded-full transition-colors duration-500\"\n                          style={{ width: `${(item.cohort_ltv / maxCohortLtv) * 100}%` }}\n                        />\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            )}\n          </div>\n        </Card>\n\n        {/* CELL 3: Downstream Python / Added Cell (Toggled or Interactive) */}\n        {showExtraCell && (\n          <Card\n            className={cn(\n              'border-border relative overflow-hidden shadow-none transition-colors',\n              activeCell === 'extra' ? 'ring-primary/20 ring-2' : '',\n            )}\n            onClick={() => setActiveCell('extra')}\n          >\n            {/* Cell Left Focus Strip */}\n            <div\n              className={cn(\n                'absolute top-0 bottom-0 left-0 w-1 transition-colors',\n                activeCell === 'extra' ? 'bg-primary' : 'bg-transparent',\n              )}\n            />\n\n            <div className=\"border-border bg-muted/30 flex items-center justify-between border-b px-4 py-2\">\n              <div className=\"flex items-center gap-2\">\n                <Badge variant=\"secondary\" className=\"font-mono text-xs font-semibold\">\n                  [2] Python\n                </Badge>\n                <span className=\"text-muted-foreground text-xs\">Downstream Snowpark Dataframe</span>\n              </div>\n\n              <div className=\"flex items-center gap-1.5\">\n                <Button\n                  size=\"sm\"\n                  className=\"h-7 gap-1 px-2.5 text-xs\"\n                  disabled={extraCellRunning}\n                  onClick={(e) => {\n                    e.stopPropagation()\n                    handleRunExtraCell()\n                  }}\n                >\n                  {extraCellRunning ? (\n                    <Loader2 className=\"size-3 animate-spin\" />\n                  ) : (\n                    <Play className=\"size-3 fill-current\" />\n                  )}\n                  <span>Run</span>\n                </Button>\n                <Button\n                  aria-label=\"Delete query cell\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"text-muted-foreground hover:text-destructive h-7 px-2\"\n                  onClick={(e) => {\n                    e.stopPropagation()\n                    setShowExtraCell(false)\n                  }}\n                >\n                  <Trash2 className=\"size-3\" />\n                </Button>\n              </div>\n            </div>\n\n            <div className=\"bg-zinc-950 p-4 font-mono text-xs leading-relaxed text-zinc-300\">\n              <pre className=\"text-zinc-400\">\n                <code>\n                  <span className=\"text-chart-1\">import</span> snowflake.snowpark{' '}\n                  <span className=\"text-chart-1\">as</span> snowpark{'\\n'}\n                  <span className=\"text-chart-1\">import</span> polars <span className=\"text-chart-1\">as</span> pl\n                  {'\\n\\n'}\n                  <span className=\"text-zinc-500\"># Read Cell [1] tabular results and compute hazard rate</span>\n                  {'\\n'}\n                  df = cell_1_results.to_pandas(){'\\n'}\n                  df[<span className=\"text-success\">'expansion_velocity'</span>] = df[\n                  <span className=\"text-success\">'cohort_ltv'</span>] / df[\n                  <span className=\"text-success\">'total_customers'</span>]{'\\n'}\n                  <span className=\"text-info\">print</span>(f\n                  <span className=\"text-success\">\n                    \"Average cohort customer value: ${'{'}df['expansion_velocity'].mean():.2f{'}'}\"\n                  </span>\n                  )\n                </code>\n              </pre>\n            </div>\n\n            <div className=\"border-border bg-muted/20 border-t p-3 font-mono text-xs\">\n              <div className=\"text-muted-foreground flex items-center gap-2\">\n                <Terminal className=\"text-success size-3.5\" />\n                <span>Output:</span>\n                <span className=\"text-success font-semibold\">Average cohort customer value: $292.77</span>\n              </div>\n            </div>\n          </Card>\n        )}\n      </main>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/SqlQueryNotebook.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/table.json"
  ],
  "description": "Hex, Deepnote, and Jupyter style SQL analytical query notebook with documentation cells, executable Snowflake SQL editor with syntax coloring, live tabular results grid, CSV export, and chart visualization.",
  "categories": [
    "devops",
    "app"
  ]
}