zudoku 0.0.0-reset-hash-value.ac516c6d → 0.0.0-z179c4f85

package/src/lib/components/Mermaid.tsx

@@ -0,0 +1,68 @@
+import { useQuery } from "@tanstack/react-query";
+import type { MermaidConfig } from "mermaid";
+import type { ComponentProps } from "react";
+import { useId } from "react";
+import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert.js";
+import { useTheme } from "../hooks/index.js";
+import { Spinner } from "./Spinner.js";
+
+export type MermaidProps = {
+  chart: string;
+  config?: MermaidConfig;
+} & ComponentProps<"div">;
+
+let mermaidPromise: Promise<typeof import("mermaid").default> | null = null;
+
+const loadMermaid = () => {
+  if (!mermaidPromise) {
+    mermaidPromise = import("mermaid")
+      .then((mod) => mod.default)
+      .catch((error) => {
+        throw new Error(
+          "Mermaid is not installed. Please install it with: npm install mermaid",
+          { cause: error },
+        );
+      });
+  }
+  return mermaidPromise;
+};
+
+export const Mermaid = ({ chart, config, ...props }: MermaidProps) => {
+  const id = useId();
+  const theme = useTheme();
+
+  const {
+    data: svg,
+    error,
+    isPending,
+  } = useQuery({
+    queryKey: ["mermaid", chart, config, theme.resolvedTheme],
+    queryFn: async () => {
+      const mermaid = await loadMermaid();
+      mermaid.initialize({
+        theme: theme.resolvedTheme === "dark" ? "dark" : "base",
+        ...config,
+      });
+
+      const { svg } = await mermaid.render(id, chart);
+      return svg;
+    },
+    enabled: typeof window !== "undefined",
+    retry: false,
+  });
+
+  if (error)
+    return (
+      <Alert className="flex flex-col gap-2" variant="destructive">
+        <AlertTitle>Mermaid Error</AlertTitle>
+        <AlertDescription className="overflow-auto wrap-break-word whitespace-pre-wrap font-mono text-xs">
+          {error.message}
+        </AlertDescription>
+      </Alert>
+    );
+
+  if (isPending) return <Spinner />;
+
+  // biome-ignore lint/security/noDangerouslySetInnerHtml: Mermaid generates valid SVG
+  return <div {...props} dangerouslySetInnerHTML={{ __html: svg }} />;
+};

package/src/lib/components/PagefindSearchMeta.tsx

@@ -0,0 +1,14 @@
+import type { PropsWithChildren } from "react";
+
+/**
+ * Adds metadata to be captured by Pagefind for search results.
+ * Content is visually hidden but indexed by the search engine.
+ */
+export const PagefindSearchMeta = ({
+  name,
+  children,
+}: PropsWithChildren<{ name?: string }>) => (
+  <span data-pagefind-meta={name} className="sr-only">
+    {children}
+  </span>
+);

package/src/lib/components/Pagination.tsx

@@ -13,19 +13,18 @@ export const Pagination = ({
   className?: string;
 }) => {
   const linkClass =
-    "group transition-all p-5 space-x-1 rtl:space-x-reverse transition-all hover:text-foreground";
-
+    "group min-w-0 transition-all p-5 space-x-1 rtl:space-x-reverse hover:text-foreground";
   return (
     <div
       className={cn(
-        "flex -mx-4 text-muted-foreground font-semibold",
+        "flex flex-wrap gap-2 -mx-4 text-muted-foreground font-semibold",
         prev ? "justify-between" : "justify-end",
         className,
       )}
       data-pagefind-ignore="all"
     >
       {prev && (
-        <Button variant="ghost" asChild>
+        <Button variant="ghost" className="min-w-0 max-w-full" asChild>
           <Link to={prev.to} relative="path" className={linkClass}>
             <ArrowLeftIcon size={14} strokeWidth={2.5} />
             <span className="text-lg truncate">{prev.label}</span>
@@ -33,7 +32,7 @@ export const Pagination = ({
         </Button>
       )}
       {next && (
-        <Button variant="ghost" asChild>
+        <Button variant="ghost" className="ms-auto min-w-0 max-w-full" asChild>
           <Link to={next.to} relative="path" className={linkClass}>
             <span className="text-lg truncate">{next.label}</span>
             <ArrowRightIcon size={14} strokeWidth={2.5} />

package/src/lib/components/Zudoku.tsx

@@ -32,7 +32,7 @@ import { ZudokuProvider } from "./context/ZudokuProvider.js";
 
 let zudokuContext: ZudokuContext | undefined;
 
-const ZudokoInner = memo(
+const ZudokuInner = memo(
   ({ children, ...props }: PropsWithChildren<ZudokuContextOptions>) => {
     const components = useMemo(
       () => ({ ...DEFAULT_COMPONENTS, ...props.overrides }),
@@ -74,16 +74,13 @@ const ZudokoInner = memo(
 
     zudokuContext ??= new ZudokuContext(props, queryClient);
 
-    const heads = props.plugins
-      ?.flatMap((plugin) =>
-        hasHead(plugin) ? (plugin.getHead?.({ location }) ?? []) : [],
-      )
-      // biome-ignore lint/suspicious/noArrayIndexKey: No other key is available
-      .map((entry, i) => <Helmet key={i}>{entry}</Helmet>);
+    const heads = props.plugins?.flatMap((plugin) =>
+      hasHead(plugin) ? (plugin.getHead?.({ location }) ?? []) : [],
+    );
 
     return (
       <>
-        {heads}
+        <Helmet>{heads}</Helmet>
         <StaggeredRenderContext.Provider value={staggeredValue}>
           <ZudokuProvider context={zudokuContext}>
             <RouterEventsEmitter />
@@ -105,12 +102,12 @@ const ZudokoInner = memo(
   },
 );
 
-ZudokoInner.displayName = "ZudokoInner";
+ZudokuInner.displayName = "ZudokuInner";
 
 const Zudoku = (props: ZudokuContextOptions) => {
   return (
     <ErrorBoundary FallbackComponent={TopLevelError}>
-      <ZudokoInner {...props} />
+      <ZudokuInner {...props} />
     </ErrorBoundary>
   );
 };

package/src/lib/components/index.ts

@@ -5,12 +5,14 @@ import { Link as LinkImport } from "react-router";
 import { useAuth as useAuthImport } from "../authentication/hook.js";
 import { Button as ButtonImport } from "../ui/Button.js";
 import { Callout as CalloutImport } from "../ui/Callout.js";
+import { ZudokuError as ZudokuErrorImport } from "../util/invariant.js";
 import { ClientOnly as ClientOnlyImport } from "./ClientOnly.js";
 import {
   CACHE_KEYS as CACHE_KEYS_IMPORT,
   useCache as useCacheImport,
 } from "./cache.js";
 import { useZudoku as useZudokuImport } from "./context/ZudokuContext.js";
+import { Heading as HeadingImport } from "./Heading.js";
 import { Markdown as MarkdownImport } from "./Markdown.js";
 import { Slot as SlotImport } from "./Slot.js";
 import { Spinner as SpinnerImport } from "./Spinner.js";
@@ -18,6 +20,7 @@ import { Typography as TypographyImport } from "./Typography.js";
 import { Zudoku as ZudokuImport } from "./Zudoku.js";
 
 export const Head = /*@__PURE__*/ Helmet;
+export const Heading = /*@__PURE__*/ HeadingImport;
 export const Callout = /*@__PURE__*/ CalloutImport;
 export const Markdown = /*@__PURE__*/ MarkdownImport;
 export const Spinner = /*@__PURE__*/ SpinnerImport;
@@ -27,6 +30,7 @@ export const Link = /*@__PURE__*/ LinkImport;
 export const Zudoku = /*@__PURE__*/ ZudokuImport;
 export const Typography = /*@__PURE__*/ TypographyImport;
 export const Slot = /*@__PURE__*/ SlotImport;
+export const ZudokuError = /*@__PURE__*/ ZudokuErrorImport;
 
 /** @deprecated Import from `zudoku/hooks` instead */
 export const useMDXComponents = /*@__PURE__*/ useMDXComponentsImport;

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

@@ -1,13 +1,7 @@
 import { ExternalLinkIcon } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { NavLink, useLocation } from "react-router";
-import {
-  Tooltip,
-  TooltipArrow,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "zudoku/ui/Tooltip.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "zudoku/ui/Tooltip.js";
 import type { NavigationItem as NavigationItemType } from "../../../config/validators/NavigationSchema.js";
 import { useAuth } from "../../authentication/hook.js";
 import { cn } from "../../util/cn.js";
@@ -47,19 +41,12 @@ const TruncatedLabel = ({
         {label}
       </span>
       {isTruncated && (
-        <TooltipProvider delayDuration={500}>
-          <Tooltip disableHoverableContent>
-            <TooltipTrigger className="absolute inset-0 z-10" />
-            <TooltipContent
-              className="max-w-64 rounded-lg"
-              side="bottom"
-              align="center"
-            >
-              <TooltipArrow />
-              {label}
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
+        <Tooltip disableHoverableContent>
+          <TooltipTrigger className="absolute inset-0 z-10" />
+          <TooltipContent className="max-w-64" side="bottom" align="center">
+            {label}
+          </TooltipContent>
+        </Tooltip>
       )}
     </>
   );
@@ -99,7 +86,9 @@ export const NavigationItem = ({
           onClick={onRequestClose}
           end
         >
-          {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
+          {item.icon && (
+            <item.icon size={16} className="align-[-0.125em] shrink-0" />
+          )}
           {item.badge ? (
             <>
               {item.label && (
@@ -130,7 +119,9 @@ export const NavigationItem = ({
           })}
           onClick={onRequestClose}
         >
-          {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
+          {item.icon && (
+            <item.icon size={16} className="align-[-0.125em] shrink-0" />
+          )}
           {item.badge ? (
             <>
               {item.label && <TruncatedLabel label={item.label} />}
@@ -148,7 +139,9 @@ export const NavigationItem = ({
           rel="noopener noreferrer"
           onClick={onRequestClose}
         >
-          {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
+          {item.icon && (
+            <item.icon size={16} className="align-[-0.125em] shrink-0" />
+          )}
           <span className="whitespace-normal">{item.label}</span>
           {/* This prevents that the icon would be positioned in its own line if the text fills a line entirely */}
           <span className="whitespace-nowrap">

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

@@ -85,11 +85,11 @@ export const Toc = ({ entries }: { entries: TocEntry[] }) => {
         <ListTreeIcon size={16} />
         On this page
       </div>
-      <div className="relative ms-2 ps-4">
-        <div className="absolute inset-0 end-auto bg-border w-[2px]" />
+      <div className="relative ms-px ps-4">
+        <div className="absolute inset-0 end-auto bg-border w-[1.5px]" />
         <div
           className={cn(
-            "absolute -start-px -translate-y-1 h-6 w-[4px] rounded-sm bg-primary",
+            "absolute start-0 -translate-y-1 h-6 w-[2.5px] bg-primary",
             paintedOnce.current &&
               "ease-out [transition:top_150ms,opacity_325ms]",
           )}

package/src/lib/core/RouteGuard.tsx

@@ -1,11 +1,12 @@
-import { useQuery } from "@tanstack/react-query";
 import { Helmet } from "@zudoku/react-helmet-async";
 import { use } from "react";
 import { matchPath, Outlet, useLocation, useNavigate } from "react-router";
+import { Button } from "zudoku/ui/Button.js";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from "zudoku/ui/Dialog.js";
@@ -26,28 +27,47 @@ export const RouteGuard = () => {
   const shouldBypass = use(BypassProtectedRoutesContext);
   const { protectedRoutes } = zudoku.options;
 
-  const authCheckFn =
-    !shouldBypass && protectedRoutes
-      ? Object.entries(protectedRoutes).find(([path]) =>
-          matchPath({ path, end: true }, location.pathname),
-        )?.[1]
-      : undefined;
+  const protectedRouteEntry = protectedRoutes
+    ? Object.entries(protectedRoutes).find(([path]) =>
+        matchPath({ path, end: true }, location.pathname),
+      )
+    : undefined;
 
-  const isProtectedRoute = authCheckFn !== undefined;
+  const isProtectedRoute = protectedRouteEntry !== undefined;
+
+  // SSR/prerendering mode: render content with search meta tag, skip all auth
+  if (shouldBypass) {
+    return (
+      <>
+        {isProtectedRoute && (
+          <Helmet>
+            <meta
+              name="pagefind"
+              data-pagefind-filter={`section:${SEARCH_PROTECTED_SECTION}`}
+              content="true"
+            />
+          </Helmet>
+        )}
+        <Outlet />
+      </>
+    );
+  }
+
+  if (isProtectedRoute && !auth.isAuthEnabled) {
+    throw new ZudokuError("Authentication is not enabled", {
+      title: "Authentication is not enabled",
+      developerHint:
+        "To use protectedRoutes you need authentication to be enabled",
+    });
+  }
+
+  const authCheckFn = protectedRouteEntry?.[1];
   const needsToSignIn =
-    isProtectedRoute && !authCheckFn({ auth, context: zudoku });
+    isProtectedRoute && !authCheckFn?.({ auth, context: zudoku });
 
-  useQuery({
-    queryKey: ["login-redirect"],
-    queryFn: async () => {
-      await new Promise((resolve) => setTimeout(resolve, 1200));
-      await zudoku.authentication?.signIn({
-        redirectTo: latestPath.current,
-      });
-      return true;
-    },
-    enabled: typeof window !== "undefined" && needsToSignIn && !auth.isPending,
-  });
+  if (needsToSignIn && auth.isPending && typeof window !== "undefined") {
+    return null;
+  }
 
   if (needsToSignIn) {
     return (
@@ -61,36 +81,42 @@ export const RouteGuard = () => {
       >
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>Logging you in...</DialogTitle>
+            <DialogTitle>Login to continue</DialogTitle>
           </DialogHeader>
           <DialogDescription>
             Please wait while we log you in.
           </DialogDescription>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => void navigate(-1)}>
+              Cancel
+            </Button>
+            <div className="w-full"></div>
+            <Button
+              variant="secondary"
+              onClick={() =>
+                void zudoku.authentication?.signUp(
+                  { navigate },
+                  { redirectTo: latestPath.current },
+                )
+              }
+            >
+              Register
+            </Button>
+            <Button
+              onClick={() =>
+                void zudoku.authentication?.signIn(
+                  { navigate },
+                  { redirectTo: latestPath.current },
+                )
+              }
+            >
+              Login
+            </Button>
+          </DialogFooter>
         </DialogContent>
       </Dialog>
     );
   }
 
-  if (isProtectedRoute && !auth.isAuthEnabled) {
-    throw new ZudokuError("Authentication is not enabled", {
-      title: "Authentication is not enabled",
-      developerHint:
-        "To use protectedRoutes you need authentication to be enabled",
-    });
-  }
-
-  return (
-    <>
-      {shouldBypass && (
-        <Helmet>
-          <meta
-            name="pagefind"
-            data-pagefind-filter={`section:${SEARCH_PROTECTED_SECTION}`}
-            content="true"
-          />
-        </Helmet>
-      )}
-      <Outlet />
-    </>
-  );
+  return <Outlet />;
 };

package/src/lib/core/ZudokuContext.ts

@@ -129,6 +129,7 @@ export class ZudokuContext {
   public meta: ZudokuContextOptions["metadata"];
   public site: ZudokuContextOptions["site"];
   public readonly authentication?: ZudokuContextOptions["authentication"];
+  public readonly getAuthState: () => AuthState;
   public readonly queryClient: QueryClient;
   public readonly options: ZudokuContextOptions;
   private readonly navigationPlugins: NavigationPlugin[];
@@ -156,6 +157,8 @@ export class ZudokuContext {
     this.navigation = options.navigation ?? [];
     this.navigationPlugins = this.plugins.filter(isNavigationPlugin);
     this.authentication = this.plugins.find(isAuthenticationPlugin);
+    this.getAuthState = useAuthState.getState;
+
     this.meta = options.metadata;
     this.site = options.site;
     this.plugins.forEach((plugin) => {

package/src/lib/core/plugins.ts

@@ -1,5 +1,5 @@
 import type { LucideIcon } from "lucide-react";
-import type { ReactElement } from "react";
+import type { ReactNode } from "react";
 import type { Location, RouteObject } from "react-router";
 import type { Navigation } from "../../config/validators/NavigationSchema.js";
 import type { ProtectedRoutesInput } from "../../config/validators/ProtectedRoutesSchema.js";
@@ -64,7 +64,7 @@ export interface CommonPlugin {
   initialize?: (
     context: ZudokuContext,
   ) => Promise<void | boolean> | void | boolean;
-  getHead?: ({ location }: { location: Location }) => ReactElement | undefined;
+  getHead?: (args: { location: Location }) => ReactNode | undefined;
   getMdxComponents?: () => MdxComponentsType;
 }
 

package/src/lib/core/react-query.ts

@@ -0,0 +1 @@
+export * from "@tanstack/react-query";

package/src/lib/errors/ErrorAlert.tsx

@@ -17,7 +17,7 @@ export function ErrorAlert({ error }: { error: unknown }) {
   const stringError = cause instanceof Error ? String(cause.stack) : stack;
 
   return (
-    <Typography className="grid grid-cols-1 !max-w-none pt-(--padding-content-top)">
+    <Typography className="grid grid-cols-1 max-w-none! pt-(--padding-content-top)">
       <Heading level={1}>{title}</Heading>
       Error: {message}
       {hint && <DeveloperHint className="mb-4">{hint}</DeveloperHint>}

package/src/lib/errors/ErrorMessage.tsx

@@ -0,0 +1,38 @@
+import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert.js";
+import { SyntaxHighlight } from "zudoku/ui/SyntaxHighlight.js";
+import { DeveloperHint } from "../components/DeveloperHint.js";
+import { ZudokuError } from "../util/invariant.js";
+
+export function ErrorMessage({ error }: { error: unknown }) {
+  const message =
+    error instanceof Error ? error.message : "Something went wrong";
+
+  const showDeveloperHints = process.env.NODE_ENV === "development";
+
+  const hint = error instanceof ZudokuError ? error.developerHint : undefined;
+  const title =
+    error instanceof ZudokuError ? error.title : "Something went wrong";
+  const stack = error instanceof Error ? error.stack : undefined;
+  const cause = error instanceof Error ? error.cause : undefined;
+
+  const stringError = cause instanceof Error ? String(cause.stack) : stack;
+
+  return (
+    <>
+      <Alert variant="destructive">
+        <AlertTitle>{title}</AlertTitle>
+        <AlertDescription>{message}</AlertDescription>
+      </Alert>
+      {showDeveloperHints && hint && (
+        <DeveloperHint className="mb-4">{hint}</DeveloperHint>
+      )}
+      {showDeveloperHints && stringError && (
+        <SyntaxHighlight
+          className="max-h-[400px] [&>pre]:p-4"
+          language="js"
+          code={stringError}
+        />
+      )}
+    </>
+  );
+}

package/src/lib/errors/RouterError.tsx

@@ -1,13 +1,18 @@
 import { isRouteErrorResponse, useRouteError } from "react-router";
 import { NotFoundPage } from "../components/NotFoundPage.js";
+import { cn } from "../util/cn.js";
 import { ErrorAlert } from "./ErrorAlert.js";
 
-export function RouterError() {
+export function RouterError({ className }: { className?: string }) {
   const error = useRouteError();
 
   if (isRouteErrorResponse(error) && error.status === 404) {
     return <NotFoundPage />;
   }
 
-  return <ErrorAlert error={error} />;
+  return (
+    <div className={cn("mx-4 max-w-2xl", className)}>
+      <ErrorAlert error={error} />
+    </div>
+  );
 }