@flanksource/clicky-ui 0.2.9 → 0.2.11

package/dist/data/Clicky.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
-import { useState, useContext, useMemo, useEffect, Fragment as Fragment$1, createContext, useRef } from "react";
+import { useState, useMemo, useContext, useEffect, Fragment as Fragment$1, createContext, useRef } from "react";
 import { FilterForm } from "../rpc/FilterForm.js";
 import { parseJsonBody } from "../rpc/classify.js";
 import { packParameterValues, pruneParameterValues } from "../rpc/formMetadata.js";
@@ -25,6 +25,10 @@ import { UiChevronDown } from "../icons/components/UiChevronDown.js";
 import { UiComment } from "../icons/components/UiComment.js";
 import { UiTable } from "../icons/components/UiTable.js";
 import { UiFileCode } from "../icons/components/UiFileCode.js";
+import { UiFileSpreadsheet } from "../icons/components/UiFileSpreadsheet.js";
+import { UiMarkdown } from "../icons/components/UiMarkdown.js";
+import { UiFileText } from "../icons/components/UiFileText.js";
+import { UiJson } from "../icons/components/UiJson.js";
 import { UiEye } from "../icons/components/UiEye.js";
 const CLICKY_PRIMARY_VIEW_FORMATS = ["clicky", "json"];
 const CLICKY_OVERFLOW_VIEW_FORMATS = [
@@ -37,12 +41,20 @@ const CLICKY_OVERFLOW_VIEW_FORMATS = [
   "excel",
   "slack"
 ];
-const CLICKY_DOWNLOAD_FORMATS = ["json", "clicky", ...CLICKY_OVERFLOW_VIEW_FORMATS];
+const CLICKY_DOWNLOAD_FORMATS = [
+  "yaml",
+  "json",
+  "csv",
+  "pdf",
+  "markdown"
+];
 const clickyRuntimeContextDefault = {
   operations: [],
   operationsLoading: false
 };
-const ClickyRuntimeContext = createContext(clickyRuntimeContextDefault);
+const ClickyRuntimeContext = createContext(
+  clickyRuntimeContextDefault
+);
 function Clicky(props) {
   const [queryClient] = useState(
     () => new QueryClient({
@@ -54,6 +66,10 @@ function Clicky(props) {
       }
     })
   );
+  const tableMenuActions = useMemo(
+    () => getDownloadMenuActions({ url: props.url, download: props.download }),
+    [props.download, props.url]
+  );
   const content = /* @__PURE__ */ jsx(
     ClickyRuntimeProvider,
     {
@@ -65,6 +81,7 @@ function Clicky(props) {
       ...props.timeRange ? { tableTimeRange: props.timeRange } : {},
       ...props.externalFilters ? { tableExternalFilters: props.externalFilters } : {},
       ...props.pagination ? { tablePagination: props.pagination } : {},
+      ...tableMenuActions.length > 0 ? { tableMenuActions } : {},
       children: props.url ? /* @__PURE__ */ jsx(ClickyRemoteRenderer, { ...props, url: props.url }) : /* @__PURE__ */ jsx(
         ClickyContent,
         {
@@ -88,10 +105,11 @@ function ClickyRuntimeProvider({
   tableTimeRange,
   tableExternalFilters,
   tablePagination,
+  tableMenuActions,
   children
 }) {
   if (!commandRuntime) {
-    const hasOverrides = onTableRowClick || getTableRowHref || isTableRowClickable || tableSearch || tableTimeRange || tableExternalFilters || tablePagination;
+    const hasOverrides = onTableRowClick || getTableRowHref || isTableRowClickable || tableSearch || tableTimeRange || tableExternalFilters || tablePagination || tableMenuActions;
     return /* @__PURE__ */ jsx(
       ClickyRuntimeContext.Provider,
       {
@@ -103,7 +121,8 @@ function ClickyRuntimeProvider({
           tableSearch,
           tableTimeRange,
           tableExternalFilters,
-          tablePagination
+          tablePagination,
+          tableMenuActions
         } : clickyRuntimeContextDefault,
         children
       }
@@ -120,6 +139,7 @@ function ClickyRuntimeProvider({
       ...tableTimeRange ? { tableTimeRange } : {},
       ...tableExternalFilters ? { tableExternalFilters } : {},
       ...tablePagination ? { tablePagination } : {},
+      ...tableMenuActions ? { tableMenuActions } : {},
       children
     }
   );
@@ -133,6 +153,7 @@ function ClickyCommandRuntimeProvider({
   tableTimeRange,
   tableExternalFilters,
   tablePagination,
+  tableMenuActions,
   children
 }) {
   const { operations, isLoading } = useOperations(commandRuntime.client);
@@ -146,6 +167,7 @@ function ClickyCommandRuntimeProvider({
       tableTimeRange,
       tableExternalFilters,
       tablePagination,
+      tableMenuActions,
       operations,
       operationsLoading: isLoading
     }),
@@ -159,7 +181,8 @@ function ClickyCommandRuntimeProvider({
       tableSearch,
       tableTimeRange,
       tableExternalFilters,
-      tablePagination
+      tablePagination,
+      tableMenuActions
     ]
   );
   return /* @__PURE__ */ jsx(ClickyRuntimeContext.Provider, { value, children });
@@ -192,13 +215,22 @@ function ClickyRemoteRenderer({
   className
 }) {
   var _a, _b;
-  const availableViews = useMemo(() => getAvailableViews({ data, url, view }), [data, url, view]);
-  const primaryViews = useMemo(() => availableViews.filter(isPrimaryViewFormat), [availableViews]);
+  const availableViews = useMemo(
+    () => getAvailableViews({ data, url, view }),
+    [data, url, view]
+  );
+  const primaryViews = useMemo(
+    () => availableViews.filter(isPrimaryViewFormat),
+    [availableViews]
+  );
   const overflowViews = useMemo(
     () => availableViews.filter(isOverflowViewFormat),
     [availableViews]
   );
-  const downloadFormats = useMemo(() => getDownloadFormats({ url, download }), [download, url]);
+  const downloadFormats = useMemo(
+    () => getDownloadFormats({ url, download }),
+    [download, url]
+  );
   const [activeView, setActiveView] = useState(
     () => availableViews[0] ?? "clicky"
   );
@@ -217,25 +249,34 @@ function ClickyRemoteRenderer({
   const fallbackJsonData = useMemo(() => parseJsonValue(data), [data]);
   const effectiveJsonData = activeView === "json" && ((_b = activeQuery.data) == null ? void 0 : _b.kind) === "text" ? parseJsonValue(activeQuery.data.text) : fallbackJsonData;
   const activeOverflowView = isOverflowViewFormat(activeView) ? activeView : null;
-  const canDownload = downloadFormats.length > 0;
+  const downloadHandledByTable = clickyPayloadHasTable(effectiveClickyData);
+  const canDownload = downloadFormats.length > 0 && !downloadHandledByTable;
   const loadingMessage = `Fetching ${formattedUrl}`;
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-density-3", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 rounded-md border border-border bg-muted/20 px-density-3 py-density-2", children: [
-      primaryViews.length > 1 && /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": "Clicky view mode", className: "flex flex-wrap gap-1", children: primaryViews.map((mode) => /* @__PURE__ */ jsx(
-        "button",
+      primaryViews.length > 1 && /* @__PURE__ */ jsx(
+        "div",
         {
-          type: "button",
-          role: "radio",
-          "aria-checked": activeView === mode,
-          onClick: () => setActiveView(mode),
-          className: cn(
-            "rounded-md border px-2.5 py-1 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-            activeView === mode ? "border-foreground/20 bg-accent text-foreground" : "border-transparent text-muted-foreground hover:border-foreground/20 hover:text-foreground"
-          ),
-          children: formatViewLabel(mode)
-        },
-        mode
-      )) }),
+          role: "radiogroup",
+          "aria-label": "Clicky view mode",
+          className: "flex flex-wrap gap-1",
+          children: primaryViews.map((mode) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": activeView === mode,
+              onClick: () => setActiveView(mode),
+              className: cn(
+                "rounded-md border px-2.5 py-1 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                activeView === mode ? "border-foreground/20 bg-accent text-foreground" : "border-transparent text-muted-foreground hover:border-foreground/20 hover:text-foreground"
+              ),
+              children: formatViewLabel(mode)
+            },
+            mode
+          ))
+        }
+      ),
       overflowViews.length > 0 && /* @__PURE__ */ jsx(
         ClickyViewMenu,
         {
@@ -246,7 +287,14 @@ function ClickyRemoteRenderer({
       ),
       /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
         shouldFetchRemoteView(activeView) && activeQuery.isFetching && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Refreshing…" }),
-        canDownload && /* @__PURE__ */ jsx(ClickyDownloadMenu, { url, formats: downloadFormats, label: download == null ? void 0 : download.label })
+        canDownload && /* @__PURE__ */ jsx(
+          ClickyDownloadMenu,
+          {
+            url,
+            formats: downloadFormats,
+            label: download == null ? void 0 : download.label
+          }
+        )
       ] })
     ] }),
     activeView === "pdf" ? /* @__PURE__ */ jsx(ClickyPdfPreview, { src: formattedUrl }) : activeView === "html" ? /* @__PURE__ */ jsx(ClickyHtmlPreview, { src: formattedUrl }) : activeView === "excel" ? /* @__PURE__ */ jsx(
@@ -290,7 +338,13 @@ function ClickyRemoteRenderer({
         }
       ),
       /* @__PURE__ */ jsx(ClickyJsonTree, { value: effectiveJsonData })
-    ] }) : activeQuery.isPending ? /* @__PURE__ */ jsx(ClickyNotice, { title: `Loading ${formatViewLabel(activeView)}`, message: loadingMessage }) : activeQuery.isError ? /* @__PURE__ */ jsx(
+    ] }) : activeQuery.isPending ? /* @__PURE__ */ jsx(
+      ClickyNotice,
+      {
+        title: `Loading ${formatViewLabel(activeView)}`,
+        message: loadingMessage
+      }
+    ) : activeQuery.isError ? /* @__PURE__ */ jsx(
       ClickyNotice,
       {
         title: `${formatViewLabel(activeView)} request failed`,
@@ -355,15 +409,22 @@ function ClickyViewMenu({
                   {
                     icon: meta.icon,
                     className: cn(
-                      "mt-0.5 shrink-0 text-base text-muted-foreground",
-                      active && "text-foreground"
+                      "mt-0.5 shrink-0 text-base",
+                      meta.iconClassName ?? "text-muted-foreground",
+                      active && !meta.iconClassName && "text-foreground"
                     )
                   }
                 ),
                 /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
                   /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between gap-3", children: [
                     /* @__PURE__ */ jsx("span", { className: "font-medium", children: meta.label }),
-                    active && /* @__PURE__ */ jsx(Icon, { icon: UiCheck, className: "text-xs text-muted-foreground" })
+                    active && /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        icon: UiCheck,
+                        className: "text-xs text-muted-foreground"
+                      }
+                    )
                   ] }),
                   /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: meta.description })
                 ] })
@@ -395,7 +456,7 @@ function ClickyDownloadMenu({
           type: "button",
           "aria-label": label ? `Download ${primaryMeta.label} ${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: () => submitDownloadRequest(buildFormatUrl(url, primaryFormat)),
+          onClick: () => triggerDownload(buildDownloadUrl(url, primaryFormat, label)),
           children: [
             /* @__PURE__ */ jsx(Icon, { icon: UiCloudDownload, className: "text-sm" }),
             /* @__PURE__ */ jsx("span", { children: `Download ${primaryMeta.label}` })
@@ -429,10 +490,10 @@ function ClickyDownloadMenu({
               type: "button",
               role: "menuitem",
               className: cn(
-                "flex w-full items-start gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none"
+                "flex w-full items-center 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: () => {
-                submitDownloadRequest(buildFormatUrl(url, format));
+                triggerDownload(buildDownloadUrl(url, format, label));
                 setOpen(false);
               },
               children: [
@@ -440,13 +501,13 @@ function ClickyDownloadMenu({
                   Icon,
                   {
                     icon: meta.icon,
-                    className: "mt-0.5 shrink-0 text-base text-muted-foreground"
+                    className: cn(
+                      "shrink-0 text-sm",
+                      meta.iconClassName ?? "text-muted-foreground"
+                    )
                   }
                 ),
-                /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ jsx("span", { className: "font-medium", children: meta.label }),
-                  /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: meta.description })
-                ] })
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx("span", { className: "font-medium", children: meta.label }) })
               ]
             },
             format
@@ -501,7 +562,9 @@ function fetchRemoteFormat(url, format) {
     }
   }).then(async (response) => {
     if (!response.ok) {
-      throw new Error(`Request failed with ${response.status} ${response.statusText}`.trim());
+      throw new Error(
+        `Request failed with ${response.status} ${response.statusText}`.trim()
+      );
     }
     const contentType = response.headers.get("Content-Type") ?? "";
     if (format === "excel") {
@@ -578,16 +641,41 @@ function ClickyPdfPreview({ src }) {
   return /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-md border border-border bg-background", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border px-3 py-2 text-xs text-muted-foreground", children: [
       /* @__PURE__ */ jsx("span", { children: "PDF preview" }),
-      /* @__PURE__ */ jsx("a", { href: src, target: "_blank", rel: "noreferrer", className: "text-primary hover:underline", children: "Open in new tab" })
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: src,
+          target: "_blank",
+          rel: "noreferrer",
+          className: "text-primary hover:underline",
+          children: "Open in new tab"
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsx("iframe", { title: "Clicky PDF preview", src, className: "h-[720px] w-full bg-white" })
+    /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        title: "Clicky PDF preview",
+        src,
+        className: "h-[720px] w-full bg-white"
+      }
+    )
   ] });
 }
 function ClickyHtmlPreview({ src }) {
   return /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-md border border-border bg-background", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border px-3 py-2 text-xs text-muted-foreground", children: [
       /* @__PURE__ */ jsx("span", { children: "HTML preview" }),
-      /* @__PURE__ */ jsx("a", { href: src, target: "_blank", rel: "noreferrer", className: "text-primary hover:underline", children: "Open in new tab" })
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: src,
+          target: "_blank",
+          rel: "noreferrer",
+          className: "text-primary hover:underline",
+          children: "Open in new tab"
+        }
+      )
     ] }),
     /* @__PURE__ */ jsx(
       "iframe",
@@ -614,7 +702,16 @@ function ClickyUnsupportedPreview({
           message,
           " "
         ] }),
-        /* @__PURE__ */ jsx("a", { href, target: "_blank", rel: "noreferrer", className: "text-primary hover:underline", children: "Open format" })
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href,
+            target: "_blank",
+            rel: "noreferrer",
+            className: "text-primary hover:underline",
+            children: "Open format"
+          }
+        )
       ] })
     }
   );
@@ -636,7 +733,10 @@ function ClickyRemotePreview({
     }
   );
 }
-function ClickyTextPreview({ title, content }) {
+function ClickyTextPreview({
+  title,
+  content
+}) {
   return /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-md border border-border bg-background", children: [
     /* @__PURE__ */ jsx("div", { className: "border-b border-border px-3 py-2 text-xs text-muted-foreground", children: title }),
     /* @__PURE__ */ jsx(
@@ -649,7 +749,10 @@ function ClickyTextPreview({ title, content }) {
     )
   ] });
 }
-function ClickyJsonTree({ value, emptyLabel = "JSON" }) {
+function ClickyJsonTree({
+  value,
+  emptyLabel = "JSON"
+}) {
   const roots = useMemo(() => buildJsonTree(value), [value]);
   if (value === void 0) {
     return /* @__PURE__ */ jsx(
@@ -727,6 +830,23 @@ function getDownloadFormats({
   }
   return [...CLICKY_DOWNLOAD_FORMATS];
 }
+function getDownloadMenuActions({
+  url,
+  download
+}) {
+  const formats = getDownloadFormats({ url, download });
+  if (!url || formats.length === 0) return [];
+  return formats.map((format) => {
+    const meta = getRemoteFormatMeta(format);
+    return {
+      id: `download-${format}`,
+      label: meta.label,
+      icon: meta.icon,
+      ...meta.iconClassName ? { iconClassName: meta.iconClassName } : {},
+      onSelect: () => triggerDownload(buildDownloadUrl(url, format, download == null ? void 0 : download.label))
+    };
+  });
+}
 function getRemoteFormatMeta(format) {
   switch (format) {
     case "clicky":
@@ -740,14 +860,15 @@ function getRemoteFormatMeta(format) {
       return {
         label: "JSON",
         description: "Plain JSON for inspecting the raw response body",
-        icon: UiFileCode,
+        icon: UiJson,
         accept: "application/json, text/plain;q=0.8,*/*;q=0.7"
       };
     case "pdf":
       return {
         label: "PDF",
         description: "Portable document for sharing and printing",
-        icon: UiFileCode,
+        icon: UiFileText,
+        iconClassName: "text-rose-600 dark:text-rose-400",
         accept: "application/pdf, */*;q=0.7"
       };
     case "html":
@@ -761,7 +882,7 @@ function getRemoteFormatMeta(format) {
       return {
         label: "Markdown",
         description: "Markdown formatted for docs, comments, and chat",
-        icon: UiFileCode,
+        icon: UiMarkdown,
         accept: "text/markdown, text/plain;q=0.8,*/*;q=0.7"
       };
     case "yaml":
@@ -769,13 +890,15 @@ function getRemoteFormatMeta(format) {
         label: "YAML",
         description: "YAML for config-friendly inspection and export",
         icon: UiFileCode,
+        iconClassName: "text-violet-600 dark:text-violet-400",
         accept: "application/yaml, text/yaml;q=0.9, text/plain;q=0.8,*/*;q=0.7"
       };
     case "csv":
       return {
         label: "CSV",
         description: "Comma-separated values for spreadsheets and imports",
-        icon: UiTable,
+        icon: UiFileSpreadsheet,
+        iconClassName: "text-emerald-600 dark:text-emerald-400",
         accept: "text/csv, text/plain;q=0.8,*/*;q=0.7"
       };
     case "pretty":
@@ -807,12 +930,66 @@ function formatViewLabel(mode) {
 function buildFormatUrl(url, format) {
   const base = typeof window === "undefined" ? "http://localhost" : window.location.origin;
   const resolved = new URL(url, base);
-  resolved.searchParams.set("format", format === "clicky" ? "clicky-json" : format);
+  resolved.searchParams.set(
+    "format",
+    format === "clicky" ? "clicky-json" : format
+  );
   if (isAbsoluteUrl(url)) {
     return resolved.toString();
   }
   return `${resolved.pathname}${resolved.search}${resolved.hash}`;
 }
+function buildDownloadUrl(url, format, label) {
+  const formatted = buildFormatUrl(url, format);
+  const base = typeof window === "undefined" ? "http://localhost" : window.location.origin;
+  const resolved = new URL(formatted, base);
+  resolved.searchParams.set("filename", downloadFilename(url, format, label));
+  resolved.searchParams.set("_download", Date.now().toString());
+  if (isAbsoluteUrl(formatted)) {
+    return resolved.toString();
+  }
+  return `${resolved.pathname}${resolved.search}${resolved.hash}`;
+}
+function downloadFilename(url, format, label) {
+  const stem = sanitizeFilenameStem(
+    label || filenameStemFromUrl(url) || "clicky-output"
+  );
+  return `${stem}${downloadExtension(format)}`;
+}
+function filenameStemFromUrl(url) {
+  const base = typeof window === "undefined" ? "http://localhost" : window.location.origin;
+  const resolved = new URL(url, base);
+  const segment = resolved.pathname.split("/").filter(Boolean).at(-1);
+  return segment ?? "";
+}
+function sanitizeFilenameStem(value) {
+  const cleaned = value.trim().replace(/\.[a-z0-9]+$/i, "").replace(/[^a-z0-9._-]+/gi, "-").replace(/-+/g, "-").replace(/^[._-]+|[._-]+$/g, "");
+  return cleaned || "clicky-output";
+}
+function downloadExtension(format) {
+  switch (format) {
+    case "clicky":
+      return ".clicky.json";
+    case "json":
+      return ".json";
+    case "pdf":
+      return ".pdf";
+    case "html":
+      return ".html";
+    case "markdown":
+      return ".md";
+    case "yaml":
+      return ".yaml";
+    case "csv":
+      return ".csv";
+    case "pretty":
+      return ".txt";
+    case "excel":
+      return ".xlsx";
+    case "slack":
+      return ".slack.json";
+  }
+}
 function shouldFetchRemoteView(format) {
   return format !== "pdf" && format !== "html" && format !== "excel";
 }
@@ -861,12 +1038,36 @@ function parseJsonValue(data) {
     return data;
   }
 }
+function clickyPayloadHasTable(data) {
+  if (data === void 0) return false;
+  const parsed = parseClickyData(data);
+  return parsed.ok ? clickyNodeHasTable(parsed.document.node) : false;
+}
+function clickyNodeHasTable(node) {
+  var _a, _b, _c, _d;
+  if (!node) return false;
+  if (node.kind === "table") return true;
+  if ((_a = node.children) == null ? void 0 : _a.some(clickyNodeHasTable)) return true;
+  if ((_b = node.items) == null ? void 0 : _b.some(clickyNodeHasTable)) return true;
+  if ((_c = node.fields) == null ? void 0 : _c.some((field) => clickyNodeHasTable(field.value)))
+    return true;
+  if (node.label && clickyNodeHasTable(node.label)) return true;
+  if (node.content && clickyNodeHasTable(node.content)) return true;
+  if (node.tooltip && clickyNodeHasTable(node.tooltip)) return true;
+  if ((_d = node.rows) == null ? void 0 : _d.some((row) => row.detail && clickyNodeHasTable(row.detail)))
+    return true;
+  return false;
+}
 function buildJsonTree(value) {
   if (Array.isArray(value)) {
-    return value.map((entry, index) => buildJsonTreeNode(String(index), entry, `$[${index}]`));
+    return value.map(
+      (entry, index) => buildJsonTreeNode(String(index), entry, `$[${index}]`)
+    );
   }
   if (isPlainObject(value)) {
-    return Object.entries(value).map(([key, entry]) => buildJsonTreeNode(key, entry, `$.${key}`));
+    return Object.entries(value).map(
+      ([key, entry]) => buildJsonTreeNode(key, entry, `$.${key}`)
+    );
   }
   if (value === void 0) {
     return [];
@@ -915,15 +1116,23 @@ function summarizeJsonValue(value) {
 function isPlainObject(value) {
   return value != null && typeof value === "object" && !Array.isArray(value);
 }
-function submitDownloadRequest(url) {
+const CLICKY_DOWNLOAD_FRAME_ID = "clicky-download-frame";
+function triggerDownload(url) {
   if (typeof document === "undefined") return;
-  const form = document.createElement("form");
-  form.method = "GET";
-  form.action = url;
-  form.style.display = "none";
-  document.body.appendChild(form);
-  form.submit();
-  document.body.removeChild(form);
+  let frame = document.getElementById(
+    CLICKY_DOWNLOAD_FRAME_ID
+  );
+  if (!frame) {
+    frame = document.createElement("iframe");
+    frame.id = CLICKY_DOWNLOAD_FRAME_ID;
+    frame.name = CLICKY_DOWNLOAD_FRAME_ID;
+    frame.title = "Clicky download target";
+    frame.setAttribute("aria-hidden", "true");
+    frame.tabIndex = -1;
+    frame.style.display = "none";
+    document.body.appendChild(frame);
+  }
+  frame.src = url;
 }
 function isAbsoluteUrl(url) {
   return /^[a-z][a-z\d+\-.]*:/i.test(url) || url.startsWith("//");
@@ -1016,7 +1225,10 @@ function ClickyComment({ node }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("mt-1 text-xs leading-snug text-muted-foreground", (_d = node.style) == null ? void 0 : _d.className),
+      className: cn(
+        "mt-1 text-xs leading-snug text-muted-foreground",
+        (_d = node.style) == null ? void 0 : _d.className
+      ),
       style: inlineStyle,
       title: ((_e = node.tooltip) == null ? void 0 : _e.plain) ?? text,
       children: content
@@ -1218,11 +1430,17 @@ function ClickyCommandDialog({
     setIsExecuting(true);
     setError("");
     try {
-      const response = await executeClickyCommand(runtime.commandRuntime.client, operation, values);
+      const response = await executeClickyCommand(
+        runtime.commandRuntime.client,
+        operation,
+        values
+      );
       setResult(response);
     } catch (err) {
       setResult(null);
-      setError(err instanceof Error ? err.message : String(err ?? "Unknown error"));
+      setError(
+        err instanceof Error ? err.message : String(err ?? "Unknown error")
+      );
     } finally {
       setIsExecuting(false);
     }
@@ -1245,7 +1463,13 @@ function ClickyCommandDialog({
         operation ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 text-xs text-muted-foreground", children: [
           /* @__PURE__ */ jsx("span", { className: "rounded-md border border-border bg-muted px-2 py-1 font-medium uppercase", children: operation.method }),
           /* @__PURE__ */ jsx("code", { children: operation.path })
-        ] }) : runtime.operationsLoading ? /* @__PURE__ */ jsx(ClickyNotice, { title: "Loading commands", message: "Resolving the command definition." }) : /* @__PURE__ */ jsx(
+        ] }) : runtime.operationsLoading ? /* @__PURE__ */ jsx(
+          ClickyNotice,
+          {
+            title: "Loading commands",
+            message: "Resolving the command definition."
+          }
+        ) : /* @__PURE__ */ jsx(
           ClickyNotice,
           {
             title: "Unknown command",
@@ -1267,7 +1491,14 @@ function ClickyCommandDialog({
             onSubmit: runCommand
           }
         ) }),
-        error ? /* @__PURE__ */ jsx(ClickyNotice, { title: "Command failed", message: error, tone: "destructive" }) : /* @__PURE__ */ jsx(
+        error ? /* @__PURE__ */ jsx(
+          ClickyNotice,
+          {
+            title: "Command failed",
+            message: error,
+            tone: "destructive"
+          }
+        ) : /* @__PURE__ */ jsx(
           ClickyCommandResponse,
           {
             response: result,
@@ -1279,7 +1510,9 @@ function ClickyCommandDialog({
     }
   );
 }
-function ClickyAsyncCommandResult({ resolved }) {
+function ClickyAsyncCommandResult({
+  resolved
+}) {
   const runtime = useContext(ClickyRuntimeContext);
   const operation = resolved.operation;
   const parameters = (operation == null ? void 0 : operation.operation.parameters) ?? [];
@@ -1301,7 +1534,11 @@ function ClickyAsyncCommandResult({ resolved }) {
     ],
     enabled: runtime.commandRuntime != null && operation != null && missing.length === 0,
     retry: 0,
-    queryFn: async () => executeClickyCommand(runtime.commandRuntime.client, operation, initialValues)
+    queryFn: async () => executeClickyCommand(
+      runtime.commandRuntime.client,
+      operation,
+      initialValues
+    )
   });
   if (!runtime.commandRuntime) {
     return /* @__PURE__ */ jsx(
@@ -1315,7 +1552,13 @@ function ClickyAsyncCommandResult({ resolved }) {
   }
   if (!operation) {
     if (runtime.operationsLoading) {
-      return /* @__PURE__ */ jsx(ClickyNotice, { title: "Loading commands", message: "Resolving the command definition." });
+      return /* @__PURE__ */ jsx(
+        ClickyNotice,
+        {
+          title: "Loading commands",
+          message: "Resolving the command definition."
+        }
+      );
     }
     return /* @__PURE__ */ jsx(
       ClickyNotice,
@@ -1337,7 +1580,13 @@ function ClickyAsyncCommandResult({ resolved }) {
     );
   }
   if (query.isPending) {
-    return /* @__PURE__ */ jsx(ClickyNotice, { title: "Running command", message: "Loading Clicky response…" });
+    return /* @__PURE__ */ jsx(
+      ClickyNotice,
+      {
+        title: "Running command",
+        message: "Loading Clicky response…"
+      }
+    );
   }
   if (query.isError) {
     return /* @__PURE__ */ jsx(
@@ -1349,7 +1598,13 @@ function ClickyAsyncCommandResult({ resolved }) {
       }
     );
   }
-  return /* @__PURE__ */ jsx(ClickyCommandResponse, { response: query.data, emptyMessage: "No response body returned." });
+  return /* @__PURE__ */ jsx(
+    ClickyCommandResponse,
+    {
+      response: query.data,
+      emptyMessage: "No response body returned."
+    }
+  );
 }
 function ClickyCommandResponse({
   response,
@@ -1357,7 +1612,13 @@ function ClickyCommandResponse({
   emptyMessage
 }) {
   if (pending) {
-    return /* @__PURE__ */ jsx(ClickyNotice, { title: "Running command", message: "Loading Clicky response…" });
+    return /* @__PURE__ */ jsx(
+      ClickyNotice,
+      {
+        title: "Running command",
+        message: "Loading Clicky response…"
+      }
+    );
   }
   if (!response) {
     return /* @__PURE__ */ jsx(ClickyNotice, { title: "No response", message: emptyMessage });
@@ -1377,7 +1638,15 @@ function ClickyCommandResponse({
 function ClickyIconNode({ node }) {
   var _a;
   const inlineStyle = toInlineStyle(node.style, node.plain ?? node.unicode);
-  return /* @__PURE__ */ jsx("span", { style: inlineStyle, title: (_a = node.tooltip) == null ? void 0 : _a.plain, className: "inline-flex items-center", children: node.iconify ? /* @__PURE__ */ jsx(Icon, { name: node.iconify }) : /* @__PURE__ */ jsx("span", { children: node.unicode ?? node.plain }) });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: inlineStyle,
+      title: (_a = node.tooltip) == null ? void 0 : _a.plain,
+      className: "inline-flex items-center",
+      children: node.iconify ? /* @__PURE__ */ jsx(Icon, { name: node.iconify }) : /* @__PURE__ */ jsx("span", { children: node.unicode ?? node.plain })
+    }
+  );
 }
 function ClickyList({ node }) {
   const items = node.items ?? [];
@@ -1410,7 +1679,10 @@ function ClickyList({ node }) {
   return /* @__PURE__ */ jsx(Tag, { className: cn("ml-5 space-y-1 text-sm", listClass), children: items.map((item, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(ClickyNodeRenderer, { node: item }) }, index)) });
 }
 function ClickyMap({ node }) {
-  const fields = node.fields ?? [];
+  const runtime = useContext(ClickyRuntimeContext);
+  const fields = (node.fields ?? []).filter(
+    (field) => !(runtime.tablePagination && isPaginationMetadataField(field))
+  );
   if (fields.length === 0) return null;
   const inlineFields = fields.filter((field) => isInlineNode(field.value));
   const blockFields = fields.filter((field) => !isInlineNode(field.value));
@@ -1425,6 +1697,14 @@ function ClickyMap({ node }) {
     ] }, field.name))
   ] });
 }
+function isPaginationMetadataField(field) {
+  const name = (field.label || field.name || "").toLowerCase();
+  if (name !== "page" || field.value.kind !== "map") return false;
+  const keys = new Set(
+    (field.value.fields ?? []).map((item) => item.name.toLowerCase())
+  );
+  return keys.has("limit") && keys.has("offset") && keys.has("total");
+}
 function ClickyTableNode({ node }) {
   return /* @__PURE__ */ jsx(
     ClickyTable,
@@ -1445,7 +1725,8 @@ function ClickyTable({
   search,
   timeRange,
   externalFilters,
-  pagination
+  pagination,
+  menuActions
 }) {
   const runtime = useContext(ClickyRuntimeContext);
   const rowClick = onTableRowClick ?? runtime.onTableRowClick;
@@ -1455,6 +1736,7 @@ function ClickyTable({
   const effectiveTimeRange = timeRange ?? runtime.tableTimeRange;
   const effectiveExternalFilters = externalFilters ?? runtime.tableExternalFilters;
   const effectivePagination = pagination ?? runtime.tablePagination;
+  const effectiveMenuActions = menuActions ?? runtime.tableMenuActions;
   if (columns.length === 0 || rows.length === 0) {
     return /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "No data" });
   }
@@ -1515,7 +1797,8 @@ function ClickyTable({
       ...effectiveSearch ? { externalSearch: effectiveSearch } : {},
       ...effectiveTimeRange ? { externalTimeRange: effectiveTimeRange } : {},
       ...effectiveExternalFilters ? { externalFilters: effectiveExternalFilters } : {},
-      ...effectivePagination ? { pagination: effectivePagination } : {}
+      ...effectivePagination ? { pagination: effectivePagination } : {},
+      ...effectiveMenuActions ? { menuActions: effectiveMenuActions } : {}
     }
   );
 }
@@ -1534,7 +1817,14 @@ function ClickyTableRowDetail({
       /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Tags" }),
       /* @__PURE__ */ jsx("div", { className: "grid gap-2", children: tagFields.map(({ column, tags, tableKey }) => {
         const tagActions = context.filterActionsByColumn[tableKey];
-        const content = /* @__PURE__ */ jsx(TagList, { tags, maxVisible: tags.length, actions: "inline" });
+        const content = /* @__PURE__ */ jsx(
+          TagList,
+          {
+            tags,
+            maxVisible: tags.length,
+            actions: "inline"
+          }
+        );
         return /* @__PURE__ */ jsxs(
           "div",
           {
@@ -1550,10 +1840,17 @@ function ClickyTableRowDetail({
     ] }),
     /* @__PURE__ */ jsxs("section", { className: "space-y-2", children: [
       /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Fields" }),
-      /* @__PURE__ */ jsx("dl", { className: "grid gap-2 md:grid-cols-2", children: columns.map((column) => /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border bg-background p-2", children: [
-        /* @__PURE__ */ jsx("dt", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: column.label || prettifyName(column.name) }),
-        /* @__PURE__ */ jsx("dd", { className: "mt-1 min-w-0 text-sm text-foreground", children: /* @__PURE__ */ jsx(ClickyNodeRenderer, { node: row.cells[column.name] }) })
-      ] }, column.name)) })
+      /* @__PURE__ */ jsx("dl", { className: "grid gap-2 md:grid-cols-2", children: columns.map((column) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "rounded-md border border-border bg-background p-2",
+          children: [
+            /* @__PURE__ */ jsx("dt", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: column.label || prettifyName(column.name) }),
+            /* @__PURE__ */ jsx("dd", { className: "mt-1 min-w-0 text-sm text-foreground", children: /* @__PURE__ */ jsx(ClickyNodeRenderer, { node: row.cells[column.name] }) })
+          ]
+        },
+        column.name
+      )) })
     ] }),
     row.detail && /* @__PURE__ */ jsxs("section", { className: "space-y-2", children: [
       /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Detail" }),
@@ -1694,7 +1991,9 @@ function findFieldText(node, preferredName) {
   return "";
 }
 function hasMeaningfulText(node) {
-  return Boolean(clickyNodeText(node).trim() || ((node == null ? void 0 : node.fields) ?? []).length > 0);
+  return Boolean(
+    clickyNodeText(node).trim() || ((node == null ? void 0 : node.fields) ?? []).length > 0
+  );
 }
 function normalizeFieldName(name) {
   return name.toLowerCase().replace(/[^a-z0-9]/g, "");
@@ -1784,17 +2083,20 @@ function ClickyHtmlNode({ node }) {
   return /* @__PURE__ */ jsx(Tag, { dangerouslySetInnerHTML: { __html: sanitized } });
 }
 function toInlineStyle(style, text) {
-  if (!style) return (text == null ? void 0 : text.includes("\n")) ? { whiteSpace: "pre-wrap" } : void 0;
+  if (!style)
+    return (text == null ? void 0 : text.includes("\n")) ? { whiteSpace: "pre-wrap" } : void 0;
   const inlineStyle = {};
   if (style.color) inlineStyle.color = style.color;
-  if (style.backgroundColor) inlineStyle.backgroundColor = style.backgroundColor;
+  if (style.backgroundColor)
+    inlineStyle.backgroundColor = style.backgroundColor;
   if (style.bold) inlineStyle.fontWeight = 700;
   if (style.faint) inlineStyle.opacity = 0.7;
   if (style.italic) inlineStyle.fontStyle = "italic";
   const decorations = [];
   if (style.underline) decorations.push("underline");
   if (style.strikethrough) decorations.push("line-through");
-  if (decorations.length > 0) inlineStyle.textDecoration = decorations.join(" ");
+  if (decorations.length > 0)
+    inlineStyle.textDecoration = decorations.join(" ");
   if (style.textTransform === "uppercase" || style.textTransform === "lowercase" || style.textTransform === "capitalize") {
     inlineStyle.textTransform = style.textTransform;
   }
@@ -1845,11 +2147,15 @@ function defaultResolveClickyCommand(request, operations) {
   if (!wanted) return void 0;
   return operations.find((operation) => {
     var _a, _b;
-    const metaCommand = normalizeCommandPath((_a = operation.operation["x-clicky"]) == null ? void 0 : _a.command);
+    const metaCommand = normalizeCommandPath(
+      (_a = operation.operation["x-clicky"]) == null ? void 0 : _a.command
+    );
     if (metaCommand && metaCommand === wanted) {
       return true;
     }
-    const operationId = normalizeCommandPath((_b = operation.operation.operationId) == null ? void 0 : _b.replaceAll("_", "/"));
+    const operationId = normalizeCommandPath(
+      (_b = operation.operation.operationId) == null ? void 0 : _b.replaceAll("_", "/")
+    );
     return operationId === wanted;
   });
 }
@@ -1859,7 +2165,9 @@ function normalizeCommandPath(value) {
 function buildCommandParameterValues(parameters, request) {
   const values = { ...request.flags };
   const args = [...request.args ?? []];
-  const positionalParams = parameters.filter((param) => isPositionalParam(param));
+  const positionalParams = parameters.filter(
+    (param) => isPositionalParam(param)
+  );
   let argIndex = 0;
   for (const param of positionalParams) {
     if (param.name === "args") {
@@ -1878,13 +2186,18 @@ function buildCommandParameterValues(parameters, request) {
   return values;
 }
 function missingRequiredParameters(parameters, values) {
-  return parameters.filter((param) => param.required && (values[param.name] ?? "").trim() === "");
+  return parameters.filter(
+    (param) => param.required && (values[param.name] ?? "").trim() === ""
+  );
 }
 async function executeClickyCommand(client, operation, values) {
   return client.executeCommand(
     operation.path,
     operation.method,
-    packParameterValues(pruneParameterValues(values), operation.operation.parameters ?? []),
+    packParameterValues(
+      pruneParameterValues(values),
+      operation.operation.parameters ?? []
+    ),
     { Accept: "application/json+clicky" }
   );
 }
@@ -1912,7 +2225,10 @@ function substituteOperationPath(path, params) {
   const remaining = { ...params };
   for (const [key, value] of Object.entries(params)) {
     if (url.pathname.includes(`{${key}}`)) {
-      url.pathname = url.pathname.replace(`{${key}}`, encodeURIComponent(value));
+      url.pathname = url.pathname.replace(
+        `{${key}}`,
+        encodeURIComponent(value)
+      );
       delete remaining[key];
     }
   }
@@ -1942,14 +2258,20 @@ function clickyNodeText(node) {
     return sanitizeHtml(node.html ?? "").replace(/<[^>]+>/g, " ").trim();
   if (node.kind === "code") return node.source ?? "";
   if ((node.kind === "link" || node.kind === "link-command") && ((_a = node.children) == null ? void 0 : _a.length)) {
-    return [node.text, ...node.children.map((child) => clickyNodeText(child))].join("");
+    return [
+      node.text,
+      ...node.children.map((child) => clickyNodeText(child))
+    ].join("");
   }
   if (node.kind === "button" && node.label) return clickyNodeText(node.label);
   if (node.kind === "button-group") {
     return (node.items ?? []).map((item) => clickyNodeText(item)).join(" ");
   }
   if (node.kind === "text" && ((_b = node.children) == null ? void 0 : _b.length)) {
-    return [node.text, ...node.children.map((child) => clickyNodeText(child))].join("");
+    return [
+      node.text,
+      ...node.children.map((child) => clickyNodeText(child))
+    ].join("");
   }
   return "";
 }