rapidoc 11.0.1 → 12.1.0

package/src/utils/auto-color-scheme.js

@@ -0,0 +1,99 @@
+/**
+ * Lit reactive controller behind color-scheme="auto" on <rapi-doc> and <rapi-doc-mini>.
+ *
+ * "auto" follows the host page: it reads the page's CSS `color-scheme` (as set by Starlight and most
+ * theme toggles, e.g. `:root[data-theme='light'] { color-scheme: light }`), or the OS preference when
+ * the page declares none or both. The resolved 'dark' / 'light' is written to the element's
+ * color-scheme property and attribute, which drive the styles, and is re-resolved when attributes
+ * on <html> or <body> change (data-theme, class, style) or the OS preference changes.
+ *
+ * Setting color-scheme to any other value later turns auto mode off.
+ */
+export class AutoColorSchemeController {
+  constructor(host) {
+    this.host = host;
+    this.active = false;
+    this.resolved = "";
+    this.observer = null;
+    this.media = null;
+    this.onPageChange = () => this.apply();
+    host.addController(this);
+  }
+
+  hostConnected() {
+    if (this.host.colorScheme === "auto") {
+      this.enable();
+    } else if (this.active) {
+      this.watch(true);
+      this.apply();
+    }
+  }
+
+  hostDisconnected() {
+    this.watch(false);
+  }
+
+  hostUpdate() {
+    const value = this.host.colorScheme;
+    if (value === "auto") {
+      this.enable();
+    } else if (this.active && value !== this.resolved) {
+      // An explicit value from the page or a script
+      this.active = false;
+      this.watch(false);
+    }
+  }
+
+  enable() {
+    this.active = true;
+    this.watch(true);
+    this.apply();
+  }
+
+  apply() {
+    if (!this.active || typeof window === "undefined") {
+      return;
+    }
+    const scheme = resolvePageColorScheme(this.host);
+    this.resolved = scheme;
+    if (this.host.colorScheme !== scheme) {
+      this.host.colorScheme = scheme;
+    }
+    // Set the attribute now (property reflection is async) so the styles switch immediately.
+    if (this.host.getAttribute("color-scheme") !== scheme) {
+      this.host.setAttribute("color-scheme", scheme);
+    }
+  }
+
+  watch(enable) {
+    this.observer?.disconnect();
+    this.observer = null;
+    this.media?.removeEventListener("change", this.onPageChange);
+    this.media = null;
+    if (!enable || typeof window === "undefined") {
+      return;
+    }
+    this.observer = new MutationObserver(this.onPageChange);
+    this.observer.observe(document.documentElement, { attributes: true });
+    if (document.body) {
+      this.observer.observe(document.body, { attributes: true });
+    }
+    this.media = window.matchMedia("(prefers-color-scheme: light)");
+    this.media.addEventListener("change", this.onPageChange);
+  }
+}
+
+/**
+ * 'dark' or 'light' for the page around `el`. Reads the parent's CSS color-scheme: the element sets
+ * color-scheme on itself from its own attribute.
+ */
+export function resolvePageColorScheme(el) {
+  const pageEl = el.parentElement || el.getRootNode().host || document.documentElement;
+  const pageScheme = getComputedStyle(pageEl).colorScheme || "";
+  const hasDark = /\bdark\b/.test(pageScheme);
+  const hasLight = /\blight\b/.test(pageScheme);
+  if (hasDark !== hasLight) {
+    return hasDark ? "dark" : "light";
+  }
+  return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+}

package/src/utils/bind-navbar.js

@@ -0,0 +1,175 @@
+import {
+  expandCollapseNavBarTag,
+  expandCollapseNavBarTagGroup,
+  expandParentNavContainers,
+} from "../templates/navbar-template.js";
+
+/**
+ * Connects an external navigation bar (e.g. in Astro, Next.js, or Starlight portals)
+ * to a <rapi-doc> component, reusing RapiDoc's internal accordion mechanics,
+ * scroll controller, and active item tracking.
+ *
+ * @param {HTMLElement|string} sidebar - Sidebar element or selector
+ * @param {HTMLElement|string} rapiDoc - <rapi-doc> element or selector
+ * @param {object} [options]
+ * @param {string} [options.activeClass='active'] - Class applied to active navigation item
+ * @param {boolean} [options.updateHistory=true] - Whether to sync window history
+ * @returns {() => void} Cleanup unbind function
+ */
+export function bindNavBar(sidebar, rapiDoc, options = {}) {
+  const sidebarEl = typeof sidebar === "string" ? document.querySelector(sidebar) : sidebar;
+  const rapiDocEl = typeof rapiDoc === "string" ? document.querySelector(rapiDoc) : rapiDoc;
+
+  if (!sidebarEl || typeof window === "undefined") {
+    return () => {};
+  }
+
+  const activeClass = options.activeClass || "active";
+  const updateHistory = options.updateHistory !== false;
+
+  // 1. Resolve matching navigation link in sidebar
+  function findMatchingLink(targetId) {
+    if (!targetId) return null;
+    return (
+      sidebarEl.querySelector(`#link-${CSS.escape(targetId)}`) ||
+      sidebarEl.querySelector(`.nav-bar-path[data-content-id="${CSS.escape(targetId)}"]`) ||
+      sidebarEl.querySelector(`.nav-bar-path[data-op-slug="${CSS.escape(targetId)}"]`) ||
+      sidebarEl.querySelector(`#link-${CSS.escape(targetId.replace(/^[a-z0-9_-]+--/, ""))}`) ||
+      (targetId === "overview" ? sidebarEl.querySelector("#link-overview, .nav-bar-info") : null)
+    );
+  }
+
+  // 2. Set active navigation link and auto-expand parent containers
+  function setActiveNavId(targetId, shouldUpdateHistory = true) {
+    const link = findMatchingLink(targetId);
+    if (!link || link.classList.contains(activeClass)) return;
+
+    sidebarEl.querySelectorAll("." + activeClass).forEach((el) => el.classList.remove(activeClass));
+    link.classList.add(activeClass);
+
+    // Reuse RapiDoc's native hierarchy expander
+    expandParentNavContainers(link);
+
+    if (shouldUpdateHistory && updateHistory) {
+      const href = link.getAttribute("href");
+      if (href) window.history.replaceState(null, "", href);
+    }
+
+    // Scroll active item into view inside the sidebar container
+    const navScroll = link.closest(".nav-scroll");
+    if (navScroll) {
+      const itemRect = link.getBoundingClientRect();
+      const scrollRect = navScroll.getBoundingClientRect();
+      if (itemRect.top < scrollRect.top + 20 || itemRect.bottom > scrollRect.bottom - 40) {
+        const targetTop = itemRect.top - scrollRect.top + navScroll.scrollTop - 40;
+        navScroll.scrollTo({ top: targetTop, behavior: "smooth" });
+      }
+    }
+  }
+
+  // 3. Delegated Click Listener (reusing RapiDoc's accordion handlers)
+  const handleClick = (e) => {
+    const navEl =
+      e.target.closest("[data-action]") || e.target.closest(".nav-bar-path, .nav-bar-info");
+    if (!navEl) return;
+
+    const action = navEl.dataset?.action;
+    if (action === "expand-collapse-tag") {
+      expandCollapseNavBarTag(navEl, "toggle");
+    } else if (action === "expand-collapse-tag-group") {
+      expandCollapseNavBarTagGroup(navEl, "toggle");
+    } else if (
+      action === "navigate" ||
+      navEl.classList.contains("nav-bar-path") ||
+      navEl.classList.contains("nav-bar-info")
+    ) {
+      const href = navEl.getAttribute("href") || navEl.getAttribute("data-tag-href");
+      const hashIdx = href ? href.indexOf("#") : -1;
+      const elementId =
+        (hashIdx !== -1 ? href.substring(hashIdx + 1) : href) ||
+        navEl.getAttribute("data-content-id") ||
+        navEl.getAttribute("data-op-slug") ||
+        navEl.id?.replace(/^link-/, "");
+
+      if (elementId && rapiDocEl && typeof rapiDocEl.scrollToPath === "function") {
+        e.preventDefault();
+        setActiveNavId(elementId, false);
+        rapiDocEl.scrollToPath(elementId);
+        if (updateHistory && href) {
+          window.history.pushState(null, "", href);
+        }
+      }
+    }
+  };
+  sidebarEl.addEventListener("click", handleClick);
+
+  // 4. Sidebar Search Filter
+  const filterInput = sidebarEl.querySelector(".portal-filter-input, .nav-bar-search-input");
+  let handleFilter = null;
+  if (filterInput) {
+    handleFilter = (e) => {
+      const query = (e.target.value || "").toLowerCase().trim();
+      sidebarEl.querySelectorAll(".nav-bar-path, .portal-sidebar-op-item").forEach((item) => {
+        item.style.display = item.textContent.toLowerCase().includes(query) ? "flex" : "none";
+      });
+      sidebarEl.querySelectorAll(".nav-bar-tag-and-paths").forEach((tag) => {
+        const hasVisible = tag.querySelector(
+          '.nav-bar-path:not([style*="display: none"]), .portal-sidebar-op-item:not([style*="display: none"])',
+        );
+        tag.style.display = hasVisible || !query ? "" : "none";
+        if (query && hasVisible) expandCollapseNavBarTag(tag, "expand");
+      });
+      sidebarEl.querySelectorAll(".nav-bar-tag-group").forEach((group) => {
+        const hasVisible = group.querySelector(
+          '.nav-bar-path:not([style*="display: none"]), .portal-sidebar-op-item:not([style*="display: none"])',
+        );
+        group.style.display = hasVisible || !query ? "" : "none";
+        if (query && hasVisible) expandCollapseNavBarTagGroup(group, "expand");
+      });
+    };
+    filterInput.addEventListener("input", handleFilter);
+  }
+
+  // 5. Native rapi-doc nav-active-change event listener
+  const handleNavActiveChange = (e) => {
+    const targetId = e.detail?.operationId || e.detail?.id || e.detail?.elementId;
+    if (targetId) setActiveNavId(targetId, true);
+  };
+  if (rapiDocEl) {
+    rapiDocEl.addEventListener("nav-active-change", handleNavActiveChange);
+  }
+
+  // 6. Popstate / hash sync
+  const handleHashSync = () => {
+    if (window.location.hash) {
+      const hash = window.location.hash.replace(/^#/, "");
+      if (hash) {
+        setActiveNavId(hash, false);
+        if (rapiDocEl && typeof rapiDocEl.scrollToPath === "function") {
+          rapiDocEl.scrollToPath(hash);
+        }
+      }
+    }
+  };
+  window.addEventListener("popstate", handleHashSync);
+  window.addEventListener("hashchange", handleHashSync);
+
+  // Initial sync on load and spec load
+  if (rapiDocEl) {
+    rapiDocEl.addEventListener("spec-loaded", () => setTimeout(handleHashSync, 80));
+    if (typeof rapiDocEl.updateComplete?.then === "function") {
+      rapiDocEl.updateComplete.then(() => setTimeout(handleHashSync, 50));
+    }
+  }
+  setTimeout(handleHashSync, 150);
+
+  return () => {
+    sidebarEl.removeEventListener("click", handleClick);
+    if (filterInput && handleFilter) filterInput.removeEventListener("input", handleFilter);
+    if (rapiDocEl) rapiDocEl.removeEventListener("nav-active-change", handleNavActiveChange);
+    window.removeEventListener("popstate", handleHashSync);
+    window.removeEventListener("hashchange", handleHashSync);
+  };
+}
+
+export default bindNavBar;

package/src/utils/color-utils.js

@@ -0,0 +1,59 @@
+export default {
+  color: {
+    inputReverseFg: "#fff",
+    inputReverseBg: "#333",
+    headerBg: "#444",
+    getRgb(hex) {
+      if (hex.indexOf("#") === 0) {
+        hex = hex.slice(1, 7);
+      }
+      // convert 3-digit hex to 6-digits.
+      if (hex.length === 3 || hex.length === 4) {
+        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+      }
+      if (hex.length !== 6) {
+        throw new Error("Invalid HEX color.");
+      }
+      return {
+        r: parseInt(hex.slice(0, 2), 16),
+        g: parseInt(hex.slice(2, 4), 16),
+        b: parseInt(hex.slice(4, 6), 16),
+      };
+    },
+    luminanace(hexColorCode) {
+      const rgb = this.getRgb(hexColorCode);
+      return rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114;
+    },
+    invert(hexColorCode) {
+      return this.luminanace(hexColorCode) > 135 ? "#000" : "#fff"; // compare with `>=128`, but giving little more preference to white over black
+    },
+    opacity(hex, opacity) {
+      const rgb = this.getRgb(hex);
+      return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity})`;
+    },
+    brightness(hex, amt) {
+      const rgb = this.getRgb(hex);
+      rgb.r += amt;
+      rgb.g += amt;
+      rgb.b += amt;
+      if (rgb.r > 255) rgb.r = 255;
+      else if (rgb.r < 0) rgb.r = 0;
+
+      if (rgb.g > 255) rgb.g = 255;
+      else if (rgb.g < 0) rgb.g = 0;
+
+      if (rgb.b > 255) rgb.b = 255;
+      else if (rgb.b < 0) rgb.b = 0;
+      return `#${rgb.r.toString(16).padStart(2, "0")}${rgb.g.toString(16).padStart(2, "0")}${rgb.b.toString(16).padStart(2, "0")}`;
+    },
+    hasGoodContrast(hexColorCode1, hexColorCode2) {
+      const lum1 = this.luminanace(hexColorCode1);
+      const lum2 = this.luminanace(hexColorCode2);
+      return lum1 - lum2;
+    },
+  },
+};
+
+export function isValidHexColor(colorCode) {
+  return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8}|[A-Fa-f0-9]{4})$/i.test(colorCode);
+}

package/src/utils/common-utils.js

@@ -0,0 +1,191 @@
+/* For Delayed Event Handler Execution */
+export function debounce(fn, delay) {
+  let timeoutID = null;
+  return (...args) => {
+    clearTimeout(timeoutID);
+    const that = this;
+    timeoutID = setTimeout(() => {
+      fn.apply(that, args);
+    }, delay);
+  };
+}
+
+export const invalidCharsRegEx = /[\s#:?&={}]/g; // used for generating valid html element ids by replacing the invalid chars with hyphen (-)
+export const rapidocApiKey = "_rapidoc_api_key";
+
+export function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export function copyToClipboard(data, e) {
+  const btnEl = e.target;
+  const textArea = document.createElement("textarea");
+  textArea.value = data;
+  textArea.style.position = "fixed"; // avoid scrolling to bottom
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+  try {
+    document.execCommand("copy");
+    btnEl.innerText = "Copied";
+    setTimeout(() => {
+      btnEl.innerText = "Copy";
+    }, 5000);
+  } catch (err) {
+    console.error("Unable to copy", err);
+  }
+  document.body.removeChild(textArea);
+}
+
+export function getBaseUrlFromUrl(url) {
+  const pathArray = url.split("/");
+  return `${pathArray[0]}//${pathArray[2]}`;
+}
+
+export async function wait(ms) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+
+export function getMatchedComponents(searchVal, component) {
+  return component.name.toLowerCase().includes(searchVal.toLowerCase());
+}
+
+export function getMatchedPaths(searchVal = "", path, tagName = "") {
+  if (!searchVal) {
+    return true;
+  }
+  const stringToSearch =
+    `${path.method} ${path.path} ${path.summary || ""} ${path.description || ""} ${path.operationId || ""} ${tagName}`.toLowerCase();
+  return stringToSearch.includes(searchVal.toLowerCase());
+}
+
+export function isInternalOrHidden(item) {
+  if (!item || typeof item !== "object") return false;
+  return (
+    item.xInternal === true ||
+    item.xInternal === "true" ||
+    item.xHidden === true ||
+    item.xHidden === "true" ||
+    item["x-internal"] === true ||
+    item["x-internal"] === "true" ||
+    item["x-hidden"] === true ||
+    item["x-hidden"] === "true" ||
+    item.rawOperation?.["x-internal"] === true ||
+    item.rawOperation?.["x-internal"] === "true" ||
+    item.rawOperation?.["x-hidden"] === true ||
+    item.rawOperation?.["x-hidden"] === "true"
+  );
+}
+
+export function schemaKeys(schemaProps, result = new Set()) {
+  if (!schemaProps) {
+    return result;
+  }
+  Object.keys(schemaProps).forEach((key) => {
+    result.add(key);
+    if (schemaProps[key].properties) {
+      schemaKeys(schemaProps[key].properties, result);
+    } else if (schemaProps[key].items?.properties) {
+      schemaKeys(schemaProps[key].items?.properties, result);
+    }
+  });
+  return result;
+}
+
+export function advancedSearch(searchVal, allSpecTags, searchOptions = []) {
+  if (!searchVal.trim() || searchOptions.length === 0) {
+    return;
+  }
+
+  const pathsMatched = [];
+  allSpecTags.forEach((tag) => {
+    tag.paths.forEach((path) => {
+      let stringToSearch = "";
+      if (searchOptions.includes("search-api-path")) {
+        stringToSearch = path.path;
+      }
+      if (searchOptions.includes("search-api-descr")) {
+        stringToSearch = `${stringToSearch} ${(path.summary || "") + (path.description || "")}`;
+      }
+      if (searchOptions.includes("search-api-params")) {
+        stringToSearch = `${stringToSearch} ${path.parameters?.map((v) => v.name).join(" ") || ""}`;
+      }
+
+      if (searchOptions.includes("search-api-request-body") && path.requestBody) {
+        let schemaKeySet = new Set();
+        for (const contentType in path.requestBody?.content) {
+          if (path.requestBody.content[contentType].schema?.properties) {
+            schemaKeySet = schemaKeys(path.requestBody.content[contentType].schema?.properties);
+          }
+          stringToSearch = `${stringToSearch} ${[...schemaKeySet].join(" ")}`;
+        }
+      }
+
+      if (searchOptions.includes("search-api-resp-descr")) {
+        stringToSearch = `${stringToSearch} ${Object.values(path.responses)
+          .map((v) => v.description || "")
+          .join(" ")}`;
+      }
+
+      if (stringToSearch.toLowerCase().includes(searchVal.trim().toLowerCase())) {
+        pathsMatched.push({
+          elementId: path.elementId,
+          method: path.method,
+          path: path.path,
+          summary: path.summary || path.description || "",
+          deprecated: path.deprecated,
+        });
+      }
+    });
+  });
+  return pathsMatched;
+}
+
+/*
+export function prettyXml(sourceXmlString) {
+  const xmlDoc = new DOMParser().parseFromString(sourceXmlString, 'text/xml');
+  const xsltDoc = new DOMParser().parseFromString([
+    // describes how we want to modify the XML - indent everything
+    `<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+      <xsl:strip-space elements="*"/>
+        <xsl:template match="para[content-style][not(text())]">
+          <xsl:value-of select="normalize-space(.)"/>
+        </xsl:template>
+        <xsl:template match="node()|@*">
+          <xsl:copy><xsl:apply-templates select="node()|@*"/></xsl:copy>
+        </xsl:template>
+        <xsl:output indent="yes"/>
+      </xsl:stylesheet>`,
+  ].join('\n'), 'application/xml');
+  const xsltProcessor = new XSLTProcessor();
+  xsltProcessor.importStylesheet(xsltDoc);
+  const resultDoc = xsltProcessor.transformToDocument(xmlDoc);
+  return new XMLSerializer().serializeToString(resultDoc);
+}
+*/
+
+export function downloadResource(url, fileName) {
+  if (url) {
+    const a = document.createElement("a");
+    document.body.appendChild(a);
+    a.style = "display: none";
+    a.href = url;
+    a.download = fileName;
+    a.click();
+    a.remove();
+  }
+}
+
+export function viewResource(url) {
+  if (url) {
+    const a = document.createElement("a");
+    document.body.appendChild(a);
+    a.style = "display: none";
+    a.href = url;
+    a.target = "_blank";
+    a.click();
+    a.remove();
+  }
+}

package/src/utils/curl-utils.js

@@ -0,0 +1,126 @@
+/**
+ * Normalizes header values by deduplicating comma-separated tokens (e.g. Accept headers).
+ *
+ * @param {string} value - Raw header value
+ * @returns {string} Deduplicated header value
+ */
+export function deduplicateHeaderValues(value) {
+  if (!value || typeof value !== "string") {
+    return value || "";
+  }
+  const seenValues = [];
+  return value
+    .split(",")
+    .map((val) => {
+      const trimmed = val.trim();
+      const normalizedValue = trimmed.toLowerCase();
+      if (seenValues.includes(normalizedValue)) {
+        return null;
+      }
+      seenValues.push(normalizedValue);
+      return trimmed;
+    })
+    .filter((val) => val !== null)
+    .join(", ");
+}
+
+/**
+ * Generates a clean, copyable cURL command string from request parameters.
+ * Pure utility decoupled from the DOM.
+ *
+ * @param {object} options
+ * @param {string} [options.method='GET'] - HTTP method (GET, POST, etc.)
+ * @param {string} options.url - Request URL
+ * @param {Headers|Map|Array<[string, string]>|object} [options.headers] - Request headers
+ * @param {URLSearchParams|FormData|File|string|object} [options.body] - Request body payload
+ * @param {string} [options.contentType=''] - Content type of the payload
+ * @param {Object<string, string>} [options.partContentTypes] - Content-Type of multipart parts, by field name
+ * @param {string} [options.baseLocation] - Optional base location to resolve relative URLs
+ * @returns {string} Formatted cURL snippet
+ */
+export function generateCurlCommand({
+  method = "GET",
+  url = "",
+  headers,
+  body,
+  contentType = "",
+  partContentTypes = {},
+  baseLocation = typeof location !== "undefined" ? location.href : "",
+} = {}) {
+  let curlUrl = url;
+  if (!url.startsWith("http://") && !url.startsWith("https://") && baseLocation) {
+    try {
+      curlUrl = new URL(url, baseLocation).href;
+    } catch {
+      curlUrl = url;
+    }
+  }
+
+  let curl = `curl -X ${method.toUpperCase()} "${curlUrl}" \\\n`;
+
+  // Process headers into key-value pairs with deduplicated comma values
+  const headerEntries = [];
+  if (headers instanceof Headers || (headers && typeof headers.forEach === "function")) {
+    headers.forEach((value, key) => {
+      headerEntries.push([key, deduplicateHeaderValues(value)]);
+    });
+  } else if (Array.isArray(headers)) {
+    headers.forEach(([key, value]) => {
+      headerEntries.push([key, deduplicateHeaderValues(value)]);
+    });
+  } else if (headers && typeof headers === "object") {
+    Object.entries(headers).forEach(([key, value]) => {
+      headerEntries.push([key, deduplicateHeaderValues(String(value))]);
+    });
+  }
+
+  let curlHeaders = headerEntries.map(([key, value]) => ` -H '${key}: ${value}'`).join("\\\n");
+  if (curlHeaders) {
+    curlHeaders = `${curlHeaders} \\\n`;
+  }
+
+  let curlData = "";
+  let curlForm = "";
+
+  if (typeof URLSearchParams !== "undefined" && body instanceof URLSearchParams) {
+    curlData = ` -d ${body.toString()} \\\n`;
+  } else if (typeof File !== "undefined" && body instanceof File) {
+    curlData = ` --data-binary @${body.name} \\\n`;
+  } else if (typeof FormData !== "undefined" && body instanceof FormData) {
+    curlForm = Array.from(body)
+      .map(([key, value]) => {
+        const type = partContentTypes?.[key] ? `;type=${partContentTypes[key]}` : "";
+        if (typeof File !== "undefined" && value instanceof File) {
+          return ` -F "${key}=@${value.name}${value.type ? "" : type}"`;
+        }
+        const sanitizedVal =
+          typeof value === "string" ? value.replace(/\\/g, "\\\\").replace(/"/g, '\\"') : value;
+        return ` -F "${key}=${sanitizedVal}${type}"`;
+      })
+      .join("\\\n");
+    if (curlForm) {
+      curlForm = `${curlForm} \\\n`;
+    }
+  } else if (body !== undefined && body !== null && body !== "") {
+    const rawBody = typeof body === "object" ? JSON.stringify(body) : String(body);
+    const isJson =
+      contentType.includes("json") ||
+      (rawBody.trim().startsWith("{") && rawBody.trim().endsWith("}"));
+
+    if (isJson) {
+      try {
+        const compactJson = JSON.stringify(JSON.parse(rawBody));
+        curlData = ` -d '${compactJson.replace(/'/g, "'\\''")}' \\\n`;
+      } catch {
+        // If JSON.parse fails, fall through to regular string escape
+      }
+    }
+
+    if (!curlData) {
+      curlData = ` -d '${rawBody.replace(/'/g, "'\"'\"'")}' \\\n`;
+    }
+  }
+
+  const result = `${curl}${curlHeaders}${curlData}${curlForm}`;
+  return result.endsWith(" \\\n") ? result.slice(0, -3) : result;
+}