@altertable/data-app 0.67.0 → 0.68.0

package/dist/react/ui/index.js

@@ -60,9 +60,13 @@ import {
   TableWidget2,
   TextWidget2,
   DataValue2,
+  chartBarFill,
   createDataContext2
-} from "../../chunks/index-8qfxv0h5.js";
-import"../../chunks/index-mev09s5v.js";
+} from "../../chunks/index-gvers8jw.js";
+import {
+  formatNumber2,
+  formatPercent2
+} from "../../chunks/index-mev09s5v.js";
 import"../../chunks/index-ag0cgnvq.js";
 import"../../chunks/index-mt93ff2b.js";
 import"../../chunks/index-m6n8ctfc.js";
@@ -1080,7 +1084,7 @@ function GlossaryDefinition({
   });
 }
 // src/react/ui/TrendChart.tsx
-import { useLayoutEffect, useRef, useState } from "react";
+import { useLayoutEffect, useRef, useState as useState2 } from "react";
 import {
   AreaChart as RechartsAreaChart,
   LineChart as RechartsLineChart,
@@ -1100,8 +1104,167 @@ import {
   Tooltip,
   DefaultTooltipContent
 } from "recharts";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var chartBarFill = "var(--atbl-chart-fill, color-mix(in srgb, var(--atbl-accent) 75%, var(--atbl-surface)))";
+
+// 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,
@@ -1110,7 +1273,7 @@ function ChartDot({
   r = active ? 4.5 : 3,
   ...props
 }) {
-  return /* @__PURE__ */ jsx6(Dot, {
+  return /* @__PURE__ */ jsx7(Dot, {
     stroke,
     fill,
     r,
@@ -1119,7 +1282,7 @@ function ChartDot({
   });
 }
 function ChartBar(props) {
-  return /* @__PURE__ */ jsx6(Bar, {
+  return /* @__PURE__ */ jsx7(Bar, {
     fill: chartBarFill,
     radius: [5, 5, 0, 0],
     maxBarSize: 30,
@@ -1134,18 +1297,18 @@ function ChartLine({
   activeDot,
   ...props
 }) {
-  return /* @__PURE__ */ jsx6(Line, {
+  return /* @__PURE__ */ jsx7(Line, {
     type: "linear",
     stroke,
     strokeWidth: 2,
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    dot: dot === undefined || dot === true ? ({ cx, cy }) => /* @__PURE__ */ jsx6(ChartDot, {
+    dot: dot === undefined || dot === true ? ({ cx, cy }) => /* @__PURE__ */ jsx7(ChartDot, {
       cx,
       cy,
       stroke
     }) : dot,
-    activeDot: activeDot === undefined || activeDot === true ? ({ cx, cy }) => /* @__PURE__ */ jsx6(ChartDot, {
+    activeDot: activeDot === undefined || activeDot === true ? ({ cx, cy }) => /* @__PURE__ */ jsx7(ChartDot, {
       cx,
       cy,
       stroke,
@@ -1161,7 +1324,7 @@ function ChartArea({
   activeDot,
   ...props
 }) {
-  return /* @__PURE__ */ jsx6(Area, {
+  return /* @__PURE__ */ jsx7(Area, {
     legendType: "square",
     type: "linear",
     stroke,
@@ -1170,12 +1333,12 @@ function ChartArea({
     strokeLinejoin: "round",
     fill: stroke,
     fillOpacity: 0.14,
-    dot: dot === undefined || dot === true ? ({ cx, cy }) => /* @__PURE__ */ jsx6(ChartDot, {
+    dot: dot === undefined || dot === true ? ({ cx, cy }) => /* @__PURE__ */ jsx7(ChartDot, {
       cx,
       cy,
       stroke
     }) : dot,
-    activeDot: activeDot === undefined || activeDot === true ? ({ cx, cy }) => /* @__PURE__ */ jsx6(ChartDot, {
+    activeDot: activeDot === undefined || activeDot === true ? ({ cx, cy }) => /* @__PURE__ */ jsx7(ChartDot, {
       cx,
       cy,
       stroke,
@@ -1186,14 +1349,14 @@ function ChartArea({
   });
 }
 function ChartScatter(props) {
-  return /* @__PURE__ */ jsx6(Scatter, {
+  return /* @__PURE__ */ jsx7(Scatter, {
     fill: accent,
     isAnimationActive: false,
     ...props
   });
 }
 function ChartXAxis(props) {
-  return /* @__PURE__ */ jsx6(XAxis, {
+  return /* @__PURE__ */ jsx7(XAxis, {
     stroke: "var(--atbl-muted)",
     tickLine: false,
     axisLine: { stroke: "var(--atbl-border)" },
@@ -1202,7 +1365,7 @@ function ChartXAxis(props) {
   });
 }
 function ChartYAxis(props) {
-  return /* @__PURE__ */ jsx6(YAxis, {
+  return /* @__PURE__ */ jsx7(YAxis, {
     stroke: "var(--atbl-muted)",
     tickLine: false,
     axisLine: false,
@@ -1211,7 +1374,7 @@ function ChartYAxis(props) {
   });
 }
 function ChartGrid(props) {
-  return /* @__PURE__ */ jsx6(CartesianGrid, {
+  return /* @__PURE__ */ jsx7(CartesianGrid, {
     stroke: "var(--atbl-border)",
     vertical: false,
     ...props
@@ -1220,11 +1383,45 @@ function ChartGrid(props) {
 function ChartTooltipContent(props) {
   if (!props.active)
     return null;
-  return /* @__PURE__ */ jsx6(TooltipSurface, {
+  return /* @__PURE__ */ jsx7(TooltipSurface, {
     "data-variant": "chart",
     role: "tooltip",
-    children: /* @__PURE__ */ jsx6(DefaultTooltipContent, {
+    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,
@@ -1240,13 +1437,18 @@ function ChartTooltipContent(props) {
         lineHeight: 1.2,
         ...props.labelStyle
       },
-      itemStyle: { paddingTop: 2, paddingBottom: 0, ...props.itemStyle }
+      itemStyle: {
+        color: "var(--atbl-text)",
+        paddingTop: 2,
+        paddingBottom: 0,
+        ...props.itemStyle
+      }
     })
   });
 }
 function ChartTooltip(props) {
-  return /* @__PURE__ */ jsx6(Tooltip, {
-    content: /* @__PURE__ */ jsx6(ChartTooltipContent, {}),
+  return /* @__PURE__ */ jsx7(Tooltip, {
+    content: /* @__PURE__ */ jsx7(ChartTooltipContent, {}),
     cursor: false,
     isAnimationActive: false,
     ...props
@@ -1272,7 +1474,7 @@ function validateChartItems(kind, items) {
 }
 
 // src/react/ui/TrendChart.tsx
-import { jsx as jsx7, 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,
@@ -1282,7 +1484,7 @@ function TrendChart({
 }) {
   validateChartItems(area ? "area" : "line", items);
   const Plot = area ? RechartsAreaChart : RechartsLineChart;
-  const [activeIndex, setActiveIndex] = useState();
+  const [activeIndex, setActiveIndex] = useState2();
   const scrollport = useRef(null);
   useLayoutEffect(() => {
     const element = scrollport.current;
@@ -1292,25 +1494,25 @@ 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);
-  return /* @__PURE__ */ jsxs4("section", {
+  return /* @__PURE__ */ jsxs6("section", {
     className: "altertable-trend-chart",
     "aria-label": ariaLabel,
     children: [
-      items.length === 0 && /* @__PURE__ */ jsx7("span", {
+      items.length === 0 && /* @__PURE__ */ jsx8("span", {
         children: "No data"
       }),
-      items.length > 0 && /* @__PURE__ */ jsx7(Fragment, {
-        children: /* @__PURE__ */ jsx7("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__ */ jsx7("div", {
+              /* @__PURE__ */ jsx8("div", {
                 className: "altertable-chart-canvas",
                 "aria-hidden": "true",
-                children: /* @__PURE__ */ jsxs4(Plot, {
+                children: /* @__PURE__ */ jsxs6(Plot, {
                   data: items.map((item) => ({
                     ...item,
                     plotValue: item.value / magnitude
@@ -1323,29 +1525,29 @@ function TrendChart({
                   accessibilityLayer: false,
                   tabIndex: -1,
                   children: [
-                    /* @__PURE__ */ jsx7(ChartXAxis, {
+                    /* @__PURE__ */ jsx8(ChartXAxis, {
                       hide: true,
                       dataKey: "id",
                       scale: "band"
                     }),
-                    /* @__PURE__ */ jsx7(ChartYAxis, {
+                    /* @__PURE__ */ jsx8(ChartYAxis, {
                       hide: true,
                       domain: [low, high === low ? low + 1 : high]
                     }),
-                    /* @__PURE__ */ jsx7(ReferenceLine, {
+                    /* @__PURE__ */ jsx8(ReferenceLine, {
                       y: 0,
                       stroke: "var(--atbl-border)"
                     }),
-                    area && /* @__PURE__ */ jsx7(ChartArea, {
+                    area && /* @__PURE__ */ jsx8(ChartArea, {
                       dataKey: "plotValue",
                       stroke: "none",
                       fill: "var(--atbl-accent)",
                       dot: false,
                       activeDot: false
                     }),
-                    /* @__PURE__ */ jsx7(ChartLine, {
+                    /* @__PURE__ */ jsx8(ChartLine, {
                       dataKey: "plotValue",
-                      dot: ({ cx, cy, index }) => /* @__PURE__ */ jsx7(ChartDot, {
+                      dot: ({ cx, cy, index }) => /* @__PURE__ */ jsx8(ChartDot, {
                         cx,
                         cy,
                         active: index === activeIndex
@@ -1355,17 +1557,17 @@ function TrendChart({
                   ]
                 })
               }),
-              /* @__PURE__ */ jsx7("div", {
+              /* @__PURE__ */ jsx8("div", {
                 className: "altertable-trend-points",
-                children: items.map((item, index) => /* @__PURE__ */ jsx7(Tooltip2, {
+                children: items.map((item, index) => /* @__PURE__ */ jsx8(Tooltip2, {
                   variant: "chart",
                   onOpenChange: (open) => setActiveIndex((current) => open ? index : current === index ? undefined : current),
-                  content: /* @__PURE__ */ jsxs4(Fragment, {
+                  content: /* @__PURE__ */ jsxs6(Fragment2, {
                     children: [
-                      /* @__PURE__ */ jsx7("strong", {
+                      /* @__PURE__ */ jsx8("strong", {
                         children: item.label
                       }),
-                      /* @__PURE__ */ jsxs4("span", {
+                      /* @__PURE__ */ jsxs6("span", {
                         children: [
                           formatValue(item.value),
                           " ",
@@ -1375,7 +1577,7 @@ function TrendChart({
                     ]
                   }),
                   className: "altertable-chart-column",
-                  children: /* @__PURE__ */ jsxs4("button", {
+                  children: /* @__PURE__ */ jsxs6("button", {
                     "data-atbl-focus": "ring",
                     "data-atbl-control": "default",
                     type: "button",
@@ -1383,10 +1585,10 @@ function TrendChart({
                     className: "altertable-trend-point",
                     "aria-label": `${item.label}: ${formatValue(item.value)} ${unit}`,
                     children: [
-                      /* @__PURE__ */ jsx7("span", {
+                      /* @__PURE__ */ jsx8("span", {
                         className: "altertable-trend-hit"
                       }),
-                      /* @__PURE__ */ jsx7("span", {
+                      /* @__PURE__ */ jsx8("span", {
                         className: "altertable-trend-label",
                         children: item.label
                       })
@@ -1403,176 +1605,23 @@ function TrendChart({
 }
 
 // src/react/ui/LineChart.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function LineChart(props) {
-  return /* @__PURE__ */ jsx8(TrendChart, {
+  return /* @__PURE__ */ jsx9(TrendChart, {
     ...props
   });
 }
 // src/react/ui/AreaChart.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function AreaChart(props) {
-  return /* @__PURE__ */ jsx9(TrendChart, {
+  return /* @__PURE__ */ jsx10(TrendChart, {
     ...props,
     area: true
   });
 }
-// src/react/ui/ChartLegend.tsx
-import {
-  Children,
-  useId,
-  useState as useState2
-} from "react";
-import { jsx as jsx10, jsxs as jsxs5, Fragment as Fragment2 } from "react/jsx-runtime";
-function ChartLegendRoot({
-  children,
-  layout = "horizontal",
-  align = "start",
-  maxVisibleItems = 6,
-  className,
-  "aria-label": ariaLabel = "Chart legend",
-  ...props
-}) {
-  const [expanded, setExpanded] = useState2(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__ */ jsx10("div", {
-    className: "altertable-chart-legend-container",
-    children: /* @__PURE__ */ jsxs5("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__ */ jsx10("li", {
-          className: "altertable-chart-legend-overflow",
-          children: /* @__PURE__ */ jsx10("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__ */ jsx10("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__ */ jsxs5("svg", {
-    ...props,
-    "aria-hidden": "true",
-    focusable: "false",
-    viewBox: "0 0 20 12",
-    "data-kind": kind,
-    className: classNames("altertable-chart-legend-marker", className),
-    style: { color, ...style },
-    children: [
-      kind === "bar" && /* @__PURE__ */ jsx10("path", {
-        d: "M6 11V3Q6 1 8 1H12Q14 1 14 3V11Z",
-        fill: "currentColor"
-      }),
-      kind === "slice" && /* @__PURE__ */ jsx10("rect", {
-        x: "5",
-        y: "1",
-        width: "10",
-        height: "10",
-        rx: "2",
-        fill: "currentColor"
-      }),
-      kind === "point" && /* @__PURE__ */ jsx10("circle", {
-        cx: "10",
-        cy: "6",
-        r: "3",
-        fill: "currentColor"
-      }),
-      kind === "line" && /* @__PURE__ */ jsxs5(Fragment2, {
-        children: [
-          /* @__PURE__ */ jsx10("path", {
-            d: "M1 6H19",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "round"
-          }),
-          /* @__PURE__ */ jsx10("circle", {
-            cx: "10",
-            cy: "6",
-            r: "2.5",
-            fill: "var(--atbl-surface)",
-            stroke: "currentColor",
-            strokeWidth: "2"
-          })
-        ]
-      }),
-      kind === "area" && /* @__PURE__ */ jsxs5(Fragment2, {
-        children: [
-          /* @__PURE__ */ jsx10("path", {
-            d: "M1 10L7 5L13 7L19 2V11H1Z",
-            fill: "currentColor",
-            fillOpacity: "0.14"
-          }),
-          /* @__PURE__ */ jsx10("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__ */ jsx10("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/PieChart.tsx
 import { useState as useState3 } from "react";
-import { jsx as jsx11, jsxs as jsxs6, Fragment as Fragment3 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs7, Fragment as Fragment3 } from "react/jsx-runtime";
 function PieChart({
   items,
   unit,
@@ -1610,12 +1659,12 @@ function PieChart({
     }).format(share);
   }
   function detail(item) {
-    return /* @__PURE__ */ jsxs6(Fragment3, {
+    return /* @__PURE__ */ jsxs7(Fragment3, {
       children: [
         /* @__PURE__ */ jsx11("strong", {
           children: item.label
         }),
-        /* @__PURE__ */ jsxs6("span", {
+        /* @__PURE__ */ jsxs7("span", {
           children: [
             formatValue(item.value),
             " ",
@@ -1628,16 +1677,16 @@ function PieChart({
     });
   }
   const preview = slices.find((item) => item.id === previewId);
-  return /* @__PURE__ */ jsxs6("section", {
+  return /* @__PURE__ */ jsxs7("section", {
     className: "altertable-pie-chart",
     "aria-label": ariaLabel,
     children: [
       items.length === 0 && /* @__PURE__ */ jsx11("span", {
         children: "No data"
       }),
-      items.length > 0 && /* @__PURE__ */ jsxs6(Fragment3, {
+      items.length > 0 && /* @__PURE__ */ jsxs7(Fragment3, {
         children: [
-          /* @__PURE__ */ jsxs6("div", {
+          /* @__PURE__ */ jsxs7("div", {
             className: "altertable-pie-plot",
             children: [
               /* @__PURE__ */ jsx11(Tooltip2, {
@@ -1690,7 +1739,7 @@ function PieChart({
                 variant: "chart",
                 content: detail(item),
                 onOpenChange: (open) => setLegendId((current) => open ? item.id : current === item.id ? null : current),
-                children: /* @__PURE__ */ jsxs6("button", {
+                children: /* @__PURE__ */ jsxs7("button", {
                   "data-atbl-focus": "ring",
                   "data-atbl-control": "default",
                   type: "button",
@@ -1698,7 +1747,7 @@ function PieChart({
                   "aria-label": `${item.label}: ${formatValue(item.value)} ${unit}, ${percent(item.share)}`,
                   children: [
                     /* @__PURE__ */ jsx11(ChartLegend.Marker, {
-                      kind: "slice",
+                      kind: "square",
                       color: item.color
                     }),
                     /* @__PURE__ */ jsx11(ChartLegend.Label, {
@@ -1722,7 +1771,7 @@ function PieChart({
   });
 }
 // src/react/ui/ScatterChart.tsx
-import { jsx as jsx12, jsxs as jsxs7, Fragment as Fragment4 } 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);
 }
@@ -1751,16 +1800,16 @@ function ScatterChart({
   validateChartItems("scatter", items);
   const xScale = scale(items.map((item) => item.x));
   const yScale = scale(items.map((item) => item.y));
-  return /* @__PURE__ */ jsxs7("section", {
+  return /* @__PURE__ */ jsxs8("section", {
     className: "altertable-scatter-chart",
     "aria-label": ariaLabel,
     children: [
       items.length === 0 && /* @__PURE__ */ jsx12("span", {
         children: "No data"
       }),
-      items.length > 0 && /* @__PURE__ */ jsxs7(Fragment4, {
+      items.length > 0 && /* @__PURE__ */ jsxs8(Fragment4, {
         children: [
-          /* @__PURE__ */ jsxs7("p", {
+          /* @__PURE__ */ jsxs8("p", {
             className: "altertable-scatter-axis-title",
             children: [
               yLabel,
@@ -1769,7 +1818,7 @@ function ScatterChart({
           }),
           /* @__PURE__ */ jsx12("div", {
             className: "altertable-scatter-axes",
-            children: /* @__PURE__ */ jsxs7("div", {
+            children: /* @__PURE__ */ jsxs8("div", {
               className: "altertable-scatter-plot",
               children: [
                 yScale.ticks.map((value, index) => /* @__PURE__ */ jsx12("div", {
@@ -1791,12 +1840,12 @@ function ScatterChart({
                 }, index)),
                 items.map((item) => /* @__PURE__ */ jsx12(Tooltip2, {
                   variant: "chart",
-                  content: /* @__PURE__ */ jsxs7(Fragment4, {
+                  content: /* @__PURE__ */ jsxs8(Fragment4, {
                     children: [
                       /* @__PURE__ */ jsx12("strong", {
                         children: item.label
                       }),
-                      /* @__PURE__ */ jsxs7("span", {
+                      /* @__PURE__ */ jsxs8("span", {
                         children: [
                           xLabel,
                           ": ",
@@ -1805,7 +1854,7 @@ function ScatterChart({
                           xUnit
                         ]
                       }),
-                      /* @__PURE__ */ jsxs7("span", {
+                      /* @__PURE__ */ jsxs8("span", {
                         children: [
                           yLabel,
                           ": ",
@@ -1834,7 +1883,7 @@ function ScatterChart({
               ]
             })
           }),
-          /* @__PURE__ */ jsxs7("p", {
+          /* @__PURE__ */ jsxs8("p", {
             className: "altertable-scatter-axis-title altertable-scatter-x-title",
             children: [
               xLabel,
@@ -1849,7 +1898,7 @@ function ScatterChart({
 // src/react/ui/BarChart.tsx
 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 jsxs8, Fragment as Fragment5 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs9, Fragment as Fragment5 } from "react/jsx-runtime";
 function BarChart({
   items,
   unit,
@@ -1865,7 +1914,7 @@ function BarChart({
       element.scrollLeft = element.scrollWidth - element.clientWidth;
   }, [items]);
   const maximum = items.reduce((max, item) => Math.max(max, item.value), 1);
-  return /* @__PURE__ */ jsxs8("section", {
+  return /* @__PURE__ */ jsxs9("section", {
     className: "altertable-selectable-bars",
     "aria-label": ariaLabel,
     children: [
@@ -1875,14 +1924,14 @@ function BarChart({
       /* @__PURE__ */ jsx13("div", {
         className: "altertable-selectable-bars-scroll",
         ref: scrollport,
-        children: /* @__PURE__ */ jsxs8("div", {
+        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__ */ jsxs8(RechartsBarChart, {
+              children: /* @__PURE__ */ jsxs9(RechartsBarChart, {
                 data: items.map((item) => ({
                   ...item,
                   plotValue: item.value / maximum
@@ -1921,12 +1970,12 @@ function BarChart({
               children: items.map((item) => /* @__PURE__ */ jsx13(Tooltip2, {
                 variant: "chart",
                 onOpenChange: (open) => setActiveId((current) => open ? item.id : current === item.id ? undefined : current),
-                content: /* @__PURE__ */ jsxs8(Fragment5, {
+                content: /* @__PURE__ */ jsxs9(Fragment5, {
                   children: [
                     /* @__PURE__ */ jsx13("strong", {
                       children: item.label
                     }),
-                    /* @__PURE__ */ jsxs8("span", {
+                    /* @__PURE__ */ jsxs9("span", {
                       children: [
                         formatValue(item.value),
                         " ",
@@ -1936,7 +1985,7 @@ function BarChart({
                   ]
                 }),
                 className: "altertable-chart-column",
-                children: /* @__PURE__ */ jsxs8("button", {
+                children: /* @__PURE__ */ jsxs9("button", {
                   "data-atbl-focus": "ring",
                   "data-atbl-control": "default",
                   type: "button",
@@ -1967,14 +2016,14 @@ import {
   Radio as AriaRadio,
   Label
 } from "react-aria-components";
-import { jsx as jsx14, jsxs as jsxs9, Fragment as Fragment6 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs10, Fragment as Fragment6 } from "react/jsx-runtime";
 function RadioGroup({
   label,
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs9(AriaRadioGroup, {
+  return /* @__PURE__ */ jsxs10(AriaRadioGroup, {
     ...props,
     className: classNames("altertable-radio-group", className),
     children: [
@@ -1992,7 +2041,7 @@ function Radio({ className, children, ...props }) {
     "data-atbl-control": "action",
     "data-atbl-focus": "ring",
     className: classNames("altertable-radio", className),
-    children: (state) => /* @__PURE__ */ jsxs9(Fragment6, {
+    children: (state) => /* @__PURE__ */ jsxs10(Fragment6, {
       children: [
         /* @__PURE__ */ jsx14("span", {
           className: "altertable-radio-mark",
@@ -2024,7 +2073,7 @@ function SegmentedControl({
   });
 }
 // src/react/ui/CheckboxGroup.tsx
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 function CheckboxGroup({
   label,
   values,
@@ -2035,7 +2084,7 @@ function CheckboxGroup({
   ...props
 }) {
   invariant(new Set(values).size === values.length, "Checkbox group values must be unique.");
-  return /* @__PURE__ */ jsxs10("fieldset", {
+  return /* @__PURE__ */ jsxs11("fieldset", {
     ...props,
     disabled,
     className: classNames("altertable-checkbox-group", className),
@@ -2056,9 +2105,12 @@ function CheckboxGroup({
     ]
   });
 }
+// 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 jsxs11, Fragment as Fragment7 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs12, Fragment as Fragment7 } from "react/jsx-runtime";
 var legendMarkerKinds = {
   square: "area",
   rect: "bar",
@@ -2073,7 +2125,7 @@ function LegendContent({
   align,
   labelStyle,
   iconType,
-  iconSize = 20,
+  iconSize = 8,
   inactiveColor = "var(--atbl-muted)",
   position,
   verticalAlign,
@@ -2095,15 +2147,18 @@ function LegendContent({
       if (entry.type === "none")
         return null;
       const type = iconType ?? entry.type;
-      const kind = legendMarkerKinds[type ?? "none"] ?? "point";
+      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__ */ jsxs11(Fragment7, {
+      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: iconSize * 0.6 }
+            style: {
+              width: iconSize,
+              height: kind === "square" ? iconSize : iconSize * 0.6
+            }
           })),
           /* @__PURE__ */ jsx16(ChartLegend.Label, {
             style: labelStyle,
@@ -2132,7 +2187,7 @@ function ComposedChartLegend({
   ...props
 }) {
   return /* @__PURE__ */ jsx16(Legend, {
-    iconSize: 20,
+    iconSize: 8,
     inactiveColor: "var(--atbl-muted)",
     content: /* @__PURE__ */ jsx16(LegendContent, {
       maxVisibleItems
@@ -2164,9 +2219,17 @@ function ComposedChartRoot({
   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,
@@ -2199,6 +2262,806 @@ var ComposedChart = Object.assign(ComposedChartRoot, {
   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__ */ jsxs13("span", {
+                children: [
+                  /* @__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)
+              })
+            ]
+          }, 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__ */ jsx19(ChartLegend.Label, {
+                children: item.label
+              })
+            ]
+          }, 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 {
   AboutData2 as AboutData,
   AppIcon2 as AppIcon,
@@ -2222,11 +3085,13 @@ export {
   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,
@@ -2244,6 +3109,7 @@ export {
   PresentStory2 as PresentStory,
   Radio,
   RadioGroup,
+  RetentionChart,
   ScatterChart,
   SearchField2 as SearchField,
   SearchMatch2 as SearchMatch,
@@ -2266,7 +3132,8 @@ export {
   isPlainKeyEvent2 as isPlainKeyEvent,
   searchItems2 as searchItems,
   useAppVariables2 as useAppVariables,
+  useSvgId,
   useViewTab2 as useViewTab
 };
 
-//# debugId=FCD41F839B3A5B8964756E2164756E21
+//# debugId=6CFD84691873BB8C64756E2164756E21