@digi-frontend/dgate-api-documentation 4.1.1 → 4.1.5

package/dist/index.mjs

@@ -75,8 +75,10 @@ const useStore = create()(devtools(immer(createStore), { name: "dgate-docs-store
 //#region src/hooks/useStyle.ts
 function useStyle(componentName, stylesFn) {
 	const { token, theme: theme$1, hashId } = 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: useStyleRegister({
 			theme: theme$1,
@@ -1231,7 +1233,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,
@@ -1279,7 +1281,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,
@@ -2124,7 +2126,7 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
 		},
 		[scope("mobileWrapper")]: {
 			flexDirection: "column",
-			gap: token.marginMD
+			gap: 16
 		},
 		[scope("mobileTopRow")]: {
 			width: "100%",
@@ -2199,14 +2201,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"
 		}
 	}));
@@ -2603,42 +2605,6 @@ const EditTag = (props) => /* @__PURE__ */ jsxs("svg", {
 	]
 });
 //#endregion
-//#region src/assets/info-circle.tsx
-const InfoCircle = (props) => /* @__PURE__ */ jsxs("svg", {
-	width: "24",
-	height: "24",
-	viewBox: "0 0 24 24",
-	fill: "none",
-	xmlns: "http://www.w3.org/2000/svg",
-	...props,
-	children: [
-		/* @__PURE__ */ jsx("path", {
-			d: "M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z",
-			stroke: "black",
-			strokeOpacity: "0.45",
-			strokeWidth: "1.5",
-			strokeLinecap: "round",
-			strokeLinejoin: "round"
-		}),
-		/* @__PURE__ */ jsx("path", {
-			d: "M12 8V13",
-			stroke: "black",
-			strokeOpacity: "0.45",
-			strokeWidth: "1.5",
-			strokeLinecap: "round",
-			strokeLinejoin: "round"
-		}),
-		/* @__PURE__ */ jsx("path", {
-			d: "M11.9946 16H12.0036",
-			stroke: "black",
-			strokeOpacity: "0.45",
-			strokeWidth: "1.5",
-			strokeLinecap: "round",
-			strokeLinejoin: "round"
-		})
-	]
-});
-//#endregion
 //#region src/hooks/useDebounce.ts
 function useDebounce(value, delay = 500) {
 	const [debouncedValue, setDebouncedValue] = useState(value);
@@ -2656,46 +2622,46 @@ 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"
 	}
 ];
-const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initialValues, source }) => {
+const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initialValues, source, endpointName }) => {
 	const [form] = Form.useForm();
 	const [messageApi, contextHolder] = message.useMessage();
 	const [confirmModalOpen, setConfirmModalOpen] = useState(false);
@@ -2715,7 +2681,8 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
 					in: initialValues.in,
 					type: initialValues.type,
 					required: initialValues.required,
-					description: initialValues.description
+					description: initialValues.description,
+					itemsType: initialValues.items?.type
 				});
 				setEnumValues(initialValues.enum ?? []);
 			} else {
@@ -2850,7 +2817,7 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
 			alignItems: "center",
 			position: "relative",
 			paddingTop: 20,
-			paddingBottom: 8,
+			paddingBottom: 5,
 			paddingLeft: 24,
 			paddingRight: 24,
 			width: "100%"
@@ -2957,7 +2924,8 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
 			type: values.type,
 			required: values.required ?? true,
 			description: values.description || void 0,
-			enum: enumValues.length > 0 ? enumValues : void 0
+			enum: enumValues.length > 0 ? enumValues : void 0,
+			...values.type === "array" && values.itemsType && { items: { type: values.itemsType } }
 		};
 		if (mode === "edit") {
 			onEdit?.(payload);
@@ -3089,6 +3057,25 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
 							options: PARAM_TYPE_OPTIONS
 						})
 					}),
+					typeValue === "array" && /* @__PURE__ */ jsx(Form.Item, {
+						name: "itemsType",
+						label: /* @__PURE__ */ jsxs("span", {
+							className: cx("label"),
+							children: ["Items Type", /* @__PURE__ */ jsx("span", {
+								className: cx("asterisk"),
+								children: "*"
+							})]
+						}),
+						rules: [{
+							required: true,
+							message: "Items Type is required"
+						}],
+						children: /* @__PURE__ */ jsx(Select, {
+							size: "large",
+							placeholder: "Select",
+							options: PARAM_TYPE_OPTIONS
+						})
+					}),
 					/* @__PURE__ */ jsx(Form.Item, {
 						name: "required",
 						children: /* @__PURE__ */ jsxs("div", {
@@ -3198,14 +3185,9 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: cx("modalHead"),
-					children: [/* @__PURE__ */ jsxs("span", {
+					children: [/* @__PURE__ */ jsx("span", {
 						className: cx("modalTitle"),
-						children: [
-							mode === "edit" ? "Edit" : "Add",
-							" ",
-							paramName,
-							" parameter"
-						]
+						children: mode === "edit" ? `Edit ${paramName} parameter` : `Add Parameter to ${endpointName} endpoint`
 					}), /* @__PURE__ */ jsx("button", {
 						className: cx("modalCloseBtn"),
 						onClick: () => setConfirmModalOpen(false),
@@ -3222,7 +3204,9 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
 							mode === "edit" ? "edit" : "add",
 							" ",
 							paramName,
-							" parameter?"
+							" parameter",
+							mode === "add" ? ` to ${endpointName} endpoint` : "",
+							"?"
 						]
 					})
 				}),
@@ -3280,7 +3264,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] = useState(null);
 	const [activeTab, setActiveTab] = useState("general");
 	useEffect(() => {
@@ -3313,6 +3297,15 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 	const [openResponsePanels, setOpenResponsePanels] = useState(/* @__PURE__ */ new Set());
 	const [selectedStatusCodes, setSelectedStatusCodes] = useState({});
 	const [drawerSource, setDrawerSource] = useState("request");
+	const drawerEndpointName = useMemo(() => {
+		if (!paramDrawerEndpointId) return "";
+		const ep = Object.values(endpointsByTag).flat().find((e) => e.id === paramDrawerEndpointId);
+		return endpointNames[paramDrawerEndpointId] ?? ep?.summary ?? "";
+	}, [
+		paramDrawerEndpointId,
+		endpointsByTag,
+		endpointNames
+	]);
 	const [requestPages, setRequestPages] = useState(/* @__PURE__ */ new Map());
 	const [responsePages, setResponsePages] = useState(/* @__PURE__ */ new Map());
 	const [requestSearches, setRequestSearches] = useState({});
@@ -3323,6 +3316,30 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 	const debouncedResponseSearches = useDebounce(responseSearches);
 	const [editableRequestContent, setEditableRequestContent] = useState({});
 	const [editableResponseContent, setEditableResponseContent] = useState({});
+	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
+	]);
 	useEffect(() => {
 		if (!openRequestPanels.size) return;
 		openRequestPanels.forEach((epId) => {
@@ -3388,10 +3405,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")]: {
@@ -3494,7 +3530,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%"
 		},
@@ -3569,7 +3605,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" }
@@ -3602,6 +3638,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",
@@ -3740,7 +3783,6 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			alignItems: "center",
 			position: "relative",
 			paddingTop: 20,
-			paddingBottom: 8,
 			paddingLeft: 24,
 			paddingRight: 24,
 			width: "100%"
@@ -3766,7 +3808,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			border: "none",
 			background: "transparent",
 			padding: 0,
-			color: token.colorTextSecondary,
+			color: token.colorTextTertiary,
 			fontSize: 16,
 			lineHeight: 1,
 			"&:hover": {
@@ -3779,7 +3821,6 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			alignItems: "center",
 			paddingLeft: 24,
 			paddingRight: 24,
-			paddingBottom: 12,
 			height: 56,
 			width: "100%"
 		},
@@ -3906,6 +3947,8 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			alignItems: "center",
 			justifyContent: "center",
 			width: "100%",
+			flex: 1,
+			minHeight: 0,
 			"& .ant-empty": {
 				margin: 0,
 				display: "flex",
@@ -4001,9 +4044,21 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			title: "Parameter",
 			key: "parameter",
 			render: (_, row) => /* @__PURE__ */ jsxs("span", { children: [
-				/* @__PURE__ */ jsx("span", {
-					className: cx("view-param-name"),
-					children: row.name
+				/* @__PURE__ */ jsx(Tooltip, {
+					title: row.name,
+					placement: "bottom",
+					children: /* @__PURE__ */ 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__ */ jsx("span", {
 					className: cx("view-param-type"),
@@ -4021,9 +4076,21 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 		{
 			title: "Description",
 			key: "description",
-			render: (_, row) => /* @__PURE__ */ jsx("span", {
-				className: cx("view-param-desc"),
-				children: row.description || "--"
+			render: (_, row) => /* @__PURE__ */ jsx(Tooltip, {
+				title: row.description || "--",
+				placement: "bottom",
+				children: /* @__PURE__ */ jsx("span", {
+					className: cx("view-param-desc"),
+					style: {
+						display: "inline-block",
+						maxWidth: 200,
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+						whiteSpace: "nowrap",
+						verticalAlign: "bottom"
+					},
+					children: row.description || "--"
+				})
 			})
 		},
 		{
@@ -4202,6 +4269,10 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 											ghost: true,
 											type: "primary",
 											icon: /* @__PURE__ */ jsx(PlusOutlined, {}),
+											style: {
+												height: 32,
+												paddingInline: 8
+											},
 											onClick: () => {
 												setDrawerSource("request");
 												setParamDrawerMode("add");
@@ -4238,6 +4309,10 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 											ghost: true,
 											type: "primary",
 											icon: /* @__PURE__ */ jsx(PlusOutlined, {}),
+											style: {
+												height: 32,
+												paddingInline: 8
+											},
 											onClick: () => {
 												setDrawerSource("request");
 												setParamDrawerMode("add");
@@ -4319,9 +4394,13 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 															children: [/* @__PURE__ */ jsx("span", {
 																className: cx("param-detail-label"),
 																children: "Parameter Name"
-															}), /* @__PURE__ */ jsx("span", {
-																className: cx("param-detail-value"),
-																children: param.name
+															}), /* @__PURE__ */ jsx(Tooltip, {
+																title: param.name,
+																placement: "bottom",
+																children: /* @__PURE__ */ jsx("span", {
+																	className: cx("param-detail-value", "param-detail-value-name"),
+																	children: param.name
+																})
 															})]
 														}), /* @__PURE__ */ jsxs("div", {
 															className: cx("param-detail-cell"),
@@ -4397,9 +4476,13 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 																children: [/* @__PURE__ */ jsx("span", {
 																	className: cx("param-detail-label"),
 																	children: "Parameter Name"
-																}), /* @__PURE__ */ jsx("span", {
-																	className: cx("param-detail-value"),
-																	children: param.name
+																}), /* @__PURE__ */ jsx(Tooltip, {
+																	title: param.name,
+																	placement: "bottom",
+																	children: /* @__PURE__ */ jsx("span", {
+																		className: cx("param-detail-value", "param-detail-value-name"),
+																		children: param.name
+																	})
 																})]
 															}),
 															/* @__PURE__ */ jsxs("div", {
@@ -4438,7 +4521,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 																				margin: 0,
 																				paddingLeft: 16
 																			},
-																			children: param.enum.map((e) => /* @__PURE__ */ jsx("li", { children: e }, e))
+																			children: param.enum.slice(1).map((e) => /* @__PURE__ */ jsx("li", { children: e }, e))
 																		}),
 																		placement: "bottom",
 																		children: /* @__PURE__ */ jsxs("span", {
@@ -4466,9 +4549,13 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 																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__ */ jsx(Tooltip, {
+																	title: param.description || "—",
+																	placement: "bottom",
+																	children: /* @__PURE__ */ jsx("span", {
+																		className: cx("param-detail-value", "param-detail-value--ellipsis"),
+																		children: param.description || "—"
+																	})
 																})]
 															})
 														]
@@ -4621,6 +4708,10 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 											ghost: true,
 											type: "primary",
 											icon: /* @__PURE__ */ jsx(PlusOutlined, {}),
+											style: {
+												height: 32,
+												paddingInline: 8
+											},
 											onClick: () => {
 												setDrawerSource("response");
 												setParamDrawerMode("add");
@@ -4711,6 +4802,10 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 											ghost: true,
 											type: "primary",
 											icon: /* @__PURE__ */ jsx(PlusOutlined, {}),
+											style: {
+												height: 32,
+												paddingInline: 8
+											},
 											onClick: () => {
 												setDrawerSource("response");
 												setParamDrawerMode("add");
@@ -4870,9 +4965,13 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 																children: [/* @__PURE__ */ jsx("span", {
 																	className: cx("param-detail-label"),
 																	children: "Parameter Name"
-																}), /* @__PURE__ */ jsx("span", {
-																	className: cx("param-detail-value"),
-																	children: param.name
+																}), /* @__PURE__ */ jsx(Tooltip, {
+																	title: param.name,
+																	placement: "bottom",
+																	children: /* @__PURE__ */ jsx("span", {
+																		className: cx("param-detail-value", "param-detail-value-name"),
+																		children: param.name
+																	})
 																})]
 															}),
 															/* @__PURE__ */ jsxs("div", {
@@ -4911,7 +5010,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 																				margin: 0,
 																				paddingLeft: 16
 																			},
-																			children: param.enum.map((e) => /* @__PURE__ */ jsx("li", { children: e }, e))
+																			children: param.enum.slice(1).map((e) => /* @__PURE__ */ jsx("li", { children: e }, e))
 																		}),
 																		placement: "bottom",
 																		children: /* @__PURE__ */ jsxs("span", {
@@ -4939,9 +5038,13 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 																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__ */ jsx(Tooltip, {
+																	title: param.description || "—",
+																	placement: "bottom",
+																	children: /* @__PURE__ */ jsx("span", {
+																		className: cx("param-detail-value", "param-detail-value--ellipsis"),
+																		children: param.description || "—"
+																	})
 																})]
 															})
 														]
@@ -5004,20 +5107,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__ */ 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
-											} })
-										]
+										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: "*"
+											})]
+										})]
 									}),
 									openResponsePanels.has(ep.id) && /* @__PURE__ */ jsxs("div", {
 										className: cx("code-panel"),
@@ -5180,6 +5276,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 				/* @__PURE__ */ jsx(AddParameterDrawer, {
 					open: paramDrawerOpen,
 					mode: paramDrawerMode,
+					endpointName: drawerEndpointName,
 					initialValues: paramDrawerMode === "edit" && paramDrawerEndpointId && editParamIdx !== null ? drawerSource === "response" ? endpointResponseParams[paramDrawerEndpointId]?.[editParamIdx] : endpointParams[paramDrawerEndpointId]?.[editParamIdx] : void 0,
 					onClose: () => {
 						setParamDrawerOpen(false);
@@ -5467,6 +5564,10 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 												ghost: true,
 												type: "primary",
 												icon: /* @__PURE__ */ jsx(PlusOutlined, {}),
+												style: {
+													height: 32,
+													paddingInline: 8
+												},
 												onClick: () => {
 													setDrawerSource("request");
 													setParamDrawerMode("add");
@@ -5503,6 +5604,10 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 												ghost: true,
 												type: "primary",
 												icon: /* @__PURE__ */ jsx(PlusOutlined, {}),
+												style: {
+													height: 32,
+													paddingInline: 8
+												},
 												onClick: () => {
 													setDrawerSource("request");
 													setParamDrawerMode("add");
@@ -5884,6 +5989,10 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 												ghost: true,
 												type: "primary",
 												icon: /* @__PURE__ */ jsx(PlusOutlined, {}),
+												style: {
+													height: 32,
+													paddingInline: 8
+												},
 												onClick: () => {
 													setDrawerSource("response");
 													setParamDrawerMode("add");
@@ -5974,6 +6083,10 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 												ghost: true,
 												type: "primary",
 												icon: /* @__PURE__ */ jsx(PlusOutlined, {}),
+												style: {
+													height: 32,
+													paddingInline: 8
+												},
 												onClick: () => {
 													setDrawerSource("response");
 													setParamDrawerMode("add");
@@ -6267,20 +6380,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__ */ 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
-												} })
-											]
+											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: "*"
+												})]
+											})]
 										}),
 										openResponsePanels.has(ep.id) && /* @__PURE__ */ jsxs("div", {
 											className: cx("code-panel"),
@@ -6445,6 +6551,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			/* @__PURE__ */ jsx(AddParameterDrawer, {
 				open: paramDrawerOpen,
 				mode: paramDrawerMode,
+				endpointName: drawerEndpointName,
 				initialValues: paramDrawerMode === "edit" && paramDrawerEndpointId && editParamIdx !== null ? drawerSource === "response" ? endpointResponseParams[paramDrawerEndpointId]?.[editParamIdx] : endpointParams[paramDrawerEndpointId]?.[editParamIdx] : void 0,
 				onClose: () => {
 					setParamDrawerOpen(false);
@@ -7482,7 +7589,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,
@@ -8161,37 +8269,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__ */ jsxs("span", { children: [
-			p.name,
-			typeLabel && /* @__PURE__ */ jsx("span", {
-				style: {
-					color: token.colorTextTertiary,
-					marginLeft: "0.25rem",
-					marginRight: "0.25rem"
-				},
-				children: typeLabel
-			}),
-			p.required ? /* @__PURE__ */ jsx("span", {
-				style: { color: token.colorError },
-				children: "*"
-			}) : /* @__PURE__ */ 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__ */ jsxs("span", { children: [
-				name,
+		param: /* @__PURE__ */ jsxs("span", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 4
+			},
+			children: [
+				/* @__PURE__ */ jsx(Tooltip, {
+					title: p.name,
+					placement: "bottom",
+					children: /* @__PURE__ */ jsx("span", {
+						style: {
+							display: "inline-block",
+							maxWidth: 200,
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							whiteSpace: "nowrap",
+							verticalAlign: "bottom"
+						},
+						children: p.name
+					})
+				}),
 				typeLabel && /* @__PURE__ */ jsx("span", {
 					style: {
 						color: token.colorTextTertiary,
@@ -8200,50 +8299,84 @@ const buildHeaderData = (headers, token) => {
 					},
 					children: typeLabel
 				}),
-				header.required ? /* @__PURE__ */ jsx("span", {
+				p.required ? /* @__PURE__ */ jsx("span", {
 					style: { color: token.colorError },
 					children: "*"
 				}) : /* @__PURE__ */ jsx("span", {
 					style: { color: token.colorSuccess },
 					children: "Optional"
 				})
-			] }, idx),
+			]
+		}),
+		desc: /* @__PURE__ */ jsx(Tooltip, {
+			title: p.description || "--",
+			placement: "bottom",
+			children: /* @__PURE__ */ 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__ */ jsxs("span", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 4
+				},
+				children: [
+					/* @__PURE__ */ jsx(Tooltip, {
+						title: name,
+						placement: "bottom",
+						children: /* @__PURE__ */ jsx("span", {
+							style: {
+								display: "inline-block",
+								maxWidth: 200,
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								whiteSpace: "nowrap",
+								verticalAlign: "bottom"
+							},
+							children: name
+						})
+					}),
+					typeLabel && /* @__PURE__ */ jsx("span", {
+						style: {
+							color: token.colorTextTertiary,
+							marginLeft: "0.25rem",
+							marginRight: "0.25rem"
+						},
+						children: typeLabel
+					}),
+					header.required ? /* @__PURE__ */ jsx("span", {
+						style: { color: token.colorError },
+						children: "*"
+					}) : /* @__PURE__ */ 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__ */ jsxs("span", { children: [
-			name,
-			prop.type && /* @__PURE__ */ jsx("span", {
-				style: {
-					color: token.colorTextTertiary,
-					marginLeft: "0.25rem",
-					marginRight: "0.25rem"
-				},
-				children: prop.type
-			}),
-			required.includes(name) ? /* @__PURE__ */ jsx("span", {
-				style: { color: token.colorError },
-				children: "*"
-			}) : /* @__PURE__ */ 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] = useState("header");
@@ -8292,7 +8425,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",
@@ -8329,19 +8461,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__ */ jsx(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);
 	useEffect(() => {
 		const firstKey = requestTabs[0]?.key ?? "header";
@@ -9046,9 +9166,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",
@@ -9181,7 +9302,8 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 						type: schema?.type ?? "string",
 						required: Boolean(p.required ?? false),
 						description: p.description != null ? String(p.description) : void 0,
-						enum: Array.isArray(schema?.enum) ? schema.enum : void 0
+						enum: Array.isArray(schema?.enum) ? schema.enum : void 0,
+						...schema?.items && { items: { type: schema.items.type ?? "string" } }
 					};
 				});
 			});
@@ -9211,7 +9333,8 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 						type: schema?.type ?? "string",
 						required: Boolean(p.required ?? false),
 						description: p.description != null ? String(p.description) : void 0,
-						enum: Array.isArray(schema?.enum) ? schema.enum : void 0
+						enum: Array.isArray(schema?.enum) ? schema.enum : void 0,
+						...schema?.items && { items: { type: schema.items.type ?? "string" } }
 					};
 				});
 			});
@@ -9229,7 +9352,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;
 			});
@@ -9282,6 +9405,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,
@@ -9296,7 +9427,11 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 		endpointParams,
 		endpointResponseParams,
 		initialEndpointParams,
-		initialEndpointResponseParams
+		initialEndpointResponseParams,
+		endpointRequestBody,
+		initialEndpointRequestBody,
+		endpointResponseBody,
+		initialEndpointResponseBody
 	]);
 	useEffect(() => {
 		setBannerVisible(hasChanges);
@@ -9415,6 +9550,9 @@ 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.");
 	};
@@ -9467,7 +9605,8 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 					...param.description && { description: param.description },
 					schema: {
 						type: param.type,
-						...param.enum && param.enum.length > 0 && { enum: param.enum }
+						...param.enum && param.enum.length > 0 && { enum: param.enum },
+						...param.type === "array" && param.items && { items: param.items }
 					}
 				}));
 				else delete methodObj.parameters;
@@ -9484,7 +9623,8 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 					...param.description && { description: param.description },
 					schema: {
 						type: param.type,
-						...param.enum && param.enum.length > 0 && { enum: param.enum }
+						...param.enum && param.enum.length > 0 && { enum: param.enum },
+						...param.type === "array" && param.items && { items: param.items }
 					}
 				}));
 				else delete methodObj["x-response-params"];
@@ -9501,7 +9641,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];
@@ -9531,10 +9671,9 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 			setSelectedApi(newTransformed);
 		} 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);
+			if (err && typeof err === "object" && "data" in err) messages = [err.data?.message ?? "Unknown error"];
+			else if (err && typeof err === "object" && "message" in err) messages = [String(err.message)];
+			else if (err instanceof Error) messages = err.message.split("\n").filter(Boolean);
 			else messages = [String(err)];
 			setSaveErrors(messages);
 			setSelectedEditItem({ type: "errors" });
@@ -9679,15 +9818,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__ */ jsx(EyeOutlined, { style: { fontSize: 18 } }), "View"]
@@ -9789,10 +9929,11 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 							})
 						}),
 						/* @__PURE__ */ jsx("div", {
-							className: cx("section"),
+							className: cx("section", "section-grow"),
 							children: /* @__PURE__ */ jsx(EndpointsSection, {
 								mode,
 								endpointsByTag: getEndpointsByTag(),
+								resetKey,
 								collapsed: endpointsCollapsed,
 								onToggleCollapse: () => setEndpointsCollapsed((c) => !c),
 								endpointNames,
@@ -9886,7 +10027,7 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 								},
 								requestBodySchemas: endpointRequestBody,
 								responseBodySchemas: endpointResponseBody
-							}, resetKey)
+							})
 						})
 					] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
 						selectedEditItem.type === "errors" && errorBox && /* @__PURE__ */ jsx("div", {
@@ -10046,8 +10187,9 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 								} catch {}
 							},
 							requestBodySchemas: endpointRequestBody,
-							responseBodySchemas: endpointResponseBody
-						}, resetKey)
+							responseBodySchemas: endpointResponseBody,
+							resetKey
+						})
 					] })
 				})]
 			}) : /* @__PURE__ */ jsxs("div", {