zudoku 0.0.0-fb7d300 → 0.0.0-fc93837

package/src/app/tailwind.ts

@@ -1,68 +1,83 @@
 import typographyPlugin from "@tailwindcss/typography";
 import type { Config } from "tailwindcss";
 import defaultTheme from "tailwindcss/defaultTheme.js";
+import type { LoadedConfig } from "../config/config.js";
 
 const content = [
   "./src/**/*.{js,ts,jsx,tsx,md,mdx}",
   "./node_modules/zudoku/dist/**/*.{js,ts,jsx,tsx,md,mdx}",
 ];
 
-const config: Omit<Config, "content"> = {
-  darkMode: "selector",
-  content,
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: [
-          ["Geist", ...defaultTheme.fontFamily.sans],
-          { fontFeatureSettings: '"rlig" 1, "calt" 0' },
-        ],
-      },
-      typography: () => ({
-        DEFAULT: {
-          css: {
-            blockquote: { quotes: "none" },
-          },
-        },
-      }),
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+const config = (zudokuConfig?: LoadedConfig): Omit<Config, "content"> => {
+  const sans = zudokuConfig?.theme?.fonts?.sans
+    ? ([
+        zudokuConfig.theme.fonts.sans.fontFamily,
+        ...defaultTheme.fontFamily.sans,
+      ] as const)
+    : ([
+        ["Geist", ...defaultTheme.fontFamily.sans],
+        { fontFeatureSettings: '"rlig" 1, "calt" 0' },
+      ] as const);
+
+  const mono = zudokuConfig?.theme?.fonts?.mono
+    ? zudokuConfig.theme.fonts.mono.fontFamily
+    : defaultTheme.fontFamily.mono;
+
+  return {
+    darkMode: "selector",
+    content,
+    theme: {
+      extend: {
+        fontFamily: {
+          sans,
+          mono,
         },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
+        typography: () => ({
+          DEFAULT: {
+            css: {
+              blockquote: { quotes: "none" },
+            },
+          },
+        }),
+        colors: {
+          border: "hsl(var(--border))",
+          input: "hsl(var(--input))",
+          ring: "hsl(var(--ring))",
+          background: "hsl(var(--background))",
+          foreground: "hsl(var(--foreground))",
+          primary: {
+            DEFAULT: "hsl(var(--primary))",
+            foreground: "hsl(var(--primary-foreground))",
+          },
+          secondary: {
+            DEFAULT: "hsl(var(--secondary))",
+            foreground: "hsl(var(--secondary-foreground))",
+          },
+          destructive: {
+            DEFAULT: "hsl(var(--destructive))",
+            foreground: "hsl(var(--destructive-foreground))",
+          },
+          muted: {
+            DEFAULT: "hsl(var(--muted))",
+            foreground: "hsl(var(--muted-foreground))",
+          },
+          accent: {
+            DEFAULT: "hsl(var(--accent))",
+            foreground: "hsl(var(--accent-foreground))",
+          },
+          popover: {
+            DEFAULT: "hsl(var(--popover))",
+            foreground: "hsl(var(--popover-foreground))",
+          },
+          card: {
+            DEFAULT: "hsl(var(--card))",
+            foreground: "hsl(var(--card-foreground))",
+          },
         },
       },
     },
-  },
-  plugins: [typographyPlugin],
+    plugins: [typographyPlugin],
+  };
 };
 
 export default config;

package/src/lib/authentication/components/CallbackHandler.tsx

@@ -1,5 +1,5 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
-import { Navigate } from "react-router-dom";
+import { Navigate } from "react-router";
 import { ZudokuError } from "../../util/invariant.js";
 
 export function CallbackHandler({

package/src/lib/authentication/components/SignIn.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useSearchParams } from "react-router";
 import { useZudoku } from "../../components/context/ZudokuContext.js";
 
 export const SignIn = () => {

package/src/lib/authentication/components/SignOut.tsx

@@ -1,13 +1,14 @@
 import { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { useZudoku } from "../../components/context/ZudokuContext.js";
 
 export const SignOut = () => {
   const context = useZudoku();
   const navigate = useNavigate();
+
   useEffect(() => {
     void context.authentication?.signOut().then(() => navigate("/"));
-  }, [navigate, context.authentication]);
+  }, []);
 
   return null;
 };

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/clerk.tsx

@@ -16,14 +16,19 @@ class ClerkAuthPlugin extends AuthenticationPlugin {
     }
 
     if (clerk.session) {
+      const verifiedEmail = clerk.session.user.emailAddresses.find(
+        (email) => email.verification.status === "verified",
+      );
       useAuthState.setState({
         isAuthenticated: true,
         isPending: false,
         profile: {
           sub: clerk.session.user.id,
           name: clerk.session.user.fullName ?? undefined,
-          email: clerk.session.user.emailAddresses[0]?.emailAddress,
-          emailVerified: false, // TODO: Check this
+          email:
+            verifiedEmail?.emailAddress ??
+            clerk.session.user.emailAddresses[0]?.emailAddress,
+          emailVerified: verifiedEmail !== undefined,
           pictureUrl: clerk.session.user.imageUrl,
         },
       });
@@ -45,19 +50,39 @@ const clerkAuth: AuthenticationProviderInitializer<
   redirectToAfterSignUp = "/",
   redirectToAfterSignIn = "/",
 }) => {
-  let clerkApi: Clerk;
+  let clerkApi: Clerk | undefined;
   const ensureLoaded = (async () => {
     if (typeof window === "undefined") return;
     const { Clerk } = await import("@clerk/clerk-js");
     clerkApi = new Clerk(clerkPubKey);
 
     await clerkApi.load();
+
+    if (clerkApi.user) {
+      const verifiedEmail = clerkApi.user.emailAddresses.find(
+        (email) => email.verification.status === "verified",
+      );
+      useAuthState.setState({
+        isAuthenticated: true,
+        isPending: false,
+        profile: {
+          sub: clerkApi.user.id,
+          name: clerkApi.user.fullName ?? undefined,
+          email:
+            verifiedEmail?.emailAddress ??
+            clerkApi.user.emailAddresses[0]?.emailAddress,
+          emailVerified: verifiedEmail !== undefined,
+          pictureUrl: clerkApi.user.imageUrl,
+        },
+      });
+    }
+
     return clerkApi;
   })();
 
   async function getAccessToken() {
     await ensureLoaded;
-    if (!clerkApi.session) {
+    if (!clerkApi?.session) {
       throw new Error("No session available");
     }
     const response = await clerkApi.session.getToken();
@@ -71,20 +96,26 @@ const clerkAuth: AuthenticationProviderInitializer<
     getAccessToken,
     signOut: async () => {
       await ensureLoaded;
-      await clerkApi.signOut({
+      await clerkApi?.signOut({
         redirectUrl: window.location.origin + redirectToAfterSignOut,
       });
+      useAuthState.setState({
+        isAuthenticated: false,
+        isPending: false,
+        profile: null,
+        providerData: null,
+      });
     },
     signIn: async () => {
       await ensureLoaded;
-      await clerkApi.redirectToSignIn({
+      await clerkApi?.redirectToSignIn({
         signInForceRedirectUrl: window.location.origin + redirectToAfterSignIn,
         signUpForceRedirectUrl: window.location.origin + redirectToAfterSignUp,
       });
     },
     signUp: async () => {
       await ensureLoaded;
-      await clerkApi.redirectToSignUp({
+      await clerkApi?.redirectToSignUp({
         signInForceRedirectUrl: window.location.origin + redirectToAfterSignIn,
         signUpForceRedirectUrl: window.location.origin + redirectToAfterSignUp,
       });

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

@@ -1,6 +1,8 @@
 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,
@@ -12,8 +14,9 @@ import { useAuthState, UserProfile } from "../state.js";
 
 const CODE_VERIFIER_KEY = "code-verifier";
 
-interface TokenState {
+export interface OpenIdProviderData {
   accessToken: string;
+  idToken?: string;
   refreshToken?: string;
   expiresOn: Date;
   tokenType: string;
@@ -31,7 +34,11 @@ class OpenIdAuthPlugin extends AuthenticationPlugin {
       ...super.getRoutes(),
       {
         path: this.callbackUrlPath,
-        element: <CallbackHandler handleCallback={this.handleCallback} />,
+        element: (
+          <ClientOnly>
+            <CallbackHandler handleCallback={this.handleCallback} />
+          </ClientOnly>
+        ),
       },
     ];
   }
@@ -43,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 },
@@ -61,6 +68,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     redirectToAfterSignUp,
     redirectToAfterSignIn,
     redirectToAfterSignOut,
+    basePath,
   }: OpenIDAuthenticationConfig) {
     this.client = {
       client_id: clientId,
@@ -68,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() {
@@ -101,9 +114,10 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       throw new AuthorizationError("No expires_in in response");
     }
 
-    const tokens: TokenState = {
+    const tokens: OpenIdProviderData = {
       accessToken: response.access_token,
       refreshToken: response.refresh_token,
+      idToken: response.id_token,
       expiresOn: new Date(Date.now() + response.expires_in * 1000),
       tokenType: response.token_type,
     };
@@ -201,11 +215,16 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     if (!providerData) {
       throw new AuthorizationError("User is not authenticated");
     }
-    const tokenState = providerData as TokenState;
+    const tokenState = providerData as OpenIdProviderData;
 
-    if (tokenState.expiresOn < new Date()) {
+    if (new Date(tokenState.expiresOn) < new Date()) {
       if (!tokenState.refreshToken) {
-        await this.signIn();
+        useAuthState.setState({
+          isAuthenticated: false,
+          isPending: false,
+          profile: null,
+          providerData: null,
+        });
         return "";
       }
 
@@ -295,7 +314,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     }
 
     const redirectUrl = new URL(url);
-    redirectUrl.pathname = this.redirectToAfterSignIn;
+    redirectUrl.pathname = this.callbackUrlPath;
     redirectUrl.search = "";
 
     const response = await oauth.authorizationCodeGrantRequest(

package/src/lib/components/AnchorLink.tsx

@@ -1,19 +1,22 @@
 import React from "react";
-import { Link, type LinkProps, useLocation } from "react-router-dom";
+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/Bootstrap.tsx

@@ -5,12 +5,13 @@ import {
 } from "@tanstack/react-query";
 import { type HelmetData, HelmetProvider } from "@zudoku/react-helmet-async";
 import { StrictMode } from "react";
-import { type createBrowserRouter, RouterProvider } from "react-router-dom";
 import {
+  type createBrowserRouter,
   type createStaticRouter,
   type StaticHandlerContext,
   StaticRouterProvider,
-} from "react-router-dom/server.js";
+} from "react-router";
+import { RouterProvider } from "react-router/dom";
 import { StaggeredRenderContext } from "../plugins/openapi/StaggeredRender.js";
 
 const queryClient = new QueryClient({
@@ -33,10 +34,7 @@ const Bootstrap = ({
       <HydrationBoundary state={hydrate ? (window as any).DATA : undefined}>
         <HelmetProvider>
           <StaggeredRenderContext.Provider value={{ stagger: !hydrate }}>
-            <RouterProvider
-              router={router}
-              future={{ v7_startTransition: true }}
-            />
+            <RouterProvider router={router} />
           </StaggeredRenderContext.Provider>
         </HelmetProvider>
       </HydrationBoundary>

package/src/lib/components/Header.tsx

@@ -1,5 +1,5 @@
 import { memo } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Button } from "zudoku/ui/Button.js";
 import { Skeleton } from "zudoku/ui/Skeleton.js";
 import { useAuth } from "../authentication/hook.js";
@@ -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";
@@ -65,8 +65,8 @@ export const Header = memo(function HeaderInner() {
   return (
     <header className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full">
       <Banner />
-      <div className="max-w-screen-2xl mx-auto">
-        <div className="grid grid-cols-2 lg:grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b px-10 lg:px-12 h-[--top-header-height]">
+      <div className="border-b">
+        <div className="max-w-screen-2xl border-l border-r mx-auto grid grid-cols-[1fr_auto] lg:grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center px-4 lg:px-12 h-[--top-header-height]">
           <div className="flex">
             <Link to="/">
               <div className="flex items-center gap-3.5">
@@ -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,14 +171,18 @@ export const Header = memo(function HeaderInner() {
                   )}
                 </ClientOnly>
               )}
-              <ThemeSwitch />
               <Slotlet name="head-navigation-end" />
+              <ThemeSwitch />
             </div>
           </div>
         </div>
-        <Slotlet name="top-navigation-before" />
-        <TopNavigation />
-        <Slotlet name="top-navigation-after" />
+      </div>
+      <div className="border-b">
+        <div className="max-w-screen-2xl mx-auto border-l border-r">
+          <Slotlet name="top-navigation-before" />
+          <TopNavigation />
+          <Slotlet name="top-navigation-after" />
+        </div>
       </div>
     </header>
   );

package/src/lib/components/Heading.tsx

@@ -38,23 +38,22 @@ const getComponent = (level: number) => {
   }
 };
 
-export interface HeadingProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof heading> {
-  children: ReactNode;
-  className?: string;
-  id?: string;
-  level?: 1 | 2 | 3 | 4 | 5 | 6;
-  registerSidebarAnchor?: boolean;
-}
+export type HeadingProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof heading> & {
+    children: ReactNode;
+    className?: string;
+    id?: string;
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    registerSidebarAnchor?: boolean;
+  };
 
-export const Heading: React.FC<HeadingProps> = ({
+export const Heading = ({
   level,
   children,
   id,
   className,
   registerSidebarAnchor,
-}) => {
+}: HeadingProps) => {
   const Component = getComponent(level ?? 1);
   const { ref } = useRegisterAnchorElement();
 
@@ -67,10 +66,11 @@ export const Heading: React.FC<HeadingProps> = ({
       {id && (
         <a
           href={`#${id}`}
-          className="no-underline absolute text-primary -left-[0.8em] pr-2.5 opacity-0 group-hover:opacity-50 hover:!opacity-100 transition-opacity duration-200"
+          className="before:content-['#'] no-underline absolute text-primary -left-[0.8em] pr-2.5 opacity-0 group-hover:opacity-50 hover:!opacity-100 transition-opacity duration-200"
           aria-label={`Link to ${id}`}
         >
-          #
+          {/* Zero width space */}
+          &#8203;
         </a>
       )}
       {children}