@digi-frontend/dgate-api-documentation 4.0.0-beta.3 → 4.0.0-beta.4

package/dist/index.mjs

@@ -3,16 +3,16 @@ import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Alert, Breadcrumb, Button, Card, Divider, Drawer, Empty, Flex, Form, Grid, Input, Modal, Pagination, Select, Switch, Table, Tabs, Tag, Tooltip, Tree, Typography, message, theme } from "antd";
-import { AppstoreOutlined, BarsOutlined, CheckCircleOutlined, DownOutlined, EditOutlined, ExclamationCircleFilled, EyeOutlined, InfoCircleOutlined, LeftOutlined, MinusSquareOutlined, PlusOutlined, PlusSquareOutlined, RightOutlined, SafetyOutlined, SearchOutlined, UpCircleOutlined } from "@ant-design/icons";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useStyleRegister } from "@ant-design/cssinjs";
-import Text from "antd/es/typography/Text";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import Text from "antd/es/typography/Text.js";
+import { AppstoreOutlined, BarsOutlined, CheckCircleOutlined, DownOutlined, EditOutlined, ExclamationCircleFilled, EyeOutlined, InfoCircleOutlined, LeftOutlined, MinusSquareOutlined, PlusOutlined, PlusSquareOutlined, RightOutlined, SafetyOutlined, SearchOutlined, UpCircleOutlined } from "@ant-design/icons";
 import { Resizable } from "re-resizable";
-import Title from "antd/es/typography/Title";
-import { nanoid } from "nanoid";
+import Title from "antd/es/typography/Title.js";
 import { Light } from "react-syntax-highlighter";
 import json from "react-syntax-highlighter/dist/esm/languages/hljs/json.js";
 import * as hljs from "react-syntax-highlighter/dist/esm/styles/hljs/index.js";
+import { nanoid } from "nanoid";
 //#region src/store/slices/view.ts
 const createViewSlice = (set) => ({ view: {
 	selectedNodeKey: null,
@@ -422,41 +422,41 @@ var token = {
 };
 //#endregion
 //#region src/view/helper/sidebar.utils.ts
-const methodColors = {
+const methodColors$1 = {
 	GET: {
-		bg: "transparent",
+		bg: token.colorPrimaryBgHover,
 		color: token.colorPrimary
 	},
 	POST: {
-		bg: "transparent",
+		bg: token["green.1"],
 		color: token.colorSuccess
 	},
 	DELETE: {
-		bg: "transparent",
+		bg: token.colorErrorBg,
 		color: token.colorError
 	},
 	PUT: {
-		bg: "transparent",
+		bg: token.colorWarningBg,
 		color: token.colorWarning
 	},
 	PATCH: {
-		bg: "transparent",
+		bg: token["volcano.1"],
 		color: token["volcano.5"]
 	},
 	OPTIONS: {
-		bg: "transparent",
+		bg: token["geekblue.2"],
 		color: token["geekblue.6"]
 	},
 	HEAD: {
-		bg: "transparent",
+		bg: token["purple.1"],
 		color: token["purple.5"]
 	},
 	TRACE: {
-		bg: "transparent",
-		color: token["volcano.4"]
+		bg: token["cyan.1"],
+		color: token["cyan.5"]
 	}
 };
-const darkerMethodColors = {
+const darkerMethodColors$1 = {
 	GET: {
 		bg: token.colorPrimary,
 		color: "#FFFFFF"
@@ -490,70 +490,18 @@ const darkerMethodColors = {
 		color: "#FFFFFF"
 	}
 };
-const sidebarMethodColors = {
-	GET: {
-		bg: token.colorPrimaryBgHover,
-		color: token.colorPrimary
-	},
-	POST: {
-		bg: token.colorSuccessBg,
-		color: token.colorSuccess
-	},
-	DELETE: {
-		bg: token.colorErrorBg,
-		color: token.colorError
-	},
-	PUT: {
-		bg: token.colorWarningBg,
-		color: token.colorWarning
-	},
-	PATCH: {
-		bg: token["volcano.1"],
-		color: token["volcano.5"]
-	},
-	OPTIONS: {
-		bg: token["geekblue.2"],
-		color: token["geekblue.6"]
-	},
-	HEAD: {
-		bg: token["purple.1"],
-		color: token["purple.5"]
-	},
-	TRACE: {
-		bg: token["volcano.1"],
-		color: token["volcano.4"]
-	}
-};
-const buildTreeDataStructure = (data) => {
+const buildTreeDataStructure$1 = (data) => {
 	if (!data) return [];
 	return data.map((api) => {
 		const tagEntries = Object.entries(api.tags);
-		const defaultTag = tagEntries.find(([tag]) => tag.toLowerCase() === "default");
-		const nonDefaultTags = tagEntries.filter(([tag]) => tag.toLowerCase() !== "default");
-		const defaultEndpoints = defaultTag ? defaultTag[1].map((endpoint) => ({
-			title: endpoint.summary,
-			key: endpoint.id,
-			isLeaf: true,
+		const hasOnlyDefaultTag = tagEntries.length === 1 && tagEntries[0][0] === "default";
+		return {
+			title: api.title,
+			key: api.id,
 			selectable: true,
-			method: endpoint.method,
-			data: {
-				endpoint,
-				api,
-				tagName: "default",
-				parentApiId: api.id
-			}
-		})) : [];
-		const tagNodes = nonDefaultTags.map(([tag, endpoints]) => {
-			const tagId = `tag-${api.id}-${tag.replace(/\s+/g, "-").toLowerCase()}`;
-			return {
-				title: tag,
-				key: tagId,
-				selectable: true,
-				data: {
-					tagName: tag,
-					apiData: api
-				},
-				children: endpoints.map((endpoint) => ({
+			data: api,
+			children: hasOnlyDefaultTag ? tagEntries[0][1].map((endpoint) => {
+				return {
 					title: endpoint.summary,
 					key: endpoint.id,
 					isLeaf: true,
@@ -562,19 +510,38 @@ const buildTreeDataStructure = (data) => {
 					data: {
 						endpoint,
 						api,
-						tagName: tag,
-						parentApiId: api.id,
-						tagId
+						tagName: "default",
+						parentApiId: api.id
 					}
-				}))
-			};
-		});
-		return {
-			title: api.title,
-			key: api.id,
-			selectable: true,
-			data: api,
-			children: [...tagNodes, ...defaultEndpoints]
+				};
+			}) : tagEntries.map(([tag, endpoints]) => {
+				const tagId = `tag-${api.id}-${tag.replace(/\s+/g, "-").toLowerCase()}`;
+				return {
+					title: tag,
+					key: tagId,
+					selectable: true,
+					data: {
+						tagName: tag,
+						apiData: api
+					},
+					children: endpoints.map((endpoint) => {
+						return {
+							title: endpoint.summary,
+							key: endpoint.id,
+							isLeaf: true,
+							selectable: true,
+							method: endpoint.method,
+							data: {
+								endpoint,
+								api,
+								tagName: tag,
+								parentApiId: api.id,
+								tagId
+							}
+						};
+					})
+				};
+			})
 		};
 	});
 };
@@ -588,7 +555,11 @@ const findNodeByKey = (nodes, targetKey) => {
 	}
 	return null;
 };
-const getAllTreeKeys = (data) => {
+const isApiSectionHighlighted = (apiKey, selectedEndpoint) => {
+	if (!selectedEndpoint) return false;
+	return selectedEndpoint.parentApiId === apiKey;
+};
+const getAllTreeKeys$1 = (data) => {
 	const keys = [];
 	const traverse = (nodes) => {
 		nodes.forEach((node) => {
@@ -599,7 +570,7 @@ const getAllTreeKeys = (data) => {
 	traverse(data);
 	return keys;
 };
-const filterTreeData = (data, searchText) => {
+const filterTreeData$1 = (data, searchText) => {
 	if (!searchText) return data;
 	const findOriginalNode = (nodes, key) => {
 		for (const node of nodes) {
@@ -632,12 +603,12 @@ const filterTreeData = (data, searchText) => {
 	};
 	return data.map((node) => filterNode(node)).filter((node) => node !== null);
 };
-const getSidebarStyles = (token, scope) => ({
+const getSidebarStyles$1 = (token, scope) => ({
 	[scope("sider")]: {
-		backgroundColor: token.colorBgElevated,
+		backgroundColor: token.colorBgContainer,
+		overflowY: "auto",
 		overflowX: "clip",
-		borderRadius: token.borderRadius,
-		height: "auto"
+		borderRadius: token.borderRadius
 	},
 	[scope("content")]: { padding: token.padding },
 	[scope("controls")]: {
@@ -648,15 +619,11 @@ const getSidebarStyles = (token, scope) => ({
 	[scope("search-input")]: { flex: 1 },
 	[scope("tree")]: {
 		backgroundColor: "transparent",
-		width: "100%",
-		"& .ant-tree-list": { width: "100%" },
-		"& .ant-tree-list-holder-inner": { width: "100%" },
 		"& .ant-tree-node-content-wrapper": {
 			overflow: "hidden",
-			flex: 1,
+			width: "100%",
 			display: "flex",
-			alignItems: "center",
-			padding: "0 !important"
+			alignItems: "center"
 		},
 		"& .ant-tree-title": {
 			width: "100%",
@@ -669,7 +636,7 @@ const getSidebarStyles = (token, scope) => ({
 			width: "100%",
 			padding: 0
 		},
-		"& .ant-tree-switcher": { backgroundColor: token.colorBgElevated }
+		"& .ant-tree-node-content-wrapper:hover": { backgroundColor: token.colorFillTertiary }
 	},
 	[scope("endpoint-item")]: {
 		display: "flex",
@@ -677,28 +644,16 @@ const getSidebarStyles = (token, scope) => ({
 		gap: token.marginXS,
 		width: "100%",
 		maxWidth: "100%",
-		minWidth: "100%",
-		paddingLeft: token.marginXS,
-		paddingRight: token.marginXS
+		minWidth: "100%"
 	},
 	[scope("method-tag")]: {
-		width: 51,
-		height: 16,
-		lineHeight: "16px",
-		fontSize: 12,
+		minWidth: "3.75rem",
 		textAlign: "center",
-		border: "none",
-		borderRadius: 6,
-		padding: "0 8px",
-		display: "inline-flex",
-		alignItems: "center",
-		justifyContent: "center"
+		border: "none"
 	},
 	[scope("endpoint-text")]: {
 		flex: 1,
 		maxWidth: "100%",
-		minWidth: 0,
-		overflow: "hidden",
 		display: "block"
 	},
 	[scope("tag-title")]: {
@@ -712,29 +667,27 @@ const getSidebarStyles = (token, scope) => ({
 		color: token.colorText,
 		maxWidth: "100%",
 		display: "block",
-		paddingLeft: "4px",
-		paddingRight: "4px",
-		margin: 0
+		padding: 0,
+		margin: 0,
+		"&.highlighted": { color: token.colorPrimary }
 	}
 });
 //#endregion
 //#region src/view/helper/sidebar.components.tsx
-const { Text: Text$1 } = Typography;
-const EndpointItem = ({ method, title, cx, isSelected = false }) => {
-	const methodStyle = (isSelected ? darkerMethodColors : sidebarMethodColors)[method];
-	const isPost = method?.toUpperCase() === "POST";
+const { Text: Text$2 } = Typography;
+const EndpointItem$1 = ({ method, title, cx, isSelected = false }) => {
+	const methodStyle = (isSelected ? darkerMethodColors$1 : methodColors$1)[method];
 	return /* @__PURE__ */ jsxs("div", {
-		className: `${cx("endpoint-item")}${isSelected ? ` ${cx("endpoint-item-selected")}` : ""}`,
+		className: cx("endpoint-item"),
 		children: [/* @__PURE__ */ jsx(Tag, {
 			className: cx("method-tag"),
 			style: {
 				backgroundColor: methodStyle?.bg,
 				color: methodStyle?.color,
-				border: "none",
-				...isPost ? { borderRadius: 4 } : {}
+				border: "none"
 			},
 			children: method
-		}), /* @__PURE__ */ jsx(Text$1, {
+		}), /* @__PURE__ */ jsx(Text$2, {
 			className: cx("endpoint-text"),
 			ellipsis: { tooltip: title },
 			style: { flex: 1 },
@@ -742,23 +695,25 @@ const EndpointItem = ({ method, title, cx, isSelected = false }) => {
 		})]
 	});
 };
-const convertToRenderableTreeData = (treeDataStructure, selectedEndpoint, cx) => {
+const convertToRenderableTreeData$1 = (treeDataStructure, selectedEndpoint, cx) => {
 	const renderNode = (node) => {
 		let title;
 		if (node.isLeaf && node.method) {
 			const isSelected = selectedEndpoint && "data" in node && node.data && "endpoint" in node.data ? node.data.endpoint?.id === selectedEndpoint?.id : false;
-			title = /* @__PURE__ */ jsx(EndpointItem, {
+			title = /* @__PURE__ */ jsx(EndpointItem$1, {
 				method: node.method,
 				title: typeof node.title === "string" ? node.title : "Endpoint Name",
 				cx,
 				isSelected
 			});
-		} else if (node.data && "id" in node.data && "tags" in node.data && !("endpoint" in node.data) && !("tagName" in node.data)) title = /* @__PURE__ */ jsx(Text$1, {
-			className: cx("api-title"),
-			ellipsis: { tooltip: typeof node.title === "string" ? node.title : "API Name" },
-			children: node.title
-		});
-		else title = /* @__PURE__ */ jsx(Text$1, {
+		} else if (node.data && "id" in node.data && "tags" in node.data && !("endpoint" in node.data) && !("tagName" in node.data)) {
+			const isHighlighted = isApiSectionHighlighted(node.key, selectedEndpoint);
+			title = /* @__PURE__ */ jsx(Text$2, {
+				className: cx("api-title") + (isHighlighted ? " highlighted" : ""),
+				ellipsis: { tooltip: typeof node.title === "string" ? node.title : "API Name" },
+				children: node.title
+			});
+		} else title = /* @__PURE__ */ jsx(Text$2, {
 			className: cx("tag-title"),
 			ellipsis: { tooltip: typeof node.title === "string" ? node.title : "" },
 			children: node.title
@@ -1062,17 +1017,15 @@ const NoDataIcon = ({ width = 298, height = 237, fill = "#F1F5FD", stroke = "#E0
 };
 //#endregion
 //#region src/view/components/Sidebar.tsx
-const { useBreakpoint: useBreakpoint$4 } = Grid;
-const Sidebar = ({ searchValue, setSearchValue, onNodeSelect }) => {
+const Sidebar$1 = ({ searchValue, setSearchValue }) => {
 	const expandedKeys = useStore((state) => state.view.expandedKeys);
 	const { selectedNodeKey, selectedEndpoint, builtTreeData, setExpandedKeys, setSelectedNodeKey } = useStore(({ view }) => view);
 	const { selectNodeByKey, clearSelection } = useNodeSelection();
 	const [autoExpandParent, setAutoExpandParent] = useState(true);
-	const isMobile = !useBreakpoint$4().md;
-	const { wrapSSR, cx, token } = useStyle("Sidebar", getSidebarStyles);
+	const { wrapSSR, cx, token } = useStyle("Sidebar", getSidebarStyles$1);
 	const handleSearch = (value) => {
 		if (value && builtTreeData) {
-			setExpandedKeys(getAllTreeKeys(builtTreeData));
+			setExpandedKeys(getAllTreeKeys$1(builtTreeData));
 			setSearchValue(value);
 			setAutoExpandParent(true);
 		} else {
@@ -1083,7 +1036,7 @@ const Sidebar = ({ searchValue, setSearchValue, onNodeSelect }) => {
 	};
 	const renderTreeData = useMemo(() => {
 		if (!builtTreeData) return [];
-		return convertToRenderableTreeData(builtTreeData, selectedEndpoint, cx);
+		return convertToRenderableTreeData$1(builtTreeData, selectedEndpoint, cx);
 	}, [
 		builtTreeData,
 		selectedEndpoint,
@@ -1092,7 +1045,7 @@ const Sidebar = ({ searchValue, setSearchValue, onNodeSelect }) => {
 	const filteredTreeData = useMemo(() => {
 		if (!searchValue) return renderTreeData;
 		if (!builtTreeData) return [];
-		return convertToRenderableTreeData(filterTreeData(builtTreeData, searchValue), selectedEndpoint, cx);
+		return convertToRenderableTreeData$1(filterTreeData$1(builtTreeData, searchValue), selectedEndpoint, cx);
 	}, [
 		builtTreeData,
 		searchValue,
@@ -1113,96 +1066,9 @@ const Sidebar = ({ searchValue, setSearchValue, onNodeSelect }) => {
 		selectNodeByKey(selectedKey);
 		setSelectedNodeKey(selectedKey);
 	};
-	const inner = /* @__PURE__ */ jsxs("div", {
-		className: cx("content"),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: cx("controls"),
-			children: [/* @__PURE__ */ jsx(Tooltip, {
-				title: "Search by APIs or Endpoints",
-				placement: "bottom",
-				children: /* @__PURE__ */ jsx(Input, {
-					placeholder: "Search by APIs or Endpoints",
-					value: searchValue,
-					onChange: (e) => handleSearch(e.target.value),
-					allowClear: true,
-					className: cx("search-input"),
-					addonAfter: /* @__PURE__ */ jsx(SearchOutlined, {})
-				})
-			}), /* @__PURE__ */ jsx(Tooltip, {
-				title: "Collapse All",
-				placement: "bottom",
-				children: /* @__PURE__ */ jsx(Button, {
-					onClick: collapseAll,
-					title: "Collapse All",
-					icon: /* @__PURE__ */ jsx(Minify, {})
-				})
-			})]
-		}), filteredTreeData?.length ? /* @__PURE__ */ jsx(Tree, {
-			showLine: { showLeafIcon: false },
-			showIcon: false,
-			switcherIcon: (nodeProps) => nodeProps.isLeaf ? null : nodeProps.expanded ? /* @__PURE__ */ jsx(MinusSquareOutlined, { style: { fontSize: 12 } }) : /* @__PURE__ */ jsx(PlusSquareOutlined, { style: { fontSize: 12 } }),
-			expandedKeys,
-			autoExpandParent,
-			selectedKeys: [selectedNodeKey || ""],
-			onSelect: (selectedKeys) => {
-				if (!selectedKeys?.length) return;
-				onTreeNodeSelect(selectedKeys);
-				setSelectedNodeKey(selectedKeys[0]);
-				onNodeSelect?.();
-			},
-			onExpand: (expandedKeysValue) => {
-				setExpandedKeys(expandedKeysValue);
-				setAutoExpandParent(false);
-			},
-			treeData: filteredTreeData,
-			className: cx("tree")
-		}) : /* @__PURE__ */ jsxs(Flex, {
-			justify: "center",
-			align: "center",
-			gap: token.marginSM,
-			vertical: true,
-			style: { marginTop: token.paddingXL },
-			children: [/* @__PURE__ */ jsx(NoDataIcon, {
-				stroke: token.colorPrimaryHover,
-				fill: token.colorPrimaryBg,
-				width: "10.375rem",
-				height: "8.1875rem"
-			}), searchValue.length ? /* @__PURE__ */ jsx(Text, {
-				style: {
-					textAlign: "center",
-					fontFamily: token.fontFamily,
-					fontWeight: 400,
-					fontSize: token.fontSizeLG,
-					color: token.colorTextTertiary
-				},
-				children: "No results found"
-			}) : /* @__PURE__ */ jsxs(Text, {
-				style: {
-					textAlign: "center",
-					fontFamily: token.fontFamily,
-					fontWeight: 400,
-					fontSize: token.fontSizeLG,
-					color: token.colorTextTertiary
-				},
-				children: [
-					"No API",
-					/* @__PURE__ */ jsx("br", {}),
-					"Documentation Found"
-				]
-			})]
-		})]
-	});
-	if (isMobile) return wrapSSR(/* @__PURE__ */ jsx("aside", {
-		className: cx("sider"),
-		style: {
-			width: "100%",
-			height: "100%"
-		},
-		children: inner
-	}));
 	return wrapSSR(/* @__PURE__ */ jsx(Resizable, {
 		as: "aside",
-		minWidth: isMobile ? 180 : 300,
+		minWidth: 300,
 		maxWidth: 386,
 		enable: {
 			top: false,
@@ -1215,15 +1081,91 @@ const Sidebar = ({ searchValue, setSearchValue, onNodeSelect }) => {
 			topLeft: false
 		},
 		defaultSize: {
-			width: isMobile ? 225 : 333,
-			height: "auto"
+			width: 333,
+			height: "100%"
 		},
 		className: cx("sider"),
-		children: inner
-	}));
-};
-//#endregion
-//#region src/assets/link.tsx
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cx("content"),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: cx("controls"),
+				children: [/* @__PURE__ */ jsx(Tooltip, {
+					title: "Search by APIs or Endpoints",
+					placement: "bottom",
+					children: /* @__PURE__ */ jsx(Input, {
+						placeholder: "Search by APIs or Endpoints",
+						value: searchValue,
+						onChange: (e) => handleSearch(e.target.value),
+						allowClear: true,
+						className: cx("search-input"),
+						addonAfter: /* @__PURE__ */ jsx(SearchOutlined, {})
+					})
+				}), /* @__PURE__ */ jsx(Tooltip, {
+					title: "Collapse All",
+					placement: "bottom",
+					children: /* @__PURE__ */ jsx(Button, {
+						onClick: collapseAll,
+						title: "Collapse All",
+						icon: /* @__PURE__ */ jsx(Minify, {})
+					})
+				})]
+			}), filteredTreeData?.length ? /* @__PURE__ */ jsx(Tree, {
+				showLine: { showLeafIcon: false },
+				showIcon: false,
+				expandedKeys,
+				autoExpandParent,
+				selectedKeys: [selectedNodeKey || ""],
+				onSelect: (selectedKeys) => {
+					if (!selectedKeys?.length) return;
+					onTreeNodeSelect(selectedKeys);
+					setSelectedNodeKey(selectedKeys[0]);
+				},
+				onExpand: (expandedKeysValue) => {
+					setExpandedKeys(expandedKeysValue);
+					setAutoExpandParent(false);
+				},
+				treeData: filteredTreeData,
+				className: cx("tree")
+			}) : /* @__PURE__ */ jsxs(Flex, {
+				justify: "center",
+				align: "center",
+				gap: token.marginSM,
+				vertical: true,
+				style: { marginTop: token.paddingXL },
+				children: [/* @__PURE__ */ jsx(NoDataIcon, {
+					stroke: token.colorPrimaryHover,
+					fill: token.colorPrimaryBg,
+					width: "10.375rem",
+					height: "8.1875rem"
+				}), searchValue.length ? /* @__PURE__ */ jsx(Text, {
+					style: {
+						textAlign: "center",
+						fontFamily: token.fontFamily,
+						fontWeight: 400,
+						fontSize: token.fontSizeLG,
+						color: "rgba(0,0,0,0.45)"
+					},
+					children: "No results found"
+				}) : /* @__PURE__ */ jsxs(Text, {
+					style: {
+						textAlign: "center",
+						fontFamily: token.fontFamily,
+						fontWeight: 400,
+						fontSize: token.fontSizeLG,
+						color: "rgba(0,0,0,0.45)"
+					},
+					children: [
+						"No API",
+						/* @__PURE__ */ jsx("br", {}),
+						"Documentation Found"
+					]
+				})]
+			})]
+		})
+	}));
+};
+//#endregion
+//#region src/assets/link.tsx
 const Link = (props) => /* @__PURE__ */ jsxs("svg", {
 	width: "12",
 	height: "12",
@@ -1373,7 +1315,7 @@ const ApiCard = ({ api, viewStyle }) => {
 		});
 	};
 	const MethodChip = ({ method }) => {
-		const methodStyle = methodColors[method];
+		const methodStyle = methodColors$1[method];
 		return /* @__PURE__ */ jsx("div", {
 			className: cx("method-chip"),
 			style: {
@@ -1760,8 +1702,8 @@ const handleStatusColor = (code) => {
 };
 //#endregion
 //#region src/view/components/EndpointPage/EndpointPage.tsx
-const { Title: Title$2, Paragraph } = Typography;
-const requestColumns = [
+const { Title: Title$3, Paragraph: Paragraph$1 } = Typography;
+const requestColumns$1 = [
 	{
 		title: "Parameter",
 		dataIndex: "param",
@@ -1778,8 +1720,8 @@ const requestColumns = [
 		key: "enum"
 	}
 ];
-const responseColumns = [...requestColumns];
-const buildRequestData = (params, token) => [...params].sort((a, b) => a.required === b.required ? 0 : a.required ? -1 : 1).map((p, index) => {
+const responseColumns$1 = [...requestColumns$1];
+const buildRequestData$1 = (params) => [...params].sort((a, b) => a.required === b.required ? 0 : a.required ? -1 : 1).map((p, index) => {
 	let typeLabel = p.schema?.type;
 	if (p.schema?.type === "array" && p.schema?.items?.type) typeLabel = `${p.schema.type}_${p.schema.items.type}`;
 	return {
@@ -1788,17 +1730,17 @@ const buildRequestData = (params, token) => [...params].sort((a, b) => a.require
 			p.name,
 			typeLabel && /* @__PURE__ */ jsx("span", {
 				style: {
-					color: token.colorTextTertiary,
+					color: "rgba(0,0,0,0.45)",
 					marginLeft: "0.25rem",
 					marginRight: "0.25rem"
 				},
 				children: typeLabel
 			}),
 			p.required ? /* @__PURE__ */ jsx("span", {
-				style: { color: token.colorError },
+				style: { color: "red" },
 				children: "*"
 			}) : /* @__PURE__ */ jsx("span", {
-				style: { color: token.colorSuccess },
+				style: { color: "#52C41A" },
 				children: "Optional"
 			})
 		] }),
@@ -1806,7 +1748,7 @@ const buildRequestData = (params, token) => [...params].sort((a, b) => a.require
 		enum: p.schema?.enum ? p.schema.enum.map((e) => /* @__PURE__ */ jsx(Tag, { children: e }, e)) : "--"
 	};
 });
-const buildHeaderData = (headers, token) => {
+const buildHeaderData$1 = (headers) => {
 	if (!headers) return [];
 	return Object.entries(headers).sort(([, a], [, b]) => a.required === b.required ? 0 : a.required ? -1 : 1).map(([name, header], idx) => {
 		let typeLabel = header.schema?.type;
@@ -1817,17 +1759,17 @@ const buildHeaderData = (headers, token) => {
 				name,
 				typeLabel && /* @__PURE__ */ jsx("span", {
 					style: {
-						color: token.colorTextTertiary,
+						color: "rgba(0,0,0,0.45)",
 						marginLeft: "0.25rem",
 						marginRight: "0.25rem"
 					},
 					children: typeLabel
 				}),
 				header.required ? /* @__PURE__ */ jsx("span", {
-					style: { color: token.colorError },
+					style: { color: "red" },
 					children: "*"
 				}) : /* @__PURE__ */ jsx("span", {
-					style: { color: token.colorSuccess },
+					style: { color: "#52C41A" },
 					children: "Optional"
 				})
 			] }, idx),
@@ -1836,41 +1778,10 @@ const buildHeaderData = (headers, token) => {
 		};
 	});
 };
-const buildRequestBodyData = (requestBody, token) => {
-	if (!requestBody?.content) return [];
-	const contentType = Object.keys(requestBody.content)[0];
-	const schema = requestBody.content[contentType]?.schema;
-	if (!schema) return [];
-	const properties = schema.properties ?? {};
-	const required = schema.required ?? [];
-	return Object.entries(properties).map(([name, prop], idx) => ({
-		key: idx,
-		param: /* @__PURE__ */ jsxs("span", { children: [
-			name,
-			prop.type && /* @__PURE__ */ jsx("span", {
-				style: {
-					color: token.colorTextTertiary,
-					marginLeft: "0.25rem",
-					marginRight: "0.25rem"
-				},
-				children: prop.type
-			}),
-			required.includes(name) ? /* @__PURE__ */ jsx("span", {
-				style: { color: token.colorError },
-				children: "*"
-			}) : /* @__PURE__ */ jsx("span", {
-				style: { color: token.colorSuccess },
-				children: "Optional"
-			})
-		] }),
-		desc: prop.description || "--",
-		enum: prop.enum ? prop.enum.map((e) => /* @__PURE__ */ jsx(Tag, { children: e }, e)) : "--"
-	}));
-};
-const EndpointPage = () => {
-	const { selectedEndpoint, selectedApi, selectedStatusCode, setSelectedNodeKey, setFocusedContent, setFocusedTag, setActiveRequestTab } = useStore(({ view }) => view);
-	const [activeTabKey, setActiveTabKey] = useState("header");
-	const { token } = theme.useToken();
+const EndpointPage$1 = () => {
+	const { selectedEndpoint, selectedApi, selectedStatusCode, setSelectedNodeKey, setFocusedContent, setFocusedTag } = useStore(({ view }) => view);
+	const [endpointTooltip, setEndpointTooltip] = useState("Copy endpoint");
+	const [selectedServer, setSelectedServer] = useState(0);
 	const { cx } = useStyle("EndpointPage", (token, scope) => ({
 		[scope("docs-endpoint-container")]: {
 			display: "flex",
@@ -1896,88 +1807,62 @@ const EndpointPage = () => {
 			marginBottom: token.marginLG
 		},
 		[scope("request-card")]: {
-			borderRadius: token.borderRadius,
-			backgroundColor: token.colorBgBase,
 			".ant-card-head": {
 				minHeight: "unset",
 				borderBottom: "unset",
-				padding: "0.75rem",
-				backgroundColor: token.colorBgBase
+				padding: "0.75rem"
 			},
 			".ant-card-body": {
 				padding: "0px 0.75rem 0.75rem 0.75rem",
-				backgroundColor: token.colorBgBase,
 				".ant-tabs-tab": { paddingTop: "0" }
-			},
-			"& .ant-table": { backgroundColor: `${token.colorBgBase} !important` },
-			"& .ant-table-thead > tr > th": { backgroundColor: `${token.colorBgBase} !important` },
-			"& .ant-table-tbody > tr > td": { backgroundColor: `${token.colorBgBase} !important` }
-		},
-		[scope("row-odd")]: { "& > td": { background: `${token.colorBgElevated} !important` } },
-		[scope("row-even")]: { "& > td": { background: `${token.colorBgLayout} !important` } }
+			}
+		}
 	}));
-	const methodStyle = sidebarMethodColors[selectedEndpoint?.method];
-	const headerParams = buildRequestData(selectedEndpoint?.parameters?.filter((p) => p.in === "header") || [], token);
-	const pathParams = buildRequestData(selectedEndpoint?.parameters?.filter((p) => p.in === "path") || [], token);
-	const queryParams = buildRequestData(selectedEndpoint?.parameters?.filter((p) => p.in === "query") || [], token);
-	const requestBodyData = buildRequestBodyData(selectedEndpoint?.requestBody, token);
+	const methodStyle = methodColors$1[selectedEndpoint?.method];
+	const headerParams = buildRequestData$1(selectedEndpoint?.parameters?.filter((p) => p.in === "header") || []);
+	const pathParams = buildRequestData$1(selectedEndpoint?.parameters?.filter((p) => p.in === "path") || []);
+	const queryParams = buildRequestData$1(selectedEndpoint?.parameters?.filter((p) => p.in === "query") || []);
 	const requestTabs = [
 		{
 			key: "header",
 			label: "Header",
 			children: /* @__PURE__ */ jsx(Table, {
-				columns: requestColumns,
+				columns: requestColumns$1,
 				dataSource: headerParams,
 				pagination: false,
 				bordered: true,
-				size: "small",
-				rowClassName: (_, idx) => cx(idx % 2 === 0 ? "row-even" : "row-odd")
+				size: "small"
 			})
 		},
 		{
 			key: "path",
 			label: "Path",
 			children: /* @__PURE__ */ jsx(Table, {
-				columns: requestColumns,
+				columns: requestColumns$1,
 				dataSource: pathParams,
 				pagination: false,
 				bordered: true,
-				size: "small",
-				rowClassName: (_, idx) => cx(idx % 2 === 0 ? "row-even" : "row-odd")
+				size: "small"
 			})
 		},
 		{
 			key: "query",
 			label: "Query",
 			children: /* @__PURE__ */ jsx(Table, {
-				columns: requestColumns,
+				columns: requestColumns$1,
 				dataSource: queryParams,
 				pagination: false,
 				bordered: true,
-				size: "small",
-				rowClassName: (_, idx) => cx(idx % 2 === 0 ? "row-even" : "row-odd")
-			})
-		},
-		...requestBodyData.length > 0 ? [{
-			key: "requestBody",
-			label: "Request Body",
-			children: /* @__PURE__ */ jsx(Table, {
-				columns: requestColumns,
-				dataSource: requestBodyData,
-				pagination: false,
-				bordered: true,
-				size: "small",
-				rowClassName: (_, idx) => cx(idx % 2 === 0 ? "row-even" : "row-odd")
+				size: "small"
 			})
-		}] : []
+		}
 	].filter((t) => t !== null);
-	useEffect(() => {
-		const firstKey = requestTabs[0]?.key ?? "header";
-		setActiveTabKey(firstKey);
-		setActiveRequestTab(firstKey);
-	}, [selectedEndpoint?.id]);
 	const responseHeaders = (selectedEndpoint?.responses?.[selectedStatusCode || 200])?.headers;
-	const responseHeaderData = buildHeaderData(responseHeaders, token);
+	const responseHeaderData = buildHeaderData$1(responseHeaders);
+	selectedApi?.servers?.map((server, index) => ({
+		value: index,
+		label: `${server.url}${selectedEndpoint?.path || ""}`
+	}));
 	return /* @__PURE__ */ jsx("div", {
 		className: cx("docs-endpoint-container"),
 		children: /* @__PURE__ */ jsxs("div", {
@@ -2017,61 +1902,42 @@ const EndpointPage = () => {
 									display: "flex",
 									flexDirection: "row",
 									alignItems: "center",
-									color: token.colorTextTertiary,
+									color: "rgba(0,0,0,0.45)",
 									gap: "0.25rem"
 								},
 								children: /* @__PURE__ */ jsx("span", { children: selectedEndpoint?.tagName || "default" })
 							})
 						},
-						{ title: /* @__PURE__ */ jsx(Tooltip, {
-							title: selectedEndpoint?.summary || "Endpoint Name",
-							children: /* @__PURE__ */ jsx("span", {
-								style: {
-									overflow: "hidden",
-									textOverflow: "ellipsis",
-									whiteSpace: "nowrap",
-									display: "block",
-									maxWidth: "300px"
-								},
-								children: selectedEndpoint?.summary || "Endpoint Name"
-							})
+						{ title: /* @__PURE__ */ jsx("span", {
+							style: {
+								display: "flex",
+								gap: "1rem"
+							},
+							children: selectedEndpoint?.summary || "Endpoint Name"
 						}) }
 					] })]
 				}),
-				/* @__PURE__ */ jsxs(Title$2, {
+				/* @__PURE__ */ jsxs(Title$3, {
 					level: 3,
-					style: {
-						display: "flex",
-						alignItems: "center",
-						gap: 12,
-						margin: 0
-					},
-					children: [/* @__PURE__ */ jsx(Tag, {
-						style: {
-							backgroundColor: methodStyle?.bg,
-							color: methodStyle?.color,
-							border: "none",
-							width: "4.375rem",
-							height: "1.375rem",
-							textAlign: "center",
-							flexShrink: 0
-						},
-						children: selectedEndpoint?.method
-					}), /* @__PURE__ */ jsx(Tooltip, {
-						title: selectedEndpoint?.summary ?? "--",
-						children: /* @__PURE__ */ jsx("span", {
+					children: [
+						/* @__PURE__ */ jsx(Tag, {
 							style: {
-								overflow: "hidden",
-								textOverflow: "ellipsis",
-								whiteSpace: "nowrap"
+								backgroundColor: methodStyle?.bg,
+								color: methodStyle?.color,
+								border: "none",
+								width: "4.375rem",
+								height: "1.375rem",
+								textAlign: "center"
 							},
-							children: selectedEndpoint?.summary?.replace(selectedEndpoint?.method, "") ?? "--"
-						})
-					})]
+							children: selectedEndpoint?.method
+						}),
+						" ",
+						selectedEndpoint?.summary?.replace(selectedEndpoint?.method, "") ?? "--"
+					]
 				}),
-				/* @__PURE__ */ jsx(Paragraph, {
+				/* @__PURE__ */ jsx(Paragraph$1, {
 					style: {
-						color: token.colorTextTertiary,
+						color: "rgba(0,0,0,0.45)",
 						marginBottom: "1.5rem"
 					},
 					children: selectedEndpoint?.description ?? "--"
@@ -2079,17 +1945,9 @@ const EndpointPage = () => {
 				requestTabs.length > 0 && /* @__PURE__ */ jsx(Card, {
 					title: "Request",
 					className: cx("request-card"),
-					style: {
-						marginBottom: "1.5rem",
-						backgroundColor: token.colorBgBase
-					},
-					styles: { body: { backgroundColor: token.colorBgBase } },
+					style: { marginBottom: "1.5rem" },
 					children: /* @__PURE__ */ jsx(Tabs, {
-						activeKey: activeTabKey,
-						onChange: (key) => {
-							setActiveTabKey(key);
-							setActiveRequestTab(key);
-						},
+						defaultActiveKey: requestTabs[0].key,
 						items: requestTabs
 					})
 				}),
@@ -2105,12 +1963,11 @@ const EndpointPage = () => {
 						marginRight: "0.5rem"
 					} }), /* @__PURE__ */ jsx("span", { children: selectedStatusCode })] }),
 					children: /* @__PURE__ */ jsx(Table, {
-						columns: responseColumns,
+						columns: responseColumns$1,
 						dataSource: responseHeaderData,
 						pagination: false,
 						bordered: true,
-						size: "small",
-						rowClassName: (_, idx) => cx(idx % 2 === 0 ? "row-even" : "row-odd")
+						size: "small"
 					})
 				})
 			]
@@ -2142,16 +1999,17 @@ const MouseSquare = (props) => /* @__PURE__ */ jsxs("svg", {
 });
 //#endregion
 //#region src/view/components/MainContent.tsx
-const MainContent = ({ searchEnabled, handleResetSearch, handleVisitLandingPage }) => {
+const MainContent$1 = ({ searchEnabled, handleResetSearch, handleVisitLandingPage }) => {
 	const { focusedContent, transformedData } = useStore(({ view }) => view);
 	const { wrapSSR, cx, token } = useStyle("MainContent", (token, scope) => ({
 		[scope("inner-doc-container")]: {
+			backgroundColor: token.colorBgContainer,
+			height: "100%",
 			width: "100%",
-			height: "auto",
+			maxHeight: "100%",
+			overflow: "auto",
 			borderRadius: token.borderRadius,
-			padding: token.paddingXL,
-			overflow: "hidden",
-			minWidth: 0
+			padding: token.paddingXL
 		},
 		[scope("centered")]: {
 			display: "flex",
@@ -2165,10 +2023,10 @@ const MainContent = ({ searchEnabled, handleResetSearch, handleVisitLandingPage
 			fontFamily: token.fontFamily,
 			fontWeight: 600,
 			fontSize: token.fontSizeHeading4,
-			color: token.colorText
+			color: "rgba(0, 0, 0, 0.88)"
 		},
 		[scope("text")]: {
-			color: token.colorText,
+			color: "rgba(0, 0, 0, 0.88)",
 			fontFamily: token.fontFamily
 		},
 		[scope("visit-landing-button")]: {
@@ -2186,7 +2044,6 @@ const MainContent = ({ searchEnabled, handleResetSearch, handleVisitLandingPage
 	}));
 	return wrapSSR(/* @__PURE__ */ jsx("div", {
 		className: cx("inner-doc-container", !transformedData?.length ? "centered" : ""),
-		style: { backgroundColor: focusedContent === "ENDPOINT" ? token.colorBgBase : token.colorBgElevated },
 		children: !transformedData?.length ? /* @__PURE__ */ jsxs(Flex, {
 			justify: "center",
 			align: "center",
@@ -2228,15 +2085,15 @@ const MainContent = ({ searchEnabled, handleResetSearch, handleVisitLandingPage
 					children: "Reset Search"
 				})
 			]
-		}) : focusedContent === "ENDPOINT" ? /* @__PURE__ */ jsx(EndpointPage, {}) : /* @__PURE__ */ jsx(APIPage, {})
+		}) : focusedContent === "ENDPOINT" ? /* @__PURE__ */ jsx(EndpointPage$1, {}) : /* @__PURE__ */ jsx(APIPage, {})
 	}));
 };
 //#endregion
 //#region src/view/components/ApiPage/components/ApiDocumentationBar.tsx
-const { useBreakpoint: useBreakpoint$3 } = Grid;
-const { Title: Title$1 } = Typography;
+const { useBreakpoint: useBreakpoint$4 } = Grid;
+const { Title: Title$2 } = Typography;
 const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, hasChanges = false, switcherNode }) => {
-	const isMobile = !useBreakpoint$3().md;
+	const isMobile = !useBreakpoint$4().md;
 	const { wrapSSR, cx, token } = useStyle("ApiDocumentationBar", (token, scope) => ({
 		[scope("root")]: {
 			display: "flex",
@@ -2347,7 +2204,7 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
 				className: cx("title-section"),
 				children: [/* @__PURE__ */ jsx(Tooltip, {
 					title: apiName,
-					children: /* @__PURE__ */ jsx(Title$1, {
+					children: /* @__PURE__ */ jsx(Title$2, {
 						level: 3,
 						ellipsis: true,
 						style: {
@@ -2385,7 +2242,7 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
 				className: cx("title-section"),
 				children: /* @__PURE__ */ jsx(Tooltip, {
 					title: `${apiName} API Documentation`,
-					children: /* @__PURE__ */ jsxs(Title$1, {
+					children: /* @__PURE__ */ jsxs(Title$2, {
 						level: 3,
 						style: {
 							margin: 0,
@@ -2439,9 +2296,9 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
 };
 //#endregion
 //#region src/view/components/ApiPage/components/GeneralSection.tsx
-const { useBreakpoint: useBreakpoint$2 } = Grid;
+const { useBreakpoint: useBreakpoint$3 } = Grid;
 const GeneralSection = ({ apiName, authType, version, description, onApiNameChange, onDescriptionChange, collapsed = false, onToggleCollapse, onChangeDetected }) => {
-	const isMobile = !useBreakpoint$2().md;
+	const isMobile = !useBreakpoint$3().md;
 	const { wrapSSR, cx, token } = useStyle("GeneralSection", (token, scope) => ({
 		[scope("root")]: {
 			display: "flex",
@@ -3309,7 +3166,7 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
 };
 //#endregion
 //#region src/view/components/ApiPage/components/EndpointsSection.tsx
-const { useBreakpoint: useBreakpoint$1 } = Grid;
+const { useBreakpoint: useBreakpoint$2 } = Grid;
 const PAGE_SIZE = 5;
 const getStatusCodeColor = (code, token) => {
 	const n = parseInt(code, 10);
@@ -3357,7 +3214,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 	const debouncedResponseSearches = useDebounce(responseSearches);
 	const { selectNodeByKey } = useNodeSelection();
 	const { token: antdToken } = theme.useToken();
-	const isMobile = !useBreakpoint$1().md;
+	const isMobile = !useBreakpoint$2().md;
 	const toggleRequestPanel = (epId) => {
 		setOpenRequestPanels((prev) => {
 			const next = new Set(prev);
@@ -4058,7 +3915,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 				className: cx("body"),
 				children: Object.values(endpointsByTag).flat().map((ep) => {
 					const isExpanded = expandedId === ep.id;
-					const methodColor = methodColors[ep.method];
+					const methodColor = methodColors$1[ep.method];
 					return /* @__PURE__ */ jsxs("div", { children: [
 						/* @__PURE__ */ jsxs("div", {
 							className: cx("endpoint-row"),
@@ -5216,9 +5073,9 @@ const UnsavedChangesBanner = ({ onClose }) => {
 };
 //#endregion
 //#region src/view/components/ApiPage/components/TagsSection.tsx
-const { useBreakpoint } = Grid;
+const { useBreakpoint: useBreakpoint$1 } = Grid;
 const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEditTag, onDeleteTag }) => {
-	const isMobile = !useBreakpoint().md;
+	const isMobile = !useBreakpoint$1().md;
 	const { wrapSSR, cx, token } = useStyle("TagsSection", (token, scope) => ({
 		[scope("root")]: {
 			display: "flex",
@@ -6016,89 +5873,923 @@ const AddTagDrawer = ({ open, onClose, mode, initialValues, onAddTag, onEditTag
 		})
 	] }));
 };
-//#endregion
-//#region src/view/helper/mutate.ts
-const resolveSchema = (schema, components) => {
-	if (!schema) return void 0;
-	if (!schema.$ref) return schema;
-	const refName = schema.$ref.split("/").pop();
-	const resolved = components?.schemas?.[refName];
-	if (!resolved) return schema;
-	return resolveSchema(resolved, components);
+token.colorPrimary, token.colorSuccess, token.colorError, token.colorWarning, token["volcano.5"], token["geekblue.6"], token["purple.5"], token["volcano.4"];
+const darkerMethodColors = {
+	GET: {
+		bg: token.colorPrimary,
+		color: "#FFFFFF"
+	},
+	POST: {
+		bg: token.colorSuccess,
+		color: "#FFFFFF"
+	},
+	DELETE: {
+		bg: token.colorError,
+		color: "#FFFFFF"
+	},
+	PUT: {
+		bg: token.colorWarning,
+		color: "#FFFFFF"
+	},
+	PATCH: {
+		bg: token["volcano.5"],
+		color: "#FFFFFF"
+	},
+	OPTIONS: {
+		bg: token["geekblue.6"],
+		color: "#FFFFFF"
+	},
+	HEAD: {
+		bg: token["purple.5"],
+		color: "#FFFFFF"
+	},
+	TRACE: {
+		bg: token["cyan.5"],
+		color: "#FFFFFF"
+	}
 };
-const transformOpenApiToDocs = (api) => {
-	const groupedPathsByTags = {};
-	const validTags = new Set(api?.tags?.map(({ name }) => name) || []);
-	const contextPath = Object.keys(api.paths)[0];
-	const relatedVersions = "x-related-versions" in api ? Object.entries(api["x-related-versions"]).map(([apiId, version]) => ({
-		apiId,
-		version
-	})) : [];
-	relatedVersions.unshift({
-		apiId: api["x-current-version"],
-		version: `${api.info.version}`
+const sidebarMethodColors = {
+	GET: {
+		bg: token.colorPrimaryBgHover,
+		color: token.colorPrimary
+	},
+	POST: {
+		bg: token.colorSuccessBg,
+		color: token.colorSuccess
+	},
+	DELETE: {
+		bg: token.colorErrorBg,
+		color: token.colorError
+	},
+	PUT: {
+		bg: token.colorWarningBg,
+		color: token.colorWarning
+	},
+	PATCH: {
+		bg: token["volcano.1"],
+		color: token["volcano.5"]
+	},
+	OPTIONS: {
+		bg: token["geekblue.2"],
+		color: token["geekblue.6"]
+	},
+	HEAD: {
+		bg: token["purple.1"],
+		color: token["purple.5"]
+	},
+	TRACE: {
+		bg: token["volcano.1"],
+		color: token["volcano.4"]
+	}
+};
+const buildTreeDataStructure = (data) => {
+	if (!data) return [];
+	return data.map((api) => {
+		const tagEntries = Object.entries(api.tags);
+		const defaultTag = tagEntries.find(([tag]) => tag.toLowerCase() === "default");
+		const nonDefaultTags = tagEntries.filter(([tag]) => tag.toLowerCase() !== "default");
+		const defaultEndpoints = defaultTag ? defaultTag[1].map((endpoint) => ({
+			title: endpoint.summary,
+			key: endpoint.id,
+			isLeaf: true,
+			selectable: true,
+			method: endpoint.method,
+			data: {
+				endpoint,
+				api,
+				tagName: "default",
+				parentApiId: api.id
+			}
+		})) : [];
+		const tagNodes = nonDefaultTags.map(([tag, endpoints]) => {
+			const tagId = `tag-${api.id}-${tag.replace(/\s+/g, "-").toLowerCase()}`;
+			return {
+				title: tag,
+				key: tagId,
+				selectable: true,
+				data: {
+					tagName: tag,
+					apiData: api
+				},
+				children: endpoints.map((endpoint) => ({
+					title: endpoint.summary,
+					key: endpoint.id,
+					isLeaf: true,
+					selectable: true,
+					method: endpoint.method,
+					data: {
+						endpoint,
+						api,
+						tagName: tag,
+						parentApiId: api.id,
+						tagId
+					}
+				}))
+			};
+		});
+		return {
+			title: api.title,
+			key: api.id,
+			selectable: true,
+			data: api,
+			children: [...tagNodes, ...defaultEndpoints]
+		};
+	});
+};
+const getAllTreeKeys = (data) => {
+	const keys = [];
+	const traverse = (nodes) => {
+		nodes.forEach((node) => {
+			keys.push(node.key);
+			if (node.children && node.children.length > 0) traverse(node.children);
+		});
+	};
+	traverse(data);
+	return keys;
+};
+const filterTreeData = (data, searchText) => {
+	if (!searchText) return data;
+	const findOriginalNode = (nodes, key) => {
+		for (const node of nodes) {
+			if (node.key === key) return node;
+			if (node.children) {
+				const found = findOriginalNode(node.children, key);
+				if (found) return found;
+			}
+		}
+		return null;
+	};
+	const filterNode = (node) => {
+		let titleText = "";
+		const originalNode = findOriginalNode(data, node.key);
+		if (originalNode && typeof originalNode.title === "string") titleText = originalNode.title;
+		else if (typeof node.title === "string") titleText = node.title;
+		let searchableText = titleText;
+		if (node.isLeaf && node.method) searchableText = `${node.method} ${titleText}`.toLowerCase();
+		else searchableText = titleText.toLowerCase();
+		const searchLower = searchText.toLowerCase();
+		const matchesSearch = searchableText.includes(searchLower);
+		if (node.children) {
+			const filteredChildren = node.children.map((child) => filterNode(child)).filter((child) => child !== null);
+			if (matchesSearch || filteredChildren.length > 0) return {
+				...node,
+				children: filteredChildren
+			};
+		} else if (matchesSearch) return node;
+		return null;
+	};
+	return data.map((node) => filterNode(node)).filter((node) => node !== null);
+};
+const getSidebarStyles = (token, scope) => ({
+	[scope("sider")]: {
+		backgroundColor: token.colorBgElevated,
+		overflowX: "clip",
+		borderRadius: token.borderRadius,
+		height: "auto"
+	},
+	[scope("content")]: { padding: token.padding },
+	[scope("controls")]: {
+		display: "flex",
+		gap: token.marginXS,
+		marginBottom: token.marginSM
+	},
+	[scope("search-input")]: { flex: 1 },
+	[scope("tree")]: {
+		backgroundColor: "transparent",
+		width: "100%",
+		"& .ant-tree-list": { width: "100%" },
+		"& .ant-tree-list-holder-inner": { width: "100%" },
+		"& .ant-tree-node-content-wrapper": {
+			overflow: "hidden",
+			flex: 1,
+			display: "flex",
+			alignItems: "center",
+			padding: "0 !important"
+		},
+		"& .ant-tree-title": {
+			width: "100%",
+			overflow: "hidden",
+			display: "flex",
+			alignItems: "center",
+			marginBlock: "auto"
+		},
+		"& .ant-tree-treenode": {
+			width: "100%",
+			padding: 0
+		},
+		"& .ant-tree-switcher": { backgroundColor: token.colorBgElevated }
+	},
+	[scope("endpoint-item")]: {
+		display: "flex",
+		alignItems: "center",
+		gap: token.marginXS,
+		width: "100%",
+		maxWidth: "100%",
+		minWidth: "100%",
+		paddingLeft: token.marginXS,
+		paddingRight: token.marginXS
+	},
+	[scope("method-tag")]: {
+		width: 51,
+		height: 16,
+		lineHeight: "16px",
+		fontSize: 12,
+		textAlign: "center",
+		border: "none",
+		borderRadius: 6,
+		padding: "0 8px",
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center"
+	},
+	[scope("endpoint-text")]: {
+		flex: 1,
+		maxWidth: "100%",
+		minWidth: 0,
+		overflow: "hidden",
+		display: "block"
+	},
+	[scope("tag-title")]: {
+		color: token.colorText,
+		maxWidth: "100%",
+		display: "block",
+		flex: 1
+	},
+	[scope("api-title")]: {
+		flex: 1,
+		color: token.colorText,
+		maxWidth: "100%",
+		display: "block",
+		paddingLeft: "4px",
+		paddingRight: "4px",
+		margin: 0
+	}
+});
+//#endregion
+//#region src/view/console/helper/sidebar.components.tsx
+const { Text: Text$1 } = Typography;
+const EndpointItem = ({ method, title, cx, isSelected = false }) => {
+	const methodStyle = (isSelected ? darkerMethodColors : sidebarMethodColors)[method];
+	const isPost = method?.toUpperCase() === "POST";
+	return /* @__PURE__ */ jsxs("div", {
+		className: `${cx("endpoint-item")}${isSelected ? ` ${cx("endpoint-item-selected")}` : ""}`,
+		children: [/* @__PURE__ */ jsx(Tag, {
+			className: cx("method-tag"),
+			style: {
+				backgroundColor: methodStyle?.bg,
+				color: methodStyle?.color,
+				border: "none",
+				...isPost ? { borderRadius: 4 } : {}
+			},
+			children: method
+		}), /* @__PURE__ */ jsx(Text$1, {
+			className: cx("endpoint-text"),
+			ellipsis: { tooltip: title },
+			style: { flex: 1 },
+			children: title
+		})]
+	});
+};
+const convertToRenderableTreeData = (treeDataStructure, selectedEndpoint, cx) => {
+	const renderNode = (node) => {
+		let title;
+		if (node.isLeaf && node.method) {
+			const isSelected = selectedEndpoint && "data" in node && node.data && "endpoint" in node.data ? node.data.endpoint?.id === selectedEndpoint?.id : false;
+			title = /* @__PURE__ */ jsx(EndpointItem, {
+				method: node.method,
+				title: typeof node.title === "string" ? node.title : "Endpoint Name",
+				cx,
+				isSelected
+			});
+		} else if (node.data && "id" in node.data && "tags" in node.data && !("endpoint" in node.data) && !("tagName" in node.data)) title = /* @__PURE__ */ jsx(Text$1, {
+			className: cx("api-title"),
+			ellipsis: { tooltip: typeof node.title === "string" ? node.title : "API Name" },
+			children: node.title
+		});
+		else title = /* @__PURE__ */ jsx(Text$1, {
+			className: cx("tag-title"),
+			ellipsis: { tooltip: typeof node.title === "string" ? node.title : "" },
+			children: node.title
+		});
+		return {
+			...node,
+			title,
+			children: node.children ? node.children.map(renderNode) : void 0
+		};
+	};
+	return treeDataStructure.map(renderNode);
+};
+//#endregion
+//#region src/view/console/Sidebar.tsx
+const { useBreakpoint } = Grid;
+const Sidebar = ({ searchValue, setSearchValue, onNodeSelect }) => {
+	const expandedKeys = useStore((state) => state.view.expandedKeys);
+	const { selectedNodeKey, selectedEndpoint, builtTreeData, setExpandedKeys, setSelectedNodeKey } = useStore(({ view }) => view);
+	const { selectNodeByKey, clearSelection } = useNodeSelection();
+	const [autoExpandParent, setAutoExpandParent] = useState(true);
+	const isMobile = !useBreakpoint().md;
+	const { wrapSSR, cx, token } = useStyle("Sidebar", getSidebarStyles);
+	const handleSearch = (value) => {
+		if (value && builtTreeData) {
+			setExpandedKeys(getAllTreeKeys(builtTreeData));
+			setSearchValue(value);
+			setAutoExpandParent(true);
+		} else {
+			setSearchValue(value);
+			setExpandedKeys([]);
+			setAutoExpandParent(false);
+		}
+	};
+	const renderTreeData = useMemo(() => {
+		if (!builtTreeData) return [];
+		return convertToRenderableTreeData(builtTreeData, selectedEndpoint, cx);
+	}, [
+		builtTreeData,
+		selectedEndpoint,
+		cx
+	]);
+	const filteredTreeData = useMemo(() => {
+		if (!searchValue) return renderTreeData;
+		if (!builtTreeData) return [];
+		return convertToRenderableTreeData(filterTreeData(builtTreeData, searchValue), selectedEndpoint, cx);
+	}, [
+		builtTreeData,
+		searchValue,
+		selectedEndpoint,
+		cx
+	]);
+	const collapseAll = () => {
+		setExpandedKeys([]);
+	};
+	const onTreeNodeSelect = (selectedKeys) => {
+		const stringKeys = selectedKeys.map((key) => String(key));
+		if (stringKeys.length === 0) {
+			clearSelection();
+			return;
+		}
+		if (!builtTreeData) return;
+		const selectedKey = stringKeys[0];
+		selectNodeByKey(selectedKey);
+		setSelectedNodeKey(selectedKey);
+	};
+	const inner = /* @__PURE__ */ jsxs("div", {
+		className: cx("content"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx("controls"),
+			children: [/* @__PURE__ */ jsx(Tooltip, {
+				title: "Search by APIs or Endpoints",
+				placement: "bottom",
+				children: /* @__PURE__ */ jsx(Input, {
+					placeholder: "Search by APIs or Endpoints",
+					value: searchValue,
+					onChange: (e) => handleSearch(e.target.value),
+					allowClear: true,
+					className: cx("search-input"),
+					addonAfter: /* @__PURE__ */ jsx(SearchOutlined, {})
+				})
+			}), /* @__PURE__ */ jsx(Tooltip, {
+				title: "Collapse All",
+				placement: "bottom",
+				children: /* @__PURE__ */ jsx(Button, {
+					onClick: collapseAll,
+					title: "Collapse All",
+					icon: /* @__PURE__ */ jsx(Minify, {})
+				})
+			})]
+		}), filteredTreeData?.length ? /* @__PURE__ */ jsx(Tree, {
+			showLine: { showLeafIcon: false },
+			showIcon: false,
+			switcherIcon: (nodeProps) => nodeProps.isLeaf ? null : nodeProps.expanded ? /* @__PURE__ */ jsx(MinusSquareOutlined, { style: { fontSize: 12 } }) : /* @__PURE__ */ jsx(PlusSquareOutlined, { style: { fontSize: 12 } }),
+			expandedKeys,
+			autoExpandParent,
+			selectedKeys: [selectedNodeKey || ""],
+			onSelect: (selectedKeys) => {
+				if (!selectedKeys?.length) return;
+				onTreeNodeSelect(selectedKeys);
+				setSelectedNodeKey(selectedKeys[0]);
+				onNodeSelect?.();
+			},
+			onExpand: (expandedKeysValue) => {
+				setExpandedKeys(expandedKeysValue);
+				setAutoExpandParent(false);
+			},
+			treeData: filteredTreeData,
+			className: cx("tree")
+		}) : /* @__PURE__ */ jsxs(Flex, {
+			justify: "center",
+			align: "center",
+			gap: token.marginSM,
+			vertical: true,
+			style: { marginTop: token.paddingXL },
+			children: [/* @__PURE__ */ jsx(NoDataIcon, {
+				stroke: token.colorPrimaryHover,
+				fill: token.colorPrimaryBg,
+				width: "10.375rem",
+				height: "8.1875rem"
+			}), searchValue.length ? /* @__PURE__ */ jsx(Text, {
+				style: {
+					textAlign: "center",
+					fontFamily: token.fontFamily,
+					fontWeight: 400,
+					fontSize: token.fontSizeLG,
+					color: token.colorTextTertiary
+				},
+				children: "No results found"
+			}) : /* @__PURE__ */ jsxs(Text, {
+				style: {
+					textAlign: "center",
+					fontFamily: token.fontFamily,
+					fontWeight: 400,
+					fontSize: token.fontSizeLG,
+					color: token.colorTextTertiary
+				},
+				children: [
+					"No API",
+					/* @__PURE__ */ jsx("br", {}),
+					"Documentation Found"
+				]
+			})]
+		})]
+	});
+	if (isMobile) return wrapSSR(/* @__PURE__ */ jsx("aside", {
+		className: cx("sider"),
+		style: {
+			width: "100%",
+			height: "100%"
+		},
+		children: inner
+	}));
+	return wrapSSR(/* @__PURE__ */ jsx(Resizable, {
+		as: "aside",
+		minWidth: isMobile ? 180 : 300,
+		maxWidth: 386,
+		enable: {
+			top: false,
+			right: true,
+			bottom: false,
+			left: false,
+			topRight: false,
+			bottomRight: false,
+			bottomLeft: false,
+			topLeft: false
+		},
+		defaultSize: {
+			width: isMobile ? 225 : 333,
+			height: "auto"
+		},
+		className: cx("sider"),
+		children: inner
+	}));
+};
+//#endregion
+//#region src/view/console/EndpointPage/EndpointPage.tsx
+const { Title: Title$1, Paragraph } = Typography;
+const requestColumns = [
+	{
+		title: "Parameter",
+		dataIndex: "param",
+		key: "param"
+	},
+	{
+		title: "Description",
+		dataIndex: "desc",
+		key: "desc"
+	},
+	{
+		title: "Enum",
+		dataIndex: "enum",
+		key: "enum"
+	}
+];
+const responseColumns = [...requestColumns];
+const buildRequestData = (params, token) => [...params].sort((a, b) => a.required === b.required ? 0 : a.required ? -1 : 1).map((p, index) => {
+	let typeLabel = p.schema?.type;
+	if (p.schema?.type === "array" && p.schema?.items?.type) typeLabel = `${p.schema.type}_${p.schema.items.type}`;
+	return {
+		key: index,
+		param: /* @__PURE__ */ jsxs("span", { children: [
+			p.name,
+			typeLabel && /* @__PURE__ */ jsx("span", {
+				style: {
+					color: token.colorTextTertiary,
+					marginLeft: "0.25rem",
+					marginRight: "0.25rem"
+				},
+				children: typeLabel
+			}),
+			p.required ? /* @__PURE__ */ jsx("span", {
+				style: { color: token.colorError },
+				children: "*"
+			}) : /* @__PURE__ */ jsx("span", {
+				style: { color: token.colorSuccess },
+				children: "Optional"
+			})
+		] }),
+		desc: p.description || "--",
+		enum: p.schema?.enum ? p.schema.enum.map((e) => /* @__PURE__ */ jsx(Tag, { children: e }, e)) : "--"
+	};
+});
+const buildHeaderData = (headers, token) => {
+	if (!headers) return [];
+	return Object.entries(headers).sort(([, a], [, b]) => a.required === b.required ? 0 : a.required ? -1 : 1).map(([name, header], idx) => {
+		let typeLabel = header.schema?.type;
+		if (header.schema?.type === "array" && header.schema?.items?.type) typeLabel = `${header.schema.type}_${header.schema.items.type}`;
+		return {
+			key: idx,
+			param: /* @__PURE__ */ jsxs("span", { children: [
+				name,
+				typeLabel && /* @__PURE__ */ jsx("span", {
+					style: {
+						color: token.colorTextTertiary,
+						marginLeft: "0.25rem",
+						marginRight: "0.25rem"
+					},
+					children: typeLabel
+				}),
+				header.required ? /* @__PURE__ */ jsx("span", {
+					style: { color: token.colorError },
+					children: "*"
+				}) : /* @__PURE__ */ jsx("span", {
+					style: { color: token.colorSuccess },
+					children: "Optional"
+				})
+			] }, idx),
+			desc: header.description || "--",
+			enum: header.schema?.enum ? header.schema.enum.map((e) => /* @__PURE__ */ jsx(Tag, { children: e }, e)) : "--"
+		};
+	});
+};
+const buildRequestBodyData = (requestBody, token) => {
+	if (!requestBody?.content) return [];
+	const contentType = Object.keys(requestBody.content)[0];
+	const schema = requestBody.content[contentType]?.schema;
+	if (!schema) return [];
+	const properties = schema.properties ?? {};
+	const required = schema.required ?? [];
+	return Object.entries(properties).map(([name, prop], idx) => ({
+		key: idx,
+		param: /* @__PURE__ */ jsxs("span", { children: [
+			name,
+			prop.type && /* @__PURE__ */ jsx("span", {
+				style: {
+					color: token.colorTextTertiary,
+					marginLeft: "0.25rem",
+					marginRight: "0.25rem"
+				},
+				children: prop.type
+			}),
+			required.includes(name) ? /* @__PURE__ */ jsx("span", {
+				style: { color: token.colorError },
+				children: "*"
+			}) : /* @__PURE__ */ jsx("span", {
+				style: { color: token.colorSuccess },
+				children: "Optional"
+			})
+		] }),
+		desc: prop.description || "--",
+		enum: prop.enum ? prop.enum.map((e) => /* @__PURE__ */ jsx(Tag, { children: e }, e)) : "--"
+	}));
+};
+const EndpointPage = () => {
+	const { selectedEndpoint, selectedApi, selectedStatusCode, setSelectedNodeKey, setFocusedContent, setFocusedTag, setActiveRequestTab } = useStore(({ view }) => view);
+	const [activeTabKey, setActiveTabKey] = useState("header");
+	const { token } = theme.useToken();
+	const { cx } = useStyle("EndpointPage", (token, scope) => ({
+		[scope("docs-endpoint-container")]: {
+			display: "flex",
+			flexDirection: "column",
+			gap: token.marginLG,
+			height: "100%"
+		},
+		[scope("content")]: {
+			width: "100%",
+			height: "100%"
+		},
+		[scope("code")]: {
+			background: "unset",
+			borderRadius: token.borderRadius,
+			padding: token.paddingSM,
+			fontFamily: "monospace",
+			whiteSpace: "pre-wrap"
+		},
+		[scope("breadcrumb")]: {
+			display: "flex",
+			gap: token.marginLG,
+			alignItems: "center",
+			marginBottom: token.marginLG
+		},
+		[scope("request-card")]: {
+			borderRadius: token.borderRadius,
+			backgroundColor: token.colorBgBase,
+			".ant-card-head": {
+				minHeight: "unset",
+				borderBottom: "unset",
+				padding: "0.75rem",
+				backgroundColor: token.colorBgBase
+			},
+			".ant-card-body": {
+				padding: "0px 0.75rem 0.75rem 0.75rem",
+				backgroundColor: token.colorBgBase,
+				".ant-tabs-tab": { paddingTop: "0" }
+			},
+			"& .ant-table": { backgroundColor: `${token.colorBgBase} !important` },
+			"& .ant-table-thead > tr > th": { backgroundColor: `${token.colorBgBase} !important` },
+			"& .ant-table-tbody > tr > td": { backgroundColor: `${token.colorBgBase} !important` }
+		},
+		[scope("row-odd")]: { "& > td": { background: `${token.colorBgElevated} !important` } },
+		[scope("row-even")]: { "& > td": { background: `${token.colorBgLayout} !important` } }
+	}));
+	const methodStyle = sidebarMethodColors[selectedEndpoint?.method];
+	const headerParams = buildRequestData(selectedEndpoint?.parameters?.filter((p) => p.in === "header") || [], token);
+	const pathParams = buildRequestData(selectedEndpoint?.parameters?.filter((p) => p.in === "path") || [], token);
+	const queryParams = buildRequestData(selectedEndpoint?.parameters?.filter((p) => p.in === "query") || [], token);
+	const requestBodyData = buildRequestBodyData(selectedEndpoint?.requestBody, token);
+	const requestTabs = [
+		{
+			key: "header",
+			label: "Header",
+			children: /* @__PURE__ */ jsx(Table, {
+				columns: requestColumns,
+				dataSource: headerParams,
+				pagination: false,
+				bordered: true,
+				size: "small",
+				rowClassName: (_, idx) => cx(idx % 2 === 0 ? "row-even" : "row-odd")
+			})
+		},
+		{
+			key: "path",
+			label: "Path",
+			children: /* @__PURE__ */ jsx(Table, {
+				columns: requestColumns,
+				dataSource: pathParams,
+				pagination: false,
+				bordered: true,
+				size: "small",
+				rowClassName: (_, idx) => cx(idx % 2 === 0 ? "row-even" : "row-odd")
+			})
+		},
+		{
+			key: "query",
+			label: "Query",
+			children: /* @__PURE__ */ jsx(Table, {
+				columns: requestColumns,
+				dataSource: queryParams,
+				pagination: false,
+				bordered: true,
+				size: "small",
+				rowClassName: (_, idx) => cx(idx % 2 === 0 ? "row-even" : "row-odd")
+			})
+		},
+		...requestBodyData.length > 0 ? [{
+			key: "requestBody",
+			label: "Request Body",
+			children: /* @__PURE__ */ jsx(Table, {
+				columns: requestColumns,
+				dataSource: requestBodyData,
+				pagination: false,
+				bordered: true,
+				size: "small",
+				rowClassName: (_, idx) => cx(idx % 2 === 0 ? "row-even" : "row-odd")
+			})
+		}] : []
+	].filter((t) => t !== null);
+	useEffect(() => {
+		const firstKey = requestTabs[0]?.key ?? "header";
+		setActiveTabKey(firstKey);
+		setActiveRequestTab(firstKey);
+	}, [selectedEndpoint?.id]);
+	const responseHeaders = (selectedEndpoint?.responses?.[selectedStatusCode || 200])?.headers;
+	const responseHeaderData = buildHeaderData(responseHeaders, token);
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("docs-endpoint-container"),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cx("content"),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: cx("breadcrumb"),
+					children: [/* @__PURE__ */ jsx(Button, {
+						color: "default",
+						variant: "outlined",
+						icon: /* @__PURE__ */ jsx(LeftOutlined, {}),
+						onClick: (e) => {
+							e.preventDefault();
+							setSelectedNodeKey(selectedApi?.id);
+							setFocusedContent("API");
+						}
+					}), /* @__PURE__ */ jsx(Breadcrumb, { items: [
+						{
+							href: "",
+							title: /* @__PURE__ */ jsx("span", { children: selectedApi?.title || "API Name" }),
+							onClick: (e) => {
+								e.preventDefault();
+								setSelectedNodeKey(selectedApi?.id);
+								setFocusedContent("API");
+							}
+						},
+						{
+							href: ``,
+							onClick: (e) => {
+								e.preventDefault();
+								setSelectedNodeKey(selectedApi?.id);
+								setFocusedContent("API");
+								setFocusedTag(selectedEndpoint?.tagName || "default");
+							},
+							title: /* @__PURE__ */ jsx("p", {
+								style: {
+									display: "flex",
+									flexDirection: "row",
+									alignItems: "center",
+									color: token.colorTextTertiary,
+									gap: "0.25rem"
+								},
+								children: /* @__PURE__ */ jsx("span", { children: selectedEndpoint?.tagName || "default" })
+							})
+						},
+						{ title: /* @__PURE__ */ jsx(Tooltip, {
+							title: selectedEndpoint?.summary || "Endpoint Name",
+							children: /* @__PURE__ */ jsx("span", {
+								style: {
+									overflow: "hidden",
+									textOverflow: "ellipsis",
+									whiteSpace: "nowrap",
+									display: "block",
+									maxWidth: "300px"
+								},
+								children: selectedEndpoint?.summary || "Endpoint Name"
+							})
+						}) }
+					] })]
+				}),
+				/* @__PURE__ */ jsxs(Title$1, {
+					level: 3,
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: 12,
+						margin: 0
+					},
+					children: [/* @__PURE__ */ jsx(Tag, {
+						style: {
+							backgroundColor: methodStyle?.bg,
+							color: methodStyle?.color,
+							border: "none",
+							width: "4.375rem",
+							height: "1.375rem",
+							textAlign: "center",
+							flexShrink: 0
+						},
+						children: selectedEndpoint?.method
+					}), /* @__PURE__ */ jsx(Tooltip, {
+						title: selectedEndpoint?.summary ?? "--",
+						children: /* @__PURE__ */ jsx("span", {
+							style: {
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								whiteSpace: "nowrap"
+							},
+							children: selectedEndpoint?.summary?.replace(selectedEndpoint?.method, "") ?? "--"
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsx(Paragraph, {
+					style: {
+						color: token.colorTextTertiary,
+						marginBottom: "1.5rem"
+					},
+					children: selectedEndpoint?.description ?? "--"
+				}),
+				requestTabs.length > 0 && /* @__PURE__ */ jsx(Card, {
+					title: "Request",
+					className: cx("request-card"),
+					style: {
+						marginBottom: "1.5rem",
+						backgroundColor: token.colorBgBase
+					},
+					styles: { body: { backgroundColor: token.colorBgBase } },
+					children: /* @__PURE__ */ jsx(Tabs, {
+						activeKey: activeTabKey,
+						onChange: (key) => {
+							setActiveTabKey(key);
+							setActiveRequestTab(key);
+						},
+						items: requestTabs
+					})
+				}),
+				/* @__PURE__ */ jsx(Card, {
+					title: "Response",
+					className: cx("request-card"),
+					extra: responseHeaderData.length > 0 && /* @__PURE__ */ jsxs(Tag, { children: [/* @__PURE__ */ jsx("span", { style: {
+						background: handleStatusColor(selectedStatusCode),
+						borderRadius: "50%",
+						display: "inline-block",
+						width: "0.5rem",
+						height: "0.5rem",
+						marginRight: "0.5rem"
+					} }), /* @__PURE__ */ jsx("span", { children: selectedStatusCode })] }),
+					children: /* @__PURE__ */ jsx(Table, {
+						columns: responseColumns,
+						dataSource: responseHeaderData,
+						pagination: false,
+						bordered: true,
+						size: "small",
+						rowClassName: (_, idx) => cx(idx % 2 === 0 ? "row-even" : "row-odd")
+					})
+				})
+			]
+		})
 	});
-	const currentVersion = "x-current-version" in api ? api["x-current-version"] : "";
-	const authScheme = api.components?.securitySchemes;
-	let authType;
-	if (authScheme && Object.keys(authScheme)?.[0]) {
-		authType = Object.keys(authScheme)[0];
-		if (authType && authType.toLowerCase() === "public") authType = "KEYLESS";
-		if (authType && (authType.toLowerCase() === "oauth" || authType.toLowerCase() === "oauth2")) authType = "OAUTH2";
-		authType = authType.toUpperCase();
-	} else authType = "x-auth-type" in api ? api["x-auth-type"] : "";
-	const curl = "x-curls" in api ? api["x-curls"] : "";
-	const jwsEnabled = api["x-jws-enabled"] === true;
-	for (const [path, methods] of Object.entries(api.paths)) for (const [method, methodData] of Object.entries(methods)) {
-		const entry = {
-			...methodData,
-			method: method?.toUpperCase(),
-			path
-		};
-		if (entry.requestBody?.content) {
-			const resolvedContent = {};
-			for (const [contentType, contentValue] of Object.entries(entry.requestBody.content)) resolvedContent[contentType] = { schema: resolveSchema(contentValue.schema, api.components) ?? contentValue.schema };
-			entry.requestBody = {
-				...entry.requestBody,
-				content: resolvedContent
-			};
-		}
-		const matchedTags = (methodData.tags ?? []).filter((tag) => validTags.has(tag));
-		if (matchedTags.length > 0) matchedTags.forEach((tag) => {
-			if (!groupedPathsByTags[tag]) groupedPathsByTags[tag] = [];
-			groupedPathsByTags[tag].push({
-				...entry,
-				id: `endpoint-${nanoid(8)}`
-			});
-		});
-		else {
-			if (!groupedPathsByTags.default) groupedPathsByTags.default = [];
-			groupedPathsByTags.default.push({
-				...entry,
-				id: `endpoint-${nanoid(8)}`
-			});
+};
+//#endregion
+//#region src/view/console/MainContent.tsx
+const MainContent = ({ searchEnabled, handleResetSearch, handleVisitLandingPage }) => {
+	const { focusedContent, transformedData } = useStore(({ view }) => view);
+	const { wrapSSR, cx, token } = useStyle("MainContent", (token, scope) => ({
+		[scope("inner-doc-container")]: {
+			width: "100%",
+			height: "auto",
+			borderRadius: token.borderRadius,
+			padding: token.paddingXL,
+			overflow: "hidden",
+			minWidth: 0
+		},
+		[scope("centered")]: {
+			display: "flex",
+			justifyContent: "center"
+		},
+		[scope("no-space")]: {
+			margin: 0,
+			padding: 0
+		},
+		[scope("title")]: {
+			fontFamily: token.fontFamily,
+			fontWeight: 600,
+			fontSize: token.fontSizeHeading4,
+			color: token.colorText
+		},
+		[scope("text")]: {
+			color: token.colorText,
+			fontFamily: token.fontFamily
+		},
+		[scope("visit-landing-button")]: {
+			width: "12.25rem",
+			height: "2.5rem",
+			borderRadius: token.borderRadiusLG
+		},
+		[scope("reset-button")]: {
+			width: "8.125rem",
+			height: "2.5rem",
+			borderRadius: token.borderRadiusLG,
+			backgroundColor: token?.Button?.primaryColor,
+			fontSize: token.Button?.contentFontSizeLG
 		}
-	}
-	const sortedGroupedPathsByTags = Object.keys(groupedPathsByTags).sort((a, b) => {
-		if (a === "default") return 1;
-		if (b === "default") return -1;
-		return a.localeCompare(b);
-	}).reduce((acc, key) => {
-		acc[key] = groupedPathsByTags[key];
-		return acc;
-	}, {});
-	return {
-		...api.info,
-		id: `api-${nanoid(8)}`,
-		contextPath,
-		tags: sortedGroupedPathsByTags,
-		servers: api.servers,
-		relatedVersions,
-		currentVersion,
-		authType,
-		jwsEnabled,
-		curl
-	};
+	}));
+	return wrapSSR(/* @__PURE__ */ jsx("div", {
+		className: cx("inner-doc-container", !transformedData?.length ? "centered" : ""),
+		style: { backgroundColor: focusedContent === "ENDPOINT" ? token.colorBgBase : token.colorBgElevated },
+		children: !transformedData?.length ? /* @__PURE__ */ jsxs(Flex, {
+			justify: "center",
+			align: "center",
+			gap: "1.5rem",
+			vertical: true,
+			flex: 1,
+			children: [
+				/* @__PURE__ */ jsx(NoDataIcon, {
+					stroke: token.colorPrimaryHover,
+					fill: token.colorPrimaryBg,
+					width: "18.625rem",
+					height: "14.75rem"
+				}),
+				/* @__PURE__ */ jsxs(Flex, {
+					justify: "center",
+					align: "center",
+					gap: "0.5rem",
+					vertical: true,
+					children: [/* @__PURE__ */ jsx(Title, {
+						className: cx("no-space", "title"),
+						level: 4,
+						children: !searchEnabled ? "No API Documentation Found" : "No results found"
+					}), /* @__PURE__ */ jsx(Text, {
+						className: cx("no-space", "text"),
+						children: !searchEnabled ? "No API Documentation has been added yet. Contact admin for support." : "Adjust your Search and try again"
+					})]
+				}),
+				!searchEnabled ? /* @__PURE__ */ jsx(Button, {
+					type: "primary",
+					onClick: handleVisitLandingPage,
+					icon: /* @__PURE__ */ jsx(MouseSquare, {}),
+					iconPosition: "start",
+					className: cx("visit-landing-button"),
+					children: "Visit Landing Page"
+				}) : /* @__PURE__ */ jsx(Button, {
+					type: "default",
+					className: cx("reset-button"),
+					onClick: handleResetSearch,
+					children: "Reset Search"
+				})
+			]
+		}) : focusedContent === "ENDPOINT" ? /* @__PURE__ */ jsx(EndpointPage, {}) : /* @__PURE__ */ jsx(APIPage, {})
+	}));
 };
 //#endregion
 //#region src/assets/copy.tsx
@@ -6118,9 +6809,9 @@ const Copy = (props) => /* @__PURE__ */ jsxs("svg", {
 	})]
 });
 //#endregion
-//#region src/view/components/EndpointPage/Codebox/Codebox.tsx
+//#region src/view/console/EndpointPage/Codebox/Codebox.tsx
 Light.registerLanguage("json", json);
-const Codebox = ({ code, language, wrapLongLines }) => {
+const Codebox$1 = ({ code, language, wrapLongLines }) => {
 	const [appTheme] = useState("DARK");
 	const { token, theme: themeConfig } = theme.useToken();
 	const bodyBg = themeConfig.id == 1 ? token.colorBgContainer : "#1d2856";
@@ -6153,8 +6844,8 @@ const Codebox = ({ code, language, wrapLongLines }) => {
 	});
 };
 //#endregion
-//#region src/view/components/CodeboxSidebar.tsx
-function CodeboxSidebar() {
+//#region src/view/console/CodeboxSidebar.tsx
+function CodeboxSidebar$1() {
 	const { selectedEndpoint, selectedApi, activeRequestTab, selectedStatusCode, statusCodeOptions, setSelectedStatusCode } = useStore(({ view }) => view);
 	const httpStatusOptions = useMemo(() => statusCodeOptions.map((code) => ({
 		value: code,
@@ -6194,14 +6885,14 @@ function CodeboxSidebar() {
 	const headerBg = isDark ? antdToken.colorBgElevated : "#1d2856";
 	const bodyBg = isDark ? antdToken.colorBgContainer : "#1d2856";
 	const codeTextColor = isDark ? "rgba(255,255,255,0.85)" : "#ffffff";
-	const { cx } = useStyle("CodeboxSidebar", (token$1, scope) => ({
+	const { cx } = useStyle("CodeboxSidebar", (token$2, scope) => ({
 		[scope("container")]: {
 			display: "flex",
 			flexDirection: "column",
-			gap: token$1.marginMD,
-			background: token$1.colorBgElevated,
-			borderRadius: token$1.borderRadiusLG,
-			padding: token$1.paddingLG,
+			gap: token$2.marginMD,
+			background: token$2.colorBgElevated,
+			borderRadius: token$2.borderRadiusLG,
+			padding: token$2.paddingLG,
 			height: "auto",
 			width: "23.625rem",
 			minWidth: "23.625rem",
@@ -6213,24 +6904,24 @@ function CodeboxSidebar() {
 			display: "flex",
 			flexDirection: "column",
 			backgroundColor: headerBg,
-			border: `1px solid ${token$1.colorBorder}`,
+			border: `1px solid ${token$2.colorBorder}`,
 			".CodeboxSidebar-copyButton": { ".isolated-btn-icon": { path: { fill: "white" } } },
 			".isolated-card-body": {
 				padding: " .125rem 0 0 0 !important",
 				borderTop: ".125rem solid #33419A"
 			},
 			".ant-card-head": { flex: "0 0 auto" },
-			borderRadius: token$1.borderRadius,
+			borderRadius: token$2.borderRadius,
 			overflow: "hidden"
 		},
 		[scope("rightCardRequest")]: { minHeight: "8.125rem" },
-		[scope("rightCardHeaderResponse")]: { padding: `0 ${token$1.margin}px ${token$1.marginXS}px ${token$1.margin}px` },
+		[scope("rightCardHeaderResponse")]: { padding: `0 ${token$2.margin}px ${token$2.marginXS}px ${token$2.margin}px` },
 		[scope("rightCardResponse")]: {
 			height: "fit-content",
 			overflow: "hidden",
 			".isolated-card-body": {
 				display: "flex",
-				padding: `0 ${token$1.margin}px`,
+				padding: `0 ${token$2.margin}px`,
 				flexDirection: "column",
 				alignItems: "flex-start",
 				gap: "10px",
@@ -6241,8 +6932,8 @@ function CodeboxSidebar() {
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "space-between",
-			padding: `${token$1.marginXS}px ${token$1.margin}px`,
-			borderBottom: `1px solid ${token$1.colorBorderSecondary}`,
+			padding: `${token$2.marginXS}px ${token$2.margin}px`,
+			borderBottom: `1px solid ${token$2.colorBorderSecondary}`,
 			height: "3.125rem",
 			backgroundColor: headerBg
 		},
@@ -6359,13 +7050,97 @@ function CodeboxSidebar() {
 					open: httpStatusOptions.length === 1 ? false : void 0,
 					suffixIcon: httpStatusOptions.length > 1 ? void 0 : false
 				})]
-			}), /* @__PURE__ */ jsx(Codebox, { code: JSON.stringify(selectedEndpoint?.responses[selectedStatusCode], null, 2) || "" })]
+			}), /* @__PURE__ */ jsx(Codebox$1, { code: JSON.stringify(selectedEndpoint?.responses[selectedStatusCode], null, 2) || "" })]
 		})]
 	});
-}
+}
+//#endregion
+//#region src/view/helper/mutate.ts
+const resolveSchema = (schema, components) => {
+	if (!schema) return void 0;
+	if (!schema.$ref) return schema;
+	const refName = schema.$ref.split("/").pop();
+	const resolved = components?.schemas?.[refName];
+	if (!resolved) return schema;
+	return resolveSchema(resolved, components);
+};
+const transformOpenApiToDocs = (api) => {
+	const groupedPathsByTags = {};
+	const validTags = new Set(api?.tags?.map(({ name }) => name) || []);
+	const contextPath = Object.keys(api.paths)[0];
+	const relatedVersions = "x-related-versions" in api ? Object.entries(api["x-related-versions"]).map(([apiId, version]) => ({
+		apiId,
+		version
+	})) : [];
+	relatedVersions.unshift({
+		apiId: api["x-current-version"],
+		version: `${api.info.version}`
+	});
+	const currentVersion = "x-current-version" in api ? api["x-current-version"] : "";
+	const authScheme = api.components?.securitySchemes;
+	let authType;
+	if (authScheme && Object.keys(authScheme)?.[0]) {
+		authType = Object.keys(authScheme)[0];
+		if (authType && authType.toLowerCase() === "public") authType = "KEYLESS";
+		if (authType && (authType.toLowerCase() === "oauth" || authType.toLowerCase() === "oauth2")) authType = "OAUTH2";
+		authType = authType.toUpperCase();
+	} else authType = "x-auth-type" in api ? api["x-auth-type"] : "";
+	const curl = "x-curls" in api ? api["x-curls"] : "";
+	const jwsEnabled = api["x-jws-enabled"] === true;
+	for (const [path, methods] of Object.entries(api.paths)) for (const [method, methodData] of Object.entries(methods)) {
+		const entry = {
+			...methodData,
+			method: method?.toUpperCase(),
+			path
+		};
+		if (entry.requestBody?.content) {
+			const resolvedContent = {};
+			for (const [contentType, contentValue] of Object.entries(entry.requestBody.content)) resolvedContent[contentType] = { schema: resolveSchema(contentValue.schema, api.components) ?? contentValue.schema };
+			entry.requestBody = {
+				...entry.requestBody,
+				content: resolvedContent
+			};
+		}
+		const matchedTags = (methodData.tags ?? []).filter((tag) => validTags.has(tag));
+		if (matchedTags.length > 0) matchedTags.forEach((tag) => {
+			if (!groupedPathsByTags[tag]) groupedPathsByTags[tag] = [];
+			groupedPathsByTags[tag].push({
+				...entry,
+				id: `endpoint-${nanoid(8)}`
+			});
+		});
+		else {
+			if (!groupedPathsByTags.default) groupedPathsByTags.default = [];
+			groupedPathsByTags.default.push({
+				...entry,
+				id: `endpoint-${nanoid(8)}`
+			});
+		}
+	}
+	const sortedGroupedPathsByTags = Object.keys(groupedPathsByTags).sort((a, b) => {
+		if (a === "default") return 1;
+		if (b === "default") return -1;
+		return a.localeCompare(b);
+	}).reduce((acc, key) => {
+		acc[key] = groupedPathsByTags[key];
+		return acc;
+	}, {});
+	return {
+		...api.info,
+		id: `api-${nanoid(8)}`,
+		contextPath,
+		tags: sortedGroupedPathsByTags,
+		servers: api.servers,
+		relatedVersions,
+		currentVersion,
+		authType,
+		jwsEnabled,
+		curl
+	};
+};
 //#endregion
 //#region src/view/layout.tsx
-const DocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPage, onSave }) => {
+const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPage, onSave }) => {
 	const [searchValue, setSearchValue] = useState("");
 	const [mode, setMode] = useState("edit");
 	const [hasChanges, setHasChanges] = useState(false);
@@ -7006,7 +7781,7 @@ const DocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPage, onS
 						handleResetSearch,
 						searchEnabled: !!searchValue
 					}),
-					!isMobile && focusedContent === "ENDPOINT" && /* @__PURE__ */ jsx(CodeboxSidebar, {})
+					!isMobile && focusedContent === "ENDPOINT" && /* @__PURE__ */ jsx(CodeboxSidebar$1, {})
 				]
 			}),
 			/* @__PURE__ */ jsx(AddTagDrawer, {
@@ -7107,8 +7882,234 @@ const DocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPage, onS
 	});
 };
 //#endregion
+//#region src/view/components/EndpointPage/Codebox/Codebox.tsx
+Light.registerLanguage("json", json);
+const Codebox = ({ code, language }) => {
+	const [theme] = useState("DARK");
+	const { cx } = useStyle("codeBox", (token, scope) => ({ [scope("codebox")]: {
+		borderRadius: token.borderRadius,
+		height: "100%",
+		maxHeight: "100%",
+		overflow: "auto",
+		pre: { height: "100%" }
+	} }));
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("codebox"),
+		children: /* @__PURE__ */ jsx(Light, {
+			language: language || "json",
+			style: theme === "LIGHT" ? hljs.stackoverflowLight : hljs.stackoverflowDark,
+			showLineNumbers: true,
+			wrapLines: true,
+			customStyle: {
+				margin: 0,
+				minHeight: "3rem",
+				overflowY: "auto",
+				padding: "0.75rem 1rem 0.75rem 1.5rem",
+				backgroundColor: theme === "DARK" ? "#20264B" : "#20264B",
+				fontSize: "0.75rem"
+			},
+			lineProps: { style: { fontFamily: "Cascadia Code, sans-serif" } },
+			children: code
+		})
+	});
+};
+//#endregion
+//#region src/view/components/CodeboxSidebar.tsx
+function CodeboxSidebar() {
+	const { selectedEndpoint, selectedStatusCode, statusCodeOptions, setSelectedStatusCode } = useStore(({ view }) => view);
+	const httpStatusOptions = useMemo(() => statusCodeOptions.map((code) => ({
+		value: code,
+		label: /* @__PURE__ */ jsxs("span", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: "0.5rem"
+			},
+			children: [/* @__PURE__ */ jsx("span", { style: {
+				background: handleStatusColor(code),
+				borderRadius: "50%",
+				display: "inline-block",
+				width: "0.5rem",
+				height: "0.5rem",
+				minWidth: "0.5rem",
+				minHeight: "0.5rem"
+			} }), code]
+		})
+	})), [statusCodeOptions]);
+	const { originalData } = useStore(({ view }) => view);
+	const [curlTooltip, setCurlTooltip] = useState("Copy Request");
+	const findCurlForEndpoint = () => {
+		if (!selectedEndpoint || !originalData) return "";
+		const api = originalData.find((apiData) => {
+			const paths = apiData.paths || {};
+			return Object.keys(paths).some((path) => {
+				const methods = paths[path] || {};
+				return Object.keys(methods).some((method) => {
+					const endpointMethod = method.toUpperCase();
+					return path === selectedEndpoint.path && endpointMethod === selectedEndpoint.method;
+				});
+			});
+		});
+		if (!api || !api["x-curls"]) return "";
+		const matchingCurls = api["x-curls"].filter((curlObj) => curlObj.path === selectedEndpoint.path && curlObj.method === selectedEndpoint.method);
+		const sdbCurl = matchingCurls.find((curl) => curl.serverUrl.includes("sdb") || curl.serverUrl.includes("SDB"));
+		return sdbCurl ? sdbCurl.curlCommand : matchingCurls[0]?.curlCommand || "";
+	};
+	const curlCommand = findCurlForEndpoint();
+	const formatCurlCommand = (cmd) => {
+		if (!cmd) return "";
+		return cmd.replace(/ -X /g, " \\\n  -X ").replace(/ -H /g, " \\\n  -H ").replace(/ -d /g, " \\\n  -d ").replace(/ (https?:\/\/[^\s'"]+)/g, " \\\n  $1");
+	};
+	const { cx } = useStyle("CodeboxSidebar", (token$1, scope) => ({
+		[scope("container")]: {
+			display: "flex",
+			flexDirection: "column",
+			gap: token$1.marginMD,
+			background: token$1.colorBgContainer,
+			borderRadius: token$1.borderRadiusLG,
+			padding: token$1.paddingLG,
+			overflow: "hidden",
+			height: "100%",
+			maxHeight: "100%",
+			width: "23.625rem",
+			minWidth: "23.625rem",
+			".ant-card-body": { padding: 0 },
+			".ant-card-head-title": { color: "white" },
+			".ant-card-head": { borderBottom: ".125rem solid #33419A" }
+		},
+		[scope("rightCard")]: {
+			display: "flex",
+			flexDirection: "column",
+			backgroundColor: "#20264B",
+			".CodeboxSidebar-copyButton": { ".isolated-btn-icon": { path: { fill: "white" } } },
+			".isolated-card-body": {
+				padding: " .125rem 0 0 0 !important",
+				borderTop: ".125rem solid #33419A"
+			},
+			".ant-card-head": { flex: "0 0 auto" },
+			borderRadius: token$1.borderRadius,
+			overflow: "hidden"
+		},
+		[scope("rightCardRequest")]: {
+			maxHeight: "50%",
+			minHeight: "8.125rem"
+		},
+		[scope("rightCardResponse")]: {
+			height: "fit-content",
+			overflow: "hidden"
+		},
+		[scope("rightCardHeader")]: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			padding: `${token$1.marginXS}px ${token$1.margin}px`,
+			borderBottom: ".125rem solid #33419A",
+			height: "3.125rem"
+		},
+		[scope("rightCardFlex")]: {
+			display: "flex",
+			flexDirection: "column",
+			height: "fit-content",
+			overflow: "auto",
+			backgroundColor: "#20264B",
+			".ant-card-head": { flex: "0 0 auto" },
+			".ant-card-body": {
+				flex: "1 1 auto",
+				overflowY: "auto",
+				padding: ".125rem 0 0 0 !important"
+			},
+			".isolated-card-body": {
+				padding: " .125rem 0 0 0 !important",
+				height: "fit-content",
+				overflow: "auto",
+				borderTop: ".125rem solid #33419A",
+				".codebox": {
+					height: "fit-content",
+					overflow: "auto"
+				}
+			}
+		},
+		[scope("customSelect")]: {
+			width: "5.5rem",
+			maxWidth: "5.5rem",
+			".ant-select-selector": {
+				backgroundColor: "#fff",
+				borderColor: "#fff",
+				borderRadius: ".375rem",
+				color: "#101010"
+			},
+			".ant-select-selection-item": {
+				color: "#101010",
+				fontWeight: 400
+			},
+			".ant-select-selection-placeholder": { color: "rgba(255, 255, 255, 0.65)" },
+			".ant-select-arrow": { color: "#101010" },
+			"&:hover .ant-select-selector": {
+				borderColor: `${token["brnadColor.7"]}`,
+				color: "white"
+			},
+			"&:focus .ant-select-selector, &.ant-select-focused .ant-select-selector": {
+				borderColor: `${token["brnadColor.7"]}`,
+				color: "white"
+			}
+		}
+	}));
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("container"),
+		children: [curlCommand && /* @__PURE__ */ jsxs("div", {
+			className: cx("rightCard", "rightCardRequest"),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: cx("rightCardHeader"),
+				children: [/* @__PURE__ */ jsx(Typography.Text, {
+					strong: true,
+					style: { color: "#fff" },
+					children: "Request"
+				}), /* @__PURE__ */ jsx(Tooltip, {
+					title: curlTooltip,
+					children: /* @__PURE__ */ jsx(Button, {
+						color: "default",
+						variant: "link",
+						className: cx("copyButton"),
+						onClick: () => {
+							const cleaned = curlCommand.replace(/\\"/g, "\"").replace(/\\\\/g, "\\");
+							navigator.clipboard.writeText(formatCurlCommand(cleaned));
+							setCurlTooltip("Copied!");
+							setTimeout(() => setCurlTooltip("Copy cURL"), 1500);
+						},
+						icon: /* @__PURE__ */ jsx(Copy, { style: { color: "white" } })
+					})
+				})]
+			}), /* @__PURE__ */ jsx(Codebox, {
+				language: "bash",
+				code: formatCurlCommand(curlCommand.replace(/\\"/g, "\"").replace(/\\\\/g, "\\"))
+			})]
+		}), selectedEndpoint?.responses && httpStatusOptions.length > 0 && /* @__PURE__ */ jsxs("div", {
+			className: cx("rightCard", "rightCardResponse"),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: cx("rightCardHeader", "rightCardHeaderResponse"),
+				children: [/* @__PURE__ */ jsx(Typography.Text, {
+					strong: true,
+					style: { color: "#fff" },
+					children: "Response"
+				}), /* @__PURE__ */ jsx(Select, {
+					defaultActiveFirstOption: true,
+					defaultValue: 200,
+					className: cx("customSelect"),
+					prefix: false,
+					style: { width: "100%" },
+					value: selectedStatusCode,
+					onChange: setSelectedStatusCode,
+					options: httpStatusOptions,
+					open: httpStatusOptions.length === 1 ? false : void 0,
+					suffixIcon: httpStatusOptions.length > 1 ? void 0 : false
+				})]
+			}), /* @__PURE__ */ jsx(Codebox, { code: JSON.stringify(selectedEndpoint?.responses[selectedStatusCode], null, 2) || "" })]
+		})]
+	});
+}
+//#endregion
 //#region src/view/devportal-layout.tsx
-const DevportalDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPage }) => {
+const DocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPage }) => {
 	const [searchValue, setSearchValue] = useState("");
 	const { focusedContent, selectedNodeKey, selectedApi, builtTreeData, setOriginalData, setTransformedData, setBuiltTreeData, setFocusedContent, setExpandedKeys } = useStore(({ view }) => view);
 	const { selectFirstApi, selectPreSelectedApi, clearSelection } = useNodeSelection();
@@ -7133,7 +8134,7 @@ const DevportalDocumentationLayout = ({ data, preSelectedApi, handleVisitLanding
 			setOriginalData(data);
 			const transformedData = data.map(transformOpenApiToDocs).sort((a, b) => a.title.localeCompare(b.title));
 			setTransformedData(transformedData);
-			setBuiltTreeData(buildTreeDataStructure(transformedData));
+			setBuiltTreeData(buildTreeDataStructure$1(transformedData));
 			hasInitializedRef.current = true;
 		}
 	}, [
@@ -7187,11 +8188,11 @@ const DevportalDocumentationLayout = ({ data, preSelectedApi, handleVisitLanding
 		children: /* @__PURE__ */ jsxs("div", {
 			className: cx("docs-layout"),
 			children: [
-				/* @__PURE__ */ jsx(Sidebar, {
+				/* @__PURE__ */ jsx(Sidebar$1, {
 					searchValue,
 					setSearchValue
 				}),
-				/* @__PURE__ */ jsx(MainContent, {
+				/* @__PURE__ */ jsx(MainContent$1, {
 					handleVisitLandingPage: _handleVisitLandingPage,
 					handleResetSearch,
 					searchEnabled: !!searchValue
@@ -7202,6 +8203,6 @@ const DevportalDocumentationLayout = ({ data, preSelectedApi, handleVisitLanding
 	});
 };
 //#endregion
-export { ApiDocumentationBar, DevportalDocumentationLayout, DocumentationLayout, useStore };
+export { ApiDocumentationBar, ConsoleDocumentationLayout, DocumentationLayout, useStore };
 
 //# sourceMappingURL=index.mjs.map