zudoku 0.35.2 → 0.35.4

package/lib/zudoku.plugin-api-catalog.js

@@ -5,7 +5,7 @@ import { j as d } from "./joinUrl-10po2Jdj.js";
 import { u as j, b as y } from "./hook-CfCFKZ-2.js";
 import { H as v } from "./index.esm-CltAN0Tf.js";
 import { Link as N } from "./zudoku.components.js";
-import { H as S, M as w } from "./Markdown-D1Y3cd9l.js";
+import { H as S, M as w } from "./Markdown-hBN9vkm5.js";
 const H = ({
   items: s,
   filterCatalogItems: l = (n) => n,

package/lib/zudoku.plugin-api-keys.js

@@ -1,6 +1,6 @@
 import { j as e } from "./jsx-runtime-CYK1ROHF.js";
 import { RotateCwIcon as j, TrashIcon as v, EyeOffIcon as w, EyeIcon as K, CheckIcon as b, CopyIcon as k, FileKey2Icon as N } from "lucide-react";
-import { D as I, S as x, R as S } from "./SlotletProvider-iDmNlxD5.js";
+import { D as I, S as x, R as S } from "./SlotletProvider-D-XPr1Wg.js";
 import { i as c } from "./invariant-Caa8-XvF.js";
 import { u as h } from "./useQuery-CQUwWR9i.js";
 import { u as d, S as A, a as C, b as E, c as P, d as D, e as p } from "./Select-FAYHOYTy.js";

package/lib/zudoku.plugin-custom-pages.js

@@ -1,6 +1,6 @@
 import { j as o } from "./jsx-runtime-CYK1ROHF.js";
 import a from "react";
-import { P as n } from "./Markdown-D1Y3cd9l.js";
+import { P as n } from "./Markdown-hBN9vkm5.js";
 import { c } from "./cn-qaFjX9_3.js";
 import { u as p } from "./useExposedProps-BslIn-FE.js";
 const u = ({

package/lib/zudoku.plugin-markdown.js

@@ -53,7 +53,7 @@ const P = (e) => ({
         const u = {
           path: r,
           lazy: async () => {
-            const { MdxPage: p } = await import("./MdxPage-CUL_SQzW.js"), { default: f, ...l } = await i();
+            const { MdxPage: p } = await import("./MdxPage-UCWwxhzC.js"), { default: f, ...l } = await i();
             return {
               element: /* @__PURE__ */ d.jsx(
                 p,

package/lib/zudoku.plugin-openapi.js

@@ -5,7 +5,7 @@ import "./chunk-HA7DTUK3-ZGg2W6yV.js";
 import "./hook-CfCFKZ-2.js";
 import "./ui/Button.js";
 import "./joinUrl-10po2Jdj.js";
-import { U as n, o as s } from "./index-C7TIhpXK.js";
+import { U as n, o as s } from "./index-BVhQWA89.js";
 export {
   n as UNTAGGED_PATH,
   s as openApiPlugin

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.35.2",
+  "version": "0.35.4",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {

package/src/lib/components/InlineCode.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { SelectOnClick } from "../plugins/openapi/components/SelectOnClick.js";
 import { cn } from "../util/cn.js";
 
 export const InlineCode = ({
@@ -10,20 +11,14 @@ export const InlineCode = ({
   children: ReactNode;
   selectOnClick?: boolean;
 }) => (
-  <code
-    onClick={(e) => {
-      if (!selectOnClick) return;
-      const selection = window.getSelection();
-      const range = document.createRange();
-      range.selectNodeContents(e.currentTarget);
-      selection?.removeAllRanges();
-      selection?.addRange(range);
-    }}
-    className={cn(
-      "font-mono border p-1 py-0.5 rounded bg-border/50 dark:bg-border/70 [overflow-wrap:anywhere]",
-      className,
-    )}
-  >
-    {children}
-  </code>
+  <SelectOnClick asChild enabled={selectOnClick}>
+    <code
+      className={cn(
+        "font-mono border p-1 py-0.5 rounded bg-border/50 dark:bg-border/70 [overflow-wrap:anywhere]",
+        className,
+      )}
+    >
+      {children}
+    </code>
+  </SelectOnClick>
 );

package/src/lib/components/Layout.tsx

@@ -12,7 +12,7 @@ import { Slotlet } from "./SlotletProvider.js";
 import { Spinner } from "./Spinner.js";
 
 const LoadingFallback = () => (
-  <main className="col-span-full grid place-items-center">
+  <main className="col-span-full row-span-full grid place-items-center">
     <Spinner />
   </main>
 );
@@ -62,7 +62,7 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
       <Header />
       <Slotlet name="layout-after-head" />
 
-      <div className="grid lg:grid-cols-[var(--side-nav-width)_1fr] max-w-screen-2xl w-full lg:mx-auto px-4 lg:px-8 2xl:border-x">
+      <div className="grid grid-cols-1 grid-rows-[min-content_1fr] lg:grid-cols-[var(--side-nav-width)_1fr] max-w-screen-2xl w-full lg:mx-auto px-4 lg:px-8 2xl:border-x">
         {showSpinner ? (
           <LoadingFallback />
         ) : (

package/src/lib/errors/ErrorAlert.tsx

@@ -1,5 +1,9 @@
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
+import { SyntaxHighlight } from "zudoku/ui/SyntaxHighlight.js";
 import { DeveloperHint } from "../components/DeveloperHint.js";
+import { Heading } from "../components/Heading.js";
+import { ProseClasses } from "../components/Markdown.js";
+import { cn } from "../util/cn.js";
 import { ZudokuError } from "../util/invariant.js";
 
 export function ErrorAlert({ error }: { error: unknown }) {
@@ -12,24 +16,27 @@ export function ErrorAlert({ error }: { error: unknown }) {
   const stack = error instanceof Error ? error.stack : undefined;
   const cause = error instanceof Error ? error.cause : undefined;
 
+  const stringError = cause instanceof Error ? String(cause.stack) : stack;
+
   return (
-    <div className="flex h-screen max-h-[calc(100vh-var(--header-height))] min-h-full items-center justify-center bg-primary-background px-4 py-16 lg:px-8">
-      <div className="mx-auto max-w-[85%] sm:max-w-[50%]">
-        <h1 className="text-4xl font-bold tracking-tight text-h1-text sm:text-5xl">
-          {title}
-        </h1>
-        <p className="mt-5 text-h1-text">{message}</p>
-        {hint && <DeveloperHint className="mb-4">{hint}</DeveloperHint>}
-        {cause instanceof Error ? (
-          <pre className="mt-5 max-h-[400px] w-full overflow-scroll rounded-md border border-input-border bg-input-background p-3 text-property-name-text text-red-700">
-            {cause.stack}
-          </pre>
-        ) : stack ? (
-          <pre className="mt-5 max-h-[400px] w-full overflow-scroll rounded-md border border-input-border bg-input-background p-3 text-property-name-text text-red-700">
-            {stack}
-          </pre>
-        ) : null}
-      </div>
+    <div
+      className={cn(
+        ProseClasses,
+        "grid grid-cols-1 !max-w-none pt-[--padding-content-top]",
+      )}
+    >
+      <Heading level={1}>{title}</Heading>
+      Error: {message}
+      {hint && <DeveloperHint className="mb-4">{hint}</DeveloperHint>}
+      {stringError && (
+        <div>
+          <SyntaxHighlight
+            className="max-h-[400px] border mt-2"
+            language="jsstacktrace"
+            code={stringError}
+          />
+        </div>
+      )}
     </div>
   );
 }

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

@@ -1,5 +1,5 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
-import { useRef, useState } from "react";
+import { useState } from "react";
 import { Badge } from "zudoku/ui/Badge.js";
 import { Heading } from "../../components/Heading.js";
 import { Markdown, ProseClasses } from "../../components/Markdown.js";
@@ -10,6 +10,7 @@ import { renderIf } from "../../util/renderIf.js";
 import { OperationsFragment } from "./OperationList.js";
 import { ParameterList } from "./ParameterList.js";
 import { Sidecar } from "./Sidecar.js";
+import { SelectOnClick } from "./components/SelectOnClick.js";
 import { type FragmentType, useFragment } from "./graphql/index.js";
 import { SchemaView } from "./schema/SchemaView.js";
 import { methodForColor } from "./util/methodToColor.js";
@@ -29,7 +30,6 @@ export const OperationListItem = ({
     operation.parameters ?? [],
     (param) => param.in,
   );
-  const parentRef = useRef<HTMLDivElement>(null);
 
   const first = operation.responses.at(0);
   const [selectedResponse, setSelectedResponse] = useState(first?.statusCode);
@@ -60,19 +60,7 @@ export const OperationListItem = ({
           <span className={methodForColor(operation.method)}>
             {operation.method.toUpperCase()}
           </span>
-          <div
-            ref={parentRef}
-            className="max-w-full truncate flex cursor-pointer"
-            onClick={() => {
-              if (parentRef.current) {
-                const range = document.createRange();
-                range.selectNodeContents(parentRef.current);
-                const selection = window.getSelection();
-                selection?.removeAllRanges();
-                selection?.addRange(range);
-              }
-            }}
-          >
+          <SelectOnClick className="max-w-full truncate flex cursor-pointer">
             {serverUrl && (
               <div className="text-neutral-400 dark:text-neutral-500 truncate">
                 {serverUrl}
@@ -81,7 +69,7 @@ export const OperationListItem = ({
             <div className="text-neutral-900 dark:text-neutral-200">
               {operation.path}
             </div>
-          </div>
+          </SelectOnClick>
         </div>
 
         <div className="flex flex-col gap-4">

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

@@ -0,0 +1,64 @@
+import { isValidElement } from "react";
+import { InlineCode } from "../../components/InlineCode.js";
+import { type SchemaObject } from "../../oas/parser/index.js";
+
+const getSchemaInfos = (schema?: SchemaObject) => {
+  if (!schema) return [];
+
+  return [
+    schema.type === "array" && schema.items.type
+      ? `${schema.items.type}[]`
+      : Array.isArray(schema.type)
+        ? schema.type.join(" | ")
+        : schema.type,
+
+    schema.enum && "enum",
+    schema.format,
+    schema.minimum && `min: ${schema.minimum}`,
+    schema.maximum && `max: ${schema.maximum}`,
+    schema.minLength && `minLength: ${schema.minLength}`,
+    schema.maxLength && `maxLength: ${schema.maxLength}`,
+    schema.minItems && `minItems: ${schema.minItems}`,
+    schema.maxItems && `maxItems: ${schema.maxItems}`,
+    schema.uniqueItems && "unique",
+    schema.minProperties && `minProps: ${schema.minProperties}`,
+    schema.maxProperties && `maxProps: ${schema.maxProperties}`,
+    schema.readOnly && "readOnly",
+    schema.writeOnly && "writeOnly",
+    schema.deprecated && "deprecated",
+    schema.pattern && (
+      <>
+        pattern: <InlineCode className="text-xs">{schema.pattern}</InlineCode>
+      </>
+    ),
+  ];
+};
+
+export const ParamInfos = ({
+  schema,
+  extraItems = [],
+  className,
+}: {
+  schema?: SchemaObject;
+  extraItems?: unknown[];
+  className?: string;
+}) => {
+  const filteredItems = [...extraItems, ...getSchemaInfos(schema)].flatMap(
+    (item) => (typeof item === "string" || isValidElement(item) ? item : []),
+  );
+
+  return (
+    <div className={className}>
+      {filteredItems.map((item, index) => (
+        <span className="text-muted-foreground" key={index}>
+          {item}
+          {index < filteredItems.length - 1 && (
+            <span className="text-muted-foreground/50">
+              &nbsp;&middot;&nbsp;
+            </span>
+          )}
+        </span>
+      ))}
+    </div>
+  );
+};

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

@@ -1,9 +1,10 @@
-import { Badge } from "zudoku/ui/Badge.js";
 import { Markdown } from "../../components/Markdown.js";
 import { type SchemaObject } from "../../oas/graphql/index.js";
 import { ColorizedParam } from "./ColorizedParam.js";
 import type { OperationListItemResult } from "./OperationList.js";
 import type { ParameterGroup } from "./OperationListItem.js";
+import { ParamInfos } from "./ParamInfos.js";
+import { EnumValues } from "./components/EnumValues.js";
 
 const getParameterSchema = (
   parameter: ParameterListItemResult,
@@ -32,29 +33,27 @@ export const ParameterListItem = ({
   const paramSchema = getParameterSchema(parameter);
 
   return (
-    <li className="p-4 bg-border/20 text-sm flex flex-col gap-1">
+    <li className="p-4 bg-border/20 text-sm flex flex-col gap-1.5">
       <div className="flex items-center gap-2">
         <code>
           {group === "path" ? (
             <ColorizedParam
               name={parameter.name}
               backgroundOpacity="15%"
-              className="px-1"
+              className="px-2"
               slug={`${id}-${parameter.name}`}
             />
           ) : (
             parameter.name
           )}
         </code>
-        {paramSchema.type && (
-          <Badge variant="muted">
-            {paramSchema.type === "array"
-              ? `${paramSchema.items.type}[]`
-              : paramSchema.type}
-          </Badge>
-        )}
-        {parameter.required && <Badge variant="outline">required</Badge>}
-        {parameter.style === "form" && <Badge variant="secondary">form</Badge>}
+        <ParamInfos
+          schema={paramSchema}
+          extraItems={[
+            parameter.required && "required",
+            parameter.style === "form" && "form",
+          ]}
+        />
       </div>
       {parameter.description && (
         <Markdown
@@ -62,6 +61,7 @@ export const ParameterListItem = ({
           className="text-sm prose-p:my-1 prose-code:whitespace-pre-line"
         />
       )}
+      {paramSchema.enum && <EnumValues values={paramSchema.enum} />}
     </li>
   );
 };

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

@@ -0,0 +1,58 @@
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { useState } from "react";
+import { Button } from "zudoku/ui/Button.js";
+import { cn } from "../../../util/cn.js";
+import { SelectOnClick } from "./SelectOnClick.js";
+
+export const EnumValues = ({
+  values,
+  className,
+  maxVisibleValues = 8,
+}: {
+  values: Array<string | number>;
+  className?: string;
+  maxVisibleValues?: number;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  if (!values.length) return null;
+
+  const shouldCollapse = values.length > maxVisibleValues;
+  const visibleValues =
+    shouldCollapse && !isOpen ? values.slice(0, maxVisibleValues) : values;
+
+  return (
+    <div className={cn("flex flex-wrap gap-1.5 text-xs", className)}>
+      <span className="text-muted-foreground">Enum values: </span>
+      {visibleValues.map((value) => (
+        <div key={value}>
+          <SelectOnClick className="border rounded px-1 font-mono cursor-pointer">
+            {value}
+          </SelectOnClick>
+        </div>
+      ))}
+      {shouldCollapse && (
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-fit px-0"
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          {isOpen ? (
+            <div className="flex items-center gap-1">
+              <ChevronUpIcon size={12} />
+              <span className="text-muted-foreground">show less</span>
+            </div>
+          ) : (
+            <div className="flex items-center gap-1">
+              <ChevronDownIcon size={12} />
+              <span className="text-muted-foreground">
+                show {values.length - maxVisibleValues} more
+              </span>
+            </div>
+          )}
+        </Button>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,29 @@
+import { Slot, type SlotProps } from "@radix-ui/react-slot";
+
+export const SelectOnClick = ({
+  asChild,
+  onClick,
+  enabled = true,
+  ...props
+}: {
+  asChild?: boolean;
+  enabled?: boolean;
+} & SlotProps) => {
+  const Component = asChild ? Slot : "span";
+
+  return (
+    <Component
+      onClick={(e) => {
+        if (enabled) {
+          const range = document.createRange();
+          range.selectNodeContents(e.currentTarget);
+          const selection = window.getSelection();
+          selection?.removeAllRanges();
+          selection?.addRange(range);
+        }
+        onClick?.(e);
+      }}
+      {...props}
+    />
+  );
+};

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

@@ -1,12 +1,13 @@
 import * as Collapsible from "@radix-ui/react-collapsible";
-import { ListPlusIcon, RefreshCcwDotIcon } from "lucide-react";
+import { MinusIcon, PlusIcon, RefreshCcwDotIcon } from "lucide-react";
 import { useCallback, useState } from "react";
-import { Badge } from "zudoku/ui/Badge.js";
 import { Markdown, ProseClasses } 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 { EnumValues } from "../components/EnumValues.js";
+import { ParamInfos } from "../ParamInfos.js";
 import { LogicalGroup } from "./LogicalGroup/LogicalGroup.js";
 import { SchemaView } from "./SchemaView.js";
 import {
@@ -42,8 +43,8 @@ export const SchemaLogicalGroup = ({
 };
 
 const RecursiveIndicator = () => (
-  <div className="flex items-center gap-2 italic text-sm text-muted-foreground font-mono bg-muted px-2 py-0.5 rounded-md">
-    <RefreshCcwDotIcon size={16} />
+  <div className="flex items-center gap-1.5 italic text-xs text-muted-foreground font-mono bg-muted px-2 py-0.5 rounded-md">
+    <RefreshCcwDotIcon size={13} />
     <span>circular</span>
   </div>
 );
@@ -68,11 +69,13 @@ export const SchemaPropertyItem = ({
   if (isCircularRef(schema)) {
     return (
       <li className="p-4 bg-border/20 hover:bg-border/30">
-        <div className="flex flex-col gap-1 justify-between text-sm">
+        <div className="flex flex-col gap-2.5 justify-between text-sm">
           <div className="flex gap-2 items-center">
             <code>{name}</code>
-            <Badge variant="muted">object</Badge>
-            {group === "optional" && <Badge variant="outline">optional</Badge>}
+            <ParamInfos
+              schema={schema}
+              extraItems={[group === "optional" && "optional"]}
+            />
             <RecursiveIndicator />
           </div>
         </div>
@@ -82,30 +85,24 @@ export const SchemaPropertyItem = ({
 
   return (
     <li className="p-4 bg-border/20 hover:bg-border/30">
-      <div className="flex flex-col gap-1 justify-between text-sm">
+      <div className="flex flex-col gap-2.5 justify-between text-sm">
         <div className="flex gap-2 items-center">
           <code>{name}</code>
-          <Badge variant="muted">
-            {schema.type === "array" && schema.items.type ? (
-              <span>{schema.items.type}[]</span>
-            ) : Array.isArray(schema.type) ? (
-              <span>{schema.type.join(" | ")}</span>
-            ) : (
-              <span>{schema.type}</span>
-            )}
-          </Badge>
-          {group === "optional" && <Badge variant="outline">optional</Badge>}
+          <ParamInfos
+            schema={schema}
+            extraItems={[group === "optional" && "optional"]}
+          />
           {schema.type === "array" &&
             "items" in schema &&
             isCircularRef(schema.items) && <RecursiveIndicator />}
         </div>
-
         {schema.description && (
           <Markdown
             className={cn(ProseClasses, "text-sm leading-normal line-clamp-4")}
             content={schema.description}
           />
         )}
+        {schema.enum && <EnumValues values={schema.enum} />}
 
         {(hasLogicalGroupings(schema) || isComplexType(schema)) && (
           <Collapsible.Root
@@ -115,15 +112,9 @@ export const SchemaPropertyItem = ({
           >
             {showCollapseButton && (
               <Collapsible.Trigger asChild>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="mt-2 flex gap-1.5"
-                >
-                  <ListPlusIcon size={18} />
-                  {!isOpen
-                    ? "Show nested properties"
-                    : "Hide nested properties"}
+                <Button variant="expand" size="sm" className="h-7">
+                  {isOpen ? <MinusIcon size={12} /> : <PlusIcon size={12} />}
+                  {!isOpen ? "Show properties" : "Hide properties"}
                 </Button>
               </Collapsible.Trigger>
             )}

package/src/lib/ui/Button.tsx

@@ -1,5 +1,5 @@
 import { Slot } from "@radix-ui/react-slot";
-import { cva, VariantProps } from "class-variance-authority";
+import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 import { cn } from "../util/cn.js";
 
@@ -18,6 +18,8 @@ export const buttonVariants = cva(
           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
+        expand:
+          "flex gap-1.5 border bg-transparent rounded-xl text-muted-foreground hover:text-foreground",
       },
       size: {
         default: "h-9 px-4 py-2",

package/src/lib/ui/SyntaxHighlight.tsx

@@ -28,6 +28,8 @@ void import("prismjs/components/prism-markdown.min.js");
 void import("prismjs/components/prism-javascript.min.js");
 // @ts-expect-error This is untyped
 void import("prismjs/components/prism-typescript.min.js");
+// @ts-expect-error This is untyped
+void import("prismjs/components/prism-jsstacktrace.min.js");
 
 import { useTheme } from "next-themes";
 import { memo, useState } from "react";