@altertable/data-app 0.64.0 → 0.65.0

package/dist/react/index.js

@@ -23,12 +23,12 @@ import {
 import {
   createDataClient2,
   getDataAppNavigation2
-} from "../chunks/contract-xtxza1fy.js";
+} from "../chunks/contract-a061yj6r.js";
 import {
   DataAppError2,
   localFrameBridge,
   getDataAppTransport2
-} from "../chunks/contract-mwe7gnmh.js";
+} from "../chunks/contract-sm7j7k95.js";
 
 // src/react/injectStyles.ts
 function injectStyles({
@@ -332,6 +332,7 @@ function injectDataAppStyles(options = {}) {
 .altertable-grid > * {
   min-width: 0;
   min-height: 0;
+  margin: 0;
 }
 
 .altertable-grid[data-align="stretch"] {
@@ -375,19 +376,19 @@ function injectDataAppStyles(options = {}) {
   min-height: 0;
 }
 
-@container altertable-grid (width >= 408px) {
+@container altertable-grid (width >= 414px) {
   .altertable-grid:not([data-columns="1"])[data-min-item-width="compact"] > .altertable-grid-item[data-span="2"] {
     grid-column: span 2;
   }
 }
 
-@container altertable-grid (width >= 504px) {
+@container altertable-grid (width >= 510px) {
   .altertable-grid:not([data-columns="1"])[data-min-item-width="regular"] > .altertable-grid-item[data-span="2"] {
     grid-column: span 2;
   }
 }
 
-@container altertable-grid (width >= 664px) {
+@container altertable-grid (width >= 670px) {
   .altertable-grid:not([data-columns="1"])[data-min-item-width="wide"] > .altertable-grid-item[data-span="2"] {
     grid-column: span 2;
   }
@@ -2692,9 +2693,16 @@ body, #root {
 }
 
 .altertable-app-body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--at-layout-gap, 24px);
   min-width: 0;
 }
 
+.altertable-app-main > *, .altertable-app-body > * {
+  margin: 0;
+}
+
 .altertable-app-footer {
   margin-top: auto;
 }
@@ -3380,6 +3388,11 @@ button {
   justify-content: center;
 }
 
+.altertable-data-view-toast-region[data-position="top"] {
+  top: max(20px, env(safe-area-inset-top));
+  bottom: auto;
+}
+
 .altertable-data-view-toast {
   display: flex;
   overflow: auto;
@@ -3405,7 +3418,7 @@ button {
   flex: none;
 }
 
-.altertable-data-view-toast[data-state="stale-error"] > svg {
+.altertable-data-view-toast[data-state="error"] > svg {
   color: var(--at-danger, #b42318);
 }
 
@@ -3769,6 +3782,10 @@ button {
   gap: var(--at-layout-gap, 24px);
 }
 
+.altertable-stack > * {
+  margin: 0;
+}
+
 /* src/react/ui/Inspect.css */
 .altertable-inspect-trigger {
   display: inline-grid;
@@ -4752,6 +4769,31 @@ button {
   height: 16px;
 }
 
+/* src/react/ui/ExportControl.css */
+.altertable-export-popover {
+  z-index: 1000;
+  max-height: min(320px, var(--available-height));
+  overflow: auto;
+  border: 1px solid var(--at-border, #e3e6e8);
+  border-radius: var(--at-radius-surface, 12px);
+  background: var(--at-surface, #fff);
+  color: var(--at-text, #202124);
+  max-width: min(320px, 100vw - 32px);
+  padding: 4px;
+  box-shadow: 0 10px 32px #0000001f;
+}
+
+.altertable-export-popover [role="menuitem"] {
+  outline: none;
+  border-radius: 6px;
+  padding: 10px 12px;
+  font-size: 13px;
+}
+
+.altertable-export-popover [role="menuitem"][data-focused] {
+  background: var(--at-border, #e3e6e8);
+}
+
 /* src/react/styles.css */
 
 `,
@@ -4806,6 +4848,7 @@ function injectDataAppShellStyles(options = {}) {
 .altertable-grid > * {
   min-width: 0;
   min-height: 0;
+  margin: 0;
 }
 
 .altertable-grid[data-align="stretch"] {
@@ -4849,19 +4892,19 @@ function injectDataAppShellStyles(options = {}) {
   min-height: 0;
 }
 
-@container altertable-grid (width >= 408px) {
+@container altertable-grid (width >= 414px) {
   .altertable-grid:not([data-columns="1"])[data-min-item-width="compact"] > .altertable-grid-item[data-span="2"] {
     grid-column: span 2;
   }
 }
 
-@container altertable-grid (width >= 504px) {
+@container altertable-grid (width >= 510px) {
   .altertable-grid:not([data-columns="1"])[data-min-item-width="regular"] > .altertable-grid-item[data-span="2"] {
     grid-column: span 2;
   }
 }
 
-@container altertable-grid (width >= 664px) {
+@container altertable-grid (width >= 670px) {
   .altertable-grid:not([data-columns="1"])[data-min-item-width="wide"] > .altertable-grid-item[data-span="2"] {
     grid-column: span 2;
   }
@@ -5236,7 +5279,12 @@ function mountDataApp({
   document.documentElement.lang = navigator.language;
   document.title = dataAppTitle2(config);
   getDataAppNavigation2();
-  createRoot(root).render(/* @__PURE__ */ jsx(DataAppProvider, {
+  createRoot(root, {
+    onUncaughtError(error) {
+      console.error(error);
+      getDataAppTransport2()?.fail();
+    }
+  }).render(/* @__PURE__ */ jsx(DataAppProvider, {
     children: /* @__PURE__ */ jsx(Component, {})
   }));
 }
@@ -5323,6 +5371,7 @@ import {
   Clock3,
   Copy,
   FileCode2,
+  Download,
   Info,
   LoaderCircle,
   Minus,
@@ -5349,6 +5398,7 @@ var brandedIcons = {
   info: Info,
   openDetails: ChevronRight,
   present: Presentation,
+  export: Download,
   error: CircleAlert,
   close: X,
   previous: ArrowLeft,
@@ -8462,15 +8512,81 @@ function AppScope({
   });
 }
 
-// src/react/ui/LiveControl.tsx
-import {
-  Button as AriaButton2,
-  ListBox as ListBox3,
-  ListBoxItem as ListBoxItem3,
-  Popover as Popover3,
-  Select as Select2,
-  SelectValue as SelectValue2
-} from "react-aria-components";
+// src/react/ui/ExportControl.tsx
+import { useState as useState12 } from "react";
+
+// src/react/ui/csv-export.ts
+import { strToU8, zipSync } from "fflate";
+function formatCsv({
+  columns,
+  rows
+}) {
+  if (!columns.length)
+    throw new Error("CSV export needs at least one column.");
+  if (rows.some((row) => row.length !== columns.length))
+    throw new Error("CSV rows must match the export columns.");
+  function cell(value) {
+    if (value === null || value === undefined)
+      return "";
+    let text = String(value);
+    if (typeof value === "string" && /^[\s]*[=+\-@]|^[\t\r\n]/.test(text))
+      text = `'${text}`;
+    return /[",\r\n]/.test(text) ? `"${text.replaceAll('"', '""')}"` : text;
+  }
+  return [columns, ...rows].map((row) => row.map(cell).join(",")).join(`\r
+`) + `\r
+`;
+}
+function filenameWithExtension(name, extension) {
+  const filename = name.toLowerCase().endsWith(`.${extension}`) ? name : `${name.replace(/\.(?:csv|zip)$/i, "")}.${extension}`;
+  if (!name.trim() || filename.length > 255 || /[\p{Cc}\\/]/u.test(filename))
+    throw new Error("Export filenames must be nonempty names without paths.");
+  return filename;
+}
+function createCsvDownload(data, selectedTable) {
+  if (!data.tables.length)
+    throw new Error("CSV export needs at least one dataset.");
+  const names = data.tables.map((table) => filenameWithExtension(table.name, "csv"));
+  if (new Set(names.map((name) => name.toLowerCase())).size !== names.length)
+    throw new Error("CSV dataset names must be unique.");
+  const table = selectedTable ?? (data.tables.length === 1 ? data.tables[0] : undefined);
+  if (table)
+    return {
+      filename: filenameWithExtension(selectedTable ? table.name : data.filename, "csv"),
+      blob: new Blob(["\uFEFF" + formatCsv(table)], {
+        type: "text/csv;charset=utf-8"
+      }),
+      route: "export:csv"
+    };
+  const files = Object.fromEntries(data.tables.map((dataset, index) => [
+    names[index],
+    strToU8("\uFEFF" + formatCsv(dataset))
+  ]));
+  return {
+    filename: filenameWithExtension(data.filename, "zip"),
+    blob: new Blob([zipSync(files, { level: 1 })], { type: "application/zip" }),
+    route: "export:zip"
+  };
+}
+async function exportCsv(data, table) {
+  const { filename, blob, route } = createCsvDownload(data, table);
+  const transport = getDataAppTransport2();
+  if (transport) {
+    await transport.request({ route, payload: { filename, blob } });
+    return;
+  }
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  document.body.append(link);
+  try {
+    link.click();
+  } finally {
+    link.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+  }
+}
 
 // src/react/ui/IconButton.tsx
 import { jsx as jsx27, jsxs as jsxs18, Fragment as Fragment6 } from "react/jsx-runtime";
@@ -8522,8 +8638,129 @@ function IconButton({
   });
 }
 
-// src/react/ui/LiveControl.tsx
+// src/react/ui/ExportControl.tsx
+import { Menu, MenuItem, MenuTrigger, Popover as Popover3 } from "react-aria-components";
+
+// src/react/ui/Toast.tsx
 import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
+function Toast({
+  state,
+  children,
+  onRetry,
+  position = "bottom"
+}) {
+  const failed = state === "error";
+  const updating = state === "updating";
+  return /* @__PURE__ */ jsx28("div", {
+    className: "altertable-data-view-toast-region",
+    "data-position": position,
+    children: /* @__PURE__ */ jsxs19("div", {
+      className: "altertable-data-view-toast",
+      "data-state": state,
+      role: failed ? "alert" : "status",
+      children: [
+        /* @__PURE__ */ jsx28(AppIcon, {
+          name: failed ? "error" : updating ? "loading" : "live",
+          size: 16,
+          className: updating ? "altertable-data-view-toast-spinner" : undefined
+        }),
+        /* @__PURE__ */ jsx28("span", {
+          children
+        }),
+        failed && onRetry && /* @__PURE__ */ jsx28(Button, {
+          onClick: onRetry,
+          children: "Try again"
+        })
+      ]
+    })
+  });
+}
+
+// src/react/ui/ExportControl.tsx
+import { jsx as jsx29, jsxs as jsxs20, Fragment as Fragment7 } from "react/jsx-runtime";
+function ExportControl({ csv }) {
+  const [open, setOpen] = useState12(false);
+  const [status, setStatus] = useState12("idle");
+  const [retryTableName, setRetryTableName] = useState12();
+  async function download(table) {
+    setOpen(false);
+    setRetryTableName(table?.name);
+    setStatus("pending");
+    try {
+      await exportCsv(csv, table);
+      setStatus("idle");
+    } catch {
+      setStatus("error");
+    }
+  }
+  return /* @__PURE__ */ jsxs20(Fragment7, {
+    children: [
+      status === "error" && /* @__PURE__ */ jsx29(Toast, {
+        state: "error",
+        position: "top",
+        onRetry: () => void download(csv.tables.find((table) => table.name === retryTableName)),
+        children: "Couldn’t export data."
+      }),
+      csv.tables.length === 1 ? /* @__PURE__ */ jsx29(IconButton, {
+        icon: "export",
+        variant: "elevated",
+        label: "Export CSV",
+        disabled: status === "pending",
+        "aria-busy": status === "pending",
+        onClick: () => void download()
+      }) : /* @__PURE__ */ jsxs20(MenuTrigger, {
+        isOpen: open,
+        onOpenChange: setOpen,
+        children: [
+          /* @__PURE__ */ jsx29(PressButton, {
+            variant: "elevated",
+            size: "icon",
+            "aria-label": "Export",
+            isDisabled: status === "pending",
+            "aria-busy": status === "pending",
+            children: /* @__PURE__ */ jsx29(AppIcon, {
+              name: "export"
+            })
+          }),
+          /* @__PURE__ */ jsx29(Popover3, {
+            placement: "bottom end",
+            className: "altertable-export-popover",
+            children: /* @__PURE__ */ jsxs20(Menu, {
+              "aria-label": "Export data",
+              children: [
+                csv.tables.map((table, index) => /* @__PURE__ */ jsxs20(MenuItem, {
+                  id: index,
+                  onAction: () => void download(table),
+                  children: [
+                    "Export ",
+                    table.name,
+                    " (CSV)"
+                  ]
+                }, index)),
+                /* @__PURE__ */ jsx29(MenuItem, {
+                  id: "all",
+                  onAction: () => void download(),
+                  children: "Export all (ZIP)"
+                })
+              ]
+            })
+          })
+        ]
+      })
+    ]
+  });
+}
+
+// src/react/ui/LiveControl.tsx
+import {
+  Button as AriaButton2,
+  ListBox as ListBox3,
+  ListBoxItem as ListBoxItem3,
+  Popover as Popover4,
+  Select as Select2,
+  SelectValue as SelectValue2
+} from "react-aria-components";
+import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
 var intervals = [
   { seconds: 30, label: "Every 30 seconds", description: "every 30 seconds" },
   { seconds: 60, label: "Every minute", description: "every minute" },
@@ -8539,11 +8776,11 @@ function LiveControl({
 }) {
   const frequency = intervals.find((interval) => interval.seconds === intervalSeconds)?.description;
   invariant(frequency, "LiveControl requires a supported update interval.");
-  return /* @__PURE__ */ jsxs19("div", {
+  return /* @__PURE__ */ jsxs21("div", {
     className: classNames("altertable-live-control", className),
     "data-active": enabled,
     children: [
-      /* @__PURE__ */ jsx28(IconButton, {
+      /* @__PURE__ */ jsx30(IconButton, {
         ...props,
         icon: "live",
         variant: "ghost",
@@ -8551,7 +8788,7 @@ function LiveControl({
         "aria-pressed": enabled,
         onClick: () => onChange(!enabled)
       }),
-      /* @__PURE__ */ jsxs19(Select2, {
+      /* @__PURE__ */ jsxs21(Select2, {
         "aria-label": `Live update frequency: ${frequency}`,
         selectedKey: String(intervalSeconds),
         onSelectionChange: (key) => {
@@ -8561,29 +8798,29 @@ function LiveControl({
         },
         className: "altertable-live-frequency",
         children: [
-          /* @__PURE__ */ jsxs19(AriaButton2, {
+          /* @__PURE__ */ jsxs21(AriaButton2, {
             "aria-label": `Live update frequency: ${frequency}`,
             children: [
-              /* @__PURE__ */ jsx28(SelectValue2, {
+              /* @__PURE__ */ jsx30(SelectValue2, {
                 className: "altertable-visually-hidden"
               }),
-              /* @__PURE__ */ jsx28(AppIcon, {
+              /* @__PURE__ */ jsx30(AppIcon, {
                 name: "disclosure",
                 size: 14
               })
             ]
           }),
-          /* @__PURE__ */ jsx28(Popover3, {
+          /* @__PURE__ */ jsx30(Popover4, {
             placement: "bottom end",
             className: "altertable-live-frequency-popover",
-            children: /* @__PURE__ */ jsx28(ListBox3, {
+            children: /* @__PURE__ */ jsx30(ListBox3, {
               "aria-label": "Live update frequency",
-              children: intervals.map((interval) => /* @__PURE__ */ jsxs19(ListBoxItem3, {
+              children: intervals.map((interval) => /* @__PURE__ */ jsxs21(ListBoxItem3, {
                 id: String(interval.seconds),
                 textValue: interval.label,
                 children: [
                   interval.label,
-                  /* @__PURE__ */ jsx28(AppIcon, {
+                  /* @__PURE__ */ jsx30(AppIcon, {
                     name: "check",
                     size: 15
                   })
@@ -8603,7 +8840,7 @@ import {
   useEffectEvent as useEffectEvent2,
   useId as useId7,
   useRef as useRef5,
-  useState as useState12
+  useState as useState13
 } from "react";
 import { useMergeRefs as useMergeRefs5 } from "@floating-ui/react";
 
@@ -8613,7 +8850,7 @@ import {
   useId as useId6,
   useSyncExternalStore as useSyncExternalStore3
 } from "react";
-import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
 var themes = [
   { value: "light", label: "Light", icon: "lightTheme" },
   { value: "dark", label: "Dark", icon: "darkTheme" }
@@ -8642,19 +8879,19 @@ function ThemeSelector({
 }) {
   const selected = useResolvedTheme(theme);
   const name = useId6();
-  return /* @__PURE__ */ jsxs20("fieldset", {
+  return /* @__PURE__ */ jsxs22("fieldset", {
     ...props,
     className: classNames("altertable-theme-selector", className),
     children: [
-      /* @__PURE__ */ jsx29("legend", {
+      /* @__PURE__ */ jsx31("legend", {
         className: "altertable-theme-legend",
         children: "Color theme"
       }),
-      themes.map(({ value, label, icon }) => /* @__PURE__ */ jsx29(Tooltip, {
+      themes.map(({ value, label, icon }) => /* @__PURE__ */ jsx31(Tooltip, {
         content: `${label} theme`,
-        children: /* @__PURE__ */ jsxs20("label", {
+        children: /* @__PURE__ */ jsxs22("label", {
           children: [
-            /* @__PURE__ */ jsx29("input", {
+            /* @__PURE__ */ jsx31("input", {
               type: "radio",
               name,
               value,
@@ -8662,7 +8899,7 @@ function ThemeSelector({
               "aria-label": `${label} theme`,
               onChange: () => theme.setTheme(value)
             }),
-            /* @__PURE__ */ jsx29(AppIcon, {
+            /* @__PURE__ */ jsx31(AppIcon, {
               name: icon,
               size: 16
             })
@@ -8680,7 +8917,7 @@ function ThemeToggle({
   const selected = useResolvedTheme(theme);
   const next = selected === "dark" ? "light" : "dark";
   const icon = next === "dark" ? "darkTheme" : "lightTheme";
-  return /* @__PURE__ */ jsx29(IconButton, {
+  return /* @__PURE__ */ jsx31(IconButton, {
     icon,
     variant: "ghost",
     label: `Switch to ${next} theme`,
@@ -8717,7 +8954,7 @@ function storySteps(findings, context) {
 }
 
 // src/react/ui/PresentStory.tsx
-import { jsx as jsx30, jsxs as jsxs21, Fragment as Fragment7 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs23, Fragment as Fragment8 } from "react/jsx-runtime";
 var stepKeys = {
   ArrowRight(index) {
     return index + 1;
@@ -8760,9 +8997,11 @@ function PresentStory({
   const dialog = useRef5(null);
   const trigger = useRef5(null);
   const headline = useRef5(null);
+  const ownedFullscreenElement = useRef5(null);
+  const isOpening = useRef5(false);
   const headlineId = useId7();
   const contextId = useId7();
-  const [stepId, setStepId] = useState12(steps[0]?.id);
+  const [stepId, setStepId] = useState13(steps[0]?.id);
   const triggerRef = useMergeRefs5([trigger, ref]);
   const dialogRef = useMergeRefs5([dialog, dialogProps?.ref]);
   const index = Math.max(0, steps.findIndex((step) => step.id === stepId));
@@ -8790,18 +9029,62 @@ function PresentStory({
     if (dialog.current?.open)
       headline.current?.focus({ preventScroll: true });
   }, [stepId]);
+  useEffect11(() => {
+    const presentationDialog = dialog.current;
+    if (!presentationDialog)
+      return;
+    const ownerDocument = presentationDialog.ownerDocument;
+    function handleFullscreenChange() {
+      const fullscreenElement = ownedFullscreenElement.current;
+      if (!fullscreenElement || ownerDocument.fullscreenElement === fullscreenElement)
+        return;
+      ownedFullscreenElement.current = null;
+      dialog.current?.close();
+    }
+    ownerDocument.addEventListener("fullscreenchange", handleFullscreenChange);
+    return () => {
+      ownerDocument.removeEventListener("fullscreenchange", handleFullscreenChange);
+      exitPresentationFullscreen();
+    };
+  }, []);
+  function exitPresentationFullscreen() {
+    const fullscreenElement = ownedFullscreenElement.current;
+    ownedFullscreenElement.current = null;
+    if (!fullscreenElement)
+      return;
+    const ownerDocument = fullscreenElement.ownerDocument;
+    if (ownerDocument.fullscreenElement === fullscreenElement)
+      ownerDocument.exitFullscreen().catch(() => {});
+  }
   function writePresentation(id, mode = "replace") {
     writeSearch({ present: id ? "1" : null, step: id ?? null }, mode);
   }
-  function open() {
-    if (unavailable)
+  async function openPresentation() {
+    const presentationDialog = dialog.current;
+    const firstStep = steps[0];
+    if (unavailable || isOpening.current || !presentationDialog || !firstStep)
+      return;
+    const ownerDocument = presentationDialog.ownerDocument;
+    const fullscreenElement = ownerDocument.documentElement;
+    isOpening.current = true;
+    try {
+      if (!ownerDocument.fullscreenElement && ownerDocument.fullscreenEnabled) {
+        await fullscreenElement.requestFullscreen();
+        ownedFullscreenElement.current = fullscreenElement;
+      }
+    } catch {} finally {
+      isOpening.current = false;
+    }
+    if (!presentationDialog.isConnected) {
+      exitPresentationFullscreen();
       return;
-    setStepId(steps[0].id);
-    dialog.current?.showModal();
+    }
+    setStepId(firstStep.id);
+    presentationDialog.showModal();
     headline.current?.focus({ preventScroll: true });
-    writePresentation(steps[0].id, "push");
+    writePresentation(firstStep.id, "push");
   }
-  useShortcut(shortcuts.playStory, open, !unavailable);
+  useShortcut(shortcuts.playStory, openPresentation, !unavailable);
   function goTo(nextIndex) {
     const next = steps[nextIndex];
     if (!next)
@@ -8818,12 +9101,12 @@ function PresentStory({
     event.preventDefault();
     goTo(move(index, steps.length - 1));
   }
-  return /* @__PURE__ */ jsxs21(Fragment7, {
+  return /* @__PURE__ */ jsxs23(Fragment8, {
     children: [
-      /* @__PURE__ */ jsx30("span", {
+      /* @__PURE__ */ jsx32("span", {
         ...launcherProps,
         className: classNames("altertable-present-launch", launcherProps?.className),
-        children: /* @__PURE__ */ jsx30(IconButton, {
+        children: /* @__PURE__ */ jsx32(IconButton, {
           ...props,
           ref: triggerRef,
           icon: "present",
@@ -8836,12 +9119,12 @@ function PresentStory({
           onClick: (event) => {
             onClick?.(event);
             if (!event.defaultPrevented)
-              open();
+              openPresentation();
           },
           children
         })
       }),
-      /* @__PURE__ */ jsx30("dialog", {
+      /* @__PURE__ */ jsx32("dialog", {
         ...dialogProps,
         ref: dialogRef,
         className: classNames("altertable-present-dialog", dialogProps?.className),
@@ -8850,6 +9133,7 @@ function PresentStory({
         onClose: (event) => {
           if (event.target !== event.currentTarget)
             return;
+          exitPresentationFullscreen();
           if (searchParams().get("present") === "1")
             writePresentation();
           trigger.current?.focus({ preventScroll: true });
@@ -8860,21 +9144,21 @@ function PresentStory({
           if (!event.defaultPrevented)
             handleKeyDown(event);
         },
-        children: step && /* @__PURE__ */ jsxs21("div", {
+        children: step && /* @__PURE__ */ jsxs23("div", {
           className: "altertable-present-shell",
           children: [
-            /* @__PURE__ */ jsxs21("header", {
+            /* @__PURE__ */ jsxs23("header", {
               className: "altertable-present-header",
               children: [
-                /* @__PURE__ */ jsxs21("div", {
+                /* @__PURE__ */ jsxs23("div", {
                   className: "altertable-present-title",
                   children: [
-                    /* @__PURE__ */ jsx30("strong", {
+                    /* @__PURE__ */ jsx32("strong", {
                       children: title
                     }),
-                    scope && /* @__PURE__ */ jsxs21(Fragment7, {
+                    scope && /* @__PURE__ */ jsxs23(Fragment8, {
                       children: [
-                        /* @__PURE__ */ jsx30("span", {
+                        /* @__PURE__ */ jsx32("span", {
                           className: "altertable-present-connector",
                           "aria-hidden": "true",
                           children: "/"
@@ -8884,10 +9168,10 @@ function PresentStory({
                     })
                   ]
                 }),
-                /* @__PURE__ */ jsxs21("div", {
+                /* @__PURE__ */ jsxs23("div", {
                   className: "altertable-present-actions",
                   children: [
-                    /* @__PURE__ */ jsxs21("span", {
+                    /* @__PURE__ */ jsxs23("span", {
                       className: "altertable-present-count",
                       "aria-label": `Finding ${index + 1} of ${steps.length}`,
                       children: [
@@ -8896,15 +9180,15 @@ function PresentStory({
                         steps.length
                       ]
                     }),
-                    theme && /* @__PURE__ */ jsx30("span", {
+                    theme && /* @__PURE__ */ jsx32("span", {
                       className: "altertable-present-theme",
-                      children: /* @__PURE__ */ jsx30(ThemeToggle, {
+                      children: /* @__PURE__ */ jsx32(ThemeToggle, {
                         theme,
                         portalRoot: dialog
                       })
                     }),
                     headerActions,
-                    /* @__PURE__ */ jsx30(IconButton, {
+                    /* @__PURE__ */ jsx32(IconButton, {
                       icon: "close",
                       variant: "ghost",
                       label: "Exit presentation",
@@ -8917,25 +9201,25 @@ function PresentStory({
                 })
               ]
             }),
-            /* @__PURE__ */ jsxs21(GradientScroll, {
+            /* @__PURE__ */ jsxs23(GradientScroll, {
               className: "altertable-present-main",
               children: [
-                /* @__PURE__ */ jsxs21("div", {
+                /* @__PURE__ */ jsxs23("div", {
                   className: "altertable-present-copy",
                   children: [
-                    /* @__PURE__ */ jsx30("h2", {
+                    /* @__PURE__ */ jsx32("h2", {
                       id: headlineId,
                       ref: headline,
                       tabIndex: -1,
                       children: step.headline
                     }),
-                    step.context && /* @__PURE__ */ jsx30("p", {
+                    step.context && /* @__PURE__ */ jsx32("p", {
                       id: contextId,
                       children: step.context
                     }),
-                    /* @__PURE__ */ jsx30("div", {
+                    /* @__PURE__ */ jsx32("div", {
                       className: "altertable-present-explore",
-                      children: /* @__PURE__ */ jsxs21(AboutData, {
+                      children: /* @__PURE__ */ jsxs23(AboutData, {
                         shortcut: false,
                         id: step.id,
                         empty: step.empty ?? empty,
@@ -8954,7 +9238,7 @@ function PresentStory({
                         variant: "outline",
                         portalRoot: dialog,
                         children: [
-                          /* @__PURE__ */ jsx30(AppIcon, {
+                          /* @__PURE__ */ jsx32(AppIcon, {
                             name: "explore"
                           }),
                           " Explore sources"
@@ -8963,18 +9247,18 @@ function PresentStory({
                     })
                   ]
                 }),
-                /* @__PURE__ */ jsx30("div", {
+                /* @__PURE__ */ jsx32("div", {
                   className: "altertable-present-visual",
                   "data-kind": step.visualKind,
                   children: step.visual
                 })
               ]
             }, step.id),
-            /* @__PURE__ */ jsxs21("nav", {
+            /* @__PURE__ */ jsxs23("nav", {
               className: "altertable-present-nav",
               "aria-label": "Story findings",
               children: [
-                /* @__PURE__ */ jsx30(IconButton, {
+                /* @__PURE__ */ jsx32(IconButton, {
                   icon: "previous",
                   variant: "ghost",
                   label: "Previous step",
@@ -8985,13 +9269,13 @@ function PresentStory({
                   onClick: () => goTo(index - 1),
                   disabled: index === 0
                 }),
-                /* @__PURE__ */ jsx30("div", {
+                /* @__PURE__ */ jsx32("div", {
                   className: "altertable-present-dots",
-                  children: steps.map((item, itemIndex) => /* @__PURE__ */ jsx30(Tooltip, {
+                  children: steps.map((item, itemIndex) => /* @__PURE__ */ jsx32(Tooltip, {
                     content: item.headline,
                     placement: "top",
                     portalRoot: dialog,
-                    children: /* @__PURE__ */ jsx30("button", {
+                    children: /* @__PURE__ */ jsx32("button", {
                       type: "button",
                       "aria-label": `Finding ${itemIndex + 1}: ${item.headline}`,
                       "aria-current": itemIndex === index ? "step" : undefined,
@@ -8999,7 +9283,7 @@ function PresentStory({
                     })
                   }, item.id))
                 }),
-                /* @__PURE__ */ jsx30(IconButton, {
+                /* @__PURE__ */ jsx32(IconButton, {
                   icon: "next",
                   variant: "ghost",
                   label: "Next step",
@@ -9023,9 +9307,9 @@ function PresentStory({
 // src/react/ui/RefreshControl.tsx
 import {
   useEffect as useEffect12,
-  useState as useState13
+  useState as useState14
 } from "react";
-import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
 function RefreshControl({
   refreshing,
   children,
@@ -9035,7 +9319,7 @@ function RefreshControl({
   className,
   ...props
 }) {
-  const [refreshDelay, setRefreshDelay] = useState13({
+  const [refreshDelay, setRefreshDelay] = useState14({
     refreshing,
     elapsed: false
   });
@@ -9048,12 +9332,12 @@ function RefreshControl({
     return () => window.clearTimeout(timer);
   }, [refreshing]);
   const showProgress = refreshing && refreshDelay.refreshing && refreshDelay.elapsed;
-  return /* @__PURE__ */ jsxs22("div", {
+  return /* @__PURE__ */ jsxs24("div", {
     ...props,
     className: classNames("altertable-refresh-control", className),
     "data-refreshing": showProgress ? "" : undefined,
     children: [
-      /* @__PURE__ */ jsx31("div", {
+      /* @__PURE__ */ jsx33("div", {
         ...statusProps,
         className: classNames("altertable-refresh-status", statusProps?.className),
         "aria-live": "polite",
@@ -9066,7 +9350,7 @@ function RefreshControl({
 }
 
 // src/react/ui/AppToolbar.tsx
-import { jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
 function AppToolbar({
   children,
   updatedAt,
@@ -9076,6 +9360,7 @@ function AppToolbar({
   live,
   aboutData,
   story,
+  csvExport,
   end,
   controlsProps,
   className,
@@ -9097,27 +9382,27 @@ function AppToolbar({
       refresh.onRefresh();
   }
   useShortcut(shortcuts.refresh, runRefresh, !!refresh);
-  return /* @__PURE__ */ jsx32("div", {
+  return /* @__PURE__ */ jsx34("div", {
     ...props,
     className: classNames("altertable-app-toolbar", className),
     role,
     "aria-label": ariaLabel,
-    children: /* @__PURE__ */ jsxs23("div", {
+    children: /* @__PURE__ */ jsxs25("div", {
       ...controlsProps,
       className: classNames("altertable-app-toolbar-actions", controlsProps?.className),
       children: [
         children,
-        (initialLoading || updatedAt) && /* @__PURE__ */ jsx32("span", {
+        (initialLoading || updatedAt) && /* @__PURE__ */ jsx34("span", {
           className: "altertable-app-toolbar-updated",
-          children: initialLoading ? /* @__PURE__ */ jsx32("output", {
+          children: initialLoading ? /* @__PURE__ */ jsx34("output", {
             children: "Loading data"
           }) : updatedAt
         }),
-        refresh && /* @__PURE__ */ jsx32(RefreshControl, {
+        refresh && /* @__PURE__ */ jsx34(RefreshControl, {
           refreshing: refresh.refreshing,
           label: requestState === "loading" ? "Loading data" : requestState === "updating" ? "Updating data" : refresh.label,
           statusProps: refresh.statusProps,
-          children: /* @__PURE__ */ jsxs23(IconButton, {
+          children: /* @__PURE__ */ jsxs25(IconButton, {
             ...refresh.buttonProps,
             icon: "refresh",
             variant: "elevated",
@@ -9126,17 +9411,17 @@ function AppToolbar({
             tooltip: refresh.refreshing && refresh.onCancel ? "Cancel refresh" : refresh.tooltip,
             onClick: activateRefresh,
             children: [
-              /* @__PURE__ */ jsx32(AppIcon, {
+              /* @__PURE__ */ jsx34(AppIcon, {
                 name: "refresh",
                 className: "altertable-refresh-idle",
                 size: 17
               }),
-              /* @__PURE__ */ jsx32(AppIcon, {
+              /* @__PURE__ */ jsx34(AppIcon, {
                 name: "loading",
                 className: "altertable-refresh-loading",
                 size: 17
               }),
-              refresh.onCancel && /* @__PURE__ */ jsx32(AppIcon, {
+              refresh.onCancel && /* @__PURE__ */ jsx34(AppIcon, {
                 name: "stop",
                 className: "altertable-refresh-cancel",
                 size: 17,
@@ -9146,11 +9431,14 @@ function AppToolbar({
             ]
           })
         }),
-        live && /* @__PURE__ */ jsx32(LiveControl, {
+        live && /* @__PURE__ */ jsx34(LiveControl, {
           ...live
         }),
         aboutData,
-        story && /* @__PURE__ */ jsx32(PresentStory, {
+        !!csvExport?.tables.length && /* @__PURE__ */ jsx34(ExportControl, {
+          csv: csvExport
+        }),
+        story && /* @__PURE__ */ jsx34(PresentStory, {
           ...story
         }),
         end
@@ -9160,7 +9448,7 @@ function AppToolbar({
 }
 
 // src/react/ui/VariableBar.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function VariableBar({
   children,
   className,
@@ -9168,7 +9456,7 @@ function VariableBar({
   "aria-label": ariaLabel = "View variables",
   ...props
 }) {
-  return /* @__PURE__ */ jsx33("div", {
+  return /* @__PURE__ */ jsx35("div", {
     ...props,
     className: classNames("altertable-variable-bar", className),
     role,
@@ -9178,15 +9466,15 @@ function VariableBar({
 }
 
 // src/react/ui/DataViewToast.tsx
-import { useEffect as useEffect13, useState as useState14 } from "react";
-import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
+import { useEffect as useEffect13, useState as useState15 } from "react";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function DataViewToast({
   view,
   message,
   notice,
   onRetry
 }) {
-  const [delay, setDelay] = useState14({ kind: view.kind, elapsed: false });
+  const [delay, setDelay] = useState15({ kind: view.kind, elapsed: false });
   if (delay.kind !== view.kind)
     setDelay({ kind: view.kind, elapsed: false });
   useEffect13(() => {
@@ -9203,34 +9491,16 @@ function DataViewToast({
   const failed = showStaleError;
   const showingUpdate = view.kind === "updating" && showUpdating;
   const detail = view.kind === "stale-error" || view.kind === "updating" ? view.message : undefined;
-  const icon = failed ? "error" : showingUpdate ? "loading" : "live";
-  const state = failed ? "stale-error" : showingUpdate ? "updating" : "notice";
-  return /* @__PURE__ */ jsx34("div", {
-    className: "altertable-data-view-toast-region",
-    children: /* @__PURE__ */ jsxs24("div", {
-      className: "altertable-data-view-toast",
-      "data-state": state,
-      role: failed ? "alert" : "status",
-      children: [
-        /* @__PURE__ */ jsx34(AppIcon, {
-          name: icon,
-          size: 16,
-          className: showingUpdate ? "altertable-data-view-toast-spinner" : undefined
-        }),
-        /* @__PURE__ */ jsx34("span", {
-          children: failed ? message ?? detail : showingUpdate ? message ?? detail : notice
-        }),
-        failed && onRetry && /* @__PURE__ */ jsx34(Button, {
-          onClick: onRetry,
-          children: "Try again"
-        })
-      ]
-    })
+  const state = failed ? "error" : showingUpdate ? "updating" : "notice";
+  return /* @__PURE__ */ jsx36(Toast, {
+    state,
+    onRetry,
+    children: failed || showingUpdate ? message ?? detail : notice
   });
 }
 
 // src/react/ui/ContentSkeleton.tsx
-import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
 function ContentSkeleton({
   variant,
   rows = 4,
@@ -9238,29 +9508,29 @@ function ContentSkeleton({
   ...props
 }) {
   invariant(Number.isInteger(rows) && rows >= 0 && rows <= 100, "Skeleton rows must be between 0 and 100.");
-  return /* @__PURE__ */ jsxs25("div", {
+  return /* @__PURE__ */ jsxs26("div", {
     ...props,
     "aria-hidden": "true",
     className: classNames(`altertable-${variant === "metric" ? "metric-widget" : "data-widget"}`, "altertable-content-skeleton", className),
     children: [
-      /* @__PURE__ */ jsx35(Skeleton, {
+      /* @__PURE__ */ jsx37(Skeleton, {
         className: "altertable-content-skeleton-label"
       }),
-      /* @__PURE__ */ jsx35(Skeleton, {
+      /* @__PURE__ */ jsx37(Skeleton, {
         className: variant === "metric" ? "altertable-content-skeleton-value" : variant === "ranking" ? "altertable-content-skeleton-subtitle" : "altertable-content-skeleton-chart"
       }),
-      variant === "panel" && /* @__PURE__ */ jsx35(Skeleton, {
+      variant === "panel" && /* @__PURE__ */ jsx37(Skeleton, {
         className: "altertable-content-skeleton-foot"
       }),
-      variant === "ranking" && /* @__PURE__ */ jsx35("div", {
+      variant === "ranking" && /* @__PURE__ */ jsx37("div", {
         className: "altertable-content-skeleton-rows",
-        children: Array.from({ length: rows }, (_, index) => index).map((row) => /* @__PURE__ */ jsxs25("div", {
+        children: Array.from({ length: rows }, (_, index) => index).map((row) => /* @__PURE__ */ jsxs26("div", {
           className: "altertable-content-skeleton-row",
           children: [
-            /* @__PURE__ */ jsx35(Skeleton, {
+            /* @__PURE__ */ jsx37(Skeleton, {
               className: "altertable-content-skeleton-row-label"
             }),
-            /* @__PURE__ */ jsx35(Skeleton, {
+            /* @__PURE__ */ jsx37(Skeleton, {
               className: "altertable-content-skeleton-row-track"
             })
           ]
@@ -9271,7 +9541,7 @@ function ContentSkeleton({
 }
 
 // src/react/ui/DataBoundary.tsx
-import { jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
 function DataBoundary({
   view,
   loading,
@@ -9285,41 +9555,41 @@ function DataBoundary({
   ...props
 }) {
   if (view.kind === "loading" || view.kind === "empty" || view.kind === "error")
-    return /* @__PURE__ */ jsx36("div", {
+    return /* @__PURE__ */ jsx38("div", {
       ...props,
       className: classNames("altertable-data-boundary", className),
       children: view.kind === "loading" ? loading : view.kind === "empty" ? empty : error(view.error)
     });
   const updating = view.kind === "updating";
   const hasStaleError = view.kind === "stale-error";
-  return /* @__PURE__ */ jsxs26("div", {
+  return /* @__PURE__ */ jsxs27("div", {
     ...props,
     className: classNames("altertable-data-boundary", className),
     children: [
-      notice === "inline" && (updating || hasStaleError) && /* @__PURE__ */ jsxs26("div", {
+      notice === "inline" && (updating || hasStaleError) && /* @__PURE__ */ jsxs27("div", {
         className: "altertable-data-boundary-notice",
         "data-state": view.kind,
         role: hasStaleError ? "alert" : "status",
         children: [
-          updating ? /* @__PURE__ */ jsx36(AppIcon, {
+          updating ? /* @__PURE__ */ jsx38(AppIcon, {
             name: "loading",
             size: 16,
             className: "altertable-data-boundary-spinner"
-          }) : /* @__PURE__ */ jsx36(AppIcon, {
+          }) : /* @__PURE__ */ jsx38(AppIcon, {
             name: "error",
             size: 16
           }),
-          /* @__PURE__ */ jsx36("span", {
+          /* @__PURE__ */ jsx38("span", {
             className: "altertable-data-boundary-message",
             children: view.message
           }),
-          staleError && view.kind === "stale-error" && /* @__PURE__ */ jsx36("span", {
+          staleError && view.kind === "stale-error" && /* @__PURE__ */ jsx38("span", {
             className: "altertable-data-boundary-action",
             children: staleError(view.error)
           })
         ]
       }),
-      /* @__PURE__ */ jsx36("div", {
+      /* @__PURE__ */ jsx38("div", {
         className: "altertable-data-boundary-content",
         "data-updating": updating && dimOnUpdate || undefined,
         children: children(view.data, view.kind === "ready" ? view.input : view.displayedInput)
@@ -9329,7 +9599,7 @@ function DataBoundary({
 }
 
 // src/react/ui/StatusPanel.tsx
-import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
 function StatusPanel({
   status,
   title,
@@ -9341,32 +9611,32 @@ function StatusPanel({
   role,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs27("div", {
+  return /* @__PURE__ */ jsxs28("div", {
     ...props,
     className: classNames("altertable-status-panel", className),
     "data-status": status,
     role: role ?? (status === "error" ? "alert" : "status"),
     children: [
-      status === "error" && /* @__PURE__ */ jsx37(AppIcon, {
+      status === "error" && /* @__PURE__ */ jsx39(AppIcon, {
         name: "error",
         size: 18
       }),
-      /* @__PURE__ */ jsxs27("div", {
+      /* @__PURE__ */ jsxs28("div", {
         className: "altertable-status-copy",
         children: [
-          /* @__PURE__ */ jsx37("strong", {
+          /* @__PURE__ */ jsx39("strong", {
             children: title
           }),
-          description && /* @__PURE__ */ jsx37("p", {
+          description && /* @__PURE__ */ jsx39("p", {
             children: description
           }),
-          details && /* @__PURE__ */ jsx37("small", {
+          details && /* @__PURE__ */ jsx39("small", {
             children: details
           }),
           children
         ]
       }),
-      action && /* @__PURE__ */ jsx37("div", {
+      action && /* @__PURE__ */ jsx39("div", {
         className: "altertable-status-action",
         children: action
       })
@@ -9375,7 +9645,7 @@ function StatusPanel({
 }
 
 // src/react/ui/DataSection.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 function errorPresentation(cause) {
   const code = cause instanceof DataAppError2 ? cause.code : "request_failed";
   switch (code) {
@@ -9434,33 +9704,33 @@ function DataSection({
   dimOnUpdate = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsx38(DataBoundary, {
+  return /* @__PURE__ */ jsx40(DataBoundary, {
     ...props,
     view: result.view,
     role: label ? "region" : undefined,
     "aria-label": label,
     notice,
     dimOnUpdate,
-    loading: loading ?? /* @__PURE__ */ jsx38(ContentSkeleton, {
+    loading: loading ?? /* @__PURE__ */ jsx40(ContentSkeleton, {
       variant: "panel"
     }),
-    empty: /* @__PURE__ */ jsx38(EmptyState, {
+    empty: /* @__PURE__ */ jsx40(EmptyState, {
       ...empty
     }),
     error: (cause) => {
       const presentation = errorPresentation(cause);
       const retryAction = error?.onRetry ?? (presentation.retryable ? () => void result.refetch() : undefined);
-      return /* @__PURE__ */ jsx38(StatusPanel, {
+      return /* @__PURE__ */ jsx40(StatusPanel, {
         status: "error",
         title: error?.title ?? presentation.title,
         description: error?.description ?? presentation.description,
-        action: retryAction && /* @__PURE__ */ jsx38(Button, {
+        action: retryAction && /* @__PURE__ */ jsx40(Button, {
           onClick: retryAction,
           children: "Retry"
         })
       });
     },
-    staleError: () => /* @__PURE__ */ jsx38(Button, {
+    staleError: () => /* @__PURE__ */ jsx40(Button, {
       onClick: error?.onRetry ?? (() => void result.refetch()),
       children: "Retry"
     }),
@@ -9469,7 +9739,7 @@ function DataSection({
 }
 
 // src/react/ui/DataApp.tsx
-import { jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs29 } from "react/jsx-runtime";
 function DataApp(props) {
   const {
     config,
@@ -9493,12 +9763,14 @@ function DataApp(props) {
       console.warn("DataApp owns the page title. Use section headings (h2) in its body.");
   });
   const snapshot = request && displayedSnapshot(request.view);
-  const story = request && props.story && snapshot ? { findings: props.story(snapshot) } : undefined;
-  const scope = /* @__PURE__ */ jsx39(AppScope, {
+  const findings = request && snapshot ? props.story(snapshot) : undefined;
+  const story = findings?.length ? { findings } : undefined;
+  const scope = /* @__PURE__ */ jsx41(AppScope, {
     organization: scopeLabels?.organization ?? config.scope.organization,
     environment: scopeLabels?.environment ?? config.scope.environment
   });
-  const toolbar = /* @__PURE__ */ jsx39(AppToolbar, {
+  const toolbar = /* @__PURE__ */ jsx41(AppToolbar, {
+    csvExport: request ? snapshot ? props.csvExport(snapshot) : undefined : props.csvExport,
     requestState: request?.view.kind,
     refresh: refresh ?? request?.refresh,
     story: story && {
@@ -9509,7 +9781,7 @@ function DataApp(props) {
       empty: aboutEmpty,
       theme: themeController
     },
-    aboutData: /* @__PURE__ */ jsx39(AboutData, {
+    aboutData: /* @__PURE__ */ jsx41(AboutData, {
       id: "data",
       shortcut: true,
       dataContext,
@@ -9520,32 +9792,32 @@ function DataApp(props) {
     }),
     children: toolbarActions
   });
-  return /* @__PURE__ */ jsx39(InspectionContext, {
+  return /* @__PURE__ */ jsx41(InspectionContext, {
     value: {
       dataContext,
       empty: aboutEmpty,
       queries: queries ?? request?.queries
     },
-    children: /* @__PURE__ */ jsxs28(AppLayout, {
+    children: /* @__PURE__ */ jsxs29(AppLayout, {
       ...layoutProps,
       footer: isEmbedded ? null : layoutProps?.footer,
-      footerActions: footerActions ?? (themeController && /* @__PURE__ */ jsx39(ThemeToggle, {
+      footerActions: footerActions ?? (themeController && /* @__PURE__ */ jsx41(ThemeToggle, {
         theme: themeController
       })),
       children: [
-        isEmbedded ? toolbar : /* @__PURE__ */ jsx39(AppHeader, {
+        isEmbedded ? toolbar : /* @__PURE__ */ jsx41(AppHeader, {
           scope,
           title: config.title,
           description,
           toolbar
         }),
-        (request?.controls ?? props.variables) && /* @__PURE__ */ jsx39(VariableBar, {
+        (request?.controls ?? props.variables) && /* @__PURE__ */ jsx41(VariableBar, {
           children: request?.controls ?? props.variables
         }),
-        /* @__PURE__ */ jsx39("div", {
+        /* @__PURE__ */ jsx41("div", {
           ref: bodyRef,
           className: "altertable-app-body",
-          children: request ? /* @__PURE__ */ jsx39(DataSection, {
+          children: request ? /* @__PURE__ */ jsx41(DataSection, {
             result: request,
             notice: "none",
             dimOnUpdate: false,
@@ -9555,7 +9827,7 @@ function DataApp(props) {
             children: (data, displayedInput) => props.children(data, displayedInput)
           }) : props.children
         }),
-        request && /* @__PURE__ */ jsx39(DataViewToast, {
+        request && /* @__PURE__ */ jsx41(DataViewToast, {
           view: request.view,
           onRetry: () => void request.refetch()
         })
@@ -9564,7 +9836,7 @@ function DataApp(props) {
   });
 }
 // src/react/ui/GettingStarted.tsx
-import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
 var client = /* @__PURE__ */ createDataClient2();
 var { useDataQuery } = /* @__PURE__ */ createDataHooks(client);
 function GettingStarted({
@@ -9573,7 +9845,7 @@ function GettingStarted({
 }) {
   const connection = useDataQuery("connection", {});
   const state = connection.error ? "error" : connection.isFetching || !connection.data ? "checking" : "connected";
-  return /* @__PURE__ */ jsxs29(DataApp, {
+  return /* @__PURE__ */ jsxs30(DataApp, {
     config,
     dataContext,
     description: "Check your lakehouse connection, then build a view around a real question.",
@@ -9587,98 +9859,98 @@ function GettingStarted({
       buttonProps: { "aria-label": "Check connection" }
     },
     children: [
-      /* @__PURE__ */ jsxs29("section", {
+      /* @__PURE__ */ jsxs30("section", {
         className: "starter-connection",
         "data-state": state,
         role: state === "error" ? "alert" : "status",
         children: [
-          /* @__PURE__ */ jsx40("div", {
+          /* @__PURE__ */ jsx42("div", {
             className: "starter-connection-icon",
-            children: /* @__PURE__ */ jsx40(AppIcon, {
+            children: /* @__PURE__ */ jsx42(AppIcon, {
               name: state === "connected" ? "check" : state === "error" ? "error" : "loading",
               size: 24
             })
           }),
-          /* @__PURE__ */ jsxs29("div", {
+          /* @__PURE__ */ jsxs30("div", {
             className: "starter-connection-copy",
             children: [
-              /* @__PURE__ */ jsx40("span", {
+              /* @__PURE__ */ jsx42("span", {
                 className: "starter-eyebrow",
                 children: "Lakehouse connection"
               }),
-              /* @__PURE__ */ jsx40("h2", {
+              /* @__PURE__ */ jsx42("h2", {
                 children: state === "connected" ? "Connected" : state === "error" ? "Connection not verified" : "Checking connection…"
               }),
-              /* @__PURE__ */ jsx40("p", {
+              /* @__PURE__ */ jsx42("p", {
                 children: state === "connected" ? "A query completed successfully using this app’s current profile. You’re ready to build your first view." : state === "error" ? connection.data ? "An earlier query succeeded, but the latest check failed. Check the profile and try again." : "The query could not complete. Check the profile and lakehouse access, then try again." : "Running a lightweight query with this app’s current profile."
               }),
-              state === "connected" && /* @__PURE__ */ jsx40("small", {
+              state === "connected" && /* @__PURE__ */ jsx42("small", {
                 children: "This check does not verify access to every dataset."
               })
             ]
           }),
-          state === "error" && /* @__PURE__ */ jsx40(Button, {
+          state === "error" && /* @__PURE__ */ jsx42(Button, {
             onClick: () => void connection.refetch(),
             children: "Try again"
           })
         ]
       }),
-      /* @__PURE__ */ jsxs29("section", {
+      /* @__PURE__ */ jsxs30("section", {
         className: "starter-next",
         "aria-labelledby": "starter-next-title",
         children: [
-          /* @__PURE__ */ jsxs29("div", {
+          /* @__PURE__ */ jsxs30("div", {
             className: "starter-next-heading",
             children: [
-              /* @__PURE__ */ jsx40("span", {
+              /* @__PURE__ */ jsx42("span", {
                 className: "starter-eyebrow",
                 children: "Next steps"
               }),
-              /* @__PURE__ */ jsx40("h2", {
+              /* @__PURE__ */ jsx42("h2", {
                 id: "starter-next-title",
                 children: "Turn this starter into a useful app"
               }),
-              /* @__PURE__ */ jsx40("p", {
+              /* @__PURE__ */ jsx42("p", {
                 children: "Start with one question your readers need answered."
               })
             ]
           }),
-          /* @__PURE__ */ jsxs29("ol", {
+          /* @__PURE__ */ jsxs30("ol", {
             className: "starter-steps",
             children: [
-              /* @__PURE__ */ jsxs29("li", {
+              /* @__PURE__ */ jsxs30("li", {
                 children: [
-                  /* @__PURE__ */ jsx40("strong", {
+                  /* @__PURE__ */ jsx42("strong", {
                     children: "Choose a question"
                   }),
-                  /* @__PURE__ */ jsx40("p", {
+                  /* @__PURE__ */ jsx42("p", {
                     children: "Decide what someone should learn or do after opening this app."
                   })
                 ]
               }),
-              /* @__PURE__ */ jsxs29("li", {
+              /* @__PURE__ */ jsxs30("li", {
                 children: [
-                  /* @__PURE__ */ jsx40("strong", {
+                  /* @__PURE__ */ jsx42("strong", {
                     children: "Find the right data"
                   }),
-                  /* @__PURE__ */ jsx40("p", {
+                  /* @__PURE__ */ jsx42("p", {
                     children: "Inspect the relevant catalogs, tables, and columns before writing the query."
                   })
                 ]
               }),
-              /* @__PURE__ */ jsxs29("li", {
+              /* @__PURE__ */ jsxs30("li", {
                 children: [
-                  /* @__PURE__ */ jsx40("strong", {
+                  /* @__PURE__ */ jsx42("strong", {
                     children: "Build the first view"
                   }),
-                  /* @__PURE__ */ jsxs29("p", {
+                  /* @__PURE__ */ jsxs30("p", {
                     children: [
                       "Replace the connection check in ",
-                      /* @__PURE__ */ jsx40("code", {
+                      /* @__PURE__ */ jsx42("code", {
                         children: "src/operations.ts"
                       }),
                       ", then render its result in ",
-                      /* @__PURE__ */ jsx40("code", {
+                      /* @__PURE__ */ jsx42("code", {
                         children: "src/App.tsx"
                       }),
                       "."
@@ -9694,14 +9966,14 @@ function GettingStarted({
   });
 }
 // src/react/ui/Stack.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 function Stack({
   children,
   gap = "lg",
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx41("div", {
+  return /* @__PURE__ */ jsx43("div", {
     ...props,
     className: classNames("altertable-stack", className),
     "data-gap": gap,
@@ -9709,7 +9981,7 @@ function Stack({
   });
 }
 // src/react/ui/Grid.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 function Grid({
   children,
   columns = 1,
@@ -9719,7 +9991,7 @@ function Grid({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx42("div", {
+  return /* @__PURE__ */ jsx44("div", {
     ...props,
     className: classNames("altertable-grid", className),
     "data-columns": columns,
@@ -9730,14 +10002,14 @@ function Grid({
   });
 }
 // src/react/ui/GridItem.tsx
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 function GridItem({
   children,
   span = 1,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx43("div", {
+  return /* @__PURE__ */ jsx45("div", {
     ...props,
     className: classNames("altertable-grid-item", className),
     "data-span": span,
@@ -9746,24 +10018,24 @@ function GridItem({
 }
 // src/react/ui/DataWidget.tsx
 import { useId as useId8 } from "react";
-import { jsx as jsx44, jsxs as jsxs30, Fragment as Fragment8 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs31, Fragment as Fragment9 } from "react/jsx-runtime";
 function DataWidget(props) {
   if (props.reading) {
     const { reading, isEmpty, empty, skeleton, children, ...shell } = props;
     if (reading.loading)
-      return /* @__PURE__ */ jsx44(ContentSkeleton, {
+      return /* @__PURE__ */ jsx46(ContentSkeleton, {
         variant: "panel",
         ...skeleton,
         className: shell.className
       });
     const noData = isEmpty(reading.value);
-    return /* @__PURE__ */ jsx44(DataWidgetContent, {
+    return /* @__PURE__ */ jsx46(DataWidgetContent, {
       ...shell,
       empty: noData ? empty : undefined,
       children: noData ? null : children(reading.value)
     });
   }
-  return /* @__PURE__ */ jsx44(DataWidgetContent, {
+  return /* @__PURE__ */ jsx46(DataWidgetContent, {
     ...props
   });
 }
@@ -9782,16 +10054,16 @@ function DataWidgetContent({
   ...props
 }) {
   const titleId = useId8();
-  const content = empty ? /* @__PURE__ */ jsx44(EmptyState, {
+  const content = empty ? /* @__PURE__ */ jsx46(EmptyState, {
     ...empty
   }) : children;
-  const visual = /* @__PURE__ */ jsx44(WidgetContent, {
+  const visual = /* @__PURE__ */ jsx46(WidgetContent, {
     bodyPadding: empty ? "flush" : bodyPadding,
     footer: empty ? undefined : footer,
     status,
     children: content
   });
-  const help = evidence && /* @__PURE__ */ jsxs30(AboutData, {
+  const help = evidence && /* @__PURE__ */ jsxs31(AboutData, {
     id: evidence.id,
     references: {
       kind: "ids",
@@ -9804,7 +10076,7 @@ function DataWidgetContent({
     tooltip: "Explore this widget",
     shortcut: false,
     title,
-    headerActions: /* @__PURE__ */ jsx44(WidgetStatusControl, {
+    headerActions: /* @__PURE__ */ jsx46(WidgetStatusControl, {
       status
     }),
     description,
@@ -9812,41 +10084,41 @@ function DataWidgetContent({
     visualKind: "widget",
     children: [
       title,
-      /* @__PURE__ */ jsx44(AppIcon, {
+      /* @__PURE__ */ jsx46(AppIcon, {
         name: "openDetails"
       })
     ]
   });
-  return /* @__PURE__ */ jsxs30("section", {
+  return /* @__PURE__ */ jsxs31("section", {
     ...props,
     className: classNames("altertable-data-widget", className),
     "aria-labelledby": props["aria-labelledby"] ?? titleId,
     children: [
-      /* @__PURE__ */ jsxs30("header", {
+      /* @__PURE__ */ jsxs31("header", {
         className: "altertable-data-widget-header",
         children: [
-          /* @__PURE__ */ jsxs30("div", {
+          /* @__PURE__ */ jsxs31("div", {
             children: [
-              /* @__PURE__ */ jsxs30("h2", {
+              /* @__PURE__ */ jsxs31("h2", {
                 id: titleId,
                 "aria-label": typeof title === "string" ? title : undefined,
                 children: [
                   help ?? title,
-                  count !== undefined && /* @__PURE__ */ jsx44("span", {
+                  count !== undefined && /* @__PURE__ */ jsx46("span", {
                     className: "altertable-data-widget-count",
                     children: formatCount2(count)
                   })
                 ]
               }),
-              description && /* @__PURE__ */ jsx44("p", {
+              description && /* @__PURE__ */ jsx46("p", {
                 children: description
               })
             ]
           }),
-          /* @__PURE__ */ jsxs30("div", {
+          /* @__PURE__ */ jsxs31("div", {
             className: "altertable-data-widget-help",
             children: [
-              /* @__PURE__ */ jsx44(WidgetStatusControl, {
+              /* @__PURE__ */ jsx46(WidgetStatusControl, {
                 status
               }),
               action
@@ -9864,15 +10136,15 @@ function WidgetContent({
   status,
   children
 }) {
-  return /* @__PURE__ */ jsxs30(Fragment8, {
+  return /* @__PURE__ */ jsxs31(Fragment9, {
     children: [
-      /* @__PURE__ */ jsx44("div", {
+      /* @__PURE__ */ jsx46("div", {
         className: "altertable-data-widget-body",
         "data-padding": bodyPadding,
         "aria-busy": status?.kind === "updating" || undefined,
         children
       }),
-      footer && /* @__PURE__ */ jsx44("footer", {
+      footer && /* @__PURE__ */ jsx46("footer", {
         className: "altertable-data-widget-footer",
         children: footer
       })
@@ -9880,39 +10152,39 @@ function WidgetContent({
   });
 }
 // src/react/ui/TextContent.tsx
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 function TextContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx45("div", {
+  return /* @__PURE__ */ jsx47("div", {
     ...props,
     className: classNames("altertable-text-content", className)
   });
 }
 // src/react/ui/TextWidget.tsx
-import { jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
 function TextWidget(props) {
   const content = props.reading ? props.reading.loading ? null : props.children(props.reading.value) : props.children;
   const { reading, children: _, className, ...shell } = props;
   const loading = reading?.loading === true;
-  return /* @__PURE__ */ jsx46(DataWidget, {
+  return /* @__PURE__ */ jsx48(DataWidget, {
     ...shell,
     className: classNames("altertable-text-widget", className),
     evidence: loading ? undefined : shell.evidence,
     "aria-busy": loading || shell["aria-busy"],
-    children: /* @__PURE__ */ jsx46(TextContent, {
-      children: loading ? /* @__PURE__ */ jsxs31("div", {
+    children: /* @__PURE__ */ jsx48(TextContent, {
+      children: loading ? /* @__PURE__ */ jsxs32("div", {
         className: "altertable-text-widget-skeleton",
         "aria-hidden": "true",
         children: [
-          /* @__PURE__ */ jsx46(Skeleton, {}),
-          /* @__PURE__ */ jsx46(Skeleton, {}),
-          /* @__PURE__ */ jsx46(Skeleton, {})
+          /* @__PURE__ */ jsx48(Skeleton, {}),
+          /* @__PURE__ */ jsx48(Skeleton, {}),
+          /* @__PURE__ */ jsx48(Skeleton, {})
         ]
       }) : content
     })
   });
 }
 // src/react/ui/VisualizationWidget.tsx
-import { useState as useState15 } from "react";
+import { useState as useState16 } from "react";
 
 // src/react/ui/widget-views.ts
 function validateWidgetViews(views, selected) {
@@ -9922,7 +10194,7 @@ function validateWidgetViews(views, selected) {
 }
 
 // src/react/ui/WidgetViewTabs.tsx
-import { jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
 function WidgetViewTabs({
   label,
   views,
@@ -9932,24 +10204,24 @@ function WidgetViewTabs({
   ...props
 }) {
   validateWidgetViews(views, selectedKey);
-  return /* @__PURE__ */ jsx47("div", {
+  return /* @__PURE__ */ jsx49("div", {
     ...props,
     className: classNames("altertable-widget-view-tabs", className),
-    children: /* @__PURE__ */ jsxs32(Tabs, {
+    children: /* @__PURE__ */ jsxs33(Tabs, {
       selectedKey,
       onSelectionChange: (key) => onSelectionChange(String(key)),
       children: [
-        /* @__PURE__ */ jsx47(TabList, {
+        /* @__PURE__ */ jsx49(TabList, {
           "aria-label": label,
-          children: views.map((view) => /* @__PURE__ */ jsx47(Tab, {
+          children: views.map((view) => /* @__PURE__ */ jsx49(Tab, {
             id: view.id,
             children: view.label
           }, view.id))
         }),
-        /* @__PURE__ */ jsx47(TabPanels, {
-          children: views.map((view) => /* @__PURE__ */ jsx47(TabPanel, {
+        /* @__PURE__ */ jsx49(TabPanels, {
+          children: views.map((view) => /* @__PURE__ */ jsx49(TabPanel, {
             id: view.id,
-            children: view.isEmpty ? /* @__PURE__ */ jsx47(EmptyState, {
+            children: view.isEmpty ? /* @__PURE__ */ jsx49(EmptyState, {
               ...view.empty
             }) : view.content
           }, view.id))
@@ -9960,22 +10232,22 @@ function WidgetViewTabs({
 }
 
 // src/react/ui/VisualizationWidget.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 function VisualizationWidget(props) {
   if ("views" in props && props.views)
-    return /* @__PURE__ */ jsx48(VisualizationWidgetWithViews, {
+    return /* @__PURE__ */ jsx50(VisualizationWidgetWithViews, {
       ...props
     });
   if ("reading" in props) {
     const { reading, children, isEmpty, empty, skeleton, insight, ...shell } = props;
-    return /* @__PURE__ */ jsx48(DataWidget, {
+    return /* @__PURE__ */ jsx50(DataWidget, {
       ...shell,
       reading,
       isEmpty,
       empty,
       skeleton,
       footer: insight,
-      children: (data) => /* @__PURE__ */ jsx48("div", {
+      children: (data) => /* @__PURE__ */ jsx50("div", {
         className: "altertable-visualization-widget-content",
         children: children(data)
       })
@@ -9983,14 +10255,14 @@ function VisualizationWidget(props) {
   }
   const { visual, loading = false, insight, ...shell } = props;
   if (loading)
-    return /* @__PURE__ */ jsx48(ContentSkeleton, {
+    return /* @__PURE__ */ jsx50(ContentSkeleton, {
       variant: "panel",
       className: shell.className
     });
-  return /* @__PURE__ */ jsx48(DataWidget, {
+  return /* @__PURE__ */ jsx50(DataWidget, {
     ...shell,
     footer: insight,
-    children: /* @__PURE__ */ jsx48("div", {
+    children: /* @__PURE__ */ jsx50("div", {
       className: "altertable-visualization-widget-content",
       children: visual
     })
@@ -10007,18 +10279,18 @@ function VisualizationWidgetWithViews({
   insight,
   ...shell
 }) {
-  const [selected, setSelected] = useState15(initialView ?? views[0]?.id ?? "");
+  const [selected, setSelected] = useState16(initialView ?? views[0]?.id ?? "");
   validateWidgetViews(views, selected);
-  return /* @__PURE__ */ jsx48(DataWidget, {
+  return /* @__PURE__ */ jsx50(DataWidget, {
     ...shell,
     reading,
     isEmpty,
     empty,
     skeleton,
     footer: insight,
-    children: (data) => /* @__PURE__ */ jsx48("div", {
+    children: (data) => /* @__PURE__ */ jsx50("div", {
       className: "altertable-visualization-widget-content",
-      children: /* @__PURE__ */ jsx48(WidgetViewTabs, {
+      children: /* @__PURE__ */ jsx50(WidgetViewTabs, {
         label: viewLabel,
         views: views.map((view) => ({
           id: view.id,
@@ -10034,14 +10306,14 @@ function VisualizationWidgetWithViews({
   });
 }
 // src/react/ui/TableWidget.tsx
-import { useState as useState18 } from "react";
+import { useState as useState19 } from "react";
 
 // src/react/ui/DateTimeTooltip.tsx
-import { useEffect as useEffect15, useState as useState17 } from "react";
+import { useEffect as useEffect15, useState as useState18 } from "react";
 
 // src/react/ui/HelpPopover.tsx
 import {
-  useState as useState16
+  useState as useState17
 } from "react";
 import {
   autoUpdate as autoUpdate2,
@@ -10059,7 +10331,7 @@ import {
   useMergeRefs as useMergeRefs6,
   useRole
 } from "@floating-ui/react";
-import { jsx as jsx49, jsxs as jsxs33, Fragment as Fragment9 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs34, Fragment as Fragment10 } from "react/jsx-runtime";
 function HelpPopover({
   trigger,
   triggerLabel,
@@ -10074,8 +10346,8 @@ function HelpPopover({
   open: openProp,
   onOpenChange
 }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = useState16(false);
-  const [dialogRoot, setDialogRoot] = useState16(null);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState17(false);
+  const [dialogRoot, setDialogRoot] = useState17(null);
   const open = openProp ?? uncontrolledOpen;
   function setOpen(next) {
     onOpenChange?.(next);
@@ -10106,9 +10378,9 @@ function HelpPopover({
     (element) => setDialogRoot(element?.closest("dialog") ?? null)
   ]);
   const mergedPanelRef = useMergeRefs6([refs.setFloating, panelProps?.ref]);
-  return /* @__PURE__ */ jsxs33(Fragment9, {
+  return /* @__PURE__ */ jsxs34(Fragment10, {
     children: [
-      /* @__PURE__ */ jsx49("button", {
+      /* @__PURE__ */ jsx51("button", {
         ...getReferenceProps({
           ...triggerProps,
           "aria-label": triggerProps?.["aria-label"] ?? triggerLabel
@@ -10121,13 +10393,13 @@ function HelpPopover({
         "data-open": open,
         children: trigger
       }),
-      open && /* @__PURE__ */ jsx49(FloatingPortal2, {
+      open && /* @__PURE__ */ jsx51(FloatingPortal2, {
         root: portalRoot ?? dialogRoot ?? undefined,
-        children: /* @__PURE__ */ jsx49(FloatingFocusManager, {
+        children: /* @__PURE__ */ jsx51(FloatingFocusManager, {
           context,
           modal: false,
           initialFocus: -1,
-          children: /* @__PURE__ */ jsx49("section", {
+          children: /* @__PURE__ */ jsx51("section", {
             ...getFloatingProps(panelProps ?? {}),
             ref: mergedPanelRef,
             className: classNames("altertable-help-popover", panelClassName, panelProps?.className),
@@ -10142,7 +10414,7 @@ function HelpPopover({
 }
 
 // src/react/ui/DateTimeTooltip.tsx
-import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
 function formattedDate(date, timeZone) {
   return new Intl.DateTimeFormat(undefined, {
     timeZone,
@@ -10164,7 +10436,7 @@ function DateTimeTooltip({
   panelClassName,
   ...props
 }) {
-  const [now, setNow] = useState17(Date.now);
+  const [now, setNow] = useState18(Date.now);
   useEffect15(() => {
     const interval = window.setInterval(() => setNow(Date.now()), 30000);
     return () => window.clearInterval(interval);
@@ -10180,54 +10452,54 @@ function DateTimeTooltip({
     ...timeZone && timeZone !== browserTimeZone ? [{ label: `Browser · ${browserTimeZone}`, zone: browserTimeZone }] : []
   ];
   const timestamp = date.toISOString();
-  return /* @__PURE__ */ jsx50(HelpPopover, {
+  return /* @__PURE__ */ jsx52(HelpPopover, {
     ...props,
     placement: props.placement ?? "bottom",
     triggerClassName,
     panelClassName: ["altertable-date-time-tooltip", panelClassName].filter(Boolean).join(" "),
     triggerLabel: "Show exact date and time",
     label: "Date and time details",
-    trigger: children ?? /* @__PURE__ */ jsx50("time", {
+    trigger: children ?? /* @__PURE__ */ jsx52("time", {
       dateTime: timestamp,
       children: formattedDate(date, timeZone ?? browserTimeZone)
     }),
-    children: /* @__PURE__ */ jsxs34("div", {
+    children: /* @__PURE__ */ jsxs35("div", {
       className: "altertable-date-time-rows",
       children: [
-        rows.map(({ label, zone }) => /* @__PURE__ */ jsxs34("span", {
+        rows.map(({ label, zone }) => /* @__PURE__ */ jsxs35("span", {
           className: "altertable-date-time-row",
           children: [
-            /* @__PURE__ */ jsx50("span", {
+            /* @__PURE__ */ jsx52("span", {
               className: "altertable-date-time-label",
               children: label
             }),
-            /* @__PURE__ */ jsx50("time", {
+            /* @__PURE__ */ jsx52("time", {
               dateTime: timestamp,
               children: formattedDate(date, zone)
             })
           ]
         }, label)),
-        /* @__PURE__ */ jsxs34("span", {
+        /* @__PURE__ */ jsxs35("span", {
           className: "altertable-date-time-row",
           children: [
-            /* @__PURE__ */ jsx50("span", {
+            /* @__PURE__ */ jsx52("span", {
               className: "altertable-date-time-label",
               children: "Relative"
             }),
-            /* @__PURE__ */ jsx50("time", {
+            /* @__PURE__ */ jsx52("time", {
               dateTime: timestamp,
               children: relativeDate(date, now)
             })
           ]
         }),
-        /* @__PURE__ */ jsxs34("span", {
+        /* @__PURE__ */ jsxs35("span", {
           className: "altertable-date-time-row",
           children: [
-            /* @__PURE__ */ jsx50("span", {
+            /* @__PURE__ */ jsx52("span", {
               className: "altertable-date-time-label",
               children: "Timestamp"
             }),
-            /* @__PURE__ */ jsx50("time", {
+            /* @__PURE__ */ jsx52("time", {
               dateTime: timestamp,
               children: date.getTime()
             })
@@ -10239,16 +10511,16 @@ function DateTimeTooltip({
 }
 
 // src/react/ui/DataTable.tsx
-import { jsx as jsx51, jsxs as jsxs35, Fragment as Fragment10 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs36, Fragment as Fragment11 } from "react/jsx-runtime";
 function DataTable({
   className,
   ref,
   searchable,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs35(Fragment10, {
+  return /* @__PURE__ */ jsxs36(Fragment11, {
     children: [
-      searchable && (searchable.itemCount > 5 || searchable.value !== (searchable.resetValue ?? "")) && /* @__PURE__ */ jsx51(SearchField, {
+      searchable && (searchable.itemCount > 5 || searchable.value !== (searchable.resetValue ?? "")) && /* @__PURE__ */ jsx53(SearchField, {
         label: searchable.label,
         placeholder: searchable.placeholder,
         value: searchable.value,
@@ -10257,9 +10529,9 @@ function DataTable({
         size: "compact",
         className: "altertable-data-table-search"
       }),
-      /* @__PURE__ */ jsx51("div", {
+      /* @__PURE__ */ jsx53("div", {
         className: "altertable-data-table-scroll",
-        children: /* @__PURE__ */ jsx51("table", {
+        children: /* @__PURE__ */ jsx53("table", {
           ...props,
           ref,
           className: classNames("altertable-data-table", className)
@@ -10275,7 +10547,7 @@ function DataTableShare({ value }) {
     minimumFractionDigits: 1,
     maximumFractionDigits: 1
   }).format(ratio);
-  return /* @__PURE__ */ jsx51("span", {
+  return /* @__PURE__ */ jsx53("span", {
     className: "altertable-data-table-share",
     children: label
   });
@@ -10285,11 +10557,11 @@ function DataTableEmptyRow({
   title,
   description
 }) {
-  return /* @__PURE__ */ jsx51("tr", {
+  return /* @__PURE__ */ jsx53("tr", {
     className: "altertable-data-table-empty-row",
-    children: /* @__PURE__ */ jsx51("td", {
+    children: /* @__PURE__ */ jsx53("td", {
       colSpan,
-      children: /* @__PURE__ */ jsx51(EmptyState, {
+      children: /* @__PURE__ */ jsx53(EmptyState, {
         title,
         description,
         variant: "table"
@@ -10304,15 +10576,15 @@ function DataTableTimestamp({
 }) {
   const date = value instanceof Date ? value : new Date(value);
   if (Number.isNaN(date.getTime()))
-    return /* @__PURE__ */ jsx51(Fragment10, {
+    return /* @__PURE__ */ jsx53(Fragment11, {
       children: children ?? value.toString()
     });
   const timestamp = date.toISOString();
-  return /* @__PURE__ */ jsx51(DateTimeTooltip, {
+  return /* @__PURE__ */ jsx53(DateTimeTooltip, {
     date,
     timeZone,
     triggerClassName: "altertable-data-table-timestamp",
-    children: /* @__PURE__ */ jsx51("time", {
+    children: /* @__PURE__ */ jsx53("time", {
       dateTime: timestamp,
       children: children ?? timestamp
     })
@@ -10320,7 +10592,7 @@ function DataTableTimestamp({
 }
 
 // src/react/ui/TableWidget.tsx
-import { jsx as jsx52, jsxs as jsxs36, Fragment as Fragment11 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs37, Fragment as Fragment12 } from "react/jsx-runtime";
 function TableWidget(props) {
   const { pagination, limit, columns } = props;
   invariant(!pagination || Number.isSafeInteger(pagination.pageSize) && pagination.pageSize >= 1, "TableWidget pagination.pageSize must be a positive integer.");
@@ -10330,17 +10602,17 @@ function TableWidget(props) {
   if (props.reading) {
     const { reading, skeletonRows = 5, ...rest } = props;
     if (reading.loading)
-      return /* @__PURE__ */ jsx52(ContentSkeleton, {
+      return /* @__PURE__ */ jsx54(ContentSkeleton, {
         variant: "ranking",
         rows: skeletonRows,
         className: rest.className
       });
-    return /* @__PURE__ */ jsx52(TableWidgetContent, {
+    return /* @__PURE__ */ jsx54(TableWidgetContent, {
       ...rest,
       rows: reading.value
     });
   }
-  return /* @__PURE__ */ jsx52(TableWidgetContent, {
+  return /* @__PURE__ */ jsx54(TableWidgetContent, {
     ...props
   });
 }
@@ -10364,7 +10636,7 @@ function TableWidgetContent({
   invariant(keys.every((key) => typeof key === "string" ? !!key.trim() : Number.isFinite(key)) && new Set(keys.map(String)).size === keys.length, "TableWidget row keys must be nonempty and unique.");
   const rowKeys = JSON.stringify(keys);
   const pageSize = pagination === false || limit !== undefined ? null : pagination?.pageSize ?? 10;
-  const [pageState, setPageState] = useState18({
+  const [pageState, setPageState] = useState19({
     page: 0,
     rowKeys,
     searchValue: search?.value,
@@ -10390,29 +10662,29 @@ function TableWidgetContent({
     resetValue: search.resetValue,
     itemCount: rows.length
   };
-  const table = /* @__PURE__ */ jsx52(Fragment11, {
-    children: /* @__PURE__ */ jsxs36(DataTable, {
+  const table = /* @__PURE__ */ jsx54(Fragment12, {
+    children: /* @__PURE__ */ jsxs37(DataTable, {
       searchable,
       children: [
-        /* @__PURE__ */ jsx52("thead", {
-          children: /* @__PURE__ */ jsx52("tr", {
-            children: columns.map((column) => /* @__PURE__ */ jsx52("th", {
+        /* @__PURE__ */ jsx54("thead", {
+          children: /* @__PURE__ */ jsx54("tr", {
+            children: columns.map((column) => /* @__PURE__ */ jsx54("th", {
               scope: "col",
               "data-type": column.type,
               children: column.header
             }, column.id))
           })
         }),
-        /* @__PURE__ */ jsx52("tbody", {
-          children: visible.length === 0 ? /* @__PURE__ */ jsx52(DataTableEmptyRow, {
+        /* @__PURE__ */ jsx54("tbody", {
+          children: visible.length === 0 ? /* @__PURE__ */ jsx54(DataTableEmptyRow, {
             colSpan: columns.length,
             ...empty
-          }) : visible.map((hit) => /* @__PURE__ */ jsx52("tr", {
-            children: columns.map((column, index) => index === 0 ? /* @__PURE__ */ jsx52("th", {
+          }) : visible.map((hit) => /* @__PURE__ */ jsx54("tr", {
+            children: columns.map((column, index) => index === 0 ? /* @__PURE__ */ jsx54("th", {
               scope: "row",
               "data-type": column.type,
               children: column.cell(hit.item, hit)
-            }, column.id) : /* @__PURE__ */ jsx52("td", {
+            }, column.id) : /* @__PURE__ */ jsx54("td", {
               "data-type": column.type,
               children: column.cell(hit.item, hit)
             }, column.id))
@@ -10421,11 +10693,11 @@ function TableWidgetContent({
       ]
     })
   });
-  const pager = pageSize && pageCount > 1 && /* @__PURE__ */ jsxs36("nav", {
+  const pager = pageSize && pageCount > 1 && /* @__PURE__ */ jsxs37("nav", {
     className: "altertable-table-pagination",
     "aria-label": "Table pages",
     children: [
-      /* @__PURE__ */ jsxs36("span", {
+      /* @__PURE__ */ jsxs37("span", {
         className: "altertable-table-pagination-range",
         children: [
           formatCount2(start + 1),
@@ -10438,10 +10710,10 @@ function TableWidgetContent({
           pluralize2(hits.length, "result")
         ]
       }),
-      /* @__PURE__ */ jsxs36("span", {
+      /* @__PURE__ */ jsxs37("span", {
         className: "altertable-table-pagination-controls",
         children: [
-          /* @__PURE__ */ jsxs36("span", {
+          /* @__PURE__ */ jsxs37("span", {
             children: [
               "Page ",
               page + 1,
@@ -10449,9 +10721,9 @@ function TableWidgetContent({
               pageCount
             ]
           }),
-          /* @__PURE__ */ jsx52(Tooltip, {
+          /* @__PURE__ */ jsx54(Tooltip, {
             content: "Previous page",
-            children: /* @__PURE__ */ jsx52(Button, {
+            children: /* @__PURE__ */ jsx54(Button, {
               size: "icon-compact",
               "aria-label": "Previous page",
               disabled: page === 0,
@@ -10461,15 +10733,15 @@ function TableWidgetContent({
                 searchValue: search?.value,
                 pageSize
               }),
-              children: /* @__PURE__ */ jsx52(AppIcon, {
+              children: /* @__PURE__ */ jsx54(AppIcon, {
                 name: "previousMonth",
                 size: 16
               })
             })
           }),
-          /* @__PURE__ */ jsx52(Tooltip, {
+          /* @__PURE__ */ jsx54(Tooltip, {
             content: "Next page",
-            children: /* @__PURE__ */ jsx52(Button, {
+            children: /* @__PURE__ */ jsx54(Button, {
               size: "icon-compact",
               "aria-label": "Next page",
               disabled: page >= pageCount - 1,
@@ -10479,7 +10751,7 @@ function TableWidgetContent({
                 searchValue: search?.value,
                 pageSize
               }),
-              children: /* @__PURE__ */ jsx52(AppIcon, {
+              children: /* @__PURE__ */ jsx54(AppIcon, {
                 name: "nextMonth",
                 size: 16
               })
@@ -10489,20 +10761,20 @@ function TableWidgetContent({
       })
     ]
   });
-  return /* @__PURE__ */ jsx52(DataWidget, {
+  return /* @__PURE__ */ jsx54(DataWidget, {
     ...props,
     title,
     count,
     description,
     action,
     evidence,
-    footer: (pager || insight) && /* @__PURE__ */ jsxs36(Fragment11, {
+    footer: (pager || insight) && /* @__PURE__ */ jsxs37(Fragment12, {
       children: [
         pager,
         insight
       ]
     }),
-    children: /* @__PURE__ */ jsx52("div", {
+    children: /* @__PURE__ */ jsx54("div", {
       className: "altertable-table-widget-content",
       children: table
     })
@@ -10516,7 +10788,7 @@ function chartColor(id) {
   return `var(--at-chart-${(hash >>> 0) % 8 + 1}, var(--at-accent, #4779dc))`;
 }
 // src/react/ui/Breakdown.tsx
-import { jsx as jsx53, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs38 } from "react/jsx-runtime";
 function Breakdown({
   total,
   items,
@@ -10526,18 +10798,18 @@ function Breakdown({
 }) {
   invariant(Number.isFinite(total) && total >= 0 && items.every((item) => Number.isFinite(item.value) && item.value >= 0) && items.reduce((sum, item) => sum + item.value, 0) <= total, "Breakdown items must be nonnegative parts of the observed total.");
   const dominant = total > 0 && items.some((item) => item.value / total >= 0.85);
-  return /* @__PURE__ */ jsxs37("div", {
+  return /* @__PURE__ */ jsxs38("div", {
     ...props,
     className: classNames("altertable-breakdown", className),
     "data-dominant": dominant || undefined,
     children: [
-      /* @__PURE__ */ jsxs37("div", {
+      /* @__PURE__ */ jsxs38("div", {
         className: "altertable-breakdown-summary",
         children: [
-          /* @__PURE__ */ jsx53("span", {
+          /* @__PURE__ */ jsx55("span", {
             children: "Share of total"
           }),
-          /* @__PURE__ */ jsxs37("strong", {
+          /* @__PURE__ */ jsxs38("strong", {
             children: [
               formatValue(total),
               " total"
@@ -10545,42 +10817,42 @@ function Breakdown({
           })
         ]
       }),
-      /* @__PURE__ */ jsx53("div", {
+      /* @__PURE__ */ jsx55("div", {
         className: "altertable-breakdown-bar",
         "aria-hidden": "true",
-        children: items.map((item) => /* @__PURE__ */ jsx53("span", {
+        children: items.map((item) => /* @__PURE__ */ jsx55("span", {
           style: {
             width: `${total ? item.value / total * 100 : 0}%`,
             backgroundColor: chartColor(item.id)
           }
         }, item.id))
       }),
-      /* @__PURE__ */ jsx53("dl", {
+      /* @__PURE__ */ jsx55("dl", {
         className: "altertable-breakdown-list",
         children: items.map((item) => {
           const share = total ? item.value / total : 0;
           const color = {
             "--altertable-breakdown-color": chartColor(item.id)
           };
-          return /* @__PURE__ */ jsxs37("div", {
+          return /* @__PURE__ */ jsxs38("div", {
             className: "altertable-breakdown-row",
             "data-empty": item.value === 0 || undefined,
             style: color,
             children: [
-              /* @__PURE__ */ jsxs37("dt", {
+              /* @__PURE__ */ jsxs38("dt", {
                 children: [
-                  /* @__PURE__ */ jsx53("span", {
+                  /* @__PURE__ */ jsx55("span", {
                     className: "altertable-breakdown-swatch",
                     "aria-hidden": "true"
                   }),
                   item.label
                 ]
               }),
-              /* @__PURE__ */ jsx53("dd", {
+              /* @__PURE__ */ jsx55("dd", {
                 className: "altertable-breakdown-value",
                 children: formatValue(item.value)
               }),
-              /* @__PURE__ */ jsx53("dd", {
+              /* @__PURE__ */ jsx55("dd", {
                 className: "altertable-breakdown-share",
                 children: formatPercent2(share)
               })
@@ -10592,7 +10864,7 @@ function Breakdown({
   });
 }
 // src/react/ui/Ranking.tsx
-import { jsx as jsx54, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs39 } from "react/jsx-runtime";
 function Ranking({
   items,
   formatValue = formatCount2,
@@ -10601,30 +10873,30 @@ function Ranking({
 }) {
   invariant(items.every((item) => Number.isFinite(item.value) && item.value >= 0), "Ranking values must be finite and nonnegative.");
   const max = Math.max(0, ...items.map((item) => item.value));
-  return /* @__PURE__ */ jsx54("ol", {
+  return /* @__PURE__ */ jsx56("ol", {
     ...props,
     className: classNames("altertable-ranking", className),
-    children: items.map((item) => /* @__PURE__ */ jsxs38("li", {
+    children: items.map((item) => /* @__PURE__ */ jsxs39("li", {
       children: [
-        /* @__PURE__ */ jsxs38("div", {
+        /* @__PURE__ */ jsxs39("div", {
           className: "altertable-ranking-reading",
           children: [
-            /* @__PURE__ */ jsx54("span", {
+            /* @__PURE__ */ jsx56("span", {
               children: item.label
             }),
-            /* @__PURE__ */ jsx54("strong", {
+            /* @__PURE__ */ jsx56("strong", {
               children: formatValue(item.value)
             })
           ]
         }),
-        /* @__PURE__ */ jsx54("div", {
+        /* @__PURE__ */ jsx56("div", {
           className: "altertable-ranking-track",
           "aria-hidden": "true",
-          children: /* @__PURE__ */ jsx54("span", {
+          children: /* @__PURE__ */ jsx56("span", {
             style: { width: `${max ? item.value / max * 100 : 0}%` }
           })
         }),
-        item.detail != null && /* @__PURE__ */ jsx54("div", {
+        item.detail != null && /* @__PURE__ */ jsx56("div", {
           className: "altertable-ranking-detail",
           children: item.detail
         })
@@ -10633,27 +10905,27 @@ function Ranking({
   });
 }
 // src/react/ui/WidgetDisclosure.tsx
-import { jsx as jsx55, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs40 } from "react/jsx-runtime";
 function WidgetDisclosure({
   label,
   children,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs39("details", {
+  return /* @__PURE__ */ jsxs40("details", {
     ...props,
     className: classNames("altertable-widget-disclosure", className),
     children: [
-      /* @__PURE__ */ jsxs39("summary", {
+      /* @__PURE__ */ jsxs40("summary", {
         children: [
           label,
-          /* @__PURE__ */ jsx55(AppIcon, {
+          /* @__PURE__ */ jsx57(AppIcon, {
             name: "disclosure",
             size: 16
           })
         ]
       }),
-      /* @__PURE__ */ jsx55("div", {
+      /* @__PURE__ */ jsx57("div", {
         className: "altertable-widget-disclosure-content",
         children
       })
@@ -10703,23 +10975,23 @@ function metricComparison(metric, reading) {
 }
 
 // src/react/ui/ComparisonVisual.tsx
-import { jsx as jsx56, jsxs as jsxs40, Fragment as Fragment12 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs41, Fragment as Fragment13 } from "react/jsx-runtime";
 function ComparisonVisual(props) {
   if ("metric" in props) {
     if (props.reading.loading)
-      return /* @__PURE__ */ jsx56(ContentSkeleton, {
+      return /* @__PURE__ */ jsx58(ContentSkeleton, {
         variant: "panel"
       });
     const comparison = metricComparison(props.metric, props.reading);
     if (!comparison)
       return null;
-    return /* @__PURE__ */ jsx56(ComparisonContent, {
+    return /* @__PURE__ */ jsx58(ComparisonContent, {
       ...comparison,
       label: props.metric.label,
       emphasis: props.emphasis
     });
   }
-  return /* @__PURE__ */ jsx56(ComparisonContent, {
+  return /* @__PURE__ */ jsx58(ComparisonContent, {
     ...props
   });
 }
@@ -10736,64 +11008,64 @@ function ComparisonContent({
     previous,
     favorableDirection
   });
-  return /* @__PURE__ */ jsxs40("figure", {
+  return /* @__PURE__ */ jsxs41("figure", {
     className: "altertable-comparison-visual",
     "data-emphasis": emphasis,
     "aria-label": `${label} comparison`,
     children: [
-      /* @__PURE__ */ jsx56("figcaption", {
+      /* @__PURE__ */ jsx58("figcaption", {
         children: label
       }),
-      /* @__PURE__ */ jsxs40("div", {
+      /* @__PURE__ */ jsxs41("div", {
         className: "altertable-comparison-row",
         "data-period": "current",
         children: [
-          /* @__PURE__ */ jsxs40("div", {
+          /* @__PURE__ */ jsxs41("div", {
             children: [
-              /* @__PURE__ */ jsx56("span", {
+              /* @__PURE__ */ jsx58("span", {
                 children: current.periodLabel ?? "Current period"
               }),
-              /* @__PURE__ */ jsx56("strong", {
+              /* @__PURE__ */ jsx58("strong", {
                 children: current.formattedValue
               })
             ]
           }),
-          /* @__PURE__ */ jsx56("span", {
+          /* @__PURE__ */ jsx58("span", {
             className: "altertable-comparison-track",
-            children: /* @__PURE__ */ jsx56("span", {
+            children: /* @__PURE__ */ jsx58("span", {
               style: { width: `${current.value / max * 100}%` }
             })
           })
         ]
       }),
-      previous && /* @__PURE__ */ jsxs40("div", {
+      previous && /* @__PURE__ */ jsxs41("div", {
         className: "altertable-comparison-row",
         "data-period": "previous",
         children: [
-          /* @__PURE__ */ jsxs40("div", {
+          /* @__PURE__ */ jsxs41("div", {
             children: [
-              /* @__PURE__ */ jsx56("span", {
+              /* @__PURE__ */ jsx58("span", {
                 children: previous.periodLabel ?? "Previous period"
               }),
-              /* @__PURE__ */ jsx56("strong", {
+              /* @__PURE__ */ jsx58("strong", {
                 children: previous.formattedValue
               })
             ]
           }),
-          /* @__PURE__ */ jsx56("span", {
+          /* @__PURE__ */ jsx58("span", {
             className: "altertable-comparison-track",
-            children: /* @__PURE__ */ jsx56("span", {
+            children: /* @__PURE__ */ jsx58("span", {
               style: { width: `${(previous.value ?? 0) / max * 100}%` }
             })
           })
         ]
       }),
-      /* @__PURE__ */ jsx56("p", {
+      /* @__PURE__ */ jsx58("p", {
         className: "altertable-comparison-change",
         "data-tone": tone,
-        children: percent === null ? "No comparable previous value" : /* @__PURE__ */ jsxs40(Fragment12, {
+        children: percent === null ? "No comparable previous value" : /* @__PURE__ */ jsxs41(Fragment13, {
           children: [
-            /* @__PURE__ */ jsx56(AppIcon, {
+            /* @__PURE__ */ jsx58(AppIcon, {
               name: icon,
               size: 17
             }),
@@ -10808,17 +11080,17 @@ function ComparisonContent({
   });
 }
 // src/react/ui/MetricWidget.tsx
-import { jsx as jsx57, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs42 } from "react/jsx-runtime";
 function MetricWidget(props) {
   if ("metric" in props) {
     const { metric, reading, ...rest } = props;
     if (reading.loading)
-      return /* @__PURE__ */ jsx57(MetricWidgetContent, {
+      return /* @__PURE__ */ jsx59(MetricWidgetContent, {
         ...rest,
         label: metric.label,
         loading: true
       });
-    return /* @__PURE__ */ jsx57(MetricWidgetContent, {
+    return /* @__PURE__ */ jsx59(MetricWidgetContent, {
       ...rest,
       label: metric.label,
       value: reading.value.current,
@@ -10827,7 +11099,7 @@ function MetricWidget(props) {
       comparison: metricComparison(metric, reading)
     });
   }
-  return /* @__PURE__ */ jsx57(MetricWidgetContent, {
+  return /* @__PURE__ */ jsx59(MetricWidgetContent, {
     ...props
   });
 }
@@ -10848,17 +11120,17 @@ function MetricWidgetContent({
   ...props
 }) {
   if (loading)
-    return /* @__PURE__ */ jsx57(ContentSkeleton, {
+    return /* @__PURE__ */ jsx59(ContentSkeleton, {
       variant: "metric",
       className
     });
   const shownValue = format ? formatMetric2(value, format) : content;
   const change = comparison ? comparisonChange(comparison) : null;
-  const shownTrend = change?.percent != null ? /* @__PURE__ */ jsxs41("span", {
+  const shownTrend = change?.percent != null ? /* @__PURE__ */ jsxs42("span", {
     className: "altertable-metric-change",
     "data-tone": change.tone,
     children: [
-      /* @__PURE__ */ jsx57(AppIcon, {
+      /* @__PURE__ */ jsx59(AppIcon, {
         name: change.icon,
         size: 14
       }),
@@ -10867,33 +11139,33 @@ function MetricWidgetContent({
       " ",
       comparison?.previous?.periodLabel?.toLowerCase() ?? "previous period"
     ]
-  }) : comparison?.previous?.value === null ? /* @__PURE__ */ jsx57("span", {
+  }) : comparison?.previous?.value === null ? /* @__PURE__ */ jsx59("span", {
     className: "altertable-metric-change",
     "data-tone": "neutral",
     children: "Previous period unavailable"
   }) : null;
-  const reading = /* @__PURE__ */ jsxs41("div", {
+  const reading = /* @__PURE__ */ jsxs42("div", {
     className: "altertable-metric-reading",
     children: [
-      /* @__PURE__ */ jsx57("strong", {
+      /* @__PURE__ */ jsx59("strong", {
         className: "altertable-metric-value",
         "data-unavailable": shownValue === "—" || undefined,
         children: shownValue
       }),
-      shownTrend && /* @__PURE__ */ jsx57("span", {
+      shownTrend && /* @__PURE__ */ jsx59("span", {
         className: "altertable-metric-trend",
         children: shownTrend
       })
     ]
   });
-  const visualization = visual && /* @__PURE__ */ jsx57("div", {
+  const visualization = visual && /* @__PURE__ */ jsx59("div", {
     className: "altertable-metric-visual",
     children: visual
   });
-  const feedback = /* @__PURE__ */ jsx57(WidgetStatusControl, {
+  const feedback = /* @__PURE__ */ jsx59(WidgetStatusControl, {
     status
   });
-  const help = evidence ? /* @__PURE__ */ jsxs41(AboutData, {
+  const help = evidence ? /* @__PURE__ */ jsxs42(AboutData, {
     "aria-label": `Explore ${label}`,
     variant: "ghost",
     className: "altertable-widget-heading-trigger",
@@ -10908,7 +11180,7 @@ function MetricWidgetContent({
     title: label,
     headerActions: feedback,
     description,
-    visual: /* @__PURE__ */ jsxs41("div", {
+    visual: /* @__PURE__ */ jsxs42("div", {
       className: "altertable-metric-evidence",
       children: [
         reading,
@@ -10918,22 +11190,22 @@ function MetricWidgetContent({
     visualKind: "metric",
     children: [
       label,
-      /* @__PURE__ */ jsx57(AppIcon, {
+      /* @__PURE__ */ jsx59(AppIcon, {
         name: "openDetails"
       })
     ]
   }) : null;
-  return /* @__PURE__ */ jsxs41("div", {
+  return /* @__PURE__ */ jsxs42("div", {
     ...props,
     className: classNames("altertable-metric-widget", className),
     children: [
-      /* @__PURE__ */ jsxs41("div", {
+      /* @__PURE__ */ jsxs42("div", {
         className: "altertable-metric-label",
         children: [
-          /* @__PURE__ */ jsx57("span", {
+          /* @__PURE__ */ jsx59("span", {
             children: help ?? label
           }),
-          /* @__PURE__ */ jsxs41("div", {
+          /* @__PURE__ */ jsxs42("div", {
             className: "altertable-metric-help",
             children: [
               feedback,
@@ -10943,12 +11215,12 @@ function MetricWidgetContent({
         ]
       }),
       reading,
-      description && /* @__PURE__ */ jsx57("small", {
+      description && /* @__PURE__ */ jsx59("small", {
         className: "altertable-metric-description",
         children: description
       }),
       visualization,
-      insight && /* @__PURE__ */ jsx57("div", {
+      insight && /* @__PURE__ */ jsx59("div", {
         className: "altertable-metric-insight",
         children: insight
       })
@@ -10956,8 +11228,8 @@ function MetricWidgetContent({
   });
 }
 // src/react/ui/SelectableBarChart.tsx
-import { useLayoutEffect as useLayoutEffect2, useRef as useRef7, useState as useState19 } from "react";
-import { jsx as jsx58, jsxs as jsxs42 } from "react/jsx-runtime";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef7, useState as useState20 } from "react";
+import { jsx as jsx60, jsxs as jsxs43 } from "react/jsx-runtime";
 function SelectableBarChart({
   items,
   selectedId,
@@ -10966,7 +11238,7 @@ function SelectableBarChart({
   ariaLabel,
   formatValue = (value) => new Intl.NumberFormat().format(value)
 }) {
-  const [previewId, setPreviewId] = useState19(null);
+  const [previewId, setPreviewId] = useState20(null);
   const scrollport = useRef7(null);
   const buttons = useRef7([]);
   useLayoutEffect2(() => {
@@ -10988,20 +11260,20 @@ function SelectableBarChart({
     const next = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : Math.max(0, Math.min(items.length - 1, index + (event.key === "ArrowRight" ? 1 : -1)));
     buttons.current[next]?.focus();
   }
-  return /* @__PURE__ */ jsxs42("div", {
+  return /* @__PURE__ */ jsxs43("div", {
     className: "altertable-selectable-bars",
     children: [
-      /* @__PURE__ */ jsxs42("div", {
+      /* @__PURE__ */ jsxs43("div", {
         className: "altertable-selectable-bars-preview",
         "aria-live": "polite",
         children: [
-          preview ? /* @__PURE__ */ jsxs42("span", {
+          preview ? /* @__PURE__ */ jsxs43("span", {
             children: [
-              /* @__PURE__ */ jsx58("small", {
+              /* @__PURE__ */ jsx60("small", {
                 children: previewId && previewId !== selectedId ? "Preview" : selected ? "Selected" : "Latest"
               }),
               " ",
-              /* @__PURE__ */ jsx58("strong", {
+              /* @__PURE__ */ jsx60("strong", {
                 children: preview.label
               }),
               " · ",
@@ -11009,21 +11281,21 @@ function SelectableBarChart({
               " ",
               unit
             ]
-          }) : /* @__PURE__ */ jsx58("span", {
+          }) : /* @__PURE__ */ jsx60("span", {
             children: "No data"
           }),
-          selected && /* @__PURE__ */ jsx58("button", {
+          selected && /* @__PURE__ */ jsx60("button", {
             type: "button",
             onClick: () => onSelectionChange(null),
             children: "Clear selection"
           })
         ]
       }),
-      /* @__PURE__ */ jsx58("div", {
+      /* @__PURE__ */ jsx60("div", {
         className: "altertable-selectable-bars-scroll",
         ref: scrollport,
         "aria-label": ariaLabel,
-        children: items.map((item, index) => /* @__PURE__ */ jsxs42("button", {
+        children: items.map((item, index) => /* @__PURE__ */ jsxs43("button", {
           ref: (node) => {
             buttons.current[index] = node;
           },
@@ -11038,23 +11310,23 @@ function SelectableBarChart({
           onBlur: () => setPreviewId(null),
           onKeyDown: (event) => onKeyDown(event, index),
           children: [
-            /* @__PURE__ */ jsx58("span", {
+            /* @__PURE__ */ jsx60("span", {
               className: "altertable-selectable-bars-area",
-              children: /* @__PURE__ */ jsx58("span", {
+              children: /* @__PURE__ */ jsx60("span", {
                 className: "altertable-selectable-bars-bar",
                 style: {
                   height: `${Math.max(item.value > 0 ? 3 : 0, item.value / maximum * 100)}%`
                 }
               })
             }),
-            /* @__PURE__ */ jsx58("span", {
+            /* @__PURE__ */ jsx60("span", {
               className: "altertable-selectable-bars-label",
               children: item.label
             })
           ]
         }, item.id))
       }),
-      items.length > 0 && /* @__PURE__ */ jsx58("p", {
+      items.length > 0 && /* @__PURE__ */ jsx60("p", {
         className: "altertable-selectable-bars-help",
         children: "Select a bar to inspect its day. Use arrow keys to move; press Escape to clear."
       })
@@ -11062,7 +11334,7 @@ function SelectableBarChart({
   });
 }
 // src/react/ui/DataAppSkeleton.tsx
-import { jsx as jsx59, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs44 } from "react/jsx-runtime";
 var chartHeights = [40, 60, 50, 80, 60, 100, 80, 60];
 function DataAppSkeleton({
   header,
@@ -11070,60 +11342,60 @@ function DataAppSkeleton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx59("output", {
+  return /* @__PURE__ */ jsx61("output", {
     "aria-label": "Loading data app",
     ...props,
     "aria-busy": "true",
     className: classNames("altertable-data-app-skeleton", className),
-    children: /* @__PURE__ */ jsxs43("div", {
+    children: /* @__PURE__ */ jsxs44("div", {
       className: "altertable-data-app-skeleton-content",
       children: [
-        header != null && header !== false && /* @__PURE__ */ jsx59("div", {
+        header != null && header !== false && /* @__PURE__ */ jsx61("div", {
           className: "altertable-data-app-skeleton-header",
           children: header
         }),
-        /* @__PURE__ */ jsxs43("div", {
+        /* @__PURE__ */ jsxs44("div", {
           className: "altertable-data-app-skeleton-body",
           "aria-hidden": "true",
           children: [
-            /* @__PURE__ */ jsx59(Grid, {
+            /* @__PURE__ */ jsx61(Grid, {
               columns: 3,
               gap: "md",
-              children: [0, 1, 2].map((item) => /* @__PURE__ */ jsx59(MetricWidget, {
+              children: [0, 1, 2].map((item) => /* @__PURE__ */ jsx61(MetricWidget, {
                 label: "",
                 loading: true
               }, item))
             }),
-            /* @__PURE__ */ jsx59(VisualizationWidget, {
-              title: /* @__PURE__ */ jsx59(Skeleton, {
+            /* @__PURE__ */ jsx61(VisualizationWidget, {
+              title: /* @__PURE__ */ jsx61(Skeleton, {
                 className: "altertable-data-app-skeleton-widget-title"
               }),
-              visual: /* @__PURE__ */ jsx59("div", {
+              visual: /* @__PURE__ */ jsx61("div", {
                 className: "altertable-data-app-skeleton-chart",
-                children: chartHeights.map((height, index) => /* @__PURE__ */ jsx59(Skeleton, {
+                children: chartHeights.map((height, index) => /* @__PURE__ */ jsx61(Skeleton, {
                   style: { height: `${height}%` }
                 }, index))
               })
             }),
-            /* @__PURE__ */ jsx59(DataWidget, {
-              title: /* @__PURE__ */ jsx59(Skeleton, {
+            /* @__PURE__ */ jsx61(DataWidget, {
+              title: /* @__PURE__ */ jsx61(Skeleton, {
                 className: "altertable-data-app-skeleton-widget-title"
               }),
-              children: /* @__PURE__ */ jsx59("div", {
+              children: /* @__PURE__ */ jsx61("div", {
                 className: "altertable-data-app-skeleton-rows",
-                children: [0, 1, 2].map((row) => /* @__PURE__ */ jsxs43("div", {
+                children: [0, 1, 2].map((row) => /* @__PURE__ */ jsxs44("div", {
                   className: "altertable-data-app-skeleton-row",
                   children: [
-                    /* @__PURE__ */ jsx59(Skeleton, {}),
-                    /* @__PURE__ */ jsx59(Skeleton, {}),
-                    /* @__PURE__ */ jsx59(Skeleton, {})
+                    /* @__PURE__ */ jsx61(Skeleton, {}),
+                    /* @__PURE__ */ jsx61(Skeleton, {}),
+                    /* @__PURE__ */ jsx61(Skeleton, {})
                   ]
                 }, row))
               })
             })
           ]
         }),
-        footer != null && footer !== false && /* @__PURE__ */ jsx59("div", {
+        footer != null && footer !== false && /* @__PURE__ */ jsx61("div", {
           className: "altertable-data-app-skeleton-footer",
           children: footer
         })
@@ -11132,7 +11404,7 @@ function DataAppSkeleton({
   });
 }
 // src/react/ui/RefreshRegion.tsx
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx62 } from "react/jsx-runtime";
 function RefreshRegion({
   refreshing,
   dimOnUpdate = false,
@@ -11141,10 +11413,10 @@ function RefreshRegion({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx60("div", {
+  return /* @__PURE__ */ jsx62("div", {
     ...props,
     className: classNames("altertable-refresh-region", className),
-    children: /* @__PURE__ */ jsx60("div", {
+    children: /* @__PURE__ */ jsx62("div", {
       ...contentProps,
       className: classNames("altertable-refresh-content", contentProps?.className),
       "data-refreshing": refreshing && dimOnUpdate,
@@ -11154,8 +11426,8 @@ function RefreshRegion({
   });
 }
 // src/react/ui/UpdatedAt.tsx
-import { useEffect as useEffect16, useState as useState20 } from "react";
-import { jsx as jsx61, jsxs as jsxs44 } from "react/jsx-runtime";
+import { useEffect as useEffect16, useState as useState21 } from "react";
+import { jsx as jsx63, jsxs as jsxs45 } from "react/jsx-runtime";
 function UpdatedAt({
   timestamp,
   locale,
@@ -11164,7 +11436,7 @@ function UpdatedAt({
   triggerClassName,
   ...props
 }) {
-  const [now, setNow] = useState20(Date.now);
+  const [now, setNow] = useState21(Date.now);
   useEffect16(() => {
     const interval = window.setInterval(() => setNow(Date.now()), 30000);
     return () => window.clearInterval(interval);
@@ -11179,11 +11451,11 @@ function UpdatedAt({
   else if (elapsedMinutes >= 1)
     age = relative.format(-elapsedMinutes, "minute");
   const date = new Date(timestamp);
-  return /* @__PURE__ */ jsx61(DateTimeTooltip, {
+  return /* @__PURE__ */ jsx63(DateTimeTooltip, {
     ...props,
     date,
     triggerClassName: ["altertable-updated-at", triggerClassName].filter(Boolean).join(" "),
-    children: children ?? /* @__PURE__ */ jsxs44("time", {
+    children: children ?? /* @__PURE__ */ jsxs45("time", {
       dateTime: date.toISOString(),
       children: [
         label,
@@ -11266,7 +11538,7 @@ function createDataContext(queryNames) {
   return bindDataContext;
 }
 // src/react/ui/data-identifiers.tsx
-import { jsx as jsx62, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs46 } from "react/jsx-runtime";
 function qualifiedName(definition) {
   const table = definition.kind === "table" ? definition : definition.table;
   const path = [table.catalog, table.schema, table.name].join(".");
@@ -11302,23 +11574,23 @@ function defineDataIdentifiers({ tables, columns }) {
     const shown = display ?? (definition.kind === "table" ? "qualified" : "short");
     const table = definition.kind === "table" ? definition : definition.table;
     const prefix = definition.kind === "table" ? [table.catalog, table.schema] : [table.catalog, table.schema, table.name];
-    return /* @__PURE__ */ jsxs45("code", {
+    return /* @__PURE__ */ jsxs46("code", {
       className: "altertable-data-identifier",
       "data-kind": definition.kind,
       title: qualified,
       "data-identifier-id": id,
       children: [
-        shown === "qualified" && /* @__PURE__ */ jsx62("span", {
+        shown === "qualified" && /* @__PURE__ */ jsx64("span", {
           className: "altertable-data-identifier-path",
-          children: prefix.map((segment, index) => /* @__PURE__ */ jsxs45("span", {
+          children: prefix.map((segment, index) => /* @__PURE__ */ jsxs46("span", {
             children: [
               segment,
               ".",
-              /* @__PURE__ */ jsx62("wbr", {})
+              /* @__PURE__ */ jsx64("wbr", {})
             ]
           }, index))
         }),
-        /* @__PURE__ */ jsx62("span", {
+        /* @__PURE__ */ jsx64("span", {
           className: "altertable-data-identifier-name",
           children: definition.name
         })
@@ -11331,7 +11603,7 @@ function defineDataIdentifiers({ tables, columns }) {
   };
 }
 // src/react/ui/GlossaryExplanation.tsx
-import { jsx as jsx63 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 function GlossaryExplanation({
   entry,
   empty,
@@ -11343,7 +11615,7 @@ function GlossaryExplanation({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx63(AboutData, {
+  return /* @__PURE__ */ jsx65(AboutData, {
     ...props,
     shortcut: false,
     iconOnly: true,
@@ -11358,28 +11630,28 @@ function GlossaryExplanation({
     className: className ?? "altertable-inspect-trigger",
     tooltip: "Explore this term",
     "aria-label": props["aria-label"] ?? `Explore ${entry.term}`,
-    children: /* @__PURE__ */ jsx63(AppIcon, {
+    children: /* @__PURE__ */ jsx65(AppIcon, {
       name: "openDetails"
     })
   });
 }
 // src/react/ui/GlossaryDefinition.tsx
-import { jsx as jsx64, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs47 } from "react/jsx-runtime";
 function GlossaryDefinition({
   entry,
   children
 }) {
-  return /* @__PURE__ */ jsxs46(HelpPopover, {
+  return /* @__PURE__ */ jsxs47(HelpPopover, {
     trigger: children ?? entry.term,
     triggerLabel: `Explain ${entry.term}`,
     label: entry.term,
     triggerClassName: "altertable-glossary-definition-trigger",
     panelClassName: "altertable-glossary-definition-popover",
     children: [
-      /* @__PURE__ */ jsx64("strong", {
+      /* @__PURE__ */ jsx66("strong", {
         children: entry.term
       }),
-      /* @__PURE__ */ jsx64("div", {
+      /* @__PURE__ */ jsx66("div", {
         children: entry.definition
       })
     ]
@@ -11479,4 +11751,4 @@ export {
   writeSearch
 };
 
-//# debugId=087F64F77A0D4F5564756E2164756E21
+//# debugId=A6B15262EAC6BE2D64756E2164756E21