zudoku 0.0.0-f2a195f → 0.0.0-f417aae

package/src/app/main.tsx

@@ -5,11 +5,11 @@ 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 { configuredSearchPlugin } from "virtual:zudoku-search-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 { inkeepSearchPlugin } from "zudoku/plugins/search-inkeep";
 import type { ZudokuConfig } from "../config/config.js";
 import { traverseSidebar } from "../lib/components/navigation/utils.js";
 import type { ZudokuContextOptions } from "../lib/core/DevPortalContext.js";
@@ -53,11 +53,9 @@ export const convertZudokuConfigToOptions = (
     mdx: config.mdx,
     authentication: configuredAuthProvider,
     plugins: [
-      ...(config.search?.type === "inkeep"
-        ? [inkeepSearchPlugin(config.search)]
-        : []),
       ...configuredDocsPlugins,
       ...configuredApiPlugins,
+      ...(configuredSearchPlugin ? [configuredSearchPlugin] : []),
       ...(configuredRedirectPlugin ? [configuredRedirectPlugin] : []),
       ...(configuredApiKeysPlugin ? [configuredApiKeysPlugin] : []),
       ...(configuredCustomPagesPlugin ? [configuredCustomPagesPlugin] : []),

package/src/lib/authentication/components/CallbackHandler.tsx

@@ -1,59 +1,28 @@
-import logger from "loglevel";
-import { useEffect, useRef, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { DeveloperHint } from "../../components/DeveloperHint.js";
-import { ErrorPage } from "../../components/ErrorPage.js";
-import { Spinner } from "../../components/Spinner.js";
-import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Navigate } from "react-router-dom";
+import { ZudokuError } from "../../util/invariant.js";
 
 export function CallbackHandler({
   handleCallback,
 }: {
   handleCallback: () => Promise<string>;
 }) {
-  const [error, setError] = useState<Error | null>(null);
-  const navigate = useNavigate();
-  // Deal with double mount in dev mode which will break
-  // the OAuth flow because you can only use the code once
-  const didInitialize = useRef(false);
+  const executeCallback = useSuspenseQuery({
+    retry: false,
+    queryKey: ["oauth-callback"],
+    queryFn: async () => {
+      try {
+        return await handleCallback();
+      } catch (error) {
+        throw new ZudokuError("Could not validate user", {
+          cause: error,
+          title: "Authentication Error",
+          developerHint:
+            "Check the configuration of your authorization provider and ensure all settings such as the callback URL are configured correctly.",
+        });
+      }
+    },
+  });
 
-  useEffect(() => {
-    if (didInitialize.current) {
-      return;
-    }
-    didInitialize.current = true;
-    handleCallback()
-      .then((redirect) => {
-        navigate(redirect);
-      })
-      .catch((err) => {
-        logger.error(err);
-        setError(err);
-      });
-  }, [navigate, handleCallback]);
-
-  if (error) {
-    return (
-      <ErrorPage
-        category="Error"
-        title="Authentication Error"
-        message={
-          <>
-            <DeveloperHint className="mb-4">
-              Check the configuration of your authorization provider and ensure
-              all settings such as the callback URL are configured correctly.
-            </DeveloperHint>
-            An error occurred while authorizing the user.
-            <SyntaxHighlight code={error.toString()} language="plain" />
-          </>
-        }
-      />
-    );
-  }
-
-  return (
-    <div className="grid h-full place-items-center">
-      <Spinner />
-    </div>
-  );
+  return <Navigate to={executeCallback.data} />;
 }

package/src/lib/authentication/hook.ts

@@ -10,7 +10,7 @@ export const useAuth = () => {
     isAuthEnabled,
     isPending: authState.isPending,
     profile: authState.profile,
-    isAuthenticated: authState.profile,
+    isAuthenticated: Boolean(authState.profile),
 
     login: async () => {
       if (!isAuthEnabled) {

package/src/lib/components/MobileTopNavigation.tsx

@@ -2,6 +2,7 @@ import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { cx } from "class-variance-authority";
 import { MenuIcon } from "lucide-react";
 import { NavLink } from "react-router-dom";
+import { useAuth } from "../authentication/hook.js";
 import {
   Drawer,
   DrawerClose,
@@ -11,9 +12,12 @@ import {
 } from "../ui/Drawer.js";
 import { useZudoku } from "./context/ZudokuContext.js";
 import { Search } from "./Search.js";
+import { isHiddenItem } from "./TopNavigation.js";
 
 export const MobileTopNavigation = () => {
   const { topNavigation } = useZudoku();
+  const { isAuthenticated } = useAuth();
+
   return (
     <Drawer direction="right">
       <div className="flex lg:hidden justify-self-end">
@@ -22,7 +26,7 @@ export const MobileTopNavigation = () => {
         </DrawerTrigger>
       </div>
       <DrawerContent
-        className="lg:hidden h-screen right-0 left-auto w-[320px] rounded-none"
+        className="lg:hidden h-screen right-0 left-auto w-[320px] rounded-none overflow-auto"
         aria-describedby={undefined}
       >
         <VisuallyHidden>
@@ -32,7 +36,7 @@ export const MobileTopNavigation = () => {
           <Search />
         </div>
         <ul className="flex flex-col items-center gap-4 p-4">
-          {topNavigation.map((item) => (
+          {topNavigation.filter(isHiddenItem(isAuthenticated)).map((item) => (
             <li key={item.label}>
               <NavLink
                 className={({ isActive }) =>

package/src/lib/components/SlotletProvider.tsx

@@ -5,10 +5,16 @@ import React, {
   useContext,
 } from "react";
 import { isValidElementType } from "react-is";
-import { useLocation } from "react-router-dom";
+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<SlotletComponentProps>
+  ReactNode | ReactElement | ComponentType<ExposedComponentProps>
 >;
 
 const SlotletContext = React.createContext<Slotlets | undefined>({});
@@ -27,19 +33,20 @@ export const SlotletProvider = ({
   );
 };
 
-export type SlotletComponentProps = {
+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 location = useLocation();
+  const slotletProps = useExposedProps();
 
   if (isValidElementType(componentOrElement)) {
-    return React.createElement(componentOrElement, {
-      location,
-    });
+    return React.createElement(componentOrElement, slotletProps);
   }
 
   return componentOrElement as ReactNode;

package/src/lib/components/TopNavigation.tsx

@@ -1,10 +1,23 @@
 import { cx } from "class-variance-authority";
 import { NavLink } from "react-router-dom";
 
+import { useAuth } from "../authentication/hook.js";
 import { useZudoku } from "./context/ZudokuContext.js";
 
+export const isHiddenItem =
+  (isAuthenticated?: boolean) =>
+  (item: { display?: "auth" | "anon" | "always" }) => {
+    return (
+      (item.display === "auth" && isAuthenticated) ||
+      (item.display === "anon" && !isAuthenticated) ||
+      !item.display ||
+      item.display === "always"
+    );
+  };
+
 export const TopNavigation = () => {
   const { topNavigation } = useZudoku();
+  const { isAuthenticated } = useAuth();
 
   // Hide top nav if there is only one item
   if (topNavigation.length <= 1) {
@@ -14,7 +27,7 @@ export const TopNavigation = () => {
   return (
     <nav className="hidden lg:block border-b text-sm px-12 h-[--top-nav-height]">
       <ul className="flex flex-row items-center gap-8">
-        {topNavigation.map((item) => (
+        {topNavigation.filter(isHiddenItem(isAuthenticated)).map((item) => (
           <li key={item.label}>
             <NavLink
               className={({ isActive }) =>

package/src/lib/components/index.ts

@@ -1,6 +1,7 @@
 import { useMDXComponents as useMDXComponentsImport } from "@mdx-js/react";
 import { Helmet } from "@zudoku/react-helmet-async";
 import { Link as LinkImport } from "react-router-dom";
+import { useAuthState } from "../authentication/state.js";
 import { RouterError as RouterErrorImport } from "../errors/RouterError.js";
 import { ServerError as ServerErrorImport } from "../errors/ServerError.js";
 import { Button as ButtonImport } from "../ui/Button.js";
@@ -9,17 +10,25 @@ import {
   Bootstrap as BootstrapImport,
   BootstrapStatic as BootstrapStaticImport,
 } from "./Bootstrap.js";
+import { ClientOnly as ClientOnlyImport } from "./ClientOnly.js";
 import { DevPortal as DevPortalImport } from "./DevPortal.js";
 import { Layout as LayoutImport } from "./Layout.js";
-
+import { useZudoku as useZudokuImport } from "./context/ZudokuContext.js";
 export const useMDXComponents = /*@__PURE__*/ useMDXComponentsImport;
-export const Callout = /*@__PURE__*/ CalloutImport;
 export const DevPortal = /*@__PURE__*/ DevPortalImport;
 export const Layout = /*@__PURE__*/ LayoutImport;
-export const Link: typeof LinkImport = /*@__PURE__*/ LinkImport;
 export const RouterError = /*@__PURE__*/ RouterErrorImport;
 export const ServerError = /*@__PURE__*/ ServerErrorImport;
 export const Bootstrap = /*@__PURE__*/ BootstrapImport;
 export const BootstrapStatic = /*@__PURE__*/ BootstrapStaticImport;
-export const Button = /*@__PURE__*/ ButtonImport;
+
 export const Head = /*@__PURE__*/ Helmet;
+
+export const useZudoku = /*@__PURE__*/ useZudokuImport;
+export const useAuth = /*@__PURE__*/ useAuthState;
+export const Zudoku = /*@__PURE__*/ DevPortalImport;
+
+export const Callout = /*@__PURE__*/ CalloutImport;
+export const ClientOnly = /*@__PURE__*/ ClientOnlyImport;
+export const Button = /*@__PURE__*/ ButtonImport;
+export const Link: typeof LinkImport = /*@__PURE__*/ LinkImport;

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

@@ -24,7 +24,7 @@ export const Sidebar = () => {
         <Slotlet name="zudoku-after-navigation" />
       </SidebarWrapper>
       <DrawerContent
-        className="lg:hidden h-screen left-0 p-6 w-[320px] rounded-none"
+        className="lg:hidden h-screen left-0 p-6 w-[320px] rounded-none overflow-auto"
         aria-describedby={undefined}
       >
         <VisuallyHidden>

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

@@ -1,7 +1,7 @@
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { ChevronRightIcon } from "lucide-react";
 import { useEffect, useState } from "react";
-import { NavLink } from "react-router-dom";
+import { NavLink, useMatch } from "react-router-dom";
 import type { SidebarItemCategory } from "../../../config/validators/SidebarSchema.js";
 import { cn } from "../../util/cn.js";
 import { joinPath } from "../../util/joinPath.js";
@@ -26,6 +26,7 @@ export const SidebarCategory = ({
     !isCollapsible || !isCollapsed || isCategoryOpen,
   );
   const [open, setOpen] = useState(isDefaultOpen);
+  const isActive = useMatch(joinPath(topNavItem?.id, category.link?.id));
 
   useEffect(() => {
     // this is triggered when an item from the sidebar is clicked
@@ -56,46 +57,54 @@ export const SidebarCategory = ({
 
   return (
     <Collapsible.Root
-      className={cn("flex flex-col", level === 0 && "-mx-[--padding-nav-item]")}
+      className="flex flex-col"
       defaultOpen={isDefaultOpen}
       open={open}
       onOpenChange={() => setOpen(true)}
     >
       <Collapsible.Trigger className="group" asChild disabled={!isCollapsible}>
         <div
-          className={cn(
-            "text-start",
-            navigationListItem({ isActive: false, isTopLevel: level === 0 }),
-            isCollapsible
-              ? "cursor-pointer"
-              : "cursor-default hover:bg-transparent",
-          )}
+          onClick={() => setHasInteracted(true)}
+          className={navigationListItem({
+            isActive: false,
+            isTopLevel: level === 0,
+            className: [
+              "text-start",
+              isCollapsible
+                ? "cursor-pointer"
+                : "cursor-default hover:bg-transparent",
+            ],
+          })}
         >
           {category.icon && (
             <category.icon
               size={16}
-              className="align-[-0.125em] -translate-x-1"
+              className={cn(
+                "align-[-0.125em] -translate-x-1",
+                isActive && "text-primary",
+              )}
             />
           )}
           {category.link?.type === "doc" ? (
             <NavLink
               to={joinPath(topNavItem?.id, category.link.id)}
               className="flex-1"
-              onClick={() => setHasInteracted(true)}
+              onClick={() => {
+                // if it is the current path and closed then open it because there's no path change to trigger the open
+                if (isActive && !open) {
+                  setOpen(true);
+                }
+              }}
             >
-              {({ isActive }) => (
-                <div
-                  className={cn(
-                    "flex items-center gap-2 justify-between w-full",
-                    isActive
-                      ? "text-primary font-medium"
-                      : "text-foreground/80",
-                  )}
-                >
-                  <div className="truncate">{category.label}</div>
-                  {ToggleButton}
-                </div>
-              )}
+              <div
+                className={cn(
+                  "flex items-center gap-2 justify-between w-full",
+                  isActive ? "text-primary" : "text-foreground/80",
+                )}
+              >
+                <div className="truncate">{category.label}</div>
+                {ToggleButton}
+              </div>
             </NavLink>
           ) : (
             <div className="flex items-center justify-between w-full">
@@ -109,10 +118,9 @@ export const SidebarCategory = ({
         className={cn(
           // CollapsibleContent class is used to animate and it should only be applied when the user has triggered the toggle
           hasInteracted && "CollapsibleContent",
-          "ms-[calc(var(--padding-nav-item)*1.125)]",
         )}
       >
-        <ul className="mt-1 border-l ps-2">
+        <ul className="mt-1 border-l ms-0.5">
           {category.items.map((item) => (
             <SidebarItem
               key={

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

@@ -3,7 +3,6 @@ import { ExternalLinkIcon } from "lucide-react";
 import { NavLink, useSearchParams } from "react-router-dom";
 
 import type { SidebarItem as SidebarItemType } from "../../../config/validators/SidebarSchema.js";
-import { cn } from "../../util/cn.js";
 import { joinPath } from "../../util/joinPath.js";
 import { AnchorLink } from "../AnchorLink.js";
 import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
@@ -16,7 +15,8 @@ export const navigationListItem = cva(
   {
     variants: {
       isTopLevel: {
-        true: "font-semibold",
+        true: "font-medium -mx-[--padding-nav-item]",
+        false: "-mr-[--padding-nav-item] ml-[--padding-nav-item]",
       },
       isActive: {
         true: "text-primary font-medium",
@@ -27,6 +27,9 @@ export const navigationListItem = cva(
         false: "",
       },
     },
+    defaultVariants: {
+      isActive: false,
+    },
   },
 );
 
@@ -58,7 +61,7 @@ export const SidebarItem = ({
           {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
           {item.badge ? (
             <>
-              <span className="truncate" title={item.label}>
+              <span className="truncate flex-1" title={item.label}>
                 {item.label}
               </span>
               <SidebarBadge {...item.badge} />
@@ -73,13 +76,11 @@ export const SidebarItem = ({
         <AnchorLink
           to={{ hash: item.href, search: searchParams.toString() }}
           {...{ [DATA_ANCHOR_ATTR]: item.href.slice(1) }}
-          className={cn(
-            "flex gap-2.5 justify-between",
-            level === 0 && "-mx-[--padding-nav-item]",
-            navigationListItem({
-              isActive: item.href.slice(1) === activeAnchor,
-            }),
-          )}
+          className={navigationListItem({
+            isActive: item.href.slice(1) === activeAnchor,
+            isTopLevel: level === 0,
+            className: item.badge?.placement !== "start" && "justify-between",
+          })}
         >
           {item.badge ? (
             <>
@@ -94,7 +95,9 @@ export const SidebarItem = ({
         </AnchorLink>
       ) : !item.href.startsWith("http") ? (
         <NavLink
-          className={cn("flex gap-2.5 justify-between", navigationListItem())}
+          className={navigationListItem({
+            className: item.badge?.placement !== "start" && "justify-between",
+          })}
           to={item.href}
         >
           {item.badge ? (
@@ -110,10 +113,7 @@ export const SidebarItem = ({
         </NavLink>
       ) : (
         <a
-          className={cn(
-            navigationListItem({ isTopLevel: level === 0 }),
-            "block",
-          )}
+          className={navigationListItem({ isTopLevel: level === 0 })}
           href={item.href}
           target="_blank"
           rel="noopener noreferrer"
@@ -121,8 +121,7 @@ export const SidebarItem = ({
           <span className="whitespace-normal">{item.label}</span>
           {/* This prevents that the icon would be positioned in its own line if the text fills a line entirely */}
           <span className="whitespace-nowrap">
-            &nbsp;
-            <ExternalLinkIcon className="inline ml-1" size={12} />
+            <ExternalLinkIcon className="inline -translate-y-0.5" size={12} />
           </span>
         </a>
       );

package/src/lib/core/DevPortalContext.ts

@@ -60,7 +60,12 @@ export type ZudokuContextOptions = {
   metadata?: Metadata;
   page?: Page;
   authentication?: AuthenticationProvider;
-  topNavigation?: Array<{ id: string; label: string; default?: string }>;
+  topNavigation?: Array<{
+    id: string;
+    label: string;
+    default?: string;
+    display?: "auth" | "anon" | "always";
+  }>;
   sidebars?: SidebarConfig;
   plugins?: DevPortalPlugin[];
   slotlets?: Slotlets;

package/src/lib/errors/ErrorAlert.tsx

@@ -1,16 +1,29 @@
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function ErrorAlert({ error }: { error: any }) {
-  const message = error?.message ?? "Something went wrong";
-  const stack = error?.stack;
+import { DeveloperHint } from "../components/DeveloperHint.js";
+import { ZudokuError } from "../util/invariant.js";
+
+export function ErrorAlert({ error }: { error: unknown }) {
+  const message =
+    error instanceof Error ? error.message : "Something went wrong";
+  const hint = error instanceof ZudokuError ? error.developerHint : undefined;
+  const title =
+    error instanceof ZudokuError ? error.title : "Something went wrong";
+  const stack = error instanceof Error ? error.stack : undefined;
+  const cause = error instanceof Error ? error.cause : undefined;
 
   return (
     <div className="flex h-screen max-h-screen min-h-full items-center justify-center bg-primary-background px-4 py-16 lg:px-8">
       <div className="mx-auto max-w-[85%] sm:max-w-[50%]">
         <h1 className="text-4xl font-bold tracking-tight text-h1-text sm:text-5xl">
-          Something went wrong
+          {title}
         </h1>
         <p className="mt-5 text-h1-text">{message}</p>
-        {stack ? (
+        {hint && <DeveloperHint className="mb-4">{hint}</DeveloperHint>}
+        {cause instanceof Error ? (
+          <pre className="mt-5 max-h-[400px] w-full overflow-scroll rounded-md border border-input-border bg-input-background p-3 text-property-name-text text-red-700">
+            {cause.stack}
+          </pre>
+        ) : stack ? (
           <pre className="mt-5 max-h-[400px] w-full overflow-scroll rounded-md border border-input-border bg-input-background p-3 text-property-name-text text-red-700">
             {stack}
           </pre>

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { ProseClasses } from "../../components/Markdown.js";
+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 && ProseClasses, "max-w-full")}>{content}</div>
+  );
+};

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

@@ -1,22 +1,24 @@
-import type { ReactNode } from "react";
+import { type ComponentType, type ReactNode } from "react";
 import type { RouteObject } from "react-router-dom";
-import { ProseClasses } from "../../components/Markdown.js";
+import { type ExposedComponentProps } from "../../components/SlotletProvider.js";
 import type { DevPortalPlugin, NavigationPlugin } from "../../core/plugins.js";
+import { CustomPage } from "./CustomPage.js";
 
-type CustomPagesConfig = Array<{
+export type CustomPageConfig = {
   path: string;
-  element: ReactNode;
-}>;
+  prose?: boolean;
+  element?: ReactNode;
+  render?: ComponentType<ExposedComponentProps>;
+};
 
 export const customPagesPlugin = (
-  config: CustomPagesConfig,
+  config: CustomPageConfig[],
 ): DevPortalPlugin & NavigationPlugin => {
   return {
     getRoutes: (): RouteObject[] =>
-      config.map(({ path, element }) => ({
+      config.map(({ path, ...props }) => ({
         path,
-        // TODO: we should componentize prose pages
-        element: <div className={ProseClasses + " max-w-full"}>{element}</div>,
+        element: <CustomPage {...props} />,
       })),
   };
 };

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

@@ -68,14 +68,16 @@ export const MdxPage = ({
           "max-w-full xl:w-full xl:max-w-prose flex-1 flex-shrink pt-[--padding-content-top] pb-[--padding-content-bottom]",
         )}
       >
-        <header>
-          {category && <CategoryHeading>{category}</CategoryHeading>}
-          {title && (
-            <Heading level={1} id={slugify(title)}>
-              {title}
-            </Heading>
-          )}
-        </header>
+        {(category || title) && (
+          <header>
+            {category && <CategoryHeading>{category}</CategoryHeading>}
+            {title && (
+              <Heading level={1} id={slugify(title)}>
+                {title}
+              </Heading>
+            )}
+          </header>
+        )}
         <MdxComponent
           components={{ ...useMDXComponents(), ...MarkdownHeadings }}
         />

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

@@ -129,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) {

package/src/lib/util/invariant.ts

@@ -18,9 +18,21 @@ export default function invariant(
   throw new ZudokuError(provided ?? "Invariant failed");
 }
 
-class ZudokuError extends Error {
-  constructor(message: string) {
-    super(message);
+export class ZudokuError extends Error {
+  public developerHint: string | undefined;
+  public title: string | undefined;
+
+  constructor(
+    message: string,
+    {
+      developerHint,
+      title,
+      cause,
+    }: { developerHint?: string; title?: string; cause?: Error } = {},
+  ) {
+    super(message, { cause });
     this.name = "ZudokuError";
+    this.title = title;
+    this.developerHint = developerHint;
   }
 }

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 };
+};