@blaaiz/docs-core 0.1.0

package/dist/ui/api-try-it.cjs

@@ -0,0 +1,654 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var reactDom = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/ui/clipboard.ts
+function legacyCopy(text) {
+  try {
+    const area = document.createElement("textarea");
+    area.value = text;
+    area.style.position = "fixed";
+    area.style.opacity = "0";
+    document.body.appendChild(area);
+    area.select();
+    const ok = document.execCommand("copy");
+    document.body.removeChild(area);
+    return ok;
+  } catch {
+    return false;
+  }
+}
+async function copyToClipboard(text) {
+  const clip = navigator.clipboard;
+  if (typeof clip?.writeText === "function") {
+    try {
+      await clip.writeText(text);
+      return true;
+    } catch {
+    }
+  }
+  return legacyCopy(text);
+}
+var GLYPHS = {
+  house: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 22V12h6v10" })
+  ] }),
+  book: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" }),
+  code: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m16 18 6-6-6-6" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m8 6-6 6 6 6" })
+  ] }),
+  rocket: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91 0z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" })
+  ] }),
+  terminal: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m4 17 6-6-6-6" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 19h8" })
+  ] }),
+  wallet: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4" })
+  ] }),
+  key: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m21 2-9.6 9.6" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "7.5", cy: "15.5", r: "5.5" })
+  ] }),
+  webhook: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8" })
+  ] }),
+  globe: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 12h20" })
+  ] }),
+  mail: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" })
+  ] }),
+  user: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "8", r: "4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 21a8 8 0 0 1 16 0" })
+  ] }),
+  lock: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+  ] }),
+  /** A circled `i` — an informational note, and the generic error state. */
+  info: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 8v4M12 16h.01", strokeLinecap: "round" })
+  ] }),
+  /** A warning triangle — a caution, and the `500` screen. */
+  alert: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 9v4M12 17h.01", strokeLinecap: "round" })
+  ] }),
+  /** A light bulb — a tip. */
+  bulb: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.1V17h6v-.2c0-.8.4-1.6 1-2.1A7 7 0 0 0 12 2Z" }),
+  /** A circle with a cross — the `404` screen. */
+  crossCircle: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m14.31 8-1.31 2.4M9.69 8l4.62 8M14.31 16 9.69 8", strokeLinecap: "round" })
+  ] }),
+  /** Struck-through signal bars — the offline screen. */
+  offline: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12.55a11 11 0 0 1 14 0M8.5 16.11a6 6 0 0 1 7 0M12 20h.01", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m2 2 20 20", strokeLinecap: "round" })
+  ] }),
+  copy: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 9h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2ZM5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" }),
+  check: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }),
+  chevronDown: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" }),
+  /** Stacked chevrons — a value this control switches between. */
+  chevronUpDown: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m7 15 5 5 5-5M7 9l5-5 5 5" }),
+  /** An open arc — one turn of a loading spinner. */
+  spinner: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56", strokeLinecap: "round" }),
+  markdown: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "5", width: "20", height: "14", rx: "2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 15V9l3 3 3-3v6M17 9v4m0 0 2-2m-2 2-2-2" })
+  ] })
+};
+function strokeIcon(name, options = {}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      ...options.className === void 0 ? {} : { className: options.className },
+      ...options.size === void 0 ? {} : { width: options.size, height: options.size },
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: options.strokeWidth ?? 2,
+      ...options.rounded ? { strokeLinecap: "round", strokeLinejoin: "round" } : {},
+      "aria-hidden": "true",
+      children: GLYPHS[name]
+    },
+    options.key
+  );
+}
+function filledIcon(path, options = {}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      ...options.className === void 0 ? {} : { className: options.className },
+      ...options.size === void 0 ? {} : { width: options.size, height: options.size },
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: path })
+    },
+    options.key
+  );
+}
+var PLAY_PATH = "M8 5v14l11-7z";
+function chevronUpDownIcon() {
+  return strokeIcon("chevronUpDown", { rounded: true });
+}
+function playIcon() {
+  return filledIcon(PLAY_PATH);
+}
+function spinnerIcon() {
+  return strokeIcon("spinner", { strokeWidth: 2.5, className: "api-tryit-spin" });
+}
+function copyIcon() {
+  return strokeIcon("copy");
+}
+function checkIcon() {
+  return strokeIcon("check", { strokeWidth: 2.5, rounded: true });
+}
+var ENUM_CARD = 'div[class*="prose-no-margin"] > div[class*="mt-2"][class*="flex-row"] > div[class*="flex-col"][class*="bg-fd-secondary"]';
+var enumMenuUsers = 0;
+var detachEnumMenus = null;
+function installEnumMenus() {
+  const closeAll = (except) => {
+    document.querySelectorAll(`${ENUM_CARD}[data-open]`).forEach((card) => {
+      if (card !== except) {
+        card.removeAttribute("data-open");
+      }
+    });
+  };
+  const onClick = (event) => {
+    const target = event.target;
+    const card = target?.closest(ENUM_CARD) ?? null;
+    if (card && target?.closest("ul") && card.hasAttribute("data-open")) {
+      return;
+    }
+    closeAll(card);
+    card?.toggleAttribute("data-open");
+  };
+  const onKey = (event) => {
+    if (event.key === "Escape") {
+      closeAll();
+    }
+  };
+  document.addEventListener("click", onClick);
+  document.addEventListener("keydown", onKey);
+  detachEnumMenus = () => {
+    document.removeEventListener("click", onClick);
+    document.removeEventListener("keydown", onKey);
+    closeAll();
+  };
+}
+function useEnumMenus() {
+  react.useEffect(() => {
+    enumMenuUsers += 1;
+    if (enumMenuUsers === 1) {
+      installEnumMenus();
+    }
+    return () => {
+      enumMenuUsers -= 1;
+      if (enumMenuUsers === 0) {
+        detachEnumMenus?.();
+        detachEnumMenus = null;
+      }
+    };
+  }, []);
+}
+function pathSegments(path) {
+  const parts = path.split("/").filter(Boolean);
+  return parts.map((part, index) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "api-tryit-seg", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "api-tryit-slash", children: "/" }),
+    part
+  ] }, `${String(index)}-${part}`));
+}
+function RequestBar({
+  method,
+  path,
+  serverUrl,
+  servers,
+  onSelectServer,
+  formRef
+}) {
+  const [baseUrl, setBaseUrl] = react.useState((serverUrl ?? "").replace(/\/$/, ""));
+  const [copied, setCopied] = react.useState(false);
+  const [loading, setLoading] = react.useState(false);
+  const [menuOpen, setMenuOpen] = react.useState(false);
+  const [menuAt, setMenuAt] = react.useState(null);
+  const envRef = react.useRef(null);
+  const menuRef = react.useRef(null);
+  const inline = onSelectServer && servers && servers.length > 1 ? { list: servers, select: onSelectServer } : null;
+  react.useEffect(() => {
+    if (!menuOpen) {
+      return;
+    }
+    const onDown = (event) => {
+      const target = event.target;
+      if (!envRef.current?.contains(target) && !menuRef.current?.contains(target)) {
+        setMenuOpen(false);
+      }
+    };
+    const onKey = (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        setMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey, true);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey, true);
+    };
+  }, [menuOpen]);
+  react.useEffect(() => {
+    const root = formRef.current;
+    if (!root) {
+      return;
+    }
+    const read = () => {
+      const text = root.querySelector("form > button code")?.textContent?.trim();
+      if (text) {
+        setBaseUrl(text.replace(/\/$/, ""));
+      }
+      const send = root.querySelector("form > div > button");
+      setLoading(send?.hasAttribute("disabled") ?? false);
+    };
+    read();
+    const observer = new MutationObserver(read);
+    observer.observe(root, {
+      subtree: true,
+      childList: true,
+      characterData: true,
+      attributes: true,
+      attributeFilter: ["disabled"]
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, [formRef]);
+  const clickHidden = (selector) => {
+    const el = formRef.current?.querySelector(selector);
+    el?.click();
+  };
+  const fullUrl = `${baseUrl}/${path.replace(/^\/+/, "")}`;
+  const copyUrl = () => {
+    const flash = () => {
+      setCopied(true);
+      setTimeout(() => {
+        setCopied(false);
+      }, 1600);
+    };
+    void copyToClipboard(fullUrl).then((ok) => {
+      if (ok) {
+        flash();
+      }
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "api-tryit-reqline not-prose", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "api-tryit-reqbar", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "api-tryit-reqmethod", "data-method": method.toLowerCase(), children: method.toUpperCase() }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "api-tryit-reqscroll", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "api-tryit-envwrap", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              ref: envRef,
+              className: "api-tryit-env",
+              "aria-label": "Change server",
+              "aria-haspopup": inline ? "listbox" : "dialog",
+              "aria-expanded": inline ? menuOpen : void 0,
+              onClick: () => {
+                if (inline) {
+                  const rect = envRef.current?.getBoundingClientRect();
+                  if (rect) {
+                    setMenuAt({ top: rect.bottom + 7, left: rect.left - 8 });
+                  }
+                  setMenuOpen((prev) => !prev);
+                } else {
+                  clickHidden("form > button");
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "api-tryit-baseurl", children: baseUrl }),
+                chevronUpDownIcon()
+              ]
+            }
+          ),
+          inline && menuOpen && menuAt ? reactDom.createPortal(
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "ul",
+              {
+                ref: menuRef,
+                className: "api-tryit-envmenu",
+                role: "listbox",
+                "aria-label": "API server",
+                style: { top: menuAt.top, left: menuAt.left },
+                children: inline.list.map((option) => {
+                  const active = option.url.replace(/\/$/, "") === baseUrl;
+                  return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      role: "option",
+                      "aria-selected": active,
+                      className: "api-tryit-envitem",
+                      "data-active": active ? "" : void 0,
+                      onClick: () => {
+                        inline.select(option.url);
+                        setMenuOpen(false);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "api-tryit-envcheck", children: active ? checkIcon() : null }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "api-tryit-envurl", children: option.url })
+                      ]
+                    }
+                  ) }, option.url);
+                })
+              }
+            ),
+            document.body
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "api-tryit-reqpath", children: pathSegments(path) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "api-tryit-copy",
+          "aria-label": copied ? "Copied" : "Copy URL",
+          "data-copied": copied ? "" : void 0,
+          onClick: copyUrl,
+          children: copied ? checkIcon() : copyIcon()
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: "api-tryit-send",
+        "data-loading": loading ? "" : void 0,
+        disabled: loading,
+        onClick: () => {
+          clickHidden("form > div > button");
+        },
+        children: [
+          loading ? "Sending" : "Send",
+          loading ? spinnerIcon() : playIcon()
+        ]
+      }
+    )
+  ] });
+}
+function ApiTryIt({
+  method,
+  path,
+  serverUrl,
+  servers,
+  onSelectServer,
+  children,
+  example
+}) {
+  const [open, setOpen] = react.useState(false);
+  const [mounted, setMounted] = react.useState(false);
+  const formRef = react.useRef(null);
+  useEnumMenus();
+  react.useEffect(() => {
+    setMounted(true);
+  }, []);
+  react.useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onKey = (event) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    document.body.style.overflow = "hidden";
+    document.body.classList.add("api-tryit-open");
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = "";
+      document.body.classList.remove("api-tryit-open");
+    };
+  }, [open]);
+  const host = serverUrl ? serverUrl.replace(/^https?:\/\//, "").replace(/\/$/, "") : null;
+  const onBackdrop = (event) => {
+    if (event.target === event.currentTarget) {
+      setOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "api-tryit-bar not-prose", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "api-tryit-method", "data-method": method.toLowerCase(), children: method.toUpperCase() }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "api-tryit-url", children: [
+        host ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "api-tryit-host", children: host }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "api-tryit-path", children: path })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          className: "api-tryit-btn",
+          onClick: () => {
+            setOpen(true);
+          },
+          children: [
+            "Try it",
+            filledIcon(PLAY_PATH, { size: 11 })
+          ]
+        }
+      )
+    ] }),
+    mounted && open ? reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "api-tryit-overlay", onClick: onBackdrop, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "api-tryit-modal",
+          "data-columns": example ? "2" : "1",
+          role: "dialog",
+          "aria-label": "API playground",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "api-tryit-form", ref: formRef, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                RequestBar,
+                {
+                  method,
+                  path,
+                  serverUrl,
+                  servers,
+                  onSelectServer,
+                  formRef
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "api-tryit-scroll", children })
+            ] }),
+            example ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "api-tryit-example", children: example }) : null
+          ]
+        }
+      ) }),
+      document.body
+    ) : null
+  ] });
+}
+ApiTryIt.acceptsExample = true;
+function tokenizeJson(source) {
+  const pattern = /("(?:\\.|[^"\\])*")(\s*:)?|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|\b(true|false|null)\b|([{}[\],:])/g;
+  const tokens = [];
+  let last = 0;
+  let match;
+  while ((match = pattern.exec(source)) !== null) {
+    if (match.index > last) {
+      tokens.push({ text: source.slice(last, match.index) });
+    }
+    if (match[1] !== void 0) {
+      if (match[2] !== void 0) {
+        tokens.push({ text: match[1], kind: "key" });
+        tokens.push({ text: match[2], kind: "punctuation" });
+      } else {
+        tokens.push({ text: match[1], kind: "string" });
+      }
+    } else if (match[3] !== void 0) {
+      tokens.push({ text: match[3], kind: "number" });
+    } else if (match[4] !== void 0) {
+      tokens.push({ text: match[4], kind: "literal" });
+    } else if (match[5] !== void 0) {
+      tokens.push({ text: match[5], kind: "punctuation" });
+    }
+    last = pattern.lastIndex;
+  }
+  if (last < source.length) {
+    tokens.push({ text: source.slice(last) });
+  }
+  return tokens;
+}
+function setReactTextareaValue(el, next) {
+  const descriptor = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, "value");
+  const setter = descriptor?.set;
+  setter?.call(el, next);
+  el.dispatchEvent(new Event("input", { bubbles: true }));
+}
+function JsonBodyEditor({ sectionRef }) {
+  const sourceRef = react.useRef(null);
+  const [value, setValue] = react.useState(null);
+  const [error, setError] = react.useState(null);
+  const [copied, setCopied] = react.useState(false);
+  react.useEffect(() => {
+    const root = sectionRef.current;
+    if (!root) {
+      return;
+    }
+    const read = () => {
+      const el = root.querySelector("textarea:not(.api-json-input)");
+      sourceRef.current = el;
+      setValue(el ? el.value : null);
+    };
+    read();
+    const observer = new MutationObserver(read);
+    observer.observe(root, { subtree: true, childList: true });
+    return () => {
+      observer.disconnect();
+    };
+  }, [sectionRef]);
+  if (value === null) {
+    return null;
+  }
+  const push = (next) => {
+    setValue(next);
+    try {
+      JSON.parse(next);
+      setError(null);
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "Invalid JSON.");
+    }
+    if (sourceRef.current) {
+      setReactTextareaValue(sourceRef.current, next);
+    }
+  };
+  const format = () => {
+    try {
+      push(JSON.stringify(JSON.parse(value), null, 2));
+    } catch {
+    }
+  };
+  const copy = () => {
+    const flash = () => {
+      setCopied(true);
+      setTimeout(() => {
+        setCopied(false);
+      }, 1600);
+    };
+    void copyToClipboard(value).then((ok) => {
+      if (ok) {
+        flash();
+      }
+    });
+  };
+  const onKeyDown = (event) => {
+    if (event.key !== "Tab") {
+      return;
+    }
+    event.preventDefault();
+    const el = event.currentTarget;
+    const { selectionStart: start, selectionEnd: end } = el;
+    const next = `${value.slice(0, start)}  ${value.slice(end)}`;
+    push(next);
+    requestAnimationFrame(() => {
+      el.selectionStart = el.selectionEnd = start + 2;
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "api-json", "data-invalid": error ? "" : void 0, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "api-json-toolbar", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "api-json-action",
+          onClick: format,
+          disabled: error !== null,
+          children: "Format"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "api-json-action", onClick: copy, children: copied ? "Copied" : "Copy" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "api-json-editor", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("pre", { className: "api-json-mirror", "aria-hidden": "true", children: [
+        tokenizeJson(value).map((token, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { "data-token": token.kind, children: token.text }, `${String(index)}-${token.kind ?? "plain"}`)),
+        "\n"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          className: "api-json-input",
+          value,
+          spellCheck: false,
+          "aria-label": "Request body JSON",
+          onChange: (event) => {
+            push(event.target.value);
+          },
+          onKeyDown
+        }
+      )
+    ] }),
+    error ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "api-json-error", role: "alert", children: error }) : null
+  ] });
+}
+function ApiPlaygroundSection({
+  title,
+  type,
+  children
+}) {
+  const sectionRef = react.useRef(null);
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "api-tryit-section", "data-type": type, ref: sectionRef, children: [
+    title ? /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "api-tryit-section-title", children: title }) : null,
+    children,
+    type === "body" ? /* @__PURE__ */ jsxRuntime.jsx(JsonBodyEditor, { sectionRef }) : null
+  ] });
+}
+
+exports.ApiPlaygroundSection = ApiPlaygroundSection;
+exports.ApiTryIt = ApiTryIt;
+//# sourceMappingURL=api-try-it.cjs.map
+//# sourceMappingURL=api-try-it.cjs.map