zudoku 0.0.0-fix-create-zudoku-run-build.fefccf58 → 0.0.0-reset-hash-value.ac516c6d

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

@@ -3,7 +3,7 @@ import { useFormContext } from "react-hook-form";
 import { Collapsible, CollapsibleContent } from "zudoku/ui/Collapsible.js";
 import { Textarea } from "zudoku/ui/Textarea.js";
 import { cn } from "../../../util/cn.js";
-import type { Content } from "../SidecarExamples.js";
+import type { MediaTypeObject } from "../graphql/graphql.js";
 import {
   CollapsibleHeader,
   CollapsibleHeaderTrigger,
@@ -11,7 +11,7 @@ import {
 import ExamplesDropdown from "./ExamplesDropdown.js";
 import type { PlaygroundForm } from "./Playground.js";
 
-export const BodyPanel = ({ content }: { content?: Content }) => {
+export const BodyPanel = ({ content }: { content?: MediaTypeObject[] }) => {
   const { register, setValue, watch } = useFormContext<PlaygroundForm>();
   const examples = (content ?? []).flatMap((e) => e.examples);
   const headers = watch("headers");

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

@@ -9,14 +9,14 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "zudoku/ui/DropdownMenu.js";
-import type { Content, Example } from "../SidecarExamples.js";
+import type { ExampleItem, MediaTypeObject } from "../graphql/graphql.js";
 
 const ExamplesDropdown = ({
   examples,
   onSelect,
 }: {
-  examples: Content;
-  onSelect: (example: Example, mediaType: string) => void;
+  examples: MediaTypeObject[];
+  onSelect: (example: ExampleItem, mediaType: string) => void;
 }) => {
   return (
     <DropdownMenu>

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

@@ -23,7 +23,7 @@ import { useHotkey } from "../../../hooks/useHotkey.js";
 import { cn } from "../../../util/cn.js";
 import { useCopyToClipboard } from "../../../util/useCopyToClipboard.js";
 import { useLatest } from "../../../util/useLatest.js";
-import type { Content } from "../SidecarExamples.js";
+import type { MediaTypeObject } from "../graphql/graphql.js";
 import { useSelectedServer } from "../state.js";
 import BodyPanel from "./BodyPanel.js";
 import {
@@ -117,7 +117,7 @@ export type PlaygroundContentProps = {
   queryParams?: QueryParam[];
   pathParams?: PathParam[];
   defaultBody?: string;
-  examples?: Content;
+  examples?: MediaTypeObject[];
   requiresLogin?: boolean;
   onLogin?: () => void;
   onSignUp?: () => void;
@@ -285,7 +285,7 @@ export const Playground = ({
         return {
           status: response.status,
           headers: responseHeaders,
-          size: responseSize ? parseInt(responseSize) : body.length,
+          size: responseSize ? Number(responseSize) : body.length,
           body,
           time,
           isBinary,

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

@@ -1,5 +1,6 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { type PropsWithChildren, useState } from "react";
+import { useAuth } from "zudoku/hooks";
 import {
   Dialog,
   DialogContent,
@@ -35,6 +36,9 @@ const HeroPlayIcon = ({
 
 const PlaygroundDialog = (props: PlaygroundDialogProps) => {
   const [open, setOpen] = useState(false);
+  const { isAuthEnabled, login, signup, isPending, isAuthenticated } =
+    useAuth();
+
   return (
     <Dialog onOpenChange={(open) => setOpen(open)}>
       <DialogTrigger asChild>
@@ -57,7 +61,14 @@ const PlaygroundDialog = (props: PlaygroundDialogProps) => {
         <VisuallyHidden>
           <DialogTitle>Playground</DialogTitle>
         </VisuallyHidden>
-        {open && <Playground {...props} />}
+        {open && (
+          <Playground
+            requiresLogin={isAuthEnabled && !isAuthenticated && !isPending}
+            onLogin={() => login()}
+            onSignUp={() => signup()}
+            {...props}
+          />
+        )}
       </DialogContent>
     </Dialog>
   );

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

@@ -3,6 +3,8 @@ import {
   CornerDownLeftIcon,
   CornerDownRightIcon,
   DownloadIcon,
+  EyeIcon,
+  EyeOffIcon,
   PlusCircleIcon,
 } from "lucide-react";
 import { useState } from "react";
@@ -12,6 +14,7 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "zudoku/ui/Collapsible.js";
+import { SecretText } from "zudoku/ui/Secret.js";
 import {
   Select,
   SelectContent,
@@ -19,6 +22,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "zudoku/ui/Select.js";
+import { cn } from "../../../../util/cn.js";
 import createVariantComponent from "../../../../util/createVariantComponent.js";
 import { humanFileSize } from "../../../../util/humanFileSize.js";
 import {
@@ -89,6 +93,30 @@ const Row = createVariantComponent(
 );
 
 const RowContent = createVariantComponent("div", "py-1 break-all");
+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(isSecret && "cursor-pointer flex group")}
+      onClick={() => {
+        if (isSecret) {
+          setRevealed((prev) => !prev);
+        }
+      }}
+    >
+      <SecretText secret={value} previewChars={0} revealed={revealed} />
+      {isSecret ? (
+        revealed ? (
+          <EyeOffIcon size={14} className={cn("hidden group-hover:block")} />
+        ) : (
+          <EyeIcon size={14} className={cn("hidden group-hover:block")} />
+        )
+      ) : null}
+    </RowContent>
+  );
+};
 
 export const ResponseTab = ({
   body = "",
@@ -158,7 +186,7 @@ export const ResponseTab = ({
               .map(([key, value]) => (
                 <Row key={key}>
                   <RowContent>{key}</RowContent>
-                  <RowContent>{value}</RowContent>
+                  <RowValue value={value} header={key} />
                 </Row>
               ))}
           </div>
@@ -177,7 +205,7 @@ export const ResponseTab = ({
             {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 && (
@@ -195,7 +223,7 @@ export const ResponseTab = ({
                     .map(([key, value]) => (
                       <Row key={key}>
                         <RowContent>{key}</RowContent>
-                        <RowContent>{value}</RowContent>
+                        <RowValue value={value} header={key} />
                       </Row>
                     ))}
                 </CollapsibleContent>

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

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

package/src/lib/ui/Carousel.tsx

@@ -132,7 +132,6 @@ const Carousel = React.forwardRef<
           canScrollNext,
         }}
       >
-        {/** biome-ignore lint/a11y/useSemanticElements: shadcn uses divs for the carousel */}
         <div
           ref={ref}
           onKeyDownCapture={handleKeyDown}

package/src/lib/ui/CodeBlock.tsx

@@ -1,6 +1,6 @@
 import { CheckIcon, CopyIcon } from "lucide-react";
-import type { ReactNode } from "react";
-import { useRef } from "react";
+import { type ReactNode, useRef } from "react";
+import { LanguageIcon } from "../components/LanguageIcon.js";
 import { cn } from "../util/cn.js";
 import { useCopyToClipboard } from "../util/useCopyToClipboard.js";
 
@@ -18,35 +18,6 @@ export type CodeBlockProps = {
   showLineNumbers?: boolean;
 };
 
-const IconToLanguageMap: Record<string, RegExp> = {
-  typescript: /(tsx?|typescript)/,
-  javascript: /(jsx?|javascript)/,
-  markdown: /(md|markdown)/,
-  mdx: /mdx/,
-  json: /json/,
-  yaml: /yaml/,
-  toml: /toml/,
-  gnubash: /(shell|bash|sh|zsh)/,
-  python: /(py|python)/,
-  dotnet: /(^cs$|csharp|vb)/,
-  rust: /(rs|rust)/,
-  ruby: /(rb|ruby)/,
-  php: /php/,
-  html5: /html?/,
-  css: /css/,
-};
-
-const getIconUrl = (language?: string) => {
-  if (!language) return undefined;
-
-  const icon = Object.entries(IconToLanguageMap).find(([_, regex]) =>
-    regex.test(language),
-  );
-  return icon
-    ? `https://cdn.simpleicons.org/${icon[0]}/000/fff?viewbox=auto`
-    : undefined;
-};
-
 export const CodeBlock = ({
   children,
   title = "Code",
@@ -61,20 +32,17 @@ export const CodeBlock = ({
 
   if (!children) return null;
 
-  const iconUrl = showLanguageIndicator ? getIconUrl(language) : undefined;
-
   return (
     <div
       className={cn(
-        "border code-block-wrapper relative group bg-muted/50 rounded-md overflow-hidden",
+        "border code-block-wrapper relative group rounded-md overflow-hidden",
         showLineNumbers && "line-numbers",
+        props.className,
       )}
     >
       <div className="border-b flex items-center h-10 font-sans bg-black/2">
-        <div className="flex items-center gap-2 flex-1 text-sm w-full px-3">
-          {iconUrl && (
-            <img src={iconUrl} className="h-3 max-w-4" alt={language} />
-          )}
+        <div className="flex items-center gap-1.5 flex-1 text-sm w-full px-3">
+          <LanguageIcon language={language} />
           {title}
         </div>{" "}
         {showCopy !== "never" && (
@@ -102,10 +70,7 @@ export const CodeBlock = ({
         )}
       </div>
       <div
-        className={cn(
-          "code-block text-sm not-prose scrollbar overflow-x-auto scrollbar [&_code]:p-3 [&_code]:py-2",
-          props.className,
-        )}
+        className="code-block text-sm not-prose scrollbar [&_code]:px-3 [&_code]:py-2"
         ref={ref}
       >
         {children}

package/src/lib/ui/EmbeddedCodeBlock.tsx

@@ -40,7 +40,7 @@ export const EmbeddedCodeBlock = ({
     >
       <div
         className={cn(
-          "code-block text-sm not-prose scrollbar overflow-x-auto scrollbar [&>pre]:p-4",
+          "code-block text-sm not-prose scrollbar overflow-x-auto [&>pre]:p-2",
           props.className,
         )}
         ref={ref}

package/src/lib/ui/ReactComponentDoc.tsx

@@ -0,0 +1,68 @@
+import { Badge } from "./Badge.js";
+import { Card } from "./Card.js";
+
+type PropType =
+  | string
+  | {
+      name: string;
+      description: string;
+      required: boolean;
+    };
+
+type ReactComponentDocProps = {
+  component: {
+    __docgenInfo: {
+      displayName: string;
+      description: string;
+      props: Record<
+        string,
+        {
+          type: PropType;
+          description: string;
+          required: boolean;
+        }
+      >;
+    };
+  };
+};
+
+export const ReactComponentDoc = ({ component }: ReactComponentDocProps) => {
+  const docgen = component.__docgenInfo;
+
+  if (!docgen) return null;
+
+  return (
+    <Card className="not-prose">
+      <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2  border-b p-6">
+          <h2 className="text-lg font-medium">Component Properties</h2>
+          <p className="text-sm text-muted-foreground">
+            The properties of the component.
+          </p>
+        </div>
+        <div className="grid grid-cols-[1fr_auto_auto] gap-2 divide-y">
+          {Object.entries(docgen.props).map(([key, value]) => (
+            <div
+              key={key}
+              className="px-6 pb-2 col-span-full grid grid-cols-subgrid"
+            >
+              <span className="font-medium text-primary">{key}</span>
+              <div>
+                {value.required && (
+                  <Badge className="ml-2 font-mono">required</Badge>
+                )}
+              </div>
+              <div>
+                {typeof value.type === "object" && value.type.name && (
+                  <Badge className="ml-2 font-mono" variant="muted">
+                    {value.type.name}
+                  </Badge>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </Card>
+  );
+};