@akanjs/ui 0.0.150 → 0.0.152

package/esm/Signal/Doc.js

@@ -0,0 +1,229 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { lowerlize } from "@akanjs/common";
+import { usePage } from "@akanjs/next";
+import { client, defaultAccount, getAllSignalRefs, getSigMeta, roleTypes } from "@akanjs/signal";
+import { st } from "@akanjs/store";
+import decode from "jsonwebtoken/decode";
+import { useState } from "react";
+import { AiOutlineApi, AiOutlineCopy } from "react-icons/ai";
+import { BiLock, BiLogoGraphql } from "react-icons/bi";
+import { Copy } from "../Copy";
+import { Input } from "../Input";
+import { Modal } from "../Modal";
+import GraphQL from "./GraphQL";
+import RestApi from "./RestApi";
+import WebSocket from "./WebSocket";
+function Doc() {
+  return /* @__PURE__ */ jsx("div", {});
+}
+const DocSetting = () => {
+  const trySignalType = st.use.trySignalType();
+  const tryRoles = st.use.tryRoles();
+  const tryAccount = st.use.tryAccount();
+  const tryRoleForAll = roleTypes.every((roleType) => tryRoles.includes(roleType));
+  const baseUrl = trySignalType === "graphql" ? client.uri : client.uri.replace("/graphql", "");
+  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:",
+      " ",
+      /* @__PURE__ */ jsx(Copy, { text: baseUrl, children: /* @__PURE__ */ jsxs("button", { className: "btn btn-outline btn-sm", children: [
+        baseUrl,
+        /* @__PURE__ */ jsx(AiOutlineCopy, {})
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      "Mode:",
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: `btn btn-sm ${trySignalType === "graphql" ? "border-[#E535AB] bg-[#E535AB] text-white" : "btn-outline"}`,
+          onClick: () => {
+            st.do.setTrySignalType("graphql");
+          },
+          children: [
+            /* @__PURE__ */ jsx(BiLogoGraphql, {}),
+            "GraphQL"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: `btn btn-primary btn-sm ${trySignalType === "restapi" ? "" : "btn-outline"}`,
+          onClick: () => {
+            st.do.setTrySignalType("restapi");
+          },
+          children: [
+            /* @__PURE__ */ jsx(AiOutlineApi, {}),
+            "Rest API"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+      "For:",
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: `btn btn-secondary btn-sm ${tryRoleForAll ? "" : "btn-outline"}`,
+          onClick: () => {
+            if (!tryRoleForAll)
+              st.do.setTryRoles([...roleTypes]);
+          },
+          children: "All"
+        }
+      ),
+      roleTypes.map((roleType) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: `btn btn-secondary btn-sm ${!tryRoleForAll && tryRoles.includes(roleType) ? "" : "btn-outline"}`,
+          onClick: () => {
+            if (tryRoleForAll)
+              st.do.setTryRoles([roleType]);
+            else if (!tryRoles.includes(roleType))
+              st.do.setTryRoles([...tryRoles, roleType]);
+            else if (tryRoles.length !== 1)
+              st.do.setTryRoles(tryRoles.filter((t) => t !== roleType));
+          },
+          children: roleType
+        },
+        roleType
+      ))
+    ] }),
+    /* @__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(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 }) => {
+  const tryJwt = st.use.tryJwt();
+  const [jwt, setJwt] = useState(tryJwt);
+  const [modalOpen, setModalOpen] = useState(false);
+  const decodedAccount = jwt ? decode(jwt) : null;
+  const accountStr = JSON.stringify(decodedAccount ?? defaultAccount, null, 2);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        onClick: () => {
+          setModalOpen(true);
+          setJwt(tryJwt);
+        },
+        children
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Modal,
+      {
+        bodyClassName: "flex flex-col gap-4",
+        open: modalOpen,
+        onCancel: () => {
+          setModalOpen(false);
+        },
+        title: "Set JWT for Authorization",
+        action: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: "btn btn-primary w-full",
+            onClick: () => {
+              st.set(
+                decodedAccount ? { tryJwt: jwt, tryAccount: decodedAccount } : { tryJwt: null, tryAccount: defaultAccount }
+              );
+              setModalOpen(false);
+            },
+            children: [
+              /* @__PURE__ */ jsx(BiLock, {}),
+              " Set Authorization"
+            ]
+          }
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+            /* @__PURE__ */ jsx("div", { children: "Current JWT" }),
+            /* @__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__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(
+                Input.TextArea,
+                {
+                  inputClassName: "w-full",
+                  value: accountStr,
+                  onChange: () => true,
+                  validate: () => true,
+                  rows: 10
+                }
+              ),
+              decodedAccount ? /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4", children: /* @__PURE__ */ jsx(Copy, { text: accountStr, children: /* @__PURE__ */ jsxs("button", { className: "btn btn-sm", children: [
+                /* @__PURE__ */ jsx(AiOutlineCopy, {}),
+                " Copy"
+              ] }) }) }) : null
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+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
+  );
+  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);
+  }) });
+};
+Doc.DocSignals = DocSignals;
+const DocSignal = ({ refName }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "collapse-arrow bg-base-200 collapse", children: [
+    /* @__PURE__ */ jsx("input", { type: "checkbox" }),
+    /* @__PURE__ */ jsx("div", { className: "collapse-title text-xl font-medium", children: refName }),
+    /* @__PURE__ */ jsx("div", { className: "collapse-content", children: /* @__PURE__ */ jsx(GraphQL.Endpoints, { refName }) })
+  ] });
+};
+Doc.DocSignal = DocSignal;
+const Zone = ({ refName, openAll }) => {
+  const { l } = usePage();
+  const trySingnalType = st.use.trySignalType();
+  return /* @__PURE__ */ jsxs("div", { className: "flex break-after-page flex-col gap-4", children: [
+    /* @__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: "APIs" }),
+    /* @__PURE__ */ jsx(DocSetting, {}),
+    trySingnalType === "graphql" ? /* @__PURE__ */ jsx(GraphQL.Endpoints, { refName, openAll }) : /* @__PURE__ */ jsx(RestApi.Endpoints, { refName, openAll }),
+    /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold", children: "Web Socket" }),
+    /* @__PURE__ */ jsx(WebSocket.Endpoints, { refName, openAll })
+  ] });
+};
+Doc.Zone = Zone;
+export {
+  Doc as default
+};

package/esm/Signal/GraphQL.js

@@ -0,0 +1,240 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getNonArrayModel, isGqlScalar } from "@akanjs/base";
+import { getLightModelRef } from "@akanjs/constant";
+import { usePage } from "@akanjs/next";
+import {
+  fetch,
+  getArgMetas,
+  getGqlMetas,
+  getGqlStr,
+  getSigMeta,
+  getSignalRefsOnStorage,
+  makeRequestExample
+} from "@akanjs/signal";
+import { st } from "@akanjs/store";
+import { useMemo, useState } from "react";
+import { AiOutlineFileWord, AiOutlineSend } from "react-icons/ai";
+import { BiLogoGraphql } from "react-icons/bi";
+import Arg from "./Arg";
+import Object from "./Object";
+import Request from "./Request";
+import Response from "./Response";
+function GraphQL() {
+  return /* @__PURE__ */ jsx("div", {});
+}
+const GraphQLEndpoints = ({ refName, openAll }) => {
+  const sigRefs = getSignalRefsOnStorage(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")
+      return false;
+    if (gqlMeta.guards.includes("Public") && tryRoles.includes("Public"))
+      return true;
+    if ((gqlMeta.guards.includes("User") || gqlMeta.guards.includes("Every")) && tryRoles.includes("User"))
+      return true;
+    if ((gqlMeta.guards.includes("Admin") || gqlMeta.guards.includes("Every")) && tryRoles.includes("Admin"))
+      return true;
+    if (gqlMeta.guards.includes("SuperAdmin") && 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)) });
+};
+GraphQL.Endpoints = GraphQLEndpoints;
+const GraphQLEndpoint = ({ 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 === "Query" ? "btn-success" : "btn-accent"}`, children: gqlMeta.type }),
+      gqlMeta.key,
+      " ",
+      /* @__PURE__ */ jsxs("span", { className: "text-sm", children: [
+        "(",
+        l.api(sigMeta.refName, gqlMeta.key),
+        ")"
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "collapse-content bg-base-200 w-full", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mt-4 text-lg", children: [
+        "Description",
+        /* @__PURE__ */ jsx("hr", { className: "my-2 border-[0.1px] border-gray-400" }),
+        gqlMeta.guards.some((guard) => guard !== "None") ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pb-3 pl-3 text-base font-normal", children: [
+          "- Guards:",
+          gqlMeta.guards.map((guard) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `badge ${guard === "Public" ? "badge-success" : guard === "SuperAdmin" ? "badge-error" : guard === "Admin" ? "badge-error" : guard === "User" ? "badge-accent" : guard === "Owner" ? "badge-accent" : guard === "Every" ? "badge-warning" : ""}`,
+              children: guard
+            },
+            guard
+          ))
+        ] }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "pb-3 pl-3 text-base font-normal", children: [
+          "- ",
+          l.apidesc(sigMeta.refName, gqlMeta.key)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "my-4 flex w-full gap-5 px-5", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => {
+              setViewStatus("doc");
+            },
+            className: `btn btn-success w-1/2 ${viewStatus === "doc" ? "" : "btn-outline"}`,
+            children: [
+              /* @__PURE__ */ jsx(AiOutlineFileWord, { className: "text-xl" }),
+              " View Doc"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => {
+              setViewStatus("test");
+            },
+            className: `btn btn-primary w-1/2 ${viewStatus === "test" ? "" : "btn-outline"}`,
+            children: [
+              /* @__PURE__ */ jsx(BiLogoGraphql, { className: "text-xl" }),
+              " GraphQL"
+            ]
+          }
+        )
+      ] }),
+      viewStatus === "doc" ? /* @__PURE__ */ jsx(
+        GraphQLInterface,
+        {
+          sigRef,
+          gqlMeta,
+          gqlArgMetas,
+          uploadArgMetas
+        }
+      ) : /* @__PURE__ */ jsx(GraphQLTry, { sigRef, gqlMeta, gqlArgMetas, uploadArgMetas })
+    ] })
+  ] });
+};
+GraphQL.Endpoint = GraphQLEndpoint;
+const GraphQLInterface = ({ sigRef, gqlMeta, gqlArgMetas, uploadArgMetas }) => {
+  const sigMeta = getSigMeta(sigRef);
+  const [returnRef, arrDepth] = getNonArrayModel(gqlMeta.returns());
+  const isReturnModelType = !isGqlScalar(returnRef);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    uploadArgMetas.length ? /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "text-lg", children: "Form data upload" }),
+      /* @__PURE__ */ jsx("div", { className: "bg-base-100 overflow-x-auto rounded-md p-3", children: /* @__PURE__ */ jsx(Arg.Table, { sigMeta, gqlMeta, argMetas: uploadArgMetas }) })
+    ] }) : null,
+    gqlArgMetas.length ? /* @__PURE__ */ jsxs("div", { className: "text-start", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-start text-xl font-bold", children: "Variables" }),
+      /* @__PURE__ */ jsx("div", { className: "bg-base-100 mt-3 overflow-x-auto rounded-md p-3", children: /* @__PURE__ */ jsx(Arg.Table, { sigMeta, gqlMeta, argMetas: gqlArgMetas }) })
+    ] }) : null,
+    /* @__PURE__ */ jsx("div", { className: "text-lg font-bold", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-2 rounded-md font-normal md:flex-col", children: [
+      /* @__PURE__ */ jsxs("div", { className: "w-full text-start md:w-full", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xl font-bold", children: "Response Type" }),
+        /* @__PURE__ */ jsxs("div", { className: "bg-base-100 mt-3 max-h-[500px] overflow-auto rounded-md p-4 md:h-[500px]", children: [
+          "Returns: ",
+          /* @__PURE__ */ jsx(Object.Type, { objRef: returnRef, arrDepth }),
+          isReturnModelType ? /* @__PURE__ */ jsx(Object.Detail, { objRef: returnRef }) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "w-full text-start md:w-full", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xl font-bold", children: "Response Example" }),
+        /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(Response.Example, { sigRef, gqlMeta }) })
+      ] })
+    ] }) })
+  ] });
+};
+GraphQL.Interface = GraphQLInterface;
+const GraphQLTry = ({ sigRef, gqlMeta, gqlArgMetas, uploadArgMetas }) => {
+  const tryJwt = st.use.tryJwt();
+  const [modelRef, arrDepth] = getNonArrayModel(gqlMeta.returns());
+  const isScalar = isGqlScalar(modelRef);
+  const returnRef = isScalar || !arrDepth ? modelRef : getLightModelRef(modelRef);
+  const gqlStr = useMemo(
+    () => getGqlStr(
+      modelRef,
+      gqlMeta,
+      [...gqlArgMetas, ...uploadArgMetas].sort((a, b) => a.idx - b.idx),
+      returnRef
+    ),
+    []
+  );
+  const requestExample = useMemo(() => JSON.stringify(makeRequestExample(sigRef, gqlMeta.key), null, 2), []);
+  const [gqlRequest, setGqlRequest] = useState(requestExample);
+  const [uploadRequest, setUploadRequest] = useState({});
+  const [response, setResponse] = useState({
+    status: "idle",
+    data: null
+  });
+  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 data = await fetchFn(...argData, {
+      token: tryJwt,
+      onError: (data2) => {
+        setResponse({ status: "error", data: data2 });
+      }
+    });
+    setResponse({ status: "success", data });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-4", children: [
+    uploadArgMetas.length ? /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "text-lg", children: "Form data uplaod" }),
+      uploadArgMetas.map((argMeta) => /* @__PURE__ */ jsx(
+        Arg.FormData,
+        {
+          argMeta,
+          value: uploadRequest[argMeta.name],
+          onChange: (fileList) => {
+            setUploadRequest({ ...uploadRequest, [argMeta.name]: fileList });
+          }
+        },
+        argMeta.name
+      ))
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-2 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "text-lg", children: "Variables" }),
+          /* @__PURE__ */ jsx("div", { className: "w-full items-center justify-center", children: /* @__PURE__ */ jsx(
+            Arg.Json,
+            {
+              value: gqlRequest,
+              onChange: (value) => {
+                setGqlRequest(value);
+              }
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "text-lg", children: "Graphql String" }),
+          /* @__PURE__ */ jsx("div", { className: "w-full items-center justify-center", children: /* @__PURE__ */ jsx(Request.Example, { value: gqlStr }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("button", { className: "btn bg-success w-full", onClick: () => void onSend(), children: [
+        /* @__PURE__ */ jsx(AiOutlineSend, { className: "-mt-0.5" }),
+        " Send Request"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "text-lg", children: "Response" }),
+      /* @__PURE__ */ jsx(Response.Result, { status: response.status, data: response.data })
+    ] })
+  ] });
+};
+GraphQL.Try = GraphQLTry;
+export {
+  GraphQL as default
+};

package/esm/Signal/Listener.js

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