@akanjs/ui 0.0.151 → 0.0.152

package/esm/System/CSR.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx, device, getPathInfo, router, useCsr } from "@akanjs/client";
 import { usePushNoti } from "@akanjs/next";
 import { st } from "@akanjs/store";
@@ -10,7 +11,7 @@ import { Load } from "../Load";
 import { Client, ClientPathWrapper } from "./Client";
 import { Common } from "./Common";
 const CSR = ({ children }) => {
-  return /* @__PURE__ */ React.createElement("div", null);
+  return /* @__PURE__ */ jsx("div", {});
 };
 const CSRProvider = ({
   className,
@@ -31,7 +32,7 @@ const CSRProvider = ({
   fetchMe,
   fetchSelf
 }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Load.Page,
     {
       of,
@@ -39,42 +40,50 @@ const CSRProvider = ({
         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 }))
-        }
-      ))
+      render: ({ lang }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Client.Wrapper, { theme, children: /* @__PURE__ */ jsxs(
+          CSRWrapper,
+          {
+            className,
+            appName,
+            lang,
+            head,
+            fonts,
+            prefix,
+            layoutStyle,
+            children: [
+              children,
+              /* @__PURE__ */ jsx(Client.Inner, {}),
+              /* @__PURE__ */ jsx(CSRInner, {})
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          Common.Wrapper,
+          {
+            fetch,
+            environment: env.environment,
+            fetchPing,
+            fetchMe,
+            fetchSelf,
+            render: ({ mePromise, selfPromise }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Client.Bridge,
+                {
+                  lang,
+                  env,
+                  mePromise,
+                  selfPromise,
+                  theme,
+                  prefix,
+                  gaTrackingId
+                }
+              ),
+              /* @__PURE__ */ jsx(CSRBridge, { lang, prefix })
+            ] })
+          }
+        )
+      ] })
     }
   );
 };
@@ -107,64 +116,69 @@ const CSRWrapper = ({
       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,
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    fonts.map((font, idx) => /* @__PURE__ */ jsx(FontFace, { font }, idx)),
+    /* @__PURE__ */ jsxs(
+      "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
+        id: "frameRoot",
+        className: clsx(className, "h-screen w-full overflow-hidden", {
+          "bg-base-200": layoutStyle === "mobile"
+        }),
+        ref: frameRootRef,
+        children: [
+          /* @__PURE__ */ jsx("div", { id: "pageContainers", className: "isolate" }),
+          csrLoaded ? pathRoutes.map((pathRoute) => /* @__PURE__ */ jsx(CSRPageContainer, { pathRoute, prefix, layoutStyle }, pathRoute.path)) : null,
+          /* @__PURE__ */ jsx(
+            a.div,
+            {
+              id: "topSafeArea",
+              className: clsx("bg-base-100 fixed inset-x-0 top-0", {}),
+              ref: topSafeAreaRef,
+              style: topSafeArea?.containerStyle
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            a.div,
+            {
+              id: "topInsetContainer",
+              className: clsx("bg-base-100 fixed inset-x-0 isolate", {}),
+              style: topInset?.containerStyle
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            a.div,
+            {
+              id: "topLeftActionContainer",
+              className: clsx("aspect-1 absolute top-0 isolate flex items-center justify-center", {}),
+              style: topLeftAction?.containerStyle
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            a.div,
+            {
+              id: "bottomInsetContainer",
+              className: clsx("fixed inset-x-0 isolate", {}),
+              style: bottomInset?.containerStyle
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            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);
+  return /* @__PURE__ */ jsx(Fragment, {});
 };
 CSR.Inner = CSRInner;
 const CSRBridge = ({ lang, prefix = "" }) => {
@@ -267,88 +281,93 @@ const CSRPageContainer = ({ pathRoute, prefix, layoutStyle }) => {
   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,
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    createPortal(
+      /* @__PURE__ */ jsx(
+        a.div,
         {
-          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
+          id: `pageContainer-${pathRoute.path}`,
+          style: { ...page?.containerStyle ?? {}, zIndex },
+          className: clsx("absolute top-0 left-0 isolate w-screen", {
+            absolute: pageType !== "current",
+            hidden: pageType === "cached"
           }),
-          style: page?.contentStyle,
+          children: /* @__PURE__ */ jsx(
+            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,
+              children: pathRoute.Layouts.reduceRight(
+                (children, Layout) => {
+                  return /* @__PURE__ */ jsx(Layout, { params: location.params, searchParams: location.searchParams, children });
+                },
+                /* @__PURE__ */ jsx(Page, { params: location.params, searchParams: location.searchParams })
+              )
+            }
+          )
+        }
+      ),
+      pageContainers
+    ),
+    createPortal(
+      /* @__PURE__ */ jsx(
+        ClientPathWrapper,
+        {
+          id: `topInsetContent-${pathRoute.path}`,
+          className: clsx("absolute top-0 left-0 isolate size-full", { hidden: pageType === "cached" }),
+          style: { ...topInsetContentStyle, zIndex },
           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
-      }
+        }
+      ),
+      topInsetContainer
     ),
-    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
-      }
+    createPortal(
+      /* @__PURE__ */ jsx(
+        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
     ),
-    bottomInsetContainer
-  ));
+    createPortal(
+      /* @__PURE__ */ jsx(
+        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 {

package/esm/System/Client.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { dayjs, logo } from "@akanjs/base";
 import {
   clsx,
@@ -22,13 +23,13 @@ import { useEffect, useState } from "react";
 import { Gtag } from "./Gtag";
 import { Messages } from "./Messages";
 const Client = () => {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null);
+  return /* @__PURE__ */ jsx(Fragment, {});
 };
 const ClientWrapper = ({ children, theme }) => {
   useEffect(() => {
     Logger.rawLog(logo);
   }, []);
-  return /* @__PURE__ */ React.createElement(ThemeProvider, { defaultTheme: theme }, children);
+  return /* @__PURE__ */ jsx(ThemeProvider, { defaultTheme: theme, children });
 };
 Client.Wrapper = ClientWrapper;
 const ClientPathWrapper = ({
@@ -50,13 +51,13 @@ const ClientPathWrapper = ({
   const pathRoute = location?.pathRoute ?? {
     path: "/" + pathname.split("/").slice(2).join("/"),
     pathSegments: pathname.split("/").slice(2),
-    Page: () => /* @__PURE__ */ React.createElement(React.Fragment, null),
+    Page: () => /* @__PURE__ */ jsx(Fragment, {}),
     pageState: defaultPageState,
     RootLayouts: [],
     Layouts: []
   };
   const [gestureEnabled, setGestureEnabled] = useState(true);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     pathContext.Provider,
     {
       value: {
@@ -64,21 +65,21 @@ const ClientPathWrapper = ({
         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
-    )
+      children: /* @__PURE__ */ jsx(
+        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 }) => {
@@ -151,12 +152,15 @@ const ClientBridge = ({ env, lang, mePromise, selfPromise, theme, prefix, gaTrac
     setCookie("path", path);
     Logger.log(`pathChange-finished:${path}`);
   }, [pathname]);
-  return gaTrackingId && /* @__PURE__ */ React.createElement(Gtag, { trackingId: gaTrackingId });
+  return gaTrackingId && /* @__PURE__ */ jsx(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);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { id: "modal-root" }),
+    uiOperation === "idle" ? /* @__PURE__ */ jsx(Messages, {}) : null
+  ] });
 };
 Client.Inner = ClientInner;
 const ClientNextBridge = ({ lang, prefix = "" }) => {

package/esm/System/Common.js

@@ -1,9 +1,10 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 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);
+  return /* @__PURE__ */ jsx(Fragment, {});
 };
 const CommonWrapper = ({
   fetch,
@@ -14,30 +15,33 @@ const CommonWrapper = ({
   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
-    }
-  ));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(HealthCheck, { fetchPing }),
+    /* @__PURE__ */ jsx(
+      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 {

package/esm/System/DevModeToggle.js

@@ -1,18 +1,22 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 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);
+  return /* @__PURE__ */ jsx("div", { className: "form-control", children: /* @__PURE__ */ jsxs("label", { className: "label cursor-pointer", children: [
+    /* @__PURE__ */ jsx("span", { className: "label-text mr-2 text-sm whitespace-nowrap", children: "Dev Mode" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        className: "toggle",
+        checked: devMode,
+        onChange: (e) => {
+          st.do.setDevMode(e.target.checked);
+        }
       }
-    }
-  )));
+    )
+  ] }) });
 };
 export {
   DevModeToggle

package/esm/System/Gtag.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { st } from "@akanjs/store";
 import { useEffect } from "react";
 const Gtag = ({ trackingId }) => {
@@ -27,11 +28,13 @@ const Gtag = ({ trackingId }) => {
       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: `
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("script", { async: true, src: `https://www.googletagmanager.com/gtag/js?id=${trackingId}` }),
+    /* @__PURE__ */ jsx(
+      "script",
+      {
+        dangerouslySetInnerHTML: {
+          __html: `
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
     gtag('js', new Date());
@@ -39,9 +42,10 @@ const Gtag = ({ trackingId }) => {
       page_path: window.location.pathname,
     });
   `
+        }
       }
-    }
-  ));
+    )
+  ] });
 };
 export {
   Gtag

package/esm/System/HealthCheck.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx } from "react/jsx-runtime";
 import { router } from "@akanjs/client";
 import { useInterval } from "@akanjs/next";
 import { fetch } from "@akanjs/signal";
@@ -34,7 +35,7 @@ const HealthCheck = ({ fetchPing = () => fetch.ping() }) => {
       return;
     await pingCheck();
   }, 1e4);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null);
+  return /* @__PURE__ */ jsx(Fragment, {});
 };
 export {
   HealthCheck