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

package/dist/index.cjs

@@ -41,7 +41,6 @@ let react_syntax_highlighter_dist_esm_languages_hljs_json_js = require("react-sy
 react_syntax_highlighter_dist_esm_languages_hljs_json_js = __toESM(react_syntax_highlighter_dist_esm_languages_hljs_json_js, 1);
 let react_syntax_highlighter_dist_esm_styles_hljs_index_js = require("react-syntax-highlighter/dist/esm/styles/hljs/index.js");
 react_syntax_highlighter_dist_esm_styles_hljs_index_js = __toESM(react_syntax_highlighter_dist_esm_styles_hljs_index_js, 1);
-let nanoid = require("nanoid");
 //#region src/store/slices/view.ts
 const createViewSlice = (set) => ({ view: {
 	selectedNodeKey: null,
@@ -2698,6 +2697,7 @@ const PARAM_IN_OPTIONS = [
 		value: "path"
 	}
 ];
+const RESPONSE_PARAM_IN_OPTIONS = PARAM_IN_OPTIONS.filter((o) => o.value === "header");
 const PARAM_TYPE_OPTIONS = [
 	{
 		label: "string",
@@ -2724,7 +2724,7 @@ const PARAM_TYPE_OPTIONS = [
 		value: "object"
 	}
 ];
-const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initialValues }) => {
+const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initialValues, source }) => {
 	const [form] = antd.Form.useForm();
 	const [messageApi, contextHolder] = antd.message.useMessage();
 	const [confirmModalOpen, setConfirmModalOpen] = (0, react$1.useState)(false);
@@ -2942,6 +2942,7 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
 		}
 	}));
 	const isAddEnabled = mode === "edit" ? hasChanges : !!(nameValue?.trim() && inValue && typeValue);
+	const paramInOptions = source === "response" ? RESPONSE_PARAM_IN_OPTIONS : PARAM_IN_OPTIONS;
 	const resetForm = () => {
 		form.resetFields();
 		setEnumInput("");
@@ -3046,10 +3047,11 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
 				className: cx("form-body"),
 				initialValues: {
 					required: true,
-					in: "query",
+					in: source === "response" ? "header" : "query",
 					type: "string"
 				},
-				onValuesChange: () => {
+				onValuesChange: (_changed, allValues) => {
+					if (allValues.in === "path") form.setFieldValue("required", true);
 					if (mode === "edit" && initialValues) {
 						const current = form.getFieldsValue();
 						setHasChanges(current.name !== initialValues.name || current.in !== initialValues.in || current.type !== initialValues.type || current.required !== initialValues.required || (current.description ?? "") !== (initialValues.description ?? "") || JSON.stringify(enumValues) !== JSON.stringify(initialValues.enum ?? []));
@@ -3094,7 +3096,7 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Select, {
 							size: "large",
 							placeholder: "Select",
-							options: PARAM_IN_OPTIONS
+							options: paramInOptions
 						})
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Form.Item, {
@@ -3121,12 +3123,20 @@ const AddParameterDrawer = ({ open, onClose, onAdd, onEdit, mode = "add", initia
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: cx("switch-row"),
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Switch, {
-								checked: requiredValue ?? true,
+								checked: inValue === "path" ? true : requiredValue ?? true,
+								disabled: inValue === "path",
 								onChange: (checked) => form.setFieldValue("required", checked),
-								style: { backgroundColor: requiredValue ?? true ? token.colorPrimary : void 0 }
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								style: { backgroundColor: (inValue === "path" ? true : requiredValue ?? true) ? token.colorPrimary : void 0 }
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 								className: cx("switch-label"),
-								children: "Required?"
+								children: ["Required?", inValue === "path" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									style: {
+										color: token.colorTextTertiary,
+										fontSize: 12,
+										marginLeft: 4
+									},
+									children: "(Always required for path parameter)"
+								})]
 							})]
 						})
 					}),
@@ -3299,7 +3309,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, 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, 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)(() => {
@@ -3340,6 +3350,48 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 	const [showResponseSearch, setShowResponseSearch] = (0, react$1.useState)({});
 	const debouncedRequestSearches = useDebounce(requestSearches);
 	const debouncedResponseSearches = useDebounce(responseSearches);
+	const [editableRequestContent, setEditableRequestContent] = (0, react$1.useState)({});
+	const [editableResponseContent, setEditableResponseContent] = (0, react$1.useState)({});
+	(0, react$1.useEffect)(() => {
+		if (!openRequestPanels.size) return;
+		openRequestPanels.forEach((epId) => {
+			if (editableRequestContent[epId] !== void 0) return;
+			const val = requestBodySchemas?.[epId];
+			const json = val ? JSON.stringify(val, null, 2) : "";
+			setEditableRequestContent((prev) => ({
+				...prev,
+				[epId]: json
+			}));
+		});
+	}, [openRequestPanels, requestBodySchemas]);
+	(0, react$1.useEffect)(() => {
+		if (!openResponsePanels.size) return;
+		openResponsePanels.forEach((epId) => {
+			if (editableResponseContent[epId] !== void 0) return;
+			const val = responseBodySchemas?.[epId];
+			const json = val ? JSON.stringify(val, null, 2) : "";
+			setEditableResponseContent((prev) => ({
+				...prev,
+				[epId]: json
+			}));
+		});
+	}, [openResponsePanels, responseBodySchemas]);
+	const handleValidate = (content) => {
+		try {
+			JSON.parse(content);
+			antd.message.success("Definition is valid JSON.");
+		} catch {
+			antd.message.error("Invalid JSON definition.");
+		}
+	};
+	const handleBeautify = (content, setter) => {
+		try {
+			const parsed = JSON.parse(content);
+			setter(JSON.stringify(parsed, null, 2));
+		} catch {
+			antd.message.error("Could not beautify — content is not valid JSON.");
+		}
+	};
 	const { selectNodeByKey } = useNodeSelection();
 	const { token: antdToken } = antd.theme.useToken();
 	const isMobile = !useBreakpoint$2().md;
@@ -3494,6 +3546,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			userSelect: "none",
 			"&:hover": { background: token.colorFillTertiary }
 		},
+		[scope("param-row--open")]: { borderRadius: `${token.borderRadius}px ${token.borderRadius}px 0 0` },
 		[scope("param-row-icon")]: {
 			fontSize: 12,
 			transition: "transform 0.2s"
@@ -3501,10 +3554,13 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 		[scope("param-row-icon--open")]: { transform: "rotate(180deg)" },
 		[scope("code-panel")]: {
 			width: "100%",
-			overflow: "hidden"
+			overflow: "hidden",
+			background: "#1D2856",
+			borderBottomLeftRadius: 8,
+			borderBottomRightRadius: 8
 		},
 		[scope("code-area")]: {
-			background: token.colorBgSpotlight,
+			background: "#1D2856",
 			padding: "10px 12px",
 			fontFamily: "Cairo, sans-serif",
 			fontSize: 14,
@@ -3516,7 +3572,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			display: "block"
 		},
 		[scope("code-footer")]: {
-			background: token.colorBgSpotlight,
+			background: "#161D40",
 			padding: 12,
 			borderBottomLeftRadius: 8,
 			borderBottomRightRadius: 8,
@@ -4500,8 +4556,8 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 											className: cx("pagination")
 										})] });
 									})(),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: cx("param-row"),
+									!["GET", "DELETE"].includes(ep.method) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: cx("param-row", openRequestPanels.has(ep.id) ? "param-row--open" : ""),
 										style: { marginTop: token.margin },
 										onClick: () => toggleRequestPanel(ep.id),
 										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.DownOutlined, { className: cx("param-row-icon", openRequestPanels.has(ep.id) ? "param-row-icon--open" : "") }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
@@ -4512,29 +4568,43 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 											})]
 										})]
 									}),
-									openRequestPanels.has(ep.id) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									!["GET", "DELETE"].includes(ep.method) && openRequestPanels.has(ep.id) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 										className: cx("code-panel"),
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.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)
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input.TextArea, {
+											value: editableRequestContent[ep.id] ?? "",
+											onChange: (e) => {
+												setEditableRequestContent((prev) => ({
+													...prev,
+													[ep.id]: e.target.value
+												}));
+												onRequestContentChange?.(ep.id, e.target.value);
+											},
+											rows: Math.max(3, (editableRequestContent[ep.id] ?? "").split("\n").length),
+											style: {
+												fontFamily: "monospace",
+												fontSize: "0.75rem",
+												background: "#1D2856",
+												color: "#fff",
+												outline: "none",
+												boxShadow: "none",
+												border: "none"
+											}
 										}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 											className: cx("code-footer"),
 											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
 												ghost: true,
 												size: "small",
 												className: cx("code-btn"),
+												onClick: () => handleValidate(editableRequestContent[ep.id] ?? ""),
 												children: "Validate"
 											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
 												ghost: true,
 												size: "small",
 												className: cx("code-btn"),
+												onClick: () => handleBeautify(editableRequestContent[ep.id] ?? "", (v) => setEditableRequestContent((prev) => ({
+													...prev,
+													[ep.id]: v
+												}))),
 												children: "Beautify"
 											})]
 										})]
@@ -4960,7 +5030,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 										})] });
 									})(),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: cx("param-row"),
+										className: cx("param-row", openResponsePanels.has(ep.id) ? "param-row--open" : ""),
 										style: { marginTop: token.margin },
 										onClick: () => toggleResponsePanel(ep.id),
 										children: [
@@ -4980,27 +5050,41 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 									}),
 									openResponsePanels.has(ep.id) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 										className: cx("code-panel"),
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.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)
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input.TextArea, {
+											value: editableResponseContent[ep.id] ?? "",
+											onChange: (e) => {
+												setEditableResponseContent((prev) => ({
+													...prev,
+													[ep.id]: e.target.value
+												}));
+												onResponseContentChange?.(ep.id, e.target.value);
+											},
+											rows: Math.max(3, (editableResponseContent[ep.id] ?? "").split("\n").length),
+											style: {
+												fontFamily: "monospace",
+												fontSize: "0.75rem",
+												background: "#1D2856",
+												color: "#fff",
+												outline: "none",
+												boxShadow: "none",
+												border: "none"
+											}
 										}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 											className: cx("code-footer"),
 											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
 												ghost: true,
 												size: "small",
 												className: cx("code-btn"),
+												onClick: () => handleValidate(editableResponseContent[ep.id] ?? ""),
 												children: "Validate"
 											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
 												ghost: true,
 												size: "small",
 												className: cx("code-btn"),
+												onClick: () => handleBeautify(editableResponseContent[ep.id] ?? "", (v) => setEditableResponseContent((prev) => ({
+													...prev,
+													[ep.id]: v
+												}))),
 												children: "Beautify"
 											})]
 										})]
@@ -5147,7 +5231,8 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 						setParamDrawerEndpointId(null);
 						setParamDrawerMode("add");
 						setEditParamIdx(null);
-					}
+					},
+					source: drawerSource
 				})
 			]
 		}));
@@ -5736,8 +5821,8 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 												className: cx("pagination")
 											})] });
 										})(),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-											className: cx("param-row"),
+										!["GET", "DELETE"].includes(ep.method) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: cx("param-row", openRequestPanels.has(ep.id) ? "param-row--open" : ""),
 											style: { marginTop: token.margin },
 											onClick: () => toggleRequestPanel(ep.id),
 											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.DownOutlined, { className: cx("param-row-icon", openRequestPanels.has(ep.id) ? "param-row-icon--open" : "") }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
@@ -5748,29 +5833,43 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 												})]
 											})]
 										}),
-										openRequestPanels.has(ep.id) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										!["GET", "DELETE"].includes(ep.method) && openRequestPanels.has(ep.id) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 											className: cx("code-panel"),
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.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)
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input.TextArea, {
+												value: editableRequestContent[ep.id] ?? "",
+												onChange: (e) => {
+													setEditableRequestContent((prev) => ({
+														...prev,
+														[ep.id]: e.target.value
+													}));
+													onRequestContentChange?.(ep.id, e.target.value);
+												},
+												rows: Math.max(3, (editableRequestContent[ep.id] ?? "").split("\n").length),
+												style: {
+													fontFamily: "monospace",
+													fontSize: "0.75rem",
+													background: "#1D2856",
+													color: "#fff",
+													outline: "none",
+													boxShadow: "none",
+													border: "none"
+												}
 											}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 												className: cx("code-footer"),
 												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
 													ghost: true,
 													size: "small",
 													className: cx("code-btn"),
+													onClick: () => handleValidate(editableRequestContent[ep.id] ?? ""),
 													children: "Validate"
 												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
 													ghost: true,
 													size: "small",
 													className: cx("code-btn"),
+													onClick: () => handleBeautify(editableRequestContent[ep.id] ?? "", (v) => setEditableRequestContent((prev) => ({
+														...prev,
+														[ep.id]: v
+													}))),
 													children: "Beautify"
 												})]
 											})]
@@ -6194,7 +6293,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 											})] });
 										})(),
 										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-											className: cx("param-row"),
+											className: cx("param-row", openResponsePanels.has(ep.id) ? "param-row--open" : ""),
 											style: { marginTop: token.margin },
 											onClick: () => toggleResponsePanel(ep.id),
 											children: [
@@ -6214,27 +6313,41 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 										}),
 										openResponsePanels.has(ep.id) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 											className: cx("code-panel"),
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.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)
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input.TextArea, {
+												value: editableResponseContent[ep.id] ?? "",
+												onChange: (e) => {
+													setEditableResponseContent((prev) => ({
+														...prev,
+														[ep.id]: e.target.value
+													}));
+													onResponseContentChange?.(ep.id, e.target.value);
+												},
+												rows: Math.max(3, (editableResponseContent[ep.id] ?? "").split("\n").length),
+												style: {
+													fontFamily: "monospace",
+													fontSize: "0.75rem",
+													background: "#1D2856",
+													color: "#fff",
+													outline: "none",
+													boxShadow: "none",
+													border: "none"
+												}
 											}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 												className: cx("code-footer"),
 												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
 													ghost: true,
 													size: "small",
 													className: cx("code-btn"),
+													onClick: () => handleValidate(editableResponseContent[ep.id] ?? ""),
 													children: "Validate"
 												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
 													ghost: true,
 													size: "small",
 													className: cx("code-btn"),
+													onClick: () => handleBeautify(editableResponseContent[ep.id] ?? "", (v) => setEditableResponseContent((prev) => ({
+														...prev,
+														[ep.id]: v
+													}))),
 													children: "Beautify"
 												})]
 											})]
@@ -6383,7 +6496,8 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 					setParamDrawerEndpointId(null);
 					setParamDrawerMode("add");
 					setEditParamIdx(null);
-				}
+				},
+				source: drawerSource
 			})
 		]
 	}));
@@ -6885,9 +6999,9 @@ const TagsSection = ({ tags, collapsed, onToggleCollapse, onAddTag, onEditTag, o
 };
 //#endregion
 //#region src/view/components/ApiPage/components/AddTagDrawer.tsx
-const TAG_NAME_REGEX = /^[A-Za-z0-9_-]+$/;
-const TAG_DESC_REGEX = /^[A-Za-z0-9_-]+$/;
-const EXT_DESC_REGEX = /^[A-Za-z0-9_-]+$/;
+const TAG_NAME_REGEX = /^[A-Za-z0-9_\s-]+$/;
+const TAG_DESC_REGEX = /^[A-Za-z0-9_\s-]+$/;
+const EXTERNAL_DOCS_DESC_REGEX = /^[A-Za-z0-9_\s-]+$/;
 const AddTagDrawer = ({ open, onClose, mode, initialValues, onAddTag, onEditTag }) => {
 	const [form] = antd.Form.useForm();
 	const [messageApi, contextHolder] = antd.message.useMessage();
@@ -7128,7 +7242,7 @@ const AddTagDrawer = ({ open, onClose, mode, initialValues, onAddTag, onEditTag
 							},
 							{
 								pattern: TAG_NAME_REGEX,
-								message: "Only letters, numbers, underscores, and hyphens"
+								message: "Only letters, numbers, spaces, underscores, and hyphens"
 							}
 						],
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input, {
@@ -7149,10 +7263,10 @@ const AddTagDrawer = ({ open, onClose, mode, initialValues, onAddTag, onEditTag
 						rules: [{
 							max: 50,
 							message: "Maximum 50 characters"
-						}, { validator: (_, value) => {
-							if (!value || TAG_DESC_REGEX.test(value)) return Promise.resolve();
-							return Promise.reject(/* @__PURE__ */ new Error("Only letters, numbers, underscores, and hyphens"));
-						} }],
+						}, {
+							pattern: TAG_DESC_REGEX,
+							message: "Only letters, numbers, spaces, _ and - allowed"
+						}],
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input.TextArea, {
 							showCount: true,
 							maxLength: 50,
@@ -7172,10 +7286,10 @@ const AddTagDrawer = ({ open, onClose, mode, initialValues, onAddTag, onEditTag
 						rules: [{
 							max: 25,
 							message: "Maximum 25 characters"
-						}, { validator: (_, value) => {
-							if (!value || EXT_DESC_REGEX.test(value)) return Promise.resolve();
-							return Promise.reject(/* @__PURE__ */ new Error("Only letters, numbers, underscores, and hyphens"));
-						} }],
+						}, {
+							pattern: EXTERNAL_DOCS_DESC_REGEX,
+							message: "Only letters, numbers, spaces, _ and - allowed"
+						}],
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input, {
 							showCount: true,
 							maxLength: 25,
@@ -7197,8 +7311,8 @@ const AddTagDrawer = ({ open, onClose, mode, initialValues, onAddTag, onEditTag
 							children: "External Docs Link"
 						}),
 						rules: [{
-							max: 512,
-							message: "Maximum 512 characters"
+							max: 500,
+							message: "Maximum 500 characters"
 						}, { validator: async () => {
 							const desc = form.getFieldValue("externalDocsDescription");
 							const link = form.getFieldValue("externalDocsLink");
@@ -8534,7 +8648,7 @@ const Codebox$1 = ({ code, language, wrapLongLines }) => {
 //#endregion
 //#region src/view/console/CodeboxSidebar.tsx
 function CodeboxSidebar$1() {
-	const { selectedEndpoint, selectedApi, activeRequestTab, selectedStatusCode, statusCodeOptions, setSelectedStatusCode } = useStore(({ view }) => view);
+	const { selectedEndpoint, selectedApi, selectedStatusCode, statusCodeOptions, setSelectedStatusCode } = useStore(({ view }) => view);
 	const httpStatusOptions = (0, react$1.useMemo)(() => statusCodeOptions.map((code) => ({
 		value: code,
 		label: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
@@ -8567,7 +8681,7 @@ function CodeboxSidebar$1() {
 		const queryParams = params.filter((p) => p.in === "query");
 		return [`curl --location '${serverUrl}${resolvedPath}${queryParams.length > 0 ? "?" + queryParams.map((p) => `${p.name}=sample-value`).join("&") : ""}'`, ...params.filter((p) => p.in === "header").map((p) => `--header '${p.name}: sample-value'`)];
 	})();
-	const hasActiveTabParams = (selectedEndpoint?.parameters ?? []).some((p) => p.in === activeRequestTab);
+	const hasAnyParams = (selectedEndpoint?.parameters ?? []).some((p) => p.in === "header" || p.in === "path" || p.in === "query");
 	const { token: antdToken, theme: themeConfig } = antd.theme.useToken();
 	const isDark = themeConfig.id == 1;
 	const headerBg = isDark ? antdToken.colorBgElevated : "#1d2856";
@@ -8689,7 +8803,7 @@ function CodeboxSidebar$1() {
 	}));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: cx("container"),
-		children: [hasActiveTabParams && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		children: [hasAnyParams && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: cx("rightCard", "rightCardRequest"),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: cx("rightCardHeader"),
@@ -8744,6 +8858,15 @@ function CodeboxSidebar$1() {
 }
 //#endregion
 //#region src/view/helper/mutate.ts
+/**
+* Simple deterministic string hash (djb2 variant).
+* Produces a stable, short base-36 hash for the same input.
+*/
+const stableHash = (input) => {
+	let hash = 5381;
+	for (let i = 0; i < input.length; i++) hash = (hash << 5) + hash + input.charCodeAt(i);
+	return (hash >>> 0).toString(36);
+};
 const resolveSchema = (schema, components) => {
 	if (!schema) return void 0;
 	if (!schema.$ref) return schema;
@@ -8806,14 +8929,14 @@ const transformOpenApiToDocs = (api) => {
 			if (!groupedPathsByTags[tag]) groupedPathsByTags[tag] = [];
 			groupedPathsByTags[tag].push({
 				...entry,
-				id: `endpoint-${(0, nanoid.nanoid)(8)}`
+				id: `endpoint-${stableHash(entry.method + "-" + entry.path)}`
 			});
 		});
 		else {
 			if (!groupedPathsByTags.default) groupedPathsByTags.default = [];
 			groupedPathsByTags.default.push({
 				...entry,
-				id: `endpoint-${(0, nanoid.nanoid)(8)}`
+				id: `endpoint-${stableHash(entry.method + "-" + entry.path)}`
 			});
 		}
 	}
@@ -8827,7 +8950,7 @@ const transformOpenApiToDocs = (api) => {
 	}, {});
 	return {
 		...api.info,
-		id: `api-${(0, nanoid.nanoid)(8)}`,
+		id: `api-${contextPath ?? "unknown"}`,
 		contextPath,
 		tags: sortedGroupedPathsByTags,
 		servers: api.servers,
@@ -8856,7 +8979,7 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 	const [apiNameTouched, setApiNameTouched] = (0, react$1.useState)(false);
 	const [localDescription, setLocalDescription] = (0, react$1.useState)("");
 	const [descriptionTouched, setDescriptionTouched] = (0, react$1.useState)(false);
-	const hasApiNameError = apiNameTouched && (!localApiName.trim() || !/^[A-Za-z0-9_-]+$/.test(localApiName.trim()));
+	const hasApiNameError = apiNameTouched && (!localApiName.trim() || !/^[A-Za-z0-9_\s-]+$/.test(localApiName.trim()));
 	const hasDescriptionError = descriptionTouched && !localDescription.trim();
 	const hasGeneralError = hasApiNameError || hasDescriptionError;
 	const [saveErrors, setSaveErrors] = (0, react$1.useState)([]);
@@ -8866,6 +8989,8 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 	const [endpointTags, setEndpointTags] = (0, react$1.useState)({});
 	const [endpointParams, setEndpointParams] = (0, react$1.useState)({});
 	const [endpointResponseParams, setEndpointResponseParams] = (0, react$1.useState)({});
+	const [endpointRequestBody, setEndpointRequestBody] = (0, react$1.useState)({});
+	const [endpointResponseBody, setEndpointResponseBody] = (0, react$1.useState)({});
 	const [tagDrawerState, setTagDrawerState] = (0, react$1.useState)({
 		open: false,
 		mode: "add"
@@ -8876,7 +9001,7 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 	});
 	const [localTags, setLocalTags] = (0, react$1.useState)([]);
 	const [messageApi, contextHolder] = antd.message.useMessage();
-	const { focusedContent, selectedNodeKey, selectedApi, originalData, builtTreeData, selectedEndpoint, setOriginalData, setTransformedData, setBuiltTreeData, setFocusedContent, setExpandedKeys, setSelectedEndpoint } = useStore(({ view }) => view);
+	const { focusedContent, selectedNodeKey, selectedApi, originalData, transformedData, builtTreeData, selectedEndpoint, setOriginalData, setTransformedData, setBuiltTreeData, setSelectedApi, setFocusedContent, setExpandedKeys, setSelectedEndpoint } = useStore(({ view }) => view);
 	const { selectFirstApi, selectPreSelectedApi, clearSelection } = useNodeSelection();
 	const hasInitializedRef = (0, react$1.useRef)(false);
 	const { useBreakpoint } = antd.Grid;
@@ -9100,10 +9225,50 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 		});
 		return result;
 	}, [originalData, selectedApi]);
+	const initialEndpointRequestBody = (0, react$1.useMemo)(() => {
+		if (!originalData || !selectedApi) return {};
+		const rawFile = originalData.find((f) => Object.keys(f.paths)[0] === selectedApi.contextPath);
+		if (!rawFile) return {};
+		const pathMethodToId = {};
+		Object.values(selectedApi.tags).flat().forEach((ep) => {
+			pathMethodToId[`${ep.path}||${ep.method.toLowerCase()}`] = ep.id;
+		});
+		const result = {};
+		Object.entries(rawFile.paths).forEach(([path, methods]) => {
+			Object.entries(methods).forEach(([method, operation]) => {
+				const schema = operation.requestBody?.content?.["application/json"]?.schema;
+				const epId = pathMethodToId[`${path}||${method}`];
+				if (epId && schema) result[epId] = schema;
+			});
+		});
+		return result;
+	}, [originalData, selectedApi]);
+	const initialEndpointResponseBody = (0, react$1.useMemo)(() => {
+		if (!originalData || !selectedApi) return {};
+		const rawFile = originalData.find((f) => Object.keys(f.paths)[0] === selectedApi.contextPath);
+		if (!rawFile) return {};
+		const pathMethodToId = {};
+		Object.values(selectedApi.tags).flat().forEach((ep) => {
+			pathMethodToId[`${ep.path}||${ep.method.toLowerCase()}`] = ep.id;
+		});
+		const result = {};
+		Object.entries(rawFile.paths).forEach(([path, methods]) => {
+			Object.entries(methods).forEach(([method, operation]) => {
+				const responses = operation.responses;
+				if (!responses) return;
+				const schema = responses["200" in responses ? "200" : Object.keys(responses)[0]]?.content?.["application/json"]?.schema;
+				const epId = pathMethodToId[`${path}||${method}`];
+				if (epId && schema) result[epId] = schema;
+			});
+		});
+		return result;
+	}, [originalData, selectedApi]);
 	(0, react$1.useEffect)(() => {
 		setLocalTags(tagMetadata);
 		setEndpointParams(initialEndpointParams);
 		setEndpointResponseParams(initialEndpointResponseParams);
+		setEndpointRequestBody(initialEndpointRequestBody);
+		setEndpointResponseBody(initialEndpointResponseBody);
 	}, [selectedApi]);
 	const hasChanges = (0, react$1.useMemo)(() => {
 		if (!selectedApi) return false;
@@ -9318,11 +9483,45 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 				else delete methodObj["x-response-params"];
 			}
 		});
+		Object.entries(endpointRequestBody).forEach(([id, schema]) => {
+			const loc = idToPathMethod[id];
+			if (!loc) return;
+			const pathEntry = cloned.paths[loc.path];
+			if (!pathEntry) return;
+			const methodObj = pathEntry[loc.method];
+			if (!methodObj) return;
+			const methodObjAny = methodObj;
+			if (!methodObjAny.requestBody) methodObjAny.requestBody = {};
+			const rb = methodObjAny.requestBody;
+			if (!rb.content) rb.content = {};
+			rb.content["application/json"] = { schema };
+		});
+		Object.entries(endpointResponseBody).forEach(([id, schema]) => {
+			const loc = idToPathMethod[id];
+			if (!loc) return;
+			const pathEntry = cloned.paths[loc.path];
+			if (!pathEntry) return;
+			const methodObj = pathEntry[loc.method];
+			if (!methodObj) return;
+			const methodObjAny = methodObj;
+			if (!methodObjAny.responses) return;
+			const responses = methodObjAny.responses;
+			const statusCode = "200" in responses ? "200" : Object.keys(responses)[0];
+			if (!responses[statusCode]) return;
+			if (!responses[statusCode].content) responses[statusCode].content = {};
+			responses[statusCode].content["application/json"] = { schema };
+		});
 		try {
 			await onSave?.(cloned);
 			setBannerVisible(false);
 			setSaveErrors([]);
 			messageApi.success("Changes have been saved and published successfully.");
+			setOriginalData(originalData.map((f) => Object.keys(f.paths)[0] === selectedApi.contextPath ? cloned : f));
+			const newTransformed = [cloned].map(transformOpenApiToDocs)[0];
+			const newTransformedData = (transformedData ?? []).map((t) => t.contextPath === selectedApi.contextPath ? newTransformed : t);
+			setTransformedData(newTransformedData);
+			setBuiltTreeData(buildTreeDataStructure(newTransformedData) ?? []);
+			setSelectedApi(newTransformed);
 		} catch (err) {
 			let messages = [];
 			if (err && typeof err === "object" && "errors" in err) {
@@ -9657,7 +9856,29 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 										[endpointId]: prev[endpointId]?.filter((_, i) => i !== idx) ?? []
 									}));
 									setBannerVisible(true);
-								}
+								},
+								onRequestContentChange: (endpointId, jsonString) => {
+									try {
+										const schema = JSON.parse(jsonString);
+										setEndpointRequestBody((prev) => ({
+											...prev,
+											[endpointId]: schema
+										}));
+										setBannerVisible(true);
+									} catch {}
+								},
+								onResponseContentChange: (endpointId, jsonString) => {
+									try {
+										const schema = JSON.parse(jsonString);
+										setEndpointResponseBody((prev) => ({
+											...prev,
+											[endpointId]: schema
+										}));
+										setBannerVisible(true);
+									} catch {}
+								},
+								requestBodySchemas: endpointRequestBody,
+								responseBodySchemas: endpointResponseBody
 							}, resetKey)
 						})
 					] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
@@ -9796,7 +10017,29 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 									[endpointId]: prev[endpointId]?.filter((_, i) => i !== idx) ?? []
 								}));
 								setBannerVisible(true);
-							}
+							},
+							onRequestContentChange: (endpointId, jsonString) => {
+								try {
+									const schema = JSON.parse(jsonString);
+									setEndpointRequestBody((prev) => ({
+										...prev,
+										[endpointId]: schema
+									}));
+									setBannerVisible(true);
+								} catch {}
+							},
+							onResponseContentChange: (endpointId, jsonString) => {
+								try {
+									const schema = JSON.parse(jsonString);
+									setEndpointResponseBody((prev) => ({
+										...prev,
+										[endpointId]: schema
+									}));
+									setBannerVisible(true);
+								} catch {}
+							},
+							requestBodySchemas: endpointRequestBody,
+							responseBodySchemas: endpointResponseBody
 						}, resetKey)
 					] })
 				})]