zudoku 0.12.2 → 0.13.1

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

@@ -1,13 +1,13 @@
 import { j as e } from "./jsx-runtime-B6kdoens.js";
-import { S as x, R as f } from "./SlotletProvider-D3UD5Go3.js";
-import { u as g, a as d, I as j, S as v, b as w, c as b, d as k, e as K, f as m } from "./Input-CtVUl3eT.js";
-import { a as N, L as u, O as I } from "./index-BG0g4WW0.js";
-import { u as h, a as E, b as S } from "./ZudokuContext-cr-pTRY1.js";
-import { B as l, m as A } from "./index-Dolisrci.js";
-import { D as C } from "./DeveloperHint-YeWHKvyr.js";
+import { S as x, R as f } from "./SlotletProvider-Cb8mGpBO.js";
+import { u as g, a as d, I as j, S as v, b as w, c as b, d as k, e as K, f as m } from "./Input-QMLhK7Rb.js";
+import { a as N, L as u, O as I } from "./index-BRCiYFaL.js";
+import { u as h, a as E, b as S } from "./ZudokuContext-BEmsYQoq.js";
+import { B as l, n as A } from "./index-g_JJcuFg.js";
+import { D as C } from "./DeveloperHint-CiXPc9Xm.js";
 import { RotateCwIcon as P, TrashIcon as D, EyeOffIcon as R, EyeIcon as q, CheckIcon as O, CopyIcon as z } from "lucide-react";
 import { useState as p } from "react";
-import { a as T } from "./Markdown-DapSf3wG.js";
+import { c as T } from "./cn-BmFQLtkS.js";
 function c(t, s) {
   if (t)
     return;

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

@@ -0,0 +1,21 @@
+import { j as s } from "./jsx-runtime-B6kdoens.js";
+import n from "react";
+import { c as a } from "./cn-BmFQLtkS.js";
+import { u as c } from "./useExposedProps-Csw8oAlt.js";
+const u = ({
+  element: e,
+  render: t,
+  prose: o = !0
+}) => {
+  const r = c(), m = t ? n.createElement(t, r) : e;
+  return /* @__PURE__ */ s.jsx("div", { className: a(o && "prose max-w-full"), children: m });
+}, f = (e) => ({
+  getRoutes: () => e.map(({ path: t, ...o }) => ({
+    path: t,
+    element: /* @__PURE__ */ s.jsx(u, { ...o })
+  }))
+});
+export {
+  f as customPagesPlugin
+};
+//# sourceMappingURL=zudoku.plugin-custom-pages.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"zudoku.plugin-custom-pages.js","sources":["../src/lib/plugins/custom-pages/CustomPage.tsx","../src/lib/plugins/custom-pages/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"../../util/cn.js\";\nimport { useExposedProps } from \"../../util/useExposedProps.js\";\nimport type { CustomPageConfig } from \"./index.js\";\n\nexport const CustomPage = ({\n  element,\n  render,\n  prose = true,\n}: Omit<CustomPageConfig, \"path\">) => {\n  const slotletProps = useExposedProps();\n  const content = render ? React.createElement(render, slotletProps) : element;\n\n  return <div className={cn(prose && \"prose max-w-full\")}>{content}</div>;\n};\n","import { type ComponentType, type ReactNode } from \"react\";\nimport type { RouteObject } from \"react-router-dom\";\nimport { type ExposedComponentProps } from \"../../components/SlotletProvider.js\";\nimport type { DevPortalPlugin, NavigationPlugin } from \"../../core/plugins.js\";\nimport { CustomPage } from \"./CustomPage.js\";\n\nexport type CustomPageConfig = {\n  path: string;\n  prose?: boolean;\n  element?: ReactNode;\n  render?: ComponentType<ExposedComponentProps>;\n};\n\nexport const customPagesPlugin = (\n  config: CustomPageConfig[],\n): DevPortalPlugin & NavigationPlugin => {\n  return {\n    getRoutes: (): RouteObject[] =>\n      config.map(({ path, ...props }) => ({\n        path,\n        element: <CustomPage {...props} />,\n      })),\n  };\n};\n"],"names":["CustomPage","element","render","prose","slotletProps","useExposedProps","content","React","cn","customPagesPlugin","config","path","props","jsx"],"mappings":";;;;AAKO,MAAMA,IAAa,CAAC;AAAA,EACzB,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC,IAAQ;AACV,MAAsC;AACpC,QAAMC,IAAeC,KACfC,IAAUJ,IAASK,EAAM,cAAcL,GAAQE,CAAY,IAAIH;AAErE,+BAAQ,OAAI,EAAA,WAAWO,EAAGL,KAAS,kBAAkB,GAAI,UAAQG,EAAA,CAAA;AACnE,GCDaG,IAAoB,CAC/BC,OAEO;AAAA,EACL,WAAW,MACTA,EAAO,IAAI,CAAC,EAAE,MAAAC,GAAM,GAAGC,SAAa;AAAA,IAClC,MAAAD;AAAA,IACA,SAASE,gBAAAA,EAAAA,IAACb,GAAY,EAAA,GAAGY,EAAO,CAAA;AAAA,EAAA,EAChC;AAAA;"}

package/lib/zudoku.plugin-markdown.js

@@ -6,7 +6,7 @@ const x = (t, e, n) => Object.entries(t).flatMap(([a, p]) => {
   return s ? {
     path: s,
     lazy: async () => {
-      const { MdxPage: i } = await import("./MdxPage-BqBWsXZ1.js"), { default: m, ...l } = await p();
+      const { MdxPage: i } = await import("./MdxPage-DBhq6-5F.js"), { default: m, ...l } = await p();
       return {
         element: /* @__PURE__ */ u.jsx(
           i,

package/lib/zudoku.plugin-openapi.js

@@ -1,15 +1,15 @@
 import "./jsx-runtime-B6kdoens.js";
-import { o as u } from "./index-BlJ2rj99.js";
-import "./urql-YhcsXYy8.js";
-import "./ZudokuContext-cr-pTRY1.js";
+import { o as u } from "./index-DA74gNq3.js";
+import "./ZudokuContext-BEmsYQoq.js";
 import "lucide-react";
 import "zudoku/openapi-worker";
-import "./index-Dolisrci.js";
-import "./ErrorPage-CsZAN_za.js";
-import "./Markdown-DapSf3wG.js";
+import "./index-g_JJcuFg.js";
+import "./ErrorPage-B-zoPPVx.js";
+import "./Markdown-D6Nze6qq.js";
 import "./joinPath-B7kNnUX4.js";
-import "./router-D2p7Olpn.js";
-import "./index-BG0g4WW0.js";
+import "./urql-core-KJnLL26g.js";
+import "./router-Oe6YmY6B.js";
+import "./index-BRCiYFaL.js";
 export {
   u as openApiPlugin
 };

package/lib/zudoku.plugin-redirect.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.12.2",
+  "version": "0.13.1",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -61,9 +61,9 @@
       "import": "./lib/zudoku.plugin-redirect.js",
       "types": "./dist/lib/plugins/redirect/index.d.ts"
     },
-    "./plugins/custom-page": {
-      "import": "./lib/zudoku.plugin-custom-page.js",
-      "types": "./dist/lib/plugins/custom-page/index.d.ts"
+    "./plugins/custom-pages": {
+      "import": "./lib/zudoku.plugin-custom-pages.js",
+      "types": "./dist/lib/plugins/custom-pages/index.d.ts"
     },
     "./plugins/search-inkeep": {
       "import": "./lib/zudoku.plugin-search-inkeep.js",
@@ -98,54 +98,58 @@
     }
   },
   "dependencies": {
-    "@envelop/core": "5.0.1",
+    "@envelop/core": "5.0.2",
     "@graphql-typed-document-node/core": "3.2.0",
     "@hiogawa/vite-plugin-ssr-css": "0.0.1",
     "@lekoarts/rehype-meta-as-attributes": "3.0.1",
     "@mdx-js/react": "3.0.1",
     "@mdx-js/rollup": "3.0.1",
-    "@monaco-editor/react": "^4.6.0",
     "@pothos/core": "3.41.0",
-    "@radix-ui/react-collapsible": "1.1.0",
-    "@radix-ui/react-dropdown-menu": "^2.1.1",
-    "@radix-ui/react-select": "2.1.1",
-    "@radix-ui/react-visually-hidden": "1.1.0",
-    "@sentry/node": "8.11.0",
+    "@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-select": "2.1.2",
+    "@radix-ui/react-slot": "1.1.0",
+    "@radix-ui/react-tabs": "1.1.1",
+    "@radix-ui/react-visually-hidden": "1",
+    "@sentry/node": "8.34.0",
     "@sindresorhus/slugify": "2.2.1",
     "@stefanprobst/rehype-extract-toc": "2.2.0",
-    "@tailwindcss/typography": "0.5.13",
-    "@tanstack/react-query": "5.50.1",
+    "@tailwindcss/typography": "0.5.15",
+    "@tanstack/react-query": "5.59.13",
+    "@types/react": "18.3.11",
+    "@types/react-dom": "18.3.1",
     "@vitejs/plugin-react": "4.3.1",
+    "@zudoku/httpsnippet": "10.0.9",
     "@zudoku/react-helmet-async": "2.0.4",
-    "autoprefixer": "10.4.19",
-    "chokidar": "^3.6.0",
+    "autoprefixer": "10.4.20",
+    "chokidar": "3.6.0",
     "class-variance-authority": "0.7.0",
+    "clsx": "2.1.1",
     "dotenv": "16.4.5",
-    "express": "4.20.0",
-    "glob": "^11.0.0",
+    "express": "4.21.1",
+    "glob": "11.0.0",
     "graphql": "16.9.0",
     "graphql-type-json": "0.3.2",
-    "graphql-yoga": "5.2.0",
-    "gray-matter": "^4.0.3",
-    "http-terminator": "^3.2.0",
-    "loglevel": "^1.9.1",
-    "lru-cache": "11.0.0",
-    "lucide-react": "0.438.0",
-    "mdx": "0.3.1",
+    "graphql-yoga": "5.7.0",
+    "gray-matter": "4.0.3",
+    "http-terminator": "3.2.0",
+    "loglevel": "1.9.2",
+    "lru-cache": "11.0.1",
+    "lucide-react": "0.452.0",
+    "oauth4webapi": "2.17.0",
     "object-hash": "3.0.0",
     "openapi-types": "12.1.3",
-    "picocolors": "^1.0.1",
-    "postcss": "8.4.39",
-    "posthog-node": "^4.1.1",
-    "prism-react-renderer": "2.3.1",
+    "picocolors": "1.1.0",
+    "postcss": "8.4.47",
+    "posthog-node": "4.2.1",
+    "prism-react-renderer": "2.4.0",
     "prismjs": "1.29.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-error-boundary": "^4.0.13",
-    "react-hook-form": "^7.52.1",
+    "react-error-boundary": "4.0.13",
+    "react-hook-form": "7.53.0",
     "react-is": "18.3.1",
     "react-markdown": "9.0.1",
-    "react-router-dom": "6.25.1",
+    "react-router-dom": "6.27.0",
     "rehype-raw": "7.0.0",
     "rehype-slug": "6.0.0",
     "remark-comment": "1.0.0",
@@ -154,53 +158,42 @@
     "remark-frontmatter": "5.0.0",
     "remark-gfm": "4.0.0",
     "remark-mdx-frontmatter": "5.0.0",
-    "rollup": "^4.21.2",
-    "semver": "7.6.2",
-    "sitemap": "^8.0.0",
+    "rollup": "4.24.0",
+    "semver": "7.6.3",
+    "sitemap": "8.0.0",
     "strip-ansi": "7.1.0",
-    "tailwind-merge": "2.5.2",
-    "tailwindcss": "3.4.4",
-    "tsx": "4.19.0",
-    "ulidx": "^2.3.0",
+    "tailwind-merge": "2.5.4",
+    "tailwindcss": "3.4.13",
+    "tsx": "4.19.1",
+    "ulidx": "2.4.1",
     "unist-util-visit": "5.0.0",
     "urql": "4.1.0",
-    "vaul": "0.9.2",
-    "vite": "5.3.6",
-    "yaml": "2.5.0",
+    "vaul": "1.1.0",
+    "vite": "5.4.9",
+    "yaml": "2.6.0",
     "yargs": "17.7.2",
     "zod": "3.23.8",
-    "zod-validation-error": "3.3.1",
-    "zustand": "4.5.5"
+    "zod-validation-error": "3.4.0",
+    "zustand": "5.0.0"
   },
   "devDependencies": {
-    "@radix-ui/react-dialog": "1.1.1",
-    "@radix-ui/react-slot": "1.1.0",
-    "@radix-ui/react-tabs": "1.1.0",
-    "@types/express": "^4.17.21",
-    "@types/har-format": "^1.2.15",
+    "@types/express": "4.17.21",
+    "@types/har-format": "1.2.15",
     "@types/json-schema": "7.0.15",
     "@types/mdx": "2.0.13",
-    "@types/node": "20.12.10",
-    "@types/object-hash": "^3.0.6",
-    "@types/react": "18.3.3",
-    "@types/react-dom": "18.3.0",
+    "@types/node": "20.16.11",
+    "@types/object-hash": "3.0.6",
     "@types/react-is": "18.3.0",
-    "@types/rollup": "^0.54.0",
-    "@types/semver": "^7.5.8",
-    "@types/yargs": "^17.0.32",
-    "@zudoku/httpsnippet": "10.0.9",
-    "clsx": "2.1.1",
-    "oauth4webapi": "2.11.1",
-    "prism-react-renderer": "2.3.1",
-    "prismjs": "1.29.0",
-    "react-markdown": "9.0.1",
-    "react-router-dom": "6.25.1",
-    "rollup-plugin-visualizer": "^5.12.0",
-    "typescript": "5.5.3"
+    "@types/semver": "7.5.8",
+    "@types/yargs": "17.0.33",
+    "rollup-plugin-visualizer": "5.12.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "typescript": "5.6.3"
   },
   "peerDependencies": {
-    "react": ">18.0.0",
-    "react-dom": ">18.0.0"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "optionalDependencies": {
     "@clerk/clerk-js": "5.11.0",

package/src/app/main.tsx

@@ -2,13 +2,13 @@ import { redirect, type RouteObject } from "react-router-dom";
 import { configuredApiKeysPlugin } from "virtual:zudoku-api-keys-plugin";
 import { configuredApiPlugins } from "virtual:zudoku-api-plugins";
 import { configuredAuthProvider } from "virtual:zudoku-auth";
+import { configuredCustomPagesPlugin } from "virtual:zudoku-custom-pages-plugin";
 import { configuredDocsPlugins } from "virtual:zudoku-docs-plugins";
 import { configuredRedirectPlugin } from "virtual:zudoku-redirect-plugin";
 import { configuredSidebar } from "virtual:zudoku-sidebar";
 import "virtual:zudoku-theme.css";
 import { DevPortal, Layout, RouterError } from "zudoku/components";
 import { isNavigationPlugin } from "zudoku/internal";
-import { customPagePlugin } from "zudoku/plugins/custom-page";
 import { inkeepSearchPlugin } from "zudoku/plugins/search-inkeep";
 import type { ZudokuConfig } from "../config/config.js";
 import { traverseSidebar } from "../lib/components/navigation/utils.js";
@@ -42,7 +42,7 @@ export const convertZudokuConfigToOptions = (
         },
       },
     },
-    slotlets: config.slotlets,
+    slotlets: config.UNSAFE_slotlets,
     metadata: {
       favicon: "https://cdn.zudoku.dev/logos/favicon.svg",
       title: "%s - Zudoku",
@@ -60,7 +60,7 @@ export const convertZudokuConfigToOptions = (
       ...configuredApiPlugins,
       ...(configuredRedirectPlugin ? [configuredRedirectPlugin] : []),
       ...(configuredApiKeysPlugin ? [configuredApiKeysPlugin] : []),
-      ...(config.customPages ? [customPagePlugin(config.customPages)] : []),
+      ...(configuredCustomPagesPlugin ? [configuredCustomPagesPlugin] : []),
       ...(configuredAuthProvider?.getAuthenticationPlugin
         ? [configuredAuthProvider.getAuthenticationPlugin()]
         : []),

package/src/lib/components/Banner.tsx

@@ -9,7 +9,7 @@ const COLOR_MAP = {
   tip: "bg-green-600",
   caution: "bg-orange-500",
   danger: "bg-rose-500",
-};
+} as const;
 
 export const Banner = () => {
   const { page } = useZudoku();
@@ -19,12 +19,22 @@ export const Banner = () => {
     return <style>{`:root { --banner-height: 0px; }`}</style>;
   }
 
+  const mappedColor =
+    page.banner.color && page.banner.color in COLOR_MAP
+      ? COLOR_MAP[page.banner.color as keyof typeof COLOR_MAP]
+      : !page.banner.color
+        ? "bg-primary"
+        : undefined;
+
+  const style = !mappedColor ? { backgroundColor: page.banner.color } : {};
+
   return (
     <div
       className={cn(
         "relative text-primary-foreground text-sm font-medium px-4 py-2 flex gap-2 items-center",
-        page.banner.color ? COLOR_MAP[page.banner.color] : "bg-primary",
+        mappedColor,
       )}
+      style={style}
     >
       <div className="w-full">{page.banner.message}</div>
       {page.banner.dismissible && (

package/src/lib/components/Header.tsx

@@ -91,8 +91,8 @@ export const Header = memo(function HeaderInner() {
               </div>
             </Link>
           </div>
-          <div className="grid grid-cols-2 md:grid-cols-[--sidecar-grid-cols] items-center gap-8">
-            <div className="w-full justify-center flex">
+          <div className="grid grid-cols-1 lg:grid-cols-[--sidecar-grid-cols] items-center gap-8">
+            <div className="w-full justify-center hidden lg:flex">
               <Search />
             </div>
 
@@ -133,7 +133,9 @@ export const Header = memo(function HeaderInner() {
             </div>
           </div>
         </div>
+        <Slotlet name="top-navigation-before" />
         <TopNavigation />
+        <Slotlet name="top-navigation-after" />
       </div>
     </header>
   );

package/src/lib/components/Layout.tsx

@@ -49,6 +49,7 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
       </Helmet>
       <Slotlet name="layout-before-head" />
       <Header />
+      <Slotlet name="layout-after-head" />
 
       <div className="w-full max-w-screen-2xl mx-auto px-10 lg:px-12">
         <Suspense

package/src/lib/components/MobileTopNavigation.tsx

@@ -10,6 +10,7 @@ import {
   DrawerTrigger,
 } from "../ui/Drawer.js";
 import { useZudoku } from "./context/ZudokuContext.js";
+import { Search } from "./Search.js";
 
 export const MobileTopNavigation = () => {
   const { topNavigation } = useZudoku();
@@ -27,6 +28,9 @@ export const MobileTopNavigation = () => {
         <VisuallyHidden>
           <DrawerTitle>Navigation</DrawerTitle>
         </VisuallyHidden>
+        <div className="flex p-4">
+          <Search />
+        </div>
         <ul className="flex flex-col items-center gap-4 p-4">
           {topNavigation.map((item) => (
             <li key={item.label}>

package/src/lib/components/Search.tsx

@@ -39,7 +39,7 @@ export const Search = () => {
       <button
         type="button"
         onClick={() => setIsOpen(true)}
-        className="flex items-center border border-input hover:bg-accent hover:text-accent-foreground p-4 relative h-8 justify-start rounded-lg bg-background text-sm text-muted-foreground shadow-none w-40 sm:w-72"
+        className="flex items-center border border-input hover:bg-accent hover:text-accent-foreground p-4 relative h-8 justify-start rounded-lg bg-background text-sm text-muted-foreground shadow-none w-full sm:w-72"
       >
         <div className="flex items-center gap-2 flex-grow">
           <SearchIcon size={14} />

package/src/lib/components/SlotletProvider.tsx

@@ -1,6 +1,21 @@
-import React, { type ReactElement, ReactNode, useContext } from "react";
+import React, {
+  type ComponentType,
+  type ReactElement,
+  ReactNode,
+  useContext,
+} from "react";
 import { isValidElementType } from "react-is";
-export type Slotlets = Record<string, ReactNode | ReactElement>;
+import {
+  type Location,
+  type NavigateFunction,
+  type SetURLSearchParams,
+} from "react-router-dom";
+import { useExposedProps } from "../util/useExposedProps.js";
+
+export type Slotlets = Record<
+  string,
+  ReactNode | ReactElement | ComponentType<ExposedComponentProps>
+>;
 
 const SlotletContext = React.createContext<Slotlets | undefined>({});
 
@@ -18,13 +33,21 @@ export const SlotletProvider = ({
   );
 };
 
+export type ExposedComponentProps = {
+  location: Location;
+  navigate: NavigateFunction;
+  searchParams: URLSearchParams;
+  setSearchParams: SetURLSearchParams;
+};
+
 export const Slotlet = ({ name }: { name: string }) => {
   const context = useContext(SlotletContext);
   const componentOrElement = context?.[name];
+  const slotletProps = useExposedProps();
 
   if (isValidElementType(componentOrElement)) {
-    return React.createElement(componentOrElement);
+    return React.createElement(componentOrElement, slotletProps);
   }
 
-  return componentOrElement;
+  return componentOrElement as ReactNode;
 };

package/src/lib/components/index.ts

@@ -16,7 +16,7 @@ export const useMDXComponents = /*@__PURE__*/ useMDXComponentsImport;
 export const Callout = /*@__PURE__*/ CalloutImport;
 export const DevPortal = /*@__PURE__*/ DevPortalImport;
 export const Layout = /*@__PURE__*/ LayoutImport;
-export const Link = /*@__PURE__*/ LinkImport;
+export const Link: typeof LinkImport = /*@__PURE__*/ LinkImport;
 export const RouterError = /*@__PURE__*/ RouterErrorImport;
 export const ServerError = /*@__PURE__*/ ServerErrorImport;
 export const Bootstrap = /*@__PURE__*/ BootstrapImport;

package/src/lib/core/DevPortalContext.ts

@@ -51,7 +51,7 @@ type Page = Partial<{
   };
   banner?: {
     message: ReactNode;
-    color?: "note" | "tip" | "info" | "caution" | "danger";
+    color?: "note" | "tip" | "info" | "caution" | "danger" | (string & {});
     dismissible?: boolean;
   };
 }>;

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

@@ -58,9 +58,10 @@ export const createOperationSlug = (
   );
 };
 
-const cache = new LRUCache<string, Promise<OpenAPIDocument>>({
+const cache = new LRUCache<string, OpenAPIDocument>({
   ttl: 60 * 10 * 1000,
   ttlAutopurge: true,
+  fetchMethod: (_key, _oldValue, { context }) => validate(context as string),
 });
 
 const builder = new SchemaBuilder<{
@@ -429,16 +430,7 @@ const Schema = builder.objectRef<OpenAPIDocument>("Schema").implement({
 
 const loadOpenAPISchema = async (input: NonNullable<unknown>) => {
   const hash = hashit(input);
-
-  if (cache.has(hash)) {
-    return cache.get(hash)!;
-  }
-
-  const schema = validate(input);
-
-  cache.set(hash, schema);
-
-  return schema;
+  return await cache.forceFetch(hash, { context: input });
 };
 
 const SchemaSource = builder.enumType("SchemaType", {

package/src/lib/plugins/custom-pages/CustomPage.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { cn } from "../../util/cn.js";
+import { useExposedProps } from "../../util/useExposedProps.js";
+import type { CustomPageConfig } from "./index.js";
+
+export const CustomPage = ({
+  element,
+  render,
+  prose = true,
+}: Omit<CustomPageConfig, "path">) => {
+  const slotletProps = useExposedProps();
+  const content = render ? React.createElement(render, slotletProps) : element;
+
+  return <div className={cn(prose && "prose max-w-full")}>{content}</div>;
+};

package/src/lib/plugins/custom-pages/index.tsx

@@ -0,0 +1,24 @@
+import { type ComponentType, type ReactNode } from "react";
+import type { RouteObject } from "react-router-dom";
+import { type ExposedComponentProps } from "../../components/SlotletProvider.js";
+import type { DevPortalPlugin, NavigationPlugin } from "../../core/plugins.js";
+import { CustomPage } from "./CustomPage.js";
+
+export type CustomPageConfig = {
+  path: string;
+  prose?: boolean;
+  element?: ReactNode;
+  render?: ComponentType<ExposedComponentProps>;
+};
+
+export const customPagesPlugin = (
+  config: CustomPageConfig[],
+): DevPortalPlugin & NavigationPlugin => {
+  return {
+    getRoutes: (): RouteObject[] =>
+      config.map(({ path, ...props }) => ({
+        path,
+        element: <CustomPage {...props} />,
+      })),
+  };
+};

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

@@ -1,12 +1,12 @@
 import { CheckIcon, CopyIcon } from "lucide-react";
 import { useState, useTransition } from "react";
+import { useQuery } from "urql";
 import { useSelectedServerStore } from "../../authentication/state.js";
 import { InlineCode } from "../../components/InlineCode.js";
 import { Button } from "../../ui/Button.js";
 import { useOasConfig } from "./context.js";
 import { graphql } from "./graphql/index.js";
 import { SimpleSelect } from "./SimpleSelect.js";
-import { useQuery } from "./util/urql.js";
 
 const ServersQuery = graphql(/* GraphQL */ `
   query ServersQuery($input: JSON!, $type: SchemaType!) {

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

@@ -1,4 +1,5 @@
 import { ResultOf } from "@graphql-typed-document-node/core";
+import { useQuery } from "urql";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
 import { DeveloperHint } from "../../components/DeveloperHint.js";
 import { ErrorPage } from "../../components/ErrorPage.js";
@@ -12,7 +13,6 @@ import { OperationListItem } from "./OperationListItem.js";
 import StaggeredRender from "./StaggeredRender.js";
 import { useOasConfig } from "./context.js";
 import { graphql } from "./graphql/index.js";
-import { useQuery } from "./util/urql.js";
 
 export const OperationsFragment = graphql(/* GraphQL */ `
   fragment OperationsFragment on OperationItem {

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

@@ -1,9 +1,8 @@
 import { Outlet } from "react-router-dom";
+import { Provider, Client as UrqlClient } from "urql";
 import { OasConfigProvider } from "./context.js";
 import { OasPluginConfig } from "./interfaces.js";
 
-import { Provider, Client as UrqlClient } from "./util/urql.js";
-
 export function OpenApiRoute({
   config,
   client,

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

@@ -1,6 +1,7 @@
 import { HTTPSnippet } from "@zudoku/httpsnippet";
 import { Fragment, useMemo, useTransition } from "react";
 import { useSearchParams } from "react-router-dom";
+import { useQuery } from "urql";
 import { useSelectedServerStore } from "../../authentication/state.js";
 import { TextColorMap } from "../../components/navigation/SidebarBadge.js";
 import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
@@ -16,7 +17,6 @@ import { ResponsesSidecarBox } from "./ResponsesSidecarBox.js";
 import * as SidecarBox from "./SidecarBox.js";
 import { SimpleSelect } from "./SimpleSelect.js";
 import { generateSchemaExample } from "./util/generateSchemaExample.js";
-import { useQuery } from "./util/urql.js";
 
 const getConverted = (snippet: HTTPSnippet, option: string) => {
   let converted;

package/src/lib/plugins/openapi/client/createMemoryClient.ts

@@ -1,10 +1,5 @@
 /* eslint-disable no-console */
-import {
-  cacheExchange,
-  Client,
-  fetchExchange,
-  mapExchange,
-} from "../util/urql.js";
+import { cacheExchange, Client, fetchExchange, mapExchange } from "urql";
 import { createServer } from "./createServer.js";
 import { CreateClientFunction } from "./interfaces.js";
 

package/src/lib/plugins/openapi/client/createWorkerClient.ts

@@ -1,12 +1,7 @@
 /* eslint-disable no-console */
 import { monotonicFactory } from "ulidx";
+import { cacheExchange, Client, fetchExchange, mapExchange } from "urql";
 import { createWaitForNotify } from "../../../util/createWaitForNotify.js";
-import {
-  cacheExchange,
-  Client,
-  fetchExchange,
-  mapExchange,
-} from "../util/urql.js";
 import { createClient as createMemoryClient } from "./createMemoryClient.js";
 import { CreateClientFunction } from "./interfaces.js";