zudoku 0.26.0 → 0.27.0

package/lib/zudoku.plugin-api-catalog.js

@@ -1,10 +1,10 @@
 import { j as e } from "./jsx-runtime-Bdg6XQ1m.js";
 import { s as j } from "./index-LNp6rxyU.js";
-import { u as b } from "./ZudokuContext-D3ayHjP-.js";
-import { b as y } from "./chunk-SYFQ2XB5-KWlHsT7t.js";
+import { u as b } from "./ZudokuContext-8jts0fF3.js";
+import { b as y } from "./chunk-SYFQ2XB5-BPvC-soB.js";
 import { Head as v, Link as N } from "./zudoku.components.js";
 import { u as w } from "./state-mM7uaXTW.js";
-import { M as C } from "./Markdown-BrfrjEk_.js";
+import { M as C } from "./Markdown-B8o9Qz4q.js";
 import { c as h } from "./cn-qaFjX9_3.js";
 const f = (r, n) => j(`${r}-${n}`), k = ({
   items: r,

package/lib/zudoku.plugin-api-keys.js

@@ -1,14 +1,14 @@
 import { j as e } from "./jsx-runtime-Bdg6XQ1m.js";
 import { RotateCwIcon as g, TrashIcon as f, EyeOffIcon as j, EyeIcon as v, CheckIcon as w, CopyIcon as b, FileKey2Icon as K } from "lucide-react";
-import { D as k, S as m, R as N } from "./SlotletProvider-DPbx9KdU.js";
+import { D as k, S as m, R as N } from "./SlotletProvider-CtIp8rP3.js";
 import { i as c } from "./invariant-Caa8-XvF.js";
-import { u as d, S as I, a as S, b as A, c as C, d as E, e as x } from "./Select-DkOpAG0c.js";
+import { u as d, S as I, a as S, b as A, c as C, d as E, e as x } from "./Select-B7UXR0SB.js";
 import { a as P } from "./index.esm-CrSoEshU.js";
-import { a as D, L as u, O as R } from "./chunk-SYFQ2XB5-KWlHsT7t.js";
-import { a as y, e as q, u as O } from "./ZudokuContext-D3ayHjP-.js";
+import { a as D, L as u, O as R } from "./chunk-SYFQ2XB5-BPvC-soB.js";
+import { a as y, e as q, u as O } from "./ZudokuContext-8jts0fF3.js";
 import { Button as l } from "./ui/Button.js";
 import { Input as z } from "./ui/Input.js";
-import { u as F } from "./hook-DUyACbIK.js";
+import { u as F } from "./hook-BG02esyv.js";
 import { useState as p } from "react";
 import { c as T } from "./cn-qaFjX9_3.js";
 const L = ({ service: t }) => {

package/lib/zudoku.plugin-custom-pages.js

@@ -1,8 +1,8 @@
 import { j as o } from "./jsx-runtime-Bdg6XQ1m.js";
 import a from "react";
-import { P as n } from "./Markdown-BrfrjEk_.js";
+import { P as n } from "./Markdown-B8o9Qz4q.js";
 import { c } from "./cn-qaFjX9_3.js";
-import { u as p } from "./useExposedProps-BBHR7aLM.js";
+import { u as p } from "./useExposedProps-BLKFBylA.js";
 const u = ({
   element: t,
   render: s,

package/lib/zudoku.plugin-markdown.js

@@ -74,7 +74,7 @@ const C = (n) => ({
         const h = {
           path: r,
           lazy: async () => {
-            const { MdxPage: l } = await import("./MdxPage-LNZLj_A5.js"), { default: p, ...g } = await a();
+            const { MdxPage: l } = await import("./MdxPage-BxRt3Ly7.js"), { default: p, ...g } = await a();
             return {
               element: /* @__PURE__ */ P.jsx(
                 l,

package/lib/zudoku.plugin-openapi.js

@@ -1,10 +1,10 @@
 import "./jsx-runtime-Bdg6XQ1m.js";
-import "./chunk-SYFQ2XB5-KWlHsT7t.js";
-import { o as a } from "./index-CaILD1AV.js";
-import "./ZudokuContext-D3ayHjP-.js";
+import "./chunk-SYFQ2XB5-BPvC-soB.js";
+import { o as a } from "./index-DmqsUPcm.js";
 import "lucide-react";
-import "./hook-DUyACbIK.js";
+import "./hook-BG02esyv.js";
 import "./ui/Button.js";
+import "./ZudokuContext-8jts0fF3.js";
 export {
   a as openApiPlugin
 };

package/lib/zudoku.plugin-redirect.js

@@ -1,4 +1,4 @@
-import { r as o } from "./chunk-SYFQ2XB5-KWlHsT7t.js";
+import { r as o } from "./chunk-SYFQ2XB5-BPvC-soB.js";
 const a = (r) => ({
   getRoutes: () => r.redirects.map(({ from: e, to: t }) => ({
     path: e,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -131,7 +131,7 @@
     "@radix-ui/react-progress": "1.1.1",
     "@radix-ui/react-radio-group": "1.2.2",
     "@radix-ui/react-scroll-area": "1.2.2",
-    "@radix-ui/react-select": "2.1.4",
+    "@radix-ui/react-select": "2.1.5",
     "@radix-ui/react-slider": "1.2.2",
     "@radix-ui/react-slot": "1.1.1",
     "@radix-ui/react-switch": "1.1.2",

package/src/app/main.css

@@ -238,57 +238,57 @@
   }
 
   /* Theme */
-  
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 95%;
-    --input: 240 5.9% 90%;
-    --ring: 240 5.9% 10%;
-    --radius: 0.75rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-  }
 
-  .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
-    --chart-1: 220 70% 50%;
+  @layer base {
+    :root {
+      --background: 0 0% 100%;
+      --foreground: 240 10% 3.9%;
+      --card: 0 0% 100%;
+      --card-foreground: 240 10% 3.9%;
+      --popover: 0 0% 100%;
+      --popover-foreground: 240 10% 3.9%;
+      --primary: 240 5.9% 10%;
+      --primary-foreground: 0 0% 98%;
+      --secondary: 240 4.8% 95.9%;
+      --secondary-foreground: 240 5.9% 10%;
+      --muted: 240 4.8% 95.9%;
+      --muted-foreground: 240 3.8% 46.1%;
+      --accent: 240 4.8% 95.9%;
+      --accent-foreground: 240 5.9% 10%;
+      --destructive: 0 84.2% 60.2%;
+      --destructive-foreground: 0 0% 98%;
+      --border: 240 5.9% 95%;
+      --input: 240 5.9% 90%;
+      --ring: 240 5.9% 10%;
+      --radius: 0.75rem;
+      --chart-1: 12 76% 61%;
+      --chart-2: 173 58% 39%;
+      --chart-3: 197 37% 24%;
+      --chart-4: 43 74% 66%;
+      --chart-5: 27 87% 67%;
+    }
+
+    .dark {
+      --background: 240 10% 3.9%;
+      --foreground: 0 0% 98%;
+      --card: 240 10% 3.9%;
+      --card-foreground: 0 0% 98%;
+      --popover: 240 10% 3.9%;
+      --popover-foreground: 0 0% 98%;
+      --primary: 0 0% 98%;
+      --primary-foreground: 240 5.9% 10%;
+      --secondary: 240 3.7% 15.9%;
+      --secondary-foreground: 0 0% 98%;
+      --muted: 240 3.7% 15.9%;
+      --muted-foreground: 240 5% 64.9%;
+      --accent: 240 3.7% 15.9%;
+      --accent-foreground: 0 0% 98%;
+      --destructive: 0 62.8% 30.6%;
+      --destructive-foreground: 0 0% 98%;
+      --border: 240 3.7% 15.9%;
+      --input: 240 3.7% 15.9%;
+      --ring: 240 4.9% 83.9%;
+      --chart-1: 220 70% 50%;
       --chart-2: 160 60% 45%;
       --chart-3: 30 80% 55%;
       --chart-4: 280 65% 60%;

package/src/app/main.tsx

@@ -13,8 +13,10 @@ import { configuredSidebar } from "virtual:zudoku-sidebar";
 import "virtual:zudoku-theme.css";
 import { Layout, RouterError, Zudoku } from "zudoku/components";
 import type { ZudokuConfig } from "../config/config.js";
+import { StatusPage } from "../lib/components/StatusPage.js";
 import type { ZudokuContextOptions } from "../lib/core/ZudokuContext.js";
 import { isNavigationPlugin } from "../lib/core/plugins.js";
+import { RouteGuard } from "../lib/core/RouteGuard.js";
 
 export const convertZudokuConfigToOptions = (
   config: ZudokuConfig,
@@ -32,6 +34,7 @@ export const convertZudokuConfigToOptions = (
     !config.page?.logo?.src?.dark;
 
   return {
+    protectedRoutes: config.protectedRoutes,
     page: {
       ...config.page,
       logo: {
@@ -69,7 +72,10 @@ export const convertZudokuConfigToOptions = (
   };
 };
 
-export const getRoutesByOptions = (options: ZudokuContextOptions) => {
+export const getRoutesByOptions = (
+  options: ZudokuContextOptions,
+  enableStatusPages = false,
+) => {
   const allPlugins = [
     ...(options.plugins ? options.plugins : []),
     ...(options.authentication?.getAuthenticationPlugin
@@ -79,19 +85,31 @@ export const getRoutesByOptions = (options: ZudokuContextOptions) => {
 
   const routes = allPlugins
     .flatMap((plugin) => (isNavigationPlugin(plugin) ? plugin.getRoutes() : []))
-    .concat({
-      path: "*",
-      loader: () => {
-        throw new Response("Not Found", { status: 404 });
+    .concat(
+      enableStatusPages
+        ? [400, 403, 404, 405, 414, 416, 500, 501, 502, 503, 504].map(
+            (statusCode) => ({
+              path: `/.static/${statusCode}`,
+              element: <StatusPage statusCode={statusCode} />,
+            }),
+          )
+        : [],
+    )
+    .concat([
+      {
+        path: "*",
+        loader: () => {
+          throw new Response("Not Found", { status: 404 });
+        },
       },
-    });
+    ]);
 
   return routes;
 };
 
 export const getRoutesByConfig = (config: ZudokuConfig): RouteObject[] => {
   const options = convertZudokuConfigToOptions(config);
-  const routes = getRoutesByOptions(options);
+  const routes = getRoutesByOptions(options, config.enableStatusPages);
 
   return [
     {
@@ -102,6 +120,7 @@ export const getRoutesByConfig = (config: ZudokuConfig): RouteObject[] => {
       ),
       children: [
         {
+          element: <RouteGuard />,
           errorElement: <RouterError />,
           children: routes,
         },

package/src/lib/authentication/providers/auth0.tsx

@@ -35,10 +35,7 @@ class Auth0AuthenticationProvider extends OpenIDAuthenticationProvider {
       providerData: null,
     });
 
-    const redirectUrl = new URL(
-      window.location.origin + this.logoutRedirectUrlPath,
-    );
-
+    const redirectUrl = new URL(window.location.origin);
     redirectUrl.pathname = this.logoutRedirectUrlPath;
 
     // SEE: https://auth0.com/docs/authenticate/login/logout/log-users-out-of-auth0

package/src/lib/authentication/providers/openid.tsx

@@ -2,6 +2,7 @@ import logger from "loglevel";
 import * as oauth from "oauth4webapi";
 import { OpenIDAuthenticationConfig } from "../../../config/config.js";
 import { ClientOnly } from "../../components/ClientOnly.js";
+import { joinUrl } from "../../util/joinUrl.js";
 import {
   AuthenticationProvider,
   AuthenticationProviderInitializer,
@@ -49,8 +50,8 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
   protected authorizationServer: oauth.AuthorizationServer | undefined;
 
-  protected callbackUrlPath = "/oauth/callback";
-  protected logoutRedirectUrlPath = "/";
+  protected callbackUrlPath: string;
+  protected logoutRedirectUrlPath: string;
   protected onAuthorizationUrl?: (
     authorizationUrl: URL,
     options: { isSignIn: boolean; isSignUp: boolean },
@@ -67,6 +68,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     redirectToAfterSignUp,
     redirectToAfterSignIn,
     redirectToAfterSignOut,
+    basePath,
   }: OpenIDAuthenticationConfig) {
     this.client = {
       client_id: clientId,
@@ -74,9 +76,14 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     };
     this.audience = audience;
     this.issuer = issuer;
-    this.redirectToAfterSignUp = redirectToAfterSignUp ?? "/";
-    this.redirectToAfterSignIn = redirectToAfterSignIn ?? "/";
-    this.redirectToAfterSignOut = redirectToAfterSignOut ?? "/";
+    this.callbackUrlPath = joinUrl(basePath, "/oauth/callback");
+
+    const root = joinUrl(basePath, "/");
+
+    this.logoutRedirectUrlPath = root;
+    this.redirectToAfterSignUp = redirectToAfterSignUp ?? root;
+    this.redirectToAfterSignIn = redirectToAfterSignIn ?? root;
+    this.redirectToAfterSignOut = redirectToAfterSignOut ?? root;
   }
 
   protected async getAuthServer() {

package/src/lib/components/AnchorLink.tsx

@@ -1,19 +1,22 @@
 import React from "react";
 import { Link, type LinkProps, useLocation } from "react-router";
+import { useScrollToHash } from "../util/useScrollToAnchor.js";
 
 /**
  * Link that scrolls to anchor even if the hash is already set in the URL.
  */
 export const AnchorLink = (props: LinkProps) => {
   const location = useLocation();
+  const scrollToHash = useScrollToHash();
   const hash = typeof props.to === "string" ? props.to : props.to.hash;
 
   const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    props.onClick?.(event);
     if (!hash?.startsWith("#") || hash !== location.hash) return;
 
     event.preventDefault();
-    document.getElementById(hash.slice(1))?.scrollIntoView();
+    scrollToHash(hash);
   };
 
-  return <Link onClick={handleClick} {...props} />;
+  return <Link {...props} onClick={handleClick} />;
 };

package/src/lib/components/Autocomplete.tsx

@@ -0,0 +1,111 @@
+import { PopoverAnchor } from "@radix-ui/react-popover";
+import { useCommandState } from "cmdk";
+import { useRef, useState, type Ref } from "react";
+import {
+  Command,
+  CommandInlineInput,
+  CommandItem,
+  CommandList,
+} from "zudoku/ui/Command.js";
+import { Popover, PopoverContent } from "zudoku/ui/Popover.js";
+import { cn } from "../util/cn.js";
+
+type AutocompleteProps = {
+  value: string;
+  options: readonly string[];
+  onChange: (e: string) => void;
+  className?: string;
+  placeholder?: string;
+  onEnterPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  ref?: Ref<HTMLInputElement>;
+};
+
+const AutocompletePopover = ({
+  value,
+  options,
+  onChange,
+  className,
+  placeholder = "Enter value",
+  onEnterPress,
+  ref,
+}: AutocompleteProps) => {
+  const [open, setOpen] = useState(false);
+  const [dontClose, setDontClose] = useState(false);
+  const count = useCommandState((state) => state.filtered.count);
+  const inputRef = useRef<HTMLInputElement>(null);
+  return (
+    <Popover open={open}>
+      <PopoverAnchor>
+        <CommandInlineInput
+          ref={(el) => {
+            inputRef.current = el;
+            if (typeof ref === "function") {
+              ref(el);
+            } else if (ref) {
+              ref.current = el;
+            }
+          }}
+          value={value}
+          placeholder={placeholder}
+          className={cn("h-9 bg-transparent", className)}
+          onFocus={() => setOpen(true)}
+          onBlur={() => {
+            if (dontClose) {
+              return;
+            }
+            setOpen(false);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              setOpen(false);
+              inputRef.current?.blur();
+              onEnterPress?.(e);
+            }
+          }}
+          onValueChange={(e) => onChange(e)}
+        />
+      </PopoverAnchor>
+      <PopoverContent
+        onMouseEnter={() => setDontClose(true)}
+        onMouseLeave={() => setDontClose(false)}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        className={cn("p-0 w-[--radix-popover-trigger-width]", {
+          "border-0": count === 0,
+        })}
+        align="start"
+        side="bottom"
+        onWheel={(e) => {
+          // See: https://github.com/radix-ui/primitives/issues/1159
+          e.stopPropagation();
+        }}
+        onTouchMove={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        <CommandList className="max-h-[140px]">
+          {options.map((enumValue) => (
+            <CommandItem
+              key={enumValue}
+              value={enumValue}
+              onSelect={(selected) => {
+                onChange(selected);
+                setOpen(false);
+              }}
+              className="cursor-pointer"
+            >
+              {enumValue}
+            </CommandItem>
+          ))}
+        </CommandList>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export const Autocomplete = (props: AutocompleteProps) => {
+  return (
+    <Command className="bg-transparent">
+      <AutocompletePopover {...props} />
+    </Command>
+  );
+};

package/src/lib/components/Header.tsx

@@ -16,7 +16,7 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "../ui/DropdownMenu.js";
-import { joinPath } from "../util/joinPath.js";
+import { joinUrl } from "../util/joinUrl.js";
 import { Banner } from "./Banner.js";
 import { ClientOnly } from "./ClientOnly.js";
 import { useZudoku } from "./context/ZudokuContext.js";
@@ -76,7 +76,7 @@ export const Header = memo(function HeaderInner() {
                       src={
                         /https?:\/\//.test(page.logo.src.light)
                           ? page.logo.src.light
-                          : joinPath(
+                          : joinUrl(
                               import.meta.env.BASE_URL,
                               page.logo.src.light,
                             )
@@ -90,7 +90,7 @@ export const Header = memo(function HeaderInner() {
                       src={
                         /https?:\/\//.test(page.logo.src.dark)
                           ? page.logo.src.dark
-                          : joinPath(
+                          : joinUrl(
                               import.meta.env.BASE_URL,
                               page.logo.src.dark,
                             )
@@ -171,8 +171,8 @@ export const Header = memo(function HeaderInner() {
                   )}
                 </ClientOnly>
               )}
-              <ThemeSwitch />
               <Slotlet name="head-navigation-end" />
+              <ThemeSwitch />
             </div>
           </div>
         </div>

package/src/lib/components/Markdown.tsx

@@ -1,3 +1,4 @@
+import { memo } from "react";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 import { visit } from "unist-util-visit";
@@ -20,19 +21,17 @@ const rehypePlugins = [rehypeCodeBlockPlugin, rehypeRaw];
 // other styles are defined in main.css .prose
 export const ProseClasses = "prose dark:prose-invert prose-neutral";
 
-export const Markdown = ({
-  content,
-  className,
-}: {
-  content: string;
-  className?: string;
-}) => (
-  <ReactMarkdown
-    remarkPlugins={remarkPlugins}
-    rehypePlugins={rehypePlugins}
-    components={MdxComponents}
-    className={className}
-  >
-    {content}
-  </ReactMarkdown>
+export const Markdown = memo(
+  ({ content, className }: { content: string; className?: string }) => (
+    <ReactMarkdown
+      remarkPlugins={remarkPlugins}
+      rehypePlugins={rehypePlugins}
+      components={MdxComponents}
+      className={className}
+    >
+      {content}
+    </ReactMarkdown>
+  ),
 );
+
+Markdown.displayName = "Markdown";

package/src/lib/components/StatusPage.tsx

@@ -0,0 +1,91 @@
+import type { ReactNode } from "react";
+import { ErrorPage } from "./ErrorPage.js";
+
+type StatusPageProps = {
+  statusCode: number;
+  message?: ReactNode;
+};
+
+const getDefaultContent = (
+  statusCode: number,
+): { title: string; message: string } => {
+  switch (statusCode) {
+    case 400:
+      return {
+        title: "Bad Request",
+        message:
+          "The request could not be understood by the server due to malformed syntax.",
+      };
+    case 403:
+      return {
+        title: "Forbidden",
+        message: "You don't have permission to access this resource.",
+      };
+    case 404:
+      return {
+        title: "Not Found",
+        message: "The requested resource could not be found.",
+      };
+    case 405:
+      return {
+        title: "Method Not Allowed",
+        message:
+          "The request method is not supported for the requested resource.",
+      };
+    case 414:
+      return {
+        title: "Request URI Too Large",
+        message: "The request URI is too large.",
+      };
+    case 416:
+      return {
+        title: "Range Not Satisfiable",
+        message: "The server cannot satisfy the request range.",
+      };
+    case 500:
+      return {
+        title: "Internal Server Error",
+        message: "An unexpected error occurred while processing your request.",
+      };
+    case 501:
+      return {
+        title: "Not Implemented",
+        message:
+          "The server does not support the functionality required to fulfill the request.",
+      };
+    case 502:
+      return {
+        title: "Bad Gateway",
+        message:
+          "The server received an invalid response from the upstream server.",
+      };
+    case 503:
+      return {
+        title: "Service Unavailable",
+        message: "The server is temporarily unable to handle the request.",
+      };
+    case 504:
+      return {
+        title: "Gateway Timeout",
+        message:
+          "The server did not receive a timely response from the upstream server.",
+      };
+    default:
+      return {
+        title: "An error occurred",
+        message: "Something went wrong while processing your request.",
+      };
+  }
+};
+
+export const StatusPage = ({ statusCode, message }: StatusPageProps) => {
+  const defaultContent = getDefaultContent(statusCode);
+
+  return (
+    <ErrorPage
+      title={defaultContent.title}
+      message={message ?? defaultContent.message}
+      category={statusCode}
+    />
+  );
+};