zudoku 0.0.0-f62edde → 0.0.0-f687ed1

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

@@ -1,122 +1,98 @@
 import { type UseMutationResult } from "@tanstack/react-query";
-import { Spinner } from "../../../../components/Spinner.js";
+import { SendIcon, UnplugIcon } from "lucide-react";
+import { Spinner } from "zudoku/components";
+import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert.js";
 import { Button } from "../../../../ui/Button.js";
-import { Callout } from "../../../../ui/Callout.js";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "../../../../ui/Card.js";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "../../../../ui/Tabs.js";
 import { cn } from "../../../../util/cn.js";
 import { type PlaygroundResult } from "../Playground.js";
-import { RequestTab } from "./RequestTab.js";
+import ResponseStatusBar from "./ResponseStatusBar.js";
 import { ResponseTab } from "./ResponseTab.js";
 
 export const ResultPanel = ({
   queryMutation,
-  showPathParamsWarning,
   showLongRunningWarning,
   onCancel,
+  tip,
+  isFinished,
+  progress,
 }: {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   queryMutation: UseMutationResult<PlaygroundResult, Error, any>;
-  showPathParamsWarning: boolean;
   showLongRunningWarning?: boolean;
   onCancel?: () => void;
+  isFinished: boolean;
+  progress: number;
+  tip?: React.ReactNode;
 }) => {
-  const status = ((queryMutation.data?.status ?? 0) / 100).toFixed(0);
   return (
-    <div className="min-w-0 p-4 py-4 bg-muted/50">
+    <div className="overflow-y-auto h-[80vh] bg-muted/50">
+      {(queryMutation.isPending || queryMutation.data) && (
+        <ResponseStatusBar
+          status={queryMutation.data?.status}
+          time={queryMutation.data?.time}
+          size={queryMutation.data?.size}
+          isFinished={isFinished}
+          progress={progress}
+        />
+      )}
       {queryMutation.error ? (
-        <div className="flex flex-col gap-2">
-          {showPathParamsWarning && (
-            <Callout type="caution">
-              Some path parameters are missing values. Please fill them in to
-              ensure the request is sent correctly.
-            </Callout>
-          )}
-          <Card>
-            <CardHeader>
-              <CardTitle>Request failed</CardTitle>
-            </CardHeader>
-            <CardContent>
-              Error:{" "}
+        <div className="max-w-2/3 mx-auto mt-20">
+          <Alert>
+            <UnplugIcon size={24} strokeWidth={1.5} className="me-5" />
+            <AlertTitle>Request failed</AlertTitle>
+            <AlertDescription>
               {queryMutation.error.message ||
                 String(queryMutation.error) ||
                 "Unexpected error"}
-            </CardContent>
-          </Card>
+            </AlertDescription>
+          </Alert>
         </div>
       ) : queryMutation.data ? (
-        <Tabs defaultValue="response">
-          <TabsList>
-            <TabsTrigger value="request">Request</TabsTrigger>
-            <TabsTrigger value="response">
-              Response
-              <span
-                className={cn(
-                  "text-xs font-mono ms-1",
-                  status === "2" && "text-green-500",
-                  status === "3" && "text-blue-500",
-                  status === "4" && "text-yellow-500",
-                  status === "5" && "text-red-500",
-                )}
-              >
-                ({queryMutation.data.status})
-              </span>
-            </TabsTrigger>
-          </TabsList>
-          <TabsContent value="request">
-            <RequestTab {...queryMutation.data.request} />
-          </TabsContent>
-          <TabsContent value="response">
-            <ResponseTab
-              status={queryMutation.data.status}
-              time={queryMutation.data.time}
-              size={queryMutation.data.size}
-              headers={queryMutation.data.headers}
-              body={queryMutation.data.body}
-              url={queryMutation.data.request.url}
-              isBinary={queryMutation.data.isBinary}
-              fileName={queryMutation.data.fileName}
-              blob={queryMutation.data.blob}
-            />
-          </TabsContent>
-        </Tabs>
-      ) : (
+        <ResponseTab
+          request={queryMutation.data.request}
+          size={queryMutation.data.size}
+          headers={queryMutation.data.headers}
+          body={queryMutation.data.body}
+          isBinary={queryMutation.data.isBinary}
+          fileName={queryMutation.data.fileName}
+          blob={queryMutation.data.blob}
+        />
+      ) : queryMutation.isPending ? (
         <div className="grid place-items-center h-full">
-          {queryMutation.isPending ? (
-            <div className="flex flex-col gap-2 items-center mt-20">
-              <Spinner size={20} />
-              <div
-                className={cn(
-                  "opacity-0 pointer-events-none transition-opacity h-20 text-sm text-muted-foreground duration-300 flex flex-col gap-2 items-center",
-                  showLongRunningWarning && "opacity-100 pointer-events-auto",
-                )}
+          <div className="flex flex-col gap-2 items-center mt-20">
+            <Spinner />
+            <div
+              className={cn(
+                "opacity-0 pointer-events-none transition-opacity h-20 text-sm text-muted-foreground duration-300 flex flex-col gap-2 items-center",
+                showLongRunningWarning && "opacity-100 pointer-events-auto",
+              )}
+            >
+              Looks like the request is taking longer than expected.
+              <Button
+                type="button"
+                onClick={onCancel}
+                size="sm"
+                className="w-fit"
+                variant="outline"
               >
-                Looks like the request is taking longer than expected.
-                <Button
-                  type="button"
-                  onClick={onCancel}
-                  size="sm"
-                  className="w-fit"
-                  variant="outline"
-                >
-                  Cancel
-                </Button>
-              </div>
+                Cancel
+              </Button>
             </div>
-          ) : (
+          </div>
+        </div>
+      ) : (
+        <div className="h-full grid place-items-center">
+          <div className="flex flex-col gap-4 items-center">
+            <SendIcon
+              size={64}
+              className="text-muted-foreground"
+              strokeWidth={1.2}
+            />
             <span className="text-[16px] font-semibold text-muted-foreground">
-              Send a request first to see the response here
+              Send your first request
             </span>
-          )}
+            {tip}
+          </div>
         </div>
       )}
     </div>

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

@@ -9,11 +9,11 @@ export const SchemaExampleAndDefault = ({
   const example = schema.examples?.at(0);
   const defaultValue = schema.default;
 
-  if (!example && !defaultValue) return null;
+  if (example === undefined && defaultValue === undefined) return null;
 
   return (
     <div className="flex flex-col gap-1 text-xs">
-      {example && (
+      {example !== undefined && (
         <div>
           <span className="text-muted-foreground">Example: </span>
           <SelectOnClick className="border rounded-sm px-1 font-mono">
@@ -23,7 +23,7 @@ export const SchemaExampleAndDefault = ({
           </SelectOnClick>
         </div>
       )}
-      {defaultValue && (
+      {defaultValue !== undefined && (
         <div>
           <span className="text-muted-foreground">Default: </span>
           <SelectOnClick className="border rounded-sm px-1 font-mono">

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

@@ -2,10 +2,9 @@ import * as Collapsible from "@radix-ui/react-collapsible";
 import { MinusIcon, PlusIcon, RefreshCcwDotIcon } from "lucide-react";
 import { useCallback, useState } from "react";
 import { InlineCode } from "../../../components/InlineCode.js";
-import { Markdown, ProseClasses } from "../../../components/Markdown.js";
+import { Markdown } from "../../../components/Markdown.js";
 import type { SchemaObject } from "../../../oas/parser/index.js";
 import { Button } from "../../../ui/Button.js";
-import { cn } from "../../../util/cn.js";
 import { objectEntries } from "../../../util/objectEntries.js";
 import { ConstValue } from "../components/ConstValue.js";
 import { EnumValues } from "../components/EnumValues.js";
@@ -117,7 +116,7 @@ export const SchemaPropertyItem = ({
         </div>
         {schema.description && (
           <Markdown
-            className={cn(ProseClasses, "text-sm leading-normal line-clamp-4")}
+            className="text-sm leading-normal"
             content={schema.description}
           />
         )}

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}
     />
   );
@@ -86,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"
@@ -101,7 +96,7 @@ export const SchemaView = ({
           >
             <InfoIcon size={14} />
           </a>
-        </div>
+        </Typography>
       ) : null;
 
     return (

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

@@ -4,8 +4,9 @@ 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" ||

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

package/src/lib/ui/Alert.tsx

@@ -1,5 +1,5 @@
 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(

package/src/lib/ui/CodeBlock.tsx

@@ -1,7 +1,8 @@
 import { CheckIcon, CopyIcon } from "lucide-react";
 import type { ReactNode } from "react";
-import { useRef, useState } from "react";
+import { useRef } from "react";
 import { cn } from "../util/cn.js";
+import { useCopyToClipboard } from "../util/useCopyToClipboard.js";
 
 export type CodeBlockProps = {
   className?: string;
@@ -26,7 +27,7 @@ export const CodeBlock = ({
   showLineNumbers,
   ...props
 }: CodeBlockProps) => {
-  const [isCopied, setIsCopied] = useState(false);
+  const [isCopied, copyToClipboard] = useCopyToClipboard();
   const ref = useRef<HTMLDivElement>(null);
 
   if (!children) return null;
@@ -57,9 +58,7 @@ export const CodeBlock = ({
             onClick={() => {
               if (!ref.current?.textContent) return;
 
-              setIsCopied(true);
-              void navigator.clipboard.writeText(ref.current.textContent);
-              setTimeout(() => setIsCopied(false), 2000);
+              copyToClipboard(ref.current.textContent);
             }}
           >
             {isCopied ? (
@@ -77,7 +76,7 @@ export const CodeBlock = ({
       </div>
       <div
         className={cn(
-          "code-block text-sm not-prose scrollbar overflow-x-auto scrollbar p-4",
+          "code-block text-sm not-prose scrollbar overflow-x-auto scrollbar [&>code]:p-4",
           props.className,
         )}
         ref={ref}

package/src/lib/ui/Dialog.tsx

@@ -45,8 +45,8 @@ const DialogContent = React.forwardRef<
     >
       {children}
       {showCloseButton && (
-        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-          <XIcon className="h-4 w-4" />
+        <DialogPrimitive.Close className="absolute left-1 top-1 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+          <XIcon className="h-3 w-3" strokeWidth={2} />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>
       )}

package/src/lib/ui/EmbeddedCodeBlock.tsx

@@ -34,13 +34,13 @@ export const EmbeddedCodeBlock = ({
   return (
     <div
       className={cn(
-        "code-block-wrapper relative group bg-muted/50 rounded-md",
+        "code-block-wrapper relative group bg-muted/50",
         showLineNumbers && "line-numbers",
       )}
     >
       <div
         className={cn(
-          "code-block text-sm not-prose scrollbar overflow-x-auto scrollbar p-4",
+          "code-block text-sm not-prose scrollbar overflow-x-auto scrollbar [&>pre]:p-4",
           props.className,
         )}
         ref={ref}

package/src/lib/ui/Select.tsx

@@ -16,7 +16,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50",
       className,
     )}
     {...props}