zudoku 0.0.0-fdfe742 → 0.0.0-fe92c9e1

package/src/lib/plugins/openapi/util/getRoutes.tsx

@@ -2,8 +2,8 @@ import { useSuspenseQuery } from "@tanstack/react-query";
 import {
   generatePath,
   Navigate,
-  redirect,
   type RouteObject,
+  redirect,
   useLocation,
   useParams,
 } from "react-router";
@@ -12,7 +12,7 @@ import type { GraphQLClient } from "../client/GraphQLClient.js";
 import { useCreateQuery } from "../client/useCreateQuery.js";
 import { useOasConfig } from "../context.js";
 import {
-  GetSidebarOperationsQuery,
+  GetNavigationOperationsQuery,
   type OpenApiPluginOptions,
   UNTAGGED_PATH,
 } from "../index.js";
@@ -71,7 +71,7 @@ const NonTagPagesOperationList = ({
   const { type, input } = useOasConfig();
   const { tag: currentTag } = useParams();
   const location = useLocation();
-  const query = useCreateQuery(GetSidebarOperationsQuery, { type, input });
+  const query = useCreateQuery(GetNavigationOperationsQuery, { type, input });
   const {
     data: { schema },
   } = useSuspenseQuery(query);
@@ -170,7 +170,7 @@ export const getRoutes = ({
         basePath,
         routePath: basePath,
         routes: [
-          createNonTagPagesRoute({ path: basePath + "/:tag?" }),
+          createNonTagPagesRoute({ path: `${basePath}/:tag?` }),
           ...createAdditionalRoutes(basePath),
         ],
         client,

package/src/lib/plugins/openapi/util/methodColorMap.tsx

@@ -1,4 +1,4 @@
-import { ColorMap } from "../../../components/navigation/SidebarBadge.js";
+import type { ColorMap } from "../../../components/navigation/NavigationBadge.js";
 
 export const MethodColorMap: Record<string, keyof typeof ColorMap> = {
   get: "green",

package/src/lib/plugins/search-inkeep/index.tsx

@@ -1,102 +1,98 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import type {
+  InkeepBaseSettings,
+  InkeepComponentInstance,
+  InkeepJS,
+  InkeepSettings,
+} from "@inkeep/cxkit-types";
+import { useEffect, useMemo, useState } from "react";
 import { ClientOnly } from "../../components/ClientOnly.js";
 import type { ZudokuPlugin } from "../../core/plugins.js";
-import { aiChatSettings, baseSettings } from "./inkeep.js";
-
-interface PluginInkeepBaseSettings {
-  apiKey?: string;
-  integrationId: string;
-  organizationId: string;
-  organizationDisplayName?: string;
-  primaryBrandColor: string;
-}
-
-interface InkeepEmbedConfig {
-  componentType: string;
-  targetElement: HTMLElement;
-  properties: unknown;
-}
-
-interface InkeepWidget {
-  render: (config: InkeepEmbedConfig & { isOpen: boolean }) => void;
-}
+import {
+  aiChatSettings,
+  baseSettings,
+  modalSettings,
+  searchSettings,
+} from "./inkeep.js";
 
 declare global {
-  let Inkeep: () => {
-    embed: (config: InkeepEmbedConfig) => InkeepWidget;
-  };
+  interface Window {
+    Inkeep: InkeepJS | undefined;
+  }
 }
 
 const InkeepSearch = ({
-  prefilledQuery,
   isOpen,
   onClose,
   settings,
 }: {
   isOpen: boolean;
   onClose: () => void;
-  prefilledQuery?: string | null;
-  settings: PluginInkeepBaseSettings;
+  settings: InkeepBaseSettings;
 }) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const widgetRef = useRef<InkeepWidget | null>(null);
-  const [isInkeepAvailable, setIsInkeepAvailable] = useState(
-    typeof Inkeep !== "undefined",
-  );
-
-  const config: InkeepEmbedConfig = useMemo(
+  const config = useMemo<InkeepSettings>(
     () => ({
-      componentType: "CustomTrigger",
-      targetElement: ref.current!,
-      properties: {
-        isOpen,
-        onClose,
-        onOpen: undefined,
-        baseSettings: { ...baseSettings, ...settings },
-        searchSettings: {
-          prefilledQuery: prefilledQuery || undefined,
+      baseSettings: {
+        ...baseSettings,
+        ...settings,
+        colorMode: {
+          sync: {
+            target: "html",
+            attributes: ["class"],
+            isDarkMode: (attrs) => attrs.class?.includes("dark") ?? false,
+          },
+        },
+      },
+      modalSettings: {
+        ...modalSettings,
+        onOpenChange: (newOpen: boolean) => {
+          if (!newOpen) onClose();
         },
-        aiChatSettings,
       },
+      searchSettings,
+      aiChatSettings,
     }),
-    [isOpen, onClose, prefilledQuery, settings, ref],
+    [onClose, settings],
+  );
+  const [searchInstance, setSearchInstance] = useState<
+    InkeepComponentInstance | undefined
+  >(
+    typeof window !== "undefined" && window.Inkeep?.ModalSearchAndChat
+      ? window.Inkeep.ModalSearchAndChat(config)
+      : undefined,
   );
 
   useEffect(() => {
-    if (isInkeepAvailable) return;
+    if (searchInstance) return;
 
     const checkInkeep = setInterval(() => {
-      if (typeof Inkeep !== "undefined") {
-        setIsInkeepAvailable(true);
+      if (typeof window !== "undefined" && window.Inkeep?.ModalSearchAndChat) {
+        const inkeep = window.Inkeep.ModalSearchAndChat(config);
+        setSearchInstance(inkeep);
         clearInterval(checkInkeep);
       }
     }, 100);
 
     return () => clearInterval(checkInkeep);
-  }, [isInkeepAvailable]);
+  }, [config, searchInstance]);
 
   useEffect(() => {
-    if (!isInkeepAvailable || widgetRef.current) return;
-
-    widgetRef.current = Inkeep().embed(config);
-  }, [config, isInkeepAvailable]);
+    if (!searchInstance) return;
 
-  useEffect(() => {
-    widgetRef.current?.render({ ...config, isOpen });
-  }, [config, isOpen]);
+    searchInstance.update({ modalSettings: { isOpen } });
+  }, [isOpen, searchInstance]);
 
-  return <div ref={ref} />;
+  return null;
 };
 
 export const inkeepSearchPlugin = (
-  settings: PluginInkeepBaseSettings,
+  settings: InkeepBaseSettings,
 ): ZudokuPlugin => {
   return {
     getHead: () => {
       return (
         <script
           type="module"
-          src="https://unpkg.com/@inkeep/uikit-js@0.3.19/dist/embed.js"
+          src="https://cdn.jsdelivr.net/npm/@inkeep/cxkit-js@0.5.90/+esm"
           defer
         />
       );

package/src/lib/plugins/search-inkeep/inkeep.ts

@@ -1,26 +1,24 @@
-const baseSettings = {
-  theme: {
-    components: {
-      AIChatPageWrapper: {
-        defaultProps: {
-          size: "shrink-vertically",
-          variant: "no-shadow",
-        },
-      },
-      SearchBarTrigger: {
-        defaultProps: {
-          size: "expand",
-          variant: "subtle", // Choose from 'emphasized' or 'subtle'
-        },
-      },
-    },
-  },
-} as const;
+import type {
+  InkeepAIChatSettings,
+  InkeepBaseSettings,
+  InkeepModalSettings,
+  InkeepSearchSettings,
+} from "@inkeep/cxkit-types";
 
-const modalSettings = {};
+const baseSettings: InkeepBaseSettings = {
+  primaryBrandColor: "#26D6FF",
+};
 
-const searchSettings = {};
+const modalSettings: InkeepModalSettings = {
+  shortcutKey: "k",
+};
 
-const aiChatSettings = {};
+const searchSettings: InkeepSearchSettings = {
+  placeholder: "Search...",
+};
+
+const aiChatSettings: InkeepAIChatSettings = {
+  aiAssistantName: "Assistant",
+};
 
 export { aiChatSettings, baseSettings, modalSettings, searchSettings };

package/src/lib/plugins/search-pagefind/PagefindSearch.tsx

@@ -63,7 +63,7 @@ const usePagefind = (options: PagefindOptions) => {
   });
 
   if (result.isError && result.error.message !== "NOT_BUILT_YET") {
-    // eslint-disable-next-line no-console
+    // biome-ignore lint/suspicious/noConsole: Logging allowed here
     console.error(result.error);
   }
 
@@ -141,9 +141,7 @@ export const PagefindSearch = ({
             <Callout type="info">
               Search is currently not available in development mode by default.
               <br />
-              To still use search in development, run <code>
-                zudoku build
-              </code>{" "}
+              To still use search in development, run <code>zudoku build</code>{" "}
               and copy the <code>dist/pagefind</code> directory to your{" "}
               <code>public</code> directory.
             </Callout>
@@ -153,6 +151,7 @@ export const PagefindSearch = ({
         </div>
       ) : (
         <ResultList
+          basePath={context.options.basePath}
           searchResults={searchResults ?? []}
           searchTerm={searchTerm}
           onClose={onClose}

package/src/lib/plugins/search-pagefind/ResultList.tsx

@@ -2,10 +2,8 @@ import { BracketsIcon, FileTextIcon } from "lucide-react";
 import { useLayoutEffect, useRef } from "react";
 import { Link, useNavigate } from "react-router";
 import { CommandGroup, CommandItem, CommandList } from "zudoku/ui/Command.js";
-import {
-  type PagefindSearchFragment,
-  type PagefindSubResult,
-} from "./types.js";
+import { joinUrl } from "../../util/joinUrl.js";
+import type { PagefindSearchFragment, PagefindSubResult } from "./types.js";
 
 const sortSubResults = (a: PagefindSubResult, b: PagefindSubResult) => {
   const aScore = a.weighted_locations.reduce(
@@ -22,6 +20,7 @@ const sortSubResults = (a: PagefindSubResult, b: PagefindSubResult) => {
 const hoverClassname = `cursor-pointer border border-transparent data-[selected=true]:border-border`;
 
 export const ResultList = ({
+  basePath,
   searchResults,
   searchTerm,
   onClose,
@@ -36,12 +35,20 @@ export const ResultList = ({
   const navigate = useNavigate();
   const commandListRef = useRef<HTMLDivElement | null>(null);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Only scroll to top when search term changes
   useLayoutEffect(() => {
     requestIdleCallback(() => {
       commandListRef.current?.scrollTo({ top: 0 });
     });
   }, [searchTerm]);
 
+  const stripBasePath = (url: string) => {
+    if (basePath && url.startsWith(basePath)) {
+      return joinUrl(url.slice(basePath.length));
+    }
+    return url;
+  };
+
   return (
     <CommandList className="max-h-[450px]" ref={commandListRef}>
       {searchTerm && searchResults.length > 0 && (
@@ -60,11 +67,11 @@ export const ResultList = ({
               value={`${result.meta.title}-${result.url}`}
               className={hoverClassname}
               onSelect={() => {
-                void navigate(result.url);
+                void navigate(stripBasePath(result.url));
                 onClose();
               }}
             >
-              <Link to={result.url}>
+              <Link to={stripBasePath(result.url)}>
                 {result.meta.section === "openapi" ? (
                   <BracketsIcon />
                 ) : (
@@ -83,15 +90,16 @@ export const ResultList = ({
                   value={`sub-${result.meta.title}-${subResult.url}`}
                   className={hoverClassname}
                   onSelect={() => {
-                    void navigate(subResult.url);
+                    void navigate(stripBasePath(subResult.url));
                     onClose();
                   }}
                 >
-                  <Link to={subResult.url} onClick={onClose}>
+                  <Link to={stripBasePath(subResult.url)} onClick={onClose}>
                     <div className="flex flex-col items-start gap-2 ms-2.5 ps-5 border-l border-muted-foreground/50">
                       <span className="font-bold">{subResult.title}</span>
                       <span
                         className="text-[13px] [&_mark]:bg-primary [&_mark]:text-primary-foreground"
+                        // biome-ignore lint/security/noDangerouslySetInnerHtml: Pagefind provides sanitized HTML
                         dangerouslySetInnerHTML={{ __html: subResult.excerpt }}
                       />
                     </div>

package/src/lib/plugins/search-pagefind/get-results.tsx

@@ -62,7 +62,6 @@ async function* searchResultGenerator({
 
       if (transformed === false) {
         // Skip this result
-        continue;
       } else if (transformed === true || transformed == null) {
         // Keep the original result
         yield result;

package/src/lib/shiki.ts

@@ -7,7 +7,7 @@ import {
 } from "@shikijs/transformers";
 import type { Root } from "hast";
 import { toJsxRuntime } from "hast-util-to-jsx-runtime";
-import { Fragment, type JSX } from "react";
+import { createElement, Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import type {
   BundledLanguage,
@@ -21,6 +21,9 @@ import type { Pluggable } from "unified";
 import { visit } from "unist-util-visit";
 import { cn } from "./util/cn.js";
 
+export const HIGHLIGHT_CODE_BLOCK_CLASS =
+  "overflow-x-auto scrollbar not-inline";
+
 const engine = createJavaScriptRegexEngine({ forgiving: true });
 export const highlighter = await createHighlighterCore({
   engine,
@@ -43,6 +46,8 @@ export const defaultHighlightOptions = {
     dark: "github-dark",
   },
   defaultColor: false,
+  defaultLanguage: "text",
+  fallbackLanguage: "text",
   inline: "tailing-curly-colon",
   addLanguageClass: true,
   transformers: [transformerMetaHighlight(), transformerMetaWordHighlight()],
@@ -67,6 +72,8 @@ export const defaultLanguages: BundledLanguage[] = [
   "jsx",
   "typescript",
   "tsx",
+  "graphql",
+  "jsonc",
   "json",
   "python",
   "java",
@@ -81,8 +88,19 @@ export const defaultLanguages: BundledLanguage[] = [
   "html",
   "xml",
   "yaml",
+  "toml",
+  "rust",
   "markdown",
   "mdx",
+  "zig",
+  "scala",
+  "dart",
+  "ocaml",
+  "c",
+  "cpp",
+  "common-lisp",
+  "elixir",
+  "powershell",
 ];
 
 const rehypeCodeBlockPlugin = () => (tree: Root) => {
@@ -104,14 +122,14 @@ const rehypeCodeBlockPlugin = () => (tree: Root) => {
   });
 };
 
-export const createConfiguredShikiRehypePlugins = (themes?: ThemesRecord) => [
+export const createConfiguredShikiRehypePlugins = (
+  themes: ThemesRecord = defaultHighlightOptions.themes,
+  highlighterInstance: HighlighterCore = highlighter,
+) => [
   [
     rehypeShikiFromHighlighter,
-    highlighter,
-    {
-      ...defaultHighlightOptions,
-      themes: themes ?? defaultHighlightOptions.themes,
-    },
+    highlighterInstance,
+    { ...defaultHighlightOptions, themes },
   ] satisfies Pluggable,
   rehypeCodeBlockPlugin,
 ];
@@ -128,5 +146,16 @@ export const highlight = (
     themes,
   });
 
-  return toJsxRuntime(value, { Fragment, jsx, jsxs }) as JSX.Element;
+  return toJsxRuntime(value, {
+    Fragment,
+    jsx,
+    jsxs,
+    components: {
+      code: (props) =>
+        createElement("code", {
+          ...props,
+          className: cn(props.className, HIGHLIGHT_CODE_BLOCK_CLASS),
+        }),
+    },
+  });
 };

package/src/lib/ui/ActionButton.tsx

@@ -19,7 +19,9 @@ export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(
             <Spinner />
           </div>
         )}
-        <div className={cn(isPending && "invisible")}>{children}</div>
+        <span className={cn("block", isPending && "invisible")}>
+          {children}
+        </span>
       </Button>
     );
   },

package/src/lib/ui/Alert.tsx

@@ -1,16 +1,15 @@
 import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
+import type * as React from "react";
 import { cn } from "../util/cn.js";
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
   {
     variants: {
       variant: {
-        default: "bg-background text-foreground",
+        default: "bg-card text-card-foreground",
         destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
       },
     },
     defaultVariants: {
@@ -19,41 +18,48 @@ const alertVariants = cva(
   },
 );
 
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div
-    ref={ref}
-    role="alert"
-    className={cn(alertVariants({ variant }), className)}
-    {...props}
-  />
-));
-Alert.displayName = "Alert";
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
 
-const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-    {...props}
-  />
-));
-AlertTitle.displayName = "AlertTitle";
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
 
-const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
-    {...props}
-  />
-));
-AlertDescription.displayName = "AlertDescription";
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
 
 export { Alert, AlertDescription, AlertTitle };

package/src/lib/ui/Breadcrumb.tsx

@@ -67,6 +67,7 @@ const BreadcrumbPage = React.forwardRef<
     aria-disabled="true"
     aria-current="page"
     className={cn("font-normal text-foreground", className)}
+    tabIndex={props.tabIndex}
     {...props}
   />
 ));

package/src/lib/ui/Button.tsx

@@ -30,6 +30,7 @@ export const buttonVariants = cva(
         xl: "h-14 rounded-lg px-10 text-lg",
         icon: "size-9",
         "icon-xs": "size-7",
+        "icon-xxs": "size-5",
       },
     },
     defaultVariants: {

package/src/lib/ui/Callout.tsx

@@ -14,7 +14,8 @@ const stylesMap = {
     bg: "bg-gray-100 dark:bg-zinc-800/50",
     iconColor: "text-gray-600 dark:text-zinc-300",
     titleColor: "text-gray-600 dark:text-zinc-300",
-    textColor: "text-gray-600 dark:text-zinc-300",
+    textColor:
+      "text-gray-600 dark:text-zinc-300 [&_a]:hover:text-gray-700 [&_a]:dark:hover:text-zinc-400",
     Icon: InfoIcon as LucideIcon,
   },
   tip: {
@@ -22,7 +23,8 @@ const stylesMap = {
     bg: "bg-green-200/25 dark:bg-green-950/70",
     iconColor: "text-green-600 dark:text-green-200",
     titleColor: "text-green-700 dark:text-green-200",
-    textColor: "text-green-600 dark:text-green-50",
+    textColor:
+      "text-green-600 dark:text-green-50 [&_a]:hover:text-green-700 [&_a]:dark:hover:text-green-300",
     Icon: LightbulbIcon as LucideIcon,
   },
   info: {
@@ -30,7 +32,8 @@ const stylesMap = {
     bg: "bg-blue-50 dark:bg-blue-950/40",
     iconColor: "text-blue-400 dark:text-blue-200",
     titleColor: "text-blue-700 dark:text-blue-200",
-    textColor: "text-blue-600 dark:text-blue-100",
+    textColor:
+      "text-blue-600 dark:text-blue-100 [&_a]:hover:text-blue-800 [&_a]:dark:hover:text-blue-300",
     Icon: InfoIcon as LucideIcon,
   },
   caution: {
@@ -38,7 +41,8 @@ const stylesMap = {
     bg: "bg-yellow-100/60 dark:bg-yellow-400/10",
     iconColor: "text-yellow-500 dark:text-yellow-300",
     titleColor: "text-yellow-600 dark:text-yellow-300",
-    textColor: "text-yellow-700 dark:text-yellow-200",
+    textColor:
+      "text-yellow-700 dark:text-yellow-200 [&_a]:hover:text-yellow-800 [&_a]:dark:hover:text-yellow-300",
     Icon: AlertTriangleIcon as LucideIcon,
   },
   danger: {
@@ -46,7 +50,8 @@ const stylesMap = {
     bg: "bg-rose-50 dark:bg-rose-950/40",
     iconColor: "text-rose-400 dark:text-rose-300",
     titleColor: "text-rose-800 dark:text-rose-300",
-    textColor: "text-rose-700 dark:text-rose-100",
+    textColor:
+      "text-rose-700 dark:text-rose-100 [&_a]:hover:text-rose-800 [&_a]:dark:hover:text-rose-300",
     Icon: ShieldAlertIcon as LucideIcon,
   },
 } as const;