@digi-frontend/dgate-api-documentation 2.0.1-test.9 → 2.0.2

package/dist/index.js

@@ -1,23 +1,33 @@
 import { create } from "zustand";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import * as React$1 from "react";
-import React, { useEffect, useMemo, useState } from "react";
-import { Button, Input, Layout, Tag, Tree, Typography, theme } from "antd";
+import * as React from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Breadcrumb, Button, Card, Divider, Flex, Input, Layout, Radio, Select, Table, Tabs, Tag, Tooltip, Tree, Typography, theme } from "antd";
 import { useStyleRegister } from "@ant-design/cssinjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { nanoid } from "nanoid";
+import Text from "antd/es/typography/Text";
+import Title from "antd/es/typography/Title";
+import { CopyOutlined, InfoCircleOutlined, LeftOutlined, LockOutlined } from "@ant-design/icons";
 import { AntdRegistry } from "@ant-design/nextjs-registry";
+import { nanoid } from "nanoid";
+import { Light } from "react-syntax-highlighter";
+import json from "react-syntax-highlighter/dist/esm/languages/hljs/json";
+import * as hljs from "react-syntax-highlighter/dist/esm/styles/hljs";
 
 //#region src/store/slices/view.ts
 const createViewSlice = (set) => ({ view: {
 	selectedNodeKey: null,
-	expandedKeys: ["custom-auth", "api-name-01"],
-	originalData: [],
-	transformedData: [],
-	selectedApi: null,
-	selectedEndpoint: null,
-	setSelectedNode: (key) => set((state) => {
+	expandedKeys: [],
+	originalData: null,
+	transformedData: null,
+	builtTreeData: null,
+	selectedApi: void 0,
+	selectedEndpoint: void 0,
+	focusedContent: void 0,
+	selectedStatusCode: null,
+	statusCodeOptions: null,
+	setSelectedNodeKey: (key) => set((state) => {
 		state.view.selectedNodeKey = key;
 	}),
 	setExpandedKeys: (keys) => set((state) => {
@@ -30,10 +40,24 @@ const createViewSlice = (set) => ({ view: {
 		state.view.selectedApi = api;
 	}),
 	setSelectedEndpoint: (endpoint) => set((state) => {
+		if (endpoint) {
+			const availableStatusCodes = Object.keys(endpoint?.responses);
+			state.view.statusCodeOptions = availableStatusCodes.map(Number);
+			state.view.selectedStatusCode = availableStatusCodes.at(0) ? Number(availableStatusCodes.at(0)) : null;
+		}
 		state.view.selectedEndpoint = endpoint;
 	}),
 	setTransformedData: (data) => set((state) => {
 		state.view.transformedData = data;
+	}),
+	setBuiltTreeData: (data) => set((state) => {
+		state.view.builtTreeData = data;
+	}),
+	setFocusedContent: (content) => set((state) => {
+		state.view.focusedContent = content;
+	}),
+	setSelectedStatusCode: (code) => set((state) => {
+		state.view.selectedStatusCode = code;
 	})
 } });
 
@@ -113,41 +137,76 @@ function useStyle(componentName, stylesFn) {
 }
 
 //#endregion
-//#region src/view/components/Header.tsx
+//#region src/view/components/Header/Header.tsx
 const { Header: AntHeader } = Layout;
 const Header = () => {
-	const { wrapSSR, cx } = useStyle("Header", (token$1, scope) => ({ [scope("header")]: {
-		width: "100%",
-		height: "4rem",
-		backgroundColor: token$1.colorBgContainer
-	} }));
-	return wrapSSR(/* @__PURE__ */ jsx(AntHeader, { className: cx("header") }));
-};
-
-//#endregion
-//#region src/assets/Minify.svg
-var _path;
-function _extends() {
-	return _extends = Object.assign ? Object.assign.bind() : function(n) {
-		for (var e = 1; e < arguments.length; e++) {
-			var t = arguments[e];
-			for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-		}
-		return n;
-	}, _extends.apply(null, arguments);
-}
-var SvgMinify = function SvgMinify$1(props) {
-	return /* @__PURE__ */ React$1.createElement("svg", _extends({
-		xmlns: "http://www.w3.org/2000/svg",
-		width: 16,
-		height: 16,
-		fill: "none"
-	}, props), _path || (_path = /* @__PURE__ */ React$1.createElement("path", {
-		stroke: "currentcolor",
-		d: "m6 11.334 2-2 2 2M6 4.666l2 2 2-2"
-	})));
+	const { wrapSSR, cx } = useStyle("Header", (token$1, scope) => ({
+		[scope("header")]: {
+			width: "100%",
+			height: "4rem",
+			padding: "0 !important",
+			margin: "0 !important",
+			background: "url(/project-details-title-img.svg) no-repeat top",
+			backgroundSize: "cover",
+			backgroundPosition: "right",
+			backgroundPositionX: "20rem"
+		},
+		[scope("documentation-title-container")]: {
+			justifyContent: "space-between",
+			alignItems: "center",
+			marginBottom: token$1.marginLG
+		},
+		[scope("projects-title")]: {
+			fontSize: token$1.fontSizeHeading3,
+			lineHeight: token$1.lineHeightLG,
+			fontWeight: 500,
+			marginBottom: token$1.marginXS
+		},
+		[scope("description")]: {
+			fontSize: token$1.fontSizeLG,
+			fontWeight: "400",
+			fontStyle: "normal",
+			lineHeight: token$1.lineHeightLG,
+			color: token$1.colorText
+		},
+		[scope("projects-search-input")]: { width: "28.9375rem" }
+	}));
+	return wrapSSR(/* @__PURE__ */ jsx(AntHeader, {
+		className: cx("header"),
+		children: /* @__PURE__ */ jsxs(Flex, {
+			className: cx("documentation-title-container"),
+			children: [/* @__PURE__ */ jsxs(Flex, {
+				vertical: true,
+				children: [/* @__PURE__ */ jsx(Typography.Title, {
+					className: cx("projects-title"),
+					level: 3,
+					children: "Documentation"
+				}), /* @__PURE__ */ jsx(Typography.Text, {
+					className: cx("description"),
+					children: "Explore and integrate with ease clear API references, guides, instructions, and examples, all in one place."
+				})]
+			}), /* @__PURE__ */ jsxs(Radio.Group, {
+				optionType: "button",
+				buttonStyle: "outline",
+				defaultValue: "reference",
+				children: [/* @__PURE__ */ jsx(Radio.Button, {
+					value: "reference",
+					className: cx("sdb-radio"),
+					children: "API Reference"
+				}), /* @__PURE__ */ jsx(Tooltip, {
+					title: "Coming Soon",
+					placement: "bottomRight",
+					children: /* @__PURE__ */ jsx(Radio.Button, {
+						disabled: true,
+						value: "guide",
+						className: cx("prd-radio"),
+						children: "Guide"
+					})
+				})]
+			})]
+		})
+	}));
 };
-var Minify_default = SvgMinify;
 
 //#endregion
 //#region src/theme/light.json
@@ -500,8 +559,8 @@ const methodColors = {
 		color: token.colorWarning
 	},
 	PATCH: {
-		bg: token["volcano.5"],
-		color: token.colorWhite
+		bg: token["volcano.1"],
+		color: token["volcano.5"]
 	},
 	OPTIONS: {
 		bg: token["geekblue.2"],
@@ -525,7 +584,7 @@ const buildTreeDataStructure = (data) => {
 			selectable: true,
 			data: api,
 			children: Object.entries(api.tags).map(([tag, endpoints]) => {
-				const tagId = `tag-${nanoid(8)}`;
+				const tagId = `tag-${api.id}-${tag.replace(/\s+/g, "-").toLowerCase()}`;
 				return {
 					title: tag,
 					key: tagId,
@@ -544,7 +603,9 @@ const buildTreeDataStructure = (data) => {
 							data: {
 								endpoint,
 								api,
-								tagName: tag
+								tagName: tag,
+								parentApiId: api.id,
+								tagId
 							}
 						};
 					})
@@ -563,24 +624,9 @@ const findNodeByKey = (nodes, targetKey) => {
 	}
 	return null;
 };
-const isApiSectionHighlighted = (apiKey, selectedNode, treeDataStructure) => {
-	if (!selectedNode || selectedNode.length === 0) return false;
-	const selectedKey = selectedNode[0];
-	if (selectedKey === apiKey) return false;
-	const findNodeParentApi = (nodes, targetKey) => {
-		for (const node of nodes) if (node.data && "id" in node.data && "tags" in node.data && !("endpoint" in node.data) && !("tagName" in node.data)) {
-			const apiId = node.key;
-			if (node.children) for (const child of node.children) {
-				if (child.key === targetKey) return apiId;
-				if (child.children) {
-					for (const grandChild of child.children) if (grandChild.key === targetKey) return apiId;
-				}
-			}
-		}
-		return null;
-	};
-	const parentApiKey = findNodeParentApi(treeDataStructure, selectedKey);
-	return parentApiKey === apiKey;
+const isApiSectionHighlighted = (apiKey, selectedEndpoint) => {
+	if (!selectedEndpoint) return false;
+	return selectedEndpoint.parentApiId === apiKey;
 };
 const getAllTreeKeys = (data) => {
 	const keys = [];
@@ -631,7 +677,8 @@ const getSidebarStyles = (token$1, scope) => ({
 		backgroundColor: token$1.colorBgContainer,
 		maxWidth: "17.5rem",
 		overflowY: "auto",
-		overflowX: "clip"
+		overflowX: "clip",
+		borderRadius: token$1.borderRadius
 	},
 	[scope("content")]: { padding: token$1.padding },
 	[scope("controls")]: {
@@ -696,7 +743,7 @@ const getSidebarStyles = (token$1, scope) => ({
 
 //#endregion
 //#region src/view/helper/sidebar.components.tsx
-const { Text } = Typography;
+const { Text: Text$1 } = Typography;
 const EndpointItem = ({ method, title, cx }) => {
 	const methodStyle = methodColors[method];
 	return /* @__PURE__ */ jsxs("div", {
@@ -709,7 +756,7 @@ const EndpointItem = ({ method, title, cx }) => {
 				border: "none"
 			},
 			children: method
-		}), /* @__PURE__ */ jsx(Text, {
+		}), /* @__PURE__ */ jsx(Text$1, {
 			className: cx("endpoint-text"),
 			ellipsis: { tooltip: title },
 			style: { flex: 1 },
@@ -717,22 +764,22 @@ const EndpointItem = ({ method, title, cx }) => {
 		})]
 	});
 };
-const convertToRenderableTreeData = (treeDataStructure, selectedNode, cx) => {
+const convertToRenderableTreeData = (treeDataStructure, selectedEndpoint, cx) => {
 	const renderNode = (node) => {
 		let title;
 		if (node.isLeaf && node.method) title = /* @__PURE__ */ jsx(EndpointItem, {
 			method: node.method,
-			title: typeof node.title === "string" ? node.title.replace(`${node.method} `, "") : "",
+			title: typeof node.title === "string" ? node.title : "",
 			cx
 		});
 		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, selectedNode, treeDataStructure);
-			title = /* @__PURE__ */ jsx(Text, {
+			const isHighlighted = isApiSectionHighlighted(node.key, selectedEndpoint);
+			title = /* @__PURE__ */ jsx(Text$1, {
 				className: cx("api-title") + (isHighlighted ? " highlighted" : ""),
 				ellipsis: { tooltip: typeof node.title === "string" ? node.title : "" },
 				children: node.title
 			});
-		} else title = /* @__PURE__ */ jsx(Text, {
+		} else title = /* @__PURE__ */ jsx(Text$1, {
 			className: cx("tag-title"),
 			ellipsis: { tooltip: typeof node.title === "string" ? node.title : "" },
 			children: node.title
@@ -747,153 +794,231 @@ const convertToRenderableTreeData = (treeDataStructure, selectedNode, cx) => {
 };
 
 //#endregion
-//#region src/view/components/Sidebar.tsx
-const { Sider } = Layout;
-var SidebarErrorBoundary = class extends React.Component {
-	constructor(props) {
-		super(props);
-		this.state = { hasError: false };
-	}
-	static getDerivedStateFromError(error) {
-		console.error("[Sidebar] Error caught by ErrorBoundary:", error);
-		return {
-			hasError: true,
-			error
-		};
-	}
-	componentDidCatch(error, errorInfo) {
-		console.error("[Sidebar] ComponentDidCatch - Error:", error);
-		console.error("[Sidebar] ComponentDidCatch - ErrorInfo:", errorInfo);
-		setTimeout(() => {
-			throw new Error(`Sidebar component error: ${error.message}`);
-		}, 0);
-	}
-	render() {
-		if (this.state.hasError) return /* @__PURE__ */ jsx(Sider, {
-			width: 280,
-			style: {
-				backgroundColor: "#f5f5f5",
-				border: "1px solid #d9d9d9"
-			},
-			children: /* @__PURE__ */ jsxs("div", {
-				style: { padding: 16 },
-				children: [
-					/* @__PURE__ */ jsx("h4", {
-						style: {
-							color: "#ff4d4f",
-							margin: 0,
-							marginBottom: 8
-						},
-						children: "Sidebar Test Mode"
-					}),
-					/* @__PURE__ */ jsx("p", {
-						style: {
-							margin: 0,
-							fontSize: "12px",
-							color: "#666"
-						},
-						children: "Original sidebar failed. This is a test element."
-					}),
-					/* @__PURE__ */ jsxs("details", {
-						style: {
-							marginTop: 8,
-							fontSize: "11px"
-						},
-						children: [/* @__PURE__ */ jsx("summary", {
-							style: {
-								cursor: "pointer",
-								color: "#1890ff"
-							},
-							children: "Error Details"
-						}), /* @__PURE__ */ jsx("pre", {
-							style: {
-								marginTop: 4,
-								fontSize: "10px",
-								color: "#ff4d4f"
-							},
-							children: this.state.error?.message
-						})]
-					})
-				]
-			})
-		});
-		return this.props.children;
-	}
+//#region src/hooks/useNodeSelection.ts
+const useNodeSelection = () => {
+	const { setSelectedNodeKey, setFocusedContent, setSelectedApi, setSelectedEndpoint, setExpandedKeys, expandedKeys, builtTreeData } = useStore(({ view }) => view);
+	const handleNodeSelection = (nodeData, nodeKey) => {
+		if (!nodeData) return null;
+		if (nodeKey.startsWith("endpoint-")) {
+			const endpointNodeData = nodeData;
+			setSelectedEndpoint({
+				...endpointNodeData.endpoint,
+				tagName: endpointNodeData.tagName,
+				parentApiId: endpointNodeData.parentApiId
+			});
+			setSelectedApi(endpointNodeData.api);
+			setFocusedContent("ENDPOINT");
+			const toExpand = [
+				endpointNodeData.parentApiId,
+				endpointNodeData.tagId,
+				endpointNodeData.api.id
+			];
+			const expanded = [...expandedKeys];
+			toExpand.forEach((key) => {
+				if (key && expanded.indexOf(key) < 0) expanded.push(key);
+			});
+			setExpandedKeys(expanded);
+			return {
+				type: "endpoint",
+				endpoint: endpointNodeData.endpoint,
+				api: endpointNodeData.api,
+				tag: endpointNodeData.tagName
+			};
+		} else if (nodeKey.startsWith("api-") || nodeKey === "custom-auth") {
+			const apiData = nodeData;
+			setSelectedApi(apiData);
+			setSelectedEndpoint(null);
+			setFocusedContent("API");
+			return {
+				type: "api",
+				api: apiData
+			};
+		} else {
+			const tagData = nodeData;
+			return {
+				type: "tag",
+				tag: tagData.tagName,
+				api: tagData.apiData
+			};
+		}
+	};
+	const selectNodeByKey = (nodeKey) => {
+		const selectedNode = findNodeByKey(builtTreeData, nodeKey);
+		if (selectedNode) {
+			const result = handleNodeSelection(selectedNode.data, nodeKey);
+			setSelectedNodeKey(nodeKey);
+			return result;
+		}
+		return null;
+	};
+	const expandNode = (nodeKey) => {
+		if (!expandedKeys.includes(nodeKey)) setExpandedKeys([...expandedKeys, nodeKey]);
+	};
+	const selectFirstApi = (treeData) => {
+		if (!treeData || treeData.length === 0) return null;
+		const firstApiNode = treeData.find((node) => node.data && "id" in node.data && "tags" in node.data && !("endpoint" in node.data) && !("tagName" in node.data));
+		if (firstApiNode) {
+			const keysToExpand = [firstApiNode.key];
+			if (firstApiNode.children) firstApiNode.children.forEach((tagNode) => {
+				keysToExpand.push(tagNode.key);
+			});
+			setExpandedKeys([...expandedKeys, ...keysToExpand.filter((key) => !expandedKeys.includes(key))]);
+			return selectNodeByKey(firstApiNode.key);
+		}
+		return null;
+	};
+	const clearSelection = () => {
+		setSelectedNodeKey(null);
+		setSelectedApi(null);
+		setSelectedEndpoint(null);
+	};
+	return {
+		handleNodeSelection,
+		selectNodeByKey,
+		selectFirstApi,
+		clearSelection,
+		expandNode
+	};
 };
-const FallbackSidebar = () => {
-	return /* @__PURE__ */ jsx(Sider, {
-		width: 280,
-		style: {
-			backgroundColor: "#f5f5f5",
-			border: "1px solid #d9d9d9"
-		},
-		children: /* @__PURE__ */ jsxs("div", {
-			style: { padding: 16 },
-			children: [
-				/* @__PURE__ */ jsx("h4", {
-					style: {
-						color: "#ff4d4f",
-						margin: 0,
-						marginBottom: 8
-					},
-					children: "Sidebar Error"
-				}),
-				/* @__PURE__ */ jsx("p", {
-					style: {
-						margin: 0,
-						fontSize: "12px",
-						color: "#666"
-					},
-					children: "The sidebar component encountered an error and has been disabled."
-				}),
-				/* @__PURE__ */ jsx("p", {
-					style: {
-						margin: 0,
-						fontSize: "11px",
-						color: "#999",
-						marginTop: 8
-					},
-					children: "Check the console for more details."
-				})
-			]
-		})
-	});
+
+//#endregion
+//#region src/assets/Minify.svg
+var _path$6;
+function _extends$6() {
+	return _extends$6 = Object.assign ? Object.assign.bind() : function(n) {
+		for (var e = 1; e < arguments.length; e++) {
+			var t = arguments[e];
+			for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+		}
+		return n;
+	}, _extends$6.apply(null, arguments);
+}
+var SvgMinify = function SvgMinify$1(props) {
+	return /* @__PURE__ */ React.createElement("svg", _extends$6({
+		xmlns: "http://www.w3.org/2000/svg",
+		width: 16,
+		height: 16,
+		fill: "none"
+	}, props), _path$6 || (_path$6 = /* @__PURE__ */ React.createElement("path", {
+		stroke: "currentcolor",
+		d: "m6 11.334 2-2 2 2M6 4.666l2 2 2-2"
+	})));
 };
-const SafeSidebar = () => {
-	try {
-		const expandedKeys = useStore((state) => state.view.expandedKeys);
-		const setExpandedKeys = useStore((state) => state.view.setExpandedKeys);
-		const setSelectedApi = useStore((state) => state.view.setSelectedApi);
-		const setSelectedEndpoint = useStore((state) => state.view.setSelectedEndpoint);
-		const [selectedNode, setSelectedNodeState] = useState();
-		const transformedData = useStore((state) => state.view.transformedData);
-		console.log("[Sidebar] Store access successful, transformedData:", transformedData);
-		return /* @__PURE__ */ jsx(SidebarContent, {
-			expandedKeys,
-			setExpandedKeys,
-			setSelectedApi,
-			setSelectedEndpoint,
-			selectedNode,
-			setSelectedNodeState,
-			transformedData
-		});
-	} catch (error) {
-		console.error("[Sidebar] Error accessing store or rendering:", error);
-		return /* @__PURE__ */ jsx(FallbackSidebar, {});
-	}
+var Minify_default = SvgMinify;
+
+//#endregion
+//#region src/assets/NoDataSM.svg
+var _path$5, _path2$4, _path3$1, _path4$1, _path5$1, _path6$1, _path7$1, _path8$1, _path9$1, _path0$1, _path1$1, _path10$1, _path11$1, _path12$1, _path13$1, _path14$1, _path15$1, _path16$1;
+function _extends$5() {
+	return _extends$5 = Object.assign ? Object.assign.bind() : function(n) {
+		for (var e = 1; e < arguments.length; e++) {
+			var t = arguments[e];
+			for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+		}
+		return n;
+	}, _extends$5.apply(null, arguments);
+}
+var SvgNoDataSm = function SvgNoDataSm$1(props) {
+	return /* @__PURE__ */ React.createElement("svg", _extends$5({
+		xmlns: "http://www.w3.org/2000/svg",
+		width: 166,
+		height: 132,
+		fill: "none"
+	}, props), _path$5 || (_path$5 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#F1F5FD",
+		d: "M97.215 48.377c-10.257.061-20.673-.415-30.416-3.113-9.742-2.698-18.359-7.788-26.192-13.733-5.128-3.87-9.792-6.946-16.45-6.483a30.4 30.4 0 0 0-17.76 6.91c-8.469 7.398-7.184 21.07-3.806 30.69 5.092 14.49 20.587 24.55 33.744 31.105 15.214 7.581 31.92 11.988 48.677 14.515 14.687 2.222 33.548 3.845 46.265-5.726 11.689-8.777 14.895-28.846 12.031-42.397a16.68 16.68 0 0 0-6.009-10.157c-8.213-5.981-20.452-1.99-29.681-1.782-3.366.073-6.903.159-10.403.171"
+	})), _path2$4 || (_path2$4 = /* @__PURE__ */ React.createElement("path", {
+		stroke: "#E0E9F9",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: .85,
+		d: "M47.204 1v5.25M44.572 3.625h5.263M147.054 105.631v5.249M144.422 108.256h5.263"
+	})), _path3$1 || (_path3$1 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#E0E9F9",
+		d: "M7.438 82.963c.662 0 1.2-.536 1.2-1.196 0-.661-.538-1.197-1.2-1.197a1.198 1.198 0 1 0 0 2.393M109.564 6.42c.662 0 1.199-.536 1.199-1.196 0-.661-.537-1.197-1.199-1.197-.663 0-1.2.536-1.2 1.197 0 .66.537 1.196 1.2 1.196"
+	})), _path4$1 || (_path4$1 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#F1F5FD",
+		d: "M76.321 132c24.808 0 44.919-1.246 44.919-2.783s-20.111-2.783-44.919-2.783-44.919 1.246-44.919 2.783S51.513 132 76.322 132"
+	})), _path5$1 || (_path5$1 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#fff",
+		stroke: "#769DE4",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		d: "M41.72 15.258h65.237c1.623 0 3.179.643 4.327 1.788a6.1 6.1 0 0 1 1.793 4.316V98.77a6.1 6.1 0 0 1-1.793 4.316 6.13 6.13 0 0 1-4.327 1.788H33.361a6.13 6.13 0 0 1-4.327-1.788 6.1 6.1 0 0 1-1.793-4.316V29.846z"
+	})), _path6$1 || (_path6$1 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#F1F5FD",
+		d: "M112.783 52.98H45.515v52.64h67.268z"
+	})), _path7$1 || (_path7$1 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#fff",
+		stroke: "#769DE4",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		d: "M27.241 29.846h11.86a2.64 2.64 0 0 0 1.853-.773c.49-.492.767-1.158.767-1.852V15.258zM112.453 36.17H45.919a4.68 4.68 0 0 0-4.688 4.675v14.198a4.68 4.68 0 0 0 4.688 4.675h66.534a4.68 4.68 0 0 0 4.688-4.675V40.845a4.68 4.68 0 0 0-4.688-4.675"
+	})), _path8$1 || (_path8$1 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#F1F5FD",
+		d: "M54.156 52.053a4.083 4.083 0 0 0 4.088-4.077 4.083 4.083 0 0 0-4.088-4.078 4.083 4.083 0 0 0-4.088 4.078 4.083 4.083 0 0 0 4.088 4.077M67.007 52.053a4.083 4.083 0 0 0 4.088-4.077 4.083 4.083 0 0 0-4.088-4.078 4.083 4.083 0 0 0-4.088 4.078 4.083 4.083 0 0 0 4.088 4.077M79.847 52.053a4.083 4.083 0 0 0 4.088-4.077 4.083 4.083 0 0 0-4.088-4.078 4.083 4.083 0 0 0-4.088 4.078 4.083 4.083 0 0 0 4.088 4.077"
+	})), _path9$1 || (_path9$1 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#fff",
+		stroke: "#769DE4",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		d: "M112.453 62.27H45.919a4.68 4.68 0 0 0-4.688 4.675v14.198a4.68 4.68 0 0 0 4.688 4.675h66.534a4.68 4.68 0 0 0 4.688-4.675V66.945a4.68 4.68 0 0 0-4.688-4.675"
+	})), _path0$1 || (_path0$1 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#F1F5FD",
+		d: "M54.156 78.165a4.083 4.083 0 0 0 4.088-4.078 4.083 4.083 0 0 0-4.088-4.077 4.083 4.083 0 0 0-4.088 4.077 4.083 4.083 0 0 0 4.088 4.078M67.007 78.165a4.083 4.083 0 0 0 4.088-4.078 4.083 4.083 0 0 0-4.088-4.077 4.083 4.083 0 0 0-4.088 4.077 4.083 4.083 0 0 0 4.088 4.078M79.847 78.165a4.083 4.083 0 0 0 4.088-4.078 4.083 4.083 0 0 0-4.088-4.077 4.083 4.083 0 0 0-4.088 4.077 4.083 4.083 0 0 0 4.088 4.078"
+	})), _path1$1 || (_path1$1 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#fff",
+		stroke: "#769DE4",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		d: "M112.453 88.383H45.919a4.68 4.68 0 0 0-4.688 4.675v14.198a4.68 4.68 0 0 0 4.688 4.675h66.534a4.68 4.68 0 0 0 4.688-4.675V93.058a4.68 4.68 0 0 0-4.688-4.675"
+	})), _path10$1 || (_path10$1 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#F1F5FD",
+		d: "M54.156 104.264a4.08 4.08 0 0 0 4.088-4.077 4.083 4.083 0 0 0-4.088-4.078 4.083 4.083 0 0 0-4.088 4.078 4.08 4.08 0 0 0 4.088 4.077M67.007 104.264a4.08 4.08 0 0 0 4.088-4.077 4.083 4.083 0 0 0-4.088-4.078 4.083 4.083 0 0 0-4.088 4.078 4.08 4.08 0 0 0 4.088 4.077M79.847 104.264a4.08 4.08 0 0 0 4.088-4.077 4.083 4.083 0 0 0-4.088-4.078 4.083 4.083 0 0 0-4.088 4.078 4.08 4.08 0 0 0 4.088 4.077"
+	})), _path11$1 || (_path11$1 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#fff",
+		stroke: "#769DE4",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		d: "M118.609 66.212c14.013 0 25.372-11.33 25.372-25.306S132.622 15.6 118.609 15.6 93.236 26.93 93.236 40.906s11.36 25.306 25.373 25.306"
+	})), _path12$1 || (_path12$1 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#fff",
+		stroke: "#769DE4",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		d: "M118.903 55.885c8.132 0 14.724-6.575 14.724-14.686 0-8.11-6.592-14.685-14.724-14.685s-14.724 6.575-14.724 14.685c0 8.111 6.592 14.686 14.724 14.686"
+	})), _path13$1 || (_path13$1 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#fff",
+		d: "M111.067 33.371c.308.638 15.672 15.643 15.672 15.643z"
+	})), _path14$1 || (_path14$1 = /* @__PURE__ */ React.createElement("path", {
+		stroke: "#769DE4",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		d: "M111.067 33.371c.308.638 15.672 15.643 15.672 15.643"
+	})), _path15$1 || (_path15$1 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#fff",
+		d: "M126.739 33.371c-.32.638-15.672 15.643-15.672 15.643z"
+	})), _path16$1 || (_path16$1 = /* @__PURE__ */ React.createElement("path", {
+		stroke: "#769DE4",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		d: "M126.739 33.371c-.32.638-15.672 15.643-15.672 15.643"
+	})));
 };
-const SidebarContent = ({ expandedKeys, setExpandedKeys, setSelectedApi, setSelectedEndpoint, selectedNode, setSelectedNodeState, transformedData }) => {
-	const builtTreeData = useMemo(() => {
-		console.log("[Sidebar] transformedData:", transformedData);
-		const tree = buildTreeDataStructure(transformedData);
-		console.log("[Sidebar] builtTreeData:", tree);
-		return tree;
-	}, [transformedData]);
+var NoDataSM_default = SvgNoDataSm;
+
+//#endregion
+//#region src/view/components/Sidebar.tsx
+const { Sider } = Layout;
+const Sidebar = () => {
+	const expandedKeys = useStore((state) => state.view.expandedKeys);
+	const { selectedNodeKey, selectedEndpoint, builtTreeData, setExpandedKeys, setSelectedNodeKey, transformedData } = useStore(({ view }) => view);
+	const { selectNodeByKey, clearSelection } = useNodeSelection();
 	const [searchValue, setSearchValue] = useState("");
 	const [autoExpandParent, setAutoExpandParent] = useState(true);
-	const { wrapSSR, cx } = useStyle("Sidebar", getSidebarStyles);
+	const { wrapSSR, cx, token: token$1 } = useStyle("Sidebar", getSidebarStyles);
 	const handleSearch = (value) => {
-		if (value) {
+		if (value && builtTreeData) {
 			const allKeys = getAllTreeKeys(builtTreeData);
 			setExpandedKeys(allKeys);
 			setSearchValue(value);
@@ -904,77 +1029,39 @@ const SidebarContent = ({ expandedKeys, setExpandedKeys, setSelectedApi, setSele
 		}
 	};
 	const renderTreeData = useMemo(() => {
-		const data = convertToRenderableTreeData(builtTreeData, selectedNode, cx);
-		console.log("[Sidebar] renderTreeData:", data);
-		return data;
+		if (!builtTreeData) return [];
+		return convertToRenderableTreeData(builtTreeData, selectedEndpoint, cx);
 	}, [
 		builtTreeData,
-		selectedNode,
+		selectedEndpoint,
 		cx
 	]);
 	const filteredTreeData = useMemo(() => {
 		if (!searchValue) return renderTreeData;
+		if (!builtTreeData) return [];
 		const filteredOriginal = filterTreeData(builtTreeData, searchValue);
-		const data = convertToRenderableTreeData(filteredOriginal, selectedNode, cx);
-		console.log("[Sidebar] filteredTreeData:", data);
-		return data;
+		return convertToRenderableTreeData(filteredOriginal, selectedEndpoint, cx);
 	}, [
 		builtTreeData,
 		searchValue,
-		selectedNode,
+		selectedEndpoint,
 		cx
 	]);
 	const collapseAll = () => {
 		setExpandedKeys([]);
 	};
-	const handleNodeSelection = (nodeData, nodeKey) => {
-		if (!nodeData) return null;
-		if (nodeKey.startsWith("endpoint-")) {
-			const endpointNodeData = nodeData;
-			setSelectedEndpoint(endpointNodeData.endpoint);
-			setSelectedApi(endpointNodeData.api);
-			return {
-				type: "endpoint",
-				endpoint: endpointNodeData.endpoint,
-				api: endpointNodeData.api,
-				tag: endpointNodeData.tagName
-			};
-		} else if (nodeKey.startsWith("api-") || nodeKey === "custom-auth") {
-			const apiData = nodeData;
-			setSelectedApi(apiData);
-			setSelectedEndpoint(null);
-			return {
-				type: "api",
-				api: apiData
-			};
-		} else {
-			const tagData = nodeData;
-			return {
-				type: "tag",
-				tag: tagData.tagName,
-				api: tagData.apiData
-			};
-		}
-	};
 	const onTreeNodeSelect = (selectedKeys) => {
 		const stringKeys = selectedKeys.map((key) => String(key));
-		console.log("[Sidebar] onTreeNodeSelect - selectedKeys:", selectedKeys, "stringKeys:", stringKeys);
 		if (stringKeys.length === 0) {
-			setSelectedNodeState([]);
-			setSelectedApi(null);
-			setSelectedEndpoint(null);
+			clearSelection();
 			return;
 		}
+		if (!builtTreeData) return;
 		const selectedKey = stringKeys[0];
-		const selectedNode$1 = findNodeByKey(builtTreeData, selectedKey);
-		console.log("[Sidebar] findNodeByKey result:", selectedNode$1);
-		if (selectedNode$1) {
-			const result = handleNodeSelection(selectedNode$1.data, selectedKey);
-			console.log("[Sidebar] handleNodeSelection result:", result);
-		}
-		setSelectedNodeState(stringKeys);
+		selectNodeByKey(selectedKey);
+		setSelectedNodeKey(selectedKey);
 	};
-	return wrapSSR(/* @__PURE__ */ jsx(SidebarErrorBoundary, { children: /* @__PURE__ */ jsx(Sider, {
+	return wrapSSR(/* @__PURE__ */ jsx(Sider, {
 		width: 280,
 		className: cx("sider"),
 		children: /* @__PURE__ */ jsxs("div", {
@@ -992,40 +1079,1039 @@ const SidebarContent = ({ expandedKeys, setExpandedKeys, setSelectedApi, setSele
 					title: "Collapse All",
 					icon: /* @__PURE__ */ jsx(Minify_default, {})
 				})]
-			}), /* @__PURE__ */ jsx(Tree, {
+			}), transformedData?.length ? /* @__PURE__ */ jsx(Tree, {
 				showLine: { showLeafIcon: false },
 				showIcon: false,
 				expandedKeys,
 				autoExpandParent,
-				selectedKeys: selectedNode,
-				onSelect: onTreeNodeSelect,
+				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$1.marginSM,
+				vertical: true,
+				style: { marginTop: token$1.paddingXL },
+				children: [/* @__PURE__ */ jsx(NoDataSM_default, {
+					width: "10.375rem",
+					height: "8.1875rem",
+					style: { backgroundSize: "cover" }
+				}), /* @__PURE__ */ jsxs(Text, {
+					style: {
+						textAlign: "center",
+						fontFamily: token$1.fontFamily,
+						fontWeight: 400,
+						fontSize: token$1.fontSizeLG,
+						color: "rgba(0,0,0,0.45)"
+					},
+					children: [
+						"No API",
+						/* @__PURE__ */ jsx("br", {}),
+						"Documentation Found"
+					]
+				})]
 			})]
 		})
-	}) }));
+	}));
 };
-const Sidebar = () => {
-	return /* @__PURE__ */ jsx(SafeSidebar, {});
+
+//#endregion
+//#region src/assets/grid.svg
+var _mask, _path$4, _path2$3;
+function _extends$4() {
+	return _extends$4 = Object.assign ? Object.assign.bind() : function(n) {
+		for (var e = 1; e < arguments.length; e++) {
+			var t = arguments[e];
+			for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+		}
+		return n;
+	}, _extends$4.apply(null, arguments);
+}
+var SvgGrid = function SvgGrid$1(props) {
+	return /* @__PURE__ */ React.createElement("svg", _extends$4({
+		xmlns: "http://www.w3.org/2000/svg",
+		width: 16,
+		height: 16,
+		fill: "none"
+	}, props), _mask || (_mask = /* @__PURE__ */ React.createElement("mask", {
+		id: "grid_svg__a",
+		fill: "#fff"
+	}, /* @__PURE__ */ React.createElement("path", { d: "M3.333 2.5a.833.833 0 0 0-.833.833v3.334c0 .46.373.833.833.833h2c.46 0 .834-.373.834-.833V3.333a.833.833 0 0 0-.834-.833zM1.5 3.333c0-1.012.82-1.833 1.833-1.833h2c1.013 0 1.834.82 1.834 1.833v3.334c0 1.012-.82 1.833-1.834 1.833h-2A1.833 1.833 0 0 1 1.5 6.667zm8.333 0c0-.46.373-.833.834-.833h2c.46 0 .833.373.833.833v1.334c0 .46-.373.833-.833.833h-2a.833.833 0 0 1-.834-.833zm.834-1.833c-1.013 0-1.834.82-1.834 1.833v1.334c0 1.012.82 1.833 1.834 1.833h2c1.013 0 1.833-.82 1.833-1.833V3.333c0-1.012-.82-1.833-1.833-1.833zm-.834 7.833c0-.46.373-.833.834-.833h2c.46 0 .833.373.833.833v3.334c0 .46-.373.833-.833.833h-2a.833.833 0 0 1-.834-.833zm.834-1.833c-1.013 0-1.834.82-1.834 1.833v3.334c0 1.013.82 1.833 1.834 1.833h2c1.013 0 1.833-.82 1.833-1.833V9.333c0-1.012-.82-1.833-1.833-1.833zM2.5 11.333c0-.46.373-.833.833-.833h2c.46 0 .834.373.834.833v1.334c0 .46-.373.833-.834.833h-2a.833.833 0 0 1-.833-.833zM3.333 9.5c-1.012 0-1.833.82-1.833 1.833v1.334c0 1.013.82 1.833 1.833 1.833h2c1.013 0 1.834-.82 1.834-1.833v-1.334c0-1.013-.82-1.833-1.834-1.833z" }))), _path$4 || (_path$4 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#D9D9D9",
+		d: "M3.333 2.5a.833.833 0 0 0-.833.833v3.334c0 .46.373.833.833.833h2c.46 0 .834-.373.834-.833V3.333a.833.833 0 0 0-.834-.833zM1.5 3.333c0-1.012.82-1.833 1.833-1.833h2c1.013 0 1.834.82 1.834 1.833v3.334c0 1.012-.82 1.833-1.834 1.833h-2A1.833 1.833 0 0 1 1.5 6.667zm8.333 0c0-.46.373-.833.834-.833h2c.46 0 .833.373.833.833v1.334c0 .46-.373.833-.833.833h-2a.833.833 0 0 1-.834-.833zm.834-1.833c-1.013 0-1.834.82-1.834 1.833v1.334c0 1.012.82 1.833 1.834 1.833h2c1.013 0 1.833-.82 1.833-1.833V3.333c0-1.012-.82-1.833-1.833-1.833zm-.834 7.833c0-.46.373-.833.834-.833h2c.46 0 .833.373.833.833v3.334c0 .46-.373.833-.833.833h-2a.833.833 0 0 1-.834-.833zm.834-1.833c-1.013 0-1.834.82-1.834 1.833v3.334c0 1.013.82 1.833 1.834 1.833h2c1.013 0 1.833-.82 1.833-1.833V9.333c0-1.012-.82-1.833-1.833-1.833zM2.5 11.333c0-.46.373-.833.833-.833h2c.46 0 .834.373.834.833v1.334c0 .46-.373.833-.834.833h-2a.833.833 0 0 1-.833-.833zM3.333 9.5c-1.012 0-1.833.82-1.833 1.833v1.334c0 1.013.82 1.833 1.833 1.833h2c1.013 0 1.834-.82 1.834-1.833v-1.334c0-1.013-.82-1.833-1.834-1.833z"
+	})), _path2$3 || (_path2$3 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#769DE4",
+		d: "M3.333 2.5v-1C2.321 1.5 1.5 2.32 1.5 3.333h2a.167.167 0 0 1-.167.167zm-.833.833h-1v3.334h2V3.333zm0 3.334h-1c0 1.012.82 1.833 1.833 1.833v-2c.092 0 .167.075.167.167zm.833.833v1h2v-2h-2zm2 0v1c1.013 0 1.834-.82 1.834-1.833h-2c0-.092.075-.167.166-.167zm.834-.833h1V3.333h-2v3.334zm0-3.334h1c0-1.012-.82-1.833-1.834-1.833v2a.167.167 0 0 1-.166-.167zM5.333 2.5v-1h-2v2h2zM1.5 3.333h1c0-.46.373-.833.833-.833v-2A2.833 2.833 0 0 0 .5 3.333zM3.333 1.5v1h2v-2h-2zm2 0v1c.46 0 .834.373.834.833h2A2.833 2.833 0 0 0 5.333.5zm1.834 1.833h-1v3.334h2V3.333zm0 3.334h-1c0 .46-.373.833-.834.833v2a2.833 2.833 0 0 0 2.834-2.833zM5.333 8.5v-1h-2v2h2zm-2 0v-1a.833.833 0 0 1-.833-.833h-2A2.833 2.833 0 0 0 3.333 9.5zM1.5 6.667h1V3.333h-2v3.334zm8.333-3.334h1a.167.167 0 0 1-.166.167v-2c-1.013 0-1.834.82-1.834 1.833zm.834-.833v1h2v-2h-2zm2 0v1a.167.167 0 0 1-.167-.167h2c0-1.012-.82-1.833-1.833-1.833zm.833.833h-1v1.334h2V3.333zm0 1.334h-1c0-.092.075-.167.167-.167v2c1.013 0 1.833-.82 1.833-1.833zm-.833.833v-1h-2v2h2zm-2 0v-1c.091 0 .166.075.166.167h-2c0 1.012.82 1.833 1.834 1.833zm-.834-.833h1V3.333h-2v1.334zm.834-3.167v-1a2.833 2.833 0 0 0-2.834 2.833h2c0-.46.373-.833.834-.833zM8.833 3.333h-1v1.334h2V3.333zm0 1.334h-1A2.833 2.833 0 0 0 10.667 7.5v-2a.833.833 0 0 1-.834-.833zM10.667 6.5v1h2v-2h-2zm2 0v1A2.833 2.833 0 0 0 15.5 4.667h-2c0 .46-.373.833-.833.833zM14.5 4.667h1V3.333h-2v1.334zm0-1.334h1A2.833 2.833 0 0 0 12.667.5v2c.46 0 .833.373.833.833zM12.667 1.5v-1h-2v2h2zM9.833 9.333h1a.167.167 0 0 1-.166.167v-2c-1.013 0-1.834.82-1.834 1.833zm.834-.833v1h2v-2h-2zm2 0v1a.167.167 0 0 1-.167-.167h2c0-1.012-.82-1.833-1.833-1.833zm.833.833h-1v3.334h2V9.333zm0 3.334h-1c0-.092.075-.167.167-.167v2c1.013 0 1.833-.82 1.833-1.833zm-.833.833v-1h-2v2h2zm-2 0v-1c.091 0 .166.075.166.167h-2c0 1.013.82 1.833 1.834 1.833zm-.834-.833h1V9.333h-2v3.334zm.834-5.167v-1a2.833 2.833 0 0 0-2.834 2.833h2c0-.46.373-.833.834-.833zM8.833 9.333h-1v3.334h2V9.333zm0 3.334h-1a2.833 2.833 0 0 0 2.834 2.833v-2a.833.833 0 0 1-.834-.833zm1.834 1.833v1h2v-2h-2zm2 0v1a2.833 2.833 0 0 0 2.833-2.833h-2c0 .46-.373.833-.833.833zm1.833-1.833h1V9.333h-2v3.334zm0-3.334h1A2.833 2.833 0 0 0 12.667 6.5v2c.46 0 .833.373.833.833zM12.667 7.5v-1h-2v2h2zM2.5 11.333h1a.167.167 0 0 1-.167.167v-2c-1.012 0-1.833.82-1.833 1.833zm.833-.833v1h2v-2h-2zm2 0v1a.167.167 0 0 1-.166-.167h2c0-1.013-.82-1.833-1.834-1.833zm.834.833h-1v1.334h2v-1.334zm0 1.334h-1c0-.092.075-.167.166-.167v2c1.013 0 1.834-.82 1.834-1.833zm-.834.833v-1h-2v2h2zm-2 0v-1c.092 0 .167.075.167.167h-2c0 1.013.82 1.833 1.833 1.833zm-.833-.833h1v-1.334h-2v1.334zM3.333 9.5v-1A2.833 2.833 0 0 0 .5 11.333h2c0-.46.373-.833.833-.833zM1.5 11.333h-1v1.334h2v-1.334zm0 1.334h-1A2.833 2.833 0 0 0 3.333 15.5v-2a.833.833 0 0 1-.833-.833zM3.333 14.5v1h2v-2h-2zm2 0v1a2.833 2.833 0 0 0 2.834-2.833h-2c0 .46-.373.833-.834.833zm1.834-1.833h1v-1.334h-2v1.334zm0-1.334h1A2.833 2.833 0 0 0 5.333 8.5v2c.46 0 .834.373.834.833zM5.333 9.5v-1h-2v2h2z",
+		mask: "url(#grid_svg__a)"
+	})));
 };
+var grid_default = SvgGrid;
+
+//#endregion
+//#region src/assets/list.svg
+var _path$3;
+function _extends$3() {
+	return _extends$3 = Object.assign ? Object.assign.bind() : function(n) {
+		for (var e = 1; e < arguments.length; e++) {
+			var t = arguments[e];
+			for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+		}
+		return n;
+	}, _extends$3.apply(null, arguments);
+}
+var SvgList = function SvgList$1(props) {
+	return /* @__PURE__ */ React.createElement("svg", _extends$3({
+		xmlns: "http://www.w3.org/2000/svg",
+		width: 16,
+		height: 16,
+		fill: "none"
+	}, props), _path$3 || (_path$3 = /* @__PURE__ */ React.createElement("path", {
+		stroke: "#000",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeOpacity: .25,
+		d: "M13.267 9H2.734c-1 0-1.4.427-1.4 1.487v2.693c0 1.06.4 1.487 1.4 1.487h10.533c1 0 1.4-.427 1.4-1.487v-2.693c0-1.06-.4-1.487-1.4-1.487M13.267 1.334H2.734c-1 0-1.4.427-1.4 1.487v2.693c0 1.06.4 1.487 1.4 1.487h10.533c1 0 1.4-.427 1.4-1.487V2.821c0-1.06-.4-1.487-1.4-1.487"
+	})));
+};
+var list_default = SvgList;
+
+//#endregion
+//#region src/assets/copy.svg
+var _path$2, _path2$2;
+function _extends$2() {
+	return _extends$2 = Object.assign ? Object.assign.bind() : function(n) {
+		for (var e = 1; e < arguments.length; e++) {
+			var t = arguments[e];
+			for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+		}
+		return n;
+	}, _extends$2.apply(null, arguments);
+}
+var SvgCopy = function SvgCopy$1(props) {
+	return /* @__PURE__ */ React.createElement("svg", _extends$2({
+		xmlns: "http://www.w3.org/2000/svg",
+		width: 16,
+		height: 16,
+		fill: "none"
+	}, props), _path$2 || (_path$2 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#000",
+		fillOpacity: .45,
+		d: "M7.4 15.167H4.6c-2.607 0-3.767-1.16-3.767-3.766V8.6c0-2.607 1.16-3.767 3.767-3.767h2.8c2.606 0 3.766 1.16 3.766 3.767v2.8c0 2.606-1.16 3.766-3.766 3.766M4.6 5.834c-2.067 0-2.767.7-2.767 2.767v2.8c0 2.066.7 2.766 2.767 2.766h2.8c2.066 0 2.766-.7 2.766-2.766V8.6c0-2.067-.7-2.767-2.766-2.767z"
+	})), _path2$2 || (_path2$2 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#000",
+		fillOpacity: .45,
+		d: "M11.4 11.167h-.734a.504.504 0 0 1-.5-.5V8.601c0-2.067-.7-2.767-2.766-2.767H5.333a.504.504 0 0 1-.5-.5v-.733C4.833 1.994 5.993.834 8.6.834h2.8c2.606 0 3.766 1.16 3.766 3.767v2.8c0 2.606-1.16 3.766-3.766 3.766m-.234-1h.234c2.066 0 2.766-.7 2.766-2.766V4.6c0-2.067-.7-2.767-2.766-2.767H8.6c-2.067 0-2.767.7-2.767 2.767v.233H7.4c2.606 0 3.766 1.16 3.766 3.767z"
+	})));
+};
+var copy_default = SvgCopy;
+
+//#endregion
+//#region src/assets/link.svg
+var _path$1, _path2$1;
+function _extends$1() {
+	return _extends$1 = Object.assign ? Object.assign.bind() : function(n) {
+		for (var e = 1; e < arguments.length; e++) {
+			var t = arguments[e];
+			for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+		}
+		return n;
+	}, _extends$1.apply(null, arguments);
+}
+var SvgLink = function SvgLink$1(props) {
+	return /* @__PURE__ */ React.createElement("svg", _extends$1({
+		xmlns: "http://www.w3.org/2000/svg",
+		width: 12,
+		height: 12,
+		fill: "none"
+	}, props), _path$1 || (_path$1 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#4D75D9",
+		d: "M3.875 9.25C2.085 9.25.625 7.79.625 6s1.46-3.25 3.25-3.25c.205 0 .375.17.375.375s-.17.375-.375.375a2.5 2.5 0 0 0 0 5 2.5 2.5 0 0 0 2.5-2.5c0-.205.17-.375.375-.375s.375.17.375.375c0 1.79-1.46 3.25-3.25 3.25"
+	})), _path2$1 || (_path2$1 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#4D75D9",
+		d: "M8 9.375A.38.38 0 0 1 7.625 9c0-.205.17-.375.375-.375A2.63 2.63 0 0 0 10.625 6 2.63 2.63 0 0 0 8 3.375 2.63 2.63 0 0 0 5.375 6c0 .205-.17.375-.375.375A.38.38 0 0 1 4.625 6 3.38 3.38 0 0 1 8 2.625 3.38 3.38 0 0 1 11.375 6 3.38 3.38 0 0 1 8 9.375"
+	})));
+};
+var link_default = SvgLink;
+
+//#endregion
+//#region src/view/components/ApiPage/components/ApiCard.tsx
+const ApiCard = ({ api, viewStyle }) => {
+	const { wrapSSR, cx, token: token$1 } = useStyle("DocumentationApiCard", (token$2, scope) => ({
+		[scope("method-chip")]: {
+			minWidth: "5.375rem",
+			width: "fit-content",
+			paddingLeft: token$2.marginXS,
+			paddingRight: token$2.marginXS,
+			display: "flex",
+			justifyContent: "center",
+			alignItems: "center",
+			borderRadius: token$2.borderRadius
+		},
+		[scope("list-container")]: {
+			paddingTop: token$2.marginXS,
+			paddingBottom: token$2.marginXS
+		},
+		[scope("chip-title")]: {
+			alignSelf: "center",
+			textAlign: "center",
+			padding: 0,
+			margin: 0,
+			lineHeight: "1.375rem",
+			fontSize: token$2.fontSize
+		},
+		[scope("list-see-details")]: {
+			width: "6.5625rem",
+			height: "2rem",
+			borderRadius: token$2.borderRadius,
+			border: `${token$2.lineWidth}rem solid ${token$2.Button?.defaultBorderColor}`,
+			paddingRight: token$2.Button?.paddingInline,
+			paddingLeft: token$2.Button?.paddingInline
+		},
+		[scope("list-content")]: {
+			display: "flex",
+			paddingTop: token$2.paddingXXS,
+			paddingBottom: token$2.paddingXXS,
+			paddingRight: token$2.paddingXS,
+			paddingLeft: token$2.paddingXS,
+			alignItems: "center",
+			gap: token$2.marginXS,
+			alignSelf: "stretch",
+			flexDirection: "row",
+			borderRadius: token$2.borderRadiusSM,
+			border: `1px solid ${token$2.colorBorderSecondary}`,
+			minWidth: "6.25rem",
+			maxWidth: "fit-content"
+		},
+		[scope("list-title")]: {
+			color: token$2.colorTextHeading,
+			fontSize: token$2.fontSizeHeading3,
+			fontWeight: token$2.fontWeightStrong,
+			lineHeight: token$2.lineHeightHeading3,
+			paddingBottom: 0,
+			marginBottom: 0,
+			fontFamily: "SF Pro",
+			"&:hover": {
+				color: `${token$2.colorPrimary} !important`,
+				textDecoration: "underline"
+			}
+		},
+		[scope("path-name")]: {
+			color: token$2.colorText,
+			fontSize: token$2.fontSizeSM,
+			fontWeight: 400,
+			fontFamily: token$2.fontFamily
+		},
+		[scope("grid-card")]: {
+			width: "17.5rem",
+			height: "100%",
+			borderRadius: token$2.borderRadiusLG
+		},
+		[scope("grid-title")]: {
+			color: token$2.colorTextHeading,
+			fontSize: token$2.fontSizeHeading3,
+			fontWeight: token$2.fontWeightStrong,
+			lineHeight: token$2.lineHeightHeading3,
+			paddingBottom: 0,
+			marginBottom: 0,
+			fontFamily: token$2.fontFamily
+		},
+		[scope("grid-content")]: {
+			display: "flex",
+			paddingTop: token$2.paddingXXS,
+			paddingBottom: token$2.paddingXXS,
+			paddingRight: token$2.paddingXS,
+			paddingLeft: token$2.paddingXS,
+			alignItems: "center",
+			gap: token$2.marginXS,
+			alignSelf: "stretch",
+			flexDirection: "row",
+			borderRadius: token$2.borderRadiusSM,
+			border: `1px solid ${token$2.colorBorderSecondary}`
+		},
+		[scope("grid-path-name")]: {
+			color: token$2.colorText,
+			fontSize: token$2.fontSizeSM,
+			fontWeight: 400,
+			fontFamily: token$2.fontFamily
+		},
+		[scope("grid-see-details")]: {
+			paddingTop: 0,
+			paddingBottom: 0,
+			paddingLeft: "0.4375rem",
+			paddingRight: "0.4375rem",
+			borderRadius: token$2.borderRadiusSM,
+			border: `1px solid ${token$2.Button?.defaultBorderColor}`,
+			background: token$2.Button?.defaultBg,
+			boxShadow: `0 2px 0 0 rgba(0, 0, 0, 0.02)`,
+			width: "100%",
+			height: "1.5rem"
+		}
+	}));
+	const { selectNodeByKey } = useNodeSelection();
+	const handleOpenEndPointView = () => {
+		selectNodeByKey(api.id);
+	};
+	const TooltippedText = ({ text }) => {
+		const limitation = viewStyle == "grid" ? 15 : 36;
+		if (text.length < limitation) return text;
+		return /* @__PURE__ */ jsxs(Tooltip, {
+			title: text,
+			placement: "bottomLeft",
+			children: [text.substring(0, limitation), "..."]
+		});
+	};
+	const MethodChip = ({ method }) => {
+		const { bg, color } = methodColors[method.toUpperCase()];
+		return /* @__PURE__ */ jsx("div", {
+			className: cx("method-chip"),
+			style: {
+				color,
+				backgroundColor: bg
+			},
+			children: /* @__PURE__ */ jsx(Title, {
+				color,
+				className: cx("chip-title"),
+				level: 5,
+				children: method
+			})
+		});
+	};
+	if (viewStyle == "list") return wrapSSR(/* @__PURE__ */ jsxs(Flex, {
+		vertical: true,
+		children: [
+			/* @__PURE__ */ jsxs(Flex, {
+				justify: "space-between",
+				align: "center",
+				className: cx("list-container"),
+				children: [/* @__PURE__ */ jsxs(Flex, {
+					gap: token$1.marginSM,
+					children: [/* @__PURE__ */ jsx(MethodChip, { method: api.method }), /* @__PURE__ */ jsx(Title, {
+						className: cx("list-title"),
+						level: 4,
+						children: /* @__PURE__ */ jsx(TooltippedText, { text: api?.summary || "Endpoint Name" })
+					})]
+				}), /* @__PURE__ */ jsx(Button, {
+					color: "default",
+					className: cx("list-see-details"),
+					onClick: handleOpenEndPointView,
+					children: "See Details"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cx("list-content"),
+				children: [/* @__PURE__ */ jsx(link_default, {}), /* @__PURE__ */ jsx(Text, {
+					className: cx("path-name"),
+					children: api?.path
+				})]
+			}),
+			/* @__PURE__ */ jsx(Divider, { style: {
+				marginTop: "0.75rem",
+				marginBottom: "0.25rem"
+			} })
+		]
+	}));
+	return wrapSSR(/* @__PURE__ */ jsx(Card, {
+		className: cx("grid-card"),
+		children: /* @__PURE__ */ jsxs(Flex, {
+			vertical: true,
+			gap: token$1.marginSM,
+			children: [
+				/* @__PURE__ */ jsx(MethodChip, { method: api?.method }),
+				/* @__PURE__ */ jsx(Title, {
+					className: cx("grid-title"),
+					level: 4,
+					children: /* @__PURE__ */ jsx(TooltippedText, { text: api?.summary || "Endpoint Name" })
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: cx("grid-content"),
+					children: [/* @__PURE__ */ jsx(link_default, {}), /* @__PURE__ */ jsx(Text, {
+						className: cx("grid-path-name"),
+						children: api?.path
+					})]
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					className: cx("grid-see-details"),
+					onClick: handleOpenEndPointView,
+					children: "See Details"
+				})
+			]
+		})
+	}));
+};
+var ApiCard_default = ApiCard;
+
+//#endregion
+//#region src/utils/index.ts
+const handleStatusColor = (code) => {
+	if (code >= 200 && code < 300) return "green";
+	else if (code >= 400 && code < 500) return "red";
+	else if (code >= 500 && code < 600) return "red";
+	else if (code >= 100 && code < 200) return "blue";
+	else if (code >= 300 && code < 400) return "orange";
+	else return "gray";
+};
+const copyToClipboard = async (text) => {
+	try {
+		await navigator.clipboard.writeText(text);
+		return;
+	} catch (err) {
+		return err;
+	}
+};
+
+//#endregion
+//#region src/view/components/ApiPage/index.tsx
+const APIPage = () => {
+	const [selectedUrl, setSelectedUrl] = useState("");
+	const [copying, setCopying] = useState(false);
+	const { view: { selectedApi, transformedData, setSelectedApi, setFocusedContent, setSelectedNodeKey } } = store_default();
+	const [viewStyle, setViewStyle] = useState("grid");
+	const { wrapSSR, cx, token: token$1 } = useStyle("DocumentationApiPage", () => ({}));
+	const currentVersion = selectedApi?.relatedVersions?.find((v) => v.apiId === selectedApi?.currentVersion);
+	const handleVersionChanged = (value) => {
+		console.log("new value ", value);
+		const apiByVersion = transformedData?.find((item) => item.currentVersion === value);
+		if (apiByVersion) {
+			setSelectedApi(apiByVersion);
+			setFocusedContent("API");
+			setSelectedNodeKey(apiByVersion.id);
+		}
+	};
+	useEffect(() => {
+		if (selectedApi?.servers && !selectedUrl) setSelectedUrl(selectedApi?.servers?.[0].url);
+	}, [selectedApi?.servers]);
+	const handleCopyUrl = async () => {
+		setCopying(true);
+		await copyToClipboard(selectedUrl);
+		setTimeout(() => {
+			setCopying(false);
+		}, 700);
+	};
+	const APIsRenderer = ({ apis, withTitle, tagName, haveUnderLine }) => {
+		return /* @__PURE__ */ jsxs(Flex, {
+			gap: viewStyle == "grid" ? token$1.marginXS : 0,
+			style: {
+				marginBottom: 0,
+				paddingBottom: 0
+			},
+			vertical: true,
+			children: [
+				withTitle && /* @__PURE__ */ jsx(Title, {
+					style: { marginBottom: 0 },
+					level: 4,
+					children: tagName
+				}),
+				/* @__PURE__ */ jsx(Flex, {
+					wrap: "wrap",
+					gap: viewStyle == "grid" ? "1.5rem" : 0,
+					vertical: viewStyle == "list",
+					children: apis.map((item) => /* @__PURE__ */ jsx(ApiCard_default, {
+						api: item,
+						viewStyle
+					}))
+				}),
+				haveUnderLine && /* @__PURE__ */ jsx(Divider, { style: {
+					marginTop: token$1.marginSM,
+					marginBottom: token$1.marginSM
+				} })
+			]
+		});
+	};
+	return wrapSSR(/* @__PURE__ */ jsxs(Flex, {
+		vertical: true,
+		gap: token$1.margin,
+		children: [
+			/* @__PURE__ */ jsx(Title, {
+				className: cx("container"),
+				level: 4,
+				children: selectedApi?.title
+			}),
+			/* @__PURE__ */ jsxs(Flex, { children: [
+				selectedApi?.authType && /* @__PURE__ */ jsx(Tooltip, {
+					title: "Authenticator Type",
+					placement: "bottomLeft",
+					children: /* @__PURE__ */ jsx(Tag, {
+						style: {
+							minWidth: "3.9375rem",
+							width: "max-content",
+							height: "2rem",
+							background: "#fff",
+							borderRadius: token$1.borderRadiusSM,
+							paddingTop: "0.0625rem",
+							paddingBottom: "0.0625rem",
+							paddingRight: token$1.paddingContentHorizontalSM,
+							paddingLeft: token$1.paddingContentHorizontalSM,
+							display: "flex",
+							justifyContent: "center",
+							alignItems: "center"
+						},
+						icon: /* @__PURE__ */ jsx(LockOutlined, {}),
+						children: selectedApi?.authType?.replace(/_/g, " ")
+					})
+				}),
+				selectedApi?.authType && /* @__PURE__ */ jsx(Divider, {
+					style: { height: "2rem" },
+					type: "vertical"
+				}),
+				/* @__PURE__ */ jsx(Select, {
+					size: "middle",
+					prefix: /* @__PURE__ */ jsx(Tooltip, {
+						title: "API Version",
+						placement: "bottom",
+						children: /* @__PURE__ */ jsx(InfoCircleOutlined, {})
+					}),
+					value: currentVersion?.apiId,
+					onChange: handleVersionChanged,
+					style: {
+						minWidth: "6.1875rem",
+						width: "max-content",
+						display: "flex",
+						justifyContent: "center",
+						alignContent: "center",
+						alignItems: "center",
+						paddingLeft: "0.5rem",
+						paddingRight: "0.5rem"
+					},
+					placeholder: "Version",
+					options: selectedApi?.relatedVersions?.map((item) => ({
+						label: item.version,
+						value: item.apiId
+					})),
+					showSearch: false
+				}),
+				/* @__PURE__ */ jsx(Divider, {
+					style: { height: "2rem" },
+					type: "vertical"
+				}),
+				/* @__PURE__ */ jsx(Select, {
+					size: "middle",
+					prefix: /* @__PURE__ */ jsx(Tooltip, {
+						title: "URL",
+						placement: "bottom",
+						children: /* @__PURE__ */ jsx(InfoCircleOutlined, {})
+					}),
+					value: selectedApi?.servers?.[0]?.url,
+					onChange: setSelectedUrl,
+					style: {
+						width: "24.75rem",
+						display: "flex",
+						justifyContent: "center",
+						alignContent: "center",
+						alignItems: "center",
+						paddingLeft: "0.5rem"
+					},
+					placeholder: "API URLs",
+					options: selectedApi?.servers?.map((server) => ({
+						label: server?.url,
+						value: server?.url
+					})),
+					showSearch: false
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					color: copying ? "green" : "default",
+					variant: copying ? "filled" : "outlined",
+					icon: /* @__PURE__ */ jsx(copy_default, {}),
+					iconPosition: "end",
+					style: { marginLeft: "0.69rem" },
+					onClick: handleCopyUrl,
+					children: !copying ? "Copy" : "Copied"
+				}),
+				/* @__PURE__ */ jsxs(Radio.Group, {
+					style: {
+						marginLeft: "auto",
+						display: "flex"
+					},
+					optionType: "button",
+					buttonStyle: "outline",
+					defaultValue: viewStyle,
+					onChange: (e) => {
+						setViewStyle(e.target.value);
+					},
+					children: [/* @__PURE__ */ jsx(Radio.Button, {
+						value: "grid",
+						style: {
+							display: "flex",
+							alignItems: "center"
+						},
+						children: /* @__PURE__ */ jsx(grid_default, {})
+					}), /* @__PURE__ */ jsx(Radio.Button, {
+						value: "list",
+						style: {
+							display: "flex",
+							alignItems: "center"
+						},
+						children: /* @__PURE__ */ jsx(list_default, {})
+					})]
+				})
+			] }),
+			selectedApi?.description && /* @__PURE__ */ jsx(Text, {
+				style: {
+					fontFamily: token$1.fontFamily,
+					fontWeight: 400,
+					fontSize: token$1.fontSizeLG,
+					color: `rgba(0,0,0, 0.45)`
+				},
+				children: selectedApi?.description
+			}),
+			Object.keys(selectedApi?.tags || {}).sort((a, b) => {
+				if (a.toLowerCase() === "default") return 1;
+				if (b.toLowerCase() === "default") return -1;
+				return 0;
+			}).map((key, index) => {
+				if (key.toLowerCase() == "default" && Object.keys(selectedApi?.tags).length <= 1) return /* @__PURE__ */ jsx(APIsRenderer, {
+					apis: selectedApi?.tags[key],
+					tagName: key,
+					withTitle: false
+				});
+				return /* @__PURE__ */ jsx(APIsRenderer, {
+					apis: selectedApi?.tags[key],
+					tagName: key,
+					withTitle: true,
+					haveUnderLine: index < Object.keys(selectedApi?.tags || {}).length - 1
+				});
+			})
+		]
+	}));
+};
+
+//#endregion
+//#region src/view/components/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) => params.map((p, index) => ({
+	key: index,
+	param: /* @__PURE__ */ jsxs("span", { children: [
+		p.name,
+		p.schema?.type && /* @__PURE__ */ jsx("span", {
+			style: {
+				color: "rgba(0,0,0,0.45)",
+				marginLeft: "0.25rem",
+				marginRight: "0.25rem"
+			},
+			children: p.schema.type
+		}),
+		p.required ? /* @__PURE__ */ jsx("span", {
+			style: { color: "red" },
+			children: "*"
+		}) : /* @__PURE__ */ jsx("span", {
+			style: { color: "#52C41A" },
+			children: "Optional"
+		})
+	] }),
+	desc: p.description || "-",
+	enum: p.schema?.enum ? p.schema.enum.map((e) => /* @__PURE__ */ jsx(Tag, { children: e }, e)) : "--"
+}));
+const buildHeaderData = (headers) => {
+	if (!headers) return [];
+	return Object.entries(headers).map(([name, header], idx) => ({
+		key: idx,
+		param: /* @__PURE__ */ jsxs("span", { children: [
+			name,
+			header.schema?.type && /* @__PURE__ */ jsx("span", {
+				style: {
+					color: "rgba(0,0,0,0.45)",
+					marginLeft: "0.25rem",
+					marginRight: "0.25rem"
+				},
+				children: header.schema.type
+			}),
+			header.required ? /* @__PURE__ */ jsx("span", {
+				style: { color: "red" },
+				children: "*"
+			}) : /* @__PURE__ */ jsx("span", {
+				style: { color: "#52C41A" },
+				children: "Optional"
+			})
+		] }),
+		desc: header.description || "-",
+		enum: header.schema?.enum ? header.schema.enum.map((e) => /* @__PURE__ */ jsx(Tag, { children: e }, e)) : "--"
+	}));
+};
+const EndpointPage = () => {
+	const { selectedEndpoint, selectedApi, selectedStatusCode, setSelectedNodeKey, setFocusedContent } = store_default(({ view }) => view);
+	const [endpointTooltip, setEndpointTooltip] = useState("Copy endpoint");
+	const [selectedServer, setSelectedServer] = useState(0);
+	const { cx } = useStyle("EndpointPage", (token$1, scope) => ({
+		[scope("container")]: {
+			display: "flex",
+			flexDirection: "column",
+			gap: token$1.marginLG,
+			height: "100%"
+		},
+		[scope("content")]: {
+			width: "100%",
+			height: "100%"
+		},
+		[scope("code")]: {
+			background: "unset",
+			borderRadius: token$1.borderRadius,
+			padding: token$1.paddingSM,
+			fontFamily: "monospace",
+			whiteSpace: "pre-wrap"
+		},
+		[scope("breadcrumb")]: {
+			display: "flex",
+			gap: token$1.marginLG,
+			alignItems: "center",
+			marginBottom: token$1.marginLG
+		}
+	}));
+	const methodStyle = methodColors[selectedEndpoint?.method];
+	const headerParams = buildRequestData(selectedEndpoint?.parameters?.filter((p) => p.in === "header") || []);
+	const pathParams = buildRequestData(selectedEndpoint?.parameters?.filter((p) => p.in === "path") || []);
+	const queryParams = buildRequestData(selectedEndpoint?.parameters?.filter((p) => p.in === "query") || []);
+	const requestTabs = [
+		headerParams.length > 0 ? {
+			key: "header",
+			label: "Header",
+			children: /* @__PURE__ */ jsx(Table, {
+				columns: requestColumns,
+				dataSource: headerParams,
+				pagination: false,
+				bordered: true,
+				size: "small"
+			})
+		} : null,
+		pathParams.length > 0 ? {
+			key: "path",
+			label: "Path",
+			children: /* @__PURE__ */ jsx(Table, {
+				columns: requestColumns,
+				dataSource: pathParams,
+				pagination: false,
+				bordered: true,
+				size: "small"
+			})
+		} : null,
+		queryParams.length > 0 ? {
+			key: "query",
+			label: "Query",
+			children: /* @__PURE__ */ jsx(Table, {
+				columns: requestColumns,
+				dataSource: queryParams,
+				pagination: false,
+				bordered: true,
+				size: "small"
+			})
+		} : null
+	].filter((t) => t !== null);
+	const responseObj = selectedEndpoint?.responses?.[selectedStatusCode || 200];
+	const responseHeaders = responseObj?.headers;
+	const responseHeaderData = buildHeaderData(responseHeaders);
+	const serverOptions = selectedApi?.servers?.map((server, index) => ({
+		value: index,
+		label: `${server.url}${selectedEndpoint?.path || ""}`
+	})) || [];
+	const getFullEndpointUrl = () => {
+		if (!selectedApi?.servers || !selectedApi.servers[selectedServer]) return "";
+		const server = selectedApi.servers[selectedServer];
+		return `${server.url}${selectedEndpoint?.path || ""}`;
+	};
+	return /* @__PURE__ */ jsx(AntdRegistry, { children: /* @__PURE__ */ jsx("div", {
+		className: cx("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");
+							}
+						},
+						{ title: /* @__PURE__ */ jsx("p", {
+							style: {
+								display: "flex",
+								flexDirection: "row",
+								alignItems: "center",
+								color: "rgba(0,0,0,0.45)",
+								gap: "0.25rem"
+							},
+							children: /* @__PURE__ */ jsx("span", { children: selectedEndpoint?.tagName || "default" })
+						}) },
+						{ title: /* @__PURE__ */ jsx("span", { children: selectedEndpoint?.summary || "Endpoint Name" }) }
+					] })]
+				}),
+				/* @__PURE__ */ jsx(Title$1, {
+					level: 3,
+					children: selectedEndpoint?.summary
+				}),
+				/* @__PURE__ */ jsx(Paragraph, { children: /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: 8
+					},
+					children: [/* @__PURE__ */ jsx(Select, {
+						value: selectedServer,
+						style: { width: "100%" },
+						onChange: (value) => setSelectedServer(value),
+						prefix: /* @__PURE__ */ jsx(Tag, {
+							style: {
+								backgroundColor: methodStyle?.bg,
+								color: methodStyle?.color,
+								border: "none"
+							},
+							children: selectedEndpoint?.method
+						}),
+						options: serverOptions
+					}), /* @__PURE__ */ jsx(Tooltip, {
+						title: endpointTooltip,
+						children: /* @__PURE__ */ jsx(Button, {
+							color: "default",
+							variant: "outlined",
+							onClick: () => {
+								const fullUrl = getFullEndpointUrl();
+								if (fullUrl) {
+									navigator.clipboard.writeText(fullUrl);
+									setEndpointTooltip("Copied!");
+									setTimeout(() => setEndpointTooltip("Copy endpoint"), 1500);
+								}
+							},
+							icon: /* @__PURE__ */ jsx(copy_default, {})
+						})
+					})]
+				}) }),
+				/* @__PURE__ */ jsx(Paragraph, {
+					style: {
+						color: "rgba(0,0,0,0.45)",
+						marginBottom: "1.5rem"
+					},
+					children: selectedEndpoint?.description
+				}),
+				requestTabs.length > 0 && /* @__PURE__ */ jsx(Card, {
+					title: "Request",
+					style: { marginBottom: "1.5rem" },
+					children: /* @__PURE__ */ jsx(Tabs, {
+						defaultActiveKey: requestTabs[0].key,
+						items: requestTabs
+					})
+				}),
+				responseHeaderData.length > 0 && /* @__PURE__ */ jsx(Card, {
+					title: "Response",
+					extra: /* @__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: responseHeaderData.length > 0 && /* @__PURE__ */ jsx(Table, {
+						columns: responseColumns,
+						dataSource: responseHeaderData,
+						pagination: false,
+						bordered: true,
+						size: "small"
+					})
+				})
+			]
+		})
+	}) });
+};
+
+//#endregion
+//#region src/assets/NoData.svg
+var _path, _path2, _path3, _path4, _path5, _path6, _path7, _path8, _path9, _path0, _path1, _path10, _path11, _path12, _path13, _path14, _path15, _path16;
+function _extends() {
+	return _extends = Object.assign ? Object.assign.bind() : function(n) {
+		for (var e = 1; e < arguments.length; e++) {
+			var t = arguments[e];
+			for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+		}
+		return n;
+	}, _extends.apply(null, arguments);
+}
+var SvgNoData = function SvgNoData$1(props) {
+	return /* @__PURE__ */ React.createElement("svg", _extends({
+		xmlns: "http://www.w3.org/2000/svg",
+		width: 298,
+		height: 237,
+		fill: "none"
+	}, props), _path || (_path = /* @__PURE__ */ React.createElement("path", {
+		fill: "#F1F5FD",
+		d: "M174.518 86.353c-18.413.11-37.111-.748-54.601-5.608s-32.958-14.031-47.02-24.741c-9.206-6.972-17.578-12.514-29.53-11.678a54.46 54.46 0 0 0-31.882 12.447C-3.72 70.101-1.413 94.733 4.652 112.062c9.14 26.105 36.957 44.227 60.577 56.037 27.31 13.657 57.303 21.596 87.382 26.149 26.367 4.002 60.226 6.927 83.055-10.315 20.983-15.812 26.74-51.968 21.598-76.379a30.07 30.07 0 0 0-10.788-18.298c-14.743-10.776-36.715-3.585-53.282-3.21-6.042.131-12.392.285-18.676.307"
+	})), _path2 || (_path2 = /* @__PURE__ */ React.createElement("path", {
+		stroke: "#E0E9F9",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: .85,
+		d: "M84.74 1v9.457M80.016 5.729h9.448M263.987 189.496v9.457M259.264 194.225h9.448"
+	})), _path3 || (_path3 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#E0E9F9",
+		d: "M13.353 148.656a2.154 2.154 0 1 0-.002-4.308 2.154 2.154 0 0 0 .001 4.308M196.687 10.764a2.154 2.154 0 1 0 0-4.31 2.154 2.154 0 0 0 0 4.31"
+	})), _path4 || (_path4 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#F1F5FD",
+		d: "M137.011 236.999c44.535 0 80.638-2.245 80.638-5.014s-36.103-5.014-80.638-5.014c-44.534 0-80.637 2.245-80.637 5.014s36.103 5.014 80.637 5.014"
+	})), _path5 || (_path5 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#fff",
+		stroke: "#769DE4",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		d: "M74.896 26.688h117.111c2.914 0 5.708 1.158 7.769 3.22a11 11 0 0 1 3.217 7.776v139.453c0 2.917-1.157 5.714-3.217 7.776a10.98 10.98 0 0 1-7.769 3.22H59.889a10.98 10.98 0 0 1-7.768-3.22 11 11 0 0 1-3.218-7.776V52.968z"
+	})), _path6 || (_path6 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#F1F5FD",
+		d: "M202.465 94.645H81.707v94.831h120.758z"
+	})), _path7 || (_path7 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#fff",
+		stroke: "#769DE4",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		d: "M48.903 52.968h21.291a4.73 4.73 0 0 0 4.702-4.728V26.687zM201.873 64.36H82.433c-4.648 0-8.415 3.77-8.415 8.422V98.36c0 4.651 3.767 8.423 8.415 8.423h119.44c4.648 0 8.415-3.772 8.415-8.423V72.782c0-4.651-3.767-8.423-8.415-8.423"
+	})), _path8 || (_path8 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#F1F5FD",
+		d: "M97.22 92.972a7.34 7.34 0 0 0 7.338-7.345 7.34 7.34 0 0 0-7.339-7.346 7.34 7.34 0 0 0-7.338 7.346 7.34 7.34 0 0 0 7.338 7.345M120.291 92.972a7.34 7.34 0 0 0 7.338-7.345c0-4.057-3.285-7.346-7.338-7.346a7.34 7.34 0 0 0-7.339 7.346 7.34 7.34 0 0 0 7.339 7.345M143.339 92.972a7.34 7.34 0 0 0 7.338-7.345c0-4.057-3.285-7.346-7.338-7.346A7.34 7.34 0 0 0 136 85.627a7.34 7.34 0 0 0 7.339 7.345"
+	})), _path9 || (_path9 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#fff",
+		stroke: "#769DE4",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		d: "M201.873 111.379H82.433c-4.648 0-8.415 3.771-8.415 8.423v25.577c0 4.652 3.767 8.423 8.415 8.423h119.44c4.648 0 8.415-3.771 8.415-8.423v-25.577c0-4.652-3.767-8.423-8.415-8.423"
+	})), _path0 || (_path0 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#F1F5FD",
+		d: "M97.22 140.013a7.34 7.34 0 0 0 7.338-7.345c0-4.057-3.285-7.346-7.339-7.346-4.052 0-7.338 3.289-7.338 7.346a7.34 7.34 0 0 0 7.338 7.345M120.291 140.013c4.053 0 7.338-3.289 7.338-7.345 0-4.057-3.285-7.346-7.338-7.346a7.343 7.343 0 0 0-7.339 7.346 7.34 7.34 0 0 0 7.339 7.345M143.339 140.013c4.053 0 7.338-3.289 7.338-7.345 0-4.057-3.285-7.346-7.338-7.346a7.343 7.343 0 0 0-7.339 7.346 7.34 7.34 0 0 0 7.339 7.345"
+	})), _path1 || (_path1 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#fff",
+		stroke: "#769DE4",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		d: "M201.873 158.422H82.433c-4.648 0-8.415 3.771-8.415 8.423v25.577c0 4.652 3.767 8.423 8.415 8.423h119.44c4.648 0 8.415-3.771 8.415-8.423v-25.577c0-4.652-3.767-8.423-8.415-8.423"
+	})), _path10 || (_path10 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#F1F5FD",
+		d: "M97.22 187.033c4.053 0 7.338-3.289 7.338-7.346a7.34 7.34 0 0 0-7.339-7.345 7.34 7.34 0 0 0-7.338 7.345c0 4.057 3.285 7.346 7.338 7.346M120.291 187.033c4.053 0 7.338-3.289 7.338-7.346a7.34 7.34 0 0 0-7.338-7.345 7.34 7.34 0 0 0-7.339 7.345 7.343 7.343 0 0 0 7.339 7.346M143.339 187.033c4.053 0 7.338-3.289 7.338-7.346a7.34 7.34 0 0 0-7.338-7.345 7.34 7.34 0 0 0-7.339 7.345 7.343 7.343 0 0 0 7.339 7.346"
+	})), _path11 || (_path11 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#fff",
+		stroke: "#769DE4",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		d: "M212.924 118.483c25.156 0 45.548-20.411 45.548-45.59s-20.392-45.59-45.548-45.59c-25.155 0-45.548 20.411-45.548 45.59s20.393 45.59 45.548 45.59"
+	})), _path12 || (_path12 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#fff",
+		stroke: "#769DE4",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		d: "M213.451 99.878c14.598 0 26.432-11.845 26.432-26.456 0-14.612-11.834-26.457-26.432-26.457s-26.432 11.845-26.432 26.457 11.834 26.456 26.432 26.456"
+	})), _path13 || (_path13 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#fff",
+		d: "M199.385 59.32c.552 1.15 28.132 28.181 28.132 28.181z"
+	})), _path14 || (_path14 = /* @__PURE__ */ React.createElement("path", {
+		stroke: "#769DE4",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		d: "M199.385 59.32c.552 1.15 28.132 28.181 28.132 28.181"
+	})), _path15 || (_path15 = /* @__PURE__ */ React.createElement("path", {
+		fill: "#fff",
+		d: "M227.517 59.32c-.574 1.15-28.132 28.181-28.132 28.181z"
+	})), _path16 || (_path16 = /* @__PURE__ */ React.createElement("path", {
+		stroke: "#769DE4",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		d: "M227.517 59.32c-.574 1.15-28.132 28.181-28.132 28.181"
+	})));
+};
+var NoData_default = SvgNoData;
 
 //#endregion
 //#region src/view/components/MainContent.tsx
 const MainContent = () => {
-	const { wrapSSR, cx } = useStyle("MainContent", (token$1, scope) => ({ [scope("container")]: {
-		backgroundColor: token$1.colorBgContainer,
-		height: "100%",
-		width: "100%",
-		maxHeight: "100%",
-		overflow: "auto",
-		borderRadius: token$1.borderRadius,
-		padding: token$1.paddingXL
-	} }));
-	return wrapSSR(/* @__PURE__ */ jsx("div", { className: cx("container") }));
+	const { focusedContent, transformedData } = store_default(({ view }) => view);
+	const { wrapSSR, cx } = useStyle("MainContent", (token$1, scope) => ({
+		[scope("container")]: {
+			backgroundColor: token$1.colorBgContainer,
+			height: "100%",
+			width: "100%",
+			maxHeight: "100%",
+			overflow: "auto",
+			borderRadius: token$1.borderRadius,
+			padding: token$1.paddingXL
+		},
+		[scope("centered")]: {
+			display: "flex",
+			justifyContent: "center"
+		},
+		[scope("no-space")]: {
+			margin: 0,
+			padding: 0
+		},
+		[scope("title")]: {
+			fontFamily: token$1.fontFamily,
+			fontWeight: 600,
+			fontSize: token$1.fontSizeHeading4,
+			color: "rgba(0, 0, 0, 0.88)"
+		},
+		[scope("text")]: {
+			color: "rgba(0, 0, 0, 0.88)",
+			fontFamily: token$1.fontFamily
+		}
+	}));
+	return wrapSSR(/* @__PURE__ */ jsx("div", {
+		className: cx("container", !transformedData?.length ? "centered" : ""),
+		children: !transformedData?.length ? /* @__PURE__ */ jsxs(Flex, {
+			justify: "center",
+			align: "center",
+			gap: "1.5rem",
+			vertical: true,
+			flex: 1,
+			children: [/* @__PURE__ */ jsx(NoData_default, {
+				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: "No API Documentation Found"
+				}), /* @__PURE__ */ jsx(Text, {
+					className: cx("no-space", "text"),
+					children: "No API Documentation has been added yet. Contact admin for support"
+				})]
+			})]
+		}) : focusedContent === "ENDPOINT" ? /* @__PURE__ */ jsx(EndpointPage, {}) : /* @__PURE__ */ jsx(APIPage, {})
+	}));
 };
 
 //#endregion
@@ -1034,6 +2120,12 @@ const transformOpenApiToDocs = (api) => {
 	const groupedPathsByTags = { default: [] };
 	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
+	})) : [];
+	const currentVersion = "x-current-version" in api ? api["x-current-version"] : "";
+	const authType = "x-auth-type" in api ? api["x-auth-type"] : "";
 	for (const [path, methods] of Object.entries(api.paths)) for (const [method, methodData] of Object.entries(methods)) {
 		const entry = {
 			...methodData,
@@ -1059,20 +2151,193 @@ const transformOpenApiToDocs = (api) => {
 		id: `api-${nanoid(8)}`,
 		contextPath,
 		tags: groupedPathsByTags,
-		servers: api.servers
+		servers: api.servers,
+		relatedVersions,
+		currentVersion,
+		authType
 	};
 };
 
+//#endregion
+//#region src/view/components/EndpointPage/Codebox/Codebox.tsx
+Light.registerLanguage("json", json);
+const Codebox = ({ code }) => {
+	const [theme$1, setTheme] = useState("DARK");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "codebox",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "codebox_header",
+			children: [/* @__PURE__ */ jsx("div", {
+				role: "button",
+				tabIndex: -1,
+				onClick: () => theme$1 !== "LIGHT" && setTheme("LIGHT"),
+				className: "codebox_header_themeToggle codebox_header_themeToggle_light",
+				title: "Light theme"
+			}), /* @__PURE__ */ jsx("div", {
+				role: "button",
+				tabIndex: -1,
+				onClick: () => theme$1 !== "DARK" && setTheme("DARK"),
+				className: "codebox_header_themeToggle codebox_header_themeToggle_dark",
+				title: "Dark theme"
+			})]
+		}), /* @__PURE__ */ jsx(Light, {
+			language: "json",
+			style: theme$1 === "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$1 === "DARK" ? "#20264B" : "#20264B",
+				fontSize: "0.75rem"
+			},
+			lineProps: { className: "custom-code-line" },
+			children: code
+		})]
+	});
+};
+var Codebox_default = Codebox;
+
+//#endregion
+//#region src/view/components/CodeboxSidebar.tsx
+function CodeboxSidebar() {
+	const { selectedEndpoint, selectedStatusCode, statusCodeOptions, setSelectedStatusCode } = store_default(({ view }) => view);
+	const httpStatusOptions = useMemo(() => statusCodeOptions.map((code) => ({
+		value: code,
+		label: /* @__PURE__ */ jsx("span", { children: code })
+	})), [statusCodeOptions]);
+	const [requestTooltip, setRequestTooltip] = useState("Copy Request");
+	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%",
+			width: "23.625rem",
+			minWidth: "23.625rem",
+			".ant-card-body": { padding: 0 },
+			".ant-card-head-title": { color: "white" },
+			".ant-card-head": { borderBottom: "2px solid #33419A" }
+		},
+		[scope("rightCard")]: {
+			flex: "0 1 auto",
+			maxHeight: "50%",
+			overflowY: "auto",
+			backgroundColor: "#20264B"
+		},
+		[scope("rightCardFlex")]: {
+			overflowY: "auto",
+			backgroundColor: "#20264B"
+		},
+		[scope("customSelect")]: {
+			".ant-select-selector": {
+				backgroundColor: `${token["brnadColor.9"]} `,
+				borderColor: `${token["brnadColor.9"]}`,
+				borderRadius: "6px",
+				color: "white"
+			},
+			".ant-select-selection-item": { color: "white" },
+			".ant-select-selection-placeholder": { color: "rgba(255, 255, 255, 0.65)" },
+			".ant-select-arrow": { color: "white" },
+			"&: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: [selectedEndpoint?.requestBody && /* @__PURE__ */ jsx(Card, {
+			title: "Request",
+			variant: "borderless",
+			className: cx("rightCard"),
+			extra: /* @__PURE__ */ jsx(Tooltip, {
+				title: requestTooltip,
+				children: /* @__PURE__ */ jsx(Button, {
+					color: "default",
+					variant: "link",
+					onClick: () => {
+						if (selectedEndpoint?.requestBody) {
+							navigator.clipboard.writeText(JSON.stringify(selectedEndpoint.requestBody, null, 2));
+							setRequestTooltip("Copied!");
+							setTimeout(() => setRequestTooltip("Copy Request"), 1500);
+						}
+					},
+					icon: /* @__PURE__ */ jsx(CopyOutlined, { style: { color: "white" } })
+				})
+			}),
+			style: {
+				padding: 0,
+				border: "none"
+			},
+			children: /* @__PURE__ */ jsx(Codebox_default, { code: JSON.stringify(selectedEndpoint?.requestBody, null, 2) || "" })
+		}), selectedEndpoint?.responses && /* @__PURE__ */ jsx(Card, {
+			title: "Response",
+			variant: "borderless",
+			className: cx("rightCardFlex"),
+			extra: /* @__PURE__ */ jsx(Select, {
+				defaultActiveFirstOption: true,
+				defaultValue: 200,
+				className: cx("customSelect"),
+				style: { width: "100%" },
+				value: selectedStatusCode,
+				onChange: setSelectedStatusCode,
+				prefix: /* @__PURE__ */ jsx("span", { style: {
+					background: handleStatusColor(selectedStatusCode),
+					borderRadius: "50%",
+					display: "inline-block",
+					width: "0.5rem",
+					height: "0.5rem",
+					marginRight: "0.5rem"
+				} }),
+				options: httpStatusOptions
+			}),
+			children: /* @__PURE__ */ jsx(Codebox_default, { code: JSON.stringify(selectedEndpoint?.responses[selectedStatusCode], null, 2) || "" })
+		})]
+	});
+}
+var CodeboxSidebar_default = CodeboxSidebar;
+
 //#endregion
 //#region src/view/layout.tsx
 const DocumentationLayout = ({ data }) => {
-	const { setOriginalData } = store_default(({ view }) => view);
-	const { setTransformedData } = store_default(({ view }) => view);
+	const { focusedContent, selectedNodeKey, selectedApi, builtTreeData, setOriginalData, setTransformedData, setBuiltTreeData } = store_default(({ view }) => view);
+	const { selectFirstApi } = useNodeSelection();
+	const hasInitializedRef = useRef(false);
 	useEffect(() => {
 		setOriginalData(data);
-		const transformedData = data.map(transformOpenApiToDocs);
+		const transformedData = data.map(transformOpenApiToDocs).sort((a, b) => a.title.localeCompare(b.title));
 		setTransformedData(transformedData);
-	}, [data]);
+		const builtTree = buildTreeDataStructure(transformedData);
+		setBuiltTreeData(builtTree);
+		hasInitializedRef.current = false;
+	}, [
+		data,
+		setOriginalData,
+		setTransformedData,
+		setBuiltTreeData
+	]);
+	useEffect(() => {
+		if (builtTreeData && builtTreeData.length > 0 && !selectedNodeKey && !selectedApi && !hasInitializedRef.current) {
+			selectFirstApi(builtTreeData);
+			hasInitializedRef.current = true;
+		}
+	}, [
+		builtTreeData,
+		selectedNodeKey,
+		selectedApi,
+		selectFirstApi
+	]);
 	const { cx } = useStyle("DocumentationLayout", (token$1, scope) => ({
 		[scope("container")]: {
 			display: "flex",
@@ -1087,14 +2352,19 @@ const DocumentationLayout = ({ data }) => {
 			height: "100%",
 			maxHeight: "100%",
 			overflow: "hidden",
-			gap: token$1.marginLG
+			gap: token$1.marginLG,
+			width: "100%"
 		}
 	}));
 	return /* @__PURE__ */ jsx(AntdRegistry, { children: /* @__PURE__ */ jsxs("div", {
 		className: cx("container"),
 		children: [/* @__PURE__ */ jsx(Header, {}), /* @__PURE__ */ jsxs("div", {
 			className: cx("layout"),
-			children: [/* @__PURE__ */ jsx(Sidebar, {}), /* @__PURE__ */ jsx(MainContent, {})]
+			children: [
+				/* @__PURE__ */ jsx(Sidebar, {}),
+				/* @__PURE__ */ jsx(MainContent, {}),
+				focusedContent === "ENDPOINT" && /* @__PURE__ */ jsx(CodeboxSidebar_default, {})
+			]
 		})]
 	}) });
 };