@akanjs/ui 0.0.149 → 0.0.151

package/esm/System/Client.js

@@ -0,0 +1,191 @@
+"use client";
+import { dayjs, logo } from "@akanjs/base";
+import {
+  clsx,
+  defaultPageState,
+  device,
+  getPathInfo,
+  initAuth,
+  pathContext,
+  router,
+  setCookie,
+  storage
+} from "@akanjs/client";
+import { Logger } from "@akanjs/common";
+import { useFetch } from "@akanjs/next";
+import { fetch } from "@akanjs/signal";
+import { st } from "@akanjs/store";
+import { a } from "@react-spring/web";
+import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
+import { ThemeProvider, useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { Gtag } from "./Gtag";
+import { Messages } from "./Messages";
+const Client = () => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null);
+};
+const ClientWrapper = ({ children, theme }) => {
+  useEffect(() => {
+    Logger.rawLog(logo);
+  }, []);
+  return /* @__PURE__ */ React.createElement(ThemeProvider, { defaultTheme: theme }, children);
+};
+Client.Wrapper = ClientWrapper;
+const ClientPathWrapper = ({
+  bind,
+  wrapperRef,
+  pageType = "current",
+  location,
+  prefix = "",
+  children,
+  layoutStyle = "web",
+  ...props
+}) => {
+  const pathname = location?.pathname ?? usePathname();
+  const params = location?.params ?? useParams();
+  const searchParams = location?.searchParams ?? Object.fromEntries(useSearchParams());
+  const search = location?.search ?? (typeof window !== "undefined" ? window.location.search : "");
+  const lang = params.lang;
+  const firstPath = pathname.split("/")[2];
+  const pathRoute = location?.pathRoute ?? {
+    path: "/" + pathname.split("/").slice(2).join("/"),
+    pathSegments: pathname.split("/").slice(2),
+    Page: () => /* @__PURE__ */ React.createElement(React.Fragment, null),
+    pageState: defaultPageState,
+    RootLayouts: [],
+    Layouts: []
+  };
+  const [gestureEnabled, setGestureEnabled] = useState(true);
+  return /* @__PURE__ */ React.createElement(
+    pathContext.Provider,
+    {
+      value: {
+        pageType,
+        location: { pathname, params, searchParams, search, pathRoute },
+        gestureEnabled,
+        setGestureEnabled
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      a.div,
+      {
+        ...bind && pathRoute.pageState.gesture && gestureEnabled ? bind() : {},
+        className: clsx("group/path size-full"),
+        ref: wrapperRef,
+        ...props,
+        "data-lang": lang,
+        "data-basepath": prefix,
+        "data-firstpath": firstPath
+      },
+      children
+    )
+  );
+};
+const ClientBridge = ({ env, lang, mePromise, selfPromise, theme, prefix, gaTrackingId }) => {
+  const uiOperation = st.use.uiOperation();
+  const pathname = st.use.pathname();
+  const params = st.use.params();
+  const searchParams = st.use.searchParams();
+  const { fulfilled: meFullfilled, value: me } = useFetch(mePromise);
+  const { fulfilled: selfFullfilled, value: self } = useFetch(selfPromise);
+  const language = params.lang ?? lang;
+  const path = "/" + pathname.split("/").slice(2).join("/");
+  const { setTheme, themes, theme: nextTheme } = useTheme();
+  const storeTheme = st.use.theme();
+  useEffect(() => {
+    if (uiOperation !== "sleep")
+      return;
+    if (!meFullfilled || !selfFullfilled)
+      return;
+    const initTheme = async () => {
+      if (theme) {
+        setTheme(theme);
+        return;
+      }
+      const localTheme = await storage.getItem("theme");
+      if (typeof localTheme === "string" && themes.includes(localTheme)) {
+        setTheme(localTheme);
+      } else
+        setTheme("system");
+    };
+    void initTheme();
+    setCookie("siteurl", window.location.origin);
+    dayjs.locale(language);
+    initAuth({ jwt: searchParams.jwt });
+    st.set({
+      prefix,
+      uiOperation: "loading",
+      ...me ? { me: fetch.crystalizeAdmin?.(me) } : {},
+      ...self ? { self: fetch.crystalizeUser?.(self) } : {}
+    });
+    setTimeout(() => {
+      st.set({ uiOperation: "idle" });
+    }, 2e3);
+  }, [meFullfilled, selfFullfilled]);
+  useEffect(() => {
+    if (theme && storeTheme !== nextTheme)
+      setTheme(storeTheme);
+  }, [storeTheme]);
+  useEffect(() => {
+    if (nextTheme && storeTheme !== nextTheme)
+      st.do.setTheme(nextTheme);
+  }, []);
+  useEffect(() => {
+    const devMode = localStorage.getItem("devMode");
+    if (devMode)
+      st.do.setDevMode(devMode === "true");
+  }, []);
+  useEffect(() => {
+    if (uiOperation !== "sleep")
+      return;
+    const handleResize = () => {
+      st.do.setWindowSize();
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  useEffect(() => {
+    setCookie("path", path);
+    Logger.log(`pathChange-finished:${path}`);
+  }, [pathname]);
+  return gaTrackingId && /* @__PURE__ */ React.createElement(Gtag, { trackingId: gaTrackingId });
+};
+Client.Bridge = ClientBridge;
+const ClientInner = () => {
+  const uiOperation = st.use.uiOperation();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { id: "modal-root" }), uiOperation === "idle" ? /* @__PURE__ */ React.createElement(Messages, null) : null);
+};
+Client.Inner = ClientInner;
+const ClientNextBridge = ({ lang, prefix = "" }) => {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const params = useParams();
+  const nextRouter = useRouter();
+  useEffect(() => {
+    router.init({ type: "next", side: "client", router: nextRouter, lang, prefix });
+    void device.init({ lang });
+  }, []);
+  useEffect(() => {
+    const { path } = getPathInfo(pathname, lang, prefix);
+    st.set({ pathname, path });
+  }, [pathname]);
+  useEffect(() => {
+    st.set({ params });
+  }, [params]);
+  useEffect(() => {
+    st.set({ searchParams: Object.fromEntries(searchParams) });
+  }, [searchParams]);
+  return null;
+};
+Client.NextBridge = ClientNextBridge;
+export {
+  Client,
+  ClientBridge,
+  ClientInner,
+  ClientNextBridge,
+  ClientPathWrapper,
+  ClientWrapper
+};

package/esm/System/Common.js

@@ -0,0 +1,45 @@
+import "dayjs/locale/ko";
+import { getAccount } from "@akanjs/client";
+import { Load } from "../Load";
+import { HealthCheck } from "./HealthCheck";
+const Common = () => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null);
+};
+const CommonWrapper = ({
+  fetch,
+  environment,
+  render,
+  fetchPing,
+  fetchMe = fetch.me,
+  fetchSelf = fetch.getSelf
+}) => {
+  const account = getAccount();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(HealthCheck, { fetchPing }), /* @__PURE__ */ React.createElement(
+    Load.Page,
+    {
+      of: CommonWrapper,
+      loader: async () => {
+        const mePromise = (async () => {
+          try {
+            return account.me ? await fetchMe?.({ crystalize: false }) : null;
+          } catch (e) {
+            return null;
+          }
+        })();
+        const selfPromise = (async () => {
+          try {
+            return account.self ? await fetchSelf?.({ crystalize: false }) : null;
+          } catch (e) {
+            return null;
+          }
+        })();
+        return Promise.resolve({ mePromise, selfPromise });
+      },
+      render
+    }
+  ));
+};
+Common.Wrapper = CommonWrapper;
+export {
+  Common
+};

package/esm/System/DevModeToggle.js

@@ -0,0 +1,19 @@
+"use client";
+import { st } from "@akanjs/store";
+const DevModeToggle = () => {
+  const devMode = st.use.devMode();
+  return /* @__PURE__ */ React.createElement("div", { className: "form-control" }, /* @__PURE__ */ React.createElement("label", { className: "label cursor-pointer" }, /* @__PURE__ */ React.createElement("span", { className: "label-text mr-2 text-sm whitespace-nowrap" }, "Dev Mode"), /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: "checkbox",
+      className: "toggle",
+      checked: devMode,
+      onChange: (e) => {
+        st.do.setDevMode(e.target.checked);
+      }
+    }
+  )));
+};
+export {
+  DevModeToggle
+};

package/esm/System/Gtag.js

@@ -0,0 +1,48 @@
+"use client";
+import { st } from "@akanjs/store";
+import { useEffect } from "react";
+const Gtag = ({ trackingId }) => {
+  const pathname = st.use.pathname();
+  const searchParams = st.use.searchParams();
+  const pageview = (url) => {
+    window.gtag?.("config", trackingId, { page_path: url });
+  };
+  const event = ({
+    action,
+    category,
+    label,
+    value
+  }) => {
+    window.gtag?.("event", action, {
+      event_category: category,
+      event_label: label,
+      value
+    });
+  };
+  useEffect(() => {
+    const handleRouteChange = (url) => {
+      pageview(url);
+    };
+    handleRouteChange(
+      pathname + (Object.keys(searchParams).length ? new URLSearchParams(searchParams).toString() : "")
+    );
+  }, [pathname, searchParams]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("script", { async: true, src: `https://www.googletagmanager.com/gtag/js?id=${trackingId}` }), /* @__PURE__ */ React.createElement(
+    "script",
+    {
+      dangerouslySetInnerHTML: {
+        __html: `
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', '${trackingId}', {
+      page_path: window.location.pathname,
+    });
+  `
+      }
+    }
+  ));
+};
+export {
+  Gtag
+};

package/esm/System/HealthCheck.js

@@ -0,0 +1,41 @@
+"use client";
+import { router } from "@akanjs/client";
+import { useInterval } from "@akanjs/next";
+import { fetch } from "@akanjs/signal";
+import { st } from "@akanjs/store";
+import { useEffect } from "react";
+const HealthCheck = ({ fetchPing = () => fetch.ping() }) => {
+  useEffect(() => {
+    void (async () => {
+      const fullPath = router.getFullPath(false);
+      try {
+        await fetchPing();
+        st.do.setConnectStatus("connected");
+        if (window.location.href.includes("/unknown")) {
+          router.back();
+        }
+      } catch (e) {
+        st.do.setConnectStatus("disconnected");
+        router.replace(`/unknown?p=${encodeURIComponent(fullPath)}`);
+      }
+    })();
+  }, []);
+  const pingCheck = async function() {
+    try {
+      await fetchPing();
+    } catch (e) {
+      st.do.setConnectStatus("disconnected");
+      const fullPath = router.getFullPath(false);
+      router.replace(`/unknown?p=${encodeURIComponent(fullPath)}`);
+    }
+  };
+  useInterval(async () => {
+    if (window.location.href.includes("/unknown"))
+      return;
+    await pingCheck();
+  }, 1e4);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null);
+};
+export {
+  HealthCheck
+};

package/esm/System/Messages.js

@@ -0,0 +1,156 @@
+"use client";
+import { clsx } from "@akanjs/client";
+import { msg } from "@akanjs/dictionary";
+import { usePage } from "@akanjs/next";
+import { st } from "@akanjs/store";
+import { useEffect, useState } from "react";
+import {
+  AiOutlineCheckCircle,
+  AiOutlineInfoCircle,
+  AiOutlineLoading3Quarters,
+  AiOutlineQuestionCircle
+} from "react-icons/ai";
+import { BsExclamationCircleFill } from "react-icons/bs";
+let timeOuts = [];
+const Message = ({ content, type = "info", duration, keyForMessage }) => {
+  const pageState = st.use.pageState();
+  const [preBlind, setPreBlind] = useState(false);
+  useEffect(() => {
+    if (!content)
+      return;
+    const existingTimeOut = timeOuts.find((item) => item.key === keyForMessage);
+    if (existingTimeOut) {
+      clearTimeout(existingTimeOut.timeoutId);
+      removeTimeOut(keyForMessage);
+    }
+    const timeoutId = setTimeout(() => {
+      setPreBlind(true);
+    }, duration * 1e3);
+    addTimeOut(keyForMessage, timeoutId);
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [content, keyForMessage, type]);
+  useEffect(() => {
+    if (!preBlind)
+      return;
+    setTimeout(() => {
+      st.do.hideMessage(keyForMessage);
+      removeTimeOut(keyForMessage);
+    }, 100);
+  }, [preBlind]);
+  const addTimeOut = (key, timeoutId) => {
+    const filteredTimeOuts = timeOuts.filter((item) => item.key !== key);
+    timeOuts = [...filteredTimeOuts, { key, timeoutId }];
+  };
+  const removeTimeOut = (key) => {
+    timeOuts = timeOuts.filter((item) => item.key !== key);
+  };
+  const iconClassName = type === "loading" ? "text-info" : `text-${type}`;
+  const getIcon = (type2) => {
+    const icons = {
+      info: /* @__PURE__ */ React.createElement(AiOutlineInfoCircle, { className: clsx("text-2xl", iconClassName) }),
+      success: /* @__PURE__ */ React.createElement(AiOutlineCheckCircle, { className: clsx("text-2xl", iconClassName) }),
+      error: /* @__PURE__ */ React.createElement(BsExclamationCircleFill, { className: clsx("text-2xl", iconClassName) }),
+      warning: /* @__PURE__ */ React.createElement(AiOutlineQuestionCircle, { className: clsx("text-2xl", iconClassName) }),
+      loading: /* @__PURE__ */ React.createElement(AiOutlineLoading3Quarters, { className: clsx("animate-spin text-2xl", iconClassName) })
+    };
+    return icons[type2];
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-state": preBlind,
+      className: "animate-zoomIn data-[state=true]:animate-smaller group w-screen px-6 duration-300 md:max-w-[60%]",
+      style: {
+        paddingTop: pageState.topSafeArea
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: clsx(
+          "typo-body1 text-base-content flex w-full items-center gap-2 rounded-[4px] border px-4 py-2 drop-shadow-lg",
+          {
+            "stroke-base-content bg-primary-content border-[#EEEEEE]": type === "loading" || type === "info",
+            "stroke-success bg-success/80 border-success-border": type === "success",
+            "stroke-error bg-error/80 border-error-border": type === "error",
+            "stroke-warning bg-warning/80 border-warning-border": type === "warning"
+          }
+        )
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "bg-base-100 flex size-6 items-center justify-center rounded-full" }, getIcon(type)),
+      /* @__PURE__ */ React.createElement("span", { className: "text-base-100 truncate whitespace-nowrap" }, content)
+    )
+  );
+};
+const Messages = () => {
+  const messages = st.use.messages();
+  const { l } = usePage();
+  useEffect(() => {
+    Object.assign(msg, {
+      info: (msgKey, option = {}) => {
+        st.do.showMessage({
+          type: "info",
+          key: option.key,
+          duration: option.duration ?? 3,
+          content: l(msgKey, option.data)
+        });
+      },
+      success: (msgKey, option = {}) => {
+        st.do.showMessage({
+          type: "success",
+          key: option.key,
+          duration: option.duration ?? 3,
+          content: l(msgKey, option.data)
+        });
+      },
+      error: (msgKey, option = {}) => {
+        st.do.showMessage({
+          type: "error",
+          key: option.key,
+          duration: option.duration ?? 3,
+          content: l(msgKey, option.data)
+        });
+      },
+      warning: (msgKey, option = {}) => {
+        st.do.showMessage({
+          type: "warning",
+          key: option.key,
+          duration: option.duration ?? 3,
+          content: l(msgKey, option.data)
+        });
+      },
+      loading: (msgKey, option = {}) => {
+        st.do.showMessage({
+          type: "loading",
+          key: option.key,
+          duration: option.duration ?? 3,
+          content: l(msgKey, option.data)
+        });
+      }
+    });
+  }, []);
+  if (!messages.length)
+    return null;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      id: "toast",
+      className: "fixed top-0 left-0 z-[100] mt-[var(--safe-area-top)] flex h-fit w-screen flex-col items-center justify-start gap-2 pt-2"
+    },
+    messages.map((message) => /* @__PURE__ */ React.createElement(
+      Message,
+      {
+        content: message.content,
+        type: message.type,
+        duration: message.duration,
+        key: message.key,
+        keyForMessage: message.key
+      }
+    ))
+  );
+};
+export {
+  Messages
+};

package/esm/System/Reconnect.js

@@ -0,0 +1,45 @@
+"use client";
+import { router } from "@akanjs/client";
+import { useInterval } from "@akanjs/next";
+import { fetch } from "@akanjs/signal";
+import { st } from "@akanjs/store";
+import { useState } from "react";
+import { TbPlugConnected, TbPlugConnectedX } from "react-icons/tb";
+import { Image } from "../Image";
+const Reconnect = ({
+  path,
+  dev = false,
+  fetchPing = fetch.ping
+}) => {
+  const DOTS_LENGTH = 4;
+  const [dots, setDots] = useState(0);
+  const connectStatus = st.use.connectStatus();
+  useInterval(() => {
+    setDots((prev) => (prev + 1) % DOTS_LENGTH);
+  }, 500);
+  const reconnect = async () => {
+    try {
+      st.do.setConnectStatus("connecting");
+      await fetchPing?.();
+      st.do.setConnectStatus("connected");
+      setTimeout(() => {
+        router.replace(`/${path}`);
+      }, 500);
+    } catch (e) {
+      st.do.setConnectStatus("disconnected");
+    }
+  };
+  useInterval(async () => {
+    if (!window.location.href.includes("/unknown"))
+      return;
+    if (connectStatus === "connected")
+      return;
+    await reconnect();
+  }, 5e3);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, dev ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "flex h-screen flex-col items-center justify-center" }, /* @__PURE__ */ React.createElement("div", { className: "bg-base-300 flex w-4/5 flex-col items-center justify-center rounded-md p-5 md:w-1/3" }, /* @__PURE__ */ React.createElement("div", { className: "text-3xl font-bold" }, "Something's wrong!"), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center justify-center pt-5" }, /* @__PURE__ */ React.createElement("div", { className: "py-5" }, connectStatus === "disconnected" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "text-[100px] text-gray-500" }, /* @__PURE__ */ React.createElement(TbPlugConnectedX, null))) : connectStatus === "connecting" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "animate-pulse text-[100px] text-gray-500" }, /* @__PURE__ */ React.createElement(TbPlugConnectedX, null))) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "animate-pop text-[100px] text-white" }, /* @__PURE__ */ React.createElement(TbPlugConnected, null)))), connectStatus === "connected" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", null, "Connected!"), /* @__PURE__ */ React.createElement("div", { className: "animate-pop" }), /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("span", { className: "text-sm text-gray-500" }, "Redirecting to the previous page in some seconds."))) : connectStatus === "connecting" ? /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center" }, /* @__PURE__ */ React.createElement("div", null, "Try reconnecting to the server"), /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, Array.from({ length: DOTS_LENGTH }).map(
+    (_, index) => dots >= index ? /* @__PURE__ */ React.createElement("div", { key: index, className: "visible" }, ".") : /* @__PURE__ */ React.createElement("div", { key: index, className: "invisible" }, ".")
+  ))) : /* @__PURE__ */ React.createElement("div", null, "Server disconnected."))), /* @__PURE__ */ React.createElement("span", { className: "text-center text-sm text-gray-500" }, "*Please check your server status."))) : /* @__PURE__ */ React.createElement("div", { className: "flex h-screen items-center justify-center" }, /* @__PURE__ */ React.createElement("div", { className: "bg-base-300 flex w-4/5 flex-col items-center justify-center rounded-md py-5 md:w-1/3" }, /* @__PURE__ */ React.createElement("div", { className: "text-3xl font-bold" }, "\uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC5B4\uC694!"), /* @__PURE__ */ React.createElement(Image, { className: "mt-5", src: "/deadBot.svg", alt: "deadBot", color: "gray", width: 120, height: 120 }), /* @__PURE__ */ React.createElement("div", { className: "text-lg" }, "\uC11C\uBC84\uC5D0 \uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4."), /* @__PURE__ */ React.createElement("div", { className: "text-lg" }, "\uC11C\uBC84\uC5D0 \uC5F0\uACB0\uC744 \uC7AC\uC2DC\uB3C4\uD558\uACE0 \uC788\uC5B4\uC694..."))));
+};
+export {
+  Reconnect
+};

package/esm/System/Root.js

@@ -0,0 +1,11 @@
+"use client";
+import { baseEnv } from "@akanjs/base";
+import { checkDictCoverage } from "@akanjs/dictionary";
+const Root = ({ children, st }) => {
+  if (baseEnv.operationMode === "local")
+    checkDictCoverage();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+};
+export {
+  Root
+};

package/esm/System/SSR.js

@@ -0,0 +1,125 @@
+import { clsx, router } from "@akanjs/client";
+import { Suspense } from "react";
+import { Load } from "../Load";
+import { ClientBridge, ClientInner, ClientNextBridge, ClientPathWrapper, ClientWrapper } from "./Client";
+import { Common } from "./Common";
+const SSR = () => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null);
+};
+const SSRProvider = ({
+  className,
+  appName,
+  params,
+  head,
+  env,
+  gaTrackingId,
+  fetch,
+  children,
+  theme,
+  prefix,
+  fonts,
+  layoutStyle = "web",
+  of,
+  fetchPing,
+  fetchMe,
+  fetchSelf
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    Load.Page,
+    {
+      of,
+      loader: async () => {
+        const { lang } = await params;
+        if (!router.isInitialized)
+          router.init({ type: "next", side: "server", lang, prefix });
+        return { lang };
+      },
+      render: ({ lang }) => /* @__PURE__ */ React.createElement(
+        Common.Wrapper,
+        {
+          fetch,
+          environment: env.environment,
+          fetchPing,
+          fetchMe,
+          fetchSelf,
+          render: ({ mePromise, selfPromise }) => /* @__PURE__ */ React.createElement(
+            SSRWrapper,
+            {
+              className,
+              appName,
+              lang,
+              head,
+              fonts,
+              prefix,
+              layoutStyle
+            },
+            /* @__PURE__ */ React.createElement(ClientWrapper, { theme }, children, /* @__PURE__ */ React.createElement(Suspense, { fallback: null }, /* @__PURE__ */ React.createElement(ClientInner, null)), /* @__PURE__ */ React.createElement(Suspense, { fallback: null }, /* @__PURE__ */ React.createElement(
+              ClientBridge,
+              {
+                env,
+                mePromise,
+                selfPromise,
+                theme,
+                prefix,
+                gaTrackingId
+              }
+            ), /* @__PURE__ */ React.createElement(ClientNextBridge, { lang, prefix })))
+          )
+        }
+      )
+    }
+  );
+};
+SSR.Provider = SSRProvider;
+const SSRWrapper = ({
+  children,
+  lang,
+  head,
+  fonts = [],
+  appName,
+  className,
+  prefix,
+  layoutStyle = "web"
+}) => /* @__PURE__ */ React.createElement("html", { lang, className: `${fonts.map((font) => font.variable).join(" ")} ${className}`, suppressHydrationWarning: true }, /* @__PURE__ */ React.createElement("head", null, head), /* @__PURE__ */ React.createElement("body", { className: "app" }, /* @__PURE__ */ React.createElement("div", { id: "frameRoot", className }, /* @__PURE__ */ React.createElement(ClientPathWrapper, { layoutStyle, prefix }, /* @__PURE__ */ React.createElement("div", { id: "topSafeArea", className: clsx("bg-base-100 fixed inset-x-0 top-0") }), /* @__PURE__ */ React.createElement("div", { id: "pageContainers", className: clsx("isolate") }, /* @__PURE__ */ React.createElement("div", { id: "pageContainer" }, /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    id: "pageContent",
+    className: clsx("bg-base-100 relative isolate", {
+      "w-screen": layoutStyle === "web",
+      "left-1/2 h-screen w-[600px] -translate-x-1/2": layoutStyle === "mobile"
+    })
+  },
+  children
+))), /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    id: "topInsetContainer",
+    className: clsx("bg-base-100 fixed inset-x-0 top-0 isolate", {
+      "left-1/2 w-[600px] -translate-x-1/2": layoutStyle === "mobile",
+      "w-screen": layoutStyle === "web"
+    })
+  },
+  /* @__PURE__ */ React.createElement("div", { id: "topInsetContent", className: clsx("relative isolate size-full") })
+), /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    id: "topLeftActionContainer",
+    className: "aspect-1 absolute top-0 left-0 isolate flex items-center justify-center"
+  }
+), /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    id: "bottomInsetContainer",
+    className: clsx("fixed inset-x-0 bottom-0 isolate", {
+      "left-1/2 w-[600px] -translate-x-1/2": layoutStyle === "mobile",
+      "w-screen": layoutStyle === "web"
+    })
+  },
+  /* @__PURE__ */ React.createElement("div", { id: "bottomInsetContent", className: "isolate size-full" })
+), /* @__PURE__ */ React.createElement("div", { id: "bottomSafeArea", className: "bg-base-100 fixed inset-x-0" })))));
+SSR.Wrapper = SSRWrapper;
+var SSR_default = SSRProvider;
+export {
+  SSR,
+  SSR_default as default
+};