zudoku 0.64.0 → 0.64.2

package/src/lib/plugins/openapi/SidecarExamples.tsx

@@ -1,11 +1,8 @@
-import { useEffect, useMemo, useState } from "react";
-import type { SchemaObject } from "../../oas/parser/index.js";
 import { SyntaxHighlight } from "../../ui/SyntaxHighlight.js";
-import { CollapsibleCode } from "./CollapsibleCode.js";
+import { NonHighlightedCode } from "./components/NonHighlightedCode.js";
 import type { MediaTypeObject } from "./graphql/graphql.js";
 import * as SidecarBox from "./SidecarBox.js";
 import { SimpleSelect } from "./SimpleSelect.js";
-import { generateSchemaExample } from "./util/generateSchemaExample.js";
 
 const formatForDisplay = (value: unknown): string => {
   if (value == null) return "No example";
@@ -35,47 +32,35 @@ const getLanguage = (mediaType?: string): string => {
 export type SidecarExamplesProps = {
   content: MediaTypeObject[];
   description?: string;
-  onExampleChange?: (example: unknown) => void;
+  selectedContentIndex: number;
+  selectedExampleIndex: number;
+  onExampleChange?: ({
+    contentTypeIndex,
+    exampleIndex,
+  }: {
+    contentTypeIndex: number;
+    exampleIndex: number;
+  }) => void;
+  isOnScreen: boolean;
+  shouldLazyHighlight?: boolean;
 };
 
 export const SidecarExamples = ({
   content,
   description,
   onExampleChange,
+  selectedContentIndex,
+  selectedExampleIndex,
+  isOnScreen,
+  shouldLazyHighlight,
 }: SidecarExamplesProps) => {
-  const [selectedContentTypeIndex, setSelectedContentTypeIndex] = useState(0);
-  const [selectedExampleIndex, setSelectedExampleIndex] = useState(0);
-
-  // Get the effective content (handle single item array case)
-  const effectiveContent =
-    Array.isArray(content) && content.length === 1
-      ? content[0]
-      : content[selectedContentTypeIndex];
-
   // Get example value, with fallback to schema-generated example
-  const examples = effectiveContent?.examples ?? [];
-  const selectedExample = examples[selectedExampleIndex];
-
-  const exampleValue = useMemo(() => {
-    if (selectedExample) {
-      // If it's a wrapped example with a value field, use that
-      return "value" in selectedExample
-        ? selectedExample.value
-        : selectedExample;
-    } else if (effectiveContent?.schema) {
-      // No example provided, generate one from schema
-      return generateSchemaExample(effectiveContent.schema as SchemaObject);
-    }
-  }, [selectedExample, effectiveContent?.schema]);
-
-  useEffect(() => {
-    if (!exampleValue) return;
-
-    onExampleChange?.(exampleValue);
-  }, [exampleValue, onExampleChange]);
+  const selectedContent = content[selectedContentIndex];
+  const examples = selectedContent?.examples ?? [];
+  const selectedExample = examples?.[selectedExampleIndex];
 
-  const formattedExample = formatForDisplay(exampleValue);
-  const language = getLanguage(effectiveContent?.mediaType);
+  const formattedExample = formatForDisplay(selectedExample?.value);
+  const language = getLanguage(selectedContent?.mediaType);
 
   return (
     <>
@@ -91,16 +76,15 @@ export const SidecarExamples = ({
               View External Example →
             </a>
           </div>
+        ) : shouldLazyHighlight && !isOnScreen ? (
+          <NonHighlightedCode code={formattedExample} />
         ) : (
-          <CollapsibleCode>
-            <SyntaxHighlight
-              embedded
-              language={language}
-              noBackground
-              className="[--scrollbar-color:gray] rounded-none text-xs max-h-[500px]"
-              code={formattedExample}
-            />
-          </CollapsibleCode>
+          <SyntaxHighlight
+            embedded
+            language={language}
+            className="[--scrollbar-color:gray] rounded-none max-h-[200px] text-xs overflow-auto"
+            code={formattedExample}
+          />
         )}
         {selectedExample?.description && (
           <div className="border-t text-xs px-3 py-1.5 text-muted-foreground">
@@ -120,9 +104,12 @@ export const SidecarExamples = ({
               {content.length > 1 ? (
                 <SimpleSelect
                   className="max-w-[200px]"
-                  value={selectedContentTypeIndex.toString()}
+                  value={selectedContentIndex.toString()}
                   onChange={(e) =>
-                    setSelectedContentTypeIndex(Number(e.target.value))
+                    onExampleChange?.({
+                      contentTypeIndex: Number(e.target.value),
+                      exampleIndex: 0,
+                    })
                   }
                   options={content.map((c, index) => ({
                     value: index.toString(),
@@ -141,7 +128,10 @@ export const SidecarExamples = ({
                   className="max-w-[180px]"
                   value={selectedExampleIndex.toString()}
                   onChange={(e) =>
-                    setSelectedExampleIndex(Number(e.target.value))
+                    onExampleChange?.({
+                      contentTypeIndex: selectedContentIndex,
+                      exampleIndex: Number(e.target.value),
+                    })
                   }
                   options={examples.map((example, index) => ({
                     value: index.toString(),

package/src/lib/plugins/openapi/components/NonHighlightedCode.tsx

@@ -0,0 +1,22 @@
+import { cn } from "../../../util/cn.js";
+import { OverflowOverlay } from "../CollapsibleCode.js";
+
+export const NonHighlightedCode = ({
+  code,
+  className,
+}: {
+  code: string;
+  className?: string;
+}) => (
+  <pre
+    className={cn(
+      "relative text-(--shiki-light) dark:text-(--shiki-dark) p-2 text-xs font-mono max-h-[250px] leading-4.5 bg-(--shiki-light-bg) dark:bg-(--shiki-dark-bg) overflow-hidden",
+      className,
+    )}
+  >
+    <code>
+      {code.split("\n").length > 13 && <OverflowOverlay />}
+      {code}
+    </code>
+  </pre>
+);

package/src/lib/plugins/openapi/components/ResponseContent.tsx

@@ -71,7 +71,7 @@ export const ResponseContent = ({
       </div>
       {currentResponse?.description && (
         <Markdown
-          className="text-sm border-t px-4 py-2 text-muted-foreground"
+          className="text-sm border-t px-4 py-2 text-muted-foreground max-w-none"
           content={currentResponse.description}
         />
       )}

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

@@ -9,7 +9,6 @@ import { ConstValue } from "../components/ConstValue.js";
 import { EnumValues } from "../components/EnumValues.js";
 import { SelectOnClick } from "../components/SelectOnClick.js";
 import { ParamInfos } from "../ParamInfos.js";
-import { AllOfGroupView } from "./AllOfGroup/AllOfGroupView.js";
 import { SchemaExampleAndDefault } from "./SchemaExampleAndDefault.js";
 import { SchemaView } from "./SchemaView.js";
 import {
@@ -124,9 +123,7 @@ export const SchemaPropertyItem = ({
             )}
             <Collapsible.Content>
               <div className="mt-2">
-                {schema.allOf ? (
-                  <AllOfGroupView schema={schema} />
-                ) : schema.anyOf || schema.oneOf || schema.type === "object" ? (
+                {schema.anyOf || schema.oneOf || schema.type === "object" ? (
                   <SchemaView schema={schema} />
                 ) : isArrayType(schema) && "items" in schema ? (
                   <SchemaView schema={schema.items} />

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

@@ -6,7 +6,6 @@ import { groupBy } from "../../../util/groupBy.js";
 import { ConstValue } from "../components/ConstValue.js";
 import { EnumValues } from "../components/EnumValues.js";
 import { ParamInfos } from "../ParamInfos.js";
-import { AllOfGroupView } from "./AllOfGroup/AllOfGroupView.js";
 import { SchemaExampleAndDefault } from "./SchemaExampleAndDefault.js";
 import { SchemaPropertyItem } from "./SchemaPropertyItem.js";
 import { UnionView } from "./UnionView.js";
@@ -67,10 +66,6 @@ export const SchemaView = ({
     return <UnionView schema={schema} cardHeader={cardHeader} />;
   }
 
-  if (Array.isArray(schema.allOf)) {
-    return <AllOfGroupView schema={schema} cardHeader={cardHeader} />;
-  }
-
   if (isBasicType(schema.type)) {
     return renderBasicSchema(schema, cardHeader);
   }

package/src/lib/plugins/openapi/schema/union-helpers.ts

@@ -36,7 +36,6 @@ export const unionVariants = (schema: SchemaObject): SchemaObject[] => {
       const shouldInherit =
         !variant.properties &&
         !variant.type &&
-        !variant.allOf &&
         !variant.oneOf &&
         !variant.anyOf;
 

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

@@ -85,23 +85,23 @@ export const generateSchemaExample = (
     return schema.enum[0];
   }
 
-  if (schema.oneOf) {
-    const randomIndex = Math.floor(Math.random() * schema.oneOf.length);
-    return generateSchemaExample(schema.oneOf[randomIndex] as SchemaObject);
+  if (schema.oneOf && schema.oneOf.length > 0) {
+    return generateSchemaExample(schema.oneOf[0]);
   }
 
-  if (schema.anyOf) {
+  if (schema.anyOf && schema.anyOf.length > 0) {
     // Should likely be expanded to return a partial set of values, but it would require
     // detection if being used within an array or a string type.
-    const randomIndex = Math.floor(Math.random() * schema.anyOf.length);
-    return generateSchemaExample(schema.anyOf[randomIndex] as SchemaObject);
+    return generateSchemaExample(schema.anyOf[0]);
   }
 
-  if (schema.allOf) {
-    // https://swagger.io/docs/specification/v3_0/data-models/oneof-anyof-allof-not/#allof
-    return schema.allOf.reduce((acc, allOfSchema) => {
-      return { ...acc, ...generateSchemaExample(allOfSchema as SchemaObject) };
-    }, {});
+  // Check for property-level examples
+  if (
+    schema.examples &&
+    Array.isArray(schema.examples) &&
+    schema.examples.length > 0
+  ) {
+    return schema.examples[0];
   }
 
   switch (schema.type) {

package/src/lib/ui/CodeBlock.tsx

@@ -6,7 +6,6 @@ import { useCopyToClipboard } from "../util/useCopyToClipboard.js";
 
 export type CodeBlockProps = {
   className?: string;
-  noBackground?: boolean;
   wrapLines?: boolean;
   showLanguageIndicator?: boolean;
   language?: string;

package/src/lib/ui/EmbeddedCodeBlock.tsx

@@ -5,7 +5,6 @@ import { cn } from "../util/cn.js";
 
 export type CodeBlockProps = {
   className?: string;
-  noBackground?: boolean;
   wrapLines?: boolean;
   showLanguageIndicator?: boolean;
   language?: string;
@@ -42,7 +41,7 @@ export const EmbeddedCodeBlock = ({
     >
       <div
         className={cn(
-          "code-block text-sm not-prose scrollbar [&>pre]:overflow-x-auto [&>pre]:p-2",
+          "code-block text-sm not-prose scrollbar [&>pre]:overflow-x-auto [&_code]:p-2",
           fullHeight && "h-full [&>pre]:h-full",
           props.className,
         )}

package/src/lib/ui/Separator.tsx

@@ -0,0 +1,25 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import type * as React from "react";
+import { cn } from "../util/cn.js";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

package/src/lib/ui/Tooltip.tsx

@@ -1,43 +1,65 @@
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import * as React from "react";
+import { TooltipArrow } from "@radix-ui/react-tooltip";
+import type * as React from "react";
+import { cn } from "./util.js";
 
-import { cn } from "../util/cn.js";
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
 
-const TooltipProvider = TooltipPrimitive.Provider;
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
 
-const Tooltip = TooltipPrimitive.Root;
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
 
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipArrow = (
-  props: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>,
-) => (
-  <TooltipPrimitive.Arrow
-    {...props}
-    className={cn(props.className, "fill-border")}
-  />
-);
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className,
-    )}
-    {...props}
-  />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
 
 export {
   Tooltip,
-  TooltipArrow,
+  TooltipTrigger,
   TooltipContent,
   TooltipProvider,
-  TooltipTrigger,
+  TooltipArrow,
 };

package/src/lib/util/createVariantComponent.tsx

@@ -5,8 +5,31 @@ import type { HTMLElementType, JSX } from "react";
 import * as React from "react";
 import { cn } from "./cn.js";
 
+type ComponentOrElement =
+  | HTMLElementType
+  // biome-ignore lint/suspicious/noExplicitAny: Need to accept any component type
+  | React.ComponentType<any>
+  // biome-ignore lint/suspicious/noExplicitAny: Need to accept any component type
+  | React.ForwardRefExoticComponent<any>;
+
+type PropsOf<T> = T extends HTMLElementType
+  ? JSX.IntrinsicElements[T]
+  : T extends React.ComponentType<infer P>
+    ? P
+    : T extends React.ForwardRefExoticComponent<infer P>
+      ? P
+      : never;
+
+type RefOf<T> = T extends HTMLElementType
+  ? T extends keyof HTMLElementTagNameMap
+    ? HTMLElementTagNameMap[T]
+    : HTMLElement
+  : T extends React.ForwardRefExoticComponent<React.RefAttributes<infer R>>
+    ? R
+    : HTMLElement;
+
 const createVariantComponent = <
-  E extends HTMLElementType,
+  E extends ComponentOrElement,
   C extends ReturnType<typeof cva>,
 >(
   tag: E,
@@ -14,20 +37,23 @@ const createVariantComponent = <
   // variantProps: Array<keyof VariantProps<C>> = [],
 ) => {
   const MyVariant = React.forwardRef<
-    HTMLElement,
-    JSX.IntrinsicElements[E] & { className?: ClassValue; asChild?: boolean }
+    RefOf<E>,
+    PropsOf<E> & { className?: ClassValue; asChild?: boolean }
   >(({ className, asChild, ...props }, ref) => {
     const Comp = asChild ? Slot : tag;
 
     return React.createElement(Comp, {
       ...props,
-      ref,
+      ref: ref as React.Ref<HTMLElement>,
       className:
         typeof cvx === "function" ? cvx({ className }) : cn(cvx, className),
     });
   });
 
-  MyVariant.displayName = `VariantComponent(${tag})`;
+  MyVariant.displayName =
+    typeof tag === "string"
+      ? `VariantComponent(${tag})`
+      : `VariantComponent(${tag.displayName || tag.name || "Component"})`;
 
   return MyVariant;
 };