zudoku 0.0.0-f36627bd → 0.0.0-f370c714

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

@@ -18,9 +18,12 @@ import { CategoryHeading } from "../../components/CategoryHeading.js";
 import { useApiIdentities } from "../../components/context/ZudokuContext.js";
 import { Heading } from "../../components/Heading.js";
 import { Markdown } from "../../components/Markdown.js";
+import { PagefindSearchMeta } from "../../components/PagefindSearchMeta.js";
 import { Pagination } from "../../components/Pagination.js";
+import { joinUrl } from "../../util/joinUrl.js";
 import { useCreateQuery } from "./client/useCreateQuery.js";
 import { useOasConfig } from "./context.js";
+import { DownloadSchemaButton } from "./DownloadSchemaButton.js";
 import { Endpoint } from "./Endpoint.js";
 import { graphql } from "./graphql/index.js";
 import { UNTAGGED_PATH } from "./index.js";
@@ -39,6 +42,10 @@ export const OperationsFragment = graphql(/* GraphQL */ `
     path
     deprecated
     extensions
+    servers {
+      url
+      description
+    }
     parameters {
       name
       in
@@ -142,6 +149,8 @@ const OperationsForTagQuery = graphql(/* GraphQL */ `
   }
 `);
 
+const LAZY_OPERATION_LIST_THRESHOLD = 30;
+
 export const OperationList = ({
   tag,
   untagged,
@@ -149,7 +158,7 @@ export const OperationList = ({
   tag?: string;
   untagged?: boolean;
 }) => {
-  const { input, type, versions, version, options } = useOasConfig();
+  const { path, input, type, versions, version, options } = useOasConfig();
   const { tag: tagFromParams } = useParams<"tag">();
   const query = useCreateQuery(OperationsForTagQuery, {
     input,
@@ -161,7 +170,10 @@ export const OperationList = ({
   const {
     data: { schema },
   } = result;
-  const { selectedServer } = useSelectedServer(schema.servers);
+  // Global server selection for the dropdown UI
+  const { selectedServer: globalSelectedServer } = useSelectedServer(
+    schema.servers,
+  );
   const title = schema.title;
   const summary = schema.summary;
   const description = schema.description;
@@ -193,6 +205,10 @@ export const OperationList = ({
 
   const { operations, next, prev, description: tagDescription } = schema.tag;
 
+  // Simple heuristic to determine if we should lazy highlight the code
+  // This is to avoid the performance issues when there are a lot of operations
+  const shouldLazyHighlight = operations.length > LAZY_OPERATION_LIST_THRESHOLD;
+
   // The summary property is preferable here as it is a short description of
   // the API, whereas the description property is typically longer and supports
   // commonmark formatting, making it ill-suited for use in the meta description
@@ -231,21 +247,33 @@ export const OperationList = ({
   const tagTitle = schema.tag.extensions?.["x-displayName"] ?? schema.tag.name;
   const helmetTitle = [tagTitle, title].filter(Boolean).join(" - ");
 
+  const downloadUrl =
+    typeof input === "string"
+      ? type === "url"
+        ? input
+        : joinUrl(path, version, input.split("/").pop())
+      : undefined;
+
   return (
     <div
       className="pt-(--padding-content-top)"
       data-pagefind-filter="section:openapi"
       data-pagefind-meta="section:openapi"
     >
+      <PagefindSearchMeta name="category">{title}</PagefindSearchMeta>
       <Helmet>
         {helmetTitle && <title>{helmetTitle}</title>}
         {metaDescription && (
           <meta name="description" content={metaDescription} />
         )}
       </Helmet>
+
       <div className="mb-8">
-        <Collapsible className="w-full">
-          <div className="flex flex-col gap-y-4 sm:flex-row justify-around items-start sm:items-end">
+        <Collapsible
+          className="w-full"
+          defaultOpen={options?.expandApiInformation}
+        >
+          <div className="flex flex-col gap-4 sm:flex-row justify-around items-start sm:items-end">
             <div className="flex flex-col flex-1 gap-2">
               <CategoryHeading>{title}</CategoryHeading>
               <Heading
@@ -265,25 +293,32 @@ export const OperationList = ({
               <Endpoint />
             </div>
             <div className="flex flex-col gap-4 sm:items-end">
-              {showVersions && (
-                <Select
-                  // biome-ignore lint/style/noNonNullAssertion: is guaranteed to be defined
-                  onValueChange={(version) => navigate(versions[version]!)}
-                  defaultValue={version}
-                  disabled={!hasMultipleVersions}
-                >
-                  <SelectTrigger className="w-[180px]">
-                    <SelectValue placeholder="Select version" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {Object.entries(versions).map(([version]) => (
-                      <SelectItem key={version} value={version}>
-                        {version}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              )}
+              <div className="flex gap-2 items-center">
+                {showVersions && (
+                  <Select
+                    onValueChange={(version) =>
+                      // biome-ignore lint/style/noNonNullAssertion: is guaranteed to be defined
+                      navigate(versions[version]!.path)
+                    }
+                    defaultValue={version}
+                    disabled={!hasMultipleVersions}
+                  >
+                    <SelectTrigger className="w-[180px]" size="sm">
+                      <SelectValue placeholder="Select version" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {Object.entries(versions).map(([version, { label }]) => (
+                        <SelectItem key={version} value={version}>
+                          {label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
+                {options?.schemaDownload?.enabled && downloadUrl && (
+                  <DownloadSchemaButton downloadUrl={downloadUrl} />
+                )}
+              </div>
               {schema.description && (
                 <CollapsibleTrigger className="flex items-center gap-1 text-sm font-medium text-muted-foreground group">
                   <span>API information</span>
@@ -324,8 +359,9 @@ export const OperationList = ({
         {operations.map((fragment) => (
           <div key={fragment.slug}>
             <OperationListItem
-              serverUrl={selectedServer}
               operationFragment={fragment}
+              globalSelectedServer={globalSelectedServer}
+              shouldLazyHighlight={shouldLazyHighlight}
             />
             <hr className="my-10" />
           </div>

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";
@@ -22,10 +23,12 @@ export type ParameterGroup = (typeof PARAM_GROUPS)[number];
 
 export const OperationListItem = ({
   operationFragment,
-  serverUrl,
+  globalSelectedServer,
+  shouldLazyHighlight,
 }: {
   operationFragment: FragmentType<typeof OperationsFragment>;
-  serverUrl?: string;
+  globalSelectedServer?: string;
+  shouldLazyHighlight?: boolean;
 }) => {
   const operation = useFragment(OperationsFragment, operationFragment);
   const groupedParameters = groupBy(
@@ -34,6 +37,10 @@ export const OperationListItem = ({
   );
   const { options } = useOasConfig();
 
+  // 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 displayServerUrl = globalSelectedServer || operation.servers.at(0)?.url;
+
   const first = operation.responses.at(0);
   const [selectedResponse, setSelectedResponse] = useState(first?.statusCode);
   const isMCPEndpoint = operation.extensions?.["x-mcp-server"] !== undefined;
@@ -66,9 +73,9 @@ export const OperationListItem = ({
               {operation.method.toUpperCase()}
             </span>
             <SelectOnClick className="max-w-full truncate flex cursor-pointer">
-              {serverUrl && (
+              {displayServerUrl && (
                 <div className="text-neutral-400 dark:text-neutral-500 truncate">
-                  {serverUrl.replace(/\/$/, "")}
+                  {displayServerUrl.replace(/\/$/, "")}
                 </div>
               )}
               <div className="text-neutral-900 dark:text-neutral-200">
@@ -81,7 +88,7 @@ export const OperationListItem = ({
         {isMCPEndpoint ? (
           <div className="col-span-full">
             <MCPEndpoint
-              serverUrl={serverUrl}
+              serverUrl={displayServerUrl}
               summary={operation.summary ?? undefined}
               data={operation.extensions?.["x-mcp-server"]}
             />
@@ -114,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 ? (
@@ -139,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>
@@ -166,8 +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/PlaygroundDialogWrapper.tsx

@@ -1,4 +1,3 @@
-import { useAuth } from "zudoku/hooks";
 import type {
   MediaTypeObject,
   OperationsFragmentFragment,
@@ -16,9 +15,6 @@ export const PlaygroundDialogWrapper = ({
   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))
@@ -61,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,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>
   );
 };