zudoku 0.0.0-reset-hash-value.ac516c6d → 0.0.0-z179c4f85

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

@@ -1,8 +1,9 @@
-import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { useState } from "react";
 import { Badge } from "zudoku/ui/Badge.js";
+import { Separator } from "zudoku/ui/Separator.js";
 import { Heading } from "../../components/Heading.js";
 import { Markdown } from "../../components/Markdown.js";
+import { PagefindSearchMeta } from "../../components/PagefindSearchMeta.js";
 import { cn } from "../../util/cn.js";
 import { groupBy } from "../../util/groupBy.js";
 import { renderIf } from "../../util/renderIf.js";
@@ -23,9 +24,11 @@ export type ParameterGroup = (typeof PARAM_GROUPS)[number];
 export const OperationListItem = ({
   operationFragment,
   globalSelectedServer,
+  shouldLazyHighlight,
 }: {
   operationFragment: FragmentType<typeof OperationsFragment>;
   globalSelectedServer?: string;
+  shouldLazyHighlight?: boolean;
 }) => {
   const operation = useFragment(OperationsFragment, operationFragment);
   const groupedParameters = groupBy(
@@ -118,19 +121,22 @@ export const OperationListItem = ({
                   []
                 ),
               )}
+            {renderIf(operation.requestBody?.content?.at(0)?.schema, () => (
+              <Separator className="my-4" />
+            ))}
             {renderIf(
               operation.requestBody?.content?.at(0)?.schema,
               (schema) => (
-                <div className="mt-4 flex flex-col gap-4">
+                <div className="flex flex-col gap-4">
                   <Heading
                     level={3}
                     className="capitalize flex items-center gap-2"
                     id={`${operation.slug}/request-body`}
                   >
                     {operation.summary && (
-                      <VisuallyHidden>
+                      <PagefindSearchMeta>
                         {operation.summary} &rsaquo;{" "}
-                      </VisuallyHidden>
+                      </PagefindSearchMeta>
                     )}
                     Request Body{" "}
                     {operation.requestBody?.required === false ? (
@@ -143,17 +149,14 @@ export const OperationListItem = ({
                 </div>
               ),
             )}
+            <Separator className="my-4" />
             {operation.responses.length > 0 && (
               <>
-                <Heading
-                  level={3}
-                  className="capitalize mt-8 pt-8 border-t"
-                  id={`${operation.slug}/responses`}
-                >
+                <Heading level={3} id={`${operation.slug}/responses`}>
                   {operation.summary && (
-                    <VisuallyHidden>
+                    <PagefindSearchMeta>
                       {operation.summary} &rsaquo;{" "}
-                    </VisuallyHidden>
+                    </PagefindSearchMeta>
                   )}
                   Responses
                 </Heading>
@@ -170,9 +173,9 @@ export const OperationListItem = ({
         {renderIf(!options?.disableSidecar && !isMCPEndpoint, () => (
           <Sidecar
             selectedResponse={selectedResponse}
-            onSelectResponse={setSelectedResponse}
             operation={operation}
             globalSelectedServer={globalSelectedServer}
+            shouldLazyHighlight={shouldLazyHighlight}
           />
         ))}
       </div>

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

@@ -40,6 +40,7 @@ const getSchemaInfos = (schema?: SchemaObject) => {
     schema.enum && "enum",
     schema.const && "const",
     schema.format,
+    schema.type === "array" && schema.items?.contentMediaType,
     schema.minimum !== undefined && `min: ${schema.minimum}`,
     schema.maximum !== undefined && `max: ${schema.maximum}`,
     schema.minLength !== undefined && `minLength: ${schema.minLength}`,

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

@@ -1,6 +1,8 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import { Fragment } from "react";
 import { Heading } from "../../components/Heading.js";
-import { Card } from "../../ui/Card.js";
+import { Frame, FramePanel } from "../../ui/Frame.js";
+import { ItemGroup, ItemSeparator } from "../../ui/Item.js";
 import type { ParameterItem } from "./graphql/graphql.js";
 import type { ParameterGroup } from "./OperationListItem.js";
 import { ParameterListItem } from "./ParameterListItem.js";
@@ -15,25 +17,37 @@ export const ParameterList = ({
   group: ParameterGroup;
   parameters: ParameterItem[];
   id: string;
-}) => (
-  <>
-    <Heading level={3} id={`${id}/${group}-parameters`} className="capitalize">
-      {summary && <VisuallyHidden>{summary} &rsaquo; </VisuallyHidden>}
-      {group === "header" ? "Headers" : `${group} Parameters`}
-    </Heading>
-    <Card>
-      <ul className="list-none m-0 px-0 divide-y ">
-        {parameters
-          .sort((a, b) => (a.required === b.required ? 0 : a.required ? -1 : 1))
-          .map((parameter) => (
-            <ParameterListItem
-              key={`${parameter.name}-${parameter.in}`}
-              parameter={parameter}
-              id={id}
-              group={group}
-            />
-          ))}
-      </ul>
-    </Card>
-  </>
-);
+}) => {
+  const sortedParameters = parameters.sort((a, b) =>
+    a.required === b.required ? 0 : a.required ? -1 : 1,
+  );
+
+  return (
+    <>
+      <Heading
+        level={3}
+        id={`${id}/${group}-parameters`}
+        className="capitalize"
+      >
+        {summary && <VisuallyHidden>{summary} &rsaquo; </VisuallyHidden>}
+        {group === "header" ? "Headers" : `${group} Parameters`}
+      </Heading>
+      <Frame>
+        <FramePanel className="p-0!">
+          <ItemGroup className="overflow-clip">
+            {sortedParameters.map((parameter, index) => (
+              <Fragment key={`${parameter.name}-${parameter.in}`}>
+                {index > 0 && <ItemSeparator />}
+                <ParameterListItem
+                  parameter={parameter}
+                  id={id}
+                  group={group}
+                />
+              </Fragment>
+            ))}
+          </ItemGroup>
+        </FramePanel>
+      </Frame>
+    </>
+  );
+};

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

@@ -4,9 +4,10 @@ import { useState } from "react";
 import { Markdown } from "../../components/Markdown.js";
 import type { SchemaObject } from "../../oas/graphql/index.js";
 import { Button } from "../../ui/Button.js";
+import { Item, ItemActions, ItemContent, ItemTitle } from "../../ui/Item.js";
+import { cn } from "../../util/cn.js";
 import { ColorizedParam } from "./ColorizedParam.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";
@@ -35,75 +36,125 @@ export const ParameterListItem = ({
   const paramSchema = getParameterSchema(parameter);
   const [isOpen, setIsOpen] = useState(false);
 
+  const isCollapsible =
+    paramSchema.type === "object" ||
+    (isArrayType(paramSchema) &&
+      "items" in paramSchema &&
+      paramSchema.items?.type === "object");
+
+  const shouldRenderDescription = Boolean(
+    parameter.description ||
+      paramSchema.description ||
+      (paramSchema.type === "array" && paramSchema.items?.enum) ||
+      paramSchema.enum ||
+      paramSchema.example !== undefined ||
+      paramSchema.default !== undefined,
+  );
+
   return (
-    <li className="p-4 bg-border/20 text-sm flex flex-col gap-1.5">
-      <div className="flex items-center gap-2">
-        <SelectOnClick asChild>
-          <code>
-            {group === "path" ? (
-              <ColorizedParam
-                name={parameter.name}
-                backgroundOpacity="15%"
-                className="px-2"
-                slug={`${id}-${parameter.name}`}
+    <Item>
+      <ItemContent className="gap-y-2">
+        <div>
+          <ItemTitle className="inline me-2">
+            {isCollapsible ? (
+              <button
+                onClick={() => setIsOpen(!isOpen)}
+                type="button"
+                className="hover:underline"
+              >
+                <code>
+                  {group === "path" ? (
+                    <ColorizedParam
+                      name={parameter.name}
+                      backgroundOpacity="15%"
+                      className="px-2"
+                      slug={`${id}-${parameter.name}`}
+                    />
+                  ) : (
+                    parameter.name
+                  )}
+                </code>
+              </button>
+            ) : (
+              <code>
+                {group === "path" ? (
+                  <ColorizedParam
+                    name={parameter.name}
+                    backgroundOpacity="15%"
+                    className="px-2"
+                    slug={`${id}-${parameter.name}`}
+                  />
+                ) : (
+                  parameter.name
+                )}
+              </code>
+            )}
+          </ItemTitle>
+          <ParamInfos
+            className="inline"
+            schema={paramSchema}
+            extraItems={[
+              parameter.required && (
+                <span className="text-primary">required</span>
+              ),
+              parameter.style && `style: ${parameter.style}`,
+              parameter.explode && `explode: ${parameter.explode}`,
+            ]}
+          />
+        </div>
+        {shouldRenderDescription && (
+          <div className="flex flex-col gap-1.5">
+            {parameter.description && (
+              <Markdown content={parameter.description} className="prose-sm" />
+            )}
+            {paramSchema.description && (
+              <Markdown
+                content={paramSchema.description}
+                className="prose-sm"
               />
+            )}
+            {paramSchema.type === "array" && paramSchema.items?.enum ? (
+              <EnumValues values={paramSchema.items.enum} />
             ) : (
-              parameter.name
+              paramSchema.enum && <EnumValues values={paramSchema.enum} />
             )}
-          </code>
-        </SelectOnClick>
-        <ParamInfos
-          schema={paramSchema}
-          extraItems={[
-            parameter.required && (
-              <span className="text-primary">required</span>
-            ),
-            parameter.style && `style: ${parameter.style}`,
-            parameter.explode && `explode: ${parameter.explode}`,
-          ]}
-        />
-      </div>
-      {parameter.description && (
-        <Markdown
-          content={parameter.description}
-          className="text-sm prose prose-p:my-1 prose-code:whitespace-pre-line"
-        />
-      )}
-      {paramSchema.description && (
-        <Markdown
-          content={paramSchema.description}
-          className="text-sm prose-p:my-1 prose-code:whitespace-pre-line"
-        />
-      )}
-      {paramSchema.type === "array" && paramSchema.items.enum ? (
-        <EnumValues values={paramSchema.items.enum} />
-      ) : (
-        paramSchema.enum && <EnumValues values={paramSchema.enum} />
+            <SchemaExampleAndDefault schema={paramSchema} />
+          </div>
+        )}
+      </ItemContent>
+
+      {isCollapsible && (
+        <ItemActions className="self-start">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="rounded-full"
+            onClick={() => setIsOpen(!isOpen)}
+            aria-label="Toggle parameter"
+          >
+            {isOpen ? <MinusIcon size={16} /> : <PlusIcon size={16} />}
+          </Button>
+        </ItemActions>
       )}
-      <SchemaExampleAndDefault schema={paramSchema} />
-      {(paramSchema.type === "object" || isArrayType(paramSchema)) && (
+
+      {isCollapsible && (
         <Collapsible.Root
           defaultOpen={false}
-          onOpenChange={setIsOpen}
           open={isOpen}
+          onOpenChange={setIsOpen}
+          className={cn("w-full", !isOpen && "contents")}
         >
-          <Collapsible.Trigger asChild>
-            <Button variant="expand" size="sm">
-              {isOpen ? <MinusIcon size={12} /> : <PlusIcon size={12} />}
-              {isOpen ? "Hide properties" : "Show properties"}
-            </Button>
-          </Collapsible.Trigger>
-          <Collapsible.Content>
-            <div className="mt-2">
+          <Collapsible.Content asChild>
+            <ItemContent>
               <SchemaView
                 schema={
                   "items" in paramSchema ? paramSchema.items : paramSchema
                 }
               />
-            </div>
+            </ItemContent>
           </Collapsible.Content>
         </Collapsible.Root>
       )}
-    </li>
+    </Item>
   );
 };

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

@@ -1,3 +1,10 @@
+import { ChevronsDownUpIcon, ChevronsUpDownIcon } from "lucide-react";
+import { Button } from "zudoku/components";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "zudoku/ui/Collapsible.js";
 import type { MediaTypeObject } from "./graphql/graphql.js";
 import * as SidecarBox from "./SidecarBox.js";
 import { SidecarExamples } from "./SidecarExamples.js";
@@ -5,18 +12,52 @@ import { SidecarExamples } from "./SidecarExamples.js";
 export const RequestBodySidecarBox = ({
   content,
   onExampleChange,
+  isOnScreen,
+  shouldLazyHighlight,
+  selectedContentIndex,
+  selectedExampleIndex,
 }: {
   content: MediaTypeObject[];
-  onExampleChange?: (example: unknown) => void;
+  onExampleChange?: (selected: {
+    contentTypeIndex: number;
+    exampleIndex: number;
+  }) => void;
+  isOnScreen: boolean;
+  shouldLazyHighlight?: boolean;
+  selectedContentIndex: number;
+  selectedExampleIndex: number;
 }) => {
   if (content.length === 0) return null;
 
   return (
-    <SidecarBox.Root>
-      <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} />
-    </SidecarBox.Root>
+    <Collapsible className="group/collapsible" defaultOpen>
+      <SidecarBox.Root>
+        <SidecarBox.Head className="text-xs flex justify-between items-center">
+          <span className="flex items-center gap-1 font-medium">
+            <CollapsibleTrigger asChild>
+              <Button
+                variant="ghost"
+                className="size-fit px-1 py-1 -my-1"
+                aria-label="Toggle request body examples"
+              >
+                <ChevronsDownUpIcon className="size-[1em] group-data-[state=closed]/collapsible:hidden" />
+                <ChevronsUpDownIcon className="size-[1em] group-data-[state=open]/collapsible:hidden" />
+              </Button>
+            </CollapsibleTrigger>
+            Example Request Body
+          </span>
+        </SidecarBox.Head>
+        <CollapsibleContent>
+          <SidecarExamples
+            selectedContentIndex={selectedContentIndex}
+            selectedExampleIndex={selectedExampleIndex}
+            content={content}
+            onExampleChange={onExampleChange}
+            isOnScreen={isOnScreen}
+            shouldLazyHighlight={shouldLazyHighlight}
+          />
+        </CollapsibleContent>
+      </SidecarBox.Root>
+    </Collapsible>
   );
 };

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

@@ -1,5 +1,18 @@
-import * as Tabs from "@radix-ui/react-tabs";
-import { cn } from "../../util/cn.js";
+import { ChevronsDownUpIcon, ChevronsUpDownIcon, InfoIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Button } from "zudoku/components";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "zudoku/ui/Collapsible.js";
+import { NativeSelect, NativeSelectOption } from "zudoku/ui/NativeSelect.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "zudoku/ui/Tooltip.js";
 import type { ResponseItem } from "./graphql/graphql.js";
 import * as SidecarBox from "./SidecarBox.js";
 import { SidecarExamples } from "./SidecarExamples.js";
@@ -7,43 +20,98 @@ import { SidecarExamples } from "./SidecarExamples.js";
 export const ResponsesSidecarBox = ({
   responses,
   selectedResponse,
-  onSelectResponse,
+  isOnScreen,
+  shouldLazyHighlight,
+  isGenerated,
 }: {
   responses: ResponseItem[];
   selectedResponse?: string;
-  onSelectResponse: (response: string) => void;
+  isOnScreen: boolean;
+  shouldLazyHighlight?: boolean;
+  isGenerated?: boolean;
 }) => {
+  const [internalSelectedResponse, setInternalSelectedResponse] = useState(
+    selectedResponse ?? responses[0]?.statusCode,
+  );
+  const [selectedContentIndex, setSelectedContentIndex] = useState(0);
+  const [selectedExampleIndex, setSelectedExampleIndex] = useState(0);
+
+  useEffect(() => {
+    if (!selectedResponse) return;
+
+    setInternalSelectedResponse(selectedResponse);
+  }, [selectedResponse]);
+
+  useEffect(() => {
+    if (!internalSelectedResponse) return;
+
+    setSelectedContentIndex(0);
+    setSelectedExampleIndex(0);
+  }, [internalSelectedResponse]);
+
   return (
-    <SidecarBox.Root>
-      <Tabs.Root
-        defaultValue={responses[0]?.statusCode}
-        value={selectedResponse}
-        onValueChange={(value) => onSelectResponse(value)}
-      >
-        <SidecarBox.Head className="text-xs flex flex-col gap-2 pb-0">
-          <span className="font-mono">Example Responses</span>
-          <Tabs.List className="flex gap-2">
-            {responses.map((response) => (
-              <Tabs.Trigger
-                key={response.statusCode}
-                value={response.statusCode}
-                className={cn(
-                  "text-xs font-mono px-1.5 py-1 pb-px translate-y-px border-b-2 border-transparent rounded-t cursor-pointer",
-                  "data-[state=active]:text-primary data-[state=active]:dark:text-inherit data-[state=active]:border-primary",
-                  "hover:border-accent-foreground/25",
-                )}
+    <Collapsible className="group/collapsible" defaultOpen>
+      <SidecarBox.Root>
+        <SidecarBox.Head className="text-xs flex justify-between items-center">
+          <div className="flex items-center gap-1 font-medium shrink-0">
+            <CollapsibleTrigger asChild>
+              <Button
+                variant="ghost"
+                className="size-fit px-1 py-1 -my-1"
+                aria-label="Toggle response examples"
               >
-                {response.statusCode}
-              </Tabs.Trigger>
-            ))}
-          </Tabs.List>
+                <ChevronsDownUpIcon className="size-[1em] group-data-[state=closed]/collapsible:hidden" />
+                <ChevronsUpDownIcon className="size-[1em] group-data-[state=open]/collapsible:hidden" />
+              </Button>
+            </CollapsibleTrigger>
+            Example Responses
+            {isGenerated && (
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <InfoIcon size={13} />
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    This example is auto-generated from the schema.
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            )}
+          </div>
+          <div className="group-data-[state=closed]/collapsible:invisible">
+            <NativeSelect
+              className="text-xs h-fit py-1 -my-1 bg-background"
+              value={internalSelectedResponse}
+              onChange={(e) => setInternalSelectedResponse(e.target.value)}
+            >
+              {responses.map((response) => (
+                <NativeSelectOption
+                  key={response.statusCode}
+                  value={response.statusCode}
+                >
+                  {response.statusCode}
+                </NativeSelectOption>
+              ))}
+            </NativeSelect>
+          </div>
         </SidecarBox.Head>
-        {responses.map((response) => (
-          <Tabs.Content key={response.statusCode} value={response.statusCode}>
-            <SidecarExamples content={response.content ?? []} />
-          </Tabs.Content>
-        ))}
-      </Tabs.Root>
-    </SidecarBox.Root>
+        <CollapsibleContent>
+          <SidecarExamples
+            selectedContentIndex={selectedContentIndex}
+            selectedExampleIndex={selectedExampleIndex}
+            onExampleChange={(selected) => {
+              setSelectedContentIndex(selected.contentTypeIndex);
+              setSelectedExampleIndex(selected.exampleIndex);
+            }}
+            content={
+              responses.find((r) => r.statusCode === internalSelectedResponse)
+                ?.content ?? []
+            }
+            isOnScreen={isOnScreen}
+            shouldLazyHighlight={shouldLazyHighlight}
+          />
+        </CollapsibleContent>
+      </SidecarBox.Root>
+    </Collapsible>
   );
 };

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

@@ -16,6 +16,7 @@ import { CategoryHeading } from "../../components/CategoryHeading.js";
 import { Heading } from "../../components/Heading.js";
 import { Markdown } from "../../components/Markdown.js";
 import { Toc } from "../../components/navigation/Toc.js";
+import { PagefindSearchMeta } from "../../components/PagefindSearchMeta.js";
 import { useCreateQuery } from "./client/useCreateQuery.js";
 import { useOasConfig } from "./context.js";
 import { graphql } from "./graphql/gql.js";
@@ -70,6 +71,9 @@ export function SchemaList() {
       data-pagefind-filter="section:openapi"
       data-pagefind-meta="section:openapi"
     >
+      <PagefindSearchMeta name="category">
+        {data.schema.title}
+      </PagefindSearchMeta>
       <Helmet>
         <title>Schemas {showVersions ? version : ""}</title>
         <meta name="description" content="List of schemas used by the API." />