react-native-xenon 0.4.1 → 0.5.0

package/lib/typescript/commonjs/src/theme/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../../../src/theme/icons.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,KAAK;;;;;;EAMT,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../../../src/theme/icons.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,KAAK;;;;;;;;;EAST,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/lib/typescript/commonjs/src/types/common.d.ts

@@ -1,3 +1,4 @@
+import type { HttpRequest, LogMessage, WebSocketRequest } from '.';
 export declare enum NetworkType {
     XHR = "xhr",
     Fetch = "fetch",
@@ -14,10 +15,21 @@ export interface NetworkRequest {
     status?: number;
     duration?: number;
 }
-export type NetworkTab = 'headers' | 'queryStringParameters' | 'body' | 'response' | 'messages';
+export type DetailTab = 'overview' | 'headers' | 'request' | 'response' | 'messages' | 'logMessage';
 export interface DebuggerState {
     visibility: 'hidden' | 'bubble' | 'panel';
     position: 'top' | 'bottom';
     selectedPanel: DebuggerPanel | null;
+    detailsData: {
+        type: DebuggerPanel.Network;
+        data: HttpRequest | WebSocketRequest;
+        selectedTab: Exclude<DetailTab, 'logMessage'>;
+        beautified: boolean;
+    } | {
+        type: DebuggerPanel.Console;
+        data: LogMessage;
+        selectedTab: Extract<DetailTab, 'logMessage'>;
+        beautified: boolean;
+    } | null;
 }
 //# sourceMappingURL=common.d.ts.map

package/lib/typescript/commonjs/src/types/common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../../src/types/common.ts"],"names":[],"mappings":"AAAA,oBAAY,WAAW;IACrB,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,EAAE,OAAO;CACV;AAED,oBAAY,aAAa;IACvB,OAAO,YAAY;IACnB,OAAO,YAAY;CACpB;AAED,MAAM,MAAM,WAAW,GAAG,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC;AAElD,MAAM,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,CAAC;AAEpC,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,uBAAuB,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;AAEhG,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC1C,QAAQ,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC3B,aAAa,EAAE,aAAa,GAAG,IAAI,CAAC;CACrC"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../../src/types/common.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,GAAG,CAAC;AAEnE,oBAAY,WAAW;IACrB,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,EAAE,OAAO;CACV;AAED,oBAAY,aAAa;IACvB,OAAO,YAAY;IACnB,OAAO,YAAY;CACpB;AAED,MAAM,MAAM,WAAW,GAAG,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC;AAElD,MAAM,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,CAAC;AAEpC,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,YAAY,CAAC;AAEpG,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC1C,QAAQ,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC3B,aAAa,EAAE,aAAa,GAAG,IAAI,CAAC;IACpC,WAAW,EACP;QACE,IAAI,EAAE,aAAa,CAAC,OAAO,CAAC;QAC5B,IAAI,EAAE,WAAW,GAAG,gBAAgB,CAAC;QACrC,WAAW,EAAE,OAAO,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;QAC9C,UAAU,EAAE,OAAO,CAAC;KACrB,GACD;QACE,IAAI,EAAE,aAAa,CAAC,OAAO,CAAC;QAC5B,IAAI,EAAE,UAAU,CAAC;QACjB,WAAW,EAAE,OAAO,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;QAC9C,UAAU,EAAE,OAAO,CAAC;KACrB,GACD,IAAI,CAAC;CACV"}

package/lib/typescript/commonjs/src/ui/Xenon.d.ts

@@ -1,18 +1,15 @@
-import { type NamedExoticComponent } from 'react';
-interface XenonComponentMethods {
-    isVisible(): boolean;
-    show(): void;
-    hide(): void;
+declare namespace Xenon {
+    interface Props {
+        autoInspectNetworkEnabled?: boolean;
+        autoInspectConsoleEnabled?: boolean;
+        bubbleSize?: number;
+        idleBubbleOpacity?: number;
+    }
+    export const isVisible: () => boolean;
+    export const show: () => void;
+    export const hide: () => void;
+    export const Component: import("react").MemoExoticComponent<({ autoInspectNetworkEnabled, autoInspectConsoleEnabled, bubbleSize, idleBubbleOpacity, }: Props) => import("react/jsx-runtime").JSX.Element>;
+    export {};
 }
-interface XenonComponentProps {
-    autoInspectNetworkEnabled?: boolean;
-    autoInspectConsoleEnabled?: boolean;
-    bubbleSize?: number;
-    idleBubbleOpacity?: number;
-}
-interface ReactNativeXenon extends XenonComponentMethods {
-    Component: NamedExoticComponent<XenonComponentProps>;
-}
-declare const Xenon: ReactNativeXenon;
 export default Xenon;
 //# sourceMappingURL=Xenon.d.ts.map

package/lib/typescript/commonjs/src/ui/Xenon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Xenon.d.ts","sourceRoot":"","sources":["../../../../../src/ui/Xenon.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,oBAAoB,EAC1B,MAAM,OAAO,CAAC;AAYf,UAAU,qBAAqB;IAC7B,SAAS,IAAI,OAAO,CAAC;IACrB,IAAI,IAAI,IAAI,CAAC;IACb,IAAI,IAAI,IAAI,CAAC;CACd;AAED,UAAU,mBAAmB;IAC3B,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,UAAU,gBAAiB,SAAQ,qBAAqB;IACtD,SAAS,EAAE,oBAAoB,CAAC,mBAAmB,CAAC,CAAC;CACtD;AAwHD,QAAA,MAAM,KAAK,EAAE,gBAWZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Xenon.d.ts","sourceRoot":"","sources":["../../../../../src/ui/Xenon.tsx"],"names":[],"mappings":"AAYA,kBAAU,KAAK,CAAC;IAOd,UAAU,KAAK;QACb,yBAAyB,CAAC,EAAE,OAAO,CAAC;QACpC,yBAAyB,CAAC,EAAE,OAAO,CAAC;QACpC,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;KAC5B;IA2GD,MAAM,CAAC,MAAM,SAAS,eAA0C,CAAC;IACjE,MAAM,CAAC,MAAM,IAAI,QAAO,IAA2B,CAAC;IACpD,MAAM,CAAC,MAAM,IAAI,QAAO,IAA2B,CAAC;IAEpD,MAAM,CAAC,MAAM,SAAS,iIAtFnB,KAAK,6CAsF+B,CAAC;;CAEzC;AAED,eAAe,KAAK,CAAC"}

package/lib/typescript/commonjs/src/ui/components/details/DetailsViewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DetailsViewer.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/details/DetailsViewer.tsx"],"names":[],"mappings":"AAKA,MAAM,CAAC,OAAO,UAAU,aAAa,mDAWpC"}
+{"version":3,"file":"DetailsViewer.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/details/DetailsViewer.tsx"],"names":[],"mappings":"AAMA,MAAM,CAAC,OAAO,UAAU,aAAa,mDAYpC"}

package/lib/typescript/commonjs/src/ui/components/details/NetworkRequestDetails.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NetworkRequestDetails.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/details/NetworkRequestDetails.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,WAAW,EAEhB,KAAK,gBAAgB,EACtB,MAAM,gBAAgB,CAAC;AAWxB,UAAU,0BAA0B;IAClC,IAAI,EAAE,WAAW,GAAG,gBAAgB,CAAC;CACtC;AAED,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAAE,IAAI,EAAE,EAAE,0BAA0B,2CAgHjF"}
+{"version":3,"file":"NetworkRequestDetails.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/details/NetworkRequestDetails.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAkB,KAAK,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGzF,UAAU,0BAA0B;IAClC,IAAI,EAAE,WAAW,GAAG,gBAAgB,CAAC;CACtC;AAED,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAAE,IAAI,EAAE,EAAE,0BAA0B,2CAiIjF"}

package/lib/typescript/commonjs/src/ui/components/headers/DebuggerHeader.d.ts

@@ -1,6 +1,2 @@
-interface DebuggerHeaderProps {
-    detailsShown: boolean;
-}
-export default function DebuggerHeader({ detailsShown }: DebuggerHeaderProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export default function DebuggerHeader(): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DebuggerHeader.d.ts.map

package/lib/typescript/commonjs/src/ui/components/headers/DebuggerHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DebuggerHeader.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/headers/DebuggerHeader.tsx"],"names":[],"mappings":"AAQA,UAAU,mBAAmB;IAC3B,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,YAAY,EAAE,EAAE,mBAAmB,2CAuG3E"}
+{"version":3,"file":"DebuggerHeader.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/headers/DebuggerHeader.tsx"],"names":[],"mappings":"AASA,MAAM,CAAC,OAAO,UAAU,cAAc,4CAsNrC"}

package/lib/typescript/commonjs/src/ui/components/items/DebuggerHeaderItem.d.ts

@@ -3,8 +3,9 @@ interface DebuggerHeaderItemProps {
     content?: ImageRequireSource | string;
     isLabel?: boolean;
     isActive?: boolean;
+    activeColor?: string;
     onPress: () => void;
 }
-export default function DebuggerHeaderItem({ content, isLabel, isActive, onPress, }: DebuggerHeaderItemProps): import("react/jsx-runtime").JSX.Element;
+export default function DebuggerHeaderItem({ content, isLabel, isActive, activeColor, onPress, }: DebuggerHeaderItemProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=DebuggerHeaderItem.d.ts.map

package/lib/typescript/commonjs/src/ui/components/items/DebuggerHeaderItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DebuggerHeaderItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/items/DebuggerHeaderItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6C,KAAK,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGlG,UAAU,uBAAuB;IAC/B,OAAO,CAAC,EAAE,kBAAkB,GAAG,MAAM,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,GACR,EAAE,uBAAuB,2CAuBzB"}
+{"version":3,"file":"DebuggerHeaderItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/items/DebuggerHeaderItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6C,KAAK,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGlG,UAAU,uBAAuB;IAC/B,OAAO,CAAC,EAAE,kBAAkB,GAAG,MAAM,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,OAAO,EACP,OAAO,EACP,QAAQ,EACR,WAAwB,EACxB,OAAO,GACR,EAAE,uBAAuB,2CAuBzB"}

package/lib/typescript/commonjs/src/ui/components/panels/ConsolePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConsolePanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/panels/ConsolePanel.tsx"],"names":[],"mappings":"AAUA,MAAM,CAAC,OAAO,UAAU,YAAY,4CA+BnC"}
+{"version":3,"file":"ConsolePanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/panels/ConsolePanel.tsx"],"names":[],"mappings":"AASA,MAAM,CAAC,OAAO,UAAU,YAAY,4CAoCnC"}

package/lib/typescript/commonjs/src/ui/components/panels/NetworkPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NetworkPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/panels/NetworkPanel.tsx"],"names":[],"mappings":"AAWA,MAAM,CAAC,OAAO,UAAU,YAAY,4CAuCnC"}
+{"version":3,"file":"NetworkPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/panels/NetworkPanel.tsx"],"names":[],"mappings":"AAgBA,MAAM,CAAC,OAAO,UAAU,YAAY,4CA4CnC"}

package/lib/typescript/module/src/contexts/MainContext.d.ts

@@ -5,7 +5,7 @@ interface MainContextValue {
     debuggerState: DebuggerState;
     setDebuggerState: Updater<DebuggerState>;
     networkInterceptor: ReturnType<typeof useNetworkInterceptor>;
-    logInterceptor: ReturnType<typeof useConsoleInterceptor>;
+    consoleInterceptor: ReturnType<typeof useConsoleInterceptor>;
 }
 declare const MainContext: import("react").Context<MainContextValue | null>;
 export default MainContext;

package/lib/typescript/module/src/contexts/MainContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MainContext.d.ts","sourceRoot":"","sources":["../../../../../src/contexts/MainContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,KAAK,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAC7E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,UAAU,gBAAgB;IACxB,aAAa,EAAE,aAAa,CAAC;IAC7B,gBAAgB,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACzC,kBAAkB,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;IAC7D,cAAc,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;CAC1D;AAED,QAAA,MAAM,WAAW,kDAA+C,CAAC;AAEjE,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MainContext.d.ts","sourceRoot":"","sources":["../../../../../src/contexts/MainContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,KAAK,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAC7E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,UAAU,gBAAgB;IACxB,aAAa,EAAE,aAAa,CAAC;IAC7B,gBAAgB,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACzC,kBAAkB,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;IAC7D,kBAAkB,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;CAC9D;AAED,QAAA,MAAM,WAAW,kDAA+C,CAAC;AAEjE,eAAe,WAAW,CAAC"}

package/lib/typescript/module/src/core/utils.d.ts

@@ -1,13 +1,23 @@
-import type { HttpRequest } from '../types';
+import { type HttpRequest, type WebSocketRequest } from '../types';
+export declare const getNetworkUtils: (data: HttpRequest | WebSocketRequest) => {
+    isHttp: boolean;
+    requestUrl: URL;
+    overviewShown: boolean;
+    headersShown: boolean;
+    requestShown: boolean;
+    responseShown: boolean;
+    messagesShown: boolean;
+};
 export declare const getVerticalSafeMargin: (screenHeight: number) => number;
-export declare const limitChar: (value: any, limit?: number) => string;
-export declare const getHttpInterceptorId: () => string;
 export declare const clamp: (value: number, min: number, max: number) => number;
-export declare const keyValueToString: (key: string, value: any) => string;
+export declare const getHttpInterceptorId: () => string;
+export declare const limitChar: (value: any, limit?: number) => string;
+export declare const keyValueToString: (key: string, value: any, newLine?: "leading" | "trailing" | null) => string;
 export declare const formatRequestMethod: (method?: string) => string;
 export declare const formatRequestDuration: (duration?: number) => string;
 export declare const formatRequestStatusCode: (statusCode?: number) => string;
 export declare const formatLogMessage: (type: string, values: any[]) => string;
+export declare const beautify: (data: any, beautified: boolean) => string;
 export declare const convertToCurl: (method: HttpRequest["method"], url: HttpRequest["url"], headers: HttpRequest["requestHeaders"], body: HttpRequest["body"]) => string;
 export declare function frozen(_target: Object): void;
 export declare function singleton<T extends {

package/lib/typescript/module/src/core/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/core/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,eAAO,MAAM,qBAAqB,iBAAkB,MAAM,WAAqB,CAAC;AAEhF,eAAO,MAAM,SAAS,UAAW,GAAG,2BAMnC,CAAC;AAEF,eAAO,MAAM,oBAAoB,cAIhC,CAAC;AAEF,eAAO,MAAM,KAAK,UAAW,MAAM,OAAO,MAAM,OAAO,MAAM,WACxB,CAAC;AAEtC,eAAO,MAAM,gBAAgB,QAAS,MAAM,SAAS,GAAG,KAAG,MAC1B,CAAC;AAElC,eAAO,MAAM,mBAAmB,YAAa,MAAM,WAAoB,CAAC;AAExE,eAAO,MAAM,qBAAqB,cAAe,MAAM,WACf,CAAC;AAEzC,eAAO,MAAM,uBAAuB,gBAAiB,MAAM,WAAiC,CAAC;AAE7F,eAAO,MAAM,gBAAgB,SAAU,MAAM,UAAU,GAAG,EAAE,WAQ3D,CAAC;AAEF,eAAO,MAAM,aAAa,WAChB,WAAW,CAAC,QAAQ,CAAC,OACxB,WAAW,CAAC,KAAK,CAAC,WACd,WAAW,CAAC,gBAAgB,CAAC,QAChC,WAAW,CAAC,MAAM,CAAC,WAgB1B,CAAC;AAEF,wBAAgB,MAAM,CAAC,OAAO,EAAE,MAAM,QAIrC;AAED,wBAAgB,SAAS,CAAC,CAAC,SAAS;IAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA;CAAE,EAAE,WAAW,EAAE,CAAC;kBAIvD,GAAG,EAAE;;MAS7B"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/core/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEhF,eAAO,MAAM,eAAe,SAAU,WAAW,GAAG,gBAAgB;;;;;;;;CAmBnE,CAAC;AAGF,eAAO,MAAM,qBAAqB,iBAAkB,MAAM,WAAqB,CAAC;AAEhF,eAAO,MAAM,KAAK,UAAW,MAAM,OAAO,MAAM,OAAO,MAAM,WACxB,CAAC;AAEtC,eAAO,MAAM,oBAAoB,cAIhC,CAAC;AAIF,eAAO,MAAM,SAAS,UAAW,GAAG,2BAMnC,CAAC;AAEF,eAAO,MAAM,gBAAgB,QACtB,MAAM,SACJ,GAAG,YACD,SAAS,GAAG,UAAU,GAAG,IAAI,KACrC,MACqG,CAAC;AAEzG,eAAO,MAAM,mBAAmB,YAAa,MAAM,WAAoB,CAAC;AAExE,eAAO,MAAM,qBAAqB,cAAe,MAAM,WACf,CAAC;AAEzC,eAAO,MAAM,uBAAuB,gBAAiB,MAAM,WAAiC,CAAC;AAE7F,eAAO,MAAM,gBAAgB,SAAU,MAAM,UAAU,GAAG,EAAE,WAO3D,CAAC;AAEF,eAAO,MAAM,QAAQ,SAAU,GAAG,cAAc,OAAO,WAOtD,CAAC;AAEF,eAAO,MAAM,aAAa,WAChB,WAAW,CAAC,QAAQ,CAAC,OACxB,WAAW,CAAC,KAAK,CAAC,WACd,WAAW,CAAC,gBAAgB,CAAC,QAChC,WAAW,CAAC,MAAM,CAAC,WAgB1B,CAAC;AAIF,wBAAgB,MAAM,CAAC,OAAO,EAAE,MAAM,QAIrC;AAED,wBAAgB,SAAS,CAAC,CAAC,SAAS;IAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA;CAAE,EAAE,WAAW,EAAE,CAAC;kBAIvD,GAAG,EAAE;;MAS7B"}

package/lib/typescript/module/src/hooks/useNetworkInterceptor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useNetworkInterceptor.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useNetworkInterceptor.ts"],"names":[],"mappings":"AAcA,UAAU,wBAAwB;IAChC,WAAW,EAAE,OAAO,CAAC;CACtB;AAUD,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAAE,WAAW,EAAE,EAAE,wBAAwB;;;;;;EA+OtF"}
+{"version":3,"file":"useNetworkInterceptor.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useNetworkInterceptor.ts"],"names":[],"mappings":"AAcA,UAAU,wBAAwB;IAChC,WAAW,EAAE,OAAO,CAAC;CACtB;AAUD,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAAE,WAAW,EAAE,EAAE,wBAAwB;;;;;;EA4PtF"}

package/lib/typescript/module/src/interceptors/FetchInterceptor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FetchInterceptor.d.ts","sourceRoot":"","sources":["../../../../../src/interceptors/FetchInterceptor.ts"],"names":[],"mappings":"AASA,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAKhD,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,eAAe;IAE3D,kBAAkB;IA+GlB,mBAAmB;CASpB"}
+{"version":3,"file":"FetchInterceptor.d.ts","sourceRoot":"","sources":["../../../../../src/interceptors/FetchInterceptor.ts"],"names":[],"mappings":"AASA,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAKhD,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,eAAe;IAE3D,kBAAkB;IAmHlB,mBAAmB;CASpB"}

package/lib/typescript/module/src/theme/colors.d.ts

@@ -1,6 +1,7 @@
 declare const colors: Readonly<{
     black: "#000000";
     red: "#ef4444";
+    green: "#22c55e";
     gray: "#888888";
     lightGray: "#AAAAAA";
 }>;

package/lib/typescript/module/src/theme/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../../../src/theme/colors.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,MAAM;;;;;EAKV,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../../../src/theme/colors.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,MAAM;;;;;;EAMV,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/lib/typescript/module/src/theme/icons.d.ts

@@ -4,6 +4,9 @@ declare const icons: Readonly<{
     hide: any;
     move: any;
     record: any;
+    share: any;
+    arrowLeft: any;
+    beautify: any;
 }>;
 export default icons;
 //# sourceMappingURL=icons.d.ts.map

package/lib/typescript/module/src/theme/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../../../src/theme/icons.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,KAAK;;;;;;EAMT,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../../../src/theme/icons.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,KAAK;;;;;;;;;EAST,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/lib/typescript/module/src/types/common.d.ts

@@ -1,3 +1,4 @@
+import type { HttpRequest, LogMessage, WebSocketRequest } from '.';
 export declare enum NetworkType {
     XHR = "xhr",
     Fetch = "fetch",
@@ -14,10 +15,21 @@ export interface NetworkRequest {
     status?: number;
     duration?: number;
 }
-export type NetworkTab = 'headers' | 'queryStringParameters' | 'body' | 'response' | 'messages';
+export type DetailTab = 'overview' | 'headers' | 'request' | 'response' | 'messages' | 'logMessage';
 export interface DebuggerState {
     visibility: 'hidden' | 'bubble' | 'panel';
     position: 'top' | 'bottom';
     selectedPanel: DebuggerPanel | null;
+    detailsData: {
+        type: DebuggerPanel.Network;
+        data: HttpRequest | WebSocketRequest;
+        selectedTab: Exclude<DetailTab, 'logMessage'>;
+        beautified: boolean;
+    } | {
+        type: DebuggerPanel.Console;
+        data: LogMessage;
+        selectedTab: Extract<DetailTab, 'logMessage'>;
+        beautified: boolean;
+    } | null;
 }
 //# sourceMappingURL=common.d.ts.map

package/lib/typescript/module/src/types/common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../../src/types/common.ts"],"names":[],"mappings":"AAAA,oBAAY,WAAW;IACrB,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,EAAE,OAAO;CACV;AAED,oBAAY,aAAa;IACvB,OAAO,YAAY;IACnB,OAAO,YAAY;CACpB;AAED,MAAM,MAAM,WAAW,GAAG,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC;AAElD,MAAM,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,CAAC;AAEpC,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,uBAAuB,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;AAEhG,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC1C,QAAQ,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC3B,aAAa,EAAE,aAAa,GAAG,IAAI,CAAC;CACrC"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../../src/types/common.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,GAAG,CAAC;AAEnE,oBAAY,WAAW;IACrB,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,EAAE,OAAO;CACV;AAED,oBAAY,aAAa;IACvB,OAAO,YAAY;IACnB,OAAO,YAAY;CACpB;AAED,MAAM,MAAM,WAAW,GAAG,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC;AAElD,MAAM,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,CAAC;AAEpC,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,YAAY,CAAC;AAEpG,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC1C,QAAQ,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC3B,aAAa,EAAE,aAAa,GAAG,IAAI,CAAC;IACpC,WAAW,EACP;QACE,IAAI,EAAE,aAAa,CAAC,OAAO,CAAC;QAC5B,IAAI,EAAE,WAAW,GAAG,gBAAgB,CAAC;QACrC,WAAW,EAAE,OAAO,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;QAC9C,UAAU,EAAE,OAAO,CAAC;KACrB,GACD;QACE,IAAI,EAAE,aAAa,CAAC,OAAO,CAAC;QAC5B,IAAI,EAAE,UAAU,CAAC;QACjB,WAAW,EAAE,OAAO,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;QAC9C,UAAU,EAAE,OAAO,CAAC;KACrB,GACD,IAAI,CAAC;CACV"}

package/lib/typescript/module/src/ui/Xenon.d.ts

@@ -1,18 +1,15 @@
-import { type NamedExoticComponent } from 'react';
-interface XenonComponentMethods {
-    isVisible(): boolean;
-    show(): void;
-    hide(): void;
+declare namespace Xenon {
+    interface Props {
+        autoInspectNetworkEnabled?: boolean;
+        autoInspectConsoleEnabled?: boolean;
+        bubbleSize?: number;
+        idleBubbleOpacity?: number;
+    }
+    export const isVisible: () => boolean;
+    export const show: () => void;
+    export const hide: () => void;
+    export const Component: import("react").MemoExoticComponent<({ autoInspectNetworkEnabled, autoInspectConsoleEnabled, bubbleSize, idleBubbleOpacity, }: Props) => import("react/jsx-runtime").JSX.Element>;
+    export {};
 }
-interface XenonComponentProps {
-    autoInspectNetworkEnabled?: boolean;
-    autoInspectConsoleEnabled?: boolean;
-    bubbleSize?: number;
-    idleBubbleOpacity?: number;
-}
-interface ReactNativeXenon extends XenonComponentMethods {
-    Component: NamedExoticComponent<XenonComponentProps>;
-}
-declare const Xenon: ReactNativeXenon;
 export default Xenon;
 //# sourceMappingURL=Xenon.d.ts.map

package/lib/typescript/module/src/ui/Xenon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Xenon.d.ts","sourceRoot":"","sources":["../../../../../src/ui/Xenon.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,oBAAoB,EAC1B,MAAM,OAAO,CAAC;AAYf,UAAU,qBAAqB;IAC7B,SAAS,IAAI,OAAO,CAAC;IACrB,IAAI,IAAI,IAAI,CAAC;IACb,IAAI,IAAI,IAAI,CAAC;CACd;AAED,UAAU,mBAAmB;IAC3B,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,UAAU,gBAAiB,SAAQ,qBAAqB;IACtD,SAAS,EAAE,oBAAoB,CAAC,mBAAmB,CAAC,CAAC;CACtD;AAwHD,QAAA,MAAM,KAAK,EAAE,gBAWZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Xenon.d.ts","sourceRoot":"","sources":["../../../../../src/ui/Xenon.tsx"],"names":[],"mappings":"AAYA,kBAAU,KAAK,CAAC;IAOd,UAAU,KAAK;QACb,yBAAyB,CAAC,EAAE,OAAO,CAAC;QACpC,yBAAyB,CAAC,EAAE,OAAO,CAAC;QACpC,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;KAC5B;IA2GD,MAAM,CAAC,MAAM,SAAS,eAA0C,CAAC;IACjE,MAAM,CAAC,MAAM,IAAI,QAAO,IAA2B,CAAC;IACpD,MAAM,CAAC,MAAM,IAAI,QAAO,IAA2B,CAAC;IAEpD,MAAM,CAAC,MAAM,SAAS,iIAtFnB,KAAK,6CAsF+B,CAAC;;CAEzC;AAED,eAAe,KAAK,CAAC"}

package/lib/typescript/module/src/ui/components/details/DetailsViewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DetailsViewer.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/details/DetailsViewer.tsx"],"names":[],"mappings":"AAKA,MAAM,CAAC,OAAO,UAAU,aAAa,mDAWpC"}
+{"version":3,"file":"DetailsViewer.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/details/DetailsViewer.tsx"],"names":[],"mappings":"AAMA,MAAM,CAAC,OAAO,UAAU,aAAa,mDAYpC"}

package/lib/typescript/module/src/ui/components/details/NetworkRequestDetails.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NetworkRequestDetails.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/details/NetworkRequestDetails.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,WAAW,EAEhB,KAAK,gBAAgB,EACtB,MAAM,gBAAgB,CAAC;AAWxB,UAAU,0BAA0B;IAClC,IAAI,EAAE,WAAW,GAAG,gBAAgB,CAAC;CACtC;AAED,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAAE,IAAI,EAAE,EAAE,0BAA0B,2CAgHjF"}
+{"version":3,"file":"NetworkRequestDetails.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/details/NetworkRequestDetails.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAkB,KAAK,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGzF,UAAU,0BAA0B;IAClC,IAAI,EAAE,WAAW,GAAG,gBAAgB,CAAC;CACtC;AAED,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAAE,IAAI,EAAE,EAAE,0BAA0B,2CAiIjF"}

package/lib/typescript/module/src/ui/components/headers/DebuggerHeader.d.ts

@@ -1,6 +1,2 @@
-interface DebuggerHeaderProps {
-    detailsShown: boolean;
-}
-export default function DebuggerHeader({ detailsShown }: DebuggerHeaderProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export default function DebuggerHeader(): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DebuggerHeader.d.ts.map

package/lib/typescript/module/src/ui/components/headers/DebuggerHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DebuggerHeader.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/headers/DebuggerHeader.tsx"],"names":[],"mappings":"AAQA,UAAU,mBAAmB;IAC3B,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,YAAY,EAAE,EAAE,mBAAmB,2CAuG3E"}
+{"version":3,"file":"DebuggerHeader.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/headers/DebuggerHeader.tsx"],"names":[],"mappings":"AASA,MAAM,CAAC,OAAO,UAAU,cAAc,4CAsNrC"}

package/lib/typescript/module/src/ui/components/items/DebuggerHeaderItem.d.ts

@@ -3,8 +3,9 @@ interface DebuggerHeaderItemProps {
     content?: ImageRequireSource | string;
     isLabel?: boolean;
     isActive?: boolean;
+    activeColor?: string;
     onPress: () => void;
 }
-export default function DebuggerHeaderItem({ content, isLabel, isActive, onPress, }: DebuggerHeaderItemProps): import("react/jsx-runtime").JSX.Element;
+export default function DebuggerHeaderItem({ content, isLabel, isActive, activeColor, onPress, }: DebuggerHeaderItemProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=DebuggerHeaderItem.d.ts.map

package/lib/typescript/module/src/ui/components/items/DebuggerHeaderItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DebuggerHeaderItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/items/DebuggerHeaderItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6C,KAAK,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGlG,UAAU,uBAAuB;IAC/B,OAAO,CAAC,EAAE,kBAAkB,GAAG,MAAM,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,GACR,EAAE,uBAAuB,2CAuBzB"}
+{"version":3,"file":"DebuggerHeaderItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/items/DebuggerHeaderItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6C,KAAK,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGlG,UAAU,uBAAuB;IAC/B,OAAO,CAAC,EAAE,kBAAkB,GAAG,MAAM,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,OAAO,EACP,OAAO,EACP,QAAQ,EACR,WAAwB,EACxB,OAAO,GACR,EAAE,uBAAuB,2CAuBzB"}

package/lib/typescript/module/src/ui/components/panels/ConsolePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConsolePanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/panels/ConsolePanel.tsx"],"names":[],"mappings":"AAUA,MAAM,CAAC,OAAO,UAAU,YAAY,4CA+BnC"}
+{"version":3,"file":"ConsolePanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/panels/ConsolePanel.tsx"],"names":[],"mappings":"AASA,MAAM,CAAC,OAAO,UAAU,YAAY,4CAoCnC"}

package/lib/typescript/module/src/ui/components/panels/NetworkPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NetworkPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/panels/NetworkPanel.tsx"],"names":[],"mappings":"AAWA,MAAM,CAAC,OAAO,UAAU,YAAY,4CAuCnC"}
+{"version":3,"file":"NetworkPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/panels/NetworkPanel.tsx"],"names":[],"mappings":"AAgBA,MAAM,CAAC,OAAO,UAAU,YAAY,4CA4CnC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-xenon",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "A comprehensive tool for analyzing HTTP(S) requests and logs in React Native apps. Designed for use across all environments, it offers an intuitive interface for efficient debugging and issue resolution.",
   "source": "./src/index.ts",
   "main": "./lib/commonjs/index.js",

package/src/contexts/MainContext.ts

@@ -7,7 +7,7 @@ interface MainContextValue {
   debuggerState: DebuggerState;
   setDebuggerState: Updater<DebuggerState>;
   networkInterceptor: ReturnType<typeof useNetworkInterceptor>;
-  logInterceptor: ReturnType<typeof useConsoleInterceptor>;
+  consoleInterceptor: ReturnType<typeof useConsoleInterceptor>;
 }
 
 const MainContext = createContext<MainContextValue | null>(null);

package/src/core/utils.ts

@@ -1,26 +1,54 @@
-import type { HttpRequest } from '../types';
+import { NetworkType, type HttpRequest, type WebSocketRequest } from '../types';
+
+export const getNetworkUtils = (data: HttpRequest | WebSocketRequest) => {
+  const isHttp = data?.type !== NetworkType.WS;
+  const requestUrl = new URL(data.url);
+
+  const overviewShown = !!data.url;
+  const headersShown = isHttp && (!!data.requestHeaders || !!data.responseHeaders);
+  const requestShown = isHttp && (!!requestUrl.search || !!data.body);
+  const responseShown = isHttp && !!data.response;
+  const messagesShown = !isHttp && !!data.messages;
+
+  return {
+    isHttp,
+    requestUrl,
+    overviewShown,
+    headersShown,
+    requestShown,
+    responseShown,
+    messagesShown,
+  };
+};
 
+//#region metrics
 export const getVerticalSafeMargin = (screenHeight: number) => screenHeight / 8;
 
-export const limitChar = (value: any, limit = 5000) => {
-  const stringValue = typeof value === 'string' ? value : JSON.stringify(value ?? '');
-
-  return stringValue.length > limit
-    ? `${stringValue.slice(0, limit)}\n---LIMITED TO ${limit} CHARACTERS---`
-    : stringValue;
-};
+export const clamp = (value: number, min: number, max: number) =>
+  Math.max(min, Math.min(max, value));
 
 export const getHttpInterceptorId = () => {
   const timestamp = Date.now().toString(36);
   const randomNum = Math.random().toString(36).substring(2, 10);
   return timestamp + randomNum;
 };
+//#endregion
 
-export const clamp = (value: number, min: number, max: number) =>
-  Math.max(min, Math.min(max, value));
+//#region formatters
+export const limitChar = (value: any, limit = 5000) => {
+  const stringValue = typeof value === 'string' ? value : JSON.stringify(value ?? '');
 
-export const keyValueToString = (key: string, value: any): string =>
-  `${key}: ${limitChar(value)}\n`;
+  return stringValue.length > limit
+    ? `${stringValue.slice(0, limit)}\n---LIMITED TO ${limit} CHARACTERS---`
+    : stringValue;
+};
+
+export const keyValueToString = (
+  key: string,
+  value: any,
+  newLine: 'leading' | 'trailing' | null = 'trailing',
+): string =>
+  `${newLine === 'leading' ? '\n' : ''}${key}: ${limitChar(value)}${newLine === 'trailing' ? '\n' : ''}`;
 
 export const formatRequestMethod = (method?: string) => method ?? 'GET';
 
@@ -30,15 +58,23 @@ export const formatRequestDuration = (duration?: number) =>
 export const formatRequestStatusCode = (statusCode?: number) => `${statusCode ?? 'pending'}`;
 
 export const formatLogMessage = (type: string, values: any[]) => {
-  const message: string = values.reduce((pre, cur, index, array) => {
-    const isLastItem = index === array.length - 1;
-
-    return pre + limitChar(cur) + (isLastItem ? '' : ', ');
-  }, '');
+  const message: string = values.reduce(
+    (pre, cur, index) => pre + (!index ? '' : ', ') + limitChar(cur),
+    '',
+  );
 
   return `${type.toUpperCase()}: ${message}`;
 };
 
+export const beautify = (data: any, beautified: boolean) => {
+  try {
+    const res = typeof data === 'string' ? JSON.parse(data) : data;
+    return beautified ? JSON.stringify(res, null, 2) : limitChar(res);
+  } catch (error) {
+    return limitChar(data);
+  }
+};
+
 export const convertToCurl = (
   method: HttpRequest['method'],
   url: HttpRequest['url'],
@@ -60,7 +96,9 @@ export const convertToCurl = (
 
   return curlCommand;
 };
+//#endregion
 
+//#region decorators
 export function frozen(_target: Object) {
   const descriptor: PropertyDescriptor = arguments[2];
   descriptor.configurable = false;
@@ -81,3 +119,4 @@ export function singleton<T extends { new (...args: any[]): {} }>(constructor: T
 
   return Singleton;
 }
+//#endregion

package/src/hooks/useNetworkInterceptor.ts

@@ -53,10 +53,15 @@ export default function useNetworkInterceptor({ autoEnabled }: NetworkIntercepto
       setNetworkRequests((draft: NetworkRequests<HttpRequest>) => {
         if (!draft.get(id)) return draft;
 
-        const currentHeaderLine = keyValueToString(header, value);
+        const requestHeaderNewLine: Parameters<typeof keyValueToString>[2] = draft.get(id)!
+          .requestHeadersString?.length
+          ? 'leading'
+          : null;
+
+        const currentHeaderLine = keyValueToString(header, value, requestHeaderNewLine);
 
         const fetchRequestHeaderLineRegex = RegExp(
-          keyValueToString(NETWORK_REQUEST_HEADER, NetworkType.Fetch),
+          keyValueToString(NETWORK_REQUEST_HEADER, NetworkType.Fetch, requestHeaderNewLine),
           'gi',
         );
 
@@ -163,7 +168,11 @@ export default function useNetworkInterceptor({ autoEnabled }: NetworkIntercepto
         if (!draft.get(`${socketId}`)) return draft;
 
         draft.get(`${socketId}`)!.messages ??= '';
-        draft.get(`${socketId}`)!.messages += keyValueToString('SENT', data);
+        draft.get(`${socketId}`)!.messages += keyValueToString(
+          'SENT',
+          data,
+          draft.get(`${socketId}`)!.messages?.length ? 'leading' : null,
+        );
       });
     };
 
@@ -195,7 +204,11 @@ export default function useNetworkInterceptor({ autoEnabled }: NetworkIntercepto
         if (!draft.get(`${socketId}`)) return draft;
 
         draft.get(`${socketId}`)!.messages ??= '';
-        draft.get(`${socketId}`)!.messages += keyValueToString('RECEIVED', message);
+        draft.get(`${socketId}`)!.messages += keyValueToString(
+          'RECEIVED',
+          message,
+          draft.get(`${socketId}`)!.messages?.length ? 'leading' : null,
+        );
       });
     };
 

package/src/interceptors/FetchInterceptor.ts

@@ -97,7 +97,11 @@ export default class FetchInterceptor extends HttpInterceptor {
       let responseHeaders: string = '';
 
       for (const [headerKey, headerValue] of clonedResponseHeaders.entries()) {
-        responseHeaders += keyValueToString(headerKey, headerValue);
+        responseHeaders += keyValueToString(
+          headerKey,
+          headerValue,
+          responseHeaders.length ? 'leading' : null,
+        );
       }
 
       headerReceivedCallback?.(interceptionId, responseContentType, responseSize, responseHeaders);

package/src/theme/colors.ts

@@ -1,6 +1,7 @@
 const colors = Object.freeze({
   black: '#000000',
   red: '#ef4444',
+  green: '#22c55e',
   gray: '#888888',
   lightGray: '#AAAAAA',
 });

package/src/theme/icons.ts

@@ -4,6 +4,9 @@ const icons = Object.freeze({
   hide: require('../assets/icons/hide.png'),
   move: require('../assets/icons/move.png'),
   record: require('../assets/icons/record.png'),
+  share: require('../assets/icons/share.png'),
+  arrowLeft: require('../assets/icons/arrow-left.png'),
+  beautify: require('../assets/icons/beautify.png'),
 });
 
 export default icons;

package/src/types/common.ts

@@ -1,3 +1,5 @@
+import type { HttpRequest, LogMessage, WebSocketRequest } from '.';
+
 export enum NetworkType {
   XHR = 'xhr',
   Fetch = 'fetch',
@@ -19,10 +21,24 @@ export interface NetworkRequest {
   duration?: number;
 }
 
-export type NetworkTab = 'headers' | 'queryStringParameters' | 'body' | 'response' | 'messages';
+export type DetailTab = 'overview' | 'headers' | 'request' | 'response' | 'messages' | 'logMessage';
 
 export interface DebuggerState {
   visibility: 'hidden' | 'bubble' | 'panel';
   position: 'top' | 'bottom';
   selectedPanel: DebuggerPanel | null;
+  detailsData:
+    | {
+        type: DebuggerPanel.Network;
+        data: HttpRequest | WebSocketRequest;
+        selectedTab: Exclude<DetailTab, 'logMessage'>;
+        beautified: boolean;
+      }
+    | {
+        type: DebuggerPanel.Console;
+        data: LogMessage;
+        selectedTab: Extract<DetailTab, 'logMessage'>;
+        beautified: boolean;
+      }
+    | null;
 }