zudoku 0.25.2 → 0.26.0

package/lib/zudoku.plugin-api-catalog.js

@@ -1,10 +1,10 @@
-import { j as e } from "./jsx-runtime-Dx-03ztt.js";
+import { j as e } from "./jsx-runtime-Bdg6XQ1m.js";
 import { s as j } from "./index-LNp6rxyU.js";
-import { u as b } from "./ZudokuContext-hmLMUdf2.js";
-import { b as y } from "./chunk-D52XG6IA-Dl7HLe6j.js";
+import { u as b } from "./ZudokuContext-D3ayHjP-.js";
+import { b as y } from "./chunk-SYFQ2XB5-KWlHsT7t.js";
 import { Head as v, Link as N } from "./zudoku.components.js";
-import { u as w } from "./state-CFQsUZUP.js";
-import { M as C } from "./Markdown-CZDLNOFc.js";
+import { u as w } from "./state-mM7uaXTW.js";
+import { M as C } from "./Markdown-BrfrjEk_.js";
 import { c as h } from "./cn-qaFjX9_3.js";
 const f = (r, n) => j(`${r}-${n}`), k = ({
   items: r,

package/lib/zudoku.plugin-api-keys.js

@@ -1,14 +1,14 @@
-import { j as e } from "./jsx-runtime-Dx-03ztt.js";
+import { j as e } from "./jsx-runtime-Bdg6XQ1m.js";
 import { RotateCwIcon as g, TrashIcon as f, EyeOffIcon as j, EyeIcon as v, CheckIcon as w, CopyIcon as b, FileKey2Icon as K } from "lucide-react";
-import { D as k, S as m, R as N } from "./SlotletProvider-pfc9oejW.js";
+import { D as k, S as m, R as N } from "./SlotletProvider-DPbx9KdU.js";
 import { i as c } from "./invariant-Caa8-XvF.js";
-import { u as d, S as I, a as S, b as A, c as C, d as E, e as x } from "./Select-B_IxRUUC.js";
-import { a as P } from "./index.esm-BnnBRKJX.js";
-import { a as D, L as u, O as R } from "./chunk-D52XG6IA-Dl7HLe6j.js";
-import { a as y, e as q, u as O } from "./ZudokuContext-hmLMUdf2.js";
+import { u as d, S as I, a as S, b as A, c as C, d as E, e as x } from "./Select-DkOpAG0c.js";
+import { a as P } from "./index.esm-CrSoEshU.js";
+import { a as D, L as u, O as R } from "./chunk-SYFQ2XB5-KWlHsT7t.js";
+import { a as y, e as q, u as O } from "./ZudokuContext-D3ayHjP-.js";
 import { Button as l } from "./ui/Button.js";
 import { Input as z } from "./ui/Input.js";
-import { u as F } from "./hook-CHq7pFyz.js";
+import { u as F } from "./hook-DUyACbIK.js";
 import { useState as p } from "react";
 import { c as T } from "./cn-qaFjX9_3.js";
 const L = ({ service: t }) => {

package/lib/zudoku.plugin-custom-pages.js

@@ -1,8 +1,8 @@
-import { j as o } from "./jsx-runtime-Dx-03ztt.js";
+import { j as o } from "./jsx-runtime-Bdg6XQ1m.js";
 import a from "react";
-import { P as n } from "./Markdown-CZDLNOFc.js";
+import { P as n } from "./Markdown-BrfrjEk_.js";
 import { c } from "./cn-qaFjX9_3.js";
-import { u as p } from "./useExposedProps-DE9lR6MF.js";
+import { u as p } from "./useExposedProps-BBHR7aLM.js";
 const u = ({
   element: t,
   render: s,

package/lib/zudoku.plugin-markdown.js

@@ -1,7 +1,7 @@
 var d = Object.defineProperty;
 var m = (n, t, o) => t in n ? d(n, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : n[t] = o;
 var f = (n, t, o) => m(n, typeof t != "symbol" ? t + "" : t, o);
-import { j as P } from "./jsx-runtime-Dx-03ztt.js";
+import { j as P } from "./jsx-runtime-Bdg6XQ1m.js";
 import { f as u } from "./__vite-browser-external-BYRIRx8p.js";
 const x = "/pages/**/*.{md,mdx}", D = [".md", ".mdx"];
 class c {
@@ -74,7 +74,7 @@ const C = (n) => ({
         const h = {
           path: r,
           lazy: async () => {
-            const { MdxPage: l } = await import("./MdxPage-DKMbBROv.js"), { default: p, ...g } = await a();
+            const { MdxPage: l } = await import("./MdxPage-LNZLj_A5.js"), { default: p, ...g } = await a();
             return {
               element: /* @__PURE__ */ P.jsx(
                 l,

package/lib/zudoku.plugin-openapi.js

@@ -1,9 +1,9 @@
-import "./jsx-runtime-Dx-03ztt.js";
-import "./chunk-D52XG6IA-Dl7HLe6j.js";
-import { o as a } from "./index-BNx95gkf.js";
-import "./ZudokuContext-hmLMUdf2.js";
+import "./jsx-runtime-Bdg6XQ1m.js";
+import "./chunk-SYFQ2XB5-KWlHsT7t.js";
+import { o as a } from "./index-CaILD1AV.js";
+import "./ZudokuContext-D3ayHjP-.js";
 import "lucide-react";
-import "./hook-CHq7pFyz.js";
+import "./hook-DUyACbIK.js";
 import "./ui/Button.js";
 export {
   a as openApiPlugin

package/lib/zudoku.plugin-redirect.js

@@ -1,4 +1,4 @@
-import { r as o } from "./chunk-D52XG6IA-Dl7HLe6j.js";
+import { r as o } from "./chunk-SYFQ2XB5-KWlHsT7t.js";
 const a = (r) => ({
   getRoutes: () => r.redirects.map(({ from: e, to: t }) => ({
     path: e,

package/lib/zudoku.plugin-search-inkeep.js

@@ -1,5 +1,5 @@
-import { j as i } from "./jsx-runtime-Dx-03ztt.js";
-import { useRef as l, useState as f, useMemo as m, useEffect as u } from "react";
+import { j as i } from "./jsx-runtime-Bdg6XQ1m.js";
+import { useRef as d, useState as f, useMemo as m, useEffect as c } from "react";
 import { C as g } from "./ClientOnly-E7hGysn1.js";
 const h = {
   theme: {
@@ -25,7 +25,7 @@ const h = {
   onClose: n,
   settings: p
 }) => {
-  const o = l(null), c = l(null), [s, d] = f(
+  const o = d(null), u = d(null), [s, l] = f(
     typeof Inkeep < "u"
   ), a = m(
     () => ({
@@ -44,17 +44,17 @@ const h = {
     }),
     [e, n, r, p, o]
   );
-  return u(() => {
+  return c(() => {
     if (s) return;
     const t = setInterval(() => {
-      typeof Inkeep < "u" && (d(!0), clearInterval(t));
+      typeof Inkeep < "u" && (l(!0), clearInterval(t));
     }, 100);
     return () => clearInterval(t);
-  }, [s]), u(() => {
-    !s || c.current || (c.current = Inkeep().embed(a));
-  }, [a, s]), u(() => {
+  }, [s]), c(() => {
+    !s || u.current || (u.current = Inkeep().embed(a));
+  }, [a, s]), c(() => {
     var t;
-    (t = c.current) == null || t.render({ ...a, isOpen: e });
+    (t = u.current) == null || t.render({ ...a, isOpen: e });
   }, [a, e]), /* @__PURE__ */ i.jsx("div", { ref: o });
 }, x = (r) => ({
   getHead: () => /* @__PURE__ */ i.jsx(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.25.2",
+  "version": "0.26.0",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -78,10 +78,6 @@
       "import": "./lib/zudoku.plugin-search-inkeep.js",
       "types": "./dist/lib/plugins/search-inkeep/index.d.ts"
     },
-    "./openapi-worker": {
-      "import": "./lib/zudoku.openapi-worker.js",
-      "types": "./dist/lib/plugins/openapi-worker.d.ts"
-    },
     "./components": {
       "import": "./lib/zudoku.components.js",
       "types": "./dist/lib/components/index.d.ts"
@@ -115,42 +111,42 @@
     }
   },
   "dependencies": {
-    "@envelop/core": "5.0.2",
+    "@envelop/core": "5.0.3",
     "@graphql-typed-document-node/core": "3.2.0",
-    "@hookform/resolvers": "3.9.1",
-    "@lekoarts/rehype-meta-as-attributes": "3.0.1",
+    "@hookform/resolvers": "3.10.0",
+    "@lekoarts/rehype-meta-as-attributes": "3.0.2",
     "@mdx-js/react": "3.1.0",
     "@mdx-js/rollup": "3.1.0",
     "@pothos/core": "3.41.0",
     "@radix-ui/react-accordion": "1.2.2",
     "@radix-ui/react-alert-dialog": "1.1.4",
     "@radix-ui/react-aspect-ratio": "1.1.1",
-    "@radix-ui/react-checkbox": "1.1.2",
-    "@radix-ui/react-collapsible": "1.1.1",
-    "@radix-ui/react-dialog": "1.1.2",
-    "@radix-ui/react-dropdown-menu": "2.1.2",
-    "@radix-ui/react-hover-card": "1.1.2",
-    "@radix-ui/react-label": "2.1.0",
-    "@radix-ui/react-popover": "1.1.2",
-    "@radix-ui/react-progress": "1.1.0",
-    "@radix-ui/react-radio-group": "1.2.1",
-    "@radix-ui/react-scroll-area": "1.2.1",
-    "@radix-ui/react-select": "2.1.2",
-    "@radix-ui/react-slider": "1.2.1",
-    "@radix-ui/react-slot": "1.1.0",
-    "@radix-ui/react-switch": "1.1.1",
-    "@radix-ui/react-tabs": "1.1.1",
-    "@radix-ui/react-toggle": "1.1.0",
+    "@radix-ui/react-checkbox": "1.1.3",
+    "@radix-ui/react-collapsible": "1.1.2",
+    "@radix-ui/react-dialog": "1.1.4",
+    "@radix-ui/react-dropdown-menu": "2.1.4",
+    "@radix-ui/react-hover-card": "1.1.4",
+    "@radix-ui/react-label": "2.1.1",
+    "@radix-ui/react-popover": "1.1.4",
+    "@radix-ui/react-progress": "1.1.1",
+    "@radix-ui/react-radio-group": "1.2.2",
+    "@radix-ui/react-scroll-area": "1.2.2",
+    "@radix-ui/react-select": "2.1.4",
+    "@radix-ui/react-slider": "1.2.2",
+    "@radix-ui/react-slot": "1.1.1",
+    "@radix-ui/react-switch": "1.1.2",
+    "@radix-ui/react-tabs": "1.1.2",
+    "@radix-ui/react-toggle": "1.1.1",
     "@radix-ui/react-toggle-group": "1.1.1",
-    "@radix-ui/react-tooltip": "1.1.4",
-    "@radix-ui/react-visually-hidden": "1",
-    "@sentry/node": "8.42.0",
+    "@radix-ui/react-tooltip": "1.1.6",
+    "@radix-ui/react-visually-hidden": "1.1.1",
+    "@sentry/node": "8.50.0",
     "@sindresorhus/slugify": "2.2.1",
-    "@stefanprobst/rehype-extract-toc": "2.2.0",
+    "@stefanprobst/rehype-extract-toc": "2.2.1",
     "@tailwindcss/typography": "0.5.16",
-    "@tanstack/react-query": "5.62.3",
-    "@types/react": "19.0.1",
-    "@types/react-dom": "19.0.1",
+    "@tanstack/react-query": "5.64.2",
+    "@types/react": "19.0.7",
+    "@types/react-dom": "19.0.3",
     "@vitejs/plugin-react": "4.3.4",
     "@zudoku/httpsnippet": "10.0.9",
     "@zudoku/react-helmet-async": "2.0.5",
@@ -161,13 +157,13 @@
     "cmdk": "1.0.4",
     "devlop": "^1.1.0",
     "dotenv": "16.4.7",
-    "embla-carousel-react": "8.5.1",
+    "embla-carousel-react": "8.5.2",
     "estree-util-value-to-estree": "3.2.1",
     "express": "4.21.2",
-    "glob": "11.0.0",
+    "glob": "11.0.1",
     "graphql": "16.10.0",
     "graphql-type-json": "0.3.2",
-    "graphql-yoga": "5.10.4",
+    "graphql-yoga": "5.10.10",
     "gray-matter": "4.0.3",
     "hast-util-to-jsx-runtime": "^2.3.2",
     "hast-util-to-string": "3.0.1",
@@ -175,20 +171,20 @@
     "http-terminator": "3.2.0",
     "loglevel": "1.9.2",
     "lru-cache": "11.0.2",
-    "lucide-react": "0.468.0",
+    "lucide-react": "0.473.0",
     "next-themes": "0.4.4",
     "oauth4webapi": "2.17.0",
     "object-hash": "3.0.0",
     "openapi-types": "12.1.3",
     "picocolors": "1.1.1",
-    "postcss": "8.4.49",
-    "posthog-node": "4.3.1",
-    "prism-react-renderer": "2.4.0",
+    "postcss": "8.5.1",
+    "posthog-node": "4.4.1",
+    "prism-react-renderer": "2.4.1",
     "prismjs": "1.29.0",
-    "react-error-boundary": "4.1.2",
-    "react-hook-form": "7.54.0",
+    "react-error-boundary": "5.0.0",
+    "react-hook-form": "7.54.2",
     "react-is": "19.0.0",
-    "react-router": "7.0.2",
+    "react-router": "7.1.3",
     "rehype-raw": "7.0.0",
     "rehype-slug": "6.0.0",
     "remark-comment": "1.0.0",
@@ -199,26 +195,26 @@
     "remark-mdx-frontmatter": "5.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.1",
-    "rollup": "4.28.1",
+    "rollup": "4.31.0",
     "semver": "7.6.3",
     "sitemap": "8.0.0",
     "spin-delay": "2.0.1",
     "strip-ansi": "7.1.0",
     "tailwind-merge": "2.6.0",
-    "tailwindcss": "3.4.16",
+    "tailwindcss": "3.4.17",
     "tsx": "^4.19.2",
     "ulidx": "2.4.1",
     "unified": "^11.0.5",
     "unist-util-visit": "5.0.0",
     "urql": "4.2.1",
-    "vaul": "1.1.1",
+    "vaul": "1.1.2",
     "vfile": "6.0.3",
-    "vite": "6.0.3",
-    "yaml": "2.6.1",
+    "vite": "6.0.11",
+    "yaml": "2.7.0",
     "yargs": "17.7.2",
-    "zod": "3.23.8",
+    "zod": "3.24.1",
     "zod-validation-error": "3.4.0",
-    "zustand": "5.0.2"
+    "zustand": "5.0.3"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "5.0.3",
@@ -236,13 +232,13 @@
     "@types/semver": "7.5.8",
     "@types/unist": "^3.0.3",
     "@types/yargs": "17.0.33",
-    "@vitest/coverage-v8": "2.1.8",
+    "@vitest/coverage-v8": "3.0.2",
     "mdast-util-mdx": "3.0.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "rollup-plugin-visualizer": "5.14.0",
-    "typescript": "5.7.2",
-    "vitest": "2.1.8"
+    "typescript": "5.7.3",
+    "vitest": "3.0.2"
   },
   "peerDependencies": {
     "react": ">=19",
@@ -253,12 +249,11 @@
     "@sentry/react": "^8.50.0"
   },
   "scripts": {
-    "build": "tsc --project tsconfig.json",
+    "build": "tsc --project tsconfig.app.json",
     "build:vite": "vite build",
     "generate:icon-types": "tsx ./scripts/generate-icon-types.ts",
     "build:standalone:vite": "vite build --mode standalone --config vite.standalone.config.ts",
     "build:standalone:html": "cp ./src/app/standalone.html ./standalone/standalone.html && cp ./src/app/demo.html ./standalone/demo.html && cp ./src/app/demo-cdn.html ./standalone/index.html",
-    "hack:fix-worker-paths": "node ./scripts/hack-worker.mjs",
     "clean": "tsc --build --clean",
     "codegen": "graphql-codegen --config ./src/codegen.ts",
     "test": "vitest run"

package/src/app/demo.tsx

@@ -48,7 +48,6 @@ const config = {
       type: "url",
       input: apiUrl,
       navigationId: "/",
-      inMemory: true,
     }),
   ],
 } satisfies ZudokuConfig;

package/src/app/standalone.tsx

@@ -43,7 +43,6 @@ const config = {
       type: "url",
       input: apiUrl!,
       navigationId: "/",
-      inMemory: true,
     }),
   ],
 } satisfies ZudokuConfig;

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

@@ -112,10 +112,10 @@ export const SidebarCategory = ({
         className={cn(
           // CollapsibleContent class is used to animate and it should only be applied when the user has triggered the toggle
           hasInteracted && "CollapsibleContent",
-          "my-1",
+          "ms-6 my-1",
         )}
       >
-        <ul className={"relative"}>
+        <ul className="relative after:absolute after:-left-[--padding-nav-item] after:translate-x-[1.5px] after:top-0 after:bottom-0 after:w-px after:bg-border">
           {category.items.map((item) => (
             <SidebarItem
               key={

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

@@ -6,8 +6,6 @@ import {
 } from "@sindresorhus/slugify";
 import { GraphQLJSON, GraphQLJSONObject } from "graphql-type-json";
 import { createYoga, type YogaServerOptions } from "graphql-yoga";
-import { LRUCache } from "lru-cache";
-import hashit from "object-hash";
 import {
   HttpMethods,
   validate,
@@ -58,11 +56,10 @@ export const createOperationSlug = (
   );
 };
 
-const cache = new LRUCache<string, OpenAPIDocument>({
-  ttl: 60 * 10 * 1000,
-  ttlAutopurge: true,
-  fetchMethod: (_key, _oldValue, { context }) => validate(context as string),
-});
+export type SchemaImports = Record<
+  string,
+  () => Promise<{ schema: OpenAPIDocument }>
+>;
 
 const builder = new SchemaBuilder<{
   Scalars: {
@@ -71,6 +68,7 @@ const builder = new SchemaBuilder<{
   };
   Context: {
     schema: OpenAPIDocument;
+    schemaImports?: SchemaImports;
   };
 }>({});
 
@@ -441,11 +439,6 @@ const Schema = builder.objectRef<OpenAPIDocument>("Schema").implement({
   }),
 });
 
-const loadOpenAPISchema = async (input: NonNullable<unknown>) => {
-  const hash = hashit(input);
-  return await cache.forceFetch(hash, { context: input });
-};
-
 const SchemaSource = builder.enumType("SchemaType", {
   values: ["url", "file", "raw"] as const,
 });
@@ -459,10 +452,21 @@ builder.queryType({
         input: t.arg({ type: JSONScalar, required: true }),
       },
       resolve: async (_, args, ctx) => {
-        const schema = await loadOpenAPISchema(args.input!);
-        // for easier access of the whole schema in children resolvers
-        ctx.schema = schema;
+        let schema: OpenAPIDocument;
 
+        if (args.type === "file" && typeof args.input === "string") {
+          const loadSchema = ctx.schemaImports?.[args.input];
+
+          if (!loadSchema) {
+            throw new Error(`No schema loader found for path: ${args.input}`);
+          }
+          const module = await loadSchema();
+          schema = module.schema;
+        } else {
+          schema = await validate(args.input as string);
+        }
+
+        ctx.schema = schema;
         return schema;
       },
     }),

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

@@ -7,18 +7,29 @@ export const DATA_ATTR = "data-linked-param";
 
 export const usePastellizedColor = (name: string) => {
   const { resolvedTheme } = useTheme();
-  return pastellize(
-    name,
-    resolvedTheme === "light" ? { saturation: 85, lightness: 50 } : undefined,
-  );
+
+  return {
+    text: pastellize(
+      name,
+      resolvedTheme === "light" ? { saturation: 95, lightness: 38 } : {},
+    ),
+    background: pastellize(
+      name,
+      resolvedTheme === "light" ? { saturation: 85, lightness: 40 } : {},
+    ),
+  };
+};
+
+export const useParamColor = (name: string) => {
+  const normalized = name.replace(/[{}]/g, "");
+  return usePastellizedColor(normalized);
 };
 
 export const ColorizedParam = ({
   name,
   className,
-  backgroundOpacity = "100%",
-  borderOpacity = "100%",
   slug,
+  title,
   children,
   onClick,
 }: {
@@ -28,15 +39,17 @@ export const ColorizedParam = ({
   borderOpacity?: string;
   slug?: string;
   children?: ReactNode;
+  title?: string;
   onClick?: () => void;
 }) => {
   const ref = useRef<HTMLSpanElement>(null);
-  const normalized = name.replace(/[{}]/g, "");
   const normalizedSlug = slug?.replace(/[{}]/g, "");
-  const color = usePastellizedColor(normalized);
+  const normalized = name.replace(/[{}]/g, "");
+  const { text, background } = usePastellizedColor(normalized);
 
-  const borderColor = `hsl(${color} / ${borderOpacity})`;
-  const backgroundColor = `hsl(${color} / ${backgroundOpacity})`;
+  const textColor = `hsl(${text} / 100%)`;
+  const backgroundColor = `hsl(${background} / 10%)`;
+  const borderColor = `hsl(${background} / 50%)`;
 
   useEffect(() => {
     if (!normalizedSlug) return;
@@ -76,15 +89,19 @@ export const ColorizedParam = ({
     <span
       {...{ [DATA_ATTR]: normalizedSlug }}
       className={cn(
-        "relative after:rounded after:absolute after:inset-0 after:-bottom-0.5 after:border-b-2 after:transition-opacity after:duration-200",
-        "after:pointer-events-none after:border-[--border-color] after:opacity-30 after:data-[active=true]:opacity-100",
+        "relative inline-block rounded transition-all duration-100",
+        "rounded-lg",
+        "border border-[--border-color] p-0.5 text-[--param-color] bg-[--background-color]",
+        "data-[active=true]:border-[--param-color] data-[active=true]:shadow data-[active=true]:-translate-y-px",
         className,
       )}
+      title={title}
       suppressHydrationWarning
       ref={ref}
       onClick={onClick}
       style={
         {
+          "--param-color": textColor,
           "--border-color": borderColor,
           "--background-color": backgroundColor,
         } as CSSProperties

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

@@ -13,6 +13,7 @@ import { useSelectedServerStore } from "../../authentication/state.js";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
 import { Heading } from "../../components/Heading.js";
 import { Markdown, ProseClasses } from "../../components/Markdown.js";
+import { useApiIdentities } from "../../components/context/ZudokuContext.js";
 import { cn } from "../../util/cn.js";
 import { Endpoint } from "./Endpoint.js";
 import { OperationListItem } from "./OperationListItem.js";
@@ -118,6 +119,9 @@ export const OperationList = () => {
   const description = result.data.schema.description;
   const navigate = useNavigate();
 
+  // Prefetch for Playground
+  useApiIdentities();
+
   // 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

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

@@ -1,3 +1,4 @@
+import { Badge } from "zudoku/ui/Badge.js";
 import { Markdown } from "../../components/Markdown.js";
 import { type SchemaObject } from "../../oas/graphql/index.js";
 import { ColorizedParam } from "./ColorizedParam.js";
@@ -38,24 +39,21 @@ export const ParameterListItem = ({
             <ColorizedParam
               name={parameter.name}
               backgroundOpacity="15%"
+              className="px-1"
               slug={id + "-" + parameter.name.toLocaleLowerCase()}
             />
           ) : (
             parameter.name
           )}
         </code>
-        {parameter.required && (
-          <span className="py-px px-1.5 font-medium bg-primary/75 text-primary-foreground rounded-lg">
-            required
-          </span>
-        )}
         {paramSchema.type && (
-          <span className="text-muted-foreground">
+          <Badge variant="muted">
             {paramSchema.type === "array"
               ? `${paramSchema.items.type}[]`
               : paramSchema.type}
-          </span>
+          </Badge>
         )}
+        {parameter.required && <Badge variant="outline">required</Badge>}
       </div>
       {parameter.description && (
         <Markdown

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

@@ -23,6 +23,8 @@ 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,
+      type: p.schema?.type ?? "string",
     }));
   const pathParams = operation.parameters
     ?.filter((p) => p.in === "path")

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

@@ -1,18 +1,19 @@
-import { Content, useSidecarExamples } from "./ExampleDisplay.js";
 import * as SidecarBox from "./SidecarBox.js";
+import { type Content, SidecarExamples } from "./SidecarExamples.js";
 
-export const RequestBodySidecarBox = ({ content }: { content: Content }) => {
-  const { SidecarBody, SidebarFooter, hasContent } = useSidecarExamples({
-    content,
-  });
-
+export const RequestBodySidecarBox = ({
+  content,
+  onExampleChange,
+}: {
+  content: Content;
+  onExampleChange?: (example: unknown) => void;
+}) => {
   return (
     <SidecarBox.Root>
       <SidecarBox.Head className="text-xs flex justify-between items-center">
         <span className="font-mono">Request Body Example</span>
       </SidecarBox.Head>
-      <SidecarBody />
-      {hasContent && <SidebarFooter />}
+      <SidecarExamples content={content} onExampleChange={onExampleChange} />
     </SidecarBox.Root>
   );
 };

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

@@ -1,21 +1,18 @@
 import * as Tabs from "@radix-ui/react-tabs";
 import { cn } from "../../util/cn.js";
-import { useSidecarExamples } from "./ExampleDisplay.js";
 import type { OperationListItemResult } from "./OperationList.js";
 import * as SidecarBox from "./SidecarBox.js";
+import { SidecarExamples } from "./SidecarExamples.js";
 
 type Responses = OperationListItemResult["responses"];
 
 const ResponseContent = ({ response }: { response: Responses[number] }) => {
-  const { SidecarBody, SidebarFooter, hasContent } = useSidecarExamples({
-    content: response.content ?? [],
-    description: response.description ?? undefined,
-  });
-
   return (
     <Tabs.Content value={response.statusCode}>
-      <SidecarBody />
-      {hasContent && <SidebarFooter />}
+      <SidecarExamples
+        content={response.content ?? []}
+        description={response.description ?? undefined}
+      />
     </Tabs.Content>
   );
 };