@altertable/data-app 0.66.0 → 0.68.0

package/dist/react/ui/index.js

@@ -4,6 +4,8 @@ import {
   AppIcon2,
   classNames,
   Button2,
+  PressButton,
+  TooltipSurface,
   TooltipProvider2,
   Tooltip2,
   GradientScroll2,
@@ -17,18 +19,34 @@ import {
   AboutData2,
   DataAppProvider2,
   useDeclaredResult,
+  validateChoiceOptions,
   useAppVariables2,
+  Select2,
+  FilterActions2,
+  NumberField2,
+  NumberRangeField2,
+  NumberFilterPicker2,
   SearchField2,
   Skeleton2,
   SearchMatch2,
   searchItems2,
-  Combobox2,
+  ChoicePicker2,
+  CheckboxGroupContext,
   Checkbox2,
   DateRangePicker2,
+  FilterBar2,
   DimensionPicker2,
   createDataHooks2,
+  isPlainKeyEvent2,
+  MenuTrigger2,
+  MenuSection2,
+  MenuPopover2,
+  Menu2,
+  MenuItem2,
+  MenuSeparator2,
   LiveControl2,
   PresentStory2,
+  VariableBar2,
   DataAppFrame,
   Grid2,
   DataWidget2,
@@ -42,19 +60,24 @@ import {
   TableWidget2,
   TextWidget2,
   DataValue2,
+  chartBarFill,
   createDataContext2
-} from "../../chunks/contract-havnjmdr.js";
-import"../../chunks/contract-wz59z8pq.js";
-import"../../chunks/contract-mev09s5v.js";
+} from "../../chunks/index-gvers8jw.js";
 import {
-  invariant
-} from "../../chunks/contract-rfbakka4.js";
-import"../../chunks/contract-m6n8ctfc.js";
+  formatNumber2,
+  formatPercent2
+} from "../../chunks/index-mev09s5v.js";
+import"../../chunks/index-ag0cgnvq.js";
+import"../../chunks/index-mt93ff2b.js";
+import"../../chunks/index-m6n8ctfc.js";
 import {
   createDataClient2
-} from "../../chunks/contract-19ckn3n7.js";
-import"../../chunks/contract-pk603qj7.js";
-import"../../chunks/contract-e11m4y7f.js";
+} from "../../chunks/index-23dktynd.js";
+import"../../chunks/index-x69p7cv7.js";
+import"../../chunks/index-ev2b5aaf.js";
+import {
+  invariant
+} from "../../chunks/index-qd5xgx6y.js";
 
 // src/react/shellStyles.ts
 function injectDataAppShellStyles(options = {}) {
@@ -64,6 +87,7 @@ function injectDataAppShellStyles(options = {}) {
     css: `/* src/react/tokens.css */
 @layer atbl.tokens {
   :root {
+    --atbl-control-text-size: var(--atbl-type-body-size);
     --atbl-background: var(--atbl-palette-background);
     --atbl-surface: var(--atbl-palette-surface);
     --atbl-subtle: var(--atbl-palette-subtle);
@@ -812,14 +836,10 @@ var connectionView = defineDataView({
   isEmpty: () => false,
   emptyFallback: { title: "No connection" }
 });
-function GettingStarted({
-  config,
-  dataContext
-}) {
+function GettingStarted({ dataContext }) {
   const connection = useDeclaredResult(connectionView);
   const state = connection.view.kind === "error" || connection.view.kind === "stale-error" ? "error" : connection.refreshing || !connection.snapshot ? "checking" : "connected";
   return /* @__PURE__ */ jsxs(DataApp, {
-    config,
     dataContext,
     description: "Check your lakehouse connection, then build a view around a real question.",
     queries: connection.queries,
@@ -1064,7 +1084,376 @@ function GlossaryDefinition({
   });
 }
 // src/react/ui/TrendChart.tsx
-import { useLayoutEffect, useRef } from "react";
+import { useLayoutEffect, useRef, useState as useState2 } from "react";
+import {
+  AreaChart as RechartsAreaChart,
+  LineChart as RechartsLineChart,
+  ReferenceLine
+} from "recharts";
+
+// src/react/ui/chart-primitives.tsx
+import {
+  Area,
+  Dot,
+  Bar,
+  Line,
+  Scatter,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  DefaultTooltipContent
+} from "recharts";
+
+// src/react/ui/ChartLegend.tsx
+import {
+  Children,
+  useId,
+  useState
+} from "react";
+import { jsx as jsx6, jsxs as jsxs4, Fragment } from "react/jsx-runtime";
+function ChartLegendRoot({
+  children,
+  layout = "horizontal",
+  align = "start",
+  maxVisibleItems = 6,
+  className,
+  "aria-label": ariaLabel = "Chart legend",
+  ...props
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const listId = useId();
+  const items = Children.toArray(children);
+  const limit = Number.isFinite(maxVisibleItems) ? Math.max(1, Math.floor(maxVisibleItems)) : 6;
+  const visibleCount = items.length > limit ? limit - 1 : limit;
+  const hiddenCount = Math.max(0, items.length - visibleCount);
+  return /* @__PURE__ */ jsx6("div", {
+    className: "altertable-chart-legend-container",
+    children: /* @__PURE__ */ jsxs4("ul", {
+      id: listId,
+      ...props,
+      "aria-label": ariaLabel,
+      "data-layout": layout,
+      "data-align": align,
+      className: classNames("altertable-chart-legend", className),
+      children: [
+        expanded ? items : items.slice(0, visibleCount),
+        hiddenCount > 0 && /* @__PURE__ */ jsx6("li", {
+          className: "altertable-chart-legend-overflow",
+          children: /* @__PURE__ */ jsx6("button", {
+            type: "button",
+            "data-atbl-control": "action",
+            "data-atbl-focus": "ring",
+            className: "altertable-chart-legend-action",
+            "aria-expanded": expanded,
+            "aria-controls": props.id ?? listId,
+            onClick: () => setExpanded((value) => !value),
+            children: expanded ? "Show fewer" : `+${hiddenCount} more`
+          })
+        })
+      ]
+    })
+  });
+}
+function ChartLegendItem({
+  inactive,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6("li", {
+    ...props,
+    "data-inactive": inactive || undefined,
+    className: classNames("altertable-chart-legend-item", className)
+  });
+}
+function ChartLegendMarker({
+  kind,
+  color = kind === "bar" ? chartBarFill : "var(--atbl-accent)",
+  className,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs4("svg", {
+    ...props,
+    "aria-hidden": "true",
+    focusable: "false",
+    viewBox: kind === "square" ? "0 0 8 8" : "0 0 20 12",
+    "data-kind": kind,
+    className: classNames("altertable-chart-legend-marker", className),
+    style: { color, ...style },
+    children: [
+      kind === "square" && /* @__PURE__ */ jsx6("rect", {
+        width: "8",
+        height: "8",
+        fill: "currentColor"
+      }),
+      kind === "bar" && /* @__PURE__ */ jsx6("path", {
+        d: "M6 11V3Q6 1 8 1H12Q14 1 14 3V11Z",
+        fill: "currentColor"
+      }),
+      kind === "slice" && /* @__PURE__ */ jsx6("rect", {
+        x: "5",
+        y: "1",
+        width: "10",
+        height: "10",
+        rx: "2",
+        fill: "currentColor"
+      }),
+      kind === "point" && /* @__PURE__ */ jsx6("circle", {
+        cx: "10",
+        cy: "6",
+        r: "3",
+        fill: "currentColor"
+      }),
+      kind === "line" && /* @__PURE__ */ jsxs4(Fragment, {
+        children: [
+          /* @__PURE__ */ jsx6("path", {
+            d: "M1 6H19",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round"
+          }),
+          /* @__PURE__ */ jsx6("circle", {
+            cx: "10",
+            cy: "6",
+            r: "2.5",
+            fill: "var(--atbl-surface)",
+            stroke: "currentColor",
+            strokeWidth: "2"
+          })
+        ]
+      }),
+      kind === "area" && /* @__PURE__ */ jsxs4(Fragment, {
+        children: [
+          /* @__PURE__ */ jsx6("path", {
+            d: "M1 10L7 5L13 7L19 2V11H1Z",
+            fill: "currentColor",
+            fillOpacity: "0.14"
+          }),
+          /* @__PURE__ */ jsx6("path", {
+            d: "M1 10L7 5L13 7L19 2",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinejoin: "round",
+            strokeLinecap: "round"
+          })
+        ]
+      })
+    ]
+  });
+}
+function ChartLegendLabel({
+  className,
+  children,
+  title,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6("span", {
+    ...props,
+    title: title ?? (typeof children === "string" ? children : undefined),
+    className: classNames("altertable-chart-legend-label", className),
+    children
+  });
+}
+var ChartLegend = Object.assign(ChartLegendRoot, {
+  Item: ChartLegendItem,
+  Marker: ChartLegendMarker,
+  Label: ChartLegendLabel
+});
+
+// src/react/ui/chart-primitives.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var accent = "var(--atbl-accent)";
+function ChartDot({
+  active = false,
+  stroke = accent,
+  fill = active ? stroke : "var(--atbl-surface)",
+  r = active ? 4.5 : 3,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(Dot, {
+    stroke,
+    fill,
+    r,
+    strokeWidth: 2,
+    ...props
+  });
+}
+function ChartBar(props) {
+  return /* @__PURE__ */ jsx7(Bar, {
+    fill: chartBarFill,
+    radius: [5, 5, 0, 0],
+    maxBarSize: 30,
+    activeBar: { fill: accent },
+    isAnimationActive: false,
+    ...props
+  });
+}
+function ChartLine({
+  stroke = accent,
+  dot,
+  activeDot,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(Line, {
+    type: "linear",
+    stroke,
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    dot: dot === undefined || dot === true ? ({ cx, cy }) => /* @__PURE__ */ jsx7(ChartDot, {
+      cx,
+      cy,
+      stroke
+    }) : dot,
+    activeDot: activeDot === undefined || activeDot === true ? ({ cx, cy }) => /* @__PURE__ */ jsx7(ChartDot, {
+      cx,
+      cy,
+      stroke,
+      active: true
+    }) : activeDot,
+    isAnimationActive: false,
+    ...props
+  });
+}
+function ChartArea({
+  stroke = accent,
+  dot,
+  activeDot,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(Area, {
+    legendType: "square",
+    type: "linear",
+    stroke,
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: stroke,
+    fillOpacity: 0.14,
+    dot: dot === undefined || dot === true ? ({ cx, cy }) => /* @__PURE__ */ jsx7(ChartDot, {
+      cx,
+      cy,
+      stroke
+    }) : dot,
+    activeDot: activeDot === undefined || activeDot === true ? ({ cx, cy }) => /* @__PURE__ */ jsx7(ChartDot, {
+      cx,
+      cy,
+      stroke,
+      active: true
+    }) : activeDot,
+    isAnimationActive: false,
+    ...props
+  });
+}
+function ChartScatter(props) {
+  return /* @__PURE__ */ jsx7(Scatter, {
+    fill: accent,
+    isAnimationActive: false,
+    ...props
+  });
+}
+function ChartXAxis(props) {
+  return /* @__PURE__ */ jsx7(XAxis, {
+    stroke: "var(--atbl-muted)",
+    tickLine: false,
+    axisLine: { stroke: "var(--atbl-border)" },
+    tick: { fontSize: "var(--atbl-type-meta-size)" },
+    ...props
+  });
+}
+function ChartYAxis(props) {
+  return /* @__PURE__ */ jsx7(YAxis, {
+    stroke: "var(--atbl-muted)",
+    tickLine: false,
+    axisLine: false,
+    tick: { fontSize: "var(--atbl-type-meta-size)" },
+    ...props
+  });
+}
+function ChartGrid(props) {
+  return /* @__PURE__ */ jsx7(CartesianGrid, {
+    stroke: "var(--atbl-border)",
+    vertical: false,
+    ...props
+  });
+}
+function ChartTooltipContent(props) {
+  if (!props.active)
+    return null;
+  return /* @__PURE__ */ jsx7(TooltipSurface, {
+    "data-variant": "chart",
+    role: "tooltip",
+    children: /* @__PURE__ */ jsx7(DefaultTooltipContent, {
+      ...props,
+      separator: "",
+      payload: props.payload?.map((entry) => ({
+        ...entry,
+        unit: undefined,
+        formatter: (value, name, _item, index, payload) => {
+          const formatter = entry.formatter ?? props.formatter;
+          const formatted = formatter ? formatter(value, name, entry, index, props.payload ?? payload) : Array.isArray(value) ? value.join(" ~ ") : value;
+          if (formatted == null)
+            return null;
+          const [displayValue, displayName] = Array.isArray(formatted) ? formatted : [formatted, name];
+          return [
+            /* @__PURE__ */ jsxs5("span", {
+              className: "altertable-chart-tooltip-row",
+              children: [
+                /* @__PURE__ */ jsx7(ChartLegend.Marker, {
+                  kind: "square",
+                  className: "altertable-chart-tooltip-marker",
+                  color: entry.color ?? entry.stroke ?? entry.fill ?? "var(--atbl-accent)"
+                }),
+                /* @__PURE__ */ jsxs5("span", {
+                  className: "altertable-chart-tooltip-reading",
+                  children: [
+                    displayName,
+                    displayName !== undefined && displayName !== "" ? props.separator ?? " : " : "",
+                    displayValue,
+                    entry.unit
+                  ]
+                })
+              ]
+            }, entry.graphicalItemId),
+            ""
+          ];
+        }
+      })),
+      contentStyle: {
+        margin: 0,
+        padding: 0,
+        background: "transparent",
+        border: 0,
+        whiteSpace: "normal",
+        ...props.contentStyle
+      },
+      labelStyle: {
+        color: "var(--atbl-text)",
+        fontSize: "var(--atbl-type-body-size)",
+        fontWeight: 650,
+        lineHeight: 1.2,
+        ...props.labelStyle
+      },
+      itemStyle: {
+        color: "var(--atbl-text)",
+        paddingTop: 2,
+        paddingBottom: 0,
+        ...props.itemStyle
+      }
+    })
+  });
+}
+function ChartTooltip(props) {
+  return /* @__PURE__ */ jsx7(Tooltip, {
+    content: /* @__PURE__ */ jsx7(ChartTooltipContent, {}),
+    cursor: false,
+    isAnimationActive: false,
+    ...props
+  });
+}
 
 // src/react/ui/chart-data.ts
 function validateChartItems(kind, items) {
@@ -1085,7 +1474,7 @@ function validateChartItems(kind, items) {
 }
 
 // src/react/ui/TrendChart.tsx
-import { jsx as jsx6, jsxs as jsxs4, Fragment } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6, Fragment as Fragment2 } from "react/jsx-runtime";
 function TrendChart({
   items,
   unit,
@@ -1094,6 +1483,8 @@ function TrendChart({
   area = false
 }) {
   validateChartItems(area ? "area" : "line", items);
+  const Plot = area ? RechartsAreaChart : RechartsLineChart;
+  const [activeIndex, setActiveIndex] = useState2();
   const scrollport = useRef(null);
   useLayoutEffect(() => {
     const element = scrollport.current;
@@ -1103,67 +1494,80 @@ function TrendChart({
   const magnitude = items.reduce((max, item) => Math.max(max, Math.abs(item.value)), 1);
   const low = items.reduce((min, item) => Math.min(min, item.value / magnitude), 0);
   const high = items.reduce((max, item) => Math.max(max, item.value / magnitude), 0);
-  const span = high - low || 1;
-  function y(value) {
-    return 208 - (value / magnitude - low) / span * 196;
-  }
-  const points = items.map((item, index) => ({
-    x: (index + 0.5) / items.length * 1000,
-    y: y(item.value)
-  }));
-  const path = points.map((point, index) => `${index ? "L" : "M"}${point.x},${point.y}`).join(" ");
-  const first = points[0];
-  const last = points.at(-1);
-  return /* @__PURE__ */ jsxs4("section", {
+  return /* @__PURE__ */ jsxs6("section", {
     className: "altertable-trend-chart",
     "aria-label": ariaLabel,
     children: [
-      items.length === 0 && /* @__PURE__ */ jsx6("span", {
+      items.length === 0 && /* @__PURE__ */ jsx8("span", {
         children: "No data"
       }),
-      items.length > 0 && /* @__PURE__ */ jsx6(Fragment, {
-        children: /* @__PURE__ */ jsx6("div", {
+      items.length > 0 && /* @__PURE__ */ jsx8(Fragment2, {
+        children: /* @__PURE__ */ jsx8("div", {
           className: "altertable-trend-scroll",
           ref: scrollport,
-          children: /* @__PURE__ */ jsxs4("div", {
+          children: /* @__PURE__ */ jsxs6("div", {
             className: "altertable-trend-plot",
             style: { minWidth: items.length * 40 },
             children: [
-              /* @__PURE__ */ jsxs4("svg", {
-                viewBox: "0 0 1000 220",
-                preserveAspectRatio: "none",
+              /* @__PURE__ */ jsx8("div", {
+                className: "altertable-chart-canvas",
                 "aria-hidden": "true",
-                focusable: "false",
-                children: [
-                  /* @__PURE__ */ jsx6("line", {
-                    className: "altertable-trend-baseline",
-                    x1: "0",
-                    x2: "1000",
-                    y1: y(0),
-                    y2: y(0),
-                    vectorEffect: "non-scaling-stroke"
-                  }),
-                  area && first && last && /* @__PURE__ */ jsx6("path", {
-                    className: "altertable-trend-fill",
-                    d: `${path} L${last.x},${y(0)} L${first.x},${y(0)} Z`
-                  }),
-                  /* @__PURE__ */ jsx6("path", {
-                    className: "altertable-trend-line",
-                    d: path,
-                    vectorEffect: "non-scaling-stroke"
-                  })
-                ]
+                children: /* @__PURE__ */ jsxs6(Plot, {
+                  data: items.map((item) => ({
+                    ...item,
+                    plotValue: item.value / magnitude
+                  })),
+                  title: ariaLabel,
+                  responsive: true,
+                  width: "100%",
+                  height: 220,
+                  margin: { top: 12, right: 0, bottom: 12, left: 0 },
+                  accessibilityLayer: false,
+                  tabIndex: -1,
+                  children: [
+                    /* @__PURE__ */ jsx8(ChartXAxis, {
+                      hide: true,
+                      dataKey: "id",
+                      scale: "band"
+                    }),
+                    /* @__PURE__ */ jsx8(ChartYAxis, {
+                      hide: true,
+                      domain: [low, high === low ? low + 1 : high]
+                    }),
+                    /* @__PURE__ */ jsx8(ReferenceLine, {
+                      y: 0,
+                      stroke: "var(--atbl-border)"
+                    }),
+                    area && /* @__PURE__ */ jsx8(ChartArea, {
+                      dataKey: "plotValue",
+                      stroke: "none",
+                      fill: "var(--atbl-accent)",
+                      dot: false,
+                      activeDot: false
+                    }),
+                    /* @__PURE__ */ jsx8(ChartLine, {
+                      dataKey: "plotValue",
+                      dot: ({ cx, cy, index }) => /* @__PURE__ */ jsx8(ChartDot, {
+                        cx,
+                        cy,
+                        active: index === activeIndex
+                      }),
+                      activeDot: false
+                    })
+                  ]
+                })
               }),
-              /* @__PURE__ */ jsx6("div", {
+              /* @__PURE__ */ jsx8("div", {
                 className: "altertable-trend-points",
-                children: items.map((item, index) => /* @__PURE__ */ jsx6(Tooltip2, {
+                children: items.map((item, index) => /* @__PURE__ */ jsx8(Tooltip2, {
                   variant: "chart",
-                  content: /* @__PURE__ */ jsxs4(Fragment, {
+                  onOpenChange: (open) => setActiveIndex((current) => open ? index : current === index ? undefined : current),
+                  content: /* @__PURE__ */ jsxs6(Fragment2, {
                     children: [
-                      /* @__PURE__ */ jsx6("strong", {
+                      /* @__PURE__ */ jsx8("strong", {
                         children: item.label
                       }),
-                      /* @__PURE__ */ jsxs4("span", {
+                      /* @__PURE__ */ jsxs6("span", {
                         children: [
                           formatValue(item.value),
                           " ",
@@ -1173,22 +1577,18 @@ function TrendChart({
                     ]
                   }),
                   className: "altertable-chart-column",
-                  children: /* @__PURE__ */ jsxs4("button", {
+                  children: /* @__PURE__ */ jsxs6("button", {
                     "data-atbl-focus": "ring",
-                    "data-atbl-control": "action",
+                    "data-atbl-control": "default",
                     type: "button",
                     tabIndex: -1,
                     className: "altertable-trend-point",
                     "aria-label": `${item.label}: ${formatValue(item.value)} ${unit}`,
                     children: [
-                      /* @__PURE__ */ jsx6("span", {
-                        className: "altertable-trend-hit",
-                        children: /* @__PURE__ */ jsx6("span", {
-                          className: "altertable-trend-dot",
-                          style: { top: `${points[index].y / 220 * 100}%` }
-                        })
+                      /* @__PURE__ */ jsx8("span", {
+                        className: "altertable-trend-hit"
                       }),
-                      /* @__PURE__ */ jsx6("span", {
+                      /* @__PURE__ */ jsx8("span", {
                         className: "altertable-trend-label",
                         children: item.label
                       })
@@ -1205,33 +1605,34 @@ function TrendChart({
 }
 
 // src/react/ui/LineChart.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function LineChart(props) {
-  return /* @__PURE__ */ jsx7(TrendChart, {
+  return /* @__PURE__ */ jsx9(TrendChart, {
     ...props
   });
 }
 // src/react/ui/AreaChart.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function AreaChart(props) {
-  return /* @__PURE__ */ jsx8(TrendChart, {
+  return /* @__PURE__ */ jsx10(TrendChart, {
     ...props,
     area: true
   });
 }
 // src/react/ui/PieChart.tsx
-import { useState } from "react";
-import { jsx as jsx9, jsxs as jsxs5, Fragment as Fragment2 } from "react/jsx-runtime";
+import { useState as useState3 } from "react";
+import { jsx as jsx11, jsxs as jsxs7, Fragment as Fragment3 } from "react/jsx-runtime";
 function PieChart({
   items,
   unit,
   ariaLabel,
+  showLegend = true,
   formatValue = (value) => new Intl.NumberFormat().format(value)
 }) {
   validateChartItems("pie", items);
-  const [previewId, setPreviewId] = useState(null);
-  const [plotOpen, setPlotOpen] = useState(false);
-  const [legendId, setLegendId] = useState(null);
+  const [previewId, setPreviewId] = useState3(null);
+  const [plotOpen, setPlotOpen] = useState3(false);
+  const [legendId, setLegendId] = useState3(null);
   const maximum = items.reduce((max, item) => Math.max(max, item.value), 0);
   const total = maximum ? items.reduce((sum, item) => sum + item.value / maximum, 0) : 0;
   let cursor = -Math.PI / 2;
@@ -1258,12 +1659,12 @@ function PieChart({
     }).format(share);
   }
   function detail(item) {
-    return /* @__PURE__ */ jsxs5(Fragment2, {
+    return /* @__PURE__ */ jsxs7(Fragment3, {
       children: [
-        /* @__PURE__ */ jsx9("strong", {
+        /* @__PURE__ */ jsx11("strong", {
           children: item.label
         }),
-        /* @__PURE__ */ jsxs5("span", {
+        /* @__PURE__ */ jsxs7("span", {
           children: [
             formatValue(item.value),
             " ",
@@ -1276,37 +1677,37 @@ function PieChart({
     });
   }
   const preview = slices.find((item) => item.id === previewId);
-  return /* @__PURE__ */ jsxs5("section", {
+  return /* @__PURE__ */ jsxs7("section", {
     className: "altertable-pie-chart",
     "aria-label": ariaLabel,
     children: [
-      items.length === 0 && /* @__PURE__ */ jsx9("span", {
+      items.length === 0 && /* @__PURE__ */ jsx11("span", {
         children: "No data"
       }),
-      items.length > 0 && /* @__PURE__ */ jsxs5(Fragment2, {
+      items.length > 0 && /* @__PURE__ */ jsxs7(Fragment3, {
         children: [
-          /* @__PURE__ */ jsxs5("div", {
+          /* @__PURE__ */ jsxs7("div", {
             className: "altertable-pie-plot",
             children: [
-              /* @__PURE__ */ jsx9(Tooltip2, {
+              /* @__PURE__ */ jsx11(Tooltip2, {
                 variant: "chart",
                 className: "altertable-pie-tooltip",
                 onOpenChange: setPlotOpen,
                 content: preview ? detail(preview) : null,
-                children: /* @__PURE__ */ jsx9("svg", {
+                children: /* @__PURE__ */ jsx11("svg", {
                   viewBox: "0 0 220 220",
                   "aria-hidden": "true",
                   focusable: "false",
-                  children: total === 0 ? /* @__PURE__ */ jsx9("circle", {
+                  children: total === 0 ? /* @__PURE__ */ jsx11("circle", {
                     cx: "110",
                     cy: "110",
                     r: "100",
                     className: "altertable-pie-empty"
-                  }) : slices.filter((item) => item.share > 0).map((item) => /* @__PURE__ */ jsx9("path", {
+                  }) : slices.filter((item) => item.share > 0).map((item) => /* @__PURE__ */ jsx11("path", {
                     d: item.path,
                     fill: item.color,
                     className: "altertable-pie-slice",
-                    "data-active": item.id === (plotOpen && previewId ? previewId : legendId) || undefined,
+                    "data-active": item.id === (plotOpen && previewId ? previewId : showLegend ? legendId : null) || undefined,
                     onPointerDown: (event) => {
                       if (plotOpen && previewId !== item.id)
                         event.preventDefault();
@@ -1323,40 +1724,44 @@ function PieChart({
                   }, item.id))
                 })
               }),
-              total === 0 && /* @__PURE__ */ jsx9("span", {
+              total === 0 && /* @__PURE__ */ jsx11("span", {
                 className: "altertable-pie-empty-label",
                 children: "No nonzero values"
               })
             ]
           }),
-          /* @__PURE__ */ jsx9("div", {
+          showLegend && /* @__PURE__ */ jsx11(ChartLegend, {
+            layout: "vertical",
+            "aria-label": `${ariaLabel} legend`,
             className: "altertable-pie-legend",
-            children: slices.map((item) => /* @__PURE__ */ jsx9(Tooltip2, {
-              variant: "chart",
-              content: detail(item),
-              onOpenChange: (open) => setLegendId((current) => open ? item.id : current === item.id ? null : current),
-              children: /* @__PURE__ */ jsxs5("button", {
-                "data-atbl-focus": "ring",
-                "data-atbl-control": "action",
-                type: "button",
-                tabIndex: -1,
-                "aria-label": `${item.label}: ${formatValue(item.value)} ${unit}, ${percent(item.share)}`,
-                children: [
-                  /* @__PURE__ */ jsx9("span", {
-                    className: "altertable-pie-key",
-                    style: { background: item.color }
-                  }),
-                  /* @__PURE__ */ jsx9("span", {
-                    className: "altertable-pie-label",
-                    children: item.label
-                  }),
-                  /* @__PURE__ */ jsx9("strong", {
-                    children: formatValue(item.value)
-                  }),
-                  /* @__PURE__ */ jsx9("span", {
-                    children: percent(item.share)
-                  })
-                ]
+            children: slices.map((item) => /* @__PURE__ */ jsx11(ChartLegend.Item, {
+              children: /* @__PURE__ */ jsx11(Tooltip2, {
+                variant: "chart",
+                content: detail(item),
+                onOpenChange: (open) => setLegendId((current) => open ? item.id : current === item.id ? null : current),
+                children: /* @__PURE__ */ jsxs7("button", {
+                  "data-atbl-focus": "ring",
+                  "data-atbl-control": "default",
+                  type: "button",
+                  tabIndex: -1,
+                  "aria-label": `${item.label}: ${formatValue(item.value)} ${unit}, ${percent(item.share)}`,
+                  children: [
+                    /* @__PURE__ */ jsx11(ChartLegend.Marker, {
+                      kind: "square",
+                      color: item.color
+                    }),
+                    /* @__PURE__ */ jsx11(ChartLegend.Label, {
+                      className: "altertable-pie-label",
+                      children: item.label
+                    }),
+                    /* @__PURE__ */ jsx11("strong", {
+                      children: formatValue(item.value)
+                    }),
+                    /* @__PURE__ */ jsx11("span", {
+                      children: percent(item.share)
+                    })
+                  ]
+                })
               })
             }, item.id))
           })
@@ -1366,7 +1771,7 @@ function PieChart({
   });
 }
 // src/react/ui/ScatterChart.tsx
-import { jsx as jsx10, jsxs as jsxs6, Fragment as Fragment3 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs8, Fragment as Fragment4 } from "react/jsx-runtime";
 function formatNumber(value) {
   return new Intl.NumberFormat(undefined, { maximumFractionDigits: 1 }).format(value);
 }
@@ -1395,37 +1800,37 @@ function ScatterChart({
   validateChartItems("scatter", items);
   const xScale = scale(items.map((item) => item.x));
   const yScale = scale(items.map((item) => item.y));
-  return /* @__PURE__ */ jsxs6("section", {
+  return /* @__PURE__ */ jsxs8("section", {
     className: "altertable-scatter-chart",
     "aria-label": ariaLabel,
     children: [
-      items.length === 0 && /* @__PURE__ */ jsx10("span", {
+      items.length === 0 && /* @__PURE__ */ jsx12("span", {
         children: "No data"
       }),
-      items.length > 0 && /* @__PURE__ */ jsxs6(Fragment3, {
+      items.length > 0 && /* @__PURE__ */ jsxs8(Fragment4, {
         children: [
-          /* @__PURE__ */ jsxs6("p", {
+          /* @__PURE__ */ jsxs8("p", {
             className: "altertable-scatter-axis-title",
             children: [
               yLabel,
               yUnit && ` (${yUnit})`
             ]
           }),
-          /* @__PURE__ */ jsx10("div", {
+          /* @__PURE__ */ jsx12("div", {
             className: "altertable-scatter-axes",
-            children: /* @__PURE__ */ jsxs6("div", {
+            children: /* @__PURE__ */ jsxs8("div", {
               className: "altertable-scatter-plot",
               children: [
-                yScale.ticks.map((value, index) => /* @__PURE__ */ jsx10("div", {
+                yScale.ticks.map((value, index) => /* @__PURE__ */ jsx12("div", {
                   className: "altertable-scatter-gridline",
                   style: { bottom: `${index * 50}%` },
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ jsx10("span", {
+                  children: /* @__PURE__ */ jsx12("span", {
                     title: formatY(value),
                     children: formatY(value)
                   })
                 }, index)),
-                xScale.ticks.map((value, index) => /* @__PURE__ */ jsx10("span", {
+                xScale.ticks.map((value, index) => /* @__PURE__ */ jsx12("span", {
                   className: "altertable-scatter-x-tick",
                   "data-edge": index,
                   style: { left: `${index * 50}%` },
@@ -1433,14 +1838,14 @@ function ScatterChart({
                   title: formatX(value),
                   children: formatX(value)
                 }, index)),
-                items.map((item) => /* @__PURE__ */ jsx10(Tooltip2, {
+                items.map((item) => /* @__PURE__ */ jsx12(Tooltip2, {
                   variant: "chart",
-                  content: /* @__PURE__ */ jsxs6(Fragment3, {
+                  content: /* @__PURE__ */ jsxs8(Fragment4, {
                     children: [
-                      /* @__PURE__ */ jsx10("strong", {
+                      /* @__PURE__ */ jsx12("strong", {
                         children: item.label
                       }),
-                      /* @__PURE__ */ jsxs6("span", {
+                      /* @__PURE__ */ jsxs8("span", {
                         children: [
                           xLabel,
                           ": ",
@@ -1449,7 +1854,7 @@ function ScatterChart({
                           xUnit
                         ]
                       }),
-                      /* @__PURE__ */ jsxs6("span", {
+                      /* @__PURE__ */ jsxs8("span", {
                         children: [
                           yLabel,
                           ": ",
@@ -1465,20 +1870,20 @@ function ScatterChart({
                     left: `${xScale.position(item.x)}%`,
                     bottom: `${yScale.position(item.y)}%`
                   },
-                  children: /* @__PURE__ */ jsx10("button", {
+                  children: /* @__PURE__ */ jsx12("button", {
                     "data-atbl-focus": "ring",
-                    "data-atbl-control": "action",
+                    "data-atbl-control": "default",
                     type: "button",
                     tabIndex: -1,
                     className: "altertable-scatter-point",
                     "aria-label": `${item.label}: ${xLabel} ${formatX(item.x)} ${xUnit}, ${yLabel} ${formatY(item.y)} ${yUnit}`,
-                    children: /* @__PURE__ */ jsx10("span", {})
+                    children: /* @__PURE__ */ jsx12("span", {})
                   })
                 }, item.id))
               ]
             })
           }),
-          /* @__PURE__ */ jsxs6("p", {
+          /* @__PURE__ */ jsxs8("p", {
             className: "altertable-scatter-axis-title altertable-scatter-x-title",
             children: [
               xLabel,
@@ -1491,8 +1896,9 @@ function ScatterChart({
   });
 }
 // src/react/ui/BarChart.tsx
-import { useLayoutEffect as useLayoutEffect2, useRef as useRef2 } from "react";
-import { jsx as jsx11, jsxs as jsxs7, Fragment as Fragment4 } from "react/jsx-runtime";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState4 } from "react";
+import { BarChart as RechartsBarChart, Cell } from "recharts";
+import { jsx as jsx13, jsxs as jsxs9, Fragment as Fragment5 } from "react/jsx-runtime";
 function BarChart({
   items,
   unit,
@@ -1500,6 +1906,7 @@ function BarChart({
   formatValue = (value) => new Intl.NumberFormat().format(value)
 }) {
   validateChartItems("bar", items);
+  const [activeId, setActiveId] = useState4();
   const scrollport = useRef2(null);
   useLayoutEffect2(() => {
     const element = scrollport.current;
@@ -1507,59 +1914,1152 @@ function BarChart({
       element.scrollLeft = element.scrollWidth - element.clientWidth;
   }, [items]);
   const maximum = items.reduce((max, item) => Math.max(max, item.value), 1);
-  return /* @__PURE__ */ jsxs7("section", {
+  return /* @__PURE__ */ jsxs9("section", {
     className: "altertable-selectable-bars",
     "aria-label": ariaLabel,
     children: [
-      items.length === 0 && /* @__PURE__ */ jsx11("span", {
+      items.length === 0 && /* @__PURE__ */ jsx13("span", {
         children: "No data"
       }),
-      /* @__PURE__ */ jsx11("div", {
+      /* @__PURE__ */ jsx13("div", {
         className: "altertable-selectable-bars-scroll",
         ref: scrollport,
-        children: items.map((item) => /* @__PURE__ */ jsx11(Tooltip2, {
-          variant: "chart",
-          content: /* @__PURE__ */ jsxs7(Fragment4, {
+        children: /* @__PURE__ */ jsxs9("div", {
+          className: "altertable-selectable-bars-plot",
+          style: { minWidth: items.length * 45 },
+          children: [
+            /* @__PURE__ */ jsx13("div", {
+              className: "altertable-chart-canvas",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsxs9(RechartsBarChart, {
+                data: items.map((item) => ({
+                  ...item,
+                  plotValue: item.value / maximum
+                })),
+                title: ariaLabel,
+                responsive: true,
+                width: "100%",
+                height: 220,
+                margin: { top: 0, right: 0, bottom: 0, left: 0 },
+                accessibilityLayer: false,
+                tabIndex: -1,
+                barCategoryGap: "24%",
+                children: [
+                  /* @__PURE__ */ jsx13(ChartXAxis, {
+                    hide: true,
+                    dataKey: "id",
+                    scale: "band"
+                  }),
+                  /* @__PURE__ */ jsx13(ChartYAxis, {
+                    hide: true,
+                    domain: [0, 1],
+                    allowDataOverflow: true
+                  }),
+                  /* @__PURE__ */ jsx13(ChartBar, {
+                    dataKey: "plotValue",
+                    minPointSize: (value) => (value ?? 0) > 0 ? 7 : 0,
+                    children: items.map((item) => /* @__PURE__ */ jsx13(Cell, {
+                      fill: activeId === item.id ? "var(--atbl-accent)" : chartBarFill
+                    }, item.id))
+                  })
+                ]
+              })
+            }),
+            /* @__PURE__ */ jsx13("div", {
+              className: "altertable-selectable-bars-items",
+              children: items.map((item) => /* @__PURE__ */ jsx13(Tooltip2, {
+                variant: "chart",
+                onOpenChange: (open) => setActiveId((current) => open ? item.id : current === item.id ? undefined : current),
+                content: /* @__PURE__ */ jsxs9(Fragment5, {
+                  children: [
+                    /* @__PURE__ */ jsx13("strong", {
+                      children: item.label
+                    }),
+                    /* @__PURE__ */ jsxs9("span", {
+                      children: [
+                        formatValue(item.value),
+                        " ",
+                        unit
+                      ]
+                    })
+                  ]
+                }),
+                className: "altertable-chart-column",
+                children: /* @__PURE__ */ jsxs9("button", {
+                  "data-atbl-focus": "ring",
+                  "data-atbl-control": "default",
+                  type: "button",
+                  tabIndex: -1,
+                  className: "altertable-selectable-bars-item",
+                  "aria-label": `${item.label}: ${formatValue(item.value)} ${unit}`,
+                  children: [
+                    /* @__PURE__ */ jsx13("span", {
+                      className: "altertable-selectable-bars-area"
+                    }),
+                    /* @__PURE__ */ jsx13("span", {
+                      className: "altertable-selectable-bars-label",
+                      children: item.label
+                    })
+                  ]
+                })
+              }, item.id))
+            })
+          ]
+        })
+      })
+    ]
+  });
+}
+// src/react/ui/RadioGroup.tsx
+import {
+  RadioGroup as AriaRadioGroup,
+  Radio as AriaRadio,
+  Label
+} from "react-aria-components";
+import { jsx as jsx14, jsxs as jsxs10, Fragment as Fragment6 } from "react/jsx-runtime";
+function RadioGroup({
+  label,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs10(AriaRadioGroup, {
+    ...props,
+    className: classNames("altertable-radio-group", className),
+    children: [
+      /* @__PURE__ */ jsx14(Label, {
+        className: "altertable-control-label",
+        children: label
+      }),
+      children
+    ]
+  });
+}
+function Radio({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx14(AriaRadio, {
+    ...props,
+    "data-atbl-control": "action",
+    "data-atbl-focus": "ring",
+    className: classNames("altertable-radio", className),
+    children: (state) => /* @__PURE__ */ jsxs10(Fragment6, {
+      children: [
+        /* @__PURE__ */ jsx14("span", {
+          className: "altertable-radio-mark",
+          "aria-hidden": "true"
+        }),
+        typeof children === "function" ? children(state) : children
+      ]
+    })
+  });
+}
+function SegmentedControl({
+  options,
+  className,
+  ...props
+}) {
+  validateChoiceOptions(options);
+  return /* @__PURE__ */ jsx14(RadioGroup, {
+    ...props,
+    orientation: "horizontal",
+    className: classNames("altertable-segmented-control", className),
+    children: /* @__PURE__ */ jsx14("div", {
+      className: "altertable-segmented-options",
+      children: options.map((option) => /* @__PURE__ */ jsx14(Radio, {
+        value: option.id,
+        "data-atbl-internal-surface": "option",
+        children: option.label
+      }, option.id))
+    })
+  });
+}
+// src/react/ui/CheckboxGroup.tsx
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+function CheckboxGroup({
+  label,
+  values,
+  onChange,
+  className,
+  children,
+  disabled,
+  ...props
+}) {
+  invariant(new Set(values).size === values.length, "Checkbox group values must be unique.");
+  return /* @__PURE__ */ jsxs11("fieldset", {
+    ...props,
+    disabled,
+    className: classNames("altertable-checkbox-group", className),
+    children: [
+      /* @__PURE__ */ jsx15("legend", {
+        children: label
+      }),
+      /* @__PURE__ */ jsx15(CheckboxGroupContext, {
+        value: {
+          values,
+          disabled,
+          onChange(value, checked) {
+            onChange(checked ? [...values.filter((item) => item !== value), value] : values.filter((item) => item !== value));
+          }
+        },
+        children
+      })
+    ]
+  });
+}
+// src/react/ui/ComposedChart.tsx
+import { useState as useState5 } from "react";
+
+// src/react/ui/ComposedChartLegend.tsx
+import { Legend } from "recharts";
+import { jsx as jsx16, jsxs as jsxs12, Fragment as Fragment7 } from "react/jsx-runtime";
+var legendMarkerKinds = {
+  square: "area",
+  rect: "bar",
+  line: "line",
+  plainline: "line"
+};
+function LegendContent({
+  payload = [],
+  maxVisibleItems,
+  formatter,
+  layout,
+  align,
+  labelStyle,
+  iconType,
+  iconSize = 8,
+  inactiveColor = "var(--atbl-muted)",
+  position,
+  verticalAlign,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  "aria-label": ariaLabel
+}) {
+  if (!payload.some((entry) => entry.type !== "none"))
+    return null;
+  const vertical = layout === "vertical" || layout === "auto" && (position === "left" || position === "right");
+  return /* @__PURE__ */ jsx16(ChartLegend, {
+    "aria-label": ariaLabel,
+    className: position === "top" || position == null && verticalAlign === "top" ? "altertable-composed-chart-legend-above" : position === "bottom" || position == null && verticalAlign !== "middle" && !vertical ? "altertable-composed-chart-legend-below" : undefined,
+    maxVisibleItems,
+    layout: vertical ? "vertical" : "horizontal",
+    align: align === "right" ? "end" : align === "left" ? "start" : "center",
+    children: payload.map((entry, index) => {
+      if (entry.type === "none")
+        return null;
+      const type = iconType ?? entry.type;
+      const kind = iconType ? legendMarkerKinds[type ?? "none"] ?? "point" : "square";
+      const formatLabel = entry.formatter ?? formatter;
+      const label = formatLabel ? formatLabel(entry.value, entry, index) : entry.value;
+      const content = /* @__PURE__ */ jsxs12(Fragment7, {
+        children: [
+          type !== "none" && (entry.legendIcon ?? /* @__PURE__ */ jsx16(ChartLegend.Marker, {
+            kind,
+            color: entry.inactive ? inactiveColor : entry.color,
+            style: {
+              width: iconSize,
+              height: kind === "square" ? iconSize : iconSize * 0.6
+            }
+          })),
+          /* @__PURE__ */ jsx16(ChartLegend.Label, {
+            style: labelStyle,
+            children: label
+          })
+        ]
+      });
+      return /* @__PURE__ */ jsx16(ChartLegend.Item, {
+        inactive: entry.inactive,
+        onMouseEnter: onMouseEnter ? (event) => onMouseEnter(entry, index, event) : undefined,
+        onMouseLeave: onMouseLeave ? (event) => onMouseLeave(entry, index, event) : undefined,
+        children: onClick ? /* @__PURE__ */ jsx16("button", {
+          type: "button",
+          "data-atbl-control": "action",
+          "data-atbl-focus": "ring",
+          className: "altertable-chart-legend-action",
+          onClick: (event) => onClick(entry, index, event),
+          children: content
+        }) : content
+      }, index);
+    })
+  });
+}
+function ComposedChartLegend({
+  maxVisibleItems,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx16(Legend, {
+    iconSize: 8,
+    inactiveColor: "var(--atbl-muted)",
+    content: /* @__PURE__ */ jsx16(LegendContent, {
+      maxVisibleItems
+    }),
+    ...props
+  });
+}
+
+// src/react/ui/ComposedChart.tsx
+import {
+  ComposedChart as RechartsComposedChart,
+  ZAxis,
+  ReferenceLine as ReferenceLine2,
+  ReferenceArea,
+  ReferenceDot,
+  Brush,
+  Cell as Cell2,
+  Label as Label2,
+  LabelList,
+  ErrorBar
+} from "recharts";
+import { jsx as jsx17 } from "react/jsx-runtime";
+function ComposedChartRoot({
+  data,
+  ariaLabel,
+  width = "100%",
+  height = 300,
+  responsive = true,
+  className,
+  ...props
+}) {
+  const [pointerFocus, setPointerFocus] = useState5(false);
+  return /* @__PURE__ */ jsx17("section", {
+    className: ["altertable-composed-chart", className].filter(Boolean).join(" "),
+    "aria-label": ariaLabel,
+    "data-atbl-internal-pointer-focus": pointerFocus || undefined,
+    onPointerDownCapture: () => setPointerFocus(true),
+    onKeyDownCapture: () => setPointerFocus(false),
+    onBlurCapture: (event) => {
+      if (!event.currentTarget.contains(event.relatedTarget))
+        setPointerFocus(false);
+    },
+    children: /* @__PURE__ */ jsx17(RechartsComposedChart, {
+      "data-atbl-focus": "inset",
+      ...props,
+      data,
+      width,
+      height,
+      responsive,
+      title: ariaLabel
+    })
+  });
+}
+var ComposedChart = Object.assign(ComposedChartRoot, {
+  Dot: ChartDot,
+  Area: ChartArea,
+  Bar: ChartBar,
+  Line: ChartLine,
+  Scatter: ChartScatter,
+  XAxis: ChartXAxis,
+  YAxis: ChartYAxis,
+  ZAxis,
+  CartesianGrid: ChartGrid,
+  Tooltip: ChartTooltip,
+  Legend: ComposedChartLegend,
+  ReferenceLine: ReferenceLine2,
+  ReferenceArea,
+  ReferenceDot,
+  Brush,
+  Cell: Cell2,
+  Label: Label2,
+  LabelList,
+  ErrorBar
+});
+// src/react/ui/FunnelChart.tsx
+import { Fragment as Fragment8, useEffect, useRef as useRef3, useState as useState6 } from "react";
+
+// src/react/ui/useSvgId.ts
+import { useId as useId2 } from "react";
+function useSvgId() {
+  const id = useId2();
+  return `svg-${Array.from(id, (character) => /[a-zA-Z0-9-]/.test(character) ? character : `_${character.codePointAt(0).toString(16)}_`).join("")}`;
+}
+
+// src/react/ui/FunnelChart.tsx
+import { jsx as jsx18, jsxs as jsxs13, Fragment as Fragment9 } from "react/jsx-runtime";
+function FunnelChart({
+  steps,
+  series,
+  unit,
+  ariaLabel,
+  className,
+  formatValue = formatNumber2
+}) {
+  const chartId = useSvgId();
+  const [highlighted, setHighlighted] = useState6(null);
+  const clearTimer = useRef3(null);
+  function cancelClear() {
+    if (clearTimer.current !== null)
+      clearTimeout(clearTimer.current);
+    clearTimer.current = null;
+  }
+  useEffect(() => cancelClear, []);
+  function highlight(id, conversion, step) {
+    cancelClear();
+    setHighlighted({ id, conversion, step });
+  }
+  function clearHighlight() {
+    cancelClear();
+    setHighlighted(null);
+  }
+  function scheduleClear() {
+    cancelClear();
+    clearTimer.current = setTimeout(() => setHighlighted(null), 100);
+  }
+  for (const [kind, items] of [
+    ["funnel step", steps],
+    ["funnel series", series]
+  ]) {
+    const ids = new Set;
+    for (const item of items) {
+      invariant(item.id.trim().length > 0 && !ids.has(item.id), `${kind} chart IDs must be nonblank and unique.`);
+      ids.add(item.id);
+    }
+  }
+  for (const item of series) {
+    invariant(item.values.length === steps.length, "funnel chart counts must align with steps.");
+    item.values.forEach((value, index) => {
+      invariant(Number.isFinite(value) && value >= 0, "funnel chart counts must be finite and nonnegative.");
+      invariant(index === 0 || value <= item.values[index - 1], "funnel chart counts must be nonincreasing.");
+    });
+  }
+  function reading(item, index) {
+    const first = item.values[0] ?? 0;
+    const current = item.values[index];
+    const previous = item.values[Math.max(0, index - 1)];
+    return {
+      current,
+      previous,
+      dropped: previous - current,
+      conversion: first > 0 ? current / first : null,
+      dropOff: first > 0 ? (previous - current) / first : null
+    };
+  }
+  const data = steps.map((step, index) => ({
+    label: step.label,
+    index,
+    ...Object.fromEntries(series.flatMap((item, seriesIndex) => {
+      const value = reading(item, index);
+      return [
+        [`conversion${seriesIndex}`, (value.conversion ?? 0) * 100],
+        [
+          `drop${seriesIndex}`,
+          (value.dropOff ?? (index === 0 ? 1 : 0)) * 100
+        ]
+      ];
+    }))
+  }));
+  return /* @__PURE__ */ jsx18("section", {
+    className: classNames("altertable-funnel-chart", className),
+    "aria-label": ariaLabel,
+    onKeyDownCapture: clearHighlight,
+    children: steps.length === 0 || series.length === 0 ? /* @__PURE__ */ jsx18("span", {
+      children: "No data"
+    }) : /* @__PURE__ */ jsxs13(Fragment9, {
+      children: [
+        /* @__PURE__ */ jsx18("div", {
+          className: "altertable-funnel-summary",
+          children: series.map((item, index) => /* @__PURE__ */ jsxs13("div", {
             children: [
-              /* @__PURE__ */ jsx11("strong", {
-                children: item.label
-              }),
-              /* @__PURE__ */ jsxs7("span", {
+              /* @__PURE__ */ jsxs13("span", {
                 children: [
-                  formatValue(item.value),
-                  " ",
-                  unit
+                  /* @__PURE__ */ jsx18(ChartLegend.Marker, {
+                    kind: "square",
+                    color: `var(--atbl-chart-${index % 8 + 1})`
+                  }),
+                  item.label
                 ]
+              }),
+              /* @__PURE__ */ jsx18("strong", {
+                children: formatPercent2(reading(item, steps.length - 1).conversion)
               })
             ]
-          }),
-          className: "altertable-chart-column",
-          children: /* @__PURE__ */ jsxs7("button", {
-            "data-atbl-focus": "ring",
-            "data-atbl-control": "action",
-            type: "button",
-            tabIndex: -1,
-            className: "altertable-selectable-bars-item",
-            "aria-label": `${item.label}: ${formatValue(item.value)} ${unit}`,
-            children: [
-              /* @__PURE__ */ jsx11("span", {
-                className: "altertable-selectable-bars-area",
-                children: /* @__PURE__ */ jsx11("span", {
-                  className: "altertable-selectable-bars-bar",
-                  style: {
-                    height: `${Math.max(item.value > 0 ? 3 : 0, item.value / maximum * 100)}%`
+          }, item.id))
+        }),
+        /* @__PURE__ */ jsxs13("p", {
+          className: "altertable-analytics-note",
+          children: [
+            steps[0].label,
+            " → ",
+            steps.at(-1).label
+          ]
+        }),
+        /* @__PURE__ */ jsx18("div", {
+          className: "altertable-funnel-scroll",
+          children: /* @__PURE__ */ jsx18("div", {
+            style: {
+              minWidth: steps.length * Math.max(96, series.length * 40)
+            },
+            children: /* @__PURE__ */ jsxs13(ComposedChart, {
+              data,
+              ariaLabel: `${ariaLabel} plot`,
+              height: 300,
+              barCategoryGap: "4%",
+              barGap: 1,
+              onMouseLeave: clearHighlight,
+              children: [
+                /* @__PURE__ */ jsx18(ComposedChart.CartesianGrid, {}),
+                /* @__PURE__ */ jsx18(ComposedChart.XAxis, {
+                  dataKey: "label",
+                  interval: 0,
+                  height: 48
+                }),
+                /* @__PURE__ */ jsx18(ComposedChart.YAxis, {
+                  domain: [0, 100],
+                  width: 42,
+                  tickFormatter: (value) => `${value}%`
+                }),
+                /* @__PURE__ */ jsx18("defs", {
+                  children: series.map((item, index) => /* @__PURE__ */ jsxs13(Fragment8, {
+                    children: [
+                      /* @__PURE__ */ jsxs13("linearGradient", {
+                        id: `${chartId}-gradient-${index}`,
+                        x1: "0",
+                        x2: "0",
+                        y1: "1",
+                        y2: "0",
+                        children: [
+                          /* @__PURE__ */ jsx18("stop", {
+                            offset: "0%",
+                            stopColor: `var(--atbl-chart-${index % 8 + 1})`,
+                            stopOpacity: 0.5
+                          }),
+                          /* @__PURE__ */ jsx18("stop", {
+                            offset: "100%",
+                            stopColor: `var(--atbl-chart-${index % 8 + 1})`,
+                            stopOpacity: 0.7
+                          })
+                        ]
+                      }),
+                      /* @__PURE__ */ jsxs13("pattern", {
+                        id: `${chartId}-hatch-${index}`,
+                        patternUnits: "userSpaceOnUse",
+                        width: "6",
+                        height: "6",
+                        patternTransform: "rotate(45)",
+                        children: [
+                          /* @__PURE__ */ jsx18("rect", {
+                            width: "8",
+                            height: "8",
+                            fill: `var(--atbl-chart-${index % 8 + 1})`,
+                            fillOpacity: 0.16
+                          }),
+                          /* @__PURE__ */ jsx18("line", {
+                            x1: "0",
+                            y1: "0",
+                            x2: "0",
+                            y2: "8",
+                            stroke: `var(--atbl-chart-${index % 8 + 1})`,
+                            strokeOpacity: 0.4,
+                            strokeWidth: "2"
+                          })
+                        ]
+                      })
+                    ]
+                  }, item.id))
+                }),
+                series.map((item, index) => /* @__PURE__ */ jsxs13(Fragment8, {
+                  children: [
+                    /* @__PURE__ */ jsx18(ComposedChart.Bar, {
+                      dataKey: `conversion${index}`,
+                      name: item.label,
+                      stackId: item.id,
+                      fill: `url(#${chartId}-gradient-${index})`,
+                      radius: 0,
+                      maxBarSize: undefined,
+                      activeBar: false,
+                      minPointSize: 0,
+                      opacity: !highlighted || highlighted.id === item.id ? 1 : 0.2,
+                      onMouseEnter: (bar) => highlight(item.id, true, bar.payload.index),
+                      onMouseLeave: scheduleClear,
+                      onClick: (bar) => highlight(item.id, true, bar.payload.index)
+                    }),
+                    /* @__PURE__ */ jsx18(ComposedChart.Bar, {
+                      dataKey: `drop${index}`,
+                      name: `${item.label} drop-off`,
+                      stackId: item.id,
+                      fill: `url(#${chartId}-hatch-${index})`,
+                      opacity: !highlighted || highlighted.id === item.id ? 1 : 0.2,
+                      onMouseEnter: (bar) => highlight(item.id, false, bar.payload.index),
+                      onMouseLeave: scheduleClear,
+                      onClick: (bar) => highlight(item.id, false, bar.payload.index),
+                      radius: 0,
+                      maxBarSize: undefined,
+                      activeBar: false
+                    })
+                  ]
+                }, item.id)),
+                /* @__PURE__ */ jsx18(ComposedChart.Tooltip, {
+                  content: ({ active, payload }) => {
+                    const index = payload?.[0]?.payload.index;
+                    if (!active || typeof index !== "number")
+                      return null;
+                    const tooltipItems = series.filter((item) => !highlighted || highlighted.step !== index || item.id === highlighted.id).flatMap((item) => {
+                      const value = reading(item, index);
+                      const selected = highlighted?.step === index;
+                      const readings = selected ? [highlighted.conversion] : [true, false];
+                      const seriesIndex = series.indexOf(item);
+                      return readings.map((conversion) => ({
+                        name: item.label,
+                        graphicalItemId: `${item.id}-${conversion ? "conversion" : "drop-off"}`,
+                        dataKey: `${item.id}-${conversion ? "conversion" : "drop-off"}`,
+                        color: `var(--atbl-chart-${seriesIndex % 8 + 1})`,
+                        value: (conversion ? value.conversion : value.dropOff) ?? 0,
+                        formatter: () => /* @__PURE__ */ jsxs13(Fragment9, {
+                          children: [
+                            formatPercent2(conversion ? value.conversion : value.dropOff),
+                            " ",
+                            conversion ? "conversion" : "drop-off",
+                            /* @__PURE__ */ jsxs13("span", {
+                              className: "altertable-funnel-tooltip-detail",
+                              children: [
+                                formatValue(conversion ? value.current : value.dropped),
+                                " ",
+                                "of ",
+                                formatValue(value.previous),
+                                " ",
+                                unit
+                              ]
+                            })
+                          ]
+                        })
+                      }));
+                    });
+                    return /* @__PURE__ */ jsx18(ChartTooltipContent, {
+                      active: true,
+                      label: steps[index].label,
+                      payload: tooltipItems
+                    });
                   }
                 })
+              ]
+            })
+          })
+        }),
+        /* @__PURE__ */ jsx18("ul", {
+          className: "altertable-sr-only",
+          children: steps.map((step, index) => /* @__PURE__ */ jsxs13("li", {
+            children: [
+              step.label,
+              series.map((item) => {
+                const value = reading(item, index);
+                return /* @__PURE__ */ jsxs13("span", {
+                  children: [
+                    " ",
+                    "· ",
+                    item.label,
+                    ": ",
+                    formatValue(value.current),
+                    " ",
+                    unit,
+                    ",",
+                    " ",
+                    formatPercent2(value.conversion),
+                    " conversion,",
+                    " ",
+                    formatValue(value.dropped),
+                    " dropped off"
+                  ]
+                }, item.id);
+              })
+            ]
+          }, step.id))
+        })
+      ]
+    })
+  });
+}
+// src/react/ui/RetentionChart.tsx
+import { Fragment as Fragment10 } from "react";
+import { jsx as jsx19, jsxs as jsxs14, Fragment as Fragment11 } from "react/jsx-runtime";
+function RetentionChart({
+  series,
+  unit,
+  ariaLabel,
+  className,
+  formatValue = formatNumber2
+}) {
+  const ids = new Set;
+  const offsets = new Map;
+  for (const item of series) {
+    invariant(item.id.trim().length > 0 && !ids.has(item.id), "retention series chart IDs must be nonblank and unique.");
+    ids.add(item.id);
+    invariant(Number.isFinite(item.cohortSize) && item.cohortSize >= 0, "retention chart counts must be finite and nonnegative.");
+    const seen = new Set;
+    for (const point of item.points) {
+      invariant(Number.isSafeInteger(point.offset) && point.offset >= 0 && !seen.has(point.offset), "retention chart offsets must be unique nonnegative integers within each series.");
+      seen.add(point.offset);
+      invariant(point.rate === null || Number.isFinite(point.rate) && point.rate >= 0 && point.rate <= 1, "retention chart rates must be finite fractions between 0 and 1, or null.");
+      invariant(point.rate === null === (point.retainedCount === null), "retention chart unobserved rates and counts must both be null.");
+      if (point.retainedCount !== null) {
+        invariant(Number.isFinite(point.retainedCount) && point.retainedCount >= 0, "retention chart counts must be finite and nonnegative.");
+        invariant(point.retainedCount <= item.cohortSize, "retention chart retained counts cannot exceed cohort size.");
+      }
+      invariant(!offsets.has(point.offset) || offsets.get(point.offset) === point.label, "retention chart labels must agree for the same offset.");
+      offsets.set(point.offset, point.label);
+    }
+  }
+  const data = [...offsets].sort(([a], [b]) => a - b).map(([offset, label]) => ({
+    offset,
+    label,
+    ...Object.fromEntries(series.flatMap((_, index) => [
+      [`rate${index}`, null],
+      [`tail${index}`, null]
+    ]))
+  }));
+  series.forEach((item, index) => {
+    const points = [...item.points].sort((a, b) => a.offset - b.offset);
+    points.forEach((point, pointIndex) => {
+      const row = data.find((row) => row.offset === point.offset);
+      row[point.incomplete ? `tail${index}` : `rate${index}`] = point.rate === null ? null : point.rate * 100;
+      if (point.incomplete && pointIndex > 0) {
+        const previous = points[pointIndex - 1];
+        data.find((row) => row.offset === previous.offset)[`tail${index}`] = previous.rate === null ? null : previous.rate * 100;
+      }
+    });
+  });
+  return /* @__PURE__ */ jsx19("section", {
+    className: classNames("altertable-retention-chart", className),
+    "aria-label": ariaLabel,
+    children: data.length === 0 ? /* @__PURE__ */ jsx19("span", {
+      children: "No data"
+    }) : /* @__PURE__ */ jsxs14(Fragment11, {
+      children: [
+        /* @__PURE__ */ jsxs14(ComposedChart, {
+          data,
+          ariaLabel: `${ariaLabel} plot`,
+          children: [
+            /* @__PURE__ */ jsx19(ComposedChart.CartesianGrid, {}),
+            /* @__PURE__ */ jsx19(ComposedChart.XAxis, {
+              dataKey: "offset",
+              type: "number",
+              domain: [0, Math.max(1, ...offsets.keys())],
+              tickFormatter: (value) => offsets.get(Number(value)) ?? (data[0]?.label.replace(/\d+(?:\.\d+)?/, String(value)) || String(value))
+            }),
+            /* @__PURE__ */ jsx19(ComposedChart.YAxis, {
+              domain: [0, 100],
+              width: 42,
+              tickFormatter: (value) => `${value}%`
+            }),
+            series.map((item, index) => /* @__PURE__ */ jsxs14(Fragment10, {
+              children: [
+                /* @__PURE__ */ jsx19(ComposedChart.Line, {
+                  dataKey: `rate${index}`,
+                  name: item.label,
+                  stroke: `var(--atbl-chart-${index % 8 + 1})`,
+                  connectNulls: false
+                }),
+                /* @__PURE__ */ jsx19(ComposedChart.Line, {
+                  dataKey: `tail${index}`,
+                  name: item.label,
+                  stroke: `var(--atbl-chart-${index % 8 + 1})`,
+                  strokeDasharray: "3 3",
+                  dot: false,
+                  activeDot: false,
+                  connectNulls: false
+                })
+              ]
+            }, item.id)),
+            /* @__PURE__ */ jsx19(ComposedChart.Tooltip, {
+              filterNull: false,
+              content: ({ active, payload }) => {
+                const offset = payload?.[0]?.payload.offset;
+                if (!active || typeof offset !== "number")
+                  return null;
+                return /* @__PURE__ */ jsxs14(TooltipSurface, {
+                  "data-variant": "chart",
+                  role: "tooltip",
+                  children: [
+                    /* @__PURE__ */ jsx19("strong", {
+                      children: offsets.get(offset)
+                    }),
+                    series.map((item) => {
+                      const point = item.points.find((point) => point.offset === offset);
+                      if (!point)
+                        return null;
+                      return /* @__PURE__ */ jsxs14("span", {
+                        children: [
+                          item.label,
+                          ":",
+                          " ",
+                          point.rate === null ? "Not observed" : `${formatPercent2(point.rate)} · ${formatValue(point.retainedCount)} / ${formatValue(item.cohortSize)} ${unit}${point.incomplete ? " · Incomplete period" : ""}`
+                        ]
+                      }, item.id);
+                    })
+                  ]
+                });
+              }
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsx19(ChartLegend, {
+          "aria-label": `${ariaLabel} cohorts`,
+          children: series.map((item, index) => /* @__PURE__ */ jsxs14(ChartLegend.Item, {
+            children: [
+              /* @__PURE__ */ jsx19(ChartLegend.Marker, {
+                kind: "square",
+                color: `var(--atbl-chart-${index % 8 + 1})`
               }),
-              /* @__PURE__ */ jsx11("span", {
-                className: "altertable-selectable-bars-label",
+              /* @__PURE__ */ jsx19(ChartLegend.Label, {
                 children: item.label
               })
             ]
-          })
-        }, item.id))
-      })
-    ]
+          }, item.id))
+        }),
+        /* @__PURE__ */ jsx19("ul", {
+          className: "altertable-sr-only",
+          children: series.map((item) => /* @__PURE__ */ jsxs14("li", {
+            children: [
+              item.label,
+              item.points.map((point) => /* @__PURE__ */ jsxs14("span", {
+                children: [
+                  " ",
+                  "· ",
+                  point.label,
+                  ":",
+                  " ",
+                  point.rate === null ? "Not observed" : `${formatPercent2(point.rate)} · ${formatValue(point.retainedCount)} / ${formatValue(item.cohortSize)} ${unit}${point.incomplete ? " · Incomplete period" : ""}`
+                ]
+              }, point.offset))
+            ]
+          }, item.id))
+        })
+      ]
+    })
+  });
+}
+// src/react/ui/JourneyChart.tsx
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef4, useState as useState7 } from "react";
+
+// src/react/ui/journey-flow.ts
+var journeyOutcomeLabels = {
+  truncated: "More steps",
+  "drop-off": "Drop-off",
+  converted: "Converted",
+  end: "End of path"
+};
+function journeyNodes(path) {
+  const nodes = path.steps.map((step, depth) => ({
+    key: JSON.stringify([depth, "event", step.event, step.property]),
+    label: step.property === null ? step.event : `${step.event} · ${step.property}`,
+    depth,
+    outcome: "event"
+  }));
+  const outcome = path.truncated ? "truncated" : path.converted === false ? "drop-off" : path.converted === true ? "converted" : "end";
+  nodes.push({
+    key: JSON.stringify([nodes.length, outcome]),
+    label: journeyOutcomeLabels[outcome],
+    depth: nodes.length,
+    outcome
+  });
+  return nodes;
+}
+function buildJourneyFlow(paths, expandedBranch) {
+  const nodes = new Map;
+  const links = new Map;
+  for (const path of paths) {
+    const fullSequence = journeyNodes(path);
+    if (path.truncated)
+      fullSequence.pop();
+    const sequence = expandedBranch === undefined ? fullSequence : fullSequence.flatMap((node, index) => {
+      const branchKeys = fullSequence.slice(0, index + 1).map((step) => step.key);
+      const parentExpanded = index <= 1 || branchKeys.slice(0, index).every((key, depth) => expandedBranch[depth] === key);
+      if (!parentExpanded)
+        return [];
+      return [
+        {
+          ...node,
+          key: JSON.stringify(branchKeys),
+          branchKeys,
+          expandable: index >= 1 && index < fullSequence.length - 1,
+          expanded: branchKeys.every((key, depth) => expandedBranch[depth] === key)
+        }
+      ];
+    });
+    sequence.forEach((node, index) => {
+      const current = nodes.get(node.key) ?? {
+        ...node,
+        count: 0,
+        pathKeys: []
+      };
+      current.count += path.count;
+      if ("expandable" in node && node.expandable)
+        current.expandable = true;
+      current.pathKeys.push(path.id);
+      nodes.set(node.key, current);
+      const previous = sequence[index - 1];
+      if (!previous)
+        return;
+      const key = JSON.stringify([previous.key, node.key]);
+      const link = links.get(key) ?? {
+        key,
+        source: previous.key,
+        target: node.key,
+        count: 0,
+        pathKeys: []
+      };
+      link.count += path.count;
+      link.pathKeys.push(path.id);
+      links.set(key, link);
+    });
+  }
+  return { nodes: [...nodes.values()], links: [...links.values()] };
+}
+function limitJourneyFlow(graph, visibleEventsByDepth = {}) {
+  const nodes = [];
+  const replacements = new Map;
+  for (const depth of new Set(graph.nodes.map((node) => node.depth))) {
+    const column = graph.nodes.filter((node) => node.depth === depth).sort((a, b) => Number(Boolean(b.expanded)) - Number(Boolean(a.expanded)) || b.count - a.count || a.key.localeCompare(b.key));
+    const events = column.filter((node) => node.outcome === "event");
+    const outcomes = column.filter((node) => node.outcome !== "event");
+    const limit = visibleEventsByDepth[depth] ?? 3;
+    if (events.length <= limit) {
+      nodes.push(...column);
+      continue;
+    }
+    nodes.push(...events.slice(0, limit), ...outcomes);
+    const hidden = events.slice(limit);
+    const key = JSON.stringify(["other", depth]);
+    hidden.forEach((node) => replacements.set(node.key, key));
+    nodes.push({
+      key,
+      label: "More events",
+      depth,
+      outcome: "other",
+      hiddenBranchCount: hidden.length,
+      count: hidden.reduce((sum, node) => sum + node.count, 0),
+      pathKeys: [...new Set(hidden.flatMap((node) => node.pathKeys))]
+    });
+  }
+  const links = new Map;
+  for (const link of graph.links) {
+    const source = replacements.get(link.source) ?? link.source;
+    const target = replacements.get(link.target) ?? link.target;
+    const key = JSON.stringify([source, target]);
+    const existing = links.get(key);
+    if (existing) {
+      existing.count += link.count;
+      existing.pathKeys.push(...link.pathKeys);
+    } else {
+      links.set(key, {
+        ...link,
+        key,
+        source,
+        target,
+        pathKeys: [...link.pathKeys]
+      });
+    }
+  }
+  return { nodes, links: [...links.values()] };
+}
+
+// src/react/ui/JourneyChart.tsx
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+function JourneyChart({
+  paths,
+  unit,
+  ariaLabel,
+  className,
+  formatValue = formatNumber2
+}) {
+  const ids = new Set;
+  let total = 0;
+  for (const path of paths) {
+    invariant(path.id.trim().length > 0 && !ids.has(path.id), "journey path chart IDs must be nonblank and unique.");
+    ids.add(path.id);
+    invariant(Number.isFinite(path.count) && path.count >= 0, "journey chart counts must be finite and nonnegative.");
+    total += path.count;
+    invariant(path.steps.length > 0 && path.steps.every((step) => step.event.trim().length > 0), "journey chart paths require nonblank events.");
+  }
+  invariant(Number.isFinite(total), "journey chart total count must be finite.");
+  return /* @__PURE__ */ jsx20("section", {
+    className: classNames("altertable-journey-chart", className),
+    "aria-label": ariaLabel,
+    children: paths.length === 0 ? /* @__PURE__ */ jsx20("span", {
+      children: "No data"
+    }) : /* @__PURE__ */ jsx20(JourneyFlow, {
+      paths,
+      unit,
+      formatValue
+    }, JSON.stringify(paths))
+  });
+}
+function JourneyFlow({
+  paths,
+  unit,
+  formatValue
+}) {
+  const [expandedBranch, setExpandedBranch] = useState7([]);
+  const [visibleEventsByDepth, setVisibleEventsByDepth] = useState7({});
+  const graph = limitJourneyFlow(buildJourneyFlow(paths, expandedBranch), visibleEventsByDepth);
+  const scrollRef = useRef4(null);
+  const pendingDepth = useRef4(null);
+  const depthCount = Math.max(0, ...graph.nodes.map((node) => node.depth)) + 1;
+  const startingCount = graph.nodes.filter((node) => node.depth === 0).reduce((sum, node) => sum + node.count, 0);
+  function percent(count) {
+    return formatPercent2(startingCount > 0 ? count / startingCount : null);
+  }
+  const nodeWidth = 176;
+  const nodeHeight = 96;
+  const barWidth = 16;
+  const rowSpacing = nodeHeight + 80;
+  const columnSpacing = nodeWidth + 112;
+  const width = 34 + nodeWidth + (depthCount - 1) * columnSpacing;
+  function columnX(depth) {
+    return 10 + depth * columnSpacing;
+  }
+  useLayoutEffect3(() => {
+    const depth = pendingDepth.current;
+    const container = scrollRef.current;
+    if (depth === null || !container || depth >= depthCount)
+      return;
+    pendingDepth.current = null;
+    const left = columnX(depth);
+    const right = left + nodeWidth + 24;
+    const nextLeft = left < container.scrollLeft ? left - 24 : right > container.scrollLeft + container.clientWidth ? right - container.clientWidth : container.scrollLeft;
+    if (nextLeft !== container.scrollLeft)
+      container.scrollTo({
+        left: Math.max(0, nextLeft),
+        behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth"
+      });
+  });
+  const columns = Array.from({ length: depthCount }, (_, depth) => graph.nodes.filter((node) => node.depth === depth).sort((a, b) => {
+    function rank(node) {
+      return node.outcome === "event" ? 0 : node.outcome === "other" ? 1 : 2;
+    }
+    return rank(a) - rank(b) || b.count - a.count || a.key.localeCompare(b.key);
+  }));
+  const positions = new Map;
+  columns.forEach((column, depth) => {
+    const parent = columns[depth - 1]?.find((node) => node.expanded);
+    const parentY = parent ? positions.get(parent.key)?.y : undefined;
+    const top = Math.max(104, (parentY ?? 104) - (column.length > 1 ? rowSpacing : 0));
+    column.forEach((node, index) => positions.set(node.key, {
+      node,
+      x: columnX(depth),
+      y: top + index * rowSpacing
+    }));
+  });
+  const height = Math.max(280, ...[...positions.values()].map((position) => position.y + nodeHeight + 40));
+  const outgoingOffsets = new Map;
+  const incomingOffsets = new Map;
+  const orderedLinks = [...graph.links].sort((a, b) => (positions.get(a.source)?.y ?? 0) - (positions.get(b.source)?.y ?? 0) || (positions.get(a.target)?.y ?? 0) - (positions.get(b.target)?.y ?? 0));
+  const links = orderedLinks.flatMap((link) => {
+    const source = positions.get(link.source);
+    const target = positions.get(link.target);
+    if (!source || !target || link.count <= 0 || startingCount <= 0)
+      return [];
+    const x0 = source.x + barWidth;
+    const x1 = target.x;
+    const mid = (x0 + x1) / 2;
+    const sourceTop = source.y + (outgoingOffsets.get(link.source) ?? 0);
+    const targetTop = target.y + (incomingOffsets.get(link.target) ?? 0);
+    const thickness = link.count / startingCount * nodeHeight;
+    outgoingOffsets.set(link.source, (outgoingOffsets.get(link.source) ?? 0) + thickness);
+    incomingOffsets.set(link.target, (incomingOffsets.get(link.target) ?? 0) + thickness);
+    return [
+      {
+        muted: target.node.outcome === "end" || target.node.outcome === "other",
+        d: `M${x0},${sourceTop} C${mid},${sourceTop} ${mid},${targetTop} ${x1},${targetTop} L${x1},${targetTop + thickness} C${mid},${targetTop + thickness} ${mid},${sourceTop + thickness} ${x0},${sourceTop + thickness} Z`
+      }
+    ];
+  });
+  return /* @__PURE__ */ jsx20("div", {
+    ref: scrollRef,
+    className: "altertable-journey-scroll",
+    children: /* @__PURE__ */ jsxs15("div", {
+      className: "altertable-journey-plot",
+      style: { minWidth: width, minHeight: height },
+      children: [
+        /* @__PURE__ */ jsxs15("svg", {
+          width: "100%",
+          height: "100%",
+          "aria-hidden": "true",
+          focusable: "false",
+          children: [
+            /* @__PURE__ */ jsx20("path", {
+              d: links.filter((link) => !link.muted).map((link) => link.d).join(" "),
+              fill: "color-mix(in srgb, var(--atbl-chart-5) 22%, var(--atbl-surface))"
+            }),
+            /* @__PURE__ */ jsx20("path", {
+              d: links.filter((link) => link.muted).map((link) => link.d).join(" "),
+              fill: "color-mix(in srgb, var(--atbl-muted) 22%, var(--atbl-surface))"
+            })
+          ]
+        }),
+        columns.map((column, depth) => /* @__PURE__ */ jsx20("span", {
+          className: "altertable-journey-stage",
+          style: { left: columnX(depth) },
+          children: column.length > 0 && column.every((node) => node.outcome !== "event" && node.outcome !== "other") ? "Outcome" : `Step ${depth + 1}`
+        }, depth)),
+        [...positions.values()].map(({ node, x, y }) => /* @__PURE__ */ jsxs15("div", {
+          className: "altertable-journey-node",
+          style: {
+            left: x,
+            top: y,
+            width: nodeWidth,
+            height: startingCount > 0 ? node.count / startingCount * nodeHeight : 0
+          },
+          children: [
+            /* @__PURE__ */ jsx20("div", {
+              className: "altertable-journey-bar",
+              "data-event": node.outcome === "event" || undefined,
+              "aria-hidden": "true",
+              style: { width: barWidth }
+            }),
+            /* @__PURE__ */ jsxs15("section", {
+              "aria-label": `${node.label}, step ${node.depth + 1}, ${formatValue(node.count)} ${unit}`,
+              className: "altertable-journey-label",
+              children: [
+                /* @__PURE__ */ jsx20("span", {
+                  className: "altertable-journey-name",
+                  title: node.label,
+                  children: node.label
+                }),
+                /* @__PURE__ */ jsxs15("span", {
+                  children: [
+                    formatValue(node.count),
+                    " ",
+                    unit,
+                    " · ",
+                    percent(node.count)
+                  ]
+                }),
+                node.hiddenBranchCount ? /* @__PURE__ */ jsxs15("span", {
+                  children: [
+                    node.hiddenBranchCount,
+                    " hidden",
+                    " ",
+                    node.hiddenBranchCount === 1 ? "event" : "events"
+                  ]
+                }) : null
+              ]
+            }),
+            node.expandable && /* @__PURE__ */ jsx20(Button2, {
+              variant: "outline",
+              size: "icon-compact",
+              className: "altertable-journey-expand",
+              "aria-label": `${node.expanded ? "Less" : "More"} after ${node.label}, step ${node.depth + 1}`,
+              "aria-expanded": Boolean(node.expanded),
+              onClick: () => {
+                pendingDepth.current = node.expanded ? null : node.depth + 1;
+                setVisibleEventsByDepth((limits) => Object.fromEntries(Object.entries(limits).filter(([depth]) => Number(depth) <= node.depth)));
+                setExpandedBranch(node.expanded ? (node.branchKeys ?? []).slice(0, -1) : node.branchKeys ?? []);
+              },
+              children: node.expanded ? "−" : "›"
+            }),
+            node.outcome === "other" && /* @__PURE__ */ jsx20(Button2, {
+              size: "compact",
+              variant: "ghost",
+              className: "altertable-journey-more",
+              "aria-label": `Show more events at step ${node.depth + 1}`,
+              onClick: () => setVisibleEventsByDepth((limits) => ({
+                ...limits,
+                [node.depth]: (limits[node.depth] ?? 3) + 3
+              })),
+              children: "Show more events"
+            })
+          ]
+        }, node.key))
+      ]
+    })
   });
 }
 export {
@@ -1567,8 +3067,11 @@ export {
   AppIcon2 as AppIcon,
   AreaChart,
   BarChart,
+  ChartLegend,
   Checkbox2 as Checkbox,
-  Combobox2 as Combobox,
+  CheckboxGroup,
+  ChoicePicker2 as ChoicePicker,
+  ComposedChart,
   DataApp,
   DataAppProvider2 as DataAppProvider,
   DataAppSkeleton,
@@ -1580,19 +3083,38 @@ export {
   DataWidget2 as DataWidget,
   DateRangePicker2 as DateRangePicker,
   DimensionPicker2 as DimensionPicker,
+  FilterActions2 as FilterActions,
+  FilterBar2 as FilterBar,
+  FunnelChart,
   GettingStarted,
   GlossaryDefinition,
   GlossaryExplanation,
   GradientScroll2 as GradientScroll,
   HelpPopover2 as HelpPopover,
+  JourneyChart,
   LineChart,
   LiveControl2 as LiveControl,
+  Menu2 as Menu,
+  PressButton as MenuButton,
+  MenuItem2 as MenuItem,
+  MenuPopover2 as MenuPopover,
+  MenuSection2 as MenuSection,
+  MenuSeparator2 as MenuSeparator,
+  MenuTrigger2 as MenuTrigger,
   MetricWidget2 as MetricWidget,
+  NumberField2 as NumberField,
+  NumberFilterPicker2 as NumberFilterPicker,
+  NumberRangeField2 as NumberRangeField,
   PieChart,
   PresentStory2 as PresentStory,
+  Radio,
+  RadioGroup,
+  RetentionChart,
   ScatterChart,
   SearchField2 as SearchField,
   SearchMatch2 as SearchMatch,
+  SegmentedControl,
+  Select2 as Select,
   Sheet2 as Sheet,
   Tab2 as Tab,
   TabList2 as TabList,
@@ -1603,12 +3125,15 @@ export {
   TextWidget2 as TextWidget,
   Tooltip2 as Tooltip,
   TooltipProvider2 as TooltipProvider,
+  VariableBar2 as VariableBar,
   VisualizationWidget2 as VisualizationWidget,
   injectDataAppShellStyles,
   injectDataAppStyles2 as injectDataAppStyles,
+  isPlainKeyEvent2 as isPlainKeyEvent,
   searchItems2 as searchItems,
   useAppVariables2 as useAppVariables,
+  useSvgId,
   useViewTab2 as useViewTab
 };
 
-//# debugId=44AF1347DDC5E0E164756E2164756E21
+//# debugId=6CFD84691873BB8C64756E2164756E21