zudoku 0.38.0 → 0.39.0

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

@@ -1 +1 @@
-{"version":3,"file":"zudoku.plugin-api-catalog.js","sources":["../src/lib/plugins/api-catalog/Catalog.tsx","../src/lib/plugins/api-catalog/index.tsx"],"sourcesContent":["import { useSuspenseQuery } from \"@tanstack/react-query\";\nimport { Helmet } from \"@zudoku/react-helmet-async\";\nimport { useMatch } from \"react-router\";\nimport { Link } from \"zudoku/components\";\nimport { useAuthState } from \"../../authentication/state.js\";\nimport { Heading } from \"../../components/Heading.js\";\nimport { Markdown } from \"../../components/Markdown.js\";\nimport { joinUrl } from \"../../util/joinUrl.js\";\nimport { type ApiCatalogPluginOptions, getKey } from \"./index.js\";\n\nexport const Catalog = ({\n  items,\n  filterCatalogItems = (items) => items,\n  label = \"API Library\",\n  categoryLabel,\n}: Omit<ApiCatalogPluginOptions, \"navigationId\"> & {\n  categoryLabel?: string;\n}) => {\n  const auth = useAuthState();\n  const match = useMatch({ path: \"/catalog/:category\" });\n  const activeCategory = match?.params.category;\n\n  const catalogItems = useSuspenseQuery({\n    queryFn: () => filterCatalogItems(items, { auth }),\n    queryKey: [\"catalogItems\", auth],\n  });\n\n  // Only index the overview page, ignore the rest\n  const dataSet = activeCategory ? { \"data-pagefind-ignore\": \"all\" } : {};\n\n  return (\n    <section\n      className=\"pt-[--padding-content-top] pb-[--padding-content-bottom]\"\n      {...dataSet}\n    >\n      <Helmet>\n        <title>\n          {categoryLabel ? `${categoryLabel} - ` : \"\"}\n          {label}\n        </title>\n      </Helmet>\n      <div className=\"grid gap-4\">\n        <Heading level={2}>\n          {label}\n          {categoryLabel && ` - ${categoryLabel}`}\n        </Heading>\n\n        <div className=\"grid grid-cols-2 gap-4\">\n          {catalogItems.data\n            .filter(\n              (api) =>\n                !activeCategory ||\n                api.categories.find((c) =>\n                  c.tags.find((t) => getKey(c.label, t) === activeCategory),\n                ),\n            )\n            .map((api) => (\n              <Link\n                to={joinUrl(api.path)}\n                className=\"no-underline hover:!text-foreground\"\n                key={api.path}\n              >\n                <div className=\"border h-full rounded-lg p-4 flex flex-col gap-2 cursor-pointer hover:bg-border/20 font-normal\">\n                  <span className=\"font-semibold\">{api.label}</span>\n                  <Markdown\n                    className=\"text-sm whitespace-pre-wrap mb-6 line-clamp-2\"\n                    content={api.description}\n                  />\n                </div>\n              </Link>\n            ))}\n        </div>\n      </div>\n    </section>\n  );\n};\n","import slugify from \"@sindresorhus/slugify\";\nimport { matchPath } from \"react-router\";\nimport type { SidebarItem } from \"../../../config/validators/SidebarSchema.js\";\nimport type { AuthState } from \"../../authentication/state.js\";\nimport type { ZudokuPlugin } from \"../../core/plugins.js\";\nimport { joinUrl } from \"../../util/joinUrl.js\";\nimport { Catalog } from \"./Catalog.js\";\n\nexport const getKey = (category: string, tag: string) =>\n  slugify(`${category}-${tag}`);\n\nexport type ApiCatalogItem = {\n  path: string;\n  label: string;\n  description: string;\n  categories: CatalogCategory[];\n};\n\nexport type CatalogCategory = {\n  label: string;\n  tags: string[];\n};\n\nexport type ApiCatalogPluginOptions = {\n  navigationId: string;\n  label: string;\n  categories?: CatalogCategory[];\n  items: ApiCatalogItem[];\n  filterCatalogItems?: filterCatalogItems;\n};\n\nexport type CatalogContext<ProviderData = unknown> = {\n  auth: AuthState<ProviderData>;\n};\n\nexport type filterCatalogItems<ProviderData = unknown> = (\n  items: ApiCatalogItem[],\n  { auth }: CatalogContext<ProviderData>,\n) => ApiCatalogItem[];\n\nexport const apiCatalogPlugin = ({\n  navigationId,\n  items,\n  label,\n  categories = [],\n  filterCatalogItems,\n}: {\n  navigationId: string;\n  label: string;\n  categories?: CatalogCategory[];\n  items: ApiCatalogItem[];\n  filterCatalogItems?: filterCatalogItems;\n}): ZudokuPlugin => {\n  return {\n    getSidebar: async function Sidebar(path) {\n      if (!matchPath({ path: joinUrl(navigationId), end: false }, path)) {\n        return [];\n      }\n\n      const sidebar: SidebarItem[] = categories.map((category) => ({\n        type: \"category\" as const,\n        label: category.label,\n        collapsible: false,\n        items: category.tags.map((tag) => {\n          const tagPath = getKey(category.label, tag);\n          return {\n            type: \"doc\" as const,\n            id: joinUrl(navigationId, tagPath),\n            label: tag,\n            badge: {\n              label: String(\n                items.filter((api) =>\n                  api.categories.find((c) => c.tags.includes(tag)),\n                ).length,\n              ),\n              color: \"outline\" as const,\n            },\n          };\n        }),\n      }));\n\n      sidebar.unshift({\n        type: \"doc\" as const,\n        id: joinUrl(navigationId),\n        label: \"Overview\",\n        badge: { label: String(items.length), color: \"outline\" as const },\n      });\n\n      return sidebar;\n    },\n    getRoutes: () =>\n      categories.flatMap((category) =>\n        [undefined, ...category.tags].map((tag) => ({\n          path: joinUrl(\n            navigationId,\n            tag ? getKey(category.label, tag) : undefined,\n          ),\n          element: (\n            <Catalog\n              label={label}\n              categoryLabel={tag}\n              items={items}\n              filterCatalogItems={filterCatalogItems}\n              categories={categories}\n            />\n          ),\n        })),\n      ),\n  };\n};\n"],"names":["Catalog","items","filterCatalogItems","label","categoryLabel","auth","useAuthState","match","useMatch","activeCategory","catalogItems","useSuspenseQuery","dataSet","jsxs","jsx","Helmet","Heading","api","c","t","getKey","Link","joinUrl","Markdown","category","tag","slugify","apiCatalogPlugin","navigationId","categories","path","matchPath","sidebar","tagPath"],"mappings":"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"}
+{"version":3,"file":"zudoku.plugin-api-catalog.js","sources":["../src/lib/plugins/api-catalog/Catalog.tsx","../src/lib/plugins/api-catalog/index.tsx"],"sourcesContent":["import { useSuspenseQuery } from \"@tanstack/react-query\";\nimport { Helmet } from \"@zudoku/react-helmet-async\";\nimport { useMatch } from \"react-router\";\nimport { Link } from \"zudoku/components\";\nimport { useAuthState } from \"../../authentication/state.js\";\nimport { Heading } from \"../../components/Heading.js\";\nimport { Markdown } from \"../../components/Markdown.js\";\nimport { joinUrl } from \"../../util/joinUrl.js\";\nimport { type ApiCatalogPluginOptions, getKey } from \"./index.js\";\n\nexport const Catalog = ({\n  items,\n  filterCatalogItems = (items) => items,\n  label = \"API Library\",\n  categoryLabel,\n}: Omit<ApiCatalogPluginOptions, \"navigationId\"> & {\n  categoryLabel?: string;\n}) => {\n  const auth = useAuthState();\n  const match = useMatch({ path: \"/catalog/:category\" });\n  const activeCategory = match?.params.category;\n\n  const catalogItems = useSuspenseQuery({\n    queryFn: () => filterCatalogItems(items, { auth }),\n    queryKey: [\"catalogItems\", auth],\n  });\n\n  // Only index the overview page, ignore the rest\n  const dataSet = activeCategory ? { \"data-pagefind-ignore\": \"all\" } : {};\n\n  return (\n    <section\n      className=\"pt-[--padding-content-top] pb-[--padding-content-bottom]\"\n      {...dataSet}\n    >\n      <Helmet>\n        <title>\n          {categoryLabel ? `${categoryLabel} - ` : \"\"}\n          {label}\n        </title>\n      </Helmet>\n      <div className=\"grid gap-4\">\n        <Heading level={2}>\n          {label}\n          {categoryLabel && ` - ${categoryLabel}`}\n        </Heading>\n\n        <div className=\"grid grid-cols-2 gap-4\">\n          {catalogItems.data\n            .filter(\n              (api) =>\n                !activeCategory ||\n                api.categories.find((c) =>\n                  c.tags.find((t) => getKey(c.label, t) === activeCategory),\n                ),\n            )\n            .map((api) => (\n              <Link\n                to={joinUrl(api.path)}\n                className=\"no-underline hover:!text-foreground\"\n                key={api.path}\n              >\n                <div className=\"border h-full rounded-lg p-4 flex flex-col gap-2 cursor-pointer hover:bg-border/20 font-normal\">\n                  <span className=\"font-semibold\">{api.label}</span>\n                  <Markdown\n                    className=\"text-sm whitespace-pre-wrap mb-6 line-clamp-2\"\n                    content={api.description}\n                  />\n                </div>\n              </Link>\n            ))}\n        </div>\n      </div>\n    </section>\n  );\n};\n","import slugify from \"@sindresorhus/slugify\";\nimport { matchPath } from \"react-router\";\nimport type { SidebarItem } from \"../../../config/validators/SidebarSchema.js\";\nimport type { AuthState } from \"../../authentication/state.js\";\nimport type { ZudokuPlugin } from \"../../core/plugins.js\";\nimport { joinUrl } from \"../../util/joinUrl.js\";\nimport { Catalog } from \"./Catalog.js\";\n\nexport const getKey = (category: string, tag: string) =>\n  slugify(`${category}-${tag}`);\n\nexport type ApiCatalogItem = {\n  path: string;\n  label: string;\n  description: string;\n  categories: CatalogCategory[];\n};\n\nexport type CatalogCategory = {\n  label: string;\n  tags: string[];\n};\n\nexport type ApiCatalogPluginOptions = {\n  navigationId: string;\n  label: string;\n  categories?: CatalogCategory[];\n  items: ApiCatalogItem[];\n  filterCatalogItems?: filterCatalogItems;\n};\n\nexport type CatalogContext<ProviderData = unknown> = {\n  auth: AuthState<ProviderData>;\n};\n\nexport type filterCatalogItems<ProviderData = unknown> = (\n  items: ApiCatalogItem[],\n  { auth }: CatalogContext<ProviderData>,\n) => ApiCatalogItem[];\n\nexport const apiCatalogPlugin = ({\n  navigationId,\n  items,\n  label,\n  categories = [],\n  filterCatalogItems,\n}: {\n  navigationId: string;\n  label: string;\n  categories?: CatalogCategory[];\n  items: ApiCatalogItem[];\n  filterCatalogItems?: filterCatalogItems;\n}): ZudokuPlugin => {\n  const paths = Object.fromEntries(\n    categories.flatMap((category) =>\n      [undefined, ...category.tags].map((tag) => [\n        joinUrl(navigationId, tag ? getKey(category.label, tag) : undefined),\n        tag,\n      ]),\n    ),\n  );\n\n  return {\n    getSidebar: async (currentPath) => {\n      const matches = Object.keys(paths).some((path) =>\n        matchPath(path, currentPath),\n      );\n\n      if (!matches) {\n        return [];\n      }\n\n      const sidebar: SidebarItem[] = categories.map((category) => ({\n        type: \"category\" as const,\n        label: category.label,\n        collapsible: false,\n        items: category.tags.map((tag) => ({\n          type: \"doc\" as const,\n          id: joinUrl(navigationId, getKey(category.label, tag)),\n          label: tag,\n          badge: {\n            label: String(\n              items.filter((api) =>\n                api.categories.find((c) => c.tags.includes(tag)),\n              ).length,\n            ),\n            color: \"outline\" as const,\n          },\n        })),\n      }));\n\n      sidebar.unshift({\n        type: \"doc\" as const,\n        id: joinUrl(navigationId),\n        label: \"Overview\",\n        badge: { label: String(items.length), color: \"outline\" as const },\n      });\n\n      return sidebar;\n    },\n    getRoutes: () =>\n      Object.entries(paths).map(([path, tag]) => ({\n        path,\n        element: (\n          <Catalog\n            label={label}\n            categoryLabel={tag}\n            items={items}\n            filterCatalogItems={filterCatalogItems}\n            categories={categories}\n          />\n        ),\n      })),\n  };\n};\n"],"names":["Catalog","items","filterCatalogItems","label","categoryLabel","auth","useAuthState","match","useMatch","activeCategory","catalogItems","useSuspenseQuery","dataSet","jsxs","jsx","Helmet","Heading","api","t","getKey","Link","joinUrl","Markdown","category","tag","slugify","apiCatalogPlugin","navigationId","categories","paths","currentPath","path","matchPath","sidebar","c"],"mappings":"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"}

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

@@ -1,9 +1,9 @@
 import { j as e } from "./jsx-runtime-CYK1ROHF.js";
 import { RotateCwIcon as j, TrashIcon as v, EyeOffIcon as w, EyeIcon as K, CheckIcon as b, CopyIcon as k, FileKey2Icon as N } from "lucide-react";
-import { D as I, S as x, R as S } from "./SlotletProvider-BEwNY8q0.js";
+import { D as I, S as x, R as S } from "./SlotletProvider-DXvc0aY6.js";
 import { i as c } from "./invariant-Caa8-XvF.js";
-import { a as h, g, l as A, b as C } from "./hook-Cge6LiTK.js";
-import { u as d, S as E, a as P, b as D, c as q, d as R, e as p } from "./Select-fAYcJ0OU.js";
+import { e as h, g, l as A, d as C } from "./hook-CqpVYDqN.js";
+import { u as d, S as E, a as P, b as D, c as q, d as R, e as p } from "./Select-DVFRKf1R.js";
 import { a as O } from "./index.esm--gIChbWs.js";
 import { a as z, L as u, O as F } from "./chunk-HA7DTUK3-C4gP41vD.js";
 import { Button as l } from "./ui/Button.js";

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

@@ -1,6 +1,6 @@
 import { j as o } from "./jsx-runtime-CYK1ROHF.js";
 import a from "react";
-import { P as n } from "./Markdown-DIZ8nBVC.js";
+import { P as n } from "./Markdown-aF5FdsNi.js";
 import { c } from "./cn-qaFjX9_3.js";
 import { u as p } from "./useExposedProps-B9qXJedG.js";
 const u = ({

package/lib/zudoku.plugin-markdown.js

@@ -53,7 +53,7 @@ const P = (e) => ({
         const u = {
           path: r,
           lazy: async () => {
-            const { MdxPage: p } = await import("./MdxPage-JEdbfW-f.js"), { default: f, ...l } = await i();
+            const { MdxPage: p } = await import("./MdxPage-ZW1StNhp.js"), { default: f, ...l } = await i();
             return {
               element: /* @__PURE__ */ d.jsx(
                 p,

package/lib/zudoku.plugin-openapi.js

@@ -1,9 +1,9 @@
 import "./jsx-runtime-CYK1ROHF.js";
 import "lucide-react";
 import "./chunk-HA7DTUK3-C4gP41vD.js";
-import "./hook-Cge6LiTK.js";
+import "./hook-CqpVYDqN.js";
 import "./ui/Button.js";
-import { U as a, o as e } from "./index-B0y3fTg-.js";
+import { U as a, o as e } from "./index-CjPMxpOV.js";
 export {
   a as UNTAGGED_PATH,
   e as openApiPlugin

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

@@ -1,11 +1,11 @@
 import { j as e } from "./jsx-runtime-CYK1ROHF.js";
 import { C as S } from "./ClientOnly-E7hGysn1.js";
 import { VisuallyHidden as k } from "@radix-ui/react-visually-hidden";
-import { u as C, a as v, m as y, o as N, d as L } from "./hook-Cge6LiTK.js";
+import { u as C, e as v, m as y, o as N, f as L } from "./hook-CqpVYDqN.js";
 import { useRef as j, useCallback as _, useLayoutEffect as w, useState as R } from "react";
 import { B as T } from "./Button-Fp19CMUr.js";
-import { C as F, a as f, b as p, c as q, d as I, e as E, f as $ } from "./Callout-B2vsR09t.js";
-import { b as D } from "./Dialog-sbgekbjb.js";
+import { C as F, a as f, b as p, c as q, d as I, e as E, f as $ } from "./Callout-D5frCCJ0.js";
+import { b as D } from "./Dialog-Dv6WG8RN.js";
 import { BracketsIcon as P, FileTextIcon as B } from "lucide-react";
 import { a as U, L as x } from "./chunk-HA7DTUK3-C4gP41vD.js";
 const A = async ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -162,13 +162,14 @@
     "@sindresorhus/slugify": "2.2.1",
     "@stefanprobst/rehype-extract-toc": "2.2.1",
     "@tailwindcss/typography": "0.5.16",
+    "@tanem/react-nprogress": "5.0.55",
     "@tanstack/react-query": "5.66.6",
     "@types/react": "19.0.10",
     "@types/react-dom": "19.0.4",
     "@vitejs/plugin-react": "4.3.4",
     "@zudoku/httpsnippet": "10.0.9",
     "@zudoku/react-helmet-async": "2.0.5",
-    "autoprefixer": "10.4.20",
+    "autoprefixer": "10.4.21",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "cmdk": "1.0.4",
@@ -244,7 +245,7 @@
     "@graphql-codegen/cli": "5.0.5",
     "@graphql-codegen/client-preset": "4.7.0",
     "@testing-library/react": "16.2.0",
-    "@types/estree": "1.0.6",
+    "@types/estree": "1.0.7",
     "@types/express": "5.0.0",
     "@types/har-format": "1.2.16",
     "@types/hast": "^3.0.4",

package/src/app/tailwind.ts

@@ -28,6 +28,20 @@ const config = (zudokuConfig?: LoadedConfig): Omit<Config, "content"> => {
     content,
     theme: {
       extend: {
+        keyframes: {
+          "bounce-x-start": {
+            "0%, 100%": { transform: "translateX(0)" },
+            "50%": { transform: "translateX(-25%)" },
+          },
+          "bounce-x-end": {
+            "0%, 100%": { transform: "translateX(0)" },
+            "50%": { transform: "translateX(25%)" },
+          },
+        },
+        animation: {
+          "bounce-x-start": "bounce-x-start 1s infinite",
+          "bounce-x-end": "bounce-x-end 1s infinite",
+        },
         fontFamily: {
           sans,
           mono,

package/src/lib/components/Layout.tsx

@@ -1,7 +1,6 @@
 import { Helmet } from "@zudoku/react-helmet-async";
 import { Suspense, useEffect, type ReactNode } from "react";
-import { Outlet, useLocation, useNavigation } from "react-router";
-import { useSpinDelay } from "spin-delay";
+import { Outlet, useLocation } from "react-router";
 import { joinUrl } from "../util/joinUrl.js";
 import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
 import { useScrollToTop } from "../util/useScrollToTop.js";
@@ -29,13 +28,6 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
     authentication?.onPageLoad?.();
   }, [authentication]);
 
-  // Page transition is happening: https://reactrouter.com/start/framework/pending-navigation
-  const isNavigating = Boolean(useNavigation().location);
-  const showSpinner = useSpinDelay(isNavigating, {
-    delay: 300,
-    minDuration: 500,
-  });
-
   return (
     <>
       {import.meta.env.MODE === "standalone" && (
@@ -62,13 +54,9 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
       <Slotlet name="layout-after-head" />
 
       <div className="grid grid-cols-1 grid-rows-[min-content_1fr] lg:grid-cols-[var(--side-nav-width)_1fr] max-w-screen-2xl w-full lg:mx-auto px-4 lg:px-8 2xl:border-x">
-        {showSpinner ? (
-          <LoadingFallback />
-        ) : (
-          <Suspense fallback={<LoadingFallback />}>
-            <Main>{children ?? <Outlet />}</Main>
-          </Suspense>
-        )}
+        <Suspense fallback={<LoadingFallback />}>
+          <Main>{children ?? <Outlet />}</Main>
+        </Suspense>
       </div>
     </>
   );

package/src/lib/components/Main.tsx

@@ -1,5 +1,6 @@
 import { PanelLeftIcon } from "lucide-react";
 import { type PropsWithChildren, useState } from "react";
+import { useNavigation } from "react-router";
 import { Drawer, DrawerTrigger } from "zudoku/ui/Drawer.js";
 import { cn } from "../util/cn.js";
 import { useCurrentNavigation } from "./context/ZudokuContext.js";
@@ -10,6 +11,7 @@ export const Main = ({ children }: PropsWithChildren) => {
   const [isDrawerOpen, setDrawerOpen] = useState(false);
   const { sidebar } = useCurrentNavigation();
   const hasSidebar = sidebar.length > 0;
+  const isNavigating = useNavigation().state === "loading";
 
   return (
     <Drawer
@@ -34,8 +36,8 @@ export const Main = ({ children }: PropsWithChildren) => {
       <main
         data-pagefind-body
         className={cn(
-          "h-auto dark:border-white/10 translate-x-0",
           hasSidebar ? "lg:pl-12" : "col-span-full",
+          isNavigating && "animate-pulse",
         )}
       >
         <Slotlet name="zudoku-before-content" />

package/src/lib/components/Pagination.tsx

@@ -0,0 +1,47 @@
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import { Link } from "react-router";
+import { cn } from "../util/cn.js";
+import { Button } from "./index.js";
+
+export const Pagination = ({
+  prev,
+  next,
+}: {
+  prev: { to: string; label: string } | undefined;
+  next: { to: string; label: string } | undefined;
+}) => {
+  const linkClass =
+    "group transition-all p-5 space-x-1 transition-all hover:text-foreground";
+
+  return (
+    <div
+      className={cn(
+        "flex my-8 -mx-4 text-muted-foreground font-semibold",
+        prev ? "justify-between" : "justify-end",
+      )}
+    >
+      {prev && (
+        <Button variant="ghost" asChild>
+          <Link to={prev.to} relative="path" className={linkClass}>
+            <ArrowLeftIcon
+              className="group-hover:motion-safe:animate-bounce-x-start"
+              size={12}
+            />
+            <span className="truncate">{prev.label}</span>
+          </Link>
+        </Button>
+      )}
+      {next && (
+        <Button variant="ghost" asChild>
+          <Link to={next.to} relative="path" className={linkClass}>
+            <span className="truncate ">{next.label}</span>
+            <ArrowRightIcon
+              className="group-hover:motion-safe:animate-bounce-x-end"
+              size={12}
+            />
+          </Link>
+        </Button>
+      )}
+    </div>
+  );
+};

package/src/lib/components/TopNavigation.tsx

@@ -1,5 +1,6 @@
+import { useNProgress } from "@tanem/react-nprogress";
 import { cx } from "class-variance-authority";
-import { Suspense } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { NavLink, useNavigation } from "react-router";
 import type { TopNavigationItem } from "../../config/validators/common.js";
 import { useAuth } from "../authentication/hook.js";
@@ -20,6 +21,31 @@ export const isHiddenItem =
     );
   };
 
+const Progress = () => {
+  const navigation = useNavigation();
+  const isNavigating = navigation.state === "loading";
+  // delay the animation to avoid flickering
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setIsAnimating(isNavigating), 100);
+
+    return () => clearTimeout(timer);
+  }, [isNavigating]);
+
+  const { isFinished, progress } = useNProgress({ isAnimating });
+
+  return (
+    <div
+      className="absolute w-0 left-0 right-0 bottom-[-1px] h-[2px] bg-primary transition-all duration-300 ease-in-out"
+      style={{
+        opacity: isFinished ? 0 : 1,
+        width: isFinished ? 0 : `${progress * 100}%`,
+      }}
+    />
+  );
+};
+
 export const TopNavigation = () => {
   const { topNavigation } = useZudoku();
   const { isAuthenticated } = useAuth();
@@ -32,7 +58,7 @@ export const TopNavigation = () => {
 
   return (
     <Suspense>
-      <div className="items-center justify-between px-8 h-[--top-nav-height] hidden lg:flex text-sm">
+      <div className="items-center justify-between px-8 h-[--top-nav-height] hidden lg:flex text-sm relative">
         <nav className="text-sm">
           <ul className="flex flex-row items-center gap-8">
             {filteredItems.map((item) => (
@@ -43,6 +69,7 @@ export const TopNavigation = () => {
           </ul>
         </nav>
         <Slotlet name="top-navigation-side" />
+        <Progress />
       </div>
     </Suspense>
   );

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

@@ -3,14 +3,14 @@ import { ExternalLinkIcon } from "lucide-react";
 import { NavLink, useLocation, useSearchParams } from "react-router";
 
 import type { SidebarItem as SidebarItemType } from "../../../config/validators/SidebarSchema.js";
-import { joinPath } from "../../util/joinPath.js";
+import { joinUrl } from "../../util/joinUrl.js";
 import { AnchorLink } from "../AnchorLink.js";
 import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
 import { SidebarBadge } from "./SidebarBadge.js";
 import { SidebarCategory } from "./SidebarCategory.js";
 
 export const navigationListItem = cva(
-  "flex items-center gap-2 px-[--padding-nav-item] my-0.5 py-1.5 rounded-lg hover:bg-accent",
+  "flex items-center gap-2 px-[--padding-nav-item] my-0.5 py-1.5 rounded-lg hover:bg-accent tabular-nums",
   {
     variants: {
       isActive: {
@@ -21,6 +21,10 @@ export const navigationListItem = cva(
         true: "text-foreground/30",
         false: "",
       },
+      isPending: {
+        true: "bg-accent animate-pulse",
+        false: "",
+      },
     },
     defaultVariants: {
       isActive: false,
@@ -49,8 +53,10 @@ export const SidebarItem = ({
     case "doc":
       return (
         <NavLink
-          className={({ isActive }) => navigationListItem({ isActive })}
-          to={joinPath(item.id)}
+          className={({ isActive, isPending }) =>
+            navigationListItem({ isActive, isPending })
+          }
+          to={joinUrl(item.id)}
           onClick={onRequestClose}
           end
         >

package/src/lib/{plugins/markdown → components/navigation}/Toc.tsx

@@ -7,9 +7,9 @@ import {
   type CSSProperties,
   type PropsWithChildren,
 } from "react";
-import { AnchorLink } from "../../components/AnchorLink.js";
-import { useViewportAnchor } from "../../components/context/ViewportAnchorContext.js";
 import { cn } from "../../util/cn.js";
+import { AnchorLink } from "../AnchorLink.js";
+import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
 
 const DATA_ANCHOR_ATTR = "data-active";
 
@@ -24,23 +24,14 @@ const TocItem = ({
   className?: string;
 }>) => {
   return (
-    <li
-      className={cn(
-        "truncate",
-        isActive
-          ? "text-primary"
-          : "text-foreground/65 dark:text-foreground/75",
-        className,
-      )}
-      title={item.value}
-    >
+    <li className={cn("truncate", className)} title={item.value}>
       <AnchorLink
         to={`#${item.id}`}
         {...{ [DATA_ANCHOR_ATTR]: item.id }}
         className={cn(
           isActive
             ? "text-primary"
-            : "text-foreground/65 dark:text-foreground/75 hover:text-foreground",
+            : "hover:text-accent-foreground text-muted-foreground",
         )}
       >
         {item.value}
@@ -89,7 +80,7 @@ export const Toc = ({ entries }: { entries: TocEntry[] }) => {
   }, [activeAnchor]);
 
   return (
-    <aside className="sticky scrollbar top-[--header-height] h-[calc(100vh-var(--header-height))] pt-[--padding-content-top] pb-[--padding-content-bottom] overflow-y-auto ps-1 text-sm">
+    <aside className="sticky scrollbar top-8 lg:top-[--header-height] h-[calc(100vh-var(--header-height))] pt-[--padding-content-top] pb-[--padding-content-bottom] overflow-y-auto ps-1 text-sm">
       <div className="flex items-center gap-2 font-medium mb-2">
         <ListTreeIcon size={16} />
         On this page