zudoku 0.0.0-fdf886de → 0.0.0-fe92c9e1

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

@@ -1,7 +1,7 @@
 import { ChevronsLeftRightIcon } from "lucide-react";
 import { isValidElement, useState } from "react";
 import { InlineCode } from "../../components/InlineCode.js";
-import { type SchemaObject } from "../../oas/parser/index.js";
+import type { SchemaObject } from "../../oas/parser/index.js";
 import { cn } from "../../util/cn.js";
 
 const Pattern = ({ pattern }: { pattern: string }) => {
@@ -40,15 +40,15 @@ const getSchemaInfos = (schema?: SchemaObject) => {
     schema.enum && "enum",
     schema.const && "const",
     schema.format,
-    schema.minimum && `min: ${schema.minimum}`,
-    schema.maximum && `max: ${schema.maximum}`,
-    schema.minLength && `minLength: ${schema.minLength}`,
-    schema.maxLength && `maxLength: ${schema.maxLength}`,
-    schema.minItems && `minItems: ${schema.minItems}`,
-    schema.maxItems && `maxItems: ${schema.maxItems}`,
+    schema.minimum !== undefined && `min: ${schema.minimum}`,
+    schema.maximum !== undefined && `max: ${schema.maximum}`,
+    schema.minLength !== undefined && `minLength: ${schema.minLength}`,
+    schema.maxLength !== undefined && `maxLength: ${schema.maxLength}`,
+    schema.minItems !== undefined && `minItems: ${schema.minItems}`,
+    schema.maxItems !== undefined && `maxItems: ${schema.maxItems}`,
+    schema.minProperties !== undefined && `minProps: ${schema.minProperties}`,
+    schema.maxProperties !== undefined && `maxProps: ${schema.maxProperties}`,
     schema.uniqueItems && "unique",
-    schema.minProperties && `minProps: ${schema.minProperties}`,
-    schema.maxProperties && `maxProps: ${schema.maxProperties}`,
     schema.readOnly && "readOnly",
     schema.writeOnly && "writeOnly",
     schema.deprecated && "deprecated",
@@ -76,6 +76,7 @@ export const ParamInfos = ({
   return (
     <span className={className}>
       {filteredItems.map((item, index) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: index should be stable
         <span className="text-muted-foreground" key={index}>
           {item}
           {index < filteredItems.length - 1 && (

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

@@ -1,11 +1,9 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { Heading } from "../../components/Heading.js";
 import { Card } from "../../ui/Card.js";
+import type { ParameterItem } from "./graphql/graphql.js";
 import type { ParameterGroup } from "./OperationListItem.js";
-import {
-  ParameterListItem,
-  type ParameterListItemResult,
-} from "./ParameterListItem.js";
+import { ParameterListItem } from "./ParameterListItem.js";
 
 export const ParameterList = ({
   summary,
@@ -15,7 +13,7 @@ export const ParameterList = ({
 }: {
   summary?: string;
   group: ParameterGroup;
-  parameters: ParameterListItemResult[];
+  parameters: ParameterItem[];
   id: string;
 }) => (
   <>

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

@@ -2,21 +2,19 @@ import * as Collapsible from "@radix-ui/react-collapsible";
 import { MinusIcon, PlusIcon } from "lucide-react";
 import { useState } from "react";
 import { Markdown } from "../../components/Markdown.js";
-import { type SchemaObject } from "../../oas/graphql/index.js";
+import type { SchemaObject } from "../../oas/graphql/index.js";
 import { Button } from "../../ui/Button.js";
 import { ColorizedParam } from "./ColorizedParam.js";
-import type { OperationListItemResult } from "./OperationList.js";
-import type { ParameterGroup } from "./OperationListItem.js";
-import { ParamInfos } from "./ParamInfos.js";
 import { EnumValues } from "./components/EnumValues.js";
 import { SelectOnClick } from "./components/SelectOnClick.js";
+import type { ParameterItem } from "./graphql/graphql.js";
+import type { ParameterGroup } from "./OperationListItem.js";
+import { ParamInfos } from "./ParamInfos.js";
 import { SchemaExampleAndDefault } from "./schema/SchemaExampleAndDefault.js";
 import { SchemaView } from "./schema/SchemaView.js";
 import { isArrayType } from "./schema/utils.js";
 
-const getParameterSchema = (
-  parameter: ParameterListItemResult,
-): SchemaObject => {
+const getParameterSchema = (parameter: ParameterItem): SchemaObject => {
   if (parameter.schema != null && typeof parameter.schema === "object") {
     return parameter.schema;
   }
@@ -25,16 +23,12 @@ const getParameterSchema = (
   };
 };
 
-export type ParameterListItemResult = NonNullable<
-  OperationListItemResult["parameters"]
->[number];
-
 export const ParameterListItem = ({
   parameter,
   group,
   id,
 }: {
-  parameter: ParameterListItemResult;
+  parameter: ParameterItem;
   group: ParameterGroup;
   id: string;
 }) => {

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

@@ -1,7 +1,8 @@
-import { useAuth } from "zudoku/components";
-import type { OperationListItemResult } from "./OperationList.js";
+import type {
+  MediaTypeObject,
+  OperationsFragmentFragment,
+} from "./graphql/graphql.js";
 import { PlaygroundDialog } from "./playground/PlaygroundDialog.js";
-import { type Content } from "./SidecarExamples.js";
 
 export const PlaygroundDialogWrapper = ({
   server,
@@ -11,12 +12,9 @@ export const PlaygroundDialogWrapper = ({
 }: {
   server?: string;
   servers?: string[];
-  operation: OperationListItemResult;
-  examples?: Content;
+  operation: OperationsFragmentFragment;
+  examples?: MediaTypeObject[];
 }) => {
-  const { isAuthEnabled, login, signup, isPending, isAuthenticated } =
-    useAuth();
-
   const headers = operation.parameters
     ?.filter((p) => p.in === "header")
     .sort((a, b) => (a.required && !b.required ? -1 : 1))
@@ -26,7 +24,7 @@ export const PlaygroundDialogWrapper = ({
         p.schema?.default ?? p.examples?.find((x) => x.value)?.value ?? "",
       defaultActive: p.required ?? false,
       isRequired: p.required ?? false,
-      enum: p.schema?.type == "array" ? p.schema?.items?.enum : p.schema?.enum,
+      enum: p.schema?.type === "array" ? p.schema?.items?.enum : p.schema?.enum,
       type: p.schema?.type ?? "string",
     }));
 
@@ -37,7 +35,7 @@ export const PlaygroundDialogWrapper = ({
       name: p.name,
       defaultActive: p.required ?? false,
       isRequired: p.required ?? false,
-      enum: p.schema?.type == "array" ? p.schema?.items?.enum : p.schema?.enum,
+      enum: p.schema?.type === "array" ? p.schema?.items?.enum : p.schema?.enum,
       type: p.schema?.type ?? "string",
       defaultValue: p.schema?.default,
     }));
@@ -59,9 +57,6 @@ export const PlaygroundDialogWrapper = ({
       queryParams={queryParams}
       pathParams={pathParams}
       examples={examples}
-      requiresLogin={isAuthEnabled && !isAuthenticated && !isPending}
-      onLogin={() => login()}
-      onSignUp={() => signup()}
     />
   );
 };

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

@@ -1,12 +1,24 @@
+import type { MediaTypeObject } from "./graphql/graphql.js";
 import * as SidecarBox from "./SidecarBox.js";
-import { type Content, SidecarExamples } from "./SidecarExamples.js";
+import { SidecarExamples } from "./SidecarExamples.js";
 
 export const RequestBodySidecarBox = ({
   content,
   onExampleChange,
+  isOnScreen,
+  shouldLazyHighlight,
+  selectedContentIndex,
+  selectedExampleIndex,
 }: {
-  content: Content;
-  onExampleChange?: (example: unknown) => void;
+  content: MediaTypeObject[];
+  onExampleChange?: (selected: {
+    contentTypeIndex: number;
+    exampleIndex: number;
+  }) => void;
+  isOnScreen: boolean;
+  shouldLazyHighlight?: boolean;
+  selectedContentIndex: number;
+  selectedExampleIndex: number;
 }) => {
   if (content.length === 0) return null;
 
@@ -15,7 +27,14 @@ export const RequestBodySidecarBox = ({
       <SidecarBox.Head className="text-xs flex justify-between items-center">
         <span className="font-mono">Request Body Example</span>
       </SidecarBox.Head>
-      <SidecarExamples content={content} onExampleChange={onExampleChange} />
+      <SidecarExamples
+        selectedContentIndex={selectedContentIndex}
+        selectedExampleIndex={selectedExampleIndex}
+        content={content}
+        onExampleChange={onExampleChange}
+        isOnScreen={isOnScreen}
+        shouldLazyHighlight={shouldLazyHighlight}
+      />
     </SidecarBox.Root>
   );
 };

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

@@ -1,18 +1,33 @@
 import * as Tabs from "@radix-ui/react-tabs";
+import { useEffect, useState } from "react";
 import { cn } from "../../util/cn.js";
+import type { ResponseItem } from "./graphql/graphql.js";
 import * as SidecarBox from "./SidecarBox.js";
 import { SidecarExamples } from "./SidecarExamples.js";
-import type { ResponseItem } from "./graphql/graphql.js";
 
 export const ResponsesSidecarBox = ({
   responses,
   selectedResponse,
   onSelectResponse,
+  isOnScreen,
+  shouldLazyHighlight,
 }: {
   responses: ResponseItem[];
   selectedResponse?: string;
   onSelectResponse: (response: string) => void;
+  isOnScreen: boolean;
+  shouldLazyHighlight?: boolean;
 }) => {
+  const [selectedContentIndex, setSelectedContentIndex] = useState(0);
+  const [selectedExampleIndex, setSelectedExampleIndex] = useState(0);
+
+  useEffect(() => {
+    if (!selectedResponse) return;
+
+    setSelectedContentIndex(0);
+    setSelectedExampleIndex(0);
+  }, [selectedResponse]);
+
   return (
     <SidecarBox.Root>
       <Tabs.Root
@@ -40,7 +55,17 @@ export const ResponsesSidecarBox = ({
         </SidecarBox.Head>
         {responses.map((response) => (
           <Tabs.Content key={response.statusCode} value={response.statusCode}>
-            <SidecarExamples content={response.content ?? []} />
+            <SidecarExamples
+              selectedContentIndex={selectedContentIndex}
+              selectedExampleIndex={selectedExampleIndex}
+              onExampleChange={(selected) => {
+                setSelectedContentIndex(selected.contentTypeIndex);
+                setSelectedExampleIndex(selected.exampleIndex);
+              }}
+              content={response.content ?? []}
+              isOnScreen={isOnScreen}
+              shouldLazyHighlight={shouldLazyHighlight}
+            />
           </Tabs.Content>
         ))}
       </Tabs.Root>

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

@@ -1,25 +1,22 @@
-import { useSuspenseQuery } from "@tanstack/react-query";
 import { useMemo, useState, useTransition } from "react";
 import { useSearchParams } from "react-router";
 import { useZudoku } from "zudoku/hooks";
+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 { useCreateQuery } from "./client/useCreateQuery.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 type { OperationListItemResult } from "./OperationList.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 { useSelectedServer } from "./state.js";
 import { createHttpSnippet, getConverted } from "./util/createHttpSnippet.js";
 import { generateSchemaExample } from "./util/generateSchemaExample.js";
 import { methodForColor } from "./util/methodToColor.js";
@@ -53,28 +50,35 @@ export const Sidecar = ({
   operation,
   selectedResponse,
   onSelectResponse,
+  globalSelectedServer,
+  shouldLazyHighlight,
 }: {
-  operation: OperationListItemResult;
+  operation: OperationsFragmentFragment;
   selectedResponse?: string;
   onSelectResponse: (response: string) => void;
+  globalSelectedServer?: string;
+  shouldLazyHighlight?: boolean;
 }) => {
-  const { input, type, options } = useOasConfig();
+  const { options } = useOasConfig();
   const auth = useAuthState();
-  const query = useCreateQuery(GetServerQuery, { input, type });
-  const result = useSuspenseQuery(query);
   const context = useZudoku();
 
   const methodTextColor = methodForColor(operation.method);
 
   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({
@@ -86,6 +90,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}
@@ -102,36 +127,45 @@ export const Sidecar = ({
     />
   );
 
-  const { selectedServer } = useSelectedServer(result.data.schema.servers);
+  // Manual server selection takes precedence over the server hierarchy.
+  // If no manual selection, fall back to operation's first server (already respects operation > path > global hierarchy)
+  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 =
@@ -150,7 +184,7 @@ export const Sidecar = ({
     >
       <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="font-mono wrap-break-word leading-6">
             <span className={cn("font-semibold", methodTextColor)}>
               {operation.method.toUpperCase()}
             </span>
@@ -159,52 +193,66 @@ export const Sidecar = ({
           </span>
           {showPlayground && (
             <PlaygroundDialogWrapper
-              servers={result.data.schema.servers.map((server) => server.url)}
+              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]"
-                  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]"
-                value={selectedLang}
-                onChange={(e) => {
-                  startTransition(() => {
-                    setSearchParams((prev) => {
-                      prev.set("lang", e.target.value);
-                      return prev;
-                    });
-                  });
-                }}
-                options={EXAMPLE_LANGUAGES}
-              />
-            </SidecarBox.Footer>
-          </>
-        )}
+        <SidecarBox.Body className="p-0">
+          {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.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]"
+            value={selectedLang}
+            onChange={(e) => {
+              startTransition(() => {
+                setSearchParams((prev) => {
+                  prev.set("lang", e.target.value);
+                  return prev;
+                });
+              });
+            }}
+            options={supportedLanguages}
+          />
+        </SidecarBox.Footer>
       </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}
+
+      {operation.responses.length > 0 && (
         <ResponsesSidecarBox
+          isOnScreen={isOnScreen}
+          shouldLazyHighlight={shouldLazyHighlight}
           selectedResponse={selectedResponse}
           onSelectResponse={onSelectResponse}
           responses={operation.responses.map((response) => ({

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

@@ -1,18 +1,8 @@
-import { useEffect, useMemo, useState } from "react";
-import { type SchemaObject } from "../../oas/parser/index.js";
 import { SyntaxHighlight } from "../../ui/SyntaxHighlight.js";
-import { CollapsibleCode } from "./CollapsibleCode.js";
-import type { OperationListItemResult } from "./OperationList.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";
-
-export type Content = NonNullable<
-  NonNullable<OperationListItemResult["requestBody"]>["content"]
->;
-export type Example = NonNullable<
-  NonNullable<Content[number]["examples"]>
->[number];
 
 const formatForDisplay = (value: unknown): string => {
   if (value == null) return "No example";
@@ -40,49 +30,37 @@ const getLanguage = (mediaType?: string): string => {
 };
 
 export type SidecarExamplesProps = {
-  content: Content;
+  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 (
     <>
@@ -98,16 +76,15 @@ export const SidecarExamples = ({
               View External Example →
             </a>
           </div>
+        ) : shouldLazyHighlight && !isOnScreen ? (
+          <NonHighlightedCode code={formattedExample} />
         ) : (
-          <CollapsibleCode>
-            <SyntaxHighlight
-              embedded
-              language={language}
-              noBackground
-              className="[--scrollbar-color:gray] rounded-none text-xs max-h-[500px]"
-              code={formattedExample}
-            />
-          </CollapsibleCode>
+          <SyntaxHighlight
+            embedded
+            language={language}
+            className="[--scrollbar-color:gray] rounded-none max-h-[200px] text-xs overflow-auto"
+            code={formattedExample}
+          />
         )}
         {selectedExample?.description && (
           <div className="border-t text-xs px-3 py-1.5 text-muted-foreground">
@@ -127,9 +104,12 @@ export const SidecarExamples = ({
               {content.length > 1 ? (
                 <SimpleSelect
                   className="max-w-[200px]"
-                  value={selectedContentTypeIndex.toString()}
+                  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(),
@@ -148,7 +128,10 @@ export const SidecarExamples = ({
                   className="max-w-[180px]"
                   value={selectedExampleIndex.toString()}
                   onChange={(e) =>
-                    setSelectedExampleIndex(Number(e.target.value))
+                    onExampleChange?.({
+                      contentTypeIndex: selectedContentIndex,
+                      exampleIndex: Number(e.target.value),
+                    })
                   }
                   options={examples.map((example, index) => ({
                     value: index.toString(),