@akanjs/ui 0.9.55 → 0.9.57

package/esm/Model/ViewEditModal.js

@@ -4,7 +4,7 @@ import { usePage } from "@akanjs/client";
 import { capitalize } from "@akanjs/common";
 import { st } from "@akanjs/store";
 import { AiOutlineEdit, AiOutlineSave } from "react-icons/ai";
-import { BiDotsVertical } from "react-icons/bi";
+import { BiDotsVertical, BiTrash } from "react-icons/bi";
 import { Modal } from "../Modal";
 import Remove from "./Remove";
 import View from "./View";
@@ -62,7 +62,20 @@ function ViewEditModal({
         /* @__PURE__ */ jsx(Title, {}),
         /* @__PURE__ */ jsxs("div", { className: "dropdown dropdown-end", children: [
           /* @__PURE__ */ jsx("label", { tabIndex: 0, className: "btn btn-square m-1", children: /* @__PURE__ */ jsx(BiDotsVertical, {}) }),
-          /* @__PURE__ */ jsx("ul", { tabIndex: 0, className: "dropdown-content menu bg-base-100 rounded-box z-[1] p-2 shadow-sm", children: model ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Remove, { sliceName, modelId: model.id, modal: null }) }) : null })
+          /* @__PURE__ */ jsx("ul", { tabIndex: 0, className: "dropdown-content menu bg-base-100 rounded-box z-[1] p-2 shadow-sm", children: model ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { children: /* @__PURE__ */ jsxs(
+            Remove,
+            {
+              className: "text-error flex items-center gap-2",
+              sliceName,
+              modelId: model.id,
+              modal: null,
+              children: [
+                /* @__PURE__ */ jsx(BiTrash, {}),
+                " ",
+                l("base.remove")
+              ]
+            }
+          ) }) }) : null })
         ] })
       ] }),
       action: modelModal === "view" ? /* @__PURE__ */ jsxs(

package/esm/Select.js

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Enum } from "@akanjs/base";
+import { isEnum } from "@akanjs/base";
 import { clsx, usePage } from "@akanjs/client";
 import { useDebounce } from "@akanjs/next";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -31,7 +31,7 @@ const Select = ({
   const { l } = usePage();
   const [isOpen, setIsOpen] = useState(false);
   const labeledOptions = useMemo(
-    () => options instanceof Enum ? options.values.map((v) => ({
+    () => isEnum(options) ? options.values.map((v) => ({
       label: typeof v === "string" ? v : typeof v === "object" ? JSON.stringify(v) : String(v),
       value: v
     })) : options[0]?.label && options[0]?.value ? options : options.map((v) => ({ label: v, value: v })),

package/esm/Signal/Arg.js

@@ -1,8 +1,8 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { getNonArrayModel, isGqlScalar } from "@akanjs/base";
+import { isGqlScalar } from "@akanjs/base";
 import { usePage } from "@akanjs/client";
-import { getGqlTypeStr, getScalarExample } from "@akanjs/constant";
+import { constantInfo, getGqlTypeStr, getScalarExample } from "@akanjs/constant";
 import { st } from "@akanjs/store";
 import { AiOutlineDelete } from "react-icons/ai";
 import { DatePicker } from "../DatePicker";
@@ -11,7 +11,7 @@ import Object from "./Object";
 function Arg({ argType, value, onChange }) {
   return argType === "ID" ? /* @__PURE__ */ jsx(Arg.ID, { value, onChange }) : argType === "Int" ? /* @__PURE__ */ jsx(Arg.Int, { value, onChange }) : argType === "Float" ? /* @__PURE__ */ jsx(Arg.Float, { value, onChange }) : argType === "String" ? /* @__PURE__ */ jsx(Arg.String, { value, onChange }) : argType === "Boolean" ? /* @__PURE__ */ jsx(Arg.Boolean, { value, onChange }) : argType === "Date" ? /* @__PURE__ */ jsx(Arg.Date, { value, onChange }) : argType === "JSON" ? /* @__PURE__ */ jsx(Arg.Json, { value, onChange }) : argType === "Upload" ? /* @__PURE__ */ jsx(Arg.Upload, { value, onChange }) : /* @__PURE__ */ jsx(Fragment, {});
 }
-const ArgTable = ({ sigMeta, gqlMeta, argMetas }) => {
+const ArgTable = ({ refName, gqlKey, argMetas }) => {
   const { l } = usePage();
   const onCopy = (text) => {
     void navigator.clipboard.writeText(text);
@@ -26,14 +26,14 @@ const ArgTable = ({ sigMeta, gqlMeta, argMetas }) => {
       /* @__PURE__ */ jsx("th", { className: "text-center", children: "Description" })
     ] }) }),
     argMetas.map((argMeta, idx) => {
-      const [argRef, argArrDepth] = getNonArrayModel(argMeta.returns());
+      const argRef = constantInfo.getModelRef(argMeta.refName, argMeta.modelType);
       return /* @__PURE__ */ jsx("tbody", { className: "font-normal", children: /* @__PURE__ */ jsxs("tr", { children: [
         /* @__PURE__ */ jsx("td", { children: argMeta.name }),
-        /* @__PURE__ */ jsx("td", { className: "text-center", children: /* @__PURE__ */ jsx(Object.Type, { objRef: argRef, arrDepth: argArrDepth }) }),
+        /* @__PURE__ */ jsx("td", { className: "text-center", children: /* @__PURE__ */ jsx(Object.Type, { objRef: argRef, arrDepth: argMeta.arrDepth }) }),
         /* @__PURE__ */ jsx("td", { width: argMeta.argsOption.enum ? "20%" : "10%", className: "text-center", children: argMeta.argsOption.enum ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: argMeta.argsOption.enum.map((opt, idx2) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
           "button",
           {
-            "data-tip": l.enum(sigMeta.refName, argMeta.name, opt),
+            "data-tip": l._(`${argMeta.argsOption.enum?.refName}.${opt}`),
             onClick: () => {
               onCopy(opt);
             },
@@ -42,19 +42,19 @@ const ArgTable = ({ sigMeta, gqlMeta, argMetas }) => {
           },
           idx2
         ) }, idx2)) }) : "-" }),
-        /* @__PURE__ */ jsx("td", { className: "text-center", children: l.arg(sigMeta.refName, gqlMeta.key, argMeta.name) }),
-        /* @__PURE__ */ jsx("td", { className: "text-center", children: l.argdesc(sigMeta.refName, gqlMeta.key, argMeta.name) })
+        /* @__PURE__ */ jsx("td", { className: "text-center", children: l._(`${refName}.signal.${gqlKey}.arg.${argMeta.name}`) }),
+        /* @__PURE__ */ jsx("td", { className: "text-center", children: l._(`${refName}.signal.${gqlKey}.arg.${argMeta.name}.desc`) })
       ] }) }, idx);
     })
   ] });
 };
 Arg.Table = ArgTable;
-const ArgParam = ({ argMeta, value, onChange }) => {
-  const [argRef, argArrDepth] = getNonArrayModel(argMeta.returns());
+const ArgParam = ({ gqlKey, argMeta, value, onChange }) => {
+  const argRef = constantInfo.getModelRef(argMeta.refName, argMeta.modelType);
   if (!isGqlScalar(argRef))
-    throw new Error(`Param arg - ${argMeta.key}/${argMeta.name} must be scalar`);
-  else if (argArrDepth > 0)
-    throw new Error(`Param arg - ${argMeta.key}/${argMeta.name} must not be array`);
+    throw new Error(`Param arg - ${gqlKey}/${argMeta.name} must be scalar`);
+  else if (argMeta.arrDepth > 0)
+    throw new Error(`Param arg - ${gqlKey}/${argMeta.name} must not be array`);
   const argType = getGqlTypeStr(argRef);
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "w-36 pl-2", children: [
@@ -65,19 +65,19 @@ const ArgParam = ({ argMeta, value, onChange }) => {
   ] });
 };
 Arg.Param = ArgParam;
-const ArgQuery = ({ argMeta, value, onChange }) => {
-  const [argRef, argArrDepth] = getNonArrayModel(argMeta.returns());
+const ArgQuery = ({ gqlKey, argMeta, value, onChange }) => {
+  const argRef = constantInfo.getModelRef(argMeta.refName, argMeta.modelType);
   if (!isGqlScalar(argRef))
-    throw new Error(`Query arg - ${argMeta.key}/${argMeta.name} must be scalar`);
-  else if (argArrDepth > 1)
-    throw new Error(`Query arg - ${argMeta.key}/${argMeta.name} must not be more than 2D array`);
+    throw new Error(`Query arg - ${gqlKey}/${argMeta.name} must be scalar`);
+  else if (argMeta.arrDepth > 1)
+    throw new Error(`Query arg - ${gqlKey}/${argMeta.name} must not be more than 2D array`);
   const argType = getGqlTypeStr(argRef);
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "w-36 pl-2", children: [
       "- ",
       argMeta.name
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "w-full", children: argArrDepth && Array.isArray(value) ? /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: "w-full", children: argMeta.arrDepth > 0 && Array.isArray(value) ? /* @__PURE__ */ jsxs("div", { children: [
       value.map((val, idx) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx(
           Arg,
@@ -114,12 +114,12 @@ const ArgQuery = ({ argMeta, value, onChange }) => {
   ] });
 };
 Arg.Query = ArgQuery;
-const ArgFormData = ({ argMeta, value, onChange }) => {
-  const [argRef, argArrDepth] = getNonArrayModel(argMeta.returns());
+const ArgFormData = ({ gqlKey, argMeta, value, onChange }) => {
+  const argRef = constantInfo.getModelRef(argMeta.refName, argMeta.modelType);
   if (getGqlTypeStr(argRef) !== "Upload")
-    throw new Error(`FormData arg - ${argMeta.key}/${argMeta.name} must be Upload`);
-  else if (argArrDepth < 1)
-    throw new Error(`FormData arg - ${argMeta.key}/${argMeta.name} must be array`);
+    throw new Error(`FormData arg - ${gqlKey}/${argMeta.name} must be Upload`);
+  else if (argMeta.arrDepth < 1)
+    throw new Error(`FormData arg - ${gqlKey}/${argMeta.name} must be array`);
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "w-36 pl-2", children: [
       "- ",

package/esm/Signal/Doc.js

@@ -2,10 +2,10 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { usePage } from "@akanjs/client";
 import { lowerlize } from "@akanjs/common";
-import { client, defaultAccount, getAllSignalRefs, getSigMeta, roleTypes } from "@akanjs/signal";
+import { client, defaultAccount } from "@akanjs/signal";
 import { st } from "@akanjs/store";
 import decode from "jsonwebtoken/decode";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { AiOutlineApi, AiOutlineCopy } from "react-icons/ai";
 import { BiLock, BiLogoGraphql } from "react-icons/bi";
 import { Copy } from "../Copy";
@@ -17,12 +17,20 @@ import WebSocket from "./WebSocket";
 function Doc() {
   return /* @__PURE__ */ jsx("div", {});
 }
-const DocSetting = () => {
+const DocSetting = ({
+  guardNames = ["Public"],
+  roleTypes = ["Public", "User", "Admin", "SuperAdmin"],
+  roleKeys = { me: "Admin", self: "User" }
+}) => {
   const trySignalType = st.use.trySignalType();
   const tryRoles = st.use.tryRoles();
   const tryAccount = st.use.tryAccount();
+  useEffect(() => {
+    st.set({ tryRoles: [...roleTypes] });
+  }, []);
   const tryRoleForAll = roleTypes.every((roleType) => tryRoles.includes(roleType));
   const baseUrl = trySignalType === "graphql" ? client.uri : client.uri.replace("/graphql", "");
+  const currentRoles = Object.entries(roleKeys).filter(([key, roleType]) => !!tryAccount[key]).map(([key, roleType]) => roleType);
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-wrap items-center justify-between gap-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-1", children: [
       "BaseURL:",
@@ -93,14 +101,10 @@ const DocSetting = () => {
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
       "Auth:",
-      /* @__PURE__ */ jsx(DocAuthModal, { children: /* @__PURE__ */ jsxs("button", { className: `btn btn-sm ${!tryAccount.me && !tryAccount.self ? "btn-neutral" : "btn-warning"} `, children: [
+      /* @__PURE__ */ jsx(DocAuthModal, { children: /* @__PURE__ */ jsxs("button", { className: `btn btn-sm ${currentRoles.length > 0 ? "btn-warning" : "btn-neutral"} `, children: [
         /* @__PURE__ */ jsx(BiLock, {}),
         " ",
-        [
-          tryAccount.me ? "Admin" : null,
-          tryAccount.self ? "User" : null,
-          !tryAccount.me && !tryAccount.self ? "Public" : null
-        ].filter((roleType) => !!roleType).join(",")
+        currentRoles.length > 0 ? currentRoles.join(", ") : "Public"
       ] }) })
     ] })
   ] });
@@ -154,18 +158,7 @@ const DocAuthModal = ({ children }) => {
             /* @__PURE__ */ jsx(Input, { inputClassName: "w-full", value: jwt ?? "", onChange: setJwt, validate: () => true })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              "Account Decoded",
-              !decodedAccount?.me && !decodedAccount?.self ? /* @__PURE__ */ jsx("div", { className: "badge badge-primary", children: "Public" }) : null,
-              decodedAccount?.me?.roles.map((role) => /* @__PURE__ */ jsxs("div", { className: "badge badge-warning", children: [
-                "Admin-",
-                role
-              ] }, role)),
-              decodedAccount?.self?.roles.map((role) => /* @__PURE__ */ jsxs("div", { className: "badge badge-neutral", children: [
-                "User-",
-                role
-              ] }, role))
-            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: "Account Decoded" }),
             /* @__PURE__ */ jsxs("div", { className: "relative", children: [
               /* @__PURE__ */ jsx(
                 Input.TextArea,
@@ -190,10 +183,8 @@ const DocAuthModal = ({ children }) => {
 };
 Doc.AuthModal = DocAuthModal;
 const DocSignals = () => {
-  const sigRefs = getAllSignalRefs();
-  const refNames = [...new Set(sigRefs.map((sigRef) => getSigMeta(sigRef).refName))].sort(
-    (a, b) => lowerlize(a) > lowerlize(b) ? 1 : -1
-  );
+  const signals = global.signals;
+  const refNames = signals.map((signal) => signal.refName).sort((a, b) => lowerlize(a) > lowerlize(b) ? 1 : -1);
   return /* @__PURE__ */ jsx("div", { children: refNames.map((refName, idx) => {
     return /* @__PURE__ */ jsx("div", { className: "px-5 pb-5 text-3xl font-bold", children: /* @__PURE__ */ jsx(DocSignal, { refName }) }, idx);
   }) });
@@ -214,7 +205,7 @@ const Zone = ({ refName, openAll }) => {
     /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold", children: refName }),
     /* @__PURE__ */ jsxs("div", { className: "mb-5", children: [
       " - ",
-      l.field(refName, "modelDesc")
+      l._(`${refName}.modelDesc`)
     ] }),
     /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold", children: "APIs" }),
     /* @__PURE__ */ jsx(DocSetting, {}),

package/esm/Signal/GraphQL.js

@@ -1,17 +1,9 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { getNonArrayModel, isGqlScalar } from "@akanjs/base";
+import { isGqlScalar } from "@akanjs/base";
 import { usePage } from "@akanjs/client";
 import { constantInfo } from "@akanjs/constant";
-import {
-  fetch,
-  getArgMetas,
-  getGqlMetas,
-  getGqlStr,
-  getSigMeta,
-  getSignalRefsOnStorage,
-  makeRequestExample
-} from "@akanjs/signal";
+import { fetch, getGqlStr, makeRequestExample } from "@akanjs/signal";
 import { st } from "@akanjs/store";
 import { useMemo, useState } from "react";
 import { AiOutlineFileWord, AiOutlineSend } from "react-icons/ai";
@@ -24,43 +16,39 @@ function GraphQL() {
   return /* @__PURE__ */ jsx("div", {});
 }
 const GraphQLEndpoints = ({ refName, openAll }) => {
-  const sigRefs = getSignalRefsOnStorage(refName);
+  const signals = global.signals;
+  const signal = signals.find((signal2) => signal2.refName === refName);
   const tryRoles = st.use.tryRoles();
-  const gqlInfos = sigRefs.reduce(
-    (acc, sigRef) => [...acc, ...getGqlMetas(sigRef).map((gqlMeta) => ({ key: gqlMeta.key, gqlMeta, sigRef }))],
-    []
-  ).sort((a, b) => a.key > b.key ? 1 : -1).filter(({ gqlMeta }) => gqlMeta.signalOption.onlyFor !== "restapi").filter(({ gqlMeta }) => {
-    if (gqlMeta.type === "Pubsub" || gqlMeta.type === "Message")
+  if (!signal)
+    return null;
+  const gqlInfos = global.Object.entries(signal.endpoint).sort(([keyA], [keyB]) => keyA > keyB ? 1 : -1).filter(([key, gqlMeta]) => gqlMeta.signalOption?.onlyFor !== "restapi").filter(([key, gqlMeta]) => {
+    if (gqlMeta.type !== "query" && gqlMeta.type !== "mutation")
       return false;
-    if (gqlMeta.guards.includes("Public") && tryRoles.includes("Public"))
+    if (gqlMeta.signalOption?.guards?.includes("Public") && tryRoles.includes("Public"))
       return true;
-    if ((gqlMeta.guards.includes("User") || gqlMeta.guards.includes("Every")) && tryRoles.includes("User"))
+    if ((gqlMeta.signalOption?.guards?.includes("User") || gqlMeta.signalOption?.guards?.includes("Every")) && tryRoles.includes("User"))
       return true;
-    if ((gqlMeta.guards.includes("Admin") || gqlMeta.guards.includes("Every")) && tryRoles.includes("Admin"))
+    if ((gqlMeta.signalOption?.guards?.includes("Admin") || gqlMeta.signalOption?.guards?.includes("Every")) && tryRoles.includes("Admin"))
       return true;
-    if (gqlMeta.guards.includes("SuperAdmin") && tryRoles.includes("SuperAdmin"))
+    if ((gqlMeta.signalOption?.guards?.includes("SuperAdmin") || gqlMeta.signalOption?.guards?.includes("Every")) && tryRoles.includes("SuperAdmin"))
       return true;
     return false;
   });
-  return /* @__PURE__ */ jsx("div", { children: gqlInfos.map(({ gqlMeta, sigRef }, idx) => /* @__PURE__ */ jsx(GraphQLEndpoint, { sigRef, gqlMeta, open: openAll }, idx)) });
+  return /* @__PURE__ */ jsx("div", { children: gqlInfos.map(([gqlKey, gqlMeta], idx) => /* @__PURE__ */ jsx(GraphQLEndpoint, { refName, gqlKey, gqlMeta, open: openAll }, idx)) });
 };
 GraphQL.Endpoints = GraphQLEndpoints;
-const GraphQLEndpoint = ({ sigRef, gqlMeta, open }) => {
+const GraphQLEndpoint = ({ refName, gqlKey, gqlMeta, open }) => {
   const { l } = usePage();
-  const sigMeta = getSigMeta(sigRef);
   const [viewStatus, setViewStatus] = useState("doc");
-  const [argMetas] = getArgMetas(sigRef, gqlMeta.key);
-  const gqlArgMetas = argMetas.filter((argMeta) => argMeta.type !== "Upload");
-  const uploadArgMetas = argMetas.filter((argMeta) => argMeta.type === "Upload");
   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__ */ jsx("div", { className: `btn btn-xs w-16 ${gqlMeta.type === "query" ? "btn-success" : "btn-accent"}`, children: gqlMeta.type }),
+      gqlKey,
       " ",
       /* @__PURE__ */ jsxs("span", { className: "text-sm", children: [
         "(",
-        l.api(sigMeta.refName, gqlMeta.key),
+        l._(`${refName}.signal.${gqlKey}`),
         ")"
       ] })
     ] }) }),
@@ -68,9 +56,9 @@ const GraphQLEndpoint = ({ sigRef, gqlMeta, open }) => {
       /* @__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: [
+        gqlMeta.signalOption?.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(
+          gqlMeta.signalOption.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" : ""}`,
@@ -81,7 +69,7 @@ const GraphQLEndpoint = ({ sigRef, gqlMeta, open }) => {
         ] }) : null,
         /* @__PURE__ */ jsxs("div", { className: "pb-3 pl-3 text-base font-normal", children: [
           "- ",
-          l.apidesc(sigMeta.refName, gqlMeta.key)
+          l._(`${refName}.signal.${gqlKey}.desc`)
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "my-4 flex w-full gap-5 px-5", children: [
@@ -112,31 +100,25 @@ const GraphQLEndpoint = ({ sigRef, gqlMeta, open }) => {
           }
         )
       ] }),
-      viewStatus === "doc" ? /* @__PURE__ */ jsx(
-        GraphQLInterface,
-        {
-          sigRef,
-          gqlMeta,
-          gqlArgMetas,
-          uploadArgMetas
-        }
-      ) : /* @__PURE__ */ jsx(GraphQLTry, { sigRef, gqlMeta, gqlArgMetas, uploadArgMetas })
+      viewStatus === "doc" ? /* @__PURE__ */ jsx(GraphQLInterface, { refName, gqlKey, gqlMeta }) : /* @__PURE__ */ jsx(GraphQLTry, { gqlKey, gqlMeta })
     ] })
   ] });
 };
 GraphQL.Endpoint = GraphQLEndpoint;
-const GraphQLInterface = ({ sigRef, gqlMeta, gqlArgMetas, uploadArgMetas }) => {
-  const sigMeta = getSigMeta(sigRef);
-  const [returnRef, arrDepth] = getNonArrayModel(gqlMeta.returns());
+const GraphQLInterface = ({ refName, gqlKey, gqlMeta }) => {
+  const returnRef = constantInfo.getModelRef(gqlMeta.returns.refName, gqlMeta.returns.modelType);
+  const arrDepth = gqlMeta.returns.arrDepth;
   const isReturnModelType = !isGqlScalar(returnRef);
+  const uploadArgMetas = gqlMeta.args.filter((argMeta) => argMeta.type === "Upload");
+  const gqlArgMetas = gqlMeta.args.filter((argMeta) => argMeta.type !== "Upload");
   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 }) })
+      /* @__PURE__ */ jsx("div", { className: "bg-base-100 overflow-x-auto rounded-md p-3", children: /* @__PURE__ */ jsx(Arg.Table, { refName, gqlKey, 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 }) })
+      /* @__PURE__ */ jsx("div", { className: "bg-base-100 mt-3 overflow-x-auto rounded-md p-3", children: /* @__PURE__ */ jsx(Arg.Table, { refName, gqlKey, 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: [
@@ -149,27 +131,21 @@ const GraphQLInterface = ({ sigRef, gqlMeta, gqlArgMetas, uploadArgMetas }) => {
       ] }),
       /* @__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 }) })
+        /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(Response.Example, { gqlMeta }) })
       ] })
     ] }) })
   ] });
 };
 GraphQL.Interface = GraphQLInterface;
-const GraphQLTry = ({ sigRef, gqlMeta, gqlArgMetas, uploadArgMetas }) => {
+const GraphQLTry = ({ gqlKey, gqlMeta }) => {
   const tryJwt = st.use.tryJwt();
-  const [modelRef, arrDepth] = getNonArrayModel(gqlMeta.returns());
+  const modelRef = constantInfo.getModelRef(gqlMeta.returns.refName, gqlMeta.returns.modelType);
+  const uploadArgMetas = gqlMeta.args.filter((argMeta) => argMeta.type === "Upload");
+  const gqlArgMetas = gqlMeta.args.filter((argMeta) => argMeta.type !== "Upload");
   const isScalar = isGqlScalar(modelRef);
-  const returnRef = isScalar || arrDepth === 0 ? modelRef : constantInfo.isFull(modelRef) ? constantInfo.getDatabase(constantInfo.getRefName(modelRef)).light : modelRef;
-  const gqlStr = useMemo(
-    () => getGqlStr(
-      modelRef,
-      gqlMeta.key,
-      [...gqlArgMetas, ...uploadArgMetas].sort((a, b) => a.idx - b.idx),
-      returnRef
-    ),
-    []
-  );
-  const requestExample = useMemo(() => JSON.stringify(makeRequestExample(sigRef, gqlMeta.key), null, 2), []);
+  const returnRef = isScalar || gqlMeta.returns.arrDepth === 0 ? modelRef : constantInfo.isFull(modelRef) ? constantInfo.getDatabase(constantInfo.getRefName(modelRef)).light : modelRef;
+  const gqlStr = useMemo(() => getGqlStr(modelRef, gqlKey, gqlMeta, returnRef), []);
+  const requestExample = useMemo(() => JSON.stringify(makeRequestExample(gqlMeta), null, 2), []);
   const [gqlRequest, setGqlRequest] = useState(requestExample);
   const [uploadRequest, setUploadRequest] = useState({});
   const [response, setResponse] = useState({
@@ -179,8 +155,8 @@ const GraphQLTry = ({ sigRef, gqlMeta, gqlArgMetas, uploadArgMetas }) => {
   const onSend = async () => {
     setResponse({ status: "loading", data: null });
     const request = { ...JSON.parse(gqlRequest), ...uploadRequest };
-    const argData = [...gqlArgMetas, ...uploadArgMetas].sort((a, b) => a.idx - b.idx).map((argMeta) => request[argMeta.name]);
-    const fetchFn = fetch[gqlMeta.key].bind(fetch);
+    const argData = gqlMeta.args.map((argMeta) => request[argMeta.name]);
+    const fetchFn = fetch[gqlKey].bind(fetch);
     const data = await fetchFn(...argData, {
       token: tryJwt,
       onError: (data2) => {
@@ -195,6 +171,7 @@ const GraphQLTry = ({ sigRef, gqlMeta, gqlArgMetas, uploadArgMetas }) => {
       uploadArgMetas.map((argMeta) => /* @__PURE__ */ jsx(
         Arg.FormData,
         {
+          gqlKey,
           argMeta,
           value: uploadRequest[argMeta.name],
           onChange: (fileList) => {

package/esm/Signal/Message.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { getNonArrayModel, isGqlScalar } from "@akanjs/base";
+import { isGqlScalar } from "@akanjs/base";
 import { usePage } from "@akanjs/client";
 import { capitalize } from "@akanjs/common";
-import { fetch, getArgMetas, getSigMeta, makeRequestExample } from "@akanjs/signal";
-import { st } from "@akanjs/store";
+import { constantInfo } from "@akanjs/constant";
+import { fetch, makeRequestExample } from "@akanjs/signal";
 import { useEffect, useMemo, useState } from "react";
 import { AiOutlineDisconnect, AiOutlineFileWord, AiOutlineSend, AiOutlineSwap } from "react-icons/ai";
 import { BiSolidNetworkChart } from "react-icons/bi";
@@ -15,22 +15,20 @@ import Response from "./Response";
 function Message() {
   return /* @__PURE__ */ jsx("div", {});
 }
-const MessageEndpoint = ({ sigRef, gqlMeta, open }) => {
+const MessageEndpoint = ({ refName, gqlKey, gqlMeta, open }) => {
   const { l } = usePage();
-  const sigMeta = getSigMeta(sigRef);
   const [viewStatus, setViewStatus] = useState("doc");
-  const [argMetas] = getArgMetas(sigRef, gqlMeta.key);
-  const gqlArgMetas = argMetas.filter((argMeta) => argMeta.type !== "Upload");
-  const uploadArgMetas = argMetas.filter((argMeta) => argMeta.type === "Upload");
+  const gqlArgMetas = gqlMeta.args.filter((argMeta) => argMeta.type !== "Upload");
+  const uploadArgMetas = gqlMeta.args.filter((argMeta) => argMeta.type === "Upload");
   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__ */ jsx("div", { className: `btn btn-xs w-16 ${gqlMeta.type === "pubsub" ? "btn-info" : "btn-warning"}`, children: gqlMeta.type }),
+      gqlKey,
       " ",
       /* @__PURE__ */ jsxs("span", { className: "text-sm", children: [
         "(",
-        l.api(sigMeta.refName, gqlMeta.key),
+        l._(`${refName}.signal.${gqlKey}`),
         ")"
       ] })
     ] }) }),
@@ -38,9 +36,9 @@ const MessageEndpoint = ({ sigRef, gqlMeta, open }) => {
       /* @__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: [
+        gqlMeta.signalOption?.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(
+          gqlMeta.signalOption.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" : ""}`,
@@ -51,7 +49,7 @@ const MessageEndpoint = ({ sigRef, gqlMeta, open }) => {
         ] }) : null,
         /* @__PURE__ */ jsxs("div", { className: "pb-3 pl-3 text-base font-normal", children: [
           "- ",
-          l.apidesc(sigMeta.refName, gqlMeta.key)
+          l._(`${refName}.signal.${gqlKey}.desc`)
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "my-4 flex w-full gap-5 px-5", children: [
@@ -82,69 +80,57 @@ const MessageEndpoint = ({ sigRef, gqlMeta, open }) => {
           }
         )
       ] }),
-      viewStatus === "doc" ? /* @__PURE__ */ jsx(
-        MessageInterface,
-        {
-          sigRef,
-          gqlMeta,
-          gqlArgMetas,
-          uploadArgMetas
-        }
-      ) : /* @__PURE__ */ jsx(MessageTry, { sigRef, gqlMeta, gqlArgMetas, uploadArgMetas })
+      viewStatus === "doc" ? /* @__PURE__ */ jsx(MessageInterface, { refName, gqlKey, gqlMeta }) : /* @__PURE__ */ jsx(MessageTry, { gqlKey, gqlMeta })
     ] })
   ] });
 };
 Message.Endpoint = MessageEndpoint;
-const MessageInterface = ({ sigRef, gqlMeta, gqlArgMetas, uploadArgMetas }) => {
-  const sigMeta = getSigMeta(sigRef);
-  const [returnRef, arrDepth] = getNonArrayModel(gqlMeta.returns());
+const MessageInterface = ({ refName, gqlKey, gqlMeta }) => {
+  const returnRef = constantInfo.getModelRef(gqlMeta.returns.refName, gqlMeta.returns.modelType);
+  const uploadArgMetas = gqlMeta.args.filter((argMeta) => argMeta.type === "Upload");
+  const gqlArgMetas = gqlMeta.args.filter((argMeta) => argMeta.type !== "Upload");
   const isReturnModelType = !isGqlScalar(returnRef);
   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 }) })
+      /* @__PURE__ */ jsx("div", { className: "bg-base-100 overflow-x-auto rounded-md p-3", children: /* @__PURE__ */ jsx(Arg.Table, { refName, gqlKey, 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 }) })
+      /* @__PURE__ */ jsx("div", { className: "bg-base-100 overflow-x-auto rounded-md p-3", children: /* @__PURE__ */ jsx(Arg.Table, { refName, gqlKey, 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 }),
+          /* @__PURE__ */ jsx(Object.Type, { objRef: returnRef, arrDepth: gqlMeta.returns.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 })
+        /* @__PURE__ */ jsx(Response.Example, { gqlMeta })
       ] })
     ] }) })
   ] });
 };
 Message.Interface = MessageInterface;
-const MessageTry = ({ sigRef, gqlMeta, gqlArgMetas, uploadArgMetas }) => {
-  const tryJwt = st.use.tryJwt();
-  const [modelRef, arrDepth] = getNonArrayModel(gqlMeta.returns());
-  const isScalar = isGqlScalar(modelRef);
-  const requestExample = useMemo(() => JSON.stringify(makeRequestExample(sigRef, gqlMeta.key), null, 2), []);
+const MessageTry = ({ gqlKey, gqlMeta }) => {
+  const requestExample = useMemo(() => JSON.stringify(makeRequestExample(gqlMeta), null, 2), []);
   const [gqlRequest, setGqlRequest] = useState(requestExample);
-  const [uploadRequest, setUploadRequest] = useState({});
   const [stopListen, setStopListen] = useState(null);
   const [messages, setMessages] = useState("");
   const [response, setResponse] = useState({ status: "ready", data: "" });
   const onSend = async () => {
-    const request = { ...JSON.parse(gqlRequest), ...uploadRequest };
-    const argData = [...gqlArgMetas, ...uploadArgMetas].sort((a, b) => a.idx - b.idx).map((argMeta) => request[argMeta.name]);
-    const fetchFn = fetch[gqlMeta.key].bind(fetch);
+    const request = JSON.parse(gqlRequest);
+    const argData = gqlMeta.args.map((argMeta) => request[argMeta.name]);
+    const fetchFn = fetch[gqlKey].bind(fetch);
     await fetchFn(...argData);
   };
   const onListen = () => {
     setResponse({ status: "loading", data: null });
-    const request = { ...JSON.parse(gqlRequest), ...uploadRequest };
-    const fetchFn = fetch[`listen${capitalize(gqlMeta.key)}`].bind(fetch);
+    const fetchFn = fetch[`listen${capitalize(gqlKey)}`].bind(fetch);
     setResponse({ status: "loading", data: messages });
     const stopListen2 = fetchFn((data) => {
       setMessages(
@@ -171,20 +157,6 @@ ${data}` : typeof data === "object" ? [...prev && prev.length ? [...prev] : [],
     };
   }, [stopListen]);
   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" }),