@akanjs/ui 0.0.151 → 0.0.153

package/esm/Signal/GraphQL.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { getNonArrayModel, isGqlScalar } from "@akanjs/base";
 import { getLightModelRef } from "@akanjs/constant";
 import { usePage } from "@akanjs/next";
@@ -12,7 +13,7 @@ import {
   makeRequestExample
 } from "@akanjs/signal";
 import { st } from "@akanjs/store";
-import React, { useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { AiOutlineFileWord, AiOutlineSend } from "react-icons/ai";
 import { BiLogoGraphql } from "react-icons/bi";
 import Arg from "./Arg";
@@ -20,7 +21,7 @@ import Object from "./Object";
 import Request from "./Request";
 import Response from "./Response";
 function GraphQL() {
-  return /* @__PURE__ */ React.createElement("div", null);
+  return /* @__PURE__ */ jsx("div", {});
 }
 const GraphQLEndpoints = ({ refName, openAll }) => {
   const sigRefs = getSignalRefsOnStorage(refName);
@@ -41,7 +42,7 @@ const GraphQLEndpoints = ({ refName, openAll }) => {
       return true;
     return false;
   });
-  return /* @__PURE__ */ React.createElement("div", null, gqlInfos.map(({ gqlMeta, sigRef }, idx) => /* @__PURE__ */ React.createElement(GraphQLEndpoint, { key: idx, sigRef, gqlMeta, open: openAll })));
+  return /* @__PURE__ */ jsx("div", { children: gqlInfos.map(({ gqlMeta, sigRef }, idx) => /* @__PURE__ */ jsx(GraphQLEndpoint, { sigRef, gqlMeta, open: openAll }, idx)) });
 };
 GraphQL.Endpoints = GraphQLEndpoints;
 const GraphQLEndpoint = ({ sigRef, gqlMeta, open }) => {
@@ -51,49 +52,107 @@ const GraphQLEndpoint = ({ sigRef, gqlMeta, open }) => {
   const [argMetas] = getArgMetas(sigRef, gqlMeta.key);
   const gqlArgMetas = argMetas.filter((argMeta) => argMeta.type !== "Upload");
   const uploadArgMetas = argMetas.filter((argMeta) => argMeta.type === "Upload");
-  return /* @__PURE__ */ React.createElement("div", { className: "collapse-arrow bg-base-300 collapse my-1" }, /* @__PURE__ */ React.createElement("input", { type: "checkbox", checked: open }), /* @__PURE__ */ React.createElement("div", { className: "collapse-title text-xl" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React.createElement("div", { className: `btn btn-xs w-16 ${gqlMeta.type === "Query" ? "btn-success" : "btn-accent"}` }, gqlMeta.type), gqlMeta.key, " ", /* @__PURE__ */ React.createElement("span", { className: "text-sm" }, "(", l.api(sigMeta.refName, gqlMeta.key), ")"))), /* @__PURE__ */ React.createElement("div", { className: "collapse-content bg-base-200 w-full" }, /* @__PURE__ */ React.createElement("div", { className: "mt-4 text-lg" }, "Description", /* @__PURE__ */ React.createElement("hr", { className: "my-2 border-[0.1px] border-gray-400" }), gqlMeta.guards.some((guard) => guard !== "None") ? /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 pb-3 pl-3 text-base font-normal" }, "- Guards:", gqlMeta.guards.map((guard) => /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: `badge ${guard === "Public" ? "badge-success" : guard === "SuperAdmin" ? "badge-error" : guard === "Admin" ? "badge-error" : guard === "User" ? "badge-accent" : guard === "Owner" ? "badge-accent" : guard === "Every" ? "badge-warning" : ""}`,
-      key: guard
-    },
-    guard
-  ))) : null, /* @__PURE__ */ React.createElement("div", { className: "pb-3 pl-3 text-base font-normal" }, "- ", l.apidesc(sigMeta.refName, gqlMeta.key))), /* @__PURE__ */ React.createElement("div", { className: "my-4 flex w-full gap-5 px-5" }, /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      onClick: () => {
-        setViewStatus("doc");
-      },
-      className: `btn btn-success w-1/2 ${viewStatus === "doc" ? "" : "btn-outline"}`
-    },
-    /* @__PURE__ */ React.createElement(AiOutlineFileWord, { className: "text-xl" }),
-    " View Doc"
-  ), /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      onClick: () => {
-        setViewStatus("test");
-      },
-      className: `btn btn-primary w-1/2 ${viewStatus === "test" ? "" : "btn-outline"}`
-    },
-    /* @__PURE__ */ React.createElement(BiLogoGraphql, { className: "text-xl" }),
-    " GraphQL"
-  )), viewStatus === "doc" ? /* @__PURE__ */ React.createElement(
-    GraphQLInterface,
-    {
-      sigRef,
-      gqlMeta,
-      gqlArgMetas,
-      uploadArgMetas
-    }
-  ) : /* @__PURE__ */ React.createElement(GraphQLTry, { sigRef, gqlMeta, gqlArgMetas, uploadArgMetas })));
+  return /* @__PURE__ */ jsxs("div", { className: "collapse-arrow bg-base-300 collapse my-1", children: [
+    /* @__PURE__ */ jsx("input", { type: "checkbox", checked: open }),
+    /* @__PURE__ */ jsx("div", { className: "collapse-title text-xl", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: `btn btn-xs w-16 ${gqlMeta.type === "Query" ? "btn-success" : "btn-accent"}`, children: gqlMeta.type }),
+      gqlMeta.key,
+      " ",
+      /* @__PURE__ */ jsxs("span", { className: "text-sm", children: [
+        "(",
+        l.api(sigMeta.refName, gqlMeta.key),
+        ")"
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "collapse-content bg-base-200 w-full", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mt-4 text-lg", children: [
+        "Description",
+        /* @__PURE__ */ jsx("hr", { className: "my-2 border-[0.1px] border-gray-400" }),
+        gqlMeta.guards.some((guard) => guard !== "None") ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pb-3 pl-3 text-base font-normal", children: [
+          "- Guards:",
+          gqlMeta.guards.map((guard) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `badge ${guard === "Public" ? "badge-success" : guard === "SuperAdmin" ? "badge-error" : guard === "Admin" ? "badge-error" : guard === "User" ? "badge-accent" : guard === "Owner" ? "badge-accent" : guard === "Every" ? "badge-warning" : ""}`,
+              children: guard
+            },
+            guard
+          ))
+        ] }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "pb-3 pl-3 text-base font-normal", children: [
+          "- ",
+          l.apidesc(sigMeta.refName, gqlMeta.key)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "my-4 flex w-full gap-5 px-5", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => {
+              setViewStatus("doc");
+            },
+            className: `btn btn-success w-1/2 ${viewStatus === "doc" ? "" : "btn-outline"}`,
+            children: [
+              /* @__PURE__ */ jsx(AiOutlineFileWord, { className: "text-xl" }),
+              " View Doc"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => {
+              setViewStatus("test");
+            },
+            className: `btn btn-primary w-1/2 ${viewStatus === "test" ? "" : "btn-outline"}`,
+            children: [
+              /* @__PURE__ */ jsx(BiLogoGraphql, { className: "text-xl" }),
+              " GraphQL"
+            ]
+          }
+        )
+      ] }),
+      viewStatus === "doc" ? /* @__PURE__ */ jsx(
+        GraphQLInterface,
+        {
+          sigRef,
+          gqlMeta,
+          gqlArgMetas,
+          uploadArgMetas
+        }
+      ) : /* @__PURE__ */ jsx(GraphQLTry, { sigRef, gqlMeta, gqlArgMetas, uploadArgMetas })
+    ] })
+  ] });
 };
 GraphQL.Endpoint = GraphQLEndpoint;
 const GraphQLInterface = ({ sigRef, gqlMeta, gqlArgMetas, uploadArgMetas }) => {
   const sigMeta = getSigMeta(sigRef);
   const [returnRef, arrDepth] = getNonArrayModel(gqlMeta.returns());
   const isReturnModelType = !isGqlScalar(returnRef);
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4" }, uploadArgMetas.length ? /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-lg" }, "Form data upload"), /* @__PURE__ */ React.createElement("div", { className: "bg-base-100 overflow-x-auto rounded-md p-3" }, /* @__PURE__ */ React.createElement(Arg.Table, { sigMeta, gqlMeta, argMetas: uploadArgMetas }))) : null, gqlArgMetas.length ? /* @__PURE__ */ React.createElement("div", { className: "text-start" }, /* @__PURE__ */ React.createElement("span", { className: "text-start text-xl font-bold" }, "Variables"), /* @__PURE__ */ React.createElement("div", { className: "bg-base-100 mt-3 overflow-x-auto rounded-md p-3" }, /* @__PURE__ */ React.createElement(Arg.Table, { sigMeta, gqlMeta, argMetas: gqlArgMetas }))) : null, /* @__PURE__ */ React.createElement("div", { className: "text-lg font-bold" }, /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col gap-2 rounded-md font-normal md:flex-col" }, /* @__PURE__ */ React.createElement("div", { className: "w-full text-start md:w-full" }, /* @__PURE__ */ React.createElement("span", { className: "text-xl font-bold" }, "Response Type"), /* @__PURE__ */ React.createElement("div", { className: "bg-base-100 mt-3 max-h-[500px] overflow-auto rounded-md p-4 md:h-[500px]" }, "Returns: ", /* @__PURE__ */ React.createElement(Object.Type, { objRef: returnRef, arrDepth }), isReturnModelType ? /* @__PURE__ */ React.createElement(Object.Detail, { objRef: returnRef }) : null)), /* @__PURE__ */ React.createElement("div", { className: "w-full text-start md:w-full" }, /* @__PURE__ */ React.createElement("span", { className: "text-xl font-bold" }, "Response Example"), /* @__PURE__ */ React.createElement("div", { className: "mt-3" }, /* @__PURE__ */ React.createElement(Response.Example, { sigRef, gqlMeta }))))));
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    uploadArgMetas.length ? /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "text-lg", children: "Form data upload" }),
+      /* @__PURE__ */ jsx("div", { className: "bg-base-100 overflow-x-auto rounded-md p-3", children: /* @__PURE__ */ jsx(Arg.Table, { sigMeta, gqlMeta, argMetas: uploadArgMetas }) })
+    ] }) : null,
+    gqlArgMetas.length ? /* @__PURE__ */ jsxs("div", { className: "text-start", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-start text-xl font-bold", children: "Variables" }),
+      /* @__PURE__ */ jsx("div", { className: "bg-base-100 mt-3 overflow-x-auto rounded-md p-3", children: /* @__PURE__ */ jsx(Arg.Table, { sigMeta, gqlMeta, argMetas: gqlArgMetas }) })
+    ] }) : null,
+    /* @__PURE__ */ jsx("div", { className: "text-lg font-bold", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-2 rounded-md font-normal md:flex-col", children: [
+      /* @__PURE__ */ jsxs("div", { className: "w-full text-start md:w-full", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xl font-bold", children: "Response Type" }),
+        /* @__PURE__ */ jsxs("div", { className: "bg-base-100 mt-3 max-h-[500px] overflow-auto rounded-md p-4 md:h-[500px]", children: [
+          "Returns: ",
+          /* @__PURE__ */ jsx(Object.Type, { objRef: returnRef, arrDepth }),
+          isReturnModelType ? /* @__PURE__ */ jsx(Object.Detail, { objRef: returnRef }) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "w-full text-start md:w-full", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xl font-bold", children: "Response Example" }),
+        /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(Response.Example, { sigRef, gqlMeta }) })
+      ] })
+    ] }) })
+  ] });
 };
 GraphQL.Interface = GraphQLInterface;
 const GraphQLTry = ({ sigRef, gqlMeta, gqlArgMetas, uploadArgMetas }) => {
@@ -130,25 +189,50 @@ const GraphQLTry = ({ sigRef, gqlMeta, gqlArgMetas, uploadArgMetas }) => {
     });
     setResponse({ status: "success", data });
   };
-  return /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col gap-4" }, uploadArgMetas.length ? /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-lg" }, "Form data uplaod"), uploadArgMetas.map((argMeta) => /* @__PURE__ */ React.createElement(
-    Arg.FormData,
-    {
-      key: argMeta.name,
-      argMeta,
-      value: uploadRequest[argMeta.name],
-      onChange: (fileList) => {
-        setUploadRequest({ ...uploadRequest, [argMeta.name]: fileList });
-      }
-    }
-  ))) : null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "grid gap-2 lg:grid-cols-2" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-lg" }, "Variables"), /* @__PURE__ */ React.createElement("div", { className: "w-full items-center justify-center" }, /* @__PURE__ */ React.createElement(
-    Arg.Json,
-    {
-      value: gqlRequest,
-      onChange: (value) => {
-        setGqlRequest(value);
-      }
-    }
-  ))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-lg" }, "Graphql String"), /* @__PURE__ */ React.createElement("div", { className: "w-full items-center justify-center" }, /* @__PURE__ */ React.createElement(Request.Example, { value: gqlStr })))), /* @__PURE__ */ React.createElement("button", { className: "btn bg-success w-full", onClick: () => void onSend() }, /* @__PURE__ */ React.createElement(AiOutlineSend, { className: "-mt-0.5" }), " Send Request")), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-lg" }, "Response"), /* @__PURE__ */ React.createElement(Response.Result, { status: response.status, data: response.data })));
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-4", children: [
+    uploadArgMetas.length ? /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "text-lg", children: "Form data uplaod" }),
+      uploadArgMetas.map((argMeta) => /* @__PURE__ */ jsx(
+        Arg.FormData,
+        {
+          argMeta,
+          value: uploadRequest[argMeta.name],
+          onChange: (fileList) => {
+            setUploadRequest({ ...uploadRequest, [argMeta.name]: fileList });
+          }
+        },
+        argMeta.name
+      ))
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-2 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "text-lg", children: "Variables" }),
+          /* @__PURE__ */ jsx("div", { className: "w-full items-center justify-center", children: /* @__PURE__ */ jsx(
+            Arg.Json,
+            {
+              value: gqlRequest,
+              onChange: (value) => {
+                setGqlRequest(value);
+              }
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "text-lg", children: "Graphql String" }),
+          /* @__PURE__ */ jsx("div", { className: "w-full items-center justify-center", children: /* @__PURE__ */ jsx(Request.Example, { value: gqlStr }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("button", { className: "btn bg-success w-full", onClick: () => void onSend(), children: [
+        /* @__PURE__ */ jsx(AiOutlineSend, { className: "-mt-0.5" }),
+        " Send Request"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "text-lg", children: "Response" }),
+      /* @__PURE__ */ jsx(Response.Result, { status: response.status, data: response.data })
+    ] })
+  ] });
 };
 GraphQL.Try = GraphQLTry;
 export {

package/esm/Signal/Listener.js

@@ -1,9 +1,10 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "@akanjs/client";
 import { capitalize } from "@akanjs/common";
 import { useEffect, useRef } from "react";
 function Listener() {
-  return /* @__PURE__ */ React.createElement("div", null);
+  return /* @__PURE__ */ jsx("div", {});
 }
 const ListenerResult = ({ status, data }) => {
   const dataStr = typeof data === "object" ? JSON.stringify(data, null, 2) : data;
@@ -13,26 +14,32 @@ const ListenerResult = ({ status, data }) => {
       ref.current.scrollTop = ref.current.scrollHeight;
     }
   }, [dataStr]);
-  return /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement(
-    "textarea",
-    {
-      ref,
-      className: `textarea duration-300 ${status === "loading" ? "textarea-disabled" : status === "error" ? "textarea-error text-error border-error" : status === "listening" ? "textarea-success border-info animate-borderPulse-50 border-3" : ""} bg-base-100 min-h-[300px] w-full rounded-md p-4 text-sm font-normal`,
-      value: dataStr,
-      onChange: () => true
-    }
-  ), /* @__PURE__ */ React.createElement("div", { className: "bg-base-200/50 absolute top-4 right-4 flex items-center justify-center gap-3 rounded-lg px-2 py-1 font-bold" }, capitalize(status), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: clsx("size-[14px] rounded-full", {
-        "bg-base-300 animate-bounce": status === "ready",
-        "animate-pop-300 bg-success": status === "listening",
-        // "animate-pop bg-success": status === "success",
-        "bg-error animate-none": status === "error",
-        "bg-warning animate-ping": status === "loading"
-      })
-    }
-  )));
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        className: `textarea duration-300 ${status === "loading" ? "textarea-disabled" : status === "error" ? "textarea-error text-error border-error" : status === "listening" ? "textarea-success border-info animate-borderPulse-50 border-3" : ""} bg-base-100 min-h-[300px] w-full rounded-md p-4 text-sm font-normal`,
+        value: dataStr,
+        onChange: () => true
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "bg-base-200/50 absolute top-4 right-4 flex items-center justify-center gap-3 rounded-lg px-2 py-1 font-bold", children: [
+      capitalize(status),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx("size-[14px] rounded-full", {
+            "bg-base-300 animate-bounce": status === "ready",
+            "animate-pop-300 bg-success": status === "listening",
+            // "animate-pop bg-success": status === "success",
+            "bg-error animate-none": status === "error",
+            "bg-warning animate-ping": status === "loading"
+          })
+        }
+      )
+    ] })
+  ] });
 };
 Listener.Result = ListenerResult;
 export {

package/esm/Signal/Message.js

@@ -1,11 +1,12 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { getNonArrayModel, isGqlScalar } from "@akanjs/base";
 import { capitalize } from "@akanjs/common";
 import { getLightModelRef } from "@akanjs/constant";
 import { usePage } from "@akanjs/next";
 import { fetch, getArgMetas, getSigMeta, makeRequestExample } from "@akanjs/signal";
 import { st } from "@akanjs/store";
-import React, { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { AiOutlineDisconnect, AiOutlineFileWord, AiOutlineSend, AiOutlineSwap } from "react-icons/ai";
 import { BiSolidNetworkChart } from "react-icons/bi";
 import Arg from "./Arg";
@@ -13,7 +14,7 @@ import Listener from "./Listener";
 import Object from "./Object";
 import Response from "./Response";
 function Message() {
-  return /* @__PURE__ */ React.createElement("div", null);
+  return /* @__PURE__ */ jsx("div", {});
 }
 const MessageEndpoint = ({ sigRef, gqlMeta, open }) => {
   const { l } = usePage();
@@ -22,49 +23,107 @@ const MessageEndpoint = ({ sigRef, gqlMeta, open }) => {
   const [argMetas] = getArgMetas(sigRef, gqlMeta.key);
   const gqlArgMetas = argMetas.filter((argMeta) => argMeta.type !== "Upload");
   const uploadArgMetas = argMetas.filter((argMeta) => argMeta.type === "Upload");
-  return /* @__PURE__ */ React.createElement("div", { className: "collapse-arrow bg-base-300 collapse my-1" }, /* @__PURE__ */ React.createElement("input", { type: "checkbox", checked: open }), /* @__PURE__ */ React.createElement("div", { className: "collapse-title text-xl" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React.createElement("div", { className: `btn btn-xs w-16 ${gqlMeta.type === "Pubsub" ? "btn-info" : "btn-warning"}` }, gqlMeta.type), gqlMeta.key, " ", /* @__PURE__ */ React.createElement("span", { className: "text-sm" }, "(", l.api(sigMeta.refName, gqlMeta.key), ")"))), /* @__PURE__ */ React.createElement("div", { className: "collapse-content bg-base-200 w-full" }, /* @__PURE__ */ React.createElement("div", { className: "mt-4 text-lg" }, "Description", /* @__PURE__ */ React.createElement("hr", { className: "my-2 border-[0.1px] border-gray-400" }), gqlMeta.guards.some((guard) => guard !== "None") ? /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 pb-3 pl-3 text-base font-normal" }, "- Guards:", gqlMeta.guards.map((guard) => /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: `badge ${guard === "Public" ? "badge-success" : guard === "SuperAdmin" ? "badge-error" : guard === "Admin" ? "badge-error" : guard === "User" ? "badge-accent" : guard === "Owner" ? "badge-accent" : guard === "Every" ? "badge-warning" : ""}`,
-      key: guard
-    },
-    guard
-  ))) : null, /* @__PURE__ */ React.createElement("div", { className: "pb-3 pl-3 text-base font-normal" }, "- ", l.apidesc(sigMeta.refName, gqlMeta.key))), /* @__PURE__ */ React.createElement("div", { className: "my-4 flex w-full gap-5 px-5" }, /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      onClick: () => {
-        setViewStatus("doc");
-      },
-      className: `btn btn-success w-1/2 ${viewStatus === "doc" ? "" : "btn-outline"}`
-    },
-    /* @__PURE__ */ React.createElement(AiOutlineFileWord, { className: "text-xl" }),
-    " View Doc"
-  ), /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      onClick: () => {
-        setViewStatus("test");
-      },
-      className: `btn btn-primary w-1/2 ${viewStatus === "test" ? "" : "btn-outline"}`
-    },
-    /* @__PURE__ */ React.createElement(BiSolidNetworkChart, { className: "text-xl" }),
-    " Message"
-  )), viewStatus === "doc" ? /* @__PURE__ */ React.createElement(
-    MessageInterface,
-    {
-      sigRef,
-      gqlMeta,
-      gqlArgMetas,
-      uploadArgMetas
-    }
-  ) : /* @__PURE__ */ React.createElement(MessageTry, { sigRef, gqlMeta, gqlArgMetas, uploadArgMetas })));
+  return /* @__PURE__ */ jsxs("div", { className: "collapse-arrow bg-base-300 collapse my-1", children: [
+    /* @__PURE__ */ jsx("input", { type: "checkbox", checked: open }),
+    /* @__PURE__ */ jsx("div", { className: "collapse-title text-xl", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: `btn btn-xs w-16 ${gqlMeta.type === "Pubsub" ? "btn-info" : "btn-warning"}`, children: gqlMeta.type }),
+      gqlMeta.key,
+      " ",
+      /* @__PURE__ */ jsxs("span", { className: "text-sm", children: [
+        "(",
+        l.api(sigMeta.refName, gqlMeta.key),
+        ")"
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "collapse-content bg-base-200 w-full", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mt-4 text-lg", children: [
+        "Description",
+        /* @__PURE__ */ jsx("hr", { className: "my-2 border-[0.1px] border-gray-400" }),
+        gqlMeta.guards.some((guard) => guard !== "None") ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pb-3 pl-3 text-base font-normal", children: [
+          "- Guards:",
+          gqlMeta.guards.map((guard) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `badge ${guard === "Public" ? "badge-success" : guard === "SuperAdmin" ? "badge-error" : guard === "Admin" ? "badge-error" : guard === "User" ? "badge-accent" : guard === "Owner" ? "badge-accent" : guard === "Every" ? "badge-warning" : ""}`,
+              children: guard
+            },
+            guard
+          ))
+        ] }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "pb-3 pl-3 text-base font-normal", children: [
+          "- ",
+          l.apidesc(sigMeta.refName, gqlMeta.key)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "my-4 flex w-full gap-5 px-5", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => {
+              setViewStatus("doc");
+            },
+            className: `btn btn-success w-1/2 ${viewStatus === "doc" ? "" : "btn-outline"}`,
+            children: [
+              /* @__PURE__ */ jsx(AiOutlineFileWord, { className: "text-xl" }),
+              " View Doc"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => {
+              setViewStatus("test");
+            },
+            className: `btn btn-primary w-1/2 ${viewStatus === "test" ? "" : "btn-outline"}`,
+            children: [
+              /* @__PURE__ */ jsx(BiSolidNetworkChart, { className: "text-xl" }),
+              " Message"
+            ]
+          }
+        )
+      ] }),
+      viewStatus === "doc" ? /* @__PURE__ */ jsx(
+        MessageInterface,
+        {
+          sigRef,
+          gqlMeta,
+          gqlArgMetas,
+          uploadArgMetas
+        }
+      ) : /* @__PURE__ */ jsx(MessageTry, { sigRef, gqlMeta, gqlArgMetas, uploadArgMetas })
+    ] })
+  ] });
 };
 Message.Endpoint = MessageEndpoint;
 const MessageInterface = ({ sigRef, gqlMeta, gqlArgMetas, uploadArgMetas }) => {
   const sigMeta = getSigMeta(sigRef);
   const [returnRef, arrDepth] = getNonArrayModel(gqlMeta.returns());
   const isReturnModelType = !isGqlScalar(returnRef);
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4" }, uploadArgMetas.length ? /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-lg" }, "Form data upload"), /* @__PURE__ */ React.createElement("div", { className: "bg-base-100 overflow-x-auto rounded-md p-3" }, /* @__PURE__ */ React.createElement(Arg.Table, { sigMeta, gqlMeta, argMetas: uploadArgMetas }))) : null, gqlArgMetas.length ? /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-lg" }, "Variables"), /* @__PURE__ */ React.createElement("div", { className: "bg-base-100 overflow-x-auto rounded-md p-3" }, /* @__PURE__ */ React.createElement(Arg.Table, { sigMeta, gqlMeta, argMetas: gqlArgMetas }))) : null, /* @__PURE__ */ React.createElement("div", { className: "text-lg font-bold" }, /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col gap-2 rounded-md font-normal md:flex-row" }, /* @__PURE__ */ React.createElement("div", { className: "w-full md:w-1/2" }, "Response Type", /* @__PURE__ */ React.createElement("div", { className: "bg-base-100 max-h-[500px] overflow-auto rounded-md p-4 md:h-[500px]" }, "Returns: ", /* @__PURE__ */ React.createElement(Object.Type, { objRef: returnRef, arrDepth }), isReturnModelType ? /* @__PURE__ */ React.createElement(Object.Detail, { objRef: returnRef }) : null)), /* @__PURE__ */ React.createElement("div", { className: "w-full md:w-1/2" }, "Response Example", /* @__PURE__ */ React.createElement(Response.Example, { sigRef, gqlMeta })))));
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    uploadArgMetas.length ? /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "text-lg", children: "Form data upload" }),
+      /* @__PURE__ */ jsx("div", { className: "bg-base-100 overflow-x-auto rounded-md p-3", children: /* @__PURE__ */ jsx(Arg.Table, { sigMeta, gqlMeta, argMetas: uploadArgMetas }) })
+    ] }) : null,
+    gqlArgMetas.length ? /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "text-lg", children: "Variables" }),
+      /* @__PURE__ */ jsx("div", { className: "bg-base-100 overflow-x-auto rounded-md p-3", children: /* @__PURE__ */ jsx(Arg.Table, { sigMeta, gqlMeta, argMetas: gqlArgMetas }) })
+    ] }) : null,
+    /* @__PURE__ */ jsx("div", { className: "text-lg font-bold", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-2 rounded-md font-normal md:flex-row", children: [
+      /* @__PURE__ */ jsxs("div", { className: "w-full md:w-1/2", children: [
+        "Response Type",
+        /* @__PURE__ */ jsxs("div", { className: "bg-base-100 max-h-[500px] overflow-auto rounded-md p-4 md:h-[500px]", children: [
+          "Returns: ",
+          /* @__PURE__ */ jsx(Object.Type, { objRef: returnRef, arrDepth }),
+          isReturnModelType ? /* @__PURE__ */ jsx(Object.Detail, { objRef: returnRef }) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "w-full md:w-1/2", children: [
+        "Response Example",
+        /* @__PURE__ */ jsx(Response.Example, { sigRef, gqlMeta })
+      ] })
+    ] }) })
+  ] });
 };
 Message.Interface = MessageInterface;
 const MessageTry = ({ sigRef, gqlMeta, gqlArgMetas, uploadArgMetas }) => {
@@ -113,47 +172,74 @@ ${data}` : typeof data === "object" ? [...prev && prev.length ? [...prev] : [],
       onStopListen();
     };
   }, [stopListen]);
-  return /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col gap-4" }, uploadArgMetas.length ? /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-lg" }, "Form data uplaod"), uploadArgMetas.map((argMeta) => /* @__PURE__ */ React.createElement(
-    Arg.FormData,
-    {
-      key: argMeta.name,
-      argMeta,
-      value: uploadRequest[argMeta.name],
-      onChange: (fileList) => {
-        setUploadRequest({ ...uploadRequest, [argMeta.name]: fileList });
-      }
-    }
-  ))) : null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "grid gap-2 lg:grid-cols-2" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-lg" }, "Variables"), /* @__PURE__ */ React.createElement("div", { className: "w-full items-center justify-center" }, /* @__PURE__ */ React.createElement(
-    Arg.Json,
-    {
-      value: gqlRequest,
-      onChange: (value) => {
-        setGqlRequest(value);
-      }
-    }
-  )))), /* @__PURE__ */ React.createElement("div", { className: "relative flex items-start justify-center gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col gap-2" }, /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      disabled: !!stopListen,
-      className: "btn btn-success w-full",
-      onClick: () => {
-        onListen();
-      }
-    },
-    /* @__PURE__ */ React.createElement(AiOutlineSwap, { className: "" }),
-    " Listen Message"
-  ), /* @__PURE__ */ React.createElement("button", { disabled: !stopListen, className: "btn btn-info w-full", onClick: () => void onSend() }, /* @__PURE__ */ React.createElement(AiOutlineSend, { className: "" }), " Send Message"), /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      disabled: !stopListen,
-      className: "btn btn-error w-full",
-      onClick: () => {
-        onStopListen();
-      }
-    },
-    /* @__PURE__ */ React.createElement(AiOutlineDisconnect, { className: "" }),
-    " Stop Listen Message"
-  )))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-lg" }, "Response"), /* @__PURE__ */ React.createElement(Listener.Result, { status: response.status, data: messages })));
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-4", children: [
+    uploadArgMetas.length ? /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "text-lg", children: "Form data uplaod" }),
+      uploadArgMetas.map((argMeta) => /* @__PURE__ */ jsx(
+        Arg.FormData,
+        {
+          argMeta,
+          value: uploadRequest[argMeta.name],
+          onChange: (fileList) => {
+            setUploadRequest({ ...uploadRequest, [argMeta.name]: fileList });
+          }
+        },
+        argMeta.name
+      ))
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "grid gap-2 lg:grid-cols-2", children: /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "text-lg", children: "Variables" }),
+        /* @__PURE__ */ jsx("div", { className: "w-full items-center justify-center", children: /* @__PURE__ */ jsx(
+          Arg.Json,
+          {
+            value: gqlRequest,
+            onChange: (value) => {
+              setGqlRequest(value);
+            }
+          }
+        ) })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "relative flex items-start justify-center gap-2", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-2", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            disabled: !!stopListen,
+            className: "btn btn-success w-full",
+            onClick: () => {
+              onListen();
+            },
+            children: [
+              /* @__PURE__ */ jsx(AiOutlineSwap, { className: "" }),
+              " Listen Message"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("button", { disabled: !stopListen, className: "btn btn-info w-full", onClick: () => void onSend(), children: [
+          /* @__PURE__ */ jsx(AiOutlineSend, { className: "" }),
+          " Send Message"
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            disabled: !stopListen,
+            className: "btn btn-error w-full",
+            onClick: () => {
+              onStopListen();
+            },
+            children: [
+              /* @__PURE__ */ jsx(AiOutlineDisconnect, { className: "" }),
+              " Stop Listen Message"
+            ]
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "text-lg", children: "Response" }),
+      /* @__PURE__ */ jsx(Listener.Result, { status: response.status, data: messages })
+    ] })
+  ] });
 };
 Message.Try = MessageTry;
 export {