astralyx-ui 0.3.1 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astralyx-ui",
-  "version": "0.3.1",
+  "version": "0.6.0",
   "type": "module",
   "description": "309 accessible React components you copy into your repo, with a CLI and registry that resolve what each one needs.",
   "license": "MIT",

package/registry/index.json

@@ -1,8 +1,22 @@
 {
   "name": "astralyx-ui",
-  "version": "0.3.1",
+  "version": "0.6.0",
   "homepage": "https://ui.astralyx.dev",
   "items": [
+    {
+      "name": "ab-test-results",
+      "type": "registry:ui",
+      "title": "A/B Test Results",
+      "description": "Variants with lift, a confidence interval and a two-proportion z-test — plus the peeking warning, because stopping at the first significant reading is the failure that actually happens.",
+      "category": "Analytics",
+      "dependencies": [
+        "lucide-react@^1.39.0"
+      ],
+      "registryDependencies": [
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
     {
       "name": "accordion",
       "type": "registry:ui",
@@ -216,6 +230,18 @@
         "progress"
       ]
     },
+    {
+      "name": "attribution",
+      "type": "registry:ui",
+      "title": "Attribution",
+      "description": "Credit for a conversion split across touchpoints, with the model as a control rather than a buried setting — because the disagreement between models is the whole finding.",
+      "category": "Analytics",
+      "dependencies": [],
+      "registryDependencies": [
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
     {
       "name": "audio-player",
       "type": "registry:ui",
@@ -264,6 +290,20 @@
         "lib-utils"
       ]
     },
+    {
+      "name": "back-to-top",
+      "type": "registry:ui",
+      "title": "Back To Top",
+      "description": "Appears once you have scrolled, driven by an IntersectionObserver sentinel rather than a scroll handler — and it moves focus, not just the viewport.",
+      "category": "Navigation",
+      "dependencies": [
+        "lucide-react@^1.39.0"
+      ],
+      "registryDependencies": [
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
     {
       "name": "backup-list",
       "type": "registry:ui",
@@ -355,6 +395,30 @@
         "tooltip"
       ]
     },
+    {
+      "name": "bottom-nav",
+      "type": "registry:ui",
+      "title": "Bottom Nav",
+      "description": "The mobile tab bar — three to five destinations, pinned to the bottom where thumbs are, with the home-indicator safe area accounted for.",
+      "category": "Navigation",
+      "dependencies": [],
+      "registryDependencies": [
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
+    {
+      "name": "box-plot",
+      "type": "registry:ui",
+      "title": "Box Plot",
+      "description": "Quartiles, Tukey whiskers and outliers — the distribution an average hides. Quartiles use linear interpolation, so they agree with what your analytics stack reports.",
+      "category": "Charts",
+      "dependencies": [],
+      "registryDependencies": [
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
     {
       "name": "branch-select",
       "type": "registry:ui",
@@ -622,6 +686,22 @@
         "lib-utils"
       ]
     },
+    {
+      "name": "cascader",
+      "type": "registry:ui",
+      "title": "Cascader",
+      "description": "A regular hierarchy picked one level at a time, in side-by-side columns — so the path stays readable and the siblings you passed are still visible.",
+      "category": "Forms",
+      "dependencies": [
+        "lucide-react@^1.39.0"
+      ],
+      "registryDependencies": [
+        "lib-styles",
+        "lib-utils",
+        "primitive-dismissable",
+        "primitive-popper"
+      ]
+    },
     {
       "name": "chain-select",
       "type": "registry:ui",
@@ -985,6 +1065,20 @@
         "lib-utils"
       ]
     },
+    {
+      "name": "cookie-consent",
+      "type": "registry:ui",
+      "title": "Cookie Consent",
+      "description": "A consent banner with reject as easy as accept, nothing pre-ticked, and no cookie written by the component itself — the arrangement regulators have repeatedly ruled is the compliant one.",
+      "category": "Utility",
+      "dependencies": [],
+      "registryDependencies": [
+        "button",
+        "checkbox",
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
     {
       "name": "coordinate-input",
       "type": "registry:ui",
@@ -1096,6 +1190,18 @@
         "code-block"
       ]
     },
+    {
+      "name": "currency-input",
+      "type": "registry:ui",
+      "title": "Currency Input",
+      "description": "A money field whose value is an integer number of minor units, formatted only while unfocused. Reads its decimal count from Intl, so zero-decimal currencies work without a special case.",
+      "category": "Forms",
+      "dependencies": [],
+      "registryDependencies": [
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
     {
       "name": "data-grid",
       "type": "registry:ui",
@@ -1345,6 +1451,21 @@
         "upload-list"
       ]
     },
+    {
+      "name": "emoji-picker",
+      "type": "registry:ui",
+      "title": "Emoji Picker",
+      "description": "A grouped, searchable grid with recents, rendered as text rather than sprites. One tab stop with arrow-key movement, and it never touches localStorage.",
+      "category": "Forms",
+      "dependencies": [
+        "lucide-react@^1.39.0"
+      ],
+      "registryDependencies": [
+        "input",
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
     {
       "name": "empty",
       "type": "registry:ui",
@@ -1451,6 +1572,22 @@
         "lib-utils"
       ]
     },
+    {
+      "name": "event-stream",
+      "type": "registry:ui",
+      "title": "Event Stream",
+      "description": "A live tail of analytics events with their payloads — the tool for debugging the tracking itself. Autoscroll pauses when you scroll away and the list is capped rather than unbounded.",
+      "category": "Analytics",
+      "dependencies": [
+        "lucide-react@^1.39.0"
+      ],
+      "registryDependencies": [
+        "button",
+        "input",
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
     {
       "name": "feature-flag",
       "type": "registry:ui",
@@ -1625,6 +1762,18 @@
         "lib-utils"
       ]
     },
+    {
+      "name": "gantt",
+      "type": "registry:ui",
+      "title": "Gantt",
+      "description": "Work on a timeline: drag a bar to reschedule and its edges to change the start or end, with a computed critical path and dependency conflicts surfaced as you create them.",
+      "category": "Views",
+      "dependencies": [],
+      "registryDependencies": [
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
     {
       "name": "gas-tracker",
       "type": "registry:ui",
@@ -1764,6 +1913,19 @@
         "lib-utils"
       ]
     },
+    {
+      "name": "image-cropper",
+      "type": "registry:ui",
+      "title": "Image Cropper",
+      "description": "The step between picking an image and saving it. The crop is stored in natural image coordinates and exported with toBlob, so it survives a resize and uploads directly.",
+      "category": "Media",
+      "dependencies": [],
+      "registryDependencies": [
+        "button",
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
     {
       "name": "image",
       "type": "registry:ui",
@@ -2143,6 +2305,22 @@
         "lib-utils"
       ]
     },
+    {
+      "name": "markdown-editor",
+      "type": "registry:ui",
+      "title": "Markdown Editor",
+      "description": "A real textarea, a toolbar that edits the selection through setRangeText — so the browser undo stack survives — and the Markdown component as its preview.",
+      "category": "Knowledge",
+      "dependencies": [
+        "lucide-react@^1.39.0"
+      ],
+      "registryDependencies": [
+        "button",
+        "lib-styles",
+        "lib-utils",
+        "markdown"
+      ]
+    },
     {
       "name": "markdown",
       "type": "registry:ui",
@@ -2712,6 +2890,20 @@
         "lib-utils"
       ]
     },
+    {
+      "name": "org-chart",
+      "type": "registry:ui",
+      "title": "Org Chart",
+      "description": "A reporting hierarchy drawn top-down with connectors, built from flat { id, managerId } rows. Orphans and multiple roots are rendered rather than dropped; cycles are reported.",
+      "category": "Views",
+      "dependencies": [
+        "lucide-react@^1.39.0"
+      ],
+      "registryDependencies": [
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
     {
       "name": "page-header",
       "type": "registry:ui",
@@ -2784,6 +2976,21 @@
         "stepper"
       ]
     },
+    {
+      "name": "pdf-viewer",
+      "type": "registry:ui",
+      "title": "PDF Viewer",
+      "description": "A PDF in the browser’s own viewer with a toolbar around it. It delegates the rendering on purpose, and always shows a download link — because embedded PDFs fail routinely.",
+      "category": "Media",
+      "dependencies": [
+        "lucide-react@^1.39.0"
+      ],
+      "registryDependencies": [
+        "button",
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
     {
       "name": "permission-matrix",
       "type": "registry:ui",
@@ -2799,6 +3006,18 @@
         "lib-utils"
       ]
     },
+    {
+      "name": "phone-input",
+      "type": "registry:ui",
+      "title": "Phone Input",
+      "description": "A country selector and a national number that together produce E.164 — the shape every telephony API wants. Honest about not being a validator.",
+      "category": "Forms",
+      "dependencies": [],
+      "registryDependencies": [
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
     {
       "name": "pipeline",
       "type": "registry:ui",
@@ -2815,6 +3034,23 @@
         "spinner"
       ]
     },
+    {
+      "name": "popconfirm",
+      "type": "registry:ui",
+      "title": "Popconfirm",
+      "description": "A confirmation anchored to the control that triggered it, for reversible or single-item actions — so the row you are asking about stays visible.",
+      "category": "Overlays",
+      "dependencies": [
+        "lucide-react@^1.39.0"
+      ],
+      "registryDependencies": [
+        "button",
+        "lib-styles",
+        "lib-utils",
+        "primitive-dismissable",
+        "primitive-popper"
+      ]
+    },
     {
       "name": "popover",
       "type": "registry:ui",
@@ -3034,6 +3270,44 @@
         "lib-utils"
       ]
     },
+    {
+      "name": "qr-code",
+      "type": "registry:ui",
+      "title": "QR Code",
+      "description": "A QR code encoded in the browser and drawn as SVG. No dependency and no network round trip — which matters, because the two things people encode most are a TOTP secret and a wallet address.",
+      "category": "Utility",
+      "dependencies": [],
+      "registryDependencies": [
+        "lib-qr",
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
+    {
+      "name": "query-constructor",
+      "type": "registry:ui",
+      "title": "Query Constructor",
+      "description": "A SELECT assembled a clause at a time — sources with a join button, columns, filter, then order, group and limit — with the finished statement underneath. Reads both ways: paste a SELECT and the blocks fill in. Values compile to bound parameters and identifiers are allow-listed against the schema.",
+      "category": "Database",
+      "dependencies": [
+        "lucide-react@^1.39.0"
+      ],
+      "registryDependencies": [
+        "button",
+        "code-block",
+        "command",
+        "input",
+        "lib-sql-select",
+        "lib-styles",
+        "lib-utils",
+        "multi-select",
+        "popover",
+        "schema-table",
+        "segment-builder",
+        "select",
+        "textarea"
+      ]
+    },
     {
       "name": "query-editor",
       "type": "registry:ui",
@@ -3083,6 +3357,18 @@
         "sparkline"
       ]
     },
+    {
+      "name": "radar-chart",
+      "type": "registry:ui",
+      "title": "Radar Chart",
+      "description": "Several measures for one subject on axes radiating from a centre. Good for recognising a profile’s shape; documented plainly as the wrong chart when the reader needs to compare values.",
+      "category": "Charts",
+      "dependencies": [],
+      "registryDependencies": [
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
     {
       "name": "radio-group",
       "type": "registry:ui",
@@ -3268,6 +3554,32 @@
         "lib-utils"
       ]
     },
+    {
+      "name": "result",
+      "type": "registry:ui",
+      "title": "Result",
+      "description": "The whole-page outcome — not found, forbidden, server error, done. Announced on render, so a client-side route change to an error page is not silent for a screen reader.",
+      "category": "Feedback",
+      "dependencies": [
+        "lucide-react@^1.39.0"
+      ],
+      "registryDependencies": [
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
+    {
+      "name": "retention-curve",
+      "type": "registry:ui",
+      "title": "Retention Curve",
+      "description": "What fraction of each cohort is still here, period by period — normalised so growth cannot hide churn. Later cohorts are drawn shorter, not padded with zeroes.",
+      "category": "Analytics",
+      "dependencies": [],
+      "registryDependencies": [
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
     {
       "name": "retrieval-results",
       "type": "registry:ui",
@@ -3431,6 +3743,42 @@
         "switch"
       ]
     },
+    {
+      "name": "sankey",
+      "type": "registry:ui",
+      "title": "Sankey",
+      "description": "Flow between stages, where band width is the quantity moving. Nodes are layered by longest path so every link runs forward, and a cycle is reported rather than drawn as something plausible.",
+      "category": "Charts",
+      "dependencies": [],
+      "registryDependencies": [
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
+    {
+      "name": "scatter-plot",
+      "type": "registry:ui",
+      "title": "Scatter Plot",
+      "description": "Two measured variables plotted against each other, with an optional least-squares trend line and Pearson’s r. Points can carry a third dimension as area and a fourth as colour.",
+      "category": "Charts",
+      "dependencies": [],
+      "registryDependencies": [
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
+    {
+      "name": "scheduler",
+      "type": "registry:ui",
+      "title": "Scheduler",
+      "description": "A week of days with events laid out against the hours and edited in place — drag to move across days, drag an edge to change the end, drag empty grid to create. Overlaps split into columns rather than stacking.",
+      "category": "Views",
+      "dependencies": [],
+      "registryDependencies": [
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
     {
       "name": "schema-form",
       "type": "registry:ui",
@@ -3507,6 +3855,36 @@
         "lib-utils"
       ]
     },
+    {
+      "name": "segment-builder",
+      "type": "registry:ui",
+      "title": "Segment Builder",
+      "description": "Build an audience from conditions, with precedence shown as nesting rather than implied by a word — and the output a structure, not a concatenated string.",
+      "category": "Analytics",
+      "dependencies": [
+        "lucide-react@^1.39.0"
+      ],
+      "registryDependencies": [
+        "button",
+        "input",
+        "lib-styles",
+        "lib-utils",
+        "select",
+        "tag-input"
+      ]
+    },
+    {
+      "name": "segmented-control",
+      "type": "registry:ui",
+      "title": "Segmented Control",
+      "description": "A small set of mutually exclusive choices shown at once, built from real radio inputs in a fieldset — so arrow keys, form submission and screen-reader announcement all work without any script.",
+      "category": "Forms",
+      "dependencies": [],
+      "registryDependencies": [
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
     {
       "name": "select",
       "type": "registry:ui",
@@ -3612,6 +3990,19 @@
         "tooltip"
       ]
     },
+    {
+      "name": "signature-pad",
+      "type": "registry:ui",
+      "title": "Signature Pad",
+      "description": "A canvas you sign with a finger, stylus or mouse. Strokes are kept as points and redrawn, so undo, resize and export all work — and stylus pressure varies the line.",
+      "category": "Forms",
+      "dependencies": [],
+      "registryDependencies": [
+        "button",
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
     {
       "name": "skeleton",
       "type": "registry:ui",
@@ -4436,6 +4827,41 @@
         "wallet-address"
       ]
     },
+    {
+      "name": "transfer",
+      "type": "registry:ui",
+      "title": "Transfer",
+      "description": "Two lists and the movement between them, for choosing a subset from a large pool. Both sides are searchable — filtering the target is what makes a 200-item selection usable.",
+      "category": "Forms",
+      "dependencies": [
+        "lucide-react@^1.39.0"
+      ],
+      "registryDependencies": [
+        "button",
+        "checkbox",
+        "input",
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
+    {
+      "name": "tree-select",
+      "type": "registry:ui",
+      "title": "Tree Select",
+      "description": "A tree in a popover with real tri-state parents. Checking a branch checks its subtree, the value holds only leaves, and searching keeps the ancestors of every match.",
+      "category": "Forms",
+      "dependencies": [
+        "lucide-react@^1.39.0"
+      ],
+      "registryDependencies": [
+        "checkbox",
+        "input",
+        "lib-styles",
+        "lib-utils",
+        "primitive-dismissable",
+        "primitive-popper"
+      ]
+    },
     {
       "name": "tree",
       "type": "registry:ui",
@@ -4450,6 +4876,18 @@
         "lib-utils"
       ]
     },
+    {
+      "name": "treemap",
+      "type": "registry:ui",
+      "title": "Treemap",
+      "description": "Part-to-whole as nested rectangles sized by area, laid out with the squarify algorithm so tiles stay close to square instead of degenerating into slivers.",
+      "category": "Charts",
+      "dependencies": [],
+      "registryDependencies": [
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
     {
       "name": "two-factor-setup",
       "type": "registry:ui",
@@ -4790,6 +5228,20 @@
       ],
       "registryDependencies": []
     },
+    {
+      "name": "lib-qr",
+      "type": "registry:lib",
+      "title": "qr",
+      "dependencies": [],
+      "registryDependencies": []
+    },
+    {
+      "name": "lib-sql-select",
+      "type": "registry:lib",
+      "title": "sql-select",
+      "dependencies": [],
+      "registryDependencies": []
+    },
     {
       "name": "lib-styles",
       "type": "registry:lib",

package/registry/items/ab-test-results.json

@@ -0,0 +1,21 @@
+{
+  "name": "ab-test-results",
+  "type": "registry:ui",
+  "title": "A/B Test Results",
+  "description": "Variants with lift, a confidence interval and a two-proportion z-test — plus the peeking warning, because stopping at the first significant reading is the failure that actually happens.",
+  "category": "Analytics",
+  "dependencies": [
+    "lucide-react@^1.39.0"
+  ],
+  "registryDependencies": [
+    "lib-styles",
+    "lib-utils"
+  ],
+  "files": [
+    {
+      "path": "components/ui/ab-test-results.tsx",
+      "type": "registry:ui",
+      "content": "import { useId, useMemo, type ComponentProps, type ReactNode } from 'react'\nimport { AlertTriangle } from 'lucide-react'\nimport { radius, surface } from '@/lib/styles'\nimport { cn } from '@/lib/utils'\n\n/**\n * Experiment variants with lift, a confidence interval, and an honest verdict.\n *\n * **It shows the interval, not just the number.** \"+12% lift\" is not a result;\n * \"+12%, 95% CI [−3%, +27%]\" is, and it says the opposite — that the experiment\n * has not concluded. A dashboard that prints the point estimate alone\n * manufactures certainty, and people ship on it.\n *\n * **The maths.** A two-proportion z-test with a pooled standard error for the\n * p-value, and an unpooled standard error for the interval — the standard pair,\n * and the reason the interval can straddle zero while p sits just under 0.05.\n * The interval is then divided by the control rate so it is on the same scale\n * as the lift beside it; an absolute-difference interval printed next to a\n * relative lift is read as bounding that lift, and it does not.\n * The normal approximation needs roughly ten conversions in each arm, so below\n * that the verdict is withheld rather than computed on data too thin to carry\n * it.\n *\n * **It warns about peeking, because that is the real-world failure.** Checking\n * an experiment repeatedly and stopping at the first significant reading\n * inflates the false-positive rate far above the nominal 5% — a fixed-horizon\n * test read continuously is wrong roughly a third of the time. If a sample-size\n * target is given and has not been reached, this says so plainly.\n *\n * It reports a *statistical* result about one metric. Whether that metric is\n * the one that matters, whether the assignment was actually random, and whether\n * the effect is worth the change are not things any component can tell you.\n */\nexport type Variant = {\n  id: string\n  name: ReactNode\n  /** Users in this arm. */\n  visitors: number\n  conversions: number\n  /** Exactly one variant should be the baseline. */\n  control?: boolean\n}\n\ntype AbTestResultsProps = Omit<ComponentProps<'div'>, 'title'> & {\n  variants: Variant[]\n  title?: ReactNode\n  /** Two-sided significance threshold. */\n  alpha?: number\n  /** Per-arm sample size the test was planned for. Enables the peeking warning. */\n  targetSample?: number\n  metricLabel?: string\n  emptyLabel?: string\n  label?: string\n}\n\n/** Normal CDF via Abramowitz & Stegun 7.1.26 — accurate to ~1e-7. */\nfunction normalCdf(z: number): number {\n  const sign = z < 0 ? -1 : 1\n  const x = Math.abs(z) / Math.SQRT2\n  const t = 1 / (1 + 0.3275911 * x)\n  const y =\n    1 -\n    ((((1.061405429 * t - 1.453152027) * t + 1.421413741) * t - 0.284496736) * t + 0.254829592) *\n      t *\n      Math.exp(-x * x)\n  return 0.5 * (1 + sign * y)\n}\n\n/** 95% ≈ 1.96. Inverse normal by bisection: exact enough, and tiny. */\nfunction zFor(confidence: number): number {\n  let lo = 0\n  let hi = 6\n  const target = 1 - (1 - confidence) / 2\n  for (let i = 0; i < 60; i++) {\n    const mid = (lo + hi) / 2\n    if (normalCdf(mid) < target) lo = mid\n    else hi = mid\n  }\n  return (lo + hi) / 2\n}\n\nfunction AbTestResults({\n  variants,\n  title,\n  alpha = 0.05,\n  targetSample,\n  metricLabel = 'Conversion',\n  emptyLabel = 'No variants.',\n  label = 'Experiment results',\n  className,\n  ...props\n}: AbTestResultsProps) {\n  const titleId = useId()\n\n  const rows = useMemo(() => {\n    const control = variants.find((variant) => variant.control) ?? variants[0]\n    if (!control) return []\n\n    const z = zFor(1 - alpha)\n    const controlRate = control.visitors > 0 ? control.conversions / control.visitors : 0\n\n    return variants.map((variant) => {\n      const rate = variant.visitors > 0 ? variant.conversions / variant.visitors : 0\n      if (variant.id === control.id) {\n        return { variant, rate, isControl: true, lift: null, ci: null, p: null, thin: false }\n      }\n\n      // The normal approximation needs enough successes and failures in both\n      // arms; under that, no verdict is honest.\n      const thin =\n        Math.min(\n          variant.conversions,\n          variant.visitors - variant.conversions,\n          control.conversions,\n          control.visitors - control.conversions,\n        ) < 10\n\n      const pooled =\n        (variant.conversions + control.conversions) / (variant.visitors + control.visitors)\n      const pooledSe = Math.sqrt(\n        pooled * (1 - pooled) * (1 / variant.visitors + 1 / control.visitors),\n      )\n      const statistic = pooledSe > 0 ? (rate - controlRate) / pooledSe : 0\n      const p = 2 * (1 - normalCdf(Math.abs(statistic)))\n\n      // Unpooled for the interval — pooling assumes the null it is testing.\n      const se = Math.sqrt(\n        (rate * (1 - rate)) / variant.visitors + (controlRate * (1 - controlRate)) / control.visitors,\n      )\n      const diff = rate - controlRate\n\n      /**\n       * The interval is put on the same scale as the lift beside it.\n       *\n       * The z-test gives an interval for the *absolute* difference in rates —\n       * 0.75 percentage points. Printing that next to a *relative* lift of\n       * +12.5% invites the reader to take it as bounding the lift, which it\n       * does not: the two numbers are in different units and disagree by a\n       * factor of the control rate. Dividing by the control rate is the\n       * first-order (delta method) interval for relative lift, which is what\n       * every experiment dashboard means by \"95% CI\" on a lift column.\n       */\n      const ci: [number, number] =\n        controlRate > 0\n          ? [(diff - z * se) / controlRate, (diff + z * se) / controlRate]\n          : [diff - z * se, diff + z * se]\n\n      return {\n        variant,\n        rate,\n        isControl: false,\n        lift: controlRate > 0 ? diff / controlRate : null,\n        ci,\n        p,\n        thin,\n      }\n    })\n  }, [variants, alpha])\n\n  if (rows.length === 0) {\n    return (\n      <div className={cn(surface, radius.surface, 'p-4', className)} {...props}>\n        <p className=\"text-muted-foreground text-xs\">{emptyLabel}</p>\n      </div>\n    )\n  }\n\n  const underpowered =\n    targetSample !== undefined && variants.some((variant) => variant.visitors < targetSample)\n\n  const percent = (value: number) => `${(value * 100).toFixed(2)}%`\n  const signed = (value: number) => `${value >= 0 ? '+' : ''}${(value * 100).toFixed(1)}%`\n\n  return (\n    <div\n      data-slot=\"ab-test-results\"\n      className={cn(surface, radius.surface, 'overflow-hidden', className)}\n      aria-labelledby={titleId}\n      {...props}\n    >\n      {title && (\n        <div className=\"border-border border-b px-4 py-3\">\n          <p id={titleId} className=\"text-sm font-medium\">\n            {title}\n          </p>\n        </div>\n      )}\n      {!title && (\n        <p id={titleId} className=\"sr-only\">\n          {label}\n        </p>\n      )}\n\n      <div className=\"overflow-x-auto\">\n        <table className=\"w-full text-start text-sm\">\n          <thead>\n            <tr className=\"border-border text-muted-foreground border-b text-xs\">\n              <th className=\"px-4 py-2 text-start font-medium\">Variant</th>\n              <th className=\"px-4 py-2 text-end font-medium\">Visitors</th>\n              <th className=\"px-4 py-2 text-end font-medium\">{metricLabel}</th>\n              <th className=\"px-4 py-2 text-end font-medium\">Lift</th>\n              <th className=\"px-4 py-2 text-end font-medium\">\n                {Math.round((1 - alpha) * 100)}% CI on lift\n              </th>\n              <th className=\"px-4 py-2 text-end font-medium\">p</th>\n            </tr>\n          </thead>\n          <tbody>\n            {rows.map((row) => {\n              const significant = row.p !== null && !row.thin && row.p < alpha\n              return (\n                <tr key={row.variant.id} className=\"border-border/60 border-b last:border-b-0\">\n                  <td className=\"px-4 py-2\">\n                    <span className=\"flex items-center gap-2\">\n                      {row.variant.name}\n                      {row.isControl && (\n                        <span className=\"text-muted-foreground text-[11px]\">control</span>\n                      )}\n                    </span>\n                  </td>\n                  <td className=\"px-4 py-2 text-end tabular-nums\">\n                    {row.variant.visitors.toLocaleString()}\n                  </td>\n                  <td className=\"px-4 py-2 text-end tabular-nums\">\n                    {percent(row.rate)}\n                    <span className=\"text-muted-foreground ms-1 text-[11px]\">\n                      ({row.variant.conversions})\n                    </span>\n                  </td>\n                  <td\n                    className={cn(\n                      'px-4 py-2 text-end tabular-nums',\n                      significant && (row.lift ?? 0) > 0 && 'text-[var(--green-soft-foreground)]',\n                      significant && (row.lift ?? 0) < 0 && 'text-[var(--destructive)]',\n                    )}\n                  >\n                    {row.lift === null ? '—' : signed(row.lift)}\n                  </td>\n                  <td className=\"text-muted-foreground px-4 py-2 text-end text-xs tabular-nums\">\n                    {row.ci ? `[${signed(row.ci[0])}, ${signed(row.ci[1])}]` : '—'}\n                  </td>\n                  <td className=\"px-4 py-2 text-end tabular-nums\">\n                    {row.p === null ? (\n                      '—'\n                    ) : row.thin ? (\n                      <span className=\"text-muted-foreground text-xs\">too few</span>\n                    ) : (\n                      <span className={cn(significant && 'font-medium')}>\n                        {row.p < 0.001 ? '<0.001' : row.p.toFixed(3)}\n                      </span>\n                    )}\n                  </td>\n                </tr>\n              )\n            })}\n          </tbody>\n        </table>\n      </div>\n\n      {/* The warning that matters more than the p-value. */}\n      {underpowered && (\n        <p\n          role=\"status\"\n          className=\"border-border text-muted-foreground flex items-start gap-2 border-t px-4 py-2 text-xs\"\n        >\n          <AlertTriangle aria-hidden=\"true\" className=\"mt-0.5 size-3.5 shrink-0\" />\n          <span>\n            Below the planned {targetSample?.toLocaleString()} per arm. Stopping at the first\n            significant reading inflates the false-positive rate well past {Math.round(alpha * 100)}%\n            — treat anything here as provisional.\n          </span>\n        </p>\n      )}\n    </div>\n  )\n}\n\nexport { AbTestResults }\nexport type { AbTestResultsProps }\n"
+    }
+  ]
+}