zudoku 0.0.0-f3858d6 → 0.0.0-f3f6db5

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

@@ -7,7 +7,11 @@ import { Slotlet } from "../SlotletProvider.js";
 import { SidebarItem } from "./SidebarItem.js";
 import { SidebarWrapper } from "./SidebarWrapper.js";
 
-export const Sidebar = () => {
+export const Sidebar = ({
+  onRequestClose,
+}: {
+  onRequestClose?: () => void;
+}) => {
   const navRef = useRef<HTMLDivElement | null>(null);
   const navigation = useCurrentNavigation();
 
@@ -15,24 +19,30 @@ export const Sidebar = () => {
     <>
       <SidebarWrapper
         ref={navRef}
-        pushMainContent={navigation.data.sidebar.length > 0}
+        pushMainContent={navigation.sidebar.length > 0}
       >
         <Slotlet name="zudoku-before-navigation" />
-        {navigation.data.sidebar.map((item) => (
+        {navigation.sidebar.map((item) => (
           <SidebarItem key={item.label} item={item} />
         ))}
         <Slotlet name="zudoku-after-navigation" />
       </SidebarWrapper>
       <DrawerContent
-        className="lg:hidden h-screen left-0 p-6 w-[320px] rounded-none"
+        className="lg:hidden h-[100dvh] left-0 w-[320px] rounded-none"
         aria-describedby={undefined}
       >
-        <VisuallyHidden>
-          <DrawerTitle>Sidebar</DrawerTitle>
-        </VisuallyHidden>
-        {navigation.data.sidebar.map((item) => (
-          <SidebarItem key={item.label} item={item} />
-        ))}
+        <div className="p-4 overflow-y-auto overscroll-none">
+          <VisuallyHidden>
+            <DrawerTitle>Sidebar</DrawerTitle>
+          </VisuallyHidden>
+          {navigation.sidebar.map((item) => (
+            <SidebarItem
+              key={item.label}
+              item={item}
+              onRequestClose={onRequestClose}
+            />
+          ))}
+        </div>
       </DrawerContent>
     </>
   );

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

@@ -1,15 +1,5 @@
 import { cn } from "../../util/cn.js";
 
-export const TextColorMap = {
-  green: "text-green-600",
-  blue: "text-sky-600",
-  yellow: "text-yellow-600",
-  red: "text-red-600",
-  purple: "text-purple-600",
-  indigo: "text-indigo-600",
-  gray: "text-gray-600",
-};
-
 export const ColorMap = {
   green: "bg-green-400 dark:bg-green-800",
   blue: "bg-sky-400 dark:bg-sky-800",
@@ -20,20 +10,32 @@ export const ColorMap = {
   gray: "bg-gray-400 dark:bg-gray-600",
 };
 
+export const ColorMapInvert = {
+  green: "text-green-500 dark:text-green-600",
+  blue: "text-sky-400 dark:text-sky-600",
+  yellow: "text-yellow-400 dark:text-yellow-600",
+  red: "text-red-400 dark:text-red-600",
+  purple: "text-purple-400 dark:text-purple-600",
+  indigo: "text-indigo-400 dark:text-indigo-600",
+  gray: "text-gray-400 dark:text-gray-600",
+};
+
 export const SidebarBadge = ({
   color,
   label,
   className,
+  invert,
 }: {
   color: keyof typeof ColorMap;
   label: string;
   className?: string;
+  invert?: boolean;
 }) => {
   return (
     <span
       className={cn(
         "mt-0.5 flex items-center duration-200 transition-opacity text-center uppercase font-mono text-[0.65rem] font-bold rounded text-background dark:text-zinc-50 h-4 px-1",
-        ColorMap[color],
+        invert ? ColorMapInvert[color] : ColorMap[color],
         className,
       )}
     >

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";
 import type { SidebarItemCategory } from "../../../config/validators/SidebarSchema.js";
 import { cn } from "../../util/cn.js";
 import { joinPath } from "../../util/joinPath.js";
@@ -10,10 +10,10 @@ import { useIsCategoryOpen } from "./utils.js";
 
 export const SidebarCategory = ({
   category,
-  level,
+  onRequestClose,
 }: {
   category: SidebarItemCategory;
-  level: number;
+  onRequestClose?: () => void;
 }) => {
   const isCategoryOpen = useIsCategoryOpen(category);
   const [hasInteracted, setHasInteracted] = useState(false);
@@ -24,6 +24,7 @@ export const SidebarCategory = ({
     !isCollapsible || !isCollapsed || isCategoryOpen,
   );
   const [open, setOpen] = useState(isDefaultOpen);
+  const isActive = useMatch(category.link?.id ?? "");
 
   useEffect(() => {
     // this is triggered when an item from the sidebar is clicked
@@ -52,65 +53,72 @@ export const SidebarCategory = ({
     </button>
   );
 
+  const icon = category.icon && (
+    <category.icon
+      size={16}
+      className={cn("align-[-0.125em] ", isActive && "text-primary")}
+    />
+  );
+
+  const styles = navigationListItem({
+    className: [
+      "text-start font-medium",
+      isCollapsible || typeof category.link !== "undefined"
+        ? "cursor-pointer"
+        : "cursor-default hover:bg-transparent",
+    ],
+  });
+
   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",
-          )}
-        >
-          {category.icon && (
-            <category.icon
-              size={16}
-              className="align-[-0.125em] -translate-x-1"
-            />
-          )}
-          {category.link?.type === "doc" ? (
-            <NavLink
-              to={joinPath(category.link.id)}
-              className="flex-1"
-              onClick={() => setHasInteracted(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>
+        {category.link?.type === "doc" ? (
+          <NavLink
+            to={joinPath(category.link.id)}
+            className={styles}
+            onClick={() => {
+              setHasInteracted(true);
+              // 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);
+              }
+            }}
+          >
+            {icon}
+            <div
+              className={cn(
+                "flex items-center gap-2 justify-between w-full",
+                isActive ? "text-primary" : "text-foreground/80",
               )}
-            </NavLink>
-          ) : (
+            >
+              <div className="truncate">{category.label}</div>
+              {ToggleButton}
+            </div>
+          </NavLink>
+        ) : (
+          <div onClick={() => setHasInteracted(true)} className={styles}>
+            {icon}
             <div className="flex items-center justify-between w-full">
               <div className="flex gap-2 truncate w-full">{category.label}</div>
               {ToggleButton}
             </div>
-          )}
-        </div>
+          </div>
+        )}
       </Collapsible.Trigger>
       <Collapsible.Content
         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)]",
+          category.items.length === 0 && "hidden",
+          "ms-6 my-1",
         )}
       >
-        <ul className="mt-1 border-l ps-2">
+        <ul className="relative after:absolute after:-left-[--padding-nav-item] after:translate-x-[1.5px] after:top-0 after:bottom-0 after:w-px after:bg-border">
           {category.items.map((item) => (
             <SidebarItem
               key={
@@ -118,7 +126,7 @@ export const SidebarCategory = ({
                 ("href" in item ? item.href : "") +
                 item.label
               }
-              level={level + 1}
+              onRequestClose={onRequestClose}
               item={item}
             />
           ))}

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

@@ -1,9 +1,8 @@
 import { cva } from "class-variance-authority";
 import { ExternalLinkIcon } from "lucide-react";
-import { NavLink, useSearchParams } from "react-router-dom";
+import { NavLink, useSearchParams } from "react-router";
 
 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";
@@ -11,12 +10,9 @@ import { SidebarBadge } from "./SidebarBadge.js";
 import { SidebarCategory } from "./SidebarCategory.js";
 
 export const navigationListItem = cva(
-  "flex items-center gap-2 px-[--padding-nav-item] py-1.5 rounded-lg hover:bg-accent transition-colors duration-300",
+  "flex items-center gap-2 px-[--padding-nav-item] py-1.5 rounded-lg hover:bg-accent",
   {
     variants: {
-      isTopLevel: {
-        true: "font-semibold",
-      },
       isActive: {
         true: "text-primary font-medium",
         false: "text-foreground/80",
@@ -26,6 +22,9 @@ export const navigationListItem = cva(
         false: "",
       },
     },
+    defaultVariants: {
+      isActive: false,
+    },
   },
 );
 
@@ -33,30 +32,30 @@ export const DATA_ANCHOR_ATTR = "data-anchor";
 
 export const SidebarItem = ({
   item,
-  level = 0,
+  onRequestClose,
 }: {
   item: SidebarItemType;
-  basePath?: string;
-  level?: number;
+  onRequestClose?: () => void;
 }) => {
   const { activeAnchor } = useViewportAnchor();
   const [searchParams] = useSearchParams();
 
   switch (item.type) {
     case "category":
-      return <SidebarCategory category={item} level={level} />;
+      return (
+        <SidebarCategory category={item} onRequestClose={onRequestClose} />
+      );
     case "doc":
       return (
         <NavLink
-          className={({ isActive }) =>
-            navigationListItem({ isActive, isTopLevel: level === 0 })
-          }
+          className={({ isActive }) => navigationListItem({ isActive })}
           to={joinPath(item.id)}
+          onClick={onRequestClose}
         >
           {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} />
@@ -71,13 +70,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,
+            className: item.badge?.placement !== "start" && "justify-between",
+          })}
+          onClick={onRequestClose}
         >
           {item.badge ? (
             <>
@@ -92,7 +89,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 ? (
@@ -108,19 +107,16 @@ export const SidebarItem = ({
         </NavLink>
       ) : (
         <a
-          className={cn(
-            navigationListItem({ isTopLevel: level === 0 }),
-            "block",
-          )}
+          className={navigationListItem()}
           href={item.href}
           target="_blank"
           rel="noopener noreferrer"
+          onClick={onRequestClose}
         >
           <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/components/navigation/SidebarWrapper.tsx

@@ -12,9 +12,10 @@ export const SidebarWrapper = forwardRef<
     // maybe this could be simplified by adjusting the layout
     data-navigation={String(pushMainContent)}
     className={cn(
-      "scrollbar peer hidden lg:flex flex-col fixed text-sm overflow-y-auto shrink-0",
-      "px-[--padding-nav-item] -mx-[--padding-nav-item] pb-20 mt-[--padding-content-top]",
+      "scrollbar peer hidden lg:flex flex-col fixed text-sm overflow-y-auto shrink-0 border-r pr-10",
+      "-mx-[--padding-nav-item] pb-20 pt-[--padding-content-top]",
       "w-[--side-nav-width] h-[calc(100%-var(--header-height))] scroll-pt-2 gap-2",
+      !pushMainContent && "border-r-0",
       className,
     )}
     ref={ref}

package/src/lib/components/navigation/utils.ts

@@ -1,4 +1,4 @@
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 import type {
   SidebarItem,
   SidebarItemCategory,
@@ -44,7 +44,7 @@ export const useCurrentItem = () => {
   const location = useLocation();
   const nav = useCurrentNavigation();
 
-  const currentSidebar = nav.data.sidebar;
+  const currentSidebar = nav.sidebar;
 
   return traverseSidebar(currentSidebar, (item) => {
     if (item.type === "doc" && joinPath(item.id) === location.pathname) {
@@ -79,7 +79,7 @@ export const usePrevNext = (): {
 } => {
   const currentId = useLocation().pathname;
   const nav = useCurrentNavigation();
-  const currentSidebar = nav.data.sidebar;
+  const currentSidebar = nav.sidebar;
 
   let prev;
   let next;

package/src/lib/core/RouteGuard.tsx

@@ -0,0 +1,35 @@
+import { useEffect } from "react";
+import { matchPath, Outlet, useLocation } from "react-router";
+import { useAuth } from "../authentication/hook.js";
+import { useZudoku } from "../components/context/ZudokuContext.js";
+import { ZudokuError } from "../util/invariant.js";
+
+export const RouteGuard = () => {
+  const auth = useAuth();
+  const zudoku = useZudoku();
+  const location = useLocation();
+
+  const isProtected = zudoku.options.protectedRoutes?.some((path) =>
+    matchPath({ path, end: true }, location.pathname),
+  );
+
+  useEffect(() => {
+    if (isProtected && !auth.isAuthenticated) {
+      void zudoku.authentication?.signIn();
+    }
+  }, [isProtected, auth.isAuthenticated, zudoku.authentication]);
+
+  if (isProtected && !auth.isAuthenticated) {
+    return null;
+  }
+
+  if (isProtected && !auth.isAuthEnabled) {
+    throw new ZudokuError("Authentication is not enabled", {
+      title: "Authentication is not enabled",
+      developerHint:
+        "To use protectedRoutes you need authentication to be enabled",
+    });
+  }
+
+  return <Outlet />;
+};

package/src/lib/core/{DevPortalContext.ts → ZudokuContext.ts}

@@ -1,18 +1,17 @@
-import { QueryClient } from "@tanstack/react-query";
 import { ReactNode } from "react";
+import { TopNavigationItem } from "../../config/validators/common.js";
 import type { SidebarConfig } from "../../config/validators/SidebarSchema.js";
-import { TopNavigationItem } from "../../config/validators/validate.js";
 import { type AuthenticationProvider } from "../authentication/authentication.js";
 import type { ComponentsContextType } from "../components/context/ComponentsContext.js";
 import { Slotlets } from "../components/SlotletProvider.js";
 import { joinPath } from "../util/joinPath.js";
 import type { MdxComponentsType } from "../util/MdxComponents.js";
 import {
-  type DevPortalPlugin,
   isApiIdentityPlugin,
   isNavigationPlugin,
   type NavigationPlugin,
   needsInitialization,
+  type ZudokuPlugin,
 } from "./plugins.js";
 
 export interface ApiIdentity {
@@ -21,10 +20,7 @@ export interface ApiIdentity {
   id: string;
 }
 
-export const queryClient = new QueryClient();
-
 export type ApiKeyCache = "api-keys";
-export type DevPortalCacheKey = ApiKeyCache | string;
 
 type Metadata = Partial<{
   title: string;
@@ -63,31 +59,32 @@ export type ZudokuContextOptions = {
   authentication?: AuthenticationProvider;
   topNavigation?: TopNavigationItem[];
   sidebars?: SidebarConfig;
-  plugins?: DevPortalPlugin[];
+  plugins?: ZudokuPlugin[];
   slotlets?: Slotlets;
   mdx?: {
     components?: MdxComponentsType;
   };
   overrides?: ComponentsContextType;
+  protectedRoutes?: string[];
 };
 
-export class DevPortalContext {
+export class ZudokuContext {
   public plugins: NonNullable<ZudokuContextOptions["plugins"]>;
   public sidebars: SidebarConfig;
   public topNavigation: NonNullable<ZudokuContextOptions["topNavigation"]>;
   public meta: ZudokuContextOptions["metadata"];
   public page: ZudokuContextOptions["page"];
   public authentication?: ZudokuContextOptions["authentication"];
-  private navigationPlugins: NavigationPlugin[];
+  private readonly navigationPlugins: NavigationPlugin[];
 
-  constructor(config: ZudokuContextOptions) {
-    this.plugins = config.plugins ?? [];
-    this.topNavigation = config.topNavigation ?? [];
-    this.sidebars = config.sidebars ?? {};
+  constructor(public readonly options: ZudokuContextOptions) {
+    this.plugins = options.plugins ?? [];
+    this.topNavigation = options.topNavigation ?? [];
+    this.sidebars = options.sidebars ?? {};
     this.navigationPlugins = this.plugins.filter(isNavigationPlugin);
-    this.authentication = config.authentication;
-    this.meta = config.metadata;
-    this.page = config.page;
+    this.authentication = options.authentication;
+    this.meta = options.metadata;
+    this.page = options.page;
   }
 
   initialize = async (): Promise<void> => {
@@ -98,10 +95,6 @@ export class DevPortalContext {
     );
   };
 
-  invalidateCache = async (key: DevPortalCacheKey[]) => {
-    await queryClient.invalidateQueries({ queryKey: key });
-  };
-
   getApiIdentities = async () => {
     const keys = await Promise.all(
       this.plugins

package/src/lib/core/plugins.ts

@@ -1,10 +1,11 @@
+import type { LucideIcon } from "lucide-react";
 import { type ReactElement } from "react";
-import { type RouteObject } from "react-router-dom";
+import { type RouteObject } from "react-router";
 import type { Sidebar } from "../../config/validators/SidebarSchema.js";
 import { MdxComponentsType } from "../util/MdxComponents.js";
-import { DevPortalContext, type ApiIdentity } from "./DevPortalContext.js";
+import { ZudokuContext, type ApiIdentity } from "./ZudokuContext.js";
 
-export type DevPortalPlugin =
+export type ZudokuPlugin =
   | CommonPlugin
   | ProfileMenuPlugin
   | NavigationPlugin
@@ -19,7 +20,7 @@ export interface NavigationPlugin {
 }
 
 export interface ApiIdentityPlugin {
-  getIdentities: (context: DevPortalContext) => Promise<ApiIdentity[]>;
+  getIdentities: (context: ZudokuContext) => Promise<ApiIdentity[]>;
 }
 
 export interface SearchProviderPlugin {
@@ -30,52 +31,51 @@ export interface SearchProviderPlugin {
 }
 
 export interface ProfileMenuPlugin {
-  getProfileMenuItems: (context: DevPortalContext) => ProfileNavigationItem[];
+  getProfileMenuItems: (context: ZudokuContext) => ProfileNavigationItem[];
 }
 
 export type ProfileNavigationItem = {
   label: string;
   path?: string;
+  weight?: number;
+  category?: "top" | "middle" | "bottom";
   children?: ProfileNavigationItem[];
+  icon?: LucideIcon;
 };
 
 export interface CommonPlugin {
   initialize?: (
-    context: DevPortalContext,
+    context: ZudokuContext,
   ) => Promise<void | boolean> | void | boolean;
   getHead?: () => ReactElement | undefined;
   getMdxComponents?: () => MdxComponentsType;
 }
 
 export const isProfileMenuPlugin = (
-  obj: DevPortalPlugin,
+  obj: ZudokuPlugin,
 ): obj is ProfileMenuPlugin =>
   "getProfileMenuItems" in obj && typeof obj.getProfileMenuItems === "function";
 
 export const isNavigationPlugin = (
-  obj: DevPortalPlugin,
+  obj: ZudokuPlugin,
 ): obj is NavigationPlugin =>
   "getRoutes" in obj && typeof obj.getRoutes === "function";
 
 export const isSearchPlugin = (
-  obj: DevPortalPlugin,
+  obj: ZudokuPlugin,
 ): obj is SearchProviderPlugin =>
   "renderSearch" in obj && typeof obj.renderSearch === "function";
 
-export const needsInitialization = (
-  obj: DevPortalPlugin,
-): obj is CommonPlugin =>
+export const needsInitialization = (obj: ZudokuPlugin): obj is CommonPlugin =>
   "initialize" in obj && typeof obj.initialize === "function";
 
-export const hasHead = (obj: DevPortalPlugin): obj is CommonPlugin =>
+export const hasHead = (obj: ZudokuPlugin): obj is CommonPlugin =>
   "getHead" in obj && typeof obj.getHead === "function";
 
-export const isMdxProviderPlugin = (
-  obj: DevPortalPlugin,
-): obj is CommonPlugin =>
+export const isMdxProviderPlugin = (obj: ZudokuPlugin): obj is CommonPlugin =>
   "getMdxComponents" in obj && typeof obj.getMdxComponents === "function";
 
 export const isApiIdentityPlugin = (
-  obj: DevPortalPlugin,
+  obj: ZudokuPlugin,
 ): obj is ApiIdentityPlugin =>
   "getIdentities" in obj && typeof obj.getIdentities === "function";

package/src/lib/errors/ErrorAlert.tsx

@@ -1,16 +1,30 @@
 // 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="flex h-screen max-h-[calc(100vh-var(--header-height))] 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/errors/RouterError.tsx

@@ -1,4 +1,4 @@
-import { isRouteErrorResponse, useRouteError } from "react-router-dom";
+import { isRouteErrorResponse, useRouteError } from "react-router";
 import { NotFoundPage } from "../components/NotFoundPage.js";
 import { ErrorAlert } from "./ErrorAlert.js";