zudoku 0.25.3 → 0.26.1

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

@@ -1,10 +1,10 @@
-import { j as e } from "./jsx-runtime-Dx-03ztt.js";
+import { j as e } from "./jsx-runtime-Bdg6XQ1m.js";
 import { s as j } from "./index-LNp6rxyU.js";
-import { u as b } from "./ZudokuContext-hmLMUdf2.js";
-import { b as y } from "./chunk-D52XG6IA-Dl7HLe6j.js";
+import { u as b } from "./ZudokuContext-DeQZEp-x.js";
+import { b as y } from "./chunk-SYFQ2XB5-BF5IDYrB.js";
 import { Head as v, Link as N } from "./zudoku.components.js";
-import { u as w } from "./state-CFQsUZUP.js";
-import { M as C } from "./Markdown-CZDLNOFc.js";
+import { u as w } from "./state-mM7uaXTW.js";
+import { M as C } from "./Markdown-DFN6p0J-.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-Dx-03ztt.js";
+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-pfc9oejW.js";
+import { D as k, S as m, R as N } from "./SlotletProvider-_3zzX_g_.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-B_IxRUUC.js";
-import { a as P } from "./index.esm-BnnBRKJX.js";
-import { a as D, L as u, O as R } from "./chunk-D52XG6IA-Dl7HLe6j.js";
-import { a as y, e as q, u as O } from "./ZudokuContext-hmLMUdf2.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-D3O7wISy.js";
+import { a as P } from "./index.esm-CrSoEshU.js";
+import { a as D, L as u, O as R } from "./chunk-SYFQ2XB5-BF5IDYrB.js";
+import { a as y, e as q, u as O } from "./ZudokuContext-DeQZEp-x.js";
 import { Button as l } from "./ui/Button.js";
 import { Input as z } from "./ui/Input.js";
-import { u as F } from "./hook-CHq7pFyz.js";
+import { u as F } from "./hook-BRQEDRbn.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-Dx-03ztt.js";
+import { j as o } from "./jsx-runtime-Bdg6XQ1m.js";
 import a from "react";
-import { P as n } from "./Markdown-CZDLNOFc.js";
+import { P as n } from "./Markdown-DFN6p0J-.js";
 import { c } from "./cn-qaFjX9_3.js";
-import { u as p } from "./useExposedProps-DE9lR6MF.js";
+import { u as p } from "./useExposedProps-CetwhZpP.js";
 const u = ({
   element: t,
   render: s,

package/lib/zudoku.plugin-markdown.js

@@ -1,7 +1,7 @@
 var d = Object.defineProperty;
 var m = (n, t, o) => t in n ? d(n, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : n[t] = o;
 var f = (n, t, o) => m(n, typeof t != "symbol" ? t + "" : t, o);
-import { j as P } from "./jsx-runtime-Dx-03ztt.js";
+import { j as P } from "./jsx-runtime-Bdg6XQ1m.js";
 import { f as u } from "./__vite-browser-external-BYRIRx8p.js";
 const x = "/pages/**/*.{md,mdx}", D = [".md", ".mdx"];
 class c {
@@ -74,7 +74,7 @@ const C = (n) => ({
         const h = {
           path: r,
           lazy: async () => {
-            const { MdxPage: l } = await import("./MdxPage-DKMbBROv.js"), { default: p, ...g } = await a();
+            const { MdxPage: l } = await import("./MdxPage-D9c4z09Q.js"), { default: p, ...g } = await a();
             return {
               element: /* @__PURE__ */ P.jsx(
                 l,

package/lib/zudoku.plugin-openapi.js

@@ -1,9 +1,9 @@
-import "./jsx-runtime-Dx-03ztt.js";
-import "./chunk-D52XG6IA-Dl7HLe6j.js";
-import { o as a } from "./index-sD8L1_Dl.js";
-import "./ZudokuContext-hmLMUdf2.js";
+import "./jsx-runtime-Bdg6XQ1m.js";
+import "./chunk-SYFQ2XB5-BF5IDYrB.js";
+import { o as a } from "./index-CXRrqOIl.js";
+import "./ZudokuContext-DeQZEp-x.js";
 import "lucide-react";
-import "./hook-CHq7pFyz.js";
+import "./hook-BRQEDRbn.js";
 import "./ui/Button.js";
 export {
   a as openApiPlugin

package/lib/zudoku.plugin-redirect.js

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

package/lib/zudoku.plugin-search-inkeep.js

@@ -1,5 +1,5 @@
-import { j as i } from "./jsx-runtime-Dx-03ztt.js";
-import { useRef as l, useState as f, useMemo as m, useEffect as u } from "react";
+import { j as i } from "./jsx-runtime-Bdg6XQ1m.js";
+import { useRef as d, useState as f, useMemo as m, useEffect as c } from "react";
 import { C as g } from "./ClientOnly-E7hGysn1.js";
 const h = {
   theme: {
@@ -25,7 +25,7 @@ const h = {
   onClose: n,
   settings: p
 }) => {
-  const o = l(null), c = l(null), [s, d] = f(
+  const o = d(null), u = d(null), [s, l] = f(
     typeof Inkeep < "u"
   ), a = m(
     () => ({
@@ -44,17 +44,17 @@ const h = {
     }),
     [e, n, r, p, o]
   );
-  return u(() => {
+  return c(() => {
     if (s) return;
     const t = setInterval(() => {
-      typeof Inkeep < "u" && (d(!0), clearInterval(t));
+      typeof Inkeep < "u" && (l(!0), clearInterval(t));
     }, 100);
     return () => clearInterval(t);
-  }, [s]), u(() => {
-    !s || c.current || (c.current = Inkeep().embed(a));
-  }, [a, s]), u(() => {
+  }, [s]), c(() => {
+    !s || u.current || (u.current = Inkeep().embed(a));
+  }, [a, s]), c(() => {
     var t;
-    (t = c.current) == null || t.render({ ...a, isOpen: e });
+    (t = u.current) == null || t.render({ ...a, isOpen: e });
   }, [a, e]), /* @__PURE__ */ i.jsx("div", { ref: o });
 }, x = (r) => ({
   getHead: () => /* @__PURE__ */ i.jsx(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.25.3",
+  "version": "0.26.1",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -111,42 +111,42 @@
     }
   },
   "dependencies": {
-    "@envelop/core": "5.0.2",
+    "@envelop/core": "5.0.3",
     "@graphql-typed-document-node/core": "3.2.0",
-    "@hookform/resolvers": "3.9.1",
-    "@lekoarts/rehype-meta-as-attributes": "3.0.1",
+    "@hookform/resolvers": "3.10.0",
+    "@lekoarts/rehype-meta-as-attributes": "3.0.2",
     "@mdx-js/react": "3.1.0",
     "@mdx-js/rollup": "3.1.0",
     "@pothos/core": "3.41.0",
     "@radix-ui/react-accordion": "1.2.2",
     "@radix-ui/react-alert-dialog": "1.1.4",
     "@radix-ui/react-aspect-ratio": "1.1.1",
-    "@radix-ui/react-checkbox": "1.1.2",
-    "@radix-ui/react-collapsible": "1.1.1",
-    "@radix-ui/react-dialog": "1.1.2",
-    "@radix-ui/react-dropdown-menu": "2.1.2",
-    "@radix-ui/react-hover-card": "1.1.2",
-    "@radix-ui/react-label": "2.1.0",
-    "@radix-ui/react-popover": "1.1.2",
-    "@radix-ui/react-progress": "1.1.0",
-    "@radix-ui/react-radio-group": "1.2.1",
-    "@radix-ui/react-scroll-area": "1.2.1",
-    "@radix-ui/react-select": "2.1.2",
-    "@radix-ui/react-slider": "1.2.1",
-    "@radix-ui/react-slot": "1.1.0",
-    "@radix-ui/react-switch": "1.1.1",
-    "@radix-ui/react-tabs": "1.1.1",
-    "@radix-ui/react-toggle": "1.1.0",
+    "@radix-ui/react-checkbox": "1.1.3",
+    "@radix-ui/react-collapsible": "1.1.2",
+    "@radix-ui/react-dialog": "1.1.4",
+    "@radix-ui/react-dropdown-menu": "2.1.4",
+    "@radix-ui/react-hover-card": "1.1.4",
+    "@radix-ui/react-label": "2.1.1",
+    "@radix-ui/react-popover": "1.1.4",
+    "@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-slider": "1.2.2",
+    "@radix-ui/react-slot": "1.1.1",
+    "@radix-ui/react-switch": "1.1.2",
+    "@radix-ui/react-tabs": "1.1.2",
+    "@radix-ui/react-toggle": "1.1.1",
     "@radix-ui/react-toggle-group": "1.1.1",
-    "@radix-ui/react-tooltip": "1.1.4",
-    "@radix-ui/react-visually-hidden": "1",
-    "@sentry/node": "8.42.0",
+    "@radix-ui/react-tooltip": "1.1.6",
+    "@radix-ui/react-visually-hidden": "1.1.1",
+    "@sentry/node": "8.50.0",
     "@sindresorhus/slugify": "2.2.1",
-    "@stefanprobst/rehype-extract-toc": "2.2.0",
+    "@stefanprobst/rehype-extract-toc": "2.2.1",
     "@tailwindcss/typography": "0.5.16",
-    "@tanstack/react-query": "5.62.3",
-    "@types/react": "19.0.1",
-    "@types/react-dom": "19.0.1",
+    "@tanstack/react-query": "5.64.2",
+    "@types/react": "19.0.7",
+    "@types/react-dom": "19.0.3",
     "@vitejs/plugin-react": "4.3.4",
     "@zudoku/httpsnippet": "10.0.9",
     "@zudoku/react-helmet-async": "2.0.5",
@@ -157,13 +157,13 @@
     "cmdk": "1.0.4",
     "devlop": "^1.1.0",
     "dotenv": "16.4.7",
-    "embla-carousel-react": "8.5.1",
+    "embla-carousel-react": "8.5.2",
     "estree-util-value-to-estree": "3.2.1",
     "express": "4.21.2",
-    "glob": "11.0.0",
+    "glob": "11.0.1",
     "graphql": "16.10.0",
     "graphql-type-json": "0.3.2",
-    "graphql-yoga": "5.10.4",
+    "graphql-yoga": "5.10.10",
     "gray-matter": "4.0.3",
     "hast-util-to-jsx-runtime": "^2.3.2",
     "hast-util-to-string": "3.0.1",
@@ -171,20 +171,20 @@
     "http-terminator": "3.2.0",
     "loglevel": "1.9.2",
     "lru-cache": "11.0.2",
-    "lucide-react": "0.468.0",
+    "lucide-react": "0.473.0",
     "next-themes": "0.4.4",
     "oauth4webapi": "2.17.0",
     "object-hash": "3.0.0",
     "openapi-types": "12.1.3",
     "picocolors": "1.1.1",
-    "postcss": "8.4.49",
-    "posthog-node": "4.3.1",
-    "prism-react-renderer": "2.4.0",
+    "postcss": "8.5.1",
+    "posthog-node": "4.4.1",
+    "prism-react-renderer": "2.4.1",
     "prismjs": "1.29.0",
-    "react-error-boundary": "4.1.2",
-    "react-hook-form": "7.54.0",
+    "react-error-boundary": "5.0.0",
+    "react-hook-form": "7.54.2",
     "react-is": "19.0.0",
-    "react-router": "7.0.2",
+    "react-router": "7.1.3",
     "rehype-raw": "7.0.0",
     "rehype-slug": "6.0.0",
     "remark-comment": "1.0.0",
@@ -195,26 +195,26 @@
     "remark-mdx-frontmatter": "5.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.1",
-    "rollup": "4.28.1",
+    "rollup": "4.31.0",
     "semver": "7.6.3",
     "sitemap": "8.0.0",
     "spin-delay": "2.0.1",
     "strip-ansi": "7.1.0",
     "tailwind-merge": "2.6.0",
-    "tailwindcss": "3.4.16",
+    "tailwindcss": "3.4.17",
     "tsx": "^4.19.2",
     "ulidx": "2.4.1",
     "unified": "^11.0.5",
     "unist-util-visit": "5.0.0",
     "urql": "4.2.1",
-    "vaul": "1.1.1",
+    "vaul": "1.1.2",
     "vfile": "6.0.3",
-    "vite": "6.0.3",
-    "yaml": "2.6.1",
+    "vite": "6.0.11",
+    "yaml": "2.7.0",
     "yargs": "17.7.2",
-    "zod": "3.23.8",
+    "zod": "3.24.1",
     "zod-validation-error": "3.4.0",
-    "zustand": "5.0.2"
+    "zustand": "5.0.3"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "5.0.3",
@@ -232,13 +232,13 @@
     "@types/semver": "7.5.8",
     "@types/unist": "^3.0.3",
     "@types/yargs": "17.0.33",
-    "@vitest/coverage-v8": "2.1.8",
+    "@vitest/coverage-v8": "3.0.2",
     "mdast-util-mdx": "3.0.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "rollup-plugin-visualizer": "5.14.0",
-    "typescript": "5.7.2",
-    "vitest": "2.1.8"
+    "typescript": "5.7.3",
+    "vitest": "3.0.2"
   },
   "peerDependencies": {
     "react": ">=19",
@@ -249,7 +249,7 @@
     "@sentry/react": "^8.50.0"
   },
   "scripts": {
-    "build": "tsc --project tsconfig.json",
+    "build": "tsc --project tsconfig.app.json",
     "build:vite": "vite build",
     "generate:icon-types": "tsx ./scripts/generate-icon-types.ts",
     "build:standalone:vite": "vite build --mode standalone --config vite.standalone.config.ts",

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/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/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,
                             )

package/src/lib/components/index.ts

@@ -6,14 +6,14 @@ 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 { Spinner as SpinnerImport } from "./Spinner.js";
-import { Markdown as MarkdownImport } from "./Markdown.js";
 import {
   Bootstrap as BootstrapImport,
   BootstrapStatic as BootstrapStaticImport,
 } from "./Bootstrap.js";
 import { ClientOnly as ClientOnlyImport } from "./ClientOnly.js";
 import { Layout as LayoutImport } from "./Layout.js";
+import { Markdown as MarkdownImport } from "./Markdown.js";
+import { Spinner as SpinnerImport } from "./Spinner.js";
 import { Zudoku as ZudokuImport } from "./Zudoku.js";
 import { useZudoku as useZudokuImport } from "./context/ZudokuContext.js";
 export const useMDXComponents = /*@__PURE__*/ useMDXComponentsImport;

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

@@ -112,10 +112,10 @@ 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",
-          "my-1",
+          "ms-6 my-1",
         )}
       >
-        <ul className={"relative"}>
+        <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={