zudoku 0.35.4 → 0.35.6

package/lib/zudoku.components.js

@@ -22,7 +22,7 @@ import { S as Be, i as Ke, j as kt, n as P, m as be, l as je, o as A, p as Dt, q
 import { D as It, a as Qt, c as Rt, b as Ft, d as zt } from "./Dialog-sbgekbjb.js";
 import { Z as Ue } from "./invariant-Caa8-XvF.js";
 import { u as Ht, o as Lt } from "./objectEntries-BS7aAgOm.js";
-import { E as Ze, S as k, a as Bt, R as Kt } from "./SlotletProvider-D-XPr1Wg.js";
+import { E as Ze, S as k, a as Bt, R as Kt } from "./SlotletProvider-BJC58V32.js";
 import { Button as $t } from "./ui/Button.js";
 import { Callout as Ut } from "./ui/Callout.js";
 import { M as Zt } from "./mutation-B81DztCT.js";
@@ -30,7 +30,7 @@ import * as q from "react";
 import Yt, { createContext as fe, StrictMode as Ye, useRef as se, useEffect as F, useState as $, useCallback as Vt, Suspense as me, memo as Ve, Component as Xt, createElement as ke, useMemo as re, useContext as _t } from "react";
 import * as Gt from "react-dom";
 import { C as ge } from "./ClientOnly-E7hGysn1.js";
-import { s as Wt, S as De, u as Jt, a as es, H as ts, P as ss, b as rs, V as ns, M as as } from "./Markdown-hBN9vkm5.js";
+import { s as Wt, S as De, u as Jt, a as es, H as ts, P as ss, b as rs, V as ns, M as as } from "./Markdown-C0eXdzGn.js";
 import { B as oe, S as Xe } from "./Spinner-C6n4eOvh.js";
 import { c as E } from "./cn-qaFjX9_3.js";
 import { isSearchPlugin as is, isProfileMenuPlugin as os, isNavigationPlugin as ls, isEventConsumerPlugin as cs, needsInitialization as us, isApiIdentityPlugin as ds, isMdxProviderPlugin as hs, hasHead as fs } from "./zudoku.plugins.js";

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

@@ -5,7 +5,7 @@ import { j as d } from "./joinUrl-10po2Jdj.js";
 import { u as j, b as y } from "./hook-CfCFKZ-2.js";
 import { H as v } from "./index.esm-CltAN0Tf.js";
 import { Link as N } from "./zudoku.components.js";
-import { H as S, M as w } from "./Markdown-hBN9vkm5.js";
+import { H as S, M as w } from "./Markdown-C0eXdzGn.js";
 const H = ({
   items: s,
   filterCatalogItems: l = (n) => n,

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

@@ -1,6 +1,6 @@
 import { j as e } from "./jsx-runtime-CYK1ROHF.js";
 import { RotateCwIcon as j, TrashIcon as v, EyeOffIcon as w, EyeIcon as K, CheckIcon as b, CopyIcon as k, FileKey2Icon as N } from "lucide-react";
-import { D as I, S as x, R as S } from "./SlotletProvider-D-XPr1Wg.js";
+import { D as I, S as x, R as S } from "./SlotletProvider-BJC58V32.js";
 import { i as c } from "./invariant-Caa8-XvF.js";
 import { u as h } from "./useQuery-CQUwWR9i.js";
 import { u as d, S as A, a as C, b as E, c as P, d as D, e as p } from "./Select-FAYHOYTy.js";

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

@@ -1,6 +1,6 @@
 import { j as o } from "./jsx-runtime-CYK1ROHF.js";
 import a from "react";
-import { P as n } from "./Markdown-hBN9vkm5.js";
+import { P as n } from "./Markdown-C0eXdzGn.js";
 import { c } from "./cn-qaFjX9_3.js";
 import { u as p } from "./useExposedProps-BslIn-FE.js";
 const u = ({

package/lib/zudoku.plugin-markdown.js

@@ -53,7 +53,7 @@ const P = (e) => ({
         const u = {
           path: r,
           lazy: async () => {
-            const { MdxPage: p } = await import("./MdxPage-UCWwxhzC.js"), { default: f, ...l } = await i();
+            const { MdxPage: p } = await import("./MdxPage-BKkG1cm1.js"), { default: f, ...l } = await i();
             return {
               element: /* @__PURE__ */ d.jsx(
                 p,

package/lib/zudoku.plugin-openapi.js

@@ -5,7 +5,7 @@ import "./chunk-HA7DTUK3-ZGg2W6yV.js";
 import "./hook-CfCFKZ-2.js";
 import "./ui/Button.js";
 import "./joinUrl-10po2Jdj.js";
-import { U as n, o as s } from "./index-BVhQWA89.js";
+import { U as n, o as s } from "./index-Dm1QJHVl.js";
 export {
   n as UNTAGGED_PATH,
   s as openApiPlugin

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.35.4",
+  "version": "0.35.6",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -127,7 +127,7 @@
     }
   },
   "dependencies": {
-    "@apidevtools/json-schema-ref-parser": "11.9.1",
+    "@apidevtools/json-schema-ref-parser": "11.9.3",
     "@envelop/core": "5.0.3",
     "@graphql-typed-document-node/core": "3.2.0",
     "@hookform/resolvers": "4.1.3",
@@ -157,7 +157,7 @@
     "@radix-ui/react-toggle-group": "1.1.2",
     "@radix-ui/react-tooltip": "1.1.8",
     "@radix-ui/react-visually-hidden": "1.1.2",
-    "@scalar/openapi-parser": "0.10.6",
+    "@scalar/openapi-parser": "0.10.12",
     "@sentry/node": "9.1.0",
     "@sindresorhus/slugify": "2.2.1",
     "@stefanprobst/rehype-extract-toc": "2.2.1",
@@ -181,7 +181,7 @@
     "glob": "11.0.1",
     "graphql": "16.10.0",
     "graphql-type-json": "0.3.2",
-    "graphql-yoga": "5.12.0",
+    "graphql-yoga": "5.13.2",
     "gray-matter": "4.0.3",
     "hast-util-to-jsx-runtime": "^2.3.6",
     "hast-util-to-string": "3.0.1",
@@ -240,7 +240,7 @@
   },
   "devDependencies": {
     "@graphql-codegen/cli": "5.0.5",
-    "@graphql-codegen/client-preset": "4.6.2",
+    "@graphql-codegen/client-preset": "4.7.0",
     "@testing-library/react": "16.2.0",
     "@types/estree": "1.0.6",
     "@types/express": "5.0.0",

package/src/app/main.css

@@ -123,6 +123,10 @@
       "calt" 1;
   }
 
+  ::selection {
+    @apply bg-primary/100 text-primary-foreground;
+  }
+
   .dark {
     color-scheme: dark;
   }

package/src/lib/authentication/providers/openid.tsx

@@ -13,6 +13,7 @@ import { AuthorizationError, OAuthAuthorizationError } from "../errors.js";
 import { useAuthState, type UserProfile } from "../state.js";
 
 const CODE_VERIFIER_KEY = "code-verifier";
+const STATE_KEY = "oauth-state";
 
 export interface OpenIdProviderData {
   accessToken: string;
@@ -201,16 +202,12 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     });
 
     /**
-     * We cannot be sure the AS supports PKCE so we're going to use state too. Use of PKCE is
-     * backwards compatible even if the AS doesn't support it which is why we're using it regardless.
+     * The state parameter is used to prevent CSRF attacks and should be used in all authorization requests.
+     * It is independent of PKCE and should be used regardless of PKCE support.
      */
-    if (
-      authorizationServer.code_challenge_methods_supported?.includes("S256") !==
-      true
-    ) {
-      const state = oauth.generateRandomState();
-      authorizationUrl.searchParams.set("state", state);
-    }
+    const state = oauth.generateRandomState();
+    sessionStorage.setItem(STATE_KEY, state);
+    authorizationUrl.searchParams.set("state", state);
 
     // now redirect the user to authorizationUrl.href
     location.href = authorizationUrl.href;
@@ -295,6 +292,12 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
   handleCallback = async () => {
     const url = new URL(window.location.href);
     const state = url.searchParams.get("state");
+    const storedState = sessionStorage.getItem(STATE_KEY);
+    sessionStorage.removeItem(STATE_KEY);
+
+    if (state !== storedState) {
+      throw new AuthorizationError("Invalid state parameter");
+    }
 
     // one eternity later, the user lands back on the redirect_uri
     // Authorization Code Grant Request & Response

package/src/lib/components/AnchorLink.tsx

@@ -8,11 +8,13 @@ import { useScrollToHash } from "../util/useScrollToAnchor.js";
 export const AnchorLink = (props: NavLinkProps) => {
   const location = useLocation();
   const scrollToHash = useScrollToHash();
-  const hash = useHref(props.to).split("#")[1];
+  const href = useHref(props.to);
+  const [pathname, hash] = href.split("#");
 
   const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
     props.onClick?.(event);
-    if (hash !== location.hash.slice(1)) return;
+    if (hash !== location.hash.slice(1) || pathname !== location.pathname)
+      return;
 
     event.preventDefault();
     scrollToHash(hash);

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

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 import { ExternalLinkIcon } from "lucide-react";
-import { NavLink, useSearchParams } from "react-router";
+import { NavLink, useLocation, useSearchParams } from "react-router";
 
 import type { SidebarItem as SidebarItemType } from "../../../config/validators/SidebarSchema.js";
 import { joinPath } from "../../util/joinPath.js";
@@ -37,6 +37,7 @@ export const SidebarItem = ({
   item: SidebarItemType;
   onRequestClose?: () => void;
 }) => {
+  const location = useLocation();
   const { activeAnchor } = useViewportAnchor();
   const [searchParams] = useSearchParams();
 
@@ -76,7 +77,7 @@ export const SidebarItem = ({
           }}
           {...{ [DATA_ANCHOR_ATTR]: item.href.split("#")[1] }}
           className={navigationListItem({
-            isActive: item.href.split("#")[1] === activeAnchor,
+            isActive: item.href === [location.pathname, activeAnchor].join("#"),
             className: item.badge?.placement !== "start" && "justify-between",
           })}
           onClick={onRequestClose}

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

@@ -42,21 +42,27 @@ type OperationLike = {
 export const createOperationSlug = (
   slugify: CountableSlugify,
   operation: OperationLike,
-  tag?: string,
 ) => {
   const summary =
     operation.summary ||
     operation.operationId ||
     `${operation.method}-${operation.path}`;
-  const prefix = tag ? `${tag}-` : "";
 
-  return slugify(prefix + summary);
+  return slugify(summary);
 };
 
-export type SchemaImports = Record<
-  string,
-  () => Promise<{ schema: OpenAPIDocument }>
->;
+type SchemaImport = () => Promise<{ schema: OpenAPIDocument }>;
+
+export type SchemaImports = Record<string, SchemaImport>;
+
+type Context = {
+  schema: OpenAPIDocument;
+  operations: GraphQLOperationObject[];
+  tags: TagObject[];
+  schemaImports?: SchemaImports;
+  slugify: CountableSlugify;
+  slugs: Record<string, string>;
+};
 
 const builder = new SchemaBuilder<{
   DefaultFieldNullability: false;
@@ -65,14 +71,7 @@ const builder = new SchemaBuilder<{
     JSONObject: any;
     JSONSchema: any;
   };
-  Context: {
-    schema: OpenAPIDocument;
-    operations: GraphQLOperationObject[];
-    tags: TagObject[];
-    schemaImports?: SchemaImports;
-    currentTag?: string;
-    slugify: CountableSlugify;
-  };
+  Context: Context;
 }>({
   defaultFieldNullability: false,
 });
@@ -116,6 +115,17 @@ export const getAllTags = (schema: OpenAPIDocument): TagObject[] => {
   ];
 };
 
+const getAllSlugs = (operations: GraphQLOperationObject[]) =>
+  Object.fromEntries(
+    operations.map((op) => [
+      getSlugName(op),
+      createOperationSlug(slugifyWithCounter(), op),
+    ]),
+  );
+
+const getSlugName = (op: GraphQLOperationObject) =>
+  `${op.path}-${op.method}-${op.operationId}-${op.summary}`;
+
 export const getAllOperations = (
   paths?: PathsObject,
 ): GraphQLOperationObject[] => {
@@ -340,19 +350,8 @@ const OperationItem = builder
     fields: (t) => ({
       slug: t.field({
         type: "String",
-        resolve: (parent, _, ctx) => {
-          const slugData = {
-            summary: parent.summary,
-            operationId: parent.operationId,
-            path: parent.path,
-            method: parent.method,
-          };
-
-          //TODO: fix parent tag parent.tags
-          return createOperationSlug(ctx.slugify, slugData, parent.parentTag);
-        },
+        resolve: (parent, _, ctx) => ctx.slugs[getSlugName(parent)]!,
       }),
-
       path: t.exposeString("path"),
       method: t.exposeString("method"),
       operationId: t.exposeString("operationId", { nullable: true }),
@@ -531,6 +530,7 @@ builder.queryType({
         ctx.operations = getAllOperations(schema.paths);
         ctx.slugify = slugifyWithCounter();
         ctx.tags = getAllTags(schema);
+        ctx.slugs = getAllSlugs(ctx.operations);
 
         return schema;
       },

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

@@ -46,6 +46,7 @@ export const OperationsFragment = graphql(/* GraphQL */ `
       required
       schema
       style
+      explode
       examples {
         name
         description
@@ -193,7 +194,7 @@ export const OperationList = ({
                 registerSidebarAnchor
                 className="mb-0"
               >
-                {tag}
+                {tag ?? "Other endpoints"}
                 {showVersions && (
                   <span className="text-xl text-muted-foreground ml-1.5">
                     {" "}

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

@@ -43,7 +43,7 @@ export const ParamInfos = ({
   extraItems?: unknown[];
   className?: string;
 }) => {
-  const filteredItems = [...extraItems, ...getSchemaInfos(schema)].flatMap(
+  const filteredItems = [...getSchemaInfos(schema), ...extraItems].flatMap(
     (item) => (typeof item === "string" || isValidElement(item) ? item : []),
   );
 

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

@@ -5,6 +5,7 @@ import type { OperationListItemResult } from "./OperationList.js";
 import type { ParameterGroup } from "./OperationListItem.js";
 import { ParamInfos } from "./ParamInfos.js";
 import { EnumValues } from "./components/EnumValues.js";
+import { SelectOnClick } from "./components/SelectOnClick.js";
 
 const getParameterSchema = (
   parameter: ParameterListItemResult,
@@ -35,23 +36,28 @@ export const ParameterListItem = ({
   return (
     <li className="p-4 bg-border/20 text-sm flex flex-col gap-1.5">
       <div className="flex items-center gap-2">
-        <code>
-          {group === "path" ? (
-            <ColorizedParam
-              name={parameter.name}
-              backgroundOpacity="15%"
-              className="px-2"
-              slug={`${id}-${parameter.name}`}
-            />
-          ) : (
-            parameter.name
-          )}
-        </code>
+        <SelectOnClick asChild>
+          <code>
+            {group === "path" ? (
+              <ColorizedParam
+                name={parameter.name}
+                backgroundOpacity="15%"
+                className="px-2"
+                slug={`${id}-${parameter.name}`}
+              />
+            ) : (
+              parameter.name
+            )}
+          </code>
+        </SelectOnClick>
         <ParamInfos
           schema={paramSchema}
           extraItems={[
-            parameter.required && "required",
-            parameter.style === "form" && "form",
+            parameter.required && (
+              <span className="text-primary">required</span>
+            ),
+            parameter.style && `style: ${parameter.style}`,
+            parameter.explode && `explode: ${parameter.explode}`,
           ]}
         />
       </div>

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

@@ -14,7 +14,7 @@ import * as types from "./graphql.js";
  */
 type Documents = {
   "\n  query ServersQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n": typeof types.ServersQueryDocument;
-  "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    deprecated\n    extensions\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        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n": typeof types.OperationsFragmentFragmentDoc;
+  "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    deprecated\n    extensions\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      explode\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        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n": typeof types.OperationsFragmentFragmentDoc;
   "\n  query AllOperations(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      servers {\n        url\n      }\n      description\n      summary\n      title\n      url\n      version\n      tags(name: $tag) {\n        name\n        description\n      }\n      operations(tag: $tag, untagged: $untagged) {\n        slug\n        ...OperationsFragment\n      }\n    }\n  }\n": typeof types.AllOperationsDocument;
   "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n": typeof types.GetServerQueryDocument;
   "\n  query GetCategories($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      tags {\n        name\n      }\n    }\n  }\n": typeof types.GetCategoriesDocument;
@@ -23,7 +23,7 @@ type Documents = {
 const documents: Documents = {
   "\n  query ServersQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n":
     types.ServersQueryDocument,
-  "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    deprecated\n    extensions\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        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\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    deprecated\n    extensions\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      explode\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        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n":
     types.OperationsFragmentFragmentDoc,
   "\n  query AllOperations(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      servers {\n        url\n      }\n      description\n      summary\n      title\n      url\n      version\n      tags(name: $tag) {\n        name\n        description\n      }\n      operations(tag: $tag, untagged: $untagged) {\n        slug\n        ...OperationsFragment\n      }\n    }\n  }\n":
     types.AllOperationsDocument,
@@ -45,7 +45,7 @@ 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    deprecated\n    extensions\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        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\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    deprecated\n    extensions\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      explode\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        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n",
 ): typeof import("./graphql.js").OperationsFragmentFragmentDoc;
 /**
  * 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

@@ -212,6 +212,7 @@ export type OperationsFragmentFragment = {
     required?: boolean | null;
     schema?: any | null;
     style?: string | null;
+    explode?: boolean | null;
     examples?: Array<{
       __typename?: "ExampleItem";
       name: string;
@@ -359,12 +360,13 @@ export class TypedDocumentString<TResult, TVariables>
   implements DocumentTypeDecoration<TResult, TVariables>
 {
   __apiType?: DocumentTypeDecoration<TResult, TVariables>["__apiType"];
+  private value: string;
+  public __meta__?: Record<string, any> | undefined;
 
-  constructor(
-    private value: string,
-    public __meta__?: Record<string, any> | undefined,
-  ) {
+  constructor(value: string, __meta__?: Record<string, any> | undefined) {
     super(value);
+    this.value = value;
+    this.__meta__ = __meta__;
   }
 
   toString(): string & DocumentTypeDecoration<TResult, TVariables> {
@@ -390,6 +392,7 @@ export const OperationsFragmentFragmentDoc = new TypedDocumentString(
     required
     schema
     style
+    explode
     examples {
       name
       description
@@ -490,6 +493,7 @@ export const AllOperationsDocument = new TypedDocumentString(`
     required
     schema
     style
+    explode
     examples {
       name
       description

package/src/lib/plugins/openapi/schema/SchemaPropertyItem.tsx

@@ -7,6 +7,7 @@ import { Button } from "../../../ui/Button.js";
 import { cn } from "../../../util/cn.js";
 import { objectEntries } from "../../../util/objectEntries.js";
 import { EnumValues } from "../components/EnumValues.js";
+import { SelectOnClick } from "../components/SelectOnClick.js";
 import { ParamInfos } from "../ParamInfos.js";
 import { LogicalGroup } from "./LogicalGroup/LogicalGroup.js";
 import { SchemaView } from "./SchemaView.js";
@@ -72,10 +73,7 @@ export const SchemaPropertyItem = ({
         <div className="flex flex-col gap-2.5 justify-between text-sm">
           <div className="flex gap-2 items-center">
             <code>{name}</code>
-            <ParamInfos
-              schema={schema}
-              extraItems={[group === "optional" && "optional"]}
-            />
+            <ParamInfos schema={schema} />
             <RecursiveIndicator />
           </div>
         </div>
@@ -87,10 +85,16 @@ export const SchemaPropertyItem = ({
     <li className="p-4 bg-border/20 hover:bg-border/30">
       <div className="flex flex-col gap-2.5 justify-between text-sm">
         <div className="flex gap-2 items-center">
-          <code>{name}</code>
+          <SelectOnClick asChild>
+            <code>{name}</code>
+          </SelectOnClick>
           <ParamInfos
             schema={schema}
-            extraItems={[group === "optional" && "optional"]}
+            extraItems={[
+              group !== "optional" && (
+                <span className="text-primary">required</span>
+              ),
+            ]}
           />
           {schema.type === "array" &&
             "items" in schema &&