@localstack/appinspector-ui 1.0.73 → 1.0.75

package/dist/index.cjs

@@ -33,198 +33,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// node_modules/framer-motion/node_modules/@emotion/memoize/dist/memoize.browser.esm.js
-function memoize(fn) {
-  var cache2 = {};
-  return function(arg) {
-    if (cache2[arg] === void 0) cache2[arg] = fn(arg);
-    return cache2[arg];
-  };
-}
-var memoize_browser_esm_default;
-var init_memoize_browser_esm = __esm({
-  "node_modules/framer-motion/node_modules/@emotion/memoize/dist/memoize.browser.esm.js"() {
-    "use strict";
-    memoize_browser_esm_default = memoize;
-  }
-});
-
-// node_modules/framer-motion/node_modules/@emotion/is-prop-valid/dist/is-prop-valid.browser.esm.js
-var is_prop_valid_browser_esm_exports = {};
-__export(is_prop_valid_browser_esm_exports, {
-  default: () => is_prop_valid_browser_esm_default
-});
-var reactPropsRegex, index, is_prop_valid_browser_esm_default;
-var init_is_prop_valid_browser_esm = __esm({
-  "node_modules/framer-motion/node_modules/@emotion/is-prop-valid/dist/is-prop-valid.browser.esm.js"() {
-    "use strict";
-    init_memoize_browser_esm();
-    reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|inert|itemProp|itemScope|itemType|itemID|itemRef|on|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/;
-    index = memoize_browser_esm_default(
-      function(prop) {
-        return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111 && prop.charCodeAt(1) === 110 && prop.charCodeAt(2) < 91;
-      }
-      /* Z+1 */
-    );
-    is_prop_valid_browser_esm_default = index;
-  }
-});
-
-// 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, module2) {
-    "use strict";
-    if (false) {
-      module2.exports = null;
-    } else {
-      module2.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, module2) {
-    "use strict";
-    if (false) {
-      module2.exports = null;
-    } else {
-      module2.exports = require_with_selector_development();
-    }
-  }
-});
-
 // node_modules/toggle-selection/index.js
 var require_toggle_selection = __commonJS({
   "node_modules/toggle-selection/index.js"(exports, module2) {
@@ -680,7 +488,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/pages/spans-list-page.tsx
 var import_material20 = require("@mui/material");
-var import_react64 = require("react");
+var import_react63 = require("react");
 
 // src/components/spans-list/spans-list.tsx
 var import_material5 = require("@mui/material");
@@ -748,7 +556,7 @@ function memo(getDeps, fn, opts) {
     let depTime;
     if (opts.key && opts.debug) depTime = Date.now();
     const newDeps = getDeps(depArgs);
-    const depsChanged = newDeps.length !== deps.length || newDeps.some((dep, index2) => deps[index2] !== dep);
+    const depsChanged = newDeps.length !== deps.length || newDeps.some((dep, index) => deps[index] !== dep);
     if (!depsChanged) {
       return result;
     }
@@ -1048,9 +856,9 @@ function buildHeaderGroups(allColumns, columnsToGroup, table, headerFamily) {
       createHeaderGroup(pendingParentHeaders, depth - 1);
     }
   };
-  const bottomHeaders = columnsToGroup.map((column, index2) => createHeader(table, column, {
+  const bottomHeaders = columnsToGroup.map((column, index) => createHeader(table, column, {
     depth: maxDepth2,
-    index: index2
+    index
   }));
   createHeaderGroup(bottomHeaders, maxDepth2 - 1);
   headerGroups.reverse();
@@ -3197,9 +3005,9 @@ function createTable(options) {
     setState: (updater) => {
       table.options.onStateChange == null || table.options.onStateChange(updater);
     },
-    _getRowId: (row, index2, parent) => {
+    _getRowId: (row, index, parent) => {
       var _table$options$getRow;
-      return (_table$options$getRow = table.options.getRowId == null ? void 0 : table.options.getRowId(row, index2, parent)) != null ? _table$options$getRow : `${parent ? [parent.id, index2].join(".") : index2}`;
+      return (_table$options$getRow = table.options.getRowId == null ? void 0 : table.options.getRowId(row, index, parent)) != null ? _table$options$getRow : `${parent ? [parent.id, index].join(".") : index}`;
     },
     getCoreRowModel: () => {
       if (!table._getCoreRowModel) {
@@ -3290,8 +3098,8 @@ function createTable(options) {
     }
   };
   Object.assign(table, coreInstance);
-  for (let index2 = 0; index2 < table._features.length; index2++) {
-    const feature = table._features[index2];
+  for (let index = 0; index < table._features.length; index++) {
+    const feature = table._features[index];
     feature == null || feature.createTable == null || feature.createTable(table);
   }
   return table;
@@ -4603,7 +4411,7 @@ function loadExternalIsValidProp(isValidProp) {
   };
 }
 try {
-  loadExternalIsValidProp((init_is_prop_valid_browser_esm(), __toCommonJS(is_prop_valid_browser_esm_exports)).default);
+  loadExternalIsValidProp(require("@emotion/is-prop-valid").default);
 } catch (_a2) {
 }
 function filterProps(props, isDom, forwardMotionProps) {
@@ -4870,8 +4678,8 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
       for (var key2 in target) {
         var valueTarget = target[key2];
         if (Array.isArray(valueTarget)) {
-          var index2 = initialAnimationIsBlocked ? valueTarget.length - 1 : 0;
-          valueTarget = valueTarget[index2];
+          var index = initialAnimationIsBlocked ? valueTarget.length - 1 : 0;
+          valueTarget = valueTarget[index];
         }
         if (valueTarget !== null) {
           values[key2] = valueTarget;
@@ -5682,9 +5490,9 @@ function createRenderStep(runNextFrame2) {
       return callback;
     },
     cancel: (callback) => {
-      const index2 = toRunNextFrame.indexOf(callback);
-      if (index2 !== -1)
-        toRunNextFrame.splice(index2, 1);
+      const index = toRunNextFrame.indexOf(callback);
+      if (index !== -1)
+        toRunNextFrame.splice(index, 1);
       toKeepAlive.delete(callback);
     },
     process: (frameData) => {
@@ -6546,8 +6354,8 @@ function addUniqueItem(arr, item) {
   arr.indexOf(item) === -1 && arr.push(item);
 }
 function removeItem(arr, item) {
-  var index2 = arr.indexOf(item);
-  index2 > -1 && arr.splice(index2, 1);
+  var index = arr.indexOf(item);
+  index > -1 && arr.splice(index, 1);
 }
 
 // node_modules/framer-motion/dist/es/utils/subscription-manager.mjs
@@ -13100,8 +12908,8 @@ var SpansDataGrid = ({
                   hasRows && !hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM }),
                   hasRows && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(AnimatePresence, { initial: false, children: (() => {
                     const reversed = [];
-                    for (let index2 = rows.length - 1; index2 >= 0; index2--) {
-                      const row = rows.at(index2);
+                    for (let index = rows.length - 1; index >= 0; index--) {
+                      const row = rows.at(index);
                       reversed.push(
                         /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(SpansDataGridRow, { row }, row.original.span_id)
                       );
@@ -13954,9 +13762,10 @@ var useAppInspector = () => {
   return context;
 };
 var AppInspectorContextProvider = (props) => {
-  const api = (0, import_react45.useMemo)(() => {
-    return false ? createApiClientMock() : createApiClient({ localstackEndpoint: props.localstackEndpoint });
-  }, [props.localstackEndpoint]);
+  const api = (0, import_react45.useMemo)(
+    () => createApiClient({ localstackEndpoint: props.localstackEndpoint }),
+    [props.localstackEndpoint]
+  );
   const resolveLink = (0, import_react45.useCallback)(
     (options) => {
       if (options.to === "settings") {
@@ -14141,8 +13950,8 @@ var useSpans = () => {
 var import_icons_material11 = require("@mui/icons-material");
 var import_material19 = require("@mui/material");
 var import_styles = require("@mui/material/styles");
-var import_react62 = require("@xyflow/react");
-var import_react63 = require("react");
+var import_react61 = require("@xyflow/react");
+var import_react62 = require("react");
 
 // src/components/event-details/event-details.tsx
 var import_icons_material8 = require("@mui/icons-material");
@@ -14151,80 +13960,8 @@ var import_material14 = require("@mui/material");
 // node_modules/@textea/json-viewer/dist/index.mjs
 var import_jsx_runtime129 = require("react/jsx-runtime");
 var import_material7 = require("@mui/material");
-var import_react49 = require("react");
-
-// node_modules/zustand/esm/vanilla.mjs
-var import_meta = {};
-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_react48 = __toESM(require("react"), 1);
-var import_with_selector = __toESM(require_with_selector(), 1);
-var import_meta2 = {};
-var { useDebugValue } = import_react48.default;
-var { useSyncExternalStoreWithSelector } = import_with_selector.default;
-var didWarnAboutEqualityFn = false;
-var identity = (arg) => arg;
-function useStore(api, selector2 = identity, equalityFn) {
-  if ((import_meta2.env ? import_meta2.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_meta2.env ? import_meta2.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'`."
-    );
-  }
-  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_react48 = require("react");
+var import_zustand = require("zustand");
 var import_copy_to_clipboard = __toESM(require_copy_to_clipboard(), 1);
 function r(e2) {
   var t2, f2, n2 = "";
@@ -14282,7 +14019,7 @@ var darkColorspace = {
 var DefaultKeyRenderer = () => null;
 DefaultKeyRenderer.when = () => false;
 var createJsonViewerStore = (props) => {
-  return create()((set, get) => {
+  return (0, import_zustand.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
@@ -14340,11 +14077,11 @@ var createJsonViewerStore = (props) => {
     };
   });
 };
-var JsonViewerStoreContext = (0, import_react49.createContext)(void 0);
+var JsonViewerStoreContext = (0, import_react48.createContext)(void 0);
 JsonViewerStoreContext.Provider;
 var useJsonViewerStore = (selector2, equalityFn) => {
-  const store = (0, import_react49.useContext)(JsonViewerStoreContext);
-  return useStore(store, selector2, equalityFn);
+  const store = (0, import_react48.useContext)(JsonViewerStoreContext);
+  return (0, import_zustand.useStore)(store, selector2, equalityFn);
 };
 var useTextColor = () => {
   return useJsonViewerStore((store) => store.colorspace.base07);
@@ -14412,10 +14149,10 @@ function getValueSize(value) {
 }
 function segmentArray(arr, size) {
   const result = [];
-  let index2 = 0;
-  while (index2 < arr.length) {
-    result.push(arr.slice(index2, index2 + size));
-    index2 += size;
+  let index = 0;
+  while (index < arr.length) {
+    result.push(arr.slice(index, index + size));
+    index += size;
   }
   return result;
 }
@@ -14468,9 +14205,9 @@ async function copyString(value) {
 }
 function useClipboard() {
   let { timeout = 2e3 } = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-  const [copied, setCopied] = (0, import_react49.useState)(false);
-  const copyTimeout = (0, import_react49.useRef)(null);
-  const handleCopyResult = (0, import_react49.useCallback)((value) => {
+  const [copied, setCopied] = (0, import_react48.useState)(false);
+  const copyTimeout = (0, import_react48.useRef)(null);
+  const handleCopyResult = (0, import_react48.useCallback)((value) => {
     const current = copyTimeout.current;
     if (current) {
       window.clearTimeout(current);
@@ -14481,7 +14218,7 @@ function useClipboard() {
     timeout
   ]);
   const onCopy = useJsonViewerStore((store) => store.onCopy);
-  const copy = (0, import_react49.useCallback)(async (path, value) => {
+  const copy = (0, import_react48.useCallback)(async (path, value) => {
     if (typeof onCopy === "function") {
       try {
         await onCopy(path, value, copyString);
@@ -14502,7 +14239,7 @@ function useClipboard() {
     handleCopyResult,
     onCopy
   ]);
-  const reset = (0, import_react49.useCallback)(() => {
+  const reset = (0, import_react48.useCallback)(() => {
     setCopied(false);
     if (copyTimeout.current) {
       clearTimeout(copyTimeout.current);
@@ -14516,7 +14253,7 @@ function useClipboard() {
 }
 function useIsCycleReference(path, value) {
   const rootValue = useJsonViewerStore((store) => store.value);
-  return (0, import_react49.useMemo)(() => isCycleReference(rootValue, path, value), [
+  return (0, import_react48.useMemo)(() => isCycleReference(rootValue, path, value), [
     path,
     value,
     rootValue
@@ -14529,7 +14266,7 @@ function useInspect(path, value, nestedIndex) {
   const setInspectCache = useJsonViewerStore((store) => store.setInspectCache);
   const defaultInspectDepth = useJsonViewerStore((store) => store.defaultInspectDepth);
   const defaultInspectControl = useJsonViewerStore((store) => store.defaultInspectControl);
-  (0, import_react49.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     const inspect2 = getInspectCache(path, nestedIndex);
     if (inspect2 !== void 0) {
       return;
@@ -14551,7 +14288,7 @@ function useInspect(path, value, nestedIndex) {
     value,
     setInspectCache
   ]);
-  const [inspect, set] = (0, import_react49.useState)(() => {
+  const [inspect, set] = (0, import_react48.useState)(() => {
     const shouldInspect = getInspectCache(path, nestedIndex);
     if (shouldInspect !== void 0) {
       return shouldInspect;
@@ -14561,7 +14298,7 @@ function useInspect(path, value, nestedIndex) {
     }
     return isTrap ? false : typeof defaultInspectControl === "function" ? defaultInspectControl(path, value) : depth < defaultInspectDepth;
   });
-  const setInspect = (0, import_react49.useCallback)((apply) => {
+  const setInspect = (0, import_react48.useCallback)((apply) => {
     set((oldState) => {
       const newState = typeof apply === "boolean" ? apply : apply(oldState);
       setInspectCache(path, newState, nestedIndex);
@@ -14601,7 +14338,7 @@ var DataTypeLabel = (param) => {
 };
 function defineEasyType(param) {
   let { is, serialize, deserialize, type, colorKey, displayTypeLabel = true, Renderer } = param;
-  const Render = /* @__PURE__ */ (0, import_react49.memo)(Renderer);
+  const Render = /* @__PURE__ */ (0, import_react48.memo)(Renderer);
   const EasyType = (props) => {
     const storeDisplayDataTypes = useJsonViewerStore((store) => store.displayDataTypes);
     const color2 = useJsonViewerStore((store) => store.colorspace[colorKey]);
@@ -14638,7 +14375,7 @@ function defineEasyType(param) {
   const EasyTypeEditor = (param2) => {
     let { value, setValue, abortEditing, commitEditing } = param2;
     const color2 = useJsonViewerStore((store) => store.colorspace[colorKey]);
-    const handleKeyDown = (0, import_react49.useCallback)((event) => {
+    const handleKeyDown = (0, import_react48.useCallback)((event) => {
       if (event.key === "Enter") {
         event.preventDefault();
         commitEditing(value);
@@ -14652,7 +14389,7 @@ function defineEasyType(param) {
       commitEditing,
       value
     ]);
-    const handleChange = (0, import_react49.useCallback)((event) => {
+    const handleChange = (0, import_react48.useCallback)((event) => {
       setValue(event.target.value);
     }, [
       setValue
@@ -14977,17 +14714,17 @@ function inspectMetadata(value) {
 var PreObjectType = (props) => {
   const metadataColor = useJsonViewerStore((store) => store.colorspace.base04);
   const textColor = useTextColor();
-  const isArrayLike = (0, import_react49.useMemo)(() => Array.isArray(props.value) || props.value instanceof Set, [
+  const isArrayLike = (0, import_react48.useMemo)(() => Array.isArray(props.value) || props.value instanceof Set, [
     props.value
   ]);
-  const isEmptyValue = (0, import_react49.useMemo)(() => getValueSize(props.value) === 0, [
+  const isEmptyValue = (0, import_react48.useMemo)(() => getValueSize(props.value) === 0, [
     props.value
   ]);
-  const sizeOfValue = (0, import_react49.useMemo)(() => inspectMetadata(props.value), [
+  const sizeOfValue = (0, import_react48.useMemo)(() => inspectMetadata(props.value), [
     props.value
   ]);
   const displaySize = useJsonViewerStore((store) => store.displaySize);
-  const shouldDisplaySize = (0, import_react49.useMemo)(() => typeof displaySize === "function" ? displaySize(props.path, props.value) : displaySize, [
+  const shouldDisplaySize = (0, import_react48.useMemo)(() => typeof displaySize === "function" ? displaySize(props.path, props.value) : displaySize, [
     displaySize,
     props.path,
     props.value
@@ -15035,17 +14772,17 @@ var PreObjectType = (props) => {
 var PostObjectType = (props) => {
   const metadataColor = useJsonViewerStore((store) => store.colorspace.base04);
   const textColor = useTextColor();
-  const isArrayLike = (0, import_react49.useMemo)(() => Array.isArray(props.value) || props.value instanceof Set, [
+  const isArrayLike = (0, import_react48.useMemo)(() => Array.isArray(props.value) || props.value instanceof Set, [
     props.value
   ]);
-  const isEmptyValue = (0, import_react49.useMemo)(() => getValueSize(props.value) === 0, [
+  const isEmptyValue = (0, import_react48.useMemo)(() => getValueSize(props.value) === 0, [
     props.value
   ]);
-  const sizeOfValue = (0, import_react49.useMemo)(() => inspectMetadata(props.value), [
+  const sizeOfValue = (0, import_react48.useMemo)(() => inspectMetadata(props.value), [
     props.value
   ]);
   const displaySize = useJsonViewerStore((store) => store.displaySize);
-  const shouldDisplaySize = (0, import_react49.useMemo)(() => typeof displaySize === "function" ? displaySize(props.path, props.value) : displaySize, [
+  const shouldDisplaySize = (0, import_react48.useMemo)(() => typeof displaySize === "function" ? displaySize(props.path, props.value) : displaySize, [
     displaySize,
     props.path,
     props.value
@@ -15082,9 +14819,9 @@ var ObjectType = (props) => {
   const borderColor = useJsonViewerStore((store) => store.colorspace.base02);
   const groupArraysAfterLength = useJsonViewerStore((store) => store.groupArraysAfterLength);
   const isTrap = useIsCycleReference(props.path, props.value);
-  const [displayLength, setDisplayLength] = (0, import_react49.useState)(useJsonViewerStore((store) => store.maxDisplayLength));
+  const [displayLength, setDisplayLength] = (0, import_react48.useState)(useJsonViewerStore((store) => store.maxDisplayLength));
   const objectSortKeys = useJsonViewerStore((store) => store.objectSortKeys);
-  const elements = (0, import_react49.useMemo)(() => {
+  const elements = (0, import_react48.useMemo)(() => {
     if (!props.inspect) {
       return null;
     }
@@ -15094,7 +14831,7 @@ var ObjectType = (props) => {
       const elements3 = [];
       if (value instanceof Map) {
         const lastIndex2 = value.size - 1;
-        let index2 = 0;
+        let index = 0;
         value.forEach((value2, k2) => {
           const key = k2.toString();
           const path = [
@@ -15106,9 +14843,9 @@ var ObjectType = (props) => {
             value: value2,
             prevValue: props.prevValue instanceof Map ? props.prevValue.get(k2) : void 0,
             editable: false,
-            last: index2 === lastIndex2
+            last: index === lastIndex2
           }, key));
-          index2++;
+          index++;
         });
       } else {
         const iterator2 = value[Symbol.iterator]();
@@ -15140,17 +14877,17 @@ var ObjectType = (props) => {
       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 index = props.nestedIndex ? props.nestedIndex * groupArraysAfterLength + _index : _index;
           const path = [
             ...props.path,
-            index2
+            index
           ];
           return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(DataKeyPair, {
             path,
             value: value2,
-            prevValue: Array.isArray(props.prevValue) ? props.prevValue[index2] : void 0,
+            prevValue: Array.isArray(props.prevValue) ? props.prevValue[index] : void 0,
             last: _index === lastIndex2
-          }, index2);
+          }, index);
         });
         if (value.length > displayLength) {
           const rest = value.length - displayLength;
@@ -15176,14 +14913,14 @@ var ObjectType = (props) => {
       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 elements3.map((list, index) => {
         return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(DataKeyPair, {
           path: props.path,
           value: list,
-          nestedIndex: index2,
-          prevValue: prevElements === null || prevElements === void 0 ? void 0 : prevElements[index2],
-          last: index2 === elementsLastIndex
-        }, index2);
+          nestedIndex: index,
+          prevValue: prevElements === null || prevElements === void 0 ? void 0 : prevElements[index],
+          last: index === elementsLastIndex
+        }, index);
       });
     }
     let entries = Object.entries(value);
@@ -15197,7 +14934,7 @@ var ObjectType = (props) => {
       });
     }
     const lastIndex = entries.length - 1;
-    const elements2 = entries.slice(0, displayLength).map((param, index2) => {
+    const elements2 = entries.slice(0, displayLength).map((param, index) => {
       let [key, value2] = param;
       var _props_prevValue;
       const path = [
@@ -15208,7 +14945,7 @@ var ObjectType = (props) => {
         path,
         value: value2,
         prevValue: (_props_prevValue = props.prevValue) === null || _props_prevValue === void 0 ? void 0 : _props_prevValue[key],
-        last: index2 === lastIndex
+        last: index === lastIndex
       }, key);
     });
     if (entries.length > displayLength) {
@@ -15245,7 +14982,7 @@ var ObjectType = (props) => {
   const marginLeft = props.inspect ? 0.6 : 0;
   const width = useJsonViewerStore((store) => store.indentWidth);
   const indentWidth = props.inspect ? width - marginLeft : width;
-  const isEmptyValue = (0, import_react49.useMemo)(() => getValueSize(props.value) === 0, [
+  const isEmptyValue = (0, import_react48.useMemo)(() => getValueSize(props.value) === 0, [
     props.value
   ]);
   if (isEmptyValue) {
@@ -15288,7 +15025,7 @@ var stringType = defineEasyType({
   serialize: (value) => value,
   deserialize: (value) => value,
   Renderer: (props) => {
-    const [showRest, setShowRest] = (0, import_react49.useState)(false);
+    const [showRest, setShowRest] = (0, import_react48.useState)(false);
     const collapseStringsAfterLength = useJsonViewerStore((store) => store.collapseStringsAfterLength);
     const value = showRest ? props.value : props.value.slice(0, collapseStringsAfterLength);
     const hasRest = props.value.length > collapseStringsAfterLength;
@@ -15345,17 +15082,17 @@ function memorizeDataType(dataType) {
     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__ */ (0, import_react49.memo)(dataType.Component, compare);
+  dataType.Component = /* @__PURE__ */ (0, import_react48.memo)(dataType.Component, compare);
   if (dataType.Editor) {
-    dataType.Editor = /* @__PURE__ */ (0, import_react49.memo)(dataType.Editor, function compare2(prevProps, nextProps) {
+    dataType.Editor = /* @__PURE__ */ (0, import_react48.memo)(dataType.Editor, function compare2(prevProps, nextProps) {
       return Object.is(prevProps.value, nextProps.value);
     });
   }
   if (dataType.PreComponent) {
-    dataType.PreComponent = /* @__PURE__ */ (0, import_react49.memo)(dataType.PreComponent, compare);
+    dataType.PreComponent = /* @__PURE__ */ (0, import_react48.memo)(dataType.PreComponent, compare);
   }
   if (dataType.PostComponent) {
-    dataType.PostComponent = /* @__PURE__ */ (0, import_react49.memo)(dataType.PostComponent, compare);
+    dataType.PostComponent = /* @__PURE__ */ (0, import_react48.memo)(dataType.PostComponent, compare);
   }
   return dataType;
 }
@@ -15372,7 +15109,7 @@ var predefinedTypes = [
   memorizeDataType(bigIntType)
 ];
 var createTypeRegistryStore = () => {
-  return createStore()((set) => ({
+  return (0, import_zustand.createStore)()((set) => ({
     registry: predefinedTypes,
     registerTypes: (setState) => {
       set((state) => ({
@@ -15381,11 +15118,11 @@ var createTypeRegistryStore = () => {
     }
   }));
 };
-var TypeRegistryStoreContext = /* @__PURE__ */ (0, import_react49.createContext)(void 0);
+var TypeRegistryStoreContext = /* @__PURE__ */ (0, import_react48.createContext)(void 0);
 TypeRegistryStoreContext.Provider;
 var useTypeRegistryStore = (selector2, equalityFn) => {
-  const store = (0, import_react49.useContext)(TypeRegistryStoreContext);
-  return useStore(store, selector2, equalityFn);
+  const store = (0, import_react48.useContext)(TypeRegistryStoreContext);
+  return (0, import_zustand.useStore)(store, selector2, equalityFn);
 };
 function matchTypeComponents(value, path, registry) {
   let potential;
@@ -15404,7 +15141,7 @@ function matchTypeComponents(value, path, registry) {
 }
 function useTypeComponents(value, path) {
   const registry = useTypeRegistryStore((store) => store.registry);
-  return (0, import_react49.useMemo)(() => matchTypeComponents(value, path, registry), [
+  return (0, import_react48.useMemo)(() => matchTypeComponents(value, path, registry), [
     value,
     path,
     registry
@@ -15425,7 +15162,7 @@ var DataKeyPair = (props) => {
   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 = (0, import_react49.useMemo)(() => {
+  const editable = (0, import_react48.useMemo)(() => {
     if (storeEditable === false) {
       return false;
     }
@@ -15442,12 +15179,12 @@ var DataKeyPair = (props) => {
     storeEditable,
     value
   ]);
-  const [tempValue, setTempValue] = (0, import_react49.useState)("");
+  const [tempValue, setTempValue] = (0, import_react48.useState)("");
   const depth = path.length;
   const key = path[depth - 1];
   const hoverPath = useJsonViewerStore((store) => store.hoverPath);
-  const isHover = (0, import_react49.useMemo)(() => {
-    return hoverPath && path.every((value2, index2) => value2 === hoverPath.path[index2] && nestedIndex === hoverPath.nestedIndex);
+  const isHover = (0, import_react48.useMemo)(() => {
+    return hoverPath && path.every((value2, index) => value2 === hoverPath.path[index] && nestedIndex === hoverPath.nestedIndex);
   }, [
     hoverPath,
     path,
@@ -15456,7 +15193,7 @@ var DataKeyPair = (props) => {
   const setHover = useJsonViewerStore((store) => store.setHover);
   const root = useJsonViewerStore((store) => store.value);
   const [inspect, setInspect] = useInspect(path, value, nestedIndex);
-  const [editing, setEditing] = (0, import_react49.useState)(false);
+  const [editing, setEditing] = (0, import_react48.useState)(false);
   const onChange = useJsonViewerStore((store) => store.onChange);
   const keyColor = useTextColor();
   const numberKeyColor = useJsonViewerStore((store) => store.colorspace.base0C);
@@ -15468,7 +15205,7 @@ var DataKeyPair = (props) => {
   const isNumberKey = Number.isInteger(Number(key));
   const storeEnableAdd = useJsonViewerStore((store) => store.enableAdd);
   const onAdd = useJsonViewerStore((store) => store.onAdd);
-  const enableAdd = (0, import_react49.useMemo)(() => {
+  const enableAdd = (0, import_react48.useMemo)(() => {
     if (!onAdd || nestedIndex !== void 0) return false;
     if (storeEnableAdd === false) {
       return false;
@@ -15493,7 +15230,7 @@ var DataKeyPair = (props) => {
   ]);
   const storeEnableDelete = useJsonViewerStore((store) => store.enableDelete);
   const onDelete = useJsonViewerStore((store) => store.onDelete);
-  const enableDelete = (0, import_react49.useMemo)(() => {
+  const enableDelete = (0, import_react48.useMemo)(() => {
     if (!onDelete || nestedIndex !== void 0) return false;
     if (isRoot) {
       return false;
@@ -15520,7 +15257,7 @@ var DataKeyPair = (props) => {
   const enableClipboard = useJsonViewerStore((store) => store.enableClipboard);
   const { copy, copied } = useClipboard();
   const highlightUpdates = useJsonViewerStore((store) => store.highlightUpdates);
-  const isHighlight = (0, import_react49.useMemo)(() => {
+  const isHighlight = (0, import_react48.useMemo)(() => {
     if (!highlightUpdates || prevValue === void 0) return false;
     if (typeof value !== typeof prevValue) {
       return true;
@@ -15544,8 +15281,8 @@ var DataKeyPair = (props) => {
     prevValue,
     value
   ]);
-  const highlightContainer = (0, import_react49.useRef)();
-  (0, import_react49.useEffect)(() => {
+  const highlightContainer = (0, import_react48.useRef)();
+  (0, import_react48.useEffect)(() => {
     if (highlightContainer.current && isHighlight && "animate" in highlightContainer.current) {
       highlightContainer.current.animate([
         {
@@ -15565,7 +15302,7 @@ var DataKeyPair = (props) => {
     prevValue,
     value
   ]);
-  const startEditing = (0, import_react49.useCallback)((event) => {
+  const startEditing = (0, import_react48.useCallback)((event) => {
     event.preventDefault();
     if (serialize) setTempValue(serialize(value));
     setEditing(true);
@@ -15573,14 +15310,14 @@ var DataKeyPair = (props) => {
     serialize,
     value
   ]);
-  const abortEditing = (0, import_react49.useCallback)(() => {
+  const abortEditing = (0, import_react48.useCallback)(() => {
     setEditing(false);
     setTempValue("");
   }, [
     setEditing,
     setTempValue
   ]);
-  const commitEditing = (0, import_react49.useCallback)((newValue) => {
+  const commitEditing = (0, import_react48.useCallback)((newValue) => {
     setEditing(false);
     if (!deserialize) return;
     try {
@@ -15594,7 +15331,7 @@ var DataKeyPair = (props) => {
     path,
     value
   ]);
-  const actionIcons = (0, import_react49.useMemo)(() => {
+  const actionIcons = (0, import_react48.useMemo)(() => {
     if (editing) {
       return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(import_jsx_runtime129.Fragment, {
         children: [
@@ -15690,12 +15427,12 @@ var DataKeyPair = (props) => {
     abortEditing,
     commitEditing
   ]);
-  const isEmptyValue = (0, import_react49.useMemo)(() => getValueSize(value) === 0, [
+  const isEmptyValue = (0, import_react48.useMemo)(() => getValueSize(value) === 0, [
     value
   ]);
   const expandable = !isEmptyValue && !!(PreComponent && PostComponent);
   const KeyRenderer = useJsonViewerStore((store) => store.keyRenderer);
-  const downstreamProps = (0, import_react49.useMemo)(() => ({
+  const downstreamProps = (0, import_react48.useMemo)(() => ({
     path,
     inspect,
     setInspect,
@@ -15716,7 +15453,7 @@ var DataKeyPair = (props) => {
     sx: {
       userSelect: "text"
     },
-    onMouseEnter: (0, import_react49.useCallback)(() => setHover(path, nestedIndex), [
+    onMouseEnter: (0, import_react48.useCallback)(() => setHover(path, nestedIndex), [
       setHover,
       path,
       nestedIndex
@@ -15731,7 +15468,7 @@ var DataKeyPair = (props) => {
           letterSpacing: 0.5,
           opacity: 0.8
         },
-        onClick: (0, import_react49.useCallback)((event) => {
+        onClick: (0, import_react48.useCallback)((event) => {
           if (event.isDefaultPrevented()) {
             return;
           }
@@ -15841,8 +15578,8 @@ var DataKeyPair = (props) => {
 };
 var query = "(prefers-color-scheme: dark)";
 function useThemeDetector() {
-  const [isDark, setIsDark] = (0, import_react49.useState)(false);
-  (0, import_react49.useEffect)(() => {
+  const [isDark, setIsDark] = (0, import_react48.useState)(false);
+  (0, import_react48.useEffect)(() => {
     const listener = (e2) => setIsDark(e2.matches);
     setIsDark(window.matchMedia(query).matches);
     const queryMedia = window.matchMedia(query);
@@ -15852,8 +15589,8 @@ function useThemeDetector() {
   return isDark;
 }
 function useSetIfNotUndefinedEffect(key, value) {
-  const { setState } = (0, import_react49.useContext)(JsonViewerStoreContext);
-  (0, import_react49.useEffect)(() => {
+  const { setState } = (0, import_react48.useContext)(JsonViewerStoreContext);
+  (0, import_react48.useEffect)(() => {
     if (value !== void 0) {
       setState({
         [key]: value
@@ -15866,8 +15603,8 @@ function useSetIfNotUndefinedEffect(key, value) {
   ]);
 }
 var JsonViewerInner = (props) => {
-  const { setState } = (0, import_react49.useContext)(JsonViewerStoreContext);
-  (0, import_react49.useEffect)(() => {
+  const { setState } = (0, import_react48.useContext)(JsonViewerStoreContext);
+  (0, import_react48.useEffect)(() => {
     setState((state) => ({
       prevValue: state.value,
       value: props.value
@@ -15895,7 +15632,7 @@ var JsonViewerInner = (props) => {
   useSetIfNotUndefinedEffect("displaySize", props.displaySize);
   useSetIfNotUndefinedEffect("displayComma", props.displayComma);
   useSetIfNotUndefinedEffect("highlightUpdates", props.highlightUpdates);
-  (0, import_react49.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     if (props.theme === "light") {
       setState({
         colorspace: lightColorspace
@@ -15913,13 +15650,13 @@ var JsonViewerInner = (props) => {
     setState,
     props.theme
   ]);
-  const themeCls = (0, import_react49.useMemo)(() => {
+  const themeCls = (0, import_react48.useMemo)(() => {
     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 = (0, import_react49.useRef)(true);
+  const onceRef = (0, import_react48.useRef)(true);
   const registerTypes = useTypeRegistryStore((store) => store.registerTypes);
   if (onceRef.current) {
     const allTypes = props.valueTypes ? [
@@ -15931,7 +15668,7 @@ var JsonViewerInner = (props) => {
     registerTypes(allTypes);
     onceRef.current = false;
   }
-  (0, import_react49.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     const allTypes = props.valueTypes ? [
       ...predefinedTypes,
       ...props.valueTypes
@@ -15945,9 +15682,9 @@ var JsonViewerInner = (props) => {
   ]);
   const value = useJsonViewerStore((store) => store.value);
   const prevValue = useJsonViewerStore((store) => store.prevValue);
-  const emptyPath = (0, import_react49.useMemo)(() => [], []);
+  const emptyPath = (0, import_react48.useMemo)(() => [], []);
   const setHover = useJsonViewerStore((store) => store.setHover);
-  const onMouseLeave = (0, import_react49.useCallback)(() => setHover(null), [
+  const onMouseLeave = (0, import_react48.useCallback)(() => setHover(null), [
     setHover
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material7.Paper, {
@@ -15976,14 +15713,14 @@ var JsonViewer = function JsonViewer2(props) {
     }
   }
   const isAutoDarkTheme = useThemeDetector();
-  const themeType = (0, import_react49.useMemo)(() => {
+  const themeType = (0, import_react48.useMemo)(() => {
     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 = (0, import_react49.useMemo)(() => {
+  const theme = (0, import_react48.useMemo)(() => {
     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 (0, import_material7.createTheme)({
@@ -16011,8 +15748,8 @@ var JsonViewer = function JsonViewer2(props) {
     ...props,
     theme: themeType
   };
-  const jsonViewerStore = (0, import_react49.useMemo)(() => createJsonViewerStore(props), []);
-  const typeRegistryStore = (0, import_react49.useMemo)(() => createTypeRegistryStore(), []);
+  const jsonViewerStore = (0, import_react48.useMemo)(() => createJsonViewerStore(props), []);
+  const typeRegistryStore = (0, import_react48.useMemo)(() => createTypeRegistryStore(), []);
   return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material7.ThemeProvider, {
     theme,
     children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(TypeRegistryStoreContext.Provider, {
@@ -16028,7 +15765,7 @@ var JsonViewer = function JsonViewer2(props) {
 };
 
 // src/components/event-details/event-details.tsx
-var import_react54 = require("react");
+var import_react53 = require("react");
 
 // src/utils/iam-utils.ts
 function determinePermissionStatus(payload) {
@@ -16227,7 +15964,7 @@ var getEventGroupsByType = (events) => {
 // src/components/event-details/event-detail.tsx
 var import_icons_material6 = require("@mui/icons-material");
 var import_material11 = require("@mui/material");
-var import_react51 = require("react");
+var import_react50 = require("react");
 
 // src/components/status-icon.tsx
 var import_icons_material3 = require("@mui/icons-material");
@@ -16378,7 +16115,7 @@ var IAMEventDetail = ({ event }) => {
 // src/components/event-details/iam-permission-detail.tsx
 var import_icons_material5 = require("@mui/icons-material");
 var import_material10 = require("@mui/material");
-var import_react50 = require("react");
+var import_react49 = require("react");
 var import_jsx_runtime132 = require("react/jsx-runtime");
 var getChipColors = (status) => {
   const isAllowed = status === "explicitly_allowed" || status === "implicitly_allowed";
@@ -16388,8 +16125,8 @@ var getChipColors = (status) => {
   };
 };
 var IAMPermissionItem = ({ event }) => {
-  const [isOpen, setIsOpen] = (0, import_react50.useState)(false);
-  const parsedData = (0, import_react50.useMemo)(() => {
+  const [isOpen, setIsOpen] = (0, import_react49.useState)(false);
+  const parsedData = (0, import_react49.useMemo)(() => {
     const payloadString = event.attributes?.payload;
     if (!payloadString) {
       return;
@@ -16459,15 +16196,15 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime1
   ) : content })
 ] });
 var EventMessage = ({ event }) => {
-  const [isOpen, setIsOpen] = (0, import_react51.useState)(false);
-  const [isOverflowing, setIsOverflowing] = (0, import_react51.useState)(false);
-  const textReference = (0, import_react51.useRef)(null);
-  const parsedMessage = (0, import_react51.useMemo)(() => parseEventMessage(event), [event]);
-  const isIAMPolicyEvent = (0, import_react51.useMemo)(
+  const [isOpen, setIsOpen] = (0, import_react50.useState)(false);
+  const [isOverflowing, setIsOverflowing] = (0, import_react50.useState)(false);
+  const textReference = (0, import_react50.useRef)(null);
+  const parsedMessage = (0, import_react50.useMemo)(() => parseEventMessage(event), [event]);
+  const isIAMPolicyEvent = (0, import_react50.useMemo)(
     () => event.event_type === "iam.policy_evaluation" && event.attributes?.payload && typeof event.attributes.payload === "string",
     [event]
   );
-  (0, import_react51.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     const checkOverflow = () => {
       const element = textReference.current;
       if (element) {
@@ -16480,11 +16217,11 @@ var EventMessage = ({ event }) => {
       window.removeEventListener("resize", checkOverflow);
     };
   }, [parsedMessage.headline]);
-  const hasAdditionalContent = (0, import_react51.useMemo)(
+  const hasAdditionalContent = (0, import_react50.useMemo)(
     () => parsedMessage.message || parsedMessage.details || isIAMPolicyEvent,
     [parsedMessage.message, parsedMessage.details, isIAMPolicyEvent]
   );
-  const shouldShowToggle = (0, import_react51.useMemo)(
+  const shouldShowToggle = (0, import_react50.useMemo)(
     () => isOverflowing || hasAdditionalContent,
     [isOverflowing, hasAdditionalContent]
   );
@@ -16946,10 +16683,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: identity2, signer } = scheme;
+  const { httpAuthOption: { signingProperties = {} }, identity, signer } = scheme;
   const output = await next({
     ...args,
-    request: await signer.sign(args.request, identity2, signingProperties)
+    request: await signer.sign(args.request, identity, signingProperties)
   }).catch((signer.errorHandler || defaultErrorHandler)(signingProperties));
   (signer.successHandler || defaultSuccessHandler)(output.response, signingProperties);
   return output;
@@ -18556,12 +18293,12 @@ var DefaultIdentityProviderConfig = class {
 };
 
 // node_modules/@smithy/core/dist-es/util-identity-and-auth/memoizeIdentityProvider.js
-var createIsIdentityExpiredFunction = (expirationMs) => function isIdentityExpired2(identity2) {
-  return doesIdentityRequireRefresh(identity2) && identity2.expiration.getTime() - Date.now() < expirationMs;
+var createIsIdentityExpiredFunction = (expirationMs) => function isIdentityExpired2(identity) {
+  return doesIdentityRequireRefresh(identity) && identity.expiration.getTime() - Date.now() < expirationMs;
 };
 var EXPIRATION_MS = 3e5;
 var isIdentityExpired = createIsIdentityExpiredFunction(EXPIRATION_MS);
-var doesIdentityRequireRefresh = (identity2) => identity2.expiration !== void 0;
+var doesIdentityRequireRefresh = (identity) => identity.expiration !== void 0;
 var memoizeIdentityProvider = (provider, isExpired, requiresRefresh) => {
   if (provider === void 0) {
     return void 0;
@@ -18767,13 +18504,13 @@ var getAttrPathList = (path) => {
 };
 
 // node_modules/@smithy/util-endpoints/dist-es/lib/getAttr.js
-var getAttr = (value, path) => getAttrPathList(path).reduce((acc, index2) => {
+var getAttr = (value, path) => getAttrPathList(path).reduce((acc, index) => {
   if (typeof acc !== "object") {
-    throw new EndpointError(`Index '${index2}' in '${path}' not found in '${JSON.stringify(value)}'`);
+    throw new EndpointError(`Index '${index}' in '${path}' not found in '${JSON.stringify(value)}'`);
   } else if (Array.isArray(acc)) {
-    return acc[parseInt(index2)];
+    return acc[parseInt(index)];
   }
-  return acc[index2];
+  return acc[index];
 }, value);
 
 // node_modules/@smithy/util-endpoints/dist-es/lib/isSet.js
@@ -19533,7 +19270,7 @@ var validateSigningProperties = async (signingProperties) => {
   };
 };
 var AwsSdkSigV4Signer = class {
-  async sign(httpRequest, identity2, signingProperties) {
+  async sign(httpRequest, identity, signingProperties) {
     if (!HttpRequest.isInstance(httpRequest)) {
       throw new Error("The request is not an instance of `HttpRequest` and cannot be signed");
     }
@@ -19580,7 +19317,7 @@ var AwsSdkSigV4Signer = class {
 };
 
 // node_modules/@smithy/property-provider/dist-es/memoize.js
-var memoize2 = (provider, isExpired, requiresRefresh) => {
+var memoize = (provider, isExpired, requiresRefresh) => {
   let resolved;
   let pending;
   let hasResult;
@@ -21935,9 +21672,9 @@ async function checkFeatures(context, config, args) {
         break;
     }
   }
-  const identity2 = context.__smithy_context?.selectedHttpAuthScheme?.identity;
-  if (identity2?.$source) {
-    const credentials = identity2;
+  const identity = context.__smithy_context?.selectedHttpAuthScheme?.identity;
+  if (identity?.$source) {
+    const credentials = identity;
     if (credentials.accountId) {
       setFeature2(context, "RESOLVED_ACCOUNT_ID", "T");
     }
@@ -22020,8 +21757,8 @@ var escapeUserAgent = (userAgentPair) => {
   if (prefix === "api") {
     uaName = uaName.toLowerCase();
   }
-  return [prefix, uaName, version].filter((item) => item && item.length > 0).reduce((acc, item, index2) => {
-    switch (index2) {
+  return [prefix, uaName, version].filter((item) => item && item.length > 0).reduce((acc, item, index) => {
+    switch (index) {
       case 0:
         return item;
       case 1:
@@ -24088,7 +23825,7 @@ var invalidProvider = (message) => () => Promise.reject(message);
 var DEFAULTS_MODE_OPTIONS = ["in-region", "cross-region", "mobile", "standard", "legacy"];
 
 // node_modules/@smithy/util-defaults-mode-browser/dist-es/resolveDefaultsModeConfig.js
-var resolveDefaultsModeConfig = ({ defaultsMode } = {}) => memoize2(async () => {
+var resolveDefaultsModeConfig = ({ defaultsMode } = {}) => memoize(async () => {
   const mode = typeof defaultsMode === "function" ? await defaultsMode() : defaultsMode;
   switch (mode?.toLowerCase()) {
     case "auto":
@@ -26210,11 +25947,11 @@ var getHttpAuthExtensionConfiguration = (runtimeConfig) => {
   let _credentials = runtimeConfig.credentials;
   return {
     setHttpAuthScheme(httpAuthScheme) {
-      const index2 = _httpAuthSchemes.findIndex((scheme) => scheme.schemeId === httpAuthScheme.schemeId);
-      if (index2 === -1) {
+      const index = _httpAuthSchemes.findIndex((scheme) => scheme.schemeId === httpAuthScheme.schemeId);
+      if (index === -1) {
         _httpAuthSchemes.push(httpAuthScheme);
       } else {
-        _httpAuthSchemes.splice(index2, 1, httpAuthScheme);
+        _httpAuthSchemes.splice(index, 1, httpAuthScheme);
       }
     },
     httpAuthSchemes() {
@@ -26311,7 +26048,7 @@ var QueryStatus = {
 
 // src/components/event-details/lambda-invoke-logs-section.tsx
 var import_material12 = require("@mui/material");
-var import_react52 = require("react");
+var import_react51 = require("react");
 var import_jsx_runtime134 = require("react/jsx-runtime");
 var POLL_INTERVAL_MS = 1e3;
 async function pollQueryResults(client, queryId) {
@@ -26329,7 +26066,7 @@ async function startLambdaLogsQuery(client, functionName2, requestId, startTimeS
 }
 function useCloudWatchLogsClient(region) {
   const { localstackEndpoint } = useAppInspector();
-  const client = (0, import_react52.useMemo)(() => new CloudWatchLogsClient({
+  const client = (0, import_react51.useMemo)(() => new CloudWatchLogsClient({
     credentials: {
       accessKeyId: "test",
       secretAccessKey: "test"
@@ -26340,12 +26077,12 @@ function useCloudWatchLogsClient(region) {
   return client;
 }
 function useLambdaInvokeLogs(functionName2, requestId, region, startTimeNano, endTimeNano) {
-  const [loading, setLoading] = (0, import_react52.useState)(true);
-  const [logs, setLogs] = (0, import_react52.useState)([]);
-  const [error, setError] = (0, import_react52.useState)();
-  const pollTimerRef = (0, import_react52.useRef)(null);
+  const [loading, setLoading] = (0, import_react51.useState)(true);
+  const [logs, setLogs] = (0, import_react51.useState)([]);
+  const [error, setError] = (0, import_react51.useState)();
+  const pollTimerRef = (0, import_react51.useRef)(null);
   const cloudWatchLogs = useCloudWatchLogsClient(region);
-  (0, import_react52.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     let cancelled = false;
     const startTimeSec = Math.floor(Number(BigInt(startTimeNano) / BigInt(1e9)));
     const endTimeSec = Math.ceil(Number(BigInt(endTimeNano) / BigInt(1e9)));
@@ -26419,10 +26156,10 @@ var LambdaInvokeLogsSection = ({ endTimeNano, functionName: functionName2, regio
 // src/components/event-details/toggle-section.tsx
 var import_icons_material7 = require("@mui/icons-material");
 var import_material13 = require("@mui/material");
-var import_react53 = require("react");
+var import_react52 = require("react");
 var import_jsx_runtime135 = require("react/jsx-runtime");
 var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
-  const [isOpen, setIsOpen] = (0, import_react53.useState)(initialOpen);
+  const [isOpen, setIsOpen] = (0, import_react52.useState)(initialOpen);
   return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material13.Box, { sx: { mt: 4 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
       import_material13.Box,
@@ -26489,11 +26226,11 @@ var checkIsSqsSendMessage = (span) => {
   return span.operation_name.startsWith("SendMessage");
 };
 var EventDetails = ({ onClose, selectedEvent }) => {
-  const eventGroups = (0, import_react54.useMemo)(
+  const eventGroups = (0, import_react53.useMemo)(
     () => getEventGroupsByType(selectedEvent?.events ?? []),
     [selectedEvent?.events]
   );
-  const [parseNestedJson, setParseNestedJson] = (0, import_react54.useState)(true);
+  const [parseNestedJson, setParseNestedJson] = (0, import_react53.useState)(true);
   if (!selectedEvent) {
     return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material14.Box, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material14.Typography, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
   }
@@ -26662,7 +26399,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
     ] }) })
   ] });
 };
-var PayloadViewer = (0, import_react54.memo)(({ value }) => {
+var PayloadViewer = (0, import_react53.memo)(({ value }) => {
   const theme = (0, import_material14.useTheme)();
   return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material14.Box, { sx: { backgroundColor: "background.default", borderRadius: 1, fontSize: 12, overflow: "auto", p: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
     JsonViewer,
@@ -26680,22 +26417,22 @@ var PayloadViewer = (0, import_react54.memo)(({ value }) => {
 // src/components/trace-graph/trace-graph.tsx
 var import_base = require("@xyflow/react/dist/base.css");
 var import_material18 = require("@mui/material");
-var import_react60 = require("@xyflow/react");
-var import_react61 = require("react");
+var import_react59 = require("@xyflow/react");
+var import_react60 = require("react");
 
 // src/components/trace-graph/service-node.tsx
 var import_material16 = require("@mui/material");
 var import_style = require("@xyflow/react/dist/style.css");
-var import_react56 = require("@xyflow/react");
-var import_react57 = require("react");
+var import_react55 = require("@xyflow/react");
+var import_react56 = require("react");
 
 // src/components/trace-graph/problem-indicator.tsx
 var import_icons_material9 = require("@mui/icons-material");
 var import_material15 = require("@mui/material");
-var import_react55 = require("react");
+var import_react54 = require("react");
 var import_jsx_runtime137 = require("react/jsx-runtime");
 var ProblemIndicator = ({ error }) => {
-  const icon = (0, import_react55.useMemo)(() => {
+  const icon = (0, import_react54.useMemo)(() => {
     switch (error.level) {
       case "error": {
         return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_icons_material9.Error, { sx: { color: "#d32f2f", fontSize: "14px" } });
@@ -26708,7 +26445,7 @@ var ProblemIndicator = ({ error }) => {
       }
     }
   }, [error.level]);
-  const color2 = (0, import_react55.useMemo)(() => {
+  const color2 = (0, import_react54.useMemo)(() => {
     switch (error.level) {
       case "error": {
         return "#d32f2f";
@@ -26747,7 +26484,7 @@ var handleStyle = {
   borderColor: "lightgray",
   opacity: 0
 };
-var ServiceNode = (0, import_react57.memo)(({ data, selected }) => {
+var ServiceNode = (0, import_react56.memo)(({ data, selected }) => {
   const hasErrors = (data.event.errors && data.event.errors.length > 0) ?? false;
   return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Box, { sx: { maxWidth: 200 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
@@ -26771,8 +26508,8 @@ var ServiceNode = (0, import_react57.memo)(({ data, selected }) => {
         },
         tabIndex: 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_react56.Handle, { position: import_react56.Position.Left, style: handleStyle, type: "target" }),
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_react56.Handle, { position: import_react56.Position.Right, style: handleStyle, type: "source" }),
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_react55.Handle, { position: import_react55.Position.Left, style: handleStyle, type: "target" }),
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_react55.Handle, { position: import_react55.Position.Right, style: handleStyle, type: "source" }),
           /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
             ServiceCell,
             {
@@ -26862,57 +26599,18 @@ var getLayoutedNodesAndEdges = (inputNodes, inputEdges) => {
 // src/components/trace-graph/xyflow/controls.tsx
 var import_icons_material10 = require("@mui/icons-material");
 var import_material17 = require("@mui/material");
-var import_react58 = require("@xyflow/react");
-var import_react59 = require("react");
-
-// node_modules/zustand/esm/shallow.mjs
-function shallow$1(objA, objB) {
-  if (Object.is(objA, objB)) {
-    return true;
-  }
-  if (typeof objA !== "object" || objA === null || typeof objB !== "object" || objB === null) {
-    return false;
-  }
-  if (objA instanceof Map && objB instanceof Map) {
-    if (objA.size !== objB.size) return false;
-    for (const [key, value] of objA) {
-      if (!Object.is(value, objB.get(key))) {
-        return false;
-      }
-    }
-    return true;
-  }
-  if (objA instanceof Set && objB instanceof Set) {
-    if (objA.size !== objB.size) return false;
-    for (const value of objA) {
-      if (!objB.has(value)) {
-        return false;
-      }
-    }
-    return true;
-  }
-  const keysA = Object.keys(objA);
-  if (keysA.length !== Object.keys(objB).length) {
-    return false;
-  }
-  for (const keyA of keysA) {
-    if (!Object.prototype.hasOwnProperty.call(objB, keyA) || !Object.is(objA[keyA], objB[keyA])) {
-      return false;
-    }
-  }
-  return true;
-}
-
-// src/components/trace-graph/xyflow/controls.tsx
+var import_react57 = require("@xyflow/react");
+var import_react58 = require("react");
+var import_shallow = require("zustand/shallow");
 var import_jsx_runtime139 = require("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 = (0, import_react59.memo)(() => {
-  const { maxZoomReached, minZoomReached } = (0, import_react58.useStore)(selector, shallow$1);
-  const { fitView, zoomIn, zoomOut } = (0, import_react58.useReactFlow)();
+var Controls = (0, import_react58.memo)(() => {
+  const { maxZoomReached, minZoomReached } = (0, import_react57.useStore)(selector, import_shallow.shallow);
+  const { fitView, zoomIn, zoomOut } = (0, import_react57.useReactFlow)();
   const onZoomInHandler = () => {
     void zoomIn();
   };
@@ -26981,9 +26679,9 @@ var TraceGraph = ({
   onRefresh,
   spans
 }) => {
-  const [nodes, setNodes, onNodesChange] = (0, import_react60.useNodesState)([]);
-  const [edges, setEdges] = (0, import_react60.useEdgesState)([]);
-  (0, import_react61.useEffect)(() => {
+  const [nodes, setNodes, onNodesChange] = (0, import_react59.useNodesState)([]);
+  const [edges, setEdges] = (0, import_react59.useEdgesState)([]);
+  (0, import_react60.useEffect)(() => {
     const allNodes = [];
     const allEdges = [];
     for (const span of spans.data ?? []) {
@@ -26998,15 +26696,15 @@ var TraceGraph = ({
         },
         id: span.span_id,
         position: { x: 0, y: 0 },
-        sourcePosition: import_react60.Position.Right,
-        targetPosition: import_react60.Position.Left,
+        sourcePosition: import_react59.Position.Right,
+        targetPosition: import_react59.Position.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: import_react60.MarkerType.Arrow, width: 16 },
+          markerEnd: { color: "lightgray", height: 16, type: import_react59.MarkerType.Arrow, width: 16 },
           source: span.parent_span_id,
           style: { stroke: "lightgray", strokeWidth: 1 },
           target: span.span_id
@@ -27015,7 +26713,7 @@ var TraceGraph = ({
       for (const linkedSpanId of span.linked_span_ids ?? []) {
         allEdges.push({
           id: `e-link-${linkedSpanId}-${span.span_id}`,
-          markerEnd: { color: "lightgray", height: 16, type: import_react60.MarkerType.Arrow, width: 16 },
+          markerEnd: { color: "lightgray", height: 16, type: import_react59.MarkerType.Arrow, width: 16 },
           source: linkedSpanId,
           style: { stroke: "lightgray", strokeWidth: 1 },
           // animated: true,
@@ -27050,7 +26748,7 @@ var TraceGraph = ({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
-      import_react60.ReactFlow,
+      import_react59.ReactFlow,
       {
         "data-testid": "trace-graph",
         edges,
@@ -27069,7 +26767,7 @@ var TraceGraph = ({
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Controls, {}),
           /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
-            import_react60.Background,
+            import_react59.Background,
             {
               bgColor: theme.palette.background.paper,
               color: theme.palette.text.disabled
@@ -27174,7 +26872,7 @@ var TraceGraphView = ({
                     height: "100%",
                     overflow: "auto"
                   },
-                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react62.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react61.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
                     TraceGraph,
                     {
                       initialFocusEventId: spanId,
@@ -27235,10 +26933,10 @@ async function fetchConnectedTraces(api, traceIds, allSpans = /* @__PURE__ */ ne
 }
 var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = (0, import_react63.useState)();
-  const [loading, setLoading] = (0, import_react63.useState)(false);
-  const [fetchError, setFetchError] = (0, import_react63.useState)();
-  const fetchSpans = (0, import_react63.useCallback)(async () => {
+  const [spans, setSpans] = (0, import_react62.useState)();
+  const [loading, setLoading] = (0, import_react62.useState)(false);
+  const [fetchError, setFetchError] = (0, import_react62.useState)();
+  const fetchSpans = (0, import_react62.useCallback)(async () => {
     setLoading(true);
     try {
       const spans2 = await fetchConnectedTraces(api, [traceId]);
@@ -27251,28 +26949,28 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       setLoading(false);
     }
   }, [api, traceId]);
-  (0, import_react63.useEffect)(() => {
+  (0, import_react62.useEffect)(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  const [open, setOpen] = (0, import_react63.useState)(true);
-  const [selectedEvent, setSelectedEvent] = (0, import_react63.useState)(() => spans?.find((span) => span.span_id === spanId));
-  const spansReference = (0, import_react63.useRef)();
-  (0, import_react63.useEffect)(() => {
+  const [open, setOpen] = (0, import_react62.useState)(true);
+  const [selectedEvent, setSelectedEvent] = (0, import_react62.useState)(() => spans?.find((span) => span.span_id === spanId));
+  const spansReference = (0, import_react62.useRef)();
+  (0, import_react62.useEffect)(() => {
     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 = (0, import_react63.useCallback)((spanId2) => {
+  const handleEventSelect = (0, import_react62.useCallback)((spanId2) => {
     const span = spans?.find((s2) => s2.span_id === spanId2);
     setSelectedEvent(span);
     setOpen(true);
   }, [spans]);
-  const handleRetry = (0, import_react63.useCallback)(() => {
+  const handleRetry = (0, import_react62.useCallback)(() => {
     void checkStatus();
   }, [checkStatus]);
-  const navigateToSpansList = (0, import_react63.useCallback)(() => {
+  const navigateToSpansList = (0, import_react62.useCallback)(() => {
     onClose?.();
   }, [onClose]);
   return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
@@ -27318,17 +27016,17 @@ var SpansListPage = () => {
     streamPaused,
     toggleStream
   } = useSpans();
-  const clearSpansSync = (0, import_react64.useCallback)(() => {
+  const clearSpansSync = (0, import_react63.useCallback)(() => {
     void clearSpans();
   }, [clearSpans]);
   const [order2, setOrder] = useLocalStorage("spans-order", "oldest_first");
-  const [selectedTraceId, setSelectedTraceId] = (0, import_react64.useState)();
-  const [selectedSpanId, setSelectedSpanId] = (0, import_react64.useState)();
-  const navigateToSpan = (0, import_react64.useCallback)((span) => {
+  const [selectedTraceId, setSelectedTraceId] = (0, import_react63.useState)();
+  const [selectedSpanId, setSelectedSpanId] = (0, import_react63.useState)();
+  const navigateToSpan = (0, import_react63.useCallback)((span) => {
     setSelectedTraceId(span.trace_id);
     setSelectedSpanId(span.span_id);
   }, []);
-  const handleRetry = (0, import_react64.useCallback)(() => {
+  const handleRetry = (0, import_react63.useCallback)(() => {
     void checkStatus();
   }, [checkStatus]);
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
@@ -27394,28 +27092,6 @@ var pages = {
 };
 /*! 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