zudoku 0.64.1 → 0.65.0

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

@@ -1,22 +1,23 @@
 import { useMemo, useState, useTransition } from "react";
 import { useSearchParams } from "react-router";
 import { useZudoku } from "zudoku/hooks";
+import { Badge } from "zudoku/ui/Badge.js";
+import { NativeSelect, NativeSelectOption } from "zudoku/ui/NativeSelect.js";
+import { SyntaxHighlight } from "zudoku/ui/SyntaxHighlight.js";
 import { useAuthState } from "../../authentication/state.js";
 import { PathRenderer } from "../../components/PathRenderer.js";
-import type { SchemaObject } from "../../oas/parser/index.js";
-import { SyntaxHighlight } from "../../ui/SyntaxHighlight.js";
 import { cn } from "../../util/cn.js";
 import { useOnScreen } from "../../util/useOnScreen.js";
-import { CollapsibleCode } from "./CollapsibleCode.js";
 import { ColorizedParam } from "./ColorizedParam.js";
+import { NonHighlightedCode } from "./components/NonHighlightedCode.js";
 import { useOasConfig } from "./context.js";
+import { GeneratedExampleSidecarBox } from "./GeneratedExampleSidecarBox.js";
 import type { OperationsFragmentFragment } from "./graphql/graphql.js";
 import { graphql } from "./graphql/index.js";
 import { PlaygroundDialogWrapper } from "./PlaygroundDialogWrapper.js";
 import { RequestBodySidecarBox } from "./RequestBodySidecarBox.js";
 import { ResponsesSidecarBox } from "./ResponsesSidecarBox.js";
 import * as SidecarBox from "./SidecarBox.js";
-import { SimpleSelect } from "./SimpleSelect.js";
 import { createHttpSnippet, getConverted } from "./util/createHttpSnippet.js";
 import { generateSchemaExample } from "./util/generateSchemaExample.js";
 import { methodForColor } from "./util/methodToColor.js";
@@ -49,13 +50,13 @@ const EXAMPLE_LANGUAGES = [
 export const Sidecar = ({
   operation,
   selectedResponse,
-  onSelectResponse,
   globalSelectedServer,
+  shouldLazyHighlight,
 }: {
   operation: OperationsFragmentFragment;
   selectedResponse?: string;
-  onSelectResponse: (response: string) => void;
   globalSelectedServer?: string;
+  shouldLazyHighlight?: boolean;
 }) => {
   const { options } = useOasConfig();
   const auth = useAuthState();
@@ -65,13 +66,18 @@ export const Sidecar = ({
 
   const [searchParams, setSearchParams] = useSearchParams();
   const [, startTransition] = useTransition();
-  const [selectedExample, setSelectedExample] = useState<unknown>();
 
-  const selectedLang =
+  const supportedLanguages = options?.supportedLanguages ?? EXAMPLE_LANGUAGES;
+
+  const preferredLang =
     searchParams.get("lang") ?? options?.examplesLanguage ?? "shell";
 
-  const requestBodyContent = operation.requestBody?.content;
+  const selectedLang =
+    supportedLanguages.find((lang) => lang.value === preferredLang)?.value ??
+    supportedLanguages.at(0)?.value ??
+    "shell";
 
+  const requestBodyContent = operation.requestBody?.content;
   const transformedRequestBodyContent =
     requestBodyContent && options?.transformExamples
       ? options.transformExamples({
@@ -83,6 +89,27 @@ export const Sidecar = ({
         })
       : requestBodyContent;
 
+  const [selectedRequestExample, setSelectedRequestExample] = useState<{
+    contentTypeIndex: number;
+    exampleIndex: number;
+  }>({
+    contentTypeIndex: 0,
+    exampleIndex: 0,
+  });
+
+  const selectedContent = transformedRequestBodyContent?.at(
+    selectedRequestExample.contentTypeIndex,
+  );
+  const currentExample = selectedContent?.examples?.at(
+    selectedRequestExample.exampleIndex,
+  );
+
+  const currentExampleCode = currentExample
+    ? (currentExample?.value ?? currentExample)
+    : selectedContent?.schema
+      ? generateSchemaExample(selectedContent?.schema)
+      : undefined;
+
   const path = (
     <PathRenderer
       path={operation.path}
@@ -90,6 +117,7 @@ export const Sidecar = ({
         <ColorizedParam
           name={name}
           backgroundOpacity="0"
+          className="py-px px-0.5"
           // same as in `ParameterListItem`
           slug={`${operation.slug}-${name}`}
         >
@@ -104,34 +132,40 @@ export const Sidecar = ({
   const selectedServer =
     globalSelectedServer || operation.servers.at(0)?.url || "";
 
-  const code = useMemo(() => {
-    const exampleBody =
-      selectedExample ??
-      (transformedRequestBodyContent?.[0]?.schema
-        ? generateSchemaExample(
-            transformedRequestBodyContent[0].schema as SchemaObject,
-          )
-        : undefined);
+  const httpSnippetCode = useMemo<string | undefined>(() => {
+    const converted = options?.generateCodeSnippet?.({
+      selectedLang,
+      selectedServer,
+      context,
+      operation,
+      example: currentExampleCode,
+      auth,
+    });
+
+    if (converted) return converted;
 
     const snippet = createHttpSnippet({
       operation,
       selectedServer,
-      exampleBody: exampleBody
+      exampleBody: currentExampleCode
         ? {
             mimeType: "application/json",
-            text: JSON.stringify(exampleBody, null, 2),
+            text: JSON.stringify(currentExampleCode, null, 2),
           }
         : { mimeType: "application/json" },
     });
 
     return getConverted(snippet, selectedLang);
   }, [
-    selectedExample,
-    transformedRequestBodyContent,
+    currentExampleCode,
     operation,
     selectedServer,
     selectedLang,
+    options,
+    auth,
+    context,
   ]);
+
   const [ref, isOnScreen] = useOnScreen({ rootMargin: "200px 0px 200px 0px" });
 
   const showPlayground =
@@ -142,47 +176,34 @@ export const Sidecar = ({
         operation.extensions["x-zudoku-playground-enabled"] === undefined &&
         !options?.disablePlayground));
 
+  const hasResponseExamples = operation.responses.some((response) =>
+    response.content?.some((content) => (content.examples?.length ?? 0) > 0),
+  );
+
   return (
     <aside
       ref={ref}
-      className="flex flex-col overflow-hidden sticky top-(--scroll-padding) gap-4"
+      className="flex flex-col sticky top-(--scroll-padding) gap-4"
       data-pagefind-ignore="all"
     >
       <SidecarBox.Root>
-        <SidecarBox.Head className="flex justify-between items-center flex-nowrap py-2.5 gap-2 text-xs">
-          <span className="font-mono break-words leading-6">
-            <span className={cn("font-semibold", methodTextColor)}>
-              {operation.method.toUpperCase()}
+        <SidecarBox.Head className="py-1.5">
+          <div className="flex items-center flex-wrap gap-2 justify-between w-full">
+            <span className="font-mono wrap-break-word leading-6 space-x-1">
+              <Badge
+                variant="outline"
+                className={cn(
+                  methodTextColor,
+                  "px-1.5 rounded-md border-none bg-current/7 dark:bg-current/15",
+                )}
+              >
+                {operation.method.toUpperCase()}
+              </Badge>
+              {path}
             </span>
-            &nbsp;
-            {path}
-          </span>
-          {showPlayground && (
-            <PlaygroundDialogWrapper
-              servers={operation.servers.map((server) => server.url)}
-              operation={operation}
-              examples={requestBodyContent ?? undefined}
-            />
-          )}
-        </SidecarBox.Head>
-        {isOnScreen && (
-          <>
-            <SidecarBox.Body className="p-0">
-              <CollapsibleCode>
-                <SyntaxHighlight
-                  embedded
-                  language={selectedLang}
-                  noBackground
-                  className="[--scrollbar-color:gray] rounded-none text-xs max-h-[500px]"
-                  // biome-ignore lint/style/noNonNullAssertion: code is guaranteed to be defined
-                  code={code!}
-                />
-              </CollapsibleCode>
-            </SidecarBox.Body>
-            <SidecarBox.Footer className="flex items-center text-xs gap-2 justify-end py-2.5">
-              <span>Show example in</span>
-              <SimpleSelect
-                className="self-start max-w-[150px]"
+            <div className="flex items-center gap-1">
+              <NativeSelect
+                className="py-0.5 h-fit max-w-32 truncate bg-background"
                 value={selectedLang}
                 onChange={(e) => {
                   startTransition(() => {
@@ -192,22 +213,65 @@ export const Sidecar = ({
                     });
                   });
                 }}
-                options={EXAMPLE_LANGUAGES}
-              />
-            </SidecarBox.Footer>
-          </>
-        )}
+              >
+                {supportedLanguages.map((language) => (
+                  <NativeSelectOption
+                    key={language.value}
+                    value={language.value}
+                  >
+                    {language.label}
+                  </NativeSelectOption>
+                ))}
+              </NativeSelect>
+              {showPlayground && (
+                <PlaygroundDialogWrapper
+                  servers={operation.servers.map((server) => server.url)}
+                  operation={operation}
+                  examples={requestBodyContent ?? undefined}
+                />
+              )}
+            </div>
+          </div>
+        </SidecarBox.Head>
+        <SidecarBox.Body>
+          {shouldLazyHighlight && !isOnScreen ? (
+            <NonHighlightedCode code={httpSnippetCode ?? ""} />
+          ) : (
+            <SyntaxHighlight
+              embedded
+              language={selectedLang}
+              className="[--scrollbar-color:gray] rounded-none text-xs max-h-[200px]"
+              // biome-ignore lint/style/noNonNullAssertion: code is guaranteed to be defined
+              code={httpSnippetCode!}
+            />
+          )}
+        </SidecarBox.Body>
       </SidecarBox.Root>
-      {isOnScreen && transformedRequestBodyContent && (
+
+      {transformedRequestBodyContent && currentExample ? (
         <RequestBodySidecarBox
           content={transformedRequestBodyContent}
-          onExampleChange={setSelectedExample}
+          onExampleChange={(selected) => {
+            setSelectedRequestExample(selected);
+          }}
+          selectedContentIndex={selectedRequestExample.contentTypeIndex}
+          selectedExampleIndex={selectedRequestExample.exampleIndex}
+          isOnScreen={isOnScreen}
+          shouldLazyHighlight={shouldLazyHighlight}
         />
-      )}
-      {isOnScreen && operation.responses.length > 0 && (
+      ) : transformedRequestBodyContent && currentExampleCode ? (
+        <GeneratedExampleSidecarBox
+          isOnScreen={isOnScreen}
+          shouldLazyHighlight={shouldLazyHighlight}
+          code={JSON.stringify(currentExampleCode, null, 2)}
+        />
+      ) : null}
+
+      {hasResponseExamples && (
         <ResponsesSidecarBox
+          isOnScreen={isOnScreen}
+          shouldLazyHighlight={shouldLazyHighlight}
           selectedResponse={selectedResponse}
-          onSelectResponse={onSelectResponse}
           responses={operation.responses.map((response) => ({
             ...response,
             content:

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

@@ -7,7 +7,12 @@ type BaseComponentProps<T = unknown> = PropsWithChildren<
 
 export const Root = ({ children, className }: BaseComponentProps) => (
   <div
-    className={cn("rounded-xl overflow-hidden border border-border", className)}
+    data-slot="sidecar-box-root"
+    className={cn(
+      "relative text-xs flex min-w-0 flex-col rounded-xl border bg-muted/50 bg-clip-padding",
+      "before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_2px_1px_--theme(--color-black/4%)] after:pointer-events-none after:absolute after:-inset-[5px] after:-z-1 after:rounded-[calc(var(--radius-xl)+4px)] after:border after:border-border/50 after:bg-clip-padding **:data-[slot=particle-wrapper]:w-full **:data-[slot=particle-wrapper]:max-w-64 lg:col-span-1 dark:after:bg-background/72",
+      className,
+    )}
   >
     {children}
   </div>
@@ -15,8 +20,9 @@ export const Root = ({ children, className }: BaseComponentProps) => (
 
 export const Head = ({ children, className }: BaseComponentProps) => (
   <div
+    data-slot="sidecar-box-head"
     className={cn(
-      "border-b bg-muted dark:bg-transparent text-card-foreground p-3 py-2.5",
+      "flex items-center gap-3 rounded-b-xl p-2.5 data-[slot=head]:rounded-b-none",
       className,
     )}
   >
@@ -25,11 +31,27 @@ export const Head = ({ children, className }: BaseComponentProps) => (
 );
 
 export const Body = ({ children, className }: BaseComponentProps) => (
-  <div className={cn("bg-card overflow-auto p-2", className)}>{children}</div>
+  <div
+    data-slot="sidecar-box-body"
+    className={cn(
+      "overflow-auto -m-px flex min-w-0 flex-1 flex-col overflow-x-auto rounded-t-xl border bg-background",
+      "rounded-b last:rounded-b-xl",
+      "before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] dark:before:shadow-[0_-1px_--theme(--color-white/8%)]",
+      className,
+    )}
+  >
+    {children}
+  </div>
 );
 
 export const Footer = ({ children, className }: BaseComponentProps) => (
-  <div className={cn("border-t bg-muted dark:bg-transparent p-3", className)}>
+  <div
+    data-slot="sidecar-box-footer"
+    className={cn(
+      "p-2 rounded-b-xl data-[slot=sidecar-box-footer]:rounded-b-none",
+      className,
+    )}
+  >
     {children}
   </div>
 );

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

@@ -1,14 +1,13 @@
-import { useEffect, useMemo, useState } from "react";
-import type { SchemaObject } from "../../oas/parser/index.js";
+import { ExternalLinkIcon } from "lucide-react";
+import { Badge } from "zudoku/ui/Badge.js";
+import { NativeSelect, NativeSelectOption } from "zudoku/ui/NativeSelect.js";
 import { SyntaxHighlight } from "../../ui/SyntaxHighlight.js";
-import { CollapsibleCode } from "./CollapsibleCode.js";
+import { NonHighlightedCode } from "./components/NonHighlightedCode.js";
 import type { MediaTypeObject } from "./graphql/graphql.js";
 import * as SidecarBox from "./SidecarBox.js";
-import { SimpleSelect } from "./SimpleSelect.js";
-import { generateSchemaExample } from "./util/generateSchemaExample.js";
 
-const formatForDisplay = (value: unknown): string => {
-  if (value == null) return "No example";
+const formatForDisplay = (value: unknown): string | undefined => {
+  if (value == null) return;
   if (typeof value === "string") return value.trim();
   return JSON.stringify(value, null, 2);
 };
@@ -35,72 +34,64 @@ const getLanguage = (mediaType?: string): string => {
 export type SidecarExamplesProps = {
   content: MediaTypeObject[];
   description?: string;
-  onExampleChange?: (example: unknown) => void;
+  selectedContentIndex: number;
+  selectedExampleIndex: number;
+  onExampleChange?: ({
+    contentTypeIndex,
+    exampleIndex,
+  }: {
+    contentTypeIndex: number;
+    exampleIndex: number;
+  }) => void;
+  isOnScreen: boolean;
+  shouldLazyHighlight?: boolean;
 };
 
 export const SidecarExamples = ({
   content,
   description,
   onExampleChange,
+  selectedContentIndex,
+  selectedExampleIndex,
+  isOnScreen,
+  shouldLazyHighlight,
 }: SidecarExamplesProps) => {
-  const [selectedContentTypeIndex, setSelectedContentTypeIndex] = useState(0);
-  const [selectedExampleIndex, setSelectedExampleIndex] = useState(0);
-
-  // Get the effective content (handle single item array case)
-  const effectiveContent =
-    Array.isArray(content) && content.length === 1
-      ? content[0]
-      : content[selectedContentTypeIndex];
-
   // Get example value, with fallback to schema-generated example
-  const examples = effectiveContent?.examples ?? [];
-  const selectedExample = examples[selectedExampleIndex];
-
-  const exampleValue = useMemo(() => {
-    if (selectedExample) {
-      // If it's a wrapped example with a value field, use that
-      return "value" in selectedExample
-        ? selectedExample.value
-        : selectedExample;
-    } else if (effectiveContent?.schema) {
-      // No example provided, generate one from schema
-      return generateSchemaExample(effectiveContent.schema as SchemaObject);
-    }
-  }, [selectedExample, effectiveContent?.schema]);
-
-  useEffect(() => {
-    if (!exampleValue) return;
-
-    onExampleChange?.(exampleValue);
-  }, [exampleValue, onExampleChange]);
+  const selectedContent = content[selectedContentIndex];
+  const examples = selectedContent?.examples ?? [];
+  const selectedExample = examples?.[selectedExampleIndex];
 
-  const formattedExample = formatForDisplay(exampleValue);
-  const language = getLanguage(effectiveContent?.mediaType);
+  const formattedExample = formatForDisplay(selectedExample?.value);
+  const language = getLanguage(selectedContent?.mediaType);
 
   return (
     <>
       <SidecarBox.Body className="p-0">
         {selectedExample?.externalValue ? (
-          <div className="p-2">
+          <div className="p-4">
             <a
               href={selectedExample.externalValue}
               target="_blank"
               rel="noopener noreferrer"
               className="text-xs text-primary hover:underline"
             >
-              View External Example →
+              View External Example
+              <ExternalLinkIcon className="size-3 inline-block ms-1 align-[-0.125em]" />
             </a>
           </div>
+        ) : shouldLazyHighlight && !isOnScreen && formattedExample ? (
+          <NonHighlightedCode code={formattedExample} />
+        ) : formattedExample ? (
+          <SyntaxHighlight
+            embedded
+            language={language}
+            className="[--scrollbar-color:gray] rounded-none max-h-[200px] text-xs overflow-auto"
+            code={formattedExample}
+          />
         ) : (
-          <CollapsibleCode>
-            <SyntaxHighlight
-              embedded
-              language={language}
-              noBackground
-              className="[--scrollbar-color:gray] rounded-none text-xs max-h-[500px]"
-              code={formattedExample}
-            />
-          </CollapsibleCode>
+          <div className="grid place-items-center text-xs text-muted-foreground min-h-18">
+            No example specified for this content type
+          </div>
         )}
         {selectedExample?.description && (
           <div className="border-t text-xs px-3 py-1.5 text-muted-foreground">
@@ -108,51 +99,72 @@ export const SidecarExamples = ({
           </div>
         )}
       </SidecarBox.Body>
-      <SidecarBox.Footer className="text-xs p-0 divide-y divide-border">
+      <SidecarBox.Footer className="text-xs">
         {description && (
-          <div className="text-muted-foreground text-xs px-3 py-2">
+          <div className="text-muted-foreground text-xs px-1 py-2">
             {description}
           </div>
         )}
         {(examples.length !== 0 || content.length !== 0) && (
-          <div className="flex items-center gap-2 justify-between min-w-0 px-3 py-2">
-            <div className="flex items-center gap-2 min-w-0">
+          <div className="flex items-center gap-2 justify-between min-w-0">
+            <div className="flex items-center gap-2 flex-wrap">
               {content.length > 1 ? (
-                <SimpleSelect
-                  className="max-w-[200px]"
-                  value={selectedContentTypeIndex.toString()}
+                <NativeSelect
+                  className="text-xs h-fit py-1 truncate bg-background"
+                  value={selectedContentIndex.toString()}
                   onChange={(e) =>
-                    setSelectedContentTypeIndex(Number(e.target.value))
+                    onExampleChange?.({
+                      contentTypeIndex: Number(e.target.value),
+                      exampleIndex: 0,
+                    })
                   }
-                  options={content.map((c, index) => ({
-                    value: index.toString(),
-                    label: c.mediaType,
-                  }))}
-                />
+                >
+                  {content.map((c, index) => (
+                    <NativeSelectOption
+                      key={c.mediaType}
+                      value={index.toString()}
+                    >
+                      {c.mediaType}
+                    </NativeSelectOption>
+                  ))}
+                </NativeSelect>
               ) : (
-                <span className="font-mono text-[11px]">
+                <Badge
+                  className="text-[11px] font-mono font-normal"
+                  variant="outline"
+                >
                   {content[0]?.mediaType}
-                </span>
+                </Badge>
               )}
             </div>
             {examples.length > 1 && (
-              <div className="flex items-center gap-1">
-                <SimpleSelect
-                  className="max-w-[180px]"
-                  value={selectedExampleIndex.toString()}
-                  onChange={(e) =>
-                    setSelectedExampleIndex(Number(e.target.value))
-                  }
-                  options={examples.map((example, index) => ({
-                    value: index.toString(),
-                    label:
+              <NativeSelect
+                className="text-xs h-fit py-1 truncate bg-background"
+                value={selectedExampleIndex.toString()}
+                onChange={(e) =>
+                  onExampleChange?.({
+                    contentTypeIndex: selectedContentIndex,
+                    exampleIndex: Number(e.target.value),
+                  })
+                }
+              >
+                {examples.map((example, index) => (
+                  <NativeSelectOption
+                    key={
                       example.summary ||
                       example.name ||
                       example.description ||
-                      `Example ${index + 1}`,
-                  }))}
-                />
-              </div>
+                      `Example ${index + 1}`
+                    }
+                    value={index.toString()}
+                  >
+                    {example.summary ||
+                      example.name ||
+                      example.description ||
+                      `Example ${index + 1}`}
+                  </NativeSelectOption>
+                ))}
+              </NativeSelect>
             )}
           </div>
         )}

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

@@ -9,7 +9,7 @@ export const ConstValue = ({
   hideDescription?: boolean;
 }) => {
   return (
-    <div className="flex flex-col gap-1 text-xs">
+    <div className="flex flex-col gap-1">
       <div>
         <span className="text-muted-foreground">Const value: </span>
         <SelectOnClick className="border rounded px-1 font-mono">

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

@@ -22,8 +22,8 @@ export const EnumValues = ({
     shouldCollapse && !isOpen ? values.slice(0, maxVisibleValues) : values;
 
   return (
-    <div className={cn("flex flex-wrap gap-1.5 text-xs", className)}>
-      <span className="text-muted-foreground">Enum values: </span>
+    <div className={cn("flex flex-wrap gap-1.5", className)}>
+      <span className="text-muted-foreground">Enum values:</span>
       {visibleValues.map((value) => (
         <div key={value}>
           <SelectOnClick className="border rounded-sm px-1 font-mono">

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

@@ -0,0 +1,22 @@
+import { cn } from "../../../util/cn.js";
+import { OverflowOverlay } from "../CollapsibleCode.js";
+
+export const NonHighlightedCode = ({
+  code,
+  className,
+}: {
+  code: string;
+  className?: string;
+}) => (
+  <pre
+    className={cn(
+      "relative text-(--shiki-light) dark:text-(--shiki-dark) p-2 text-xs font-mono max-h-[250px] leading-4.5 bg-(--shiki-light-bg) dark:bg-(--shiki-dark-bg) overflow-hidden",
+      className,
+    )}
+  >
+    <code>
+      {code.split("\n").length > 13 && <OverflowOverlay />}
+      {code}
+    </code>
+  </pre>
+);