@lukoweb/apitogo 0.1.24 → 0.1.38

package/src/lib/components/context/ViewportAnchorContext.tsx

@@ -1,137 +1,137 @@
-import {
-  createContext,
-  type PropsWithChildren,
-  use,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-
-type AnchorContextType = {
-  activeAnchor?: string;
-  setActiveAnchor: (anchor: string) => void;
-  observe: (element: HTMLElement | null) => void;
-  unobserve: (element: HTMLElement | null) => void;
-};
-
-const ViewportAnchorContext = createContext<AnchorContextType>({
-  activeAnchor: "",
-  setActiveAnchor: () => {},
-  observe: () => {},
-  unobserve: () => {},
-});
-
-export const useViewportAnchor = () => use(ViewportAnchorContext);
-
-export const useRegisterAnchorElement = () => {
-  const elementRef = useRef<HTMLElement | null>(null);
-
-  const { observe, unobserve } = useViewportAnchor();
-
-  useEffect(() => {
-    const element = elementRef.current;
-
-    if (!element) return;
-
-    observe(element);
-
-    return () => unobserve(element);
-  }, [observe, unobserve]);
-
-  const setRef = useCallback((el: HTMLElement | null) => {
-    if (!el) return;
-    elementRef.current = el;
-  }, []);
-
-  return { ref: setRef };
-};
-
-export const ViewportAnchorProvider = ({ children }: PropsWithChildren) => {
-  const [activeAnchor, setActiveAnchor] = useState("");
-  const observerRef = useRef<IntersectionObserver | null>(null);
-  const registeredElements = useRef(new Set<HTMLElement>());
-  const pendingElements = useRef(new Set<HTMLElement>());
-
-  useEffect(() => {
-    observerRef.current = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          if (entry.isIntersecting && entry.target.id) {
-            setActiveAnchor(entry.target.id);
-          }
-        }
-      },
-      {
-        rootMargin: "0px 0px -80% 0px",
-        threshold: 0.75,
-      },
-    );
-
-    // Process any elements that tried to register before observer was ready
-    pendingElements.current.forEach((element) => {
-      registeredElements.current.add(element);
-      observerRef.current?.observe(element);
-    });
-    pendingElements.current.clear();
-
-    return () => observerRef.current?.disconnect();
-  }, []);
-
-  useEffect(() => {
-    const elements = registeredElements.current;
-    const handleScroll = () => {
-      const hasReachedTop = window.scrollY === 0;
-      const hasReachedBottom =
-        window.innerHeight + window.scrollY >= document.body.scrollHeight;
-
-      if (hasReachedTop) {
-        setActiveAnchor("");
-      } else if (hasReachedBottom) {
-        const lastItem = Array.from(elements).pop();
-        const lastId = lastItem?.id ?? "";
-        setActiveAnchor(lastId);
-      }
-    };
-
-    document.addEventListener("scroll", handleScroll);
-
-    return () => {
-      elements.clear();
-      document.removeEventListener("scroll", handleScroll);
-    };
-  }, []);
-
-  const observeFns = useMemo(() => {
-    return {
-      observe: (element: HTMLElement | null) => {
-        if (!element) return;
-
-        if (!observerRef.current) {
-          pendingElements.current.add(element);
-          return;
-        }
-
-        registeredElements.current.add(element);
-        observerRef.current.observe(element);
-      },
-      unobserve: (element: HTMLElement | null) => {
-        if (!element) return;
-
-        pendingElements.current.delete(element);
-        registeredElements.current.delete(element);
-        observerRef.current?.unobserve(element);
-      },
-    };
-  }, []);
-
-  const value = useMemo(
-    () => ({ activeAnchor, setActiveAnchor, ...observeFns }),
-    [activeAnchor, observeFns],
-  );
-
-  return (
-    <ViewportAnchorContext value={value}>{children}</ViewportAnchorContext>
-  );
-};
+import {
+  createContext,
+  type PropsWithChildren,
+  use,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+type AnchorContextType = {
+  activeAnchor?: string;
+  setActiveAnchor: (anchor: string) => void;
+  observe: (element: HTMLElement | null) => void;
+  unobserve: (element: HTMLElement | null) => void;
+};
+
+const ViewportAnchorContext = createContext<AnchorContextType>({
+  activeAnchor: "",
+  setActiveAnchor: () => {},
+  observe: () => {},
+  unobserve: () => {},
+});
+
+export const useViewportAnchor = () => use(ViewportAnchorContext);
+
+export const useRegisterAnchorElement = () => {
+  const elementRef = useRef<HTMLElement | null>(null);
+
+  const { observe, unobserve } = useViewportAnchor();
+
+  useEffect(() => {
+    const element = elementRef.current;
+
+    if (!element) return;
+
+    observe(element);
+
+    return () => unobserve(element);
+  }, [observe, unobserve]);
+
+  const setRef = useCallback((el: HTMLElement | null) => {
+    if (!el) return;
+    elementRef.current = el;
+  }, []);
+
+  return { ref: setRef };
+};
+
+export const ViewportAnchorProvider = ({ children }: PropsWithChildren) => {
+  const [activeAnchor, setActiveAnchor] = useState("");
+  const observerRef = useRef<IntersectionObserver | null>(null);
+  const registeredElements = useRef(new Set<HTMLElement>());
+  const pendingElements = useRef(new Set<HTMLElement>());
+
+  useEffect(() => {
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting && entry.target.id) {
+            setActiveAnchor(entry.target.id);
+          }
+        }
+      },
+      {
+        rootMargin: "0px 0px -80% 0px",
+        threshold: 0.75,
+      },
+    );
+
+    // Process any elements that tried to register before observer was ready
+    pendingElements.current.forEach((element) => {
+      registeredElements.current.add(element);
+      observerRef.current?.observe(element);
+    });
+    pendingElements.current.clear();
+
+    return () => observerRef.current?.disconnect();
+  }, []);
+
+  useEffect(() => {
+    const elements = registeredElements.current;
+    const handleScroll = () => {
+      const hasReachedTop = window.scrollY === 0;
+      const hasReachedBottom =
+        window.innerHeight + window.scrollY >= document.body.scrollHeight;
+
+      if (hasReachedTop) {
+        setActiveAnchor("");
+      } else if (hasReachedBottom) {
+        const lastItem = Array.from(elements).pop();
+        const lastId = lastItem?.id ?? "";
+        setActiveAnchor(lastId);
+      }
+    };
+
+    document.addEventListener("scroll", handleScroll);
+
+    return () => {
+      elements.clear();
+      document.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  const observeFns = useMemo(() => {
+    return {
+      observe: (element: HTMLElement | null) => {
+        if (!element) return;
+
+        if (!observerRef.current) {
+          pendingElements.current.add(element);
+          return;
+        }
+
+        registeredElements.current.add(element);
+        observerRef.current.observe(element);
+      },
+      unobserve: (element: HTMLElement | null) => {
+        if (!element) return;
+
+        pendingElements.current.delete(element);
+        registeredElements.current.delete(element);
+        observerRef.current?.unobserve(element);
+      },
+    };
+  }, []);
+
+  const value = useMemo(
+    () => ({ activeAnchor, setActiveAnchor, ...observeFns }),
+    [activeAnchor, observeFns],
+  );
+
+  return (
+    <ViewportAnchorContext value={value}>{children}</ViewportAnchorContext>
+  );
+};

package/src/lib/components/context/ZudokuContext.ts

@@ -1,140 +1,140 @@
-import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
-import { useContext, useEffect, useMemo, useRef } from "react";
-import { matchPath, useLocation } from "react-router";
-import type { NavigationItem } from "../../../config/validators/NavigationSchema.js";
-import { useAuthState } from "../../authentication/state.js";
-import { applyRules } from "../../navigation/applyRules.js";
-import { joinUrl } from "../../util/joinUrl.js";
-import { CACHE_KEYS, useCache } from "../cache.js";
-import { getItemPath, traverseNavigation } from "../navigation/utils.js";
-import { ZudokuReactContext } from "./ZudokuReactContext.js";
-
-const useApitogoContext = () => {
-  const context = useContext(ZudokuReactContext);
-
-  if (!context) {
-    throw new Error(
-      "useApitogo must be used within an ApitogoProvider (from @lukoweb/apitogo/components).",
-    );
-  }
-
-  return context;
-};
-
-/** Prefer this over {@link useZudoku}. */
-export const useApitogo = useApitogoContext;
-
-/**
- * @deprecated Use {@link useApitogo} instead.
- */
-export const useZudoku = useApitogoContext;
-
-export const useApiIdentities = () => {
-  const { getApiIdentities } = useApitogo();
-  const { isAuthenticated } = useAuthState();
-  const { invalidateCache } = useCache();
-
-  useEffect(() => {
-    if (!isAuthenticated) {
-      invalidateCache("API_IDENTITIES");
-    }
-  }, [isAuthenticated, invalidateCache]);
-
-  return useQuery({
-    queryFn: getApiIdentities,
-    queryKey: CACHE_KEYS.API_IDENTITIES,
-  });
-};
-
-const extractAllPaths = (items: NavigationItem[]) => {
-  const paths = new Set<string>();
-
-  const collectPaths = (items: NavigationItem[]) => {
-    for (const item of items) {
-      const itemPath = getItemPath(item)?.split("?").at(0)?.split("#").at(0);
-
-      if (itemPath) paths.add(itemPath);
-      if (item.type === "category") {
-        collectPaths(item.items);
-      }
-    }
-  };
-  collectPaths(items);
-
-  return [...paths];
-};
-
-export const useCurrentNavigation = () => {
-  const context = useApitogo();
-  const { getPluginNavigation, navigation, navigationRules } = context;
-  const location = useLocation();
-  const loggedWarnings = useRef(new Set<string>());
-
-  const pathname = joinUrl(location.pathname);
-
-  const navItem = traverseNavigation(navigation, (item, parentCategories) => {
-    if (item.type === "link") return;
-    if (getItemPath(item) === pathname) {
-      return parentCategories.at(0) ?? item;
-    }
-  });
-
-  const { data } = useSuspenseQuery({
-    queryFn: () => getPluginNavigation(pathname),
-    queryKey: ["plugin-navigation", pathname],
-  });
-
-  let topNavItem = navItem;
-
-  if (!navItem && data.length > 0) {
-    const pluginBasePaths = extractAllPaths(data);
-
-    topNavItem = navigation
-      .flatMap((item) => {
-        const itemPath = getItemPath(item);
-        return itemPath ? [{ item, path: itemPath }] : [];
-      })
-      .sort((a, b) => b.path.length - a.path.length)
-      .find(({ path }) => {
-        return pluginBasePaths.some(
-          (basePath) =>
-            matchPath({ path, end: false }, basePath) ??
-            matchPath({ path: basePath, end: false }, path),
-        );
-      })?.item;
-  }
-
-  const finalNavigation = useMemo(() => {
-    const baseNavigation = [
-      ...(topNavItem?.type === "category" ? topNavItem.items : []),
-      ...data,
-    ];
-
-    if (topNavItem?.label && navigationRules.length > 0) {
-      const { result, warnings } = applyRules(
-        baseNavigation,
-        navigationRules,
-        topNavItem?.label,
-      );
-
-      if (import.meta.env.DEV) {
-        for (const warning of warnings) {
-          if (!loggedWarnings.current.has(warning)) {
-            loggedWarnings.current.add(warning);
-            // biome-ignore lint/suspicious/noConsole: Dev-only navigation rule warnings
-            console.warn(`[APIToGo] Navigation rule: ${warning}`);
-          }
-        }
-      }
-
-      return result;
-    }
-
-    return baseNavigation;
-  }, [topNavItem, data, navigationRules]);
-
-  return {
-    navigation: finalNavigation,
-    topNavItem,
-  };
-};
+import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
+import { useContext, useEffect, useMemo, useRef } from "react";
+import { matchPath, useLocation } from "react-router";
+import type { NavigationItem } from "../../../config/validators/NavigationSchema.js";
+import { useAuthState } from "../../authentication/state.js";
+import { applyRules } from "../../navigation/applyRules.js";
+import { joinUrl } from "../../util/joinUrl.js";
+import { CACHE_KEYS, useCache } from "../cache.js";
+import { getItemPath, traverseNavigation } from "../navigation/utils.js";
+import { ZudokuReactContext } from "./ZudokuReactContext.js";
+
+const useApitogoContext = () => {
+  const context = useContext(ZudokuReactContext);
+
+  if (!context) {
+    throw new Error(
+      "useApitogo must be used within an ApitogoProvider (from @lukoweb/apitogo/components).",
+    );
+  }
+
+  return context;
+};
+
+/** Prefer this over {@link useZudoku}. */
+export const useApitogo = useApitogoContext;
+
+/**
+ * @deprecated Use {@link useApitogo} instead.
+ */
+export const useZudoku = useApitogoContext;
+
+export const useApiIdentities = () => {
+  const { getApiIdentities } = useApitogo();
+  const { isAuthenticated } = useAuthState();
+  const { invalidateCache } = useCache();
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      invalidateCache("API_IDENTITIES");
+    }
+  }, [isAuthenticated, invalidateCache]);
+
+  return useQuery({
+    queryFn: getApiIdentities,
+    queryKey: CACHE_KEYS.API_IDENTITIES,
+  });
+};
+
+const extractAllPaths = (items: NavigationItem[]) => {
+  const paths = new Set<string>();
+
+  const collectPaths = (items: NavigationItem[]) => {
+    for (const item of items) {
+      const itemPath = getItemPath(item)?.split("?").at(0)?.split("#").at(0);
+
+      if (itemPath) paths.add(itemPath);
+      if (item.type === "category") {
+        collectPaths(item.items);
+      }
+    }
+  };
+  collectPaths(items);
+
+  return [...paths];
+};
+
+export const useCurrentNavigation = () => {
+  const context = useApitogo();
+  const { getPluginNavigation, navigation, navigationRules } = context;
+  const location = useLocation();
+  const loggedWarnings = useRef(new Set<string>());
+
+  const pathname = joinUrl(location.pathname);
+
+  const navItem = traverseNavigation(navigation, (item, parentCategories) => {
+    if (item.type === "link") return;
+    if (getItemPath(item) === pathname) {
+      return parentCategories.at(0) ?? item;
+    }
+  });
+
+  const { data } = useSuspenseQuery({
+    queryFn: () => getPluginNavigation(pathname),
+    queryKey: ["plugin-navigation", pathname],
+  });
+
+  let topNavItem = navItem;
+
+  if (!navItem && data.length > 0) {
+    const pluginBasePaths = extractAllPaths(data);
+
+    topNavItem = navigation
+      .flatMap((item) => {
+        const itemPath = getItemPath(item);
+        return itemPath ? [{ item, path: itemPath }] : [];
+      })
+      .sort((a, b) => b.path.length - a.path.length)
+      .find(({ path }) => {
+        return pluginBasePaths.some(
+          (basePath) =>
+            matchPath({ path, end: false }, basePath) ??
+            matchPath({ path: basePath, end: false }, path),
+        );
+      })?.item;
+  }
+
+  const finalNavigation = useMemo(() => {
+    const baseNavigation = [
+      ...(topNavItem?.type === "category" ? topNavItem.items : []),
+      ...data,
+    ];
+
+    if (topNavItem?.label && navigationRules.length > 0) {
+      const { result, warnings } = applyRules(
+        baseNavigation,
+        navigationRules,
+        topNavItem?.label,
+      );
+
+      if (import.meta.env.DEV) {
+        for (const warning of warnings) {
+          if (!loggedWarnings.current.has(warning)) {
+            loggedWarnings.current.add(warning);
+            // biome-ignore lint/suspicious/noConsole: Dev-only navigation rule warnings
+            console.warn(`[APIToGo] Navigation rule: ${warning}`);
+          }
+        }
+      }
+
+      return result;
+    }
+
+    return baseNavigation;
+  }, [topNavItem, data, navigationRules]);
+
+  return {
+    navigation: finalNavigation,
+    topNavItem,
+  };
+};

package/src/lib/components/context/ZudokuProvider.tsx

@@ -1,22 +1,22 @@
-import { use, type PropsWithChildren } from "react";
-import type { ZudokuContext } from "../../core/ZudokuContext.js";
-import { ZudokuReactContext } from "./ZudokuReactContext.js";
-
-const ZudokuProviderImpl = ({
-  children,
-  context,
-}: PropsWithChildren<{ context: ZudokuContext }>) => {
-  if (context.initialize) use(context.initialize);
-
-  return (
-    <ZudokuReactContext.Provider value={context}>
-      {children}
-    </ZudokuReactContext.Provider>
-  );
-};
-
-/** @deprecated Use {@link ApitogoProvider} instead. */
-export const ZudokuProvider = ZudokuProviderImpl;
-
-/** Prefer this over {@link ZudokuProvider}. */
-export const ApitogoProvider = ZudokuProviderImpl;
+import { use, type PropsWithChildren } from "react";
+import type { ZudokuContext } from "../../core/ZudokuContext.js";
+import { ZudokuReactContext } from "./ZudokuReactContext.js";
+
+const ZudokuProviderImpl = ({
+  children,
+  context,
+}: PropsWithChildren<{ context: ZudokuContext }>) => {
+  if (context.initialize) use(context.initialize);
+
+  return (
+    <ZudokuReactContext.Provider value={context}>
+      {children}
+    </ZudokuReactContext.Provider>
+  );
+};
+
+/** @deprecated Use {@link ApitogoProvider} instead. */
+export const ZudokuProvider = ZudokuProviderImpl;
+
+/** Prefer this over {@link ZudokuProvider}. */
+export const ApitogoProvider = ZudokuProviderImpl;

package/src/lib/components/context/ZudokuReactContext.tsx

@@ -1,17 +1,17 @@
-import { type Context, createContext } from "react";
-import type { ZudokuContext } from "../../core/ZudokuContext.js";
-
-/**
- * During SSR, Vite's module runner can load the same module multiple times
- * (once for the main app, once for external plugins), creating duplicate
- * React contexts that don't share state.
- */
-declare global {
-  var __ZUDOKU_CONTEXT: Context<ZudokuContext | undefined>;
-}
-
-globalThis.__ZUDOKU_CONTEXT ??= createContext<ZudokuContext | undefined>(
-  undefined,
-);
-
-export const ZudokuReactContext = globalThis.__ZUDOKU_CONTEXT;
+import { type Context, createContext } from "react";
+import type { ZudokuContext } from "../../core/ZudokuContext.js";
+
+/**
+ * During SSR, Vite's module runner can load the same module multiple times
+ * (once for the main app, once for external plugins), creating duplicate
+ * React contexts that don't share state.
+ */
+declare global {
+  var __ZUDOKU_CONTEXT: Context<ZudokuContext | undefined>;
+}
+
+globalThis.__ZUDOKU_CONTEXT ??= createContext<ZudokuContext | undefined>(
+  undefined,
+);
+
+export const ZudokuReactContext = globalThis.__ZUDOKU_CONTEXT;

package/src/lib/components/index.ts

@@ -6,6 +6,8 @@ export { ApitogoError } from "../util/invariant.js";
 /** @deprecated Use {@link ApitogoError} instead. */
 export { ZudokuError } from "../util/invariant.js";
 export { ClientOnly } from "./ClientOnly.js";
+export { Footer } from "./Footer.js";
+export { Header } from "./Header.js";
 export { Heading } from "./Heading.js";
 export { Markdown } from "./Markdown.js";
 export { Search } from "./Search.js";