@akanjs/ui 0.0.149 → 0.0.151

package/esm/Select.js

@@ -0,0 +1,243 @@
+"use client";
+import { Enum } from "@akanjs/base";
+import { clsx } from "@akanjs/client";
+import { useDebounce, usePage } from "@akanjs/next";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { BiCheck, BiChevronDown, BiX } from "react-icons/bi";
+import { BsQuestionCircleFill } from "react-icons/bs";
+import { TiDelete } from "react-icons/ti";
+const Select = ({
+  label,
+  desc,
+  labelClassName,
+  className,
+  value,
+  options,
+  nullable,
+  disabled,
+  multiple,
+  searchable,
+  placeholder,
+  selectClassName,
+  selectorClassName,
+  selectedClassName,
+  onOpen,
+  onChange,
+  onSearch,
+  renderOption,
+  renderSelected
+}) => {
+  const { l } = usePage();
+  const [isOpen, setIsOpen] = useState(false);
+  const labeledOptions = useMemo(
+    () => options instanceof Enum ? options.values.map((v) => ({ label: v, value: v })) : options[0]?.label && options[0]?.value ? options : options.map((v) => ({ label: v, value: v })),
+    [options]
+  );
+  const [selectedValues, setSelectedValues] = useState(multiple ? value : [value]);
+  const [searchText, setSearchText] = useState("");
+  const [searchOptions, setSearchOptions] = useState(labeledOptions);
+  const dropdownRef = useRef(null);
+  const selected = (v) => {
+    if (multiple)
+      return selectedValues.includes(v);
+    return v === selectedValues[0];
+  };
+  const handleClickOutside = (event) => {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      setIsOpen(false);
+    }
+  };
+  const onSelect = (v, index) => {
+    if (multiple) {
+      if (selectedValues.includes(v)) {
+        setSelectedValues(selectedValues.filter((rev) => rev !== v));
+        onChange(
+          selectedValues.filter((rev) => rev !== v),
+          selectedValues
+        );
+      } else {
+        setSelectedValues([...selectedValues, v]);
+        onChange([...selectedValues, v], selectedValues);
+      }
+    } else {
+      setSelectedValues([v]);
+      onChange(v, selectedValues[0]);
+      setIsOpen(false);
+    }
+  };
+  const debouncedOnSearch = useDebounce(
+    (text) => {
+      onSearch?.(text);
+    },
+    [searchText],
+    300
+  );
+  useEffect(() => {
+    if (isOpen)
+      document.addEventListener("mousedown", handleClickOutside);
+    else
+      document.removeEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+  useEffect(() => {
+    setSearchOptions(labeledOptions);
+  }, [labeledOptions]);
+  useEffect(() => {
+    if (isOpen)
+      onOpen?.();
+  }, [isOpen]);
+  useEffect(() => {
+    if (multiple)
+      setSelectedValues(value);
+    else
+      setSelectedValues([value]);
+  }, [value]);
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("relative min-w-[150px]", className), ref: dropdownRef }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-open": isOpen,
+      className: clsx(
+        "btn flex h-auto min-h-[40px] w-full cursor-pointer items-center px-0 py-1 pr-5 pl-1 focus:outline-hidden",
+        "bg-base-100 data-[open=true]:border-primary",
+        disabled && "cursor-not-allowed opacity-50",
+        selectClassName,
+        { "border-base-300": isOpen }
+      ),
+      onClick: () => {
+        setIsOpen(!isOpen);
+      }
+    },
+    /* @__PURE__ */ React.createElement("span", { className: "flex w-full flex-wrap items-center gap-1" }, multiple ? /* @__PURE__ */ React.createElement(React.Fragment, null, value.map((v, index) => {
+      const optionValue = labeledOptions.find((option) => option.value === v);
+      if (!optionValue)
+        return null;
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          key: index,
+          className: "bg-success/70 text-success-content flex items-center gap-2 rounded-lg px-2 py-1 text-xs"
+        },
+        renderSelected ? renderSelected(optionValue.value) : optionValue.label,
+        /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              onSelect(optionValue.value, index);
+            },
+            className: "opacity-50 duration-300 hover:opacity-100"
+          },
+          /* @__PURE__ */ React.createElement(BiX, { className: "text-base" })
+        )
+      );
+    })) : /* @__PURE__ */ React.createElement("div", { className: "px-2 py-1" }, value ? /* @__PURE__ */ React.createElement(React.Fragment, null, (() => {
+      const optionValue = searchOptions.find((option) => selected(option.value));
+      if (!optionValue)
+        return null;
+      return renderSelected ? renderSelected(optionValue.value) : optionValue.label;
+    })()) : ""), searchable && /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        type: "text",
+        className: "input w-full flex-1 border-none bg-transparent shadow-none outline-none focus:border-none focus:shadow-none focus:outline-none",
+        placeholder: selectedValues.length > 0 ? "" : placeholder,
+        value: searchText,
+        onChange: (e) => {
+          if (!isOpen)
+            setIsOpen(true);
+          if (!onSearch)
+            setSearchOptions(
+              labeledOptions.filter(
+                (option) => option.label.toString().toLowerCase().includes(e.target.value.toLowerCase())
+              )
+            );
+          setSearchText(e.target.value);
+          debouncedOnSearch(e.target.value);
+        },
+        onClick: (e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          setIsOpen(!isOpen);
+        }
+      }
+    )),
+    multiple && selectedValues.length || !multiple && selectedValues[0] !== void 0 && selectedValues[0] !== null ? /* @__PURE__ */ React.createElement(
+      TiDelete,
+      {
+        className: "absolute right-8 z-[2] h-full text-lg duration-300 hover:cursor-pointer hover:opacity-50",
+        onClick: (e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          setSearchText("");
+          setSelectedValues([]);
+          if (multiple)
+            onChange([], selectedValues);
+          else
+            onChange(null, selectedValues[0]);
+          setIsOpen(false);
+        }
+      }
+    ) : null,
+    /* @__PURE__ */ React.createElement(
+      BiChevronDown,
+      {
+        className: clsx("absolute top-1/2 right-2 -translate-y-1/2 text-lg duration-100", { "rotate-180": isOpen })
+      }
+    )
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-open": isOpen,
+      className: clsx(
+        "scrollbar-thin scrollbar-thumb-base-content/20 scrollbar-track scrollbar-track-base-content/40 bg-base-200 border-base-300 absolute z-20 mt-0.5 w-full overflow-y-scroll rounded-md shadow-lg transition-all",
+        "origin-center duration-200 data-[open=false]:h-0 data-[open=false]:border-none data-[open=true]:h-[270px] data-[open=true]:border",
+        selectorClassName
+      )
+    },
+    nullable && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "cursor-pointer p-2",
+        onClick: () => {
+          setIsOpen(false);
+        }
+      }
+    ),
+    searchOptions.length > 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, searchOptions.map((option, index) => {
+      const isSelected = selected(option.value);
+      return /* @__PURE__ */ React.createElement("div", { key: index, className: "group" }, /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: clsx(
+            "hover:bg-base-300 relative m-2 cursor-pointer rounded-sm p-2 duration-100 last:border-b-0",
+            {
+              selectedClassName: !multiple && isSelected,
+              "bg-success/70 text-success-content": isSelected
+            }
+          ),
+          onClick: () => {
+            onSelect(option.value, index);
+            setSearchText("");
+          }
+        },
+        renderOption ? renderOption(option.value) : option.label,
+        /* @__PURE__ */ React.createElement("div", { className: clsx("absolute top-1/2 right-2 -translate-y-1/2 flex-wrap duration-200", {}) }, /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: clsx("duration-200", {
+              "translate-y-0 opacity-100": isSelected,
+              "-translate-y-full opacity-0": !isSelected
+            })
+          },
+          /* @__PURE__ */ React.createElement(BiCheck, null)
+        ))
+      ), /* @__PURE__ */ React.createElement("div", { className: "h-px w-full px-2 group-last:hidden" }, /* @__PURE__ */ React.createElement("div", { className: "bg-base-content/10 size-full" })));
+    })) : /* @__PURE__ */ React.createElement("div", { className: "text-base-content/50 flex size-full flex-col items-center justify-center gap-2 p-2 text-center text-5xl" }, /* @__PURE__ */ React.createElement(BsQuestionCircleFill, null), /* @__PURE__ */ React.createElement("div", { className: "text-sm" }, l("shared.noOptions")))
+  ));
+};
+export {
+  Select
+};

package/esm/Signal/Arg.js

@@ -0,0 +1,208 @@
+"use client";
+import { getNonArrayModel, isGqlScalar } from "@akanjs/base";
+import { getGqlTypeStr, getScalarExample } from "@akanjs/constant";
+import { usePage } from "@akanjs/next";
+import { st } from "@akanjs/store";
+import { AiOutlineDelete } from "react-icons/ai";
+import { DatePicker } from "../DatePicker";
+import { Input } from "../Input";
+import Object from "./Object";
+function Arg({ argType, value, onChange }) {
+  return argType === "ID" ? /* @__PURE__ */ React.createElement(Arg.ID, { value, onChange }) : argType === "Int" ? /* @__PURE__ */ React.createElement(Arg.Int, { value, onChange }) : argType === "Float" ? /* @__PURE__ */ React.createElement(Arg.Float, { value, onChange }) : argType === "String" ? /* @__PURE__ */ React.createElement(Arg.String, { value, onChange }) : argType === "Boolean" ? /* @__PURE__ */ React.createElement(Arg.Boolean, { value, onChange }) : argType === "Date" ? /* @__PURE__ */ React.createElement(Arg.Date, { value, onChange }) : argType === "JSON" ? /* @__PURE__ */ React.createElement(Arg.Json, { value, onChange }) : argType === "Upload" ? /* @__PURE__ */ React.createElement(Arg.Upload, { value, onChange }) : /* @__PURE__ */ React.createElement(React.Fragment, null);
+}
+const ArgTable = ({ sigMeta, gqlMeta, argMetas }) => {
+  const { l } = usePage();
+  const onCopy = (text) => {
+    void navigator.clipboard.writeText(text);
+    st.do.showMessage({ content: "\uD074\uB9BD\uBCF4\uB4DC\uC5D0 \uBCF5\uC0AC\uB418\uC5C8\uC2B5\uB2C8\uB2E4.", type: "success", duration: 3 });
+  };
+  return /* @__PURE__ */ React.createElement("table", { className: "table" }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", { className: "text-bold" }, /* @__PURE__ */ React.createElement("th", null, "Arg Key"), /* @__PURE__ */ React.createElement("th", { className: "text-center" }, "Type"), /* @__PURE__ */ React.createElement("th", { className: "text-center" }, "Enum"), /* @__PURE__ */ React.createElement("th", { className: "text-center" }, "Name"), /* @__PURE__ */ React.createElement("th", { className: "text-center" }, "Description"))), argMetas.map((argMeta, idx) => {
+    const [argRef, argArrDepth] = getNonArrayModel(argMeta.returns());
+    return /* @__PURE__ */ React.createElement("tbody", { className: "font-normal", key: idx }, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", null, argMeta.name), /* @__PURE__ */ React.createElement("td", { className: "text-center" }, /* @__PURE__ */ React.createElement(Object.Type, { objRef: argRef, arrDepth: argArrDepth })), /* @__PURE__ */ React.createElement("td", { width: argMeta.argsOption.enum ? "20%" : "10%", className: "text-center" }, argMeta.argsOption.enum ? /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2" }, argMeta.argsOption.enum.map((opt, idx2) => /* @__PURE__ */ React.createElement("div", { key: idx2 }, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        key: idx2,
+        "data-tip": l.enum(sigMeta.refName, argMeta.name, opt),
+        onClick: () => {
+          onCopy(opt);
+        },
+        className: "tooltip tooltip-primary btn btn-secondary btn-xs"
+      },
+      opt
+    )))) : "-"), /* @__PURE__ */ React.createElement("td", { className: "text-center" }, l.arg(sigMeta.refName, gqlMeta.key, argMeta.name)), /* @__PURE__ */ React.createElement("td", { className: "text-center" }, l.argdesc(sigMeta.refName, gqlMeta.key, argMeta.name))));
+  }));
+};
+Arg.Table = ArgTable;
+const ArgParam = ({ argMeta, value, onChange }) => {
+  const [argRef, argArrDepth] = getNonArrayModel(argMeta.returns());
+  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`);
+  const argType = getGqlTypeStr(argRef);
+  return /* @__PURE__ */ React.createElement("div", { className: "flex w-full items-center gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "w-36 pl-2" }, "- ", argMeta.name), /* @__PURE__ */ React.createElement("div", { className: "w-full" }, /* @__PURE__ */ React.createElement(Arg, { argType, value, onChange })));
+};
+Arg.Param = ArgParam;
+const ArgQuery = ({ argMeta, value, onChange }) => {
+  const [argRef, argArrDepth] = getNonArrayModel(argMeta.returns());
+  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`);
+  const argType = getGqlTypeStr(argRef);
+  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "w-36 pl-2" }, "- ", argMeta.name), /* @__PURE__ */ React.createElement("div", { className: "w-full" }, argArrDepth && Array.isArray(value) ? /* @__PURE__ */ React.createElement("div", null, value.map((val, idx) => /* @__PURE__ */ React.createElement("div", { key: idx, className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
+    Arg,
+    {
+      argType,
+      value: val,
+      onChange: (val2) => {
+        onChange([...value.slice(0, idx), val2, ...value.slice(idx + 1)]);
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: "btn btn-sm btn-square",
+      onClick: () => {
+        onChange([...value.slice(0, idx), ...value.slice(idx + 1)]);
+      }
+    },
+    /* @__PURE__ */ React.createElement(AiOutlineDelete, null)
+  ))), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: "btn btn-sm",
+      onClick: () => {
+        onChange([...value, getScalarExample(argRef)]);
+      }
+    },
+    "+ Add"
+  )) : /* @__PURE__ */ React.createElement(Arg, { argType, value, onChange })));
+};
+Arg.Query = ArgQuery;
+const ArgFormData = ({ argMeta, value, onChange }) => {
+  const [argRef, argArrDepth] = getNonArrayModel(argMeta.returns());
+  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`);
+  return /* @__PURE__ */ React.createElement("div", { className: "flex w-full items-center gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "w-36 pl-2" }, "- ", argMeta.name), /* @__PURE__ */ React.createElement("div", { className: "w-full" }, /* @__PURE__ */ React.createElement(Arg, { argType: "Upload", value, onChange })));
+};
+Arg.FormData = ArgFormData;
+const ArgID = ({ value, onChange }) => {
+  return /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      inputClassName: "w-full",
+      value,
+      onChange: (value2) => {
+        onChange(value2);
+      },
+      validate: (e) => true
+    }
+  );
+};
+Arg.ID = ArgID;
+const ArgInt = ({ value, onChange }) => {
+  return /* @__PURE__ */ React.createElement(
+    Input.Number,
+    {
+      inputClassName: "w-full",
+      value,
+      onChange: (value2) => {
+        onChange(value2 ?? 0);
+      },
+      validate: (e) => true
+    }
+  );
+};
+Arg.Int = ArgInt;
+const ArgFloat = ({ value, onChange }) => {
+  return /* @__PURE__ */ React.createElement(
+    Input.Number,
+    {
+      inputClassName: "w-full",
+      value,
+      onChange: (value2) => {
+        onChange(value2 ?? 0);
+      },
+      validate: (e) => true
+    }
+  );
+};
+Arg.Float = ArgFloat;
+const ArgString = ({ value, onChange }) => {
+  return /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      inputClassName: "w-full",
+      value,
+      onChange: (value2) => {
+        onChange(value2);
+      },
+      validate: (e) => true
+    }
+  );
+};
+Arg.String = ArgString;
+const ArgBoolean = ({ value, onChange }) => {
+  return /* @__PURE__ */ React.createElement(
+    Input.Checkbox,
+    {
+      className: "w-full",
+      checked: value,
+      onChange: (value2) => {
+        onChange(value2);
+      }
+    }
+  );
+};
+Arg.Boolean = ArgBoolean;
+const ArgDate = ({ value, onChange }) => {
+  return /* @__PURE__ */ React.createElement(
+    DatePicker,
+    {
+      className: "w-full",
+      value,
+      onChange: (value2) => {
+        onChange(value2);
+      }
+    }
+  );
+};
+Arg.Date = ArgDate;
+const ArgJson = ({ value, onChange }) => {
+  return /* @__PURE__ */ React.createElement(
+    Input.TextArea,
+    {
+      validate: (e) => true,
+      className: "w-full",
+      inputClassName: "w-full min-h-[300px]",
+      value,
+      onPressEnter: (value2) => {
+        onChange(value2);
+      },
+      onChange: (value2) => {
+        onChange(value2);
+      }
+    }
+  );
+};
+Arg.Json = ArgJson;
+const ArgUpload = ({ value, onChange }) => {
+  return /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: "file",
+      multiple: true,
+      className: "file-input w-full max-w-xs",
+      onChange: (e) => {
+        onChange(new Array(e.target.files?.length).fill(0).map((_, idx) => e.target.files?.[idx]));
+      }
+    }
+  );
+};
+Arg.Upload = ArgUpload;
+export {
+  Arg as default
+};

package/esm/Signal/Doc.js

@@ -0,0 +1,152 @@
+"use client";
+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__ */ React.createElement("div", null);
+}
+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__ */ 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(Copy, { text: baseUrl }, /* @__PURE__ */ React.createElement("button", { className: "btn btn-outline btn-sm" }, baseUrl, /* @__PURE__ */ React.createElement(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: () => {
+        st.do.setTrySignalType("graphql");
+      }
+    },
+    /* @__PURE__ */ React.createElement(BiLogoGraphql, null),
+    "GraphQL"
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: `btn btn-primary btn-sm ${trySignalType === "restapi" ? "" : "btn-outline"}`,
+      onClick: () => {
+        st.do.setTrySignalType("restapi");
+      }
+    },
+    /* @__PURE__ */ React.createElement(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)
+          st.do.setTryRoles([...roleTypes]);
+      }
+    },
+    "All"
+  ), roleTypes.map((roleType) => /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      key: roleType,
+      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));
+      }
+    },
+    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(BiLock, null), " ", [
+    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__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      onClick: () => {
+        setModalOpen(true);
+        setJwt(tryJwt);
+      }
+    },
+    children
+  ), /* @__PURE__ */ React.createElement(
+    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: () => {
+            st.set(
+              decodedAccount ? { tryJwt: jwt, tryAccount: decodedAccount } : { tryJwt: null, tryAccount: defaultAccount }
+            );
+            setModalOpen(false);
+          }
+        },
+        /* @__PURE__ */ React.createElement(BiLock, null),
+        " Set Authorization"
+      )
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "w-full" }, /* @__PURE__ */ React.createElement("div", null, "Current JWT"), /* @__PURE__ */ React.createElement(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(
+      Input.TextArea,
+      {
+        inputClassName: "w-full",
+        value: accountStr,
+        onChange: () => true,
+        validate: () => true,
+        rows: 10
+      }
+    ), decodedAccount ? /* @__PURE__ */ React.createElement("div", { className: "absolute top-4 right-4" }, /* @__PURE__ */ React.createElement(Copy, { text: accountStr }, /* @__PURE__ */ React.createElement("button", { className: "btn btn-sm" }, /* @__PURE__ */ React.createElement(AiOutlineCopy, null), " 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__ */ 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 }));
+  }));
+};
+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(GraphQL.Endpoints, { refName })));
+};
+Doc.DocSignal = DocSignal;
+const Zone = ({ refName, openAll }) => {
+  const { l } = usePage();
+  const trySingnalType = 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(GraphQL.Endpoints, { refName, openAll }) : /* @__PURE__ */ React.createElement(RestApi.Endpoints, { refName, openAll }), /* @__PURE__ */ React.createElement("div", { className: "text-2xl font-bold" }, "Web Socket"), /* @__PURE__ */ React.createElement(WebSocket.Endpoints, { refName, openAll }));
+};
+Doc.Zone = Zone;
+export {
+  Doc as default
+};