zudoku 0.0.0-f3d517c → 0.0.0-f40ea27

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

@@ -0,0 +1,87 @@
+import { motion } from "motion/react";
+
+const ball = {
+  width: 5,
+  height: 5,
+  borderRadius: "50%",
+};
+
+const Spinner = () => {
+  return (
+    <motion.div
+      className="flex items-center gap-1"
+      initial="hidden"
+      animate="visible"
+      variants={{
+        visible: {
+          transition: {
+            staggerChildren: 0.2,
+          },
+        },
+      }}
+    >
+      <motion.div
+        className="bg-white/60"
+        variants={{
+          hidden: { opacity: 0, y: 3 },
+          visible: {
+            opacity: 1,
+            y: 0,
+            transition: {
+              y: {
+                type: "spring",
+                stiffness: 300,
+                damping: 10,
+                repeat: Infinity,
+                repeatType: "reverse",
+              },
+            },
+          },
+        }}
+        style={ball}
+      />
+      <motion.div
+        className="bg-white/60"
+        variants={{
+          hidden: { opacity: 0, y: 3 },
+          visible: {
+            opacity: 1,
+            y: 0,
+            transition: {
+              y: {
+                type: "spring",
+                stiffness: 300,
+                damping: 10,
+                repeat: Infinity,
+                repeatType: "reverse",
+              },
+            },
+          },
+        }}
+        style={ball}
+      />
+      <motion.div
+        className="bg-white/60"
+        variants={{
+          hidden: { opacity: 0, y: 3 },
+          visible: {
+            opacity: 1,
+            y: 0,
+            transition: {
+              y: {
+                type: "spring",
+                stiffness: 300,
+                damping: 10,
+                repeat: Infinity,
+                repeatType: "reverse",
+              },
+            },
+          },
+        }}
+        style={ball}
+      />
+    </motion.div>
+  );
+};
+
+export default Spinner;

package/src/lib/plugins/openapi/playground/request-panel/UrlPath.tsx

@@ -0,0 +1,31 @@
+import { useFormContext } from "react-hook-form";
+import { PathRenderer } from "../../../../components/PathRenderer.js";
+import { ColorizedParam } from "../../ColorizedParam.js";
+import { type PlaygroundForm } from "../Playground.js";
+
+export const UrlPath = ({ url }: { url: string }) => {
+  const { watch, setFocus } = useFormContext<PlaygroundForm>();
+  const [pathParams] = watch(["pathParams"]);
+
+  return (
+    <PathRenderer
+      path={url}
+      renderParam={({ name, originalValue, index }) => {
+        const formValue = pathParams.find(
+          (param) => param.name === name,
+        )?.value;
+
+        return (
+          <ColorizedParam
+            name={name}
+            backgroundOpacity="0"
+            slug={name}
+            onClick={() => setFocus(`pathParams.${index}.value`)}
+          >
+            {formValue || originalValue}
+          </ColorizedParam>
+        );
+      }}
+    />
+  );
+};

package/src/lib/plugins/openapi/playground/request-panel/UrlQueryParams.tsx

@@ -0,0 +1,25 @@
+import { Fragment } from "react";
+import { useFormContext } from "react-hook-form";
+import { type PlaygroundForm } from "../Playground.js";
+
+export const UrlQueryParams = () => {
+  const { watch } = useFormContext<PlaygroundForm>();
+  const queryParams = watch("queryParams");
+
+  const urlQueryParams = queryParams
+    .filter((p) => p.active && p.name)
+    .map((p, i, arr) => (
+      <Fragment key={p.name}>
+        {p.name}={encodeURIComponent(p.value).replaceAll("%20", "+")}
+        {i < arr.length - 1 && "&"}
+        <wbr />
+      </Fragment>
+    ));
+
+  return (
+    <>
+      {urlQueryParams.length > 0 ? `?` : ""}
+      {urlQueryParams}
+    </>
+  );
+};

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

@@ -0,0 +1,26 @@
+import { useZudoku } from "../../../../components/context/ZudokuContext.js";
+import { highlight } from "../../../../shiki.js";
+import invariant from "../../../../util/invariant.js";
+
+export const Highlight = ({
+  code,
+  language,
+  children,
+}:
+  | { code?: string; children?: never; language?: string }
+  | { code?: never; children: string; language: string }) => {
+  const { syntaxHighlighting } = useZudoku().options;
+
+  invariant(syntaxHighlighting?.highlighter, "Highlighter not found");
+
+  const highlightedCode = highlight(
+    syntaxHighlighting.highlighter,
+    code ?? children ?? "",
+    language,
+    syntaxHighlighting.themes,
+  );
+
+  return highlightedCode;
+};
+
+Highlight.displayName = "Highlight";

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

@@ -0,0 +1,115 @@
+import { useCallback, useLayoutEffect, useRef } from "react";
+import { humanFileSize } from "../../../../util/humanFileSize.js";
+
+const ResponseCodeCircle = ({ status }: { status?: number }) => {
+  if (!status) return <div className="w-2 h-2 rounded-full bg-gray-500" />;
+
+  switch (Number(status.toString().slice(0, 1))) {
+    case 2:
+      return <div className="w-2 h-2 rounded-full bg-green-500" />;
+    case 4:
+      return <div className="w-2 h-2 rounded-full bg-yellow-400" />;
+    case 5:
+      return <div className="w-2 h-2 rounded-full bg-red-500" />;
+    default:
+      return <div className="w-2 h-2 rounded-full bg-gray-500" />;
+  }
+};
+
+const RealTimeCounter = () => {
+  const spanRef = useRef<HTMLSpanElement>(null);
+  const textRef = useRef<Text | null>(null);
+  const startTimeRef = useRef<number>(Date.now());
+  const animationFrameRef = useRef<number>(null);
+
+  const updateTime = useCallback(() => {
+    if (textRef.current) {
+      const elapsed = Date.now() - startTimeRef.current;
+      textRef.current.nodeValue = elapsed.toFixed();
+    }
+    animationFrameRef.current = requestAnimationFrame(updateTime);
+  }, []);
+
+  useLayoutEffect(() => {
+    // Create a text node and attach it to the span
+    const textNode = document.createTextNode("0");
+    const currentSpanRef = spanRef.current!;
+
+    currentSpanRef.appendChild(textNode);
+    textRef.current = textNode;
+
+    // Start the real-time counter
+    startTimeRef.current = Date.now();
+    animationFrameRef.current = requestAnimationFrame(updateTime);
+
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+      if (textRef.current && currentSpanRef.contains(textNode)) {
+        currentSpanRef.removeChild(textNode);
+      }
+    };
+  }, [updateTime]);
+
+  return <span className="inline-block text-end w-[3ch]" ref={spanRef} />;
+};
+
+export const ResponseStatusBar = ({
+  status,
+  time,
+  size,
+  isFinished,
+  progress,
+}: {
+  status?: number;
+  time?: number;
+  size?: number;
+  isFinished: boolean;
+  progress: number;
+}) => {
+  const statusCodeMap: Record<number, string> = {
+    200: "OK",
+    201: "Created",
+    202: "Accepted",
+    204: "No Content",
+    400: "Bad Request",
+    401: "Unauthorized",
+    403: "Forbidden",
+    404: "Not Found",
+    405: "Method Not Allowed",
+    500: "Internal Server Error",
+  };
+
+  return (
+    <div className="relative flex h-10 text-xs gap-4 px-4 items-center justify-between font-mono border-b">
+      <div className="flex items-center gap-2">
+        <ResponseCodeCircle status={status} /> {status ?? "Sending Request..."}
+        {status ? ` ${statusCodeMap[status]}` : ""}
+      </div>
+      <div className="flex gap-2">
+        <div>
+          <span className="text-muted-foreground">Size</span>{" "}
+          <span className="inline-block text-end min-w-[5ch]">
+            {size ? humanFileSize(size) : "- B"}
+          </span>
+        </div>
+
+        <div>
+          <span className="text-muted-foreground">Time</span>{" "}
+          {time !== undefined ? `${time.toFixed(0)}` : <RealTimeCounter />}
+          ms
+        </div>
+      </div>
+      <div
+        className="h-full bg-neutral-500/10 absolute left-0 -bottom-0 z-10 transition-all duration-200 ease-in-out"
+        style={{
+          opacity: isFinished ? 0 : 1,
+          width: isFinished ? 0 : `${progress * 100}%`,
+        }}
+      />
+    </div>
+  );
+};
+
+export default ResponseStatusBar;

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

@@ -1,8 +1,12 @@
 import { useQuery } from "@tanstack/react-query";
-import { ChevronRightIcon, DownloadIcon } from "lucide-react";
-import { Fragment, useState } from "react";
+import {
+  CornerDownLeftIcon,
+  CornerDownRightIcon,
+  DownloadIcon,
+  PlusCircleIcon,
+} from "lucide-react";
+import { useState } from "react";
 import { Button } from "zudoku/ui/Button.js";
-import { Callout } from "zudoku/ui/Callout.js";
 import {
   Collapsible,
   CollapsibleContent,
@@ -15,23 +19,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from "zudoku/ui/Select.js";
-import { Card } from "../../../../ui/Card.js";
-import { SyntaxHighlight } from "../../../../ui/SyntaxHighlight.js";
+import createVariantComponent from "../../../../util/createVariantComponent.js";
 import { humanFileSize } from "../../../../util/humanFileSize.js";
+import {
+  CollapsibleHeader,
+  CollapsibleHeaderTrigger,
+} from "../CollapsibleHeader.js";
 import { convertToTypes } from "./convertToTypes.js";
-
-const statusCodeMap: Record<number, string> = {
-  200: "OK",
-  201: "Created",
-  202: "Accepted",
-  204: "No Content",
-  400: "Bad Request",
-  401: "Unauthorized",
-  403: "Forbidden",
-  404: "Not Found",
-  405: "Method Not Allowed",
-  500: "Internal Server Error",
-};
+import { Highlight } from "./Highlight.js";
 
 const mimeTypeToLanguage = (mimeType: string) => {
   const mimeTypeMapping = {
@@ -51,7 +46,7 @@ const mimeTypeToLanguage = (mimeType: string) => {
 
 const detectLanguage = (headers: Array<[string, string]>) => {
   const contentType =
-    headers.find(([key, value]) => key === "Content-Type")?.[1] || "";
+    headers.find(([key]) => key.toLowerCase() === "content-type")?.[1] || "";
   return mimeTypeToLanguage(contentType);
 };
 
@@ -86,25 +81,33 @@ const sortHeadersByRelevance = (
   });
 };
 
-const SYNTAX_HIGHLIGHT_MAX_SIZE_THRESHOLD = 64_000;
+const MAX_HEADERS_TO_SHOW = 3;
+
+const Row = createVariantComponent(
+  "div",
+  "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");
 
 export const ResponseTab = ({
   body = "",
   headers,
-  status,
-  time,
+  request,
   size,
-  url,
   isBinary = false,
   fileName,
   blob,
 }: {
   body?: string;
   headers: Array<[string, string]>;
-  status: number;
-  time: number;
+  request: {
+    method: string;
+    url: string;
+    headers: Array<[string, string]>;
+    body?: string;
+  };
   size: number;
-  url: string;
   isBinary?: boolean;
   fileName?: string;
   blob?: Blob;
@@ -138,36 +141,63 @@ export const ResponseTab = ({
   };
 
   const sortedHeaders = sortHeadersByRelevance([...headers]);
-  const shouldDisableHighlighting = size > SYNTAX_HIGHLIGHT_MAX_SIZE_THRESHOLD;
 
   return (
-    <div className="flex flex-col gap-2 h-full overflow-auto max-h-[calc(100vh-220px)] ">
+    <>
+      <Collapsible defaultOpen>
+        <CollapsibleHeaderTrigger>
+          <CornerDownRightIcon size={16} />
+          <CollapsibleHeader className="col-span-2">
+            Header Request
+          </CollapsibleHeader>
+        </CollapsibleHeaderTrigger>
+        <CollapsibleContent>
+          <div className="grid grid-cols-2 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>
+                </Row>
+              ))}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
       <Collapsible defaultOpen>
-        <CollapsibleTrigger className="flex items-center gap-2 hover:text-primary group">
-          <ChevronRightIcon className="h-4 w-4 transition-transform duration-200 group-data-[state=open]:rotate-[90deg]" />
-          <span className="font-semibold">Headers</span>
-        </CollapsibleTrigger>
+        <CollapsibleHeaderTrigger>
+          <CornerDownLeftIcon size={16} />
+          <CollapsibleHeader className="col-span-2">
+            Header Response
+          </CollapsibleHeader>
+        </CollapsibleHeaderTrigger>
         <CollapsibleContent>
-          <div className="grid grid-cols-[auto,1fr] gap-x-8 gap-y-1 ps-1.5 pt-2 font-mono text-xs">
-            {sortedHeaders.slice(0, 5).map(([key, value]) => (
-              <Fragment key={key}>
-                <div className="text-primary whitespace-pre">{key}</div>
-                <div className="break-all">{value}</div>
-              </Fragment>
+          <div className="grid grid-cols-2 gap-x-6 text-sm">
+            {sortedHeaders.slice(0, MAX_HEADERS_TO_SHOW).map(([key, value]) => (
+              <Row key={key}>
+                <RowContent>{key}</RowContent>
+                <RowContent>{value}</RowContent>
+              </Row>
             ))}
-            {sortedHeaders.length > 5 && (
-              <Collapsible className="col-span-full grid-cols-subgrid grid">
-                <CollapsibleTrigger className="col-span-2 text-xs text-muted-foreground hover:text-primary flex items-center gap-1 py-1">
-                  <ChevronRightIcon className="h-3 w-3 transition-transform duration-200 group-data-[state=open]:rotate-[90deg]" />
-                  Show {sortedHeaders.length - 5} more headers
+            {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>
+                  <PlusCircleIcon size={12} className="text-muted-foreground" />
                 </CollapsibleTrigger>
-                <CollapsibleContent className="col-span-full grid grid-cols-subgrid gap-x-8 gap-y-1 ">
-                  {sortedHeaders.slice(5).map(([key, value]) => (
-                    <Fragment key={key}>
-                      <div className="text-primary whitespace-pre">{key}</div>
-                      <div className="break-all">{value}</div>
-                    </Fragment>
-                  ))}
+                <CollapsibleContent className="col-span-full grid grid-cols-subgrid">
+                  {sortedHeaders
+                    .slice(MAX_HEADERS_TO_SHOW)
+                    .map(([key, value]) => (
+                      <Row key={key}>
+                        <RowContent>{key}</RowContent>
+                        <RowContent>{value}</RowContent>
+                      </Row>
+                    ))}
                 </CollapsibleContent>
               </Collapsible>
             )}
@@ -175,7 +205,26 @@ export const ResponseTab = ({
         </CollapsibleContent>
       </Collapsible>
 
-      <Card className="shadow-none">
+      <div className="flex gap-2 justify-between items-center border-b h-10">
+        {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>
+        )}
+      </div>
+      <div>
         {isBinary ? (
           <div className="p-4 text-center">
             <div className="flex flex-col items-center gap-4">
@@ -195,14 +244,8 @@ export const ResponseTab = ({
             </div>
           </div>
         ) : (
-          <>
-            {shouldDisableHighlighting && (
-              <Callout type="info" className="my-0 p-2">
-                Code highlight is disabled for responses larger than{" "}
-                {humanFileSize(SYNTAX_HIGHLIGHT_MAX_SIZE_THRESHOLD)}
-              </Callout>
-            )}
-            <SyntaxHighlight
+          <div className="overflow-auto max-w-full p-4 text-xs max-h-[calc(83.333vh-180px)]">
+            <Highlight
               language={
                 view === "types"
                   ? "typescript"
@@ -212,10 +255,6 @@ export const ResponseTab = ({
                       : detectedLanguage
                     : "json"
               }
-              showCopy="always"
-              disabled={shouldDisableHighlighting}
-              noBackground
-              className="overflow-x-auto p-4 text-xs max-h-[calc(83.333vh-180px)]"
               code={
                 (view === "raw"
                   ? body
@@ -224,42 +263,9 @@ export const ResponseTab = ({
                     : beautifiedBody) ?? ""
               }
             />
-          </>
-        )}
-      </Card>
-      <div className="flex gap-2 justify-between items-center">
-        <div className="flex text-xs gap-5 border bg-muted rounded-md p-2 items-center h-8 font-mono">
-          <div>
-            <span className="text-muted-foreground">Status</span> {status}{" "}
-            {statusCodeMap[status] ?? ""}
-          </div>
-          <div>
-            <span className="text-muted-foreground">Time</span>{" "}
-            {time.toFixed(0)}ms
-          </div>
-          <div>
-            <span className="text-muted-foreground">Size</span>{" "}
-            {humanFileSize(size)}
-          </div>
-        </div>
-        {jsonContent && !isBinary && (
-          <div>
-            <Select
-              value={view}
-              onValueChange={(value) => setView(value as "formatted" | "raw")}
-            >
-              <SelectTrigger className="min-w-32">
-                <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>
+    </>
   );
 };