@digi-frontend/dgate-api-documentation 4.1.3 → 4.1.6

package/dist/index.cjs

@@ -104,8 +104,10 @@ const useStore = (0, zustand.create)()((0, zustand_middleware.devtools)((0, zust
 //#region src/hooks/useStyle.ts
 function useStyle(componentName, stylesFn) {
 	const { token, theme, hashId } = antd.theme.useToken();
-	const scope = (className) => `.${hashId}.${componentName}-${className}`;
-	const cx = (...classes) => classes.map((cls) => `${componentName}-${cls} ${hashId}`).join(" ");
+	const tokenKey = token._tokenKey;
+	const themeId = tokenKey ? `tk-${tokenKey.slice(-6)}` : "tk-default";
+	const scope = (className) => `.${hashId}.${themeId}.${componentName}-${className}`;
+	const cx = (...classes) => classes.map((cls) => `${componentName}-${cls} ${hashId} ${themeId}`).join(" ");
 	return {
 		wrapSSR: (0, _ant_design_cssinjs.useStyleRegister)({
 			theme,
@@ -1260,7 +1262,7 @@ const ApiCard = ({ api, viewStyle }) => {
 			border: `1px solid ${token.colorBorderSecondary}`,
 			minWidth: "6.25rem",
 			maxWidth: "fit-content",
-			svg: { path: { fill: token.colorPrimary } }
+			svg: { path: { fill: "#4D75D9" } }
 		},
 		[scope("list-title")]: {
 			color: token.colorTextHeading,
@@ -1308,7 +1310,7 @@ const ApiCard = ({ api, viewStyle }) => {
 			flexDirection: "row",
 			borderRadius: token.borderRadiusSM,
 			border: `1px solid ${token.colorBorderSecondary}`,
-			svg: { path: { fill: token.colorPrimary } }
+			svg: { path: { fill: "#4D75D9" } }
 		},
 		[scope("grid-path-name")]: {
 			color: token.colorText,
@@ -2153,7 +2155,7 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
 		},
 		[scope("mobileWrapper")]: {
 			flexDirection: "column",
-			gap: token.marginMD
+			gap: 16
 		},
 		[scope("mobileTopRow")]: {
 			width: "100%",
@@ -2228,14 +2230,14 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
 		[scope("actions")]: {
 			display: "flex",
 			alignItems: "center",
-			gap: token.marginMD,
+			gap: 16,
 			flex: 1,
 			justifyContent: "flex-end"
 		},
 		[scope("mobileActions")]: {
 			display: "flex",
 			alignItems: "center",
-			gap: token.marginSM,
+			gap: 16,
 			justifyContent: "flex-end"
 		}
 	}));
@@ -2632,42 +2634,6 @@ const EditTag = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 	]
 });
 //#endregion
-//#region src/assets/info-circle.tsx
-const InfoCircle = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-	width: "24",
-	height: "24",
-	viewBox: "0 0 24 24",
-	fill: "none",
-	xmlns: "http://www.w3.org/2000/svg",
-	...props,
-	children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-			d: "M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z",
-			stroke: "black",
-			strokeOpacity: "0.45",
-			strokeWidth: "1.5",
-			strokeLinecap: "round",
-			strokeLinejoin: "round"
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-			d: "M12 8V13",
-			stroke: "black",
-			strokeOpacity: "0.45",
-			strokeWidth: "1.5",
-			strokeLinecap: "round",
-			strokeLinejoin: "round"
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-			d: "M11.9946 16H12.0036",
-			stroke: "black",
-			strokeOpacity: "0.45",
-			strokeWidth: "1.5",
-			strokeLinecap: "round",
-			strokeLinejoin: "round"
-		})
-	]
-});
-//#endregion
 //#region src/hooks/useDebounce.ts
 function useDebounce(value, delay = 500) {
 	const [debouncedValue, setDebouncedValue] = (0, react.useState)(value);
@@ -2685,42 +2651,42 @@ function useDebounce(value, delay = 500) {
 //#region src/view/components/ApiPage/components/AddParameterDrawer.tsx
 const PARAM_IN_OPTIONS = [
 	{
-		label: "query",
+		label: "QUERY",
 		value: "query"
 	},
 	{
-		label: "header",
+		label: "HEADER",
 		value: "header"
 	},
 	{
-		label: "path",
+		label: "PATH",
 		value: "path"
 	}
 ];
 const RESPONSE_PARAM_IN_OPTIONS = PARAM_IN_OPTIONS.filter((o) => o.value === "header");
 const PARAM_TYPE_OPTIONS = [
 	{
-		label: "string",
+		label: "STRING",
 		value: "string"
 	},
 	{
-		label: "number",
+		label: "NUMBER",
 		value: "number"
 	},
 	{
-		label: "integer",
+		label: "INTEGER",
 		value: "integer"
 	},
 	{
-		label: "boolean",
+		label: "BOOLEAN",
 		value: "boolean"
 	},
 	{
-		label: "array",
+		label: "ARRAY",
 		value: "array"
 	},
 	{
-		label: "object",
+		label: "OBJECT",
 		value: "object"
 	}
 ];
@@ -3248,14 +3214,9 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: cx("modalHead"),
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: cx("modalTitle"),
-						children: [
-							mode === "edit" ? "Edit" : "Add",
-							" Parameter to ",
-							endpointName,
-							" endpoint"
-						]
+						children: mode === "edit" ? `Edit ${paramName} parameter` : `Add Parameter to ${endpointName} endpoint`
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						className: cx("modalCloseBtn"),
 						onClick: () => setConfirmModalOpen(false),
@@ -3272,10 +3233,9 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
 							mode === "edit" ? "edit" : "add",
 							" ",
 							paramName,
-							" parameter to",
-							" ",
-							endpointName,
-							" endpoint?"
+							" parameter",
+							mode === "add" ? ` to ${endpointName} endpoint` : "",
+							"?"
 						]
 					})
 				}),
@@ -3333,7 +3293,7 @@ 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, onRequestContentChange, onResponseContentChange, requestBodySchemas, responseBodySchemas, mode = "edit", selectedEndpointKey }) => {
+const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse, endpointNames, endpointDescs, endpointTags, availableTags, onEndpointNameChange, onEndpointDescChange, onEndpointTagsChange, endpointParams, onAddParameter, onEditParameter, onDeleteParameter, endpointResponseParams, onAddResponseParameter, onEditResponseParameter, onDeleteResponseParameter, onRequestContentChange, onResponseContentChange, resetKey, requestBodySchemas, responseBodySchemas, mode = "edit", selectedEndpointKey }) => {
 	const [expandedId, setExpandedId] = (0, react$1.useState)(null);
 	const [activeTab, setActiveTab] = (0, react$1.useState)("general");
 	(0, react$1.useEffect)(() => {
@@ -3385,6 +3345,30 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 	const debouncedResponseSearches = useDebounce(responseSearches);
 	const [editableRequestContent, setEditableRequestContent] = (0, react$1.useState)({});
 	const [editableResponseContent, setEditableResponseContent] = (0, react$1.useState)({});
+	(0, react$1.useEffect)(() => {
+		openRequestPanels.forEach((epId) => {
+			const val = requestBodySchemas?.[epId];
+			const json = val ? JSON.stringify(val, null, 2) : "";
+			setEditableRequestContent((prev) => ({
+				...prev,
+				[epId]: json
+			}));
+		});
+		openResponsePanels.forEach((epId) => {
+			const val = responseBodySchemas?.[epId];
+			const json = val ? JSON.stringify(val, null, 2) : "";
+			setEditableResponseContent((prev) => ({
+				...prev,
+				[epId]: json
+			}));
+		});
+	}, [
+		resetKey,
+		openRequestPanels,
+		openResponsePanels,
+		requestBodySchemas,
+		responseBodySchemas
+	]);
 	(0, react$1.useEffect)(() => {
 		if (!openRequestPanels.size) return;
 		openRequestPanels.forEach((epId) => {
@@ -3450,10 +3434,29 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			flexDirection: "column",
 			width: "100%",
 			flexShrink: 0,
+			flex: 1,
+			minHeight: 0,
+			"& .ant-tabs": {
+				height: "100%",
+				display: "flex",
+				flexDirection: "column"
+			},
 			"& .ant-tabs-content-holder": {
+				flex: 1,
+				display: "flex",
+				flexDirection: "column",
 				background: token.colorBgElevated,
 				borderRadius: token.borderRadiusLG,
 				padding: `${token.paddingLG}px ${token.paddingLG}px 48px`
+			},
+			"& .ant-tabs-content": {
+				flex: 1,
+				minHeight: 0
+			},
+			"& .ant-tabs-tabpane-active": {
+				height: "100%",
+				display: "flex",
+				flexDirection: "column"
 			}
 		},
 		[scope("head")]: {
@@ -3556,7 +3559,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "space-between",
-			paddingBottom: token.marginXXS,
+			paddingBottom: "18.5px",
 			borderBottom: `1px solid ${token.colorBorder}`,
 			width: "100%"
 		},
@@ -3631,7 +3634,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			alignItems: "center",
 			justifyContent: "space-between",
 			width: "100%",
-			padding: `12px 24px`,
+			padding: `12px 0px`,
 			borderBottom: `1px solid ${token.colorBorderSecondary}`,
 			background: token.colorBgContainer,
 			"&:last-child": { borderBottom: "none" }
@@ -3664,6 +3667,13 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			whiteSpace: "nowrap",
 			maxWidth: 160
 		},
+		[scope("param-detail-value-name")]: {
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap",
+			maxWidth: 200,
+			display: "block"
+		},
 		[scope("param-enum-container")]: {
 			display: "inline-flex",
 			flexDirection: "row",
@@ -3802,7 +3812,6 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			alignItems: "center",
 			position: "relative",
 			paddingTop: 20,
-			paddingBottom: 8,
 			paddingLeft: 24,
 			paddingRight: 24,
 			width: "100%"
@@ -3828,7 +3837,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			border: "none",
 			background: "transparent",
 			padding: 0,
-			color: token.colorTextSecondary,
+			color: token.colorTextTertiary,
 			fontSize: 16,
 			lineHeight: 1,
 			"&:hover": {
@@ -3841,7 +3850,6 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			alignItems: "center",
 			paddingLeft: 24,
 			paddingRight: 24,
-			paddingBottom: 12,
 			height: 56,
 			width: "100%"
 		},
@@ -3968,6 +3976,8 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			alignItems: "center",
 			justifyContent: "center",
 			width: "100%",
+			flex: 1,
+			minHeight: 0,
 			"& .ant-empty": {
 				margin: 0,
 				display: "flex",
@@ -4063,9 +4073,21 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			title: "Parameter",
 			key: "parameter",
 			render: (_, row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: cx("view-param-name"),
-					children: row.name
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
+					title: row.name,
+					placement: "bottom",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: cx("view-param-name"),
+						style: {
+							display: "inline-block",
+							maxWidth: 200,
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							whiteSpace: "nowrap",
+							verticalAlign: "bottom"
+						},
+						children: row.name
+					})
 				}),
 				row.type && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: cx("view-param-type"),
@@ -4083,9 +4105,21 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 		{
 			title: "Description",
 			key: "description",
-			render: (_, row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: cx("view-param-desc"),
-				children: row.description || "--"
+			render: (_, row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
+				title: row.description || "--",
+				placement: "bottom",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: cx("view-param-desc"),
+					style: {
+						display: "inline-block",
+						maxWidth: 200,
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+						whiteSpace: "nowrap",
+						verticalAlign: "bottom"
+					},
+					children: row.description || "--"
+				})
 			})
 		},
 		{
@@ -4264,6 +4298,10 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 											ghost: true,
 											type: "primary",
 											icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.PlusOutlined, {}),
+											style: {
+												height: 32,
+												paddingInline: 8
+											},
 											onClick: () => {
 												setDrawerSource("request");
 												setParamDrawerMode("add");
@@ -4300,6 +4338,10 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 											ghost: true,
 											type: "primary",
 											icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.PlusOutlined, {}),
+											style: {
+												height: 32,
+												paddingInline: 8
+											},
 											onClick: () => {
 												setDrawerSource("request");
 												setParamDrawerMode("add");
@@ -4381,9 +4423,13 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 															children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 																className: cx("param-detail-label"),
 																children: "Parameter Name"
-															}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-																className: cx("param-detail-value"),
-																children: param.name
+															}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
+																title: param.name,
+																placement: "bottom",
+																children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																	className: cx("param-detail-value", "param-detail-value-name"),
+																	children: param.name
+																})
 															})]
 														}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 															className: cx("param-detail-cell"),
@@ -4459,9 +4505,13 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 																children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 																	className: cx("param-detail-label"),
 																	children: "Parameter Name"
-																}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-																	className: cx("param-detail-value"),
-																	children: param.name
+																}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
+																	title: param.name,
+																	placement: "bottom",
+																	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																		className: cx("param-detail-value", "param-detail-value-name"),
+																		children: param.name
+																	})
 																})]
 															}),
 															/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -4500,7 +4550,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 																				margin: 0,
 																				paddingLeft: 16
 																			},
-																			children: param.enum.map((e) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: e }, e))
+																			children: param.enum.slice(1).map((e) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: e }, e))
 																		}),
 																		placement: "bottom",
 																		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
@@ -4528,9 +4578,13 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 																children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 																	className: cx("param-detail-label"),
 																	children: "Description"
-																}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-																	className: cx("param-detail-value", "param-detail-value--ellipsis"),
-																	children: param.description || "—"
+																}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
+																	title: param.description || "—",
+																	placement: "bottom",
+																	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																		className: cx("param-detail-value", "param-detail-value--ellipsis"),
+																		children: param.description || "—"
+																	})
 																})]
 															})
 														]
@@ -4683,6 +4737,10 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 											ghost: true,
 											type: "primary",
 											icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.PlusOutlined, {}),
+											style: {
+												height: 32,
+												paddingInline: 8
+											},
 											onClick: () => {
 												setDrawerSource("response");
 												setParamDrawerMode("add");
@@ -4773,6 +4831,10 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 											ghost: true,
 											type: "primary",
 											icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.PlusOutlined, {}),
+											style: {
+												height: 32,
+												paddingInline: 8
+											},
 											onClick: () => {
 												setDrawerSource("response");
 												setParamDrawerMode("add");
@@ -4932,9 +4994,13 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 																children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 																	className: cx("param-detail-label"),
 																	children: "Parameter Name"
-																}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-																	className: cx("param-detail-value"),
-																	children: param.name
+																}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
+																	title: param.name,
+																	placement: "bottom",
+																	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																		className: cx("param-detail-value", "param-detail-value-name"),
+																		children: param.name
+																	})
 																})]
 															}),
 															/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -4973,7 +5039,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 																				margin: 0,
 																				paddingLeft: 16
 																			},
-																			children: param.enum.map((e) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: e }, e))
+																			children: param.enum.slice(1).map((e) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: e }, e))
 																		}),
 																		placement: "bottom",
 																		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
@@ -5001,9 +5067,13 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 																children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 																	className: cx("param-detail-label"),
 																	children: "Description"
-																}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-																	className: cx("param-detail-value", "param-detail-value--ellipsis"),
-																	children: param.description || "—"
+																}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
+																	title: param.description || "—",
+																	placement: "bottom",
+																	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																		className: cx("param-detail-value", "param-detail-value--ellipsis"),
+																		children: param.description || "—"
+																	})
 																})]
 															})
 														]
@@ -5066,20 +5136,13 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 										className: cx("param-row", openResponsePanels.has(ep.id) ? "param-row--open" : ""),
 										style: { marginTop: token.margin },
 										onClick: () => toggleResponsePanel(ep.id),
-										children: [
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.DownOutlined, { className: cx("param-row-icon", openResponsePanels.has(ep.id) ? "param-row-icon--open" : "") }),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-												style: { fontSize: token.fontSize },
-												children: ["Response ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-													style: { color: token.colorError },
-													children: "*"
-												})]
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)(InfoCircle, { style: {
-												width: 24,
-												height: 24
-											} })
-										]
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.DownOutlined, { className: cx("param-row-icon", openResponsePanels.has(ep.id) ? "param-row-icon--open" : "") }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+											style: { fontSize: token.fontSize },
+											children: ["Response ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												style: { color: token.colorError },
+												children: "*"
+											})]
+										})]
 									}),
 									openResponsePanels.has(ep.id) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 										className: cx("code-panel"),
@@ -5530,6 +5593,10 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 												ghost: true,
 												type: "primary",
 												icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.PlusOutlined, {}),
+												style: {
+													height: 32,
+													paddingInline: 8
+												},
 												onClick: () => {
 													setDrawerSource("request");
 													setParamDrawerMode("add");
@@ -5566,6 +5633,10 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 												ghost: true,
 												type: "primary",
 												icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.PlusOutlined, {}),
+												style: {
+													height: 32,
+													paddingInline: 8
+												},
 												onClick: () => {
 													setDrawerSource("request");
 													setParamDrawerMode("add");
@@ -5947,6 +6018,10 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 												ghost: true,
 												type: "primary",
 												icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.PlusOutlined, {}),
+												style: {
+													height: 32,
+													paddingInline: 8
+												},
 												onClick: () => {
 													setDrawerSource("response");
 													setParamDrawerMode("add");
@@ -6037,6 +6112,10 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 												ghost: true,
 												type: "primary",
 												icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.PlusOutlined, {}),
+												style: {
+													height: 32,
+													paddingInline: 8
+												},
 												onClick: () => {
 													setDrawerSource("response");
 													setParamDrawerMode("add");
@@ -6330,20 +6409,13 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 											className: cx("param-row", openResponsePanels.has(ep.id) ? "param-row--open" : ""),
 											style: { marginTop: token.margin },
 											onClick: () => toggleResponsePanel(ep.id),
-											children: [
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.DownOutlined, { className: cx("param-row-icon", openResponsePanels.has(ep.id) ? "param-row-icon--open" : "") }),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-													style: { fontSize: token.fontSize },
-													children: ["Response ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-														style: { color: token.colorError },
-														children: "*"
-													})]
-												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)(InfoCircle, { style: {
-													width: 24,
-													height: 24
-												} })
-											]
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.DownOutlined, { className: cx("param-row-icon", openResponsePanels.has(ep.id) ? "param-row-icon--open" : "") }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+												style: { fontSize: token.fontSize },
+												children: ["Response ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													style: { color: token.colorError },
+													children: "*"
+												})]
+											})]
 										}),
 										openResponsePanels.has(ep.id) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 											className: cx("code-panel"),
@@ -7546,7 +7618,8 @@ const EditModeSidebar = ({ selectedItem, onSelectItem, endpoints, hasGeneralErro
 		[scope("badge")]: {
 			minWidth: "3.75rem",
 			textAlign: "center",
-			border: "none"
+			border: "none",
+			fontSize: 14
 		},
 		[scope("path")]: {
 			fontSize: token.fontSize,
@@ -8225,37 +8298,28 @@ const buildRequestData = (params, token) => [...params].sort((a, b) => a.require
 	if (p.schema?.type === "array" && p.schema?.items?.type) typeLabel = `${p.schema.type}_${p.schema.items.type}`;
 	return {
 		key: index,
-		param: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
-			p.name,
-			typeLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				style: {
-					color: token.colorTextTertiary,
-					marginLeft: "0.25rem",
-					marginRight: "0.25rem"
-				},
-				children: typeLabel
-			}),
-			p.required ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				style: { color: token.colorError },
-				children: "*"
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				style: { color: token.colorSuccess },
-				children: "Optional"
-			})
-		] }),
-		desc: p.description || "--",
-		enum: p.schema?.enum ? renderEnumTags(p.schema.enum, token) : "--"
-	};
-});
-const buildHeaderData = (headers, token) => {
-	if (!headers) return [];
-	return Object.entries(headers).sort(([, a], [, b]) => a.required === b.required ? 0 : a.required ? -1 : 1).map(([name, header], idx) => {
-		let typeLabel = header.schema?.type;
-		if (header.schema?.type === "array" && header.schema?.items?.type) typeLabel = `${header.schema.type}_${header.schema.items.type}`;
-		return {
-			key: idx,
-			param: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
-				name,
+		param: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 4
+			},
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
+					title: p.name,
+					placement: "bottom",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: {
+							display: "inline-block",
+							maxWidth: 200,
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							whiteSpace: "nowrap",
+							verticalAlign: "bottom"
+						},
+						children: p.name
+					})
+				}),
 				typeLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					style: {
 						color: token.colorTextTertiary,
@@ -8264,50 +8328,84 @@ const buildHeaderData = (headers, token) => {
 					},
 					children: typeLabel
 				}),
-				header.required ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				p.required ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					style: { color: token.colorError },
 					children: "*"
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					style: { color: token.colorSuccess },
 					children: "Optional"
 				})
-			] }, idx),
+			]
+		}),
+		desc: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
+			title: p.description || "--",
+			placement: "bottom",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: {
+					display: "inline-block",
+					maxWidth: 300,
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap",
+					verticalAlign: "bottom"
+				},
+				children: p.description || "--"
+			})
+		}),
+		enum: p.schema?.enum ? renderEnumTags(p.schema.enum, token) : "--"
+	};
+});
+const buildHeaderData = (headers, token) => {
+	if (!headers) return [];
+	return Object.entries(headers).sort(([, a], [, b]) => a.required === b.required ? 0 : a.required ? -1 : 1).map(([name, header], idx) => {
+		let typeLabel = header.schema?.type;
+		if (header.schema?.type === "array" && header.schema?.items?.type) typeLabel = `${header.schema.type}_${header.schema.items.type}`;
+		return {
+			key: idx,
+			param: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 4
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
+						title: name,
+						placement: "bottom",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: {
+								display: "inline-block",
+								maxWidth: 200,
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								whiteSpace: "nowrap",
+								verticalAlign: "bottom"
+							},
+							children: name
+						})
+					}),
+					typeLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: {
+							color: token.colorTextTertiary,
+							marginLeft: "0.25rem",
+							marginRight: "0.25rem"
+						},
+						children: typeLabel
+					}),
+					header.required ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: { color: token.colorError },
+						children: "*"
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: { color: token.colorSuccess },
+						children: "Optional"
+					})
+				]
+			}, idx),
 			desc: header.description || "--",
 			enum: header.schema?.enum ? renderEnumTags(header.schema.enum, token) : "--"
 		};
 	});
 };
-const buildRequestBodyData = (requestBody, token) => {
-	if (!requestBody?.content) return [];
-	const contentType = Object.keys(requestBody.content)[0];
-	const schema = requestBody.content[contentType]?.schema;
-	if (!schema) return [];
-	const properties = schema.properties ?? {};
-	const required = schema.required ?? [];
-	return Object.entries(properties).map(([name, prop], idx) => ({
-		key: idx,
-		param: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
-			name,
-			prop.type && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				style: {
-					color: token.colorTextTertiary,
-					marginLeft: "0.25rem",
-					marginRight: "0.25rem"
-				},
-				children: prop.type
-			}),
-			required.includes(name) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				style: { color: token.colorError },
-				children: "*"
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				style: { color: token.colorSuccess },
-				children: "Optional"
-			})
-		] }),
-		desc: prop.description || "--",
-		enum: prop.enum ? renderEnumTags(prop.enum, token) : "--"
-	}));
-};
 const EndpointPage = () => {
 	const { selectedEndpoint, selectedApi, selectedStatusCode, setSelectedNodeKey, setFocusedContent, setFocusedTag, setActiveRequestTab } = useStore(({ view }) => view);
 	const [activeTabKey, setActiveTabKey] = (0, react$1.useState)("header");
@@ -8356,7 +8454,6 @@ const EndpointPage = () => {
 	const headerParams = buildRequestData(selectedEndpoint?.parameters?.filter((p) => p.in === "header") || [], token);
 	const pathParams = buildRequestData(selectedEndpoint?.parameters?.filter((p) => p.in === "path") || [], token);
 	const queryParams = buildRequestData(selectedEndpoint?.parameters?.filter((p) => p.in === "query") || [], token);
-	const requestBodyData = buildRequestBodyData(selectedEndpoint?.requestBody, token);
 	const requestTabs = [
 		{
 			key: "header",
@@ -8393,19 +8490,7 @@ const EndpointPage = () => {
 				size: "small",
 				rowClassName: (_, idx) => cx(idx % 2 === 0 ? "row-even" : "row-odd")
 			})
-		},
-		...requestBodyData.length > 0 ? [{
-			key: "requestBody",
-			label: "Request Body",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Table, {
-				columns: requestColumns,
-				dataSource: requestBodyData,
-				pagination: false,
-				bordered: true,
-				size: "small",
-				rowClassName: (_, idx) => cx(idx % 2 === 0 ? "row-even" : "row-odd")
-			})
-		}] : []
+		}
 	].filter((t) => t !== null);
 	(0, react$1.useEffect)(() => {
 		const firstKey = requestTabs[0]?.key ?? "header";
@@ -9110,9 +9195,10 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 			gap: token.marginLG,
 			height: "100%"
 		},
-		[scope("section")]: {
-			flexShrink: 0,
-			height: "auto"
+		[scope("section")]: { flexShrink: 0 },
+		[scope("section-grow")]: {
+			flex: 1,
+			minHeight: 0
 		},
 		[scope("docs-layout")]: {
 			display: "flex",
@@ -9295,7 +9381,7 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 		const result = {};
 		Object.entries(rawFile.paths).forEach(([path, methods]) => {
 			Object.entries(methods).forEach(([method, operation]) => {
-				const schema = operation.requestBody?.content?.["application/json"]?.schema;
+				const schema = operation.requestBody?.content?.["application/json"]?.example;
 				const epId = pathMethodToId[`${path}||${method}`];
 				if (epId && schema) result[epId] = schema;
 			});
@@ -9348,6 +9434,14 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 		}
 		if (JSON.stringify(endpointParams) !== JSON.stringify(initialEndpointParams)) return true;
 		if (JSON.stringify(endpointResponseParams) !== JSON.stringify(initialEndpointResponseParams)) return true;
+		if (JSON.stringify(endpointRequestBody) !== JSON.stringify(initialEndpointRequestBody)) {
+			console.log("hasChanges: endpointRequestBody changed", {
+				endpointRequestBody,
+				initialEndpointRequestBody
+			});
+			return true;
+		}
+		if (JSON.stringify(endpointResponseBody) !== JSON.stringify(initialEndpointResponseBody)) return true;
 		return false;
 	}, [
 		selectedApi,
@@ -9362,7 +9456,11 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 		endpointParams,
 		endpointResponseParams,
 		initialEndpointParams,
-		initialEndpointResponseParams
+		initialEndpointResponseParams,
+		endpointRequestBody,
+		initialEndpointRequestBody,
+		endpointResponseBody,
+		initialEndpointResponseBody
 	]);
 	(0, react$1.useEffect)(() => {
 		setBannerVisible(hasChanges);
@@ -9481,6 +9579,8 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 		setEndpointTags({});
 		setEndpointParams(initialEndpointParams);
 		setEndpointResponseParams(initialEndpointResponseParams);
+		setEndpointRequestBody(initialEndpointRequestBody);
+		setEndpointResponseBody(initialEndpointResponseBody);
 		setLocalTags(tagMetadata);
 		setResetKey((prev) => prev + 1);
 		messageApi.success("Changes have been reset successfully.");
@@ -9570,7 +9670,7 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 			if (!methodObjAny.requestBody) methodObjAny.requestBody = {};
 			const rb = methodObjAny.requestBody;
 			if (!rb.content) rb.content = {};
-			rb.content["application/json"] = { schema };
+			rb.content["application/json"] = { example: schema };
 		});
 		Object.entries(endpointResponseBody).forEach(([id, schema]) => {
 			const loc = idToPathMethod[id];
@@ -9747,15 +9847,16 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 				display: "flex",
 				alignItems: "center",
 				gap: 8,
-				padding: "8px 12px",
+				padding: mode === "view" ? "8px 12px" : "0 12px",
 				border: "none",
 				cursor: "pointer",
-				borderRadius: 8,
+				borderRadius: mode === "view" ? 8 : 12,
 				fontFamily: token.fontFamily,
 				background: mode === "view" ? token.colorBgContainer : "transparent",
 				boxShadow: mode === "view" ? "0px 2px 4px -2px rgba(17,12,34,0.12)" : "none",
 				fontWeight: mode === "view" ? 700 : 400,
-				fontSize: mode === "view" ? token.fontSize : token.fontSizeLG,
+				fontSize: token.fontSize,
+				lineHeight: "22px",
 				color: token.colorText
 			},
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.EyeOutlined, { style: { fontSize: 18 } }), "View"]
@@ -9857,10 +9958,11 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 							})
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: cx("section"),
+							className: cx("section", "section-grow"),
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndpointsSection, {
 								mode,
 								endpointsByTag: getEndpointsByTag(),
+								resetKey,
 								collapsed: endpointsCollapsed,
 								onToggleCollapse: () => setEndpointsCollapsed((c) => !c),
 								endpointNames,
@@ -9954,7 +10056,7 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 								},
 								requestBodySchemas: endpointRequestBody,
 								responseBodySchemas: endpointResponseBody
-							}, resetKey)
+							})
 						})
 					] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 						selectedEditItem.type === "errors" && errorBox && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -10114,8 +10216,9 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 								} catch {}
 							},
 							requestBodySchemas: endpointRequestBody,
-							responseBodySchemas: endpointResponseBody
-						}, resetKey)
+							responseBodySchemas: endpointResponseBody,
+							resetKey
+						})
 					] })
 				})]
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {