zudoku 0.0.0-f40ea27 → 0.0.0-f42e3678

package/src/lib/core/ZudokuContext.ts

@@ -5,6 +5,10 @@ import type { Location } from "react-router";
 import type { BundledTheme, HighlighterCore } from "shiki";
 import type { z } from "zod/v4";
 import type { Navigation } from "../../config/validators/NavigationSchema.js";
+import {
+  type ProtectedRoutesInput,
+  ProtectedRoutesSchema,
+} from "../../config/validators/ProtectedRoutesSchema.js";
 import type { FooterSchema } from "../../config/validators/validate.js";
 import type { AuthenticationPlugin } from "../authentication/authentication.js";
 import { type AuthState, useAuthState } from "../authentication/state.js";
@@ -18,8 +22,10 @@ import {
   isAuthenticationPlugin,
   isEventConsumerPlugin,
   isNavigationPlugin,
+  isProfileMenuPlugin,
   type NavigationPlugin,
   needsInitialization,
+  type ProfileNavigationItem,
   type ZudokuPlugin,
 } from "./plugins.js";
 
@@ -65,6 +71,7 @@ type Site = Partial<{
     };
     width?: string | number;
     alt?: string;
+    href?: string;
   };
   banner?: {
     message: ReactNode;
@@ -91,7 +98,7 @@ export type ZudokuContextOptions = {
     components?: MdxComponentsType;
   };
   overrides?: ComponentsContextType;
-  protectedRoutes?: string[];
+  protectedRoutes?: ProtectedRoutesInput;
   syntaxHighlighting?: {
     highlighter: HighlighterCore;
     themes?: { light: BundledTheme; dark: BundledTheme };
@@ -110,12 +117,21 @@ export class ZudokuContext {
   private emitter = createNanoEvents<ZudokuEvents>();
 
   constructor(options: ZudokuContextOptions, queryClient: QueryClient) {
-    const protectedRoutes = (options.protectedRoutes ?? []).concat(
-      options.plugins?.flatMap((plugin) =>
-        isNavigationPlugin(plugin) ? (plugin.getProtectedRoutes?.() ?? []) : [],
-      ) ?? [],
+    const pluginProtectedRoutes = Object.fromEntries(
+      (options.plugins ?? []).flatMap((plugin) => {
+        if (!isNavigationPlugin(plugin)) return [];
+        const routes = plugin.getProtectedRoutes?.();
+        if (!routes) return [];
+
+        return Object.entries(ProtectedRoutesSchema.parse(routes) ?? {});
+      }),
     );
 
+    const protectedRoutes = {
+      ...pluginProtectedRoutes,
+      ...ProtectedRoutesSchema.parse(options.protectedRoutes),
+    };
+
     this.queryClient = queryClient;
     this.options = { ...options, protectedRoutes };
     this.plugins = options.plugins ?? [];
@@ -182,6 +198,16 @@ export class ZudokuContext {
     return navigations.flatMap((nav) => nav ?? []);
   };
 
+  getProfileMenuItems = () => {
+    const accountItems = this.plugins
+      .filter((p) => isProfileMenuPlugin(p))
+      .flatMap((p) => p.getProfileMenuItems(this))
+      .sort(sortByCategory(["top", "middle", "bottom"]))
+      .sort((i) => i.weight ?? 0);
+
+    return accountItems;
+  };
+
   signRequest = async (request: Request) => {
     if (!this.authentication) {
       throw new Error("No authentication provider configured");
@@ -190,3 +216,12 @@ export class ZudokuContext {
     return await this.authentication.signRequest(request);
   };
 }
+
+const sortByCategory =
+  (categories: string[]) =>
+  (a: ProfileNavigationItem, b: ProfileNavigationItem) => {
+    const aIndex = categories.indexOf(a.category ?? "middle");
+    const bIndex = categories.indexOf(b.category ?? "middle");
+
+    return aIndex - bIndex;
+  };

package/src/lib/core/plugins.ts

@@ -2,6 +2,7 @@ import type { LucideIcon } from "lucide-react";
 import type { ReactElement } from "react";
 import type { Location, RouteObject } from "react-router";
 import type { Navigation } from "../../config/validators/NavigationSchema.js";
+import type { ProtectedRoutesInput } from "../../config/validators/ProtectedRoutesSchema.js";
 import type { AuthenticationPlugin } from "../authentication/authentication.js";
 import type { MdxComponentsType } from "../util/MdxComponents.js";
 import type {
@@ -24,7 +25,7 @@ export type { AuthenticationPlugin, RouteObject };
 export interface NavigationPlugin {
   getRoutes: () => RouteObject[];
   getNavigation?: (path: string, context: ZudokuContext) => Promise<Navigation>;
-  getProtectedRoutes?: () => string[];
+  getProtectedRoutes?: () => ProtectedRoutesInput;
 }
 
 export const createApiIdentityPlugin = (

package/src/lib/errors/ErrorAlert.tsx

@@ -23,13 +23,11 @@ export function ErrorAlert({ error }: { error: unknown }) {
       Error: {message}
       {hint && <DeveloperHint className="mb-4">{hint}</DeveloperHint>}
       {stringError && (
-        <div>
-          <SyntaxHighlight
-            className="max-h-[400px] border mt-2"
-            language="js"
-            code={stringError}
-          />
-        </div>
+        <SyntaxHighlight
+          className="max-h-[400px] [&>pre]:p-4"
+          language="js"
+          code={stringError}
+        />
       )}
     </Typography>
   );

package/src/lib/plugins/api-keys/CreateApiKey.tsx

@@ -2,6 +2,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router";
 import { ActionButton } from "zudoku/ui/ActionButton.js";
+import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert.js";
 import { DialogClose, DialogFooter } from "zudoku/ui/Dialog.js";
 import {
   Select,
@@ -33,6 +34,7 @@ export const CreateApiKey = ({
       expiresOn: "30",
     },
   });
+
   const createKeyMutation = useMutation({
     mutationFn: ({ description, expiresOn }: CreateApiKey) => {
       if (!service.createKey) {
@@ -43,7 +45,10 @@ export const CreateApiKey = ({
         expiresOn !== "never" ? addDaysToDate(Number(expiresOn)) : undefined;
 
       return service.createKey(
-        { description: description || "Secret Key", expiresOn: expiresOnDate },
+        {
+          description: description || "Secret Key",
+          expiresOn: expiresOnDate,
+        },
         context,
       );
     },
@@ -68,6 +73,12 @@ export const CreateApiKey = ({
         ),
       )}
     >
+      {createKeyMutation.error && (
+        <Alert variant="destructive" className="mb-4">
+          <AlertTitle>Error</AlertTitle>
+          <AlertDescription>{createKeyMutation.error.message}</AlertDescription>
+        </Alert>
+      )}
       <div className="flex gap-2 flex-col text-sm font-medium">
         Name
         <Input {...form.register("description")} />

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

@@ -35,6 +35,7 @@ import { Button } from "../../ui/Button.js";
 import { Input } from "../../ui/Input.js";
 import { cn } from "../../util/cn.js";
 import { useCopyToClipboard } from "../../util/useCopyToClipboard.js";
+import { CreateApiKey } from "./CreateApiKey.js";
 import { type ApiConsumer, type ApiKey, type ApiKeyService } from "./index.js";
 
 export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
@@ -50,6 +51,8 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
     retry: false,
   });
 
+  const [isCreateApiKeyOpen, setIsCreateApiKeyOpen] = useState(false);
+
   const deleteKeyMutation = useMutation({
     mutationFn: ({
       consumerId,
@@ -180,11 +183,28 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
       <Slot.Target name="api-keys-list-page" />
 
       <div className="flex justify-between pb-3">
-        <h1 className="font-medium text-2xl">API Keys</h1>
+        <h1 className="font-medium text-2xl">
+          API Keys {typeof service.createKey}
+        </h1>
+
         {service.createKey && (
-          <Button asChild>
-            <Link to="/settings/api-keys/new">Create API Key</Link>
-          </Button>
+          <Dialog
+            open={isCreateApiKeyOpen}
+            onOpenChange={setIsCreateApiKeyOpen}
+          >
+            <DialogTrigger asChild>
+              <Button variant="outline">Create API Key</Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Create API Key</DialogTitle>
+              </DialogHeader>
+              <CreateApiKey
+                service={service}
+                onOpenChange={setIsCreateApiKeyOpen}
+              />
+            </DialogContent>
+          </Dialog>
         )}
       </div>
       <p>Create, manage, and monitor your API keys</p>
@@ -226,8 +246,7 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
         ) : (
           <ul
             className={cn(
-              "grid grid-cols-1 divide-y divide-border col-span-6",
-              "lg:grid-cols-[1fr_min-content]",
+              "grid grid-cols-[1fr_min-content] divide-y divide-border col-span-6",
             )}
           >
             {data.map((consumers) => (
@@ -310,7 +329,7 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
                         disabled={editingConsumerId === consumers.id}
                       >
                         <PencilLineIcon size={16} />
-                        Edit label
+                        <span className="hidden md:block">Edit label</span>
                       </Button>
                     )}
                     {service.rollKey && (
@@ -330,7 +349,7 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
                                   : undefined
                               }
                             />
-                            Roll key
+                            <span className="hidden md:block">Roll key</span>
                           </Button>
                         </DialogTrigger>
                         <DialogContent>
@@ -436,21 +455,26 @@ const RevealApiKey = ({
   return (
     <div className={cn("grid col-span-full grid-cols-subgrid p-6", className)}>
       <div className="flex flex-col gap-1">
-        <div className="flex gap-2 items-center text-sm border rounded-md w-fit px-1">
-          <div className="font-mono truncate h-9 items-center flex px-2 text-xs gap-2">
+        <div className="flex gap-2 items-center text-sm border rounded-md w-full max-w-fit px-1">
+          <div className="font-mono w-full h-9 items-center flex px-2 text-xs gap-2">
             <div
               className={cn(
                 "rounded-full w-2 h-2 bg-emerald-400 mr-2",
                 (expiresSoon || isExpired) && "bg-neutral-200",
               )}
             ></div>
-            <span>
-              <span className={revealed ? "" : "opacity-20"}>
+            <span className="w-full truncate">
+              <div
+                className={cn(
+                  "w-40 inline-block md:w-full truncate",
+                  revealed ? "" : "opacity-20",
+                )}
+              >
                 {revealed
                   ? key.slice(0, -5)
                   : "**** ".repeat(key.slice(0, -5).length / 5) +
                     "*".repeat(key.slice(0, -5).length % 5)}
-              </span>
+              </div>
               <span>{key.slice(-5)}</span>
             </span>
           </div>

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

@@ -27,7 +27,7 @@ export type ApiKeyService = {
   ) => Promise<void>;
   getUsage?: (apiKeys: string[], context: ZudokuContext) => Promise<void>;
   createKey?: (
-    apiKey: { description: string; expiresOn?: string },
+    apiKey: { description: string; expiresOn?: string; expiresValue?: string },
     context: ZudokuContext,
   ) => Promise<void>;
 };
@@ -74,7 +74,10 @@ const throwIfProblemJson = async (response: Response) => {
   }
 };
 
-const createDefaultHandler = (deploymentName: string): ApiKeyService => {
+const createDefaultHandler = (
+  deploymentName: string,
+  options: ApiKeyPluginOptions,
+): ApiKeyService => {
   return {
     deleteKey: async (consumerId, keyId, context) => {
       const request = new Request(
@@ -154,11 +157,12 @@ const createDefaultHandler = (deploymentName: string): ApiKeyService => {
 
       return data.data.map((consumer) => ({
         id: consumer.id,
-        label: consumer.label ?? consumer.subject ?? "API Key",
+        label: consumer.label || consumer.subject || "API Key",
         apiKeys: consumer.apiKeys.data,
         key: consumer.apiKeys.data.at(0),
       }));
     },
+    ...options,
   };
 };
 
@@ -170,7 +174,7 @@ export const apiKeyPlugin = (
 ): ZudokuPlugin & ApiIdentityPlugin & ProfileMenuPlugin => {
   const service: ApiKeyService =
     "deploymentName" in options
-      ? createDefaultHandler(options.deploymentName)
+      ? createDefaultHandler(options.deploymentName, options)
       : options;
 
   return {
@@ -203,7 +207,6 @@ export const apiKeyPlugin = (
       }
     },
     getRoutes: (): RouteObject[] => {
-      // TODO: Make lazy
       return [
         {
           element: <ProtectedRoute />,
@@ -213,10 +216,6 @@ export const apiKeyPlugin = (
               path: "/settings/api-keys",
               element: <SettingsApiKeys service={service} />,
             },
-            // {
-            //   path: "/settings/api-keys/new",
-            //   element: <CreateApiKey service={service} />,
-            // },
           ],
         },
       ];

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

@@ -53,10 +53,11 @@ export const MdxPage = ({
   const categoryTitle = useCurrentItem()?.categoryLabel;
 
   const title = frontmatter.title;
+  const description = frontmatter.description ?? excerpt;
   const category = frontmatter.category ?? categoryTitle;
   const hideToc = frontmatter.toc === false || defaultOptions?.toc === false;
   const pageTitle =
-    tableOfContents.find((item) => item.depth === 1)?.value ?? title;
+    title ?? tableOfContents.find((item) => item.depth === 1)?.value;
   const hidePager =
     frontmatter.disable_pager ??
     frontmatter.disablePager ??
@@ -110,7 +111,7 @@ export const MdxPage = ({
     >
       <Helmet>
         <title>{pageTitle}</title>
-        {excerpt && <meta name="description" content={excerpt} />}
+        {description && <meta name="description" content={description} />}
       </Helmet>
       <Typography className="max-w-full xl:w-full xl:max-w-3xl flex-1 shrink pt-(--padding-content-top)">
         {(category || title) && (
@@ -177,7 +178,7 @@ export const MdxPage = ({
           </>
         )}
       </Typography>
-      <div className="hidden xl:block">
+      <div className="hidden xl:block" data-pagefind-ignore="all">
         {showToc && <Toc entries={tocEntries} />}
       </div>
     </div>

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

@@ -220,6 +220,8 @@ export const OperationList = ({
       : undefined,
   };
 
+  const helmetTitle = [schema.tag.name, title].filter(Boolean).join(" - ");
+
   return (
     <div
       className="pt-(--padding-content-top)"
@@ -227,7 +229,7 @@ export const OperationList = ({
       data-pagefind-meta="section:openapi"
     >
       <Helmet>
-        <title>{[schema.tag.name, title].filter(Boolean).join(" - ")}</title>
+        {helmetTitle && <title>{helmetTitle}</title>}
         {metaDescription && (
           <meta name="description" content={metaDescription} />
         )}
@@ -243,7 +245,7 @@ export const OperationList = ({
                 registerNavigationAnchor
                 className="mb-0"
               >
-                {schema.tag.name ?? "Other endpoints"}
+                {schema.tag.name ?? "Documentation"}
                 {showVersions && (
                   <span className="text-xl text-muted-foreground ms-1.5">
                     {" "}

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

@@ -173,7 +173,7 @@ export const Sidecar = ({
                   embedded
                   language={selectedLang}
                   noBackground
-                  className="[--scrollbar-color:gray] rounded-none text-xs max-h-[500px] p-2"
+                  className="[--scrollbar-color:gray] rounded-none text-xs max-h-[500px]"
                   code={code!}
                 />
               </CollapsibleCode>

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

@@ -104,7 +104,7 @@ export const SidecarExamples = ({
               embedded
               language={language}
               noBackground
-              className="[--scrollbar-color:gray] rounded-none text-xs max-h-[500px] p-2"
+              className="[--scrollbar-color:gray] rounded-none text-xs max-h-[500px]"
               code={formattedExample}
             />
           </CollapsibleCode>

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

@@ -19,7 +19,7 @@ type Documents = {
   "\n  query OperationsForTag(\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      tag(slug: $tag, untagged: $untagged) {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n        next {\n          name\n          slug\n        }\n        prev {\n          name\n          slug\n        }\n      }\n    }\n  }\n": typeof types.OperationsForTagDocument;
   "\n  query GetSchemas($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      title\n      description\n      summary\n      components {\n        schemas {\n          name\n          schema\n          extensions\n        }\n      }\n    }\n  }\n": typeof types.GetSchemasDocument;
   "\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 GetNavigationOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n      components {\n        schemas {\n          __typename\n        }\n      }\n    }\n  }\n": typeof types.GetNavigationOperationsDocument;
+  "\n  query GetNavigationOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      extensions\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n      components {\n        schemas {\n          __typename\n        }\n      }\n    }\n  }\n": typeof types.GetNavigationOperationsDocument;
 };
 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":
@@ -34,7 +34,7 @@ const documents: Documents = {
     types.GetSchemasDocument,
   "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n":
     types.GetServerQueryDocument,
-  "\n  query GetNavigationOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n      components {\n        schemas {\n          __typename\n        }\n      }\n    }\n  }\n":
+  "\n  query GetNavigationOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      extensions\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n      components {\n        schemas {\n          __typename\n        }\n      }\n    }\n  }\n":
     types.GetNavigationOperationsDocument,
 };
 
@@ -78,7 +78,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  query GetNavigationOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n      components {\n        schemas {\n          __typename\n        }\n      }\n    }\n  }\n",
+  source: "\n  query GetNavigationOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      extensions\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n      components {\n        schemas {\n          __typename\n        }\n      }\n    }\n  }\n",
 ): typeof import("./graphql.js").GetNavigationOperationsDocument;
 
 export function graphql(source: string) {

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

@@ -383,6 +383,7 @@ export type GetNavigationOperationsQuery = {
   __typename?: "Query";
   schema: {
     __typename?: "Schema";
+    extensions?: any | null;
     tags: Array<{
       __typename?: "SchemaTag";
       slug?: string | null;
@@ -645,6 +646,7 @@ export const GetServerQueryDocument = new TypedDocumentString(`
 export const GetNavigationOperationsDocument = new TypedDocumentString(`
     query GetNavigationOperations($input: JSON!, $type: SchemaType!) {
   schema(input: $input, type: $type) {
+    extensions
     tags {
       slug
       name

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

@@ -1,6 +1,7 @@
 import { CirclePlayIcon, LogInIcon } from "lucide-react";
 import { type ReactNode } from "react";
 import { matchPath } from "react-router";
+import type { NavigationItem } from "../../../config/validators/NavigationSchema.js";
 import { useAuth } from "../../authentication/hook.js";
 import { type ZudokuPlugin } from "../../core/plugins.js";
 import { Button } from "../../ui/Button.js";
@@ -18,6 +19,7 @@ import { getRoutes, getVersions } from "./util/getRoutes.js";
 export const GetNavigationOperationsQuery = graphql(`
   query GetNavigationOperations($input: JSON!, $type: SchemaType!) {
     schema(input: $input, type: $type) {
+      extensions
       tags {
         slug
         name
@@ -139,25 +141,73 @@ export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
         });
         const data = await context.queryClient.ensureQueryData(query);
 
-        const categories = data.schema.tags.flatMap((tag) => {
-          if (!tag.name || tag.operations.length === 0) return [];
+        const tagCategories = new Map(
+          data.schema.tags
+            .filter((tag) => tag.name && tag.operations.length > 0)
+            .map((tag) => {
+              if (!tag.name) {
+                throw new Error(`Tag ${tag.slug} has no name`);
+              }
+
+              const categoryPath = joinUrl(basePath, versionParam, tag.slug);
+
+              const isCollapsed =
+                tag.extensions?.["x-zudoku-collapsed"] ??
+                !config.options?.expandAllTags;
+              const isCollapsible =
+                tag.extensions?.["x-zudoku-collapsible"] ?? true;
+
+              return [
+                tag.name,
+                createNavigationCategory({
+                  label: tag.name,
+                  path: categoryPath,
+                  operations: tag.operations,
+                  collapsed: isCollapsed,
+                  collapsible: isCollapsible,
+                }),
+              ];
+            }),
+        );
 
-          const categoryPath = joinUrl(basePath, versionParam, tag.slug);
+        const tagGroups =
+          (data.schema.extensions?.["x-tagGroups"] as
+            | { name: string; tags: string[] }[]
+            | undefined) ?? [];
 
-          const isCollapsed =
-            tag.extensions?.["x-zudoku-collapsed"] ??
-            !config.options?.expandAllTags;
-          const isCollapsible =
-            tag.extensions?.["x-zudoku-collapsible"] ?? true;
+        const groupedTags = new Set(
+          tagGroups.flatMap((group) =>
+            group.tags.filter((name) => tagCategories.has(name)),
+          ),
+        );
 
-          return createNavigationCategory({
-            label: tag.name,
-            path: categoryPath,
-            operations: tag.operations,
-            collapsed: isCollapsed,
-            collapsible: isCollapsible,
-          });
-        });
+        const groupedCategories: NavigationItem[] = tagGroups.flatMap(
+          (group) => {
+            const items = group.tags
+              .map((name) => tagCategories.get(name))
+              .filter(Boolean) as NavigationItem[];
+
+            if (items.length === 0) {
+              return [];
+            }
+            return [
+              {
+                type: "category",
+                label: group.name,
+                items,
+                collapsible: true,
+                collapsed: !config.options?.expandAllTags,
+              },
+            ];
+          },
+        );
+
+        const categories: NavigationItem[] = [
+          ...groupedCategories,
+          ...Array.from(tagCategories.entries())
+            .filter(([name]) => !groupedTags.has(name))
+            .map(([, cat]) => cat),
+        ];
 
         const untaggedOperations = data.schema.tags.find(
           (tag) => !tag.name,
@@ -166,7 +216,7 @@ export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
         if (untaggedOperations) {
           categories.push(
             createNavigationCategory({
-              label: "Other endpoints",
+              label: categories.length === 0 ? "Endpoints" : "Other endpoints",
               path: joinUrl(basePath, versionParam, UNTAGGED_PATH),
               operations: untaggedOperations,
               collapsed: !config.options?.expandAllTags,

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

@@ -39,7 +39,7 @@ export const PathParams = ({
               )}
             />
 
-            <div className="flex justify-between items-center">
+            <div className="flex justify-between items-center col-span-2">
               <Controller
                 control={control}
                 name={`pathParams.${i}.value`}

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

@@ -154,6 +154,12 @@ export const Playground = ({
     formRef.current?.requestSubmit();
   });
 
+  const pathParamOrder =
+    url.match(/\{([^}]+)\}/g)?.map((match) => match.slice(1, -1)) ?? [];
+  const sortedPathParams = [...pathParams].sort(
+    (a, b) => pathParamOrder.indexOf(a.name) - pathParamOrder.indexOf(b.name),
+  );
+
   const { register, control, handleSubmit, watch, setValue, ...form } =
     useForm<PlaygroundForm>({
       defaultValues: {
@@ -174,7 +180,7 @@ export const Playground = ({
                   enum: [],
                 },
               ],
-        pathParams: pathParams.map((param) => ({
+        pathParams: sortedPathParams.map((param) => ({
           name: param.name,
           value: param.defaultValue ?? "",
         })),
@@ -472,7 +478,7 @@ export const Playground = ({
                 </Collapsible>
               )}
 
-              {pathParams.length > 0 && (
+              {sortedPathParams.length > 0 && (
                 <Collapsible defaultOpen>
                   <CollapsibleHeaderTrigger>
                     <ShapesIcon size={16} />