zudoku 0.0.0-f62edde → 0.0.0-f687ed1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.0.0-f62edde",
+  "version": "0.0.0-f687ed1",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -133,13 +133,13 @@
   },
   "dependencies": {
     "@apidevtools/json-schema-ref-parser": "12.0.2",
-    "@envelop/core": "5.2.3",
+    "@envelop/core": "5.3.0",
     "@graphql-typed-document-node/core": "3.2.0",
     "@hookform/resolvers": "4.1.3",
-    "@lekoarts/rehype-meta-as-attributes": "3.0.2",
+    "@lekoarts/rehype-meta-as-attributes": "3.0.3",
     "@mdx-js/react": "3.1.0",
     "@mdx-js/rollup": "3.1.0",
-    "@pothos/core": "4.6.0",
+    "@pothos/core": "4.7.0",
     "@radix-ui/react-accordion": "1.2.11",
     "@radix-ui/react-alert-dialog": "1.1.14",
     "@radix-ui/react-aspect-ratio": "1.1.7",
@@ -162,18 +162,18 @@
     "@radix-ui/react-toggle-group": "1.1.10",
     "@radix-ui/react-tooltip": "1.2.7",
     "@radix-ui/react-visually-hidden": "1.2.3",
-    "@scalar/openapi-parser": "0.10.17",
+    "@scalar/openapi-parser": "0.18.0",
     "@sentry/node": "9.26.0",
-    "@shikijs/langs": "3.5.0",
-    "@shikijs/rehype": "3.5.0",
-    "@shikijs/themes": "3.5.0",
-    "@shikijs/transformers": "3.5.0",
+    "@shikijs/langs": "3.7.0",
+    "@shikijs/rehype": "3.7.0",
+    "@shikijs/themes": "3.7.0",
+    "@shikijs/transformers": "3.7.0",
     "@sindresorhus/slugify": "2.2.1",
     "@stefanprobst/rehype-extract-toc": "3.0.0",
     "@tailwindcss/typography": "0.5.16",
-    "@tailwindcss/vite": "4.1.7",
+    "@tailwindcss/vite": "4.1.11",
     "@tanem/react-nprogress": "5.0.55",
-    "@tanstack/react-query": "5.74.3",
+    "@tanstack/react-query": "5.81.5",
     "@types/react": "19.1.8",
     "@types/react-dom": "19.1.6",
     "@vitejs/plugin-react": "4.4.1",
@@ -195,7 +195,7 @@
     "glob-parent": "6.0.2",
     "graphql": "16.11.0",
     "graphql-type-json": "0.3.2",
-    "graphql-yoga": "5.13.5",
+    "graphql-yoga": "5.14.0",
     "gray-matter": "4.0.3",
     "hast-util-to-jsx-runtime": "^2.3.6",
     "hast-util-to-string": "3.0.1",
@@ -204,18 +204,19 @@
     "json-schema-to-typescript-lite": "14.1.0",
     "loglevel": "1.9.2",
     "lru-cache": "11.0.2",
-    "lucide-react": "0.488.0",
+    "lucide-react": "0.515.0",
     "minimatch": "10.0.1",
+    "motion": "12.18.1",
     "nanoevents": "^9.1.0",
-    "next-themes": "0.4.4",
+    "next-themes": "0.4.6",
     "oauth4webapi": "2.17.0",
     "object-hash": "3.0.0",
     "openapi-types": "12.1.3",
     "pagefind": "1.4.0-alpha.1",
     "picocolors": "1.1.1",
-    "piscina": "5.0.0",
+    "piscina": "5.1.3",
     "posthog-node": "4.17.1",
-    "react-error-boundary": "5.0.0",
+    "react-error-boundary": "6.0.0",
     "react-hook-form": "7.57.0",
     "react-is": "19.1.0",
     "react-markdown": "10.1.0",
@@ -228,17 +229,17 @@
     "remark-directive-rehype": "0.4.2",
     "remark-frontmatter": "5.0.0",
     "remark-gfm": "4.0.1",
-    "remark-mdx-frontmatter": "5.1.0",
+    "remark-mdx-frontmatter": "5.2.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
-    "rollup": "4.41.1",
-    "semver": "7.7.1",
-    "shiki": "3.5.0",
+    "rollup": "4.44.2",
+    "semver": "7.7.2",
+    "shiki": "3.7.0",
     "sitemap": "8.0.0",
     "spin-delay": "2.0.1",
     "strip-ansi": "7.1.0",
-    "tailwind-merge": "3.3.0",
-    "tailwindcss": "4.1.7",
+    "tailwind-merge": "3.3.1",
+    "tailwindcss": "4.1.11",
     "ulidx": "2.4.1",
     "unified": "^11.0.5",
     "unist-util-visit": "5.0.0",
@@ -246,18 +247,19 @@
     "vfile": "6.0.3",
     "vite": "6.3.5",
     "yaml": "2.8.0",
-    "yargs": "17.7.2",
-    "zod": "3.25.56",
+    "yargs": "18.0.0",
+    "zod": "3.25.74",
     "zod-to-ts": "1.2.0",
     "zustand": "5.0.5"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "5.0.7",
-    "@graphql-codegen/client-preset": "4.8.0",
+    "@graphql-codegen/client-preset": "4.8.2",
+    "@inkeep/cxkit-types": "0.5.90",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.3.0",
-    "@types/estree": "1.0.7",
+    "@types/estree": "1.0.8",
     "@types/express": "5.0.2",
     "@types/glob-parent": "5.1.3",
     "@types/har-format": "1.2.16",
@@ -273,14 +275,14 @@
     "@types/yargs": "17.0.33",
     "@vitest/coverage-v8": "3.2.1",
     "esbuild": "0.25.1",
-    "happy-dom": "17.5.6",
+    "happy-dom": "18.0.1",
     "mdast-util-mdx": "3.0.0",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "rollup-plugin-visualizer": "5.14.0",
+    "rollup-plugin-visualizer": "6.0.3",
     "tsx": "4.19.4",
     "typescript": "5.8.3",
-    "vitest": "3.2.3"
+    "vitest": "3.2.4"
   },
   "peerDependencies": {
     "@azure/msal-browser": "^4.13.0",

package/src/app/demo.tsx

@@ -10,6 +10,10 @@ import "./main.css";
 import { getRoutesByConfig } from "./main.js";
 
 const apiUrl = new URL(window.location.href).searchParams.get("api-url");
+const logoUrl = new URL(window.location.href).searchParams.get("logo-url");
+const logoWidth = new URL(window.location.href).searchParams.get("logo-width");
+const title =
+  new URL(window.location.href).searchParams.get("title") ?? "Zudoku Demo";
 
 if (!apiUrl) {
   throw new Error(
@@ -29,9 +33,9 @@ if (!root) {
 // IMPORTANT: This component must not contain tailwind classes
 // This directory is not processed by the tailwind plugin
 
-const config = {
-  page: {
-    pageTitle: "",
+const config: ZudokuConfig = {
+  site: {
+    title,
     banner: {
       message: <DemoAnnouncement />,
     },
@@ -53,6 +57,19 @@ const config = {
   ],
 } satisfies ZudokuConfig;
 
+if (logoUrl && logoWidth) {
+  config.site = {
+    ...config.site,
+    logo: {
+      src: {
+        light: logoUrl,
+        dark: logoUrl,
+      },
+      width: logoWidth,
+    },
+  };
+}
+
 const routes = getRoutesByConfig(config);
 const router = createBrowserRouter(routes, {
   basename: window.location.pathname,

package/src/app/main.css

@@ -121,6 +121,10 @@
   .shiki {
     counter-reset: line;
     @apply leading-normal;
+    background-color: var(--shiki-light-bg) !important;
+  }
+  .dark .shiki {
+    background-color: var(--shiki-dark-bg) !important;
   }
   .code-block .shiki {
     @apply grid grid-rows-1;
@@ -149,17 +153,34 @@
     @apply tabular-nums inline-flex items-baseline justify-end me-4 w-3 text-muted-foreground/25;
   }
 
-  .shiki.not-inline .line {
+  .light .shiki.not-inline .line {
     @apply block -mx-4 px-4 w-[calc(100%+2rem)];
-    --highlighted-bg: hsl(
-      from var(--muted) h s calc(l + 4 * var(--dark)) / 50%
-    );
+    --highlighted-bg: hsl(from var(--shiki-light-bg) h s calc(l - 6));
   }
+  .dark .shiki.not-inline .line {
+    @apply block -mx-4 px-4 w-[calc(100%+2rem)];
+    --highlighted-bg: hsl(from var(--shiki-dark-bg) h s calc(l + 10));
+  }
+
   .shiki .line.highlighted {
-    @apply bg-(--highlighted-bg);
+    @apply bg-(--highlighted-bg) relative;
+  }
+
+  .shiki .line.highlighted:before {
+    position: absolute;
+    inset-inline-start: 0;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    border-left: 2px solid
+      hsl(from var(--highlighted-bg) h s calc(l + 4 * var(--dark)));
+    content: "";
   }
 
   .shiki .highlighted-word {
+    --highlighted-bg: hsl(
+      from var(--muted) h s calc(l + 4 * var(--dark)) / 50%
+    );
+
     @apply bg-(--highlighted-bg) px-0.5 rounded;
     box-shadow: 0 0 0 4px var(--highlighted-bg);
   }

package/src/app/main.tsx

@@ -36,12 +36,12 @@ export const convertZudokuConfigToOptions = (
     basePath: config.basePath,
     canonicalUrlOrigin: config.canonicalUrlOrigin,
     protectedRoutes: config.protectedRoutes,
-    page: {
-      ...config.page,
+    site: {
+      ...config.site,
       showPoweredBy:
         ZuploEnv.buildConfig?.entitlements.devPortalZuploBranding ??
-        config.page?.showPoweredBy,
-      logo: config.page?.logo,
+        config.site?.showPoweredBy,
+      logo: config.site?.logo,
     },
     slots: config.slots,
     metadata: {
@@ -82,22 +82,13 @@ export const getRoutesByOptions = (
     .flatMap((plugin) => (isNavigationPlugin(plugin) ? plugin.getRoutes() : []))
     .concat(
       enableStatusPages
-        ? [400, 403, 404, 405, 414, 416, 500, 501, 502, 503, 504].map(
-            (statusCode) => ({
-              path: `/${statusCode}`,
-              element: <StatusPage statusCode={statusCode} />,
-            }),
-          )
+        ? [400, 404, 500].map((statusCode) => ({
+            path: `/${statusCode}`,
+            element: <StatusPage statusCode={statusCode} />,
+          }))
         : [],
     )
-    .concat([
-      {
-        path: "*",
-        loader: () => {
-          throw new Response("Not Found", { status: 404 });
-        },
-      },
-    ]);
+    .concat([{ path: "*", element: <StatusPage statusCode={404} /> }]);
 
   // @TODO Detect conflicts in routes and log warning
 
@@ -125,6 +116,7 @@ export const getRoutesByConfig = (config: ZudokuConfig): RouteObject[] => {
           <Layout />
         </Zudoku>
       ),
+      hydrateFallbackElement: <div>Loading...</div>,
       children: [
         {
           element: <RouteGuard />,

package/src/app/standalone.tsx

@@ -13,14 +13,14 @@ if (!root) {
 }
 
 const apiUrl = root.getAttribute("data-api-url");
-const pageTitle = document.getElementsByTagName("title")[0]!.innerText;
+const title = document.getElementsByTagName("title")[0]!.innerText;
 const logoUrl = root.getAttribute("data-logo-url");
 
 // IMPORTANT: This component must not contain tailwind classes
 // This directory is not processed by the tailwind plugin
 
 const config = {
-  page: {
+  site: {
     logo: logoUrl
       ? {
           src: {
@@ -29,7 +29,7 @@ const config = {
           },
         }
       : undefined,
-    pageTitle,
+    title,
   },
   navigation: [
     {

package/src/lib/authentication/authentication.ts

@@ -1,6 +1,6 @@
 export interface AuthenticationPlugin {
-  signUp(options?: { redirectTo?: string }): Promise<void>;
-  signIn(options?: { redirectTo?: string }): Promise<void>;
+  signUp(options?: { redirectTo?: string; replace?: boolean }): Promise<void>;
+  signIn(options?: { redirectTo?: string; replace?: boolean }): Promise<void>;
   signOut(): Promise<void>;
   // @deprecated use signRequest instead
   getAccessToken(): Promise<string>;

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

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
-import { Link, useSearchParams } from "react-router";
-import { Button } from "zudoku/ui/Button.js";
+import { useSearchParams } from "react-router";
+import { Spinner } from "zudoku/components";
 import {
   Card,
   CardContent,
@@ -16,6 +16,7 @@ export const SignIn = () => {
   useEffect(() => {
     void context.authentication?.signIn({
       redirectTo: search.get("redirect") ?? undefined,
+      replace: true,
     });
   }, [context.authentication, search]);
 
@@ -30,16 +31,8 @@ export const SignIn = () => {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <div className="flex flex-col gap-2 justify-center">
-            <Button
-              onClick={() => context.authentication?.signIn()}
-              variant="default"
-            >
-              Login
-            </Button>
-            <Button variant="link" className="text-muted-foreground" asChild>
-              <Link to="/">Go home</Link>
-            </Button>
+          <div className="flex items-center text-sm font-medium gap-2">
+            <Spinner /> Redirecting...
           </div>
         </CardContent>
       </Card>

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

@@ -113,25 +113,41 @@ export class OpenIDAuthenticationProvider
     });
   }
 
-  async signUp({ redirectTo }: { redirectTo?: string } = {}) {
+  async signUp({
+    redirectTo,
+    replace = false,
+  }: {
+    redirectTo?: string;
+    replace?: boolean;
+  } = {}) {
     return this.authorize({
       redirectTo: this.redirectToAfterSignUp ?? redirectTo ?? "/",
+      replace,
       isSignUp: true,
     });
   }
 
-  async signIn({ redirectTo }: { redirectTo?: string } = {}) {
+  async signIn({
+    redirectTo,
+    replace = false,
+  }: {
+    redirectTo?: string;
+    replace?: boolean;
+  } = {}) {
     return this.authorize({
       redirectTo: this.redirectToAfterSignIn ?? redirectTo ?? "/",
+      replace,
     });
   }
 
   private async authorize({
     redirectTo,
     isSignUp = false,
+    replace = false,
   }: {
     redirectTo: string;
     isSignUp?: boolean;
+    replace?: boolean;
   }): Promise<void> {
     const code_challenge_method = "S256";
     const authorizationServer = await this.getAuthServer();
@@ -187,8 +203,11 @@ export class OpenIDAuthenticationProvider
     sessionStorage.setItem(STATE_KEY, state);
     authorizationUrl.searchParams.set("state", state);
 
-    // now redirect the user to authorizationUrl.href
-    location.href = authorizationUrl.href;
+    if (replace) {
+      location.replace(authorizationUrl.href);
+    } else {
+      location.href = authorizationUrl.href;
+    }
   }
 
   async getAccessToken(): Promise<string> {

package/src/lib/components/Autocomplete.tsx

@@ -26,7 +26,7 @@ const AutocompletePopover = ({
   options,
   onChange,
   className,
-  placeholder = "Enter value",
+  placeholder = "Value",
   onEnterPress,
   ref,
 }: AutocompleteProps) => {
@@ -39,6 +39,7 @@ const AutocompletePopover = ({
     <Popover open={open}>
       <PopoverAnchor>
         <CommandInlineInput
+          autoComplete="off"
           ref={(el) => {
             inputRef.current = el;
             if (typeof ref === "function") {

package/src/lib/components/Banner.tsx

@@ -12,7 +12,7 @@ const COLOR_MAP = {
 } as const;
 
 export const Banner = () => {
-  const { page } = useZudoku();
+  const { site: page } = useZudoku();
   const [isBannerOpen, setIsBannerOpen] = useState(true);
 
   if (!page?.banner || !isBannerOpen) {
@@ -34,7 +34,6 @@ export const Banner = () => {
         "relative text-primary-foreground text-sm font-medium px-4 py-2 flex gap-2 items-center lg:h-(--banner-height)",
         mappedColor,
       )}
-      data-pagefind-ignore="all"
       style={style}
     >
       <div className="w-full">{page.banner.message}</div>

package/src/lib/components/CategoryHeading.tsx

@@ -9,7 +9,10 @@ export const CategoryHeading = ({
   className?: string;
 }) => {
   return (
-    <div className={cx("text-sm font-semibold text-primary mb-2", className)}>
+    <div
+      className={cx("text-sm font-semibold text-primary mb-2", className)}
+      data-pagefind-ignore="all"
+    >
       {children}
     </div>
   );

package/src/lib/components/ErrorPage.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import { CategoryHeading } from "./CategoryHeading.js";
 import { Heading } from "./Heading.js";
-import { ProseClasses } from "./Markdown.js";
+import { Typography } from "./Typography.js";
 
 export const ErrorPage = ({
   title = "An error occurred",
@@ -13,7 +13,7 @@ export const ErrorPage = ({
   category?: ReactNode;
 }) => {
   return (
-    <div className={ProseClasses + " h-full pt-(--padding-content-top)"}>
+    <Typography className={"h-full pt-(--padding-content-top)"}>
       {category && <CategoryHeading>{category}</CategoryHeading>}
       {title && (
         <Heading level={1} className="flex gap-3.5 items-center">
@@ -21,6 +21,6 @@ export const ErrorPage = ({
         </Heading>
       )}
       <p>{message}</p>
-    </div>
+    </Typography>
   );
 };

package/src/lib/components/Footer.tsx

@@ -26,7 +26,7 @@ const SocialIcon = ({
 const isExternalUrl = (href: string) => /^https?:/.test(href);
 
 export const Footer = () => {
-  const { page } = useZudoku();
+  const { site: page } = useZudoku();
   const footer = page?.footer;
 
   if (!footer) return null;

package/src/lib/components/Header.tsx

@@ -60,56 +60,57 @@ export const Header = memo(function HeaderInner() {
   const auth = useAuth();
   const { isAuthenticated, profile, isAuthEnabled } = useAuth();
   const context = useZudoku();
-  const { page, plugins, options } = context;
+  const { site, plugins, options } = context;
 
   const accountItems = plugins
     .filter((p) => isProfileMenuPlugin(p))
     .flatMap((p) => p.getProfileMenuItems(context))
     .sort((i) => i.weight ?? 0);
 
-  const logoLightSrc = page?.logo
-    ? /https?:\/\//.test(page.logo.src.light)
-      ? page.logo.src.light
-      : joinUrl(options.basePath, page.logo.src.light)
+  const logoLightSrc = site?.logo
+    ? /https?:\/\//.test(site.logo.src.light)
+      ? site.logo.src.light
+      : joinUrl(options.basePath, site.logo.src.light)
     : undefined;
-  const logoDarkSrc = page?.logo
-    ? /https?:\/\//.test(page.logo.src.dark)
-      ? page.logo.src.dark
-      : joinUrl(options.basePath, page.logo.src.dark)
+  const logoDarkSrc = site?.logo
+    ? /https?:\/\//.test(site.logo.src.dark)
+      ? site.logo.src.dark
+      : joinUrl(options.basePath, site.logo.src.dark)
     : undefined;
 
   const borderBottom = "inset-shadow-[0_-1px_0_0_var(--border)]";
 
   return (
-    <header className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full">
+    <header
+      className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full"
+      data-pagefind-ignore="all"
+    >
       <Banner />
       <div className={cn(borderBottom, "relative")}>
         <PageProgress />
         <div className="max-w-screen-2xl mx-auto flex items-center justify-between h-(--top-header-height) px-4 lg:px-8 border-transparent">
           <div className="flex">
-            <Link to="/">
+            <Link to={site?.logo?.href ?? "/"}>
               <div className="flex items-center gap-3.5">
-                {page?.logo && (
+                {site?.logo && (
                   <>
                     <img
                       src={logoLightSrc}
-                      alt={page.logo.alt ?? page.pageTitle}
-                      style={{ width: page.logo.width }}
+                      alt={site.logo.alt ?? site.title}
+                      style={{ width: site.logo.width }}
                       className="max-h-(--top-header-height) dark:hidden"
                       loading="lazy"
                     />
                     <img
                       src={logoDarkSrc}
-                      alt={page.logo.alt ?? page.pageTitle}
-                      style={{ width: page.logo.width }}
+                      alt={site.logo.alt ?? site.title}
+                      style={{ width: site.logo.width }}
                       className="max-h-(--top-header-height) hidden dark:block"
                       loading="lazy"
                     />
                   </>
                 )}
-                <span className="font-semibold text-2xl">
-                  {page?.pageTitle}
-                </span>
+                <span className="font-semibold text-2xl">{site?.title}</span>
               </div>
             </Link>
           </div>

package/src/lib/components/Main.tsx

@@ -16,7 +16,7 @@ export const Main = ({ children }: PropsWithChildren) => {
 
   return (
     <Drawer
-      direction={options.page?.dir === "rtl" ? "right" : "left"}
+      direction={options.site?.dir === "rtl" ? "right" : "left"}
       open={isDrawerOpen}
       onOpenChange={(open) => setDrawerOpen(open)}
     >

package/src/lib/components/Markdown.tsx

@@ -5,12 +5,10 @@ import remarkGfm from "remark-gfm";
 import { createConfiguredShikiRehypePlugins } from "../shiki.js";
 import { MdxComponents } from "../util/MdxComponents.js";
 import { useZudoku } from "./context/ZudokuContext.js";
+import { Typography } from "./Typography.js";
 
 const remarkPlugins = [remarkGfm];
 
-// other styles are defined in main.css .prose
-export const ProseClasses = "prose dark:prose-invert prose-neutral";
-
 export const Markdown = memo(
   ({
     content,
@@ -36,7 +34,7 @@ export const Markdown = memo(
     );
 
     return (
-      <div className={className}>
+      <Typography className={className}>
         <MarkdownHooks
           remarkPlugins={remarkPlugins}
           rehypePlugins={rehypePlugins}
@@ -44,7 +42,7 @@ export const Markdown = memo(
         >
           {content}
         </MarkdownHooks>
-      </div>
+      </Typography>
     );
   },
 );