@digi-frontend/dgate-api-documentation 4.0.3 → 4.0.5

package/dist/index.mjs

@@ -1,12 +1,12 @@
 import { create } from "zustand";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { Alert, Breadcrumb, Button, Card, Col, Divider, Drawer, Empty, Flex, Form, Grid, Input, Modal, Pagination, Row, Select, Switch, Table, Tabs, Tag, Tooltip, Tree, Typography, message, theme } from "antd";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { Alert, Breadcrumb, Button, Card, Col, Divider, Drawer, Empty, Flex, Form, Grid, Input, Menu, Modal, Pagination, Row, Select, Switch, Table, Tabs, Tag, Tooltip, Tree, Typography, message, theme } from "antd";
 import { useStyleRegister } from "@ant-design/cssinjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import Text from "antd/es/typography/Text.js";
-import { AppstoreOutlined, BarsOutlined, CheckCircleOutlined, DownOutlined, EditOutlined, ExclamationCircleFilled, EyeOutlined, InfoCircleOutlined, LeftOutlined, MinusSquareOutlined, PlusOutlined, PlusSquareOutlined, RightOutlined, SafetyOutlined, SearchOutlined, UpCircleOutlined } from "@ant-design/icons";
+import { AppstoreOutlined, BarsOutlined, CheckCircleOutlined, CloseCircleOutlined, DownOutlined, EditOutlined, ExclamationCircleFilled, ExclamationCircleOutlined, EyeOutlined, InfoCircleOutlined, LeftOutlined, MinusSquareOutlined, PlusOutlined, PlusSquareOutlined, RightOutlined, SafetyOutlined, SearchOutlined, TagOutlined, UpCircleOutlined } from "@ant-design/icons";
 import { Resizable } from "re-resizable";
 import Title from "antd/es/typography/Title.js";
 import { Light } from "react-syntax-highlighter";
@@ -608,7 +608,8 @@ const getSidebarStyles$1 = (token, scope) => ({
 		backgroundColor: token.colorBgContainer,
 		overflowY: "auto",
 		overflowX: "clip",
-		borderRadius: token.borderRadius
+		borderRadius: token.borderRadius,
+		height: "100%"
 	},
 	[scope("content")]: { padding: token.padding },
 	[scope("controls")]: {
@@ -1068,8 +1069,8 @@ const Sidebar$1 = ({ searchValue, setSearchValue }) => {
 	};
 	return wrapSSR(/* @__PURE__ */ jsx(Resizable, {
 		as: "aside",
-		minWidth: 300,
-		maxWidth: 386,
+		minWidth: 240,
+		maxWidth: 240,
 		enable: {
 			top: false,
 			right: true,
@@ -1081,7 +1082,7 @@ const Sidebar$1 = ({ searchValue, setSearchValue }) => {
 			topLeft: false
 		},
 		defaultSize: {
-			width: 333,
+			width: 240,
 			height: "100%"
 		},
 		className: cx("sider"),
@@ -1731,7 +1732,7 @@ const requestColumns$1 = [
 	}
 ];
 const responseColumns$1 = [...requestColumns$1];
-const buildRequestData$1 = (params) => [...params].sort((a, b) => a.required === b.required ? 0 : a.required ? -1 : 1).map((p, index) => {
+const buildRequestData$1 = (params, colors) => [...params].sort((a, b) => a.required === b.required ? 0 : a.required ? -1 : 1).map((p, index) => {
 	let typeLabel = p.schema?.type;
 	if (p.schema?.type === "array" && p.schema?.items?.type) typeLabel = `${p.schema.type}_${p.schema.items.type}`;
 	return {
@@ -1740,17 +1741,17 @@ const buildRequestData$1 = (params) => [...params].sort((a, b) => a.required ===
 			p.name,
 			typeLabel && /* @__PURE__ */ jsx("span", {
 				style: {
-					color: "rgba(0,0,0,0.45)",
+					color: colors.typeLabel,
 					marginLeft: "0.25rem",
 					marginRight: "0.25rem"
 				},
 				children: typeLabel
 			}),
 			p.required ? /* @__PURE__ */ jsx("span", {
-				style: { color: "red" },
+				style: { color: colors.required },
 				children: "*"
 			}) : /* @__PURE__ */ jsx("span", {
-				style: { color: "#52C41A" },
+				style: { color: colors.optional },
 				children: "Optional"
 			})
 		] }),
@@ -1758,7 +1759,7 @@ const buildRequestData$1 = (params) => [...params].sort((a, b) => a.required ===
 		enum: p.schema?.enum ? p.schema.enum.map((e) => /* @__PURE__ */ jsx(Tag, { children: e }, e)) : "--"
 	};
 });
-const buildHeaderData$1 = (headers) => {
+const buildHeaderData$1 = (headers, colors) => {
 	if (!headers) return [];
 	return Object.entries(headers).sort(([, a], [, b]) => a.required === b.required ? 0 : a.required ? -1 : 1).map(([name, header], idx) => {
 		let typeLabel = header.schema?.type;
@@ -1769,17 +1770,17 @@ const buildHeaderData$1 = (headers) => {
 				name,
 				typeLabel && /* @__PURE__ */ jsx("span", {
 					style: {
-						color: "rgba(0,0,0,0.45)",
+						color: colors.typeLabel,
 						marginLeft: "0.25rem",
 						marginRight: "0.25rem"
 					},
 					children: typeLabel
 				}),
 				header.required ? /* @__PURE__ */ jsx("span", {
-					style: { color: "red" },
+					style: { color: colors.required },
 					children: "*"
 				}) : /* @__PURE__ */ jsx("span", {
-					style: { color: "#52C41A" },
+					style: { color: colors.optional },
 					children: "Optional"
 				})
 			] }, idx),
@@ -1792,17 +1793,13 @@ const EndpointPage$1 = () => {
 	const { selectedEndpoint, selectedApi, selectedStatusCode, setSelectedNodeKey, setFocusedContent, setFocusedTag } = useStore(({ view }) => view);
 	const [endpointTooltip, setEndpointTooltip] = useState("Copy endpoint");
 	const [selectedServer, setSelectedServer] = useState(0);
-	const { cx } = useStyle("EndpointPage", (token, scope) => ({
+	const { cx, token } = useStyle("EndpointPage", (token, scope) => ({
 		[scope("docs-endpoint-container")]: {
 			display: "flex",
 			flexDirection: "column",
-			gap: token.marginLG,
-			height: "100%"
-		},
-		[scope("content")]: {
-			width: "100%",
-			height: "100%"
+			gap: token.marginLG
 		},
+		[scope("content")]: { width: "100%" },
 		[scope("code")]: {
 			background: "unset",
 			borderRadius: token.borderRadius,
@@ -1826,12 +1823,19 @@ const EndpointPage$1 = () => {
 				padding: "0px 0.75rem 0.75rem 0.75rem",
 				".ant-tabs-tab": { paddingTop: "0" }
 			}
-		}
+		},
+		[scope("row-odd")]: { "& > td": { background: `${token.colorBgLayout} !important` } },
+		[scope("row-even")]: { "& > td": { background: `${token.colorBgContainer} !important` } }
 	}));
 	const methodStyle = methodColors$1[selectedEndpoint?.method];
-	const headerParams = buildRequestData$1(selectedEndpoint?.parameters?.filter((p) => p.in === "header") || []);
-	const pathParams = buildRequestData$1(selectedEndpoint?.parameters?.filter((p) => p.in === "path") || []);
-	const queryParams = buildRequestData$1(selectedEndpoint?.parameters?.filter((p) => p.in === "query") || []);
+	const paramColors = {
+		typeLabel: token.colorTextQuaternary,
+		required: token.colorError,
+		optional: token.colorSuccess
+	};
+	const headerParams = buildRequestData$1(selectedEndpoint?.parameters?.filter((p) => p.in === "header") || [], paramColors);
+	const pathParams = buildRequestData$1(selectedEndpoint?.parameters?.filter((p) => p.in === "path") || [], paramColors);
+	const queryParams = buildRequestData$1(selectedEndpoint?.parameters?.filter((p) => p.in === "query") || [], paramColors);
 	const requestTabs = [
 		{
 			key: "header",
@@ -1841,7 +1845,8 @@ const EndpointPage$1 = () => {
 				dataSource: headerParams,
 				pagination: false,
 				bordered: true,
-				size: "small"
+				size: "small",
+				rowClassName: (_, idx) => cx(idx % 2 === 0 ? "row-odd" : "row-even")
 			})
 		},
 		{
@@ -1852,7 +1857,8 @@ const EndpointPage$1 = () => {
 				dataSource: pathParams,
 				pagination: false,
 				bordered: true,
-				size: "small"
+				size: "small",
+				rowClassName: (_, idx) => cx(idx % 2 === 0 ? "row-odd" : "row-even")
 			})
 		},
 		{
@@ -1863,12 +1869,13 @@ const EndpointPage$1 = () => {
 				dataSource: queryParams,
 				pagination: false,
 				bordered: true,
-				size: "small"
+				size: "small",
+				rowClassName: (_, idx) => cx(idx % 2 === 0 ? "row-odd" : "row-even")
 			})
 		}
 	].filter((t) => t !== null);
 	const responseHeaders = (selectedEndpoint?.responses?.[selectedStatusCode || 200])?.headers;
-	const responseHeaderData = buildHeaderData$1(responseHeaders);
+	const responseHeaderData = buildHeaderData$1(responseHeaders, paramColors);
 	selectedApi?.servers?.map((server, index) => ({
 		value: index,
 		label: `${server.url}${selectedEndpoint?.path || ""}`
@@ -1912,7 +1919,7 @@ const EndpointPage$1 = () => {
 									display: "flex",
 									flexDirection: "row",
 									alignItems: "center",
-									color: "rgba(0,0,0,0.45)",
+									color: token.colorTextQuaternary,
 									gap: "0.25rem"
 								},
 								children: /* @__PURE__ */ jsx("span", { children: selectedEndpoint?.tagName || "default" })
@@ -1977,7 +1984,8 @@ const EndpointPage$1 = () => {
 						dataSource: responseHeaderData,
 						pagination: false,
 						bordered: true,
-						size: "small"
+						size: "small",
+						rowClassName: (_, idx) => cx(idx % 2 === 0 ? "row-odd" : "row-even")
 					})
 				})
 			]
@@ -2014,9 +2022,9 @@ const MainContent$1 = ({ searchEnabled, handleResetSearch, handleVisitLandingPag
 	const { wrapSSR, cx, token } = useStyle("MainContent", (token, scope) => ({
 		[scope("inner-doc-container")]: {
 			backgroundColor: token.colorBgContainer,
+			flex: 1,
+			minWidth: 0,
 			height: "100%",
-			width: "100%",
-			maxHeight: "100%",
 			overflow: "auto",
 			borderRadius: token.borderRadius,
 			padding: token.paddingXL
@@ -2102,7 +2110,7 @@ const MainContent$1 = ({ searchEnabled, handleResetSearch, handleVisitLandingPag
 //#region src/view/components/ApiPage/components/ApiDocumentationBar.tsx
 const { useBreakpoint: useBreakpoint$4 } = Grid;
 const { Title: Title$2 } = Typography;
-const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, hasChanges = false, switcherNode }) => {
+const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, hasChanges = false, hasErrors = false, switcherNode }) => {
 	const isMobile = !useBreakpoint$4().md;
 	const { wrapSSR, cx, token } = useStyle("ApiDocumentationBar", (token, scope) => ({
 		[scope("root")]: {
@@ -2238,7 +2246,7 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
 				}), /* @__PURE__ */ jsx(Button, {
 					size: "large",
 					type: "primary",
-					disabled: !hasChanges,
+					disabled: !hasChanges || hasErrors,
 					onClick: onSave,
 					children: "Save"
 				})]
@@ -2296,7 +2304,7 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
 				}), /* @__PURE__ */ jsx(Button, {
 					size: "large",
 					type: "primary",
-					disabled: !hasChanges,
+					disabled: !hasChanges || hasErrors,
 					onClick: onSave,
 					children: "Save & Publish Changes"
 				})]
@@ -2307,14 +2315,16 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
 //#endregion
 //#region src/view/components/ApiPage/components/GeneralSection.tsx
 const { useBreakpoint: useBreakpoint$3 } = Grid;
-const GeneralSection = ({ apiName, authType, version, description, onApiNameChange, onDescriptionChange, collapsed = false, onToggleCollapse, onChangeDetected }) => {
+const GeneralSection = ({ apiName, authType, version, description, onApiNameChange, onDescriptionChange, onChangeDetected, collapsed, onToggleCollapse, apiNameError, descriptionError }) => {
 	const isMobile = !useBreakpoint$3().md;
 	const { wrapSSR, cx, token } = useStyle("GeneralSection", (token, scope) => ({
 		[scope("root")]: {
 			display: "flex",
 			flexDirection: "column",
-			borderRadius: token.borderRadius,
-			overflow: "hidden",
+			gap: token.margin,
+			padding: `${token.marginLG}px ${token.marginLG}px 48px`,
+			background: token.colorBgElevated,
+			borderRadius: token.borderRadiusLG,
 			width: "100%"
 		},
 		[scope("head")]: {
@@ -2328,15 +2338,20 @@ const GeneralSection = ({ apiName, authType, version, description, onApiNameChan
 		[scope("body")]: {
 			display: "flex",
 			flexDirection: "column",
-			gap: token.paddingLG,
+			gap: token.margin,
 			padding: token.paddingLG,
-			paddingBottom: token.paddingXXL ?? 48,
 			background: token.colorBgElevated,
 			borderRadius: `0 0 ${token.borderRadius}px ${token.borderRadius}px`
 		},
+		[scope("fields")]: {
+			display: "flex",
+			flexDirection: "column",
+			gap: token.margin,
+			width: "100%"
+		},
 		[scope("row")]: {
 			display: "flex",
-			gap: token.paddingLG,
+			gap: token.margin,
 			width: "100%"
 		},
 		[scope("field")]: {
@@ -2355,108 +2370,91 @@ const GeneralSection = ({ apiName, authType, version, description, onApiNameChan
 			paddingBottom: token.paddingXS,
 			lineHeight: "22px"
 		},
-		[scope("label-required")]: {
+		[scope("required")]: {
 			color: token.colorError,
 			fontSize: token.fontSize
-		},
-		[scope("count")]: {
-			alignSelf: "flex-end",
-			fontSize: token.fontSize,
-			color: token.colorTextDescription,
-			marginTop: token.marginXXS
 		}
 	}));
-	return wrapSSR(/* @__PURE__ */ jsxs("div", {
-		className: cx("root"),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: cx("head"),
-			children: [/* @__PURE__ */ jsx(Title, {
-				level: 4,
-				style: {
-					margin: 0,
-					color: token.colorTextHeading
-				},
-				children: "General"
-			}), /* @__PURE__ */ jsx(Button, {
-				type: "text",
-				size: "large",
-				icon: /* @__PURE__ */ jsx(UpCircleOutlined, { style: { fontSize: 18 } }),
-				onClick: onToggleCollapse,
-				style: {
-					transform: collapsed ? "rotate(180deg)" : "rotate(0deg)",
-					transition: "transform 0.2s"
-				}
-			})]
-		}), !collapsed && /* @__PURE__ */ jsxs("div", {
-			className: cx("body"),
-			style: isMobile ? {
-				padding: token.paddingMD,
-				paddingBottom: token.paddingXXL ?? 48
-			} : void 0,
-			children: [/* @__PURE__ */ jsxs("div", {
+	const fieldsContent = /* @__PURE__ */ jsxs("div", {
+		className: cx("fields"),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cx("field"),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: cx("label"),
+					children: [/* @__PURE__ */ jsx("span", { children: "API Name" }), /* @__PURE__ */ jsx("span", {
+						className: cx("required"),
+						children: "*"
+					})]
+				}), /* @__PURE__ */ jsx(Input, {
+					size: "large",
+					value: apiName,
+					status: apiNameError ? "error" : void 0,
+					suffix: apiNameError ? /* @__PURE__ */ jsx(CloseCircleOutlined, {
+						style: {
+							color: token.colorError,
+							cursor: "pointer"
+						},
+						onClick: () => {
+							onApiNameChange("");
+							onChangeDetected?.();
+						}
+					}) : void 0,
+					onChange: (e) => {
+						onApiNameChange(e.target.value);
+						onChangeDetected?.();
+					},
+					maxLength: 100,
+					showCount: true
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
 				className: cx("row"),
 				style: isMobile ? { flexDirection: "column" } : void 0,
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: cx("field"),
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: cx("label"),
-							children: [/* @__PURE__ */ jsx("span", { children: "API Name" }), /* @__PURE__ */ jsx("span", {
-								className: cx("label-required"),
-								children: "*"
-							})]
-						}), /* @__PURE__ */ jsx(Input, {
-							size: "large",
-							value: apiName,
-							onChange: (e) => {
-								onApiNameChange(e.target.value);
-								onChangeDetected?.();
-							},
-							maxLength: 35,
-							showCount: true
-						})]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: cx("field"),
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: cx("label"),
-							children: [/* @__PURE__ */ jsx("span", { children: "Authentication Type" }), /* @__PURE__ */ jsx("span", {
-								className: cx("label-required"),
-								children: "*"
-							})]
-						}), /* @__PURE__ */ jsx(Input, {
-							size: "large",
-							value: authType,
-							disabled: true
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: cx("field"),
+					style: isMobile ? void 0 : {
+						flex: "none",
+						width: 436
+					},
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: cx("label"),
+						children: [/* @__PURE__ */ jsx("span", { children: "Authentication Type" }), /* @__PURE__ */ jsx("span", {
+							className: cx("required"),
+							children: "*"
 						})]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: cx("field"),
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: cx("label"),
-							children: [/* @__PURE__ */ jsx("span", { children: "Version" }), /* @__PURE__ */ jsx("span", {
-								className: cx("label-required"),
-								children: "*"
-							})]
-						}), /* @__PURE__ */ jsx(Input, {
-							size: "large",
-							value: version,
-							disabled: true
+					}), /* @__PURE__ */ jsx(Input, {
+						size: "large",
+						value: authType,
+						disabled: true
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: cx("field"),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: cx("label"),
+						children: [/* @__PURE__ */ jsx("span", { children: "Version" }), /* @__PURE__ */ jsx("span", {
+							className: cx("required"),
+							children: "*"
 						})]
-					})
-				]
-			}), /* @__PURE__ */ jsxs("div", {
+					}), /* @__PURE__ */ jsx(Input, {
+						size: "large",
+						value: version,
+						disabled: true
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
 				className: cx("field"),
-				style: { width: "100%" },
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: cx("label"),
 					children: [/* @__PURE__ */ jsx("span", { children: "Description" }), /* @__PURE__ */ jsx("span", {
-						className: cx("label-required"),
+						className: cx("required"),
 						children: "*"
 					})]
 				}), /* @__PURE__ */ jsx(Input.TextArea, {
 					size: "large",
 					value: description,
+					status: descriptionError ? "error" : void 0,
 					onChange: (e) => {
 						onDescriptionChange(e.target.value);
 						onChangeDetected?.();
@@ -2468,64 +2466,138 @@ const GeneralSection = ({ apiName, authType, version, description, onApiNameChan
 						resize: "vertical"
 					}
 				})]
+			})
+		]
+	});
+	return wrapSSR(isMobile ? /* @__PURE__ */ jsxs("div", {
+		style: { width: "100%" },
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx("head"),
+			children: [/* @__PURE__ */ jsx(Title, {
+				level: 4,
+				style: {
+					margin: 0,
+					color: token.colorTextHeading
+				},
+				children: "General"
+			}), /* @__PURE__ */ jsx(Button, {
+				type: "text",
+				size: "large",
+				icon: /* @__PURE__ */ jsx(UpCircleOutlined, { style: { fontSize: 18 } }),
+				onClick: onToggleCollapse,
+				style: {
+					transform: collapsed ? "rotate(180deg)" : "rotate(0deg)",
+					transition: "transform 0.2s"
+				}
 			})]
+		}), !collapsed && /* @__PURE__ */ jsx("div", {
+			className: cx("body"),
+			children: fieldsContent
 		})]
+	}) : /* @__PURE__ */ jsxs("div", {
+		className: cx("root"),
+		children: [/* @__PURE__ */ jsx(Title, {
+			level: 4,
+			style: {
+				margin: 0,
+				color: token.colorTextHeading
+			},
+			children: "General"
+		}), fieldsContent]
 	}));
 };
 //#endregion
 //#region src/assets/trash.tsx
-const Trash = (props) => /* @__PURE__ */ jsxs("svg", {
-	viewBox: "0 0 40 40",
+const Trash = (props) => {
+	const maskId = `trash-mask-${useId()}`;
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 40 40",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("mask", {
+				id: maskId,
+				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: "currentColor",
+				mask: `url(#${maskId})`
+			}),
+			/* @__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: "currentColor"
+			}),
+			/* @__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: "currentColor",
+				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: "currentColor",
+				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: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M18.7476 23.375H21.2451",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M18.125 20.375H21.875",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		]
+	});
+};
+//#endregion
+//#region src/assets/icons/editTag.tsx
+const EditTag = (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("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",
+			d: "M8.25 1.5H6.75C3 1.5 1.5 3 1.5 6.75V11.25C1.5 15 3 16.5 6.75 16.5H11.25C15 16.5 16.5 15 16.5 11.25V9.75",
+			stroke: "currentColor",
 			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",
+			d: "M12.0299 2.26592L6.11991 8.17592C5.89491 8.40092 5.66991 8.84342 5.62491 9.16592L5.30241 11.4234C5.18241 12.2409 5.75991 12.8109 6.57741 12.6984L8.83491 12.3759C9.14991 12.3309 9.59241 12.1059 9.82491 11.8809L15.7349 5.97092C16.7549 4.95092 17.2349 3.76592 15.7349 2.26592C14.2349 0.765922 13.0499 1.24592 12.0299 2.26592Z",
+			stroke: "currentColor",
 			strokeWidth: "1.5",
+			strokeMiterlimit: "10",
 			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",
+			d: "M11.1826 3.11328C11.6851 4.90578 13.0876 6.30828 14.8876 6.81828",
+			stroke: "currentColor",
 			strokeWidth: "1.5",
+			strokeMiterlimit: "10",
 			strokeLinecap: "round",
 			strokeLinejoin: "round"
 		})
@@ -3177,7 +3249,8 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
 //#endregion
 //#region src/view/components/ApiPage/components/EndpointsSection.tsx
 const { useBreakpoint: useBreakpoint$2 } = Grid;
-const PAGE_SIZE = 5;
+const PAGE_SIZE = 4;
+const VIEW_PAGE_SIZE = 4;
 const getStatusCodeColor = (code, token) => {
 	const n = parseInt(code, 10);
 	if (n >= 400 && n < 500) return {
@@ -3197,8 +3270,24 @@ const buildViewParamRows = (params) => params.map((p, idx) => ({
 	description: p.description ?? "",
 	enum: p.enum ?? []
 }));
-const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse, endpointNames, endpointDescs, endpointTags, availableTags, onEndpointNameChange, onEndpointDescChange, onEndpointTagsChange, endpointParams, onAddParameter, onEditParameter, onDeleteParameter, endpointResponseParams, onAddResponseParameter, onEditResponseParameter, onDeleteResponseParameter, mode = "edit" }) => {
+const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse, endpointNames, endpointDescs, endpointTags, availableTags, onEndpointNameChange, onEndpointDescChange, onEndpointTagsChange, endpointParams, onAddParameter, onEditParameter, onDeleteParameter, endpointResponseParams, onAddResponseParameter, onEditResponseParameter, onDeleteResponseParameter, mode = "edit", selectedEndpointKey }) => {
 	const [expandedId, setExpandedId] = useState(null);
+	const [activeTab, setActiveTab] = useState("general");
+	useEffect(() => {
+		setActiveTab("general");
+	}, [selectedEndpointKey]);
+	useEffect(() => {
+		if (!selectedEndpointKey) return;
+		if (selectedStatusCodes[selectedEndpointKey]) return;
+		const ep = Object.values(endpointsByTag).flat().find((e) => e.id === selectedEndpointKey);
+		if (!ep) return;
+		const keys = Object.keys(ep.responses ?? {});
+		const defaultCode = keys.includes("200") ? "200" : keys[0];
+		if (defaultCode) setSelectedStatusCodes((prev) => ({
+			...prev,
+			[selectedEndpointKey]: defaultCode
+		}));
+	}, [selectedEndpointKey]);
 	const [paramDrawerOpen, setParamDrawerOpen] = useState(false);
 	const [paramDrawerEndpointId, setParamDrawerEndpointId] = useState(null);
 	const [paramDrawerMode, setParamDrawerMode] = useState("add");
@@ -3245,10 +3334,13 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 		[scope("root")]: {
 			display: "flex",
 			flexDirection: "column",
-			borderRadius: token.borderRadius,
-			overflow: "hidden",
 			width: "100%",
-			flexShrink: 0
+			flexShrink: 0,
+			"& .ant-tabs-content-holder": {
+				background: token.colorBgElevated,
+				borderRadius: token.borderRadiusLG,
+				padding: `${token.paddingLG}px ${token.paddingLG}px 48px`
+			}
 		},
 		[scope("head")]: {
 			display: "flex",
@@ -3297,15 +3389,12 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "center",
-			width: 64,
-			padding: `0 ${token.paddingXS}px`,
+			padding: "0 15px",
 			borderRadius: token.borderRadius,
-			border: "1px solid",
 			fontSize: token.fontSize,
 			fontWeight: 400,
 			lineHeight: "22px",
-			whiteSpace: "nowrap",
-			alignSelf: "stretch"
+			whiteSpace: "nowrap"
 		},
 		[scope("endpoint-path")]: {
 			fontSize: token.fontSizeLG,
@@ -3386,7 +3475,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			overflow: "hidden"
 		},
 		[scope("code-area")]: {
-			background: "#1d2856",
+			background: token.colorBgSpotlight,
 			padding: "10px 12px",
 			fontFamily: "Cairo, sans-serif",
 			fontSize: 14,
@@ -3398,7 +3487,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			display: "block"
 		},
 		[scope("code-footer")]: {
-			background: "#161d40",
+			background: token.colorBgSpotlight,
 			padding: 12,
 			borderBottomLeftRadius: 8,
 			borderBottomRightRadius: 8,
@@ -3555,26 +3644,36 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			gap: 8
 		},
 		[scope("param-edit-btn")]: {
-			width: 32,
-			height: 32,
+			width: 40,
+			height: 40,
 			padding: 0,
+			lineHeight: 1,
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "center",
-			borderColor: token.colorPrimary,
+			borderRadius: 8,
+			borderColor: "#D9D9D9",
+			background: "#FFF !important",
+			boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.02) !important",
 			color: token.colorPrimary,
+			"& .ant-btn-icon": {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center"
+			},
 			"&:hover": {
 				borderColor: `${token.colorPrimary} !important`,
 				color: `${token.colorPrimary} !important`
 			}
 		},
 		[scope("param-delete-btn")]: {
-			width: 32,
-			height: 32,
+			width: 40,
+			height: 40,
 			padding: 0,
 			display: "flex",
 			alignItems: "center",
-			justifyContent: "center"
+			justifyContent: "center",
+			"& svg path[mask]": { display: "none" }
 		},
 		[".delete-param-confirm-modal .ant-modal-container"]: {
 			"--ant-modal-content-padding": "0px !important",
@@ -3898,36 +3997,1162 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			}
 		}
 	];
-	return wrapSSR(/* @__PURE__ */ jsxs("div", {
-		className: cx("root"),
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: cx("head"),
-				children: [/* @__PURE__ */ jsx(Title, {
+	if (selectedEndpointKey) {
+		const ep = Object.values(endpointsByTag).flat().find((e) => e.id === selectedEndpointKey);
+		if (!ep) return wrapSSR(/* @__PURE__ */ jsx("div", {}));
+		const methodColor = methodColors$1[ep.method];
+		const epHeader = /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: token.marginXS,
+				marginBottom: token.marginLG
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				className: cx("method-badge"),
+				style: {
+					color: methodColor?.color,
+					backgroundColor: methodColor?.bg ?? "transparent"
+				},
+				children: ep.method
+			}), /* @__PURE__ */ jsx(Tooltip, {
+				title: ep.path,
+				children: /* @__PURE__ */ jsx(Title, {
 					level: 4,
 					style: {
 						margin: 0,
 						color: token.colorTextHeading
 					},
-					children: "Endpoints"
-				}), /* @__PURE__ */ jsx(Button, {
-					type: "text",
-					size: "large",
-					icon: /* @__PURE__ */ jsx(UpCircleOutlined, { style: { fontSize: 18 } }),
-					onClick: onToggleCollapse,
-					style: {
-						transform: collapsed ? "rotate(180deg)" : "rotate(0deg)",
-						transition: "transform 0.2s"
-					}
-				})]
-			}),
-			!collapsed && /* @__PURE__ */ jsx("div", {
-				className: cx("body"),
-				children: Object.values(endpointsByTag).flat().map((ep) => {
-					const isExpanded = expandedId === ep.id;
-					const methodColor = methodColors$1[ep.method];
-					return /* @__PURE__ */ jsxs("div", { children: [
-						/* @__PURE__ */ jsxs("div", {
+					children: ep.path
+				})
+			})]
+		});
+		return wrapSSR(/* @__PURE__ */ jsxs("div", {
+			className: cx("root"),
+			children: [
+				/* @__PURE__ */ jsx(Tabs, {
+					activeKey: activeTab,
+					onChange: setActiveTab,
+					tabBarStyle: {
+						background: "transparent",
+						padding: "0 16px",
+						marginBottom: 16
+					},
+					tabBarGutter: 32,
+					style: { borderRadius: `0 0 ${token.borderRadius}px ${token.borderRadius}px` },
+					items: [
+						{
+							key: "general",
+							label: "General",
+							children: /* @__PURE__ */ jsxs(Fragment, { children: [epHeader, /* @__PURE__ */ jsxs("div", {
+								style: {
+									display: "flex",
+									flexDirection: "column",
+									gap: token.paddingLG
+								},
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: cx("form-row"),
+									style: isMobile ? { flexDirection: "column" } : void 0,
+									children: [/* @__PURE__ */ jsxs("div", {
+										className: cx("form-field"),
+										children: [/* @__PURE__ */ jsxs("div", {
+											className: cx("field-label"),
+											children: [/* @__PURE__ */ jsx("span", { children: "Endpoint Name" }), /* @__PURE__ */ jsx("span", {
+												className: cx("label-required"),
+												children: "*"
+											})]
+										}), /* @__PURE__ */ jsx(Input, {
+											size: "large",
+											value: endpointNames[ep.id] ?? ep.summary ?? "",
+											onChange: (e) => onEndpointNameChange(ep.id, e.target.value),
+											maxLength: 100,
+											showCount: true
+										})]
+									}), /* @__PURE__ */ jsxs("div", {
+										className: cx("form-field"),
+										children: [/* @__PURE__ */ jsx("div", {
+											className: cx("field-label"),
+											children: /* @__PURE__ */ jsx("span", { children: "Endpoint Tag" })
+										}), /* @__PURE__ */ jsx(Select, {
+											mode: "multiple",
+											size: "large",
+											style: { width: "100%" },
+											placeholder: "Select",
+											value: endpointTags[ep.id] ?? ep.tags ?? [],
+											options: availableTags.map((t) => ({
+												label: t,
+												value: t
+											})),
+											onChange: (val) => onEndpointTagsChange(ep.id, val)
+										})]
+									})]
+								}), /* @__PURE__ */ jsxs("div", {
+									className: cx("form-field"),
+									style: { width: "100%" },
+									children: [/* @__PURE__ */ jsxs("div", {
+										className: cx("field-label"),
+										children: [/* @__PURE__ */ jsx("span", { children: "Description" }), /* @__PURE__ */ jsx("span", {
+											className: cx("label-optional"),
+											children: "(optional)"
+										})]
+									}), /* @__PURE__ */ jsx(Input.TextArea, {
+										value: endpointDescs[ep.id] ?? ep.description ?? "",
+										onChange: (e) => onEndpointDescChange(ep.id, e.target.value),
+										maxLength: 500,
+										showCount: true,
+										style: {
+											height: 52,
+											resize: "vertical"
+										}
+									})]
+								})]
+							})] })
+						},
+						{
+							key: "request",
+							label: "Request",
+							children: /* @__PURE__ */ jsxs(Fragment, { children: [epHeader, /* @__PURE__ */ jsxs("div", {
+								className: cx("form-field"),
+								style: { width: "100%" },
+								children: [
+									/* @__PURE__ */ jsx("div", {
+										className: cx("section-header"),
+										children: isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+											style: {
+												display: "flex",
+												alignItems: "center",
+												gap: token.marginMD
+											},
+											children: [/* @__PURE__ */ jsx("span", {
+												className: cx("section-title"),
+												children: "Request Details"
+											}), /* @__PURE__ */ jsx(Button, {
+												ghost: true,
+												type: "primary",
+												icon: /* @__PURE__ */ jsx(SearchOutlined, {}),
+												size: "large",
+												style: {
+													width: 40,
+													height: 40,
+													padding: 0
+												},
+												disabled: (endpointParams[ep.id] ?? []).length === 0,
+												onClick: () => setShowRequestSearch((prev) => ({
+													...prev,
+													[ep.id]: !prev[ep.id]
+												}))
+											})]
+										}), /* @__PURE__ */ jsx(Button, {
+											ghost: true,
+											type: "primary",
+											icon: /* @__PURE__ */ jsx(PlusOutlined, {}),
+											onClick: () => {
+												setDrawerSource("request");
+												setParamDrawerMode("add");
+												setEditParamIdx(null);
+												setParamDrawerEndpointId(ep.id);
+												setParamDrawerOpen(true);
+											},
+											children: "Add Parameter"
+										})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+											style: {
+												display: "flex",
+												alignItems: "center",
+												gap: 24
+											},
+											children: [/* @__PURE__ */ jsx("span", {
+												className: cx("section-title"),
+												children: "Request Details"
+											}), /* @__PURE__ */ jsx(Input.Search, {
+												placeholder: "Search by parameter name",
+												style: { width: 310 },
+												disabled: (endpointParams[ep.id] ?? []).length === 0,
+												value: requestSearches[ep.id] ?? "",
+												onChange: (e) => {
+													const val = e.target.value;
+													setRequestSearches((prev) => ({
+														...prev,
+														[ep.id]: val
+													}));
+													setRequestPages((prev) => new Map(prev).set(ep.id, 1));
+												},
+												allowClear: true
+											})]
+										}), /* @__PURE__ */ jsx(Button, {
+											ghost: true,
+											type: "primary",
+											icon: /* @__PURE__ */ jsx(PlusOutlined, {}),
+											onClick: () => {
+												setDrawerSource("request");
+												setParamDrawerMode("add");
+												setEditParamIdx(null);
+												setParamDrawerEndpointId(ep.id);
+												setParamDrawerOpen(true);
+											},
+											children: "Add Parameter"
+										})] })
+									}),
+									isMobile && showRequestSearch[ep.id] && /* @__PURE__ */ jsx(Input.Search, {
+										placeholder: "Search by parameter name",
+										style: {
+											width: "100%",
+											marginTop: 8
+										},
+										disabled: (endpointParams[ep.id] ?? []).length === 0,
+										value: requestSearches[ep.id] ?? "",
+										onChange: (e) => {
+											const val = e.target.value;
+											setRequestSearches((prev) => ({
+												...prev,
+												[ep.id]: val
+											}));
+											setRequestPages((prev) => new Map(prev).set(ep.id, 1));
+										},
+										allowClear: true,
+										autoFocus: true
+									}),
+									(endpointParams[ep.id] ?? []).length === 0 ? /* @__PURE__ */ jsx("div", {
+										className: cx("empty-wrapper"),
+										children: /* @__PURE__ */ jsx(Empty, {
+											image: Empty.PRESENTED_IMAGE_SIMPLE,
+											imageStyle: {
+												width: 184,
+												height: 117
+											},
+											description: /* @__PURE__ */ jsx("span", {
+												className: cx("empty-description"),
+												children: "No Data"
+											})
+										})
+									}) : (() => {
+										const reqSearch = (debouncedRequestSearches[ep.id] ?? "").toLowerCase();
+										const allReqParams = (endpointParams[ep.id] ?? []).filter((p) => p.name.toLowerCase().includes(reqSearch));
+										if (allReqParams.length === 0) return /* @__PURE__ */ jsx("div", {
+											className: cx("empty-wrapper"),
+											children: /* @__PURE__ */ jsx(Empty, {
+												image: Empty.PRESENTED_IMAGE_SIMPLE,
+												imageStyle: {
+													width: 184,
+													height: 117
+												},
+												description: /* @__PURE__ */ jsx("span", {
+													className: cx("empty-description"),
+													children: "No Data"
+												})
+											})
+										});
+										const reqPage = requestPages.get(ep.id) ?? 1;
+										const pagedReqParams = allReqParams.slice((reqPage - 1) * PAGE_SIZE, reqPage * PAGE_SIZE);
+										return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+											className: cx("param-list"),
+											style: { marginTop: token.margin },
+											children: pagedReqParams.map((param, i) => {
+												const idx = (reqPage - 1) * PAGE_SIZE + i;
+												return /* @__PURE__ */ jsx("div", {
+													className: cx("param-item-row"),
+													children: isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+														style: {
+															display: "flex",
+															alignItems: "center",
+															gap: 24,
+															flex: 1,
+															minWidth: 0
+														},
+														children: [/* @__PURE__ */ jsxs("div", {
+															className: cx("param-detail-cell"),
+															children: [/* @__PURE__ */ jsx("span", {
+																className: cx("param-detail-label"),
+																children: "Parameter Name"
+															}), /* @__PURE__ */ jsx("span", {
+																className: cx("param-detail-value"),
+																children: param.name
+															})]
+														}), /* @__PURE__ */ jsxs("div", {
+															className: cx("param-detail-cell"),
+															style: {
+																flex: 1,
+																minWidth: 0
+															},
+															children: [/* @__PURE__ */ jsx("span", {
+																className: cx("param-detail-label"),
+																children: "Parameter In"
+															}), /* @__PURE__ */ jsx("span", {
+																className: cx("param-detail-value"),
+																children: param.in
+															})]
+														})]
+													}), /* @__PURE__ */ jsxs("div", {
+														style: {
+															display: "flex",
+															alignItems: "center",
+															gap: token.margin,
+															background: token.colorFillTertiary,
+															borderRadius: token.borderRadius,
+															padding: `0 ${token.marginSM}px`,
+															height: 50,
+															flexShrink: 0
+														},
+														children: [/* @__PURE__ */ jsx(Button, {
+															danger: true,
+															icon: /* @__PURE__ */ jsx(Trash, {
+																width: 32,
+																height: 32
+															}),
+															style: {
+																padding: 0,
+																lineHeight: 1,
+																width: 40,
+																height: 40
+															},
+															className: cx("param-delete-btn"),
+															onClick: () => setDeleteParamModal({
+																open: true,
+																endpointId: ep.id,
+																idx,
+																name: param.name,
+																source: "request"
+															})
+														}), /* @__PURE__ */ jsx(Button, {
+															ghost: true,
+															icon: /* @__PURE__ */ jsx(EditTag, {
+																width: 18,
+																height: 18
+															}),
+															style: {
+																width: 40,
+																height: 40,
+																padding: 0,
+																lineHeight: 1
+															},
+															className: cx("param-edit-btn"),
+															onClick: () => {
+																setDrawerSource("request");
+																setParamDrawerMode("edit");
+																setEditParamIdx(idx);
+																setParamDrawerEndpointId(ep.id);
+																setParamDrawerOpen(true);
+															}
+														})]
+													})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+														className: cx("param-details"),
+														children: [
+															/* @__PURE__ */ jsxs("div", {
+																className: cx("param-detail-cell"),
+																children: [/* @__PURE__ */ jsx("span", {
+																	className: cx("param-detail-label"),
+																	children: "Parameter Name"
+																}), /* @__PURE__ */ jsx("span", {
+																	className: cx("param-detail-value"),
+																	children: param.name
+																})]
+															}),
+															/* @__PURE__ */ jsxs("div", {
+																className: cx("param-detail-cell"),
+																children: [/* @__PURE__ */ jsx("span", {
+																	className: cx("param-detail-label"),
+																	children: "Parameter In"
+																}), /* @__PURE__ */ jsx("span", {
+																	className: cx("param-detail-value"),
+																	children: param.in
+																})]
+															}),
+															/* @__PURE__ */ jsxs("div", {
+																className: cx("param-detail-cell"),
+																children: [/* @__PURE__ */ jsx("span", {
+																	className: cx("param-detail-label"),
+																	children: "Parameter Type"
+																}), /* @__PURE__ */ jsx("span", {
+																	className: cx("param-detail-value"),
+																	children: param.type
+																})]
+															}),
+															/* @__PURE__ */ jsxs("div", {
+																className: cx("param-detail-cell"),
+																children: [/* @__PURE__ */ jsx("span", {
+																	className: cx("param-detail-label"),
+																	children: "Enum"
+																}), param.enum && param.enum.length > 0 ? /* @__PURE__ */ jsxs("span", {
+																	className: cx("param-enum-container"),
+																	children: [/* @__PURE__ */ jsx("span", {
+																		className: cx("param-enum-tag"),
+																		children: param.enum[0]
+																	}), param.enum.length > 1 && /* @__PURE__ */ jsx(Tooltip, {
+																		title: /* @__PURE__ */ jsx("ul", {
+																			style: {
+																				margin: 0,
+																				paddingLeft: 16
+																			},
+																			children: param.enum.map((e) => /* @__PURE__ */ jsx("li", { children: e }, e))
+																		}),
+																		placement: "bottom",
+																		children: /* @__PURE__ */ jsxs("span", {
+																			className: cx("param-enum-pill"),
+																			children: ["+", param.enum.length - 1]
+																		})
+																	})]
+																}) : /* @__PURE__ */ jsx("span", {
+																	className: cx("param-detail-value"),
+																	children: "—"
+																})]
+															}),
+															/* @__PURE__ */ jsxs("div", {
+																className: cx("param-detail-cell"),
+																children: [/* @__PURE__ */ jsx("span", {
+																	className: cx("param-detail-label"),
+																	children: "Required?"
+																}), /* @__PURE__ */ jsx("span", {
+																	className: cx("param-detail-value"),
+																	children: param.required ? "Yes" : "No"
+																})]
+															}),
+															/* @__PURE__ */ jsxs("div", {
+																className: cx("param-detail-cell"),
+																children: [/* @__PURE__ */ jsx("span", {
+																	className: cx("param-detail-label"),
+																	children: "Description"
+																}), /* @__PURE__ */ jsx("span", {
+																	className: cx("param-detail-value", "param-detail-value--ellipsis"),
+																	children: param.description || "—"
+																})]
+															})
+														]
+													}), /* @__PURE__ */ jsxs("div", {
+														className: cx("param-actions"),
+														children: [/* @__PURE__ */ jsx(Button, {
+															danger: true,
+															icon: /* @__PURE__ */ jsx(Trash, {
+																width: 32,
+																height: 32
+															}),
+															style: {
+																padding: 0,
+																lineHeight: 1,
+																width: 40,
+																height: 40
+															},
+															className: cx("param-delete-btn"),
+															onClick: () => setDeleteParamModal({
+																open: true,
+																endpointId: ep.id,
+																idx,
+																name: param.name,
+																source: "request"
+															})
+														}), /* @__PURE__ */ jsx(Button, {
+															ghost: true,
+															icon: /* @__PURE__ */ jsx(EditTag, {
+																width: 18,
+																height: 18
+															}),
+															style: {
+																width: 40,
+																height: 40,
+																padding: 0,
+																lineHeight: 1
+															},
+															className: cx("param-edit-btn"),
+															onClick: () => {
+																setDrawerSource("request");
+																setParamDrawerMode("edit");
+																setEditParamIdx(idx);
+																setParamDrawerEndpointId(ep.id);
+																setParamDrawerOpen(true);
+															}
+														})]
+													})] })
+												}, idx);
+											})
+										}), allReqParams.length > PAGE_SIZE && /* @__PURE__ */ jsx(Pagination, {
+											current: reqPage,
+											pageSize: PAGE_SIZE,
+											total: allReqParams.length,
+											onChange: (page) => setRequestPages((prev) => new Map(prev).set(ep.id, page)),
+											showSizeChanger: false,
+											className: cx("pagination")
+										})] });
+									})(),
+									/* @__PURE__ */ jsxs("div", {
+										className: cx("param-row"),
+										style: { marginTop: token.margin },
+										onClick: () => toggleRequestPanel(ep.id),
+										children: [/* @__PURE__ */ jsx(DownOutlined, { className: cx("param-row-icon", openRequestPanels.has(ep.id) ? "param-row-icon--open" : "") }), /* @__PURE__ */ jsxs("span", {
+											style: { fontSize: token.fontSize },
+											children: ["Request ", /* @__PURE__ */ jsx("span", {
+												style: { color: token.colorError },
+												children: "*"
+											})]
+										})]
+									}),
+									openRequestPanels.has(ep.id) && /* @__PURE__ */ jsxs("div", {
+										className: cx("code-panel"),
+										children: [/* @__PURE__ */ jsx("code", {
+											className: cx("code-area"),
+											children: JSON.stringify((endpointParams[ep.id] ?? []).map((p) => ({
+												name: p.name,
+												in: p.in,
+												type: p.type,
+												required: p.required,
+												...p.description ? { description: p.description } : {},
+												...p.enum && p.enum.length > 0 ? { enum: p.enum } : {}
+											})), null, 2)
+										}), /* @__PURE__ */ jsxs("div", {
+											className: cx("code-footer"),
+											children: [/* @__PURE__ */ jsx(Button, {
+												ghost: true,
+												size: "small",
+												className: cx("code-btn"),
+												children: "Validate"
+											}), /* @__PURE__ */ jsx(Button, {
+												ghost: true,
+												size: "small",
+												className: cx("code-btn"),
+												children: "Beautify"
+											})]
+										})]
+									})
+								]
+							})] })
+						},
+						{
+							key: "response",
+							label: "Response",
+							children: /* @__PURE__ */ jsxs(Fragment, { children: [epHeader, /* @__PURE__ */ jsxs("div", {
+								className: cx("form-field"),
+								style: { width: "100%" },
+								children: [
+									/* @__PURE__ */ jsx("div", {
+										className: cx("section-header"),
+										children: isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+											style: {
+												display: "flex",
+												alignItems: "center",
+												gap: token.marginMD
+											},
+											children: [/* @__PURE__ */ jsx("span", {
+												className: cx("section-title"),
+												children: "Response Details"
+											}), /* @__PURE__ */ jsx(Button, {
+												ghost: true,
+												type: "primary",
+												icon: /* @__PURE__ */ jsx(SearchOutlined, {}),
+												size: "large",
+												style: {
+													width: 40,
+													height: 40,
+													padding: 0
+												},
+												disabled: (endpointResponseParams[ep.id] ?? []).length === 0,
+												onClick: () => setShowResponseSearch((prev) => ({
+													...prev,
+													[ep.id]: !prev[ep.id]
+												}))
+											})]
+										}), /* @__PURE__ */ jsx(Button, {
+											ghost: true,
+											type: "primary",
+											icon: /* @__PURE__ */ jsx(PlusOutlined, {}),
+											onClick: () => {
+												setDrawerSource("response");
+												setParamDrawerMode("add");
+												setEditParamIdx(null);
+												setParamDrawerEndpointId(ep.id);
+												setParamDrawerOpen(true);
+											},
+											children: "Add Parameter"
+										})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+											style: {
+												display: "flex",
+												alignItems: "center",
+												gap: 24
+											},
+											children: [/* @__PURE__ */ jsx("span", {
+												className: cx("section-title"),
+												children: "Response Details"
+											}), /* @__PURE__ */ jsxs("div", {
+												className: cx("response-controls"),
+												children: [/* @__PURE__ */ jsx(Input.Search, {
+													placeholder: "Search by parameter name",
+													style: { width: 310 },
+													disabled: (endpointResponseParams[ep.id] ?? []).length === 0,
+													value: responseSearches[ep.id] ?? "",
+													onChange: (e) => {
+														const val = e.target.value;
+														setResponseSearches((prev) => ({
+															...prev,
+															[ep.id]: val
+														}));
+														setResponsePages((prev) => new Map(prev).set(ep.id, 1));
+													},
+													allowClear: true
+												}), /* @__PURE__ */ jsx(Tooltip, {
+													title: selectedStatusCodes[ep.id] ? "Filled" : void 0,
+													placement: "bottom",
+													children: /* @__PURE__ */ jsx(Select, {
+														className: cx("status-select"),
+														popupClassName: "status-code-dropdown",
+														value: selectedStatusCodes[ep.id] ?? void 0,
+														onChange: (val) => setSelectedStatusCodes((prev) => ({
+															...prev,
+															[ep.id]: val
+														})),
+														options: Object.keys(ep.responses ?? {}).map((code) => ({
+															value: code,
+															label: /* @__PURE__ */ jsxs("span", {
+																className: cx("status-label"),
+																children: [/* @__PURE__ */ jsx("span", {
+																	className: cx("status-dot"),
+																	style: { background: getStatusCodeColor(code, antdToken).dot }
+																}), /* @__PURE__ */ jsx("span", {
+																	style: { color: getStatusCodeColor(code, antdToken).text },
+																	children: code
+																})]
+															})
+														})),
+														optionRender: (option) => {
+															const code = option.value;
+															const { dot, text } = getStatusCodeColor(code, antdToken);
+															const isSelected = selectedStatusCodes[ep.id] === code;
+															return /* @__PURE__ */ jsx(Tooltip, {
+																title: "Filled",
+																placement: "bottom",
+																children: /* @__PURE__ */ jsxs("span", {
+																	className: cx("status-option-content"),
+																	children: [
+																		/* @__PURE__ */ jsx("span", {
+																			className: cx("status-dot"),
+																			style: { background: dot }
+																		}),
+																		/* @__PURE__ */ jsx("span", {
+																			style: { color: text },
+																			children: code
+																		}),
+																		isSelected && /* @__PURE__ */ jsx(CheckCircleOutlined, {
+																			className: cx("status-checkmark"),
+																			style: { color: text }
+																		})
+																	]
+																})
+															});
+														}
+													})
+												})]
+											})]
+										}), /* @__PURE__ */ jsx(Button, {
+											ghost: true,
+											type: "primary",
+											icon: /* @__PURE__ */ jsx(PlusOutlined, {}),
+											onClick: () => {
+												setDrawerSource("response");
+												setParamDrawerMode("add");
+												setEditParamIdx(null);
+												setParamDrawerEndpointId(ep.id);
+												setParamDrawerOpen(true);
+											},
+											children: "Add Parameter"
+										})] })
+									}),
+									isMobile && showResponseSearch[ep.id] && /* @__PURE__ */ jsx(Input.Search, {
+										placeholder: "Search by parameter name",
+										style: {
+											width: "100%",
+											marginTop: 8
+										},
+										disabled: (endpointResponseParams[ep.id] ?? []).length === 0,
+										value: responseSearches[ep.id] ?? "",
+										onChange: (e) => {
+											const val = e.target.value;
+											setResponseSearches((prev) => ({
+												...prev,
+												[ep.id]: val
+											}));
+											setResponsePages((prev) => new Map(prev).set(ep.id, 1));
+										},
+										allowClear: true,
+										autoFocus: true
+									}),
+									(endpointResponseParams[ep.id] ?? []).length === 0 ? /* @__PURE__ */ jsx("div", {
+										className: cx("empty-wrapper"),
+										children: /* @__PURE__ */ jsx(Empty, {
+											image: Empty.PRESENTED_IMAGE_SIMPLE,
+											imageStyle: {
+												width: 184,
+												height: 117
+											},
+											description: /* @__PURE__ */ jsx("span", {
+												className: cx("empty-description"),
+												children: "No Data"
+											})
+										})
+									}) : (() => {
+										const resSearch = (debouncedResponseSearches[ep.id] ?? "").toLowerCase();
+										const allResParams = (endpointResponseParams[ep.id] ?? []).filter((p) => p.name.toLowerCase().includes(resSearch));
+										if (allResParams.length === 0) return /* @__PURE__ */ jsx("div", {
+											className: cx("empty-wrapper"),
+											children: /* @__PURE__ */ jsx(Empty, {
+												image: Empty.PRESENTED_IMAGE_SIMPLE,
+												imageStyle: {
+													width: 184,
+													height: 117
+												},
+												description: /* @__PURE__ */ jsx("span", {
+													className: cx("empty-description"),
+													children: "No Data"
+												})
+											})
+										});
+										const resPage = responsePages.get(ep.id) ?? 1;
+										const pagedResParams = allResParams.slice((resPage - 1) * PAGE_SIZE, resPage * PAGE_SIZE);
+										return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+											className: cx("param-list"),
+											style: { marginTop: token.margin },
+											children: pagedResParams.map((param, i) => {
+												const idx = (resPage - 1) * PAGE_SIZE + i;
+												return /* @__PURE__ */ jsx("div", {
+													className: cx("param-item-row"),
+													children: isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+														style: {
+															display: "flex",
+															alignItems: "center",
+															gap: 24,
+															flex: 1,
+															minWidth: 0
+														},
+														children: [/* @__PURE__ */ jsxs("div", {
+															className: cx("param-detail-cell"),
+															children: [/* @__PURE__ */ jsx("span", {
+																className: cx("param-detail-label"),
+																children: "Parameter Name"
+															}), /* @__PURE__ */ jsx("span", {
+																className: cx("param-detail-value"),
+																children: param.name
+															})]
+														}), /* @__PURE__ */ jsxs("div", {
+															className: cx("param-detail-cell"),
+															style: {
+																flex: 1,
+																minWidth: 0
+															},
+															children: [/* @__PURE__ */ jsx("span", {
+																className: cx("param-detail-label"),
+																children: "Parameter In"
+															}), /* @__PURE__ */ jsx("span", {
+																className: cx("param-detail-value"),
+																children: param.in
+															})]
+														})]
+													}), /* @__PURE__ */ jsxs("div", {
+														style: {
+															display: "flex",
+															alignItems: "center",
+															gap: token.margin,
+															background: token.colorFillTertiary,
+															borderRadius: token.borderRadius,
+															padding: `0 ${token.marginSM}px`,
+															height: 50,
+															flexShrink: 0
+														},
+														children: [/* @__PURE__ */ jsx(Button, {
+															danger: true,
+															icon: /* @__PURE__ */ jsx(Trash, {
+																width: 32,
+																height: 32
+															}),
+															style: {
+																padding: 0,
+																lineHeight: 1,
+																width: 40,
+																height: 40
+															},
+															className: cx("param-delete-btn"),
+															onClick: () => setDeleteParamModal({
+																open: true,
+																endpointId: ep.id,
+																idx,
+																name: param.name,
+																source: "response"
+															})
+														}), /* @__PURE__ */ jsx(Button, {
+															ghost: true,
+															icon: /* @__PURE__ */ jsx(EditTag, {
+																width: 18,
+																height: 18
+															}),
+															style: {
+																width: 40,
+																height: 40,
+																padding: 0,
+																lineHeight: 1
+															},
+															className: cx("param-edit-btn"),
+															onClick: () => {
+																setDrawerSource("response");
+																setParamDrawerMode("edit");
+																setEditParamIdx(idx);
+																setParamDrawerEndpointId(ep.id);
+																setParamDrawerOpen(true);
+															}
+														})]
+													})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+														className: cx("param-details"),
+														children: [
+															/* @__PURE__ */ jsxs("div", {
+																className: cx("param-detail-cell"),
+																children: [/* @__PURE__ */ jsx("span", {
+																	className: cx("param-detail-label"),
+																	children: "Parameter Name"
+																}), /* @__PURE__ */ jsx("span", {
+																	className: cx("param-detail-value"),
+																	children: param.name
+																})]
+															}),
+															/* @__PURE__ */ jsxs("div", {
+																className: cx("param-detail-cell"),
+																children: [/* @__PURE__ */ jsx("span", {
+																	className: cx("param-detail-label"),
+																	children: "Parameter In"
+																}), /* @__PURE__ */ jsx("span", {
+																	className: cx("param-detail-value"),
+																	children: param.in
+																})]
+															}),
+															/* @__PURE__ */ jsxs("div", {
+																className: cx("param-detail-cell"),
+																children: [/* @__PURE__ */ jsx("span", {
+																	className: cx("param-detail-label"),
+																	children: "Parameter Type"
+																}), /* @__PURE__ */ jsx("span", {
+																	className: cx("param-detail-value"),
+																	children: param.type
+																})]
+															}),
+															/* @__PURE__ */ jsxs("div", {
+																className: cx("param-detail-cell"),
+																children: [/* @__PURE__ */ jsx("span", {
+																	className: cx("param-detail-label"),
+																	children: "Enum"
+																}), param.enum && param.enum.length > 0 ? /* @__PURE__ */ jsxs("span", {
+																	className: cx("param-enum-container"),
+																	children: [/* @__PURE__ */ jsx("span", {
+																		className: cx("param-enum-tag"),
+																		children: param.enum[0]
+																	}), param.enum.length > 1 && /* @__PURE__ */ jsx(Tooltip, {
+																		title: /* @__PURE__ */ jsx("ul", {
+																			style: {
+																				margin: 0,
+																				paddingLeft: 16
+																			},
+																			children: param.enum.map((e) => /* @__PURE__ */ jsx("li", { children: e }, e))
+																		}),
+																		placement: "bottom",
+																		children: /* @__PURE__ */ jsxs("span", {
+																			className: cx("param-enum-pill"),
+																			children: ["+", param.enum.length - 1]
+																		})
+																	})]
+																}) : /* @__PURE__ */ jsx("span", {
+																	className: cx("param-detail-value"),
+																	children: "—"
+																})]
+															}),
+															/* @__PURE__ */ jsxs("div", {
+																className: cx("param-detail-cell"),
+																children: [/* @__PURE__ */ jsx("span", {
+																	className: cx("param-detail-label"),
+																	children: "Required?"
+																}), /* @__PURE__ */ jsx("span", {
+																	className: cx("param-detail-value"),
+																	children: param.required ? "Yes" : "No"
+																})]
+															}),
+															/* @__PURE__ */ jsxs("div", {
+																className: cx("param-detail-cell"),
+																children: [/* @__PURE__ */ jsx("span", {
+																	className: cx("param-detail-label"),
+																	children: "Description"
+																}), /* @__PURE__ */ jsx("span", {
+																	className: cx("param-detail-value", "param-detail-value--ellipsis"),
+																	children: param.description || "—"
+																})]
+															})
+														]
+													}), /* @__PURE__ */ jsxs("div", {
+														className: cx("param-actions"),
+														children: [/* @__PURE__ */ jsx(Button, {
+															danger: true,
+															icon: /* @__PURE__ */ jsx(Trash, {
+																width: 32,
+																height: 32
+															}),
+															style: {
+																padding: 0,
+																lineHeight: 1,
+																width: 40,
+																height: 40
+															},
+															className: cx("param-delete-btn"),
+															onClick: () => setDeleteParamModal({
+																open: true,
+																endpointId: ep.id,
+																idx,
+																name: param.name,
+																source: "response"
+															})
+														}), /* @__PURE__ */ jsx(Button, {
+															ghost: true,
+															icon: /* @__PURE__ */ jsx(EditTag, {
+																width: 18,
+																height: 18
+															}),
+															style: {
+																width: 40,
+																height: 40,
+																padding: 0,
+																lineHeight: 1
+															},
+															className: cx("param-edit-btn"),
+															onClick: () => {
+																setDrawerSource("response");
+																setParamDrawerMode("edit");
+																setEditParamIdx(idx);
+																setParamDrawerEndpointId(ep.id);
+																setParamDrawerOpen(true);
+															}
+														})]
+													})] })
+												}, idx);
+											})
+										}), allResParams.length > PAGE_SIZE && /* @__PURE__ */ jsx(Pagination, {
+											current: resPage,
+											pageSize: PAGE_SIZE,
+											total: allResParams.length,
+											onChange: (page) => setResponsePages((prev) => new Map(prev).set(ep.id, page)),
+											showSizeChanger: false,
+											className: cx("pagination")
+										})] });
+									})(),
+									/* @__PURE__ */ jsxs("div", {
+										className: cx("param-row"),
+										style: { marginTop: token.margin },
+										onClick: () => toggleResponsePanel(ep.id),
+										children: [
+											/* @__PURE__ */ jsx(DownOutlined, { className: cx("param-row-icon", openResponsePanels.has(ep.id) ? "param-row-icon--open" : "") }),
+											/* @__PURE__ */ jsxs("span", {
+												style: { fontSize: token.fontSize },
+												children: ["Response ", /* @__PURE__ */ jsx("span", {
+													style: { color: token.colorError },
+													children: "*"
+												})]
+											}),
+											/* @__PURE__ */ jsx(InfoCircle, { style: {
+												width: 24,
+												height: 24
+											} })
+										]
+									}),
+									openResponsePanels.has(ep.id) && /* @__PURE__ */ jsxs("div", {
+										className: cx("code-panel"),
+										children: [/* @__PURE__ */ jsx("code", {
+											className: cx("code-area"),
+											children: JSON.stringify((endpointResponseParams[ep.id] ?? []).map((p) => ({
+												name: p.name,
+												in: p.in,
+												type: p.type,
+												required: p.required,
+												...p.description ? { description: p.description } : {},
+												...p.enum && p.enum.length > 0 ? { enum: p.enum } : {}
+											})), null, 2)
+										}), /* @__PURE__ */ jsxs("div", {
+											className: cx("code-footer"),
+											children: [/* @__PURE__ */ jsx(Button, {
+												ghost: true,
+												size: "small",
+												className: cx("code-btn"),
+												children: "Validate"
+											}), /* @__PURE__ */ jsx(Button, {
+												ghost: true,
+												size: "small",
+												className: cx("code-btn"),
+												children: "Beautify"
+											})]
+										})]
+									})
+								]
+							})] })
+						}
+					]
+				}),
+				/* @__PURE__ */ jsxs(Modal, {
+					open: deleteParamModal.open,
+					onCancel: () => setDeleteParamModal({
+						open: false,
+						endpointId: "",
+						idx: -1,
+						name: "",
+						source: "request"
+					}),
+					centered: true,
+					title: null,
+					footer: null,
+					closable: false,
+					width: 520,
+					className: "delete-param-confirm-modal",
+					styles: {
+						content: {
+							padding: 0,
+							borderRadius: 8,
+							overflow: "hidden"
+						},
+						body: {
+							padding: 0,
+							margin: 0
+						}
+					},
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: cx("deleteModalHead"),
+							children: [/* @__PURE__ */ jsxs("span", {
+								className: cx("deleteModalTitle"),
+								children: [
+									"Delete ",
+									deleteParamModal.name,
+									" parameter"
+								]
+							}), /* @__PURE__ */ jsx("button", {
+								className: cx("deleteModalCloseBtn"),
+								onClick: () => setDeleteParamModal({
+									open: false,
+									endpointId: "",
+									idx: -1,
+									name: "",
+									source: "request"
+								}),
+								"aria-label": "Close",
+								children: "×"
+							})]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: cx("deleteModalContent"),
+							children: /* @__PURE__ */ jsxs("span", {
+								className: cx("deleteModalContentText"),
+								children: [
+									"Are you sure you want to delete ",
+									deleteParamModal.name,
+									" parameter?"
+								]
+							})
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: cx("deleteModalFooter"),
+							children: [/* @__PURE__ */ jsx(Button, {
+								size: "middle",
+								onClick: () => setDeleteParamModal({
+									open: false,
+									endpointId: "",
+									idx: -1,
+									name: "",
+									source: "request"
+								}),
+								style: {
+									borderRadius: 8,
+									height: 32,
+									paddingInline: 15
+								},
+								children: "Cancel"
+							}), /* @__PURE__ */ jsx(Button, {
+								type: "primary",
+								danger: true,
+								size: "middle",
+								style: {
+									borderRadius: 8,
+									height: 32,
+									paddingInline: 16
+								},
+								onClick: () => {
+									const epId = deleteParamModal.endpointId;
+									if (deleteParamModal.source === "response") {
+										const total = (endpointResponseParams[epId] ?? []).length - 1;
+										const maxPage = Math.max(1, Math.ceil(total / PAGE_SIZE));
+										if ((responsePages.get(epId) ?? 1) > maxPage) setResponsePages((prev) => new Map(prev).set(epId, 1));
+										onDeleteResponseParameter?.(epId, deleteParamModal.idx);
+									} else {
+										const total = (endpointParams[epId] ?? []).length - 1;
+										const maxPage = Math.max(1, Math.ceil(total / PAGE_SIZE));
+										if ((requestPages.get(epId) ?? 1) > maxPage) setRequestPages((prev) => new Map(prev).set(epId, 1));
+										onDeleteParameter?.(epId, deleteParamModal.idx);
+									}
+									setDeleteParamModal({
+										open: false,
+										endpointId: "",
+										idx: -1,
+										name: "",
+										source: "request"
+									});
+								},
+								children: "Yes, Delete"
+							})]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx(AddParameterDrawer, {
+					open: paramDrawerOpen,
+					mode: paramDrawerMode,
+					initialValues: paramDrawerMode === "edit" && paramDrawerEndpointId && editParamIdx !== null ? drawerSource === "response" ? endpointResponseParams[paramDrawerEndpointId]?.[editParamIdx] : endpointParams[paramDrawerEndpointId]?.[editParamIdx] : void 0,
+					onClose: () => {
+						setParamDrawerOpen(false);
+						setParamDrawerEndpointId(null);
+						setParamDrawerMode("add");
+						setEditParamIdx(null);
+					},
+					onAdd: (param) => {
+						if (paramDrawerEndpointId) if (drawerSource === "response") onAddResponseParameter?.(paramDrawerEndpointId, param);
+						else onAddParameter?.(paramDrawerEndpointId, param);
+						setParamDrawerOpen(false);
+						setParamDrawerEndpointId(null);
+						setParamDrawerMode("add");
+						setEditParamIdx(null);
+					},
+					onEdit: (param) => {
+						if (paramDrawerEndpointId && editParamIdx !== null) if (drawerSource === "response") onEditResponseParameter?.(paramDrawerEndpointId, editParamIdx, param);
+						else onEditParameter?.(paramDrawerEndpointId, editParamIdx, param);
+						setParamDrawerOpen(false);
+						setParamDrawerEndpointId(null);
+						setParamDrawerMode("add");
+						setEditParamIdx(null);
+					}
+				})
+			]
+		}));
+	}
+	return wrapSSR(/* @__PURE__ */ jsxs("div", {
+		className: cx("root"),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cx("head"),
+				children: [/* @__PURE__ */ jsx(Title, {
+					level: 4,
+					style: {
+						margin: 0,
+						color: token.colorTextHeading
+					},
+					children: "Endpoints"
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "text",
+					size: "large",
+					icon: /* @__PURE__ */ jsx(UpCircleOutlined, { style: { fontSize: 18 } }),
+					onClick: onToggleCollapse,
+					style: {
+						transform: collapsed ? "rotate(180deg)" : "rotate(0deg)",
+						transition: "transform 0.2s"
+					}
+				})]
+			}),
+			!collapsed && /* @__PURE__ */ jsx("div", {
+				className: cx("body"),
+				children: Object.values(endpointsByTag).flat().map((ep) => {
+					const isExpanded = expandedId === ep.id;
+					const methodColor = methodColors$1[ep.method];
+					return /* @__PURE__ */ jsxs("div", { children: [
+						/* @__PURE__ */ jsxs("div", {
 							className: cx("endpoint-row"),
 							children: [/* @__PURE__ */ jsxs("div", {
 								className: cx("endpoint-card", isExpanded ? "endpoint-card-active" : ""),
@@ -3969,49 +5194,95 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 										className: cx("view-params-title"),
 										children: "Request"
 									})
-								}), /* @__PURE__ */ jsx(Table, {
-									dataSource: buildViewParamRows(endpointParams[ep.id] ?? []),
-									columns: viewParamColumns,
-									pagination: false,
-									rowClassName: (_, idx) => cx(idx % 2 === 0 ? "view-row-odd" : "view-row-even"),
-									size: "small",
-									bordered: true
-								})]
+								}), (() => {
+									const allVReqRows = buildViewParamRows(endpointParams[ep.id] ?? []);
+									const vReqPage = requestPages.get(ep.id) ?? 1;
+									return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Table, {
+										dataSource: allVReqRows.slice((vReqPage - 1) * VIEW_PAGE_SIZE, vReqPage * VIEW_PAGE_SIZE),
+										columns: viewParamColumns,
+										pagination: false,
+										rowClassName: (_, idx) => cx(idx % 2 === 0 ? "view-row-odd" : "view-row-even"),
+										size: "small",
+										bordered: true
+									}), allVReqRows.length > VIEW_PAGE_SIZE && /* @__PURE__ */ jsx("div", {
+										style: { paddingBottom: 12 },
+										children: /* @__PURE__ */ jsx(Pagination, {
+											current: vReqPage,
+											pageSize: VIEW_PAGE_SIZE,
+											total: allVReqRows.length,
+											onChange: (page) => setRequestPages((prev) => new Map(prev).set(ep.id, page)),
+											showSizeChanger: false,
+											className: cx("pagination")
+										})
+									})] });
+								})()]
 							}), /* @__PURE__ */ jsxs("div", {
 								className: cx("view-params-card"),
-								children: [/* @__PURE__ */ jsxs("div", {
-									className: cx("view-params-header"),
-									children: [/* @__PURE__ */ jsx("span", {
-										className: cx("view-params-title"),
-										children: "Response"
-									}), /* @__PURE__ */ jsx(Select, {
-										className: cx("view-status-select-sm"),
-										popupClassName: "status-code-dropdown",
-										value: selectedStatusCodes[ep.id] ?? (Object.keys(ep.responses ?? {}).includes("200") ? "200" : Object.keys(ep.responses ?? {})[0]),
-										onChange: (val) => setSelectedStatusCodes((prev) => ({
-											...prev,
-											[ep.id]: val
-										})),
-										options: Object.keys(ep.responses ?? {}).map((code) => ({
-											value: code,
-											label: /* @__PURE__ */ jsxs("span", {
-												className: cx("status-label"),
-												children: [/* @__PURE__ */ jsx("span", {
-													className: cx("status-dot"),
-													style: { background: getStatusCodeColor(code, antdToken).dot }
-												}), /* @__PURE__ */ jsx("span", { children: code })]
+								children: [
+									/* @__PURE__ */ jsxs("div", {
+										className: cx("view-params-header"),
+										children: [/* @__PURE__ */ jsx("span", {
+											className: cx("view-params-title"),
+											children: "Response"
+										}), /* @__PURE__ */ jsx(Select, {
+											className: cx("view-status-select-sm"),
+											popupClassName: "status-code-dropdown",
+											value: selectedStatusCodes[ep.id] ?? (Object.keys(ep.responses ?? {}).includes("200") ? "200" : Object.keys(ep.responses ?? {})[0]),
+											onChange: (val) => setSelectedStatusCodes((prev) => ({
+												...prev,
+												[ep.id]: val
+											})),
+											options: Object.keys(ep.responses ?? {}).map((code) => ({
+												value: code,
+												label: /* @__PURE__ */ jsxs("span", {
+													className: cx("status-label"),
+													children: [/* @__PURE__ */ jsx("span", {
+														className: cx("status-dot"),
+														style: { background: getStatusCodeColor(code, antdToken).dot }
+													}), /* @__PURE__ */ jsx("span", { children: code })]
+												})
+											})),
+											size: "middle"
+										})]
+									}),
+									(() => {
+										const allVResRows = buildViewParamRows(endpointResponseParams[ep.id] ?? []);
+										const vResPage = responsePages.get(ep.id) ?? 1;
+										return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Table, {
+											dataSource: allVResRows.slice((vResPage - 1) * VIEW_PAGE_SIZE, vResPage * VIEW_PAGE_SIZE),
+											columns: viewParamColumns,
+											pagination: false,
+											rowClassName: (_, idx) => cx(idx % 2 === 0 ? "view-row-odd" : "view-row-even"),
+											size: "small",
+											bordered: true
+										}), allVResRows.length > VIEW_PAGE_SIZE && /* @__PURE__ */ jsx("div", {
+											style: { paddingBottom: 12 },
+											children: /* @__PURE__ */ jsx(Pagination, {
+												current: vResPage,
+												pageSize: VIEW_PAGE_SIZE,
+												total: allVResRows.length,
+												onChange: (page) => setResponsePages((prev) => new Map(prev).set(ep.id, page)),
+												showSizeChanger: false,
+												className: cx("pagination")
 											})
-										})),
-										size: "middle"
-									})]
-								}), /* @__PURE__ */ jsx(Table, {
-									dataSource: buildViewParamRows(endpointResponseParams[ep.id] ?? []),
-									columns: viewParamColumns,
-									pagination: false,
-									rowClassName: (_, idx) => cx(idx % 2 === 0 ? "view-row-odd" : "view-row-even"),
-									size: "small",
-									bordered: true
-								})]
+										})] });
+									})(),
+									(() => {
+										const selectedCode = selectedStatusCodes[ep.id] ?? (Object.keys(ep.responses ?? {}).includes("200") ? "200" : Object.keys(ep.responses ?? {})[0]);
+										const responseContent = ep.responses?.[selectedCode]?.content;
+										if (!responseContent) return null;
+										const schema = Object.values(responseContent)[0]?.schema;
+										if (!schema) return null;
+										return /* @__PURE__ */ jsx("div", {
+											className: cx("code-panel"),
+											style: { marginTop: token.marginSM },
+											children: /* @__PURE__ */ jsx("code", {
+												className: cx("code-area"),
+												children: JSON.stringify(schema, null, 2)
+											})
+										});
+									})()
+								]
 							})]
 						}),
 						isExpanded && mode !== "view" && /* @__PURE__ */ jsxs("div", {
@@ -4031,7 +5302,9 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 										}), /* @__PURE__ */ jsx(Input, {
 											size: "large",
 											value: endpointNames[ep.id] ?? ep.summary ?? "",
-											onChange: (e) => onEndpointNameChange(ep.id, e.target.value)
+											onChange: (e) => onEndpointNameChange(ep.id, e.target.value),
+											maxLength: 100,
+											showCount: true
 										})]
 									}), /* @__PURE__ */ jsxs("div", {
 										className: cx("form-field"),
@@ -4264,9 +5537,8 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 																style: {
 																	padding: 0,
 																	lineHeight: 1,
-																	width: 32,
-																	height: 32,
-																	fontSize: 20
+																	width: 40,
+																	height: 40
 																},
 																className: cx("param-delete-btn"),
 																onClick: () => setDeleteParamModal({
@@ -4278,7 +5550,16 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 																})
 															}), /* @__PURE__ */ jsx(Button, {
 																ghost: true,
-																icon: /* @__PURE__ */ jsx(EditOutlined, {}),
+																icon: /* @__PURE__ */ jsx(EditTag, {
+																	width: 18,
+																	height: 18
+																}),
+																style: {
+																	width: 40,
+																	height: 40,
+																	padding: 0,
+																	lineHeight: 1
+																},
 																className: cx("param-edit-btn"),
 																onClick: () => {
 																	setDrawerSource("request");
@@ -4375,14 +5656,15 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 															className: cx("param-actions"),
 															children: [/* @__PURE__ */ jsx(Button, {
 																danger: true,
-																type: "text",
 																icon: /* @__PURE__ */ jsx(Trash, {
-																	height: 32,
-																	width: 32
+																	width: 32,
+																	height: 32
 																}),
 																style: {
 																	padding: 0,
-																	lineHeight: 1
+																	lineHeight: 1,
+																	width: 40,
+																	height: 40
 																},
 																className: cx("param-delete-btn"),
 																onClick: () => setDeleteParamModal({
@@ -4394,7 +5676,16 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 																})
 															}), /* @__PURE__ */ jsx(Button, {
 																ghost: true,
-																icon: /* @__PURE__ */ jsx(EditOutlined, {}),
+																icon: /* @__PURE__ */ jsx(EditTag, {
+																	width: 18,
+																	height: 18
+																}),
+																style: {
+																	width: 40,
+																	height: 40,
+																	padding: 0,
+																	lineHeight: 1
+																},
 																className: cx("param-edit-btn"),
 																onClick: () => {
 																	setDrawerSource("request");
@@ -4703,9 +5994,8 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 																style: {
 																	padding: 0,
 																	lineHeight: 1,
-																	width: 32,
-																	height: 32,
-																	fontSize: 20
+																	width: 40,
+																	height: 40
 																},
 																className: cx("param-delete-btn"),
 																onClick: () => setDeleteParamModal({
@@ -4717,7 +6007,16 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 																})
 															}), /* @__PURE__ */ jsx(Button, {
 																ghost: true,
-																icon: /* @__PURE__ */ jsx(EditOutlined, {}),
+																icon: /* @__PURE__ */ jsx(EditTag, {
+																	width: 18,
+																	height: 18
+																}),
+																style: {
+																	width: 40,
+																	height: 40,
+																	padding: 0,
+																	lineHeight: 1
+																},
 																className: cx("param-edit-btn"),
 																onClick: () => {
 																	setDrawerSource("response");
@@ -4814,7 +6113,16 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 															className: cx("param-actions"),
 															children: [/* @__PURE__ */ jsx(Button, {
 																ghost: true,
-																icon: /* @__PURE__ */ jsx(EditOutlined, {}),
+																icon: /* @__PURE__ */ jsx(EditTag, {
+																	width: 18,
+																	height: 18
+																}),
+																style: {
+																	width: 40,
+																	height: 40,
+																	padding: 0,
+																	lineHeight: 1
+																},
 																className: cx("param-edit-btn"),
 																onClick: () => {
 																	setDrawerSource("response");
@@ -4825,14 +6133,15 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 																}
 															}), /* @__PURE__ */ jsx(Button, {
 																danger: true,
-																type: "text",
 																icon: /* @__PURE__ */ jsx(Trash, {
-																	height: 18,
-																	width: 18
+																	width: 32,
+																	height: 32
 																}),
 																style: {
 																	padding: 0,
-																	lineHeight: 1
+																	lineHeight: 1,
+																	width: 40,
+																	height: 40
 																},
 																className: cx("param-delete-btn"),
 																onClick: () => setDeleteParamModal({
@@ -5073,7 +6382,7 @@ const UnsavedChangesBanner = ({ onClose }) => {
 		children: /* @__PURE__ */ jsx(Alert, {
 			className: cx("alert"),
 			type: "warning",
-			message: "There are changes you made may not be saved",
+			message: "There are changes you made that may not be saved",
 			closable: true,
 			onClose,
 			icon: /* @__PURE__ */ jsx(ExclamationCircleFilled, {}),
@@ -5084,57 +6393,50 @@ const UnsavedChangesBanner = ({ onClose }) => {
 //#endregion
 //#region src/view/components/ApiPage/components/TagsSection.tsx
 const { useBreakpoint: useBreakpoint$1 } = Grid;
-const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEditTag, onDeleteTag }) => {
+const TAGS_PAGE_SIZE = 8;
+const TagsSection = ({ tags, collapsed, onToggleCollapse, onAddTag, onEditTag, onDeleteTag }) => {
 	const isMobile = !useBreakpoint$1().md;
+	const [currentPage, setCurrentPage] = useState(1);
+	const sortedTags = [...tags].sort((a, b) => a.isDefault === b.isDefault ? 0 : a.isDefault ? -1 : 1);
+	const maxPage = Math.max(1, Math.ceil(tags.length / TAGS_PAGE_SIZE));
+	const safePage = Math.min(currentPage, maxPage);
+	const paginatedTags = sortedTags.slice((safePage - 1) * TAGS_PAGE_SIZE, safePage * TAGS_PAGE_SIZE);
 	const { wrapSSR, cx, token } = useStyle("TagsSection", (token, scope) => ({
 		[scope("root")]: {
 			display: "flex",
 			flexDirection: "column",
-			borderRadius: token.borderRadius,
-			overflow: "hidden",
-			width: "100%",
-			flexShrink: 0
+			gap: token.margin,
+			padding: token.marginLG,
+			background: token.colorBgElevated,
+			borderRadius: token.borderRadiusLG,
+			width: "100%"
 		},
 		[scope("head")]: {
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "space-between",
-			padding: `${token.paddingXS}px ${token.paddingLG}px`,
-			background: token.colorPrimaryBg,
-			borderRadius: `${token.borderRadius}px ${token.borderRadius}px 0 0`
-		},
-		[scope("head-actions")]: {
-			display: "flex",
-			alignItems: "center",
-			gap: token.margin
+			width: "100%"
 		},
-		[scope("body")]: {
+		[scope("tags-list")]: {
 			display: "flex",
 			flexDirection: "column",
-			gap: 0,
-			padding: token.paddingLG,
-			background: token.colorBgElevated,
-			borderRadius: `0 0 ${token.borderRadius}px ${token.borderRadius}px`
+			width: "100%"
 		},
 		[scope("tag-row")]: {
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "space-between",
-			height: 50,
-			paddingTop: token.controlHeightLG,
-			paddingBottom: token.controlHeightLG,
-			paddingRight: token.paddingLG,
-			borderBottom: `1px solid ${token.colorBorder}`,
-			width: "100%"
-		},
-		[scope("tag-row-last")]: {
-			borderBottom: "none",
-			paddingBottom: token.marginLG
+			minHeight: 50,
+			paddingTop: 12,
+			paddingBottom: 12,
+			width: "100%",
+			borderBottom: `1px solid ${token.colorBorder}`
 		},
+		[scope("tag-row-last")]: { borderBottom: "none" },
 		[scope("tag-info")]: {
 			display: "flex",
 			alignItems: "center",
-			gap: 32,
+			gap: token.marginXL,
 			flex: 1,
 			minWidth: 0
 		},
@@ -5170,32 +6472,13 @@ const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEd
 			alignItems: "center",
 			gap: token.margin
 		},
-		[scope("btn-delete")]: {
-			width: 40,
-			height: 40,
-			border: `1px solid ${token.colorError}`,
-			borderRadius: token.borderRadius,
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center"
-		},
-		[scope("btn-edit")]: {
-			width: 40,
-			height: 40,
-			border: `1px solid ${token.colorBorder}`,
-			borderRadius: token.borderRadius,
-			background: token.colorBgContainer,
-			boxShadow: "0px 2px 0px 0px rgba(0,0,0,0.02)",
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center"
-		},
 		[scope("tag-row-mobile")]: {
 			display: "flex",
 			flexDirection: "row",
 			alignItems: "flex-start",
 			justifyContent: "space-between",
 			gap: 8,
+			paddingTop: 12,
 			paddingBottom: token.margin,
 			borderBottom: `1px solid ${token.colorBorder}`,
 			width: "100%",
@@ -5225,16 +6508,176 @@ const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEd
 			display: "flex",
 			flexDirection: "column",
 			gap: 0,
-			padding: token.paddingMD,
-			background: token.colorBgElevated,
-			borderRadius: `0 0 ${token.borderRadius}px ${token.borderRadius}px`,
 			overflowX: "auto"
+		},
+		[scope("head-collapse")]: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			padding: `${token.paddingXS}px ${token.paddingLG}px`,
+			background: token.colorPrimaryBg,
+			borderRadius: `${token.borderRadius}px ${token.borderRadius}px 0 0`
+		},
+		[scope("body-collapse")]: {
+			display: "flex",
+			flexDirection: "column",
+			gap: token.margin,
+			padding: token.paddingLG,
+			background: token.colorBgElevated,
+			borderRadius: `0 0 ${token.borderRadius}px ${token.borderRadius}px`
+		},
+		[scope("pagination")]: {
+			display: "flex",
+			justifyContent: "center",
+			marginTop: token.marginMD,
+			".ant-pagination-item-active": {
+				backgroundColor: token.colorBgContainer,
+				borderColor: token.colorPrimary,
+				borderRadius: token.borderRadius,
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				a: {
+					color: token.colorPrimary,
+					fontWeight: token.fontWeightStrong,
+					fontSize: token.fontSize,
+					lineHeight: "22px",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					height: "100%"
+				}
+			},
+			".ant-pagination-item": {
+				borderRadius: token.borderRadius,
+				minWidth: 32,
+				height: 32,
+				lineHeight: "32px",
+				a: {
+					color: token.colorText,
+					fontWeight: 400,
+					fontSize: token.fontSize
+				}
+			},
+			".ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link": {
+				borderRadius: token.borderRadius,
+				width: 32,
+				height: 32,
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				border: "none",
+				background: "transparent"
+			}
 		}
 	}));
-	return wrapSSR(/* @__PURE__ */ jsxs("div", {
-		className: cx("root"),
+	const mobileTagsList = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: cx("body-mobile"),
+		children: paginatedTags.map((tag, index) => {
+			return /* @__PURE__ */ jsxs("div", {
+				className: cx("tag-row-mobile", index === paginatedTags.length - 1 ? "tag-row-mobile-last" : ""),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: cx("tag-info-mobile"),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: cx("tag-col-mobile"),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: cx("col-label"),
+							style: {
+								fontSize: token.fontSize,
+								lineHeight: "20px"
+							},
+							children: "Tag Name:"
+						}), /* @__PURE__ */ jsx("span", {
+							className: cx("col-value"),
+							style: {
+								fontSize: token.fontSize,
+								lineHeight: "20px",
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								whiteSpace: "nowrap"
+							},
+							children: tag.name
+						})]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: cx("tag-col-mobile"),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: cx("col-label"),
+							style: {
+								fontSize: token.fontSize,
+								lineHeight: "20px"
+							},
+							children: "Description:"
+						}), /* @__PURE__ */ jsx(Tooltip, {
+							title: tag.description && tag.description.length > 20 ? tag.description : "",
+							children: /* @__PURE__ */ jsx("span", {
+								className: cx("col-value"),
+								style: {
+									fontSize: token.fontSize,
+									lineHeight: "20px",
+									overflow: "hidden",
+									textOverflow: "ellipsis",
+									whiteSpace: "nowrap",
+									maxWidth: 140,
+									display: "block"
+								},
+								children: tag.description ?? "-"
+							})
+						})]
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: cx("tag-actions"),
+					style: {
+						paddingTop: 6,
+						flexShrink: 0
+					},
+					children: [/* @__PURE__ */ jsx(Tooltip, {
+						title: tag.isDefault ? "The default tag cannot be deleted or edited" : "",
+						children: /* @__PURE__ */ jsx(Button, {
+							danger: true,
+							type: "text",
+							icon: /* @__PURE__ */ jsx(Trash, {
+								width: 32,
+								height: 32
+							}),
+							disabled: tag.isDefault,
+							onClick: () => !tag.isDefault && onDeleteTag?.(tag.name),
+							style: {
+								width: 40,
+								height: 40,
+								padding: 0,
+								lineHeight: 1
+							}
+						})
+					}), /* @__PURE__ */ jsx(Tooltip, {
+						title: tag.isDefault ? "The default tag cannot be deleted or edited" : "",
+						children: /* @__PURE__ */ jsx(Button, {
+							icon: /* @__PURE__ */ jsx(EditTag, {}),
+							disabled: tag.isDefault,
+							onClick: () => !tag.isDefault && onEditTag?.(tag),
+							style: {
+								width: 32,
+								height: 32,
+								padding: 0,
+								lineHeight: 1,
+								...!tag.isDefault && { color: "#A146B3" }
+							}
+						})
+					})]
+				})]
+			}, tag.name);
+		})
+	}), tags.length > TAGS_PAGE_SIZE && /* @__PURE__ */ jsx(Pagination, {
+		current: safePage,
+		pageSize: TAGS_PAGE_SIZE,
+		total: tags.length,
+		onChange: setCurrentPage,
+		showSizeChanger: false,
+		className: cx("pagination")
+	})] });
+	return wrapSSR(isMobile ? /* @__PURE__ */ jsxs("div", {
+		style: { width: "100%" },
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: cx("head"),
+			className: cx("head-collapse"),
 			children: [/* @__PURE__ */ jsx(Title, {
 				level: 4,
 				style: {
@@ -5243,7 +6686,11 @@ const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEd
 				},
 				children: "Tags"
 			}), /* @__PURE__ */ jsxs("div", {
-				className: cx("head-actions"),
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: token.marginXS
+				},
 				children: [/* @__PURE__ */ jsx(Button, {
 					ghost: true,
 					type: "primary",
@@ -5262,208 +6709,149 @@ const TagsSection = ({ tags, collapsed = false, onToggleCollapse, onAddTag, onEd
 					}
 				})]
 			})]
-		}), !collapsed && (isMobile ? /* @__PURE__ */ jsx("div", {
-			className: cx("body-mobile"),
-			children: tags.map((tag, index) => {
-				return /* @__PURE__ */ jsxs("div", {
-					className: cx("tag-row-mobile", index === tags.length - 1 ? "tag-row-mobile-last" : ""),
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: cx("tag-info-mobile"),
+		}), !collapsed && /* @__PURE__ */ jsx("div", {
+			className: cx("body-collapse"),
+			children: mobileTagsList
+		})]
+	}) : /* @__PURE__ */ jsxs("div", {
+		className: cx("root"),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cx("head"),
+				children: [/* @__PURE__ */ jsx(Title, {
+					level: 4,
+					style: {
+						margin: 0,
+						color: token.colorTextHeading
+					},
+					children: "Tags"
+				}), /* @__PURE__ */ jsx(Button, {
+					ghost: true,
+					type: "primary",
+					icon: /* @__PURE__ */ jsx(PlusOutlined, {}),
+					onClick: onAddTag,
+					style: { borderRadius: token.borderRadius },
+					children: "Add Tag"
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cx("tags-list"),
+				children: paginatedTags.map((tag, index) => {
+					return /* @__PURE__ */ jsxs("div", {
+						className: cx("tag-row", index === paginatedTags.length - 1 ? "tag-row-last" : ""),
 						children: [/* @__PURE__ */ jsxs("div", {
-							className: cx("tag-col-mobile"),
-							children: [/* @__PURE__ */ jsx("span", {
-								className: cx("col-label"),
-								style: {
-									fontSize: token.fontSize,
-									lineHeight: "20px"
-								},
-								children: "Tag Name:"
-							}), /* @__PURE__ */ jsx("span", {
-								className: cx("col-value"),
-								style: {
-									fontSize: token.fontSize,
-									lineHeight: "20px",
-									overflow: "hidden",
-									textOverflow: "ellipsis",
-									whiteSpace: "nowrap"
-								},
-								children: tag.name
-							})]
+							className: cx("tag-info"),
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									className: cx("tag-col"),
+									style: { width: 200 },
+									children: [/* @__PURE__ */ jsx("span", {
+										className: cx("col-label"),
+										children: "Tag Name"
+									}), /* @__PURE__ */ jsx("span", {
+										className: cx("col-value"),
+										children: tag.name
+									})]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: cx("tag-col"),
+									style: { width: 280 },
+									children: [/* @__PURE__ */ jsx("span", {
+										className: cx("col-label"),
+										children: "Description"
+									}), /* @__PURE__ */ jsx(Tooltip, {
+										title: tag.description && tag.description.length > 30 ? tag.description : "",
+										children: /* @__PURE__ */ jsx("span", {
+											className: cx("col-value"),
+											style: {
+												overflow: "hidden",
+												textOverflow: "ellipsis",
+												whiteSpace: "nowrap",
+												maxWidth: 280,
+												display: "block"
+											},
+											children: tag.description ?? "-"
+										})
+									})]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: cx("tag-col"),
+									style: {
+										flex: 1,
+										minWidth: 0
+									},
+									children: [/* @__PURE__ */ jsx("span", {
+										className: cx("col-label"),
+										children: "External Docs"
+									}), tag.externalDocsUrl ? /* @__PURE__ */ jsx(Tooltip, {
+										title: tag.externalDocsUrl.length > 25 ? tag.externalDocsUrl : "",
+										children: /* @__PURE__ */ jsx("a", {
+											href: tag.externalDocsUrl,
+											target: "_blank",
+											rel: "noreferrer",
+											className: cx("col-value-link"),
+											style: {
+												overflow: "hidden",
+												textOverflow: "ellipsis",
+												whiteSpace: "nowrap",
+												display: "block"
+											},
+											children: tag.externalDocsUrl
+										})
+									}) : /* @__PURE__ */ jsx("span", {
+										className: cx("col-value"),
+										children: "-"
+									})]
+								})
+							]
 						}), /* @__PURE__ */ jsxs("div", {
-							className: cx("tag-col-mobile"),
-							children: [/* @__PURE__ */ jsx("span", {
-								className: cx("col-label"),
-								style: {
-									fontSize: token.fontSize,
-									lineHeight: "20px"
-								},
-								children: "Description:"
+							className: cx("tag-actions"),
+							children: [/* @__PURE__ */ jsx(Tooltip, {
+								title: tag.isDefault ? "The default tag cannot be deleted or edited" : "",
+								children: /* @__PURE__ */ jsx(Button, {
+									danger: true,
+									type: "text",
+									icon: /* @__PURE__ */ jsx(Trash, {
+										width: 32,
+										height: 32
+									}),
+									disabled: tag.isDefault,
+									onClick: () => !tag.isDefault && onDeleteTag?.(tag.name),
+									style: {
+										width: 40,
+										height: 40,
+										padding: 0,
+										lineHeight: 1
+									}
+								})
 							}), /* @__PURE__ */ jsx(Tooltip, {
-								title: tag.description && tag.description.length > 20 ? tag.description : "",
-								children: /* @__PURE__ */ jsx("span", {
-									className: cx("col-value"),
+								title: tag.isDefault ? "The default tag cannot be deleted or edited" : "",
+								children: /* @__PURE__ */ jsx(Button, {
+									icon: /* @__PURE__ */ jsx(EditTag, {}),
+									disabled: tag.isDefault,
+									onClick: () => !tag.isDefault && onEditTag?.(tag),
 									style: {
-										fontSize: token.fontSize,
-										lineHeight: "20px",
-										overflow: "hidden",
-										textOverflow: "ellipsis",
-										whiteSpace: "nowrap",
-										maxWidth: 140,
-										display: "block"
-									},
-									children: tag.description ?? "-"
+										width: 32,
+										height: 32,
+										padding: 0,
+										lineHeight: 1,
+										...!tag.isDefault && { color: "#A146B3" }
+									}
 								})
 							})]
 						})]
-					}), /* @__PURE__ */ jsxs("div", {
-						className: cx("tag-actions"),
-						style: {
-							paddingTop: 6,
-							flexShrink: 0
-						},
-						children: [/* @__PURE__ */ jsx(Tooltip, {
-							title: tag.isDefault ? "The default tag cannot be deleted or edited" : "",
-							children: /* @__PURE__ */ jsx(Button, {
-								danger: true,
-								type: "text",
-								icon: /* @__PURE__ */ jsx(Trash, {
-									width: 32,
-									height: 32
-								}),
-								disabled: tag.isDefault,
-								onClick: () => !tag.isDefault && onDeleteTag?.(tag.name),
-								style: {
-									width: 40,
-									height: 40,
-									padding: 0,
-									lineHeight: 1
-								}
-							})
-						}), /* @__PURE__ */ jsx(Tooltip, {
-							title: tag.isDefault ? "The default tag cannot be deleted or edited" : "",
-							children: /* @__PURE__ */ jsx(Button, {
-								icon: /* @__PURE__ */ jsx(EditOutlined, { style: { fontSize: 18 } }),
-								disabled: tag.isDefault,
-								onClick: () => !tag.isDefault && onEditTag?.(tag),
-								style: {
-									width: 32,
-									height: 32,
-									padding: 0,
-									lineHeight: 1
-								}
-							})
-						})]
-					})]
-				}, tag.name);
-			})
-		}) : /* @__PURE__ */ jsx("div", {
-			className: cx("body"),
-			children: tags.map((tag, index) => {
-				return /* @__PURE__ */ jsxs("div", {
-					className: cx("tag-row", index === tags.length - 1 ? "tag-row-last" : ""),
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: cx("tag-info"),
-						children: [
-							/* @__PURE__ */ jsxs("div", {
-								className: cx("tag-col"),
-								style: { width: 200 },
-								children: [/* @__PURE__ */ jsx("span", {
-									className: cx("col-label"),
-									children: "Tag Name"
-								}), /* @__PURE__ */ jsx("span", {
-									className: cx("col-value"),
-									children: tag.name
-								})]
-							}),
-							/* @__PURE__ */ jsxs("div", {
-								className: cx("tag-col"),
-								style: { width: 280 },
-								children: [/* @__PURE__ */ jsx("span", {
-									className: cx("col-label"),
-									children: "Description"
-								}), /* @__PURE__ */ jsx(Tooltip, {
-									title: tag.description && tag.description.length > 30 ? tag.description : "",
-									children: /* @__PURE__ */ jsx("span", {
-										className: cx("col-value"),
-										style: {
-											overflow: "hidden",
-											textOverflow: "ellipsis",
-											whiteSpace: "nowrap",
-											maxWidth: 280,
-											display: "block"
-										},
-										children: tag.description ?? "-"
-									})
-								})]
-							}),
-							/* @__PURE__ */ jsxs("div", {
-								className: cx("tag-col"),
-								style: {
-									flex: 1,
-									minWidth: 0
-								},
-								children: [/* @__PURE__ */ jsx("span", {
-									className: cx("col-label"),
-									children: "External Docs"
-								}), tag.externalDocsUrl ? /* @__PURE__ */ jsx(Tooltip, {
-									title: tag.externalDocsUrl.length > 25 ? tag.externalDocsUrl : "",
-									children: /* @__PURE__ */ jsx("a", {
-										href: tag.externalDocsUrl,
-										target: "_blank",
-										rel: "noreferrer",
-										className: cx("col-value-link"),
-										style: {
-											overflow: "hidden",
-											textOverflow: "ellipsis",
-											whiteSpace: "nowrap",
-											display: "block"
-										},
-										children: tag.externalDocsUrl
-									})
-								}) : /* @__PURE__ */ jsx("span", {
-									className: cx("col-value"),
-									children: "-"
-								})]
-							})
-						]
-					}), /* @__PURE__ */ jsxs("div", {
-						className: cx("tag-actions"),
-						children: [/* @__PURE__ */ jsx(Tooltip, {
-							title: tag.isDefault ? "The default tag cannot be deleted or edited" : "",
-							children: /* @__PURE__ */ jsx(Button, {
-								danger: true,
-								type: "text",
-								icon: /* @__PURE__ */ jsx(Trash, {
-									width: 32,
-									height: 32
-								}),
-								disabled: tag.isDefault,
-								onClick: () => !tag.isDefault && onDeleteTag?.(tag.name),
-								style: {
-									width: 40,
-									height: 40,
-									padding: 0,
-									lineHeight: 1
-								}
-							})
-						}), /* @__PURE__ */ jsx(Tooltip, {
-							title: tag.isDefault ? "The default tag cannot be deleted or edited" : "",
-							children: /* @__PURE__ */ jsx(Button, {
-								icon: /* @__PURE__ */ jsx(EditOutlined, { style: { fontSize: 18 } }),
-								disabled: tag.isDefault,
-								onClick: () => !tag.isDefault && onEditTag?.(tag),
-								style: {
-									width: 32,
-									height: 32,
-									padding: 0,
-									lineHeight: 1
-								}
-							})
-						})]
-					})]
-				}, tag.name);
+					}, tag.name);
+				})
+			}),
+			tags.length > TAGS_PAGE_SIZE && /* @__PURE__ */ jsx(Pagination, {
+				current: safePage,
+				pageSize: TAGS_PAGE_SIZE,
+				total: tags.length,
+				onChange: setCurrentPage,
+				showSizeChanger: false,
+				className: cx("pagination")
 			})
-		}))]
+		]
 	}));
 };
 //#endregion
@@ -5607,13 +6995,6 @@ const AddTagDrawer = ({ open, onClose, mode, initialValues, onAddTag, onEditTag
 		if (open && mode === "edit" && initialValues) form.setFieldsValue(initialValues);
 		if (!open) form.resetFields();
 	}, [open]);
-	useEffect(() => {
-		if (!extDocsDesc?.trim()) form.setFields([{
-			name: "externalDocsLink",
-			value: void 0,
-			errors: []
-		}]);
-	}, [extDocsDesc]);
 	useEffect(() => {
 		if (extDocsDesc?.trim()) form.validateFields(["externalDocsLink"]).catch(() => {});
 	}, [extDocsLink, extDocsDesc]);
@@ -5769,7 +7150,14 @@ const AddTagDrawer = ({ open, onClose, mode, initialValues, onAddTag, onEditTag
 						children: /* @__PURE__ */ jsx(Input, {
 							showCount: true,
 							maxLength: 25,
-							placeholder: "Describe External Docs"
+							placeholder: "Describe External Docs",
+							onChange: (e) => {
+								if (!e.target.value?.trim()) form.setFields([{
+									name: "externalDocsLink",
+									value: void 0,
+									errors: []
+								}]);
+							}
 						})
 					}),
 					/* @__PURE__ */ jsx(Form.Item, {
@@ -5794,19 +7182,11 @@ const AddTagDrawer = ({ open, onClose, mode, initialValues, onAddTag, onEditTag
 								return Promise.reject(/* @__PURE__ */ new Error("Please enter a valid URL"));
 							}
 						} }],
-						children: /* @__PURE__ */ jsx(Tooltip, {
-							title: !isLinkEnabled ? "You need to add the External Docs Description first." : "",
-							color: "rgba(0,0,0,0.85)",
-							placement: "topLeft",
-							children: /* @__PURE__ */ jsx(Input, {
-								showCount: true,
-								maxLength: 512,
-								placeholder: "External Docs Link",
-								disabled: !isLinkEnabled,
-								onChange: (e) => {
-									form.setFieldValue("externalDocsLink", e.target.value);
-								}
-							})
+						children: /* @__PURE__ */ jsx(Input, {
+							showCount: true,
+							maxLength: 500,
+							placeholder: "External Docs Link",
+							disabled: !isLinkEnabled
 						})
 					})
 				]
@@ -5883,6 +7263,251 @@ const AddTagDrawer = ({ open, onClose, mode, initialValues, onAddTag, onEditTag
 		})
 	] }));
 };
+//#endregion
+//#region src/assets/icons/restApi.tsx
+const RestApiIcon = (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__ */ jsxs("g", {
+		clipPath: "url(#restapi-clip)",
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M14.4059 7.73805H13.2601V7.23565C13.2601 7.11607 13.1787 7.01187 13.0626 6.98294L12.2915 6.79083L11.8883 5.81794L12.2975 5.13716C12.3591 5.03469 12.343 4.90341 12.2585 4.81888L11.1795 3.73987C11.0949 3.65531 10.9636 3.63922 10.8612 3.70081L10.1804 4.11003L9.20745 3.70685L9.01534 2.9357C8.98644 2.81966 8.88222 2.73823 8.76264 2.73823H8.26032V1.59245C8.26032 1.44862 8.14373 1.33203 7.9999 1.33203C7.85607 1.33203 7.73949 1.44862 7.73949 1.59245V2.73823H7.23709C7.11751 2.73823 7.01331 2.81966 6.98438 2.9357L6.79227 3.70685L5.81938 4.11003L5.1386 3.70081C5.03607 3.63919 4.90485 3.65529 4.82032 3.73987L3.74131 4.81888C3.65675 4.90344 3.64066 5.03471 3.70225 5.13716L4.11146 5.81794L3.70829 6.79083L2.93714 6.98294C2.8211 7.01185 2.73967 7.11607 2.73967 7.23565V7.73805H1.59391C1.45008 7.73805 1.3335 7.85463 1.3335 7.99846C1.3335 8.14226 1.45008 8.25888 1.59391 8.25888H2.73969V8.76128C2.73969 8.88086 2.82113 8.98508 2.93717 9.01396L3.70831 9.20609L4.11149 10.179L3.70225 10.8598C3.64063 10.9623 3.65675 11.0935 3.74131 11.1781L4.82032 12.2571C4.90488 12.3416 5.03615 12.3577 5.13865 12.2961L5.81941 11.8869L6.79232 12.2901L6.98443 13.0612C7.01334 13.1773 7.11756 13.2587 7.23714 13.2587H7.73951V14.4045C7.73951 14.5483 7.8561 14.6649 7.99993 14.6649C8.14376 14.6649 8.26034 14.5483 8.26034 14.4045V13.2587H8.76274C8.88232 13.2587 8.98652 13.1773 9.01545 13.0612L9.20756 12.2901L10.1805 11.8869L10.8612 12.2961C10.9637 12.3577 11.095 12.3416 11.1796 12.2571L12.2586 11.1781C12.3431 11.0935 12.3592 10.9622 12.2976 10.8598L11.8884 10.179L12.2916 9.20609L13.0627 9.01396C13.1788 8.98508 13.2602 8.88086 13.2602 8.76128V8.25888H14.406C14.5498 8.25888 14.6664 8.14226 14.6664 7.99846C14.6663 7.85463 14.5497 7.73805 14.4059 7.73805ZM12.7393 8.55779L12.0382 8.73247C11.9581 8.75245 11.8922 8.80919 11.8606 8.88547L11.3569 10.1009C11.3253 10.1772 11.3318 10.264 11.3743 10.3348L11.7463 10.9537L10.9551 11.7449L10.3362 11.3729C10.2654 11.3303 10.1786 11.3239 10.1023 11.3555L8.88686 11.8592C8.81058 11.8909 8.75383 11.9567 8.73386 12.0369L8.5592 12.7379H7.44055L7.26589 12.0369C7.24592 11.9567 7.18917 11.8909 7.1129 11.8592L5.89743 11.3555C5.82113 11.3239 5.73435 11.3303 5.66355 11.3729L5.04464 11.7449L4.25342 10.9537L4.62545 10.3348C4.668 10.264 4.67443 10.1772 4.64282 10.1009L4.13912 8.88547C4.10751 8.80919 4.04159 8.75245 3.96149 8.73247L3.26045 8.55779V7.43914L3.96152 7.26448C4.04162 7.2445 4.10753 7.18776 4.13915 7.11148L4.64284 5.89602C4.67446 5.81971 4.668 5.73294 4.62548 5.66216L4.25344 5.04325L5.04467 4.25203L5.66357 4.62406C5.73435 4.66661 5.82113 4.67307 5.89743 4.64143L7.1129 4.13773C7.18917 4.10612 7.24592 4.04021 7.26589 3.9601L7.44055 3.25904H8.5592L8.73386 3.9601C8.75383 4.04021 8.81058 4.10612 8.88686 4.13773L10.1023 4.64143C10.1787 4.67305 10.2654 4.66659 10.3362 4.62406L10.9551 4.25203L11.7463 5.04325L11.3743 5.66216C11.3317 5.73294 11.3253 5.81971 11.3569 5.89602L11.8606 7.11148C11.8922 7.18776 11.9581 7.2445 12.0382 7.26448L12.7393 7.43914V8.55779Z",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M9.14809 4.86755C9.01309 4.81807 8.86346 4.88729 8.8139 5.02229C8.76434 5.15731 8.83364 5.30692 8.96864 5.35648C10.0712 5.76114 10.8121 6.82252 10.8121 7.99757C10.8121 9.54835 9.55041 10.81 7.99965 10.81C6.4489 10.81 5.18729 9.54833 5.18729 7.99755C5.18729 6.88567 5.84426 5.87593 6.86098 5.42515C6.99247 5.36687 7.05179 5.21302 6.99348 5.08156C6.9352 4.9501 6.78132 4.89075 6.64989 4.94906C5.44505 5.48325 4.6665 6.67987 4.6665 7.99755C4.6665 9.83546 6.16176 11.3308 7.99971 11.3308C9.83765 11.3308 11.3329 9.83546 11.3329 7.99755C11.3329 6.605 10.4549 5.34713 9.14809 4.86755Z",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M8.01348 4.66409L7.99967 4.66406C7.85585 4.66406 7.73926 4.78065 7.73926 4.92448C7.73926 5.06831 7.85585 5.1849 7.99967 5.1849L8.01194 5.18492C8.0122 5.18492 8.01246 5.18492 8.01272 5.18492C8.15618 5.18492 8.2727 5.06883 8.27314 4.92526C8.27355 4.78143 8.1573 4.6645 8.01348 4.66409Z",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M9.81413 6.96094C9.6703 6.96094 9.55371 7.07753 9.55371 7.22135V8.73919C9.55371 8.883 9.6703 8.99961 9.81413 8.99961C9.95796 8.99961 10.0745 8.883 10.0745 8.73919V7.22133C10.0745 7.0775 9.95796 6.96094 9.81413 6.96094Z",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M8.55132 6.96094H8.01481C7.87098 6.96094 7.75439 7.07753 7.75439 7.22135V7.74057V8.09581V8.73917C7.75439 8.88297 7.87098 8.99958 8.01481 8.99958C8.15864 8.99958 8.27523 8.88297 8.27523 8.73917V8.35622H8.55135C8.91463 8.35622 9.2102 8.06063 9.2102 7.69737V7.61979C9.21018 7.25648 8.91463 6.96094 8.55132 6.96094ZM8.68937 7.69734C8.68937 7.77346 8.62744 7.83539 8.55132 7.83539H8.2752V7.74055V7.48172H8.55132C8.62744 7.48172 8.68937 7.54365 8.68937 7.61977V7.69734Z",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M7.47523 8.67635L6.80685 7.1187C6.76581 7.02297 6.67169 6.96094 6.56755 6.96094C6.46341 6.96094 6.3693 7.02297 6.32823 7.11867L5.65984 8.67633C5.60312 8.80849 5.6643 8.96161 5.79648 9.01831C5.92867 9.075 6.08177 9.01385 6.13849 8.88169L6.56755 7.88172L6.99664 8.88169C7.03898 8.98039 7.13508 9.0395 7.23607 9.0395C7.27031 9.0395 7.30515 9.03268 7.33862 9.01833C7.47078 8.96164 7.53195 8.80852 7.47523 8.67635Z",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M13.7813 1.33203C13.2931 1.33203 12.896 1.72919 12.896 2.21742C12.896 2.3668 12.9333 2.50755 12.9989 2.63107L12.0025 3.62737C11.9008 3.72906 11.9008 3.89396 12.0025 3.99565C12.0534 4.04648 12.1201 4.0719 12.1867 4.0719C12.2533 4.0719 12.32 4.04648 12.3708 3.99562L13.367 2.99951C13.4907 3.06531 13.6317 3.10279 13.7813 3.10279C14.2695 3.10279 14.6667 2.70562 14.6667 2.2174C14.6667 1.72917 14.2696 1.33203 13.7813 1.33203Z",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M3.99712 12.002C3.89542 11.9004 3.73053 11.9004 3.62886 12.002L2.6329 12.998C2.50925 12.9323 2.36837 12.8949 2.21889 12.8949C1.73066 12.8949 1.3335 13.2921 1.3335 13.7803C1.3335 14.2685 1.73066 14.6657 2.21889 14.6657C2.70712 14.6657 3.10428 14.2685 3.10428 13.7803C3.10428 13.6308 3.06688 13.4899 3.00118 13.3663L3.99714 12.3703C4.09881 12.2686 4.09881 12.1037 3.99712 12.002Z",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M12.3711 12.0021C12.3224 11.9536 12.2552 11.9258 12.1867 11.9258C12.1182 11.9258 12.051 11.9536 12.0026 12.0021C11.9541 12.0505 11.9263 12.1177 11.9263 12.1862C11.9263 12.2547 11.9541 12.3219 12.0026 12.3703C12.051 12.4187 12.1182 12.4466 12.1867 12.4466C12.2554 12.4466 12.3224 12.4187 12.3711 12.3703C12.4195 12.3219 12.4471 12.2549 12.4471 12.1862C12.4471 12.1177 12.4195 12.0505 12.3711 12.0021Z",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M13.7813 12.8934C13.6316 12.8934 13.4906 12.9308 13.3669 12.9967L12.927 12.5567C12.8253 12.4551 12.6604 12.455 12.5587 12.5567C12.457 12.6584 12.457 12.8233 12.5587 12.925L12.9988 13.3651C12.9332 13.4887 12.8959 13.6294 12.8959 13.7788C12.8959 14.267 13.2931 14.6642 13.7813 14.6642C14.2695 14.6642 14.6666 14.267 14.6666 13.7788C14.6666 13.2905 14.2695 12.8934 13.7813 12.8934Z",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M3.99712 3.62737L3.00118 2.63143C3.06688 2.50779 3.10428 2.3669 3.10428 2.21742C3.10428 1.72922 2.70712 1.33203 2.21889 1.33203C1.73066 1.33203 1.3335 1.72919 1.3335 2.21742C1.3335 2.70565 1.73066 3.10281 2.21889 3.10281C2.36839 3.10281 2.50928 3.06542 2.6329 2.99971L3.62886 3.99565C3.67972 4.04651 3.74636 4.07193 3.813 4.07193C3.87964 4.07193 3.94631 4.04651 3.99714 3.99565C4.09881 3.89396 4.09881 3.72906 3.99712 3.62737Z",
+				fill: "currentColor"
+			})
+		]
+	}), /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", {
+		id: "restapi-clip",
+		children: /* @__PURE__ */ jsx("rect", {
+			width: "13.3333",
+			height: "13.3333",
+			fill: "white",
+			transform: "translate(1.3335 1.33203)"
+		})
+	}) })]
+});
+//#endregion
+//#region src/view/components/EditModeSidebar/index.tsx
+const EditModeSidebar = ({ selectedItem, onSelectItem, endpoints, hasGeneralError, hasSaveErrors }) => {
+	const { wrapSSR, cx, token } = useStyle("EditModeSidebar", (token, scope) => ({
+		[scope("root")]: {
+			display: "flex",
+			flexDirection: "column",
+			gap: token.marginXS,
+			padding: token.padding,
+			backgroundColor: token.colorBgContainer,
+			borderRadius: token.borderRadius,
+			width: 320,
+			minWidth: 320,
+			flexShrink: 0,
+			overflowY: "auto"
+		},
+		[scope("spec-icon")]: {
+			fontSize: 16,
+			color: token.colorTextSecondary,
+			flexShrink: 0,
+			display: "flex",
+			alignItems: "center"
+		},
+		[scope("spec-label")]: {
+			fontSize: token.fontSize,
+			fontWeight: 400,
+			color: token.colorText,
+			lineHeight: "22px"
+		},
+		[scope("badge")]: {
+			minWidth: "3.75rem",
+			textAlign: "center",
+			border: "none"
+		},
+		[scope("path")]: {
+			fontSize: token.fontSize,
+			fontWeight: 400,
+			lineHeight: "22px",
+			whiteSpace: "nowrap",
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			flex: 1
+		},
+		[`${scope("root")} .ant-menu`]: {
+			background: "transparent",
+			border: "none",
+			paddingInline: 0
+		},
+		[`${scope("root")} .ant-menu-item`]: {
+			padding: `${token.paddingXS}px ${token.paddingLG}px`,
+			borderRadius: token.borderRadius,
+			height: "auto",
+			lineHeight: "22px",
+			display: "flex",
+			alignItems: "center",
+			gap: 12,
+			marginInline: 0,
+			marginBlock: 0,
+			width: "100%",
+			transition: "background-color 0.15s"
+		},
+		[`${scope("root")} .ant-menu-item:not(.ant-menu-item-selected):hover`]: { backgroundColor: token.colorFillTertiary },
+		[`${scope("root")} .ant-menu-item-selected`]: { backgroundColor: token.colorPrimaryBg },
+		[`${scope("root")} .ant-menu-item.error-active.ant-menu-item-selected`]: { backgroundColor: token.colorErrorBg },
+		[`${scope("root")} .ant-menu-item-group-title`]: {
+			fontSize: token.fontSize,
+			fontWeight: 400,
+			color: token.colorTextTertiary,
+			lineHeight: "22px",
+			paddingInline: 0,
+			paddingTop: 0,
+			paddingBottom: token.marginXXS,
+			userSelect: "none"
+		},
+		[`${scope("root")} .ant-menu-item-group + .ant-menu-item-group`]: { marginTop: token.marginXS },
+		[`${scope("spec-item")}:not(:last-child)`]: { marginBottom: token.marginXS },
+		[`${scope("root")} .ant-menu-title-content`]: {
+			overflow: "hidden",
+			display: "flex",
+			flex: 1,
+			alignItems: "center",
+			minWidth: 0,
+			gap: 12
+		},
+		[`${scope("root")} .ant-menu-item-selected ${scope("spec-label")}`]: { color: token.colorPrimary }
+	}));
+	const selectedKeys = selectedItem.type === "endpoint" ? [selectedItem.key] : [selectedItem.type];
+	const items = [{
+		type: "group",
+		label: "Specifications",
+		children: [
+			hasSaveErrors && {
+				key: "errors",
+				className: `${cx("spec-item")} error-active`,
+				icon: /* @__PURE__ */ jsx("span", {
+					className: cx("spec-icon"),
+					style: { color: token.colorError },
+					children: /* @__PURE__ */ jsx(ExclamationCircleOutlined, {})
+				}),
+				label: /* @__PURE__ */ jsx("span", {
+					className: cx("spec-label"),
+					style: { color: token.colorError },
+					children: "Errors"
+				})
+			},
+			{
+				key: "general",
+				className: cx("spec-item"),
+				icon: /* @__PURE__ */ jsx("span", {
+					className: cx("spec-icon"),
+					style: hasGeneralError ? { color: token.colorError } : void 0,
+					children: /* @__PURE__ */ jsx(RestApiIcon, {})
+				}),
+				label: /* @__PURE__ */ jsx("span", {
+					className: cx("spec-label"),
+					style: hasGeneralError ? { color: token.colorError } : void 0,
+					children: "General"
+				})
+			},
+			{
+				key: "tags",
+				className: cx("spec-item"),
+				icon: /* @__PURE__ */ jsx("span", {
+					className: cx("spec-icon"),
+					children: /* @__PURE__ */ jsx(TagOutlined, {})
+				}),
+				label: /* @__PURE__ */ jsx("span", {
+					className: cx("spec-label"),
+					children: "Tags"
+				})
+			}
+		].filter(Boolean)
+	}, {
+		type: "group",
+		label: "Endpoints",
+		children: endpoints.map((ep) => {
+			const colors = methodColors$1[ep.method];
+			return {
+				key: ep.id,
+				label: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Tag, {
+					className: cx("badge"),
+					style: {
+						backgroundColor: colors?.bg,
+						color: colors?.color,
+						border: "none"
+					},
+					children: ep.method
+				}), /* @__PURE__ */ jsx("span", {
+					className: cx("path"),
+					style: { color: selectedItem.type === "endpoint" && selectedItem.key === ep.id ? token.colorPrimary : token.colorText },
+					children: ep.path
+				})] })
+			};
+		})
+	}];
+	const handleMenuClick = ({ key }) => {
+		if (key === "errors") onSelectItem({ type: "errors" });
+		else if (key === "general") onSelectItem({ type: "general" });
+		else if (key === "tags") onSelectItem({ type: "tags" });
+		else onSelectItem({
+			type: "endpoint",
+			key
+		});
+	};
+	return wrapSSR(/* @__PURE__ */ jsx("div", {
+		className: cx("root"),
+		children: /* @__PURE__ */ jsx(Menu, {
+			mode: "inline",
+			selectedKeys,
+			items,
+			onClick: handleMenuClick,
+			style: {
+				background: "transparent",
+				border: "none"
+			}
+		})
+	}));
+};
 token.colorPrimary, token.colorSuccess, token.colorError, token.colorWarning, token["volcano.5"], token["geekblue.6"], token["purple.5"], token["volcano.4"];
 const darkerMethodColors = {
 	GET: {
@@ -6053,9 +7678,10 @@ const filterTreeData = (data, searchText) => {
 const getSidebarStyles = (token, scope) => ({
 	[scope("sider")]: {
 		backgroundColor: token.colorBgElevated,
+		overflowY: "auto",
 		overflowX: "clip",
 		borderRadius: token.borderRadius,
-		height: "auto"
+		height: "100%"
 	},
 	[scope("content")]: { padding: token.padding },
 	[scope("controls")]: {
@@ -6323,10 +7949,7 @@ const Sidebar = ({ searchValue, setSearchValue, onNodeSelect }) => {
 	});
 	if (isMobile) return wrapSSR(/* @__PURE__ */ jsx("aside", {
 		className: cx("sider"),
-		style: {
-			width: "100%",
-			height: "100%"
-		},
+		style: { height: "100%" },
 		children: inner
 	}));
 	return wrapSSR(/* @__PURE__ */ jsx(Resizable, {
@@ -6354,6 +7977,47 @@ const Sidebar = ({ searchValue, setSearchValue, onNodeSelect }) => {
 //#endregion
 //#region src/view/console/EndpointPage/EndpointPage.tsx
 const { Title: Title$1, Paragraph } = Typography;
+const MAX_VISIBLE_ENUMS = 2;
+const renderEnumTags = (enums, token) => {
+	const tagStyle = {
+		background: token.colorFillAlter,
+		border: `1px solid ${token.colorBorder}`,
+		borderRadius: token.borderRadiusSM
+	};
+	if (enums.length <= MAX_VISIBLE_ENUMS) return /* @__PURE__ */ jsx("span", {
+		style: {
+			display: "flex",
+			flexWrap: "wrap",
+			gap: token.marginXXS
+		},
+		children: enums.map((e) => /* @__PURE__ */ jsx(Tag, {
+			style: tagStyle,
+			children: e
+		}, e))
+	});
+	const visible = enums.slice(0, MAX_VISIBLE_ENUMS);
+	const hidden = enums.slice(MAX_VISIBLE_ENUMS);
+	return /* @__PURE__ */ jsxs("span", {
+		style: {
+			display: "flex",
+			flexWrap: "wrap",
+			gap: token.marginXXS
+		},
+		children: [visible.map((e) => /* @__PURE__ */ jsx(Tag, {
+			style: tagStyle,
+			children: e
+		}, e)), /* @__PURE__ */ jsx(Tooltip, {
+			title: hidden.join(", "),
+			children: /* @__PURE__ */ jsxs(Tag, {
+				style: {
+					...tagStyle,
+					cursor: "pointer"
+				},
+				children: ["+", hidden.length]
+			})
+		})]
+	});
+};
 const requestColumns = [
 	{
 		title: "Parameter",
@@ -6396,7 +8060,7 @@ const buildRequestData = (params, token) => [...params].sort((a, b) => a.require
 			})
 		] }),
 		desc: p.description || "--",
-		enum: p.schema?.enum ? p.schema.enum.map((e) => /* @__PURE__ */ jsx(Tag, { children: e }, e)) : "--"
+		enum: p.schema?.enum ? renderEnumTags(p.schema.enum, token) : "--"
 	};
 });
 const buildHeaderData = (headers, token) => {
@@ -6425,7 +8089,7 @@ const buildHeaderData = (headers, token) => {
 				})
 			] }, idx),
 			desc: header.description || "--",
-			enum: header.schema?.enum ? header.schema.enum.map((e) => /* @__PURE__ */ jsx(Tag, { children: e }, e)) : "--"
+			enum: header.schema?.enum ? renderEnumTags(header.schema.enum, token) : "--"
 		};
 	});
 };
@@ -6457,7 +8121,7 @@ const buildRequestBodyData = (requestBody, token) => {
 			})
 		] }),
 		desc: prop.description || "--",
-		enum: prop.enum ? prop.enum.map((e) => /* @__PURE__ */ jsx(Tag, { children: e }, e)) : "--"
+		enum: prop.enum ? renderEnumTags(prop.enum, token) : "--"
 	}));
 };
 const EndpointPage = () => {
@@ -6468,13 +8132,9 @@ const EndpointPage = () => {
 		[scope("docs-endpoint-container")]: {
 			display: "flex",
 			flexDirection: "column",
-			gap: token.marginLG,
-			height: "100%"
-		},
-		[scope("content")]: {
-			width: "100%",
-			height: "100%"
+			gap: token.marginLG
 		},
+		[scope("content")]: { width: "100%" },
 		[scope("code")]: {
 			background: "unset",
 			borderRadius: token.borderRadius,
@@ -6503,8 +8163,7 @@ const EndpointPage = () => {
 				".ant-tabs-tab": { paddingTop: "0" }
 			},
 			"& .ant-table": { backgroundColor: `${token.colorBgBase} !important` },
-			"& .ant-table-thead > tr > th": { backgroundColor: `${token.colorBgBase} !important` },
-			"& .ant-table-tbody > tr > td": { backgroundColor: `${token.colorBgBase} !important` }
+			"& .ant-table-thead > tr > th": { backgroundColor: `${token.colorBgBase} !important` }
 		},
 		[scope("row-odd")]: { "& > td": { background: `${token.colorBgElevated} !important` } },
 		[scope("row-even")]: { "& > td": { background: `${token.colorBgLayout} !important` } }
@@ -6716,12 +8375,9 @@ const MainContent = ({ searchEnabled, handleResetSearch, handleVisitLandingPage
 	const { focusedContent, transformedData } = useStore(({ view }) => view);
 	const { wrapSSR, cx, token } = useStyle("MainContent", (token, scope) => ({
 		[scope("inner-doc-container")]: {
-			width: "100%",
-			height: "auto",
+			minWidth: 0,
 			borderRadius: token.borderRadius,
-			padding: token.paddingXL,
-			overflow: "hidden",
-			minWidth: 0
+			padding: token.paddingXL
 		},
 		[scope("centered")]: {
 			display: "flex",
@@ -6825,13 +8481,7 @@ const Codebox$1 = ({ code, language, wrapLongLines }) => {
 	const [appTheme] = useState("DARK");
 	const { token, theme: themeConfig } = theme.useToken();
 	const bodyBg = themeConfig.id == 1 ? token.colorBgContainer : "#1d2856";
-	const { cx } = useStyle("codeBox", (token, scope) => ({ [scope("codebox")]: {
-		borderRadius: token.borderRadius,
-		height: "100%",
-		maxHeight: "100%",
-		overflow: "auto",
-		pre: { height: "100%" }
-	} }));
+	const { cx } = useStyle("codeBox", (token, scope) => ({ [scope("codebox")]: { borderRadius: token.borderRadius } }));
 	return /* @__PURE__ */ jsx("div", {
 		className: cx("codebox"),
 		children: /* @__PURE__ */ jsx(Light, {
@@ -6843,7 +8493,6 @@ const Codebox$1 = ({ code, language, wrapLongLines }) => {
 			customStyle: {
 				margin: 0,
 				minHeight: "3rem",
-				overflowY: "auto",
 				padding: "0.75rem 1rem 0.75rem 1.5rem",
 				backgroundColor: bodyBg,
 				fontSize: "0.75rem"
@@ -7111,6 +8760,18 @@ const transformOpenApiToDocs = (api) => {
 				content: resolvedContent
 			};
 		}
+		if (entry.responses) {
+			const resolvedResponses = {};
+			for (const [code, responseValue] of Object.entries(entry.responses)) if (responseValue.content) {
+				const resolvedContent = {};
+				for (const [contentType, contentValue] of Object.entries(responseValue.content)) resolvedContent[contentType] = { schema: resolveSchema(contentValue.schema, api.components) ?? contentValue.schema };
+				resolvedResponses[code] = {
+					...responseValue,
+					content: resolvedContent
+				};
+			} else resolvedResponses[code] = responseValue;
+			entry.responses = resolvedResponses;
+		}
 		const matchedTags = (methodData.tags ?? []).filter((tag) => validTags.has(tag));
 		if (matchedTags.length > 0) matchedTags.forEach((tag) => {
 			if (!groupedPathsByTags[tag]) groupedPathsByTags[tag] = [];
@@ -7153,14 +8814,23 @@ const transformOpenApiToDocs = (api) => {
 const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPage, onSave }) => {
 	const [searchValue, setSearchValue] = useState("");
 	const [mode, setMode] = useState("edit");
-	const [hasChanges, setHasChanges] = useState(false);
 	const [bannerVisible, setBannerVisible] = useState(false);
 	const [resetKey, setResetKey] = useState(0);
-	const [generalCollapsed, setGeneralCollapsed] = useState(false);
-	const [tagsCollapsed, setTagsCollapsed] = useState(false);
+	const [generalCollapsed, setGeneralCollapsed] = useState(true);
+	const [tagsCollapsed, setTagsCollapsed] = useState(true);
 	const [endpointsCollapsed, setEndpointsCollapsed] = useState(false);
+	const [saveConfirmModal, setSaveConfirmModal] = useState(false);
+	const [resetConfirmModal, setResetConfirmModal] = useState(false);
+	const [selectedEditItem, setSelectedEditItem] = useState({ type: "general" });
+	const [errorBoxExpanded, setErrorBoxExpanded] = useState(false);
 	const [localApiName, setLocalApiName] = useState("");
+	const [apiNameTouched, setApiNameTouched] = useState(false);
 	const [localDescription, setLocalDescription] = useState("");
+	const [descriptionTouched, setDescriptionTouched] = useState(false);
+	const hasApiNameError = apiNameTouched && (!localApiName.trim() || !/^[A-Za-z0-9_-]+$/.test(localApiName.trim()));
+	const hasDescriptionError = descriptionTouched && !localDescription.trim();
+	const hasGeneralError = hasApiNameError || hasDescriptionError;
+	const [saveErrors, setSaveErrors] = useState([]);
 	const [selectedUrl, setSelectedUrl] = useState("");
 	const [endpointNames, setEndpointNames] = useState({});
 	const [endpointDescs, setEndpointDescs] = useState({});
@@ -7182,6 +8852,7 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 	const hasInitializedRef = useRef(false);
 	const { useBreakpoint } = Grid;
 	const isMobile = !useBreakpoint().md;
+	const allEndpoints = useMemo(() => selectedApi ? Object.values(selectedApi.tags ?? {}).flat() : [], [selectedApi]);
 	useEffect(() => {
 		return () => {
 			resetStore();
@@ -7228,8 +8899,7 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 			display: "flex",
 			flexDirection: "column",
 			gap: token.marginLG,
-			height: "100%",
-			overflowY: "auto"
+			height: "100%"
 		},
 		[scope("section")]: {
 			flexShrink: 0,
@@ -7237,11 +8907,19 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 		},
 		[scope("docs-layout")]: {
 			display: "flex",
-			flexShrink: 0,
-			height: "auto",
+			flex: 1,
+			minHeight: 0,
 			gap: token.marginLG,
 			width: "100%"
 		},
+		[scope("content-scroll-area")]: {
+			display: "grid",
+			gridTemplateColumns: "minmax(0, 1fr) auto",
+			flex: 1,
+			gap: token.marginLG,
+			overflow: "auto",
+			minWidth: 0
+		},
 		[".delete-tag-confirm-modal .ant-modal-container"]: {
 			"--ant-modal-content-padding": "0px !important",
 			padding: "0 !important"
@@ -7320,15 +8998,18 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 	}, [selectedApi]);
 	const tagMetadata = useMemo(() => {
 		if (!originalData || !selectedApi) return [];
-		const rawFile = originalData.find((f) => Object.keys(f.paths)[0] === selectedApi.contextPath);
-		if (!rawFile?.tags) return [];
-		return rawFile.tags.map((t) => ({
+		const mapped = originalData.find((f) => Object.keys(f.paths)[0] === selectedApi.contextPath)?.tags?.map((t) => ({
 			name: t.name,
 			description: t.description,
 			externalDocsUrl: t.externalDocs?.url,
 			externalDocsDescription: t.externalDocs?.description,
 			isDefault: t.name.toLowerCase() === "default"
-		}));
+		})) ?? [];
+		if (!mapped.some((t) => t.isDefault) && selectedApi.tags["default"]) mapped.push({
+			name: "default",
+			isDefault: true
+		});
+		return mapped;
 	}, [originalData, selectedApi]);
 	const initialEndpointResponseParams = useMemo(() => {
 		if (!originalData || !selectedApi) return {};
@@ -7395,6 +9076,44 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 		setEndpointParams(initialEndpointParams);
 		setEndpointResponseParams(initialEndpointResponseParams);
 	}, [selectedApi]);
+	const hasChanges = useMemo(() => {
+		if (!selectedApi) return false;
+		if (localApiName !== (selectedApi.title || "")) return true;
+		if (localDescription !== (selectedApi.description || "")) return true;
+		if (JSON.stringify(localTags) !== JSON.stringify(tagMetadata)) return true;
+		for (const [id, name] of Object.entries(endpointNames)) {
+			const ep = allEndpoints.find((e) => e.id === id);
+			if (ep && name !== (ep.summary ?? "")) return true;
+		}
+		for (const [id, desc] of Object.entries(endpointDescs)) {
+			const ep = allEndpoints.find((e) => e.id === id);
+			if (ep && desc !== (ep.description ?? "")) return true;
+		}
+		for (const [id, tags] of Object.entries(endpointTags)) {
+			const ep = allEndpoints.find((e) => e.id === id);
+			if (ep && JSON.stringify(tags) !== JSON.stringify(ep.tags ?? [])) return true;
+		}
+		if (JSON.stringify(endpointParams) !== JSON.stringify(initialEndpointParams)) return true;
+		if (JSON.stringify(endpointResponseParams) !== JSON.stringify(initialEndpointResponseParams)) return true;
+		return false;
+	}, [
+		selectedApi,
+		localApiName,
+		localDescription,
+		localTags,
+		tagMetadata,
+		allEndpoints,
+		endpointNames,
+		endpointDescs,
+		endpointTags,
+		endpointParams,
+		endpointResponseParams,
+		initialEndpointParams,
+		initialEndpointResponseParams
+	]);
+	useEffect(() => {
+		setBannerVisible(hasChanges);
+	}, [hasChanges]);
 	useEffect(() => {
 		if (mode !== "view" || !selectedEndpoint) return;
 		const epId = selectedEndpoint.id;
@@ -7445,7 +9164,6 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 			isDefault: false
 		};
 		setLocalTags((prev) => [...prev, newTag]);
-		setHasChanges(true);
 		setBannerVisible(true);
 	};
 	const handleUpdateTag = (updatedTag) => {
@@ -7457,7 +9175,6 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 			externalDocsUrl: updatedTag.externalDocsLink,
 			externalDocsDescription: updatedTag.externalDocsDescription
 		} : t));
-		setHasChanges(true);
 		setBannerVisible(true);
 	};
 	const handleDeleteTagConfirm = () => {
@@ -7467,7 +9184,6 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 			open: false,
 			tagName: ""
 		});
-		setHasChanges(true);
 		setBannerVisible(true);
 	};
 	const getEndpointsByTag = () => {
@@ -7487,8 +9203,10 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 		return filtered;
 	};
 	const handleReset = () => {
-		setHasChanges(false);
 		setBannerVisible(false);
+		setApiNameTouched(false);
+		setDescriptionTouched(false);
+		setSaveErrors([]);
 		setLocalApiName(selectedApi?.title ?? "");
 		setLocalDescription(selectedApi?.description ?? "");
 		setEndpointNames({});
@@ -7497,6 +9215,7 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 		setEndpointParams(initialEndpointParams);
 		setEndpointResponseParams(initialEndpointResponseParams);
 		setResetKey((prev) => prev + 1);
+		messageApi.success("Changes have been reset successfully.");
 	};
 	const handleSave = async () => {
 		if (!selectedApi || !originalData) return;
@@ -7570,9 +9289,21 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 				else delete methodObj["x-response-params"];
 			}
 		});
-		await onSave?.(cloned);
-		setHasChanges(false);
-		setBannerVisible(false);
+		try {
+			await onSave?.(cloned);
+			setBannerVisible(false);
+			setSaveErrors([]);
+			messageApi.success("Changes have been saved and published successfully.");
+		} catch (err) {
+			let messages = [];
+			if (err && typeof err === "object" && "errors" in err) {
+				const e = err;
+				messages = Array.isArray(e.errors) ? e.errors : [e.errors];
+			} else if (err instanceof Error) messages = err.message.split("\n").filter(Boolean);
+			else messages = [String(err)];
+			setSaveErrors(messages);
+			setSelectedEditItem({ type: "errors" });
+		}
 	};
 	const handleResetSearch = () => {
 		setSearchValue("");
@@ -7584,6 +9315,102 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 		}
 		window.location.pathname = "/";
 	};
+	useEffect(() => {
+		setErrorBoxExpanded(false);
+	}, [selectedEditItem]);
+	const errorBox = saveErrors.length > 0 ? /* @__PURE__ */ jsxs("div", {
+		style: {
+			background: token.colorErrorBg,
+			borderRadius: token.borderRadiusLG,
+			padding: `${token.marginLG}px ${token.marginLG}px 48px`,
+			width: "100%"
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: token.marginXS
+				},
+				children: [selectedEditItem.type !== "errors" && /* @__PURE__ */ jsx("button", {
+					onClick: () => setErrorBoxExpanded((prev) => !prev),
+					style: {
+						display: "flex",
+						alignItems: "center",
+						background: "transparent",
+						border: "none",
+						cursor: "pointer",
+						padding: 0,
+						lineHeight: 1
+					},
+					"aria-label": "Collapse",
+					children: /* @__PURE__ */ jsx(RightOutlined, { style: {
+						fontSize: 14,
+						color: token.colorError,
+						transform: errorBoxExpanded ? "rotate(90deg)" : "none",
+						transition: "transform 0.2s"
+					} })
+				}), /* @__PURE__ */ jsx(Title, {
+					level: 3,
+					style: {
+						margin: 0,
+						color: token.colorError
+					},
+					children: "Errors"
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				style: {
+					color: token.colorError,
+					fontSize: 16,
+					lineHeight: "24px",
+					marginTop: token.marginXS,
+					marginBottom: token.marginSM
+				},
+				children: "Failed to update the OpenAPI documentation. Please resolve the following issues:"
+			}),
+			/* @__PURE__ */ jsx(Divider, { style: { margin: `${token.marginSM}px 0` } }),
+			/* @__PURE__ */ jsx("ol", {
+				style: {
+					paddingLeft: token.marginLG,
+					margin: 0
+				},
+				children: saveErrors.map((msg, i) => /* @__PURE__ */ jsx("li", {
+					style: {
+						color: token.colorText,
+						marginBottom: token.marginXS
+					},
+					children: msg
+				}, i))
+			})
+		]
+	}) : null;
+	const errorBoxCollapsed = saveErrors.length > 0 ? /* @__PURE__ */ jsxs("button", {
+		onClick: () => setErrorBoxExpanded(true),
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: token.marginXS,
+			padding: `${token.paddingXS}px ${token.paddingLG}px`,
+			background: token.colorErrorBg,
+			borderRadius: token.borderRadiusLG,
+			border: "none",
+			cursor: "pointer",
+			width: "100%",
+			textAlign: "left"
+		},
+		children: [/* @__PURE__ */ jsx(RightOutlined, { style: {
+			fontSize: 14,
+			color: token.colorError
+		} }), /* @__PURE__ */ jsx("span", {
+			style: {
+				color: token.colorError,
+				fontSize: token.fontSizeLG,
+				fontWeight: 600
+			},
+			children: "Errors"
+		})]
+	}) : null;
 	const switcherNode = /* @__PURE__ */ jsxs("div", {
 		style: {
 			display: "flex",
@@ -7633,6 +9460,7 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: cx("documentation-container"),
+		style: { overflow: mode === "view" ? "hidden" : "auto" },
 		children: [
 			contextHolder,
 			/* @__PURE__ */ jsx("div", {
@@ -7641,158 +9469,321 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 					apiName: selectedApi?.title || "API",
 					mode,
 					onModeChange: setMode,
-					onReset: handleReset,
-					onSave: handleSave,
+					onReset: () => setResetConfirmModal(true),
+					onSave: () => setSaveConfirmModal(true),
 					hasChanges,
+					hasErrors: hasGeneralError,
 					switcherNode: isMobile ? switcherNode : void 0
 				})
 			}),
 			bannerVisible && /* @__PURE__ */ jsx(UnsavedChangesBanner, { onClose: () => setBannerVisible(false) }),
-			mode === "edit" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-				/* @__PURE__ */ jsx("div", {
-					className: cx("section"),
-					children: /* @__PURE__ */ jsx(GeneralSection, {
-						apiName: localApiName,
-						authType: selectedApi?.authType || "",
-						version: selectedApi?.relatedVersions?.find((v) => v.apiId === selectedApi?.currentVersion)?.version || "",
-						description: localDescription,
-						onApiNameChange: setLocalApiName,
-						onDescriptionChange: setLocalDescription,
-						collapsed: generalCollapsed,
-						onToggleCollapse: () => setGeneralCollapsed((c) => !c),
-						onChangeDetected: () => {
-							setHasChanges(true);
-							setBannerVisible(true);
-						}
-					})
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: cx("section"),
-					children: /* @__PURE__ */ jsx(TagsSection, {
-						tags: localTags,
-						collapsed: tagsCollapsed,
-						onToggleCollapse: () => setTagsCollapsed((prev) => !prev),
-						onAddTag: () => setTagDrawerState({
-							open: true,
-							mode: "add"
+			mode === "edit" ? /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					gap: token.marginLG,
+					flex: 1,
+					minHeight: 0
+				},
+				children: [!isMobile && /* @__PURE__ */ jsx(EditModeSidebar, {
+					selectedItem: selectedEditItem,
+					onSelectItem: setSelectedEditItem,
+					endpoints: allEndpoints,
+					hasGeneralError,
+					hasSaveErrors: saveErrors.length > 0
+				}), /* @__PURE__ */ jsx("div", {
+					style: {
+						display: "flex",
+						flexDirection: "column",
+						gap: token.marginLG,
+						flex: 1,
+						overflow: "auto"
+					},
+					children: isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [
+						errorBox && /* @__PURE__ */ jsx("div", {
+							className: cx("section"),
+							children: errorBox
 						}),
-						onEditTag: (tag) => setTagDrawerState({
-							open: true,
-							mode: "edit",
-							initialValues: {
-								name: tag.name,
-								description: tag.description,
-								externalDocsDescription: tag.externalDocsDescription,
-								externalDocsLink: tag.externalDocsUrl
-							}
+						/* @__PURE__ */ jsx("div", {
+							className: cx("section"),
+							children: /* @__PURE__ */ jsx(GeneralSection, {
+								apiName: localApiName,
+								authType: selectedApi?.authType || "",
+								version: selectedApi?.relatedVersions?.find((v) => v.apiId === selectedApi?.currentVersion)?.version || "",
+								description: localDescription,
+								onApiNameChange: (val) => {
+									setApiNameTouched(true);
+									setLocalApiName(val);
+								},
+								apiNameError: hasApiNameError,
+								onDescriptionChange: (val) => {
+									setDescriptionTouched(true);
+									setLocalDescription(val);
+								},
+								descriptionError: hasDescriptionError,
+								collapsed: generalCollapsed,
+								onToggleCollapse: () => setGeneralCollapsed((c) => !c),
+								onChangeDetected: () => {
+									setBannerVisible(true);
+								}
+							})
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: cx("section"),
+							children: /* @__PURE__ */ jsx(TagsSection, {
+								tags: localTags,
+								collapsed: tagsCollapsed,
+								onToggleCollapse: () => setTagsCollapsed((prev) => !prev),
+								onAddTag: () => setTagDrawerState({
+									open: true,
+									mode: "add"
+								}),
+								onEditTag: (tag) => setTagDrawerState({
+									open: true,
+									mode: "edit",
+									initialValues: {
+										name: tag.name,
+										description: tag.description,
+										externalDocsDescription: tag.externalDocsDescription,
+										externalDocsLink: tag.externalDocsUrl
+									}
+								}),
+								onDeleteTag: (tagName) => setDeleteTagModal({
+									open: true,
+									tagName
+								})
+							})
 						}),
-						onDeleteTag: (tagName) => setDeleteTagModal({
-							open: true,
-							tagName
+						/* @__PURE__ */ jsx("div", {
+							className: cx("section"),
+							children: /* @__PURE__ */ jsx(EndpointsSection, {
+								mode,
+								endpointsByTag: getEndpointsByTag(),
+								collapsed: endpointsCollapsed,
+								onToggleCollapse: () => setEndpointsCollapsed((c) => !c),
+								endpointNames,
+								endpointDescs,
+								endpointTags,
+								availableTags: localTags.map((t) => t.name),
+								onEndpointNameChange: (id, val) => {
+									setEndpointNames((prev) => ({
+										...prev,
+										[id]: val
+									}));
+									setBannerVisible(true);
+								},
+								onEndpointDescChange: (id, val) => {
+									setEndpointDescs((prev) => ({
+										...prev,
+										[id]: val
+									}));
+									setBannerVisible(true);
+								},
+								onEndpointTagsChange: (id, val) => {
+									setEndpointTags((prev) => ({
+										...prev,
+										[id]: val
+									}));
+									setBannerVisible(true);
+								},
+								endpointParams,
+								onAddParameter: (endpointId, param) => {
+									setEndpointParams((prev) => ({
+										...prev,
+										[endpointId]: [...prev[endpointId] ?? [], param]
+									}));
+									setBannerVisible(true);
+								},
+								onEditParameter: (endpointId, idx, param) => {
+									setEndpointParams((prev) => ({
+										...prev,
+										[endpointId]: prev[endpointId]?.map((p, i) => i === idx ? param : p) ?? []
+									}));
+									setBannerVisible(true);
+								},
+								onDeleteParameter: (endpointId, idx) => {
+									setEndpointParams((prev) => ({
+										...prev,
+										[endpointId]: prev[endpointId]?.filter((_, i) => i !== idx) ?? []
+									}));
+									setBannerVisible(true);
+								},
+								endpointResponseParams,
+								onAddResponseParameter: (endpointId, param) => {
+									setEndpointResponseParams((prev) => ({
+										...prev,
+										[endpointId]: [...prev[endpointId] ?? [], param]
+									}));
+									setBannerVisible(true);
+								},
+								onEditResponseParameter: (endpointId, idx, param) => {
+									setEndpointResponseParams((prev) => ({
+										...prev,
+										[endpointId]: prev[endpointId]?.map((p, i) => i === idx ? param : p) ?? []
+									}));
+									setBannerVisible(true);
+								},
+								onDeleteResponseParameter: (endpointId, idx) => {
+									setEndpointResponseParams((prev) => ({
+										...prev,
+										[endpointId]: prev[endpointId]?.filter((_, i) => i !== idx) ?? []
+									}));
+									setBannerVisible(true);
+								}
+							}, resetKey)
 						})
-					})
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: cx("section"),
-					children: /* @__PURE__ */ jsx(EndpointsSection, {
-						mode,
-						endpointsByTag: getEndpointsByTag(),
-						collapsed: endpointsCollapsed,
-						onToggleCollapse: () => setEndpointsCollapsed((c) => !c),
-						endpointNames,
-						endpointDescs,
-						endpointTags,
-						availableTags: localTags.map((t) => t.name),
-						onEndpointNameChange: (id, val) => {
-							setEndpointNames((prev) => ({
-								...prev,
-								[id]: val
-							}));
-							setHasChanges(true);
-							setBannerVisible(true);
-						},
-						onEndpointDescChange: (id, val) => {
-							setEndpointDescs((prev) => ({
-								...prev,
-								[id]: val
-							}));
-							setHasChanges(true);
-							setBannerVisible(true);
-						},
-						onEndpointTagsChange: (id, val) => {
-							setEndpointTags((prev) => ({
-								...prev,
-								[id]: val
-							}));
-							setHasChanges(true);
-							setBannerVisible(true);
-						},
-						endpointParams,
-						onAddParameter: (endpointId, param) => {
-							setEndpointParams((prev) => ({
-								...prev,
-								[endpointId]: [...prev[endpointId] ?? [], param]
-							}));
-							setHasChanges(true);
-							setBannerVisible(true);
-						},
-						onEditParameter: (endpointId, idx, param) => {
-							setEndpointParams((prev) => ({
-								...prev,
-								[endpointId]: prev[endpointId]?.map((p, i) => i === idx ? param : p) ?? []
-							}));
-							setHasChanges(true);
-							setBannerVisible(true);
-						},
-						onDeleteParameter: (endpointId, idx) => {
-							setEndpointParams((prev) => ({
-								...prev,
-								[endpointId]: prev[endpointId]?.filter((_, i) => i !== idx) ?? []
-							}));
-							setHasChanges(true);
-							setBannerVisible(true);
-						},
-						endpointResponseParams,
-						onAddResponseParameter: (endpointId, param) => {
-							setEndpointResponseParams((prev) => ({
-								...prev,
-								[endpointId]: [...prev[endpointId] ?? [], param]
-							}));
-							setHasChanges(true);
-							setBannerVisible(true);
-						},
-						onEditResponseParameter: (endpointId, idx, param) => {
-							setEndpointResponseParams((prev) => ({
-								...prev,
-								[endpointId]: prev[endpointId]?.map((p, i) => i === idx ? param : p) ?? []
-							}));
-							setHasChanges(true);
-							setBannerVisible(true);
-						},
-						onDeleteResponseParameter: (endpointId, idx) => {
-							setEndpointResponseParams((prev) => ({
-								...prev,
-								[endpointId]: prev[endpointId]?.filter((_, i) => i !== idx) ?? []
-							}));
-							setHasChanges(true);
-							setBannerVisible(true);
-						}
-					}, resetKey)
-				})
-			] }) : /* @__PURE__ */ jsxs("div", {
+					] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+						selectedEditItem.type === "errors" && errorBox && /* @__PURE__ */ jsx("div", {
+							className: cx("section"),
+							children: errorBox
+						}),
+						selectedEditItem.type !== "errors" && /* @__PURE__ */ jsx(Fragment, { children: errorBoxExpanded && errorBox ? /* @__PURE__ */ jsx("div", {
+							className: cx("section"),
+							children: errorBox
+						}) : errorBoxCollapsed && /* @__PURE__ */ jsx("div", {
+							className: cx("section"),
+							children: errorBoxCollapsed
+						}) }),
+						selectedEditItem.type === "general" && /* @__PURE__ */ jsx("div", {
+							className: cx("section"),
+							children: /* @__PURE__ */ jsx(GeneralSection, {
+								apiName: localApiName,
+								authType: selectedApi?.authType || "",
+								version: selectedApi?.relatedVersions?.find((v) => v.apiId === selectedApi?.currentVersion)?.version || "",
+								description: localDescription,
+								onApiNameChange: (val) => {
+									setApiNameTouched(true);
+									setLocalApiName(val);
+								},
+								apiNameError: hasApiNameError,
+								onDescriptionChange: (val) => {
+									setDescriptionTouched(true);
+									setLocalDescription(val);
+								},
+								descriptionError: hasDescriptionError,
+								collapsed: generalCollapsed,
+								onToggleCollapse: () => setGeneralCollapsed((c) => !c),
+								onChangeDetected: () => {
+									setBannerVisible(true);
+								}
+							})
+						}),
+						selectedEditItem.type === "tags" && /* @__PURE__ */ jsx("div", {
+							className: cx("section"),
+							children: /* @__PURE__ */ jsx(TagsSection, {
+								tags: localTags,
+								collapsed: tagsCollapsed,
+								onToggleCollapse: () => setTagsCollapsed((prev) => !prev),
+								onAddTag: () => setTagDrawerState({
+									open: true,
+									mode: "add"
+								}),
+								onEditTag: (tag) => setTagDrawerState({
+									open: true,
+									mode: "edit",
+									initialValues: {
+										name: tag.name,
+										description: tag.description,
+										externalDocsDescription: tag.externalDocsDescription,
+										externalDocsLink: tag.externalDocsUrl
+									}
+								}),
+								onDeleteTag: (tagName) => setDeleteTagModal({
+									open: true,
+									tagName
+								})
+							})
+						}),
+						selectedEditItem.type === "endpoint" && /* @__PURE__ */ jsx(EndpointsSection, {
+							mode,
+							endpointsByTag: getEndpointsByTag(),
+							selectedEndpointKey: selectedEditItem.key,
+							collapsed: endpointsCollapsed,
+							onToggleCollapse: () => setEndpointsCollapsed((c) => !c),
+							endpointNames,
+							endpointDescs,
+							endpointTags,
+							availableTags: localTags.map((t) => t.name),
+							onEndpointNameChange: (id, val) => {
+								setEndpointNames((prev) => ({
+									...prev,
+									[id]: val
+								}));
+								setBannerVisible(true);
+							},
+							onEndpointDescChange: (id, val) => {
+								setEndpointDescs((prev) => ({
+									...prev,
+									[id]: val
+								}));
+								setBannerVisible(true);
+							},
+							onEndpointTagsChange: (id, val) => {
+								setEndpointTags((prev) => ({
+									...prev,
+									[id]: val
+								}));
+								setBannerVisible(true);
+							},
+							endpointParams,
+							onAddParameter: (endpointId, param) => {
+								setEndpointParams((prev) => ({
+									...prev,
+									[endpointId]: [...prev[endpointId] ?? [], param]
+								}));
+								setBannerVisible(true);
+							},
+							onEditParameter: (endpointId, idx, param) => {
+								setEndpointParams((prev) => ({
+									...prev,
+									[endpointId]: prev[endpointId]?.map((p, i) => i === idx ? param : p) ?? []
+								}));
+								setBannerVisible(true);
+							},
+							onDeleteParameter: (endpointId, idx) => {
+								setEndpointParams((prev) => ({
+									...prev,
+									[endpointId]: prev[endpointId]?.filter((_, i) => i !== idx) ?? []
+								}));
+								setBannerVisible(true);
+							},
+							endpointResponseParams,
+							onAddResponseParameter: (endpointId, param) => {
+								setEndpointResponseParams((prev) => ({
+									...prev,
+									[endpointId]: [...prev[endpointId] ?? [], param]
+								}));
+								setBannerVisible(true);
+							},
+							onEditResponseParameter: (endpointId, idx, param) => {
+								setEndpointResponseParams((prev) => ({
+									...prev,
+									[endpointId]: prev[endpointId]?.map((p, i) => i === idx ? param : p) ?? []
+								}));
+								setBannerVisible(true);
+							},
+							onDeleteResponseParameter: (endpointId, idx) => {
+								setEndpointResponseParams((prev) => ({
+									...prev,
+									[endpointId]: prev[endpointId]?.filter((_, i) => i !== idx) ?? []
+								}));
+								setBannerVisible(true);
+							}
+						}, resetKey)
+					] })
+				})]
+			}) : /* @__PURE__ */ jsxs("div", {
 				className: cx("docs-layout"),
-				children: [
-					/* @__PURE__ */ jsx(Sidebar, {
-						searchValue,
-						setSearchValue
-					}),
-					/* @__PURE__ */ jsx(MainContent, {
+				children: [/* @__PURE__ */ jsx(Sidebar, {
+					searchValue,
+					setSearchValue
+				}), /* @__PURE__ */ jsxs("div", {
+					className: cx("content-scroll-area"),
+					children: [/* @__PURE__ */ jsx(MainContent, {
 						handleVisitLandingPage: _handleVisitLandingPage,
 						handleResetSearch,
 						searchEnabled: !!searchValue
-					}),
-					!isMobile && focusedContent === "ENDPOINT" && /* @__PURE__ */ jsx(CodeboxSidebar$1, {})
-				]
+					}), !isMobile && focusedContent === "ENDPOINT" && /* @__PURE__ */ jsx(CodeboxSidebar$1, {})]
+				})]
 			}),
 			/* @__PURE__ */ jsx(AddTagDrawer, {
 				open: tagDrawerState.open,
@@ -7805,6 +9796,144 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 				onAddTag: handleAddTag,
 				onEditTag: handleUpdateTag
 			}),
+			/* @__PURE__ */ jsxs(Modal, {
+				open: saveConfirmModal,
+				onCancel: () => setSaveConfirmModal(false),
+				centered: true,
+				title: null,
+				footer: null,
+				closable: false,
+				width: 520,
+				className: "delete-tag-confirm-modal",
+				styles: {
+					content: {
+						padding: 0,
+						borderRadius: 8,
+						overflow: "hidden"
+					},
+					body: {
+						padding: 0,
+						margin: 0
+					}
+				},
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: cx("deleteModalHead"),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: cx("deleteModalTitle"),
+							children: "Save & Publish Changes"
+						}), /* @__PURE__ */ jsx("button", {
+							className: cx("deleteModalCloseBtn"),
+							onClick: () => setSaveConfirmModal(false),
+							"aria-label": "Close",
+							children: "×"
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: cx("deleteModalContent"),
+						children: /* @__PURE__ */ jsx("span", {
+							className: cx("deleteModalContentText"),
+							children: "Are you sure you want to Save & Publish Changes?"
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: cx("deleteModalFooter"),
+						children: [/* @__PURE__ */ jsx(Button, {
+							size: "middle",
+							onClick: () => setSaveConfirmModal(false),
+							style: {
+								borderRadius: 8,
+								height: 32,
+								paddingInline: 15
+							},
+							children: "Cancel"
+						}), /* @__PURE__ */ jsx(Button, {
+							type: "primary",
+							size: "middle",
+							onClick: () => {
+								setSaveConfirmModal(false);
+								handleSave();
+							},
+							style: {
+								borderRadius: 8,
+								height: 32,
+								paddingInline: 16
+							},
+							children: "Yes, Save & Publish"
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(Modal, {
+				open: resetConfirmModal,
+				onCancel: () => setResetConfirmModal(false),
+				centered: true,
+				title: null,
+				footer: null,
+				closable: false,
+				width: 520,
+				className: "delete-tag-confirm-modal",
+				styles: {
+					content: {
+						padding: 0,
+						borderRadius: 8,
+						overflow: "hidden"
+					},
+					body: {
+						padding: 0,
+						margin: 0
+					}
+				},
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: cx("deleteModalHead"),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: cx("deleteModalTitle"),
+							children: "Reset changes?"
+						}), /* @__PURE__ */ jsx("button", {
+							className: cx("deleteModalCloseBtn"),
+							onClick: () => setResetConfirmModal(false),
+							"aria-label": "Close",
+							children: "×"
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: cx("deleteModalContent"),
+						children: /* @__PURE__ */ jsx("span", {
+							className: cx("deleteModalContentText"),
+							children: "This will discard your unsaved changes."
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: cx("deleteModalFooter"),
+						children: [/* @__PURE__ */ jsx(Button, {
+							size: "middle",
+							onClick: () => setResetConfirmModal(false),
+							style: {
+								borderRadius: 8,
+								height: 32,
+								paddingInline: 15
+							},
+							children: "Cancel"
+						}), /* @__PURE__ */ jsx(Button, {
+							size: "middle",
+							onClick: () => {
+								setResetConfirmModal(false);
+								handleReset();
+							},
+							style: {
+								borderRadius: 8,
+								height: 32,
+								paddingInline: 16,
+								backgroundColor: "#faad14",
+								borderColor: "#faad14",
+								color: "#fff"
+							},
+							children: "Yes, Reset"
+						})]
+					})
+				]
+			}),
 			/* @__PURE__ */ jsxs(Modal, {
 				open: deleteTagModal.open,
 				onCancel: () => setDeleteTagModal({