zudoku 0.0.0-z63644134 → 0.0.0-z6b1ecd2d

package/lib/zudoku.auth-auth0.js

@@ -1,4 +1,4 @@
-import { b as r, j as a } from "./ZudokuContext-BBI06sOx.js";
+import { b as r, j as a } from "./ZudokuContext-C6wlLMUH.js";
 import { OpenIDAuthenticationProvider as p } from "./zudoku.auth-openid.js";
 class d extends p {
   options;

package/lib/zudoku.auth-azureb2c.js

@@ -1,10 +1,10 @@
 import { j as n } from "./jsx-runtime-BzflLqGi.js";
 import { PublicClientApplication as A, EventType as f } from "@azure/msal-browser";
-import { E as I } from "./Zudoku-DUsdmPME.js";
+import { E as I } from "./Zudoku-DA1yA-te.js";
 import { C as T } from "./ClientOnly-E7hGysn1.js";
-import { j as S, b as h } from "./ZudokuContext-BBI06sOx.js";
-import { C, A as c } from "./errors-7hgPDs1h.js";
-import { C as k, O as w } from "./OAuthErrorPage-01Ke086W.js";
+import { j as S, b as h } from "./ZudokuContext-C6wlLMUH.js";
+import { C, A as c } from "./errors-CYLN8SNc.js";
+import { C as k, O as w } from "./OAuthErrorPage-D7n-_cqN.js";
 const u = "/oauth/callback";
 class y extends C {
   msalInstance;

package/lib/zudoku.auth-clerk.js

@@ -1,7 +1,7 @@
 import { j as a } from "./jsx-runtime-BzflLqGi.js";
 import { LogOutIcon as m } from "lucide-react";
-import { S as p, a as f, b as h } from "./SignUp-8kDBaLbO.js";
-import { b as r } from "./ZudokuContext-BBI06sOx.js";
+import { S as p, a as f, b as h } from "./SignUp-ChqXj9vd.js";
+import { b as r } from "./ZudokuContext-C6wlLMUH.js";
 const R = ({
   clerkPubKey: u,
   jwtTemplateName: c,

package/lib/zudoku.auth-firebase.js

@@ -1,9 +1,9 @@
 import "./jsx-runtime-BzflLqGi.js";
-import { y as e } from "./firebase-Dwn-2ju-.js";
+import { y as e } from "./firebase-DF-VVKB7.js";
 import "./invariant-B_t_F2s_.js";
-import "./errors-7hgPDs1h.js";
-import "./SignUp-8kDBaLbO.js";
-import "./ZudokuContext-BBI06sOx.js";
+import "./errors-CYLN8SNc.js";
+import "./SignUp-ChqXj9vd.js";
+import "./ZudokuContext-C6wlLMUH.js";
 export {
   e as default
 };

package/lib/zudoku.auth-openid.js

@@ -1,10 +1,10 @@
 import { j as D } from "./jsx-runtime-BzflLqGi.js";
 import { g as Le } from "./invariant-B_t_F2s_.js";
-import { E as Ue } from "./Zudoku-DUsdmPME.js";
+import { E as Ue } from "./Zudoku-DA1yA-te.js";
 import { C as xe } from "./ClientOnly-E7hGysn1.js";
-import { j as Ce, b as S } from "./ZudokuContext-BBI06sOx.js";
-import { C as Ie, O as re, A as R } from "./errors-7hgPDs1h.js";
-import { C as je, O as Oe } from "./OAuthErrorPage-01Ke086W.js";
+import { j as Ce, b as S } from "./ZudokuContext-C6wlLMUH.js";
+import { C as Ie, O as re, A as R } from "./errors-CYLN8SNc.js";
+import { C as je, O as Oe } from "./OAuthErrorPage-D7n-_cqN.js";
 var J = { exports: {} }, De = J.exports, oe;
 function Je() {
   return oe || (oe = 1, (function(t) {

package/lib/zudoku.auth-supabase.js

@@ -1,12 +1,12 @@
 import { j as a } from "./jsx-runtime-BzflLqGi.js";
 import { createClient as g } from "@supabase/supabase-js";
-import { C as m, A as h } from "./errors-7hgPDs1h.js";
-import { S as f } from "./SignUp-8kDBaLbO.js";
-import { b as u } from "./ZudokuContext-BBI06sOx.js";
+import { C as m, A as h } from "./errors-CYLN8SNc.js";
+import { S as f } from "./SignUp-ChqXj9vd.js";
+import { b as u } from "./ZudokuContext-C6wlLMUH.js";
 import { Auth as v } from "@supabase/auth-ui-react";
 import { ThemeSupa as S } from "@supabase/auth-ui-shared";
 import { b as T } from "./chunk-EPOLDU6W-C6C8jAwd.js";
-import { H as A } from "./Zudoku-DUsdmPME.js";
+import { H as A } from "./Zudoku-DA1yA-te.js";
 const c = ({
   client: i,
   config: e,

package/lib/zudoku.components.js

@@ -3,11 +3,11 @@ import { Button as s } from "./ui/Button.js";
 import { Callout as u } from "./ui/Callout.js";
 import { Z as m } from "./invariant-B_t_F2s_.js";
 import { C as x } from "./ClientOnly-E7hGysn1.js";
-import { H as C, M as d, S, a as h, T as k, Z as l } from "./Zudoku-DUsdmPME.js";
+import { H as C, M as d, S, a as h, T as k, Z as l } from "./Zudoku-DA1yA-te.js";
 import { S as Z } from "./Spinner-CI6bRyZw.js";
 import { z as y } from "./index-DAWHN3cH.js";
-import { u as M } from "./hook-ZEd1Es7D.js";
-import { C as c, u as g, a as A } from "./ZudokuContext-BBI06sOx.js";
+import { u as M } from "./hook-C35h0YhF.js";
+import { C as c, u as g, a as A } from "./ZudokuContext-C6wlLMUH.js";
 import { L as w } from "./chunk-EPOLDU6W-C6C8jAwd.js";
 import { u as B } from "./useExposedProps-CzTDfXfq.js";
 export {

package/lib/zudoku.hooks.js

@@ -1,7 +1,7 @@
 import { z as C } from "./index-DAWHN3cH.js";
-import { u as D } from "./hook-ZEd1Es7D.js";
-import { a as n } from "./ZudokuContext-BBI06sOx.js";
-import { C as z, u as A } from "./ZudokuContext-BBI06sOx.js";
+import { u as D } from "./hook-C35h0YhF.js";
+import { a as n } from "./ZudokuContext-C6wlLMUH.js";
+import { C as z, u as A } from "./ZudokuContext-C6wlLMUH.js";
 import { a as S, u as v } from "./useExposedProps-CzTDfXfq.js";
 import { useState as f, useEffect as m } from "react";
 function E(t, e) {

package/lib/zudoku.mermaid.js

@@ -1,9 +1,9 @@
 import "./jsx-runtime-BzflLqGi.js";
 import "./useSuspenseQuery-CSB_rVek.js";
 import "react";
-import { M } from "./Mermaid-B1xNo-pf.js";
+import { M } from "./Mermaid-JEnWyK0s.js";
 import "./index-DAWHN3cH.js";
-import "./ZudokuContext-BBI06sOx.js";
+import "./ZudokuContext-C6wlLMUH.js";
 import "./Spinner-CI6bRyZw.js";
 export {
   M as Mermaid

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

@@ -1,13 +1,13 @@
 import { j as t } from "./jsx-runtime-BzflLqGi.js";
-import { s as f } from "./index-Dxdhrp-I.js";
+import { s as f } from "./index-DrAVvbXa.js";
 import { c as b, L as j, m as x } from "./chunk-EPOLDU6W-C6C8jAwd.js";
-import { b as v, j as p } from "./ZudokuContext-BBI06sOx.js";
+import { b as v, j as p } from "./ZudokuContext-C6wlLMUH.js";
 import { u as y } from "./useSuspenseQuery-CSB_rVek.js";
 import { H as N } from "./index.esm-Ca5zvoff.js";
 import "./ui/Button.js";
 import "lucide-react";
 import "react";
-import { H as k, M as S } from "./Zudoku-DUsdmPME.js";
+import { H as k, M as S } from "./Zudoku-DA1yA-te.js";
 import "./index-DAWHN3cH.js";
 const w = ({
   items: n,

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

@@ -3,13 +3,13 @@ import { TrashIcon as me, CircleSlashIcon as z, CheckIcon as xe, XIcon as ye, Pe
 import { Z as M, i as E } from "./invariant-B_t_F2s_.js";
 import * as F from "react";
 import { createContext as Q, useRef as A, useLayoutEffect as Ce, useEffect as re, useId as H, useContext as V, useInsertionEffect as we, useMemo as L, useCallback as ke, Children as Ee, isValidElement as Ie, useState as I } from "react";
-import { D as Ke, c as be, a as te, E as De } from "./Zudoku-DUsdmPME.js";
+import { D as Ke, d as be, a as te, E as De } from "./Zudoku-DA1yA-te.js";
 import { Button as _ } from "./ui/Button.js";
-import { a as B } from "./ZudokuContext-BBI06sOx.js";
+import { a as B } from "./ZudokuContext-C6wlLMUH.js";
 import "./index-DAWHN3cH.js";
-import { u as ae } from "./hook-ZEd1Es7D.js";
+import { u as ae } from "./hook-C35h0YhF.js";
 import { F as Pe, g as Ae, j as Se, h as Re, d as Ne, I as Oe, a as Te, b as qe, k as Me, c as Fe } from "./Frame-DKlOmSkU.js";
-import { A as D, a as P, b as oe } from "./Mermaid-B1xNo-pf.js";
+import { A as D, a as P, b as oe } from "./Mermaid-JEnWyK0s.js";
 import { e as Z, f as S, D as G, g as J, a as Y, b as U, c as W, d as le } from "./Dialog-hlvmmQ_c.js";
 import { a as ce, u as $e } from "./useSuspenseQuery-CSB_rVek.js";
 import { u as q } from "./useMutation-CFMGlAMW.js";

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

@@ -1,4 +1,4 @@
-import { t as o } from "./ZudokuContext-BBI06sOx.js";
+import { t as o } from "./ZudokuContext-C6wlLMUH.js";
 const u = (a = []) => ({
   getRoutes: () => {
     const e = [];

package/lib/zudoku.plugin-markdown.js

@@ -4,7 +4,7 @@ const p = (t) => ({
     ([e, a]) => ({
       path: e,
       lazy: async () => {
-        const { MdxPage: n } = await import("./MdxPage-B1G4W1TK.js"), { default: o, ...s } = await a();
+        const { MdxPage: n } = await import("./MdxPage-dzCPGdvD.js"), { default: o, ...s } = await a();
         return {
           element: /* @__PURE__ */ r.jsx(
             n,

package/lib/zudoku.plugin-openapi.js

@@ -2,8 +2,8 @@ import "./jsx-runtime-BzflLqGi.js";
 import "lucide-react";
 import "./chunk-EPOLDU6W-C6C8jAwd.js";
 import "./ui/Button.js";
-import "./ZudokuContext-BBI06sOx.js";
-import { y as e, U as n, z as s } from "./index-CyIW9rHv.js";
+import "./ZudokuContext-C6wlLMUH.js";
+import { y as e, U as n, z as s } from "./index-Ck4TmzTO.js";
 export {
   e as GetNavigationOperationsQuery,
   n as UNTAGGED_PATH,

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

@@ -8,8 +8,8 @@ import { B as D } from "./Button-GUVe7pmt.js";
 import { C as B, a as S, b as N, c as O, d as V, e as z } from "./Command-N6VujV30.js";
 import { c as K } from "./Dialog-hlvmmQ_c.js";
 import { cn as w } from "./ui/util.js";
-import { j as E, b as G, a as L } from "./ZudokuContext-BBI06sOx.js";
-import { S as U } from "./RouteGuard-B1lCR0C_.js";
+import { j as E, b as G, a as L } from "./ZudokuContext-C6wlLMUH.js";
+import { S as U } from "./RouteGuard-BMbu_Yb7.js";
 import { u as H, L as k } from "./chunk-EPOLDU6W-C6C8jAwd.js";
 function h({ className: r, ...a }) {
   return /* @__PURE__ */ e.jsx(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.0.0-z63644134",
+  "version": "0.0.0-z6b1ecd2d",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {

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 {
@@ -43,7 +44,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 +85,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/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";
@@ -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/context/ZudokuContext.ts

@@ -77,6 +77,7 @@ export const useCurrentNavigation = () => {
   const location = useLocation();
 
   const navItem = traverseNavigation(navigation, (item, parentCategories) => {
+    if (item.type === "link") return;
     if (getItemPath(item) === location.pathname) {
       return parentCategories.at(0) ?? item;
     }

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>
+  );
+};

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

@@ -1,6 +1,7 @@
 import { ExternalLinkIcon } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { NavLink, useLocation } from "react-router";
+import { Separator } from "zudoku/ui/Separator.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "zudoku/ui/Tooltip.js";
 import type { NavigationItem as NavigationItemType } from "../../../config/validators/NavigationSchema.js";
 import { useAuth } from "../../authentication/hook.js";
@@ -11,6 +12,8 @@ import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
 import { useZudoku } from "../context/ZudokuContext.js";
 import { NavigationBadge } from "./NavigationBadge.js";
 import { NavigationCategory } from "./NavigationCategory.js";
+import { useNavigationFilter } from "./NavigationFilterContext.js";
+import { NavigationFilterInput } from "./NavigationFilterInput.js";
 import { navigationListItem, shouldShowItem } from "./utils.js";
 
 const TruncatedLabel = ({
@@ -65,8 +68,9 @@ export const NavigationItem = ({
   const { activeAnchor } = useViewportAnchor();
   const auth = useAuth();
   const context = useZudoku();
+  const { query } = useNavigationFilter();
 
-  if (!shouldShowItem(auth, context)(item)) {
+  if (!shouldShowItem(auth, context, query)(item)) {
     return null;
   }
 
@@ -75,6 +79,18 @@ export const NavigationItem = ({
       return (
         <NavigationCategory category={item} onRequestClose={onRequestClose} />
       );
+    case "separator":
+      return (
+        <Separator className="my-1 mx-auto w-[calc(100%-var(--padding-nav-item)*2)]!" />
+      );
+    case "section":
+      return (
+        <div className="mt-4 px-(--padding-nav-item) text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+          {item.label}
+        </div>
+      );
+    case "filter":
+      return <NavigationFilterInput placeholder={item.placeholder} />;
     case "doc":
       return (
         <NavLink

package/src/lib/components/navigation/utils.ts

@@ -86,6 +86,13 @@ export const usePrevNext = (): {
   let foundCurrent = false;
 
   traverseNavigation(navigation, (item) => {
+    if (
+      item.type === "separator" ||
+      item.type === "section" ||
+      item.type === "filter"
+    )
+      return;
+
     const itemId =
       item.type === "doc"
         ? joinUrl(item.path)
@@ -133,9 +140,33 @@ export const navigationListItem = cva(
   },
 );
 
+export const itemMatchesFilter = (
+  item: NavigationItem,
+  query: string,
+): boolean => {
+  if (["separator", "section", "filter"].includes(item.type)) {
+    return true;
+  }
+  if (item.label?.toLowerCase().includes(query.toLowerCase())) {
+    return true;
+  }
+
+  if (item.type === "category") {
+    return item.items.some((child) => itemMatchesFilter(child, query));
+  }
+
+  return false;
+};
+
 export const shouldShowItem =
-  (auth: UseAuthReturn, context: ZudokuContext) =>
+  (auth: UseAuthReturn, context: ZudokuContext, filterQuery?: string) =>
   (item: NavigationItem): boolean => {
+    if (item.type === "filter") return true;
+
+    if (filterQuery?.trim() && !itemMatchesFilter(item, filterQuery)) {
+      return false;
+    }
+
     if (typeof item.display === "function") {
       return item.display({ context, auth });
     }

package/src/lib/plugins/openapi/playground/fileUtils.ts

@@ -4,6 +4,10 @@ export function isBinaryContentType(contentType: string) {
   );
 }
 
+export function isAudioContentType(contentType: string) {
+  return /^audio\//i.test(contentType);
+}
+
 export const extractFileName = (
   headers: Array<[string, string]>,
   url: string,

package/src/lib/plugins/openapi/playground/result-panel/AudioPlayer.tsx

@@ -0,0 +1,50 @@
+import { DownloadIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Button } from "zudoku/ui/Button.js";
+import { humanFileSize } from "../../../../util/humanFileSize.js";
+
+export const AudioPlayer = ({
+  blob,
+  fileName,
+  size,
+  onDownload,
+}: {
+  blob: Blob;
+  fileName: string;
+  size: number;
+  onDownload: () => void;
+}) => {
+  const [audioUrl, setAudioUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    const url = URL.createObjectURL(blob);
+    setAudioUrl(url);
+
+    return () => {
+      URL.revokeObjectURL(url);
+    };
+  }, [blob]);
+
+  if (!audioUrl) {
+    return (
+      <div className="p-4 text-center">
+        <div className="text-sm text-muted-foreground">Loading audio...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-4 text-center">
+      <div className="flex flex-col items-center gap-4">
+        {/* biome-ignore lint/a11y/useMediaCaption: API response audio cannot have predefined captions */}
+        <audio controls src={audioUrl} className="w-full max-w-md">
+          Your browser does not support the audio element.
+        </audio>
+        <Button onClick={onDownload} className="flex items-center gap-2">
+          <DownloadIcon className="h-4 w-4" />
+          Download {fileName} ({humanFileSize(size)})
+        </Button>
+      </div>
+    </div>
+  );
+};