zudoku 0.0.0-feat-openapi-docs-redesign.dab3fc6a → 0.0.0-feat-navigation-at-property.z8cd07fa5

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/MobileTopNavigation.tsx

@@ -1,6 +1,7 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { MenuIcon } from "lucide-react";
 import { useState } from "react";
+import { Separator } from "zudoku/ui/Separator.js";
 import { Skeleton } from "zudoku/ui/Skeleton.js";
 import { useAuth } from "../authentication/hook.js";
 import {
@@ -28,7 +29,9 @@ export const MobileTopNavigation = () => {
   const [drawerOpen, setDrawerOpen] = useState(false);
 
   const accountItems = getProfileMenuItems();
-  const filteredItems = navigation.filter(shouldShowItem(authState, context));
+  const filteredItems = navigation.filter(
+    shouldShowItem({ auth: authState, context }),
+  );
 
   return (
     <Drawer
@@ -43,7 +46,7 @@ export const MobileTopNavigation = () => {
         <PageProgress />
       </div>
       <DrawerContent
-        className="lg:hidden h-[100dvh] end-0 start-auto w-[320px] rounded-none"
+        className="lg:hidden h-dvh end-0 start-auto w-[320px] rounded-none"
         aria-describedby={undefined}
       >
         <div className="p-4 overflow-y-auto overscroll-none h-full flex flex-col justify-between">
@@ -84,13 +87,17 @@ export const MobileTopNavigation = () => {
                   )}
                 </ClientOnly>
               )}
-              {filteredItems.map((item) => (
-                <li key={item.label}>
-                  <button type="button" onClick={() => setDrawerOpen(false)}>
-                    <TopNavItem {...item} />
-                  </button>
-                </li>
-              ))}
+              {filteredItems.map((item) =>
+                item.type === "separator" ? (
+                  <Separator className="w-full" key={item.label} />
+                ) : item.type !== "section" && item.type !== "filter" ? (
+                  <li key={item.label}>
+                    <button type="button" onClick={() => setDrawerOpen(false)}>
+                      <TopNavItem {...item} />
+                    </button>
+                  </li>
+                ) : null,
+              )}
               {isAuthEnabled && isAuthenticated && accountItems.length > 0 && (
                 <ClientOnly
                   fallback={<Skeleton className="rounded-sm h-5 w-24 mr-4" />}

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/Slot.test.tsx

@@ -20,7 +20,7 @@ import { Slot } from "./Slot.js";
 
 const createWrapper = (slots: Record<string, ReactNode> = {}) => {
   const queryClient = new QueryClient();
-  const context = new ZudokuContext({}, queryClient);
+  const context = new ZudokuContext({}, queryClient, {});
 
   const wrapper = ({ children }: PropsWithChildren) => (
     <MemoryRouter initialEntries={["/", "/page"]}>

package/src/lib/components/TopNavigation.tsx

@@ -2,6 +2,7 @@ import { cx } from "class-variance-authority";
 import { deepEqual } from "fast-equals";
 import { Suspense } from "react";
 import { NavLink, type NavLinkProps } from "react-router";
+import { Separator } from "zudoku/ui/Separator.js";
 import type { NavigationItem } from "../../config/validators/NavigationSchema.js";
 import { useAuth } from "../authentication/hook.js";
 import { joinUrl } from "../util/joinUrl.js";
@@ -13,7 +14,7 @@ export const TopNavigation = () => {
   const context = useZudoku();
   const { navigation } = context;
   const auth = useAuth();
-  const filteredItems = navigation.filter(shouldShowItem(auth, context));
+  const filteredItems = navigation.filter(shouldShowItem({ auth, context }));
 
   if (filteredItems.length === 0 || import.meta.env.MODE === "standalone") {
     return <style>{`:root { --top-nav-height: 0px; }`}</style>;
@@ -24,11 +25,17 @@ export const TopNavigation = () => {
       <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) => (
-              <li key={item.label + item.type}>
-                <TopNavItem {...item} />
-              </li>
-            ))}
+            {filteredItems.map((item) =>
+              item.type === "separator" ? (
+                <li key={item.label} className="-mx-4 h-7">
+                  <Separator orientation="vertical" />
+                </li>
+              ) : item.type !== "section" && item.type !== "filter" ? (
+                <li key={item.label + item.type}>
+                  <TopNavItem {...item} />
+                </li>
+              ) : null,
+            )}
           </ul>
         </nav>
         <Slot.Target name="top-navigation-side" />
@@ -51,7 +58,11 @@ const getPathForItem = (item: NavigationItem): string => {
 
       return (
         traverseNavigationItem(item, (child) => {
-          if (child.type !== "category") {
+          if (
+            child.type !== "category" &&
+            child.type !== "separator" &&
+            child.type !== "section"
+          ) {
             return getPathForItem(child);
           }
         }) ?? ""
@@ -59,6 +70,8 @@ const getPathForItem = (item: NavigationItem): string => {
     }
     case "custom-page":
       return item.path;
+    default:
+      return "";
   }
 };
 
@@ -97,7 +110,12 @@ export const TopNavLink = ({
   );
 };
 
-export const TopNavItem = (item: NavigationItem) => {
+export const TopNavItem = (
+  item: Exclude<
+    NavigationItem,
+    { type: "separator" } | { type: "section" } | { type: "filter" }
+  >,
+) => {
   const currentNav = useCurrentNavigation();
   const isActiveTopNavItem = deepEqual(currentNav.topNavItem, item);
 

package/src/lib/components/Zudoku.tsx

@@ -5,7 +5,7 @@ import { ThemeProvider } from "next-themes";
 import {
   memo,
   type PropsWithChildren,
-  useContext,
+  Suspense,
   useEffect,
   useMemo,
   useState,
@@ -18,7 +18,6 @@ import {
   type ZudokuContextOptions,
 } from "../core/ZudokuContext.js";
 import { TopLevelError } from "../errors/TopLevelError.js";
-import { StaggeredRenderContext } from "../plugins/openapi/StaggeredRender.js";
 import { MdxComponents } from "../util/MdxComponents.js";
 import "../util/requestIdleCallbackPolyfill.js";
 import {
@@ -33,7 +32,13 @@ import { ZudokuProvider } from "./context/ZudokuProvider.js";
 let zudokuContext: ZudokuContext | undefined;
 
 const ZudokuInner = memo(
-  ({ children, ...props }: PropsWithChildren<ZudokuContextOptions>) => {
+  ({
+    children,
+    env,
+    ...props
+  }: PropsWithChildren<
+    ZudokuContextOptions & { env: Record<string, string> }
+  >) => {
     const components = useMemo(
       () => ({ ...DEFAULT_COMPONENTS, ...props.overrides }),
       [props.overrides],
@@ -56,12 +61,7 @@ const ZudokuInner = memo(
         ...props.mdx?.components,
       };
     }, [props.mdx?.components, props.plugins]);
-    const { stagger } = useContext(StaggeredRenderContext);
     const [didNavigate, setDidNavigate] = useState(false);
-    const staggeredValue = useMemo(
-      () => (didNavigate ? { stagger: true } : { stagger }),
-      [stagger, didNavigate],
-    );
     const navigation = useNavigation();
     const queryClient = useQueryClient();
 
@@ -72,20 +72,17 @@ const ZudokuInner = memo(
       setDidNavigate(true);
     }, [didNavigate, navigation.location]);
 
-    zudokuContext ??= new ZudokuContext(props, queryClient);
+    zudokuContext ??= new ZudokuContext(props, queryClient, env);
 
-    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}
-        <StaggeredRenderContext.Provider value={staggeredValue}>
-          <ZudokuProvider context={zudokuContext}>
+        <Helmet>{heads}</Helmet>
+        <ZudokuProvider context={zudokuContext}>
+          <Suspense fallback={<div>Zudoku Loading...</div>}>
             <RouterEventsEmitter />
             <SlotProvider slots={props.slots ?? props.UNSAFE_slotlets}>
               <MDXProvider components={mdxComponents}>
@@ -98,8 +95,8 @@ const ZudokuInner = memo(
                 </ThemeProvider>
               </MDXProvider>
             </SlotProvider>
-          </ZudokuProvider>
-        </StaggeredRenderContext.Provider>
+          </Suspense>
+        </ZudokuProvider>
       </>
     );
   },
@@ -107,7 +104,11 @@ const ZudokuInner = memo(
 
 ZudokuInner.displayName = "ZudokuInner";
 
-const Zudoku = (props: ZudokuContextOptions) => {
+const Zudoku = (
+  props: PropsWithChildren<
+    ZudokuContextOptions & { env: Record<string, string> }
+  >,
+) => {
   return (
     <ErrorBoundary FallbackComponent={TopLevelError}>
       <ZudokuInner {...props} />

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

@@ -1,16 +1,16 @@
 import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
-import { createContext, useContext, useEffect } from "react";
+import { useContext, useEffect, useMemo } from "react";
 import { matchPath, useLocation } from "react-router";
 import type { NavigationItem } from "../../../config/validators/NavigationSchema.js";
 import { useAuthState } from "../../authentication/state.js";
-import type { ZudokuContext } from "../../core/ZudokuContext.js";
+import {
+  isPositionedItem,
+  mergePositionedItems,
+} from "../../navigation/positionItems.js";
 import { joinUrl } from "../../util/joinUrl.js";
 import { CACHE_KEYS, useCache } from "../cache.js";
 import { traverseNavigation } from "../navigation/utils.js";
-
-export const ZudokuReactContext = createContext<ZudokuContext | undefined>(
-  undefined,
-);
+import { ZudokuReactContext } from "./ZudokuReactContext.js";
 
 export const useZudoku = () => {
   const context = useContext(ZudokuReactContext);
@@ -73,10 +73,12 @@ const extractAllPaths = (items: NavigationItem[]) => {
 };
 
 export const useCurrentNavigation = () => {
-  const { getPluginNavigation, navigation } = useZudoku();
+  const context = useZudoku();
+  const { getPluginNavigation, navigation } = context;
   const location = useLocation();
 
   const navItem = traverseNavigation(navigation, (item, parentCategories) => {
+    if (item.type === "link") return;
     if (getItemPath(item) === location.pathname) {
       return parentCategories.at(0) ?? item;
     }
@@ -88,7 +90,19 @@ export const useCurrentNavigation = () => {
   });
 
   let topNavItem = navItem;
-  if (!navItem && data.length > 0) {
+  let navLabel = topNavItem?.label;
+
+  // If navItem is positioned, find the actual top-level category
+  if (navItem && isPositionedItem(navItem)) {
+    const targetLabel = navItem.at.path.split("/").filter(Boolean).at(0);
+
+    if (targetLabel) {
+      navLabel = targetLabel;
+      topNavItem = navigation.find(
+        (item) => item.label?.toLowerCase() === targetLabel.toLowerCase(),
+      );
+    }
+  } else if (!navItem && data.length > 0) {
     const pluginBasePaths = extractAllPaths(data);
 
     topNavItem = navigation
@@ -104,13 +118,20 @@ export const useCurrentNavigation = () => {
             matchPath({ path: basePath, end: false }, path),
         );
       })?.item;
+    navLabel = topNavItem?.label;
   }
 
-  return {
-    navigation: [
-      ...(navItem?.type === "category" ? navItem.items : []),
+  const repositionedNavigation = useMemo(() => {
+    const baseNavigation = [
+      ...(topNavItem?.type === "category" ? topNavItem.items : []),
       ...data,
-    ],
+    ];
+
+    return mergePositionedItems(baseNavigation, navigation, navLabel);
+  }, [topNavItem, data, navigation, navLabel]);
+
+  return {
+    navigation: repositionedNavigation,
     topNavItem,
   };
 };

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

@@ -2,7 +2,7 @@ import { useSuspenseQuery } from "@tanstack/react-query";
 import type { PropsWithChildren } from "react";
 import type { ZudokuContext } from "../../core/ZudokuContext.js";
 import { NO_DEHYDRATE } from "../cache.js";
-import { ZudokuReactContext } from "./ZudokuContext.js";
+import { ZudokuReactContext } from "./ZudokuReactContext.js";
 
 export const ZudokuProvider = ({
   children,

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

@@ -0,0 +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;

package/src/lib/components/index.ts

@@ -1,42 +1,26 @@
-import { useMDXComponents as useMDXComponentsImport } from "@mdx-js/react";
-import { Helmet } from "@zudoku/react-helmet-async";
-import { useTheme as useThemeImport } from "next-themes";
-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 { 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 { Markdown as MarkdownImport } from "./Markdown.js";
-import { Slot as SlotImport } from "./Slot.js";
-import { Spinner as SpinnerImport } from "./Spinner.js";
-import { Typography as TypographyImport } from "./Typography.js";
-import { Zudoku as ZudokuImport } from "./Zudoku.js";
+export { Helmet as Head } from "@zudoku/react-helmet-async";
+export { Link } from "react-router";
+export { Button } from "../ui/Button.js";
+export { Callout } from "../ui/Callout.js";
+export { ZudokuError } from "../util/invariant.js";
+export { ClientOnly } from "./ClientOnly.js";
+export { Heading } from "./Heading.js";
+export { Markdown } from "./Markdown.js";
+export { Search } from "./Search.js";
+export { Slot } from "./Slot.js";
+export { Spinner } from "./Spinner.js";
+export { Typography } from "./Typography.js";
+export { Zudoku } from "./Zudoku.js";
 
-export const Head = /*@__PURE__*/ Helmet;
-export const Callout = /*@__PURE__*/ CalloutImport;
-export const Markdown = /*@__PURE__*/ MarkdownImport;
-export const Spinner = /*@__PURE__*/ SpinnerImport;
-export const ClientOnly = /*@__PURE__*/ ClientOnlyImport;
-export const Button = /*@__PURE__*/ ButtonImport;
-export const Link = /*@__PURE__*/ LinkImport;
-export const Zudoku = /*@__PURE__*/ ZudokuImport;
-export const Typography = /*@__PURE__*/ TypographyImport;
-export const Slot = /*@__PURE__*/ SlotImport;
+//
 
 /** @deprecated Import from `zudoku/hooks` instead */
-export const useMDXComponents = /*@__PURE__*/ useMDXComponentsImport;
+export { useMDXComponents } from "@mdx-js/react";
 /** @deprecated Import from `zudoku/hooks` instead */
-export const useZudoku = /*@__PURE__*/ useZudokuImport;
+export { useTheme } from "next-themes";
 /** @deprecated Import from `zudoku/hooks` instead */
-export const useAuth = /*@__PURE__*/ useAuthImport;
+export { useAuth } from "../authentication/hook.js";
 /** @deprecated Import from `zudoku/hooks` instead */
-export const useCache = /*@__PURE__*/ useCacheImport;
+export { CACHE_KEYS, useCache } from "./cache.js";
 /** @deprecated Import from `zudoku/hooks` instead */
-export const CACHE_KEYS = /*@__PURE__*/ CACHE_KEYS_IMPORT;
-/** @deprecated Import from `zudoku/hooks` instead */
-export const useTheme = /*@__PURE__*/ useThemeImport;
+export { useZudoku } from "./context/ZudokuContext.js";

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

@@ -2,6 +2,7 @@ import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import type { NavigationItem as NavigationItemType } from "../../../config/validators/NavigationSchema.js";
 import { DrawerContent, DrawerTitle } from "../../ui/Drawer.js";
 import { Slot } from "../Slot.js";
+import { NavigationFilterProvider } from "./NavigationFilterContext.js";
 import { NavigationItem } from "./NavigationItem.js";
 import { NavigationWrapper } from "./NavigationWrapper.js";
 
@@ -12,7 +13,7 @@ export const Navigation = ({
   onRequestClose?: () => void;
   navigation: NavigationItemType[];
 }) => (
-  <>
+  <NavigationFilterProvider>
     <NavigationWrapper>
       <Slot.Target name="navigation-before" />
       {navigation.map((item) => (
@@ -30,7 +31,7 @@ export const Navigation = ({
       <Slot.Target name="navigation-after" />
     </NavigationWrapper>
     <DrawerContent
-      className="lg:hidden h-[100dvh] start-0 w-[320px] rounded-none"
+      className="lg:hidden h-dvh start-0 w-[320px] rounded-none"
       aria-describedby={undefined}
     >
       <div className="p-4 overflow-y-auto overscroll-none">
@@ -46,5 +47,5 @@ export const Navigation = ({
         ))}
       </div>
     </DrawerContent>
-  </>
+  </NavigationFilterProvider>
 );

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

@@ -7,6 +7,7 @@ import { Button } from "zudoku/ui/Button.js";
 import type { NavigationCategory as NavigationCategoryType } from "../../../config/validators/NavigationSchema.js";
 import { cn } from "../../util/cn.js";
 import { joinUrl } from "../../util/joinUrl.js";
+import { useNavigationFilter } from "./NavigationFilterContext.js";
 import { NavigationItem } from "./NavigationItem.js";
 import { navigationListItem, useIsCategoryOpen } from "./utils.js";
 
@@ -20,6 +21,7 @@ const NavigationCategoryInner = ({
   const isCategoryOpen = useIsCategoryOpen(category);
   const [hasInteracted, setHasInteracted] = useState(false);
   const location = useLocation();
+  const { query: filterQuery } = useNavigationFilter();
 
   const isCollapsible = category.collapsible ?? true;
   const isCollapsed = category.collapsed ?? true;
@@ -37,6 +39,13 @@ const NavigationCategoryInner = ({
     }
   }, [isCategoryOpen]);
 
+  // Auto-expand when there's an active filter query
+  useEffect(() => {
+    if (filterQuery.trim()) {
+      setOpen(true);
+    }
+  }, [filterQuery]);
+
   const ToggleButton = isCollapsible && (
     <Button
       onClick={(e) => {

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

@@ -0,0 +1,28 @@
+import {
+  createContext,
+  type PropsWithChildren,
+  useContext,
+  useState,
+} from "react";
+
+type NavigationFilterContextType = {
+  query: string;
+  setQuery: (query: string) => void;
+};
+
+const NavigationFilterContext = createContext<NavigationFilterContextType>({
+  query: "",
+  setQuery: () => {},
+});
+
+export const NavigationFilterProvider = ({ children }: PropsWithChildren) => {
+  const [query, setQuery] = useState("");
+
+  return (
+    <NavigationFilterContext.Provider value={{ query, setQuery }}>
+      {children}
+    </NavigationFilterContext.Provider>
+  );
+};
+
+export const useNavigationFilter = () => useContext(NavigationFilterContext);

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

@@ -0,0 +1,35 @@
+import { SearchIcon, XIcon } from "lucide-react";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "zudoku/ui/InputGroup.js";
+import { useNavigationFilter } from "./NavigationFilterContext.js";
+
+export const NavigationFilterInput = ({
+  placeholder,
+}: {
+  placeholder?: string;
+}) => {
+  const { query, setQuery } = useNavigationFilter();
+
+  return (
+    <InputGroup className="my-2">
+      <InputGroupAddon>
+        <SearchIcon className="size-3.5" />
+      </InputGroupAddon>
+      <InputGroupInput
+        type="text"
+        placeholder={placeholder}
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+      />
+      {query && (
+        <InputGroupButton onClick={() => setQuery("")}>
+          <XIcon className="size-3" />
+        </InputGroupButton>
+      )}
+    </InputGroup>
+  );
+};