zudoku 0.47.1 → 0.48.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.47.1",
+  "version": "0.48.0",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -174,7 +174,7 @@
     "@tailwindcss/vite": "4.1.7",
     "@tanem/react-nprogress": "5.0.55",
     "@tanstack/react-query": "5.74.3",
-    "@types/react": "19.1.1",
+    "@types/react": "19.1.8",
     "@types/react-dom": "19.1.6",
     "@vitejs/plugin-react": "4.4.1",
     "@zudoku/httpsnippet": "10.0.9",
@@ -192,6 +192,7 @@
     "fast-equals": "5.2.2",
     "framer-motion": "^12.12.2",
     "glob": "11.0.2",
+    "glob-parent": "6.0.2",
     "graphql": "16.11.0",
     "graphql-type-json": "0.3.2",
     "graphql-yoga": "5.13.5",
@@ -200,6 +201,7 @@
     "hast-util-to-string": "3.0.1",
     "html-url-attributes": "^3.0.1",
     "http-terminator": "3.2.0",
+    "json-schema-to-typescript-lite": "14.1.0",
     "loglevel": "1.9.2",
     "lru-cache": "11.0.2",
     "lucide-react": "0.488.0",
@@ -211,7 +213,7 @@
     "openapi-types": "12.1.3",
     "pagefind": "1.4.0-alpha.1",
     "picocolors": "1.1.1",
-    "piscina": "5.0.0-alpha.2",
+    "piscina": "5.0.0",
     "posthog-node": "4.17.1",
     "react-error-boundary": "5.0.0",
     "react-hook-form": "7.57.0",
@@ -245,18 +247,19 @@
     "vite": "6.3.5",
     "yaml": "2.8.0",
     "yargs": "17.7.2",
-    "zod": "3.25.51",
-    "zod-validation-error": "3.4.1",
+    "zod": "3.25.56",
+    "zod-to-ts": "1.2.0",
     "zustand": "5.0.5"
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "5.0.6",
+    "@graphql-codegen/cli": "5.0.7",
     "@graphql-codegen/client-preset": "4.8.0",
     "@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/express": "5.0.2",
+    "@types/glob-parent": "5.1.3",
     "@types/har-format": "1.2.16",
     "@types/hast": "^3.0.4",
     "@types/json-schema": "7.0.15",
@@ -275,18 +278,18 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "rollup-plugin-visualizer": "5.14.0",
+    "tsx": "4.19.4",
     "typescript": "5.8.3",
-    "vitest": "3.1.4"
+    "vitest": "3.2.3"
   },
   "peerDependencies": {
-    "react": ">=19",
-    "react-dom": ">=19",
     "@azure/msal-browser": "^4.13.0",
     "@clerk/clerk-js": "^5.63.1",
     "@sentry/react": "^9.12.0",
-    "@supabase/supabase-js": "^2.49.4"
+    "@supabase/supabase-js": "^2.49.4",
+    "react": ">=19",
+    "react-dom": ">=19"
   },
-  "optionalDependencies": {},
   "peerDependenciesMeta": {
     "@azure/msal-browser": {
       "optional": true
@@ -305,12 +308,12 @@
     "build": "tsc --project tsconfig.app.json",
     "build:dev": "esbuild './src/**/*.ts' --format=esm --platform=node --target=node22 --outdir=dist --splitting --log-level=warning",
     "build:vite": "vite build",
-    "generate:types": "node scripts/generate-types.js",
+    "generate:types": "tsx scripts/generate-types.js && tsx scripts/generate-flat-config.js",
     "build:standalone:vite": "vite build --mode standalone --config vite.standalone.config.ts",
     "build:standalone:html": "cp ./src/app/standalone.html ./standalone/standalone.html && cp ./src/app/demo.html ./standalone/demo.html && cp ./src/app/demo-cdn.html ./standalone/index.html && cp standalone/zudoku.css standalone/style.css",
     "clean": "tsc --build --clean",
     "codegen": "graphql-codegen --config ./src/codegen.ts",
-    "test": "vitest run"
+    "test": "vitest run --typecheck"
   },
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts"

package/src/app/ZuploBuildConfig.ts

@@ -1,4 +1,4 @@
-import { z } from "zod";
+import { z } from "zod/v4";
 
 export const EntitlementsSchema = z.object({
   devPortalZuploBranding: z.boolean(),
@@ -19,14 +19,14 @@ export const EntitlementsSchema = z.object({
 
 export const BuildConfigSchema = z.object({
   entitlements: EntitlementsSchema,
-  environmentType: z.string(),
+  environmentType: z.string().optional(),
   deploymentName: z.string(),
-  deploymentUrl: z.string(),
-  projectId: z.string(),
-  projectType: z.string(),
-  sourceType: z.string(),
-  accountName: z.string(),
-  projectName: z.string(),
+  deploymentUrl: z.string().optional(),
+  projectId: z.string().optional(),
+  projectType: z.string().optional(),
+  sourceType: z.string().optional(),
+  accountName: z.string().optional(),
+  projectName: z.string().optional(),
 });
 
 export type BuildConfig = z.infer<typeof BuildConfigSchema>;

package/src/app/defaultTheme.css

@@ -1,54 +1,73 @@
+/**
+ * Default theme for Zudoku. Based on shadcn/ui zinc base colors.
+ * See: https://ui.shadcn.com/docs/theming#zinc
+ */
+
 :root {
-  --background: oklch(100% 0 none);
-  --foreground: oklch(14.1% 0.004 286);
-  --card: oklch(100% 0 none);
-  --card-foreground: oklch(14.1% 0.004 286);
-  --popover: oklch(100% 0 none);
-  --popover-foreground: oklch(14.1% 0.004 286);
-  --primary: oklch(21% 0.006 286);
-  --primary-foreground: oklch(98.5% 0 none);
-  --secondary: oklch(96.8% 0.001 286);
-  --secondary-foreground: oklch(21% 0.006 286);
-  --muted: oklch(96.8% 0.001 286);
-  --muted-foreground: oklch(55.2% 0.014 286);
-  --accent: oklch(96.8% 0.001 286);
-  --accent-foreground: oklch(21% 0.006 286);
-  --destructive: oklch(63.7% 0.208 25.3);
-  --destructive-foreground: oklch(98.5% 0 none);
-  --border: oklch(96% 0.002 286);
-  --input: oklch(92% 0.004 286);
-  --ring: oklch(21% 0.006 286);
-  --chart-1: oklch(67.7% 0.157 35.2);
-  --chart-2: oklch(63.1% 0.101 183);
-  --chart-3: oklch(37.9% 0.044 226);
-  --chart-4: oklch(83.4% 0.119 88.1);
-  --chart-5: oklch(78.3% 0.126 58.7);
-  --radius: 0.75rem;
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
 }
 
 .dark {
-  --background: oklch(14.1% 0.004 286);
-  --foreground: oklch(98.5% 0 none);
-  --card: oklch(14.1% 0.004 286);
-  --card-foreground: oklch(98.5% 0 none);
-  --popover: oklch(14.1% 0.004 286);
-  --popover-foreground: oklch(98.5% 0 none);
-  --primary: oklch(98.5% 0 none);
-  --primary-foreground: oklch(21% 0.006 286);
-  --secondary: oklch(27.4% 0.005 286);
-  --secondary-foreground: oklch(98.5% 0 none);
-  --muted: oklch(27.4% 0.005 286);
-  --muted-foreground: oklch(71.2% 0.013 286);
-  --accent: oklch(27.4% 0.005 286);
-  --accent-foreground: oklch(98.5% 0 none);
-  --destructive: oklch(39.6% 0.133 25.7);
-  --destructive-foreground: oklch(98.5% 0 none);
-  --border: oklch(27.4% 0.005 286);
-  --input: oklch(27.4% 0.005 286);
-  --ring: oklch(87.1% 0.005 286);
-  --chart-1: oklch(52.9% 0.193 262);
-  --chart-2: oklch(69.8% 0.134 165);
-  --chart-3: oklch(72.3% 0.15 60.6);
-  --chart-4: oklch(61.9% 0.204 313);
-  --chart-5: oklch(61.2% 0.209 6.39);
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
 }

package/src/app/demo.tsx

@@ -36,9 +36,10 @@ const config = {
       message: <DemoAnnouncement />,
     },
   },
-  topNavigation: [
+  navigation: [
     {
-      id: "/",
+      type: "link",
+      to: "/",
       label: "API Reference",
     },
   ],
@@ -47,7 +48,7 @@ const config = {
     openApiPlugin({
       type: "url",
       input: apiUrl,
-      navigationId: "/",
+      path: "/",
     }),
   ],
 } satisfies ZudokuConfig;

package/src/app/entry.client.tsx

@@ -5,10 +5,8 @@ import {
   type RouteObject,
 } from "react-router";
 import config from "virtual:zudoku-config";
-import "virtual:zudoku-theme.css";
 import "vite/modulepreload-polyfill";
 import { Bootstrap } from "zudoku/components";
-import "./main.css";
 import { getRoutesByConfig } from "./main.js";
 
 const routes = getRoutesByConfig(config);

package/src/app/entry.server.tsx

@@ -10,12 +10,10 @@ import {
   isRouteErrorResponse,
   type RouteObject,
 } from "react-router";
-import "virtual:zudoku-theme.css";
 import "vite/modulepreload-polyfill";
 import { BootstrapStatic, ServerError } from "zudoku/components";
 import { NO_DEHYDRATE } from "../lib/components/cache.js";
 import type { PrerenderResponse } from "../vite/prerender/PrerenderResponse.js";
-import "./main.css";
 import { getRoutesByConfig } from "./main.js";
 export { getRoutesByConfig };
 

package/src/app/env.ts

@@ -1,3 +1,4 @@
+import z from "zod";
 import { BuildConfigSchema } from "./ZuploBuildConfig.js";
 
 const getZuploBuildConfig = () => {
@@ -9,6 +10,13 @@ const getZuploBuildConfig = () => {
     );
     return zuploBuildConfig;
   } catch (error) {
+    if (error instanceof z.ZodError) {
+      // eslint-disable-next-line no-console
+      console.error("ZUPLO_BUILD_CONFIG is invalid.");
+      // eslint-disable-next-line no-console
+      console.log(error.errors);
+      return undefined;
+    }
     // eslint-disable-next-line no-console
     console.error(
       "ZUPLO_BUILD_CONFIG is a reserved environment variable and cannot be used for custom configuration. Please remove it from your environment variables.",

package/src/app/main.css

@@ -1,5 +1,4 @@
-/* @vite-plugin-inject font */
-@import "./defaultTheme.css" layer(theme);
+/* @vite-plugin-inject defaultTheme */
 @import "tailwindcss" source("..");
 
 /* @vite-plugin-inject main */
@@ -7,56 +6,6 @@
 @plugin "@tailwindcss/typography";
 @custom-variant dark (&:is(.dark *));
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-
-  --shadow-2xs: var(--shadow-2xs);
-  --shadow-xs: var(--shadow-xs);
-  --shadow-sm: var(--shadow-sm);
-  --shadow: var(--shadow);
-  --shadow-md: var(--shadow-md);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-xl: var(--shadow-xl);
-  --shadow-2xl: var(--shadow-2xl);
-
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
-
 @utility prose {
   a {
     @apply font-normal underline-offset-4 hover:text-primary;
@@ -114,6 +63,11 @@
     @apply h-full overscroll-none;
   }
 
+  ::view-transition-old(root),
+  ::view-transition-new(root) {
+    animation: none;
+  }
+
   details summary {
     @apply cursor-pointer;
   }

package/src/app/main.tsx

@@ -6,11 +6,11 @@ import {
 } from "virtual:zudoku-api-plugins";
 import { configuredAuthProvider } from "virtual:zudoku-auth";
 import { configuredCustomPagesPlugin } from "virtual:zudoku-custom-pages-plugin";
-import { configuredDocsPlugins } from "virtual:zudoku-docs-plugins";
+import { configuredDocsPlugin } from "virtual:zudoku-docs-plugin";
+import { configuredNavigation } from "virtual:zudoku-navigation";
 import { configuredRedirectPlugin } from "virtual:zudoku-redirect-plugin";
 import { configuredSearchPlugin } from "virtual:zudoku-search-plugin";
 import { registerShiki } from "virtual:zudoku-shiki-register";
-import { configuredSidebar } from "virtual:zudoku-sidebar";
 import "virtual:zudoku-theme.css";
 import {
   BuildCheck,
@@ -25,6 +25,7 @@ import type { ZudokuContextOptions } from "../lib/core/ZudokuContext.js";
 import { isNavigationPlugin } from "../lib/core/plugins.js";
 import { highlighter } from "../lib/shiki.js";
 import { ZuploEnv } from "./env.js";
+import "./main.css";
 
 await registerShiki(highlighter);
 
@@ -48,12 +49,11 @@ export const convertZudokuConfigToOptions = (
       title: "%s - Zudoku",
       ...config.metadata,
     },
-    sidebars: configuredSidebar,
-    topNavigation: config.topNavigation,
+    navigation: configuredNavigation,
     mdx: config.mdx,
     plugins: [
       ...(configuredAuthProvider ? [configuredAuthProvider] : []),
-      ...configuredDocsPlugins,
+      ...(configuredDocsPlugin ? [configuredDocsPlugin] : []),
       ...configuredApiPlugins,
       ...(configuredSearchPlugin ? [configuredSearchPlugin] : []),
       ...(configuredRedirectPlugin ? [configuredRedirectPlugin] : []),
@@ -99,6 +99,8 @@ export const getRoutesByOptions = (
       },
     ]);
 
+  // @TODO Detect conflicts in routes and log warning
+
   return routes;
 };
 

package/src/app/standalone.tsx

@@ -31,10 +31,11 @@ const config = {
       : undefined,
     pageTitle,
   },
-  topNavigation: [
+  navigation: [
     {
-      id: "/",
+      type: "link",
       label: "API Reference",
+      to: "/",
     },
   ],
   plugins: [
@@ -42,7 +43,7 @@ const config = {
     openApiPlugin({
       type: "url",
       input: apiUrl!,
-      navigationId: "/",
+      path: "/",
     }),
   ],
 } satisfies ZudokuConfig;

package/src/lib/auth/issuer.test.ts

@@ -14,7 +14,7 @@ describe("getIssuer", () => {
     };
 
     const result = await getIssuer(config);
-    expect(result).toBe("tolerant-hornet-46.clerk.accounts.dev");
+    expect(result).toBe("https://tolerant-hornet-46.clerk.accounts.dev");
   });
 
   it("should throw error for invalid clerk public key format", async () => {

package/src/lib/auth/issuer.ts

@@ -17,7 +17,7 @@ export const getIssuer = async (config: ZudokuConfig) => {
       const frontendApi = frontendApiParts.at(0);
       invariant(frontendApi, "Clerk public key is invalid");
 
-      return frontendApi;
+      return `https://${frontendApi}`;
     }
     case "auth0": {
       return `https://${config.authentication.domain}/`;

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

@@ -34,5 +34,5 @@ export function CallbackHandler({
     },
   });
 
-  return <Navigate to={executeCallback.data} />;
+  return <Navigate to={executeCallback.data} replace />;
 }

package/src/lib/components/BuildCheck.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { CircleFadingArrowUpIcon, LoaderCircleIcon } from "lucide-react";
-import { z } from "zod";
+import { z } from "zod/v4";
 import { Button } from "../ui/Button.js";
 
 const BuildStatusSchema = z.object({

package/src/lib/components/Framed.tsx

@@ -0,0 +1,51 @@
+import { cva } from "class-variance-authority";
+import type { PropsWithChildren } from "react";
+import { cn } from "../util/cn.js";
+
+const frameVariants = cva("", {
+  variants: {
+    size: {
+      sm: "max-w-sm",
+      md: "max-w-md",
+      lg: "max-w-lg",
+      xl: "max-w-xl",
+      "2xl": "max-w-2xl",
+      full: "max-w-full",
+    },
+    align: {
+      center: "mx-auto",
+      start: "me-auto",
+      end: "ms-auto",
+    },
+  },
+  defaultVariants: {
+    size: "xl",
+    align: "center",
+  },
+});
+
+export const Framed = ({
+  caption,
+  className,
+  size = "xl",
+  align = "center",
+  children,
+}: PropsWithChildren<{
+  caption?: string;
+  className?: string;
+  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+  align?: "center" | "start" | "end";
+}>) => (
+  <figure className={cn(frameVariants({ size, align }), className)}>
+    <div className="relative overflow-hidden rounded-lg border border-border bg-muted/50 p-1 shadow-sm">
+      <div className="not-prose rounded-md [&_img]:rounded-md! relative overflow-hidden bg-background">
+        {children}
+      </div>
+    </div>
+    {caption && (
+      <figcaption className="mt-3 text-center text-sm text-muted-foreground">
+        {caption}
+      </figcaption>
+    )}
+  </figure>
+);

package/src/lib/components/Header.tsx

@@ -25,6 +25,7 @@ import { Banner } from "./Banner.js";
 import { ClientOnly } from "./ClientOnly.js";
 import { useZudoku } from "./context/ZudokuContext.js";
 import { MobileTopNavigation } from "./MobileTopNavigation.js";
+import { PageProgress } from "./PageProgress.js";
 import { Search } from "./Search.js";
 import { Slot } from "./Slot.js";
 import { ThemeSwitch } from "./ThemeSwitch.js";
@@ -82,8 +83,9 @@ 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={borderBottom}>
-        <div className="max-w-screen-2xl mx-auto flex relative items-center justify-between h-(--top-header-height) px-4 lg:px-8 border-transparent">
+      <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="/">
               <div className="flex items-center gap-3.5">
@@ -182,7 +184,7 @@ export const Header = memo(function HeaderInner() {
         </div>
       </div>
       <div className={cn("hidden lg:block", borderBottom)}>
-        <div className="max-w-screen-2xl mx-auto border-transparent">
+        <div className="max-w-screen-2xl mx-auto border-transparent relative">
           <Slot.Target name="top-navigation-before" />
           <TopNavigation />
           <Slot.Target name="top-navigation-after" />

package/src/lib/components/Heading.tsx

@@ -46,7 +46,11 @@ export type HeadingProps = HTMLAttributes<HTMLHeadingElement> &
     className?: string;
     id?: string;
     level?: 1 | 2 | 3 | 4 | 5 | 6;
-    registerSidebarAnchor?: boolean;
+    /**
+     * This is to set labels as active when the heading is in the viewport.
+     * It's used in the navigation/toc to highlight the current section.
+     */
+    registerNavigationAnchor?: boolean;
   };
 
 export const Heading = ({
@@ -54,7 +58,7 @@ export const Heading = ({
   children,
   id,
   className,
-  registerSidebarAnchor,
+  registerNavigationAnchor,
 }: HeadingProps) => {
   const Component = getComponent(level ?? 1);
   const { ref } = useRegisterAnchorElement();
@@ -65,7 +69,7 @@ export const Heading = ({
         className: cn(className, "flex items-center gap-[0.33em]"),
         level,
       })}
-      ref={registerSidebarAnchor ? ref : undefined}
+      ref={registerNavigationAnchor ? ref : undefined}
       id={id}
     >
       {children}