zudoku 0.1.1-dev.47 → 0.1.1-dev.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.1.1-dev.47",
+  "version": "0.1.1-dev.49",
   "type": "module",
   "files": [
     "dist",
@@ -54,6 +54,7 @@
     "@monaco-editor/react": "^4.6.0",
     "@pothos/core": "3.41.0",
     "@radix-ui/react-select": "2.1.1",
+    "@radix-ui/react-visually-hidden": "1.1.0",
     "@sentry/node": "8.11.0",
     "@stefanprobst/rehype-extract-toc": "2.2.0",
     "@tailwindcss/typography": "0.5.13",
@@ -66,6 +67,7 @@
     "graphql": "16.9.0",
     "graphql-type-json": "0.3.2",
     "graphql-yoga": "5.2.0",
+    "loglevel": "^1.9.1",
     "lru-cache": "10.2.0",
     "mdx": "0.3.1",
     "object-hash": "3.0.0",
@@ -108,6 +110,7 @@
     "@types/express": "^4.17.21",
     "@types/har-format": "^1.2.15",
     "@types/json-schema": "7.0.15",
+    "@types/loglevel": "^1.6.3",
     "@types/mdx": "2.0.13",
     "@types/node": "20.12.10",
     "@types/object-hash": "^3.0.6",

package/src/app/App.tsx

@@ -4,10 +4,10 @@ import "./main.css";
 import config from "virtual:zudoku-config";
 
 // Virtual Plugins
+import { configuredApiKeysPlugin } from "virtual:zudoku-api-keys-plugin";
 import { configuredApiPlugins } from "virtual:zudoku-api-plugins";
 import { configuredAuthProvider } from "virtual:zudoku-auth";
 import { configuredDocsPlugins } from "virtual:zudoku-docs-plugins";
-import { configuredApiKeysPlugin } from "virtual:zudoku-api-keys-plugin";
 import { configuredRedirectPlugin } from "virtual:zudoku-redirect-plugin";
 
 // Base React Component
@@ -20,11 +20,11 @@ export default function App() {
   return (
     <DevPortal
       meta={{
-        headerTitle: config?.ui?.headerTitle ?? "Developer Portal",
-        pageTitle: config?.ui?.pageTitle ?? "%s | Dev Portal",
-        logo: config?.ui?.logo ?? "https://cdn.zuplo.com/www/favicon.png",
+        headerTitle: config.ui?.headerTitle ?? "Developer Portal",
+        pageTitle: config.ui?.pageTitle ?? "%s | Dev Portal",
+        logo: config.ui?.logo ?? "https://cdn.zuplo.com/www/favicon.png",
         favicon:
-          config?.ui?.metadata?.favicon ??
+          config.ui?.metadata?.favicon ??
           "https://cdn.zuplo.com/www/favicon.png",
       }}
       navigation={config.navigation ?? []}

package/src/app/main.tsx

@@ -1,7 +1,16 @@
+import log from "loglevel";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.js";
 
+log.setDefaultLevel("silent");
+
+if (import.meta.env.DEV) {
+  log.setLevel("debug");
+} else if (localStorage.getItem("ENABLE_DEBUG_LOGS")) {
+  log.setLevel("debug");
+}
+
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />

package/src/lib/authentication/clerk.ts

@@ -9,7 +9,6 @@ const clerkAuth = ({ clerkPubKey }: { clerkPubKey: string }): AuthProvider => {
     clerkApi = new Clerk(clerkPubKey);
 
     await clerkApi.load({});
-    clerkApi.load({});
   })();
 
   return {

package/src/lib/authentication/openid.ts

@@ -1,6 +1,8 @@
+import logger from "loglevel";
 import * as oauth from "oauth4webapi";
 import { DevPortalContext } from "../core/DevPortalContext.js";
 import { type AuthProvider } from "./authentication.js";
+
 const algorithm = "oauth2";
 
 const getAuthServerByIssuer = async (issuer: string) => {
@@ -140,7 +142,7 @@ export const openIdAuth = ({
         state,
       );
       if (oauth.isOAuth2Error(params)) {
-        console.error("Error Response", params);
+        logger.error("Error Response", params);
         throw new Error(); // Handle OAuth 2.0 redirect error
       }
 
@@ -167,7 +169,7 @@ export const openIdAuth = ({
         response,
       );
       if (oauth.isOAuth2Error(oauthResult)) {
-        console.error("Error Response", oauthResult);
+        logger.error("Error Response", oauthResult);
         throw new Error(oauthResult.error);
       }
 

package/src/lib/components/Header.tsx

@@ -5,7 +5,7 @@ import { TopNavigation } from "./TopNavigation.js";
 import { useDevPortal } from "./context/DevPortalProvider.js";
 import { useTheme } from "./context/ThemeContext.js";
 
-export const Header = memo(() => {
+export const Header = memo(function HeaderInner() {
   const [isDark, toggleTheme] = useTheme();
   const { isLoggedIn, email } = useDevPortalState();
   const { login, logout, meta } = useDevPortal();

package/src/lib/components/Select.tsx

@@ -16,14 +16,14 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       className,
     )}
     {...props}
   >
-    {children}
+    <span className="truncate">{children}</span>
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
+      <ChevronDown className="flex-shrink-0 h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));

package/src/lib/components/index.ts

@@ -1,4 +1,3 @@
 export { useMDXComponents } from "@mdx-js/react";
 export { DevPortal } from "./DevPortal.js";
-export { DynamicIcon } from "./DynamicIcon.js";
 export { Link } from "./Link.js";

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

@@ -11,7 +11,6 @@ import type {
 import { cn } from "../../util/cn.js";
 import { joinPath } from "../../util/joinPath.js";
 import { AnchorLink } from "../AnchorLink.js";
-import { DynamicIcon, isValidIcon } from "../DynamicIcon.js";
 import { useNavigationCollapsibleState } from "./useNavigationCollapsibleState.js";
 import { checkHasActiveItem, isLinkItem, isPathItem } from "./util.js";
 
@@ -82,7 +81,7 @@ export const SideNavigationItem = ({
   const linkContent = (
     <div className="flex justify-between w-full">
       <div className="flex items-center gap-2 truncate w-full">
-        {isValidIcon(item.icon) && <DynamicIcon name={item.icon} size={16} />}
+        {item.icon}
         {typeof item.label !== "string" ? (
           item.label
         ) : (

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

@@ -4,19 +4,21 @@ import { cn } from "../../util/cn.js";
 export const SideNavigationWrapper = forwardRef<
   HTMLDivElement,
   PropsWithChildren<{ pushMainContent?: boolean; className?: string }>
->(({ children, className, pushMainContent }, ref) => (
-  <nav
-    // this data attribute is used in `Layout.tsx` to determine if side navigation
-    // is present for the current page so the main content is pushed to the right
-    // it's also important to set `peer` class here.
-    // maybe this could be simplified by adjusting the layout
-    data-navigation={String(pushMainContent)}
-    className={cn(
-      "peer hidden lg:flex flex-col fixed text-sm overflow-y-auto shrink-0 p-[--padding-nav-item] -mx-[--padding-nav-item] pb-20 pt-[--padding-content-top] w-[--side-nav-width] h-[calc(100%-var(--header-height))] scroll-pt-2 gap-2",
-      className,
-    )}
-    ref={ref}
-  >
-    {children}
-  </nav>
-));
+>(function SideNavigation({ children, className, pushMainContent }, ref) {
+  return (
+    <nav
+      // this data attribute is used in `Layout.tsx` to determine if side navigation
+      // is present for the current page so the main content is pushed to the right
+      // it's also important to set `peer` class here.
+      // maybe this could be simplified by adjusting the layout
+      data-navigation={String(pushMainContent)}
+      className={cn(
+        "peer hidden lg:flex flex-col fixed text-sm overflow-y-auto shrink-0 p-[--padding-nav-item] -mx-[--padding-nav-item] pb-20 pt-[--padding-content-top] w-[--side-nav-width] h-[calc(100%-var(--header-height))] scroll-pt-2 gap-2",
+        className,
+      )}
+      ref={ref}
+    >
+      {children}
+    </nav>
+  );
+});

package/src/lib/core/DevPortalContext.ts

@@ -14,12 +14,9 @@ import {
   type NavigationPlugin,
 } from "./plugins.js";
 
-import type { LucideIcon } from "lucide-react";
-import type { IconName } from "../components/DynamicIcon.js";
-
 export interface ApiIdentity {
   authorizeRequest: (request: Request) => Request;
-  name: string;
+  label: string;
   id: string;
 }
 
@@ -27,7 +24,7 @@ type BaseNavigationCategoryItem = {
   label: ReactNode;
   title?: string;
   muted?: boolean;
-  icon?: ReactNode | IconName;
+  icon?: ReactNode;
 };
 
 export type PathNavigationCategoryItem = BaseNavigationCategoryItem & {
@@ -48,7 +45,7 @@ export type NavigationCategory = {
   path?: string;
   expanded?: boolean;
   collapsible?: boolean;
-  icon?: LucideIcon;
+  icon?: ReactNode;
   children: NavigationCategoryItem[];
 };
 

package/src/lib/oas/graphql/index.ts

@@ -69,7 +69,7 @@ const getAllOperations = (paths?: PathsObject, tag?: string) => {
       if (!value?.[method]) return [];
 
       const operation = value[method] as OperationObject;
-      const pathParameters = value?.parameters ?? [];
+      const pathParameters = value.parameters ?? [];
       const operationParameters = operation.parameters ?? [];
 
       // parameters are inherited from the parent path object,
@@ -189,7 +189,7 @@ const ParameterItem = builder
         resolve: (parent) =>
           Object.entries(parent.examples ?? {}).map(([name, value]) => ({
             name,
-            ...value,
+            ...(typeof value === "string" ? { value } : value),
           })),
         nullable: true,
       }),

package/src/lib/plugins/api-key/SettingsApiKeys.tsx

@@ -51,7 +51,7 @@ export const SettingsApiKeys = ({
 
       <Card>
         <ul className="grid grid-cols-[min-content_1fr_min-content] ">
-          {data?.map((key) => (
+          {data.map((key) => (
             <li
               className="border-b border-border p-5 grid grid-cols-subgrid col-span-full gap-2 items-center"
               key={key.id}

package/src/lib/plugins/api-key/index.tsx

@@ -3,8 +3,8 @@ import {
   type ApiIdentityPlugin,
   type DevPortalPlugin,
 } from "../../core/plugins.js";
-import { SettingsApiKeys } from "./SettingsApiKeys.js";
 import { CreateApiKey } from "./CreateApiKey.js";
+import { SettingsApiKeys } from "./SettingsApiKeys.js";
 
 export type ApiKeyResults = Promise<ApiKey[]>;
 const DEFAULT_API_KEY_ENDPOINT =
@@ -25,9 +25,9 @@ export type ApiKeyService = {
   ) => Promise<void>;
 };
 
-export type GetApiKeysOptions = ApiKeyService | { endpoint: string } | {};
+export type GetApiKeysOptions = ApiKeyService | { endpoint: string } | object;
 
-export type ApiKeyPluginOptions = {} & GetApiKeysOptions;
+export type ApiKeyPluginOptions = object & GetApiKeysOptions;
 
 export interface ApiKey {
   id: string;
@@ -107,7 +107,7 @@ export const apiKeyPlugin = (
           return request;
         },
         id: key.id,
-        name: key.id,
+        label: key.description ?? key.id,
       }));
     },
     getRoutes: () => {

package/src/lib/plugins/markdown/MdxPage.tsx

@@ -1,3 +1,4 @@
+import { useMDXComponents } from "@mdx-js/react";
 import { useMemo, type PropsWithChildren, type ReactNode } from "react";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
 import { Heading } from "../../components/Heading.js";
@@ -6,20 +7,24 @@ import { useTopNavigationItem } from "../../components/context/DevPortalProvider
 import { isPathItem } from "../../components/navigation/util.js";
 import { Helmet } from "../../core/helmet.js";
 import { Link, useLocation } from "../../core/router.js";
+import type { MdxComponentsType } from "../../util/MdxComponents.js";
 import { cn } from "../../util/cn.js";
 import slugify from "../../util/slugify.js";
 import { traverseNavigation } from "../../util/traverseNavigation.js";
 import { Toc } from "./Toc.js";
 import type { MDXImport } from "./index.js";
-import { useMDXComponents } from "@mdx-js/react";
-import type { MdxComponentsType } from "../../util/MdxComponents.js";
 
 const MarkdownHeadings = {
   h2: ({ children, id }) => (
-    <Heading level={2} id={id} children={children} registerSidebarAnchor />
+    <Heading level={2} id={id} registerSidebarAnchor>
+      {children}
+    </Heading>
   ),
   h3: ({ children, id }) => (
-    <Heading level={3} id={id} children={children} registerSidebarAnchor />
+    <Heading level={3} id={id} registerSidebarAnchor>
+      {" "}
+      {children}
+    </Heading>
   ),
 } satisfies MdxComponentsType;
 
@@ -43,9 +48,9 @@ export const MdxPage = ({
       })
     : undefined;
 
-  const title = frontmatter?.title;
-  const category = frontmatter?.category ?? categoryTitle;
-  const hideToc = frontmatter?.toc === false;
+  const title = frontmatter.title;
+  const category = frontmatter.category ?? categoryTitle;
+  const hideToc = frontmatter.toc === false;
 
   const pageTitle =
     tableOfContents.find((item) => item.depth === 1)?.value ?? title;
@@ -100,7 +105,7 @@ export const MdxPage = ({
               {title}
             </Heading>
           )}
-          {frontmatter?.description && (
+          {frontmatter.description && (
             <p className="prose-lg">{frontmatter.description}</p>
           )}
         </header>

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

@@ -74,7 +74,7 @@ export const ColorizedParam = ({
         className="absolute inset-0 border-b-2 transition-opacity duration-200 opacity-30 group-data-[active=true]:opacity-100"
         style={{ borderColor, backgroundColor }}
       />
-      <span className="relative">{children || name}</span>
+      <span className="relative">{children ?? name}</span>
     </span>
   );
 };

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

@@ -23,19 +23,19 @@ export const MakeRequest = ({
 
   const headers = operation.parameters
     ?.filter((p) => p.in === "header")
-    ?.map((p) => ({
+    .map((p) => ({
       name: p.name,
-      value: "",
+      value: p.examples?.find((x) => x.value)?.value ?? "",
     }));
   const queryParams = operation.parameters
     ?.filter((p) => p.in === "query")
-    ?.map((p) => ({
+    .map((p) => ({
       name: p.name,
       value: "",
     }));
   const pathParams = operation.parameters
     ?.filter((p) => p.in === "path")
-    ?.map((p) => ({
+    .map((p) => ({
       name: p.name,
       value: "",
     }));

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

@@ -24,6 +24,13 @@ export const OperationsFragment = graphql(/* GraphQL */ `
       required
       schema
       style
+      examples {
+        name
+        description
+        externalValue
+        value
+        summary
+      }
     }
     requestBody {
       content {
@@ -94,7 +101,7 @@ export const OperationList = () => {
         </Heading>
         <Markdown content={result.data.schema.description ?? ""} />
       </div>
-      {result.data?.schema.tags
+      {result.data.schema.tags
         .filter((tag) => tag.operations.length > 0)
         .map((tag) => (
           <div key={tag.name}>

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

@@ -17,7 +17,7 @@ export const OperationListItem = ({
   operationFragment: FragmentType<typeof OperationsFragment>;
 }) => {
   const operation = useFragment(OperationsFragment, operationFragment);
-  const groupedParameters = groupBy(operation?.parameters ?? [], "in");
+  const groupedParameters = groupBy(operation.parameters ?? [], "in");
   const first = operation.responses.find((re) => re.statusCode === "200");
   return (
     <div
@@ -37,7 +37,7 @@ export const OperationListItem = ({
         {operation.parameters && operation.parameters.length > 0 && (
           <div className="mt-4">
             {PARAM_GROUPS.flatMap((group) =>
-              groupedParameters?.[group]?.length ? (
+              groupedParameters[group].length ? (
                 <ParameterList
                   key={group}
                   id={operation.slug}

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

@@ -15,7 +15,7 @@ export const ResponsesSidecarBox = ({
   const [tabIndex, setTabIndex] = useState(0);
 
   const activeTab = responses[tabIndex];
-  const schema = activeTab?.content?.[0]?.schema as SchemaObject | undefined;
+  const schema = activeTab.content?.[0]?.schema as SchemaObject | undefined;
 
   return (
     <SidecarBox.Root>

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

@@ -1,10 +1,10 @@
-import { SchemaObject } from "../../oas/parser/index.js";
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { ListPlusIcon } from "lucide-react";
 import { useState } from "react";
-import { cn } from "../../util/cn.js";
 import { Markdown } from "../../components/Markdown.js";
-import * as Collapsible from "@radix-ui/react-collapsible";
+import { SchemaObject } from "../../oas/parser/index.js";
 import { Button } from "../../ui/Button.js";
-import { ListPlusIcon } from "lucide-react";
+import { cn } from "../../util/cn.js";
 
 export const SchemaListView = ({
   name,
@@ -55,6 +55,7 @@ export const SchemaListView = ({
         {Object.entries(groups).map(([group, properties]) => {
           return (
             <SchemaListViewItemGroup
+              key={group}
               defaultOpen={defaultOpen}
               group={group as any}
               nestingLevel={level}
@@ -112,10 +113,11 @@ const SchemaListViewItemGroup = ({
       <Collapsible.Content>
         {properties.map(([propertyName, property]) => (
           <SchemaListViewItem
+            key={propertyName}
             property={property}
             propertyName={propertyName}
             nestingLevel={nestingLevel}
-            isRequired={required?.includes(propertyName) ?? false}
+            isRequired={required.includes(propertyName)}
           />
         ))}
       </Collapsible.Content>
@@ -149,19 +151,16 @@ const SchemaListViewItem = ({
         </code>
 
         {property.type && (
-          <span className="text-muted-foreground">{property.type}</span>
+          <span className="text-xs text-muted-foreground">{property.type}</span>
         )}
         {property.deprecated && (
-          <span className="text-muted-foreground">Deprecated</span>
+          <span className="text-xs text-muted-foreground">Deprecated</span>
         )}
         {!isRequired && (
           <span className="py-px px-1.5 font-medium text-xs border border-border rounded-lg">
             optional {property.required}
           </span>
         )}
-        {/*{property.type === "object" && (*/}
-        {/*  <div className="absolute right-3">+</div>*/}
-        {/*)}*/}
       </div>
       {property.description && (
         <Markdown

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

@@ -1,5 +1,7 @@
+import { HTTPSnippet } from "@zudoku/httpsnippet";
 import { Fragment, useMemo, useState } from "react";
 import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
+import type { SchemaObject } from "../../oas/parser/index.js";
 import { cn } from "../../util/cn.js";
 import { ColorizedParam } from "./ColorizedParam.js";
 import { MakeRequest } from "./MakeRequest.js";
@@ -9,9 +11,7 @@ import { RequestBodySidecarBox } from "./RequestBodySidecarBox.js";
 import { ResponsesSidecarBox } from "./ResponsesSidecarBox.js";
 import { Select } from "./Select.js";
 import * as SidecarBox from "./SidecarBox.js";
-import { HTTPSnippet } from "@zudoku/httpsnippet";
 import { generateSchemaExample } from "./util/generateSchemaExample.js";
-import type { SchemaObject } from "../../oas/parser/index.js";
 
 const getConverted = (snippet: HTTPSnippet, option: string) => {
   let converted;
@@ -105,7 +105,7 @@ export const Sidecar = ({
       } as never, // 👈 never touch this
     );
 
-    return getConverted(snippet, option) ?? "";
+    return getConverted(snippet, option);
   }, [option, operation.method, operation.path, requestBodyContent]);
 
   return (

package/src/lib/plugins/openapi/graphql/gql.ts

@@ -15,7 +15,7 @@ import type { TypedDocumentNode as DocumentNode } from "@graphql-typed-document-
 const documents = {
   "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n    }\n  }\n":
     types.GetServerQueryDocument,
-  "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n":
+  "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n":
     types.OperationsFragmentFragmentDoc,
   "\n  query AllOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      description\n      title\n      url\n      version\n      tags {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n      }\n    }\n  }\n":
     types.AllOperationsDocument,
@@ -47,8 +47,8 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n",
-): (typeof documents)["\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n"];
+  source: "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n",
+): (typeof documents)["\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

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

@@ -190,6 +190,14 @@ export type OperationsFragmentFragment = {
     required?: boolean | null;
     schema?: any | null;
     style?: string | null;
+    examples?: Array<{
+      __typename?: "ExampleItem";
+      name: string;
+      description?: string | null;
+      externalValue?: string | null;
+      value?: string | null;
+      summary?: string | null;
+    }> | null;
   }> | null;
   requestBody?: {
     __typename?: "RequestBodyObject";
@@ -301,6 +309,29 @@ export const OperationsFragmentFragmentDoc = {
                 { kind: "Field", name: { kind: "Name", value: "required" } },
                 { kind: "Field", name: { kind: "Name", value: "schema" } },
                 { kind: "Field", name: { kind: "Name", value: "style" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "examples" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      { kind: "Field", name: { kind: "Name", value: "name" } },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "description" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "externalValue" },
+                      },
+                      { kind: "Field", name: { kind: "Name", value: "value" } },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "summary" },
+                      },
+                    ],
+                  },
+                },
               ],
             },
           },
@@ -590,6 +621,29 @@ export const AllOperationsDocument = {
                 { kind: "Field", name: { kind: "Name", value: "required" } },
                 { kind: "Field", name: { kind: "Name", value: "schema" } },
                 { kind: "Field", name: { kind: "Name", value: "style" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "examples" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      { kind: "Field", name: { kind: "Name", value: "name" } },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "description" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "externalValue" },
+                      },
+                      { kind: "Field", name: { kind: "Name", value: "value" } },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "summary" },
+                      },
+                    ],
+                  },
+                },
               ],
             },
           },

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

@@ -1,16 +1,16 @@
+import { forwardRef, InputHTMLAttributes } from "react";
 import { Control, useFieldArray, UseFormRegister } from "react-hook-form";
+import { cn } from "../../../util/cn.js";
+import { DATA_ATTR, usePastellizedColor } from "../ColorizedParam.js";
 import { InlineInput } from "./InlineInput.js";
 import { PlaygroundForm } from "./Playground.js";
-import { DATA_ATTR, usePastellizedColor } from "../ColorizedParam.js";
-import { forwardRef, InputHTMLAttributes } from "react";
-import { cn } from "../../../util/cn.js";
 
 type ParameterValueProps = {
   part: string;
 } & InputHTMLAttributes<HTMLInputElement>;
 
 const ParameterValue = forwardRef<HTMLInputElement, ParameterValueProps>(
-  ({ part, className, ...props }, ref) => {
+  function ParameterValue({ part, className, ...props }, ref) {
     const color = usePastellizedColor(part);
     return (
       <InlineInput