zudoku 0.35.3 → 0.35.5

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-UmhI2mj7.js";
+import { U as n, o as s } from "./index-Dowg8c_k.js";
 export {
   n as UNTAGGED_PATH,
   s as openApiPlugin

package/package.json

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

package/src/app/main.css

@@ -123,6 +123,10 @@
       "calt" 1;
   }
 
+  ::selection {
+    @apply bg-primary/100 text-primary-foreground;
+  }
+
   .dark {
     color-scheme: dark;
   }

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

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

@@ -46,6 +46,7 @@ export const OperationsFragment = graphql(/* GraphQL */ `
       required
       schema
       style
+      explode
       examples {
         name
         description

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 = [...getSchemaInfos(schema), ...extraItems].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,10 +1,11 @@
-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";
+import { SelectOnClick } from "./components/SelectOnClick.js";
 
 const getParameterSchema = (
   parameter: ParameterListItemResult,
@@ -35,27 +36,30 @@ export const ParameterListItem = ({
   return (
     <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"
-              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>}
+        <SelectOnClick asChild>
+          <code>
+            {group === "path" ? (
+              <ColorizedParam
+                name={parameter.name}
+                backgroundOpacity="15%"
+                className="px-2"
+                slug={`${id}-${parameter.name}`}
+              />
+            ) : (
+              parameter.name
+            )}
+          </code>
+        </SelectOnClick>
+        <ParamInfos
+          schema={paramSchema}
+          extraItems={[
+            parameter.required && (
+              <span className="text-primary">required</span>
+            ),
+            parameter.style && `style: ${parameter.style}`,
+            parameter.explode && `explode: ${parameter.explode}`,
+          ]}
+        />
       </div>
       {parameter.description && (
         <Markdown

package/src/lib/plugins/openapi/graphql/gql.ts

@@ -14,7 +14,7 @@ import * as types from "./graphql.js";
  */
 type Documents = {
   "\n  query ServersQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n": typeof types.ServersQueryDocument;
-  "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    deprecated\n    extensions\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n": typeof types.OperationsFragmentFragmentDoc;
+  "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    deprecated\n    extensions\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      explode\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n": typeof types.OperationsFragmentFragmentDoc;
   "\n  query AllOperations(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      servers {\n        url\n      }\n      description\n      summary\n      title\n      url\n      version\n      tags(name: $tag) {\n        name\n        description\n      }\n      operations(tag: $tag, untagged: $untagged) {\n        slug\n        ...OperationsFragment\n      }\n    }\n  }\n": typeof types.AllOperationsDocument;
   "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n": typeof types.GetServerQueryDocument;
   "\n  query GetCategories($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      tags {\n        name\n      }\n    }\n  }\n": typeof types.GetCategoriesDocument;
@@ -23,7 +23,7 @@ type Documents = {
 const documents: Documents = {
   "\n  query ServersQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n":
     types.ServersQueryDocument,
-  "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    deprecated\n    extensions\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n":
+  "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    deprecated\n    extensions\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      explode\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n":
     types.OperationsFragmentFragmentDoc,
   "\n  query AllOperations(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      servers {\n        url\n      }\n      description\n      summary\n      title\n      url\n      version\n      tags(name: $tag) {\n        name\n        description\n      }\n      operations(tag: $tag, untagged: $untagged) {\n        slug\n        ...OperationsFragment\n      }\n    }\n  }\n":
     types.AllOperationsDocument,
@@ -45,7 +45,7 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    deprecated\n    extensions\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n",
+  source: "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    deprecated\n    extensions\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      explode\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n",
 ): typeof import("./graphql.js").OperationsFragmentFragmentDoc;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.

package/src/lib/plugins/openapi/graphql/graphql.ts

@@ -212,6 +212,7 @@ export type OperationsFragmentFragment = {
     required?: boolean | null;
     schema?: any | null;
     style?: string | null;
+    explode?: boolean | null;
     examples?: Array<{
       __typename?: "ExampleItem";
       name: string;
@@ -390,6 +391,7 @@ export const OperationsFragmentFragmentDoc = new TypedDocumentString(
     required
     schema
     style
+    explode
     examples {
       name
       description
@@ -490,6 +492,7 @@ export const AllOperationsDocument = new TypedDocumentString(`
     required
     schema
     style
+    explode
     examples {
       name
       description

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

@@ -1,13 +1,14 @@
 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 { SelectOnClick } from "../components/SelectOnClick.js";
+import { ParamInfos } from "../ParamInfos.js";
 import { LogicalGroup } from "./LogicalGroup/LogicalGroup.js";
 import { SchemaView } from "./SchemaView.js";
 import {
@@ -43,8 +44,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>
 );
@@ -69,11 +70,10 @@ 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} />
             <RecursiveIndicator />
           </div>
         </div>
@@ -83,19 +83,19 @@ export const SchemaPropertyItem = ({
 
   return (
     <li className="p-4 bg-border/20 hover:bg-border/30">
-      <div className="flex flex-col gap-1.5 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>}
+          <SelectOnClick asChild>
+            <code>{name}</code>
+          </SelectOnClick>
+          <ParamInfos
+            schema={schema}
+            extraItems={[
+              group !== "optional" && (
+                <span className="text-primary">required</span>
+              ),
+            ]}
+          />
           {schema.type === "array" &&
             "items" in schema &&
             isCircularRef(schema.items) && <RecursiveIndicator />}
@@ -106,12 +106,6 @@ export const SchemaPropertyItem = ({
             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)) && (
@@ -122,15 +116,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",