zudoku 0.0.0-fix-image-base-path.c9e0e61c → 0.0.0-fix-create-zudoku-copy-templates.1ca222e6

package/src/lib/components/Slot.tsx

@@ -1,8 +1,8 @@
-import { useId, useLayoutEffect, type ReactNode } from "react";
+import { type ReactNode, useId, useLayoutEffect } from "react";
 import {
+  type SlotType,
   useRenderSlot,
   useSlotContext,
-  type SlotType,
 } from "./context/SlotProvider.js";
 
 // This is to augment the type of the Slot component with custom slot names

package/src/lib/components/TopNavigation.tsx

@@ -2,18 +2,18 @@ import { cx } from "class-variance-authority";
 import { deepEqual } from "fast-equals";
 import { Suspense } from "react";
 import { NavLink, type NavLinkProps } from "react-router";
-import { type NavigationItem } from "../../config/validators/NavigationSchema.js";
+import type { NavigationItem } from "../../config/validators/NavigationSchema.js";
 import { useAuth } from "../authentication/hook.js";
 import { joinUrl } from "../util/joinUrl.js";
 import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
-import { isHiddenItem, traverseNavigationItem } from "./navigation/utils.js";
+import { shouldShowItem, traverseNavigationItem } from "./navigation/utils.js";
 import { Slot } from "./Slot.js";
 
 export const TopNavigation = () => {
   const context = useZudoku();
   const { navigation } = context;
   const auth = useAuth();
-  const filteredItems = navigation.filter(isHiddenItem(auth, context));
+  const filteredItems = navigation.filter(shouldShowItem(auth, context));
 
   if (filteredItems.length === 0 || import.meta.env.MODE === "standalone") {
     return <style>{`:root { --top-nav-height: 0px; }`}</style>;

package/src/lib/components/Zudoku.tsx

@@ -66,7 +66,7 @@ const ZudokoInner = memo(
     const queryClient = useQueryClient();
 
     useEffect(() => {
-      if (didNavigate) {
+      if (didNavigate || !navigation.location) {
         return;
       }
       setDidNavigate(true);
@@ -78,7 +78,7 @@ const ZudokoInner = memo(
       ?.flatMap((plugin) =>
         hasHead(plugin) ? (plugin.getHead?.({ location }) ?? []) : [],
       )
-      // eslint-disable-next-line react/no-array-index-key
+      // biome-ignore lint/suspicious/noArrayIndexKey: No other key is available
       .map((entry, i) => <Helmet key={i}>{entry}</Helmet>);
 
     return (

package/src/lib/components/context/ComponentsContext.tsx

@@ -1,8 +1,8 @@
 import {
-  createContext,
-  useContext,
   type ComponentProps,
   type ComponentType,
+  createContext,
+  useContext,
 } from "react";
 import { Header } from "../Header.js";
 

package/src/lib/components/context/RouterEventsEmitter.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { useLocation, type Location } from "react-router";
+import { type Location, useLocation } from "react-router";
 import { useZudoku } from "./ZudokuContext.js";
 
 export const RouterEventsEmitter = () => {

package/src/lib/components/context/SlotProvider.tsx

@@ -1,17 +1,17 @@
 import {
+  type ComponentType,
   createContext,
   Fragment,
+  type PropsWithChildren,
+  type ReactNode,
   use,
   useMemo,
   useRef,
-  type ComponentType,
-  type PropsWithChildren,
-  type ReactNode,
 } from "react";
 import { createStore, useStore } from "zustand";
 import {
-  useExposedProps,
   type ExposedComponentProps,
+  useExposedProps,
 } from "../../util/useExposedProps.js";
 
 export type SlotType = ReactNode | ComponentType<ExposedComponentProps>;

package/src/lib/components/context/ViewportAnchorContext.tsx

@@ -1,12 +1,12 @@
 import {
   createContext,
+  type PropsWithChildren,
   use,
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
-  type PropsWithChildren,
 } from "react";
 
 type AnchorContextType = {
@@ -128,7 +128,7 @@ export const ViewportAnchorProvider = ({ children }: PropsWithChildren) => {
 
   const value = useMemo(
     () => ({ activeAnchor, setActiveAnchor, ...observeFns }),
-    [activeAnchor, setActiveAnchor, observeFns],
+    [activeAnchor, observeFns],
   );
 
   return (

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

@@ -1,7 +1,7 @@
 import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
 import { createContext, useContext } from "react";
 import { matchPath, useLocation } from "react-router";
-import { type NavigationItem } from "../../../config/validators/NavigationSchema.js";
+import type { NavigationItem } from "../../../config/validators/NavigationSchema.js";
 import type { ZudokuContext } from "../../core/ZudokuContext.js";
 import { joinUrl } from "../../util/joinUrl.js";
 import { CACHE_KEYS } from "../cache.js";

package/src/lib/components/context/ZudokuProvider.tsx

@@ -1,6 +1,6 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
 import type { PropsWithChildren } from "react";
-import { type ZudokuContext } from "../../core/ZudokuContext.js";
+import type { ZudokuContext } from "../../core/ZudokuContext.js";
 import { NO_DEHYDRATE } from "../cache.js";
 import { ZudokuReactContext } from "./ZudokuContext.js";
 

package/src/lib/components/index.ts

@@ -3,44 +3,26 @@ import { Helmet } from "@zudoku/react-helmet-async";
 import { useTheme as useThemeImport } from "next-themes";
 import { Link as LinkImport } from "react-router";
 import { useAuth as useAuthImport } from "../authentication/hook.js";
-import { RouteGuard as RouteGuardImport } from "../core/RouteGuard.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";
 import { Callout as CalloutImport } from "../ui/Callout.js";
-import {
-  Bootstrap as BootstrapImport,
-  BootstrapStatic as BootstrapStaticImport,
-} from "./Bootstrap.js";
-import { BuildCheck as BuildCheckImport } from "./BuildCheck.js";
+import { ClientOnly as ClientOnlyImport } from "./ClientOnly.js";
 import {
   CACHE_KEYS as CACHE_KEYS_IMPORT,
   useCache as useCacheImport,
 } from "./cache.js";
-import { ClientOnly as ClientOnlyImport } from "./ClientOnly.js";
 import { useZudoku as useZudokuImport } from "./context/ZudokuContext.js";
-import { Layout as LayoutImport } from "./Layout.js";
 import { Markdown as MarkdownImport } from "./Markdown.js";
 import { Spinner as SpinnerImport } from "./Spinner.js";
-import { StatusPage as StatusPageImport } from "./StatusPage.js";
 import { Typography as TypographyImport } from "./Typography.js";
 import { Zudoku as ZudokuImport } from "./Zudoku.js";
 
-export const Layout = /*@__PURE__*/ LayoutImport;
-export const RouterError = /*@__PURE__*/ RouterErrorImport;
-export const ServerError = /*@__PURE__*/ ServerErrorImport;
-export const Bootstrap = /*@__PURE__*/ BootstrapImport;
-export const BootstrapStatic = /*@__PURE__*/ BootstrapStaticImport;
-export const RouteGuard = /*@__PURE__*/ RouteGuardImport;
 export const Head = /*@__PURE__*/ Helmet;
-export const StatusPage = /*@__PURE__*/ StatusPageImport;
 export const Callout = /*@__PURE__*/ CalloutImport;
 export const Markdown = /*@__PURE__*/ MarkdownImport;
 export const Spinner = /*@__PURE__*/ SpinnerImport;
 export const ClientOnly = /*@__PURE__*/ ClientOnlyImport;
 export const Button = /*@__PURE__*/ ButtonImport;
 export const Link = /*@__PURE__*/ LinkImport;
-export const BuildCheck = /*@__PURE__*/ BuildCheckImport;
 export const Zudoku = /*@__PURE__*/ ZudokuImport;
 export const Typography = /*@__PURE__*/ TypographyImport;
 

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

@@ -104,7 +104,14 @@ const NavigationCategoryInner = ({
             </div>
           </NavLink>
         ) : (
-          <div onClick={() => setHasInteracted(true)} className={styles}>
+          // biome-ignore lint/a11y/noStaticElementInteractions: This is only to track if the user has interacted
+          <div
+            onClick={() => setHasInteracted(true)}
+            onKeyUp={(e) => {
+              if (e.key === "Enter" || e.key === " ") 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>

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

@@ -17,7 +17,7 @@ import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
 import { useZudoku } from "../context/ZudokuContext.js";
 import { NavigationBadge } from "./NavigationBadge.js";
 import { NavigationCategory } from "./NavigationCategory.js";
-import { isHiddenItem, navigationListItem } from "./utils.js";
+import { navigationListItem, shouldShowItem } from "./utils.js";
 
 const TruncatedLabel = ({
   label,
@@ -79,7 +79,7 @@ export const NavigationItem = ({
   const auth = useAuth();
   const context = useZudoku();
 
-  if (!isHiddenItem(auth, context)(item)) {
+  if (!shouldShowItem(auth, context)(item)) {
     return null;
   }
 

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef, type PropsWithChildren } from "react";
+import { type PropsWithChildren, useEffect, useRef } from "react";
 import { cn } from "../../util/cn.js";
 import { scrollIntoViewIfNeeded } from "../../util/scrollIntoViewIfNeeded.js";
 import { useZudoku } from "../context/ZudokuContext.js";

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

@@ -1,11 +1,11 @@
 import type { TocEntry } from "@stefanprobst/rehype-extract-toc";
 import { ListTreeIcon } from "lucide-react";
 import {
+  type CSSProperties,
+  type PropsWithChildren,
   useEffect,
   useRef,
   useState,
-  type CSSProperties,
-  type PropsWithChildren,
 } from "react";
 import { cn } from "../../util/cn.js";
 import { AnchorLink } from "../AnchorLink.js";

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import type * as React from "react";
 
 const ZudokuLogo = (props: React.SVGProps<SVGSVGElement>) => (
   <svg

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

@@ -67,7 +67,6 @@ export const useIsCategoryOpen = (category: NavigationCategory) => {
       case "custom-page":
       case "doc":
         return joinUrl(item.path) === location.pathname ? true : undefined;
-      case "link":
       default:
         return undefined;
     }
@@ -75,14 +74,14 @@ export const useIsCategoryOpen = (category: NavigationCategory) => {
 };
 
 export const usePrevNext = (): {
-  prev?: { label: string; id: string };
-  next?: { label: string; id: string };
+  prev?: { label?: string; id: string };
+  next?: { label?: string; id: string };
 } => {
   const currentId = useLocation().pathname;
   const { navigation } = useCurrentNavigation();
 
-  let prev;
-  let next;
+  let prev: { label?: string; id: string } | undefined;
+  let next: { label?: string; id: string } | undefined;
 
   let foundCurrent = false;
 
@@ -134,7 +133,7 @@ export const navigationListItem = cva(
   },
 );
 
-export const isHiddenItem =
+export const shouldShowItem =
   (auth: UseAuthReturn, context: ZudokuContext) =>
   (item: NavigationItem): boolean => {
     if (typeof item.display === "function") {

package/src/lib/core/ZudokuContext.ts

@@ -3,11 +3,11 @@ import { createNanoEvents } from "nanoevents";
 import type { ReactNode } from "react";
 import type { Location } from "react-router";
 import type { BundledTheme, HighlighterCore } from "shiki";
-import type { z } from "zod/v4";
+import type { z } from "zod";
 import type { Navigation } from "../../config/validators/NavigationSchema.js";
-import {
-  type ProtectedRoutesInput,
-  ProtectedRoutesSchema,
+import type {
+  CallbackContext,
+  ProtectedRoutesInput,
 } from "../../config/validators/ProtectedRoutesSchema.js";
 import type { FooterSchema } from "../../config/validators/validate.js";
 import type { AuthenticationPlugin } from "../authentication/authentication.js";
@@ -48,6 +48,7 @@ export type ApiKeyCache = "api-keys";
 
 type Metadata = Partial<{
   title: string;
+  defaultTitle?: string;
   description: string;
   logo: string;
   favicon: string;
@@ -105,6 +106,23 @@ export type ZudokuContextOptions = {
   };
 };
 
+export const transformProtectedRoutes = (
+  val: ProtectedRoutesInput,
+): Record<string, (c: CallbackContext) => boolean> | undefined => {
+  if (!val) return undefined;
+
+  if (Array.isArray(val)) {
+    return Object.fromEntries(
+      val.map((route) => [
+        route,
+        (c: CallbackContext) => c.auth.isAuthenticated,
+      ]),
+    );
+  }
+
+  return val;
+};
+
 export class ZudokuContext {
   public plugins: NonNullable<ZudokuContextOptions["plugins"]>;
   public navigation: Navigation;
@@ -123,13 +141,13 @@ export class ZudokuContext {
         const routes = plugin.getProtectedRoutes?.();
         if (!routes) return [];
 
-        return Object.entries(ProtectedRoutesSchema.parse(routes) ?? {});
+        return Object.entries(transformProtectedRoutes(routes) ?? {});
       }),
     );
 
     const protectedRoutes = {
       ...pluginProtectedRoutes,
-      ...ProtectedRoutesSchema.parse(options.protectedRoutes),
+      ...transformProtectedRoutes(options.protectedRoutes),
     };
 
     this.queryClient = queryClient;
@@ -144,6 +162,7 @@ export class ZudokuContext {
       if (!isEventConsumerPlugin(plugin)) return;
 
       objectEntries(plugin.events).forEach(([event, handler]) => {
+        // biome-ignore lint/style/noNonNullAssertion: handler is guaranteed to be defined
         this.emitter.on(event, handler!);
       });
     });

package/src/lib/core/__internal.tsx

@@ -0,0 +1,30 @@
+/**
+ * ⚠️
+ * These are re-exports consumed from the main entry point in `src/app/main.tsx`
+ * This is to ensure that they share the exact same context in React.
+ * ⚠️
+ **/
+
+import { Helmet } from "@zudoku/react-helmet-async";
+import {
+  Bootstrap as BootstrapImport,
+  BootstrapStatic as BootstrapStaticImport,
+} from "../components/Bootstrap.js";
+import { BuildCheck as BuildCheckImport } from "../components/BuildCheck.js";
+import { Layout as LayoutImport } from "../components/Layout.js";
+import { Meta as MetaImport } from "../components/Meta.js";
+import { StatusPage as StatusPageImport } from "../components/StatusPage.js";
+import { RouterError as RouterErrorImport } from "../errors/RouterError.js";
+import { ServerError as ServerErrorImport } from "../errors/ServerError.js";
+import { RouteGuard as RouteGuardImport } from "./RouteGuard.js";
+
+export const Layout = LayoutImport;
+export const RouterError = RouterErrorImport;
+export const ServerError = ServerErrorImport;
+export const Bootstrap = BootstrapImport;
+export const BootstrapStatic = BootstrapStaticImport;
+export const RouteGuard = RouteGuardImport;
+export const Head = Helmet;
+export const StatusPage = StatusPageImport;
+export const BuildCheck = BuildCheckImport;
+export const Meta = MetaImport;

package/src/lib/core/router.ts

@@ -0,0 +1 @@
+export * from "react-router";

package/src/lib/errors/ErrorAlert.tsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 import { SyntaxHighlight } from "zudoku/ui/SyntaxHighlight.js";
 import { DeveloperHint } from "../components/DeveloperHint.js";
 import { Heading } from "../components/Heading.js";

package/src/lib/errors/TopLevelError.tsx

@@ -1,8 +1,6 @@
-import { FallbackProps } from "react-error-boundary";
+import type { FallbackProps } from "react-error-boundary";
 import { ErrorAlert } from "./ErrorAlert.js";
 
-export function TopLevelError({ error, resetErrorBoundary }: FallbackProps) {
-  // Call resetErrorBoundary() to reset the error boundary and retry the render.
-
+export function TopLevelError({ error }: FallbackProps) {
   return <ErrorAlert error={error} />;
 }

package/src/lib/hooks/useEvent.test.tsx

@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { act, renderHook, waitFor } from "@testing-library/react";
-import { type PropsWithChildren } from "react";
-import { type Location } from "react-router";
+import type { PropsWithChildren } from "react";
+import type { Location } from "react-router";
 import { assertType, describe, expect, it, vi } from "vitest";
 import { ZudokuProvider } from "../components/context/ZudokuProvider.js";
 import { ZudokuContext, type ZudokuEvents } from "../core/ZudokuContext.js";

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

@@ -1,5 +1,5 @@
-import { GraphQLJSON } from "graphql-type-json";
 import { GraphQLScalarType } from "graphql/index.js";
+import { GraphQLJSON } from "graphql-type-json";
 import type { RecordAny } from "../../util/traverse.js";
 
 export const CIRCULAR_REF = "$[Circular Reference]";
@@ -14,12 +14,12 @@ const OPENAPI_PROPS = new Set([
 ]);
 
 const handleCircularRefs = (
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // biome-ignore lint/suspicious/noExplicitAny: Allow any type
   obj: any,
   visited = new WeakSet(),
   refs = new WeakMap(),
   path: string[] = [],
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // biome-ignore lint/suspicious/noExplicitAny: Allow any type
 ): any => {
   if (obj === null || typeof obj !== "object") return obj;
 

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

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
+// biome-ignore-all lint/suspicious/noExplicitAny: Allow any type
 import SchemaBuilder from "@pothos/core";
 import {
   type CountableSlugify,
@@ -554,6 +554,7 @@ const Schema = builder.objectRef<OpenAPIDocument>("Schema").implement({
       resolve: (root) =>
         Object.entries(root.paths ?? {}).map(([path, value]) => ({
           path,
+          // biome-ignore lint/style/noNonNullAssertion: value is guaranteed to be defined
           methods: Object.keys(value!) as typeof HttpMethods,
         })),
     }),

package/src/lib/oas/parser/dereference/index.ts

@@ -8,7 +8,7 @@ type CustomResolver = (ref: string) => Promise<JSONSchema | undefined>;
 
 const cache = new Map<JSONSchema, JSONSchema>();
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// biome-ignore lint/suspicious/noExplicitAny: Allow any type
 const isIndexableObject = (obj: any): obj is Record<string, any> =>
   obj !== null && typeof obj === "object";
 
@@ -18,6 +18,7 @@ export const dereference = async (
   resolvers: CustomResolver[] = [],
 ) => {
   if (cache.has(schema)) {
+    // biome-ignore lint/style/noNonNullAssertion: Cache is guaranteed to have a value
     return cache.get(schema)!;
   }
 

package/src/lib/oas/parser/dereference/resolveRef.ts

@@ -11,13 +11,13 @@ export const resolveLocalRef = (schema: JSONSchema, ref: string): unknown => {
   }
   const schemaCache = cache.get(schema);
 
-  if (schemaCache!.has(ref)) {
-    return schemaCache!.get(ref);
+  if (schemaCache?.has(ref)) {
+    return schemaCache.get(ref);
   }
 
   const path = ref.split("/").slice(1);
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // biome-ignore lint/suspicious/noExplicitAny: Allow any type
   let current: any = schema;
   for (const segment of path) {
     if (!current || typeof current !== "object") {
@@ -27,6 +27,6 @@ export const resolveLocalRef = (schema: JSONSchema, ref: string): unknown => {
     current = current[segment] ?? null;
   }
 
-  schemaCache!.set(ref, current);
+  schemaCache?.set(ref, current);
   return current;
 };

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

@@ -43,7 +43,7 @@ const parseSchemaInput = async (
       }
     }
     if (schemaInput.includes("://")) {
-      let response;
+      let response: Response;
       try {
         response = await fetch(schemaInput, {
           cache: "force-cache",
@@ -83,7 +83,7 @@ const parseSchemaInput = async (
 
   if (typeof schemaInput === "object") return schemaInput as JSONSchema;
 
-  throw new GraphQLError("Unsupported schema input: " + schemaInput);
+  throw new GraphQLError(`Unsupported schema input: ${schemaInput}`);
 };
 
 /**

package/src/lib/oas/parser/upgrade/index.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { type RecordAny, traverse } from "../../../util/traverse.js";
 import type { OpenAPIDocument } from "../index.js";
 /**
@@ -71,6 +70,7 @@ export const upgradeSchema = (schema: RecordAny): OpenAPIDocument => {
 
       if (isMultipart) {
         // Types
+        // biome-ignore lint/suspicious/noExplicitAny: Allow any type
         const entries: [string, any][] = Object.entries(schema.properties);
 
         for (const [, value] of entries) {
@@ -110,6 +110,7 @@ export const upgradeSchema = (schema: RecordAny): OpenAPIDocument => {
 
   schema = traverse(schema, (sub) => {
     if (sub.type === "string" && sub.format === "binary") {
+      // biome-ignore lint/suspicious/noExplicitAny: Allow any type
       return undefined as any;
     }
 

package/src/lib/plugins/api-keys/CreateApiKey.tsx

@@ -16,7 +16,7 @@ import { useZudoku } from "../../components/context/ZudokuContext.js";
 import { useAuth } from "../../hooks/index.js";
 import { Button } from "../../ui/Button.js";
 import { Input } from "../../ui/Input.js";
-import { type ApiKeyService } from "./index.js";
+import type { ApiKeyService } from "./index.js";
 
 type CreateApiKey = { description?: string; expiresOn?: string };
 

package/src/lib/plugins/api-keys/SettingsApiKeys.tsx

@@ -36,7 +36,7 @@ import { Input } from "../../ui/Input.js";
 import { cn } from "../../util/cn.js";
 import { useCopyToClipboard } from "../../util/useCopyToClipboard.js";
 import { CreateApiKey } from "./CreateApiKey.js";
-import { type ApiConsumer, type ApiKey, type ApiKeyService } from "./index.js";
+import type { ApiConsumer, ApiKey, ApiKeyService } from "./index.js";
 
 export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
   const context = useZudoku();
@@ -90,7 +90,7 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
 
       return { previousData };
     },
-    onError: (err, variables, context) => {
+    onError: (_err, _variables, context) => {
       if (context?.previousData) {
         queryClient.setQueryData(["api-keys"], context.previousData);
       }
@@ -136,7 +136,7 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
 
       return { previousData };
     },
-    onError: (err, variables, context) => {
+    onError: (_err, _variables, context) => {
       if (context?.previousData) {
         queryClient.setQueryData(["api-keys"], context.previousData);
       }
@@ -290,7 +290,7 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
                           </div>
                         </div>
                       ) : (
-                        <>{consumers.label}</>
+                        consumers.label
                       )}
                       <div className="text-muted-foreground text-xs">
                         {consumers.createdOn}
@@ -444,8 +444,7 @@ const RevealApiKey = ({
   const isExpired = expiresOn && new Date(expiresOn) < new Date();
   const daysUntilExpiry = expiresOn
     ? Math.ceil(
-        (new Date(expiresOn).getTime() - new Date().getTime()) /
-          (1000 * 60 * 60 * 24),
+        (new Date(expiresOn).getTime() - Date.now()) / (1000 * 60 * 60 * 24),
       )
     : Infinity;
   const expiresSoon = daysUntilExpiry <= 7 && !isExpired;

package/src/lib/plugins/api-keys/index.tsx

@@ -1,12 +1,12 @@
 import { KeyRoundIcon } from "lucide-react";
-import { type RouteObject } from "react-router";
-import { UseAuthReturn } from "../../authentication/hook.js";
-import { type ZudokuContext } from "../../core/ZudokuContext.js";
-import {
-  type ApiIdentityPlugin,
-  type ProfileMenuPlugin,
-  type ZudokuPlugin,
+import type { RouteObject } from "react-router";
+import type { UseAuthReturn } from "../../authentication/hook.js";
+import type {
+  ApiIdentityPlugin,
+  ProfileMenuPlugin,
+  ZudokuPlugin,
 } from "../../core/plugins.js";
+import type { ZudokuContext } from "../../core/ZudokuContext.js";
 import { RouterError } from "../../errors/RouterError.js";
 import invariant from "../../util/invariant.js";
 import { ProtectedRoute } from "./ProtectedRoute.js";
@@ -140,7 +140,7 @@ const createDefaultHandler = (
     },
     getConsumers: async (context) => {
       const request = new Request(
-        DEFAULT_API_KEY_ENDPOINT + `/${deploymentName}/consumers`,
+        `${DEFAULT_API_KEY_ENDPOINT}/${deploymentName}/consumers`,
       );
       await context.signRequest(request);
 

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

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import type { ReactNode } from "react";
 import type { RouteObject } from "react-router";
 import type { NavigationItem } from "../../../config/validators/NavigationSchema.js";
 import { traverseNavigation } from "../../components/navigation/utils.js";
@@ -20,6 +20,9 @@ export const customPagesPlugin = (
         customPages.push({
           path: item.path,
           element: item.element,
+          handle: {
+            layout: item.layout ?? "default",
+          },
         });
       }
     });