zudoku 0.0.0-fix-create-zudoku-run-build.fefccf58 → 0.0.0-fix-downgrade-openapi-parser.aac00796

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

@@ -3,7 +3,11 @@ import {
   CornerDownLeftIcon,
   CornerDownRightIcon,
   DownloadIcon,
+  EyeIcon,
+  EyeOffIcon,
+  MinusCircleIcon,
   PlusCircleIcon,
+  SquareCodeIcon,
 } from "lucide-react";
 import { useState } from "react";
 import { Button } from "zudoku/ui/Button.js";
@@ -12,6 +16,7 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "zudoku/ui/Collapsible.js";
+import { SecretText } from "zudoku/ui/Secret.js";
 import {
   Select,
   SelectContent,
@@ -19,6 +24,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "zudoku/ui/Select.js";
+import { SyntaxHighlight } from "zudoku/ui/SyntaxHighlight.js";
+import { cn } from "../../../../util/cn.js";
 import createVariantComponent from "../../../../util/createVariantComponent.js";
 import { humanFileSize } from "../../../../util/humanFileSize.js";
 import {
@@ -26,7 +33,6 @@ import {
   CollapsibleHeaderTrigger,
 } from "../CollapsibleHeader.js";
 import { convertToTypes } from "./convertToTypes.js";
-import { Highlight } from "./Highlight.js";
 
 const mimeTypeToLanguage = (mimeType: string) => {
   const mimeTypeMapping = {
@@ -88,7 +94,38 @@ const Row = createVariantComponent(
   "grid-cols-subgrid grid border-b col-span-full px-4 py-1.5 font-mono text-xs",
 );
 
-const RowContent = createVariantComponent("div", "py-1 break-all");
+const RowContent = createVariantComponent("div", "py-1 break-words");
+const RowValue = ({ value, header }: { value: string; header: string }) => {
+  const secretHeaders = ["authorization", "key", "secret", "token"];
+  const isSecret = secretHeaders.includes(header.toLowerCase());
+  const [revealed, setRevealed] = useState(!isSecret);
+  return (
+    <RowContent
+      className={cn(
+        "max-h-28 overflow-auto",
+        isSecret && "cursor-pointer flex group",
+      )}
+      onClick={() => {
+        if (isSecret) {
+          setRevealed((prev) => !prev);
+        }
+      }}
+    >
+      {!isSecret ? (
+        value
+      ) : (
+        <>
+          <SecretText secret={value} previewChars={0} revealed={revealed} />
+          {revealed ? (
+            <EyeOffIcon size={14} className={cn("hidden group-hover:block")} />
+          ) : (
+            <EyeIcon size={14} className={cn("hidden group-hover:block")} />
+          )}
+        </>
+      )}
+    </RowContent>
+  );
+};
 
 export const ResponseTab = ({
   body = "",
@@ -146,47 +183,70 @@ export const ResponseTab = ({
     <>
       <Collapsible defaultOpen>
         <CollapsibleHeaderTrigger>
-          <CornerDownRightIcon size={16} />
+          <CornerDownRightIcon size={14} />
           <CollapsibleHeader className="col-span-2">
-            Header Request
+            Request Headers
           </CollapsibleHeader>
         </CollapsibleHeaderTrigger>
         <CollapsibleContent>
-          <div className="grid grid-cols-2 gap-x-6 text-sm">
+          <div className="grid grid-cols-[2fr_3fr] gap-x-6 text-sm">
             {request.headers
               .slice(0, MAX_HEADERS_TO_SHOW)
               .map(([key, value]) => (
                 <Row key={key}>
                   <RowContent>{key}</RowContent>
-                  <RowContent>{value}</RowContent>
+                  <RowValue value={value} header={key} />
                 </Row>
               ))}
+            {request.headers.length > MAX_HEADERS_TO_SHOW && (
+              <Collapsible className="col-span-full grid-cols-subgrid grid group">
+                <CollapsibleTrigger className="data-[state=open]:hidden justify-center col-span-2 text-xs text-muted-foreground hover:text-primary border-b h-8 flex items-center gap-2">
+                  Show {request.headers.length - MAX_HEADERS_TO_SHOW} more
+                  headers
+                  <PlusCircleIcon size={12} className="text-muted-foreground" />
+                </CollapsibleTrigger>
+                <CollapsibleContent className="col-span-full grid grid-cols-subgrid">
+                  {request.headers
+                    .slice(MAX_HEADERS_TO_SHOW)
+                    .map(([key, value]) => (
+                      <Row key={key}>
+                        <RowContent>{key}</RowContent>
+                        <RowValue value={value} header={key} />
+                      </Row>
+                    ))}
+                  <CollapsibleTrigger className="justify-center col-span-2 text-xs text-muted-foreground hover:text-primary border-b h-8 flex items-center gap-2">
+                    Hide {request.headers.length - MAX_HEADERS_TO_SHOW} headers
+                    <MinusCircleIcon
+                      size={12}
+                      className="text-muted-foreground"
+                    />
+                  </CollapsibleTrigger>
+                </CollapsibleContent>
+              </Collapsible>
+            )}
           </div>
         </CollapsibleContent>
       </Collapsible>
 
       <Collapsible defaultOpen>
         <CollapsibleHeaderTrigger>
-          <CornerDownLeftIcon size={16} />
+          <CornerDownLeftIcon size={14} />
           <CollapsibleHeader className="col-span-2">
-            Header Response
+            Response Headers
           </CollapsibleHeader>
         </CollapsibleHeaderTrigger>
         <CollapsibleContent>
-          <div className="grid grid-cols-2 gap-x-6 text-sm">
+          <div className="grid grid-cols-[2fr_3fr] gap-x-6 text-sm">
             {sortedHeaders.slice(0, MAX_HEADERS_TO_SHOW).map(([key, value]) => (
               <Row key={key}>
                 <RowContent>{key}</RowContent>
-                <RowContent>{value}</RowContent>
+                <RowValue value={value} header={key} />
               </Row>
             ))}
             {sortedHeaders.length > MAX_HEADERS_TO_SHOW && (
               <Collapsible className="col-span-full grid-cols-subgrid grid group">
                 <CollapsibleTrigger className="data-[state=open]:hidden justify-center col-span-2 text-xs text-muted-foreground hover:text-primary border-b h-8 flex items-center gap-2">
-                  <span>
-                    Show {sortedHeaders.length - MAX_HEADERS_TO_SHOW} more
-                    headers
-                  </span>
+                  Show {sortedHeaders.length - MAX_HEADERS_TO_SHOW} more headers
                   <PlusCircleIcon size={12} className="text-muted-foreground" />
                 </CollapsibleTrigger>
                 <CollapsibleContent className="col-span-full grid grid-cols-subgrid">
@@ -195,9 +255,16 @@ export const ResponseTab = ({
                     .map(([key, value]) => (
                       <Row key={key}>
                         <RowContent>{key}</RowContent>
-                        <RowContent>{value}</RowContent>
+                        <RowValue value={value} header={key} />
                       </Row>
                     ))}
+                  <CollapsibleTrigger className="justify-center col-span-2 text-xs text-muted-foreground hover:text-primary border-b h-8 flex items-center gap-2">
+                    Hide {sortedHeaders.length - MAX_HEADERS_TO_SHOW} headers
+                    <MinusCircleIcon
+                      size={12}
+                      className="text-muted-foreground"
+                    />
+                  </CollapsibleTrigger>
                 </CollapsibleContent>
               </Collapsible>
             )}
@@ -205,26 +272,30 @@ export const ResponseTab = ({
         </CollapsibleContent>
       </Collapsible>
 
-      <div className="flex gap-2 justify-between items-center border-b h-10">
+      <div className="flex gap-2 justify-between items-center border-b px-2 flex-0">
+        <CollapsibleHeader className="flex items-center gap-2">
+          <SquareCodeIcon size={14} />
+          Response body
+        </CollapsibleHeader>
         {jsonContent && !isBinary && (
-          <div className="px-2">
-            <Select
-              value={view}
-              onValueChange={(value) => setView(value as "formatted" | "raw")}
-            >
-              <SelectTrigger className="min-w-32 border-none h-8">
-                <SelectValue placeholder="View" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="formatted">Formatted</SelectItem>
-                <SelectItem value="raw">Raw</SelectItem>
-                <SelectItem value="types">Types</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
+          <Select
+            value={view}
+            onValueChange={(value) =>
+              setView(value as "formatted" | "raw" | "types")
+            }
+          >
+            <SelectTrigger className="max-w-32 border-0 bg-transparent">
+              <SelectValue placeholder="View" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="formatted">Formatted</SelectItem>
+              <SelectItem value="raw">Raw</SelectItem>
+              <SelectItem value="types">Types</SelectItem>
+            </SelectContent>
+          </Select>
         )}
       </div>
-      <div>
+      <div className="flex-1">
         {isBinary ? (
           <div className="p-4 text-center">
             <div className="flex flex-col items-center gap-4">
@@ -244,26 +315,27 @@ export const ResponseTab = ({
             </div>
           </div>
         ) : (
-          <div className="overflow-auto max-w-full p-4 text-xs max-h-[calc(83.333vh-180px)]">
-            <Highlight
-              language={
-                view === "types"
-                  ? "typescript"
-                  : view === "raw"
-                    ? jsonContent
-                      ? "plain"
-                      : detectedLanguage
-                    : "json"
-              }
-              code={
-                (view === "raw"
-                  ? body
-                  : view === "types"
-                    ? types.data?.lines.join("\n")
-                    : beautifiedBody) ?? ""
-              }
-            />
-          </div>
+          <SyntaxHighlight
+            className="text-xs flex-1"
+            embedded
+            fullHeight
+            language={
+              view === "types"
+                ? "typescript"
+                : view === "raw"
+                  ? jsonContent
+                    ? "plain"
+                    : detectedLanguage
+                  : "json"
+            }
+            code={
+              (view === "raw"
+                ? body
+                : view === "types"
+                  ? types.data?.lines.join("\n")
+                  : beautifiedBody) ?? ""
+            }
+          />
         )}
       </div>
     </>

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

@@ -25,7 +25,7 @@ export const ResultPanel = ({
   tip?: React.ReactNode;
 }) => {
   return (
-    <div className="overflow-y-auto h-[80vh] bg-muted/50">
+    <div className="flex flex-col overflow-y-auto h-[80vh] bg-muted/50">
       {(queryMutation.isPending || queryMutation.data) && (
         <ResponseStatusBar
           status={queryMutation.data?.status}

package/src/lib/plugins/openapi/playground/useRememberSkipLoginDialog.tsx

@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
+import { syncZustandState } from "../../../util/syncZustandState.js";
 
 type RememberSkipLoginState = {
   skipLogin: boolean;
@@ -18,3 +19,5 @@ export const useRememberSkipLoginDialog = create<RememberSkipLoginState>()(
     },
   ),
 );
+
+syncZustandState(useRememberSkipLoginDialog);

package/src/lib/plugins/openapi/schema/AllOfGroup/AllOfGroupView.tsx

@@ -5,7 +5,13 @@ import type { SchemaObject } from "../../../../oas/parser/index.js";
 import { Card } from "../../../../ui/Card.js";
 import { AllOfGroupItem } from "./AllOfGroupItem.js";
 
-export const AllOfGroupView = ({ schema }: { schema: SchemaObject }) => {
+export const AllOfGroupView = ({
+  schema,
+  cardHeader,
+}: {
+  schema: SchemaObject;
+  cardHeader?: React.ReactNode;
+}) => {
   const [isOpen, setIsOpen] = useState(true);
   const toggleOpen = useCallback(() => setIsOpen((prev) => !prev), []);
 
@@ -13,8 +19,9 @@ export const AllOfGroupView = ({ schema }: { schema: SchemaObject }) => {
 
   return (
     <Collapsible.Root open={isOpen} onOpenChange={toggleOpen} asChild>
-      <Card className="px-6">
-        <Collapsible.Trigger className="flex gap-2 items-center py-2 w-full text-sm text-muted-foreground -translate-x-1.5">
+      <Card className="overflow-hidden">
+        {cardHeader}
+        <Collapsible.Trigger className="flex gap-2 items-center py-2 px-6 w-full text-sm text-muted-foreground -translate-x-1.5">
           {isOpen ? (
             <SquareMinusIcon size={14} />
           ) : (
@@ -23,7 +30,7 @@ export const AllOfGroupView = ({ schema }: { schema: SchemaObject }) => {
           <span>All of</span>
         </Collapsible.Trigger>
 
-        <Collapsible.Content className="pb-4">
+        <Collapsible.Content className="pb-4 px-6">
           {schema.allOf.map((subSchema, index) => (
             // biome-ignore lint/suspicious/noArrayIndexKey: Index needed for key
             <AllOfGroupItem key={index} schema={subSchema} />

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

@@ -20,14 +20,20 @@ const renderMarkdown = (content?: string) =>
     />
   );
 
-const renderBasicSchema = (schema: SchemaObject) => (
-  <Card className="p-4 space-y-2">
-    <span className="text-sm text-muted-foreground">
-      <ParamInfos schema={schema} />
-    </span>
-    {schema.enum && <EnumValues values={schema.enum} />}
-    {renderMarkdown(schema.description)}
-    <SchemaExampleAndDefault schema={schema} />
+const renderBasicSchema = (
+  schema: SchemaObject,
+  cardHeader?: React.ReactNode,
+) => (
+  <Card className="overflow-hidden">
+    {cardHeader}
+    <div className="p-4 space-y-2">
+      <span className="text-sm text-muted-foreground">
+        <ParamInfos schema={schema} />
+      </span>
+      {schema.enum && <EnumValues values={schema.enum} />}
+      {renderMarkdown(schema.description)}
+      <SchemaExampleAndDefault schema={schema} />
+    </div>
   </Card>
 );
 
@@ -58,19 +64,19 @@ export const SchemaView = ({
   }
 
   if (Array.isArray(schema.oneOf) || Array.isArray(schema.anyOf)) {
-    return <UnionView schema={schema} />;
+    return <UnionView schema={schema} cardHeader={cardHeader} />;
   }
 
   if (Array.isArray(schema.allOf)) {
-    return <AllOfGroupView schema={schema} />;
+    return <AllOfGroupView schema={schema} cardHeader={cardHeader} />;
   }
 
   if (isBasicType(schema.type)) {
-    return renderBasicSchema(schema);
+    return renderBasicSchema(schema, cardHeader);
   }
 
   if (schema.type === "array" && typeof schema.items === "object") {
-    return <SchemaView schema={schema.items} />;
+    return <SchemaView schema={schema.items} cardHeader={cardHeader} />;
   }
 
   if (schema.type === "object") {

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

@@ -1,7 +1,8 @@
+import { useState } from "react";
 import type { SchemaObject } from "../../../oas/parser/index.js";
 import { Badge } from "../../../ui/Badge.js";
 import { Card } from "../../../ui/Card.js";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../ui/Tabs.js";
+import { cn } from "../../../util/cn.js";
 import { SchemaView } from "./SchemaView.js";
 import {
   decideExclusivity,
@@ -13,9 +14,13 @@ import {
 const DecisionTable = ({
   variants,
   schema,
+  selectedVariant,
+  onSelectVariant,
 }: {
   variants: SchemaObject[];
   schema: SchemaObject;
+  selectedVariant: string;
+  onSelectVariant: (label: string) => void;
 }) => {
   const rows = variants.map((v, i) => ({
     label: labelForVariant(i, v),
@@ -36,7 +41,18 @@ const DecisionTable = ({
           <tbody className="divide-y">
             {rows.map((row) => (
               <tr key={row.label} className="hover:bg-muted/30">
-                <td className="p-2 font-medium">{row.label}</td>
+                <td className="p-2 font-medium">
+                  <button
+                    type="button"
+                    className={cn(
+                      "hover:underline",
+                      selectedVariant === row.label && "text-primary",
+                    )}
+                    onClick={() => onSelectVariant(row.label)}
+                  >
+                    {row.label}
+                  </button>
+                </td>
                 <td className="p-2 text-muted-foreground text-xs">
                   {row.guards.length > 0
                     ? row.guards.join(" · ")
@@ -51,26 +67,38 @@ const DecisionTable = ({
   );
 };
 
-const VariantPanel = ({ variant }: { variant: SchemaObject }) => (
-  <div className="my-4">
-    {variant.description && (
-      <p className="text-sm text-muted-foreground">{variant.description}</p>
-    )}
-    <SchemaView schema={variant} />
-  </div>
-);
+const VariantPanel = ({ variant }: { variant: SchemaObject }) => {
+  return (
+    <div className="space-y-2">
+      {variant.description && (
+        <p className="text-sm text-muted-foreground">{variant.description}</p>
+      )}
+      <SchemaView schema={variant} />
+    </div>
+  );
+};
 
-export const UnionView = ({ schema }: { schema: SchemaObject }) => {
+export const UnionView = ({
+  schema,
+  cardHeader,
+}: {
+  schema: SchemaObject;
+  cardHeader?: React.ReactNode;
+}) => {
   const mode = Array.isArray(schema.oneOf)
     ? "oneOf"
     : Array.isArray(schema.anyOf)
       ? "anyOf"
       : undefined;
 
+  const variants = mode ? unionVariants(schema) : [];
+  const [selectedVariant, setSelectedVariant] = useState(() =>
+    variants[0] ? labelForVariant(0, variants[0]) : "",
+  );
+
   if (!mode) return null;
 
   const exclusivity = decideExclusivity(schema);
-  const variants = unionVariants(schema);
 
   const semanticsMessage =
     exclusivity === "exactly-one" ? (
@@ -84,8 +112,15 @@ export const UnionView = ({ schema }: { schema: SchemaObject }) => {
       </>
     );
 
+  const currentVariantIndex = variants.findIndex(
+    (v, i) => labelForVariant(i, v) === selectedVariant,
+  );
+  const currentVariant =
+    currentVariantIndex >= 0 ? variants[currentVariantIndex] : null;
+
   return (
-    <Card className="overflow-hidden">
+    <Card className="overflow-hidden text-sm">
+      {cardHeader}
       <div className="flex flex-col gap-4 p-4">
         <div className="flex items-center gap-2">
           <Badge variant="outline">{mode}</Badge>
@@ -94,30 +129,15 @@ export const UnionView = ({ schema }: { schema: SchemaObject }) => {
           </div>
         </div>
 
-        <DecisionTable variants={variants} schema={schema} />
+        <DecisionTable
+          variants={variants}
+          schema={schema}
+          selectedVariant={selectedVariant}
+          onSelectVariant={setSelectedVariant}
+        />
+        <strong>Properties for {selectedVariant}:</strong>
+        {currentVariant && <VariantPanel variant={currentVariant} />}
       </div>
-      <Tabs defaultValue="0" className="w-full px-4">
-        <TabsList className="flex w-full">
-          {variants.map((v, i) => (
-            <TabsTrigger
-              key={labelForVariant(i, v)}
-              value={String(i)}
-              className="flex-1"
-            >
-              {labelForVariant(i, v)}
-            </TabsTrigger>
-          ))}
-        </TabsList>
-        {variants.map((v, i) => (
-          <TabsContent
-            key={labelForVariant(i, v)}
-            value={String(i)}
-            className="px-2"
-          >
-            <VariantPanel variant={v} />
-          </TabsContent>
-        ))}
-      </Tabs>
     </Card>
   );
 };

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

@@ -25,8 +25,36 @@ export type FieldDoc = {
   requiredInAll: boolean;
 };
 
-export const unionVariants = (schema: SchemaObject) =>
-  (schema.oneOf ?? schema.anyOf ?? []) as SchemaObject[];
+export const unionVariants = (schema: SchemaObject): SchemaObject[] => {
+  const variants = (schema.oneOf ?? schema.anyOf ?? []) as SchemaObject[];
+
+  // If parent schema has properties that variants don't, merge them
+  // This handles the pattern where anyOf/oneOf is used just for required field combinations
+  if (schema.properties && Object.keys(schema.properties).length > 0) {
+    return variants.map((variant) => {
+      // If variant doesn't define its own properties or type, inherit from parent
+      const shouldInherit =
+        !variant.properties &&
+        !variant.type &&
+        !variant.allOf &&
+        !variant.oneOf &&
+        !variant.anyOf;
+
+      if (shouldInherit) {
+        return {
+          ...variant,
+          type: "object" as const,
+          properties: schema.properties,
+          required: variant.required ?? schema.required,
+        };
+      }
+
+      return variant;
+    });
+  }
+
+  return variants;
+};
 
 export const decideExclusivity = (
   schema: SchemaObject,

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,
@@ -69,6 +72,8 @@ export const defaultLanguages: BundledLanguage[] = [
   "jsx",
   "typescript",
   "tsx",
+  "graphql",
+  "jsonc",
   "json",
   "python",
   "java",
@@ -83,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) => {
@@ -130,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),
+        }),
+    },
+  });
 };