zudoku 0.0.0-z6bcd96da → 0.0.0-z6e949a6d

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/index.ts

@@ -1,46 +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 { ZudokuError as ZudokuErrorImport } from "../util/invariant.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 { Heading as HeadingImport } from "./Heading.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 Heading = /*@__PURE__*/ HeadingImport;
-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;
-export const ZudokuError = /*@__PURE__*/ ZudokuErrorImport;
+//
 
 /** @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>
+  );
+};

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/core/plugins.ts

@@ -3,6 +3,7 @@ import type { ReactNode } from "react";
 import type { Location, RouteObject } from "react-router";
 import type { Navigation } from "../../config/validators/NavigationSchema.js";
 import type { ProtectedRoutesInput } from "../../config/validators/ProtectedRoutesSchema.js";
+import type { ZudokuConfig } from "../../config/validators/validate.js";
 import type { AuthenticationPlugin } from "../authentication/authentication.js";
 import type { MdxComponentsType } from "../util/MdxComponents.js";
 import type {
@@ -18,7 +19,8 @@ export type ZudokuPlugin =
   | ApiIdentityPlugin
   | SearchProviderPlugin
   | EventConsumerPlugin
-  | AuthenticationPlugin;
+  | AuthenticationPlugin
+  | TransformConfigPlugin;
 
 export type { AuthenticationPlugin, RouteObject };
 
@@ -60,6 +62,19 @@ export type ProfileNavigationItem = {
   icon?: LucideIcon;
 };
 
+export interface ConfigHookContext {
+  mode: typeof process.env.ZUDOKU_ENV;
+  rootDir: string;
+  configPath: string;
+}
+
+export interface TransformConfigPlugin {
+  transformConfig?: (
+    config: ZudokuConfig,
+    ctx: ConfigHookContext,
+  ) => Partial<ZudokuConfig> | void | Promise<Partial<ZudokuConfig> | void>;
+}
+
 export interface CommonPlugin {
   initialize?: (
     context: ZudokuContext,
@@ -110,3 +125,8 @@ export const isApiIdentityPlugin = (
   obj: ZudokuPlugin,
 ): obj is ApiIdentityPlugin =>
   "getIdentities" in obj && typeof obj.getIdentities === "function";
+
+export const isTransformConfigPlugin = (
+  obj: ZudokuPlugin,
+): obj is TransformConfigPlugin =>
+  "transformConfig" in obj && typeof obj.transformConfig === "function";

package/src/lib/core/transform-config.ts

@@ -0,0 +1,29 @@
+import createDeepmerge from "@fastify/deepmerge";
+import type { ConfigWithMeta } from "../../config/loader.js";
+import { type ConfigHookContext, isTransformConfigPlugin } from "./plugins.js";
+
+const mergeConfig = createDeepmerge({
+  mergeArray: (opt) => (_, source) => opt.clone(source),
+});
+
+export const runTransformConfigHooks = async (
+  config: ConfigWithMeta,
+): Promise<ConfigWithMeta> => {
+  const ctx = {
+    mode: config.__meta.mode,
+    rootDir: config.__meta.rootDir,
+    configPath: config.__meta.configPath,
+  } satisfies ConfigHookContext;
+  const plugins = config.plugins ?? [];
+
+  let result = config;
+
+  for (const plugin of plugins.filter(isTransformConfigPlugin)) {
+    const partial = await plugin.transformConfig?.(result, ctx);
+    if (!partial) continue;
+
+    result = mergeConfig(result, partial) as ConfigWithMeta;
+  }
+
+  return result;
+};

package/src/lib/hooks/index.ts

@@ -1,16 +1,7 @@
-import { useMDXComponents as useMDXComponentsImport } from "@mdx-js/react";
-import { useTheme as useThemeImport } from "next-themes";
-import { useAuth as useAuthImport } from "../authentication/hook.js";
-import { CACHE_KEYS, useCache as useCacheImport } from "../components/cache.js";
-import { useZudoku as useZudokuImport } from "../components/context/ZudokuContext.js";
-import { useExposedProps as useExposedPropsImport } from "../util/useExposedProps.js";
-import { useEvent as useEventImport } from "./useEvent.js";
-
-export const useEvent = /*@__PURE__*/ useEventImport;
-export const useTheme = /*@__PURE__*/ useThemeImport;
-export const useExposedProps = /*@__PURE__*/ useExposedPropsImport;
-export const useMDXComponents = /*@__PURE__*/ useMDXComponentsImport;
-export const useAuth = /*@__PURE__*/ useAuthImport;
-export const useZudoku = /*@__PURE__*/ useZudokuImport;
-export const useCache = /*@__PURE__*/ useCacheImport;
-export { CACHE_KEYS };
+export { useMDXComponents } from "@mdx-js/react";
+export { useTheme } from "next-themes";
+export { useAuth } from "../authentication/hook.js";
+export { CACHE_KEYS, useCache } from "../components/cache.js";
+export { useZudoku } from "../components/context/ZudokuContext.js";
+export { useExposedProps } from "../util/useExposedProps.js";
+export { useEvent } from "./useEvent.js";

package/src/lib/oas/graphql/circular.test.ts

@@ -156,16 +156,20 @@ describe("handleCircularRefs", () => {
     });
   });
 
-  it("should deduplicate shared object instances with __$ref", () => {
+  it("should handle shared object instances with __$ref without marking circular", () => {
     const shared = { __$ref: "#/components/schemas/Foo", type: "string" };
     const obj = { a: shared, b: shared };
     const result = handleCircularRefs(obj);
 
+    // Both should return the cached result, not mark as circular
     expect(result.a).toEqual({
       __$ref: "#/components/schemas/Foo",
       type: "string",
     });
-    expect(result.b).toBe(`${SCHEMA_REF_PREFIX}#/components/schemas/Foo`);
+    expect(result.b).toEqual({
+      __$ref: "#/components/schemas/Foo",
+      type: "string",
+    });
   });
 
   it("should mark circular ref with property name from path", () => {
@@ -183,4 +187,35 @@ describe("handleCircularRefs", () => {
 
     expect(result.properties.child.properties.back).toContain(CIRCULAR_REF);
   });
+
+  // Exact reproduction of #1869 - shared object instances with __$ref
+  it("should NOT mark shared object instances with __$ref as circular (issue #1869)", () => {
+    // When dereferencing, the SAME object instance is returned for all refs to the same schema
+    const timestampSchema = {
+      __$ref: "#/components/schemas/timestamp",
+      type: "string",
+      format: "date-time",
+    };
+
+    // Both created_at and updated_at point to the SAME object instance
+    const obj = {
+      type: "object",
+      properties: {
+        created_at: timestampSchema,
+        updated_at: timestampSchema,
+      },
+    };
+
+    const result = handleCircularRefs(obj);
+
+    // The first one should be fully expanded
+    expect(result.properties.created_at).toEqual({
+      __$ref: "#/components/schemas/timestamp",
+      type: "string",
+      format: "date-time",
+    });
+    // The second one should ALSO be fully expanded (not marked as circular)
+    expect(typeof result.properties.updated_at).toBe("object");
+    expect(result.properties.updated_at).not.toContain(CIRCULAR_REF);
+  });
 });