@flanksource/clicky-ui 0.3.21 → 0.3.23

package/dist/data/Clicky.cjs

@@ -4,12 +4,15 @@ const jsxRuntime = require("react/jsx-runtime");
 const reactQuery = require("@tanstack/react-query");
 const react = require("react");
 const FilterForm = require("../rpc/FilterForm.cjs");
+const apiClient = require("../rpc/apiClient.cjs");
+const operationErrorDiagnostics = require("../rpc/operationErrorDiagnostics.cjs");
 const classify = require("../rpc/classify.cjs");
 const formMetadata = require("../rpc/formMetadata.cjs");
 const types = require("../rpc/types.cjs");
 const useOperations = require("../rpc/useOperations.cjs");
 const utils = require("../lib/utils.cjs");
 const DataTable = require("./DataTable.cjs");
+const calloutTones = require("./callout-tones.cjs");
 const Tree = require("./Tree.cjs");
 const ObjectGraph = require("./ObjectGraph.cjs");
 const ExecutionTree = require("./ExecutionTree.cjs");
@@ -25,11 +28,12 @@ const modalStack = require("../overlay/modalStack.cjs");
 const TagList = require("./cells/TagList.cjs");
 const tagUtils = require("./cells/tag-utils.cjs");
 const clickyParse = require("./clicky-parse.cjs");
+const useQueryInfo = require("./query-info/useQueryInfo.cjs");
+const useClickyExport = require("./clicky-export/useClickyExport.cjs");
+const ClickyExportDialog = require("./clicky-export/ClickyExportDialog.cjs");
 const UiEllipsis = require("../icons/components/UiEllipsis.cjs");
 const UiCheck = require("../icons/components/UiCheck.cjs");
 const UiCloudDownload = require("../icons/components/UiCloudDownload.cjs");
-const UiChevronUp = require("../icons/components/UiChevronUp.cjs");
-const UiChevronDown = require("../icons/components/UiChevronDown.cjs");
 const UiComment = require("../icons/components/UiComment.cjs");
 const UiTable = require("../icons/components/UiTable.cjs");
 const UiFileCode = require("../icons/components/UiFileCode.cjs");
@@ -64,7 +68,8 @@ const ClickyRuntimeContext = react.createContext(
   clickyRuntimeContextDefault
 );
 function Clicky(props) {
-  const [queryClient] = react.useState(
+  const hostQueryClient = react.useContext(reactQuery.QueryClientContext);
+  const [fallbackQueryClient] = react.useState(
     () => new reactQuery.QueryClient({
       defaultOptions: {
         queries: {
@@ -74,36 +79,66 @@ function Clicky(props) {
       }
     })
   );
+  const queryInfo = useQueryInfo.useQueryInfo({ url: props.url });
+  const exporter = useClickyExport.useClickyExport({
+    formats: react.useMemo(
+      () => exportFormatOptions({ url: props.url, download: props.download }),
+      [props.download, props.url]
+    ),
+    scopes: react.useMemo(
+      () => exportScopeOptions(props.download, props.pagination),
+      [props.download, props.pagination]
+    ),
+    onDownload: react.useCallback(
+      ({ format, scope }) => runClickyDownload({
+        url: props.url ?? "",
+        format,
+        scope,
+        download: props.download
+      }),
+      [props.download, props.url]
+    )
+  });
   const tableMenuActions = react.useMemo(
-    () => getDownloadMenuActions({ url: props.url, download: props.download }),
-    [props.download, props.url]
-  );
-  const content = /* @__PURE__ */ jsxRuntime.jsx(
-    ClickyRuntimeProvider,
-    {
-      ...props.commandRuntime ? { commandRuntime: props.commandRuntime } : {},
-      ...props.onTableRowClick ? { onTableRowClick: props.onTableRowClick } : {},
-      ...props.getTableRowHref ? { getTableRowHref: props.getTableRowHref } : {},
-      ...props.isTableRowClickable ? { isTableRowClickable: props.isTableRowClickable } : {},
-      ...props.search ? { tableSearch: props.search } : {},
-      ...props.timeRange ? { tableTimeRange: props.timeRange } : {},
-      ...props.externalFilters ? { tableExternalFilters: props.externalFilters } : {},
-      ...props.cellFilters ? { tableCellFilters: props.cellFilters } : {},
-      ...props.onCellFilterChange ? { onTableCellFilterChange: props.onCellFilterChange } : {},
-      ...props.pagination ? { tablePagination: props.pagination } : {},
-      ...props.rowSelection ? { tableRowSelection: props.rowSelection } : {},
-      ...tableMenuActions.length > 0 ? { tableMenuActions } : {},
-      children: props.url ? /* @__PURE__ */ jsxRuntime.jsx(ClickyRemoteRenderer, { ...props, url: props.url }) : /* @__PURE__ */ jsxRuntime.jsx(
-        ClickyContent,
-        {
-          data: props.data,
-          ...props.className ? { className: props.className } : {}
-        }
-      )
-    }
+    () => [exporter.action, queryInfo.action].filter(
+      (action) => action !== void 0
+    ),
+    [exporter.action, queryInfo.action]
   );
-  if (props.url || props.commandRuntime) {
-    return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient, children: content });
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    queryInfo.dialog,
+    exporter.dialog,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ClickyRuntimeProvider,
+      {
+        ...props.commandRuntime ? { commandRuntime: props.commandRuntime } : {},
+        ...props.onTableRowClick ? { onTableRowClick: props.onTableRowClick } : {},
+        ...props.getTableRowHref ? { getTableRowHref: props.getTableRowHref } : {},
+        ...props.isTableRowClickable ? { isTableRowClickable: props.isTableRowClickable } : {},
+        ...props.search ? { tableSearch: props.search } : {},
+        ...props.timeRange ? { tableTimeRange: props.timeRange } : {},
+        ...props.externalFilters ? { tableExternalFilters: props.externalFilters } : {},
+        ...props.cellFilters ? { tableCellFilters: props.cellFilters } : {},
+        ...props.onCellFilterChange ? { onTableCellFilterChange: props.onCellFilterChange } : {},
+        ...props.pagination ? { tablePagination: props.pagination } : {},
+        ...props.sort !== void 0 ? { tableSort: props.sort } : {},
+        ...props.onSortChange ? { onTableSortChange: props.onSortChange } : {},
+        ...props.infinite ? { tableInfinite: props.infinite } : {},
+        ...props.rowSelection ? { tableRowSelection: props.rowSelection } : {},
+        ...props.loading !== void 0 ? { tableLoading: props.loading } : {},
+        ...tableMenuActions.length > 0 ? { tableMenuActions } : {},
+        children: props.url ? /* @__PURE__ */ jsxRuntime.jsx(ClickyRemoteRenderer, { ...props, url: props.url }) : /* @__PURE__ */ jsxRuntime.jsx(
+          ClickyContent,
+          {
+            data: props.data,
+            ...props.className ? { className: props.className } : {}
+          }
+        )
+      }
+    )
+  ] });
+  if (!hostQueryClient && (props.url || props.commandRuntime)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: fallbackQueryClient, children: content });
   }
   return content;
 }
@@ -118,12 +153,16 @@ function ClickyRuntimeProvider({
   tableCellFilters,
   onTableCellFilterChange,
   tablePagination,
+  tableSort,
+  onTableSortChange,
+  tableInfinite,
   tableRowSelection,
   tableMenuActions,
+  tableLoading,
   children
 }) {
   if (!commandRuntime) {
-    const hasOverrides = onTableRowClick || getTableRowHref || isTableRowClickable || tableSearch || tableTimeRange || tableExternalFilters || tableCellFilters || onTableCellFilterChange || tablePagination || tableRowSelection || tableMenuActions;
+    const hasOverrides = onTableRowClick || getTableRowHref || isTableRowClickable || tableSearch || tableTimeRange || tableExternalFilters || tableCellFilters || onTableCellFilterChange || tablePagination || tableSort !== void 0 || onTableSortChange || tableInfinite || tableRowSelection || tableMenuActions || tableLoading;
     return /* @__PURE__ */ jsxRuntime.jsx(
       ClickyRuntimeContext.Provider,
       {
@@ -138,8 +177,12 @@ function ClickyRuntimeProvider({
           tableCellFilters,
           onTableCellFilterChange,
           tablePagination,
+          tableSort,
+          onTableSortChange,
+          tableInfinite,
           tableRowSelection,
-          tableMenuActions
+          tableMenuActions,
+          tableLoading
         } : clickyRuntimeContextDefault,
         children
       }
@@ -158,8 +201,12 @@ function ClickyRuntimeProvider({
       ...tableCellFilters ? { tableCellFilters } : {},
       ...onTableCellFilterChange ? { onTableCellFilterChange } : {},
       ...tablePagination ? { tablePagination } : {},
+      ...tableSort !== void 0 ? { tableSort } : {},
+      ...onTableSortChange ? { onTableSortChange } : {},
+      ...tableInfinite ? { tableInfinite } : {},
       ...tableRowSelection ? { tableRowSelection } : {},
       ...tableMenuActions ? { tableMenuActions } : {},
+      ...tableLoading !== void 0 ? { tableLoading } : {},
       children
     }
   );
@@ -175,8 +222,12 @@ function ClickyCommandRuntimeProvider({
   tableCellFilters,
   onTableCellFilterChange,
   tablePagination,
+  tableSort,
+  onTableSortChange,
+  tableInfinite,
   tableRowSelection,
   tableMenuActions,
+  tableLoading,
   children
 }) {
   const { operations, isLoading } = useOperations.useOperations(commandRuntime.client);
@@ -192,8 +243,12 @@ function ClickyCommandRuntimeProvider({
       tableCellFilters,
       onTableCellFilterChange,
       tablePagination,
+      tableSort,
+      onTableSortChange,
+      tableInfinite,
       tableRowSelection,
       tableMenuActions,
+      tableLoading,
       operations,
       operationsLoading: isLoading
     }),
@@ -210,8 +265,12 @@ function ClickyCommandRuntimeProvider({
       tableCellFilters,
       onTableCellFilterChange,
       tablePagination,
+      tableSort,
+      onTableSortChange,
+      tableInfinite,
       tableRowSelection,
-      tableMenuActions
+      tableMenuActions,
+      tableLoading
     ]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(ClickyRuntimeContext.Provider, { value, children });
@@ -238,12 +297,13 @@ function ClickyContent({
 }
 function ClickyRemoteRenderer({
   data,
+  dataFormat,
   url,
   view,
   download,
   className
 }) {
-  var _a, _b;
+  var _a;
   const availableViews = react.useMemo(
     () => getAvailableViews({ data, url, view }),
     [data, url, view]
@@ -269,14 +329,16 @@ function ClickyRemoteRenderer({
     }
   }, [activeView, availableViews]);
   const formattedUrl = buildFormatUrl(url, activeView);
+  const suppliedView = data !== void 0 ? dataFormat : void 0;
   const activeQuery = reactQuery.useQuery({
     queryKey: ["clicky", activeView, formattedUrl],
-    enabled: shouldFetchRemoteView(activeView),
+    enabled: shouldFetchRemoteView(activeView) && activeView !== suppliedView,
     queryFn: async () => fetchRemoteFormat(formattedUrl, activeView)
   });
-  const effectiveClickyData = activeView === "clicky" && ((_a = activeQuery.data) == null ? void 0 : _a.kind) === "text" ? activeQuery.data.text : data;
+  const remoteText = activeView !== suppliedView && ((_a = activeQuery.data) == null ? void 0 : _a.kind) === "text" ? activeQuery.data.text : void 0;
+  const effectiveClickyData = activeView === "clicky" && remoteText !== void 0 ? remoteText : data;
   const fallbackJsonData = react.useMemo(() => parseJsonValue(data), [data]);
-  const effectiveJsonData = activeView === "json" && ((_b = activeQuery.data) == null ? void 0 : _b.kind) === "text" ? parseJsonValue(activeQuery.data.text) : fallbackJsonData;
+  const effectiveJsonData = activeView === "json" && remoteText !== void 0 ? parseJsonValue(remoteText) : fallbackJsonData;
   const activeOverflowView = isOverflowViewFormat(activeView) ? activeView : null;
   const downloadHandledByTable = clickyPayloadHasTable(effectiveClickyData);
   const canDownload = downloadFormats.length > 0 && !downloadHandledByTable;
@@ -285,18 +347,29 @@ function ClickyRemoteRenderer({
   const tableHostsControls = downloadHandledByTable && activeView === "clicky";
   const viewMenuActions = react.useMemo(() => {
     if (!tableHostsControls || availableViews.length <= 1) return [];
-    return availableViews.map((format) => {
-      const meta = getRemoteFormatMeta(format);
-      return {
-        id: `view-${format}`,
-        label: formatViewLabel(format),
-        icon: meta.icon,
-        ...meta.iconClassName ? { iconClassName: meta.iconClassName } : {},
-        section: "View",
-        disabled: format === activeView,
-        onSelect: () => setActiveView(format)
-      };
-    });
+    const activeMeta = getRemoteFormatMeta(activeView);
+    return [
+      {
+        id: "view",
+        label: `View: ${formatViewLabel(activeView)}`,
+        icon: activeMeta.icon,
+        ...activeMeta.iconClassName ? { iconClassName: activeMeta.iconClassName } : {},
+        section: "",
+        children: availableViews.map((format) => {
+          const meta = getRemoteFormatMeta(format);
+          return {
+            id: `view-${format}`,
+            label: formatViewLabel(format),
+            description: meta.description,
+            icon: meta.icon,
+            ...meta.iconClassName ? { iconClassName: meta.iconClassName } : {},
+            disabled: format === activeView,
+            onSelect: () => setActiveView(format)
+          };
+        }),
+        onSelect: () => void 0
+      }
+    ];
   }, [tableHostsControls, availableViews, activeView]);
   const combinedTableActions = react.useMemo(
     () => [...viewMenuActions, ...runtime.tableMenuActions ?? []],
@@ -338,11 +411,10 @@ function ClickyRemoteRenderer({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
         shouldFetchRemoteView(activeView) && activeQuery.isFetching && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "Refreshing…" }),
         canDownload && /* @__PURE__ */ jsxRuntime.jsx(
-          ClickyDownloadMenu,
+          ClickyExportButton,
           {
             url,
-            formats: downloadFormats,
-            download
+            ...download ? { download } : {}
           }
         )
       ] })
@@ -354,21 +426,13 @@ function ClickyRemoteRenderer({
         message: "Excel output is available for download, but not inline preview.",
         href: formattedUrl
       }
-    ) : activeView === "clicky" ? activeQuery.isPending && effectiveClickyData === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(ClickyNotice, { title: "Loading Clicky", message: loadingMessage }) : activeQuery.isError && effectiveClickyData === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-      ClickyNotice,
-      {
-        title: "Clicky request failed",
-        message: activeQuery.error instanceof Error ? activeQuery.error.message : "Request failed",
-        tone: "destructive"
-      }
+    ) : activeView === "clicky" ? activeQuery.isPending && effectiveClickyData === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(ClickyNotice, { title: "Loading Clicky", message: loadingMessage }) : activeQuery.isError && effectiveClickyData === void 0 ? operationErrorDiagnostics.renderOperationError(
+      activeQuery.error,
+      `Failed to load ${formattedUrl}`
     ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      activeQuery.isError && data !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
-        ClickyNotice,
-        {
-          title: "Remote refresh failed",
-          message: "Showing the local fallback payload instead.",
-          tone: "warning"
-        }
+      activeQuery.isError && data !== void 0 && operationErrorDiagnostics.renderOperationError(
+        activeQuery.error,
+        `Refresh failed: ${formattedUrl}`
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
         ClickyRuntimeContext.Provider,
@@ -383,21 +447,13 @@ function ClickyRemoteRenderer({
           )
         }
       )
-    ] }) : activeView === "json" ? activeQuery.isPending && effectiveJsonData === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(ClickyNotice, { title: "Loading JSON", message: loadingMessage }) : activeQuery.isError && effectiveJsonData === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-      ClickyNotice,
-      {
-        title: "JSON request failed",
-        message: activeQuery.error instanceof Error ? activeQuery.error.message : "Request failed",
-        tone: "destructive"
-      }
+    ] }) : activeView === "json" ? activeQuery.isPending && effectiveJsonData === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(ClickyNotice, { title: "Loading JSON", message: loadingMessage }) : activeQuery.isError && effectiveJsonData === void 0 ? operationErrorDiagnostics.renderOperationError(
+      activeQuery.error,
+      `Failed to load ${formattedUrl}`
     ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      activeQuery.isError && fallbackJsonData !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
-        ClickyNotice,
-        {
-          title: "Remote refresh failed",
-          message: "Showing the local fallback payload instead.",
-          tone: "warning"
-        }
+      activeQuery.isError && fallbackJsonData !== void 0 && operationErrorDiagnostics.renderOperationError(
+        activeQuery.error,
+        `Refresh failed: ${formattedUrl}`
       ),
       /* @__PURE__ */ jsxRuntime.jsx(ClickyJsonTree, { value: effectiveJsonData })
     ] }) : activeQuery.isPending ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -406,13 +462,9 @@ function ClickyRemoteRenderer({
         title: `Loading ${formatViewLabel(activeView)}`,
         message: loadingMessage
       }
-    ) : activeQuery.isError ? /* @__PURE__ */ jsxRuntime.jsx(
-      ClickyNotice,
-      {
-        title: `${formatViewLabel(activeView)} request failed`,
-        message: activeQuery.error instanceof Error ? activeQuery.error.message : "Request failed",
-        tone: "destructive"
-      }
+    ) : activeQuery.isError ? operationErrorDiagnostics.renderOperationError(
+      activeQuery.error,
+      `Failed to load ${formatViewLabel(activeView)} from ${formattedUrl}`
     ) : /* @__PURE__ */ jsxRuntime.jsx(
       ClickyRemotePreview,
       {
@@ -505,111 +557,47 @@ function ClickyViewMenu({
     )
   ] });
 }
-function ClickyDownloadMenu({
+function ClickyExportButton({
   url,
-  formats,
   download
 }) {
-  const rootRef = react.useRef(null);
-  const triggerRef = react.useRef(null);
   const [open, setOpen] = react.useState(false);
-  const primaryFormat = formats.includes("json") ? "json" : formats[0];
-  const primaryMeta = getRemoteFormatMeta(primaryFormat);
-  const scopes = getDownloadScopes(download);
-  const primaryScope = scopes[0];
-  useDismissablePopup(open, rootRef, triggerRef, () => setOpen(false));
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: "relative", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          "aria-label": (download == null ? void 0 : download.label) ? `Download ${primaryMeta.label} ${download.label}` : `Download ${primaryMeta.label}`,
-          className: "inline-flex items-center gap-2 rounded-md border border-input bg-background px-3 py-1.5 text-xs font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-          onClick: () => triggerDownload(
-            buildDownloadUrl(
-              url,
-              primaryFormat,
-              download == null ? void 0 : download.label,
-              primaryScope
-            )
-          ),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiCloudDownload.UiCloudDownload, className: "text-sm" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: `Download ${primaryMeta.label}` })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          ref: triggerRef,
-          type: "button",
-          "aria-label": "Open download menu",
-          "aria-haspopup": "menu",
-          "aria-expanded": open,
-          className: "inline-flex h-[34px] w-[34px] items-center justify-center rounded-md border border-input bg-background text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-          onClick: () => setOpen((current) => !current),
-          children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: open ? UiChevronUp.UiChevronUp : UiChevronDown.UiChevronDown, className: "text-sm" })
-        }
-      )
-    ] }),
-    open && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+  const formats = react.useMemo(
+    () => exportFormatOptions({ url, download }),
+    [download, url]
+  );
+  const scopes = react.useMemo(() => exportScopeOptions(download), [download]);
+  if (formats.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
       {
-        role: "menu",
-        className: "absolute right-0 top-[calc(100%+0.375rem)] z-50 min-w-[18rem] rounded-md border border-border bg-popover p-1.5 text-popover-foreground shadow-lg shadow-black/5",
-        children: scopes.map((scope, scopeIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: utils.cn(
-              scopeIndex > 0 && "mt-1 border-t border-border pt-1"
-            ),
-            children: [
-              scope && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: downloadSection(scope) }),
-              formats.map((format) => {
-                const meta = getRemoteFormatMeta(format);
-                const description = downloadDescription(
-                  format,
-                  scope,
-                  download
-                );
-                return /* @__PURE__ */ jsxRuntime.jsxs(
-                  "button",
-                  {
-                    type: "button",
-                    role: "menuitem",
-                    className: "flex w-full items-start gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none",
-                    onClick: () => {
-                      triggerDownload(
-                        buildDownloadUrl(url, format, download == null ? void 0 : download.label, scope)
-                      );
-                      setOpen(false);
-                    },
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        Icon.Icon,
-                        {
-                          icon: meta.icon,
-                          className: utils.cn(
-                            "mt-0.5 shrink-0 text-sm",
-                            meta.iconClassName ?? "text-muted-foreground"
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: meta.label }),
-                        description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs text-muted-foreground", children: description })
-                      ] })
-                    ]
-                  },
-                  `${scope ?? "legacy"}-${format}`
-                );
-              })
-            ]
-          },
-          scope ?? "legacy"
-        ))
+        type: "button",
+        "aria-label": (download == null ? void 0 : download.label) ? `Export ${download.label}` : "Export",
+        className: "inline-flex items-center gap-2 rounded-md border border-input bg-background px-3 py-1.5 text-xs font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        onClick: () => setOpen(true),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiCloudDownload.UiCloudDownload, className: "text-sm" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Export" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ClickyExportDialog.ClickyExportDialog,
+      {
+        open,
+        onClose: () => setOpen(false),
+        formats,
+        scopes,
+        onDownload: ({
+          format,
+          scope
+        }) => runClickyDownload({
+          url,
+          format,
+          scope,
+          ...download ? { download } : {}
+        })
       }
     )
   ] });
@@ -641,8 +629,11 @@ function fetchRemoteFormat(url, format) {
     }
   }).then(async (response) => {
     if (!response.ok) {
-      throw new Error(
-        `Request failed with ${response.status} ${response.statusText}`.trim()
+      throw apiClient.errorFromResponse(
+        response,
+        "GET",
+        url,
+        await apiClient.readResponseBody(response, "json")
       );
     }
     const contentType = response.headers.get("Content-Type") ?? "";
@@ -914,9 +905,6 @@ function getDownloadScopes(download) {
   var _a;
   return ((_a = download == null ? void 0 : download.scopes) == null ? void 0 : _a.length) ? download.scopes : [void 0];
 }
-function downloadSection(scope) {
-  return scope === "all" ? "Download all rows" : "Download current page";
-}
 function downloadDescription(format, scope, download) {
   var _a;
   const maxRows = (_a = download == null ? void 0 : download.formatMaxRows) == null ? void 0 : _a[format];
@@ -931,28 +919,83 @@ function downloadDescription(format, scope, download) {
   }
   return void 0;
 }
-function getDownloadMenuActions({
+function exportFormatOptions({
   url,
   download
 }) {
-  const formats = getDownloadFormats({ url, download });
-  if (!url || formats.length === 0) return [];
-  return getDownloadScopes(download).flatMap(
-    (scope) => formats.map((format) => {
-      const meta = getRemoteFormatMeta(format);
-      return {
-        id: `download-${scope ?? "legacy"}-${format}`,
-        label: meta.label,
-        description: downloadDescription(format, scope, download),
-        icon: meta.icon,
-        ...meta.iconClassName ? { iconClassName: meta.iconClassName } : {},
-        ...scope ? { section: downloadSection(scope) } : {},
-        onSelect: () => triggerDownload(
-          buildDownloadUrl(url, format, download == null ? void 0 : download.label, scope)
-        )
-      };
-    })
-  );
+  if (!url) return [];
+  return getDownloadFormats({ url, download }).map((format) => {
+    const meta = getRemoteFormatMeta(format);
+    return {
+      format,
+      label: meta.label,
+      description: meta.description,
+      icon: meta.icon,
+      ...meta.iconClassName ? { iconClassName: meta.iconClassName } : {}
+    };
+  });
+}
+function exportScopeOptions(download, pagination) {
+  return getDownloadScopes(download).map((scope) => ({
+    scope,
+    label: scope === "all" || scope === void 0 ? allRowsLabel(pagination) : "Current page",
+    note: (format) => downloadDescription(format, scope, download)
+  }));
+}
+function allRowsLabel(pagination) {
+  const total = pagination == null ? void 0 : pagination.total;
+  if (total === void 0) return "All rows";
+  const count = total.toLocaleString();
+  return (pagination == null ? void 0 : pagination.totalRelation) === "gte" ? `All ${count}+ rows` : `All ${count} rows`;
+}
+async function runClickyDownload({
+  url,
+  format,
+  scope,
+  download
+}) {
+  let failure = "";
+  await prepareDownload({
+    url,
+    format,
+    ...scope ? { scope } : {},
+    ...download ? { download } : {},
+    onError: (message) => {
+      failure = message;
+    }
+  });
+  if (failure) throw new Error(failure);
+}
+async function prepareDownload({
+  url,
+  format,
+  scope,
+  download,
+  onPending,
+  onError
+}) {
+  onError == null ? void 0 : onError("");
+  onPending == null ? void 0 : onPending(true);
+  try {
+    const prepared = (download == null ? void 0 : download.prepare) ? await download.prepare({ format, ...scope ? { scope } : {} }) : { url, ...(download == null ? void 0 : download.label) ? { label: download.label } : {} };
+    if (!prepared.url.trim()) {
+      throw new Error("The prepared download URL is empty");
+    }
+    triggerDownload(
+      buildDownloadUrl(
+        prepared.url,
+        format,
+        prepared.label ?? (download == null ? void 0 : download.label),
+        scope
+      )
+    );
+  } catch (error) {
+    onError == null ? void 0 : onError(
+      error instanceof Error ? error.message : "Preparing the download failed"
+    );
+  } finally {
+    onPending == null ? void 0 : onPending(false);
+  }
 }
 function getRemoteFormatMeta(format) {
   switch (format) {
@@ -1853,39 +1896,16 @@ function normalizeAdmonitionSeverity(severity) {
   }
   return "note";
 }
+const ADMONITION_VARIANTS = {
+  info: "note",
+  tip: "tip",
+  warning: "warning",
+  danger: "caution",
+  note: "default"
+};
 function admonitionToneClassName(severity) {
-  switch (severity) {
-    case "info":
-      return {
-        container: "border-sky-500/30 bg-sky-500/5",
-        title: "text-sky-800 dark:text-sky-300",
-        body: "text-sky-950/80 dark:text-sky-100/80"
-      };
-    case "tip":
-      return {
-        container: "border-emerald-500/30 bg-emerald-500/5",
-        title: "text-emerald-800 dark:text-emerald-300",
-        body: "text-emerald-950/80 dark:text-emerald-100/80"
-      };
-    case "warning":
-      return {
-        container: "border-yellow-500/40 bg-yellow-500/10",
-        title: "text-yellow-800 dark:text-yellow-300",
-        body: "text-yellow-950/80 dark:text-yellow-100/80"
-      };
-    case "danger":
-      return {
-        container: "border-destructive/40 bg-destructive/10",
-        title: "text-destructive",
-        body: "text-destructive/90"
-      };
-    default:
-      return {
-        container: "border-border bg-muted/30",
-        title: "text-foreground",
-        body: "text-muted-foreground"
-      };
-  }
+  const styles = calloutTones.calloutVariantStyles(ADMONITION_VARIANTS[severity] ?? "default");
+  return { container: styles.subtle, title: styles.title, body: styles.content };
 }
 function ClickyFootnoteRef({ node }) {
   const id = normalizeFootnoteId(node.id);
@@ -2039,8 +2059,12 @@ function ClickyTable({
   cellFilters,
   onCellFilterChange,
   pagination,
+  sort,
+  onSortChange,
+  infinite,
   rowSelection,
-  menuActions
+  menuActions,
+  loading
 }) {
   const runtime = react.useContext(ClickyRuntimeContext);
   const rowClick = onTableRowClick ?? runtime.onTableRowClick;
@@ -2052,8 +2076,12 @@ function ClickyTable({
   const effectiveCellFilters = cellFilters ?? runtime.tableCellFilters;
   const effectiveCellFilterChange = onCellFilterChange ?? runtime.onTableCellFilterChange;
   const effectivePagination = pagination ?? runtime.tablePagination;
+  const effectiveSort = sort !== void 0 ? sort : runtime.tableSort;
+  const effectiveSortChange = onSortChange ?? runtime.onTableSortChange;
+  const effectiveInfinite = infinite ?? runtime.tableInfinite;
   const effectiveRowSelection = rowSelection ?? runtime.tableRowSelection;
   const effectiveMenuActions = menuActions ?? runtime.tableMenuActions;
+  const effectiveLoading = loading ?? runtime.tableLoading;
   if (columns.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: "No data" });
   }
@@ -2069,7 +2097,7 @@ function ClickyTable({
       accessor: (row) => row.cells[column.name],
       label: column.header ? /* @__PURE__ */ jsxRuntime.jsx(ClickyNodeRenderer, { node: column.header }) : column.label || prettifyName(column.name),
       ...column.align ? { align: column.align } : {},
-      ...column.sortable !== void 0 ? { sortable: column.sortable } : {},
+      ...effectiveSortChange ? { sortable: Boolean(column.sortKey) } : column.sortable !== void 0 ? { sortable: column.sortable } : {},
       ...column.filterable !== void 0 ? { filterable: column.filterable } : {},
       ...column.filterKey ? { filterKey: column.filterKey } : {},
       serverFilterValue: (value) => {
@@ -2117,7 +2145,34 @@ function ClickyTable({
       filterValue: (value) => clickyNodeText(value)
     };
   });
-  const defaultSortColumn = columns.find((column) => column.sortable !== false) ?? columns[0];
+  const defaultSortColumn = effectivePagination || effectiveSortChange ? void 0 : columns.find((column) => column.sortable !== false) ?? columns[0];
+  const controlledTableSort = effectiveSort ? (() => {
+    const column = columns.find(
+      (candidate) => candidate.sortKey === effectiveSort.key
+    );
+    if (!column) {
+      throw new Error(
+        `Server sort key ${effectiveSort.key} does not match a Clicky column`
+      );
+    }
+    return { key: `cells.${column.name}`, dir: effectiveSort.dir };
+  })() : effectiveSort === null ? null : void 0;
+  const onControlledTableSortChange = effectiveSortChange ? (next) => {
+    if (!next) {
+      effectiveSortChange(null);
+      return;
+    }
+    const columnName = next.key.startsWith("cells.") ? next.key.slice("cells.".length) : next.key;
+    const column = columns.find(
+      (candidate) => candidate.name === columnName
+    );
+    if (!(column == null ? void 0 : column.sortKey)) {
+      throw new Error(
+        `Clicky column ${columnName} does not declare a server sort key`
+      );
+    }
+    effectiveSortChange({ key: column.sortKey, dir: next.dir });
+  } : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     DataTable.DataTable,
     {
@@ -2131,6 +2186,8 @@ function ClickyTable({
           dir: "asc"
         }
       } : {},
+      ...controlledTableSort !== void 0 ? { sort: controlledTableSort } : {},
+      ...onControlledTableSortChange ? { onSortChange: onControlledTableSortChange, manualSort: true } : {},
       getRowId: (row, index) => (effectiveRowSelection == null ? void 0 : effectiveRowSelection.getRowId(row, index)) ?? `${index}-${columns.map((column) => clickyNodeText(row.cells[column.name])).filter(Boolean).join("|")}`,
       ...effectiveRowSelection ? { rowSelection: effectiveRowSelection } : {},
       ...rowClick ? { onRowClick: rowClick } : {},
@@ -2144,7 +2201,9 @@ function ClickyTable({
       ...effectiveCellFilters ? { cellFilters: effectiveCellFilters } : {},
       ...effectiveCellFilterChange ? { onCellFilterChange: effectiveCellFilterChange } : {},
       ...effectivePagination ? { pagination: effectivePagination } : {},
-      ...effectiveMenuActions ? { menuActions: effectiveMenuActions } : {}
+      ...effectiveInfinite ? { infinite: effectiveInfinite } : {},
+      ...effectiveMenuActions ? { menuActions: effectiveMenuActions } : {},
+      ...effectiveLoading !== void 0 ? { loading: effectiveLoading } : {}
     }
   );
 }
@@ -2643,6 +2702,9 @@ function substituteOperationPath(path, params) {
   const remaining = { ...params };
   for (const [key, value] of Object.entries(params)) {
     if (url.pathname.includes(`{${key}}`)) {
+      if (Array.isArray(value)) {
+        throw new Error(`Path parameter ${key} must be a scalar value`);
+      }
       url.pathname = url.pathname.replace(
         `{${key}}`,
         encodeURIComponent(value)
@@ -2651,7 +2713,7 @@ function substituteOperationPath(path, params) {
     }
   }
   for (const [key, value] of Object.entries(remaining)) {
-    url.searchParams.set(key, value);
+    url.searchParams.set(key, Array.isArray(value) ? value.join(",") : value);
   }
   return `${url.pathname}${url.search}`;
 }