zudoku 0.35.2 → 0.35.3

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-UmhI2mj7.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.3",
   "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

@@ -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/ParameterListItem.tsx

@@ -4,6 +4,7 @@ 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 { EnumValues } from "./components/EnumValues.js";
 
 const getParameterSchema = (
   parameter: ParameterListItemResult,
@@ -32,7 +33,7 @@ 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" ? (
@@ -62,6 +63,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

@@ -7,6 +7,7 @@ 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 { LogicalGroup } from "./LogicalGroup/LogicalGroup.js";
 import { SchemaView } from "./SchemaView.js";
 import {
@@ -82,7 +83,7 @@ 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-1.5 justify-between text-sm">
         <div className="flex gap-2 items-center">
           <code>{name}</code>
           <Badge variant="muted">
@@ -99,13 +100,19 @@ export const SchemaPropertyItem = ({
             "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.format && (
+          <div>
+            <span className="text-sm text-muted-foreground">Format: </span>
+            <code>{schema.format}</code>
+          </div>
+        )}
+        {schema.enum && <EnumValues values={schema.enum} />}
 
         {(hasLogicalGroupings(schema) || isComplexType(schema)) && (
           <Collapsible.Root

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";