zudoku 0.0.0-ee328ec → 0.0.0-efc60ba6

package/src/lib/plugins/openapi/schema/SchemaView.tsx

@@ -1,8 +1,8 @@
 import { InfoIcon } from "lucide-react";
-import { Markdown, ProseClasses } from "../../../components/Markdown.js";
+import { Markdown } from "../../../components/Markdown.js";
+import { Typography } from "../../../components/Typography.js";
 import type { SchemaObject } from "../../../oas/parser/index.js";
 import { Card } from "../../../ui/Card.js";
-import { cn } from "../../../util/cn.js";
 import { groupBy } from "../../../util/groupBy.js";
 import { ConstValue } from "../components/ConstValue.js";
 import { EnumValues } from "../components/EnumValues.js";
@@ -17,7 +17,7 @@ import { hasLogicalGroupings, isBasicType } from "./utils.js";
 const renderMarkdown = (content?: string) =>
   content && (
     <Markdown
-      className={cn(ProseClasses, "text-sm leading-normal line-clamp-4")}
+      className="text-sm leading-normal line-clamp-4"
       content={content}
     />
   );
@@ -36,16 +36,19 @@ const renderBasicSchema = (schema: SchemaObject) => (
 export const SchemaView = ({
   schema,
   defaultOpen = false,
+  cardHeader,
 }: {
   schema?: SchemaObject | null;
   defaultOpen?: boolean;
+  cardHeader?: React.ReactNode;
 }) => {
   if (!schema || Object.keys(schema).length === 0) {
     return (
-      <Card className="p-4">
-        <span className="text-sm text-muted-foreground italic">
-          No schema specified
-        </span>
+      <Card className="overflow-hidden">
+        {cardHeader}
+        <div className="text-sm text-muted-foreground italic p-4">
+          No data returned
+        </div>
       </Card>
     );
   }
@@ -83,12 +86,7 @@ export const SchemaView = ({
       typeof schema.additionalProperties === "object" ? (
         <SchemaView schema={schema.additionalProperties} />
       ) : schema.additionalProperties === true ? (
-        <div
-          className={cn(
-            ProseClasses,
-            "text-sm p-4 bg-border/20 hover:bg-border/30 flex items-center gap-1",
-          )}
-        >
+        <Typography className="text-sm p-4 bg-border/20 hover:bg-border/30 flex items-center gap-1">
           <span>Additional properties are allowed</span>
           <a
             className="p-0.5 -m-0.5"
@@ -98,11 +96,12 @@ export const SchemaView = ({
           >
             <InfoIcon size={14} />
           </a>
-        </div>
+        </Typography>
       ) : null;
 
     return (
       <Card className="divide-y overflow-hidden">
+        {cardHeader}
         {groupNames.map(
           (group) =>
             groupedProperties[group] && (

package/src/lib/plugins/openapi/schema/utils.ts

@@ -4,19 +4,22 @@ import type { SchemaObject } from "../../../oas/parser/index.js";
 export const isBasicType = (
   type: unknown,
 ): type is "string" | "number" | "boolean" | "integer" | "null" =>
-  typeof type === "string" &&
-  ["string", "number", "boolean", "integer", "null"].includes(type);
+  (typeof type === "string" &&
+    ["string", "number", "boolean", "integer", "null"].includes(type)) ||
+  (Array.isArray(type) && type.every(isBasicType));
 
 export const isArrayType = (value: SchemaObject) =>
   value.type === "array" ||
   // schema.type might be an array of types, so we need to check if "array" is one of them
   (Array.isArray(value.type) && value.type.includes("array"));
 
-export const isComplexType = (value: SchemaObject) =>
-  (value.type === "object" && Object.keys(value.properties ?? {}).length > 0) ||
-  (value.type === "array" &&
-    typeof value.items === "object" &&
-    (!value.items.type || value.items.type === "object"));
+export const isComplexType = (value?: SchemaObject) =>
+  value &&
+  ((value.type === "object" &&
+    Object.keys(value.properties ?? {}).length > 0) ||
+    (value.type === "array" &&
+      typeof value.items === "object" &&
+      (!value.items.type || value.items.type === "object")));
 
 export const hasLogicalGroupings = (value: SchemaObject) =>
   Boolean(value.oneOf ?? value.allOf ?? value.anyOf);
@@ -30,4 +33,14 @@ export const LogicalSchemaTypeMap = {
 export type LogicalGroupType = "AND" | "OR" | "ONE";
 
 export const isCircularRef = (schema: unknown): schema is string =>
-  schema === CIRCULAR_REF;
+  typeof schema === "string" && schema.startsWith(CIRCULAR_REF);
+
+export const isArrayCircularRef = (
+  schema: SchemaObject,
+): schema is SchemaObject & { items: SchemaObject } =>
+  isArrayType(schema) && "items" in schema && isCircularRef(schema.items);
+
+export const extractCircularRefInfo = (
+  ref?: string | SchemaObject,
+): string | undefined =>
+  typeof ref === "string" ? ref.split(":")[1] : undefined;

package/src/lib/plugins/openapi/util/createHttpSnippet.ts

@@ -0,0 +1,107 @@
+import { HTTPSnippet } from "@zudoku/httpsnippet";
+import type { OperationsFragmentFragment } from "../graphql/graphql.js";
+
+export const createHttpSnippet = ({
+  operation,
+  selectedServer,
+  exampleBody,
+}: {
+  operation: OperationsFragmentFragment;
+  selectedServer: string;
+  exampleBody: {
+    mimeType: string;
+    text?: string;
+  };
+}) => {
+  return new HTTPSnippet({
+    method: operation.method.toUpperCase(),
+    url:
+      selectedServer + operation.path.replaceAll("{", ":").replaceAll("}", ""),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    postData: exampleBody,
+    headers: [
+      ...(exampleBody.text
+        ? [{ name: "Content-Type", value: exampleBody.mimeType }]
+        : []),
+      ...(operation.parameters
+        ?.filter((p) => p.in === "header" && p.required === true)
+        .map((p) => ({
+          name: p.name,
+          value:
+            p.schema?.default ??
+            p.examples?.find((x) => x.value)?.value ??
+            (p.schema?.type === "string"
+              ? "<string>"
+              : p.schema?.type === "number" || p.schema?.type === "integer"
+                ? "<number>"
+                : p.schema?.type === "boolean"
+                  ? "<bool>"
+                  : "<value>"),
+        })) ?? []),
+    ],
+    queryString:
+      operation.parameters
+        ?.filter((p) => p.in === "query" && p.required === true)
+        .map((p) => ({
+          name: p.name,
+          value:
+            p.schema?.default ??
+            p.examples?.find((x) => x.value)?.value ??
+            (p.schema?.type === "string"
+              ? "<string>"
+              : p.schema?.type === "number" || p.schema?.type === "integer"
+                ? "<number>"
+                : p.schema?.type === "boolean"
+                  ? "<bool>"
+                  : "<value>"),
+        })) ?? [],
+    httpVersion: "",
+    cookies: [],
+    headersSize: 0,
+    bodySize: 0,
+  });
+};
+
+export const getConverted = (snippet: HTTPSnippet, option: string) => {
+  let converted;
+  switch (option) {
+    case "shell":
+      converted = snippet.convert("shell", "curl");
+      break;
+    case "js":
+      converted = snippet.convert("javascript", "fetch");
+      break;
+    case "python":
+      converted = snippet.convert("python", "requests");
+      break;
+    case "java":
+      converted = snippet.convert("java", "okhttp");
+      break;
+    case "go":
+      converted = snippet.convert("go", "native");
+      break;
+    case "csharp":
+      converted = snippet.convert("csharp", "httpclient");
+      break;
+    case "kotlin":
+      converted = snippet.convert("kotlin", "okhttp");
+      break;
+    case "objc":
+      converted = snippet.convert("objc", "nsurlsession");
+      break;
+    case "php":
+      converted = snippet.convert("php", "http2");
+      break;
+    case "ruby":
+      converted = snippet.convert("ruby");
+      break;
+    case "swift":
+      converted = snippet.convert("swift");
+      break;
+    default:
+      converted = snippet.convert("shell");
+      break;
+  }
+
+  return converted ? converted[0] : "";
+};

package/src/lib/plugins/openapi/util/{createSidebarCategory.tsx → createNavigationCategory.tsx}

@@ -1,8 +1,8 @@
-import type { SidebarItem } from "../../../../config/validators/SidebarSchema.js";
+import type { NavigationItem } from "../../../../config/validators/NavigationSchema.js";
 import type { OperationResult } from "../index.js";
 import { MethodColorMap } from "./methodColorMap.js";
 
-export const createSidebarCategory = ({
+export const createNavigationCategory = ({
   label,
   path,
   operations,
@@ -14,12 +14,13 @@ export const createSidebarCategory = ({
   operations: OperationResult[];
   collapsible?: boolean;
   collapsed?: boolean;
-}): SidebarItem => ({
+}): NavigationItem => ({
   type: "category",
   label,
   link: {
     type: "doc" as const,
-    id: path,
+    path,
+    file: path,
     label,
   },
   collapsible,
@@ -27,7 +28,7 @@ export const createSidebarCategory = ({
   items: operations.map((operation) => ({
     type: "link" as const,
     label: operation.summary ?? operation.path,
-    href: `${path}#${operation.slug}`,
+    to: `${path}#${operation.slug}`,
     badge: {
       label: operation.method,
       color: MethodColorMap[operation.method.toLowerCase()]!,

package/src/lib/plugins/openapi/util/generateSchemaExample.ts

@@ -1,10 +1,15 @@
 import { type SchemaObject } from "../../../oas/graphql/index.js";
+import { isCircularRef } from "../schema/utils.js";
 
 export const generateSchemaExample = (
-  schema: SchemaObject,
+  schema?: SchemaObject,
   name?: string,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 ): any => {
+  if (!schema || isCircularRef(schema)) {
+    return null;
+  }
+
   // Check for schema-level example first
   if (schema.example !== undefined) {
     return schema.example;

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

@@ -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);

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/redirect/index.tsx

@@ -1,5 +1,5 @@
 import { redirect } from "react-router";
-import { ZudokuRedirect } from "../../../config/validators/common.js";
+import type { ZudokuRedirect } from "../../../config/validators/validate.js";
 import type { ZudokuPlugin } from "../../core/plugins.js";
 
 export const redirectPlugin = (options: {

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

@@ -153,6 +153,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,6 +2,7 @@ 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 { joinUrl } from "../../util/joinUrl.js";
 import {
   type PagefindSearchFragment,
   type PagefindSubResult,
@@ -22,6 +23,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,
@@ -42,6 +44,13 @@ export const ResultList = ({
     });
   }, [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 +69,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,11 +92,11 @@ 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