@flanksource/clicky-ui 0.2.21 → 0.3.2

package/dist/data/Clicky.cjs

@@ -11,6 +11,8 @@ const useOperations = require("../rpc/useOperations.cjs");
 const utils = require("../lib/utils.cjs");
 const DataTable = require("./DataTable.cjs");
 const Tree = require("./Tree.cjs");
+const ObjectGraph = require("./ObjectGraph.cjs");
+const ExecutionTree = require("./ExecutionTree.cjs");
 const Icon = require("./Icon.cjs");
 const CodeBlock = require("./CodeBlock.cjs");
 const htmlUtils = require("./html-utils.cjs");
@@ -18,6 +20,7 @@ const RenderedStackTrace = require("./diagnostics/RenderedStackTrace.cjs");
 const Badge = require("./Badge.cjs");
 const HoverCard = require("../overlay/HoverCard.cjs");
 const Modal = require("../overlay/Modal.cjs");
+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");
@@ -549,6 +552,11 @@ function ClickyDownloadMenu({
   ] });
 }
 function useDismissablePopup(open, rootRef, triggerRef, onClose) {
+  modalStack.useEscapeLayer(open, () => {
+    var _a;
+    onClose();
+    (_a = triggerRef.current) == null ? void 0 : _a.focus();
+  });
   react.useEffect(() => {
     if (!open) return;
     const onPointerDown = (event) => {
@@ -557,18 +565,9 @@ function useDismissablePopup(open, rootRef, triggerRef, onClose) {
         onClose();
       }
     };
-    const onKeyDown = (event) => {
-      var _a;
-      if (event.key === "Escape") {
-        onClose();
-        (_a = triggerRef.current) == null ? void 0 : _a.focus();
-      }
-    };
     document.addEventListener("mousedown", onPointerDown);
-    document.addEventListener("keydown", onKeyDown);
     return () => {
       document.removeEventListener("mousedown", onPointerDown);
-      document.removeEventListener("keydown", onKeyDown);
     };
   }, [onClose, open, rootRef, triggerRef]);
 }
@@ -1061,7 +1060,7 @@ function clickyPayloadHasTable(data) {
   return parsed.ok ? clickyNodeHasTable(parsed.document.node) : false;
 }
 function clickyNodeHasTable(node) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f;
   if (!node) return false;
   if (node.kind === "table") return true;
   if ((_a = node.children) == null ? void 0 : _a.some(clickyNodeHasTable)) return true;
@@ -1071,7 +1070,15 @@ function clickyNodeHasTable(node) {
   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)))
+  if ((_d = node.columns) == null ? void 0 : _d.some(
+    (column) => column.header && clickyNodeHasTable(column.header)
+  ))
+    return true;
+  if ((_e = node.rows) == null ? void 0 : _e.some(
+    (row) => Object.values(row.cells).some((cell) => clickyNodeHasTable(cell))
+  ))
+    return true;
+  if ((_f = node.rows) == null ? void 0 : _f.some((row) => row.detail && clickyNodeHasTable(row.detail)))
     return true;
   return false;
 }
@@ -1173,6 +1180,10 @@ function ClickyNodeRenderer({ node }) {
       return /* @__PURE__ */ jsxRuntime.jsx(ClickyTableNode, { node });
     case "tree":
       return /* @__PURE__ */ jsxRuntime.jsx(ClickyTreeNode, { node });
+    case "object-graph":
+      return /* @__PURE__ */ jsxRuntime.jsx(ObjectGraph.ObjectGraph, { roots: node.objects ?? [] });
+    case "execution-tree":
+      return /* @__PURE__ */ jsxRuntime.jsx(ExecutionTree.ExecutionTree, { roots: node.executionRoots ?? [] });
     case "code":
       return /* @__PURE__ */ jsxRuntime.jsx(
         CodeBlock.CodeBlock,
@@ -1182,6 +1193,18 @@ function ClickyNodeRenderer({ node }) {
           highlightedHtml: node.highlightedHtml
         }
       );
+    case "heading":
+      return /* @__PURE__ */ jsxRuntime.jsx(ClickyHeading, { node });
+    case "blockquote":
+      return /* @__PURE__ */ jsxRuntime.jsx(ClickyBlockquote, { node });
+    case "admonition":
+      return /* @__PURE__ */ jsxRuntime.jsx(ClickyAdmonition, { node });
+    case "footnote-ref":
+      return /* @__PURE__ */ jsxRuntime.jsx(ClickyFootnoteRef, { node });
+    case "footnote":
+      return /* @__PURE__ */ jsxRuntime.jsx(ClickyFootnote, { node });
+    case "footnotes":
+      return /* @__PURE__ */ jsxRuntime.jsx(ClickyFootnotes, { node });
     case "collapsed":
       return /* @__PURE__ */ jsxRuntime.jsx(ClickyCollapsed, { node });
     case "stacktrace":
@@ -1641,6 +1664,188 @@ function ClickyIconNode({ node }) {
     }
   );
 }
+function ClickyHeading({ node }) {
+  var _a;
+  const level = clampHeadingLevel(node.level);
+  const content = node.content ?? clickyNodeFallbackText(node);
+  const inlineStyle = toInlineStyle(node.style, clickyNodeText(content));
+  const className = utils.cn(
+    headingClassName(level),
+    "text-foreground",
+    (_a = node.style) == null ? void 0 : _a.className
+  );
+  switch (level) {
+    case 1:
+      return /* @__PURE__ */ jsxRuntime.jsx("h1", { className, style: inlineStyle, children: content && /* @__PURE__ */ jsxRuntime.jsx(ClickyNodeRenderer, { node: content }) });
+    case 2:
+      return /* @__PURE__ */ jsxRuntime.jsx("h2", { className, style: inlineStyle, children: content && /* @__PURE__ */ jsxRuntime.jsx(ClickyNodeRenderer, { node: content }) });
+    case 3:
+      return /* @__PURE__ */ jsxRuntime.jsx("h3", { className, style: inlineStyle, children: content && /* @__PURE__ */ jsxRuntime.jsx(ClickyNodeRenderer, { node: content }) });
+    case 4:
+      return /* @__PURE__ */ jsxRuntime.jsx("h4", { className, style: inlineStyle, children: content && /* @__PURE__ */ jsxRuntime.jsx(ClickyNodeRenderer, { node: content }) });
+    case 5:
+      return /* @__PURE__ */ jsxRuntime.jsx("h5", { className, style: inlineStyle, children: content && /* @__PURE__ */ jsxRuntime.jsx(ClickyNodeRenderer, { node: content }) });
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsx("h6", { className, style: inlineStyle, children: content && /* @__PURE__ */ jsxRuntime.jsx(ClickyNodeRenderer, { node: content }) });
+  }
+}
+function clampHeadingLevel(level) {
+  if (!Number.isFinite(level)) return 1;
+  return Math.min(6, Math.max(1, Math.trunc(level ?? 1)));
+}
+function headingClassName(level) {
+  switch (level) {
+    case 1:
+      return "text-2xl font-semibold leading-tight";
+    case 2:
+      return "text-xl font-semibold leading-tight";
+    case 3:
+      return "text-lg font-semibold leading-snug";
+    case 4:
+      return "text-base font-semibold leading-snug";
+    case 5:
+      return "text-sm font-semibold leading-snug";
+    default:
+      return "text-xs font-semibold uppercase leading-snug text-muted-foreground";
+  }
+}
+function ClickyBlockquote({ node }) {
+  const content = node.content ?? clickyNodeFallbackText(node);
+  if (!content) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("blockquote", { className: "border-l-4 border-border pl-density-3 text-sm leading-relaxed text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(ClickyNodeRenderer, { node: content }) });
+}
+function ClickyAdmonition({ node }) {
+  const severity = normalizeAdmonitionSeverity(node.severity);
+  const title = node.label ?? {
+    kind: "text",
+    text: prettifyName(severity),
+    plain: prettifyName(severity)
+  };
+  const tone = admonitionToneClassName(severity);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: severity === "danger" || severity === "warning" ? "alert" : "note",
+      "data-severity": severity,
+      className: utils.cn(
+        "rounded-md border px-density-3 py-density-2",
+        tone.container
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("text-sm font-semibold", tone.title), children: /* @__PURE__ */ jsxRuntime.jsx(ClickyNodeRenderer, { node: title }) }),
+        node.content && /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("mt-1 text-sm leading-relaxed", tone.body), children: /* @__PURE__ */ jsxRuntime.jsx(ClickyNodeRenderer, { node: node.content }) })
+      ]
+    }
+  );
+}
+function normalizeAdmonitionSeverity(severity) {
+  const normalized = (severity ?? "note").trim().toLowerCase();
+  if (normalized === "info" || normalized === "tip" || normalized === "warning" || normalized === "danger" || normalized === "note") {
+    return normalized;
+  }
+  return "note";
+}
+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"
+      };
+  }
+}
+function ClickyFootnoteRef({ node }) {
+  const id = normalizeFootnoteId(node.id);
+  if (!id) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("sup", { id: footnoteDomId("fnref", id), className: "align-super text-[0.75em]", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      href: `#${footnoteDomId("fn", id)}`,
+      "aria-label": `Footnote ${id}`,
+      className: "text-primary hover:underline",
+      children: `[^${id}]`
+    }
+  ) });
+}
+function ClickyFootnote({ node }) {
+  const id = normalizeFootnoteId(node.id);
+  if (!id) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id: footnoteDomId("fn", id), className: "text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-2 font-mono text-xs text-foreground", children: `[^${id}]` }),
+    node.content && /* @__PURE__ */ jsxRuntime.jsx(ClickyNodeRenderer, { node: node.content }),
+    /* @__PURE__ */ jsxRuntime.jsx(FootnoteBackLink, { id })
+  ] });
+}
+function ClickyFootnotes({ node }) {
+  const items = (node.items ?? []).filter(
+    (item) => normalizeFootnoteId(item.id)
+  );
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "section",
+    {
+      "aria-label": "Footnotes",
+      className: "border-t border-border pt-density-2 text-xs text-muted-foreground",
+      children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "ml-5 list-decimal space-y-1", children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "li",
+        {
+          id: footnoteDomId("fn", item.id ?? ""),
+          children: [
+            item.content && /* @__PURE__ */ jsxRuntime.jsx(ClickyNodeRenderer, { node: item.content }),
+            /* @__PURE__ */ jsxRuntime.jsx(FootnoteBackLink, { id: item.id ?? "" })
+          ]
+        },
+        `${item.id}-${index}`
+      )) })
+    }
+  );
+}
+function FootnoteBackLink({ id }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      href: `#${footnoteDomId("fnref", id)}`,
+      "aria-label": `Back to footnote reference ${id}`,
+      className: "ml-2 text-primary hover:underline",
+      children: "back"
+    }
+  );
+}
+function normalizeFootnoteId(id) {
+  return (id ?? "").trim();
+}
+function footnoteDomId(prefix, id) {
+  return `${prefix}-${encodeURIComponent(id)}`;
+}
+function clickyNodeFallbackText(node) {
+  const text = node.text ?? node.plain;
+  return text ? { kind: "text", text, plain: text } : void 0;
+}
 function ClickyList({ node }) {
   const items = node.items ?? [];
   if (items.length === 0) return null;
@@ -1781,7 +1986,6 @@ function ClickyTable({
         }
       } : {},
       getRowId: (row, index) => `${index}-${columns.map((column) => clickyNodeText(row.cells[column.name])).filter(Boolean).join("|")}`,
-      renderExpandedRow: (row, context) => /* @__PURE__ */ jsxRuntime.jsx(ClickyTableRowDetail, { row, columns, context }),
       ...rowClick ? { onRowClick: rowClick } : {},
       ...rowHref ? { getRowHref: rowHref } : {},
       ...rowClick && (rowClickable || rowHref) ? {
@@ -1795,62 +1999,6 @@ function ClickyTable({
     }
   );
 }
-function ClickyTableRowDetail({
-  row,
-  columns,
-  context
-}) {
-  const tagFields = columns.map((column) => ({
-    column,
-    tags: clickyNodeTags(row.cells[column.name], column),
-    tableKey: `cells.${column.name}`
-  })).filter((field) => field.tags.length > 0);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-    tagFields.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Tags" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-2", children: tagFields.map(({ column, tags, tableKey }) => {
-        const tagActions = context.filterActionsByColumn[tableKey];
-        const content = /* @__PURE__ */ jsxRuntime.jsx(
-          TagList.TagList,
-          {
-            tags,
-            maxVisible: tags.length,
-            actions: "inline"
-          }
-        );
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: "grid gap-2 rounded-md border border-border bg-background p-2 md:grid-cols-[9rem_minmax(0,1fr)]",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: column.label || prettifyName(column.name) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: tagActions ? /* @__PURE__ */ jsxRuntime.jsx(TagList.TagActionsProvider, { value: tagActions, children: content }) : content })
-            ]
-          },
-          column.name
-        );
-      }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Fields" }),
-      /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "grid gap-2 md:grid-cols-2", children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: "rounded-md border border-border bg-background p-2",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: column.label || prettifyName(column.name) }),
-            /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "mt-1 min-w-0 text-sm text-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(ClickyNodeRenderer, { node: row.cells[column.name] }) })
-          ]
-        },
-        column.name
-      )) })
-    ] }),
-    row.detail && /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Detail" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-border bg-background p-density-3", children: /* @__PURE__ */ jsxRuntime.jsx(ClickyNodeRenderer, { node: row.detail }) })
-    ] })
-  ] });
-}
 function ClickyCollapsedStructRows({
   columns,
   rows
@@ -2245,6 +2393,20 @@ function isExecutionResponse(value) {
 function clickyNodeText(node) {
   var _a, _b;
   if (!node) return "";
+  if (node.kind === "heading" || node.kind === "blockquote") {
+    return clickyNodeText(node.content) || node.plain || "";
+  }
+  if (node.kind === "admonition") {
+    return [clickyNodeText(node.label), clickyNodeText(node.content)].filter(Boolean).join(" ") || node.plain || "";
+  }
+  if (node.kind === "footnote-ref") {
+    return node.id ? `[^${node.id}]` : node.plain || "";
+  }
+  if (node.kind === "footnote")
+    return clickyNodeText(node.content) || node.plain || "";
+  if (node.kind === "footnotes") {
+    return (node.items ?? []).map((item) => clickyNodeText(item)).join(" ") || node.plain || "";
+  }
   if (node.plain) return node.plain;
   if (node.text) return node.text;
   if (node.kind === "html")
@@ -2269,7 +2431,7 @@ function clickyNodeText(node) {
   return "";
 }
 function isInlineNode(node) {
-  return node.kind === "text" || node.kind === "link" || node.kind === "link-command" || node.kind === "icon" || node.kind === "html" || node.kind === "button" || node.kind === "button-group";
+  return node.kind === "text" || node.kind === "link" || node.kind === "link-command" || node.kind === "icon" || node.kind === "html" || node.kind === "footnote-ref" || node.kind === "badge" || node.kind === "button" || node.kind === "button-group";
 }
 exports.Clicky = Clicky;
 exports.ClickyNodeView = ClickyNodeRenderer;