diff --git a/packages/extension/src/utils/helpers.ts b/packages/extension/src/utils/helpers.ts
index b8699853..707b0b74 100644
--- a/packages/extension/src/utils/helpers.ts
+++ b/packages/extension/src/utils/helpers.ts
@@ -1,13 +1,13 @@
-export const isIframe = window !== window.top;
-export const isPopup = window.opener !== null;
+const isIframe = window !== window.top;
+const isPopup = window.opener !== null;
 export const canLoadReactScan = !isIframe && !isPopup;
 
-export const IS_CLIENT = typeof window !== 'undefined';
+const IS_CLIENT = typeof window !== "undefined";
 
 export const isInternalUrl = (url: string): boolean => {
   if (!url) return false;
 
-  const allowedProtocols = ['http:', 'https:', 'file:'];
+  const allowedProtocols = ["http:", "https:", "file:"];
   return !allowedProtocols.includes(new URL(url).protocol);
 };
 
@@ -26,26 +26,42 @@ const ReactDetection = {
   limits: {
     MAX_DEPTH: 10,
     MAX_ELEMENTS: 30,
-    ELEMENTS_PER_LEVEL: 5
+    ELEMENTS_PER_LEVEL: 5,
   },
   nonVisualTags: new Set([
     // Document level
-    'HTML', 'HEAD', 'META', 'TITLE', 'BASE',
+    "HTML",
+    "HEAD",
+    "META",
+    "TITLE",
+    "BASE",
     // Scripts and styles
-    'SCRIPT', 'STYLE', 'LINK', 'NOSCRIPT',
+    "SCRIPT",
+    "STYLE",
+    "LINK",
+    "NOSCRIPT",
     // Media and embeds
-    'SOURCE', 'TRACK', 'EMBED', 'OBJECT', 'PARAM',
+    "SOURCE",
+    "TRACK",
+    "EMBED",
+    "OBJECT",
+    "PARAM",
     // Special elements
-    'TEMPLATE', 'PORTAL', 'SLOT',
+    "TEMPLATE",
+    "PORTAL",
+    "SLOT",
     // Others
-    'AREA', 'XML', 'DOCTYPE', 'COMMENT'
+    "AREA",
+    "XML",
+    "DOCTYPE",
+    "COMMENT",
   ]),
   reactMarkers: {
-    root: '_reactRootContainer',
-    fiber: '__reactFiber',
-    instance: '__reactInternalInstance$',
-    container: '__reactContainer$'
-  }
+    root: "_reactRootContainer",
+    fiber: "__reactFiber",
+    instance: "__reactInternalInstance$",
+    container: "__reactContainer$",
+  },
 } as const;
 
 const childrenCache = new WeakMap<Element, Element[]>();
@@ -81,8 +97,8 @@ export const hasReactFiber = (): boolean => {
       const rootContainer = elementWithRoot._reactRootContainer;
 
       const hasLegacyRoot = rootContainer?._internalRoot?.current?.child != null;
-      const hasContainerRoot = Object.keys(elementWithRoot).some(key =>
-        key.startsWith(ReactDetection.reactMarkers.container)
+      const hasContainerRoot = Object.keys(elementWithRoot).some((key) =>
+        key.startsWith(ReactDetection.reactMarkers.container),
       );
 
       return hasLegacyRoot || hasContainerRoot;
@@ -133,59 +149,6 @@ export const saveLocalStorage = <T>(storageKey: string, state: T): void => {
   } catch {}
 };
 
-export const removeLocalStorage = (storageKey: string): void => {
-  if (!IS_CLIENT) return;
-
-  try {
-    window.localStorage.removeItem(storageKey);
-  } catch {}
-};
-
-export const debounce = <T extends (enabled: boolean | null) => Promise<void>>(
-  fn: T,
-  wait: number,
-  options: { leading?: boolean; trailing?: boolean } = {},
-) => {
-  let timeoutId: number | undefined;
-  let lastArg: boolean | null | undefined;
-  let isLeadingInvoked = false;
-
-  const debounced = (enabled: boolean | null) => {
-    lastArg = enabled;
-
-    if (options.leading && !isLeadingInvoked) {
-      isLeadingInvoked = true;
-      fn(enabled);
-      return;
-    }
-
-    if (timeoutId !== undefined) {
-      clearTimeout(timeoutId);
-    }
-
-    if (options.trailing !== false) {
-      timeoutId = setTimeout(() => {
-        isLeadingInvoked = false;
-        timeoutId = undefined;
-        if (lastArg !== undefined) {
-          fn(lastArg);
-        }
-      }, wait);
-    }
-  };
-
-  debounced.cancel = () => {
-    if (timeoutId !== undefined) {
-      clearTimeout(timeoutId);
-      timeoutId = undefined;
-      isLeadingInvoked = false;
-      lastArg = undefined;
-    }
-  };
-
-  return debounced;
-};
-
 type EventCallback<T = unknown> = (data: T) => void;
 const eventBus = new Map<string, Set<EventCallback>>();
 
@@ -220,14 +183,16 @@ export const sleep = (ms: number): Promise<void> => {
   return new Promise((resolve) => setTimeout(resolve, ms));
 };
 
-export const storageGetItem = async <T>(
-  storageKey: string,
-  key: string,
-): Promise<T | null> => {
+const isStorageRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null;
+
+export const storageGetItem = async <T>(storageKey: string, key: string): Promise<T | null> => {
   try {
     const result = await chrome.storage.local.get(storageKey);
     const data = result[storageKey];
-    return data?.[key] ?? null;
+    if (!isStorageRecord(data)) return null;
+    const value = data[key];
+    return value === undefined ? null : (value as T);
   } catch {
     return null;
   }
@@ -240,9 +205,11 @@ export const storageSetItem = async <T>(
 ): Promise<void> => {
   try {
     const result = await chrome.storage.local.get(storageKey);
-    const data = result[storageKey] || {};
-    data[key] = value;
-    await chrome.storage.local.set({ [storageKey]: data });
-  } catch {
-  }
+    const data = result[storageKey];
+    const updatedData = {
+      ...(isStorageRecord(data) ? data : {}),
+      [key]: value,
+    };
+    await chrome.storage.local.set({ [storageKey]: updatedData });
+  } catch {}
 };
diff --git a/packages/scan/package.json b/packages/scan/package.json
index f5c3848b..e899003b 100644
--- a/packages/scan/package.json
+++ b/packages/scan/package.json
@@ -3,41 +3,66 @@
   "version": "0.5.7",
   "description": "Scan your React app for renders",
   "keywords": [
+    "performance",
     "react",
-    "react-scan",
     "react scan",
-    "render",
-    "performance"
+    "react-scan",
+    "render"
   ],
   "homepage": "https://react-scan.million.dev",
   "bugs": {
     "url": "https://github.com/aidenybai/react-scan/issues"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/aidenybai/react-scan.git"
-  },
   "license": "MIT",
   "author": {
     "name": "Aiden Bai",
     "email": "aiden@million.dev",
     "url": "https://million.dev"
   },
-  "scripts": {
-    "build": "pnpm build:css && NODE_ENV=production tsup",
-    "build:copy": "pnpm build && cat dist/auto.global.js | pbcopy",
-    "build:css": "postcss ./src/web/assets/css/styles.tailwind.css -o ./src/web/assets/css/styles.css",
-    "dev:css": "postcss ./src/web/assets/css/styles.tailwind.css -o ./src/web/assets/css/styles.css --watch",
-    "dev:tsup": "NODE_ENV=development tsup --watch",
-    "dev": "pnpm run --parallel \"/^dev:(css|tsup)/\"",
-    "pack": "npm version patch && pnpm build && npm pack",
-    "pack:bump": "node scripts/bump-version.mjs && pnpm run pack && echo $(pwd)/react-scan-$(node -p \"require('./package.json').version\").tgz | pbcopy",
-    "publint": "publint",
-    "test": "vp test run",
-    "test:watch": "vp test",
-    "lint": "vp lint",
-    "format": "vp fmt",
-    "typecheck": "tsc --noEmit"
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/aidenybai/react-scan.git"
+  },
+  "bin": "bin/cli.js",
+  "files": [
+    "dist",
+    "bin",
+    "package.json",
+    "README.md",
+    "LICENSE",
+    "auto.d.ts"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "browser": "dist/auto.global.js",
+  "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "react-component-name/vite": [
+        "./dist/react-component-name/vite.d.ts"
+      ],
+      "react-component-name/webpack": [
+        "./dist/react-component-name/webpack.d.ts"
+      ],
+      "react-component-name/esbuild": [
+        "./dist/react-component-name/esbuild.d.ts"
+      ],
+      "react-component-name/rspack": [
+        "./dist/react-component-name/rspack.d.ts"
+      ],
+      "react-component-name/rolldown": [
+        "./dist/react-component-name/rolldown.d.ts"
+      ],
+      "react-component-name/rollup": [
+        "./dist/react-component-name/rollup.d.ts"
+      ],
+      "react-component-name/astro": [
+        "./dist/react-component-name/astro.d.ts"
+      ],
+      "react-component-name/loader": [
+        "./dist/react-component-name/loader.d.ts"
+      ]
+    }
   },
   "exports": {
     "./package.json": "./package.json",
@@ -164,47 +189,25 @@
       "require": "./dist/react-component-name/loader.js"
     }
   },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "browser": "dist/auto.global.js",
-  "types": "dist/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "react-component-name/vite": [
-        "./dist/react-component-name/vite.d.ts"
-      ],
-      "react-component-name/webpack": [
-        "./dist/react-component-name/webpack.d.ts"
-      ],
-      "react-component-name/esbuild": [
-        "./dist/react-component-name/esbuild.d.ts"
-      ],
-      "react-component-name/rspack": [
-        "./dist/react-component-name/rspack.d.ts"
-      ],
-      "react-component-name/rolldown": [
-        "./dist/react-component-name/rolldown.d.ts"
-      ],
-      "react-component-name/rollup": [
-        "./dist/react-component-name/rollup.d.ts"
-      ],
-      "react-component-name/astro": [
-        "./dist/react-component-name/astro.d.ts"
-      ],
-      "react-component-name/loader": [
-        "./dist/react-component-name/loader.d.ts"
-      ]
-    }
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "pnpm build:css && NODE_ENV=production tsup",
+    "build:copy": "pnpm build && cat dist/auto.global.js | pbcopy",
+    "build:css": "postcss ./src/web/assets/css/styles.tailwind.css -o ./src/web/assets/css/styles.css",
+    "dev:css": "postcss ./src/web/assets/css/styles.tailwind.css -o ./src/web/assets/css/styles.css --watch",
+    "dev:tsup": "NODE_ENV=development tsup --watch",
+    "dev": "pnpm run --parallel \"/^dev:(css|tsup)/\"",
+    "pack": "npm version patch && pnpm build && npm pack",
+    "pack:bump": "node scripts/bump-version.mjs && pnpm run pack && echo $(pwd)/react-scan-$(node -p \"require('./package.json').version\").tgz | pbcopy",
+    "publint": "publint",
+    "test": "vp test run",
+    "test:watch": "vp test",
+    "lint": "vp lint",
+    "format": "vp fmt",
+    "typecheck": "tsc --noEmit"
   },
-  "bin": "bin/cli.js",
-  "files": [
-    "dist",
-    "bin",
-    "package.json",
-    "README.md",
-    "LICENSE",
-    "auto.d.ts"
-  ],
   "dependencies": {
     "@babel/core": "^7.29.0",
     "@babel/types": "^7.29.0",
@@ -253,8 +256,5 @@
   },
   "optionalDependencies": {
     "unplugin": "^3.0.0"
-  },
-  "publishConfig": {
-    "access": "public"
   }
 }
diff --git a/packages/scan/src/core/instrumentation.ts b/packages/scan/src/core/instrumentation.ts
index 15e0e43e..5fb75788 100644
--- a/packages/scan/src/core/instrumentation.ts
+++ b/packages/scan/src/core/instrumentation.ts
@@ -1,4 +1,4 @@
-import { type Signal, signal } from '@preact/signals';
+import { type Signal, signal } from "@preact/signals";
 import {
   ClassComponentTag,
   type Fiber,
@@ -19,20 +19,15 @@ import {
   traverseContexts,
   traverseProps,
   traverseRenderedFibers,
-} from 'bippy';
-import { isValidElement } from 'preact';
-import { isEqual } from '~core/utils';
+} from "bippy";
+import { isValidElement } from "preact";
+import { isEqual } from "~core/utils";
 import {
   collectContextChanges,
   collectPropsChanges,
   collectStateChanges,
-} from '~web/views/inspector/timeline/utils';
-import {
-  type Change,
-  type ContextChange,
-  ReactScanInternals,
-  type StateChange,
-} from './index';
+} from "~web/views/inspector/timeline/utils";
+import { type Change, type ContextChange, ReactScanInternals, type StateChange } from "./index";
 
 export enum RenderPhase {
   Mount = 0b001,
@@ -40,7 +35,7 @@ export enum RenderPhase {
   Unmount = 0b100,
 }
 
-export const RENDER_PHASE_STRING_TO_ENUM = {
+const RENDER_PHASE_STRING_TO_ENUM = {
   mount: RenderPhase.Mount,
   update: RenderPhase.Update,
   unmount: RenderPhase.Unmount,
@@ -62,7 +57,7 @@ export interface AggregatedRender {
   unnecessary: boolean | null;
   didCommit: boolean;
   fps: number;
-  computedKey: import('./index').OutlineKey | null;
+  computedKey: import("./index").OutlineKey | null;
   computedCurrent: DOMRect | null;
 }
 
@@ -92,13 +87,13 @@ export const getFPS = () => {
   return fps;
 };
 
-export const isElementVisible = (el: Element) => {
+const isElementVisible = (el: Element) => {
   const style = window.getComputedStyle(el);
   return (
-    style.display !== 'none' &&
-    style.visibility !== 'hidden' &&
-    style.contentVisibility !== 'hidden' &&
-    style.opacity !== '0'
+    style.display !== "none" &&
+    style.visibility !== "hidden" &&
+    style.contentVisibility !== "hidden" &&
+    style.opacity !== "0"
   );
 };
 
@@ -112,10 +107,7 @@ export const isValueUnstable = (prevValue: unknown, nextValue: unknown) => {
   );
 };
 
-export const isElementInViewport = (
-  el: Element,
-  rect = el.getBoundingClientRect(),
-) => {
+const isElementInViewport = (el: Element, rect = el.getBoundingClientRect()) => {
   const isVisible =
     rect.bottom > 0 &&
     rect.right > 0 &&
@@ -149,29 +141,29 @@ export interface Render {
   fps: number;
 }
 
-const unstableTypes = ['function', 'object'];
+const unstableTypes = ["function", "object"];
 
 const cache = new WeakMap<object, string>();
 
 export function fastSerialize(value: unknown, depth = 0): string {
-  if (depth < 0) return '…';
+  if (depth < 0) return "…";
 
   switch (typeof value) {
-    case 'function':
+    case "function":
       return value.toString();
-    case 'string':
+    case "string":
       return value;
-    case 'number':
-    case 'boolean':
-    case 'undefined':
+    case "number":
+    case "boolean":
+    case "undefined":
       return String(value);
-    case 'object':
+    case "object":
       break;
     default:
       return String(value);
   }
 
-  if (value === null) return 'null';
+  if (value === null) return "null";
 
   if (cache.has(value)) {
     const cached = cache.get(value);
@@ -181,13 +173,13 @@ export function fastSerialize(value: unknown, depth = 0): string {
   }
 
   if (Array.isArray(value)) {
-    const str = value.length ? `[${value.length}]` : '[]';
+    const str = value.length ? `[${value.length}]` : "[]";
     cache.set(value, str);
     return str;
   }
 
   if (isValidElement(value)) {
-    const type = getDisplayName(value.type) ?? '';
+    const type = getDisplayName(value.type) ?? "";
     const propCount = value.props ? Object.keys(value.props).length : 0;
     const str = `<${type} ${propCount}>`;
     cache.set(value, str);
@@ -196,14 +188,13 @@ export function fastSerialize(value: unknown, depth = 0): string {
 
   if (Object.getPrototypeOf(value) === Object.prototype) {
     const keys = Object.keys(value);
-    const str = keys.length ? `{${keys.length}}` : '{}';
+    const str = keys.length ? `{${keys.length}}` : "{}";
     cache.set(value, str);
     return str;
   }
 
-  const ctor =
-    value && typeof value === 'object' ? value.constructor : undefined;
-  if (ctor && typeof ctor === 'function' && ctor.name) {
+  const ctor = value && typeof value === "object" ? value.constructor : undefined;
+  if (ctor && typeof ctor === "function" && ctor.name) {
     const str = `${ctor.name}{…}`;
     cache.set(value, str);
     return str;
@@ -226,8 +217,7 @@ export const getStateChanges = (fiber: Fiber): StateChange[] => {
     fiber.tag === MemoComponentTag
   ) {
     let memoizedState: MemoizedState | null = fiber.memoizedState;
-    let prevState: MemoizedState | null | undefined =
-      fiber.alternate?.memoizedState;
+    let prevState: MemoizedState | null | undefined = fiber.alternate?.memoizedState;
     let index = 0;
 
     while (memoizedState) {
@@ -254,7 +244,7 @@ export const getStateChanges = (fiber: Fiber): StateChange[] => {
     // when we have class component fiber, memoizedState is the component state
     const change: StateChange = {
       type: ChangeReason.ClassState,
-      name: 'state',
+      name: "state",
       value: fiber.memoizedState,
       prevValue: fiber.alternate?.memoizedState,
     };
@@ -295,8 +285,7 @@ function getContextChangesTraversal(
   const change: ContextChange = {
     type: ChangeReason.Context,
     name:
-      (nextValue.context as { displayName: string | undefined }).displayName ??
-      'Context.Provider',
+      (nextValue.context as { displayName: string | undefined }).displayName ?? "Context.Provider",
     value: nextMemoizedValue,
     contextType: getContextId(nextValue.context as ContextFiber),
 
@@ -373,16 +362,13 @@ function isRenderUnnecessaryTraversal(
   prevValue: unknown,
   nextValue: unknown,
 ): void {
-  if (
-    !isEqual(prevValue, nextValue) &&
-    !isValueUnstable(prevValue, nextValue)
-  ) {
+  if (!isEqual(prevValue, nextValue) && !isValueUnstable(prevValue, nextValue)) {
     this.isRequiredChange = true;
   }
 }
 
 // FIXME: calculation is slow
-export const isRenderUnnecessary = (fiber: Fiber) => {
+const isRenderUnnecessary = (fiber: Fiber) => {
   if (!didFiberCommit(fiber)) return true;
 
   const mutatedHostFibers = getMutatedHostFibers(fiber);
@@ -442,7 +428,7 @@ export interface OldRenderData {
 
 const RENDER_DEBOUNCE_MS = 16;
 
-export const renderDataMap = new WeakMap<object, Map<string, RenderData>>();
+const renderDataMap = new WeakMap<object, Map<string, RenderData>>();
 
 function getFiberIdentifier(fiber: Fiber) {
   return String(getFiberId(fiber));
@@ -485,8 +471,7 @@ const trackRender = (
   if (
     (hasChanges || hasDomMutations) &&
     (!existingData ||
-      currentTimestamp - (existingData.lastRenderTimestamp || 0) >
-        RENDER_DEBOUNCE_MS)
+      currentTimestamp - (existingData.lastRenderTimestamp || 0) > RENDER_DEBOUNCE_MS)
   ) {
     const renderData: RenderData = existingData || {
       selfTime: 0,
@@ -504,10 +489,7 @@ const trackRender = (
   }
 };
 
-export const createInstrumentation = (
-  instanceKey: string,
-  config: InstrumentationConfig,
-) => {
+export const createInstrumentation = (instanceKey: string, config: InstrumentationConfig) => {
   const instrumentation: Instrumentation = {
     // this will typically be false, but in cases where a user provides showToolbar: true, this will be true
     isPaused: signal(!ReactScanInternals.options.value.enabled),
@@ -522,7 +504,7 @@ export const createInstrumentation = (
     inited = true;
 
     instrument({
-      name: 'react-scan',
+      name: "react-scan",
       onActive: config.onActive,
       onCommitFiberRoot(_rendererID, root) {
         instrumentation.fiberRoots.add(root);
@@ -542,7 +524,7 @@ export const createInstrumentation = (
 
         traverseRenderedFibers(
           root.current,
-          (fiber: Fiber, phase: 'mount' | 'update' | 'unmount') => {
+          (fiber: Fiber, phase: "mount" | "update" | "unmount") => {
             const type = getType(fiber.type);
             if (!type) return null;
 
@@ -604,8 +586,7 @@ export const createInstrumentation = (
               );
             }
 
-            const { selfTime: fiberSelfTime, totalTime: fiberTotalTime } =
-              getTimings(fiber);
+            const { selfTime: fiberSelfTime, totalTime: fiberTotalTime } = getTimings(fiber);
 
             const fps = getFPS();
             const render: Render = {
@@ -617,9 +598,7 @@ export const createInstrumentation = (
               forget: hasMemoCache(fiber),
               // todo: allow this to be toggle-able through toolbar
               // todo: performance optimization: if the last fiber measure was very off screen, do not run isRenderUnnecessary
-              unnecessary: TRACK_UNNECESSARY_RENDERS
-                ? isRenderUnnecessary(fiber)
-                : null,
+              unnecessary: TRACK_UNNECESSARY_RENDERS ? isRenderUnnecessary(fiber) : null,
               didCommit: didFiberCommit(fiber),
               fps,
             };
@@ -628,14 +607,8 @@ export const createInstrumentation = (
             const hasChanges = changes.length > 0;
             const hasDomMutations = getMutatedHostFibers(fiber).length > 0;
 
-            if (phase === 'update') {
-              trackRender(
-                fiber,
-                fiberSelfTime,
-                fiberTotalTime,
-                hasChanges,
-                hasDomMutations,
-              );
+            if (phase === "update") {
+              trackRender(fiber, fiberSelfTime, fiberTotalTime, hasChanges, hasDomMutations);
             }
 
             for (let i = 0, len = validInstancesIndicies.length; i < len; i++) {
diff --git a/packages/scan/src/core/notifications/event-tracking.ts b/packages/scan/src/core/notifications/event-tracking.ts
index 371aed83..d0a05000 100644
--- a/packages/scan/src/core/notifications/event-tracking.ts
+++ b/packages/scan/src/core/notifications/event-tracking.ts
@@ -1,6 +1,6 @@
-import { useSyncExternalStore } from 'preact/compat';
-import { not_globally_unique_generateId } from '~core/utils';
-import { MAX_INTERACTION_BATCH, interactionStore } from './interaction-store';
+import { useSyncExternalStore } from "preact/compat";
+import { not_globally_unique_generateId } from "~core/utils";
+import { MAX_INTERACTION_BATCH, interactionStore } from "./interaction-store";
 import {
   FiberRenders,
   PerformanceEntryChannelEvent,
@@ -9,15 +9,10 @@ import {
   listenForRenders,
   setupDetailedPointerTimingListener,
   setupPerformancePublisher,
-} from './performance';
-import {
-  MAX_CHANNEL_SIZE,
-  performanceEntryChannels,
-} from './performance-store';
-import { BoundedArray } from './performance-utils';
-import { createStore } from '~web/utils/create-store';
-
-let profileListeners: Array<(interaction: FinalInteraction) => void> = [];
+} from "./performance";
+import { MAX_CHANNEL_SIZE, performanceEntryChannels } from "./performance-store";
+import { BoundedArray } from "./performance-utils";
+import { createStore } from "~web/utils/create-store";
 
 type FinalInteraction = {
   detailedTiming: TimeoutStage;
@@ -25,68 +20,22 @@ type FinalInteraction = {
   completedAt: number;
 };
 
-export const listenForProfile = (
-  listener: (interaction: FinalInteraction) => void,
-) => {
-  profileListeners.push(listener);
-
-  return () => {
-    profileListeners = profileListeners.filter(
-      (existingListener) => existingListener !== listener,
-    );
-  };
-};
-
-export let interactionStatus:
-  | { kind: 'started'; startedAt: number }
-  | { kind: 'completed'; startedAt: number; endedAt: number }
-  | { kind: 'no-interaction' } = {
-  kind: 'no-interaction',
-};
-
-type NewInteractionStoreState = {
-  /**
-   * problem definition: we need to store bounds but how do we handle uninitialized bounds
-   *
-   * i guess what we said before, we just have one active bounds and that's all that matters chat
-   */
-
-  startAt: number;
-  endAt: number;
-};
-
-export const interactionStatusStore: {
-  state: NewInteractionStoreState | null;
-  listeners: Array<(state: NewInteractionStoreState) => void>;
-  addListener: (cb: (state: NewInteractionStoreState) => void) => () => void;
-} = {
-  state: null,
-  addListener: (cb) => {
-    interactionStatusStore.listeners.push(cb);
-    return () => {
-      interactionStatusStore.listeners =
-        interactionStatusStore.listeners.filter((l) => l !== cb);
-    };
-  },
-  listeners: [],
-};
-
 let accumulatedFiberRendersOverTask: null | FiberRenders = null;
 type InteractionEvent = {
-  kind: 'interaction';
+  kind: "interaction";
   data: {
     startAt: number;
     endAt: number;
     meta: {
       detailedTiming: TimeoutStage;
       latency: number;
-      kind: PerformanceEntryChannelEvent['kind'];
+      kind: PerformanceEntryChannelEvent["kind"];
     };
   };
 };
 
 type LongRenderPipeline = {
-  kind: 'long-render';
+  kind: "long-render";
   data: {
     startAt: number;
     endAt: number;
@@ -113,175 +62,125 @@ type ToolbarEventStoreState = {
   };
 };
 
-type DebugEvent = {
-  kind: string;
-  at: number;
-  meta?: unknown;
-};
-export const debugEventStore = createStore<{
-  state: {
-    events: Array<DebugEvent>;
-  };
-  actions: {
-    // oxlint-disable-next-line typescript/no-explicit-any
-    addEvent: (event: any) => void;
-    clear: () => void;
-  };
-}>()((set) => ({
-  state: {
-    events: [],
-  },
-  actions: {
-    addEvent: (event: DebugEvent) => {
-      set((store) => ({
-        state: {
-          events: [...store.state.events, event],
-        },
-      }));
-    },
-    clear: () => {
-      set({
-        state: {
-          events: [],
-        },
-      });
+const EVENT_STORE_CAPACITY = 200;
+
+export const toolbarEventStore = createStore<ToolbarEventStoreState>()((set, get) => {
+  const listeners = new Set<(event: SlowdownEvent) => void>();
+
+  return {
+    state: {
+      events: new BoundedArray(EVENT_STORE_CAPACITY),
     },
-  },
-}));
 
-const EVENT_STORE_CAPACITY = 200;
+    actions: {
+      addEvent: (event: SlowdownEvent) => {
+        listeners.forEach((listener) => listener(event));
+
+        const events = [...get().state.events, event];
+        const applyOverlapCheckToLongRenderEvent = (
+          longRenderEvent: LongRenderPipeline & { id: string },
+          onOverlap: (overlapsWith: InteractionEvent & { id: string }) => void,
+        ) => {
+          const overlapsWith = events.find((event) => {
+            if (event.kind === "long-render") {
+              return;
+            }
 
-export const toolbarEventStore = createStore<ToolbarEventStoreState>()(
-  (set, get) => {
-    const listeners = new Set<(event: SlowdownEvent) => void>();
+            if (event.id === longRenderEvent.id) {
+              return;
+            }
 
-    return {
-      state: {
-        events: new BoundedArray(EVENT_STORE_CAPACITY),
-      },
+            /**
+             * |---x-----------x------ (interaction)
+             * |x-----------x          (long-render)
+             */
 
-      actions: {
-        addEvent: (event: SlowdownEvent) => {
-          listeners.forEach((listener) => listener(event));
-
-          const events = [...get().state.events, event];
-          const applyOverlapCheckToLongRenderEvent = (
-            longRenderEvent: LongRenderPipeline & { id: string },
-            onOverlap: (
-              overlapsWith: InteractionEvent & { id: string },
-            ) => void,
-          ) => {
-            const overlapsWith = events.find((event) => {
-              if (event.kind === 'long-render') {
-                return;
-              }
-
-              if (event.id === longRenderEvent.id) {
-                return;
-              }
-
-              /**
-               * |---x-----------x------ (interaction)
-               * |x-----------x          (long-render)
-               */
-
-              if (
-                longRenderEvent.data.startAt <= event.data.startAt &&
-                longRenderEvent.data.endAt <= event.data.endAt &&
-                longRenderEvent.data.endAt >= event.data.startAt
-              ) {
-                return true;
-              }
-
-              /**
+            if (
+              longRenderEvent.data.startAt <= event.data.startAt &&
+              longRenderEvent.data.endAt <= event.data.endAt &&
+              longRenderEvent.data.endAt >= event.data.startAt
+            ) {
+              return true;
+            }
+
+            /**
              * |x-----------x---- (interaction)
              * |--x------------x  (long-render)
              *
 
              */
 
-              if (
-                event.data.startAt <= longRenderEvent.data.startAt &&
-                event.data.endAt >= longRenderEvent.data.startAt
-              ) {
-                return true;
-              }
-
-              /**
-               *
-               * |--x-------------x    (interaction)
-               * |x------------------x (long-render)
-               *
-               */
-
-              if (
-                longRenderEvent.data.startAt <= event.data.startAt &&
-                longRenderEvent.data.endAt >= event.data.endAt
-              ) {
-                return true;
-              }
-            }) as undefined | (InteractionEvent & { id: string }); // invariant: because we early check the typechecker does not know it must be the case that when it finds something, it will be an interaction it overlaps with
-
-            if (overlapsWith) {
-              onOverlap(overlapsWith);
+            if (
+              event.data.startAt <= longRenderEvent.data.startAt &&
+              event.data.endAt >= longRenderEvent.data.startAt
+            ) {
+              return true;
             }
-          };
 
-          const toRemove = new Set<string>();
+            /**
+             *
+             * |--x-------------x    (interaction)
+             * |x------------------x (long-render)
+             *
+             */
 
-          events.forEach((event) => {
-            if (event.kind === 'interaction') return;
-            applyOverlapCheckToLongRenderEvent(event, () => {
-              toRemove.add(event.id);
-            });
-          });
+            if (
+              longRenderEvent.data.startAt <= event.data.startAt &&
+              longRenderEvent.data.endAt >= event.data.endAt
+            ) {
+              return true;
+            }
+          }) as undefined | (InteractionEvent & { id: string }); // invariant: because we early check the typechecker does not know it must be the case that when it finds something, it will be an interaction it overlaps with
 
-          const withRemovedEvents = events.filter(
-            (event) => !toRemove.has(event.id),
-          );
+          if (overlapsWith) {
+            onOverlap(overlapsWith);
+          }
+        };
 
-          set(() => ({
-            state: {
-              events: BoundedArray.fromArray(
-                withRemovedEvents,
-                EVENT_STORE_CAPACITY,
-              ),
-            },
-          }));
-        },
-
-        addListener: (listener: (event: SlowdownEvent) => void) => {
-          listeners.add(listener);
-          return () => {
-            listeners.delete(listener);
-          };
-        },
-
-        clear: () => {
-          set({
-            state: {
-              events: new BoundedArray(EVENT_STORE_CAPACITY),
-            },
+        const toRemove = new Set<string>();
+
+        events.forEach((event) => {
+          if (event.kind === "interaction") return;
+          applyOverlapCheckToLongRenderEvent(event, () => {
+            toRemove.add(event.id);
           });
-        },
+        });
+
+        const withRemovedEvents = events.filter((event) => !toRemove.has(event.id));
+
+        set(() => ({
+          state: {
+            events: BoundedArray.fromArray(withRemovedEvents, EVENT_STORE_CAPACITY),
+          },
+        }));
       },
-    };
-  },
-);
+
+      addListener: (listener: (event: SlowdownEvent) => void) => {
+        listeners.add(listener);
+        return () => {
+          listeners.delete(listener);
+        };
+      },
+
+      clear: () => {
+        set({
+          state: {
+            events: new BoundedArray(EVENT_STORE_CAPACITY),
+          },
+        });
+      },
+    },
+  };
+});
 
 export const useToolbarEventLog = () => {
-  return useSyncExternalStore(
-    toolbarEventStore.subscribe,
-    toolbarEventStore.getState,
-  );
+  return useSyncExternalStore(toolbarEventStore.subscribe, toolbarEventStore.getState);
 };
 
 let taskDirtyAt: null | number = null;
 let taskDirtyOrigin: null | number = null;
 
-let previousTrackCurrentMouseOverElementCallback:
-  | ((e: MouseEvent) => void)
-  | null = null;
+let previousTrackCurrentMouseOverElementCallback: ((e: MouseEvent) => void) | null = null;
 
 let overToolbar: boolean | null;
 
@@ -291,33 +190,30 @@ const trackCurrentMouseOverToolbar = () => {
       .composedPath()
       .map((path) => (path as Element).id)
       .filter(Boolean)
-      .includes('react-scan-toolbar');
+      .includes("react-scan-toolbar");
   };
 
-  document.addEventListener('mouseover', callback);
+  document.addEventListener("mouseover", callback);
   previousTrackCurrentMouseOverElementCallback = callback;
 
   return () => {
     if (previousTrackCurrentMouseOverElementCallback) {
-      document.removeEventListener(
-        'mouseover',
-        previousTrackCurrentMouseOverElementCallback,
-      );
+      document.removeEventListener("mouseover", previousTrackCurrentMouseOverElementCallback);
     }
   };
 };
 
 // stops long tasks b/c backgrounded from being reported
-export const startDirtyTaskTracking = () => {
+const startDirtyTaskTracking = () => {
   const onVisibilityChange = () => {
     taskDirtyAt = performance.now();
     taskDirtyOrigin = performance.timeOrigin;
   };
 
-  document.addEventListener('visibilitychange', onVisibilityChange);
+  document.addEventListener("visibilitychange", onVisibilityChange);
 
   return () => {
-    document.removeEventListener('visibilitychange', onVisibilityChange);
+    document.removeEventListener("visibilitychange", onVisibilityChange);
   };
 };
 
@@ -325,7 +221,7 @@ export const HIGH_SEVERITY_FPS_DROP_TIME = 150;
 
 let framesDrawnInTheLastSecond: Array<number> = [];
 
-export function startLongPipelineTracking() {
+function startLongPipelineTracking() {
   let rafHandle: number;
   let timeoutHandle: ReturnType<typeof setTimeout>;
 
@@ -361,14 +257,14 @@ export function startLongPipelineTracking() {
         if (
           duration > HIGH_SEVERITY_FPS_DROP_TIME &&
           !taskConsideredDirty &&
-          document.visibilityState === 'visible' &&
+          document.visibilityState === "visible" &&
           !wasTaskInfluencedByToolbar
         ) {
           const endAt = endOrigin + endNow;
           const startAt = startTime + startOrigin;
 
           toolbarEventStore.getState().actions.addEvent({
-            kind: 'long-render',
+            kind: "long-render",
             id: not_globally_unique_generateId(),
             data: {
               endAt: endAt,
@@ -413,7 +309,7 @@ export const startTimingTracking = () => {
     event: PerformanceEntryChannelEvent,
   ) => {
     toolbarEventStore.getState().actions.addEvent({
-      kind: 'interaction',
+      kind: "interaction",
       id: not_globally_unique_generateId(),
       data: {
         startAt: finalInteraction.detailedTiming.blockingTimeStart,
@@ -422,8 +318,7 @@ export const startTimingTracking = () => {
       },
     });
 
-    const existingCompletedInteractions =
-      performanceEntryChannels.getChannelState('recording');
+    const existingCompletedInteractions = performanceEntryChannels.getChannelState("recording");
 
     finalInteraction.detailedTiming.stopListeningForRenders();
 
@@ -432,34 +327,26 @@ export const startTimingTracking = () => {
       // it may be possible the performance entry returned before detailed timing. If that's the case we should update
       // assumptions and deal with mapping the entry back to the detailed timing here
       performanceEntryChannels.updateChannelState(
-        'recording',
+        "recording",
         () => new BoundedArray(MAX_CHANNEL_SIZE),
       );
     }
   };
-  const unSubDetailedPointerTiming = setupDetailedPointerTimingListener(
-    'pointer',
-    {
-      onComplete,
-    },
-  );
-  const unSubDetailedKeyboardTiming = setupDetailedPointerTimingListener(
-    'keyboard',
-    {
-      onComplete,
-    },
-  );
-
-  const unSubInteractions = listenForPerformanceEntryInteractions(
-    (completedInteraction) => {
-      interactionStore.setState(
-        BoundedArray.fromArray(
-          interactionStore.getCurrentState().concat(completedInteraction),
-          MAX_INTERACTION_BATCH,
-        ),
-      );
-    },
-  );
+  const unSubDetailedPointerTiming = setupDetailedPointerTimingListener("pointer", {
+    onComplete,
+  });
+  const unSubDetailedKeyboardTiming = setupDetailedPointerTimingListener("keyboard", {
+    onComplete,
+  });
+
+  const unSubInteractions = listenForPerformanceEntryInteractions((completedInteraction) => {
+    interactionStore.setState(
+      BoundedArray.fromArray(
+        interactionStore.getCurrentState().concat(completedInteraction),
+        MAX_INTERACTION_BATCH,
+      ),
+    );
+  });
 
   return () => {
     unSubMouseOver();
diff --git a/packages/scan/src/core/notifications/interaction-store.ts b/packages/scan/src/core/notifications/interaction-store.ts
index 95e940e5..1ef4ab26 100644
--- a/packages/scan/src/core/notifications/interaction-store.ts
+++ b/packages/scan/src/core/notifications/interaction-store.ts
@@ -3,7 +3,7 @@ import { CompletedInteraction } from "./performance";
 
 type Subscriber<T> = (data: T) => void;
 
-export class Store<T> {
+class Store<T> {
   private subscribers: Set<Subscriber<T>> = new Set();
   private currentValue: T;
 
@@ -32,5 +32,5 @@ export class Store<T> {
 }
 export const MAX_INTERACTION_BATCH = 150;
 export const interactionStore = new Store<BoundedArray<CompletedInteraction>>(
-  new BoundedArray(MAX_INTERACTION_BATCH)
+  new BoundedArray(MAX_INTERACTION_BATCH),
 );
diff --git a/packages/scan/src/core/notifications/outline-overlay.ts b/packages/scan/src/core/notifications/outline-overlay.ts
index 7703128c..2eafa099 100644
--- a/packages/scan/src/core/notifications/outline-overlay.ts
+++ b/packages/scan/src/core/notifications/outline-overlay.ts
@@ -1,13 +1,13 @@
-import { signal } from '@preact/signals';
-import { iife } from './performance-utils';
+import { signal } from "@preact/signals";
+import { iife } from "./performance-utils";
 
-export let highlightCanvas: HTMLCanvasElement | null = null;
-export let highlightCtx: CanvasRenderingContext2D | null = null;
+let highlightCanvas: HTMLCanvasElement | null = null;
+let highlightCtx: CanvasRenderingContext2D | null = null;
 
 let animationFrame: number | null = null;
 
 type TransitionHighlightState = {
-  kind: 'transition';
+  kind: "transition";
   transitionTo: {
     name: string;
     rects: Array<DOMRect>;
@@ -22,7 +22,7 @@ type TransitionHighlightState = {
 type HighlightState =
   | TransitionHighlightState
   | {
-      kind: 'move-out';
+      kind: "move-out";
       current: {
         name: string;
         rects: Array<DOMRect>;
@@ -30,7 +30,7 @@ type HighlightState =
       };
     }
   | {
-      kind: 'idle';
+      kind: "idle";
       current: {
         name: string;
         rects: Array<DOMRect>;
@@ -38,7 +38,7 @@ type HighlightState =
     };
 
 export const HighlightStore = signal<HighlightState>({
-  kind: 'idle',
+  kind: "idle",
   current: null,
 });
 
@@ -65,24 +65,22 @@ export const drawHighlights = () => {
 
     highlightCtx.clearRect(0, 0, highlightCanvas.width, highlightCanvas.height);
 
-    const color = 'hsl(271, 76%, 53%)';
+    const color = "hsl(271, 76%, 53%)";
     const state = HighlightStore.value;
     const { alpha, current } = iife(() => {
       switch (state.kind) {
-        case 'transition': {
+        case "transition": {
           const current =
-            state.current?.alpha && state.current.alpha > 0
-              ? state.current
-              : state.transitionTo;
+            state.current?.alpha && state.current.alpha > 0 ? state.current : state.transitionTo;
           return {
             alpha: current ? current.alpha : 0,
             current,
           };
         }
-        case 'move-out': {
+        case "move-out": {
           return { alpha: state.current?.alpha ?? 0, current: state.current };
         }
-        case 'idle': {
+        case "idle": {
           return { alpha: 1, current: state.current };
         }
       }
@@ -113,10 +111,10 @@ export const drawHighlights = () => {
     });
 
     switch (state.kind) {
-      case 'move-out': {
+      case "move-out": {
         if (state.current.alpha === 0) {
           HighlightStore.value = {
-            kind: 'idle',
+            kind: "idle",
             current: null,
           };
           lastFrameTime = 0;
@@ -129,7 +127,7 @@ export const drawHighlights = () => {
         drawHighlights();
         return;
       }
-      case 'transition': {
+      case "transition": {
         if (state.current && state.current.alpha > 0) {
           state.current.alpha = Math.max(0, state.current.alpha - step);
           drawHighlights();
@@ -139,7 +137,7 @@ export const drawHighlights = () => {
         // invariant, state.current.alpha === 0
         if (state.transitionTo.alpha === 1) {
           HighlightStore.value = {
-            kind: 'idle',
+            kind: "idle",
             current: state.transitionTo,
           };
           lastFrameTime = 0;
@@ -150,7 +148,7 @@ export const drawHighlights = () => {
 
         drawHighlights();
       }
-      case 'idle': {
+      case "idle": {
         // no-op
         lastFrameTime = 0;
         return;
@@ -161,8 +159,8 @@ export const drawHighlights = () => {
 
 let handleResizeListener: (() => void) | null = null;
 export const createHighlightCanvas = (root: HTMLElement) => {
-  highlightCanvas = document.createElement('canvas');
-  highlightCtx = highlightCanvas.getContext('2d', { alpha: true });
+  highlightCanvas = document.createElement("canvas");
+  highlightCtx = highlightCanvas.getContext("2d", { alpha: true });
   if (!highlightCtx) return null;
 
   const dpr = window.devicePixelRatio || 1;
@@ -172,18 +170,18 @@ export const createHighlightCanvas = (root: HTMLElement) => {
   highlightCanvas.style.height = `${innerHeight}px`;
   highlightCanvas.width = innerWidth * dpr;
   highlightCanvas.height = innerHeight * dpr;
-  highlightCanvas.style.position = 'fixed';
-  highlightCanvas.style.left = '0';
-  highlightCanvas.style.top = '0';
-  highlightCanvas.style.pointerEvents = 'none';
-  highlightCanvas.style.zIndex = '2147483600';
+  highlightCanvas.style.position = "fixed";
+  highlightCanvas.style.left = "0";
+  highlightCanvas.style.top = "0";
+  highlightCanvas.style.pointerEvents = "none";
+  highlightCanvas.style.zIndex = "2147483600";
 
   highlightCtx.scale(dpr, dpr);
 
   root.appendChild(highlightCanvas);
 
   if (handleResizeListener) {
-    window.removeEventListener('resize', handleResizeListener);
+    window.removeEventListener("resize", handleResizeListener);
   }
 
   const handleResize = () => {
@@ -201,7 +199,7 @@ export const createHighlightCanvas = (root: HTMLElement) => {
   };
   handleResizeListener = handleResize;
 
-  window.addEventListener('resize', handleResize);
+  window.addEventListener("resize", handleResize);
 
   HighlightStore.subscribe(() => {
     requestAnimationFrame(() => {
@@ -212,7 +210,7 @@ export const createHighlightCanvas = (root: HTMLElement) => {
   return cleanup;
 };
 
-export function cleanup() {
+function cleanup() {
   if (animationFrame) {
     cancelAnimationFrame(animationFrame);
     animationFrame = null;
diff --git a/packages/scan/src/core/notifications/performance-utils.ts b/packages/scan/src/core/notifications/performance-utils.ts
index 228c5c98..afb5cfc2 100644
--- a/packages/scan/src/core/notifications/performance-utils.ts
+++ b/packages/scan/src/core/notifications/performance-utils.ts
@@ -1,66 +1,3 @@
-import { Fiber } from 'bippy';
-export const getChildrenFromFiberLL = (fiber: Fiber) => {
-  const children: Array<Fiber> = [];
-
-  let curr: typeof fiber.child = fiber.child;
-
-  while (curr) {
-    children.push(curr);
-
-    curr = curr.sibling;
-  }
-
-  return children;
-};
-
-type Node = Map<
-  Fiber,
-  {
-    children: Array<Fiber>;
-    parent: Fiber | null;
-    isRoot: boolean;
-    isSVG: boolean;
-  }
->;
-
-export const createChildrenAdjacencyList = (root: Fiber, limit: number) => {
-  const tree: Node = new Map([]);
-
-  const queue: Array<[node: Fiber, parent: Fiber | null]> = [];
-  const visited = new Set<Fiber>();
-
-  queue.push([root, root.return]);
-  let traversed = 1;
-
-  while (queue.length) {
-    if (traversed >= limit) {
-      return tree;
-    }
-    // oxlint-disable-next-line typescript/no-non-null-assertion
-    const [node, parent] = queue.pop()!;
-    const children = getChildrenFromFiberLL(node);
-
-    tree.set(node, {
-      children: [],
-      parent,
-      isRoot: node === root,
-      isSVG: node.type === 'svg',
-    });
-
-    for (const child of children) {
-      traversed += 1;
-      // this isn't needed since the fiber tree is a TREE, not a graph, but it makes me feel safer
-      if (visited.has(child)) {
-        continue;
-      }
-      visited.add(child);
-      tree.get(node)?.children.push(child);
-      queue.push([child, node]);
-    }
-  }
-  return tree;
-};
-
 const THROW_INVARIANTS = false;
 
 export const invariantError = (message: string | undefined) => {
diff --git a/packages/scan/src/core/notifications/performance.ts b/packages/scan/src/core/notifications/performance.ts
index 86259e4b..527142e8 100644
--- a/packages/scan/src/core/notifications/performance.ts
+++ b/packages/scan/src/core/notifications/performance.ts
@@ -1,31 +1,15 @@
-import {
-  Fiber,
-  getDisplayName,
-  getTimings,
-  hasMemoCache,
-  isHostFiber,
-  traverseFiber,
-} from 'bippy';
-import { Store } from '../..';
+import { Fiber, getDisplayName, getTimings, hasMemoCache, isHostFiber, traverseFiber } from "bippy";
+import { Store } from "../..";
 
-import {
-  BoundedArray,
-  invariantError,
-} from '~core/notifications/performance-utils';
+import { BoundedArray, invariantError } from "~core/notifications/performance-utils";
 import {
   SectionData,
   collectInspectorDataWithoutCounts,
-} from '~web/views/inspector/timeline/utils';
-import {
-  getFiberFromElement,
-  getParentCompositeFiber,
-} from '~web/views/inspector/utils';
-import { performanceEntryChannels } from './performance-store';
-import type {
-  PerformanceInteraction,
-  PerformanceInteractionEntry,
-} from './types';
-import { not_globally_unique_generateId } from '~core/utils';
+} from "~web/views/inspector/timeline/utils";
+import { getFiberFromElement, getParentCompositeFiber } from "~web/views/inspector/utils";
+import { performanceEntryChannels } from "./performance-store";
+import type { PerformanceInteraction, PerformanceInteractionEntry } from "./types";
+import { not_globally_unique_generateId } from "~core/utils";
 
 interface PathFilters {
   skipProviders: boolean;
@@ -75,13 +59,7 @@ const shouldIncludeInPath = (
   return !patternsToCheck.some((pattern) => pattern.test(name));
 };
 
-const minifiedPatterns = [
-  /^[a-z]$/,
-  /^[a-z][0-9]$/,
-  /^_+$/,
-  /^[A-Za-z][_$]$/,
-  /^[a-z]{1,2}$/,
-];
+const minifiedPatterns = [/^[a-z]$/, /^[a-z][0-9]$/, /^_+$/, /^[A-Za-z][_$]$/, /^[a-z]{1,2}$/];
 
 const isMinified = (name: string): boolean => {
   for (let i = 0; i < minifiedPatterns.length; i++) {
@@ -108,11 +86,8 @@ interface FiberType {
 
 const getCleanComponentName = (component: FiberType): string => {
   const name = getDisplayName(component);
-  if (!name) return '';
-  return name.replace(
-    /^(?:Memo|Forward(?:Ref)?|With.*?)\((?<inner>.*?)\)$/,
-    '$<inner>',
-  );
+  if (!name) return "";
+  return name.replace(/^(?:Memo|Forward(?:Ref)?|With.*?)\((?<inner>.*?)\)$/, "$<inner>");
 };
 
 const getInteractionPath = (
@@ -128,7 +103,12 @@ const getInteractionPath = (
   let fiber = initialFiber;
   while (fiber.return) {
     const name = getCleanComponentName(fiber.type);
-    if (name && !isMinified(name) && shouldIncludeInPath(name, filters) && name.toLowerCase() !== name) {
+    if (
+      name &&
+      !isMinified(name) &&
+      shouldIncludeInPath(name, filters) &&
+      name.toLowerCase() !== name
+    ) {
       stack.push(name);
     }
     fiber = fiber.return;
@@ -140,10 +120,7 @@ const getInteractionPath = (
   return fullPath;
 };
 
-const getFirstNameFromAncestor = (
-  fiber: Fiber,
-  accept: (name: string) => boolean = () => true,
-) => {
+const getFirstNameFromAncestor = (fiber: Fiber, accept: (name: string) => boolean = () => true) => {
   let curr: Fiber | null = fiber;
 
   while (curr) {
@@ -159,7 +136,7 @@ const getFirstNameFromAncestor = (
 
 let unsubscribeTrackVisibilityChange: (() => void) | undefined;
 // fixme: compress me if this stays here for bad interaction time checks
-let lastVisibilityHiddenAt: number | 'never-hidden' = 'never-hidden';
+let lastVisibilityHiddenAt: number | "never-hidden" = "never-hidden";
 
 const trackVisibilityChange = () => {
   unsubscribeTrackVisibilityChange?.();
@@ -168,10 +145,10 @@ const trackVisibilityChange = () => {
       lastVisibilityHiddenAt = Date.now();
     }
   };
-  document.addEventListener('visibilitychange', onVisibilityChange);
+  document.addEventListener("visibilitychange", onVisibilityChange);
 
   unsubscribeTrackVisibilityChange = () => {
-    document.removeEventListener('visibilitychange', onVisibilityChange);
+    document.removeEventListener("visibilitychange", onVisibilityChange);
   };
 };
 export type FiberRenders = Record<
@@ -200,8 +177,8 @@ export type FiberRenders = Record<
  */
 
 type InteractionStartStage = {
-  kind: 'interaction-start';
-  interactionType: 'pointer' | 'keyboard';
+  kind: "interaction-start";
+  interactionType: "pointer" | "keyboard";
   interactionUUID: string;
   interactionStartDetail: number;
   blockingTimeStart: number;
@@ -215,29 +192,29 @@ type InteractionStartStage = {
   stopListeningForRenders: () => void;
 };
 
-type JSEndStage = Omit<InteractionStartStage, 'kind'> & {
-  kind: 'js-end-stage';
+type JSEndStage = Omit<InteractionStartStage, "kind"> & {
+  kind: "js-end-stage";
   jsEndDetail: number;
 };
 
-type RAFStage = Omit<JSEndStage, 'kind'> & {
-  kind: 'raf-stage';
+type RAFStage = Omit<JSEndStage, "kind"> & {
+  kind: "raf-stage";
   rafStart: number;
 };
 
-export type TimeoutStage = Omit<RAFStage, 'kind'> & {
-  kind: 'timeout-stage';
+export type TimeoutStage = Omit<RAFStage, "kind"> & {
+  kind: "timeout-stage";
   commitEnd: number;
   blockingTimeEnd: number;
 };
 
 export type PerformanceEntryChannelEvent =
   | {
-      kind: 'entry-received';
+      kind: "entry-received";
       entry: PerformanceInteraction;
     }
   | {
-      kind: 'auto-complete-race';
+      kind: "auto-complete-race";
       interactionUUID: string;
       detailedTiming: TimeoutStage;
     };
@@ -250,61 +227,26 @@ export type CompletedInteraction = {
 };
 
 type UnInitializedStage = {
-  kind: 'uninitialized-stage';
+  kind: "uninitialized-stage";
   // todo: no longer a uuid
   interactionUUID: string;
-  interactionType: 'pointer' | 'keyboard';
+  interactionType: "pointer" | "keyboard";
 };
 
-type CurrentInteraction = {
-  kind: 'pointer' | 'keyboard';
-  interactionUUID: string;
-  pointerUpStart: number;
-  // needed for when inputs that can be clicked and trigger on change (like checkboxes)
-  clickChangeStart: number | null;
-  clickHandlerMicroTaskEnd: number | null;
-  rafStart: number | null;
-  commmitEnd: number | null;
-  timeorigin: number;
-
-  // for now i don't trust performance now timing for UTC time...
-  blockingTimeStart: number;
-  blockingTimeEnd: number | null;
-  fiberRenders: Map<
-    string,
-    {
-      renderCount: number;
-      parents: Set<string>;
-      selfTime: number;
-    }
-  >;
-  componentPath: Array<string>;
-  componentName: string;
-  childrenTree: Record<
-    string,
-    { children: Array<string>; firstNamedAncestor: string; isRoot: boolean }
-  >;
-};
-
-export let currentInteractions: Array<CurrentInteraction> = [];
-const getInteractionType = (
-  eventName: string,
-): 'pointer' | 'keyboard' | null => {
+const getInteractionType = (eventName: string): "pointer" | "keyboard" | null => {
   // todo: track pointer down, but tends to not house expensive logic so not very high priority
-  if (['pointerup', 'click'].includes(eventName)) {
-    return 'pointer';
+  if (["pointerup", "click"].includes(eventName)) {
+    return "pointer";
   }
-  if (eventName.includes('key')) {
+  if (eventName.includes("key")) {
   }
-  if (['keydown', 'keyup'].includes(eventName)) {
-    return 'keyboard';
+  if (["keydown", "keyup"].includes(eventName)) {
+    return "keyboard";
   }
   return null;
 };
 let onEntryAnimationId: number | null = null;
-const setupPerformanceListener = (
-  onEntry: (interaction: PerformanceInteraction) => void,
-) => {
+const setupPerformanceListener = (onEntry: (interaction: PerformanceInteraction) => void) => {
   trackVisibilityChange();
   const interactionMap = new Map<string, PerformanceInteraction>();
   const interactionTargetMap = new Map<string, Element>();
@@ -312,20 +254,13 @@ const setupPerformanceListener = (
   const processInteractionEntry = (entry: PerformanceInteractionEntry) => {
     if (!entry.interactionId) return;
 
-    if (
-      entry.interactionId &&
-      entry.target &&
-      !interactionTargetMap.has(entry.interactionId)
-    ) {
+    if (entry.interactionId && entry.target && !interactionTargetMap.has(entry.interactionId)) {
       interactionTargetMap.set(entry.interactionId, entry.target);
     }
     if (entry.target) {
       let current: Element | null = entry.target;
       while (current) {
-        if (
-          current.id === 'react-scan-toolbar-root' ||
-          current.id === 'react-scan-root'
-        ) {
+        if (current.id === "react-scan-toolbar-root" || current.id === "react-scan-root") {
           return;
         }
         current = current.parentElement;
@@ -363,13 +298,12 @@ const setupPerformanceListener = (
         duration: entry.duration,
         inputDelay: entry.processingStart - entry.startTime,
         processingDuration: entry.processingEnd - entry.processingStart,
-        presentationDelay:
-          entry.duration - (entry.processingEnd - entry.startTime),
+        presentationDelay: entry.duration - (entry.processingEnd - entry.startTime),
         // componentPath:
         timestamp: Date.now(),
         timeSinceTabInactive:
-          lastVisibilityHiddenAt === 'never-hidden'
-            ? 'never-hidden'
+          lastVisibilityHiddenAt === "never-hidden"
+            ? "never-hidden"
             : Date.now() - lastVisibilityHiddenAt,
         visibilityState: document.visibilityState,
         timeOrigin: performance.timeOrigin,
@@ -409,12 +343,12 @@ const setupPerformanceListener = (
 
   try {
     po.observe({
-      type: 'event',
+      type: "event",
       buffered: true,
       durationThreshold: 16,
     } as PerformanceObserverInit);
     po.observe({
-      type: 'first-input',
+      type: "first-input",
       buffered: true,
     });
   } catch {
@@ -428,22 +362,20 @@ export const setupPerformancePublisher = () => {
   return setupPerformanceListener((entry) => {
     performanceEntryChannels.publish(
       {
-        kind: 'entry-received',
+        kind: "entry-received",
         entry,
       },
-      'recording',
+      "recording",
     );
   });
 };
 
 // we should actually only feed it the information it needs to complete so we can support safari
 type Task = {
-  completeInteraction: (
-    entry: PerformanceEntryChannelEvent,
-  ) => CompletedInteraction;
+  completeInteraction: (entry: PerformanceEntryChannelEvent) => CompletedInteraction;
   startDateTime: number;
   endDateTime: number;
-  type: 'keyboard' | 'pointer';
+  type: "keyboard" | "pointer";
   interactionUUID: string;
 };
 export const MAX_INTERACTION_TASKS = 25;
@@ -481,26 +413,22 @@ export const listenForPerformanceEntryInteractions = (
   onComplete: (completedInteraction: CompletedInteraction) => void,
 ) => {
   // we make the assumption that the detailed timing will be ready before the performance timing
-  const unsubscribe = performanceEntryChannels.subscribe(
-    'recording',
-    (event) => {
-      const associatedDetailedInteraction =
-        event.kind === 'auto-complete-race'
-          ? tasks.find((task) => task.interactionUUID === event.interactionUUID)
-          : getAssociatedDetailedTimingInteraction(event.entry, tasks);
-
-      // REMINDME: this likely means we clicked a non interactable thing but our handler still ran
-      // so we shouldn't treat this as an invariant, but instead use it to verify if we clicked
-      // something interactable
-      if (!associatedDetailedInteraction) {
-        return;
-      }
+  const unsubscribe = performanceEntryChannels.subscribe("recording", (event) => {
+    const associatedDetailedInteraction =
+      event.kind === "auto-complete-race"
+        ? tasks.find((task) => task.interactionUUID === event.interactionUUID)
+        : getAssociatedDetailedTimingInteraction(event.entry, tasks);
+
+    // REMINDME: this likely means we clicked a non interactable thing but our handler still ran
+    // so we shouldn't treat this as an invariant, but instead use it to verify if we clicked
+    // something interactable
+    if (!associatedDetailedInteraction) {
+      return;
+    }
 
-      const completedInteraction =
-        associatedDetailedInteraction.completeInteraction(event);
-      onComplete(completedInteraction);
-    },
-  );
+    const completedInteraction = associatedDetailedInteraction.completeInteraction(event);
+    onComplete(completedInteraction);
+  });
 
   return unsubscribe;
 };
@@ -549,14 +477,10 @@ const getTargetInteractionDetails = (target: Element) => {
   }
 
   // TODO: if element is minified, squash upwards till first non minified ancestor, and set name as ChildOf(<parent-name>)
-  let componentName = associatedFiber
-    ? getDisplayName(associatedFiber?.type)
-    : 'N/A';
+  let componentName = associatedFiber ? getDisplayName(associatedFiber?.type) : "N/A";
 
   if (!componentName) {
-    componentName =
-      getFirstNameFromAncestor(associatedFiber, (name) => name.length > 2) ??
-      'N/A';
+    componentName = getFirstNameFromAncestor(associatedFiber, (name) => name.length > 2) ?? "N/A";
   }
 
   if (!componentName) {
@@ -574,13 +498,9 @@ const getTargetInteractionDetails = (target: Element) => {
 };
 
 type LastInteractionRef = {
-  current: (
-    | InteractionStartStage
-    | JSEndStage
-    | RAFStage
-    | TimeoutStage
-    | UnInitializedStage
-  ) & { stageStart: number };
+  current: (InteractionStartStage | JSEndStage | RAFStage | TimeoutStage | UnInitializedStage) & {
+    stageStart: number;
+  };
 };
 
 /**
@@ -588,7 +508,7 @@ type LastInteractionRef = {
  * handles tracking event timings for arbitrarily overlapping handlers with cancel logic
  */
 export const setupDetailedPointerTimingListener = (
-  kind: 'pointer' | 'keyboard',
+  kind: "pointer" | "keyboard",
   options: {
     onStart?: (interactionUUID: string) => void;
     onComplete?: (
@@ -606,35 +526,30 @@ export const setupDetailedPointerTimingListener = (
 ) => {
   let instrumentationIdInControl: string | null = null;
 
-  const getEvent = (
-    info: { phase: 'start' } | { phase: 'end'; target: Element },
-  ) => {
+  const getEvent = (info: { phase: "start" } | { phase: "end"; target: Element }) => {
     switch (kind) {
-      case 'pointer': {
-        if (info.phase === 'start') {
-          return 'pointerup';
+      case "pointer": {
+        if (info.phase === "start") {
+          return "pointerup";
         }
-        if (
-          info.target instanceof HTMLInputElement ||
-          info.target instanceof HTMLSelectElement
-        ) {
-          return 'change';
+        if (info.target instanceof HTMLInputElement || info.target instanceof HTMLSelectElement) {
+          return "change";
         }
-        return 'click';
+        return "click";
       }
-      case 'keyboard': {
-        if (info.phase === 'start') {
-          return 'keydown';
+      case "keyboard": {
+        if (info.phase === "start") {
+          return "keydown";
         }
 
-        return 'change';
+        return "change";
       }
     }
   };
 
   const lastInteractionRef: LastInteractionRef = {
     current: {
-      kind: 'uninitialized-stage',
+      kind: "uninitialized-stage",
       interactionUUID: not_globally_unique_generateId(), // the first interaction uses this
       stageStart: Date.now(),
       interactionType: kind,
@@ -643,23 +558,19 @@ export const setupDetailedPointerTimingListener = (
 
   const onInteractionStart = (e: Event) => {
     const path = e.composedPath();
-    if (
-      path.some(
-        (el) => el instanceof Element && el.id === 'react-scan-toolbar-root',
-      )
-    ) {
+    if (path.some((el) => el instanceof Element && el.id === "react-scan-toolbar-root")) {
       return;
     }
     if (Date.now() - lastInteractionRef.current.stageStart > 2000) {
       lastInteractionRef.current = {
-        kind: 'uninitialized-stage',
+        kind: "uninitialized-stage",
         interactionUUID: not_globally_unique_generateId(),
         stageStart: Date.now(),
         interactionType: kind,
       };
     }
 
-    if (lastInteractionRef.current.kind !== 'uninitialized-stage') {
+    if (lastInteractionRef.current.kind !== "uninitialized-stage") {
       return;
     }
 
@@ -673,7 +584,7 @@ export const setupDetailedPointerTimingListener = (
       return;
     }
 
-    const fiberRenders: InteractionStartStage['fiberRenders'] = {};
+    const fiberRenders: InteractionStartStage["fiberRenders"] = {};
     const stopListeningForRenders = listenForRenders(fiberRenders);
     lastInteractionRef.current = {
       ...lastInteractionRef.current,
@@ -683,12 +594,12 @@ export const setupDetailedPointerTimingListener = (
       componentName: details.componentName,
       componentPath: details.componentPath,
       fiberRenders,
-      kind: 'interaction-start',
+      kind: "interaction-start",
       interactionStartDetail: pointerUpStart,
       stopListeningForRenders,
     };
 
-    const event = getEvent({ phase: 'end', target: e.target as Element });
+    const event = getEvent({ phase: "end", target: e.target as Element });
     // oxlint-disable-next-line typescript/no-explicit-any
     document.addEventListener(event, onLastJS as any, {
       once: true,
@@ -705,7 +616,7 @@ export const setupDetailedPointerTimingListener = (
   };
 
   document.addEventListener(
-    getEvent({ phase: 'start' }),
+    getEvent({ phase: "start" }),
     // oxlint-disable-next-line typescript/no-explicit-any
     onInteractionStart as any,
     {
@@ -717,18 +628,14 @@ export const setupDetailedPointerTimingListener = (
    *
    * TODO: IF WE DETECT RENDERS DURING THIS PERIOD WE CAN INCLUDE THAT IN THE RESULT AND THEN BACK THAT OUT OF COMPUTED STYLE TIME AND ADD IT BACK INTO JS TIME
    */
-  const onLastJS = (
-    e: { target: Element },
-    instrumentationId: string,
-    abort: () => boolean,
-  ) => {
+  const onLastJS = (e: { target: Element }, instrumentationId: string, abort: () => boolean) => {
     if (
-      lastInteractionRef.current.kind !== 'interaction-start' &&
+      lastInteractionRef.current.kind !== "interaction-start" &&
       instrumentationId === instrumentationIdInControl
     ) {
-      if (kind === 'pointer' && e.target instanceof HTMLSelectElement) {
+      if (kind === "pointer" && e.target instanceof HTMLSelectElement) {
         lastInteractionRef.current = {
-          kind: 'uninitialized-stage',
+          kind: "uninitialized-stage",
           interactionUUID: not_globally_unique_generateId(),
           stageStart: Date.now(),
           interactionType: kind,
@@ -738,12 +645,12 @@ export const setupDetailedPointerTimingListener = (
 
       options?.onError?.(lastInteractionRef.current.interactionUUID);
       lastInteractionRef.current = {
-        kind: 'uninitialized-stage',
+        kind: "uninitialized-stage",
         interactionUUID: not_globally_unique_generateId(),
         stageStart: Date.now(),
         interactionType: kind,
       };
-      invariantError('pointer -> click');
+      invariantError("pointer -> click");
       return;
     }
 
@@ -752,26 +659,26 @@ export const setupDetailedPointerTimingListener = (
     trackDetailedTiming({
       abort,
       onMicroTask: () => {
-        if (lastInteractionRef.current.kind === 'uninitialized-stage') {
+        if (lastInteractionRef.current.kind === "uninitialized-stage") {
           return false;
         }
 
         lastInteractionRef.current = {
           ...lastInteractionRef.current,
-          kind: 'js-end-stage',
+          kind: "js-end-stage",
           jsEndDetail: performance.now(),
         };
         return true;
       },
       onRAF: () => {
         if (
-          lastInteractionRef.current.kind !== 'js-end-stage' &&
-          lastInteractionRef.current.kind !== 'raf-stage'
+          lastInteractionRef.current.kind !== "js-end-stage" &&
+          lastInteractionRef.current.kind !== "raf-stage"
         ) {
           options?.onError?.(lastInteractionRef.current.interactionUUID);
-          invariantError('bad transition to raf');
+          invariantError("bad transition to raf");
           lastInteractionRef.current = {
-            kind: 'uninitialized-stage',
+            kind: "uninitialized-stage",
             interactionUUID: not_globally_unique_generateId(),
             stageStart: Date.now(),
             interactionType: kind,
@@ -781,34 +688,34 @@ export const setupDetailedPointerTimingListener = (
 
         lastInteractionRef.current = {
           ...lastInteractionRef.current,
-          kind: 'raf-stage',
+          kind: "raf-stage",
           rafStart: performance.now(),
         };
 
         return true;
       },
       onTimeout: () => {
-        if (lastInteractionRef.current.kind !== 'raf-stage') {
+        if (lastInteractionRef.current.kind !== "raf-stage") {
           options?.onError?.(lastInteractionRef.current.interactionUUID);
           lastInteractionRef.current = {
-            kind: 'uninitialized-stage',
+            kind: "uninitialized-stage",
             interactionUUID: not_globally_unique_generateId(),
             stageStart: Date.now(),
             interactionType: kind,
           };
-          invariantError('raf->timeout');
+          invariantError("raf->timeout");
           return;
         }
         const now = Date.now();
         const timeoutStage: TimeoutStage = Object.freeze({
           ...lastInteractionRef.current,
-          kind: 'timeout-stage',
+          kind: "timeout-stage",
           blockingTimeEnd: now,
           commitEnd: performance.now(),
         });
 
         lastInteractionRef.current = {
-          kind: 'uninitialized-stage',
+          kind: "uninitialized-stage",
           interactionUUID: not_globally_unique_generateId(),
           stageStart: now,
           interactionType: kind,
@@ -818,9 +725,8 @@ export const setupDetailedPointerTimingListener = (
           completed = true;
 
           const latency =
-            event.kind === 'auto-complete-race'
-              ? event.detailedTiming.commitEnd -
-                event.detailedTiming.interactionStartDetail
+            event.kind === "auto-complete-race"
+              ? event.detailedTiming.commitEnd - event.detailedTiming.interactionStartDetail
               : event.entry.latency;
           const finalInteraction = {
             detailedTiming: timeoutStage,
@@ -829,11 +735,7 @@ export const setupDetailedPointerTimingListener = (
             flushNeeded: true,
           };
 
-          options?.onComplete?.(
-            timeoutStage.interactionUUID,
-            finalInteraction,
-            event,
-          );
+          options?.onComplete?.(timeoutStage.interactionUUID, finalInteraction, event);
           const newTasks = tasks.filter(
             (task) => task.interactionUUID !== timeoutStage.interactionUUID,
           );
@@ -857,7 +759,7 @@ export const setupDetailedPointerTimingListener = (
           );
           tasks = BoundedArray.fromArray(newTasks, MAX_INTERACTION_TASKS);
           completeInteraction({
-            kind: 'auto-complete-race',
+            kind: "auto-complete-race",
             // redundant
             detailedTiming: timeoutStage,
             interactionUUID: timeoutStage.interactionUUID,
@@ -868,7 +770,7 @@ export const setupDetailedPointerTimingListener = (
               return;
             }
             completeInteraction({
-              kind: 'auto-complete-race',
+              kind: "auto-complete-race",
               // redundant
               detailedTiming: timeoutStage,
               interactionUUID: timeoutStage.interactionUUID,
@@ -889,14 +791,14 @@ export const setupDetailedPointerTimingListener = (
     onLastJS(e, id, () => id !== instrumentationIdInControl);
   };
 
-  if (kind === 'keyboard') {
+  if (kind === "keyboard") {
     // oxlint-disable-next-line typescript/no-explicit-any
-    document.addEventListener('keypress', onKeyPress as any);
+    document.addEventListener("keypress", onKeyPress as any);
   }
 
   return () => {
     document.removeEventListener(
-      getEvent({ phase: 'start' }),
+      getEvent({ phase: "start" }),
       // oxlint-disable-next-line typescript/no-explicit-any
       onInteractionStart as any,
       {
@@ -904,7 +806,7 @@ export const setupDetailedPointerTimingListener = (
       },
     );
     // oxlint-disable-next-line typescript/no-explicit-any
-    document.removeEventListener('keypress', onKeyPress as any);
+    document.removeEventListener("keypress", onKeyPress as any);
   };
 };
 
@@ -918,12 +820,10 @@ const getHostFromFiber = (fiber: Fiber) => {
 };
 
 const isPerformanceEventAvailable = () => {
-  return 'PerformanceEventTiming' in globalThis;
+  return "PerformanceEventTiming" in globalThis;
 };
 
-export const listenForRenders = (
-  fiberRenders: InteractionStartStage['fiberRenders'],
-) => {
+export const listenForRenders = (fiberRenders: InteractionStartStage["fiberRenders"]) => {
   const listener = (fiber: Fiber) => {
     const displayName = getDisplayName(fiber.type);
     if (!displayName) {
@@ -960,7 +860,7 @@ export const listenForRenders = (
         nodeInfo: [
           {
             element: getHostFromFiber(fiber),
-            name: getDisplayName(fiber.type) ?? 'Unknown',
+            name: getDisplayName(fiber.type) ?? "Unknown",
             selfTime: getTimings(fiber).selfTime,
           },
         ],
@@ -989,8 +889,7 @@ export const listenForRenders = (
       changesCounts: new Map<string | number, number>(),
     };
 
-    existing.wasFiberRenderMount =
-      existing.wasFiberRenderMount || wasFiberRenderMount(fiber);
+    existing.wasFiberRenderMount = existing.wasFiberRenderMount || wasFiberRenderMount(fiber);
     existing.hasMemoCache = existing.hasMemoCache || hasMemoCache(fiber);
     existing.changes = {
       fiberProps: mergeSectionData(
@@ -1012,7 +911,7 @@ export const listenForRenders = (
     existing.totalTime += totalTime;
     existing.nodeInfo.push({
       element: getHostFromFiber(fiber),
-      name: getDisplayName(fiber.type) ?? 'Unknown',
+      name: getDisplayName(fiber.type) ?? "Unknown",
       selfTime: getTimings(fiber).selfTime,
     });
   };
@@ -1025,10 +924,7 @@ export const listenForRenders = (
   };
 };
 
-const mergeSectionData = (
-  existing: SectionData,
-  newData: SectionData,
-): SectionData => {
+const mergeSectionData = (existing: SectionData, newData: SectionData): SectionData => {
   const mergedSection: SectionData = {
     current: [...existing.current],
     changes: new Set<string | number>(),
@@ -1042,7 +938,7 @@ const mergeSectionData = (
   }
 
   for (const change of newData.changes) {
-    if (typeof change === 'string' || typeof change === 'number') {
+    if (typeof change === "string" || typeof change === "number") {
       mergedSection.changes.add(change);
       const existingCount = existing.changesCounts.get(change) || 0;
       const newCount = newData.changesCounts.get(change) || 0;
diff --git a/packages/scan/src/core/utils.ts b/packages/scan/src/core/utils.ts
index 3a4f11c1..d4ac2e2b 100644
--- a/packages/scan/src/core/utils.ts
+++ b/packages/scan/src/core/utils.ts
@@ -1,43 +1,6 @@
 // @ts-nocheck
-import { type Fiber, getType } from 'bippy';
-import { ReactScanInternals } from '~core/index';
-import type { AggregatedChange, AggregatedRender, Render } from './instrumentation';
-import { IS_CLIENT } from '~web/utils/constants';
-
-export const aggregateChanges = (
-  changes: Array<Change>,
-  prevAggregatedChange?: AggregatedChange,
-) => {
-  const newChange = {
-    type: prevAggregatedChange?.type ?? 0,
-    unstable: prevAggregatedChange?.unstable ?? false,
-  };
-  for (const change of changes) {
-    newChange.type |= change.type;
-    newChange.unstable = newChange.unstable || (change.unstable ?? false);
-  }
-
-  return newChange;
-};
-
-export const aggregateRender = (
-  newRender: Render,
-  prevAggregated: AggregatedRender,
-) => {
-  prevAggregated.changes = aggregateChanges(
-    newRender.changes,
-    prevAggregated.changes,
-  );
-  prevAggregated.aggregatedCount += 1;
-  prevAggregated.didCommit = prevAggregated.didCommit || newRender.didCommit;
-  prevAggregated.forget = prevAggregated.forget || newRender.forget;
-  prevAggregated.fps = prevAggregated.fps + newRender.fps;
-  prevAggregated.phase |= newRender.phase;
-  prevAggregated.time = (prevAggregated.time ?? 0) + (newRender.time ?? 0);
-
-  prevAggregated.unnecessary =
-    prevAggregated.unnecessary || newRender.unnecessary;
-};
+import type { AggregatedRender, Render } from "./instrumentation";
+import { IS_CLIENT } from "~web/utils/constants";
 
 function descending(a: number, b: number): number {
   return b - a;
@@ -81,10 +44,8 @@ function componentGroupHasForget(group: ComponentData[]): boolean {
   return false;
 }
 
-export const getLabelText = (
-  groupedAggregatedRenders: Array<AggregatedRender>,
-) => {
-  let labelText = '';
+export const getLabelText = (groupedAggregatedRenders: Array<AggregatedRender>) => {
+  let labelText = "";
 
   const componentsByCount = new Map<
     number,
@@ -117,7 +78,7 @@ export const getLabelText = (
     cumulativeTime += totalTime;
 
     if (componentGroup.length > 4) {
-      text += '…';
+      text += "…";
     }
 
     if (count > 1) {
@@ -131,7 +92,7 @@ export const getLabelText = (
     parts.push(text);
   }
 
-  labelText = parts.join(', ');
+  labelText = parts.join(", ");
 
   if (!labelText.length) return null;
 
@@ -146,23 +107,6 @@ export const getLabelText = (
   return labelText;
 };
 
-export const updateFiberRenderData = (fiber: Fiber, renders: Array<Render>) => {
-  ReactScanInternals.options.value.onRender?.(fiber, renders);
-  const type = getType(fiber.type) || fiber.type;
-  if (type && (typeof type === 'function' || typeof type === 'object')) {
-    const renderData = (type.renderData || {
-      count: 0,
-      time: 0,
-      renders: [],
-    }) as RenderData;
-    const firstRender = renders[0];
-    renderData.count += firstRender.count;
-    renderData.time += firstRender.time ?? 0;
-    renderData.renders.push(firstRender);
-    type.renderData = renderData;
-  }
-};
-
 export interface RenderData {
   count: number;
   time: number;
@@ -178,7 +122,7 @@ export function isEqual(a: unknown, b: unknown): boolean {
 
 export const not_globally_unique_generateId = () => {
   if (!IS_CLIENT) {
-    return '0';
+    return "0";
   }
 
   // @ts-expect-error
@@ -198,7 +142,7 @@ export const playNotificationSound = (audioContext: AudioContext) => {
   gainNode.connect(audioContext.destination);
 
   const options = {
-    type: 'sine' as OscillatorType,
+    type: "sine" as OscillatorType,
     freq: [
       392,
       //  523.25,
@@ -213,20 +157,13 @@ export const playNotificationSound = (audioContext: AudioContext) => {
   const timePerNote = options.duration / frequencies.length;
 
   frequencies.forEach((freq, i) => {
-    oscillator.frequency.setValueAtTime(
-      freq,
-      audioContext.currentTime + i * timePerNote,
-    );
+    oscillator.frequency.setValueAtTime(freq, audioContext.currentTime + i * timePerNote);
   });
 
   oscillator.type = options.type;
   gainNode.gain.setValueAtTime(options.gain, audioContext.currentTime);
 
-  gainNode.gain.setTargetAtTime(
-    0,
-    audioContext.currentTime + options.duration * 0.7,
-    0.05,
-  );
+  gainNode.gain.setTargetAtTime(0, audioContext.currentTime + options.duration * 0.7, 0.05);
 
   oscillator.start();
   oscillator.stop(audioContext.currentTime + options.duration);
diff --git a/packages/scan/src/lite/index.ts b/packages/scan/src/lite/index.ts
index 6ab91159..e2a02ca1 100644
--- a/packages/scan/src/lite/index.ts
+++ b/packages/scan/src/lite/index.ts
@@ -3,22 +3,19 @@ import {
   type ReactRenderer,
   getRDTHook,
   isRealReactDevtools,
-} from 'bippy';
-import type { SchedulerPriorityLevel } from './types';
-import {
-  DEFAULT_MAX_FIBERS_PER_COMMIT,
-  DEFAULT_MIN_FIBER_ACTUAL_DURATION_MS,
-} from './constants';
-import { createEmitter } from './create-emitter';
-import { createProfilingHooks } from './create-profiling-hooks';
-import { createLaneLabelTranslator } from './lane-labels';
+} from "bippy";
+import { DEFAULT_MAX_FIBERS_PER_COMMIT, DEFAULT_MIN_FIBER_ACTUAL_DURATION_MS } from "./constants";
+import { createEmitter } from "./create-emitter";
+import { createProfilingHooks } from "./create-profiling-hooks";
+import { createLaneLabelTranslator } from "./lane-labels";
 import type {
   LiteHandle,
   LiteOptions,
   ProfilingHooks,
   ReactRendererWithProfiling,
-} from './types';
-import { walkFiber } from './walk-fiber';
+  SchedulerPriorityLevel,
+} from "./types";
+import { walkFiber } from "./walk-fiber";
 
 const noopHandle: LiteHandle = {
   stop: () => {},
@@ -28,13 +25,13 @@ const noopHandle: LiteHandle = {
 
 interface ProfilingAttachOutcome {
   available: boolean;
-  reason?: 'no-inject-method' | 'threw' | 'opted-out';
+  reason?: "no-inject-method" | "threw" | "opted-out";
   error?: string;
 }
 
 const errorToMessage = (cause: unknown): string => {
   if (cause instanceof Error) return cause.message;
-  if (typeof cause === 'string') return cause;
+  if (typeof cause === "string") return cause;
   try {
     return JSON.stringify(cause);
   } catch {
@@ -47,35 +44,33 @@ const tryInjectProfilingHooks = (
   profilingHooks: ProfilingHooks,
 ): ProfilingAttachOutcome => {
   const rendererWithProfiling = renderer as ReactRendererWithProfiling;
-  if (typeof rendererWithProfiling.injectProfilingHooks !== 'function') {
-    return { available: false, reason: 'no-inject-method' };
+  if (typeof rendererWithProfiling.injectProfilingHooks !== "function") {
+    return { available: false, reason: "no-inject-method" };
   }
   try {
     rendererWithProfiling.injectProfilingHooks(profilingHooks);
     return { available: true };
   } catch (cause) {
-    return { available: false, reason: 'threw', error: errorToMessage(cause) };
+    return { available: false, reason: "threw", error: errorToMessage(cause) };
   }
 };
 
 const isValidEndpointUrl = (candidate: string): boolean => {
   try {
     const parsed = new URL(candidate);
-    return parsed.protocol === 'http:' || parsed.protocol === 'https:';
+    return parsed.protocol === "http:" || parsed.protocol === "https:";
   } catch {
     return false;
   }
 };
 
 export const instrument = (options: LiteOptions = {}): LiteHandle => {
-  if (typeof window === 'undefined') return noopHandle;
+  if (typeof window === "undefined") return noopHandle;
   if (window.__REACT_SCAN_LITE__) return window.__REACT_SCAN_LITE__;
 
   if (options.endpoint && !options.sessionId) {
     // oxlint-disable-next-line no-console
-    console.warn(
-      '[react-scan/lite] `endpoint` requires `sessionId`; events will not be POSTed.',
-    );
+    console.warn("[react-scan/lite] `endpoint` requires `sessionId`; events will not be POSTed.");
   }
 
   // Validate the endpoint URL once at instrument() time and DROP it on failure
@@ -86,7 +81,7 @@ export const instrument = (options: LiteOptions = {}): LiteHandle => {
   if (effectiveEndpoint && !isValidEndpointUrl(effectiveEndpoint)) {
     // oxlint-disable-next-line no-console
     console.error(
-      '[react-scan/lite] `endpoint` is not a valid http(s) URL; events will not be POSTed.',
+      "[react-scan/lite] `endpoint` is not a valid http(s) URL; events will not be POSTed.",
     );
     effectiveEndpoint = undefined;
   }
@@ -99,7 +94,7 @@ export const instrument = (options: LiteOptions = {}): LiteHandle => {
   ) {
     // oxlint-disable-next-line no-console
     console.warn(
-      '[react-scan/lite] `includeFiberTree: false` disables per-fiber enrichment options (`recordChangeDescriptions`, `includeFiberSource`, `includeFiberIdentity`). Remove `includeFiberTree: false` to enable them.',
+      "[react-scan/lite] `includeFiberTree: false` disables per-fiber enrichment options (`recordChangeDescriptions`, `includeFiberSource`, `includeFiberIdentity`). Remove `includeFiberTree: false` to enable them.",
     );
   }
 
@@ -145,11 +140,11 @@ export const instrument = (options: LiteOptions = {}): LiteHandle => {
     attachedRenderers.add(renderer);
     const outcome: ProfilingAttachOutcome = includeProfilingHooks
       ? tryInjectProfilingHooks(renderer, profilingHooks)
-      : { available: false, reason: 'opted-out' };
-    emitter.emit('renderer-injected', {
+      : { available: false, reason: "opted-out" };
+    emitter.emit("renderer-injected", {
       data: { version: renderer.version, bundleType: renderer.bundleType },
     });
-    emitter.emit('profiling-hooks-status', {
+    emitter.emit("profiling-hooks-status", {
       available: outcome.available,
       reason: outcome.reason,
       error: outcome.error,
@@ -169,7 +164,7 @@ export const instrument = (options: LiteOptions = {}): LiteHandle => {
   if (includeProfilingHooks && isRealReactDevtools(hook)) {
     // oxlint-disable-next-line no-console
     console.warn(
-      '[react-scan/lite] React DevTools is also attached. Calling injectProfilingHooks replaces its profiling channel; the DevTools Timeline Profiler may stop receiving events while this instrumentation is active.',
+      "[react-scan/lite] React DevTools is also attached. Calling injectProfilingHooks replaces its profiling channel; the DevTools Timeline Profiler may stop receiving events while this instrumentation is active.",
     );
   }
 
@@ -195,12 +190,7 @@ export const instrument = (options: LiteOptions = {}): LiteHandle => {
     didError?: boolean,
   ) => void;
 
-  const ourOnCommitFiberRoot: WidenedOnCommitFiberRoot = (
-    rendererId,
-    root,
-    priority,
-    didError,
-  ) => {
+  const ourOnCommitFiberRoot: WidenedOnCommitFiberRoot = (rendererId, root, priority, didError) => {
     if (originalOnCommitFiberRoot) {
       try {
         (originalOnCommitFiberRoot as WidenedOnCommitFiberRoot).call(
@@ -223,7 +213,7 @@ export const instrument = (options: LiteOptions = {}): LiteHandle => {
           isCancelled: () => isStopped,
         })
       : undefined;
-    emitter.emit('commit', {
+    emitter.emit("commit", {
       rendererId,
       // HACK: bippy types `priority` as `number | void`. React actually
       // passes a Scheduler priority (1-5); narrow to `SchedulerPriorityLevel`.
@@ -233,35 +223,28 @@ export const instrument = (options: LiteOptions = {}): LiteHandle => {
     });
   };
 
-  const ourOnPostCommitFiberRoot: typeof hook.onPostCommitFiberRoot = (
-    rendererId,
-    root,
-  ) => {
+  const ourOnPostCommitFiberRoot: typeof hook.onPostCommitFiberRoot = (rendererId, root) => {
     if (originalOnPostCommitFiberRoot) {
       try {
         originalOnPostCommitFiberRoot.call(hook, rendererId, root);
       } catch {}
     }
     if (isStopped) return;
-    emitter.emit('post-commit', { rendererId });
+    emitter.emit("post-commit", { rendererId });
   };
 
-  const ourOnCommitFiberUnmount: typeof hook.onCommitFiberUnmount = (
-    rendererId,
-    fiber,
-  ) => {
+  const ourOnCommitFiberUnmount: typeof hook.onCommitFiberUnmount = (rendererId, fiber) => {
     if (originalOnCommitFiberUnmount) {
       try {
         originalOnCommitFiberUnmount.call(hook, rendererId, fiber);
       } catch {}
     }
     if (isStopped) return;
-    emitter.emit('fiber-unmount', { rendererId });
+    emitter.emit("fiber-unmount", { rendererId });
   };
 
   hook.inject = ourInject;
-  hook.onCommitFiberRoot =
-    ourOnCommitFiberRoot as typeof hook.onCommitFiberRoot;
+  hook.onCommitFiberRoot = ourOnCommitFiberRoot as typeof hook.onCommitFiberRoot;
   hook.onPostCommitFiberRoot = ourOnPostCommitFiberRoot;
   hook.onCommitFiberUnmount = ourOnCommitFiberUnmount;
 
@@ -272,9 +255,7 @@ export const instrument = (options: LiteOptions = {}): LiteHandle => {
       if (isStopped) return;
       isStopped = true;
       if (hook.inject === ourInject) hook.inject = originalInject;
-      if (
-        (hook.onCommitFiberRoot as unknown) === (ourOnCommitFiberRoot as unknown)
-      ) {
+      if ((hook.onCommitFiberRoot as unknown) === (ourOnCommitFiberRoot as unknown)) {
         hook.onCommitFiberRoot = originalOnCommitFiberRoot;
       }
       if (hook.onPostCommitFiberRoot === ourOnPostCommitFiberRoot) {
@@ -309,4 +290,4 @@ export type {
   LiteOptions,
   ProfilingHooksUnavailableReason,
   SchedulerPriorityLevel,
-} from './types';
+} from "./types";
diff --git a/packages/scan/src/new-outlines/canvas.ts b/packages/scan/src/new-outlines/canvas.ts
index 30d21c28..cab5bda6 100644
--- a/packages/scan/src/new-outlines/canvas.ts
+++ b/packages/scan/src/new-outlines/canvas.ts
@@ -1,8 +1,7 @@
-import type { ActiveOutline, OutlineData } from './types';
+import type { ActiveOutline, OutlineData } from "./types";
 
 export const OUTLINE_ARRAY_SIZE = 7;
-const MONO_FONT =
-  'Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace';
+const MONO_FONT = "Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace";
 
 const INTERPOLATION_SPEED = 0.2;
 const SNAP_THRESHOLD = 0.5;
@@ -16,28 +15,26 @@ const MAX_PARTS_LENGTH = 4;
 const MAX_LABEL_LENGTH = 40;
 const TOTAL_FRAMES = 45;
 
-const PRIMARY_COLOR = '115,97,230';
+const PRIMARY_COLOR = "115,97,230";
 
 function sortEntry(prev: [number, string[]], next: [number, string[]]): number {
   return next[0] - prev[0];
 }
 
-function getSortedEntries(
-  countByNames: Map<number, string[]>,
-): [number, string[]][] {
+function getSortedEntries(countByNames: Map<number, string[]>): [number, string[]][] {
   const entries = [...countByNames.entries()];
   return entries.sort(sortEntry);
 }
 
 function getLabelTextPart([count, names]: [number, string[]]): string {
-  let part = `${names.slice(0, MAX_PARTS_LENGTH).join(', ')} ×${count}`;
+  let part = `${names.slice(0, MAX_PARTS_LENGTH).join(", ")} ×${count}`;
   if (part.length > MAX_LABEL_LENGTH) {
     part = `${part.slice(0, MAX_LABEL_LENGTH)}…`;
   }
   return part;
 }
 
-export const getLabelText = (outlines: ActiveOutline[]): string => {
+const getLabelText = (outlines: ActiveOutline[]): string => {
   const nameByCount = new Map<string, number>();
   for (const { name, count } of outlines) {
     nameByCount.set(name, (nameByCount.get(name) || 0) + count);
@@ -57,7 +54,7 @@ export const getLabelText = (outlines: ActiveOutline[]): string => {
   const partsEntries = getSortedEntries(countByNames);
   let labelText = getLabelTextPart(partsEntries[0]);
   for (let i = 1, len = partsEntries.length; i < len; i++) {
-    labelText += ', ' + getLabelTextPart(partsEntries[i]);
+    labelText += ", " + getLabelTextPart(partsEntries[i]);
   }
 
   if (labelText.length > MAX_LABEL_LENGTH) {
@@ -67,7 +64,7 @@ export const getLabelText = (outlines: ActiveOutline[]): string => {
   return labelText;
 };
 
-export const getAreaFromOutlines = (outlines: ActiveOutline[]) => {
+const getAreaFromOutlines = (outlines: ActiveOutline[]) => {
   let area = 0;
   for (const outline of outlines) {
     area += outline.width * outline.height;
@@ -125,11 +122,8 @@ export const updateScroll = (
   }
 };
 
-export const initCanvas = (
-  canvas: HTMLCanvasElement | OffscreenCanvas,
-  dpr: number,
-) => {
-  const ctx = canvas.getContext('2d', { alpha: true }) as
+export const initCanvas = (canvas: HTMLCanvasElement | OffscreenCanvas, dpr: number) => {
+  const ctx = canvas.getContext("2d", { alpha: true }) as
     | CanvasRenderingContext2D
     | OffscreenCanvasRenderingContext2D;
   if (ctx) {
@@ -159,17 +153,7 @@ export const drawCanvas = (
   >();
 
   for (const outline of activeOutlines.values()) {
-    const {
-      x,
-      y,
-      width,
-      height,
-      targetX,
-      targetY,
-      targetWidth,
-      targetHeight,
-      frame,
-    } = outline;
+    const { x, y, width, height, targetX, targetY, targetWidth, targetHeight, frame } = outline;
     if (targetX !== x) {
       outline.x = lerp(x, targetX);
     }
@@ -242,7 +226,7 @@ export const drawCanvas = (
     }
   >();
 
-  ctx.textRendering = 'optimizeSpeed';
+  ctx.textRendering = "optimizeSpeed";
 
   // TODO(Alexis): optimizable?
   for (const outlines of groupedOutlinesMap.values()) {
@@ -276,11 +260,9 @@ export const drawCanvas = (
   }
 
   // TODO(Alexis): optimize
-  const sortedLabels = Array.from(labelMap.entries()).sort(
-    ([_, a], [__, b]) => {
-      return getAreaFromOutlines(b.outlines) - getAreaFromOutlines(a.outlines);
-    },
-  );
+  const sortedLabels = Array.from(labelMap.entries()).sort(([_, a], [__, b]) => {
+    return getAreaFromOutlines(b.outlines) - getAreaFromOutlines(a.outlines);
+  });
 
   for (const [labelKey, label] of sortedLabels) {
     if (!labelMap.has(labelKey)) continue;
@@ -289,12 +271,7 @@ export const drawCanvas = (
       if (labelKey === otherKey) continue;
 
       const { x, y, width, height } = label;
-      const {
-        x: otherX,
-        y: otherY,
-        width: otherWidth,
-        height: otherHeight,
-      } = otherLabel;
+      const { x: otherX, y: otherY, width: otherWidth, height: otherHeight } = otherLabel;
 
       if (
         x + width > otherX &&
diff --git a/packages/scan/src/new-outlines/index.ts b/packages/scan/src/new-outlines/index.ts
index 6d1e1630..63df5e57 100644
--- a/packages/scan/src/new-outlines/index.ts
+++ b/packages/scan/src/new-outlines/index.ts
@@ -7,7 +7,7 @@ import {
   getTimings,
   getType,
   isCompositeFiber,
-} from 'bippy';
+} from "bippy";
 import {
   Change,
   ContextChange,
@@ -15,28 +15,22 @@ import {
   ReactScanInternals,
   Store,
   ignoredProps,
-} from '~core/index';
+} from "~core/index";
 import {
   ChangeReason,
   createInstrumentation,
   getContextChanges,
   getStateChanges,
   OldRenderData,
-} from '~core/instrumentation';
-import { log, logIntro } from '~web/utils/log';
-import { inspectorUpdateSignal } from '~web/views/inspector/states';
-import {
-  OUTLINE_ARRAY_SIZE,
-  drawCanvas,
-  initCanvas,
-  updateOutlines,
-  updateScroll,
-} from './canvas';
-import type { ActiveOutline, BlueprintOutline, OutlineData } from './types';
-import { getChangedPropsDetailed } from '~web/views/inspector/utils';
+} from "~core/instrumentation";
+import { log, logIntro } from "~web/utils/log";
+import { inspectorUpdateSignal } from "~web/views/inspector/states";
+import { OUTLINE_ARRAY_SIZE, drawCanvas, initCanvas, updateOutlines, updateScroll } from "./canvas";
+import type { ActiveOutline, BlueprintOutline, OutlineData } from "./types";
+import { getChangedPropsDetailed } from "~web/views/inspector/utils";
 
 // The worker code will be replaced at build time
-const workerCode = '__WORKER_CODE__';
+const workerCode = "__WORKER_CODE__";
 
 let worker: Worker | null = null;
 let canvas: HTMLCanvasElement | null = null;
@@ -48,10 +42,9 @@ const activeOutlines = new Map<string, ActiveOutline>();
 const blueprintMap = new Map<Fiber, BlueprintOutline>();
 const blueprintMapKeys = new Set<Fiber>();
 
-export const outlineFiber = (fiber: Fiber) => {
+const outlineFiber = (fiber: Fiber) => {
   if (!isCompositeFiber(fiber)) return;
-  const name =
-    typeof fiber.type === 'string' ? fiber.type : getDisplayName(fiber);
+  const name = typeof fiber.type === "string" ? fiber.type : getDisplayName(fiber);
   if (!name) return;
   const blueprint = blueprintMap.get(fiber);
   const nearestFibers = getNearestHostFibers(fiber);
@@ -83,12 +76,8 @@ const mergeRects = (rects: DOMRect[]) => {
     const rect = rects[i];
     minX = minX == null ? rect.x : Math.min(minX, rect.x);
     minY = minY == null ? rect.y : Math.min(minY, rect.y);
-    maxX =
-      maxX == null ? rect.x + rect.width : Math.max(maxX, rect.x + rect.width);
-    maxY =
-      maxY == null
-        ? rect.y + rect.height
-        : Math.max(maxY, rect.y + rect.height);
+    maxX = maxX == null ? rect.x + rect.width : Math.max(maxX, rect.x + rect.width);
+    maxY = maxY == null ? rect.y + rect.height : Math.max(maxY, rect.y + rect.height);
   }
 
   if (minX == null || minY == null || maxX == null || maxY == null) {
@@ -150,11 +139,9 @@ export const getBatchedRectMap = async function* (
   }
 
   while (!state.done) {
-    const entries = await new Promise<IntersectionObserverEntry[]>(
-      (resolve) => {
-        state.resolveNext = resolve;
-      },
-    );
+    const entries = await new Promise<IntersectionObserverEntry[]>((resolve) => {
+      state.resolveNext = resolve;
+    });
     if (entries.length > 0) {
       yield entries;
     }
@@ -162,9 +149,9 @@ export const getBatchedRectMap = async function* (
 };
 
 const SupportedArrayBuffer =
-  typeof SharedArrayBuffer !== 'undefined' ? SharedArrayBuffer : ArrayBuffer;
+  typeof SharedArrayBuffer !== "undefined" ? SharedArrayBuffer : ArrayBuffer;
 
-export const flushOutlines = async () => {
+const flushOutlines = async () => {
   const elements: Element[] = [];
 
   for (const fiber of blueprintMapKeys) {
@@ -215,9 +202,7 @@ export const flushOutlines = async () => {
     }
 
     if (blueprints.length > 0) {
-      const arrayBuffer = new SupportedArrayBuffer(
-        blueprints.length * OUTLINE_ARRAY_SIZE * 4,
-      );
+      const arrayBuffer = new SupportedArrayBuffer(blueprints.length * OUTLINE_ARRAY_SIZE * 4);
       const sharedView = new Float32Array(arrayBuffer);
       const blueprintNames = new Array(blueprints.length);
       let outlineData: OutlineData[] | undefined;
@@ -255,7 +240,7 @@ export const flushOutlines = async () => {
 
       if (worker) {
         worker.postMessage({
-          type: 'draw-outlines',
+          type: "draw-outlines",
           data: arrayBuffer,
           names: blueprintNames,
         });
@@ -287,25 +272,25 @@ const draw = () => {
 };
 
 const IS_OFFSCREEN_CANVAS_WORKER_SUPPORTED =
-  typeof OffscreenCanvas !== 'undefined' && typeof Worker !== 'undefined';
+  typeof OffscreenCanvas !== "undefined" && typeof Worker !== "undefined";
 
 const getDpr = () => {
   return Math.min(window.devicePixelRatio || 1, 2);
 };
 
-export const getCanvasEl = () => {
+const getCanvasEl = () => {
   cleanup();
-  const host = document.createElement('div');
-  host.setAttribute('data-react-scan', 'true');
-  const shadowRoot = host.attachShadow({ mode: 'open' });
-
-  const canvasEl = document.createElement('canvas');
-  canvasEl.style.position = 'fixed';
-  canvasEl.style.top = '0';
-  canvasEl.style.left = '0';
-  canvasEl.style.pointerEvents = 'none';
-  canvasEl.style.zIndex = '2147483646';
-  canvasEl.setAttribute('aria-hidden', 'true');
+  const host = document.createElement("div");
+  host.setAttribute("data-react-scan", "true");
+  const shadowRoot = host.attachShadow({ mode: "open" });
+
+  const canvasEl = document.createElement("canvas");
+  canvasEl.style.position = "fixed";
+  canvasEl.style.top = "0";
+  canvasEl.style.left = "0";
+  canvasEl.style.pointerEvents = "none";
+  canvasEl.style.zIndex = "2147483646";
+  canvasEl.setAttribute("aria-hidden", "true");
   shadowRoot.appendChild(canvasEl);
 
   if (!canvasEl) return null;
@@ -323,24 +308,19 @@ export const getCanvasEl = () => {
 
   // Users on a strict CSP without `worker-src blob:` (see #372) can opt out;
   // we still render outlines on the main thread via `initCanvas` below.
-  const workerOptOut =
-    ReactScanInternals.options.value.useOffscreenCanvasWorker === false;
-
-  if (
-    IS_OFFSCREEN_CANVAS_WORKER_SUPPORTED &&
-    !window.__REACT_SCAN_EXTENSION__ &&
-    !workerOptOut
-  ) {
+  const workerOptOut = ReactScanInternals.options.value.useOffscreenCanvasWorker === false;
+
+  if (IS_OFFSCREEN_CANVAS_WORKER_SUPPORTED && !window.__REACT_SCAN_EXTENSION__ && !workerOptOut) {
     try {
       const blobUrl = URL.createObjectURL(
-        new Blob([workerCode], { type: 'application/javascript' }),
+        new Blob([workerCode], { type: "application/javascript" }),
       );
       worker = new Worker(blobUrl);
 
       const offscreenCanvas = canvasEl.transferControlToOffscreen();
       worker.postMessage(
         {
-          type: 'init',
+          type: "init",
           canvas: offscreenCanvas,
           width: canvasEl.width,
           height: canvasEl.height,
@@ -353,9 +333,9 @@ export const getCanvasEl = () => {
       // The fallback below renders fine on the main thread, so log only when
       // the user explicitly asked for verbose diagnostics.
       worker = null;
-      if (ReactScanInternals.options.value._debug === 'verbose') {
+      if (ReactScanInternals.options.value._debug === "verbose") {
         // oxlint-disable-next-line no-console
-        console.warn('Failed to initialize OffscreenCanvas worker:', error);
+        console.warn("Failed to initialize OffscreenCanvas worker:", error);
       }
     }
     // The blob URL stays alive until the worker is GC'd. Revoking
@@ -369,7 +349,7 @@ export const getCanvasEl = () => {
   }
 
   let isResizeScheduled = false;
-  window.addEventListener('resize', () => {
+  window.addEventListener("resize", () => {
     if (!isResizeScheduled) {
       isResizeScheduled = true;
       // TODO(Alexis): bindable
@@ -381,7 +361,7 @@ export const getCanvasEl = () => {
         canvasEl.style.height = `${height}px`;
         if (worker) {
           worker.postMessage({
-            type: 'resize',
+            type: "resize",
             width,
             height,
             dpr,
@@ -404,7 +384,7 @@ export const getCanvasEl = () => {
   let prevScrollY = window.scrollY;
   let isScrollScheduled = false;
 
-  window.addEventListener('scroll', () => {
+  window.addEventListener("scroll", () => {
     if (!isScrollScheduled) {
       isScrollScheduled = true;
       // TODO(Alexis): bindable
@@ -416,14 +396,12 @@ export const getCanvasEl = () => {
         prevScrollY = scrollY;
         if (worker) {
           worker.postMessage({
-            type: 'scroll',
+            type: "scroll",
             deltaX,
             deltaY,
           });
         } else {
-          requestAnimationFrame(
-            updateScroll.bind(null, activeOutlines, deltaX, deltaY),
-          );
+          requestAnimationFrame(updateScroll.bind(null, activeOutlines, deltaX, deltaY));
         }
         isScrollScheduled = false;
       }, 16 * 2);
@@ -440,17 +418,12 @@ export const getCanvasEl = () => {
   return host;
 };
 
-export const hasStopped = () => {
+const hasStopped = () => {
   return globalThis.__REACT_SCAN_STOP__;
 };
 
-export const stop = () => {
-  globalThis.__REACT_SCAN_STOP__ = true;
-  cleanup();
-};
-
-export const cleanup = () => {
-  const host = document.querySelector('[data-react-scan]');
+const cleanup = () => {
+  const host = document.querySelector("[data-react-scan]");
   if (host) {
     host.remove();
   }
@@ -461,7 +434,7 @@ const reportRenderToListeners = (fiber: Fiber) => {
     // report render has a non trivial cost because it calls Date.now(), so we want to avoid the computation if possible
     if (
       ReactScanInternals.options.value.showToolbar !== false &&
-      Store.inspectState.value.kind === 'focused'
+      Store.inspectState.value.kind === "focused"
     ) {
       const reportFiber = fiber;
       const { selfTime } = getTimings(fiber);
@@ -478,9 +451,7 @@ const reportRenderToListeners = (fiber: Fiber) => {
       const listeners = Store.changesListeners.get(getFiberId(fiber));
 
       if (listeners?.length) {
-        const propsChanges: Array<PropsChange> = getChangedPropsDetailed(
-          fiber,
-        ).map((change) => ({
+        const propsChanges: Array<PropsChange> = getChangedPropsDetailed(fiber).map((change) => ({
           type: ChangeReason.Props,
           name: change.name,
           value: change.value,
@@ -494,14 +465,12 @@ const reportRenderToListeners = (fiber: Fiber) => {
         // currently, we say every context change, regardless of the render it happened, is a change. Which requires us to hack change tracking
         // in the whats-changed toolbar component
         const fiberContext = getContextChanges(fiber);
-        const contextChanges: Array<ContextChange> = fiberContext.map(
-          (info) => ({
-            name: info.name,
-            type: ChangeReason.Context,
-            value: info.value,
-            contextType: info.contextType,
-          }),
-        );
+        const contextChanges: Array<ContextChange> = fiberContext.map((info) => ({
+          name: info.name,
+          type: ChangeReason.Context,
+          value: info.value,
+          contextType: info.contextType,
+        }));
 
         listeners.forEach((listener) => {
           listener({
@@ -528,7 +497,7 @@ const reportRenderToListeners = (fiber: Fiber) => {
 
 let needsReport = false;
 let reportInterval: ReturnType<typeof setInterval>;
-export const startReportInterval = () => {
+const startReportInterval = () => {
   clearInterval(reportInterval);
   reportInterval = setInterval(() => {
     if (needsReport) {
@@ -538,7 +507,7 @@ export const startReportInterval = () => {
   }, 50);
 };
 
-export const isValidFiber = (fiber: Fiber) => {
+const isValidFiber = (fiber: Fiber) => {
   if (ignoredProps.has(fiber.memoizedProps)) {
     return false;
   }
@@ -572,7 +541,7 @@ export const initReactScanInstrumentation = (setupToolbar: () => void) => {
     }); // TODO(Alexis): perhaps a better timing
   };
 
-  const instrumentation = createInstrumentation('react-scan-devtools-0.1.0', {
+  const instrumentation = createInstrumentation("react-scan-devtools-0.1.0", {
     onCommitStart: () => {
       ReactScanInternals.options.value.onCommitStart?.();
     },
@@ -601,11 +570,10 @@ export const initReactScanInstrumentation = (setupToolbar: () => void) => {
       if (isCompositeFiber(fiber)) {
         Store.interactionListeningForRenders?.(fiber, renders);
       }
-      const isOverlayPaused =
-        ReactScanInternals.instrumentation?.isPaused.value;
+      const isOverlayPaused = ReactScanInternals.instrumentation?.isPaused.value;
       const isInspectorInactive =
-        Store.inspectState.value.kind === 'inspect-off' ||
-        Store.inspectState.value.kind === 'uninitialized';
+        Store.inspectState.value.kind === "inspect-off" ||
+        Store.inspectState.value.kind === "uninitialized";
       const shouldFullyAbort = isOverlayPaused && isInspectorInactive;
 
       if (shouldFullyAbort) {
@@ -619,7 +587,7 @@ export const initReactScanInstrumentation = (setupToolbar: () => void) => {
         log(renders);
       }
 
-      if (Store.inspectState.value.kind === 'focused') {
+      if (Store.inspectState.value.kind === "focused") {
         inspectorUpdateSignal.value = Date.now();
       }
       if (!isInspectorInactive) {
diff --git a/packages/scan/src/new-outlines/types.ts b/packages/scan/src/new-outlines/types.ts
index 1d54f343..ec7061bd 100644
--- a/packages/scan/src/new-outlines/types.ts
+++ b/packages/scan/src/new-outlines/types.ts
@@ -9,16 +9,6 @@ export interface OutlineData {
   didCommit: 0 | 1;
 }
 
-export type InlineOutlineData = [
-  id: number,
-  count: number,
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-  didCommit: 0 | 1,
-];
-
 export interface ActiveOutline {
   id: number;
   name: string;
@@ -46,7 +36,6 @@ declare global {
   var __REACT_SCAN_STOP__: boolean;
   var ReactScan: {
     hasStopped: () => boolean;
-    stop: () => void;
     cleanup: () => void;
     init: () => void;
     flushOutlines: () => void;
diff --git a/packages/scan/src/react-component-name/core/options.ts b/packages/scan/src/react-component-name/core/options.ts
index e1a1171b..a7c43e98 100644
--- a/packages/scan/src/react-component-name/core/options.ts
+++ b/packages/scan/src/react-component-name/core/options.ts
@@ -1,9 +1,9 @@
-import type { FilterPattern } from '@rollup/pluginutils';
+import type { FilterPattern } from "@rollup/pluginutils";
 
 export interface Options {
   include?: FilterPattern;
   exclude?: FilterPattern;
-  enforce?: 'pre' | 'post' | undefined;
+  enforce?: "pre" | "post" | undefined;
   flags?: {
     noTryCatchDisplayNames?: boolean;
     noStyledComponents?: boolean;
@@ -11,19 +11,3 @@ export interface Options {
     ignoreComponentSubstrings?: Array<string>;
   };
 }
-
-type Overwrite<T, U> = Pick<T, Exclude<keyof T, keyof U>> & U;
-
-export type OptionsResolved = Overwrite<
-  Required<Options>,
-  Pick<Options, 'enforce'>
->;
-
-export function resolveOptions(options: Options): OptionsResolved {
-  return {
-    include: options.include ?? [/\.[cm]?[jt]sx?$/],
-    exclude: options.exclude ?? [/node_modules/],
-    enforce: 'enforce' in options ? options.enforce : 'pre',
-    flags: options.flags ?? {},
-  };
-}
diff --git a/packages/scan/src/types.ts b/packages/scan/src/types.ts
index 4e0dbb29..bac578e7 100644
--- a/packages/scan/src/types.ts
+++ b/packages/scan/src/types.ts
@@ -19,9 +19,6 @@ declare global {
   };
   var reactScanCleanupListeners: (() => void) | undefined;
   var reactScan: Scan;
-  var scheduler: {
-    postTask: (cb: unknown, options: { priority: string }) => void;
-  };
 
   type TTimer = NodeJS.Timeout;
 
diff --git a/packages/scan/src/web/state.ts b/packages/scan/src/web/state.ts
index c7feb5ea..b09792e0 100644
--- a/packages/scan/src/web/state.ts
+++ b/packages/scan/src/web/state.ts
@@ -1,21 +1,18 @@
 import { signal } from "@preact/signals";
 import {
   LOCALSTORAGE_KEY,
+  LOCALSTORAGE_COLLAPSED_KEY,
   MIN_CONTAINER_WIDTH,
   MIN_SIZE,
   SAFE_AREA,
-  LOCALSTORAGE_COLLAPSED_KEY,
 } from "./constants";
 import { IS_CLIENT } from "./utils/constants";
 import { readLocalStorage, saveLocalStorage } from "./utils/helpers";
 import { getSafeArea } from "./utils/safe-area";
-import type { Corner, WidgetConfig, WidgetSettings } from "./widget/types";
-import type { CollapsedPosition } from "./widget/types";
+import type { CollapsedPosition, Corner, WidgetConfig, WidgetSettings } from "./widget/types";
 
 export const signalIsSettingsOpen = /* @__PURE__ */ signal(false);
-export const signalRefWidget = /* @__PURE__ */ signal<HTMLDivElement | null>(
-  null
-);
+export const signalRefWidget = /* @__PURE__ */ signal<HTMLDivElement | null>(null);
 
 // Use the raw SAFE_AREA constant (not getSafeArea()) here: this runs at
 // module-init time, before any user has called scan() with options.
@@ -45,7 +42,7 @@ export const getDefaultWidgetConfig = (): WidgetConfig => ({
 /** @deprecated use {@link getDefaultWidgetConfig} */
 export const defaultWidgetConfig: WidgetConfig = getDefaultWidgetConfig();
 
-export const getInitialWidgetConfig = (): WidgetConfig => {
+const getInitialWidgetConfig = (): WidgetConfig => {
   const defaults = getDefaultWidgetConfig();
   const stored = readLocalStorage<WidgetSettings>(LOCALSTORAGE_KEY);
   if (!stored) {
@@ -63,10 +60,7 @@ export const getInitialWidgetConfig = (): WidgetConfig => {
     corner: stored.corner ?? defaults.corner,
     dimensions: stored.dimensions ?? defaults.dimensions,
 
-    lastDimensions:
-      stored.lastDimensions ??
-      stored.dimensions ??
-      defaults.lastDimensions,
+    lastDimensions: stored.lastDimensions ?? stored.dimensions ?? defaults.lastDimensions,
     componentsTree: stored.componentsTree ?? defaults.componentsTree,
   };
 };
@@ -92,11 +86,6 @@ export const updateDimensions = (): void => {
   };
 };
 
-export interface SlowDowns {
-  slowDowns: number;
-  hideNotification: boolean;
-}
-
 export type WidgetStates =
   | {
       view: "none";
@@ -121,8 +110,6 @@ export const signalWidgetViews = signal<WidgetStates>({
   view: "none",
 });
 
-const storedCollapsed = readLocalStorage<CollapsedPosition | null>(
-  LOCALSTORAGE_COLLAPSED_KEY
-);
+const storedCollapsed = readLocalStorage<CollapsedPosition | null>(LOCALSTORAGE_COLLAPSED_KEY);
 export const signalWidgetCollapsed =
   /* @__PURE__ */ signal<CollapsedPosition | null>(storedCollapsed ?? null);
diff --git a/packages/scan/src/web/utils/create-store.ts b/packages/scan/src/web/utils/create-store.ts
index 8f85a020..759f705d 100644
--- a/packages/scan/src/web/utils/create-store.ts
+++ b/packages/scan/src/web/utils/create-store.ts
@@ -6,12 +6,9 @@
  * Do not modify unless you know what you are doing
  */
 type SetStateInternal<T> = {
-  _(
-    partial: T | Partial<T> | { _(state: T): T | Partial<T> }['_'],
-    replace?: false,
-  ): void;
-  _(state: T | { _(state: T): T }['_'], replace: true): void;
-}['_'];
+  _(partial: T | Partial<T> | { _(state: T): T | Partial<T> }["_"], replace?: false): void;
+  _(state: T | { _(state: T): T }["_"], replace: true): void;
+}["_"];
 
 export interface StoreApi<T> {
   setState: SetStateInternal<T>;
@@ -26,11 +23,9 @@ export interface StoreApi<T> {
   };
 }
 
-export type ExtractState<S> = S extends { getState: () => infer T } ? T : never;
-
 type Get<T, K, F> = K extends keyof T ? T[K] : F;
 
-export type Mutate<S, Ms> = number extends Ms['length' & keyof Ms]
+export type Mutate<S, Ms> = number extends Ms["length" & keyof Ms]
   ? S
   : Ms extends []
     ? S
@@ -44,8 +39,8 @@ export type StateCreator<
   Mos extends [StoreMutatorIdentifier, unknown][] = [],
   U = T,
 > = ((
-  setState: Get<Mutate<StoreApi<T>, Mis>, 'setState', never>,
-  getState: Get<Mutate<StoreApi<T>, Mis>, 'getState', never>,
+  setState: Get<Mutate<StoreApi<T>, Mis>, "setState", never>,
+  getState: Get<Mutate<StoreApi<T>, Mis>, "getState", never>,
   store: Mutate<StoreApi<T>, Mis>,
 ) => U) & { $$storeMutators?: Mos };
 
@@ -63,10 +58,7 @@ type CreateStore = {
   ) => Mutate<StoreApi<T>, Mos>;
 };
 
-type CreateStoreImpl = <
-  T,
-  Mos extends [StoreMutatorIdentifier, unknown][] = [],
->(
+type CreateStoreImpl = <T, Mos extends [StoreMutatorIdentifier, unknown][] = []>(
   initializer: StateCreator<T, [], Mos>,
 ) => Mutate<StoreApi<T>, Mos>;
 
@@ -76,27 +68,24 @@ const createStoreImpl: CreateStoreImpl = (createState) => {
   let state: TState;
   const listeners: Set<Listener> = new Set();
 
-  const setState: StoreApi<TState>['setState'] = (partial, replace) => {
+  const setState: StoreApi<TState>["setState"] = (partial, replace) => {
     const nextState =
-      typeof partial === 'function'
-        ? (partial as (state: TState) => TState)(state)
-        : partial;
+      typeof partial === "function" ? (partial as (state: TState) => TState)(state) : partial;
     if (!Object.is(nextState, state)) {
       const previousState = state;
       state =
-        (replace ?? (typeof nextState !== 'object' || nextState === null))
+        (replace ?? (typeof nextState !== "object" || nextState === null))
           ? (nextState as TState)
           : Object.assign({}, state, nextState);
       listeners.forEach((listener) => listener(state, previousState));
     }
   };
 
-  const getState: StoreApi<TState>['getState'] = () => state;
+  const getState: StoreApi<TState>["getState"] = () => state;
 
-  const getInitialState: StoreApi<TState>['getInitialState'] = () =>
-    initialState;
+  const getInitialState: StoreApi<TState>["getInitialState"] = () => initialState;
 
-  const subscribe: StoreApi<TState>['subscribe'] = (
+  const subscribe: StoreApi<TState>["subscribe"] = (
     selectorOrListener:
       | ((state: TState, prevState: TState) => void)
       // oxlint-disable-next-line typescript/no-explicit-any
@@ -116,10 +105,7 @@ const createStoreImpl: CreateStoreImpl = (createState) => {
       actualListener = listener;
     } else {
       // Regular subscription case
-      actualListener = selectorOrListener as (
-        state: TState,
-        prevState: TState,
-      ) => void;
+      actualListener = selectorOrListener as (state: TState, prevState: TState) => void;
     }
 
     let currentSlice = selector ? selector(state) : undefined;
diff --git a/packages/scan/src/web/utils/helpers.ts b/packages/scan/src/web/utils/helpers.ts
index d0624c3d..2eb44f35 100644
--- a/packages/scan/src/web/utils/helpers.ts
+++ b/packages/scan/src/web/utils/helpers.ts
@@ -5,35 +5,16 @@ import {
   SuspenseComponentTag,
   getDisplayName,
   hasMemoCache,
-} from 'bippy';
-import { type ClassValue, clsx } from 'clsx';
-import { IS_CLIENT } from './constants';
-import { twMerge } from 'tailwind-merge';
+} from "bippy";
+import { type ClassValue, clsx } from "clsx";
+import { IS_CLIENT } from "./constants";
+import { twMerge } from "tailwind-merge";
 
 export const cn = (...inputs: Array<ClassValue>): string => {
   return twMerge(clsx(inputs));
 };
 
-export const isFirefox =
-  /* @__PURE__ */ typeof navigator !== 'undefined' &&
-  navigator.userAgent.includes('Firefox');
-
-export const onIdle = (callback: () => void) => {
-  if ('scheduler' in globalThis) {
-    return globalThis.scheduler.postTask(callback, {
-      priority: 'background',
-    });
-  }
-  if ('requestIdleCallback' in window) {
-    return requestIdleCallback(callback);
-  }
-  return setTimeout(callback, 0);
-};
-
-export const throttle = <E>(
-  callback: (e?: E) => void,
-  delay: number,
-): ((e?: E) => void) => {
+export const throttle = <E>(callback: (e?: E) => void, delay: number): ((e?: E) => void) => {
   let lastCall = 0;
   return (e?: E) => {
     const now = Date.now();
@@ -45,14 +26,6 @@ export const throttle = <E>(
   };
 };
 
-export const tryOrElse = <T>(fn: () => T, defaultValue: T): T => {
-  try {
-    return fn();
-  } catch {
-    return defaultValue;
-  }
-};
-
 export const readLocalStorage = <T>(storageKey: string): T | null => {
   if (!IS_CLIENT) return null;
 
@@ -80,12 +53,12 @@ export const removeLocalStorage = (storageKey: string): void => {
 };
 
 interface WrapperBadge {
-  type: 'memo' | 'forwardRef' | 'lazy' | 'suspense' | 'profiler' | 'strict';
+  type: "memo" | "forwardRef" | "lazy" | "suspense" | "profiler" | "strict";
   title: string;
   compiler?: boolean;
 }
 
-export interface ExtendedDisplayName {
+interface ExtendedDisplayName {
   name: string | null;
   wrappers: Array<string>;
   wrapperTypes: Array<WrapperBadge>;
@@ -98,7 +71,7 @@ const ProfilerTag = 12;
 export const getExtendedDisplayName = (fiber: Fiber): ExtendedDisplayName => {
   if (!fiber) {
     return {
-      name: 'Unknown',
+      name: "Unknown",
       wrappers: [],
       wrapperTypes: [],
     };
@@ -113,42 +86,41 @@ export const getExtendedDisplayName = (fiber: Fiber): ExtendedDisplayName => {
     hasMemoCache(fiber) ||
     tag === SimpleMemoComponentTag ||
     tag === MemoComponentTag ||
-    (type as { $$typeof?: symbol })?.$$typeof === Symbol.for('react.memo') ||
-    (elementType as { $$typeof?: symbol })?.$$typeof ===
-      Symbol.for('react.memo')
+    (type as { $$typeof?: symbol })?.$$typeof === Symbol.for("react.memo") ||
+    (elementType as { $$typeof?: symbol })?.$$typeof === Symbol.for("react.memo")
   ) {
     const compiler = hasMemoCache(fiber);
     wrapperTypes.push({
-      type: 'memo',
+      type: "memo",
       title: compiler
-        ? 'This component has been auto-memoized by the React Compiler.'
-        : 'Memoized component that skips re-renders if props are the same',
+        ? "This component has been auto-memoized by the React Compiler."
+        : "Memoized component that skips re-renders if props are the same",
       compiler,
     });
   }
 
   if (tag === LazyComponentTag) {
     wrapperTypes.push({
-      type: 'lazy',
-      title: 'Lazily loaded component that supports code splitting',
+      type: "lazy",
+      title: "Lazily loaded component that supports code splitting",
     });
   }
 
   if (tag === SuspenseComponentTag) {
     wrapperTypes.push({
-      type: 'suspense',
-      title: 'Component that can suspend while content is loading',
+      type: "suspense",
+      title: "Component that can suspend while content is loading",
     });
   }
 
   if (tag === ProfilerTag) {
     wrapperTypes.push({
-      type: 'profiler',
-      title: 'Component that measures rendering performance',
+      type: "profiler",
+      title: "Component that measures rendering performance",
     });
   }
 
-  if (typeof name === 'string') {
+  if (typeof name === "string") {
     const wrapperRegex = /^(\w+)\((.*)\)$/;
     let currentName = name;
     while (wrapperRegex.test(currentName)) {
@@ -164,7 +136,7 @@ export const getExtendedDisplayName = (fiber: Fiber): ExtendedDisplayName => {
   }
 
   return {
-    name: name || 'Unknown',
+    name: name || "Unknown",
     wrappers,
     wrapperTypes,
   };
diff --git a/packages/scan/src/web/utils/log.ts b/packages/scan/src/web/utils/log.ts
index d7a4e4bb..5ce0e27b 100644
--- a/packages/scan/src/web/utils/log.ts
+++ b/packages/scan/src/web/utils/log.ts
@@ -1,6 +1,6 @@
 // @ts-nocheck
-import { ChangeReason, type Render } from '~core/instrumentation';
-import { getLabelText } from '~core/utils';
+import { ChangeReason, type Render } from "~core/instrumentation";
+import { getLabelText } from "~core/utils";
 
 export const log = (renders: Array<Render>) => {
   const logMap = new Map<
@@ -13,7 +13,6 @@ export const log = (renders: Array<Render>) => {
     if (!render.componentName) continue;
 
     const changeLog = logMap.get(render.componentName) ?? [];
-    renders;
     const labelText = getLabelText([
       {
         aggregatedCount: 1,
@@ -38,18 +37,17 @@ export const log = (renders: Array<Render>) => {
 
     if (render.changes) {
       for (let i = 0, len = render.changes.length; i < len; i++) {
-        const { name, prevValue, nextValue, unstable, type } =
-          render.changes[i];
+        const { name, prevValue, nextValue, unstable, type } = render.changes[i];
         if (type === ChangeReason.Props) {
           prevChangedProps ??= {};
           nextChangedProps ??= {};
-          prevChangedProps[`${unstable ? '⚠️' : ''}${name} (prev)`] = prevValue;
-          nextChangedProps[`${unstable ? '⚠️' : ''}${name} (next)`] = nextValue;
+          prevChangedProps[`${unstable ? "⚠️" : ""}${name} (prev)`] = prevValue;
+          nextChangedProps[`${unstable ? "⚠️" : ""}${name} (next)`] = nextValue;
         } else {
           changeLog.push({
             prev: prevValue,
             next: nextValue,
-            type: type === ChangeReason.Context ? 'context' : 'state',
+            type: type === ChangeReason.Context ? "context" : "state",
             unstable: unstable ?? false,
           });
         }
@@ -60,7 +58,7 @@ export const log = (renders: Array<Render>) => {
       changeLog.push({
         prev: prevChangedProps,
         next: nextChangedProps,
-        type: 'props',
+        type: "props",
         unstable: false,
       });
     }
@@ -69,13 +67,10 @@ export const log = (renders: Array<Render>) => {
   }
   for (const [name, changeLog] of Array.from(logMap.entries())) {
     // oxlint-disable-next-line no-console
-    console.group(
-      `%c${name}`,
-      'background: hsla(0,0%,70%,.3); border-radius:3px; padding: 0 2px;',
-    );
+    console.group(`%c${name}`, "background: hsla(0,0%,70%,.3); border-radius:3px; padding: 0 2px;");
     for (const { type, prev, next, unstable } of changeLog) {
       // oxlint-disable-next-line no-console
-      console.log(`${type}:`, unstable ? '⚠️' : '', prev, '!==', next);
+      console.log(`${type}:`, unstable ? "⚠️" : "", prev, "!==", next);
     }
     // oxlint-disable-next-line no-console
     console.groupEnd();
@@ -89,8 +84,8 @@ export const logIntro = () => {
   }
   // oxlint-disable-next-line no-console
   console.log(
-    '%c[·] %cReact Scan',
-    'font-weight:bold;color:#7a68e8;font-size:20px;',
-    'font-weight:bold;font-size:14px;',
+    "%c[·] %cReact Scan",
+    "font-weight:bold;color:#7a68e8;font-size:20px;",
+    "font-weight:bold;font-size:14px;",
   );
 };
diff --git a/packages/scan/src/web/views/inspector/components-tree/state.ts b/packages/scan/src/web/views/inspector/components-tree/state.ts
index 8bb6f045..ed1d8eae 100644
--- a/packages/scan/src/web/views/inspector/components-tree/state.ts
+++ b/packages/scan/src/web/views/inspector/components-tree/state.ts
@@ -1,6 +1,6 @@
-import { signal } from '@preact/signals';
-import type { Fiber } from 'bippy';
-import type { RenderData } from '~core/instrumentation';
+import { signal } from "@preact/signals";
+import type { Fiber } from "bippy";
+import type { RenderData } from "~core/instrumentation";
 
 export interface TreeNode {
   label: string;
@@ -23,16 +23,9 @@ export const searchState = signal<{
   matches: FlattenedNode[];
   currentMatchIndex: number;
 }>({
-  query: '',
+  query: "",
   matches: [],
   currentMatchIndex: -1,
 });
 
-export interface TreeItem {
-  name: string;
-  depth: number;
-  element: HTMLElement;
-  fiber: Fiber;
-}
-
 export const signalSkipTreeUpdate = /* @__PURE__ */ signal(false);
diff --git a/packages/scan/src/web/views/inspector/overlay/index.tsx b/packages/scan/src/web/views/inspector/overlay/index.tsx
index 55191e24..ee354ed3 100644
--- a/packages/scan/src/web/views/inspector/overlay/index.tsx
+++ b/packages/scan/src/web/views/inspector/overlay/index.tsx
@@ -1,10 +1,10 @@
-import { type Fiber, getDisplayName } from 'bippy';
-import { useEffect, useRef } from 'preact/hooks';
-import { ReactScanInternals, Store } from '~core/index';
+import { type Fiber, getDisplayName } from "bippy";
+import { useEffect, useRef } from "preact/hooks";
+import { ReactScanInternals, Store } from "~core/index";
 
-import { signalIsSettingsOpen, signalWidgetViews } from '~web/state';
-import { IS_CLIENT } from '~web/utils/constants';
-import { cn, throttle } from '~web/utils/helpers';
+import { signalIsSettingsOpen, signalWidgetViews } from "~web/state";
+import { IS_CLIENT } from "~web/utils/constants";
+import { cn, throttle } from "~web/utils/helpers";
 const lerp = (start: number, end: number, t: number) => start + (end - start) * t;
 import {
   type States,
@@ -12,9 +12,9 @@ import {
   getAssociatedFiberRect,
   getCompositeComponentFromElement,
   nonVisualTags,
-} from '../utils';
+} from "../utils";
 
-type DrawKind = 'locked' | 'inspecting';
+type DrawKind = "locked" | "inspecting";
 
 interface Rect {
   left: number;
@@ -39,11 +39,7 @@ const ANIMATION_CONFIG = {
   },
 } as const;
 
-export const OVERLAY_DPR = IS_CLIENT
-  ? /* @__PURE__ */ window.devicePixelRatio || 1
-  : 1;
-
-export const currentLockIconRect: LockIconRect | null = null;
+const OVERLAY_DPR = IS_CLIENT ? /* @__PURE__ */ window.devicePixelRatio || 1 : 1;
 
 export const ScanOverlay = () => {
   const refCanvas = useRef<HTMLCanvasElement>(null);
@@ -53,21 +49,14 @@ export const ScanOverlay = () => {
   const refLastHoveredElement = useRef<Element | null>(null);
   const refRafId = useRef<number>(0);
   const refTimeout = useRef<TTimer>();
-  const refCleanupMap = useRef(
-    new Map<States['kind'] | 'fade-out', () => void>(),
-  );
+  const refCleanupMap = useRef(new Map<States["kind"] | "fade-out", () => void>());
   const refIsFadingOut = useRef(false);
   const refLastFrameTime = useRef<number>(0);
 
-  const drawLockIcon = (
-    ctx: CanvasRenderingContext2D,
-    x: number,
-    y: number,
-    size: number,
-  ) => {
+  const drawLockIcon = (ctx: CanvasRenderingContext2D, x: number, y: number, size: number) => {
     ctx.save();
-    ctx.strokeStyle = 'white';
-    ctx.fillStyle = 'white';
+    ctx.strokeStyle = "white";
+    ctx.fillStyle = "white";
     ctx.lineWidth = 1.5;
 
     const shackleWidth = size * 0.6;
@@ -98,35 +87,33 @@ export const ScanOverlay = () => {
   const drawStatsPill = (
     ctx: CanvasRenderingContext2D,
     rect: Rect,
-    kind: 'locked' | 'inspecting',
+    kind: "locked" | "inspecting",
     fiber: Fiber | null,
   ) => {
     if (!fiber) return;
 
     const pillHeight = 24;
     const pillPadding = 8;
-    const componentName =
-      (fiber?.type && getDisplayName(fiber.type)) ?? 'Unknown';
+    const componentName = (fiber?.type && getDisplayName(fiber.type)) ?? "Unknown";
     const text = componentName;
 
     ctx.save();
-    ctx.font = '12px system-ui, -apple-system, sans-serif';
+    ctx.font = "12px system-ui, -apple-system, sans-serif";
     const textMetrics = ctx.measureText(text);
     const textWidth = textMetrics.width;
-    const lockIconSize = kind === 'locked' ? 14 : 0;
-    const lockIconPadding = kind === 'locked' ? 6 : 0;
-    const pillWidth =
-      textWidth + pillPadding * 2 + lockIconSize + lockIconPadding;
+    const lockIconSize = kind === "locked" ? 14 : 0;
+    const lockIconPadding = kind === "locked" ? 6 : 0;
+    const pillWidth = textWidth + pillPadding * 2 + lockIconSize + lockIconPadding;
 
     const pillX = rect.left;
     const pillY = rect.top - pillHeight - 4;
 
-    ctx.fillStyle = 'rgb(37, 37, 38, .75)';
+    ctx.fillStyle = "rgb(37, 37, 38, .75)";
     ctx.beginPath();
     ctx.roundRect(pillX, pillY, pillWidth, pillHeight, 3);
     ctx.fill();
 
-    if (kind === 'locked') {
+    if (kind === "locked") {
       const lockX = pillX + pillPadding;
       const lockY = pillY + (pillHeight - lockIconSize) / 2 + 2;
       drawLockIcon(ctx, lockX, lockY, lockIconSize);
@@ -140,12 +127,9 @@ export const ScanOverlay = () => {
       refCurrentLockIconRect.current = null;
     }
 
-    ctx.fillStyle = 'white';
-    ctx.textBaseline = 'middle';
-    const textX =
-      pillX +
-      pillPadding +
-      (kind === 'locked' ? lockIconSize + lockIconPadding : 0);
+    ctx.fillStyle = "white";
+    ctx.textBaseline = "middle";
+    const textX = pillX + pillPadding + (kind === "locked" ? lockIconSize + lockIconPadding : 0);
     ctx.fillText(text, textX, pillY + pillHeight / 2);
     ctx.restore();
   };
@@ -160,10 +144,10 @@ export const ScanOverlay = () => {
     const rect = refCurrentRect.current;
     ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-    ctx.strokeStyle = 'rgba(142, 97, 227, 0.5)';
-    ctx.fillStyle = 'rgba(173, 97, 230, 0.10)';
+    ctx.strokeStyle = "rgba(142, 97, 227, 0.5)";
+    ctx.fillStyle = "rgba(173, 97, 230, 0.10)";
 
-    if (kind === 'locked') {
+    if (kind === "locked") {
       ctx.setLineDash([]);
     } else {
       ctx.setLineDash([4]);
@@ -189,10 +173,7 @@ export const ScanOverlay = () => {
     const t = ANIMATION_CONFIG.speeds[speed] ?? ANIMATION_CONFIG.speeds.off;
 
     const animationFrame = (timestamp: number) => {
-      if (
-        timestamp - refLastFrameTime.current <
-        ANIMATION_CONFIG.frameInterval
-      ) {
+      if (timestamp - refLastFrameTime.current < ANIMATION_CONFIG.frameInterval) {
         refRafId.current = requestAnimationFrame(animationFrame);
         return;
       }
@@ -270,8 +251,7 @@ export const ScanOverlay = () => {
   ) => {
     if (!overlayElement || !canvas || !ctx) return;
 
-    const { parentCompositeFiber } =
-      getCompositeComponentFromElement(overlayElement);
+    const { parentCompositeFiber } = getCompositeComponentFromElement(overlayElement);
     const targetRect = await getAssociatedFiberRect(overlayElement);
 
     if (!parentCompositeFiber || !targetRect) return;
@@ -286,14 +266,14 @@ export const ScanOverlay = () => {
   };
 
   const cleanupCanvas = (canvas: HTMLCanvasElement) => {
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext("2d");
     if (ctx) {
       ctx.clearRect(0, 0, canvas.width, canvas.height);
     }
     refCurrentRect.current = null;
     refCurrentLockIconRect.current = null;
     refLastHoveredElement.current = null;
-    canvas.classList.remove('fade-in');
+    canvas.classList.remove("fade-in");
     refIsFadingOut.current = false;
   };
 
@@ -301,47 +281,37 @@ export const ScanOverlay = () => {
     if (!refCanvas.current || refIsFadingOut.current) return;
 
     const handleTransitionEnd = (e: TransitionEvent) => {
-      if (
-        !refCanvas.current ||
-        e.propertyName !== 'opacity' ||
-        !refIsFadingOut.current
-      ) {
+      if (!refCanvas.current || e.propertyName !== "opacity" || !refIsFadingOut.current) {
         return;
       }
-      refCanvas.current.removeEventListener(
-        'transitionend',
-        handleTransitionEnd,
-      );
+      refCanvas.current.removeEventListener("transitionend", handleTransitionEnd);
       cleanupCanvas(refCanvas.current);
       onComplete?.();
     };
-    const existingListener = refCleanupMap.current.get('fade-out');
+    const existingListener = refCleanupMap.current.get("fade-out");
     if (existingListener) {
       existingListener();
-      refCleanupMap.current.delete('fade-out');
+      refCleanupMap.current.delete("fade-out");
     }
 
-    refCanvas.current.addEventListener('transitionend', handleTransitionEnd);
-    refCleanupMap.current.set('fade-out', () => {
-      refCanvas.current?.removeEventListener(
-        'transitionend',
-        handleTransitionEnd,
-      );
+    refCanvas.current.addEventListener("transitionend", handleTransitionEnd);
+    refCleanupMap.current.set("fade-out", () => {
+      refCanvas.current?.removeEventListener("transitionend", handleTransitionEnd);
     });
 
     refIsFadingOut.current = true;
-    refCanvas.current.classList.remove('fade-in');
+    refCanvas.current.classList.remove("fade-in");
     requestAnimationFrame(() => {
-      refCanvas.current?.classList.add('fade-out');
+      refCanvas.current?.classList.add("fade-out");
     });
   };
 
   const startFadeIn = () => {
     if (!refCanvas.current) return;
     refIsFadingOut.current = false;
-    refCanvas.current.classList.remove('fade-out');
+    refCanvas.current.classList.remove("fade-out");
     requestAnimationFrame(() => {
-      refCanvas.current?.classList.add('fade-in');
+      refCanvas.current?.classList.add("fade-in");
     });
   };
 
@@ -357,17 +327,13 @@ export const ScanOverlay = () => {
     }
 
     Store.inspectState.value = {
-      kind: 'inspecting',
+      kind: "inspecting",
       hoveredDomElement: componentElement,
     };
   };
 
   const handleNonHoverableArea = () => {
-    if (
-      !refCurrentRect.current ||
-      !refCanvas.current ||
-      refIsFadingOut.current
-    ) {
+    if (!refCurrentRect.current || !refCanvas.current || refIsFadingOut.current) {
       return;
     }
 
@@ -376,19 +342,17 @@ export const ScanOverlay = () => {
 
   const handlePointerMove = throttle((e?: PointerEvent) => {
     const state = Store.inspectState.peek();
-    if (state.kind !== 'inspecting' || !refEventCatcher.current) return;
+    if (state.kind !== "inspecting" || !refEventCatcher.current) return;
 
-    refEventCatcher.current.style.pointerEvents = 'none';
+    refEventCatcher.current.style.pointerEvents = "none";
     const element = document.elementFromPoint(e?.clientX ?? 0, e?.clientY ?? 0);
 
-    refEventCatcher.current.style.removeProperty('pointer-events');
+    refEventCatcher.current.style.removeProperty("pointer-events");
 
     clearTimeout(refTimeout.current);
 
     if (element && element !== refCanvas.current) {
-      const { parentCompositeFiber } = getCompositeComponentFromElement(
-        element as Element,
-      );
+      const { parentCompositeFiber } = getCompositeComponentFromElement(element as Element);
       if (parentCompositeFiber) {
         const componentElement = findComponentDOMNode(parentCompositeFiber);
         if (componentElement) {
@@ -422,24 +386,18 @@ export const ScanOverlay = () => {
   };
 
   const handleLockIconClick = (state: States) => {
-    if (state.kind === 'focused') {
+    if (state.kind === "focused") {
       Store.inspectState.value = {
-        kind: 'inspecting',
+        kind: "inspecting",
         hoveredDomElement: state.focusedDomElement,
       };
     }
   };
 
   const handleElementClick = (e: MouseEvent) => {
-    const clickableElements = [
-      'react-scan-inspect-element',
-      'react-scan-power',
-    ];
+    const clickableElements = ["react-scan-inspect-element", "react-scan-power"];
     // avoid capturing the synthetic event sent back to the toolbar, we don't want to block click events on it ever
-    if (
-      e.target instanceof HTMLElement &&
-      clickableElements.includes(e.target.id)
-    ) {
+    if (e.target instanceof HTMLElement && clickableElements.includes(e.target.id)) {
       return;
     }
 
@@ -452,25 +410,19 @@ export const ScanOverlay = () => {
     e.stopPropagation();
 
     const element =
-      refLastHoveredElement.current ??
-      document.elementFromPoint(e.clientX, e.clientY);
+      refLastHoveredElement.current ?? document.elementFromPoint(e.clientX, e.clientY);
     if (!element) return;
 
     const clickedEl = e.composedPath().at(0);
 
-    if (
-      clickedEl instanceof HTMLElement &&
-      clickableElements.includes(clickedEl.id)
-    ) {
+    if (clickedEl instanceof HTMLElement && clickableElements.includes(clickedEl.id)) {
       const syntheticEvent = new MouseEvent(e.type, e);
       // @ts-ignore - this allows to know to not re-process this event when this event handler captures it
       syntheticEvent.__reactScanSyntheticEvent = true;
       clickedEl.dispatchEvent(syntheticEvent);
       return;
     }
-    const { parentCompositeFiber } = getCompositeComponentFromElement(
-      element as Element,
-    );
+    const { parentCompositeFiber } = getCompositeComponentFromElement(element as Element);
     if (!parentCompositeFiber) return;
 
     const componentElement = findComponentDOMNode(parentCompositeFiber);
@@ -478,13 +430,13 @@ export const ScanOverlay = () => {
     if (!componentElement) {
       refLastHoveredElement.current = null;
       Store.inspectState.value = {
-        kind: 'inspect-off',
+        kind: "inspect-off",
       };
       return;
     }
 
     Store.inspectState.value = {
-      kind: 'focused',
+      kind: "focused",
       focusedDomElement: componentElement,
       fiber: parentCompositeFiber,
     };
@@ -507,46 +459,46 @@ export const ScanOverlay = () => {
       return;
     }
 
-    if (state.kind === 'inspecting') {
+    if (state.kind === "inspecting") {
       handleElementClick(e);
     }
   };
 
   const handleKeyDown = (e: KeyboardEvent) => {
-    if (e.key !== 'Escape') return;
+    if (e.key !== "Escape") return;
 
     const state = Store.inspectState.peek();
     const canvas = refCanvas.current;
     if (!canvas) return;
 
-    if (document.activeElement?.id === 'react-scan-root') {
+    if (document.activeElement?.id === "react-scan-root") {
       return;
     }
 
     signalWidgetViews.value = {
-      view: 'none',
+      view: "none",
     };
 
-    if (state.kind === 'focused' || state.kind === 'inspecting') {
+    if (state.kind === "focused" || state.kind === "inspecting") {
       e.preventDefault();
       e.stopPropagation();
 
       switch (state.kind) {
-        case 'focused': {
+        case "focused": {
           startFadeIn();
           refCurrentRect.current = null;
           refLastHoveredElement.current = state.focusedDomElement;
           Store.inspectState.value = {
-            kind: 'inspecting',
+            kind: "inspecting",
             hoveredDomElement: state.focusedDomElement,
           };
           break;
         }
-        case 'inspecting': {
+        case "inspecting": {
           startFadeOut(() => {
             signalIsSettingsOpen.value = false;
             Store.inspectState.value = {
-              kind: 'inspect-off',
+              kind: "inspect-off",
             };
           });
           break;
@@ -563,8 +515,8 @@ export const ScanOverlay = () => {
     refCleanupMap.current.get(state.kind)?.();
 
     if (refEventCatcher.current) {
-      if (state.kind !== 'inspecting') {
-        refEventCatcher.current.style.pointerEvents = 'none';
+      if (state.kind !== "inspecting") {
+        refEventCatcher.current.style.pointerEvents = "none";
       }
     }
 
@@ -575,15 +527,15 @@ export const ScanOverlay = () => {
     let unsubReport: (() => void) | undefined;
 
     switch (state.kind) {
-      case 'inspect-off':
+      case "inspect-off":
         startFadeOut();
         return;
 
-      case 'inspecting':
-        drawHoverOverlay(state.hoveredDomElement, canvas, ctx, 'inspecting');
+      case "inspecting":
+        drawHoverOverlay(state.hoveredDomElement, canvas, ctx, "inspecting");
         break;
 
-      case 'focused':
+      case "focused":
         if (!state.focusedDomElement) return;
 
         if (refLastHoveredElement.current !== state.focusedDomElement) {
@@ -591,10 +543,10 @@ export const ScanOverlay = () => {
         }
 
         signalWidgetViews.value = {
-          view: 'inspector',
+          view: "inspector",
         };
 
-        drawHoverOverlay(state.focusedDomElement, canvas, ctx, 'locked');
+        drawHoverOverlay(state.focusedDomElement, canvas, ctx, "locked");
 
         unsubReport = Store.lastReportTime.subscribe(() => {
           if (refRafId.current && refCurrentRect.current) {
@@ -602,7 +554,7 @@ export const ScanOverlay = () => {
               state.focusedDomElement,
             );
             if (parentCompositeFiber) {
-              drawHoverOverlay(state.focusedDomElement, canvas, ctx, 'locked');
+              drawHoverOverlay(state.focusedDomElement, canvas, ctx, "locked");
             }
           }
         });
@@ -614,10 +566,7 @@ export const ScanOverlay = () => {
     }
   };
 
-  const updateCanvasSize = (
-    canvas: HTMLCanvasElement,
-    ctx: CanvasRenderingContext2D,
-  ) => {
+  const updateCanvasSize = (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D) => {
     const rect = canvas.getBoundingClientRect();
     canvas.width = rect.width * OVERLAY_DPR;
     canvas.height = rect.height * OVERLAY_DPR;
@@ -629,7 +578,7 @@ export const ScanOverlay = () => {
     const state = Store.inspectState.peek();
     const canvas = refCanvas.current;
     if (!canvas) return;
-    const ctx = canvas?.getContext('2d');
+    const ctx = canvas?.getContext("2d");
     if (!ctx) return;
 
     cancelAnimationFrame(refRafId.current);
@@ -638,10 +587,10 @@ export const ScanOverlay = () => {
     updateCanvasSize(canvas, ctx);
     refCurrentRect.current = null;
 
-    if (state.kind === 'focused' && state.focusedDomElement) {
-      drawHoverOverlay(state.focusedDomElement, canvas, ctx, 'locked');
-    } else if (state.kind === 'inspecting' && state.hoveredDomElement) {
-      drawHoverOverlay(state.hoveredDomElement, canvas, ctx, 'inspecting');
+    if (state.kind === "focused" && state.focusedDomElement) {
+      drawHoverOverlay(state.focusedDomElement, canvas, ctx, "locked");
+    } else if (state.kind === "inspecting" && state.hoveredDomElement) {
+      drawHoverOverlay(state.hoveredDomElement, canvas, ctx, "inspecting");
     }
   };
 
@@ -650,10 +599,7 @@ export const ScanOverlay = () => {
     const canvas = refCanvas.current;
     if (!canvas) return;
 
-    if (
-      state.kind === 'inspecting' ||
-      isClickInLockIcon(e as unknown as MouseEvent, canvas)
-    ) {
+    if (state.kind === "inspecting" || isClickInLockIcon(e as unknown as MouseEvent, canvas)) {
       e.preventDefault();
       e.stopPropagation();
       e.stopImmediatePropagation();
@@ -664,7 +610,7 @@ export const ScanOverlay = () => {
   useEffect(() => {
     const canvas = refCanvas.current;
     if (!canvas) return;
-    const ctx = canvas?.getContext('2d');
+    const ctx = canvas?.getContext("2d");
     if (!ctx) return;
 
     updateCanvasSize(canvas, ctx);
@@ -673,31 +619,31 @@ export const ScanOverlay = () => {
       handleStateChange(state, canvas, ctx);
     });
 
-    window.addEventListener('scroll', handleResizeOrScroll, { passive: true });
-    window.addEventListener('resize', handleResizeOrScroll, { passive: true });
-    document.addEventListener('pointermove', handlePointerMove, {
+    window.addEventListener("scroll", handleResizeOrScroll, { passive: true });
+    window.addEventListener("resize", handleResizeOrScroll, { passive: true });
+    document.addEventListener("pointermove", handlePointerMove, {
       passive: true,
       capture: true,
     });
-    document.addEventListener('pointerdown', handlePointerDown, {
+    document.addEventListener("pointerdown", handlePointerDown, {
       capture: true,
     });
-    document.addEventListener('click', handleClick, { capture: true });
-    document.addEventListener('keydown', handleKeyDown, { capture: true });
+    document.addEventListener("click", handleClick, { capture: true });
+    document.addEventListener("keydown", handleKeyDown, { capture: true });
 
     return () => {
       unsubscribeAll();
       unSubState();
-      window.removeEventListener('scroll', handleResizeOrScroll);
-      window.removeEventListener('resize', handleResizeOrScroll);
-      document.removeEventListener('pointermove', handlePointerMove, {
+      window.removeEventListener("scroll", handleResizeOrScroll);
+      window.removeEventListener("resize", handleResizeOrScroll);
+      document.removeEventListener("pointermove", handlePointerMove, {
         capture: true,
       });
-      document.removeEventListener('click', handleClick, { capture: true });
-      document.removeEventListener('pointerdown', handlePointerDown, {
+      document.removeEventListener("click", handleClick, { capture: true });
+      document.removeEventListener("pointerdown", handlePointerDown, {
         capture: true,
       });
-      document.removeEventListener('keydown', handleKeyDown, { capture: true });
+      document.removeEventListener("keydown", handleKeyDown, { capture: true });
 
       if (refRafId.current) {
         cancelAnimationFrame(refRafId.current);
@@ -710,20 +656,20 @@ export const ScanOverlay = () => {
     <>
       <div
         ref={refEventCatcher}
-        className={cn('fixed top-0 left-0 w-screen h-screen', 'z-[214748365]')}
+        className={cn("fixed top-0 left-0 w-screen h-screen", "z-[214748365]")}
         // DO NOT DO NOT DO NOT REMOVE THE STYLE IT WILL CAUSE MASSIVE PERFORMANCE ISSUES https://x.com/RobKnight__/status/1897524145157439558
         style={{
-          pointerEvents: 'none',
+          pointerEvents: "none",
         }}
       />
       <canvas
         ref={refCanvas}
         dir="ltr"
         className={cn(
-          'react-scan-inspector-overlay',
-          'fixed top-0 left-0 w-screen h-screen',
-          'pointer-events-none',
-          'z-[214748367]',
+          "react-scan-inspector-overlay",
+          "fixed top-0 left-0 w-screen h-screen",
+          "pointer-events-none",
+          "z-[214748367]",
         )}
       />
     </>
diff --git a/packages/scan/src/web/views/inspector/states.ts b/packages/scan/src/web/views/inspector/states.ts
index 38ecda97..ad02be7c 100644
--- a/packages/scan/src/web/views/inspector/states.ts
+++ b/packages/scan/src/web/views/inspector/states.ts
@@ -1,8 +1,7 @@
-import { signal } from '@preact/signals';
-import type { Fiber } from 'bippy';
-import type { ComponentType } from 'preact';
-import { flashManager } from './flash-overlay';
-import { type SectionData, resetTracking } from './timeline/utils';
+import { signal } from "@preact/signals";
+import type { Fiber } from "bippy";
+import type { ComponentType } from "preact";
+import type { SectionData } from "./timeline/utils";
 
 export interface MinimalFiberInfo {
   id?: string | number;
@@ -36,7 +35,7 @@ export interface TimelineState {
 
 export const TIMELINE_MAX_UPDATES = 1000;
 
-export const timelineStateDefault: TimelineState = {
+const timelineStateDefault: TimelineState = {
   updates: [],
   currentFiber: null,
   totalUpdates: 0,
@@ -60,8 +59,7 @@ const batchUpdates = () => {
 
   const batchedUpdates = [...pendingUpdates];
 
-  const { updates, totalUpdates, currentIndex, isViewingHistory } =
-    timelineState.value;
+  const { updates, totalUpdates, currentIndex, isViewingHistory } = timelineState.value;
   const newUpdates = [...updates];
   let newTotalUpdates = totalUpdates;
 
@@ -132,7 +130,7 @@ export const timelineActions = {
     };
   },
 
-  updatePlaybackSpeed: (speed: TimelineState['playbackSpeed']) => {
+  updatePlaybackSpeed: (speed: TimelineState["playbackSpeed"]) => {
     timelineState.value = {
       ...timelineState.value,
       playbackSpeed: speed,
@@ -166,15 +164,3 @@ export const timelineActions = {
     timelineState.value = timelineStateDefault;
   },
 };
-
-export const globalInspectorState = {
-  lastRendered: new Map<string, unknown>(),
-  expandedPaths: new Set<string>(),
-  cleanup: () => {
-    globalInspectorState.lastRendered.clear();
-    globalInspectorState.expandedPaths.clear();
-    flashManager.cleanupAll();
-    resetTracking();
-    timelineState.value = timelineStateDefault;
-  },
-};
diff --git a/packages/scan/src/web/views/inspector/timeline/utils.ts b/packages/scan/src/web/views/inspector/timeline/utils.ts
index a1463c4c..6d47212e 100644
--- a/packages/scan/src/web/views/inspector/timeline/utils.ts
+++ b/packages/scan/src/web/views/inspector/timeline/utils.ts
@@ -7,9 +7,9 @@ import {
   MemoComponentTag,
   type MemoizedState,
   SimpleMemoComponentTag,
-} from 'bippy';
-import { isEqual } from '~core/utils';
-import { getChangedPropsDetailed, isPromise } from '../utils';
+} from "bippy";
+import { isEqual } from "~core/utils";
+import { getChangedPropsDetailed, isPromise } from "../utils";
 
 interface ChangeTrackingInfo {
   count: number;
@@ -26,14 +26,12 @@ const contextTracker = new Map<string, ChangeTrackingInfo>();
 let lastComponentType: unknown = null;
 
 const STATE_NAME_REGEX = /\[(?<name>\w+),\s*set\w+\]/g;
-const PROPS_ORDER_REGEX = /\(\s*{\s*(?<props>[^}]+)\s*}\s*\)/;
-
 export const getStateNames = (fiber: Fiber): Array<string> => {
-  const componentSource = fiber.type?.toString?.() || '';
+  const componentSource = fiber.type?.toString?.() || "";
   return componentSource
     ? Array.from(
         componentSource.matchAll(STATE_NAME_REGEX),
-        (m: RegExpMatchArray) => m.groups?.name ?? '',
+        (m: RegExpMatchArray) => m.groups?.name ?? "",
       )
     : [];
 };
@@ -45,13 +43,13 @@ export const resetTracking = () => {
   lastComponentType = null;
 };
 
-export const isInitialComponentUpdate = (fiber: Fiber): boolean => {
+const isInitialComponentUpdate = (fiber: Fiber): boolean => {
   const isNewComponent = fiber.type !== lastComponentType;
   lastComponentType = fiber.type;
   return isNewComponent;
 };
 
-export const trackChange = (
+const trackChange = (
   tracker: Map<ChangeKey, ChangeTrackingInfo>,
   key: ChangeKey,
   currentValue: unknown,
@@ -104,9 +102,7 @@ export interface InspectorData {
   fiberContext: SectionData;
 }
 
-export const getStateFromFiber = (
-  fiber: Fiber,
-): Record<string | number, unknown> => {
+const getStateFromFiber = (fiber: Fiber): Record<string | number, unknown> => {
   if (!fiber) return {};
 
   if (
@@ -137,20 +133,6 @@ export const getStateFromFiber = (
   return {};
 };
 
-/**
- * Used to preserve the order of the fiber's props as represented in source code
- */
-export const getPropsOrder = (fiber: Fiber): Array<string> => {
-  const componentSource = fiber.type?.toString?.() || '';
-  const match = componentSource.match(PROPS_ORDER_REGEX);
-  if (!match?.groups?.props) return [];
-
-  return match.groups.props
-    .split(',')
-    .map((prop: string) => prop.trim().split(':')[0].split('=')[0].trim())
-    .filter(Boolean);
-};
-
 export interface InspectorDataResult {
   data: InspectorData;
   shouldUpdate: boolean;
@@ -181,9 +163,7 @@ interface CollectorResult<T extends BaseChange = BaseChange> {
   changes: Array<T>;
 }
 
-export const collectPropsChanges = (
-  fiber: Fiber,
-): CollectorResult<PropChange> => {
+export const collectPropsChanges = (fiber: Fiber): CollectorResult<PropChange> => {
   const currentProps = fiber.memoizedProps || {};
   const prevProps = fiber.alternate?.memoizedProps || {};
 
@@ -207,9 +187,7 @@ export const collectPropsChanges = (
   return { current, prev, changes };
 };
 
-export const collectStateChanges = (
-  fiber: Fiber,
-): CollectorResult<StateChange> => {
+export const collectStateChanges = (fiber: Fiber): CollectorResult<StateChange> => {
   const current = getStateFromFiber(fiber);
   const prev = fiber.alternate ? getStateFromFiber(fiber.alternate) : {};
   const changes: Array<StateChange> = [];
@@ -228,13 +206,9 @@ export const collectStateChanges = (
   return { current, prev, changes };
 };
 
-export const collectContextChanges = (
-  fiber: Fiber,
-): CollectorResult<ContextChange> => {
+export const collectContextChanges = (fiber: Fiber): CollectorResult<ContextChange> => {
   const currentContexts = getAllFiberContexts(fiber);
-  const prevContexts = fiber.alternate
-    ? getAllFiberContexts(fiber.alternate)
-    : new Map();
+  const prevContexts = fiber.alternate ? getAllFiberContexts(fiber.alternate) : new Map();
 
   const current: Record<string, unknown> = {};
   const prev: Record<string, unknown> = {};
@@ -295,9 +269,7 @@ export const collectInspectorData = (fiber: Fiber): InspectorDataResult => {
     for (const [key, value] of Object.entries(current)) {
       propsData.current.push({
         name: key,
-        value: isPromise(value)
-          ? { type: 'promise', displayValue: 'Promise' }
-          : value,
+        value: isPromise(value) ? { type: "promise", displayValue: "Promise" } : value,
       });
     }
 
@@ -318,8 +290,7 @@ export const collectInspectorData = (fiber: Fiber): InspectorDataResult => {
   }
 
   const stateData = emptySection();
-  const { current: stateCurrent, changes: stateChanges } =
-    collectStateChanges(fiber);
+  const { current: stateCurrent, changes: stateChanges } = collectStateChanges(fiber);
 
   for (const [index, value] of Object.entries(stateCurrent)) {
     const stateKey = fiber.tag === ClassComponentTag ? index : Number(index);
@@ -342,8 +313,7 @@ export const collectInspectorData = (fiber: Fiber): InspectorDataResult => {
   }
 
   const contextData = emptySection();
-  const { current: contextCurrent, changes: contextChanges } =
-    collectContextChanges(fiber);
+  const { current: contextCurrent, changes: contextChanges } = collectContextChanges(fiber);
 
   for (const [name, value] of Object.entries(contextCurrent)) {
     contextData.current.push({ name, value });
@@ -397,9 +367,7 @@ interface ContextInfo {
 // the motivation is this fiber traversal on every rendering fiber is extremely expensive
 const fiberContextsCache = new WeakMap<Fiber, Map<unknown, ContextInfo>>();
 
-export const getAllFiberContexts = (
-  fiber: Fiber,
-): Map<unknown, ContextInfo> => {
+export const getAllFiberContexts = (fiber: Fiber): Map<unknown, ContextInfo> => {
   if (!fiber) {
     return new Map<unknown, ContextInfo>();
   }
@@ -418,8 +386,7 @@ export const getAllFiberContexts = (
     const dependencies = currentFiber.dependencies;
 
     if (dependencies?.firstContext) {
-      let contextItem: ContextDependency<unknown> | null =
-        dependencies.firstContext;
+      let contextItem: ContextDependency<unknown> | null = dependencies.firstContext;
 
       while (contextItem) {
         const memoizedValue = contextItem.memoizedValue;
@@ -428,7 +395,7 @@ export const getAllFiberContexts = (
         if (!contexts.has(memoizedValue)) {
           contexts.set(contextItem.context, {
             value: memoizedValue,
-            displayName: displayName ?? 'UnnamedContext',
+            displayName: displayName ?? "UnnamedContext",
             contextType: null,
           });
         }
@@ -474,9 +441,7 @@ export const collectInspectorDataWithoutCounts = (fiber: Fiber) => {
     for (const [key, value] of Object.entries(current)) {
       propsData.current.push({
         name: key,
-        value: isPromise(value)
-          ? { type: 'promise', displayValue: 'Promise' }
-          : value,
+        value: isPromise(value) ? { type: "promise", displayValue: "Promise" } : value,
       });
     }
 
@@ -494,9 +459,7 @@ export const collectInspectorDataWithoutCounts = (fiber: Fiber) => {
     for (const [key, value] of Object.entries(current)) {
       stateData.current.push({
         name: key,
-        value: isPromise(value)
-          ? { type: 'promise', displayValue: 'Promise' }
-          : value,
+        value: isPromise(value) ? { type: "promise", displayValue: "Promise" } : value,
       });
     }
 
@@ -513,9 +476,7 @@ export const collectInspectorDataWithoutCounts = (fiber: Fiber) => {
   for (const [key, value] of Object.entries(current)) {
     contextData.current.push({
       name: key,
-      value: isPromise(value)
-        ? { type: 'promise', displayValue: 'Promise' }
-        : value,
+      value: isPromise(value) ? { type: "promise", displayValue: "Promise" } : value,
     });
   }
 
diff --git a/packages/scan/src/web/views/inspector/utils.ts b/packages/scan/src/web/views/inspector/utils.ts
index 6db17bfe..4207bb76 100644
--- a/packages/scan/src/web/views/inspector/utils.ts
+++ b/packages/scan/src/web/views/inspector/utils.ts
@@ -7,15 +7,15 @@ import {
   isCompositeFiber,
   isHostFiber,
   traverseFiber,
-} from 'bippy';
-import { type PropsChange, ReactScanInternals } from '~core/index';
-import { ChangeReason } from '~core/instrumentation';
-import { isEqual } from '~core/utils';
-import { globalInspectorState } from '.';
-import type { ExtendedReactRenderer } from '../../../types';
-import { TIMELINE_MAX_UPDATES } from './states';
-import type { MinimalFiberInfo } from './states';
-import { getAllFiberContexts, getStateNames } from './timeline/utils';
+} from "bippy";
+import { type PropsChange, ReactScanInternals } from "~core/index";
+import { ChangeReason } from "~core/instrumentation";
+import { isEqual } from "~core/utils";
+import { globalInspectorState } from ".";
+import type { ExtendedReactRenderer } from "../../../types";
+import { TIMELINE_MAX_UPDATES } from "./states";
+import type { MinimalFiberInfo } from "./states";
+import { getAllFiberContexts, getStateNames } from "./timeline/utils";
 
 interface StateItem {
   name: string;
@@ -25,19 +25,19 @@ interface StateItem {
 // todo, change this to currently focused fiber
 export type States =
   | {
-      kind: 'inspecting';
+      kind: "inspecting";
       hoveredDomElement: Element | null;
     }
   | {
-      kind: 'inspect-off';
+      kind: "inspect-off";
     }
   | {
-      kind: 'focused';
+      kind: "focused";
       focusedDomElement: Element;
       fiber: Fiber;
     }
   | {
-      kind: 'uninitialized';
+      kind: "uninitialized";
     };
 
 interface ReactRootContainer {
@@ -55,7 +55,7 @@ interface ReactInternalProps {
 }
 
 export const getFiberFromElement = (element: Element): Fiber | null => {
-  if ('__REACT_DEVTOOLS_GLOBAL_HOOK__' in window) {
+  if ("__REACT_DEVTOOLS_GLOBAL_HOOK__" in window) {
     const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
     if (!hook?.renderers) return null;
 
@@ -69,17 +69,14 @@ export const getFiberFromElement = (element: Element): Fiber | null => {
     }
   }
 
-  if ('_reactRootContainer' in element) {
+  if ("_reactRootContainer" in element) {
     const elementWithRoot = element as unknown as ReactRootContainer;
     const rootContainer = elementWithRoot._reactRootContainer;
     return rootContainer?._internalRoot?.current?.child ?? null;
   }
 
   for (const key in element) {
-    if (
-      key.startsWith('__reactInternalInstance$') ||
-      key.startsWith('__reactFiber')
-    ) {
+    if (key.startsWith("__reactInternalInstance$") || key.startsWith("__reactFiber")) {
       const elementWithFiber = element as unknown as ReactInternalProps;
       return elementWithFiber[key];
     }
@@ -87,7 +84,7 @@ export const getFiberFromElement = (element: Element): Fiber | null => {
   return null;
 };
 
-export const getFirstStateNode = (fiber: Fiber): Element | null => {
+const getFirstStateNode = (fiber: Fiber): Element | null => {
   let current: Fiber | null = fiber;
   while (current) {
     if (current.stateNode instanceof Element) {
@@ -113,9 +110,7 @@ export const getFirstStateNode = (fiber: Fiber): Element | null => {
   return null;
 };
 
-export const getNearestFiberFromElement = (
-  element: Element | null,
-): Fiber | null => {
+const getNearestFiberFromElement = (element: Element | null): Fiber | null => {
   if (!element) return null;
 
   try {
@@ -129,9 +124,7 @@ export const getNearestFiberFromElement = (
   }
 };
 
-export const getParentCompositeFiber = (
-  fiber: Fiber,
-): readonly [Fiber, Fiber | null] | null => {
+export const getParentCompositeFiber = (fiber: Fiber): readonly [Fiber, Fiber | null] | null => {
   let current: Fiber | null = fiber;
   let prevHost: Fiber | null = null;
 
@@ -144,7 +137,6 @@ export const getParentCompositeFiber = (
   return null;
 };
 
-
 const isFiberInTree = (fiber: Fiber, root: Fiber): boolean => {
   {
     // const root= fiberRootCache.get(fiber) || (fiber.alternate && fiberRootCache.get(fiber.alternate) )
@@ -157,7 +149,7 @@ const isFiberInTree = (fiber: Fiber, root: Fiber): boolean => {
   }
 };
 
-export const isCurrentTree = (fiber: Fiber) => {
+const isCurrentTree = (fiber: Fiber) => {
   let curr: Fiber | null = fiber;
   let rootFiber: Fiber | null = null;
 
@@ -226,10 +218,7 @@ export const getCompositeComponentFromElement = (element: Element) => {
   };
 };
 
-export const getCompositeFiberFromElement = (
-  element: Element,
-  knownFiber?: Fiber,
-) => {
+export const getCompositeFiberFromElement = (element: Element, knownFiber?: Fiber) => {
   if (!element.isConnected) return {};
 
   let fiber = knownFiber ?? getNearestFiberFromElement(element);
@@ -256,9 +245,7 @@ export const getCompositeFiberFromElement = (
   if (!rootFiber || !currentRootFiber) return {};
 
   // Get the current associated fiber using cached root
-  fiber = isFiberInTree(fiber, currentRootFiber)
-    ? fiber
-    : (fiber.alternate ?? fiber);
+  fiber = isFiberInTree(fiber, currentRootFiber) ? fiber : (fiber.alternate ?? fiber);
   if (!fiber) return {};
 
   if (!getFirstStateNode(fiber)) return {};
@@ -281,7 +268,7 @@ export const getChangedPropsDetailed = (fiber: Fiber): Array<PropsChange> => {
   const changes: Array<PropsChange> = [];
 
   for (const key in currentProps) {
-    if (key === 'children') continue;
+    if (key === "children") continue;
 
     const currentValue = currentProps[key];
     const prevValue = previousProps[key];
@@ -300,27 +287,21 @@ export const getChangedPropsDetailed = (fiber: Fiber): Array<PropsChange> => {
 };
 
 export interface OverrideMethods {
-  overrideProps:
-    | ((fiber: Fiber, path: string[], value: unknown) => void)
-    | null;
-  overrideHookState:
-    | ((fiber: Fiber, id: string, path: string[], value: unknown) => void)
-    | null;
-  overrideContext:
-    | ((fiber: Fiber, contextType: unknown, value: unknown) => void)
-    | null;
+  overrideProps: ((fiber: Fiber, path: string[], value: unknown) => void) | null;
+  overrideHookState: ((fiber: Fiber, id: string, path: string[], value: unknown) => void) | null;
+  overrideContext: ((fiber: Fiber, contextType: unknown, value: unknown) => void) | null;
 }
 
 const isRecord = (value: unknown): value is Record<string, unknown> => {
-  return value !== null && typeof value === 'object';
+  return value !== null && typeof value === "object";
 };
 
-export const getOverrideMethods = (): OverrideMethods => {
-  let overrideProps: OverrideMethods['overrideProps'] = null;
-  let overrideHookState: OverrideMethods['overrideHookState'] = null;
-  let overrideContext: OverrideMethods['overrideContext'] = null;
+const getOverrideMethods = (): OverrideMethods => {
+  let overrideProps: OverrideMethods["overrideProps"] = null;
+  let overrideHookState: OverrideMethods["overrideHookState"] = null;
+  let overrideContext: OverrideMethods["overrideContext"] = null;
 
-  if ('__REACT_DEVTOOLS_GLOBAL_HOOK__' in window) {
+  if ("__REACT_DEVTOOLS_GLOBAL_HOOK__" in window) {
     const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
     if (!hook?.renderers) {
       return {
@@ -336,12 +317,7 @@ export const getOverrideMethods = (): OverrideMethods => {
 
         if (overrideHookState) {
           const prevOverrideHookState = overrideHookState;
-          overrideHookState = (
-            fiber: Fiber,
-            id: string,
-            path: string[],
-            value: unknown,
-          ) => {
+          overrideHookState = (fiber: Fiber, id: string, path: string[], value: unknown) => {
             // Find the hook
             let current = fiber.memoizedState;
             for (let i = 0; i < Number(id); i++) {
@@ -352,7 +328,7 @@ export const getOverrideMethods = (): OverrideMethods => {
             if (current?.queue) {
               // Update through React's queue mechanism
               const queue = current.queue;
-              if (isRecord(queue) && 'dispatch' in queue) {
+              if (isRecord(queue) && "dispatch" in queue) {
                 const dispatch = queue.dispatch as (value: unknown) => void;
                 dispatch(value);
                 return;
@@ -370,11 +346,7 @@ export const getOverrideMethods = (): OverrideMethods => {
 
         if (overrideProps) {
           const prevOverrideProps = overrideProps;
-          overrideProps = (
-            fiber: Fiber,
-            path: Array<string>,
-            value: unknown,
-          ) => {
+          overrideProps = (fiber: Fiber, path: Array<string>, value: unknown) => {
             // Chain updates through all renderers to maintain consistency
             prevOverrideProps(fiber, path, value);
             devToolsRenderer.overrideProps?.(fiber, path, value);
@@ -385,11 +357,7 @@ export const getOverrideMethods = (): OverrideMethods => {
 
         // For context, we don't need the chaining pattern since we're using overrideProps internally
         // to update the context provider's value prop, which already handles the chaining
-        overrideContext = (
-          fiber: Fiber,
-          contextType: unknown,
-          value: unknown,
-        ) => {
+        overrideContext = (fiber: Fiber, contextType: unknown, value: unknown) => {
           // Find the provider fiber for this context
           let current: Fiber | null = fiber;
           while (current) {
@@ -397,9 +365,9 @@ export const getOverrideMethods = (): OverrideMethods => {
             if (type === contextType || type?.Provider === contextType) {
               // Found the provider, update both current and alternate fibers
               if (overrideProps) {
-                overrideProps(current, ['value'], value);
+                overrideProps(current, ["value"], value);
                 if (current.alternate) {
-                  overrideProps(current.alternate, ['value'], value);
+                  overrideProps(current.alternate, ["value"], value);
                 }
               }
               break;
@@ -417,35 +385,35 @@ export const getOverrideMethods = (): OverrideMethods => {
 };
 
 export const nonVisualTags = new Set([
-  'HTML',
-  'HEAD',
-  'META',
-  'TITLE',
-  'BASE',
-  'SCRIPT',
-  'SCRIPT',
-  'STYLE',
-  'LINK',
-  'NOSCRIPT',
-  'SOURCE',
-  'TRACK',
-  'EMBED',
-  'OBJECT',
-  'PARAM',
-  'TEMPLATE',
-  'PORTAL',
-  'SLOT',
-  'AREA',
-  'XML',
-  'DOCTYPE',
-  'COMMENT',
+  "HTML",
+  "HEAD",
+  "META",
+  "TITLE",
+  "BASE",
+  "SCRIPT",
+  "SCRIPT",
+  "STYLE",
+  "LINK",
+  "NOSCRIPT",
+  "SOURCE",
+  "TRACK",
+  "EMBED",
+  "OBJECT",
+  "PARAM",
+  "TEMPLATE",
+  "PORTAL",
+  "SLOT",
+  "AREA",
+  "XML",
+  "DOCTYPE",
+  "COMMENT",
 ]);
 
 export const findComponentDOMNode = (
   fiber: Fiber,
   excludeNonVisualTags = true,
 ): HTMLElement | null => {
-  if (fiber.stateNode && 'nodeType' in fiber.stateNode) {
+  if (fiber.stateNode && "nodeType" in fiber.stateNode) {
     const element = fiber.stateNode as HTMLElement;
     if (
       excludeNonVisualTags &&
@@ -479,9 +447,7 @@ export const getInspectableElements = (
 ): Array<InspectableElement> => {
   const result: Array<InspectableElement> = [];
 
-  const findInspectableFiber = (
-    element: HTMLElement | null,
-  ): HTMLElement | null => {
+  const findInspectableFiber = (element: HTMLElement | null): HTMLElement | null => {
     if (!element) return null;
 
     const { parentCompositeFiber } = getCompositeComponentFromElement(element);
@@ -494,15 +460,14 @@ export const getInspectableElements = (
   const traverse = (element: HTMLElement, depth = 0) => {
     const inspectable = findInspectableFiber(element);
     if (inspectable) {
-      const { parentCompositeFiber } =
-        getCompositeComponentFromElement(inspectable);
+      const { parentCompositeFiber } = getCompositeComponentFromElement(inspectable);
 
       if (!parentCompositeFiber) return;
 
       result.push({
         element: inspectable,
         depth,
-        name: getDisplayName(parentCompositeFiber.type) ?? 'Unknown',
+        name: getDisplayName(parentCompositeFiber.type) ?? "Unknown",
         fiber: parentCompositeFiber,
       });
     }
@@ -519,14 +484,10 @@ export const getInspectableElements = (
 
 const fiberMap = new WeakMap<HTMLElement, Fiber>();
 
-export const getInspectableAncestors = (
-  element: HTMLElement,
-): Array<InspectableElement> => {
+const getInspectableAncestors = (element: HTMLElement): Array<InspectableElement> => {
   const result: Array<InspectableElement> = [];
 
-  const findInspectableFiber = (
-    element: HTMLElement | null,
-  ): HTMLElement | null => {
+  const findInspectableFiber = (element: HTMLElement | null): HTMLElement | null => {
     if (!element) return null;
     const { parentCompositeFiber } = getCompositeComponentFromElement(element);
     if (!parentCompositeFiber) return null;
@@ -550,7 +511,7 @@ export const getInspectableAncestors = (
         result.unshift({
           element: inspectable,
           depth: 0,
-          name: getDisplayName(fiber.type) ?? 'Unknown',
+          name: getDisplayName(fiber.type) ?? "Unknown",
           fiber,
         });
       }
@@ -562,7 +523,7 @@ export const getInspectableAncestors = (
 };
 
 type DiffResult = {
-  type: 'primitive' | 'reference' | 'object';
+  type: "primitive" | "reference" | "object";
   changes: Array<{
     path: string[];
     prevValue: unknown;
@@ -607,8 +568,8 @@ export type AggregatedChanges = {
   name: string;
 };
 
-export const isExpandable = (value: unknown): value is InspectableValue => {
-  if (value === null || typeof value !== 'object' || isPromise(value)) {
+const isExpandable = (value: unknown): value is InspectableValue => {
+  if (value === null || typeof value !== "object" || isPromise(value)) {
     return false;
   }
 
@@ -635,29 +596,22 @@ export const isExpandable = (value: unknown): value is InspectableValue => {
   return Object.keys(value).length > 0;
 };
 
-export const isEditableValue = (
-  value: unknown,
-  parentPath?: string,
-): boolean => {
+const isEditableValue = (value: unknown, parentPath?: string): boolean => {
   if (value == null) return true;
 
   if (isPromise(value)) return false;
 
-  if (typeof value === 'function') {
+  if (typeof value === "function") {
     return false;
   }
 
   if (parentPath) {
-    const parts = parentPath.split('.');
-    let currentPath = '';
+    const parts = parentPath.split(".");
+    let currentPath = "";
     for (const part of parts) {
       currentPath = currentPath ? `${currentPath}.${part}` : part;
       const obj = globalInspectorState.lastRendered.get(currentPath);
-      if (
-        obj instanceof DataView ||
-        obj instanceof ArrayBuffer ||
-        ArrayBuffer.isView(obj)
-      ) {
+      if (obj instanceof DataView || obj instanceof ArrayBuffer || ArrayBuffer.isView(obj)) {
         return false;
       }
     }
@@ -670,10 +624,10 @@ export const isEditableValue = (
       return true;
     default:
       switch (typeof value) {
-        case 'string':
-        case 'number':
-        case 'boolean':
-        case 'bigint':
+        case "string":
+        case "number":
+        case "boolean":
+        case "bigint":
           return true;
         default:
           return false;
@@ -681,7 +635,7 @@ export const isEditableValue = (
   }
 };
 
-export const getPath = (
+const getPath = (
   componentName: string,
   section: string,
   parentPath: string,
@@ -691,53 +645,53 @@ export const getPath = (
     return `${componentName}.${parentPath}.${key}`;
   }
 
-  if (section === 'context' && !key.startsWith('context.')) {
+  if (section === "context" && !key.startsWith("context.")) {
     return `${componentName}.${section}.context.${key}`;
   }
 
   return `${componentName}.${section}.${key}`;
 };
 
-export const sanitizeString = (value: string): string => {
+const sanitizeString = (value: string): string => {
   return value
-    .replace(/[<>]/g, '')
-    .replace(/javascript:/gi, '')
-    .replace(/data:/gi, '')
-    .replace(/on\w+=/gi, '')
+    .replace(/[<>]/g, "")
+    .replace(/javascript:/gi, "")
+    .replace(/data:/gi, "")
+    .replace(/on\w+=/gi, "")
     .slice(0, 50000);
 };
 
-export const sanitizeErrorMessage = (error: string): string => {
+const sanitizeErrorMessage = (error: string): string => {
   return error
-    .replace(/[<>]/g, '')
-    .replace(/&/g, '&amp;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#x27;')
-    .replace(/\//g, '&#x2F;');
+    .replace(/[<>]/g, "")
+    .replace(/&/g, "&amp;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#x27;")
+    .replace(/\//g, "&#x2F;");
 };
 
-export const formatValue = (value: unknown): string => {
+const formatValue = (value: unknown): string => {
   const metadata = ensureRecord(value);
   return metadata.displayValue as string;
 };
 
 export const formatForClipboard = (value: unknown): string => {
   try {
-    if (value === null) return 'null';
-    if (value === undefined) return 'undefined';
-    if (isPromise(value)) return 'Promise';
+    if (value === null) return "null";
+    if (value === undefined) return "undefined";
+    if (isPromise(value)) return "Promise";
 
-    if (typeof value === 'function') {
+    if (typeof value === "function") {
       const fnStr = value.toString();
       try {
         const formatted = fnStr
-          .replace(/\s+/g, ' ') // Normalize whitespace
-          .replace(/{\s+/g, '{\n  ') // Add newline after {
-          .replace(/;\s+/g, ';\n  ') // Add newline after ;
-          .replace(/}\s*$/g, '\n}') // Add newline before final }
-          .replace(/\(\s+/g, '(') // Remove space after (
-          .replace(/\s+\)/g, ')') // Remove space before )
-          .replace(/,\s+/g, ', '); // Normalize comma spacing
+          .replace(/\s+/g, " ") // Normalize whitespace
+          .replace(/{\s+/g, "{\n  ") // Add newline after {
+          .replace(/;\s+/g, ";\n  ") // Add newline after ;
+          .replace(/}\s*$/g, "\n}") // Add newline before final }
+          .replace(/\(\s+/g, "(") // Remove space after (
+          .replace(/\s+\)/g, ")") // Remove space before )
+          .replace(/,\s+/g, ", "); // Normalize comma spacing
 
         return formatted;
       } catch {
@@ -757,22 +711,14 @@ export const formatForClipboard = (value: unknown): string => {
       case value instanceof Set:
         return JSON.stringify(Array.from(value), null, 2);
       case value instanceof DataView:
-        return JSON.stringify(
-          Array.from(new Uint8Array(value.buffer)),
-          null,
-          2,
-        );
+        return JSON.stringify(Array.from(new Uint8Array(value.buffer)), null, 2);
       case value instanceof ArrayBuffer:
         return JSON.stringify(Array.from(new Uint8Array(value)), null, 2);
-      case ArrayBuffer.isView(value) && 'length' in value:
-        return JSON.stringify(
-          Array.from(value as unknown as ArrayLike<number>),
-          null,
-          2,
-        );
+      case ArrayBuffer.isView(value) && "length" in value:
+        return JSON.stringify(Array.from(value as unknown as ArrayLike<number>), null, 2);
       case Array.isArray(value):
         return JSON.stringify(value, null, 2);
-      case typeof value === 'object':
+      case typeof value === "object":
         return JSON.stringify(value, null, 2);
       default:
         return String(value);
@@ -782,11 +728,11 @@ export const formatForClipboard = (value: unknown): string => {
   }
 };
 
-export const parseArrayValue = (value: string): Array<unknown> => {
-  if (value.trim() === '[]') return [];
+const parseArrayValue = (value: string): Array<unknown> => {
+  if (value.trim() === "[]") return [];
 
   const result: Array<unknown> = [];
-  let current = '';
+  let current = "";
   let depth = 0;
   let inString = false;
   let escapeNext = false;
@@ -800,7 +746,7 @@ export const parseArrayValue = (value: string): Array<unknown> => {
       continue;
     }
 
-    if (char === '\\') {
+    if (char === "\\") {
       escapeNext = true;
     }
 
@@ -815,23 +761,23 @@ export const parseArrayValue = (value: string): Array<unknown> => {
       continue;
     }
 
-    if (char === '[' || char === '{') {
+    if (char === "[" || char === "{") {
       depth++;
       current += char;
       continue;
     }
 
-    if (char === ']' || char === '}') {
+    if (char === "]" || char === "}") {
       depth--;
       current += char;
       continue;
     }
 
-    if (char === ',' && depth === 0) {
+    if (char === "," && depth === 0) {
       if (current.trim()) {
-        result.push(parseValue(current.trim(), ''));
+        result.push(parseValue(current.trim(), ""));
       }
-      current = '';
+      current = "";
       continue;
     }
 
@@ -839,26 +785,26 @@ export const parseArrayValue = (value: string): Array<unknown> => {
   }
 
   if (current.trim()) {
-    result.push(parseValue(current.trim(), ''));
+    result.push(parseValue(current.trim(), ""));
   }
 
   return result;
 };
 
-export const parseValue = (value: string, currentType: unknown): unknown => {
+const parseValue = (value: string, currentType: unknown): unknown => {
   try {
     switch (typeof currentType) {
-      case 'number':
+      case "number":
         return Number(value);
-      case 'string':
+      case "string":
         return value;
-      case 'boolean':
-        return value === 'true';
-      case 'bigint':
+      case "boolean":
+        return value === "true";
+      case "bigint":
         return BigInt(value);
-      case 'undefined':
+      case "undefined":
         return undefined;
-      case 'object': {
+      case "object": {
         if (!currentType) {
           return null;
         }
@@ -882,13 +828,10 @@ export const parseValue = (value: string, currentType: unknown): unknown => {
         if (currentType instanceof Map) {
           const entries = value
             .slice(1, -1)
-            .split(', ')
+            .split(", ")
             .map((entry) => {
-              const [key, val] = entry.split(' => ');
-              return [parseValue(key, ''), parseValue(val, '')] as [
-                unknown,
-                unknown,
-              ];
+              const [key, val] = entry.split(" => ");
+              return [parseValue(key, ""), parseValue(val, "")] as [unknown, unknown];
             });
           return new Map(entries);
         }
@@ -896,16 +839,16 @@ export const parseValue = (value: string, currentType: unknown): unknown => {
         if (currentType instanceof Set) {
           const values = value
             .slice(1, -1)
-            .split(', ')
-            .map((v) => parseValue(v, ''));
+            .split(", ")
+            .map((v) => parseValue(v, ""));
           return new Set(values);
         }
         const entries = value
           .slice(1, -1)
-          .split(', ')
+          .split(", ")
           .map((entry) => {
-            const [key, val] = entry.split(': ');
-            return [key, parseValue(val, '')];
+            const [key, val] = entry.split(": ");
+            return [key, parseValue(val, "")];
           });
         return Object.fromEntries(entries);
       }
@@ -917,48 +860,44 @@ export const parseValue = (value: string, currentType: unknown): unknown => {
   }
 };
 
-export const detectValueType = (
+const detectValueType = (
   value: string,
 ): {
-  type: 'string' | 'number' | 'undefined' | 'null' | 'boolean';
+  type: "string" | "number" | "undefined" | "null" | "boolean";
   value: unknown;
 } => {
   const trimmed = value.trim();
 
   switch (trimmed) {
-    case 'undefined':
-      return { type: 'undefined', value: undefined };
-    case 'null':
-      return { type: 'null', value: null };
-    case 'true':
-      return { type: 'boolean', value: true };
-    case 'false':
-      return { type: 'boolean', value: false };
+    case "undefined":
+      return { type: "undefined", value: undefined };
+    case "null":
+      return { type: "null", value: null };
+    case "true":
+      return { type: "boolean", value: true };
+    case "false":
+      return { type: "boolean", value: false };
   }
 
   if (/^".*"$/.test(trimmed)) {
-    return { type: 'string', value: trimmed.slice(1, -1) };
+    return { type: "string", value: trimmed.slice(1, -1) };
   }
 
   if (/^-?\d+(?:\.\d+)?$/.test(trimmed)) {
-    return { type: 'number', value: Number(trimmed) };
+    return { type: "number", value: Number(trimmed) };
   }
 
-  return { type: 'string', value: `"${trimmed}"` };
+  return { type: "string", value: `"${trimmed}"` };
 };
 
-export const formatInitialValue = (value: unknown): string => {
-  if (value === undefined) return 'undefined';
-  if (value === null) return 'null';
-  if (typeof value === 'string') return `"${value}"`;
+const formatInitialValue = (value: unknown): string => {
+  if (value === undefined) return "undefined";
+  if (value === null) return "null";
+  if (typeof value === "string") return `"${value}"`;
   return String(value);
 };
 
-export const updateNestedValue = (
-  obj: unknown,
-  path: Array<string>,
-  value: unknown,
-): unknown => {
+const updateNestedValue = (obj: unknown, path: Array<string>, value: unknown): unknown => {
   try {
     if (path.length === 0) return value;
 
@@ -967,7 +906,7 @@ export const updateNestedValue = (
     // Handle our special array of {name, value} pairs
     if (
       Array.isArray(obj) &&
-      obj.every((item): item is StateItem => 'name' in item && 'value' in item)
+      obj.every((item): item is StateItem => "name" in item && "value" in item)
     ) {
       const index = obj.findIndex((item) => item.name === key);
       if (index === -1) return obj;
@@ -1006,17 +945,13 @@ export const updateNestedValue = (
       return newArray;
     }
 
-    if (obj && typeof obj === 'object') {
+    if (obj && typeof obj === "object") {
       if (rest.length === 0) {
         return { ...obj, [key]: value };
       }
       return {
         ...obj,
-        [key]: updateNestedValue(
-          (obj as Record<string, unknown>)[key],
-          rest,
-          value,
-        ),
+        [key]: updateNestedValue((obj as Record<string, unknown>)[key], rest, value),
       };
     }
 
@@ -1026,10 +961,10 @@ export const updateNestedValue = (
   }
 };
 
-export const areFunctionsEqual = (prev: unknown, current: unknown): boolean => {
+const areFunctionsEqual = (prev: unknown, current: unknown): boolean => {
   try {
     // Check if both values are actually functions
-    if (typeof prev !== 'function' || typeof current !== 'function') {
+    if (typeof prev !== "function" || typeof current !== "function") {
       return false;
     }
 
@@ -1047,13 +982,13 @@ export const getObjectDiff = (
   seen = new WeakSet(),
 ): DiffResult => {
   if (prev === current) {
-    return { type: 'primitive', changes: [], hasDeepChanges: false };
+    return { type: "primitive", changes: [], hasDeepChanges: false };
   }
 
-  if (typeof prev === 'function' && typeof current === 'function') {
+  if (typeof prev === "function" && typeof current === "function") {
     const isSameFunction = areFunctionsEqual(prev, current);
     return {
-      type: 'primitive',
+      type: "primitive",
       changes: [
         {
           path,
@@ -1071,11 +1006,11 @@ export const getObjectDiff = (
     current === null ||
     prev === undefined ||
     current === undefined ||
-    typeof prev !== 'object' ||
-    typeof current !== 'object'
+    typeof prev !== "object" ||
+    typeof current !== "object"
   ) {
     return {
-      type: 'primitive',
+      type: "primitive",
       changes: [{ path, prevValue: prev, currentValue: current }],
       hasDeepChanges: true,
     };
@@ -1083,8 +1018,8 @@ export const getObjectDiff = (
 
   if (seen.has(prev) || seen.has(current)) {
     return {
-      type: 'object',
-      changes: [{ path, prevValue: '[Circular]', currentValue: '[Circular]' }],
+      type: "object",
+      changes: [{ path, prevValue: "[Circular]", currentValue: "[Circular]" }],
       hasDeepChanges: false,
     };
   }
@@ -1094,10 +1029,7 @@ export const getObjectDiff = (
 
   const prevObj = prev as Record<string, unknown>;
   const currentObj = current as Record<string, unknown>;
-  const allKeys = new Set([
-    ...Object.keys(prevObj),
-    ...Object.keys(currentObj),
-  ]);
+  const allKeys = new Set([...Object.keys(prevObj), ...Object.keys(currentObj)]);
   const changes: Array<DiffChange> = [];
   let hasDeepChanges = false;
 
@@ -1107,17 +1039,12 @@ export const getObjectDiff = (
 
     if (prevValue !== currentValue) {
       if (
-        typeof prevValue === 'object' &&
-        typeof currentValue === 'object' &&
+        typeof prevValue === "object" &&
+        typeof currentValue === "object" &&
         prevValue !== null &&
         currentValue !== null
       ) {
-        const nestedDiff = getObjectDiff(
-          prevValue,
-          currentValue,
-          [...path, key],
-          seen,
-        );
+        const nestedDiff = getObjectDiff(prevValue, currentValue, [...path, key], seen);
         changes.push(...nestedDiff.changes);
         if (nestedDiff.hasDeepChanges) {
           hasDeepChanges = true;
@@ -1134,14 +1061,14 @@ export const getObjectDiff = (
   }
 
   return {
-    type: 'object',
+    type: "object",
     changes,
     hasDeepChanges,
   };
 };
 
 export const formatPath = (path: string[]): string => {
-  if (path.length === 0) return '';
+  if (path.length === 0) return "";
 
   return path.reduce((acc, segment, i) => {
     // Check if segment is a number (array index)
@@ -1150,31 +1077,31 @@ export const formatPath = (path: string[]): string => {
     }
     // Add dot separator only if not first segment and previous segment wasn't an array index
     return i === 0 ? segment : `${acc}.${segment}`;
-  }, '');
+  }, "");
 };
 
-export const formatFunctionBody = (body: string): string => {
+const formatFunctionBody = (body: string): string => {
   // Remove newlines and extra spaces
-  let formatted = body.replace(/\s+/g, ' ').trim();
+  let formatted = body.replace(/\s+/g, " ").trim();
 
   // Add newlines after {, ; and before }
   formatted = formatted
-    .replace(/{/g, '{\n  ')
-    .replace(/;/g, ';\n  ')
-    .replace(/}/g, '\n}')
-    .replace(/{\s+}/g, '{ }'); // Clean up empty blocks
+    .replace(/{/g, "{\n  ")
+    .replace(/;/g, ";\n  ")
+    .replace(/}/g, "\n}")
+    .replace(/{\s+}/g, "{ }"); // Clean up empty blocks
 
   // Clean up arrow functions
-  formatted = formatted.replace(/=> {\n/g, '=> {').replace(/\n\s*}\s*$/g, ' }');
+  formatted = formatted.replace(/=> {\n/g, "=> {").replace(/\n\s*}\s*$/g, " }");
 
   return formatted;
 };
 
-export function hackyJsFormatter(code: string) {
+function hackyJsFormatter(code: string) {
   //
   // 1) Collapse runs of whitespace to single spaces
   //
-  const normalizedCode = code.replace(/\s+/g, ' ').trim();
+  const normalizedCode = code.replace(/\s+/g, " ").trim();
 
   //
   // 2) Tokenize
@@ -1193,15 +1120,15 @@ export function hackyJsFormatter(code: string) {
   //    We'll also try to combine () or [] or {} or <> if they appear empty.
   //
   const rawTokens = [];
-  let current = '';
+  let current = "";
   for (let i = 0; i < normalizedCode.length; i++) {
     const c = normalizedCode[i];
 
     // Detect arrow =>
-    if (c === '=' && normalizedCode[i + 1] === '>') {
+    if (c === "=" && normalizedCode[i + 1] === ">") {
       if (current.trim()) rawTokens.push(current.trim());
-      rawTokens.push('=>');
-      current = '';
+      rawTokens.push("=>");
+      current = "";
       i++;
       continue;
     }
@@ -1213,13 +1140,13 @@ export function hackyJsFormatter(code: string) {
         rawTokens.push(current.trim());
       }
       rawTokens.push(c);
-      current = '';
+      current = "";
     } else if (/\s/.test(c)) {
       // whitespace ends the current token
       if (current.trim()) {
         rawTokens.push(current.trim());
       }
-      current = '';
+      current = "";
     } else {
       current += c;
     }
@@ -1237,10 +1164,10 @@ export function hackyJsFormatter(code: string) {
     const t = rawTokens[i];
     const n = rawTokens[i + 1];
     if (
-      (t === '(' && n === ')') ||
-      (t === '[' && n === ']') ||
-      (t === '{' && n === '}') ||
-      (t === '<' && n === '>')
+      (t === "(" && n === ")") ||
+      (t === "[" && n === "]") ||
+      (t === "{" && n === "}") ||
+      (t === "<" && n === ">")
     ) {
       merged.push(t + n); // '()', '[]', '{}', '<>'
       i++;
@@ -1262,11 +1189,7 @@ export function hackyJsFormatter(code: string) {
   const arrowParamSet = new Set(); // indexes inside arrow param lists
   const genericSet = new Set(); // indexes inside generics <...>
 
-  function findMatchingPair(
-    openTok: string,
-    closeTok: string,
-    startIndex: number,
-  ) {
+  function findMatchingPair(openTok: string, closeTok: string, startIndex: number) {
     // e.g. openTok = '(', closeTok = ')'
     let depth = 0;
     for (let j = startIndex; j < merged.length; j++) {
@@ -1283,9 +1206,9 @@ export function hackyJsFormatter(code: string) {
   // Detect arrow param sets
   for (let i = 0; i < merged.length; i++) {
     const t = merged[i];
-    if (t === '(') {
-      const closeIndex = findMatchingPair('(', ')', i);
-      if (closeIndex !== -1 && merged[closeIndex + 1] === '=>') {
+    if (t === "(") {
+      const closeIndex = findMatchingPair("(", ")", i);
+      if (closeIndex !== -1 && merged[closeIndex + 1] === "=>") {
         // Mark all tokens from i..closeIndex as arrow param
         for (let k = i; k <= closeIndex; k++) {
           arrowParamSet.add(k);
@@ -1301,8 +1224,8 @@ export function hackyJsFormatter(code: string) {
     const prev = merged[i - 1];
     const t = merged[i];
     // If prev is an identifier and t is '<', find matching '>'
-    if (/^[a-zA-Z0-9_$]+$/.test(prev) && t === '<') {
-      const closeIndex = findMatchingPair('<', '>', i);
+    if (/^[a-zA-Z0-9_$]+$/.test(prev) && t === "<") {
+      const closeIndex = findMatchingPair("<", ">", i);
       if (closeIndex !== -1) {
         // Mark i..closeIndex as generic
         for (let k = i; k <= closeIndex; k++) {
@@ -1316,15 +1239,15 @@ export function hackyJsFormatter(code: string) {
   // 5) Build lines with indentation. We maintain a stack for open brackets.
   //
   let indentLevel = 0;
-  const indentStr = '  '; // 2 spaces
+  const indentStr = "  "; // 2 spaces
   const lines: Array<string> = [];
-  let line = '';
+  let line = "";
 
   function pushLine() {
     if (line.trim()) {
-      lines.push(line.replace(/\s+$/, ''));
+      lines.push(line.replace(/\s+$/, ""));
     }
-    line = '';
+    line = "";
   }
   function newLine() {
     pushLine();
@@ -1351,38 +1274,30 @@ export function hackyJsFormatter(code: string) {
 
   for (let i = 0; i < merged.length; i++) {
     const tok = merged[i];
-    const next = merged[i + 1] || '';
+    const next = merged[i + 1] || "";
 
     // Open brackets
-    if (['(', '{', '[', '<'].includes(tok)) {
+    if (["(", "{", "[", "<"].includes(tok)) {
       placeToken(tok);
       stack.push(tok);
 
       // If '{', definitely newline + indent
-      if (tok === '{') {
+      if (tok === "{") {
         indentLevel++;
         newLine();
-      } else if (tok === '(' || tok === '[' || tok === '<') {
+      } else if (tok === "(" || tok === "[" || tok === "<") {
         // If we are in arrowParamSet or genericSet, keep it on one line
-        if (
-          (arrowParamSet.has(i) && tok === '(') ||
-          (genericSet.has(i) && tok === '<')
-        ) {
+        if ((arrowParamSet.has(i) && tok === "(") || (genericSet.has(i) && tok === "<")) {
           // Don't break lines after commas etc.
           // We won't do multiline logic for these.
         } else {
           // If next is not a direct close, go multiline
           const directClose = {
-            '(': ')',
-            '[': ']',
-            '<': '>',
+            "(": ")",
+            "[": "]",
+            "<": ">",
           }[tok];
-          if (
-            next !== directClose &&
-            next !== '()' &&
-            next !== '[]' &&
-            next !== '<>'
-          ) {
+          if (next !== directClose && next !== "()" && next !== "[]" && next !== "<>") {
             indentLevel++;
             newLine();
           }
@@ -1391,29 +1306,26 @@ export function hackyJsFormatter(code: string) {
     }
 
     // Close brackets
-    else if ([')', '}', ']', '>'].includes(tok)) {
+    else if ([")", "}", "]", ">"].includes(tok)) {
       // pop stack
       const opening = stackTop();
       if (
-        (tok === ')' && opening === '(') ||
-        (tok === ']' && opening === '[') ||
-        (tok === '>' && opening === '<')
+        (tok === ")" && opening === "(") ||
+        (tok === "]" && opening === "[") ||
+        (tok === ">" && opening === "<")
       ) {
         // if not arrowParamSet or genericSet, multiline
-        if (
-          !(arrowParamSet.has(i) && tok === ')') &&
-          !(genericSet.has(i) && tok === '>')
-        ) {
+        if (!(arrowParamSet.has(i) && tok === ")") && !(genericSet.has(i) && tok === ">")) {
           indentLevel = Math.max(indentLevel - 1, 0);
           newLine();
         }
-      } else if (tok === '}' && opening === '{') {
+      } else if (tok === "}" && opening === "{") {
         indentLevel = Math.max(indentLevel - 1, 0);
         newLine();
       }
       stack.pop();
       placeToken(tok);
-      if (tok === '}') {
+      if (tok === "}") {
         // break line after }
         newLine();
       }
@@ -1424,26 +1336,23 @@ export function hackyJsFormatter(code: string) {
       placeToken(tok);
 
       // Arrow =>
-    } else if (tok === '=>') {
+    } else if (tok === "=>") {
       placeToken(tok);
       // We'll let the next token (maybe '{') handle line breaks.
 
       // Semicolon
-    } else if (tok === ';') {
+    } else if (tok === ";") {
       placeToken(tok, true);
       newLine();
 
       // Comma
-    } else if (tok === ',') {
+    } else if (tok === ",") {
       placeToken(tok, true);
       // If inside an arrow param set or generic set, don't break
       // Otherwise, if top is {, (, [ or <, break line
       const top = stackTop();
-      if (
-        !(arrowParamSet.has(i) && top === '(') &&
-        !(genericSet.has(i) && top === '<')
-      ) {
-        if (top && ['{', '[', '(', '<'].includes(top)) {
+      if (!(arrowParamSet.has(i) && top === "(") && !(genericSet.has(i) && top === "<")) {
+        if (top && ["{", "[", "(", "<"].includes(top)) {
           newLine();
         }
       }
@@ -1458,25 +1367,20 @@ export function hackyJsFormatter(code: string) {
 
   // Remove extra blank lines
   return lines
-    .join('\n')
-    .replace(/\n\s*\n+/g, '\n')
+    .join("\n")
+    .replace(/\n\s*\n+/g, "\n")
     .trim();
 }
 
 // Update the formatFunctionPreview to use the new formatter
-export const formatFunctionPreview = (
-  fn: { toString(): string },
-  expanded = false,
-): string => {
+export const formatFunctionPreview = (fn: { toString(): string }, expanded = false): string => {
   try {
     const fnStr = fn.toString();
-    const match = fnStr.match(
-      /(?:function\s*)?(?:\(([^)]*)\)|([^=>\s]+))\s*=>?/,
-    );
-    if (!match) return 'ƒ';
+    const match = fnStr.match(/(?:function\s*)?(?:\(([^)]*)\)|([^=>\s]+))\s*=>?/);
+    if (!match) return "ƒ";
 
-    const params = match[1] || match[2] || '';
-    const cleanParams = params.replace(/\s+/g, '');
+    const params = match[1] || match[2] || "";
+    const cleanParams = params.replace(/\s+/g, "");
 
     if (!expanded) {
       return `ƒ (${cleanParams}) => ...`;
@@ -1485,51 +1389,48 @@ export const formatFunctionPreview = (
     // For expanded view, use the new formatter
     return hackyJsFormatter(fnStr);
   } catch {
-    return 'ƒ';
+    return "ƒ";
   }
 };
 
 export const formatValuePreview = (value: unknown): string => {
-  if (value === null) return 'null';
-  if (value === undefined) return 'undefined';
-  if (typeof value === 'string')
+  if (value === null) return "null";
+  if (value === undefined) return "undefined";
+  if (typeof value === "string")
     return `"${value.length > 150 ? `${value.slice(0, 20)}...` : value}"`;
-  if (typeof value === 'number' || typeof value === 'boolean')
-    return String(value);
-  if (typeof value === 'function') return formatFunctionPreview(value);
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  if (typeof value === "function") return formatFunctionPreview(value);
   if (Array.isArray(value)) return `Array(${value.length})`;
   if (value instanceof Map) return `Map(${value.size})`;
   if (value instanceof Set) return `Set(${value.size})`;
   if (value instanceof Date) return value.toISOString();
   if (value instanceof RegExp) return value.toString();
   if (value instanceof Error) return `${value.name}: ${value.message}`;
-  if (typeof value === 'object') {
+  if (typeof value === "object") {
     const keys = Object.keys(value as object);
-    return `{${keys.length > 2 ? `${keys.slice(0, 2).join(', ')}, ...` : keys.join(', ')}}`;
+    return `{${keys.length > 2 ? `${keys.slice(0, 2).join(", ")}, ...` : keys.join(", ")}}`;
   }
   return String(value);
 };
 
-export const safeGetValue = (
-  value: unknown,
-): { value: unknown; error?: string } => {
+export const safeGetValue = (value: unknown): { value: unknown; error?: string } => {
   if (value === null || value === undefined) return { value };
-  if (typeof value === 'function') return { value };
-  if (typeof value !== 'object') return { value };
+  if (typeof value === "function") return { value };
+  if (typeof value !== "object") return { value };
 
   if (isPromise(value)) {
-    return { value: 'Promise' };
+    return { value: "Promise" };
   }
 
   try {
     const proto = Object.getPrototypeOf(value);
-    if (proto === Promise.prototype || proto?.constructor?.name === 'Promise') {
-      return { value: 'Promise' };
+    if (proto === Promise.prototype || proto?.constructor?.name === "Promise") {
+      return { value: "Promise" };
     }
 
     return { value };
   } catch {
-    return { value: null, error: 'Error accessing value' };
+    return { value: null, error: "Error accessing value" };
   }
 };
 
@@ -1541,7 +1442,7 @@ export interface TimelineSliderValues {
   rightValue: number;
 }
 
-export const calculateSliderValues = (
+const calculateSliderValues = (
   totalUpdates: number,
   currentIndex: number,
 ): TimelineSliderValues => {
@@ -1579,10 +1480,10 @@ interface ExtendedMemoizedState extends MemoizedState {
   element?: unknown;
 }
 
-export const isDirectComponent = (fiber: Fiber): boolean => {
+const isDirectComponent = (fiber: Fiber): boolean => {
   if (!fiber || !fiber.type) return false;
 
-  const isFunctionalComponent = typeof fiber.type === 'function';
+  const isFunctionalComponent = typeof fiber.type === "function";
   const isClassComponent = fiber.type?.prototype?.isReactComponent ?? false;
 
   if (!(isFunctionalComponent || isClassComponent)) return false;
@@ -1605,36 +1506,33 @@ export const isDirectComponent = (fiber: Fiber): boolean => {
 };
 
 export const isPromise = (value: unknown): value is Promise<unknown> => {
-  return (
-    !!value &&
-    (value instanceof Promise || (typeof value === 'object' && 'then' in value))
-  );
+  return !!value && (value instanceof Promise || (typeof value === "object" && "then" in value));
 };
 
-export const ensureRecord = (
+const ensureRecord = (
   value: unknown,
   maxDepth = 2,
   seen = new WeakSet<object>(),
 ): Record<string, unknown> => {
   if (isPromise(value)) {
-    return { type: 'promise', displayValue: 'Promise' };
+    return { type: "promise", displayValue: "Promise" };
   }
 
   if (value === null) {
-    return { type: 'null', displayValue: 'null' };
+    return { type: "null", displayValue: "null" };
   }
 
   if (value === undefined) {
-    return { type: 'undefined', displayValue: 'undefined' };
+    return { type: "undefined", displayValue: "undefined" };
   }
 
   switch (typeof value) {
-    case 'object': {
+    case "object": {
       if (seen.has(value)) {
-        return { type: 'circular', displayValue: '[Circular Reference]' };
+        return { type: "circular", displayValue: "[Circular Reference]" };
       }
 
-      if (!value) return { type: 'null', displayValue: 'null' };
+      if (!value) return { type: "null", displayValue: "null" };
 
       seen.add(value);
 
@@ -1642,14 +1540,14 @@ export const ensureRecord = (
         const result: Record<string, unknown> = {};
 
         if (value instanceof Element) {
-          result.type = 'Element';
+          result.type = "Element";
           result.tagName = value.tagName.toLowerCase();
           result.displayValue = value.tagName.toLowerCase();
           return result;
         }
 
         if (value instanceof Map) {
-          result.type = 'Map';
+          result.type = "Map";
           result.size = value.size;
           result.displayValue = `Map(${value.size})`;
 
@@ -1662,8 +1560,8 @@ export const ensureRecord = (
                 entries[String(key)] = ensureRecord(val, maxDepth - 1, seen);
               } catch {
                 entries[String(index)] = {
-                  type: 'error',
-                  displayValue: 'Error accessing Map entry',
+                  type: "error",
+                  displayValue: "Error accessing Map entry",
                 };
               }
               index++;
@@ -1674,7 +1572,7 @@ export const ensureRecord = (
         }
 
         if (value instanceof Set) {
-          result.type = 'Set';
+          result.type = "Set";
           result.size = value.size;
           result.displayValue = `Set(${value.size})`;
 
@@ -1692,21 +1590,21 @@ export const ensureRecord = (
         }
 
         if (value instanceof Date) {
-          result.type = 'Date';
+          result.type = "Date";
           result.value = value.toISOString();
           result.displayValue = value.toLocaleString();
           return result;
         }
 
         if (value instanceof RegExp) {
-          result.type = 'RegExp';
+          result.type = "RegExp";
           result.value = value.toString();
           result.displayValue = value.toString();
           return result;
         }
 
         if (value instanceof Error) {
-          result.type = 'Error';
+          result.type = "Error";
           result.name = value.name;
           result.message = value.message;
           result.displayValue = `${value.name}: ${value.message}`;
@@ -1714,14 +1612,14 @@ export const ensureRecord = (
         }
 
         if (value instanceof ArrayBuffer) {
-          result.type = 'ArrayBuffer';
+          result.type = "ArrayBuffer";
           result.byteLength = value.byteLength;
           result.displayValue = `ArrayBuffer(${value.byteLength})`;
           return result;
         }
 
         if (value instanceof DataView) {
-          result.type = 'DataView';
+          result.type = "DataView";
           result.byteLength = value.byteLength;
           result.displayValue = `DataView(${value.byteLength})`;
           return result;
@@ -1741,25 +1639,23 @@ export const ensureRecord = (
         }
 
         if (Array.isArray(value)) {
-          result.type = 'array';
+          result.type = "array";
           result.length = value.length;
           result.displayValue = `Array(${value.length})`;
 
           if (maxDepth > 0) {
-            result.items = value
-              .slice(0, 50)
-              .map((item) => ensureRecord(item, maxDepth - 1, seen));
+            result.items = value.slice(0, 50).map((item) => ensureRecord(item, maxDepth - 1, seen));
           }
           return result;
         }
 
         const keys = Object.keys(value);
-        result.type = 'object';
+        result.type = "object";
         result.size = keys.length;
         result.displayValue =
           keys.length <= 5
-            ? `{${keys.join(', ')}}`
-            : `{${keys.slice(0, 5).join(', ')}, ...${keys.length - 5}}`;
+            ? `{${keys.join(", ")}}`
+            : `{${keys.slice(0, 5).join(", ")}, ...${keys.length - 5}}`;
 
         if (maxDepth > 0) {
           const entries: Record<string, unknown> = {};
@@ -1772,8 +1668,8 @@ export const ensureRecord = (
               );
             } catch {
               entries[key] = {
-                type: 'error',
-                displayValue: 'Error accessing property',
+                type: "error",
+                displayValue: "Error accessing property",
               };
             }
           }
@@ -1784,17 +1680,17 @@ export const ensureRecord = (
         seen.delete(value);
       }
     }
-    case 'string':
+    case "string":
       return {
-        type: 'string',
+        type: "string",
         value,
         displayValue: `"${value}"`,
       };
-    case 'function':
+    case "function":
       return {
-        type: 'function',
-        displayValue: 'ƒ()',
-        name: value.name || 'anonymous',
+        type: "function",
+        displayValue: "ƒ()",
+        name: value.name || "anonymous",
       };
     default:
       return {
@@ -1805,9 +1701,7 @@ export const ensureRecord = (
   }
 };
 
-export const getCurrentFiberState = (
-  fiber: Fiber,
-): Record<string, unknown> | null => {
+const getCurrentFiberState = (fiber: Fiber): Record<string, unknown> | null => {
   if (fiber.tag !== FunctionComponentTag || !isDirectComponent(fiber)) {
     return null;
   }
@@ -1825,9 +1719,8 @@ export const getCurrentFiberState = (
   return memoizedState;
 };
 
-export const replayComponent = async (fiber: Fiber): Promise<void> => {
-  const { overrideProps, overrideHookState, overrideContext } =
-    getOverrideMethods();
+const replayComponent = async (fiber: Fiber): Promise<void> => {
+  const { overrideProps, overrideHookState, overrideContext } = getOverrideMethods();
   if (!overrideProps || !overrideHookState || !fiber) return;
 
   try {
@@ -1835,8 +1728,8 @@ export const replayComponent = async (fiber: Fiber): Promise<void> => {
     const currentProps = fiber.memoizedProps || {};
     const propKeys = Object.keys(currentProps).filter((key) => {
       const value = currentProps[key];
-      if (Array.isArray(value) || typeof value === 'string') {
-        return !Number.isInteger(Number(key)) && key !== 'length';
+      if (Array.isArray(value) || typeof value === "string") {
+        return !Number.isInteger(Number(key)) && key !== "length";
       }
       return true;
     });
@@ -1847,7 +1740,7 @@ export const replayComponent = async (fiber: Fiber): Promise<void> => {
         // For arrays and objects, we need to clone to trigger updates
         const propValue = Array.isArray(value)
           ? [...value]
-          : typeof value === 'object' && value !== null
+          : typeof value === "object" && value !== null
             ? { ...value }
             : value;
         overrideProps(fiber, [key], propValue);
@@ -1868,7 +1761,7 @@ export const replayComponent = async (fiber: Fiber): Promise<void> => {
             // For arrays and objects, we need to clone to trigger updates
             const stateValue = Array.isArray(value)
               ? [...value]
-              : typeof value === 'object' && value !== null
+              : typeof value === "object" && value !== null
                 ? { ...value }
                 : value;
             overrideHookState(fiber, hookId, [], stateValue);
@@ -1889,7 +1782,7 @@ export const replayComponent = async (fiber: Fiber): Promise<void> => {
             // For arrays and objects, we need to clone to trigger updates
             const stateValue = Array.isArray(value)
               ? [...value]
-              : typeof value === 'object' && value !== null
+              : typeof value === "object" && value !== null
                 ? { ...value }
                 : value;
             overrideHookState(fiber, hookId, [], stateValue);
@@ -1921,9 +1814,9 @@ export const replayComponent = async (fiber: Fiber): Promise<void> => {
                 if (isEqual(currentValue, newValue)) break;
 
                 // Update the provider's value prop
-                overrideProps(current, ['value'], newValue);
+                overrideProps(current, ["value"], newValue);
                 if (current.alternate) {
-                  overrideProps(current.alternate, ['value'], newValue);
+                  overrideProps(current.alternate, ["value"], newValue);
                 }
                 break;
               }
@@ -1946,7 +1839,7 @@ export const replayComponent = async (fiber: Fiber): Promise<void> => {
 export const extractMinimalFiberInfo = (fiber: Fiber): MinimalFiberInfo => {
   const timings = getTimings(fiber);
   return {
-    displayName: getDisplayName(fiber) || 'Unknown',
+    displayName: getDisplayName(fiber) || "Unknown",
     type: fiber.type,
     key: fiber.key,
     id: fiber.index,
diff --git a/packages/scan/src/web/views/inspector/what-changed.tsx b/packages/scan/src/web/views/inspector/what-changed.tsx
index 27d19411..c04b4f14 100644
--- a/packages/scan/src/web/views/inspector/what-changed.tsx
+++ b/packages/scan/src/web/views/inspector/what-changed.tsx
@@ -1,31 +1,23 @@
-import { type ReactNode, memo } from 'preact/compat';
-import {
-  type Dispatch,
-  type StateUpdater,
-  useEffect,
-  useRef,
-  useState,
-} from 'preact/hooks';
-import { CopyToClipboard } from '~web/components/copy-to-clipboard';
-import { Icon } from '~web/components/icon';
-import { cn, throttle } from '~web/utils/helpers';
-import { DiffValueView } from './diff-value';
-import { timelineState } from './states';
+import { type ReactNode, memo } from "preact/compat";
+import { useEffect, useRef, useState } from "preact/hooks";
+import { CopyToClipboard } from "~web/components/copy-to-clipboard";
+import { Icon } from "~web/components/icon";
+import { cn, throttle } from "~web/utils/helpers";
+import { DiffValueView } from "./diff-value";
+import { timelineState } from "./states";
 import {
   AggregatedChanges,
   formatFunctionPreview,
   formatPath,
   getObjectDiff,
   safeGetValue,
-} from './utils';
+} from "./utils";
 import {
   calculateTotalChanges,
   useInspectedFiberChangeStore,
-} from './whats-changed/use-change-store';
-import { getDisplayName, getType } from 'bippy';
-import { Store } from '~core/index';
-
-export type Setter<T> = Dispatch<StateUpdater<T>>;
+} from "./whats-changed/use-change-store";
+import { getDisplayName, getType } from "bippy";
+import { Store } from "~core/index";
 
 export const WhatChanged = /* @__PURE__ */ memo(() => {
   const [isExpanded, setIsExpanded] = useState(true);
@@ -47,18 +39,15 @@ export const WhatChanged = /* @__PURE__ */ memo(() => {
 
   const initializedContextChanges = new Map(
     Array.from(aggregatedChanges.contextChanges.entries())
-      .filter(([, value]) => value.kind === 'initialized')
+      .filter(([, value]) => value.kind === "initialized")
       .map(([key, value]) => [
         key,
         // oxlint-disable-next-line typescript/no-non-null-assertion
-        value.kind === 'partially-initialized' ? null! : value.changes,
+        value.kind === "partially-initialized" ? null! : value.changes,
       ]),
   );
 
-  const fiber =
-    Store.inspectState.value.kind === 'focused'
-      ? Store.inspectState.value.fiber
-      : null;
+  const fiber = Store.inspectState.value.kind === "focused" ? Store.inspectState.value.fiber : null;
 
   if (!fiber) {
     // invariant
@@ -71,25 +60,18 @@ export const WhatChanged = /* @__PURE__ */ memo(() => {
       <div className="overflow-hidden h-full flex flex-col gap-y-2">
         <div className="flex flex-col gap-2 px-3 pt-2">
           <span className="text-sm font-medium text-[#888]">
-            Why did{' '}
-            <span className="text-[#A855F7]">{getDisplayName(fiber)}</span>{' '}
-            render?
+            Why did <span className="text-[#A855F7]">{getDisplayName(fiber)}</span> render?
           </span>
           {!hasAnyChanges && (
             <div className="text-sm text-[#737373] bg-[#1E1E1E] rounded-md p-4 flex flex-col gap-4">
               <div>No changes detected since selecting</div>
               <div>
-                The props, state, and context changes within your component will
-                be reported here
+                The props, state, and context changes within your component will be reported here
               </div>
             </div>
           )}
         </div>
-        <div
-          className={cn(
-            'flex flex-col gap-y-2 pl-3 relative overflow-y-auto h-full',
-          )}
-        >
+        <div className={cn("flex flex-col gap-y-2 pl-3 relative overflow-y-auto h-full")}>
           <Section
             changes={aggregatedChanges.propsChanges}
             title="Changed Props"
@@ -97,10 +79,7 @@ export const WhatChanged = /* @__PURE__ */ memo(() => {
           />
           <Section
             renderName={(name) =>
-              renderStateName(
-                name,
-                getDisplayName(getType(fiber)) ?? 'Unknown Component',
-              )
+              renderStateName(name, getDisplayName(getType(fiber)) ?? "Unknown Component")
             }
             changes={aggregatedChanges.stateChanges}
             title="Changed State"
@@ -127,17 +106,17 @@ const renderStateName = (key: string, componentName: string) => {
     const lastDigit = num % 10;
     const lastTwoDigits = num % 100;
     if (lastTwoDigits >= 11 && lastTwoDigits <= 13) {
-      return 'th';
+      return "th";
     }
     switch (lastDigit) {
       case 1:
-        return 'st';
+        return "st";
       case 2:
-        return 'nd';
+        return "nd";
       case 3:
-        return 'rd';
+        return "rd";
       default:
-        return 'th';
+        return "th";
     }
   };
 
@@ -145,9 +124,9 @@ const renderStateName = (key: string, componentName: string) => {
     <span className="truncate">
       <span className="text-white">
         {n}
-        {getOrdinalSuffix(n)} hook{' '}
+        {getOrdinalSuffix(n)} hook{" "}
       </span>
-      <span style={{ color: '#666' }}>
+      <span style={{ color: "#666" }}>
         called in <i className="text-[#A855F7] truncate">{componentName}</i>
       </span>
     </span>
@@ -172,20 +151,20 @@ const WhatsChangedHeader = memo(() => {
   useEffect(() => {
     const flash = throttle(() => {
       const flashElements = [];
-      if (refProps.current?.dataset.flash === 'true') {
+      if (refProps.current?.dataset.flash === "true") {
         flashElements.push(refProps.current);
       }
-      if (refState.current?.dataset.flash === 'true') {
+      if (refState.current?.dataset.flash === "true") {
         flashElements.push(refState.current);
       }
-      if (refContext.current?.dataset.flash === 'true') {
+      if (refContext.current?.dataset.flash === "true") {
         flashElements.push(refContext.current);
       }
 
       for (const element of flashElements) {
-        element.classList.remove('count-flash-white');
+        element.classList.remove("count-flash-white");
         void element.offsetWidth;
-        element.classList.add('count-flash-white');
+        element.classList.add("count-flash-white");
       }
     }, 400);
 
@@ -209,17 +188,14 @@ const WhatsChangedHeader = memo(() => {
         isContextChanged: (currentUpdate.context?.changes?.size ?? 0) > 0,
       };
 
-      if (refProps.current.dataset.flash !== 'true') {
-        refProps.current.dataset.flash =
-          refStats.current.isPropsChanged.toString();
+      if (refProps.current.dataset.flash !== "true") {
+        refProps.current.dataset.flash = refStats.current.isPropsChanged.toString();
       }
-      if (refState.current.dataset.flash !== 'true') {
-        refState.current.dataset.flash =
-          refStats.current.isStateChanged.toString();
+      if (refState.current.dataset.flash !== "true") {
+        refState.current.dataset.flash = refStats.current.isStateChanged.toString();
       }
-      if (refContext.current.dataset.flash !== 'true') {
-        refContext.current.dataset.flash =
-          refStats.current.isContextChanged.toString();
+      if (refContext.current.dataset.flash !== "true") {
+        refContext.current.dataset.flash = refStats.current.isContextChanged.toString();
       }
     });
 
@@ -230,23 +206,19 @@ const WhatsChangedHeader = memo(() => {
     <button
       type="button"
       className={cn(
-        'react-section-header',
-        'overflow-hidden',
-        'max-h-0',
-        'transition-[max-height]',
+        "react-section-header",
+        "overflow-hidden",
+        "max-h-0",
+        "transition-[max-height]",
       )}
     >
-      <div className={cn('flex-1 react-scan-expandable')}>
+      <div className={cn("flex-1 react-scan-expandable")}>
         <div className="overflow-hidden">
           <div className="flex items-center whitespace-nowrap">
             <div className="flex items-center gap-x-2">What changed?</div>
 
             <div
-              className={cn(
-                'ml-auto',
-                'change-scope',
-                'transition-opacity duration-300 delay-150',
-              )}
+              className={cn("ml-auto", "change-scope", "transition-opacity duration-300 delay-150")}
             >
               <div ref={refProps}>props</div>
               <div ref={refState}>state</div>
@@ -267,121 +239,106 @@ interface SectionProps {
   renderName?: (name: string) => ReactNode;
 }
 const identity = <T,>(x: T) => x;
-const Section = /* @__PURE__ */ memo(
-  ({ title, changes, renderName = identity }: SectionProps) => {
-    const [expandedFns, setExpandedFns] = useState(new Set<string>());
-    const [expandedEntries, setExpandedEntries] = useState(new Set<string>());
+const Section = /* @__PURE__ */ memo(({ title, changes, renderName = identity }: SectionProps) => {
+  const [expandedFns, setExpandedFns] = useState(new Set<string>());
+  const [expandedEntries, setExpandedEntries] = useState(new Set<string>());
 
-    const entries = Array.from(changes.entries());
+  const entries = Array.from(changes.entries());
 
-    if (changes.size === 0) {
-      return null;
-    }
-    return (
-      <div>
-        <div className="text-xs text-[#888] mb-1.5">{title}</div>
-        <div className="flex flex-col gap-2">
-          {entries.map(([entryKey, change]) => {
-            const isEntryExpanded = expandedEntries.has(String(entryKey));
-            const { value: prevValue, error: prevError } = safeGetValue(
-              change.previousValue,
-            );
-            const { value: currValue, error: currError } = safeGetValue(
-              change.currentValue,
-            );
-
-            const diff = getObjectDiff(prevValue, currValue);
-
-            return (
-              <div key={entryKey}>
-                <button
-                  onClick={() => {
-                    setExpandedEntries((prev) => {
-                      const next = new Set(prev);
-                      if (next.has(String(entryKey))) {
-                        next.delete(String(entryKey));
-                      } else {
-                        next.add(String(entryKey));
-                      }
-                      return next;
-                    });
-                  }}
-                  className="flex items-center gap-2 w-full bg-transparent border-none p-0 cursor-pointer text-white text-xs"
-                >
-                  <div className="flex items-center gap-1.5 flex-1">
-                    <Icon
-                      name="icon-chevron-right"
-                      size={12}
-                      className={cn(
-                        'text-[#666] transition-transform duration-200 ease-[cubic-bezier(0.25,0.1,0.25,1)]',
-                        {
-                          'rotate-90': isEntryExpanded,
-                        },
-                      )}
+  if (changes.size === 0) {
+    return null;
+  }
+  return (
+    <div>
+      <div className="text-xs text-[#888] mb-1.5">{title}</div>
+      <div className="flex flex-col gap-2">
+        {entries.map(([entryKey, change]) => {
+          const isEntryExpanded = expandedEntries.has(String(entryKey));
+          const { value: prevValue, error: prevError } = safeGetValue(change.previousValue);
+          const { value: currValue, error: currError } = safeGetValue(change.currentValue);
+
+          const diff = getObjectDiff(prevValue, currValue);
+
+          return (
+            <div key={entryKey}>
+              <button
+                onClick={() => {
+                  setExpandedEntries((prev) => {
+                    const next = new Set(prev);
+                    if (next.has(String(entryKey))) {
+                      next.delete(String(entryKey));
+                    } else {
+                      next.add(String(entryKey));
+                    }
+                    return next;
+                  });
+                }}
+                className="flex items-center gap-2 w-full bg-transparent border-none p-0 cursor-pointer text-white text-xs"
+              >
+                <div className="flex items-center gap-1.5 flex-1">
+                  <Icon
+                    name="icon-chevron-right"
+                    size={12}
+                    className={cn(
+                      "text-[#666] transition-transform duration-200 ease-[cubic-bezier(0.25,0.1,0.25,1)]",
+                      {
+                        "rotate-90": isEntryExpanded,
+                      },
+                    )}
+                  />
+                  <div className="whitespace-pre-wrap break-words text-left font-medium flex items-center gap-x-1.5">
+                    {renderName(change.name)}
+
+                    <CountBadge
+                      count={change.count}
+                      isFunction={typeof change.currentValue === "function"}
+                      showWarning={diff.changes.length === 0}
+                      forceFlash
+                      // showFlame={diff.changes.length === 0}
+                      // showFn={typeof change.currentValue === 'function'}
                     />
-                    <div className="whitespace-pre-wrap break-words text-left font-medium flex items-center gap-x-1.5">
-                      {renderName(change.name)}
-
-                      <CountBadge
-                        count={change.count}
-                        isFunction={typeof change.currentValue === 'function'}
-                        showWarning={diff.changes.length === 0}
-                        forceFlash
-                        // showFlame={diff.changes.length === 0}
-                        // showFn={typeof change.currentValue === 'function'}
-                      />
-                    </div>
                   </div>
-                </button>
-                <div
-                  className={cn('react-scan-expandable', {
-                    'react-scan-expanded': isEntryExpanded,
-                  })}
-                >
-                  <div className="pl-3 text-xs font-mono border-l-1 border-[#333]">
-                    <div className="flex flex-col gap-0.5">
-                      {prevError || currError ? (
-                        <AccessError
-                          currError={currError}
-                          prevError={prevError}
-                        />
-                      ) : diff.changes.length > 0 ? (
-                        <DiffChange
-                          change={change}
-                          diff={diff}
-                          expandedFns={expandedFns}
-                          renderName={renderName}
-                          setExpandedFns={setExpandedFns}
-                          title={title}
-                        />
-                      ) : (
-                        <ReferenceOnlyChange
-                          currValue={currValue}
-                          entryKey={entryKey}
-                          expandedFns={expandedFns}
-                          prevValue={prevValue}
-                          setExpandedFns={setExpandedFns}
-                        />
-                      )}
-                    </div>
+                </div>
+              </button>
+              <div
+                className={cn("react-scan-expandable", {
+                  "react-scan-expanded": isEntryExpanded,
+                })}
+              >
+                <div className="pl-3 text-xs font-mono border-l-1 border-[#333]">
+                  <div className="flex flex-col gap-0.5">
+                    {prevError || currError ? (
+                      <AccessError currError={currError} prevError={prevError} />
+                    ) : diff.changes.length > 0 ? (
+                      <DiffChange
+                        change={change}
+                        diff={diff}
+                        expandedFns={expandedFns}
+                        renderName={renderName}
+                        setExpandedFns={setExpandedFns}
+                        title={title}
+                      />
+                    ) : (
+                      <ReferenceOnlyChange
+                        currValue={currValue}
+                        entryKey={entryKey}
+                        expandedFns={expandedFns}
+                        prevValue={prevValue}
+                        setExpandedFns={setExpandedFns}
+                      />
+                    )}
                   </div>
                 </div>
               </div>
-            );
-          })}
-        </div>
+            </div>
+          );
+        })}
       </div>
-    );
-  },
-);
+    </div>
+  );
+});
 
-const AccessError = ({
-  prevError,
-  currError,
-}: {
-  prevError?: string;
-  currError?: string;
-}) => {
+const AccessError = ({ prevError, currError }: { prevError?: string; currError?: string }) => {
   return (
     <>
       {prevError && (
@@ -420,26 +377,20 @@ const DiffChange = ({
   setExpandedFns: (updater: (prev: Set<string>) => Set<string>) => void;
 }) => {
   return diff.changes.map((diffChange, i) => {
-    const { value: prevDiffValue, error: prevDiffError } = safeGetValue(
-      diffChange.prevValue,
-    );
-    const { value: currDiffValue, error: currDiffError } = safeGetValue(
-      diffChange.currentValue,
-    );
+    const { value: prevDiffValue, error: prevDiffError } = safeGetValue(diffChange.prevValue);
+    const { value: currDiffValue, error: currDiffError } = safeGetValue(diffChange.currentValue);
 
-    const isFunction =
-      typeof prevDiffValue === 'function' ||
-      typeof currDiffValue === 'function';
+    const isFunction = typeof prevDiffValue === "function" || typeof currDiffValue === "function";
 
     let path: string | undefined;
 
-    if (title === 'Props') {
+    if (title === "Props") {
       path =
         diffChange.path.length > 0
           ? `${renderName(String(change.name))}.${formatPath(diffChange.path)}`
           : undefined;
     }
-    if (title === 'State' && diffChange.path.length > 0) {
+    if (title === "State" && diffChange.path.length > 0) {
       path = `state.${formatPath(diffChange.path)}`;
     }
 
@@ -450,22 +401,19 @@ const DiffChange = ({
     return (
       <div
         key={`${path}-${change.name}-${i}`}
-        className={cn(
-          'flex flex-col gap-y-1',
-          i < diff.changes.length - 1 && 'mb-4',
-        )}
+        className={cn("flex flex-col gap-y-1", i < diff.changes.length - 1 && "mb-4")}
       >
         {path && <div className="text-[#666] text-[10px]">{path}</div>}
         <button
           type="button"
           className={cn(
-            'group',
-            'flex items-start',
-            'py-[3px] px-1.5',
-            'text-left text-[#f87171] bg-[#2a1515]',
-            'rounded',
-            'overflow-hidden break-all',
-            isFunction && 'cursor-pointer',
+            "group",
+            "flex items-start",
+            "py-[3px] px-1.5",
+            "text-left text-[#f87171] bg-[#2a1515]",
+            "rounded",
+            "overflow-hidden break-all",
+            isFunction && "cursor-pointer",
           )}
           onClick={
             isFunction
@@ -484,9 +432,7 @@ const DiffChange = ({
               : undefined
           }
         >
-          <span className="w-3 flex items-center justify-center opacity-50">
-            -
-          </span>
+          <span className="w-3 flex items-center justify-center opacity-50">-</span>
           <span className="flex-1 whitespace-nowrap font-mono">
             {prevDiffError ? (
               <span className="italic text-[#f87171]">{prevDiffError}</span>
@@ -499,7 +445,7 @@ const DiffChange = ({
                       expandedFns.has(`${formatPath(diffChange.path)}-prev`),
                     )}
                   </span>
-                  {typeof prevDiffValue === 'function' && (
+                  {typeof prevDiffValue === "function" && (
                     <CopyToClipboard
                       text={prevDiffValue.toString()}
                       className="opacity-0 transition-opacity group-hover:opacity-100"
@@ -509,17 +455,13 @@ const DiffChange = ({
                   )}
                 </div>
                 {prevDiffValue?.toString() === currDiffValue?.toString() && (
-                  <div className="text-[10px] text-[#666] italic">
-                    Function reference changed
-                  </div>
+                  <div className="text-[10px] text-[#666] italic">Function reference changed</div>
                 )}
               </div>
             ) : (
               <DiffValueView
                 value={prevDiffValue}
-                expanded={expandedFns.has(
-                  `${formatPath(diffChange.path)}-prev`,
-                )}
+                expanded={expandedFns.has(`${formatPath(diffChange.path)}-prev`)}
                 onToggle={() => {
                   const key = `${formatPath(diffChange.path)}-prev`;
                   setExpandedFns((prev) => {
@@ -540,13 +482,13 @@ const DiffChange = ({
         <button
           type="button"
           className={cn(
-            'group',
-            'flex items-start',
-            'py-[3px] px-1.5',
-            'text-left text-[#4ade80] bg-[#1a2a1a]',
-            'rounded',
-            'overflow-hidden break-all',
-            isFunction && 'cursor-pointer',
+            "group",
+            "flex items-start",
+            "py-[3px] px-1.5",
+            "text-left text-[#4ade80] bg-[#1a2a1a]",
+            "rounded",
+            "overflow-hidden break-all",
+            isFunction && "cursor-pointer",
           )}
           onClick={
             isFunction
@@ -565,9 +507,7 @@ const DiffChange = ({
               : undefined
           }
         >
-          <span className="w-3 flex items-center justify-center opacity-50">
-            +
-          </span>
+          <span className="w-3 flex items-center justify-center opacity-50">+</span>
           <span className="flex-1 whitespace-pre-wrap font-mono">
             {currDiffError ? (
               <span className="italic text-[#4ade80]">{currDiffError}</span>
@@ -580,7 +520,7 @@ const DiffChange = ({
                       expandedFns.has(`${formatPath(diffChange.path)}-current`),
                     )}
                   </span>
-                  {typeof currDiffValue === 'function' && (
+                  {typeof currDiffValue === "function" && (
                     <CopyToClipboard
                       text={currDiffValue.toString()}
                       className="opacity-0 transition-opacity group-hover:opacity-100"
@@ -590,17 +530,13 @@ const DiffChange = ({
                   )}
                 </div>
                 {prevDiffValue?.toString() === currDiffValue?.toString() && (
-                  <div className="text-[10px] text-[#666] italic">
-                    Function reference changed
-                  </div>
+                  <div className="text-[10px] text-[#666] italic">Function reference changed</div>
                 )}
               </div>
             ) : (
               <DiffValueView
                 value={currDiffValue}
-                expanded={expandedFns.has(
-                  `${formatPath(diffChange.path)}-current`,
-                )}
+                expanded={expandedFns.has(`${formatPath(diffChange.path)}-current`)}
                 onToggle={() => {
                   const key = `${formatPath(diffChange.path)}-current`;
                   setExpandedFns((prev) => {
@@ -639,9 +575,7 @@ const ReferenceOnlyChange = ({
   return (
     <>
       <div className="group flex gap-0.5 items-start text-[#f87171] bg-[#2a1515] py-[3px] px-1.5 rounded">
-        <span className="w-3 flex items-center justify-center opacity-50">
-          -
-        </span>
+        <span className="w-3 flex items-center justify-center opacity-50">-</span>
         <span className="flex-1 overflow-hidden whitespace-pre-wrap font-mono">
           <DiffValueView
             value={prevValue}
@@ -663,9 +597,7 @@ const ReferenceOnlyChange = ({
         </span>
       </div>
       <div className="group flex gap-0.5 items-start text-[#4ade80] bg-[#1a2a1a] py-[3px] px-1.5 rounded mt-0.5">
-        <span className="w-3 flex items-center justify-center opacity-50">
-          +
-        </span>
+        <span className="w-3 flex items-center justify-center opacity-50">+</span>
         <span className="flex-1 overflow-hidden whitespace-pre-wrap font-mono">
           <DiffValueView
             value={currValue}
@@ -686,13 +618,9 @@ const ReferenceOnlyChange = ({
           />
         </span>
       </div>
-      {typeof currValue === 'object' && currValue !== null && (
+      {typeof currValue === "object" && currValue !== null && (
         <div className="text-[#666] text-[10px] italic mt-1 flex items-center gap-x-1">
-          <Icon
-            name="icon-triangle-alert"
-            className="text-yellow-500 mb-px"
-            size={14}
-          />
+          <Icon name="icon-triangle-alert" className="text-yellow-500 mb-px" size={14} />
           <span>Reference changed but objects are structurally the same</span>
         </div>
       )}
@@ -721,9 +649,9 @@ const CountBadge = ({
       return;
     }
 
-    element.classList.remove('count-flash');
+    element.classList.remove("count-flash");
     void element.offsetWidth;
-    element.classList.add('count-flash');
+    element.classList.add("count-flash");
 
     refPrevCount.current = count;
   }, [count]);
@@ -736,9 +664,9 @@ const CountBadge = ({
 
     if (forceFlash) {
       let timer = setTimeout(() => {
-        refBadge.current?.classList.add('count-flash-white');
+        refBadge.current?.classList.add("count-flash-white");
         timer = setTimeout(() => {
-          refBadge.current?.classList.remove('count-flash-white');
+          refBadge.current?.classList.remove("count-flash-white");
         }, 300);
       }, 500);
       return () => {
@@ -750,16 +678,10 @@ const CountBadge = ({
   return (
     <div ref={refBadge} className="count-badge">
       {showWarning && (
-        <Icon
-          name="icon-triangle-alert"
-          className="text-yellow-500 mb-px"
-          size={14}
-        />
-      )}
-      {isFunction && (
-        <Icon name="icon-function" className="text-[#A855F7] mb-px" size={14} />
+        <Icon name="icon-triangle-alert" className="text-yellow-500 mb-px" size={14} />
       )}
-      x{count}
+      {isFunction && <Icon name="icon-function" className="text-[#A855F7] mb-px" size={14} />}x
+      {count}
     </div>
   );
 };
diff --git a/packages/scan/src/web/views/inspector/whats-changed/use-change-store.ts b/packages/scan/src/web/views/inspector/whats-changed/use-change-store.ts
index 9b2c2d65..7cc3c023 100644
--- a/packages/scan/src/web/views/inspector/whats-changed/use-change-store.ts
+++ b/packages/scan/src/web/views/inspector/whats-changed/use-change-store.ts
@@ -1,37 +1,10 @@
-import { useEffect, useRef, useState } from 'preact/hooks';
-import {
-  ChangesListener,
-  ChangesPayload,
-  ContextChange,
-  Store,
-} from '~core/index';
-import { Fiber, getFiberId } from 'bippy';
-import { isEqual } from '~core/utils';
-import { signal } from '@preact/signals';
+import { useEffect, useRef, useState } from "preact/hooks";
+import { ChangesListener, ChangesPayload, ContextChange, Store } from "~core/index";
+import { getFiberId } from "bippy";
+import { isEqual } from "~core/utils";
 
 const CHANGES_QUEUE_INTERVAL = 50;
 
-interface SectionData {
-  current: Array<{ name: string; value: unknown }>;
-  changes: Set<string>;
-}
-
-export interface InspectorData {
-  fiberProps: SectionData;
-  fiberState: SectionData;
-  fiberContext: SectionData;
-}
-interface InspectorState extends InspectorData {
-  fiber: Fiber | null;
-}
-
-export const inspectorState = signal<InspectorState>({
-  fiber: null,
-  fiberProps: { current: [], changes: new Set() },
-  fiberState: { current: [], changes: new Set() },
-  fiberContext: { current: [], changes: new Set() },
-});
-
 export type AggregatedChanges = {
   count: number;
   currentValue: unknown;
@@ -49,12 +22,12 @@ export type AllAggregatedChanges = {
   contextChanges: Map<
     // oxlint-disable-next-line typescript/no-explicit-any
     any,
-    | { changes: AggregatedChanges; kind: 'initialized' }
+    | { changes: AggregatedChanges; kind: "initialized" }
     | {
         // this looks weird, because it is
         // its a work around to allow context changes to be sent impotently
         // (react-scan internals do not yet handle sending context changes the render they change)
-        kind: 'partially-initialized';
+        kind: "partially-initialized";
         value: unknown;
         name: string;
         lastUpdated: number;
@@ -65,14 +38,14 @@ export type AllAggregatedChanges = {
 
 const getContextChangesValue = (
   discriminated:
-    | { kind: 'partially-initialized'; value: unknown }
-    | { kind: 'initialized'; changes: AggregatedChanges },
+    | { kind: "partially-initialized"; value: unknown }
+    | { kind: "initialized"; changes: AggregatedChanges },
 ) => {
   switch (discriminated.kind) {
-    case 'initialized': {
+    case "initialized": {
       return discriminated.changes.currentValue;
     }
-    case 'partially-initialized': {
+    case "partially-initialized": {
       return discriminated.value;
     }
   }
@@ -119,9 +92,9 @@ const processContextChanges = (
       if (isEqual(getContextChangesValue(existing), change.value)) {
         continue;
       }
-      if (existing.kind === 'partially-initialized') {
+      if (existing.kind === "partially-initialized") {
         aggregatedChanges.contextChanges.set(change.contextType, {
-          kind: 'initialized',
+          kind: "initialized",
           changes: {
             count: 1,
             currentValue: change.value,
@@ -135,7 +108,7 @@ const processContextChanges = (
       }
 
       aggregatedChanges.contextChanges.set(change.contextType, {
-        kind: 'initialized',
+        kind: "initialized",
         changes: {
           count: existing.changes.count + 1,
           currentValue: change.value,
@@ -150,7 +123,7 @@ const processContextChanges = (
     }
 
     aggregatedChanges.contextChanges.set(change.contextType, {
-      kind: 'partially-initialized',
+      kind: "partially-initialized",
       id: change.contextType.toString(),
       lastUpdated: Date.now(),
       name: change.name,
@@ -178,9 +151,7 @@ const collapseQueue = (queue: Array<ChangesPayload>) => {
   return localAggregatedChanges;
 };
 const mergeSimpleChanges = <
-  T extends
-    | AllAggregatedChanges['propsChanges']
-    | AllAggregatedChanges['stateChanges'],
+  T extends AllAggregatedChanges["propsChanges"] | AllAggregatedChanges["stateChanges"],
 >(
   existingChanges: T,
   incomingChanges: T,
@@ -212,11 +183,8 @@ const mergeSimpleChanges = <
   return mergedChanges as T;
 };
 
-const mergeContextChanges = (
-  existing: AllAggregatedChanges,
-  incoming: AllAggregatedChanges,
-) => {
-  const contextChanges: AllAggregatedChanges['contextChanges'] = new Map();
+const mergeContextChanges = (existing: AllAggregatedChanges, incoming: AllAggregatedChanges) => {
+  const contextChanges: AllAggregatedChanges["contextChanges"] = new Map();
 
   existing.contextChanges.forEach((value, key) => {
     contextChanges.set(key, value);
@@ -229,28 +197,23 @@ const mergeContextChanges = (
       contextChanges.set(key, incomingChange);
       return;
     }
-    if (
-      getContextChangesValue(incomingChange) ===
-      getContextChangesValue(existingChange)
-    ) {
+    if (getContextChangesValue(incomingChange) === getContextChangesValue(existingChange)) {
       // we do this for a second time just in context merge to handle the partial initialization case (the collapsed queue will not have the information to remove the partially initialized set of changes)
       return;
     }
 
     switch (existingChange.kind) {
-      case 'initialized': {
+      case "initialized": {
         switch (incomingChange.kind) {
-          case 'initialized': {
+          case "initialized": {
             const preInitEntryOffset = 1;
             contextChanges.set(key, {
-              kind: 'initialized',
+              kind: "initialized",
               changes: {
                 ...incomingChange.changes,
                 // if existing was initialized, the pre-initialization done by the collapsed queue was not necessary, so we need to increment count to account for the preInit entry
                 count:
-                  incomingChange.changes.count +
-                  existingChange.changes.count +
-                  preInitEntryOffset,
+                  incomingChange.changes.count + existingChange.changes.count + preInitEntryOffset,
                 currentValue: incomingChange.changes.currentValue,
 
                 previousValue: incomingChange.changes.previousValue, // we always want to show this value, since this will be the true state transition (if you make the previousValue the last seen currentValue, u will have weird behavior with primitive state updates)
@@ -258,9 +221,9 @@ const mergeContextChanges = (
             });
             return;
           }
-          case 'partially-initialized': {
+          case "partially-initialized": {
             contextChanges.set(key, {
-              kind: 'initialized',
+              kind: "initialized",
               changes: {
                 count: existingChange.changes.count + 1,
                 currentValue: incomingChange.value,
@@ -274,11 +237,11 @@ const mergeContextChanges = (
           }
         }
       }
-      case 'partially-initialized': {
+      case "partially-initialized": {
         switch (incomingChange.kind) {
-          case 'initialized': {
+          case "initialized": {
             contextChanges.set(key, {
-              kind: 'initialized',
+              kind: "initialized",
               changes: {
                 count: incomingChange.changes.count + 1,
                 currentValue: incomingChange.changes.currentValue,
@@ -290,9 +253,9 @@ const mergeContextChanges = (
             });
             return;
           }
-          case 'partially-initialized': {
+          case "partially-initialized": {
             contextChanges.set(key, {
-              kind: 'initialized',
+              kind: "initialized",
               changes: {
                 count: 1,
                 currentValue: incomingChange.value,
@@ -318,14 +281,8 @@ const mergeChanges = (
 ): AllAggregatedChanges => {
   const contextChanges = mergeContextChanges(existing, incoming);
 
-  const propChanges = mergeSimpleChanges(
-    existing.propsChanges,
-    incoming.propsChanges,
-  );
-  const stateChanges = mergeSimpleChanges(
-    existing.stateChanges,
-    incoming.stateChanges,
-  );
+  const propChanges = mergeSimpleChanges(existing.propsChanges, incoming.propsChanges);
+  const stateChanges = mergeSimpleChanges(existing.stateChanges, incoming.stateChanges);
 
   return {
     contextChanges,
@@ -339,18 +296,12 @@ const mergeChanges = (
  */
 export const calculateTotalChanges = (changes: AllAggregatedChanges) => {
   return (
-    Array.from(changes.propsChanges.values()).reduce(
-      (acc, change) => acc + change.count,
-      0,
-    ) +
-    Array.from(changes.stateChanges.values()).reduce(
-      (acc, change) => acc + change.count,
-      0,
-    ) +
+    Array.from(changes.propsChanges.values()).reduce((acc, change) => acc + change.count, 0) +
+    Array.from(changes.stateChanges.values()).reduce((acc, change) => acc + change.count, 0) +
     Array.from(changes.contextChanges.values())
       .filter(
-        (change): change is Extract<typeof change, { kind: 'initialized' }> =>
-          change.kind === 'initialized',
+        (change): change is Extract<typeof change, { kind: "initialized" }> =>
+          change.kind === "initialized",
       )
       .reduce((acc, change) => acc + change.changes.count, 0)
   );
@@ -361,17 +312,13 @@ export const useInspectedFiberChangeStore = (opts?: {
 }) => {
   const pendingChanges = useRef<{ queue: ChangesPayload[] }>({ queue: [] });
   // flushed state read from queue stream
-  const [aggregatedChanges, setAggregatedChanges] =
-    useState<AllAggregatedChanges>({
-      propsChanges: new Map(),
-      stateChanges: new Map(),
-      contextChanges: new Map(),
-    });
+  const [aggregatedChanges, setAggregatedChanges] = useState<AllAggregatedChanges>({
+    propsChanges: new Map(),
+    stateChanges: new Map(),
+    contextChanges: new Map(),
+  });
 
-  const fiber =
-    Store.inspectState.value.kind === 'focused'
-      ? Store.inspectState.value.fiber
-      : null;
+  const fiber = Store.inspectState.value.kind === "focused" ? Store.inspectState.value.fiber : null;
   const fiberId = fiber ? getFiberId(fiber) : null;
 
   // oxlint-disable-next-line react-hooks/exhaustive-deps
@@ -426,8 +373,7 @@ export const useInspectedFiberChangeStore = (opts?: {
       pendingChanges.current.queue = [];
       Store.changesListeners.set(
         fiberId,
-        Store.changesListeners.get(fiberId)?.filter((l) => l !== listener) ??
-          [],
+        Store.changesListeners.get(fiberId)?.filter((l) => l !== listener) ?? [],
       );
     };
   }, [fiberId]);
diff --git a/packages/scan/src/web/views/notifications/data.ts b/packages/scan/src/web/views/notifications/data.ts
index 40454c0a..c94164b2 100644
--- a/packages/scan/src/web/views/notifications/data.ts
+++ b/packages/scan/src/web/views/notifications/data.ts
@@ -1,9 +1,7 @@
-import { createContext } from 'preact';
-import { SetStateAction } from 'preact/compat';
-import { Dispatch, useContext } from 'preact/hooks';
-import { HIGH_SEVERITY_FPS_DROP_TIME } from '~core/notifications/event-tracking';
-import { getFiberFromElement } from '../inspector/utils';
-import { hasMemoCache } from 'bippy';
+import { createContext } from "preact";
+import { SetStateAction } from "preact/compat";
+import { Dispatch, useContext } from "preact/hooks";
+import { HIGH_SEVERITY_FPS_DROP_TIME } from "~core/notifications/event-tracking";
 
 export type GroupedFiberRender = {
   id: string;
@@ -27,45 +25,31 @@ export const getComponentName = (path: Array<string>) => {
   const filteredPath = path.filter((item) => item.length > 2);
   // in production, all names can be minified
   if (filteredPath.length === 0) {
-    return path.at(-1) ?? 'Unknown';
+    return path.at(-1) ?? "Unknown";
   }
   // oxlint-disable-next-line typescript/no-non-null-assertion
   return filteredPath.at(-1)!;
 };
 
-export const getTotalTime = (
-  timing: InteractionTiming | DroppedFramesTiming,
-) => {
+export const getTotalTime = (timing: InteractionTiming | DroppedFramesTiming) => {
   switch (timing.kind) {
-    case 'interaction': {
-      const {
-        renderTime,
-        otherJSTime,
-        framePreparation,
-        frameConstruction,
-        frameDraw,
-      } = timing;
-      return (
-        renderTime +
-        otherJSTime +
-        framePreparation +
-        frameConstruction +
-        (frameDraw ?? 0)
-      );
+    case "interaction": {
+      const { renderTime, otherJSTime, framePreparation, frameConstruction, frameDraw } = timing;
+      return renderTime + otherJSTime + framePreparation + frameConstruction + (frameDraw ?? 0);
     }
-    case 'dropped-frames': {
+    case "dropped-frames": {
       return timing.otherTime + timing.renderTime;
     }
   }
 };
 
 export type DroppedFramesTiming = {
-  kind: 'dropped-frames';
+  kind: "dropped-frames";
   renderTime: number;
   otherTime: number;
 };
 export type InteractionTiming = {
-  kind: 'interaction';
+  kind: "interaction";
   renderTime: number;
   otherJSTime: number;
   /** After JS, before paint. Things like layerize, css style recalcs */
@@ -76,9 +60,7 @@ export type InteractionTiming = {
   frameDraw: number | null;
 };
 
-export const isRenderMemoizable = (
-  groupedFiberRender: GroupedFiberRender,
-): boolean => {
+export const isRenderMemoizable = (groupedFiberRender: GroupedFiberRender): boolean => {
   if (groupedFiberRender.wasFiberRenderMount) {
     // no amount of memoization can prevent a mount render
     return false;
@@ -95,28 +77,9 @@ export const isRenderMemoizable = (
   );
 };
 
-export const getTimeSplit = (
-  timing: DroppedFramesTiming | InteractionTiming,
-) => {
-  switch (timing.kind) {
-    case 'dropped-frames': {
-      return {
-        render: timing.renderTime,
-        other: timing.otherTime,
-      };
-    }
-    case 'interaction': {
-      return {
-        render: timing.renderTime,
-        other: getTotalTime(timing) + timing.renderTime,
-      };
-    }
-  }
-};
-
 export type InteractionEvent = {
-  kind: 'interaction';
-  type: 'click' | 'keyboard';
+  kind: "interaction";
+  type: "click" | "keyboard";
   id: string;
   componentPath: Array<string>;
   groupedFiberRenders: Array<GroupedFiberRender>;
@@ -126,7 +89,7 @@ export type InteractionEvent = {
   timestamp: number;
 };
 export type DroppedFramesEvent = {
-  kind: 'dropped-frames';
+  kind: "dropped-frames";
   id: string;
   groupedFiberRenders: Array<GroupedFiberRender>;
   timing: DroppedFramesTiming;
@@ -141,27 +104,23 @@ export type NotificationsState = {
   events: Array<NotificationEvent>;
   // todo: discriminated union this all, i don't want to do it yet till i stabilize the data i need/ implement it all
   selectedEvent: NotificationEvent | null;
-  filterBy: 'severity' | 'latest';
-  selectedFiber: NotificationEvent['groupedFiberRenders'][number] | null;
+  filterBy: "severity" | "latest";
+  selectedFiber: NotificationEvent["groupedFiberRenders"][number] | null;
   detailsExpanded: boolean;
   moreInfoExpanded: boolean;
   route:
-    | 'render-visualization'
-    | 'other-visualization'
+    | "render-visualization"
+    | "other-visualization"
     // | "render-guide"
-    | 'render-explanation'
+    | "render-explanation"
     // | "other-guide"
-    | 'optimize';
+    | "optimize";
   /**
    * Conceptually a synthetic query parameter
    */
   routeMessage: null | {
-    kind: 'auto-open-overview-accordion';
-    name:
-      | 'other-not-javascript'
-      | 'other-javascript'
-      | 'render'
-      | 'other-frame-drop';
+    kind: "auto-open-overview-accordion";
+    name: "other-not-javascript" | "other-javascript" | "render" | "other-frame-drop";
   };
   audioNotificationsOptions:
     | {
@@ -177,37 +136,20 @@ export type NotificationsState = {
 export const getEventSeverity = (event: NotificationEvent) => {
   const totalTime = getTotalTime(event.timing);
   switch (event.kind) {
-    case 'interaction': {
-      if (totalTime < 200) return 'low';
-      if (totalTime < 500) return 'needs-improvement';
-      return 'high';
+    case "interaction": {
+      if (totalTime < 200) return "low";
+      if (totalTime < 500) return "needs-improvement";
+      return "high";
     }
-    case 'dropped-frames': {
-      if (totalTime < 50) return 'low';
-      if (totalTime < HIGH_SEVERITY_FPS_DROP_TIME) return 'needs-improvement';
-      return 'high';
+    case "dropped-frames": {
+      if (totalTime < 50) return "low";
+      if (totalTime < HIGH_SEVERITY_FPS_DROP_TIME) return "needs-improvement";
+      return "high";
     }
   }
 };
 
-export const getReadableSeverity = (
-  severity: 'low' | 'needs-improvement' | 'high',
-) => {
-  switch (severity) {
-    case 'high': {
-      return 'Poor';
-    }
-    case 'needs-improvement': {
-      return 'Laggy';
-    }
-    case 'low': {
-      return 'Good';
-    }
-  }
-};
-export const NOTIFICATIONS_BORDER = '#27272A';
-export const useNotificationsContext = () =>
-  useContext(NotificationStateContext);
+export const useNotificationsContext = () => useContext(NotificationStateContext);
 
 export const NotificationStateContext = createContext<{
   notificationState: NotificationsState;
@@ -216,8 +158,8 @@ export const NotificationStateContext = createContext<{
     route,
     routeMessage,
   }: {
-    route: NotificationsState['route'];
-    routeMessage: NotificationsState['routeMessage'] | null;
+    route: NotificationsState["route"];
+    routeMessage: NotificationsState["routeMessage"] | null;
   }) => void;
   // oxlint-disable-next-line typescript/no-non-null-assertion
 }>(null!);
diff --git a/packages/scan/src/web/views/notifications/icons.tsx b/packages/scan/src/web/views/notifications/icons.tsx
index 62ff9745..6005629b 100644
--- a/packages/scan/src/web/views/notifications/icons.tsx
+++ b/packages/scan/src/web/views/notifications/icons.tsx
@@ -1,13 +1,7 @@
-import { ReactScanInternals } from '~core/index';
-import { cn } from '~web/utils/helpers';
+import { ReactScanInternals } from "~core/index";
+import { cn } from "~web/utils/helpers";
 
-export const ChevronRight = ({
-  size = 24,
-  className,
-}: {
-  size?: number;
-  className?: string;
-}) => (
+export const ChevronRight = ({ size = 24, className }: { size?: number; className?: string }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={size}
@@ -18,39 +12,14 @@ export const ChevronRight = ({
     stroke-width="2"
     stroke-linecap="round"
     stroke-linejoin="round"
-    className={cn(['lucide lucide-chevron-right', className])}
+    className={cn(["lucide lucide-chevron-right", className])}
   >
     <path d="m9 18 6-6-6-6" />
   </svg>
 );
-export const CopyX = ({
-  size = 24,
-  className,
-}: {
-  size?: number;
-  className?: string;
-}) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className={cn(['lucide lucide-copy-x', className])}
-  >
-    <line x1="12" x2="18" y1="12" y2="18" />
-    <line x1="12" x2="18" y1="18" y2="12" />
-    <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
-    <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
-  </svg>
-);
 
 export const Notification = ({
-  className = '',
+  className = "",
   size = 24,
   events = [],
 }: {
@@ -60,11 +29,8 @@ export const Notification = ({
 }) => {
   const hasHighSeverity = events.includes(true);
   const totalSevere = events.filter((e) => e).length;
-  const displayCount = totalSevere > 99 ? '>99' : totalSevere;
-  const badgeSize = hasHighSeverity
-    ? Math.max(size * 0.6, 14)
-    : Math.max(size * 0.4, 6);
-
+  const displayCount = totalSevere > 99 ? ">99" : totalSevere;
+  const badgeSize = hasHighSeverity ? Math.max(size * 0.6, 14) : Math.max(size * 0.4, 6);
 
   return (
     <div className="relative">
@@ -88,18 +54,18 @@ export const Notification = ({
         ReactScanInternals.options.value.showNotificationCount && (
           <div
             className={cn([
-              'absolute',
-              hasHighSeverity ? '-top-2.5 -right-2.5' : '-top-1 -right-1',
-              'rounded-full',
-              'flex items-center justify-center',
-              'text-[8px] font-medium text-white',
-              'aspect-square',
-              hasHighSeverity ? 'bg-red-500/90' : 'bg-purple-500/90',
+              "absolute",
+              hasHighSeverity ? "-top-2.5 -right-2.5" : "-top-1 -right-1",
+              "rounded-full",
+              "flex items-center justify-center",
+              "text-[8px] font-medium text-white",
+              "aspect-square",
+              hasHighSeverity ? "bg-red-500/90" : "bg-purple-500/90",
             ])}
             style={{
               width: `${badgeSize}px`,
               height: `${badgeSize}px`,
-              padding: hasHighSeverity ? '0.5px' : '0',
+              padding: hasHighSeverity ? "0.5px" : "0",
             }}
           >
             {hasHighSeverity && displayCount}
@@ -109,10 +75,7 @@ export const Notification = ({
   );
 };
 
-export const CloseIcon = ({
-  className = '',
-  size = 24,
-}: { className?: string; size?: number }) => (
+export const CloseIcon = ({ className = "", size = 24 }: { className?: string; size?: number }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={size}
@@ -130,9 +93,12 @@ export const CloseIcon = ({
   </svg>
 );
 export const VolumeOnIcon = ({
-  className = '',
+  className = "",
   size = 24,
-}: { className?: string; size?: number }) => (
+}: {
+  className?: string;
+  size?: number;
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={size}
@@ -152,9 +118,12 @@ export const VolumeOnIcon = ({
 );
 
 export const VolumeOffIcon = ({
-  className = '',
+  className = "",
   size = 24,
-}: { className?: string; size?: number }) => (
+}: {
+  className?: string;
+  size?: number;
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={size}
@@ -175,13 +144,7 @@ export const VolumeOffIcon = ({
   </svg>
 );
 
-export const ArrowLeft = ({
-  size = 24,
-  className,
-}: {
-  size?: number;
-  className?: string;
-}) => (
+export const ArrowLeft = ({ size = 24, className }: { size?: number; className?: string }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={size}
@@ -192,7 +155,7 @@ export const ArrowLeft = ({
     stroke-width="2"
     stroke-linecap="round"
     stroke-linejoin="round"
-    className={cn(['lucide lucide-arrow-left', className])}
+    className={cn(["lucide lucide-arrow-left", className])}
   >
     <path d="m12 19-7-7 7-7" />
     <path d="M19 12H5" />
@@ -200,9 +163,12 @@ export const ArrowLeft = ({
 );
 
 export const PointerIcon = ({
-  className = '',
+  className = "",
   size = 24,
-}: { className?: string; size?: number }) => (
+}: {
+  className?: string;
+  size?: number;
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={size}
@@ -224,9 +190,12 @@ export const PointerIcon = ({
 );
 
 export const KeyboardIcon = ({
-  className = '',
+  className = "",
   size = 24,
-}: { className?: string; size?: number }) => (
+}: {
+  className?: string;
+  size?: number;
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={size}
@@ -250,10 +219,7 @@ export const KeyboardIcon = ({
     <rect width="20" height="16" x="2" y="4" rx="2" />
   </svg>
 );
-export const ClearIcon = ({
-  className = '',
-  size = 24,
-}: { className?: string; size?: number }) => {
+export const ClearIcon = ({ className = "", size = 24 }: { className?: string; size?: number }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -266,7 +232,7 @@ export const ClearIcon = ({
       stroke-linecap="round"
       stroke-linejoin="round"
       className={className}
-      style={{ transform: 'rotate(180deg)' }}
+      style={{ transform: "rotate(180deg)" }}
     >
       <circle cx="12" cy="12" r="10" />
       <path d="m4.9 4.9 14.2 14.2" />
@@ -274,9 +240,12 @@ export const ClearIcon = ({
   );
 };
 export const TrendingDownIcon = ({
-  className = '',
+  className = "",
   size = 24,
-}: { className?: string; size?: number }) => (
+}: {
+  className?: string;
+  size?: number;
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={size}
diff --git a/packages/scan/src/web/views/notifications/notifications.tsx b/packages/scan/src/web/views/notifications/notifications.tsx
index 405a3fa0..1a0d1725 100644
--- a/packages/scan/src/web/views/notifications/notifications.tsx
+++ b/packages/scan/src/web/views/notifications/notifications.tsx
@@ -1,22 +1,21 @@
-import { forwardRef } from 'preact/compat';
-import { useEffect, useRef, useState } from 'preact/hooks';
-import { not_globally_unique_generateId } from '~core/utils';
-import { useToolbarEventLog } from '~core/notifications/event-tracking';
-import { FiberRenders } from '~core/notifications/performance';
-import { iife, invariantError } from '~core/notifications/performance-utils';
-import { playNotificationSound } from '~core/utils';
-import { cn } from '~web/utils/helpers';
+import { forwardRef } from "preact/compat";
+import { useEffect, useRef, useState } from "preact/hooks";
+import { not_globally_unique_generateId, playNotificationSound } from "~core/utils";
+import { useToolbarEventLog } from "~core/notifications/event-tracking";
+import { FiberRenders } from "~core/notifications/performance";
+import { iife, invariantError } from "~core/notifications/performance-utils";
+import { cn } from "~web/utils/helpers";
 import {
   NotificationStateContext,
   NotificationsState,
   getEventSeverity,
   getTotalTime,
   useNotificationsContext,
-} from './data';
-import { DetailsRoutes } from './details-routes';
-import { NotificationHeader } from './notification-header';
-import { fadeOutHighlights } from './render-bar-chart';
-import { SlowdownHistory, useLaggedEvents } from './slowdown-history';
+} from "./data";
+import { DetailsRoutes } from "./details-routes";
+import { NotificationHeader } from "./notification-header";
+import { fadeOutHighlights } from "./render-bar-chart";
+import { SlowdownHistory, useLaggedEvents } from "./slowdown-history";
 
 const getGroupedFiberRenders = (fiberRenders: FiberRenders) => {
   const res = Object.values(fiberRenders).map((render) => ({
@@ -32,31 +31,22 @@ const getGroupedFiberRenders = (fiberRenders: FiberRenders) => {
     elements: render.nodeInfo.map((node) => node.element),
     changes: {
       context: render.changes.fiberContext.current
-        .filter((change) =>
-          render.changes.fiberContext.changesCounts.get(change.name),
-        )
+        .filter((change) => render.changes.fiberContext.changesCounts.get(change.name))
         .map((change) => ({
           name: String(change.name),
-          count:
-            render.changes.fiberContext.changesCounts.get(change.name) ?? 0,
+          count: render.changes.fiberContext.changesCounts.get(change.name) ?? 0,
         })),
       props: render.changes.fiberProps.current
-        .filter((change) =>
-          render.changes.fiberProps.changesCounts.get(change.name),
-        )
+        .filter((change) => render.changes.fiberProps.changesCounts.get(change.name))
         .map((change) => ({
           name: String(change.name),
           count: render.changes.fiberProps.changesCounts.get(change.name) ?? 0,
         })),
       state: render.changes.fiberState.current
-        .filter((change) =>
-          render.changes.fiberState.changesCounts.get(Number(change.name)),
-        )
+        .filter((change) => render.changes.fiberState.changesCounts.get(Number(change.name)))
         .map((change) => ({
           index: change.name as number,
-          count:
-            render.changes.fiberState.changesCounts.get(Number(change.name)) ??
-            0,
+          count: render.changes.fiberState.changesCounts.get(Number(change.name)) ?? 0,
         })),
     },
   }));
@@ -64,9 +54,7 @@ const getGroupedFiberRenders = (fiberRenders: FiberRenders) => {
   return res;
 };
 
-const useGarbageCollectElements = (
-  notificationEvents: NotificationsState['events'],
-) => {
+const useGarbageCollectElements = (notificationEvents: NotificationsState["events"]) => {
   useEffect(() => {
     const checkElementsExistence = () => {
       notificationEvents.forEach((event) => {
@@ -103,34 +91,28 @@ const useGarbageCollectElements = (
 export const useAppNotifications = () => {
   const log = useToolbarEventLog();
 
-  const notificationEvents: NotificationsState['events'] = [];
+  const notificationEvents: NotificationsState["events"] = [];
 
   useGarbageCollectElements(notificationEvents);
 
   log.state.events.forEach((event) => {
     const fiberRenders =
-      event.kind === 'interaction'
+      event.kind === "interaction"
         ? event.data.meta.detailedTiming.fiberRenders
         : event.data.meta.fiberRenders;
     const groupedFiberRenders = getGroupedFiberRenders(fiberRenders);
-    const renderTime = groupedFiberRenders.reduce(
-      (prev, curr) => prev + curr.totalTime,
-      0,
-    );
+    const renderTime = groupedFiberRenders.reduce((prev, curr) => prev + curr.totalTime, 0);
     switch (event.kind) {
-      case 'interaction': {
+      case "interaction": {
         const { commitEnd, jsEndDetail, interactionStartDetail, rafStart } =
           event.data.meta.detailedTiming;
 
         // this is a known bug, js time doesn't backfill render time from async renders (or async js in general)
         // the current impl is a close enough approximation so will leave as is until there is a dedicated effort to fix it
         if (jsEndDetail - interactionStartDetail - renderTime < 0) {
-          invariantError('js time must be longer than render time');
+          invariantError("js time must be longer than render time");
         }
-        const otherJSTime = Math.max(
-          0,
-          jsEndDetail - interactionStartDetail - renderTime,
-        );
+        const otherJSTime = Math.max(0, jsEndDetail - interactionStartDetail - renderTime);
 
         const frameDraw = Math.max(
           event.data.meta.latency - (commitEnd - interactionStartDetail),
@@ -140,16 +122,14 @@ export const useAppNotifications = () => {
           componentPath: event.data.meta.detailedTiming.componentPath,
           groupedFiberRenders,
           id: event.id,
-          kind: 'interaction',
+          kind: "interaction",
           memory: null,
           timestamp: event.data.startAt,
           type:
-            event.data.meta.detailedTiming.interactionType === 'keyboard'
-              ? 'keyboard'
-              : 'click',
+            event.data.meta.detailedTiming.interactionType === "keyboard" ? "keyboard" : "click",
           timing: {
             renderTime: renderTime,
-            kind: 'interaction',
+            kind: "interaction",
             otherJSTime,
             framePreparation: rafStart - jsEndDetail,
             frameConstruction: commitEnd - rafStart,
@@ -158,13 +138,13 @@ export const useAppNotifications = () => {
         });
         return;
       }
-      case 'long-render': {
+      case "long-render": {
         notificationEvents.push({
-          kind: 'dropped-frames',
+          kind: "dropped-frames",
           id: event.id,
           memory: null,
           timing: {
-            kind: 'dropped-frames',
+            kind: "dropped-frames",
             renderTime: renderTime,
             otherTime: event.data.meta.latency,
           },
@@ -179,7 +159,7 @@ export const useAppNotifications = () => {
   return notificationEvents;
 };
 const timeout = 1000;
-export const NotificationAudio = () => {
+const NotificationAudio = () => {
   const { notificationState, setNotificationState } = useNotificationsContext();
   const playedFor = useRef<number | null>(null);
   const debounceTimeout = useRef<NodeJS.Timeout | null>(null);
@@ -189,22 +169,20 @@ export const NotificationAudio = () => {
 
   const alertEventsCount = laggedEvents.filter(
     // todo: make this configurable
-    (event) => getEventSeverity(event) === 'high',
+    (event) => getEventSeverity(event) === "high",
   ).length;
 
   // oxlint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => {
     // todo: sync with options
-    const audioEnabledString = localStorage.getItem(
-      'react-scan-notifications-audio',
-    );
+    const audioEnabledString = localStorage.getItem("react-scan-notifications-audio");
 
-    if (audioEnabledString !== 'false' && audioEnabledString !== 'true') {
-      localStorage.setItem('react-scan-notifications-audio', 'false');
+    if (audioEnabledString !== "false" && audioEnabledString !== "true") {
+      localStorage.setItem("react-scan-notifications-audio", "false");
       return;
     }
 
-    const audioEnabled = audioEnabledString === 'false' ? false : true;
+    const audioEnabled = audioEnabledString === "false" ? false : true;
 
     if (audioEnabled) {
       setNotificationState((prev) => {
@@ -272,22 +250,20 @@ export const NotificationAudio = () => {
 
 export const NotificationWrapper = forwardRef<HTMLDivElement>((_, ref) => {
   const events = useAppNotifications();
-  const [notificationState, setNotificationState] =
-    useState<NotificationsState>({
-      detailsExpanded: false,
-      events,
-      filterBy: 'latest',
-      moreInfoExpanded: false,
-      route: 'render-visualization',
-      selectedEvent:
-        events.toSorted((a, b) => a.timestamp - b.timestamp).at(-1) ?? null,
-      selectedFiber: null,
-      routeMessage: null,
-      audioNotificationsOptions: {
-        enabled: false,
-        audioContext: null,
-      },
-    });
+  const [notificationState, setNotificationState] = useState<NotificationsState>({
+    detailsExpanded: false,
+    events,
+    filterBy: "latest",
+    moreInfoExpanded: false,
+    route: "render-visualization",
+    selectedEvent: events.toSorted((a, b) => a.timestamp - b.timestamp).at(-1) ?? null,
+    selectedFiber: null,
+    routeMessage: null,
+    audioNotificationsOptions: {
+      enabled: false,
+      audioContext: null,
+    },
+  });
 
   notificationState.events = events;
   return (
@@ -299,28 +275,28 @@ export const NotificationWrapper = forwardRef<HTMLDivElement>((_, ref) => {
           setNotificationState((prev) => {
             const newState = { ...prev, route, routeMessage };
             switch (route) {
-              case 'render-visualization': {
+              case "render-visualization": {
                 fadeOutHighlights();
                 return {
                   ...newState,
                   selectedFiber: null,
                 };
               }
-              case 'optimize': {
+              case "optimize": {
                 fadeOutHighlights();
                 return {
                   ...newState,
                   selectedFiber: null,
                 };
               }
-              case 'other-visualization': {
+              case "other-visualization": {
                 fadeOutHighlights();
                 return {
                   ...newState,
                   selectedFiber: null,
                 };
               }
-              case 'render-explanation': {
+              case "render-explanation": {
                 // it would be ideal not to fade this out, but need to spend the time to sync the outline positions as they change in a performant (this was solved in react scan just need to follow same semantics)
                 fadeOutHighlights();
 
@@ -337,19 +313,19 @@ export const NotificationWrapper = forwardRef<HTMLDivElement>((_, ref) => {
     </NotificationStateContext.Provider>
   );
 });
-export const Notifications = forwardRef<HTMLDivElement>((_, ref) => {
+const Notifications = forwardRef<HTMLDivElement>((_, ref) => {
   const { notificationState } = useNotificationsContext();
 
   return (
-    <div ref={ref} className={cn(['h-full w-full flex flex-col'])}>
+    <div ref={ref} className={cn(["h-full w-full flex flex-col"])}>
       {notificationState.selectedEvent && (
         <div
           className={cn([
-            'w-full h-[48px] flex flex-col',
-            notificationState.moreInfoExpanded && 'h-[235px]',
+            "w-full h-[48px] flex flex-col",
+            notificationState.moreInfoExpanded && "h-[235px]",
             notificationState.moreInfoExpanded &&
-              notificationState.selectedEvent.kind === 'dropped-frames' &&
-              'h-[150px]',
+              notificationState.selectedEvent.kind === "dropped-frames" &&
+              "h-[150px]",
           ])}
         >
           <NotificationHeader selectedEvent={notificationState.selectedEvent} />
@@ -358,18 +334,18 @@ export const Notifications = forwardRef<HTMLDivElement>((_, ref) => {
       )}
       <div
         className={cn([
-          'flex ',
-          notificationState.selectedEvent ? 'h-[calc(100%-48px)]' : 'h-full',
-          notificationState.moreInfoExpanded && 'h-[calc(100%-200px)]',
+          "flex ",
+          notificationState.selectedEvent ? "h-[calc(100%-48px)]" : "h-full",
+          notificationState.moreInfoExpanded && "h-[calc(100%-200px)]",
           notificationState.moreInfoExpanded &&
-            notificationState.selectedEvent?.kind === 'dropped-frames' &&
-            'h-[calc(100%-150px)]',
+            notificationState.selectedEvent?.kind === "dropped-frames" &&
+            "h-[calc(100%-150px)]",
         ])}
       >
-        <div className={cn(['h-full min-w-[200px]'])}>
+        <div className={cn(["h-full min-w-[200px]"])}>
           <SlowdownHistory />
         </div>
-        <div className={cn(['w-[calc(100%-200px)] h-full overflow-y-auto'])}>
+        <div className={cn(["w-[calc(100%-200px)] h-full overflow-y-auto"])}>
           <DetailsRoutes />
         </div>
       </div>
@@ -381,7 +357,7 @@ const MoreInfo = () => {
   const { notificationState } = useNotificationsContext();
 
   if (!notificationState.selectedEvent) {
-    throw new Error('Invariant must have selected event for more info');
+    throw new Error("Invariant must have selected event for more info");
   }
 
   const event = notificationState.selectedEvent;
@@ -389,28 +365,28 @@ const MoreInfo = () => {
   return (
     <div
       className={cn([
-        'px-4 py-2 border-b border-[#27272A] bg-[#18181B]/50 h-[calc(100%-40px)]',
-        event.kind === 'dropped-frames' && `h-[calc(100%-25px)]`,
+        "px-4 py-2 border-b border-[#27272A] bg-[#18181B]/50 h-[calc(100%-40px)]",
+        event.kind === "dropped-frames" && `h-[calc(100%-25px)]`,
       ])}
     >
-      <div className={cn(['flex flex-col gap-y-4 h-full'])}>
+      <div className={cn(["flex flex-col gap-y-4 h-full"])}>
         {iife(() => {
           switch (event.kind) {
-            case 'interaction': {
+            case "interaction": {
               return (
                 <>
-                  <div className={cn(['flex items-center gap-x-3'])}>
+                  <div className={cn(["flex items-center gap-x-3"])}>
                     <span className="text-[#6F6F78] text-xs font-medium">
-                      {event.type === 'click'
-                        ? 'Clicked component location'
-                        : 'Typed in component location'}
+                      {event.type === "click"
+                        ? "Clicked component location"
+                        : "Typed in component location"}
                     </span>
                     <div className="font-mono text-[#E4E4E7] flex items-center bg-[#27272A] pl-2 py-1 rounded-sm overflow-x-auto">
                       {event.componentPath.toReversed().map((part, i) => (
                         <>
                           <span
                             style={{
-                              lineHeight: '14px',
+                              lineHeight: "14px",
                             }}
                             key={part}
                             className="text-[10px] whitespace-nowrap"
@@ -425,18 +401,14 @@ const MoreInfo = () => {
                     </div>
                   </div>
 
-                  <div className={cn(['flex items-center gap-x-3'])}>
-                    <span className="text-[#6F6F78] text-xs font-medium">
-                      Total Time
-                    </span>
+                  <div className={cn(["flex items-center gap-x-3"])}>
+                    <span className="text-[#6F6F78] text-xs font-medium">Total Time</span>
                     <span className="text-[#E4E4E7] bg-[#27272A] px-1.5 py-1 rounded-sm text-xs">
                       {getTotalTime(event.timing).toFixed(0)}ms
                     </span>
                   </div>
-                  <div className={cn(['flex items-center gap-x-3'])}>
-                    <span className="text-[#6F6F78] text-xs font-medium">
-                      Occurred
-                    </span>
+                  <div className={cn(["flex items-center gap-x-3"])}>
+                    <span className="text-[#6F6F78] text-xs font-medium">Occurred</span>
                     <span className="text-[#E4E4E7] bg-[#27272A] px-1.5 py-1 rounded-sm text-xs">
                       {`${((Date.now() - event.timestamp) / 1000).toFixed(0)}s ago`}
                     </span>
@@ -444,22 +416,18 @@ const MoreInfo = () => {
                 </>
               );
             }
-            case 'dropped-frames': {
+            case "dropped-frames": {
               return (
                 <>
-                  <div className={cn(['flex items-center gap-x-3'])}>
-                    <span className="text-[#6F6F78] text-xs font-medium">
-                      Total Time
-                    </span>
+                  <div className={cn(["flex items-center gap-x-3"])}>
+                    <span className="text-[#6F6F78] text-xs font-medium">Total Time</span>
                     <span className="text-[#E4E4E7] bg-[#27272A] px-1.5 py-1 rounded-sm text-xs">
                       {getTotalTime(event.timing).toFixed(0)}ms
                     </span>
                   </div>
 
-                  <div className={cn(['flex items-center gap-x-3'])}>
-                    <span className="text-[#6F6F78] text-xs font-medium">
-                      Occurred
-                    </span>
+                  <div className={cn(["flex items-center gap-x-3"])}>
+                    <span className="text-[#6F6F78] text-xs font-medium">Occurred</span>
                     <span className="text-[#E4E4E7] bg-[#27272A] px-1.5 py-1 rounded-sm text-xs">
                       {`${((Date.now() - event.timestamp) / 1000).toFixed(0)}s ago`}
                     </span>
diff --git a/packages/scan/src/web/views/notifications/optimize.tsx b/packages/scan/src/web/views/notifications/optimize.tsx
index 8be7131a..ee4c2da8 100644
--- a/packages/scan/src/web/views/notifications/optimize.tsx
+++ b/packages/scan/src/web/views/notifications/optimize.tsx
@@ -1,15 +1,10 @@
-import { useState } from 'preact/hooks';
-import { cn } from '~web/utils/helpers';
-import {
-  GroupedFiberRender,
-  NotificationEvent,
-  getComponentName,
-  getTotalTime,
-} from './data';
-import { iife } from '~core/notifications/performance-utils';
+import { useState } from "preact/hooks";
+import { cn } from "~web/utils/helpers";
+import { GroupedFiberRender, NotificationEvent, getComponentName, getTotalTime } from "./data";
+import { iife } from "~core/notifications/performance-utils";
 
 const formatReactData = (groupedFiberRenders: Array<GroupedFiberRender>) => {
-  let text = '';
+  let text = "";
 
   const filteredFibers = groupedFiberRenders
     .toSorted((a, b) => b.totalTime - a.totalTime)
@@ -17,11 +12,11 @@ const formatReactData = (groupedFiberRenders: Array<GroupedFiberRender>) => {
     .filter((fiber) => fiber.totalTime > 5);
 
   filteredFibers.forEach((fiberRender) => {
-    let localText = '';
+    let localText = "";
 
-    localText += 'Component Name:';
+    localText += "Component Name:";
     localText += fiberRender.name;
-    localText += '\n';
+    localText += "\n";
 
     localText += `Rendered: ${fiberRender.count} times\n`;
     localText += `Sum of self times for ${fiberRender.name} is ${fiberRender.totalTime.toFixed(0)}ms\n`;
@@ -47,13 +42,13 @@ const formatReactData = (groupedFiberRenders: Array<GroupedFiberRender>) => {
     }
 
     text += localText;
-    text += '\n';
+    text += "\n";
   });
 
   return text;
 };
 
-export const generateInteractionDataPrompt = ({
+const generateInteractionDataPrompt = ({
   renderTime,
   eHandlerTimeExcludingRenders,
   toRafTime,
@@ -76,7 +71,7 @@ export const generateInteractionDataPrompt = ({
 	- things like prepaint, style recalculations, layerization, async web API's like observers may occur during this time
 - how long it took from the last request animation frame to when the dom was committed: ${commitTime.toFixed(0)}ms
 	- during this period you will see paint, commit, potential style recalcs, and other misc browser activity. Frequently high times here imply css that makes the browser do a lot of work, or mutating expensive dom properties during the event handler stage. This can be many things, but it narrows the problem scope significantly when this is high
-${framePresentTime === null ? '' : `- how long it took from dom commit for the frame to be presented: ${framePresentTime.toFixed(0)}ms. This is when information about how to paint the next frame is sent to the compositor threads, and when the GPU does work. If this is high, look for issues that may be a bottleneck for operations occurring during this time`}
+${framePresentTime === null ? "" : `- how long it took from dom commit for the frame to be presented: ${framePresentTime.toFixed(0)}ms. This is when information about how to paint the next frame is sent to the compositor threads, and when the GPU does work. If this is high, look for issues that may be a bottleneck for operations occurring during this time`}
 
 ### Low level
 We also have lower level information about react components, such as their render time, and which props/state/context changed when they re-rendered.
@@ -140,7 +135,7 @@ We also provide you with a breakdown of what the browser spent time on during th
 	- things like prepaint, style recalculations, layerization, async web API's like observers may occur during this time
 - how long it took from the last request animation frame to when the dom was committed: ${commitTime.toFixed(0)}ms
 	- during this period you will see paint, commit, potential style recalcs, and other misc browser activity. Frequently high times here imply css that makes the browser do a lot of work, or mutating expensive dom properties during the event handler stage. This can be many things, but it narrows the problem scope significantly when this is high
-${framePresentTime === null ? '' : `- how long it took from dom commit for the frame to be presented: ${framePresentTime.toFixed(0)}ms. This is when information about how to paint the next frame is sent to the compositor threads, and when the GPU does work. If this is high, look for issues that may be a bottleneck for operations occurring during this time`}
+${framePresentTime === null ? "" : `- how long it took from dom commit for the frame to be presented: ${framePresentTime.toFixed(0)}ms. This is when information about how to paint the next frame is sent to the compositor threads, and when the GPU does work. If this is high, look for issues that may be a bottleneck for operations occurring during this time`}
 
 
 We also have lower level information about react components, such as their render time, and which props/state/context changed when they re-rendered.
@@ -214,7 +209,7 @@ If a node_module is the component with high renders, you can experiment to see i
 If renders don't seem to be the problem, see if there are any expensive CSS properties being added/mutated, or any expensive DOM Element mutations/new elements being created that could cause this slowdown. 
 `;
 
-export const generateFrameDropExplanationPrompt = ({
+const generateFrameDropExplanationPrompt = ({
   renderTime,
   otherTime,
   formattedReactData,
@@ -269,7 +264,7 @@ const generateFrameDropDataPrompt = ({
 We also have lower level information about react components, such as their render time, and which props/state/context changed when they re-rendered.
 ${formattedReactData}`;
 
-export const generateInteractionExplanationPrompt = ({
+const generateInteractionExplanationPrompt = ({
   interactionType,
   name,
   time,
@@ -305,7 +300,7 @@ We also provide you with a breakdown of what the browser spent time on during th
 	- things like prepaint, style recalculations, layerization, async web API's like observers may occur during this time
 - how long it took from the last request animation frame to when the dom was committed: ${commitTime.toFixed(0)}ms
 	- during this period you will see paint, commit, potential style recalcs, and other misc browser activity. Frequently high times here imply css that makes the browser do a lot of work, or mutating expensive dom properties during the event handler stage. This can be many things, but it narrows the problem scope significantly when this is high
-${framePresentTime === null ? '' : `- how long it took from dom commit for the frame to be presented: ${framePresentTime.toFixed(0)}ms. This is when information about how to paint the next frame is sent to the compositor threads, and when the GPU does work. If this is high, look for issues that may be a bottleneck for operations occurring during this time`}
+${framePresentTime === null ? "" : `- how long it took from dom commit for the frame to be presented: ${framePresentTime.toFixed(0)}ms. This is when information about how to paint the next frame is sent to the compositor threads, and when the GPU does work. If this is high, look for issues that may be a bottleneck for operations occurring during this time`}
 
 We also have lower level information about react components, such as their render time, and which props/state/context changed when they re-rendered.
 
@@ -328,18 +323,16 @@ It's also good to note that react profiles hook times in development, and if man
 If it's not possible to explain the root problem from this data, please ask me for more data explicitly, and what we would need to know to find the source of the performance problem.
 `;
 export const getLLMPrompt = (
-  activeTab: 'fix' | 'data' | 'explanation',
+  activeTab: "fix" | "data" | "explanation",
   selectedEvent: NotificationEvent,
 ) =>
   iife(() => {
     switch (activeTab) {
-      case 'data': {
+      case "data": {
         switch (selectedEvent.kind) {
-          case 'dropped-frames': {
+          case "dropped-frames": {
             return generateFrameDropDataPrompt({
-              formattedReactData: formatReactData(
-                selectedEvent.groupedFiberRenders,
-              ),
+              formattedReactData: formatReactData(selectedEvent.groupedFiberRenders),
               renderTime: selectedEvent.groupedFiberRenders.reduce(
                 (prev, curr) => prev + curr.totalTime,
                 0,
@@ -347,13 +340,11 @@ export const getLLMPrompt = (
               otherTime: selectedEvent.timing.otherTime,
             });
           }
-          case 'interaction': {
+          case "interaction": {
             return generateInteractionDataPrompt({
               commitTime: selectedEvent.timing.frameConstruction,
               eHandlerTimeExcludingRenders: selectedEvent.timing.otherJSTime,
-              formattedReactData: formatReactData(
-                selectedEvent.groupedFiberRenders,
-              ),
+              formattedReactData: formatReactData(selectedEvent.groupedFiberRenders),
               framePresentTime: selectedEvent.timing.frameDraw,
               renderTime: selectedEvent.groupedFiberRenders.reduce(
                 (prev, curr) => prev + curr.totalTime,
@@ -364,13 +355,11 @@ export const getLLMPrompt = (
           }
         }
       }
-      case 'explanation': {
+      case "explanation": {
         switch (selectedEvent.kind) {
-          case 'dropped-frames': {
+          case "dropped-frames": {
             return generateFrameDropExplanationPrompt({
-              formattedReactData: formatReactData(
-                selectedEvent.groupedFiberRenders,
-              ),
+              formattedReactData: formatReactData(selectedEvent.groupedFiberRenders),
               renderTime: selectedEvent.groupedFiberRenders.reduce(
                 (prev, curr) => prev + curr.totalTime,
                 0,
@@ -378,13 +367,11 @@ export const getLLMPrompt = (
               otherTime: selectedEvent.timing.otherTime,
             });
           }
-          case 'interaction': {
+          case "interaction": {
             return generateInteractionExplanationPrompt({
               commitTime: selectedEvent.timing.frameConstruction,
               eHandlerTimeExcludingRenders: selectedEvent.timing.otherJSTime,
-              formattedReactData: formatReactData(
-                selectedEvent.groupedFiberRenders,
-              ),
+              formattedReactData: formatReactData(selectedEvent.groupedFiberRenders),
               framePresentTime: selectedEvent.timing.frameDraw,
               interactionType: selectedEvent.type,
               name: getComponentName(selectedEvent.componentPath),
@@ -398,13 +385,11 @@ export const getLLMPrompt = (
           }
         }
       }
-      case 'fix': {
+      case "fix": {
         switch (selectedEvent.kind) {
-          case 'dropped-frames': {
+          case "dropped-frames": {
             return generateFrameDropOptimizationPrompt({
-              formattedReactData: formatReactData(
-                selectedEvent.groupedFiberRenders,
-              ),
+              formattedReactData: formatReactData(selectedEvent.groupedFiberRenders),
 
               renderTime: selectedEvent.groupedFiberRenders.reduce(
                 (prev, curr) => prev + curr.totalTime,
@@ -413,14 +398,12 @@ export const getLLMPrompt = (
               otherTime: selectedEvent.timing.otherTime,
             });
           }
-          case 'interaction': {
+          case "interaction": {
             return generateInteractionOptimizationPrompt({
               commitTime: selectedEvent.timing.frameConstruction,
-              componentPath: selectedEvent.componentPath.join('>'),
+              componentPath: selectedEvent.componentPath.join(">"),
               eHandlerTimeExcludingRenders: selectedEvent.timing.otherJSTime,
-              formattedReactData: formatReactData(
-                selectedEvent.groupedFiberRenders,
-              ),
+              formattedReactData: formatReactData(selectedEvent.groupedFiberRenders),
               framePresentTime: selectedEvent.timing.frameDraw,
               interactionType: selectedEvent.type,
               name: getComponentName(selectedEvent.componentPath),
@@ -437,65 +420,55 @@ export const getLLMPrompt = (
     }
   });
 
-export const Optimize = ({
-  selectedEvent,
-}: { selectedEvent: NotificationEvent }) => {
-  const [activeTab, setActiveTab] = useState<'fix' | 'explanation' | 'data'>(
-    'fix',
-  );
+export const Optimize = ({ selectedEvent }: { selectedEvent: NotificationEvent }) => {
+  const [activeTab, setActiveTab] = useState<"fix" | "explanation" | "data">("fix");
   const [copying, setCopying] = useState(false);
 
   return (
-    <div className={cn(['w-full h-full'])}>
-      <div
-        className={cn([
-          'border border-[#27272A] rounded-sm h-4/5 text-xs overflow-hidden',
-        ])}
-      >
-        <div className={cn(['bg-[#18181B] p-1 rounded-t-sm'])}>
-          <div className={cn(['flex items-center gap-x-1'])}>
+    <div className={cn(["w-full h-full"])}>
+      <div className={cn(["border border-[#27272A] rounded-sm h-4/5 text-xs overflow-hidden"])}>
+        <div className={cn(["bg-[#18181B] p-1 rounded-t-sm"])}>
+          <div className={cn(["flex items-center gap-x-1"])}>
             <button
-              onClick={() => setActiveTab('fix')}
+              onClick={() => setActiveTab("fix")}
               className={cn([
-                'flex items-center justify-center whitespace-nowrap py-1.5 px-3 rounded-sm',
-                activeTab === 'fix'
-                  ? 'text-white bg-[#7521c8]'
-                  : 'text-[#6E6E77] hover:text-white',
+                "flex items-center justify-center whitespace-nowrap py-1.5 px-3 rounded-sm",
+                activeTab === "fix" ? "text-white bg-[#7521c8]" : "text-[#6E6E77] hover:text-white",
               ])}
             >
               Fix
             </button>
 
             <button
-              onClick={() => setActiveTab('explanation')}
+              onClick={() => setActiveTab("explanation")}
               className={cn([
-                'flex items-center justify-center whitespace-nowrap py-1.5 px-3 rounded-sm',
-                activeTab === 'explanation'
-                  ? 'text-white bg-[#7521c8]'
-                  : 'text-[#6E6E77] hover:text-white',
+                "flex items-center justify-center whitespace-nowrap py-1.5 px-3 rounded-sm",
+                activeTab === "explanation"
+                  ? "text-white bg-[#7521c8]"
+                  : "text-[#6E6E77] hover:text-white",
               ])}
             >
               Explanation
             </button>
             <button
-              onClick={() => setActiveTab('data')}
+              onClick={() => setActiveTab("data")}
               className={cn([
-                'flex items-center justify-center whitespace-nowrap py-1.5 px-3 rounded-sm',
-                activeTab === 'data'
-                  ? 'text-white bg-[#7521c8]'
-                  : 'text-[#6E6E77] hover:text-white',
+                "flex items-center justify-center whitespace-nowrap py-1.5 px-3 rounded-sm",
+                activeTab === "data"
+                  ? "text-white bg-[#7521c8]"
+                  : "text-[#6E6E77] hover:text-white",
               ])}
             >
               Data
             </button>
           </div>
         </div>
-        <div className={cn(['overflow-y-auto h-full'])}>
+        <div className={cn(["overflow-y-auto h-full"])}>
           <pre
             className={cn([
-              'p-2 h-full',
-              'whitespace-pre-wrap break-words',
-              'text-gray-300 font-mono ',
+              "p-2 h-full",
+              "whitespace-pre-wrap break-words",
+              "text-gray-300 font-mono ",
             ])}
           >
             {getLLMPrompt(activeTab, selectedEvent)}
@@ -511,12 +484,12 @@ export const Optimize = ({
           setTimeout(() => setCopying(false), 1000);
         }}
         className={cn([
-          'mt-4 px-4 py-2 bg-[#18181B] text-[#6E6E77] rounded-sm',
-          'hover:text-white transition-colors duration-200',
-          'flex items-center justify-center gap-x-2 text-xs',
+          "mt-4 px-4 py-2 bg-[#18181B] text-[#6E6E77] rounded-sm",
+          "hover:text-white transition-colors duration-200",
+          "flex items-center justify-center gap-x-2 text-xs",
         ])}
       >
-        <span>{copying ? 'Copied!' : 'Copy Prompt'}</span>
+        <span>{copying ? "Copied!" : "Copy Prompt"}</span>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="16"
@@ -527,10 +500,7 @@ export const Optimize = ({
           strokeWidth="2"
           strokeLinecap="round"
           strokeLinejoin="round"
-          className={cn([
-            'transition-transform duration-200',
-            copying && 'scale-110',
-          ])}
+          className={cn(["transition-transform duration-200", copying && "scale-110"])}
         >
           {copying ? (
             <path d="M20 6L9 17l-5-5" />
diff --git a/packages/scan/src/web/views/notifications/other-visualization.tsx b/packages/scan/src/web/views/notifications/other-visualization.tsx
index b20dc751..311329fc 100644
--- a/packages/scan/src/web/views/notifications/other-visualization.tsx
+++ b/packages/scan/src/web/views/notifications/other-visualization.tsx
@@ -1,94 +1,84 @@
-import { ReactNode } from 'preact/compat';
-import { useContext, useEffect, useState } from 'preact/hooks';
-import { getIsProduction } from '~core/index';
-import { iife } from '~core/notifications/performance-utils';
-import { cn } from '~web/utils/helpers';
-import {
-  InteractionEvent,
-  NotificationEvent,
-  getTotalTime,
-  useNotificationsContext,
-} from './data';
-import { getLLMPrompt } from './optimize';
-import { ToolbarElementContext } from '~web/widget';
+import { ReactNode } from "preact/compat";
+import { useContext, useEffect, useState } from "preact/hooks";
+import { getIsProduction } from "~core/index";
+import { iife } from "~core/notifications/performance-utils";
+import { cn } from "~web/utils/helpers";
+import { InteractionEvent, NotificationEvent, getTotalTime, useNotificationsContext } from "./data";
+import { getLLMPrompt } from "./optimize";
+import { ToolbarElementContext } from "~web/widget";
 type BaseTimeDataItem = {
   name: string;
   time: number;
   color: string;
   kind:
-    | 'other-not-javascript'
-    | 'other-javascript'
-    | 'render'
-    | 'other-frame-drop'
-    | 'total-processing-time';
+    | "other-not-javascript"
+    | "other-javascript"
+    | "render"
+    | "other-frame-drop"
+    | "total-processing-time";
 };
 
 type TimeData = Array<BaseTimeDataItem>;
 
-const getTimeData = (
-  selectedEvent: NotificationEvent,
-  isProduction: boolean,
-) => {
+const getTimeData = (selectedEvent: NotificationEvent, isProduction: boolean) => {
   switch (selectedEvent.kind) {
     // todo: push instead of conditional spread
-    case 'dropped-frames': {
+    case "dropped-frames": {
       const timeData: TimeData = [
         ...(isProduction
           ? [
               {
-                name: 'Total Processing Time',
+                name: "Total Processing Time",
                 time: getTotalTime(selectedEvent.timing),
-                color: 'bg-red-500',
-                kind: 'total-processing-time' as const,
+                color: "bg-red-500",
+                kind: "total-processing-time" as const,
               },
             ]
           : [
               {
-                name: 'Renders',
+                name: "Renders",
                 time: selectedEvent.timing.renderTime,
-                color: 'bg-purple-500',
-                kind: 'render' as const,
+                color: "bg-purple-500",
+                kind: "render" as const,
               },
               {
-                name: 'JavaScript, DOM updates, Draw Frame',
+                name: "JavaScript, DOM updates, Draw Frame",
                 time: selectedEvent.timing.otherTime,
-                color: 'bg-[#4b4b4b]',
-                kind: 'other-frame-drop' as const,
+                color: "bg-[#4b4b4b]",
+                kind: "other-frame-drop" as const,
               },
             ]),
       ];
       return timeData;
     }
-    case 'interaction': {
+    case "interaction": {
       const timeData: TimeData = [
         ...(!isProduction
           ? [
               {
-                name: 'Renders',
+                name: "Renders",
                 time: selectedEvent.timing.renderTime,
-                color: 'bg-purple-500',
-                kind: 'render' as const,
+                color: "bg-purple-500",
+                kind: "render" as const,
               },
             ]
           : []),
         {
-          name: isProduction
-            ? 'React Renders, Hooks, Other JavaScript'
-            : 'JavaScript/React Hooks ',
+          name: isProduction ? "React Renders, Hooks, Other JavaScript" : "JavaScript/React Hooks ",
           time: selectedEvent.timing.otherJSTime,
-          color: 'bg-[#EFD81A]',
+          color: "bg-[#EFD81A]",
 
-          kind: 'other-javascript',
+          kind: "other-javascript",
         },
 
         {
-          name: 'Update DOM and Draw New Frame',
+          name: "Update DOM and Draw New Frame",
           time:
             getTotalTime(selectedEvent.timing) -
             selectedEvent.timing.renderTime -
             selectedEvent.timing.otherJSTime,
-          color: 'bg-[#1D3A66]',
-          kind: 'other-not-javascript',
+          color: "bg-[#1D3A66]",
+          kind: "other-not-javascript",
         },
       ];
 
@@ -97,17 +87,11 @@ const getTimeData = (
   }
 };
 
-export const OtherVisualization = ({
-  selectedEvent,
-}: {
-  selectedEvent: NotificationEvent;
-}) => {
+export const OtherVisualization = ({ selectedEvent }: { selectedEvent: NotificationEvent }) => {
   const [isProduction] = useState(getIsProduction() ?? false);
   const { notificationState } = useNotificationsContext();
   const [expandedItems, setExpandedItems] = useState<string[]>(
-    notificationState.routeMessage?.name
-      ? [notificationState.routeMessage.name]
-      : [],
+    notificationState.routeMessage?.name ? [notificationState.routeMessage.name] : [],
   );
   const timeData = getTimeData(selectedEvent, isProduction);
   const root = useContext(ToolbarElementContext);
@@ -116,7 +100,7 @@ export const OtherVisualization = ({
   // oxlint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => {
     if (notificationState.routeMessage?.name) {
-      const container = root?.querySelector('#overview-scroll-container');
+      const container = root?.querySelector("#overview-scroll-container");
       const element = root?.querySelector(
         `#react-scan-overview-bar-${notificationState.routeMessage.name}`,
       ) as HTMLElement;
@@ -132,11 +116,9 @@ export const OtherVisualization = ({
 
   // oxlint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => {
-    if (notificationState.route === 'other-visualization') {
+    if (notificationState.route === "other-visualization") {
       setExpandedItems((prev) =>
-        notificationState.routeMessage?.name
-          ? [notificationState.routeMessage.name]
-          : prev,
+        notificationState.routeMessage?.name ? [notificationState.routeMessage.name] : prev,
       );
     }
   }, [notificationState.route]);
@@ -148,9 +130,7 @@ export const OtherVisualization = ({
       <div className="p-2 border-b border-zinc-800 bg-zinc-900/50">
         <div className="flex items-center justify-between">
           <h3 className="text-xs font-medium">What was time spent on?</h3>
-          <span className="text-xs text-zinc-400">
-            Total: {totalTime.toFixed(0)}ms
-          </span>
+          <span className="text-xs text-zinc-400">Total: {totalTime.toFixed(0)}ms</span>
         </div>
       </div>
       <div className="divide-y divide-zinc-800">
@@ -172,7 +152,7 @@ export const OtherVisualization = ({
                   <div className="flex items-center justify-between mb-2">
                     <div className="flex items-center gap-0.5">
                       <svg
-                        className={`h-4 w-4 text-zinc-400 transition-transform ${isExpanded ? 'rotate-90' : ''}`}
+                        className={`h-4 w-4 text-zinc-400 transition-transform ${isExpanded ? "rotate-90" : ""}`}
                         fill="none"
                         stroke="currentColor"
                         viewBox="0 0 24 24"
@@ -184,13 +164,9 @@ export const OtherVisualization = ({
                           d="M9 5l7 7-7 7"
                         />
                       </svg>
-                      <span className="font-medium flex items-center text-left">
-                        {entry.name}
-                      </span>
+                      <span className="font-medium flex items-center text-left">{entry.name}</span>
                     </div>
-                    <span className=" text-zinc-400">
-                      {entry.time.toFixed(0)}ms
-                    </span>
+                    <span className=" text-zinc-400">{entry.time.toFixed(0)}ms</span>
                   </div>
                   <div className="h-1 bg-zinc-800 rounded-full overflow-hidden">
                     <div
@@ -207,40 +183,28 @@ export const OtherVisualization = ({
                   <p className=" text-zinc-400 mb-4 text-xs">
                     {iife(() => {
                       switch (selectedEvent.kind) {
-                        case 'interaction': {
+                        case "interaction": {
                           switch (entry.kind) {
-                            case 'render': {
-                              return (
-                                <Explanation
-                                  input={getRenderInput(selectedEvent)}
-                                />
-                              );
+                            case "render": {
+                              return <Explanation input={getRenderInput(selectedEvent)} />;
                             }
 
-                            case 'other-javascript': {
-                              return (
-                                <Explanation
-                                  input={getJSInput(selectedEvent)}
-                                />
-                              );
+                            case "other-javascript": {
+                              return <Explanation input={getJSInput(selectedEvent)} />;
                             }
 
-                            case 'other-not-javascript': {
-                              return (
-                                <Explanation
-                                  input={getDrawInput(selectedEvent)}
-                                />
-                              );
+                            case "other-not-javascript": {
+                              return <Explanation input={getDrawInput(selectedEvent)} />;
                             }
                           }
                         }
-                        case 'dropped-frames': {
+                        case "dropped-frames": {
                           switch (entry.kind) {
-                            case 'total-processing-time': {
+                            case "total-processing-time": {
                               return (
                                 <Explanation
                                   input={{
-                                    kind: 'total-processing',
+                                    kind: "total-processing",
                                     data: {
                                       time: getTotalTime(selectedEvent.timing),
                                     },
@@ -248,39 +212,32 @@ export const OtherVisualization = ({
                                 />
                               );
                             }
-                            case 'render': {
+                            case "render": {
                               return (
                                 <>
                                   <Explanation
                                     input={{
-                                      kind: 'render',
+                                      kind: "render",
                                       data: {
-                                        topByTime:
-                                          selectedEvent.groupedFiberRenders
-                                            .toSorted(
-                                              (a, b) =>
-                                                b.totalTime - a.totalTime,
-                                            )
-                                            .slice(0, 3)
-                                            .map((render) => ({
-                                              name: render.name,
-                                              percentage:
-                                                render.totalTime /
-                                                getTotalTime(
-                                                  selectedEvent.timing,
-                                                ),
-                                            })),
+                                        topByTime: selectedEvent.groupedFiberRenders
+                                          .toSorted((a, b) => b.totalTime - a.totalTime)
+                                          .slice(0, 3)
+                                          .map((render) => ({
+                                            name: render.name,
+                                            percentage:
+                                              render.totalTime / getTotalTime(selectedEvent.timing),
+                                          })),
                                       },
                                     }}
                                   />
                                 </>
                               );
                             }
-                            case 'other-frame-drop': {
+                            case "other-frame-drop": {
                               return (
                                 <Explanation
                                   input={{
-                                    kind: 'other',
+                                    kind: "other",
                                   }}
                                 />
                               );
@@ -302,29 +259,29 @@ export const OtherVisualization = ({
 
 type OverviewInput =
   | {
-      kind: 'js-explanation-base';
+      kind: "js-explanation-base";
     }
   | {
-      kind: 'total-processing';
+      kind: "total-processing";
       data: {
         time: number;
       };
     }
   | {
-      kind: 'high-render-count-high-js';
+      kind: "high-render-count-high-js";
       data: {
         renderCount: number;
         topByCount: Array<{ name: string; count: number }>;
       };
     }
   | {
-      kind: 'low-render-count-high-js';
+      kind: "low-render-count-high-js";
       data: {
         renderCount: number;
       };
     }
   | {
-      kind: 'high-render-count-update-dom-draw-frame';
+      kind: "high-render-count-update-dom-draw-frame";
       data: {
         count: number;
         percentageOfTotal: number;
@@ -332,33 +289,21 @@ type OverviewInput =
       };
     }
   | {
-      kind: 'update-dom-draw-frame';
+      kind: "update-dom-draw-frame";
       data: {
         copyButton: ReactNode;
       };
     }
   | {
-      kind: 'render';
+      kind: "render";
       data: { topByTime: Array<{ name: string; percentage: number }> };
     }
   | {
-      kind: 'other';
+      kind: "other";
     };
 
-export const getTotalProcessingTimeInput = (event: NotificationEvent) => {
-  return {
-    kind: 'total-processing',
-    data: {
-      time: getTotalTime(event.timing),
-    },
-  } satisfies OverviewInput;
-};
-
 const getDrawInput = (event: InteractionEvent): OverviewInput => {
-  const renderCount = event.groupedFiberRenders.reduce(
-    (prev, curr) => prev + curr.count,
-    0,
-  );
+  const renderCount = event.groupedFiberRenders.reduce((prev, curr) => prev + curr.count, 0);
 
   const renderTime = event.timing.renderTime;
   const totalTime = getTotalTime(event.timing);
@@ -366,7 +311,7 @@ const getDrawInput = (event: InteractionEvent): OverviewInput => {
 
   if (renderCount > 100) {
     return {
-      kind: 'high-render-count-update-dom-draw-frame',
+      kind: "high-render-count-update-dom-draw-frame",
       data: {
         count: renderCount,
         percentageOfTotal: renderPercentage,
@@ -376,7 +321,7 @@ const getDrawInput = (event: InteractionEvent): OverviewInput => {
   }
 
   return {
-    kind: 'update-dom-draw-frame',
+    kind: "update-dom-draw-frame",
     data: {
       copyButton: <CopyPromptButton />,
     },
@@ -395,14 +340,14 @@ const CopyPromptButton = () => {
         }
 
         await navigator.clipboard.writeText(
-          getLLMPrompt('explanation', notificationState.selectedEvent),
+          getLLMPrompt("explanation", notificationState.selectedEvent),
         );
         setCopying(true);
         setTimeout(() => setCopying(false), 1000);
       }}
       className="bg-zinc-800 flex hover:bg-zinc-700 text-zinc-200 px-2 py-1 rounded gap-x-3"
     >
-      <span>{copying ? 'Copied!' : 'Copy Prompt'}</span>
+      <span>{copying ? "Copied!" : "Copy Prompt"}</span>
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="16"
@@ -413,10 +358,7 @@ const CopyPromptButton = () => {
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
-        className={cn([
-          'transition-transform duration-200',
-          copying && 'scale-110',
-        ])}
+        className={cn(["transition-transform duration-200", copying && "scale-110"])}
       >
         {copying ? (
           <path d="M20 6L9 17l-5-5" />
@@ -434,7 +376,7 @@ const CopyPromptButton = () => {
 const getRenderInput = (event: InteractionEvent): OverviewInput => {
   if (event.timing.renderTime / getTotalTime(event.timing) > 0.3) {
     return {
-      kind: 'render',
+      kind: "render",
       data: {
         topByTime: event.groupedFiberRenders
           .toSorted((a, b) => b.totalTime - a.totalTime)
@@ -448,18 +390,15 @@ const getRenderInput = (event: InteractionEvent): OverviewInput => {
   }
 
   return {
-    kind: 'other',
+    kind: "other",
   };
 };
 
 const getJSInput = (event: InteractionEvent): OverviewInput => {
-  const renderCount = event.groupedFiberRenders.reduce(
-    (prev, curr) => prev + curr.count,
-    0,
-  );
+  const renderCount = event.groupedFiberRenders.reduce((prev, curr) => prev + curr.count, 0);
   if (event.timing.otherJSTime / getTotalTime(event.timing) < 0.2) {
     return {
-      kind: 'js-explanation-base',
+      kind: "js-explanation-base",
     };
   }
   if (
@@ -468,7 +407,7 @@ const getJSInput = (event: InteractionEvent): OverviewInput => {
   ) {
     // not sure a great heuristic for picking the render count
     return {
-      kind: 'high-render-count-high-js',
+      kind: "high-render-count-high-js",
       data: {
         renderCount,
         topByCount: event.groupedFiberRenders
@@ -481,12 +420,12 @@ const getJSInput = (event: InteractionEvent): OverviewInput => {
   if (event.timing.otherJSTime / getTotalTime(event.timing) > 0.3) {
     if (event.timing.renderTime > 0.2) {
       return {
-        kind: 'js-explanation-base',
+        kind: "js-explanation-base",
       };
     }
 
     return {
-      kind: 'low-render-count-high-js',
+      kind: "low-render-count-high-js",
       data: {
         renderCount,
       },
@@ -494,147 +433,121 @@ const getJSInput = (event: InteractionEvent): OverviewInput => {
   }
 
   return {
-    kind: 'js-explanation-base',
+    kind: "js-explanation-base",
   };
 };
 
 const Explanation = ({ input }: { input: OverviewInput }) => {
   switch (input.kind) {
-    case 'total-processing': {
+    case "total-processing": {
       return (
-        <div
-          className={cn([
-            'text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2',
-          ])}
-        >
+        <div className={cn(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"])}>
           <p>
-            This is the time it took to draw the entire frame that was presented
-            to the user. To be at 60FPS, this number needs to be {'<=16ms'}
+            This is the time it took to draw the entire frame that was presented to the user. To be
+            at 60FPS, this number needs to be {"<=16ms"}
           </p>
 
           <p>
-            To debug the issue, check the "Ranked" tab to see if there are
-            significant component renders
+            To debug the issue, check the "Ranked" tab to see if there are significant component
+            renders
           </p>
           <p>
-            On a production React build, React Scan can't access the time it
-            took for component to render. To get that information, run React
-            Scan on a development build
+            On a production React build, React Scan can't access the time it took for component to
+            render. To get that information, run React Scan on a development build
           </p>
 
           <p>
-            To understand precisely what caused the slowdown while in
-            production, use the <strong>Chrome profiler</strong> and analyze the
-            function call times.
+            To understand precisely what caused the slowdown while in production, use the{" "}
+            <strong>Chrome profiler</strong> and analyze the function call times.
           </p>
 
           <p></p>
         </div>
       );
     }
-    case 'render': {
+    case "render": {
       return (
-        <div
-          className={cn([
-            'text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2',
-          ])}
-        >
+        <div className={cn(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"])}>
           <p>
-            This is the time it took React to run components, and internal logic
-            to handle the output of your component.
+            This is the time it took React to run components, and internal logic to handle the
+            output of your component.
           </p>
 
-          <div className={cn(['flex flex-col'])}>
+          <div className={cn(["flex flex-col"])}>
             <p>The slowest components for this time period were:</p>
             {input.data.topByTime.map((item) => (
               <div key={item.name}>
-                <strong>{item.name}</strong>:{' '}
-                {(item.percentage * 100).toFixed(0)}% of total
+                <strong>{item.name}</strong>: {(item.percentage * 100).toFixed(0)}% of total
               </div>
             ))}
           </div>
           <p>
-            To view the render times of all your components, and what caused
-            them to render, go to the "Ranked" tab
+            To view the render times of all your components, and what caused them to render, go to
+            the "Ranked" tab
           </p>
           <p>The "Ranked" tab shows the render times of every component.</p>
+          <p>The render times of the same components are grouped together into one bar.</p>
           <p>
-            The render times of the same components are grouped together into
-            one bar.
-          </p>
-          <p>
-            Clicking the component will show you what props, state, or context
-            caused the component to re-render.
+            Clicking the component will show you what props, state, or context caused the component
+            to re-render.
           </p>
         </div>
       );
     }
-    case 'js-explanation-base': {
+    case "js-explanation-base": {
       return (
-        <div
-          className={cn([
-            'text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2',
-          ])}
-        >
+        <div className={cn(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"])}>
           <p>
-            This is the period when JavaScript hooks and other JavaScript
-            outside of React Renders run.
+            This is the period when JavaScript hooks and other JavaScript outside of React Renders
+            run.
           </p>
           <p>
-            The most common culprit for high JS time is expensive hooks, like
-            expensive callbacks inside of <code>useEffect</code>'s or a large
-            number of useEffect's called, but this can also be JavaScript event
-            handlers (<code>'onclick'</code>, <code>'onchange'</code>) that
+            The most common culprit for high JS time is expensive hooks, like expensive callbacks
+            inside of <code>useEffect</code>'s or a large number of useEffect's called, but this can
+            also be JavaScript event handlers (<code>'onclick'</code>, <code>'onchange'</code>) that
             performed expensive computation.
           </p>
           <p>
-            If you have lots of components rendering that call hooks, like
-            useEffect, it can add significant overhead even if the callbacks are
-            not expensive. If this is the case, you can try optimizing the
-            renders of those components to avoid the hook from having to run.
+            If you have lots of components rendering that call hooks, like useEffect, it can add
+            significant overhead even if the callbacks are not expensive. If this is the case, you
+            can try optimizing the renders of those components to avoid the hook from having to run.
           </p>
           <p>
-            You should profile your app using the{' '}
-            <strong>Chrome DevTools profiler</strong> to learn exactly which
-            functions took the longest to execute.
+            You should profile your app using the <strong>Chrome DevTools profiler</strong> to learn
+            exactly which functions took the longest to execute.
           </p>
         </div>
       );
     }
-    case 'high-render-count-high-js': {
+    case "high-render-count-high-js": {
       return (
-        <div
-          className={cn([
-            'text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2',
-          ])}
-        >
+        <div className={cn(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"])}>
           <p>
-            This is the period when JavaScript hooks and other JavaScript
-            outside of React Renders run.
+            This is the period when JavaScript hooks and other JavaScript outside of React Renders
+            run.
           </p>
           {input.data.renderCount === 0 ? (
             <>
               <p>
-                There were no renders, which means nothing related to React
-                caused this slowdown. The most likely cause of the slowdown is a
-                slow JavaScript event handler, or code related to a Web API
+                There were no renders, which means nothing related to React caused this slowdown.
+                The most likely cause of the slowdown is a slow JavaScript event handler, or code
+                related to a Web API
               </p>
               <p>
-                You should try to reproduce the slowdown while profiling your
-                website with the
-                <strong>Chrome DevTools profiler</strong> to see exactly what
-                functions took the longest to execute.
+                You should try to reproduce the slowdown while profiling your website with the
+                <strong>Chrome DevTools profiler</strong> to see exactly what functions took the
+                longest to execute.
               </p>
             </>
           ) : (
             <>
-              {' '}
+              {" "}
               <p>
-                There were <strong>{input.data.renderCount}</strong> renders,
-                which could have contributed to the high JavaScript/Hook time if
-                they ran lots of hooks, like <code>useEffects</code>.
+                There were <strong>{input.data.renderCount}</strong> renders, which could have
+                contributed to the high JavaScript/Hook time if they ran lots of hooks, like{" "}
+                <code>useEffects</code>.
               </p>
-              <div className={cn(['flex flex-col'])}>
+              <div className={cn(["flex flex-col"])}>
                 <p>You should try optimizing the renders of:</p>
                 {input.data.topByCount.map((item) => (
                   <div key={item.name}>
@@ -644,130 +557,107 @@ const Explanation = ({ input }: { input: OverviewInput }) => {
               </div>
               and then checking if the problem still exists.
               <p>
-                You can also try profiling your app using the{' '}
-                <strong>Chrome DevTools profiler</strong> to see exactly what
-                functions took the longest to execute.
+                You can also try profiling your app using the{" "}
+                <strong>Chrome DevTools profiler</strong> to see exactly what functions took the
+                longest to execute.
               </p>
             </>
           )}
         </div>
       );
     }
-    case 'low-render-count-high-js': {
+    case "low-render-count-high-js": {
       return (
-        <div
-          className={cn([
-            'text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2',
-          ])}
-        >
+        <div className={cn(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"])}>
           <p>
-            This is the period when JavaScript hooks and other JavaScript
-            outside of React Renders run.
+            This is the period when JavaScript hooks and other JavaScript outside of React Renders
+            run.
           </p>
           <p>
-            There were only <strong>{input.data.renderCount}</strong> renders
-            detected, which means either you had very expensive hooks like{' '}
-            <code>useEffect</code>/<code>useLayoutEffect</code>, or there is
-            other JavaScript running during this interaction that took up the
-            majority of the time.
+            There were only <strong>{input.data.renderCount}</strong> renders detected, which means
+            either you had very expensive hooks like <code>useEffect</code>/
+            <code>useLayoutEffect</code>, or there is other JavaScript running during this
+            interaction that took up the majority of the time.
           </p>
           <p>
-            To understand precisely what caused the slowdown, use the{' '}
-            <strong>Chrome profiler</strong> and analyze the function call
-            times.
+            To understand precisely what caused the slowdown, use the{" "}
+            <strong>Chrome profiler</strong> and analyze the function call times.
           </p>
         </div>
       );
     }
-    case 'high-render-count-update-dom-draw-frame': {
+    case "high-render-count-update-dom-draw-frame": {
       return (
-        <div
-          className={cn([
-            'text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2',
-          ])}
-        >
+        <div className={cn(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"])}>
           <p>
-            These are the calculations the browser is forced to do in response
-            to the JavaScript that ran during the interaction.
+            These are the calculations the browser is forced to do in response to the JavaScript
+            that ran during the interaction.
           </p>
           <p>
-            This can be caused by CSS updates/CSS recalculations, or new DOM
-            elements/DOM mutations.
+            This can be caused by CSS updates/CSS recalculations, or new DOM elements/DOM mutations.
           </p>
           <p>
-            During this interaction, there were{' '}
-            <strong>{input.data.count}</strong> renders, which was{' '}
-            <strong>{input.data.percentageOfTotal.toFixed(0)}%</strong> of the
-            time spent processing
+            During this interaction, there were <strong>{input.data.count}</strong> renders, which
+            was <strong>{input.data.percentageOfTotal.toFixed(0)}%</strong> of the time spent
+            processing
           </p>
           <p>
-            The work performed as a result of the renders may have forced the
-            browser to spend a lot of time to draw the next frame.
+            The work performed as a result of the renders may have forced the browser to spend a lot
+            of time to draw the next frame.
           </p>
           <p>
-            You can try optimizing the renders to see if the performance problem
-            still exists using the "Ranked" tab.
+            You can try optimizing the renders to see if the performance problem still exists using
+            the "Ranked" tab.
           </p>
           <p>
-            If you use an AI-based code editor, you can export the performance
-            data collected as a prompt.
+            If you use an AI-based code editor, you can export the performance data collected as a
+            prompt.
           </p>
 
           <p>{input.data.copyButton}</p>
           <p>
-            Provide this formatted data to the model and ask it to find, or fix,
-            what could be causing this performance problem.
+            Provide this formatted data to the model and ask it to find, or fix, what could be
+            causing this performance problem.
           </p>
           <p>For a larger selection of prompts, try the "Prompts" tab</p>
         </div>
       );
     }
-    case 'update-dom-draw-frame': {
+    case "update-dom-draw-frame": {
       return (
-        <div
-          className={cn([
-            'text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2',
-          ])}
-        >
+        <div className={cn(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"])}>
           <p>
-            These are the calculations the browser is forced to do in response
-            to the JavaScript that ran during the interaction.
+            These are the calculations the browser is forced to do in response to the JavaScript
+            that ran during the interaction.
           </p>
           <p>
-            This can be caused by CSS updates/CSS recalculations, or new DOM
-            elements/DOM mutations.
+            This can be caused by CSS updates/CSS recalculations, or new DOM elements/DOM mutations.
           </p>
           <p>
-            If you use an AI-based code editor, you can export the performance
-            data collected as a prompt.
+            If you use an AI-based code editor, you can export the performance data collected as a
+            prompt.
           </p>
 
           <p>{input.data.copyButton}</p>
           <p>
-            Provide this formatted data to the model and ask it to find, or fix,
-            what could be causing this performance problem.
+            Provide this formatted data to the model and ask it to find, or fix, what could be
+            causing this performance problem.
           </p>
           <p>For a larger selection of prompts, try the "Prompts" tab</p>
         </div>
       );
     }
-    case 'other': {
+    case "other": {
       return (
-        <div
-          className={cn([
-            'text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2',
-          ])}
-        >
+        <div className={cn(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"])}>
           <p>
-            This is the time it took to run everything other than React renders.
-            This can be hooks like <code>useEffect</code>, other JavaScript not
-            part of React, or work the browser has to do to update the DOM and
-            draw the next frame.
+            This is the time it took to run everything other than React renders. This can be hooks
+            like <code>useEffect</code>, other JavaScript not part of React, or work the browser has
+            to do to update the DOM and draw the next frame.
           </p>
           <p>
-            To get a better picture of what happened, profile your app using the{' '}
-            <strong>Chrome profiler</strong> when the performance problem
-            arises.
+            To get a better picture of what happened, profile your app using the{" "}
+            <strong>Chrome profiler</strong> when the performance problem arises.
           </p>
         </div>
       );
diff --git a/packages/scan/src/web/views/notifications/render-bar-chart.tsx b/packages/scan/src/web/views/notifications/render-bar-chart.tsx
index 1ec24736..248d804e 100644
--- a/packages/scan/src/web/views/notifications/render-bar-chart.tsx
+++ b/packages/scan/src/web/views/notifications/render-bar-chart.tsx
@@ -1,35 +1,32 @@
-import { useRef, useState } from 'preact/hooks';
-import { getBatchedRectMap } from 'src/new-outlines';
-import { getIsProduction } from '~core/index';
-import { iife } from '~core/notifications/performance-utils';
-import { cn } from '~web/utils/helpers';
+import { useRef, useState } from "preact/hooks";
+import { getBatchedRectMap } from "src/new-outlines";
+import { getIsProduction } from "~core/index";
+import { iife } from "~core/notifications/performance-utils";
+import { cn } from "~web/utils/helpers";
 import {
   GroupedFiberRender,
   NotificationEvent,
   getTotalTime,
   isRenderMemoizable,
   useNotificationsContext,
-} from './data';
-import {
-  HighlightStore,
-  drawHighlights,
-} from '~core/notifications/outline-overlay';
-import { ChevronRight } from './icons';
+} from "./data";
+import { HighlightStore, drawHighlights } from "~core/notifications/outline-overlay";
+import { ChevronRight } from "./icons";
 
 // todo: cleanup, convoluted ternaries
 export const fadeOutHighlights = () => {
   const curr = HighlightStore.value.current
     ? HighlightStore.value.current
-    : HighlightStore.value.kind === 'transition'
+    : HighlightStore.value.kind === "transition"
       ? HighlightStore.value.transitionTo
       : null;
   if (!curr) {
     return;
   }
 
-  if (HighlightStore.value.kind === 'transition') {
+  if (HighlightStore.value.kind === "transition") {
     HighlightStore.value = {
-      kind: 'move-out',
+      kind: "move-out",
       // because we want to dynamically fade this value
       current:
         HighlightStore.value.current?.alpha === 0
@@ -42,7 +39,7 @@ export const fadeOutHighlights = () => {
   }
 
   HighlightStore.value = {
-    kind: 'move-out',
+    kind: "move-out",
     current: {
       alpha: 0,
       ...curr,
@@ -51,33 +48,29 @@ export const fadeOutHighlights = () => {
 };
 
 type Bars = Array<
-  | { kind: 'other-frame-drop'; totalTime: number }
-  | { kind: 'other-not-javascript'; totalTime: number }
-  | { kind: 'other-javascript'; totalTime: number }
-  | { kind: 'render'; event: GroupedFiberRender; totalTime: number }
+  | { kind: "other-frame-drop"; totalTime: number }
+  | { kind: "other-not-javascript"; totalTime: number }
+  | { kind: "other-javascript"; totalTime: number }
+  | { kind: "render"; event: GroupedFiberRender; totalTime: number }
 >;
 
-export const NO_PURGE = ['hover:bg-[#0f0f0f]'];
-
-export const RenderBarChart = ({
-  selectedEvent,
-}: { selectedEvent: NotificationEvent }) => {
+export const RenderBarChart = ({ selectedEvent }: { selectedEvent: NotificationEvent }) => {
   const totalInteractionTime = getTotalTime(selectedEvent.timing);
   const nonRender = totalInteractionTime - selectedEvent.timing.renderTime;
   const [isProduction] = useState(getIsProduction());
   const events = selectedEvent.groupedFiberRenders;
   const bars: Bars = events.map((event) => ({
     event,
-    kind: 'render',
+    kind: "render",
     totalTime: isProduction ? event.count : event.totalTime,
   }));
 
   const isShowingExtraInfo = iife(() => {
     switch (selectedEvent.kind) {
-      case 'dropped-frames': {
+      case "dropped-frames": {
         return selectedEvent.timing.renderTime / totalInteractionTime < 0.1;
       }
-      case 'interaction': {
+      case "interaction": {
         return (
           (selectedEvent.timing.otherJSTime + selectedEvent.timing.renderTime) /
             totalInteractionTime <
@@ -89,17 +82,17 @@ export const RenderBarChart = ({
   /**
    * We don't add the extra bars in production because we can't compare them to the renders, so the bar is useless, user can use overview tab to see times
    */
-  if (selectedEvent.kind === 'interaction' && !isProduction) {
+  if (selectedEvent.kind === "interaction" && !isProduction) {
     bars.push({
-      kind: 'other-javascript',
+      kind: "other-javascript",
       totalTime: selectedEvent.timing.otherJSTime,
     });
   }
 
   if (isShowingExtraInfo && !isProduction) {
-    if (selectedEvent.kind === 'interaction') {
+    if (selectedEvent.kind === "interaction") {
       bars.push({
-        kind: 'other-not-javascript',
+        kind: "other-not-javascript",
         totalTime:
           getTotalTime(selectedEvent.timing) -
           selectedEvent.timing.renderTime -
@@ -107,7 +100,7 @@ export const RenderBarChart = ({
       });
     } else {
       bars.push({
-        kind: 'other-frame-drop',
+        kind: "other-frame-drop",
         totalTime: nonRender,
       });
     }
@@ -124,29 +117,21 @@ export const RenderBarChart = ({
   const totalBarTime = bars.reduce((prev, curr) => prev + curr.totalTime, 0);
 
   return (
-    <div className={cn(['flex flex-col h-full w-full gap-y-1'])}>
+    <div className={cn(["flex flex-col h-full w-full gap-y-1"])}>
       {iife(() => {
         if (isProduction && bars.length === 0) {
           return (
             <div className="flex flex-col items-center justify-center h-full text-zinc-400">
-              <p className="text-sm w-full text-left text-white mb-1.5">
-                No data available
-              </p>
-              <p className="text-x w-full text-lefts">
-                No data was collected during this period
-              </p>
+              <p className="text-sm w-full text-left text-white mb-1.5">No data available</p>
+              <p className="text-x w-full text-lefts">No data was collected during this period</p>
             </div>
           );
         }
         if (bars.length === 0) {
           return (
             <div className="flex flex-col items-center justify-center h-full text-zinc-400">
-              <p className="text-sm w-full text-left text-white mb-1.5">
-                No renders collected
-              </p>
-              <p className="text-x w-full text-lefts">
-                There were no renders during this period
-              </p>
+              <p className="text-sm w-full text-left text-white mb-1.5">No renders collected</p>
+              <p className="text-x w-full text-lefts">There were no renders during this period</p>
             </div>
           );
         }
@@ -156,7 +141,7 @@ export const RenderBarChart = ({
         .toSorted((a, b) => b.totalTime - a.totalTime)
         .map((bar) => (
           <RenderBar
-            key={bar.kind === 'render' ? bar.event.id : bar.kind}
+            key={bar.kind === "render" ? bar.event.id : bar.kind}
             bars={bars}
             bar={bar}
             debouncedMouseEnter={debouncedMouseEnter}
@@ -173,12 +158,12 @@ const getTransitionState = (state: {
   transitionTo: { alpha: number };
 }) => {
   if (!state.current) {
-    return 'fading-in';
+    return "fading-in";
   }
   if (state.current.alpha > 0) {
-    return 'fading-out' as const;
+    return "fading-out" as const;
   }
-  return 'fading-in' as const;
+  return "fading-in" as const;
 };
 
 const RenderBar = ({
@@ -204,41 +189,37 @@ const RenderBar = ({
   const { setNotificationState, setRoute } = useNotificationsContext();
   const [isExpanded, setIsExpanded] = useState(false);
 
-  const isLeaf = bar.kind === 'render' ? bar.event.parents.size === 0 : true;
+  const isLeaf = bar.kind === "render" ? bar.event.parents.size === 0 : true;
 
   const parentBars = bars.filter((otherBar) =>
-    otherBar.kind === 'render' && bar.kind === 'render'
-      ? bar.event.parents.has(otherBar.event.name) &&
-        otherBar.event.name !== bar.event.name
+    otherBar.kind === "render" && bar.kind === "render"
+      ? bar.event.parents.has(otherBar.event.name) && otherBar.event.name !== bar.event.name
       : false,
   );
 
   const missingParentNames =
-    bar.kind === 'render'
+    bar.kind === "render"
       ? Array.from(bar.event.parents).filter(
-          (parentName) =>
-            !bars.some(
-              (b) => b.kind === 'render' && b.event.name === parentName,
-            ),
+          (parentName) => !bars.some((b) => b.kind === "render" && b.event.name === parentName),
         )
       : [];
 
   const handleBarClick = () => {
-    if (bar.kind === 'render') {
+    if (bar.kind === "render") {
       setNotificationState((prev) => ({
         ...prev,
         selectedFiber: bar.event,
       }));
 
       setRoute({
-        route: 'render-explanation',
+        route: "render-explanation",
         routeMessage: null,
       });
     } else {
       setRoute({
-        route: 'other-visualization',
+        route: "other-visualization",
         routeMessage: {
-          kind: 'auto-open-overview-accordion',
+          kind: "auto-open-overview-accordion",
           name: bar.kind,
         },
       });
@@ -247,34 +228,33 @@ const RenderBar = ({
 
   return (
     <div className="w-full">
-      <div
-        className={cn(['w-full flex items-center relative text-xs min-w-0'])}
-      >
+      <div className={cn(["w-full flex items-center relative text-xs min-w-0"])}>
         <button
           onMouseLeave={() => {
-            debouncedMouseEnter.current.timer &&
+            if (debouncedMouseEnter.current.timer) {
               clearTimeout(debouncedMouseEnter.current.timer);
+            }
             fadeOutHighlights();
           }}
           onMouseEnter={async () => {
             const highlightBars = async () => {
               debouncedMouseEnter.current.lastCallAt = Date.now();
-              if (bar.kind !== 'render') {
+              if (bar.kind !== "render") {
                 const curr = HighlightStore.value.current
                   ? HighlightStore.value.current
-                  : HighlightStore.value.kind === 'transition'
+                  : HighlightStore.value.kind === "transition"
                     ? HighlightStore.value.transitionTo
                     : null;
 
                 if (!curr) {
                   HighlightStore.value = {
-                    kind: 'idle',
+                    kind: "idle",
                     current: null,
                   };
                   return;
                 }
                 HighlightStore.value = {
-                  kind: 'move-out',
+                  kind: "move-out",
                   current: {
                     alpha: 0,
                     ...curr,
@@ -285,24 +265,24 @@ const RenderBar = ({
               const state = HighlightStore.value;
               const currentState = iife(() => {
                 switch (state.kind) {
-                  case 'transition': {
+                  case "transition": {
                     return state.transitionTo;
                   }
-                  case 'idle':
-                  case 'move-out': {
+                  case "idle":
+                  case "move-out": {
                     return state.current;
                   }
                 }
               });
               const stateRects: Array<DOMRect> = [];
 
-              if (state.kind === 'transition') {
+              if (state.kind === "transition") {
                 const transitionState = getTransitionState(state);
                 iife(() => {
                   switch (transitionState) {
-                    case 'fading-in': {
+                    case "fading-in": {
                       HighlightStore.value = {
-                        kind: 'transition',
+                        kind: "transition",
                         current: state.transitionTo,
                         transitionTo: {
                           rects: stateRects,
@@ -312,9 +292,9 @@ const RenderBar = ({
                       };
                       return;
                     }
-                    case 'fading-out': {
+                    case "fading-out": {
                       HighlightStore.value = {
-                        kind: 'transition',
+                        kind: "transition",
                         current: HighlightStore.value.current
                           ? {
                               alpha: 0,
@@ -333,7 +313,7 @@ const RenderBar = ({
                 });
               } else {
                 HighlightStore.value = {
-                  kind: 'transition',
+                  kind: "transition",
                   transitionTo: {
                     rects: stateRects,
                     alpha: 0,
@@ -364,8 +344,9 @@ const RenderBar = ({
               debouncedMouseEnter.current.lastCallAt &&
               Date.now() - debouncedMouseEnter.current.lastCallAt < 200
             ) {
-              debouncedMouseEnter.current.timer &&
+              if (debouncedMouseEnter.current.timer) {
                 clearTimeout(debouncedMouseEnter.current.timer);
+              }
               debouncedMouseEnter.current.timer = setTimeout(() => {
                 highlightBars();
               }, 200);
@@ -376,57 +357,49 @@ const RenderBar = ({
           }}
           onClick={handleBarClick}
           className={cn([
-            'h-full w-[90%] flex items-center hover:bg-[#0f0f0f] rounded-l-md min-w-0 relative',
+            "h-full w-[90%] flex items-center hover:bg-[#0f0f0f] rounded-l-md min-w-0 relative",
           ])}
         >
           <div
             style={{
-              minWidth: 'fit-content',
+              minWidth: "fit-content",
               width: `${(bar.totalTime / totalBarTime) * 100}%`,
             }}
             className={cn([
-              'flex items-center rounded-sm text-white text-xs h-[28px] shrink-0',
-              bar.kind === 'render' && 'bg-[#412162] group-hover:bg-[#5b2d89]',
-              bar.kind === 'other-frame-drop' &&
-                'bg-[#44444a] group-hover:bg-[#6a6a6a]',
-              bar.kind === 'other-javascript' &&
-                'bg-[#efd81a6b] group-hover:bg-[#efda1a2f]',
-              bar.kind === 'other-not-javascript' &&
-                'bg-[#214379d4] group-hover:bg-[#21437982]',
+              "flex items-center rounded-sm text-white text-xs h-[28px] shrink-0",
+              bar.kind === "render" && "bg-[#412162] group-hover:bg-[#5b2d89]",
+              bar.kind === "other-frame-drop" && "bg-[#44444a] group-hover:bg-[#6a6a6a]",
+              bar.kind === "other-javascript" && "bg-[#efd81a6b] group-hover:bg-[#efda1a2f]",
+              bar.kind === "other-not-javascript" && "bg-[#214379d4] group-hover:bg-[#21437982]",
             ])}
           />
-          <div
-            className={cn([
-              'absolute inset-0 flex items-center px-2',
-              'min-w-0',
-            ])}
-          >
+          <div className={cn(["absolute inset-0 flex items-center px-2", "min-w-0"])}>
             <div className="flex items-center gap-x-2 min-w-0 w-full">
-              <span className={cn(['truncate'])}>
+              <span className={cn(["truncate"])}>
                 {iife(() => {
                   switch (bar.kind) {
-                    case 'other-frame-drop': {
-                      return 'JavaScript, DOM updates, Draw Frame';
+                    case "other-frame-drop": {
+                      return "JavaScript, DOM updates, Draw Frame";
                     }
-                    case 'other-javascript': {
-                      return 'JavaScript/React Hooks';
+                    case "other-javascript": {
+                      return "JavaScript/React Hooks";
                     }
-                    case 'other-not-javascript': {
-                      return 'Update DOM and Draw New Frame';
+                    case "other-not-javascript": {
+                      return "Update DOM and Draw New Frame";
                     }
-                    case 'render': {
+                    case "render": {
                       return bar.event.name;
                     }
                   }
                 })}
               </span>
-              {bar.kind === 'render' && isRenderMemoizable(bar.event) && (
+              {bar.kind === "render" && isRenderMemoizable(bar.event) && (
                 <div
                   style={{
-                    lineHeight: '10px',
+                    lineHeight: "10px",
                   }}
                   className={cn([
-                    'px-1 py-0.5 bg-[#6a369e] flex items-center rounded-sm font-semibold text-[8px] shrink-0',
+                    "px-1 py-0.5 bg-[#6a369e] flex items-center rounded-sm font-semibold text-[8px] shrink-0",
                   ])}
                 >
                   Memoizable
@@ -437,24 +410,17 @@ const RenderBar = ({
         </button>
 
         <button
-          onClick={() =>
-            bar.kind === 'render' && !isLeaf && setIsExpanded(!isExpanded)
-          }
+          onClick={() => bar.kind === "render" && !isLeaf && setIsExpanded(!isExpanded)}
           className={cn([
-            'flex items-center min-w-fit shrink-0 rounded-r-md h-[28px]',
-            !isLeaf && 'hover:bg-[#0f0f0f]',
-            bar.kind === 'render' && !isLeaf
-              ? 'cursor-pointer'
-              : 'cursor-default',
+            "flex items-center min-w-fit shrink-0 rounded-r-md h-[28px]",
+            !isLeaf && "hover:bg-[#0f0f0f]",
+            bar.kind === "render" && !isLeaf ? "cursor-pointer" : "cursor-default",
           ])}
         >
           <div className="w-[20px] flex items-center justify-center">
-            {bar.kind === 'render' && !isLeaf && (
+            {bar.kind === "render" && !isLeaf && (
               <ChevronRight
-                className={cn(
-                  'transition-transform',
-                  isExpanded && 'rotate-90',
-                )}
+                className={cn("transition-transform", isExpanded && "rotate-90")}
                 size={16}
               />
             )}
@@ -462,17 +428,17 @@ const RenderBar = ({
 
           <div
             style={{
-              minWidth: isLeaf ? 'fit-content' : isProduction ? '30px' : '60px',
+              minWidth: isLeaf ? "fit-content" : isProduction ? "30px" : "60px",
             }}
             className="flex items-center justify-end gap-x-1"
           >
-            {bar.kind === 'render' && (
-              <span className={cn(['text-[10px]'])}>x{bar.event.count}</span>
+            {bar.kind === "render" && (
+              <span className={cn(["text-[10px]"])}>x{bar.event.count}</span>
             )}
 
-            {(bar.kind !== 'render' || !isProduction) && (
+            {(bar.kind !== "render" || !isProduction) && (
               <span className="text-[10px] text-[#7346a0] pr-1">
-                {bar.totalTime < 1 ? '<1' : bar.totalTime.toFixed(0)}
+                {bar.totalTime < 1 ? "<1" : bar.totalTime.toFixed(0)}
                 ms
               </span>
             )}
@@ -482,8 +448,8 @@ const RenderBar = ({
         {depth === 0 && (
           <div
             className={cn([
-              'absolute right-0 top-1/2 transition-none -translate-y-1/2 bg-white text-black px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity mr-16',
-              'pointer-events-none',
+              "absolute right-0 top-1/2 transition-none -translate-y-1/2 bg-white text-black px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity mr-16",
+              "pointer-events-none",
             ])}
           >
             Click to learn more
@@ -491,38 +457,37 @@ const RenderBar = ({
         )}
       </div>
 
-      {isExpanded &&
-        (parentBars.length > 0 || missingParentNames.length > 0) && (
-          <div className="pl-3 flex flex-col gap-y-1 mt-1">
-            {parentBars
-              .toSorted((a, b) => b.totalTime - a.totalTime)
-              .map((parentBar, i) => (
-                <RenderBar
-                  depth={depth + 1}
-                  key={i}
-                  bar={parentBar}
-                  debouncedMouseEnter={debouncedMouseEnter}
-                  totalBarTime={totalBarTime}
-                  isProduction={isProduction}
-                  bars={bars}
-                />
-              ))}
-            {missingParentNames.map((parentName) => (
-              <div key={parentName} className="w-full">
-                <div className="w-full flex items-center relative text-xs">
-                  <div className="h-full w-full flex items-center relative">
-                    <div className="flex items-center rounded-sm text-white text-xs h-[28px] w-full" />
-                    <div className="absolute inset-0 flex items-center px-2">
-                      <span className="truncate whitespace-nowrap text-white/70 w-full">
-                        {parentName}
-                      </span>
-                    </div>
+      {isExpanded && (parentBars.length > 0 || missingParentNames.length > 0) && (
+        <div className="pl-3 flex flex-col gap-y-1 mt-1">
+          {parentBars
+            .toSorted((a, b) => b.totalTime - a.totalTime)
+            .map((parentBar, i) => (
+              <RenderBar
+                depth={depth + 1}
+                key={i}
+                bar={parentBar}
+                debouncedMouseEnter={debouncedMouseEnter}
+                totalBarTime={totalBarTime}
+                isProduction={isProduction}
+                bars={bars}
+              />
+            ))}
+          {missingParentNames.map((parentName) => (
+            <div key={parentName} className="w-full">
+              <div className="w-full flex items-center relative text-xs">
+                <div className="h-full w-full flex items-center relative">
+                  <div className="flex items-center rounded-sm text-white text-xs h-[28px] w-full" />
+                  <div className="absolute inset-0 flex items-center px-2">
+                    <span className="truncate whitespace-nowrap text-white/70 w-full">
+                      {parentName}
+                    </span>
                   </div>
                 </div>
               </div>
-            ))}
-          </div>
-        )}
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 };
diff --git a/packages/scan/src/web/widget/fps-meter.tsx b/packages/scan/src/web/widget/fps-meter.tsx
index e94cbaba..898ffd4a 100644
--- a/packages/scan/src/web/widget/fps-meter.tsx
+++ b/packages/scan/src/web/widget/fps-meter.tsx
@@ -1,25 +1,23 @@
-import { useEffect, useState } from 'preact/hooks';
-import { getFPS } from '~core/instrumentation';
-import { cn } from '~web/utils/helpers';
-
-export const FpsMeterInner = ({fps}:{fps: number}) => {
-
+import { useEffect, useState } from "preact/hooks";
+import { getFPS } from "~core/instrumentation";
+import { cn } from "~web/utils/helpers";
 
+const FpsMeterInner = ({ fps }: { fps: number }) => {
   const getColor = (fps: number) => {
-    if (fps < 30) return '#EF4444';
-    if (fps < 50) return '#F59E0B';
-    return 'rgb(214,132,245)';
+    if (fps < 30) return "#EF4444";
+    if (fps < 50) return "#F59E0B";
+    return "rgb(214,132,245)";
   };
 
   return (
     <div
       className={cn(
-        'flex items-center gap-x-1 px-2 w-full',
-        'h-6',
-        'rounded-md',
-        'font-mono leading-none',
-        'bg-[#141414]',
-        'ring-1 ring-white/[0.08]',
+        "flex items-center gap-x-1 px-2 w-full",
+        "h-6",
+        "rounded-md",
+        "font-mono leading-none",
+        "bg-[#141414]",
+        "ring-1 ring-white/[0.08]",
       )}
     >
       <div
@@ -35,7 +33,6 @@ export const FpsMeterInner = ({fps}:{fps: number}) => {
   );
 };
 
-
 export const FPSMeter = () => {
   const [fps, setFps] = useState<null | number>(null);
 
@@ -50,8 +47,8 @@ export const FPSMeter = () => {
   return (
     <div
       className={cn(
-        'flex items-center justify-end gap-x-2 px-1 ml-1 w-[72px]',
-        'whitespace-nowrap text-sm text-white',
+        "flex items-center justify-end gap-x-2 px-1 ml-1 w-[72px]",
+        "whitespace-nowrap text-sm text-white",
       )}
     >
       {/* fixme: default fps state*/}
@@ -59,5 +56,3 @@ export const FPSMeter = () => {
     </div>
   );
 };
-
-
diff --git a/packages/scan/tsup.config.ts b/packages/scan/tsup.config.ts
index 113c591b..e53c18a7 100644
--- a/packages/scan/tsup.config.ts
+++ b/packages/scan/tsup.config.ts
@@ -1,12 +1,12 @@
-import * as fs from 'node:fs';
-import fsPromise from 'node:fs/promises';
-import path from 'node:path';
-import { TsconfigPathsPlugin } from '@esbuild-plugins/tsconfig-paths';
-import { init, parse } from 'es-module-lexer';
-import { defineConfig } from 'tsup';
-import { workerPlugin } from './worker-plugin';
+import * as fs from "node:fs";
+import fsPromise from "node:fs/promises";
+import path from "node:path";
+import { TsconfigPathsPlugin } from "@esbuild-plugins/tsconfig-paths";
+import { init, parse } from "es-module-lexer";
+import { defineConfig } from "tsup";
+import { workerPlugin } from "./worker-plugin";
 
-const DIST_PATH = './dist';
+const DIST_PATH = "./dist";
 
 const USE_CLIENT_DIRECTIVE = `'use client';\n`;
 
@@ -15,16 +15,16 @@ const addDirectivesToChunkFiles = async (readPath: string): Promise<void> => {
     if (!fs.existsSync(readPath)) return;
     const files = await fsPromise.readdir(readPath);
     for (const file of files) {
-      if (file.endsWith('.mjs') || file.endsWith('.js')) {
+      if (file.endsWith(".mjs") || file.endsWith(".js")) {
         const filePath = path.join(readPath, file);
-        const data = await fsPromise.readFile(filePath, 'utf8');
+        const data = await fsPromise.readFile(filePath, "utf8");
         if (data.startsWith(USE_CLIENT_DIRECTIVE)) continue;
-        await fsPromise.writeFile(filePath, `${USE_CLIENT_DIRECTIVE}${data}`, 'utf8');
+        await fsPromise.writeFile(filePath, `${USE_CLIENT_DIRECTIVE}${data}`, "utf8");
       }
     }
   } catch (err) {
     // oxlint-disable-next-line no-console
-    console.error('Error:', err);
+    console.error("Error:", err);
   }
 };
 
@@ -55,7 +55,7 @@ void (async () => {
   }
   fs.mkdirSync(DIST_PATH, { recursive: true });
 
-  const code = fs.readFileSync('./src/core/index.ts', 'utf8');
+  const code = fs.readFileSync("./src/core/index.ts", "utf8");
   const [_, allExports] = parse(code);
   const names: Array<string> = [];
   for (const exportItem of allExports) {
@@ -65,7 +65,7 @@ void (async () => {
   const createFn = (name: string) => `export let ${name}=()=>{}`;
   const createVar = (name: string) => `export let ${name}=undefined`;
 
-  let script = '';
+  let script = "";
   for (const name of names) {
     if (name[0].toLowerCase() === name[0]) {
       script += `${createFn(name)}\n`;
@@ -75,7 +75,7 @@ void (async () => {
   }
 
   setTimeout(() => {
-    for (const ext of ['js', 'mjs', 'global.js']) {
+    for (const ext of ["js", "mjs", "global.js"]) {
       fs.writeFileSync(`./dist/rsc-shim.${ext}`, script);
     }
   }, 500);
@@ -83,7 +83,7 @@ void (async () => {
 
 export default defineConfig([
   {
-    entry: ['./src/auto.ts', './src/install-hook.ts'],
+    entry: ["./src/auto.ts", "./src/install-hook.ts"],
     outDir: DIST_PATH,
     banner: {
       js: banner,
@@ -91,39 +91,39 @@ export default defineConfig([
     splitting: false,
     clean: false,
     sourcemap: false,
-    format: ['iife'],
+    format: ["iife"],
     // Target ES2019 (no `?.`, no `??`) so older babel-loader configs without
     // `@babel/preset-env` for optional chaining can still parse the bundle
     // (#287, #336).
-    target: 'es2019',
-    platform: 'browser',
+    target: "es2019",
+    platform: "browser",
     treeshake: true,
     dts: true,
-    minify: process.env.NODE_ENV === 'production' ? 'terser' : false,
+    minify: process.env.NODE_ENV === "production" ? "terser" : false,
     env: {
-      NODE_ENV: process.env.NODE_ENV ?? 'development',
+      NODE_ENV: process.env.NODE_ENV ?? "development",
     },
     external: [
-      'react',
-      'react-dom',
-      'next',
-      'next/navigation',
-      'react-router',
-      'react-router-dom',
-      '@remix-run/react',
+      "react",
+      "react-dom",
+      "next",
+      "next/navigation",
+      "react-router",
+      "react-router-dom",
+      "@remix-run/react",
     ],
     esbuildPlugins: [workerPlugin],
     loader: {
-      '.css': 'text',
-      '.worker.js': 'text',
+      ".css": "text",
+      ".worker.js": "text",
     },
   },
   {
     entry: [
-      './src/index.ts',
-      './src/install-hook.ts',
-      './src/core/all-environments.ts',
-      './src/lite/index.ts',
+      "./src/index.ts",
+      "./src/install-hook.ts",
+      "./src/core/all-environments.ts",
+      "./src/lite/index.ts",
     ],
     banner: {
       js: banner,
@@ -132,52 +132,49 @@ export default defineConfig([
     splitting: false,
     clean: false,
     sourcemap: false,
-    format: ['cjs', 'esm'],
-    target: 'es2019',
-    platform: 'browser',
+    format: ["cjs", "esm"],
+    target: "es2019",
+    platform: "browser",
     // FIXME: tree shaking removes use client directive
     // Info: vercel analytics does the same thing- https://github.com/vercel/analytics/blob/main/packages/web/tsup.config.js
     treeshake: false,
     dts: true,
-    watch: process.env.NODE_ENV === 'development',
+    watch: process.env.NODE_ENV === "development",
     async onSuccess() {
       await addDirectivesToChunkFiles(DIST_PATH);
-      await addDirectivesToChunkFiles(path.join(DIST_PATH, 'lite'));
-      await addDirectivesToChunkFiles(path.join(DIST_PATH, 'core'));
+      await addDirectivesToChunkFiles(path.join(DIST_PATH, "lite"));
+      await addDirectivesToChunkFiles(path.join(DIST_PATH, "core"));
     },
     minify: false,
     env: {
-      NODE_ENV: process.env.NODE_ENV ?? 'development',
+      NODE_ENV: process.env.NODE_ENV ?? "development",
       NPM_PACKAGE_VERSION: JSON.parse(
-        fs.readFileSync(
-          path.join(__dirname, '../scan', 'package.json'),
-          'utf8',
-        ),
+        fs.readFileSync(path.join(__dirname, "../scan", "package.json"), "utf8"),
       ).version,
     },
     external: [
-      'react',
-      'react-dom',
-      'next',
-      'next/navigation',
-      'react-router',
-      'react-router-dom',
-      '@remix-run/react',
-      'preact',
-      '@preact/signals',
+      "react",
+      "react-dom",
+      "next",
+      "next/navigation",
+      "react-router",
+      "react-router-dom",
+      "@remix-run/react",
+      "preact",
+      "@preact/signals",
     ],
     loader: {
-      '.css': 'text',
+      ".css": "text",
     },
     esbuildPlugins: [
       workerPlugin,
       TsconfigPathsPlugin({
-        tsconfig: path.resolve(__dirname, './tsconfig.json'),
+        tsconfig: path.resolve(__dirname, "./tsconfig.json"),
       }),
     ],
   },
   {
-    entry: ['./src/cli.mts'],
+    entry: ["./src/cli.mts"],
     outDir: DIST_PATH,
     banner: {
       js: banner,
@@ -185,66 +182,64 @@ export default defineConfig([
     splitting: false,
     clean: false,
     sourcemap: false,
-    format: ['cjs'],
-    target: 'esnext',
-    platform: 'node',
+    format: ["cjs"],
+    target: "esnext",
+    platform: "node",
     minify: false,
     env: {
-      NODE_ENV: process.env.NODE_ENV ?? 'development',
+      NODE_ENV: process.env.NODE_ENV ?? "development",
       NPM_PACKAGE_VERSION: JSON.parse(
-        fs.readFileSync(
-          path.join(__dirname, '../scan', 'package.json'),
-          'utf8',
-        ),
+        fs.readFileSync(path.join(__dirname, "../scan", "package.json"), "utf8"),
       ).version,
     },
-    watch: process.env.NODE_ENV === 'development',
+    watch: process.env.NODE_ENV === "development",
   },
   {
     entry: [
-      './src/react-component-name/index.ts',
-      './src/react-component-name/vite.ts',
-      './src/react-component-name/webpack.ts',
-      './src/react-component-name/esbuild.ts',
-      './src/react-component-name/rspack.ts',
-      './src/react-component-name/rolldown.ts',
-      './src/react-component-name/rollup.ts',
-      './src/react-component-name/astro.ts',
+      "./src/react-component-name/index.ts",
+      "./src/react-component-name/vite.ts",
+      "./src/react-component-name/webpack.ts",
+      "./src/react-component-name/esbuild.ts",
+      "./src/react-component-name/rspack.ts",
+      "./src/react-component-name/rolldown.ts",
+      "./src/react-component-name/rollup.ts",
+      "./src/react-component-name/astro.ts",
+      "./src/react-component-name/loader.ts",
     ],
     outDir: `${DIST_PATH}/react-component-name`,
     splitting: false,
     sourcemap: false,
     clean: false,
-    format: ['cjs', 'esm'],
-    target: 'esnext',
+    format: ["cjs", "esm"],
+    target: "esnext",
     external: [
-      'unplugin',
-      'estree-walker',
-      '@rollup/pluginutils',
-      '@babel/types',
-      '@babel/parser',
-      '@babel/traverse',
-      '@babel/generator',
-      '@babel/core',
-      'rollup',
-      'webpack',
-      'esbuild',
-      'rspack',
-      'vite',
+      "unplugin",
+      "estree-walker",
+      "@rollup/pluginutils",
+      "@babel/types",
+      "@babel/parser",
+      "@babel/traverse",
+      "@babel/generator",
+      "@babel/core",
+      "rollup",
+      "webpack",
+      "esbuild",
+      "rspack",
+      "vite",
     ],
     dts: true,
     minify: false,
     treeshake: true,
     env: {
-      NODE_ENV: process.env.NODE_ENV || 'development',
+      NODE_ENV: process.env.NODE_ENV || "development",
     },
     outExtension: ({ format }) => ({
-      js: format === 'esm' ? '.mjs' : '.js',
+      js: format === "esm" ? ".mjs" : ".js",
     }),
     esbuildOptions: (options, context) => {
-      options.mainFields = ['module', 'main'];
-      options.conditions = ['import', 'require', 'node', 'default'];
-      options.format = context.format === 'esm' ? 'esm' : 'cjs';
+      options.mainFields = ["module", "main"];
+      options.conditions = ["import", "require", "node", "default"];
+      options.format = context.format === "esm" ? "esm" : "cjs";
       options.preserveSymlinks = true;
     },
   },
diff --git a/packages/website/package.json b/packages/website/package.json
index 80d0266a..452dc466 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -17,7 +17,6 @@
     "next": "^16.2.4",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
-    "react-grab": "^0.1.32",
     "react-scan": "workspace:*",
     "zod": "^4.4.2"
   },
diff --git a/packages/website/public/auto.global.js b/packages/website/public/auto.global.js
index b0617b70..33d2f266 100644
--- a/packages/website/public/auto.global.js
+++ b/packages/website/public/auto.global.js
@@ -1,5 +1,5 @@
 'use client';
-!function(e){"use strict";var t=Object.defineProperty,n=(e,n,r)=>((e,n,r)=>n in e?t(e,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[n]=r)(e,"symbol"!=typeof n?n+"":n,r);Array.prototype.toSorted||Object.defineProperty(Array.prototype,"toSorted",{value:function(e){return[...this].sort(e)},writable:!0,configurable:!0});var r,o="bippy-0.5.39",i=Object.defineProperty,a=Object.prototype.hasOwnProperty,s=()=>{},l=e=>{try{Function.prototype.toString.call(e).indexOf("^_^")>-1&&setTimeout(()=>{throw Error("React is running in production mode, but dead code elimination has not been applied. Read how to correctly configure React for production: https://reactjs.org/link/perf-use-production-build")})}catch{}},c=(e=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__)=>!(!e||!("getFiberRoots"in e)),d=!1,u=(e=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__)=>!!d||(e&&"function"==typeof e.inject&&(r=e.inject.toString()),!!(null==r?void 0:r.includes("(injected)"))),p=new Set,h=new Set,m=e=>{let t=new Map,n=0,r={_instrumentationIsActive:!1,_instrumentationSource:o,checkDCE:l,hasUnsupportedRendererAttached:!1,inject(e){let o=++n;return t.set(o,e),h.add(e),r._instrumentationIsActive||(r._instrumentationIsActive=!0,p.forEach(e=>e())),o},on:s,onCommitFiberRoot:s,onCommitFiberUnmount:s,onPostCommitFiberRoot:s,renderers:t,supportsFiber:!0,supportsFlight:!0};try{i(globalThis,"__REACT_DEVTOOLS_GLOBAL_HOOK__",{configurable:!0,enumerable:!0,get:()=>r,set(t){if(t&&"object"==typeof t){let n=r.renderers;r=t,n.size>0&&(n.forEach((e,n)=>{h.add(e),t.renderers.set(n,e)}),f(e))}}});let t=window.hasOwnProperty,n=!1;i(window,"hasOwnProperty",{configurable:!0,value:function(...e){try{if(!n&&"__REACT_DEVTOOLS_GLOBAL_HOOK__"===e[0])return globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__=void 0,n=!0,-0}catch{}return t.apply(this,e)},writable:!0})}catch{f(e)}return r},f=e=>{e&&p.add(e);try{let t=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!t)return;if(!t._instrumentationSource){t.checkDCE=l,t.supportsFiber=!0,t.supportsFlight=!0,t.hasUnsupportedRendererAttached=!1,t._instrumentationSource=o,t._instrumentationIsActive=!1;let e=c(t);if(e||(t.on=s),t.renderers.size)return t._instrumentationIsActive=!0,void p.forEach(e=>e());let n=t.inject,r=u(t);r&&!e&&(d=!0,t.inject({scheduleRefresh(){}})&&(t._instrumentationIsActive=!0)),t.inject=e=>{let o=n(e);return h.add(e),r&&t.renderers.set(o,e),t._instrumentationIsActive=!0,p.forEach(e=>e()),o}}(t.renderers.size||t._instrumentationIsActive||u())&&(null==e||e())}catch{}},g=e=>a.call(globalThis,"__REACT_DEVTOOLS_GLOBAL_HOOK__")?(f(e),globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__):m(e);(()=>{try{typeof window<"u"&&((null==(e=window.document)?void 0:e.createElement)||"ReactNative"===(null==(t=window.navigator)?void 0:t.product))&&g()}catch{}var e,t})();var v=e=>{switch(e.tag){case 5:case 26:case 27:return!0;default:return"string"==typeof e.type}},w=e=>{switch(e.tag){case 1:case 11:case 0:case 14:case 15:return!0;default:return!1}},b=e=>{var t,n,r;let o=e.memoizedProps,i=(null==(t=e.alternate)?void 0:t.memoizedProps)||{},a=null!=(r=null!=(n=e.flags)?n:e.effectTag)?r:0;switch(e.tag){case 1:case 9:case 11:case 0:case 14:case 15:return!(1&~a);default:return!e.alternate||(i!==o||e.alternate.memoizedState!==e.memoizedState||e.alternate.ref!==e.ref)}},x=e=>!!(13374&e.flags||13374&e.subtreeFlags),y=e=>{switch(e.tag){case 18:case 7:case 6:case 23:case 22:return!0;case 3:return!1;default:{let t="object"==typeof e.type&&null!==e.type?e.type.$$typeof:e.type;switch("symbol"==typeof t?t.toString():t){case 60111:case"Symbol(react.concurrent_mode)":case"Symbol(react.async_mode)":return!0;default:return!1}}}};function k(e,t,n=!1){if(!e)return null;let r=t(e);if(r instanceof Promise)return(async()=>{if(!0===await r)return e;let o=n?e.return:e.child;for(;o;){let e=await B(o,t,n);if(e)return e;o=n?null:o.sibling}return null})();if(!0===r)return e;let o=n?e.return:e.child;for(;o;){let e=H(o,t,n);if(e)return e;o=n?null:o.sibling}return null}var _,N,S,C,T,E,z,A,M,$,F,R,O,D,j,L,P,I,W,U,H=(e,t,n=!1)=>{if(!e)return null;if(!0===t(e))return e;let r=n?e.return:e.child;for(;r;){let e=H(r,t,n);if(e)return e;r=n?null:r.sibling}return null},B=async(e,t,n=!1)=>{if(!e)return null;if(!0===await t(e))return e;let r=n?e.return:e.child;for(;r;){let e=await B(r,t,n);if(e)return e;r=n?null:r.sibling}return null},V=e=>{var t,n,r;let o=null!=(t=null==e?void 0:e.actualDuration)?t:0,i=o,a=null!=(n=null==e?void 0:e.child)?n:null;for(;o>0&&null!=a;)i-=null!=(r=a.actualDuration)?r:0,a=a.sibling;return{selfTime:i,totalTime:o}},q=e=>{var t;return!!(null==(t=e.updateQueue)?void 0:t.memoCache)},G=e=>{let t=e;return"function"==typeof t?t:"object"==typeof t&&t?G(t.type||t.render):null},J=e=>{let t=e;if("string"==typeof t)return t;if("function"!=typeof t&&("object"!=typeof t||!t))return null;let n=t.displayName||t.name||null;if(n)return n;let r=G(t);return r&&(r.displayName||r.name)||null},Y=e=>{try{if("string"==typeof e.version&&e.bundleType>0)return"development"}catch{}return"production"},X=0,K=new WeakMap,Z=e=>{let t=K.get(e);return!t&&e.alternate&&(t=K.get(e.alternate)),t||(t=X++,((e,t=X++)=>{K.set(e,t)})(e,t)),t},Q=(e,t,n)=>{let r=t;for(;null!=r;){if(K.has(r)||Z(r),!y(r)&&b(r)&&e(r,"mount"),13===r.tag)if(null!==r.memoizedState){let t=r.child,n=t?t.sibling:null;if(n){let t=n.child;null!==t&&Q(e,t,!1)}}else{let t=null;null!==r.child&&(t=r.child.child),null!==t&&Q(e,t,!1)}else null!=r.child&&Q(e,r.child,!0);r=n?r.sibling:null}},ee=(e,t,n,r)=>{var o,i,a,s,l,c;if(K.has(t)||Z(t),!n)return;K.has(n)||Z(n);let d=13===t.tag;!y(t)&&b(t)&&e(t,"update");let u=d&&null!==n.memoizedState,p=d&&null!==t.memoizedState;if(u&&p){let r=null!=(i=null==(o=t.child)?void 0:o.sibling)?i:null,l=null!=(s=null==(a=n.child)?void 0:a.sibling)?s:null;null!==r&&null!==l&&ee(e,r,l)}else if(u&&!p){let n=t.child;null!==n&&Q(e,n,!0)}else if(!u&&p){ne(e,n);let r=null!=(c=null==(l=t.child)?void 0:l.sibling)?c:null;null!==r&&Q(e,r,!0)}else if(t.child!==n.child){let n=t.child;for(;n;){if(n.alternate){let t=n.alternate;ee(e,n,t)}else Q(e,n,!1);n=n.sibling}}},te=(e,t)=>{(3===t.tag||!y(t))&&e(t,"unmount")},ne=(e,t)=>{var n,r,o,i;let a=13===t.tag&&null!==t.memoizedState,s=t.child;for(a&&(s=null!=(i=null==(o=null!=(r=null==(n=t.child)?void 0:n.sibling)?r:null)?void 0:o.child)?i:null);null!==s;)null!==s.return&&(te(e,s),ne(e,s)),s=s.sibling},re=0,oe=new WeakMap,ie="undefined"!=typeof window,ae={},se=[],le=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,ce=Array.isArray;function de(e,t){for(var n in t)e[n]=t[n];return e}function ue(e){e&&e.parentNode&&e.parentNode.removeChild(e)}function pe(e,t,n){var r,o,i,a={};for(i in t)"key"==i?r=t[i]:"ref"==i?o=t[i]:a[i]=t[i];if(arguments.length>2&&(a.children=arguments.length>3?_.call(arguments,2):n),"function"==typeof e&&null!=e.defaultProps)for(i in e.defaultProps)void 0===a[i]&&(a[i]=e.defaultProps[i]);return he(e,a,r,o,null)}function he(e,t,n,r,o){var i={type:e,props:t,key:n,ref:r,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:null==o?++S:o,__i:-1,__u:0};return null==o&&null!=N.vnode&&N.vnode(i),i}function me(e){return e.children}function fe(e,t){this.props=e,this.context=t}function ge(e,t){if(null==t)return e.__?ge(e.__,e.__i+1):null;for(var n;t<e.__k.length;t++)if(null!=(n=e.__k[t])&&null!=n.__e)return n.__e;return"function"==typeof e.type?ge(e):null}function ve(e){if(e.__P&&e.__d){var t=e.__v,n=t.__e,r=[],o=[],i=de({},t);i.__v=t.__v+1,N.vnode&&N.vnode(i),Ee(e.__P,i,t,e.__n,e.__P.namespaceURI,32&t.__u?[n]:null,r,null==n?ge(t):n,!!(32&t.__u),o),i.__v=t.__v,i.__.__k[i.__i]=i,Ae(r,i,o),t.__e=t.__=null,i.__e!=n&&we(i)}}function we(e){if(null!=(e=e.__)&&null!=e.__c)return e.__e=e.__c.base=null,e.__k.some(function(t){if(null!=t&&null!=t.__e)return e.__e=e.__c.base=t.__e}),we(e)}function be(e){(!e.__d&&(e.__d=!0)&&T.push(e)&&!xe.__r++||E!=N.debounceRendering)&&((E=N.debounceRendering)||z)(xe)}function xe(){try{for(var e,t=1;T.length;)T.length>t&&T.sort(A),e=T.shift(),t=T.length,ve(e)}finally{T.length=xe.__r=0}}function ye(e,t,n,r,o,i,a,s,l,c,d){var u,p,h,m,f,g,v,w=r&&r.__k||se,b=t.length;for(l=function(e,t,n,r,o){var i,a,s,l,c,d=n.length,u=d,p=0;for(e.__k=new Array(o),i=0;i<o;i++)null!=(a=t[i])&&"boolean"!=typeof a&&"function"!=typeof a?("string"==typeof a||"number"==typeof a||"bigint"==typeof a||a.constructor==String?a=e.__k[i]=he(null,a,null,null,null):ce(a)?a=e.__k[i]=he(me,{children:a},null,null,null):void 0===a.constructor&&a.__b>0?a=e.__k[i]=he(a.type,a.props,a.key,a.ref?a.ref:null,a.__v):e.__k[i]=a,l=i+p,a.__=e,a.__b=e.__b+1,s=null,-1!=(c=a.__i=Ne(a,n,l,u))&&(u--,(s=n[c])&&(s.__u|=2)),null==s||null==s.__v?(-1==c&&(o>d?p--:o<d&&p++),"function"!=typeof a.type&&(a.__u|=4)):c!=l&&(c==l-1?p--:c==l+1?p++:(c>l?p--:p++,a.__u|=4))):e.__k[i]=null;if(u)for(i=0;i<d;i++)null!=(s=n[i])&&!(2&s.__u)&&(s.__e==r&&(r=ge(s)),Fe(s,s));return r}(n,t,w,l,b),u=0;u<b;u++)null!=(h=n.__k[u])&&(p=-1!=h.__i&&w[h.__i]||ae,h.__i=u,g=Ee(e,h,p,o,i,a,s,l,c,d),m=h.__e,h.ref&&p.ref!=h.ref&&(p.ref&&$e(p.ref,null,h),d.push(h.ref,h.__c||m,h)),null==f&&null!=m&&(f=m),(v=!!(4&h.__u))||p.__k===h.__k?(l=ke(h,l,e,v),v&&p.__e&&(p.__e=null)):"function"==typeof h.type&&void 0!==g?l=g:m&&(l=m.nextSibling),h.__u&=-7);return n.__e=f,l}function ke(e,t,n,r){var o,i;if("function"==typeof e.type){for(o=e.__k,i=0;o&&i<o.length;i++)o[i]&&(o[i].__=e,t=ke(o[i],t,n,r));return t}e.__e!=t&&(r&&(t&&e.type&&!t.parentNode&&(t=ge(e)),n.insertBefore(e.__e,t||null)),t=e.__e);do{t=t&&t.nextSibling}while(null!=t&&8==t.nodeType);return t}function _e(e,t){return t=t||[],null==e||"boolean"==typeof e||(ce(e)?e.some(function(e){_e(e,t)}):t.push(e)),t}function Ne(e,t,n,r){var o,i,a,s=e.key,l=e.type,c=t[n],d=null!=c&&!(2&c.__u);if(null===c&&null==s||d&&s==c.key&&l==c.type)return n;if(r>(d?1:0))for(o=n-1,i=n+1;o>=0||i<t.length;)if(null!=(c=t[a=o>=0?o--:i++])&&!(2&c.__u)&&s==c.key&&l==c.type)return a;return-1}function Se(e,t,n){"-"==t[0]?e.setProperty(t,null==n?"":n):e[t]=null==n?"":"number"!=typeof n||le.test(t)?n:n+"px"}function Ce(e,t,n,r,o){var i,a;e:if("style"==t)if("string"==typeof n)e.style.cssText=n;else{if("string"==typeof r&&(e.style.cssText=r=""),r)for(t in r)n&&t in n||Se(e.style,t,"");if(n)for(t in n)r&&n[t]==r[t]||Se(e.style,t,n[t])}else if("o"==t[0]&&"n"==t[1])i=t!=(t=t.replace(R,"$1")),a=t.toLowerCase(),t=a in e||"onFocusOut"==t||"onFocusIn"==t?a.slice(2):t.slice(2),e.l||(e.l={}),e.l[t+i]=n,n?r?n[F]=r[F]:(n[F]=O,e.addEventListener(t,i?j:D,i)):e.removeEventListener(t,i?j:D,i);else{if("http://www.w3.org/2000/svg"==o)t=t.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if("width"!=t&&"height"!=t&&"href"!=t&&"list"!=t&&"form"!=t&&"tabIndex"!=t&&"download"!=t&&"rowSpan"!=t&&"colSpan"!=t&&"role"!=t&&"popover"!=t&&t in e)try{e[t]=null==n?"":n;break e}catch(e){}"function"==typeof n||(null==n||!1===n&&"-"!=t[4]?e.removeAttribute(t):e.setAttribute(t,"popover"==t&&1==n?"":n))}}function Te(e){return function(t){if(this.l){var n=this.l[t.type+e];if(null==t[$])t[$]=O++;else if(t[$]<n[F])return;return n(N.event?N.event(t):t)}}}function Ee(e,t,n,r,o,i,a,s,l,c){var d,u,p,h,m,f,g,v,w,b,x,y,k,S,C,T=t.type;if(void 0!==t.constructor)return null;128&n.__u&&(l=!!(32&n.__u),i=[s=t.__e=n.__e]),(d=N.__b)&&d(t);e:if("function"==typeof T)try{if(v=t.props,w=T.prototype&&T.prototype.render,b=(d=T.contextType)&&r[d.__c],x=d?b?b.props.value:d.__:r,n.__c?g=(u=t.__c=n.__c).__=u.__E:(w?t.__c=u=new T(v,x):(t.__c=u=new fe(v,x),u.constructor=T,u.render=Re),b&&b.sub(u),u.state||(u.state={}),u.__n=r,p=u.__d=!0,u.__h=[],u._sb=[]),w&&null==u.__s&&(u.__s=u.state),w&&null!=T.getDerivedStateFromProps&&(u.__s==u.state&&(u.__s=de({},u.__s)),de(u.__s,T.getDerivedStateFromProps(v,u.__s))),h=u.props,m=u.state,u.__v=t,p)w&&null==T.getDerivedStateFromProps&&null!=u.componentWillMount&&u.componentWillMount(),w&&null!=u.componentDidMount&&u.__h.push(u.componentDidMount);else{if(w&&null==T.getDerivedStateFromProps&&v!==h&&null!=u.componentWillReceiveProps&&u.componentWillReceiveProps(v,x),t.__v==n.__v||!u.__e&&null!=u.shouldComponentUpdate&&!1===u.shouldComponentUpdate(v,u.__s,x)){t.__v!=n.__v&&(u.props=v,u.state=u.__s,u.__d=!1),t.__e=n.__e,t.__k=n.__k,t.__k.some(function(e){e&&(e.__=t)}),se.push.apply(u.__h,u._sb),u._sb=[],u.__h.length&&a.push(u);break e}null!=u.componentWillUpdate&&u.componentWillUpdate(v,u.__s,x),w&&null!=u.componentDidUpdate&&u.__h.push(function(){u.componentDidUpdate(h,m,f)})}if(u.context=x,u.props=v,u.__P=e,u.__e=!1,y=N.__r,k=0,w)u.state=u.__s,u.__d=!1,y&&y(t),d=u.render(u.props,u.state,u.context),se.push.apply(u.__h,u._sb),u._sb=[];else do{u.__d=!1,y&&y(t),d=u.render(u.props,u.state,u.context),u.state=u.__s}while(u.__d&&++k<25);u.state=u.__s,null!=u.getChildContext&&(r=de(de({},r),u.getChildContext())),w&&!p&&null!=u.getSnapshotBeforeUpdate&&(f=u.getSnapshotBeforeUpdate(h,m)),S=null!=d&&d.type===me&&null==d.key?Me(d.props.children):d,s=ye(e,ce(S)?S:[S],t,n,r,o,i,a,s,l,c),u.base=t.__e,t.__u&=-161,u.__h.length&&a.push(u),g&&(u.__E=u.__=null)}catch(e){if(t.__v=null,l||null!=i)if(e.then){for(t.__u|=l?160:128;s&&8==s.nodeType&&s.nextSibling;)s=s.nextSibling;i[i.indexOf(s)]=null,t.__e=s}else{for(C=i.length;C--;)ue(i[C]);ze(t)}else t.__e=n.__e,t.__k=n.__k,e.then||ze(t);N.__e(e,t,n)}else null==i&&t.__v==n.__v?(t.__k=n.__k,t.__e=n.__e):s=t.__e=function(e,t,n,r,o,i,a,s,l){var c,d,u,p,h,m,f,g=n.props||ae,v=t.props,w=t.type;if("svg"==w?o="http://www.w3.org/2000/svg":"math"==w?o="http://www.w3.org/1998/Math/MathML":o||(o="http://www.w3.org/1999/xhtml"),null!=i)for(c=0;c<i.length;c++)if((h=i[c])&&"setAttribute"in h==!!w&&(w?h.localName==w:3==h.nodeType)){e=h,i[c]=null;break}if(null==e){if(null==w)return document.createTextNode(v);e=document.createElementNS(o,w,v.is&&v),s&&(N.__m&&N.__m(t,i),s=!1),i=null}if(null==w)g===v||s&&e.data==v||(e.data=v);else{if(i=i&&_.call(e.childNodes),!s&&null!=i)for(g={},c=0;c<e.attributes.length;c++)g[(h=e.attributes[c]).name]=h.value;for(c in g)h=g[c],"dangerouslySetInnerHTML"==c?u=h:"children"==c||c in v||"value"==c&&"defaultValue"in v||"checked"==c&&"defaultChecked"in v||Ce(e,c,null,h,o);for(c in v)h=v[c],"children"==c?p=h:"dangerouslySetInnerHTML"==c?d=h:"value"==c?m=h:"checked"==c?f=h:s&&"function"!=typeof h||g[c]===h||Ce(e,c,h,g[c],o);if(d)s||u&&(d.__html==u.__html||d.__html==e.innerHTML)||(e.innerHTML=d.__html),t.__k=[];else if(u&&(e.innerHTML=""),ye("template"==t.type?e.content:e,ce(p)?p:[p],t,n,r,"foreignObject"==w?"http://www.w3.org/1999/xhtml":o,i,a,i?i[0]:n.__k&&ge(n,0),s,l),null!=i)for(c=i.length;c--;)ue(i[c]);s||(c="value","progress"==w&&null==m?e.removeAttribute("value"):null!=m&&(m!==e[c]||"progress"==w&&!m||"option"==w&&m!=g[c])&&Ce(e,c,m,g[c],o),c="checked",null!=f&&f!=e[c]&&Ce(e,c,f,g[c],o))}return e}(n.__e,t,n,r,o,i,a,l,c);return(d=N.diffed)&&d(t),128&t.__u?void 0:s}function ze(e){e&&(e.__c&&(e.__c.__e=!0),e.__k&&e.__k.some(ze))}function Ae(e,t,n){for(var r=0;r<n.length;r++)$e(n[r],n[++r],n[++r]);N.__c&&N.__c(t,e),e.some(function(t){try{e=t.__h,t.__h=[],e.some(function(e){e.call(t)})}catch(e){N.__e(e,t.__v)}})}function Me(e){return"object"!=typeof e||null==e||e.__b>0?e:ce(e)?e.map(Me):de({},e)}function $e(e,t,n){try{if("function"==typeof e){var r="function"==typeof e.__u;r&&e.__u(),r&&null==t||(e.__u=e(t))}else e.current=t}catch(e){N.__e(e,n)}}function Fe(e,t,n){var r,o;if(N.unmount&&N.unmount(e),(r=e.ref)&&(r.current&&r.current!=e.__e||$e(r,null,t)),null!=(r=e.__c)){if(r.componentWillUnmount)try{r.componentWillUnmount()}catch(e){N.__e(e,t)}r.base=r.__P=null}if(r=e.__k)for(o=0;o<r.length;o++)r[o]&&Fe(r[o],t,n||"function"!=typeof e.type);n||ue(e.__e),e.__c=e.__=e.__e=void 0}function Re(e,t,n){return this.constructor(e,n)}function Oe(e,t,n){var r,o,i;t==document&&(t=document.documentElement),N.__&&N.__(e,t),r=!1?null:t.__k,o=[],i=[],Ee(t,e=t.__k=pe(me,null,[e]),r||ae,ae,t.namespaceURI,r?null:t.firstChild?_.call(t.childNodes):null,o,r?r.__e:t.firstChild,false,i),Ae(o,e,i)}function De(e){function t(e){var n,r;return this.getChildContext||(n=new Set,(r={})[t.__c]=this,this.getChildContext=function(){return r},this.componentWillUnmount=function(){n=null},this.shouldComponentUpdate=function(e){this.props.value!=e.value&&n.forEach(function(e){e.__e=!0,be(e)})},this.sub=function(e){n.add(e);var t=e.componentWillUnmount;e.componentWillUnmount=function(){n&&n.delete(e),t&&t.call(e)}}),e.children}return t.__c="__cC"+L++,t.__=e,t.Provider=t.__l=(t.Consumer=function(e,t){return e.children(t)}).contextType=t,t}_=se.slice,N={__e:function(e,t,n,r){for(var o,i,a;t=t.__;)if((o=t.__c)&&!o.__)try{if((i=o.constructor)&&null!=i.getDerivedStateFromError&&(o.setState(i.getDerivedStateFromError(e)),a=o.__d),null!=o.componentDidCatch&&(o.componentDidCatch(e,r||{}),a=o.__d),a)return o.__E=o}catch(t){e=t}throw e}},S=0,C=function(e){return null!=e&&void 0===e.constructor},fe.prototype.setState=function(e,t){var n;n=null!=this.__s&&this.__s!=this.state?this.__s:this.__s=de({},this.state),"function"==typeof e&&(e=e(de({},n),this.props)),e&&de(n,e),null!=e&&this.__v&&(t&&this._sb.push(t),be(this))},fe.prototype.forceUpdate=function(e){this.__v&&(this.__e=!0,e&&this.__h.push(e),be(this))},fe.prototype.render=me,T=[],z="function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout,A=function(e,t){return e.__v.__b-t.__v.__b},xe.__r=0,M=Math.random().toString(8),$="__d"+M,F="__a"+M,R=/(PointerCapture)$|Capture$/i,O=0,D=Te(!1),j=Te(!0),L=0;var je=0,Le=[],Pe=N,Ie=Pe.__b,We=Pe.__r,Ue=Pe.diffed,He=Pe.__c,Be=Pe.unmount,Ve=Pe.__;function qe(e,t){Pe.__h&&Pe.__h(I,e,je||t),je=0;var n=I.__H||(I.__H={__:[],__h:[]});return e>=n.__.length&&n.__.push({}),n.__[e]}function Ge(e){return je=1,function(e,t){var n=qe(P++,2);if(n.t=e,!n.__c&&(n.__=[at(void 0,t),function(e){var t=n.__N?n.__N[0]:n.__[0],r=n.t(t,e);t!==r&&(n.__N=[r,n.__[1]],n.__c.setState({}))}],n.__c=I,!I.__f)){var r=function(e,t,r){if(!n.__c.__H)return!0;var i=n.__c.__H.__.filter(function(e){return e.__c});if(i.every(function(e){return!e.__N}))return!o||o.call(this,e,t,r);var a=n.__c.props!==e;return i.some(function(e){if(e.__N){var t=e.__[0];e.__=e.__N,e.__N=void 0,t!==e.__[0]&&(a=!0)}}),o&&o.call(this,e,t,r)||a};I.__f=!0;var o=I.shouldComponentUpdate,i=I.componentWillUpdate;I.componentWillUpdate=function(e,t,n){if(this.__e){var a=o;o=void 0,r(e,t,n),o=a}i&&i.call(this,e,t,n)},I.shouldComponentUpdate=r}return n.__N||n.__}(at,e)}function Je(e,t){var n=qe(P++,3);!Pe.__s&&it(n.__H,t)&&(n.__=e,n.u=t,I.__H.__h.push(n))}function Ye(e,t){var n=qe(P++,4);!Pe.__s&&it(n.__H,t)&&(n.__=e,n.u=t,I.__h.push(n))}function Xe(e){return je=5,Ke(function(){return{current:e}},[])}function Ke(e,t){var n=qe(P++,7);return it(n.__H,t)&&(n.__=e(),n.__H=t,n.__h=e),n.__}function Ze(e,t){return je=8,Ke(function(){return e},t)}function Qe(e){var t=I.context[e.__c],n=qe(P++,9);return n.c=e,t?(null==n.__&&(n.__=!0,t.sub(I)),t.props.value):e.__}function et(){for(var e;e=Le.shift();){var t=e.__H;if(e.__P&&t)try{t.__h.some(rt),t.__h.some(ot),t.__h=[]}catch(n){t.__h=[],Pe.__e(n,e.__v)}}}Pe.__b=function(e){I=null,Ie&&Ie(e)},Pe.__=function(e,t){e&&t.__k&&t.__k.__m&&(e.__m=t.__k.__m),Ve&&Ve(e,t)},Pe.__r=function(e){We&&We(e),P=0;var t=(I=e.__c).__H;t&&(W===I?(t.__h=[],I.__h=[],t.__.some(function(e){e.__N&&(e.__=e.__N),e.u=e.__N=void 0})):(t.__h.some(rt),t.__h.some(ot),t.__h=[],P=0)),W=I},Pe.diffed=function(e){Ue&&Ue(e);var t=e.__c;t&&t.__H&&(t.__H.__h.length&&(1!==Le.push(t)&&U===Pe.requestAnimationFrame||((U=Pe.requestAnimationFrame)||nt)(et)),t.__H.__.some(function(e){e.u&&(e.__H=e.u),e.u=void 0})),W=I=null},Pe.__c=function(e,t){t.some(function(e){try{e.__h.some(rt),e.__h=e.__h.filter(function(e){return!e.__||ot(e)})}catch(n){t.some(function(e){e.__h&&(e.__h=[])}),t=[],Pe.__e(n,e.__v)}}),He&&He(e,t)},Pe.unmount=function(e){Be&&Be(e);var t,n=e.__c;n&&n.__H&&(n.__H.__.some(function(e){try{rt(e)}catch(e){t=e}}),n.__H=void 0,t&&Pe.__e(t,n.__v))};var tt="function"==typeof requestAnimationFrame;function nt(e){var t,n=function(){clearTimeout(r),tt&&cancelAnimationFrame(t),setTimeout(e)},r=setTimeout(n,35);tt&&(t=requestAnimationFrame(n))}function rt(e){var t=I,n=e.__c;"function"==typeof n&&(e.__c=void 0,n()),I=t}function ot(e){var t=I;e.__c=e.__(),I=t}function it(e,t){return!e||e.length!==t.length||t.some(function(t,n){return t!==e[n]})}function at(e,t){return"function"==typeof t?t(e):t}var st=Symbol.for("preact-signals");function lt(){if(ft>1)ft--;else{var e,t=!1;for(!function(){var e=bt;for(bt=void 0;void 0!==e;)e.S.v===e.v&&(e.S.i=e.i),e=e.o}();void 0!==mt;){var n=mt;for(mt=void 0,gt++;void 0!==n;){var r=n.u;if(n.u=void 0,n.f&=-3,!(8&n.f)&&Nt(n))try{n.c()}catch(n){t||(e=n,t=!0)}n=r}}if(gt=0,ft--,t)throw e}}function ct(e){if(ft>0)return e();wt=++vt,ft++;try{return e()}finally{lt()}}var dt=void 0;function ut(e){var t=dt;dt=void 0;try{return e()}finally{dt=t}}var pt,ht,mt=void 0,ft=0,gt=0,vt=0,wt=0,bt=void 0,xt=0;function yt(e){if(void 0!==dt){var t=e.n;if(void 0===t||t.t!==dt)return t={i:0,S:e,p:dt.s,n:void 0,t:dt,e:void 0,x:void 0,r:t},void 0!==dt.s&&(dt.s.n=t),dt.s=t,e.n=t,32&dt.f&&e.S(t),t;if(-1===t.i)return t.i=0,void 0!==t.n&&(t.n.p=t.p,void 0!==t.p&&(t.p.n=t.n),t.p=dt.s,t.n=void 0,dt.s.n=t,dt.s=t),t}}function kt(e,t){this.v=e,this.i=0,this.n=void 0,this.t=void 0,this.l=0,this.W=null==t?void 0:t.watched,this.Z=null==t?void 0:t.unwatched,this.name=null==t?void 0:t.name}function _t(e,t){return new kt(e,t)}function Nt(e){for(var t=e.s;void 0!==t;t=t.n)if(t.S.i!==t.i||!t.S.h()||t.S.i!==t.i)return!0;return!1}function St(e){for(var t=e.s;void 0!==t;t=t.n){var n=t.S.n;if(void 0!==n&&(t.r=n),t.S.n=t,t.i=-1,void 0===t.n){e.s=t;break}}}function Ct(e){for(var t=e.s,n=void 0;void 0!==t;){var r=t.p;-1===t.i?(t.S.U(t),void 0!==r&&(r.n=t.n),void 0!==t.n&&(t.n.p=r)):n=t,t.S.n=t.r,void 0!==t.r&&(t.r=void 0),t=r}e.s=n}function Tt(e,t){kt.call(this,void 0),this.x=e,this.s=void 0,this.g=xt-1,this.f=4,this.W=null==t?void 0:t.watched,this.Z=null==t?void 0:t.unwatched,this.name=null==t?void 0:t.name}function Et(e,t){return new Tt(e,t)}function zt(e){var t=e.m;if(e.m=void 0,"function"==typeof t){ft++;var n=dt;dt=void 0;try{t()}catch(t){throw e.f&=-2,e.f|=8,At(e),t}finally{dt=n,lt()}}}function At(e){for(var t=e.s;void 0!==t;t=t.n)t.S.U(t);e.x=void 0,e.s=void 0,zt(e)}function Mt(e){if(dt!==this)throw new Error("Out-of-order effect");Ct(this),dt=e,this.f&=-2,8&this.f&&At(this),lt()}function $t(e,t){this.x=e,this.m=void 0,this.s=void 0,this.u=void 0,this.f=32,this.name=null==t?void 0:t.name}function Ft(e,t){var n=new $t(e,t);try{n.c()}catch(e){throw n.d(),e}var r=n.d.bind(n);return r[Symbol.dispose]=r,r}kt.prototype.brand=st,kt.prototype.h=function(){return!0},kt.prototype.S=function(e){var t=this,n=this.t;n!==e&&void 0===e.e&&(e.x=n,this.t=e,void 0!==n?n.e=e:ut(function(){var e;null==(e=t.W)||e.call(t)}))},kt.prototype.U=function(e){var t=this;if(void 0!==this.t){var n=e.e,r=e.x;void 0!==n&&(n.x=r,e.e=void 0),void 0!==r&&(r.e=n,e.x=void 0),e===this.t&&(this.t=r,void 0===r&&ut(function(){var e;null==(e=t.Z)||e.call(t)}))}},kt.prototype.subscribe=function(e){var t=this;return Ft(function(){var n=t.value,r=dt;dt=void 0;try{e(n)}finally{dt=r}},{name:"sub"})},kt.prototype.valueOf=function(){return this.value},kt.prototype.toString=function(){return this.value+""},kt.prototype.toJSON=function(){return this.value},kt.prototype.peek=function(){var e=dt;dt=void 0;try{return this.value}finally{dt=e}},Object.defineProperty(kt.prototype,"value",{get:function(){var e=yt(this);return void 0!==e&&(e.i=this.i),this.v},set:function(e){if(e!==this.v){if(gt>100)throw new Error("Cycle detected");n=this,0!==ft&&0===gt&&n.l!==wt&&(n.l=wt,bt={S:n,v:n.v,i:n.i,o:bt}),this.v=e,this.i++,xt++,ft++;try{for(var t=this.t;void 0!==t;t=t.x)t.t.N()}finally{lt()}}var n}}),Tt.prototype=new kt,Tt.prototype.h=function(){if(this.f&=-3,1&this.f)return!1;if(32==(36&this.f))return!0;if(this.f&=-5,this.g===xt)return!0;if(this.g=xt,this.f|=1,this.i>0&&!Nt(this))return this.f&=-2,!0;var e=dt;try{St(this),dt=this;var t=this.x();(16&this.f||this.v!==t||0===this.i)&&(this.v=t,this.f&=-17,this.i++)}catch(e){this.v=e,this.f|=16,this.i++}return dt=e,Ct(this),this.f&=-2,!0},Tt.prototype.S=function(e){if(void 0===this.t){this.f|=36;for(var t=this.s;void 0!==t;t=t.n)t.S.S(t)}kt.prototype.S.call(this,e)},Tt.prototype.U=function(e){if(void 0!==this.t&&(kt.prototype.U.call(this,e),void 0===this.t)){this.f&=-33;for(var t=this.s;void 0!==t;t=t.n)t.S.U(t)}},Tt.prototype.N=function(){if(!(2&this.f)){this.f|=6;for(var e=this.t;void 0!==e;e=e.x)e.t.N()}},Object.defineProperty(Tt.prototype,"value",{get:function(){if(1&this.f)throw new Error("Cycle detected");var e=yt(this);if(this.h(),void 0!==e&&(e.i=this.i),16&this.f)throw this.v;return this.v}}),$t.prototype.c=function(){var e=this.S();try{if(8&this.f)return;if(void 0===this.x)return;var t=this.x();"function"==typeof t&&(this.m=t)}finally{e()}},$t.prototype.S=function(){if(1&this.f)throw new Error("Cycle detected");this.f|=1,this.f&=-9,zt(this),St(this),ft++;var e=dt;return dt=this,Mt.bind(this,e)},$t.prototype.N=function(){2&this.f||(this.f|=2,this.u=mt,mt=this)},$t.prototype.d=function(){this.f|=8,1&this.f||At(this)},$t.prototype.dispose=function(){this.d()};var Rt="undefined"!=typeof window&&!!window.__PREACT_SIGNALS_DEVTOOLS__,Ot=[],Dt=[];function jt(e,t){N[e]=t.bind(null,N[e]||function(){})}function Lt(e){if(ht){var t=ht;ht=void 0,t()}ht=e&&e.S()}function Pt(e){var t=this,n=e.data,r=Wt(n);r.value=n;var o=Ke(function(){for(var e=t,n=t.__v;n=n.__;)if(n.__c){n.__c.__$f|=4;break}var o=Et(function(){var e=r.value.value;return 0===e?0:!0===e?"":e||""}),i=Et(function(){return!Array.isArray(o.value)&&!C(o.value)}),a=Ft(function(){if(this.N=Gt,i.value){var t=o.value;e.__v&&e.__v.__e&&3===e.__v.__e.nodeType&&(e.__v.__e.data=t)}}),s=t.__$u.d;return t.__$u.d=function(){a(),s.call(this)},[i,o]},[]),i=o[0],a=o[1];return i.value?a.peek():a.value}function It(e,t,n,r){var o=t in e&&void 0===e.ownerSVGElement,i=_t(n),a=n.peek();return{o:function(e,t){i.value=e,a=e.peek()},d:Ft(function(){this.N=Gt;var n=i.value.value;a!==n?(a=void 0,o?e[t]=n:null==n||!1===n&&"-"!==t[4]?e.removeAttribute(t):e.setAttribute(t,n)):a=void 0})}}function Wt(e,t){return Ke(function(){return _t(e,t)},[])}Ft(function(){pt=this.N})(),Pt.displayName="ReactiveTextNode",Object.defineProperties(kt.prototype,{constructor:{configurable:!0,value:void 0},type:{configurable:!0,value:Pt},props:{configurable:!0,get:function(){var e=this;return{data:{get value(){return e.value}}}}},__b:{configurable:!0,value:1}}),jt("__b",function(e,t){if("string"==typeof t.type){var n,r=t.props;for(var o in r)if("children"!==o){var i=r[o];i instanceof kt&&(n||(t.__np=n={}),n[o]=i,r[o]=i.peek())}}e(t)}),jt("__r",function(e,t){if(e(t),t.type!==me){Lt();var n,r=t.__c;r&&(r.__$f&=-2,void 0===(n=r.__$u)&&(r.__$u=(Ft(function(){o=this},{name:"function"==typeof t.type?t.type.displayName||t.type.name:""}),o.c=function(){var e;Rt&&(null==(e=n.y)||e.call(n)),r.__$f|=1,r.setState({})},n=o))),Lt(n)}var o}),jt("__e",function(e,t,n,r){Lt(),e(t,n,r)}),jt("diffed",function(e,t){var n;if(Lt(),"string"==typeof t.type&&(n=t.__e)){var r=t.__np,o=t.props;if(r){var i=n.U;if(i)for(var a in i){var s=i[a];void 0===s||a in r||(s.d(),i[a]=void 0)}else i={},n.U=i;for(var l in r){var c=i[l],d=r[l];void 0===c?(c=It(n,l,d),i[l]=c):c.o(d,o)}for(var u in r)o[u]=r[u]}}e(t)}),jt("unmount",function(e,t){if("string"==typeof t.type){var n=t.__e;if(n){var r=n.U;if(r)for(var o in n.U=void 0,r){var i=r[o];i&&i.d()}}t.__np=void 0}else{var a=t.__c;if(a){var s=a.__$u;s&&(a.__$u=void 0,s.d())}}e(t)}),jt("__h",function(e,t,n,r){(r<3||9===r)&&(t.__$f|=2),e(t,n,r)}),fe.prototype.shouldComponentUpdate=function(e,t){if(this.__R)return!0;var n=this.__$u,r=n&&void 0!==n.s;for(var o in t)return!0;if(this.__f||"boolean"==typeof this.u&&!0===this.u){var i=2&this.__$f;if(!(r||i||4&this.__$f))return!0;if(1&this.__$f)return!0}else{if(!(r||4&this.__$f))return!0;if(3&this.__$f)return!0}for(var a in e)if("__source"!==a&&e[a]!==this.props[a])return!0;for(var s in this.props)if(!(s in e))return!0;return!1};var Ut="undefined"==typeof requestAnimationFrame?setTimeout:function(e){var t=function(){clearTimeout(n),cancelAnimationFrame(r),e()},n=setTimeout(t,35),r=requestAnimationFrame(t)},Ht=function(e){queueMicrotask(function(){queueMicrotask(e)})};function Bt(){ct(function(){for(var e;e=Ot.shift();)pt.call(e)})}function Vt(){1===Ot.push(this)&&(N.requestAnimationFrame||Ut)(Bt)}function qt(){ct(function(){for(var e;e=Dt.shift();)pt.call(e)})}function Gt(){1===Dt.push(this)&&(N.requestAnimationFrame||Ht)(qt)}function Jt(e,t){var n=Xe(e);n.current=e,Je(function(){return Ft(function(){return this.N=Vt,n.current()},t)},[])}function Yt(e,t){return t-e}function Xt(e){let t=e[0].name;const n=e.length,r=Math.min(4,n);for(let n=1;n<r;n++)t+=`, ${e[n].name}`;return t}function Kt(e){let t=e[0].time;for(let n=1,r=e.length;n<r;n++)t+=e[n].time;return t}function Zt(e){for(let t=0,n=e.length;t<n;t++)if(e[t].forget)return!0;return!1}var Qt=e=>{let t="";const n=new Map;for(const t of e){const{forget:e,time:r,aggregatedCount:o,name:i}=t;n.has(o)||n.set(o,[]);const a=n.get(o);a&&a.push({name:i,forget:e,time:null!=r?r:0})}const r=Array.from(n.keys()).sort(Yt),o=[];let i=0;for(const e of r){const t=n.get(e);if(!t)continue;let r=Xt(t);const a=Kt(t),s=Zt(t);i+=a,t.length>4&&(r+="…"),e>1&&(r+=` × ${e}`),s&&(r=`✨${r}`),o.push(r)}return t=o.join(", "),t.length?(t.length>40&&(t=`${t.slice(0,40)}…`),i>=.01&&(t+=` (${Number(i.toFixed(2))}ms)`),t):null};function en(e,t){return e===t||e!=e&&t!=t}var tn=()=>ie?(void 0===window.reactScanIdCounter&&(window.reactScanIdCounter=0),""+ ++window.reactScanIdCounter):"0",nn=e=>{const t=e.createOscillator(),n=e.createGain();t.connect(n),n.connect(e.destination);const r="sine",o=.3,i=.12,a=[392,600],s=o/a.length;a.forEach((n,r)=>{t.frequency.setValueAtTime(n,e.currentTime+r*s)}),t.type=r,n.gain.setValueAtTime(i,e.currentTime),n.gain.setTargetAtTime(0,e.currentTime+.7*o,.05),t.start(),t.stop(e.currentTime+o)};function rn(e,t){for(var n in t)e[n]=t[n];return e}function on(e,t){for(var n in e)if("__source"!==n&&!(n in t))return!0;for(var r in t)if("__source"!==r&&e[r]!==t[r])return!0;return!1}function an(e){try{return!((t=e.__)===(n=e.u())&&(0!==t||1/t==1/n)||t!=t&&n!=n)}catch(e){return!0}var t,n}function sn(e,t){this.props=e,this.context=t}function ln(e,t){function n(e){var t=this.props.ref;return t!=e.ref&&t&&("function"==typeof t?t(null):t.current=null),on(this.props,e)}function r(t){return this.shouldComponentUpdate=n,pe(e,t)}return r.displayName="Memo("+(e.displayName||e.name)+")",r.__f=r.prototype.isReactComponent=!0,r.type=e,r}(sn.prototype=new fe).isPureReactComponent=!0,sn.prototype.shouldComponentUpdate=function(e,t){return on(this.props,e)||on(this.state,t)};var cn=N.__b;N.__b=function(e){e.type&&e.type.__f&&e.ref&&(e.props.ref=e.ref,e.ref=null),cn&&cn(e)};var dn="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.forward_ref")||3911;function un(e){function t(t){var n=rn({},t);return delete n.ref,e(n,t.ref||null)}return t.$$typeof=dn,t.render=e,t.prototype.isReactComponent=t.__f=!0,t.displayName="ForwardRef("+(e.displayName||e.name)+")",t}var pn=N.__e;N.__e=function(e,t,n,r){if(e.then)for(var o,i=t;i=i.__;)if((o=i.__c)&&o.__c)return null==t.__e&&(t.__e=n.__e,t.__k=n.__k),o.__c(e,t);pn(e,t,n,r)};var hn=N.unmount;function mn(e,t,n){return e&&(e.__c&&e.__c.__H&&(e.__c.__H.__.forEach(function(e){"function"==typeof e.__c&&e.__c()}),e.__c.__H=null),null!=(e=rn({},e)).__c&&(e.__c.__P===n&&(e.__c.__P=t),e.__c.__e=!0,e.__c=null),e.__k=e.__k&&e.__k.map(function(e){return mn(e,t,n)})),e}function fn(e,t,n){return e&&n&&(e.__v=null,e.__k=e.__k&&e.__k.map(function(e){return fn(e,t,n)}),e.__c&&e.__c.__P===t&&(e.__e&&n.appendChild(e.__e),e.__c.__e=!0,e.__c.__P=n)),e}function gn(){this.__u=0,this.o=null,this.__b=null}function vn(e){var t=e.__&&e.__.__c;return t&&t.__a&&t.__a(e)}function wn(){this.i=null,this.l=null}N.unmount=function(e){var t=e.__c;t&&(t.__z=!0),t&&t.__R&&t.__R(),t&&32&e.__u&&(e.type=null),hn&&hn(e)},(gn.prototype=new fe).__c=function(e,t){var n=t.__c,r=this;null==r.o&&(r.o=[]),r.o.push(n);var o=vn(r.__v),i=!1,a=function(){i||r.__z||(i=!0,n.__R=null,o?o(l):l())};n.__R=a;var s=n.__P;n.__P=null;var l=function(){if(! --r.__u){if(r.state.__a){var e=r.state.__a;r.__v.__k[0]=fn(e,e.__c.__P,e.__c.__O)}var t;for(r.setState({__a:r.__b=null});t=r.o.pop();)t.__P=s,t.forceUpdate()}};r.__u++||32&t.__u||r.setState({__a:r.__b=r.__v.__k[0]}),e.then(a,a)},gn.prototype.componentWillUnmount=function(){this.o=[]},gn.prototype.render=function(e,t){if(this.__b){if(this.__v.__k){var n=document.createElement("div"),r=this.__v.__k[0].__c;this.__v.__k[0]=mn(this.__b,n,r.__O=r.__P)}this.__b=null}var o=t.__a&&pe(me,null,e.fallback);return o&&(o.__u&=-33),[pe(me,null,t.__a?null:e.children),o]};var bn=function(e,t,n){if(++n[1]===n[0]&&e.l.delete(t),e.props.revealOrder&&("t"!==e.props.revealOrder[0]||!e.l.size))for(n=e.i;n;){for(;n.length>3;)n.pop()();if(n[1]<n[0])break;e.i=n=n[2]}};function xn(e){return this.getChildContext=function(){return e.context},e.children}function yn(e){var t=this,n=e.h;if(t.componentWillUnmount=function(){Oe(null,t.v),t.v=null,t.h=null},t.h&&t.h!==n&&t.componentWillUnmount(),!t.v){for(var r=t.__v;null!==r&&!r.__m&&null!==r.__;)r=r.__;t.h=n,t.v={nodeType:1,parentNode:n,childNodes:[],__k:{__m:r.__m},contains:function(){return!0},namespaceURI:n.namespaceURI,insertBefore:function(e,n){this.childNodes.push(e),t.h.insertBefore(e,n)},removeChild:function(e){this.childNodes.splice(this.childNodes.indexOf(e)>>>1,1),t.h.removeChild(e)}}}Oe(pe(xn,{context:t.context},e.__v),t.v)}(wn.prototype=new fe).__a=function(e){var t=this,n=vn(t.__v),r=t.l.get(e);return r[0]++,function(o){var i=function(){t.props.revealOrder?(r.push(o),bn(t,e,r)):o()};n?n(i):i()}},wn.prototype.render=function(e){this.i=null,this.l=new Map;var t=_e(e.children);e.revealOrder&&"b"===e.revealOrder[0]&&t.reverse();for(var n=t.length;n--;)this.l.set(t[n],this.i=[1,0,this.i]);return e.children},wn.prototype.componentDidUpdate=wn.prototype.componentDidMount=function(){var e=this;this.l.forEach(function(t,n){bn(e,n,t)})};var kn="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,_n=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|image(!S)|letter|lighting|marker(?!H|W|U)|overline|paint|pointer|shape|stop|strikethrough|stroke|text(?!L)|transform|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,Nn=/^on(Ani|Tra|Tou|BeforeInp|Compo)/,Sn=/[A-Z0-9]/g,Cn="undefined"!=typeof document,Tn=function(e){return("undefined"!=typeof Symbol&&"symbol"==typeof Symbol()?/fil|che|rad/:/fil|che|ra/).test(e)};fe.prototype.isReactComponent=!0,["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach(function(e){Object.defineProperty(fe.prototype,e,{configurable:!0,get:function(){return this["UNSAFE_"+e]},set:function(t){Object.defineProperty(this,e,{configurable:!0,writable:!0,value:t})}})});var En=N.event;N.event=function(e){return En&&(e=En(e)),e.persist=function(){},e.isPropagationStopped=function(){return this.cancelBubble},e.isDefaultPrevented=function(){return this.defaultPrevented},e.nativeEvent=e};var zn={configurable:!0,get:function(){return this.class}},An=N.vnode;N.vnode=function(e){"string"==typeof e.type&&function(e){var t=e.props,n=e.type,r={},o=-1==n.indexOf("-");for(var i in t){var a=t[i];if(!("value"===i&&"defaultValue"in t&&null==a||Cn&&"children"===i&&"noscript"===n||"class"===i||"className"===i)){var s=i.toLowerCase();"defaultValue"===i&&"value"in t&&null==t.value?i="value":"download"===i&&!0===a?a="":"translate"===s&&"no"===a?a=!1:"o"===s[0]&&"n"===s[1]?"ondoubleclick"===s?i="ondblclick":"onchange"!==s||"input"!==n&&"textarea"!==n||Tn(t.type)?"onfocus"===s?i="onfocusin":"onblur"===s?i="onfocusout":Nn.test(i)&&(i=s):s=i="oninput":o&&_n.test(i)?i=i.replace(Sn,"-$&").toLowerCase():null===a&&(a=void 0),"oninput"===s&&r[i=s]&&(i="oninputCapture"),r[i]=a}}"select"==n&&(r.multiple&&Array.isArray(r.value)&&(r.value=_e(t.children).forEach(function(e){e.props.selected=-1!=r.value.indexOf(e.props.value)})),null!=r.defaultValue&&(r.value=_e(t.children).forEach(function(e){e.props.selected=r.multiple?-1!=r.defaultValue.indexOf(e.props.value):r.defaultValue==e.props.value}))),t.class&&!t.className?(r.class=t.class,Object.defineProperty(r,"className",zn)):t.className&&(r.class=r.className=t.className),e.props=r}(e),e.$$typeof=kn,An&&An(e)};var Mn=N.__r;N.__r=function(e){Mn&&Mn(e),e.__c};var $n=N.diffed;N.diffed=function(e){$n&&$n(e);var t=e.props,n=e.__e;null!=n&&"textarea"===e.type&&"value"in t&&t.value!==n.value&&(n.value=null==t.value?"":t.value)};var Fn=0;function Rn(e,t,n,r,o,i){t||(t={});var a,s,l=t;if("ref"in l)for(s in l={},t)"ref"==s?a=t[s]:l[s]=t[s];var c={type:e,props:l,key:n,ref:a,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:--Fn,__i:-1,__u:0,__source:o,__self:i};if("function"==typeof e&&(a=e.defaultProps))for(s in a)void 0===l[s]&&(l[s]=a[s]);return N.vnode&&N.vnode(c),c}var On=un(({size:e=15,name:t,fill:n="currentColor",stroke:r="currentColor",className:o,externalURL:i="",style:a},s)=>{const l=Array.isArray(e)?e[0]:e,c=Array.isArray(e)?e[1]||e[0]:e,d=`${i}#${t}`;return Rn("svg",{ref:s,width:`${l}px`,height:`${c}px`,fill:n,stroke:r,className:o,style:{...a,minWidth:`${l}px`,maxWidth:`${l}px`,minHeight:`${c}px`,maxHeight:`${c}px`},children:[Rn("title",{children:t}),Rn("use",{href:d})]})}),Dn=24,jn=550,Ln=350,Pn=400,In=240,Wn="react-scan-widget-settings-v2",Un="react-scan-widget-collapsed-v1",Hn="react-scan-widget-last-view-v1";function Bn(e){var t,n,r="";if("string"==typeof e||"number"==typeof e)r+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(n=Bn(e[t]))&&(r&&(r+=" "),r+=n)}else for(n in e)e[n]&&(r&&(r+=" "),r+=n);return r}var Vn=(e=new Map,t=null,n)=>({nextPart:e,validators:t,classGroupId:n}),qn="-",Gn=[],Jn=e=>{const t=Kn(e),{conflictingClassGroups:n,conflictingClassGroupModifiers:r}=e;return{getClassGroupId:e=>{if(e.startsWith("[")&&e.endsWith("]"))return Xn(e);const n=e.split(qn),r=""===n[0]&&n.length>1?1:0;return Yn(n,r,t)},getConflictingClassGroupIds:(e,t)=>{if(t){const t=r[e],o=n[e];return t?o?((e,t)=>{const n=new Array(e.length+t.length);for(let t=0;t<e.length;t++)n[t]=e[t];for(let r=0;r<t.length;r++)n[e.length+r]=t[r];return n})(o,t):t:o||Gn}return n[e]||Gn}}},Yn=(e,t,n)=>{if(0===e.length-t)return n.classGroupId;const r=e[t],o=n.nextPart.get(r);if(o){const n=Yn(e,t+1,o);if(n)return n}const i=n.validators;if(null===i)return;const a=0===t?e.join(qn):e.slice(t).join(qn),s=i.length;for(let e=0;e<s;e++){const t=i[e];if(t.validator(a))return t.classGroupId}},Xn=e=>-1===e.slice(1,-1).indexOf(":")?void 0:(()=>{const t=e.slice(1,-1),n=t.indexOf(":"),r=t.slice(0,n);return r?"arbitrary.."+r:void 0})(),Kn=e=>{const{theme:t,classGroups:n}=e;return Zn(n,t)},Zn=(e,t)=>{const n=Vn();for(const r in e){const o=e[r];Qn(o,n,r,t)}return n},Qn=(e,t,n,r)=>{const o=e.length;for(let i=0;i<o;i++){const o=e[i];er(o,t,n,r)}},er=(e,t,n,r)=>{"string"!=typeof e?"function"!=typeof e?rr(e,t,n,r):nr(e,t,n,r):tr(e,t,n)},tr=(e,t,n)=>{(""===e?t:or(t,e)).classGroupId=n},nr=(e,t,n,r)=>{ir(e)?Qn(e(r),t,n,r):(null===t.validators&&(t.validators=[]),t.validators.push(((e,t)=>({classGroupId:e,validator:t}))(n,e)))},rr=(e,t,n,r)=>{const o=Object.entries(e),i=o.length;for(let e=0;e<i;e++){const[i,a]=o[e];Qn(a,or(t,i),n,r)}},or=(e,t)=>{let n=e;const r=t.split(qn),o=r.length;for(let e=0;e<o;e++){const t=r[e];let o=n.nextPart.get(t);o||(o=Vn(),n.nextPart.set(t,o)),n=o}return n},ir=e=>"isThemeGetter"in e&&!0===e.isThemeGetter,ar=e=>{if(e<1)return{get:()=>{},set:()=>{}};let t=0,n=Object.create(null),r=Object.create(null);const o=(o,i)=>{n[o]=i,t++,t>e&&(t=0,r=n,n=Object.create(null))};return{get(e){let t=n[e];return void 0!==t?t:void 0!==(t=r[e])?(o(e,t),t):void 0},set(e,t){e in n?n[e]=t:o(e,t)}}},sr=[],lr=(e,t,n,r,o)=>({modifiers:e,hasImportantModifier:t,baseClassName:n,maybePostfixModifierPosition:r,isExternal:o}),cr=e=>{const{prefix:t,experimentalParseClassName:n}=e;let r=e=>{const t=[];let n,r=0,o=0,i=0;const a=e.length;for(let s=0;s<a;s++){const a=e[s];if(0===r&&0===o){if(":"===a){t.push(e.slice(i,s)),i=s+1;continue}if("/"===a){n=s;continue}}"["===a?r++:"]"===a?r--:"("===a?o++:")"===a&&o--}const s=0===t.length?e:e.slice(i);let l=s,c=!1;s.endsWith("!")?(l=s.slice(0,-1),c=!0):s.startsWith("!")&&(l=s.slice(1),c=!0);return lr(t,c,l,n&&n>i?n-i:void 0)};if(t){const e=t+":",n=r;r=t=>t.startsWith(e)?n(t.slice(e.length)):lr(sr,!1,t,void 0,!0)}if(n){const e=r;r=t=>n({className:t,parseClassName:e})}return r},dr=e=>{const t=new Map;return e.orderSensitiveModifiers.forEach((e,n)=>{t.set(e,1e6+n)}),e=>{const n=[];let r=[];for(let o=0;o<e.length;o++){const i=e[o],a="["===i[0],s=t.has(i);a||s?(r.length>0&&(r.sort(),n.push(...r),r=[]),n.push(i)):r.push(i)}return r.length>0&&(r.sort(),n.push(...r)),n}},ur=/\s+/,pr=e=>{if("string"==typeof e)return e;let t,n="";for(let r=0;r<e.length;r++)e[r]&&(t=pr(e[r]))&&(n&&(n+=" "),n+=t);return n},hr=[],mr=e=>{const t=t=>t[e]||hr;return t.isThemeGetter=!0,t},fr=/^\[(?:(\w[\w-]*):)?(.+)\]$/i,gr=/^\((?:(\w[\w-]*):)?(.+)\)$/i,vr=/^\d+(?:\.\d+)?\/\d+(?:\.\d+)?$/,wr=/^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/,br=/\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/,xr=/^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/,yr=/^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/,kr=/^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/,_r=e=>vr.test(e),Nr=e=>!!e&&!Number.isNaN(Number(e)),Sr=e=>!!e&&Number.isInteger(Number(e)),Cr=e=>e.endsWith("%")&&Nr(e.slice(0,-1)),Tr=e=>wr.test(e),Er=()=>!0,zr=e=>br.test(e)&&!xr.test(e),Ar=()=>!1,Mr=e=>yr.test(e),$r=e=>kr.test(e),Fr=e=>!Or(e)&&!Hr(e),Rr=e=>Kr(e,to,Ar),Or=e=>fr.test(e),Dr=e=>Kr(e,no,zr),jr=e=>Kr(e,ro,Nr),Lr=e=>Kr(e,io,Er),Pr=e=>Kr(e,oo,Ar),Ir=e=>Kr(e,Qr,Ar),Wr=e=>Kr(e,eo,$r),Ur=e=>Kr(e,ao,Mr),Hr=e=>gr.test(e),Br=e=>Zr(e,no),Vr=e=>Zr(e,oo),qr=e=>Zr(e,Qr),Gr=e=>Zr(e,to),Jr=e=>Zr(e,eo),Yr=e=>Zr(e,ao,!0),Xr=e=>Zr(e,io,!0),Kr=(e,t,n)=>{const r=fr.exec(e);return!!r&&(r[1]?t(r[1]):n(r[2]))},Zr=(e,t,n=!1)=>{const r=gr.exec(e);return!!r&&(r[1]?t(r[1]):n)},Qr=e=>"position"===e||"percentage"===e,eo=e=>"image"===e||"url"===e,to=e=>"length"===e||"size"===e||"bg-size"===e,no=e=>"length"===e,ro=e=>"number"===e,oo=e=>"family-name"===e,io=e=>"number"===e||"weight"===e,ao=e=>"shadow"===e,so=((e,...t)=>{let n,r,o,i;const a=e=>{const t=r(e);if(t)return t;const i=((e,t)=>{const{parseClassName:n,getClassGroupId:r,getConflictingClassGroupIds:o,sortModifiers:i}=t,a=[],s=e.trim().split(ur);let l="";for(let e=s.length-1;e>=0;e-=1){const t=s[e],{isExternal:c,modifiers:d,hasImportantModifier:u,baseClassName:p,maybePostfixModifierPosition:h}=n(t);if(c){l=t+(l.length>0?" "+l:l);continue}let m=!!h,f=r(m?p.substring(0,h):p);if(!f){if(!m){l=t+(l.length>0?" "+l:l);continue}if(f=r(p),!f){l=t+(l.length>0?" "+l:l);continue}m=!1}const g=0===d.length?"":1===d.length?d[0]:i(d).join(":"),v=u?g+"!":g,w=v+f;if(a.indexOf(w)>-1)continue;a.push(w);const b=o(f,m);for(let e=0;e<b.length;++e){const t=b[e];a.push(v+t)}l=t+(l.length>0?" "+l:l)}return l})(e,n);return o(e,i),i};return i=s=>{const l=t.reduce((e,t)=>t(e),e());return n=(e=>({cache:ar(e.cacheSize),parseClassName:cr(e),sortModifiers:dr(e),...Jn(e)}))(l),r=n.cache.get,o=n.cache.set,i=a,a(s)},(...e)=>i(((...e)=>{let t,n,r=0,o="";for(;r<e.length;)(t=e[r++])&&(n=pr(t))&&(o&&(o+=" "),o+=n);return o})(...e))})(()=>{const e=mr("color"),t=mr("font"),n=mr("text"),r=mr("font-weight"),o=mr("tracking"),i=mr("leading"),a=mr("breakpoint"),s=mr("container"),l=mr("spacing"),c=mr("radius"),d=mr("shadow"),u=mr("inset-shadow"),p=mr("text-shadow"),h=mr("drop-shadow"),m=mr("blur"),f=mr("perspective"),g=mr("aspect"),v=mr("ease"),w=mr("animate"),b=()=>["center","top","bottom","left","right","top-left","left-top","top-right","right-top","bottom-right","right-bottom","bottom-left","left-bottom",Hr,Or],x=()=>[Hr,Or,l],y=()=>[_r,"full","auto",...x()],k=()=>[Sr,"none","subgrid",Hr,Or],_=()=>["auto",{span:["full",Sr,Hr,Or]},Sr,Hr,Or],N=()=>[Sr,"auto",Hr,Or],S=()=>["auto","min","max","fr",Hr,Or],C=()=>["auto",...x()],T=()=>[_r,"auto","full","dvw","dvh","lvw","lvh","svw","svh","min","max","fit",...x()],E=()=>[_r,"screen","full","dvw","lvw","svw","min","max","fit",...x()],z=()=>[_r,"screen","full","lh","dvh","lvh","svh","min","max","fit",...x()],A=()=>[e,Hr,Or],M=()=>["center","top","bottom","left","right","top-left","left-top","top-right","right-top","bottom-right","right-bottom","bottom-left","left-bottom",qr,Ir,{position:[Hr,Or]}],$=()=>["auto","cover","contain",Gr,Rr,{size:[Hr,Or]}],F=()=>[Cr,Br,Dr],R=()=>["","none","full",c,Hr,Or],O=()=>["",Nr,Br,Dr],D=()=>[Nr,Cr,qr,Ir],j=()=>["","none",m,Hr,Or],L=()=>["none",Nr,Hr,Or],P=()=>["none",Nr,Hr,Or],I=()=>[Nr,Hr,Or],W=()=>[_r,"full",...x()];return{cacheSize:500,theme:{animate:["spin","ping","pulse","bounce"],aspect:["video"],blur:[Tr],breakpoint:[Tr],color:[Er],container:[Tr],"drop-shadow":[Tr],ease:["in","out","in-out"],font:[Fr],"font-weight":["thin","extralight","light","normal","medium","semibold","bold","extrabold","black"],"inset-shadow":[Tr],leading:["none","tight","snug","normal","relaxed","loose"],perspective:["dramatic","near","normal","midrange","distant","none"],radius:[Tr],shadow:[Tr],spacing:["px",Nr],text:[Tr],"text-shadow":[Tr],tracking:["tighter","tight","normal","wide","wider","widest"]},classGroups:{aspect:[{aspect:["auto","square",_r,Or,Hr,g]}],container:["container"],columns:[{columns:[Nr,Or,Hr,s]}],"break-after":[{"break-after":["auto","avoid","all","avoid-page","page","left","right","column"]}],"break-before":[{"break-before":["auto","avoid","all","avoid-page","page","left","right","column"]}],"break-inside":[{"break-inside":["auto","avoid","avoid-page","avoid-column"]}],"box-decoration":[{"box-decoration":["slice","clone"]}],box:[{box:["border","content"]}],display:["block","inline-block","inline","flex","inline-flex","table","inline-table","table-caption","table-cell","table-column","table-column-group","table-footer-group","table-header-group","table-row-group","table-row","flow-root","grid","inline-grid","contents","list-item","hidden"],sr:["sr-only","not-sr-only"],float:[{float:["right","left","none","start","end"]}],clear:[{clear:["left","right","both","none","start","end"]}],isolation:["isolate","isolation-auto"],"object-fit":[{object:["contain","cover","fill","none","scale-down"]}],"object-position":[{object:b()}],overflow:[{overflow:["auto","hidden","clip","visible","scroll"]}],"overflow-x":[{"overflow-x":["auto","hidden","clip","visible","scroll"]}],"overflow-y":[{"overflow-y":["auto","hidden","clip","visible","scroll"]}],overscroll:[{overscroll:["auto","contain","none"]}],"overscroll-x":[{"overscroll-x":["auto","contain","none"]}],"overscroll-y":[{"overscroll-y":["auto","contain","none"]}],position:["static","fixed","absolute","relative","sticky"],inset:[{inset:y()}],"inset-x":[{"inset-x":y()}],"inset-y":[{"inset-y":y()}],start:[{"inset-s":y(),start:y()}],end:[{"inset-e":y(),end:y()}],"inset-bs":[{"inset-bs":y()}],"inset-be":[{"inset-be":y()}],top:[{top:y()}],right:[{right:y()}],bottom:[{bottom:y()}],left:[{left:y()}],visibility:["visible","invisible","collapse"],z:[{z:[Sr,"auto",Hr,Or]}],basis:[{basis:[_r,"full","auto",s,...x()]}],"flex-direction":[{flex:["row","row-reverse","col","col-reverse"]}],"flex-wrap":[{flex:["nowrap","wrap","wrap-reverse"]}],flex:[{flex:[Nr,_r,"auto","initial","none",Or]}],grow:[{grow:["",Nr,Hr,Or]}],shrink:[{shrink:["",Nr,Hr,Or]}],order:[{order:[Sr,"first","last","none",Hr,Or]}],"grid-cols":[{"grid-cols":k()}],"col-start-end":[{col:_()}],"col-start":[{"col-start":N()}],"col-end":[{"col-end":N()}],"grid-rows":[{"grid-rows":k()}],"row-start-end":[{row:_()}],"row-start":[{"row-start":N()}],"row-end":[{"row-end":N()}],"grid-flow":[{"grid-flow":["row","col","dense","row-dense","col-dense"]}],"auto-cols":[{"auto-cols":S()}],"auto-rows":[{"auto-rows":S()}],gap:[{gap:x()}],"gap-x":[{"gap-x":x()}],"gap-y":[{"gap-y":x()}],"justify-content":[{justify:["start","end","center","between","around","evenly","stretch","baseline","center-safe","end-safe","normal"]}],"justify-items":[{"justify-items":["start","end","center","stretch","center-safe","end-safe","normal"]}],"justify-self":[{"justify-self":["auto","start","end","center","stretch","center-safe","end-safe"]}],"align-content":[{content:["normal","start","end","center","between","around","evenly","stretch","baseline","center-safe","end-safe"]}],"align-items":[{items:["start","end","center","stretch","center-safe","end-safe",{baseline:["","last"]}]}],"align-self":[{self:["auto","start","end","center","stretch","center-safe","end-safe",{baseline:["","last"]}]}],"place-content":[{"place-content":["start","end","center","between","around","evenly","stretch","baseline","center-safe","end-safe"]}],"place-items":[{"place-items":["start","end","center","stretch","center-safe","end-safe","baseline"]}],"place-self":[{"place-self":["auto","start","end","center","stretch","center-safe","end-safe"]}],p:[{p:x()}],px:[{px:x()}],py:[{py:x()}],ps:[{ps:x()}],pe:[{pe:x()}],pbs:[{pbs:x()}],pbe:[{pbe:x()}],pt:[{pt:x()}],pr:[{pr:x()}],pb:[{pb:x()}],pl:[{pl:x()}],m:[{m:C()}],mx:[{mx:C()}],my:[{my:C()}],ms:[{ms:C()}],me:[{me:C()}],mbs:[{mbs:C()}],mbe:[{mbe:C()}],mt:[{mt:C()}],mr:[{mr:C()}],mb:[{mb:C()}],ml:[{ml:C()}],"space-x":[{"space-x":x()}],"space-x-reverse":["space-x-reverse"],"space-y":[{"space-y":x()}],"space-y-reverse":["space-y-reverse"],size:[{size:T()}],"inline-size":[{inline:["auto",...E()]}],"min-inline-size":[{"min-inline":["auto",...E()]}],"max-inline-size":[{"max-inline":["none",...E()]}],"block-size":[{block:["auto",...z()]}],"min-block-size":[{"min-block":["auto",...z()]}],"max-block-size":[{"max-block":["none",...z()]}],w:[{w:[s,"screen",...T()]}],"min-w":[{"min-w":[s,"screen","none",...T()]}],"max-w":[{"max-w":[s,"screen","none","prose",{screen:[a]},...T()]}],h:[{h:["screen","lh",...T()]}],"min-h":[{"min-h":["screen","lh","none",...T()]}],"max-h":[{"max-h":["screen","lh",...T()]}],"font-size":[{text:["base",n,Br,Dr]}],"font-smoothing":["antialiased","subpixel-antialiased"],"font-style":["italic","not-italic"],"font-weight":[{font:[r,Xr,Lr]}],"font-stretch":[{"font-stretch":["ultra-condensed","extra-condensed","condensed","semi-condensed","normal","semi-expanded","expanded","extra-expanded","ultra-expanded",Cr,Or]}],"font-family":[{font:[Vr,Pr,t]}],"font-features":[{"font-features":[Or]}],"fvn-normal":["normal-nums"],"fvn-ordinal":["ordinal"],"fvn-slashed-zero":["slashed-zero"],"fvn-figure":["lining-nums","oldstyle-nums"],"fvn-spacing":["proportional-nums","tabular-nums"],"fvn-fraction":["diagonal-fractions","stacked-fractions"],tracking:[{tracking:[o,Hr,Or]}],"line-clamp":[{"line-clamp":[Nr,"none",Hr,jr]}],leading:[{leading:[i,...x()]}],"list-image":[{"list-image":["none",Hr,Or]}],"list-style-position":[{list:["inside","outside"]}],"list-style-type":[{list:["disc","decimal","none",Hr,Or]}],"text-alignment":[{text:["left","center","right","justify","start","end"]}],"placeholder-color":[{placeholder:A()}],"text-color":[{text:A()}],"text-decoration":["underline","overline","line-through","no-underline"],"text-decoration-style":[{decoration:["solid","dashed","dotted","double","wavy"]}],"text-decoration-thickness":[{decoration:[Nr,"from-font","auto",Hr,Dr]}],"text-decoration-color":[{decoration:A()}],"underline-offset":[{"underline-offset":[Nr,"auto",Hr,Or]}],"text-transform":["uppercase","lowercase","capitalize","normal-case"],"text-overflow":["truncate","text-ellipsis","text-clip"],"text-wrap":[{text:["wrap","nowrap","balance","pretty"]}],indent:[{indent:x()}],"vertical-align":[{align:["baseline","top","middle","bottom","text-top","text-bottom","sub","super",Hr,Or]}],whitespace:[{whitespace:["normal","nowrap","pre","pre-line","pre-wrap","break-spaces"]}],break:[{break:["normal","words","all","keep"]}],wrap:[{wrap:["break-word","anywhere","normal"]}],hyphens:[{hyphens:["none","manual","auto"]}],content:[{content:["none",Hr,Or]}],"bg-attachment":[{bg:["fixed","local","scroll"]}],"bg-clip":[{"bg-clip":["border","padding","content","text"]}],"bg-origin":[{"bg-origin":["border","padding","content"]}],"bg-position":[{bg:M()}],"bg-repeat":[{bg:["no-repeat",{repeat:["","x","y","space","round"]}]}],"bg-size":[{bg:$()}],"bg-image":[{bg:["none",{linear:[{to:["t","tr","r","br","b","bl","l","tl"]},Sr,Hr,Or],radial:["",Hr,Or],conic:[Sr,Hr,Or]},Jr,Wr]}],"bg-color":[{bg:A()}],"gradient-from-pos":[{from:F()}],"gradient-via-pos":[{via:F()}],"gradient-to-pos":[{to:F()}],"gradient-from":[{from:A()}],"gradient-via":[{via:A()}],"gradient-to":[{to:A()}],rounded:[{rounded:R()}],"rounded-s":[{"rounded-s":R()}],"rounded-e":[{"rounded-e":R()}],"rounded-t":[{"rounded-t":R()}],"rounded-r":[{"rounded-r":R()}],"rounded-b":[{"rounded-b":R()}],"rounded-l":[{"rounded-l":R()}],"rounded-ss":[{"rounded-ss":R()}],"rounded-se":[{"rounded-se":R()}],"rounded-ee":[{"rounded-ee":R()}],"rounded-es":[{"rounded-es":R()}],"rounded-tl":[{"rounded-tl":R()}],"rounded-tr":[{"rounded-tr":R()}],"rounded-br":[{"rounded-br":R()}],"rounded-bl":[{"rounded-bl":R()}],"border-w":[{border:O()}],"border-w-x":[{"border-x":O()}],"border-w-y":[{"border-y":O()}],"border-w-s":[{"border-s":O()}],"border-w-e":[{"border-e":O()}],"border-w-bs":[{"border-bs":O()}],"border-w-be":[{"border-be":O()}],"border-w-t":[{"border-t":O()}],"border-w-r":[{"border-r":O()}],"border-w-b":[{"border-b":O()}],"border-w-l":[{"border-l":O()}],"divide-x":[{"divide-x":O()}],"divide-x-reverse":["divide-x-reverse"],"divide-y":[{"divide-y":O()}],"divide-y-reverse":["divide-y-reverse"],"border-style":[{border:["solid","dashed","dotted","double","hidden","none"]}],"divide-style":[{divide:["solid","dashed","dotted","double","hidden","none"]}],"border-color":[{border:A()}],"border-color-x":[{"border-x":A()}],"border-color-y":[{"border-y":A()}],"border-color-s":[{"border-s":A()}],"border-color-e":[{"border-e":A()}],"border-color-bs":[{"border-bs":A()}],"border-color-be":[{"border-be":A()}],"border-color-t":[{"border-t":A()}],"border-color-r":[{"border-r":A()}],"border-color-b":[{"border-b":A()}],"border-color-l":[{"border-l":A()}],"divide-color":[{divide:A()}],"outline-style":[{outline:["solid","dashed","dotted","double","none","hidden"]}],"outline-offset":[{"outline-offset":[Nr,Hr,Or]}],"outline-w":[{outline:["",Nr,Br,Dr]}],"outline-color":[{outline:A()}],shadow:[{shadow:["","none",d,Yr,Ur]}],"shadow-color":[{shadow:A()}],"inset-shadow":[{"inset-shadow":["none",u,Yr,Ur]}],"inset-shadow-color":[{"inset-shadow":A()}],"ring-w":[{ring:O()}],"ring-w-inset":["ring-inset"],"ring-color":[{ring:A()}],"ring-offset-w":[{"ring-offset":[Nr,Dr]}],"ring-offset-color":[{"ring-offset":A()}],"inset-ring-w":[{"inset-ring":O()}],"inset-ring-color":[{"inset-ring":A()}],"text-shadow":[{"text-shadow":["none",p,Yr,Ur]}],"text-shadow-color":[{"text-shadow":A()}],opacity:[{opacity:[Nr,Hr,Or]}],"mix-blend":[{"mix-blend":["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity","plus-darker","plus-lighter"]}],"bg-blend":[{"bg-blend":["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity"]}],"mask-clip":[{"mask-clip":["border","padding","content","fill","stroke","view"]},"mask-no-clip"],"mask-composite":[{mask:["add","subtract","intersect","exclude"]}],"mask-image-linear-pos":[{"mask-linear":[Nr]}],"mask-image-linear-from-pos":[{"mask-linear-from":D()}],"mask-image-linear-to-pos":[{"mask-linear-to":D()}],"mask-image-linear-from-color":[{"mask-linear-from":A()}],"mask-image-linear-to-color":[{"mask-linear-to":A()}],"mask-image-t-from-pos":[{"mask-t-from":D()}],"mask-image-t-to-pos":[{"mask-t-to":D()}],"mask-image-t-from-color":[{"mask-t-from":A()}],"mask-image-t-to-color":[{"mask-t-to":A()}],"mask-image-r-from-pos":[{"mask-r-from":D()}],"mask-image-r-to-pos":[{"mask-r-to":D()}],"mask-image-r-from-color":[{"mask-r-from":A()}],"mask-image-r-to-color":[{"mask-r-to":A()}],"mask-image-b-from-pos":[{"mask-b-from":D()}],"mask-image-b-to-pos":[{"mask-b-to":D()}],"mask-image-b-from-color":[{"mask-b-from":A()}],"mask-image-b-to-color":[{"mask-b-to":A()}],"mask-image-l-from-pos":[{"mask-l-from":D()}],"mask-image-l-to-pos":[{"mask-l-to":D()}],"mask-image-l-from-color":[{"mask-l-from":A()}],"mask-image-l-to-color":[{"mask-l-to":A()}],"mask-image-x-from-pos":[{"mask-x-from":D()}],"mask-image-x-to-pos":[{"mask-x-to":D()}],"mask-image-x-from-color":[{"mask-x-from":A()}],"mask-image-x-to-color":[{"mask-x-to":A()}],"mask-image-y-from-pos":[{"mask-y-from":D()}],"mask-image-y-to-pos":[{"mask-y-to":D()}],"mask-image-y-from-color":[{"mask-y-from":A()}],"mask-image-y-to-color":[{"mask-y-to":A()}],"mask-image-radial":[{"mask-radial":[Hr,Or]}],"mask-image-radial-from-pos":[{"mask-radial-from":D()}],"mask-image-radial-to-pos":[{"mask-radial-to":D()}],"mask-image-radial-from-color":[{"mask-radial-from":A()}],"mask-image-radial-to-color":[{"mask-radial-to":A()}],"mask-image-radial-shape":[{"mask-radial":["circle","ellipse"]}],"mask-image-radial-size":[{"mask-radial":[{closest:["side","corner"],farthest:["side","corner"]}]}],"mask-image-radial-pos":[{"mask-radial-at":["center","top","bottom","left","right","top-left","left-top","top-right","right-top","bottom-right","right-bottom","bottom-left","left-bottom"]}],"mask-image-conic-pos":[{"mask-conic":[Nr]}],"mask-image-conic-from-pos":[{"mask-conic-from":D()}],"mask-image-conic-to-pos":[{"mask-conic-to":D()}],"mask-image-conic-from-color":[{"mask-conic-from":A()}],"mask-image-conic-to-color":[{"mask-conic-to":A()}],"mask-mode":[{mask:["alpha","luminance","match"]}],"mask-origin":[{"mask-origin":["border","padding","content","fill","stroke","view"]}],"mask-position":[{mask:M()}],"mask-repeat":[{mask:["no-repeat",{repeat:["","x","y","space","round"]}]}],"mask-size":[{mask:$()}],"mask-type":[{"mask-type":["alpha","luminance"]}],"mask-image":[{mask:["none",Hr,Or]}],filter:[{filter:["","none",Hr,Or]}],blur:[{blur:j()}],brightness:[{brightness:[Nr,Hr,Or]}],contrast:[{contrast:[Nr,Hr,Or]}],"drop-shadow":[{"drop-shadow":["","none",h,Yr,Ur]}],"drop-shadow-color":[{"drop-shadow":A()}],grayscale:[{grayscale:["",Nr,Hr,Or]}],"hue-rotate":[{"hue-rotate":[Nr,Hr,Or]}],invert:[{invert:["",Nr,Hr,Or]}],saturate:[{saturate:[Nr,Hr,Or]}],sepia:[{sepia:["",Nr,Hr,Or]}],"backdrop-filter":[{"backdrop-filter":["","none",Hr,Or]}],"backdrop-blur":[{"backdrop-blur":j()}],"backdrop-brightness":[{"backdrop-brightness":[Nr,Hr,Or]}],"backdrop-contrast":[{"backdrop-contrast":[Nr,Hr,Or]}],"backdrop-grayscale":[{"backdrop-grayscale":["",Nr,Hr,Or]}],"backdrop-hue-rotate":[{"backdrop-hue-rotate":[Nr,Hr,Or]}],"backdrop-invert":[{"backdrop-invert":["",Nr,Hr,Or]}],"backdrop-opacity":[{"backdrop-opacity":[Nr,Hr,Or]}],"backdrop-saturate":[{"backdrop-saturate":[Nr,Hr,Or]}],"backdrop-sepia":[{"backdrop-sepia":["",Nr,Hr,Or]}],"border-collapse":[{border:["collapse","separate"]}],"border-spacing":[{"border-spacing":x()}],"border-spacing-x":[{"border-spacing-x":x()}],"border-spacing-y":[{"border-spacing-y":x()}],"table-layout":[{table:["auto","fixed"]}],caption:[{caption:["top","bottom"]}],transition:[{transition:["","all","colors","opacity","shadow","transform","none",Hr,Or]}],"transition-behavior":[{transition:["normal","discrete"]}],duration:[{duration:[Nr,"initial",Hr,Or]}],ease:[{ease:["linear","initial",v,Hr,Or]}],delay:[{delay:[Nr,Hr,Or]}],animate:[{animate:["none",w,Hr,Or]}],backface:[{backface:["hidden","visible"]}],perspective:[{perspective:[f,Hr,Or]}],"perspective-origin":[{"perspective-origin":b()}],rotate:[{rotate:L()}],"rotate-x":[{"rotate-x":L()}],"rotate-y":[{"rotate-y":L()}],"rotate-z":[{"rotate-z":L()}],scale:[{scale:P()}],"scale-x":[{"scale-x":P()}],"scale-y":[{"scale-y":P()}],"scale-z":[{"scale-z":P()}],"scale-3d":["scale-3d"],skew:[{skew:I()}],"skew-x":[{"skew-x":I()}],"skew-y":[{"skew-y":I()}],transform:[{transform:[Hr,Or,"","none","gpu","cpu"]}],"transform-origin":[{origin:b()}],"transform-style":[{transform:["3d","flat"]}],translate:[{translate:W()}],"translate-x":[{"translate-x":W()}],"translate-y":[{"translate-y":W()}],"translate-z":[{"translate-z":W()}],"translate-none":["translate-none"],accent:[{accent:A()}],appearance:[{appearance:["none","auto"]}],"caret-color":[{caret:A()}],"color-scheme":[{scheme:["normal","dark","light","light-dark","only-dark","only-light"]}],cursor:[{cursor:["auto","default","pointer","wait","text","move","help","not-allowed","none","context-menu","progress","cell","crosshair","vertical-text","alias","copy","no-drop","grab","grabbing","all-scroll","col-resize","row-resize","n-resize","e-resize","s-resize","w-resize","ne-resize","nw-resize","se-resize","sw-resize","ew-resize","ns-resize","nesw-resize","nwse-resize","zoom-in","zoom-out",Hr,Or]}],"field-sizing":[{"field-sizing":["fixed","content"]}],"pointer-events":[{"pointer-events":["auto","none"]}],resize:[{resize:["none","","y","x"]}],"scroll-behavior":[{scroll:["auto","smooth"]}],"scroll-m":[{"scroll-m":x()}],"scroll-mx":[{"scroll-mx":x()}],"scroll-my":[{"scroll-my":x()}],"scroll-ms":[{"scroll-ms":x()}],"scroll-me":[{"scroll-me":x()}],"scroll-mbs":[{"scroll-mbs":x()}],"scroll-mbe":[{"scroll-mbe":x()}],"scroll-mt":[{"scroll-mt":x()}],"scroll-mr":[{"scroll-mr":x()}],"scroll-mb":[{"scroll-mb":x()}],"scroll-ml":[{"scroll-ml":x()}],"scroll-p":[{"scroll-p":x()}],"scroll-px":[{"scroll-px":x()}],"scroll-py":[{"scroll-py":x()}],"scroll-ps":[{"scroll-ps":x()}],"scroll-pe":[{"scroll-pe":x()}],"scroll-pbs":[{"scroll-pbs":x()}],"scroll-pbe":[{"scroll-pbe":x()}],"scroll-pt":[{"scroll-pt":x()}],"scroll-pr":[{"scroll-pr":x()}],"scroll-pb":[{"scroll-pb":x()}],"scroll-pl":[{"scroll-pl":x()}],"snap-align":[{snap:["start","end","center","align-none"]}],"snap-stop":[{snap:["normal","always"]}],"snap-type":[{snap:["none","x","y","both"]}],"snap-strictness":[{snap:["mandatory","proximity"]}],touch:[{touch:["auto","none","manipulation"]}],"touch-x":[{"touch-pan":["x","left","right"]}],"touch-y":[{"touch-pan":["y","up","down"]}],"touch-pz":["touch-pinch-zoom"],select:[{select:["none","text","all","auto"]}],"will-change":[{"will-change":["auto","scroll","contents","transform",Hr,Or]}],fill:[{fill:["none",...A()]}],"stroke-w":[{stroke:[Nr,Br,Dr,jr]}],stroke:[{stroke:["none",...A()]}],"forced-color-adjust":[{"forced-color-adjust":["auto","none"]}]},conflictingClassGroups:{overflow:["overflow-x","overflow-y"],overscroll:["overscroll-x","overscroll-y"],inset:["inset-x","inset-y","inset-bs","inset-be","start","end","top","right","bottom","left"],"inset-x":["right","left"],"inset-y":["top","bottom"],flex:["basis","grow","shrink"],gap:["gap-x","gap-y"],p:["px","py","ps","pe","pbs","pbe","pt","pr","pb","pl"],px:["pr","pl"],py:["pt","pb"],m:["mx","my","ms","me","mbs","mbe","mt","mr","mb","ml"],mx:["mr","ml"],my:["mt","mb"],size:["w","h"],"font-size":["leading"],"fvn-normal":["fvn-ordinal","fvn-slashed-zero","fvn-figure","fvn-spacing","fvn-fraction"],"fvn-ordinal":["fvn-normal"],"fvn-slashed-zero":["fvn-normal"],"fvn-figure":["fvn-normal"],"fvn-spacing":["fvn-normal"],"fvn-fraction":["fvn-normal"],"line-clamp":["display","overflow"],rounded:["rounded-s","rounded-e","rounded-t","rounded-r","rounded-b","rounded-l","rounded-ss","rounded-se","rounded-ee","rounded-es","rounded-tl","rounded-tr","rounded-br","rounded-bl"],"rounded-s":["rounded-ss","rounded-es"],"rounded-e":["rounded-se","rounded-ee"],"rounded-t":["rounded-tl","rounded-tr"],"rounded-r":["rounded-tr","rounded-br"],"rounded-b":["rounded-br","rounded-bl"],"rounded-l":["rounded-tl","rounded-bl"],"border-spacing":["border-spacing-x","border-spacing-y"],"border-w":["border-w-x","border-w-y","border-w-s","border-w-e","border-w-bs","border-w-be","border-w-t","border-w-r","border-w-b","border-w-l"],"border-w-x":["border-w-r","border-w-l"],"border-w-y":["border-w-t","border-w-b"],"border-color":["border-color-x","border-color-y","border-color-s","border-color-e","border-color-bs","border-color-be","border-color-t","border-color-r","border-color-b","border-color-l"],"border-color-x":["border-color-r","border-color-l"],"border-color-y":["border-color-t","border-color-b"],translate:["translate-x","translate-y","translate-none"],"translate-none":["translate","translate-x","translate-y","translate-z"],"scroll-m":["scroll-mx","scroll-my","scroll-ms","scroll-me","scroll-mbs","scroll-mbe","scroll-mt","scroll-mr","scroll-mb","scroll-ml"],"scroll-mx":["scroll-mr","scroll-ml"],"scroll-my":["scroll-mt","scroll-mb"],"scroll-p":["scroll-px","scroll-py","scroll-ps","scroll-pe","scroll-pbs","scroll-pbe","scroll-pt","scroll-pr","scroll-pb","scroll-pl"],"scroll-px":["scroll-pr","scroll-pl"],"scroll-py":["scroll-pt","scroll-pb"],touch:["touch-x","touch-y","touch-pz"],"touch-x":["touch"],"touch-y":["touch"],"touch-pz":["touch"]},conflictingClassGroupModifiers:{"font-size":["leading"]},orderSensitiveModifiers:["*","**","after","backdrop","before","details-content","file","first-letter","first-line","marker","placeholder","selection"]}}),lo=(...e)=>so(function(){for(var e,t,n=0,r="",o=arguments.length;n<o;n++)(e=arguments[n])&&(t=Bn(e))&&(r&&(r+=" "),r+=t);return r}(e));"undefined"!=typeof navigator&&navigator.userAgent.includes("Firefox");var co=(e,t)=>{let n=0;return r=>{const o=Date.now();if(o-n>=t)return n=o,e(r)}},uo=e=>{if(!ie)return null;try{const t=localStorage.getItem(e);return t?JSON.parse(t):null}catch{return null}},po=(e,t)=>{if(ie)try{window.localStorage.setItem(e,JSON.stringify(t))}catch{}},ho=e=>{if(ie)try{window.localStorage.removeItem(e)}catch{}},mo=e=>{if(!e)return{name:"Unknown",wrappers:[],wrapperTypes:[]};const{tag:t,type:n,elementType:r}=e;let o=J(n);const i=[],a=[];if(q(e)||15===t||14===t||(null==n?void 0:n.$$typeof)===Symbol.for("react.memo")||(null==r?void 0:r.$$typeof)===Symbol.for("react.memo")){const t=q(e);a.push({type:"memo",title:t?"This component has been auto-memoized by the React Compiler.":"Memoized component that skips re-renders if props are the same",compiler:t})}if(24===t&&a.push({type:"lazy",title:"Lazily loaded component that supports code splitting"}),13===t&&a.push({type:"suspense",title:"Component that can suspend while content is loading"}),12===t&&a.push({type:"profiler",title:"Component that measures rendering performance"}),"string"==typeof o){const e=/^(\w+)\((.*)\)$/;let t=o;for(;e.test(t);){const n=t.match(e);if(!(null==n?void 0:n[1])||!(null==n?void 0:n[2]))break;i.unshift(n[1]),t=n[2]}o=t}return{name:o||"Unknown",wrappers:i,wrapperTypes:a}},fo=e=>"number"==typeof e&&Number.isFinite(e)&&e>=0,go=e=>Boolean(e)&&"object"==typeof e&&!Array.isArray(e),vo=()=>{const e=Wu.options.value.safeArea;if(fo(e))return{top:e,right:e,bottom:e,left:e};if(go(e)){const t=e.top,n=e.right,r=e.bottom,o=e.left;return{top:fo(t)?t:Dn,right:fo(n)?n:Dn,bottom:fo(r)?r:Dn,left:fo(o)?o:Dn}}return{top:Dn,right:Dn,bottom:Dn,left:Dn}},wo=_t(!1),bo=_t(null),xo=()=>({corner:"bottom-right",dimensions:{isFullWidth:!1,isFullHeight:!1,width:jn,height:Ln,position:{x:Dn,y:Dn}},lastDimensions:{isFullWidth:!1,isFullHeight:!1,width:jn,height:Ln,position:{x:Dn,y:Dn}},componentsTree:{width:In}}),yo=_t((()=>{var e,t,n,r,o;const i=xo(),a=uo(Wn);return a?{corner:null!=(e=a.corner)?e:i.corner,dimensions:null!=(t=a.dimensions)?t:i.dimensions,lastDimensions:null!=(r=null!=(n=a.lastDimensions)?n:a.dimensions)?r:i.lastDimensions,componentsTree:null!=(o=a.componentsTree)?o:i.componentsTree}:(po(Wn,{corner:i.corner,dimensions:i.dimensions,lastDimensions:i.lastDimensions,componentsTree:i.componentsTree}),i)})()),ko=()=>{if(!ie)return;const{dimensions:e}=yo.value,{width:t,height:n,position:r}=e,o=vo();yo.value={...yo.value,dimensions:{isFullWidth:t>=window.innerWidth-o.left-o.right,isFullHeight:n>=window.innerHeight-o.top-o.bottom,width:t,height:n,position:r}}},_o=_t({view:"none"}),No=uo(Un),So=_t(null!=No?No:null);function Co(){return!1}function To(e){function t(t){return this.shouldComponentUpdate=Co,pe(e,t)}return t.displayName=`Memo(${e.displayName||e.name})`,t.prototype.isReactComponent=!0,t._forwarded=!0,t}var Eo=new WeakMap,zo={activeFlashes:new Map,create(e){const t=e.querySelector(".react-scan-flash-overlay"),n=t instanceof HTMLElement?t:(()=>{const t=document.createElement("div");t.className="react-scan-flash-overlay",e.appendChild(t);const n=((e,t)=>{const n=t.bind(null,e);return document.addEventListener("scroll",n,{passive:!0,capture:!0}),()=>{document.removeEventListener("scroll",n,{capture:!0})}})(e,()=>{e.querySelector(".react-scan-flash-overlay")&&this.create(e)});return this.activeFlashes.set(e,{element:e,overlay:t,scrollCleanup:n}),t})(),r=Eo.get(n);r&&(clearTimeout(r),Eo.delete(n)),requestAnimationFrame(()=>{n.style.transition="none",n.style.opacity="0.9";const t=setTimeout(()=>{n.style.transition="opacity 150ms ease-out",n.style.opacity="0";const t=setTimeout(()=>{n.parentNode&&n.parentNode.removeChild(n);const t=this.activeFlashes.get(e);(null==t?void 0:t.scrollCleanup)&&t.scrollCleanup(),this.activeFlashes.delete(e),Eo.delete(n)},150);Eo.set(n,t)},300);Eo.set(n,t)})},cleanup(e){const t=this.activeFlashes.get(e);if(t){const n=Eo.get(t.overlay);n&&(clearTimeout(n),Eo.delete(t.overlay)),t.overlay.parentNode&&t.overlay.parentNode.removeChild(t.overlay),t.scrollCleanup&&t.scrollCleanup(),this.activeFlashes.delete(e)}},cleanupAll(){for(const[,e]of this.activeFlashes)this.cleanup(e.element)}},Ao={updates:[],currentFiber:null,totalUpdates:0,windowOffset:0,currentIndex:0,isViewingHistory:!1,latestFiber:null,isVisible:!1,playbackSpeed:1},Mo=_t(Ao),$o=_t(0),Fo=[],Ro=null,Oo=(e,t)=>{if(Fo.push({update:e,fiber:t}),!Ro){const e=()=>{(()=>{if(0===Fo.length)return;const e=[...Fo],{updates:t,totalUpdates:n,currentIndex:r,isViewingHistory:o}=Mo.value,i=[...t];let a=n;for(const{update:t}of e)i.length>=1e3&&i.shift(),i.push(t),a++;const s=Math.max(0,a-1e3);let l;l=o?r===n-1?i.length-1:0===r?0:0===s?r:r-1:i.length-1;const c=e[e.length-1];Mo.value={...Mo.value,latestFiber:c.fiber,updates:i,totalUpdates:a,windowOffset:s,currentIndex:l,isViewingHistory:o},Fo=Fo.slice(e.length)})(),Ro=null,Fo.length>0&&(Ro=setTimeout(e,96))};Ro=setTimeout(e,96)}},Do=()=>{Ro&&(clearTimeout(Ro),Ro=null),Fo=[],Mo.value=Ao},jo=_t({query:"",matches:[],currentMatchIndex:-1}),Lo=_t(!1),Po=(e,t=0,n=null)=>e.reduce((e,r,o)=>{var i,a;const s=r.element?(e=>{var t;const n=[];let r=e;for(;r;){const e=r.elementType,o="function"==typeof e?e.displayName||e.name:"string"==typeof e?e:"Unknown",i=void 0!==r.index?`[${r.index}]`:"";n.unshift(`${o}${i}`),r=null!=(t=r.return)?t:null}return n.join("::")})(r.fiber):`${n}-${o}`,l=(null==(i=r.fiber)?void 0:i.type)?ma(r.fiber):void 0,c={...r,depth:t,nodeId:s,parentId:n,fiber:r.fiber,renderData:l};return e.push(c),(null==(a=r.children)?void 0:a.length)&&e.push(...Po(r.children,t+1,s)),e},[]),Io=["memo","forwardRef","lazy","suspense"],Wo=e=>{const t=e.match(/\[(.*?)\]/);if(!t)return null;const n=[],r=t[1].split(",");for(const e of r){const t=e.trim().toLowerCase();t&&n.push(t)}return n},Uo=(e,t)=>{if(0===e.length)return!0;if(!t.length)return!1;for(const n of e){let e=!1;for(const r of t)if(r.type.toLowerCase().includes(n)){e=!0;break}if(!e)return!1}return!0},Ho=e=>e>0?e<.1-Number.EPSILON?"< 0.1":e<1e3?Number(e.toFixed(1)).toString():`${(e/1e3).toFixed(1)}k`:"0",Bo=({node:e,nodeIndex:t,hasChildren:n,isCollapsed:r,handleTreeNodeClick:o,handleTreeNodeToggle:i,searchValue:a})=>{var s,l,c;const d=Xe(null),u=Xe(null!=(l=null==(s=e.renderData)?void 0:s.renderCount)?l:0),{highlightedText:p,typeHighlight:h}=((e,t)=>Ke(()=>{const{query:n,matches:r}=t,o=r.some(t=>t.nodeId===e.nodeId),i=Wo(n)||[],a=n?n.replace(/\[.*?\]/,"").trim():"";if(!n||!o)return{highlightedText:Rn("span",{className:"truncate",children:e.label}),typeHighlight:!1};let s=!0;if(i.length>0)if(e.fiber){const{wrapperTypes:t}=mo(e.fiber);s=Uo(i,t)}else s=!1;let l=Rn("span",{className:"truncate",children:e.label});if(a)try{if(a.startsWith("/")&&a.endsWith("/")){const t=a.slice(1,-1),n=new RegExp(`(${t})`,"i"),r=e.label.split(n);l=Rn("span",{className:"tree-node-search-highlight",children:r.map((t,o)=>n.test(t)?Rn("span",{className:lo("regex",{start:n.test(t)&&0===o,middle:n.test(t)&&o%2==1,end:n.test(t)&&o===r.length-1,"!ml-0":1===o}),children:t},`${e.nodeId}-${t}`):t)})}else{const t=e.label.toLowerCase(),n=a.toLowerCase(),r=t.indexOf(n);r>=0&&(l=Rn("span",{className:"tree-node-search-highlight",children:[e.label.slice(0,r),Rn("span",{className:"single",children:e.label.slice(r,r+a.length)}),e.label.slice(r+a.length)]}))}}catch{}return{highlightedText:l,typeHighlight:s&&i.length>0}},[e.label,e.nodeId,e.fiber,t]))(e,a);Je(()=>{var t;const n=null==(t=e.renderData)?void 0:t.renderCount,r=d.current;r&&u.current&&n&&u.current!==n&&(r.classList.remove("count-flash"),r.offsetWidth,r.classList.add("count-flash"),u.current=n)},[null==(c=e.renderData)?void 0:c.renderCount]);const m=Ke(()=>{if(!e.renderData)return null;const{selfTime:t,totalTime:n,renderCount:r}=e.renderData;return r?Rn("span",{className:lo("flex items-center gap-x-0.5 ml-1.5","text-[10px] text-neutral-400"),children:Rn("span",{ref:d,title:`Self time: ${Ho(t)}ms\nTotal time: ${Ho(n)}ms`,className:"count-badge",children:["×",r]})}):null},[e.renderData]),f=Ke(()=>{if(!e.fiber)return null;const{wrapperTypes:t}=mo(e.fiber),n=t[0];return Rn("span",{className:lo("flex items-center gap-x-1","text-[10px] text-neutral-400 tracking-wide","overflow-hidden"),children:[n&&Rn(me,{children:[Rn("span",{title:null==n?void 0:n.title,className:lo("rounded py-[1px] px-1","bg-neutral-700 text-neutral-300","truncate","memo"===n.type&&"bg-[#8e61e3] text-white",h&&"bg-yellow-300 text-black"),children:n.type},n.type),n.compiler&&Rn("span",{className:"text-yellow-300 ml-1",children:"✨"})]}),t.length>1&&`×${t.length}`,m]})},[e.fiber,h,m]);return Rn("button",{type:"button",title:e.title,"data-index":t,className:lo("flex items-center gap-x-1","pl-1 pr-2","w-full h-7","text-left","rounded","cursor-pointer select-none"),onClick:o,children:[Rn("button",{type:"button","data-index":t,onClick:i,className:lo("w-6 h-6 flex items-center justify-center","text-left"),children:n&&Rn(On,{name:"icon-chevron-right",size:12,className:lo("transition-transform",!r&&"rotate-90")})}),p,f]})},Vo=()=>{const e=Xe(null),t=Xe(null),n=Xe(null),r=Xe(null),o=Xe(null),i=Xe(0),a=Xe(!1),s=Xe(!1),l=Xe(null),[c,d]=Ge([]),[u,p]=Ge(new Set),[h,m]=Ge(void 0),[f,g]=Ge(jo.value),v=Ke(()=>{const e=[],t=c,n=new Map(t.map(e=>[e.nodeId,e]));for(const r of t){let t=!0,o=r;for(;o.parentId;){const e=n.get(o.parentId);if(!e)break;if(u.has(e.nodeId)){t=!1;break}o=e}t&&e.push(r)}return e},[u,c]),w=28,{virtualItems:b,totalSize:x}=(e=>{const{count:t,getScrollElement:n,estimateSize:r,overscan:o=5}=e,[i,a]=Ge(0),[s,l]=Ge(0),c=Xe(),d=Xe(null),u=Xe(null),p=r(),h=Ze(e=>{var t,n;if(!d.current)return;const r=null!=(n=null==(t=null==e?void 0:e[0])?void 0:t.contentRect.height)?n:d.current.getBoundingClientRect().height;l(r)},[]),m=Ze(()=>{null!==u.current&&cancelAnimationFrame(u.current),u.current=requestAnimationFrame(()=>{h(),u.current=null})},[h]);Je(()=>{const e=n();if(!e)return;d.current=e;const t=()=>{d.current&&a(d.current.scrollTop)};h(),c.current||(c.current=new ResizeObserver(()=>{m()})),c.current.observe(e),e.addEventListener("scroll",t,{passive:!0});const r=new MutationObserver(m);return r.observe(e,{attributes:!0,childList:!0,subtree:!0}),()=>{e.removeEventListener("scroll",t),c.current&&c.current.disconnect(),r.disconnect(),null!==u.current&&cancelAnimationFrame(u.current)}},[n,h,m]);const f=Ke(()=>{const e=Math.floor(i/p),n=Math.ceil(s/p);return{start:Math.max(0,e-o),end:Math.min(t,e+n+o)}},[i,p,s,t,o]);return{virtualItems:Ke(()=>{const e=[];for(let t=f.start;t<f.end;t++)e.push({key:t,index:t,start:t*p});return e},[f,p]),totalSize:t*p,scrollTop:i,containerHeight:s}})({count:v.length,getScrollElement:()=>e.current,estimateSize:()=>w,overscan:5}),y=Ze(t=>{var n;a.current=!0,null==(n=r.current)||n.blur(),Lo.value=!0;const{parentCompositeFiber:o}=yi(t);if(!o)return;Iu.inspectState.value={kind:"focused",focusedDomElement:t,fiber:o};const i=v.findIndex(e=>e.element===t);if(-1!==i){m(i);const t=i*w,n=e.current;if(n){const e=n.clientHeight,r=n.scrollTop;(t<r||t+w>r+e)&&n.scrollTo({top:Math.max(0,t-e/2),behavior:"instant"})}}},[v]),k=Ze(e=>{const t=e.currentTarget,n=Number(t.dataset.index);if(Number.isNaN(n))return;const r=v[n].element;r&&y(r)},[v,y]),_=Ze(e=>{p(t=>{const n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},[]),N=Ze(e=>{e.stopPropagation();const t=e.target,n=Number(t.dataset.index);if(Number.isNaN(n))return;const r=v[n].nodeId;_(r)},[v,_]),S=Ze(t=>{var r,o,i,a,s;null==(r=n.current)||r.classList.remove("!border-red-500");const l=[];if(!t)return void(jo.value={query:t,matches:l,currentMatchIndex:-1});if(t.includes("[")&&!t.includes("]")&&t.length>t.indexOf("[")+1)return void(null==(o=n.current)||o.classList.add("!border-red-500"));const d=Wo(t)||[];if(t.includes("[")&&!(e=>{if(0===e.length)return!1;for(const t of e){let e=!1;for(const n of Io)if(n.toLowerCase().includes(t)){e=!0;break}if(!e)return!1}return!0})(d))return void(null==(i=n.current)||i.classList.add("!border-red-500"));const u=t.replace(/\[.*?\]/,"").trim(),p=/^\/.*\/$/.test(u);let h=e=>!1;if(u.startsWith("/")&&!p&&u.length>1)null==(a=n.current)||a.classList.add("!border-red-500");else{if(p)try{const e=u.slice(1,-1),t=new RegExp(e,"i");h=e=>t.test(e)}catch{return void(null==(s=n.current)||s.classList.add("!border-red-500"))}else if(u){const e=u.toLowerCase();h=t=>t.toLowerCase().includes(e)}for(const e of c){let t=!0;if(u&&(t=h(e.label)),t&&d.length>0)if(e.fiber){const{wrapperTypes:n}=mo(e.fiber);t=Uo(d,n)}else t=!1;t&&l.push(e)}if(jo.value={query:t,matches:l,currentMatchIndex:l.length>0?0:-1},l.length>0){const t=l[0],n=v.findIndex(e=>e.nodeId===t.nodeId);if(-1!==n){const t=n*w,r=e.current;if(r){const e=r.clientHeight;r.scrollTo({top:Math.max(0,t-e/2),behavior:"instant"})}}}}},[c,v]),C=Ze(e=>{const t=e.currentTarget;t&&S(t.value)},[S]),T=Ze(t=>{const{matches:n,currentMatchIndex:r}=jo.value;if(0===n.length)return;const o="next"===t?(r+1)%n.length:(r-1+n.length)%n.length;jo.value={...jo.value,currentMatchIndex:o};const i=n[o],a=v.findIndex(e=>e.nodeId===i.nodeId);if(-1!==a){m(a);const t=a*w,n=e.current;if(n){const e=n.clientHeight;n.scrollTo({top:Math.max(0,t-e/2),behavior:"instant"})}}},[v]),E=Ze(n=>{if(t.current&&(t.current.style.width=`${n}px`),e.current){e.current.style.width=`${n}px`;const t=((e,t)=>{if(t<=0)return 24;const n=Math.max(0,e-In);if(n<24)return 0;const r=Math.min(.3*n,24*t)/t;return Math.max(0,Math.min(24,r))})(n,i.current);e.current.style.setProperty("--indentation-size",`${t}px`)}},[]),z=Ze(e=>{if(!l.current)return;const t=yo.value.dimensions.width,n=Math.floor(t-120);l.current.classList.remove("cursor-ew-resize","cursor-w-resize","cursor-e-resize"),e<=In?l.current.classList.add("cursor-w-resize"):e>=n?l.current.classList.add("cursor-e-resize"):l.current.classList.add("cursor-ew-resize")},[]),A=Ze(t=>{if(t.preventDefault(),t.stopPropagation(),!e.current)return;e.current.style.setProperty("pointer-events","none"),s.current=!0;const n=t.clientX,r=e.current.offsetWidth,o=yo.value.dimensions.width,i=Math.floor(o-120);z(r);const a=e=>{const t=n-e.clientX,o=r+t;z(o);const a=Math.min(i,Math.max(In,o));E(a)},l=()=>{e.current&&(e.current.style.removeProperty("pointer-events"),document.removeEventListener("pointermove",a),document.removeEventListener("pointerup",l),yo.value={...yo.value,componentsTree:{...yo.value.componentsTree,width:e.current.offsetWidth}},po(Wn,yo.value),s.current=!1)};document.addEventListener("pointermove",a),document.addEventListener("pointerup",l)},[E,z]);Je(()=>{if(!e.current)return;const t=e.current.offsetWidth;return z(t),yo.subscribe(()=>{e.current&&z(e.current.offsetWidth)})},[z]);const M=Ze(()=>{a.current=!1},[]);return Je(()=>{let t=!0;const n=()=>{const n=o.current;if(!n)return;const r=(e=>{const t=new Map,n=[];for(const{element:n,name:r,fiber:o}of e){if(!n)continue;let e=r;const{name:i,wrappers:a}=mo(o);i&&(e=a.length>0?`${a.join("(")}(${i})${")".repeat(a.length)}`:i),t.set(n,{label:i||r,title:e,children:[],element:n,fiber:o})}for(const{element:r,depth:o}of e){if(!r)continue;const e=t.get(r);if(e)if(0===o)n.push(e);else{let n=r.parentElement;for(;n;){const r=t.get(n);if(r){r.children=r.children||[],r.children.push(e);break}n=n.parentElement}}}return n})(Ci());if(r.length>0){const o=Po(r),a=o.reduce((e,t)=>Math.max(e,t.depth),0);if(i.current=a,E(yo.value.componentsTree.width),d(o),t){t=!1;const r=o.findIndex(e=>e.element===n);if(-1!==r){const t=r*w,n=e.current;n&&setTimeout(()=>{n.scrollTo({top:t,behavior:"instant"})},96)}}}},r=Iu.inspectState.subscribe(e=>{if("focused"===e.kind){if(Lo.value)return;S(""),o.current=e.focusedDomElement,n()}});let a=0;const l=$o.subscribe(()=>{if("focused"===Iu.inspectState.value.kind){if(cancelAnimationFrame(a),s.current)return;a=requestAnimationFrame(()=>{Lo.value=!1,n()})}});return()=>{r(),l(),jo.value={query:"",matches:[],currentMatchIndex:-1}}},[]),Je(()=>{const e=e=>{if(a.current&&h)switch(e.key){case"ArrowUp":if(e.preventDefault(),e.stopPropagation(),h>0){const e=v[h-1];(null==e?void 0:e.element)&&y(e.element)}return;case"ArrowDown":if(e.preventDefault(),e.stopPropagation(),h<v.length-1){const e=v[h+1];(null==e?void 0:e.element)&&y(e.element)}return;case"ArrowLeft":{e.preventDefault(),e.stopPropagation();const t=v[h];return void((null==t?void 0:t.nodeId)&&_(t.nodeId))}case"ArrowRight":{e.preventDefault(),e.stopPropagation();const t=v[h];return void((null==t?void 0:t.nodeId)&&_(t.nodeId))}}};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}},[h,v,y,_]),Je(()=>jo.subscribe(g),[]),Je(()=>yo.subscribe(e=>{var n;null==(n=t.current)||n.style.setProperty("transition","width 0.1s"),E(e.componentsTree.width),setTimeout(()=>{var e;null==(e=t.current)||e.style.removeProperty("transition")},500)}),[]),Rn("div",{className:"react-scan-components-tree flex",children:[Rn("div",{ref:l,onPointerDown:A,className:"relative resize-v-line",children:Rn("span",{children:Rn(On,{name:"icon-ellipsis",size:18})})}),Rn("div",{ref:t,className:"flex flex-col h-full",children:[Rn("div",{className:"p-2 border-b border-[#1e1e1e]",children:Rn("div",{ref:n,title:'Search components by:\n\n• Name (e.g., "Button") — Case insensitive, matches any part\n\n• Regular Expression (e.g., "/^Button/") — Use forward slashes\n\n• Wrapper Type (e.g., "[memo,forwardRef]"):\n   - Available types: memo, forwardRef, lazy, suspense\n   - Matches any part of type name (e.g., "mo" matches "memo")\n   - Use commas for multiple types\n\n• Combined Search:\n   - Mix name/regex with type: "button [for]"\n   - Will match components satisfying both conditions\n\n• Navigation:\n   - Enter → Next match\n   - Shift + Enter → Previous match\n   - Cmd/Ctrl + Enter → Select and focus match\n',className:lo("relative","flex items-center gap-x-1 px-2","rounded","border border-transparent","focus-within:border-[#454545]","bg-[#1e1e1e] text-neutral-300","transition-colors","whitespace-nowrap","overflow-hidden"),children:[Rn(On,{name:"icon-search",size:12,className:" text-neutral-500"}),Rn("div",{className:"relative flex-1 h-7 overflow-hidden",children:Rn("input",{ref:r,type:"text",value:jo.value.query,onClick:e=>{e.stopPropagation(),e.currentTarget.focus()},onPointerDown:e=>{e.stopPropagation()},onKeyDown:e=>{"Escape"===e.key&&e.currentTarget.blur(),jo.value.matches.length&&("Enter"===e.key&&e.shiftKey?T("prev"):"Enter"===e.key&&(e.metaKey||e.ctrlKey?(e.preventDefault(),e.stopPropagation(),y(jo.value.matches[jo.value.currentMatchIndex].element),e.currentTarget.focus()):T("next")))},onChange:C,className:"absolute inset-y-0 inset-x-1",placeholder:"Component name, /regex/, or [type]"})}),jo.value.query?Rn(me,{children:[Rn("span",{className:"flex items-center gap-x-0.5 text-xs text-neutral-500",children:[jo.value.currentMatchIndex+1,"|",jo.value.matches.length]}),!!jo.value.matches.length&&Rn(me,{children:[Rn("button",{type:"button",onClick:e=>{e.stopPropagation(),T("prev")},className:"button rounded w-4 h-4 flex items-center justify-center text-neutral-400 hover:text-neutral-300",children:Rn(On,{name:"icon-chevron-right",className:"-rotate-90",size:12})}),Rn("button",{type:"button",onClick:e=>{e.stopPropagation(),T("next")},className:"button rounded w-4 h-4 flex items-center justify-center text-neutral-400 hover:text-neutral-300",children:Rn(On,{name:"icon-chevron-right",className:"rotate-90",size:12})})]}),Rn("button",{type:"button",onClick:e=>{e.stopPropagation(),S("")},className:"button rounded w-4 h-4 flex items-center justify-center text-neutral-400 hover:text-neutral-300",children:Rn(On,{name:"icon-close",size:12})})]}):!!c.length&&Rn("span",{className:"text-xs text-neutral-500",children:c.length})]})}),Rn("div",{className:"flex-1 overflow-hidden",children:Rn("div",{ref:e,onPointerLeave:M,className:"tree h-full overflow-auto will-change-transform",children:Rn("div",{className:"relative w-full",style:{height:x},children:b.map(e=>{var t;const n=v[e.index];if(!n)return null;const r="focused"===Iu.inspectState.value.kind&&n.element===Iu.inspectState.value.focusedDomElement,o=e.index===h;return Rn("div",{className:lo("absolute left-0 w-full overflow-hidden","text-neutral-400 hover:text-neutral-300","bg-transparent hover:bg-[#5f3f9a]/20",(r||o)&&"text-neutral-300 bg-[#5f3f9a]/40 hover:bg-[#5f3f9a]/40"),style:{top:e.start,height:w},children:Rn("div",{className:"w-full h-full",style:{paddingLeft:`calc(${n.depth} * var(--indentation-size))`},children:Rn(Bo,{node:n,nodeIndex:e.index,hasChildren:!!(null==(t=n.children)?void 0:t.length),isCollapsed:u.has(n.nodeId),handleTreeNodeClick:k,handleTreeNodeToggle:N,searchValue:f})})},n.nodeId)})})})})]})]})},qo=ln(({text:e,children:t,onCopy:n,className:r,iconSize:o=14})=>{const[i,a]=Ge(!1);Je(()=>{if(i){const e=setTimeout(()=>a(!1),600);return()=>{clearTimeout(e)}}},[i]);const s=Ze(t=>{t.preventDefault(),t.stopPropagation(),navigator.clipboard.writeText(e).then(()=>{a(!0),null==n||n(!0,e)},()=>{null==n||n(!1,e)})},[e,n]),l=Rn("button",{onClick:s,type:"button",className:lo("z-10","flex items-center justify-center","hover:text-dev-pink-400","transition-colors duration-200 ease-in-out","cursor-pointer",`size-[${o}px]`,r),children:Rn(On,{name:"icon-"+(i?"check":"copy"),size:[o],className:lo(i&&"text-green-500")})});return t?t({ClipboardIcon:l,onClick:s}):l}),Go=({length:e,expanded:t,onToggle:n,isNegative:r})=>Rn("div",{className:"flex items-center gap-1",children:[Rn("button",{type:"button",onClick:n,className:"flex items-center p-0 opacity-50",children:Rn(On,{name:"icon-chevron-right",size:12,className:lo("transition-[color,transform]",r?"text-[#f87171]":"text-[#4ade80]",t&&"rotate-90")})}),Rn("span",{children:["Array(",e,")"]})]}),Jo=({value:e,path:t,isNegative:n})=>{const[r,o]=Ge(!1);if(!(null!==e&&"object"==typeof e&&!(e instanceof Date)))return Rn("div",{className:"flex items-center gap-1",children:[Rn("span",{className:"text-gray-500",children:[t,":"]}),Rn("span",{className:"truncate",children:Mi(e)})]});const i=Object.entries(e);return Rn("div",{className:"flex flex-col",children:[Rn("div",{className:"flex items-center gap-1",children:[Rn("button",{type:"button",onClick:()=>o(!r),className:"flex items-center p-0 opacity-50",children:Rn(On,{name:"icon-chevron-right",size:12,className:lo("transition-[color,transform]",n?"text-[#f87171]":"text-[#4ade80]",r&&"rotate-90")})}),Rn("span",{className:"text-gray-500",children:[t,":"]}),!r&&Rn("span",{className:"truncate",children:e instanceof Date?Mi(e):`{${Object.keys(e).join(", ")}}`})]}),r&&Rn("div",{className:"pl-5 border-l border-[#333] mt-0.5 ml-1 flex flex-col gap-0.5",children:i.map(([e,t])=>Rn(Jo,{value:t,path:e,isNegative:n},e))})]})},Yo=({value:e,expanded:t,onToggle:n,isNegative:r})=>{const{value:o,error:i}=$i(e);if(i)return Rn("span",{className:"text-gray-500 font-italic",children:i});return null!==o&&"object"==typeof o&&!(o instanceof Promise)?Array.isArray(o)?Rn("div",{className:"flex flex-col gap-1 relative",children:[Rn(Go,{length:o.length,expanded:t,onToggle:n,isNegative:r}),t&&Rn("div",{className:"pl-2 border-l border-[#333] mt-0.5 ml-1 flex flex-col gap-0.5",children:o.map((e,t)=>Rn(Jo,{value:e,path:t.toString(),isNegative:r},t.toString()))}),Rn(qo,{text:Ti(o),className:"absolute top-0.5 right-0.5 opacity-0 transition-opacity group-hover:opacity-100 self-end",children:({ClipboardIcon:e})=>Rn(me,{children:e})})]}):Rn("div",{className:"flex items-start gap-1 relative",children:[Rn("button",{type:"button",onClick:n,className:lo("flex items-center","p-0 mt-0.5 mr-1","opacity-50"),children:Rn(On,{name:"icon-chevron-right",size:12,className:lo("transition-[color,transform]",r?"text-[#f87171]":"text-[#4ade80]",t&&"rotate-90")})}),Rn("div",{className:"flex-1",children:t?Rn("div",{className:"pl-2 border-l border-[#333] mt-0.5 ml-1 flex flex-col gap-0.5",children:Object.entries(o).map(([e,t])=>Rn(Jo,{value:t,path:e,isNegative:r},e))}):Rn("span",{children:Mi(o)})}),Rn(qo,{text:Ti(o),className:"absolute top-0.5 right-0.5 opacity-0 transition-opacity group-hover:opacity-100 self-end",children:({ClipboardIcon:e})=>Rn(me,{children:e})})]}):Rn("span",{children:Mi(o)})};_t({fiber:null,fiberProps:{current:[],changes:new Set},fiberState:{current:[],changes:new Set},fiberContext:{current:[],changes:new Set}});var Xo=e=>{switch(e.kind){case"initialized":return e.changes.currentValue;case"partially-initialized":return e.value}},Ko=(e,t)=>{for(const n of e){const e=t.get(n.name);e?t.set(e.name,{count:e.count+1,currentValue:n.value,id:e.name,lastUpdated:Date.now(),name:e.name,previousValue:n.prevValue}):t.set(n.name,{count:1,currentValue:n.value,id:n.name,lastUpdated:Date.now(),name:n.name,previousValue:n.prevValue})}},Zo=e=>{const t={contextChanges:new Map,propsChanges:new Map,stateChanges:new Map};return e.forEach(e=>{((e,t)=>{for(const n of e){const e=t.contextChanges.get(n.contextType);if(e){if(en(Xo(e),n.value))continue;if("partially-initialized"===e.kind){t.contextChanges.set(n.contextType,{kind:"initialized",changes:{count:1,currentValue:n.value,id:n.contextType.toString(),lastUpdated:Date.now(),name:n.name,previousValue:e.value}});continue}t.contextChanges.set(n.contextType,{kind:"initialized",changes:{count:e.changes.count+1,currentValue:n.value,id:n.contextType.toString(),lastUpdated:Date.now(),name:n.name,previousValue:e.changes.currentValue}})}else t.contextChanges.set(n.contextType,{kind:"partially-initialized",id:n.contextType.toString(),lastUpdated:Date.now(),name:n.name,value:n.value})}})(e.contextChanges,t),Ko(e.stateChanges,t.stateChanges),Ko(e.propsChanges,t.propsChanges)}),t},Qo=(e,t)=>{const n=new Map;return e.forEach((e,t)=>{n.set(t,e)}),t.forEach((e,t)=>{const r=n.get(t);r?n.set(t,{count:r.count+e.count,currentValue:e.currentValue,id:e.id,lastUpdated:e.lastUpdated,name:e.name,previousValue:e.previousValue}):n.set(t,e)}),n},ei=(e,t)=>{const n=((e,t)=>{const n=new Map;return e.contextChanges.forEach((e,t)=>{n.set(t,e)}),t.contextChanges.forEach((e,t)=>{const r=n.get(t);if(r){if(Xo(e)!==Xo(r))switch(r.kind){case"initialized":switch(e.kind){case"initialized":{const o=1;return void n.set(t,{kind:"initialized",changes:{...e.changes,count:e.changes.count+r.changes.count+o,currentValue:e.changes.currentValue,previousValue:e.changes.previousValue}})}case"partially-initialized":return void n.set(t,{kind:"initialized",changes:{count:r.changes.count+1,currentValue:e.value,id:e.id,lastUpdated:e.lastUpdated,name:e.name,previousValue:r.changes.currentValue}})}case"partially-initialized":switch(e.kind){case"initialized":return void n.set(t,{kind:"initialized",changes:{count:e.changes.count+1,currentValue:e.changes.currentValue,id:e.changes.id,lastUpdated:e.changes.lastUpdated,name:e.changes.name,previousValue:r.value}});case"partially-initialized":return void n.set(t,{kind:"initialized",changes:{count:1,currentValue:e.value,id:e.id,lastUpdated:e.lastUpdated,name:e.name,previousValue:r.value}})}}}else n.set(t,e)}),n})(e,t);return{contextChanges:n,propsChanges:Qo(e.propsChanges,t.propsChanges),stateChanges:Qo(e.stateChanges,t.stateChanges)}},ti=e=>Array.from(e.propsChanges.values()).reduce((e,t)=>e+t.count,0)+Array.from(e.stateChanges.values()).reduce((e,t)=>e+t.count,0)+Array.from(e.contextChanges.values()).filter(e=>"initialized"===e.kind).reduce((e,t)=>e+t.changes.count,0),ni=ln(()=>{const[e,t]=Ge(!0),n=(()=>{const e=Xe({queue:[]}),[t,n]=Ge({propsChanges:new Map,stateChanges:new Map,contextChanges:new Map}),r="focused"===Iu.inspectState.value.kind?Iu.inspectState.value.fiber:null,o=r?Z(r):null;return Je(()=>{const t=setInterval(()=>{0!==e.current.queue.length&&(n(t=>{const n=Zo(e.current.queue),r=ei(t,n),o=ti(t);ti(r);return r}),e.current.queue=[])},50);return()=>{clearInterval(t)}},[r]),Je(()=>{if(!o)return;const t=t=>{var n;null==(n=e.current)||n.queue.push(t)};let r=Iu.changesListeners.get(o);return r||(r=[],Iu.changesListeners.set(o,r)),r.push(t),()=>{var r,i;n({propsChanges:new Map,stateChanges:new Map,contextChanges:new Map}),e.current.queue=[],Iu.changesListeners.set(o,null!=(i=null==(r=Iu.changesListeners.get(o))?void 0:r.filter(e=>e!==t))?i:[])}},[o]),Je(()=>()=>{n({propsChanges:new Map,stateChanges:new Map,contextChanges:new Map}),e.current.queue=[]},[o]),t})(),[r,o]=Ge(!1),i=ti(n)>0;Je(()=>{if(!r&&i){const e=setTimeout(()=>{o(!0),requestAnimationFrame(()=>{t(!0)})},0);return()=>clearTimeout(e)}},[r,i]);const a=new Map(Array.from(n.contextChanges.entries()).filter(([,e])=>"initialized"===e.kind).map(([e,t])=>[e,"partially-initialized"===t.kind?null:t.changes])),s="focused"===Iu.inspectState.value.kind?Iu.inspectState.value.fiber:null;if(s)return Rn(me,{children:[Rn(oi,{}),Rn("div",{className:"overflow-hidden h-full flex flex-col gap-y-2",children:[Rn("div",{className:"flex flex-col gap-2 px-3 pt-2",children:[Rn("span",{className:"text-sm font-medium text-[#888]",children:["Why did"," ",Rn("span",{className:"text-[#A855F7]",children:J(s)})," ","render?"]}),!i&&Rn("div",{className:"text-sm text-[#737373] bg-[#1E1E1E] rounded-md p-4 flex flex-col gap-4",children:[Rn("div",{children:"No changes detected since selecting"}),Rn("div",{children:"The props, state, and context changes within your component will be reported here"})]})]}),Rn("div",{className:lo("flex flex-col gap-y-2 pl-3 relative overflow-y-auto h-full"),children:[Rn(ai,{changes:n.propsChanges,title:"Changed Props",isExpanded:e}),Rn(ai,{renderName:e=>{var t;return ri(e,null!=(t=J(G(s)))?t:"Unknown Component")},changes:n.stateChanges,title:"Changed State",isExpanded:e}),Rn(ai,{changes:a,title:"Changed Context",isExpanded:e})]})]})]})}),ri=(e,t)=>{if(Number.isNaN(Number(e)))return e;const n=Number.parseInt(e);return Rn("span",{className:"truncate",children:[Rn("span",{className:"text-white",children:[n,(e=>{const t=e%100;if(t>=11&&t<=13)return"th";switch(e%10){case 1:return"st";case 2:return"nd";case 3:return"rd";default:return"th"}})(n)," hook"," "]}),Rn("span",{style:{color:"#666"},children:["called in ",Rn("i",{className:"text-[#A855F7] truncate",children:t})]})]})},oi=ln(()=>{const e=Xe(null),t=Xe(null),n=Xe(null),r=Xe({isPropsChanged:!1,isStateChanged:!1,isContextChanged:!1});return Je(()=>{const o=co(()=>{var r,o,i;const a=[];"true"===(null==(r=e.current)?void 0:r.dataset.flash)&&a.push(e.current),"true"===(null==(o=t.current)?void 0:o.dataset.flash)&&a.push(t.current),"true"===(null==(i=n.current)?void 0:i.dataset.flash)&&a.push(n.current);for(const e of a)e.classList.remove("count-flash-white"),e.offsetWidth,e.classList.add("count-flash-white")},400);return Mo.subscribe(i=>{var a,s,l,c,d,u,p,h,m;if(!e.current||!t.current||!n.current)return;const{currentIndex:f,updates:g}=i,v=g[f];v&&0!==f&&(o(),r.current={isPropsChanged:(null!=(l=null==(s=null==(a=v.props)?void 0:a.changes)?void 0:s.size)?l:0)>0,isStateChanged:(null!=(u=null==(d=null==(c=v.state)?void 0:c.changes)?void 0:d.size)?u:0)>0,isContextChanged:(null!=(m=null==(h=null==(p=v.context)?void 0:p.changes)?void 0:h.size)?m:0)>0},"true"!==e.current.dataset.flash&&(e.current.dataset.flash=r.current.isPropsChanged.toString()),"true"!==t.current.dataset.flash&&(t.current.dataset.flash=r.current.isStateChanged.toString()),"true"!==n.current.dataset.flash&&(n.current.dataset.flash=r.current.isContextChanged.toString()))})},[]),Rn("button",{type:"button",className:lo("react-section-header","overflow-hidden","max-h-0","transition-[max-height]"),children:Rn("div",{className:lo("flex-1 react-scan-expandable"),children:Rn("div",{className:"overflow-hidden",children:Rn("div",{className:"flex items-center whitespace-nowrap",children:[Rn("div",{className:"flex items-center gap-x-2",children:"What changed?"}),Rn("div",{className:lo("ml-auto","change-scope","transition-opacity duration-300 delay-150"),children:[Rn("div",{ref:e,children:"props"}),Rn("div",{ref:t,children:"state"}),Rn("div",{ref:n,children:"context"})]})]})})})})}),ii=e=>e,ai=ln(({title:e,changes:t,renderName:n=ii})=>{const[r,o]=Ge(new Set),[i,a]=Ge(new Set),s=Array.from(t.entries());return 0===t.size?null:Rn("div",{children:[Rn("div",{className:"text-xs text-[#888] mb-1.5",children:e}),Rn("div",{className:"flex flex-col gap-2",children:s.map(([t,s])=>{const l=i.has(String(t)),{value:c,error:d}=$i(s.previousValue),{value:u,error:p}=$i(s.currentValue),h=Ei(c,u);return Rn("div",{children:[Rn("button",{onClick:()=>{a(e=>{const n=new Set(e);return n.has(String(t))?n.delete(String(t)):n.add(String(t)),n})},className:"flex items-center gap-2 w-full bg-transparent border-none p-0 cursor-pointer text-white text-xs",children:Rn("div",{className:"flex items-center gap-1.5 flex-1",children:[Rn(On,{name:"icon-chevron-right",size:12,className:lo("text-[#666] transition-transform duration-200 ease-[cubic-bezier(0.25,0.1,0.25,1)]",{"rotate-90":l})}),Rn("div",{className:"whitespace-pre-wrap break-words text-left font-medium flex items-center gap-x-1.5",children:[n(s.name),Rn(di,{count:s.count,isFunction:"function"==typeof s.currentValue,showWarning:0===h.changes.length,forceFlash:!0})]})]})}),Rn("div",{className:lo("react-scan-expandable",{"react-scan-expanded":l}),children:Rn("div",{className:"pl-3 text-xs font-mono border-l-1 border-[#333]",children:Rn("div",{className:"flex flex-col gap-0.5",children:d||p?Rn(si,{currError:p,prevError:d}):h.changes.length>0?Rn(li,{change:s,diff:h,expandedFns:r,renderName:n,setExpandedFns:o,title:e}):Rn(ci,{currValue:u,entryKey:t,expandedFns:r,prevValue:c,setExpandedFns:o})})})})]},t)})})]})}),si=({prevError:e,currError:t})=>Rn(me,{children:[e&&Rn("div",{className:"text-[#f87171] bg-[#2a1515] pr-1.5 py-[3px] rounded italic",children:e}),t&&Rn("div",{className:"text-[#4ade80] bg-[#1a2a1a] pr-1.5 py-[3px] rounded italic mt-0.5",children:t})]}),li=({diff:e,title:t,renderName:n,change:r,expandedFns:o,setExpandedFns:i})=>e.changes.map((a,s)=>{const{value:l,error:c}=$i(a.prevValue),{value:d,error:u}=$i(a.currentValue),p="function"==typeof l||"function"==typeof d;let h;return"Props"===t&&(h=a.path.length>0?`${n(String(r.name))}.${zi(a.path)}`:void 0),"State"===t&&a.path.length>0&&(h=`state.${zi(a.path)}`),h||(h=zi(a.path)),Rn("div",{className:lo("flex flex-col gap-y-1",s<e.changes.length-1&&"mb-4"),children:[h&&Rn("div",{className:"text-[#666] text-[10px]",children:h}),Rn("button",{type:"button",className:lo("group","flex items-start","py-[3px] px-1.5","text-left text-[#f87171] bg-[#2a1515]","rounded","overflow-hidden break-all",p&&"cursor-pointer"),onClick:p?()=>{const e=`${zi(a.path)}-prev`;i(t=>{const n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})}:void 0,children:[Rn("span",{className:"w-3 flex items-center justify-center opacity-50",children:"-"}),Rn("span",{className:"flex-1 whitespace-nowrap font-mono",children:c?Rn("span",{className:"italic text-[#f87171]",children:c}):p?Rn("div",{className:"flex gap-1 items-start flex-col",children:[Rn("div",{className:"flex gap-1 items-start w-full",children:[Rn("span",{className:"flex-1 max-h-40",children:Ai(l,o.has(`${zi(a.path)}-prev`))}),"function"==typeof l&&Rn(qo,{text:l.toString(),className:"opacity-0 transition-opacity group-hover:opacity-100",children:({ClipboardIcon:e})=>Rn(me,{children:e})})]}),(null==l?void 0:l.toString())===(null==d?void 0:d.toString())&&Rn("div",{className:"text-[10px] text-[#666] italic",children:"Function reference changed"})]}):Rn(Yo,{value:l,expanded:o.has(`${zi(a.path)}-prev`),onToggle:()=>{const e=`${zi(a.path)}-prev`;i(t=>{const n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},isNegative:!0})})]}),Rn("button",{type:"button",className:lo("group","flex items-start","py-[3px] px-1.5","text-left text-[#4ade80] bg-[#1a2a1a]","rounded","overflow-hidden break-all",p&&"cursor-pointer"),onClick:p?()=>{const e=`${zi(a.path)}-current`;i(t=>{const n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})}:void 0,children:[Rn("span",{className:"w-3 flex items-center justify-center opacity-50",children:"+"}),Rn("span",{className:"flex-1 whitespace-pre-wrap font-mono",children:u?Rn("span",{className:"italic text-[#4ade80]",children:u}):p?Rn("div",{className:"flex gap-1 items-start flex-col",children:[Rn("div",{className:"flex gap-1 items-start w-full",children:[Rn("span",{className:"flex-1",children:Ai(d,o.has(`${zi(a.path)}-current`))}),"function"==typeof d&&Rn(qo,{text:d.toString(),className:"opacity-0 transition-opacity group-hover:opacity-100",children:({ClipboardIcon:e})=>Rn(me,{children:e})})]}),(null==l?void 0:l.toString())===(null==d?void 0:d.toString())&&Rn("div",{className:"text-[10px] text-[#666] italic",children:"Function reference changed"})]}):Rn(Yo,{value:d,expanded:o.has(`${zi(a.path)}-current`),onToggle:()=>{const e=`${zi(a.path)}-current`;i(t=>{const n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},isNegative:!1})})]})]},`${h}-${r.name}-${s}`)}),ci=({prevValue:e,currValue:t,entryKey:n,expandedFns:r,setExpandedFns:o})=>Rn(me,{children:[Rn("div",{className:"group flex gap-0.5 items-start text-[#f87171] bg-[#2a1515] py-[3px] px-1.5 rounded",children:[Rn("span",{className:"w-3 flex items-center justify-center opacity-50",children:"-"}),Rn("span",{className:"flex-1 overflow-hidden whitespace-pre-wrap font-mono",children:Rn(Yo,{value:e,expanded:r.has(`${String(n)}-prev`),onToggle:()=>{const e=`${String(n)}-prev`;o(t=>{const n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},isNegative:!0})})]}),Rn("div",{className:"group flex gap-0.5 items-start text-[#4ade80] bg-[#1a2a1a] py-[3px] px-1.5 rounded mt-0.5",children:[Rn("span",{className:"w-3 flex items-center justify-center opacity-50",children:"+"}),Rn("span",{className:"flex-1 overflow-hidden whitespace-pre-wrap font-mono",children:Rn(Yo,{value:t,expanded:r.has(`${String(n)}-current`),onToggle:()=>{const e=`${String(n)}-current`;o(t=>{const n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},isNegative:!1})})]}),"object"==typeof t&&null!==t&&Rn("div",{className:"text-[#666] text-[10px] italic mt-1 flex items-center gap-x-1",children:[Rn(On,{name:"icon-triangle-alert",className:"text-yellow-500 mb-px",size:14}),Rn("span",{children:"Reference changed but objects are structurally the same"})]})]}),di=({count:e,forceFlash:t,isFunction:n,showWarning:r})=>{const o=Xe(!0),i=Xe(null),a=Xe(e);return Je(()=>{const t=i.current;t&&a.current!==e&&(t.classList.remove("count-flash"),t.offsetWidth,t.classList.add("count-flash"),a.current=e)},[e]),Je(()=>{if(o.current)o.current=!1;else if(t){let e=setTimeout(()=>{var t;null==(t=i.current)||t.classList.add("count-flash-white"),e=setTimeout(()=>{var e;null==(e=i.current)||e.classList.remove("count-flash-white")},300)},500);return()=>{clearTimeout(e)}}},[t]),Rn("div",{ref:i,className:"count-badge",children:[r&&Rn(On,{name:"icon-triangle-alert",className:"text-yellow-500 mb-px",size:14}),n&&Rn(On,{name:"icon-function",className:"text-[#A855F7] mb-px",size:14}),"x",e]})},ui={lastRendered:new Map,expandedPaths:new Set,cleanup:()=>{ui.lastRendered.clear(),ui.expandedPaths.clear(),zo.cleanupAll(),Wi(),Do()}},pi=class extends fe{constructor(){super(...arguments),n(this,"state",{hasError:!1,error:null}),n(this,"handleReset",()=>{this.setState({hasError:!1,error:null}),ui.cleanup()})}static getDerivedStateFromError(e){return{hasError:!0,error:e}}render(){var e;return this.state.hasError?Rn("div",{className:"p-4 bg-red-950/50 h-screen backdrop-blur-sm",children:[Rn("div",{className:"flex items-center gap-2 mb-3 text-red-400 font-medium",children:[Rn(On,{name:"icon-flame",className:"text-red-500",size:16}),"Something went wrong in the inspector"]}),Rn("div",{className:"p-3 bg-black/40 rounded font-mono text-xs text-red-300 mb-4 break-words",children:(null==(e=this.state.error)?void 0:e.message)||JSON.stringify(this.state.error)}),Rn("button",{type:"button",onClick:this.handleReset,className:"px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md text-sm font-medium transition-colors flex items-center justify-center gap-2",children:"Reset Inspector"})]}):this.props.children}},hi=Et(()=>lo("react-scan-inspector","flex-1","opacity-0","overflow-y-auto overflow-x-hidden","transition-opacity delay-0","pointer-events-none",!wo.value&&"opacity-100 delay-300 pointer-events-auto")),mi=To(()=>{const e=Xe(null),t=t=>{if(!t)return;e.current=t;const{data:n,shouldUpdate:r}=Gi(t);if(r){const e={timestamp:Date.now(),fiberInfo:Ri(t),props:n.fiberProps,state:n.fiberState,context:n.fiberContext,stateNames:Ii(t)};Oo(e,t)}};return Jt(()=>{const n=Iu.inspectState.value;ut(()=>{var r;if("focused"!==n.kind||!n.focusedDomElement)return e.current=null,void ui.cleanup();"focused"===n.kind&&(wo.value=!1);const{parentCompositeFiber:o}=ki(n.focusedDomElement,n.fiber);if(!o)return Iu.inspectState.value={kind:"inspect-off"},void(_o.value={view:"none"});(null==(r=e.current)?void 0:r.type)!==o.type&&(e.current=o,ui.cleanup(),t(o))})}),Jt(()=>{$o.value,ut(()=>{const n=Iu.inspectState.value;if("focused"!==n.kind||!n.focusedDomElement)return e.current=null,void ui.cleanup();const{parentCompositeFiber:r}=ki(n.focusedDomElement,n.fiber);if(!r)return Iu.inspectState.value={kind:"inspect-off"},void(_o.value={view:"none"});t(r),n.focusedDomElement.isConnected||(e.current=null,ui.cleanup(),Iu.inspectState.value={kind:"inspecting",hoveredDomElement:null})})}),Je(()=>()=>{ui.cleanup()},[]),Rn(pi,{children:Rn("div",{className:hi,children:Rn("div",{className:"w-full h-full",children:Rn(ni,{})})})})}),fi=To(()=>"focused"!==Iu.inspectState.value.kind?null:Rn(pi,{children:[Rn(mi,{}),Rn(Vo,{})]})),gi=e=>{var t,n,r,o;if("__REACT_DEVTOOLS_GLOBAL_HOOK__"in window){const n=window.__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!(null==n?void 0:n.renderers))return null;for(const[,r]of Array.from(n.renderers))try{const n=null==(t=r.findFiberByHostInstance)?void 0:t.call(r,e);if(n)return n}catch{}}if("_reactRootContainer"in e){const t=e._reactRootContainer;return null!=(o=null==(r=null==(n=null==t?void 0:t._internalRoot)?void 0:n.current)?void 0:r.child)?o:null}for(const t in e)if(t.startsWith("__reactInternalInstance$")||t.startsWith("__reactFiber")){return e[t]}return null},vi=e=>{let t=e;for(;t;){if(t.stateNode instanceof Element)return t.stateNode;if(!t.child)break;t=t.child}for(;t;){if(t.stateNode instanceof Element)return t.stateNode;if(!t.return)break;t=t.return}return null},wi=e=>{if(!e)return null;try{const t=gi(e);if(!t)return null;const n=bi(t);return n?n[0]:null}catch{return null}},bi=e=>{let t=e,n=null;for(;t;){if(w(t))return[t,n];v(t)&&!n&&(n=t),t=t.return}return null},xi=(e,t)=>!!k(t,t=>t===e),yi=e=>{const t=wi(e);if(!t)return{};if(!vi(t))return{};const n=bi(t);if(!n)return{};const[r]=n;return{parentCompositeFiber:r}},ki=(e,t)=>{var n,r,o,i;if(!e.isConnected)return{};let a=null!=t?t:wi(e);if(!a)return{};let s=a,l=null,c=null;for(;s;)if(s.stateNode){if(null==(n=Wu.instrumentation)?void 0:n.fiberRoots.has(s.stateNode)){l=s,c=s.stateNode.current;break}s=s.return}else s=s.return;if(!l||!c)return{};if(a=xi(a,c)?a:null!=(r=a.alternate)?r:a,!a)return{};if(!vi(a))return{};const d=null==(o=bi(a))?void 0:o[0];return d?{parentCompositeFiber:xi(d,c)?d:null!=(i=d.alternate)?i:d}:{}},_i=e=>{var t,n,r;const o=null!=(t=e.memoizedProps)?t:{},i=null!=(r=null==(n=e.alternate)?void 0:n.memoizedProps)?r:{},a=[];for(const e in o){if("children"===e)continue;const t=o[e],n=i[e];en(t,n)||a.push({name:e,value:t,prevValue:n,type:1})}return a},Ni=new Set(["HTML","HEAD","META","TITLE","BASE","SCRIPT","SCRIPT","STYLE","LINK","NOSCRIPT","SOURCE","TRACK","EMBED","OBJECT","PARAM","TEMPLATE","PORTAL","SLOT","AREA","XML","DOCTYPE","COMMENT"]),Si=(e,t=!0)=>{if(e.stateNode&&"nodeType"in e.stateNode){const n=e.stateNode;return t&&n.tagName&&Ni.has(n.tagName.toLowerCase())?null:n}let n=e.child;for(;n;){const e=Si(n,t);if(e)return e;n=n.sibling}return null},Ci=(e=document.body)=>{const t=[],n=(e,r=0)=>{var o;const i=(e=>{if(!e)return null;const{parentCompositeFiber:t}=yi(e);return t&&Si(t)===e?e:null})(e);if(i){const{parentCompositeFiber:e}=yi(i);if(!e)return;t.push({element:i,depth:r,name:null!=(o=J(e.type))?o:"Unknown",fiber:e})}for(const t of Array.from(e.children))n(t,i?r+1:r)};return n(e),t},Ti=e=>{try{if(null===e)return"null";if(void 0===e)return"undefined";if(Fi(e))return"Promise";if("function"==typeof e){const t=e.toString();try{return t.replace(/\s+/g," ").replace(/{\s+/g,"{\n  ").replace(/;\s+/g,";\n  ").replace(/}\s*$/g,"\n}").replace(/\(\s+/g,"(").replace(/\s+\)/g,")").replace(/,\s+/g,", ")}catch{return t}}switch(!0){case e instanceof Date:return e.toISOString();case e instanceof RegExp:return e.toString();case e instanceof Error:return`${e.name}: ${e.message}`;case e instanceof Map:return JSON.stringify(Array.from(e.entries()),null,2);case e instanceof Set:return JSON.stringify(Array.from(e),null,2);case e instanceof DataView:return JSON.stringify(Array.from(new Uint8Array(e.buffer)),null,2);case e instanceof ArrayBuffer:return JSON.stringify(Array.from(new Uint8Array(e)),null,2);case ArrayBuffer.isView(e)&&"length"in e:return JSON.stringify(Array.from(e),null,2);case Array.isArray(e):case"object"==typeof e:return JSON.stringify(e,null,2);default:return String(e)}}catch{return String(e)}},Ei=(e,t,n=[],r=new WeakSet)=>{if(e===t)return{type:"primitive",changes:[],hasDeepChanges:!1};if("function"==typeof e&&"function"==typeof t){const r=((e,t)=>{try{return"function"==typeof e&&"function"==typeof t&&e.toString()===t.toString()}catch{return!1}})(e,t);return{type:"primitive",changes:[{path:n,prevValue:e,currentValue:t,sameFunction:r}],hasDeepChanges:!r}}if(null===e||null===t||void 0===e||void 0===t||"object"!=typeof e||"object"!=typeof t)return{type:"primitive",changes:[{path:n,prevValue:e,currentValue:t}],hasDeepChanges:!0};if(r.has(e)||r.has(t))return{type:"object",changes:[{path:n,prevValue:"[Circular]",currentValue:"[Circular]"}],hasDeepChanges:!1};r.add(e),r.add(t);const o=e,i=t,a=new Set([...Object.keys(o),...Object.keys(i)]),s=[];let l=!1;for(const e of a){const t=o[e],a=i[e];if(t!==a)if("object"==typeof t&&"object"==typeof a&&null!==t&&null!==a){const o=Ei(t,a,[...n,e],r);s.push(...o.changes),o.hasDeepChanges&&(l=!0)}else s.push({path:[...n,e],prevValue:t,currentValue:a}),l=!0}return{type:"object",changes:s,hasDeepChanges:l}},zi=e=>0===e.length?"":e.reduce((e,t,n)=>/^\d+$/.test(t)?`${e}[${t}]`:0===n?t:`${e}.${t}`,"");var Ai=(e,t=!1)=>{try{const n=e.toString(),r=n.match(/(?:function\s*)?(?:\(([^)]*)\)|([^=>\s]+))\s*=>?/);if(!r)return"ƒ";const o=(r[1]||r[2]||"").replace(/\s+/g,"");return t?function(e){const t=e.replace(/\s+/g," ").trim(),n=[];let r="";for(let e=0;e<t.length;e++){const o=t[e];"="!==o||">"!==t[e+1]?/[(){}[\];,<>:\?!]/.test(o)?(r.trim()&&n.push(r.trim()),n.push(o),r=""):/\s/.test(o)?(r.trim()&&n.push(r.trim()),r=""):r+=o:(r.trim()&&n.push(r.trim()),n.push("=>"),r="",e++)}r.trim()&&n.push(r.trim());const o=[];for(let e=0;e<n.length;e++){const t=n[e],r=n[e+1];"("===t&&")"===r||"["===t&&"]"===r||"{"===t&&"}"===r||"<"===t&&">"===r?(o.push(t+r),e++):o.push(t)}const i=new Set,a=new Set;function s(e,t,n){let r=0;for(let i=n;i<o.length;i++){const n=o[i];if(n===e)r++;else if(n===t&&(r--,0===r))return i}return-1}for(let e=0;e<o.length;e++)if("("===o[e]){const t=s("(",")",e);if(-1!==t&&"=>"===o[t+1])for(let n=e;n<=t;n++)i.add(n)}for(let e=1;e<o.length;e++){const t=o[e-1],n=o[e];if(/^[a-zA-Z0-9_$]+$/.test(t)&&"<"===n){const t=s("<",">",e);if(-1!==t)for(let n=e;n<=t;n++)a.add(n)}}let l=0;const c=[];let d="";function u(){d.trim()&&c.push(d.replace(/\s+$/,"")),d=""}function p(){u(),d="  ".repeat(l)}const h=[];function m(){return h.length?h[h.length-1]:null}function f(e,t=!1){d.trim()?t||/^[),;:\].}>]$/.test(e)?d+=e:d+=` ${e}`:d+=e}for(let e=0;e<o.length;e++){const t=o[e],n=o[e+1]||"";if(["(","{","[","<"].includes(t))f(t),h.push(t),"{"===t?(l++,p()):"("!==t&&"["!==t&&"<"!==t||i.has(e)&&"("===t||a.has(e)&&"<"===t||n!=={"(":")","[":"]","<":">"}[t]&&"()"!==n&&"[]"!==n&&"<>"!==n&&(l++,p());else if([")","}","]",">"].includes(t)){const n=m();")"===t&&"("===n||"]"===t&&"["===n||">"===t&&"<"===n?i.has(e)&&")"===t||a.has(e)&&">"===t||(l=Math.max(l-1,0),p()):"}"===t&&"{"===n&&(l=Math.max(l-1,0),p()),h.pop(),f(t),"}"===t&&p()}else if(/^\(\)|\[\]|\{\}|\<\>$/.test(t))f(t);else if("=>"===t)f(t);else if(";"===t)f(t,!0),p();else if(","===t){f(t,!0);const n=m();i.has(e)&&"("===n||a.has(e)&&"<"===n||n&&["{","[","(","<"].includes(n)&&p()}else f(t)}return u(),c.join("\n").replace(/\n\s*\n+/g,"\n").trim()}(n):`ƒ (${o}) => ...`}catch{return"ƒ"}},Mi=e=>{if(null===e)return"null";if(void 0===e)return"undefined";if("string"==typeof e)return`"${e.length>150?`${e.slice(0,20)}...`:e}"`;if("number"==typeof e||"boolean"==typeof e)return String(e);if("function"==typeof e)return Ai(e);if(Array.isArray(e))return`Array(${e.length})`;if(e instanceof Map)return`Map(${e.size})`;if(e instanceof Set)return`Set(${e.size})`;if(e instanceof Date)return e.toISOString();if(e instanceof RegExp)return e.toString();if(e instanceof Error)return`${e.name}: ${e.message}`;if("object"==typeof e){const t=Object.keys(e);return`{${t.length>2?`${t.slice(0,2).join(", ")}, ...`:t.join(", ")}}`}return String(e)},$i=e=>{var t;if(null==e)return{value:e};if("function"==typeof e)return{value:e};if("object"!=typeof e)return{value:e};if(Fi(e))return{value:"Promise"};try{const n=Object.getPrototypeOf(e);return n===Promise.prototype||"Promise"===(null==(t=null==n?void 0:n.constructor)?void 0:t.name)?{value:"Promise"}:{value:e}}catch{return{value:null,error:"Error accessing value"}}},Fi=e=>!!e&&(e instanceof Promise||"object"==typeof e&&"then"in e),Ri=e=>{var t,n;const r=V(e);return{displayName:J(e)||"Unknown",type:e.type,key:e.key,id:e.index,selfTime:null!=(t=null==r?void 0:r.selfTime)?t:null,totalTime:null!=(n=null==r?void 0:r.totalTime)?n:null}},Oi=new Map,Di=new Map,ji=new Map,Li=null,Pi=/\[(?<name>\w+),\s*set\w+\]/g,Ii=e=>{var t,n;const r=(null==(n=null==(t=e.type)?void 0:t.toString)?void 0:n.call(t))||"";return r?Array.from(r.matchAll(Pi),e=>{var t,n;return null!=(n=null==(t=e.groups)?void 0:t.name)?n:""}):[]},Wi=()=>{Oi.clear(),Di.clear(),ji.clear(),Li=null},Ui=(e,t,n,r)=>{const o=e.get(t),i=e===Oi||e===ji,a=!en(n,r);if(!o)return e.set(t,{count:a&&i?1:0,currentValue:n,previousValue:r,lastUpdated:Date.now()}),{hasChanged:a,count:a&&i?1:i?0:1};if(!en(o.currentValue,n)){const r=o.count+1;return e.set(t,{count:r,currentValue:n,previousValue:o.currentValue,lastUpdated:Date.now()}),{hasChanged:!0,count:r}}return{hasChanged:!1,count:o.count}},Hi=e=>{if(!e)return{};if(0===e.tag||11===e.tag||15===e.tag||14===e.tag){let t=e.memoizedState;const n={};let r=0;for(;t;)t.queue&&void 0!==t.memoizedState&&(n[r]=t.memoizedState),t=t.next,r++;return n}return 1===e.tag&&e.memoizedState||{}},Bi=e=>{var t;const n=e.memoizedProps||{},r=(null==(t=e.alternate)?void 0:t.memoizedProps)||{},o={},i={},a=Object.keys(n);for(const e of a)e in n&&(o[e]=n[e],i[e]=r[e]);return{current:o,prev:i,changes:_i(e).map(e=>({name:e.name,value:e.value,prevValue:e.prevValue}))}},Vi=e=>{const t=Hi(e),n=e.alternate?Hi(e.alternate):{},r=[];for(const[o,i]of Object.entries(t)){const t=1===e.tag?o:Number(o);e.alternate&&!en(n[o],i)&&r.push({name:t,value:i,prevValue:n[o]})}return{current:t,prev:n,changes:r}},qi=e=>{const t=Yi(e),n=e.alternate?Yi(e.alternate):new Map,r={},o={},i=[],a=new Set;for(const[e,s]of t){const t=s.displayName,l=e;if(a.has(l))continue;a.add(l),r[t]=s.value;const c=n.get(e);c&&(o[t]=c.value,en(c.value,s.value)||i.push({name:t,value:s.value,prevValue:c.value,contextType:e}))}return{current:r,prev:o,changes:i}},Gi=e=>{const t=()=>({current:[],changes:new Set,changesCounts:new Map});if(!e)return{data:{fiberProps:t(),fiberState:t(),fiberContext:t()},shouldUpdate:!1};let n=!1;const r=(e=>{const t=e.type!==Li;return Li=e.type,t})(e),o=t();if(e.memoizedProps){const{current:t,changes:r}=Bi(e);for(const[e,n]of Object.entries(t))o.current.push({name:e,value:Fi(n)?{type:"promise",displayValue:"Promise"}:n});for(const e of r){const{hasChanged:t,count:r}=Ui(Oi,e.name,e.value,e.prevValue);t&&(n=!0,o.changes.add(e.name),o.changesCounts.set(e.name,r))}}const i=t(),{current:a,changes:s}=Vi(e);for(const[t,n]of Object.entries(a)){const r=1===e.tag?t:Number(t);i.current.push({name:r,value:n})}for(const e of s){const{hasChanged:t,count:r}=Ui(Di,e.name,e.value,e.prevValue);t&&(n=!0,i.changes.add(e.name),i.changesCounts.set(e.name,r))}const l=t(),{current:c,changes:d}=qi(e);for(const[e,t]of Object.entries(c))l.current.push({name:e,value:t});if(!r)for(const e of d){const{hasChanged:t,count:r}=Ui(ji,e.name,e.value,e.prevValue);t&&(n=!0,l.changes.add(e.name),l.changesCounts.set(e.name,r))}return n||r||(o.changes.clear(),i.changes.clear(),l.changes.clear()),{data:{fiberProps:o,fiberState:i,fiberContext:l},shouldUpdate:n||r}},Ji=new WeakMap,Yi=e=>{var t;if(!e)return new Map;const n=Ji.get(e);if(n)return n;const r=new Map;let o=e;for(;o;){const e=o.dependencies;if(null==e?void 0:e.firstContext){let n=e.firstContext;for(;n;){const e=n.memoizedValue,o=null==(t=n.context)?void 0:t.displayName;if(r.has(e)||r.set(n.context,{value:e,displayName:null!=o?o:"UnnamedContext",contextType:null}),n===n.next)break;n=n.next}}o=o.return}return Ji.set(e,r),r},Xi=e=>{const t=()=>({current:[],changes:new Set,changesCounts:new Map});if(!e)return{fiberProps:t(),fiberState:t(),fiberContext:t()};const n=t();if(e.memoizedProps){const{current:t,changes:r}=Bi(e);for(const[e,r]of Object.entries(t))n.current.push({name:e,value:Fi(r)?{type:"promise",displayValue:"Promise"}:r});for(const e of r)n.changes.add(e.name),n.changesCounts.set(e.name,1)}const r=t();if(e.memoizedState){const{current:t,changes:n}=Vi(e);for(const[e,n]of Object.entries(t))r.current.push({name:e,value:Fi(n)?{type:"promise",displayValue:"Promise"}:n});for(const e of n)r.changes.add(e.name),r.changesCounts.set(e.name,1)}const o=t(),{current:i,changes:a}=qi(e);for(const[e,t]of Object.entries(i))o.current.push({name:e,value:Fi(t)?{type:"promise",displayValue:"Promise"}:t});for(const e of a)o.changes.add(e.name),o.changesCounts.set(e.name,1);return{fiberProps:n,fiberState:r,fiberContext:o}},Ki={mount:1,update:2,unmount:4},Zi=0,Qi=performance.now(),ea=0,ta=!1,na=()=>{ea++;const e=performance.now();e-Qi>=1e3&&(Zi=ea,ea=0,Qi=e),requestAnimationFrame(na)},ra=()=>(ta||(ta=!0,na(),Zi=60),Zi),oa=0,ia=new WeakMap,aa=e=>{const t=ia.get(e);return t||(oa++,ia.set(e,oa),oa)};function sa(e,t){var n;if(!e||!t)return;const r=e.memoizedValue,o={type:4,name:null!=(n=e.context.displayName)?n:"Context.Provider",value:r,contextType:aa(e.context)};this.push(o)}var la=e=>{const t=[];return((e,t)=>{var n;try{let r=e.dependencies,o=null==(n=e.alternate)?void 0:n.dependencies;if(!(r&&o&&"object"==typeof r&&"firstContext"in r&&"object"==typeof o&&"firstContext"in o))return!1;let i=r.firstContext,a=o.firstContext;for(;i&&"object"==typeof i&&"memoizedValue"in i||a&&"object"==typeof a&&"memoizedValue"in a;){if(!0===t(i,a))return!0;i=null==i?void 0:i.next,a=null==a?void 0:a.next}}catch{}})(e,sa.bind(t)),t},ca=new Map,da=!1,ua=()=>Array.from(ca.values()),pa=new WeakMap;function ha(e){return String(Z(e))}function ma(e){const t=ha(e),n=pa.get(G(e));if(n)return n.get(t)}var fa=(e,t,n,r,o)=>{const i=Date.now(),a=ma(e);if((r||o)&&(!a||i-(a.lastRenderTimestamp||0)>16)){const r=a||{selfTime:0,totalTime:0,renderCount:0,lastRenderTimestamp:i};r.renderCount=(r.renderCount||0)+1,r.selfTime=t||0,r.totalTime=n||0,r.lastRenderTimestamp=i,function(e,t){const n=G(e.type),r=ha(e);let o=pa.get(n);o||(o=new Map,pa.set(n,o)),o.set(r,t)}(e,{...r})}},ga=(e,t)=>{const n={isPaused:_t(!Wu.options.value.enabled),fiberRoots:new WeakSet};return ca.set(e,{key:e,config:t,instrumentation:n}),da||(da=!0,(e=>{var t;let n=g(e.onActive);n._instrumentationSource=null!=(t=e.name)?t:o;let r=n.onCommitFiberRoot;if(e.onCommitFiberRoot){let t=(n,o,i)=>{var a;r!==t&&(null==r||r(n,o,i),null==(a=e.onCommitFiberRoot)||a.call(e,n,o,i))};n.onCommitFiberRoot=t}let i=n.onCommitFiberUnmount;if(e.onCommitFiberUnmount){let t=(r,o)=>{var a;n.onCommitFiberUnmount===t&&(null==i||i(r,o),null==(a=e.onCommitFiberUnmount)||a.call(e,r,o))};n.onCommitFiberUnmount=t}let a=n.onPostCommitFiberRoot;if(e.onPostCommitFiberRoot){let t=(r,o)=>{var i;n.onPostCommitFiberRoot===t&&(null==a||a(r,o),null==(i=e.onPostCommitFiberRoot)||i.call(e,r,o))};n.onPostCommitFiberRoot=t}})({name:"react-scan",onActive:t.onActive,onCommitFiberRoot(e,t){n.fiberRoots.add(t);const r=ua();for(const e of r)e.config.onCommitStart();((e,t)=>{let n="current"in e?e.current:e,r=oe.get(e);r||(r={id:re++,prevFiber:null},oe.set(e,r));let{prevFiber:o}=r;if(n)if(null!==o){let e=o&&null!=o.memoizedState&&null!=o.memoizedState.element&&!0!==o.memoizedState.isDehydrated,r=null!=n.memoizedState&&null!=n.memoizedState.element&&!0!==n.memoizedState.isDehydrated;!e&&r?Q(t,n,!1):e&&r?ee(t,n,n.alternate):e&&!r&&te(t,n)}else Q(t,n,!0);else te(t,n);r.prevFiber=n})(t.current,(e,t)=>{const n=G(e.type);if(!n)return null;const r=ua(),o=[];for(let t=0,n=r.length;t<n;t++){r[t].config.isValidFiber(e)&&o.push(t)}if(!o.length)return null;const i=[];if(r.some(e=>e.config.trackChanges)){const t=Bi(e).changes,n=Vi(e).changes,r=qi(e).changes;i.push.apply(null,t.map(e=>({type:1,name:e.name,value:e.value})));for(const t of n)1===e.tag?i.push({type:3,name:t.name.toString(),value:t.value}):i.push({type:2,name:t.name.toString(),value:t.value});i.push.apply(null,r.map(e=>({type:4,name:e.name,value:e.value,contextType:Number(e.contextType)})))}const{selfTime:a,totalTime:s}=V(e),l=ra(),c={phase:Ki[t],componentName:J(n),count:1,changes:i,time:a,forget:q(e),unnecessary:null,didCommit:x(e),fps:l},d=i.length>0,u=(e=>{let t=[],n=[e];for(;n.length;){let e=n.pop();e&&(v(e)&&x(e)&&b(e)&&t.push(e),e.child&&n.push(e.child),e.sibling&&n.push(e.sibling))}return t})(e).length>0;"update"===t&&fa(e,a,s,d,u);for(let t=0,n=o.length;t<n;t++){r[o[t]].config.onRender(e,[c])}});for(const e of r)e.config.onCommitFinish()},onPostCommitFiberRoot(){const e=ua();for(const t of e)t.config.onPostCommitFiberRoot()}})),n},va=(e,t)=>{const n=t-e;return Math.abs(n)<.5?t:e+.2*n},wa="115,97,230";function ba(e,t){return t[0]-e[0]}function xa([e,t]){let n=`${t.slice(0,4).join(", ")} ×${e}`;return n.length>40&&(n=`${n.slice(0,40)}…`),n}var ya=e=>{const t=new Map;for(const{name:n,count:r}of e)t.set(n,(t.get(n)||0)+r);const n=new Map;for(const[e,r]of t){const t=n.get(r);t?t.push(e):n.set(r,[e])}const r=function(e){return[...e.entries()].sort(ba)}(n);let o=xa(r[0]);for(let e=1,t=r.length;e<t;e++)o+=", "+xa(r[e]);return o.length>40?`${o.slice(0,40)}…`:o},ka=e=>{let t=0;for(const n of e)t+=n.width*n.height;return t},_a=(e,t)=>{for(const{id:n,name:r,count:o,x:i,y:a,width:s,height:l,didCommit:c}of t){const t={id:n,name:r,count:o,x:i,y:a,width:s,height:l,frame:0,targetX:i,targetY:a,targetWidth:s,targetHeight:l,didCommit:c},d=String(t.id),u=e.get(d);u?(u.count++,u.frame=0,u.targetX=i,u.targetY=a,u.targetWidth=s,u.targetHeight=l,u.didCommit=c):e.set(d,t)}},Na=(e,t,n)=>{for(const r of e.values()){const e=r.x-t,o=r.y-n;r.targetX=e,r.targetY=o}},Sa=null,Ca=null,Ta=null,Ea=1,za=null,Aa=new Map,Ma=new Map,$a=new Set,Fa=e=>{if(!w(e))return;const t="string"==typeof e.type?e.type:J(e);if(!t)return;const n=Ma.get(e),r=(e=>{let t=[],n=[];for(v(e)?t.push(e):e.child&&n.push(e.child);n.length;){let e=n.pop();if(!e)break;v(e)?t.push(e):e.child&&n.push(e.child),e.sibling&&n.push(e.sibling)}return t})(e),o=x(e);n?n.count++:(Ma.set(e,{name:t,count:1,elements:r.map(e=>e.stateNode),didCommit:o?1:0}),$a.add(e))},Ra=e=>{const t=e[0];if(1===e.length)return t;let n,r,o,i;for(let t=0,a=e.length;t<a;t++){const a=e[t];n=null==n?a.x:Math.min(n,a.x),r=null==r?a.y:Math.min(r,a.y),o=null==o?a.x+a.width:Math.max(o,a.x+a.width),i=null==i?a.y+a.height:Math.max(i,a.y+a.height)}return null==n||null==r||null==o||null==i?e[0]:new DOMRect(n,r,o-n,i-r)};function Oa(e,t){const n=[];for(const t of e){const e=t.target;this.seenElements.has(e)||(this.seenElements.add(e),n.push(t))}n.length>0&&this.resolveNext&&(this.resolveNext(n),this.resolveNext=null),this.seenElements.size===this.uniqueElements.size&&(t.disconnect(),this.done=!0,this.resolveNext&&this.resolveNext([]))}var Da,ja=async function*(e){const t={uniqueElements:new Set(e),seenElements:new Set,resolveNext:null,done:!1},n=new IntersectionObserver(Oa.bind(t));for(const e of t.uniqueElements)n.observe(e);for(;!t.done;){const e=await new Promise(e=>{t.resolveNext=e});e.length>0&&(yield e)}},La="undefined"!=typeof SharedArrayBuffer?SharedArrayBuffer:ArrayBuffer,Pa=async()=>{const e=[];for(const t of $a){const n=Ma.get(t);if(n)for(let t=0;t<n.elements.length;t++)n.elements[t]instanceof Element&&e.push(n.elements[t])}const t=new Map;for await(const n of ja(e)){for(const e of n){const n=e.target,r=e.intersectionRect;e.isIntersecting&&r.width&&r.height&&t.set(n,r)}const e=[],r=[],o=[];for(const n of $a){const i=Ma.get(n);if(!i)continue;const a=[];for(let e=0;e<i.elements.length;e++){const n=i.elements[e],r=t.get(n);r&&a.push(r)}a.length&&(e.push(i),r.push(Ra(a)),o.push(Z(n)))}if(e.length>0){const t=new La(7*e.length*4),n=new Float32Array(t),i=new Array(e.length);let a;for(let t=0,s=e.length;t<s;t++){const s=e[t],l=o[t],{x:c,y:d,width:u,height:p}=r[t],{count:h,name:m,didCommit:f}=s;if(Sa){const e=7*t;n[e]=l,n[e+1]=h,n[e+2]=c,n[e+3]=d,n[e+4]=u,n[e+5]=p,n[e+6]=f,i[t]=m}else a||(a=new Array(e.length)),a[t]={id:l,name:m,count:h,x:c,y:d,width:u,height:p,didCommit:f}}Sa?Sa.postMessage({type:"draw-outlines",data:t,names:i}):Ca&&Ta&&a&&(_a(Aa,a),za||(za=requestAnimationFrame(Ia)))}}for(const e of $a)Ma.delete(e),$a.delete(e)},Ia=()=>{if(!Ta||!Ca)return;const e=((e,t,n,r)=>{e.clearRect(0,0,t.width/n,t.height/n);const o=new Map,i=new Map;for(const e of r.values()){const{x:t,y:n,width:r,height:a,targetX:s,targetY:l,targetWidth:c,targetHeight:d,frame:u}=e;s!==t&&(e.x=va(t,s)),l!==n&&(e.y=va(n,l)),c!==r&&(e.width=va(r,c)),d!==a&&(e.height=va(a,d));const p=`${null!=s?s:t},${null!=l?l:n}`,h=`${p},${null!=c?c:r},${null!=d?d:a}`,m=o.get(p);m?m.push(e):o.set(p,[e]);const f=1-u/45;e.frame++;const g=i.get(h)||{x:t,y:n,width:r,height:a,alpha:f};f>g.alpha&&(g.alpha=f),i.set(h,g)}for(const{x:t,y:n,width:r,height:o,alpha:a}of i.values()){e.strokeStyle=`rgba(${wa},${a})`,e.lineWidth=1;const i=Math.round(t)+.5,s=Math.round(n)+.5,l=Math.round(r),c=Math.round(o);e.beginPath(),e.rect(i,s,l,c),e.stroke(),e.fillStyle=`rgba(${wa},${.1*a})`,e.fill()}e.font="11px Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace";const a=new Map;e.textRendering="optimizeSpeed";for(const t of o.values()){const n=t[0],{x:o,y:i,frame:s}=n,l=1-s/45,c=ya(t),{width:d}=e.measureText(c),u=11;if(a.set(`${o},${i},${d},${c}`,{text:c,width:d,height:u,alpha:l,x:o,y:i,outlines:t}),s>45)for(const e of t)r.delete(String(e.id))}const s=Array.from(a.entries()).sort(([e,t],[n,r])=>ka(r.outlines)-ka(t.outlines));for(const[t,n]of s)if(a.has(t))for(const[r,o]of a.entries()){if(t===r)continue;const{x:i,y:s,width:l,height:c}=n,{x:d,y:u,width:p,height:h}=o;i+l>d&&d+p>i&&s+c>u&&u+h>s&&(n.text=ya(n.outlines.concat(o.outlines)),n.width=e.measureText(n.text).width,a.delete(r))}for(const t of a.values()){const{x:n,y:r,alpha:o,width:i,height:a,text:s}=t;let l=r-a-4;l<0&&(l=0),e.fillStyle=`rgba(${wa},${o})`,e.fillRect(n,l,i+4,a+4),e.fillStyle=`rgba(255,255,255,${o})`,e.fillText(s,n+2,l+a)}return r.size>0})(Ta,Ca,Ea,Aa);za=e?requestAnimationFrame(Ia):null},Wa="undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof Worker,Ua=()=>Math.min(window.devicePixelRatio||1,2),Ha=()=>globalThis.__REACT_SCAN_STOP__,Ba=()=>{const e=document.querySelector("[data-react-scan]");e&&e.remove()},Va=e=>{var t,n;if(w(e)&&!1!==Wu.options.value.showToolbar&&"focused"===Iu.inspectState.value.kind){const r=e,{selfTime:o}=V(e),i=J(e.type),a=Z(r),s=Iu.reportData.get(a),l=null!=(t=null==s?void 0:s.count)?t:0,c=null!=(n=null==s?void 0:s.time)?n:0,d=[],u=Iu.changesListeners.get(Z(e));if(null==u?void 0:u.length){const t=_i(e).map(e=>({type:1,name:e.name,value:e.value,prevValue:e.prevValue,unstable:!1})),n=(e=>{var t,n;if(!e)return[];const r=[];if(0===e.tag||11===e.tag||15===e.tag||14===e.tag){let n=e.memoizedState,o=null==(t=e.alternate)?void 0:t.memoizedState,i=0;for(;n;){if(n.queue&&void 0!==n.memoizedState){const e={type:2,name:i.toString(),value:n.memoizedState,prevValue:null==o?void 0:o.memoizedState};en(e.prevValue,e.value)||r.push(e)}n=n.next,o=null==o?void 0:o.next,i++}return r}if(1===e.tag){const t={type:3,name:"state",value:e.memoizedState,prevValue:null==(n=e.alternate)?void 0:n.memoizedState};return en(t.prevValue,t.value)||r.push(t),r}return r})(e),r=la(e).map(e=>({name:e.name,type:4,value:e.value,contextType:e.contextType}));u.forEach(e=>{e({propsChanges:t,stateChanges:n,contextChanges:r})})}const p={count:l+1,time:c+o||0,renders:[],displayName:i,type:G(e.type)||null,changes:d};Iu.reportData.set(a,p),qa=!0}},qa=!1,Ga=e=>!Zu.has(e.memoizedProps),Ja=!1,Ya=e=>{if(Ha())return;if(Ja)return;let t;Ja=!0;let n=!1;const r=()=>{n||(t&&cancelAnimationFrame(t),t=requestAnimationFrame(()=>{n=!0;const t=(()=>{Ba();const e=document.createElement("div");e.setAttribute("data-react-scan","true");const t=e.attachShadow({mode:"open"}),n=document.createElement("canvas");if(n.style.position="fixed",n.style.top="0",n.style.left="0",n.style.pointerEvents="none",n.style.zIndex="2147483646",n.setAttribute("aria-hidden","true"),t.appendChild(n),!n)return null;Ea=Ua(),Ca=n;const{innerWidth:r,innerHeight:o}=window;n.style.width=`${r}px`,n.style.height=`${o}px`;const i=r*Ea,a=o*Ea;n.width=i,n.height=a;const s=!1===Wu.options.value.useOffscreenCanvasWorker;if(Wa&&!window.__REACT_SCAN_EXTENSION__&&!s)try{const e=URL.createObjectURL(new Blob(['"use strict";(()=>{var D="Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace";var T=(t,n)=>{let r=n-t;return Math.abs(r)<.5?n:t+r*.2};var x="115,97,230";function P(t,n){return n[0]-t[0]}function F(t){return[...t.entries()].sort(P)}function v([t,n]){let r=`${n.slice(0,4).join(", ")} \\xD7${t}`;return r.length>40&&(r=`${r.slice(0,40)}\\u2026`),r}var $=t=>{let n=new Map;for(let{name:e,count:u}of t)n.set(e,(n.get(e)||0)+u);let r=new Map;for(let[e,u]of n){let A=r.get(u);A?A.push(e):r.set(u,[e])}let d=F(r),a=v(d[0]);for(let e=1,u=d.length;e<u;e++)a+=", "+v(d[e]);return a.length>40?`${a.slice(0,40)}\\u2026`:a},H=t=>{let n=0;for(let r of t)n+=r.width*r.height;return n};var N=(t,n)=>{let r=t.getContext("2d",{alpha:!0});return r&&r.scale(n,n),r},X=(t,n,r,d)=>{t.clearRect(0,0,n.width/r,n.height/r);let a=new Map,e=new Map;for(let i of d.values()){let{x:o,y:c,width:l,height:g,targetX:s,targetY:f,targetWidth:h,targetHeight:m,frame:O}=i;s!==o&&(i.x=T(o,s)),f!==c&&(i.y=T(c,f)),h!==l&&(i.width=T(l,h)),m!==g&&(i.height=T(g,m));let M=`${s??o},${f??c}`,L=`${M},${h??l},${m??g}`,S=a.get(M);S?S.push(i):a.set(M,[i]);let C=1-O/45;i.frame++;let _=e.get(L)||{x:o,y:c,width:l,height:g,alpha:C};C>_.alpha&&(_.alpha=C),e.set(L,_)}for(let{x:i,y:o,width:c,height:l,alpha:g}of e.values()){t.strokeStyle=`rgba(${x},${g})`,t.lineWidth=1;let s=Math.round(i)+.5,f=Math.round(o)+.5,h=Math.round(c),m=Math.round(l);t.beginPath(),t.rect(s,f,h,m),t.stroke(),t.fillStyle=`rgba(${x},${g*.1})`,t.fill()}t.font=`11px ${D}`;let u=new Map;t.textRendering="optimizeSpeed";for(let i of a.values()){let o=i[0],{x:c,y:l,frame:g}=o,s=1-g/45,f=$(i),{width:h}=t.measureText(f),m=11;u.set(`${c},${l},${h},${f}`,{text:f,width:h,height:m,alpha:s,x:c,y:l,outlines:i});let O=l-m-4;if(O<0&&(O=0),g>45)for(let M of i)d.delete(String(M.id))}let A=Array.from(u.entries()).sort(([i,o],[c,l])=>H(l.outlines)-H(o.outlines));for(let[i,o]of A)if(u.has(i))for(let[c,l]of u.entries()){if(i===c)continue;let{x:g,y:s,width:f,height:h}=o,{x:m,y:O,width:M,height:L}=l;g+f>m&&m+M>g&&s+h>O&&O+L>s&&(o.text=$(o.outlines.concat(l.outlines)),o.width=t.measureText(o.text).width,u.delete(c))}for(let i of u.values()){let{x:o,y:c,alpha:l,width:g,height:s,text:f}=i,h=c-s-4;h<0&&(h=0),t.fillStyle=`rgba(${x},${l})`,t.fillRect(o,h,g+4,s+4),t.fillStyle=`rgba(255,255,255,${l})`,t.fillText(f,o+2,h+s)}return d.size>0};var p=null,w=null,b=1,y=new Map,E=null,R=()=>{if(!w||!p)return;X(w,p,b,y)?E=requestAnimationFrame(R):E=null};self.onmessage=t=>{let{type:n}=t.data;if(n==="init"&&(p=t.data.canvas,b=t.data.dpr,p&&(p.width=t.data.width,p.height=t.data.height,w=N(p,b))),!(!p||!w)){if(n==="resize"){b=t.data.dpr,p.width=t.data.width*b,p.height=t.data.height*b,w.resetTransform(),w.scale(b,b),R();return}if(n==="draw-outlines"){let{data:r,names:d}=t.data,a=new Float32Array(r);for(let e=0;e<a.length;e+=7){let u=a[e+2],A=a[e+3],i=a[e+4],o=a[e+5],c=a[e+6],l={id:a[e],name:d[e/7],count:a[e+1],x:u,y:A,width:i,height:o,frame:0,targetX:u,targetY:A,targetWidth:i,targetHeight:o,didCommit:c},g=String(l.id),s=y.get(g);s?(s.count++,s.frame=0,s.targetX=u,s.targetY=A,s.targetWidth=i,s.targetHeight=o,s.didCommit=c):y.set(g,l)}E||(E=requestAnimationFrame(R));return}if(n==="scroll"){let{deltaX:r,deltaY:d}=t.data;for(let a of y.values()){let e=a.x-r,u=a.y-d;a.targetX=e,a.targetY=u}}}};})();\n'],{type:"application/javascript"}));Sa=new Worker(e);const t=n.transferControlToOffscreen();Sa.postMessage({type:"init",canvas:t,width:n.width,height:n.height,dpr:Ea},[t])}catch(e){Sa=null,"verbose"===Wu.options.value._debug&&console.warn("Failed to initialize OffscreenCanvas worker:",e)}Sa||(Ta=((e,t)=>{const n=e.getContext("2d",{alpha:!0});return n&&n.scale(t,t),n})(n,Ea));let l=!1;window.addEventListener("resize",()=>{l||(l=!0,setTimeout(()=>{const e=window.innerWidth,t=window.innerHeight;Ea=Ua(),n.style.width=`${e}px`,n.style.height=`${t}px`,Sa?Sa.postMessage({type:"resize",width:e,height:t,dpr:Ea}):(n.width=e*Ea,n.height=t*Ea,Ta&&(Ta.resetTransform(),Ta.scale(Ea,Ea)),Ia()),l=!1}))});let c=window.scrollX,d=window.scrollY,u=!1;return window.addEventListener("scroll",()=>{u||(u=!0,setTimeout(()=>{const{scrollX:e,scrollY:t}=window,n=e-c,r=t-d;c=e,d=t,Sa?Sa.postMessage({type:"scroll",deltaX:n,deltaY:r}):requestAnimationFrame(Na.bind(null,Aa,n,r)),u=!1},32))}),setInterval(()=>{$a.size&&requestAnimationFrame(Pa)},32),t.appendChild(n),e})();t&&document.documentElement.appendChild(t),e()}))},o=ga("react-scan-devtools-0.1.0",{onCommitStart:()=>{var e,t;null==(t=(e=Wu.options.value).onCommitStart)||t.call(e)},onActive:(()=>{let e=!1;return()=>{Ha()||e||(e=!0,r(),window.__REACT_SCAN_EXTENSION__||(globalThis.__REACT_SCAN__={ReactScanInternals:Wu}),clearInterval(Da),Da=setInterval(()=>{qa&&(Iu.lastReportTime.value=Date.now(),qa=!1)},50),window.hideIntro?window.hideIntro=void 0:console.log("%c[·] %cReact Scan","font-weight:bold;color:#7a68e8;font-size:20px;","font-weight:bold;font-size:14px;"))}})(),onError:()=>{},isValidFiber:Ga,onRender:(e,t)=>{var n,r,o,i,a;w(e)&&(null==(r=(n=Iu).interactionListeningForRenders)||r.call(n,e,t));const s=null==(o=Wu.instrumentation)?void 0:o.isPaused.value,l="inspect-off"===Iu.inspectState.value.kind||"uninitialized"===Iu.inspectState.value.kind;s&&l||(s||Fa(e),Wu.options.value.log&&(e=>{var t;const n=new Map;for(let r=0,o=e.length;r<o;r++){const o=e[r];if(!o.componentName)continue;const i=null!=(t=n.get(o.componentName))?t:[],a=Qt([{aggregatedCount:1,computedKey:null,name:o.componentName,frame:null,...o,changes:{type:o.changes.reduce((e,t)=>e|t.type,0),unstable:o.changes.some(e=>e.unstable)},phase:o.phase,computedCurrent:null}]);if(!a)continue;let s=null,l=null;if(o.changes)for(let e=0,t=o.changes.length;e<t;e++){const{name:t,prevValue:n,nextValue:r,unstable:a,type:c}=o.changes[e];1===c?(null!=s||(s={}),null!=l||(l={}),s[`${a?"⚠️":""}${t} (prev)`]=n,l[`${a?"⚠️":""}${t} (next)`]=r):i.push({prev:n,next:r,type:4===c?"context":"state",unstable:null!=a&&a})}s&&l&&i.push({prev:s,next:l,type:"props",unstable:!1}),n.set(a,i)}for(const[e,t]of Array.from(n.entries())){console.group(`%c${e}`,"background: hsla(0,0%,70%,.3); border-radius:3px; padding: 0 2px;");for(const{type:e,prev:n,next:r,unstable:o}of t)console.log(`${e}:`,o?"⚠️":"",n,"!==",r);console.groupEnd()}})(t),"focused"===Iu.inspectState.value.kind&&($o.value=Date.now()),l||Va(e),null==(a=(i=Wu.options.value).onRender)||a.call(i,e,t))},onCommitFinish:()=>{var e,t;r(),null==(t=(e=Wu.options.value).onCommitFinish)||t.call(e)},onPostCommitFiberRoot(){r()},trackChanges:!1});Wu.instrumentation=o},Xa=null;(()=>{if(null!==Xa)return Xa;try{Xa=window.matchMedia("(color-gamut: p3)").matches}catch{Xa=!1}})();var Ka,Za,Qa,es,ts,ns=new Set("display.position.top.right.bottom.left.z-index.overflow.overflow-x.overflow-y.width.height.min-width.min-height.max-width.max-height.margin-top.margin-right.margin-bottom.margin-left.padding-top.padding-right.padding-bottom.padding-left.flex-direction.flex-wrap.justify-content.align-items.align-self.align-content.flex-grow.flex-shrink.flex-basis.order.gap.row-gap.column-gap.grid-template-columns.grid-template-rows.grid-template-areas.font-family.font-size.font-weight.font-style.line-height.letter-spacing.text-align.text-decoration-line.text-decoration-style.text-transform.text-overflow.text-shadow.white-space.word-break.overflow-wrap.vertical-align.color.background-color.background-image.background-position.background-size.background-repeat.border-top-width.border-right-width.border-bottom-width.border-left-width.border-top-style.border-right-style.border-bottom-style.border-left-style.border-top-color.border-right-color.border-bottom-color.border-left-color.border-top-left-radius.border-top-right-radius.border-bottom-left-radius.border-bottom-right-radius.box-shadow.opacity.transform.filter.backdrop-filter.object-fit.object-position".split(".")),rs=e=>(e.tagName||"").toLowerCase(),os=typeof window<"u",is=os?(null!=(Za=null==(Ka=Object.getOwnPropertyDescriptor(Window.prototype,"requestAnimationFrame"))?void 0:Ka.value)?Za:window.requestAnimationFrame).bind(window):e=>0,as=os?(null!=(es=null==(Qa=Object.getOwnPropertyDescriptor(Window.prototype,"cancelAnimationFrame"))?void 0:Qa.value)?es:window.cancelAnimationFrame).bind(window):e=>{},ss="bippy-0.5.39",ls=Object.defineProperty,cs=Object.prototype.hasOwnProperty,ds=()=>{},us=e=>{try{Function.prototype.toString.call(e).indexOf("^_^")>-1&&setTimeout(()=>{throw Error("React is running in production mode, but dead code elimination has not been applied. Read how to correctly configure React for production: https://reactjs.org/link/perf-use-production-build")})}catch{}},ps=(e=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__)=>!(!e||!("getFiberRoots"in e)),hs=!1,ms=(e=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__)=>!!hs||(e&&"function"==typeof e.inject&&(ts=e.inject.toString()),!!(null==ts?void 0:ts.includes("(injected)"))),fs=new Set,gs=new Set,vs=e=>{let t=new Map,n=0,r={_instrumentationIsActive:!1,_instrumentationSource:ss,checkDCE:us,hasUnsupportedRendererAttached:!1,inject(e){let o=++n;return t.set(o,e),gs.add(e),r._instrumentationIsActive||(r._instrumentationIsActive=!0,fs.forEach(e=>e())),o},on:ds,onCommitFiberRoot:ds,onCommitFiberUnmount:ds,onPostCommitFiberRoot:ds,renderers:t,supportsFiber:!0,supportsFlight:!0};try{ls(globalThis,"__REACT_DEVTOOLS_GLOBAL_HOOK__",{configurable:!0,enumerable:!0,get:()=>r,set(t){if(t&&"object"==typeof t){let n=r.renderers;r=t,n.size>0&&(n.forEach((e,n)=>{gs.add(e),t.renderers.set(n,e)}),ws(e))}}});let t=window.hasOwnProperty,n=!1;ls(window,"hasOwnProperty",{configurable:!0,value:function(...e){try{if(!n&&"__REACT_DEVTOOLS_GLOBAL_HOOK__"===e[0])return globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__=void 0,n=!0,-0}catch{}return t.apply(this,e)},writable:!0})}catch{ws(e)}return r},ws=e=>{try{let t=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!t)return;if(!t._instrumentationSource){t.checkDCE=us,t.supportsFiber=!0,t.supportsFlight=!0,t.hasUnsupportedRendererAttached=!1,t._instrumentationSource=ss,t._instrumentationIsActive=!1;let e=ps(t);if(e||(t.on=ds),t.renderers.size)return t._instrumentationIsActive=!0,void fs.forEach(e=>e());let n=t.inject,r=ms(t);r&&!e&&(hs=!0,t.inject({scheduleRefresh(){}})&&(t._instrumentationIsActive=!0)),t.inject=e=>{let o=n(e);return gs.add(e),r&&t.renderers.set(o,e),t._instrumentationIsActive=!0,fs.forEach(e=>e()),o}}(t.renderers.size||t._instrumentationIsActive||ms())&&(null==e||e())}catch{}},bs=e=>cs.call(globalThis,"__REACT_DEVTOOLS_GLOBAL_HOOK__")?(ws(e),globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__):vs(e),xs=e=>{switch(e.tag){case 1:case 11:case 0:case 14:case 15:return!0;default:return!1}};function ys(e,t,n=!1){if(!e)return null;let r=t(e);if(r instanceof Promise)return(async()=>{if(!0===await r)return e;let o=n?e.return:e.child;for(;o;){let e=await _s(o,t,n);if(e)return e;o=n?null:o.sibling}return null})();if(!0===r)return e;let o=n?e.return:e.child;for(;o;){let e=ks(o,t,n);if(e)return e;o=n?null:o.sibling}return null}var ks=(e,t,n=!1)=>{if(!e)return null;if(!0===t(e))return e;let r=n?e.return:e.child;for(;r;){let e=ks(r,t,n);if(e)return e;r=n?null:r.sibling}return null},_s=async(e,t,n=!1)=>{if(!e)return null;if(!0===await t(e))return e;let r=n?e.return:e.child;for(;r;){let e=await _s(r,t,n);if(e)return e;r=n?null:r.sibling}return null},Ns=e=>{let t=e;return"function"==typeof t?t:"object"==typeof t&&t?Ns(t.type||t.render):null},Ss=e=>{let t=e;if("string"==typeof t)return t;if("function"!=typeof t&&("object"!=typeof t||!t))return null;let n=t.displayName||t.name||null;if(n)return n;let r=Ns(t);return r&&(r.displayName||r.name)||null},Cs=()=>{let e=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;return!!(null==e?void 0:e._instrumentationIsActive)||ps(e)||ms(e)},Ts=e=>{var t,n,r,o;let i=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;if(null==i?void 0:i.renderers)for(let n of i.renderers.values())try{let r=null==(t=n.findFiberByHostInstance)?void 0:t.call(n,e);if(r)return r}catch{}if("object"==typeof e&&e){if("_reactRootContainer"in e)return null==(o=null==(r=null==(n=e._reactRootContainer)?void 0:n._internalRoot)?void 0:r.current)?void 0:o.child;for(let t in e)if(t.startsWith("__reactContainer$")||t.startsWith("__reactInternalInstance$")||t.startsWith("__reactFiber"))return e[t]||null}return null},Es=/^[a-zA-Z][a-zA-Z\d+\-.]*:/,zs=["rsc://","file:///","webpack-internal://","webpack://","node:","turbopack://","metro://","/app-pages-browser/","/(app-pages-browser)/"],As=["<anonymous>","eval",""],Ms=/\.(jsx|tsx|ts|js)$/,$s=/(\.min|bundle|chunk|vendor|vendors|runtime|polyfill|polyfills)\.(js|mjs|cjs)$|(chunk|bundle|vendor|vendors|runtime|polyfill|polyfills|framework|app|main|index)[-_.][A-Za-z0-9_-]{4,}\.(js|mjs|cjs)$|[\da-f]{8,}\.(js|mjs|cjs)$|[-_.][\da-f]{20,}\.(js|mjs|cjs)$|\/dist\/|\/build\/|\/.next\/|\/out\/|\/node_modules\/|\.webpack\.|\.vite\.|\.turbopack\./i,Fs=/^\?[\w~.-]+(?:=[^&#]*)?(?:&[\w~.-]+(?:=[^&#]*)?)*$/,Rs=/(^|@)\S+:\d+/,Os=/^\s*at .*(\S+:\d+|\(native\))/m,Ds=/^(eval@)?(\[native code\])?$/,js=(e,t)=>{{let n=e.split("\n"),r=[];for(let e of n)if(/^\s*at\s+/.test(e)){let t=Is(e,void 0)[0];t&&r.push(t)}else if(/^\s*in\s+/.test(e)){let t=e.replace(/^\s*in\s+/,"").replace(/\s*\(at .*\)$/,"");r.push({functionName:t,source:e})}else if(e.match(Rs)){let t=Ws(e,void 0)[0];t&&r.push(t)}return Ps(r,t)}},Ls=e=>{if(!e.includes(":"))return[e,void 0,void 0];let t=e.startsWith("(")&&/:\d+\)$/.test(e)?e.slice(1,-1):e,n=/(.+?)(?::(\d+))?(?::(\d+))?$/.exec(t);return n?[n[1],n[2]||void 0,n[3]||void 0]:[t,void 0,void 0]},Ps=(e,t)=>t&&null!=t.slice?Array.isArray(t.slice)?e.slice(t.slice[0],t.slice[1]):e.slice(0,t.slice):e,Is=(e,t)=>Ps(e.split("\n").filter(e=>!!e.match(Os)),t).map(e=>{let t=e;t.includes("(eval ")&&(t=t.replace(/eval code/g,"eval").replace(/(\(eval at [^()]*)|(,.*$)/g,""));let n=t.replace(/^\s+/,"").replace(/\(eval code/g,"(").replace(/^.*?\s+/,""),r=n.match(/ (\(.+\)$)/);n=r?n.replace(r[0],""):n;let o=Ls(r?r[1]:n);return{functionName:r&&n||void 0,fileName:["eval","<anonymous>"].includes(o[0])?void 0:o[0],lineNumber:o[1]?+o[1]:void 0,columnNumber:o[2]?+o[2]:void 0,source:t}}),Ws=(e,t)=>Ps(e.split("\n").filter(e=>!e.match(Ds)),t).map(e=>{let t=e;if(t.includes(" > eval")&&(t=t.replace(/ line (\d+)(?: > eval line \d+)* > eval:\d+:\d+/g,":$1")),!t.includes("@")&&!t.includes(":"))return{functionName:t};{let e=/(([^\n\r"\u2028\u2029]*".[^\n\r"\u2028\u2029]*"[^\n\r@\u2028\u2029]*(?:@[^\n\r"\u2028\u2029]*"[^\n\r@\u2028\u2029]*)*(?:[\n\r\u2028\u2029][^@]*)?)?[^@]*)@/,n=t.match(e),r=n&&n[1]?n[1]:void 0,o=Ls(t.replace(e,""));return{functionName:r,fileName:o[0],lineNumber:o[1]?+o[1]:void 0,columnNumber:o[2]?+o[2]:void 0,source:t}}}),Us="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",Hs=new Uint8Array(64),Bs=new Uint8Array(128);for(let e=0;e<Us.length;e++){let t=Us.charCodeAt(e);Hs[e]=t,Bs[t]=e}function Vs(e,t){let n=0,r=0,o=0;do{o=Bs[e.next()],n|=(31&o)<<r,r+=5}while(32&o);let i=1&n;return n>>>=1,i&&(n=-2147483648|-n),t+n}function qs(e,t){return!(e.pos>=t)&&44!==e.peek()}var Gs=class{constructor(e){this.pos=0,this.buffer=e}next(){return this.buffer.charCodeAt(this.pos++)}peek(){return this.buffer.charCodeAt(this.pos)}indexOf(e){let{buffer:t,pos:n}=this,r=t.indexOf(e,n);return-1===r?t.length:r}};function Js(e){let{length:t}=e,n=new Gs(e),r=[],o=0,i=0,a=0,s=0,l=0;do{let e=n.indexOf(";"),t=[],c=!0,d=0;for(o=0;n.pos<e;){let r;o=Vs(n,o),o<d&&(c=!1),d=o,qs(n,e)?(i=Vs(n,i),a=Vs(n,a),s=Vs(n,s),qs(n,e)?(l=Vs(n,l),r=[o,i,a,s,l]):r=[o,i,a,s]):r=[o],t.push(r),n.pos++}c||Ys(t),r.push(t),n.pos=e+1}while(n.pos<=t);return r}function Ys(e){e.sort(Xs)}function Xs(e,t){return e[0]-t[0]}var Ks=/^[a-zA-Z][a-zA-Z\d+\-.]*:/,Zs=/^data:application\/json[^,]+base64,/,Qs=/(?:\/\/[@#][ \t]+sourceMappingURL=([^\s'"]+?)[ \t]*$)|(?:\/\*[@#][ \t]+sourceMappingURL=([^*]+?)[ \t]*(?:\*\/)[ \t]*$)/,el=typeof WeakRef<"u",tl=new Map,nl=new Map,rl=(e,t,n,r)=>{if(n<0||n>=e.length)return null;let o=e[n];if(!o||0===o.length)return null;let i=null;for(let e of o){if(!(e[0]<=r))break;i=e}if(!i||i.length<4)return null;let[,a,s,l]=i;if(void 0===a||void 0===s||void 0===l)return null;let c=t[a];return c?{columnNumber:l,fileName:c,lineNumber:s+1}:null},ol=e=>{if(!e)return!1;let t=e.trim();if(!t)return!1;let n=t.match(Ks);if(!n)return!0;let r=n[0].toLowerCase();return"http:"===r||"https:"===r},il=async(e,t=fetch)=>{if(!ol(e))return null;let n;try{let r=await t(e);if(!r.ok)return null;n=await r.text()}catch{return null}if(!n)return null;let r=((e,t)=>{let n,r=t.split("\n");for(let e=r.length-1;e>=0&&!n;e--){let t=r[e].match(Qs);t&&(n=t[1]||t[2])}if(!n)return null;let o=Ks.test(n);if(!(Zs.test(n)||o||n.startsWith("/"))){let t=e.split("/");t[t.length-1]=n,n=t.join("/")}return n})(e,n);if(!r||!ol(r))return null;try{let e=await t(r);if(!e.ok)return null;let n=await e.json();return"sections"in n?(e=>{let t=e.sections.map(({map:e,offset:t})=>({map:{...e,mappings:Js(e.mappings)},offset:t})),n=new Set;for(let e of t)for(let t of e.map.sources)n.add(t);return{file:e.file,mappings:[],names:[],sections:t,sourceRoot:void 0,sources:Array.from(n),sourcesContent:void 0,version:3}})(n):(e=>({file:e.file,mappings:Js(e.mappings),names:e.names,sourceRoot:e.sourceRoot,sources:e.sources,sourcesContent:e.sourcesContent,version:3}))(n)}catch{return null}},al=async(e,t=!0,n)=>{if(t&&tl.has(e)){let t=tl.get(e);if(null==t)return null;if(!(e=>el&&e instanceof WeakRef)(t))return t;{let n=t.deref();if(n)return n;tl.delete(e)}}if(t&&nl.has(e))return nl.get(e);let r=il(e,n);t&&nl.set(e,r);let o=await r;return t&&nl.delete(e),t&&(null===o?tl.set(e,null):tl.set(e,el?new WeakRef(o):o)),o},sl=async(e,t=!0,n)=>await Promise.all(e.map(async e=>{if(!e.fileName)return e;let r=await al(e.fileName,t,n);if(!r||"number"!=typeof e.lineNumber||"number"!=typeof e.columnNumber)return e;let o=((e,t,n)=>{if(e.sections){let r=null;for(let o of e.sections){if(!(t>o.offset.line||t===o.offset.line&&n>=o.offset.column))break;r=o}if(!r)return null;let o=t-r.offset.line,i=t===r.offset.line?n-r.offset.column:n;return rl(r.map.mappings,r.map.sources,o,i)}return rl(e.mappings,e.sources,t-1,n)})(r,e.lineNumber,e.columnNumber);return o?{...e,source:o.fileName&&e.source?e.source.replace(e.fileName,o.fileName):e.source,fileName:o.fileName,lineNumber:o.lineNumber,columnNumber:o.columnNumber,isSymbolicated:!0}:e})),ll=e=>{var t;return e._debugStack instanceof Error&&"string"==typeof(null==(t=e._debugStack)?void 0:t.stack)},cl=e=>{for(let t of gs){let n=t.currentDispatcherRef;n&&"object"==typeof n&&("H"in n?n.H=e:n.current=e)}},dl=e=>`\n    in ${e}`,ul=(e,t)=>{let n=dl(e);return t&&(n+=` (at ${t})`),n},pl=!1,hl=(e,t)=>{var n;if(!e||pl)return"";let r=Error.prepareStackTrace;Error.prepareStackTrace=void 0,pl=!0;let o=(()=>{let e=bs();for(let t of[...Array.from(gs),...Array.from(e.renderers.values())]){let e=t.currentDispatcherRef;if(e&&"object"==typeof e)return"H"in e?e.H:e.current}return null})();cl(null);let i=console.error,a=console.warn;console.error=()=>{},console.warn=()=>{};try{let r={DetermineComponentFrameRoot(){let n;try{if(t){let t=function(){throw Error()};if(Object.defineProperty(t.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(t,[])}catch(e){n=e}Reflect.construct(e,[],t)}else{try{t.call()}catch(e){n=e}e.call(t.prototype)}}else{try{throw Error()}catch(e){n=e}let t=e();t&&"function"==typeof t.catch&&t.catch(()=>{})}}catch(e){if(e instanceof Error&&n instanceof Error&&"string"==typeof e.stack)return[e.stack,n.stack]}return[null,null]}};r.DetermineComponentFrameRoot.displayName="DetermineComponentFrameRoot",(null==(n=Object.getOwnPropertyDescriptor(r.DetermineComponentFrameRoot,"name"))?void 0:n.configurable)&&Object.defineProperty(r.DetermineComponentFrameRoot,"name",{value:"DetermineComponentFrameRoot"});let[o,i]=r.DetermineComponentFrameRoot();if(o&&i){let t=o.split("\n"),n=i.split("\n"),r=0,a=0;for(;r<t.length&&!t[r].includes("DetermineComponentFrameRoot");)r++;for(;a<n.length&&!n[a].includes("DetermineComponentFrameRoot");)a++;if(r===t.length||a===n.length)for(r=t.length-1,a=n.length-1;r>=1&&a>=0&&t[r]!==n[a];)a--;for(;r>=1&&a>=0;r--,a--)if(t[r]!==n[a]){if(1!==r||1!==a)do{if(r--,a--,a<0||t[r]!==n[a]){let n=`\n${t[r].replace(" at new "," at ")}`,o=Ss(e);return o&&n.includes("<anonymous>")&&(n=n.replace("<anonymous>",o)),n}}while(r>=1&&a>=0);break}}}finally{pl=!1,Error.prepareStackTrace=r,cl(o),console.error=i,console.warn=a}let s=e?Ss(e):"";return s?dl(s):""},ml=(e,t)=>{let n="";switch(e.tag){case 28:n=dl("Activity");break;case 1:n=hl(e.type,!0);break;case 11:n=hl(e.type.render,!1);break;case 0:case 15:n=hl(e.type,!1);break;case 5:case 26:case 27:n=dl(e.type);break;case 16:n=dl("Lazy");break;case 13:n=e.child!==t&&null!==t?dl("Suspense Fallback"):dl("Suspense");break;case 19:n=dl("SuspenseList");break;case 30:n=dl("ViewTransition");break;default:return""}return n},fl=e=>{let t=Error.prepareStackTrace;Error.prepareStackTrace=void 0;let n=e;if(!n)return"";Error.prepareStackTrace=t,n.startsWith("Error: react-stack-top-frame\n")&&(n=n.slice(29));let r=n.indexOf("\n");return-1!==r&&(n=n.slice(r+1)),r=Math.max(n.indexOf("react_stack_bottom_frame"),n.indexOf("react-stack-bottom-frame")),-1!==r&&(r=n.lastIndexOf("\n",r)),-1===r?"":(n=n.slice(0,r),n)},gl=e=>{var t;return!(!(null==(t=e.fileName)?void 0:t.startsWith("rsc://"))||!e.functionName)},vl=(e,t)=>e.fileName===t.fileName&&e.lineNumber===t.lineNumber&&e.columnNumber===t.columnNumber,wl=async(e,t=!0,n)=>{let r=(e=>{let t=[];return ys(e,e=>{var n;if(!ll(e))return;let r="string"==typeof e.type?e.type:Ss(e.type)||"<anonymous>";t.push({componentName:r,stackFrames:js(fl(null==(n=e._debugStack)?void 0:n.stack))})},!0),t})(e),o=js((e=>{try{let t="",n=e,r=null;do{t+=ml(n,r);let e=n._debugInfo;if(e&&Array.isArray(e))for(let n=e.length-1;n>=0;n--){let r=e[n];"string"==typeof r.name&&(t+=ul(r.name,r.env))}r=n,n=n.return}while(n);return t}catch(e){return e instanceof Error?`\nError generating stack: ${e.message}\n${e.stack}`:""}})(e)),i=(e=>{var t;let n=new Map;for(let r of e)for(let e of r.stackFrames){if(!gl(e))continue;let r=e.functionName,o=null!=(t=n.get(r))?t:[];o.some(t=>vl(t,e))||(o.push(e),n.set(r,o))}return n})(r),a=new Map;return sl(o.map(e=>{var t,n;return null!=(n=null==(t=e.source)?void 0:t.includes("(at Server)"))&&n?((e,t,n)=>{var r,o;if(!e.functionName)return{...e,isServer:!0};let i=t.get(e.functionName);if(!i||0===i.length)return{...e,isServer:!0};let a=null!=(r=n.get(e.functionName))?r:0,s=i[a%i.length];return n.set(e.functionName,a+1),{...e,isServer:!0,fileName:s.fileName,lineNumber:s.lineNumber,columnNumber:s.columnNumber,source:null==(o=e.source)?void 0:o.replace("(at Server)",`(${s.fileName}:${s.lineNumber}:${s.columnNumber})`)}})(e,i,a):e}).filter((e,t,n)=>{if(0===t)return!0;let r=n[t-1];return e.functionName!==r.functionName}),t,n)},bl=e=>e.split("/").filter(Boolean).length,xl=e=>{let t=e.indexOf("/",1);if(-1===t||1!==bl(e.slice(0,t)))return e;let n=e.slice(t);if(!Ms.test(n)||bl(n)<2)return e;let r=(e=>{var t;return null!=(t=e.split("/").filter(Boolean)[0])?t:null})(n);return!r||r.startsWith("@")||r.length>4?e:n},yl=e=>{if(!e||As.some(t=>t===e))return"";let t=e,n=t.startsWith("http://")||t.startsWith("https://");if(n)try{t=new URL(t).pathname}catch{}if(n&&(t=xl(t)),t.startsWith("about://React/")){let e=t.slice(14),n=e.indexOf("/"),r=e.indexOf(":");t=-1!==n&&(-1===r||n<r)?e.slice(n+1):e}let r=!0;for(;r;){r=!1;for(let e of zs)if(t.startsWith(e)){t=t.slice(e.length),"file:///"===e&&(t=`/${t.replace(/^\/+/,"")}`),r=!0;break}}if(Es.test(t)){let e=t.match(Es);e&&(t=t.slice(e[0].length))}if(t.startsWith("//")){let e=t.indexOf("/",2);t=-1===e?"":t.slice(e)}let o=t.indexOf("?");if(-1!==o){let e=t.slice(o);Fs.test(e)&&(t=t.slice(0,o))}return t},kl=e=>{let t=yl(e);return!(!t||!Ms.test(t)||$s.test(t))},_l=Symbol.for("react.context"),Nl=Error("Suspense Exception: This is not a real error! It's an implementation detail of `use` to interrupt the current render."),Sl=e=>e._currentValue;typeof Proxy>"u"||new Proxy({readContext:Sl,use:e=>{if("object"==typeof e&&e){let t=e;if("function"==typeof t.then){let e=t;switch(e.status){case"fulfilled":return e.value,e.value;case"rejected":throw e.reason}throw Nl}if(t.$$typeof===_l&&"_currentValue"in t){let e=t,n=Sl(e);return e.displayName,n}}throw Error("An unsupported type was passed to use(): "+String(e))},useCallback:e=>e,useContext:e=>{let t=Sl(e);return e.displayName,t},useEffect:e=>{},useImperativeHandle:e=>{"object"==typeof e&&e&&"current"in e&&e.current},useLayoutEffect:e=>{},useInsertionEffect:e=>{},useMemo:e=>e(),useReducer:(e,t,n)=>[void 0===n?t:n(t),()=>{}],useRef:e=>{let t={current:e};return t},useState:e=>["function"==typeof e?e():e,()=>{}],useDebugValue:(e,t)=>{"function"==typeof t&&t(e)},useDeferredValue:e=>e,useTransition:()=>[false,()=>{}],useSyncExternalStore:(e,t)=>t(),useId:()=>"",useHostTransitionStatus:()=>Sl({_currentValue:null}),useFormState:(e,t)=>{let{value:n}=((e,t)=>{let n;return n=t,{value:n,error:null}})(0,t);return[n,()=>{},!1]},useActionState:(e,t)=>{let{value:n}=((e,t)=>{let n;return n=t,{value:n,error:null}})(0,t);return[n,()=>{},!1]},useOptimistic:e=>[e,()=>{}],useMemoCache:e=>[],useCacheRefresh:()=>()=>{},useEffectEvent:e=>e},{get(e,t){if(Object.prototype.hasOwnProperty.call(e,t))return e[t];let n=Error("Missing method in Dispatcher: "+t);throw n.name="ReactDebugToolsUnsupportedHookError",n}}),(()=>{try{typeof window<"u"&&((null==(e=window.document)?void 0:e.createElement)||"ReactNative"===(null==(t=window.navigator)?void 0:t.product))&&bs()}catch{}var e,t})();var Cl,Tl,El=(e,t)=>e.length>t?`${e.slice(0,t)}...`:e,zl=/^(?:\.\/)?\/?\([a-z][a-z0-9-]*\)\//,Al=e=>{let t=yl(e);return t=t.replace(zl,""),t.startsWith("./")&&(t=t.slice(2)),t},Ml=e=>e.startsWith("data-react-grab-"),$l=new Set(["_","$","motion.","styled.","chakra.","ark.","Primitive.","Slot."]),Fl=new Set(["InnerLayoutRouter","RedirectErrorBoundary","RedirectBoundary","HTTPAccessFallbackErrorBoundary","HTTPAccessFallbackBoundary","LoadingBoundary","ErrorBoundary","InnerScrollAndFocusHandler","ScrollAndFocusHandler","RenderFromTemplateContext","OuterLayoutRouter","body","html","DevRootHTTPAccessFallbackBoundary","AppDevOverlayErrorBoundary","AppDevOverlay","HotReload","Router","ErrorBoundaryHandler","AppRouter","ServerRoot","SegmentStateProvider","RootErrorBoundary","LoadableComponent","MotionDOMComponent"]),Rl=new Set(["Suspense","Fragment","StrictMode","Profiler","SuspenseList"]),Ol=e=>(null!=Tl||(Tl=typeof document<"u"&&!(!document.getElementById("__NEXT_DATA__")&&!document.querySelector("nextjs-portal"))),Tl),Dl=e=>{if(Fl.has(e)||Rl.has(e))return!0;for(let t of $l)if(e.startsWith(t))return!0;return!1},jl=e=>!(!e||Dl(e)||"SlotClone"===e||"Slot"===e),Ll=e=>!(e.length<=1||Dl(e)||e[0]!==e[0].toUpperCase()||e.endsWith("Provider")||e.endsWith("Context")),Pl=["about://React/","rsc://React/"],Il=e=>Pl.some(t=>e.startsWith(t)),Wl=e=>{for(let t of Pl){if(!e.startsWith(t))continue;let n=e.indexOf("/",t.length),r=e.lastIndexOf("?");if(n>-1&&r>-1)return decodeURI(e.slice(n+1,r))}return e},Ul=async e=>{var t,n,r,o,i,a;let s=[],l=[];for(let o=0;o<e.length;o++){let i=e[o];!i.isServer||!i.fileName||(s.push(o),l.push({file:Wl(i.fileName),methodName:null!=(t=i.functionName)?t:"<unknown>",line1:null!=(n=i.lineNumber)?n:null,column1:null!=(r=i.columnNumber)?r:null,arguments:[]}))}if(0===l.length)return e;let c=new AbortController,d=setTimeout(()=>c.abort(),5e3);try{let t=await fetch(`${(()=>{var e;if(void 0!==Cl)return Cl;let t=null==(e=document.querySelector('script[src*="/_next/"]'))?void 0:e.src,n=t?new URL(t).pathname:"",r=n.indexOf("/_next/");return Cl=r>0?n.slice(0,r):""})()}/__nextjs_original-stack-frames`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({frames:l,isServer:!0,isEdgeServer:!1,isAppDirectory:!0}),signal:c.signal});if(!t.ok)return e;let n=await t.json(),r=[...e];for(let t=0;t<s.length;t++){let l=n[t];if("fulfilled"!==(null==l?void 0:l.status))continue;let c=null==(o=l.value)?void 0:o.originalStackFrame;if(!(null==c?void 0:c.file)||c.ignored)continue;let d=s[t];r[d]={...e[d],fileName:c.file,lineNumber:null!=(i=c.line1)?i:void 0,columnNumber:null!=(a=c.column1)?a:void 0,isSymbolicated:!0}}return r}catch{return e}finally{clearTimeout(d)}},Hl=(e,t)=>{if(!t.some(e=>e.isServer&&!e.fileName&&e.functionName))return t;let n=(e=>{let t=new Map;return ys(e,e=>{if(!ll(e))return!1;let n=fl(e._debugStack.stack);if(!n)return!1;for(let e of js(n))!e.functionName||!e.fileName||Il(e.fileName)&&(t.has(e.functionName)||t.set(e.functionName,{...e,isServer:!0}));return!1},!0),t})(e);return 0===n.size?t:t.map(e=>{if(!e.isServer||e.fileName||!e.functionName)return e;let t=n.get(e.functionName);return t?{...e,fileName:t.fileName,lineNumber:t.lineNumber,columnNumber:t.columnNumber}:e})},Bl=e=>{if(!Cs())return e;let t=e;for(;t;){if(Ts(t))return t;t=t.parentElement}return e},Vl=new WeakMap,ql=e=>{if(!Cs())return Promise.resolve([]);let t=Bl(e),n=Vl.get(t);if(n)return n;let r=(async e=>{try{let t=Ts(e);if(!t)return null;let n=await wl(t);return Ol()?await Ul(Hl(t,n)):n}catch{return null}})(t);return Vl.set(t,r),r},Gl=e=>{if(!Cs())return null;let t=Ts(Bl(e));if(!t)return null;let n=t.return;for(;n;){if(xs(n)){let e=Ss(n.type);if(e&&jl(e))return e}n=n.return}return null},Jl=async(e,t={})=>{var n;let r=null!=(n=t.maxLines)?n:3,o=await ql(e);if(o&&(e=>!!e&&e.some(e=>!!(e.fileName&&kl(e.fileName)||e.isServer&&(!e.functionName||Ll(e.functionName)))))(o))return((e,t={})=>{let{maxLines:n=3}=t,r=Ol(),o=[];for(let t of e){if(o.length>=n)break;let e=t.fileName&&kl(t.fileName);if(!t.isServer||e||t.functionName&&!Ll(t.functionName)){if(e){let e="\n  in ",n=t.functionName&&Ll(t.functionName);n&&(e+=`${t.functionName} (at `),e+=Al(t.fileName),r&&t.lineNumber&&(e+=`:${t.lineNumber}`,t.columnNumber&&(e+=`:${t.columnNumber}`)),n&&(e+=")"),o.push(e)}}else o.push(`\n  in ${t.functionName||"<anonymous>"} (at Server)`)}return o.join("")})(o,t);let i=((e,t)=>{if(!Cs())return[];let n=Ts(e);if(!n)return[];let r=[];return ys(n,e=>{if(r.length>=t)return!0;if(xs(e)){let t=Ss(e.type);t&&jl(t)&&r.push(t)}return!1},!0),r})(e,r);return i.length>0?i.map(e=>`\n  in ${e}`).join(""):""},Yl=e=>El(e,15),Xl=e=>{var t,n,r,o,i,a;let s=rs(e),l=e instanceof HTMLElement?null!=(o=null!=(r=null==(t=e.innerText)?void 0:t.trim())?r:null==(n=e.textContent)?void 0:n.trim())?o:"":null!=(a=null==(i=e.textContent)?void 0:i.trim())?a:"",c="";for(let{name:t,value:n}of e.attributes)Ml(t)||(c+=` ${t}="${Yl(n)}"`);let d=[],u=[],p=!1,h=Array.from(e.childNodes);for(let e of h)e.nodeType!==Node.COMMENT_NODE&&(e.nodeType===Node.TEXT_NODE?e.textContent&&e.textContent.trim().length>0&&(p=!0):e instanceof Element&&(p?u.push(e):d.push(e)));let m=e=>0===e.length?"":e.length<=2?e.map(e=>`<${rs(e)} ...>`).join("\n  "):`(${e.length} elements)`,f="",g=m(d);g&&(f+=`\n  ${g}`),l.length>0&&(f+=`\n  ${El(l,100)}`);let v=m(u);return v&&(f+=`\n  ${v}`),f.length>0?`<${s}${c}>${f}\n</${s}>`:`<${s}${c} />`},Kl=new Map,Zl=new WeakSet,Ql=new Map,ec=new Map;typeof window<"u"&&(window.requestAnimationFrame=e=>{if(!(e=>!!Zl.has(e))(e))return is(e);return is(t=>{e(t)})},window.cancelAnimationFrame=e=>{if(Kl.has(e))return void Kl.delete(e);let t=ec.get(e);if(void 0!==t)return as(t.nativeId),void ec.delete(e);let n=Ql.get(e);if(void 0!==n)return Kl.delete(n),void Ql.delete(e);as(e)});var tc,nc=new Set(["role","name","aria-label","rel","href"]),rc=e=>{if(!/^[a-z\-]{3,}$/i.test(e))return!1;let t=e.split(/-|[A-Z]/);for(let e of t)if(e.length<=2||/[^aeiou]{4,}/i.test(e))return!1;return!0},oc=e=>{let t=e[0].name;for(let n=1;n<e.length;n++)t=`${e[n].name} > ${t}`;return t},ic=e=>{let t=0;for(let n of e)t+=n.penalty;return t},ac=(e,t)=>ic(e)-ic(t),sc=(e,t)=>{let n=e.parentNode;if(!n)return;let r=n.firstChild;if(!r)return;let o=0;for(;r&&(r.nodeType===Node.ELEMENT_NODE&&(void 0===t||r.tagName.toLowerCase()===t)&&o++,r!==e);)r=r.nextSibling;return o},lc=(e,t)=>"html"===e?"html":`${e}:nth-child(${t})`,cc=(e,t)=>"html"===e?"html":`${e}:nth-of-type(${t})`,dc=(e,t)=>{let n=[],r=e.getAttribute("id"),o=e.tagName.toLowerCase();r&&rc(r)&&n.push({name:`#${CSS.escape(r)}`,penalty:0});for(let t of e.classList)rc(t)&&n.push({name:`.${CSS.escape(t)}`,penalty:1});for(let r of e.attributes)t(r.name,r.value)&&n.push({name:`[${CSS.escape(r.name)}="${CSS.escape(r.value)}"]`,penalty:2});n.push({name:o,penalty:5});let i=sc(e,o);void 0!==i&&n.push({name:cc(o,i),penalty:10});let a=sc(e);return void 0!==a&&n.push({name:lc(o,a),penalty:50}),n},uc=(e,t=1e4,n=[])=>{if(t<=0)return[];if(0===e.length)return[n];let r=[];for(let o of e[0]){let i=t-r.length;if(i<=0)break;r.push(...uc(e.slice(1),i,[...n,o]))}return r},pc=(e,t)=>1===t.querySelectorAll(oc(e)).length,hc=(e,t)=>{let n=e,r=[];for(;n&&n!==t;){let e=n.tagName.toLowerCase(),t=sc(n,e);if(void 0===t)return;r.push({name:cc(e,t),penalty:10}),n=n.parentElement}return pc(r,t)?r:void 0},mc=(e,t,n,r)=>{if(e.nodeType!==Node.ELEMENT_NODE)throw Error("Can't generate CSS selector for non-element node type.");if("html"===e.tagName.toLowerCase())return"html";let o,i=((e,t)=>{var n;let r=null==(n=t.getRootNode)?void 0:n.call(t);return r instanceof ShadowRoot?r:e.nodeType===Node.DOCUMENT_NODE?e:e.ownerDocument})(t,e),a=Date.now(),s=[],l=e,c=0;for(;l&&l!==i&&!o;)if(s.push(dc(l,r)),l=l.parentElement,c++,c>=3){let t=uc(s);t.sort(ac);for(let r of t){if(Date.now()-a>n){let t=hc(e,i);if(!t)throw Error(`Timeout: Can't find a unique selector after ${n}ms`);return oc(t)}if(pc(r,i)){o=r;break}}}if(!o&&c<3){let e=uc(s);e.sort(ac);for(let t of e){if(Date.now()-a>n)break;if(pc(t,i)){o=t;break}}}if(!o)throw Error("Selector was not found.");return oc(o)},fc=e=>typeof CSS<"u"&&"function"==typeof CSS.escape?CSS.escape(e):e.replace(/[^a-zA-Z0-9_-]/g,e=>`\\${e}`),gc=e=>{var t;return null!=(t=e.ownerDocument.body)?t:e.ownerDocument.documentElement},vc=new Set(["data-testid","data-test-id","data-test","data-cy","data-qa","aria-label","role","name","title","alt"]),wc=e=>e.length>0&&e.length<=120,bc=(e,t)=>{try{let n=e.ownerDocument.querySelectorAll(t);return 1===n.length&&n[0]===e}catch{return!1}},xc=(e,t=!0)=>{let n=(e=>{if(e instanceof HTMLElement&&e.id){let t=`#${fc(e.id)}`;if(bc(e,t))return t}for(let t of vc){let n=e.getAttribute(t);if(!n||!wc(n))continue;let r=`[${t}=${JSON.stringify(n)}]`;if(bc(e,r))return r;let o=`${e.tagName.toLowerCase()}${r}`;if(bc(e,o))return o}return null})(e);if(n)return n;if(t)try{let t=mc(e,gc(e),200,(e,t)=>((e,t)=>{let n=nc.has(e)||e.startsWith("data-")&&rc(e),r=rc(t)&&t.length<100||t.startsWith("#")&&rc(t.slice(1));return n&&r})(e,t)||vc.has(e)&&wc(t));if(t)return t}catch{}return(e=>{let t=[],n=gc(e),r=e;for(;r;){if(r instanceof HTMLElement&&r.id){t.unshift(`#${fc(r.id)}`);break}let e=r.parentElement;if(!e){t.unshift(r.tagName.toLowerCase());break}let o=Array.from(e.children).indexOf(r),i=o>=0?o+1:1;if(t.unshift(`${r.tagName.toLowerCase()}:nth-child(${i})`),e===n){t.unshift(n.tagName.toLowerCase());break}r=e}return t.join(" > ")})(e)},yc=new Map(["top","right","bottom","left"].flatMap(e=>[[`border-${e}-style`,e],[`border-${e}-color`,e]])),kc=null,_c=new Map,Nc=e=>{let t=_c.get(e);if(t)return t;let n=kc||((kc=document.createElement("iframe")).style.cssText="position:fixed;left:-9999px;width:0;height:0;border:none;visibility:hidden;",document.body.appendChild(kc),kc),r=n.contentDocument,o=r.createElement(e);r.body.appendChild(o);let i=n.contentWindow.getComputedStyle(o),a=new Map;for(let e of ns){let t=i.getPropertyValue(e);t&&a.set(e,t)}return o.remove(),_c.set(e,a),a},Sc=(e,t)=>{let n=yc.get(e);if(!n)return!1;let r=t.getPropertyValue(`border-${n}-width`);return"0px"===r||"0"===r},Cc=e=>{var t;let n=Nc(e.tagName.toLowerCase()),r=getComputedStyle(e),o=[];for(let e of ns){let t=r.getPropertyValue(e);t&&t!==n.get(e)&&(Sc(e,r)||o.push(`${e}: ${t};`))}let i=null==(t=e.getAttribute("class"))?void 0:t.trim(),a=o.join("\n");return i?a?`className: ${i}\n\n${a}`:`className: ${i}`:a},Tc=async e=>{try{const t=await(async e=>{var t;let n=null!=(t=await ql(e))?t:[],r=await Jl(e);return{element:e,htmlPreview:Xl(e),stackString:r,stack:n,componentName:Gl(e),fiber:Ts(e),selector:xc(e),styles:Cc(e)}})(e),n=`${t.htmlPreview}${t.stackString}`;return!!n.trim()&&(await navigator.clipboard.writeText(n),!0)}catch{return!1}},Ec=Et(()=>lo("absolute inset-0 flex items-center gap-x-2","translate-y-0","transition-transform duration-300",wo.value&&"-translate-y-[200%]")),zc=()=>{const e=Xe(null),t=Xe(null),[n,r]=Ge(null);Jt(()=>{const e=Iu.inspectState.value;"focused"===e.kind&&r(e.fiber)}),Jt(()=>{const n=Mo.value;ut(()=>{var r,o;if("focused"!==Iu.inspectState.value.kind)return;if(!e.current||!t.current)return;const{totalUpdates:i,currentIndex:a,updates:s,isVisible:l,windowOffset:c}=n,d=Math.max(0,i-1),u=l?`#${c+a} Re-render`:d>0?`×${d}`:"";let p;if(d>0&&a>=0&&a<s.length){const e=null==(o=null==(r=s[a])?void 0:r.fiberInfo)?void 0:o.selfTime;p=e>0?e<.1-Number.EPSILON?"< 0.1ms":`${Number(e.toFixed(1))}ms`:void 0}e.current.dataset.text=u?` • ${u}`:"",t.current.dataset.text=p?` • ${p}`:""})});const o=Ke(()=>{if(!n)return null;const{name:e,wrappers:t,wrapperTypes:r}=mo(n),o=t.length?`${t.join("(")}(${e})${")".repeat(t.length)}`:null!=e?e:"",i=r[0];return Rn("span",{title:o,className:"flex items-center gap-x-1",children:[null!=e?e:"Unknown",Rn("span",{title:null==i?void 0:i.title,className:"flex items-center gap-x-1 text-[10px] text-purple-400",children:!!i&&Rn(me,{children:[Rn("span",{className:lo("rounded py-[1px] px-1","truncate",i.compiler&&"bg-purple-800 text-neutral-400",!i.compiler&&"bg-neutral-700 text-neutral-300","memo"===i.type&&"bg-[#5f3f9a] text-white"),children:i.type},i.type),i.compiler&&Rn("span",{className:"text-yellow-300",children:"✨"})]})}),r.length>1&&Rn("span",{className:"text-[10px] text-neutral-400",children:["×",r.length-1]})]})},[n]);return Rn("div",{className:Ec,children:[o,Rn("div",{className:"flex items-center gap-x-2 mr-auto text-xs text-[#888]",children:[Rn("span",{ref:e,className:"with-data-text cursor-pointer !overflow-visible",title:"Click to toggle between rerenders and total renders"}),Rn("span",{ref:t,className:"with-data-text !overflow-visible"})]})]})},Ac=()=>{const e=((e,t,n=t)=>{const[r,o]=Ge(e);return Je(()=>{if(e===r)return;const i=setTimeout(()=>o(e),e?t:n);return()=>clearTimeout(i)},[e,t,n]),r})("focused"===Iu.inspectState.value.kind,150,0),t=Wt(!1),n=()=>{_o.value={view:"none"},Iu.inspectState.value={kind:"inspect-off"}},r=async()=>{const e=Iu.inspectState.value;if("focused"!==e.kind||!e.focusedDomElement)return;await Tc(e.focusedDomElement)&&(t.value=!0,setTimeout(()=>{t.value=!1,n()},600))},o=Xe(r);o.current=r,Je(()=>{const e=e=>{const t=Iu.inspectState.value;"focused"===t.kind&&t.focusedDomElement&&("undefined"!=typeof window&&Boolean(window.__REACT_GRAB__)||(e.metaKey||e.ctrlKey)&&(e.shiftKey||e.altKey||"c"!==e.key&&"KeyC"!==e.code||(()=>{const e=document.activeElement;if(!e)return!1;const t=e.tagName;return"INPUT"===t||"TEXTAREA"===t||"SELECT"===t||!!(e instanceof HTMLElement&&e.isContentEditable)})()||(()=>{var e;const t=null==(e=window.getSelection)?void 0:e.call(window);return Boolean(t&&t.toString().length>0)})()||(e.preventDefault(),e.stopImmediatePropagation(),o.current())))};return document.addEventListener("keydown",e,{capture:!0}),()=>{document.removeEventListener("keydown",e,{capture:!0})}},[]);if("notifications"===_o.value.view)return;const i="focused"===Iu.inspectState.value.kind,a=(()=>{if("undefined"==typeof navigator)return!1;const e=navigator.platform||"";return/Mac|iPhone|iPad|iPod/i.test(e||navigator.userAgent)})()?"⌘C":"Ctrl+C";return Rn("div",{className:"react-scan-header",children:[Rn("div",{className:"relative flex-1 h-full",children:Rn("div",{className:lo("react-scan-header-item is-visible",!e&&"!duration-0"),children:Rn(zc,{})})}),i&&Rn("button",{type:"button",title:`Copy element (${a})`,className:"react-scan-close-button",onClick:r,children:Rn(On,{name:t.value?"icon-check":"icon-copy",className:lo(t.value&&"text-green-500")})}),Rn("button",{type:"button",title:"Close",className:"react-scan-close-button",onClick:n,children:Rn(On,{name:"icon-close"})})]})},Mc=({className:e,...t})=>Rn("div",{className:lo("react-scan-toggle",e),children:[Rn("input",{type:"checkbox",...t}),Rn("div",{})]}),$c=({fps:e})=>{return Rn("div",{className:lo("flex items-center gap-x-1 px-2 w-full","h-6","rounded-md","font-mono leading-none","bg-[#141414]","ring-1 ring-white/[0.08]"),children:[Rn("div",{style:{color:(t=e,t<30?"#EF4444":t<50?"#F59E0B":"rgb(214,132,245)")},className:"text-sm font-semibold tracking-wide transition-colors ease-in-out w-full flex justify-center items-center",children:e}),Rn("span",{className:"text-white/30 text-[11px] font-medium tracking-wide ml-auto min-w-fit",children:"FPS"})]});var t},Fc=()=>{const[e,t]=Ge(null);return Je(()=>{const e=setInterval(()=>{t(ra())},200);return()=>clearInterval(e)},[]),Rn("div",{className:lo("flex items-center justify-end gap-x-2 px-1 ml-1 w-[72px]","whitespace-nowrap text-sm text-white"),children:null===e?Rn(me,{children:"️"}):Rn($c,{fps:e})})},Rc=e=>e(),Oc=class e extends Array{constructor(e=25){super(),n(this,"capacity",e)}push(...e){const t=super.push(...e);for(;this.length>this.capacity;)this.shift();return t}static fromArray(t,n){const r=new e(n);return r.push(...t),r}},Dc=new class{constructor(e){n(this,"subscribers",new Set),n(this,"currentValue"),this.currentValue=e}subscribe(e){return this.subscribers.add(e),e(this.currentValue),()=>{this.subscribers.delete(e)}}setState(e){this.currentValue=e,this.subscribers.forEach(t=>t(e))}getCurrentState(){return this.currentValue}}(new Oc(150)),jc=50,Lc=new class{constructor(){n(this,"channels",{})}publish(e,t,n=!0){const r=this.channels[t];if(!r){if(!n)return;return this.channels[t]={callbacks:new Oc(jc),state:new Oc(jc)},void this.channels[t].state.push(e)}r.state.push(e),r.callbacks.forEach(t=>t(e))}getAvailableChannels(){return Oc.fromArray(Object.keys(this.channels),jc)}subscribe(e,t,n=!1){const r=()=>(n||this.channels[e].state.forEach(e=>{t(e)}),()=>{const n=this.channels[e].callbacks.filter(e=>e!==t);this.channels[e].callbacks=Oc.fromArray(n,jc)}),o=this.channels[e];return o?(o.callbacks.push(t),r()):(this.channels[e]={callbacks:new Oc(jc),state:new Oc(jc)},this.channels[e].callbacks.push(t),r())}updateChannelState(e,t,n=!0){const r=this.channels[e];if(!r){if(!n)return;const r=new Oc(jc),o={callbacks:new Oc(jc),state:r};return this.channels[e]=o,void(o.state=t(r))}r.state=t(r.state)}getChannelState(e){var t;return null!=(t=this.channels[e].state)?t:new Oc(jc)}},Pc={skipProviders:!0,skipHocs:!0,skipContainers:!0,skipMinified:!0,skipUtilities:!0,skipBoundaries:!0},Ic={providers:[/Provider$/,/^Provider$/,/^Context$/],hocs:[/^with[A-Z]/,/^forward(?:Ref)?$/i,/^Forward(?:Ref)?\(/],containers:[/^(?:App)?Container$/,/^Root$/,/^ReactDev/],utilities:[/^Fragment$/,/^Suspense$/,/^ErrorBoundary$/,/^Portal$/,/^Consumer$/,/^Layout$/,/^Router/,/^Hydration/],boundaries:[/^Boundary$/,/Boundary$/,/^Provider$/,/Provider$/]},Wc=(e,t=Pc)=>{const n=[];return t.skipProviders&&n.push(...Ic.providers),t.skipHocs&&n.push(...Ic.hocs),t.skipContainers&&n.push(...Ic.containers),t.skipUtilities&&n.push(...Ic.utilities),t.skipBoundaries&&n.push(...Ic.boundaries),!n.some(t=>t.test(e))},Uc=[/^[a-z]$/,/^[a-z][0-9]$/,/^_+$/,/^[A-Za-z][_$]$/,/^[a-z]{1,2}$/],Hc=e=>{var t,n;for(let t=0;t<Uc.length;t++)if(Uc[t].test(e))return!0;const r=!/[aeiou]/i.test(e),o=(null!=(n=null==(t=e.match(/\d/g))?void 0:t.length)?n:0)>e.length/2,i=/^[a-z]+$/.test(e),a=/[$_]{2,}/.test(e);return Number(r)+Number(o)+Number(i)+Number(a)>=2},Bc=e=>{const t=J(e);return t?t.replace(/^(?:Memo|Forward(?:Ref)?|With.*?)\((?<inner>.*?)\)$/,"$<inner>"):""},Vc="never-hidden",qc=null,Gc=e=>{(()=>{null==tc||tc();const e=()=>{document.hidden&&(Vc=Date.now())};document.addEventListener("visibilitychange",e),tc=()=>{document.removeEventListener("visibilitychange",e)}})();const t=new Map,n=new Map,r=r=>{if(!r.interactionId)return;if(r.interactionId&&r.target&&!n.has(r.interactionId)&&n.set(r.interactionId,r.target),r.target){let e=r.target;for(;e;){if("react-scan-toolbar-root"===e.id||"react-scan-root"===e.id)return;e=e.parentElement}}const o=t.get(r.interactionId);if(o)r.duration>o.latency?(o.entries=[r],o.latency=r.duration):r.duration===o.latency&&r.startTime===o.entries[0].startTime&&o.entries.push(r);else{const n=(i=r.name,["pointerup","click"].includes(i)?"pointer":(i.includes("key"),["keydown","keyup"].includes(i)?"keyboard":null));if(!n)return;const o={id:r.interactionId,latency:r.duration,entries:[r],target:r.target,type:n,startTime:r.startTime,endTime:Date.now(),processingStart:r.processingStart,processingEnd:r.processingEnd,duration:r.duration,inputDelay:r.processingStart-r.startTime,processingDuration:r.processingEnd-r.processingStart,presentationDelay:r.duration-(r.processingEnd-r.startTime),timestamp:Date.now(),timeSinceTabInactive:"never-hidden"===Vc?"never-hidden":Date.now()-Vc,visibilityState:document.visibilityState,timeOrigin:performance.timeOrigin,referrer:document.referrer};t.set(o.id,o),qc||(qc=requestAnimationFrame(()=>{requestAnimationFrame(()=>{e(t.get(o.id)),qc=null})}))}var i},o=new PerformanceObserver(e=>{const t=e.getEntries();for(let e=0,n=t.length;e<n;e++){const n=t[e];r(n)}});try{o.observe({type:"event",buffered:!0,durationThreshold:16}),o.observe({type:"first-input",buffered:!0})}catch{}return()=>o.disconnect()},Jc=new Oc(25),Yc=e=>Lc.subscribe("recording",t=>{const n="auto-complete-race"===t.kind?Jc.find(e=>e.interactionUUID===t.interactionUUID):((e,t)=>{let n=null;for(const r of t){if(r.type!==e.type)continue;if(null===n){n=r;continue}const t=(e,t)=>Math.abs(e.startDateTime)-(t.startTime+t.timeOrigin);t(r,e)<t(n,e)&&(n=r)}return n})(t.entry,Jc);if(!n)return;const r=n.completeInteraction(t);e(r)}),Xc=e=>{var t;const n=gi(e);if(!n)return;let r=n?J(null==n?void 0:n.type):"N/A";if(r||(r=null!=(t=((e,t=()=>!0)=>{let n=e;for(;n;){const e=J(n.type);if(e&&t(e))return e;n=n.return}return null})(n,e=>e.length>2))?t:"N/A"),!r)return;return{componentPath:((e,t=Pc)=>{if(!e)return[];if(!J(e.type))return[];const n=new Array;let r=e;for(;r.return;){const e=Bc(r.type);e&&!Hc(e)&&Wc(e,t)&&e.toLowerCase()!==e&&n.push(e),r=r.return}const o=new Array(n.length);for(let e=0;e<n.length;e++)o[e]=n[n.length-e-1];return o})(n),childrenTree:{},componentName:r,elementFiber:n}},Kc=(e,t)=>{let n=null;const r=t=>{switch(e){case"pointer":return"start"===t.phase?"pointerup":t.target instanceof HTMLInputElement||t.target instanceof HTMLSelectElement?"change":"click";case"keyboard":return"start"===t.phase?"keydown":"change"}},o={current:{kind:"uninitialized-stage",interactionUUID:tn(),stageStart:Date.now(),interactionType:e}},i=n=>{var i,s;if(n.composedPath().some(e=>e instanceof Element&&"react-scan-toolbar-root"===e.id))return;if(Date.now()-o.current.stageStart>2e3&&(o.current={kind:"uninitialized-stage",interactionUUID:tn(),stageStart:Date.now(),interactionType:e}),"uninitialized-stage"!==o.current.kind)return;const l=performance.now();null==(i=null==t?void 0:t.onStart)||i.call(t,o.current.interactionUUID);const c=Xc(n.target);if(!c)return void(null==(s=null==t?void 0:t.onError)||s.call(t,o.current.interactionUUID));const d={},u=ed(d);o.current={...o.current,interactionType:e,blockingTimeStart:Date.now(),childrenTree:c.childrenTree,componentName:c.componentName,componentPath:c.componentPath,fiberRenders:d,kind:"interaction-start",interactionStartDetail:l,stopListeningForRenders:u};const p=r({phase:"end",target:n.target});document.addEventListener(p,a,{once:!0}),requestAnimationFrame(()=>{document.removeEventListener(p,a)})};document.addEventListener(r({phase:"start"}),i,{capture:!0});const a=(r,i,a)=>{var s;if("interaction-start"!==o.current.kind&&i===n)return"pointer"===e&&r.target instanceof HTMLSelectElement||null==(s=null==t?void 0:t.onError)||s.call(t,o.current.interactionUUID),void(o.current={kind:"uninitialized-stage",interactionUUID:tn(),stageStart:Date.now(),interactionType:e});n=i,(({onMicroTask:e,onRAF:t,onTimeout:n,abort:r})=>{queueMicrotask(()=>{!0!==(null==r?void 0:r())&&e()&&requestAnimationFrame(()=>{!0!==(null==r?void 0:r())&&t()&&setTimeout(()=>{!0!==(null==r?void 0:r())&&n()},0)})})})({abort:a,onMicroTask:()=>"uninitialized-stage"!==o.current.kind&&(o.current={...o.current,kind:"js-end-stage",jsEndDetail:performance.now()},!0),onRAF:()=>{var n;return"js-end-stage"!==o.current.kind&&"raf-stage"!==o.current.kind?(null==(n=null==t?void 0:t.onError)||n.call(t,o.current.interactionUUID),o.current={kind:"uninitialized-stage",interactionUUID:tn(),stageStart:Date.now(),interactionType:e},!1):(o.current={...o.current,kind:"raf-stage",rafStart:performance.now()},!0)},onTimeout:()=>{var n;if("raf-stage"!==o.current.kind)return null==(n=null==t?void 0:t.onError)||n.call(t,o.current.interactionUUID),void(o.current={kind:"uninitialized-stage",interactionUUID:tn(),stageStart:Date.now(),interactionType:e});const r=Date.now(),i=Object.freeze({...o.current,kind:"timeout-stage",blockingTimeEnd:r,commitEnd:performance.now()});o.current={kind:"uninitialized-stage",interactionUUID:tn(),stageStart:r,interactionType:e};let a=!1;const s=e=>{var n;a=!0;const r="auto-complete-race"===e.kind?e.detailedTiming.commitEnd-e.detailedTiming.interactionStartDetail:e.entry.latency,o={detailedTiming:i,latency:r,completedAt:Date.now(),flushNeeded:!0};null==(n=null==t?void 0:t.onComplete)||n.call(t,i.interactionUUID,o,e);const s=Jc.filter(e=>e.interactionUUID!==i.interactionUUID);return Jc=Oc.fromArray(s,25),o},l={completeInteraction:s,endDateTime:Date.now(),startDateTime:i.blockingTimeStart,type:e,interactionUUID:i.interactionUUID};if(Jc.push(l),Qc())setTimeout(()=>{if(a)return;s({kind:"auto-complete-race",detailedTiming:i,interactionUUID:i.interactionUUID});const e=Jc.filter(e=>e.interactionUUID!==i.interactionUUID);Jc=Oc.fromArray(e,25)},1e3);else{const e=Jc.filter(e=>e.interactionUUID!==i.interactionUUID);Jc=Oc.fromArray(e,25),s({kind:"auto-complete-race",detailedTiming:i,interactionUUID:i.interactionUUID})}}})},s=e=>{const t=tn();a(e,t,()=>t!==n)};return"keyboard"===e&&document.addEventListener("keypress",s),()=>{document.removeEventListener(r({phase:"start"}),i,{capture:!0}),document.removeEventListener("keypress",s)}},Zc=e=>{var t;return null==(t=k(e,e=>{if(v(e))return!0}))?void 0:t.stateNode},Qc=()=>"PerformanceEventTiming"in globalThis,ed=e=>{const t=t=>{var n,r,o,i,a,s,l;const c=J(t.type);if(!c)return;const d=e[c];if(!d){const r=new Set,o=t.return&&bi(t.return),i=o&&J(o[0]);i&&r.add(i);const{selfTime:a,totalTime:s}=V(t),l=Xi(t),d={current:[],changes:new Set,changesCounts:new Map},u={fiberProps:l.fiberProps||d,fiberState:l.fiberState||d,fiberContext:l.fiberContext||d};return void(e[c]={renderCount:1,hasMemoCache:q(t),wasFiberRenderMount:nd(t),parents:r,selfTime:a,totalTime:s,nodeInfo:[{element:Zc(t),name:null!=(n=J(t.type))?n:"Unknown",selfTime:V(t).selfTime}],changes:u})}if(null==(o=null==(r=bi(t))?void 0:r[0])?void 0:o.type){const e=t.return&&bi(t.return),n=e&&J(e[0]);n&&d.parents.add(n)}const{selfTime:u,totalTime:p}=V(t),h=Xi(t);if(!h)return;const m={current:[],changes:new Set,changesCounts:new Map};d.wasFiberRenderMount=d.wasFiberRenderMount||nd(t),d.hasMemoCache=d.hasMemoCache||q(t),d.changes={fiberProps:td((null==(i=d.changes)?void 0:i.fiberProps)||m,h.fiberProps||m),fiberState:td((null==(a=d.changes)?void 0:a.fiberState)||m,h.fiberState||m),fiberContext:td((null==(s=d.changes)?void 0:s.fiberContext)||m,h.fiberContext||m)},d.renderCount+=1,d.selfTime+=u,d.totalTime+=p,d.nodeInfo.push({element:Zc(t),name:null!=(l=J(t.type))?l:"Unknown",selfTime:V(t).selfTime})};return Iu.interactionListeningForRenders=t,()=>{Iu.interactionListeningForRenders===t&&(Iu.interactionListeningForRenders=null)}},td=(e,t)=>{const n={current:[...e.current],changes:new Set,changesCounts:new Map};for(const e of t.current)n.current.some(t=>t.name===e.name)||n.current.push(e);for(const r of t.changes)if("string"==typeof r||"number"==typeof r){n.changes.add(r);const o=e.changesCounts.get(r)||0,i=t.changesCounts.get(r)||0;n.changesCounts.set(r,o+i)}return n},nd=e=>{if(!e.alternate)return!0;const t=e.alternate,n=t&&null!=t.memoizedState&&null!=t.memoizedState.element&&!0!==t.memoizedState.isDehydrated,r=null!=e.memoizedState&&null!=e.memoizedState.element&&!0!==e.memoizedState.isDehydrated;return!n&&r},rd=e=>{let t;const n=new Set,r=(e,r)=>{const o="function"==typeof e?e(t):e;if(!Object.is(o,t)){const e=t;t=(null!=r?r:"object"!=typeof o||null===o)?o:Object.assign({},t,o),n.forEach(n=>n(t,e))}},o=()=>t,i={setState:r,getState:o,getInitialState:()=>a,subscribe:(e,r)=>{let o,i;r?(o=e,i=r):i=e;let a=o?o(t):void 0;const s=(e,t)=>{if(o){const n=o(e),r=o(t);Object.is(a,n)||(a=n,i(n,r))}else i(e,t)};return n.add(s),()=>n.delete(s)}},a=t=e(r,o,i);return i},od=e=>rd,id=null;od()(e=>({state:{events:[]},actions:{addEvent:t=>{e(e=>({state:{events:[...e.state.events,t]}}))},clear:()=>{e({state:{events:[]}})}}}));var ad,sd=od()((e,t)=>{const n=new Set;return{state:{events:new Oc(200)},actions:{addEvent:r=>{n.forEach(e=>e(r));const o=[...t().state.events,r],i=new Set;o.forEach(e=>{"interaction"!==e.kind&&((e,t)=>{const n=o.find(t=>{if("long-render"!==t.kind&&t.id!==e.id)return e.data.startAt<=t.data.startAt&&e.data.endAt<=t.data.endAt&&e.data.endAt>=t.data.startAt||t.data.startAt<=e.data.startAt&&t.data.endAt>=e.data.startAt||e.data.startAt<=t.data.startAt&&e.data.endAt>=t.data.endAt||void 0});n&&t(n)})(e,()=>{i.add(e.id)})});const a=o.filter(e=>!i.has(e.id));e(()=>({state:{events:Oc.fromArray(a,200)}}))},addListener:e=>(n.add(e),()=>{n.delete(e)}),clear:()=>{e({state:{events:new Oc(200)}})}}}}),ld=()=>{return e=sd.subscribe,t=sd.getState,n=t(),r=Ge({t:{__:n,u:t}}),o=r[0].t,i=r[1],Ye(function(){o.__=n,o.u=t,an(o)&&i({t:o})},[e,n,t]),Je(function(){return an(o)&&i({t:o}),e(function(){an(o)&&i({t:o})})},[e]),n;var e,t,n,r,o,i},cd=null,dd=null,ud=null,pd=[];var hd=()=>{const e=Gc(e=>{Lc.publish({kind:"entry-received",entry:e},"recording")}),t=(()=>{const e=e=>{ad=e.composedPath().map(e=>e.id).filter(Boolean).includes("react-scan-toolbar")};return document.addEventListener("mouseover",e),ud=e,()=>{ud&&document.removeEventListener("mouseover",ud)}})(),n=(()=>{const e=()=>{cd=performance.now(),dd=performance.timeOrigin};return document.addEventListener("visibilitychange",e),()=>{document.removeEventListener("visibilitychange",e)}})(),r=function(){let e,t;const n=function n(){let r=null;id=null,r=ed(id={});const o=performance.timeOrigin,i=performance.now();return e=requestAnimationFrame(()=>{t=setTimeout(()=>{const e=performance.now(),t=e-i,a=performance.timeOrigin;pd.push(e+a);const s=pd.filter(t=>e+a-t<=1e3),l=s.length;pd=s;const c=null!==ad&&ad;if(t>150&&!(null!==cd&&null!==dd&&e+a-(dd+cd)<100)&&"visible"===document.visibilityState&&!c){const n=a+e,r=i+o;sd.getState().actions.addEvent({kind:"long-render",id:tn(),data:{endAt:n,startAt:r,meta:{fiberRenders:id,latency:t,fps:l}}})}cd=null,dd=null,null==r||r(),n()},0)}),r}();return()=>{n(),cancelAnimationFrame(e),clearTimeout(t)}}(),o=async(e,t,n)=>{sd.getState().actions.addEvent({kind:"interaction",id:tn(),data:{startAt:t.detailedTiming.blockingTimeStart,endAt:performance.now()+performance.timeOrigin,meta:{...t,kind:n.kind}}});const r=Lc.getChannelState("recording");t.detailedTiming.stopListeningForRenders(),r.length&&Lc.updateChannelState("recording",()=>new Oc(jc))},i=Kc("pointer",{onComplete:o}),a=Kc("keyboard",{onComplete:o}),s=Yc(e=>{Dc.setState(Oc.fromArray(Dc.getCurrentState().concat(e),150))});return()=>{t(),n(),r(),e(),i(),s(),a()}},md=e=>{var t;const n=e.filter(e=>e.length>2);return 0===n.length?null!=(t=e.at(-1))?t:"Unknown":n.at(-1)},fd=e=>{switch(e.kind){case"interaction":{const{renderTime:t,otherJSTime:n,framePreparation:r,frameConstruction:o,frameDraw:i}=e;return t+n+r+o+(null!=i?i:0)}case"dropped-frames":return e.otherTime+e.renderTime}},gd=e=>{const t=fd(e.timing);switch(e.kind){case"interaction":return t<200?"low":t<500?"needs-improvement":"high";case"dropped-frames":return t<50?"low":t<150?"needs-improvement":"high"}},vd=()=>Qe(wd),wd=De(null),bd=({size:e=24,className:t})=>Rn("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:lo(["lucide lucide-chevron-right",t]),children:Rn("path",{d:"m9 18 6-6-6-6"})}),xd=({className:e="",size:t=24,events:n=[]})=>{const r=n.includes(!0),o=n.filter(e=>e).length,i=o>99?">99":o,a=r?Math.max(.6*t,14):Math.max(.4*t,6);return Rn("div",{className:"relative",children:[Rn("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:`lucide lucide-bell ${e}`,children:[Rn("path",{d:"M10.268 21a2 2 0 0 0 3.464 0"}),Rn("path",{d:"M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"})]}),n.length>0&&o>0&&Wu.options.value.showNotificationCount&&Rn("div",{className:lo(["absolute",r?"-top-2.5 -right-2.5":"-top-1 -right-1","rounded-full","flex items-center justify-center","text-[8px] font-medium text-white","aspect-square",r?"bg-red-500/90":"bg-purple-500/90"]),style:{width:`${a}px`,height:`${a}px`,padding:r?"0.5px":"0"},children:r&&i})]})},yd=({className:e="",size:t=24})=>Rn("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:e,children:[Rn("path",{d:"M18 6 6 18"}),Rn("path",{d:"m6 6 12 12"})]}),kd=({className:e="",size:t=24})=>Rn("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:e,children:[Rn("path",{d:"M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"}),Rn("path",{d:"M16 9a5 5 0 0 1 0 6"}),Rn("path",{d:"M19.364 18.364a9 9 0 0 0 0-12.728"})]}),_d=({className:e="",size:t=24})=>Rn("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:e,children:[Rn("path",{d:"M16 9a5 5 0 0 1 .95 2.293"}),Rn("path",{d:"M19.364 5.636a9 9 0 0 1 1.889 9.96"}),Rn("path",{d:"m2 2 20 20"}),Rn("path",{d:"m7 7-.587.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298V11"}),Rn("path",{d:"M9.828 4.172A.686.686 0 0 1 11 4.657v.686"})]}),Nd=({size:e=24,className:t})=>Rn("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:lo(["lucide lucide-arrow-left",t]),children:[Rn("path",{d:"m12 19-7-7 7-7"}),Rn("path",{d:"M19 12H5"})]}),Sd=({className:e="",size:t=24})=>Rn("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:e,children:[Rn("path",{d:"M14 4.1 12 6"}),Rn("path",{d:"m5.1 8-2.9-.8"}),Rn("path",{d:"m6 12-1.9 2"}),Rn("path",{d:"M7.2 2.2 8 5.1"}),Rn("path",{d:"M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z"})]}),Cd=({className:e="",size:t=24})=>Rn("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:e,children:[Rn("path",{d:"M10 8h.01"}),Rn("path",{d:"M12 12h.01"}),Rn("path",{d:"M14 8h.01"}),Rn("path",{d:"M16 12h.01"}),Rn("path",{d:"M18 8h.01"}),Rn("path",{d:"M6 8h.01"}),Rn("path",{d:"M7 16h10"}),Rn("path",{d:"M8 12h.01"}),Rn("rect",{width:"20",height:"16",x:"2",y:"4",rx:"2"})]}),Td=({className:e="",size:t=24})=>Rn("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:e,style:{transform:"rotate(180deg)"},children:[Rn("circle",{cx:"12",cy:"12",r:"10"}),Rn("path",{d:"m4.9 4.9 14.2 14.2"})]}),Ed=({className:e="",size:t=24})=>Rn("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:e,children:[Rn("polyline",{points:"22 17 13.5 8.5 8.5 13.5 2 7"}),Rn("polyline",{points:"16 17 22 17 22 11"})]}),zd=({children:e,triggerContent:t,wrapperProps:n})=>{const[r,o]=Ge("closed"),[i,a]=Ge(null),[s,l]=Ge({width:window.innerWidth,height:window.innerHeight}),c=Xe(null),d=Xe(null),u=Qe(Mu),p=Xe(!1);Je(()=>{const e=()=>{l({width:window.innerWidth,height:window.innerHeight}),h()};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]);const h=()=>{if(c.current&&u){const e=c.current.getBoundingClientRect(),t=u.getBoundingClientRect(),n=e.left+e.width/2,r=e.top,o=new DOMRect(n-t.left,r-t.top,e.width,e.height);a(o)}};Je(()=>{h()},[c.current]),Je(()=>{if("opening"===r){const e=setTimeout(()=>o("open"),120);return()=>clearTimeout(e)}if("closing"===r){const e=setTimeout(()=>o("closed"),120);return()=>clearTimeout(e)}},[r]),Je(()=>{const e=setInterval(()=>{p.current||"closed"===r||o("closing")},1e3);return()=>clearInterval(e)},[r]);const m=(()=>{var e;if(!i||!u)return{top:0,left:0};const t=u.getBoundingClientRect(),n=(null==(e=d.current)?void 0:e.offsetHeight)||40,r=i.x+t.left,o=i.y+t.top;let a=r,l=o-4;return a-87.5<5?a=92.5:a+87.5>s.width-5&&(a=s.width-5-87.5),l-n<5&&(l=o+i.height+4),{top:l-t.top,left:a-t.left}})();return Rn(me,{children:[u&&i&&"closed"!==r&&(f=Rn("div",{ref:d,className:lo(["absolute z-100 bg-white text-black rounded-lg px-3 py-2 shadow-lg","transition-[opacity] duration-120 ease-out",'after:content-[""] after:absolute after:top-[100%]',"after:left-1/2 after:-translate-x-1/2","after:w-[10px] after:h-[6px]","after:border-l-[5px] after:border-l-transparent","after:border-r-[5px] after:border-r-transparent","after:border-t-[6px] after:border-t-white","pointer-events-none","opening"===r||"closing"===r?"opacity-0":"opacity-100"]),style:{top:m.top+"px",left:m.left+"px",transform:`translate(-50%, calc(-100% - 4px)) scale(${"open"===r?1:.97})`,minWidth:"175px",willChange:"opacity, transform"},children:e}),g=u,v=pe(yn,{__v:f,h:g}),v.containerInfo=g,v),Rn("div",{ref:c,onMouseEnter:()=>{p.current=!0,h(),o("opening")},onMouseLeave:()=>{p.current=!1,h(),o("closing")},...n,children:t})]});var f,g,v},Ad=({selectedEvent:e})=>{const{notificationState:t,setNotificationState:n,setRoute:r}=vd();return Rn("div",{className:lo(["flex w-full justify-between items-center px-3 py-2 text-xs"]),children:[Rn("div",{className:lo(["bg-[#18181B] flex items-center gap-x-1 p-1 rounded-sm"]),children:[Rn("button",{onClick:()=>{r({route:"render-visualization",routeMessage:null})},className:lo(["w-1/2 flex items-center justify-center whitespace-nowrap py-[5px] px-1 gap-x-1","render-visualization"===t.route||"render-explanation"===t.route?"text-white bg-[#7521c8] rounded-sm":"text-[#6E6E77] bg-[#18181B] rounded-sm"]),children:"Ranked"}),Rn("button",{onClick:()=>{r({route:"other-visualization",routeMessage:null})},className:lo(["w-1/2 flex items-center justify-center whitespace-nowrap py-[5px] px-1 gap-x-1","other-visualization"===t.route?"text-white bg-[#7521c8] rounded-sm":"text-[#6E6E77] bg-[#18181B] rounded-sm"]),children:"Overview"}),Rn("button",{onClick:()=>{r({route:"optimize",routeMessage:null})},className:lo(["w-1/2 flex items-center justify-center whitespace-nowrap py-[5px] px-1 gap-x-1","optimize"===t.route?"text-white bg-[#7521c8] rounded-sm":"text-[#6E6E77] bg-[#18181B] rounded-sm"]),children:Rn("span",{children:"Prompts"})})]}),Rn(zd,{triggerContent:Rn("button",{onClick:()=>{n(e=>{e.audioNotificationsOptions.enabled&&"closed"!==e.audioNotificationsOptions.audioContext.state&&e.audioNotificationsOptions.audioContext.close();const t=e.audioNotificationsOptions.enabled;localStorage.setItem("react-scan-notifications-audio",String(!t));const n=new AudioContext;return e.audioNotificationsOptions.enabled||nn(n),t&&n.close(),{...e,audioNotificationsOptions:t?{audioContext:null,enabled:!1}:{audioContext:n,enabled:!0}}})},className:"ml-auto",children:Rn("div",{className:lo(["flex gap-x-2 justify-center items-center text-[#6E6E77]"]),children:[Rn("span",{children:"Alerts"}),t.audioNotificationsOptions.enabled?Rn(kd,{size:16,className:"text-[#6E6E77]"}):Rn(_d,{size:16,className:"text-[#6E6E77]"})]})}),children:Rn(me,{children:"Play a chime when a slowdown is recorded"})})]})},Md=e=>{let t="";return e.toSorted((e,t)=>t.totalTime-e.totalTime).slice(0,30).filter(e=>e.totalTime>5).forEach(e=>{let n="";n+="Component Name:",n+=e.name,n+="\n",n+=`Rendered: ${e.count} times\n`,n+=`Sum of self times for ${e.name} is ${e.totalTime.toFixed(0)}ms\n`,e.changes.props.length>0&&(n+=`Changed props for all ${e.name} instances ("name:count" pairs)\n`,e.changes.props.forEach(e=>{n+=`${e.name}:${e.count}x\n`})),e.changes.state.length>0&&(n+=`Changed state for all ${e.name} instances ("hook index:count" pairs)\n`,e.changes.state.forEach(e=>{n+=`${e.index}:${e.count}x\n`})),e.changes.context.length>0&&(n+=`Changed context for all ${e.name} instances ("context display name (if exists):count" pairs)\n`,e.changes.context.forEach(e=>{n+=`${e.name}:${e.count}x\n`})),t+=n,t+="\n"}),t},$d=(e,t)=>Rc(()=>{switch(e){case"data":switch(t.kind){case"dropped-frames":return(({renderTime:e,otherTime:t,formattedReactData:n})=>`I will provide you with a set of high level, and low level performance data about a large frame drop in a React App:\n### High level\n- react component render time: ${e.toFixed(0)}ms\n- how long it took to run everything else (other JavaScript, hooks like useEffect, style recalculations, layerization, paint & commit and everything else the browser might do to draw a new frame after javascript mutates the DOM): ${t}ms\n\n### Low level\nWe also have lower level information about react components, such as their render time, and which props/state/context changed when they re-rendered.\n${n}`)({formattedReactData:Md(t.groupedFiberRenders),renderTime:t.groupedFiberRenders.reduce((e,t)=>e+t.totalTime,0),otherTime:t.timing.otherTime});case"interaction":return(({renderTime:e,eHandlerTimeExcludingRenders:t,toRafTime:n,commitTime:r,framePresentTime:o,formattedReactData:i})=>`I will provide you with a set of high level, and low level performance data about an interaction in a React App:\n### High level\n- react component render time: ${e.toFixed(0)}ms\n- how long it took to run javascript event handlers (EXCLUDING REACT RENDERS): ${t.toFixed(0)}ms\n- how long it took from the last event handler time, to the last request animation frame: ${n.toFixed(0)}ms\n\t- things like prepaint, style recalculations, layerization, async web API's like observers may occur during this time\n- how long it took from the last request animation frame to when the dom was committed: ${r.toFixed(0)}ms\n\t- during this period you will see paint, commit, potential style recalcs, and other misc browser activity. Frequently high times here imply css that makes the browser do a lot of work, or mutating expensive dom properties during the event handler stage. This can be many things, but it narrows the problem scope significantly when this is high\n${null===o?"":`- how long it took from dom commit for the frame to be presented: ${o.toFixed(0)}ms. This is when information about how to paint the next frame is sent to the compositor threads, and when the GPU does work. If this is high, look for issues that may be a bottleneck for operations occurring during this time`}\n\n### Low level\nWe also have lower level information about react components, such as their render time, and which props/state/context changed when they re-rendered.\n${i}`)({commitTime:t.timing.frameConstruction,eHandlerTimeExcludingRenders:t.timing.otherJSTime,formattedReactData:Md(t.groupedFiberRenders),framePresentTime:t.timing.frameDraw,renderTime:t.groupedFiberRenders.reduce((e,t)=>e+t.totalTime,0),toRafTime:t.timing.framePreparation})}case"explanation":switch(t.kind){case"dropped-frames":return(({renderTime:e,otherTime:t,formattedReactData:n})=>`Your goal will be to help me find the source of a performance problem in a React App. I collected a large dataset about this specific performance problem.\n\nWe have the high level time of how much react spent rendering, and what else the browser spent time on during this slowdown\n\n- react component render time: ${e.toFixed(0)}ms\n- other time (other JavaScript, hooks like useEffect, style recalculations, layerization, paint & commit and everything else the browser might do to draw a new frame after javascript mutates the DOM): ${t}ms\n\n\nWe also have lower level information about react components, such as their render time, and which props/state/context changed when they re-rendered.\n\n${n}\n\nYou may notice components have many renders, but much fewer props/state/context changes. This normally implies most of the components could have been memoized to avoid computation\n\nIt's also important to remember if a component had no props/state/context change, and it was memoized, it would not render. So a flow we can go through is:\n- find the most expensive components\n- see what's causing them to render\n- determine how you can make those state/props/context not change for a large set of the renders\n- once there are no more changes left, you can memoize the component so it no longer unnecessarily re-renders. \n\n\nAn important thing to note is that if you see a lot of react renders (some components with very high render counts), but other time is much higher than render time, it is possible that the components with lots of renders run hooks like useEffect/useLayoutEffect, which run outside of what we profile (just react render time).\n\nIt's also good to note that react profiles hook times in development, and if many hooks are called (lets say 5,000 components all called a useEffect), it will have to profile every single one, and this can add significant overhead when thousands of effects ran.\n\nIf it's not possible to explain the root problem from this data, please ask me for more data explicitly, and what we would need to know to find the source of the performance problem.\n`)({formattedReactData:Md(t.groupedFiberRenders),renderTime:t.groupedFiberRenders.reduce((e,t)=>e+t.totalTime,0),otherTime:t.timing.otherTime});case"interaction":return(({interactionType:e,name:t,time:n,renderTime:r,eHandlerTimeExcludingRenders:o,toRafTime:i,commitTime:a,framePresentTime:s,formattedReactData:l})=>`Your goal will be to help me find the source of a performance problem. I collected a large dataset about this specific performance problem.\n\nThere was a ${e} on a component named ${t}. This means, roughly, the component that handled the ${e} event was named ${t}.\n\nWe have a set of high level, and low level data about the performance issue.\n\nThe click took ${n.toFixed(0)}ms from interaction start, to when a new frame was presented to a user.\n\nWe also provide you with a breakdown of what the browser spent time on during the period of interaction start to frame presentation.\n\n- react component render time: ${r.toFixed(0)}ms\n- how long it took to run javascript event handlers (EXCLUDING REACT RENDERS): ${o.toFixed(0)}ms\n- how long it took from the last event handler time, to the last request animation frame: ${i.toFixed(0)}ms\n\t- things like prepaint, style recalculations, layerization, async web API's like observers may occur during this time\n- how long it took from the last request animation frame to when the dom was committed: ${a.toFixed(0)}ms\n\t- during this period you will see paint, commit, potential style recalcs, and other misc browser activity. Frequently high times here imply css that makes the browser do a lot of work, or mutating expensive dom properties during the event handler stage. This can be many things, but it narrows the problem scope significantly when this is high\n${null===s?"":`- how long it took from dom commit for the frame to be presented: ${s.toFixed(0)}ms. This is when information about how to paint the next frame is sent to the compositor threads, and when the GPU does work. If this is high, look for issues that may be a bottleneck for operations occurring during this time`}\n\nWe also have lower level information about react components, such as their render time, and which props/state/context changed when they re-rendered.\n\n${l}\n\n\nYou may notice components have many renders, but much fewer props/state/context changes. This normally implies most of the components could have been memoized to avoid computation\n\nIt's also important to remember if a component had no props/state/context change, and it was memoized, it would not render. So a flow we can go through is:\n- find the most expensive components\n- see what's causing them to render\n- determine how you can make those state/props/context not change for a large set of the renders\n- once there are no more changes left, you can memoize the component so it no longer unnecessarily re-renders. \n\n\nAn important thing to note is that if you see a lot of react renders (some components with very high render counts), but javascript excluding renders is much higher than render time, it is possible that the components with lots of renders run hooks like useEffect/useLayoutEffect, which run during the JS event handler period.\n\nIt's also good to note that react profiles hook times in development, and if many hooks are called (lets say 5,000 components all called a useEffect), it will have to profile every single one. And it may also be the case the comparison of the hooks dependency can be expensive, and that would not be tracked in render time.\n\nIf it's not possible to explain the root problem from this data, please ask me for more data explicitly, and what we would need to know to find the source of the performance problem.\n`)({commitTime:t.timing.frameConstruction,eHandlerTimeExcludingRenders:t.timing.otherJSTime,formattedReactData:Md(t.groupedFiberRenders),framePresentTime:t.timing.frameDraw,interactionType:t.type,name:md(t.componentPath),renderTime:t.groupedFiberRenders.reduce((e,t)=>e+t.totalTime,0),time:fd(t.timing),toRafTime:t.timing.framePreparation})}case"fix":switch(t.kind){case"dropped-frames":return(({renderTime:e,otherTime:t,formattedReactData:n})=>`You will attempt to implement a performance improvement to a large slowdown in a react app\n\nYour should split your goals into 2 parts:\n- identifying the problem\n- fixing the problem\n\t- it is okay to implement a fix even if you aren't 100% sure the fix solves the performance problem. When you aren't sure, you should tell the user to try repeating the interaction, and feeding the "Formatted Data" in the React Scan notifications optimize tab. This allows you to start a debugging flow with the user, where you attempt a fix, and observe the result. The user may make a mistake when they pass you the formatted data, so must make sure, given the data passed to you, that the associated data ties to the same interaction you were trying to debug.\n\nMake sure to check if the user has the react compiler enabled (project dependent, configured through build tool), so you don't unnecessarily memoize components. If it is, you do not need to worry about memoizing user components\n\nOne challenge you may face is the performance problem lies in a node_module, not in user code. If you are confident the problem originates because of a node_module, there are multiple strategies, which are context dependent:\n- you can try to work around the problem, knowing which module is slow\n- you can determine if its possible to resolve the problem in the node_module by modifying non node_module code\n- you can monkey patch the node_module to experiment and see if it's really the problem (you can modify a functions properties to hijack the call for example)\n- you can determine if it's feasible to replace whatever node_module is causing the problem with a performant option (this is an extreme)\n\n\nWe have the high level time of how much react spent rendering, and what else the browser spent time on during this slowdown\n\n- react component render time: ${e.toFixed(0)}ms\n- other time: ${t}ms\n\n\nWe also have lower level information about react components, such as their render time, and which props/state/context changed when they re-rendered.\n\n${n}\n\nYou may notice components have many renders, but much fewer props/state/context changes. This normally implies most of the components could have been memoized to avoid computation\n\nIt's also important to remember if a component had no props/state/context change, and it was memoized, it would not render. So the flow should be:\n- find the most expensive components\n- see what's causing them to render\n- determine how you can make those state/props/context not change for a large set of the renders\n- once there are no more changes left, you can memoize the component so it no longer unnecessarily re-renders. \n\nAn important thing to note is that if you see a lot of react renders (some components with very high render counts), but other time is much higher than render time, it is possible that the components with lots of renders run hooks like useEffect/useLayoutEffect, which run outside of what we profile (just react render time).\n\nIt's also good to note that react profiles hook times in development, and if many hooks are called (lets say 5,000 components all called a useEffect), it will have to profile every single one. And it may also be the case the comparison of the hooks dependency can be expensive, and that would not be tracked in render time.\n\nIf a node_module is the component with high renders, you can experiment to see if that component is the root issue (because of hooks). You should use the same instructions for node_module debugging mentioned previously.\n\nIf renders don't seem to be the problem, see if there are any expensive CSS properties being added/mutated, or any expensive DOM Element mutations/new elements being created that could cause this slowdown. \n`)({formattedReactData:Md(t.groupedFiberRenders),renderTime:t.groupedFiberRenders.reduce((e,t)=>e+t.totalTime,0),otherTime:t.timing.otherTime});case"interaction":return(({interactionType:e,name:t,componentPath:n,time:r,renderTime:o,eHandlerTimeExcludingRenders:i,toRafTime:a,commitTime:s,framePresentTime:l,formattedReactData:c})=>`You will attempt to implement a performance improvement to a user interaction in a React app. You will be provided with data about the interaction, and the slow down.\n\nYour should split your goals into 2 parts:\n- identifying the problem\n- fixing the problem\n\t- it is okay to implement a fix even if you aren't 100% sure the fix solves the performance problem. When you aren't sure, you should tell the user to try repeating the interaction, and feeding the "Formatted Data" in the React Scan notifications optimize tab. This allows you to start a debugging flow with the user, where you attempt a fix, and observe the result. The user may make a mistake when they pass you the formatted data, so must make sure, given the data passed to you, that the associated data ties to the same interaction you were trying to debug.\n\n\nMake sure to check if the user has the react compiler enabled (project dependent, configured through build tool), so you don't unnecessarily memoize components. If it is, you do not need to worry about memoizing user components\n\nOne challenge you may face is the performance problem lies in a node_module, not in user code. If you are confident the problem originates because of a node_module, there are multiple strategies, which are context dependent:\n- you can try to work around the problem, knowing which module is slow\n- you can determine if its possible to resolve the problem in the node_module by modifying non node_module code\n- you can monkey patch the node_module to experiment and see if it's really the problem (you can modify a functions properties to hijack the call for example)\n- you can determine if it's feasible to replace whatever node_module is causing the problem with a performant option (this is an extreme)\n\nThe interaction was a ${e} on the component named ${t}. This component has the following ancestors ${n}. This is the path from the component, to the root. This should be enough information to figure out where this component is in the user's code base\n\nThis path is the component that was clicked, so it should tell you roughly where component had an event handler that triggered a state change.\n\nPlease note that the leaf node of this path might not be user code (if they use a UI library), and they may contain many wrapper components that just pass through children that aren't relevant to the actual click. So make you sure analyze the path and understand what the user code is doing\n\nWe have a set of high level, and low level data about the performance issue.\n\nThe click took ${r.toFixed(0)}ms from interaction start, to when a new frame was presented to a user.\n\nWe also provide you with a breakdown of what the browser spent time on during the period of interaction start to frame presentation.\n\n- react component render time: ${o.toFixed(0)}ms\n- how long it took to run javascript event handlers (EXCLUDING REACT RENDERS): ${i.toFixed(0)}ms\n- how long it took from the last event handler time, to the last request animation frame: ${a.toFixed(0)}ms\n\t- things like prepaint, style recalculations, layerization, async web API's like observers may occur during this time\n- how long it took from the last request animation frame to when the dom was committed: ${s.toFixed(0)}ms\n\t- during this period you will see paint, commit, potential style recalcs, and other misc browser activity. Frequently high times here imply css that makes the browser do a lot of work, or mutating expensive dom properties during the event handler stage. This can be many things, but it narrows the problem scope significantly when this is high\n${null===l?"":`- how long it took from dom commit for the frame to be presented: ${l.toFixed(0)}ms. This is when information about how to paint the next frame is sent to the compositor threads, and when the GPU does work. If this is high, look for issues that may be a bottleneck for operations occurring during this time`}\n\n\nWe also have lower level information about react components, such as their render time, and which props/state/context changed when they re-rendered.\n\n${c}\n\nYou may notice components have many renders, but much fewer props/state/context changes. This normally implies most of the components could have been memoized to avoid computation\n\nIt's also important to remember if a component had no props/state/context change, and it was memoized, it would not render. So the flow should be:\n- find the most expensive components\n- see what's causing them to render\n- determine how you can make those state/props/context not change for a large set of the renders\n- once there are no more changes left, you can memoize the component so it no longer unnecessarily re-renders. \n\nAn important thing to note is that if you see a lot of react renders (some components with very high render counts), but javascript excluding renders is much higher than render time, it is possible that the components with lots of renders run hooks like useEffect/useLayoutEffect, which run during the JS event handler period.\n\nIt's also good to note that react profiles hook times in development, and if many hooks are called (lets say 5,000 components all called a useEffect), it will have to profile every single one. And it may also be the case the comparison of the hooks dependency can be expensive, and that would not be tracked in render time.\n\nIf a node_module is the component with high renders, you can experiment to see if that component is the root issue (because of hooks). You should use the same instructions for node_module debugging mentioned previously.\n\n`)({commitTime:t.timing.frameConstruction,componentPath:t.componentPath.join(">"),eHandlerTimeExcludingRenders:t.timing.otherJSTime,formattedReactData:Md(t.groupedFiberRenders),framePresentTime:t.timing.frameDraw,interactionType:t.type,name:md(t.componentPath),renderTime:t.groupedFiberRenders.reduce((e,t)=>e+t.totalTime,0),time:fd(t.timing),toRafTime:t.timing.framePreparation})}}}),Fd=({selectedEvent:e})=>{const[t,n]=Ge("fix"),[r,o]=Ge(!1);return Rn("div",{className:lo(["w-full h-full"]),children:[Rn("div",{className:lo(["border border-[#27272A] rounded-sm h-4/5 text-xs overflow-hidden"]),children:[Rn("div",{className:lo(["bg-[#18181B] p-1 rounded-t-sm"]),children:Rn("div",{className:lo(["flex items-center gap-x-1"]),children:[Rn("button",{onClick:()=>n("fix"),className:lo(["flex items-center justify-center whitespace-nowrap py-1.5 px-3 rounded-sm","fix"===t?"text-white bg-[#7521c8]":"text-[#6E6E77] hover:text-white"]),children:"Fix"}),Rn("button",{onClick:()=>n("explanation"),className:lo(["flex items-center justify-center whitespace-nowrap py-1.5 px-3 rounded-sm","explanation"===t?"text-white bg-[#7521c8]":"text-[#6E6E77] hover:text-white"]),children:"Explanation"}),Rn("button",{onClick:()=>n("data"),className:lo(["flex items-center justify-center whitespace-nowrap py-1.5 px-3 rounded-sm","data"===t?"text-white bg-[#7521c8]":"text-[#6E6E77] hover:text-white"]),children:"Data"})]})}),Rn("div",{className:lo(["overflow-y-auto h-full"]),children:Rn("pre",{className:lo(["p-2 h-full","whitespace-pre-wrap break-words","text-gray-300 font-mono "]),children:$d(t,e)})})]}),Rn("button",{onClick:async()=>{const n=$d(t,e);await navigator.clipboard.writeText(n),o(!0),setTimeout(()=>o(!1),1e3)},className:lo(["mt-4 px-4 py-2 bg-[#18181B] text-[#6E6E77] rounded-sm","hover:text-white transition-colors duration-200","flex items-center justify-center gap-x-2 text-xs"]),children:[Rn("span",{children:r?"Copied!":"Copy Prompt"}),Rn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:lo(["transition-transform duration-200",r&&"scale-110"]),children:r?Rn("path",{d:"M20 6L9 17l-5-5"}):Rn(me,{children:[Rn("rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2"}),Rn("path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"})]})})]})]})},Rd=({selectedEvent:e})=>{var t,n;const[r]=Ge(null!=(t=Gu())&&t),{notificationState:o}=vd(),[i,a]=Ge((null==(n=o.routeMessage)?void 0:n.name)?[o.routeMessage.name]:[]),s=((e,t)=>{switch(e.kind){case"dropped-frames":return[...t?[{name:"Total Processing Time",time:fd(e.timing),color:"bg-red-500",kind:"total-processing-time"}]:[{name:"Renders",time:e.timing.renderTime,color:"bg-purple-500",kind:"render"},{name:"JavaScript, DOM updates, Draw Frame",time:e.timing.otherTime,color:"bg-[#4b4b4b]",kind:"other-frame-drop"}]];case"interaction":return[...t?[]:[{name:"Renders",time:e.timing.renderTime,color:"bg-purple-500",kind:"render"}],{name:t?"React Renders, Hooks, Other JavaScript":"JavaScript/React Hooks ",time:e.timing.otherJSTime,color:"bg-[#EFD81A]",kind:"other-javascript"},{name:"Update DOM and Draw New Frame",time:fd(e.timing)-e.timing.renderTime-e.timing.otherJSTime,color:"bg-[#1D3A66]",kind:"other-not-javascript"}]}})(e,r),l=Qe(Mu);Je(()=>{var e;if(null==(e=o.routeMessage)?void 0:e.name){const e=null==l?void 0:l.querySelector("#overview-scroll-container"),t=null==l?void 0:l.querySelector(`#react-scan-overview-bar-${o.routeMessage.name}`);if(e&&t){const n=t.getBoundingClientRect().top-e.getBoundingClientRect().top;e.scrollTop=e.scrollTop+n}}},[o.route]),Je(()=>{"other-visualization"===o.route&&a(e=>{var t;return(null==(t=o.routeMessage)?void 0:t.name)?[o.routeMessage.name]:e})},[o.route]);const c=s.reduce((e,t)=>e+t.time,0);return Rn("div",{className:"rounded-sm border border-zinc-800 text-xs",children:[Rn("div",{className:"p-2 border-b border-zinc-800 bg-zinc-900/50",children:Rn("div",{className:"flex items-center justify-between",children:[Rn("h3",{className:"text-xs font-medium",children:"What was time spent on?"}),Rn("span",{className:"text-xs text-zinc-400",children:["Total: ",c.toFixed(0),"ms"]})]})}),Rn("div",{className:"divide-y divide-zinc-800",children:s.map(t=>{const n=i.includes(t.kind);return Rn("div",{id:`react-scan-overview-bar-${t.kind}`,children:[Rn("button",{onClick:()=>a(e=>e.includes(t.kind)?e.filter(e=>e!==t.kind):[...e,t.kind]),className:"w-full px-3 py-2 flex items-center gap-4 hover:bg-zinc-800/50 transition-colors",children:Rn("div",{className:"flex-1",children:[Rn("div",{className:"flex items-center justify-between mb-2",children:[Rn("div",{className:"flex items-center gap-0.5",children:[Rn("svg",{className:"h-4 w-4 text-zinc-400 transition-transform "+(n?"rotate-90":""),fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:Rn("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M9 5l7 7-7 7"})}),Rn("span",{className:"font-medium flex items-center text-left",children:t.name})]}),Rn("span",{className:" text-zinc-400",children:[t.time.toFixed(0),"ms"]})]}),Rn("div",{className:"h-1 bg-zinc-800 rounded-full overflow-hidden",children:Rn("div",{className:`h-full ${t.color} transition-all`,style:{width:t.time/c*100+"%"}})})]})}),n&&Rn("div",{className:"bg-zinc-900/30 border-t border-zinc-800 px-2.5 py-3",children:Rn("p",{className:" text-zinc-400 mb-4 text-xs",children:Rc(()=>{switch(e.kind){case"interaction":switch(t.kind){case"render":return Rn(Pd,{input:jd(e)});case"other-javascript":return Rn(Pd,{input:Ld(e)});case"other-not-javascript":return Rn(Pd,{input:Od(e)})}case"dropped-frames":switch(t.kind){case"total-processing-time":return Rn(Pd,{input:{kind:"total-processing",data:{time:fd(e.timing)}}});case"render":return Rn(me,{children:Rn(Pd,{input:{kind:"render",data:{topByTime:e.groupedFiberRenders.toSorted((e,t)=>t.totalTime-e.totalTime).slice(0,3).map(t=>({name:t.name,percentage:t.totalTime/fd(e.timing)}))}}})});case"other-frame-drop":return Rn(Pd,{input:{kind:"other"}})}}})})})]},t.kind)})})]})},Od=e=>{const t=e.groupedFiberRenders.reduce((e,t)=>e+t.count,0),n=e.timing.renderTime,r=fd(e.timing);return t>100?{kind:"high-render-count-update-dom-draw-frame",data:{count:t,percentageOfTotal:n/r*100,copyButton:Rn(Dd,{})}}:{kind:"update-dom-draw-frame",data:{copyButton:Rn(Dd,{})}}},Dd=()=>{const[e,t]=Ge(!1),{notificationState:n}=vd();return Rn("button",{onClick:async()=>{n.selectedEvent&&(await navigator.clipboard.writeText($d("explanation",n.selectedEvent)),t(!0),setTimeout(()=>t(!1),1e3))},className:"bg-zinc-800 flex hover:bg-zinc-700 text-zinc-200 px-2 py-1 rounded gap-x-3",children:[Rn("span",{children:e?"Copied!":"Copy Prompt"}),Rn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:lo(["transition-transform duration-200",e&&"scale-110"]),children:e?Rn("path",{d:"M20 6L9 17l-5-5"}):Rn(me,{children:[Rn("rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2"}),Rn("path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"})]})})]})},jd=e=>e.timing.renderTime/fd(e.timing)>.3?{kind:"render",data:{topByTime:e.groupedFiberRenders.toSorted((e,t)=>t.totalTime-e.totalTime).slice(0,3).map(t=>({percentage:t.totalTime/fd(e.timing),name:t.name}))}}:{kind:"other"},Ld=e=>{const t=e.groupedFiberRenders.reduce((e,t)=>e+t.count,0);return e.timing.otherJSTime/fd(e.timing)<.2?{kind:"js-explanation-base"}:e.groupedFiberRenders.find(e=>e.count>200)||e.groupedFiberRenders.reduce((e,t)=>e+t.count,0)>500?{kind:"high-render-count-high-js",data:{renderCount:t,topByCount:e.groupedFiberRenders.filter(e=>e.count>100).toSorted((e,t)=>t.count-e.count).slice(0,3)}}:e.timing.otherJSTime/fd(e.timing)>.3?e.timing.renderTime>.2?{kind:"js-explanation-base"}:{kind:"low-render-count-high-js",data:{renderCount:t}}:{kind:"js-explanation-base"}},Pd=({input:e})=>{switch(e.kind){case"total-processing":return Rn("div",{className:lo(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"]),children:[Rn("p",{children:["This is the time it took to draw the entire frame that was presented to the user. To be at 60FPS, this number needs to be ","<=16ms"]}),Rn("p",{children:'To debug the issue, check the "Ranked" tab to see if there are significant component renders'}),Rn("p",{children:"On a production React build, React Scan can't access the time it took for component to render. To get that information, run React Scan on a development build"}),Rn("p",{children:["To understand precisely what caused the slowdown while in production, use the ",Rn("strong",{children:"Chrome profiler"})," and analyze the function call times."]}),Rn("p",{})]});case"render":return Rn("div",{className:lo(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"]),children:[Rn("p",{children:"This is the time it took React to run components, and internal logic to handle the output of your component."}),Rn("div",{className:lo(["flex flex-col"]),children:[Rn("p",{children:"The slowest components for this time period were:"}),e.data.topByTime.map(e=>Rn("div",{children:[Rn("strong",{children:e.name}),":"," ",(100*e.percentage).toFixed(0),"% of total"]},e.name))]}),Rn("p",{children:'To view the render times of all your components, and what caused them to render, go to the "Ranked" tab'}),Rn("p",{children:'The "Ranked" tab shows the render times of every component.'}),Rn("p",{children:"The render times of the same components are grouped together into one bar."}),Rn("p",{children:"Clicking the component will show you what props, state, or context caused the component to re-render."})]});case"js-explanation-base":return Rn("div",{className:lo(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"]),children:[Rn("p",{children:"This is the period when JavaScript hooks and other JavaScript outside of React Renders run."}),Rn("p",{children:["The most common culprit for high JS time is expensive hooks, like expensive callbacks inside of ",Rn("code",{children:"useEffect"}),"'s or a large number of useEffect's called, but this can also be JavaScript event handlers (",Rn("code",{children:"'onclick'"}),", ",Rn("code",{children:"'onchange'"}),") that performed expensive computation."]}),Rn("p",{children:"If you have lots of components rendering that call hooks, like useEffect, it can add significant overhead even if the callbacks are not expensive. If this is the case, you can try optimizing the renders of those components to avoid the hook from having to run."}),Rn("p",{children:["You should profile your app using the"," ",Rn("strong",{children:"Chrome DevTools profiler"})," to learn exactly which functions took the longest to execute."]})]});case"high-render-count-high-js":return Rn("div",{className:lo(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"]),children:[Rn("p",{children:"This is the period when JavaScript hooks and other JavaScript outside of React Renders run."}),0===e.data.renderCount?Rn(me,{children:[Rn("p",{children:"There were no renders, which means nothing related to React caused this slowdown. The most likely cause of the slowdown is a slow JavaScript event handler, or code related to a Web API"}),Rn("p",{children:["You should try to reproduce the slowdown while profiling your website with the",Rn("strong",{children:"Chrome DevTools profiler"})," to see exactly what functions took the longest to execute."]})]}):Rn(me,{children:[" ",Rn("p",{children:["There were ",Rn("strong",{children:e.data.renderCount})," renders, which could have contributed to the high JavaScript/Hook time if they ran lots of hooks, like ",Rn("code",{children:"useEffects"}),"."]}),Rn("div",{className:lo(["flex flex-col"]),children:[Rn("p",{children:"You should try optimizing the renders of:"}),e.data.topByCount.map(e=>Rn("div",{children:["- ",Rn("strong",{children:e.name})," (rendered ",e.count,"x)"]},e.name))]}),"and then checking if the problem still exists.",Rn("p",{children:["You can also try profiling your app using the"," ",Rn("strong",{children:"Chrome DevTools profiler"})," to see exactly what functions took the longest to execute."]})]})]});case"low-render-count-high-js":return Rn("div",{className:lo(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"]),children:[Rn("p",{children:"This is the period when JavaScript hooks and other JavaScript outside of React Renders run."}),Rn("p",{children:["There were only ",Rn("strong",{children:e.data.renderCount})," renders detected, which means either you had very expensive hooks like"," ",Rn("code",{children:"useEffect"}),"/",Rn("code",{children:"useLayoutEffect"}),", or there is other JavaScript running during this interaction that took up the majority of the time."]}),Rn("p",{children:["To understand precisely what caused the slowdown, use the"," ",Rn("strong",{children:"Chrome profiler"})," and analyze the function call times."]})]});case"high-render-count-update-dom-draw-frame":return Rn("div",{className:lo(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"]),children:[Rn("p",{children:"These are the calculations the browser is forced to do in response to the JavaScript that ran during the interaction."}),Rn("p",{children:"This can be caused by CSS updates/CSS recalculations, or new DOM elements/DOM mutations."}),Rn("p",{children:["During this interaction, there were"," ",Rn("strong",{children:e.data.count})," renders, which was"," ",Rn("strong",{children:[e.data.percentageOfTotal.toFixed(0),"%"]})," of the time spent processing"]}),Rn("p",{children:"The work performed as a result of the renders may have forced the browser to spend a lot of time to draw the next frame."}),Rn("p",{children:'You can try optimizing the renders to see if the performance problem still exists using the "Ranked" tab.'}),Rn("p",{children:"If you use an AI-based code editor, you can export the performance data collected as a prompt."}),Rn("p",{children:e.data.copyButton}),Rn("p",{children:"Provide this formatted data to the model and ask it to find, or fix, what could be causing this performance problem."}),Rn("p",{children:'For a larger selection of prompts, try the "Prompts" tab'})]});case"update-dom-draw-frame":return Rn("div",{className:lo(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"]),children:[Rn("p",{children:"These are the calculations the browser is forced to do in response to the JavaScript that ran during the interaction."}),Rn("p",{children:"This can be caused by CSS updates/CSS recalculations, or new DOM elements/DOM mutations."}),Rn("p",{children:"If you use an AI-based code editor, you can export the performance data collected as a prompt."}),Rn("p",{children:e.data.copyButton}),Rn("p",{children:"Provide this formatted data to the model and ask it to find, or fix, what could be causing this performance problem."}),Rn("p",{children:'For a larger selection of prompts, try the "Prompts" tab'})]});case"other":return Rn("div",{className:lo(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"]),children:[Rn("p",{children:["This is the time it took to run everything other than React renders. This can be hooks like ",Rn("code",{children:"useEffect"}),", other JavaScript not part of React, or work the browser has to do to update the DOM and draw the next frame."]}),Rn("p",{children:["To get a better picture of what happened, profile your app using the"," ",Rn("strong",{children:"Chrome profiler"})," when the performance problem arises."]})]})}},Id=null,Wd=null,Ud=_t({kind:"idle",current:null}),Hd=null,Bd=0,Vd=1/60,qd=()=>{Hd&&cancelAnimationFrame(Hd),Hd=requestAnimationFrame(e=>{if(!Id||!Wd)return;const t=Bd?Math.min((e-Bd)/1e3,.05):Vd;Bd=e;const n=1.8*t;Wd.clearRect(0,0,Id.width,Id.height);const r="hsl(271, 76%, 53%)",o=Ud.value,{alpha:i,current:a}=Rc(()=>{var e,t,n;switch(o.kind){case"transition":{const t=(null==(e=o.current)?void 0:e.alpha)&&o.current.alpha>0?o.current:o.transitionTo;return{alpha:t?t.alpha:0,current:t}}case"move-out":return{alpha:null!=(n=null==(t=o.current)?void 0:t.alpha)?n:0,current:o.current};case"idle":return{alpha:1,current:o.current}}});switch(null==a||a.rects.forEach(e=>{Wd&&(Wd.shadowColor=r,Wd.shadowBlur=6,Wd.strokeStyle=r,Wd.lineWidth=2,Wd.globalAlpha=i,Wd.beginPath(),Wd.rect(e.left,e.top,e.width,e.height),Wd.stroke(),Wd.shadowBlur=0,Wd.beginPath(),Wd.rect(e.left,e.top,e.width,e.height),Wd.stroke())}),o.kind){case"move-out":return 0===o.current.alpha?(Ud.value={kind:"idle",current:null},void(Bd=0)):(o.current.alpha<=.01&&(o.current.alpha=0),o.current.alpha=Math.max(0,o.current.alpha-n),void qd());case"transition":if(o.current&&o.current.alpha>0)return o.current.alpha=Math.max(0,o.current.alpha-n),void qd();if(1===o.transitionTo.alpha)return Ud.value={kind:"idle",current:o.transitionTo},void(Bd=0);o.transitionTo.alpha=Math.min(o.transitionTo.alpha+n,1),qd();case"idle":return void(Bd=0)}})},Gd=null;function Jd(){(null==Id?void 0:Id.parentNode)&&Id.parentNode.removeChild(Id),Id=null,Wd=null}var Yd,Xd=()=>{var e,t;const n=Ud.value.current?Ud.value.current:"transition"===Ud.value.kind?Ud.value.transitionTo:null;n&&("transition"!==Ud.value.kind?Ud.value={kind:"move-out",current:{alpha:0,...n}}:Ud.value={kind:"move-out",current:0===(null==(e=Ud.value.current)?void 0:e.alpha)?Ud.value.transitionTo:null!=(t=Ud.value.current)?t:Ud.value.transitionTo})},Kd=({selectedEvent:e})=>{const t=fd(e.timing),n=t-e.timing.renderTime,[r]=Ge(Gu()),o=e.groupedFiberRenders.map(e=>({event:e,kind:"render",totalTime:r?e.count:e.totalTime})),i=Rc(()=>{switch(e.kind){case"dropped-frames":return e.timing.renderTime/t<.1;case"interaction":return(e.timing.otherJSTime+e.timing.renderTime)/t<.2}});"interaction"!==e.kind||r||o.push({kind:"other-javascript",totalTime:e.timing.otherJSTime}),i&&!r&&("interaction"===e.kind?o.push({kind:"other-not-javascript",totalTime:fd(e.timing)-e.timing.renderTime-e.timing.otherJSTime}):o.push({kind:"other-frame-drop",totalTime:n}));const a=Xe({lastCallAt:null,timer:null}),s=o.reduce((e,t)=>e+t.totalTime,0);return Rn("div",{className:lo(["flex flex-col h-full w-full gap-y-1"]),children:[Rc(()=>r&&0===o.length?Rn("div",{className:"flex flex-col items-center justify-center h-full text-zinc-400",children:[Rn("p",{className:"text-sm w-full text-left text-white mb-1.5",children:"No data available"}),Rn("p",{className:"text-x w-full text-lefts",children:"No data was collected during this period"})]}):0===o.length?Rn("div",{className:"flex flex-col items-center justify-center h-full text-zinc-400",children:[Rn("p",{className:"text-sm w-full text-left text-white mb-1.5",children:"No renders collected"}),Rn("p",{className:"text-x w-full text-lefts",children:"There were no renders during this period"})]}):void 0),o.toSorted((e,t)=>t.totalTime-e.totalTime).map(e=>Rn(Zd,{bars:o,bar:e,debouncedMouseEnter:a,totalBarTime:s,isProduction:r},"render"===e.kind?e.event.id:e.kind))]})},Zd=({bar:e,debouncedMouseEnter:t,totalBarTime:n,isProduction:r,bars:o,depth:i=0})=>{const{setNotificationState:a,setRoute:s}=vd(),[l,c]=Ge(!1),d="render"!==e.kind||0===e.event.parents.size,u=o.filter(t=>"render"===t.kind&&"render"===e.kind&&(e.event.parents.has(t.event.name)&&t.event.name!==e.event.name)),p="render"===e.kind?Array.from(e.event.parents).filter(e=>!o.some(t=>"render"===t.kind&&t.event.name===e)):[];return Rn("div",{className:"w-full",children:[Rn("div",{className:lo(["w-full flex items-center relative text-xs min-w-0"]),children:[Rn("button",{onMouseLeave:()=>{t.current.timer&&clearTimeout(t.current.timer),Xd()},onMouseEnter:async()=>{const n=async()=>{if(t.current.lastCallAt=Date.now(),"render"!==e.kind){const e=Ud.value.current?Ud.value.current:"transition"===Ud.value.kind?Ud.value.transitionTo:null;return e?void(Ud.value={kind:"move-out",current:{alpha:0,...e}}):void(Ud.value={kind:"idle",current:null})}const n=Ud.value,r=Rc(()=>{switch(n.kind){case"transition":return n.transitionTo;case"idle":case"move-out":return n.current}}),o=[];if("transition"===n.kind){const t=(e=>e.current&&e.current.alpha>0?"fading-out":"fading-in")(n);Rc(()=>{switch(t){case"fading-in":return void(Ud.value={kind:"transition",current:n.transitionTo,transitionTo:{rects:o,alpha:0,name:e.event.name}});case"fading-out":return void(Ud.value={kind:"transition",current:Ud.value.current?{alpha:0,...Ud.value.current}:null,transitionTo:{rects:o,alpha:0,name:e.event.name}})}})}else Ud.value={kind:"transition",transitionTo:{rects:o,alpha:0,name:e.event.name},current:r?{alpha:0,...r}:null};const i=e.event.elements.filter(e=>e instanceof Element);for await(const e of ja(i))e.forEach(({boundingClientRect:e})=>{o.push(e)}),qd()};if(t.current.lastCallAt&&Date.now()-t.current.lastCallAt<200)return t.current.timer&&clearTimeout(t.current.timer),void(t.current.timer=setTimeout(()=>{n()},200));n()},onClick:()=>{"render"===e.kind?(a(t=>({...t,selectedFiber:e.event})),s({route:"render-explanation",routeMessage:null})):s({route:"other-visualization",routeMessage:{kind:"auto-open-overview-accordion",name:e.kind}})},className:lo(["h-full w-[90%] flex items-center hover:bg-[#0f0f0f] rounded-l-md min-w-0 relative"]),children:[Rn("div",{style:{minWidth:"fit-content",width:e.totalTime/n*100+"%"},className:lo(["flex items-center rounded-sm text-white text-xs h-[28px] shrink-0","render"===e.kind&&"bg-[#412162] group-hover:bg-[#5b2d89]","other-frame-drop"===e.kind&&"bg-[#44444a] group-hover:bg-[#6a6a6a]","other-javascript"===e.kind&&"bg-[#efd81a6b] group-hover:bg-[#efda1a2f]","other-not-javascript"===e.kind&&"bg-[#214379d4] group-hover:bg-[#21437982]"])}),Rn("div",{className:lo(["absolute inset-0 flex items-center px-2","min-w-0"]),children:Rn("div",{className:"flex items-center gap-x-2 min-w-0 w-full",children:[Rn("span",{className:lo(["truncate"]),children:Rc(()=>{switch(e.kind){case"other-frame-drop":return"JavaScript, DOM updates, Draw Frame";case"other-javascript":return"JavaScript/React Hooks";case"other-not-javascript":return"Update DOM and Draw New Frame";case"render":return e.event.name}})}),"render"===e.kind&&(h=e.event,!h.wasFiberRenderMount&&!h.hasMemoCache&&0===h.changes.context.length&&0===h.changes.props.length&&0===h.changes.state.length)&&Rn("div",{style:{lineHeight:"10px"},className:lo(["px-1 py-0.5 bg-[#6a369e] flex items-center rounded-sm font-semibold text-[8px] shrink-0"]),children:"Memoizable"})]})})]}),Rn("button",{onClick:()=>"render"===e.kind&&!d&&c(!l),className:lo(["flex items-center min-w-fit shrink-0 rounded-r-md h-[28px]",!d&&"hover:bg-[#0f0f0f]","render"!==e.kind||d?"cursor-default":"cursor-pointer"]),children:[Rn("div",{className:"w-[20px] flex items-center justify-center",children:"render"===e.kind&&!d&&Rn(bd,{className:lo("transition-transform",l&&"rotate-90"),size:16})}),Rn("div",{style:{minWidth:d?"fit-content":r?"30px":"60px"},className:"flex items-center justify-end gap-x-1",children:["render"===e.kind&&Rn("span",{className:lo(["text-[10px]"]),children:["x",e.event.count]}),("render"!==e.kind||!r)&&Rn("span",{className:"text-[10px] text-[#7346a0] pr-1",children:[e.totalTime<1?"<1":e.totalTime.toFixed(0),"ms"]})]})]}),0===i&&Rn("div",{className:lo(["absolute right-0 top-1/2 transition-none -translate-y-1/2 bg-white text-black px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity mr-16","pointer-events-none"]),children:"Click to learn more"})]}),l&&(u.length>0||p.length>0)&&Rn("div",{className:"pl-3 flex flex-col gap-y-1 mt-1",children:[u.toSorted((e,t)=>t.totalTime-e.totalTime).map((e,a)=>Rn(Zd,{depth:i+1,bar:e,debouncedMouseEnter:t,totalBarTime:n,isProduction:r,bars:o},a)),p.map(e=>Rn("div",{className:"w-full",children:Rn("div",{className:"w-full flex items-center relative text-xs",children:Rn("div",{className:"h-full w-full flex items-center relative",children:[Rn("div",{className:"flex items-center rounded-sm text-white text-xs h-[28px] w-full"}),Rn("div",{className:"absolute inset-0 flex items-center px-2",children:Rn("span",{className:"truncate whitespace-nowrap text-white/70 w-full",children:e})})]})})},e))]})]});var h},Qd=({selectedEvent:e,selectedFiber:t})=>{const{setRoute:n}=vd(),[r,o]=Ge(!0),[i]=Ge(Gu());Ye(()=>{const e=localStorage.getItem("react-scan-tip-shown"),t="true"===e||"false"!==e&&null;if(null===t)return o(!0),void localStorage.setItem("react-scan-tip-is-shown","true");t||o(!1)},[]);const a=0===t.changes.context.length&&0===t.changes.props.length&&0===t.changes.state.length;return Rn("div",{className:lo(["w-full min-h-fit h-full flex flex-col py-4 pt-0 rounded-sm"]),children:[Rn("div",{className:lo(["flex items-start gap-x-4 "]),children:[Rn("button",{onClick:()=>{n({route:"render-visualization",routeMessage:null})},className:lo(["text-white hover:bg-[#34343b] flex gap-x-1 justify-center items-center mb-4 w-fit px-2.5 py-1.5 text-xs rounded-sm bg-[#18181B]"]),children:[Rn(Nd,{size:14})," ",Rn("span",{children:"Overview"})]}),Rn("div",{className:lo(["flex flex-col gap-y-1"]),children:[Rn("div",{className:lo(["text-sm font-bold text-white overflow-x-hidden"]),children:Rn("div",{className:"flex items-center gap-x-2 truncate",children:t.name})}),Rn("div",{className:lo(["flex gap-x-2"]),children:[!i&&Rn(me,{children:Rn("div",{className:lo(["text-xs text-gray-400"]),children:["• Render time: ",t.totalTime.toFixed(0),"ms"]})}),Rn("div",{className:lo(["text-xs text-gray-400 mb-4"]),children:["• Renders: ",t.count,"x"]})]})]})]}),r&&!a&&Rn("div",{className:lo(["w-full mb-4 bg-[#0A0A0A] border border-[#27272A] rounded-sm overflow-hidden flex relative"]),children:[Rn("button",{onClick:()=>{o(!1),localStorage.setItem("react-scan-tip-shown","false")},className:lo(["absolute right-2 top-2 rounded-sm p-1 hover:bg-[#18181B]"]),children:Rn(yd,{size:12})}),Rn("div",{className:lo(["w-1 bg-[#d36cff]"])}),Rn("div",{className:lo(["flex-1"]),children:[Rn("div",{className:lo(["px-3 py-2 text-gray-100 text-xs font-semibold"]),children:"How to stop renders"}),Rn("div",{className:lo(["px-3 pb-2 text-gray-400 text-[10px]"]),children:"Stop the following props, state and context from changing between renders, and wrap the component in React.memo if not already"})]})]}),a&&Rn("div",{className:lo(["w-full mb-4 bg-[#0A0A0A] border border-[#27272A] rounded-sm overflow-hidden flex"]),children:[Rn("div",{className:lo(["w-1 bg-[#d36cff]"])}),Rn("div",{className:lo(["flex-1"]),children:[Rn("div",{className:lo(["px-3 py-2 text-gray-100 text-sm font-semibold"]),children:"No changes detected"}),Rn("div",{className:lo(["px-3 pb-2 text-gray-400 text-xs"]),children:"This component would not have rendered if it was memoized"})]})]}),Rn("div",{className:lo(["flex w-full"]),children:[Rn("div",{className:lo(["flex flex-col border border-[#27272A] rounded-l-sm overflow-hidden w-1/3"]),children:[Rn("div",{className:lo(["text-[14px] font-semibold px-2 py-2 bg-[#18181B] text-white flex justify-center"]),children:"Changed Props"}),t.changes.props.length>0?t.changes.props.toSorted((e,t)=>t.count-e.count).map(e=>Rn("div",{className:lo(["flex flex-col justify-between items-center border-t overflow-x-auto border-[#27272A] px-1 py-1 text-wrap bg-[#0A0A0A] text-[10px]"]),children:[Rn("span",{className:lo(["text-white "]),children:e.name}),Rn("div",{className:lo([" text-[8px]  text-[#d36cff] pl-1 py-1 "]),children:[e.count,"/",t.count,"x"]})]},e.name)):Rn("div",{className:lo(["flex items-center justify-center h-full bg-[#0A0A0A] text-[#A1A1AA] border-t border-[#27272A]"]),children:"No changes"})]}),Rn("div",{className:lo(["flex flex-col border border-[#27272A] border-l-0 overflow-hidden w-1/3"]),children:[Rn("div",{className:lo([" text-[14px] font-semibold px-2 py-2 bg-[#18181B] text-white flex justify-center"]),children:"Changed State"}),t.changes.state.length>0?t.changes.state.toSorted((e,t)=>t.count-e.count).map(e=>Rn("div",{className:lo(["flex flex-col justify-between items-center border-t overflow-x-auto border-[#27272A] px-1 py-1 text-wrap bg-[#0A0A0A] text-[10px]"]),children:[Rn("span",{className:lo(["text-white "]),children:["index ",e.index]}),Rn("div",{className:lo(["rounded-full  text-[#d36cff] pl-1 py-1 text-[8px]"]),children:[e.count,"/",t.count,"x"]})]},e.index)):Rn("div",{className:lo(["flex items-center justify-center h-full bg-[#0A0A0A] text-[#A1A1AA] border-t border-[#27272A]"]),children:"No changes"})]}),Rn("div",{className:lo(["flex flex-col border border-[#27272A] border-l-0 rounded-r-sm overflow-hidden w-1/3"]),children:[Rn("div",{className:lo([" text-[14px] font-semibold px-2 py-2 bg-[#18181B] text-white flex justify-center"]),children:"Changed Context"}),t.changes.context.length>0?t.changes.context.toSorted((e,t)=>t.count-e.count).map(e=>Rn("div",{className:lo(["flex flex-col justify-between items-center border-t  border-[#27272A] px-1 py-1 bg-[#0A0A0A] text-[10px] overflow-x-auto"]),children:[Rn("span",{className:lo(["text-white "]),children:e.name}),Rn("div",{className:lo(["rounded-full text-[#d36cff] pl-1 py-1 text-[8px] text-wrap"]),children:[e.count,"/",t.count,"x"]})]},e.name)):Rn("div",{className:lo(["flex items-center justify-center h-full bg-[#0A0A0A] text-[#A1A1AA] border-t border-[#27272A] py-2"]),children:"No changes"})]})]})]})},eu=()=>{const{notificationState:e,setNotificationState:t}=vd(),[n,r]=Ge("..."),o=Xe(null);if(Je(()=>{const e=setInterval(()=>{r(e=>"..."===e?"":e+".")},500);return()=>clearInterval(e)},[]),!e.selectedEvent)return Rn("div",{ref:o,className:lo(["h-full w-full flex flex-col items-center justify-center relative py-2 px-4"]),children:[Rn("div",{className:lo(["p-2 flex justify-center items-center border-[#27272A] absolute top-0 right-0"]),children:Rn("button",{onClick:()=>{_o.value={view:"none"}},children:Rn(yd,{size:18,className:"text-[#6F6F78]"})})}),Rn("div",{className:lo(["flex flex-col items-start pt-5 bg-[#0A0A0A] p-5 rounded-sm max-w-md"," shadow-lg"]),children:Rn("div",{className:lo(["flex flex-col items-start gap-y-4"]),children:[Rn("div",{className:lo(["flex items-center"]),children:Rn("span",{className:lo(["text-zinc-400 font-medium text-[17px]"]),children:["Scanning for slowdowns",n]})}),0!==e.events.length&&Rn("p",{className:lo(["text-xs"]),children:["Click on an item in the"," ",Rn("span",{className:lo(["text-purple-400"]),children:"History"})," list to get started"]}),Rn("p",{className:lo(["text-zinc-600 text-xs"]),children:"You don't need to keep this panel open for React Scan to record slowdowns"}),Rn("p",{className:lo(["text-zinc-600 text-xs"]),children:"Enable audio alerts to hear a delightful ding every time a large slowdown is recorded"}),Rn("button",{onClick:()=>{if(e.audioNotificationsOptions.enabled)return void t(e=>{var t,n;return"closed"!==(null==(t=e.audioNotificationsOptions.audioContext)?void 0:t.state)&&(null==(n=e.audioNotificationsOptions.audioContext)||n.close()),localStorage.setItem("react-scan-notifications-audio","false"),{...e,audioNotificationsOptions:{audioContext:null,enabled:!1}}});localStorage.setItem("react-scan-notifications-audio","true");const n=new AudioContext;nn(n),t(e=>({...e,audioNotificationsOptions:{enabled:!0,audioContext:n}}))},className:lo(["px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-sm w-full"," text-sm flex items-center gap-x-2 justify-center"]),children:e.audioNotificationsOptions.enabled?Rn(me,{children:Rn("span",{className:"flex items-center gap-x-1",children:"Disable audio alerts"})}):Rn(me,{children:Rn("span",{className:"flex items-center gap-x-1",children:"Enable audio alerts"})})})]})})]});switch(e.route){case"render-visualization":return Rn(tu,{children:Rn(Kd,{selectedEvent:e.selectedEvent})});case"render-explanation":if(!e.selectedFiber)throw new Error("Invariant: must have selected fiber when viewing render explanation");return Rn(tu,{children:Rn(Qd,{selectedFiber:e.selectedFiber,selectedEvent:e.selectedEvent})});case"other-visualization":return Rn(tu,{children:Rn("div",{className:lo(["flex w-full h-full flex-col overflow-y-auto"]),id:"overview-scroll-container",children:Rn(Rd,{selectedEvent:e.selectedEvent})})});case"optimize":return Rn(tu,{children:Rn(Fd,{selectedEvent:e.selectedEvent})})}e.route},tu=({children:e})=>{const{notificationState:t}=vd();if(!t.selectedEvent)throw new Error("Invariant: d must have selected event when viewing render explanation");return Rn("div",{className:lo(["w-full h-full flex flex-col gap-y-2"]),children:[Rn("div",{className:lo(["h-[50px] w-full"]),children:Rn(Ad,{selectedEvent:t.selectedEvent})}),Rn("div",{className:lo(["h-calc(100%-50px) flex flex-col overflow-y-auto px-3"]),children:e})]})},nu=({selectedEvent:e})=>{const t=gd(e);switch(e.kind){case"interaction":return Rn("div",{className:lo(["w-full flex border-b border-[#27272A] min-h-[48px]"]),children:Rn("div",{className:lo(["min-w-fit w-full justify-start flex items-center border-r border-[#27272A] pl-5 pr-2 text-sm gap-x-4"]),children:[Rn("div",{className:lo(["flex items-center gap-x-2 "]),children:[Rn("span",{className:lo(["text-[#5a5a5a] mr-0.5"]),children:"click"===e.type?"Clicked ":"Typed in "}),Rn("span",{children:md(e.componentPath)}),Rn("div",{className:lo(["w-fit flex items-center justify-center h-fit text-white px-1 rounded-sm font-semibold text-[10px] whitespace-nowrap","low"===t&&"bg-green-500/50","needs-improvement"===t&&"bg-[#b77116]","high"===t&&"bg-[#b94040]"]),children:[fd(e.timing).toFixed(0),"ms processing time"]})]}),Rn("div",{className:lo(["flex items-center gap-x-2  justify-end ml-auto"]),children:Rn("div",{className:lo(["p-2 flex justify-center items-center border-[#27272A]"]),children:Rn("button",{onClick:()=>{_o.value={view:"none"}},title:"Close",children:Rn(yd,{size:18,className:"text-[#6F6F78]"})})})})]})});case"dropped-frames":return Rn("div",{className:lo(["w-full flex border-b border-[#27272A] min-h-[48px]"]),children:Rn("div",{className:lo(["min-w-fit w-full justify-start flex items-center border-r border-[#27272A] pl-5 pr-2 text-sm gap-x-4"]),children:[Rn("div",{className:lo(["flex items-center gap-x-2 "]),children:["FPS Drop",Rn("div",{className:lo(["w-fit flex items-center justify-center h-fit text-white px-1 rounded-sm font-semibold text-[10px] whitespace-nowrap","low"===t&&"bg-green-500/50","needs-improvement"===t&&"bg-[#b77116]","high"===t&&"bg-[#b94040]"]),children:["dropped to ",e.fps," FPS"]})]}),Rn("div",{className:lo(["flex items-center gap-x-2 w-2/4 justify-end ml-auto"]),children:Rn("div",{className:lo(["p-2 flex justify-center items-center border-[#27272A]"]),children:Rn("button",{onClick:()=>{_o.value={view:"none"}},children:Rn(yd,{size:18,className:"text-[#6F6F78]"})})})})]})})}},ru=({item:e,shouldFlash:t})=>{var n,r;const[o,i]=Ge(!1),a=e.events.map(gd).reduce((e,t)=>{switch(t){case"high":return"high";case"needs-improvement":return"high"===e?"high":"needs-improvement";case"low":return e}},"low"),s=(({flashingItemsCount:e,totalEvents:t})=>{const[n,r]=Ge(!1),o=Xe(0),i=Xe(0);return Je(()=>{if(o.current>=t)return;const e=Date.now()-i.current;if(e>=250){r(!1);const e=setTimeout(()=>{o.current=t,i.current=Date.now(),r(!0),setTimeout(()=>{r(!1)},2e3)},50);return()=>clearTimeout(e)}{const n=setTimeout(()=>{r(!1),setTimeout(()=>{o.current=t,i.current=Date.now(),r(!0),setTimeout(()=>{r(!1)},2e3)},50)},250-e);return()=>clearTimeout(n)}},[e]),n})({flashingItemsCount:e.events.reduce((e,n)=>t(n.id)?e+1:e,0),totalEvents:e.events.length});return Rn("div",{className:lo(["flex flex-col gap-y-0.5"]),children:[Rn("button",{onClick:()=>i(e=>!e),className:lo(["pl-2 py-1.5  text-sm flex items-center rounded-sm hover:bg-[#18181B] relative overflow-hidden",s&&!o&&"after:absolute after:inset-0 after:bg-purple-500/30 after:animate-[fadeOut_1s_ease-out_forwards]"]),children:[Rn("div",{className:lo(["w-4/5 flex items-center justify-start h-full text-xs truncate gap-x-1.5"]),children:[Rn("span",{className:lo(["min-w-fit"]),children:Rn(bd,{className:lo(["text-[#A1A1AA] transition-transform",o?"rotate-90":""]),size:14},`chevron-${e.timestamp}`)}),Rn("span",{className:lo(["text-xs"]),children:"collapsed-frame-drops"===e.kind?"FPS Drops":md(null!=(r=null==(n=e.events.at(0))?void 0:n.componentPath)?r:[])})]}),Rn("div",{className:lo(["ml-auto min-w-fit flex justify-end items-center"]),children:Rn("div",{style:{lineHeight:"10px"},className:lo(["w-fit flex items-center text-[10px] justify-center h-full text-white px-1 py-1 rounded-sm font-semibold","low"===a&&"bg-green-500/60","needs-improvement"===a&&"bg-[#b77116] text-[10px]","high"===a&&"bg-[#b94040]"]),children:["x",e.events.length]})})]}),o&&Rn(ou,{children:e.events.toSorted((e,t)=>t.timestamp-e.timestamp).map(e=>Rn(iu,{event:e,shouldFlash:t(e.id)}))})]})},ou=({children:e})=>Rn("div",{className:"relative pl-6 flex flex-col gap-y-1",children:[Rn("div",{className:"absolute left-3 top-0 bottom-0 w-px bg-[#27272A]"}),e]}),iu=({event:e,shouldFlash:t})=>{var n,r;const{notificationState:o,setNotificationState:i}=vd(),a=gd(e),s=(({shouldFlash:e})=>{const[t,n]=Ge(e);return Je(()=>{if(e){n(!0);const e=setTimeout(()=>{n(!1)},1e3);return()=>clearTimeout(e)}},[e]),t})({shouldFlash:t});switch(e.kind){case"interaction":return Rn("button",{onClick:()=>{i(t=>({...t,selectedEvent:e,route:"render-visualization",selectedFiber:null}))},className:lo(["pl-2 py-1.5  text-sm flex w-full items-center rounded-sm hover:bg-[#18181B] relative overflow-hidden",e.id===(null==(n=o.selectedEvent)?void 0:n.id)&&"bg-[#18181B]",s&&"after:absolute after:inset-0 after:bg-purple-500/30 after:animate-[fadeOut_1s_ease-out_forwards]"]),children:[Rn("div",{className:lo(["w-4/5 flex items-center justify-start h-full gap-x-1.5"]),children:[Rn("span",{className:lo(["min-w-fit text-xs"]),children:Rc(()=>{switch(e.type){case"click":return Rn(Sd,{size:14});case"keyboard":return Rn(Cd,{size:14})}})}),Rn("span",{className:lo(["text-xs pr-1 truncate"]),children:md(e.componentPath)})]}),Rn("div",{className:lo([" min-w-fit flex justify-end items-center ml-auto"]),children:Rn("div",{style:{lineHeight:"10px"},className:lo(["gap-x-0.5 w-fit flex items-end justify-center h-full text-white px-1 py-1 rounded-sm font-semibold text-[10px]","low"===a&&"bg-green-500/50","needs-improvement"===a&&"bg-[#b77116] text-[10px]","high"===a&&"bg-[#b94040]"]),children:Rn("div",{style:{lineHeight:"10px"},className:lo(["text-[10px] text-white flex items-end"]),children:[fd(e.timing).toFixed(0),"ms"]})})})]});case"dropped-frames":return Rn("button",{onClick:()=>{i(t=>({...t,selectedEvent:e,route:"render-visualization",selectedFiber:null}))},className:lo(["pl-2 py-1.5  w-full text-sm flex items-center rounded-sm hover:bg-[#18181B] relative overflow-hidden",e.id===(null==(r=o.selectedEvent)?void 0:r.id)&&"bg-[#18181B]",s&&"after:absolute after:inset-0 after:bg-purple-500/30 after:animate-[fadeOut_1s_ease-out_forwards]"]),children:[Rn("div",{className:lo(["w-4/5 flex items-center justify-start h-full text-xs truncate"]),children:[Rn(Ed,{size:14,className:"mr-1.5"})," FPS Drop"]}),Rn("div",{className:lo([" min-w-fit flex justify-end items-center ml-auto"]),children:Rn("div",{style:{lineHeight:"10px"},className:lo(["w-fit flex items-center justify-center h-full text-white px-1 py-1 rounded-sm text-[10px] font-bold","low"===a&&"bg-green-500/60","needs-improvement"===a&&"bg-[#b77116] text-[10px]","high"===a&&"bg-[#b94040]"]),children:[e.fps," FPS"]})})]})}},au=(e=150)=>{const{notificationState:t}=vd(),[n,r]=Ge(t.events);return Je(()=>{setTimeout(()=>{r(t.events)},e)},[t.events]),[n,r]},su=()=>{const{notificationState:e,setNotificationState:t}=vd(),n=(e=>{const t=Xe([]),[n,r]=Ge(new Set),o=Xe(!0);return Je(()=>{if(o.current)return o.current=!1,void(t.current=e);const n=new Set(e.map(e=>e.id)),i=new Set(t.current.map(e=>e.id)),a=new Set;n.forEach(e=>{i.has(e)||a.add(e)}),a.size>0&&(r(a),setTimeout(()=>{r(new Set)},2e3)),t.current=e},[e]),e=>n.has(e)})(e.events),[r,o]=au(),i=(a=r,a.reduce((e,t)=>{const n=e.at(-1);if(!n)return[{kind:"single",event:t,timestamp:t.timestamp}];switch(n.kind){case"collapsed-keyboard":return"interaction"===t.kind&&"keyboard"===t.type&&t.componentPath.join("-")===n.events[0].componentPath.join("-")?[...e.filter(e=>e!==n),{kind:"collapsed-keyboard",events:[...n.events,t],timestamp:Math.max(...[...n.events,t].map(e=>e.timestamp))}]:[...e,{kind:"single",event:t,timestamp:t.timestamp}];case"single":return"interaction"===n.event.kind&&"keyboard"===n.event.type&&"interaction"===t.kind&&"keyboard"===t.type&&n.event.componentPath.join("-")===t.componentPath.join("-")?[...e.filter(e=>e!==n),{kind:"collapsed-keyboard",events:[n.event,t],timestamp:Math.max(n.event.timestamp,t.timestamp)}]:"dropped-frames"===n.event.kind&&"dropped-frames"===t.kind?[...e.filter(e=>e!==n),{kind:"collapsed-frame-drops",events:[n.event,t],timestamp:Math.max(n.event.timestamp,t.timestamp)}]:[...e,{kind:"single",event:t,timestamp:t.timestamp}];case"collapsed-frame-drops":return"dropped-frames"===t.kind?[...e.filter(e=>e!==n),{kind:"collapsed-frame-drops",events:[...n.events,t],timestamp:Math.max(...[...n.events,t].map(e=>e.timestamp))}]:[...e,{kind:"single",event:t,timestamp:t.timestamp}]}},[])).toSorted((e,t)=>t.timestamp-e.timestamp);var a;return Rn("div",{className:lo(["w-full h-full gap-y-2 flex flex-col border-r border-[#27272A] overflow-y-auto"]),children:[Rn("div",{className:lo(["text-sm text-[#65656D] pl-3 pr-1 w-full flex items-center justify-between"]),children:[Rn("span",{children:"History"}),Rn(zd,{wrapperProps:{className:"h-full flex items-center justify-center ml-auto"},triggerContent:Rn("button",{className:lo(["hover:bg-[#18181B] rounded-full p-2"]),title:"Clear all events",onClick:()=>{sd.getState().actions.clear(),t(e=>({...e,selectedEvent:null,selectedFiber:null,route:"other-visualization"===e.route?"other-visualization":"render-visualization"})),o([])},children:Rn(Td,{className:lo([""]),size:16})}),children:Rn("div",{className:lo(["w-full flex justify-center"]),children:"Clear all events"})})]}),Rn("div",{className:lo(["flex flex-col px-1 gap-y-1"]),children:[0===i.length&&Rn("div",{className:lo(["flex items-center justify-center text-zinc-500 text-sm py-4"]),children:"No Events"}),i.map(e=>Rc(()=>{switch(e.kind){case"collapsed-keyboard":case"collapsed-frame-drops":return Rn(ru,{shouldFlash:n,item:e});case"single":return Rn(iu,{event:e.event,shouldFlash:n(e.event.id)},e.event.id)}}))]})]})},lu=()=>{const e=ld(),t=[];return(e=>{Je(()=>{const t=setInterval(()=>{e.forEach(e=>{e.groupedFiberRenders&&e.groupedFiberRenders.forEach(e=>{if(e.deletedAll)return;if(!e.elements||0===e.elements.length)return void(e.deletedAll=!0);const t=e.elements.length;e.elements=e.elements.filter(e=>e&&e.isConnected),0===e.elements.length&&t>0&&(e.deletedAll=!0)})})},5e3);return()=>{clearInterval(t)}},[e])})(t),e.state.events.forEach(e=>{const n=(e=>Object.values(e).map(e=>({id:tn(),totalTime:e.nodeInfo.reduce((e,t)=>e+t.selfTime,0),count:e.nodeInfo.length,name:e.nodeInfo[0].name,deletedAll:!1,parents:e.parents,hasMemoCache:e.hasMemoCache,wasFiberRenderMount:e.wasFiberRenderMount,elements:e.nodeInfo.map(e=>e.element),changes:{context:e.changes.fiberContext.current.filter(t=>e.changes.fiberContext.changesCounts.get(t.name)).map(t=>{var n;return{name:String(t.name),count:null!=(n=e.changes.fiberContext.changesCounts.get(t.name))?n:0}}),props:e.changes.fiberProps.current.filter(t=>e.changes.fiberProps.changesCounts.get(t.name)).map(t=>{var n;return{name:String(t.name),count:null!=(n=e.changes.fiberProps.changesCounts.get(t.name))?n:0}}),state:e.changes.fiberState.current.filter(t=>e.changes.fiberState.changesCounts.get(Number(t.name))).map(t=>{var n;return{index:t.name,count:null!=(n=e.changes.fiberState.changesCounts.get(Number(t.name)))?n:0}})}})))("interaction"===e.kind?e.data.meta.detailedTiming.fiberRenders:e.data.meta.fiberRenders),r=n.reduce((e,t)=>e+t.totalTime,0);switch(e.kind){case"interaction":{const{commitEnd:o,jsEndDetail:i,interactionStartDetail:a,rafStart:s}=e.data.meta.detailedTiming,l=Math.max(0,i-a-r),c=Math.max(e.data.meta.latency-(o-a),0);return void t.push({componentPath:e.data.meta.detailedTiming.componentPath,groupedFiberRenders:n,id:e.id,kind:"interaction",memory:null,timestamp:e.data.startAt,type:"keyboard"===e.data.meta.detailedTiming.interactionType?"keyboard":"click",timing:{renderTime:r,kind:"interaction",otherJSTime:l,framePreparation:s-i,frameConstruction:o-s,frameDraw:c}})}case"long-render":return void t.push({kind:"dropped-frames",id:e.id,memory:null,timing:{kind:"dropped-frames",renderTime:r,otherTime:e.data.meta.latency},groupedFiberRenders:n,timestamp:e.data.startAt,fps:e.data.meta.fps})}}),t},cu=()=>{const{notificationState:e,setNotificationState:t}=vd(),n=Xe(null),r=Xe(null),o=Xe(0),[i]=au(),a=i.filter(e=>"high"===gd(e)).length;return Je(()=>{const e=localStorage.getItem("react-scan-notifications-audio");if("false"!==e&&"true"!==e)return void localStorage.setItem("react-scan-notifications-audio","false");"false"!==e&&t(e=>e.audioNotificationsOptions.enabled?e:{...e,audioNotificationsOptions:{enabled:!0,audioContext:new AudioContext}})},[]),Je(()=>{const{audioNotificationsOptions:t}=e;if(!t.enabled)return;if(0===a)return;if(n.current&&n.current>=a)return;r.current&&clearTimeout(r.current);const i=Date.now()-o.current,s=Math.max(0,1e3-i);r.current=setTimeout(()=>{nn(t.audioContext),n.current=a,o.current=Date.now(),r.current=null},s)},[a]),Je(()=>{0===a&&(n.current=null)},[a]),Je(()=>()=>{r.current&&clearTimeout(r.current)},[]),null},du=un((e,t)=>{var n;const r=lu(),[o,i]=Ge({detailsExpanded:!1,events:r,filterBy:"latest",moreInfoExpanded:!1,route:"render-visualization",selectedEvent:null!=(n=r.toSorted((e,t)=>e.timestamp-t.timestamp).at(-1))?n:null,selectedFiber:null,routeMessage:null,audioNotificationsOptions:{enabled:!1,audioContext:null}});return o.events=r,Rn(wd.Provider,{value:{notificationState:o,setNotificationState:i,setRoute:({route:e,routeMessage:t})=>{i(n=>{const r={...n,route:e,routeMessage:t};switch(e){case"render-visualization":case"optimize":case"other-visualization":return Xd(),{...r,selectedFiber:null};case"render-explanation":return Xd(),r}})}},children:[Rn(cu,{}),Rn(uu,{ref:t})]})}),uu=un((e,t)=>{var n;const{notificationState:r}=vd();return Rn("div",{ref:t,className:lo(["h-full w-full flex flex-col"]),children:[r.selectedEvent&&Rn("div",{className:lo(["w-full h-[48px] flex flex-col",r.moreInfoExpanded&&"h-[235px]",r.moreInfoExpanded&&"dropped-frames"===r.selectedEvent.kind&&"h-[150px]"]),children:[Rn(nu,{selectedEvent:r.selectedEvent}),r.moreInfoExpanded&&Rn(pu,{})]}),Rn("div",{className:lo(["flex ",r.selectedEvent?"h-[calc(100%-48px)]":"h-full",r.moreInfoExpanded&&"h-[calc(100%-200px)]",r.moreInfoExpanded&&"dropped-frames"===(null==(n=r.selectedEvent)?void 0:n.kind)&&"h-[calc(100%-150px)]"]),children:[Rn("div",{className:lo(["h-full min-w-[200px]"]),children:Rn(su,{})}),Rn("div",{className:lo(["w-[calc(100%-200px)] h-full overflow-y-auto"]),children:Rn(eu,{})})]})]})}),pu=()=>{const{notificationState:e}=vd();if(!e.selectedEvent)throw new Error("Invariant must have selected event for more info");const t=e.selectedEvent;return Rn("div",{className:lo(["px-4 py-2 border-b border-[#27272A] bg-[#18181B]/50 h-[calc(100%-40px)]","dropped-frames"===t.kind&&"h-[calc(100%-25px)]"]),children:Rn("div",{className:lo(["flex flex-col gap-y-4 h-full"]),children:Rc(()=>{switch(t.kind){case"interaction":return Rn(me,{children:[Rn("div",{className:lo(["flex items-center gap-x-3"]),children:[Rn("span",{className:"text-[#6F6F78] text-xs font-medium",children:"click"===t.type?"Clicked component location":"Typed in component location"}),Rn("div",{className:"font-mono text-[#E4E4E7] flex items-center bg-[#27272A] pl-2 py-1 rounded-sm overflow-x-auto",children:t.componentPath.toReversed().map((e,n)=>Rn(me,{children:[Rn("span",{style:{lineHeight:"14px"},className:"text-[10px] whitespace-nowrap",children:e},e),n<t.componentPath.length-1&&Rn("span",{className:"text-[#6F6F78] mx-0.5",children:"‹"})]}))})]}),Rn("div",{className:lo(["flex items-center gap-x-3"]),children:[Rn("span",{className:"text-[#6F6F78] text-xs font-medium",children:"Total Time"}),Rn("span",{className:"text-[#E4E4E7] bg-[#27272A] px-1.5 py-1 rounded-sm text-xs",children:[fd(t.timing).toFixed(0),"ms"]})]}),Rn("div",{className:lo(["flex items-center gap-x-3"]),children:[Rn("span",{className:"text-[#6F6F78] text-xs font-medium",children:"Occurred"}),Rn("span",{className:"text-[#E4E4E7] bg-[#27272A] px-1.5 py-1 rounded-sm text-xs",children:`${((Date.now()-t.timestamp)/1e3).toFixed(0)}s ago`})]})]});case"dropped-frames":return Rn(me,{children:[Rn("div",{className:lo(["flex items-center gap-x-3"]),children:[Rn("span",{className:"text-[#6F6F78] text-xs font-medium",children:"Total Time"}),Rn("span",{className:"text-[#E4E4E7] bg-[#27272A] px-1.5 py-1 rounded-sm text-xs",children:[fd(t.timing).toFixed(0),"ms"]})]}),Rn("div",{className:lo(["flex items-center gap-x-3"]),children:[Rn("span",{className:"text-[#6F6F78] text-xs font-medium",children:"Occurred"}),Rn("span",{className:"text-[#E4E4E7] bg-[#27272A] px-1.5 py-1 rounded-sm text-xs",children:`${((Date.now()-t.timestamp)/1e3).toFixed(0)}s ago`})]})]})}})})})},hu=To(()=>{var e;const t=lu(),[n,r]=Ge(t);Je(()=>{const e=setTimeout(()=>{r(t)},600);return()=>{clearTimeout(e)}},[t]);const o=Iu.inspectState,i="inspecting"===o.value.kind,a="focused"===o.value.kind,[s,l]=Ge([]),c=Ze(()=>{switch(Iu.inspectState.value.kind){case"inspecting":return _o.value={view:"none"},void(Iu.inspectState.value={kind:"inspect-off"});case"focused":return _o.value={view:"inspector"},void(Iu.inspectState.value={kind:"inspecting",hoveredDomElement:null});case"inspect-off":return _o.value={view:"none"},void(Iu.inspectState.value={kind:"inspecting",hoveredDomElement:null});case"uninitialized":return}},[]),d=Ze(e=>{if(e.preventDefault(),e.stopPropagation(),!Wu.instrumentation)return;const t=!Wu.instrumentation.isPaused.value;Wu.instrumentation.isPaused.value=t;const n=uo("react-scan-options");po("react-scan-options",{...n,enabled:!t})},[]);Jt(()=>{"uninitialized"===Iu.inspectState.value.kind&&(Iu.inspectState.value={kind:"inspect-off"})});let u=null,p="#999";return i?(u=Rn(On,{name:"icon-inspect"}),p="#8e61e3"):a?(u=Rn(On,{name:"icon-focus"}),p="#8e61e3"):(u=Rn(On,{name:"icon-inspect"}),p="#999"),Ye(()=>{if("notifications"!==_o.value.view)return;const e=new Set(t.map(e=>e.id));l([...e.values()])},[t.length,_o.value.view]),Rn("div",{className:"flex max-h-9 min-h-9 flex-1 items-stretch overflow-hidden",children:[Rn("div",{className:"h-full flex items-center min-w-fit",children:Rn("button",{type:"button",id:"react-scan-inspect-element",title:"Inspect element",onClick:c,className:"button flex items-center justify-center h-full w-full pl-3 pr-2.5",style:{color:p},children:u})}),Rn("div",{className:"h-full flex items-center justify-center",children:Rn("button",{type:"button",id:"react-scan-notifications",title:"Notifications",onClick:()=>{switch("inspect-off"!==Iu.inspectState.value.kind&&(Iu.inspectState.value={kind:"inspect-off"}),_o.value.view){case"inspector":{Iu.inspectState.value={kind:"inspect-off"};const e=new Set(t.map(e=>e.id));return l([...e.values()]),void(_o.value={view:"notifications"})}case"notifications":return void(_o.value={view:"none"});case"none":{const e=new Set(t.map(e=>e.id));return l([...e.values()]),void(_o.value={view:"notifications"})}}},className:"button flex items-center justify-center h-full pl-2.5 pr-2.5",style:{color:p},children:Rn(xd,{events:n.filter(e=>!s.includes(e.id)).map(e=>"high"===gd(e)),size:16,className:lo(["text-[#999]","notifications"===_o.value.view&&"text-[#8E61E3]"])})})}),Rn(Mc,{checked:!(null==(e=Wu.instrumentation)?void 0:e.isPaused.value),onChange:d,className:"place-self-center",title:"Outline Re-renders"}),Wu.options.value.showFPS&&Rn(Fc,{})]})}),mu=Et(()=>"inspecting"===Iu.inspectState.value.kind),fu=Et(()=>lo("relative","flex-1","flex flex-col","rounded-t-lg","overflow-hidden","opacity-100","transition-[opacity]",mu.value&&"opacity-0 duration-0 delay-0")),gu=Et(()=>"inspector"===_o.value.view),vu=Et(()=>"notifications"===_o.value.view),wu=()=>Rn("div",{className:lo("flex flex-1 flex-col","overflow-hidden z-10","rounded-lg","bg-black","opacity-100","transition-[border-radius]","peer-hover/left:rounded-l-none","peer-hover/right:rounded-r-none","peer-hover/top:rounded-t-none","peer-hover/bottom:rounded-b-none"),children:[Rn("div",{className:fu,children:[Rn(Ac,{}),Rn("div",{className:lo("relative","flex-1 flex","text-white","bg-[#0A0A0A]","transition-opacity delay-150","overflow-hidden","border-b border-[#222]"),children:[Rn(bu,{isOpen:gu,children:Rn(fi,{})}),Rn(bu,{isOpen:vu,children:Rn(du,{})})]})]}),Rn(hu,{})]}),bu=({isOpen:e,children:t})=>Rn("div",{className:lo("flex-1","opacity-0","overflow-y-auto overflow-x-hidden","transition-opacity delay-0","pointer-events-none",e.value&&"opacity-100 delay-150 pointer-events-auto"),children:Rn("div",{className:"absolute inset-0 flex",children:t})}),xu=(e,t,n)=>e+(t-e)*n,yu={frameInterval:1e3/60,speeds:{fast:.51,slow:.1,off:0}},ku=ie&&window.devicePixelRatio||1,_u=()=>{const e=Xe(null),t=Xe(null),n=Xe(null),r=Xe(null),o=Xe(null),i=Xe(0),a=Xe(),s=Xe(new Map),l=Xe(!1),c=Xe(0),d=(e,t,n,o)=>{var i;if(!o)return;const a=null!=(i=(null==o?void 0:o.type)&&J(o.type))?i:"Unknown";e.save(),e.font="12px system-ui, -apple-system, sans-serif";const s="locked"===n?14:0,l="locked"===n?6:0,c=e.measureText(a).width+16+s+l,d=t.left,u=t.top-24-4;if(e.fillStyle="rgb(37, 37, 38, .75)",e.beginPath(),e.roundRect(d,u,c,24,3),e.fill(),"locked"===n){const t=d+8,n=u+(24-s)/2+2;((e,t,n,r)=>{e.save(),e.strokeStyle="white",e.fillStyle="white",e.lineWidth=1.5;const o=.6*r,i=.5*r,a=t+(r-o)/2,s=n;e.beginPath(),e.arc(a+o/2,s+i/2,o/2,Math.PI,0,!1),e.stroke();const l=.8*r,c=.5*r,d=t+(r-l)/2,u=n+i/2;e.fillRect(d,u,l,c),e.restore()})(e,t,n,s),r.current={x:t,y:n,width:s,height:s}}else r.current=null;e.fillStyle="white",e.textBaseline="middle";const p=d+8+("locked"===n?s+l:0);e.fillText(a,p,u+12),e.restore()},u=(e,t,r,o)=>{if(!n.current)return;const i=n.current;t.clearRect(0,0,e.width,e.height),t.strokeStyle="rgba(142, 97, 227, 0.5)",t.fillStyle="rgba(173, 97, 230, 0.10)","locked"===r?t.setLineDash([]):t.setLineDash([4]),t.lineWidth=1,t.fillRect(i.left,i.top,i.width,i.height),t.strokeRect(i.left,i.top,i.width,i.height),d(t,i,r,o)},p=(e,t,r,o,s)=>{if(t.save(),!n.current)return n.current=r,u(e,t,o,s),void t.restore();((e,t,r,o,s)=>{var l;const d=Wu.options.value.animationSpeed,p=null!=(l=yu.speeds[d])?l:yu.speeds.off,h=a=>{a-c.current<yu.frameInterval?i.current=requestAnimationFrame(h):(c.current=a,n.current?(n.current={left:xu(n.current.left,r.left,p),top:xu(n.current.top,r.top,p),width:xu(n.current.width,r.width,p),height:xu(n.current.height,r.height,p)},u(e,t,o,s),Math.abs(n.current.left-r.left)>.1||Math.abs(n.current.top-r.top)>.1||Math.abs(n.current.width-r.width)>.1||Math.abs(n.current.height-r.height)>.1?i.current=requestAnimationFrame(h):(n.current=r,u(e,t,o,s),cancelAnimationFrame(i.current),t.restore())):cancelAnimationFrame(i.current))};cancelAnimationFrame(i.current),clearTimeout(a.current),i.current=requestAnimationFrame(h),a.current=setTimeout(()=>{cancelAnimationFrame(i.current),n.current=r,u(e,t,o,s),t.restore()},1e3)})(e,t,r,o,s)},h=async(e,t,n,r)=>{if(!e||!t||!n)return;const{parentCompositeFiber:o}=yi(e),i=await(async e=>{const t=wi(e);if(!t)return null;const n=vi(t);return n?await new Promise(e=>{const t=new IntersectionObserver(n=>{var r,o;t.disconnect(),e(null!=(o=null==(r=n[0])?void 0:r.boundingClientRect)?o:null)});t.observe(n)}):null})(e);o&&i&&p(t,n,i,r,o)},m=t=>{if(!e.current||l.current)return;const i=a=>{e.current&&"opacity"===a.propertyName&&l.current&&(e.current.removeEventListener("transitionend",i),(e=>{const t=e.getContext("2d");t&&t.clearRect(0,0,e.width,e.height),n.current=null,r.current=null,o.current=null,e.classList.remove("fade-in"),l.current=!1})(e.current),null==t||t())},a=s.current.get("fade-out");a&&(a(),s.current.delete("fade-out")),e.current.addEventListener("transitionend",i),s.current.set("fade-out",()=>{var t;null==(t=e.current)||t.removeEventListener("transitionend",i)}),l.current=!0,e.current.classList.remove("fade-in"),requestAnimationFrame(()=>{var t;null==(t=e.current)||t.classList.add("fade-out")})},f=()=>{e.current&&(l.current=!1,e.current.classList.remove("fade-out"),requestAnimationFrame(()=>{var t;null==(t=e.current)||t.classList.add("fade-in")}))},g=co(r=>{var i,s;if("inspecting"!==Iu.inspectState.peek().kind||!t.current)return;t.current.style.pointerEvents="none";const c=document.elementFromPoint(null!=(i=null==r?void 0:r.clientX)?i:0,null!=(s=null==r?void 0:r.clientY)?s:0);if(t.current.style.removeProperty("pointer-events"),clearTimeout(a.current),c&&c!==e.current){const{parentCompositeFiber:e}=yi(c);if(e){const t=Si(e);if(t)return void(e=>{e!==o.current&&(o.current=e,Ni.has(e.tagName)?m():f(),Iu.inspectState.value={kind:"inspecting",hoveredDomElement:e})})(t)}}n.current&&e.current&&!l.current&&m()},32),v=(e,t)=>{const n=r.current;if(!n)return!1;const o=t.getBoundingClientRect(),i=t.width/o.width,a=t.height/o.height,s=(e.clientX-o.left)*i,l=(e.clientY-o.top)*a,c=s/ku,d=l/ku;return c>=n.x&&c<=n.x+n.width&&d>=n.y&&d<=n.y+n.height},w=n=>{if(n.__reactScanSyntheticEvent)return;const r=Iu.inspectState.peek(),i=e.current;return i&&t.current?v(n,i)?(n.preventDefault(),n.stopPropagation(),void(e=>{"focused"===e.kind&&(Iu.inspectState.value={kind:"inspecting",hoveredDomElement:e.focusedDomElement})})(r)):void("inspecting"===r.kind&&(e=>{var t,n;const r=["react-scan-inspect-element","react-scan-power"];if(e.target instanceof HTMLElement&&r.includes(e.target.id))return;const i=null==(t=o.current)?void 0:t.tagName;if(i&&Ni.has(i))return;e.preventDefault(),e.stopPropagation();const a=null!=(n=o.current)?n:document.elementFromPoint(e.clientX,e.clientY);if(!a)return;const s=e.composedPath().at(0);if(s instanceof HTMLElement&&r.includes(s.id)){const t=new MouseEvent(e.type,e);return t.__reactScanSyntheticEvent=!0,void s.dispatchEvent(t)}const{parentCompositeFiber:l}=yi(a);if(!l)return;const c=Si(l);if(!c)return o.current=null,void(Iu.inspectState.value={kind:"inspect-off"});Iu.inspectState.value={kind:"focused",focusedDomElement:c,fiber:l}})(n)):void 0},b=t=>{var r;if("Escape"!==t.key)return;const i=Iu.inspectState.peek();if(e.current&&"react-scan-root"!==(null==(r=document.activeElement)?void 0:r.id)&&(_o.value={view:"none"},"focused"===i.kind||"inspecting"===i.kind))switch(t.preventDefault(),t.stopPropagation(),i.kind){case"focused":f(),n.current=null,o.current=i.focusedDomElement,Iu.inspectState.value={kind:"inspecting",hoveredDomElement:i.focusedDomElement};break;case"inspecting":m(()=>{wo.value=!1,Iu.inspectState.value={kind:"inspect-off"}})}},x=(e,t)=>{const n=e.getBoundingClientRect();e.width=n.width*ku,e.height=n.height*ku,t.scale(ku,ku),t.save()},y=()=>{const t=Iu.inspectState.peek(),r=e.current;if(!r)return;const o=null==r?void 0:r.getContext("2d");o&&(cancelAnimationFrame(i.current),clearTimeout(a.current),x(r,o),n.current=null,"focused"===t.kind&&t.focusedDomElement?h(t.focusedDomElement,r,o,"locked"):"inspecting"===t.kind&&t.hoveredDomElement&&h(t.hoveredDomElement,r,o,"inspecting"))},k=t=>{const n=Iu.inspectState.peek(),r=e.current;r&&("inspecting"===n.kind||v(t,r))&&(t.preventDefault(),t.stopPropagation(),t.stopImmediatePropagation())};return Je(()=>{const r=e.current;if(!r)return;const l=null==r?void 0:r.getContext("2d");if(!l)return;x(r,l);const c=Iu.inspectState.subscribe(e=>{((e,r,a)=>{var l;let c;switch(null==(l=s.current.get(e.kind))||l(),t.current&&"inspecting"!==e.kind&&(t.current.style.pointerEvents="none"),i.current&&cancelAnimationFrame(i.current),e.kind){case"inspect-off":return void m();case"inspecting":h(e.hoveredDomElement,r,a,"inspecting");break;case"focused":if(!e.focusedDomElement)return;o.current!==e.focusedDomElement&&(o.current=e.focusedDomElement),_o.value={view:"inspector"},h(e.focusedDomElement,r,a,"locked"),c=Iu.lastReportTime.subscribe(()=>{if(i.current&&n.current){const{parentCompositeFiber:t}=yi(e.focusedDomElement);t&&h(e.focusedDomElement,r,a,"locked")}}),c&&s.current.set(e.kind,c)}})(e,r,l)});return window.addEventListener("scroll",y,{passive:!0}),window.addEventListener("resize",y,{passive:!0}),document.addEventListener("pointermove",g,{passive:!0,capture:!0}),document.addEventListener("pointerdown",k,{capture:!0}),document.addEventListener("click",w,{capture:!0}),document.addEventListener("keydown",b,{capture:!0}),()=>{(()=>{for(const e of s.current.values())null==e||e()})(),c(),window.removeEventListener("scroll",y),window.removeEventListener("resize",y),document.removeEventListener("pointermove",g,{capture:!0}),document.removeEventListener("click",w,{capture:!0}),document.removeEventListener("pointerdown",k,{capture:!0}),document.removeEventListener("keydown",b,{capture:!0}),i.current&&cancelAnimationFrame(i.current),clearTimeout(a.current)}},[]),Rn(me,{children:[Rn("div",{ref:t,className:lo("fixed top-0 left-0 w-screen h-screen","z-[214748365]"),style:{pointerEvents:"none"}}),Rn("canvas",{ref:e,dir:"ltr",className:lo("react-scan-inspector-overlay","fixed top-0 left-0 w-screen h-screen","pointer-events-none","z-[214748367]")})]})},Nu=class{constructor(e,t,r){n(this,"width",e),n(this,"height",t),n(this,"safeArea",r),n(this,"maxWidth"),n(this,"maxHeight"),this.maxWidth=e-r.left-r.right,this.maxHeight=t-r.top-r.bottom}rightEdge(e){return this.width-e-this.safeArea.right}bottomEdge(e){return this.height-e-this.safeArea.bottom}isFullWidth(e){return e>=this.maxWidth}isFullHeight(e){return e>=this.maxHeight}},Su=()=>{const e=window.innerWidth,t=window.innerHeight,n=vo();return Yd&&Yd.width===e&&Yd.height===t&&(r=Yd.safeArea,o=n,r.top===o.top&&r.right===o.right&&r.bottom===o.bottom&&r.left===o.left)?Yd:Yd=new Nu(e,t,n);var r,o},Cu=(e,t,n)=>{const r="rtl"===getComputedStyle(document.body).direction,o=window.innerWidth,i=window.innerHeight,a=vo(),s=t===jn,l=s?t:Math.min(t,o-a.left-a.right),c=s?n:Math.min(n,i-a.top-a.bottom);let d,u,p=a.left,h=o-l-a.right,m=a.top,f=i-c-a.bottom;const g=-a.right,v=-(o-l-a.left);switch(e){case"top-right":d=r?g:h,u=m;break;case"bottom-right":d=r?g:h,u=f;break;case"bottom-left":d=r?v:p,u=f;break;case"top-left":d=r?v:p,u=m;break;default:d=p,u=m}return s&&(d=r?Math.min(g,Math.max(d,v)):Math.max(p,Math.min(d,h)),u=Math.max(m,Math.min(u,f))),{x:d,y:u}},Tu=(e,t,n)=>{const r=n?jn:Pn,o=n?Su().maxWidth:Su().maxHeight,i=e+t;return Math.min(Math.max(r,i),o)},Eu=({position:e})=>{const t=Xe(null),n=Xe(null),r=Xe(null),o=Xe(null);Je(()=>{const i=t.current;if(!i)return;const a=()=>{i.classList.remove("pointer-events-none");const t="focused"===Iu.inspectState.value.kind,n="none"!==_o.value.view,r=(t||n)&&((e,t,n,r)=>!(!n||!r)||(n||r?n?e!==t.split("-")[0]:!!r&&e!==t.split("-")[1]:((e,t)=>{const[n,r]=t.split("-");return e!==n&&e!==r})(e,t)))(e,yo.value.corner,yo.value.dimensions.isFullWidth,yo.value.dimensions.isFullHeight);r?i.classList.remove("hidden","pointer-events-none","opacity-0"):i.classList.add("hidden","pointer-events-none","opacity-0")},s=yo.subscribe(e=>{null!==n.current&&null!==r.current&&null!==o.current&&e.dimensions.width===n.current&&e.dimensions.height===r.current&&e.corner===o.current||(a(),n.current=e.dimensions.width,r.current=e.dimensions.height,o.current=e.corner)}),l=Iu.inspectState.subscribe(()=>{a()});return()=>{s(),l(),n.current=null,r.current=null,o.current=null}},[]);const i=Ze(t=>{t.preventDefault(),t.stopPropagation();const n=bo.value;if(!n)return;const r=n.style,{dimensions:o}=yo.value,i=t.clientX,a=t.clientY,s=o.width,l=o.height,c=o.position;yo.value={...yo.value,dimensions:{...o,isFullWidth:!1,isFullHeight:!1,width:s,height:l,position:c}};let d=null;const u=t=>{d||(r.transition="none",d=requestAnimationFrame(()=>{const{newSize:n,newPosition:o}=((e,t,n,r,o)=>{const i="rtl"===getComputedStyle(document.body).direction,a=vo(),s=window.innerWidth-a.left-a.right,l=window.innerHeight-a.top-a.bottom;let c=t.width,d=t.height,u=n.x,p=n.y;if(i&&e.includes("right")){const e=-n.x+t.width-a.right,o=Math.min(t.width+r,e);c=Math.min(s,Math.max(jn,o)),u=n.x+(c-t.width)}if(i&&e.includes("left")){const e=window.innerWidth-n.x-a.left,o=Math.min(t.width-r,e);c=Math.min(s,Math.max(jn,o))}if(!i&&e.includes("right")){const e=window.innerWidth-n.x-a.right,o=Math.min(t.width+r,e);c=Math.min(s,Math.max(jn,o))}if(!i&&e.includes("left")){const e=n.x+t.width-a.left,o=Math.min(t.width-r,e);c=Math.min(s,Math.max(jn,o)),u=n.x-(c-t.width)}if(e.includes("bottom")){const e=window.innerHeight-n.y-a.bottom,r=Math.min(t.height+o,e);d=Math.min(l,Math.max(Pn,r))}if(e.includes("top")){const e=n.y+t.height-a.top,r=Math.min(t.height-o,e);d=Math.min(l,Math.max(Pn,r)),p=n.y-(d-t.height)}let h=a.left,m=window.innerWidth-a.right-c,f=a.top,g=window.innerHeight-a.bottom-d;const v=-a.right,w=-(window.innerWidth-c-a.left);return u=i?Math.min(v,Math.max(u,w)):Math.max(h,Math.min(u,m)),p=Math.max(f,Math.min(p,g)),{newSize:{width:c,height:d},newPosition:{x:u,y:p}}})(e,{width:s,height:l},c,t.clientX-i,t.clientY-a);r.transform=`translate3d(${o.x}px, ${o.y}px, 0)`,r.width=`${n.width}px`,r.height=`${n.height}px`;const u=Math.floor(n.width-120),p=yo.value.componentsTree.width,h=Math.min(u,Math.max(In,p));yo.value={...yo.value,dimensions:{isFullWidth:!1,isFullHeight:!1,width:n.width,height:n.height,position:o},componentsTree:{...yo.value.componentsTree,width:h}},d=null}))},p=()=>{d&&(cancelAnimationFrame(d),d=null),document.removeEventListener("pointermove",u),document.removeEventListener("pointerup",p);const{dimensions:e,corner:t}=yo.value,o=Su(),i=o.isFullWidth(e.width),a=o.isFullHeight(e.height);let s=t;(i&&a||i||a)&&(s=(e=>{const t=Su(),n={"top-left":Math.hypot(e.x,e.y),"top-right":Math.hypot(t.maxWidth-e.x,e.y),"bottom-left":Math.hypot(e.x,t.maxHeight-e.y),"bottom-right":Math.hypot(t.maxWidth-e.x,t.maxHeight-e.y)};let r="top-left";for(const e in n)n[e]<n[r]&&(r=e);return r})(e.position));const l=Cu(s,e.width,e.height),c=()=>{n.removeEventListener("transitionend",c)};n.addEventListener("transitionend",c),r.transform=`translate3d(${l.x}px, ${l.y}px, 0)`,yo.value={...yo.value,corner:s,dimensions:{isFullWidth:i,isFullHeight:a,width:e.width,height:e.height,position:l},lastDimensions:{isFullWidth:i,isFullHeight:a,width:e.width,height:e.height,position:l}},po(Wn,{corner:s,dimensions:yo.value.dimensions,lastDimensions:yo.value.lastDimensions,componentsTree:yo.value.componentsTree})};document.addEventListener("pointermove",u,{passive:!0}),document.addEventListener("pointerup",p)},[]),a=Ze(t=>{t.preventDefault(),t.stopPropagation();const n=bo.value;if(!n)return;const r=n.style,{dimensions:o,corner:i}=yo.value,a=Su(),s=a.isFullWidth(o.width),l=a.isFullHeight(o.height),c=s&&l,d=(s||l)&&!c;let u=o.width,p=o.height;const h=((e,t,n,r,o)=>{if(n){if("top-left"===e)return"bottom-right";if("top-right"===e)return"bottom-left";if("bottom-left"===e)return"top-right";if("bottom-right"===e)return"top-left";const[n,r]=t.split("-");if("left"===e)return`${n}-right`;if("right"===e)return`${n}-left`;if("top"===e)return`bottom-${r}`;if("bottom"===e)return`top-${r}`}if(r){if("left"===e)return`${t.split("-")[0]}-right`;if("right"===e)return`${t.split("-")[0]}-left`}if(o){if("top"===e)return`bottom-${t.split("-")[1]}`;if("bottom"===e)return`top-${t.split("-")[1]}`}return t})(e,i,c,s,l);"left"===e||"right"===e?(u=s?o.width:a.maxWidth,d&&(u=s?jn:a.maxWidth)):(p=l?o.height:a.maxHeight,d&&(p=l?Pn:a.maxHeight)),c&&("left"===e||"right"===e?u=jn:p=Pn);const m=Cu(h,u,p),f={isFullWidth:a.isFullWidth(u),isFullHeight:a.isFullHeight(p),width:u,height:p,position:m},g=Math.floor(u-jn/2),v=yo.value.componentsTree.width,w=Math.floor(.3*u),b=s?In:"left"!==e&&"right"!==e||s?Math.min(g,Math.max(In,v)):Math.min(g,Math.max(In,w));requestAnimationFrame(()=>{yo.value={corner:h,dimensions:f,lastDimensions:o,componentsTree:{...yo.value.componentsTree,width:b}},r.transition="all 0.25s cubic-bezier(0, 0, 0.2, 1)",r.width=`${u}px`,r.height=`${p}px`,r.transform=`translate3d(${m.x}px, ${m.y}px, 0)`}),po(Wn,{corner:h,dimensions:f,lastDimensions:o,componentsTree:{...yo.value.componentsTree,width:b}})},[]);return Rn("div",{ref:t,onPointerDown:i,onDblClick:a,className:lo("absolute z-50","flex items-center justify-center","group","transition-colors select-none","peer",{"resize-left peer/left":"left"===e,"resize-right peer/right z-10":"right"===e,"resize-top peer/top":"top"===e,"resize-bottom peer/bottom":"bottom"===e}),children:Rn("span",{className:"resize-line-wrapper",children:Rn("span",{className:"resize-line",children:Rn(On,{name:"icon-ellipsis",size:18,className:lo("text-neutral-400",("left"===e||"right"===e)&&"rotate-90")})})})})},zu={horizontal:{width:20,height:48},vertical:{width:48,height:20}},Au=()=>{const e=Xe(null),t=Xe(!1),n=Xe(0),r=Xe(0),o=Xe(!1),i=Ze((i=!0)=>{if(!e.current)return;const{corner:a}=yo.value;let s,l;if(So.value){const e=So.value.orientation||"horizontal",t=zu[e];s=t.width,l=t.height}else if(t.current){const e=yo.value.lastDimensions;s=Tu(e.width,0,!0),l=Tu(e.height,0,!1),o.current&&(o.current=!1)}else s=n.current,l=r.current;let c=Cu(a,s,l);if(So.value){const{corner:e,orientation:t="horizontal"}=So.value,n=zu[t],r=vo();switch(e){case"top-left":c="horizontal"===t?{x:-1,y:r.top}:{x:r.left,y:-1};break;case"bottom-left":c="horizontal"===t?{x:-1,y:window.innerHeight-n.height-r.bottom}:{x:r.left,y:window.innerHeight-n.height+1};break;case"top-right":c="horizontal"===t?{x:window.innerWidth-n.width+1,y:r.top}:{x:window.innerWidth-n.width-r.right,y:-1};break;default:c="horizontal"===t?{x:window.innerWidth-n.width+1,y:window.innerHeight-n.height-r.bottom}:{x:window.innerWidth-n.width-r.right,y:window.innerHeight-n.height+1}}}const d=i&&!(s<jn||l<Pn),u=e.current,p=u.style;let h=null;const m=()=>{ko(),u.removeEventListener("transitionend",m),h&&(cancelAnimationFrame(h),h=null)};u.addEventListener("transitionend",m),p.transition="all 0.25s cubic-bezier(0, 0, 0.2, 1)",h=requestAnimationFrame(()=>{p.width=`${s}px`,p.height=`${l}px`,p.transform=`translate3d(${c.x}px, ${c.y}px, 0)`,h=null});const f=vo(),g={isFullWidth:s>=window.innerWidth-f.left-f.right,isFullHeight:l>=window.innerHeight-f.top-f.bottom,width:s,height:l,position:c};yo.value={corner:a,dimensions:g,lastDimensions:t?yo.value.lastDimensions:s>n.current?g:yo.value.lastDimensions,componentsTree:yo.value.componentsTree},d&&po(Wn,{corner:yo.value.corner,dimensions:yo.value.dimensions,lastDimensions:yo.value.lastDimensions,componentsTree:yo.value.componentsTree}),ko()},[]),a=Ze(t=>{if(t.target.closest("button, a, input, textarea, select, pre, [contenteditable], [data-react-scan-selectable]"))return;if(t.preventDefault(),!e.current)return;const n=e.current,r=n.style,{dimensions:o}=yo.value,a=t.clientX,s=t.clientY,l=o.position.x,c=o.position.y;let d=l,u=c,p=null,h=!1,m=a,f=s;const g=e=>{p||(h=!0,m=e.clientX,f=e.clientY,p=requestAnimationFrame(()=>{const e=m-a,t=f-s;d=Number(l)+e,u=Number(c)+t,r.transition="none",r.transform=`translate3d(${d}px, ${u}px, 0)`;const n=d+o.width,h=u+o.height,w=Math.max(0,-d),b=Math.max(0,n-window.innerWidth),x=Math.max(0,-u),y=Math.max(0,h-window.innerHeight),k=Math.min(o.width,w+b),_=Math.min(o.height,x+y);let N=k*o.height+_*o.width-k*_>.35*(o.width*o.height);if(!N&&Wu.options.value.showFPS){const e=d+o.width;N=e<=0||e-100>=window.innerWidth||u+o.height<=0||u>=window.innerHeight}if(N){const e=d+o.width/2,t=u+o.height/2,n=window.innerWidth/2,r=window.innerHeight/2;let a,s;a=e<n?t<r?"top-left":"bottom-left":t<r?"top-right":"bottom-right";s=Math.max(w,b)>Math.max(x,y)?"horizontal":"vertical",yo.value={...yo.value,corner:a,lastDimensions:{...o,position:Cu(a,o.width,o.height)}};const l={corner:a,orientation:s};So.value=l,po(Un,l),po(Wn,yo.value),i(!1),document.removeEventListener("pointermove",g),document.removeEventListener("pointerup",v),p&&(cancelAnimationFrame(p),p=null)}p=null}))},v=()=>{if(!n)return;p&&(cancelAnimationFrame(p),p=null),document.removeEventListener("pointermove",g),document.removeEventListener("pointerup",v);const e=Math.abs(m-a),t=Math.abs(f-s),i=Math.sqrt(e*e+t*t);if(!h||i<60)return;const w=((e,t,n,r,o=100)=>{const i=void 0!==n?e-n:0,a=void 0!==r?t-r:0,s=window.innerWidth/2,l=window.innerHeight/2,c=i>o,d=a>o;if(c||i<-o){const e=t>l;return c?e?"bottom-right":"top-right":e?"bottom-left":"top-left"}if(d||a<-o){const t=e>s;return d?t?"bottom-right":"bottom-left":t?"top-right":"top-left"}return e>s?t>l?"bottom-right":"top-right":t>l?"bottom-left":"top-left"})(m,f,a,s,"focused"===Iu.inspectState.value.kind?80:40);if(w===yo.value.corner){r.transition="transform 0.25s cubic-bezier(0, 0, 0.2, 1)";const e=yo.value.dimensions.position;return void requestAnimationFrame(()=>{r.transform=`translate3d(${e.x}px, ${e.y}px, 0)`})}const b=Cu(w,o.width,o.height);if(d===l&&u===c)return;const x=()=>{r.transition="none",ko(),n.removeEventListener("transitionend",x),p&&(cancelAnimationFrame(p),p=null)};n.addEventListener("transitionend",x),r.transition="transform 0.25s cubic-bezier(0, 0, 0.2, 1)",requestAnimationFrame(()=>{r.transform=`translate3d(${b.x}px, ${b.y}px, 0)`}),yo.value={corner:w,dimensions:{isFullWidth:o.isFullWidth,isFullHeight:o.isFullHeight,width:o.width,height:o.height,position:b},lastDimensions:yo.value.lastDimensions,componentsTree:yo.value.componentsTree},po(Wn,{corner:w,dimensions:yo.value.dimensions,lastDimensions:yo.value.lastDimensions,componentsTree:yo.value.componentsTree})};document.addEventListener("pointermove",g),document.addEventListener("pointerup",v)},[]),s=Ze(t=>{if(t.preventDefault(),!e.current||!So.value)return;const{corner:r,orientation:o="horizontal"}=So.value,a=t.clientX,s=t.clientY;let l=!1;const c=t=>{if(l)return;const u=t.clientX-a,p=t.clientY-s;let h=!1;if("horizontal"===o?(r.endsWith("left")&&u>50||r.endsWith("right")&&u<-50)&&(h=!0):(r.startsWith("top")&&p>50||r.startsWith("bottom")&&p<-50)&&(h=!0),h){if(l=!0,So.value=null,po(Un,null),0===n.current&&e.current)requestAnimationFrame(()=>{if(e.current){e.current.style.width="min-content";const r=e.current.offsetWidth;n.current=r||300;const o=yo.value.lastDimensions,a=Tu(o.width,0,!0),s=Tu(o.height,0,!1);let l=t.clientX-a/2,c=t.clientY-s/2;const d=vo();l=Math.max(d.left,Math.min(l,window.innerWidth-a-d.right)),c=Math.max(d.top,Math.min(c,window.innerHeight-s-d.bottom)),yo.value={...yo.value,dimensions:{...yo.value.dimensions,position:{x:l,y:c}}},i(!0);const u=uo(Hn);_o.value=u||{view:"none"},setTimeout(()=>{if(e.current){const n=new PointerEvent("pointerdown",{clientX:t.clientX,clientY:t.clientY,pointerId:t.pointerId,bubbles:!0});e.current.dispatchEvent(n)}},100)}});else{i(!0);const e=uo(Hn);_o.value=e||{view:"none"}}document.removeEventListener("pointermove",c),document.removeEventListener("pointerup",d)}},d=()=>{document.removeEventListener("pointermove",c),document.removeEventListener("pointerup",d)};document.addEventListener("pointermove",c),document.addEventListener("pointerup",d)},[]);Je(()=>{if(!e.current)return;ho(Hn),So.value?(r.current=36,n.current=0):(e.current.style.width="min-content",r.current=36,n.current=e.current.offsetWidth);const a=vo();e.current.style.maxWidth=`calc(100vw - ${a.left+a.right}px)`,e.current.style.maxHeight=`calc(100vh - ${a.top+a.bottom}px)`,i(),"focused"===Iu.inspectState.value.kind||So.value||o.current||(yo.value={...yo.value,dimensions:{isFullWidth:!1,isFullHeight:!1,width:n.current,height:r.current,position:yo.value.dimensions.position}}),bo.value=e.current;const s=yo.subscribe(t=>{if(!e.current)return;const{x:n,y:r}=t.dimensions.position,{width:o,height:i}=t.dimensions,a=e.current;requestAnimationFrame(()=>{a.style.transform=`translate3d(${n}px, ${r}px, 0)`,a.style.width=`${o}px`,a.style.height=`${i}px`})}),l=_o.subscribe(e=>{t.current="none"!==e.view,i(),So.value||("none"!==e.view?po(Hn,e):ho(Hn))}),c=Iu.inspectState.subscribe(e=>{t.current="focused"===e.kind,i()}),d=()=>{i(!0)};return window.addEventListener("resize",d,{passive:!0}),()=>{window.removeEventListener("resize",d),l(),c(),s(),po(Wn,{...xo(),corner:yo.value.corner})}},[]);const[l,c]=Ge(!1);Je(()=>{c(!0)},[]);const d=So.value;let u="";if(d){const{orientation:e="horizontal",corner:t}=d;u="horizontal"===e?(null==t?void 0:t.endsWith("right"))?"rotate-180":"":(null==t?void 0:t.startsWith("bottom"))?"-rotate-90":"rotate-90"}return Rn(me,{children:[Rn(_u,{}),Rn(Mu.Provider,{value:e.current,children:Rn("div",{id:"react-scan-toolbar",dir:"ltr",ref:e,onPointerDown:d?s:a,className:lo("fixed inset-0",d?(()=>{const{orientation:e="horizontal",corner:t}=d;return"horizontal"===e?(null==t?void 0:t.endsWith("right"))?"rounded-tl-lg rounded-bl-lg shadow-lg":"rounded-tr-lg rounded-br-lg shadow-lg":(null==t?void 0:t.startsWith("bottom"))?"rounded-tl-lg rounded-tr-lg shadow-lg":"rounded-bl-lg rounded-br-lg shadow-lg"})():"rounded-lg shadow-lg","flex flex-col","font-mono text-[13px]","user-select-none","opacity-0",d?"cursor-pointer":"cursor-move","z-[124124124124]","animate-fade-in animation-duration-300 animation-delay-300","will-change-transform","[touch-action:none]"),style:{WebkitAppRegion:"no-drag"},children:d?Rn("button",{type:"button",onClick:()=>{So.value=null,po(Un,null),0===n.current&&e.current&&requestAnimationFrame(()=>{if(e.current){e.current.style.width="min-content";const t=e.current.offsetWidth;n.current=t||300,i(!0)}});const t=uo(Hn);_o.value=t||{view:"none"}},className:"flex items-center justify-center w-full h-full text-white",title:"Expand toolbar",children:Rn(On,{name:"icon-chevron-right",size:16,className:lo("transition-transform",u)})}):Rn(me,{children:[Rn(Eu,{position:"top"}),Rn(Eu,{position:"bottom"}),Rn(Eu,{position:"left"}),Rn(Eu,{position:"right"}),Rn(wu,{})]})})})]})},Mu=De(null),$u=()=>Rn("svg",{xmlns:"http://www.w3.org/2000/svg",style:"display: none;",children:[Rn("title",{children:"React Scan Icons"}),Rn("symbol",{id:"icon-inspect",viewBox:"0 0 24 24",fill:"none","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[Rn("path",{d:"M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.943.033z"}),Rn("path",{d:"M5 3a2 2 0 0 0-2 2"}),Rn("path",{d:"M19 3a2 2 0 0 1 2 2"}),Rn("path",{d:"M5 21a2 2 0 0 1-2-2"}),Rn("path",{d:"M9 3h1"}),Rn("path",{d:"M9 21h2"}),Rn("path",{d:"M14 3h1"}),Rn("path",{d:"M3 9v1"}),Rn("path",{d:"M21 9v2"}),Rn("path",{d:"M3 14v1"})]}),Rn("symbol",{id:"icon-focus",viewBox:"0 0 24 24",fill:"none","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[Rn("path",{d:"M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.943.033z"}),Rn("path",{d:"M21 11V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6"})]}),Rn("symbol",{id:"icon-next",viewBox:"0 0 24 24",fill:"none","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:Rn("path",{d:"M6 9h6V5l7 7-7 7v-4H6V9z"})}),Rn("symbol",{id:"icon-previous",viewBox:"0 0 24 24",fill:"none","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:Rn("path",{d:"M18 15h-6v4l-7-7 7-7v4h6v6z"})}),Rn("symbol",{id:"icon-close",viewBox:"0 0 24 24",fill:"none","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[Rn("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),Rn("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),Rn("symbol",{id:"icon-replay",viewBox:"0 0 24 24",fill:"none","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[Rn("path",{d:"M3 7V5a2 2 0 0 1 2-2h2"}),Rn("path",{d:"M17 3h2a2 2 0 0 1 2 2v2"}),Rn("path",{d:"M21 17v2a2 2 0 0 1-2 2h-2"}),Rn("path",{d:"M7 21H5a2 2 0 0 1-2-2v-2"}),Rn("circle",{cx:"12",cy:"12",r:"1"}),Rn("path",{d:"M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"})]}),Rn("symbol",{id:"icon-ellipsis",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[Rn("circle",{cx:"12",cy:"12",r:"1"}),Rn("circle",{cx:"19",cy:"12",r:"1"}),Rn("circle",{cx:"5",cy:"12",r:"1"})]}),Rn("symbol",{id:"icon-copy",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[Rn("rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2"}),Rn("path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"})]}),Rn("symbol",{id:"icon-check",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:Rn("path",{d:"M20 6 9 17l-5-5"})}),Rn("symbol",{id:"icon-chevron-right",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:Rn("path",{d:"m9 18 6-6-6-6"})}),Rn("symbol",{id:"icon-settings",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[Rn("path",{d:"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"}),Rn("circle",{cx:"12",cy:"12",r:"3"})]}),Rn("symbol",{id:"icon-flame",viewBox:"0 0 24 24",children:Rn("path",{d:"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"})}),Rn("symbol",{id:"icon-function",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[Rn("rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",ry:"2"}),Rn("path",{d:"M9 17c2 0 2.8-1 2.8-2.8V10c0-2 1-3.3 3.2-3"}),Rn("path",{d:"M9 11.2h5.7"})]}),Rn("symbol",{id:"icon-triangle-alert",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[Rn("path",{d:"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"}),Rn("path",{d:"M12 9v4"}),Rn("path",{d:"M12 17h.01"})]}),Rn("symbol",{id:"icon-gallery-horizontal-end",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[Rn("path",{d:"M2 7v10"}),Rn("path",{d:"M6 5v14"}),Rn("rect",{width:"12",height:"18",x:"10",y:"3",rx:"2"})]}),Rn("symbol",{id:"icon-search",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[Rn("circle",{cx:"11",cy:"11",r:"8"}),Rn("line",{x1:"21",y1:"21",x2:"16.65",y2:"16.65"})]}),Rn("symbol",{id:"icon-lock",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[Rn("rect",{width:"18",height:"11",x:"3",y:"11",rx:"2",ry:"2"}),Rn("path",{d:"M7 11V7a5 5 0 0 1 10 0v4"})]}),Rn("symbol",{id:"icon-lock-open",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[Rn("rect",{width:"18",height:"11",x:"3",y:"11",rx:"2",ry:"2"}),Rn("path",{d:"M7 11V7a5 5 0 0 1 9.9-1"})]}),Rn("symbol",{id:"icon-sanil",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[Rn("path",{d:"M2 13a6 6 0 1 0 12 0 4 4 0 1 0-8 0 2 2 0 0 0 4 0"}),Rn("circle",{cx:"10",cy:"13",r:"8"}),Rn("path",{d:"M2 21h12c4.4 0 8-3.6 8-8V7a2 2 0 1 0-4 0v6"}),Rn("path",{d:"M18 3 19.1 5.2"})]})]}),Fu=class extends fe{constructor(){super(...arguments),n(this,"state",{hasError:!1,error:null}),n(this,"handleReset",()=>{this.setState({hasError:!1,error:null})})}static getDerivedStateFromError(e){return{hasError:!0,error:e}}render(){var e;return this.state.hasError?Rn("div",{className:"fixed bottom-4 right-4 z-[124124124124]",children:Rn("div",{className:"p-3 bg-black rounded-lg shadow-lg w-80",children:[Rn("div",{className:"flex items-center gap-2 mb-2 text-red-400 text-sm font-medium",children:[Rn(On,{name:"icon-flame",className:"text-red-500",size:14}),"React Scan ran into a problem"]}),Rn("div",{className:"p-2 bg-black rounded font-mono text-xs text-red-300 mb-3 break-words",children:(null==(e=this.state.error)?void 0:e.message)||JSON.stringify(this.state.error)}),Rn("button",{type:"button",onClick:this.handleReset,className:"px-3 py-1.5 bg-red-500 hover:bg-red-600 text-white rounded text-xs font-medium transition-colors flex items-center justify-center gap-1.5",children:"Restart"})]})}):this.props.children}},Ru="0.1.32",Ou=!1,Du=["top","right","bottom","left"],ju=e=>{if(fo(e))return{ok:!0,value:e};if(!go(e))return{ok:!1,error:`- safeArea must be a non-negative number or { top?, right?, bottom?, left? }. Got "${JSON.stringify(e)}"`};const t={};for(const n of Du){const r=e[n];if(void 0!==r){if(!fo(r))return{ok:!1,error:`- safeArea.${n} must be a non-negative number. Got "${JSON.stringify(r)}"`};t[n]=r}}return{ok:!0,value:t}},Lu=null,Pu=null,Iu={wasDetailsOpen:_t(!0),isInIframe:_t(ie&&window.self!==window.top),inspectState:_t({kind:"uninitialized"}),fiberRoots:new Set,reportData:new Map,legacyReportData:new Map,lastReportTime:_t(0),interactionListeningForRenders:null,changesListeners:new Map},Wu={instrumentation:null,componentAllowList:null,options:_t({enabled:!0,log:!1,showToolbar:!0,animationSpeed:"fast",dangerouslyForceRunInProduction:!1,showFPS:!0,showNotificationCount:!0,allowInIframe:!1}),runInAllEnvironments:!1,onRender:null,Store:Iu,version:"0.5.7"};ie&&window.__REACT_SCAN_EXTENSION__&&(window.__REACT_SCAN_VERSION__=Wu.version);var Uu,Hu=e=>{const t=[],n={};for(const r in e){const o=e[r];switch(r){case"enabled":case"log":case"showToolbar":case"showNotificationCount":case"dangerouslyForceRunInProduction":case"showFPS":case"allowInIframe":case"useOffscreenCanvasWorker":"boolean"!=typeof o?t.push(`- ${r} must be a boolean. Got "${o}"`):n[r]=o;break;case"animationSpeed":["slow","fast","off"].includes(o)?n[r]=o:t.push(`- Invalid animation speed "${o}". Using default "fast"`);break;case"safeArea":{const e=ju(o);e.ok?n.safeArea=e.value:t.push(e.error);break}case"onCommitStart":"function"!=typeof o?t.push(`- ${r} must be a function. Got "${o}"`):n.onCommitStart=o;break;case"onCommitFinish":"function"!=typeof o?t.push(`- ${r} must be a function. Got "${o}"`):n.onCommitFinish=o;break;case"onRender":"function"!=typeof o?t.push(`- ${r} must be a function. Got "${o}"`):n.onRender=o;break;default:t.push(`- Unknown option "${r}"`)}}return t.length>0&&console.warn(`[React Scan] Invalid options:\n${t.join("\n")}`),n},Bu=e=>{var t;try{const n=Hu(e);if(0===Object.keys(n).length)return;const r="showToolbar"in n&&void 0!==n.showToolbar,o={...Wu.options.value,...n},{instrumentation:i}=Wu;i&&"enabled"in n&&(i.isPaused.value=!1===n.enabled),Wu.options.value=o;try{const e=null==(t=uo("react-scan-options"))?void 0:t.enabled;"boolean"==typeof e&&(o.enabled=e)}catch(e){"verbose"===Wu.options.value._debug&&console.error("[React Scan Internal Error]","Failed to create notifications outline canvas",e)}return po("react-scan-options",(e=>{const{onCommitStart:t,onRender:n,onCommitFinish:r,...o}=e;return o})(o)),r&&Yu(!!o.showToolbar),o}catch(e){"verbose"===Wu.options.value._debug&&console.error("[React Scan Internal Error]","Failed to create notifications outline canvas",e)}},Vu=()=>Wu.options,qu=null,Gu=()=>{if(!1===qu)return!1;null!=Uu||(Uu=g());const e=Array.from(Uu.renderers.values());if(0===e.length)return null;for(const t of e){if("production"!==Y(t))return qu=!1,!1}return!0},Ju=()=>{try{if(!ie)return;if(!Wu.runInAllEnvironments&&Gu()&&!Wu.options.value.dangerouslyForceRunInProduction)return;(()=>{if(Ou)return;if(Ou=!0,"undefined"==typeof window)return;if(window.__REACT_GRAB__)return;if(!navigator.onLine)return;const e={referrerPolicy:"origin",keepalive:!0,priority:"low",cache:"no-store"};try{fetch(`https://www.react-grab.com/api/version?source=react-scan&v=${Ru}&t=${Date.now()}`,e).then(e=>e.ok?e.text():null).then(e=>{if(!e)return;const t=e.trim();/^\d+\.\d+\.\d+/.test(t)&&t!==Ru&&console.warn(`[React Scan] react-grab v${Ru} is outdated (latest: v${t}). Update react-scan to pick up the newer react-grab.`)}).catch(()=>null)}catch{}})();const e=uo("react-scan-options");if(e){const t=Hu(e);Object.keys(t).length>0&&(Wu.options.value={...Wu.options.value,...t})}const t=Vu();Ya(()=>{Yu(!!t.value.showToolbar)}),ie&&setTimeout(()=>{(()=>{let e=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;return!!(null==e?void 0:e._instrumentationIsActive)||c(e)||u(e)})()||console.error("[React Scan] Failed to load. Must import React Scan before React runs.")},5e3)}catch(e){"verbose"===Wu.options.value._debug&&console.error("[React Scan Internal Error]","Failed to create notifications outline canvas",e)}},Yu=e=>{var t;null==(t=window.reactScanCleanupListeners)||t.call(window);const n=hd(),r=Xu();window.reactScanCleanupListeners=()=>{n(),null==r||r()};const o=window.__REACT_SCAN_TOOLBAR_CONTAINER__;if(!e)return void(null==o||o.remove());null==o||o.remove();const{shadowRoot:i}=(()=>{if(Lu&&Pu)return{rootContainer:Lu,shadowRoot:Pu};(Lu=document.createElement("div")).id="react-scan-root",Pu=Lu.attachShadow({mode:"open"});const e=document.createElement("style");return e.textContent='/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",\n      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n    --color-red-300: oklch(80.8% 0.114 19.571);\n    --color-red-400: oklch(70.4% 0.191 22.216);\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-red-600: oklch(57.7% 0.245 27.325);\n    --color-red-950: oklch(25.8% 0.092 26.042);\n    --color-yellow-300: oklch(90.5% 0.182 98.111);\n    --color-yellow-500: oklch(79.5% 0.184 86.047);\n    --color-green-500: oklch(72.3% 0.219 149.579);\n    --color-purple-400: oklch(71.4% 0.203 305.504);\n    --color-purple-500: oklch(62.7% 0.265 303.9);\n    --color-purple-800: oklch(43.8% 0.218 303.724);\n    --color-gray-100: oklch(96.7% 0.003 264.542);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-zinc-200: oklch(92% 0.004 286.32);\n    --color-zinc-400: oklch(70.5% 0.015 286.067);\n    --color-zinc-500: oklch(55.2% 0.016 285.938);\n    --color-zinc-600: oklch(44.2% 0.017 285.786);\n    --color-zinc-700: oklch(37% 0.013 285.805);\n    --color-zinc-800: oklch(27.4% 0.006 286.033);\n    --color-zinc-900: oklch(21% 0.006 285.885);\n    --color-neutral-300: oklch(87% 0 0);\n    --color-neutral-400: oklch(70.8% 0 0);\n    --color-neutral-500: oklch(55.6% 0 0);\n    --color-neutral-700: oklch(37.1% 0 0);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 4px;\n    --container-md: 448px;\n    --text-xs: 12px;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 14px;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --tracking-wide: 0.025em;\n    --radius-sm: 4px;\n    --radius-md: 6px;\n    --radius-lg: 8px;\n    --ease-in: cubic-bezier(0.4, 0, 1, 1);\n    --ease-out: cubic-bezier(0, 0, 0.2, 1);\n    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n    --blur-sm: 8px;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    -moz-tab-size: 4;\n      -o-tab-size: 4;\n         tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;\n    font-feature-settings: normal;\n    font-variation-settings: normal;\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::-moz-placeholder {\n    opacity: 1;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::-moz-placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {\n    -webkit-appearance: button;\n       -moz-appearance: button;\n            appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden="until-found"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-auto {\n    pointer-events: auto;\n  }\n  .pointer-events-bounding-box {\n    pointer-events: bounding-box;\n  }\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .collapse {\n    visibility: collapse;\n  }\n  .visible {\n    visibility: visible;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .static {\n    position: static;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .inset-x-1 {\n    inset-inline: calc(var(--spacing) * 1);\n  }\n  .inset-y-0 {\n    inset-block: calc(var(--spacing) * 0);\n  }\n  .start {\n    inset-inline-start: var(--spacing);\n  }\n  .end {\n    inset-inline-end: var(--spacing);\n  }\n  .-top-1 {\n    top: calc(var(--spacing) * -1);\n  }\n  .-top-2\\.5 {\n    top: calc(var(--spacing) * -2.5);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-0\\.5 {\n    top: calc(var(--spacing) * 0.5);\n  }\n  .top-1\\/2 {\n    top: calc(1 / 2 * 100%);\n  }\n  .top-2 {\n    top: calc(var(--spacing) * 2);\n  }\n  .-right-1 {\n    right: calc(var(--spacing) * -1);\n  }\n  .-right-2\\.5 {\n    right: calc(var(--spacing) * -2.5);\n  }\n  .right-0 {\n    right: calc(var(--spacing) * 0);\n  }\n  .right-0\\.5 {\n    right: calc(var(--spacing) * 0.5);\n  }\n  .right-2 {\n    right: calc(var(--spacing) * 2);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .bottom-0 {\n    bottom: calc(var(--spacing) * 0);\n  }\n  .bottom-4 {\n    bottom: calc(var(--spacing) * 4);\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-3 {\n    left: calc(var(--spacing) * 3);\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .z-100 {\n    z-index: 100;\n  }\n  .z-\\[214748365\\] {\n    z-index: 214748365;\n  }\n  .z-\\[214748367\\] {\n    z-index: 214748367;\n  }\n  .z-\\[124124124124\\] {\n    z-index: 124124124124;\n  }\n  .container {\n    width: 100%;\n    @media (width >= 640px) {\n      max-width: 640px;\n    }\n    @media (width >= 768px) {\n      max-width: 768px;\n    }\n    @media (width >= 1024px) {\n      max-width: 1024px;\n    }\n    @media (width >= 1280px) {\n      max-width: 1280px;\n    }\n    @media (width >= 1536px) {\n      max-width: 1536px;\n    }\n  }\n  .m-\\[2px\\] {\n    margin: 2px;\n  }\n  .mx-0\\.5 {\n    margin-inline: calc(var(--spacing) * 0.5);\n  }\n  .mt-0\\.5 {\n    margin-top: calc(var(--spacing) * 0.5);\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mr-0\\.5 {\n    margin-right: calc(var(--spacing) * 0.5);\n  }\n  .mr-1 {\n    margin-right: calc(var(--spacing) * 1);\n  }\n  .mr-1\\.5 {\n    margin-right: calc(var(--spacing) * 1.5);\n  }\n  .mr-16 {\n    margin-right: calc(var(--spacing) * 16);\n  }\n  .mr-auto {\n    margin-right: auto;\n  }\n  .mb-1\\.5 {\n    margin-bottom: calc(var(--spacing) * 1.5);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-3 {\n    margin-bottom: calc(var(--spacing) * 3);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-px {\n    margin-bottom: 1px;\n  }\n  .\\!ml-0 {\n    margin-left: calc(var(--spacing) * 0) !important;\n  }\n  .ml-1 {\n    margin-left: calc(var(--spacing) * 1);\n  }\n  .ml-1\\.5 {\n    margin-left: calc(var(--spacing) * 1.5);\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .block {\n    display: block;\n  }\n  .contents {\n    display: contents;\n  }\n  .flex {\n    display: flex;\n  }\n  .hidden {\n    display: none;\n  }\n  .inline {\n    display: inline;\n  }\n  .aspect-square {\n    aspect-ratio: 1 / 1;\n  }\n  .h-1 {\n    height: calc(var(--spacing) * 1);\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-4\\/5 {\n    height: calc(4 / 5 * 100%);\n  }\n  .h-6 {\n    height: calc(var(--spacing) * 6);\n  }\n  .h-7 {\n    height: calc(var(--spacing) * 7);\n  }\n  .h-8 {\n    height: calc(var(--spacing) * 8);\n  }\n  .h-10 {\n    height: calc(var(--spacing) * 10);\n  }\n  .h-12 {\n    height: calc(var(--spacing) * 12);\n  }\n  .h-\\[28px\\] {\n    height: 28px;\n  }\n  .h-\\[48px\\] {\n    height: 48px;\n  }\n  .h-\\[50px\\] {\n    height: 50px;\n  }\n  .h-\\[150px\\] {\n    height: 150px;\n  }\n  .h-\\[235px\\] {\n    height: 235px;\n  }\n  .h-\\[calc\\(100\\%-25px\\)\\] {\n    height: calc(100% - 25px);\n  }\n  .h-\\[calc\\(100\\%-40px\\)\\] {\n    height: calc(100% - 40px);\n  }\n  .h-\\[calc\\(100\\%-48px\\)\\] {\n    height: calc(100% - 48px);\n  }\n  .h-\\[calc\\(100\\%-150px\\)\\] {\n    height: calc(100% - 150px);\n  }\n  .h-\\[calc\\(100\\%-200px\\)\\] {\n    height: calc(100% - 200px);\n  }\n  .h-fit {\n    height: -moz-fit-content;\n    height: fit-content;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .h-screen {\n    height: 100vh;\n  }\n  .max-h-0 {\n    max-height: calc(var(--spacing) * 0);\n  }\n  .max-h-9 {\n    max-height: calc(var(--spacing) * 9);\n  }\n  .max-h-40 {\n    max-height: calc(var(--spacing) * 40);\n  }\n  .min-h-9 {\n    min-height: calc(var(--spacing) * 9);\n  }\n  .min-h-\\[48px\\] {\n    min-height: 48px;\n  }\n  .min-h-fit {\n    min-height: -moz-fit-content;\n    min-height: fit-content;\n  }\n  .w-1 {\n    width: calc(var(--spacing) * 1);\n  }\n  .w-1\\/2 {\n    width: calc(1 / 2 * 100%);\n  }\n  .w-1\\/3 {\n    width: calc(1 / 3 * 100%);\n  }\n  .w-2\\/4 {\n    width: calc(2 / 4 * 100%);\n  }\n  .w-3 {\n    width: calc(var(--spacing) * 3);\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-4\\/5 {\n    width: calc(4 / 5 * 100%);\n  }\n  .w-6 {\n    width: calc(var(--spacing) * 6);\n  }\n  .w-80 {\n    width: calc(var(--spacing) * 80);\n  }\n  .w-\\[20px\\] {\n    width: 20px;\n  }\n  .w-\\[72px\\] {\n    width: 72px;\n  }\n  .w-\\[90\\%\\] {\n    width: 90%;\n  }\n  .w-\\[calc\\(100\\%-200px\\)\\] {\n    width: calc(100% - 200px);\n  }\n  .w-fit {\n    width: -moz-fit-content;\n    width: fit-content;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .w-px {\n    width: 1px;\n  }\n  .w-screen {\n    width: 100vw;\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .min-w-0 {\n    min-width: calc(var(--spacing) * 0);\n  }\n  .min-w-\\[200px\\] {\n    min-width: 200px;\n  }\n  .min-w-fit {\n    min-width: -moz-fit-content;\n    min-width: fit-content;\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .grow {\n    flex-grow: 1;\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-\\[200\\%\\] {\n    --tw-translate-y: calc(200% * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-y-0 {\n    --tw-translate-y: calc(var(--spacing) * 0);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .scale-110 {\n    --tw-scale-x: 110%;\n    --tw-scale-y: 110%;\n    --tw-scale-z: 110%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .-rotate-90 {\n    rotate: calc(90deg * -1);\n  }\n  .rotate-90 {\n    rotate: 90deg;\n  }\n  .rotate-180 {\n    rotate: 180deg;\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-fade-in {\n    animation: fadeIn ease-in forwards;\n  }\n  .cursor-default {\n    cursor: default;\n  }\n  .cursor-e-resize {\n    cursor: e-resize;\n  }\n  .cursor-ew-resize {\n    cursor: ew-resize;\n  }\n  .cursor-ew-resize {\n    cursor: ew-resize;\n  }\n  .cursor-move {\n    cursor: move;\n  }\n  .cursor-move {\n    cursor: move;\n  }\n  .cursor-nesw-resize {\n    cursor: nesw-resize;\n  }\n  .cursor-nesw-resize {\n    cursor: nesw-resize;\n  }\n  .cursor-ns-resize {\n    cursor: ns-resize;\n  }\n  .cursor-ns-resize {\n    cursor: ns-resize;\n  }\n  .cursor-nwse-resize {\n    cursor: nwse-resize;\n  }\n  .cursor-nwse-resize {\n    cursor: nwse-resize;\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .cursor-w-resize {\n    cursor: w-resize;\n  }\n  .\\[touch-action\\:none\\] {\n    touch-action: none;\n  }\n  .resize {\n    resize: both;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-end {\n    align-items: flex-end;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0\\.5 {\n    gap: calc(var(--spacing) * 0.5);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-1\\.5 {\n    gap: calc(var(--spacing) * 1.5);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .space-y-1\\.5 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .gap-x-0\\.5 {\n    -moz-column-gap: calc(var(--spacing) * 0.5);\n         column-gap: calc(var(--spacing) * 0.5);\n  }\n  .gap-x-1 {\n    -moz-column-gap: calc(var(--spacing) * 1);\n         column-gap: calc(var(--spacing) * 1);\n  }\n  .gap-x-1\\.5 {\n    -moz-column-gap: calc(var(--spacing) * 1.5);\n         column-gap: calc(var(--spacing) * 1.5);\n  }\n  .gap-x-2 {\n    -moz-column-gap: calc(var(--spacing) * 2);\n         column-gap: calc(var(--spacing) * 2);\n  }\n  .gap-x-3 {\n    -moz-column-gap: calc(var(--spacing) * 3);\n         column-gap: calc(var(--spacing) * 3);\n  }\n  .gap-x-4 {\n    -moz-column-gap: calc(var(--spacing) * 4);\n         column-gap: calc(var(--spacing) * 4);\n  }\n  .gap-y-0\\.5 {\n    row-gap: calc(var(--spacing) * 0.5);\n  }\n  .gap-y-1 {\n    row-gap: calc(var(--spacing) * 1);\n  }\n  .gap-y-2 {\n    row-gap: calc(var(--spacing) * 2);\n  }\n  .gap-y-4 {\n    row-gap: calc(var(--spacing) * 4);\n  }\n  .divide-y {\n    :where(& > :not(:last-child)) {\n      --tw-divide-y-reverse: 0;\n      border-bottom-style: var(--tw-border-style);\n      border-top-style: var(--tw-border-style);\n      border-top-width: calc(1px * var(--tw-divide-y-reverse));\n      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n    }\n  }\n  .divide-zinc-800 {\n    :where(& > :not(:last-child)) {\n      border-color: var(--color-zinc-800);\n    }\n  }\n  .place-self-center {\n    place-self: center;\n  }\n  .self-end {\n    align-self: flex-end;\n  }\n  .truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .\\!overflow-visible {\n    overflow: visible !important;\n  }\n  .overflow-auto {\n    overflow: auto;\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-x-auto {\n    overflow-x: auto;\n  }\n  .overflow-x-hidden {\n    overflow-x: hidden;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .rounded {\n    border-radius: 4px;\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .rounded-md {\n    border-radius: var(--radius-md);\n  }\n  .rounded-sm {\n    border-radius: var(--radius-sm);\n  }\n  .rounded-t-lg {\n    border-top-left-radius: var(--radius-lg);\n    border-top-right-radius: var(--radius-lg);\n  }\n  .rounded-t-sm {\n    border-top-left-radius: var(--radius-sm);\n    border-top-right-radius: var(--radius-sm);\n  }\n  .rounded-l-md {\n    border-top-left-radius: var(--radius-md);\n    border-bottom-left-radius: var(--radius-md);\n  }\n  .rounded-l-sm {\n    border-top-left-radius: var(--radius-sm);\n    border-bottom-left-radius: var(--radius-sm);\n  }\n  .rounded-tl-lg {\n    border-top-left-radius: var(--radius-lg);\n  }\n  .rounded-r-md {\n    border-top-right-radius: var(--radius-md);\n    border-bottom-right-radius: var(--radius-md);\n  }\n  .rounded-r-sm {\n    border-top-right-radius: var(--radius-sm);\n    border-bottom-right-radius: var(--radius-sm);\n  }\n  .rounded-tr-lg {\n    border-top-right-radius: var(--radius-lg);\n  }\n  .rounded-br-lg {\n    border-bottom-right-radius: var(--radius-lg);\n  }\n  .rounded-bl-lg {\n    border-bottom-left-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-4 {\n    border-style: var(--tw-border-style);\n    border-width: 4px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-r {\n    border-right-style: var(--tw-border-style);\n    border-right-width: 1px;\n  }\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .border-l {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 1px;\n  }\n  .border-l-0 {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 0px;\n  }\n  .border-l-1 {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 1px;\n  }\n  .border-none {\n    --tw-border-style: none;\n    border-style: none;\n  }\n  .\\!border-red-500 {\n    border-color: var(--color-red-500) !important;\n  }\n  .border-\\[\\#1e1e1e\\] {\n    border-color: #1e1e1e;\n  }\n  .border-\\[\\#222\\] {\n    border-color: #222;\n  }\n  .border-\\[\\#333\\] {\n    border-color: #333;\n  }\n  .border-\\[\\#27272A\\] {\n    border-color: #27272A;\n  }\n  .border-transparent {\n    border-color: transparent;\n  }\n  .border-zinc-800 {\n    border-color: var(--color-zinc-800);\n  }\n  .bg-\\[\\#0A0A0A\\] {\n    background-color: #0A0A0A;\n  }\n  .bg-\\[\\#1D3A66\\] {\n    background-color: #1D3A66;\n  }\n  .bg-\\[\\#1E1E1E\\] {\n    background-color: #1E1E1E;\n  }\n  .bg-\\[\\#1a2a1a\\] {\n    background-color: #1a2a1a;\n  }\n  .bg-\\[\\#1e1e1e\\] {\n    background-color: #1e1e1e;\n  }\n  .bg-\\[\\#2a1515\\] {\n    background-color: #2a1515;\n  }\n  .bg-\\[\\#4b4b4b\\] {\n    background-color: #4b4b4b;\n  }\n  .bg-\\[\\#5f3f9a\\] {\n    background-color: #5f3f9a;\n  }\n  .bg-\\[\\#5f3f9a\\]\\/40 {\n    background-color: color-mix(in oklab, #5f3f9a 40%, transparent);\n  }\n  .bg-\\[\\#6a369e\\] {\n    background-color: #6a369e;\n  }\n  .bg-\\[\\#8e61e3\\] {\n    background-color: #8e61e3;\n  }\n  .bg-\\[\\#7521c8\\] {\n    background-color: #7521c8;\n  }\n  .bg-\\[\\#18181B\\] {\n    background-color: #18181B;\n  }\n  .bg-\\[\\#18181B\\]\\/50 {\n    background-color: color-mix(in oklab, #18181B 50%, transparent);\n  }\n  .bg-\\[\\#27272A\\] {\n    background-color: #27272A;\n  }\n  .bg-\\[\\#44444a\\] {\n    background-color: #44444a;\n  }\n  .bg-\\[\\#141414\\] {\n    background-color: #141414;\n  }\n  .bg-\\[\\#214379d4\\] {\n    background-color: #214379d4;\n  }\n  .bg-\\[\\#412162\\] {\n    background-color: #412162;\n  }\n  .bg-\\[\\#EFD81A\\] {\n    background-color: #EFD81A;\n  }\n  .bg-\\[\\#b77116\\] {\n    background-color: #b77116;\n  }\n  .bg-\\[\\#b94040\\] {\n    background-color: #b94040;\n  }\n  .bg-\\[\\#d36cff\\] {\n    background-color: #d36cff;\n  }\n  .bg-\\[\\#efd81a6b\\] {\n    background-color: #efd81a6b;\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-black\\/40 {\n    background-color: color-mix(in srgb, #000 40%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);\n    }\n  }\n  .bg-green-500\\/50 {\n    background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 50%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-green-500) 50%, transparent);\n    }\n  }\n  .bg-green-500\\/60 {\n    background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 60%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-green-500) 60%, transparent);\n    }\n  }\n  .bg-neutral-700 {\n    background-color: var(--color-neutral-700);\n  }\n  .bg-purple-500 {\n    background-color: var(--color-purple-500);\n  }\n  .bg-purple-500\\/90 {\n    background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 90%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-purple-500) 90%, transparent);\n    }\n  }\n  .bg-purple-800 {\n    background-color: var(--color-purple-800);\n  }\n  .bg-red-500 {\n    background-color: var(--color-red-500);\n  }\n  .bg-red-500\\/90 {\n    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 90%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-red-500) 90%, transparent);\n    }\n  }\n  .bg-red-950\\/50 {\n    background-color: color-mix(in srgb, oklch(25.8% 0.092 26.042) 50%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-red-950) 50%, transparent);\n    }\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .bg-yellow-300 {\n    background-color: var(--color-yellow-300);\n  }\n  .bg-zinc-800 {\n    background-color: var(--color-zinc-800);\n  }\n  .bg-zinc-900\\/30 {\n    background-color: color-mix(in srgb, oklch(21% 0.006 285.885) 30%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-zinc-900) 30%, transparent);\n    }\n  }\n  .bg-zinc-900\\/50 {\n    background-color: color-mix(in srgb, oklch(21% 0.006 285.885) 50%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-zinc-900) 50%, transparent);\n    }\n  }\n  .p-0 {\n    padding: calc(var(--spacing) * 0);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-5 {\n    padding: calc(var(--spacing) * 5);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-1 {\n    padding-inline: calc(var(--spacing) * 1);\n  }\n  .px-1\\.5 {\n    padding-inline: calc(var(--spacing) * 1.5);\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n  .px-2\\.5 {\n    padding-inline: calc(var(--spacing) * 2.5);\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-0\\.5 {\n    padding-block: calc(var(--spacing) * 0.5);\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n  .py-1\\.5 {\n    padding-block: calc(var(--spacing) * 1.5);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n  .py-4 {\n    padding-block: calc(var(--spacing) * 4);\n  }\n  .py-\\[1px\\] {\n    padding-block: 1px;\n  }\n  .py-\\[3px\\] {\n    padding-block: 3px;\n  }\n  .py-\\[5px\\] {\n    padding-block: 5px;\n  }\n  .pt-0 {\n    padding-top: calc(var(--spacing) * 0);\n  }\n  .pt-2 {\n    padding-top: calc(var(--spacing) * 2);\n  }\n  .pt-5 {\n    padding-top: calc(var(--spacing) * 5);\n  }\n  .pr-1 {\n    padding-right: calc(var(--spacing) * 1);\n  }\n  .pr-1\\.5 {\n    padding-right: calc(var(--spacing) * 1.5);\n  }\n  .pr-2 {\n    padding-right: calc(var(--spacing) * 2);\n  }\n  .pr-2\\.5 {\n    padding-right: calc(var(--spacing) * 2.5);\n  }\n  .pb-2 {\n    padding-bottom: calc(var(--spacing) * 2);\n  }\n  .pl-1 {\n    padding-left: calc(var(--spacing) * 1);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-2\\.5 {\n    padding-left: calc(var(--spacing) * 2.5);\n  }\n  .pl-3 {\n    padding-left: calc(var(--spacing) * 3);\n  }\n  .pl-5 {\n    padding-left: calc(var(--spacing) * 5);\n  }\n  .pl-6 {\n    padding-left: calc(var(--spacing) * 6);\n  }\n  .text-left {\n    text-align: left;\n  }\n  .font-mono {\n    font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .text-\\[8px\\] {\n    font-size: 8px;\n  }\n  .text-\\[10px\\] {\n    font-size: 10px;\n  }\n  .text-\\[11px\\] {\n    font-size: 11px;\n  }\n  .text-\\[13px\\] {\n    font-size: 13px;\n  }\n  .text-\\[14px\\] {\n    font-size: 14px;\n  }\n  .text-\\[17px\\] {\n    font-size: 17px;\n  }\n  .leading-6 {\n    --tw-leading: calc(var(--spacing) * 6);\n    line-height: calc(var(--spacing) * 6);\n  }\n  .leading-none {\n    --tw-leading: 1;\n    line-height: 1;\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .tracking-wide {\n    --tw-tracking: var(--tracking-wide);\n    letter-spacing: var(--tracking-wide);\n  }\n  .text-wrap {\n    text-wrap: wrap;\n  }\n  .break-words {\n    overflow-wrap: break-word;\n  }\n  .break-all {\n    word-break: break-all;\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .whitespace-pre-wrap {\n    white-space: pre-wrap;\n  }\n  .text-\\[\\#4ade80\\] {\n    color: #4ade80;\n  }\n  .text-\\[\\#5a5a5a\\] {\n    color: #5a5a5a;\n  }\n  .text-\\[\\#6E6E77\\] {\n    color: #6E6E77;\n  }\n  .text-\\[\\#6F6F78\\] {\n    color: #6F6F78;\n  }\n  .text-\\[\\#8E61E3\\] {\n    color: #8E61E3;\n  }\n  .text-\\[\\#666\\] {\n    color: #666;\n  }\n  .text-\\[\\#888\\] {\n    color: #888;\n  }\n  .text-\\[\\#999\\] {\n    color: #999;\n  }\n  .text-\\[\\#7346a0\\] {\n    color: #7346a0;\n  }\n  .text-\\[\\#65656D\\] {\n    color: #65656D;\n  }\n  .text-\\[\\#737373\\] {\n    color: #737373;\n  }\n  .text-\\[\\#A1A1AA\\] {\n    color: #A1A1AA;\n  }\n  .text-\\[\\#A855F7\\] {\n    color: #A855F7;\n  }\n  .text-\\[\\#E4E4E7\\] {\n    color: #E4E4E7;\n  }\n  .text-\\[\\#d36cff\\] {\n    color: #d36cff;\n  }\n  .text-\\[\\#f87171\\] {\n    color: #f87171;\n  }\n  .text-black {\n    color: var(--color-black);\n  }\n  .text-gray-100 {\n    color: var(--color-gray-100);\n  }\n  .text-gray-300 {\n    color: var(--color-gray-300);\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-green-500 {\n    color: var(--color-green-500);\n  }\n  .text-neutral-300 {\n    color: var(--color-neutral-300);\n  }\n  .text-neutral-400 {\n    color: var(--color-neutral-400);\n  }\n  .text-neutral-500 {\n    color: var(--color-neutral-500);\n  }\n  .text-purple-400 {\n    color: var(--color-purple-400);\n  }\n  .text-red-300 {\n    color: var(--color-red-300);\n  }\n  .text-red-400 {\n    color: var(--color-red-400);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .text-white\\/30 {\n    color: color-mix(in srgb, #fff 30%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-white) 30%, transparent);\n    }\n  }\n  .text-white\\/70 {\n    color: color-mix(in srgb, #fff 70%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-white) 70%, transparent);\n    }\n  }\n  .text-yellow-300 {\n    color: var(--color-yellow-300);\n  }\n  .text-yellow-500 {\n    color: var(--color-yellow-500);\n  }\n  .text-zinc-200 {\n    color: var(--color-zinc-200);\n  }\n  .text-zinc-400 {\n    color: var(--color-zinc-400);\n  }\n  .text-zinc-500 {\n    color: var(--color-zinc-500);\n  }\n  .text-zinc-600 {\n    color: var(--color-zinc-600);\n  }\n  .uppercase {\n    text-transform: uppercase;\n  }\n  .italic {\n    font-style: italic;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .opacity-50 {\n    opacity: 50%;\n  }\n  .opacity-100 {\n    opacity: 100%;\n  }\n  .shadow-lg {\n    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring-1 {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring-white\\/\\[0\\.08\\] {\n    --tw-ring-color: color-mix(in srgb, #fff 8%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      --tw-ring-color: color-mix(in oklab, var(--color-white) 8%, transparent);\n    }\n  }\n  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .filter {\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .backdrop-blur-sm {\n    --tw-backdrop-blur: blur(var(--blur-sm));\n    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n  }\n  .transition {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-\\[border-radius\\] {\n    transition-property: border-radius;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-\\[color\\,transform\\] {\n    transition-property: color,transform;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-\\[max-height\\] {\n    transition-property: max-height;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-\\[opacity\\] {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-all {\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-transform {\n    transition-property: transform, translate, scale, rotate;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-none {\n    transition-property: none;\n  }\n  .delay-0 {\n    transition-delay: 0ms;\n  }\n  .delay-150 {\n    transition-delay: 150ms;\n  }\n  .delay-300 {\n    transition-delay: 300ms;\n  }\n  .\\!duration-0 {\n    --tw-duration: 0ms !important;\n    transition-duration: 0ms !important;\n  }\n  .duration-0 {\n    --tw-duration: 0ms;\n    transition-duration: 0ms;\n  }\n  .duration-120 {\n    --tw-duration: 120ms;\n    transition-duration: 120ms;\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .duration-300 {\n    --tw-duration: 300ms;\n    transition-duration: 300ms;\n  }\n  .ease-\\[cubic-bezier\\(0\\.25\\,0\\.1\\,0\\.25\\,1\\)\\] {\n    --tw-ease: cubic-bezier(0.25,0.1,0.25,1);\n    transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);\n  }\n  .ease-in {\n    --tw-ease: var(--ease-in);\n    transition-timing-function: var(--ease-in);\n  }\n  .ease-in-out {\n    --tw-ease: var(--ease-in-out);\n    transition-timing-function: var(--ease-in-out);\n  }\n  .ease-out {\n    --tw-ease: var(--ease-out);\n    transition-timing-function: var(--ease-out);\n  }\n  .will-change-transform {\n    will-change: transform;\n  }\n  .select-none {\n    -webkit-user-select: none;\n    -moz-user-select: none;\n         user-select: none;\n  }\n  .animation-delay-0 {\n    animation-delay: 0s;\n  }\n  .animation-delay-100 {\n    animation-delay: .1s;\n  }\n  .animation-delay-150 {\n    animation-delay: .15s;\n  }\n  .animation-delay-200 {\n    animation-delay: .2s;\n  }\n  .animation-delay-300 {\n    animation-delay: .3s;\n  }\n  .animation-delay-500 {\n    animation-delay: .5s;\n  }\n  .animation-delay-700 {\n    animation-delay: .7s;\n  }\n  .animation-delay-1000 {\n    animation-delay: 1s;\n  }\n  .animation-duration-0 {\n    animation-duration: 0s;\n  }\n  .animation-duration-100 {\n    animation-duration: .1s;\n  }\n  .animation-duration-200 {\n    animation-duration: .2s;\n  }\n  .animation-duration-300 {\n    animation-duration: .3s;\n  }\n  .animation-duration-500 {\n    animation-duration: .5s;\n  }\n  .animation-duration-700 {\n    animation-duration: .7s;\n  }\n  .animation-duration-1000 {\n    animation-duration: 1s;\n  }\n  .group-hover\\:bg-\\[\\#5b2d89\\] {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        background-color: #5b2d89;\n      }\n    }\n  }\n  .group-hover\\:bg-\\[\\#6a6a6a\\] {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        background-color: #6a6a6a;\n      }\n    }\n  }\n  .group-hover\\:bg-\\[\\#21437982\\] {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        background-color: #21437982;\n      }\n    }\n  }\n  .group-hover\\:bg-\\[\\#efda1a2f\\] {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        background-color: #efda1a2f;\n      }\n    }\n  }\n  .group-hover\\:opacity-100 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .peer-hover\\/bottom\\:rounded-b-none {\n    &:is(:where(.peer\\/bottom):hover ~ *) {\n      @media (hover: hover) {\n        border-bottom-right-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n    }\n  }\n  .peer-hover\\/left\\:rounded-l-none {\n    &:is(:where(.peer\\/left):hover ~ *) {\n      @media (hover: hover) {\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n    }\n  }\n  .peer-hover\\/right\\:rounded-r-none {\n    &:is(:where(.peer\\/right):hover ~ *) {\n      @media (hover: hover) {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n    }\n  }\n  .peer-hover\\/top\\:rounded-t-none {\n    &:is(:where(.peer\\/top):hover ~ *) {\n      @media (hover: hover) {\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n      }\n    }\n  }\n  .after\\:absolute {\n    &::after {\n      content: var(--tw-content);\n      position: absolute;\n    }\n  }\n  .after\\:inset-0 {\n    &::after {\n      content: var(--tw-content);\n      inset: calc(var(--spacing) * 0);\n    }\n  }\n  .after\\:top-\\[100\\%\\] {\n    &::after {\n      content: var(--tw-content);\n      top: 100%;\n    }\n  }\n  .after\\:left-1\\/2 {\n    &::after {\n      content: var(--tw-content);\n      left: calc(1 / 2 * 100%);\n    }\n  }\n  .after\\:h-\\[6px\\] {\n    &::after {\n      content: var(--tw-content);\n      height: 6px;\n    }\n  }\n  .after\\:w-\\[10px\\] {\n    &::after {\n      content: var(--tw-content);\n      width: 10px;\n    }\n  }\n  .after\\:-translate-x-1\\/2 {\n    &::after {\n      content: var(--tw-content);\n      --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  .after\\:animate-\\[fadeOut_1s_ease-out_forwards\\] {\n    &::after {\n      content: var(--tw-content);\n      animation: fadeOut 1s ease-out forwards;\n    }\n  }\n  .after\\:border-t-\\[6px\\] {\n    &::after {\n      content: var(--tw-content);\n      border-top-style: var(--tw-border-style);\n      border-top-width: 6px;\n    }\n  }\n  .after\\:border-r-\\[5px\\] {\n    &::after {\n      content: var(--tw-content);\n      border-right-style: var(--tw-border-style);\n      border-right-width: 5px;\n    }\n  }\n  .after\\:border-l-\\[5px\\] {\n    &::after {\n      content: var(--tw-content);\n      border-left-style: var(--tw-border-style);\n      border-left-width: 5px;\n    }\n  }\n  .after\\:border-t-white {\n    &::after {\n      content: var(--tw-content);\n      border-top-color: var(--color-white);\n    }\n  }\n  .after\\:border-r-transparent {\n    &::after {\n      content: var(--tw-content);\n      border-right-color: transparent;\n    }\n  }\n  .after\\:border-l-transparent {\n    &::after {\n      content: var(--tw-content);\n      border-left-color: transparent;\n    }\n  }\n  .after\\:bg-purple-500\\/30 {\n    &::after {\n      content: var(--tw-content);\n      background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 30%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-purple-500) 30%, transparent);\n      }\n    }\n  }\n  .after\\:content-\\[\\"\\"\\] {\n    &::after {\n      --tw-content: "";\n      content: var(--tw-content);\n    }\n  }\n  .focus-within\\:border-\\[\\#454545\\] {\n    &:focus-within {\n      border-color: #454545;\n    }\n  }\n  .hover\\:bg-\\[\\#0f0f0f\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #0f0f0f;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#5f3f9a\\]\\/20 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in oklab, #5f3f9a 20%, transparent);\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#5f3f9a\\]\\/40 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in oklab, #5f3f9a 40%, transparent);\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#18181B\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #18181B;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#34343b\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #34343b;\n      }\n    }\n  }\n  .hover\\:bg-red-600 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-red-600);\n      }\n    }\n  }\n  .hover\\:bg-zinc-700 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-zinc-700);\n      }\n    }\n  }\n  .hover\\:bg-zinc-800\\/50 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, oklch(27.4% 0.006 286.033) 50%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-zinc-800) 50%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:text-neutral-300 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-neutral-300);\n      }\n    }\n  }\n  .hover\\:text-white {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-white);\n      }\n    }\n  }\n}\n* {\n  outline: none !important;\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  &::-webkit-scrollbar {\n    width: 6px;\n    height: 6px;\n  }\n  &::-webkit-scrollbar-track {\n    border-radius: 10px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    border-radius: 10px;\n    background: rgba(255, 255, 255, 0.3);\n  }\n  &::-webkit-scrollbar-thumb:hover {\n    background: rgba(255, 255, 255, 0.4);\n  }\n  &::-webkit-scrollbar-corner {\n    background: transparent;\n  }\n}\n@-moz-document url-prefix() {\n  * {\n    scrollbar-width: thin;\n    scrollbar-color: rgba(255, 255, 255, 0.4) transparent;\n    scrollbar-width: 6px;\n  }\n}\nbutton {\n  &:hover {\n    @media (hover: hover) {\n      background-image: none;\n    }\n  }\n  --tw-outline-style: none;\n  outline-style: none;\n  --tw-border-style: none;\n  border-style: none;\n  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n  --tw-ease: var(--ease-out);\n  transition-timing-function: var(--ease-out);\n  cursor: pointer;\n}\ninput {\n  --tw-outline-style: none;\n  outline-style: none;\n  --tw-border-style: none;\n  border-style: none;\n  background-color: transparent;\n  background-image: none;\n  &::-moz-placeholder {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  &::placeholder {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  &::-moz-placeholder {\n    color: var(--color-neutral-500);\n  }\n  &::placeholder {\n    color: var(--color-neutral-500);\n  }\n  &::-moz-placeholder {\n    font-style: italic;\n  }\n  &::placeholder {\n    font-style: italic;\n  }\n  &:-moz-placeholder {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  &:placeholder-shown {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\nsvg {\n  height: auto;\n  width: auto;\n  pointer-events: none;\n}\n.with-data-text {\n  overflow: hidden;\n  &::before {\n    content: attr(data-text);\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n#react-scan-toolbar {\n  position: fixed;\n  top: calc(var(--spacing) * 0);\n  left: calc(var(--spacing) * 0);\n  display: flex;\n  flex-direction: column;\n  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n  font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;\n  font-size: 13px;\n  color: var(--color-white);\n  background-color: var(--color-black);\n  -webkit-user-select: none;\n  -moz-user-select: none;\n       user-select: none;\n  cursor: move;\n  opacity: 0%;\n  z-index: 2147483678;\n  animation: fadeIn ease-in forwards;\n  animation-delay: .3s;\n  animation-duration: .3s;\n  --tw-shadow: 0 4px 12px var(--tw-shadow-color, rgba(0,0,0,0.2));\n  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  place-self: start;\n  will-change: transform;\n  backface-visibility: hidden;\n}\n#react-scan-toolbar pre,\n#react-scan-toolbar textarea,\n#react-scan-toolbar input[type=\'text\'],\n#react-scan-toolbar input[type=\'search\'],\n#react-scan-toolbar [data-react-scan-selectable] {\n  -webkit-user-select: text;\n  -moz-user-select: text;\n       user-select: text;\n  cursor: text;\n}\n.button {\n  &:hover {\n    background: rgba(255, 255, 255, 0.1);\n  }\n  &:active {\n    background: rgba(255, 255, 255, 0.15);\n  }\n}\n.resize-line-wrapper {\n  position: absolute;\n  overflow: hidden;\n}\n.resize-line {\n  position: absolute;\n  inset: calc(var(--spacing) * 0);\n  overflow: hidden;\n  background-color: var(--color-black);\n  transition-property: all;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n  svg {\n    position: absolute;\n    top: calc(1 / 2 * 100%);\n    left: calc(1 / 2 * 100%);\n    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n}\n.resize-right,\n.resize-left {\n  inset-block: calc(var(--spacing) * 0);\n  width: calc(var(--spacing) * 6);\n  cursor: ew-resize;\n  .resize-line-wrapper {\n    inset-block: calc(var(--spacing) * 0);\n    width: calc(1 / 2 * 100%);\n  }\n  &:hover {\n    .resize-line {\n      --tw-translate-x: calc(var(--spacing) * 0);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n}\n.resize-right {\n  right: calc(var(--spacing) * 0);\n  --tw-translate-x: calc(1 / 2 * 100%);\n  translate: var(--tw-translate-x) var(--tw-translate-y);\n  .resize-line-wrapper {\n    right: calc(var(--spacing) * 0);\n  }\n  .resize-line {\n    border-top-right-radius: var(--radius-lg);\n    border-bottom-right-radius: var(--radius-lg);\n    --tw-translate-x: -100%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n}\n.resize-left {\n  left: calc(var(--spacing) * 0);\n  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n  translate: var(--tw-translate-x) var(--tw-translate-y);\n  .resize-line-wrapper {\n    left: calc(var(--spacing) * 0);\n  }\n  .resize-line {\n    border-top-left-radius: var(--radius-lg);\n    border-bottom-left-radius: var(--radius-lg);\n    --tw-translate-x: 100%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n}\n.resize-top,\n.resize-bottom {\n  inset-inline: calc(var(--spacing) * 0);\n  height: calc(var(--spacing) * 6);\n  cursor: ns-resize;\n  .resize-line-wrapper {\n    inset-inline: calc(var(--spacing) * 0);\n    height: calc(1 / 2 * 100%);\n  }\n  &:hover {\n    .resize-line {\n      --tw-translate-y: calc(var(--spacing) * 0);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n}\n.resize-top {\n  top: calc(var(--spacing) * 0);\n  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n  translate: var(--tw-translate-x) var(--tw-translate-y);\n  .resize-line-wrapper {\n    top: calc(var(--spacing) * 0);\n  }\n  .resize-line {\n    border-top-left-radius: var(--radius-lg);\n    border-top-right-radius: var(--radius-lg);\n    --tw-translate-y: 100%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n}\n.resize-bottom {\n  bottom: calc(var(--spacing) * 0);\n  --tw-translate-y: calc(1 / 2 * 100%);\n  translate: var(--tw-translate-x) var(--tw-translate-y);\n  .resize-line-wrapper {\n    bottom: calc(var(--spacing) * 0);\n  }\n  .resize-line {\n    border-bottom-right-radius: var(--radius-lg);\n    border-bottom-left-radius: var(--radius-lg);\n    --tw-translate-y: -100%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n}\n.react-scan-header {\n  display: flex;\n  align-items: center;\n  -moz-column-gap: calc(var(--spacing) * 2);\n       column-gap: calc(var(--spacing) * 2);\n  padding-right: calc(var(--spacing) * 2);\n  padding-left: calc(var(--spacing) * 3);\n  min-height: calc(var(--spacing) * 9);\n  border-bottom-style: var(--tw-border-style);\n  border-bottom-width: 1px;\n  border-color: #222;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.react-scan-replay-button,\n.react-scan-close-button {\n  display: flex;\n  align-items: center;\n  padding: calc(var(--spacing) * 1);\n  min-width: -moz-fit-content;\n  min-width: fit-content;\n  border-radius: 4px;\n  transition-property: all;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n  --tw-duration: 300ms;\n  transition-duration: 300ms;\n}\n.react-scan-replay-button {\n  position: relative;\n  overflow: hidden;\n  background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 50%, transparent) !important;\n  @supports (color: color-mix(in lab, red, red)) {\n    background-color: color-mix(in oklab, var(--color-purple-500) 50%, transparent) !important;\n  }\n  &:hover {\n    background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 25%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-purple-500) 25%, transparent);\n    }\n  }\n  &.disabled {\n    opacity: 50%;\n    pointer-events: none;\n  }\n  &:before {\n    content: "";\n    position: absolute;\n    inset: calc(var(--spacing) * 0);\n    --tw-translate-x: -100%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n    animation: shimmer 2s infinite;\n    background: linear-gradient(\n      to right,\n      transparent,\n      rgba(142, 97, 227, 0.3),\n      transparent\n    );\n  }\n}\n.react-scan-close-button {\n  background-color: color-mix(in srgb, #fff 10%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    background-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n  }\n  &:hover {\n    background-color: color-mix(in srgb, #fff 15%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-white) 15%, transparent);\n    }\n  }\n}\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}\n.react-section-header {\n  position: sticky;\n  z-index: 100;\n  display: flex;\n  align-items: center;\n  -moz-column-gap: calc(var(--spacing) * 2);\n       column-gap: calc(var(--spacing) * 2);\n  padding-inline: calc(var(--spacing) * 3);\n  height: calc(var(--spacing) * 7);\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: #888;\n  border-bottom-style: var(--tw-border-style);\n  border-bottom-width: 1px;\n  border-color: #222;\n  background-color: #0a0a0a;\n}\n.react-scan-section {\n  display: flex;\n  flex-direction: column;\n  padding-inline: calc(var(--spacing) * 2);\n  color: #888;\n  &::before {\n    content: var(--tw-content);\n    color: var(--color-gray-500);\n  }\n  &::before {\n    --tw-content: attr(data-section);\n    content: var(--tw-content);\n  }\n  font-size: var(--text-xs);\n  line-height: var(--tw-leading, var(--text-xs--line-height));\n  > .react-scan-property {\n    margin-left: calc(14px * -1);\n  }\n}\n.react-scan-property {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  padding-left: calc(var(--spacing) * 8);\n  border-left-style: var(--tw-border-style);\n  border-left-width: 1px;\n  border-color: transparent;\n  overflow: hidden;\n}\n.react-scan-property-content {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  min-height: calc(var(--spacing) * 7);\n  max-width: 100%;\n  overflow: hidden;\n}\n.react-scan-string {\n  color: #9ecbff;\n}\n.react-scan-number {\n  color: #79c7ff;\n}\n.react-scan-boolean {\n  color: #56b6c2;\n}\n.react-scan-key {\n  width: -moz-fit-content;\n  width: fit-content;\n  max-width: calc(var(--spacing) * 60);\n  white-space: nowrap;\n  color: var(--color-white);\n}\n.react-scan-input {\n  color: var(--color-white);\n  background-color: var(--color-black);\n}\n@keyframes blink {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n.react-scan-arrow {\n  position: absolute;\n  top: calc(var(--spacing) * 0);\n  left: calc(var(--spacing) * 7);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  height: calc(var(--spacing) * 7);\n  width: calc(var(--spacing) * 6);\n  --tw-translate-x: -100%;\n  translate: var(--tw-translate-x) var(--tw-translate-y);\n  z-index: 10;\n  > svg {\n    transition-property: transform, translate, scale, rotate;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n}\n.react-scan-nested {\n  position: relative;\n  overflow: hidden;\n  &:before {\n    content: "";\n    position: absolute;\n    top: calc(var(--spacing) * 0);\n    left: calc(var(--spacing) * 0);\n    height: 100%;\n    width: 1px;\n    background-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 30%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-gray-500) 30%, transparent);\n    }\n  }\n}\n.react-scan-settings {\n  position: absolute;\n  inset: calc(var(--spacing) * 0);\n  display: flex;\n  flex-direction: column;\n  gap: calc(var(--spacing) * 4);\n  padding-inline: calc(var(--spacing) * 4);\n  padding-block: calc(var(--spacing) * 2);\n  color: #888;\n  > div {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n    --tw-duration: 300ms;\n    transition-duration: 300ms;\n  }\n}\n.react-scan-preview-line {\n  position: relative;\n  display: flex;\n  min-height: calc(var(--spacing) * 7);\n  align-items: center;\n  -moz-column-gap: calc(var(--spacing) * 2);\n       column-gap: calc(var(--spacing) * 2);\n}\n.react-scan-flash-overlay {\n  position: absolute;\n  inset: calc(var(--spacing) * 0);\n  opacity: 0%;\n  z-index: 50;\n  pointer-events: none;\n  transition-property: opacity;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n  mix-blend-mode: multiply;\n  background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 90%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    background-color: color-mix(in oklab, var(--color-purple-500) 90%, transparent);\n  }\n}\n.react-scan-toggle {\n  position: relative;\n  display: inline-flex;\n  height: calc(var(--spacing) * 6);\n  width: calc(var(--spacing) * 10);\n  input {\n    position: absolute;\n    inset: calc(var(--spacing) * 0);\n    z-index: 20;\n    opacity: 0%;\n    cursor: pointer;\n    height: 100%;\n    width: 100%;\n  }\n  input:checked {\n    + div {\n      background-color: #5f3f9a;\n      &::before {\n        --tw-translate-x: 100%;\n        translate: var(--tw-translate-x) var(--tw-translate-y);\n        left: auto;\n        border-color: #5f3f9a;\n      }\n    }\n  }\n  > div {\n    position: absolute;\n    inset: calc(var(--spacing) * 1);\n    background-color: var(--color-neutral-700);\n    border-radius: calc(infinity * 1px);\n    pointer-events: none;\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n    --tw-duration: 300ms;\n    transition-duration: 300ms;\n    &:before {\n      --tw-content: \'\';\n      content: var(--tw-content);\n      position: absolute;\n      top: calc(1 / 2 * 100%);\n      left: calc(var(--spacing) * 0);\n      --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n      height: calc(var(--spacing) * 4);\n      width: calc(var(--spacing) * 4);\n      background-color: var(--color-white);\n      border-style: var(--tw-border-style);\n      border-width: 2px;\n      border-color: var(--color-neutral-700);\n      border-radius: calc(infinity * 1px);\n      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n      transition-property: all;\n      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n      transition-duration: var(--tw-duration, var(--default-transition-duration));\n      --tw-duration: 300ms;\n      transition-duration: 300ms;\n    }\n  }\n}\n.react-scan-flash-active {\n  opacity: 40%;\n  transition-property: opacity;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n  --tw-duration: 300ms;\n  transition-duration: 300ms;\n}\n.react-scan-inspector-overlay {\n  display: flex;\n  flex-direction: column;\n  opacity: 0%;\n  transition-property: opacity;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n  --tw-duration: 200ms;\n  transition-duration: 200ms;\n  --tw-ease: var(--ease-out);\n  transition-timing-function: var(--ease-out);\n  will-change: opacity;\n  &.fade-out {\n    opacity: 0%;\n  }\n  &.fade-in {\n    opacity: 100%;\n  }\n}\n.react-scan-what-changed {\n  ul {\n    list-style-type: disc;\n    padding-left: calc(var(--spacing) * 4);\n  }\n  li {\n    white-space: nowrap;\n    > div {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      -moz-column-gap: calc(var(--spacing) * 2);\n           column-gap: calc(var(--spacing) * 2);\n    }\n  }\n}\n.count-badge {\n  display: flex;\n  align-items: center;\n  -moz-column-gap: calc(var(--spacing) * 2);\n       column-gap: calc(var(--spacing) * 2);\n  padding-inline: calc(var(--spacing) * 1.5);\n  padding-block: calc(var(--spacing) * 0.5);\n  border-radius: 4px;\n  font-size: var(--text-xs);\n  line-height: var(--tw-leading, var(--text-xs--line-height));\n  --tw-font-weight: var(--font-weight-medium);\n  font-weight: var(--font-weight-medium);\n  color: #a855f7;\n  --tw-numeric-spacing: tabular-nums;\n  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);\n  background-color: color-mix(in oklab, #a855f7 10%, transparent);\n  transform-origin: center;\n  transition-property: all;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n  transition-delay: 150ms;\n  --tw-duration: 300ms;\n  transition-duration: 300ms;\n}\n.count-flash {\n  animation: countFlash .3s ease-out forwards;\n}\n.count-flash-white {\n  animation: countFlashShake .3s ease-out forwards;\n  transition-delay: 500ms !important;\n}\n.change-scope {\n  display: flex;\n  align-items: center;\n  -moz-column-gap: calc(var(--spacing) * 1);\n       column-gap: calc(var(--spacing) * 1);\n  color: #666;\n  font-size: var(--text-xs);\n  line-height: var(--tw-leading, var(--text-xs--line-height));\n  font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;\n  > div {\n    padding-inline: calc(var(--spacing) * 1.5);\n    padding-block: calc(var(--spacing) * 0.5);\n    border-radius: 4px;\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n    --tw-numeric-spacing: tabular-nums;\n    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);\n    transform-origin: center;\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n    transition-delay: 150ms;\n    --tw-duration: 300ms;\n    transition-duration: 300ms;\n    &[data-flash="true"] {\n      background-color: color-mix(in oklab, #a855f7 10%, transparent);\n      color: #a855f7;\n    }\n  }\n}\n.react-scan-slider {\n  position: relative;\n  min-height: calc(var(--spacing) * 6);\n  > input {\n    position: absolute;\n    inset: calc(var(--spacing) * 0);\n    opacity: 0%;\n  }\n  &:before {\n    --tw-content: \'\';\n    content: var(--tw-content);\n    position: absolute;\n    inset-inline: calc(var(--spacing) * 0);\n    top: calc(1 / 2 * 100%);\n    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n    height: calc(var(--spacing) * 1.5);\n    background-color: color-mix(in oklab, #8e61e3 40%, transparent);\n    border-radius: var(--radius-lg);\n    pointer-events: none;\n  }\n  &:after {\n    --tw-content: \'\';\n    content: var(--tw-content);\n    position: absolute;\n    inset-inline: calc(var(--spacing) * 0);\n    inset-block: calc(var(--spacing) * -2);\n    z-index: calc(10 * -1);\n  }\n  span {\n    position: absolute;\n    top: calc(1 / 2 * 100%);\n    left: calc(var(--spacing) * 0);\n    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n    height: calc(var(--spacing) * 2.5);\n    width: calc(var(--spacing) * 2.5);\n    border-radius: var(--radius-lg);\n    background-color: #8e61e3;\n    pointer-events: none;\n    transition-property: transform, translate, scale, rotate;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n    --tw-duration: 75ms;\n    transition-duration: 75ms;\n  }\n}\n.resize-v-line {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  max-width: calc(var(--spacing) * 1);\n  min-width: calc(var(--spacing) * 1);\n  height: 100%;\n  width: 100%;\n  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n  &:hover,\n  &:active {\n    > span {\n      background-color: #222;\n    }\n    svg {\n      opacity: 100%;\n    }\n  }\n  &::before {\n    --tw-content: "";\n    content: var(--tw-content);\n    position: absolute;\n    inset: calc(var(--spacing) * 0);\n    left: calc(1 / 2 * 100%);\n    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n    width: 1px;\n    background-color: #222;\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  > span {\n    position: absolute;\n    top: calc(1 / 2 * 100%);\n    left: calc(1 / 2 * 100%);\n    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n    height: 18px;\n    width: calc(var(--spacing) * 1.5);\n    border-radius: 4px;\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  svg {\n    position: absolute;\n    top: calc(1 / 2 * 100%);\n    left: calc(1 / 2 * 100%);\n    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n    rotate: 90deg;\n    color: var(--color-neutral-400);\n    opacity: 0%;\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n    z-index: 50;\n  }\n}\n.tree-node-search-highlight {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  span {\n    padding-block: 1px;\n    border-radius: var(--radius-sm);\n    background-color: var(--color-yellow-300);\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n    color: var(--color-black);\n  }\n  .single {\n    margin-right: 1px;\n    padding-inline: 2px;\n  }\n  .regex {\n    padding-inline: 2px;\n  }\n  .start {\n    margin-left: 1px;\n    border-top-left-radius: var(--radius-sm);\n    border-bottom-left-radius: var(--radius-sm);\n  }\n  .end {\n    margin-right: 1px;\n    border-top-right-radius: var(--radius-sm);\n    border-bottom-right-radius: var(--radius-sm);\n  }\n  .middle {\n    margin-inline: 1px;\n    border-radius: var(--radius-sm);\n  }\n}\n.react-scan-toolbar-notification {\n  position: absolute;\n  inset-inline: calc(var(--spacing) * 0);\n  display: flex;\n  align-items: center;\n  -moz-column-gap: calc(var(--spacing) * 2);\n       column-gap: calc(var(--spacing) * 2);\n  padding: calc(var(--spacing) * 1);\n  padding-left: calc(var(--spacing) * 2);\n  font-size: 10px;\n  color: var(--color-neutral-300);\n  background-color: color-mix(in srgb, #000 90%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    background-color: color-mix(in oklab, var(--color-black) 90%, transparent);\n  }\n  transition-property: transform, translate, scale, rotate;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n  &:before {\n    --tw-content: \'\';\n    content: var(--tw-content);\n    position: absolute;\n    inset-inline: calc(var(--spacing) * 0);\n    background-color: var(--color-black);\n    height: calc(var(--spacing) * 2);\n  }\n  &.position-top {\n    top: 100%;\n    --tw-translate-y: -100%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n    border-bottom-right-radius: var(--radius-lg);\n    border-bottom-left-radius: var(--radius-lg);\n    &::before {\n      top: calc(var(--spacing) * 0);\n      --tw-translate-y: -100%;\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  &.position-bottom {\n    bottom: 100%;\n    --tw-translate-y: 100%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n    border-top-left-radius: var(--radius-lg);\n    border-top-right-radius: var(--radius-lg);\n    &::before {\n      bottom: calc(var(--spacing) * 0);\n      --tw-translate-y: 100%;\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  &.is-open {\n    --tw-translate-y: calc(var(--spacing) * 0);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n}\n.react-scan-header-item {\n  position: absolute;\n  inset: calc(var(--spacing) * 0);\n  --tw-translate-y: calc(200% * -1);\n  translate: var(--tw-translate-x) var(--tw-translate-y);\n  transition-property: transform, translate, scale, rotate;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n  --tw-duration: 300ms;\n  transition-duration: 300ms;\n  &.is-visible {\n    --tw-translate-y: calc(var(--spacing) * 0);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n}\n.react-scan-components-tree:has(.resize-v-line:hover, .resize-v-line:active)\n  .tree {\n  overflow: hidden;\n}\n.react-scan-expandable {\n  display: grid;\n  grid-template-rows: 0fr;\n  overflow: hidden;\n  transition-property: all;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n  --tw-duration: 75ms;\n  transition-duration: 75ms;\n  transition-timing-function: ease-out;\n  > * {\n    min-height: 0;\n  }\n  &.react-scan-expanded {\n    grid-template-rows: 1fr;\n    transition-duration: 100ms;\n  }\n}\n@property --tw-translate-x {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-scale-x {\n  syntax: "*";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-y {\n  syntax: "*";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-z {\n  syntax: "*";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-rotate-x {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-divide-y-reverse {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: "*";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-leading {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-font-weight {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-tracking {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: "<length>";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: "*";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: "*";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-blur {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-brightness {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-contrast {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-grayscale {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-hue-rotate {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-invert {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-opacity {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-saturate {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-sepia {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-drop-shadow {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-drop-shadow-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-drop-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-drop-shadow-size {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-backdrop-blur {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-backdrop-brightness {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-backdrop-contrast {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-backdrop-grayscale {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-backdrop-hue-rotate {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-backdrop-invert {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-backdrop-opacity {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-backdrop-saturate {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-backdrop-sepia {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-duration {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-ease {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-content {\n  syntax: "*";\n  initial-value: "";\n  inherits: false;\n}\n@property --tw-ordinal {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-slashed-zero {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-numeric-figure {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-numeric-spacing {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-numeric-fraction {\n  syntax: "*";\n  inherits: false;\n}\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes fadeOut {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n@keyframes countFlash {\n  0% {\n    background-color: rgba(168, 85, 247, 0.3);\n    transform: scale(1.05);\n  }\n  100% {\n    background-color: rgba(168, 85, 247, 0.1);\n    transform: scale(1);\n  }\n}\n@keyframes countFlashShake {\n  0% {\n    transform: translateX(0);\n  }\n  25% {\n    transform: translateX(-5px);\n  }\n  50% {\n    transform: translateX(5px) scale(1.1);\n  }\n  75% {\n    transform: translateX(-5px);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-scale-z: 1;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-divide-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-tracking: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-outline-style: solid;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n      --tw-backdrop-blur: initial;\n      --tw-backdrop-brightness: initial;\n      --tw-backdrop-contrast: initial;\n      --tw-backdrop-grayscale: initial;\n      --tw-backdrop-hue-rotate: initial;\n      --tw-backdrop-invert: initial;\n      --tw-backdrop-opacity: initial;\n      --tw-backdrop-saturate: initial;\n      --tw-backdrop-sepia: initial;\n      --tw-duration: initial;\n      --tw-ease: initial;\n      --tw-content: "";\n      --tw-ordinal: initial;\n      --tw-slashed-zero: initial;\n      --tw-numeric-figure: initial;\n      --tw-numeric-spacing: initial;\n      --tw-numeric-fraction: initial;\n    }\n  }\n}\n',Pu.appendChild(e),document.documentElement.appendChild(Lu),{rootContainer:Lu,shadowRoot:Pu}})();(e=>{const t=document.createElement("div");t.id="react-scan-toolbar-root",window.__REACT_SCAN_TOOLBAR_CONTAINER__=t,e.appendChild(t),Oe(Rn(Fu,{children:Rn(me,{children:[Rn($u,{}),Rn(Au,{})]})}),t);const n=t.remove.bind(t);t.remove=()=>{window.__REACT_SCAN_TOOLBAR_CONTAINER__=void 0,t.hasChildNodes()&&(Oe(null,t),Oe(null,t)),n()}})(i)},Xu=()=>{try{return(e=>{if(Id=document.createElement("canvas"),!(Wd=Id.getContext("2d",{alpha:!0})))return null;const t=window.devicePixelRatio||1,{innerWidth:n,innerHeight:r}=window;Id.style.width=`${n}px`,Id.style.height=`${r}px`,Id.width=n*t,Id.height=r*t,Id.style.position="fixed",Id.style.left="0",Id.style.top="0",Id.style.pointerEvents="none",Id.style.zIndex="2147483600",Wd.scale(t,t),e.appendChild(Id),Gd&&window.removeEventListener("resize",Gd);const o=()=>{if(!Id||!Wd)return;const e=window.devicePixelRatio||1,{innerWidth:t,innerHeight:n}=window;Id.style.width=`${t}px`,Id.style.height=`${n}px`,Id.width=t*e,Id.height=n*e,Wd.scale(e,e),qd()};return Gd=o,window.addEventListener("resize",o),Ud.subscribe(()=>{requestAnimationFrame(()=>{qd()})}),Jd})(document.documentElement)}catch(e){"verbose"===Wu.options.value._debug&&console.error("[React Scan Internal Error]","Failed to create notifications outline canvas",e)}},Ku=(e={})=>{Bu(e);(!Iu.isInIframe.value||Wu.options.value.allowInIframe||Wu.runInAllEnvironments)&&(!1===e.enabled&&!0!==e.showToolbar||Ju())},Zu=new WeakSet;ie&&(Ku(),window.reactScan=Ku)
+!function(e){"use strict";var t=Object.defineProperty,n=(e,n,r)=>((e,n,r)=>n in e?t(e,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[n]=r)(e,"symbol"!=typeof n?n+"":n,r);Array.prototype.toSorted||Object.defineProperty(Array.prototype,"toSorted",{value:function(e){return[...this].sort(e)},writable:!0,configurable:!0});var r,o="bippy-0.5.39",i=Object.defineProperty,a=Object.prototype.hasOwnProperty,s=()=>{},l=e=>{try{Function.prototype.toString.call(e).indexOf("^_^")>-1&&setTimeout(()=>{throw Error("React is running in production mode, but dead code elimination has not been applied. Read how to correctly configure React for production: https://reactjs.org/link/perf-use-production-build")})}catch{}},c=(e=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__)=>!(!e||!("getFiberRoots"in e)),d=!1,u=(e=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__)=>!!d||(e&&"function"==typeof e.inject&&(r=e.inject.toString()),!!(null==r?void 0:r.includes("(injected)"))),p=new Set,h=new Set,m=e=>{let t=new Map,n=0,r={_instrumentationIsActive:!1,_instrumentationSource:o,checkDCE:l,hasUnsupportedRendererAttached:!1,inject(e){let o=++n;return t.set(o,e),h.add(e),r._instrumentationIsActive||(r._instrumentationIsActive=!0,p.forEach(e=>e())),o},on:s,onCommitFiberRoot:s,onCommitFiberUnmount:s,onPostCommitFiberRoot:s,renderers:t,supportsFiber:!0,supportsFlight:!0};try{i(globalThis,"__REACT_DEVTOOLS_GLOBAL_HOOK__",{configurable:!0,enumerable:!0,get:()=>r,set(t){if(t&&"object"==typeof t){let n=r.renderers;r=t,n.size>0&&(n.forEach((e,n)=>{h.add(e),t.renderers.set(n,e)}),f(e))}}});let t=window.hasOwnProperty,n=!1;i(window,"hasOwnProperty",{configurable:!0,value:function(...e){try{if(!n&&"__REACT_DEVTOOLS_GLOBAL_HOOK__"===e[0])return globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__=void 0,n=!0,-0}catch{}return t.apply(this,e)},writable:!0})}catch{f(e)}return r},f=e=>{e&&p.add(e);try{let t=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!t)return;if(!t._instrumentationSource){t.checkDCE=l,t.supportsFiber=!0,t.supportsFlight=!0,t.hasUnsupportedRendererAttached=!1,t._instrumentationSource=o,t._instrumentationIsActive=!1;let e=c(t);if(e||(t.on=s),t.renderers.size)return t._instrumentationIsActive=!0,void p.forEach(e=>e());let n=t.inject,r=u(t);r&&!e&&(d=!0,t.inject({scheduleRefresh(){}})&&(t._instrumentationIsActive=!0)),t.inject=e=>{let o=n(e);return h.add(e),r&&t.renderers.set(o,e),t._instrumentationIsActive=!0,p.forEach(e=>e()),o}}(t.renderers.size||t._instrumentationIsActive||u())&&(null==e||e())}catch{}},g=e=>a.call(globalThis,"__REACT_DEVTOOLS_GLOBAL_HOOK__")?(f(e),globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__):m(e);(()=>{try{typeof window<"u"&&((null==(e=window.document)?void 0:e.createElement)||"ReactNative"===(null==(t=window.navigator)?void 0:t.product))&&g()}catch{}var e,t})();var v=e=>{switch(e.tag){case 5:case 26:case 27:return!0;default:return"string"==typeof e.type}},w=e=>{switch(e.tag){case 1:case 11:case 0:case 14:case 15:return!0;default:return!1}},b=e=>{var t,n,r;let o=e.memoizedProps,i=(null==(t=e.alternate)?void 0:t.memoizedProps)||{},a=null!=(r=null!=(n=e.flags)?n:e.effectTag)?r:0;switch(e.tag){case 1:case 9:case 11:case 0:case 14:case 15:return!(1&~a);default:return!e.alternate||(i!==o||e.alternate.memoizedState!==e.memoizedState||e.alternate.ref!==e.ref)}},x=e=>!!(13374&e.flags||13374&e.subtreeFlags),y=e=>{switch(e.tag){case 18:case 7:case 6:case 23:case 22:return!0;case 3:return!1;default:{let t="object"==typeof e.type&&null!==e.type?e.type.$$typeof:e.type;switch("symbol"==typeof t?t.toString():t){case 60111:case"Symbol(react.concurrent_mode)":case"Symbol(react.async_mode)":return!0;default:return!1}}}};function k(e,t,n=!1){if(!e)return null;let r=t(e);if(r instanceof Promise)return(async()=>{if(!0===await r)return e;let o=n?e.return:e.child;for(;o;){let e=await B(o,t,n);if(e)return e;o=n?null:o.sibling}return null})();if(!0===r)return e;let o=n?e.return:e.child;for(;o;){let e=H(o,t,n);if(e)return e;o=n?null:o.sibling}return null}var _,N,S,C,T,E,z,A,M,$,F,R,O,D,j,L,P,I,W,U,H=(e,t,n=!1)=>{if(!e)return null;if(!0===t(e))return e;let r=n?e.return:e.child;for(;r;){let e=H(r,t,n);if(e)return e;r=n?null:r.sibling}return null},B=async(e,t,n=!1)=>{if(!e)return null;if(!0===await t(e))return e;let r=n?e.return:e.child;for(;r;){let e=await B(r,t,n);if(e)return e;r=n?null:r.sibling}return null},V=e=>{var t,n,r;let o=null!=(t=null==e?void 0:e.actualDuration)?t:0,i=o,a=null!=(n=null==e?void 0:e.child)?n:null;for(;o>0&&null!=a;)i-=null!=(r=a.actualDuration)?r:0,a=a.sibling;return{selfTime:i,totalTime:o}},q=e=>{var t;return!!(null==(t=e.updateQueue)?void 0:t.memoCache)},G=e=>{let t=e;return"function"==typeof t?t:"object"==typeof t&&t?G(t.type||t.render):null},J=e=>{let t=e;if("string"==typeof t)return t;if("function"!=typeof t&&("object"!=typeof t||!t))return null;let n=t.displayName||t.name||null;if(n)return n;let r=G(t);return r&&(r.displayName||r.name)||null},Y=e=>{try{if("string"==typeof e.version&&e.bundleType>0)return"development"}catch{}return"production"},X=0,K=new WeakMap,Z=e=>{let t=K.get(e);return!t&&e.alternate&&(t=K.get(e.alternate)),t||(t=X++,((e,t=X++)=>{K.set(e,t)})(e,t)),t},Q=(e,t,n)=>{let r=t;for(;null!=r;){if(K.has(r)||Z(r),!y(r)&&b(r)&&e(r,"mount"),13===r.tag)if(null!==r.memoizedState){let t=r.child,n=t?t.sibling:null;if(n){let t=n.child;null!==t&&Q(e,t,!1)}}else{let t=null;null!==r.child&&(t=r.child.child),null!==t&&Q(e,t,!1)}else null!=r.child&&Q(e,r.child,!0);r=n?r.sibling:null}},ee=(e,t,n,r)=>{var o,i,a,s,l,c;if(K.has(t)||Z(t),!n)return;K.has(n)||Z(n);let d=13===t.tag;!y(t)&&b(t)&&e(t,"update");let u=d&&null!==n.memoizedState,p=d&&null!==t.memoizedState;if(u&&p){let r=null!=(i=null==(o=t.child)?void 0:o.sibling)?i:null,l=null!=(s=null==(a=n.child)?void 0:a.sibling)?s:null;null!==r&&null!==l&&ee(e,r,l)}else if(u&&!p){let n=t.child;null!==n&&Q(e,n,!0)}else if(!u&&p){ne(e,n);let r=null!=(c=null==(l=t.child)?void 0:l.sibling)?c:null;null!==r&&Q(e,r,!0)}else if(t.child!==n.child){let n=t.child;for(;n;){if(n.alternate){let t=n.alternate;ee(e,n,t)}else Q(e,n,!1);n=n.sibling}}},te=(e,t)=>{(3===t.tag||!y(t))&&e(t,"unmount")},ne=(e,t)=>{var n,r,o,i;let a=13===t.tag&&null!==t.memoizedState,s=t.child;for(a&&(s=null!=(i=null==(o=null!=(r=null==(n=t.child)?void 0:n.sibling)?r:null)?void 0:o.child)?i:null);null!==s;)null!==s.return&&(te(e,s),ne(e,s)),s=s.sibling},re=0,oe=new WeakMap,ie="undefined"!=typeof window,ae={},se=[],le=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,ce=Array.isArray;function de(e,t){for(var n in t)e[n]=t[n];return e}function ue(e){e&&e.parentNode&&e.parentNode.removeChild(e)}function pe(e,t,n){var r,o,i,a={};for(i in t)"key"==i?r=t[i]:"ref"==i?o=t[i]:a[i]=t[i];if(arguments.length>2&&(a.children=arguments.length>3?_.call(arguments,2):n),"function"==typeof e&&null!=e.defaultProps)for(i in e.defaultProps)void 0===a[i]&&(a[i]=e.defaultProps[i]);return he(e,a,r,o,null)}function he(e,t,n,r,o){var i={type:e,props:t,key:n,ref:r,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:null==o?++S:o,__i:-1,__u:0};return null==o&&null!=N.vnode&&N.vnode(i),i}function me(e){return e.children}function fe(e,t){this.props=e,this.context=t}function ge(e,t){if(null==t)return e.__?ge(e.__,e.__i+1):null;for(var n;t<e.__k.length;t++)if(null!=(n=e.__k[t])&&null!=n.__e)return n.__e;return"function"==typeof e.type?ge(e):null}function ve(e){if(e.__P&&e.__d){var t=e.__v,n=t.__e,r=[],o=[],i=de({},t);i.__v=t.__v+1,N.vnode&&N.vnode(i),Ee(e.__P,i,t,e.__n,e.__P.namespaceURI,32&t.__u?[n]:null,r,null==n?ge(t):n,!!(32&t.__u),o),i.__v=t.__v,i.__.__k[i.__i]=i,Ae(r,i,o),t.__e=t.__=null,i.__e!=n&&we(i)}}function we(e){if(null!=(e=e.__)&&null!=e.__c)return e.__e=e.__c.base=null,e.__k.some(function(t){if(null!=t&&null!=t.__e)return e.__e=e.__c.base=t.__e}),we(e)}function be(e){(!e.__d&&(e.__d=!0)&&T.push(e)&&!xe.__r++||E!=N.debounceRendering)&&((E=N.debounceRendering)||z)(xe)}function xe(){try{for(var e,t=1;T.length;)T.length>t&&T.sort(A),e=T.shift(),t=T.length,ve(e)}finally{T.length=xe.__r=0}}function ye(e,t,n,r,o,i,a,s,l,c,d){var u,p,h,m,f,g,v,w=r&&r.__k||se,b=t.length;for(l=function(e,t,n,r,o){var i,a,s,l,c,d=n.length,u=d,p=0;for(e.__k=new Array(o),i=0;i<o;i++)null!=(a=t[i])&&"boolean"!=typeof a&&"function"!=typeof a?("string"==typeof a||"number"==typeof a||"bigint"==typeof a||a.constructor==String?a=e.__k[i]=he(null,a,null,null,null):ce(a)?a=e.__k[i]=he(me,{children:a},null,null,null):void 0===a.constructor&&a.__b>0?a=e.__k[i]=he(a.type,a.props,a.key,a.ref?a.ref:null,a.__v):e.__k[i]=a,l=i+p,a.__=e,a.__b=e.__b+1,s=null,-1!=(c=a.__i=Ne(a,n,l,u))&&(u--,(s=n[c])&&(s.__u|=2)),null==s||null==s.__v?(-1==c&&(o>d?p--:o<d&&p++),"function"!=typeof a.type&&(a.__u|=4)):c!=l&&(c==l-1?p--:c==l+1?p++:(c>l?p--:p++,a.__u|=4))):e.__k[i]=null;if(u)for(i=0;i<d;i++)null!=(s=n[i])&&!(2&s.__u)&&(s.__e==r&&(r=ge(s)),Fe(s,s));return r}(n,t,w,l,b),u=0;u<b;u++)null!=(h=n.__k[u])&&(p=-1!=h.__i&&w[h.__i]||ae,h.__i=u,g=Ee(e,h,p,o,i,a,s,l,c,d),m=h.__e,h.ref&&p.ref!=h.ref&&(p.ref&&$e(p.ref,null,h),d.push(h.ref,h.__c||m,h)),null==f&&null!=m&&(f=m),(v=!!(4&h.__u))||p.__k===h.__k?(l=ke(h,l,e,v),v&&p.__e&&(p.__e=null)):"function"==typeof h.type&&void 0!==g?l=g:m&&(l=m.nextSibling),h.__u&=-7);return n.__e=f,l}function ke(e,t,n,r){var o,i;if("function"==typeof e.type){for(o=e.__k,i=0;o&&i<o.length;i++)o[i]&&(o[i].__=e,t=ke(o[i],t,n,r));return t}e.__e!=t&&(r&&(t&&e.type&&!t.parentNode&&(t=ge(e)),n.insertBefore(e.__e,t||null)),t=e.__e);do{t=t&&t.nextSibling}while(null!=t&&8==t.nodeType);return t}function _e(e,t){return t=t||[],null==e||"boolean"==typeof e||(ce(e)?e.some(function(e){_e(e,t)}):t.push(e)),t}function Ne(e,t,n,r){var o,i,a,s=e.key,l=e.type,c=t[n],d=null!=c&&!(2&c.__u);if(null===c&&null==s||d&&s==c.key&&l==c.type)return n;if(r>(d?1:0))for(o=n-1,i=n+1;o>=0||i<t.length;)if(null!=(c=t[a=o>=0?o--:i++])&&!(2&c.__u)&&s==c.key&&l==c.type)return a;return-1}function Se(e,t,n){"-"==t[0]?e.setProperty(t,null==n?"":n):e[t]=null==n?"":"number"!=typeof n||le.test(t)?n:n+"px"}function Ce(e,t,n,r,o){var i,a;e:if("style"==t)if("string"==typeof n)e.style.cssText=n;else{if("string"==typeof r&&(e.style.cssText=r=""),r)for(t in r)n&&t in n||Se(e.style,t,"");if(n)for(t in n)r&&n[t]==r[t]||Se(e.style,t,n[t])}else if("o"==t[0]&&"n"==t[1])i=t!=(t=t.replace(R,"$1")),a=t.toLowerCase(),t=a in e||"onFocusOut"==t||"onFocusIn"==t?a.slice(2):t.slice(2),e.l||(e.l={}),e.l[t+i]=n,n?r?n[F]=r[F]:(n[F]=O,e.addEventListener(t,i?j:D,i)):e.removeEventListener(t,i?j:D,i);else{if("http://www.w3.org/2000/svg"==o)t=t.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if("width"!=t&&"height"!=t&&"href"!=t&&"list"!=t&&"form"!=t&&"tabIndex"!=t&&"download"!=t&&"rowSpan"!=t&&"colSpan"!=t&&"role"!=t&&"popover"!=t&&t in e)try{e[t]=null==n?"":n;break e}catch(e){}"function"==typeof n||(null==n||!1===n&&"-"!=t[4]?e.removeAttribute(t):e.setAttribute(t,"popover"==t&&1==n?"":n))}}function Te(e){return function(t){if(this.l){var n=this.l[t.type+e];if(null==t[$])t[$]=O++;else if(t[$]<n[F])return;return n(N.event?N.event(t):t)}}}function Ee(e,t,n,r,o,i,a,s,l,c){var d,u,p,h,m,f,g,v,w,b,x,y,k,S,C,T=t.type;if(void 0!==t.constructor)return null;128&n.__u&&(l=!!(32&n.__u),i=[s=t.__e=n.__e]),(d=N.__b)&&d(t);e:if("function"==typeof T)try{if(v=t.props,w=T.prototype&&T.prototype.render,b=(d=T.contextType)&&r[d.__c],x=d?b?b.props.value:d.__:r,n.__c?g=(u=t.__c=n.__c).__=u.__E:(w?t.__c=u=new T(v,x):(t.__c=u=new fe(v,x),u.constructor=T,u.render=Re),b&&b.sub(u),u.state||(u.state={}),u.__n=r,p=u.__d=!0,u.__h=[],u._sb=[]),w&&null==u.__s&&(u.__s=u.state),w&&null!=T.getDerivedStateFromProps&&(u.__s==u.state&&(u.__s=de({},u.__s)),de(u.__s,T.getDerivedStateFromProps(v,u.__s))),h=u.props,m=u.state,u.__v=t,p)w&&null==T.getDerivedStateFromProps&&null!=u.componentWillMount&&u.componentWillMount(),w&&null!=u.componentDidMount&&u.__h.push(u.componentDidMount);else{if(w&&null==T.getDerivedStateFromProps&&v!==h&&null!=u.componentWillReceiveProps&&u.componentWillReceiveProps(v,x),t.__v==n.__v||!u.__e&&null!=u.shouldComponentUpdate&&!1===u.shouldComponentUpdate(v,u.__s,x)){t.__v!=n.__v&&(u.props=v,u.state=u.__s,u.__d=!1),t.__e=n.__e,t.__k=n.__k,t.__k.some(function(e){e&&(e.__=t)}),se.push.apply(u.__h,u._sb),u._sb=[],u.__h.length&&a.push(u);break e}null!=u.componentWillUpdate&&u.componentWillUpdate(v,u.__s,x),w&&null!=u.componentDidUpdate&&u.__h.push(function(){u.componentDidUpdate(h,m,f)})}if(u.context=x,u.props=v,u.__P=e,u.__e=!1,y=N.__r,k=0,w)u.state=u.__s,u.__d=!1,y&&y(t),d=u.render(u.props,u.state,u.context),se.push.apply(u.__h,u._sb),u._sb=[];else do{u.__d=!1,y&&y(t),d=u.render(u.props,u.state,u.context),u.state=u.__s}while(u.__d&&++k<25);u.state=u.__s,null!=u.getChildContext&&(r=de(de({},r),u.getChildContext())),w&&!p&&null!=u.getSnapshotBeforeUpdate&&(f=u.getSnapshotBeforeUpdate(h,m)),S=null!=d&&d.type===me&&null==d.key?Me(d.props.children):d,s=ye(e,ce(S)?S:[S],t,n,r,o,i,a,s,l,c),u.base=t.__e,t.__u&=-161,u.__h.length&&a.push(u),g&&(u.__E=u.__=null)}catch(e){if(t.__v=null,l||null!=i)if(e.then){for(t.__u|=l?160:128;s&&8==s.nodeType&&s.nextSibling;)s=s.nextSibling;i[i.indexOf(s)]=null,t.__e=s}else{for(C=i.length;C--;)ue(i[C]);ze(t)}else t.__e=n.__e,t.__k=n.__k,e.then||ze(t);N.__e(e,t,n)}else null==i&&t.__v==n.__v?(t.__k=n.__k,t.__e=n.__e):s=t.__e=function(e,t,n,r,o,i,a,s,l){var c,d,u,p,h,m,f,g=n.props||ae,v=t.props,w=t.type;if("svg"==w?o="http://www.w3.org/2000/svg":"math"==w?o="http://www.w3.org/1998/Math/MathML":o||(o="http://www.w3.org/1999/xhtml"),null!=i)for(c=0;c<i.length;c++)if((h=i[c])&&"setAttribute"in h==!!w&&(w?h.localName==w:3==h.nodeType)){e=h,i[c]=null;break}if(null==e){if(null==w)return document.createTextNode(v);e=document.createElementNS(o,w,v.is&&v),s&&(N.__m&&N.__m(t,i),s=!1),i=null}if(null==w)g===v||s&&e.data==v||(e.data=v);else{if(i=i&&_.call(e.childNodes),!s&&null!=i)for(g={},c=0;c<e.attributes.length;c++)g[(h=e.attributes[c]).name]=h.value;for(c in g)h=g[c],"dangerouslySetInnerHTML"==c?u=h:"children"==c||c in v||"value"==c&&"defaultValue"in v||"checked"==c&&"defaultChecked"in v||Ce(e,c,null,h,o);for(c in v)h=v[c],"children"==c?p=h:"dangerouslySetInnerHTML"==c?d=h:"value"==c?m=h:"checked"==c?f=h:s&&"function"!=typeof h||g[c]===h||Ce(e,c,h,g[c],o);if(d)s||u&&(d.__html==u.__html||d.__html==e.innerHTML)||(e.innerHTML=d.__html),t.__k=[];else if(u&&(e.innerHTML=""),ye("template"==t.type?e.content:e,ce(p)?p:[p],t,n,r,"foreignObject"==w?"http://www.w3.org/1999/xhtml":o,i,a,i?i[0]:n.__k&&ge(n,0),s,l),null!=i)for(c=i.length;c--;)ue(i[c]);s||(c="value","progress"==w&&null==m?e.removeAttribute("value"):null!=m&&(m!==e[c]||"progress"==w&&!m||"option"==w&&m!=g[c])&&Ce(e,c,m,g[c],o),c="checked",null!=f&&f!=e[c]&&Ce(e,c,f,g[c],o))}return e}(n.__e,t,n,r,o,i,a,l,c);return(d=N.diffed)&&d(t),128&t.__u?void 0:s}function ze(e){e&&(e.__c&&(e.__c.__e=!0),e.__k&&e.__k.some(ze))}function Ae(e,t,n){for(var r=0;r<n.length;r++)$e(n[r],n[++r],n[++r]);N.__c&&N.__c(t,e),e.some(function(t){try{e=t.__h,t.__h=[],e.some(function(e){e.call(t)})}catch(e){N.__e(e,t.__v)}})}function Me(e){return"object"!=typeof e||null==e||e.__b>0?e:ce(e)?e.map(Me):de({},e)}function $e(e,t,n){try{if("function"==typeof e){var r="function"==typeof e.__u;r&&e.__u(),r&&null==t||(e.__u=e(t))}else e.current=t}catch(e){N.__e(e,n)}}function Fe(e,t,n){var r,o;if(N.unmount&&N.unmount(e),(r=e.ref)&&(r.current&&r.current!=e.__e||$e(r,null,t)),null!=(r=e.__c)){if(r.componentWillUnmount)try{r.componentWillUnmount()}catch(e){N.__e(e,t)}r.base=r.__P=null}if(r=e.__k)for(o=0;o<r.length;o++)r[o]&&Fe(r[o],t,n||"function"!=typeof e.type);n||ue(e.__e),e.__c=e.__=e.__e=void 0}function Re(e,t,n){return this.constructor(e,n)}function Oe(e,t,n){var r,o,i;t==document&&(t=document.documentElement),N.__&&N.__(e,t),r=!1?null:t.__k,o=[],i=[],Ee(t,e=t.__k=pe(me,null,[e]),r||ae,ae,t.namespaceURI,r?null:t.firstChild?_.call(t.childNodes):null,o,r?r.__e:t.firstChild,false,i),Ae(o,e,i)}function De(e){function t(e){var n,r;return this.getChildContext||(n=new Set,(r={})[t.__c]=this,this.getChildContext=function(){return r},this.componentWillUnmount=function(){n=null},this.shouldComponentUpdate=function(e){this.props.value!=e.value&&n.forEach(function(e){e.__e=!0,be(e)})},this.sub=function(e){n.add(e);var t=e.componentWillUnmount;e.componentWillUnmount=function(){n&&n.delete(e),t&&t.call(e)}}),e.children}return t.__c="__cC"+L++,t.__=e,t.Provider=t.__l=(t.Consumer=function(e,t){return e.children(t)}).contextType=t,t}_=se.slice,N={__e:function(e,t,n,r){for(var o,i,a;t=t.__;)if((o=t.__c)&&!o.__)try{if((i=o.constructor)&&null!=i.getDerivedStateFromError&&(o.setState(i.getDerivedStateFromError(e)),a=o.__d),null!=o.componentDidCatch&&(o.componentDidCatch(e,r||{}),a=o.__d),a)return o.__E=o}catch(t){e=t}throw e}},S=0,C=function(e){return null!=e&&void 0===e.constructor},fe.prototype.setState=function(e,t){var n;n=null!=this.__s&&this.__s!=this.state?this.__s:this.__s=de({},this.state),"function"==typeof e&&(e=e(de({},n),this.props)),e&&de(n,e),null!=e&&this.__v&&(t&&this._sb.push(t),be(this))},fe.prototype.forceUpdate=function(e){this.__v&&(this.__e=!0,e&&this.__h.push(e),be(this))},fe.prototype.render=me,T=[],z="function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout,A=function(e,t){return e.__v.__b-t.__v.__b},xe.__r=0,M=Math.random().toString(8),$="__d"+M,F="__a"+M,R=/(PointerCapture)$|Capture$/i,O=0,D=Te(!1),j=Te(!0),L=0;var je=0,Le=[],Pe=N,Ie=Pe.__b,We=Pe.__r,Ue=Pe.diffed,He=Pe.__c,Be=Pe.unmount,Ve=Pe.__;function qe(e,t){Pe.__h&&Pe.__h(I,e,je||t),je=0;var n=I.__H||(I.__H={__:[],__h:[]});return e>=n.__.length&&n.__.push({}),n.__[e]}function Ge(e){return je=1,function(e,t){var n=qe(P++,2);if(n.t=e,!n.__c&&(n.__=[at(void 0,t),function(e){var t=n.__N?n.__N[0]:n.__[0],r=n.t(t,e);t!==r&&(n.__N=[r,n.__[1]],n.__c.setState({}))}],n.__c=I,!I.__f)){var r=function(e,t,r){if(!n.__c.__H)return!0;var i=n.__c.__H.__.filter(function(e){return e.__c});if(i.every(function(e){return!e.__N}))return!o||o.call(this,e,t,r);var a=n.__c.props!==e;return i.some(function(e){if(e.__N){var t=e.__[0];e.__=e.__N,e.__N=void 0,t!==e.__[0]&&(a=!0)}}),o&&o.call(this,e,t,r)||a};I.__f=!0;var o=I.shouldComponentUpdate,i=I.componentWillUpdate;I.componentWillUpdate=function(e,t,n){if(this.__e){var a=o;o=void 0,r(e,t,n),o=a}i&&i.call(this,e,t,n)},I.shouldComponentUpdate=r}return n.__N||n.__}(at,e)}function Je(e,t){var n=qe(P++,3);!Pe.__s&&it(n.__H,t)&&(n.__=e,n.u=t,I.__H.__h.push(n))}function Ye(e,t){var n=qe(P++,4);!Pe.__s&&it(n.__H,t)&&(n.__=e,n.u=t,I.__h.push(n))}function Xe(e){return je=5,Ke(function(){return{current:e}},[])}function Ke(e,t){var n=qe(P++,7);return it(n.__H,t)&&(n.__=e(),n.__H=t,n.__h=e),n.__}function Ze(e,t){return je=8,Ke(function(){return e},t)}function Qe(e){var t=I.context[e.__c],n=qe(P++,9);return n.c=e,t?(null==n.__&&(n.__=!0,t.sub(I)),t.props.value):e.__}function et(){for(var e;e=Le.shift();){var t=e.__H;if(e.__P&&t)try{t.__h.some(rt),t.__h.some(ot),t.__h=[]}catch(n){t.__h=[],Pe.__e(n,e.__v)}}}Pe.__b=function(e){I=null,Ie&&Ie(e)},Pe.__=function(e,t){e&&t.__k&&t.__k.__m&&(e.__m=t.__k.__m),Ve&&Ve(e,t)},Pe.__r=function(e){We&&We(e),P=0;var t=(I=e.__c).__H;t&&(W===I?(t.__h=[],I.__h=[],t.__.some(function(e){e.__N&&(e.__=e.__N),e.u=e.__N=void 0})):(t.__h.some(rt),t.__h.some(ot),t.__h=[],P=0)),W=I},Pe.diffed=function(e){Ue&&Ue(e);var t=e.__c;t&&t.__H&&(t.__H.__h.length&&(1!==Le.push(t)&&U===Pe.requestAnimationFrame||((U=Pe.requestAnimationFrame)||nt)(et)),t.__H.__.some(function(e){e.u&&(e.__H=e.u),e.u=void 0})),W=I=null},Pe.__c=function(e,t){t.some(function(e){try{e.__h.some(rt),e.__h=e.__h.filter(function(e){return!e.__||ot(e)})}catch(n){t.some(function(e){e.__h&&(e.__h=[])}),t=[],Pe.__e(n,e.__v)}}),He&&He(e,t)},Pe.unmount=function(e){Be&&Be(e);var t,n=e.__c;n&&n.__H&&(n.__H.__.some(function(e){try{rt(e)}catch(e){t=e}}),n.__H=void 0,t&&Pe.__e(t,n.__v))};var tt="function"==typeof requestAnimationFrame;function nt(e){var t,n=function(){clearTimeout(r),tt&&cancelAnimationFrame(t),setTimeout(e)},r=setTimeout(n,35);tt&&(t=requestAnimationFrame(n))}function rt(e){var t=I,n=e.__c;"function"==typeof n&&(e.__c=void 0,n()),I=t}function ot(e){var t=I;e.__c=e.__(),I=t}function it(e,t){return!e||e.length!==t.length||t.some(function(t,n){return t!==e[n]})}function at(e,t){return"function"==typeof t?t(e):t}var st=Symbol.for("preact-signals");function lt(){if(ft>1)ft--;else{var e,t=!1;for(!function(){var e=bt;for(bt=void 0;void 0!==e;)e.S.v===e.v&&(e.S.i=e.i),e=e.o}();void 0!==mt;){var n=mt;for(mt=void 0,gt++;void 0!==n;){var r=n.u;if(n.u=void 0,n.f&=-3,!(8&n.f)&&Nt(n))try{n.c()}catch(n){t||(e=n,t=!0)}n=r}}if(gt=0,ft--,t)throw e}}function ct(e){if(ft>0)return e();wt=++vt,ft++;try{return e()}finally{lt()}}var dt=void 0;function ut(e){var t=dt;dt=void 0;try{return e()}finally{dt=t}}var pt,ht,mt=void 0,ft=0,gt=0,vt=0,wt=0,bt=void 0,xt=0;function yt(e){if(void 0!==dt){var t=e.n;if(void 0===t||t.t!==dt)return t={i:0,S:e,p:dt.s,n:void 0,t:dt,e:void 0,x:void 0,r:t},void 0!==dt.s&&(dt.s.n=t),dt.s=t,e.n=t,32&dt.f&&e.S(t),t;if(-1===t.i)return t.i=0,void 0!==t.n&&(t.n.p=t.p,void 0!==t.p&&(t.p.n=t.n),t.p=dt.s,t.n=void 0,dt.s.n=t,dt.s=t),t}}function kt(e,t){this.v=e,this.i=0,this.n=void 0,this.t=void 0,this.l=0,this.W=null==t?void 0:t.watched,this.Z=null==t?void 0:t.unwatched,this.name=null==t?void 0:t.name}function _t(e,t){return new kt(e,t)}function Nt(e){for(var t=e.s;void 0!==t;t=t.n)if(t.S.i!==t.i||!t.S.h()||t.S.i!==t.i)return!0;return!1}function St(e){for(var t=e.s;void 0!==t;t=t.n){var n=t.S.n;if(void 0!==n&&(t.r=n),t.S.n=t,t.i=-1,void 0===t.n){e.s=t;break}}}function Ct(e){for(var t=e.s,n=void 0;void 0!==t;){var r=t.p;-1===t.i?(t.S.U(t),void 0!==r&&(r.n=t.n),void 0!==t.n&&(t.n.p=r)):n=t,t.S.n=t.r,void 0!==t.r&&(t.r=void 0),t=r}e.s=n}function Tt(e,t){kt.call(this,void 0),this.x=e,this.s=void 0,this.g=xt-1,this.f=4,this.W=null==t?void 0:t.watched,this.Z=null==t?void 0:t.unwatched,this.name=null==t?void 0:t.name}function Et(e,t){return new Tt(e,t)}function zt(e){var t=e.m;if(e.m=void 0,"function"==typeof t){ft++;var n=dt;dt=void 0;try{t()}catch(t){throw e.f&=-2,e.f|=8,At(e),t}finally{dt=n,lt()}}}function At(e){for(var t=e.s;void 0!==t;t=t.n)t.S.U(t);e.x=void 0,e.s=void 0,zt(e)}function Mt(e){if(dt!==this)throw new Error("Out-of-order effect");Ct(this),dt=e,this.f&=-2,8&this.f&&At(this),lt()}function $t(e,t){this.x=e,this.m=void 0,this.s=void 0,this.u=void 0,this.f=32,this.name=null==t?void 0:t.name}function Ft(e,t){var n=new $t(e,t);try{n.c()}catch(e){throw n.d(),e}var r=n.d.bind(n);return r[Symbol.dispose]=r,r}kt.prototype.brand=st,kt.prototype.h=function(){return!0},kt.prototype.S=function(e){var t=this,n=this.t;n!==e&&void 0===e.e&&(e.x=n,this.t=e,void 0!==n?n.e=e:ut(function(){var e;null==(e=t.W)||e.call(t)}))},kt.prototype.U=function(e){var t=this;if(void 0!==this.t){var n=e.e,r=e.x;void 0!==n&&(n.x=r,e.e=void 0),void 0!==r&&(r.e=n,e.x=void 0),e===this.t&&(this.t=r,void 0===r&&ut(function(){var e;null==(e=t.Z)||e.call(t)}))}},kt.prototype.subscribe=function(e){var t=this;return Ft(function(){var n=t.value,r=dt;dt=void 0;try{e(n)}finally{dt=r}},{name:"sub"})},kt.prototype.valueOf=function(){return this.value},kt.prototype.toString=function(){return this.value+""},kt.prototype.toJSON=function(){return this.value},kt.prototype.peek=function(){var e=dt;dt=void 0;try{return this.value}finally{dt=e}},Object.defineProperty(kt.prototype,"value",{get:function(){var e=yt(this);return void 0!==e&&(e.i=this.i),this.v},set:function(e){if(e!==this.v){if(gt>100)throw new Error("Cycle detected");n=this,0!==ft&&0===gt&&n.l!==wt&&(n.l=wt,bt={S:n,v:n.v,i:n.i,o:bt}),this.v=e,this.i++,xt++,ft++;try{for(var t=this.t;void 0!==t;t=t.x)t.t.N()}finally{lt()}}var n}}),Tt.prototype=new kt,Tt.prototype.h=function(){if(this.f&=-3,1&this.f)return!1;if(32==(36&this.f))return!0;if(this.f&=-5,this.g===xt)return!0;if(this.g=xt,this.f|=1,this.i>0&&!Nt(this))return this.f&=-2,!0;var e=dt;try{St(this),dt=this;var t=this.x();(16&this.f||this.v!==t||0===this.i)&&(this.v=t,this.f&=-17,this.i++)}catch(e){this.v=e,this.f|=16,this.i++}return dt=e,Ct(this),this.f&=-2,!0},Tt.prototype.S=function(e){if(void 0===this.t){this.f|=36;for(var t=this.s;void 0!==t;t=t.n)t.S.S(t)}kt.prototype.S.call(this,e)},Tt.prototype.U=function(e){if(void 0!==this.t&&(kt.prototype.U.call(this,e),void 0===this.t)){this.f&=-33;for(var t=this.s;void 0!==t;t=t.n)t.S.U(t)}},Tt.prototype.N=function(){if(!(2&this.f)){this.f|=6;for(var e=this.t;void 0!==e;e=e.x)e.t.N()}},Object.defineProperty(Tt.prototype,"value",{get:function(){if(1&this.f)throw new Error("Cycle detected");var e=yt(this);if(this.h(),void 0!==e&&(e.i=this.i),16&this.f)throw this.v;return this.v}}),$t.prototype.c=function(){var e=this.S();try{if(8&this.f)return;if(void 0===this.x)return;var t=this.x();"function"==typeof t&&(this.m=t)}finally{e()}},$t.prototype.S=function(){if(1&this.f)throw new Error("Cycle detected");this.f|=1,this.f&=-9,zt(this),St(this),ft++;var e=dt;return dt=this,Mt.bind(this,e)},$t.prototype.N=function(){2&this.f||(this.f|=2,this.u=mt,mt=this)},$t.prototype.d=function(){this.f|=8,1&this.f||At(this)},$t.prototype.dispose=function(){this.d()};var Rt="undefined"!=typeof window&&!!window.__PREACT_SIGNALS_DEVTOOLS__,Ot=[],Dt=[];function jt(e,t){N[e]=t.bind(null,N[e]||function(){})}function Lt(e){if(ht){var t=ht;ht=void 0,t()}ht=e&&e.S()}function Pt(e){var t=this,n=e.data,r=Wt(n);r.value=n;var o=Ke(function(){for(var e=t,n=t.__v;n=n.__;)if(n.__c){n.__c.__$f|=4;break}var o=Et(function(){var e=r.value.value;return 0===e?0:!0===e?"":e||""}),i=Et(function(){return!Array.isArray(o.value)&&!C(o.value)}),a=Ft(function(){if(this.N=Gt,i.value){var t=o.value;e.__v&&e.__v.__e&&3===e.__v.__e.nodeType&&(e.__v.__e.data=t)}}),s=t.__$u.d;return t.__$u.d=function(){a(),s.call(this)},[i,o]},[]),i=o[0],a=o[1];return i.value?a.peek():a.value}function It(e,t,n,r){var o=t in e&&void 0===e.ownerSVGElement,i=_t(n),a=n.peek();return{o:function(e,t){i.value=e,a=e.peek()},d:Ft(function(){this.N=Gt;var n=i.value.value;a!==n?(a=void 0,o?e[t]=n:null==n||!1===n&&"-"!==t[4]?e.removeAttribute(t):e.setAttribute(t,n)):a=void 0})}}function Wt(e,t){return Ke(function(){return _t(e,t)},[])}Ft(function(){pt=this.N})(),Pt.displayName="ReactiveTextNode",Object.defineProperties(kt.prototype,{constructor:{configurable:!0,value:void 0},type:{configurable:!0,value:Pt},props:{configurable:!0,get:function(){var e=this;return{data:{get value(){return e.value}}}}},__b:{configurable:!0,value:1}}),jt("__b",function(e,t){if("string"==typeof t.type){var n,r=t.props;for(var o in r)if("children"!==o){var i=r[o];i instanceof kt&&(n||(t.__np=n={}),n[o]=i,r[o]=i.peek())}}e(t)}),jt("__r",function(e,t){if(e(t),t.type!==me){Lt();var n,r=t.__c;r&&(r.__$f&=-2,void 0===(n=r.__$u)&&(r.__$u=(Ft(function(){o=this},{name:"function"==typeof t.type?t.type.displayName||t.type.name:""}),o.c=function(){var e;Rt&&(null==(e=n.y)||e.call(n)),r.__$f|=1,r.setState({})},n=o))),Lt(n)}var o}),jt("__e",function(e,t,n,r){Lt(),e(t,n,r)}),jt("diffed",function(e,t){var n;if(Lt(),"string"==typeof t.type&&(n=t.__e)){var r=t.__np,o=t.props;if(r){var i=n.U;if(i)for(var a in i){var s=i[a];void 0===s||a in r||(s.d(),i[a]=void 0)}else i={},n.U=i;for(var l in r){var c=i[l],d=r[l];void 0===c?(c=It(n,l,d),i[l]=c):c.o(d,o)}for(var u in r)o[u]=r[u]}}e(t)}),jt("unmount",function(e,t){if("string"==typeof t.type){var n=t.__e;if(n){var r=n.U;if(r)for(var o in n.U=void 0,r){var i=r[o];i&&i.d()}}t.__np=void 0}else{var a=t.__c;if(a){var s=a.__$u;s&&(a.__$u=void 0,s.d())}}e(t)}),jt("__h",function(e,t,n,r){(r<3||9===r)&&(t.__$f|=2),e(t,n,r)}),fe.prototype.shouldComponentUpdate=function(e,t){if(this.__R)return!0;var n=this.__$u,r=n&&void 0!==n.s;for(var o in t)return!0;if(this.__f||"boolean"==typeof this.u&&!0===this.u){var i=2&this.__$f;if(!(r||i||4&this.__$f))return!0;if(1&this.__$f)return!0}else{if(!(r||4&this.__$f))return!0;if(3&this.__$f)return!0}for(var a in e)if("__source"!==a&&e[a]!==this.props[a])return!0;for(var s in this.props)if(!(s in e))return!0;return!1};var Ut="undefined"==typeof requestAnimationFrame?setTimeout:function(e){var t=function(){clearTimeout(n),cancelAnimationFrame(r),e()},n=setTimeout(t,35),r=requestAnimationFrame(t)},Ht=function(e){queueMicrotask(function(){queueMicrotask(e)})};function Bt(){ct(function(){for(var e;e=Ot.shift();)pt.call(e)})}function Vt(){1===Ot.push(this)&&(N.requestAnimationFrame||Ut)(Bt)}function qt(){ct(function(){for(var e;e=Dt.shift();)pt.call(e)})}function Gt(){1===Dt.push(this)&&(N.requestAnimationFrame||Ht)(qt)}function Jt(e,t){var n=Xe(e);n.current=e,Je(function(){return Ft(function(){return this.N=Vt,n.current()},t)},[])}function Yt(e,t){return t-e}function Xt(e){let t=e[0].name;const n=e.length,r=Math.min(4,n);for(let n=1;n<r;n++)t+=`, ${e[n].name}`;return t}function Kt(e){let t=e[0].time;for(let n=1,r=e.length;n<r;n++)t+=e[n].time;return t}function Zt(e){for(let t=0,n=e.length;t<n;t++)if(e[t].forget)return!0;return!1}var Qt=e=>{let t="";const n=new Map;for(const t of e){const{forget:e,time:r,aggregatedCount:o,name:i}=t;n.has(o)||n.set(o,[]);const a=n.get(o);a&&a.push({name:i,forget:e,time:null!=r?r:0})}const r=Array.from(n.keys()).sort(Yt),o=[];let i=0;for(const e of r){const t=n.get(e);if(!t)continue;let r=Xt(t);const a=Kt(t),s=Zt(t);i+=a,t.length>4&&(r+="…"),e>1&&(r+=` × ${e}`),s&&(r=`✨${r}`),o.push(r)}return t=o.join(", "),t.length?(t.length>40&&(t=`${t.slice(0,40)}…`),i>=.01&&(t+=` (${Number(i.toFixed(2))}ms)`),t):null};function en(e,t){return e===t||e!=e&&t!=t}var tn=()=>ie?(void 0===window.reactScanIdCounter&&(window.reactScanIdCounter=0),""+ ++window.reactScanIdCounter):"0",nn=e=>{const t=e.createOscillator(),n=e.createGain();t.connect(n),n.connect(e.destination);const r="sine",o=.3,i=.12,a=[392,600],s=o/a.length;a.forEach((n,r)=>{t.frequency.setValueAtTime(n,e.currentTime+r*s)}),t.type=r,n.gain.setValueAtTime(i,e.currentTime),n.gain.setTargetAtTime(0,e.currentTime+.7*o,.05),t.start(),t.stop(e.currentTime+o)};function rn(e,t){for(var n in t)e[n]=t[n];return e}function on(e,t){for(var n in e)if("__source"!==n&&!(n in t))return!0;for(var r in t)if("__source"!==r&&e[r]!==t[r])return!0;return!1}function an(e){try{return!((t=e.__)===(n=e.u())&&(0!==t||1/t==1/n)||t!=t&&n!=n)}catch(e){return!0}var t,n}function sn(e,t){this.props=e,this.context=t}function ln(e,t){function n(e){var t=this.props.ref;return t!=e.ref&&t&&("function"==typeof t?t(null):t.current=null),on(this.props,e)}function r(t){return this.shouldComponentUpdate=n,pe(e,t)}return r.displayName="Memo("+(e.displayName||e.name)+")",r.__f=r.prototype.isReactComponent=!0,r.type=e,r}(sn.prototype=new fe).isPureReactComponent=!0,sn.prototype.shouldComponentUpdate=function(e,t){return on(this.props,e)||on(this.state,t)};var cn=N.__b;N.__b=function(e){e.type&&e.type.__f&&e.ref&&(e.props.ref=e.ref,e.ref=null),cn&&cn(e)};var dn="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.forward_ref")||3911;function un(e){function t(t){var n=rn({},t);return delete n.ref,e(n,t.ref||null)}return t.$$typeof=dn,t.render=e,t.prototype.isReactComponent=t.__f=!0,t.displayName="ForwardRef("+(e.displayName||e.name)+")",t}var pn=N.__e;N.__e=function(e,t,n,r){if(e.then)for(var o,i=t;i=i.__;)if((o=i.__c)&&o.__c)return null==t.__e&&(t.__e=n.__e,t.__k=n.__k),o.__c(e,t);pn(e,t,n,r)};var hn=N.unmount;function mn(e,t,n){return e&&(e.__c&&e.__c.__H&&(e.__c.__H.__.forEach(function(e){"function"==typeof e.__c&&e.__c()}),e.__c.__H=null),null!=(e=rn({},e)).__c&&(e.__c.__P===n&&(e.__c.__P=t),e.__c.__e=!0,e.__c=null),e.__k=e.__k&&e.__k.map(function(e){return mn(e,t,n)})),e}function fn(e,t,n){return e&&n&&(e.__v=null,e.__k=e.__k&&e.__k.map(function(e){return fn(e,t,n)}),e.__c&&e.__c.__P===t&&(e.__e&&n.appendChild(e.__e),e.__c.__e=!0,e.__c.__P=n)),e}function gn(){this.__u=0,this.o=null,this.__b=null}function vn(e){var t=e.__&&e.__.__c;return t&&t.__a&&t.__a(e)}function wn(){this.i=null,this.l=null}N.unmount=function(e){var t=e.__c;t&&(t.__z=!0),t&&t.__R&&t.__R(),t&&32&e.__u&&(e.type=null),hn&&hn(e)},(gn.prototype=new fe).__c=function(e,t){var n=t.__c,r=this;null==r.o&&(r.o=[]),r.o.push(n);var o=vn(r.__v),i=!1,a=function(){i||r.__z||(i=!0,n.__R=null,o?o(l):l())};n.__R=a;var s=n.__P;n.__P=null;var l=function(){if(! --r.__u){if(r.state.__a){var e=r.state.__a;r.__v.__k[0]=fn(e,e.__c.__P,e.__c.__O)}var t;for(r.setState({__a:r.__b=null});t=r.o.pop();)t.__P=s,t.forceUpdate()}};r.__u++||32&t.__u||r.setState({__a:r.__b=r.__v.__k[0]}),e.then(a,a)},gn.prototype.componentWillUnmount=function(){this.o=[]},gn.prototype.render=function(e,t){if(this.__b){if(this.__v.__k){var n=document.createElement("div"),r=this.__v.__k[0].__c;this.__v.__k[0]=mn(this.__b,n,r.__O=r.__P)}this.__b=null}var o=t.__a&&pe(me,null,e.fallback);return o&&(o.__u&=-33),[pe(me,null,t.__a?null:e.children),o]};var bn=function(e,t,n){if(++n[1]===n[0]&&e.l.delete(t),e.props.revealOrder&&("t"!==e.props.revealOrder[0]||!e.l.size))for(n=e.i;n;){for(;n.length>3;)n.pop()();if(n[1]<n[0])break;e.i=n=n[2]}};function xn(e){return this.getChildContext=function(){return e.context},e.children}function yn(e){var t=this,n=e.h;if(t.componentWillUnmount=function(){Oe(null,t.v),t.v=null,t.h=null},t.h&&t.h!==n&&t.componentWillUnmount(),!t.v){for(var r=t.__v;null!==r&&!r.__m&&null!==r.__;)r=r.__;t.h=n,t.v={nodeType:1,parentNode:n,childNodes:[],__k:{__m:r.__m},contains:function(){return!0},namespaceURI:n.namespaceURI,insertBefore:function(e,n){this.childNodes.push(e),t.h.insertBefore(e,n)},removeChild:function(e){this.childNodes.splice(this.childNodes.indexOf(e)>>>1,1),t.h.removeChild(e)}}}Oe(pe(xn,{context:t.context},e.__v),t.v)}(wn.prototype=new fe).__a=function(e){var t=this,n=vn(t.__v),r=t.l.get(e);return r[0]++,function(o){var i=function(){t.props.revealOrder?(r.push(o),bn(t,e,r)):o()};n?n(i):i()}},wn.prototype.render=function(e){this.i=null,this.l=new Map;var t=_e(e.children);e.revealOrder&&"b"===e.revealOrder[0]&&t.reverse();for(var n=t.length;n--;)this.l.set(t[n],this.i=[1,0,this.i]);return e.children},wn.prototype.componentDidUpdate=wn.prototype.componentDidMount=function(){var e=this;this.l.forEach(function(t,n){bn(e,n,t)})};var kn="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,_n=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|image(!S)|letter|lighting|marker(?!H|W|U)|overline|paint|pointer|shape|stop|strikethrough|stroke|text(?!L)|transform|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,Nn=/^on(Ani|Tra|Tou|BeforeInp|Compo)/,Sn=/[A-Z0-9]/g,Cn="undefined"!=typeof document,Tn=function(e){return("undefined"!=typeof Symbol&&"symbol"==typeof Symbol()?/fil|che|rad/:/fil|che|ra/).test(e)};fe.prototype.isReactComponent=!0,["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach(function(e){Object.defineProperty(fe.prototype,e,{configurable:!0,get:function(){return this["UNSAFE_"+e]},set:function(t){Object.defineProperty(this,e,{configurable:!0,writable:!0,value:t})}})});var En=N.event;N.event=function(e){return En&&(e=En(e)),e.persist=function(){},e.isPropagationStopped=function(){return this.cancelBubble},e.isDefaultPrevented=function(){return this.defaultPrevented},e.nativeEvent=e};var zn={configurable:!0,get:function(){return this.class}},An=N.vnode;N.vnode=function(e){"string"==typeof e.type&&function(e){var t=e.props,n=e.type,r={},o=-1==n.indexOf("-");for(var i in t){var a=t[i];if(!("value"===i&&"defaultValue"in t&&null==a||Cn&&"children"===i&&"noscript"===n||"class"===i||"className"===i)){var s=i.toLowerCase();"defaultValue"===i&&"value"in t&&null==t.value?i="value":"download"===i&&!0===a?a="":"translate"===s&&"no"===a?a=!1:"o"===s[0]&&"n"===s[1]?"ondoubleclick"===s?i="ondblclick":"onchange"!==s||"input"!==n&&"textarea"!==n||Tn(t.type)?"onfocus"===s?i="onfocusin":"onblur"===s?i="onfocusout":Nn.test(i)&&(i=s):s=i="oninput":o&&_n.test(i)?i=i.replace(Sn,"-$&").toLowerCase():null===a&&(a=void 0),"oninput"===s&&r[i=s]&&(i="oninputCapture"),r[i]=a}}"select"==n&&(r.multiple&&Array.isArray(r.value)&&(r.value=_e(t.children).forEach(function(e){e.props.selected=-1!=r.value.indexOf(e.props.value)})),null!=r.defaultValue&&(r.value=_e(t.children).forEach(function(e){e.props.selected=r.multiple?-1!=r.defaultValue.indexOf(e.props.value):r.defaultValue==e.props.value}))),t.class&&!t.className?(r.class=t.class,Object.defineProperty(r,"className",zn)):t.className&&(r.class=r.className=t.className),e.props=r}(e),e.$$typeof=kn,An&&An(e)};var Mn=N.__r;N.__r=function(e){Mn&&Mn(e),e.__c};var $n=N.diffed;N.diffed=function(e){$n&&$n(e);var t=e.props,n=e.__e;null!=n&&"textarea"===e.type&&"value"in t&&t.value!==n.value&&(n.value=null==t.value?"":t.value)};var Fn=0;function Rn(e,t,n,r,o,i){t||(t={});var a,s,l=t;if("ref"in l)for(s in l={},t)"ref"==s?a=t[s]:l[s]=t[s];var c={type:e,props:l,key:n,ref:a,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:--Fn,__i:-1,__u:0,__source:o,__self:i};if("function"==typeof e&&(a=e.defaultProps))for(s in a)void 0===l[s]&&(l[s]=a[s]);return N.vnode&&N.vnode(c),c}var On=un(({size:e=15,name:t,fill:n="currentColor",stroke:r="currentColor",className:o,externalURL:i="",style:a},s)=>{const l=Array.isArray(e)?e[0]:e,c=Array.isArray(e)?e[1]||e[0]:e,d=`${i}#${t}`;return Rn("svg",{ref:s,width:`${l}px`,height:`${c}px`,fill:n,stroke:r,className:o,style:{...a,minWidth:`${l}px`,maxWidth:`${l}px`,minHeight:`${c}px`,maxHeight:`${c}px`},children:[Rn("title",{children:t}),Rn("use",{href:d})]})}),Dn=24,jn=550,Ln=350,Pn=400,In=240,Wn="react-scan-widget-settings-v2",Un="react-scan-widget-collapsed-v1",Hn="react-scan-widget-last-view-v1";function Bn(e){var t,n,r="";if("string"==typeof e||"number"==typeof e)r+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(n=Bn(e[t]))&&(r&&(r+=" "),r+=n)}else for(n in e)e[n]&&(r&&(r+=" "),r+=n);return r}var Vn=(e=new Map,t=null,n)=>({nextPart:e,validators:t,classGroupId:n}),qn="-",Gn=[],Jn=e=>{const t=Kn(e),{conflictingClassGroups:n,conflictingClassGroupModifiers:r}=e;return{getClassGroupId:e=>{if(e.startsWith("[")&&e.endsWith("]"))return Xn(e);const n=e.split(qn),r=""===n[0]&&n.length>1?1:0;return Yn(n,r,t)},getConflictingClassGroupIds:(e,t)=>{if(t){const t=r[e],o=n[e];return t?o?((e,t)=>{const n=new Array(e.length+t.length);for(let t=0;t<e.length;t++)n[t]=e[t];for(let r=0;r<t.length;r++)n[e.length+r]=t[r];return n})(o,t):t:o||Gn}return n[e]||Gn}}},Yn=(e,t,n)=>{if(0===e.length-t)return n.classGroupId;const r=e[t],o=n.nextPart.get(r);if(o){const n=Yn(e,t+1,o);if(n)return n}const i=n.validators;if(null===i)return;const a=0===t?e.join(qn):e.slice(t).join(qn),s=i.length;for(let e=0;e<s;e++){const t=i[e];if(t.validator(a))return t.classGroupId}},Xn=e=>-1===e.slice(1,-1).indexOf(":")?void 0:(()=>{const t=e.slice(1,-1),n=t.indexOf(":"),r=t.slice(0,n);return r?"arbitrary.."+r:void 0})(),Kn=e=>{const{theme:t,classGroups:n}=e;return Zn(n,t)},Zn=(e,t)=>{const n=Vn();for(const r in e){const o=e[r];Qn(o,n,r,t)}return n},Qn=(e,t,n,r)=>{const o=e.length;for(let i=0;i<o;i++){const o=e[i];er(o,t,n,r)}},er=(e,t,n,r)=>{"string"!=typeof e?"function"!=typeof e?rr(e,t,n,r):nr(e,t,n,r):tr(e,t,n)},tr=(e,t,n)=>{(""===e?t:or(t,e)).classGroupId=n},nr=(e,t,n,r)=>{ir(e)?Qn(e(r),t,n,r):(null===t.validators&&(t.validators=[]),t.validators.push(((e,t)=>({classGroupId:e,validator:t}))(n,e)))},rr=(e,t,n,r)=>{const o=Object.entries(e),i=o.length;for(let e=0;e<i;e++){const[i,a]=o[e];Qn(a,or(t,i),n,r)}},or=(e,t)=>{let n=e;const r=t.split(qn),o=r.length;for(let e=0;e<o;e++){const t=r[e];let o=n.nextPart.get(t);o||(o=Vn(),n.nextPart.set(t,o)),n=o}return n},ir=e=>"isThemeGetter"in e&&!0===e.isThemeGetter,ar=e=>{if(e<1)return{get:()=>{},set:()=>{}};let t=0,n=Object.create(null),r=Object.create(null);const o=(o,i)=>{n[o]=i,t++,t>e&&(t=0,r=n,n=Object.create(null))};return{get(e){let t=n[e];return void 0!==t?t:void 0!==(t=r[e])?(o(e,t),t):void 0},set(e,t){e in n?n[e]=t:o(e,t)}}},sr=[],lr=(e,t,n,r,o)=>({modifiers:e,hasImportantModifier:t,baseClassName:n,maybePostfixModifierPosition:r,isExternal:o}),cr=e=>{const{prefix:t,experimentalParseClassName:n}=e;let r=e=>{const t=[];let n,r=0,o=0,i=0;const a=e.length;for(let s=0;s<a;s++){const a=e[s];if(0===r&&0===o){if(":"===a){t.push(e.slice(i,s)),i=s+1;continue}if("/"===a){n=s;continue}}"["===a?r++:"]"===a?r--:"("===a?o++:")"===a&&o--}const s=0===t.length?e:e.slice(i);let l=s,c=!1;s.endsWith("!")?(l=s.slice(0,-1),c=!0):s.startsWith("!")&&(l=s.slice(1),c=!0);return lr(t,c,l,n&&n>i?n-i:void 0)};if(t){const e=t+":",n=r;r=t=>t.startsWith(e)?n(t.slice(e.length)):lr(sr,!1,t,void 0,!0)}if(n){const e=r;r=t=>n({className:t,parseClassName:e})}return r},dr=e=>{const t=new Map;return e.orderSensitiveModifiers.forEach((e,n)=>{t.set(e,1e6+n)}),e=>{const n=[];let r=[];for(let o=0;o<e.length;o++){const i=e[o],a="["===i[0],s=t.has(i);a||s?(r.length>0&&(r.sort(),n.push(...r),r=[]),n.push(i)):r.push(i)}return r.length>0&&(r.sort(),n.push(...r)),n}},ur=/\s+/,pr=e=>{if("string"==typeof e)return e;let t,n="";for(let r=0;r<e.length;r++)e[r]&&(t=pr(e[r]))&&(n&&(n+=" "),n+=t);return n},hr=[],mr=e=>{const t=t=>t[e]||hr;return t.isThemeGetter=!0,t},fr=/^\[(?:(\w[\w-]*):)?(.+)\]$/i,gr=/^\((?:(\w[\w-]*):)?(.+)\)$/i,vr=/^\d+(?:\.\d+)?\/\d+(?:\.\d+)?$/,wr=/^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/,br=/\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/,xr=/^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/,yr=/^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/,kr=/^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/,_r=e=>vr.test(e),Nr=e=>!!e&&!Number.isNaN(Number(e)),Sr=e=>!!e&&Number.isInteger(Number(e)),Cr=e=>e.endsWith("%")&&Nr(e.slice(0,-1)),Tr=e=>wr.test(e),Er=()=>!0,zr=e=>br.test(e)&&!xr.test(e),Ar=()=>!1,Mr=e=>yr.test(e),$r=e=>kr.test(e),Fr=e=>!Or(e)&&!Hr(e),Rr=e=>Kr(e,to,Ar),Or=e=>fr.test(e),Dr=e=>Kr(e,no,zr),jr=e=>Kr(e,ro,Nr),Lr=e=>Kr(e,io,Er),Pr=e=>Kr(e,oo,Ar),Ir=e=>Kr(e,Qr,Ar),Wr=e=>Kr(e,eo,$r),Ur=e=>Kr(e,ao,Mr),Hr=e=>gr.test(e),Br=e=>Zr(e,no),Vr=e=>Zr(e,oo),qr=e=>Zr(e,Qr),Gr=e=>Zr(e,to),Jr=e=>Zr(e,eo),Yr=e=>Zr(e,ao,!0),Xr=e=>Zr(e,io,!0),Kr=(e,t,n)=>{const r=fr.exec(e);return!!r&&(r[1]?t(r[1]):n(r[2]))},Zr=(e,t,n=!1)=>{const r=gr.exec(e);return!!r&&(r[1]?t(r[1]):n)},Qr=e=>"position"===e||"percentage"===e,eo=e=>"image"===e||"url"===e,to=e=>"length"===e||"size"===e||"bg-size"===e,no=e=>"length"===e,ro=e=>"number"===e,oo=e=>"family-name"===e,io=e=>"number"===e||"weight"===e,ao=e=>"shadow"===e,so=((e,...t)=>{let n,r,o,i;const a=e=>{const t=r(e);if(t)return t;const i=((e,t)=>{const{parseClassName:n,getClassGroupId:r,getConflictingClassGroupIds:o,sortModifiers:i}=t,a=[],s=e.trim().split(ur);let l="";for(let e=s.length-1;e>=0;e-=1){const t=s[e],{isExternal:c,modifiers:d,hasImportantModifier:u,baseClassName:p,maybePostfixModifierPosition:h}=n(t);if(c){l=t+(l.length>0?" "+l:l);continue}let m=!!h,f=r(m?p.substring(0,h):p);if(!f){if(!m){l=t+(l.length>0?" "+l:l);continue}if(f=r(p),!f){l=t+(l.length>0?" "+l:l);continue}m=!1}const g=0===d.length?"":1===d.length?d[0]:i(d).join(":"),v=u?g+"!":g,w=v+f;if(a.indexOf(w)>-1)continue;a.push(w);const b=o(f,m);for(let e=0;e<b.length;++e){const t=b[e];a.push(v+t)}l=t+(l.length>0?" "+l:l)}return l})(e,n);return o(e,i),i};return i=s=>{const l=t.reduce((e,t)=>t(e),e());return n=(e=>({cache:ar(e.cacheSize),parseClassName:cr(e),sortModifiers:dr(e),...Jn(e)}))(l),r=n.cache.get,o=n.cache.set,i=a,a(s)},(...e)=>i(((...e)=>{let t,n,r=0,o="";for(;r<e.length;)(t=e[r++])&&(n=pr(t))&&(o&&(o+=" "),o+=n);return o})(...e))})(()=>{const e=mr("color"),t=mr("font"),n=mr("text"),r=mr("font-weight"),o=mr("tracking"),i=mr("leading"),a=mr("breakpoint"),s=mr("container"),l=mr("spacing"),c=mr("radius"),d=mr("shadow"),u=mr("inset-shadow"),p=mr("text-shadow"),h=mr("drop-shadow"),m=mr("blur"),f=mr("perspective"),g=mr("aspect"),v=mr("ease"),w=mr("animate"),b=()=>["center","top","bottom","left","right","top-left","left-top","top-right","right-top","bottom-right","right-bottom","bottom-left","left-bottom",Hr,Or],x=()=>[Hr,Or,l],y=()=>[_r,"full","auto",...x()],k=()=>[Sr,"none","subgrid",Hr,Or],_=()=>["auto",{span:["full",Sr,Hr,Or]},Sr,Hr,Or],N=()=>[Sr,"auto",Hr,Or],S=()=>["auto","min","max","fr",Hr,Or],C=()=>["auto",...x()],T=()=>[_r,"auto","full","dvw","dvh","lvw","lvh","svw","svh","min","max","fit",...x()],E=()=>[_r,"screen","full","dvw","lvw","svw","min","max","fit",...x()],z=()=>[_r,"screen","full","lh","dvh","lvh","svh","min","max","fit",...x()],A=()=>[e,Hr,Or],M=()=>["center","top","bottom","left","right","top-left","left-top","top-right","right-top","bottom-right","right-bottom","bottom-left","left-bottom",qr,Ir,{position:[Hr,Or]}],$=()=>["auto","cover","contain",Gr,Rr,{size:[Hr,Or]}],F=()=>[Cr,Br,Dr],R=()=>["","none","full",c,Hr,Or],O=()=>["",Nr,Br,Dr],D=()=>[Nr,Cr,qr,Ir],j=()=>["","none",m,Hr,Or],L=()=>["none",Nr,Hr,Or],P=()=>["none",Nr,Hr,Or],I=()=>[Nr,Hr,Or],W=()=>[_r,"full",...x()];return{cacheSize:500,theme:{animate:["spin","ping","pulse","bounce"],aspect:["video"],blur:[Tr],breakpoint:[Tr],color:[Er],container:[Tr],"drop-shadow":[Tr],ease:["in","out","in-out"],font:[Fr],"font-weight":["thin","extralight","light","normal","medium","semibold","bold","extrabold","black"],"inset-shadow":[Tr],leading:["none","tight","snug","normal","relaxed","loose"],perspective:["dramatic","near","normal","midrange","distant","none"],radius:[Tr],shadow:[Tr],spacing:["px",Nr],text:[Tr],"text-shadow":[Tr],tracking:["tighter","tight","normal","wide","wider","widest"]},classGroups:{aspect:[{aspect:["auto","square",_r,Or,Hr,g]}],container:["container"],columns:[{columns:[Nr,Or,Hr,s]}],"break-after":[{"break-after":["auto","avoid","all","avoid-page","page","left","right","column"]}],"break-before":[{"break-before":["auto","avoid","all","avoid-page","page","left","right","column"]}],"break-inside":[{"break-inside":["auto","avoid","avoid-page","avoid-column"]}],"box-decoration":[{"box-decoration":["slice","clone"]}],box:[{box:["border","content"]}],display:["block","inline-block","inline","flex","inline-flex","table","inline-table","table-caption","table-cell","table-column","table-column-group","table-footer-group","table-header-group","table-row-group","table-row","flow-root","grid","inline-grid","contents","list-item","hidden"],sr:["sr-only","not-sr-only"],float:[{float:["right","left","none","start","end"]}],clear:[{clear:["left","right","both","none","start","end"]}],isolation:["isolate","isolation-auto"],"object-fit":[{object:["contain","cover","fill","none","scale-down"]}],"object-position":[{object:b()}],overflow:[{overflow:["auto","hidden","clip","visible","scroll"]}],"overflow-x":[{"overflow-x":["auto","hidden","clip","visible","scroll"]}],"overflow-y":[{"overflow-y":["auto","hidden","clip","visible","scroll"]}],overscroll:[{overscroll:["auto","contain","none"]}],"overscroll-x":[{"overscroll-x":["auto","contain","none"]}],"overscroll-y":[{"overscroll-y":["auto","contain","none"]}],position:["static","fixed","absolute","relative","sticky"],inset:[{inset:y()}],"inset-x":[{"inset-x":y()}],"inset-y":[{"inset-y":y()}],start:[{"inset-s":y(),start:y()}],end:[{"inset-e":y(),end:y()}],"inset-bs":[{"inset-bs":y()}],"inset-be":[{"inset-be":y()}],top:[{top:y()}],right:[{right:y()}],bottom:[{bottom:y()}],left:[{left:y()}],visibility:["visible","invisible","collapse"],z:[{z:[Sr,"auto",Hr,Or]}],basis:[{basis:[_r,"full","auto",s,...x()]}],"flex-direction":[{flex:["row","row-reverse","col","col-reverse"]}],"flex-wrap":[{flex:["nowrap","wrap","wrap-reverse"]}],flex:[{flex:[Nr,_r,"auto","initial","none",Or]}],grow:[{grow:["",Nr,Hr,Or]}],shrink:[{shrink:["",Nr,Hr,Or]}],order:[{order:[Sr,"first","last","none",Hr,Or]}],"grid-cols":[{"grid-cols":k()}],"col-start-end":[{col:_()}],"col-start":[{"col-start":N()}],"col-end":[{"col-end":N()}],"grid-rows":[{"grid-rows":k()}],"row-start-end":[{row:_()}],"row-start":[{"row-start":N()}],"row-end":[{"row-end":N()}],"grid-flow":[{"grid-flow":["row","col","dense","row-dense","col-dense"]}],"auto-cols":[{"auto-cols":S()}],"auto-rows":[{"auto-rows":S()}],gap:[{gap:x()}],"gap-x":[{"gap-x":x()}],"gap-y":[{"gap-y":x()}],"justify-content":[{justify:["start","end","center","between","around","evenly","stretch","baseline","center-safe","end-safe","normal"]}],"justify-items":[{"justify-items":["start","end","center","stretch","center-safe","end-safe","normal"]}],"justify-self":[{"justify-self":["auto","start","end","center","stretch","center-safe","end-safe"]}],"align-content":[{content:["normal","start","end","center","between","around","evenly","stretch","baseline","center-safe","end-safe"]}],"align-items":[{items:["start","end","center","stretch","center-safe","end-safe",{baseline:["","last"]}]}],"align-self":[{self:["auto","start","end","center","stretch","center-safe","end-safe",{baseline:["","last"]}]}],"place-content":[{"place-content":["start","end","center","between","around","evenly","stretch","baseline","center-safe","end-safe"]}],"place-items":[{"place-items":["start","end","center","stretch","center-safe","end-safe","baseline"]}],"place-self":[{"place-self":["auto","start","end","center","stretch","center-safe","end-safe"]}],p:[{p:x()}],px:[{px:x()}],py:[{py:x()}],ps:[{ps:x()}],pe:[{pe:x()}],pbs:[{pbs:x()}],pbe:[{pbe:x()}],pt:[{pt:x()}],pr:[{pr:x()}],pb:[{pb:x()}],pl:[{pl:x()}],m:[{m:C()}],mx:[{mx:C()}],my:[{my:C()}],ms:[{ms:C()}],me:[{me:C()}],mbs:[{mbs:C()}],mbe:[{mbe:C()}],mt:[{mt:C()}],mr:[{mr:C()}],mb:[{mb:C()}],ml:[{ml:C()}],"space-x":[{"space-x":x()}],"space-x-reverse":["space-x-reverse"],"space-y":[{"space-y":x()}],"space-y-reverse":["space-y-reverse"],size:[{size:T()}],"inline-size":[{inline:["auto",...E()]}],"min-inline-size":[{"min-inline":["auto",...E()]}],"max-inline-size":[{"max-inline":["none",...E()]}],"block-size":[{block:["auto",...z()]}],"min-block-size":[{"min-block":["auto",...z()]}],"max-block-size":[{"max-block":["none",...z()]}],w:[{w:[s,"screen",...T()]}],"min-w":[{"min-w":[s,"screen","none",...T()]}],"max-w":[{"max-w":[s,"screen","none","prose",{screen:[a]},...T()]}],h:[{h:["screen","lh",...T()]}],"min-h":[{"min-h":["screen","lh","none",...T()]}],"max-h":[{"max-h":["screen","lh",...T()]}],"font-size":[{text:["base",n,Br,Dr]}],"font-smoothing":["antialiased","subpixel-antialiased"],"font-style":["italic","not-italic"],"font-weight":[{font:[r,Xr,Lr]}],"font-stretch":[{"font-stretch":["ultra-condensed","extra-condensed","condensed","semi-condensed","normal","semi-expanded","expanded","extra-expanded","ultra-expanded",Cr,Or]}],"font-family":[{font:[Vr,Pr,t]}],"font-features":[{"font-features":[Or]}],"fvn-normal":["normal-nums"],"fvn-ordinal":["ordinal"],"fvn-slashed-zero":["slashed-zero"],"fvn-figure":["lining-nums","oldstyle-nums"],"fvn-spacing":["proportional-nums","tabular-nums"],"fvn-fraction":["diagonal-fractions","stacked-fractions"],tracking:[{tracking:[o,Hr,Or]}],"line-clamp":[{"line-clamp":[Nr,"none",Hr,jr]}],leading:[{leading:[i,...x()]}],"list-image":[{"list-image":["none",Hr,Or]}],"list-style-position":[{list:["inside","outside"]}],"list-style-type":[{list:["disc","decimal","none",Hr,Or]}],"text-alignment":[{text:["left","center","right","justify","start","end"]}],"placeholder-color":[{placeholder:A()}],"text-color":[{text:A()}],"text-decoration":["underline","overline","line-through","no-underline"],"text-decoration-style":[{decoration:["solid","dashed","dotted","double","wavy"]}],"text-decoration-thickness":[{decoration:[Nr,"from-font","auto",Hr,Dr]}],"text-decoration-color":[{decoration:A()}],"underline-offset":[{"underline-offset":[Nr,"auto",Hr,Or]}],"text-transform":["uppercase","lowercase","capitalize","normal-case"],"text-overflow":["truncate","text-ellipsis","text-clip"],"text-wrap":[{text:["wrap","nowrap","balance","pretty"]}],indent:[{indent:x()}],"vertical-align":[{align:["baseline","top","middle","bottom","text-top","text-bottom","sub","super",Hr,Or]}],whitespace:[{whitespace:["normal","nowrap","pre","pre-line","pre-wrap","break-spaces"]}],break:[{break:["normal","words","all","keep"]}],wrap:[{wrap:["break-word","anywhere","normal"]}],hyphens:[{hyphens:["none","manual","auto"]}],content:[{content:["none",Hr,Or]}],"bg-attachment":[{bg:["fixed","local","scroll"]}],"bg-clip":[{"bg-clip":["border","padding","content","text"]}],"bg-origin":[{"bg-origin":["border","padding","content"]}],"bg-position":[{bg:M()}],"bg-repeat":[{bg:["no-repeat",{repeat:["","x","y","space","round"]}]}],"bg-size":[{bg:$()}],"bg-image":[{bg:["none",{linear:[{to:["t","tr","r","br","b","bl","l","tl"]},Sr,Hr,Or],radial:["",Hr,Or],conic:[Sr,Hr,Or]},Jr,Wr]}],"bg-color":[{bg:A()}],"gradient-from-pos":[{from:F()}],"gradient-via-pos":[{via:F()}],"gradient-to-pos":[{to:F()}],"gradient-from":[{from:A()}],"gradient-via":[{via:A()}],"gradient-to":[{to:A()}],rounded:[{rounded:R()}],"rounded-s":[{"rounded-s":R()}],"rounded-e":[{"rounded-e":R()}],"rounded-t":[{"rounded-t":R()}],"rounded-r":[{"rounded-r":R()}],"rounded-b":[{"rounded-b":R()}],"rounded-l":[{"rounded-l":R()}],"rounded-ss":[{"rounded-ss":R()}],"rounded-se":[{"rounded-se":R()}],"rounded-ee":[{"rounded-ee":R()}],"rounded-es":[{"rounded-es":R()}],"rounded-tl":[{"rounded-tl":R()}],"rounded-tr":[{"rounded-tr":R()}],"rounded-br":[{"rounded-br":R()}],"rounded-bl":[{"rounded-bl":R()}],"border-w":[{border:O()}],"border-w-x":[{"border-x":O()}],"border-w-y":[{"border-y":O()}],"border-w-s":[{"border-s":O()}],"border-w-e":[{"border-e":O()}],"border-w-bs":[{"border-bs":O()}],"border-w-be":[{"border-be":O()}],"border-w-t":[{"border-t":O()}],"border-w-r":[{"border-r":O()}],"border-w-b":[{"border-b":O()}],"border-w-l":[{"border-l":O()}],"divide-x":[{"divide-x":O()}],"divide-x-reverse":["divide-x-reverse"],"divide-y":[{"divide-y":O()}],"divide-y-reverse":["divide-y-reverse"],"border-style":[{border:["solid","dashed","dotted","double","hidden","none"]}],"divide-style":[{divide:["solid","dashed","dotted","double","hidden","none"]}],"border-color":[{border:A()}],"border-color-x":[{"border-x":A()}],"border-color-y":[{"border-y":A()}],"border-color-s":[{"border-s":A()}],"border-color-e":[{"border-e":A()}],"border-color-bs":[{"border-bs":A()}],"border-color-be":[{"border-be":A()}],"border-color-t":[{"border-t":A()}],"border-color-r":[{"border-r":A()}],"border-color-b":[{"border-b":A()}],"border-color-l":[{"border-l":A()}],"divide-color":[{divide:A()}],"outline-style":[{outline:["solid","dashed","dotted","double","none","hidden"]}],"outline-offset":[{"outline-offset":[Nr,Hr,Or]}],"outline-w":[{outline:["",Nr,Br,Dr]}],"outline-color":[{outline:A()}],shadow:[{shadow:["","none",d,Yr,Ur]}],"shadow-color":[{shadow:A()}],"inset-shadow":[{"inset-shadow":["none",u,Yr,Ur]}],"inset-shadow-color":[{"inset-shadow":A()}],"ring-w":[{ring:O()}],"ring-w-inset":["ring-inset"],"ring-color":[{ring:A()}],"ring-offset-w":[{"ring-offset":[Nr,Dr]}],"ring-offset-color":[{"ring-offset":A()}],"inset-ring-w":[{"inset-ring":O()}],"inset-ring-color":[{"inset-ring":A()}],"text-shadow":[{"text-shadow":["none",p,Yr,Ur]}],"text-shadow-color":[{"text-shadow":A()}],opacity:[{opacity:[Nr,Hr,Or]}],"mix-blend":[{"mix-blend":["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity","plus-darker","plus-lighter"]}],"bg-blend":[{"bg-blend":["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity"]}],"mask-clip":[{"mask-clip":["border","padding","content","fill","stroke","view"]},"mask-no-clip"],"mask-composite":[{mask:["add","subtract","intersect","exclude"]}],"mask-image-linear-pos":[{"mask-linear":[Nr]}],"mask-image-linear-from-pos":[{"mask-linear-from":D()}],"mask-image-linear-to-pos":[{"mask-linear-to":D()}],"mask-image-linear-from-color":[{"mask-linear-from":A()}],"mask-image-linear-to-color":[{"mask-linear-to":A()}],"mask-image-t-from-pos":[{"mask-t-from":D()}],"mask-image-t-to-pos":[{"mask-t-to":D()}],"mask-image-t-from-color":[{"mask-t-from":A()}],"mask-image-t-to-color":[{"mask-t-to":A()}],"mask-image-r-from-pos":[{"mask-r-from":D()}],"mask-image-r-to-pos":[{"mask-r-to":D()}],"mask-image-r-from-color":[{"mask-r-from":A()}],"mask-image-r-to-color":[{"mask-r-to":A()}],"mask-image-b-from-pos":[{"mask-b-from":D()}],"mask-image-b-to-pos":[{"mask-b-to":D()}],"mask-image-b-from-color":[{"mask-b-from":A()}],"mask-image-b-to-color":[{"mask-b-to":A()}],"mask-image-l-from-pos":[{"mask-l-from":D()}],"mask-image-l-to-pos":[{"mask-l-to":D()}],"mask-image-l-from-color":[{"mask-l-from":A()}],"mask-image-l-to-color":[{"mask-l-to":A()}],"mask-image-x-from-pos":[{"mask-x-from":D()}],"mask-image-x-to-pos":[{"mask-x-to":D()}],"mask-image-x-from-color":[{"mask-x-from":A()}],"mask-image-x-to-color":[{"mask-x-to":A()}],"mask-image-y-from-pos":[{"mask-y-from":D()}],"mask-image-y-to-pos":[{"mask-y-to":D()}],"mask-image-y-from-color":[{"mask-y-from":A()}],"mask-image-y-to-color":[{"mask-y-to":A()}],"mask-image-radial":[{"mask-radial":[Hr,Or]}],"mask-image-radial-from-pos":[{"mask-radial-from":D()}],"mask-image-radial-to-pos":[{"mask-radial-to":D()}],"mask-image-radial-from-color":[{"mask-radial-from":A()}],"mask-image-radial-to-color":[{"mask-radial-to":A()}],"mask-image-radial-shape":[{"mask-radial":["circle","ellipse"]}],"mask-image-radial-size":[{"mask-radial":[{closest:["side","corner"],farthest:["side","corner"]}]}],"mask-image-radial-pos":[{"mask-radial-at":["center","top","bottom","left","right","top-left","left-top","top-right","right-top","bottom-right","right-bottom","bottom-left","left-bottom"]}],"mask-image-conic-pos":[{"mask-conic":[Nr]}],"mask-image-conic-from-pos":[{"mask-conic-from":D()}],"mask-image-conic-to-pos":[{"mask-conic-to":D()}],"mask-image-conic-from-color":[{"mask-conic-from":A()}],"mask-image-conic-to-color":[{"mask-conic-to":A()}],"mask-mode":[{mask:["alpha","luminance","match"]}],"mask-origin":[{"mask-origin":["border","padding","content","fill","stroke","view"]}],"mask-position":[{mask:M()}],"mask-repeat":[{mask:["no-repeat",{repeat:["","x","y","space","round"]}]}],"mask-size":[{mask:$()}],"mask-type":[{"mask-type":["alpha","luminance"]}],"mask-image":[{mask:["none",Hr,Or]}],filter:[{filter:["","none",Hr,Or]}],blur:[{blur:j()}],brightness:[{brightness:[Nr,Hr,Or]}],contrast:[{contrast:[Nr,Hr,Or]}],"drop-shadow":[{"drop-shadow":["","none",h,Yr,Ur]}],"drop-shadow-color":[{"drop-shadow":A()}],grayscale:[{grayscale:["",Nr,Hr,Or]}],"hue-rotate":[{"hue-rotate":[Nr,Hr,Or]}],invert:[{invert:["",Nr,Hr,Or]}],saturate:[{saturate:[Nr,Hr,Or]}],sepia:[{sepia:["",Nr,Hr,Or]}],"backdrop-filter":[{"backdrop-filter":["","none",Hr,Or]}],"backdrop-blur":[{"backdrop-blur":j()}],"backdrop-brightness":[{"backdrop-brightness":[Nr,Hr,Or]}],"backdrop-contrast":[{"backdrop-contrast":[Nr,Hr,Or]}],"backdrop-grayscale":[{"backdrop-grayscale":["",Nr,Hr,Or]}],"backdrop-hue-rotate":[{"backdrop-hue-rotate":[Nr,Hr,Or]}],"backdrop-invert":[{"backdrop-invert":["",Nr,Hr,Or]}],"backdrop-opacity":[{"backdrop-opacity":[Nr,Hr,Or]}],"backdrop-saturate":[{"backdrop-saturate":[Nr,Hr,Or]}],"backdrop-sepia":[{"backdrop-sepia":["",Nr,Hr,Or]}],"border-collapse":[{border:["collapse","separate"]}],"border-spacing":[{"border-spacing":x()}],"border-spacing-x":[{"border-spacing-x":x()}],"border-spacing-y":[{"border-spacing-y":x()}],"table-layout":[{table:["auto","fixed"]}],caption:[{caption:["top","bottom"]}],transition:[{transition:["","all","colors","opacity","shadow","transform","none",Hr,Or]}],"transition-behavior":[{transition:["normal","discrete"]}],duration:[{duration:[Nr,"initial",Hr,Or]}],ease:[{ease:["linear","initial",v,Hr,Or]}],delay:[{delay:[Nr,Hr,Or]}],animate:[{animate:["none",w,Hr,Or]}],backface:[{backface:["hidden","visible"]}],perspective:[{perspective:[f,Hr,Or]}],"perspective-origin":[{"perspective-origin":b()}],rotate:[{rotate:L()}],"rotate-x":[{"rotate-x":L()}],"rotate-y":[{"rotate-y":L()}],"rotate-z":[{"rotate-z":L()}],scale:[{scale:P()}],"scale-x":[{"scale-x":P()}],"scale-y":[{"scale-y":P()}],"scale-z":[{"scale-z":P()}],"scale-3d":["scale-3d"],skew:[{skew:I()}],"skew-x":[{"skew-x":I()}],"skew-y":[{"skew-y":I()}],transform:[{transform:[Hr,Or,"","none","gpu","cpu"]}],"transform-origin":[{origin:b()}],"transform-style":[{transform:["3d","flat"]}],translate:[{translate:W()}],"translate-x":[{"translate-x":W()}],"translate-y":[{"translate-y":W()}],"translate-z":[{"translate-z":W()}],"translate-none":["translate-none"],accent:[{accent:A()}],appearance:[{appearance:["none","auto"]}],"caret-color":[{caret:A()}],"color-scheme":[{scheme:["normal","dark","light","light-dark","only-dark","only-light"]}],cursor:[{cursor:["auto","default","pointer","wait","text","move","help","not-allowed","none","context-menu","progress","cell","crosshair","vertical-text","alias","copy","no-drop","grab","grabbing","all-scroll","col-resize","row-resize","n-resize","e-resize","s-resize","w-resize","ne-resize","nw-resize","se-resize","sw-resize","ew-resize","ns-resize","nesw-resize","nwse-resize","zoom-in","zoom-out",Hr,Or]}],"field-sizing":[{"field-sizing":["fixed","content"]}],"pointer-events":[{"pointer-events":["auto","none"]}],resize:[{resize:["none","","y","x"]}],"scroll-behavior":[{scroll:["auto","smooth"]}],"scroll-m":[{"scroll-m":x()}],"scroll-mx":[{"scroll-mx":x()}],"scroll-my":[{"scroll-my":x()}],"scroll-ms":[{"scroll-ms":x()}],"scroll-me":[{"scroll-me":x()}],"scroll-mbs":[{"scroll-mbs":x()}],"scroll-mbe":[{"scroll-mbe":x()}],"scroll-mt":[{"scroll-mt":x()}],"scroll-mr":[{"scroll-mr":x()}],"scroll-mb":[{"scroll-mb":x()}],"scroll-ml":[{"scroll-ml":x()}],"scroll-p":[{"scroll-p":x()}],"scroll-px":[{"scroll-px":x()}],"scroll-py":[{"scroll-py":x()}],"scroll-ps":[{"scroll-ps":x()}],"scroll-pe":[{"scroll-pe":x()}],"scroll-pbs":[{"scroll-pbs":x()}],"scroll-pbe":[{"scroll-pbe":x()}],"scroll-pt":[{"scroll-pt":x()}],"scroll-pr":[{"scroll-pr":x()}],"scroll-pb":[{"scroll-pb":x()}],"scroll-pl":[{"scroll-pl":x()}],"snap-align":[{snap:["start","end","center","align-none"]}],"snap-stop":[{snap:["normal","always"]}],"snap-type":[{snap:["none","x","y","both"]}],"snap-strictness":[{snap:["mandatory","proximity"]}],touch:[{touch:["auto","none","manipulation"]}],"touch-x":[{"touch-pan":["x","left","right"]}],"touch-y":[{"touch-pan":["y","up","down"]}],"touch-pz":["touch-pinch-zoom"],select:[{select:["none","text","all","auto"]}],"will-change":[{"will-change":["auto","scroll","contents","transform",Hr,Or]}],fill:[{fill:["none",...A()]}],"stroke-w":[{stroke:[Nr,Br,Dr,jr]}],stroke:[{stroke:["none",...A()]}],"forced-color-adjust":[{"forced-color-adjust":["auto","none"]}]},conflictingClassGroups:{overflow:["overflow-x","overflow-y"],overscroll:["overscroll-x","overscroll-y"],inset:["inset-x","inset-y","inset-bs","inset-be","start","end","top","right","bottom","left"],"inset-x":["right","left"],"inset-y":["top","bottom"],flex:["basis","grow","shrink"],gap:["gap-x","gap-y"],p:["px","py","ps","pe","pbs","pbe","pt","pr","pb","pl"],px:["pr","pl"],py:["pt","pb"],m:["mx","my","ms","me","mbs","mbe","mt","mr","mb","ml"],mx:["mr","ml"],my:["mt","mb"],size:["w","h"],"font-size":["leading"],"fvn-normal":["fvn-ordinal","fvn-slashed-zero","fvn-figure","fvn-spacing","fvn-fraction"],"fvn-ordinal":["fvn-normal"],"fvn-slashed-zero":["fvn-normal"],"fvn-figure":["fvn-normal"],"fvn-spacing":["fvn-normal"],"fvn-fraction":["fvn-normal"],"line-clamp":["display","overflow"],rounded:["rounded-s","rounded-e","rounded-t","rounded-r","rounded-b","rounded-l","rounded-ss","rounded-se","rounded-ee","rounded-es","rounded-tl","rounded-tr","rounded-br","rounded-bl"],"rounded-s":["rounded-ss","rounded-es"],"rounded-e":["rounded-se","rounded-ee"],"rounded-t":["rounded-tl","rounded-tr"],"rounded-r":["rounded-tr","rounded-br"],"rounded-b":["rounded-br","rounded-bl"],"rounded-l":["rounded-tl","rounded-bl"],"border-spacing":["border-spacing-x","border-spacing-y"],"border-w":["border-w-x","border-w-y","border-w-s","border-w-e","border-w-bs","border-w-be","border-w-t","border-w-r","border-w-b","border-w-l"],"border-w-x":["border-w-r","border-w-l"],"border-w-y":["border-w-t","border-w-b"],"border-color":["border-color-x","border-color-y","border-color-s","border-color-e","border-color-bs","border-color-be","border-color-t","border-color-r","border-color-b","border-color-l"],"border-color-x":["border-color-r","border-color-l"],"border-color-y":["border-color-t","border-color-b"],translate:["translate-x","translate-y","translate-none"],"translate-none":["translate","translate-x","translate-y","translate-z"],"scroll-m":["scroll-mx","scroll-my","scroll-ms","scroll-me","scroll-mbs","scroll-mbe","scroll-mt","scroll-mr","scroll-mb","scroll-ml"],"scroll-mx":["scroll-mr","scroll-ml"],"scroll-my":["scroll-mt","scroll-mb"],"scroll-p":["scroll-px","scroll-py","scroll-ps","scroll-pe","scroll-pbs","scroll-pbe","scroll-pt","scroll-pr","scroll-pb","scroll-pl"],"scroll-px":["scroll-pr","scroll-pl"],"scroll-py":["scroll-pt","scroll-pb"],touch:["touch-x","touch-y","touch-pz"],"touch-x":["touch"],"touch-y":["touch"],"touch-pz":["touch"]},conflictingClassGroupModifiers:{"font-size":["leading"]},orderSensitiveModifiers:["*","**","after","backdrop","before","details-content","file","first-letter","first-line","marker","placeholder","selection"]}}),lo=(...e)=>so(function(){for(var e,t,n=0,r="",o=arguments.length;n<o;n++)(e=arguments[n])&&(t=Bn(e))&&(r&&(r+=" "),r+=t);return r}(e)),co=(e,t)=>{let n=0;return r=>{const o=Date.now();if(o-n>=t)return n=o,e(r)}},uo=e=>{if(!ie)return null;try{const t=localStorage.getItem(e);return t?JSON.parse(t):null}catch{return null}},po=(e,t)=>{if(ie)try{window.localStorage.setItem(e,JSON.stringify(t))}catch{}},ho=e=>{if(ie)try{window.localStorage.removeItem(e)}catch{}},mo=e=>{if(!e)return{name:"Unknown",wrappers:[],wrapperTypes:[]};const{tag:t,type:n,elementType:r}=e;let o=J(n);const i=[],a=[];if(q(e)||15===t||14===t||(null==n?void 0:n.$$typeof)===Symbol.for("react.memo")||(null==r?void 0:r.$$typeof)===Symbol.for("react.memo")){const t=q(e);a.push({type:"memo",title:t?"This component has been auto-memoized by the React Compiler.":"Memoized component that skips re-renders if props are the same",compiler:t})}if(24===t&&a.push({type:"lazy",title:"Lazily loaded component that supports code splitting"}),13===t&&a.push({type:"suspense",title:"Component that can suspend while content is loading"}),12===t&&a.push({type:"profiler",title:"Component that measures rendering performance"}),"string"==typeof o){const e=/^(\w+)\((.*)\)$/;let t=o;for(;e.test(t);){const n=t.match(e);if(!(null==n?void 0:n[1])||!(null==n?void 0:n[2]))break;i.unshift(n[1]),t=n[2]}o=t}return{name:o||"Unknown",wrappers:i,wrapperTypes:a}},fo=e=>"number"==typeof e&&Number.isFinite(e)&&e>=0,go=e=>Boolean(e)&&"object"==typeof e&&!Array.isArray(e),vo=()=>{const e=Pu.options.value.safeArea;if(fo(e))return{top:e,right:e,bottom:e,left:e};if(go(e)){const t=e.top,n=e.right,r=e.bottom,o=e.left;return{top:fo(t)?t:Dn,right:fo(n)?n:Dn,bottom:fo(r)?r:Dn,left:fo(o)?o:Dn}}return{top:Dn,right:Dn,bottom:Dn,left:Dn}},wo=_t(!1),bo=_t(null),xo=()=>({corner:"bottom-right",dimensions:{isFullWidth:!1,isFullHeight:!1,width:jn,height:Ln,position:{x:Dn,y:Dn}},lastDimensions:{isFullWidth:!1,isFullHeight:!1,width:jn,height:Ln,position:{x:Dn,y:Dn}},componentsTree:{width:In}}),yo=_t((()=>{var e,t,n,r,o;const i=xo(),a=uo(Wn);return a?{corner:null!=(e=a.corner)?e:i.corner,dimensions:null!=(t=a.dimensions)?t:i.dimensions,lastDimensions:null!=(r=null!=(n=a.lastDimensions)?n:a.dimensions)?r:i.lastDimensions,componentsTree:null!=(o=a.componentsTree)?o:i.componentsTree}:(po(Wn,{corner:i.corner,dimensions:i.dimensions,lastDimensions:i.lastDimensions,componentsTree:i.componentsTree}),i)})()),ko=()=>{if(!ie)return;const{dimensions:e}=yo.value,{width:t,height:n,position:r}=e,o=vo();yo.value={...yo.value,dimensions:{isFullWidth:t>=window.innerWidth-o.left-o.right,isFullHeight:n>=window.innerHeight-o.top-o.bottom,width:t,height:n,position:r}}},_o=_t({view:"none"}),No=uo(Un),So=_t(null!=No?No:null);function Co(){return!1}function To(e){function t(t){return this.shouldComponentUpdate=Co,pe(e,t)}return t.displayName=`Memo(${e.displayName||e.name})`,t.prototype.isReactComponent=!0,t._forwarded=!0,t}var Eo={updates:[],currentFiber:null,totalUpdates:0,windowOffset:0,currentIndex:0,isViewingHistory:!1,latestFiber:null,isVisible:!1,playbackSpeed:1},zo=_t(Eo),Ao=_t(0),Mo=[],$o=null,Fo=(e,t)=>{if(Mo.push({update:e,fiber:t}),!$o){const e=()=>{(()=>{if(0===Mo.length)return;const e=[...Mo],{updates:t,totalUpdates:n,currentIndex:r,isViewingHistory:o}=zo.value,i=[...t];let a=n;for(const{update:t}of e)i.length>=1e3&&i.shift(),i.push(t),a++;const s=Math.max(0,a-1e3);let l;l=o?r===n-1?i.length-1:0===r?0:0===s?r:r-1:i.length-1;const c=e[e.length-1];zo.value={...zo.value,latestFiber:c.fiber,updates:i,totalUpdates:a,windowOffset:s,currentIndex:l,isViewingHistory:o},Mo=Mo.slice(e.length)})(),$o=null,Mo.length>0&&($o=setTimeout(e,96))};$o=setTimeout(e,96)}},Ro=()=>{$o&&(clearTimeout($o),$o=null),Mo=[],zo.value=Eo},Oo=_t({query:"",matches:[],currentMatchIndex:-1}),Do=_t(!1),jo=(e,t=0,n=null)=>e.reduce((e,r,o)=>{var i,a;const s=r.element?(e=>{var t;const n=[];let r=e;for(;r;){const e=r.elementType,o="function"==typeof e?e.displayName||e.name:"string"==typeof e?e:"Unknown",i=void 0!==r.index?`[${r.index}]`:"";n.unshift(`${o}${i}`),r=null!=(t=r.return)?t:null}return n.join("::")})(r.fiber):`${n}-${o}`,l=(null==(i=r.fiber)?void 0:i.type)?ma(r.fiber):void 0,c={...r,depth:t,nodeId:s,parentId:n,fiber:r.fiber,renderData:l};return e.push(c),(null==(a=r.children)?void 0:a.length)&&e.push(...jo(r.children,t+1,s)),e},[]),Lo=["memo","forwardRef","lazy","suspense"],Po=e=>{const t=e.match(/\[(.*?)\]/);if(!t)return null;const n=[],r=t[1].split(",");for(const e of r){const t=e.trim().toLowerCase();t&&n.push(t)}return n},Io=(e,t)=>{if(0===e.length)return!0;if(!t.length)return!1;for(const n of e){let e=!1;for(const r of t)if(r.type.toLowerCase().includes(n)){e=!0;break}if(!e)return!1}return!0},Wo=e=>e>0?e<.1-Number.EPSILON?"< 0.1":e<1e3?Number(e.toFixed(1)).toString():`${(e/1e3).toFixed(1)}k`:"0",Uo=({node:e,nodeIndex:t,hasChildren:n,isCollapsed:r,handleTreeNodeClick:o,handleTreeNodeToggle:i,searchValue:a})=>{var s,l,c;const d=Xe(null),u=Xe(null!=(l=null==(s=e.renderData)?void 0:s.renderCount)?l:0),{highlightedText:p,typeHighlight:h}=((e,t)=>Ke(()=>{const{query:n,matches:r}=t,o=r.some(t=>t.nodeId===e.nodeId),i=Po(n)||[],a=n?n.replace(/\[.*?\]/,"").trim():"";if(!n||!o)return{highlightedText:Rn("span",{className:"truncate",children:e.label}),typeHighlight:!1};let s=!0;if(i.length>0)if(e.fiber){const{wrapperTypes:t}=mo(e.fiber);s=Io(i,t)}else s=!1;let l=Rn("span",{className:"truncate",children:e.label});if(a)try{if(a.startsWith("/")&&a.endsWith("/")){const t=a.slice(1,-1),n=new RegExp(`(${t})`,"i"),r=e.label.split(n);l=Rn("span",{className:"tree-node-search-highlight",children:r.map((t,o)=>n.test(t)?Rn("span",{className:lo("regex",{start:n.test(t)&&0===o,middle:n.test(t)&&o%2==1,end:n.test(t)&&o===r.length-1,"!ml-0":1===o}),children:t},`${e.nodeId}-${t}`):t)})}else{const t=e.label.toLowerCase(),n=a.toLowerCase(),r=t.indexOf(n);r>=0&&(l=Rn("span",{className:"tree-node-search-highlight",children:[e.label.slice(0,r),Rn("span",{className:"single",children:e.label.slice(r,r+a.length)}),e.label.slice(r+a.length)]}))}}catch{}return{highlightedText:l,typeHighlight:s&&i.length>0}},[e.label,e.nodeId,e.fiber,t]))(e,a);Je(()=>{var t;const n=null==(t=e.renderData)?void 0:t.renderCount,r=d.current;r&&u.current&&n&&u.current!==n&&(r.classList.remove("count-flash"),r.offsetWidth,r.classList.add("count-flash"),u.current=n)},[null==(c=e.renderData)?void 0:c.renderCount]);const m=Ke(()=>{if(!e.renderData)return null;const{selfTime:t,totalTime:n,renderCount:r}=e.renderData;return r?Rn("span",{className:lo("flex items-center gap-x-0.5 ml-1.5","text-[10px] text-neutral-400"),children:Rn("span",{ref:d,title:`Self time: ${Wo(t)}ms\nTotal time: ${Wo(n)}ms`,className:"count-badge",children:["×",r]})}):null},[e.renderData]),f=Ke(()=>{if(!e.fiber)return null;const{wrapperTypes:t}=mo(e.fiber),n=t[0];return Rn("span",{className:lo("flex items-center gap-x-1","text-[10px] text-neutral-400 tracking-wide","overflow-hidden"),children:[n&&Rn(me,{children:[Rn("span",{title:null==n?void 0:n.title,className:lo("rounded py-[1px] px-1","bg-neutral-700 text-neutral-300","truncate","memo"===n.type&&"bg-[#8e61e3] text-white",h&&"bg-yellow-300 text-black"),children:n.type},n.type),n.compiler&&Rn("span",{className:"text-yellow-300 ml-1",children:"✨"})]}),t.length>1&&`×${t.length}`,m]})},[e.fiber,h,m]);return Rn("button",{type:"button",title:e.title,"data-index":t,className:lo("flex items-center gap-x-1","pl-1 pr-2","w-full h-7","text-left","rounded","cursor-pointer select-none"),onClick:o,children:[Rn("button",{type:"button","data-index":t,onClick:i,className:lo("w-6 h-6 flex items-center justify-center","text-left"),children:n&&Rn(On,{name:"icon-chevron-right",size:12,className:lo("transition-transform",!r&&"rotate-90")})}),p,f]})},Ho=()=>{const e=Xe(null),t=Xe(null),n=Xe(null),r=Xe(null),o=Xe(null),i=Xe(0),a=Xe(!1),s=Xe(!1),l=Xe(null),[c,d]=Ge([]),[u,p]=Ge(new Set),[h,m]=Ge(void 0),[f,g]=Ge(Oo.value),v=Ke(()=>{const e=[],t=c,n=new Map(t.map(e=>[e.nodeId,e]));for(const r of t){let t=!0,o=r;for(;o.parentId;){const e=n.get(o.parentId);if(!e)break;if(u.has(e.nodeId)){t=!1;break}o=e}t&&e.push(r)}return e},[u,c]),w=28,{virtualItems:b,totalSize:x}=(e=>{const{count:t,getScrollElement:n,estimateSize:r,overscan:o=5}=e,[i,a]=Ge(0),[s,l]=Ge(0),c=Xe(),d=Xe(null),u=Xe(null),p=r(),h=Ze(e=>{var t,n;if(!d.current)return;const r=null!=(n=null==(t=null==e?void 0:e[0])?void 0:t.contentRect.height)?n:d.current.getBoundingClientRect().height;l(r)},[]),m=Ze(()=>{null!==u.current&&cancelAnimationFrame(u.current),u.current=requestAnimationFrame(()=>{h(),u.current=null})},[h]);Je(()=>{const e=n();if(!e)return;d.current=e;const t=()=>{d.current&&a(d.current.scrollTop)};h(),c.current||(c.current=new ResizeObserver(()=>{m()})),c.current.observe(e),e.addEventListener("scroll",t,{passive:!0});const r=new MutationObserver(m);return r.observe(e,{attributes:!0,childList:!0,subtree:!0}),()=>{e.removeEventListener("scroll",t),c.current&&c.current.disconnect(),r.disconnect(),null!==u.current&&cancelAnimationFrame(u.current)}},[n,h,m]);const f=Ke(()=>{const e=Math.floor(i/p),n=Math.ceil(s/p);return{start:Math.max(0,e-o),end:Math.min(t,e+n+o)}},[i,p,s,t,o]);return{virtualItems:Ke(()=>{const e=[];for(let t=f.start;t<f.end;t++)e.push({key:t,index:t,start:t*p});return e},[f,p]),totalSize:t*p,scrollTop:i,containerHeight:s}})({count:v.length,getScrollElement:()=>e.current,estimateSize:()=>w,overscan:5}),y=Ze(t=>{var n;a.current=!0,null==(n=r.current)||n.blur(),Do.value=!0;const{parentCompositeFiber:o}=yi(t);if(!o)return;Lu.inspectState.value={kind:"focused",focusedDomElement:t,fiber:o};const i=v.findIndex(e=>e.element===t);if(-1!==i){m(i);const t=i*w,n=e.current;if(n){const e=n.clientHeight,r=n.scrollTop;(t<r||t+w>r+e)&&n.scrollTo({top:Math.max(0,t-e/2),behavior:"instant"})}}},[v]),k=Ze(e=>{const t=e.currentTarget,n=Number(t.dataset.index);if(Number.isNaN(n))return;const r=v[n].element;r&&y(r)},[v,y]),_=Ze(e=>{p(t=>{const n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},[]),N=Ze(e=>{e.stopPropagation();const t=e.target,n=Number(t.dataset.index);if(Number.isNaN(n))return;const r=v[n].nodeId;_(r)},[v,_]),S=Ze(t=>{var r,o,i,a,s;null==(r=n.current)||r.classList.remove("!border-red-500");const l=[];if(!t)return void(Oo.value={query:t,matches:l,currentMatchIndex:-1});if(t.includes("[")&&!t.includes("]")&&t.length>t.indexOf("[")+1)return void(null==(o=n.current)||o.classList.add("!border-red-500"));const d=Po(t)||[];if(t.includes("[")&&!(e=>{if(0===e.length)return!1;for(const t of e){let e=!1;for(const n of Lo)if(n.toLowerCase().includes(t)){e=!0;break}if(!e)return!1}return!0})(d))return void(null==(i=n.current)||i.classList.add("!border-red-500"));const u=t.replace(/\[.*?\]/,"").trim(),p=/^\/.*\/$/.test(u);let h=e=>!1;if(u.startsWith("/")&&!p&&u.length>1)null==(a=n.current)||a.classList.add("!border-red-500");else{if(p)try{const e=u.slice(1,-1),t=new RegExp(e,"i");h=e=>t.test(e)}catch{return void(null==(s=n.current)||s.classList.add("!border-red-500"))}else if(u){const e=u.toLowerCase();h=t=>t.toLowerCase().includes(e)}for(const e of c){let t=!0;if(u&&(t=h(e.label)),t&&d.length>0)if(e.fiber){const{wrapperTypes:n}=mo(e.fiber);t=Io(d,n)}else t=!1;t&&l.push(e)}if(Oo.value={query:t,matches:l,currentMatchIndex:l.length>0?0:-1},l.length>0){const t=l[0],n=v.findIndex(e=>e.nodeId===t.nodeId);if(-1!==n){const t=n*w,r=e.current;if(r){const e=r.clientHeight;r.scrollTo({top:Math.max(0,t-e/2),behavior:"instant"})}}}}},[c,v]),C=Ze(e=>{const t=e.currentTarget;t&&S(t.value)},[S]),T=Ze(t=>{const{matches:n,currentMatchIndex:r}=Oo.value;if(0===n.length)return;const o="next"===t?(r+1)%n.length:(r-1+n.length)%n.length;Oo.value={...Oo.value,currentMatchIndex:o};const i=n[o],a=v.findIndex(e=>e.nodeId===i.nodeId);if(-1!==a){m(a);const t=a*w,n=e.current;if(n){const e=n.clientHeight;n.scrollTo({top:Math.max(0,t-e/2),behavior:"instant"})}}},[v]),E=Ze(n=>{if(t.current&&(t.current.style.width=`${n}px`),e.current){e.current.style.width=`${n}px`;const t=((e,t)=>{if(t<=0)return 24;const n=Math.max(0,e-In);if(n<24)return 0;const r=Math.min(.3*n,24*t)/t;return Math.max(0,Math.min(24,r))})(n,i.current);e.current.style.setProperty("--indentation-size",`${t}px`)}},[]),z=Ze(e=>{if(!l.current)return;const t=yo.value.dimensions.width,n=Math.floor(t-120);l.current.classList.remove("cursor-ew-resize","cursor-w-resize","cursor-e-resize"),e<=In?l.current.classList.add("cursor-w-resize"):e>=n?l.current.classList.add("cursor-e-resize"):l.current.classList.add("cursor-ew-resize")},[]),A=Ze(t=>{if(t.preventDefault(),t.stopPropagation(),!e.current)return;e.current.style.setProperty("pointer-events","none"),s.current=!0;const n=t.clientX,r=e.current.offsetWidth,o=yo.value.dimensions.width,i=Math.floor(o-120);z(r);const a=e=>{const t=n-e.clientX,o=r+t;z(o);const a=Math.min(i,Math.max(In,o));E(a)},l=()=>{e.current&&(e.current.style.removeProperty("pointer-events"),document.removeEventListener("pointermove",a),document.removeEventListener("pointerup",l),yo.value={...yo.value,componentsTree:{...yo.value.componentsTree,width:e.current.offsetWidth}},po(Wn,yo.value),s.current=!1)};document.addEventListener("pointermove",a),document.addEventListener("pointerup",l)},[E,z]);Je(()=>{if(!e.current)return;const t=e.current.offsetWidth;return z(t),yo.subscribe(()=>{e.current&&z(e.current.offsetWidth)})},[z]);const M=Ze(()=>{a.current=!1},[]);return Je(()=>{let t=!0;const n=()=>{const n=o.current;if(!n)return;const r=(e=>{const t=new Map,n=[];for(const{element:n,name:r,fiber:o}of e){if(!n)continue;let e=r;const{name:i,wrappers:a}=mo(o);i&&(e=a.length>0?`${a.join("(")}(${i})${")".repeat(a.length)}`:i),t.set(n,{label:i||r,title:e,children:[],element:n,fiber:o})}for(const{element:r,depth:o}of e){if(!r)continue;const e=t.get(r);if(e)if(0===o)n.push(e);else{let n=r.parentElement;for(;n;){const r=t.get(n);if(r){r.children=r.children||[],r.children.push(e);break}n=n.parentElement}}}return n})(Ci());if(r.length>0){const o=jo(r),a=o.reduce((e,t)=>Math.max(e,t.depth),0);if(i.current=a,E(yo.value.componentsTree.width),d(o),t){t=!1;const r=o.findIndex(e=>e.element===n);if(-1!==r){const t=r*w,n=e.current;n&&setTimeout(()=>{n.scrollTo({top:t,behavior:"instant"})},96)}}}},r=Lu.inspectState.subscribe(e=>{if("focused"===e.kind){if(Do.value)return;S(""),o.current=e.focusedDomElement,n()}});let a=0;const l=Ao.subscribe(()=>{if("focused"===Lu.inspectState.value.kind){if(cancelAnimationFrame(a),s.current)return;a=requestAnimationFrame(()=>{Do.value=!1,n()})}});return()=>{r(),l(),Oo.value={query:"",matches:[],currentMatchIndex:-1}}},[]),Je(()=>{const e=e=>{if(a.current&&h)switch(e.key){case"ArrowUp":if(e.preventDefault(),e.stopPropagation(),h>0){const e=v[h-1];(null==e?void 0:e.element)&&y(e.element)}return;case"ArrowDown":if(e.preventDefault(),e.stopPropagation(),h<v.length-1){const e=v[h+1];(null==e?void 0:e.element)&&y(e.element)}return;case"ArrowLeft":{e.preventDefault(),e.stopPropagation();const t=v[h];return void((null==t?void 0:t.nodeId)&&_(t.nodeId))}case"ArrowRight":{e.preventDefault(),e.stopPropagation();const t=v[h];return void((null==t?void 0:t.nodeId)&&_(t.nodeId))}}};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}},[h,v,y,_]),Je(()=>Oo.subscribe(g),[]),Je(()=>yo.subscribe(e=>{var n;null==(n=t.current)||n.style.setProperty("transition","width 0.1s"),E(e.componentsTree.width),setTimeout(()=>{var e;null==(e=t.current)||e.style.removeProperty("transition")},500)}),[]),Rn("div",{className:"react-scan-components-tree flex",children:[Rn("div",{ref:l,onPointerDown:A,className:"relative resize-v-line",children:Rn("span",{children:Rn(On,{name:"icon-ellipsis",size:18})})}),Rn("div",{ref:t,className:"flex flex-col h-full",children:[Rn("div",{className:"p-2 border-b border-[#1e1e1e]",children:Rn("div",{ref:n,title:'Search components by:\n\n• Name (e.g., "Button") — Case insensitive, matches any part\n\n• Regular Expression (e.g., "/^Button/") — Use forward slashes\n\n• Wrapper Type (e.g., "[memo,forwardRef]"):\n   - Available types: memo, forwardRef, lazy, suspense\n   - Matches any part of type name (e.g., "mo" matches "memo")\n   - Use commas for multiple types\n\n• Combined Search:\n   - Mix name/regex with type: "button [for]"\n   - Will match components satisfying both conditions\n\n• Navigation:\n   - Enter → Next match\n   - Shift + Enter → Previous match\n   - Cmd/Ctrl + Enter → Select and focus match\n',className:lo("relative","flex items-center gap-x-1 px-2","rounded","border border-transparent","focus-within:border-[#454545]","bg-[#1e1e1e] text-neutral-300","transition-colors","whitespace-nowrap","overflow-hidden"),children:[Rn(On,{name:"icon-search",size:12,className:" text-neutral-500"}),Rn("div",{className:"relative flex-1 h-7 overflow-hidden",children:Rn("input",{ref:r,type:"text",value:Oo.value.query,onClick:e=>{e.stopPropagation(),e.currentTarget.focus()},onPointerDown:e=>{e.stopPropagation()},onKeyDown:e=>{"Escape"===e.key&&e.currentTarget.blur(),Oo.value.matches.length&&("Enter"===e.key&&e.shiftKey?T("prev"):"Enter"===e.key&&(e.metaKey||e.ctrlKey?(e.preventDefault(),e.stopPropagation(),y(Oo.value.matches[Oo.value.currentMatchIndex].element),e.currentTarget.focus()):T("next")))},onChange:C,className:"absolute inset-y-0 inset-x-1",placeholder:"Component name, /regex/, or [type]"})}),Oo.value.query?Rn(me,{children:[Rn("span",{className:"flex items-center gap-x-0.5 text-xs text-neutral-500",children:[Oo.value.currentMatchIndex+1,"|",Oo.value.matches.length]}),!!Oo.value.matches.length&&Rn(me,{children:[Rn("button",{type:"button",onClick:e=>{e.stopPropagation(),T("prev")},className:"button rounded w-4 h-4 flex items-center justify-center text-neutral-400 hover:text-neutral-300",children:Rn(On,{name:"icon-chevron-right",className:"-rotate-90",size:12})}),Rn("button",{type:"button",onClick:e=>{e.stopPropagation(),T("next")},className:"button rounded w-4 h-4 flex items-center justify-center text-neutral-400 hover:text-neutral-300",children:Rn(On,{name:"icon-chevron-right",className:"rotate-90",size:12})})]}),Rn("button",{type:"button",onClick:e=>{e.stopPropagation(),S("")},className:"button rounded w-4 h-4 flex items-center justify-center text-neutral-400 hover:text-neutral-300",children:Rn(On,{name:"icon-close",size:12})})]}):!!c.length&&Rn("span",{className:"text-xs text-neutral-500",children:c.length})]})}),Rn("div",{className:"flex-1 overflow-hidden",children:Rn("div",{ref:e,onPointerLeave:M,className:"tree h-full overflow-auto will-change-transform",children:Rn("div",{className:"relative w-full",style:{height:x},children:b.map(e=>{var t;const n=v[e.index];if(!n)return null;const r="focused"===Lu.inspectState.value.kind&&n.element===Lu.inspectState.value.focusedDomElement,o=e.index===h;return Rn("div",{className:lo("absolute left-0 w-full overflow-hidden","text-neutral-400 hover:text-neutral-300","bg-transparent hover:bg-[#5f3f9a]/20",(r||o)&&"text-neutral-300 bg-[#5f3f9a]/40 hover:bg-[#5f3f9a]/40"),style:{top:e.start,height:w},children:Rn("div",{className:"w-full h-full",style:{paddingLeft:`calc(${n.depth} * var(--indentation-size))`},children:Rn(Uo,{node:n,nodeIndex:e.index,hasChildren:!!(null==(t=n.children)?void 0:t.length),isCollapsed:u.has(n.nodeId),handleTreeNodeClick:k,handleTreeNodeToggle:N,searchValue:f})})},n.nodeId)})})})})]})]})},Bo=new WeakMap,Vo={activeFlashes:new Map,create(e){const t=e.querySelector(".react-scan-flash-overlay"),n=t instanceof HTMLElement?t:(()=>{const t=document.createElement("div");t.className="react-scan-flash-overlay",e.appendChild(t);const n=((e,t)=>{const n=t.bind(null,e);return document.addEventListener("scroll",n,{passive:!0,capture:!0}),()=>{document.removeEventListener("scroll",n,{capture:!0})}})(e,()=>{e.querySelector(".react-scan-flash-overlay")&&this.create(e)});return this.activeFlashes.set(e,{element:e,overlay:t,scrollCleanup:n}),t})(),r=Bo.get(n);r&&(clearTimeout(r),Bo.delete(n)),requestAnimationFrame(()=>{n.style.transition="none",n.style.opacity="0.9";const t=setTimeout(()=>{n.style.transition="opacity 150ms ease-out",n.style.opacity="0";const t=setTimeout(()=>{n.parentNode&&n.parentNode.removeChild(n);const t=this.activeFlashes.get(e);(null==t?void 0:t.scrollCleanup)&&t.scrollCleanup(),this.activeFlashes.delete(e),Bo.delete(n)},150);Bo.set(n,t)},300);Bo.set(n,t)})},cleanup(e){const t=this.activeFlashes.get(e);if(t){const n=Bo.get(t.overlay);n&&(clearTimeout(n),Bo.delete(t.overlay)),t.overlay.parentNode&&t.overlay.parentNode.removeChild(t.overlay),t.scrollCleanup&&t.scrollCleanup(),this.activeFlashes.delete(e)}},cleanupAll(){for(const[,e]of this.activeFlashes)this.cleanup(e.element)}},qo=ln(({text:e,children:t,onCopy:n,className:r,iconSize:o=14})=>{const[i,a]=Ge(!1);Je(()=>{if(i){const e=setTimeout(()=>a(!1),600);return()=>{clearTimeout(e)}}},[i]);const s=Ze(t=>{t.preventDefault(),t.stopPropagation(),navigator.clipboard.writeText(e).then(()=>{a(!0),null==n||n(!0,e)},()=>{null==n||n(!1,e)})},[e,n]),l=Rn("button",{onClick:s,type:"button",className:lo("z-10","flex items-center justify-center","hover:text-dev-pink-400","transition-colors duration-200 ease-in-out","cursor-pointer",`size-[${o}px]`,r),children:Rn(On,{name:"icon-"+(i?"check":"copy"),size:[o],className:lo(i&&"text-green-500")})});return t?t({ClipboardIcon:l,onClick:s}):l}),Go=({length:e,expanded:t,onToggle:n,isNegative:r})=>Rn("div",{className:"flex items-center gap-1",children:[Rn("button",{type:"button",onClick:n,className:"flex items-center p-0 opacity-50",children:Rn(On,{name:"icon-chevron-right",size:12,className:lo("transition-[color,transform]",r?"text-[#f87171]":"text-[#4ade80]",t&&"rotate-90")})}),Rn("span",{children:["Array(",e,")"]})]}),Jo=({value:e,path:t,isNegative:n})=>{const[r,o]=Ge(!1);if(!(null!==e&&"object"==typeof e&&!(e instanceof Date)))return Rn("div",{className:"flex items-center gap-1",children:[Rn("span",{className:"text-gray-500",children:[t,":"]}),Rn("span",{className:"truncate",children:Mi(e)})]});const i=Object.entries(e);return Rn("div",{className:"flex flex-col",children:[Rn("div",{className:"flex items-center gap-1",children:[Rn("button",{type:"button",onClick:()=>o(!r),className:"flex items-center p-0 opacity-50",children:Rn(On,{name:"icon-chevron-right",size:12,className:lo("transition-[color,transform]",n?"text-[#f87171]":"text-[#4ade80]",r&&"rotate-90")})}),Rn("span",{className:"text-gray-500",children:[t,":"]}),!r&&Rn("span",{className:"truncate",children:e instanceof Date?Mi(e):`{${Object.keys(e).join(", ")}}`})]}),r&&Rn("div",{className:"pl-5 border-l border-[#333] mt-0.5 ml-1 flex flex-col gap-0.5",children:i.map(([e,t])=>Rn(Jo,{value:t,path:e,isNegative:n},e))})]})},Yo=({value:e,expanded:t,onToggle:n,isNegative:r})=>{const{value:o,error:i}=$i(e);if(i)return Rn("span",{className:"text-gray-500 font-italic",children:i});return null!==o&&"object"==typeof o&&!(o instanceof Promise)?Array.isArray(o)?Rn("div",{className:"flex flex-col gap-1 relative",children:[Rn(Go,{length:o.length,expanded:t,onToggle:n,isNegative:r}),t&&Rn("div",{className:"pl-2 border-l border-[#333] mt-0.5 ml-1 flex flex-col gap-0.5",children:o.map((e,t)=>Rn(Jo,{value:e,path:t.toString(),isNegative:r},t.toString()))}),Rn(qo,{text:Ti(o),className:"absolute top-0.5 right-0.5 opacity-0 transition-opacity group-hover:opacity-100 self-end",children:({ClipboardIcon:e})=>Rn(me,{children:e})})]}):Rn("div",{className:"flex items-start gap-1 relative",children:[Rn("button",{type:"button",onClick:n,className:lo("flex items-center","p-0 mt-0.5 mr-1","opacity-50"),children:Rn(On,{name:"icon-chevron-right",size:12,className:lo("transition-[color,transform]",r?"text-[#f87171]":"text-[#4ade80]",t&&"rotate-90")})}),Rn("div",{className:"flex-1",children:t?Rn("div",{className:"pl-2 border-l border-[#333] mt-0.5 ml-1 flex flex-col gap-0.5",children:Object.entries(o).map(([e,t])=>Rn(Jo,{value:t,path:e,isNegative:r},e))}):Rn("span",{children:Mi(o)})}),Rn(qo,{text:Ti(o),className:"absolute top-0.5 right-0.5 opacity-0 transition-opacity group-hover:opacity-100 self-end",children:({ClipboardIcon:e})=>Rn(me,{children:e})})]}):Rn("span",{children:Mi(o)})},Xo=e=>{switch(e.kind){case"initialized":return e.changes.currentValue;case"partially-initialized":return e.value}},Ko=(e,t)=>{for(const n of e){const e=t.get(n.name);e?t.set(e.name,{count:e.count+1,currentValue:n.value,id:e.name,lastUpdated:Date.now(),name:e.name,previousValue:n.prevValue}):t.set(n.name,{count:1,currentValue:n.value,id:n.name,lastUpdated:Date.now(),name:n.name,previousValue:n.prevValue})}},Zo=e=>{const t={contextChanges:new Map,propsChanges:new Map,stateChanges:new Map};return e.forEach(e=>{((e,t)=>{for(const n of e){const e=t.contextChanges.get(n.contextType);if(e){if(en(Xo(e),n.value))continue;if("partially-initialized"===e.kind){t.contextChanges.set(n.contextType,{kind:"initialized",changes:{count:1,currentValue:n.value,id:n.contextType.toString(),lastUpdated:Date.now(),name:n.name,previousValue:e.value}});continue}t.contextChanges.set(n.contextType,{kind:"initialized",changes:{count:e.changes.count+1,currentValue:n.value,id:n.contextType.toString(),lastUpdated:Date.now(),name:n.name,previousValue:e.changes.currentValue}})}else t.contextChanges.set(n.contextType,{kind:"partially-initialized",id:n.contextType.toString(),lastUpdated:Date.now(),name:n.name,value:n.value})}})(e.contextChanges,t),Ko(e.stateChanges,t.stateChanges),Ko(e.propsChanges,t.propsChanges)}),t},Qo=(e,t)=>{const n=new Map;return e.forEach((e,t)=>{n.set(t,e)}),t.forEach((e,t)=>{const r=n.get(t);r?n.set(t,{count:r.count+e.count,currentValue:e.currentValue,id:e.id,lastUpdated:e.lastUpdated,name:e.name,previousValue:e.previousValue}):n.set(t,e)}),n},ei=(e,t)=>{const n=((e,t)=>{const n=new Map;return e.contextChanges.forEach((e,t)=>{n.set(t,e)}),t.contextChanges.forEach((e,t)=>{const r=n.get(t);if(r){if(Xo(e)!==Xo(r))switch(r.kind){case"initialized":switch(e.kind){case"initialized":{const o=1;return void n.set(t,{kind:"initialized",changes:{...e.changes,count:e.changes.count+r.changes.count+o,currentValue:e.changes.currentValue,previousValue:e.changes.previousValue}})}case"partially-initialized":return void n.set(t,{kind:"initialized",changes:{count:r.changes.count+1,currentValue:e.value,id:e.id,lastUpdated:e.lastUpdated,name:e.name,previousValue:r.changes.currentValue}})}case"partially-initialized":switch(e.kind){case"initialized":return void n.set(t,{kind:"initialized",changes:{count:e.changes.count+1,currentValue:e.changes.currentValue,id:e.changes.id,lastUpdated:e.changes.lastUpdated,name:e.changes.name,previousValue:r.value}});case"partially-initialized":return void n.set(t,{kind:"initialized",changes:{count:1,currentValue:e.value,id:e.id,lastUpdated:e.lastUpdated,name:e.name,previousValue:r.value}})}}}else n.set(t,e)}),n})(e,t);return{contextChanges:n,propsChanges:Qo(e.propsChanges,t.propsChanges),stateChanges:Qo(e.stateChanges,t.stateChanges)}},ti=e=>Array.from(e.propsChanges.values()).reduce((e,t)=>e+t.count,0)+Array.from(e.stateChanges.values()).reduce((e,t)=>e+t.count,0)+Array.from(e.contextChanges.values()).filter(e=>"initialized"===e.kind).reduce((e,t)=>e+t.changes.count,0),ni=ln(()=>{const[e,t]=Ge(!0),n=(()=>{const e=Xe({queue:[]}),[t,n]=Ge({propsChanges:new Map,stateChanges:new Map,contextChanges:new Map}),r="focused"===Lu.inspectState.value.kind?Lu.inspectState.value.fiber:null,o=r?Z(r):null;return Je(()=>{const t=setInterval(()=>{0!==e.current.queue.length&&(n(t=>{const n=Zo(e.current.queue),r=ei(t,n),o=ti(t);ti(r);return r}),e.current.queue=[])},50);return()=>{clearInterval(t)}},[r]),Je(()=>{if(!o)return;const t=t=>{var n;null==(n=e.current)||n.queue.push(t)};let r=Lu.changesListeners.get(o);return r||(r=[],Lu.changesListeners.set(o,r)),r.push(t),()=>{var r,i;n({propsChanges:new Map,stateChanges:new Map,contextChanges:new Map}),e.current.queue=[],Lu.changesListeners.set(o,null!=(i=null==(r=Lu.changesListeners.get(o))?void 0:r.filter(e=>e!==t))?i:[])}},[o]),Je(()=>()=>{n({propsChanges:new Map,stateChanges:new Map,contextChanges:new Map}),e.current.queue=[]},[o]),t})(),[r,o]=Ge(!1),i=ti(n)>0;Je(()=>{if(!r&&i){const e=setTimeout(()=>{o(!0),requestAnimationFrame(()=>{t(!0)})},0);return()=>clearTimeout(e)}},[r,i]);const a=new Map(Array.from(n.contextChanges.entries()).filter(([,e])=>"initialized"===e.kind).map(([e,t])=>[e,"partially-initialized"===t.kind?null:t.changes])),s="focused"===Lu.inspectState.value.kind?Lu.inspectState.value.fiber:null;if(s)return Rn(me,{children:[Rn(oi,{}),Rn("div",{className:"overflow-hidden h-full flex flex-col gap-y-2",children:[Rn("div",{className:"flex flex-col gap-2 px-3 pt-2",children:[Rn("span",{className:"text-sm font-medium text-[#888]",children:["Why did ",Rn("span",{className:"text-[#A855F7]",children:J(s)})," render?"]}),!i&&Rn("div",{className:"text-sm text-[#737373] bg-[#1E1E1E] rounded-md p-4 flex flex-col gap-4",children:[Rn("div",{children:"No changes detected since selecting"}),Rn("div",{children:"The props, state, and context changes within your component will be reported here"})]})]}),Rn("div",{className:lo("flex flex-col gap-y-2 pl-3 relative overflow-y-auto h-full"),children:[Rn(ai,{changes:n.propsChanges,title:"Changed Props",isExpanded:e}),Rn(ai,{renderName:e=>{var t;return ri(e,null!=(t=J(G(s)))?t:"Unknown Component")},changes:n.stateChanges,title:"Changed State",isExpanded:e}),Rn(ai,{changes:a,title:"Changed Context",isExpanded:e})]})]})]})}),ri=(e,t)=>{if(Number.isNaN(Number(e)))return e;const n=Number.parseInt(e);return Rn("span",{className:"truncate",children:[Rn("span",{className:"text-white",children:[n,(e=>{const t=e%100;if(t>=11&&t<=13)return"th";switch(e%10){case 1:return"st";case 2:return"nd";case 3:return"rd";default:return"th"}})(n)," hook"," "]}),Rn("span",{style:{color:"#666"},children:["called in ",Rn("i",{className:"text-[#A855F7] truncate",children:t})]})]})},oi=ln(()=>{const e=Xe(null),t=Xe(null),n=Xe(null),r=Xe({isPropsChanged:!1,isStateChanged:!1,isContextChanged:!1});return Je(()=>{const o=co(()=>{var r,o,i;const a=[];"true"===(null==(r=e.current)?void 0:r.dataset.flash)&&a.push(e.current),"true"===(null==(o=t.current)?void 0:o.dataset.flash)&&a.push(t.current),"true"===(null==(i=n.current)?void 0:i.dataset.flash)&&a.push(n.current);for(const e of a)e.classList.remove("count-flash-white"),e.offsetWidth,e.classList.add("count-flash-white")},400);return zo.subscribe(i=>{var a,s,l,c,d,u,p,h,m;if(!e.current||!t.current||!n.current)return;const{currentIndex:f,updates:g}=i,v=g[f];v&&0!==f&&(o(),r.current={isPropsChanged:(null!=(l=null==(s=null==(a=v.props)?void 0:a.changes)?void 0:s.size)?l:0)>0,isStateChanged:(null!=(u=null==(d=null==(c=v.state)?void 0:c.changes)?void 0:d.size)?u:0)>0,isContextChanged:(null!=(m=null==(h=null==(p=v.context)?void 0:p.changes)?void 0:h.size)?m:0)>0},"true"!==e.current.dataset.flash&&(e.current.dataset.flash=r.current.isPropsChanged.toString()),"true"!==t.current.dataset.flash&&(t.current.dataset.flash=r.current.isStateChanged.toString()),"true"!==n.current.dataset.flash&&(n.current.dataset.flash=r.current.isContextChanged.toString()))})},[]),Rn("button",{type:"button",className:lo("react-section-header","overflow-hidden","max-h-0","transition-[max-height]"),children:Rn("div",{className:lo("flex-1 react-scan-expandable"),children:Rn("div",{className:"overflow-hidden",children:Rn("div",{className:"flex items-center whitespace-nowrap",children:[Rn("div",{className:"flex items-center gap-x-2",children:"What changed?"}),Rn("div",{className:lo("ml-auto","change-scope","transition-opacity duration-300 delay-150"),children:[Rn("div",{ref:e,children:"props"}),Rn("div",{ref:t,children:"state"}),Rn("div",{ref:n,children:"context"})]})]})})})})}),ii=e=>e,ai=ln(({title:e,changes:t,renderName:n=ii})=>{const[r,o]=Ge(new Set),[i,a]=Ge(new Set),s=Array.from(t.entries());return 0===t.size?null:Rn("div",{children:[Rn("div",{className:"text-xs text-[#888] mb-1.5",children:e}),Rn("div",{className:"flex flex-col gap-2",children:s.map(([t,s])=>{const l=i.has(String(t)),{value:c,error:d}=$i(s.previousValue),{value:u,error:p}=$i(s.currentValue),h=Ei(c,u);return Rn("div",{children:[Rn("button",{onClick:()=>{a(e=>{const n=new Set(e);return n.has(String(t))?n.delete(String(t)):n.add(String(t)),n})},className:"flex items-center gap-2 w-full bg-transparent border-none p-0 cursor-pointer text-white text-xs",children:Rn("div",{className:"flex items-center gap-1.5 flex-1",children:[Rn(On,{name:"icon-chevron-right",size:12,className:lo("text-[#666] transition-transform duration-200 ease-[cubic-bezier(0.25,0.1,0.25,1)]",{"rotate-90":l})}),Rn("div",{className:"whitespace-pre-wrap break-words text-left font-medium flex items-center gap-x-1.5",children:[n(s.name),Rn(di,{count:s.count,isFunction:"function"==typeof s.currentValue,showWarning:0===h.changes.length,forceFlash:!0})]})]})}),Rn("div",{className:lo("react-scan-expandable",{"react-scan-expanded":l}),children:Rn("div",{className:"pl-3 text-xs font-mono border-l-1 border-[#333]",children:Rn("div",{className:"flex flex-col gap-0.5",children:d||p?Rn(si,{currError:p,prevError:d}):h.changes.length>0?Rn(li,{change:s,diff:h,expandedFns:r,renderName:n,setExpandedFns:o,title:e}):Rn(ci,{currValue:u,entryKey:t,expandedFns:r,prevValue:c,setExpandedFns:o})})})})]},t)})})]})}),si=({prevError:e,currError:t})=>Rn(me,{children:[e&&Rn("div",{className:"text-[#f87171] bg-[#2a1515] pr-1.5 py-[3px] rounded italic",children:e}),t&&Rn("div",{className:"text-[#4ade80] bg-[#1a2a1a] pr-1.5 py-[3px] rounded italic mt-0.5",children:t})]}),li=({diff:e,title:t,renderName:n,change:r,expandedFns:o,setExpandedFns:i})=>e.changes.map((a,s)=>{const{value:l,error:c}=$i(a.prevValue),{value:d,error:u}=$i(a.currentValue),p="function"==typeof l||"function"==typeof d;let h;return"Props"===t&&(h=a.path.length>0?`${n(String(r.name))}.${zi(a.path)}`:void 0),"State"===t&&a.path.length>0&&(h=`state.${zi(a.path)}`),h||(h=zi(a.path)),Rn("div",{className:lo("flex flex-col gap-y-1",s<e.changes.length-1&&"mb-4"),children:[h&&Rn("div",{className:"text-[#666] text-[10px]",children:h}),Rn("button",{type:"button",className:lo("group","flex items-start","py-[3px] px-1.5","text-left text-[#f87171] bg-[#2a1515]","rounded","overflow-hidden break-all",p&&"cursor-pointer"),onClick:p?()=>{const e=`${zi(a.path)}-prev`;i(t=>{const n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})}:void 0,children:[Rn("span",{className:"w-3 flex items-center justify-center opacity-50",children:"-"}),Rn("span",{className:"flex-1 whitespace-nowrap font-mono",children:c?Rn("span",{className:"italic text-[#f87171]",children:c}):p?Rn("div",{className:"flex gap-1 items-start flex-col",children:[Rn("div",{className:"flex gap-1 items-start w-full",children:[Rn("span",{className:"flex-1 max-h-40",children:Ai(l,o.has(`${zi(a.path)}-prev`))}),"function"==typeof l&&Rn(qo,{text:l.toString(),className:"opacity-0 transition-opacity group-hover:opacity-100",children:({ClipboardIcon:e})=>Rn(me,{children:e})})]}),(null==l?void 0:l.toString())===(null==d?void 0:d.toString())&&Rn("div",{className:"text-[10px] text-[#666] italic",children:"Function reference changed"})]}):Rn(Yo,{value:l,expanded:o.has(`${zi(a.path)}-prev`),onToggle:()=>{const e=`${zi(a.path)}-prev`;i(t=>{const n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},isNegative:!0})})]}),Rn("button",{type:"button",className:lo("group","flex items-start","py-[3px] px-1.5","text-left text-[#4ade80] bg-[#1a2a1a]","rounded","overflow-hidden break-all",p&&"cursor-pointer"),onClick:p?()=>{const e=`${zi(a.path)}-current`;i(t=>{const n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})}:void 0,children:[Rn("span",{className:"w-3 flex items-center justify-center opacity-50",children:"+"}),Rn("span",{className:"flex-1 whitespace-pre-wrap font-mono",children:u?Rn("span",{className:"italic text-[#4ade80]",children:u}):p?Rn("div",{className:"flex gap-1 items-start flex-col",children:[Rn("div",{className:"flex gap-1 items-start w-full",children:[Rn("span",{className:"flex-1",children:Ai(d,o.has(`${zi(a.path)}-current`))}),"function"==typeof d&&Rn(qo,{text:d.toString(),className:"opacity-0 transition-opacity group-hover:opacity-100",children:({ClipboardIcon:e})=>Rn(me,{children:e})})]}),(null==l?void 0:l.toString())===(null==d?void 0:d.toString())&&Rn("div",{className:"text-[10px] text-[#666] italic",children:"Function reference changed"})]}):Rn(Yo,{value:d,expanded:o.has(`${zi(a.path)}-current`),onToggle:()=>{const e=`${zi(a.path)}-current`;i(t=>{const n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},isNegative:!1})})]})]},`${h}-${r.name}-${s}`)}),ci=({prevValue:e,currValue:t,entryKey:n,expandedFns:r,setExpandedFns:o})=>Rn(me,{children:[Rn("div",{className:"group flex gap-0.5 items-start text-[#f87171] bg-[#2a1515] py-[3px] px-1.5 rounded",children:[Rn("span",{className:"w-3 flex items-center justify-center opacity-50",children:"-"}),Rn("span",{className:"flex-1 overflow-hidden whitespace-pre-wrap font-mono",children:Rn(Yo,{value:e,expanded:r.has(`${String(n)}-prev`),onToggle:()=>{const e=`${String(n)}-prev`;o(t=>{const n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},isNegative:!0})})]}),Rn("div",{className:"group flex gap-0.5 items-start text-[#4ade80] bg-[#1a2a1a] py-[3px] px-1.5 rounded mt-0.5",children:[Rn("span",{className:"w-3 flex items-center justify-center opacity-50",children:"+"}),Rn("span",{className:"flex-1 overflow-hidden whitespace-pre-wrap font-mono",children:Rn(Yo,{value:t,expanded:r.has(`${String(n)}-current`),onToggle:()=>{const e=`${String(n)}-current`;o(t=>{const n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},isNegative:!1})})]}),"object"==typeof t&&null!==t&&Rn("div",{className:"text-[#666] text-[10px] italic mt-1 flex items-center gap-x-1",children:[Rn(On,{name:"icon-triangle-alert",className:"text-yellow-500 mb-px",size:14}),Rn("span",{children:"Reference changed but objects are structurally the same"})]})]}),di=({count:e,forceFlash:t,isFunction:n,showWarning:r})=>{const o=Xe(!0),i=Xe(null),a=Xe(e);return Je(()=>{const t=i.current;t&&a.current!==e&&(t.classList.remove("count-flash"),t.offsetWidth,t.classList.add("count-flash"),a.current=e)},[e]),Je(()=>{if(o.current)o.current=!1;else if(t){let e=setTimeout(()=>{var t;null==(t=i.current)||t.classList.add("count-flash-white"),e=setTimeout(()=>{var e;null==(e=i.current)||e.classList.remove("count-flash-white")},300)},500);return()=>{clearTimeout(e)}}},[t]),Rn("div",{ref:i,className:"count-badge",children:[r&&Rn(On,{name:"icon-triangle-alert",className:"text-yellow-500 mb-px",size:14}),n&&Rn(On,{name:"icon-function",className:"text-[#A855F7] mb-px",size:14}),"x",e]})},ui={lastRendered:new Map,expandedPaths:new Set,cleanup:()=>{ui.lastRendered.clear(),ui.expandedPaths.clear(),Vo.cleanupAll(),Wi(),Ro()}},pi=class extends fe{constructor(){super(...arguments),n(this,"state",{hasError:!1,error:null}),n(this,"handleReset",()=>{this.setState({hasError:!1,error:null}),ui.cleanup()})}static getDerivedStateFromError(e){return{hasError:!0,error:e}}render(){var e;return this.state.hasError?Rn("div",{className:"p-4 bg-red-950/50 h-screen backdrop-blur-sm",children:[Rn("div",{className:"flex items-center gap-2 mb-3 text-red-400 font-medium",children:[Rn(On,{name:"icon-flame",className:"text-red-500",size:16}),"Something went wrong in the inspector"]}),Rn("div",{className:"p-3 bg-black/40 rounded font-mono text-xs text-red-300 mb-4 break-words",children:(null==(e=this.state.error)?void 0:e.message)||JSON.stringify(this.state.error)}),Rn("button",{type:"button",onClick:this.handleReset,className:"px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md text-sm font-medium transition-colors flex items-center justify-center gap-2",children:"Reset Inspector"})]}):this.props.children}},hi=Et(()=>lo("react-scan-inspector","flex-1","opacity-0","overflow-y-auto overflow-x-hidden","transition-opacity delay-0","pointer-events-none",!wo.value&&"opacity-100 delay-300 pointer-events-auto")),mi=To(()=>{const e=Xe(null),t=t=>{if(!t)return;e.current=t;const{data:n,shouldUpdate:r}=Gi(t);if(r){const e={timestamp:Date.now(),fiberInfo:Ri(t),props:n.fiberProps,state:n.fiberState,context:n.fiberContext,stateNames:Ii(t)};Fo(e,t)}};return Jt(()=>{const n=Lu.inspectState.value;ut(()=>{var r;if("focused"!==n.kind||!n.focusedDomElement)return e.current=null,void ui.cleanup();"focused"===n.kind&&(wo.value=!1);const{parentCompositeFiber:o}=ki(n.focusedDomElement,n.fiber);if(!o)return Lu.inspectState.value={kind:"inspect-off"},void(_o.value={view:"none"});(null==(r=e.current)?void 0:r.type)!==o.type&&(e.current=o,ui.cleanup(),t(o))})}),Jt(()=>{Ao.value,ut(()=>{const n=Lu.inspectState.value;if("focused"!==n.kind||!n.focusedDomElement)return e.current=null,void ui.cleanup();const{parentCompositeFiber:r}=ki(n.focusedDomElement,n.fiber);if(!r)return Lu.inspectState.value={kind:"inspect-off"},void(_o.value={view:"none"});t(r),n.focusedDomElement.isConnected||(e.current=null,ui.cleanup(),Lu.inspectState.value={kind:"inspecting",hoveredDomElement:null})})}),Je(()=>()=>{ui.cleanup()},[]),Rn(pi,{children:Rn("div",{className:hi,children:Rn("div",{className:"w-full h-full",children:Rn(ni,{})})})})}),fi=To(()=>"focused"!==Lu.inspectState.value.kind?null:Rn(pi,{children:[Rn(mi,{}),Rn(Ho,{})]})),gi=e=>{var t,n,r,o;if("__REACT_DEVTOOLS_GLOBAL_HOOK__"in window){const n=window.__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!(null==n?void 0:n.renderers))return null;for(const[,r]of Array.from(n.renderers))try{const n=null==(t=r.findFiberByHostInstance)?void 0:t.call(r,e);if(n)return n}catch{}}if("_reactRootContainer"in e){const t=e._reactRootContainer;return null!=(o=null==(r=null==(n=null==t?void 0:t._internalRoot)?void 0:n.current)?void 0:r.child)?o:null}for(const t in e)if(t.startsWith("__reactInternalInstance$")||t.startsWith("__reactFiber")){return e[t]}return null},vi=e=>{let t=e;for(;t;){if(t.stateNode instanceof Element)return t.stateNode;if(!t.child)break;t=t.child}for(;t;){if(t.stateNode instanceof Element)return t.stateNode;if(!t.return)break;t=t.return}return null},wi=e=>{if(!e)return null;try{const t=gi(e);if(!t)return null;const n=bi(t);return n?n[0]:null}catch{return null}},bi=e=>{let t=e,n=null;for(;t;){if(w(t))return[t,n];v(t)&&!n&&(n=t),t=t.return}return null},xi=(e,t)=>!!k(t,t=>t===e),yi=e=>{const t=wi(e);if(!t)return{};if(!vi(t))return{};const n=bi(t);if(!n)return{};const[r]=n;return{parentCompositeFiber:r}},ki=(e,t)=>{var n,r,o,i;if(!e.isConnected)return{};let a=null!=t?t:wi(e);if(!a)return{};let s=a,l=null,c=null;for(;s;)if(s.stateNode){if(null==(n=Pu.instrumentation)?void 0:n.fiberRoots.has(s.stateNode)){l=s,c=s.stateNode.current;break}s=s.return}else s=s.return;if(!l||!c)return{};if(a=xi(a,c)?a:null!=(r=a.alternate)?r:a,!a)return{};if(!vi(a))return{};const d=null==(o=bi(a))?void 0:o[0];return d?{parentCompositeFiber:xi(d,c)?d:null!=(i=d.alternate)?i:d}:{}},_i=e=>{var t,n,r;const o=null!=(t=e.memoizedProps)?t:{},i=null!=(r=null==(n=e.alternate)?void 0:n.memoizedProps)?r:{},a=[];for(const e in o){if("children"===e)continue;const t=o[e],n=i[e];en(t,n)||a.push({name:e,value:t,prevValue:n,type:1})}return a},Ni=new Set(["HTML","HEAD","META","TITLE","BASE","SCRIPT","SCRIPT","STYLE","LINK","NOSCRIPT","SOURCE","TRACK","EMBED","OBJECT","PARAM","TEMPLATE","PORTAL","SLOT","AREA","XML","DOCTYPE","COMMENT"]),Si=(e,t=!0)=>{if(e.stateNode&&"nodeType"in e.stateNode){const n=e.stateNode;return t&&n.tagName&&Ni.has(n.tagName.toLowerCase())?null:n}let n=e.child;for(;n;){const e=Si(n,t);if(e)return e;n=n.sibling}return null},Ci=(e=document.body)=>{const t=[],n=(e,r=0)=>{var o;const i=(e=>{if(!e)return null;const{parentCompositeFiber:t}=yi(e);return t&&Si(t)===e?e:null})(e);if(i){const{parentCompositeFiber:e}=yi(i);if(!e)return;t.push({element:i,depth:r,name:null!=(o=J(e.type))?o:"Unknown",fiber:e})}for(const t of Array.from(e.children))n(t,i?r+1:r)};return n(e),t},Ti=e=>{try{if(null===e)return"null";if(void 0===e)return"undefined";if(Fi(e))return"Promise";if("function"==typeof e){const t=e.toString();try{return t.replace(/\s+/g," ").replace(/{\s+/g,"{\n  ").replace(/;\s+/g,";\n  ").replace(/}\s*$/g,"\n}").replace(/\(\s+/g,"(").replace(/\s+\)/g,")").replace(/,\s+/g,", ")}catch{return t}}switch(!0){case e instanceof Date:return e.toISOString();case e instanceof RegExp:return e.toString();case e instanceof Error:return`${e.name}: ${e.message}`;case e instanceof Map:return JSON.stringify(Array.from(e.entries()),null,2);case e instanceof Set:return JSON.stringify(Array.from(e),null,2);case e instanceof DataView:return JSON.stringify(Array.from(new Uint8Array(e.buffer)),null,2);case e instanceof ArrayBuffer:return JSON.stringify(Array.from(new Uint8Array(e)),null,2);case ArrayBuffer.isView(e)&&"length"in e:return JSON.stringify(Array.from(e),null,2);case Array.isArray(e):case"object"==typeof e:return JSON.stringify(e,null,2);default:return String(e)}}catch{return String(e)}},Ei=(e,t,n=[],r=new WeakSet)=>{if(e===t)return{type:"primitive",changes:[],hasDeepChanges:!1};if("function"==typeof e&&"function"==typeof t){const r=((e,t)=>{try{return"function"==typeof e&&"function"==typeof t&&e.toString()===t.toString()}catch{return!1}})(e,t);return{type:"primitive",changes:[{path:n,prevValue:e,currentValue:t,sameFunction:r}],hasDeepChanges:!r}}if(null===e||null===t||void 0===e||void 0===t||"object"!=typeof e||"object"!=typeof t)return{type:"primitive",changes:[{path:n,prevValue:e,currentValue:t}],hasDeepChanges:!0};if(r.has(e)||r.has(t))return{type:"object",changes:[{path:n,prevValue:"[Circular]",currentValue:"[Circular]"}],hasDeepChanges:!1};r.add(e),r.add(t);const o=e,i=t,a=new Set([...Object.keys(o),...Object.keys(i)]),s=[];let l=!1;for(const e of a){const t=o[e],a=i[e];if(t!==a)if("object"==typeof t&&"object"==typeof a&&null!==t&&null!==a){const o=Ei(t,a,[...n,e],r);s.push(...o.changes),o.hasDeepChanges&&(l=!0)}else s.push({path:[...n,e],prevValue:t,currentValue:a}),l=!0}return{type:"object",changes:s,hasDeepChanges:l}},zi=e=>0===e.length?"":e.reduce((e,t,n)=>/^\d+$/.test(t)?`${e}[${t}]`:0===n?t:`${e}.${t}`,"");var Ai=(e,t=!1)=>{try{const n=e.toString(),r=n.match(/(?:function\s*)?(?:\(([^)]*)\)|([^=>\s]+))\s*=>?/);if(!r)return"ƒ";const o=(r[1]||r[2]||"").replace(/\s+/g,"");return t?function(e){const t=e.replace(/\s+/g," ").trim(),n=[];let r="";for(let e=0;e<t.length;e++){const o=t[e];"="!==o||">"!==t[e+1]?/[(){}[\];,<>:\?!]/.test(o)?(r.trim()&&n.push(r.trim()),n.push(o),r=""):/\s/.test(o)?(r.trim()&&n.push(r.trim()),r=""):r+=o:(r.trim()&&n.push(r.trim()),n.push("=>"),r="",e++)}r.trim()&&n.push(r.trim());const o=[];for(let e=0;e<n.length;e++){const t=n[e],r=n[e+1];"("===t&&")"===r||"["===t&&"]"===r||"{"===t&&"}"===r||"<"===t&&">"===r?(o.push(t+r),e++):o.push(t)}const i=new Set,a=new Set;function s(e,t,n){let r=0;for(let i=n;i<o.length;i++){const n=o[i];if(n===e)r++;else if(n===t&&(r--,0===r))return i}return-1}for(let e=0;e<o.length;e++)if("("===o[e]){const t=s("(",")",e);if(-1!==t&&"=>"===o[t+1])for(let n=e;n<=t;n++)i.add(n)}for(let e=1;e<o.length;e++){const t=o[e-1],n=o[e];if(/^[a-zA-Z0-9_$]+$/.test(t)&&"<"===n){const t=s("<",">",e);if(-1!==t)for(let n=e;n<=t;n++)a.add(n)}}let l=0;const c=[];let d="";function u(){d.trim()&&c.push(d.replace(/\s+$/,"")),d=""}function p(){u(),d="  ".repeat(l)}const h=[];function m(){return h.length?h[h.length-1]:null}function f(e,t=!1){d.trim()?t||/^[),;:\].}>]$/.test(e)?d+=e:d+=` ${e}`:d+=e}for(let e=0;e<o.length;e++){const t=o[e],n=o[e+1]||"";if(["(","{","[","<"].includes(t))f(t),h.push(t),"{"===t?(l++,p()):"("!==t&&"["!==t&&"<"!==t||i.has(e)&&"("===t||a.has(e)&&"<"===t||n!=={"(":")","[":"]","<":">"}[t]&&"()"!==n&&"[]"!==n&&"<>"!==n&&(l++,p());else if([")","}","]",">"].includes(t)){const n=m();")"===t&&"("===n||"]"===t&&"["===n||">"===t&&"<"===n?i.has(e)&&")"===t||a.has(e)&&">"===t||(l=Math.max(l-1,0),p()):"}"===t&&"{"===n&&(l=Math.max(l-1,0),p()),h.pop(),f(t),"}"===t&&p()}else if(/^\(\)|\[\]|\{\}|\<\>$/.test(t))f(t);else if("=>"===t)f(t);else if(";"===t)f(t,!0),p();else if(","===t){f(t,!0);const n=m();i.has(e)&&"("===n||a.has(e)&&"<"===n||n&&["{","[","(","<"].includes(n)&&p()}else f(t)}return u(),c.join("\n").replace(/\n\s*\n+/g,"\n").trim()}(n):`ƒ (${o}) => ...`}catch{return"ƒ"}},Mi=e=>{if(null===e)return"null";if(void 0===e)return"undefined";if("string"==typeof e)return`"${e.length>150?`${e.slice(0,20)}...`:e}"`;if("number"==typeof e||"boolean"==typeof e)return String(e);if("function"==typeof e)return Ai(e);if(Array.isArray(e))return`Array(${e.length})`;if(e instanceof Map)return`Map(${e.size})`;if(e instanceof Set)return`Set(${e.size})`;if(e instanceof Date)return e.toISOString();if(e instanceof RegExp)return e.toString();if(e instanceof Error)return`${e.name}: ${e.message}`;if("object"==typeof e){const t=Object.keys(e);return`{${t.length>2?`${t.slice(0,2).join(", ")}, ...`:t.join(", ")}}`}return String(e)},$i=e=>{var t;if(null==e)return{value:e};if("function"==typeof e)return{value:e};if("object"!=typeof e)return{value:e};if(Fi(e))return{value:"Promise"};try{const n=Object.getPrototypeOf(e);return n===Promise.prototype||"Promise"===(null==(t=null==n?void 0:n.constructor)?void 0:t.name)?{value:"Promise"}:{value:e}}catch{return{value:null,error:"Error accessing value"}}},Fi=e=>!!e&&(e instanceof Promise||"object"==typeof e&&"then"in e),Ri=e=>{var t,n;const r=V(e);return{displayName:J(e)||"Unknown",type:e.type,key:e.key,id:e.index,selfTime:null!=(t=null==r?void 0:r.selfTime)?t:null,totalTime:null!=(n=null==r?void 0:r.totalTime)?n:null}},Oi=new Map,Di=new Map,ji=new Map,Li=null,Pi=/\[(?<name>\w+),\s*set\w+\]/g,Ii=e=>{var t,n;const r=(null==(n=null==(t=e.type)?void 0:t.toString)?void 0:n.call(t))||"";return r?Array.from(r.matchAll(Pi),e=>{var t,n;return null!=(n=null==(t=e.groups)?void 0:t.name)?n:""}):[]},Wi=()=>{Oi.clear(),Di.clear(),ji.clear(),Li=null},Ui=(e,t,n,r)=>{const o=e.get(t),i=e===Oi||e===ji,a=!en(n,r);if(!o)return e.set(t,{count:a&&i?1:0,currentValue:n,previousValue:r,lastUpdated:Date.now()}),{hasChanged:a,count:a&&i?1:i?0:1};if(!en(o.currentValue,n)){const r=o.count+1;return e.set(t,{count:r,currentValue:n,previousValue:o.currentValue,lastUpdated:Date.now()}),{hasChanged:!0,count:r}}return{hasChanged:!1,count:o.count}},Hi=e=>{if(!e)return{};if(0===e.tag||11===e.tag||15===e.tag||14===e.tag){let t=e.memoizedState;const n={};let r=0;for(;t;)t.queue&&void 0!==t.memoizedState&&(n[r]=t.memoizedState),t=t.next,r++;return n}return 1===e.tag&&e.memoizedState||{}},Bi=e=>{var t;const n=e.memoizedProps||{},r=(null==(t=e.alternate)?void 0:t.memoizedProps)||{},o={},i={},a=Object.keys(n);for(const e of a)e in n&&(o[e]=n[e],i[e]=r[e]);return{current:o,prev:i,changes:_i(e).map(e=>({name:e.name,value:e.value,prevValue:e.prevValue}))}},Vi=e=>{const t=Hi(e),n=e.alternate?Hi(e.alternate):{},r=[];for(const[o,i]of Object.entries(t)){const t=1===e.tag?o:Number(o);e.alternate&&!en(n[o],i)&&r.push({name:t,value:i,prevValue:n[o]})}return{current:t,prev:n,changes:r}},qi=e=>{const t=Yi(e),n=e.alternate?Yi(e.alternate):new Map,r={},o={},i=[],a=new Set;for(const[e,s]of t){const t=s.displayName,l=e;if(a.has(l))continue;a.add(l),r[t]=s.value;const c=n.get(e);c&&(o[t]=c.value,en(c.value,s.value)||i.push({name:t,value:s.value,prevValue:c.value,contextType:e}))}return{current:r,prev:o,changes:i}},Gi=e=>{const t=()=>({current:[],changes:new Set,changesCounts:new Map});if(!e)return{data:{fiberProps:t(),fiberState:t(),fiberContext:t()},shouldUpdate:!1};let n=!1;const r=(e=>{const t=e.type!==Li;return Li=e.type,t})(e),o=t();if(e.memoizedProps){const{current:t,changes:r}=Bi(e);for(const[e,n]of Object.entries(t))o.current.push({name:e,value:Fi(n)?{type:"promise",displayValue:"Promise"}:n});for(const e of r){const{hasChanged:t,count:r}=Ui(Oi,e.name,e.value,e.prevValue);t&&(n=!0,o.changes.add(e.name),o.changesCounts.set(e.name,r))}}const i=t(),{current:a,changes:s}=Vi(e);for(const[t,n]of Object.entries(a)){const r=1===e.tag?t:Number(t);i.current.push({name:r,value:n})}for(const e of s){const{hasChanged:t,count:r}=Ui(Di,e.name,e.value,e.prevValue);t&&(n=!0,i.changes.add(e.name),i.changesCounts.set(e.name,r))}const l=t(),{current:c,changes:d}=qi(e);for(const[e,t]of Object.entries(c))l.current.push({name:e,value:t});if(!r)for(const e of d){const{hasChanged:t,count:r}=Ui(ji,e.name,e.value,e.prevValue);t&&(n=!0,l.changes.add(e.name),l.changesCounts.set(e.name,r))}return n||r||(o.changes.clear(),i.changes.clear(),l.changes.clear()),{data:{fiberProps:o,fiberState:i,fiberContext:l},shouldUpdate:n||r}},Ji=new WeakMap,Yi=e=>{var t;if(!e)return new Map;const n=Ji.get(e);if(n)return n;const r=new Map;let o=e;for(;o;){const e=o.dependencies;if(null==e?void 0:e.firstContext){let n=e.firstContext;for(;n;){const e=n.memoizedValue,o=null==(t=n.context)?void 0:t.displayName;if(r.has(e)||r.set(n.context,{value:e,displayName:null!=o?o:"UnnamedContext",contextType:null}),n===n.next)break;n=n.next}}o=o.return}return Ji.set(e,r),r},Xi=e=>{const t=()=>({current:[],changes:new Set,changesCounts:new Map});if(!e)return{fiberProps:t(),fiberState:t(),fiberContext:t()};const n=t();if(e.memoizedProps){const{current:t,changes:r}=Bi(e);for(const[e,r]of Object.entries(t))n.current.push({name:e,value:Fi(r)?{type:"promise",displayValue:"Promise"}:r});for(const e of r)n.changes.add(e.name),n.changesCounts.set(e.name,1)}const r=t();if(e.memoizedState){const{current:t,changes:n}=Vi(e);for(const[e,n]of Object.entries(t))r.current.push({name:e,value:Fi(n)?{type:"promise",displayValue:"Promise"}:n});for(const e of n)r.changes.add(e.name),r.changesCounts.set(e.name,1)}const o=t(),{current:i,changes:a}=qi(e);for(const[e,t]of Object.entries(i))o.current.push({name:e,value:Fi(t)?{type:"promise",displayValue:"Promise"}:t});for(const e of a)o.changes.add(e.name),o.changesCounts.set(e.name,1);return{fiberProps:n,fiberState:r,fiberContext:o}},Ki={mount:1,update:2,unmount:4},Zi=0,Qi=performance.now(),ea=0,ta=!1,na=()=>{ea++;const e=performance.now();e-Qi>=1e3&&(Zi=ea,ea=0,Qi=e),requestAnimationFrame(na)},ra=()=>(ta||(ta=!0,na(),Zi=60),Zi),oa=0,ia=new WeakMap,aa=e=>{const t=ia.get(e);return t||(oa++,ia.set(e,oa),oa)};function sa(e,t){var n;if(!e||!t)return;const r=e.memoizedValue,o={type:4,name:null!=(n=e.context.displayName)?n:"Context.Provider",value:r,contextType:aa(e.context)};this.push(o)}var la=e=>{const t=[];return((e,t)=>{var n;try{let r=e.dependencies,o=null==(n=e.alternate)?void 0:n.dependencies;if(!(r&&o&&"object"==typeof r&&"firstContext"in r&&"object"==typeof o&&"firstContext"in o))return!1;let i=r.firstContext,a=o.firstContext;for(;i&&"object"==typeof i&&"memoizedValue"in i||a&&"object"==typeof a&&"memoizedValue"in a;){if(!0===t(i,a))return!0;i=null==i?void 0:i.next,a=null==a?void 0:a.next}}catch{}})(e,sa.bind(t)),t},ca=new Map,da=!1,ua=()=>Array.from(ca.values()),pa=new WeakMap;function ha(e){return String(Z(e))}function ma(e){const t=ha(e),n=pa.get(G(e));if(n)return n.get(t)}var fa=(e,t,n,r,o)=>{const i=Date.now(),a=ma(e);if((r||o)&&(!a||i-(a.lastRenderTimestamp||0)>16)){const r=a||{selfTime:0,totalTime:0,renderCount:0,lastRenderTimestamp:i};r.renderCount=(r.renderCount||0)+1,r.selfTime=t||0,r.totalTime=n||0,r.lastRenderTimestamp=i,function(e,t){const n=G(e.type),r=ha(e);let o=pa.get(n);o||(o=new Map,pa.set(n,o)),o.set(r,t)}(e,{...r})}},ga=(e,t)=>{const n={isPaused:_t(!Pu.options.value.enabled),fiberRoots:new WeakSet};return ca.set(e,{key:e,config:t,instrumentation:n}),da||(da=!0,(e=>{var t;let n=g(e.onActive);n._instrumentationSource=null!=(t=e.name)?t:o;let r=n.onCommitFiberRoot;if(e.onCommitFiberRoot){let t=(n,o,i)=>{var a;r!==t&&(null==r||r(n,o,i),null==(a=e.onCommitFiberRoot)||a.call(e,n,o,i))};n.onCommitFiberRoot=t}let i=n.onCommitFiberUnmount;if(e.onCommitFiberUnmount){let t=(r,o)=>{var a;n.onCommitFiberUnmount===t&&(null==i||i(r,o),null==(a=e.onCommitFiberUnmount)||a.call(e,r,o))};n.onCommitFiberUnmount=t}let a=n.onPostCommitFiberRoot;if(e.onPostCommitFiberRoot){let t=(r,o)=>{var i;n.onPostCommitFiberRoot===t&&(null==a||a(r,o),null==(i=e.onPostCommitFiberRoot)||i.call(e,r,o))};n.onPostCommitFiberRoot=t}})({name:"react-scan",onActive:t.onActive,onCommitFiberRoot(e,t){n.fiberRoots.add(t);const r=ua();for(const e of r)e.config.onCommitStart();((e,t)=>{let n="current"in e?e.current:e,r=oe.get(e);r||(r={id:re++,prevFiber:null},oe.set(e,r));let{prevFiber:o}=r;if(n)if(null!==o){let e=o&&null!=o.memoizedState&&null!=o.memoizedState.element&&!0!==o.memoizedState.isDehydrated,r=null!=n.memoizedState&&null!=n.memoizedState.element&&!0!==n.memoizedState.isDehydrated;!e&&r?Q(t,n,!1):e&&r?ee(t,n,n.alternate):e&&!r&&te(t,n)}else Q(t,n,!0);else te(t,n);r.prevFiber=n})(t.current,(e,t)=>{const n=G(e.type);if(!n)return null;const r=ua(),o=[];for(let t=0,n=r.length;t<n;t++){r[t].config.isValidFiber(e)&&o.push(t)}if(!o.length)return null;const i=[];if(r.some(e=>e.config.trackChanges)){const t=Bi(e).changes,n=Vi(e).changes,r=qi(e).changes;i.push.apply(null,t.map(e=>({type:1,name:e.name,value:e.value})));for(const t of n)1===e.tag?i.push({type:3,name:t.name.toString(),value:t.value}):i.push({type:2,name:t.name.toString(),value:t.value});i.push.apply(null,r.map(e=>({type:4,name:e.name,value:e.value,contextType:Number(e.contextType)})))}const{selfTime:a,totalTime:s}=V(e),l=ra(),c={phase:Ki[t],componentName:J(n),count:1,changes:i,time:a,forget:q(e),unnecessary:null,didCommit:x(e),fps:l},d=i.length>0,u=(e=>{let t=[],n=[e];for(;n.length;){let e=n.pop();e&&(v(e)&&x(e)&&b(e)&&t.push(e),e.child&&n.push(e.child),e.sibling&&n.push(e.sibling))}return t})(e).length>0;"update"===t&&fa(e,a,s,d,u);for(let t=0,n=o.length;t<n;t++){r[o[t]].config.onRender(e,[c])}});for(const e of r)e.config.onCommitFinish()},onPostCommitFiberRoot(){const e=ua();for(const t of e)t.config.onPostCommitFiberRoot()}})),n},va=(e,t)=>{const n=t-e;return Math.abs(n)<.5?t:e+.2*n},wa="115,97,230";function ba(e,t){return t[0]-e[0]}function xa([e,t]){let n=`${t.slice(0,4).join(", ")} ×${e}`;return n.length>40&&(n=`${n.slice(0,40)}…`),n}var ya=e=>{const t=new Map;for(const{name:n,count:r}of e)t.set(n,(t.get(n)||0)+r);const n=new Map;for(const[e,r]of t){const t=n.get(r);t?t.push(e):n.set(r,[e])}const r=function(e){return[...e.entries()].sort(ba)}(n);let o=xa(r[0]);for(let e=1,t=r.length;e<t;e++)o+=", "+xa(r[e]);return o.length>40?`${o.slice(0,40)}…`:o},ka=e=>{let t=0;for(const n of e)t+=n.width*n.height;return t},_a=(e,t)=>{for(const{id:n,name:r,count:o,x:i,y:a,width:s,height:l,didCommit:c}of t){const t={id:n,name:r,count:o,x:i,y:a,width:s,height:l,frame:0,targetX:i,targetY:a,targetWidth:s,targetHeight:l,didCommit:c},d=String(t.id),u=e.get(d);u?(u.count++,u.frame=0,u.targetX=i,u.targetY=a,u.targetWidth=s,u.targetHeight=l,u.didCommit=c):e.set(d,t)}},Na=(e,t,n)=>{for(const r of e.values()){const e=r.x-t,o=r.y-n;r.targetX=e,r.targetY=o}},Sa=null,Ca=null,Ta=null,Ea=1,za=null,Aa=new Map,Ma=new Map,$a=new Set,Fa=e=>{if(!w(e))return;const t="string"==typeof e.type?e.type:J(e);if(!t)return;const n=Ma.get(e),r=(e=>{let t=[],n=[];for(v(e)?t.push(e):e.child&&n.push(e.child);n.length;){let e=n.pop();if(!e)break;v(e)?t.push(e):e.child&&n.push(e.child),e.sibling&&n.push(e.sibling)}return t})(e),o=x(e);n?n.count++:(Ma.set(e,{name:t,count:1,elements:r.map(e=>e.stateNode),didCommit:o?1:0}),$a.add(e))},Ra=e=>{const t=e[0];if(1===e.length)return t;let n,r,o,i;for(let t=0,a=e.length;t<a;t++){const a=e[t];n=null==n?a.x:Math.min(n,a.x),r=null==r?a.y:Math.min(r,a.y),o=null==o?a.x+a.width:Math.max(o,a.x+a.width),i=null==i?a.y+a.height:Math.max(i,a.y+a.height)}return null==n||null==r||null==o||null==i?e[0]:new DOMRect(n,r,o-n,i-r)};function Oa(e,t){const n=[];for(const t of e){const e=t.target;this.seenElements.has(e)||(this.seenElements.add(e),n.push(t))}n.length>0&&this.resolveNext&&(this.resolveNext(n),this.resolveNext=null),this.seenElements.size===this.uniqueElements.size&&(t.disconnect(),this.done=!0,this.resolveNext&&this.resolveNext([]))}var Da,ja=async function*(e){const t={uniqueElements:new Set(e),seenElements:new Set,resolveNext:null,done:!1},n=new IntersectionObserver(Oa.bind(t));for(const e of t.uniqueElements)n.observe(e);for(;!t.done;){const e=await new Promise(e=>{t.resolveNext=e});e.length>0&&(yield e)}},La="undefined"!=typeof SharedArrayBuffer?SharedArrayBuffer:ArrayBuffer,Pa=async()=>{const e=[];for(const t of $a){const n=Ma.get(t);if(n)for(let t=0;t<n.elements.length;t++)n.elements[t]instanceof Element&&e.push(n.elements[t])}const t=new Map;for await(const n of ja(e)){for(const e of n){const n=e.target,r=e.intersectionRect;e.isIntersecting&&r.width&&r.height&&t.set(n,r)}const e=[],r=[],o=[];for(const n of $a){const i=Ma.get(n);if(!i)continue;const a=[];for(let e=0;e<i.elements.length;e++){const n=i.elements[e],r=t.get(n);r&&a.push(r)}a.length&&(e.push(i),r.push(Ra(a)),o.push(Z(n)))}if(e.length>0){const t=new La(7*e.length*4),n=new Float32Array(t),i=new Array(e.length);let a;for(let t=0,s=e.length;t<s;t++){const s=e[t],l=o[t],{x:c,y:d,width:u,height:p}=r[t],{count:h,name:m,didCommit:f}=s;if(Sa){const e=7*t;n[e]=l,n[e+1]=h,n[e+2]=c,n[e+3]=d,n[e+4]=u,n[e+5]=p,n[e+6]=f,i[t]=m}else a||(a=new Array(e.length)),a[t]={id:l,name:m,count:h,x:c,y:d,width:u,height:p,didCommit:f}}Sa?Sa.postMessage({type:"draw-outlines",data:t,names:i}):Ca&&Ta&&a&&(_a(Aa,a),za||(za=requestAnimationFrame(Ia)))}}for(const e of $a)Ma.delete(e),$a.delete(e)},Ia=()=>{if(!Ta||!Ca)return;const e=((e,t,n,r)=>{e.clearRect(0,0,t.width/n,t.height/n);const o=new Map,i=new Map;for(const e of r.values()){const{x:t,y:n,width:r,height:a,targetX:s,targetY:l,targetWidth:c,targetHeight:d,frame:u}=e;s!==t&&(e.x=va(t,s)),l!==n&&(e.y=va(n,l)),c!==r&&(e.width=va(r,c)),d!==a&&(e.height=va(a,d));const p=`${null!=s?s:t},${null!=l?l:n}`,h=`${p},${null!=c?c:r},${null!=d?d:a}`,m=o.get(p);m?m.push(e):o.set(p,[e]);const f=1-u/45;e.frame++;const g=i.get(h)||{x:t,y:n,width:r,height:a,alpha:f};f>g.alpha&&(g.alpha=f),i.set(h,g)}for(const{x:t,y:n,width:r,height:o,alpha:a}of i.values()){e.strokeStyle=`rgba(${wa},${a})`,e.lineWidth=1;const i=Math.round(t)+.5,s=Math.round(n)+.5,l=Math.round(r),c=Math.round(o);e.beginPath(),e.rect(i,s,l,c),e.stroke(),e.fillStyle=`rgba(${wa},${.1*a})`,e.fill()}e.font="11px Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace";const a=new Map;e.textRendering="optimizeSpeed";for(const t of o.values()){const n=t[0],{x:o,y:i,frame:s}=n,l=1-s/45,c=ya(t),{width:d}=e.measureText(c),u=11;if(a.set(`${o},${i},${d},${c}`,{text:c,width:d,height:u,alpha:l,x:o,y:i,outlines:t}),s>45)for(const e of t)r.delete(String(e.id))}const s=Array.from(a.entries()).sort(([e,t],[n,r])=>ka(r.outlines)-ka(t.outlines));for(const[t,n]of s)if(a.has(t))for(const[r,o]of a.entries()){if(t===r)continue;const{x:i,y:s,width:l,height:c}=n,{x:d,y:u,width:p,height:h}=o;i+l>d&&d+p>i&&s+c>u&&u+h>s&&(n.text=ya(n.outlines.concat(o.outlines)),n.width=e.measureText(n.text).width,a.delete(r))}for(const t of a.values()){const{x:n,y:r,alpha:o,width:i,height:a,text:s}=t;let l=r-a-4;l<0&&(l=0),e.fillStyle=`rgba(${wa},${o})`,e.fillRect(n,l,i+4,a+4),e.fillStyle=`rgba(255,255,255,${o})`,e.fillText(s,n+2,l+a)}return r.size>0})(Ta,Ca,Ea,Aa);za=e?requestAnimationFrame(Ia):null},Wa="undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof Worker,Ua=()=>Math.min(window.devicePixelRatio||1,2),Ha=()=>globalThis.__REACT_SCAN_STOP__,Ba=()=>{const e=document.querySelector("[data-react-scan]");e&&e.remove()},Va=e=>{var t,n;if(w(e)&&!1!==Pu.options.value.showToolbar&&"focused"===Lu.inspectState.value.kind){const r=e,{selfTime:o}=V(e),i=J(e.type),a=Z(r),s=Lu.reportData.get(a),l=null!=(t=null==s?void 0:s.count)?t:0,c=null!=(n=null==s?void 0:s.time)?n:0,d=[],u=Lu.changesListeners.get(Z(e));if(null==u?void 0:u.length){const t=_i(e).map(e=>({type:1,name:e.name,value:e.value,prevValue:e.prevValue,unstable:!1})),n=(e=>{var t,n;if(!e)return[];const r=[];if(0===e.tag||11===e.tag||15===e.tag||14===e.tag){let n=e.memoizedState,o=null==(t=e.alternate)?void 0:t.memoizedState,i=0;for(;n;){if(n.queue&&void 0!==n.memoizedState){const e={type:2,name:i.toString(),value:n.memoizedState,prevValue:null==o?void 0:o.memoizedState};en(e.prevValue,e.value)||r.push(e)}n=n.next,o=null==o?void 0:o.next,i++}return r}if(1===e.tag){const t={type:3,name:"state",value:e.memoizedState,prevValue:null==(n=e.alternate)?void 0:n.memoizedState};return en(t.prevValue,t.value)||r.push(t),r}return r})(e),r=la(e).map(e=>({name:e.name,type:4,value:e.value,contextType:e.contextType}));u.forEach(e=>{e({propsChanges:t,stateChanges:n,contextChanges:r})})}const p={count:l+1,time:c+o||0,renders:[],displayName:i,type:G(e.type)||null,changes:d};Lu.reportData.set(a,p),qa=!0}},qa=!1,Ga=e=>!Xu.has(e.memoizedProps),Ja=!1,Ya=e=>{if(Ha())return;if(Ja)return;let t;Ja=!0;let n=!1;const r=()=>{n||(t&&cancelAnimationFrame(t),t=requestAnimationFrame(()=>{n=!0;const t=(()=>{Ba();const e=document.createElement("div");e.setAttribute("data-react-scan","true");const t=e.attachShadow({mode:"open"}),n=document.createElement("canvas");if(n.style.position="fixed",n.style.top="0",n.style.left="0",n.style.pointerEvents="none",n.style.zIndex="2147483646",n.setAttribute("aria-hidden","true"),t.appendChild(n),!n)return null;Ea=Ua(),Ca=n;const{innerWidth:r,innerHeight:o}=window;n.style.width=`${r}px`,n.style.height=`${o}px`;const i=r*Ea,a=o*Ea;n.width=i,n.height=a;const s=!1===Pu.options.value.useOffscreenCanvasWorker;if(Wa&&!window.__REACT_SCAN_EXTENSION__&&!s)try{const e=URL.createObjectURL(new Blob(['"use strict";(()=>{var D="Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace";var T=(t,n)=>{let r=n-t;return Math.abs(r)<.5?n:t+r*.2};var x="115,97,230";function P(t,n){return n[0]-t[0]}function F(t){return[...t.entries()].sort(P)}function v([t,n]){let r=`${n.slice(0,4).join(", ")} \\xD7${t}`;return r.length>40&&(r=`${r.slice(0,40)}\\u2026`),r}var $=t=>{let n=new Map;for(let{name:e,count:u}of t)n.set(e,(n.get(e)||0)+u);let r=new Map;for(let[e,u]of n){let A=r.get(u);A?A.push(e):r.set(u,[e])}let d=F(r),a=v(d[0]);for(let e=1,u=d.length;e<u;e++)a+=", "+v(d[e]);return a.length>40?`${a.slice(0,40)}\\u2026`:a},H=t=>{let n=0;for(let r of t)n+=r.width*r.height;return n};var N=(t,n)=>{let r=t.getContext("2d",{alpha:!0});return r&&r.scale(n,n),r},X=(t,n,r,d)=>{t.clearRect(0,0,n.width/r,n.height/r);let a=new Map,e=new Map;for(let i of d.values()){let{x:o,y:c,width:l,height:g,targetX:s,targetY:f,targetWidth:h,targetHeight:m,frame:O}=i;s!==o&&(i.x=T(o,s)),f!==c&&(i.y=T(c,f)),h!==l&&(i.width=T(l,h)),m!==g&&(i.height=T(g,m));let M=`${s??o},${f??c}`,L=`${M},${h??l},${m??g}`,S=a.get(M);S?S.push(i):a.set(M,[i]);let C=1-O/45;i.frame++;let _=e.get(L)||{x:o,y:c,width:l,height:g,alpha:C};C>_.alpha&&(_.alpha=C),e.set(L,_)}for(let{x:i,y:o,width:c,height:l,alpha:g}of e.values()){t.strokeStyle=`rgba(${x},${g})`,t.lineWidth=1;let s=Math.round(i)+.5,f=Math.round(o)+.5,h=Math.round(c),m=Math.round(l);t.beginPath(),t.rect(s,f,h,m),t.stroke(),t.fillStyle=`rgba(${x},${g*.1})`,t.fill()}t.font=`11px ${D}`;let u=new Map;t.textRendering="optimizeSpeed";for(let i of a.values()){let o=i[0],{x:c,y:l,frame:g}=o,s=1-g/45,f=$(i),{width:h}=t.measureText(f),m=11;u.set(`${c},${l},${h},${f}`,{text:f,width:h,height:m,alpha:s,x:c,y:l,outlines:i});let O=l-m-4;if(O<0&&(O=0),g>45)for(let M of i)d.delete(String(M.id))}let A=Array.from(u.entries()).sort(([i,o],[c,l])=>H(l.outlines)-H(o.outlines));for(let[i,o]of A)if(u.has(i))for(let[c,l]of u.entries()){if(i===c)continue;let{x:g,y:s,width:f,height:h}=o,{x:m,y:O,width:M,height:L}=l;g+f>m&&m+M>g&&s+h>O&&O+L>s&&(o.text=$(o.outlines.concat(l.outlines)),o.width=t.measureText(o.text).width,u.delete(c))}for(let i of u.values()){let{x:o,y:c,alpha:l,width:g,height:s,text:f}=i,h=c-s-4;h<0&&(h=0),t.fillStyle=`rgba(${x},${l})`,t.fillRect(o,h,g+4,s+4),t.fillStyle=`rgba(255,255,255,${l})`,t.fillText(f,o+2,h+s)}return d.size>0};var p=null,w=null,b=1,y=new Map,E=null,R=()=>{if(!w||!p)return;X(w,p,b,y)?E=requestAnimationFrame(R):E=null};self.onmessage=t=>{let{type:n}=t.data;if(n==="init"&&(p=t.data.canvas,b=t.data.dpr,p&&(p.width=t.data.width,p.height=t.data.height,w=N(p,b))),!(!p||!w)){if(n==="resize"){b=t.data.dpr,p.width=t.data.width*b,p.height=t.data.height*b,w.resetTransform(),w.scale(b,b),R();return}if(n==="draw-outlines"){let{data:r,names:d}=t.data,a=new Float32Array(r);for(let e=0;e<a.length;e+=7){let u=a[e+2],A=a[e+3],i=a[e+4],o=a[e+5],c=a[e+6],l={id:a[e],name:d[e/7],count:a[e+1],x:u,y:A,width:i,height:o,frame:0,targetX:u,targetY:A,targetWidth:i,targetHeight:o,didCommit:c},g=String(l.id),s=y.get(g);s?(s.count++,s.frame=0,s.targetX=u,s.targetY=A,s.targetWidth=i,s.targetHeight=o,s.didCommit=c):y.set(g,l)}E||(E=requestAnimationFrame(R));return}if(n==="scroll"){let{deltaX:r,deltaY:d}=t.data;for(let a of y.values()){let e=a.x-r,u=a.y-d;a.targetX=e,a.targetY=u}}}};})();\n'],{type:"application/javascript"}));Sa=new Worker(e);const t=n.transferControlToOffscreen();Sa.postMessage({type:"init",canvas:t,width:n.width,height:n.height,dpr:Ea},[t])}catch(e){Sa=null,"verbose"===Pu.options.value._debug&&console.warn("Failed to initialize OffscreenCanvas worker:",e)}Sa||(Ta=((e,t)=>{const n=e.getContext("2d",{alpha:!0});return n&&n.scale(t,t),n})(n,Ea));let l=!1;window.addEventListener("resize",()=>{l||(l=!0,setTimeout(()=>{const e=window.innerWidth,t=window.innerHeight;Ea=Ua(),n.style.width=`${e}px`,n.style.height=`${t}px`,Sa?Sa.postMessage({type:"resize",width:e,height:t,dpr:Ea}):(n.width=e*Ea,n.height=t*Ea,Ta&&(Ta.resetTransform(),Ta.scale(Ea,Ea)),Ia()),l=!1}))});let c=window.scrollX,d=window.scrollY,u=!1;return window.addEventListener("scroll",()=>{u||(u=!0,setTimeout(()=>{const{scrollX:e,scrollY:t}=window,n=e-c,r=t-d;c=e,d=t,Sa?Sa.postMessage({type:"scroll",deltaX:n,deltaY:r}):requestAnimationFrame(Na.bind(null,Aa,n,r)),u=!1},32))}),setInterval(()=>{$a.size&&requestAnimationFrame(Pa)},32),t.appendChild(n),e})();t&&document.documentElement.appendChild(t),e()}))},o=ga("react-scan-devtools-0.1.0",{onCommitStart:()=>{var e,t;null==(t=(e=Pu.options.value).onCommitStart)||t.call(e)},onActive:(()=>{let e=!1;return()=>{Ha()||e||(e=!0,r(),window.__REACT_SCAN_EXTENSION__||(globalThis.__REACT_SCAN__={ReactScanInternals:Pu}),clearInterval(Da),Da=setInterval(()=>{qa&&(Lu.lastReportTime.value=Date.now(),qa=!1)},50),window.hideIntro?window.hideIntro=void 0:console.log("%c[·] %cReact Scan","font-weight:bold;color:#7a68e8;font-size:20px;","font-weight:bold;font-size:14px;"))}})(),onError:()=>{},isValidFiber:Ga,onRender:(e,t)=>{var n,r,o,i,a;w(e)&&(null==(r=(n=Lu).interactionListeningForRenders)||r.call(n,e,t));const s=null==(o=Pu.instrumentation)?void 0:o.isPaused.value,l="inspect-off"===Lu.inspectState.value.kind||"uninitialized"===Lu.inspectState.value.kind;s&&l||(s||Fa(e),Pu.options.value.log&&(e=>{var t;const n=new Map;for(let r=0,o=e.length;r<o;r++){const o=e[r];if(!o.componentName)continue;const i=null!=(t=n.get(o.componentName))?t:[],a=Qt([{aggregatedCount:1,computedKey:null,name:o.componentName,frame:null,...o,changes:{type:o.changes.reduce((e,t)=>e|t.type,0),unstable:o.changes.some(e=>e.unstable)},phase:o.phase,computedCurrent:null}]);if(!a)continue;let s=null,l=null;if(o.changes)for(let e=0,t=o.changes.length;e<t;e++){const{name:t,prevValue:n,nextValue:r,unstable:a,type:c}=o.changes[e];1===c?(null!=s||(s={}),null!=l||(l={}),s[`${a?"⚠️":""}${t} (prev)`]=n,l[`${a?"⚠️":""}${t} (next)`]=r):i.push({prev:n,next:r,type:4===c?"context":"state",unstable:null!=a&&a})}s&&l&&i.push({prev:s,next:l,type:"props",unstable:!1}),n.set(a,i)}for(const[e,t]of Array.from(n.entries())){console.group(`%c${e}`,"background: hsla(0,0%,70%,.3); border-radius:3px; padding: 0 2px;");for(const{type:e,prev:n,next:r,unstable:o}of t)console.log(`${e}:`,o?"⚠️":"",n,"!==",r);console.groupEnd()}})(t),"focused"===Lu.inspectState.value.kind&&(Ao.value=Date.now()),l||Va(e),null==(a=(i=Pu.options.value).onRender)||a.call(i,e,t))},onCommitFinish:()=>{var e,t;r(),null==(t=(e=Pu.options.value).onCommitFinish)||t.call(e)},onPostCommitFiberRoot(){r()},trackChanges:!1});Pu.instrumentation=o},Xa=null;(()=>{if(null!==Xa)return Xa;try{Xa=window.matchMedia("(color-gamut: p3)").matches}catch{Xa=!1}})();var Ka,Za,Qa,es,ts,ns=new Set("display.position.top.right.bottom.left.z-index.overflow.overflow-x.overflow-y.width.height.min-width.min-height.max-width.max-height.margin-top.margin-right.margin-bottom.margin-left.padding-top.padding-right.padding-bottom.padding-left.flex-direction.flex-wrap.justify-content.align-items.align-self.align-content.flex-grow.flex-shrink.flex-basis.order.gap.row-gap.column-gap.grid-template-columns.grid-template-rows.grid-template-areas.font-family.font-size.font-weight.font-style.line-height.letter-spacing.text-align.text-decoration-line.text-decoration-style.text-transform.text-overflow.text-shadow.white-space.word-break.overflow-wrap.vertical-align.color.background-color.background-image.background-position.background-size.background-repeat.border-top-width.border-right-width.border-bottom-width.border-left-width.border-top-style.border-right-style.border-bottom-style.border-left-style.border-top-color.border-right-color.border-bottom-color.border-left-color.border-top-left-radius.border-top-right-radius.border-bottom-left-radius.border-bottom-right-radius.box-shadow.opacity.transform.filter.backdrop-filter.object-fit.object-position".split(".")),rs=e=>(e.tagName||"").toLowerCase(),os=typeof window<"u",is=os?(null!=(Za=null==(Ka=Object.getOwnPropertyDescriptor(Window.prototype,"requestAnimationFrame"))?void 0:Ka.value)?Za:window.requestAnimationFrame).bind(window):e=>0,as=os?(null!=(es=null==(Qa=Object.getOwnPropertyDescriptor(Window.prototype,"cancelAnimationFrame"))?void 0:Qa.value)?es:window.cancelAnimationFrame).bind(window):e=>{},ss="bippy-0.5.39",ls=Object.defineProperty,cs=Object.prototype.hasOwnProperty,ds=()=>{},us=e=>{try{Function.prototype.toString.call(e).indexOf("^_^")>-1&&setTimeout(()=>{throw Error("React is running in production mode, but dead code elimination has not been applied. Read how to correctly configure React for production: https://reactjs.org/link/perf-use-production-build")})}catch{}},ps=(e=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__)=>!(!e||!("getFiberRoots"in e)),hs=!1,ms=(e=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__)=>!!hs||(e&&"function"==typeof e.inject&&(ts=e.inject.toString()),!!(null==ts?void 0:ts.includes("(injected)"))),fs=new Set,gs=new Set,vs=e=>{let t=new Map,n=0,r={_instrumentationIsActive:!1,_instrumentationSource:ss,checkDCE:us,hasUnsupportedRendererAttached:!1,inject(e){let o=++n;return t.set(o,e),gs.add(e),r._instrumentationIsActive||(r._instrumentationIsActive=!0,fs.forEach(e=>e())),o},on:ds,onCommitFiberRoot:ds,onCommitFiberUnmount:ds,onPostCommitFiberRoot:ds,renderers:t,supportsFiber:!0,supportsFlight:!0};try{ls(globalThis,"__REACT_DEVTOOLS_GLOBAL_HOOK__",{configurable:!0,enumerable:!0,get:()=>r,set(t){if(t&&"object"==typeof t){let n=r.renderers;r=t,n.size>0&&(n.forEach((e,n)=>{gs.add(e),t.renderers.set(n,e)}),ws(e))}}});let t=window.hasOwnProperty,n=!1;ls(window,"hasOwnProperty",{configurable:!0,value:function(...e){try{if(!n&&"__REACT_DEVTOOLS_GLOBAL_HOOK__"===e[0])return globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__=void 0,n=!0,-0}catch{}return t.apply(this,e)},writable:!0})}catch{ws(e)}return r},ws=e=>{try{let t=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!t)return;if(!t._instrumentationSource){t.checkDCE=us,t.supportsFiber=!0,t.supportsFlight=!0,t.hasUnsupportedRendererAttached=!1,t._instrumentationSource=ss,t._instrumentationIsActive=!1;let e=ps(t);if(e||(t.on=ds),t.renderers.size)return t._instrumentationIsActive=!0,void fs.forEach(e=>e());let n=t.inject,r=ms(t);r&&!e&&(hs=!0,t.inject({scheduleRefresh(){}})&&(t._instrumentationIsActive=!0)),t.inject=e=>{let o=n(e);return gs.add(e),r&&t.renderers.set(o,e),t._instrumentationIsActive=!0,fs.forEach(e=>e()),o}}(t.renderers.size||t._instrumentationIsActive||ms())&&(null==e||e())}catch{}},bs=e=>cs.call(globalThis,"__REACT_DEVTOOLS_GLOBAL_HOOK__")?(ws(e),globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__):vs(e),xs=e=>{switch(e.tag){case 1:case 11:case 0:case 14:case 15:return!0;default:return!1}};function ys(e,t,n=!1){if(!e)return null;let r=t(e);if(r instanceof Promise)return(async()=>{if(!0===await r)return e;let o=n?e.return:e.child;for(;o;){let e=await _s(o,t,n);if(e)return e;o=n?null:o.sibling}return null})();if(!0===r)return e;let o=n?e.return:e.child;for(;o;){let e=ks(o,t,n);if(e)return e;o=n?null:o.sibling}return null}var ks=(e,t,n=!1)=>{if(!e)return null;if(!0===t(e))return e;let r=n?e.return:e.child;for(;r;){let e=ks(r,t,n);if(e)return e;r=n?null:r.sibling}return null},_s=async(e,t,n=!1)=>{if(!e)return null;if(!0===await t(e))return e;let r=n?e.return:e.child;for(;r;){let e=await _s(r,t,n);if(e)return e;r=n?null:r.sibling}return null},Ns=e=>{let t=e;return"function"==typeof t?t:"object"==typeof t&&t?Ns(t.type||t.render):null},Ss=e=>{let t=e;if("string"==typeof t)return t;if("function"!=typeof t&&("object"!=typeof t||!t))return null;let n=t.displayName||t.name||null;if(n)return n;let r=Ns(t);return r&&(r.displayName||r.name)||null},Cs=()=>{let e=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;return!!(null==e?void 0:e._instrumentationIsActive)||ps(e)||ms(e)},Ts=e=>{var t,n,r,o;let i=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;if(null==i?void 0:i.renderers)for(let n of i.renderers.values())try{let r=null==(t=n.findFiberByHostInstance)?void 0:t.call(n,e);if(r)return r}catch{}if("object"==typeof e&&e){if("_reactRootContainer"in e)return null==(o=null==(r=null==(n=e._reactRootContainer)?void 0:n._internalRoot)?void 0:r.current)?void 0:o.child;for(let t in e)if(t.startsWith("__reactContainer$")||t.startsWith("__reactInternalInstance$")||t.startsWith("__reactFiber"))return e[t]||null}return null},Es=/^[a-zA-Z][a-zA-Z\d+\-.]*:/,zs=["rsc://","file:///","webpack-internal://","webpack://","node:","turbopack://","metro://","/app-pages-browser/","/(app-pages-browser)/"],As=["<anonymous>","eval",""],Ms=/\.(jsx|tsx|ts|js)$/,$s=/(\.min|bundle|chunk|vendor|vendors|runtime|polyfill|polyfills)\.(js|mjs|cjs)$|(chunk|bundle|vendor|vendors|runtime|polyfill|polyfills|framework|app|main|index)[-_.][A-Za-z0-9_-]{4,}\.(js|mjs|cjs)$|[\da-f]{8,}\.(js|mjs|cjs)$|[-_.][\da-f]{20,}\.(js|mjs|cjs)$|\/dist\/|\/build\/|\/.next\/|\/out\/|\/node_modules\/|\.webpack\.|\.vite\.|\.turbopack\./i,Fs=/^\?[\w~.-]+(?:=[^&#]*)?(?:&[\w~.-]+(?:=[^&#]*)?)*$/,Rs=/(^|@)\S+:\d+/,Os=/^\s*at .*(\S+:\d+|\(native\))/m,Ds=/^(eval@)?(\[native code\])?$/,js=(e,t)=>{{let n=e.split("\n"),r=[];for(let e of n)if(/^\s*at\s+/.test(e)){let t=Is(e,void 0)[0];t&&r.push(t)}else if(/^\s*in\s+/.test(e)){let t=e.replace(/^\s*in\s+/,"").replace(/\s*\(at .*\)$/,"");r.push({functionName:t,source:e})}else if(e.match(Rs)){let t=Ws(e,void 0)[0];t&&r.push(t)}return Ps(r,t)}},Ls=e=>{if(!e.includes(":"))return[e,void 0,void 0];let t=e.startsWith("(")&&/:\d+\)$/.test(e)?e.slice(1,-1):e,n=/(.+?)(?::(\d+))?(?::(\d+))?$/.exec(t);return n?[n[1],n[2]||void 0,n[3]||void 0]:[t,void 0,void 0]},Ps=(e,t)=>t&&null!=t.slice?Array.isArray(t.slice)?e.slice(t.slice[0],t.slice[1]):e.slice(0,t.slice):e,Is=(e,t)=>Ps(e.split("\n").filter(e=>!!e.match(Os)),t).map(e=>{let t=e;t.includes("(eval ")&&(t=t.replace(/eval code/g,"eval").replace(/(\(eval at [^()]*)|(,.*$)/g,""));let n=t.replace(/^\s+/,"").replace(/\(eval code/g,"(").replace(/^.*?\s+/,""),r=n.match(/ (\(.+\)$)/);n=r?n.replace(r[0],""):n;let o=Ls(r?r[1]:n);return{functionName:r&&n||void 0,fileName:["eval","<anonymous>"].includes(o[0])?void 0:o[0],lineNumber:o[1]?+o[1]:void 0,columnNumber:o[2]?+o[2]:void 0,source:t}}),Ws=(e,t)=>Ps(e.split("\n").filter(e=>!e.match(Ds)),t).map(e=>{let t=e;if(t.includes(" > eval")&&(t=t.replace(/ line (\d+)(?: > eval line \d+)* > eval:\d+:\d+/g,":$1")),!t.includes("@")&&!t.includes(":"))return{functionName:t};{let e=/(([^\n\r"\u2028\u2029]*".[^\n\r"\u2028\u2029]*"[^\n\r@\u2028\u2029]*(?:@[^\n\r"\u2028\u2029]*"[^\n\r@\u2028\u2029]*)*(?:[\n\r\u2028\u2029][^@]*)?)?[^@]*)@/,n=t.match(e),r=n&&n[1]?n[1]:void 0,o=Ls(t.replace(e,""));return{functionName:r,fileName:o[0],lineNumber:o[1]?+o[1]:void 0,columnNumber:o[2]?+o[2]:void 0,source:t}}}),Us="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",Hs=new Uint8Array(64),Bs=new Uint8Array(128);for(let e=0;e<Us.length;e++){let t=Us.charCodeAt(e);Hs[e]=t,Bs[t]=e}function Vs(e,t){let n=0,r=0,o=0;do{o=Bs[e.next()],n|=(31&o)<<r,r+=5}while(32&o);let i=1&n;return n>>>=1,i&&(n=-2147483648|-n),t+n}function qs(e,t){return!(e.pos>=t)&&44!==e.peek()}var Gs=class{constructor(e){this.pos=0,this.buffer=e}next(){return this.buffer.charCodeAt(this.pos++)}peek(){return this.buffer.charCodeAt(this.pos)}indexOf(e){let{buffer:t,pos:n}=this,r=t.indexOf(e,n);return-1===r?t.length:r}};function Js(e){let{length:t}=e,n=new Gs(e),r=[],o=0,i=0,a=0,s=0,l=0;do{let e=n.indexOf(";"),t=[],c=!0,d=0;for(o=0;n.pos<e;){let r;o=Vs(n,o),o<d&&(c=!1),d=o,qs(n,e)?(i=Vs(n,i),a=Vs(n,a),s=Vs(n,s),qs(n,e)?(l=Vs(n,l),r=[o,i,a,s,l]):r=[o,i,a,s]):r=[o],t.push(r),n.pos++}c||Ys(t),r.push(t),n.pos=e+1}while(n.pos<=t);return r}function Ys(e){e.sort(Xs)}function Xs(e,t){return e[0]-t[0]}var Ks=/^[a-zA-Z][a-zA-Z\d+\-.]*:/,Zs=/^data:application\/json[^,]+base64,/,Qs=/(?:\/\/[@#][ \t]+sourceMappingURL=([^\s'"]+?)[ \t]*$)|(?:\/\*[@#][ \t]+sourceMappingURL=([^*]+?)[ \t]*(?:\*\/)[ \t]*$)/,el=typeof WeakRef<"u",tl=new Map,nl=new Map,rl=(e,t,n,r)=>{if(n<0||n>=e.length)return null;let o=e[n];if(!o||0===o.length)return null;let i=null;for(let e of o){if(!(e[0]<=r))break;i=e}if(!i||i.length<4)return null;let[,a,s,l]=i;if(void 0===a||void 0===s||void 0===l)return null;let c=t[a];return c?{columnNumber:l,fileName:c,lineNumber:s+1}:null},ol=e=>{if(!e)return!1;let t=e.trim();if(!t)return!1;let n=t.match(Ks);if(!n)return!0;let r=n[0].toLowerCase();return"http:"===r||"https:"===r},il=async(e,t=fetch)=>{if(!ol(e))return null;let n;try{let r=await t(e);if(!r.ok)return null;n=await r.text()}catch{return null}if(!n)return null;let r=((e,t)=>{let n,r=t.split("\n");for(let e=r.length-1;e>=0&&!n;e--){let t=r[e].match(Qs);t&&(n=t[1]||t[2])}if(!n)return null;let o=Ks.test(n);if(!(Zs.test(n)||o||n.startsWith("/"))){let t=e.split("/");t[t.length-1]=n,n=t.join("/")}return n})(e,n);if(!r||!ol(r))return null;try{let e=await t(r);if(!e.ok)return null;let n=await e.json();return"sections"in n?(e=>{let t=e.sections.map(({map:e,offset:t})=>({map:{...e,mappings:Js(e.mappings)},offset:t})),n=new Set;for(let e of t)for(let t of e.map.sources)n.add(t);return{file:e.file,mappings:[],names:[],sections:t,sourceRoot:void 0,sources:Array.from(n),sourcesContent:void 0,version:3}})(n):(e=>({file:e.file,mappings:Js(e.mappings),names:e.names,sourceRoot:e.sourceRoot,sources:e.sources,sourcesContent:e.sourcesContent,version:3}))(n)}catch{return null}},al=async(e,t=!0,n)=>{if(t&&tl.has(e)){let t=tl.get(e);if(null==t)return null;if(!(e=>el&&e instanceof WeakRef)(t))return t;{let n=t.deref();if(n)return n;tl.delete(e)}}if(t&&nl.has(e))return nl.get(e);let r=il(e,n);t&&nl.set(e,r);let o=await r;return t&&nl.delete(e),t&&(null===o?tl.set(e,null):tl.set(e,el?new WeakRef(o):o)),o},sl=async(e,t=!0,n)=>await Promise.all(e.map(async e=>{if(!e.fileName)return e;let r=await al(e.fileName,t,n);if(!r||"number"!=typeof e.lineNumber||"number"!=typeof e.columnNumber)return e;let o=((e,t,n)=>{if(e.sections){let r=null;for(let o of e.sections){if(!(t>o.offset.line||t===o.offset.line&&n>=o.offset.column))break;r=o}if(!r)return null;let o=t-r.offset.line,i=t===r.offset.line?n-r.offset.column:n;return rl(r.map.mappings,r.map.sources,o,i)}return rl(e.mappings,e.sources,t-1,n)})(r,e.lineNumber,e.columnNumber);return o?{...e,source:o.fileName&&e.source?e.source.replace(e.fileName,o.fileName):e.source,fileName:o.fileName,lineNumber:o.lineNumber,columnNumber:o.columnNumber,isSymbolicated:!0}:e})),ll=e=>{var t;return e._debugStack instanceof Error&&"string"==typeof(null==(t=e._debugStack)?void 0:t.stack)},cl=e=>{for(let t of gs){let n=t.currentDispatcherRef;n&&"object"==typeof n&&("H"in n?n.H=e:n.current=e)}},dl=e=>`\n    in ${e}`,ul=(e,t)=>{let n=dl(e);return t&&(n+=` (at ${t})`),n},pl=!1,hl=(e,t)=>{var n;if(!e||pl)return"";let r=Error.prepareStackTrace;Error.prepareStackTrace=void 0,pl=!0;let o=(()=>{let e=bs();for(let t of[...Array.from(gs),...Array.from(e.renderers.values())]){let e=t.currentDispatcherRef;if(e&&"object"==typeof e)return"H"in e?e.H:e.current}return null})();cl(null);let i=console.error,a=console.warn;console.error=()=>{},console.warn=()=>{};try{let r={DetermineComponentFrameRoot(){let n;try{if(t){let t=function(){throw Error()};if(Object.defineProperty(t.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(t,[])}catch(e){n=e}Reflect.construct(e,[],t)}else{try{t.call()}catch(e){n=e}e.call(t.prototype)}}else{try{throw Error()}catch(e){n=e}let t=e();t&&"function"==typeof t.catch&&t.catch(()=>{})}}catch(e){if(e instanceof Error&&n instanceof Error&&"string"==typeof e.stack)return[e.stack,n.stack]}return[null,null]}};r.DetermineComponentFrameRoot.displayName="DetermineComponentFrameRoot",(null==(n=Object.getOwnPropertyDescriptor(r.DetermineComponentFrameRoot,"name"))?void 0:n.configurable)&&Object.defineProperty(r.DetermineComponentFrameRoot,"name",{value:"DetermineComponentFrameRoot"});let[o,i]=r.DetermineComponentFrameRoot();if(o&&i){let t=o.split("\n"),n=i.split("\n"),r=0,a=0;for(;r<t.length&&!t[r].includes("DetermineComponentFrameRoot");)r++;for(;a<n.length&&!n[a].includes("DetermineComponentFrameRoot");)a++;if(r===t.length||a===n.length)for(r=t.length-1,a=n.length-1;r>=1&&a>=0&&t[r]!==n[a];)a--;for(;r>=1&&a>=0;r--,a--)if(t[r]!==n[a]){if(1!==r||1!==a)do{if(r--,a--,a<0||t[r]!==n[a]){let n=`\n${t[r].replace(" at new "," at ")}`,o=Ss(e);return o&&n.includes("<anonymous>")&&(n=n.replace("<anonymous>",o)),n}}while(r>=1&&a>=0);break}}}finally{pl=!1,Error.prepareStackTrace=r,cl(o),console.error=i,console.warn=a}let s=e?Ss(e):"";return s?dl(s):""},ml=(e,t)=>{let n="";switch(e.tag){case 28:n=dl("Activity");break;case 1:n=hl(e.type,!0);break;case 11:n=hl(e.type.render,!1);break;case 0:case 15:n=hl(e.type,!1);break;case 5:case 26:case 27:n=dl(e.type);break;case 16:n=dl("Lazy");break;case 13:n=e.child!==t&&null!==t?dl("Suspense Fallback"):dl("Suspense");break;case 19:n=dl("SuspenseList");break;case 30:n=dl("ViewTransition");break;default:return""}return n},fl=e=>{let t=Error.prepareStackTrace;Error.prepareStackTrace=void 0;let n=e;if(!n)return"";Error.prepareStackTrace=t,n.startsWith("Error: react-stack-top-frame\n")&&(n=n.slice(29));let r=n.indexOf("\n");return-1!==r&&(n=n.slice(r+1)),r=Math.max(n.indexOf("react_stack_bottom_frame"),n.indexOf("react-stack-bottom-frame")),-1!==r&&(r=n.lastIndexOf("\n",r)),-1===r?"":(n=n.slice(0,r),n)},gl=e=>{var t;return!(!(null==(t=e.fileName)?void 0:t.startsWith("rsc://"))||!e.functionName)},vl=(e,t)=>e.fileName===t.fileName&&e.lineNumber===t.lineNumber&&e.columnNumber===t.columnNumber,wl=async(e,t=!0,n)=>{let r=(e=>{let t=[];return ys(e,e=>{var n;if(!ll(e))return;let r="string"==typeof e.type?e.type:Ss(e.type)||"<anonymous>";t.push({componentName:r,stackFrames:js(fl(null==(n=e._debugStack)?void 0:n.stack))})},!0),t})(e),o=js((e=>{try{let t="",n=e,r=null;do{t+=ml(n,r);let e=n._debugInfo;if(e&&Array.isArray(e))for(let n=e.length-1;n>=0;n--){let r=e[n];"string"==typeof r.name&&(t+=ul(r.name,r.env))}r=n,n=n.return}while(n);return t}catch(e){return e instanceof Error?`\nError generating stack: ${e.message}\n${e.stack}`:""}})(e)),i=(e=>{var t;let n=new Map;for(let r of e)for(let e of r.stackFrames){if(!gl(e))continue;let r=e.functionName,o=null!=(t=n.get(r))?t:[];o.some(t=>vl(t,e))||(o.push(e),n.set(r,o))}return n})(r),a=new Map;return sl(o.map(e=>{var t,n;return null!=(n=null==(t=e.source)?void 0:t.includes("(at Server)"))&&n?((e,t,n)=>{var r,o;if(!e.functionName)return{...e,isServer:!0};let i=t.get(e.functionName);if(!i||0===i.length)return{...e,isServer:!0};let a=null!=(r=n.get(e.functionName))?r:0,s=i[a%i.length];return n.set(e.functionName,a+1),{...e,isServer:!0,fileName:s.fileName,lineNumber:s.lineNumber,columnNumber:s.columnNumber,source:null==(o=e.source)?void 0:o.replace("(at Server)",`(${s.fileName}:${s.lineNumber}:${s.columnNumber})`)}})(e,i,a):e}).filter((e,t,n)=>{if(0===t)return!0;let r=n[t-1];return e.functionName!==r.functionName}),t,n)},bl=e=>e.split("/").filter(Boolean).length,xl=e=>{let t=e.indexOf("/",1);if(-1===t||1!==bl(e.slice(0,t)))return e;let n=e.slice(t);if(!Ms.test(n)||bl(n)<2)return e;let r=(e=>{var t;return null!=(t=e.split("/").filter(Boolean)[0])?t:null})(n);return!r||r.startsWith("@")||r.length>4?e:n},yl=e=>{if(!e||As.some(t=>t===e))return"";let t=e,n=t.startsWith("http://")||t.startsWith("https://");if(n)try{t=new URL(t).pathname}catch{}if(n&&(t=xl(t)),t.startsWith("about://React/")){let e=t.slice(14),n=e.indexOf("/"),r=e.indexOf(":");t=-1!==n&&(-1===r||n<r)?e.slice(n+1):e}let r=!0;for(;r;){r=!1;for(let e of zs)if(t.startsWith(e)){t=t.slice(e.length),"file:///"===e&&(t=`/${t.replace(/^\/+/,"")}`),r=!0;break}}if(Es.test(t)){let e=t.match(Es);e&&(t=t.slice(e[0].length))}if(t.startsWith("//")){let e=t.indexOf("/",2);t=-1===e?"":t.slice(e)}let o=t.indexOf("?");if(-1!==o){let e=t.slice(o);Fs.test(e)&&(t=t.slice(0,o))}return t},kl=e=>{let t=yl(e);return!(!t||!Ms.test(t)||$s.test(t))},_l=Symbol.for("react.context"),Nl=Error("Suspense Exception: This is not a real error! It's an implementation detail of `use` to interrupt the current render."),Sl=e=>e._currentValue;typeof Proxy>"u"||new Proxy({readContext:Sl,use:e=>{if("object"==typeof e&&e){let t=e;if("function"==typeof t.then){let e=t;switch(e.status){case"fulfilled":return e.value,e.value;case"rejected":throw e.reason}throw Nl}if(t.$$typeof===_l&&"_currentValue"in t){let e=t,n=Sl(e);return e.displayName,n}}throw Error("An unsupported type was passed to use(): "+String(e))},useCallback:e=>e,useContext:e=>{let t=Sl(e);return e.displayName,t},useEffect:e=>{},useImperativeHandle:e=>{"object"==typeof e&&e&&"current"in e&&e.current},useLayoutEffect:e=>{},useInsertionEffect:e=>{},useMemo:e=>e(),useReducer:(e,t,n)=>[void 0===n?t:n(t),()=>{}],useRef:e=>{let t={current:e};return t},useState:e=>["function"==typeof e?e():e,()=>{}],useDebugValue:(e,t)=>{"function"==typeof t&&t(e)},useDeferredValue:e=>e,useTransition:()=>[false,()=>{}],useSyncExternalStore:(e,t)=>t(),useId:()=>"",useHostTransitionStatus:()=>Sl({_currentValue:null}),useFormState:(e,t)=>{let{value:n}=((e,t)=>{let n;return n=t,{value:n,error:null}})(0,t);return[n,()=>{},!1]},useActionState:(e,t)=>{let{value:n}=((e,t)=>{let n;return n=t,{value:n,error:null}})(0,t);return[n,()=>{},!1]},useOptimistic:e=>[e,()=>{}],useMemoCache:e=>[],useCacheRefresh:()=>()=>{},useEffectEvent:e=>e},{get(e,t){if(Object.prototype.hasOwnProperty.call(e,t))return e[t];let n=Error("Missing method in Dispatcher: "+t);throw n.name="ReactDebugToolsUnsupportedHookError",n}}),(()=>{try{typeof window<"u"&&((null==(e=window.document)?void 0:e.createElement)||"ReactNative"===(null==(t=window.navigator)?void 0:t.product))&&bs()}catch{}var e,t})();var Cl,Tl,El=(e,t)=>e.length>t?`${e.slice(0,t)}...`:e,zl=/^(?:\.\/)?\/?\([a-z][a-z0-9-]*\)\//,Al=e=>{let t=yl(e);return t=t.replace(zl,""),t.startsWith("./")&&(t=t.slice(2)),t},Ml=e=>e.startsWith("data-react-grab-"),$l=new Set(["_","$","motion.","styled.","chakra.","ark.","Primitive.","Slot."]),Fl=new Set(["InnerLayoutRouter","RedirectErrorBoundary","RedirectBoundary","HTTPAccessFallbackErrorBoundary","HTTPAccessFallbackBoundary","LoadingBoundary","ErrorBoundary","InnerScrollAndFocusHandler","ScrollAndFocusHandler","RenderFromTemplateContext","OuterLayoutRouter","body","html","DevRootHTTPAccessFallbackBoundary","AppDevOverlayErrorBoundary","AppDevOverlay","HotReload","Router","ErrorBoundaryHandler","AppRouter","ServerRoot","SegmentStateProvider","RootErrorBoundary","LoadableComponent","MotionDOMComponent"]),Rl=new Set(["Suspense","Fragment","StrictMode","Profiler","SuspenseList"]),Ol=e=>(null!=Tl||(Tl=typeof document<"u"&&!(!document.getElementById("__NEXT_DATA__")&&!document.querySelector("nextjs-portal"))),Tl),Dl=e=>{if(Fl.has(e)||Rl.has(e))return!0;for(let t of $l)if(e.startsWith(t))return!0;return!1},jl=e=>!(!e||Dl(e)||"SlotClone"===e||"Slot"===e),Ll=e=>!(e.length<=1||Dl(e)||e[0]!==e[0].toUpperCase()||e.endsWith("Provider")||e.endsWith("Context")),Pl=["about://React/","rsc://React/"],Il=e=>Pl.some(t=>e.startsWith(t)),Wl=e=>{for(let t of Pl){if(!e.startsWith(t))continue;let n=e.indexOf("/",t.length),r=e.lastIndexOf("?");if(n>-1&&r>-1)return decodeURI(e.slice(n+1,r))}return e},Ul=async e=>{var t,n,r,o,i,a;let s=[],l=[];for(let o=0;o<e.length;o++){let i=e[o];!i.isServer||!i.fileName||(s.push(o),l.push({file:Wl(i.fileName),methodName:null!=(t=i.functionName)?t:"<unknown>",line1:null!=(n=i.lineNumber)?n:null,column1:null!=(r=i.columnNumber)?r:null,arguments:[]}))}if(0===l.length)return e;let c=new AbortController,d=setTimeout(()=>c.abort(),5e3);try{let t=await fetch(`${(()=>{var e;if(void 0!==Cl)return Cl;let t=null==(e=document.querySelector('script[src*="/_next/"]'))?void 0:e.src,n=t?new URL(t).pathname:"",r=n.indexOf("/_next/");return Cl=r>0?n.slice(0,r):""})()}/__nextjs_original-stack-frames`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({frames:l,isServer:!0,isEdgeServer:!1,isAppDirectory:!0}),signal:c.signal});if(!t.ok)return e;let n=await t.json(),r=[...e];for(let t=0;t<s.length;t++){let l=n[t];if("fulfilled"!==(null==l?void 0:l.status))continue;let c=null==(o=l.value)?void 0:o.originalStackFrame;if(!(null==c?void 0:c.file)||c.ignored)continue;let d=s[t];r[d]={...e[d],fileName:c.file,lineNumber:null!=(i=c.line1)?i:void 0,columnNumber:null!=(a=c.column1)?a:void 0,isSymbolicated:!0}}return r}catch{return e}finally{clearTimeout(d)}},Hl=(e,t)=>{if(!t.some(e=>e.isServer&&!e.fileName&&e.functionName))return t;let n=(e=>{let t=new Map;return ys(e,e=>{if(!ll(e))return!1;let n=fl(e._debugStack.stack);if(!n)return!1;for(let e of js(n))!e.functionName||!e.fileName||Il(e.fileName)&&(t.has(e.functionName)||t.set(e.functionName,{...e,isServer:!0}));return!1},!0),t})(e);return 0===n.size?t:t.map(e=>{if(!e.isServer||e.fileName||!e.functionName)return e;let t=n.get(e.functionName);return t?{...e,fileName:t.fileName,lineNumber:t.lineNumber,columnNumber:t.columnNumber}:e})},Bl=e=>{if(!Cs())return e;let t=e;for(;t;){if(Ts(t))return t;t=t.parentElement}return e},Vl=new WeakMap,ql=e=>{if(!Cs())return Promise.resolve([]);let t=Bl(e),n=Vl.get(t);if(n)return n;let r=(async e=>{try{let t=Ts(e);if(!t)return null;let n=await wl(t);return Ol()?await Ul(Hl(t,n)):n}catch{return null}})(t);return Vl.set(t,r),r},Gl=e=>{if(!Cs())return null;let t=Ts(Bl(e));if(!t)return null;let n=t.return;for(;n;){if(xs(n)){let e=Ss(n.type);if(e&&jl(e))return e}n=n.return}return null},Jl=async(e,t={})=>{var n;let r=null!=(n=t.maxLines)?n:3,o=await ql(e);if(o&&(e=>!!e&&e.some(e=>!!(e.fileName&&kl(e.fileName)||e.isServer&&(!e.functionName||Ll(e.functionName)))))(o))return((e,t={})=>{let{maxLines:n=3}=t,r=Ol(),o=[];for(let t of e){if(o.length>=n)break;let e=t.fileName&&kl(t.fileName);if(!t.isServer||e||t.functionName&&!Ll(t.functionName)){if(e){let e="\n  in ",n=t.functionName&&Ll(t.functionName);n&&(e+=`${t.functionName} (at `),e+=Al(t.fileName),r&&t.lineNumber&&(e+=`:${t.lineNumber}`,t.columnNumber&&(e+=`:${t.columnNumber}`)),n&&(e+=")"),o.push(e)}}else o.push(`\n  in ${t.functionName||"<anonymous>"} (at Server)`)}return o.join("")})(o,t);let i=((e,t)=>{if(!Cs())return[];let n=Ts(e);if(!n)return[];let r=[];return ys(n,e=>{if(r.length>=t)return!0;if(xs(e)){let t=Ss(e.type);t&&jl(t)&&r.push(t)}return!1},!0),r})(e,r);return i.length>0?i.map(e=>`\n  in ${e}`).join(""):""},Yl=e=>El(e,15),Xl=e=>{var t,n,r,o,i,a;let s=rs(e),l=e instanceof HTMLElement?null!=(o=null!=(r=null==(t=e.innerText)?void 0:t.trim())?r:null==(n=e.textContent)?void 0:n.trim())?o:"":null!=(a=null==(i=e.textContent)?void 0:i.trim())?a:"",c="";for(let{name:t,value:n}of e.attributes)Ml(t)||(c+=` ${t}="${Yl(n)}"`);let d=[],u=[],p=!1,h=Array.from(e.childNodes);for(let e of h)e.nodeType!==Node.COMMENT_NODE&&(e.nodeType===Node.TEXT_NODE?e.textContent&&e.textContent.trim().length>0&&(p=!0):e instanceof Element&&(p?u.push(e):d.push(e)));let m=e=>0===e.length?"":e.length<=2?e.map(e=>`<${rs(e)} ...>`).join("\n  "):`(${e.length} elements)`,f="",g=m(d);g&&(f+=`\n  ${g}`),l.length>0&&(f+=`\n  ${El(l,100)}`);let v=m(u);return v&&(f+=`\n  ${v}`),f.length>0?`<${s}${c}>${f}\n</${s}>`:`<${s}${c} />`},Kl=new Map,Zl=new WeakSet,Ql=new Map,ec=new Map;typeof window<"u"&&(window.requestAnimationFrame=e=>{if(!(e=>!!Zl.has(e))(e))return is(e);return is(t=>{e(t)})},window.cancelAnimationFrame=e=>{if(Kl.has(e))return void Kl.delete(e);let t=ec.get(e);if(void 0!==t)return as(t.nativeId),void ec.delete(e);let n=Ql.get(e);if(void 0!==n)return Kl.delete(n),void Ql.delete(e);as(e)});var tc,nc,rc=new Set(["role","name","aria-label","rel","href"]),oc=e=>{if(!/^[a-z\-]{3,}$/i.test(e))return!1;let t=e.split(/-|[A-Z]/);for(let e of t)if(e.length<=2||/[^aeiou]{4,}/i.test(e))return!1;return!0},ic=e=>{let t=e[0].name;for(let n=1;n<e.length;n++)t=`${e[n].name} > ${t}`;return t},ac=e=>{let t=0;for(let n of e)t+=n.penalty;return t},sc=(e,t)=>ac(e)-ac(t),lc=(e,t)=>{let n=e.parentNode;if(!n)return;let r=n.firstChild;if(!r)return;let o=0;for(;r&&(r.nodeType===Node.ELEMENT_NODE&&(void 0===t||r.tagName.toLowerCase()===t)&&o++,r!==e);)r=r.nextSibling;return o},cc=(e,t)=>"html"===e?"html":`${e}:nth-child(${t})`,dc=(e,t)=>"html"===e?"html":`${e}:nth-of-type(${t})`,uc=(e,t)=>{let n=[],r=e.getAttribute("id"),o=e.tagName.toLowerCase();r&&oc(r)&&n.push({name:`#${CSS.escape(r)}`,penalty:0});for(let t of e.classList)oc(t)&&n.push({name:`.${CSS.escape(t)}`,penalty:1});for(let r of e.attributes)t(r.name,r.value)&&n.push({name:`[${CSS.escape(r.name)}="${CSS.escape(r.value)}"]`,penalty:2});n.push({name:o,penalty:5});let i=lc(e,o);void 0!==i&&n.push({name:dc(o,i),penalty:10});let a=lc(e);return void 0!==a&&n.push({name:cc(o,a),penalty:50}),n},pc=(e,t=1e4,n=[])=>{if(t<=0)return[];if(0===e.length)return[n];let r=[];for(let o of e[0]){let i=t-r.length;if(i<=0)break;r.push(...pc(e.slice(1),i,[...n,o]))}return r},hc=(e,t)=>1===t.querySelectorAll(ic(e)).length,mc=(e,t)=>{let n=e,r=[];for(;n&&n!==t;){let e=n.tagName.toLowerCase(),t=lc(n,e);if(void 0===t)return;r.push({name:dc(e,t),penalty:10}),n=n.parentElement}return hc(r,t)?r:void 0},fc=(e,t,n,r)=>{if(e.nodeType!==Node.ELEMENT_NODE)throw Error("Can't generate CSS selector for non-element node type.");if("html"===e.tagName.toLowerCase())return"html";let o,i=((e,t)=>{var n;let r=null==(n=t.getRootNode)?void 0:n.call(t);return r instanceof ShadowRoot?r:e.nodeType===Node.DOCUMENT_NODE?e:e.ownerDocument})(t,e),a=Date.now(),s=[],l=e,c=0;for(;l&&l!==i&&!o;)if(s.push(uc(l,r)),l=l.parentElement,c++,c>=3){let t=pc(s);t.sort(sc);for(let r of t){if(Date.now()-a>n){let t=mc(e,i);if(!t)throw Error(`Timeout: Can't find a unique selector after ${n}ms`);return ic(t)}if(hc(r,i)){o=r;break}}}if(!o&&c<3){let e=pc(s);e.sort(sc);for(let t of e){if(Date.now()-a>n)break;if(hc(t,i)){o=t;break}}}if(!o)throw Error("Selector was not found.");return ic(o)},gc=e=>typeof CSS<"u"&&"function"==typeof CSS.escape?CSS.escape(e):e.replace(/[^a-zA-Z0-9_-]/g,e=>`\\${e}`),vc=e=>{var t;return null!=(t=e.ownerDocument.body)?t:e.ownerDocument.documentElement},wc=new Set(["data-testid","data-test-id","data-test","data-cy","data-qa","aria-label","role","name","title","alt"]),bc=e=>e.length>0&&e.length<=120,xc=(e,t)=>{try{let n=e.ownerDocument.querySelectorAll(t);return 1===n.length&&n[0]===e}catch{return!1}},yc=(e,t=!0)=>{let n=(e=>{if(e instanceof HTMLElement&&e.id){let t=`#${gc(e.id)}`;if(xc(e,t))return t}for(let t of wc){let n=e.getAttribute(t);if(!n||!bc(n))continue;let r=`[${t}=${JSON.stringify(n)}]`;if(xc(e,r))return r;let o=`${e.tagName.toLowerCase()}${r}`;if(xc(e,o))return o}return null})(e);if(n)return n;if(t)try{let t=fc(e,vc(e),200,(e,t)=>((e,t)=>{let n=rc.has(e)||e.startsWith("data-")&&oc(e),r=oc(t)&&t.length<100||t.startsWith("#")&&oc(t.slice(1));return n&&r})(e,t)||wc.has(e)&&bc(t));if(t)return t}catch{}return(e=>{let t=[],n=vc(e),r=e;for(;r;){if(r instanceof HTMLElement&&r.id){t.unshift(`#${gc(r.id)}`);break}let e=r.parentElement;if(!e){t.unshift(r.tagName.toLowerCase());break}let o=Array.from(e.children).indexOf(r),i=o>=0?o+1:1;if(t.unshift(`${r.tagName.toLowerCase()}:nth-child(${i})`),e===n){t.unshift(n.tagName.toLowerCase());break}r=e}return t.join(" > ")})(e)},kc=new Map(["top","right","bottom","left"].flatMap(e=>[[`border-${e}-style`,e],[`border-${e}-color`,e]])),_c=null,Nc=new Map,Sc=e=>{let t=Nc.get(e);if(t)return t;let n=_c||((_c=document.createElement("iframe")).style.cssText="position:fixed;left:-9999px;width:0;height:0;border:none;visibility:hidden;",document.body.appendChild(_c),_c),r=n.contentDocument,o=r.createElement(e);r.body.appendChild(o);let i=n.contentWindow.getComputedStyle(o),a=new Map;for(let e of ns){let t=i.getPropertyValue(e);t&&a.set(e,t)}return o.remove(),Nc.set(e,a),a},Cc=(e,t)=>{let n=kc.get(e);if(!n)return!1;let r=t.getPropertyValue(`border-${n}-width`);return"0px"===r||"0"===r},Tc=e=>{var t;let n=Sc(e.tagName.toLowerCase()),r=getComputedStyle(e),o=[];for(let e of ns){let t=r.getPropertyValue(e);t&&t!==n.get(e)&&(Cc(e,r)||o.push(`${e}: ${t};`))}let i=null==(t=e.getAttribute("class"))?void 0:t.trim(),a=o.join("\n");return i?a?`className: ${i}\n\n${a}`:`className: ${i}`:a},Ec=async e=>{try{const t=await(async e=>{var t;let n=null!=(t=await ql(e))?t:[],r=await Jl(e);return{element:e,htmlPreview:Xl(e),stackString:r,stack:n,componentName:Gl(e),fiber:Ts(e),selector:yc(e),styles:Tc(e)}})(e),n=`${t.htmlPreview}${t.stackString}`;return!!n.trim()&&(await navigator.clipboard.writeText(n),!0)}catch{return!1}},zc=Et(()=>lo("absolute inset-0 flex items-center gap-x-2","translate-y-0","transition-transform duration-300",wo.value&&"-translate-y-[200%]")),Ac=()=>{const e=Xe(null),t=Xe(null),[n,r]=Ge(null);Jt(()=>{const e=Lu.inspectState.value;"focused"===e.kind&&r(e.fiber)}),Jt(()=>{const n=zo.value;ut(()=>{var r,o;if("focused"!==Lu.inspectState.value.kind)return;if(!e.current||!t.current)return;const{totalUpdates:i,currentIndex:a,updates:s,isVisible:l,windowOffset:c}=n,d=Math.max(0,i-1),u=l?`#${c+a} Re-render`:d>0?`×${d}`:"";let p;if(d>0&&a>=0&&a<s.length){const e=null==(o=null==(r=s[a])?void 0:r.fiberInfo)?void 0:o.selfTime;p=e>0?e<.1-Number.EPSILON?"< 0.1ms":`${Number(e.toFixed(1))}ms`:void 0}e.current.dataset.text=u?` • ${u}`:"",t.current.dataset.text=p?` • ${p}`:""})});const o=Ke(()=>{if(!n)return null;const{name:e,wrappers:t,wrapperTypes:r}=mo(n),o=t.length?`${t.join("(")}(${e})${")".repeat(t.length)}`:null!=e?e:"",i=r[0];return Rn("span",{title:o,className:"flex items-center gap-x-1",children:[null!=e?e:"Unknown",Rn("span",{title:null==i?void 0:i.title,className:"flex items-center gap-x-1 text-[10px] text-purple-400",children:!!i&&Rn(me,{children:[Rn("span",{className:lo("rounded py-[1px] px-1","truncate",i.compiler&&"bg-purple-800 text-neutral-400",!i.compiler&&"bg-neutral-700 text-neutral-300","memo"===i.type&&"bg-[#5f3f9a] text-white"),children:i.type},i.type),i.compiler&&Rn("span",{className:"text-yellow-300",children:"✨"})]})}),r.length>1&&Rn("span",{className:"text-[10px] text-neutral-400",children:["×",r.length-1]})]})},[n]);return Rn("div",{className:zc,children:[o,Rn("div",{className:"flex items-center gap-x-2 mr-auto text-xs text-[#888]",children:[Rn("span",{ref:e,className:"with-data-text cursor-pointer !overflow-visible",title:"Click to toggle between rerenders and total renders"}),Rn("span",{ref:t,className:"with-data-text !overflow-visible"})]})]})},Mc=()=>{const e=((e,t,n=t)=>{const[r,o]=Ge(e);return Je(()=>{if(e===r)return;const i=setTimeout(()=>o(e),e?t:n);return()=>clearTimeout(i)},[e,t,n]),r})("focused"===Lu.inspectState.value.kind,150,0),t=Wt(!1),n=()=>{_o.value={view:"none"},Lu.inspectState.value={kind:"inspect-off"}},r=async()=>{const e=Lu.inspectState.value;if("focused"!==e.kind||!e.focusedDomElement)return;await Ec(e.focusedDomElement)&&(t.value=!0,setTimeout(()=>{t.value=!1,n()},600))},o=Xe(r);o.current=r,Je(()=>{const e=e=>{const t=Lu.inspectState.value;"focused"===t.kind&&t.focusedDomElement&&("undefined"!=typeof window&&Boolean(window.__REACT_GRAB__)||(e.metaKey||e.ctrlKey)&&(e.shiftKey||e.altKey||"c"!==e.key&&"KeyC"!==e.code||(()=>{const e=document.activeElement;if(!e)return!1;const t=e.tagName;return"INPUT"===t||"TEXTAREA"===t||"SELECT"===t||!!(e instanceof HTMLElement&&e.isContentEditable)})()||(()=>{var e;const t=null==(e=window.getSelection)?void 0:e.call(window);return Boolean(t&&t.toString().length>0)})()||(e.preventDefault(),e.stopImmediatePropagation(),o.current())))};return document.addEventListener("keydown",e,{capture:!0}),()=>{document.removeEventListener("keydown",e,{capture:!0})}},[]);if("notifications"===_o.value.view)return;const i="focused"===Lu.inspectState.value.kind,a=(()=>{if("undefined"==typeof navigator)return!1;const e=navigator.platform||"";return/Mac|iPhone|iPad|iPod/i.test(e||navigator.userAgent)})()?"⌘C":"Ctrl+C";return Rn("div",{className:"react-scan-header",children:[Rn("div",{className:"relative flex-1 h-full",children:Rn("div",{className:lo("react-scan-header-item is-visible",!e&&"!duration-0"),children:Rn(Ac,{})})}),i&&Rn("button",{type:"button",title:`Copy element (${a})`,className:"react-scan-close-button",onClick:r,children:Rn(On,{name:t.value?"icon-check":"icon-copy",className:lo(t.value&&"text-green-500")})}),Rn("button",{type:"button",title:"Close",className:"react-scan-close-button",onClick:n,children:Rn(On,{name:"icon-close"})})]})},$c=({className:e,...t})=>Rn("div",{className:lo("react-scan-toggle",e),children:[Rn("input",{type:"checkbox",...t}),Rn("div",{})]}),Fc=({fps:e})=>{return Rn("div",{className:lo("flex items-center gap-x-1 px-2 w-full","h-6","rounded-md","font-mono leading-none","bg-[#141414]","ring-1 ring-white/[0.08]"),children:[Rn("div",{style:{color:(t=e,t<30?"#EF4444":t<50?"#F59E0B":"rgb(214,132,245)")},className:"text-sm font-semibold tracking-wide transition-colors ease-in-out w-full flex justify-center items-center",children:e}),Rn("span",{className:"text-white/30 text-[11px] font-medium tracking-wide ml-auto min-w-fit",children:"FPS"})]});var t},Rc=()=>{const[e,t]=Ge(null);return Je(()=>{const e=setInterval(()=>{t(ra())},200);return()=>clearInterval(e)},[]),Rn("div",{className:lo("flex items-center justify-end gap-x-2 px-1 ml-1 w-[72px]","whitespace-nowrap text-sm text-white"),children:null===e?Rn(me,{children:"️"}):Rn(Fc,{fps:e})})},Oc=e=>e(),Dc=class e extends Array{constructor(e=25){super(),n(this,"capacity",e)}push(...e){const t=super.push(...e);for(;this.length>this.capacity;)this.shift();return t}static fromArray(t,n){const r=new e(n);return r.push(...t),r}},jc=new class{constructor(e){n(this,"subscribers",new Set),n(this,"currentValue"),this.currentValue=e}subscribe(e){return this.subscribers.add(e),e(this.currentValue),()=>{this.subscribers.delete(e)}}setState(e){this.currentValue=e,this.subscribers.forEach(t=>t(e))}getCurrentState(){return this.currentValue}}(new Dc(150)),Lc=50,Pc=new class{constructor(){n(this,"channels",{})}publish(e,t,n=!0){const r=this.channels[t];if(!r){if(!n)return;return this.channels[t]={callbacks:new Dc(Lc),state:new Dc(Lc)},void this.channels[t].state.push(e)}r.state.push(e),r.callbacks.forEach(t=>t(e))}getAvailableChannels(){return Dc.fromArray(Object.keys(this.channels),Lc)}subscribe(e,t,n=!1){const r=()=>(n||this.channels[e].state.forEach(e=>{t(e)}),()=>{const n=this.channels[e].callbacks.filter(e=>e!==t);this.channels[e].callbacks=Dc.fromArray(n,Lc)}),o=this.channels[e];return o?(o.callbacks.push(t),r()):(this.channels[e]={callbacks:new Dc(Lc),state:new Dc(Lc)},this.channels[e].callbacks.push(t),r())}updateChannelState(e,t,n=!0){const r=this.channels[e];if(!r){if(!n)return;const r=new Dc(Lc),o={callbacks:new Dc(Lc),state:r};return this.channels[e]=o,void(o.state=t(r))}r.state=t(r.state)}getChannelState(e){var t;return null!=(t=this.channels[e].state)?t:new Dc(Lc)}},Ic={skipProviders:!0,skipHocs:!0,skipContainers:!0,skipMinified:!0,skipUtilities:!0,skipBoundaries:!0},Wc={providers:[/Provider$/,/^Provider$/,/^Context$/],hocs:[/^with[A-Z]/,/^forward(?:Ref)?$/i,/^Forward(?:Ref)?\(/],containers:[/^(?:App)?Container$/,/^Root$/,/^ReactDev/],utilities:[/^Fragment$/,/^Suspense$/,/^ErrorBoundary$/,/^Portal$/,/^Consumer$/,/^Layout$/,/^Router/,/^Hydration/],boundaries:[/^Boundary$/,/Boundary$/,/^Provider$/,/Provider$/]},Uc=(e,t=Ic)=>{const n=[];return t.skipProviders&&n.push(...Wc.providers),t.skipHocs&&n.push(...Wc.hocs),t.skipContainers&&n.push(...Wc.containers),t.skipUtilities&&n.push(...Wc.utilities),t.skipBoundaries&&n.push(...Wc.boundaries),!n.some(t=>t.test(e))},Hc=[/^[a-z]$/,/^[a-z][0-9]$/,/^_+$/,/^[A-Za-z][_$]$/,/^[a-z]{1,2}$/],Bc=e=>{var t,n;for(let t=0;t<Hc.length;t++)if(Hc[t].test(e))return!0;const r=!/[aeiou]/i.test(e),o=(null!=(n=null==(t=e.match(/\d/g))?void 0:t.length)?n:0)>e.length/2,i=/^[a-z]+$/.test(e),a=/[$_]{2,}/.test(e);return Number(r)+Number(o)+Number(i)+Number(a)>=2},Vc=e=>{const t=J(e);return t?t.replace(/^(?:Memo|Forward(?:Ref)?|With.*?)\((?<inner>.*?)\)$/,"$<inner>"):""},qc="never-hidden",Gc=null,Jc=e=>{(()=>{null==tc||tc();const e=()=>{document.hidden&&(qc=Date.now())};document.addEventListener("visibilitychange",e),tc=()=>{document.removeEventListener("visibilitychange",e)}})();const t=new Map,n=new Map,r=r=>{if(!r.interactionId)return;if(r.interactionId&&r.target&&!n.has(r.interactionId)&&n.set(r.interactionId,r.target),r.target){let e=r.target;for(;e;){if("react-scan-toolbar-root"===e.id||"react-scan-root"===e.id)return;e=e.parentElement}}const o=t.get(r.interactionId);if(o)r.duration>o.latency?(o.entries=[r],o.latency=r.duration):r.duration===o.latency&&r.startTime===o.entries[0].startTime&&o.entries.push(r);else{const n=(i=r.name,["pointerup","click"].includes(i)?"pointer":(i.includes("key"),["keydown","keyup"].includes(i)?"keyboard":null));if(!n)return;const o={id:r.interactionId,latency:r.duration,entries:[r],target:r.target,type:n,startTime:r.startTime,endTime:Date.now(),processingStart:r.processingStart,processingEnd:r.processingEnd,duration:r.duration,inputDelay:r.processingStart-r.startTime,processingDuration:r.processingEnd-r.processingStart,presentationDelay:r.duration-(r.processingEnd-r.startTime),timestamp:Date.now(),timeSinceTabInactive:"never-hidden"===qc?"never-hidden":Date.now()-qc,visibilityState:document.visibilityState,timeOrigin:performance.timeOrigin,referrer:document.referrer};t.set(o.id,o),Gc||(Gc=requestAnimationFrame(()=>{requestAnimationFrame(()=>{e(t.get(o.id)),Gc=null})}))}var i},o=new PerformanceObserver(e=>{const t=e.getEntries();for(let e=0,n=t.length;e<n;e++){const n=t[e];r(n)}});try{o.observe({type:"event",buffered:!0,durationThreshold:16}),o.observe({type:"first-input",buffered:!0})}catch{}return()=>o.disconnect()},Yc=new Dc(25),Xc=e=>Pc.subscribe("recording",t=>{const n="auto-complete-race"===t.kind?Yc.find(e=>e.interactionUUID===t.interactionUUID):((e,t)=>{let n=null;for(const r of t){if(r.type!==e.type)continue;if(null===n){n=r;continue}const t=(e,t)=>Math.abs(e.startDateTime)-(t.startTime+t.timeOrigin);t(r,e)<t(n,e)&&(n=r)}return n})(t.entry,Yc);if(!n)return;const r=n.completeInteraction(t);e(r)}),Kc=e=>{var t;const n=gi(e);if(!n)return;let r=n?J(null==n?void 0:n.type):"N/A";if(r||(r=null!=(t=((e,t=()=>!0)=>{let n=e;for(;n;){const e=J(n.type);if(e&&t(e))return e;n=n.return}return null})(n,e=>e.length>2))?t:"N/A"),!r)return;return{componentPath:((e,t=Ic)=>{if(!e)return[];if(!J(e.type))return[];const n=new Array;let r=e;for(;r.return;){const e=Vc(r.type);e&&!Bc(e)&&Uc(e,t)&&e.toLowerCase()!==e&&n.push(e),r=r.return}const o=new Array(n.length);for(let e=0;e<n.length;e++)o[e]=n[n.length-e-1];return o})(n),childrenTree:{},componentName:r,elementFiber:n}},Zc=(e,t)=>{let n=null;const r=t=>{switch(e){case"pointer":return"start"===t.phase?"pointerup":t.target instanceof HTMLInputElement||t.target instanceof HTMLSelectElement?"change":"click";case"keyboard":return"start"===t.phase?"keydown":"change"}},o={current:{kind:"uninitialized-stage",interactionUUID:tn(),stageStart:Date.now(),interactionType:e}},i=n=>{var i,s;if(n.composedPath().some(e=>e instanceof Element&&"react-scan-toolbar-root"===e.id))return;if(Date.now()-o.current.stageStart>2e3&&(o.current={kind:"uninitialized-stage",interactionUUID:tn(),stageStart:Date.now(),interactionType:e}),"uninitialized-stage"!==o.current.kind)return;const l=performance.now();null==(i=null==t?void 0:t.onStart)||i.call(t,o.current.interactionUUID);const c=Kc(n.target);if(!c)return void(null==(s=null==t?void 0:t.onError)||s.call(t,o.current.interactionUUID));const d={},u=td(d);o.current={...o.current,interactionType:e,blockingTimeStart:Date.now(),childrenTree:c.childrenTree,componentName:c.componentName,componentPath:c.componentPath,fiberRenders:d,kind:"interaction-start",interactionStartDetail:l,stopListeningForRenders:u};const p=r({phase:"end",target:n.target});document.addEventListener(p,a,{once:!0}),requestAnimationFrame(()=>{document.removeEventListener(p,a)})};document.addEventListener(r({phase:"start"}),i,{capture:!0});const a=(r,i,a)=>{var s;if("interaction-start"!==o.current.kind&&i===n)return"pointer"===e&&r.target instanceof HTMLSelectElement||null==(s=null==t?void 0:t.onError)||s.call(t,o.current.interactionUUID),void(o.current={kind:"uninitialized-stage",interactionUUID:tn(),stageStart:Date.now(),interactionType:e});n=i,(({onMicroTask:e,onRAF:t,onTimeout:n,abort:r})=>{queueMicrotask(()=>{!0!==(null==r?void 0:r())&&e()&&requestAnimationFrame(()=>{!0!==(null==r?void 0:r())&&t()&&setTimeout(()=>{!0!==(null==r?void 0:r())&&n()},0)})})})({abort:a,onMicroTask:()=>"uninitialized-stage"!==o.current.kind&&(o.current={...o.current,kind:"js-end-stage",jsEndDetail:performance.now()},!0),onRAF:()=>{var n;return"js-end-stage"!==o.current.kind&&"raf-stage"!==o.current.kind?(null==(n=null==t?void 0:t.onError)||n.call(t,o.current.interactionUUID),o.current={kind:"uninitialized-stage",interactionUUID:tn(),stageStart:Date.now(),interactionType:e},!1):(o.current={...o.current,kind:"raf-stage",rafStart:performance.now()},!0)},onTimeout:()=>{var n;if("raf-stage"!==o.current.kind)return null==(n=null==t?void 0:t.onError)||n.call(t,o.current.interactionUUID),void(o.current={kind:"uninitialized-stage",interactionUUID:tn(),stageStart:Date.now(),interactionType:e});const r=Date.now(),i=Object.freeze({...o.current,kind:"timeout-stage",blockingTimeEnd:r,commitEnd:performance.now()});o.current={kind:"uninitialized-stage",interactionUUID:tn(),stageStart:r,interactionType:e};let a=!1;const s=e=>{var n;a=!0;const r="auto-complete-race"===e.kind?e.detailedTiming.commitEnd-e.detailedTiming.interactionStartDetail:e.entry.latency,o={detailedTiming:i,latency:r,completedAt:Date.now(),flushNeeded:!0};null==(n=null==t?void 0:t.onComplete)||n.call(t,i.interactionUUID,o,e);const s=Yc.filter(e=>e.interactionUUID!==i.interactionUUID);return Yc=Dc.fromArray(s,25),o},l={completeInteraction:s,endDateTime:Date.now(),startDateTime:i.blockingTimeStart,type:e,interactionUUID:i.interactionUUID};if(Yc.push(l),ed())setTimeout(()=>{if(a)return;s({kind:"auto-complete-race",detailedTiming:i,interactionUUID:i.interactionUUID});const e=Yc.filter(e=>e.interactionUUID!==i.interactionUUID);Yc=Dc.fromArray(e,25)},1e3);else{const e=Yc.filter(e=>e.interactionUUID!==i.interactionUUID);Yc=Dc.fromArray(e,25),s({kind:"auto-complete-race",detailedTiming:i,interactionUUID:i.interactionUUID})}}})},s=e=>{const t=tn();a(e,t,()=>t!==n)};return"keyboard"===e&&document.addEventListener("keypress",s),()=>{document.removeEventListener(r({phase:"start"}),i,{capture:!0}),document.removeEventListener("keypress",s)}},Qc=e=>{var t;return null==(t=k(e,e=>{if(v(e))return!0}))?void 0:t.stateNode},ed=()=>"PerformanceEventTiming"in globalThis,td=e=>{const t=t=>{var n,r,o,i,a,s,l;const c=J(t.type);if(!c)return;const d=e[c];if(!d){const r=new Set,o=t.return&&bi(t.return),i=o&&J(o[0]);i&&r.add(i);const{selfTime:a,totalTime:s}=V(t),l=Xi(t),d={current:[],changes:new Set,changesCounts:new Map},u={fiberProps:l.fiberProps||d,fiberState:l.fiberState||d,fiberContext:l.fiberContext||d};return void(e[c]={renderCount:1,hasMemoCache:q(t),wasFiberRenderMount:rd(t),parents:r,selfTime:a,totalTime:s,nodeInfo:[{element:Qc(t),name:null!=(n=J(t.type))?n:"Unknown",selfTime:V(t).selfTime}],changes:u})}if(null==(o=null==(r=bi(t))?void 0:r[0])?void 0:o.type){const e=t.return&&bi(t.return),n=e&&J(e[0]);n&&d.parents.add(n)}const{selfTime:u,totalTime:p}=V(t),h=Xi(t);if(!h)return;const m={current:[],changes:new Set,changesCounts:new Map};d.wasFiberRenderMount=d.wasFiberRenderMount||rd(t),d.hasMemoCache=d.hasMemoCache||q(t),d.changes={fiberProps:nd((null==(i=d.changes)?void 0:i.fiberProps)||m,h.fiberProps||m),fiberState:nd((null==(a=d.changes)?void 0:a.fiberState)||m,h.fiberState||m),fiberContext:nd((null==(s=d.changes)?void 0:s.fiberContext)||m,h.fiberContext||m)},d.renderCount+=1,d.selfTime+=u,d.totalTime+=p,d.nodeInfo.push({element:Qc(t),name:null!=(l=J(t.type))?l:"Unknown",selfTime:V(t).selfTime})};return Lu.interactionListeningForRenders=t,()=>{Lu.interactionListeningForRenders===t&&(Lu.interactionListeningForRenders=null)}},nd=(e,t)=>{const n={current:[...e.current],changes:new Set,changesCounts:new Map};for(const e of t.current)n.current.some(t=>t.name===e.name)||n.current.push(e);for(const r of t.changes)if("string"==typeof r||"number"==typeof r){n.changes.add(r);const o=e.changesCounts.get(r)||0,i=t.changesCounts.get(r)||0;n.changesCounts.set(r,o+i)}return n},rd=e=>{if(!e.alternate)return!0;const t=e.alternate,n=t&&null!=t.memoizedState&&null!=t.memoizedState.element&&!0!==t.memoizedState.isDehydrated,r=null!=e.memoizedState&&null!=e.memoizedState.element&&!0!==e.memoizedState.isDehydrated;return!n&&r},od=null,id=(e=>{let t;const n=new Set,r=(e,r)=>{const o="function"==typeof e?e(t):e;if(!Object.is(o,t)){const e=t;t=(null!=r?r:"object"!=typeof o||null===o)?o:Object.assign({},t,o),n.forEach(n=>n(t,e))}},o=()=>t,i={setState:r,getState:o,getInitialState:()=>a,subscribe:(e,r)=>{let o,i;r?(o=e,i=r):i=e;let a=o?o(t):void 0;const s=(e,t)=>{if(o){const n=o(e),r=o(t);Object.is(a,n)||(a=n,i(n,r))}else i(e,t)};return n.add(s),()=>n.delete(s)}},a=t=e(r,o,i);return i})((e,t)=>{const n=new Set;return{state:{events:new Dc(200)},actions:{addEvent:r=>{n.forEach(e=>e(r));const o=[...t().state.events,r],i=new Set;o.forEach(e=>{"interaction"!==e.kind&&((e,t)=>{const n=o.find(t=>{if("long-render"!==t.kind&&t.id!==e.id)return e.data.startAt<=t.data.startAt&&e.data.endAt<=t.data.endAt&&e.data.endAt>=t.data.startAt||t.data.startAt<=e.data.startAt&&t.data.endAt>=e.data.startAt||e.data.startAt<=t.data.startAt&&e.data.endAt>=t.data.endAt||void 0});n&&t(n)})(e,()=>{i.add(e.id)})});const a=o.filter(e=>!i.has(e.id));e(()=>({state:{events:Dc.fromArray(a,200)}}))},addListener:e=>(n.add(e),()=>{n.delete(e)}),clear:()=>{e({state:{events:new Dc(200)}})}}}}),ad=()=>{return e=id.subscribe,t=id.getState,n=t(),r=Ge({t:{__:n,u:t}}),o=r[0].t,i=r[1],Ye(function(){o.__=n,o.u=t,an(o)&&i({t:o})},[e,n,t]),Je(function(){return an(o)&&i({t:o}),e(function(){an(o)&&i({t:o})})},[e]),n;var e,t,n,r,o,i},sd=null,ld=null,cd=null,dd=[];var ud=()=>{const e=Jc(e=>{Pc.publish({kind:"entry-received",entry:e},"recording")}),t=(()=>{const e=e=>{nc=e.composedPath().map(e=>e.id).filter(Boolean).includes("react-scan-toolbar")};return document.addEventListener("mouseover",e),cd=e,()=>{cd&&document.removeEventListener("mouseover",cd)}})(),n=(()=>{const e=()=>{sd=performance.now(),ld=performance.timeOrigin};return document.addEventListener("visibilitychange",e),()=>{document.removeEventListener("visibilitychange",e)}})(),r=function(){let e,t;const n=function n(){let r=null;od=null,r=td(od={});const o=performance.timeOrigin,i=performance.now();return e=requestAnimationFrame(()=>{t=setTimeout(()=>{const e=performance.now(),t=e-i,a=performance.timeOrigin;dd.push(e+a);const s=dd.filter(t=>e+a-t<=1e3),l=s.length;dd=s;const c=null!==nc&&nc;if(t>150&&!(null!==sd&&null!==ld&&e+a-(ld+sd)<100)&&"visible"===document.visibilityState&&!c){const n=a+e,r=i+o;id.getState().actions.addEvent({kind:"long-render",id:tn(),data:{endAt:n,startAt:r,meta:{fiberRenders:od,latency:t,fps:l}}})}sd=null,ld=null,null==r||r(),n()},0)}),r}();return()=>{n(),cancelAnimationFrame(e),clearTimeout(t)}}(),o=async(e,t,n)=>{id.getState().actions.addEvent({kind:"interaction",id:tn(),data:{startAt:t.detailedTiming.blockingTimeStart,endAt:performance.now()+performance.timeOrigin,meta:{...t,kind:n.kind}}});const r=Pc.getChannelState("recording");t.detailedTiming.stopListeningForRenders(),r.length&&Pc.updateChannelState("recording",()=>new Dc(Lc))},i=Zc("pointer",{onComplete:o}),a=Zc("keyboard",{onComplete:o}),s=Xc(e=>{jc.setState(Dc.fromArray(jc.getCurrentState().concat(e),150))});return()=>{t(),n(),r(),e(),i(),s(),a()}},pd=e=>{var t;const n=e.filter(e=>e.length>2);return 0===n.length?null!=(t=e.at(-1))?t:"Unknown":n.at(-1)},hd=e=>{switch(e.kind){case"interaction":{const{renderTime:t,otherJSTime:n,framePreparation:r,frameConstruction:o,frameDraw:i}=e;return t+n+r+o+(null!=i?i:0)}case"dropped-frames":return e.otherTime+e.renderTime}},md=e=>{const t=hd(e.timing);switch(e.kind){case"interaction":return t<200?"low":t<500?"needs-improvement":"high";case"dropped-frames":return t<50?"low":t<150?"needs-improvement":"high"}},fd=()=>Qe(gd),gd=De(null),vd=({size:e=24,className:t})=>Rn("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:lo(["lucide lucide-chevron-right",t]),children:Rn("path",{d:"m9 18 6-6-6-6"})}),wd=({className:e="",size:t=24,events:n=[]})=>{const r=n.includes(!0),o=n.filter(e=>e).length,i=o>99?">99":o,a=r?Math.max(.6*t,14):Math.max(.4*t,6);return Rn("div",{className:"relative",children:[Rn("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:`lucide lucide-bell ${e}`,children:[Rn("path",{d:"M10.268 21a2 2 0 0 0 3.464 0"}),Rn("path",{d:"M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"})]}),n.length>0&&o>0&&Pu.options.value.showNotificationCount&&Rn("div",{className:lo(["absolute",r?"-top-2.5 -right-2.5":"-top-1 -right-1","rounded-full","flex items-center justify-center","text-[8px] font-medium text-white","aspect-square",r?"bg-red-500/90":"bg-purple-500/90"]),style:{width:`${a}px`,height:`${a}px`,padding:r?"0.5px":"0"},children:r&&i})]})},bd=({className:e="",size:t=24})=>Rn("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:e,children:[Rn("path",{d:"M18 6 6 18"}),Rn("path",{d:"m6 6 12 12"})]}),xd=({className:e="",size:t=24})=>Rn("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:e,children:[Rn("path",{d:"M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"}),Rn("path",{d:"M16 9a5 5 0 0 1 0 6"}),Rn("path",{d:"M19.364 18.364a9 9 0 0 0 0-12.728"})]}),yd=({className:e="",size:t=24})=>Rn("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:e,children:[Rn("path",{d:"M16 9a5 5 0 0 1 .95 2.293"}),Rn("path",{d:"M19.364 5.636a9 9 0 0 1 1.889 9.96"}),Rn("path",{d:"m2 2 20 20"}),Rn("path",{d:"m7 7-.587.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298V11"}),Rn("path",{d:"M9.828 4.172A.686.686 0 0 1 11 4.657v.686"})]}),kd=({size:e=24,className:t})=>Rn("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:lo(["lucide lucide-arrow-left",t]),children:[Rn("path",{d:"m12 19-7-7 7-7"}),Rn("path",{d:"M19 12H5"})]}),_d=({className:e="",size:t=24})=>Rn("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:e,children:[Rn("path",{d:"M14 4.1 12 6"}),Rn("path",{d:"m5.1 8-2.9-.8"}),Rn("path",{d:"m6 12-1.9 2"}),Rn("path",{d:"M7.2 2.2 8 5.1"}),Rn("path",{d:"M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z"})]}),Nd=({className:e="",size:t=24})=>Rn("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:e,children:[Rn("path",{d:"M10 8h.01"}),Rn("path",{d:"M12 12h.01"}),Rn("path",{d:"M14 8h.01"}),Rn("path",{d:"M16 12h.01"}),Rn("path",{d:"M18 8h.01"}),Rn("path",{d:"M6 8h.01"}),Rn("path",{d:"M7 16h10"}),Rn("path",{d:"M8 12h.01"}),Rn("rect",{width:"20",height:"16",x:"2",y:"4",rx:"2"})]}),Sd=({className:e="",size:t=24})=>Rn("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:e,style:{transform:"rotate(180deg)"},children:[Rn("circle",{cx:"12",cy:"12",r:"10"}),Rn("path",{d:"m4.9 4.9 14.2 14.2"})]}),Cd=({className:e="",size:t=24})=>Rn("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:e,children:[Rn("polyline",{points:"22 17 13.5 8.5 8.5 13.5 2 7"}),Rn("polyline",{points:"16 17 22 17 22 11"})]}),Td=({children:e,triggerContent:t,wrapperProps:n})=>{const[r,o]=Ge("closed"),[i,a]=Ge(null),[s,l]=Ge({width:window.innerWidth,height:window.innerHeight}),c=Xe(null),d=Xe(null),u=Qe(zu),p=Xe(!1);Je(()=>{const e=()=>{l({width:window.innerWidth,height:window.innerHeight}),h()};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]);const h=()=>{if(c.current&&u){const e=c.current.getBoundingClientRect(),t=u.getBoundingClientRect(),n=e.left+e.width/2,r=e.top,o=new DOMRect(n-t.left,r-t.top,e.width,e.height);a(o)}};Je(()=>{h()},[c.current]),Je(()=>{if("opening"===r){const e=setTimeout(()=>o("open"),120);return()=>clearTimeout(e)}if("closing"===r){const e=setTimeout(()=>o("closed"),120);return()=>clearTimeout(e)}},[r]),Je(()=>{const e=setInterval(()=>{p.current||"closed"===r||o("closing")},1e3);return()=>clearInterval(e)},[r]);const m=(()=>{var e;if(!i||!u)return{top:0,left:0};const t=u.getBoundingClientRect(),n=(null==(e=d.current)?void 0:e.offsetHeight)||40,r=i.x+t.left,o=i.y+t.top;let a=r,l=o-4;return a-87.5<5?a=92.5:a+87.5>s.width-5&&(a=s.width-5-87.5),l-n<5&&(l=o+i.height+4),{top:l-t.top,left:a-t.left}})();return Rn(me,{children:[u&&i&&"closed"!==r&&(f=Rn("div",{ref:d,className:lo(["absolute z-100 bg-white text-black rounded-lg px-3 py-2 shadow-lg","transition-[opacity] duration-120 ease-out",'after:content-[""] after:absolute after:top-[100%]',"after:left-1/2 after:-translate-x-1/2","after:w-[10px] after:h-[6px]","after:border-l-[5px] after:border-l-transparent","after:border-r-[5px] after:border-r-transparent","after:border-t-[6px] after:border-t-white","pointer-events-none","opening"===r||"closing"===r?"opacity-0":"opacity-100"]),style:{top:m.top+"px",left:m.left+"px",transform:`translate(-50%, calc(-100% - 4px)) scale(${"open"===r?1:.97})`,minWidth:"175px",willChange:"opacity, transform"},children:e}),g=u,v=pe(yn,{__v:f,h:g}),v.containerInfo=g,v),Rn("div",{ref:c,onMouseEnter:()=>{p.current=!0,h(),o("opening")},onMouseLeave:()=>{p.current=!1,h(),o("closing")},...n,children:t})]});var f,g,v},Ed=({selectedEvent:e})=>{const{notificationState:t,setNotificationState:n,setRoute:r}=fd();return Rn("div",{className:lo(["flex w-full justify-between items-center px-3 py-2 text-xs"]),children:[Rn("div",{className:lo(["bg-[#18181B] flex items-center gap-x-1 p-1 rounded-sm"]),children:[Rn("button",{onClick:()=>{r({route:"render-visualization",routeMessage:null})},className:lo(["w-1/2 flex items-center justify-center whitespace-nowrap py-[5px] px-1 gap-x-1","render-visualization"===t.route||"render-explanation"===t.route?"text-white bg-[#7521c8] rounded-sm":"text-[#6E6E77] bg-[#18181B] rounded-sm"]),children:"Ranked"}),Rn("button",{onClick:()=>{r({route:"other-visualization",routeMessage:null})},className:lo(["w-1/2 flex items-center justify-center whitespace-nowrap py-[5px] px-1 gap-x-1","other-visualization"===t.route?"text-white bg-[#7521c8] rounded-sm":"text-[#6E6E77] bg-[#18181B] rounded-sm"]),children:"Overview"}),Rn("button",{onClick:()=>{r({route:"optimize",routeMessage:null})},className:lo(["w-1/2 flex items-center justify-center whitespace-nowrap py-[5px] px-1 gap-x-1","optimize"===t.route?"text-white bg-[#7521c8] rounded-sm":"text-[#6E6E77] bg-[#18181B] rounded-sm"]),children:Rn("span",{children:"Prompts"})})]}),Rn(Td,{triggerContent:Rn("button",{onClick:()=>{n(e=>{e.audioNotificationsOptions.enabled&&"closed"!==e.audioNotificationsOptions.audioContext.state&&e.audioNotificationsOptions.audioContext.close();const t=e.audioNotificationsOptions.enabled;localStorage.setItem("react-scan-notifications-audio",String(!t));const n=new AudioContext;return e.audioNotificationsOptions.enabled||nn(n),t&&n.close(),{...e,audioNotificationsOptions:t?{audioContext:null,enabled:!1}:{audioContext:n,enabled:!0}}})},className:"ml-auto",children:Rn("div",{className:lo(["flex gap-x-2 justify-center items-center text-[#6E6E77]"]),children:[Rn("span",{children:"Alerts"}),t.audioNotificationsOptions.enabled?Rn(xd,{size:16,className:"text-[#6E6E77]"}):Rn(yd,{size:16,className:"text-[#6E6E77]"})]})}),children:Rn(me,{children:"Play a chime when a slowdown is recorded"})})]})},zd=e=>{let t="";return e.toSorted((e,t)=>t.totalTime-e.totalTime).slice(0,30).filter(e=>e.totalTime>5).forEach(e=>{let n="";n+="Component Name:",n+=e.name,n+="\n",n+=`Rendered: ${e.count} times\n`,n+=`Sum of self times for ${e.name} is ${e.totalTime.toFixed(0)}ms\n`,e.changes.props.length>0&&(n+=`Changed props for all ${e.name} instances ("name:count" pairs)\n`,e.changes.props.forEach(e=>{n+=`${e.name}:${e.count}x\n`})),e.changes.state.length>0&&(n+=`Changed state for all ${e.name} instances ("hook index:count" pairs)\n`,e.changes.state.forEach(e=>{n+=`${e.index}:${e.count}x\n`})),e.changes.context.length>0&&(n+=`Changed context for all ${e.name} instances ("context display name (if exists):count" pairs)\n`,e.changes.context.forEach(e=>{n+=`${e.name}:${e.count}x\n`})),t+=n,t+="\n"}),t},Ad=(e,t)=>Oc(()=>{switch(e){case"data":switch(t.kind){case"dropped-frames":return(({renderTime:e,otherTime:t,formattedReactData:n})=>`I will provide you with a set of high level, and low level performance data about a large frame drop in a React App:\n### High level\n- react component render time: ${e.toFixed(0)}ms\n- how long it took to run everything else (other JavaScript, hooks like useEffect, style recalculations, layerization, paint & commit and everything else the browser might do to draw a new frame after javascript mutates the DOM): ${t}ms\n\n### Low level\nWe also have lower level information about react components, such as their render time, and which props/state/context changed when they re-rendered.\n${n}`)({formattedReactData:zd(t.groupedFiberRenders),renderTime:t.groupedFiberRenders.reduce((e,t)=>e+t.totalTime,0),otherTime:t.timing.otherTime});case"interaction":return(({renderTime:e,eHandlerTimeExcludingRenders:t,toRafTime:n,commitTime:r,framePresentTime:o,formattedReactData:i})=>`I will provide you with a set of high level, and low level performance data about an interaction in a React App:\n### High level\n- react component render time: ${e.toFixed(0)}ms\n- how long it took to run javascript event handlers (EXCLUDING REACT RENDERS): ${t.toFixed(0)}ms\n- how long it took from the last event handler time, to the last request animation frame: ${n.toFixed(0)}ms\n\t- things like prepaint, style recalculations, layerization, async web API's like observers may occur during this time\n- how long it took from the last request animation frame to when the dom was committed: ${r.toFixed(0)}ms\n\t- during this period you will see paint, commit, potential style recalcs, and other misc browser activity. Frequently high times here imply css that makes the browser do a lot of work, or mutating expensive dom properties during the event handler stage. This can be many things, but it narrows the problem scope significantly when this is high\n${null===o?"":`- how long it took from dom commit for the frame to be presented: ${o.toFixed(0)}ms. This is when information about how to paint the next frame is sent to the compositor threads, and when the GPU does work. If this is high, look for issues that may be a bottleneck for operations occurring during this time`}\n\n### Low level\nWe also have lower level information about react components, such as their render time, and which props/state/context changed when they re-rendered.\n${i}`)({commitTime:t.timing.frameConstruction,eHandlerTimeExcludingRenders:t.timing.otherJSTime,formattedReactData:zd(t.groupedFiberRenders),framePresentTime:t.timing.frameDraw,renderTime:t.groupedFiberRenders.reduce((e,t)=>e+t.totalTime,0),toRafTime:t.timing.framePreparation})}case"explanation":switch(t.kind){case"dropped-frames":return(({renderTime:e,otherTime:t,formattedReactData:n})=>`Your goal will be to help me find the source of a performance problem in a React App. I collected a large dataset about this specific performance problem.\n\nWe have the high level time of how much react spent rendering, and what else the browser spent time on during this slowdown\n\n- react component render time: ${e.toFixed(0)}ms\n- other time (other JavaScript, hooks like useEffect, style recalculations, layerization, paint & commit and everything else the browser might do to draw a new frame after javascript mutates the DOM): ${t}ms\n\n\nWe also have lower level information about react components, such as their render time, and which props/state/context changed when they re-rendered.\n\n${n}\n\nYou may notice components have many renders, but much fewer props/state/context changes. This normally implies most of the components could have been memoized to avoid computation\n\nIt's also important to remember if a component had no props/state/context change, and it was memoized, it would not render. So a flow we can go through is:\n- find the most expensive components\n- see what's causing them to render\n- determine how you can make those state/props/context not change for a large set of the renders\n- once there are no more changes left, you can memoize the component so it no longer unnecessarily re-renders. \n\n\nAn important thing to note is that if you see a lot of react renders (some components with very high render counts), but other time is much higher than render time, it is possible that the components with lots of renders run hooks like useEffect/useLayoutEffect, which run outside of what we profile (just react render time).\n\nIt's also good to note that react profiles hook times in development, and if many hooks are called (lets say 5,000 components all called a useEffect), it will have to profile every single one, and this can add significant overhead when thousands of effects ran.\n\nIf it's not possible to explain the root problem from this data, please ask me for more data explicitly, and what we would need to know to find the source of the performance problem.\n`)({formattedReactData:zd(t.groupedFiberRenders),renderTime:t.groupedFiberRenders.reduce((e,t)=>e+t.totalTime,0),otherTime:t.timing.otherTime});case"interaction":return(({interactionType:e,name:t,time:n,renderTime:r,eHandlerTimeExcludingRenders:o,toRafTime:i,commitTime:a,framePresentTime:s,formattedReactData:l})=>`Your goal will be to help me find the source of a performance problem. I collected a large dataset about this specific performance problem.\n\nThere was a ${e} on a component named ${t}. This means, roughly, the component that handled the ${e} event was named ${t}.\n\nWe have a set of high level, and low level data about the performance issue.\n\nThe click took ${n.toFixed(0)}ms from interaction start, to when a new frame was presented to a user.\n\nWe also provide you with a breakdown of what the browser spent time on during the period of interaction start to frame presentation.\n\n- react component render time: ${r.toFixed(0)}ms\n- how long it took to run javascript event handlers (EXCLUDING REACT RENDERS): ${o.toFixed(0)}ms\n- how long it took from the last event handler time, to the last request animation frame: ${i.toFixed(0)}ms\n\t- things like prepaint, style recalculations, layerization, async web API's like observers may occur during this time\n- how long it took from the last request animation frame to when the dom was committed: ${a.toFixed(0)}ms\n\t- during this period you will see paint, commit, potential style recalcs, and other misc browser activity. Frequently high times here imply css that makes the browser do a lot of work, or mutating expensive dom properties during the event handler stage. This can be many things, but it narrows the problem scope significantly when this is high\n${null===s?"":`- how long it took from dom commit for the frame to be presented: ${s.toFixed(0)}ms. This is when information about how to paint the next frame is sent to the compositor threads, and when the GPU does work. If this is high, look for issues that may be a bottleneck for operations occurring during this time`}\n\nWe also have lower level information about react components, such as their render time, and which props/state/context changed when they re-rendered.\n\n${l}\n\n\nYou may notice components have many renders, but much fewer props/state/context changes. This normally implies most of the components could have been memoized to avoid computation\n\nIt's also important to remember if a component had no props/state/context change, and it was memoized, it would not render. So a flow we can go through is:\n- find the most expensive components\n- see what's causing them to render\n- determine how you can make those state/props/context not change for a large set of the renders\n- once there are no more changes left, you can memoize the component so it no longer unnecessarily re-renders. \n\n\nAn important thing to note is that if you see a lot of react renders (some components with very high render counts), but javascript excluding renders is much higher than render time, it is possible that the components with lots of renders run hooks like useEffect/useLayoutEffect, which run during the JS event handler period.\n\nIt's also good to note that react profiles hook times in development, and if many hooks are called (lets say 5,000 components all called a useEffect), it will have to profile every single one. And it may also be the case the comparison of the hooks dependency can be expensive, and that would not be tracked in render time.\n\nIf it's not possible to explain the root problem from this data, please ask me for more data explicitly, and what we would need to know to find the source of the performance problem.\n`)({commitTime:t.timing.frameConstruction,eHandlerTimeExcludingRenders:t.timing.otherJSTime,formattedReactData:zd(t.groupedFiberRenders),framePresentTime:t.timing.frameDraw,interactionType:t.type,name:pd(t.componentPath),renderTime:t.groupedFiberRenders.reduce((e,t)=>e+t.totalTime,0),time:hd(t.timing),toRafTime:t.timing.framePreparation})}case"fix":switch(t.kind){case"dropped-frames":return(({renderTime:e,otherTime:t,formattedReactData:n})=>`You will attempt to implement a performance improvement to a large slowdown in a react app\n\nYour should split your goals into 2 parts:\n- identifying the problem\n- fixing the problem\n\t- it is okay to implement a fix even if you aren't 100% sure the fix solves the performance problem. When you aren't sure, you should tell the user to try repeating the interaction, and feeding the "Formatted Data" in the React Scan notifications optimize tab. This allows you to start a debugging flow with the user, where you attempt a fix, and observe the result. The user may make a mistake when they pass you the formatted data, so must make sure, given the data passed to you, that the associated data ties to the same interaction you were trying to debug.\n\nMake sure to check if the user has the react compiler enabled (project dependent, configured through build tool), so you don't unnecessarily memoize components. If it is, you do not need to worry about memoizing user components\n\nOne challenge you may face is the performance problem lies in a node_module, not in user code. If you are confident the problem originates because of a node_module, there are multiple strategies, which are context dependent:\n- you can try to work around the problem, knowing which module is slow\n- you can determine if its possible to resolve the problem in the node_module by modifying non node_module code\n- you can monkey patch the node_module to experiment and see if it's really the problem (you can modify a functions properties to hijack the call for example)\n- you can determine if it's feasible to replace whatever node_module is causing the problem with a performant option (this is an extreme)\n\n\nWe have the high level time of how much react spent rendering, and what else the browser spent time on during this slowdown\n\n- react component render time: ${e.toFixed(0)}ms\n- other time: ${t}ms\n\n\nWe also have lower level information about react components, such as their render time, and which props/state/context changed when they re-rendered.\n\n${n}\n\nYou may notice components have many renders, but much fewer props/state/context changes. This normally implies most of the components could have been memoized to avoid computation\n\nIt's also important to remember if a component had no props/state/context change, and it was memoized, it would not render. So the flow should be:\n- find the most expensive components\n- see what's causing them to render\n- determine how you can make those state/props/context not change for a large set of the renders\n- once there are no more changes left, you can memoize the component so it no longer unnecessarily re-renders. \n\nAn important thing to note is that if you see a lot of react renders (some components with very high render counts), but other time is much higher than render time, it is possible that the components with lots of renders run hooks like useEffect/useLayoutEffect, which run outside of what we profile (just react render time).\n\nIt's also good to note that react profiles hook times in development, and if many hooks are called (lets say 5,000 components all called a useEffect), it will have to profile every single one. And it may also be the case the comparison of the hooks dependency can be expensive, and that would not be tracked in render time.\n\nIf a node_module is the component with high renders, you can experiment to see if that component is the root issue (because of hooks). You should use the same instructions for node_module debugging mentioned previously.\n\nIf renders don't seem to be the problem, see if there are any expensive CSS properties being added/mutated, or any expensive DOM Element mutations/new elements being created that could cause this slowdown. \n`)({formattedReactData:zd(t.groupedFiberRenders),renderTime:t.groupedFiberRenders.reduce((e,t)=>e+t.totalTime,0),otherTime:t.timing.otherTime});case"interaction":return(({interactionType:e,name:t,componentPath:n,time:r,renderTime:o,eHandlerTimeExcludingRenders:i,toRafTime:a,commitTime:s,framePresentTime:l,formattedReactData:c})=>`You will attempt to implement a performance improvement to a user interaction in a React app. You will be provided with data about the interaction, and the slow down.\n\nYour should split your goals into 2 parts:\n- identifying the problem\n- fixing the problem\n\t- it is okay to implement a fix even if you aren't 100% sure the fix solves the performance problem. When you aren't sure, you should tell the user to try repeating the interaction, and feeding the "Formatted Data" in the React Scan notifications optimize tab. This allows you to start a debugging flow with the user, where you attempt a fix, and observe the result. The user may make a mistake when they pass you the formatted data, so must make sure, given the data passed to you, that the associated data ties to the same interaction you were trying to debug.\n\n\nMake sure to check if the user has the react compiler enabled (project dependent, configured through build tool), so you don't unnecessarily memoize components. If it is, you do not need to worry about memoizing user components\n\nOne challenge you may face is the performance problem lies in a node_module, not in user code. If you are confident the problem originates because of a node_module, there are multiple strategies, which are context dependent:\n- you can try to work around the problem, knowing which module is slow\n- you can determine if its possible to resolve the problem in the node_module by modifying non node_module code\n- you can monkey patch the node_module to experiment and see if it's really the problem (you can modify a functions properties to hijack the call for example)\n- you can determine if it's feasible to replace whatever node_module is causing the problem with a performant option (this is an extreme)\n\nThe interaction was a ${e} on the component named ${t}. This component has the following ancestors ${n}. This is the path from the component, to the root. This should be enough information to figure out where this component is in the user's code base\n\nThis path is the component that was clicked, so it should tell you roughly where component had an event handler that triggered a state change.\n\nPlease note that the leaf node of this path might not be user code (if they use a UI library), and they may contain many wrapper components that just pass through children that aren't relevant to the actual click. So make you sure analyze the path and understand what the user code is doing\n\nWe have a set of high level, and low level data about the performance issue.\n\nThe click took ${r.toFixed(0)}ms from interaction start, to when a new frame was presented to a user.\n\nWe also provide you with a breakdown of what the browser spent time on during the period of interaction start to frame presentation.\n\n- react component render time: ${o.toFixed(0)}ms\n- how long it took to run javascript event handlers (EXCLUDING REACT RENDERS): ${i.toFixed(0)}ms\n- how long it took from the last event handler time, to the last request animation frame: ${a.toFixed(0)}ms\n\t- things like prepaint, style recalculations, layerization, async web API's like observers may occur during this time\n- how long it took from the last request animation frame to when the dom was committed: ${s.toFixed(0)}ms\n\t- during this period you will see paint, commit, potential style recalcs, and other misc browser activity. Frequently high times here imply css that makes the browser do a lot of work, or mutating expensive dom properties during the event handler stage. This can be many things, but it narrows the problem scope significantly when this is high\n${null===l?"":`- how long it took from dom commit for the frame to be presented: ${l.toFixed(0)}ms. This is when information about how to paint the next frame is sent to the compositor threads, and when the GPU does work. If this is high, look for issues that may be a bottleneck for operations occurring during this time`}\n\n\nWe also have lower level information about react components, such as their render time, and which props/state/context changed when they re-rendered.\n\n${c}\n\nYou may notice components have many renders, but much fewer props/state/context changes. This normally implies most of the components could have been memoized to avoid computation\n\nIt's also important to remember if a component had no props/state/context change, and it was memoized, it would not render. So the flow should be:\n- find the most expensive components\n- see what's causing them to render\n- determine how you can make those state/props/context not change for a large set of the renders\n- once there are no more changes left, you can memoize the component so it no longer unnecessarily re-renders. \n\nAn important thing to note is that if you see a lot of react renders (some components with very high render counts), but javascript excluding renders is much higher than render time, it is possible that the components with lots of renders run hooks like useEffect/useLayoutEffect, which run during the JS event handler period.\n\nIt's also good to note that react profiles hook times in development, and if many hooks are called (lets say 5,000 components all called a useEffect), it will have to profile every single one. And it may also be the case the comparison of the hooks dependency can be expensive, and that would not be tracked in render time.\n\nIf a node_module is the component with high renders, you can experiment to see if that component is the root issue (because of hooks). You should use the same instructions for node_module debugging mentioned previously.\n\n`)({commitTime:t.timing.frameConstruction,componentPath:t.componentPath.join(">"),eHandlerTimeExcludingRenders:t.timing.otherJSTime,formattedReactData:zd(t.groupedFiberRenders),framePresentTime:t.timing.frameDraw,interactionType:t.type,name:pd(t.componentPath),renderTime:t.groupedFiberRenders.reduce((e,t)=>e+t.totalTime,0),time:hd(t.timing),toRafTime:t.timing.framePreparation})}}}),Md=({selectedEvent:e})=>{const[t,n]=Ge("fix"),[r,o]=Ge(!1);return Rn("div",{className:lo(["w-full h-full"]),children:[Rn("div",{className:lo(["border border-[#27272A] rounded-sm h-4/5 text-xs overflow-hidden"]),children:[Rn("div",{className:lo(["bg-[#18181B] p-1 rounded-t-sm"]),children:Rn("div",{className:lo(["flex items-center gap-x-1"]),children:[Rn("button",{onClick:()=>n("fix"),className:lo(["flex items-center justify-center whitespace-nowrap py-1.5 px-3 rounded-sm","fix"===t?"text-white bg-[#7521c8]":"text-[#6E6E77] hover:text-white"]),children:"Fix"}),Rn("button",{onClick:()=>n("explanation"),className:lo(["flex items-center justify-center whitespace-nowrap py-1.5 px-3 rounded-sm","explanation"===t?"text-white bg-[#7521c8]":"text-[#6E6E77] hover:text-white"]),children:"Explanation"}),Rn("button",{onClick:()=>n("data"),className:lo(["flex items-center justify-center whitespace-nowrap py-1.5 px-3 rounded-sm","data"===t?"text-white bg-[#7521c8]":"text-[#6E6E77] hover:text-white"]),children:"Data"})]})}),Rn("div",{className:lo(["overflow-y-auto h-full"]),children:Rn("pre",{className:lo(["p-2 h-full","whitespace-pre-wrap break-words","text-gray-300 font-mono "]),children:Ad(t,e)})})]}),Rn("button",{onClick:async()=>{const n=Ad(t,e);await navigator.clipboard.writeText(n),o(!0),setTimeout(()=>o(!1),1e3)},className:lo(["mt-4 px-4 py-2 bg-[#18181B] text-[#6E6E77] rounded-sm","hover:text-white transition-colors duration-200","flex items-center justify-center gap-x-2 text-xs"]),children:[Rn("span",{children:r?"Copied!":"Copy Prompt"}),Rn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:lo(["transition-transform duration-200",r&&"scale-110"]),children:r?Rn("path",{d:"M20 6L9 17l-5-5"}):Rn(me,{children:[Rn("rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2"}),Rn("path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"})]})})]})]})},$d=({selectedEvent:e})=>{var t,n;const[r]=Ge(null!=(t=Vu())&&t),{notificationState:o}=fd(),[i,a]=Ge((null==(n=o.routeMessage)?void 0:n.name)?[o.routeMessage.name]:[]),s=((e,t)=>{switch(e.kind){case"dropped-frames":return[...t?[{name:"Total Processing Time",time:hd(e.timing),color:"bg-red-500",kind:"total-processing-time"}]:[{name:"Renders",time:e.timing.renderTime,color:"bg-purple-500",kind:"render"},{name:"JavaScript, DOM updates, Draw Frame",time:e.timing.otherTime,color:"bg-[#4b4b4b]",kind:"other-frame-drop"}]];case"interaction":return[...t?[]:[{name:"Renders",time:e.timing.renderTime,color:"bg-purple-500",kind:"render"}],{name:t?"React Renders, Hooks, Other JavaScript":"JavaScript/React Hooks ",time:e.timing.otherJSTime,color:"bg-[#EFD81A]",kind:"other-javascript"},{name:"Update DOM and Draw New Frame",time:hd(e.timing)-e.timing.renderTime-e.timing.otherJSTime,color:"bg-[#1D3A66]",kind:"other-not-javascript"}]}})(e,r),l=Qe(zu);Je(()=>{var e;if(null==(e=o.routeMessage)?void 0:e.name){const e=null==l?void 0:l.querySelector("#overview-scroll-container"),t=null==l?void 0:l.querySelector(`#react-scan-overview-bar-${o.routeMessage.name}`);if(e&&t){const n=t.getBoundingClientRect().top-e.getBoundingClientRect().top;e.scrollTop=e.scrollTop+n}}},[o.route]),Je(()=>{"other-visualization"===o.route&&a(e=>{var t;return(null==(t=o.routeMessage)?void 0:t.name)?[o.routeMessage.name]:e})},[o.route]);const c=s.reduce((e,t)=>e+t.time,0);return Rn("div",{className:"rounded-sm border border-zinc-800 text-xs",children:[Rn("div",{className:"p-2 border-b border-zinc-800 bg-zinc-900/50",children:Rn("div",{className:"flex items-center justify-between",children:[Rn("h3",{className:"text-xs font-medium",children:"What was time spent on?"}),Rn("span",{className:"text-xs text-zinc-400",children:["Total: ",c.toFixed(0),"ms"]})]})}),Rn("div",{className:"divide-y divide-zinc-800",children:s.map(t=>{const n=i.includes(t.kind);return Rn("div",{id:`react-scan-overview-bar-${t.kind}`,children:[Rn("button",{onClick:()=>a(e=>e.includes(t.kind)?e.filter(e=>e!==t.kind):[...e,t.kind]),className:"w-full px-3 py-2 flex items-center gap-4 hover:bg-zinc-800/50 transition-colors",children:Rn("div",{className:"flex-1",children:[Rn("div",{className:"flex items-center justify-between mb-2",children:[Rn("div",{className:"flex items-center gap-0.5",children:[Rn("svg",{className:"h-4 w-4 text-zinc-400 transition-transform "+(n?"rotate-90":""),fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:Rn("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M9 5l7 7-7 7"})}),Rn("span",{className:"font-medium flex items-center text-left",children:t.name})]}),Rn("span",{className:" text-zinc-400",children:[t.time.toFixed(0),"ms"]})]}),Rn("div",{className:"h-1 bg-zinc-800 rounded-full overflow-hidden",children:Rn("div",{className:`h-full ${t.color} transition-all`,style:{width:t.time/c*100+"%"}})})]})}),n&&Rn("div",{className:"bg-zinc-900/30 border-t border-zinc-800 px-2.5 py-3",children:Rn("p",{className:" text-zinc-400 mb-4 text-xs",children:Oc(()=>{switch(e.kind){case"interaction":switch(t.kind){case"render":return Rn(jd,{input:Od(e)});case"other-javascript":return Rn(jd,{input:Dd(e)});case"other-not-javascript":return Rn(jd,{input:Fd(e)})}case"dropped-frames":switch(t.kind){case"total-processing-time":return Rn(jd,{input:{kind:"total-processing",data:{time:hd(e.timing)}}});case"render":return Rn(me,{children:Rn(jd,{input:{kind:"render",data:{topByTime:e.groupedFiberRenders.toSorted((e,t)=>t.totalTime-e.totalTime).slice(0,3).map(t=>({name:t.name,percentage:t.totalTime/hd(e.timing)}))}}})});case"other-frame-drop":return Rn(jd,{input:{kind:"other"}})}}})})})]},t.kind)})})]})},Fd=e=>{const t=e.groupedFiberRenders.reduce((e,t)=>e+t.count,0),n=e.timing.renderTime,r=hd(e.timing);return t>100?{kind:"high-render-count-update-dom-draw-frame",data:{count:t,percentageOfTotal:n/r*100,copyButton:Rn(Rd,{})}}:{kind:"update-dom-draw-frame",data:{copyButton:Rn(Rd,{})}}},Rd=()=>{const[e,t]=Ge(!1),{notificationState:n}=fd();return Rn("button",{onClick:async()=>{n.selectedEvent&&(await navigator.clipboard.writeText(Ad("explanation",n.selectedEvent)),t(!0),setTimeout(()=>t(!1),1e3))},className:"bg-zinc-800 flex hover:bg-zinc-700 text-zinc-200 px-2 py-1 rounded gap-x-3",children:[Rn("span",{children:e?"Copied!":"Copy Prompt"}),Rn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:lo(["transition-transform duration-200",e&&"scale-110"]),children:e?Rn("path",{d:"M20 6L9 17l-5-5"}):Rn(me,{children:[Rn("rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2"}),Rn("path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"})]})})]})},Od=e=>e.timing.renderTime/hd(e.timing)>.3?{kind:"render",data:{topByTime:e.groupedFiberRenders.toSorted((e,t)=>t.totalTime-e.totalTime).slice(0,3).map(t=>({percentage:t.totalTime/hd(e.timing),name:t.name}))}}:{kind:"other"},Dd=e=>{const t=e.groupedFiberRenders.reduce((e,t)=>e+t.count,0);return e.timing.otherJSTime/hd(e.timing)<.2?{kind:"js-explanation-base"}:e.groupedFiberRenders.find(e=>e.count>200)||e.groupedFiberRenders.reduce((e,t)=>e+t.count,0)>500?{kind:"high-render-count-high-js",data:{renderCount:t,topByCount:e.groupedFiberRenders.filter(e=>e.count>100).toSorted((e,t)=>t.count-e.count).slice(0,3)}}:e.timing.otherJSTime/hd(e.timing)>.3?e.timing.renderTime>.2?{kind:"js-explanation-base"}:{kind:"low-render-count-high-js",data:{renderCount:t}}:{kind:"js-explanation-base"}},jd=({input:e})=>{switch(e.kind){case"total-processing":return Rn("div",{className:lo(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"]),children:[Rn("p",{children:["This is the time it took to draw the entire frame that was presented to the user. To be at 60FPS, this number needs to be ","<=16ms"]}),Rn("p",{children:'To debug the issue, check the "Ranked" tab to see if there are significant component renders'}),Rn("p",{children:"On a production React build, React Scan can't access the time it took for component to render. To get that information, run React Scan on a development build"}),Rn("p",{children:["To understand precisely what caused the slowdown while in production, use the"," ",Rn("strong",{children:"Chrome profiler"})," and analyze the function call times."]}),Rn("p",{})]});case"render":return Rn("div",{className:lo(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"]),children:[Rn("p",{children:"This is the time it took React to run components, and internal logic to handle the output of your component."}),Rn("div",{className:lo(["flex flex-col"]),children:[Rn("p",{children:"The slowest components for this time period were:"}),e.data.topByTime.map(e=>Rn("div",{children:[Rn("strong",{children:e.name}),": ",(100*e.percentage).toFixed(0),"% of total"]},e.name))]}),Rn("p",{children:'To view the render times of all your components, and what caused them to render, go to the "Ranked" tab'}),Rn("p",{children:'The "Ranked" tab shows the render times of every component.'}),Rn("p",{children:"The render times of the same components are grouped together into one bar."}),Rn("p",{children:"Clicking the component will show you what props, state, or context caused the component to re-render."})]});case"js-explanation-base":return Rn("div",{className:lo(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"]),children:[Rn("p",{children:"This is the period when JavaScript hooks and other JavaScript outside of React Renders run."}),Rn("p",{children:["The most common culprit for high JS time is expensive hooks, like expensive callbacks inside of ",Rn("code",{children:"useEffect"}),"'s or a large number of useEffect's called, but this can also be JavaScript event handlers (",Rn("code",{children:"'onclick'"}),", ",Rn("code",{children:"'onchange'"}),") that performed expensive computation."]}),Rn("p",{children:"If you have lots of components rendering that call hooks, like useEffect, it can add significant overhead even if the callbacks are not expensive. If this is the case, you can try optimizing the renders of those components to avoid the hook from having to run."}),Rn("p",{children:["You should profile your app using the ",Rn("strong",{children:"Chrome DevTools profiler"})," to learn exactly which functions took the longest to execute."]})]});case"high-render-count-high-js":return Rn("div",{className:lo(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"]),children:[Rn("p",{children:"This is the period when JavaScript hooks and other JavaScript outside of React Renders run."}),0===e.data.renderCount?Rn(me,{children:[Rn("p",{children:"There were no renders, which means nothing related to React caused this slowdown. The most likely cause of the slowdown is a slow JavaScript event handler, or code related to a Web API"}),Rn("p",{children:["You should try to reproduce the slowdown while profiling your website with the",Rn("strong",{children:"Chrome DevTools profiler"})," to see exactly what functions took the longest to execute."]})]}):Rn(me,{children:[" ",Rn("p",{children:["There were ",Rn("strong",{children:e.data.renderCount})," renders, which could have contributed to the high JavaScript/Hook time if they ran lots of hooks, like"," ",Rn("code",{children:"useEffects"}),"."]}),Rn("div",{className:lo(["flex flex-col"]),children:[Rn("p",{children:"You should try optimizing the renders of:"}),e.data.topByCount.map(e=>Rn("div",{children:["- ",Rn("strong",{children:e.name})," (rendered ",e.count,"x)"]},e.name))]}),"and then checking if the problem still exists.",Rn("p",{children:["You can also try profiling your app using the"," ",Rn("strong",{children:"Chrome DevTools profiler"})," to see exactly what functions took the longest to execute."]})]})]});case"low-render-count-high-js":return Rn("div",{className:lo(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"]),children:[Rn("p",{children:"This is the period when JavaScript hooks and other JavaScript outside of React Renders run."}),Rn("p",{children:["There were only ",Rn("strong",{children:e.data.renderCount})," renders detected, which means either you had very expensive hooks like ",Rn("code",{children:"useEffect"}),"/",Rn("code",{children:"useLayoutEffect"}),", or there is other JavaScript running during this interaction that took up the majority of the time."]}),Rn("p",{children:["To understand precisely what caused the slowdown, use the"," ",Rn("strong",{children:"Chrome profiler"})," and analyze the function call times."]})]});case"high-render-count-update-dom-draw-frame":return Rn("div",{className:lo(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"]),children:[Rn("p",{children:"These are the calculations the browser is forced to do in response to the JavaScript that ran during the interaction."}),Rn("p",{children:"This can be caused by CSS updates/CSS recalculations, or new DOM elements/DOM mutations."}),Rn("p",{children:["During this interaction, there were ",Rn("strong",{children:e.data.count})," renders, which was ",Rn("strong",{children:[e.data.percentageOfTotal.toFixed(0),"%"]})," of the time spent processing"]}),Rn("p",{children:"The work performed as a result of the renders may have forced the browser to spend a lot of time to draw the next frame."}),Rn("p",{children:'You can try optimizing the renders to see if the performance problem still exists using the "Ranked" tab.'}),Rn("p",{children:"If you use an AI-based code editor, you can export the performance data collected as a prompt."}),Rn("p",{children:e.data.copyButton}),Rn("p",{children:"Provide this formatted data to the model and ask it to find, or fix, what could be causing this performance problem."}),Rn("p",{children:'For a larger selection of prompts, try the "Prompts" tab'})]});case"update-dom-draw-frame":return Rn("div",{className:lo(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"]),children:[Rn("p",{children:"These are the calculations the browser is forced to do in response to the JavaScript that ran during the interaction."}),Rn("p",{children:"This can be caused by CSS updates/CSS recalculations, or new DOM elements/DOM mutations."}),Rn("p",{children:"If you use an AI-based code editor, you can export the performance data collected as a prompt."}),Rn("p",{children:e.data.copyButton}),Rn("p",{children:"Provide this formatted data to the model and ask it to find, or fix, what could be causing this performance problem."}),Rn("p",{children:'For a larger selection of prompts, try the "Prompts" tab'})]});case"other":return Rn("div",{className:lo(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"]),children:[Rn("p",{children:["This is the time it took to run everything other than React renders. This can be hooks like ",Rn("code",{children:"useEffect"}),", other JavaScript not part of React, or work the browser has to do to update the DOM and draw the next frame."]}),Rn("p",{children:["To get a better picture of what happened, profile your app using the"," ",Rn("strong",{children:"Chrome profiler"})," when the performance problem arises."]})]})}},Ld=null,Pd=null,Id=_t({kind:"idle",current:null}),Wd=null,Ud=0,Hd=1/60,Bd=()=>{Wd&&cancelAnimationFrame(Wd),Wd=requestAnimationFrame(e=>{if(!Ld||!Pd)return;const t=Ud?Math.min((e-Ud)/1e3,.05):Hd;Ud=e;const n=1.8*t;Pd.clearRect(0,0,Ld.width,Ld.height);const r="hsl(271, 76%, 53%)",o=Id.value,{alpha:i,current:a}=Oc(()=>{var e,t,n;switch(o.kind){case"transition":{const t=(null==(e=o.current)?void 0:e.alpha)&&o.current.alpha>0?o.current:o.transitionTo;return{alpha:t?t.alpha:0,current:t}}case"move-out":return{alpha:null!=(n=null==(t=o.current)?void 0:t.alpha)?n:0,current:o.current};case"idle":return{alpha:1,current:o.current}}});switch(null==a||a.rects.forEach(e=>{Pd&&(Pd.shadowColor=r,Pd.shadowBlur=6,Pd.strokeStyle=r,Pd.lineWidth=2,Pd.globalAlpha=i,Pd.beginPath(),Pd.rect(e.left,e.top,e.width,e.height),Pd.stroke(),Pd.shadowBlur=0,Pd.beginPath(),Pd.rect(e.left,e.top,e.width,e.height),Pd.stroke())}),o.kind){case"move-out":return 0===o.current.alpha?(Id.value={kind:"idle",current:null},void(Ud=0)):(o.current.alpha<=.01&&(o.current.alpha=0),o.current.alpha=Math.max(0,o.current.alpha-n),void Bd());case"transition":if(o.current&&o.current.alpha>0)return o.current.alpha=Math.max(0,o.current.alpha-n),void Bd();if(1===o.transitionTo.alpha)return Id.value={kind:"idle",current:o.transitionTo},void(Ud=0);o.transitionTo.alpha=Math.min(o.transitionTo.alpha+n,1),Bd();case"idle":return void(Ud=0)}})},Vd=null;function qd(){(null==Ld?void 0:Ld.parentNode)&&Ld.parentNode.removeChild(Ld),Ld=null,Pd=null}var Gd,Jd=()=>{var e,t;const n=Id.value.current?Id.value.current:"transition"===Id.value.kind?Id.value.transitionTo:null;n&&("transition"!==Id.value.kind?Id.value={kind:"move-out",current:{alpha:0,...n}}:Id.value={kind:"move-out",current:0===(null==(e=Id.value.current)?void 0:e.alpha)?Id.value.transitionTo:null!=(t=Id.value.current)?t:Id.value.transitionTo})},Yd=({selectedEvent:e})=>{const t=hd(e.timing),n=t-e.timing.renderTime,[r]=Ge(Vu()),o=e.groupedFiberRenders.map(e=>({event:e,kind:"render",totalTime:r?e.count:e.totalTime})),i=Oc(()=>{switch(e.kind){case"dropped-frames":return e.timing.renderTime/t<.1;case"interaction":return(e.timing.otherJSTime+e.timing.renderTime)/t<.2}});"interaction"!==e.kind||r||o.push({kind:"other-javascript",totalTime:e.timing.otherJSTime}),i&&!r&&("interaction"===e.kind?o.push({kind:"other-not-javascript",totalTime:hd(e.timing)-e.timing.renderTime-e.timing.otherJSTime}):o.push({kind:"other-frame-drop",totalTime:n}));const a=Xe({lastCallAt:null,timer:null}),s=o.reduce((e,t)=>e+t.totalTime,0);return Rn("div",{className:lo(["flex flex-col h-full w-full gap-y-1"]),children:[Oc(()=>r&&0===o.length?Rn("div",{className:"flex flex-col items-center justify-center h-full text-zinc-400",children:[Rn("p",{className:"text-sm w-full text-left text-white mb-1.5",children:"No data available"}),Rn("p",{className:"text-x w-full text-lefts",children:"No data was collected during this period"})]}):0===o.length?Rn("div",{className:"flex flex-col items-center justify-center h-full text-zinc-400",children:[Rn("p",{className:"text-sm w-full text-left text-white mb-1.5",children:"No renders collected"}),Rn("p",{className:"text-x w-full text-lefts",children:"There were no renders during this period"})]}):void 0),o.toSorted((e,t)=>t.totalTime-e.totalTime).map(e=>Rn(Xd,{bars:o,bar:e,debouncedMouseEnter:a,totalBarTime:s,isProduction:r},"render"===e.kind?e.event.id:e.kind))]})},Xd=({bar:e,debouncedMouseEnter:t,totalBarTime:n,isProduction:r,bars:o,depth:i=0})=>{const{setNotificationState:a,setRoute:s}=fd(),[l,c]=Ge(!1),d="render"!==e.kind||0===e.event.parents.size,u=o.filter(t=>"render"===t.kind&&"render"===e.kind&&(e.event.parents.has(t.event.name)&&t.event.name!==e.event.name)),p="render"===e.kind?Array.from(e.event.parents).filter(e=>!o.some(t=>"render"===t.kind&&t.event.name===e)):[];return Rn("div",{className:"w-full",children:[Rn("div",{className:lo(["w-full flex items-center relative text-xs min-w-0"]),children:[Rn("button",{onMouseLeave:()=>{t.current.timer&&clearTimeout(t.current.timer),Jd()},onMouseEnter:async()=>{const n=async()=>{if(t.current.lastCallAt=Date.now(),"render"!==e.kind){const e=Id.value.current?Id.value.current:"transition"===Id.value.kind?Id.value.transitionTo:null;return e?void(Id.value={kind:"move-out",current:{alpha:0,...e}}):void(Id.value={kind:"idle",current:null})}const n=Id.value,r=Oc(()=>{switch(n.kind){case"transition":return n.transitionTo;case"idle":case"move-out":return n.current}}),o=[];if("transition"===n.kind){const t=(e=>e.current&&e.current.alpha>0?"fading-out":"fading-in")(n);Oc(()=>{switch(t){case"fading-in":return void(Id.value={kind:"transition",current:n.transitionTo,transitionTo:{rects:o,alpha:0,name:e.event.name}});case"fading-out":return void(Id.value={kind:"transition",current:Id.value.current?{alpha:0,...Id.value.current}:null,transitionTo:{rects:o,alpha:0,name:e.event.name}})}})}else Id.value={kind:"transition",transitionTo:{rects:o,alpha:0,name:e.event.name},current:r?{alpha:0,...r}:null};const i=e.event.elements.filter(e=>e instanceof Element);for await(const e of ja(i))e.forEach(({boundingClientRect:e})=>{o.push(e)}),Bd()};if(t.current.lastCallAt&&Date.now()-t.current.lastCallAt<200)return t.current.timer&&clearTimeout(t.current.timer),void(t.current.timer=setTimeout(()=>{n()},200));n()},onClick:()=>{"render"===e.kind?(a(t=>({...t,selectedFiber:e.event})),s({route:"render-explanation",routeMessage:null})):s({route:"other-visualization",routeMessage:{kind:"auto-open-overview-accordion",name:e.kind}})},className:lo(["h-full w-[90%] flex items-center hover:bg-[#0f0f0f] rounded-l-md min-w-0 relative"]),children:[Rn("div",{style:{minWidth:"fit-content",width:e.totalTime/n*100+"%"},className:lo(["flex items-center rounded-sm text-white text-xs h-[28px] shrink-0","render"===e.kind&&"bg-[#412162] group-hover:bg-[#5b2d89]","other-frame-drop"===e.kind&&"bg-[#44444a] group-hover:bg-[#6a6a6a]","other-javascript"===e.kind&&"bg-[#efd81a6b] group-hover:bg-[#efda1a2f]","other-not-javascript"===e.kind&&"bg-[#214379d4] group-hover:bg-[#21437982]"])}),Rn("div",{className:lo(["absolute inset-0 flex items-center px-2","min-w-0"]),children:Rn("div",{className:"flex items-center gap-x-2 min-w-0 w-full",children:[Rn("span",{className:lo(["truncate"]),children:Oc(()=>{switch(e.kind){case"other-frame-drop":return"JavaScript, DOM updates, Draw Frame";case"other-javascript":return"JavaScript/React Hooks";case"other-not-javascript":return"Update DOM and Draw New Frame";case"render":return e.event.name}})}),"render"===e.kind&&(h=e.event,!h.wasFiberRenderMount&&!h.hasMemoCache&&0===h.changes.context.length&&0===h.changes.props.length&&0===h.changes.state.length)&&Rn("div",{style:{lineHeight:"10px"},className:lo(["px-1 py-0.5 bg-[#6a369e] flex items-center rounded-sm font-semibold text-[8px] shrink-0"]),children:"Memoizable"})]})})]}),Rn("button",{onClick:()=>"render"===e.kind&&!d&&c(!l),className:lo(["flex items-center min-w-fit shrink-0 rounded-r-md h-[28px]",!d&&"hover:bg-[#0f0f0f]","render"!==e.kind||d?"cursor-default":"cursor-pointer"]),children:[Rn("div",{className:"w-[20px] flex items-center justify-center",children:"render"===e.kind&&!d&&Rn(vd,{className:lo("transition-transform",l&&"rotate-90"),size:16})}),Rn("div",{style:{minWidth:d?"fit-content":r?"30px":"60px"},className:"flex items-center justify-end gap-x-1",children:["render"===e.kind&&Rn("span",{className:lo(["text-[10px]"]),children:["x",e.event.count]}),("render"!==e.kind||!r)&&Rn("span",{className:"text-[10px] text-[#7346a0] pr-1",children:[e.totalTime<1?"<1":e.totalTime.toFixed(0),"ms"]})]})]}),0===i&&Rn("div",{className:lo(["absolute right-0 top-1/2 transition-none -translate-y-1/2 bg-white text-black px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity mr-16","pointer-events-none"]),children:"Click to learn more"})]}),l&&(u.length>0||p.length>0)&&Rn("div",{className:"pl-3 flex flex-col gap-y-1 mt-1",children:[u.toSorted((e,t)=>t.totalTime-e.totalTime).map((e,a)=>Rn(Xd,{depth:i+1,bar:e,debouncedMouseEnter:t,totalBarTime:n,isProduction:r,bars:o},a)),p.map(e=>Rn("div",{className:"w-full",children:Rn("div",{className:"w-full flex items-center relative text-xs",children:Rn("div",{className:"h-full w-full flex items-center relative",children:[Rn("div",{className:"flex items-center rounded-sm text-white text-xs h-[28px] w-full"}),Rn("div",{className:"absolute inset-0 flex items-center px-2",children:Rn("span",{className:"truncate whitespace-nowrap text-white/70 w-full",children:e})})]})})},e))]})]});var h},Kd=({selectedEvent:e,selectedFiber:t})=>{const{setRoute:n}=fd(),[r,o]=Ge(!0),[i]=Ge(Vu());Ye(()=>{const e=localStorage.getItem("react-scan-tip-shown"),t="true"===e||"false"!==e&&null;if(null===t)return o(!0),void localStorage.setItem("react-scan-tip-is-shown","true");t||o(!1)},[]);const a=0===t.changes.context.length&&0===t.changes.props.length&&0===t.changes.state.length;return Rn("div",{className:lo(["w-full min-h-fit h-full flex flex-col py-4 pt-0 rounded-sm"]),children:[Rn("div",{className:lo(["flex items-start gap-x-4 "]),children:[Rn("button",{onClick:()=>{n({route:"render-visualization",routeMessage:null})},className:lo(["text-white hover:bg-[#34343b] flex gap-x-1 justify-center items-center mb-4 w-fit px-2.5 py-1.5 text-xs rounded-sm bg-[#18181B]"]),children:[Rn(kd,{size:14})," ",Rn("span",{children:"Overview"})]}),Rn("div",{className:lo(["flex flex-col gap-y-1"]),children:[Rn("div",{className:lo(["text-sm font-bold text-white overflow-x-hidden"]),children:Rn("div",{className:"flex items-center gap-x-2 truncate",children:t.name})}),Rn("div",{className:lo(["flex gap-x-2"]),children:[!i&&Rn(me,{children:Rn("div",{className:lo(["text-xs text-gray-400"]),children:["• Render time: ",t.totalTime.toFixed(0),"ms"]})}),Rn("div",{className:lo(["text-xs text-gray-400 mb-4"]),children:["• Renders: ",t.count,"x"]})]})]})]}),r&&!a&&Rn("div",{className:lo(["w-full mb-4 bg-[#0A0A0A] border border-[#27272A] rounded-sm overflow-hidden flex relative"]),children:[Rn("button",{onClick:()=>{o(!1),localStorage.setItem("react-scan-tip-shown","false")},className:lo(["absolute right-2 top-2 rounded-sm p-1 hover:bg-[#18181B]"]),children:Rn(bd,{size:12})}),Rn("div",{className:lo(["w-1 bg-[#d36cff]"])}),Rn("div",{className:lo(["flex-1"]),children:[Rn("div",{className:lo(["px-3 py-2 text-gray-100 text-xs font-semibold"]),children:"How to stop renders"}),Rn("div",{className:lo(["px-3 pb-2 text-gray-400 text-[10px]"]),children:"Stop the following props, state and context from changing between renders, and wrap the component in React.memo if not already"})]})]}),a&&Rn("div",{className:lo(["w-full mb-4 bg-[#0A0A0A] border border-[#27272A] rounded-sm overflow-hidden flex"]),children:[Rn("div",{className:lo(["w-1 bg-[#d36cff]"])}),Rn("div",{className:lo(["flex-1"]),children:[Rn("div",{className:lo(["px-3 py-2 text-gray-100 text-sm font-semibold"]),children:"No changes detected"}),Rn("div",{className:lo(["px-3 pb-2 text-gray-400 text-xs"]),children:"This component would not have rendered if it was memoized"})]})]}),Rn("div",{className:lo(["flex w-full"]),children:[Rn("div",{className:lo(["flex flex-col border border-[#27272A] rounded-l-sm overflow-hidden w-1/3"]),children:[Rn("div",{className:lo(["text-[14px] font-semibold px-2 py-2 bg-[#18181B] text-white flex justify-center"]),children:"Changed Props"}),t.changes.props.length>0?t.changes.props.toSorted((e,t)=>t.count-e.count).map(e=>Rn("div",{className:lo(["flex flex-col justify-between items-center border-t overflow-x-auto border-[#27272A] px-1 py-1 text-wrap bg-[#0A0A0A] text-[10px]"]),children:[Rn("span",{className:lo(["text-white "]),children:e.name}),Rn("div",{className:lo([" text-[8px]  text-[#d36cff] pl-1 py-1 "]),children:[e.count,"/",t.count,"x"]})]},e.name)):Rn("div",{className:lo(["flex items-center justify-center h-full bg-[#0A0A0A] text-[#A1A1AA] border-t border-[#27272A]"]),children:"No changes"})]}),Rn("div",{className:lo(["flex flex-col border border-[#27272A] border-l-0 overflow-hidden w-1/3"]),children:[Rn("div",{className:lo([" text-[14px] font-semibold px-2 py-2 bg-[#18181B] text-white flex justify-center"]),children:"Changed State"}),t.changes.state.length>0?t.changes.state.toSorted((e,t)=>t.count-e.count).map(e=>Rn("div",{className:lo(["flex flex-col justify-between items-center border-t overflow-x-auto border-[#27272A] px-1 py-1 text-wrap bg-[#0A0A0A] text-[10px]"]),children:[Rn("span",{className:lo(["text-white "]),children:["index ",e.index]}),Rn("div",{className:lo(["rounded-full  text-[#d36cff] pl-1 py-1 text-[8px]"]),children:[e.count,"/",t.count,"x"]})]},e.index)):Rn("div",{className:lo(["flex items-center justify-center h-full bg-[#0A0A0A] text-[#A1A1AA] border-t border-[#27272A]"]),children:"No changes"})]}),Rn("div",{className:lo(["flex flex-col border border-[#27272A] border-l-0 rounded-r-sm overflow-hidden w-1/3"]),children:[Rn("div",{className:lo([" text-[14px] font-semibold px-2 py-2 bg-[#18181B] text-white flex justify-center"]),children:"Changed Context"}),t.changes.context.length>0?t.changes.context.toSorted((e,t)=>t.count-e.count).map(e=>Rn("div",{className:lo(["flex flex-col justify-between items-center border-t  border-[#27272A] px-1 py-1 bg-[#0A0A0A] text-[10px] overflow-x-auto"]),children:[Rn("span",{className:lo(["text-white "]),children:e.name}),Rn("div",{className:lo(["rounded-full text-[#d36cff] pl-1 py-1 text-[8px] text-wrap"]),children:[e.count,"/",t.count,"x"]})]},e.name)):Rn("div",{className:lo(["flex items-center justify-center h-full bg-[#0A0A0A] text-[#A1A1AA] border-t border-[#27272A] py-2"]),children:"No changes"})]})]})]})},Zd=()=>{const{notificationState:e,setNotificationState:t}=fd(),[n,r]=Ge("..."),o=Xe(null);if(Je(()=>{const e=setInterval(()=>{r(e=>"..."===e?"":e+".")},500);return()=>clearInterval(e)},[]),!e.selectedEvent)return Rn("div",{ref:o,className:lo(["h-full w-full flex flex-col items-center justify-center relative py-2 px-4"]),children:[Rn("div",{className:lo(["p-2 flex justify-center items-center border-[#27272A] absolute top-0 right-0"]),children:Rn("button",{onClick:()=>{_o.value={view:"none"}},children:Rn(bd,{size:18,className:"text-[#6F6F78]"})})}),Rn("div",{className:lo(["flex flex-col items-start pt-5 bg-[#0A0A0A] p-5 rounded-sm max-w-md"," shadow-lg"]),children:Rn("div",{className:lo(["flex flex-col items-start gap-y-4"]),children:[Rn("div",{className:lo(["flex items-center"]),children:Rn("span",{className:lo(["text-zinc-400 font-medium text-[17px]"]),children:["Scanning for slowdowns",n]})}),0!==e.events.length&&Rn("p",{className:lo(["text-xs"]),children:["Click on an item in the"," ",Rn("span",{className:lo(["text-purple-400"]),children:"History"})," list to get started"]}),Rn("p",{className:lo(["text-zinc-600 text-xs"]),children:"You don't need to keep this panel open for React Scan to record slowdowns"}),Rn("p",{className:lo(["text-zinc-600 text-xs"]),children:"Enable audio alerts to hear a delightful ding every time a large slowdown is recorded"}),Rn("button",{onClick:()=>{if(e.audioNotificationsOptions.enabled)return void t(e=>{var t,n;return"closed"!==(null==(t=e.audioNotificationsOptions.audioContext)?void 0:t.state)&&(null==(n=e.audioNotificationsOptions.audioContext)||n.close()),localStorage.setItem("react-scan-notifications-audio","false"),{...e,audioNotificationsOptions:{audioContext:null,enabled:!1}}});localStorage.setItem("react-scan-notifications-audio","true");const n=new AudioContext;nn(n),t(e=>({...e,audioNotificationsOptions:{enabled:!0,audioContext:n}}))},className:lo(["px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-sm w-full"," text-sm flex items-center gap-x-2 justify-center"]),children:e.audioNotificationsOptions.enabled?Rn(me,{children:Rn("span",{className:"flex items-center gap-x-1",children:"Disable audio alerts"})}):Rn(me,{children:Rn("span",{className:"flex items-center gap-x-1",children:"Enable audio alerts"})})})]})})]});switch(e.route){case"render-visualization":return Rn(Qd,{children:Rn(Yd,{selectedEvent:e.selectedEvent})});case"render-explanation":if(!e.selectedFiber)throw new Error("Invariant: must have selected fiber when viewing render explanation");return Rn(Qd,{children:Rn(Kd,{selectedFiber:e.selectedFiber,selectedEvent:e.selectedEvent})});case"other-visualization":return Rn(Qd,{children:Rn("div",{className:lo(["flex w-full h-full flex-col overflow-y-auto"]),id:"overview-scroll-container",children:Rn($d,{selectedEvent:e.selectedEvent})})});case"optimize":return Rn(Qd,{children:Rn(Md,{selectedEvent:e.selectedEvent})})}e.route},Qd=({children:e})=>{const{notificationState:t}=fd();if(!t.selectedEvent)throw new Error("Invariant: d must have selected event when viewing render explanation");return Rn("div",{className:lo(["w-full h-full flex flex-col gap-y-2"]),children:[Rn("div",{className:lo(["h-[50px] w-full"]),children:Rn(Ed,{selectedEvent:t.selectedEvent})}),Rn("div",{className:lo(["h-calc(100%-50px) flex flex-col overflow-y-auto px-3"]),children:e})]})},eu=({selectedEvent:e})=>{const t=md(e);switch(e.kind){case"interaction":return Rn("div",{className:lo(["w-full flex border-b border-[#27272A] min-h-[48px]"]),children:Rn("div",{className:lo(["min-w-fit w-full justify-start flex items-center border-r border-[#27272A] pl-5 pr-2 text-sm gap-x-4"]),children:[Rn("div",{className:lo(["flex items-center gap-x-2 "]),children:[Rn("span",{className:lo(["text-[#5a5a5a] mr-0.5"]),children:"click"===e.type?"Clicked ":"Typed in "}),Rn("span",{children:pd(e.componentPath)}),Rn("div",{className:lo(["w-fit flex items-center justify-center h-fit text-white px-1 rounded-sm font-semibold text-[10px] whitespace-nowrap","low"===t&&"bg-green-500/50","needs-improvement"===t&&"bg-[#b77116]","high"===t&&"bg-[#b94040]"]),children:[hd(e.timing).toFixed(0),"ms processing time"]})]}),Rn("div",{className:lo(["flex items-center gap-x-2  justify-end ml-auto"]),children:Rn("div",{className:lo(["p-2 flex justify-center items-center border-[#27272A]"]),children:Rn("button",{onClick:()=>{_o.value={view:"none"}},title:"Close",children:Rn(bd,{size:18,className:"text-[#6F6F78]"})})})})]})});case"dropped-frames":return Rn("div",{className:lo(["w-full flex border-b border-[#27272A] min-h-[48px]"]),children:Rn("div",{className:lo(["min-w-fit w-full justify-start flex items-center border-r border-[#27272A] pl-5 pr-2 text-sm gap-x-4"]),children:[Rn("div",{className:lo(["flex items-center gap-x-2 "]),children:["FPS Drop",Rn("div",{className:lo(["w-fit flex items-center justify-center h-fit text-white px-1 rounded-sm font-semibold text-[10px] whitespace-nowrap","low"===t&&"bg-green-500/50","needs-improvement"===t&&"bg-[#b77116]","high"===t&&"bg-[#b94040]"]),children:["dropped to ",e.fps," FPS"]})]}),Rn("div",{className:lo(["flex items-center gap-x-2 w-2/4 justify-end ml-auto"]),children:Rn("div",{className:lo(["p-2 flex justify-center items-center border-[#27272A]"]),children:Rn("button",{onClick:()=>{_o.value={view:"none"}},children:Rn(bd,{size:18,className:"text-[#6F6F78]"})})})})]})})}},tu=({item:e,shouldFlash:t})=>{var n,r;const[o,i]=Ge(!1),a=e.events.map(md).reduce((e,t)=>{switch(t){case"high":return"high";case"needs-improvement":return"high"===e?"high":"needs-improvement";case"low":return e}},"low"),s=(({flashingItemsCount:e,totalEvents:t})=>{const[n,r]=Ge(!1),o=Xe(0),i=Xe(0);return Je(()=>{if(o.current>=t)return;const e=Date.now()-i.current;if(e>=250){r(!1);const e=setTimeout(()=>{o.current=t,i.current=Date.now(),r(!0),setTimeout(()=>{r(!1)},2e3)},50);return()=>clearTimeout(e)}{const n=setTimeout(()=>{r(!1),setTimeout(()=>{o.current=t,i.current=Date.now(),r(!0),setTimeout(()=>{r(!1)},2e3)},50)},250-e);return()=>clearTimeout(n)}},[e]),n})({flashingItemsCount:e.events.reduce((e,n)=>t(n.id)?e+1:e,0),totalEvents:e.events.length});return Rn("div",{className:lo(["flex flex-col gap-y-0.5"]),children:[Rn("button",{onClick:()=>i(e=>!e),className:lo(["pl-2 py-1.5  text-sm flex items-center rounded-sm hover:bg-[#18181B] relative overflow-hidden",s&&!o&&"after:absolute after:inset-0 after:bg-purple-500/30 after:animate-[fadeOut_1s_ease-out_forwards]"]),children:[Rn("div",{className:lo(["w-4/5 flex items-center justify-start h-full text-xs truncate gap-x-1.5"]),children:[Rn("span",{className:lo(["min-w-fit"]),children:Rn(vd,{className:lo(["text-[#A1A1AA] transition-transform",o?"rotate-90":""]),size:14},`chevron-${e.timestamp}`)}),Rn("span",{className:lo(["text-xs"]),children:"collapsed-frame-drops"===e.kind?"FPS Drops":pd(null!=(r=null==(n=e.events.at(0))?void 0:n.componentPath)?r:[])})]}),Rn("div",{className:lo(["ml-auto min-w-fit flex justify-end items-center"]),children:Rn("div",{style:{lineHeight:"10px"},className:lo(["w-fit flex items-center text-[10px] justify-center h-full text-white px-1 py-1 rounded-sm font-semibold","low"===a&&"bg-green-500/60","needs-improvement"===a&&"bg-[#b77116] text-[10px]","high"===a&&"bg-[#b94040]"]),children:["x",e.events.length]})})]}),o&&Rn(nu,{children:e.events.toSorted((e,t)=>t.timestamp-e.timestamp).map(e=>Rn(ru,{event:e,shouldFlash:t(e.id)}))})]})},nu=({children:e})=>Rn("div",{className:"relative pl-6 flex flex-col gap-y-1",children:[Rn("div",{className:"absolute left-3 top-0 bottom-0 w-px bg-[#27272A]"}),e]}),ru=({event:e,shouldFlash:t})=>{var n,r;const{notificationState:o,setNotificationState:i}=fd(),a=md(e),s=(({shouldFlash:e})=>{const[t,n]=Ge(e);return Je(()=>{if(e){n(!0);const e=setTimeout(()=>{n(!1)},1e3);return()=>clearTimeout(e)}},[e]),t})({shouldFlash:t});switch(e.kind){case"interaction":return Rn("button",{onClick:()=>{i(t=>({...t,selectedEvent:e,route:"render-visualization",selectedFiber:null}))},className:lo(["pl-2 py-1.5  text-sm flex w-full items-center rounded-sm hover:bg-[#18181B] relative overflow-hidden",e.id===(null==(n=o.selectedEvent)?void 0:n.id)&&"bg-[#18181B]",s&&"after:absolute after:inset-0 after:bg-purple-500/30 after:animate-[fadeOut_1s_ease-out_forwards]"]),children:[Rn("div",{className:lo(["w-4/5 flex items-center justify-start h-full gap-x-1.5"]),children:[Rn("span",{className:lo(["min-w-fit text-xs"]),children:Oc(()=>{switch(e.type){case"click":return Rn(_d,{size:14});case"keyboard":return Rn(Nd,{size:14})}})}),Rn("span",{className:lo(["text-xs pr-1 truncate"]),children:pd(e.componentPath)})]}),Rn("div",{className:lo([" min-w-fit flex justify-end items-center ml-auto"]),children:Rn("div",{style:{lineHeight:"10px"},className:lo(["gap-x-0.5 w-fit flex items-end justify-center h-full text-white px-1 py-1 rounded-sm font-semibold text-[10px]","low"===a&&"bg-green-500/50","needs-improvement"===a&&"bg-[#b77116] text-[10px]","high"===a&&"bg-[#b94040]"]),children:Rn("div",{style:{lineHeight:"10px"},className:lo(["text-[10px] text-white flex items-end"]),children:[hd(e.timing).toFixed(0),"ms"]})})})]});case"dropped-frames":return Rn("button",{onClick:()=>{i(t=>({...t,selectedEvent:e,route:"render-visualization",selectedFiber:null}))},className:lo(["pl-2 py-1.5  w-full text-sm flex items-center rounded-sm hover:bg-[#18181B] relative overflow-hidden",e.id===(null==(r=o.selectedEvent)?void 0:r.id)&&"bg-[#18181B]",s&&"after:absolute after:inset-0 after:bg-purple-500/30 after:animate-[fadeOut_1s_ease-out_forwards]"]),children:[Rn("div",{className:lo(["w-4/5 flex items-center justify-start h-full text-xs truncate"]),children:[Rn(Cd,{size:14,className:"mr-1.5"})," FPS Drop"]}),Rn("div",{className:lo([" min-w-fit flex justify-end items-center ml-auto"]),children:Rn("div",{style:{lineHeight:"10px"},className:lo(["w-fit flex items-center justify-center h-full text-white px-1 py-1 rounded-sm text-[10px] font-bold","low"===a&&"bg-green-500/60","needs-improvement"===a&&"bg-[#b77116] text-[10px]","high"===a&&"bg-[#b94040]"]),children:[e.fps," FPS"]})})]})}},ou=(e=150)=>{const{notificationState:t}=fd(),[n,r]=Ge(t.events);return Je(()=>{setTimeout(()=>{r(t.events)},e)},[t.events]),[n,r]},iu=()=>{const{notificationState:e,setNotificationState:t}=fd(),n=(e=>{const t=Xe([]),[n,r]=Ge(new Set),o=Xe(!0);return Je(()=>{if(o.current)return o.current=!1,void(t.current=e);const n=new Set(e.map(e=>e.id)),i=new Set(t.current.map(e=>e.id)),a=new Set;n.forEach(e=>{i.has(e)||a.add(e)}),a.size>0&&(r(a),setTimeout(()=>{r(new Set)},2e3)),t.current=e},[e]),e=>n.has(e)})(e.events),[r,o]=ou(),i=(a=r,a.reduce((e,t)=>{const n=e.at(-1);if(!n)return[{kind:"single",event:t,timestamp:t.timestamp}];switch(n.kind){case"collapsed-keyboard":return"interaction"===t.kind&&"keyboard"===t.type&&t.componentPath.join("-")===n.events[0].componentPath.join("-")?[...e.filter(e=>e!==n),{kind:"collapsed-keyboard",events:[...n.events,t],timestamp:Math.max(...[...n.events,t].map(e=>e.timestamp))}]:[...e,{kind:"single",event:t,timestamp:t.timestamp}];case"single":return"interaction"===n.event.kind&&"keyboard"===n.event.type&&"interaction"===t.kind&&"keyboard"===t.type&&n.event.componentPath.join("-")===t.componentPath.join("-")?[...e.filter(e=>e!==n),{kind:"collapsed-keyboard",events:[n.event,t],timestamp:Math.max(n.event.timestamp,t.timestamp)}]:"dropped-frames"===n.event.kind&&"dropped-frames"===t.kind?[...e.filter(e=>e!==n),{kind:"collapsed-frame-drops",events:[n.event,t],timestamp:Math.max(n.event.timestamp,t.timestamp)}]:[...e,{kind:"single",event:t,timestamp:t.timestamp}];case"collapsed-frame-drops":return"dropped-frames"===t.kind?[...e.filter(e=>e!==n),{kind:"collapsed-frame-drops",events:[...n.events,t],timestamp:Math.max(...[...n.events,t].map(e=>e.timestamp))}]:[...e,{kind:"single",event:t,timestamp:t.timestamp}]}},[])).toSorted((e,t)=>t.timestamp-e.timestamp);var a;return Rn("div",{className:lo(["w-full h-full gap-y-2 flex flex-col border-r border-[#27272A] overflow-y-auto"]),children:[Rn("div",{className:lo(["text-sm text-[#65656D] pl-3 pr-1 w-full flex items-center justify-between"]),children:[Rn("span",{children:"History"}),Rn(Td,{wrapperProps:{className:"h-full flex items-center justify-center ml-auto"},triggerContent:Rn("button",{className:lo(["hover:bg-[#18181B] rounded-full p-2"]),title:"Clear all events",onClick:()=>{id.getState().actions.clear(),t(e=>({...e,selectedEvent:null,selectedFiber:null,route:"other-visualization"===e.route?"other-visualization":"render-visualization"})),o([])},children:Rn(Sd,{className:lo([""]),size:16})}),children:Rn("div",{className:lo(["w-full flex justify-center"]),children:"Clear all events"})})]}),Rn("div",{className:lo(["flex flex-col px-1 gap-y-1"]),children:[0===i.length&&Rn("div",{className:lo(["flex items-center justify-center text-zinc-500 text-sm py-4"]),children:"No Events"}),i.map(e=>Oc(()=>{switch(e.kind){case"collapsed-keyboard":case"collapsed-frame-drops":return Rn(tu,{shouldFlash:n,item:e});case"single":return Rn(ru,{event:e.event,shouldFlash:n(e.event.id)},e.event.id)}}))]})]})},au=()=>{const e=ad(),t=[];return(e=>{Je(()=>{const t=setInterval(()=>{e.forEach(e=>{e.groupedFiberRenders&&e.groupedFiberRenders.forEach(e=>{if(e.deletedAll)return;if(!e.elements||0===e.elements.length)return void(e.deletedAll=!0);const t=e.elements.length;e.elements=e.elements.filter(e=>e&&e.isConnected),0===e.elements.length&&t>0&&(e.deletedAll=!0)})})},5e3);return()=>{clearInterval(t)}},[e])})(t),e.state.events.forEach(e=>{const n=(e=>Object.values(e).map(e=>({id:tn(),totalTime:e.nodeInfo.reduce((e,t)=>e+t.selfTime,0),count:e.nodeInfo.length,name:e.nodeInfo[0].name,deletedAll:!1,parents:e.parents,hasMemoCache:e.hasMemoCache,wasFiberRenderMount:e.wasFiberRenderMount,elements:e.nodeInfo.map(e=>e.element),changes:{context:e.changes.fiberContext.current.filter(t=>e.changes.fiberContext.changesCounts.get(t.name)).map(t=>{var n;return{name:String(t.name),count:null!=(n=e.changes.fiberContext.changesCounts.get(t.name))?n:0}}),props:e.changes.fiberProps.current.filter(t=>e.changes.fiberProps.changesCounts.get(t.name)).map(t=>{var n;return{name:String(t.name),count:null!=(n=e.changes.fiberProps.changesCounts.get(t.name))?n:0}}),state:e.changes.fiberState.current.filter(t=>e.changes.fiberState.changesCounts.get(Number(t.name))).map(t=>{var n;return{index:t.name,count:null!=(n=e.changes.fiberState.changesCounts.get(Number(t.name)))?n:0}})}})))("interaction"===e.kind?e.data.meta.detailedTiming.fiberRenders:e.data.meta.fiberRenders),r=n.reduce((e,t)=>e+t.totalTime,0);switch(e.kind){case"interaction":{const{commitEnd:o,jsEndDetail:i,interactionStartDetail:a,rafStart:s}=e.data.meta.detailedTiming,l=Math.max(0,i-a-r),c=Math.max(e.data.meta.latency-(o-a),0);return void t.push({componentPath:e.data.meta.detailedTiming.componentPath,groupedFiberRenders:n,id:e.id,kind:"interaction",memory:null,timestamp:e.data.startAt,type:"keyboard"===e.data.meta.detailedTiming.interactionType?"keyboard":"click",timing:{renderTime:r,kind:"interaction",otherJSTime:l,framePreparation:s-i,frameConstruction:o-s,frameDraw:c}})}case"long-render":return void t.push({kind:"dropped-frames",id:e.id,memory:null,timing:{kind:"dropped-frames",renderTime:r,otherTime:e.data.meta.latency},groupedFiberRenders:n,timestamp:e.data.startAt,fps:e.data.meta.fps})}}),t},su=()=>{const{notificationState:e,setNotificationState:t}=fd(),n=Xe(null),r=Xe(null),o=Xe(0),[i]=ou(),a=i.filter(e=>"high"===md(e)).length;return Je(()=>{const e=localStorage.getItem("react-scan-notifications-audio");if("false"!==e&&"true"!==e)return void localStorage.setItem("react-scan-notifications-audio","false");"false"!==e&&t(e=>e.audioNotificationsOptions.enabled?e:{...e,audioNotificationsOptions:{enabled:!0,audioContext:new AudioContext}})},[]),Je(()=>{const{audioNotificationsOptions:t}=e;if(!t.enabled)return;if(0===a)return;if(n.current&&n.current>=a)return;r.current&&clearTimeout(r.current);const i=Date.now()-o.current,s=Math.max(0,1e3-i);r.current=setTimeout(()=>{nn(t.audioContext),n.current=a,o.current=Date.now(),r.current=null},s)},[a]),Je(()=>{0===a&&(n.current=null)},[a]),Je(()=>()=>{r.current&&clearTimeout(r.current)},[]),null},lu=un((e,t)=>{var n;const r=au(),[o,i]=Ge({detailsExpanded:!1,events:r,filterBy:"latest",moreInfoExpanded:!1,route:"render-visualization",selectedEvent:null!=(n=r.toSorted((e,t)=>e.timestamp-t.timestamp).at(-1))?n:null,selectedFiber:null,routeMessage:null,audioNotificationsOptions:{enabled:!1,audioContext:null}});return o.events=r,Rn(gd.Provider,{value:{notificationState:o,setNotificationState:i,setRoute:({route:e,routeMessage:t})=>{i(n=>{const r={...n,route:e,routeMessage:t};switch(e){case"render-visualization":case"optimize":case"other-visualization":return Jd(),{...r,selectedFiber:null};case"render-explanation":return Jd(),r}})}},children:[Rn(su,{}),Rn(cu,{ref:t})]})}),cu=un((e,t)=>{var n;const{notificationState:r}=fd();return Rn("div",{ref:t,className:lo(["h-full w-full flex flex-col"]),children:[r.selectedEvent&&Rn("div",{className:lo(["w-full h-[48px] flex flex-col",r.moreInfoExpanded&&"h-[235px]",r.moreInfoExpanded&&"dropped-frames"===r.selectedEvent.kind&&"h-[150px]"]),children:[Rn(eu,{selectedEvent:r.selectedEvent}),r.moreInfoExpanded&&Rn(du,{})]}),Rn("div",{className:lo(["flex ",r.selectedEvent?"h-[calc(100%-48px)]":"h-full",r.moreInfoExpanded&&"h-[calc(100%-200px)]",r.moreInfoExpanded&&"dropped-frames"===(null==(n=r.selectedEvent)?void 0:n.kind)&&"h-[calc(100%-150px)]"]),children:[Rn("div",{className:lo(["h-full min-w-[200px]"]),children:Rn(iu,{})}),Rn("div",{className:lo(["w-[calc(100%-200px)] h-full overflow-y-auto"]),children:Rn(Zd,{})})]})]})}),du=()=>{const{notificationState:e}=fd();if(!e.selectedEvent)throw new Error("Invariant must have selected event for more info");const t=e.selectedEvent;return Rn("div",{className:lo(["px-4 py-2 border-b border-[#27272A] bg-[#18181B]/50 h-[calc(100%-40px)]","dropped-frames"===t.kind&&"h-[calc(100%-25px)]"]),children:Rn("div",{className:lo(["flex flex-col gap-y-4 h-full"]),children:Oc(()=>{switch(t.kind){case"interaction":return Rn(me,{children:[Rn("div",{className:lo(["flex items-center gap-x-3"]),children:[Rn("span",{className:"text-[#6F6F78] text-xs font-medium",children:"click"===t.type?"Clicked component location":"Typed in component location"}),Rn("div",{className:"font-mono text-[#E4E4E7] flex items-center bg-[#27272A] pl-2 py-1 rounded-sm overflow-x-auto",children:t.componentPath.toReversed().map((e,n)=>Rn(me,{children:[Rn("span",{style:{lineHeight:"14px"},className:"text-[10px] whitespace-nowrap",children:e},e),n<t.componentPath.length-1&&Rn("span",{className:"text-[#6F6F78] mx-0.5",children:"‹"})]}))})]}),Rn("div",{className:lo(["flex items-center gap-x-3"]),children:[Rn("span",{className:"text-[#6F6F78] text-xs font-medium",children:"Total Time"}),Rn("span",{className:"text-[#E4E4E7] bg-[#27272A] px-1.5 py-1 rounded-sm text-xs",children:[hd(t.timing).toFixed(0),"ms"]})]}),Rn("div",{className:lo(["flex items-center gap-x-3"]),children:[Rn("span",{className:"text-[#6F6F78] text-xs font-medium",children:"Occurred"}),Rn("span",{className:"text-[#E4E4E7] bg-[#27272A] px-1.5 py-1 rounded-sm text-xs",children:`${((Date.now()-t.timestamp)/1e3).toFixed(0)}s ago`})]})]});case"dropped-frames":return Rn(me,{children:[Rn("div",{className:lo(["flex items-center gap-x-3"]),children:[Rn("span",{className:"text-[#6F6F78] text-xs font-medium",children:"Total Time"}),Rn("span",{className:"text-[#E4E4E7] bg-[#27272A] px-1.5 py-1 rounded-sm text-xs",children:[hd(t.timing).toFixed(0),"ms"]})]}),Rn("div",{className:lo(["flex items-center gap-x-3"]),children:[Rn("span",{className:"text-[#6F6F78] text-xs font-medium",children:"Occurred"}),Rn("span",{className:"text-[#E4E4E7] bg-[#27272A] px-1.5 py-1 rounded-sm text-xs",children:`${((Date.now()-t.timestamp)/1e3).toFixed(0)}s ago`})]})]})}})})})},uu=To(()=>{var e;const t=au(),[n,r]=Ge(t);Je(()=>{const e=setTimeout(()=>{r(t)},600);return()=>{clearTimeout(e)}},[t]);const o=Lu.inspectState,i="inspecting"===o.value.kind,a="focused"===o.value.kind,[s,l]=Ge([]),c=Ze(()=>{switch(Lu.inspectState.value.kind){case"inspecting":return _o.value={view:"none"},void(Lu.inspectState.value={kind:"inspect-off"});case"focused":return _o.value={view:"inspector"},void(Lu.inspectState.value={kind:"inspecting",hoveredDomElement:null});case"inspect-off":return _o.value={view:"none"},void(Lu.inspectState.value={kind:"inspecting",hoveredDomElement:null});case"uninitialized":return}},[]),d=Ze(e=>{if(e.preventDefault(),e.stopPropagation(),!Pu.instrumentation)return;const t=!Pu.instrumentation.isPaused.value;Pu.instrumentation.isPaused.value=t;const n=uo("react-scan-options");po("react-scan-options",{...n,enabled:!t})},[]);Jt(()=>{"uninitialized"===Lu.inspectState.value.kind&&(Lu.inspectState.value={kind:"inspect-off"})});let u=null,p="#999";return i?(u=Rn(On,{name:"icon-inspect"}),p="#8e61e3"):a?(u=Rn(On,{name:"icon-focus"}),p="#8e61e3"):(u=Rn(On,{name:"icon-inspect"}),p="#999"),Ye(()=>{if("notifications"!==_o.value.view)return;const e=new Set(t.map(e=>e.id));l([...e.values()])},[t.length,_o.value.view]),Rn("div",{className:"flex max-h-9 min-h-9 flex-1 items-stretch overflow-hidden",children:[Rn("div",{className:"h-full flex items-center min-w-fit",children:Rn("button",{type:"button",id:"react-scan-inspect-element",title:"Inspect element",onClick:c,className:"button flex items-center justify-center h-full w-full pl-3 pr-2.5",style:{color:p},children:u})}),Rn("div",{className:"h-full flex items-center justify-center",children:Rn("button",{type:"button",id:"react-scan-notifications",title:"Notifications",onClick:()=>{switch("inspect-off"!==Lu.inspectState.value.kind&&(Lu.inspectState.value={kind:"inspect-off"}),_o.value.view){case"inspector":{Lu.inspectState.value={kind:"inspect-off"};const e=new Set(t.map(e=>e.id));return l([...e.values()]),void(_o.value={view:"notifications"})}case"notifications":return void(_o.value={view:"none"});case"none":{const e=new Set(t.map(e=>e.id));return l([...e.values()]),void(_o.value={view:"notifications"})}}},className:"button flex items-center justify-center h-full pl-2.5 pr-2.5",style:{color:p},children:Rn(wd,{events:n.filter(e=>!s.includes(e.id)).map(e=>"high"===md(e)),size:16,className:lo(["text-[#999]","notifications"===_o.value.view&&"text-[#8E61E3]"])})})}),Rn($c,{checked:!(null==(e=Pu.instrumentation)?void 0:e.isPaused.value),onChange:d,className:"place-self-center",title:"Outline Re-renders"}),Pu.options.value.showFPS&&Rn(Rc,{})]})}),pu=Et(()=>"inspecting"===Lu.inspectState.value.kind),hu=Et(()=>lo("relative","flex-1","flex flex-col","rounded-t-lg","overflow-hidden","opacity-100","transition-[opacity]",pu.value&&"opacity-0 duration-0 delay-0")),mu=Et(()=>"inspector"===_o.value.view),fu=Et(()=>"notifications"===_o.value.view),gu=()=>Rn("div",{className:lo("flex flex-1 flex-col","overflow-hidden z-10","rounded-lg","bg-black","opacity-100","transition-[border-radius]","peer-hover/left:rounded-l-none","peer-hover/right:rounded-r-none","peer-hover/top:rounded-t-none","peer-hover/bottom:rounded-b-none"),children:[Rn("div",{className:hu,children:[Rn(Mc,{}),Rn("div",{className:lo("relative","flex-1 flex","text-white","bg-[#0A0A0A]","transition-opacity delay-150","overflow-hidden","border-b border-[#222]"),children:[Rn(vu,{isOpen:mu,children:Rn(fi,{})}),Rn(vu,{isOpen:fu,children:Rn(lu,{})})]})]}),Rn(uu,{})]}),vu=({isOpen:e,children:t})=>Rn("div",{className:lo("flex-1","opacity-0","overflow-y-auto overflow-x-hidden","transition-opacity delay-0","pointer-events-none",e.value&&"opacity-100 delay-150 pointer-events-auto"),children:Rn("div",{className:"absolute inset-0 flex",children:t})}),wu=(e,t,n)=>e+(t-e)*n,bu={frameInterval:1e3/60,speeds:{fast:.51,slow:.1,off:0}},xu=ie&&window.devicePixelRatio||1,yu=()=>{const e=Xe(null),t=Xe(null),n=Xe(null),r=Xe(null),o=Xe(null),i=Xe(0),a=Xe(),s=Xe(new Map),l=Xe(!1),c=Xe(0),d=(e,t,n,o)=>{var i;if(!o)return;const a=null!=(i=(null==o?void 0:o.type)&&J(o.type))?i:"Unknown";e.save(),e.font="12px system-ui, -apple-system, sans-serif";const s="locked"===n?14:0,l="locked"===n?6:0,c=e.measureText(a).width+16+s+l,d=t.left,u=t.top-24-4;if(e.fillStyle="rgb(37, 37, 38, .75)",e.beginPath(),e.roundRect(d,u,c,24,3),e.fill(),"locked"===n){const t=d+8,n=u+(24-s)/2+2;((e,t,n,r)=>{e.save(),e.strokeStyle="white",e.fillStyle="white",e.lineWidth=1.5;const o=.6*r,i=.5*r,a=t+(r-o)/2,s=n;e.beginPath(),e.arc(a+o/2,s+i/2,o/2,Math.PI,0,!1),e.stroke();const l=.8*r,c=.5*r,d=t+(r-l)/2,u=n+i/2;e.fillRect(d,u,l,c),e.restore()})(e,t,n,s),r.current={x:t,y:n,width:s,height:s}}else r.current=null;e.fillStyle="white",e.textBaseline="middle";const p=d+8+("locked"===n?s+l:0);e.fillText(a,p,u+12),e.restore()},u=(e,t,r,o)=>{if(!n.current)return;const i=n.current;t.clearRect(0,0,e.width,e.height),t.strokeStyle="rgba(142, 97, 227, 0.5)",t.fillStyle="rgba(173, 97, 230, 0.10)","locked"===r?t.setLineDash([]):t.setLineDash([4]),t.lineWidth=1,t.fillRect(i.left,i.top,i.width,i.height),t.strokeRect(i.left,i.top,i.width,i.height),d(t,i,r,o)},p=(e,t,r,o,s)=>{if(t.save(),!n.current)return n.current=r,u(e,t,o,s),void t.restore();((e,t,r,o,s)=>{var l;const d=Pu.options.value.animationSpeed,p=null!=(l=bu.speeds[d])?l:bu.speeds.off,h=a=>{a-c.current<bu.frameInterval?i.current=requestAnimationFrame(h):(c.current=a,n.current?(n.current={left:wu(n.current.left,r.left,p),top:wu(n.current.top,r.top,p),width:wu(n.current.width,r.width,p),height:wu(n.current.height,r.height,p)},u(e,t,o,s),Math.abs(n.current.left-r.left)>.1||Math.abs(n.current.top-r.top)>.1||Math.abs(n.current.width-r.width)>.1||Math.abs(n.current.height-r.height)>.1?i.current=requestAnimationFrame(h):(n.current=r,u(e,t,o,s),cancelAnimationFrame(i.current),t.restore())):cancelAnimationFrame(i.current))};cancelAnimationFrame(i.current),clearTimeout(a.current),i.current=requestAnimationFrame(h),a.current=setTimeout(()=>{cancelAnimationFrame(i.current),n.current=r,u(e,t,o,s),t.restore()},1e3)})(e,t,r,o,s)},h=async(e,t,n,r)=>{if(!e||!t||!n)return;const{parentCompositeFiber:o}=yi(e),i=await(async e=>{const t=wi(e);if(!t)return null;const n=vi(t);return n?await new Promise(e=>{const t=new IntersectionObserver(n=>{var r,o;t.disconnect(),e(null!=(o=null==(r=n[0])?void 0:r.boundingClientRect)?o:null)});t.observe(n)}):null})(e);o&&i&&p(t,n,i,r,o)},m=t=>{if(!e.current||l.current)return;const i=a=>{e.current&&"opacity"===a.propertyName&&l.current&&(e.current.removeEventListener("transitionend",i),(e=>{const t=e.getContext("2d");t&&t.clearRect(0,0,e.width,e.height),n.current=null,r.current=null,o.current=null,e.classList.remove("fade-in"),l.current=!1})(e.current),null==t||t())},a=s.current.get("fade-out");a&&(a(),s.current.delete("fade-out")),e.current.addEventListener("transitionend",i),s.current.set("fade-out",()=>{var t;null==(t=e.current)||t.removeEventListener("transitionend",i)}),l.current=!0,e.current.classList.remove("fade-in"),requestAnimationFrame(()=>{var t;null==(t=e.current)||t.classList.add("fade-out")})},f=()=>{e.current&&(l.current=!1,e.current.classList.remove("fade-out"),requestAnimationFrame(()=>{var t;null==(t=e.current)||t.classList.add("fade-in")}))},g=co(r=>{var i,s;if("inspecting"!==Lu.inspectState.peek().kind||!t.current)return;t.current.style.pointerEvents="none";const c=document.elementFromPoint(null!=(i=null==r?void 0:r.clientX)?i:0,null!=(s=null==r?void 0:r.clientY)?s:0);if(t.current.style.removeProperty("pointer-events"),clearTimeout(a.current),c&&c!==e.current){const{parentCompositeFiber:e}=yi(c);if(e){const t=Si(e);if(t)return void(e=>{e!==o.current&&(o.current=e,Ni.has(e.tagName)?m():f(),Lu.inspectState.value={kind:"inspecting",hoveredDomElement:e})})(t)}}n.current&&e.current&&!l.current&&m()},32),v=(e,t)=>{const n=r.current;if(!n)return!1;const o=t.getBoundingClientRect(),i=t.width/o.width,a=t.height/o.height,s=(e.clientX-o.left)*i,l=(e.clientY-o.top)*a,c=s/xu,d=l/xu;return c>=n.x&&c<=n.x+n.width&&d>=n.y&&d<=n.y+n.height},w=n=>{if(n.__reactScanSyntheticEvent)return;const r=Lu.inspectState.peek(),i=e.current;return i&&t.current?v(n,i)?(n.preventDefault(),n.stopPropagation(),void(e=>{"focused"===e.kind&&(Lu.inspectState.value={kind:"inspecting",hoveredDomElement:e.focusedDomElement})})(r)):void("inspecting"===r.kind&&(e=>{var t,n;const r=["react-scan-inspect-element","react-scan-power"];if(e.target instanceof HTMLElement&&r.includes(e.target.id))return;const i=null==(t=o.current)?void 0:t.tagName;if(i&&Ni.has(i))return;e.preventDefault(),e.stopPropagation();const a=null!=(n=o.current)?n:document.elementFromPoint(e.clientX,e.clientY);if(!a)return;const s=e.composedPath().at(0);if(s instanceof HTMLElement&&r.includes(s.id)){const t=new MouseEvent(e.type,e);return t.__reactScanSyntheticEvent=!0,void s.dispatchEvent(t)}const{parentCompositeFiber:l}=yi(a);if(!l)return;const c=Si(l);if(!c)return o.current=null,void(Lu.inspectState.value={kind:"inspect-off"});Lu.inspectState.value={kind:"focused",focusedDomElement:c,fiber:l}})(n)):void 0},b=t=>{var r;if("Escape"!==t.key)return;const i=Lu.inspectState.peek();if(e.current&&"react-scan-root"!==(null==(r=document.activeElement)?void 0:r.id)&&(_o.value={view:"none"},"focused"===i.kind||"inspecting"===i.kind))switch(t.preventDefault(),t.stopPropagation(),i.kind){case"focused":f(),n.current=null,o.current=i.focusedDomElement,Lu.inspectState.value={kind:"inspecting",hoveredDomElement:i.focusedDomElement};break;case"inspecting":m(()=>{wo.value=!1,Lu.inspectState.value={kind:"inspect-off"}})}},x=(e,t)=>{const n=e.getBoundingClientRect();e.width=n.width*xu,e.height=n.height*xu,t.scale(xu,xu),t.save()},y=()=>{const t=Lu.inspectState.peek(),r=e.current;if(!r)return;const o=null==r?void 0:r.getContext("2d");o&&(cancelAnimationFrame(i.current),clearTimeout(a.current),x(r,o),n.current=null,"focused"===t.kind&&t.focusedDomElement?h(t.focusedDomElement,r,o,"locked"):"inspecting"===t.kind&&t.hoveredDomElement&&h(t.hoveredDomElement,r,o,"inspecting"))},k=t=>{const n=Lu.inspectState.peek(),r=e.current;r&&("inspecting"===n.kind||v(t,r))&&(t.preventDefault(),t.stopPropagation(),t.stopImmediatePropagation())};return Je(()=>{const r=e.current;if(!r)return;const l=null==r?void 0:r.getContext("2d");if(!l)return;x(r,l);const c=Lu.inspectState.subscribe(e=>{((e,r,a)=>{var l;let c;switch(null==(l=s.current.get(e.kind))||l(),t.current&&"inspecting"!==e.kind&&(t.current.style.pointerEvents="none"),i.current&&cancelAnimationFrame(i.current),e.kind){case"inspect-off":return void m();case"inspecting":h(e.hoveredDomElement,r,a,"inspecting");break;case"focused":if(!e.focusedDomElement)return;o.current!==e.focusedDomElement&&(o.current=e.focusedDomElement),_o.value={view:"inspector"},h(e.focusedDomElement,r,a,"locked"),c=Lu.lastReportTime.subscribe(()=>{if(i.current&&n.current){const{parentCompositeFiber:t}=yi(e.focusedDomElement);t&&h(e.focusedDomElement,r,a,"locked")}}),c&&s.current.set(e.kind,c)}})(e,r,l)});return window.addEventListener("scroll",y,{passive:!0}),window.addEventListener("resize",y,{passive:!0}),document.addEventListener("pointermove",g,{passive:!0,capture:!0}),document.addEventListener("pointerdown",k,{capture:!0}),document.addEventListener("click",w,{capture:!0}),document.addEventListener("keydown",b,{capture:!0}),()=>{(()=>{for(const e of s.current.values())null==e||e()})(),c(),window.removeEventListener("scroll",y),window.removeEventListener("resize",y),document.removeEventListener("pointermove",g,{capture:!0}),document.removeEventListener("click",w,{capture:!0}),document.removeEventListener("pointerdown",k,{capture:!0}),document.removeEventListener("keydown",b,{capture:!0}),i.current&&cancelAnimationFrame(i.current),clearTimeout(a.current)}},[]),Rn(me,{children:[Rn("div",{ref:t,className:lo("fixed top-0 left-0 w-screen h-screen","z-[214748365]"),style:{pointerEvents:"none"}}),Rn("canvas",{ref:e,dir:"ltr",className:lo("react-scan-inspector-overlay","fixed top-0 left-0 w-screen h-screen","pointer-events-none","z-[214748367]")})]})},ku=class{constructor(e,t,r){n(this,"width",e),n(this,"height",t),n(this,"safeArea",r),n(this,"maxWidth"),n(this,"maxHeight"),this.maxWidth=e-r.left-r.right,this.maxHeight=t-r.top-r.bottom}rightEdge(e){return this.width-e-this.safeArea.right}bottomEdge(e){return this.height-e-this.safeArea.bottom}isFullWidth(e){return e>=this.maxWidth}isFullHeight(e){return e>=this.maxHeight}},_u=()=>{const e=window.innerWidth,t=window.innerHeight,n=vo();return Gd&&Gd.width===e&&Gd.height===t&&(r=Gd.safeArea,o=n,r.top===o.top&&r.right===o.right&&r.bottom===o.bottom&&r.left===o.left)?Gd:Gd=new ku(e,t,n);var r,o},Nu=(e,t,n)=>{const r="rtl"===getComputedStyle(document.body).direction,o=window.innerWidth,i=window.innerHeight,a=vo(),s=t===jn,l=s?t:Math.min(t,o-a.left-a.right),c=s?n:Math.min(n,i-a.top-a.bottom);let d,u,p=a.left,h=o-l-a.right,m=a.top,f=i-c-a.bottom;const g=-a.right,v=-(o-l-a.left);switch(e){case"top-right":d=r?g:h,u=m;break;case"bottom-right":d=r?g:h,u=f;break;case"bottom-left":d=r?v:p,u=f;break;case"top-left":d=r?v:p,u=m;break;default:d=p,u=m}return s&&(d=r?Math.min(g,Math.max(d,v)):Math.max(p,Math.min(d,h)),u=Math.max(m,Math.min(u,f))),{x:d,y:u}},Su=(e,t,n)=>{const r=n?jn:Pn,o=n?_u().maxWidth:_u().maxHeight,i=e+t;return Math.min(Math.max(r,i),o)},Cu=({position:e})=>{const t=Xe(null),n=Xe(null),r=Xe(null),o=Xe(null);Je(()=>{const i=t.current;if(!i)return;const a=()=>{i.classList.remove("pointer-events-none");const t="focused"===Lu.inspectState.value.kind,n="none"!==_o.value.view,r=(t||n)&&((e,t,n,r)=>!(!n||!r)||(n||r?n?e!==t.split("-")[0]:!!r&&e!==t.split("-")[1]:((e,t)=>{const[n,r]=t.split("-");return e!==n&&e!==r})(e,t)))(e,yo.value.corner,yo.value.dimensions.isFullWidth,yo.value.dimensions.isFullHeight);r?i.classList.remove("hidden","pointer-events-none","opacity-0"):i.classList.add("hidden","pointer-events-none","opacity-0")},s=yo.subscribe(e=>{null!==n.current&&null!==r.current&&null!==o.current&&e.dimensions.width===n.current&&e.dimensions.height===r.current&&e.corner===o.current||(a(),n.current=e.dimensions.width,r.current=e.dimensions.height,o.current=e.corner)}),l=Lu.inspectState.subscribe(()=>{a()});return()=>{s(),l(),n.current=null,r.current=null,o.current=null}},[]);const i=Ze(t=>{t.preventDefault(),t.stopPropagation();const n=bo.value;if(!n)return;const r=n.style,{dimensions:o}=yo.value,i=t.clientX,a=t.clientY,s=o.width,l=o.height,c=o.position;yo.value={...yo.value,dimensions:{...o,isFullWidth:!1,isFullHeight:!1,width:s,height:l,position:c}};let d=null;const u=t=>{d||(r.transition="none",d=requestAnimationFrame(()=>{const{newSize:n,newPosition:o}=((e,t,n,r,o)=>{const i="rtl"===getComputedStyle(document.body).direction,a=vo(),s=window.innerWidth-a.left-a.right,l=window.innerHeight-a.top-a.bottom;let c=t.width,d=t.height,u=n.x,p=n.y;if(i&&e.includes("right")){const e=-n.x+t.width-a.right,o=Math.min(t.width+r,e);c=Math.min(s,Math.max(jn,o)),u=n.x+(c-t.width)}if(i&&e.includes("left")){const e=window.innerWidth-n.x-a.left,o=Math.min(t.width-r,e);c=Math.min(s,Math.max(jn,o))}if(!i&&e.includes("right")){const e=window.innerWidth-n.x-a.right,o=Math.min(t.width+r,e);c=Math.min(s,Math.max(jn,o))}if(!i&&e.includes("left")){const e=n.x+t.width-a.left,o=Math.min(t.width-r,e);c=Math.min(s,Math.max(jn,o)),u=n.x-(c-t.width)}if(e.includes("bottom")){const e=window.innerHeight-n.y-a.bottom,r=Math.min(t.height+o,e);d=Math.min(l,Math.max(Pn,r))}if(e.includes("top")){const e=n.y+t.height-a.top,r=Math.min(t.height-o,e);d=Math.min(l,Math.max(Pn,r)),p=n.y-(d-t.height)}let h=a.left,m=window.innerWidth-a.right-c,f=a.top,g=window.innerHeight-a.bottom-d;const v=-a.right,w=-(window.innerWidth-c-a.left);return u=i?Math.min(v,Math.max(u,w)):Math.max(h,Math.min(u,m)),p=Math.max(f,Math.min(p,g)),{newSize:{width:c,height:d},newPosition:{x:u,y:p}}})(e,{width:s,height:l},c,t.clientX-i,t.clientY-a);r.transform=`translate3d(${o.x}px, ${o.y}px, 0)`,r.width=`${n.width}px`,r.height=`${n.height}px`;const u=Math.floor(n.width-120),p=yo.value.componentsTree.width,h=Math.min(u,Math.max(In,p));yo.value={...yo.value,dimensions:{isFullWidth:!1,isFullHeight:!1,width:n.width,height:n.height,position:o},componentsTree:{...yo.value.componentsTree,width:h}},d=null}))},p=()=>{d&&(cancelAnimationFrame(d),d=null),document.removeEventListener("pointermove",u),document.removeEventListener("pointerup",p);const{dimensions:e,corner:t}=yo.value,o=_u(),i=o.isFullWidth(e.width),a=o.isFullHeight(e.height);let s=t;(i&&a||i||a)&&(s=(e=>{const t=_u(),n={"top-left":Math.hypot(e.x,e.y),"top-right":Math.hypot(t.maxWidth-e.x,e.y),"bottom-left":Math.hypot(e.x,t.maxHeight-e.y),"bottom-right":Math.hypot(t.maxWidth-e.x,t.maxHeight-e.y)};let r="top-left";for(const e in n)n[e]<n[r]&&(r=e);return r})(e.position));const l=Nu(s,e.width,e.height),c=()=>{n.removeEventListener("transitionend",c)};n.addEventListener("transitionend",c),r.transform=`translate3d(${l.x}px, ${l.y}px, 0)`,yo.value={...yo.value,corner:s,dimensions:{isFullWidth:i,isFullHeight:a,width:e.width,height:e.height,position:l},lastDimensions:{isFullWidth:i,isFullHeight:a,width:e.width,height:e.height,position:l}},po(Wn,{corner:s,dimensions:yo.value.dimensions,lastDimensions:yo.value.lastDimensions,componentsTree:yo.value.componentsTree})};document.addEventListener("pointermove",u,{passive:!0}),document.addEventListener("pointerup",p)},[]),a=Ze(t=>{t.preventDefault(),t.stopPropagation();const n=bo.value;if(!n)return;const r=n.style,{dimensions:o,corner:i}=yo.value,a=_u(),s=a.isFullWidth(o.width),l=a.isFullHeight(o.height),c=s&&l,d=(s||l)&&!c;let u=o.width,p=o.height;const h=((e,t,n,r,o)=>{if(n){if("top-left"===e)return"bottom-right";if("top-right"===e)return"bottom-left";if("bottom-left"===e)return"top-right";if("bottom-right"===e)return"top-left";const[n,r]=t.split("-");if("left"===e)return`${n}-right`;if("right"===e)return`${n}-left`;if("top"===e)return`bottom-${r}`;if("bottom"===e)return`top-${r}`}if(r){if("left"===e)return`${t.split("-")[0]}-right`;if("right"===e)return`${t.split("-")[0]}-left`}if(o){if("top"===e)return`bottom-${t.split("-")[1]}`;if("bottom"===e)return`top-${t.split("-")[1]}`}return t})(e,i,c,s,l);"left"===e||"right"===e?(u=s?o.width:a.maxWidth,d&&(u=s?jn:a.maxWidth)):(p=l?o.height:a.maxHeight,d&&(p=l?Pn:a.maxHeight)),c&&("left"===e||"right"===e?u=jn:p=Pn);const m=Nu(h,u,p),f={isFullWidth:a.isFullWidth(u),isFullHeight:a.isFullHeight(p),width:u,height:p,position:m},g=Math.floor(u-jn/2),v=yo.value.componentsTree.width,w=Math.floor(.3*u),b=s?In:"left"!==e&&"right"!==e||s?Math.min(g,Math.max(In,v)):Math.min(g,Math.max(In,w));requestAnimationFrame(()=>{yo.value={corner:h,dimensions:f,lastDimensions:o,componentsTree:{...yo.value.componentsTree,width:b}},r.transition="all 0.25s cubic-bezier(0, 0, 0.2, 1)",r.width=`${u}px`,r.height=`${p}px`,r.transform=`translate3d(${m.x}px, ${m.y}px, 0)`}),po(Wn,{corner:h,dimensions:f,lastDimensions:o,componentsTree:{...yo.value.componentsTree,width:b}})},[]);return Rn("div",{ref:t,onPointerDown:i,onDblClick:a,className:lo("absolute z-50","flex items-center justify-center","group","transition-colors select-none","peer",{"resize-left peer/left":"left"===e,"resize-right peer/right z-10":"right"===e,"resize-top peer/top":"top"===e,"resize-bottom peer/bottom":"bottom"===e}),children:Rn("span",{className:"resize-line-wrapper",children:Rn("span",{className:"resize-line",children:Rn(On,{name:"icon-ellipsis",size:18,className:lo("text-neutral-400",("left"===e||"right"===e)&&"rotate-90")})})})})},Tu={horizontal:{width:20,height:48},vertical:{width:48,height:20}},Eu=()=>{const e=Xe(null),t=Xe(!1),n=Xe(0),r=Xe(0),o=Xe(!1),i=Ze((i=!0)=>{if(!e.current)return;const{corner:a}=yo.value;let s,l;if(So.value){const e=So.value.orientation||"horizontal",t=Tu[e];s=t.width,l=t.height}else if(t.current){const e=yo.value.lastDimensions;s=Su(e.width,0,!0),l=Su(e.height,0,!1),o.current&&(o.current=!1)}else s=n.current,l=r.current;let c=Nu(a,s,l);if(So.value){const{corner:e,orientation:t="horizontal"}=So.value,n=Tu[t],r=vo();switch(e){case"top-left":c="horizontal"===t?{x:-1,y:r.top}:{x:r.left,y:-1};break;case"bottom-left":c="horizontal"===t?{x:-1,y:window.innerHeight-n.height-r.bottom}:{x:r.left,y:window.innerHeight-n.height+1};break;case"top-right":c="horizontal"===t?{x:window.innerWidth-n.width+1,y:r.top}:{x:window.innerWidth-n.width-r.right,y:-1};break;default:c="horizontal"===t?{x:window.innerWidth-n.width+1,y:window.innerHeight-n.height-r.bottom}:{x:window.innerWidth-n.width-r.right,y:window.innerHeight-n.height+1}}}const d=i&&!(s<jn||l<Pn),u=e.current,p=u.style;let h=null;const m=()=>{ko(),u.removeEventListener("transitionend",m),h&&(cancelAnimationFrame(h),h=null)};u.addEventListener("transitionend",m),p.transition="all 0.25s cubic-bezier(0, 0, 0.2, 1)",h=requestAnimationFrame(()=>{p.width=`${s}px`,p.height=`${l}px`,p.transform=`translate3d(${c.x}px, ${c.y}px, 0)`,h=null});const f=vo(),g={isFullWidth:s>=window.innerWidth-f.left-f.right,isFullHeight:l>=window.innerHeight-f.top-f.bottom,width:s,height:l,position:c};yo.value={corner:a,dimensions:g,lastDimensions:t?yo.value.lastDimensions:s>n.current?g:yo.value.lastDimensions,componentsTree:yo.value.componentsTree},d&&po(Wn,{corner:yo.value.corner,dimensions:yo.value.dimensions,lastDimensions:yo.value.lastDimensions,componentsTree:yo.value.componentsTree}),ko()},[]),a=Ze(t=>{if(t.target.closest("button, a, input, textarea, select, pre, [contenteditable], [data-react-scan-selectable]"))return;if(t.preventDefault(),!e.current)return;const n=e.current,r=n.style,{dimensions:o}=yo.value,a=t.clientX,s=t.clientY,l=o.position.x,c=o.position.y;let d=l,u=c,p=null,h=!1,m=a,f=s;const g=e=>{p||(h=!0,m=e.clientX,f=e.clientY,p=requestAnimationFrame(()=>{const e=m-a,t=f-s;d=Number(l)+e,u=Number(c)+t,r.transition="none",r.transform=`translate3d(${d}px, ${u}px, 0)`;const n=d+o.width,h=u+o.height,w=Math.max(0,-d),b=Math.max(0,n-window.innerWidth),x=Math.max(0,-u),y=Math.max(0,h-window.innerHeight),k=Math.min(o.width,w+b),_=Math.min(o.height,x+y);let N=k*o.height+_*o.width-k*_>.35*(o.width*o.height);if(!N&&Pu.options.value.showFPS){const e=d+o.width;N=e<=0||e-100>=window.innerWidth||u+o.height<=0||u>=window.innerHeight}if(N){const e=d+o.width/2,t=u+o.height/2,n=window.innerWidth/2,r=window.innerHeight/2;let a,s;a=e<n?t<r?"top-left":"bottom-left":t<r?"top-right":"bottom-right";s=Math.max(w,b)>Math.max(x,y)?"horizontal":"vertical",yo.value={...yo.value,corner:a,lastDimensions:{...o,position:Nu(a,o.width,o.height)}};const l={corner:a,orientation:s};So.value=l,po(Un,l),po(Wn,yo.value),i(!1),document.removeEventListener("pointermove",g),document.removeEventListener("pointerup",v),p&&(cancelAnimationFrame(p),p=null)}p=null}))},v=()=>{if(!n)return;p&&(cancelAnimationFrame(p),p=null),document.removeEventListener("pointermove",g),document.removeEventListener("pointerup",v);const e=Math.abs(m-a),t=Math.abs(f-s),i=Math.sqrt(e*e+t*t);if(!h||i<60)return;const w=((e,t,n,r,o=100)=>{const i=void 0!==n?e-n:0,a=void 0!==r?t-r:0,s=window.innerWidth/2,l=window.innerHeight/2,c=i>o,d=a>o;if(c||i<-o){const e=t>l;return c?e?"bottom-right":"top-right":e?"bottom-left":"top-left"}if(d||a<-o){const t=e>s;return d?t?"bottom-right":"bottom-left":t?"top-right":"top-left"}return e>s?t>l?"bottom-right":"top-right":t>l?"bottom-left":"top-left"})(m,f,a,s,"focused"===Lu.inspectState.value.kind?80:40);if(w===yo.value.corner){r.transition="transform 0.25s cubic-bezier(0, 0, 0.2, 1)";const e=yo.value.dimensions.position;return void requestAnimationFrame(()=>{r.transform=`translate3d(${e.x}px, ${e.y}px, 0)`})}const b=Nu(w,o.width,o.height);if(d===l&&u===c)return;const x=()=>{r.transition="none",ko(),n.removeEventListener("transitionend",x),p&&(cancelAnimationFrame(p),p=null)};n.addEventListener("transitionend",x),r.transition="transform 0.25s cubic-bezier(0, 0, 0.2, 1)",requestAnimationFrame(()=>{r.transform=`translate3d(${b.x}px, ${b.y}px, 0)`}),yo.value={corner:w,dimensions:{isFullWidth:o.isFullWidth,isFullHeight:o.isFullHeight,width:o.width,height:o.height,position:b},lastDimensions:yo.value.lastDimensions,componentsTree:yo.value.componentsTree},po(Wn,{corner:w,dimensions:yo.value.dimensions,lastDimensions:yo.value.lastDimensions,componentsTree:yo.value.componentsTree})};document.addEventListener("pointermove",g),document.addEventListener("pointerup",v)},[]),s=Ze(t=>{if(t.preventDefault(),!e.current||!So.value)return;const{corner:r,orientation:o="horizontal"}=So.value,a=t.clientX,s=t.clientY;let l=!1;const c=t=>{if(l)return;const u=t.clientX-a,p=t.clientY-s;let h=!1;if("horizontal"===o?(r.endsWith("left")&&u>50||r.endsWith("right")&&u<-50)&&(h=!0):(r.startsWith("top")&&p>50||r.startsWith("bottom")&&p<-50)&&(h=!0),h){if(l=!0,So.value=null,po(Un,null),0===n.current&&e.current)requestAnimationFrame(()=>{if(e.current){e.current.style.width="min-content";const r=e.current.offsetWidth;n.current=r||300;const o=yo.value.lastDimensions,a=Su(o.width,0,!0),s=Su(o.height,0,!1);let l=t.clientX-a/2,c=t.clientY-s/2;const d=vo();l=Math.max(d.left,Math.min(l,window.innerWidth-a-d.right)),c=Math.max(d.top,Math.min(c,window.innerHeight-s-d.bottom)),yo.value={...yo.value,dimensions:{...yo.value.dimensions,position:{x:l,y:c}}},i(!0);const u=uo(Hn);_o.value=u||{view:"none"},setTimeout(()=>{if(e.current){const n=new PointerEvent("pointerdown",{clientX:t.clientX,clientY:t.clientY,pointerId:t.pointerId,bubbles:!0});e.current.dispatchEvent(n)}},100)}});else{i(!0);const e=uo(Hn);_o.value=e||{view:"none"}}document.removeEventListener("pointermove",c),document.removeEventListener("pointerup",d)}},d=()=>{document.removeEventListener("pointermove",c),document.removeEventListener("pointerup",d)};document.addEventListener("pointermove",c),document.addEventListener("pointerup",d)},[]);Je(()=>{if(!e.current)return;ho(Hn),So.value?(r.current=36,n.current=0):(e.current.style.width="min-content",r.current=36,n.current=e.current.offsetWidth);const a=vo();e.current.style.maxWidth=`calc(100vw - ${a.left+a.right}px)`,e.current.style.maxHeight=`calc(100vh - ${a.top+a.bottom}px)`,i(),"focused"===Lu.inspectState.value.kind||So.value||o.current||(yo.value={...yo.value,dimensions:{isFullWidth:!1,isFullHeight:!1,width:n.current,height:r.current,position:yo.value.dimensions.position}}),bo.value=e.current;const s=yo.subscribe(t=>{if(!e.current)return;const{x:n,y:r}=t.dimensions.position,{width:o,height:i}=t.dimensions,a=e.current;requestAnimationFrame(()=>{a.style.transform=`translate3d(${n}px, ${r}px, 0)`,a.style.width=`${o}px`,a.style.height=`${i}px`})}),l=_o.subscribe(e=>{t.current="none"!==e.view,i(),So.value||("none"!==e.view?po(Hn,e):ho(Hn))}),c=Lu.inspectState.subscribe(e=>{t.current="focused"===e.kind,i()}),d=()=>{i(!0)};return window.addEventListener("resize",d,{passive:!0}),()=>{window.removeEventListener("resize",d),l(),c(),s(),po(Wn,{...xo(),corner:yo.value.corner})}},[]);const[l,c]=Ge(!1);Je(()=>{c(!0)},[]);const d=So.value;let u="";if(d){const{orientation:e="horizontal",corner:t}=d;u="horizontal"===e?(null==t?void 0:t.endsWith("right"))?"rotate-180":"":(null==t?void 0:t.startsWith("bottom"))?"-rotate-90":"rotate-90"}return Rn(me,{children:[Rn(yu,{}),Rn(zu.Provider,{value:e.current,children:Rn("div",{id:"react-scan-toolbar",dir:"ltr",ref:e,onPointerDown:d?s:a,className:lo("fixed inset-0",d?(()=>{const{orientation:e="horizontal",corner:t}=d;return"horizontal"===e?(null==t?void 0:t.endsWith("right"))?"rounded-tl-lg rounded-bl-lg shadow-lg":"rounded-tr-lg rounded-br-lg shadow-lg":(null==t?void 0:t.startsWith("bottom"))?"rounded-tl-lg rounded-tr-lg shadow-lg":"rounded-bl-lg rounded-br-lg shadow-lg"})():"rounded-lg shadow-lg","flex flex-col","font-mono text-[13px]","user-select-none","opacity-0",d?"cursor-pointer":"cursor-move","z-[124124124124]","animate-fade-in animation-duration-300 animation-delay-300","will-change-transform","[touch-action:none]"),style:{WebkitAppRegion:"no-drag"},children:d?Rn("button",{type:"button",onClick:()=>{So.value=null,po(Un,null),0===n.current&&e.current&&requestAnimationFrame(()=>{if(e.current){e.current.style.width="min-content";const t=e.current.offsetWidth;n.current=t||300,i(!0)}});const t=uo(Hn);_o.value=t||{view:"none"}},className:"flex items-center justify-center w-full h-full text-white",title:"Expand toolbar",children:Rn(On,{name:"icon-chevron-right",size:16,className:lo("transition-transform",u)})}):Rn(me,{children:[Rn(Cu,{position:"top"}),Rn(Cu,{position:"bottom"}),Rn(Cu,{position:"left"}),Rn(Cu,{position:"right"}),Rn(gu,{})]})})})]})},zu=De(null),Au=()=>Rn("svg",{xmlns:"http://www.w3.org/2000/svg",style:"display: none;",children:[Rn("title",{children:"React Scan Icons"}),Rn("symbol",{id:"icon-inspect",viewBox:"0 0 24 24",fill:"none","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[Rn("path",{d:"M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.943.033z"}),Rn("path",{d:"M5 3a2 2 0 0 0-2 2"}),Rn("path",{d:"M19 3a2 2 0 0 1 2 2"}),Rn("path",{d:"M5 21a2 2 0 0 1-2-2"}),Rn("path",{d:"M9 3h1"}),Rn("path",{d:"M9 21h2"}),Rn("path",{d:"M14 3h1"}),Rn("path",{d:"M3 9v1"}),Rn("path",{d:"M21 9v2"}),Rn("path",{d:"M3 14v1"})]}),Rn("symbol",{id:"icon-focus",viewBox:"0 0 24 24",fill:"none","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[Rn("path",{d:"M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.943.033z"}),Rn("path",{d:"M21 11V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6"})]}),Rn("symbol",{id:"icon-next",viewBox:"0 0 24 24",fill:"none","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:Rn("path",{d:"M6 9h6V5l7 7-7 7v-4H6V9z"})}),Rn("symbol",{id:"icon-previous",viewBox:"0 0 24 24",fill:"none","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:Rn("path",{d:"M18 15h-6v4l-7-7 7-7v4h6v6z"})}),Rn("symbol",{id:"icon-close",viewBox:"0 0 24 24",fill:"none","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[Rn("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),Rn("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),Rn("symbol",{id:"icon-replay",viewBox:"0 0 24 24",fill:"none","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[Rn("path",{d:"M3 7V5a2 2 0 0 1 2-2h2"}),Rn("path",{d:"M17 3h2a2 2 0 0 1 2 2v2"}),Rn("path",{d:"M21 17v2a2 2 0 0 1-2 2h-2"}),Rn("path",{d:"M7 21H5a2 2 0 0 1-2-2v-2"}),Rn("circle",{cx:"12",cy:"12",r:"1"}),Rn("path",{d:"M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"})]}),Rn("symbol",{id:"icon-ellipsis",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[Rn("circle",{cx:"12",cy:"12",r:"1"}),Rn("circle",{cx:"19",cy:"12",r:"1"}),Rn("circle",{cx:"5",cy:"12",r:"1"})]}),Rn("symbol",{id:"icon-copy",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[Rn("rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2"}),Rn("path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"})]}),Rn("symbol",{id:"icon-check",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:Rn("path",{d:"M20 6 9 17l-5-5"})}),Rn("symbol",{id:"icon-chevron-right",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:Rn("path",{d:"m9 18 6-6-6-6"})}),Rn("symbol",{id:"icon-settings",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[Rn("path",{d:"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"}),Rn("circle",{cx:"12",cy:"12",r:"3"})]}),Rn("symbol",{id:"icon-flame",viewBox:"0 0 24 24",children:Rn("path",{d:"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"})}),Rn("symbol",{id:"icon-function",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[Rn("rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",ry:"2"}),Rn("path",{d:"M9 17c2 0 2.8-1 2.8-2.8V10c0-2 1-3.3 3.2-3"}),Rn("path",{d:"M9 11.2h5.7"})]}),Rn("symbol",{id:"icon-triangle-alert",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[Rn("path",{d:"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"}),Rn("path",{d:"M12 9v4"}),Rn("path",{d:"M12 17h.01"})]}),Rn("symbol",{id:"icon-gallery-horizontal-end",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[Rn("path",{d:"M2 7v10"}),Rn("path",{d:"M6 5v14"}),Rn("rect",{width:"12",height:"18",x:"10",y:"3",rx:"2"})]}),Rn("symbol",{id:"icon-search",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[Rn("circle",{cx:"11",cy:"11",r:"8"}),Rn("line",{x1:"21",y1:"21",x2:"16.65",y2:"16.65"})]}),Rn("symbol",{id:"icon-lock",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[Rn("rect",{width:"18",height:"11",x:"3",y:"11",rx:"2",ry:"2"}),Rn("path",{d:"M7 11V7a5 5 0 0 1 10 0v4"})]}),Rn("symbol",{id:"icon-lock-open",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[Rn("rect",{width:"18",height:"11",x:"3",y:"11",rx:"2",ry:"2"}),Rn("path",{d:"M7 11V7a5 5 0 0 1 9.9-1"})]}),Rn("symbol",{id:"icon-sanil",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[Rn("path",{d:"M2 13a6 6 0 1 0 12 0 4 4 0 1 0-8 0 2 2 0 0 0 4 0"}),Rn("circle",{cx:"10",cy:"13",r:"8"}),Rn("path",{d:"M2 21h12c4.4 0 8-3.6 8-8V7a2 2 0 1 0-4 0v6"}),Rn("path",{d:"M18 3 19.1 5.2"})]})]}),Mu=class extends fe{constructor(){super(...arguments),n(this,"state",{hasError:!1,error:null}),n(this,"handleReset",()=>{this.setState({hasError:!1,error:null})})}static getDerivedStateFromError(e){return{hasError:!0,error:e}}render(){var e;return this.state.hasError?Rn("div",{className:"fixed bottom-4 right-4 z-[124124124124]",children:Rn("div",{className:"p-3 bg-black rounded-lg shadow-lg w-80",children:[Rn("div",{className:"flex items-center gap-2 mb-2 text-red-400 text-sm font-medium",children:[Rn(On,{name:"icon-flame",className:"text-red-500",size:14}),"React Scan ran into a problem"]}),Rn("div",{className:"p-2 bg-black rounded font-mono text-xs text-red-300 mb-3 break-words",children:(null==(e=this.state.error)?void 0:e.message)||JSON.stringify(this.state.error)}),Rn("button",{type:"button",onClick:this.handleReset,className:"px-3 py-1.5 bg-red-500 hover:bg-red-600 text-white rounded text-xs font-medium transition-colors flex items-center justify-center gap-1.5",children:"Restart"})]})}):this.props.children}},$u="0.1.32",Fu=!1,Ru=["top","right","bottom","left"],Ou=e=>{if(fo(e))return{ok:!0,value:e};if(!go(e))return{ok:!1,error:`- safeArea must be a non-negative number or { top?, right?, bottom?, left? }. Got "${JSON.stringify(e)}"`};const t={};for(const n of Ru){const r=e[n];if(void 0!==r){if(!fo(r))return{ok:!1,error:`- safeArea.${n} must be a non-negative number. Got "${JSON.stringify(r)}"`};t[n]=r}}return{ok:!0,value:t}},Du=null,ju=null,Lu={wasDetailsOpen:_t(!0),isInIframe:_t(ie&&window.self!==window.top),inspectState:_t({kind:"uninitialized"}),fiberRoots:new Set,reportData:new Map,legacyReportData:new Map,lastReportTime:_t(0),interactionListeningForRenders:null,changesListeners:new Map},Pu={instrumentation:null,componentAllowList:null,options:_t({enabled:!0,log:!1,showToolbar:!0,animationSpeed:"fast",dangerouslyForceRunInProduction:!1,showFPS:!0,showNotificationCount:!0,allowInIframe:!1}),runInAllEnvironments:!1,onRender:null,Store:Lu,version:"0.5.7"};ie&&window.__REACT_SCAN_EXTENSION__&&(window.__REACT_SCAN_VERSION__=Pu.version);var Iu,Wu=e=>{const t=[],n={};for(const r in e){const o=e[r];switch(r){case"enabled":case"log":case"showToolbar":case"showNotificationCount":case"dangerouslyForceRunInProduction":case"showFPS":case"allowInIframe":case"useOffscreenCanvasWorker":"boolean"!=typeof o?t.push(`- ${r} must be a boolean. Got "${o}"`):n[r]=o;break;case"animationSpeed":["slow","fast","off"].includes(o)?n[r]=o:t.push(`- Invalid animation speed "${o}". Using default "fast"`);break;case"safeArea":{const e=Ou(o);e.ok?n.safeArea=e.value:t.push(e.error);break}case"onCommitStart":"function"!=typeof o?t.push(`- ${r} must be a function. Got "${o}"`):n.onCommitStart=o;break;case"onCommitFinish":"function"!=typeof o?t.push(`- ${r} must be a function. Got "${o}"`):n.onCommitFinish=o;break;case"onRender":"function"!=typeof o?t.push(`- ${r} must be a function. Got "${o}"`):n.onRender=o;break;default:t.push(`- Unknown option "${r}"`)}}return t.length>0&&console.warn(`[React Scan] Invalid options:\n${t.join("\n")}`),n},Uu=e=>{var t;try{const n=Wu(e);if(0===Object.keys(n).length)return;const r="showToolbar"in n&&void 0!==n.showToolbar,o={...Pu.options.value,...n},{instrumentation:i}=Pu;i&&"enabled"in n&&(i.isPaused.value=!1===n.enabled),Pu.options.value=o;try{const e=null==(t=uo("react-scan-options"))?void 0:t.enabled;"boolean"==typeof e&&(o.enabled=e)}catch(e){"verbose"===Pu.options.value._debug&&console.error("[React Scan Internal Error]","Failed to create notifications outline canvas",e)}return po("react-scan-options",(e=>{const{onCommitStart:t,onRender:n,onCommitFinish:r,...o}=e;return o})(o)),r&&Gu(!!o.showToolbar),o}catch(e){"verbose"===Pu.options.value._debug&&console.error("[React Scan Internal Error]","Failed to create notifications outline canvas",e)}},Hu=()=>Pu.options,Bu=null,Vu=()=>{if(!1===Bu)return!1;null!=Iu||(Iu=g());const e=Array.from(Iu.renderers.values());if(0===e.length)return null;for(const t of e){if("production"!==Y(t))return Bu=!1,!1}return!0},qu=()=>{try{if(!ie)return;if(!Pu.runInAllEnvironments&&Vu()&&!Pu.options.value.dangerouslyForceRunInProduction)return;(()=>{if(Fu)return;if(Fu=!0,"undefined"==typeof window)return;if(window.__REACT_GRAB__)return;if(!navigator.onLine)return;const e={referrerPolicy:"origin",keepalive:!0,priority:"low",cache:"no-store"};try{fetch(`https://www.react-grab.com/api/version?source=react-scan&v=${$u}&t=${Date.now()}`,e).then(e=>e.ok?e.text():null).then(e=>{if(!e)return;const t=e.trim();/^\d+\.\d+\.\d+/.test(t)&&t!==$u&&console.warn(`[React Scan] react-grab v${$u} is outdated (latest: v${t}). Update react-scan to pick up the newer react-grab.`)}).catch(()=>null)}catch{}})();const e=uo("react-scan-options");if(e){const t=Wu(e);Object.keys(t).length>0&&(Pu.options.value={...Pu.options.value,...t})}const t=Hu();Ya(()=>{Gu(!!t.value.showToolbar)}),ie&&setTimeout(()=>{(()=>{let e=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;return!!(null==e?void 0:e._instrumentationIsActive)||c(e)||u(e)})()||console.error("[React Scan] Failed to load. Must import React Scan before React runs.")},5e3)}catch(e){"verbose"===Pu.options.value._debug&&console.error("[React Scan Internal Error]","Failed to create notifications outline canvas",e)}},Gu=e=>{var t;null==(t=window.reactScanCleanupListeners)||t.call(window);const n=ud(),r=Ju();window.reactScanCleanupListeners=()=>{n(),null==r||r()};const o=window.__REACT_SCAN_TOOLBAR_CONTAINER__;if(!e)return void(null==o||o.remove());null==o||o.remove();const{shadowRoot:i}=(()=>{if(Du&&ju)return{rootContainer:Du,shadowRoot:ju};(Du=document.createElement("div")).id="react-scan-root",ju=Du.attachShadow({mode:"open"});const e=document.createElement("style");return e.textContent='/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",\n      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n    --color-red-300: oklch(80.8% 0.114 19.571);\n    --color-red-400: oklch(70.4% 0.191 22.216);\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-red-600: oklch(57.7% 0.245 27.325);\n    --color-red-950: oklch(25.8% 0.092 26.042);\n    --color-yellow-300: oklch(90.5% 0.182 98.111);\n    --color-yellow-500: oklch(79.5% 0.184 86.047);\n    --color-green-500: oklch(72.3% 0.219 149.579);\n    --color-purple-400: oklch(71.4% 0.203 305.504);\n    --color-purple-500: oklch(62.7% 0.265 303.9);\n    --color-purple-800: oklch(43.8% 0.218 303.724);\n    --color-gray-100: oklch(96.7% 0.003 264.542);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-zinc-200: oklch(92% 0.004 286.32);\n    --color-zinc-400: oklch(70.5% 0.015 286.067);\n    --color-zinc-500: oklch(55.2% 0.016 285.938);\n    --color-zinc-600: oklch(44.2% 0.017 285.786);\n    --color-zinc-700: oklch(37% 0.013 285.805);\n    --color-zinc-800: oklch(27.4% 0.006 286.033);\n    --color-zinc-900: oklch(21% 0.006 285.885);\n    --color-neutral-300: oklch(87% 0 0);\n    --color-neutral-400: oklch(70.8% 0 0);\n    --color-neutral-500: oklch(55.6% 0 0);\n    --color-neutral-700: oklch(37.1% 0 0);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 4px;\n    --container-md: 448px;\n    --text-xs: 12px;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 14px;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --tracking-wide: 0.025em;\n    --radius-sm: 4px;\n    --radius-md: 6px;\n    --radius-lg: 8px;\n    --ease-in: cubic-bezier(0.4, 0, 1, 1);\n    --ease-out: cubic-bezier(0, 0, 0.2, 1);\n    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n    --blur-sm: 8px;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    -moz-tab-size: 4;\n      -o-tab-size: 4;\n         tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;\n    font-feature-settings: normal;\n    font-variation-settings: normal;\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::-moz-placeholder {\n    opacity: 1;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::-moz-placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {\n    -webkit-appearance: button;\n       -moz-appearance: button;\n            appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden="until-found"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-auto {\n    pointer-events: auto;\n  }\n  .pointer-events-bounding-box {\n    pointer-events: bounding-box;\n  }\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .collapse {\n    visibility: collapse;\n  }\n  .visible {\n    visibility: visible;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .static {\n    position: static;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .inset-x-1 {\n    inset-inline: calc(var(--spacing) * 1);\n  }\n  .inset-y-0 {\n    inset-block: calc(var(--spacing) * 0);\n  }\n  .start {\n    inset-inline-start: var(--spacing);\n  }\n  .end {\n    inset-inline-end: var(--spacing);\n  }\n  .-top-1 {\n    top: calc(var(--spacing) * -1);\n  }\n  .-top-2\\.5 {\n    top: calc(var(--spacing) * -2.5);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-0\\.5 {\n    top: calc(var(--spacing) * 0.5);\n  }\n  .top-1\\/2 {\n    top: calc(1 / 2 * 100%);\n  }\n  .top-2 {\n    top: calc(var(--spacing) * 2);\n  }\n  .-right-1 {\n    right: calc(var(--spacing) * -1);\n  }\n  .-right-2\\.5 {\n    right: calc(var(--spacing) * -2.5);\n  }\n  .right-0 {\n    right: calc(var(--spacing) * 0);\n  }\n  .right-0\\.5 {\n    right: calc(var(--spacing) * 0.5);\n  }\n  .right-2 {\n    right: calc(var(--spacing) * 2);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .bottom-0 {\n    bottom: calc(var(--spacing) * 0);\n  }\n  .bottom-4 {\n    bottom: calc(var(--spacing) * 4);\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-3 {\n    left: calc(var(--spacing) * 3);\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .z-100 {\n    z-index: 100;\n  }\n  .z-\\[214748365\\] {\n    z-index: 214748365;\n  }\n  .z-\\[214748367\\] {\n    z-index: 214748367;\n  }\n  .z-\\[124124124124\\] {\n    z-index: 124124124124;\n  }\n  .container {\n    width: 100%;\n    @media (width >= 640px) {\n      max-width: 640px;\n    }\n    @media (width >= 768px) {\n      max-width: 768px;\n    }\n    @media (width >= 1024px) {\n      max-width: 1024px;\n    }\n    @media (width >= 1280px) {\n      max-width: 1280px;\n    }\n    @media (width >= 1536px) {\n      max-width: 1536px;\n    }\n  }\n  .m-\\[2px\\] {\n    margin: 2px;\n  }\n  .mx-0\\.5 {\n    margin-inline: calc(var(--spacing) * 0.5);\n  }\n  .mt-0\\.5 {\n    margin-top: calc(var(--spacing) * 0.5);\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mr-0\\.5 {\n    margin-right: calc(var(--spacing) * 0.5);\n  }\n  .mr-1 {\n    margin-right: calc(var(--spacing) * 1);\n  }\n  .mr-1\\.5 {\n    margin-right: calc(var(--spacing) * 1.5);\n  }\n  .mr-16 {\n    margin-right: calc(var(--spacing) * 16);\n  }\n  .mr-auto {\n    margin-right: auto;\n  }\n  .mb-1\\.5 {\n    margin-bottom: calc(var(--spacing) * 1.5);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-3 {\n    margin-bottom: calc(var(--spacing) * 3);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-px {\n    margin-bottom: 1px;\n  }\n  .\\!ml-0 {\n    margin-left: calc(var(--spacing) * 0) !important;\n  }\n  .ml-1 {\n    margin-left: calc(var(--spacing) * 1);\n  }\n  .ml-1\\.5 {\n    margin-left: calc(var(--spacing) * 1.5);\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .block {\n    display: block;\n  }\n  .contents {\n    display: contents;\n  }\n  .flex {\n    display: flex;\n  }\n  .hidden {\n    display: none;\n  }\n  .inline {\n    display: inline;\n  }\n  .aspect-square {\n    aspect-ratio: 1 / 1;\n  }\n  .h-1 {\n    height: calc(var(--spacing) * 1);\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-4\\/5 {\n    height: calc(4 / 5 * 100%);\n  }\n  .h-6 {\n    height: calc(var(--spacing) * 6);\n  }\n  .h-7 {\n    height: calc(var(--spacing) * 7);\n  }\n  .h-8 {\n    height: calc(var(--spacing) * 8);\n  }\n  .h-10 {\n    height: calc(var(--spacing) * 10);\n  }\n  .h-12 {\n    height: calc(var(--spacing) * 12);\n  }\n  .h-\\[28px\\] {\n    height: 28px;\n  }\n  .h-\\[48px\\] {\n    height: 48px;\n  }\n  .h-\\[50px\\] {\n    height: 50px;\n  }\n  .h-\\[150px\\] {\n    height: 150px;\n  }\n  .h-\\[235px\\] {\n    height: 235px;\n  }\n  .h-\\[calc\\(100\\%-25px\\)\\] {\n    height: calc(100% - 25px);\n  }\n  .h-\\[calc\\(100\\%-40px\\)\\] {\n    height: calc(100% - 40px);\n  }\n  .h-\\[calc\\(100\\%-48px\\)\\] {\n    height: calc(100% - 48px);\n  }\n  .h-\\[calc\\(100\\%-150px\\)\\] {\n    height: calc(100% - 150px);\n  }\n  .h-\\[calc\\(100\\%-200px\\)\\] {\n    height: calc(100% - 200px);\n  }\n  .h-fit {\n    height: -moz-fit-content;\n    height: fit-content;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .h-screen {\n    height: 100vh;\n  }\n  .max-h-0 {\n    max-height: calc(var(--spacing) * 0);\n  }\n  .max-h-9 {\n    max-height: calc(var(--spacing) * 9);\n  }\n  .max-h-40 {\n    max-height: calc(var(--spacing) * 40);\n  }\n  .min-h-9 {\n    min-height: calc(var(--spacing) * 9);\n  }\n  .min-h-\\[48px\\] {\n    min-height: 48px;\n  }\n  .min-h-fit {\n    min-height: -moz-fit-content;\n    min-height: fit-content;\n  }\n  .w-1 {\n    width: calc(var(--spacing) * 1);\n  }\n  .w-1\\/2 {\n    width: calc(1 / 2 * 100%);\n  }\n  .w-1\\/3 {\n    width: calc(1 / 3 * 100%);\n  }\n  .w-2\\/4 {\n    width: calc(2 / 4 * 100%);\n  }\n  .w-3 {\n    width: calc(var(--spacing) * 3);\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-4\\/5 {\n    width: calc(4 / 5 * 100%);\n  }\n  .w-6 {\n    width: calc(var(--spacing) * 6);\n  }\n  .w-80 {\n    width: calc(var(--spacing) * 80);\n  }\n  .w-\\[20px\\] {\n    width: 20px;\n  }\n  .w-\\[72px\\] {\n    width: 72px;\n  }\n  .w-\\[90\\%\\] {\n    width: 90%;\n  }\n  .w-\\[calc\\(100\\%-200px\\)\\] {\n    width: calc(100% - 200px);\n  }\n  .w-fit {\n    width: -moz-fit-content;\n    width: fit-content;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .w-px {\n    width: 1px;\n  }\n  .w-screen {\n    width: 100vw;\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .min-w-0 {\n    min-width: calc(var(--spacing) * 0);\n  }\n  .min-w-\\[200px\\] {\n    min-width: 200px;\n  }\n  .min-w-fit {\n    min-width: -moz-fit-content;\n    min-width: fit-content;\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .grow {\n    flex-grow: 1;\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-\\[200\\%\\] {\n    --tw-translate-y: calc(200% * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-y-0 {\n    --tw-translate-y: calc(var(--spacing) * 0);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .scale-110 {\n    --tw-scale-x: 110%;\n    --tw-scale-y: 110%;\n    --tw-scale-z: 110%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .-rotate-90 {\n    rotate: calc(90deg * -1);\n  }\n  .rotate-90 {\n    rotate: 90deg;\n  }\n  .rotate-180 {\n    rotate: 180deg;\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-fade-in {\n    animation: fadeIn ease-in forwards;\n  }\n  .cursor-default {\n    cursor: default;\n  }\n  .cursor-e-resize {\n    cursor: e-resize;\n  }\n  .cursor-ew-resize {\n    cursor: ew-resize;\n  }\n  .cursor-ew-resize {\n    cursor: ew-resize;\n  }\n  .cursor-move {\n    cursor: move;\n  }\n  .cursor-move {\n    cursor: move;\n  }\n  .cursor-nesw-resize {\n    cursor: nesw-resize;\n  }\n  .cursor-nesw-resize {\n    cursor: nesw-resize;\n  }\n  .cursor-ns-resize {\n    cursor: ns-resize;\n  }\n  .cursor-ns-resize {\n    cursor: ns-resize;\n  }\n  .cursor-nwse-resize {\n    cursor: nwse-resize;\n  }\n  .cursor-nwse-resize {\n    cursor: nwse-resize;\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .cursor-w-resize {\n    cursor: w-resize;\n  }\n  .\\[touch-action\\:none\\] {\n    touch-action: none;\n  }\n  .resize {\n    resize: both;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-end {\n    align-items: flex-end;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0\\.5 {\n    gap: calc(var(--spacing) * 0.5);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-1\\.5 {\n    gap: calc(var(--spacing) * 1.5);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .space-y-1\\.5 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .gap-x-0\\.5 {\n    -moz-column-gap: calc(var(--spacing) * 0.5);\n         column-gap: calc(var(--spacing) * 0.5);\n  }\n  .gap-x-1 {\n    -moz-column-gap: calc(var(--spacing) * 1);\n         column-gap: calc(var(--spacing) * 1);\n  }\n  .gap-x-1\\.5 {\n    -moz-column-gap: calc(var(--spacing) * 1.5);\n         column-gap: calc(var(--spacing) * 1.5);\n  }\n  .gap-x-2 {\n    -moz-column-gap: calc(var(--spacing) * 2);\n         column-gap: calc(var(--spacing) * 2);\n  }\n  .gap-x-3 {\n    -moz-column-gap: calc(var(--spacing) * 3);\n         column-gap: calc(var(--spacing) * 3);\n  }\n  .gap-x-4 {\n    -moz-column-gap: calc(var(--spacing) * 4);\n         column-gap: calc(var(--spacing) * 4);\n  }\n  .gap-y-0\\.5 {\n    row-gap: calc(var(--spacing) * 0.5);\n  }\n  .gap-y-1 {\n    row-gap: calc(var(--spacing) * 1);\n  }\n  .gap-y-2 {\n    row-gap: calc(var(--spacing) * 2);\n  }\n  .gap-y-4 {\n    row-gap: calc(var(--spacing) * 4);\n  }\n  .divide-y {\n    :where(& > :not(:last-child)) {\n      --tw-divide-y-reverse: 0;\n      border-bottom-style: var(--tw-border-style);\n      border-top-style: var(--tw-border-style);\n      border-top-width: calc(1px * var(--tw-divide-y-reverse));\n      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n    }\n  }\n  .divide-zinc-800 {\n    :where(& > :not(:last-child)) {\n      border-color: var(--color-zinc-800);\n    }\n  }\n  .place-self-center {\n    place-self: center;\n  }\n  .self-end {\n    align-self: flex-end;\n  }\n  .truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .\\!overflow-visible {\n    overflow: visible !important;\n  }\n  .overflow-auto {\n    overflow: auto;\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-x-auto {\n    overflow-x: auto;\n  }\n  .overflow-x-hidden {\n    overflow-x: hidden;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .rounded {\n    border-radius: 4px;\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .rounded-md {\n    border-radius: var(--radius-md);\n  }\n  .rounded-sm {\n    border-radius: var(--radius-sm);\n  }\n  .rounded-t-lg {\n    border-top-left-radius: var(--radius-lg);\n    border-top-right-radius: var(--radius-lg);\n  }\n  .rounded-t-sm {\n    border-top-left-radius: var(--radius-sm);\n    border-top-right-radius: var(--radius-sm);\n  }\n  .rounded-l-md {\n    border-top-left-radius: var(--radius-md);\n    border-bottom-left-radius: var(--radius-md);\n  }\n  .rounded-l-sm {\n    border-top-left-radius: var(--radius-sm);\n    border-bottom-left-radius: var(--radius-sm);\n  }\n  .rounded-tl-lg {\n    border-top-left-radius: var(--radius-lg);\n  }\n  .rounded-r-md {\n    border-top-right-radius: var(--radius-md);\n    border-bottom-right-radius: var(--radius-md);\n  }\n  .rounded-r-sm {\n    border-top-right-radius: var(--radius-sm);\n    border-bottom-right-radius: var(--radius-sm);\n  }\n  .rounded-tr-lg {\n    border-top-right-radius: var(--radius-lg);\n  }\n  .rounded-br-lg {\n    border-bottom-right-radius: var(--radius-lg);\n  }\n  .rounded-bl-lg {\n    border-bottom-left-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-4 {\n    border-style: var(--tw-border-style);\n    border-width: 4px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-r {\n    border-right-style: var(--tw-border-style);\n    border-right-width: 1px;\n  }\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .border-l {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 1px;\n  }\n  .border-l-0 {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 0px;\n  }\n  .border-l-1 {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 1px;\n  }\n  .border-none {\n    --tw-border-style: none;\n    border-style: none;\n  }\n  .\\!border-red-500 {\n    border-color: var(--color-red-500) !important;\n  }\n  .border-\\[\\#1e1e1e\\] {\n    border-color: #1e1e1e;\n  }\n  .border-\\[\\#222\\] {\n    border-color: #222;\n  }\n  .border-\\[\\#333\\] {\n    border-color: #333;\n  }\n  .border-\\[\\#27272A\\] {\n    border-color: #27272A;\n  }\n  .border-transparent {\n    border-color: transparent;\n  }\n  .border-zinc-800 {\n    border-color: var(--color-zinc-800);\n  }\n  .bg-\\[\\#0A0A0A\\] {\n    background-color: #0A0A0A;\n  }\n  .bg-\\[\\#1D3A66\\] {\n    background-color: #1D3A66;\n  }\n  .bg-\\[\\#1E1E1E\\] {\n    background-color: #1E1E1E;\n  }\n  .bg-\\[\\#1a2a1a\\] {\n    background-color: #1a2a1a;\n  }\n  .bg-\\[\\#1e1e1e\\] {\n    background-color: #1e1e1e;\n  }\n  .bg-\\[\\#2a1515\\] {\n    background-color: #2a1515;\n  }\n  .bg-\\[\\#4b4b4b\\] {\n    background-color: #4b4b4b;\n  }\n  .bg-\\[\\#5f3f9a\\] {\n    background-color: #5f3f9a;\n  }\n  .bg-\\[\\#5f3f9a\\]\\/40 {\n    background-color: color-mix(in oklab, #5f3f9a 40%, transparent);\n  }\n  .bg-\\[\\#6a369e\\] {\n    background-color: #6a369e;\n  }\n  .bg-\\[\\#8e61e3\\] {\n    background-color: #8e61e3;\n  }\n  .bg-\\[\\#7521c8\\] {\n    background-color: #7521c8;\n  }\n  .bg-\\[\\#18181B\\] {\n    background-color: #18181B;\n  }\n  .bg-\\[\\#18181B\\]\\/50 {\n    background-color: color-mix(in oklab, #18181B 50%, transparent);\n  }\n  .bg-\\[\\#27272A\\] {\n    background-color: #27272A;\n  }\n  .bg-\\[\\#44444a\\] {\n    background-color: #44444a;\n  }\n  .bg-\\[\\#141414\\] {\n    background-color: #141414;\n  }\n  .bg-\\[\\#214379d4\\] {\n    background-color: #214379d4;\n  }\n  .bg-\\[\\#412162\\] {\n    background-color: #412162;\n  }\n  .bg-\\[\\#EFD81A\\] {\n    background-color: #EFD81A;\n  }\n  .bg-\\[\\#b77116\\] {\n    background-color: #b77116;\n  }\n  .bg-\\[\\#b94040\\] {\n    background-color: #b94040;\n  }\n  .bg-\\[\\#d36cff\\] {\n    background-color: #d36cff;\n  }\n  .bg-\\[\\#efd81a6b\\] {\n    background-color: #efd81a6b;\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-black\\/40 {\n    background-color: color-mix(in srgb, #000 40%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);\n    }\n  }\n  .bg-green-500\\/50 {\n    background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 50%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-green-500) 50%, transparent);\n    }\n  }\n  .bg-green-500\\/60 {\n    background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 60%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-green-500) 60%, transparent);\n    }\n  }\n  .bg-neutral-700 {\n    background-color: var(--color-neutral-700);\n  }\n  .bg-purple-500 {\n    background-color: var(--color-purple-500);\n  }\n  .bg-purple-500\\/90 {\n    background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 90%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-purple-500) 90%, transparent);\n    }\n  }\n  .bg-purple-800 {\n    background-color: var(--color-purple-800);\n  }\n  .bg-red-500 {\n    background-color: var(--color-red-500);\n  }\n  .bg-red-500\\/90 {\n    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 90%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-red-500) 90%, transparent);\n    }\n  }\n  .bg-red-950\\/50 {\n    background-color: color-mix(in srgb, oklch(25.8% 0.092 26.042) 50%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-red-950) 50%, transparent);\n    }\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .bg-yellow-300 {\n    background-color: var(--color-yellow-300);\n  }\n  .bg-zinc-800 {\n    background-color: var(--color-zinc-800);\n  }\n  .bg-zinc-900\\/30 {\n    background-color: color-mix(in srgb, oklch(21% 0.006 285.885) 30%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-zinc-900) 30%, transparent);\n    }\n  }\n  .bg-zinc-900\\/50 {\n    background-color: color-mix(in srgb, oklch(21% 0.006 285.885) 50%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-zinc-900) 50%, transparent);\n    }\n  }\n  .p-0 {\n    padding: calc(var(--spacing) * 0);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-5 {\n    padding: calc(var(--spacing) * 5);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-1 {\n    padding-inline: calc(var(--spacing) * 1);\n  }\n  .px-1\\.5 {\n    padding-inline: calc(var(--spacing) * 1.5);\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n  .px-2\\.5 {\n    padding-inline: calc(var(--spacing) * 2.5);\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-0\\.5 {\n    padding-block: calc(var(--spacing) * 0.5);\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n  .py-1\\.5 {\n    padding-block: calc(var(--spacing) * 1.5);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n  .py-4 {\n    padding-block: calc(var(--spacing) * 4);\n  }\n  .py-\\[1px\\] {\n    padding-block: 1px;\n  }\n  .py-\\[3px\\] {\n    padding-block: 3px;\n  }\n  .py-\\[5px\\] {\n    padding-block: 5px;\n  }\n  .pt-0 {\n    padding-top: calc(var(--spacing) * 0);\n  }\n  .pt-2 {\n    padding-top: calc(var(--spacing) * 2);\n  }\n  .pt-5 {\n    padding-top: calc(var(--spacing) * 5);\n  }\n  .pr-1 {\n    padding-right: calc(var(--spacing) * 1);\n  }\n  .pr-1\\.5 {\n    padding-right: calc(var(--spacing) * 1.5);\n  }\n  .pr-2 {\n    padding-right: calc(var(--spacing) * 2);\n  }\n  .pr-2\\.5 {\n    padding-right: calc(var(--spacing) * 2.5);\n  }\n  .pb-2 {\n    padding-bottom: calc(var(--spacing) * 2);\n  }\n  .pl-1 {\n    padding-left: calc(var(--spacing) * 1);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-2\\.5 {\n    padding-left: calc(var(--spacing) * 2.5);\n  }\n  .pl-3 {\n    padding-left: calc(var(--spacing) * 3);\n  }\n  .pl-5 {\n    padding-left: calc(var(--spacing) * 5);\n  }\n  .pl-6 {\n    padding-left: calc(var(--spacing) * 6);\n  }\n  .text-left {\n    text-align: left;\n  }\n  .font-mono {\n    font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .text-\\[8px\\] {\n    font-size: 8px;\n  }\n  .text-\\[10px\\] {\n    font-size: 10px;\n  }\n  .text-\\[11px\\] {\n    font-size: 11px;\n  }\n  .text-\\[13px\\] {\n    font-size: 13px;\n  }\n  .text-\\[14px\\] {\n    font-size: 14px;\n  }\n  .text-\\[17px\\] {\n    font-size: 17px;\n  }\n  .leading-6 {\n    --tw-leading: calc(var(--spacing) * 6);\n    line-height: calc(var(--spacing) * 6);\n  }\n  .leading-none {\n    --tw-leading: 1;\n    line-height: 1;\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .tracking-wide {\n    --tw-tracking: var(--tracking-wide);\n    letter-spacing: var(--tracking-wide);\n  }\n  .text-wrap {\n    text-wrap: wrap;\n  }\n  .break-words {\n    overflow-wrap: break-word;\n  }\n  .break-all {\n    word-break: break-all;\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .whitespace-pre-wrap {\n    white-space: pre-wrap;\n  }\n  .text-\\[\\#4ade80\\] {\n    color: #4ade80;\n  }\n  .text-\\[\\#5a5a5a\\] {\n    color: #5a5a5a;\n  }\n  .text-\\[\\#6E6E77\\] {\n    color: #6E6E77;\n  }\n  .text-\\[\\#6F6F78\\] {\n    color: #6F6F78;\n  }\n  .text-\\[\\#8E61E3\\] {\n    color: #8E61E3;\n  }\n  .text-\\[\\#666\\] {\n    color: #666;\n  }\n  .text-\\[\\#888\\] {\n    color: #888;\n  }\n  .text-\\[\\#999\\] {\n    color: #999;\n  }\n  .text-\\[\\#7346a0\\] {\n    color: #7346a0;\n  }\n  .text-\\[\\#65656D\\] {\n    color: #65656D;\n  }\n  .text-\\[\\#737373\\] {\n    color: #737373;\n  }\n  .text-\\[\\#A1A1AA\\] {\n    color: #A1A1AA;\n  }\n  .text-\\[\\#A855F7\\] {\n    color: #A855F7;\n  }\n  .text-\\[\\#E4E4E7\\] {\n    color: #E4E4E7;\n  }\n  .text-\\[\\#d36cff\\] {\n    color: #d36cff;\n  }\n  .text-\\[\\#f87171\\] {\n    color: #f87171;\n  }\n  .text-black {\n    color: var(--color-black);\n  }\n  .text-gray-100 {\n    color: var(--color-gray-100);\n  }\n  .text-gray-300 {\n    color: var(--color-gray-300);\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-green-500 {\n    color: var(--color-green-500);\n  }\n  .text-neutral-300 {\n    color: var(--color-neutral-300);\n  }\n  .text-neutral-400 {\n    color: var(--color-neutral-400);\n  }\n  .text-neutral-500 {\n    color: var(--color-neutral-500);\n  }\n  .text-purple-400 {\n    color: var(--color-purple-400);\n  }\n  .text-red-300 {\n    color: var(--color-red-300);\n  }\n  .text-red-400 {\n    color: var(--color-red-400);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .text-white\\/30 {\n    color: color-mix(in srgb, #fff 30%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-white) 30%, transparent);\n    }\n  }\n  .text-white\\/70 {\n    color: color-mix(in srgb, #fff 70%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-white) 70%, transparent);\n    }\n  }\n  .text-yellow-300 {\n    color: var(--color-yellow-300);\n  }\n  .text-yellow-500 {\n    color: var(--color-yellow-500);\n  }\n  .text-zinc-200 {\n    color: var(--color-zinc-200);\n  }\n  .text-zinc-400 {\n    color: var(--color-zinc-400);\n  }\n  .text-zinc-500 {\n    color: var(--color-zinc-500);\n  }\n  .text-zinc-600 {\n    color: var(--color-zinc-600);\n  }\n  .uppercase {\n    text-transform: uppercase;\n  }\n  .italic {\n    font-style: italic;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .opacity-50 {\n    opacity: 50%;\n  }\n  .opacity-100 {\n    opacity: 100%;\n  }\n  .shadow-lg {\n    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring-1 {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring-white\\/\\[0\\.08\\] {\n    --tw-ring-color: color-mix(in srgb, #fff 8%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      --tw-ring-color: color-mix(in oklab, var(--color-white) 8%, transparent);\n    }\n  }\n  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .filter {\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .backdrop-blur-sm {\n    --tw-backdrop-blur: blur(var(--blur-sm));\n    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n  }\n  .transition {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-\\[border-radius\\] {\n    transition-property: border-radius;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-\\[color\\,transform\\] {\n    transition-property: color,transform;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-\\[max-height\\] {\n    transition-property: max-height;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-\\[opacity\\] {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-all {\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-transform {\n    transition-property: transform, translate, scale, rotate;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-none {\n    transition-property: none;\n  }\n  .delay-0 {\n    transition-delay: 0ms;\n  }\n  .delay-150 {\n    transition-delay: 150ms;\n  }\n  .delay-300 {\n    transition-delay: 300ms;\n  }\n  .\\!duration-0 {\n    --tw-duration: 0ms !important;\n    transition-duration: 0ms !important;\n  }\n  .duration-0 {\n    --tw-duration: 0ms;\n    transition-duration: 0ms;\n  }\n  .duration-120 {\n    --tw-duration: 120ms;\n    transition-duration: 120ms;\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .duration-300 {\n    --tw-duration: 300ms;\n    transition-duration: 300ms;\n  }\n  .ease-\\[cubic-bezier\\(0\\.25\\,0\\.1\\,0\\.25\\,1\\)\\] {\n    --tw-ease: cubic-bezier(0.25,0.1,0.25,1);\n    transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);\n  }\n  .ease-in {\n    --tw-ease: var(--ease-in);\n    transition-timing-function: var(--ease-in);\n  }\n  .ease-in-out {\n    --tw-ease: var(--ease-in-out);\n    transition-timing-function: var(--ease-in-out);\n  }\n  .ease-out {\n    --tw-ease: var(--ease-out);\n    transition-timing-function: var(--ease-out);\n  }\n  .will-change-transform {\n    will-change: transform;\n  }\n  .select-none {\n    -webkit-user-select: none;\n    -moz-user-select: none;\n         user-select: none;\n  }\n  .animation-delay-0 {\n    animation-delay: 0s;\n  }\n  .animation-delay-100 {\n    animation-delay: .1s;\n  }\n  .animation-delay-150 {\n    animation-delay: .15s;\n  }\n  .animation-delay-200 {\n    animation-delay: .2s;\n  }\n  .animation-delay-300 {\n    animation-delay: .3s;\n  }\n  .animation-delay-500 {\n    animation-delay: .5s;\n  }\n  .animation-delay-700 {\n    animation-delay: .7s;\n  }\n  .animation-delay-1000 {\n    animation-delay: 1s;\n  }\n  .animation-duration-0 {\n    animation-duration: 0s;\n  }\n  .animation-duration-100 {\n    animation-duration: .1s;\n  }\n  .animation-duration-200 {\n    animation-duration: .2s;\n  }\n  .animation-duration-300 {\n    animation-duration: .3s;\n  }\n  .animation-duration-500 {\n    animation-duration: .5s;\n  }\n  .animation-duration-700 {\n    animation-duration: .7s;\n  }\n  .animation-duration-1000 {\n    animation-duration: 1s;\n  }\n  .group-hover\\:bg-\\[\\#5b2d89\\] {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        background-color: #5b2d89;\n      }\n    }\n  }\n  .group-hover\\:bg-\\[\\#6a6a6a\\] {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        background-color: #6a6a6a;\n      }\n    }\n  }\n  .group-hover\\:bg-\\[\\#21437982\\] {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        background-color: #21437982;\n      }\n    }\n  }\n  .group-hover\\:bg-\\[\\#efda1a2f\\] {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        background-color: #efda1a2f;\n      }\n    }\n  }\n  .group-hover\\:opacity-100 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .peer-hover\\/bottom\\:rounded-b-none {\n    &:is(:where(.peer\\/bottom):hover ~ *) {\n      @media (hover: hover) {\n        border-bottom-right-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n    }\n  }\n  .peer-hover\\/left\\:rounded-l-none {\n    &:is(:where(.peer\\/left):hover ~ *) {\n      @media (hover: hover) {\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n    }\n  }\n  .peer-hover\\/right\\:rounded-r-none {\n    &:is(:where(.peer\\/right):hover ~ *) {\n      @media (hover: hover) {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n    }\n  }\n  .peer-hover\\/top\\:rounded-t-none {\n    &:is(:where(.peer\\/top):hover ~ *) {\n      @media (hover: hover) {\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n      }\n    }\n  }\n  .after\\:absolute {\n    &::after {\n      content: var(--tw-content);\n      position: absolute;\n    }\n  }\n  .after\\:inset-0 {\n    &::after {\n      content: var(--tw-content);\n      inset: calc(var(--spacing) * 0);\n    }\n  }\n  .after\\:top-\\[100\\%\\] {\n    &::after {\n      content: var(--tw-content);\n      top: 100%;\n    }\n  }\n  .after\\:left-1\\/2 {\n    &::after {\n      content: var(--tw-content);\n      left: calc(1 / 2 * 100%);\n    }\n  }\n  .after\\:h-\\[6px\\] {\n    &::after {\n      content: var(--tw-content);\n      height: 6px;\n    }\n  }\n  .after\\:w-\\[10px\\] {\n    &::after {\n      content: var(--tw-content);\n      width: 10px;\n    }\n  }\n  .after\\:-translate-x-1\\/2 {\n    &::after {\n      content: var(--tw-content);\n      --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  .after\\:animate-\\[fadeOut_1s_ease-out_forwards\\] {\n    &::after {\n      content: var(--tw-content);\n      animation: fadeOut 1s ease-out forwards;\n    }\n  }\n  .after\\:border-t-\\[6px\\] {\n    &::after {\n      content: var(--tw-content);\n      border-top-style: var(--tw-border-style);\n      border-top-width: 6px;\n    }\n  }\n  .after\\:border-r-\\[5px\\] {\n    &::after {\n      content: var(--tw-content);\n      border-right-style: var(--tw-border-style);\n      border-right-width: 5px;\n    }\n  }\n  .after\\:border-l-\\[5px\\] {\n    &::after {\n      content: var(--tw-content);\n      border-left-style: var(--tw-border-style);\n      border-left-width: 5px;\n    }\n  }\n  .after\\:border-t-white {\n    &::after {\n      content: var(--tw-content);\n      border-top-color: var(--color-white);\n    }\n  }\n  .after\\:border-r-transparent {\n    &::after {\n      content: var(--tw-content);\n      border-right-color: transparent;\n    }\n  }\n  .after\\:border-l-transparent {\n    &::after {\n      content: var(--tw-content);\n      border-left-color: transparent;\n    }\n  }\n  .after\\:bg-purple-500\\/30 {\n    &::after {\n      content: var(--tw-content);\n      background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 30%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-purple-500) 30%, transparent);\n      }\n    }\n  }\n  .after\\:content-\\[\\"\\"\\] {\n    &::after {\n      --tw-content: "";\n      content: var(--tw-content);\n    }\n  }\n  .focus-within\\:border-\\[\\#454545\\] {\n    &:focus-within {\n      border-color: #454545;\n    }\n  }\n  .hover\\:bg-\\[\\#0f0f0f\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #0f0f0f;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#5f3f9a\\]\\/20 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in oklab, #5f3f9a 20%, transparent);\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#5f3f9a\\]\\/40 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in oklab, #5f3f9a 40%, transparent);\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#18181B\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #18181B;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#34343b\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #34343b;\n      }\n    }\n  }\n  .hover\\:bg-red-600 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-red-600);\n      }\n    }\n  }\n  .hover\\:bg-zinc-700 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-zinc-700);\n      }\n    }\n  }\n  .hover\\:bg-zinc-800\\/50 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, oklch(27.4% 0.006 286.033) 50%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-zinc-800) 50%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:text-neutral-300 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-neutral-300);\n      }\n    }\n  }\n  .hover\\:text-white {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-white);\n      }\n    }\n  }\n}\n* {\n  outline: none !important;\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  &::-webkit-scrollbar {\n    width: 6px;\n    height: 6px;\n  }\n  &::-webkit-scrollbar-track {\n    border-radius: 10px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    border-radius: 10px;\n    background: rgba(255, 255, 255, 0.3);\n  }\n  &::-webkit-scrollbar-thumb:hover {\n    background: rgba(255, 255, 255, 0.4);\n  }\n  &::-webkit-scrollbar-corner {\n    background: transparent;\n  }\n}\n@-moz-document url-prefix() {\n  * {\n    scrollbar-width: thin;\n    scrollbar-color: rgba(255, 255, 255, 0.4) transparent;\n    scrollbar-width: 6px;\n  }\n}\nbutton {\n  &:hover {\n    @media (hover: hover) {\n      background-image: none;\n    }\n  }\n  --tw-outline-style: none;\n  outline-style: none;\n  --tw-border-style: none;\n  border-style: none;\n  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n  --tw-ease: var(--ease-out);\n  transition-timing-function: var(--ease-out);\n  cursor: pointer;\n}\ninput {\n  --tw-outline-style: none;\n  outline-style: none;\n  --tw-border-style: none;\n  border-style: none;\n  background-color: transparent;\n  background-image: none;\n  &::-moz-placeholder {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  &::placeholder {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  &::-moz-placeholder {\n    color: var(--color-neutral-500);\n  }\n  &::placeholder {\n    color: var(--color-neutral-500);\n  }\n  &::-moz-placeholder {\n    font-style: italic;\n  }\n  &::placeholder {\n    font-style: italic;\n  }\n  &:-moz-placeholder {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  &:placeholder-shown {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\nsvg {\n  height: auto;\n  width: auto;\n  pointer-events: none;\n}\n.with-data-text {\n  overflow: hidden;\n  &::before {\n    content: attr(data-text);\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n#react-scan-toolbar {\n  position: fixed;\n  top: calc(var(--spacing) * 0);\n  left: calc(var(--spacing) * 0);\n  display: flex;\n  flex-direction: column;\n  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n  font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;\n  font-size: 13px;\n  color: var(--color-white);\n  background-color: var(--color-black);\n  -webkit-user-select: none;\n  -moz-user-select: none;\n       user-select: none;\n  cursor: move;\n  opacity: 0%;\n  z-index: 2147483678;\n  animation: fadeIn ease-in forwards;\n  animation-delay: .3s;\n  animation-duration: .3s;\n  --tw-shadow: 0 4px 12px var(--tw-shadow-color, rgba(0,0,0,0.2));\n  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  place-self: start;\n  will-change: transform;\n  backface-visibility: hidden;\n}\n#react-scan-toolbar pre,\n#react-scan-toolbar textarea,\n#react-scan-toolbar input[type=\'text\'],\n#react-scan-toolbar input[type=\'search\'],\n#react-scan-toolbar [data-react-scan-selectable] {\n  -webkit-user-select: text;\n  -moz-user-select: text;\n       user-select: text;\n  cursor: text;\n}\n.button {\n  &:hover {\n    background: rgba(255, 255, 255, 0.1);\n  }\n  &:active {\n    background: rgba(255, 255, 255, 0.15);\n  }\n}\n.resize-line-wrapper {\n  position: absolute;\n  overflow: hidden;\n}\n.resize-line {\n  position: absolute;\n  inset: calc(var(--spacing) * 0);\n  overflow: hidden;\n  background-color: var(--color-black);\n  transition-property: all;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n  svg {\n    position: absolute;\n    top: calc(1 / 2 * 100%);\n    left: calc(1 / 2 * 100%);\n    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n}\n.resize-right,\n.resize-left {\n  inset-block: calc(var(--spacing) * 0);\n  width: calc(var(--spacing) * 6);\n  cursor: ew-resize;\n  .resize-line-wrapper {\n    inset-block: calc(var(--spacing) * 0);\n    width: calc(1 / 2 * 100%);\n  }\n  &:hover {\n    .resize-line {\n      --tw-translate-x: calc(var(--spacing) * 0);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n}\n.resize-right {\n  right: calc(var(--spacing) * 0);\n  --tw-translate-x: calc(1 / 2 * 100%);\n  translate: var(--tw-translate-x) var(--tw-translate-y);\n  .resize-line-wrapper {\n    right: calc(var(--spacing) * 0);\n  }\n  .resize-line {\n    border-top-right-radius: var(--radius-lg);\n    border-bottom-right-radius: var(--radius-lg);\n    --tw-translate-x: -100%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n}\n.resize-left {\n  left: calc(var(--spacing) * 0);\n  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n  translate: var(--tw-translate-x) var(--tw-translate-y);\n  .resize-line-wrapper {\n    left: calc(var(--spacing) * 0);\n  }\n  .resize-line {\n    border-top-left-radius: var(--radius-lg);\n    border-bottom-left-radius: var(--radius-lg);\n    --tw-translate-x: 100%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n}\n.resize-top,\n.resize-bottom {\n  inset-inline: calc(var(--spacing) * 0);\n  height: calc(var(--spacing) * 6);\n  cursor: ns-resize;\n  .resize-line-wrapper {\n    inset-inline: calc(var(--spacing) * 0);\n    height: calc(1 / 2 * 100%);\n  }\n  &:hover {\n    .resize-line {\n      --tw-translate-y: calc(var(--spacing) * 0);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n}\n.resize-top {\n  top: calc(var(--spacing) * 0);\n  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n  translate: var(--tw-translate-x) var(--tw-translate-y);\n  .resize-line-wrapper {\n    top: calc(var(--spacing) * 0);\n  }\n  .resize-line {\n    border-top-left-radius: var(--radius-lg);\n    border-top-right-radius: var(--radius-lg);\n    --tw-translate-y: 100%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n}\n.resize-bottom {\n  bottom: calc(var(--spacing) * 0);\n  --tw-translate-y: calc(1 / 2 * 100%);\n  translate: var(--tw-translate-x) var(--tw-translate-y);\n  .resize-line-wrapper {\n    bottom: calc(var(--spacing) * 0);\n  }\n  .resize-line {\n    border-bottom-right-radius: var(--radius-lg);\n    border-bottom-left-radius: var(--radius-lg);\n    --tw-translate-y: -100%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n}\n.react-scan-header {\n  display: flex;\n  align-items: center;\n  -moz-column-gap: calc(var(--spacing) * 2);\n       column-gap: calc(var(--spacing) * 2);\n  padding-right: calc(var(--spacing) * 2);\n  padding-left: calc(var(--spacing) * 3);\n  min-height: calc(var(--spacing) * 9);\n  border-bottom-style: var(--tw-border-style);\n  border-bottom-width: 1px;\n  border-color: #222;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.react-scan-replay-button,\n.react-scan-close-button {\n  display: flex;\n  align-items: center;\n  padding: calc(var(--spacing) * 1);\n  min-width: -moz-fit-content;\n  min-width: fit-content;\n  border-radius: 4px;\n  transition-property: all;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n  --tw-duration: 300ms;\n  transition-duration: 300ms;\n}\n.react-scan-replay-button {\n  position: relative;\n  overflow: hidden;\n  background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 50%, transparent) !important;\n  @supports (color: color-mix(in lab, red, red)) {\n    background-color: color-mix(in oklab, var(--color-purple-500) 50%, transparent) !important;\n  }\n  &:hover {\n    background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 25%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-purple-500) 25%, transparent);\n    }\n  }\n  &.disabled {\n    opacity: 50%;\n    pointer-events: none;\n  }\n  &:before {\n    content: "";\n    position: absolute;\n    inset: calc(var(--spacing) * 0);\n    --tw-translate-x: -100%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n    animation: shimmer 2s infinite;\n    background: linear-gradient(\n      to right,\n      transparent,\n      rgba(142, 97, 227, 0.3),\n      transparent\n    );\n  }\n}\n.react-scan-close-button {\n  background-color: color-mix(in srgb, #fff 10%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    background-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n  }\n  &:hover {\n    background-color: color-mix(in srgb, #fff 15%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-white) 15%, transparent);\n    }\n  }\n}\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}\n.react-section-header {\n  position: sticky;\n  z-index: 100;\n  display: flex;\n  align-items: center;\n  -moz-column-gap: calc(var(--spacing) * 2);\n       column-gap: calc(var(--spacing) * 2);\n  padding-inline: calc(var(--spacing) * 3);\n  height: calc(var(--spacing) * 7);\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: #888;\n  border-bottom-style: var(--tw-border-style);\n  border-bottom-width: 1px;\n  border-color: #222;\n  background-color: #0a0a0a;\n}\n.react-scan-section {\n  display: flex;\n  flex-direction: column;\n  padding-inline: calc(var(--spacing) * 2);\n  color: #888;\n  &::before {\n    content: var(--tw-content);\n    color: var(--color-gray-500);\n  }\n  &::before {\n    --tw-content: attr(data-section);\n    content: var(--tw-content);\n  }\n  font-size: var(--text-xs);\n  line-height: var(--tw-leading, var(--text-xs--line-height));\n  > .react-scan-property {\n    margin-left: calc(14px * -1);\n  }\n}\n.react-scan-property {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  padding-left: calc(var(--spacing) * 8);\n  border-left-style: var(--tw-border-style);\n  border-left-width: 1px;\n  border-color: transparent;\n  overflow: hidden;\n}\n.react-scan-property-content {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  min-height: calc(var(--spacing) * 7);\n  max-width: 100%;\n  overflow: hidden;\n}\n.react-scan-string {\n  color: #9ecbff;\n}\n.react-scan-number {\n  color: #79c7ff;\n}\n.react-scan-boolean {\n  color: #56b6c2;\n}\n.react-scan-key {\n  width: -moz-fit-content;\n  width: fit-content;\n  max-width: calc(var(--spacing) * 60);\n  white-space: nowrap;\n  color: var(--color-white);\n}\n.react-scan-input {\n  color: var(--color-white);\n  background-color: var(--color-black);\n}\n@keyframes blink {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n.react-scan-arrow {\n  position: absolute;\n  top: calc(var(--spacing) * 0);\n  left: calc(var(--spacing) * 7);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  height: calc(var(--spacing) * 7);\n  width: calc(var(--spacing) * 6);\n  --tw-translate-x: -100%;\n  translate: var(--tw-translate-x) var(--tw-translate-y);\n  z-index: 10;\n  > svg {\n    transition-property: transform, translate, scale, rotate;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n}\n.react-scan-nested {\n  position: relative;\n  overflow: hidden;\n  &:before {\n    content: "";\n    position: absolute;\n    top: calc(var(--spacing) * 0);\n    left: calc(var(--spacing) * 0);\n    height: 100%;\n    width: 1px;\n    background-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 30%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-gray-500) 30%, transparent);\n    }\n  }\n}\n.react-scan-settings {\n  position: absolute;\n  inset: calc(var(--spacing) * 0);\n  display: flex;\n  flex-direction: column;\n  gap: calc(var(--spacing) * 4);\n  padding-inline: calc(var(--spacing) * 4);\n  padding-block: calc(var(--spacing) * 2);\n  color: #888;\n  > div {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n    --tw-duration: 300ms;\n    transition-duration: 300ms;\n  }\n}\n.react-scan-preview-line {\n  position: relative;\n  display: flex;\n  min-height: calc(var(--spacing) * 7);\n  align-items: center;\n  -moz-column-gap: calc(var(--spacing) * 2);\n       column-gap: calc(var(--spacing) * 2);\n}\n.react-scan-flash-overlay {\n  position: absolute;\n  inset: calc(var(--spacing) * 0);\n  opacity: 0%;\n  z-index: 50;\n  pointer-events: none;\n  transition-property: opacity;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n  mix-blend-mode: multiply;\n  background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 90%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    background-color: color-mix(in oklab, var(--color-purple-500) 90%, transparent);\n  }\n}\n.react-scan-toggle {\n  position: relative;\n  display: inline-flex;\n  height: calc(var(--spacing) * 6);\n  width: calc(var(--spacing) * 10);\n  input {\n    position: absolute;\n    inset: calc(var(--spacing) * 0);\n    z-index: 20;\n    opacity: 0%;\n    cursor: pointer;\n    height: 100%;\n    width: 100%;\n  }\n  input:checked {\n    + div {\n      background-color: #5f3f9a;\n      &::before {\n        --tw-translate-x: 100%;\n        translate: var(--tw-translate-x) var(--tw-translate-y);\n        left: auto;\n        border-color: #5f3f9a;\n      }\n    }\n  }\n  > div {\n    position: absolute;\n    inset: calc(var(--spacing) * 1);\n    background-color: var(--color-neutral-700);\n    border-radius: calc(infinity * 1px);\n    pointer-events: none;\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n    --tw-duration: 300ms;\n    transition-duration: 300ms;\n    &:before {\n      --tw-content: \'\';\n      content: var(--tw-content);\n      position: absolute;\n      top: calc(1 / 2 * 100%);\n      left: calc(var(--spacing) * 0);\n      --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n      height: calc(var(--spacing) * 4);\n      width: calc(var(--spacing) * 4);\n      background-color: var(--color-white);\n      border-style: var(--tw-border-style);\n      border-width: 2px;\n      border-color: var(--color-neutral-700);\n      border-radius: calc(infinity * 1px);\n      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n      transition-property: all;\n      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n      transition-duration: var(--tw-duration, var(--default-transition-duration));\n      --tw-duration: 300ms;\n      transition-duration: 300ms;\n    }\n  }\n}\n.react-scan-flash-active {\n  opacity: 40%;\n  transition-property: opacity;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n  --tw-duration: 300ms;\n  transition-duration: 300ms;\n}\n.react-scan-inspector-overlay {\n  display: flex;\n  flex-direction: column;\n  opacity: 0%;\n  transition-property: opacity;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n  --tw-duration: 200ms;\n  transition-duration: 200ms;\n  --tw-ease: var(--ease-out);\n  transition-timing-function: var(--ease-out);\n  will-change: opacity;\n  &.fade-out {\n    opacity: 0%;\n  }\n  &.fade-in {\n    opacity: 100%;\n  }\n}\n.react-scan-what-changed {\n  ul {\n    list-style-type: disc;\n    padding-left: calc(var(--spacing) * 4);\n  }\n  li {\n    white-space: nowrap;\n    > div {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      -moz-column-gap: calc(var(--spacing) * 2);\n           column-gap: calc(var(--spacing) * 2);\n    }\n  }\n}\n.count-badge {\n  display: flex;\n  align-items: center;\n  -moz-column-gap: calc(var(--spacing) * 2);\n       column-gap: calc(var(--spacing) * 2);\n  padding-inline: calc(var(--spacing) * 1.5);\n  padding-block: calc(var(--spacing) * 0.5);\n  border-radius: 4px;\n  font-size: var(--text-xs);\n  line-height: var(--tw-leading, var(--text-xs--line-height));\n  --tw-font-weight: var(--font-weight-medium);\n  font-weight: var(--font-weight-medium);\n  color: #a855f7;\n  --tw-numeric-spacing: tabular-nums;\n  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);\n  background-color: color-mix(in oklab, #a855f7 10%, transparent);\n  transform-origin: center;\n  transition-property: all;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n  transition-delay: 150ms;\n  --tw-duration: 300ms;\n  transition-duration: 300ms;\n}\n.count-flash {\n  animation: countFlash .3s ease-out forwards;\n}\n.count-flash-white {\n  animation: countFlashShake .3s ease-out forwards;\n  transition-delay: 500ms !important;\n}\n.change-scope {\n  display: flex;\n  align-items: center;\n  -moz-column-gap: calc(var(--spacing) * 1);\n       column-gap: calc(var(--spacing) * 1);\n  color: #666;\n  font-size: var(--text-xs);\n  line-height: var(--tw-leading, var(--text-xs--line-height));\n  font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;\n  > div {\n    padding-inline: calc(var(--spacing) * 1.5);\n    padding-block: calc(var(--spacing) * 0.5);\n    border-radius: 4px;\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n    --tw-numeric-spacing: tabular-nums;\n    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);\n    transform-origin: center;\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n    transition-delay: 150ms;\n    --tw-duration: 300ms;\n    transition-duration: 300ms;\n    &[data-flash="true"] {\n      background-color: color-mix(in oklab, #a855f7 10%, transparent);\n      color: #a855f7;\n    }\n  }\n}\n.react-scan-slider {\n  position: relative;\n  min-height: calc(var(--spacing) * 6);\n  > input {\n    position: absolute;\n    inset: calc(var(--spacing) * 0);\n    opacity: 0%;\n  }\n  &:before {\n    --tw-content: \'\';\n    content: var(--tw-content);\n    position: absolute;\n    inset-inline: calc(var(--spacing) * 0);\n    top: calc(1 / 2 * 100%);\n    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n    height: calc(var(--spacing) * 1.5);\n    background-color: color-mix(in oklab, #8e61e3 40%, transparent);\n    border-radius: var(--radius-lg);\n    pointer-events: none;\n  }\n  &:after {\n    --tw-content: \'\';\n    content: var(--tw-content);\n    position: absolute;\n    inset-inline: calc(var(--spacing) * 0);\n    inset-block: calc(var(--spacing) * -2);\n    z-index: calc(10 * -1);\n  }\n  span {\n    position: absolute;\n    top: calc(1 / 2 * 100%);\n    left: calc(var(--spacing) * 0);\n    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n    height: calc(var(--spacing) * 2.5);\n    width: calc(var(--spacing) * 2.5);\n    border-radius: var(--radius-lg);\n    background-color: #8e61e3;\n    pointer-events: none;\n    transition-property: transform, translate, scale, rotate;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n    --tw-duration: 75ms;\n    transition-duration: 75ms;\n  }\n}\n.resize-v-line {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  max-width: calc(var(--spacing) * 1);\n  min-width: calc(var(--spacing) * 1);\n  height: 100%;\n  width: 100%;\n  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n  &:hover,\n  &:active {\n    > span {\n      background-color: #222;\n    }\n    svg {\n      opacity: 100%;\n    }\n  }\n  &::before {\n    --tw-content: "";\n    content: var(--tw-content);\n    position: absolute;\n    inset: calc(var(--spacing) * 0);\n    left: calc(1 / 2 * 100%);\n    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n    width: 1px;\n    background-color: #222;\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  > span {\n    position: absolute;\n    top: calc(1 / 2 * 100%);\n    left: calc(1 / 2 * 100%);\n    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n    height: 18px;\n    width: calc(var(--spacing) * 1.5);\n    border-radius: 4px;\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  svg {\n    position: absolute;\n    top: calc(1 / 2 * 100%);\n    left: calc(1 / 2 * 100%);\n    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n    rotate: 90deg;\n    color: var(--color-neutral-400);\n    opacity: 0%;\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n    z-index: 50;\n  }\n}\n.tree-node-search-highlight {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  span {\n    padding-block: 1px;\n    border-radius: var(--radius-sm);\n    background-color: var(--color-yellow-300);\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n    color: var(--color-black);\n  }\n  .single {\n    margin-right: 1px;\n    padding-inline: 2px;\n  }\n  .regex {\n    padding-inline: 2px;\n  }\n  .start {\n    margin-left: 1px;\n    border-top-left-radius: var(--radius-sm);\n    border-bottom-left-radius: var(--radius-sm);\n  }\n  .end {\n    margin-right: 1px;\n    border-top-right-radius: var(--radius-sm);\n    border-bottom-right-radius: var(--radius-sm);\n  }\n  .middle {\n    margin-inline: 1px;\n    border-radius: var(--radius-sm);\n  }\n}\n.react-scan-toolbar-notification {\n  position: absolute;\n  inset-inline: calc(var(--spacing) * 0);\n  display: flex;\n  align-items: center;\n  -moz-column-gap: calc(var(--spacing) * 2);\n       column-gap: calc(var(--spacing) * 2);\n  padding: calc(var(--spacing) * 1);\n  padding-left: calc(var(--spacing) * 2);\n  font-size: 10px;\n  color: var(--color-neutral-300);\n  background-color: color-mix(in srgb, #000 90%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    background-color: color-mix(in oklab, var(--color-black) 90%, transparent);\n  }\n  transition-property: transform, translate, scale, rotate;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n  &:before {\n    --tw-content: \'\';\n    content: var(--tw-content);\n    position: absolute;\n    inset-inline: calc(var(--spacing) * 0);\n    background-color: var(--color-black);\n    height: calc(var(--spacing) * 2);\n  }\n  &.position-top {\n    top: 100%;\n    --tw-translate-y: -100%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n    border-bottom-right-radius: var(--radius-lg);\n    border-bottom-left-radius: var(--radius-lg);\n    &::before {\n      top: calc(var(--spacing) * 0);\n      --tw-translate-y: -100%;\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  &.position-bottom {\n    bottom: 100%;\n    --tw-translate-y: 100%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n    border-top-left-radius: var(--radius-lg);\n    border-top-right-radius: var(--radius-lg);\n    &::before {\n      bottom: calc(var(--spacing) * 0);\n      --tw-translate-y: 100%;\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  &.is-open {\n    --tw-translate-y: calc(var(--spacing) * 0);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n}\n.react-scan-header-item {\n  position: absolute;\n  inset: calc(var(--spacing) * 0);\n  --tw-translate-y: calc(200% * -1);\n  translate: var(--tw-translate-x) var(--tw-translate-y);\n  transition-property: transform, translate, scale, rotate;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n  --tw-duration: 300ms;\n  transition-duration: 300ms;\n  &.is-visible {\n    --tw-translate-y: calc(var(--spacing) * 0);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n}\n.react-scan-components-tree:has(.resize-v-line:hover, .resize-v-line:active)\n  .tree {\n  overflow: hidden;\n}\n.react-scan-expandable {\n  display: grid;\n  grid-template-rows: 0fr;\n  overflow: hidden;\n  transition-property: all;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n  --tw-duration: 75ms;\n  transition-duration: 75ms;\n  transition-timing-function: ease-out;\n  > * {\n    min-height: 0;\n  }\n  &.react-scan-expanded {\n    grid-template-rows: 1fr;\n    transition-duration: 100ms;\n  }\n}\n@property --tw-translate-x {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-scale-x {\n  syntax: "*";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-y {\n  syntax: "*";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-z {\n  syntax: "*";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-rotate-x {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-divide-y-reverse {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: "*";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-leading {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-font-weight {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-tracking {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: "<length>";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: "*";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: "*";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-blur {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-brightness {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-contrast {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-grayscale {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-hue-rotate {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-invert {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-opacity {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-saturate {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-sepia {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-drop-shadow {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-drop-shadow-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-drop-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-drop-shadow-size {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-backdrop-blur {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-backdrop-brightness {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-backdrop-contrast {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-backdrop-grayscale {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-backdrop-hue-rotate {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-backdrop-invert {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-backdrop-opacity {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-backdrop-saturate {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-backdrop-sepia {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-duration {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-ease {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-content {\n  syntax: "*";\n  initial-value: "";\n  inherits: false;\n}\n@property --tw-ordinal {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-slashed-zero {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-numeric-figure {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-numeric-spacing {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-numeric-fraction {\n  syntax: "*";\n  inherits: false;\n}\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes fadeOut {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n@keyframes countFlash {\n  0% {\n    background-color: rgba(168, 85, 247, 0.3);\n    transform: scale(1.05);\n  }\n  100% {\n    background-color: rgba(168, 85, 247, 0.1);\n    transform: scale(1);\n  }\n}\n@keyframes countFlashShake {\n  0% {\n    transform: translateX(0);\n  }\n  25% {\n    transform: translateX(-5px);\n  }\n  50% {\n    transform: translateX(5px) scale(1.1);\n  }\n  75% {\n    transform: translateX(-5px);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-scale-z: 1;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-divide-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-tracking: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-outline-style: solid;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n      --tw-backdrop-blur: initial;\n      --tw-backdrop-brightness: initial;\n      --tw-backdrop-contrast: initial;\n      --tw-backdrop-grayscale: initial;\n      --tw-backdrop-hue-rotate: initial;\n      --tw-backdrop-invert: initial;\n      --tw-backdrop-opacity: initial;\n      --tw-backdrop-saturate: initial;\n      --tw-backdrop-sepia: initial;\n      --tw-duration: initial;\n      --tw-ease: initial;\n      --tw-content: "";\n      --tw-ordinal: initial;\n      --tw-slashed-zero: initial;\n      --tw-numeric-figure: initial;\n      --tw-numeric-spacing: initial;\n      --tw-numeric-fraction: initial;\n    }\n  }\n}\n',ju.appendChild(e),document.documentElement.appendChild(Du),{rootContainer:Du,shadowRoot:ju}})();(e=>{const t=document.createElement("div");t.id="react-scan-toolbar-root",window.__REACT_SCAN_TOOLBAR_CONTAINER__=t,e.appendChild(t),Oe(Rn(Mu,{children:Rn(me,{children:[Rn(Au,{}),Rn(Eu,{})]})}),t);const n=t.remove.bind(t);t.remove=()=>{window.__REACT_SCAN_TOOLBAR_CONTAINER__=void 0,t.hasChildNodes()&&(Oe(null,t),Oe(null,t)),n()}})(i)},Ju=()=>{try{return(e=>{if(Ld=document.createElement("canvas"),!(Pd=Ld.getContext("2d",{alpha:!0})))return null;const t=window.devicePixelRatio||1,{innerWidth:n,innerHeight:r}=window;Ld.style.width=`${n}px`,Ld.style.height=`${r}px`,Ld.width=n*t,Ld.height=r*t,Ld.style.position="fixed",Ld.style.left="0",Ld.style.top="0",Ld.style.pointerEvents="none",Ld.style.zIndex="2147483600",Pd.scale(t,t),e.appendChild(Ld),Vd&&window.removeEventListener("resize",Vd);const o=()=>{if(!Ld||!Pd)return;const e=window.devicePixelRatio||1,{innerWidth:t,innerHeight:n}=window;Ld.style.width=`${t}px`,Ld.style.height=`${n}px`,Ld.width=t*e,Ld.height=n*e,Pd.scale(e,e),Bd()};return Vd=o,window.addEventListener("resize",o),Id.subscribe(()=>{requestAnimationFrame(()=>{Bd()})}),qd})(document.documentElement)}catch(e){"verbose"===Pu.options.value._debug&&console.error("[React Scan Internal Error]","Failed to create notifications outline canvas",e)}},Yu=(e={})=>{Uu(e);(!Lu.isInIframe.value||Pu.options.value.allowInIframe||Pu.runInAllEnvironments)&&(!1===e.enabled&&!0!==e.showToolbar||qu())},Xu=new WeakSet;ie&&(Yu(),window.reactScan=Yu)
 /*! Bundled license information:
 
 bippy/dist/rdt-hook.js:
@@ -36,4 +36,4 @@ react-grab/dist/freeze-updates-BeKN2UqL.js:
   * This source code is licensed under the MIT license found in the
   * LICENSE file in the root directory of this source tree.
   *)
-*/,e.ReactScanInternals=Wu,e.Store=Iu,e.getIsProduction=Gu,e.getOptions=Vu,e.getReport=e=>{if(e){for(const t of Array.from(Iu.legacyReportData.values()))if(t.type===e)return t;return null}return Iu.legacyReportData},e.ignoreScan=e=>{e&&"object"==typeof e&&Zu.add(e)},e.ignoredProps=Zu,e.onRender=(e,t)=>{const n=Wu.onRender;Wu.onRender=(r,o)=>{null==n||n(r,o),G(r.type)===e&&t(r,o)}},e.scan=Ku,e.setOptions=Bu,e.start=Ju,e.useScan=(e={})=>{Bu(e),Ju()}}({});
\ No newline at end of file
+*/,e.ReactScanInternals=Pu,e.Store=Lu,e.getIsProduction=Vu,e.getOptions=Hu,e.getReport=e=>{if(e){for(const t of Array.from(Lu.legacyReportData.values()))if(t.type===e)return t;return null}return Lu.legacyReportData},e.ignoreScan=e=>{e&&"object"==typeof e&&Xu.add(e)},e.ignoredProps=Xu,e.onRender=(e,t)=>{const n=Pu.onRender;Pu.onRender=(r,o)=>{null==n||n(r,o),G(r.type)===e&&t(r,o)}},e.scan=Yu,e.setOptions=Uu,e.start=qu,e.useScan=(e={})=>{Uu(e),qu()}}({});
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ba0cdeb6..ab454ac1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -160,10 +160,10 @@ importers:
         version: 2.4.2
       react-doctor:
         specifier: latest
-        version: 0.2.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(eslint@10.4.0(jiti@2.6.1))(oxlint-tsgolint@0.22.0)(vite-plus@0.1.20(@types/node@25.6.0)(esbuild@0.28.0)(jiti@2.6.1)(publint@0.3.18)(terser@5.46.2)(tsx@4.20.3)(typescript@6.0.3)(vite@6.3.5(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.2)(tsx@4.20.3)(yaml@2.9.0))(yaml@2.9.0))
+        version: 0.2.10(eslint@10.4.0(jiti@2.6.1))(oxlint-tsgolint@0.22.0)(vite-plus@0.1.20(@types/node@25.6.0)(esbuild@0.28.0)(jiti@2.6.1)(publint@0.3.18)(terser@5.46.2)(tsx@4.20.3)(typescript@6.0.3)(vite@6.3.5(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.2)(tsx@4.20.3)(yaml@2.9.0))(yaml@2.9.0))
       react-grab:
         specifier: latest
-        version: 0.1.32(react@19.0.0)
+        version: 0.1.37(react@19.0.0)
     devDependencies:
       '@esbuild-plugins/tsconfig-paths':
         specifier: ^0.1.2
@@ -251,7 +251,7 @@ importers:
         specifier: ^1.2.0
         version: 1.2.0
       react-scan:
-        specifier: '>=0.5.6'
+        specifier: '>=0.5.7'
         version: link:../scan
       vite:
         specifier: npm:@voidzero-dev/vite-plus-core@^0.1.12
@@ -290,9 +290,6 @@ importers:
       react-dom:
         specifier: ^19.2.5
         version: 19.2.5(react@19.2.5)
-      react-grab:
-        specifier: ^0.1.32
-        version: 0.1.32(react@19.2.5)
       react-scan:
         specifier: workspace:*
         version: link:../scan
@@ -328,10 +325,6 @@ packages:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
 
-  '@antfu/ni@0.23.2':
-    resolution: {integrity: sha512-FSEVWXvwroExDXUu8qV6Wqp2X3D1nJ0Li4LFymCyvCVrm7I3lNfG0zZWSWvGU1RE7891eTnFTyh31L3igOwNKQ==}
-    hasBin: true
-
   '@babel/code-frame@7.27.1':
     resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
     engines: {node: '>=6.9.0'}
@@ -1675,103 +1668,98 @@ packages:
   '@oxc-project/types@0.132.0':
     resolution: {integrity: sha512-FESMOxil5Se014ui/Eq8fT5uHJo6nIRwH0PfJrZJXs6Gek3ZVFOrpUv3YIZT20m+extU98Hg1Ym72U58rlsxUQ==}
 
-  '@oxc-resolver/binding-android-arm-eabi@11.19.1':
-    resolution: {integrity: sha512-aUs47y+xyXHUKlbhqHUjBABjvycq6YSD7bpxSW7vplUmdzAlJ93yXY6ZR0c1o1x5A/QKbENCvs3+NlY8IpIVzg==}
+  '@oxc-resolver/binding-android-arm-eabi@11.20.0':
+    resolution: {integrity: sha512-IjfWOXRgJFNdORDl+Uf1aibNgZY2guOD3zmOhx1BGVb/MIiqlFTdmjpQNplSN58lhWehnX4UNqC3QwpUo8pjJg==}
     cpu: [arm]
     os: [android]
 
-  '@oxc-resolver/binding-android-arm64@11.19.1':
-    resolution: {integrity: sha512-oolbkRX+m7Pq2LNjr/kKgYeC7bRDMVTWPgxBGMjSpZi/+UskVo4jsMU3MLheZV55jL6c3rNelPl4oD60ggYmqA==}
+  '@oxc-resolver/binding-android-arm64@11.20.0':
+    resolution: {integrity: sha512-QqslZAuFQG8Q9xm7JuIn8JUbvywhSBMVhuQHtYW+auirZJloS41oxUUaBXk7uUhZJgp44c5zQLeVvmFaDQB+2Q==}
     cpu: [arm64]
     os: [android]
 
-  '@oxc-resolver/binding-darwin-arm64@11.19.1':
-    resolution: {integrity: sha512-nUC6d2i3R5B12sUW4O646qD5cnMXf2oBGPLIIeaRfU9doJRORAbE2SGv4eW6rMqhD+G7nf2Y8TTJTLiiO3Q/dQ==}
+  '@oxc-resolver/binding-darwin-arm64@11.20.0':
+    resolution: {integrity: sha512-MUcavykj2ewlR+kc5arpg4tC2RvzJkUxWtNv74pf7lcNk00GpIpN43vXMj+j6r4eMmfZhlb8hueKoIb8e9kAGQ==}
     cpu: [arm64]
     os: [darwin]
 
-  '@oxc-resolver/binding-darwin-x64@11.19.1':
-    resolution: {integrity: sha512-cV50vE5+uAgNcFa3QY1JOeKDSkM/9ReIcc/9wn4TavhW/itkDGrXhw9jaKnkQnGbjJ198Yh5nbX/Gr2mr4Z5jQ==}
+  '@oxc-resolver/binding-darwin-x64@11.20.0':
+    resolution: {integrity: sha512-BGB16nRUK5Etiv//ihPyzj8Lj1px0mhh4YIfe0FDf045ywknfSm0GEbiRESpr6Q4K82AvnyaRIhhluHByvS4bg==}
     cpu: [x64]
     os: [darwin]
 
-  '@oxc-resolver/binding-freebsd-x64@11.19.1':
-    resolution: {integrity: sha512-xZOQiYGFxtk48PBKff+Zwoym7ScPAIVp4c14lfLxizO2LTTTJe5sx9vQNGrBymrf/vatSPNMD4FgsaaRigPkqw==}
+  '@oxc-resolver/binding-freebsd-x64@11.20.0':
+    resolution: {integrity: sha512-JZgtePaqj3qmD5XFHJaSLWzHRxQu0LaPkdoM1KJXYADvAaa83ijXHclV3ej3CueeW0wxfIAbGCZVP45J0CA7uQ==}
     cpu: [x64]
     os: [freebsd]
 
-  '@oxc-resolver/binding-linux-arm-gnueabihf@11.19.1':
-    resolution: {integrity: sha512-lXZYWAC6kaGe/ky2su94e9jN9t6M0/6c+GrSlCqL//XO1cxi5lpAhnJYdyrKfm0ZEr/c7RNyAx3P7FSBcBd5+A==}
+  '@oxc-resolver/binding-linux-arm-gnueabihf@11.20.0':
+    resolution: {integrity: sha512-hOQ/p3ry3v3SchUBXicrrnszaI/UmYzM4wtS4RGfwgVUX7a+HbyQSzJ5aOzu+o6XZkFkS3ZXN4PZAzhOb77OSg==}
     cpu: [arm]
     os: [linux]
 
-  '@oxc-resolver/binding-linux-arm-musleabihf@11.19.1':
-    resolution: {integrity: sha512-veG1kKsuK5+t2IsO9q0DErYVSw2azvCVvWHnfTOS73WE0STdLLB7Q1bB9WR+yHPQM76ASkFyRbogWo1GR1+WbQ==}
+  '@oxc-resolver/binding-linux-arm-musleabihf@11.20.0':
+    resolution: {integrity: sha512-2ArPksaw0AqeuGBfoS715VF+JvJQAhD2niWgjE5hVO+L+nAfikVQopvngCMX9x4BD8itWoQ3dnikrQyl5Ho5Jg==}
     cpu: [arm]
     os: [linux]
 
-  '@oxc-resolver/binding-linux-arm64-gnu@11.19.1':
-    resolution: {integrity: sha512-heV2+jmXyYnUrpUXSPugqWDRpnsQcDm2AX4wzTuvgdlZfoNYO0O3W2AVpJYaDn9AG4JdM6Kxom8+foE7/BcSig==}
+  '@oxc-resolver/binding-linux-arm64-gnu@11.20.0':
+    resolution: {integrity: sha512-0bJnmYFp62JdZ4nVMDUZ/C58BCZOCcqgKtnUlp7L9Ojf/czIN+3j72YlLPeWLkzlr6SlYvIQA4SGV/HyO0d+qg==}
     cpu: [arm64]
     os: [linux]
 
-  '@oxc-resolver/binding-linux-arm64-musl@11.19.1':
-    resolution: {integrity: sha512-jvo2Pjs1c9KPxMuMPIeQsgu0mOJF9rEb3y3TdpsrqwxRM+AN6/nDDwv45n5ZrUnQMsdBy5gIabioMKnQfWo9ew==}
+  '@oxc-resolver/binding-linux-arm64-musl@11.20.0':
+    resolution: {integrity: sha512-wKHHzPKZo7Ufhv/Bt6yxT7FOgnIgW4gwXcJUipkShGp68W3wGVqvr1Sr0fY65lN0Oy6y41+g2kIDvkgZaMMUkw==}
     cpu: [arm64]
     os: [linux]
 
-  '@oxc-resolver/binding-linux-ppc64-gnu@11.19.1':
-    resolution: {integrity: sha512-vLmdNxWCdN7Uo5suays6A/+ywBby2PWBBPXctWPg5V0+eVuzsJxgAn6MMB4mPlshskYbppjpN2Zg83ArHze9gQ==}
+  '@oxc-resolver/binding-linux-ppc64-gnu@11.20.0':
+    resolution: {integrity: sha512-RN8goF7Ie0B79L4i4G6OeBocTgSC56vJbQ65VJje+oXnldVpLnOU7j/AQ/dP94TcCS+Yh6WG8u3Qt4ETteXFNQ==}
     cpu: [ppc64]
     os: [linux]
 
-  '@oxc-resolver/binding-linux-riscv64-gnu@11.19.1':
-    resolution: {integrity: sha512-/b+WgR+VTSBxzgOhDO7TlMXC1ufPIMR6Vj1zN+/x+MnyXGW7prTLzU9eW85Aj7Th7CCEG9ArCbTeqxCzFWdg2w==}
+  '@oxc-resolver/binding-linux-riscv64-gnu@11.20.0':
+    resolution: {integrity: sha512-5l1yU6/xQEqLZRzxqmMxJfWPslpwCmBsdDGaBvABPehxquCXDC7dd7oraNdKSJUMDXSM7VvVj8H2D2FTjU7oWw==}
     cpu: [riscv64]
     os: [linux]
 
-  '@oxc-resolver/binding-linux-riscv64-musl@11.19.1':
-    resolution: {integrity: sha512-YlRdeWb9j42p29ROh+h4eg/OQ3dTJlpHSa+84pUM9+p6i3djtPz1q55yLJhgW9XfDch7FN1pQ/Vd6YP+xfRIuw==}
+  '@oxc-resolver/binding-linux-riscv64-musl@11.20.0':
+    resolution: {integrity: sha512-xHEvkbgz6UC+A3JOyDQy76LkUaxsNSfIr3/GV8slwZsnuooJiIB34gzJfsyvR4JdCYNUUPsRJc/w/oWkODu+hg==}
     cpu: [riscv64]
     os: [linux]
 
-  '@oxc-resolver/binding-linux-s390x-gnu@11.19.1':
-    resolution: {integrity: sha512-EDpafVOQWF8/MJynsjOGFThcqhRHy417sRyLfQmeiamJ8qVhSKAn2Dn2VVKUGCjVB9C46VGjhNo7nOPUi1x6uA==}
+  '@oxc-resolver/binding-linux-s390x-gnu@11.20.0':
+    resolution: {integrity: sha512-aWPDUUmSeyHvlW+SoEUd+JIJsQhVhu6a5tBpDRMu058naPAchTgAVGCFy35zjbnFlt0i8hLWziff6HX0D3LU4g==}
     cpu: [s390x]
     os: [linux]
 
-  '@oxc-resolver/binding-linux-x64-gnu@11.19.1':
-    resolution: {integrity: sha512-NxjZe+rqWhr+RT8/Ik+5ptA3oz7tUw361Wa5RWQXKnfqwSSHdHyrw6IdcTfYuml9dM856AlKWZIUXDmA9kkiBQ==}
+  '@oxc-resolver/binding-linux-x64-gnu@11.20.0':
+    resolution: {integrity: sha512-x2YeSimvhJjKLVD8KSu8f/rqU1potcdEMkApIPJqjZWN7c2Fpt4g2X32WDg1p+XDAmyT7nuQGe0vnhvXeLbH+g==}
     cpu: [x64]
     os: [linux]
 
-  '@oxc-resolver/binding-linux-x64-musl@11.19.1':
-    resolution: {integrity: sha512-cM/hQwsO3ReJg5kR+SpI69DMfvNCp+A/eVR4b4YClE5bVZwz8rh2Nh05InhwI5HR/9cArbEkzMjcKgTHS6UaNw==}
+  '@oxc-resolver/binding-linux-x64-musl@11.20.0':
+    resolution: {integrity: sha512-kcRLEIxpZefeYfLChjpgFf3ilBzRDZ+yobMrpRsQlSrxuFGtm3U6PMU7AaEpMqo3NfDGVyJJseAjnRLzMFHjwQ==}
     cpu: [x64]
     os: [linux]
 
-  '@oxc-resolver/binding-openharmony-arm64@11.19.1':
-    resolution: {integrity: sha512-QF080IowFB0+9Rh6RcD19bdgh49BpQHUW5TajG1qvWHvmrQznTZZjYlgE2ltLXyKY+qs4F/v5xuX1XS7Is+3qA==}
+  '@oxc-resolver/binding-openharmony-arm64@11.20.0':
+    resolution: {integrity: sha512-HHcfnApSZGtKhTiHqe8OZruOZe5XuFQH5/E0Yhj3u8fnFvzkM4/k6WjacUf4SvA0SPEAbfbgYmVPuo0VX/fIBQ==}
     cpu: [arm64]
     os: [openharmony]
 
-  '@oxc-resolver/binding-wasm32-wasi@11.19.1':
-    resolution: {integrity: sha512-w8UCKhX826cP/ZLokXDS6+milN8y4X7zidsAttEdWlVoamTNf6lhBJldaWr3ukTDiye7s4HRcuPEPOXNC432Vg==}
+  '@oxc-resolver/binding-wasm32-wasi@11.20.0':
+    resolution: {integrity: sha512-Tn0y1XOFYHNfK1wp1Z5QK8Rcld/bsOwRISQXfqAZ5IBpv8Gz1IvV39fUWNprqNdRizgcvFhOzWwFun2zkJsyBg==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
-  '@oxc-resolver/binding-win32-arm64-msvc@11.19.1':
-    resolution: {integrity: sha512-nJ4AsUVZrVKwnU/QRdzPCCrO0TrabBqgJ8pJhXITdZGYOV28TIYystV1VFLbQ7DtAcaBHpocT5/ZJnF78YJPtQ==}
+  '@oxc-resolver/binding-win32-arm64-msvc@11.20.0':
+    resolution: {integrity: sha512-qPi25YNPe4YenS8MgsQU2+bIFHxxpLx1LVna2444cEHqNPhNjvWf9zqj4aWE43H9LpAsTmkkAlA3eL5ElBU3mA==}
     cpu: [arm64]
     os: [win32]
 
-  '@oxc-resolver/binding-win32-ia32-msvc@11.19.1':
-    resolution: {integrity: sha512-EW+ND5q2Tl+a3pH81l1QbfgbF3HmqgwLfDfVithRFheac8OTcnbXt/JxqD2GbDkb7xYEqy1zNaVFRr3oeG8npA==}
-    cpu: [ia32]
-    os: [win32]
-
-  '@oxc-resolver/binding-win32-x64-msvc@11.19.1':
-    resolution: {integrity: sha512-6hIU3RQu45B+VNTY4Ru8ppFwjVS/S5qwYyGhBotmjxfEKk41I2DlGtRfGJndZ5+6lneE2pwloqunlOyZuX/XAw==}
+  '@oxc-resolver/binding-win32-x64-msvc@11.20.0':
+    resolution: {integrity: sha512-Wb14jWEW8huH6It9F6sXd9vrYmIS7pMrgkU6sxpLxkP+9z+wRgs71hUEhRpcn8FOXAFa27FVWfY2tRpbfTzfLw==}
     cpu: [x64]
     os: [win32]
 
@@ -2183,8 +2171,8 @@ packages:
     resolution: {integrity: sha512-HDVTWq3H0uTXiU0eeSQntcVUTPP3GamzeXI41+x7uU9J65JgWQh3qWZHblR1i0npXfFtF+mxBiU2nJH8znxWnQ==}
     engines: {node: '>=18'}
 
-  '@react-grab/cli@0.1.32':
-    resolution: {integrity: sha512-TI4SHATLH2yM1DMRXgH3dt/8b3Rj51BplDOqOQiHQKAMOuKVAR9WE2WGWJRT3LwFpl8BXR9ytAM9vrGDrB7QGw==}
+  '@react-grab/cli@0.1.37':
+    resolution: {integrity: sha512-1ln28VkVHUbd5qy+ccXG68voWc0mgZMhBnwG0umxfD+wbkXUcvRzVrLjSqao7N8hCrDqp+Pt5j9Tsqef+9yQQQ==}
     hasBin: true
 
   '@remix-run/react@2.16.8':
@@ -2797,6 +2785,10 @@ packages:
     resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
     engines: {node: '>=12'}
 
+  ansi-regex@6.2.2:
+    resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==}
+    engines: {node: '>=12'}
+
   ansi-styles@4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
@@ -2878,6 +2870,11 @@ packages:
     peerDependencies:
       react: '>=17.0.1'
 
+  bippy@0.5.41:
+    resolution: {integrity: sha512-jCP2pXXLhXqPrAN+iSEFZmLI4uUM4fjSqajh0K+TmM062VehfDT3ZJNkrTGyN701Z5XMejs9qAudSqkMGhSMKg==}
+    peerDependencies:
+      react: '>=17.0.1'
+
   bluebird@3.7.2:
     resolution: {integrity: sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==}
 
@@ -2943,6 +2940,10 @@ packages:
     resolution: {integrity: sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==}
     engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
 
+  chalk@5.6.2:
+    resolution: {integrity: sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+
   chardet@2.1.1:
     resolution: {integrity: sha512-PsezH1rqdV9VvyNhxxOW32/d75r01NY7TQCmOqomRo15ZSOKbpTFVsfjghxo6JloQUCGnH4k1LGu0R4yCLlWQQ==}
 
@@ -2977,9 +2978,9 @@ packages:
     resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
     engines: {node: '>=18'}
 
-  cli-spinners@2.9.2:
-    resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
-    engines: {node: '>=6'}
+  cli-spinners@3.4.0:
+    resolution: {integrity: sha512-bXfOC4QcT1tKXGorxL3wbJm6XJPDqEnij2gQ2m7ESQuE+/z9YFIWnl/5RpTiKWbMq3EVKR4fRLJGn6DVfu0mpw==}
+    engines: {node: '>=18.20'}
 
   client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
@@ -3442,6 +3443,10 @@ packages:
     resolution: {integrity: sha512-vpeMIQKxczTD/0s2CdEWHcb0eeJe6TFjxb+J5xgX7hScxqrGuyjmv4c1D4A/gelKfyox0gJJwIHF+fLjeaM8kQ==}
     engines: {node: '>=18'}
 
+  get-east-asian-width@1.6.0:
+    resolution: {integrity: sha512-QRbvDIbx6YklUe6RxeTeleMR0yv3cYH6PsPZHcnVn7xv7zO1BHN8r0XETu8n6Ye3Q+ahtSarc3WgtNWmehIBfA==}
+    engines: {node: '>=18'}
+
   get-tsconfig@4.14.0:
     resolution: {integrity: sha512-yTb+8DXzDREzgvYmh6s9vHsSVCHeC0G3PI5bEXNBHtmshPnO+S5O7qgLEOn0I5QvMy6kpZN8K1NKGyilLb93wA==}
 
@@ -3627,10 +3632,6 @@ packages:
     resolution: {integrity: sha512-2AT6j+gXe/1ueqbW6fLZJiIw3F8iXGJtt0yDrZaBhAZEG1raiTxKWU+IPqMCzQAXOUCKdA4UDMgacKH25XG2Cw==}
     engines: {node: '>=4'}
 
-  is-unicode-supported@1.3.0:
-    resolution: {integrity: sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==}
-    engines: {node: '>=12'}
-
   is-unicode-supported@2.1.0:
     resolution: {integrity: sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==}
     engines: {node: '>=18'}
@@ -3852,8 +3853,8 @@ packages:
   lodash.uniqby@4.7.0:
     resolution: {integrity: sha512-e/zcLx6CSbmaEgFHCA7BnoQKyCtKMxnuWrJygbwPs/AIn+IMKl66L8/s+wBUn5LRw2pZx3bUHibiV1b6aTWIww==}
 
-  log-symbols@6.0.0:
-    resolution: {integrity: sha512-i24m8rpwhmPIS4zscNzK6MSEhk0DUWa/8iYQWxhffV8jkI4Phvs3F+quL5xvS0gdQR0FyTCMMH33Y78dDTzzIw==}
+  log-symbols@7.0.1:
+    resolution: {integrity: sha512-ja1E3yCr9i/0hmBVaM0bfwDjnGy8I/s6PP4DFp+yP+a+mrHO4Rm7DtmnqROTUkHIkqffC84YY7AeqX6oFk0WFg==}
     engines: {node: '>=18'}
 
   lru-cache@10.4.3:
@@ -4035,9 +4036,9 @@ packages:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
 
-  ora@8.2.0:
-    resolution: {integrity: sha512-weP+BZ8MVNnlCm8c0Qdc1WSWq4Qn7I+9CJGm7Qali6g44e/PUzbjNqJX5NJ9ljlNMosfJvg1fKEGILklK9cwnw==}
-    engines: {node: '>=18'}
+  ora@9.4.0:
+    resolution: {integrity: sha512-84cglkRILFxdtA8hAvLNdMrtBpPNBTrQ9/ulg0FA7xLMnD6mifv+enAIeRmvtv+WgdCE+LPGOfQmtJRrVaIVhQ==}
+    engines: {node: '>=20'}
 
   os-shim@0.1.3:
     resolution: {integrity: sha512-jd0cvB8qQ5uVt0lvCIexBaROw1KyKm5sbulg2fWOHjETisuCzWyt+eTZKEMs8v6HwzoGs8xik26jg7eCM6pS+A==}
@@ -4050,16 +4051,16 @@ packages:
     resolution: {integrity: sha512-+0LAPHaqtfQlvWdpaAa09SmOaZZgP8C552xosEkGJ4+ruEwP1Vgx+sqBgcBCNfR6KDCmagGOZTde8wmAvcI/Hg==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
-  oxc-resolver@11.19.1:
-    resolution: {integrity: sha512-qE/CIg/spwrTBFt5aKmwe3ifeDdLfA2NESN30E42X/lII5ClF8V7Wt6WIJhcGZjp0/Q+nQ+9vgxGk//xZNX2hg==}
+  oxc-resolver@11.20.0:
+    resolution: {integrity: sha512-CblytBiV/a/ZXY34dsVU2NxhIOxMXst8CvDCtyBelVITgd7PLrKzbEbA6oKLdPjvDKDzCiW48qzmzZ+mYaqn+g==}
 
   oxfmt@0.46.0:
     resolution: {integrity: sha512-CopwJOwPAjZ9p76fCvz+mSOJTw9/NY3cSksZK3VO/bUQ8UoEcketNgUuYS0UB3p+R9XnXe7wGGXUmyFxc7QxJA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
-  oxlint-plugin-react-doctor@0.2.8:
-    resolution: {integrity: sha512-bqfY9RNfJWWaHI61Tkn5FUdJ9Tq3mTZdpNgufkVwoyT85bfRCLY8QNH20Vr7zpwFoQIfN05IpJk+VS373K4m1w==}
+  oxlint-plugin-react-doctor@0.2.10:
+    resolution: {integrity: sha512-n36QdOLz4k9EEWod+vhki9/h29x/PL4nS91nWSk6AIr7HAL+rc6fkwUcVLgg3NhUVlaL/VOfYiIm4cVxyIIdGg==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
   oxlint-tsgolint@0.22.0:
@@ -4342,8 +4343,8 @@ packages:
     resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
     hasBin: true
 
-  react-doctor@0.2.8:
-    resolution: {integrity: sha512-WpikJI6/boNzl1ddNaO4HrnS6V/zg/wT/I3MT3lz8ho36ANCZzG6wGZBtW8L1gIeWIritjyE0Nzxre609+GzoA==}
+  react-doctor@0.2.10:
+    resolution: {integrity: sha512-ruceNG2VBJvpLv5Jn3t13GMPkRZCC+PZX5UGl4PHCTYiFE1VVNqXSf2mXe10v21YAjAfrlyuM9WPdxeHHRwvYA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
@@ -4357,8 +4358,8 @@ packages:
     peerDependencies:
       react: ^19.2.5
 
-  react-grab@0.1.32:
-    resolution: {integrity: sha512-ODZkzu4zjwX/5a1VxTdIkagPD6uPnp8IkSN2v5FDgFMZkH5r/YEMq43hIsdpHV5/R2ymqS9zLxp4H7SNSRx5ng==}
+  react-grab@0.1.37:
+    resolution: {integrity: sha512-XVAc/qPyxsDT8Putu9UnP7iVHmAORMzvaN/3GDTOfbuLIRXWdOt7vebPOzM9RVTVUjucXv0135JI++kSVPSfYg==}
     hasBin: true
     peerDependencies:
       react: '>=17.0.0'
@@ -4582,8 +4583,8 @@ packages:
   std-env@4.1.0:
     resolution: {integrity: sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==}
 
-  stdin-discarder@0.2.2:
-    resolution: {integrity: sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ==}
+  stdin-discarder@0.3.2:
+    resolution: {integrity: sha512-eCPu1qRxPVkl5605OTWF8Wz40b4Mf45NY5LQmVPQ599knfs5QhASUm9GbJ5BDMDOXgrnh0wyEdvzmL//YMlw0A==}
     engines: {node: '>=18'}
 
   streamsearch@1.1.0:
@@ -4602,6 +4603,10 @@ packages:
     resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
     engines: {node: '>=18'}
 
+  string-width@8.2.1:
+    resolution: {integrity: sha512-IIaP0g3iy9Cyy18w3M9YcaDudujEAVHKt3a3QJg1+sr/oX96TbaGUubG0hJyCjCBThFH+tFpcIyoUHUn1ogaLA==}
+    engines: {node: '>=20'}
+
   string_decoder@1.1.1:
     resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
 
@@ -4613,6 +4618,10 @@ packages:
     resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
     engines: {node: '>=12'}
 
+  strip-ansi@7.2.0:
+    resolution: {integrity: sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==}
+    engines: {node: '>=12'}
+
   strip-bom@3.0.0:
     resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
     engines: {node: '>=4'}
@@ -5065,6 +5074,10 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  yoctocolors@2.1.2:
+    resolution: {integrity: sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==}
+    engines: {node: '>=18'}
+
   zip-dir@2.0.0:
     resolution: {integrity: sha512-uhlsJZWz26FLYXOD6WVuq+fIcZ3aBPGo/cFdiLlv3KNwpa52IF3ISV8fLhQLiqVu5No3VhlqlgthN6gehil1Dg==}
 
@@ -5081,8 +5094,6 @@ snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
 
-  '@antfu/ni@0.23.2': {}
-
   '@babel/code-frame@7.27.1':
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
@@ -6198,69 +6209,65 @@ snapshots:
 
   '@oxc-project/types@0.132.0': {}
 
-  '@oxc-resolver/binding-android-arm-eabi@11.19.1':
+  '@oxc-resolver/binding-android-arm-eabi@11.20.0':
     optional: true
 
-  '@oxc-resolver/binding-android-arm64@11.19.1':
+  '@oxc-resolver/binding-android-arm64@11.20.0':
     optional: true
 
-  '@oxc-resolver/binding-darwin-arm64@11.19.1':
+  '@oxc-resolver/binding-darwin-arm64@11.20.0':
     optional: true
 
-  '@oxc-resolver/binding-darwin-x64@11.19.1':
+  '@oxc-resolver/binding-darwin-x64@11.20.0':
     optional: true
 
-  '@oxc-resolver/binding-freebsd-x64@11.19.1':
+  '@oxc-resolver/binding-freebsd-x64@11.20.0':
     optional: true
 
-  '@oxc-resolver/binding-linux-arm-gnueabihf@11.19.1':
+  '@oxc-resolver/binding-linux-arm-gnueabihf@11.20.0':
     optional: true
 
-  '@oxc-resolver/binding-linux-arm-musleabihf@11.19.1':
+  '@oxc-resolver/binding-linux-arm-musleabihf@11.20.0':
     optional: true
 
-  '@oxc-resolver/binding-linux-arm64-gnu@11.19.1':
+  '@oxc-resolver/binding-linux-arm64-gnu@11.20.0':
     optional: true
 
-  '@oxc-resolver/binding-linux-arm64-musl@11.19.1':
+  '@oxc-resolver/binding-linux-arm64-musl@11.20.0':
     optional: true
 
-  '@oxc-resolver/binding-linux-ppc64-gnu@11.19.1':
+  '@oxc-resolver/binding-linux-ppc64-gnu@11.20.0':
     optional: true
 
-  '@oxc-resolver/binding-linux-riscv64-gnu@11.19.1':
+  '@oxc-resolver/binding-linux-riscv64-gnu@11.20.0':
     optional: true
 
-  '@oxc-resolver/binding-linux-riscv64-musl@11.19.1':
+  '@oxc-resolver/binding-linux-riscv64-musl@11.20.0':
     optional: true
 
-  '@oxc-resolver/binding-linux-s390x-gnu@11.19.1':
+  '@oxc-resolver/binding-linux-s390x-gnu@11.20.0':
     optional: true
 
-  '@oxc-resolver/binding-linux-x64-gnu@11.19.1':
+  '@oxc-resolver/binding-linux-x64-gnu@11.20.0':
     optional: true
 
-  '@oxc-resolver/binding-linux-x64-musl@11.19.1':
+  '@oxc-resolver/binding-linux-x64-musl@11.20.0':
     optional: true
 
-  '@oxc-resolver/binding-openharmony-arm64@11.19.1':
+  '@oxc-resolver/binding-openharmony-arm64@11.20.0':
     optional: true
 
-  '@oxc-resolver/binding-wasm32-wasi@11.19.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
+  '@oxc-resolver/binding-wasm32-wasi@11.20.0':
     dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
       '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
-    transitivePeerDependencies:
-      - '@emnapi/core'
-      - '@emnapi/runtime'
-    optional: true
-
-  '@oxc-resolver/binding-win32-arm64-msvc@11.19.1':
     optional: true
 
-  '@oxc-resolver/binding-win32-ia32-msvc@11.19.1':
+  '@oxc-resolver/binding-win32-arm64-msvc@11.20.0':
     optional: true
 
-  '@oxc-resolver/binding-win32-x64-msvc@11.19.1':
+  '@oxc-resolver/binding-win32-x64-msvc@11.20.0':
     optional: true
 
   '@oxfmt/binding-android-arm-eabi@0.46.0':
@@ -6482,16 +6489,17 @@ snapshots:
 
   '@publint/pack@0.1.4': {}
 
-  '@react-grab/cli@0.1.32':
+  '@react-grab/cli@0.1.37':
     dependencies:
-      '@antfu/ni': 0.23.2
       commander: 14.0.3
       ignore: 7.0.5
       jsonc-parser: 3.3.1
-      ora: 8.2.0
+      ora: 9.4.0
+      package-manager-detector: 1.6.0
       picocolors: 1.1.1
       prompts: 2.4.2
       smol-toml: 1.6.1
+      tinyexec: 1.1.2
 
   '@remix-run/react@2.16.8(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@6.0.3)':
     dependencies:
@@ -6969,6 +6977,8 @@ snapshots:
 
   ansi-regex@6.1.0: {}
 
+  ansi-regex@6.2.2: {}
+
   ansi-styles@4.3.0:
     dependencies:
       color-convert: 2.0.1
@@ -7036,6 +7046,10 @@ snapshots:
     dependencies:
       react: 19.2.5
 
+  bippy@0.5.41(react@19.0.0):
+    dependencies:
+      react: 19.0.0
+
   bluebird@3.7.2: {}
 
   boolbase@1.0.0: {}
@@ -7104,6 +7118,8 @@ snapshots:
 
   chalk@5.4.1: {}
 
+  chalk@5.6.2: {}
+
   chardet@2.1.1: {}
 
   charenc@0.0.2: {}
@@ -7162,7 +7178,7 @@ snapshots:
     dependencies:
       restore-cursor: 5.1.0
 
-  cli-spinners@2.9.2: {}
+  cli-spinners@3.4.0: {}
 
   client-only@0.0.1: {}
 
@@ -7298,17 +7314,14 @@ snapshots:
 
   dependency-graph@1.0.0: {}
 
-  deslop-js@0.0.13(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0):
+  deslop-js@0.0.13:
     dependencies:
       '@oxc-project/types': 0.132.0
       fast-glob: 3.3.3
       minimatch: 10.2.5
       oxc-parser: 0.132.0
-      oxc-resolver: 11.19.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+      oxc-resolver: 11.20.0
       typescript: 6.0.3
-    transitivePeerDependencies:
-      - '@emnapi/core'
-      - '@emnapi/runtime'
 
   detect-indent@6.1.0: {}
 
@@ -7707,6 +7720,8 @@ snapshots:
 
   get-east-asian-width@1.3.0: {}
 
+  get-east-asian-width@1.6.0: {}
+
   get-tsconfig@4.14.0:
     dependencies:
       resolve-pkg-maps: 1.0.0
@@ -7860,8 +7875,6 @@ snapshots:
     dependencies:
       better-path-resolve: 1.0.0
 
-  is-unicode-supported@1.3.0: {}
-
   is-unicode-supported@2.1.0: {}
 
   is-windows@1.0.2: {}
@@ -8043,10 +8056,10 @@ snapshots:
 
   lodash.uniqby@4.7.0: {}
 
-  log-symbols@6.0.0:
+  log-symbols@7.0.1:
     dependencies:
-      chalk: 5.4.1
-      is-unicode-supported: 1.3.0
+      is-unicode-supported: 2.1.0
+      yoctocolors: 2.1.2
 
   lru-cache@10.4.3: {}
 
@@ -8243,17 +8256,16 @@ snapshots:
       type-check: 0.4.0
       word-wrap: 1.2.5
 
-  ora@8.2.0:
+  ora@9.4.0:
     dependencies:
-      chalk: 5.4.1
+      chalk: 5.6.2
       cli-cursor: 5.0.0
-      cli-spinners: 2.9.2
+      cli-spinners: 3.4.0
       is-interactive: 2.0.0
       is-unicode-supported: 2.1.0
-      log-symbols: 6.0.0
-      stdin-discarder: 0.2.2
-      string-width: 7.2.0
-      strip-ansi: 7.1.0
+      log-symbols: 7.0.1
+      stdin-discarder: 0.3.2
+      string-width: 8.2.1
 
   os-shim@0.1.3: {}
 
@@ -8284,31 +8296,27 @@ snapshots:
       '@oxc-parser/binding-win32-ia32-msvc': 0.132.0
       '@oxc-parser/binding-win32-x64-msvc': 0.132.0
 
-  oxc-resolver@11.19.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0):
+  oxc-resolver@11.20.0:
     optionalDependencies:
-      '@oxc-resolver/binding-android-arm-eabi': 11.19.1
-      '@oxc-resolver/binding-android-arm64': 11.19.1
-      '@oxc-resolver/binding-darwin-arm64': 11.19.1
-      '@oxc-resolver/binding-darwin-x64': 11.19.1
-      '@oxc-resolver/binding-freebsd-x64': 11.19.1
-      '@oxc-resolver/binding-linux-arm-gnueabihf': 11.19.1
-      '@oxc-resolver/binding-linux-arm-musleabihf': 11.19.1
-      '@oxc-resolver/binding-linux-arm64-gnu': 11.19.1
-      '@oxc-resolver/binding-linux-arm64-musl': 11.19.1
-      '@oxc-resolver/binding-linux-ppc64-gnu': 11.19.1
-      '@oxc-resolver/binding-linux-riscv64-gnu': 11.19.1
-      '@oxc-resolver/binding-linux-riscv64-musl': 11.19.1
-      '@oxc-resolver/binding-linux-s390x-gnu': 11.19.1
-      '@oxc-resolver/binding-linux-x64-gnu': 11.19.1
-      '@oxc-resolver/binding-linux-x64-musl': 11.19.1
-      '@oxc-resolver/binding-openharmony-arm64': 11.19.1
-      '@oxc-resolver/binding-wasm32-wasi': 11.19.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
-      '@oxc-resolver/binding-win32-arm64-msvc': 11.19.1
-      '@oxc-resolver/binding-win32-ia32-msvc': 11.19.1
-      '@oxc-resolver/binding-win32-x64-msvc': 11.19.1
-    transitivePeerDependencies:
-      - '@emnapi/core'
-      - '@emnapi/runtime'
+      '@oxc-resolver/binding-android-arm-eabi': 11.20.0
+      '@oxc-resolver/binding-android-arm64': 11.20.0
+      '@oxc-resolver/binding-darwin-arm64': 11.20.0
+      '@oxc-resolver/binding-darwin-x64': 11.20.0
+      '@oxc-resolver/binding-freebsd-x64': 11.20.0
+      '@oxc-resolver/binding-linux-arm-gnueabihf': 11.20.0
+      '@oxc-resolver/binding-linux-arm-musleabihf': 11.20.0
+      '@oxc-resolver/binding-linux-arm64-gnu': 11.20.0
+      '@oxc-resolver/binding-linux-arm64-musl': 11.20.0
+      '@oxc-resolver/binding-linux-ppc64-gnu': 11.20.0
+      '@oxc-resolver/binding-linux-riscv64-gnu': 11.20.0
+      '@oxc-resolver/binding-linux-riscv64-musl': 11.20.0
+      '@oxc-resolver/binding-linux-s390x-gnu': 11.20.0
+      '@oxc-resolver/binding-linux-x64-gnu': 11.20.0
+      '@oxc-resolver/binding-linux-x64-musl': 11.20.0
+      '@oxc-resolver/binding-openharmony-arm64': 11.20.0
+      '@oxc-resolver/binding-wasm32-wasi': 11.20.0
+      '@oxc-resolver/binding-win32-arm64-msvc': 11.20.0
+      '@oxc-resolver/binding-win32-x64-msvc': 11.20.0
 
   oxfmt@0.46.0:
     dependencies:
@@ -8334,7 +8342,7 @@ snapshots:
       '@oxfmt/binding-win32-ia32-msvc': 0.46.0
       '@oxfmt/binding-win32-x64-msvc': 0.46.0
 
-  oxlint-plugin-react-doctor@0.2.8:
+  oxlint-plugin-react-doctor@0.2.10:
     dependencies:
       '@typescript-eslint/types': 8.60.0
       eslint-scope: 9.1.2
@@ -8632,21 +8640,19 @@ snapshots:
       minimist: 1.2.8
       strip-json-comments: 2.0.1
 
-  react-doctor@0.2.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(eslint@10.4.0(jiti@2.6.1))(oxlint-tsgolint@0.22.0)(vite-plus@0.1.20(@types/node@25.6.0)(esbuild@0.28.0)(jiti@2.6.1)(publint@0.3.18)(terser@5.46.2)(tsx@4.20.3)(typescript@6.0.3)(vite@6.3.5(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.2)(tsx@4.20.3)(yaml@2.9.0))(yaml@2.9.0)):
+  react-doctor@0.2.10(eslint@10.4.0(jiti@2.6.1))(oxlint-tsgolint@0.22.0)(vite-plus@0.1.20(@types/node@25.6.0)(esbuild@0.28.0)(jiti@2.6.1)(publint@0.3.18)(terser@5.46.2)(tsx@4.20.3)(typescript@6.0.3)(vite@6.3.5(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.2)(tsx@4.20.3)(yaml@2.9.0))(yaml@2.9.0)):
     dependencies:
       '@effect/platform-node-shared': 4.0.0-beta.70(effect@4.0.0-beta.70)
       agent-install: 0.0.5
       conf: 15.1.0
-      deslop-js: 0.0.13(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+      deslop-js: 0.0.13
       effect: 4.0.0-beta.70
       eslint-plugin-react-hooks: 7.1.1(eslint@10.4.0(jiti@2.6.1))
       oxlint: 1.67.0(oxlint-tsgolint@0.22.0)(vite-plus@0.1.20(@types/node@25.6.0)(esbuild@0.28.0)(jiti@2.6.1)(publint@0.3.18)(terser@5.46.2)(tsx@4.20.3)(typescript@6.0.3)(vite@6.3.5(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.2)(tsx@4.20.3)(yaml@2.9.0))(yaml@2.9.0))
-      oxlint-plugin-react-doctor: 0.2.8
+      oxlint-plugin-react-doctor: 0.2.10
       prompts: 2.4.2
       typescript: 6.0.3
     transitivePeerDependencies:
-      - '@emnapi/core'
-      - '@emnapi/runtime'
       - bufferutil
       - eslint
       - oxlint-tsgolint
@@ -8664,20 +8670,13 @@ snapshots:
       react: 19.2.5
       scheduler: 0.27.0
 
-  react-grab@0.1.32(react@19.0.0):
+  react-grab@0.1.37(react@19.0.0):
     dependencies:
-      '@react-grab/cli': 0.1.32
-      bippy: 0.5.39(react@19.0.0)
+      '@react-grab/cli': 0.1.37
+      bippy: 0.5.41(react@19.0.0)
     optionalDependencies:
       react: 19.0.0
 
-  react-grab@0.1.32(react@19.2.5):
-    dependencies:
-      '@react-grab/cli': 0.1.32
-      bippy: 0.5.39(react@19.2.5)
-    optionalDependencies:
-      react: 19.2.5
-
   react-router-dom@6.30.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@remix-run/router': 1.23.0
@@ -8949,7 +8948,7 @@ snapshots:
 
   std-env@4.1.0: {}
 
-  stdin-discarder@0.2.2: {}
+  stdin-discarder@0.3.2: {}
 
   streamsearch@1.1.0: {}
 
@@ -8971,6 +8970,11 @@ snapshots:
       get-east-asian-width: 1.3.0
       strip-ansi: 7.1.0
 
+  string-width@8.2.1:
+    dependencies:
+      get-east-asian-width: 1.6.0
+      strip-ansi: 7.2.0
+
   string_decoder@1.1.1:
     dependencies:
       safe-buffer: 5.1.2
@@ -8983,6 +8987,10 @@ snapshots:
     dependencies:
       ansi-regex: 6.1.0
 
+  strip-ansi@7.2.0:
+    dependencies:
+      ansi-regex: 6.2.2
+
   strip-bom@3.0.0: {}
 
   strip-bom@5.0.0: {}
@@ -9447,6 +9455,8 @@ snapshots:
 
   yocto-queue@0.1.0: {}
 
+  yoctocolors@2.1.2: {}
+
   zip-dir@2.0.0:
     dependencies:
       async: 3.2.6