astralyx-ui 0.3.1 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astralyx-ui",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "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.4.1",
   "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,19 @@
         "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",
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
     {
       "name": "coordinate-input",
       "type": "registry:ui",
@@ -1096,6 +1189,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 +1450,20 @@
         "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": [
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
     {
       "name": "empty",
       "type": "registry:ui",
@@ -1451,6 +1570,21 @@
         "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",
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
     {
       "name": "feature-flag",
       "type": "registry:ui",
@@ -1625,6 +1759,18 @@
         "lib-utils"
       ]
     },
+    {
+      "name": "gantt",
+      "type": "registry:ui",
+      "title": "Gantt",
+      "description": "Work on a timeline: bars for duration, a computed critical path, and dependency conflicts drawn as conflicts rather than quietly rendered backwards.",
+      "category": "Views",
+      "dependencies": [],
+      "registryDependencies": [
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
     {
       "name": "gas-tracker",
       "type": "registry:ui",
@@ -1764,6 +1910,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 +2302,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 +2887,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 +2973,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 +3003,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 +3031,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 +3267,19 @@
         "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-editor",
       "type": "registry:ui",
@@ -3083,6 +3329,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 +3526,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 +3715,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. Overlaps are split into columns rather than stacked, so a clash never hides the meeting you were about to miss.",
+      "category": "Views",
+      "dependencies": [],
+      "registryDependencies": [
+        "lib-styles",
+        "lib-utils"
+      ]
+    },
     {
       "name": "schema-form",
       "type": "registry:ui",
@@ -3507,6 +3827,34 @@
         "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",
+        "lib-styles",
+        "lib-utils",
+        "select"
+      ]
+    },
+    {
+      "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 +3960,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 +4797,37 @@
         "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",
+        "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": [
+        "lib-styles",
+        "lib-utils",
+        "primitive-dismissable",
+        "primitive-popper"
+      ]
+    },
     {
       "name": "tree",
       "type": "registry:ui",
@@ -4450,6 +4842,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 +5194,13 @@
       ],
       "registryDependencies": []
     },
+    {
+      "name": "lib-qr",
+      "type": "registry:lib",
+      "title": "qr",
+      "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"
+    }
+  ]
+}

package/registry/items/attribution.json

@@ -0,0 +1,19 @@
+{
+  "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"
+  ],
+  "files": [
+    {
+      "path": "components/ui/attribution.tsx",
+      "type": "registry:ui",
+      "content": "import { useId, useMemo, useState, type ComponentProps, type ReactNode } from 'react'\nimport { dataPalette } from '@/lib/styles'\nimport { cn } from '@/lib/utils'\n\n/**\n * Credit for a conversion, split across the touchpoints that led to it.\n *\n * **The model is a control, not a setting buried in a config.** Last-touch says\n * paid search won; first-touch says the blog post did; linear says everyone\n * helped. These are the *same journeys* — the disagreement is entirely in the\n * rule, and any single number presented without its model is a claim\n * masquerading as a measurement. Switching models in place is the point of the\n * component: a channel whose share collapses when you change the rule was never\n * really driving conversions.\n *\n * **Five models, computed here from the raw journeys:**\n * - *First touch* — all credit to the first interaction.\n * - *Last touch* — all credit to the last. The default in most tools, and the\n *   most flattering to bottom-of-funnel spend.\n * - *Linear* — split evenly. No assumption, which is its virtue and its flaw.\n * - *Time decay* — later touches earn more, on a configurable half-life.\n * - *Position based* — 40/20/40 across first, middle and last.\n *\n * **None of them are causal.** Every model here divides observed credit among\n * touchpoints that were present; none establishes that a touchpoint *caused*\n * anything, and none can see the channels that never got a click. Incrementality\n * testing answers that question; this one shows you how sensitive your answer is\n * to an arbitrary rule, which is the honest thing a chart can do.\n */\nexport type Touchpoint = {\n  channel: string\n  at: Date | string\n}\n\nexport type Journey = {\n  id: string\n  touchpoints: Touchpoint[]\n  /** Revenue or count. Defaults to 1 conversion. */\n  value?: number\n}\n\nexport type AttributionModel = 'first' | 'last' | 'linear' | 'decay' | 'position'\n\ntype AttributionProps = Omit<ComponentProps<'div'>, 'onChange'> & {\n  journeys: Journey[]\n  model?: AttributionModel\n  defaultModel?: AttributionModel\n  onModelChange?: (model: AttributionModel) => void\n  /** Models offered in the switcher. */\n  models?: AttributionModel[]\n  /** Half-life in days for time decay. */\n  halfLife?: number\n  valueFormat?: (value: number) => string\n  emptyLabel?: string\n  label?: string\n  footnote?: ReactNode\n}\n\nconst MODEL_LABELS: Record<AttributionModel, string> = {\n  first: 'First touch',\n  last: 'Last touch',\n  linear: 'Linear',\n  decay: 'Time decay',\n  position: 'Position based',\n}\n\nconst asTime = (value: Date | string) =>\n  (value instanceof Date ? value : new Date(value)).getTime()\n\n/** Weights for one journey, summing to 1. */\nfunction weightsFor(journey: Journey, model: AttributionModel, halfLife: number): number[] {\n  const points = journey.touchpoints\n  const n = points.length\n  if (n === 0) return []\n  if (n === 1) return [1]\n\n  switch (model) {\n    case 'first':\n      return points.map((_, index) => (index === 0 ? 1 : 0))\n    case 'last':\n      return points.map((_, index) => (index === n - 1 ? 1 : 0))\n    case 'linear':\n      return points.map(() => 1 / n)\n    case 'position': {\n      // 40% first, 40% last, 20% shared by the middle.\n      if (n === 2) return [0.5, 0.5]\n      const middle = 0.2 / (n - 2)\n      return points.map((_, index) => (index === 0 || index === n - 1 ? 0.4 : middle))\n    }\n    case 'decay': {\n      const last = asTime(points[n - 1].at)\n      const dayMs = 86_400_000\n      const raw = points.map((point) => {\n        const daysBefore = (last - asTime(point.at)) / dayMs\n        return Math.pow(2, -daysBefore / halfLife)\n      })\n      const sum = raw.reduce((total, weight) => total + weight, 0) || 1\n      return raw.map((weight) => weight / sum)\n    }\n  }\n}\n\nfunction Attribution({\n  journeys,\n  model: modelProp,\n  defaultModel = 'last',\n  onModelChange,\n  models = ['first', 'last', 'linear', 'decay', 'position'],\n  halfLife = 7,\n  valueFormat = (value) => value.toFixed(1),\n  emptyLabel = 'No journeys.',\n  label = 'Attribution',\n  footnote,\n  className,\n  ...props\n}: AttributionProps) {\n  const titleId = useId()\n  const [internal, setInternal] = useState<AttributionModel>(defaultModel)\n  const model = modelProp ?? internal\n\n  const rows = useMemo(() => {\n    const credit = new Map<string, number>()\n    let total = 0\n\n    for (const journey of journeys) {\n      const value = journey.value ?? 1\n      const weights = weightsFor(journey, model, halfLife)\n      journey.touchpoints.forEach((point, index) => {\n        credit.set(point.channel, (credit.get(point.channel) ?? 0) + value * (weights[index] ?? 0))\n      })\n      total += value\n    }\n\n    return {\n      total,\n      channels: [...credit.entries()]\n        .map(([channel, amount]) => ({ channel, amount }))\n        .sort((a, b) => b.amount - a.amount),\n    }\n  }, [journeys, model, halfLife])\n\n  if (journeys.length === 0) {\n    return (\n      <div className={cn('text-muted-foreground p-4 text-xs', className)} {...props}>\n        {emptyLabel}\n      </div>\n    )\n  }\n\n  const max = Math.max(...rows.channels.map((row) => row.amount), 1)\n\n  const setModel = (next: AttributionModel) => {\n    if (modelProp === undefined) setInternal(next)\n    onModelChange?.(next)\n  }\n\n  return (\n    <div\n      data-slot=\"attribution\"\n      className={cn('flex flex-col gap-3', className)}\n      aria-labelledby={titleId}\n      {...props}\n    >\n      <div className=\"flex flex-wrap items-center justify-between gap-2\">\n        <p id={titleId} className=\"text-sm font-medium\">\n          {label}\n        </p>\n\n        {/* The model belongs on the chart, not in a settings panel: the number\n            means nothing without it. */}\n        <div role=\"radiogroup\" aria-label=\"Attribution model\" className=\"flex flex-wrap gap-1\">\n          {models.map((option) => (\n            <button\n              key={option}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={model === option}\n              onClick={() => setModel(option)}\n              className={cn(\n                'rounded-full px-2.5 py-1 text-xs',\n                model === option\n                  ? 'bg-foreground text-background'\n                  : 'text-muted-foreground hover:bg-muted',\n              )}\n            >\n              {MODEL_LABELS[option]}\n            </button>\n          ))}\n        </div>\n      </div>\n\n      <ul className=\"flex list-none flex-col gap-2\">\n        {rows.channels.map((row, index) => {\n          const share = rows.total > 0 ? row.amount / rows.total : 0\n          return (\n            <li key={row.channel} className=\"flex items-center gap-3\">\n              <span className=\"w-28 shrink-0 truncate text-xs\">{row.channel}</span>\n              <span className=\"bg-muted relative h-5 min-w-0 flex-1 overflow-hidden rounded-[3px]\">\n                <span\n                  className=\"absolute inset-y-0 start-0 rounded-[3px]\"\n                  style={{\n                    width: `${(row.amount / max) * 100}%`,\n                    background: dataPalette[index % dataPalette.length].fill,\n                    opacity: 0.75,\n                  }}\n                />\n              </span>\n              <span className=\"text-muted-foreground w-24 shrink-0 text-end text-xs tabular-nums\">\n                {valueFormat(row.amount)}\n                <span className=\"ms-1 opacity-70\">({(share * 100).toFixed(0)}%)</span>\n              </span>\n            </li>\n          )\n        })}\n      </ul>\n\n      <p className=\"text-muted-foreground text-xs\">\n        {footnote ?? (\n          <>\n            {journeys.length.toLocaleString()} journeys under {MODEL_LABELS[model].toLowerCase()}.\n            Attribution divides observed credit; it does not establish cause.\n          </>\n        )}\n      </p>\n    </div>\n  )\n}\n\nexport { Attribution }\nexport type { AttributionProps }\n"
+    }
+  ]
+}