@akanjs/ui 0.0.150 → 0.0.152

package/esm/Signal/Message.js

@@ -0,0 +1,247 @@
+"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 { useEffect, useMemo, useState } from "react";
+import { AiOutlineDisconnect, AiOutlineFileWord, AiOutlineSend, AiOutlineSwap } from "react-icons/ai";
+import { BiSolidNetworkChart } from "react-icons/bi";
+import Arg from "./Arg";
+import Listener from "./Listener";
+import Object from "./Object";
+import Response from "./Response";
+function Message() {
+  return /* @__PURE__ */ jsx("div", {});
+}
+const MessageEndpoint = ({ sigRef, 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 === "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__ */ 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 }) => {
+  const tryJwt = st.use.tryJwt();
+  const [modelRef, arrDepth] = getNonArrayModel(gqlMeta.returns());
+  const isScalar = isGqlScalar(modelRef);
+  const returnRef = isScalar || !arrDepth ? modelRef : getLightModelRef(modelRef);
+  const requestExample = useMemo(() => JSON.stringify(makeRequestExample(sigRef, gqlMeta.key), 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: null });
+  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);
+    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);
+    setResponse({ status: "loading", data: messages });
+    const stopListen2 = fetchFn(({ event, data }) => {
+      setMessages(
+        (prev) => typeof data === "boolean" ? data : typeof data === "string" ? `${prev}
+${data}` : typeof data === "object" ? [...prev && prev.length ? [...prev] : [], data] : data
+      );
+    });
+    setResponse({ status: "listening", data: messages });
+    setStopListen(() => stopListen2);
+  };
+  const onStopListen = () => {
+    if (!stopListen)
+      return;
+    stopListen();
+    setStopListen(null);
+    setResponse({ status: "ready", data: null });
+    setMessages("");
+  };
+  useEffect(() => {
+    if (!stopListen)
+      return;
+    return () => {
+      onStopListen();
+    };
+  }, [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" }),
+        /* @__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 {
+  Message as default
+};

package/esm/Signal/Object.js

@@ -0,0 +1,112 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { getNonArrayModel, isGqlClass, isGqlScalar, scalarNameMap } from "@akanjs/base";
+import { lowerlize } from "@akanjs/common";
+import { getClassMeta, getFieldMetas, getGqlTypeStr } from "@akanjs/constant";
+import { usePage } from "@akanjs/next";
+import { useMemo, useState } from "react";
+import { Modal } from "../Modal";
+function Object() {
+  return /* @__PURE__ */ jsx("div", {});
+}
+const ObjectType = ({ objRef, arrDepth, nullable }) => {
+  const isModelType = !isGqlScalar(objRef);
+  const refName = getGqlTypeStr(objRef);
+  const [openDetail, setOpenDetail] = useState(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: isModelType ? "btn btn-sm btn-primary" : "",
+        onClick: () => {
+          if (isModelType)
+            setOpenDetail(true);
+        },
+        children: [
+          "[".repeat(arrDepth),
+          refName,
+          "]".repeat(arrDepth),
+          nullable ? "" : "!"
+        ]
+      }
+    ),
+    isModelType ? /* @__PURE__ */ jsx(
+      Modal,
+      {
+        title: `Model Type - ${refName}`,
+        open: openDetail,
+        onCancel: () => {
+          setOpenDetail(false);
+        },
+        children: openDetail ? /* @__PURE__ */ jsx(ObjectDetail, { objRef }) : null
+      }
+    ) : null
+  ] });
+};
+Object.Type = ObjectType;
+const ObjectDetail = ({ objRef }) => {
+  const classMeta = getClassMeta(objRef);
+  const refName = lowerlize(getGqlTypeStr(objRef));
+  const modelRefName = useMemo(
+    () => classMeta.type === "light" ? lowerlize(refName.replace("light", "")) : refName.startsWith("summary") ? refName : refName.replace("Summary", "").replace("Insight", "").replace("Input", ""),
+    []
+  );
+  const fieldMetas = getFieldMetas(objRef);
+  const { l } = usePage();
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("table", { className: "table", children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "text-bold", children: [
+      /* @__PURE__ */ jsx("th", { className: "text-base", children: "Key" }),
+      /* @__PURE__ */ jsx("th", { className: "text-center text-base", children: "Type" }),
+      /* @__PURE__ */ jsx("th", { className: "text-center text-base", children: "Field Name" }),
+      /* @__PURE__ */ jsx("th", { className: "text-center text-base", children: "Description" }),
+      /* @__PURE__ */ jsx("th", { className: "text-center text-base", children: "Enum" })
+    ] }) }),
+    fieldMetas.map(({ key, arrDepth, name, nullable, modelRef, isClass, enum: enumOpt, isMap, of }, idx) => /* @__PURE__ */ jsx("tbody", { className: "font-normal", children: /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("td", { className: "", children: key }),
+      /* @__PURE__ */ jsxs("td", { className: "text-center", children: [
+        isClass ? /* @__PURE__ */ jsx(ObjectType, { objRef: modelRef, arrDepth }) : `${"[".repeat(arrDepth)}${name}${"]".repeat(arrDepth)}${nullable ? "" : "!"}`,
+        isMap ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          " => ",
+          (() => {
+            const [valueRef, valueArrDepth] = getNonArrayModel(of);
+            if (isGqlClass(of))
+              return /* @__PURE__ */ jsx(ObjectType, { objRef: valueRef, arrDepth: valueArrDepth });
+            else
+              return `${"[".repeat(valueArrDepth)}${scalarNameMap.get(of)}${"]".repeat(valueArrDepth)}`;
+          })()
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsx("td", { className: "text-center", children: l.field(modelRefName, key) }),
+      /* @__PURE__ */ jsx("td", { className: "text-center", children: l.desc(modelRefName, key) }),
+      /* @__PURE__ */ jsx("td", { className: "flex flex-wrap items-center justify-center gap-2 text-center", children: enumOpt ? enumOpt.map((opt, idx2) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "tooltip tooltip-primary",
+          "data-tip": l.enum(modelRefName, key, opt),
+          children: /* @__PURE__ */ jsx("button", { className: "btn btn-xs", children: opt })
+        },
+        idx2
+      )) : "-" })
+    ] }) }, idx))
+  ] }) });
+};
+Object.Detail = ObjectDetail;
+const ObjectSchema = ({ objRef }) => {
+  const { l } = usePage();
+  const classMeta = getClassMeta(objRef);
+  const refName = lowerlize(classMeta.refName);
+  return /* @__PURE__ */ jsxs("div", { className: "flex break-after-page flex-col gap-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "mt-24" }),
+    /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold", children: refName }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-5", children: [
+      " - ",
+      l.field(refName, "modelDesc")
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold", children: "Schema" }),
+    /* @__PURE__ */ jsx(ObjectDetail, { objRef })
+  ] });
+};
+Object.Schema = ObjectSchema;
+export {
+  Object as default
+};

package/esm/Signal/PubSub.js

@@ -0,0 +1,244 @@
+"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 { useEffect, useMemo, useState } from "react";
+import { AiOutlineDisconnect, AiOutlineFileWord, AiOutlineSwap } from "react-icons/ai";
+import { BiSolidNetworkChart } from "react-icons/bi";
+import Arg from "./Arg";
+import Listener from "./Listener";
+import Object from "./Object";
+import Response from "./Response";
+function PubSub() {
+  return /* @__PURE__ */ jsx("div", {});
+}
+const PubSubEndpoint = ({ sigRef, 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 === "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" }),
+              " PubSub"
+            ]
+          }
+        )
+      ] }),
+      viewStatus === "doc" ? /* @__PURE__ */ jsx(
+        PubSubInterface,
+        {
+          sigRef,
+          gqlMeta,
+          gqlArgMetas,
+          uploadArgMetas
+        }
+      ) : /* @__PURE__ */ jsx(PubSubTry, { sigRef, gqlMeta, gqlArgMetas, uploadArgMetas })
+    ] })
+  ] });
+};
+PubSub.Endpoint = PubSubEndpoint;
+const PubSubInterface = ({ sigRef, gqlMeta, gqlArgMetas, uploadArgMetas }) => {
+  const sigMeta = getSigMeta(sigRef);
+  const [returnRef, arrDepth] = getNonArrayModel(gqlMeta.returns());
+  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 }) })
+    ] }) : 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 })
+      ] })
+    ] }) })
+  ] });
+};
+PubSub.Interface = PubSubInterface;
+const PubSubTry = ({ sigRef, gqlMeta, gqlArgMetas, uploadArgMetas }) => {
+  const tryJwt = st.use.tryJwt();
+  const [modelRef, arrDepth] = getNonArrayModel(gqlMeta.returns());
+  const isScalar = isGqlScalar(modelRef);
+  const returnRef = isScalar || !arrDepth ? modelRef : getLightModelRef(modelRef);
+  const requestExample = useMemo(() => JSON.stringify(makeRequestExample(sigRef, gqlMeta.key), null, 2), []);
+  const [gqlRequest, setGqlRequest] = useState(requestExample);
+  const [uploadRequest, setUploadRequest] = useState({});
+  const [unsubscribe, setUnsubscribe] = useState(null);
+  const [messages, setMessages] = useState(null);
+  const [response, setResponse] = useState({
+    status: "ready",
+    data: null
+  });
+  const onSubscribe = () => {
+    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[`subscribe${capitalize(gqlMeta.key)}`].bind(fetch);
+    setResponse({ status: "loading", data: messages });
+    const unsubscribe2 = fetchFn([...argData], (data) => {
+      setMessages(
+        (prev) => typeof data === "boolean" ? data : typeof data === "string" ? `${prev}
+${data}` : typeof data === "object" ? [
+          ...prev?.length ? [...prev] : [],
+          data
+        ] : data
+      );
+    });
+    setResponse({ status: "listening", data: messages });
+    setUnsubscribe(() => unsubscribe2);
+  };
+  const onUnsubscribe = () => {
+    if (!unsubscribe)
+      return;
+    unsubscribe();
+    setUnsubscribe(null);
+    setResponse({ status: "ready", data: null });
+    setMessages("");
+  };
+  useEffect(() => {
+    if (!unsubscribe)
+      return;
+    return () => {
+      onUnsubscribe();
+    };
+  }, [unsubscribe]);
+  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__ */ jsxs("div", { className: "relative flex items-center justify-center gap-2", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            disabled: !!unsubscribe,
+            className: "btn btn-success w-1/2",
+            onClick: () => {
+              onSubscribe();
+            },
+            children: [
+              /* @__PURE__ */ jsx(AiOutlineSwap, { className: "-mt-0.5" }),
+              " Subscribe PubSub"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            disabled: !unsubscribe,
+            className: "btn btn-error w-1/2",
+            onClick: () => {
+              onUnsubscribe();
+            },
+            children: [
+              /* @__PURE__ */ jsx(AiOutlineDisconnect, { className: "-mt-0.5" }),
+              " Unsubscribe PubSub"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "text-lg", children: "Response" }),
+      /* @__PURE__ */ jsx(Listener.Result, { status: response.status, data: messages })
+    ] })
+  ] });
+};
+PubSub.Try = PubSubTry;
+export {
+  PubSub as default
+};

package/esm/Signal/Request.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AiOutlineCopy } from "react-icons/ai";
+import { Copy } from "../Copy";
+function Request() {
+  return /* @__PURE__ */ jsx("div", {});
+}
+const RequestExample = ({ value }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: "bg-base-100 min-h-[300px] w-full rounded-md p-4 text-base",
+        value,
+        onChange: () => true
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4", children: /* @__PURE__ */ jsx(Copy, { text: value, children: /* @__PURE__ */ jsxs("button", { className: "btn btn-sm", children: [
+      /* @__PURE__ */ jsx(AiOutlineCopy, {}),
+      " Copy"
+    ] }) }) })
+  ] });
+};
+Request.Example = RequestExample;
+export {
+  Request as default
+};

package/esm/Signal/Response.js

@@ -0,0 +1,47 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { makeResponseExample } from "@akanjs/signal";
+import { useMemo } from "react";
+import { AiOutlineCopy } from "react-icons/ai";
+import { Copy } from "../Copy";
+function Response() {
+  return /* @__PURE__ */ jsx("div", {});
+}
+const ResponseExample = ({ sigRef, gqlMeta }) => {
+  const example = useMemo(() => JSON.stringify(makeResponseExample(sigRef, gqlMeta.key), null, 2), []);
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: "bg-base-100 min-h-[500px] w-full rounded-md p-4 text-base",
+        value: example,
+        onChange: () => true
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4", children: /* @__PURE__ */ jsx(Copy, { text: example, children: /* @__PURE__ */ jsxs("button", { className: "btn btn-sm", children: [
+      /* @__PURE__ */ jsx(AiOutlineCopy, {}),
+      " Copy"
+    ] }) }) })
+  ] });
+};
+Response.Example = ResponseExample;
+const ResponseResult = ({ status, data }) => {
+  const dataStr = data ? JSON.stringify(data, null, 2) : "";
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: `textarea ${status === "loading" ? "textarea-disabled" : status === "success" ? "textarea-success border-success" : status === "error" ? "textarea-error text-error border-error" : ""} bg-base-100 min-h-[300px] w-full rounded-md p-4 text-sm font-normal`,
+        value: dataStr,
+        onChange: () => true
+      }
+    ),
+    status === "loading" ? /* @__PURE__ */ jsx("div", { className: "animate-fadeIn absolute inset-0 flex items-center justify-center backdrop-blur-sm", children: /* @__PURE__ */ jsx("span", { className: "loading loading-dots loading-lg" }) }) : status === "idle" ? /* @__PURE__ */ jsx(Fragment, {}) : /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4", children: /* @__PURE__ */ jsx(Copy, { text: dataStr, children: /* @__PURE__ */ jsxs("button", { className: "btn btn-sm", children: [
+      /* @__PURE__ */ jsx(AiOutlineCopy, {}),
+      " Copy"
+    ] }) }) })
+  ] });
+};
+Response.Result = ResponseResult;
+export {
+  Response as default
+};