@altertable/data-app 0.59.1 → 0.62.0

package/dist/react/index.js

@@ -1,11 +1,13 @@
-import"../chunks/contract-jksbmt5q.js";
+import"../chunks/contract-3bnrf5pf.js";
 import {
-  DataAppError2
-} from "../chunks/contract-mb5nfzwg.js";
+  DataAppError2,
+  localFrameBridge,
+  getDataAppTransport2
+} from "../chunks/contract-xjv197ck.js";
 import {
   getDataAppNavigation2,
   createDataClient2
-} from "../chunks/contract-tkkc28tg.js";
+} from "../chunks/contract-4vrw9zk9.js";
 import {
   dataAppTitle2
 } from "../chunks/contract-wz59z8pq.js";
@@ -17,8 +19,10 @@ import {
   formatPercent2
 } from "../chunks/contract-mev09s5v.js";
 import {
+  parseAppearance2,
+  applyAppearance2,
   createThemeController2
-} from "../chunks/contract-14vxdcrs.js";
+} from "../chunks/contract-farfe948.js";
 import {
   dimensionMemberKey,
   dimensionFilter2,
@@ -756,6 +760,7 @@ function SearchInput({
   endAction,
   loading = false,
   className,
+  onKeyDown,
   ...props
 }) {
   return /* @__PURE__ */ jsxs2("div", {
@@ -769,6 +774,15 @@ function SearchInput({
       }),
       /* @__PURE__ */ jsx3("input", {
         ...props,
+        onKeyDown: (event) => {
+          onKeyDown?.(event);
+          if (!event.defaultPrevented && event.key === "Escape" && !event.currentTarget.value) {
+            event.preventDefault();
+            event.stopPropagation();
+            event.currentTarget.blur();
+            event.currentTarget.closest('[role="dialog"]')?.focus();
+          }
+        },
         type: "search",
         className: classNames("altertable-search-input", className)
       }),
@@ -1190,15 +1204,20 @@ function RequestHint({
     "aria-atomic": "true",
     children: active && /* @__PURE__ */ jsxs5(Fragment3, {
       children: [
-        /* @__PURE__ */ jsx8(AppIcon, {
-          name: status.kind === "error" ? "error" : "loading",
-          size: 14,
-          className: status.kind === "updating" ? "altertable-request-hint-spinner" : undefined
-        }),
-        /* @__PURE__ */ jsx8("span", {
-          className: "altertable-request-hint-message",
-          title: message,
-          children: message
+        /* @__PURE__ */ jsxs5("span", {
+          className: "altertable-request-hint-copy",
+          children: [
+            /* @__PURE__ */ jsx8(AppIcon, {
+              name: status.kind === "error" ? "error" : "loading",
+              size: 14,
+              className: status.kind === "updating" ? "altertable-request-hint-spinner" : undefined
+            }),
+            /* @__PURE__ */ jsx8("span", {
+              className: "altertable-request-hint-message",
+              title: message,
+              children: message
+            })
+          ]
         }),
         status.kind === "error" && status.onRetry && /* @__PURE__ */ jsx8(Button, {
           variant: "ghost",
@@ -2100,7 +2119,7 @@ function DimensionPicker({
 
 // src/react/view-controls.tsx
 import { jsx as jsx16 } from "react/jsx-runtime";
-function useViewVariables(definitions, loadFacet) {
+function useViewVariables(definitions, clientScope, loadFacet) {
   const variables = useAppVariables(definitions);
   const resolved = {};
   for (const name of Object.keys(definitions)) {
@@ -2114,7 +2133,13 @@ function useViewVariables(definitions, loadFacet) {
       const facet = filter.facet;
       const input = facet.input({ ...resolved, [name]: { kind: "all" } });
       return {
-        queryKey: ["dimension-facet", name, facet.operation, input],
+        queryKey: [
+          "dimension-facet",
+          clientScope,
+          name,
+          facet.operation,
+          input
+        ],
         queryFn({ signal }) {
           return loadFacet(facet.operation, input, signal).then((result) => parseFacetOptions2(result, filter));
         },
@@ -2173,17 +2198,27 @@ function useViewVariables(definitions, loadFacet) {
 }
 
 // src/react/hooks.ts
+var clientScopes = new WeakMap;
+function getClientScope(client) {
+  let scope = clientScopes.get(client);
+  if (!scope) {
+    scope = crypto.randomUUID();
+    clientScopes.set(client, scope);
+  }
+  return scope;
+}
 function createDataHooks(client) {
+  const clientScope = getClientScope(client);
   function useDataQuery(name, input, options) {
     const queryClient = useQueryClient();
-    const queryKey = ["data-operation", name, input];
+    const queryKey = ["data-operation", clientScope, name, input];
     const query = useQuery({
       queryKey,
       queryFn({ signal }) {
         return client.query(name, input, { signal });
       },
       placeholderData(previousData, previousQuery) {
-        return previousQuery?.queryKey[1] === name ? previousData : undefined;
+        return previousQuery?.queryKey[1] === clientScope && previousQuery.queryKey[2] === name ? previousData : undefined;
       },
       enabled: options?.enabled,
       ...options?.staleTime !== undefined && { staleTime: options.staleTime },
@@ -2202,11 +2237,11 @@ function createDataHooks(client) {
   function useDataView(name, input, options) {
     const query = useDataQuery(name, input, options);
     const [last, setLast] = useState6();
-    if (query.isSuccess && !query.isPlaceholderData && query.data && (last?.name !== name || last.response !== query.data)) {
-      setLast({ name, response: query.data });
+    if (query.isSuccess && !query.isPlaceholderData && query.data && (last?.clientScope !== clientScope || last.name !== name || last.response !== query.data)) {
+      setLast({ clientScope, name, response: query.data });
     }
     const sameInput = options.sameInput ?? ((left, right) => hashKey([left]) === hashKey([right]));
-    const response = query.data ?? (last?.name === name ? last.response : undefined);
+    const response = query.data ?? (last?.clientScope === clientScope && last.name === name ? last.response : undefined);
     const snapshot = response && { data: response.data, input: response.input };
     const view = resolveDataView({
       requestedInput: input,
@@ -2272,7 +2307,7 @@ function createDataHooks(client) {
     return dimensionFilter2(config);
   }
   function useView(definition) {
-    const variables = useViewVariables(definition.variables, (operation, input, signal) => client.query(operation, input, {
+    const variables = useViewVariables(definition.variables, clientScope, (operation, input, signal) => client.query(operation, input, {
       signal
     }).then((response) => response.data));
     const request = useDataView(definition.operation, resolveViewInput(definition, variables.resolved), {
@@ -2300,18 +2335,66 @@ function createDataHooks(client) {
     useView
   };
 }
+// src/react/ui/useDataAppPresentation.ts
+import { useEffect as useEffect5, useState as useState7 } from "react";
+
+// src/core/presentation.ts
+function isDataAppPresentation(value) {
+  if (!value || typeof value !== "object")
+    return false;
+  const presentation = value;
+  return (presentation.surface === "embedded" || presentation.surface === "standalone") && (presentation.theme === "light" || presentation.theme === "dark");
+}
+
+// src/react/ui/useDataAppPresentation.ts
+function presentationFromBridgeState(state) {
+  const presentation = state && typeof state === "object" ? state.presentation : undefined;
+  return isDataAppPresentation(presentation) ? presentation : undefined;
+}
+function useDataAppPresentation() {
+  const [presentation, setPresentation] = useState7(() => presentationFromBridgeState(getDataAppTransport2()?.snapshot()));
+  useEffect5(() => {
+    let disposed = false;
+    let unsubscribe;
+    function attach(bridge) {
+      if (disposed)
+        return;
+      unsubscribe = bridge.subscribe((state) => setPresentation(presentationFromBridgeState(state)));
+      setPresentation(presentationFromBridgeState(bridge.snapshot()));
+    }
+    const bridge = getDataAppTransport2();
+    if (bridge)
+      attach(bridge);
+    else
+      localFrameBridge()?.connect?.().then(attach).catch(() => {});
+    return () => {
+      disposed = true;
+      unsubscribe?.();
+    };
+  }, []);
+  return presentation;
+}
+
 // src/react/ui/DataApp.tsx
-import {
-  useEffect as useEffect13,
-  useRef as useRef6,
-  useState as useState13
-} from "react";
+import { useEffect as useEffect14, useRef as useRef6 } from "react";
+
+// src/react/ui/useAppAppearance.ts
+import { useLayoutEffect, useState as useState8, useSyncExternalStore as useSyncExternalStore2 } from "react";
+function useAppAppearance(appearance, hostTheme) {
+  const [controller] = useState8(() => createThemeController2(parseAppearance2(appearance).theme));
+  const viewerPreference = useSyncExternalStore2(controller.subscribe, controller.getTheme, controller.getTheme);
+  useLayoutEffect(() => applyAppearance2({
+    ...parseAppearance2(appearance),
+    theme: hostTheme ?? viewerPreference
+  }), [appearance, hostTheme, viewerPreference]);
+  return hostTheme ? undefined : controller;
+}
 
 // src/react/ui/AboutData.tsx
 import {
-  useEffect as useEffect9,
+  useEffect as useEffect10,
   useRef as useRef4,
-  useState as useState9
+  useState as useState11
 } from "react";
 import { useMergeRefs as useMergeRefs4 } from "@floating-ui/react";
 
@@ -2344,7 +2427,7 @@ function EmptyState({
 }
 
 // src/react/ui/shortcuts.ts
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6 } from "react";
 var shortcuts = {
   refresh: { modifier: "alt", code: "KeyR", key: "R" },
   aboutData: { modifier: "alt", code: "KeyI", key: "I" },
@@ -2372,7 +2455,7 @@ function isEditingTarget(target) {
 }
 function useShortcut(shortcut, action, enabled = true) {
   const { modifier, shift = false, code } = shortcut;
-  useEffect5(() => {
+  useEffect6(() => {
     if (!enabled)
       return;
     function onKeyDown(event) {
@@ -2406,8 +2489,8 @@ function Kbd({ shortcut, children, className, ...props }) {
 
 // src/react/ui/QueryList.tsx
 import {
-  useEffect as useEffect6,
-  useState as useState7
+  useEffect as useEffect7,
+  useState as useState9
 } from "react";
 import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 var KEYWORD = /\b(WITH|SELECT|FROM|WHERE|AND|OR|NOT|IN|AS|ON|JOIN|LEFT|RIGHT|INNER|FULL|OUTER|CROSS|GROUP BY|ORDER BY|HAVING|LIMIT|UNION|ALL|DISTINCT|CASE|WHEN|THEN|ELSE|END|NULL|TRUE|FALSE|BETWEEN|LIKE|ILIKE|EXISTS|VALUES|CAST|COUNT|SUM|AVG|MIN|MAX|QUALIFY|WINDOW|OVER|PARTITION|BY)\b/gi;
@@ -2425,8 +2508,8 @@ function SqlCode({ statement }) {
   });
 }
 function QueryFigure({ name, statement }) {
-  const [copyState, setCopyState] = useState7("idle");
-  useEffect6(() => {
+  const [copyState, setCopyState] = useState9("idle");
+  useEffect7(() => {
     if (copyState === "idle")
       return;
     const timer = window.setTimeout(() => setCopyState("idle"), 1500);
@@ -2482,8 +2565,8 @@ function QueryNotebook({
   queries,
   className
 }) {
-  const [copyState, setCopyState] = useState7("idle");
-  useEffect6(() => {
+  const [copyState, setCopyState] = useState9("idle");
+  useEffect7(() => {
     if (copyState === "idle")
       return;
     const timer = window.setTimeout(() => setCopyState("idle"), 1500);
@@ -2585,7 +2668,7 @@ function QueryList({
 
 // src/react/ui/Sheet.tsx
 import {
-  useEffect as useEffect7,
+  useEffect as useEffect8,
   useId as useId5,
   useRef as useRef3
 } from "react";
@@ -2614,7 +2697,7 @@ function Sheet({
   const titleId = useId5();
   const descriptionId = useId5();
   const dialogRef = useMergeRefs3([dialog, ref]);
-  useEffect7(() => {
+  useEffect8(() => {
     const element = dialog.current;
     if (!element)
       return;
@@ -2728,7 +2811,7 @@ function Sheet({
 }
 
 // src/react/ui/Tabs.tsx
-import { useCallback as useCallback2, useEffect as useEffect8, useState as useState8 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect9, useState as useState10 } from "react";
 import {
   Tabs,
   TabList,
@@ -2741,8 +2824,8 @@ function useViewTab(views, fallback) {
     const requested = searchParams().get("view");
     return views.includes(requested) ? requested : fallback;
   }, [views, fallback]);
-  const [selected, setSelected] = useState8(currentView);
-  useEffect8(() => {
+  const [selected, setSelected] = useState10(currentView);
+  useEffect9(() => {
     function sync() {
       const view = currentView();
       setSelected(view);
@@ -2871,8 +2954,8 @@ function AboutData({
   const hasQueries = (resolvedQueries ?? []).some((query) => !names || names.includes(query.name));
   const sheetId = subjectId(subject);
   const initialTab = resolveTab(tab ?? searchParams().get("tab"));
-  const [uncontrolledOpen, setUncontrolledOpen] = useState9(() => searchParams().get("about") === sheetId);
-  const [selectedTab, setSelectedTab] = useState9(initialTab);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState11(() => searchParams().get("about") === sheetId);
+  const [selectedTab, setSelectedTab] = useState11(initialTab);
   const open = openProp ?? uncontrolledOpen;
   const triggerRef = useRef4(null);
   const mergedTrigger = useMergeRefs4([triggerRef, ref]);
@@ -2902,7 +2985,7 @@ function AboutData({
     if (open)
       writeSearch({ about: sheetId, tab: id });
   }
-  useEffect9(() => {
+  useEffect10(() => {
     function sync() {
       const about = searchParams().get("about");
       const urlTab = searchParams().get("tab");
@@ -3331,11 +3414,11 @@ function LiveControl({
 
 // src/react/ui/PresentStory.tsx
 import {
-  useEffect as useEffect10,
+  useEffect as useEffect11,
   useEffectEvent as useEffectEvent2,
   useId as useId7,
   useRef as useRef5,
-  useState as useState10
+  useState as useState12
 } from "react";
 import { useMergeRefs as useMergeRefs5 } from "@floating-ui/react";
 
@@ -3343,10 +3426,10 @@ import { useMergeRefs as useMergeRefs5 } from "@floating-ui/react";
 import {
   useCallback as useCallback3,
   useId as useId6,
-  useSyncExternalStore as useSyncExternalStore2
+  useSyncExternalStore as useSyncExternalStore3
 } from "react";
 import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
-var modes = [
+var themes = [
   { value: "light", label: "Light", icon: "lightTheme" },
   { value: "dark", label: "Dark", icon: "darkTheme" }
 ];
@@ -3361,10 +3444,10 @@ function useResolvedTheme(theme) {
     };
   }, [theme]);
   const snapshot = useCallback3(() => {
-    const mode = theme.getMode();
-    return mode === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : mode;
+    const preference = theme.getTheme();
+    return preference === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : preference;
   }, [theme]);
-  return useSyncExternalStore2(subscribe, snapshot, () => "light");
+  return useSyncExternalStore3(subscribe, snapshot, () => "light");
 }
 function ThemeSelector({
   theme,
@@ -3382,7 +3465,7 @@ function ThemeSelector({
         className: "altertable-theme-legend",
         children: "Color theme"
       }),
-      modes.map(({ value, label, icon }) => /* @__PURE__ */ jsx29(Tooltip, {
+      themes.map(({ value, label, icon }) => /* @__PURE__ */ jsx29(Tooltip, {
         content: `${label} theme`,
         children: /* @__PURE__ */ jsxs20("label", {
           children: [
@@ -3392,7 +3475,7 @@ function ThemeSelector({
               value,
               checked: selected === value,
               "aria-label": `${label} theme`,
-              onChange: () => theme.setMode(value)
+              onChange: () => theme.setTheme(value)
             }),
             /* @__PURE__ */ jsx29(AppIcon, {
               name: icon,
@@ -3417,7 +3500,7 @@ function ThemeToggle({
     variant: "ghost",
     label: `Switch to ${next} theme`,
     portalRoot,
-    onClick: () => theme.setMode(next)
+    onClick: () => theme.setTheme(next)
   });
 }
 
@@ -3494,7 +3577,7 @@ function PresentStory({
   const headline = useRef5(null);
   const headlineId = useId7();
   const contextId = useId7();
-  const [stepId, setStepId] = useState10(steps[0]?.id);
+  const [stepId, setStepId] = useState12(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));
@@ -3502,7 +3585,7 @@ function PresentStory({
   const stepIds = steps.map((item) => item.id).join("\x00");
   const unavailable = !steps.length || !!disabled;
   const currentSteps = useEffectEvent2(() => steps);
-  useEffect10(() => {
+  useEffect11(() => {
     function syncFromUrl() {
       const params = searchParams();
       const availableSteps = currentSteps();
@@ -3518,7 +3601,7 @@ function PresentStory({
     syncFromUrl();
     return subscribeSearch(syncFromUrl);
   }, [stepIds]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (dialog.current?.open)
       headline.current?.focus({ preventScroll: true });
   }, [stepId]);
@@ -3754,8 +3837,8 @@ function PresentStory({
 
 // src/react/ui/RefreshControl.tsx
 import {
-  useEffect as useEffect11,
-  useState as useState11
+  useEffect as useEffect12,
+  useState as useState13
 } from "react";
 import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
 function RefreshControl({
@@ -3767,13 +3850,13 @@ function RefreshControl({
   className,
   ...props
 }) {
-  const [refreshDelay, setRefreshDelay] = useState11({
+  const [refreshDelay, setRefreshDelay] = useState13({
     refreshing,
     elapsed: false
   });
   if (refreshDelay.refreshing !== refreshing)
     setRefreshDelay({ refreshing, elapsed: false });
-  useEffect11(() => {
+  useEffect12(() => {
     if (!refreshing)
       return;
     const timer = window.setTimeout(() => setRefreshDelay({ refreshing: true, elapsed: true }), 300);
@@ -3910,7 +3993,7 @@ function VariableBar({
 }
 
 // src/react/ui/DataViewToast.tsx
-import { useEffect as useEffect12, useState as useState12 } from "react";
+import { useEffect as useEffect13, useState as useState14 } from "react";
 import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
 function DataViewToast({
   view,
@@ -3918,10 +4001,10 @@ function DataViewToast({
   notice,
   onRetry
 }) {
-  const [delay, setDelay] = useState12({ kind: view.kind, elapsed: false });
+  const [delay, setDelay] = useState14({ kind: view.kind, elapsed: false });
   if (delay.kind !== view.kind)
     setDelay({ kind: view.kind, elapsed: false });
-  useEffect12(() => {
+  useEffect13(() => {
     if (view.kind !== "updating" && view.kind !== "stale-error")
       return;
     const kind = view.kind;
@@ -4216,9 +4299,11 @@ function DataApp(props) {
     footerActions,
     layoutProps
   } = props;
-  const [theme] = useState13(() => createThemeController2(config.appearance));
+  const presentation = useDataAppPresentation();
+  const isEmbedded = presentation?.surface === "embedded";
+  const themeController = useAppAppearance(config.appearance, presentation?.theme);
   const bodyRef = useRef6(null);
-  useEffect13(() => {
+  useEffect14(() => {
     if (import.meta.env?.DEV && bodyRef.current?.querySelector("h1"))
       console.warn("DataApp owns the page title. Use section headings (h2) in its body.");
   });
@@ -4228,6 +4313,28 @@ function DataApp(props) {
     organization: scopeLabels?.organization ?? config.scope.organization,
     environment: scopeLabels?.environment ?? config.scope.environment
   });
+  const toolbar = /* @__PURE__ */ jsx39(AppToolbar, {
+    requestState: request?.view.kind,
+    refresh: refresh ?? request?.refresh,
+    story: story && {
+      ...story,
+      title: config.title,
+      scope,
+      dataContext,
+      empty: aboutEmpty,
+      theme: themeController
+    },
+    aboutData: /* @__PURE__ */ jsx39(AboutData, {
+      id: "data",
+      shortcut: true,
+      dataContext,
+      empty: aboutEmpty,
+      queries: queries ?? request?.queries,
+      iconOnly: true,
+      variant: "elevated"
+    }),
+    children: toolbarActions
+  });
   return /* @__PURE__ */ jsx39(InspectionContext, {
     value: {
       dataContext,
@@ -4236,36 +4343,16 @@ function DataApp(props) {
     },
     children: /* @__PURE__ */ jsxs28(AppLayout, {
       ...layoutProps,
-      footerActions: footerActions ?? /* @__PURE__ */ jsx39(ThemeToggle, {
-        theme
-      }),
+      footer: isEmbedded ? null : layoutProps?.footer,
+      footerActions: footerActions ?? (themeController && /* @__PURE__ */ jsx39(ThemeToggle, {
+        theme: themeController
+      })),
       children: [
-        /* @__PURE__ */ jsx39(AppHeader, {
+        isEmbedded ? toolbar : /* @__PURE__ */ jsx39(AppHeader, {
           scope,
           title: config.title,
           description,
-          toolbar: /* @__PURE__ */ jsx39(AppToolbar, {
-            requestState: request?.view.kind,
-            refresh: refresh ?? request?.refresh,
-            story: story && {
-              ...story,
-              title: config.title,
-              scope,
-              dataContext,
-              empty: aboutEmpty,
-              theme
-            },
-            aboutData: /* @__PURE__ */ jsx39(AboutData, {
-              id: "data",
-              shortcut: true,
-              dataContext,
-              empty: aboutEmpty,
-              queries: queries ?? request?.queries,
-              iconOnly: true,
-              variant: "elevated"
-            }),
-            children: toolbarActions
-          })
+          toolbar
         }),
         (request?.controls ?? props.variables) && /* @__PURE__ */ jsx39(VariableBar, {
           children: request?.controls ?? props.variables
@@ -4514,21 +4601,20 @@ function DataWidgetContent({
   }) : children;
   const visual = /* @__PURE__ */ jsx44(WidgetContent, {
     bodyPadding: empty ? "flush" : bodyPadding,
-    footer,
+    footer: empty ? undefined : footer,
     status,
     children: content
   });
-  const help = evidence && /* @__PURE__ */ jsx44(AboutData, {
-    ...evidence,
+  const help = evidence && /* @__PURE__ */ jsxs30(AboutData, {
     id: evidence.id,
     references: {
       kind: "ids",
       glossaryIds: evidence.glossaryIds,
       queryNames: evidence.queryNames
     },
-    iconOnly: true,
+    "aria-label": typeof title === "string" ? `Explore ${title}` : "Explore this widget",
     variant: "ghost",
-    className: "altertable-inspect-trigger",
+    className: "altertable-widget-heading-trigger",
     tooltip: "Explore this widget",
     shortcut: false,
     title,
@@ -4538,9 +4624,12 @@ function DataWidgetContent({
     description,
     visual,
     visualKind: "widget",
-    children: /* @__PURE__ */ jsx44(AppIcon, {
-      name: "openDetails"
-    })
+    children: [
+      title,
+      /* @__PURE__ */ jsx44(AppIcon, {
+        name: "openDetails"
+      })
+    ]
   });
   return /* @__PURE__ */ jsxs30("section", {
     ...props,
@@ -4554,8 +4643,9 @@ function DataWidgetContent({
             children: [
               /* @__PURE__ */ jsxs30("h2", {
                 id: titleId,
+                "aria-label": typeof title === "string" ? title : undefined,
                 children: [
-                  title,
+                  help ?? title,
                   count !== undefined && /* @__PURE__ */ jsx44("span", {
                     className: "altertable-data-widget-count",
                     children: formatCount2(count)
@@ -4573,8 +4663,7 @@ function DataWidgetContent({
               /* @__PURE__ */ jsx44(WidgetStatusControl, {
                 status
               }),
-              action,
-              help
+              action
             ]
           })
         ]
@@ -4605,7 +4694,7 @@ function WidgetContent({
   });
 }
 // src/react/ui/VisualizationWidget.tsx
-import { useState as useState14 } from "react";
+import { useState as useState15 } from "react";
 
 // src/react/ui/widget-views.ts
 function validateWidgetViews(views, selected) {
@@ -4700,7 +4789,7 @@ function VisualizationWidgetWithViews({
   insight,
   ...shell
 }) {
-  const [selected, setSelected] = useState14(initialView ?? views[0]?.id ?? "");
+  const [selected, setSelected] = useState15(initialView ?? views[0]?.id ?? "");
   validateWidgetViews(views, selected);
   return /* @__PURE__ */ jsx46(DataWidget, {
     ...shell,
@@ -4727,14 +4816,14 @@ function VisualizationWidgetWithViews({
   });
 }
 // src/react/ui/TableWidget.tsx
-import { useState as useState17 } from "react";
+import { useState as useState18 } from "react";
 
 // src/react/ui/DateTimeTooltip.tsx
-import { useEffect as useEffect14, useState as useState16 } from "react";
+import { useEffect as useEffect15, useState as useState17 } from "react";
 
 // src/react/ui/HelpPopover.tsx
 import {
-  useState as useState15
+  useState as useState16
 } from "react";
 import {
   autoUpdate as autoUpdate2,
@@ -4767,8 +4856,8 @@ function HelpPopover({
   open: openProp,
   onOpenChange
 }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = useState15(false);
-  const [dialogRoot, setDialogRoot] = useState15(null);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState16(false);
+  const [dialogRoot, setDialogRoot] = useState16(null);
   const open = openProp ?? uncontrolledOpen;
   function setOpen(next) {
     onOpenChange?.(next);
@@ -4857,8 +4946,8 @@ function DateTimeTooltip({
   panelClassName,
   ...props
 }) {
-  const [now, setNow] = useState16(Date.now);
-  useEffect14(() => {
+  const [now, setNow] = useState17(Date.now);
+  useEffect15(() => {
     const interval = window.setInterval(() => setNow(Date.now()), 30000);
     return () => window.clearInterval(interval);
   }, []);
@@ -5058,7 +5147,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] = useState17({
+  const [pageState, setPageState] = useState18({
     page: 0,
     rowKeys,
     searchValue: search?.value,
@@ -5115,7 +5204,7 @@ function TableWidgetContent({
       ]
     })
   });
-  const pager = pageSize && hits.length > 0 && /* @__PURE__ */ jsxs35("nav", {
+  const pager = pageSize && pageCount > 1 && /* @__PURE__ */ jsxs35("nav", {
     className: "altertable-table-pagination",
     "aria-label": "Table pages",
     children: [
@@ -5587,11 +5676,10 @@ function MetricWidgetContent({
   const feedback = /* @__PURE__ */ jsx55(WidgetStatusControl, {
     status
   });
-  const help = evidence ? /* @__PURE__ */ jsx55(AboutData, {
-    ...evidence,
-    iconOnly: true,
+  const help = evidence ? /* @__PURE__ */ jsxs40(AboutData, {
+    "aria-label": `Explore ${label}`,
     variant: "ghost",
-    className: "altertable-inspect-trigger",
+    className: "altertable-widget-heading-trigger",
     tooltip: "Explore this metric",
     references: {
       kind: "ids",
@@ -5611,9 +5699,12 @@ function MetricWidgetContent({
       ]
     }),
     visualKind: "metric",
-    children: /* @__PURE__ */ jsx55(AppIcon, {
-      name: "openDetails"
-    })
+    children: [
+      label,
+      /* @__PURE__ */ jsx55(AppIcon, {
+        name: "openDetails"
+      })
+    ]
   }) : null;
   return /* @__PURE__ */ jsxs40("div", {
     ...props,
@@ -5623,14 +5714,13 @@ function MetricWidgetContent({
         className: "altertable-metric-label",
         children: [
           /* @__PURE__ */ jsx55("span", {
-            children: label
+            children: help ?? label
           }),
           /* @__PURE__ */ jsxs40("div", {
             className: "altertable-metric-help",
             children: [
               feedback,
-              action,
-              help
+              action
             ]
           })
         ]
@@ -5649,7 +5739,7 @@ function MetricWidgetContent({
   });
 }
 // src/react/ui/SelectableBarChart.tsx
-import { useLayoutEffect, useRef as useRef7, useState as useState18 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef7, useState as useState19 } from "react";
 import { jsx as jsx56, jsxs as jsxs41 } from "react/jsx-runtime";
 function SelectableBarChart({
   items,
@@ -5659,10 +5749,10 @@ function SelectableBarChart({
   ariaLabel,
   formatValue = (value) => new Intl.NumberFormat().format(value)
 }) {
-  const [previewId, setPreviewId] = useState18(null);
+  const [previewId, setPreviewId] = useState19(null);
   const scrollport = useRef7(null);
   const buttons = useRef7([]);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     const element = scrollport.current;
     if (element)
       element.scrollLeft = element.scrollWidth - element.clientWidth;
@@ -5747,15 +5837,85 @@ function SelectableBarChart({
           ]
         }, item.id))
       }),
-      /* @__PURE__ */ jsx56("p", {
+      items.length > 0 && /* @__PURE__ */ jsx56("p", {
         className: "altertable-selectable-bars-help",
         children: "Select a bar to inspect its day. Use arrow keys to move; press Escape to clear."
       })
     ]
   });
 }
+// src/react/ui/DataAppSkeleton.tsx
+import { jsx as jsx57, jsxs as jsxs42 } from "react/jsx-runtime";
+var chartHeights = [40, 60, 50, 80, 60, 100, 80, 60];
+function DataAppSkeleton({
+  header,
+  footer,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx57("output", {
+    "aria-label": "Loading data app",
+    ...props,
+    "aria-busy": "true",
+    className: classNames("altertable-data-app-skeleton", className),
+    children: /* @__PURE__ */ jsxs42("div", {
+      className: "altertable-data-app-skeleton-content",
+      children: [
+        header != null && header !== false && /* @__PURE__ */ jsx57("div", {
+          className: "altertable-data-app-skeleton-header",
+          children: header
+        }),
+        /* @__PURE__ */ jsxs42("div", {
+          className: "altertable-data-app-skeleton-body",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsx57(Grid, {
+              columns: 3,
+              gap: "md",
+              children: [0, 1, 2].map((item) => /* @__PURE__ */ jsx57(MetricWidget, {
+                label: "",
+                loading: true
+              }, item))
+            }),
+            /* @__PURE__ */ jsx57(VisualizationWidget, {
+              title: /* @__PURE__ */ jsx57(Skeleton, {
+                className: "altertable-data-app-skeleton-widget-title"
+              }),
+              visual: /* @__PURE__ */ jsx57("div", {
+                className: "altertable-data-app-skeleton-chart",
+                children: chartHeights.map((height, index) => /* @__PURE__ */ jsx57(Skeleton, {
+                  style: { height: `${height}%` }
+                }, index))
+              })
+            }),
+            /* @__PURE__ */ jsx57(DataWidget, {
+              title: /* @__PURE__ */ jsx57(Skeleton, {
+                className: "altertable-data-app-skeleton-widget-title"
+              }),
+              children: /* @__PURE__ */ jsx57("div", {
+                className: "altertable-data-app-skeleton-rows",
+                children: [0, 1, 2].map((row) => /* @__PURE__ */ jsxs42("div", {
+                  className: "altertable-data-app-skeleton-row",
+                  children: [
+                    /* @__PURE__ */ jsx57(Skeleton, {}),
+                    /* @__PURE__ */ jsx57(Skeleton, {}),
+                    /* @__PURE__ */ jsx57(Skeleton, {})
+                  ]
+                }, row))
+              })
+            })
+          ]
+        }),
+        footer != null && footer !== false && /* @__PURE__ */ jsx57("div", {
+          className: "altertable-data-app-skeleton-footer",
+          children: footer
+        })
+      ]
+    })
+  });
+}
 // src/react/ui/RefreshRegion.tsx
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 function RefreshRegion({
   refreshing,
   dimOnUpdate = false,
@@ -5764,10 +5924,10 @@ function RefreshRegion({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx57("div", {
+  return /* @__PURE__ */ jsx58("div", {
     ...props,
     className: classNames("altertable-refresh-region", className),
-    children: /* @__PURE__ */ jsx57("div", {
+    children: /* @__PURE__ */ jsx58("div", {
       ...contentProps,
       className: classNames("altertable-refresh-content", contentProps?.className),
       "data-refreshing": refreshing && dimOnUpdate,
@@ -5777,8 +5937,8 @@ function RefreshRegion({
   });
 }
 // src/react/ui/UpdatedAt.tsx
-import { useEffect as useEffect15, useState as useState19 } from "react";
-import { jsx as jsx58, jsxs as jsxs42 } from "react/jsx-runtime";
+import { useEffect as useEffect16, useState as useState20 } from "react";
+import { jsx as jsx59, jsxs as jsxs43 } from "react/jsx-runtime";
 function UpdatedAt({
   timestamp,
   locale,
@@ -5787,8 +5947,8 @@ function UpdatedAt({
   triggerClassName,
   ...props
 }) {
-  const [now, setNow] = useState19(Date.now);
-  useEffect15(() => {
+  const [now, setNow] = useState20(Date.now);
+  useEffect16(() => {
     const interval = window.setInterval(() => setNow(Date.now()), 30000);
     return () => window.clearInterval(interval);
   }, []);
@@ -5802,11 +5962,11 @@ function UpdatedAt({
   else if (elapsedMinutes >= 1)
     age = relative.format(-elapsedMinutes, "minute");
   const date = new Date(timestamp);
-  return /* @__PURE__ */ jsx58(DateTimeTooltip, {
+  return /* @__PURE__ */ jsx59(DateTimeTooltip, {
     ...props,
     date,
     triggerClassName: ["altertable-updated-at", triggerClassName].filter(Boolean).join(" "),
-    children: children ?? /* @__PURE__ */ jsxs42("time", {
+    children: children ?? /* @__PURE__ */ jsxs43("time", {
       dateTime: date.toISOString(),
       children: [
         label,
@@ -5889,7 +6049,7 @@ function createDataContext(queryNames) {
   return bindDataContext;
 }
 // src/react/ui/data-identifiers.tsx
-import { jsx as jsx59, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs44 } from "react/jsx-runtime";
 function qualifiedName(definition) {
   const table = definition.kind === "table" ? definition : definition.table;
   const path = [table.catalog, table.schema, table.name].join(".");
@@ -5925,23 +6085,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__ */ jsxs43("code", {
+    return /* @__PURE__ */ jsxs44("code", {
       className: "altertable-data-identifier",
       "data-kind": definition.kind,
       title: qualified,
       "data-identifier-id": id,
       children: [
-        shown === "qualified" && /* @__PURE__ */ jsx59("span", {
+        shown === "qualified" && /* @__PURE__ */ jsx60("span", {
           className: "altertable-data-identifier-path",
-          children: prefix.map((segment, index) => /* @__PURE__ */ jsxs43("span", {
+          children: prefix.map((segment, index) => /* @__PURE__ */ jsxs44("span", {
             children: [
               segment,
               ".",
-              /* @__PURE__ */ jsx59("wbr", {})
+              /* @__PURE__ */ jsx60("wbr", {})
             ]
           }, index))
         }),
-        /* @__PURE__ */ jsx59("span", {
+        /* @__PURE__ */ jsx60("span", {
           className: "altertable-data-identifier-name",
           children: definition.name
         })
@@ -5954,7 +6114,7 @@ function defineDataIdentifiers({ tables, columns }) {
   };
 }
 // src/react/ui/GlossaryExplanation.tsx
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 function GlossaryExplanation({
   entry,
   empty,
@@ -5966,7 +6126,7 @@ function GlossaryExplanation({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx60(AboutData, {
+  return /* @__PURE__ */ jsx61(AboutData, {
     ...props,
     shortcut: false,
     iconOnly: true,
@@ -5981,28 +6141,28 @@ function GlossaryExplanation({
     className: className ?? "altertable-inspect-trigger",
     tooltip: "Explore this term",
     "aria-label": props["aria-label"] ?? `Explore ${entry.term}`,
-    children: /* @__PURE__ */ jsx60(AppIcon, {
+    children: /* @__PURE__ */ jsx61(AppIcon, {
       name: "openDetails"
     })
   });
 }
 // src/react/ui/GlossaryDefinition.tsx
-import { jsx as jsx61, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs45 } from "react/jsx-runtime";
 function GlossaryDefinition({
   entry,
   children
 }) {
-  return /* @__PURE__ */ jsxs44(HelpPopover, {
+  return /* @__PURE__ */ jsxs45(HelpPopover, {
     trigger: children ?? entry.term,
     triggerLabel: `Explain ${entry.term}`,
     label: entry.term,
     triggerClassName: "altertable-glossary-definition-trigger",
     panelClassName: "altertable-glossary-definition-popover",
     children: [
-      /* @__PURE__ */ jsx61("strong", {
+      /* @__PURE__ */ jsx62("strong", {
         children: entry.term
       }),
-      /* @__PURE__ */ jsx61("div", {
+      /* @__PURE__ */ jsx62("div", {
         children: entry.definition
       })
     ]
@@ -6024,6 +6184,7 @@ export {
   ContentSkeleton,
   DataApp,
   DataAppProvider,
+  DataAppSkeleton,
   DataBoundary,
   DataSection,
   DataTable,
@@ -6102,4 +6263,4 @@ export {
   writeSearch
 };
 
-//# debugId=20DE22C9D34BA1BA64756E2164756E21
+//# debugId=A173C527FEF0F21F64756E2164756E21