zudoku 0.0.0-f2a195f → 0.0.0-f2fd45c

package/src/lib/components/SyntaxHighlight.tsx

@@ -46,6 +46,10 @@ type SyntaxHighlightProps = {
   language?: string;
 } & Omit<HighlightProps, "children" | "language">;
 
+const remapLang = {
+  mdx: "md",
+} as Record<string, string>;
+
 export const SyntaxHighlight = ({
   copyable = true,
   language = "plain",
@@ -61,7 +65,7 @@ export const SyntaxHighlight = ({
   return (
     <Highlight
       theme={isDark ? themes.vsDark : themes.github}
-      language={language}
+      language={remapLang[language] ?? language}
       {...props}
     >
       {({ className, style, tokens, getLineProps, getTokenProps }) => (

package/src/lib/components/TopNavigation.tsx

@@ -1,10 +1,26 @@
 import { cx } from "class-variance-authority";
-import { NavLink } from "react-router-dom";
+import { Suspense } from "react";
+import { Link } from "react-router-dom";
+import { useAuth } from "../authentication/hook.js";
+import { TopNavigationItem } from "../../config/validators/validate.js";
+import { joinPath } from "../util/joinPath.js";
+import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
+import { traverseSidebar } from "./navigation/utils.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) {
@@ -12,26 +28,57 @@ 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) => (
-          <li key={item.label}>
-            <NavLink
-              className={({ isActive }) =>
-                cx(
-                  "block py-3.5 font-medium -mb-px border-b-2",
-                  isActive
-                    ? "border-primary text-foreground"
-                    : "border-transparent text-foreground/75 hover:text-foreground hover:border-accent-foreground/25",
-                )
-              }
-              to={item.id}
-            >
-              {item.label}
-            </NavLink>
-          </li>
-        ))}
-      </ul>
-    </nav>
+    <Suspense>
+      <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.filter(isHiddenItem(isAuthenticated)).map((item) => (
+          <li key={item.id}>
+              <TopNavItem {...item} />
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </Suspense>
+  );
+};
+
+const TopNavItem = ({ id, label, default: defaultLink }: TopNavigationItem) => {
+  const { sidebars } = useZudoku();
+  const nav = useCurrentNavigation();
+  const currentSidebar = sidebars[id];
+
+  // TODO: This is a bit of a hack to get the first link in the sidebar
+  // We should really process this when we load the config so we can validate
+  // that the sidebar is actually set. In this case we just fall back to linking
+  // to the id if we can't resolve a sidebar.
+  const first =
+    defaultLink ??
+    (currentSidebar
+      ? traverseSidebar(currentSidebar, (item) => {
+          if (item.type === "doc") return joinPath(item.id);
+        })
+      : joinPath(id));
+
+  if (!first) {
+    throw new Error(
+      `No links found in top navigation for top navigation '${id}'. Check that the sidebar isn't empty or that a default link set.`,
+    );
+  }
+
+  // Manually set the active sidebar based on our logic of what is active
+  const isActive = nav.data.topNavItem?.id === id;
+
+  return (
+    <Link
+      className={cx(
+        "block py-3.5 font-medium -mb-px border-b-2",
+        isActive
+          ? "border-primary text-foreground"
+          : "border-transparent text-foreground/75 hover:text-foreground hover:border-accent-foreground/25",
+      )}
+      to={first}
+    >
+      {label}
+    </Link>
   );
 };

package/src/lib/components/context/ZudokuContext.ts

@@ -1,7 +1,9 @@
 import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
 import { createContext, useContext } from "react";
-import { useLocation } from "react-router-dom";
+import { matchPath, useLocation } from "react-router-dom";
 import { DevPortalContext } from "../../core/DevPortalContext.js";
+import { joinPath } from "../../util/joinPath.js";
+import { traverseSidebar } from "../navigation/utils.js";
 
 export const ZudokuReactContext = createContext<DevPortalContext | undefined>(
   undefined,
@@ -25,34 +27,40 @@ export const useApiIdentities = () => {
   });
 };
 
-export const useTopNavigationItem = () => {
-  const { topNavigation } = useZudoku();
+export const useCurrentNavigation = () => {
+  const { getPluginSidebar, sidebars, topNavigation } = useZudoku();
   const location = useLocation();
 
-  const firstPart = location.pathname.split("/").at(1);
-  if (!firstPart) return;
+  const currentSidebarItem = Object.entries(sidebars).find(([, sidebar]) => {
+    return traverseSidebar(sidebar, (item) => {
+      const itemId =
+        item.type === "doc"
+          ? joinPath(item.id)
+          : item.type === "category" && item.link
+            ? joinPath(item.link.id)
+            : undefined;
 
-  return topNavigation.find((item) => item.id === firstPart);
-};
-
-export const useNavigation = () => {
-  const { getPluginSidebar, sidebars } = useZudoku();
-  const navItem = useTopNavigationItem();
-  const path = navItem?.id;
-  const currentSidebar = path ? (sidebars[path] ?? []) : [];
-  const location = useLocation();
+      if (itemId === location.pathname) {
+        return item;
+      }
+    });
+  });
+  const currentTopNavItem =
+    topNavigation.find((t) => t.id === currentSidebarItem?.[0]) ??
+    topNavigation.find((item) => matchPath(item.id, location.pathname));
 
   return useSuspenseQuery({
     queryFn: async () => {
-      const pluginSidebar = path
-        ? await getPluginSidebar(path)
-        : await getPluginSidebar(location.pathname);
+      const pluginSidebar = await getPluginSidebar(location.pathname);
 
       return {
-        items: [...currentSidebar, ...pluginSidebar],
-        currentTopNavItem: navItem,
+        sidebar: [
+          ...(currentSidebarItem ? currentSidebarItem[1] : []),
+          ...pluginSidebar,
+        ],
+        topNavItem: currentTopNavItem,
       };
     },
-    queryKey: ["navigation", path],
+    queryKey: ["navigation", location.pathname],
   });
 };

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

@@ -2,35 +2,35 @@ import { useRef } from "react";
 
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { DrawerContent, DrawerTitle } from "../../ui/Drawer.js";
-import { useNavigation } from "../context/ZudokuContext.js";
+import { useCurrentNavigation } from "../context/ZudokuContext.js";
 import { Slotlet } from "../SlotletProvider.js";
 import { SidebarItem } from "./SidebarItem.js";
 import { SidebarWrapper } from "./SidebarWrapper.js";
 
 export const Sidebar = () => {
   const navRef = useRef<HTMLDivElement | null>(null);
-  const navigation = useNavigation();
+  const navigation = useCurrentNavigation();
 
   return (
     <>
       <SidebarWrapper
         ref={navRef}
-        pushMainContent={navigation.data.items.length > 0}
+        pushMainContent={navigation.data.sidebar.length > 0}
       >
         <Slotlet name="zudoku-before-navigation" />
-        {navigation.data.items.map((item) => (
+        {navigation.data.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-screen left-0 p-6 w-[320px] rounded-none overflow-auto"
         aria-describedby={undefined}
       >
         <VisuallyHidden>
           <DrawerTitle>Sidebar</DrawerTitle>
         </VisuallyHidden>
-        {navigation.data.items.map((item) => (
+        {navigation.data.sidebar.map((item) => (
           <SidebarItem key={item.label} item={item} />
         ))}
       </DrawerContent>

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

@@ -1,11 +1,10 @@
 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";
-import { useTopNavigationItem } from "../context/ZudokuContext.js";
 import { navigationListItem, SidebarItem } from "./SidebarItem.js";
 import { useIsCategoryOpen } from "./utils.js";
 
@@ -16,7 +15,6 @@ export const SidebarCategory = ({
   category: SidebarItemCategory;
   level: number;
 }) => {
-  const topNavItem = useTopNavigationItem();
   const isCategoryOpen = useIsCategoryOpen(category);
   const [hasInteracted, setHasInteracted] = useState(false);
 
@@ -26,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
@@ -56,46 +55,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)}
+              to={joinPath(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 +116,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,11 +3,9 @@ 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";
-import { useTopNavigationItem } from "../context/ZudokuContext.js";
 import { SidebarBadge } from "./SidebarBadge.js";
 import { SidebarCategory } from "./SidebarCategory.js";
 
@@ -16,7 +14,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 +26,9 @@ export const navigationListItem = cva(
         false: "",
       },
     },
+    defaultVariants: {
+      isActive: false,
+    },
   },
 );
 
@@ -40,7 +42,6 @@ export const SidebarItem = ({
   basePath?: string;
   level?: number;
 }) => {
-  const topNavItem = useTopNavigationItem();
   const { activeAnchor } = useViewportAnchor();
   const [searchParams] = useSearchParams();
 
@@ -53,12 +54,12 @@ export const SidebarItem = ({
           className={({ isActive }) =>
             navigationListItem({ isActive, isTopLevel: level === 0 })
           }
-          to={joinPath(topNavItem?.id, item.id)}
+          to={joinPath(item.id)}
         >
           {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 +74,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 +93,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 +111,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 +119,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/components/navigation/utils.ts

@@ -4,7 +4,7 @@ import type {
   SidebarItemCategory,
 } from "../../../config/validators/SidebarSchema.js";
 import { joinPath } from "../../util/joinPath.js";
-import { useTopNavigationItem, useZudoku } from "../context/ZudokuContext.js";
+import { useCurrentNavigation } from "../context/ZudokuContext.js";
 
 export type TraverseCallback<T> = (
   item: SidebarItem,
@@ -42,15 +42,12 @@ export const traverseSidebarItem = <T>(
 
 export const useCurrentItem = () => {
   const location = useLocation();
-  const topNavItem = useTopNavigationItem();
-  const { sidebars } = useZudoku();
-  const currentSidebar = topNavItem?.id ? sidebars[topNavItem.id] : [];
+  const nav = useCurrentNavigation();
+
+  const currentSidebar = nav.data.sidebar;
 
   return traverseSidebar(currentSidebar, (item) => {
-    if (
-      item.type === "doc" &&
-      joinPath(topNavItem?.id, item.id) === location.pathname
-    ) {
+    if (item.type === "doc" && joinPath(item.id) === location.pathname) {
       return item;
     }
   });
@@ -58,18 +55,17 @@ export const useCurrentItem = () => {
 
 export const useIsCategoryOpen = (category: SidebarItemCategory) => {
   const location = useLocation();
-  const topNavItem = useTopNavigationItem();
 
   return traverseSidebarItem(category, (item) => {
     if (item.type === "category" && item.link) {
-      const categoryLinkPath = joinPath(topNavItem?.id, item.link.id);
+      const categoryLinkPath = joinPath(item.link.id);
       if (categoryLinkPath === location.pathname) {
         return true;
       }
     }
 
     if (item.type === "doc") {
-      const docPath = joinPath(topNavItem?.id, item.id);
+      const docPath = joinPath(item.id);
       if (docPath === location.pathname) {
         return true;
       }
@@ -82,9 +78,8 @@ export const usePrevNext = (): {
   next?: { label: string; id: string };
 } => {
   const currentId = useLocation().pathname;
-  const { sidebars } = useZudoku();
-  const topNavItem = useTopNavigationItem();
-  const currentSidebar = topNavItem?.id ? sidebars[topNavItem.id] : [];
+  const nav = useCurrentNavigation();
+  const currentSidebar = nav.data.sidebar;
 
   let prev;
   let next;
@@ -94,9 +89,9 @@ export const usePrevNext = (): {
   traverseSidebar(currentSidebar, (item) => {
     const itemId =
       item.type === "doc"
-        ? joinPath(topNavItem?.id, item.id)
+        ? joinPath(item.id)
         : item.type === "category" && item.link
-          ? joinPath(topNavItem?.id, item.link.id)
+          ? joinPath(item.link.id)
           : undefined;
 
     if (!itemId) return;

package/src/lib/core/DevPortalContext.ts

@@ -1,6 +1,7 @@
 import { QueryClient } from "@tanstack/react-query";
 import { ReactNode } from "react";
 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";
@@ -60,7 +61,7 @@ export type ZudokuContextOptions = {
   metadata?: Metadata;
   page?: Page;
   authentication?: AuthenticationProvider;
-  topNavigation?: Array<{ id: string; label: string; default?: string }>;
+  topNavigation?: TopNavigationItem[];
   sidebars?: SidebarConfig;
   plugins?: DevPortalPlugin[];
   slotlets?: Slotlets;
@@ -72,7 +73,7 @@ export type ZudokuContextOptions = {
 
 export class DevPortalContext {
   public plugins: NonNullable<ZudokuContextOptions["plugins"]>;
-  public sidebars: NonNullable<ZudokuContextOptions["sidebars"]>;
+  public sidebars: SidebarConfig;
   public topNavigation: NonNullable<ZudokuContextOptions["topNavigation"]>;
   public meta: ZudokuContextOptions["metadata"];
   public page: ZudokuContextOptions["page"];

package/src/lib/core/plugins.ts

@@ -11,6 +11,8 @@ export type DevPortalPlugin =
   | ApiIdentityPlugin
   | SearchProviderPlugin;
 
+export type { RouteObject };
+
 export interface NavigationPlugin {
   getRoutes: () => RouteObject[];
   getSidebar?: (path: string) => Promise<Sidebar>;

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>