zudoku 0.52.0 → 0.52.2

package/lib/ui/Command.js

@@ -2,7 +2,7 @@ import { j as o } from "../jsx-runtime-C5mzlN2N.js";
 import { _ as t } from "../index-CrcNWbel.js";
 import { Search as i } from "lucide-react";
 import * as s from "react";
-import { D as p, a as l } from "../Dialog-DGlrUTCS.js";
+import { D as p, a as l } from "../Dialog-CiIdyz6a.js";
 import { c as r } from "../cn-wvCW-ho6.js";
 const m = s.forwardRef(({ className: a, ...e }, d) => /* @__PURE__ */ o.jsx(
   t,

package/lib/ui/Dialog.js

@@ -1,91 +1,91 @@
 import { j as o } from "../jsx-runtime-C5mzlN2N.js";
-import * as a from "@radix-ui/react-dialog";
+import * as e from "@radix-ui/react-dialog";
 import * as l from "react";
 import { XIcon as c } from "lucide-react";
 import { c as i } from "../cn-wvCW-ho6.js";
-const j = a.Root, b = a.Trigger, m = a.Portal, h = a.Close, n = l.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ o.jsx(
-  a.Overlay,
+const j = e.Root, b = e.Trigger, m = e.Portal, h = e.Close, n = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o.jsx(
+  e.Overlay,
   {
     ref: s,
     className: i(
       "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",
-      e
+      a
     ),
     ...t
   }
 ));
-n.displayName = a.Overlay.displayName;
-const f = l.forwardRef(({ className: e, children: t, showCloseButton: s = !0, ...d }, r) => /* @__PURE__ */ o.jsxs(m, { children: [
+n.displayName = e.Overlay.displayName;
+const f = l.forwardRef(({ className: a, children: t, showCloseButton: s = !0, ...d }, r) => /* @__PURE__ */ o.jsxs(m, { children: [
   /* @__PURE__ */ o.jsx(n, {}),
   /* @__PURE__ */ o.jsxs(
-    a.Content,
+    e.Content,
     {
       ref: r,
       className: i(
         "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",
-        e
+        a
       ),
       ...d,
       children: [
         t,
-        s && /* @__PURE__ */ o.jsxs(a.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", children: [
-          /* @__PURE__ */ o.jsx(c, { className: "h-4 w-4" }),
+        s && /* @__PURE__ */ o.jsxs(e.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", children: [
+          /* @__PURE__ */ o.jsx(c, { className: "h-3 w-3", strokeWidth: 2 }),
           /* @__PURE__ */ o.jsx("span", { className: "sr-only", children: "Close" })
         ] })
       ]
     }
   )
 ] }));
-f.displayName = a.Content.displayName;
+f.displayName = e.Content.displayName;
 const p = ({
-  className: e,
+  className: a,
   ...t
 }) => /* @__PURE__ */ o.jsx(
   "div",
   {
     className: i(
       "flex flex-col space-y-1.5 text-center sm:text-left",
-      e
+      a
     ),
     ...t
   }
 );
 p.displayName = "DialogHeader";
 const g = ({
-  className: e,
+  className: a,
   ...t
 }) => /* @__PURE__ */ o.jsx(
   "div",
   {
     className: i(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      e
+      a
     ),
     ...t
   }
 );
 g.displayName = "DialogFooter";
-const x = l.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ o.jsx(
-  a.Title,
+const x = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o.jsx(
+  e.Title,
   {
     ref: s,
     className: i(
       "text-lg font-semibold leading-none tracking-tight",
-      e
+      a
     ),
     ...t
   }
 ));
-x.displayName = a.Title.displayName;
-const u = l.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ o.jsx(
-  a.Description,
+x.displayName = e.Title.displayName;
+const u = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o.jsx(
+  e.Description,
   {
     ref: s,
-    className: i("text-sm text-muted-foreground", e),
+    className: i("text-sm text-muted-foreground", a),
     ...t
   }
 ));
-u.displayName = a.Description.displayName;
+u.displayName = e.Description.displayName;
 export {
   j as Dialog,
   h as DialogClose,

package/lib/ui/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.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;"}
+{"version":3,"file":"Dialog.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 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\">\n          <XIcon className=\"h-3 w-3\" strokeWidth={2} />\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,kRAC/B,UAAA;AAAA,UAAAS,gBAAAA,EAAA,IAACM,GAAM,EAAA,WAAU,WAAU,aAAa,GAAG;AAAA,UAC1CN,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;"}

package/lib/ui/EmbeddedCodeBlock.js

@@ -16,7 +16,7 @@ const j = ({
     "div",
     {
       className: t(
-        "code-block-wrapper relative group bg-muted/50 rounded-md",
+        "code-block-wrapper relative group bg-muted/50",
         c && "line-numbers"
       ),
       children: [

package/lib/ui/EmbeddedCodeBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmbeddedCodeBlock.js","sources":["../../src/lib/ui/EmbeddedCodeBlock.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { useRef, useState } from \"react\";\nimport { cn } from \"../util/cn.js\";\n\nexport type CodeBlockProps = {\n  className?: string;\n  noBackground?: boolean;\n  wrapLines?: boolean;\n  showLanguageIndicator?: boolean;\n  language?: string;\n  children?: ReactNode;\n  code?: ReactNode;\n  showCopy?: \"hover\" | \"always\" | \"never\";\n  showCopyText?: boolean;\n  disabled?: boolean;\n  showLineNumbers?: boolean;\n};\n\nexport const EmbeddedCodeBlock = ({\n  children,\n  language,\n  showCopy = \"hover\",\n  showCopyText,\n  showLanguageIndicator = true,\n  showLineNumbers,\n  ...props\n}: CodeBlockProps) => {\n  const [isCopied, setIsCopied] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n\n  if (!children) return null;\n\n  return (\n    <div\n      className={cn(\n        \"code-block-wrapper relative group bg-muted/50 rounded-md\",\n        showLineNumbers && \"line-numbers\",\n      )}\n    >\n      <div\n        className={cn(\n          \"code-block text-sm not-prose scrollbar overflow-x-auto scrollbar p-4\",\n          props.className,\n        )}\n        ref={ref}\n      >\n        {children}\n      </div>\n      {showLanguageIndicator && (\n        <span\n          className={cn(\n            \"absolute top-1.5 end-3 !text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0\",\n            showCopy === \"always\" && \"hidden\",\n          )}\n        >\n          {language}\n        </span>\n      )}\n      {showCopy !== \"never\" && (\n        <button\n          type=\"button\"\n          aria-label=\"Copy code\"\n          title=\"Copy code\"\n          className={cn(\n            \"absolute top-2 end-2 p-2 transition hover:shadow-xs active:shadow-none active:inset-shadow-xs hover:outline outline-border rounded-md text-sm text-muted-foreground\",\n            showCopy === \"hover\" && \"opacity-0 group-hover:opacity-100\",\n            showCopyText && \"flex gap-2 items-center font-medium\",\n          )}\n          disabled={isCopied}\n          onClick={() => {\n            if (!ref.current?.textContent) return;\n\n            setIsCopied(true);\n            void navigator.clipboard.writeText(ref.current.textContent);\n            setTimeout(() => setIsCopied(false), 2000);\n          }}\n        >\n          {isCopied ? (\n            <CheckIcon\n              className=\"text-emerald-600\"\n              size={16}\n              strokeWidth={2.5}\n              absoluteStrokeWidth\n            />\n          ) : (\n            <CopyIcon size={16} />\n          )}\n          {showCopyText && \"Copy\"}\n        </button>\n      )}\n    </div>\n  );\n};\n"],"names":["EmbeddedCodeBlock","children","language","showCopy","showCopyText","showLanguageIndicator","showLineNumbers","props","isCopied","setIsCopied","useState","ref","useRef","jsxs","cn","jsx","CheckIcon","CopyIcon"],"mappings":";;;;AAmBO,MAAMA,IAAoB,CAAC;AAAA,EAChC,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,cAAAC;AAAA,EACA,uBAAAC,IAAwB;AAAA,EACxB,iBAAAC;AAAA,EACA,GAAGC;AACL,MAAsB;AACpB,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK,GACxCC,IAAMC,EAAuB,IAAI;AAEnC,SAACX,IAGHY,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAR,KAAmB;AAAA,MACrB;AAAA,MAEA,UAAA;AAAA,QAAAS,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACAP,EAAM;AAAA,YACR;AAAA,YACA,KAAAI;AAAA,YAEC,UAAAV;AAAA,UAAA;AAAA,QACH;AAAA,QACCI,KACCU,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACAX,MAAa,YAAY;AAAA,YAC3B;AAAA,YAEC,UAAAD;AAAA,UAAA;AAAA,QACH;AAAA,QAEDC,MAAa,WACZU,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,OAAM;AAAA,YACN,WAAWC;AAAA,cACT;AAAA,cACAX,MAAa,WAAW;AAAA,cACxBC,KAAgB;AAAA,YAClB;AAAA,YACA,UAAUI;AAAA,YACV,SAAS,MAAM;AACT,cAACG,EAAI,SAAS,gBAElBF,EAAY,EAAI,GACX,UAAU,UAAU,UAAUE,EAAI,QAAQ,WAAW,GAC1D,WAAW,MAAMF,EAAY,EAAK,GAAG,GAAI;AAAA,YAC3C;AAAA,YAEC,UAAA;AAAA,cACCD,IAAAO,gBAAAA,EAAA;AAAA,gBAACC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,MAAM;AAAA,kBACN,aAAa;AAAA,kBACb,qBAAmB;AAAA,gBAAA;AAAA,cAGrB,IAAAD,gBAAAA,EAAA,IAACE,GAAS,EAAA,MAAM,GAAI,CAAA;AAAA,cAErBb,KAAgB;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACnB;AAAA,IAAA;AAAA,EAEJ,IA5DoB;AA8DxB;"}
+{"version":3,"file":"EmbeddedCodeBlock.js","sources":["../../src/lib/ui/EmbeddedCodeBlock.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { useRef, useState } from \"react\";\nimport { cn } from \"../util/cn.js\";\n\nexport type CodeBlockProps = {\n  className?: string;\n  noBackground?: boolean;\n  wrapLines?: boolean;\n  showLanguageIndicator?: boolean;\n  language?: string;\n  children?: ReactNode;\n  code?: ReactNode;\n  showCopy?: \"hover\" | \"always\" | \"never\";\n  showCopyText?: boolean;\n  disabled?: boolean;\n  showLineNumbers?: boolean;\n};\n\nexport const EmbeddedCodeBlock = ({\n  children,\n  language,\n  showCopy = \"hover\",\n  showCopyText,\n  showLanguageIndicator = true,\n  showLineNumbers,\n  ...props\n}: CodeBlockProps) => {\n  const [isCopied, setIsCopied] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n\n  if (!children) return null;\n\n  return (\n    <div\n      className={cn(\n        \"code-block-wrapper relative group bg-muted/50\",\n        showLineNumbers && \"line-numbers\",\n      )}\n    >\n      <div\n        className={cn(\n          \"code-block text-sm not-prose scrollbar overflow-x-auto scrollbar p-4\",\n          props.className,\n        )}\n        ref={ref}\n      >\n        {children}\n      </div>\n      {showLanguageIndicator && (\n        <span\n          className={cn(\n            \"absolute top-1.5 end-3 !text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0\",\n            showCopy === \"always\" && \"hidden\",\n          )}\n        >\n          {language}\n        </span>\n      )}\n      {showCopy !== \"never\" && (\n        <button\n          type=\"button\"\n          aria-label=\"Copy code\"\n          title=\"Copy code\"\n          className={cn(\n            \"absolute top-2 end-2 p-2 transition hover:shadow-xs active:shadow-none active:inset-shadow-xs hover:outline outline-border rounded-md text-sm text-muted-foreground\",\n            showCopy === \"hover\" && \"opacity-0 group-hover:opacity-100\",\n            showCopyText && \"flex gap-2 items-center font-medium\",\n          )}\n          disabled={isCopied}\n          onClick={() => {\n            if (!ref.current?.textContent) return;\n\n            setIsCopied(true);\n            void navigator.clipboard.writeText(ref.current.textContent);\n            setTimeout(() => setIsCopied(false), 2000);\n          }}\n        >\n          {isCopied ? (\n            <CheckIcon\n              className=\"text-emerald-600\"\n              size={16}\n              strokeWidth={2.5}\n              absoluteStrokeWidth\n            />\n          ) : (\n            <CopyIcon size={16} />\n          )}\n          {showCopyText && \"Copy\"}\n        </button>\n      )}\n    </div>\n  );\n};\n"],"names":["EmbeddedCodeBlock","children","language","showCopy","showCopyText","showLanguageIndicator","showLineNumbers","props","isCopied","setIsCopied","useState","ref","useRef","jsxs","cn","jsx","CheckIcon","CopyIcon"],"mappings":";;;;AAmBO,MAAMA,IAAoB,CAAC;AAAA,EAChC,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,cAAAC;AAAA,EACA,uBAAAC,IAAwB;AAAA,EACxB,iBAAAC;AAAA,EACA,GAAGC;AACL,MAAsB;AACpB,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK,GACxCC,IAAMC,EAAuB,IAAI;AAEnC,SAACX,IAGHY,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAR,KAAmB;AAAA,MACrB;AAAA,MAEA,UAAA;AAAA,QAAAS,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACAP,EAAM;AAAA,YACR;AAAA,YACA,KAAAI;AAAA,YAEC,UAAAV;AAAA,UAAA;AAAA,QACH;AAAA,QACCI,KACCU,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACAX,MAAa,YAAY;AAAA,YAC3B;AAAA,YAEC,UAAAD;AAAA,UAAA;AAAA,QACH;AAAA,QAEDC,MAAa,WACZU,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,OAAM;AAAA,YACN,WAAWC;AAAA,cACT;AAAA,cACAX,MAAa,WAAW;AAAA,cACxBC,KAAgB;AAAA,YAClB;AAAA,YACA,UAAUI;AAAA,YACV,SAAS,MAAM;AACT,cAACG,EAAI,SAAS,gBAElBF,EAAY,EAAI,GACX,UAAU,UAAU,UAAUE,EAAI,QAAQ,WAAW,GAC1D,WAAW,MAAMF,EAAY,EAAK,GAAG,GAAI;AAAA,YAC3C;AAAA,YAEC,UAAA;AAAA,cACCD,IAAAO,gBAAAA,EAAA;AAAA,gBAACC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,MAAM;AAAA,kBACN,aAAa;AAAA,kBACb,qBAAmB;AAAA,gBAAA;AAAA,cAGrB,IAAAD,gBAAAA,EAAA,IAACE,GAAS,EAAA,MAAM,GAAI,CAAA;AAAA,cAErBb,KAAgB;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACnB;AAAA,IAAA;AAAA,EAEJ,IA5DoB;AA8DxB;"}

package/lib/zudoku.auth-azureb2c.js

@@ -1,7 +1,7 @@
 import { j as yo } from "./jsx-runtime-C5mzlN2N.js";
 import { C as aa } from "./ClientOnly-E7hGysn1.js";
 import { j as sa, u as To } from "./hook-Bd0yS8M0.js";
-import { C as ca, A as qt, a as la } from "./errors-BsabiSKg.js";
+import { C as ca, A as qt, a as la } from "./errors-C473PjdR.js";
 /*! @azure/msal-common v15.7.0 2025-05-30 */
 const d = {
   LIBRARY_NAME: "MSAL.JS",

package/lib/zudoku.auth-clerk.js

@@ -1,6 +1,6 @@
 import { j as l } from "./jsx-runtime-C5mzlN2N.js";
 import { LogOutIcon as g } from "lucide-react";
-import { S as f, a as w, b as p } from "./SignUp-CfojO4Pb.js";
+import { S as f, a as w, b as p } from "./SignUp-M9Jz4SXJ.js";
 import { u as n } from "./hook-Bd0yS8M0.js";
 const y = ({
   clerkPubKey: d,

package/lib/zudoku.auth-openid.js

@@ -2,7 +2,7 @@ import { j as ne } from "./jsx-runtime-C5mzlN2N.js";
 import { g as Le } from "./invariant-DAFpPywt.js";
 import { C as Ue } from "./ClientOnly-E7hGysn1.js";
 import { j as xe, u as S } from "./hook-Bd0yS8M0.js";
-import { C as Ce, O as re, A as R, a as Ie } from "./errors-BsabiSKg.js";
+import { C as Ce, O as re, A as R, a as Ie } from "./errors-C473PjdR.js";
 var O = { exports: {} }, je = O.exports, oe;
 function De() {
   return oe || (oe = 1, function(t) {

package/lib/zudoku.components.js

@@ -1,9 +1,9 @@
-import "./RouteGuard-Bd-ppFbi.js";
+import "./RouteGuard-CbKd7_9h.js";
 import "./index-ClhS5TxS.js";
 import "./chunk-DQRVZFIR-DHK7_Ilc.js";
 import "./hook-Bd0yS8M0.js";
 import "./Slot-DwZlQ-vX.js";
-import { e as C, f as d, j as h, B as k, m as l, C as S, i as B, H as c, c as y, L as E, M as g, g as H, R as L, d as M, S as R, h as T, T as Z, Z as f, b as A, l as b, k as j, n as v, u as w } from "./index-BIbCx5Fh.js";
+import { e as C, f as d, j as h, B as k, m as l, C as S, i as B, H as c, c as y, L as E, M as g, g as H, R as L, d as M, S as R, h as T, T as Z, Z as f, b as A, l as b, k as j, n as v, u as w } from "./index-Chtnw-sn.js";
 import "./ui/Button.js";
 import "./ui/Callout.js";
 import "./ClientOnly-E7hGysn1.js";

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

@@ -2,8 +2,8 @@ import { j as t } from "./jsx-runtime-C5mzlN2N.js";
 import { s as f } from "./index-CcV90rin.js";
 import { d as b, m as j } from "./chunk-DQRVZFIR-DHK7_Ilc.js";
 import { u as x, c as v, j as d } from "./hook-Bd0yS8M0.js";
-import { H as y } from "./RouteGuard-Bd-ppFbi.js";
-import { L as N } from "./index-BIbCx5Fh.js";
+import { H as y } from "./RouteGuard-CbKd7_9h.js";
+import { L as N } from "./index-Chtnw-sn.js";
 import { H as k, M as S } from "./Slot-DwZlQ-vX.js";
 const w = ({
   items: n,

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

@@ -9,7 +9,7 @@ import { u as z, A as T, a as M } from "./Alert-CT_ViLrJ.js";
 import * as q from "react";
 import ye, { createContext as L, useLayoutEffect as ge, useEffect as je, useRef as k, useId as H, useContext as B, useInsertionEffect as Ce, useCallback as ve, useMemo as S, Children as we, isValidElement as ke, useState as b } from "react";
 import { C as be, a as Ee } from "./Card-DPhGbYUM.js";
-import { D as J, e as U, a as V, c as Y, b as G, d as Z, f as W, g as K } from "./Dialog-DGlrUTCS.js";
+import { D as J, e as U, a as V, c as Y, b as G, d as Z, f as W, g as K } from "./Dialog-CiIdyz6a.js";
 import { Input as Ne } from "./ui/Input.js";
 import { c as P } from "./cn-wvCW-ho6.js";
 import { u as De } from "./CodeBlock-DAKxs_Tu.js";

package/lib/zudoku.plugin-markdown.js

@@ -4,7 +4,7 @@ const m = (t) => ({
     ([e, n]) => ({
       path: e,
       lazy: async () => {
-        const { MdxPage: o } = await import("./MdxPage-D-QSUlMf.js"), { default: a, ...r } = await n();
+        const { MdxPage: o } = await import("./MdxPage-Glqk-5sb.js"), { default: a, ...r } = await n();
         return {
           element: /* @__PURE__ */ s.jsx(
             o,

package/lib/zudoku.plugin-openapi.js

@@ -3,7 +3,7 @@ import "lucide-react";
 import "./chunk-DQRVZFIR-DHK7_Ilc.js";
 import "./hook-Bd0yS8M0.js";
 import "./ui/Button.js";
-import { E as e, U as n, F as s } from "./index-BoBGmARR.js";
+import { E as e, U as n, F as s } from "./index-BLRAtPoq.js";
 export {
   e as GetNavigationOperationsQuery,
   n as UNTAGGED_PATH,

package/lib/zudoku.plugin-search-pagefind.js

@@ -6,9 +6,9 @@ import { useRef as C, useLayoutEffect as T, useState as E } from "react";
 import { B as R } from "./Button-BE9IVkWV.js";
 import { ShieldAlertIcon as F, AlertTriangleIcon as q, InfoIcon as b, LightbulbIcon as z, BracketsIcon as A, FileTextIcon as P } from "lucide-react";
 import { c as u } from "./cn-wvCW-ho6.js";
-import { C as $, a as f, b as h, c as D, d as O, e as B } from "./Command-CPtGTZAL.js";
-import { b as U } from "./Dialog-DGlrUTCS.js";
-import { S as G } from "./RouteGuard-Bd-ppFbi.js";
+import { C as $, a as f, b as h, c as D, d as O, e as B } from "./Command-xsbs2uhf.js";
+import { b as U } from "./Dialog-CiIdyz6a.js";
+import { S as G } from "./RouteGuard-CbKd7_9h.js";
 import { a as H, L as p } from "./chunk-DQRVZFIR-DHK7_Ilc.js";
 const K = {
   note: {

package/package.json

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

package/src/lib/components/Autocomplete.tsx

@@ -26,7 +26,7 @@ const AutocompletePopover = ({
   options,
   onChange,
   className,
-  placeholder = "Enter value",
+  placeholder = "Value",
   onEnterPress,
   ref,
 }: AutocompleteProps) => {

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

@@ -101,6 +101,7 @@ export const SidecarExamples = ({
         ) : (
           <CollapsibleCode>
             <SyntaxHighlight
+              embedded
               language={language}
               noBackground
               className="[--scrollbar-color:gray] rounded-none text-xs max-h-[500px] p-2"

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

@@ -11,19 +11,18 @@ import {
 import ExamplesDropdown from "./ExamplesDropdown.js";
 import { type PlaygroundForm } from "./Playground.js";
 
-export const BodyPanel = ({ examples }: { examples?: Content }) => {
+export const BodyPanel = ({ content }: { content?: Content }) => {
   const { register, setValue, watch } = useFormContext<PlaygroundForm>();
-
+  const examples = (content ?? []).flatMap((e) => e.examples);
   const headers = watch("headers");
-
   return (
     <Collapsible defaultOpen>
       <CollapsibleHeaderTrigger>
         <FileInput size={16} />
         <CollapsibleHeader>Body</CollapsibleHeader>
-        {examples && examples.length > 0 && (
+        {content && examples.length > 0 ? (
           <ExamplesDropdown
-            examples={examples}
+            examples={content}
             onSelect={(example, mediaType) => {
               setValue("body", JSON.stringify(example.value, null, 2));
               setValue("headers", [
@@ -36,6 +35,8 @@ export const BodyPanel = ({ examples }: { examples?: Content }) => {
               ]);
             }}
           />
+        ) : (
+          <div />
         )}
       </CollapsibleHeaderTrigger>
       <CollapsibleContent className="flex flex-col gap-2 ">

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

@@ -142,7 +142,7 @@ export const Headers = ({
                     <TooltipTrigger asChild>
                       <ParamsGridItem
                         key={field.id}
-                        className="opacity-50 cursor-not-allowed font-mono text-xs"
+                        className="opacity-50 cursor-not-allowed font-mono text-xs min-h-10"
                       >
                         <LockIcon size={16} />
                         <Input

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

@@ -47,7 +47,7 @@ export const PathParams = ({
                   <Input
                     {...field}
                     required
-                    placeholder="Enter value"
+                    placeholder="Value"
                     className="w-full truncate border-0 p-0 m-0 shadow-none text-xs font-mono focus-visible:ring-0"
                   />
                 )}

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

@@ -397,101 +397,88 @@ export const Playground = ({
           />
 
           <div className="grid grid-cols-[1fr_1px_1fr] text-sm">
-            <div className="col-span-3 p-4 border-b">
-              <div className="flex gap-2 items-stretch">
-                <div className="flex flex-1 items-center w-full border rounded-md relative overflow-hidden">
-                  <div className="border-r p-2 bg-muted rounded-l-md self-stretch font-semibold font-mono flex items-center">
-                    {method.toUpperCase()}
-                  </div>
-                  <div className="items-center px-2 font-mono text-xs break-all leading-6 relative h-full w-full">
-                    <div className="h-full py-1.5">
-                      {serverSelect}
-                      <UrlPath url={url} />
-                      <UrlQueryParams />
-                    </div>
-                    <div
-                      className="h-full bg-primary/25 absolute left-0 -bottom-0 z-10 transition-all duration-300 ease-in-out"
-                      style={{
-                        opacity: isFinished ? 0 : 1,
-                        width: isFinished ? 0 : `${progress * 100}%`,
-                      }}
-                    />
-                  </div>
-                  <div className="px-1">
-                    <Button
-                      type="button"
-                      onClick={() => {
-                        copyToClipboard(
-                          createUrl(
-                            server ?? selectedServer,
-                            url,
-                            form.getValues(),
-                          ).toString(),
-                        );
-                      }}
-                      variant="ghost"
-                      size="icon-xs"
-                      className={cn(
-                        "hover:opacity-100 transition",
-                        isCopied
-                          ? "text-emerald-600 opacity-100"
-                          : "opacity-50",
-                      )}
-                    >
-                      {isCopied ? (
-                        <CheckIcon className="text-green-500" size={14} />
-                      ) : (
-                        <CopyIcon size={14} />
-                      )}
-                    </Button>
+            <div className="col-span-3 p-4 border-b flex gap-2 items-stretch">
+              <div className="flex flex-1 items-center w-full border rounded-md relative overflow-hidden">
+                <div className="border-r p-2 bg-muted rounded-l-md self-stretch font-semibold font-mono flex items-center">
+                  {method.toUpperCase()}
+                </div>
+                <div className="items-center px-2 font-mono text-xs break-all leading-6 relative h-full w-full">
+                  <div className="h-full py-1.5">
+                    {serverSelect}
+                    <UrlPath url={url} />
+                    <UrlQueryParams />
                   </div>
                 </div>
-
-                <Button
-                  type="submit"
-                  variant={queryMutation.isPending ? "destructive" : "default"}
-                  onClick={(e) => {
-                    if (queryMutation.isPending) {
-                      abortControllerRef.current?.abort(
-                        "Request cancelled by user",
+                <div className="px-1">
+                  <Button
+                    type="button"
+                    onClick={() => {
+                      copyToClipboard(
+                        createUrl(
+                          server ?? selectedServer,
+                          url,
+                          form.getValues(),
+                        ).toString(),
                       );
-                      e.preventDefault();
-                    }
-                  }}
-                  className="w-18"
-                >
-                  {queryMutation.isPending ? "Cancel" : "Send"}
-                </Button>
+                    }}
+                    variant="ghost"
+                    size="icon-xs"
+                    className={cn(
+                      "hover:opacity-100 transition",
+                      isCopied ? "text-emerald-600 opacity-100" : "opacity-50",
+                    )}
+                  >
+                    {isCopied ? (
+                      <CheckIcon className="text-green-500" size={14} />
+                    ) : (
+                      <CopyIcon size={14} />
+                    )}
+                  </Button>
+                </div>
               </div>
+
+              <Button
+                type="submit"
+                variant={queryMutation.isPending ? "destructive" : "default"}
+                onClick={(e) => {
+                  if (queryMutation.isPending) {
+                    abortControllerRef.current?.abort(
+                      "Request cancelled by user",
+                    );
+                    e.preventDefault();
+                  }
+                }}
+                className="w-18"
+              >
+                {queryMutation.isPending ? "Cancel" : "Send"}
+              </Button>
             </div>
             <div className="relative overflow-y-auto h-[80vh]">
               {identities.data?.length !== 0 && (
-                <div className="flex flex-col gap-2">
-                  <div className="flex flex-col gap-2">
-                    <Collapsible defaultOpen>
-                      <CollapsibleHeaderTrigger>
-                        <IdCardLanyardIcon size={16} />
-                        <CollapsibleHeader className="col-span-2">
-                          Authentication
-                        </CollapsibleHeader>
-                      </CollapsibleHeaderTrigger>
-                      <CollapsibleContent className="CollapsibleContent">
-                        <IdentitySelector
-                          value={identity}
-                          identities={identities.data ?? []}
-                          setValue={(value) => setValue("identity", value)}
-                        />
-                      </CollapsibleContent>
-                    </Collapsible>
-                  </div>
-                </div>
+                <Collapsible defaultOpen>
+                  <CollapsibleHeaderTrigger>
+                    <IdCardLanyardIcon size={16} />
+                    <CollapsibleHeader className="col-span-2">
+                      Authentication
+                    </CollapsibleHeader>
+                  </CollapsibleHeaderTrigger>
+                  <CollapsibleContent className="CollapsibleContent">
+                    <IdentitySelector
+                      value={identity}
+                      identities={identities.data ?? []}
+                      setValue={(value) => setValue("identity", value)}
+                    />
+                  </CollapsibleContent>
+                </Collapsible>
               )}
 
               {pathParams.length > 0 && (
                 <Collapsible defaultOpen>
-                  <CollapsibleHeaderTrigger className="border-t">
+                  <CollapsibleHeaderTrigger>
                     <ShapesIcon size={16} />
-                    <CollapsibleHeader>Path Parameters</CollapsibleHeader>
+                    <CollapsibleHeader className="col-span-2">
+                      Path Parameters
+                    </CollapsibleHeader>
                   </CollapsibleHeaderTrigger>
                   <CollapsibleContent className="CollapsibleContent">
                     <PathParams url={url} control={control} />
@@ -506,12 +493,14 @@ export const Playground = ({
                 schemaHeaders={headers}
                 lockedHeaders={authorizationFields?.headers}
               />
-              {isBodySupported && <BodyPanel examples={examples} />}
+              {isBodySupported && <BodyPanel content={examples} />}
             </div>
             <div className="w-full bg-muted-foreground/20" />
             <ResultPanel
               queryMutation={queryMutation}
               showLongRunningWarning={showLongRunningWarning}
+              isFinished={isFinished}
+              progress={progress}
               tip={
                 <div className="text-xs w-full">
                   <span className="text-muted-foreground">

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

@@ -90,6 +90,7 @@ export const QueryParams = ({
                     render={({ field }) =>
                       !requiredFields[i] ? (
                         <Autocomplete
+                          placeholder="Name"
                           value={field.value}
                           options={schemaQueryParams.map((param) => param.name)}
                           onChange={(e) => {
@@ -131,7 +132,8 @@ export const QueryParams = ({
                                   setValue(`queryParams.${i}.active`, true);
                                 }
                               }}
-                              placeholder="Enter value"
+                              placeholder="Value"
+                              aria-label="Query parameter value"
                               className="w-full border-0 p-0 m-0 shadow-none focus-visible:ring-0 text-xs font-mono"
                             />
                           );

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

@@ -59,10 +59,14 @@ 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",
@@ -78,7 +82,7 @@ export const ResponseStatusBar = ({
   };
 
   return (
-    <div className="flex h-10 text-xs gap-4 px-4 items-center justify-between font-mono border-b">
+    <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]}` : ""}
@@ -86,7 +90,7 @@ export const ResponseStatusBar = ({
       <div className="flex gap-2">
         <div>
           <span className="text-muted-foreground">Size</span>{" "}
-          <span className="inline-block text-end w-[5ch]">
+          <span className="inline-block text-end min-w-[5ch]">
             {size ? humanFileSize(size) : "- B"}
           </span>
         </div>
@@ -97,6 +101,13 @@ export const ResponseStatusBar = ({
           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>
   );
 };