@digi-frontend/dgate-api-documentation 2.0.1-test.14 → 2.0.1-test.15

package/dist/index.js

@@ -1,5 +1,8 @@
-import { useEffect } from "react";
-import { Layout, theme } from "antd";
+'use client';
+
+
+import { useEffect, useMemo, useState } from "react";
+import { Button, Input, Layout, Tag, Tree, Typography, theme } from "antd";
 import { useStyleRegister } from "@ant-design/cssinjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { create } from "zustand";
@@ -10,19 +13,19 @@ import { AntdRegistry } from "@ant-design/nextjs-registry";
 
 //#region src/hooks/useStyle.ts
 function useStyle(componentName, stylesFn) {
-	const { token, theme: theme$1, hashId } = theme.useToken();
+	const { token: token$1, theme: theme$1, hashId } = theme.useToken();
 	const scope = (className) => `.${hashId}.${componentName}-${className}`;
 	const cx = (...classes) => classes.map((cls) => `${componentName}-${cls} ${hashId}`).join(" ");
 	const wrapSSR = useStyleRegister({
 		theme: theme$1,
-		token,
+		token: token$1,
 		path: [componentName]
-	}, () => stylesFn(token, scope));
+	}, () => stylesFn(token$1, scope));
 	return {
 		wrapSSR,
 		cx,
 		scope,
-		token,
+		token: token$1,
 		hashId
 	};
 }
@@ -31,10 +34,10 @@ function useStyle(componentName, stylesFn) {
 //#region src/view/components/Header.tsx
 const { Header: AntHeader } = Layout;
 const Header = () => {
-	const { wrapSSR, cx } = useStyle("Header", (token, scope) => ({ [scope("header")]: {
+	const { wrapSSR, cx } = useStyle("Header", (token$1, scope) => ({ [scope("header")]: {
 		width: "100%",
 		height: "4rem",
-		backgroundColor: token.colorBgContainer
+		backgroundColor: token$1.colorBgContainer
 	} }));
 	return wrapSSR(/* @__PURE__ */ jsx(AntHeader, { className: cx("header") }));
 };
@@ -123,17 +126,737 @@ const createStore = (set) => ({
 const useStore = create()(devtools(immer(createStore), { name: "dgate-docs-store" }));
 var store_default = useStore;
 
+//#endregion
+//#region src/theme/light.json
+var token = {
+	"brnadColor.1": "#f1f5fd",
+	"brnadColor.2": "#e0e9f9",
+	"brnadColor.3": "#c8d8f5",
+	"brnadColor.4": "#a2bfee",
+	"brnadColor.5": "#769de4",
+	"brnadColor.6": "#4d75d9",
+	"brnadColor.7": "#4261ce",
+	"brnadColor.8": "#384fbd",
+	"brnadColor.9": "#33419a",
+	"brnadColor.10": "#20264b",
+	"cyan.1": "#e6fffb",
+	"cyan.2": "#b5f5ec",
+	"cyan.3": "#87e8de",
+	"cyan.4": "#5cdbd3",
+	"cyan.5": "#36cfc9",
+	"cyan.6": "#13c2c2",
+	"cyan.7": "#08979c",
+	"cyan.8": "#006d75",
+	"cyan.9": "#00474f",
+	"cyan.10": "#002329",
+	"geekblue.1": "#f0f5ff",
+	"geekblue.2": "#d6e4ff",
+	"geekblue.3": "#adc6ff",
+	"geekblue.4": "#85a5ff",
+	"geekblue.5": "#597ef7",
+	"geekblue.6": "#2f54eb",
+	"geekblue.7": "#1d39c4",
+	"geekblue.8": "#10239e",
+	"geekblue.9": "#061178",
+	"geekblue.10": "#030852",
+	"gold.1": "#fffbe6",
+	"gold.2": "#fff1b8",
+	"gold.3": "#ffe58f",
+	"gold.4": "#ffd666",
+	"gold.5": "#ffc53d",
+	"gold.6": "#faad14",
+	"gold.7": "#d48806",
+	"gold.8": "#ad6800",
+	"gold.9": "#874d00",
+	"gold.10": "#613400",
+	"green.1": "#f6ffed",
+	"green.2": "#d9f7be",
+	"green.3": "#b7eb8f",
+	"green.4": "#95de64",
+	"green.5": "#73d13d",
+	"green.6": "#52c41a",
+	"green.7": "#389e0d",
+	"green.8": "#237804",
+	"green.9": "#135200",
+	"green.10": "#092b00",
+	"lime.1": "#fcffe6",
+	"lime.2": "#f4ffb8",
+	"lime.3": "#eaff8f",
+	"lime.4": "#d3f261",
+	"lime.5": "#bae637",
+	"lime.6": "#a0d911",
+	"lime.7": "#7cb305",
+	"lime.8": "#5b8c00",
+	"lime.9": "#3f6600",
+	"lime.10": "#254000",
+	"magenta.1": "#fff0f6",
+	"magenta.2": "#ffd6e7",
+	"magenta.3": "#ffadd2",
+	"magenta.4": "#ff85c0",
+	"magenta.5": "#f759ab",
+	"magenta.6": "#eb2f96",
+	"magenta.7": "#c41d7f",
+	"magenta.8": "#9e1068",
+	"magenta.9": "#780650",
+	"magenta.10": "#520339",
+	"orange.1": "#fff7e6",
+	"orange.2": "#ffe7ba",
+	"orange.3": "#ffd591",
+	"orange.4": "#ffc069",
+	"colorText": "rgba(0, 0, 0, 0.88)",
+	"colorTextSecondary": "rgba(0, 0, 0, 0.65)",
+	"orange.5": "#ffa940",
+	"colorTextTertiary": "rgba(0, 0, 0, 0.45)",
+	"colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
+	"orange.6": "#fa8c16",
+	"orange.7": "#d46b08",
+	"colorTextLightSolid": "#ffffff",
+	"colorTextHeading": "rgba(0, 0, 0, 0.88)",
+	"colorTextLabel": "rgba(0, 0, 0, 0.65)",
+	"orange.8": "#ad4e00",
+	"colorTextDescription": "rgba(0, 0, 0, 0.45)",
+	"orange.9": "#873800",
+	"colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+	"orange.10": "#612500",
+	"purple.1": "#f9f0ff",
+	"purple.2": "#efdbff",
+	"purple.3": "#d3adf7",
+	"colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
+	"colorIcon": "rgba(0, 0, 0, 0.45)",
+	"purple.4": "#b37feb",
+	"colorIconHover": "rgba(0, 0, 0, 0.88)",
+	"colorBgContainer": "#ffffff",
+	"purple.5": "#9254de",
+	"colorBgElevated": "#ffffff",
+	"purple.6": "#722ed1",
+	"colorBgLayout": "#f5f5f5",
+	"purple.7": "#531dab",
+	"colorBgMask": "rgba(0, 0, 0, 0.45)",
+	"purple.8": "#391085",
+	"colorBgSpotlight": "rgba(0, 0, 0, 0.85)",
+	"purple.9": "#22075e",
+	"colorBorder": "#d9d9d9",
+	"purple.10": "#120338",
+	"colorBorderSecondary": "#f0f0f0",
+	"red.1": "#fff1f0",
+	"colorFill": "rgba(0, 0, 0, 0.15)",
+	"red.2": "#ffccc7",
+	"colorFillSecondary": "rgba(0, 0, 0, 0.06)",
+	"colorFillTertiary": "rgba(0, 0, 0, 0.04)",
+	"colorFillQuaternary": "rgba(0, 0, 0, 0.02)",
+	"red.3": "#ffa39e",
+	"red.4": "#ff7875",
+	"colorWhite": "#ffffff",
+	"red.5": "#ff4d4f",
+	"colorBgBase": "#ffffff",
+	"red.6": "#f5222d",
+	"colorTextBase": "#000000",
+	"red.7": "#cf1322",
+	"red.8": "#a8071a",
+	"colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+	"red.9": "#820014",
+	"colorBgTextActive": "rgba(0, 0, 0, 0.15)",
+	"red.10": "#5c0011",
+	"colorBgTextHover": "rgba(0, 0, 0, 0.06)",
+	"volcano.1": "#fff2e8",
+	"colorBorderBg": "#ffffff",
+	"volcano.2": "#ffd8bf",
+	"colorFillContent": "rgba(0, 0, 0, 0.06)",
+	"volcano.3": "#ffbb96",
+	"colorFillContentHover": "rgba(0, 0, 0, 0.15)",
+	"volcano.4": "#ff9c6e",
+	"colorFillAlter": "rgba(0, 0, 0, 0.02)",
+	"volcano.5": "#ff7a45",
+	"volcano.6": "#fa541c",
+	"volcano.7": "#d4380d",
+	"transparent": "rgba(0, 0, 0, 0)",
+	"colorSplit": "rgba(0, 0, 0, 0.06)",
+	"yellow.1": "#feffe6",
+	"volcano.8": "#ad2102",
+	"yellow.2": "#ffffb8",
+	"yellow.3": "#fffb8f",
+	"volcano.9": "#871400",
+	"yellow.4": "#fff566",
+	"volcano.10": "#610b00",
+	"yellow.5": "#ffec3d",
+	"yellow.6": "#fadb14",
+	"yellow.7": "#d4b106",
+	"yellow.8": "#ad8b00",
+	"yellow.9": "#876800",
+	"yellow.10": "#614700",
+	"colorPrimary": "#4d75d9",
+	"colorSuccess": "#52c41a",
+	"colorWarning": "#faad14",
+	"colorInfo": "#4d75d9",
+	"colorError": "#ff4d4f",
+	"colorLink": "#4d75d9",
+	"colorErrorBg": "#fff2f0",
+	"colorErrorBgHover": "#fff1f0",
+	"colorErrorBorder": "#ffccc7",
+	"colorErrorBorderHover": "#ffa39e",
+	"colorErrorHover": "#ff7875",
+	"colorErrorActive": "#d9363e",
+	"colorErrorTextHover": "#ff7875",
+	"colorErrorText": "#ff4d4f",
+	"colorErrorTextActive": "#d9363e",
+	"colorLinkHover": "#769de4",
+	"colorInfoBg": "#f1f5fd",
+	"colorInfoBgHover": "#e0e9f9",
+	"colorInfoBorder": "#c8d8f5",
+	"colorInfoBorderHover": "#a2bfee",
+	"colorInfoHover": "#769de4",
+	"colorInfoActive": "#4261ce",
+	"colorInfoTextHover": "#769de4",
+	"colorInfoText": "#4d75d9",
+	"colorInfoTextActive": "#4261ce",
+	"colorLinkActive": "#4261ce",
+	"colorPrimaryBg": "#f1f5fd",
+	"colorPrimaryBgHover": "#e0e9f9",
+	"colorPrimaryBorder": "#c8d8f5",
+	"colorPrimaryBorderHover": "#a2bfee",
+	"colorPrimaryHover": "#769de4",
+	"colorPrimaryActive": "#4261ce",
+	"colorPrimaryTextHover": "#769de4",
+	"colorPrimaryText": "#4d75d9",
+	"colorPrimaryTextActive": "#4261ce",
+	"colorSuccessBg": "#f6ffed",
+	"colorSuccessBgHover": "#d9f7be",
+	"colorSuccessBorder": "#b7eb8f",
+	"colorSuccessBorderHover": "#95de64",
+	"colorSuccessHover": "#95de64",
+	"colorSuccessActive": "#389e0d",
+	"colorSuccessTextHover": "#73d13d",
+	"colorSuccessText": "#52c41a",
+	"colorSuccessTextActive": "#389e0d",
+	"colorWarningBg": "#fffbe6",
+	"colorWarningBgHover": "#fff1b8",
+	"colorWarningBorder": "#ffe58f",
+	"colorWarningBorderHover": "#ffd666",
+	"colorWarningHover": "#ffd666",
+	"colorWarningActive": "#d48806",
+	"colorWarningTextHover": "#ffc53d",
+	"colorWarningText": "#faad14",
+	"colorWarningTextActive": "#d48806",
+	"colorErrorOutline": "rgba(255, 38, 6, 0.06)",
+	"colorWarningOutline": "rgba(255, 215, 5, 0.1)",
+	"controlItemBgActive": "#f1f5fd",
+	"controlItemBgActiveDisabled": "rgba(0, 0, 0, 0.15)",
+	"controlItemBgActiveHover": "#e0e9f9",
+	"controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+	"controlOutline": "rgba(5, 145, 255, 0.1)",
+	"controlTmpOutline": "rgba(0, 0, 0, 0.02)",
+	"borderRadius": 6,
+	"borderRadiusLG": 8,
+	"borderRadiusSM": 4,
+	"borderRadiusXS": 2,
+	"sizeStep": 4,
+	"sizeUnit": 4,
+	"controlInteractiveSize": 16,
+	"size": 16,
+	"sizeLG": 24,
+	"sizeMD": 20,
+	"sizeMS": 16,
+	"sizeSM": 12,
+	"sizeXL": 32,
+	"sizeXS": 8,
+	"sizeXXL": 48,
+	"controlHeight": 32,
+	"sizeXXS": 4,
+	"controlHeightLG": 40,
+	"controlHeightSM": 24,
+	"controlHeightXS": 16,
+	"lineWidth": 1,
+	"lineWidthBold": 2,
+	"lineWidthFocus": 4,
+	"controlOutlineWidth": 2,
+	"screenLG": 992,
+	"screenLGMax": 1199,
+	"screenLGMin": 992,
+	"screenMD": 768,
+	"screenMDMax": 991,
+	"screenMDMin": 768,
+	"screenSM": 576,
+	"screenSMMax": 767,
+	"screenSMMin": 576,
+	"screenXL": 1200,
+	"screenXLMax": 1599,
+	"screenXLMin": 1200,
+	"screenXS": 480,
+	"screenXSMax": 575,
+	"screenXSMin": 480,
+	"screenXXL": 1600,
+	"screenXXLMin": 1600,
+	"sizePopupArrow": 16,
+	"margin": 16,
+	"marginLG": 24,
+	"marginMD": 20,
+	"marginSM": 12,
+	"marginXL": 32,
+	"marginXS": 8,
+	"marginXXL": 48,
+	"marginXXS": 4,
+	"padding": 16,
+	"paddingLG": 24,
+	"paddingMD": 20,
+	"paddingSM": 12,
+	"paddingXL": 32,
+	"paddingXS": 8,
+	"paddingXXS": 4,
+	"paddingContentHorizontal": 16,
+	"paddingContentHorizontalLG": 24,
+	"paddingContentHorizontalSM": 16,
+	"paddingContentVertical": 12,
+	"paddingContentVerticalLG": 16,
+	"paddingContentVerticalSM": 8,
+	"controlPaddingHorizontal": 12,
+	"controlPaddingHorizontalSM": 8,
+	"fontFamily": "SF Pro",
+	"fontFamilyCode": "Courier Prime",
+	"fontSize": 14,
+	"fontSizeLG": 16,
+	"fontSizeSM": 12,
+	"fontSizeXL": 20,
+	"fontSizeHeading1": 38,
+	"fontSizeHeading2": 30,
+	"fontSizeHeading3": 24,
+	"fontSizeHeading4": 20,
+	"fontSizeHeading5": 16,
+	"lineHeight": 1.5714285714285714,
+	"lineHeightHeading1": 1.2105263157894737,
+	"lineHeightHeading2": 1.2666666666666666,
+	"lineHeightHeading3": 1.3333333333333333,
+	"lineHeightHeading4": 1.4,
+	"lineHeightHeading5": 1.5,
+	"lineHeightLG": 1.5,
+	"lineHeightSM": 1.6666666666666667,
+	"fontSizeIcon": 12,
+	"fontWeightStrong": 600,
+	"colorFillAlterSolid": "#fafafa",
+	"fontWeightNormal": 400,
+	"colorFilledHandleBg": "#f0f0f0",
+	"colorBgSolid": "#000000",
+	"colorBgSolidActive": "rgba(0, 0, 0, 0.95)",
+	"colorBgSolidHover": "rgba(0, 0, 0, 0.75)",
+	"solidTextColor": "#ffffff",
+	"pink.1": "#fff0f6",
+	"pink.2": "#ffd6e7",
+	"pink.3": "#ffadd2",
+	"pink.4": "#ff85c0",
+	"pink.5": "#f759ab",
+	"pink.6": "#eb2f96",
+	"pink.7": "#c41d7f",
+	"pink.8": "#9e1068",
+	"pink.9": "#780650",
+	"pink.10": "#520339",
+	"sizeXXXL": 60,
+	"sizeXXXXL": 72,
+	"paddingXXL": 48,
+	"paddingXXXL": 60,
+	"paddingXXXXL": 72,
+	"marginXXXL": 60,
+	"marginXXXXL": 72
+};
+
+//#endregion
+//#region src/view/helper/sidebar.utils.ts
+const methodColors = {
+	GET: {
+		bg: token.colorPrimaryBgHover,
+		color: token.colorPrimary
+	},
+	POST: {
+		bg: token["green.1"],
+		color: token.colorSuccess
+	},
+	DELETE: {
+		bg: token.colorErrorBg,
+		color: token.colorError
+	},
+	PUT: {
+		bg: token.colorWarningBg,
+		color: token.colorWarning
+	},
+	PATCH: {
+		bg: token["volcano.5"],
+		color: token.colorWhite
+	},
+	OPTIONS: {
+		bg: token["geekblue.2"],
+		color: token["geekblue.6"]
+	},
+	HEAD: {
+		bg: token["purple.1"],
+		color: token["purple.5"]
+	},
+	TRACE: {
+		bg: token["cyan.1"],
+		color: token["cyan.5"]
+	}
+};
+const buildTreeDataStructure = (data) => {
+	if (!data) return [];
+	return data.map((api) => {
+		return {
+			title: api.title,
+			key: api.id,
+			selectable: true,
+			data: api,
+			children: Object.entries(api.tags).map(([tag, endpoints]) => {
+				const tagId = `tag-${nanoid(8)}`;
+				return {
+					title: tag,
+					key: tagId,
+					selectable: false,
+					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
+							}
+						};
+					})
+				};
+			})
+		};
+	});
+};
+const findNodeByKey = (nodes, targetKey) => {
+	for (const node of nodes) {
+		if (node.key === targetKey) return node;
+		if (node.children && node.children.length > 0) {
+			const found = findNodeByKey(node.children, targetKey);
+			if (found) return found;
+		}
+	}
+	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 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$1, scope) => ({
+	[scope("sider")]: {
+		backgroundColor: token$1.colorBgContainer,
+		maxWidth: "17.5rem",
+		overflowY: "auto",
+		overflowX: "clip"
+	},
+	[scope("content")]: { padding: token$1.padding },
+	[scope("controls")]: {
+		display: "flex",
+		gap: token$1.marginXS,
+		marginBottom: token$1.marginSM
+	},
+	[scope("search-input")]: { flex: 1 },
+	[scope("tree")]: {
+		backgroundColor: "transparent",
+		"& .ant-tree-node-content-wrapper": {
+			overflow: "hidden",
+			width: "100%",
+			display: "flex",
+			alignItems: "center"
+		},
+		"& .ant-tree-title": {
+			width: "100%",
+			overflow: "hidden",
+			display: "flex",
+			alignItems: "center",
+			marginBlock: "auto"
+		},
+		"& .ant-tree-treenode": {
+			width: "100%",
+			padding: 0
+		},
+		"& .ant-tree-node-content-wrapper:hover": { backgroundColor: token$1.colorFillTertiary }
+	},
+	[scope("endpoint-item")]: {
+		display: "flex",
+		alignItems: "center",
+		gap: token$1.marginXS,
+		width: "100%",
+		maxWidth: "100%",
+		minWidth: "100%"
+	},
+	[scope("method-tag")]: {
+		minWidth: "3.75rem",
+		textAlign: "center",
+		border: "none"
+	},
+	[scope("endpoint-text")]: {
+		flex: 1,
+		maxWidth: "100%"
+	},
+	[scope("tag-title")]: {
+		color: token$1.colorText,
+		maxWidth: "100%",
+		display: "block"
+	},
+	[scope("api-title")]: {
+		color: token$1.colorText,
+		maxWidth: "100%",
+		display: "block",
+		padding: 0,
+		margin: 0,
+		"&.highlighted": { color: token$1.colorPrimary }
+	},
+	[scope("create-text")]: { color: token$1.colorTextSecondary }
+});
+
+//#endregion
+//#region src/view/helper/sidebar.components.tsx
+const { Text } = Typography;
+const EndpointItem = ({ method, title, cx }) => {
+	const methodStyle = methodColors[method];
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("endpoint-item"),
+		children: [/* @__PURE__ */ jsx(Tag, {
+			className: cx("method-tag"),
+			style: {
+				backgroundColor: methodStyle?.bg,
+				color: methodStyle?.color,
+				border: "none"
+			},
+			children: method
+		}), /* @__PURE__ */ jsx(Text, {
+			className: cx("endpoint-text"),
+			ellipsis: { tooltip: title },
+			style: { flex: 1 },
+			children: title
+		})]
+	});
+};
+const convertToRenderableTreeData = (treeDataStructure, selectedNode, 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} `, "") : "",
+			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, {
+				className: cx("api-title") + (isHighlighted ? " highlighted" : ""),
+				ellipsis: { tooltip: typeof node.title === "string" ? node.title : "" },
+				children: node.title
+			});
+		} else title = /* @__PURE__ */ jsx(Text, {
+			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/components/Sidebar.tsx
+const { Sider } = Layout;
+const Sidebar = () => {
+	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);
+	const builtTreeData = useMemo(() => buildTreeDataStructure(transformedData), [transformedData]);
+	const [searchValue, setSearchValue] = useState("");
+	const [autoExpandParent, setAutoExpandParent] = useState(true);
+	const { wrapSSR, cx } = useStyle("Sidebar", getSidebarStyles);
+	const handleSearch = (value) => {
+		if (value) {
+			const allKeys = getAllTreeKeys(builtTreeData);
+			setExpandedKeys(allKeys);
+			setSearchValue(value);
+			setAutoExpandParent(true);
+		} else {
+			setSearchValue(value);
+			setAutoExpandParent(false);
+		}
+	};
+	const renderTreeData = useMemo(() => {
+		return convertToRenderableTreeData(builtTreeData, selectedNode, cx);
+	}, [
+		builtTreeData,
+		selectedNode,
+		cx
+	]);
+	const filteredTreeData = useMemo(() => {
+		if (!searchValue) return renderTreeData;
+		const filteredOriginal = filterTreeData(builtTreeData, searchValue);
+		return convertToRenderableTreeData(filteredOriginal, selectedNode, cx);
+	}, [
+		builtTreeData,
+		searchValue,
+		selectedNode,
+		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));
+		if (stringKeys.length === 0) {
+			setSelectedNodeState([]);
+			setSelectedApi(null);
+			setSelectedEndpoint(null);
+			return;
+		}
+		const selectedKey = stringKeys[0];
+		const selectedNode$1 = findNodeByKey(builtTreeData, selectedKey);
+		if (selectedNode$1) handleNodeSelection(selectedNode$1.data, selectedKey);
+		setSelectedNodeState(stringKeys);
+	};
+	return wrapSSR(/* @__PURE__ */ jsx(Sider, {
+		width: 280,
+		className: cx("sider"),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cx("content"),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: cx("controls"),
+				children: [/* @__PURE__ */ jsx(Input, {
+					placeholder: "Search by APIs or Endpoints",
+					value: searchValue,
+					onChange: (e) => handleSearch(e.target.value),
+					allowClear: true,
+					className: cx("search-input")
+				}), /* @__PURE__ */ jsx(Button, {
+					onClick: collapseAll,
+					title: "Collapse All",
+					children: "Minify"
+				})]
+			}), /* @__PURE__ */ jsx(Tree, {
+				showLine: { showLeafIcon: false },
+				showIcon: false,
+				expandedKeys,
+				autoExpandParent,
+				selectedKeys: selectedNode,
+				onSelect: onTreeNodeSelect,
+				onExpand: (expandedKeysValue) => {
+					setExpandedKeys(expandedKeysValue);
+					setAutoExpandParent(false);
+				},
+				treeData: filteredTreeData,
+				className: cx("tree")
+			})]
+		})
+	}));
+};
+
 //#endregion
 //#region src/view/components/MainContent.tsx
 const MainContent = () => {
-	const { wrapSSR, cx } = useStyle("MainContent", (token, scope) => ({ [scope("container")]: {
-		backgroundColor: token.colorBgContainer,
+	const { wrapSSR, cx } = useStyle("MainContent", (token$1, scope) => ({ [scope("container")]: {
+		backgroundColor: token$1.colorBgContainer,
 		height: "100%",
 		width: "100%",
 		maxHeight: "100%",
 		overflow: "auto",
-		borderRadius: token.borderRadius,
-		padding: token.paddingXL
+		borderRadius: token$1.borderRadius,
+		padding: token$1.paddingXL
 	} }));
 	return wrapSSR(/* @__PURE__ */ jsx("div", { className: cx("container") }));
 };
@@ -177,18 +900,17 @@ const transformOpenApiToDocs = (api) => {
 //#region src/view/layout.tsx
 const DocumentationLayout = ({ data }) => {
 	const { setOriginalData } = store_default(({ view }) => view);
-	const { setTransformedData, transformedData } = store_default(({ view }) => view);
-	console.log({ transformedData });
+	const { setTransformedData } = store_default(({ view }) => view);
 	useEffect(() => {
 		setOriginalData(data);
-		const transformedData$1 = data.map(transformOpenApiToDocs);
-		setTransformedData(transformedData$1);
+		const transformedData = data.map(transformOpenApiToDocs);
+		setTransformedData(transformedData);
 	}, [data]);
-	const { cx } = useStyle("DocumentationLayout", (token, scope) => ({
+	const { cx } = useStyle("DocumentationLayout", (token$1, scope) => ({
 		[scope("container")]: {
 			display: "flex",
 			flexDirection: "column",
-			gap: token.marginLG,
+			gap: token$1.marginLG,
 			height: "100%",
 			maxHeight: "100%",
 			overflow: "hidden"
@@ -198,14 +920,14 @@ const DocumentationLayout = ({ data }) => {
 			height: "100%",
 			maxHeight: "100%",
 			overflow: "hidden",
-			gap: token.marginLG
+			gap: token$1.marginLG
 		}
 	}));
 	return /* @__PURE__ */ jsx(AntdRegistry, { children: /* @__PURE__ */ jsxs("div", {
 		className: cx("container"),
-		children: [/* @__PURE__ */ jsx(Header, {}), /* @__PURE__ */ jsx("div", {
+		children: [/* @__PURE__ */ jsx(Header, {}), /* @__PURE__ */ jsxs("div", {
 			className: cx("layout"),
-			children: /* @__PURE__ */ jsx(MainContent, {})
+			children: [/* @__PURE__ */ jsx(Sidebar, {}), /* @__PURE__ */ jsx(MainContent, {})]
 		})]
 	}) });
 };