zudoku 0.42.2 → 0.43.1

package/src/lib/components/navigation/SidebarCategory.tsx

@@ -2,11 +2,11 @@ import * as Collapsible from "@radix-ui/react-collapsible";
 import { deepEqual } from "fast-equals";
 import { ChevronRightIcon } from "lucide-react";
 import { memo, useEffect, useState } from "react";
-import { NavLink, useMatch } from "react-router";
+import { NavLink, useLocation, useMatch } from "react-router";
 import { Button } from "zudoku/ui/Button.js";
 import type { SidebarItemCategory } from "../../../config/validators/SidebarSchema.js";
 import { cn } from "../../util/cn.js";
-import { joinPath } from "../../util/joinPath.js";
+import { joinUrl } from "../../util/joinUrl.js";
 import { navigationListItem, SidebarItem } from "./SidebarItem.js";
 import { useIsCategoryOpen } from "./utils.js";
 
@@ -19,6 +19,7 @@ const SidebarCategoryInner = ({
 }) => {
   const isCategoryOpen = useIsCategoryOpen(category);
   const [hasInteracted, setHasInteracted] = useState(false);
+  const location = useLocation();
 
   const isCollapsible = category.collapsible ?? true;
   const isCollapsed = category.collapsed ?? true;
@@ -51,7 +52,7 @@ const SidebarCategoryInner = ({
         size={16}
         className={cn(
           hasInteracted && "transition",
-          "shrink-0 group-data-[state=open]:rotate-90",
+          "shrink-0 group-data-[state=open]:rotate-90 rtl:rotate-180",
         )}
       />
     </Button>
@@ -83,7 +84,10 @@ const SidebarCategoryInner = ({
       <Collapsible.Trigger className="group" asChild disabled={!isCollapsible}>
         {category.link?.type === "doc" ? (
           <NavLink
-            to={joinPath(category.link.id)}
+            to={{
+              pathname: joinUrl(category.link.id),
+              search: location.search,
+            }}
             className={styles}
             onClick={() => {
               setHasInteracted(true);
@@ -117,7 +121,7 @@ const SidebarCategoryInner = ({
           "ms-6 my-1",
         )}
       >
-        <ul className="relative after:absolute after:-left-[--padding-nav-item] after:translate-x-[1.5px] after:top-0 after:bottom-0 after:w-px after:bg-border">
+        <ul className="relative after:absolute after:-start-[--padding-nav-item] after:translate-x-[1.5px] after:top-0 after:bottom-0 after:w-px after:bg-border">
           {category.items.map((item) => (
             <SidebarItem
               key={

package/src/lib/components/navigation/SidebarItem.tsx

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 import { ExternalLinkIcon } from "lucide-react";
-import { NavLink, useLocation, useSearchParams } from "react-router";
+import { NavLink, useLocation } from "react-router";
 
 import type { SidebarItem as SidebarItemType } from "../../../config/validators/SidebarSchema.js";
 import { joinUrl } from "../../util/joinUrl.js";
@@ -43,7 +43,6 @@ export const SidebarItem = ({
 }) => {
   const location = useLocation();
   const { activeAnchor } = useViewportAnchor();
-  const [searchParams] = useSearchParams();
 
   switch (item.type) {
     case "category":
@@ -79,7 +78,7 @@ export const SidebarItem = ({
           to={{
             pathname: item.href.split("#")[0],
             hash: item.href.split("#")[1],
-            search: searchParams.toString(),
+            search: location.search,
           }}
           {...{ [DATA_ANCHOR_ATTR]: item.href.split("#")[1] }}
           className={navigationListItem({

package/src/lib/components/navigation/Toc.tsx

@@ -86,10 +86,10 @@ export const Toc = ({ entries }: { entries: TocEntry[] }) => {
         On this page
       </div>
       <div className="relative ms-2 ps-4">
-        <div className="absolute inset-0 right-auto bg-border w-[2px]" />
+        <div className="absolute inset-0 end-auto bg-border w-[2px]" />
         <div
           className={cn(
-            "absolute -left-px -translate-y-1 h-6 w-[4px] rounded bg-primary",
+            "absolute -start-px -translate-y-1 h-6 w-[4px] rounded bg-primary",
             paintedOnce.current &&
               "ease-out [transition:top_150ms,opacity_325ms]",
           )}
@@ -104,10 +104,10 @@ export const Toc = ({ entries }: { entries: TocEntry[] }) => {
               isActive={item.id === activeAnchor}
               key={item.id}
               item={item}
-              className="pl-0"
+              className="ps-0"
             >
               {item.children && (
-                <ul className="list-none pl-4 pt-2 space-y-2">
+                <ul className="list-none ps-4 pt-2 space-y-2">
                   {item.children.map((child) => (
                     <TocItem
                       item={child}

package/src/lib/core/ZudokuContext.ts

@@ -56,7 +56,8 @@ type Metadata = Partial<{
 }>;
 
 type Page = Partial<{
-  showPoweredBy: boolean;
+  dir?: "ltr" | "rtl";
+  showPoweredBy?: boolean;
   pageTitle?: string;
   logo?: {
     src: {

package/src/lib/oas/parser/upgrade/index.ts

@@ -10,7 +10,7 @@ import type { OpenAPIDocument } from "../index.js";
 
 export const upgradeSchema = (schema: RecordAny): OpenAPIDocument => {
   if (schema.openapi?.startsWith("3.0")) {
-    schema.openapi = "3.1.0";
+    schema.openapi = "3.1.1";
   }
 
   schema = traverse(schema, (sub) => {
@@ -40,26 +40,17 @@ export const upgradeSchema = (schema: RecordAny): OpenAPIDocument => {
     return sub;
   });
 
-  schema = traverse(schema, (sub) => {
-    // may be null or undefined
-    if (sub.example) {
-      const isExampleObject =
-        typeof sub.example === "object" &&
-        (sub.example.summary !== undefined ||
-          sub.example.description !== undefined ||
-          sub.example.value !== undefined ||
-          sub.example.externalValue !== undefined);
-
-      const exampleValue = isExampleObject
-        ? sub.example
-        : { value: sub.example };
-
-      if (!sub.examples) {
-        sub.examples = { default: exampleValue };
+  schema = traverse(schema, (sub, path) => {
+    if (sub.example !== undefined) {
+      // Arrays in schemas
+      if (isSchemaPath(path ?? [])) {
+        sub.examples = [sub.example];
       } else {
+        // Objects everywhere else
         sub.examples = {
-          default: exampleValue,
-          ...sub.examples,
+          default: {
+            value: sub.example,
+          },
         };
       }
       delete sub.example;
@@ -67,17 +58,54 @@ export const upgradeSchema = (schema: RecordAny): OpenAPIDocument => {
     return sub;
   });
 
-  schema = traverse(schema, (sub) => {
-    if (sub.type === "object" && sub.properties !== undefined) {
-      for (const [, value] of Object.entries(sub.properties)) {
-        const v = (value ?? {}) as RecordAny;
-        if (v.type === "string" && v.format === "binary") {
-          v.contentEncoding = "application/octet-stream";
-          delete v.format;
+  // Multipart file uploads with a binary file
+  schema = traverse(schema, (schema, path) => {
+    if (schema.type === "object" && schema.properties !== undefined) {
+      // Check if this is a multipart request body schema
+      const parentPath = path?.slice(0, -1);
+      const isMultipart = parentPath?.some((segment, index) => {
+        return (
+          segment === "content" && path?.[index + 1] === "multipart/form-data"
+        );
+      });
+
+      if (isMultipart) {
+        // Types
+        const entries: [string, any][] = Object.entries(schema.properties);
+
+        for (const [, value] of entries) {
+          if (
+            typeof value === "object" &&
+            value.type === "string" &&
+            value.format === "binary"
+          ) {
+            value.contentMediaType = "application/octet-stream";
+            delete value.format;
+          }
         }
       }
     }
-    return sub;
+
+    return schema;
+  });
+
+  // Uploading a binary file in a POST request
+  schema = traverse(schema, (schema, path) => {
+    if (
+      path?.includes("content") &&
+      path.includes("application/octet-stream")
+    ) {
+      return {};
+    }
+
+    if (schema.type === "string" && schema.format === "binary") {
+      return {
+        type: "string",
+        contentMediaType: "application/octet-stream",
+      };
+    }
+
+    return schema;
   });
 
   schema = traverse(schema, (sub) => {
@@ -88,6 +116,7 @@ export const upgradeSchema = (schema: RecordAny): OpenAPIDocument => {
     return sub;
   });
 
+  // Uploading an image with base64 encoding
   schema = traverse(schema, (sub) => {
     if (sub.type === "string" && sub.format === "base64") {
       return {
@@ -99,5 +128,46 @@ export const upgradeSchema = (schema: RecordAny): OpenAPIDocument => {
     return sub;
   });
 
+  schema = traverse(schema, (schema, path) => {
+    if (schema.type === "string" && schema.format === "byte") {
+      const parentPath = path?.slice(0, -1);
+      const contentMediaType = parentPath?.find(
+        (_, index) => path?.[index - 1] === "content",
+      );
+
+      return {
+        type: "string",
+        contentEncoding: "base64",
+        contentMediaType,
+      };
+    }
+
+    return schema;
+  });
+
   return schema as OpenAPIDocument;
 };
+
+export function isSchemaPath(path: string[]): boolean {
+  const schemaLocations = [
+    ["components", "schemas"],
+    "properties",
+    "items",
+    "allOf",
+    "anyOf",
+    "oneOf",
+    "not",
+    "additionalProperties",
+  ];
+
+  return (
+    schemaLocations.some((location) => {
+      if (Array.isArray(location)) {
+        return location.every((segment, index) => path[index] === segment);
+      }
+      return path.includes(location);
+    }) ||
+    path.includes("schema") ||
+    path.some((segment) => segment.endsWith("Schema"))
+  );
+}

package/src/lib/plugins/openapi/CollapsibleCode.tsx

@@ -59,7 +59,7 @@ export const CollapsibleCode = ({
           >
             <div>
               <Button variant="outline" className="hidden group-hover:flex">
-                <UnfoldVerticalIcon size={14} className="mr-1.5" />
+                <UnfoldVerticalIcon size={14} className="me-1.5" />
                 Click to expand
               </Button>
             </div>
@@ -73,7 +73,7 @@ export const CollapsibleCode = ({
           <CollapsibleTrigger asChild>
             <Button variant="outline" size="sm">
               Collapse
-              <FoldVerticalIcon size={14} className="ml-1.5" />
+              <FoldVerticalIcon size={14} className="ms-1.5" />
             </Button>
           </CollapsibleTrigger>
         </div>

package/src/lib/plugins/openapi/OperationList.tsx

@@ -246,7 +246,7 @@ export const OperationList = ({
               >
                 {schema.tag.name ?? "Other endpoints"}
                 {showVersions && (
-                  <span className="text-xl text-muted-foreground ml-1.5">
+                  <span className="text-xl text-muted-foreground ms-1.5">
                     {" "}
                     ({version})
                   </span>

package/src/lib/plugins/openapi/OperationListItem.tsx

@@ -11,6 +11,7 @@ import { OperationsFragment } from "./OperationList.js";
 import { ParameterList } from "./ParameterList.js";
 import { Sidecar } from "./Sidecar.js";
 import { SelectOnClick } from "./components/SelectOnClick.js";
+import { useOasConfig } from "./context.js";
 import { type FragmentType, useFragment } from "./graphql/index.js";
 import { SchemaView } from "./schema/SchemaView.js";
 import { methodForColor } from "./util/methodToColor.js";
@@ -30,6 +31,7 @@ export const OperationListItem = ({
     operation.parameters ?? [],
     (param) => param.in,
   );
+  const { options } = useOasConfig();
 
   const first = operation.responses.at(0);
   const [selectedResponse, setSelectedResponse] = useState(first?.statusCode);
@@ -72,7 +74,12 @@ export const OperationListItem = ({
           </SelectOnClick>
         </div>
 
-        <div className="flex flex-col gap-4">
+        <div
+          className={cn(
+            "flex flex-col gap-4",
+            options?.disableSidecar && "col-span-full",
+          )}
+        >
           {operation.description && (
             <Markdown
               className={`${ProseClasses} max-w-full prose-img:max-w-prose`}
@@ -165,11 +172,13 @@ export const OperationListItem = ({
           )}
         </div>
 
-        <Sidecar
-          selectedResponse={selectedResponse}
-          onSelectResponse={setSelectedResponse}
-          operation={operation}
-        />
+        {renderIf(!options?.disableSidecar, () => (
+          <Sidecar
+            selectedResponse={selectedResponse}
+            onSelectResponse={setSelectedResponse}
+            operation={operation}
+          />
+        ))}
       </div>
     </div>
   );

package/src/lib/plugins/openapi/ParamInfos.tsx

@@ -36,6 +36,7 @@ const getSchemaInfos = (schema?: SchemaObject) => {
         : schema.type,
 
     schema.enum && "enum",
+    schema.const && "const",
     schema.format,
     schema.minimum && `min: ${schema.minimum}`,
     schema.maximum && `max: ${schema.maximum}`,

package/src/lib/plugins/openapi/SchemaList.tsx

@@ -76,7 +76,7 @@ export function SchemaList() {
               >
                 Schemas
                 {showVersions && (
-                  <span className="text-xl text-muted-foreground ml-1.5">
+                  <span className="text-xl text-muted-foreground ms-1.5">
                     ({version})
                   </span>
                 )}

package/src/lib/plugins/openapi/client/useCreateQuery.ts

@@ -1,12 +1,29 @@
 import { stripIgnoredCharacters } from "graphql";
 import { use } from "react";
 import type { TypedDocumentString } from "../graphql/graphql.js";
+import type { GraphQLClient } from "./GraphQLClient.js";
 import { GraphQLContext } from "./GraphQLContext.js";
 
 type NoExtraProps<T, U extends T = T> = U & {
   [K in Exclude<keyof U, keyof T>]?: never;
 };
 
+type VarArgs<TVariables> =
+  TVariables extends Record<string, never> ? [] : [NoExtraProps<TVariables>];
+
+export const createQuery = <TResult, TVariables>(
+  client: GraphQLClient,
+  query: TypedDocumentString<TResult, TVariables>,
+  ...[variables]: TVariables extends Record<string, never>
+    ? []
+    : [NoExtraProps<TVariables>]
+) => {
+  return {
+    queryFn: () => client.fetch(query, variables),
+    queryKey: [stripIgnoredCharacters(query.toString()), variables],
+  } as const;
+};
+
 export const useCreateQuery = <TResult, TVariables>(
   query: TypedDocumentString<TResult, TVariables>,
   ...[variables]: TVariables extends Record<string, never>
@@ -19,8 +36,10 @@ export const useCreateQuery = <TResult, TVariables>(
     throw new Error("useGraphQL must be used within a GraphQLProvider");
   }
 
-  return {
-    queryFn: () => graphQLClient.fetch(query, variables),
-    queryKey: [stripIgnoredCharacters(query.toString()), variables],
-  } as const;
+  const args =
+    variables === undefined
+      ? ([] as VarArgs<TVariables>)
+      : ([variables] as VarArgs<TVariables>);
+
+  return createQuery(graphQLClient, query, ...args);
 };

package/src/lib/plugins/openapi/components/ConstValue.tsx

@@ -0,0 +1,24 @@
+import type { SchemaObject } from "../../../oas/parser/index.js";
+import { SelectOnClick } from "./SelectOnClick.js";
+
+export const ConstValue = ({
+  schema,
+  hideDescription = false,
+}: {
+  schema: SchemaObject;
+  hideDescription?: boolean;
+}) => {
+  return (
+    <div className="flex flex-col gap-1 text-xs">
+      <div>
+        <span className="text-muted-foreground">Const value: </span>
+        <SelectOnClick className="border rounded px-1 font-mono">
+          {schema.const}
+        </SelectOnClick>
+        {!hideDescription && schema.description && (
+          <div className="text-muted-foreground">{schema.description}</div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/lib/plugins/openapi/index.tsx

@@ -6,7 +6,8 @@ import { type ZudokuPlugin } from "../../core/plugins.js";
 import { Button } from "../../ui/Button.js";
 import { joinUrl } from "../../util/joinUrl.js";
 import { GraphQLClient } from "./client/GraphQLClient.js";
-import type { GetSidebarOperationsQuery } from "./graphql/graphql.js";
+import { createQuery } from "./client/useCreateQuery.js";
+import type { GetSidebarOperationsQuery as GetSidebarOperationsQueryResult } from "./graphql/graphql.js";
 import { graphql } from "./graphql/index.js";
 import { type OasPluginConfig } from "./interfaces.js";
 import type { PlaygroundContentProps } from "./playground/Playground.js";
@@ -14,7 +15,7 @@ import { PlaygroundDialog } from "./playground/PlaygroundDialog.js";
 import { createSidebarCategory } from "./util/createSidebarCategory.js";
 import { getRoutes, getVersions } from "./util/getRoutes.js";
 
-const GetSidebarOperationsQuery = graphql(`
+export const GetSidebarOperationsQuery = graphql(`
   query GetSidebarOperations($input: JSON!, $type: SchemaType!) {
     schema(input: $input, type: $type) {
       tags {
@@ -39,7 +40,7 @@ const GetSidebarOperationsQuery = graphql(`
 `);
 
 export type OperationResult =
-  GetSidebarOperationsQuery["schema"]["tags"][number]["operations"][number];
+  GetSidebarOperationsQueryResult["schema"]["tags"][number]["operations"][number];
 
 export type OpenApiPluginOptions = OasPluginConfig;
 
@@ -132,11 +133,11 @@ export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
         const { type } = config;
         const input = type === "file" ? config.input[version!] : config.input;
 
-        const data = await context.queryClient.ensureQueryData({
-          queryKey: ["sidebar-operations-query", input],
-          queryFn: () =>
-            client.fetch(GetSidebarOperationsQuery, { type, input }),
+        const query = createQuery(client, GetSidebarOperationsQuery, {
+          type,
+          input,
         });
+        const data = await context.queryClient.ensureQueryData(query);
 
         const categories = data.schema.tags.flatMap((tag) => {
           if (!tag.name || tag.operations.length === 0) return [];

package/src/lib/plugins/openapi/interfaces.ts

@@ -1,7 +1,7 @@
-import { AuthState } from "../../authentication/state.js";
-import { ZudokuContext } from "../../core/ZudokuContext.js";
+import { type AuthState } from "../../authentication/state.js";
+import { type ZudokuContext } from "../../core/ZudokuContext.js";
 import type { SchemaImports } from "../../oas/graphql/index.js";
-import { OperationListItemResult } from "./OperationList.js";
+import { type OperationListItemResult } from "./OperationList.js";
 
 type DynamicInput = () => Promise<unknown>;
 
@@ -49,6 +49,7 @@ type BaseOasConfig = {
   options?: {
     examplesLanguage?: string;
     disablePlayground?: boolean;
+    disableSidecar?: boolean;
     showVersionSelect?: "always" | "if-available" | "hide";
     expandAllTags?: boolean;
     transformExamples?: transformExamples;

package/src/lib/plugins/openapi/playground/IdentitySelector.tsx

@@ -29,7 +29,7 @@ const IdentitySelector = ({
           <RadioGroupItem value={NO_IDENTITY} id="none">
             None
           </RadioGroupItem>
-          <Label htmlFor="none" className="ml-2">
+          <Label htmlFor="none" className="ms-2">
             None
           </Label>
         </Label>
@@ -41,7 +41,7 @@ const IdentitySelector = ({
             <RadioGroupItem value={identity.id} id={identity.id}>
               {identity.label}
             </RadioGroupItem>
-            <Label htmlFor={identity.id} className="ml-2">
+            <Label htmlFor={identity.id} className="ms-2">
               {identity.label}
             </Label>
           </Label>

package/src/lib/plugins/openapi/playground/Playground.tsx

@@ -379,7 +379,7 @@ export const Playground = ({
         />
 
         <div className="grid grid-cols-2 text-sm h-full">
-          <div className="flex flex-col gap-4 p-4 after:bg-muted-foreground/20 relative after:absolute after:w-px after:inset-0 after:left-auto">
+          <div className="flex flex-col gap-4 p-4 after:bg-muted-foreground/20 relative after:absolute after:w-px after:inset-0 after:start-auto">
             <div className="flex gap-2 items-stretch">
               <div className="flex flex-1 items-center w-full border rounded-md">
                 <div className="border-r p-2 bg-muted rounded-l-md self-stretch font-semibold font-mono flex items-center">
@@ -406,25 +406,25 @@ export const Playground = ({
                     Parameters
                     {(formState.pathParams.some((p) => p.value !== "") ||
                       formState.queryParams.some((p) => p.active)) && (
-                      <div className="w-2 h-2 rounded-full bg-blue-400 ml-2" />
+                      <div className="w-2 h-2 rounded-full bg-blue-400 ms-2" />
                     )}
                   </TabsTrigger>
                   <TabsTrigger value="headers">
                     Headers
                     {formState.headers.filter((h) => h.active).length > 0 && (
-                      <div className="w-2 h-2 rounded-full bg-blue-400 ml-2" />
+                      <div className="w-2 h-2 rounded-full bg-blue-400 ms-2" />
                     )}
                   </TabsTrigger>
                   <TabsTrigger value="auth">
                     Auth
                     {formState.identity !== NO_IDENTITY && (
-                      <div className="w-2 h-2 rounded-full bg-blue-400 ml-2" />
+                      <div className="w-2 h-2 rounded-full bg-blue-400 ms-2" />
                     )}
                   </TabsTrigger>
                   <TabsTrigger value="body">
                     Body
                     {formState.body && (
-                      <div className="w-2 h-2 rounded-full bg-blue-400 ml-2" />
+                      <div className="w-2 h-2 rounded-full bg-blue-400 ms-2" />
                     )}
                   </TabsTrigger>
                 </TabsList>

package/src/lib/plugins/openapi/playground/QueryParams.tsx

@@ -1,5 +1,5 @@
 import {
-  Control,
+  type Control,
   Controller,
   useFieldArray,
   useFormContext,
@@ -44,7 +44,7 @@ export const QueryParams = ({
                     render={({ field }) => (
                       <Checkbox
                         id={`queryParams.${i}.active`}
-                        className="mr-2"
+                        className="me-2"
                         checked={field.value}
                         onCheckedChange={field.onChange}
                       />

package/src/lib/plugins/openapi/playground/SubmitButton.tsx

@@ -9,7 +9,7 @@ import {
   DropdownMenuTrigger,
 } from "zudoku/ui/DropdownMenu.js";
 import { RadioGroup, RadioGroupItem } from "zudoku/ui/RadioGroup.js";
-import { ApiIdentity } from "../../../core/ZudokuContext.js";
+import { type ApiIdentity } from "../../../core/ZudokuContext.js";
 import { NO_IDENTITY } from "./Playground.js";
 
 const SubmitButton = ({
@@ -59,7 +59,7 @@ const SubmitButton = ({
                   onMouseEnter={() => setDropdownValue(identity.id)}
                   onMouseLeave={() => setDropdownValue(undefined)}
                 >
-                  <RadioGroupItem value={identity.id} className="mr-2" />
+                  <RadioGroupItem value={identity.id} className="me-2" />
 
                   {identity.label}
                 </DropdownMenuItem>

package/src/lib/plugins/openapi/playground/result-panel/RequestTab.tsx

@@ -36,7 +36,7 @@ export const RequestTab = ({
             <span className="font-semibold">Headers</span>
           </CollapsibleTrigger>
           <CollapsibleContent>
-            <div className="grid grid-cols-[auto,1fr] gap-x-8 gap-y-1 pl-1.5 pt-2">
+            <div className="grid grid-cols-[auto,1fr] gap-x-8 gap-y-1 ps-1.5 pt-2">
               {headers.map(([key, value]) => (
                 <Fragment key={key}>
                   <div className="text-primary">{key}</div>
@@ -53,7 +53,7 @@ export const RequestTab = ({
             <span className="font-semibold">Body</span>
           </CollapsibleTrigger>
           <CollapsibleContent>
-            <div className="pl-0 pt-2">
+            <div className="ps-0 pt-2">
               <div
                 className={cn(
                   "whitespace-pre-wrap break-all bg-muted p-2 rounded-md",

package/src/lib/plugins/openapi/playground/result-panel/ResponseTab.tsx

@@ -135,7 +135,7 @@ export const ResponseTab = ({
           <span className="font-semibold">Headers</span>
         </CollapsibleTrigger>
         <CollapsibleContent>
-          <div className="grid grid-cols-[auto,1fr] gap-x-8 gap-y-1 pl-1.5 pt-2 font-mono text-xs">
+          <div className="grid grid-cols-[auto,1fr] gap-x-8 gap-y-1 ps-1.5 pt-2 font-mono text-xs">
             {sortedHeaders.slice(0, 5).map(([key, value]) => (
               <Fragment key={key}>
                 <div className="text-primary whitespace-pre">{key}</div>

package/src/lib/plugins/openapi/playground/result-panel/ResultPanel.tsx

@@ -61,7 +61,7 @@ export const ResultPanel = ({
               Response
               <span
                 className={cn(
-                  "text-xs font-mono ml-1",
+                  "text-xs font-mono ms-1",
                   status === "2" && "text-green-500",
                   status === "3" && "text-blue-500",
                   status === "4" && "text-yellow-500",