zudoku 0.0.0-e2f3304 → 0.0.0-e4b82fa

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

@@ -1,6 +1,8 @@
 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";
 import type { SchemaObject } from "../../oas/parser/index.js";
@@ -15,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;
@@ -65,6 +66,9 @@ export const GetServerQuery = graphql(/* GraphQL */ `
   query getServerQuery($input: JSON!, $type: SchemaType!) {
     schema(input: $input, type: $type) {
       url
+      servers {
+        url
+      }
     }
   }
 `);
@@ -135,6 +139,8 @@ export const Sidecar = ({
     );
   });
 
+  const { selectedServer } = useSelectedServerStore();
+
   const code = useMemo(() => {
     const example = requestBodyContent?.[0]?.schema
       ? generateSchemaExample(requestBodyContent[0].schema as SchemaObject)
@@ -143,7 +149,7 @@ export const Sidecar = ({
     const snippet = new HTTPSnippet({
       method: operation.method.toLocaleUpperCase(),
       url:
-        (result.data?.schema.url ?? "") +
+        (selectedServer ?? result.data?.schema.url ?? "") +
         operation.path.replaceAll("{", ":").replaceAll("}", ""),
       postData: example
         ? {
@@ -160,7 +166,13 @@ export const Sidecar = ({
     });
 
     return getConverted(snippet, selectedLang);
-  }, [selectedLang, operation.method, operation.path, requestBodyContent]);
+  }, [
+    selectedServer,
+    selectedLang,
+    operation.method,
+    operation.path,
+    requestBodyContent,
+  ]);
 
   return (
     <aside className="flex flex-col overflow-hidden sticky top-[--scroll-padding] gap-4">
@@ -175,6 +187,9 @@ export const Sidecar = ({
           </span>
           <PlaygroundDialogWrapper
             server={result.data?.schema.url ?? ""}
+            servers={
+              result.data?.schema.servers.map((server) => server.url) ?? []
+            }
             operation={operation}
           />
         </SidecarBox.Head>

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

@@ -7,6 +7,7 @@ export const SimpleSelect = ({
   onChange,
   className,
   options,
+  showChevrons = true,
 }: {
   value: string;
   onChange: ChangeEventHandler<HTMLSelectElement>;
@@ -15,12 +16,14 @@ export const SimpleSelect = ({
     value: string;
     label: string;
   }[];
+  showChevrons?: boolean;
 }) => (
-  <div className={cn("grid", className)}>
+  <div className="grid">
     <select
       className={cn(
         "row-start-1 col-start-1 border border-input text-foreground px-2 py-1 pe-6",
         "rounded-md appearance-none bg-zinc-50 hover:bg-white dark:bg-zinc-800 hover:dark:bg-zinc-800/75",
+        className,
       )}
       value={value}
       onChange={onChange}
@@ -31,7 +34,12 @@ export const SimpleSelect = ({
         </option>
       ))}
     </select>
-    <div className="row-start-1 col-start-1 self-center justify-self-end relative end-2 pointer-events-none">
+    <div
+      className={cn(
+        !showChevrons && "hidden",
+        "row-start-1 col-start-1 self-center justify-self-end relative end-2 pointer-events-none",
+      )}
+    >
       <ChevronsUpDownIcon size={14} />
     </div>
   </div>

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";
 

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

@@ -13,11 +13,13 @@ import * as types from "./graphql.js";
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const 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    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n":
     types.OperationsFragmentFragmentDoc,
   "\n  query AllOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      description\n      title\n      url\n      version\n      tags {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n      }\n    }\n  }\n":
     types.AllOperationsDocument,
-  "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n    }\n  }\n":
+  "\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 GetCategories($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        __typename\n        name\n        operations {\n          __typename\n          slug\n          deprecated\n          method\n          summary\n          operationId\n          path\n        }\n      }\n    }\n  }\n":
     types.GetCategoriesDocument,
@@ -37,6 +39,12 @@ const documents = {
  */
 export function graphql(source: string): unknown;
 
+/**
+ * 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 ServersQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n",
+): (typeof documents)["\n  query ServersQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -53,8 +61,8 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n    }\n  }\n",
-): (typeof documents)["\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n    }\n  }\n"];
+  source: "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n",
+): (typeof documents)["\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

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

@@ -131,6 +131,7 @@ export type Schema = {
   openapi: Scalars["String"]["output"];
   operations: Array<OperationItem>;
   paths: Array<PathItem>;
+  servers: Array<Server>;
   tags: Array<SchemaTag>;
   title: Scalars["String"]["output"];
   url: Scalars["String"]["output"];
@@ -157,12 +158,32 @@ export type SchemaTag = {
 
 export type SchemaType = "file" | "raw" | "url";
 
+export type Server = {
+  __typename?: "Server";
+  description?: Maybe<Scalars["String"]["output"]>;
+  url: Scalars["String"]["output"];
+};
+
 export type TagItem = {
   __typename?: "TagItem";
   description?: Maybe<Scalars["String"]["output"]>;
   name: Scalars["String"]["output"];
 };
 
+export type ServersQueryQueryVariables = Exact<{
+  input: Scalars["JSON"]["input"];
+  type: SchemaType;
+}>;
+
+export type ServersQueryQuery = {
+  __typename?: "Query";
+  schema: {
+    __typename?: "Schema";
+    url: string;
+    servers: Array<{ __typename?: "Server"; url: string }>;
+  };
+};
+
 export type OperationsFragmentFragment = {
   __typename?: "OperationItem";
   slug: string;
@@ -249,7 +270,11 @@ export type GetServerQueryQueryVariables = Exact<{
 
 export type GetServerQueryQuery = {
   __typename?: "Query";
-  schema: { __typename?: "Schema"; url: string };
+  schema: {
+    __typename?: "Schema";
+    url: string;
+    servers: Array<{ __typename?: "Server"; url: string }>;
+  };
 };
 
 export type GetCategoriesQueryVariables = Exact<{
@@ -423,6 +448,83 @@ export const OperationsFragmentFragmentDoc = {
     },
   ],
 } as unknown as DocumentNode<OperationsFragmentFragment, unknown>;
+export const ServersQueryDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "ServersQuery" },
+      variableDefinitions: [
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "input" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: { kind: "NamedType", name: { kind: "Name", value: "JSON" } },
+          },
+        },
+        {
+          kind: "VariableDefinition",
+          variable: { kind: "Variable", name: { kind: "Name", value: "type" } },
+          type: {
+            kind: "NonNullType",
+            type: {
+              kind: "NamedType",
+              name: { kind: "Name", value: "SchemaType" },
+            },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "schema" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "input" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "input" },
+                },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "type" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "type" },
+                },
+              },
+            ],
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                { kind: "Field", name: { kind: "Name", value: "url" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "servers" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      { kind: "Field", name: { kind: "Name", value: "url" } },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<ServersQueryQuery, ServersQueryQueryVariables>;
 export const AllOperationsDocument = {
   kind: "Document",
   definitions: [
@@ -727,6 +829,16 @@ export const GetServerQueryDocument = {
               kind: "SelectionSet",
               selections: [
                 { kind: "Field", name: { kind: "Name", value: "url" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "servers" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      { kind: "Field", name: { kind: "Name", value: "url" } },
+                    ],
+                  },
+                },
               ],
             },
           },

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

@@ -1,11 +1,7 @@
 import { matchPath, useRouteError, type RouteObject } from "react-router-dom";
+import { Client as UrqlClient, cacheExchange, fetchExchange } from "urql";
 import { type DevPortalPlugin } from "../../core/plugins.js";
 import { graphql } from "./graphql/index.js";
-import {
-  Client as UrqlClient,
-  cacheExchange,
-  fetchExchange,
-} from "./util/urql.js";
 
 import { useQuery } from "@tanstack/react-query";
 import { CirclePlayIcon, LogInIcon } from "lucide-react";

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

@@ -1,6 +1,7 @@
 import { useMutation } from "@tanstack/react-query";
-import { Fragment, useEffect, useRef } from "react";
+import { Fragment, useEffect, useRef, useTransition } from "react";
 import { FormProvider, useForm } from "react-hook-form";
+import { useSelectedServerStore } from "../../../authentication/state.js";
 import { useApiIdentities } from "../../../components/context/ZudokuContext.js";
 import {
   Select,
@@ -62,6 +63,7 @@ export type PlaygroundForm = {
 
 export type PlaygroundContentProps = {
   server: string;
+  servers?: string[];
   url: string;
   method: string;
   headers?: Header[];
@@ -72,6 +74,7 @@ export type PlaygroundContentProps = {
 
 export const Playground = ({
   server,
+  servers,
   url,
   method,
   headers = [],
@@ -79,6 +82,8 @@ export const Playground = ({
   pathParams = [],
   defaultBody = "",
 }: PlaygroundContentProps) => {
+  const { selectedServer, setSelectedServer } = useSelectedServerStore();
+  const [, startTransition] = useTransition();
   const { register, control, handleSubmit, watch, setValue, ...form } =
     useForm<PlaygroundForm>({
       defaultValues: {
@@ -114,7 +119,7 @@ export const Playground = ({
 
   const queryMutation = useMutation({
     mutationFn: async (data: PlaygroundForm) => {
-      const requestUrl = createUrl(server, url, data);
+      const requestUrl = createUrl(selectedServer ?? server, url, data);
       const start = performance.now();
 
       const request = new Request(requestUrl, {
@@ -124,6 +129,7 @@ export const Playground = ({
             .filter((h) => h.name)
             .map((header) => [header.name, header.value]),
         ),
+        body: data.body ? data.body : undefined,
       });
 
       if (data.identity !== NO_IDENTITY) {
@@ -200,19 +206,48 @@ export const Playground = ({
       </Fragment>
     ));
 
+  const serverSelect = (
+    <div className="inline-block opacity-50 hover:opacity-100 transition">
+      {servers && servers.length > 1 ? (
+        <Select
+          onValueChange={(value) => {
+            startTransition(() => {
+              setSelectedServer(value);
+            });
+          }}
+          value={selectedServer}
+        >
+          <SelectTrigger className="p-0 border-none flex-row-reverse bg-transparent text-xs gap-0.5 h-auto">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {servers.map((s) => (
+              <SelectItem key={s} value={s}>
+                {s.replace(/^https?:\/\//, "")}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      ) : (
+        <span>{server.replace(/^https?:\/\//, "")}</span>
+      )}
+    </div>
+  );
+
   return (
     <FormProvider
       {...{ register, control, handleSubmit, watch, setValue, ...form }}
     >
       <form onSubmit={handleSubmit((data) => queryMutation.mutateAsync(data))}>
-        <div className="grid grid-cols-2 text-sm h-full">
+        <div className="grid grid-cols-[8fr_7fr] text-sm h-full">
           <div className="flex flex-col gap-4 p-8 bg-muted/50 after:bg-muted-foreground/20 relative after:absolute after:w-px after:inset-0 after:left-auto">
             <div className="flex gap-2 items-stretch">
               <div className="flex flex-1 items-center w-full border rounded-md">
                 <div className="border-r p-2 bg-muted rounded-l-md self-stretch font-semibold font-mono">
                   {method.toUpperCase()}
                 </div>
-                <div className="p-2 font-mono text-xs">
+                <div className="flex items-center flex-wrap p-2 font-mono text-xs">
+                  {serverSelect}
                   {path}
                   {urlQueryParams.length > 0 ? "?" : ""}
                   {urlQueryParams}
@@ -296,7 +331,7 @@ export const Playground = ({
               </TabsContent>
             </Tabs>
           </div>
-          <div className="p-8 bg-muted/70">
+          <div className="min-w-0 p-8 bg-muted/70">
             {queryMutation.error ? (
               <div className="flex flex-col gap-2">
                 {formState.pathParams.some((p) => p.value === "") && (

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

@@ -54,7 +54,6 @@ export const ResponseTab = ({
             view === "raw" ? (jsonContent ? "plain" : detectedLanguage) : "json"
           }
           noBackground
-          showLanguageIndicator
           // playground dialog has h-5/6 ≈ 83.333vh
           className="overflow-x-auto p-4 text-xs max-h-[calc(83.333vh-180px)]"
           code={view === "raw" ? body : beautifiedBody}

package/src/lib/plugins/openapi/playground/createUrl.ts

@@ -8,7 +8,12 @@ export const createUrl = (host: string, path: string, data: PlaygroundForm) => {
     return value ?? match;
   });
 
-  const url = new URL(filledPath, host);
+  // Ensure host ends with a slash and path doesn't start with one,
+  // so they form a correct URL, without overriding the host's path.
+  const url = new URL(
+    filledPath.replace(/^\//, ""),
+    host.endsWith("/") ? host : `${host}/`,
+  );
 
   data.queryParams
     .filter((param) => param.active)

package/src/lib/ui/Callout.tsx

@@ -2,6 +2,7 @@ import {
   AlertTriangleIcon,
   InfoIcon,
   LightbulbIcon,
+  type LucideIcon,
   ShieldAlertIcon,
 } from "lucide-react";
 import type { ReactNode } from "react";
@@ -14,7 +15,7 @@ const stylesMap = {
     iconColor: "text-gray-600 dark:text-zinc-300",
     titleColor: "text-gray-600 dark:text-zinc-300",
     textColor: "text-gray-600 dark:text-zinc-300",
-    Icon: InfoIcon,
+    Icon: InfoIcon as LucideIcon,
   },
   tip: {
     border: "border-green-500 dark:border-green-800",
@@ -22,7 +23,7 @@ const stylesMap = {
     iconColor: "text-green-600 dark:text-green-200",
     titleColor: "text-green-700 dark:text-green-200",
     textColor: "text-green-600 dark:text-green-50",
-    Icon: LightbulbIcon,
+    Icon: LightbulbIcon as LucideIcon,
   },
   info: {
     border: "border-blue-400 dark:border-blue-900/60",
@@ -30,7 +31,7 @@ const stylesMap = {
     iconColor: "text-blue-400 dark:text-blue-200",
     titleColor: "text-blue-700 dark:text-blue-200",
     textColor: "text-blue-600 dark:text-blue-100",
-    Icon: InfoIcon,
+    Icon: InfoIcon as LucideIcon,
   },
   caution: {
     border: "border-yellow-400 dark:border-yellow-400/25",
@@ -38,7 +39,7 @@ const stylesMap = {
     iconColor: "text-yellow-500 dark:text-yellow-300",
     titleColor: "text-yellow-600 dark:text-yellow-300",
     textColor: "text-yellow-700 dark:text-yellow-200",
-    Icon: AlertTriangleIcon,
+    Icon: AlertTriangleIcon as LucideIcon,
   },
   danger: {
     border: "border-rose-400 dark:border-rose-800",
@@ -46,9 +47,9 @@ const stylesMap = {
     iconColor: "text-rose-400 dark:text-rose-300",
     titleColor: "text-rose-800 dark:text-rose-300",
     textColor: "text-rose-700 dark:text-rose-100",
-    Icon: ShieldAlertIcon,
+    Icon: ShieldAlertIcon as LucideIcon,
   },
-};
+} as const;
 
 type CalloutProps = {
   type: keyof typeof stylesMap;

package/src/lib/ui/Drawer.tsx

@@ -13,16 +13,16 @@ const Drawer = ({
 );
 Drawer.displayName = "Drawer";
 
-const DrawerTrigger = DrawerPrimitive.Trigger;
+const DrawerTrigger: typeof DrawerPrimitive.Trigger = DrawerPrimitive.Trigger;
 
-const DrawerPortal = DrawerPrimitive.Portal;
+const DrawerPortal: typeof DrawerPrimitive.Portal = DrawerPrimitive.Portal;
 
-const DrawerClose = DrawerPrimitive.Close;
+const DrawerClose: typeof DrawerPrimitive.Close = DrawerPrimitive.Close;
 
-const DrawerOverlay = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
->(({ className, ...props }, ref) => (
+const DrawerOverlay: React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay> &
+    React.RefAttributes<React.ElementRef<typeof DrawerPrimitive.Overlay>>
+> = React.forwardRef(({ className, ...props }, ref) => (
   <DrawerPrimitive.Overlay
     ref={ref}
     className={cn("fixed inset-0 z-50 bg-black/80", className)}
@@ -31,29 +31,31 @@ const DrawerOverlay = React.forwardRef<
 ));
 DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 
-const DrawerContent = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Content>,
+const DrawerContent: React.ForwardRefExoticComponent<
   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
     hideBar?: boolean;
-  }
->(({ className, children, hideBar = true, ...props }, ref) => (
-  <DrawerPortal>
-    <DrawerOverlay />
-    <DrawerPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
-        className,
-      )}
-      {...props}
-    >
-      {!hideBar && (
-        <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
-      )}
-      {children}
-    </DrawerPrimitive.Content>
-  </DrawerPortal>
-));
+  } & React.RefAttributes<React.ElementRef<typeof DrawerPrimitive.Content>>
+> = React.forwardRef(
+  ({ className, children, hideBar = true, ...props }, ref) => (
+    <DrawerPortal>
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        ref={ref}
+        className={cn(
+          "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+          className,
+        )}
+        {...props}
+      >
+        {!hideBar && (
+          <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+        )}
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  ),
+);
+
 DrawerContent.displayName = "DrawerContent";
 
 const DrawerHeader = ({
@@ -78,10 +80,10 @@ const DrawerFooter = ({
 );
 DrawerFooter.displayName = "DrawerFooter";
 
-const DrawerTitle = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
->(({ className, ...props }, ref) => (
+const DrawerTitle: React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title> &
+    React.RefAttributes<React.ElementRef<typeof DrawerPrimitive.Title>>
+> = React.forwardRef(({ className, ...props }, ref) => (
   <DrawerPrimitive.Title
     ref={ref}
     className={cn(
@@ -93,10 +95,10 @@ const DrawerTitle = React.forwardRef<
 ));
 DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
 
-const DrawerDescription = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
->(({ className, ...props }, ref) => (
+const DrawerDescription: React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description> &
+    React.RefAttributes<React.ElementRef<typeof DrawerPrimitive.Description>>
+> = React.forwardRef(({ className, ...props }, ref) => (
   <DrawerPrimitive.Description
     ref={ref}
     className={cn("text-sm text-muted-foreground", className)}

package/src/lib/util/useExposedProps.tsx

@@ -0,0 +1,10 @@
+import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
+import type { ExposedComponentProps } from "../components/SlotletProvider.js";
+
+export const useExposedProps = (): ExposedComponentProps => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  return { location, navigate, searchParams, setSearchParams };
+};

package/dist/lib/plugins/custom-page/index.d.ts

@@ -1,8 +0,0 @@
-import type { ReactNode } from "react";
-import type { DevPortalPlugin, NavigationPlugin } from "../../core/plugins.js";
-type CustomPageConfig = Array<{
-    path: string;
-    element: ReactNode;
-}>;
-export declare const customPagePlugin: (config: CustomPageConfig) => DevPortalPlugin & NavigationPlugin;
-export {};

package/dist/lib/plugins/custom-page/index.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ProseClasses } from "../../components/Markdown.js";
-export const customPagePlugin = (config) => {
-    return {
-        getRoutes: () => config.map(({ path, element }) => ({
-            path,
-            // TODO: we should componentize prose pages
-            element: _jsx("div", { className: ProseClasses + " max-w-full", children: element }),
-        })),
-    };
-};
-//# sourceMappingURL=index.js.map