@altertable/data-app 0.66.0 → 0.67.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,
@@ -43,18 +61,19 @@ import {
   TextWidget2,
   DataValue2,
   createDataContext2
-} from "../../chunks/contract-havnjmdr.js";
-import"../../chunks/contract-wz59z8pq.js";
-import"../../chunks/contract-mev09s5v.js";
-import {
-  invariant
-} from "../../chunks/contract-rfbakka4.js";
-import"../../chunks/contract-m6n8ctfc.js";
+} from "../../chunks/index-8qfxv0h5.js";
+import"../../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 +83,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 +832,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 +1080,178 @@ function GlossaryDefinition({
   });
 }
 // src/react/ui/TrendChart.tsx
-import { useLayoutEffect, useRef } from "react";
+import { useLayoutEffect, useRef, useState } 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";
+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)))";
+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__ */ jsx6(Dot, {
+    stroke,
+    fill,
+    r,
+    strokeWidth: 2,
+    ...props
+  });
+}
+function ChartBar(props) {
+  return /* @__PURE__ */ jsx6(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__ */ jsx6(Line, {
+    type: "linear",
+    stroke,
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    dot: dot === undefined || dot === true ? ({ cx, cy }) => /* @__PURE__ */ jsx6(ChartDot, {
+      cx,
+      cy,
+      stroke
+    }) : dot,
+    activeDot: activeDot === undefined || activeDot === true ? ({ cx, cy }) => /* @__PURE__ */ jsx6(ChartDot, {
+      cx,
+      cy,
+      stroke,
+      active: true
+    }) : activeDot,
+    isAnimationActive: false,
+    ...props
+  });
+}
+function ChartArea({
+  stroke = accent,
+  dot,
+  activeDot,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(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__ */ jsx6(ChartDot, {
+      cx,
+      cy,
+      stroke
+    }) : dot,
+    activeDot: activeDot === undefined || activeDot === true ? ({ cx, cy }) => /* @__PURE__ */ jsx6(ChartDot, {
+      cx,
+      cy,
+      stroke,
+      active: true
+    }) : activeDot,
+    isAnimationActive: false,
+    ...props
+  });
+}
+function ChartScatter(props) {
+  return /* @__PURE__ */ jsx6(Scatter, {
+    fill: accent,
+    isAnimationActive: false,
+    ...props
+  });
+}
+function ChartXAxis(props) {
+  return /* @__PURE__ */ jsx6(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__ */ jsx6(YAxis, {
+    stroke: "var(--atbl-muted)",
+    tickLine: false,
+    axisLine: false,
+    tick: { fontSize: "var(--atbl-type-meta-size)" },
+    ...props
+  });
+}
+function ChartGrid(props) {
+  return /* @__PURE__ */ jsx6(CartesianGrid, {
+    stroke: "var(--atbl-border)",
+    vertical: false,
+    ...props
+  });
+}
+function ChartTooltipContent(props) {
+  if (!props.active)
+    return null;
+  return /* @__PURE__ */ jsx6(TooltipSurface, {
+    "data-variant": "chart",
+    role: "tooltip",
+    children: /* @__PURE__ */ jsx6(DefaultTooltipContent, {
+      ...props,
+      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: { paddingTop: 2, paddingBottom: 0, ...props.itemStyle }
+    })
+  });
+}
+function ChartTooltip(props) {
+  return /* @__PURE__ */ jsx6(Tooltip, {
+    content: /* @__PURE__ */ jsx6(ChartTooltipContent, {}),
+    cursor: false,
+    isAnimationActive: false,
+    ...props
+  });
+}
 
 // src/react/ui/chart-data.ts
 function validateChartItems(kind, items) {
@@ -1085,7 +1272,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 jsx7, jsxs as jsxs4, Fragment } from "react/jsx-runtime";
 function TrendChart({
   items,
   unit,
@@ -1094,6 +1281,8 @@ function TrendChart({
   area = false
 }) {
   validateChartItems(area ? "area" : "line", items);
+  const Plot = area ? RechartsAreaChart : RechartsLineChart;
+  const [activeIndex, setActiveIndex] = useState();
   const scrollport = useRef(null);
   useLayoutEffect(() => {
     const element = scrollport.current;
@@ -1103,64 +1292,77 @@ 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", {
     className: "altertable-trend-chart",
     "aria-label": ariaLabel,
     children: [
-      items.length === 0 && /* @__PURE__ */ jsx6("span", {
+      items.length === 0 && /* @__PURE__ */ jsx7("span", {
         children: "No data"
       }),
-      items.length > 0 && /* @__PURE__ */ jsx6(Fragment, {
-        children: /* @__PURE__ */ jsx6("div", {
+      items.length > 0 && /* @__PURE__ */ jsx7(Fragment, {
+        children: /* @__PURE__ */ jsx7("div", {
           className: "altertable-trend-scroll",
           ref: scrollport,
           children: /* @__PURE__ */ jsxs4("div", {
             className: "altertable-trend-plot",
             style: { minWidth: items.length * 40 },
             children: [
-              /* @__PURE__ */ jsxs4("svg", {
-                viewBox: "0 0 1000 220",
-                preserveAspectRatio: "none",
+              /* @__PURE__ */ jsx7("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__ */ jsxs4(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__ */ jsx7(ChartXAxis, {
+                      hide: true,
+                      dataKey: "id",
+                      scale: "band"
+                    }),
+                    /* @__PURE__ */ jsx7(ChartYAxis, {
+                      hide: true,
+                      domain: [low, high === low ? low + 1 : high]
+                    }),
+                    /* @__PURE__ */ jsx7(ReferenceLine, {
+                      y: 0,
+                      stroke: "var(--atbl-border)"
+                    }),
+                    area && /* @__PURE__ */ jsx7(ChartArea, {
+                      dataKey: "plotValue",
+                      stroke: "none",
+                      fill: "var(--atbl-accent)",
+                      dot: false,
+                      activeDot: false
+                    }),
+                    /* @__PURE__ */ jsx7(ChartLine, {
+                      dataKey: "plotValue",
+                      dot: ({ cx, cy, index }) => /* @__PURE__ */ jsx7(ChartDot, {
+                        cx,
+                        cy,
+                        active: index === activeIndex
+                      }),
+                      activeDot: false
+                    })
+                  ]
+                })
               }),
-              /* @__PURE__ */ jsx6("div", {
+              /* @__PURE__ */ jsx7("div", {
                 className: "altertable-trend-points",
-                children: items.map((item, index) => /* @__PURE__ */ jsx6(Tooltip2, {
+                children: items.map((item, index) => /* @__PURE__ */ jsx7(Tooltip2, {
                   variant: "chart",
+                  onOpenChange: (open) => setActiveIndex((current) => open ? index : current === index ? undefined : current),
                   content: /* @__PURE__ */ jsxs4(Fragment, {
                     children: [
-                      /* @__PURE__ */ jsx6("strong", {
+                      /* @__PURE__ */ jsx7("strong", {
                         children: item.label
                       }),
                       /* @__PURE__ */ jsxs4("span", {
@@ -1175,20 +1377,16 @@ function TrendChart({
                   className: "altertable-chart-column",
                   children: /* @__PURE__ */ jsxs4("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__ */ jsx7("span", {
+                        className: "altertable-trend-hit"
                       }),
-                      /* @__PURE__ */ jsx6("span", {
+                      /* @__PURE__ */ jsx7("span", {
                         className: "altertable-trend-label",
                         children: item.label
                       })
@@ -1205,33 +1403,187 @@ function TrendChart({
 }
 
 // src/react/ui/LineChart.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function LineChart(props) {
-  return /* @__PURE__ */ jsx7(TrendChart, {
+  return /* @__PURE__ */ jsx8(TrendChart, {
     ...props
   });
 }
 // src/react/ui/AreaChart.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function AreaChart(props) {
-  return /* @__PURE__ */ jsx8(TrendChart, {
+  return /* @__PURE__ */ jsx9(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 } 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 jsxs6, 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 +1610,12 @@ function PieChart({
     }).format(share);
   }
   function detail(item) {
-    return /* @__PURE__ */ jsxs5(Fragment2, {
+    return /* @__PURE__ */ jsxs6(Fragment3, {
       children: [
-        /* @__PURE__ */ jsx9("strong", {
+        /* @__PURE__ */ jsx11("strong", {
           children: item.label
         }),
-        /* @__PURE__ */ jsxs5("span", {
+        /* @__PURE__ */ jsxs6("span", {
           children: [
             formatValue(item.value),
             " ",
@@ -1276,37 +1628,37 @@ function PieChart({
     });
   }
   const preview = slices.find((item) => item.id === previewId);
-  return /* @__PURE__ */ jsxs5("section", {
+  return /* @__PURE__ */ jsxs6("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__ */ jsxs6(Fragment3, {
         children: [
-          /* @__PURE__ */ jsxs5("div", {
+          /* @__PURE__ */ jsxs6("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 +1675,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__ */ jsxs6("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: "slice",
+                      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 +1722,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 jsxs7, Fragment as Fragment4 } from "react/jsx-runtime";
 function formatNumber(value) {
   return new Intl.NumberFormat(undefined, { maximumFractionDigits: 1 }).format(value);
 }
@@ -1395,37 +1751,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__ */ jsxs7("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__ */ jsxs7(Fragment4, {
         children: [
-          /* @__PURE__ */ jsxs6("p", {
+          /* @__PURE__ */ jsxs7("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__ */ jsxs7("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 +1789,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__ */ jsxs7(Fragment4, {
                     children: [
-                      /* @__PURE__ */ jsx10("strong", {
+                      /* @__PURE__ */ jsx12("strong", {
                         children: item.label
                       }),
-                      /* @__PURE__ */ jsxs6("span", {
+                      /* @__PURE__ */ jsxs7("span", {
                         children: [
                           xLabel,
                           ": ",
@@ -1449,7 +1805,7 @@ function ScatterChart({
                           xUnit
                         ]
                       }),
-                      /* @__PURE__ */ jsxs6("span", {
+                      /* @__PURE__ */ jsxs7("span", {
                         children: [
                           yLabel,
                           ": ",
@@ -1465,20 +1821,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__ */ jsxs7("p", {
             className: "altertable-scatter-axis-title altertable-scatter-x-title",
             children: [
               xLabel,
@@ -1491,8 +1847,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 jsxs8, Fragment as Fragment5 } from "react/jsx-runtime";
 function BarChart({
   items,
   unit,
@@ -1500,6 +1857,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,68 +1865,350 @@ 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__ */ jsxs8("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__ */ jsx11("strong", {
-                children: item.label
-              }),
-              /* @__PURE__ */ jsxs7("span", {
+        children: /* @__PURE__ */ jsxs8("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, {
+                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: [
-                  formatValue(item.value),
-                  " ",
-                  unit
+                  /* @__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))
+                  })
                 ]
               })
-            ]
-          }),
-          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)}%`
-                  }
+            }),
+            /* @__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__ */ jsxs8(Fragment5, {
+                  children: [
+                    /* @__PURE__ */ jsx13("strong", {
+                      children: item.label
+                    }),
+                    /* @__PURE__ */ jsxs8("span", {
+                      children: [
+                        formatValue(item.value),
+                        " ",
+                        unit
+                      ]
+                    })
+                  ]
+                }),
+                className: "altertable-chart-column",
+                children: /* @__PURE__ */ jsxs8("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
+                    })
+                  ]
                 })
-              }),
-              /* @__PURE__ */ jsx11("span", {
-                className: "altertable-selectable-bars-label",
-                children: item.label
-              })
-            ]
-          })
-        }, item.id))
+              }, 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 jsxs9, Fragment as Fragment6 } from "react/jsx-runtime";
+function RadioGroup({
+  label,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs9(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__ */ jsxs9(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 jsxs10 } 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__ */ jsxs10("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/ComposedChartLegend.tsx
+import { Legend } from "recharts";
+import { jsx as jsx16, jsxs as jsxs11, 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 = 20,
+  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 = legendMarkerKinds[type ?? "none"] ?? "point";
+      const formatLabel = entry.formatter ?? formatter;
+      const label = formatLabel ? formatLabel(entry.value, entry, index) : entry.value;
+      const content = /* @__PURE__ */ jsxs11(Fragment7, {
+        children: [
+          type !== "none" && (entry.legendIcon ?? /* @__PURE__ */ jsx16(ChartLegend.Marker, {
+            kind,
+            color: entry.inactive ? inactiveColor : entry.color,
+            style: { width: iconSize, height: 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: 20,
+    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
+}) {
+  return /* @__PURE__ */ jsx17("section", {
+    className: ["altertable-composed-chart", className].filter(Boolean).join(" "),
+    "aria-label": ariaLabel,
+    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
+});
 export {
   AboutData2 as AboutData,
   AppIcon2 as AppIcon,
   AreaChart,
   BarChart,
+  ChartLegend,
   Checkbox2 as Checkbox,
-  Combobox2 as Combobox,
+  CheckboxGroup,
+  ChoicePicker2 as ChoicePicker,
+  ComposedChart,
   DataApp,
   DataAppProvider2 as DataAppProvider,
   DataAppSkeleton,
@@ -1580,6 +2220,8 @@ export {
   DataWidget2 as DataWidget,
   DateRangePicker2 as DateRangePicker,
   DimensionPicker2 as DimensionPicker,
+  FilterActions2 as FilterActions,
+  FilterBar2 as FilterBar,
   GettingStarted,
   GlossaryDefinition,
   GlossaryExplanation,
@@ -1587,12 +2229,26 @@ export {
   HelpPopover2 as HelpPopover,
   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,
   ScatterChart,
   SearchField2 as SearchField,
   SearchMatch2 as SearchMatch,
+  SegmentedControl,
+  Select2 as Select,
   Sheet2 as Sheet,
   Tab2 as Tab,
   TabList2 as TabList,
@@ -1603,12 +2259,14 @@ 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,
   useViewTab2 as useViewTab
 };
 
-//# debugId=44AF1347DDC5E0E164756E2164756E21
+//# debugId=FCD41F839B3A5B8964756E2164756E21