fumadocs-core 16.15.12 → 16.15.13

package/dist/mdx-plugins/rehype-toc.js

@@ -12,6 +12,17 @@ const HeadingTags = /* @__PURE__ */ new Set([
 	"h5",
 	"h6"
 ]);
+/**
+* Read the step number `remarkSteps` assigns to a heading.
+*/
+function getStep(properties) {
+	const raw = properties["data-fd-step"] ?? properties.dataFdStep;
+	if (typeof raw === "number") return raw;
+	if (typeof raw === "string" && raw.trim() !== "") {
+		const step = Number(raw);
+		if (Number.isFinite(step)) return step;
+	}
+}
 function rehypeToc({ exportToc = true } = {}) {
 	if (exportToc === true) exportToc = {
 		as: "esm",
@@ -42,7 +53,7 @@ function rehypeToc({ exportToc = true } = {}) {
 				title: element,
 				depth: Number(element.tagName[1]),
 				url: `#${id}`,
-				_step: typeof element.properties["data-fd-step"] === "number" ? element.properties["data-fd-step"] : void 0
+				_step: getStep(element.properties)
 			});
 			if (isTocOnly && parent && typeof idx === "number") parent.children.splice(idx, 1);
 			return "skip";

package/dist/toc.js

@@ -1,6 +1,6 @@
 "use client";
 import { t as isEqualShallow } from "./is-equal-LdLqRs0o.js";
-import { createContext, use, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
+import { createContext, use, useEffect, useEffectEvent, useMemo, useRef, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";
 import scrollIntoView from "scroll-into-view-if-needed";
 //#region src/utils/merge-refs.ts
@@ -24,11 +24,7 @@ function ScrollProvider({ containerRef, children }) {
 	});
 }
 function AnchorProvider({ toc, single = false, children }) {
-	const observer = useMemo(() => new Observer(), []);
-	observer.single = single;
-	useEffect(() => {
-		observer.setItems(toc);
-	}, [observer, toc]);
+	const observer = useMemo(() => new Observer(toc, single), [toc, single]);
 	useEffect(() => {
 		observer.watch({ threshold: .9 });
 		return () => observer.unwatch();
@@ -38,45 +34,40 @@ function AnchorProvider({ toc, single = false, children }) {
 		children
 	});
 }
-function TOCItem({ ref, onActiveChange = () => null, autoScroll = true, ...props }) {
+function TOCItem({ ref, onActiveChange, autoScroll = true, ...props }) {
 	const id = props.href ? getItemId(props.href) : null;
 	const containerRef = use(ScrollContext);
 	const anchorRef = useRef(null);
-	const isInitialRef = useRef(true);
+	const isMountedRef = useRef(false);
 	const observer = useObserver();
-	const [active, setActive] = useState(() => observer.items.some((item) => item.id === id && item.active));
-	const onUpdate = useEffectEvent((items, initial) => {
-		const itemData = id ? items.find((item) => item.id === id) : null;
-		if (!itemData) return;
-		if (itemData.active !== active) {
-			setActive(itemData.active);
-			onActiveChange(itemData.active);
-		}
-		const anchor = anchorRef.current;
-		const container = containerRef?.current;
-		if (!autoScroll || !anchor || !container) return;
-		let lastActive;
-		for (const item of items) {
-			if (!item.active) continue;
-			if (!lastActive || lastActive.t < item.t) lastActive = item;
-		}
-		if (lastActive?.id === id) scrollIntoView(anchor, {
-			behavior: initial ? "instant" : "smooth",
-			block: "center",
-			inline: "center",
-			scrollMode: "always",
-			boundary: container
-		});
-	});
-	useEffect(() => {
-		if (autoScroll) onUpdate(observer.items, isInitialRef.current);
-		isInitialRef.current = false;
-	}, [observer, autoScroll]);
+	const active = useObserverValue((observer) => id !== null && observer.activeAnchors.includes(id));
+	const prevActiveRef = useRef(active);
+	if (prevActiveRef.current !== active) {
+		prevActiveRef.current = active;
+		onActiveChange?.(active);
+	}
 	useEffect(() => {
-		const listener = (items) => onUpdate(items, false);
-		observer.listen(listener);
-		return () => observer.unlisten(listener);
-	}, [observer]);
+		if (id === null) return;
+		const callback = () => {
+			const anchor = anchorRef.current;
+			const container = containerRef?.current;
+			if (autoScroll && observer.activeAnchor === id && anchor && container) scrollIntoView(anchor, {
+				behavior: isMountedRef.current ? "smooth" : "instant",
+				block: "center",
+				inline: "center",
+				scrollMode: "always",
+				boundary: container
+			});
+		};
+		callback();
+		isMountedRef.current = true;
+		return observer.subscribe(callback);
+	}, [
+		autoScroll,
+		id,
+		observer,
+		containerRef
+	]);
 	return /* @__PURE__ */ jsx("a", {
 		ref: mergeRefs(anchorRef, ref),
 		"data-active": active,
@@ -88,6 +79,12 @@ function useObserver() {
 	if (!observer) throw new Error(`Component must be used under the <AnchorProvider /> component.`);
 	return observer;
 }
+/** subscribe to a value of the observer, it must be stable between updates */
+function useObserverValue(get) {
+	const observer = useObserver();
+	const getSnapshot = () => get(observer);
+	return useSyncExternalStore(observer.subscribe, getSnapshot, getSnapshot);
+}
 /** @returns static info object, useful for custom rendering logic */
 function useTOC() {
 	const observer = useObserver();
@@ -102,75 +99,58 @@ function useTOC() {
 function useTOCListener(listener) {
 	const observer = useObserver();
 	const callback = useEffectEvent(listener);
-	useEffect(() => {
-		observer.listen(callback);
-		return () => observer.unlisten(callback);
-	}, [observer]);
+	useEffect(() => observer.subscribe(callback), [observer]);
 }
 function useTOCSelector(select, isEqual = isEqualShallow) {
-	const observer = useObserver();
-	const [value, setValue] = useState(() => select(observer.items));
-	useTOCListener((items) => {
+	const cache = useRef(null);
+	return useObserverValue(({ items }) => {
+		const prev = cache.current;
+		if (prev && prev.items === items && prev.select === select) return prev.value;
 		const next = select(items);
-		if (!isEqual(value, next)) setValue(next);
+		const value = prev && isEqual(prev.value, next) ? prev.value : next;
+		cache.current = {
+			items,
+			select,
+			value
+		};
+		return value;
 	});
-	return value;
 }
 /**
 * The estimated active heading ID
 */
 function useActiveAnchor() {
-	return useTOCSelector((items) => {
-		let out;
-		for (const item of items) {
-			if (!item.active) continue;
-			if (!out || item.t > out.t) out = item;
-		}
-		return out?.id;
-	});
+	return useObserverValue((observer) => observer.activeAnchor);
 }
 /**
 * The id of visible anchors
 */
 function useActiveAnchors() {
-	return useTOCSelector((items) => {
-		const out = [];
-		for (const item of items) if (item.active) out.push(item.id);
-		return out;
-	});
+	return useObserverValue((observer) => observer.activeAnchors);
 }
 function useItems() {
-	return useTOCSelector((items) => items);
+	return useObserverValue((observer) => observer.items);
 }
 function getItemId(url) {
 	if (url.startsWith("#")) return url.slice(1);
 	return null;
 }
 var Observer = class {
-	constructor() {
-		this.items = [];
-		this.single = false;
+	constructor(toc, single) {
+		this.single = single;
+		this.activeAnchors = [];
 		this.observer = null;
 		this.listeners = /* @__PURE__ */ new Set();
-	}
-	listen(listener) {
-		this.listeners.add(listener);
-	}
-	unlisten(listener) {
-		this.listeners.delete(listener);
-	}
-	setItems(newItems) {
-		const observer = this.observer;
-		if (observer) for (const item of this.items) {
-			const element = document.getElementById(item.id);
-			if (!element) continue;
-			observer.unobserve(element);
-		}
-		const next = [];
-		for (const item of newItems) {
+		this.subscribe = (listener) => {
+			this.listeners.add(listener);
+			return () => {
+				this.listeners.delete(listener);
+			};
+		};
+		this.items = [];
+		for (const item of toc) {
 			const id = getItemId(item.url);
-			if (!id) continue;
-			next.push({
+			if (id) this.items.push({
 				id,
 				active: false,
 				fallback: false,
@@ -178,13 +158,21 @@ var Observer = class {
 				original: item
 			});
 		}
-		this.update(next);
-		this.observeItems();
+	}
+	listen(listener) {
+		this.listeners.add(listener);
+	}
+	unlisten(listener) {
+		this.listeners.delete(listener);
 	}
 	watch(options) {
 		if (this.observer) return;
 		this.observer = new IntersectionObserver(this.callback.bind(this), options);
-		this.observeItems();
+		for (const item of this.items) {
+			const element = document.getElementById(item.id);
+			if (!element) continue;
+			this.observer.observe(element);
+		}
 	}
 	unwatch() {
 		this.observer?.disconnect();
@@ -228,16 +216,17 @@ var Observer = class {
 		}
 		this.update(updated);
 	}
-	observeItems() {
-		if (!this.observer) return;
-		for (const item of this.items) {
-			const element = document.getElementById(item.id);
-			if (!element) continue;
-			this.observer.observe(element);
-		}
-	}
 	update(next) {
+		let latest;
+		const activeAnchors = [];
+		for (const item of next) {
+			if (!item.active) continue;
+			activeAnchors.push(item.id);
+			if (!latest || item.t > latest.t) latest = item;
+		}
 		this.items = next;
+		this.activeAnchors = activeAnchors;
+		this.activeAnchor = latest?.id;
 		for (const listener of this.listeners) listener(next);
 	}
 };

package/dist/utils/use-media-query.d.ts

@@ -1,3 +1,6 @@
 //#region src/utils/use-media-query.d.ts
+/**
+ * @returns `null` on the server, during hydration, or when disabled.
+ */
 export declare function useMediaQuery(query: string, disabled?: boolean): boolean | null;
 //#endregion

package/dist/utils/use-media-query.js

@@ -1,20 +1,17 @@
-import { useEffect, useState } from "react";
+import { useCallback, useSyncExternalStore } from "react";
 //#region src/utils/use-media-query.ts
+const getServerSnapshot = () => null;
+/**
+* @returns `null` on the server, during hydration, or when disabled.
+*/
 function useMediaQuery(query, disabled = false) {
-	const [isMatch, setMatch] = useState(null);
-	useEffect(() => {
-		if (disabled) return;
-		const mediaQueryList = window.matchMedia(query);
-		const handleChange = () => {
-			setMatch(mediaQueryList.matches);
-		};
-		handleChange();
-		mediaQueryList.addEventListener("change", handleChange);
-		return () => {
-			mediaQueryList.removeEventListener("change", handleChange);
-		};
-	}, [disabled, query]);
-	return isMatch;
+	const subscribe = useCallback((onChange) => {
+		if (disabled) return () => {};
+		const list = window.matchMedia(query);
+		list.addEventListener("change", onChange);
+		return () => list.removeEventListener("change", onChange);
+	}, [query, disabled]);
+	return useSyncExternalStore(subscribe, () => disabled ? null : window.matchMedia(query).matches, getServerSnapshot);
 }
 //#endregion
 export { useMediaQuery };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-core",
-  "version": "16.15.12",
+  "version": "16.15.13",
   "description": "The React.js library for building a documentation website",
   "keywords": [
     "Docs",
@@ -151,12 +151,13 @@
     "next": "16.3.5",
     "path-to-regexp": "^8.4.2",
     "react-router": "^8.4.0",
+    "rehype-raw": "^7.0.0",
     "remark-directive": "^4.0.0",
     "remark-mdx": "^3.1.1",
     "tsconfig": "0.0.0",
     "tsdown": "0.23.0",
     "typescript": "^7.0.2",
-    "waku": "1.0.0-rc.0",
+    "waku": "1.0.0-rc.1",
     "zod": "4.6.5"
   },
   "peerDependencies": {