@akanjs/ui 0.0.151 → 0.0.152

package/cjs/Signal/Doc.js

@@ -31,6 +31,7 @@ __export(Doc_exports, {
   default: () => Doc
 });
 module.exports = __toCommonJS(Doc_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_common = require("@akanjs/common");
 var import_next = require("@akanjs/next");
 var import_signal = require("@akanjs/signal");
@@ -46,7 +47,7 @@ var import_GraphQL = __toESM(require("./GraphQL"));
 var import_RestApi = __toESM(require("./RestApi"));
 var import_WebSocket = __toESM(require("./WebSocket"));
 function Doc() {
-  return /* @__PURE__ */ React.createElement("div", null);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {});
 }
 const DocSetting = () => {
   const trySignalType = import_store.st.use.trySignalType();
@@ -54,56 +55,87 @@ const DocSetting = () => {
   const tryAccount = import_store.st.use.tryAccount();
   const tryRoleForAll = import_signal.roleTypes.every((roleType) => tryRoles.includes(roleType));
   const baseUrl = trySignalType === "graphql" ? import_signal.client.uri : import_signal.client.uri.replace("/graphql", "");
-  return /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-wrap items-center justify-between gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-1 items-center gap-1" }, "BaseURL:", " ", /* @__PURE__ */ React.createElement(import_Copy.Copy, { text: baseUrl }, /* @__PURE__ */ React.createElement("button", { className: "btn btn-outline btn-sm" }, baseUrl, /* @__PURE__ */ React.createElement(import_ai.AiOutlineCopy, null)))), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1" }, "Mode:", /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      className: `btn btn-sm ${trySignalType === "graphql" ? "border-[#E535AB] bg-[#E535AB] text-white" : "btn-outline"}`,
-      onClick: () => {
-        import_store.st.do.setTrySignalType("graphql");
-      }
-    },
-    /* @__PURE__ */ React.createElement(import_bi.BiLogoGraphql, null),
-    "GraphQL"
-  ), /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      className: `btn btn-primary btn-sm ${trySignalType === "restapi" ? "" : "btn-outline"}`,
-      onClick: () => {
-        import_store.st.do.setTrySignalType("restapi");
-      }
-    },
-    /* @__PURE__ */ React.createElement(import_ai.AiOutlineApi, null),
-    "Rest API"
-  )), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-0.5" }, "For:", /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      className: `btn btn-secondary btn-sm ${tryRoleForAll ? "" : "btn-outline"}`,
-      onClick: () => {
-        if (!tryRoleForAll)
-          import_store.st.do.setTryRoles([...import_signal.roleTypes]);
-      }
-    },
-    "All"
-  ), import_signal.roleTypes.map((roleType) => /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      key: roleType,
-      className: `btn btn-secondary btn-sm ${!tryRoleForAll && tryRoles.includes(roleType) ? "" : "btn-outline"}`,
-      onClick: () => {
-        if (tryRoleForAll)
-          import_store.st.do.setTryRoles([roleType]);
-        else if (!tryRoles.includes(roleType))
-          import_store.st.do.setTryRoles([...tryRoles, roleType]);
-        else if (tryRoles.length !== 1)
-          import_store.st.do.setTryRoles(tryRoles.filter((t) => t !== roleType));
-      }
-    },
-    roleType
-  ))), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1" }, "Auth:", /* @__PURE__ */ React.createElement(DocAuthModal, null, /* @__PURE__ */ React.createElement("button", { className: `btn btn-sm ${!tryAccount.me && !tryAccount.self ? "btn-neutral" : "btn-warning"} ` }, /* @__PURE__ */ React.createElement(import_bi.BiLock, null), " ", [
-    tryAccount.me ? "Admin" : null,
-    tryAccount.self ? "User" : null,
-    !tryAccount.me && !tryAccount.self ? "Public" : null
-  ].filter((roleType) => !!roleType).join(",")))));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex w-full flex-wrap items-center justify-between gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-1 items-center gap-1", children: [
+      "BaseURL:",
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Copy.Copy, { text: baseUrl, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { className: "btn btn-outline btn-sm", children: [
+        baseUrl,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlineCopy, {})
+      ] }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1", children: [
+      "Mode:",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "button",
+        {
+          className: `btn btn-sm ${trySignalType === "graphql" ? "border-[#E535AB] bg-[#E535AB] text-white" : "btn-outline"}`,
+          onClick: () => {
+            import_store.st.do.setTrySignalType("graphql");
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_bi.BiLogoGraphql, {}),
+            "GraphQL"
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "button",
+        {
+          className: `btn btn-primary btn-sm ${trySignalType === "restapi" ? "" : "btn-outline"}`,
+          onClick: () => {
+            import_store.st.do.setTrySignalType("restapi");
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlineApi, {}),
+            "Rest API"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-0.5", children: [
+      "For:",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          className: `btn btn-secondary btn-sm ${tryRoleForAll ? "" : "btn-outline"}`,
+          onClick: () => {
+            if (!tryRoleForAll)
+              import_store.st.do.setTryRoles([...import_signal.roleTypes]);
+          },
+          children: "All"
+        }
+      ),
+      import_signal.roleTypes.map((roleType) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          className: `btn btn-secondary btn-sm ${!tryRoleForAll && tryRoles.includes(roleType) ? "" : "btn-outline"}`,
+          onClick: () => {
+            if (tryRoleForAll)
+              import_store.st.do.setTryRoles([roleType]);
+            else if (!tryRoles.includes(roleType))
+              import_store.st.do.setTryRoles([...tryRoles, roleType]);
+            else if (tryRoles.length !== 1)
+              import_store.st.do.setTryRoles(tryRoles.filter((t) => t !== roleType));
+          },
+          children: roleType
+        },
+        roleType
+      ))
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1", children: [
+      "Auth:",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DocAuthModal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { className: `btn btn-sm ${!tryAccount.me && !tryAccount.self ? "btn-neutral" : "btn-warning"} `, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_bi.BiLock, {}),
+        " ",
+        [
+          tryAccount.me ? "Admin" : null,
+          tryAccount.self ? "User" : null,
+          !tryAccount.me && !tryAccount.self ? "Public" : null
+        ].filter((roleType) => !!roleType).join(",")
+      ] }) })
+    ] })
+  ] });
 };
 Doc.Setting = DocSetting;
 const DocAuthModal = ({ children }) => {
@@ -112,51 +144,81 @@ const DocAuthModal = ({ children }) => {
   const [modalOpen, setModalOpen] = (0, import_react.useState)(false);
   const decodedAccount = jwt ? (0, import_decode.default)(jwt) : null;
   const accountStr = JSON.stringify(decodedAccount ?? import_signal.defaultAccount, null, 2);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      onClick: () => {
-        setModalOpen(true);
-        setJwt(tryJwt);
-      }
-    },
-    children
-  ), /* @__PURE__ */ React.createElement(
-    import_Modal.Modal,
-    {
-      bodyClassName: "flex flex-col gap-4",
-      open: modalOpen,
-      onCancel: () => {
-        setModalOpen(false);
-      },
-      title: "Set JWT for Authorization",
-      action: /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          className: "btn btn-primary w-full",
-          onClick: () => {
-            import_store.st.set(
-              decodedAccount ? { tryJwt: jwt, tryAccount: decodedAccount } : { tryJwt: null, tryAccount: import_signal.defaultAccount }
-            );
-            setModalOpen(false);
-          }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        onClick: () => {
+          setModalOpen(true);
+          setJwt(tryJwt);
         },
-        /* @__PURE__ */ React.createElement(import_bi.BiLock, null),
-        " Set Authorization"
-      )
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "w-full" }, /* @__PURE__ */ React.createElement("div", null, "Current JWT"), /* @__PURE__ */ React.createElement(import_Input.Input, { inputClassName: "w-full", value: jwt ?? "", onChange: setJwt, validate: () => true })),
-    /* @__PURE__ */ React.createElement("div", { className: "w-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, "Account Decoded", !decodedAccount?.me && !decodedAccount?.self ? /* @__PURE__ */ React.createElement("div", { className: "badge badge-primary" }, "Public") : null, decodedAccount?.me?.roles.map((role) => /* @__PURE__ */ React.createElement("div", { key: role, className: "badge badge-warning" }, "Admin-", role)), decodedAccount?.self?.roles.map((role) => /* @__PURE__ */ React.createElement("div", { key: role, className: "badge badge-neutral" }, "User-", role))), /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement(
-      import_Input.Input.TextArea,
+        children
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_Modal.Modal,
       {
-        inputClassName: "w-full",
-        value: accountStr,
-        onChange: () => true,
-        validate: () => true,
-        rows: 10
+        bodyClassName: "flex flex-col gap-4",
+        open: modalOpen,
+        onCancel: () => {
+          setModalOpen(false);
+        },
+        title: "Set JWT for Authorization",
+        action: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            className: "btn btn-primary w-full",
+            onClick: () => {
+              import_store.st.set(
+                decodedAccount ? { tryJwt: jwt, tryAccount: decodedAccount } : { tryJwt: null, tryAccount: import_signal.defaultAccount }
+              );
+              setModalOpen(false);
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_bi.BiLock, {}),
+              " Set Authorization"
+            ]
+          }
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "Current JWT" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Input.Input, { inputClassName: "w-full", value: jwt ?? "", onChange: setJwt, validate: () => true })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+              "Account Decoded",
+              !decodedAccount?.me && !decodedAccount?.self ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "badge badge-primary", children: "Public" }) : null,
+              decodedAccount?.me?.roles.map((role) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "badge badge-warning", children: [
+                "Admin-",
+                role
+              ] }, role)),
+              decodedAccount?.self?.roles.map((role) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "badge badge-neutral", children: [
+                "User-",
+                role
+              ] }, role))
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_Input.Input.TextArea,
+                {
+                  inputClassName: "w-full",
+                  value: accountStr,
+                  onChange: () => true,
+                  validate: () => true,
+                  rows: 10
+                }
+              ),
+              decodedAccount ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute top-4 right-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Copy.Copy, { text: accountStr, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { className: "btn btn-sm", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlineCopy, {}),
+                " Copy"
+              ] }) }) }) : null
+            ] })
+          ] })
+        ]
       }
-    ), decodedAccount ? /* @__PURE__ */ React.createElement("div", { className: "absolute top-4 right-4" }, /* @__PURE__ */ React.createElement(import_Copy.Copy, { text: accountStr }, /* @__PURE__ */ React.createElement("button", { className: "btn btn-sm" }, /* @__PURE__ */ React.createElement(import_ai.AiOutlineCopy, null), " Copy"))) : null))
-  ));
+    )
+  ] });
 };
 Doc.AuthModal = DocAuthModal;
 const DocSignals = () => {
@@ -164,18 +226,33 @@ const DocSignals = () => {
   const refNames = [...new Set(sigRefs.map((sigRef) => (0, import_signal.getSigMeta)(sigRef).refName))].sort(
     (a, b) => (0, import_common.lowerlize)(a) > (0, import_common.lowerlize)(b) ? 1 : -1
   );
-  return /* @__PURE__ */ React.createElement("div", null, refNames.map((refName, idx) => {
-    return /* @__PURE__ */ React.createElement("div", { className: "px-5 pb-5 text-3xl font-bold", key: idx }, /* @__PURE__ */ React.createElement(DocSignal, { refName }));
-  }));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: refNames.map((refName, idx) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-5 pb-5 text-3xl font-bold", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DocSignal, { refName }) }, idx);
+  }) });
 };
 Doc.DocSignals = DocSignals;
 const DocSignal = ({ refName }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: "collapse-arrow bg-base-200 collapse" }, /* @__PURE__ */ React.createElement("input", { type: "checkbox" }), /* @__PURE__ */ React.createElement("div", { className: "collapse-title text-xl font-medium" }, refName), /* @__PURE__ */ React.createElement("div", { className: "collapse-content" }, /* @__PURE__ */ React.createElement(import_GraphQL.default.Endpoints, { refName })));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "collapse-arrow bg-base-200 collapse", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "checkbox" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "collapse-title text-xl font-medium", children: refName }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "collapse-content", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GraphQL.default.Endpoints, { refName }) })
+  ] });
 };
 Doc.DocSignal = DocSignal;
 const Zone = ({ refName, openAll }) => {
   const { l } = (0, import_next.usePage)();
   const trySingnalType = import_store.st.use.trySignalType();
-  return /* @__PURE__ */ React.createElement("div", { className: "flex break-after-page flex-col gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "text-3xl font-bold" }, refName), /* @__PURE__ */ React.createElement("div", { className: "mb-5" }, " - ", l.field(refName, "modelDesc")), /* @__PURE__ */ React.createElement("div", { className: "text-2xl font-bold" }, "APIs"), /* @__PURE__ */ React.createElement(DocSetting, null), trySingnalType === "graphql" ? /* @__PURE__ */ React.createElement(import_GraphQL.default.Endpoints, { refName, openAll }) : /* @__PURE__ */ React.createElement(import_RestApi.default.Endpoints, { refName, openAll }), /* @__PURE__ */ React.createElement("div", { className: "text-2xl font-bold" }, "Web Socket"), /* @__PURE__ */ React.createElement(import_WebSocket.default.Endpoints, { refName, openAll }));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex break-after-page flex-col gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-3xl font-bold", children: refName }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-5", children: [
+      " - ",
+      l.field(refName, "modelDesc")
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-2xl font-bold", children: "APIs" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DocSetting, {}),
+    trySingnalType === "graphql" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GraphQL.default.Endpoints, { refName, openAll }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_RestApi.default.Endpoints, { refName, openAll }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-2xl font-bold", children: "Web Socket" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_WebSocket.default.Endpoints, { refName, openAll })
+  ] });
 };
 Doc.Zone = Zone;

package/cjs/Signal/GraphQL.js

@@ -31,12 +31,13 @@ __export(GraphQL_exports, {
   default: () => GraphQL
 });
 module.exports = __toCommonJS(GraphQL_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_base = require("@akanjs/base");
 var import_constant = require("@akanjs/constant");
 var import_next = require("@akanjs/next");
 var import_signal = require("@akanjs/signal");
 var import_store = require("@akanjs/store");
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_ai = require("react-icons/ai");
 var import_bi = require("react-icons/bi");
 var import_Arg = __toESM(require("./Arg"));
@@ -44,7 +45,7 @@ var import_Object = __toESM(require("./Object"));
 var import_Request = __toESM(require("./Request"));
 var import_Response = __toESM(require("./Response"));
 function GraphQL() {
-  return /* @__PURE__ */ import_react.default.createElement("div", null);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {});
 }
 const GraphQLEndpoints = ({ refName, openAll }) => {
   const sigRefs = (0, import_signal.getSignalRefsOnStorage)(refName);
@@ -65,7 +66,7 @@ const GraphQLEndpoints = ({ refName, openAll }) => {
       return true;
     return false;
   });
-  return /* @__PURE__ */ import_react.default.createElement("div", null, gqlInfos.map(({ gqlMeta, sigRef }, idx) => /* @__PURE__ */ import_react.default.createElement(GraphQLEndpoint, { key: idx, sigRef, gqlMeta, open: openAll })));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: gqlInfos.map(({ gqlMeta, sigRef }, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GraphQLEndpoint, { sigRef, gqlMeta, open: openAll }, idx)) });
 };
 GraphQL.Endpoints = GraphQLEndpoints;
 const GraphQLEndpoint = ({ sigRef, gqlMeta, open }) => {
@@ -75,49 +76,107 @@ const GraphQLEndpoint = ({ sigRef, gqlMeta, open }) => {
   const [argMetas] = (0, import_signal.getArgMetas)(sigRef, gqlMeta.key);
   const gqlArgMetas = argMetas.filter((argMeta) => argMeta.type !== "Upload");
   const uploadArgMetas = argMetas.filter((argMeta) => argMeta.type === "Upload");
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "collapse-arrow bg-base-300 collapse my-1" }, /* @__PURE__ */ import_react.default.createElement("input", { type: "checkbox", checked: open }), /* @__PURE__ */ import_react.default.createElement("div", { className: "collapse-title text-xl" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react.default.createElement("div", { className: `btn btn-xs w-16 ${gqlMeta.type === "Query" ? "btn-success" : "btn-accent"}` }, gqlMeta.type), gqlMeta.key, " ", /* @__PURE__ */ import_react.default.createElement("span", { className: "text-sm" }, "(", l.api(sigMeta.refName, gqlMeta.key), ")"))), /* @__PURE__ */ import_react.default.createElement("div", { className: "collapse-content bg-base-200 w-full" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-4 text-lg" }, "Description", /* @__PURE__ */ import_react.default.createElement("hr", { className: "my-2 border-[0.1px] border-gray-400" }), gqlMeta.guards.some((guard) => guard !== "None") ? /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center gap-2 pb-3 pl-3 text-base font-normal" }, "- Guards:", gqlMeta.guards.map((guard) => /* @__PURE__ */ import_react.default.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__ */ import_react.default.createElement("div", { className: "pb-3 pl-3 text-base font-normal" }, "- ", l.apidesc(sigMeta.refName, gqlMeta.key))), /* @__PURE__ */ import_react.default.createElement("div", { className: "my-4 flex w-full gap-5 px-5" }, /* @__PURE__ */ import_react.default.createElement(
-    "button",
-    {
-      onClick: () => {
-        setViewStatus("doc");
-      },
-      className: `btn btn-success w-1/2 ${viewStatus === "doc" ? "" : "btn-outline"}`
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_ai.AiOutlineFileWord, { className: "text-xl" }),
-    " View Doc"
-  ), /* @__PURE__ */ import_react.default.createElement(
-    "button",
-    {
-      onClick: () => {
-        setViewStatus("test");
-      },
-      className: `btn btn-primary w-1/2 ${viewStatus === "test" ? "" : "btn-outline"}`
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_bi.BiLogoGraphql, { className: "text-xl" }),
-    " GraphQL"
-  )), viewStatus === "doc" ? /* @__PURE__ */ import_react.default.createElement(
-    GraphQLInterface,
-    {
-      sigRef,
-      gqlMeta,
-      gqlArgMetas,
-      uploadArgMetas
-    }
-  ) : /* @__PURE__ */ import_react.default.createElement(GraphQLTry, { sigRef, gqlMeta, gqlArgMetas, uploadArgMetas })));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "collapse-arrow bg-base-300 collapse my-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "checkbox", checked: open }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "collapse-title text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `btn btn-xs w-16 ${gqlMeta.type === "Query" ? "btn-success" : "btn-accent"}`, children: gqlMeta.type }),
+      gqlMeta.key,
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-sm", children: [
+        "(",
+        l.api(sigMeta.refName, gqlMeta.key),
+        ")"
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "collapse-content bg-base-200 w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-4 text-lg", children: [
+        "Description",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { className: "my-2 border-[0.1px] border-gray-400" }),
+        gqlMeta.guards.some((guard) => guard !== "None") ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 pb-3 pl-3 text-base font-normal", children: [
+          "- Guards:",
+          gqlMeta.guards.map((guard) => /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pb-3 pl-3 text-base font-normal", children: [
+          "- ",
+          l.apidesc(sigMeta.refName, gqlMeta.key)
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "my-4 flex w-full gap-5 px-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            onClick: () => {
+              setViewStatus("doc");
+            },
+            className: `btn btn-success w-1/2 ${viewStatus === "doc" ? "" : "btn-outline"}`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlineFileWord, { className: "text-xl" }),
+              " View Doc"
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            onClick: () => {
+              setViewStatus("test");
+            },
+            className: `btn btn-primary w-1/2 ${viewStatus === "test" ? "" : "btn-outline"}`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_bi.BiLogoGraphql, { className: "text-xl" }),
+              " GraphQL"
+            ]
+          }
+        )
+      ] }),
+      viewStatus === "doc" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        GraphQLInterface,
+        {
+          sigRef,
+          gqlMeta,
+          gqlArgMetas,
+          uploadArgMetas
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GraphQLTry, { sigRef, gqlMeta, gqlArgMetas, uploadArgMetas })
+    ] })
+  ] });
 };
 GraphQL.Endpoint = GraphQLEndpoint;
 const GraphQLInterface = ({ sigRef, gqlMeta, gqlArgMetas, uploadArgMetas }) => {
   const sigMeta = (0, import_signal.getSigMeta)(sigRef);
   const [returnRef, arrDepth] = (0, import_base.getNonArrayModel)(gqlMeta.returns());
   const isReturnModelType = !(0, import_base.isGqlScalar)(returnRef);
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "flex flex-col gap-4" }, uploadArgMetas.length ? /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-lg" }, "Form data upload"), /* @__PURE__ */ import_react.default.createElement("div", { className: "bg-base-100 overflow-x-auto rounded-md p-3" }, /* @__PURE__ */ import_react.default.createElement(import_Arg.default.Table, { sigMeta, gqlMeta, argMetas: uploadArgMetas }))) : null, gqlArgMetas.length ? /* @__PURE__ */ import_react.default.createElement("div", { className: "text-start" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "text-start text-xl font-bold" }, "Variables"), /* @__PURE__ */ import_react.default.createElement("div", { className: "bg-base-100 mt-3 overflow-x-auto rounded-md p-3" }, /* @__PURE__ */ import_react.default.createElement(import_Arg.default.Table, { sigMeta, gqlMeta, argMetas: gqlArgMetas }))) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-lg font-bold" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex w-full flex-col gap-2 rounded-md font-normal md:flex-col" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "w-full text-start md:w-full" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "text-xl font-bold" }, "Response Type"), /* @__PURE__ */ import_react.default.createElement("div", { className: "bg-base-100 mt-3 max-h-[500px] overflow-auto rounded-md p-4 md:h-[500px]" }, "Returns: ", /* @__PURE__ */ import_react.default.createElement(import_Object.default.Type, { objRef: returnRef, arrDepth }), isReturnModelType ? /* @__PURE__ */ import_react.default.createElement(import_Object.default.Detail, { objRef: returnRef }) : null)), /* @__PURE__ */ import_react.default.createElement("div", { className: "w-full text-start md:w-full" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "text-xl font-bold" }, "Response Example"), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-3" }, /* @__PURE__ */ import_react.default.createElement(import_Response.default.Example, { sigRef, gqlMeta }))))));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-4", children: [
+    uploadArgMetas.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg", children: "Form data upload" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-base-100 overflow-x-auto rounded-md p-3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Arg.default.Table, { sigMeta, gqlMeta, argMetas: uploadArgMetas }) })
+    ] }) : null,
+    gqlArgMetas.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-start text-xl font-bold", children: "Variables" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-base-100 mt-3 overflow-x-auto rounded-md p-3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Arg.default.Table, { sigMeta, gqlMeta, argMetas: gqlArgMetas }) })
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg font-bold", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex w-full flex-col gap-2 rounded-md font-normal md:flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "w-full text-start md:w-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xl font-bold", children: "Response Type" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bg-base-100 mt-3 max-h-[500px] overflow-auto rounded-md p-4 md:h-[500px]", children: [
+          "Returns: ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Object.default.Type, { objRef: returnRef, arrDepth }),
+          isReturnModelType ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Object.default.Detail, { objRef: returnRef }) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "w-full text-start md:w-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xl font-bold", children: "Response Example" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Response.default.Example, { sigRef, gqlMeta }) })
+      ] })
+    ] }) })
+  ] });
 };
 GraphQL.Interface = GraphQLInterface;
 const GraphQLTry = ({ sigRef, gqlMeta, gqlArgMetas, uploadArgMetas }) => {
@@ -154,24 +213,49 @@ const GraphQLTry = ({ sigRef, gqlMeta, gqlArgMetas, uploadArgMetas }) => {
     });
     setResponse({ status: "success", data });
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "flex w-full flex-col gap-4" }, uploadArgMetas.length ? /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-lg" }, "Form data uplaod"), uploadArgMetas.map((argMeta) => /* @__PURE__ */ import_react.default.createElement(
-    import_Arg.default.FormData,
-    {
-      key: argMeta.name,
-      argMeta,
-      value: uploadRequest[argMeta.name],
-      onChange: (fileList) => {
-        setUploadRequest({ ...uploadRequest, [argMeta.name]: fileList });
-      }
-    }
-  ))) : null, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "grid gap-2 lg:grid-cols-2" }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-lg" }, "Variables"), /* @__PURE__ */ import_react.default.createElement("div", { className: "w-full items-center justify-center" }, /* @__PURE__ */ import_react.default.createElement(
-    import_Arg.default.Json,
-    {
-      value: gqlRequest,
-      onChange: (value) => {
-        setGqlRequest(value);
-      }
-    }
-  ))), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-lg" }, "Graphql String"), /* @__PURE__ */ import_react.default.createElement("div", { className: "w-full items-center justify-center" }, /* @__PURE__ */ import_react.default.createElement(import_Request.default.Example, { value: gqlStr })))), /* @__PURE__ */ import_react.default.createElement("button", { className: "btn bg-success w-full", onClick: () => void onSend() }, /* @__PURE__ */ import_react.default.createElement(import_ai.AiOutlineSend, { className: "-mt-0.5" }), " Send Request")), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-lg" }, "Response"), /* @__PURE__ */ import_react.default.createElement(import_Response.default.Result, { status: response.status, data: response.data })));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex w-full flex-col gap-4", children: [
+    uploadArgMetas.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg", children: "Form data uplaod" }),
+      uploadArgMetas.map((argMeta) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Arg.default.FormData,
+        {
+          argMeta,
+          value: uploadRequest[argMeta.name],
+          onChange: (fileList) => {
+            setUploadRequest({ ...uploadRequest, [argMeta.name]: fileList });
+          }
+        },
+        argMeta.name
+      ))
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid gap-2 lg:grid-cols-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg", children: "Variables" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_Arg.default.Json,
+            {
+              value: gqlRequest,
+              onChange: (value) => {
+                setGqlRequest(value);
+              }
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg", children: "Graphql String" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Request.default.Example, { value: gqlStr }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { className: "btn bg-success w-full", onClick: () => void onSend(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlineSend, { className: "-mt-0.5" }),
+        " Send Request"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg", children: "Response" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Response.default.Result, { status: response.status, data: response.data })
+    ] })
+  ] });
 };
 GraphQL.Try = GraphQLTry;