@digi-frontend/dgate-api-documentation 4.0.0-beta.0 → 4.0.0-beta.1

package/dist/index.js

@@ -1,7 +1,6 @@
 import { create } from "zustand";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import * as React from "react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Alert, Breadcrumb, Button, Card, Divider, Drawer, Empty, Flex, Form, Grid, Input, Modal, Pagination, Select, Switch, Table, Tabs, Tag, Tooltip, Tree, Typography, message, theme } from "antd";
 import { AppstoreOutlined, BarsOutlined, CheckCircleOutlined, DownOutlined, EditOutlined, ExclamationCircleFilled, EyeOutlined, InfoCircleOutlined, LeftOutlined, MinusSquareOutlined, PlusOutlined, PlusSquareOutlined, RightOutlined, SafetyOutlined, SearchOutlined, UpCircleOutlined } from "@ant-design/icons";
@@ -431,36 +430,36 @@ var token = {
 //#region src/view/helper/sidebar.utils.ts
 const methodColors = {
 	GET: {
-		bg: token.colorPrimaryBgHover,
+		bg: "transparent",
 		color: token.colorPrimary
 	},
 	POST: {
-		bg: token.colorSuccess,
-		color: "#FFFFFF"
+		bg: "transparent",
+		color: token.colorSuccess
 	},
 	DELETE: {
-		bg: token.colorErrorBg,
+		bg: "transparent",
 		color: token.colorError
 	},
 	PUT: {
-		bg: token.colorWarningBg,
+		bg: "transparent",
 		color: token.colorWarning
 	},
 	PATCH: {
-		bg: token["volcano.1"],
+		bg: "transparent",
 		color: token["volcano.5"]
 	},
 	OPTIONS: {
-		bg: token["geekblue.2"],
+		bg: "transparent",
 		color: token["geekblue.6"]
 	},
 	HEAD: {
-		bg: token["purple.1"],
+		bg: "transparent",
 		color: token["purple.5"]
 	},
 	TRACE: {
-		bg: token["cyan.1"],
-		color: token["cyan.5"]
+		bg: "transparent",
+		color: token["volcano.4"]
 	}
 };
 const darkerMethodColors = {
@@ -497,43 +496,91 @@ const darkerMethodColors = {
 		color: "#FFFFFF"
 	}
 };
+const sidebarMethodColors = {
+	GET: {
+		bg: token.colorPrimaryBgHover,
+		color: token.colorPrimary
+	},
+	POST: {
+		bg: token.colorSuccessBg,
+		color: token.colorSuccess
+	},
+	DELETE: {
+		bg: token.colorErrorBg,
+		color: token.colorError
+	},
+	PUT: {
+		bg: token.colorWarningBg,
+		color: token.colorWarning
+	},
+	PATCH: {
+		bg: token["volcano.1"],
+		color: token["volcano.5"]
+	},
+	OPTIONS: {
+		bg: token["geekblue.2"],
+		color: token["geekblue.6"]
+	},
+	HEAD: {
+		bg: token["purple.1"],
+		color: token["purple.5"]
+	},
+	TRACE: {
+		bg: token["volcano.1"],
+		color: token["volcano.4"]
+	}
+};
 const buildTreeDataStructure = (data) => {
 	if (!data) return [];
 	return data.map((api) => {
 		const tagEntries = Object.entries(api.tags);
+		const defaultTag = tagEntries.find(([tag]) => tag.toLowerCase() === "default");
+		const nonDefaultTags = tagEntries.filter(([tag]) => tag.toLowerCase() !== "default");
+		const defaultEndpoints = defaultTag ? defaultTag[1].map((endpoint) => ({
+			title: endpoint.summary,
+			key: endpoint.id,
+			isLeaf: true,
+			selectable: true,
+			method: endpoint.method,
+			data: {
+				endpoint,
+				api,
+				tagName: "default",
+				parentApiId: api.id
+			}
+		})) : [];
+		const tagNodes = nonDefaultTags.map(([tag, endpoints]) => {
+			const tagId = `tag-${api.id}-${tag.replace(/\s+/g, "-").toLowerCase()}`;
+			return {
+				title: tag,
+				key: tagId,
+				selectable: true,
+				data: {
+					tagName: tag,
+					apiData: api
+				},
+				children: endpoints.map((endpoint) => ({
+					title: endpoint.summary,
+					key: endpoint.id,
+					isLeaf: true,
+					selectable: true,
+					method: endpoint.method,
+					data: {
+						endpoint,
+						api,
+						tagName: tag,
+						parentApiId: api.id,
+						tagId
+					}
+				}))
+			};
+		});
 		return {
 			title: api.title,
 			key: api.id,
 			selectable: true,
 			data: api,
-			children: tagEntries.map(([tag, endpoints]) => {
-				const tagId = `tag-${api.id}-${tag.replace(/\s+/g, "-").toLowerCase()}`;
-				return {
-					title: tag,
-					key: tagId,
-					selectable: true,
-					data: {
-						tagName: tag,
-						apiData: api
-					},
-					children: endpoints.map((endpoint) => {
-						return {
-							title: endpoint.summary,
-							key: endpoint.id,
-							isLeaf: true,
-							selectable: true,
-							method: endpoint.method,
-							data: {
-								endpoint,
-								api,
-								tagName: tag,
-								parentApiId: api.id,
-								tagId
-							}
-						};
-					})
-				};
-			})
+			children: [...tagNodes, ...defaultEndpoints]
 		};
 	});
 };
@@ -636,7 +683,9 @@ const getSidebarStyles = (token$1, scope) => ({
 		gap: token$1.marginXS,
 		width: "100%",
 		maxWidth: "100%",
-		minWidth: "100%"
+		minWidth: "100%",
+		paddingLeft: token$1.marginXS,
+		paddingRight: token$1.marginXS
 	},
 	[scope("method-tag")]: {
 		width: 51,
@@ -669,7 +718,8 @@ const getSidebarStyles = (token$1, scope) => ({
 		color: token$1.colorText,
 		maxWidth: "100%",
 		display: "block",
-		padding: 0,
+		paddingLeft: "4px",
+		paddingRight: "4px",
 		margin: 0
 	}
 });
@@ -678,7 +728,7 @@ const getSidebarStyles = (token$1, scope) => ({
 //#region src/view/helper/sidebar.components.tsx
 const { Text: Text$1 } = Typography;
 const EndpointItem = ({ method, title, cx, isSelected = false }) => {
-	const methodStyle = (isSelected ? darkerMethodColors : methodColors)[method];
+	const methodStyle = (isSelected ? darkerMethodColors : sidebarMethodColors)[method];
 	const isPost = method?.toUpperCase() === "POST";
 	return /* @__PURE__ */ jsxs("div", {
 		className: `${cx("endpoint-item")}${isSelected ? ` ${cx("endpoint-item-selected")}` : ""}`,
@@ -836,29 +886,23 @@ const useNodeSelection = () => {
 };
 
 //#endregion
-//#region src/assets/Minify.svg
-var _path$5;
-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 SvgMinify = function SvgMinify$1(props) {
-	return /* @__PURE__ */ React.createElement("svg", _extends$5({
-		xmlns: "http://www.w3.org/2000/svg",
-		width: 16,
-		height: 16,
-		fill: "none"
-	}, props), _path$5 || (_path$5 = /* @__PURE__ */ React.createElement("path", {
-		stroke: "currentcolor",
-		d: "m6 11.334 2-2 2 2M6 4.666l2 2 2-2"
-	})));
-};
-var Minify_default = SvgMinify;
+//#region src/assets/Minify.tsx
+const Minify = (props) => /* @__PURE__ */ jsxs("svg", {
+	width: "16",
+	height: "16",
+	viewBox: "0 0 16 16",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: [/* @__PURE__ */ jsx("path", {
+		d: "M6 11.334L8 9.33398L10 11.334",
+		stroke: "currentcolor"
+	}), /* @__PURE__ */ jsx("path", {
+		d: "M6 4.66602L8 6.66602L10 4.66602",
+		stroke: "currentcolor"
+	})]
+});
+var Minify_default = Minify;
 
 //#endregion
 //#region src/view/components/NoDataIcon.tsx
@@ -1193,32 +1237,23 @@ const Sidebar = ({ searchValue, setSearchValue, onNodeSelect }) => {
 };
 
 //#endregion
-//#region src/assets/link.svg
-var _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 SvgLink = function SvgLink$1(props) {
-	return /* @__PURE__ */ React.createElement("svg", _extends$4({
-		xmlns: "http://www.w3.org/2000/svg",
-		width: 12,
-		height: 12,
-		fill: "none"
-	}, props), _path$4 || (_path$4 = /* @__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$3 || (_path2$3 = /* @__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;
+//#region src/assets/link.tsx
+const Link = (props) => /* @__PURE__ */ jsxs("svg", {
+	width: "12",
+	height: "12",
+	viewBox: "0 0 12 12",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: [/* @__PURE__ */ jsx("path", {
+		d: "M3.875 9.25C2.085 9.25 0.625 7.79 0.625 6C0.625 4.21 2.085 2.75 3.875 2.75C4.08 2.75 4.25 2.92 4.25 3.125C4.25 3.33 4.08 3.5 3.875 3.5C2.495 3.5 1.375 4.62 1.375 6C1.375 7.38 2.495 8.5 3.875 8.5C5.255 8.5 6.375 7.38 6.375 6C6.375 5.795 6.545 5.625 6.75 5.625C6.955 5.625 7.125 5.795 7.125 6C7.125 7.79 5.665 9.25 3.875 9.25Z",
+		fill: "#4D75D9"
+	}), /* @__PURE__ */ jsx("path", {
+		d: "M8 9.375C7.795 9.375 7.625 9.205 7.625 9C7.625 8.795 7.795 8.625 8 8.625C9.445 8.625 10.625 7.445 10.625 6C10.625 4.555 9.445 3.375 8 3.375C6.555 3.375 5.375 4.555 5.375 6C5.375 6.205 5.205 6.375 5 6.375C4.795 6.375 4.625 6.205 4.625 6C4.625 4.14 6.14 2.625 8 2.625C9.86 2.625 11.375 4.14 11.375 6C11.375 7.86 9.86 9.375 8 9.375Z",
+		fill: "#4D75D9"
+	})]
+});
+var link_default = Link;
 
 //#endregion
 //#region src/view/components/ApiPage/components/ApiCard.tsx
@@ -1447,11 +1482,11 @@ function formatAuthType(authType) {
 	}
 }
 const ViewModeApiHeader = ({ api, viewLayout, onViewLayoutChange }) => {
-	const { wrapSSR, cx, token: token$1 } = useStyle("ViewModeApiHeader", (token$2, scope) => ({
+	const { wrapSSR, cx } = useStyle("ViewModeApiHeader", (token$1, scope) => ({
 		[scope("root")]: {
 			display: "flex",
 			flexDirection: "column",
-			gap: token$2.marginMD
+			gap: token$1.marginMD
 		},
 		[scope("meta-bar")]: {
 			display: "flex",
@@ -1467,20 +1502,20 @@ const ViewModeApiHeader = ({ api, viewLayout, onViewLayoutChange }) => {
 			display: "flex",
 			alignItems: "center",
 			paddingRight: 12,
-			borderRight: `1px solid ${token$2.colorBorderSecondary}`,
+			borderRight: `1px solid ${token$1.colorBorderSecondary}`,
 			marginRight: 12
 		},
 		[scope("jws-tag")]: {
 			display: "flex",
 			alignItems: "center",
 			height: 32,
-			background: token$2.colorPrimaryBg,
-			border: `1px solid ${token$2.colorPrimaryBorder}`,
+			background: token$1.colorPrimaryBg,
+			border: `1px solid ${token$1.colorPrimaryBorder}`,
 			borderRadius: 6,
 			padding: "0 8px",
 			fontSize: 12,
 			lineHeight: "20px",
-			color: token$2.colorPrimary,
+			color: token$1.colorPrimary,
 			fontWeight: 400,
 			margin: 0
 		},
@@ -1488,14 +1523,14 @@ const ViewModeApiHeader = ({ api, viewLayout, onViewLayoutChange }) => {
 			display: "inline-flex",
 			alignItems: "center",
 			gap: 4,
-			background: token$2.colorBgContainer,
-			border: `1px solid ${token$2.colorBorder}`,
+			background: token$1.colorBgContainer,
+			border: `1px solid ${token$1.colorBorder}`,
 			borderRadius: 4,
 			padding: "0 8px",
 			height: 32,
 			fontSize: 12,
 			lineHeight: "20px",
-			color: token$2.colorText,
+			color: token$1.colorText,
 			margin: 0,
 			boxSizing: "border-box"
 		},
@@ -1508,8 +1543,8 @@ const ViewModeApiHeader = ({ api, viewLayout, onViewLayoutChange }) => {
 			display: "inline-flex",
 			alignItems: "center",
 			gap: 8,
-			background: token$2.colorFillTertiary,
-			border: `1px solid ${token$2.colorBorder}`,
+			background: token$1.colorFillTertiary,
+			border: `1px solid ${token$1.colorBorder}`,
 			borderRadius: 6,
 			padding: "0 15px",
 			height: 32,
@@ -1518,13 +1553,13 @@ const ViewModeApiHeader = ({ api, viewLayout, onViewLayoutChange }) => {
 		},
 		[scope("version-icon")]: {
 			fontSize: 16,
-			color: token$2.colorTextDisabled,
+			color: token$1.colorTextDisabled,
 			display: "flex",
 			alignItems: "center"
 		},
 		[scope("version-text")]: {
 			fontSize: 14,
-			color: token$2.colorTextDisabled,
+			color: token$1.colorTextDisabled,
 			fontWeight: 400,
 			lineHeight: 1
 		},
@@ -1538,16 +1573,16 @@ const ViewModeApiHeader = ({ api, viewLayout, onViewLayoutChange }) => {
 			justifyContent: "center"
 		},
 		[scope("toggle-btn-active")]: {
-			border: `1px solid ${token$2.colorPrimary} !important`,
-			color: `${token$2.colorPrimary} !important`,
-			backgroundColor: `${token$2.colorBgContainer} !important`,
+			border: `1px solid ${token$1.colorPrimary} !important`,
+			color: `${token$1.colorPrimary} !important`,
+			backgroundColor: `${token$1.colorBgContainer} !important`,
 			zIndex: 1
 		},
 		[scope("description")]: {
-			fontSize: token$2.fontSizeLG,
-			color: token$2.colorTextTertiary
+			fontSize: token$1.fontSizeLG,
+			color: token$1.colorTextTertiary
 		},
-		[scope("title")]: { fontFamily: token$2.fontFamily }
+		[scope("title")]: { fontFamily: token$1.fontFamily }
 	}));
 	const version = api.relatedVersions?.find((v) => v.apiId === api.currentVersion)?.version || api.version;
 	return wrapSSR(/* @__PURE__ */ jsxs("div", {
@@ -1637,10 +1672,9 @@ const ViewModeApiHeader = ({ api, viewLayout, onViewLayoutChange }) => {
 //#region src/view/components/ApiPage/index.tsx
 const APIPage = () => {
 	const [selectedUrl, setSelectedUrl] = useState("");
-	const { view: { selectedApi, transformedData, setSelectedApi, setFocusedContent, setSelectedNodeKey, focusedTag, setFocusedTag } } = store_default();
+	const { view: { selectedApi, focusedTag, setFocusedTag } } = store_default();
 	const [viewStyle, setViewStyle] = useState("grid");
-	const { wrapSSR, cx, token: token$1 } = useStyle("DocumentationApiPage", () => ({}));
-	selectedApi?.relatedVersions?.find((v) => v.apiId === selectedApi?.currentVersion);
+	const { wrapSSR, token: token$1 } = useStyle("DocumentationApiPage", () => ({}));
 	const urlsOptions = useMemo(() => selectedApi?.servers?.map((server) => ({
 		label: server?.url,
 		value: server?.url
@@ -1903,7 +1937,7 @@ const EndpointPage = () => {
 		[scope("row-odd")]: { "& > td": { background: `${token$2.colorBgElevated} !important` } },
 		[scope("row-even")]: { "& > td": { background: `${token$2.colorBgLayout} !important` } }
 	}));
-	const methodStyle = methodColors[selectedEndpoint?.method];
+	const methodStyle = sidebarMethodColors[selectedEndpoint?.method];
 	const headerParams = buildRequestData(selectedEndpoint?.parameters?.filter((p) => p.in === "header") || [], token$1);
 	const pathParams = buildRequestData(selectedEndpoint?.parameters?.filter((p) => p.in === "path") || [], token$1);
 	const queryParams = buildRequestData(selectedEndpoint?.parameters?.filter((p) => p.in === "query") || [], token$1);
@@ -2010,12 +2044,18 @@ const EndpointPage = () => {
 								children: /* @__PURE__ */ jsx("span", { children: selectedEndpoint?.tagName || "default" })
 							})
 						},
-						{ title: /* @__PURE__ */ jsx("span", {
-							style: {
-								display: "flex",
-								gap: "1rem"
-							},
-							children: selectedEndpoint?.summary || "Endpoint Name"
+						{ title: /* @__PURE__ */ jsx(Tooltip, {
+							title: selectedEndpoint?.summary || "Endpoint Name",
+							children: /* @__PURE__ */ jsx("span", {
+								style: {
+									overflow: "hidden",
+									textOverflow: "ellipsis",
+									whiteSpace: "nowrap",
+									display: "block",
+									maxWidth: "300px"
+								},
+								children: selectedEndpoint?.summary || "Endpoint Name"
+							})
 						}) }
 					] })]
 				}),
@@ -2038,7 +2078,17 @@ const EndpointPage = () => {
 							flexShrink: 0
 						},
 						children: selectedEndpoint?.method
-					}), selectedEndpoint?.summary?.replace(selectedEndpoint?.method, "") ?? "--"]
+					}), /* @__PURE__ */ jsx(Tooltip, {
+						title: selectedEndpoint?.summary ?? "--",
+						children: /* @__PURE__ */ jsx("span", {
+							style: {
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								whiteSpace: "nowrap"
+							},
+							children: selectedEndpoint?.summary?.replace(selectedEndpoint?.method, "") ?? "--"
+						})
+					})]
 				}),
 				/* @__PURE__ */ jsx(Paragraph, {
 					style: {
@@ -2090,38 +2140,29 @@ const EndpointPage = () => {
 };
 
 //#endregion
-//#region src/assets/mouseSquare.svg
-var _path$3, _path2$2;
-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 SvgMouseSquare = function SvgMouseSquare$1(props) {
-	return /* @__PURE__ */ React.createElement("svg", _extends$3({
-		xmlns: "http://www.w3.org/2000/svg",
-		width: 18,
-		height: 18,
-		fill: "none"
-	}, props), _path$3 || (_path$3 = /* @__PURE__ */ React.createElement("path", {
-		stroke: "#fff",
+//#region src/assets/mouseSquare.tsx
+const MouseSquare = (props) => /* @__PURE__ */ jsxs("svg", {
+	width: "18",
+	height: "18",
+	viewBox: "0 0 18 18",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: [/* @__PURE__ */ jsx("path", {
+		d: "M16.5 9V6.75C16.5 3 15 1.5 11.25 1.5H6.75C3 1.5 1.5 3 1.5 6.75V11.25C1.5 15 3 16.5 6.75 16.5H9",
+		stroke: "white",
+		strokeWidth: "1.5",
 		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		strokeWidth: 1.5,
-		d: "M16.5 9V6.75C16.5 3 15 1.5 11.25 1.5h-4.5C3 1.5 1.5 3 1.5 6.75v4.5C1.5 15 3 16.5 6.75 16.5H9"
-	})), _path2$2 || (_path2$2 = /* @__PURE__ */ React.createElement("path", {
-		stroke: "#fff",
+		strokeLinejoin: "round"
+	}), /* @__PURE__ */ jsx("path", {
+		d: "M15.7202 13.3808L14.4978 13.7934C14.1603 13.9059 13.8902 14.1684 13.7777 14.5134L13.3652 15.7359C13.0127 16.7934 11.5277 16.7709 11.1977 15.7134L9.81025 11.2508C9.54025 10.3658 10.3577 9.54085 11.2352 9.81835L15.7053 11.2059C16.7553 11.5359 16.7702 13.0283 15.7202 13.3808Z",
+		stroke: "white",
+		strokeWidth: "1.5",
 		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		strokeWidth: 1.5,
-		d: "m15.72 13.38-1.222.413a1.13 1.13 0 0 0-.72.72l-.413 1.223c-.352 1.057-1.837 1.035-2.167-.023L9.81 11.251c-.27-.885.548-1.71 1.425-1.433l4.47 1.388c1.05.33 1.065 1.822.015 2.175"
-	})));
-};
-var mouseSquare_default = SvgMouseSquare;
+		strokeLinejoin: "round"
+	})]
+});
+var mouseSquare_default = MouseSquare;
 
 //#endregion
 //#region src/view/components/MainContent.tsx
@@ -2132,7 +2173,9 @@ const MainContent = ({ searchEnabled, handleResetSearch, handleVisitLandingPage
 			width: "100%",
 			height: "auto",
 			borderRadius: token$2.borderRadius,
-			padding: token$2.paddingXL
+			padding: token$2.paddingXL,
+			overflow: "hidden",
+			minWidth: 0
 		},
 		[scope("centered")]: {
 			display: "flex",
@@ -2255,7 +2298,9 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
 			flex: 1,
 			display: "flex",
 			alignItems: "center",
-			gap: token$2.marginSM
+			gap: token$2.marginSM,
+			minWidth: 0,
+			overflow: "hidden"
 		},
 		[scope("arrow-icon")]: {
 			width: 24,
@@ -2269,7 +2314,7 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
 			display: "flex",
 			alignItems: "center",
 			background: token$2.colorBgLayout,
-			padding: "4px 48px",
+			padding: "4px 4px",
 			borderRadius: token$2.borderRadius,
 			gap: 8
 		},
@@ -2363,15 +2408,22 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				className: cx("title-section"),
-				children: /* @__PURE__ */ jsxs(Title$1, {
-					level: 3,
-					style: {
-						margin: 0,
-						fontWeight: 600,
-						whiteSpace: "nowrap",
-						color: token$1.colorTextHeading
-					},
-					children: [apiName, " API Documentation"]
+				children: /* @__PURE__ */ jsx(Tooltip, {
+					title: `${apiName} API Documentation`,
+					children: /* @__PURE__ */ jsxs(Title$1, {
+						level: 3,
+						style: {
+							margin: 0,
+							fontWeight: 600,
+							whiteSpace: "nowrap",
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							color: token$1.colorTextHeading,
+							minWidth: 0,
+							flex: 1
+						},
+						children: [apiName, " API Documentation"]
+					})
 				})
 			}),
 			/* @__PURE__ */ jsxs("div", {
@@ -2581,70 +2633,103 @@ const GeneralSection = ({ apiName, authType, version, description, onApiNameChan
 };
 
 //#endregion
-//#region src/assets/trash.svg
-var _mask, _path$2, _path2$1, _path3;
-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 SvgTrash = function SvgTrash$1(props) {
-	return /* @__PURE__ */ React.createElement("svg", _extends$2({
-		xmlns: "http://www.w3.org/2000/svg",
-		fill: "none",
-		viewBox: "0 0 40 40"
-	}, props), _mask || (_mask = /* @__PURE__ */ React.createElement("mask", {
-		id: "trash_svg__a",
-		fill: "#fff"
-	}, /* @__PURE__ */ React.createElement("path", { d: "M0 8a8 8 0 0 1 8-8h24a8 8 0 0 1 8 8v24a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8z" }))), _path$2 || (_path$2 = /* @__PURE__ */ React.createElement("path", {
-		fill: "#FF4D4F",
-		d: "M8 0v1h24v-2H8zm32 8h-1v24h2V8zm-8 32v-1H8v2h24zM0 32h1V8h-2v24zm8 8v-1a7 7 0 0 1-7-7h-2a9 9 0 0 0 9 9zm32-8h-1a7 7 0 0 1-7 7v2a9 9 0 0 0 9-9zM32 0v1a7 7 0 0 1 7 7h2a9 9 0 0 0-9-9zM8 0v-1a9 9 0 0 0-9 9h2a7 7 0 0 1 7-7z",
-		mask: "url(#trash_svg__a)"
-	})), _path2$1 || (_path2$1 = /* @__PURE__ */ React.createElement("path", {
-		fill: "#FF4D4F",
-		d: "M26.75 15.484a76 76 0 0 0-7.515-.375q-2.227 0-4.455.225l-1.53.15"
-	})), _path3 || (_path3 = /* @__PURE__ */ React.createElement("path", {
-		stroke: "#FF4D4F",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		strokeWidth: 1.5,
-		d: "M26.75 15.484a76 76 0 0 0-7.515-.375q-2.227 0-4.455.225l-1.53.15M17.375 14.728l.165-.983c.12-.712.21-1.245 1.477-1.245h1.966c1.267 0 1.364.563 1.477 1.252l.165.975M25.137 17.856l-.487 7.552c-.083 1.177-.15 2.092-2.243 2.092h-4.815c-2.092 0-2.16-.915-2.242-2.092l-.488-7.553M18.748 23.375h2.497M18.125 20.375h3.75"
-	})));
-};
-var trash_default = SvgTrash;
+//#region src/assets/trash.tsx
+const Trash = (props) => /* @__PURE__ */ jsxs("svg", {
+	viewBox: "0 0 40 40",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: [
+		/* @__PURE__ */ jsx("mask", {
+			id: "path-1-inside-1_17984_239034",
+			fill: "white",
+			children: /* @__PURE__ */ jsx("path", { d: "M0 8C0 3.58172 3.58172 0 8 0H32C36.4183 0 40 3.58172 40 8V32C40 36.4183 36.4183 40 32 40H8C3.58172 40 0 36.4183 0 32V8Z" })
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M8 0V1H32V0V-1H8V0ZM40 8H39V32H40H41V8H40ZM32 40V39H8V40V41H32V40ZM0 32H1V8H0H-1V32H0ZM8 40V39C4.13401 39 1 35.866 1 32H0H-1C-1 36.9706 3.02944 41 8 41V40ZM40 32H39C39 35.866 35.866 39 32 39V40V41C36.9706 41 41 36.9706 41 32H40ZM32 0V1C35.866 1 39 4.13401 39 8H40H41C41 3.02944 36.9706 -1 32 -1V0ZM8 0V-1C3.02944 -1 -1 3.02944 -1 8H0H1C1 4.13401 4.13401 1 8 1V0Z",
+			fill: "#FF4D4F",
+			mask: "url(#path-1-inside-1_17984_239034)"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M26.75 15.4844C24.2525 15.2369 21.74 15.1094 19.235 15.1094C17.75 15.1094 16.265 15.1844 14.78 15.3344L13.25 15.4844",
+			fill: "#FF4D4F"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M26.75 15.4844C24.2525 15.2369 21.74 15.1094 19.235 15.1094C17.75 15.1094 16.265 15.1844 14.78 15.3344L13.25 15.4844",
+			stroke: "#FF4D4F",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M17.375 14.7275L17.54 13.745C17.66 13.0325 17.75 12.5 19.0175 12.5H20.9825C22.25 12.5 22.3475 13.0625 22.46 13.7525L22.625 14.7275",
+			stroke: "#FF4D4F",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M25.1373 17.8555L24.6498 25.408C24.5673 26.5855 24.4998 27.5005 22.4073 27.5005H17.5923C15.4998 27.5005 15.4323 26.5855 15.3498 25.408L14.8623 17.8555",
+			stroke: "#FF4D4F",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M18.7476 23.375H21.2451",
+			stroke: "#FF4D4F",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M18.125 20.375H21.875",
+			stroke: "#FF4D4F",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	]
+});
+var trash_default = Trash;
 
 //#endregion
-//#region src/assets/info-circle.svg
-var _path$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 SvgInfoCircle = function SvgInfoCircle$1(props) {
-	return /* @__PURE__ */ React.createElement("svg", _extends$1({
-		xmlns: "http://www.w3.org/2000/svg",
-		width: 24,
-		height: 24,
-		fill: "none"
-	}, props), _path$1 || (_path$1 = /* @__PURE__ */ React.createElement("path", {
-		stroke: "#000",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		strokeOpacity: .45,
-		strokeWidth: 1.5,
-		d: "M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10M12 8v5M11.995 16h.009"
-	})));
-};
-var info_circle_default = SvgInfoCircle;
+//#region src/assets/info-circle.tsx
+const InfoCircle = (props) => /* @__PURE__ */ jsxs("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: [
+		/* @__PURE__ */ jsx("path", {
+			d: "M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z",
+			stroke: "black",
+			strokeOpacity: "0.45",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M12 8V13",
+			stroke: "black",
+			strokeOpacity: "0.45",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M11.9946 16H12.0036",
+			stroke: "black",
+			strokeOpacity: "0.45",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	]
+});
+var info_circle_default = InfoCircle;
 
 //#endregion
 //#region src/hooks/useDebounce.ts
@@ -3367,7 +3452,8 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			padding: `${token$2.paddingXS}px ${token$2.padding}px`,
 			background: token$2.colorFillSecondary,
 			borderRadius: token$2.borderRadius,
-			cursor: "pointer"
+			cursor: "pointer",
+			overflow: "hidden"
 		},
 		[scope("endpoint-card-active")]: {
 			background: "transparent",
@@ -3391,7 +3477,10 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			fontSize: token$2.fontSizeLG,
 			fontWeight: 600,
 			color: token$2.colorTextHeading,
-			lineHeight: "24px"
+			lineHeight: "24px",
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap"
 		},
 		[scope("endpoint-form")]: {
 			display: "flex",
@@ -4012,14 +4101,17 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 								children: [/* @__PURE__ */ jsx("span", {
 									className: cx("method-badge"),
 									style: {
-										color: methodColor?.color,
+										color: isExpanded ? "#ffffff" : methodColor?.color,
 										borderColor: methodColor?.color,
-										backgroundColor: methodColor?.bg
+										backgroundColor: isExpanded ? methodColor?.color : "transparent"
 									},
 									children: ep.method
-								}), /* @__PURE__ */ jsx("span", {
-									className: cx("endpoint-path"),
-									children: ep.path
+								}), /* @__PURE__ */ jsx(Tooltip, {
+									title: ep.path,
+									children: /* @__PURE__ */ jsx("span", {
+										className: cx("endpoint-path"),
+										children: ep.path
+									})
 								})]
 							}), /* @__PURE__ */ jsx(UpCircleOutlined, {
 								onClick: () => handleEndpointClick(ep),
@@ -5128,7 +5220,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 //#endregion
 //#region src/view/components/ApiPage/components/UnsavedChangesBanner.tsx
 const UnsavedChangesBanner = ({ onClose }) => {
-	const { wrapSSR, cx, token: token$1 } = useStyle("UnsavedChangesBanner", (token$2, scope) => ({
+	const { wrapSSR, cx } = useStyle("UnsavedChangesBanner", (token$1, scope) => ({
 		[scope("root")]: {
 			position: "sticky",
 			top: 0,
@@ -5138,7 +5230,7 @@ const UnsavedChangesBanner = ({ onClose }) => {
 		},
 		[scope("alert")]: {
 			padding: "8px 12px",
-			fontSize: token$2.fontSize,
+			fontSize: token$1.fontSize,
 			fontWeight: 400,
 			borderRadius: 0
 		}
@@ -5197,14 +5289,15 @@ const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEd
 			alignItems: "center",
 			justifyContent: "space-between",
 			height: 50,
-			paddingBottom: token$2.margin,
+			paddingTop: token$2.controlHeightLG,
+			paddingBottom: token$2.controlHeightLG,
 			paddingRight: token$2.paddingLG,
 			borderBottom: `1px solid ${token$2.colorBorder}`,
 			width: "100%"
 		},
 		[scope("tag-row-last")]: {
 			borderBottom: "none",
-			paddingBottom: 0
+			paddingBottom: token$2.marginLG
 		},
 		[scope("tag-info")]: {
 			display: "flex",
@@ -6046,32 +6139,23 @@ const transformOpenApiToDocs = (api) => {
 };
 
 //#endregion
-//#region src/assets/copy.svg
-var _path, _path2;
-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 SvgCopy = function SvgCopy$1(props) {
-	return /* @__PURE__ */ React.createElement("svg", _extends({
-		xmlns: "http://www.w3.org/2000/svg",
-		width: 16,
-		height: 16,
-		fill: "none"
-	}, props), _path || (_path = /* @__PURE__ */ React.createElement("path", {
-		fill: "currentcolor",
-		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 || (_path2 = /* @__PURE__ */ React.createElement("path", {
-		fill: "currentcolor",
-		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;
+//#region src/assets/copy.tsx
+const Copy = (props) => /* @__PURE__ */ jsxs("svg", {
+	width: "16",
+	height: "16",
+	viewBox: "0 0 16 16",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: [/* @__PURE__ */ jsx("path", {
+		d: "M7.39967 15.1673H4.59967C1.99301 15.1673 0.833008 14.0073 0.833008 11.4007V8.60065C0.833008 5.99398 1.99301 4.83398 4.59967 4.83398H7.39967C10.0063 4.83398 11.1663 5.99398 11.1663 8.60065V11.4007C11.1663 14.0073 10.0063 15.1673 7.39967 15.1673ZM4.59967 5.83398C2.53301 5.83398 1.83301 6.53398 1.83301 8.60065V11.4007C1.83301 13.4673 2.53301 14.1673 4.59967 14.1673H7.39967C9.46634 14.1673 10.1663 13.4673 10.1663 11.4007V8.60065C10.1663 6.53398 9.46634 5.83398 7.39967 5.83398H4.59967Z",
+		fill: "currentcolor"
+	}), /* @__PURE__ */ jsx("path", {
+		d: "M11.3997 11.1673H10.6663C10.393 11.1673 10.1663 10.9407 10.1663 10.6673V8.60065C10.1663 6.53398 9.46634 5.83398 7.39967 5.83398H5.33301C5.05967 5.83398 4.83301 5.60732 4.83301 5.33398V4.60065C4.83301 1.99398 5.99301 0.833984 8.59967 0.833984H11.3997C14.0063 0.833984 15.1663 1.99398 15.1663 4.60065V7.40065C15.1663 10.0073 14.0063 11.1673 11.3997 11.1673ZM11.1663 10.1673H11.3997C13.4663 10.1673 14.1663 9.46732 14.1663 7.40065V4.60065C14.1663 2.53398 13.4663 1.83398 11.3997 1.83398H8.59967C6.53301 1.83398 5.83301 2.53398 5.83301 4.60065V4.83398H7.39967C10.0063 4.83398 11.1663 5.99398 11.1663 8.60065V10.1673Z",
+		fill: "currentcolor"
+	})]
+});
+var copy_default = Copy;
 
 //#endregion
 //#region src/view/components/EndpointPage/Codebox/Codebox.tsx