@akanjs/ui 0.0.150 → 0.0.151

package/esm/Signal/Response.js

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

package/esm/Signal/RestApi.js

@@ -0,0 +1,234 @@
+"use client";
+import { baseClientEnv, getNonArrayModel, isGqlScalar } from "@akanjs/base";
+import { getGqlTypeStr } from "@akanjs/constant";
+import { usePage } from "@akanjs/next";
+import {
+  getArgMetas,
+  getControllerPath,
+  getControllerPrefix,
+  getExampleData,
+  getGqlMetas,
+  getSigMeta,
+  getSignalRefsOnStorage
+} from "@akanjs/signal";
+import { st } from "@akanjs/store";
+import React, { useMemo, useState } from "react";
+import { AiOutlineApi, AiOutlineCopy, AiOutlineFileWord, AiOutlineSend } from "react-icons/ai";
+import { Copy } from "../Copy";
+import { Signal } from ".";
+import Arg from "./Arg";
+import Response from "./Response";
+function RestApi() {
+  return /* @__PURE__ */ React.createElement("div", null);
+}
+const RestApiEndpoints = ({ refName, endpoints, openAll, httpUri }) => {
+  const sigRefs = getSignalRefsOnStorage(refName);
+  if (!sigRefs.length)
+    return null;
+  const tryRoles = st.use.tryRoles();
+  const gqlInfos = sigRefs.reduce(
+    (acc, sigRef) => [...acc, ...getGqlMetas(sigRef).map((gqlMeta) => ({ key: gqlMeta.key, gqlMeta, sigRef }))],
+    []
+  ).filter(({ key }) => !endpoints || endpoints.includes(key)).sort((a, b) => a.key > b.key ? 1 : -1).filter(({ gqlMeta }) => gqlMeta.signalOption.onlyFor !== "graphql").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__ */ React.createElement("div", null, gqlInfos.map(({ gqlMeta, sigRef }, idx) => /* @__PURE__ */ React.createElement(RestApiEndpoint, { key: idx, sigRef, gqlMeta, open: openAll, httpUri })));
+};
+RestApi.Endpoints = RestApiEndpoints;
+const RestApiEndpoint = ({ sigRef, gqlMeta, open, httpUri }) => {
+  const { l } = usePage();
+  const sigMeta = getSigMeta(sigRef);
+  const [viewStatus, setViewStatus] = useState("doc");
+  const [argMetas] = getArgMetas(sigRef, gqlMeta.key);
+  const queryArgMetas = argMetas.filter((argMeta) => argMeta.type === "Query");
+  const paramArgMetas = argMetas.filter((argMeta) => argMeta.type === "Param");
+  const bodyArgMetas = argMetas.filter((argMeta) => argMeta.type === "Body");
+  const uploadArgMetas = argMetas.filter((argMeta) => argMeta.type === "Upload");
+  const prefix = getControllerPrefix(sigMeta);
+  const path = getControllerPath(gqlMeta, paramArgMetas);
+  return /* @__PURE__ */ React.createElement("div", { className: "collapse-arrow bg-base-300 collapse my-1" }, /* @__PURE__ */ React.createElement("input", { type: "checkbox", checked: open }), /* @__PURE__ */ React.createElement("div", { className: "collapse-title" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React.createElement("div", { className: `btn btn-xs w-16 ${gqlMeta.type === "Query" ? "btn-success" : "btn-accent"}` }, gqlMeta.type === "Query" ? "GET" : "POST"), prefix ? `/${prefix}` : "", "/", path, " ", /* @__PURE__ */ React.createElement("span", { className: "text-lg" }, "(", l.api(sigMeta.refName, gqlMeta.key), ")"))), /* @__PURE__ */ React.createElement("div", { className: "collapse-content bg-base-200 w-full" }, /* @__PURE__ */ React.createElement("div", { className: "mt-4 text-lg" }, /* @__PURE__ */ React.createElement("div", { className: "text-lg font-extrabold" }, "Description"), /* @__PURE__ */ React.createElement("hr", { className: "my-2 border-[0.1px] border-gray-400" }), gqlMeta.guards.some((guard) => guard !== "None") ? /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 pb-3 pl-3 text-base font-normal" }, "- Guards:", gqlMeta.guards.map((guard) => /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      className: `badge ${guard === "Public" ? "badge-success" : guard === "SuperAdmin" ? "badge-error" : guard === "Admin" ? "badge-error" : guard === "User" ? "badge-accent" : guard === "Owner" ? "badge-accent" : guard === "Every" ? "badge-warning" : ""}`,
+      key: guard
+    },
+    guard
+  ))) : null, /* @__PURE__ */ React.createElement("div", { className: "pb-3 pl-3 text-base font-normal" }, "- ", l.apidesc(sigMeta.refName, gqlMeta.key))), /* @__PURE__ */ React.createElement("div", { className: "my-4 flex w-full gap-5 px-5" }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick: () => {
+        setViewStatus("doc");
+      },
+      className: `btn btn-success w-1/2 ${viewStatus === "doc" ? "" : "btn-outline"}`
+    },
+    /* @__PURE__ */ React.createElement(AiOutlineFileWord, { className: "text-xl" }),
+    " View Doc"
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick: () => {
+        setViewStatus("test");
+      },
+      className: `btn btn-primary w-1/2 ${viewStatus === "test" ? "" : "btn-outline"}`
+    },
+    /* @__PURE__ */ React.createElement(AiOutlineApi, { className: "text-xl" }),
+    " Restful API"
+  )), viewStatus === "doc" ? /* @__PURE__ */ React.createElement(
+    RestApiInterface,
+    {
+      sigRef,
+      gqlMeta,
+      queryArgMetas,
+      paramArgMetas,
+      bodyArgMetas,
+      uploadArgMetas
+    }
+  ) : /* @__PURE__ */ React.createElement(
+    RestApiTry,
+    {
+      sigRef,
+      gqlMeta,
+      queryArgMetas,
+      paramArgMetas,
+      bodyArgMetas,
+      uploadArgMetas,
+      httpUri
+    }
+  )));
+};
+RestApi.Endpoint = RestApiEndpoint;
+const RestApiInterface = ({
+  sigRef,
+  gqlMeta,
+  queryArgMetas,
+  paramArgMetas,
+  bodyArgMetas,
+  uploadArgMetas
+}) => {
+  const sigMeta = getSigMeta(sigRef);
+  const [returnRef, arrDepth] = getNonArrayModel(gqlMeta.returns());
+  const isReturnModelType = !isGqlScalar(returnRef);
+  return /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col gap-4" }, uploadArgMetas.length ? /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-lg font-extrabold" }, "Form data upload"), /* @__PURE__ */ React.createElement("div", { className: "bg-base-100 overflow-x-auto rounded-md p-3" }, /* @__PURE__ */ React.createElement(Arg.Table, { sigMeta, gqlMeta, argMetas: uploadArgMetas }))) : null, paramArgMetas.length ? /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-lg font-extrabold" }, "Parameters"), /* @__PURE__ */ React.createElement("div", { className: "bg-base-100 overflow-x-auto rounded-md p-3" }, /* @__PURE__ */ React.createElement(Arg.Table, { sigMeta, gqlMeta, argMetas: paramArgMetas }))) : null, queryArgMetas.length ? /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-lg font-extrabold" }, "Query"), /* @__PURE__ */ React.createElement("div", { className: "bg-base-100 overflow-x-auto rounded-md p-3" }, /* @__PURE__ */ React.createElement(Arg.Table, { sigMeta, gqlMeta, argMetas: queryArgMetas }))) : null, bodyArgMetas.length ? /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-lg font-extrabold" }, "Body"), /* @__PURE__ */ React.createElement("div", { className: "bg-base-100 overflow-x-auto rounded-md p-3" }, /* @__PURE__ */ React.createElement(Arg.Table, { sigMeta, gqlMeta, argMetas: bodyArgMetas }))) : null, /* @__PURE__ */ React.createElement("div", { className: "text-lg font-bold" }, /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col gap-2 rounded-md font-normal md:flex-row" }, /* @__PURE__ */ React.createElement("div", { className: "w-full md:w-1/2" }, /* @__PURE__ */ React.createElement("div", { className: "text-lg font-extrabold" }, "Response Type"), /* @__PURE__ */ React.createElement("div", { className: "bg-base-100 max-h-[500px] overflow-auto rounded-md p-4 md:h-[500px]" }, "Returns: ", /* @__PURE__ */ React.createElement(Signal.Object.Type, { objRef: returnRef, arrDepth }), isReturnModelType ? /* @__PURE__ */ React.createElement(Signal.Object.Detail, { objRef: returnRef }) : null)), /* @__PURE__ */ React.createElement("div", { className: "w-full md:w-1/2" }, /* @__PURE__ */ React.createElement("div", { className: "text-lg font-extrabold" }, "Response Example"), /* @__PURE__ */ React.createElement(Response.Example, { sigRef, gqlMeta })))));
+};
+RestApi.Interface = RestApiInterface;
+const RestApiTry = ({
+  sigRef,
+  gqlMeta,
+  queryArgMetas,
+  paramArgMetas,
+  bodyArgMetas,
+  uploadArgMetas,
+  httpUri = baseClientEnv.serverHttpUri
+}) => {
+  const sigMeta = getSigMeta(sigRef);
+  const tryJwt = st.use.tryJwt();
+  const paramExample = useMemo(() => getExampleData(paramArgMetas, "restapi"), []);
+  const queryExample = useMemo(() => getExampleData(queryArgMetas, "restapi"), []);
+  const bodyExample = useMemo(() => JSON.stringify(getExampleData(bodyArgMetas, "restapi"), null, 2), []);
+  const [paramRequest, setParamRequest] = useState(paramExample);
+  const [queryRequest, setQueryRequest] = useState(queryExample);
+  const [bodyRequest, setBodyRequest] = useState(bodyExample);
+  const [uploadRequest, setUploadRequest] = useState({});
+  const [response, setResponse] = useState({
+    status: "idle",
+    data: null
+  });
+  const method = gqlMeta.type === "Query" ? "GET" : "POST";
+  const prefix = getControllerPrefix(sigMeta);
+  const path = getControllerPath(gqlMeta, paramArgMetas);
+  const queryString = new URLSearchParams(
+    Object.fromEntries(
+      queryArgMetas.map((argMeta) => {
+        const value = queryRequest[argMeta.name];
+        if (value === void 0 || value === null || value === "" || Array.isArray(value) && value.length === 0)
+          return null;
+        const [argRef] = getNonArrayModel(argMeta.returns());
+        if (getGqlTypeStr(argRef) === "JSON")
+          return [argMeta.name, btoa(value)];
+        return [argMeta.name, value];
+      }).filter((entry) => !!entry)
+    )
+  ).toString();
+  const requestPath = paramArgMetas.reduce(
+    (path2, argMeta) => path2.replace(`:${argMeta.name}`, paramRequest[argMeta.name]),
+    `${prefix ? `/${prefix}` : ""}/${path}`
+  ) + (queryString.length ? `?${queryString}` : "");
+  const requestUrl = `${httpUri}${requestPath}`;
+  const getBody = () => {
+    if (!uploadArgMetas.length)
+      return bodyRequest;
+    const formData = new FormData();
+    const bodyObj = JSON.parse(bodyRequest);
+    bodyArgMetas.forEach((argMeta) => {
+      const value = bodyObj[argMeta.name];
+      if (value === void 0 || value === null || value === "")
+        return null;
+      formData.append(argMeta.name, value);
+    });
+    uploadArgMetas.forEach((argMeta) => {
+      const fileList = uploadRequest[argMeta.name];
+      Array.from(fileList).forEach((file) => {
+        formData.append(argMeta.name, file);
+      });
+    });
+    return formData;
+  };
+  const onSend = async () => {
+    setResponse({ status: "loading", data: null });
+    const res = await fetch(requestUrl, {
+      method,
+      headers: {
+        "Content-Type": uploadArgMetas.length ? "application/form-data" : "application/json",
+        Authorization: `Bearer ${tryJwt}`
+      },
+      ...method === "POST" ? { body: getBody() } : {}
+    });
+    const data = await res.json();
+    setResponse(res.ok ? { status: "success", data } : { status: "error", data });
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 text-lg" }, /* @__PURE__ */ React.createElement("div", { className: "text-lg font-extrabold" }, "Request URL:"), /* @__PURE__ */ React.createElement(Copy, { text: `${httpUri}${requestPath}` }, /* @__PURE__ */ React.createElement("button", { className: "btn btn-sm btn-outline" }, requestPath, " ", /* @__PURE__ */ React.createElement(AiOutlineCopy, null)))), uploadArgMetas.length ? /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-lg" }, "Form data uplaod"), uploadArgMetas.map((argMeta) => /* @__PURE__ */ React.createElement(
+    Arg.FormData,
+    {
+      key: argMeta.name,
+      argMeta,
+      value: uploadRequest[argMeta.name],
+      onChange: (fileList) => {
+        setUploadRequest({ ...uploadRequest, [argMeta.name]: fileList });
+      }
+    }
+  ))) : null, paramArgMetas.length ? /* @__PURE__ */ React.createElement("div", { className: "border-t border-gray-400 pt-5" }, /* @__PURE__ */ React.createElement("div", { className: "text-lg font-extrabold" }, "Parameters"), paramArgMetas.map((argMeta, idx) => /* @__PURE__ */ React.createElement(
+    Arg.Param,
+    {
+      key: idx,
+      argMeta,
+      value: paramRequest[argMeta.name],
+      onChange: (value) => {
+        setParamRequest({ ...paramRequest, [argMeta.name]: value });
+      }
+    }
+  ))) : null, queryArgMetas.length ? /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-lg font-extrabold" }, "Queries"), queryArgMetas.map((argMeta, idx) => /* @__PURE__ */ React.createElement(
+    Arg.Query,
+    {
+      key: idx,
+      argMeta,
+      value: queryRequest[argMeta.name] ?? "",
+      onChange: (value) => {
+        setQueryRequest({ ...queryRequest, [argMeta.name]: value });
+      }
+    }
+  ))) : null, bodyArgMetas.length ? /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-lg" }, "Body"), /* @__PURE__ */ React.createElement(Arg.Json, { value: bodyRequest, onChange: setBodyRequest })) : null, /* @__PURE__ */ React.createElement("div", { className: "border-b border-gray-400 pb-5" }, /* @__PURE__ */ React.createElement("button", { className: "btn bg-success w-full", onClick: () => void onSend() }, /* @__PURE__ */ React.createElement(AiOutlineSend, { className: "-mt-0.5" }), " Send Request")), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-lg font-extrabold" }, "Response"), /* @__PURE__ */ React.createElement(Response.Result, { status: response.status, data: response.data })));
+};
+RestApi.Try = RestApiTry;
+export {
+  RestApi as default
+};

package/esm/Signal/WebSocket.js

@@ -0,0 +1,39 @@
+"use client";
+import { getGqlMetas, getSignalRefsOnStorage } from "@akanjs/signal";
+import { st } from "@akanjs/store";
+import Message from "./Message";
+import PubSub from "./PubSub";
+function WebSocket() {
+  return /* @__PURE__ */ React.createElement("div", null);
+}
+const WebSocketEndpoints = ({ 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 === "Query" || gqlMeta.type === "Mutation")
+      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__ */ React.createElement("div", null, gqlInfos.map(({ gqlMeta, sigRef }, idx) => {
+    if (gqlMeta.type === "Pubsub") {
+      return /* @__PURE__ */ React.createElement(PubSub.Endpoint, { key: idx, sigRef, gqlMeta, open: openAll });
+    } else {
+      return /* @__PURE__ */ React.createElement(Message.Endpoint, { key: idx, sigRef, gqlMeta, open: openAll });
+    }
+  }));
+};
+WebSocket.Endpoints = WebSocketEndpoints;
+export {
+  WebSocket as default
+};

package/esm/Signal/index.js

@@ -0,0 +1,13 @@
+import Arg from "./Arg";
+import Doc from "./Doc";
+import GraphQL from "./GraphQL";
+import Listener from "./Listener";
+import Message from "./Message";
+import Object from "./Object";
+import PubSub from "./PubSub";
+import RestApi from "./RestApi";
+import WebSocket from "./WebSocket";
+const Signal = { Doc, Object, GraphQL, RestApi, Arg, Listener, WebSocket, PubSub, Message };
+export {
+  Signal
+};

package/esm/System/CSR.js

@@ -0,0 +1,357 @@
+"use client";
+import { clsx, device, getPathInfo, router, useCsr } from "@akanjs/client";
+import { usePushNoti } from "@akanjs/next";
+import { st } from "@akanjs/store";
+import { a } from "@react-spring/web";
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+import { FontFace } from "../FontFace";
+import { Load } from "../Load";
+import { Client, ClientPathWrapper } from "./Client";
+import { Common } from "./Common";
+const CSR = ({ children }) => {
+  return /* @__PURE__ */ React.createElement("div", null);
+};
+const CSRProvider = ({
+  className,
+  appName,
+  params,
+  head,
+  env,
+  theme,
+  prefix,
+  usePage,
+  fetch,
+  children,
+  gaTrackingId,
+  fonts,
+  layoutStyle = "web",
+  of,
+  fetchPing,
+  fetchMe,
+  fetchSelf
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    Load.Page,
+    {
+      of,
+      loader: async () => {
+        const { lang } = await params;
+        return { lang };
+      },
+      render: ({ lang }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Client.Wrapper, { theme }, /* @__PURE__ */ React.createElement(
+        CSRWrapper,
+        {
+          className,
+          appName,
+          lang,
+          head,
+          fonts,
+          prefix,
+          layoutStyle
+        },
+        children,
+        /* @__PURE__ */ React.createElement(Client.Inner, null),
+        /* @__PURE__ */ React.createElement(CSRInner, null)
+      )), /* @__PURE__ */ React.createElement(
+        Common.Wrapper,
+        {
+          fetch,
+          environment: env.environment,
+          fetchPing,
+          fetchMe,
+          fetchSelf,
+          render: ({ mePromise, selfPromise }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+            Client.Bridge,
+            {
+              lang,
+              env,
+              mePromise,
+              selfPromise,
+              theme,
+              prefix,
+              gaTrackingId
+            }
+          ), /* @__PURE__ */ React.createElement(CSRBridge, { lang, prefix }))
+        }
+      ))
+    }
+  );
+};
+CSR.Provider = CSRProvider;
+const CSRWrapper = ({
+  children,
+  lang,
+  head,
+  fonts = [],
+  appName,
+  className,
+  prefix,
+  layoutStyle = "web"
+}) => {
+  const {
+    frameRootRef,
+    topSafeAreaRef,
+    bottomSafeAreaRef,
+    topInset,
+    topLeftAction,
+    bottomInset,
+    topSafeArea,
+    bottomSafeArea,
+    pathRoutes
+  } = useCsr();
+  const csrLoaded = st.use.csrLoaded();
+  const { router: reactRouter } = useCsr();
+  useEffect(() => {
+    if (!router.isInitialized)
+      router.init({ type: "csr", lang, prefix, router: reactRouter });
+    st.do.setCsrLoaded(true);
+  }, []);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, fonts.map((font, idx) => /* @__PURE__ */ React.createElement(FontFace, { key: idx, font })), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      id: "frameRoot",
+      className: clsx(className, "h-screen w-full overflow-hidden", {
+        "bg-base-200": layoutStyle === "mobile"
+      }),
+      ref: frameRootRef
+    },
+    /* @__PURE__ */ React.createElement("div", { id: "pageContainers", className: "isolate" }),
+    csrLoaded ? pathRoutes.map((pathRoute) => /* @__PURE__ */ React.createElement(CSRPageContainer, { key: pathRoute.path, pathRoute, prefix, layoutStyle })) : null,
+    /* @__PURE__ */ React.createElement(
+      a.div,
+      {
+        id: "topSafeArea",
+        className: clsx("bg-base-100 fixed inset-x-0 top-0", {}),
+        ref: topSafeAreaRef,
+        style: topSafeArea?.containerStyle
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      a.div,
+      {
+        id: "topInsetContainer",
+        className: clsx("bg-base-100 fixed inset-x-0 isolate", {}),
+        style: topInset?.containerStyle
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      a.div,
+      {
+        id: "topLeftActionContainer",
+        className: clsx("aspect-1 absolute top-0 isolate flex items-center justify-center", {}),
+        style: topLeftAction?.containerStyle
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      a.div,
+      {
+        id: "bottomInsetContainer",
+        className: clsx("fixed inset-x-0 isolate", {}),
+        style: bottomInset?.containerStyle
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      a.div,
+      {
+        id: "bottomSafeArea",
+        className: "bg-base-100 fixed inset-x-0",
+        ref: bottomSafeAreaRef,
+        style: bottomSafeArea?.containerStyle
+      }
+    )
+  ));
+};
+CSR.Wrapper = CSRWrapper;
+const CSRInner = () => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null);
+};
+CSR.Inner = CSRInner;
+const CSRBridge = ({ lang, prefix = "" }) => {
+  const pushNoti = usePushNoti();
+  const { location, pageContentRef } = useCsr();
+  useEffect(() => {
+    const { path, pathname } = getPathInfo(location.pathname, lang, prefix);
+    st.do.set({
+      params: location.params,
+      searchParams: location.searchParams,
+      pageState: location.pathRoute.pageState,
+      pathname,
+      path
+    });
+  }, [location]);
+  useEffect(() => {
+    device.listenKeyboardChanged(st.do.setKeyboardHeight);
+    device.setPageContentRef(pageContentRef);
+    if (device.info.platform === "web")
+      return;
+    void (async () => {
+      await pushNoti.init();
+      const token = await pushNoti.getToken();
+      if (!token)
+        return;
+      st.do.setDeviceToken(token);
+    })();
+    return () => {
+      device.unlistenKeyboardChanged();
+    };
+  }, []);
+  return null;
+};
+CSR.Bridge = CSRBridge;
+const CSRPageContainer = ({ pathRoute, prefix, layoutStyle }) => {
+  const {
+    history,
+    location: currentLocation,
+    page: currentPage,
+    pageContentRef: currentPageContentRef,
+    pageClassName: currentPageClassName,
+    pageBind: currentPageBind,
+    prevLocation,
+    prevPage,
+    prevPageContentRef,
+    topInset,
+    bottomInset,
+    topLeftAction
+  } = useCsr();
+  const pageType = pathRoute === currentLocation.pathRoute ? "current" : pathRoute === prevLocation?.pathRoute ? "prev" : pathRoute.pageState.cache && history.current.cachedLocationMap.has(pathRoute.path) ? "cached" : null;
+  if (!pageType)
+    return null;
+  const pageContainers = document.getElementById("pageContainers");
+  const topInsetContainer = document.getElementById("topInsetContainer");
+  const bottomInsetContainer = document.getElementById("bottomInsetContainer");
+  const topLeftActionContainer = document.getElementById("topLeftActionContainer");
+  if (!pageContainers || !topInsetContainer || !bottomInsetContainer || !topLeftActionContainer)
+    return null;
+  const {
+    location,
+    page,
+    pageContentRef,
+    pageClassName,
+    pageBind,
+    topInsetContentStyle,
+    topLeftActionContentStyle,
+    bottomInsetContentStyle,
+    zIndex
+  } = pageType === "current" ? {
+    location: currentLocation,
+    page: currentPage,
+    pageContentRef: currentPageContentRef,
+    pageClassName: currentPageClassName,
+    pageBind: currentPageBind,
+    topInsetContentStyle: topInset?.contentStyle,
+    topLeftActionContentStyle: topLeftAction?.contentStyle,
+    bottomInsetContentStyle: bottomInset?.contentStyle,
+    zIndex: history.current.idx
+  } : pageType === "prev" ? {
+    location: prevLocation,
+    page: prevPage,
+    pageContentRef: prevPageContentRef,
+    pageClassName: "",
+    pageBind: () => ({}),
+    topInsetContentStyle: topInset?.prevContentStyle,
+    topLeftActionContentStyle: topLeftAction?.prevContentStyle,
+    bottomInsetContentStyle: bottomInset?.prevContentStyle,
+    zIndex: history.current.idxMap.get(prevLocation?.pathname ?? "") ?? 0
+  } : {
+    location: history.current.cachedLocationMap.get(pathRoute.path),
+    page: null,
+    pageContentRef: null,
+    pageClassName: "",
+    pageBind: () => ({}),
+    topInsetContentStyle: void 0,
+    topLeftActionContentStyle: void 0,
+    bottomInsetContentStyle: void 0,
+    zIndex: 0
+  };
+  if (!location)
+    return null;
+  const Page = pathRoute.Page;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, createPortal(
+    /* @__PURE__ */ React.createElement(
+      a.div,
+      {
+        id: `pageContainer-${pathRoute.path}`,
+        style: { ...page?.containerStyle ?? {}, zIndex },
+        className: clsx("absolute top-0 left-0 isolate w-screen", {
+          absolute: pageType !== "current",
+          hidden: pageType === "cached"
+        })
+      },
+      /* @__PURE__ */ React.createElement(
+        ClientPathWrapper,
+        {
+          id: "pageContent",
+          wrapperRef: pageContentRef,
+          bind: pageBind,
+          className: clsx("bg-base-100 relative isolate w-full overflow-x-hidden shadow-inner", {
+            "bg-base-100 relative isolate overflow-x-hidden shadow-inner": pageType === "current",
+            "isolate h-screen w-screen overflow-hidden": pageType === "prev",
+            [pageClassName]: pathRoute.pageState.gesture
+          }),
+          style: page?.contentStyle,
+          pageType,
+          location,
+          prefix
+        },
+        pathRoute.Layouts.reduceRight(
+          (children, Layout) => {
+            return /* @__PURE__ */ React.createElement(Layout, { params: location.params, searchParams: location.searchParams }, children);
+          },
+          /* @__PURE__ */ React.createElement(Page, { params: location.params, searchParams: location.searchParams })
+        )
+      )
+    ),
+    pageContainers
+  ), createPortal(
+    /* @__PURE__ */ React.createElement(
+      ClientPathWrapper,
+      {
+        id: `topInsetContent-${pathRoute.path}`,
+        className: clsx("absolute top-0 left-0 isolate size-full", { hidden: pageType === "cached" }),
+        style: { ...topInsetContentStyle, zIndex },
+        pageType,
+        location,
+        prefix
+      }
+    ),
+    topInsetContainer
+  ), createPortal(
+    /* @__PURE__ */ React.createElement(
+      ClientPathWrapper,
+      {
+        id: `topLeftActionContent-${pathRoute.path}`,
+        className: clsx("absolute left-0 isolate flex h-full items-center justify-center", {
+          hidden: pageType === "cached"
+        }),
+        style: { ...topLeftActionContentStyle, zIndex },
+        pageType,
+        location,
+        prefix
+      }
+    ),
+    topLeftActionContainer
+  ), createPortal(
+    /* @__PURE__ */ React.createElement(
+      ClientPathWrapper,
+      {
+        id: `bottomInsetContent-${pathRoute.path}`,
+        className: clsx("bottom-0 isolate size-full", {
+          hidden: pageType === "cached",
+          absolute: pageType === "prev",
+          relative: pageType === "current"
+        }),
+        style: { ...bottomInsetContentStyle, zIndex },
+        pageType,
+        location,
+        prefix
+      }
+    ),
+    bottomInsetContainer
+  ));
+};
+var CSR_default = CSRProvider;
+export {
+  CSR,
+  CSR_default as default
+};