@localstack/appinspector-ui 1.0.71 → 1.0.73

package/dist/index.js

@@ -1,10 +1,21 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __require = /* @__PURE__ */ ((x2) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x2, {
+  get: (a3, b3) => (typeof require !== "undefined" ? require : a3)[b3]
+}) : x2)(function(x2) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x2 + '" is not supported');
+});
 var __esm = (fn, res) => function __init() {
   return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
 };
+var __commonJS = (cb2, mod) => function __require2() {
+  return mod || (0, cb2[__getOwnPropNames(cb2)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -17,6 +28,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // node_modules/framer-motion/node_modules/@emotion/memoize/dist/memoize.browser.esm.js
@@ -56,6 +75,297 @@ var init_is_prop_valid_browser_esm = __esm({
   }
 });
 
+// node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js
+var require_use_sync_external_store_shim_development = __commonJS({
+  "node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js"(exports) {
+    "use strict";
+    (function() {
+      function is(x2, y) {
+        return x2 === y && (0 !== x2 || 1 / x2 === 1 / y) || x2 !== x2 && y !== y;
+      }
+      function useSyncExternalStore$2(subscribe, getSnapshot) {
+        didWarnOld18Alpha || void 0 === React124.startTransition || (didWarnOld18Alpha = true, console.error(
+          "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
+        ));
+        var value = getSnapshot();
+        if (!didWarnUncachedGetSnapshot) {
+          var cachedValue = getSnapshot();
+          objectIs(value, cachedValue) || (console.error(
+            "The result of getSnapshot should be cached to avoid an infinite loop"
+          ), didWarnUncachedGetSnapshot = true);
+        }
+        cachedValue = useState16({
+          inst: { value, getSnapshot }
+        });
+        var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
+        useLayoutEffect2(
+          function() {
+            inst.value = value;
+            inst.getSnapshot = getSnapshot;
+            checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+          },
+          [subscribe, value, getSnapshot]
+        );
+        useEffect20(
+          function() {
+            checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+            return subscribe(function() {
+              checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+            });
+          },
+          [subscribe]
+        );
+        useDebugValue2(value);
+        return value;
+      }
+      function checkIfSnapshotChanged(inst) {
+        var latestGetSnapshot = inst.getSnapshot;
+        inst = inst.value;
+        try {
+          var nextValue = latestGetSnapshot();
+          return !objectIs(inst, nextValue);
+        } catch (error) {
+          return true;
+        }
+      }
+      function useSyncExternalStore$1(subscribe, getSnapshot) {
+        return getSnapshot();
+      }
+      "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
+      var React124 = __require("react"), objectIs = "function" === typeof Object.is ? Object.is : is, useState16 = React124.useState, useEffect20 = React124.useEffect, useLayoutEffect2 = React124.useLayoutEffect, useDebugValue2 = React124.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+      exports.useSyncExternalStore = void 0 !== React124.useSyncExternalStore ? React124.useSyncExternalStore : shim;
+      "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
+    })();
+  }
+});
+
+// node_modules/use-sync-external-store/shim/index.js
+var require_shim = __commonJS({
+  "node_modules/use-sync-external-store/shim/index.js"(exports, module) {
+    "use strict";
+    if (false) {
+      module.exports = null;
+    } else {
+      module.exports = require_use_sync_external_store_shim_development();
+    }
+  }
+});
+
+// node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js
+var require_with_selector_development = __commonJS({
+  "node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js"(exports) {
+    "use strict";
+    (function() {
+      function is(x2, y) {
+        return x2 === y && (0 !== x2 || 1 / x2 === 1 / y) || x2 !== x2 && y !== y;
+      }
+      "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
+      var React124 = __require("react"), shim = require_shim(), objectIs = "function" === typeof Object.is ? Object.is : is, useSyncExternalStore = shim.useSyncExternalStore, useRef15 = React124.useRef, useEffect20 = React124.useEffect, useMemo13 = React124.useMemo, useDebugValue2 = React124.useDebugValue;
+      exports.useSyncExternalStoreWithSelector = function(subscribe, getSnapshot, getServerSnapshot, selector2, isEqual) {
+        var instRef = useRef15(null);
+        if (null === instRef.current) {
+          var inst = { hasValue: false, value: null };
+          instRef.current = inst;
+        } else inst = instRef.current;
+        instRef = useMemo13(
+          function() {
+            function memoizedSelector(nextSnapshot) {
+              if (!hasMemo) {
+                hasMemo = true;
+                memoizedSnapshot = nextSnapshot;
+                nextSnapshot = selector2(nextSnapshot);
+                if (void 0 !== isEqual && inst.hasValue) {
+                  var currentSelection = inst.value;
+                  if (isEqual(currentSelection, nextSnapshot))
+                    return memoizedSelection = currentSelection;
+                }
+                return memoizedSelection = nextSnapshot;
+              }
+              currentSelection = memoizedSelection;
+              if (objectIs(memoizedSnapshot, nextSnapshot))
+                return currentSelection;
+              var nextSelection = selector2(nextSnapshot);
+              if (void 0 !== isEqual && isEqual(currentSelection, nextSelection))
+                return memoizedSnapshot = nextSnapshot, currentSelection;
+              memoizedSnapshot = nextSnapshot;
+              return memoizedSelection = nextSelection;
+            }
+            var hasMemo = false, memoizedSnapshot, memoizedSelection, maybeGetServerSnapshot = void 0 === getServerSnapshot ? null : getServerSnapshot;
+            return [
+              function() {
+                return memoizedSelector(getSnapshot());
+              },
+              null === maybeGetServerSnapshot ? void 0 : function() {
+                return memoizedSelector(maybeGetServerSnapshot());
+              }
+            ];
+          },
+          [getSnapshot, getServerSnapshot, selector2, isEqual]
+        );
+        var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);
+        useEffect20(
+          function() {
+            inst.hasValue = true;
+            inst.value = value;
+          },
+          [value]
+        );
+        useDebugValue2(value);
+        return value;
+      };
+      "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
+    })();
+  }
+});
+
+// node_modules/use-sync-external-store/shim/with-selector.js
+var require_with_selector = __commonJS({
+  "node_modules/use-sync-external-store/shim/with-selector.js"(exports, module) {
+    "use strict";
+    if (false) {
+      module.exports = null;
+    } else {
+      module.exports = require_with_selector_development();
+    }
+  }
+});
+
+// node_modules/toggle-selection/index.js
+var require_toggle_selection = __commonJS({
+  "node_modules/toggle-selection/index.js"(exports, module) {
+    "use strict";
+    module.exports = function() {
+      var selection = document.getSelection();
+      if (!selection.rangeCount) {
+        return function() {
+        };
+      }
+      var active = document.activeElement;
+      var ranges = [];
+      for (var i2 = 0; i2 < selection.rangeCount; i2++) {
+        ranges.push(selection.getRangeAt(i2));
+      }
+      switch (active.tagName.toUpperCase()) {
+        // .toUpperCase handles XHTML
+        case "INPUT":
+        case "TEXTAREA":
+          active.blur();
+          break;
+        default:
+          active = null;
+          break;
+      }
+      selection.removeAllRanges();
+      return function() {
+        selection.type === "Caret" && selection.removeAllRanges();
+        if (!selection.rangeCount) {
+          ranges.forEach(function(range) {
+            selection.addRange(range);
+          });
+        }
+        active && active.focus();
+      };
+    };
+  }
+});
+
+// node_modules/copy-to-clipboard/index.js
+var require_copy_to_clipboard = __commonJS({
+  "node_modules/copy-to-clipboard/index.js"(exports, module) {
+    "use strict";
+    var deselectCurrent = require_toggle_selection();
+    var clipboardToIE11Formatting = {
+      "text/plain": "Text",
+      "text/html": "Url",
+      "default": "Text"
+    };
+    var defaultMessage = "Copy to clipboard: #{key}, Enter";
+    function format2(message) {
+      var copyKey = (/mac os x/i.test(navigator.userAgent) ? "\u2318" : "Ctrl") + "+C";
+      return message.replace(/#{\s*key\s*}/g, copyKey);
+    }
+    function copy(text2, options) {
+      var debug2, message, reselectPrevious, range, selection, mark, success = false;
+      if (!options) {
+        options = {};
+      }
+      debug2 = options.debug || false;
+      try {
+        reselectPrevious = deselectCurrent();
+        range = document.createRange();
+        selection = document.getSelection();
+        mark = document.createElement("span");
+        mark.textContent = text2;
+        mark.ariaHidden = "true";
+        mark.style.all = "unset";
+        mark.style.position = "fixed";
+        mark.style.top = 0;
+        mark.style.clip = "rect(0, 0, 0, 0)";
+        mark.style.whiteSpace = "pre";
+        mark.style.webkitUserSelect = "text";
+        mark.style.MozUserSelect = "text";
+        mark.style.msUserSelect = "text";
+        mark.style.userSelect = "text";
+        mark.addEventListener("copy", function(e2) {
+          e2.stopPropagation();
+          if (options.format) {
+            e2.preventDefault();
+            if (typeof e2.clipboardData === "undefined") {
+              debug2 && console.warn("unable to use e.clipboardData");
+              debug2 && console.warn("trying IE specific stuff");
+              window.clipboardData.clearData();
+              var format3 = clipboardToIE11Formatting[options.format] || clipboardToIE11Formatting["default"];
+              window.clipboardData.setData(format3, text2);
+            } else {
+              e2.clipboardData.clearData();
+              e2.clipboardData.setData(options.format, text2);
+            }
+          }
+          if (options.onCopy) {
+            e2.preventDefault();
+            options.onCopy(e2.clipboardData);
+          }
+        });
+        document.body.appendChild(mark);
+        range.selectNodeContents(mark);
+        selection.addRange(range);
+        var successful = document.execCommand("copy");
+        if (!successful) {
+          throw new Error("copy command was unsuccessful");
+        }
+        success = true;
+      } catch (err) {
+        debug2 && console.error("unable to copy using execCommand: ", err);
+        debug2 && console.warn("trying IE specific stuff");
+        try {
+          window.clipboardData.setData(options.format || "text", text2);
+          options.onCopy && options.onCopy(window.clipboardData);
+          success = true;
+        } catch (err2) {
+          debug2 && console.error("unable to copy using clipboardData: ", err2);
+          debug2 && console.error("falling back to prompt");
+          message = format2("message" in options ? options.message : defaultMessage);
+          window.prompt(message, text2);
+        }
+      } finally {
+        if (selection) {
+          if (typeof selection.removeRange == "function") {
+            selection.removeRange(range);
+          } else {
+            selection.removeAllRanges();
+          }
+        }
+        if (mark) {
+          document.body.removeChild(mark);
+        }
+        reselectPrevious();
+      }
+      return success;
+    }
+    module.exports = copy;
+  }
+});
+
 // node_modules/@smithy/util-utf8/dist-es/fromUtf8.browser.js
 var fromUtf8;
 var init_fromUtf8_browser = __esm({
@@ -366,8 +676,8 @@ var init_event_streams = __esm({
 });
 
 // src/pages/spans-list-page.tsx
-import { Box as Box19 } from "@mui/material";
-import { useCallback as useCallback9, useState as useState14 } from "react";
+import { Box as Box18 } from "@mui/material";
+import { useCallback as useCallback10, useState as useState15 } from "react";
 
 // src/components/spans-list/spans-list.tsx
 import { Alert, Box as Box4, Button as Button2 } from "@mui/material";
@@ -3228,14 +3538,14 @@ function __values(o2) {
 function __read(o2, n2) {
   var m2 = typeof Symbol === "function" && o2[Symbol.iterator];
   if (!m2) return o2;
-  var i2 = m2.call(o2), r2, ar = [], e2;
+  var i2 = m2.call(o2), r3, ar = [], e2;
   try {
-    while ((n2 === void 0 || n2-- > 0) && !(r2 = i2.next()).done) ar.push(r2.value);
+    while ((n2 === void 0 || n2-- > 0) && !(r3 = i2.next()).done) ar.push(r3.value);
   } catch (error) {
     e2 = { error };
   } finally {
     try {
-      if (r2 && !r2.done && (m2 = i2["return"])) m2.call(i2);
+      if (r3 && !r3.done && (m2 = i2["return"])) m2.call(i2);
     } finally {
       if (e2) throw e2.error;
     }
@@ -3951,27 +4261,27 @@ var rgba = {
 
 // node_modules/style-value-types/dist/es/color/hex.mjs
 function parseHex(v2) {
-  let r2 = "";
+  let r3 = "";
   let g2 = "";
   let b3 = "";
   let a3 = "";
   if (v2.length > 5) {
-    r2 = v2.substr(1, 2);
+    r3 = v2.substr(1, 2);
     g2 = v2.substr(3, 2);
     b3 = v2.substr(5, 2);
     a3 = v2.substr(7, 2);
   } else {
-    r2 = v2.substr(1, 1);
+    r3 = v2.substr(1, 1);
     g2 = v2.substr(2, 1);
     b3 = v2.substr(3, 1);
     a3 = v2.substr(4, 1);
-    r2 += r2;
+    r3 += r3;
     g2 += g2;
     b3 += b3;
     a3 += a3;
   }
   return {
-    red: parseInt(r2, 16),
+    red: parseInt(r3, 16),
     green: parseInt(g2, 16),
     blue: parseInt(b3, 16),
     alpha: a3 ? parseInt(a3, 16) / 255 : 1
@@ -13843,132 +14153,2012 @@ var useSpans = () => {
 
 // src/pages/trace-graph-page.tsx
 import { ArrowBack } from "@mui/icons-material";
-import { Box as Box18, Button as Button5, Drawer, Paper as Paper2 } from "@mui/material";
+import { Box as Box17, Button as Button5, Drawer, Paper as Paper3 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ReactFlowProvider } from "@xyflow/react";
-import { useCallback as useCallback8, useEffect as useEffect18, useRef as useRef13, useState as useState13 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect19, useRef as useRef14, useState as useState14 } from "react";
 
 // src/components/event-details/event-details.tsx
-import { Box as Box14, Chip as Chip3, Divider as Divider2, Stack as Stack2, Typography as Typography10 } from "@mui/material";
-import { useMemo as useMemo10 } from "react";
-
-// src/utils/iam-utils.ts
-function determinePermissionStatus(payload) {
-  if (payload.explicit_deny_count && payload.explicit_deny_count > 0) {
-    return "explicitly_denied";
+import { Close as Close2 } from "@mui/icons-material";
+import { Box as Box13, Chip as Chip3, Divider as Divider2, FormControlLabel as FormControlLabel2, IconButton as IconButton3, Stack as Stack2, Switch, Typography as Typography9, useTheme as useTheme3 } from "@mui/material";
+
+// node_modules/@textea/json-viewer/dist/index.mjs
+import { jsx as jsx129, jsxs as jsxs123, Fragment as Fragment5 } from "react/jsx-runtime";
+import { Box as Box6, InputBase, NoSsr, SvgIcon, createTheme, ThemeProvider, Paper as Paper2 } from "@mui/material";
+import { createContext as createContext9, useContext as useContext16, useState as useState8, useRef as useRef11, useCallback as useCallback8, useMemo as useMemo7, useEffect as useEffect15, memo as memo9 } from "react";
+
+// node_modules/zustand/esm/vanilla.mjs
+var createStoreImpl = (createState2) => {
+  let state;
+  const listeners = /* @__PURE__ */ new Set();
+  const setState = (partial, replace) => {
+    const nextState = typeof partial === "function" ? partial(state) : partial;
+    if (!Object.is(nextState, state)) {
+      const previousState = state;
+      state = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state, nextState);
+      listeners.forEach((listener) => listener(state, previousState));
+    }
+  };
+  const getState = () => state;
+  const getInitialState = () => initialState;
+  const subscribe = (listener) => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  };
+  const destroy = () => {
+    if ((import.meta.env ? import.meta.env.MODE : void 0) !== "production") {
+      console.warn(
+        "[DEPRECATED] The `destroy` method will be unsupported in a future version. Instead use unsubscribe function returned by subscribe. Everything will be garbage-collected if store is garbage-collected."
+      );
+    }
+    listeners.clear();
+  };
+  const api = { setState, getState, getInitialState, subscribe, destroy };
+  const initialState = state = createState2(setState, getState, api);
+  return api;
+};
+var createStore = (createState2) => createState2 ? createStoreImpl(createState2) : createStoreImpl;
+
+// node_modules/zustand/esm/index.mjs
+var import_with_selector = __toESM(require_with_selector(), 1);
+import ReactExports from "react";
+var { useDebugValue } = ReactExports;
+var { useSyncExternalStoreWithSelector } = import_with_selector.default;
+var didWarnAboutEqualityFn = false;
+var identity = (arg) => arg;
+function useStore(api, selector2 = identity, equalityFn) {
+  if ((import.meta.env ? import.meta.env.MODE : void 0) !== "production" && equalityFn && !didWarnAboutEqualityFn) {
+    console.warn(
+      "[DEPRECATED] Use `createWithEqualityFn` instead of `create` or use `useStoreWithEqualityFn` instead of `useStore`. They can be imported from 'zustand/traditional'. https://github.com/pmndrs/zustand/discussions/1937"
+    );
+    didWarnAboutEqualityFn = true;
+  }
+  const slice = useSyncExternalStoreWithSelector(
+    api.subscribe,
+    api.getState,
+    api.getServerState || api.getInitialState,
+    selector2,
+    equalityFn
+  );
+  useDebugValue(slice);
+  return slice;
+}
+var createImpl = (createState2) => {
+  if ((import.meta.env ? import.meta.env.MODE : void 0) !== "production" && typeof createState2 !== "function") {
+    console.warn(
+      "[DEPRECATED] Passing a vanilla store will be unsupported in a future version. Instead use `import { useStore } from 'zustand'`."
+    );
   }
-  if (payload.is_allowed && payload.explicit_allow_count && payload.explicit_allow_count > 0) {
-    return "explicitly_allowed";
+  const api = typeof createState2 === "function" ? createStore(createState2) : createState2;
+  const useBoundStore = (selector2, equalityFn) => useStore(api, selector2, equalityFn);
+  Object.assign(useBoundStore, api);
+  return useBoundStore;
+};
+var create = (createState2) => createState2 ? createImpl(createState2) : createImpl;
+
+// node_modules/@textea/json-viewer/dist/index.mjs
+var import_copy_to_clipboard = __toESM(require_copy_to_clipboard(), 1);
+function r(e2) {
+  var t2, f2, n2 = "";
+  if ("string" == typeof e2 || "number" == typeof e2) n2 += e2;
+  else if ("object" == typeof e2) if (Array.isArray(e2)) {
+    var o2 = e2.length;
+    for (t2 = 0; t2 < o2; t2++) e2[t2] && (f2 = r(e2[t2])) && (n2 && (n2 += " "), n2 += f2);
+  } else for (f2 in e2) e2[f2] && (n2 && (n2 += " "), n2 += f2);
+  return n2;
+}
+function clsx() {
+  for (var e2, t2, f2 = 0, n2 = "", o2 = arguments.length; f2 < o2; f2++) (e2 = arguments[f2]) && (t2 = r(e2)) && (n2 && (n2 += " "), n2 += t2);
+  return n2;
+}
+var lightColorspace = {
+  scheme: "Light Theme",
+  author: "mac gainor (https://github.com/mac-s-g)",
+  base00: "rgba(0, 0, 0, 0)",
+  base01: "rgb(245, 245, 245)",
+  base02: "rgb(235, 235, 235)",
+  base03: "#93a1a1",
+  base04: "rgba(0, 0, 0, 0.3)",
+  base05: "#586e75",
+  base06: "#073642",
+  base07: "#002b36",
+  base08: "#d33682",
+  base09: "#cb4b16",
+  base0A: "#ffd500",
+  base0B: "#859900",
+  base0C: "#6c71c4",
+  base0D: "#586e75",
+  base0E: "#2aa198",
+  base0F: "#268bd2"
+};
+var darkColorspace = {
+  scheme: "Dark Theme",
+  author: "Chris Kempson (http://chriskempson.com)",
+  base00: "#181818",
+  base01: "#282828",
+  base02: "#383838",
+  base03: "#585858",
+  base04: "#b8b8b8",
+  base05: "#d8d8d8",
+  base06: "#e8e8e8",
+  base07: "#f8f8f8",
+  base08: "#ab4642",
+  base09: "#dc9656",
+  base0A: "#f7ca88",
+  base0B: "#a1b56c",
+  base0C: "#86c1b9",
+  base0D: "#7cafc2",
+  base0E: "#ba8baf",
+  base0F: "#a16946"
+};
+var DefaultKeyRenderer = () => null;
+DefaultKeyRenderer.when = () => false;
+var createJsonViewerStore = (props) => {
+  return create()((set, get) => {
+    var _props_rootName, _props_indentWidth, _props_keyRenderer, _props_enableAdd, _props_enableDelete, _props_enableClipboard, _props_editable, _props_onChange, _props_onCopy, _props_onSelect, _props_onAdd, _props_onDelete, _props_defaultInspectDepth, _props_defaultInspectControl, _props_maxDisplayLength, _props_groupArraysAfterLength, _props_collapseStringsAfterLength, _props_objectSortKeys, _props_quotesOnKeys, _props_displayDataTypes, _props_displaySize, _props_displayComma, _props_highlightUpdates;
+    return {
+      // provided by user
+      rootName: (_props_rootName = props.rootName) !== null && _props_rootName !== void 0 ? _props_rootName : "root",
+      indentWidth: (_props_indentWidth = props.indentWidth) !== null && _props_indentWidth !== void 0 ? _props_indentWidth : 3,
+      keyRenderer: (_props_keyRenderer = props.keyRenderer) !== null && _props_keyRenderer !== void 0 ? _props_keyRenderer : DefaultKeyRenderer,
+      enableAdd: (_props_enableAdd = props.enableAdd) !== null && _props_enableAdd !== void 0 ? _props_enableAdd : false,
+      enableDelete: (_props_enableDelete = props.enableDelete) !== null && _props_enableDelete !== void 0 ? _props_enableDelete : false,
+      enableClipboard: (_props_enableClipboard = props.enableClipboard) !== null && _props_enableClipboard !== void 0 ? _props_enableClipboard : true,
+      editable: (_props_editable = props.editable) !== null && _props_editable !== void 0 ? _props_editable : false,
+      onChange: (_props_onChange = props.onChange) !== null && _props_onChange !== void 0 ? _props_onChange : () => {
+      },
+      onCopy: (_props_onCopy = props.onCopy) !== null && _props_onCopy !== void 0 ? _props_onCopy : void 0,
+      onSelect: (_props_onSelect = props.onSelect) !== null && _props_onSelect !== void 0 ? _props_onSelect : void 0,
+      onAdd: (_props_onAdd = props.onAdd) !== null && _props_onAdd !== void 0 ? _props_onAdd : void 0,
+      onDelete: (_props_onDelete = props.onDelete) !== null && _props_onDelete !== void 0 ? _props_onDelete : void 0,
+      defaultInspectDepth: (_props_defaultInspectDepth = props.defaultInspectDepth) !== null && _props_defaultInspectDepth !== void 0 ? _props_defaultInspectDepth : 5,
+      defaultInspectControl: (_props_defaultInspectControl = props.defaultInspectControl) !== null && _props_defaultInspectControl !== void 0 ? _props_defaultInspectControl : void 0,
+      maxDisplayLength: (_props_maxDisplayLength = props.maxDisplayLength) !== null && _props_maxDisplayLength !== void 0 ? _props_maxDisplayLength : 30,
+      groupArraysAfterLength: (_props_groupArraysAfterLength = props.groupArraysAfterLength) !== null && _props_groupArraysAfterLength !== void 0 ? _props_groupArraysAfterLength : 100,
+      collapseStringsAfterLength: props.collapseStringsAfterLength === false ? Number.MAX_VALUE : (_props_collapseStringsAfterLength = props.collapseStringsAfterLength) !== null && _props_collapseStringsAfterLength !== void 0 ? _props_collapseStringsAfterLength : 50,
+      objectSortKeys: (_props_objectSortKeys = props.objectSortKeys) !== null && _props_objectSortKeys !== void 0 ? _props_objectSortKeys : false,
+      quotesOnKeys: (_props_quotesOnKeys = props.quotesOnKeys) !== null && _props_quotesOnKeys !== void 0 ? _props_quotesOnKeys : true,
+      displayDataTypes: (_props_displayDataTypes = props.displayDataTypes) !== null && _props_displayDataTypes !== void 0 ? _props_displayDataTypes : true,
+      displaySize: (_props_displaySize = props.displaySize) !== null && _props_displaySize !== void 0 ? _props_displaySize : true,
+      displayComma: (_props_displayComma = props.displayComma) !== null && _props_displayComma !== void 0 ? _props_displayComma : false,
+      highlightUpdates: (_props_highlightUpdates = props.highlightUpdates) !== null && _props_highlightUpdates !== void 0 ? _props_highlightUpdates : false,
+      // internal state
+      inspectCache: {},
+      hoverPath: null,
+      colorspace: lightColorspace,
+      value: props.value,
+      prevValue: void 0,
+      getInspectCache: (path, nestedIndex) => {
+        const target = nestedIndex !== void 0 ? path.join(".") + "[".concat(nestedIndex, "]nt") : path.join(".");
+        return get().inspectCache[target];
+      },
+      setInspectCache: (path, action, nestedIndex) => {
+        const target = nestedIndex !== void 0 ? path.join(".") + "[".concat(nestedIndex, "]nt") : path.join(".");
+        set((state) => ({
+          inspectCache: {
+            ...state.inspectCache,
+            [target]: typeof action === "function" ? action(state.inspectCache[target]) : action
+          }
+        }));
+      },
+      setHover: (path, nestedIndex) => {
+        set({
+          hoverPath: path ? {
+            path,
+            nestedIndex
+          } : null
+        });
+      }
+    };
+  });
+};
+var JsonViewerStoreContext = createContext9(void 0);
+JsonViewerStoreContext.Provider;
+var useJsonViewerStore = (selector2, equalityFn) => {
+  const store = useContext16(JsonViewerStoreContext);
+  return useStore(store, selector2, equalityFn);
+};
+var useTextColor = () => {
+  return useJsonViewerStore((store) => store.colorspace.base07);
+};
+var objectCtorString = Object.prototype.constructor.toString();
+function isPlainObject(value) {
+  if (!value || typeof value !== "object") return false;
+  const proto = Object.getPrototypeOf(value);
+  if (proto === null) return true;
+  const Ctor = Object.hasOwnProperty.call(proto, "constructor") && proto.constructor;
+  if (Ctor === Object) return true;
+  return typeof Ctor === "function" && Function.toString.call(Ctor) === objectCtorString;
+}
+var isCycleReference = (root, path, value) => {
+  if (root === null || value === null) {
+    return false;
   }
-  if (payload.is_allowed) {
-    return "implicitly_allowed";
+  if (typeof root !== "object") {
+    return false;
   }
-  return "implicitly_denied";
-}
-function formatPermissionStatus(status) {
-  switch (status) {
-    case "explicitly_allowed": {
-      return "Explicitly Allowed";
-    }
-    case "explicitly_denied": {
-      return "Explicitly Denied";
-    }
-    case "implicitly_allowed": {
-      return "Implicitly Allowed";
+  if (typeof value !== "object") {
+    return false;
+  }
+  if (Object.is(root, value) && path.length !== 0) {
+    return "";
+  }
+  const currentPath = [];
+  const arr = [
+    ...path
+  ];
+  let currentRoot = root;
+  while (currentRoot !== value || arr.length !== 0) {
+    if (typeof currentRoot !== "object" || currentRoot === null) {
+      return false;
     }
-    case "implicitly_denied": {
-      return "Implicitly Denied";
+    if (Object.is(currentRoot, value)) {
+      return currentPath.reduce((path2, value2, currentIndex) => {
+        if (typeof value2 === "number") {
+          return path2 + "[".concat(value2, "]");
+        }
+        return path2 + "".concat(currentIndex === 0 ? "" : ".").concat(value2);
+      }, "");
     }
+    const target = arr.shift();
+    currentPath.push(target);
+    currentRoot = currentRoot[target];
+  }
+  return false;
+};
+function getValueSize(value) {
+  if (value === null || void 0) {
+    return 0;
+  } else if (Array.isArray(value)) {
+    return value.length;
+  } else if (value instanceof Map || value instanceof Set) {
+    return value.size;
+  } else if (value instanceof Date) {
+    return 1;
+  } else if (typeof value === "object") {
+    return Object.keys(value).length;
+  } else if (typeof value === "string") {
+    return value.length;
   }
+  return 1;
 }
-function getPermissionStatusColor(status) {
-  switch (status) {
-    case "explicitly_allowed":
-    case "implicitly_allowed": {
-      return "success.main";
-    }
-    case "explicitly_denied": {
-      return "error.main";
-    }
-    case "implicitly_denied": {
-      return "warning.main";
-    }
+function segmentArray(arr, size) {
+  const result = [];
+  let index2 = 0;
+  while (index2 < arr.length) {
+    result.push(arr.slice(index2, index2 + size));
+    index2 += size;
   }
+  return result;
 }
-function parseIAMEvent(payloadString) {
-  try {
-    const payload = JSON.parse(payloadString);
-    const permission = determinePermissionStatus(payload);
-    const actions = [];
-    const resources = [];
-    if (payload.explicit_allows) {
-      for (const allow of payload.explicit_allows) {
-        if (!actions.includes(allow.action)) actions.push(allow.action);
-        if (!resources.includes(allow.resource)) resources.push(allow.resource);
+function safeStringify(obj, space) {
+  const seenValues = [];
+  function replacer(key, value) {
+    if (typeof value === "bigint") return value.toString();
+    if (value instanceof Map) {
+      if ("toJSON" in value && typeof value.toJSON === "function") return value.toJSON();
+      if (value.size === 0) return {};
+      if (seenValues.includes(value)) return "[Circular]";
+      seenValues.push(value);
+      const entries = Array.from(value.entries());
+      if (entries.every((param) => {
+        let [key2] = param;
+        return typeof key2 === "string" || typeof key2 === "number";
+      })) {
+        return Object.fromEntries(entries);
       }
+      return {};
     }
-    if (payload.explicit_denies) {
-      for (const deny of payload.explicit_denies) {
-        if (!actions.includes(deny.action)) actions.push(deny.action);
-        if (!resources.includes(deny.resource)) resources.push(deny.resource);
+    if (value instanceof Set) {
+      if ("toJSON" in value && typeof value.toJSON === "function") return value.toJSON();
+      if (seenValues.includes(value)) return "[Circular]";
+      seenValues.push(value);
+      return Array.from(value.values());
+    }
+    if (typeof value === "object" && value !== null && Object.keys(value).length) {
+      const stackSize = seenValues.length;
+      if (stackSize) {
+        for (let n2 = stackSize - 1; n2 >= 0 && seenValues[n2][key] !== value; --n2) {
+          seenValues.pop();
+        }
+        if (seenValues.includes(value)) return "[Circular]";
       }
+      seenValues.push(value);
     }
-    if (payload.implicit_denies) {
-      for (const deny of payload.implicit_denies) {
-        if (!actions.includes(deny.action)) actions.push(deny.action);
-        if (!resources.includes(deny.resource)) resources.push(deny.resource);
-      }
+    return value;
+  }
+  return JSON.stringify(obj, replacer, space);
+}
+async function copyString(value) {
+  if ("clipboard" in navigator) {
+    try {
+      await navigator.clipboard.writeText(value);
+    } catch {
     }
-    return {
-      details: {
-        actions,
-        explicitAllows: payload.explicit_allow_count,
-        explicitDenies: payload.explicit_deny_count,
-        implicitDenies: payload.implicit_deny_count,
-        resources
-      },
-      operation: payload.operation,
-      permission,
-      principal: payload.principal_arn,
-      service: payload.service
-    };
-  } catch (error) {
-    console.error("Error parsing IAM event payload:", error);
-    return void 0;
   }
+  (0, import_copy_to_clipboard.default)(value);
 }
-
-// src/utils/event-utils.ts
-var iamEventParser = (eventName, attributes) => {
-  if (attributes?.payload && typeof attributes.payload === "string") {
-    const parsedIAM = parseIAMEvent(attributes.payload);
-    if (parsedIAM) {
-      const headline2 = `${parsedIAM.service}:${parsedIAM.operation} - ${formatPermissionStatus(parsedIAM.permission)}`;
-      const messageParts = [`Principal: ${parsedIAM.principal}`];
-      if (parsedIAM.details.actions && parsedIAM.details.actions.length > 0) {
-        messageParts.push(`Actions: ${parsedIAM.details.actions.join(", ")}`);
-      }
-      if (parsedIAM.details.resources && parsedIAM.details.resources.length > 0) {
-        messageParts.push(`Resources: ${parsedIAM.details.resources.join(", ")}`);
-      }
-      const detailsParts = [];
-      if (parsedIAM.details.explicitAllows !== void 0) {
-        detailsParts.push(`Explicit Allows: ${String(parsedIAM.details.explicitAllows)}`);
-      }
-      if (parsedIAM.details.explicitDenies !== void 0) {
-        detailsParts.push(`Explicit Denies: ${String(parsedIAM.details.explicitDenies)}`);
+function useClipboard() {
+  let { timeout = 2e3 } = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+  const [copied, setCopied] = useState8(false);
+  const copyTimeout = useRef11(null);
+  const handleCopyResult = useCallback8((value) => {
+    const current = copyTimeout.current;
+    if (current) {
+      window.clearTimeout(current);
+    }
+    copyTimeout.current = window.setTimeout(() => setCopied(false), timeout);
+    setCopied(value);
+  }, [
+    timeout
+  ]);
+  const onCopy = useJsonViewerStore((store) => store.onCopy);
+  const copy = useCallback8(async (path, value) => {
+    if (typeof onCopy === "function") {
+      try {
+        await onCopy(path, value, copyString);
+        handleCopyResult(true);
+      } catch (error) {
+        console.error("error when copy ".concat(path.length === 0 ? "src" : "src[".concat(path.join(".")), "]"), error);
       }
-      if (parsedIAM.details.implicitDenies !== void 0) {
-        detailsParts.push(`Implicit Denies: ${String(parsedIAM.details.implicitDenies)}`);
+    } else {
+      try {
+        const valueToCopy = safeStringify(typeof value === "function" ? value.toString() : value, "  ");
+        await copyString(valueToCopy);
+        handleCopyResult(true);
+      } catch (error) {
+        console.error("error when copy ".concat(path.length === 0 ? "src" : "src[".concat(path.join(".")), "]"), error);
       }
-      return {
-        details: detailsParts.join("\n"),
-        headline: headline2,
-        message: messageParts.join("\n")
-      };
     }
+  }, [
+    handleCopyResult,
+    onCopy
+  ]);
+  const reset = useCallback8(() => {
+    setCopied(false);
+    if (copyTimeout.current) {
+      clearTimeout(copyTimeout.current);
+    }
+  }, []);
+  return {
+    copy,
+    reset,
+    copied
+  };
+}
+function useIsCycleReference(path, value) {
+  const rootValue = useJsonViewerStore((store) => store.value);
+  return useMemo7(() => isCycleReference(rootValue, path, value), [
+    path,
+    value,
+    rootValue
+  ]);
+}
+function useInspect(path, value, nestedIndex) {
+  const depth = path.length;
+  const isTrap = useIsCycleReference(path, value);
+  const getInspectCache = useJsonViewerStore((store) => store.getInspectCache);
+  const setInspectCache = useJsonViewerStore((store) => store.setInspectCache);
+  const defaultInspectDepth = useJsonViewerStore((store) => store.defaultInspectDepth);
+  const defaultInspectControl = useJsonViewerStore((store) => store.defaultInspectControl);
+  useEffect15(() => {
+    const inspect2 = getInspectCache(path, nestedIndex);
+    if (inspect2 !== void 0) {
+      return;
+    }
+    if (nestedIndex !== void 0) {
+      setInspectCache(path, false, nestedIndex);
+      return;
+    }
+    const shouldInspect = isTrap ? false : typeof defaultInspectControl === "function" ? defaultInspectControl(path, value) : depth < defaultInspectDepth;
+    setInspectCache(path, shouldInspect);
+  }, [
+    defaultInspectDepth,
+    defaultInspectControl,
+    depth,
+    getInspectCache,
+    isTrap,
+    nestedIndex,
+    path,
+    value,
+    setInspectCache
+  ]);
+  const [inspect, set] = useState8(() => {
+    const shouldInspect = getInspectCache(path, nestedIndex);
+    if (shouldInspect !== void 0) {
+      return shouldInspect;
+    }
+    if (nestedIndex !== void 0) {
+      return false;
+    }
+    return isTrap ? false : typeof defaultInspectControl === "function" ? defaultInspectControl(path, value) : depth < defaultInspectDepth;
+  });
+  const setInspect = useCallback8((apply) => {
+    set((oldState) => {
+      const newState = typeof apply === "boolean" ? apply : apply(oldState);
+      setInspectCache(path, newState, nestedIndex);
+      return newState;
+    });
+  }, [
+    nestedIndex,
+    path,
+    setInspectCache
+  ]);
+  return [
+    inspect,
+    setInspect
+  ];
+}
+var DataBox = (props) => /* @__PURE__ */ jsx129(Box6, {
+  component: "div",
+  ...props,
+  sx: {
+    display: "inline-block",
+    ...props.sx
   }
-  const headline = eventName || "IAM Event";
+});
+var DataTypeLabel = (param) => {
+  let { dataType, enable = true } = param;
+  if (!enable) return null;
+  return /* @__PURE__ */ jsx129(DataBox, {
+    className: "data-type-label",
+    sx: {
+      mx: 0.5,
+      fontSize: "0.7rem",
+      opacity: 0.8,
+      userSelect: "none"
+    },
+    children: dataType
+  });
+};
+function defineEasyType(param) {
+  let { is, serialize, deserialize, type, colorKey, displayTypeLabel = true, Renderer } = param;
+  const Render = /* @__PURE__ */ memo9(Renderer);
+  const EasyType = (props) => {
+    const storeDisplayDataTypes = useJsonViewerStore((store) => store.displayDataTypes);
+    const color2 = useJsonViewerStore((store) => store.colorspace[colorKey]);
+    const onSelect = useJsonViewerStore((store) => store.onSelect);
+    return /* @__PURE__ */ jsxs123(DataBox, {
+      onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(props.path, props.value),
+      sx: {
+        color: color2
+      },
+      children: [
+        displayTypeLabel && storeDisplayDataTypes && /* @__PURE__ */ jsx129(DataTypeLabel, {
+          dataType: type
+        }),
+        /* @__PURE__ */ jsx129(DataBox, {
+          className: "".concat(type, "-value"),
+          children: /* @__PURE__ */ jsx129(Render, {
+            path: props.path,
+            inspect: props.inspect,
+            setInspect: props.setInspect,
+            value: props.value,
+            prevValue: props.prevValue
+          })
+        })
+      ]
+    });
+  };
+  EasyType.displayName = "easy-".concat(type, "-type");
+  if (!serialize || !deserialize) {
+    return {
+      is,
+      Component: EasyType
+    };
+  }
+  const EasyTypeEditor = (param2) => {
+    let { value, setValue, abortEditing, commitEditing } = param2;
+    const color2 = useJsonViewerStore((store) => store.colorspace[colorKey]);
+    const handleKeyDown = useCallback8((event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        commitEditing(value);
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        abortEditing();
+      }
+    }, [
+      abortEditing,
+      commitEditing,
+      value
+    ]);
+    const handleChange = useCallback8((event) => {
+      setValue(event.target.value);
+    }, [
+      setValue
+    ]);
+    return /* @__PURE__ */ jsx129(InputBase, {
+      autoFocus: true,
+      value,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      size: "small",
+      multiline: true,
+      sx: {
+        color: color2,
+        padding: 0.5,
+        borderStyle: "solid",
+        borderColor: "black",
+        borderWidth: 1,
+        fontSize: "0.8rem",
+        fontFamily: "monospace",
+        display: "inline-flex"
+      }
+    });
+  };
+  EasyTypeEditor.displayName = "easy-".concat(type, "-type-editor");
+  return {
+    is,
+    serialize,
+    deserialize,
+    Component: EasyType,
+    Editor: EasyTypeEditor
+  };
+}
+var booleanType = defineEasyType({
+  is: (value) => typeof value === "boolean",
+  type: "bool",
+  colorKey: "base0E",
+  serialize: (value) => value.toString(),
+  deserialize: (value) => {
+    if (value === "true") return true;
+    if (value === "false") return false;
+    throw new Error("Invalid boolean value");
+  },
+  Renderer: (param) => {
+    let { value } = param;
+    return /* @__PURE__ */ jsx129(Fragment5, {
+      children: value ? "true" : "false"
+    });
+  }
+});
+var displayOptions = {
+  weekday: "short",
+  year: "numeric",
+  month: "short",
+  day: "numeric",
+  hour: "2-digit",
+  minute: "2-digit"
+};
+var dateType = defineEasyType({
+  is: (value) => value instanceof Date,
+  type: "date",
+  colorKey: "base0D",
+  Renderer: (param) => {
+    let { value } = param;
+    return /* @__PURE__ */ jsx129(Fragment5, {
+      children: value.toLocaleTimeString("en-us", displayOptions)
+    });
+  }
+});
+var functionBody = (func) => {
+  const funcString = func.toString();
+  let isUsualFunction = true;
+  const parenthesisPos = funcString.indexOf(")");
+  const arrowPos = funcString.indexOf("=>");
+  if (arrowPos !== -1 && arrowPos > parenthesisPos) {
+    isUsualFunction = false;
+  }
+  if (isUsualFunction) {
+    return funcString.substring(funcString.indexOf("{", parenthesisPos) + 1, funcString.lastIndexOf("}"));
+  }
+  return funcString.substring(funcString.indexOf("=>") + 2);
+};
+var functionName = (func) => {
+  const funcString = func.toString();
+  const isUsualFunction = funcString.indexOf("function") !== -1;
+  if (isUsualFunction) {
+    return funcString.substring(8, funcString.indexOf("{")).trim();
+  }
+  return funcString.substring(0, funcString.indexOf("=>") + 2).trim();
+};
+var lb = "{";
+var rb = "}";
+var PreFunctionType = (props) => {
+  return /* @__PURE__ */ jsxs123(NoSsr, {
+    children: [
+      /* @__PURE__ */ jsx129(DataTypeLabel, {
+        dataType: "function"
+      }),
+      /* @__PURE__ */ jsxs123(Box6, {
+        component: "span",
+        className: "data-function-start",
+        sx: {
+          letterSpacing: 0.5
+        },
+        children: [
+          functionName(props.value),
+          " ",
+          lb
+        ]
+      })
+    ]
+  });
+};
+var PostFunctionType = () => {
+  return /* @__PURE__ */ jsx129(NoSsr, {
+    children: /* @__PURE__ */ jsx129(Box6, {
+      component: "span",
+      className: "data-function-end",
+      children: rb
+    })
+  });
+};
+var FunctionType = (props) => {
+  const functionColor = useJsonViewerStore((store) => store.colorspace.base05);
+  return /* @__PURE__ */ jsx129(NoSsr, {
+    children: /* @__PURE__ */ jsx129(Box6, {
+      className: "data-function",
+      sx: {
+        display: props.inspect ? "block" : "inline-block",
+        pl: props.inspect ? 2 : 0,
+        color: functionColor
+      },
+      children: props.inspect ? functionBody(props.value) : /* @__PURE__ */ jsx129(Box6, {
+        component: "span",
+        className: "data-function-body",
+        onClick: () => props.setInspect(true),
+        sx: {
+          "&:hover": {
+            cursor: "pointer"
+          },
+          padding: 0.5
+        },
+        children: "\u2026"
+      })
+    })
+  });
+};
+var functionType = {
+  is: (value) => typeof value === "function",
+  Component: FunctionType,
+  PreComponent: PreFunctionType,
+  PostComponent: PostFunctionType
+};
+var nullType = defineEasyType({
+  is: (value) => value === null,
+  type: "null",
+  colorKey: "base08",
+  displayTypeLabel: false,
+  Renderer: () => {
+    const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
+    return /* @__PURE__ */ jsx129(Box6, {
+      sx: {
+        fontSize: "0.8rem",
+        backgroundColor,
+        fontWeight: "bold",
+        borderRadius: "3px",
+        padding: "0.5px 2px"
+      },
+      children: "NULL"
+    });
+  }
+});
+var isInt = (n2) => n2 % 1 === 0;
+var nanType = defineEasyType({
+  is: (value) => typeof value === "number" && isNaN(value),
+  type: "NaN",
+  colorKey: "base08",
+  displayTypeLabel: false,
+  serialize: () => "NaN",
+  // allow deserialize the value back to number
+  deserialize: (value) => parseFloat(value),
+  Renderer: () => {
+    const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
+    return /* @__PURE__ */ jsx129(Box6, {
+      sx: {
+        backgroundColor,
+        fontSize: "0.8rem",
+        fontWeight: "bold",
+        borderRadius: "3px",
+        padding: "0.5px 2px"
+      },
+      children: "NaN"
+    });
+  }
+});
+var floatType = defineEasyType({
+  is: (value) => typeof value === "number" && !isInt(value) && !isNaN(value),
+  type: "float",
+  colorKey: "base0B",
+  serialize: (value) => value.toString(),
+  deserialize: (value) => parseFloat(value),
+  Renderer: (param) => {
+    let { value } = param;
+    return /* @__PURE__ */ jsx129(Fragment5, {
+      children: value
+    });
+  }
+});
+var intType = defineEasyType({
+  is: (value) => typeof value === "number" && isInt(value),
+  type: "int",
+  colorKey: "base0F",
+  serialize: (value) => value.toString(),
+  // allow deserialize the value to float
+  deserialize: (value) => parseFloat(value),
+  Renderer: (param) => {
+    let { value } = param;
+    return /* @__PURE__ */ jsx129(Fragment5, {
+      children: value
+    });
+  }
+});
+var bigIntType = defineEasyType({
+  is: (value) => typeof value === "bigint",
+  type: "bigint",
+  colorKey: "base0F",
+  serialize: (value) => value.toString(),
+  deserialize: (value) => BigInt(value.replace(/\D/g, "")),
+  Renderer: (param) => {
+    let { value } = param;
+    return /* @__PURE__ */ jsx129(Fragment5, {
+      children: "".concat(value, "n")
+    });
+  }
+});
+var BaseIcon = (param) => {
+  let { d: d2, ...props } = param;
+  return /* @__PURE__ */ jsx129(SvgIcon, {
+    ...props,
+    children: /* @__PURE__ */ jsx129("path", {
+      d: d2
+    })
+  });
+};
+var AddBox = "M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 16H5V5h14zm-8-2h2v-4h4v-2h-4V7h-2v4H7v2h4z";
+var Check = "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z";
+var ChevronRight = "M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z";
+var CircularArrows = "M 12 2 C 10.615 1.998 9.214625 2.2867656 7.890625 2.8847656 L 8.9003906 4.6328125 C 9.9043906 4.2098125 10.957 3.998 12 4 C 15.080783 4 17.738521 5.7633175 19.074219 8.3222656 L 17.125 9 L 21.25 11 L 22.875 7 L 20.998047 7.6523438 C 19.377701 4.3110398 15.95585 2 12 2 z M 6.5097656 4.4882812 L 2.2324219 5.0820312 L 3.734375 6.3808594 C 1.6515335 9.4550558 1.3615962 13.574578 3.3398438 17 C 4.0308437 18.201 4.9801562 19.268234 6.1601562 20.115234 L 7.1699219 18.367188 C 6.3019219 17.710187 5.5922656 16.904 5.0722656 16 C 3.5320014 13.332354 3.729203 10.148679 5.2773438 7.7128906 L 6.8398438 9.0625 L 6.5097656 4.4882812 z M 19.929688 13 C 19.794687 14.08 19.450734 15.098 18.927734 16 C 17.386985 18.668487 14.531361 20.090637 11.646484 19.966797 L 12.035156 17.9375 L 8.2402344 20.511719 L 10.892578 23.917969 L 11.265625 21.966797 C 14.968963 22.233766 18.681899 20.426323 20.660156 17 C 21.355156 15.801 21.805219 14.445 21.949219 13 L 19.929688 13 z";
+var Close = "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z";
+var ContentCopy = "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z";
+var Edit = "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z";
+var ExpandMore = "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z";
+var Delete = "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zM8 9h8v10H8zm7.5-5l-1-1h-5l-1 1H5v2h14V4z";
+var AddBoxIcon = (props) => {
+  return /* @__PURE__ */ jsx129(BaseIcon, {
+    d: AddBox,
+    ...props
+  });
+};
+var CheckIcon = (props) => {
+  return /* @__PURE__ */ jsx129(BaseIcon, {
+    d: Check,
+    ...props
+  });
+};
+var ChevronRightIcon = (props) => {
+  return /* @__PURE__ */ jsx129(BaseIcon, {
+    d: ChevronRight,
+    ...props
+  });
+};
+var CircularArrowsIcon = (props) => {
+  return /* @__PURE__ */ jsx129(BaseIcon, {
+    d: CircularArrows,
+    ...props
+  });
+};
+var CloseIcon = (props) => {
+  return /* @__PURE__ */ jsx129(BaseIcon, {
+    d: Close,
+    ...props
+  });
+};
+var ContentCopyIcon = (props) => {
+  return /* @__PURE__ */ jsx129(BaseIcon, {
+    d: ContentCopy,
+    ...props
+  });
+};
+var EditIcon = (props) => {
+  return /* @__PURE__ */ jsx129(BaseIcon, {
+    d: Edit,
+    ...props
+  });
+};
+var ExpandMoreIcon = (props) => {
+  return /* @__PURE__ */ jsx129(BaseIcon, {
+    d: ExpandMore,
+    ...props
+  });
+};
+var DeleteIcon = (props) => {
+  return /* @__PURE__ */ jsx129(BaseIcon, {
+    d: Delete,
+    ...props
+  });
+};
+var objectLb = "{";
+var arrayLb = "[";
+var objectRb = "}";
+var arrayRb = "]";
+function inspectMetadata(value) {
+  const length = getValueSize(value);
+  let name = "";
+  if (value instanceof Map || value instanceof Set) {
+    name = value[Symbol.toStringTag];
+  }
+  if (Object.prototype.hasOwnProperty.call(value, Symbol.toStringTag)) {
+    name = value[Symbol.toStringTag];
+  }
+  return "".concat(length, " Items").concat(name ? " (".concat(name, ")") : "");
+}
+var PreObjectType = (props) => {
+  const metadataColor = useJsonViewerStore((store) => store.colorspace.base04);
+  const textColor = useTextColor();
+  const isArrayLike = useMemo7(() => Array.isArray(props.value) || props.value instanceof Set, [
+    props.value
+  ]);
+  const isEmptyValue = useMemo7(() => getValueSize(props.value) === 0, [
+    props.value
+  ]);
+  const sizeOfValue = useMemo7(() => inspectMetadata(props.value), [
+    props.value
+  ]);
+  const displaySize = useJsonViewerStore((store) => store.displaySize);
+  const shouldDisplaySize = useMemo7(() => typeof displaySize === "function" ? displaySize(props.path, props.value) : displaySize, [
+    displaySize,
+    props.path,
+    props.value
+  ]);
+  const isTrap = useIsCycleReference(props.path, props.value);
+  return /* @__PURE__ */ jsxs123(Box6, {
+    component: "span",
+    className: "data-object-start",
+    sx: {
+      letterSpacing: 0.5
+    },
+    children: [
+      isArrayLike ? arrayLb : objectLb,
+      shouldDisplaySize && props.inspect && !isEmptyValue && /* @__PURE__ */ jsx129(Box6, {
+        component: "span",
+        sx: {
+          pl: 0.5,
+          fontStyle: "italic",
+          color: metadataColor,
+          userSelect: "none"
+        },
+        children: sizeOfValue
+      }),
+      isTrap && !props.inspect && /* @__PURE__ */ jsxs123(Fragment5, {
+        children: [
+          /* @__PURE__ */ jsx129(CircularArrowsIcon, {
+            sx: {
+              fontSize: 12,
+              color: textColor,
+              mx: 0.5
+            }
+          }),
+          /* @__PURE__ */ jsx129(DataBox, {
+            sx: {
+              cursor: "pointer",
+              userSelect: "none"
+            },
+            children: isTrap
+          })
+        ]
+      })
+    ]
+  });
+};
+var PostObjectType = (props) => {
+  const metadataColor = useJsonViewerStore((store) => store.colorspace.base04);
+  const textColor = useTextColor();
+  const isArrayLike = useMemo7(() => Array.isArray(props.value) || props.value instanceof Set, [
+    props.value
+  ]);
+  const isEmptyValue = useMemo7(() => getValueSize(props.value) === 0, [
+    props.value
+  ]);
+  const sizeOfValue = useMemo7(() => inspectMetadata(props.value), [
+    props.value
+  ]);
+  const displaySize = useJsonViewerStore((store) => store.displaySize);
+  const shouldDisplaySize = useMemo7(() => typeof displaySize === "function" ? displaySize(props.path, props.value) : displaySize, [
+    displaySize,
+    props.path,
+    props.value
+  ]);
+  return /* @__PURE__ */ jsxs123(Box6, {
+    component: "span",
+    className: "data-object-end",
+    sx: {
+      lineHeight: 1.5,
+      color: textColor,
+      letterSpacing: 0.5,
+      opacity: 0.8
+    },
+    children: [
+      isArrayLike ? arrayRb : objectRb,
+      shouldDisplaySize && (isEmptyValue || !props.inspect) ? /* @__PURE__ */ jsx129(Box6, {
+        component: "span",
+        sx: {
+          pl: 0.5,
+          fontStyle: "italic",
+          color: metadataColor,
+          userSelect: "none"
+        },
+        children: sizeOfValue
+      }) : null
+    ]
+  });
+};
+function getIterator(value) {
+  return typeof (value === null || value === void 0 ? void 0 : value[Symbol.iterator]) === "function";
+}
+var ObjectType = (props) => {
+  const keyColor = useTextColor();
+  const borderColor = useJsonViewerStore((store) => store.colorspace.base02);
+  const groupArraysAfterLength = useJsonViewerStore((store) => store.groupArraysAfterLength);
+  const isTrap = useIsCycleReference(props.path, props.value);
+  const [displayLength, setDisplayLength] = useState8(useJsonViewerStore((store) => store.maxDisplayLength));
+  const objectSortKeys = useJsonViewerStore((store) => store.objectSortKeys);
+  const elements = useMemo7(() => {
+    if (!props.inspect) {
+      return null;
+    }
+    const value = props.value;
+    const iterator = getIterator(value);
+    if (iterator && !Array.isArray(value)) {
+      const elements3 = [];
+      if (value instanceof Map) {
+        const lastIndex2 = value.size - 1;
+        let index2 = 0;
+        value.forEach((value2, k2) => {
+          const key = k2.toString();
+          const path = [
+            ...props.path,
+            key
+          ];
+          elements3.push(/* @__PURE__ */ jsx129(DataKeyPair, {
+            path,
+            value: value2,
+            prevValue: props.prevValue instanceof Map ? props.prevValue.get(k2) : void 0,
+            editable: false,
+            last: index2 === lastIndex2
+          }, key));
+          index2++;
+        });
+      } else {
+        const iterator2 = value[Symbol.iterator]();
+        let result = iterator2.next();
+        let count2 = 0;
+        while (true) {
+          const nextResult = iterator2.next();
+          var _nextResult_done;
+          elements3.push(/* @__PURE__ */ jsx129(DataKeyPair, {
+            path: [
+              ...props.path,
+              "iterator:".concat(count2)
+            ],
+            value: result.value,
+            nestedIndex: count2,
+            editable: false,
+            last: (_nextResult_done = nextResult.done) !== null && _nextResult_done !== void 0 ? _nextResult_done : false
+          }, count2));
+          if (nextResult.done) {
+            break;
+          }
+          count2++;
+          result = nextResult;
+        }
+      }
+      return elements3;
+    }
+    if (Array.isArray(value)) {
+      const lastIndex2 = value.length - 1;
+      if (value.length <= groupArraysAfterLength) {
+        const elements4 = value.slice(0, displayLength).map((value2, _index) => {
+          const index2 = props.nestedIndex ? props.nestedIndex * groupArraysAfterLength + _index : _index;
+          const path = [
+            ...props.path,
+            index2
+          ];
+          return /* @__PURE__ */ jsx129(DataKeyPair, {
+            path,
+            value: value2,
+            prevValue: Array.isArray(props.prevValue) ? props.prevValue[index2] : void 0,
+            last: _index === lastIndex2
+          }, index2);
+        });
+        if (value.length > displayLength) {
+          const rest = value.length - displayLength;
+          elements4.push(/* @__PURE__ */ jsxs123(DataBox, {
+            sx: {
+              cursor: "pointer",
+              lineHeight: 1.5,
+              color: keyColor,
+              letterSpacing: 0.5,
+              opacity: 0.8,
+              userSelect: "none"
+            },
+            onClick: () => setDisplayLength((length) => length * 2),
+            children: [
+              "hidden ",
+              rest,
+              " items\u2026"
+            ]
+          }, "last"));
+        }
+        return elements4;
+      }
+      const elements3 = segmentArray(value, groupArraysAfterLength);
+      const prevElements = Array.isArray(props.prevValue) ? segmentArray(props.prevValue, groupArraysAfterLength) : void 0;
+      const elementsLastIndex = elements3.length - 1;
+      return elements3.map((list, index2) => {
+        return /* @__PURE__ */ jsx129(DataKeyPair, {
+          path: props.path,
+          value: list,
+          nestedIndex: index2,
+          prevValue: prevElements === null || prevElements === void 0 ? void 0 : prevElements[index2],
+          last: index2 === elementsLastIndex
+        }, index2);
+      });
+    }
+    let entries = Object.entries(value);
+    if (objectSortKeys) {
+      entries = objectSortKeys === true ? entries.sort((param, param1) => {
+        let [a3] = param, [b3] = param1;
+        return a3.localeCompare(b3);
+      }) : entries.sort((param, param1) => {
+        let [a3] = param, [b3] = param1;
+        return objectSortKeys(a3, b3);
+      });
+    }
+    const lastIndex = entries.length - 1;
+    const elements2 = entries.slice(0, displayLength).map((param, index2) => {
+      let [key, value2] = param;
+      var _props_prevValue;
+      const path = [
+        ...props.path,
+        key
+      ];
+      return /* @__PURE__ */ jsx129(DataKeyPair, {
+        path,
+        value: value2,
+        prevValue: (_props_prevValue = props.prevValue) === null || _props_prevValue === void 0 ? void 0 : _props_prevValue[key],
+        last: index2 === lastIndex
+      }, key);
+    });
+    if (entries.length > displayLength) {
+      const rest = entries.length - displayLength;
+      elements2.push(/* @__PURE__ */ jsxs123(DataBox, {
+        sx: {
+          cursor: "pointer",
+          lineHeight: 1.5,
+          color: keyColor,
+          letterSpacing: 0.5,
+          opacity: 0.8,
+          userSelect: "none"
+        },
+        onClick: () => setDisplayLength((length) => length * 2),
+        children: [
+          "hidden ",
+          rest,
+          " items\u2026"
+        ]
+      }, "last"));
+    }
+    return elements2;
+  }, [
+    props.inspect,
+    props.value,
+    props.prevValue,
+    props.path,
+    props.nestedIndex,
+    groupArraysAfterLength,
+    displayLength,
+    keyColor,
+    objectSortKeys
+  ]);
+  const marginLeft = props.inspect ? 0.6 : 0;
+  const width = useJsonViewerStore((store) => store.indentWidth);
+  const indentWidth = props.inspect ? width - marginLeft : width;
+  const isEmptyValue = useMemo7(() => getValueSize(props.value) === 0, [
+    props.value
+  ]);
+  if (isEmptyValue) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx129(Box6, {
+    className: "data-object",
+    sx: {
+      display: props.inspect ? "block" : "inline-block",
+      pl: props.inspect ? indentWidth - 0.6 : 0,
+      marginLeft,
+      color: keyColor,
+      borderLeft: props.inspect ? "1px solid ".concat(borderColor) : "none"
+    },
+    children: props.inspect ? elements : !isTrap && /* @__PURE__ */ jsx129(Box6, {
+      component: "span",
+      className: "data-object-body",
+      onClick: () => props.setInspect(true),
+      sx: {
+        "&:hover": {
+          cursor: "pointer"
+        },
+        padding: 0.5,
+        userSelect: "none"
+      },
+      children: "\u2026"
+    })
+  });
+};
+var objectType = {
+  is: (value) => typeof value === "object",
+  Component: ObjectType,
+  PreComponent: PreObjectType,
+  PostComponent: PostObjectType
+};
+var stringType = defineEasyType({
+  is: (value) => typeof value === "string",
+  type: "string",
+  colorKey: "base09",
+  serialize: (value) => value,
+  deserialize: (value) => value,
+  Renderer: (props) => {
+    const [showRest, setShowRest] = useState8(false);
+    const collapseStringsAfterLength = useJsonViewerStore((store) => store.collapseStringsAfterLength);
+    const value = showRest ? props.value : props.value.slice(0, collapseStringsAfterLength);
+    const hasRest = props.value.length > collapseStringsAfterLength;
+    return /* @__PURE__ */ jsxs123(Box6, {
+      component: "span",
+      sx: {
+        overflowWrap: "anywhere",
+        cursor: hasRest ? "pointer" : "inherit"
+      },
+      onClick: () => {
+        var _window_getSelection;
+        if (((_window_getSelection = window.getSelection()) === null || _window_getSelection === void 0 ? void 0 : _window_getSelection.type) === "Range") {
+          return;
+        }
+        if (hasRest) {
+          setShowRest((value2) => !value2);
+        }
+      },
+      children: [
+        '"',
+        value,
+        hasRest && !showRest && /* @__PURE__ */ jsx129(Box6, {
+          component: "span",
+          sx: {
+            padding: 0.5
+          },
+          children: "\u2026"
+        }),
+        '"'
+      ]
+    });
+  }
+});
+var undefinedType = defineEasyType({
+  is: (value) => value === void 0,
+  type: "undefined",
+  colorKey: "base05",
+  displayTypeLabel: false,
+  Renderer: () => {
+    const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
+    return /* @__PURE__ */ jsx129(Box6, {
+      sx: {
+        fontSize: "0.7rem",
+        backgroundColor,
+        borderRadius: "3px",
+        padding: "0.5px 2px"
+      },
+      children: "undefined"
+    });
+  }
+});
+function memorizeDataType(dataType) {
+  function compare(prevProps, nextProps) {
+    var _prevProps_path, _nextProps_path;
+    return Object.is(prevProps.value, nextProps.value) && prevProps.inspect && nextProps.inspect && ((_prevProps_path = prevProps.path) === null || _prevProps_path === void 0 ? void 0 : _prevProps_path.join(".")) === ((_nextProps_path = nextProps.path) === null || _nextProps_path === void 0 ? void 0 : _nextProps_path.join("."));
+  }
+  dataType.Component = /* @__PURE__ */ memo9(dataType.Component, compare);
+  if (dataType.Editor) {
+    dataType.Editor = /* @__PURE__ */ memo9(dataType.Editor, function compare2(prevProps, nextProps) {
+      return Object.is(prevProps.value, nextProps.value);
+    });
+  }
+  if (dataType.PreComponent) {
+    dataType.PreComponent = /* @__PURE__ */ memo9(dataType.PreComponent, compare);
+  }
+  if (dataType.PostComponent) {
+    dataType.PostComponent = /* @__PURE__ */ memo9(dataType.PostComponent, compare);
+  }
+  return dataType;
+}
+var predefinedTypes = [
+  memorizeDataType(booleanType),
+  memorizeDataType(dateType),
+  memorizeDataType(nullType),
+  memorizeDataType(undefinedType),
+  memorizeDataType(stringType),
+  memorizeDataType(functionType),
+  memorizeDataType(nanType),
+  memorizeDataType(intType),
+  memorizeDataType(floatType),
+  memorizeDataType(bigIntType)
+];
+var createTypeRegistryStore = () => {
+  return createStore()((set) => ({
+    registry: predefinedTypes,
+    registerTypes: (setState) => {
+      set((state) => ({
+        registry: typeof setState === "function" ? setState(state.registry) : setState
+      }));
+    }
+  }));
+};
+var TypeRegistryStoreContext = /* @__PURE__ */ createContext9(void 0);
+TypeRegistryStoreContext.Provider;
+var useTypeRegistryStore = (selector2, equalityFn) => {
+  const store = useContext16(TypeRegistryStoreContext);
+  return useStore(store, selector2, equalityFn);
+};
+function matchTypeComponents(value, path, registry) {
+  let potential;
+  for (const T of registry) {
+    if (T.is(value, path)) {
+      potential = T;
+    }
+  }
+  if (potential === void 0) {
+    if (typeof value === "object") {
+      return objectType;
+    }
+    throw new Error("No type matched for value: ".concat(value));
+  }
+  return potential;
+}
+function useTypeComponents(value, path) {
+  const registry = useTypeRegistryStore((store) => store.registry);
+  return useMemo7(() => matchTypeComponents(value, path, registry), [
+    value,
+    path,
+    registry
+  ]);
+}
+var IconBox = (props) => /* @__PURE__ */ jsx129(Box6, {
+  component: "span",
+  ...props,
+  sx: {
+    cursor: "pointer",
+    paddingLeft: "0.7rem",
+    ...props.sx
+  }
+});
+var DataKeyPair = (props) => {
+  const { value, prevValue, path, nestedIndex, last } = props;
+  const { Component, PreComponent, PostComponent, Editor, serialize, deserialize } = useTypeComponents(value, path);
+  var _props_editable;
+  const propsEditable = (_props_editable = props.editable) !== null && _props_editable !== void 0 ? _props_editable : void 0;
+  const storeEditable = useJsonViewerStore((store) => store.editable);
+  const editable = useMemo7(() => {
+    if (storeEditable === false) {
+      return false;
+    }
+    if (propsEditable === false) {
+      return false;
+    }
+    if (typeof storeEditable === "function") {
+      return !!storeEditable(path, value);
+    }
+    return storeEditable;
+  }, [
+    path,
+    propsEditable,
+    storeEditable,
+    value
+  ]);
+  const [tempValue, setTempValue] = useState8("");
+  const depth = path.length;
+  const key = path[depth - 1];
+  const hoverPath = useJsonViewerStore((store) => store.hoverPath);
+  const isHover = useMemo7(() => {
+    return hoverPath && path.every((value2, index2) => value2 === hoverPath.path[index2] && nestedIndex === hoverPath.nestedIndex);
+  }, [
+    hoverPath,
+    path,
+    nestedIndex
+  ]);
+  const setHover = useJsonViewerStore((store) => store.setHover);
+  const root = useJsonViewerStore((store) => store.value);
+  const [inspect, setInspect] = useInspect(path, value, nestedIndex);
+  const [editing, setEditing] = useState8(false);
+  const onChange = useJsonViewerStore((store) => store.onChange);
+  const keyColor = useTextColor();
+  const numberKeyColor = useJsonViewerStore((store) => store.colorspace.base0C);
+  const highlightColor = useJsonViewerStore((store) => store.colorspace.base0A);
+  const displayComma = useJsonViewerStore((store) => store.displayComma);
+  const quotesOnKeys = useJsonViewerStore((store) => store.quotesOnKeys);
+  const rootName = useJsonViewerStore((store) => store.rootName);
+  const isRoot = root === value;
+  const isNumberKey = Number.isInteger(Number(key));
+  const storeEnableAdd = useJsonViewerStore((store) => store.enableAdd);
+  const onAdd = useJsonViewerStore((store) => store.onAdd);
+  const enableAdd = useMemo7(() => {
+    if (!onAdd || nestedIndex !== void 0) return false;
+    if (storeEnableAdd === false) {
+      return false;
+    }
+    if (propsEditable === false) {
+      return false;
+    }
+    if (typeof storeEnableAdd === "function") {
+      return !!storeEnableAdd(path, value);
+    }
+    if (Array.isArray(value) || isPlainObject(value)) {
+      return true;
+    }
+    return false;
+  }, [
+    onAdd,
+    nestedIndex,
+    path,
+    storeEnableAdd,
+    propsEditable,
+    value
+  ]);
+  const storeEnableDelete = useJsonViewerStore((store) => store.enableDelete);
+  const onDelete = useJsonViewerStore((store) => store.onDelete);
+  const enableDelete = useMemo7(() => {
+    if (!onDelete || nestedIndex !== void 0) return false;
+    if (isRoot) {
+      return false;
+    }
+    if (storeEnableDelete === false) {
+      return false;
+    }
+    if (propsEditable === false) {
+      return false;
+    }
+    if (typeof storeEnableDelete === "function") {
+      return !!storeEnableDelete(path, value);
+    }
+    return storeEnableDelete;
+  }, [
+    onDelete,
+    nestedIndex,
+    isRoot,
+    path,
+    storeEnableDelete,
+    propsEditable,
+    value
+  ]);
+  const enableClipboard = useJsonViewerStore((store) => store.enableClipboard);
+  const { copy, copied } = useClipboard();
+  const highlightUpdates = useJsonViewerStore((store) => store.highlightUpdates);
+  const isHighlight = useMemo7(() => {
+    if (!highlightUpdates || prevValue === void 0) return false;
+    if (typeof value !== typeof prevValue) {
+      return true;
+    }
+    if (typeof value === "number") {
+      if (isNaN(value) && isNaN(prevValue)) return false;
+      return value !== prevValue;
+    }
+    if (Array.isArray(value) !== Array.isArray(prevValue)) {
+      return true;
+    }
+    if (typeof value === "object" || typeof value === "function") {
+      return false;
+    }
+    if (value !== prevValue) {
+      return true;
+    }
+    return false;
+  }, [
+    highlightUpdates,
+    prevValue,
+    value
+  ]);
+  const highlightContainer = useRef11();
+  useEffect15(() => {
+    if (highlightContainer.current && isHighlight && "animate" in highlightContainer.current) {
+      highlightContainer.current.animate([
+        {
+          backgroundColor: highlightColor
+        },
+        {
+          backgroundColor: ""
+        }
+      ], {
+        duration: 1e3,
+        easing: "ease-in"
+      });
+    }
+  }, [
+    highlightColor,
+    isHighlight,
+    prevValue,
+    value
+  ]);
+  const startEditing = useCallback8((event) => {
+    event.preventDefault();
+    if (serialize) setTempValue(serialize(value));
+    setEditing(true);
+  }, [
+    serialize,
+    value
+  ]);
+  const abortEditing = useCallback8(() => {
+    setEditing(false);
+    setTempValue("");
+  }, [
+    setEditing,
+    setTempValue
+  ]);
+  const commitEditing = useCallback8((newValue) => {
+    setEditing(false);
+    if (!deserialize) return;
+    try {
+      onChange(path, value, deserialize(newValue));
+    } catch (e2) {
+    }
+  }, [
+    setEditing,
+    deserialize,
+    onChange,
+    path,
+    value
+  ]);
+  const actionIcons = useMemo7(() => {
+    if (editing) {
+      return /* @__PURE__ */ jsxs123(Fragment5, {
+        children: [
+          /* @__PURE__ */ jsx129(IconBox, {
+            children: /* @__PURE__ */ jsx129(CloseIcon, {
+              sx: {
+                fontSize: ".8rem"
+              },
+              onClick: abortEditing
+            })
+          }),
+          /* @__PURE__ */ jsx129(IconBox, {
+            children: /* @__PURE__ */ jsx129(CheckIcon, {
+              sx: {
+                fontSize: ".8rem"
+              },
+              onClick: () => commitEditing(tempValue)
+            })
+          })
+        ]
+      });
+    }
+    return /* @__PURE__ */ jsxs123(Fragment5, {
+      children: [
+        enableClipboard && /* @__PURE__ */ jsx129(IconBox, {
+          onClick: (event) => {
+            event.preventDefault();
+            try {
+              copy(path, value, copyString);
+            } catch (e2) {
+              console.error(e2);
+            }
+          },
+          children: copied ? /* @__PURE__ */ jsx129(CheckIcon, {
+            sx: {
+              fontSize: ".8rem"
+            }
+          }) : /* @__PURE__ */ jsx129(ContentCopyIcon, {
+            sx: {
+              fontSize: ".8rem"
+            }
+          })
+        }),
+        Editor && editable && serialize && deserialize && /* @__PURE__ */ jsx129(IconBox, {
+          onClick: startEditing,
+          children: /* @__PURE__ */ jsx129(EditIcon, {
+            sx: {
+              fontSize: ".8rem"
+            }
+          })
+        }),
+        enableAdd && /* @__PURE__ */ jsx129(IconBox, {
+          onClick: (event) => {
+            event.preventDefault();
+            onAdd === null || onAdd === void 0 ? void 0 : onAdd(path);
+          },
+          children: /* @__PURE__ */ jsx129(AddBoxIcon, {
+            sx: {
+              fontSize: ".8rem"
+            }
+          })
+        }),
+        enableDelete && /* @__PURE__ */ jsx129(IconBox, {
+          onClick: (event) => {
+            event.preventDefault();
+            onDelete === null || onDelete === void 0 ? void 0 : onDelete(path, value);
+          },
+          children: /* @__PURE__ */ jsx129(DeleteIcon, {
+            sx: {
+              fontSize: ".9rem"
+            }
+          })
+        })
+      ]
+    });
+  }, [
+    Editor,
+    serialize,
+    deserialize,
+    copied,
+    copy,
+    editable,
+    editing,
+    enableClipboard,
+    enableAdd,
+    enableDelete,
+    tempValue,
+    path,
+    value,
+    onAdd,
+    onDelete,
+    startEditing,
+    abortEditing,
+    commitEditing
+  ]);
+  const isEmptyValue = useMemo7(() => getValueSize(value) === 0, [
+    value
+  ]);
+  const expandable = !isEmptyValue && !!(PreComponent && PostComponent);
+  const KeyRenderer = useJsonViewerStore((store) => store.keyRenderer);
+  const downstreamProps = useMemo7(() => ({
+    path,
+    inspect,
+    setInspect,
+    value,
+    prevValue,
+    nestedIndex
+  }), [
+    inspect,
+    path,
+    setInspect,
+    value,
+    prevValue,
+    nestedIndex
+  ]);
+  return /* @__PURE__ */ jsxs123(Box6, {
+    className: "data-key-pair",
+    "data-testid": "data-key-pair" + path.join("."),
+    sx: {
+      userSelect: "text"
+    },
+    onMouseEnter: useCallback8(() => setHover(path, nestedIndex), [
+      setHover,
+      path,
+      nestedIndex
+    ]),
+    children: [
+      /* @__PURE__ */ jsxs123(DataBox, {
+        component: "span",
+        className: "data-key",
+        sx: {
+          lineHeight: 1.5,
+          color: keyColor,
+          letterSpacing: 0.5,
+          opacity: 0.8
+        },
+        onClick: useCallback8((event) => {
+          if (event.isDefaultPrevented()) {
+            return;
+          }
+          if (!isEmptyValue) {
+            setInspect((state) => !state);
+          }
+        }, [
+          isEmptyValue,
+          setInspect
+        ]),
+        children: [
+          expandable ? inspect ? /* @__PURE__ */ jsx129(ExpandMoreIcon, {
+            className: "data-key-toggle-expanded",
+            sx: {
+              fontSize: ".8rem",
+              "&:hover": {
+                cursor: "pointer"
+              }
+            }
+          }) : /* @__PURE__ */ jsx129(ChevronRightIcon, {
+            className: "data-key-toggle-collapsed",
+            sx: {
+              fontSize: ".8rem",
+              "&:hover": {
+                cursor: "pointer"
+              }
+            }
+          }) : null,
+          /* @__PURE__ */ jsx129(Box6, {
+            ref: highlightContainer,
+            className: "data-key-key",
+            component: "span",
+            children: isRoot && depth === 0 ? rootName !== false ? quotesOnKeys ? /* @__PURE__ */ jsxs123(Fragment5, {
+              children: [
+                '"',
+                rootName,
+                '"'
+              ]
+            }) : /* @__PURE__ */ jsx129(Fragment5, {
+              children: rootName
+            }) : null : KeyRenderer.when(downstreamProps) ? /* @__PURE__ */ jsx129(KeyRenderer, {
+              ...downstreamProps
+            }) : nestedIndex === void 0 && (isNumberKey ? /* @__PURE__ */ jsx129(Box6, {
+              component: "span",
+              style: {
+                color: numberKeyColor,
+                userSelect: isNumberKey ? "none" : "auto"
+              },
+              children: key
+            }) : quotesOnKeys ? /* @__PURE__ */ jsxs123(Fragment5, {
+              children: [
+                '"',
+                key,
+                '"'
+              ]
+            }) : /* @__PURE__ */ jsx129(Fragment5, {
+              children: key
+            }))
+          }),
+          isRoot ? rootName !== false && /* @__PURE__ */ jsx129(DataBox, {
+            className: "data-key-colon",
+            sx: {
+              mr: 0.5
+            },
+            children: ":"
+          }) : nestedIndex === void 0 && /* @__PURE__ */ jsx129(DataBox, {
+            className: "data-key-colon",
+            sx: {
+              mr: 0.5,
+              ".data-key-key:empty + &": {
+                display: "none"
+              },
+              userSelect: isNumberKey ? "none" : "auto"
+            },
+            children: ":"
+          }),
+          PreComponent && /* @__PURE__ */ jsx129(PreComponent, {
+            ...downstreamProps
+          }),
+          isHover && expandable && inspect && actionIcons
+        ]
+      }),
+      editing && editable ? Editor && /* @__PURE__ */ jsx129(Editor, {
+        path,
+        value: tempValue,
+        setValue: setTempValue,
+        abortEditing,
+        commitEditing
+      }) : Component ? /* @__PURE__ */ jsx129(Component, {
+        ...downstreamProps
+      }) : /* @__PURE__ */ jsx129(Box6, {
+        component: "span",
+        className: "data-value-fallback",
+        children: "fallback: ".concat(value)
+      }),
+      PostComponent && /* @__PURE__ */ jsx129(PostComponent, {
+        ...downstreamProps
+      }),
+      !last && displayComma && /* @__PURE__ */ jsx129(DataBox, {
+        children: ","
+      }),
+      isHover && expandable && !inspect && actionIcons,
+      isHover && !expandable && actionIcons,
+      !isHover && editing && actionIcons
+    ]
+  });
+};
+var query = "(prefers-color-scheme: dark)";
+function useThemeDetector() {
+  const [isDark, setIsDark] = useState8(false);
+  useEffect15(() => {
+    const listener = (e2) => setIsDark(e2.matches);
+    setIsDark(window.matchMedia(query).matches);
+    const queryMedia = window.matchMedia(query);
+    queryMedia.addEventListener("change", listener);
+    return () => queryMedia.removeEventListener("change", listener);
+  }, []);
+  return isDark;
+}
+function useSetIfNotUndefinedEffect(key, value) {
+  const { setState } = useContext16(JsonViewerStoreContext);
+  useEffect15(() => {
+    if (value !== void 0) {
+      setState({
+        [key]: value
+      });
+    }
+  }, [
+    key,
+    value,
+    setState
+  ]);
+}
+var JsonViewerInner = (props) => {
+  const { setState } = useContext16(JsonViewerStoreContext);
+  useEffect15(() => {
+    setState((state) => ({
+      prevValue: state.value,
+      value: props.value
+    }));
+  }, [
+    props.value,
+    setState
+  ]);
+  useSetIfNotUndefinedEffect("rootName", props.rootName);
+  useSetIfNotUndefinedEffect("indentWidth", props.indentWidth);
+  useSetIfNotUndefinedEffect("keyRenderer", props.keyRenderer);
+  useSetIfNotUndefinedEffect("enableAdd", props.enableAdd);
+  useSetIfNotUndefinedEffect("enableDelete", props.enableDelete);
+  useSetIfNotUndefinedEffect("enableClipboard", props.enableClipboard);
+  useSetIfNotUndefinedEffect("editable", props.editable);
+  useSetIfNotUndefinedEffect("onChange", props.onChange);
+  useSetIfNotUndefinedEffect("onCopy", props.onCopy);
+  useSetIfNotUndefinedEffect("onSelect", props.onSelect);
+  useSetIfNotUndefinedEffect("onAdd", props.onAdd);
+  useSetIfNotUndefinedEffect("onDelete", props.onDelete);
+  useSetIfNotUndefinedEffect("maxDisplayLength", props.maxDisplayLength);
+  useSetIfNotUndefinedEffect("groupArraysAfterLength", props.groupArraysAfterLength);
+  useSetIfNotUndefinedEffect("quotesOnKeys", props.quotesOnKeys);
+  useSetIfNotUndefinedEffect("displayDataTypes", props.displayDataTypes);
+  useSetIfNotUndefinedEffect("displaySize", props.displaySize);
+  useSetIfNotUndefinedEffect("displayComma", props.displayComma);
+  useSetIfNotUndefinedEffect("highlightUpdates", props.highlightUpdates);
+  useEffect15(() => {
+    if (props.theme === "light") {
+      setState({
+        colorspace: lightColorspace
+      });
+    } else if (props.theme === "dark") {
+      setState({
+        colorspace: darkColorspace
+      });
+    } else if (typeof props.theme === "object") {
+      setState({
+        colorspace: props.theme
+      });
+    }
+  }, [
+    setState,
+    props.theme
+  ]);
+  const themeCls = useMemo7(() => {
+    if (typeof props.theme === "object") return "json-viewer-theme-custom";
+    return props.theme === "dark" ? "json-viewer-theme-dark" : "json-viewer-theme-light";
+  }, [
+    props.theme
+  ]);
+  const onceRef = useRef11(true);
+  const registerTypes = useTypeRegistryStore((store) => store.registerTypes);
+  if (onceRef.current) {
+    const allTypes = props.valueTypes ? [
+      ...predefinedTypes,
+      ...props.valueTypes
+    ] : [
+      ...predefinedTypes
+    ];
+    registerTypes(allTypes);
+    onceRef.current = false;
+  }
+  useEffect15(() => {
+    const allTypes = props.valueTypes ? [
+      ...predefinedTypes,
+      ...props.valueTypes
+    ] : [
+      ...predefinedTypes
+    ];
+    registerTypes(allTypes);
+  }, [
+    props.valueTypes,
+    registerTypes
+  ]);
+  const value = useJsonViewerStore((store) => store.value);
+  const prevValue = useJsonViewerStore((store) => store.prevValue);
+  const emptyPath = useMemo7(() => [], []);
+  const setHover = useJsonViewerStore((store) => store.setHover);
+  const onMouseLeave = useCallback8(() => setHover(null), [
+    setHover
+  ]);
+  return /* @__PURE__ */ jsx129(Paper2, {
+    elevation: 0,
+    className: clsx(themeCls, props.className),
+    style: props.style,
+    sx: {
+      fontFamily: "monospace",
+      userSelect: "none",
+      contentVisibility: "auto",
+      ...props.sx
+    },
+    onMouseLeave,
+    children: /* @__PURE__ */ jsx129(DataKeyPair, {
+      value,
+      prevValue,
+      path: emptyPath,
+      last: true
+    })
+  });
+};
+var JsonViewer = function JsonViewer2(props) {
+  if (true) {
+    if ("displayObjectSize" in props) {
+      console.error("`displayObjectSize` is deprecated. Use `displaySize` instead.\nSee https://viewer.textea.io/migration/migration-v3#raname-displayobjectsize-to-displaysize for more information.");
+    }
+  }
+  const isAutoDarkTheme = useThemeDetector();
+  const themeType = useMemo7(() => {
+    var _props_theme;
+    return props.theme === "auto" ? isAutoDarkTheme ? "dark" : "light" : (_props_theme = props.theme) !== null && _props_theme !== void 0 ? _props_theme : "light";
+  }, [
+    isAutoDarkTheme,
+    props.theme
+  ]);
+  const theme = useMemo7(() => {
+    const backgroundColor = typeof themeType === "object" ? themeType.base00 : themeType === "dark" ? darkColorspace.base00 : lightColorspace.base00;
+    const foregroundColor = typeof themeType === "object" ? themeType.base07 : themeType === "dark" ? darkColorspace.base07 : lightColorspace.base07;
+    return createTheme({
+      components: {
+        MuiPaper: {
+          styleOverrides: {
+            root: {
+              backgroundColor,
+              color: foregroundColor
+            }
+          }
+        }
+      },
+      palette: {
+        mode: themeType === "dark" ? "dark" : "light",
+        background: {
+          default: backgroundColor
+        }
+      }
+    });
+  }, [
+    themeType
+  ]);
+  const mixedProps = {
+    ...props,
+    theme: themeType
+  };
+  const jsonViewerStore = useMemo7(() => createJsonViewerStore(props), []);
+  const typeRegistryStore = useMemo7(() => createTypeRegistryStore(), []);
+  return /* @__PURE__ */ jsx129(ThemeProvider, {
+    theme,
+    children: /* @__PURE__ */ jsx129(TypeRegistryStoreContext.Provider, {
+      value: typeRegistryStore,
+      children: /* @__PURE__ */ jsx129(JsonViewerStoreContext.Provider, {
+        value: jsonViewerStore,
+        children: /* @__PURE__ */ jsx129(JsonViewerInner, {
+          ...mixedProps
+        })
+      })
+    })
+  });
+};
+
+// src/components/event-details/event-details.tsx
+import { memo as memo10, useMemo as useMemo11, useState as useState13 } from "react";
+
+// src/utils/iam-utils.ts
+function determinePermissionStatus(payload) {
+  if (payload.explicit_deny_count && payload.explicit_deny_count > 0) {
+    return "explicitly_denied";
+  }
+  if (payload.is_allowed && payload.explicit_allow_count && payload.explicit_allow_count > 0) {
+    return "explicitly_allowed";
+  }
+  if (payload.is_allowed) {
+    return "implicitly_allowed";
+  }
+  return "implicitly_denied";
+}
+function formatPermissionStatus(status) {
+  switch (status) {
+    case "explicitly_allowed": {
+      return "Explicitly Allowed";
+    }
+    case "explicitly_denied": {
+      return "Explicitly Denied";
+    }
+    case "implicitly_allowed": {
+      return "Implicitly Allowed";
+    }
+    case "implicitly_denied": {
+      return "Implicitly Denied";
+    }
+  }
+}
+function getPermissionStatusColor(status) {
+  switch (status) {
+    case "explicitly_allowed":
+    case "implicitly_allowed": {
+      return "success.main";
+    }
+    case "explicitly_denied": {
+      return "error.main";
+    }
+    case "implicitly_denied": {
+      return "warning.main";
+    }
+  }
+}
+function parseIAMEvent(payloadString) {
+  try {
+    const payload = JSON.parse(payloadString);
+    const permission = determinePermissionStatus(payload);
+    const actions = [];
+    const resources = [];
+    if (payload.explicit_allows) {
+      for (const allow of payload.explicit_allows) {
+        if (!actions.includes(allow.action)) actions.push(allow.action);
+        if (!resources.includes(allow.resource)) resources.push(allow.resource);
+      }
+    }
+    if (payload.explicit_denies) {
+      for (const deny of payload.explicit_denies) {
+        if (!actions.includes(deny.action)) actions.push(deny.action);
+        if (!resources.includes(deny.resource)) resources.push(deny.resource);
+      }
+    }
+    if (payload.implicit_denies) {
+      for (const deny of payload.implicit_denies) {
+        if (!actions.includes(deny.action)) actions.push(deny.action);
+        if (!resources.includes(deny.resource)) resources.push(deny.resource);
+      }
+    }
+    return {
+      details: {
+        actions,
+        explicitAllows: payload.explicit_allow_count,
+        explicitDenies: payload.explicit_deny_count,
+        implicitDenies: payload.implicit_deny_count,
+        resources
+      },
+      operation: payload.operation,
+      permission,
+      principal: payload.principal_arn,
+      service: payload.service
+    };
+  } catch (error) {
+    console.error("Error parsing IAM event payload:", error);
+    return void 0;
+  }
+}
+
+// src/utils/event-utils.ts
+var iamEventParser = (eventName, attributes) => {
+  if (attributes?.payload && typeof attributes.payload === "string") {
+    const parsedIAM = parseIAMEvent(attributes.payload);
+    if (parsedIAM) {
+      const headline2 = `${parsedIAM.service}:${parsedIAM.operation} - ${formatPermissionStatus(parsedIAM.permission)}`;
+      const messageParts = [`Principal: ${parsedIAM.principal}`];
+      if (parsedIAM.details.actions && parsedIAM.details.actions.length > 0) {
+        messageParts.push(`Actions: ${parsedIAM.details.actions.join(", ")}`);
+      }
+      if (parsedIAM.details.resources && parsedIAM.details.resources.length > 0) {
+        messageParts.push(`Resources: ${parsedIAM.details.resources.join(", ")}`);
+      }
+      const detailsParts = [];
+      if (parsedIAM.details.explicitAllows !== void 0) {
+        detailsParts.push(`Explicit Allows: ${String(parsedIAM.details.explicitAllows)}`);
+      }
+      if (parsedIAM.details.explicitDenies !== void 0) {
+        detailsParts.push(`Explicit Denies: ${String(parsedIAM.details.explicitDenies)}`);
+      }
+      if (parsedIAM.details.implicitDenies !== void 0) {
+        detailsParts.push(`Implicit Denies: ${String(parsedIAM.details.implicitDenies)}`);
+      }
+      return {
+        details: detailsParts.join("\n"),
+        headline: headline2,
+        message: messageParts.join("\n")
+      };
+    }
+  }
+  const headline = eventName || "IAM Event";
   const message = typeof attributes?.message === "string" ? attributes.message : "";
   const details = typeof attributes?.details === "string" ? attributes.details : "";
   return { details, headline, message };
@@ -14046,45 +16236,10 @@ var getEventGroupsByType = (events) => {
   return groups;
 };
 
-// src/components/event-details/event-details-header.tsx
-import { Close } from "@mui/icons-material";
-import { Box as Box6, IconButton, Typography as Typography4 } from "@mui/material";
-import { jsx as jsx129, jsxs as jsxs123 } from "react/jsx-runtime";
-var EventDetailsHeader = ({ event, onClose }) => {
-  return /* @__PURE__ */ jsxs123(
-    Box6,
-    {
-      sx: {
-        alignItems: "center",
-        borderBottom: "1px solid",
-        borderColor: "divider",
-        display: "flex",
-        justifyContent: "space-between",
-        p: 2
-      },
-      children: [
-        /* @__PURE__ */ jsxs123(Box6, { children: [
-          /* @__PURE__ */ jsx129(Typography4, { sx: { fontWeight: 600 }, variant: "h6", children: "Event Details" }),
-          /* @__PURE__ */ jsxs123(Typography4, { color: "text.secondary", variant: "body2", children: [
-            event.service_name,
-            " ",
-            "-",
-            event.operation_name
-          ] })
-        ] }),
-        onClose && /* @__PURE__ */ jsx129(IconButton, { onClick: onClose, size: "small", children: /* @__PURE__ */ jsx129(Close, {}) })
-      ]
-    }
-  );
-};
-
-// src/components/event-details/event-section.tsx
-import { Box as Box12 } from "@mui/material";
-
 // src/components/event-details/event-detail.tsx
 import { KeyboardArrowDown as KeyboardArrowDown2, KeyboardArrowRight as KeyboardArrowRight2 } from "@mui/icons-material";
-import { Box as Box10, Grid as Grid3, IconButton as IconButton3, Typography as Typography7 } from "@mui/material";
-import { useEffect as useEffect15, useMemo as useMemo8, useRef as useRef11, useState as useState9 } from "react";
+import { Box as Box10, Grid as Grid3, IconButton as IconButton2, Typography as Typography6 } from "@mui/material";
+import { useEffect as useEffect16, useMemo as useMemo9, useRef as useRef12, useState as useState10 } from "react";
 
 // src/components/status-icon.tsx
 import { Cancel, CheckCircle, Error as Error2, Info, RemoveCircle } from "@mui/icons-material";
@@ -14112,11 +16267,11 @@ var StatusIcon = ({ errorLevel }) => {
 
 // src/components/event-details/iam-event-detail.tsx
 import { CheckCircle as CheckCircle2, Error as ErrorIcon, Warning } from "@mui/icons-material";
-import { Box as Box8, Chip, Grid as Grid2, Typography as Typography5 } from "@mui/material";
+import { Box as Box8, Chip, Grid as Grid2, Typography as Typography4 } from "@mui/material";
 import { jsx as jsx131, jsxs as jsxs124 } from "react/jsx-runtime";
 var DetailRow = ({ content, label }) => /* @__PURE__ */ jsxs124(Grid2, { container: true, spacing: 0, sx: { mb: 1 }, children: [
   /* @__PURE__ */ jsx131(Grid2, { item: true, sx: { pr: 1 }, xs: 3, children: /* @__PURE__ */ jsx131(
-    Typography5,
+    Typography4,
     {
       sx: {
         color: "text.secondary",
@@ -14127,7 +16282,7 @@ var DetailRow = ({ content, label }) => /* @__PURE__ */ jsxs124(Grid2, { contain
     }
   ) }),
   /* @__PURE__ */ jsx131(Grid2, { item: true, xs: 9, children: typeof content === "string" ? /* @__PURE__ */ jsx131(
-    Typography5,
+    Typography4,
     {
       sx: {
         color: "text.primary",
@@ -14155,11 +16310,11 @@ var PermissionIcon = ({ status }) => {
 var IAMEventDetail = ({ event }) => {
   const payloadString = event.attributes?.payload;
   if (!payloadString) {
-    return /* @__PURE__ */ jsx131(Box8, { sx: { p: 2 }, children: /* @__PURE__ */ jsx131(Typography5, { sx: { fontWeight: 600 }, variant: "body2", children: "No IAM policy evaluation data available" }) });
+    return /* @__PURE__ */ jsx131(Box8, { sx: { p: 2 }, children: /* @__PURE__ */ jsx131(Typography4, { sx: { fontWeight: 600 }, variant: "body2", children: "No IAM policy evaluation data available" }) });
   }
   const parsedIAM = parseIAMEvent(payloadString);
   if (!parsedIAM) {
-    return /* @__PURE__ */ jsx131(Box8, { sx: { p: 2 }, children: /* @__PURE__ */ jsx131(Typography5, { sx: { fontWeight: 600 }, variant: "body2", children: "Failed to parse IAM event data" }) });
+    return /* @__PURE__ */ jsx131(Box8, { sx: { p: 2 }, children: /* @__PURE__ */ jsx131(Typography4, { sx: { fontWeight: 600 }, variant: "body2", children: "Failed to parse IAM event data" }) });
   }
   return /* @__PURE__ */ jsxs124(Box8, { sx: { p: 2 }, children: [
     /* @__PURE__ */ jsx131(Box8, { sx: { mb: 2 }, children: /* @__PURE__ */ jsx131(
@@ -14181,7 +16336,7 @@ var IAMEventDetail = ({ event }) => {
       DetailRow,
       {
         content: /* @__PURE__ */ jsx131(Box8, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsx131(
-          Typography5,
+          Typography4,
           {
             sx: {
               color: "text.primary"
@@ -14198,7 +16353,7 @@ var IAMEventDetail = ({ event }) => {
       DetailRow,
       {
         content: /* @__PURE__ */ jsx131(Box8, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ jsx131(
-          Typography5,
+          Typography4,
           {
             sx: {
               color: "text.primary",
@@ -14213,19 +16368,19 @@ var IAMEventDetail = ({ event }) => {
       }
     ),
     /* @__PURE__ */ jsxs124(Box8, { sx: { mt: 2 }, children: [
-      /* @__PURE__ */ jsx131(Typography5, { sx: { fontWeight: 600, mb: 1 }, variant: "caption", children: "Policy Evaluation" }),
+      /* @__PURE__ */ jsx131(Typography4, { sx: { fontWeight: 600, mb: 1 }, variant: "caption", children: "Policy Evaluation" }),
       /* @__PURE__ */ jsxs124(Grid2, { container: true, spacing: 2, children: [
         parsedIAM.details.explicitAllows !== void 0 && /* @__PURE__ */ jsx131(Grid2, { item: true, xs: 4, children: /* @__PURE__ */ jsxs124(Box8, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ jsx131(Typography5, { color: "success.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitAllows }),
-          /* @__PURE__ */ jsx131(Typography5, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Allows" })
+          /* @__PURE__ */ jsx131(Typography4, { color: "success.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitAllows }),
+          /* @__PURE__ */ jsx131(Typography4, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Allows" })
         ] }) }),
         parsedIAM.details.explicitDenies !== void 0 && /* @__PURE__ */ jsx131(Grid2, { item: true, xs: 4, children: /* @__PURE__ */ jsxs124(Box8, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ jsx131(Typography5, { color: "error.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitDenies }),
-          /* @__PURE__ */ jsx131(Typography5, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Denies" })
+          /* @__PURE__ */ jsx131(Typography4, { color: "error.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitDenies }),
+          /* @__PURE__ */ jsx131(Typography4, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Denies" })
         ] }) }),
         parsedIAM.details.implicitDenies !== void 0 && /* @__PURE__ */ jsx131(Grid2, { item: true, xs: 4, children: /* @__PURE__ */ jsxs124(Box8, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ jsx131(Typography5, { color: "warning.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.implicitDenies }),
-          /* @__PURE__ */ jsx131(Typography5, { sx: { fontWeight: 600 }, variant: "caption", children: "Implicit Denies" })
+          /* @__PURE__ */ jsx131(Typography4, { color: "warning.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.implicitDenies }),
+          /* @__PURE__ */ jsx131(Typography4, { sx: { fontWeight: 600 }, variant: "caption", children: "Implicit Denies" })
         ] }) })
       ] })
     ] })
@@ -14234,8 +16389,8 @@ var IAMEventDetail = ({ event }) => {
 
 // src/components/event-details/iam-permission-detail.tsx
 import { KeyboardArrowDown, KeyboardArrowRight } from "@mui/icons-material";
-import { Box as Box9, Chip as Chip2, IconButton as IconButton2, Typography as Typography6 } from "@mui/material";
-import { useMemo as useMemo7, useState as useState8 } from "react";
+import { Box as Box9, Chip as Chip2, IconButton, Typography as Typography5 } from "@mui/material";
+import { useMemo as useMemo8, useState as useState9 } from "react";
 import { jsx as jsx132, jsxs as jsxs125 } from "react/jsx-runtime";
 var getChipColors = (status) => {
   const isAllowed = status === "explicitly_allowed" || status === "implicitly_allowed";
@@ -14245,8 +16400,8 @@ var getChipColors = (status) => {
   };
 };
 var IAMPermissionItem = ({ event }) => {
-  const [isOpen, setIsOpen] = useState8(false);
-  const parsedData = useMemo7(() => {
+  const [isOpen, setIsOpen] = useState9(false);
+  const parsedData = useMemo8(() => {
     const payloadString = event.attributes?.payload;
     if (!payloadString) {
       return;
@@ -14266,7 +16421,7 @@ var IAMPermissionItem = ({ event }) => {
   const { chipColors, parsedIAM } = parsedData;
   return /* @__PURE__ */ jsxs125(Box9, { sx: { mb: 1 }, children: [
     /* @__PURE__ */ jsxs125(Box9, { sx: { alignItems: "center", display: "flex" }, children: [
-      /* @__PURE__ */ jsx132(IconButton2, { onClick: () => {
+      /* @__PURE__ */ jsx132(IconButton, { onClick: () => {
         setIsOpen(!isOpen);
       }, size: "small", sx: { mr: 1, p: 0 }, children: isOpen ? /* @__PURE__ */ jsx132(KeyboardArrowDown, {}) : /* @__PURE__ */ jsx132(KeyboardArrowRight, {}) }),
       /* @__PURE__ */ jsx132(
@@ -14282,18 +16437,18 @@ var IAMPermissionItem = ({ event }) => {
       )
     ] }),
     isOpen && /* @__PURE__ */ jsx132(Box9, { sx: { ml: 4, mt: 1 }, children: /* @__PURE__ */ jsxs125(Box9, { children: [
-      /* @__PURE__ */ jsx132(Typography6, { sx: { fontWeight: 600 }, variant: "caption", children: "Principal" }),
-      /* @__PURE__ */ jsx132(Typography6, { variant: "body2", children: parsedIAM.principal })
+      /* @__PURE__ */ jsx132(Typography5, { sx: { fontWeight: 600 }, variant: "caption", children: "Principal" }),
+      /* @__PURE__ */ jsx132(Typography5, { variant: "body2", children: parsedIAM.principal })
     ] }) })
   ] });
 };
 var IAMPermissionDetail = ({ events }) => /* @__PURE__ */ jsx132(Box9, { sx: { mt: 2 }, children: events.map((event) => /* @__PURE__ */ jsx132(IAMPermissionItem, { event }, `${event.span_id}-${event.event_id}`)) });
 
 // src/components/event-details/event-detail.tsx
-import { Fragment as Fragment5, jsx as jsx133, jsxs as jsxs126 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx133, jsxs as jsxs126 } from "react/jsx-runtime";
 var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs126(Grid3, { container: true, spacing: 0, sx: { mb: 1 }, children: [
   /* @__PURE__ */ jsx133(Grid3, { item: true, sx: { pr: 1 }, xs: 3, children: /* @__PURE__ */ jsx133(
-    Typography7,
+    Typography6,
     {
       sx: {
         color: "text.primary",
@@ -14304,7 +16459,7 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs126(Grid3, { contai
     }
   ) }),
   /* @__PURE__ */ jsx133(Grid3, { item: true, xs: 9, children: typeof content === "string" ? /* @__PURE__ */ jsx133(
-    Typography7,
+    Typography6,
     {
       sx: {
         color: "text.primary",
@@ -14316,15 +16471,15 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs126(Grid3, { contai
   ) : content })
 ] });
 var EventMessage = ({ event }) => {
-  const [isOpen, setIsOpen] = useState9(false);
-  const [isOverflowing, setIsOverflowing] = useState9(false);
-  const textReference = useRef11(null);
-  const parsedMessage = useMemo8(() => parseEventMessage(event), [event]);
-  const isIAMPolicyEvent = useMemo8(
+  const [isOpen, setIsOpen] = useState10(false);
+  const [isOverflowing, setIsOverflowing] = useState10(false);
+  const textReference = useRef12(null);
+  const parsedMessage = useMemo9(() => parseEventMessage(event), [event]);
+  const isIAMPolicyEvent = useMemo9(
     () => event.event_type === "iam.policy_evaluation" && event.attributes?.payload && typeof event.attributes.payload === "string",
     [event]
   );
-  useEffect15(() => {
+  useEffect16(() => {
     const checkOverflow = () => {
       const element = textReference.current;
       if (element) {
@@ -14337,18 +16492,18 @@ var EventMessage = ({ event }) => {
       window.removeEventListener("resize", checkOverflow);
     };
   }, [parsedMessage.headline]);
-  const hasAdditionalContent = useMemo8(
+  const hasAdditionalContent = useMemo9(
     () => parsedMessage.message || parsedMessage.details || isIAMPolicyEvent,
     [parsedMessage.message, parsedMessage.details, isIAMPolicyEvent]
   );
-  const shouldShowToggle = useMemo8(
+  const shouldShowToggle = useMemo9(
     () => isOverflowing || hasAdditionalContent,
     [isOverflowing, hasAdditionalContent]
   );
   return /* @__PURE__ */ jsxs126(Box10, { sx: { display: "flex", flexDirection: "column" }, children: [
     /* @__PURE__ */ jsxs126(Box10, { sx: { alignItems: "flex-start", display: "flex" }, children: [
       Boolean(shouldShowToggle) && /* @__PURE__ */ jsx133(
-        IconButton3,
+        IconButton2,
         {
           onClick: () => {
             setIsOpen(!isOpen);
@@ -14359,7 +16514,7 @@ var EventMessage = ({ event }) => {
         }
       ),
       /* @__PURE__ */ jsx133(
-        Typography7,
+        Typography6,
         {
           ref: textReference,
           sx: {
@@ -14376,7 +16531,7 @@ var EventMessage = ({ event }) => {
         }
       )
     ] }),
-    isOpen && /* @__PURE__ */ jsx133(Box10, { sx: { ml: 4, mt: 1 }, children: isIAMPolicyEvent ? /* @__PURE__ */ jsx133(IAMEventDetail, { event }) : /* @__PURE__ */ jsxs126(Fragment5, { children: [
+    isOpen && /* @__PURE__ */ jsx133(Box10, { sx: { ml: 4, mt: 1 }, children: isIAMPolicyEvent ? /* @__PURE__ */ jsx133(IAMEventDetail, { event }) : /* @__PURE__ */ jsxs126(Fragment6, { children: [
       Boolean(parsedMessage.message) && /* @__PURE__ */ jsx133(DetailRow2, { content: parsedMessage.message, label: "Message:" }),
       Boolean(parsedMessage.details) && /* @__PURE__ */ jsx133(DetailRow2, { content: parsedMessage.details, label: "Details:" })
     ] }) })
@@ -14417,7 +16572,7 @@ var EventDetail = ({
             mb: 1
           },
           children: /* @__PURE__ */ jsx133(
-            Typography7,
+            Typography6,
             {
               sx: {
                 alignItems: "left",
@@ -14448,7 +16603,7 @@ var EventDetail = ({
         children: [
           /* @__PURE__ */ jsx133(StatusIcon, { errorLevel: eventLevel }),
           /* @__PURE__ */ jsx133(
-            Typography7,
+            Typography6,
             {
               sx: {
                 alignItems: "left",
@@ -14480,85 +16635,6 @@ var EventDetail = ({
   ] });
 };
 
-// src/components/event-details/toggle-section.tsx
-import { KeyboardArrowDown as KeyboardArrowDown3, KeyboardArrowRight as KeyboardArrowRight3 } from "@mui/icons-material";
-import { Box as Box11, Typography as Typography8 } from "@mui/material";
-import { useState as useState10 } from "react";
-import { jsx as jsx134, jsxs as jsxs127 } from "react/jsx-runtime";
-var ToggleSection = ({ children, headline, initialOpen = true }) => {
-  const [isOpen, setIsOpen] = useState10(initialOpen);
-  return /* @__PURE__ */ jsxs127(Box11, { sx: { mt: 4 }, children: [
-    /* @__PURE__ */ jsx134(
-      Box11,
-      {
-        onClick: () => {
-          setIsOpen(!isOpen);
-        },
-        sx: {
-          cursor: "pointer",
-          mb: 1
-        },
-        children: /* @__PURE__ */ jsxs127(
-          Box11,
-          {
-            role: "button",
-            sx: {
-              alignItems: "center",
-              display: "flex",
-              gap: 1
-            },
-            children: [
-              /* @__PURE__ */ jsx134(Typography8, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
-              isOpen ? /* @__PURE__ */ jsx134(KeyboardArrowDown3, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ jsx134(KeyboardArrowRight3, { sx: { color: "text.secondary", height: 20, width: 20 } })
-            ]
-          }
-        )
-      }
-    ),
-    isOpen && /* @__PURE__ */ jsx134(Box11, { children })
-  ] });
-};
-
-// src/components/event-details/event-section.tsx
-import { jsx as jsx135, jsxs as jsxs128 } from "react/jsx-runtime";
-var EventSection = ({
-  eventGroups,
-  headline
-}) => /* @__PURE__ */ jsx135(ToggleSection, { headline, children: /* @__PURE__ */ jsxs128(Box12, { children: [
-  eventGroups.errors && /* @__PURE__ */ jsx135(
-    EventDetail,
-    {
-      displayText: "Error",
-      events: eventGroups.errors,
-      type: "error"
-    }
-  ),
-  eventGroups.warnings && /* @__PURE__ */ jsx135(
-    EventDetail,
-    {
-      displayText: "Warning",
-      events: eventGroups.warnings,
-      type: "warning"
-    }
-  ),
-  eventGroups.permissions && /* @__PURE__ */ jsx135(
-    EventDetail,
-    {
-      displayText: "IAM Permission",
-      events: eventGroups.permissions,
-      type: "permission"
-    }
-  ),
-  eventGroups.info && /* @__PURE__ */ jsx135(
-    EventDetail,
-    {
-      displayText: "Info",
-      events: eventGroups.info,
-      type: "info"
-    }
-  )
-] }) });
-
 // node_modules/@smithy/protocol-http/dist-es/extensions/httpExtensionConfiguration.js
 var getHttpHandlerExtensionConfiguration = (runtimeConfig) => {
   return {
@@ -14649,9 +16725,9 @@ var HttpRequest = class _HttpRequest {
     return _HttpRequest.clone(this);
   }
 };
-function cloneQuery(query) {
-  return Object.keys(query).reduce((carry, paramName) => {
-    const param = query[paramName];
+function cloneQuery(query2) {
+  return Object.keys(query2).reduce((carry, paramName) => {
+    const param = query2[paramName];
     return {
       ...carry,
       [paramName]: Array.isArray(param) ? [...param] : param
@@ -14882,10 +16958,10 @@ var httpSigningMiddleware = (config) => (next, context) => async (args) => {
   if (!scheme) {
     throw new Error(`No HttpAuthScheme was selected: unable to sign request`);
   }
-  const { httpAuthOption: { signingProperties = {} }, identity, signer } = scheme;
+  const { httpAuthOption: { signingProperties = {} }, identity: identity2, signer } = scheme;
   const output = await next({
     ...args,
-    request: await signer.sign(args.request, identity, signingProperties)
+    request: await signer.sign(args.request, identity2, signingProperties)
   }).catch((signer.errorHandler || defaultErrorHandler)(signingProperties));
   (signer.successHandler || defaultSuccessHandler)(output.response, signingProperties);
   return output;
@@ -15023,10 +17099,10 @@ var escapeUri = (uri) => encodeURIComponent(uri).replace(/[!'()*]/g, hexEncode);
 var hexEncode = (c3) => `%${c3.charCodeAt(0).toString(16).toUpperCase()}`;
 
 // node_modules/@smithy/querystring-builder/dist-es/index.js
-function buildQueryString(query) {
+function buildQueryString(query2) {
   const parts = [];
-  for (let key of Object.keys(query).sort()) {
-    const value = query[key];
+  for (let key of Object.keys(query2).sort()) {
+    const value = query2[key];
     key = escapeUri(key);
     if (Array.isArray(value)) {
       for (let i2 = 0, iLen = value.length; i2 < iLen; i2++) {
@@ -15393,7 +17469,7 @@ var findHeader = (pattern, headers) => {
 
 // node_modules/@smithy/querystring-parser/dist-es/index.js
 function parseQueryString(querystring) {
-  const query = {};
+  const query2 = {};
   querystring = querystring.replace(/^\?/, "");
   if (querystring) {
     for (const pair of querystring.split("&")) {
@@ -15402,16 +17478,16 @@ function parseQueryString(querystring) {
       if (value) {
         value = decodeURIComponent(value);
       }
-      if (!(key in query)) {
-        query[key] = value;
-      } else if (Array.isArray(query[key])) {
-        query[key].push(value);
+      if (!(key in query2)) {
+        query2[key] = value;
+      } else if (Array.isArray(query2[key])) {
+        query2[key].push(value);
       } else {
-        query[key] = [query[key], value];
+        query2[key] = [query2[key], value];
       }
     }
   }
-  return query;
+  return query2;
 }
 
 // node_modules/@smithy/url-parser/dist-es/index.js
@@ -15420,16 +17496,16 @@ var parseUrl = (url) => {
     return parseUrl(new URL(url));
   }
   const { hostname, pathname, port, protocol, search } = url;
-  let query;
+  let query2;
   if (search) {
-    query = parseQueryString(search);
+    query2 = parseQueryString(search);
   }
   return {
     hostname,
     port: port ? parseInt(port) : void 0,
     protocol,
     path: pathname,
-    query
+    query: query2
   };
 };
 
@@ -15832,8 +17908,8 @@ var TypeRegistry = class _TypeRegistry {
   }
   register(shapeId, schema) {
     const qualifiedName = this.normalizeShapeId(shapeId);
-    for (const r2 of [this, _TypeRegistry.for(qualifiedName.split("#")[0])]) {
-      r2.schemas.set(qualifiedName, schema);
+    for (const r3 of [this, _TypeRegistry.for(qualifiedName.split("#")[0])]) {
+      r3.schemas.set(qualifiedName, schema);
     }
   }
   getSchema(shapeId) {
@@ -15846,9 +17922,9 @@ var TypeRegistry = class _TypeRegistry {
   registerError(es, ctor) {
     const $error = es;
     const ns = $error[1];
-    for (const r2 of [this, _TypeRegistry.for(ns)]) {
-      r2.schemas.set(ns + "#" + $error[2], $error);
-      r2.exceptions.set($error, ctor);
+    for (const r3 of [this, _TypeRegistry.for(ns)]) {
+      r3.schemas.set(ns + "#" + $error[2], $error);
+      r3.exceptions.set($error, ctor);
     }
   }
   getErrorCtor(es) {
@@ -16366,7 +18442,7 @@ var HttpProtocol = class extends SerdeContext {
 var RpcProtocol = class extends HttpProtocol {
   async serializeRequest(operationSchema, input, context) {
     const serializer = this.serializer;
-    const query = {};
+    const query2 = {};
     const headers = {};
     const endpoint = await context.endpoint();
     const ns = NormalizedSchema.of(operationSchema?.input);
@@ -16378,7 +18454,7 @@ var RpcProtocol = class extends HttpProtocol {
       port: void 0,
       path: "/",
       fragment: void 0,
-      query,
+      query: query2,
       headers,
       body: void 0
     });
@@ -16412,7 +18488,7 @@ var RpcProtocol = class extends HttpProtocol {
       }
     }
     request.headers = Object.assign(request.headers, headers);
-    request.query = query;
+    request.query = query2;
     request.body = payload;
     request.method = "POST";
     return request;
@@ -16492,12 +18568,12 @@ var DefaultIdentityProviderConfig = class {
 };
 
 // node_modules/@smithy/core/dist-es/util-identity-and-auth/memoizeIdentityProvider.js
-var createIsIdentityExpiredFunction = (expirationMs) => function isIdentityExpired2(identity) {
-  return doesIdentityRequireRefresh(identity) && identity.expiration.getTime() - Date.now() < expirationMs;
+var createIsIdentityExpiredFunction = (expirationMs) => function isIdentityExpired2(identity2) {
+  return doesIdentityRequireRefresh(identity2) && identity2.expiration.getTime() - Date.now() < expirationMs;
 };
 var EXPIRATION_MS = 3e5;
 var isIdentityExpired = createIsIdentityExpiredFunction(EXPIRATION_MS);
-var doesIdentityRequireRefresh = (identity) => identity.expiration !== void 0;
+var doesIdentityRequireRefresh = (identity2) => identity2.expiration !== void 0;
 var memoizeIdentityProvider = (provider, isExpired, requiresRefresh) => {
   if (provider === void 0) {
     return void 0;
@@ -16730,9 +18806,9 @@ var parseURL = (value) => {
         return value;
       }
       if (typeof value === "object" && "hostname" in value) {
-        const { hostname: hostname2, port, protocol: protocol2 = "", path = "", query = {} } = value;
+        const { hostname: hostname2, port, protocol: protocol2 = "", path = "", query: query2 = {} } = value;
         const url = new URL(`${protocol2}//${hostname2}${port ? `:${port}` : ""}${path}`);
-        url.search = Object.entries(query).map(([k2, v2]) => `${k2}=${v2}`).join("&");
+        url.search = Object.entries(query2).map(([k2, v2]) => `${k2}=${v2}`).join("&");
         return url;
       }
       return new URL(value);
@@ -17469,7 +19545,7 @@ var validateSigningProperties = async (signingProperties) => {
   };
 };
 var AwsSdkSigV4Signer = class {
-  async sign(httpRequest, identity, signingProperties) {
+  async sign(httpRequest, identity2, signingProperties) {
     if (!HttpRequest.isInstance(httpRequest)) {
       throw new Error("The request is not an instance of `HttpRequest` and cannot be signed");
     }
@@ -17811,18 +19887,18 @@ var hasHeader = (soughtHeader, headers) => {
 
 // node_modules/@smithy/signature-v4/dist-es/moveHeadersToQuery.js
 var moveHeadersToQuery = (request, options = {}) => {
-  const { headers, query = {} } = HttpRequest.clone(request);
+  const { headers, query: query2 = {} } = HttpRequest.clone(request);
   for (const name of Object.keys(headers)) {
     const lname = name.toLowerCase();
     if (lname.slice(0, 6) === "x-amz-" && !options.unhoistableHeaders?.has(lname) || options.hoistableHeaders?.has(lname)) {
-      query[name] = headers[name];
+      query2[name] = headers[name];
       delete headers[name];
     }
   }
   return {
     ...request,
     headers,
-    query
+    query: query2
   };
 };
 
@@ -17841,16 +19917,16 @@ var prepareRequest = (request) => {
 init_dist_es();
 
 // node_modules/@smithy/signature-v4/dist-es/getCanonicalQuery.js
-var getCanonicalQuery = ({ query = {} }) => {
+var getCanonicalQuery = ({ query: query2 = {} }) => {
   const keys = [];
   const serialized = {};
-  for (const key of Object.keys(query)) {
+  for (const key of Object.keys(query2)) {
     if (key.toLowerCase() === SIGNATURE_HEADER) {
       continue;
     }
     const encodedKey = escapeUri(key);
     keys.push(encodedKey);
-    const value = query[key];
+    const value = query2[key];
     if (typeof value === "string") {
       serialized[encodedKey] = `${encodedKey}=${escapeUri(value)}`;
     } else if (Array.isArray(value)) {
@@ -19871,9 +21947,9 @@ async function checkFeatures(context, config, args) {
         break;
     }
   }
-  const identity = context.__smithy_context?.selectedHttpAuthScheme?.identity;
-  if (identity?.$source) {
-    const credentials = identity;
+  const identity2 = context.__smithy_context?.selectedHttpAuthScheme?.identity;
+  if (identity2?.$source) {
+    const credentials = identity2;
     if (credentials.accountId) {
       setFeature2(context, "RESOLVED_ACCOUNT_ID", "T");
     }
@@ -21078,11 +23154,11 @@ var Sha2563 = (
 
 // node_modules/@aws-sdk/util-user-agent-browser/dist-es/index.js
 var createDefaultUserAgentProvider = ({ serviceId, clientVersion }) => async (config) => {
-  const navigator = typeof window !== "undefined" ? window.navigator : void 0;
-  const uaString = navigator?.userAgent ?? "";
-  const osName = navigator?.userAgentData?.platform ?? fallback.os(uaString) ?? "other";
+  const navigator2 = typeof window !== "undefined" ? window.navigator : void 0;
+  const uaString = navigator2?.userAgent ?? "";
+  const osName = navigator2?.userAgentData?.platform ?? fallback.os(uaString) ?? "other";
   const osVersion = void 0;
-  const brands = navigator?.userAgentData?.brands ?? [];
+  const brands = navigator2?.userAgentData?.brands ?? [];
   const brand = brands[brands.length - 1];
   const browserName = brand?.brand ?? fallback.browser(uaString) ?? "unknown";
   const browserVersion = brand?.version ?? "unknown";
@@ -22042,15 +24118,15 @@ var resolveDefaultsModeConfig = ({ defaultsMode } = {}) => memoize2(async () =>
   }
 });
 var useMobileConfiguration = () => {
-  const navigator = window?.navigator;
-  if (navigator?.connection) {
-    const { effectiveType, rtt, downlink } = navigator?.connection;
+  const navigator2 = window?.navigator;
+  if (navigator2?.connection) {
+    const { effectiveType, rtt, downlink } = navigator2?.connection;
     const slow = typeof effectiveType === "string" && effectiveType !== "4g" || Number(rtt) > 100 || Number(downlink) < 10;
     if (slow) {
       return true;
     }
   }
-  return navigator?.userAgentData?.mobile || typeof navigator?.maxTouchPoints === "number" && navigator?.maxTouchPoints > 1;
+  return navigator2?.userAgentData?.mobile || typeof navigator2?.maxTouchPoints === "number" && navigator2?.maxTouchPoints > 1;
 };
 
 // node_modules/@aws-sdk/client-cloudwatch-logs/dist-es/runtimeConfig.shared.js
@@ -22078,10 +24154,10 @@ var n = {};
 var o = { [x]: "Region" };
 var p = { [v]: "getAttr", [w]: [{ [x]: g }, "supportsFIPS"] };
 var q = { [v]: c2, [w]: [true, { [v]: "getAttr", [w]: [{ [x]: g }, "supportsDualStack"] }] };
-var r = [l];
+var r2 = [l];
 var s = [m];
 var t = [o];
-var _data = { version: "1.0", parameters: { Region: i, UseDualStack: j, UseFIPS: j, Endpoint: i }, rules: [{ conditions: [{ [v]: b2, [w]: [k] }], rules: [{ conditions: r, error: "Invalid Configuration: FIPS and custom endpoint are not supported", type: d }, { conditions: s, error: "Invalid Configuration: Dualstack and custom endpoint are not supported", type: d }, { endpoint: { url: k, properties: n, headers: n }, type: e }], type: f }, { conditions: [{ [v]: b2, [w]: t }], rules: [{ conditions: [{ [v]: "aws.partition", [w]: t, assign: g }], rules: [{ conditions: [l, m], rules: [{ conditions: [{ [v]: c2, [w]: [a2, p] }, q], rules: [{ endpoint: { url: "https://logs-fips.{Region}.{PartitionResult#dualStackDnsSuffix}", properties: n, headers: n }, type: e }], type: f }, { error: "FIPS and DualStack are enabled, but this partition does not support one or both", type: d }], type: f }, { conditions: r, rules: [{ conditions: [{ [v]: c2, [w]: [p, a2] }], rules: [{ conditions: [{ [v]: h, [w]: [o, "us-gov-east-1"] }], endpoint: { url: "https://logs.us-gov-east-1.amazonaws.com", properties: n, headers: n }, type: e }, { conditions: [{ [v]: h, [w]: [o, "us-gov-west-1"] }], endpoint: { url: "https://logs.us-gov-west-1.amazonaws.com", properties: n, headers: n }, type: e }, { endpoint: { url: "https://logs-fips.{Region}.{PartitionResult#dnsSuffix}", properties: n, headers: n }, type: e }], type: f }, { error: "FIPS is enabled but this partition does not support FIPS", type: d }], type: f }, { conditions: s, rules: [{ conditions: [q], rules: [{ endpoint: { url: "https://logs.{Region}.{PartitionResult#dualStackDnsSuffix}", properties: n, headers: n }, type: e }], type: f }, { error: "DualStack is enabled but this partition does not support DualStack", type: d }], type: f }, { endpoint: { url: "https://logs.{Region}.{PartitionResult#dnsSuffix}", properties: n, headers: n }, type: e }], type: f }], type: f }, { error: "Invalid Configuration: Missing Region", type: d }] };
+var _data = { version: "1.0", parameters: { Region: i, UseDualStack: j, UseFIPS: j, Endpoint: i }, rules: [{ conditions: [{ [v]: b2, [w]: [k] }], rules: [{ conditions: r2, error: "Invalid Configuration: FIPS and custom endpoint are not supported", type: d }, { conditions: s, error: "Invalid Configuration: Dualstack and custom endpoint are not supported", type: d }, { endpoint: { url: k, properties: n, headers: n }, type: e }], type: f }, { conditions: [{ [v]: b2, [w]: t }], rules: [{ conditions: [{ [v]: "aws.partition", [w]: t, assign: g }], rules: [{ conditions: [l, m], rules: [{ conditions: [{ [v]: c2, [w]: [a2, p] }, q], rules: [{ endpoint: { url: "https://logs-fips.{Region}.{PartitionResult#dualStackDnsSuffix}", properties: n, headers: n }, type: e }], type: f }, { error: "FIPS and DualStack are enabled, but this partition does not support one or both", type: d }], type: f }, { conditions: r2, rules: [{ conditions: [{ [v]: c2, [w]: [p, a2] }], rules: [{ conditions: [{ [v]: h, [w]: [o, "us-gov-east-1"] }], endpoint: { url: "https://logs.us-gov-east-1.amazonaws.com", properties: n, headers: n }, type: e }, { conditions: [{ [v]: h, [w]: [o, "us-gov-west-1"] }], endpoint: { url: "https://logs.us-gov-west-1.amazonaws.com", properties: n, headers: n }, type: e }, { endpoint: { url: "https://logs-fips.{Region}.{PartitionResult#dnsSuffix}", properties: n, headers: n }, type: e }], type: f }, { error: "FIPS is enabled but this partition does not support FIPS", type: d }], type: f }, { conditions: s, rules: [{ conditions: [q], rules: [{ endpoint: { url: "https://logs.{Region}.{PartitionResult#dualStackDnsSuffix}", properties: n, headers: n }, type: e }], type: f }, { error: "DualStack is enabled but this partition does not support DualStack", type: d }], type: f }, { endpoint: { url: "https://logs.{Region}.{PartitionResult#dnsSuffix}", properties: n, headers: n }, type: e }], type: f }], type: f }, { error: "Invalid Configuration: Missing Region", type: d }] };
 var ruleSet = _data;
 
 // node_modules/@aws-sdk/client-cloudwatch-logs/dist-es/endpoint/endpointResolver.js
@@ -24246,17 +26322,17 @@ var QueryStatus = {
 };
 
 // src/components/event-details/lambda-invoke-logs-section.tsx
-import { Box as Box13, CircularProgress as CircularProgress2, Stack, Typography as Typography9 } from "@mui/material";
-import { useEffect as useEffect16, useMemo as useMemo9, useRef as useRef12, useState as useState11 } from "react";
-import { jsx as jsx136, jsxs as jsxs129 } from "react/jsx-runtime";
+import { Box as Box11, CircularProgress as CircularProgress2, Stack, Typography as Typography7 } from "@mui/material";
+import { useEffect as useEffect17, useMemo as useMemo10, useRef as useRef13, useState as useState11 } from "react";
+import { jsx as jsx134, jsxs as jsxs127 } from "react/jsx-runtime";
 var POLL_INTERVAL_MS = 1e3;
 async function pollQueryResults(client, queryId) {
   return client.send(new GetQueryResultsCommand({ queryId }));
 }
-async function startLambdaLogsQuery(client, functionName, requestId, startTimeSec, endTimeSec) {
+async function startLambdaLogsQuery(client, functionName2, requestId, startTimeSec, endTimeSec) {
   const response = await client.send(new StartQueryCommand({
     endTime: endTimeSec,
-    logGroupName: `/aws/lambda/${functionName}`,
+    logGroupName: `/aws/lambda/${functionName2}`,
     queryString: `fields @timestamp, @message | filter @requestId = "${requestId}" | sort @timestamp asc`,
     startTime: startTimeSec
   }));
@@ -24265,7 +26341,7 @@ async function startLambdaLogsQuery(client, functionName, requestId, startTimeSe
 }
 function useCloudWatchLogsClient(region) {
   const { localstackEndpoint } = useAppInspector();
-  const client = useMemo9(() => new CloudWatchLogsClient({
+  const client = useMemo10(() => new CloudWatchLogsClient({
     credentials: {
       accessKeyId: "test",
       secretAccessKey: "test"
@@ -24275,19 +26351,19 @@ function useCloudWatchLogsClient(region) {
   }), [region, localstackEndpoint]);
   return client;
 }
-function useLambdaInvokeLogs(functionName, requestId, region, startTimeNano, endTimeNano) {
+function useLambdaInvokeLogs(functionName2, requestId, region, startTimeNano, endTimeNano) {
   const [loading, setLoading] = useState11(true);
   const [logs, setLogs] = useState11([]);
   const [error, setError] = useState11();
-  const pollTimerRef = useRef12(null);
+  const pollTimerRef = useRef13(null);
   const cloudWatchLogs = useCloudWatchLogsClient(region);
-  useEffect16(() => {
+  useEffect17(() => {
     let cancelled = false;
     const startTimeSec = Math.floor(Number(BigInt(startTimeNano) / BigInt(1e9)));
     const endTimeSec = Math.ceil(Number(BigInt(endTimeNano) / BigInt(1e9)));
     async function run() {
       try {
-        const queryId = await startLambdaLogsQuery(cloudWatchLogs, functionName, requestId, startTimeSec - 60, endTimeSec + 60);
+        const queryId = await startLambdaLogsQuery(cloudWatchLogs, functionName2, requestId, startTimeSec - 60, endTimeSec + 60);
         const poll = async () => {
           if (cancelled) return;
           try {
@@ -24332,42 +26408,85 @@ function useLambdaInvokeLogs(functionName, requestId, region, startTimeNano, end
       cancelled = true;
       if (pollTimerRef.current !== null) clearTimeout(pollTimerRef.current);
     };
-  }, [functionName, requestId, region, startTimeNano, endTimeNano]);
+  }, [functionName2, requestId, region, startTimeNano, endTimeNano]);
   return { error, loading, logs };
 }
-var LambdaInvokeLogsSection = ({ endTimeNano, functionName, region, requestId, startTimeNano }) => {
-  const { error, loading, logs } = useLambdaInvokeLogs(functionName, requestId, region, startTimeNano, endTimeNano);
+var LambdaInvokeLogsSection = ({ endTimeNano, functionName: functionName2, region, requestId, startTimeNano }) => {
+  const { error, loading, logs } = useLambdaInvokeLogs(functionName2, requestId, region, startTimeNano, endTimeNano);
   if (loading) {
-    return /* @__PURE__ */ jsxs129(Stack, { alignItems: "center", direction: "row", spacing: 1, children: [
-      /* @__PURE__ */ jsx136(CircularProgress2, { size: 14 }),
-      /* @__PURE__ */ jsx136(Typography9, { color: "text.secondary", variant: "body2", children: "Loading logs\u2026" })
+    return /* @__PURE__ */ jsxs127(Stack, { alignItems: "center", direction: "row", spacing: 1, children: [
+      /* @__PURE__ */ jsx134(CircularProgress2, { size: 14 }),
+      /* @__PURE__ */ jsx134(Typography7, { color: "text.secondary", variant: "body2", children: "Loading logs\u2026" })
     ] });
   }
   if (error !== void 0) {
-    return /* @__PURE__ */ jsx136(Typography9, { color: "error", variant: "body2", children: error.message });
+    return /* @__PURE__ */ jsx134(Typography7, { color: "error", variant: "body2", children: error.message });
   }
   if (logs.length === 0) {
-    return /* @__PURE__ */ jsx136(Typography9, { color: "text.secondary", variant: "body2", children: "No logs found for this invocation." });
+    return /* @__PURE__ */ jsx134(Typography7, { color: "text.secondary", variant: "body2", children: "No logs found for this invocation." });
   }
-  return /* @__PURE__ */ jsx136(Box13, { sx: { backgroundColor: (theme) => theme.palette.background.default, borderRadius: 1, p: 1 }, children: /* @__PURE__ */ jsx136("pre", { style: { margin: 0, overflow: "auto" }, children: logs.map((log) => /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: `[${log.timestamp}] ${log.message}` }, log.ptr)) }) });
+  return /* @__PURE__ */ jsx134(Box11, { sx: { backgroundColor: (theme) => theme.palette.background.default, borderRadius: 1, p: 1 }, children: /* @__PURE__ */ jsx134("pre", { style: { margin: 0, overflow: "auto" }, children: logs.map((log) => /* @__PURE__ */ jsx134(Typography7, { variant: "body2", children: `[${log.timestamp}] ${log.message}` }, log.ptr)) }) });
 };
 
-// src/components/event-details/event-details.tsx
-import { Fragment as Fragment6, jsx as jsx137, jsxs as jsxs130 } from "react/jsx-runtime";
-var ATTRIBUTES_TO_EXCLUDE = /* @__PURE__ */ new Set([
-  "localstack.aws.account_id",
-  "localstack.aws.operation",
-  "localstack.aws.region",
-  "localstack.aws.resource_arn",
-  "localstack.aws.resource_id",
-  "localstack.aws.service",
-  "localstack.is_internal",
-  "localstack.request_id"
-]);
-var ATTRIBUTE_NAME_TRANSFORMATIONS = {
-  "localstack.aws.service.request": "Request",
-  "localstack.aws.service.response": "Response"
+// src/components/event-details/toggle-section.tsx
+import { KeyboardArrowDown as KeyboardArrowDown3, KeyboardArrowRight as KeyboardArrowRight3 } from "@mui/icons-material";
+import { Box as Box12, Typography as Typography8 } from "@mui/material";
+import { useState as useState12 } from "react";
+import { jsx as jsx135, jsxs as jsxs128 } from "react/jsx-runtime";
+var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
+  const [isOpen, setIsOpen] = useState12(initialOpen);
+  return /* @__PURE__ */ jsxs128(Box12, { sx: { mt: 4 }, children: [
+    /* @__PURE__ */ jsxs128(
+      Box12,
+      {
+        onClick: () => {
+          setIsOpen(!isOpen);
+        },
+        sx: {
+          alignItems: "center",
+          cursor: "pointer",
+          display: "flex",
+          justifyContent: "space-between",
+          mb: 1
+        },
+        children: [
+          /* @__PURE__ */ jsxs128(
+            Box12,
+            {
+              role: "button",
+              sx: {
+                alignItems: "center",
+                display: "flex",
+                gap: 1
+              },
+              children: [
+                /* @__PURE__ */ jsx135(Typography8, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
+                isOpen ? /* @__PURE__ */ jsx135(KeyboardArrowDown3, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ jsx135(KeyboardArrowRight3, { sx: { color: "text.secondary", height: 20, width: 20 } })
+              ]
+            }
+          ),
+          action !== false && /* @__PURE__ */ jsx135(Box12, { onClick: (event) => {
+            event.stopPropagation();
+          }, children: action })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx135(Box12, { children })
+  ] });
 };
+
+// src/components/event-details/event-details.tsx
+import { Fragment as Fragment7, jsx as jsx136, jsxs as jsxs129 } from "react/jsx-runtime";
+function tryParseJson(value) {
+  if (typeof value !== "string") {
+    return value;
+  }
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
 var checkIsLambdaInvoke = (span) => {
   if (span.service_name !== "lambda") {
     return false;
@@ -24375,97 +26494,157 @@ var checkIsLambdaInvoke = (span) => {
   const operationName = span.operation_name.toLowerCase();
   return operationName === "invoke" || operationName === "invokewithresponsestream" || operationName === "invokeasync";
 };
+var checkIsSqsSendMessage = (span) => {
+  if (span.service_name !== "sqs") {
+    return false;
+  }
+  return span.operation_name.startsWith("SendMessage");
+};
 var EventDetails = ({ onClose, selectedEvent }) => {
-  const attributes = useMemo10(() => {
-    const attributes2 = Object.entries(selectedEvent?.attributes ?? {});
-    return attributes2.filter(([key]) => !ATTRIBUTES_TO_EXCLUDE.has(key));
-  }, [selectedEvent?.attributes]);
-  const requestId = typeof selectedEvent?.attributes?.["localstack.request_id"] === "string" ? selectedEvent.attributes["localstack.request_id"] : void 0;
-  const resourceArn = typeof selectedEvent?.attributes?.["localstack.aws.resource_arn"] === "string" ? selectedEvent.attributes["localstack.aws.resource_arn"] : void 0;
+  const eventGroups = useMemo11(
+    () => getEventGroupsByType(selectedEvent?.events ?? []),
+    [selectedEvent?.events]
+  );
+  const [parseNestedJson, setParseNestedJson] = useState13(true);
   if (!selectedEvent) {
-    return /* @__PURE__ */ jsx137(Box14, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx137(Typography10, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
+    return /* @__PURE__ */ jsx136(Box13, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx136(Typography9, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
   }
   const isLambdaInvoke = checkIsLambdaInvoke(selectedEvent);
-  return /* @__PURE__ */ jsxs130(Box14, { "data-testid": "event-details", sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ jsx137(EventDetailsHeader, { event: selectedEvent, onClose }),
-    /* @__PURE__ */ jsx137(Box14, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsxs130(Stack2, { spacing: 2, children: [
-      /* @__PURE__ */ jsx137(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ jsxs130(Stack2, { spacing: 1, children: [
-        /* @__PURE__ */ jsxs130(Box14, { children: [
-          /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
-          /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: selectedEvent.span_id })
-        ] }),
-        /* @__PURE__ */ jsxs130(Box14, { children: [
-          /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
-          /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: selectedEvent.trace_id })
-        ] }),
-        /* @__PURE__ */ jsxs130(Box14, { children: [
-          /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Request ID" }),
-          Boolean(requestId) ? /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: requestId }) : /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: "No request ID" })
-        ] }),
-        /* @__PURE__ */ jsxs130(Box14, { children: [
-          /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Operation" }),
-          /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: selectedEvent.operation_name })
-        ] })
-      ] }) }),
-      /* @__PURE__ */ jsx137(Divider2, {}),
-      /* @__PURE__ */ jsx137(ToggleSection, { headline: "Service Information", children: /* @__PURE__ */ jsxs130(Stack2, { spacing: 1, children: [
-        /* @__PURE__ */ jsxs130(Box14, { children: [
-          /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
-          /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: selectedEvent.service_name })
+  const isSqsSendMessage = checkIsSqsSendMessage(selectedEvent);
+  const requestId = typeof selectedEvent.attributes?.["localstack.request_id"] === "string" ? selectedEvent.attributes["localstack.request_id"] : void 0;
+  const resourceArn = typeof selectedEvent.attributes?.["localstack.aws.resource_arn"] === "string" ? selectedEvent.attributes["localstack.aws.resource_arn"] : void 0;
+  const requestPayload = tryParseJson(selectedEvent.attributes?.["localstack.aws.service.request"]);
+  if (parseNestedJson) {
+    if (isLambdaInvoke && requestPayload && typeof requestPayload === "object" && "Payload" in requestPayload) {
+      requestPayload.Payload = tryParseJson(requestPayload.Payload);
+    } else if (isSqsSendMessage && requestPayload && typeof requestPayload === "object" && "MessageBody" in requestPayload) {
+      requestPayload.MessageBody = tryParseJson(requestPayload.MessageBody);
+    }
+  }
+  const responsePayload = tryParseJson(selectedEvent.attributes?.["localstack.aws.service.response"]);
+  if (parseNestedJson && isLambdaInvoke && responsePayload && typeof responsePayload === "object" && "Payload" in responsePayload) {
+    responsePayload.Payload = tryParseJson(responsePayload.Payload);
+  }
+  const exceptionPayload = tryParseJson(selectedEvent.attributes?.["localstack.aws.service.exception"]);
+  const hasPayloads = requestPayload !== void 0 || responsePayload !== void 0 || exceptionPayload !== void 0;
+  const duration = selectedEvent.end_time_unix_nano ? ((BigInt(selectedEvent.end_time_unix_nano) - BigInt(selectedEvent.start_time_unix_nano)) / BigInt("1000000")).toString() : void 0;
+  return /* @__PURE__ */ jsxs129(Box13, { "data-testid": "event-details", sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ jsxs129(
+      Box13,
+      {
+        sx: {
+          alignItems: "center",
+          borderBottom: "1px solid",
+          borderColor: "divider",
+          display: "flex",
+          justifyContent: "space-between",
+          px: 2,
+          py: 1
+        },
+        children: [
+          /* @__PURE__ */ jsx136(Box13, { children: /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "h6", children: "Operation Details" }) }),
+          onClose && /* @__PURE__ */ jsx136(IconButton3, { onClick: onClose, size: "small", children: /* @__PURE__ */ jsx136(Close2, {}) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx136(Box13, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 2, children: [
+      /* @__PURE__ */ jsx136(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 1, children: [
+        /* @__PURE__ */ jsxs129(Box13, { sx: { display: "grid", gap: 2, gridTemplateColumns: "1.3fr 1fr" }, children: [
+          /* @__PURE__ */ jsxs129(Box13, { children: [
+            /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
+            /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: selectedEvent.service_name })
+          ] }),
+          /* @__PURE__ */ jsxs129(Box13, { children: [
+            /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Operation" }),
+            /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: selectedEvent.operation_name })
+          ] })
         ] }),
-        /* @__PURE__ */ jsxs130(Box14, { children: [
-          /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
-          /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: selectedEvent.resource_name })
+        /* @__PURE__ */ jsxs129(Box13, { children: [
+          /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
+          /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: selectedEvent.resource_name })
         ] }),
-        Boolean(selectedEvent.region) && /* @__PURE__ */ jsxs130(Box14, { children: [
-          /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
-          /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: selectedEvent.region })
+        Boolean(resourceArn) && /* @__PURE__ */ jsxs129(Box13, { children: [
+          /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource ARN" }),
+          /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: resourceArn })
         ] }),
-        Boolean(resourceArn) && /* @__PURE__ */ jsxs130(Box14, { children: [
-          /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource ARN" }),
-          /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: resourceArn })
-        ] })
-      ] }) }),
-      /* @__PURE__ */ jsx137(Divider2, {}),
-      /* @__PURE__ */ jsx137(ToggleSection, { headline: "Timing", children: /* @__PURE__ */ jsxs130(Stack2, { spacing: 1, children: [
-        /* @__PURE__ */ jsxs130(Box14, { children: [
-          /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
-          /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
+        /* @__PURE__ */ jsxs129(Box13, { sx: { display: "grid", gap: 1, gridTemplateColumns: "1.3fr 1fr" }, children: [
+          /* @__PURE__ */ jsxs129(Box13, { children: [
+            /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Account" }),
+            /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: selectedEvent.account_id })
+          ] }),
+          /* @__PURE__ */ jsxs129(Box13, { children: [
+            /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
+            /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: selectedEvent.region })
+          ] })
         ] }),
-        selectedEvent.end_time_unix_nano !== null && /* @__PURE__ */ jsxs130(Box14, { children: [
-          /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
-          /* @__PURE__ */ jsxs130(Typography10, { variant: "body2", children: [
-            ((BigInt(selectedEvent.end_time_unix_nano) - BigInt(selectedEvent.start_time_unix_nano)) / BigInt(1e6)).toString(),
-            " ",
-            "ms"
+        /* @__PURE__ */ jsxs129(Box13, { sx: { display: "grid", gap: 1, gridTemplateColumns: duration === void 0 ? "1fr" : "1.3fr 1fr" }, children: [
+          /* @__PURE__ */ jsxs129(Box13, { children: [
+            /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
+            /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
+          ] }),
+          duration !== void 0 && /* @__PURE__ */ jsxs129(Box13, { children: [
+            /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
+            /* @__PURE__ */ jsxs129(Typography9, { variant: "body2", children: [
+              duration,
+              "ms"
+            ] })
           ] })
+        ] }),
+        /* @__PURE__ */ jsxs129(Box13, { children: [
+          /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Status" }),
+          /* @__PURE__ */ jsx136(Stack2, { alignItems: "center", direction: "row", flexWrap: "wrap", gap: 1, sx: { mb: eventGroups.errors || eventGroups.warnings ? 1 : 0 }, children: /* @__PURE__ */ jsx136(
+            Chip3,
+            {
+              color: selectedEvent.status_code === 2 ? "error" : selectedEvent.status_code === 1 ? "success" : "default",
+              label: selectedEvent.status_code === 2 ? "Error" : selectedEvent.status_code === 1 ? "OK" : "Unset",
+              size: "small"
+            }
+          ) })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsx137(Divider2, {}),
-      /* @__PURE__ */ jsx137(ToggleSection, { headline: "Status", children: /* @__PURE__ */ jsxs130(Stack2, { direction: "row", spacing: 1, children: [
-        /* @__PURE__ */ jsx137(
-          Chip3,
-          {
-            color: selectedEvent.status_code === 2 ? "error" : selectedEvent.status_code === 1 ? "success" : "default",
-            label: selectedEvent.status_code === 2 ? "Error" : selectedEvent.status_code === 1 ? "OK" : "Unset",
-            size: "small"
-          }
-        ),
-        Boolean(selectedEvent.status_message) && /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: selectedEvent.status_message })
-      ] }) }),
-      selectedEvent.events.length > 0 && /* @__PURE__ */ jsxs130(Fragment6, { children: [
-        /* @__PURE__ */ jsx137(Divider2, {}),
-        /* @__PURE__ */ jsx137(
-          EventSection,
+      /* @__PURE__ */ jsx136(Divider2, {}),
+      /* @__PURE__ */ jsxs129(ToggleSection, { headline: "Permissions", children: [
+        !eventGroups.permissions && !eventGroups.errors && !eventGroups.warnings && /* @__PURE__ */ jsx136(Typography9, { color: "text.secondary", variant: "body2", children: "There is no permission information available. Are IAM Policy Streams enabled?" }),
+        eventGroups.permissions && /* @__PURE__ */ jsx136(EventDetail, { displayText: "Permissions", events: eventGroups.permissions, type: "permission" }),
+        eventGroups.errors && /* @__PURE__ */ jsx136(EventDetail, { displayText: "Error", events: eventGroups.errors, type: "error" }),
+        eventGroups.warnings && /* @__PURE__ */ jsx136(EventDetail, { displayText: "Warning", events: eventGroups.warnings, type: "warning" })
+      ] }),
+      hasPayloads && /* @__PURE__ */ jsxs129(Fragment7, { children: [
+        /* @__PURE__ */ jsx136(Divider2, {}),
+        /* @__PURE__ */ jsx136(
+          ToggleSection,
           {
-            eventGroups: getEventGroupsByType(selectedEvent.events),
-            headline: "Events"
+            action: /* @__PURE__ */ jsx136(
+              FormControlLabel2,
+              {
+                control: /* @__PURE__ */ jsx136(Switch, { checked: !parseNestedJson, onChange: (event) => {
+                  setParseNestedJson(!event.target.checked);
+                }, size: "small" }),
+                label: /* @__PURE__ */ jsx136(Typography9, { variant: "caption", children: "View raw data" }),
+                sx: { mr: 0 }
+              }
+            ),
+            headline: "Payloads",
+            children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 2, children: [
+              requestPayload !== void 0 && /* @__PURE__ */ jsxs129(Box13, { children: [
+                /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Request" }),
+                /* @__PURE__ */ jsx136(PayloadViewer, { value: requestPayload })
+              ] }),
+              responsePayload !== void 0 && /* @__PURE__ */ jsxs129(Box13, { children: [
+                /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Response" }),
+                /* @__PURE__ */ jsx136(PayloadViewer, { value: responsePayload })
+              ] }),
+              exceptionPayload !== void 0 && /* @__PURE__ */ jsxs129(Box13, { children: [
+                /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Exception" }),
+                /* @__PURE__ */ jsx136(PayloadViewer, { value: exceptionPayload })
+              ] })
+            ] })
           }
         )
       ] }),
-      isLambdaInvoke && requestId !== void 0 && /* @__PURE__ */ jsxs130(Fragment6, { children: [
-        /* @__PURE__ */ jsx137(Divider2, {}),
-        /* @__PURE__ */ jsx137(ToggleSection, { headline: "Lambda Logs", children: /* @__PURE__ */ jsx137(
+      isLambdaInvoke && requestId !== void 0 && /* @__PURE__ */ jsxs129(Fragment7, { children: [
+        /* @__PURE__ */ jsx136(Divider2, {}),
+        /* @__PURE__ */ jsx136(ToggleSection, { headline: "Lambda Logs", children: /* @__PURE__ */ jsx136(
           LambdaInvokeLogsSection,
           {
             endTimeNano: selectedEvent.end_time_unix_nano ?? selectedEvent.start_time_unix_nano,
@@ -24476,58 +26655,72 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           }
         ) })
       ] }),
-      attributes.length > 0 && /* @__PURE__ */ jsxs130(Fragment6, { children: [
-        /* @__PURE__ */ jsx137(Divider2, {}),
-        /* @__PURE__ */ jsx137(ToggleSection, { headline: "Attributes", children: /* @__PURE__ */ jsx137(Stack2, { spacing: 1, children: attributes.map(([key, value]) => /* @__PURE__ */ jsxs130(Box14, { children: [
-          /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: ATTRIBUTE_NAME_TRANSFORMATIONS[key] ?? key }),
-          renderKeyValue(key, value)
-        ] }, key)) }) })
-      ] })
+      /* @__PURE__ */ jsx136(Divider2, {}),
+      /* @__PURE__ */ jsx136(ToggleSection, { headline: "Advanced Information", initialOpen: false, children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 1, children: [
+        /* @__PURE__ */ jsxs129(Box13, { children: [
+          /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
+          /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: selectedEvent.span_id })
+        ] }),
+        /* @__PURE__ */ jsxs129(Box13, { children: [
+          /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
+          /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: selectedEvent.trace_id })
+        ] }),
+        requestId !== void 0 && /* @__PURE__ */ jsxs129(Box13, { children: [
+          /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Request ID" }),
+          /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: requestId })
+        ] }),
+        eventGroups.info && /* @__PURE__ */ jsx136(EventDetail, { displayText: "Info", events: eventGroups.info, type: "info" })
+      ] }) })
     ] }) })
   ] });
 };
-function renderKeyValue(key, value) {
-  if (typeof value === "string" && (key === "localstack.aws.service.request" || key === "localstack.aws.service.response" || key === "localstack.aws.service.exception")) {
-    return /* @__PURE__ */ jsx137(Box14, { sx: { backgroundColor: (theme) => theme.palette.background.default, borderRadius: 1, p: 1 }, children: /* @__PURE__ */ jsx137("pre", { style: { margin: 0, overflow: "auto" }, children: /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: JSON.stringify(JSON.parse(value), void 0, 2) }) }) });
-  }
-  if (typeof value === "boolean") {
-    return /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: value ? "yes" : "no" });
-  }
-  return /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: value });
-}
+var PayloadViewer = memo10(({ value }) => {
+  const theme = useTheme3();
+  return /* @__PURE__ */ jsx136(Box13, { sx: { backgroundColor: "background.default", borderRadius: 1, fontSize: 12, overflow: "auto", p: 1 }, children: /* @__PURE__ */ jsx136(
+    JsonViewer,
+    {
+      displayDataTypes: false,
+      displaySize: false,
+      enableClipboard: false,
+      rootName: false,
+      theme: theme.palette.mode,
+      value
+    }
+  ) });
+});
 
 // src/components/trace-graph/trace-graph.tsx
 import "@xyflow/react/dist/base.css";
-import { Alert as Alert3, Button as Button4, useTheme as useTheme3 } from "@mui/material";
-import { Background, ReactFlow, useNodesState } from "@xyflow/react";
-import { useEffect as useEffect17, useState as useState12 } from "react";
+import { Alert as Alert3, Button as Button4, useTheme as useTheme4 } from "@mui/material";
+import { Background, MarkerType, Position as Position2, ReactFlow, useEdgesState, useNodesState } from "@xyflow/react";
+import { useEffect as useEffect18 } from "react";
 
 // src/components/trace-graph/service-node.tsx
-import { Box as Box16, Stack as Stack3, Typography as Typography11 } from "@mui/material";
+import { Box as Box15, Stack as Stack3, Typography as Typography10 } from "@mui/material";
 import "@xyflow/react/dist/style.css";
 import { Handle, Position } from "@xyflow/react";
-import { memo as memo9 } from "react";
+import { memo as memo11 } from "react";
 
 // src/components/trace-graph/problem-indicator.tsx
 import { Error as ErrorIcon2, Info as Info2, Warning as Warning2 } from "@mui/icons-material";
-import { Box as Box15, Tooltip as Tooltip3 } from "@mui/material";
-import { useMemo as useMemo11 } from "react";
-import { jsx as jsx138 } from "react/jsx-runtime";
+import { Box as Box14, Tooltip as Tooltip3 } from "@mui/material";
+import { useMemo as useMemo12 } from "react";
+import { jsx as jsx137 } from "react/jsx-runtime";
 var ProblemIndicator = ({ error }) => {
-  const icon = useMemo11(() => {
+  const icon = useMemo12(() => {
     switch (error.level) {
       case "error": {
-        return /* @__PURE__ */ jsx138(ErrorIcon2, { sx: { color: "#d32f2f", fontSize: "14px" } });
+        return /* @__PURE__ */ jsx137(ErrorIcon2, { sx: { color: "#d32f2f", fontSize: "14px" } });
       }
       case "warning": {
-        return /* @__PURE__ */ jsx138(Warning2, { sx: { color: "#ff9800", fontSize: "14px" } });
+        return /* @__PURE__ */ jsx137(Warning2, { sx: { color: "#ff9800", fontSize: "14px" } });
       }
       default: {
-        return /* @__PURE__ */ jsx138(Info2, { sx: { color: "#2196f3", fontSize: "14px" } });
+        return /* @__PURE__ */ jsx137(Info2, { sx: { color: "#2196f3", fontSize: "14px" } });
       }
     }
   }, [error.level]);
-  const color2 = useMemo11(() => {
+  const color2 = useMemo12(() => {
     switch (error.level) {
       case "error": {
         return "#d32f2f";
@@ -24540,8 +26733,8 @@ var ProblemIndicator = ({ error }) => {
       }
     }
   }, [error.level]);
-  return /* @__PURE__ */ jsx138(Tooltip3, { arrow: true, title: error.message ?? "Issue detected", children: /* @__PURE__ */ jsx138(
-    Box15,
+  return /* @__PURE__ */ jsx137(Tooltip3, { arrow: true, title: error.message ?? "Issue detected", children: /* @__PURE__ */ jsx137(
+    Box14,
     {
       sx: {
         alignItems: "center",
@@ -24560,17 +26753,17 @@ var ProblemIndicator = ({ error }) => {
 };
 
 // src/components/trace-graph/service-node.tsx
-import { jsx as jsx139, jsxs as jsxs131 } from "react/jsx-runtime";
+import { jsx as jsx138, jsxs as jsxs130 } from "react/jsx-runtime";
 var handleStyle = {
   backgroundColor: "white",
   borderColor: "lightgray",
   opacity: 0
 };
-var ServiceNode = memo9(({ data, selected }) => {
+var ServiceNode = memo11(({ data, selected }) => {
   const hasErrors = (data.event.errors && data.event.errors.length > 0) ?? false;
-  return /* @__PURE__ */ jsxs131(Box16, { sx: { maxWidth: 200 }, children: [
-    /* @__PURE__ */ jsxs131(
-      Box16,
+  return /* @__PURE__ */ jsxs130(Box15, { sx: { maxWidth: 200 }, children: [
+    /* @__PURE__ */ jsxs130(
+      Box15,
       {
         role: "button",
         sx: {
@@ -24590,9 +26783,9 @@ var ServiceNode = memo9(({ data, selected }) => {
         },
         tabIndex: 0,
         children: [
-          /* @__PURE__ */ jsx139(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
-          /* @__PURE__ */ jsx139(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
-          /* @__PURE__ */ jsx139(
+          /* @__PURE__ */ jsx138(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
+          /* @__PURE__ */ jsx138(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
+          /* @__PURE__ */ jsx138(
             ServiceCell,
             {
               height: "32px",
@@ -24605,7 +26798,7 @@ var ServiceNode = memo9(({ data, selected }) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsxs131(
+    /* @__PURE__ */ jsxs130(
       Stack3,
       {
         alignItems: "center",
@@ -24616,7 +26809,7 @@ var ServiceNode = memo9(({ data, selected }) => {
           mt: 0.5
         },
         children: [
-          hasErrors && /* @__PURE__ */ jsx139(
+          hasErrors && /* @__PURE__ */ jsx138(
             Stack3,
             {
               direction: "row",
@@ -24625,11 +26818,11 @@ var ServiceNode = memo9(({ data, selected }) => {
                 flexWrap: "wrap",
                 gap: "2px"
               },
-              children: data.event.errors?.map((error) => /* @__PURE__ */ jsx139(ProblemIndicator, { error }, error.span_id))
+              children: data.event.errors?.map((error) => /* @__PURE__ */ jsx138(ProblemIndicator, { error }, error.span_id))
             }
           ),
-          /* @__PURE__ */ jsx139(
-            Typography11,
+          /* @__PURE__ */ jsx138(
+            Typography10,
             {
               sx: {
                 fontSize: "0.9rem",
@@ -24651,56 +26844,6 @@ var ServiceNode = memo9(({ data, selected }) => {
 
 // src/components/trace-graph/utils.ts
 import dagre from "@dagrejs/dagre";
-import { MarkerType, Position as Position2 } from "@xyflow/react";
-var generateNodesAndEdges = (event, parentId) => {
-  const nodes = [];
-  const edges = [];
-  nodes.push({
-    data: {
-      data: { [event.span_id]: event },
-      event,
-      height: 28,
-      id: event.span_id,
-      position: { x: 0, y: 0 },
-      width: 28
-    },
-    id: event.span_id,
-    position: { x: 0, y: 0 },
-    // Will be set by layout
-    sourcePosition: Position2.Right,
-    targetPosition: Position2.Left,
-    type: "service"
-  });
-  if (parentId) {
-    edges.push({
-      animated: false,
-      id: `e-${parentId}-${event.span_id}`,
-      markerEnd: {
-        color: "lightgray",
-        height: 16,
-        type: MarkerType.Arrow,
-        width: 16
-      },
-      source: parentId,
-      style: {
-        stroke: "lightgray",
-        strokeWidth: 1
-      },
-      target: event.span_id
-    });
-  }
-  if (event.children && event.children.length > 0) {
-    for (const child of event.children) {
-      const { edges: childEdges, nodes: childNodes } = generateNodesAndEdges(
-        child,
-        event.span_id
-      );
-      nodes.push(...childNodes);
-      edges.push(...childEdges);
-    }
-  }
-  return { edges, nodes };
-};
 var getLayoutedNodesAndEdges = (inputNodes, inputEdges) => {
   const dagreGraph = new dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
   const direction = "LR";
@@ -24730,9 +26873,9 @@ var getLayoutedNodesAndEdges = (inputNodes, inputEdges) => {
 
 // src/components/trace-graph/xyflow/controls.tsx
 import { Add, FitScreen, Remove } from "@mui/icons-material";
-import { Box as Box17, IconButton as IconButton4 } from "@mui/material";
-import { useReactFlow, useStore } from "@xyflow/react";
-import { memo as memo10 } from "react";
+import { Box as Box16, IconButton as IconButton4 } from "@mui/material";
+import { useReactFlow, useStore as useStore2 } from "@xyflow/react";
+import { memo as memo12 } from "react";
 
 // node_modules/zustand/esm/shallow.mjs
 function shallow$1(objA, objB) {
@@ -24773,14 +26916,14 @@ function shallow$1(objA, objB) {
 }
 
 // src/components/trace-graph/xyflow/controls.tsx
-import { jsx as jsx140, jsxs as jsxs132 } from "react/jsx-runtime";
+import { jsx as jsx139, jsxs as jsxs131 } from "react/jsx-runtime";
 var selector = (s2) => ({
   isInteractive: s2.nodesDraggable || s2.nodesConnectable || s2.elementsSelectable,
   maxZoomReached: s2.transform[2] >= s2.maxZoom,
   minZoomReached: s2.transform[2] <= s2.minZoom
 });
-var Controls = memo10(() => {
-  const { maxZoomReached, minZoomReached } = useStore(selector, shallow$1);
+var Controls = memo12(() => {
+  const { maxZoomReached, minZoomReached } = useStore2(selector, shallow$1);
   const { fitView, zoomIn, zoomOut } = useReactFlow();
   const onZoomInHandler = () => {
     void zoomIn();
@@ -24791,8 +26934,8 @@ var Controls = memo10(() => {
   const onFitViewHandler = () => {
     void fitView();
   };
-  return /* @__PURE__ */ jsxs132(
-    Box17,
+  return /* @__PURE__ */ jsxs131(
+    Box16,
     {
       sx: {
         bottom: 0,
@@ -24805,33 +26948,33 @@ var Controls = memo10(() => {
         zIndex: 5
       },
       children: [
-        /* @__PURE__ */ jsx140(
+        /* @__PURE__ */ jsx139(
           IconButton4,
           {
             className: "react-flow__controls-zoomin",
             disabled: maxZoomReached,
             onClick: onZoomInHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx140(Add, {})
+            children: /* @__PURE__ */ jsx139(Add, {})
           }
         ),
-        /* @__PURE__ */ jsx140(
+        /* @__PURE__ */ jsx139(
           IconButton4,
           {
             className: "react-flow__controls-zoomout",
             disabled: minZoomReached,
             onClick: onZoomOutHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx140(Remove, {})
+            children: /* @__PURE__ */ jsx139(Remove, {})
           }
         ),
-        /* @__PURE__ */ jsx140(
+        /* @__PURE__ */ jsx139(
           IconButton4,
           {
             className: "react-flow__controls-fitview",
             onClick: onFitViewHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx140(FitScreen, {})
+            children: /* @__PURE__ */ jsx139(FitScreen, {})
           }
         )
       ]
@@ -24840,7 +26983,7 @@ var Controls = memo10(() => {
 });
 
 // src/components/trace-graph/trace-graph.tsx
-import { Fragment as Fragment7, jsx as jsx141, jsxs as jsxs133 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx140, jsxs as jsxs132 } from "react/jsx-runtime";
 var nodeTypes = {
   service: ServiceNode
 };
@@ -24851,40 +26994,48 @@ var TraceGraph = ({
   spans
 }) => {
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
-  const [edges, setEdges] = useState12([]);
-  useEffect17(() => {
-    const spansMap = /* @__PURE__ */ new Map();
-    const rootSpans = [];
-    for (const span of spans.data ?? []) {
-      spansMap.set(span.span_id, { ...span, children: [] });
-    }
+  const [edges, setEdges] = useEdgesState([]);
+  useEffect18(() => {
+    const allNodes = [];
+    const allEdges = [];
     for (const span of spans.data ?? []) {
-      const currentSpan = spansMap.get(span.span_id);
-      if (!currentSpan) continue;
-      if (span.parent_span_id && spansMap.has(span.parent_span_id)) {
-        const parentSpan = spansMap.get(span.parent_span_id);
-        if (parentSpan) {
-          parentSpan.children ??= [];
-          parentSpan.children.push(currentSpan);
-        }
-      } else {
-        rootSpans.push(currentSpan);
+      allNodes.push({
+        data: {
+          data: { [span.span_id]: span },
+          event: span,
+          height: 28,
+          id: span.span_id,
+          position: { x: 0, y: 0 },
+          width: 28
+        },
+        id: span.span_id,
+        position: { x: 0, y: 0 },
+        sourcePosition: Position2.Right,
+        targetPosition: Position2.Left,
+        type: "service"
+      });
+      if (span.parent_span_id !== null) {
+        allEdges.push({
+          animated: false,
+          id: `e-${span.parent_span_id}-${span.span_id}`,
+          markerEnd: { color: "lightgray", height: 16, type: MarkerType.Arrow, width: 16 },
+          source: span.parent_span_id,
+          style: { stroke: "lightgray", strokeWidth: 1 },
+          target: span.span_id
+        });
       }
       for (const linkedSpanId of span.linked_span_ids ?? []) {
-        const linkedSpan = spansMap.get(linkedSpanId);
-        if (linkedSpan) {
-          linkedSpan.children ??= [];
-          linkedSpan.children.push(currentSpan);
-        }
+        allEdges.push({
+          id: `e-link-${linkedSpanId}-${span.span_id}`,
+          markerEnd: { color: "lightgray", height: 16, type: MarkerType.Arrow, width: 16 },
+          source: linkedSpanId,
+          style: { stroke: "lightgray", strokeWidth: 1 },
+          // animated: true,
+          // style: { stroke: 'lightgray', strokeDasharray: '4 2', strokeWidth: 1 },
+          target: span.span_id
+        });
       }
     }
-    let allNodes = [];
-    let allEdges = [];
-    for (const rootSpan of rootSpans) {
-      const { edges: newEdges, nodes: newNodes } = generateNodesAndEdges(rootSpan);
-      allNodes = [...allNodes, ...newNodes];
-      allEdges = [...allEdges, ...newEdges];
-    }
     const { edges: layoutedEdges, nodes: layoutedNodes } = getLayoutedNodesAndEdges(allNodes, allEdges);
     for (const node of layoutedNodes) {
       if (node.id === initialFocusEventId) {
@@ -24893,13 +27044,13 @@ var TraceGraph = ({
     }
     setNodes(layoutedNodes);
     setEdges(layoutedEdges);
-  }, [spans.data, initialFocusEventId, setNodes]);
-  const theme = useTheme3();
-  return /* @__PURE__ */ jsxs133(Fragment7, { children: [
-    spans.error && /* @__PURE__ */ jsxs133(
+  }, [spans.data, initialFocusEventId, setNodes, setEdges]);
+  const theme = useTheme4();
+  return /* @__PURE__ */ jsxs132(Fragment8, { children: [
+    spans.error && /* @__PURE__ */ jsxs132(
       Alert3,
       {
-        action: /* @__PURE__ */ jsx141(Button4, { onClick: () => {
+        action: /* @__PURE__ */ jsx140(Button4, { onClick: () => {
           onRefresh();
         }, children: "Retry" }),
         severity: "error",
@@ -24910,7 +27061,7 @@ var TraceGraph = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs133(
+    /* @__PURE__ */ jsxs132(
       ReactFlow,
       {
         "data-testid": "trace-graph",
@@ -24928,8 +27079,8 @@ var TraceGraph = ({
         onNodesChange,
         selectNodesOnDrag: false,
         children: [
-          /* @__PURE__ */ jsx141(Controls, {}),
-          /* @__PURE__ */ jsx141(
+          /* @__PURE__ */ jsx140(Controls, {}),
+          /* @__PURE__ */ jsx140(
             Background,
             {
               bgColor: theme.palette.background.paper,
@@ -24943,7 +27094,7 @@ var TraceGraph = ({
 };
 
 // src/pages/trace-graph-page.tsx
-import { Fragment as Fragment8, jsx as jsx142, jsxs as jsxs134 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx141, jsxs as jsxs133 } from "react/jsx-runtime";
 var HEADER_HEIGHT = 56;
 var DRAWER_WIDTH = "35%";
 var Main = styled("main", { shouldForwardProp: (property) => property !== "open" })(({ open, theme }) => ({
@@ -24991,8 +27142,8 @@ var TraceGraphView = ({
   traceId
 }) => {
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
-  return /* @__PURE__ */ jsxs134(
-    Box18,
+  return /* @__PURE__ */ jsxs133(
+    Box17,
     {
       "data-testid": "trace-graph-page",
       sx: {
@@ -25004,14 +27155,14 @@ var TraceGraphView = ({
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ jsxs134(Box18, { sx: { display: "flex", width: "100%" }, children: [
-          /* @__PURE__ */ jsx142(Button5, { onClick: () => {
+        /* @__PURE__ */ jsxs133(Box17, { sx: { display: "flex", width: "100%" }, children: [
+          /* @__PURE__ */ jsx141(Button5, { onClick: () => {
             navigateToSpansList();
-          }, startIcon: /* @__PURE__ */ jsx142(ArrowBack, {}), children: "Go back" }),
-          /* @__PURE__ */ jsx142(Box18, { sx: { flexGrow: 1 } })
+          }, startIcon: /* @__PURE__ */ jsx141(ArrowBack, {}), children: "Go back" }),
+          /* @__PURE__ */ jsx141(Box17, { sx: { flexGrow: 1 } })
         ] }),
-        /* @__PURE__ */ jsx142(
-          Paper2,
+        /* @__PURE__ */ jsx141(
+          Paper3,
           {
             sx: {
               display: "flex",
@@ -25020,22 +27171,22 @@ var TraceGraphView = ({
               position: "relative",
               width: "100%"
             },
-            children: shouldShowStatusMessage ? /* @__PURE__ */ jsx142(
+            children: shouldShowStatusMessage ? /* @__PURE__ */ jsx141(
               StatusMessage,
               {
                 error: statusError,
                 onRetry: handleRetry,
                 status
               }
-            ) : /* @__PURE__ */ jsxs134(Fragment8, { children: [
-              /* @__PURE__ */ jsx142(Main, { open, children: /* @__PURE__ */ jsx142(
-                Box18,
+            ) : /* @__PURE__ */ jsxs133(Fragment9, { children: [
+              /* @__PURE__ */ jsx141(Main, { open, children: /* @__PURE__ */ jsx141(
+                Box17,
                 {
                   sx: {
                     height: "100%",
                     overflow: "auto"
                   },
-                  children: traceId !== void 0 && /* @__PURE__ */ jsx142(ReactFlowProvider, { children: /* @__PURE__ */ jsx142(
+                  children: traceId !== void 0 && /* @__PURE__ */ jsx141(ReactFlowProvider, { children: /* @__PURE__ */ jsx141(
                     TraceGraph,
                     {
                       initialFocusEventId: spanId,
@@ -25052,7 +27203,7 @@ var TraceGraphView = ({
                   ) })
                 }
               ) }),
-              /* @__PURE__ */ jsx142(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx142(EventDetails, { onClose: handleClose, selectedEvent }) })
+              /* @__PURE__ */ jsx141(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx141(EventDetails, { onClose: handleClose, selectedEvent }) })
             ] })
           }
         )
@@ -25069,7 +27220,7 @@ async function fetchConnectedTraces(api, traceIds, allSpans = /* @__PURE__ */ ne
   const traceResponses = await Promise.all(
     newTraceIds.map((id2) => api.getSpans({ trace_id: id2 }))
   );
-  const currentBatchSpans = traceResponses.flatMap((r2) => r2.spans);
+  const currentBatchSpans = traceResponses.flatMap((r3) => r3.spans);
   const currentSpanIds = currentBatchSpans.map((s2) => s2.span_id);
   for (const span of currentBatchSpans) {
     allSpans.set(span.span_id, span);
@@ -25096,10 +27247,10 @@ async function fetchConnectedTraces(api, traceIds, allSpans = /* @__PURE__ */ ne
 }
 var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = useState13();
-  const [loading, setLoading] = useState13(false);
-  const [fetchError, setFetchError] = useState13();
-  const fetchSpans = useCallback8(async () => {
+  const [spans, setSpans] = useState14();
+  const [loading, setLoading] = useState14(false);
+  const [fetchError, setFetchError] = useState14();
+  const fetchSpans = useCallback9(async () => {
     setLoading(true);
     try {
       const spans2 = await fetchConnectedTraces(api, [traceId]);
@@ -25112,31 +27263,31 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       setLoading(false);
     }
   }, [api, traceId]);
-  useEffect18(() => {
+  useEffect19(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  const [open, setOpen] = useState13(true);
-  const [selectedEvent, setSelectedEvent] = useState13(() => spans?.find((span) => span.span_id === spanId));
-  const spansReference = useRef13();
-  useEffect18(() => {
+  const [open, setOpen] = useState14(true);
+  const [selectedEvent, setSelectedEvent] = useState14(() => spans?.find((span) => span.span_id === spanId));
+  const spansReference = useRef14();
+  useEffect19(() => {
     if (!spansReference.current && spans) {
       setSelectedEvent(spans.find((span) => span.span_id === spanId));
       spansReference.current = spans;
     }
   }, [spans, setSelectedEvent, spanId]);
   const { checkStatus, error: statusError, status } = useStatus();
-  const handleEventSelect = useCallback8((spanId2) => {
+  const handleEventSelect = useCallback9((spanId2) => {
     const span = spans?.find((s2) => s2.span_id === spanId2);
     setSelectedEvent(span);
     setOpen(true);
   }, [spans]);
-  const handleRetry = useCallback8(() => {
+  const handleRetry = useCallback9(() => {
     void checkStatus();
   }, [checkStatus]);
-  const navigateToSpansList = useCallback8(() => {
+  const navigateToSpansList = useCallback9(() => {
     onClose?.();
   }, [onClose]);
-  return /* @__PURE__ */ jsx142(
+  return /* @__PURE__ */ jsx141(
     TraceGraphView,
     {
       fetchError,
@@ -25160,7 +27311,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
 };
 
 // src/pages/spans-list-page.tsx
-import { Fragment as Fragment9, jsx as jsx143, jsxs as jsxs135 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx142, jsxs as jsxs134 } from "react/jsx-runtime";
 var SpansListPage = () => {
   const {
     checkStatus,
@@ -25179,23 +27330,23 @@ var SpansListPage = () => {
     streamPaused,
     toggleStream
   } = useSpans();
-  const clearSpansSync = useCallback9(() => {
+  const clearSpansSync = useCallback10(() => {
     void clearSpans();
   }, [clearSpans]);
   const [order2, setOrder] = useLocalStorage("spans-order", "oldest_first");
-  const [selectedTraceId, setSelectedTraceId] = useState14();
-  const [selectedSpanId, setSelectedSpanId] = useState14();
-  const navigateToSpan = useCallback9((span) => {
+  const [selectedTraceId, setSelectedTraceId] = useState15();
+  const [selectedSpanId, setSelectedSpanId] = useState15();
+  const navigateToSpan = useCallback10((span) => {
     setSelectedTraceId(span.trace_id);
     setSelectedSpanId(span.span_id);
   }, []);
-  const handleRetry = useCallback9(() => {
+  const handleRetry = useCallback10(() => {
     void checkStatus();
   }, [checkStatus]);
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
-  return /* @__PURE__ */ jsxs135(Fragment9, { children: [
-    /* @__PURE__ */ jsx143(
-      Box19,
+  return /* @__PURE__ */ jsxs134(Fragment10, { children: [
+    /* @__PURE__ */ jsx142(
+      Box18,
       {
         "data-testid": "spans-list-page",
         sx: {
@@ -25209,14 +27360,14 @@ var SpansListPage = () => {
           visibility: selectedTraceId === void 0 ? "visible" : "hidden",
           width: "100%"
         },
-        children: shouldShowStatusMessage ? /* @__PURE__ */ jsx143(
+        children: shouldShowStatusMessage ? /* @__PURE__ */ jsx142(
           StatusMessage,
           {
             error: statusError,
             onRetry: handleRetry,
             status
           }
-        ) : /* @__PURE__ */ jsx143(
+        ) : /* @__PURE__ */ jsx142(
           SpansList,
           {
             clearingSpans,
@@ -25238,7 +27389,7 @@ var SpansListPage = () => {
         )
       }
     ),
-    selectedTraceId !== void 0 && /* @__PURE__ */ jsx143(TraceGraphPage, { onClose: () => {
+    selectedTraceId !== void 0 && /* @__PURE__ */ jsx142(TraceGraphPage, { onClose: () => {
       setSelectedTraceId(void 0);
     }, spanId: selectedSpanId, traceId: selectedTraceId })
   ] });
@@ -25259,6 +27410,28 @@ export {
 };
 /*! Bundled license information:
 
+use-sync-external-store/cjs/use-sync-external-store-shim.development.js:
+  (**
+   * @license React
+   * use-sync-external-store-shim.development.js
+   *
+   * Copyright (c) Meta Platforms, Inc. and affiliates.
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   *)
+
+use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js:
+  (**
+   * @license React
+   * use-sync-external-store-shim/with-selector.development.js
+   *
+   * Copyright (c) Meta Platforms, Inc. and affiliates.
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   *)
+
 @tanstack/table-core/build/lib/index.mjs:
   (**
      * table-core