zudoku 0.52.1 → 0.52.2

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

@@ -19,6 +19,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "zudoku/ui/Select.js";
+import createVariantComponent from "../../../../util/createVariantComponent.js";
 import { humanFileSize } from "../../../../util/humanFileSize.js";
 import {
   CollapsibleHeader,
@@ -82,6 +83,13 @@ const sortHeadersByRelevance = (
 
 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,
@@ -134,14 +142,11 @@ export const ResponseTab = ({
 
   const sortedHeaders = sortHeadersByRelevance([...headers]);
 
-  const headerStyle =
-    "grid-cols-subgrid grid border-b col-span-full px-4 py-1.5 font-mono text-xs";
-
   return (
     <>
       <Collapsible defaultOpen>
         <CollapsibleHeaderTrigger>
-          <CornerDownLeftIcon size={16} />
+          <CornerDownRightIcon size={16} />
           <CollapsibleHeader className="col-span-2">
             Header Request
           </CollapsibleHeader>
@@ -151,10 +156,10 @@ export const ResponseTab = ({
             {request.headers
               .slice(0, MAX_HEADERS_TO_SHOW)
               .map(([key, value]) => (
-                <div key={key} className={headerStyle}>
-                  <div className="">{key}</div>
-                  <div className="break-all">{value}</div>
-                </div>
+                <Row key={key}>
+                  <RowContent>{key}</RowContent>
+                  <RowContent>{value}</RowContent>
+                </Row>
               ))}
           </div>
         </CollapsibleContent>
@@ -162,7 +167,7 @@ export const ResponseTab = ({
 
       <Collapsible defaultOpen>
         <CollapsibleHeaderTrigger>
-          <CornerDownRightIcon size={16} />
+          <CornerDownLeftIcon size={16} />
           <CollapsibleHeader className="col-span-2">
             Header Response
           </CollapsibleHeader>
@@ -170,10 +175,10 @@ export const ResponseTab = ({
         <CollapsibleContent>
           <div className="grid grid-cols-2 gap-x-6 text-sm">
             {sortedHeaders.slice(0, MAX_HEADERS_TO_SHOW).map(([key, value]) => (
-              <div key={key} className={headerStyle}>
-                <div className="">{key}</div>
-                <div className="break-all line-clamp-1">{value}</div>
-              </div>
+              <Row key={key}>
+                <RowContent>{key}</RowContent>
+                <RowContent>{value}</RowContent>
+              </Row>
             ))}
             {sortedHeaders.length > MAX_HEADERS_TO_SHOW && (
               <Collapsible className="col-span-full grid-cols-subgrid grid group">
@@ -188,10 +193,10 @@ export const ResponseTab = ({
                   {sortedHeaders
                     .slice(MAX_HEADERS_TO_SHOW)
                     .map(([key, value]) => (
-                      <div key={key} className={headerStyle}>
-                        <div className="">{key}</div>
-                        <div className="break-all ">{value}</div>
-                      </div>
+                      <Row key={key}>
+                        <RowContent>{key}</RowContent>
+                        <RowContent>{value}</RowContent>
+                      </Row>
                     ))}
                 </CollapsibleContent>
               </Collapsible>

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

@@ -13,11 +13,15 @@ export const ResultPanel = ({
   showLongRunningWarning,
   onCancel,
   tip,
+  isFinished,
+  progress,
 }: {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   queryMutation: UseMutationResult<PlaygroundResult, Error, any>;
   showLongRunningWarning?: boolean;
   onCancel?: () => void;
+  isFinished: boolean;
+  progress: number;
   tip?: React.ReactNode;
 }) => {
   return (
@@ -27,6 +31,8 @@ export const ResultPanel = ({
           status={queryMutation.data?.status}
           time={queryMutation.data?.time}
           size={queryMutation.data?.size}
+          isFinished={isFinished}
+          progress={progress}
         />
       )}
       {queryMutation.error ? (

package/src/lib/ui/Dialog.tsx

@@ -45,8 +45,8 @@ const DialogContent = React.forwardRef<
     >
       {children}
       {showCloseButton && (
-        <DialogPrimitive.Close className="absolute -right-2 -top-2 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-          <XIcon className="h-4 w-4" />
+        <DialogPrimitive.Close className="absolute left-1 top-1 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+          <XIcon className="h-3 w-3" strokeWidth={2} />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>
       )}

package/lib/Dialog-DGlrUTCS.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Dialog-DGlrUTCS.js","sources":["../src/lib/ui/Dialog.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\n\nimport { XIcon } from \"lucide-react\";\nimport { cn } from \"../util/cn.js\";\n\nconst Dialog = DialogPrimitive.Root;\n\nconst DialogTrigger = DialogPrimitive.Trigger;\n\nconst DialogPortal = DialogPrimitive.Portal;\n\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className,\n    )}\n    {...props}\n  />\n));\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n    showCloseButton?: boolean;\n  }\n>(({ className, children, showCloseButton = true, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close className=\"absolute -right-2 -top-2 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\">\n          <XIcon className=\"h-4 w-4\" />\n          <span className=\"sr-only\">Close</span>\n        </DialogPrimitive.Close>\n      )}\n    </DialogPrimitive.Content>\n  </DialogPortal>\n));\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nconst DialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-1.5 text-center sm:text-left\",\n      className,\n    )}\n    {...props}\n  />\n);\nDialogHeader.displayName = \"DialogHeader\";\n\nconst DialogFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className,\n    )}\n    {...props}\n  />\n);\nDialogFooter.displayName = \"DialogFooter\";\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\n      \"text-lg font-semibold leading-none tracking-tight\",\n      className,\n    )}\n    {...props}\n  />\n));\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n));\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n"],"names":["Dialog","DialogPrimitive","DialogTrigger","DialogPortal","DialogClose","DialogOverlay","React","className","props","ref","jsx","cn","DialogContent","children","showCloseButton","jsxs","XIcon","DialogHeader","DialogFooter","DialogTitle","DialogDescription"],"mappings":";;;;;AAMA,MAAMA,IAASC,EAAgB,MAEzBC,IAAgBD,EAAgB,SAEhCE,IAAeF,EAAgB,QAE/BG,IAAcH,EAAgB,OAE9BI,IAAgBC,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1BC,gBAAAA,EAAA;AAAA,EAACT,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAQ;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAc,cAAcJ,EAAgB,QAAQ;AAEpD,MAAMW,IAAgBN,EAAM,WAK1B,CAAC,EAAE,WAAAC,GAAW,UAAAM,GAAU,iBAAAC,IAAkB,IAAM,GAAGN,EAAS,GAAAC,6BAC3DN,GACC,EAAA,UAAA;AAAA,EAAAO,gBAAAA,EAAA,IAACL,GAAc,EAAA;AAAA,EACfU,gBAAAA,EAAA;AAAA,IAACd,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAAQ;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAJ;AAAA,MACF;AAAA,MACC,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAK;AAAA,QACAC,KACEC,gBAAAA,EAAA,KAAAd,EAAgB,OAAhB,EAAsB,WAAU,qRAC/B,UAAA;AAAA,UAACS,gBAAAA,EAAAA,IAAAM,GAAA,EAAM,WAAU,UAAU,CAAA;AAAA,UAC1BN,gBAAAA,EAAA,IAAA,QAAA,EAAK,WAAU,WAAU,UAAK,QAAA,CAAA;AAAA,QAAA,EACjC,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAEJ,GACF,CACD;AACDE,EAAc,cAAcX,EAAgB,QAAQ;AAEpD,MAAMgB,IAAe,CAAC;AAAA,EACpB,WAAAV;AAAA,EACA,GAAGC;AACL,MACEE,gBAAAA,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAJ;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,EAAA;AACN;AAEFS,EAAa,cAAc;AAE3B,MAAMC,IAAe,CAAC;AAAA,EACpB,WAAAX;AAAA,EACA,GAAGC;AACL,MACEE,gBAAAA,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAJ;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,EAAA;AACN;AAEFU,EAAa,cAAc;AAErB,MAAAC,IAAcb,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1BC,gBAAAA,EAAA;AAAA,EAACT,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAQ;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,EAAA;AACN,CACD;AACDW,EAAY,cAAclB,EAAgB,MAAM;AAE1C,MAAAmB,IAAoBd,EAAM,WAG9B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1BC,gBAAAA,EAAA;AAAA,EAACT,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAQ;AAAA,IACA,WAAWE,EAAG,iCAAiCJ,CAAS;AAAA,IACvD,GAAGC;AAAA,EAAA;AACN,CACD;AACDY,EAAkB,cAAcnB,EAAgB,YAAY;"}