@akanjs/ui 0.9.42 → 0.9.44

package/cjs/System/Common.js

@@ -24,7 +24,6 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_ko = require("dayjs/locale/ko");
 var import_client = require("@akanjs/client");
 var import_Load = require("../Load");
-var import_Reconnect = require("./Reconnect");
 const Common = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
 };
@@ -37,32 +36,29 @@ const CommonWrapper = ({
   fetchSelf = (props) => fetch.getSelf?.(props)
 }) => {
   const account = (0, import_client.getAccount)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_Load.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
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Reconnect.Reconnect, {})
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_Load.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;

package/cjs/System/Reconnect.js

@@ -49,7 +49,7 @@ const Reconnect = () => {
     setConnectStatus((prev) => prev === "normal" || prev === "initial" ? "disconnected" : prev);
     setTimeout(() => {
       setConnectStatus((prev) => prev === "disconnected" ? "connecting" : prev);
-    }, 3e3);
+    }, 2e3);
   }, []);
   (0, import_react.useEffect)(() => {
     const io = import_signal.client.getIo();

package/cjs/System/SSR.js

@@ -23,6 +23,7 @@ __export(SSR_exports, {
 module.exports = __toCommonJS(SSR_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_client = require("@akanjs/client");
+var import_dictionary = require("@akanjs/dictionary");
 var import_react = require("react");
 var import_Load = require("../Load");
 var import_Client = require("./Client");
@@ -54,11 +55,13 @@ const SSRProvider = ({
       of,
       loader: async () => {
         const { lang } = await params;
+        await import_dictionary.serverTranslator.init(lang);
         if (!import_client.router.isInitialized)
           import_client.router.init({ type: "next", side: "server", lang, prefix });
-        return { lang };
+        const dictionary = await import_dictionary.serverTranslator.getDictionary(lang);
+        return { lang, dictionary };
       },
-      render: ({ lang }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      render: ({ lang, dictionary }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_Common.Common.Wrapper,
         {
           fetch,
@@ -76,7 +79,7 @@ const SSRProvider = ({
               fonts,
               prefix,
               layoutStyle,
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Client.ClientWrapper, { theme, children: [
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Client.ClientWrapper, { theme, lang, dictionary, children: [
                 children,
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Client.ClientInner, {}) }),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Suspense, { fallback: null, children: [

package/cjs/System/ThemeToggle.js

@@ -38,7 +38,7 @@ const ThemeToggle = () => {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "form-control", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "label cursor-pointer", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "label-text mr-2 text-sm whitespace-nowrap", children: (0, import_common.capitalize)(theme ?? "") }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-base-content mr-2 text-sm whitespace-nowrap", children: (0, import_common.capitalize)(theme ?? "") }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "checkbox", className: "toggle toggle-sm", checked: theme === "dark", onChange: handleTheme })
   ] }) });
 };

package/cjs/index.js

@@ -20,6 +20,7 @@ __export(ui_exports, {
   BottomSheet: () => import_BottomSheet.BottomSheet,
   Button: () => import_Button.Button,
   ClientSide: () => import_ClientSide.ClientSide,
+  Clipboard: () => import_Clipboard.Clipboard,
   Copy: () => import_Copy.Copy,
   CsrImage: () => import_CsrImage.CsrImage,
   Data: () => import_Data.Data,
@@ -75,6 +76,7 @@ var import_BottomSheet = require("./BottomSheet");
 var import_Button = require("./Button");
 var import_ClientSide = require("./ClientSide");
 var import_Copy = require("./Copy");
+var import_Clipboard = require("./Clipboard");
 var import_CsrImage = require("./CsrImage");
 var import_DatePicker = require("./DatePicker");
 var import_DragAction = require("./DragAction");

package/esm/Clipboard.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "@akanjs/client";
+import { useEffect, useState } from "react";
+import { FaCheck } from "react-icons/fa";
+import { MdContentCopy } from "react-icons/md";
+const Clipboard = ({ text, className }) => {
+  const [isCopied, setIsCopied] = useState(false);
+  useEffect(() => {
+    if (isCopied) {
+      setTimeout(() => {
+        setIsCopied(false);
+      }, 2e3);
+    }
+  }, [isCopied]);
+  const handleCopy = async () => {
+    if (!text)
+      return;
+    await navigator.clipboard.writeText(text);
+    setIsCopied(true);
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: async () => {
+        await handleCopy();
+      },
+      className: clsx(
+        "flex h-6 w-6 items-center justify-center rounded-md bg-white/30 text-white transition-all duration-300 hover:bg-white/20",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          FaCheck,
+          {
+            className: `absolute h-4 w-4 transition-opacity duration-300 ${isCopied ? "opacity-100" : "opacity-0"}`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          MdContentCopy,
+          {
+            className: `absolute h-4 w-4 transition-opacity duration-300 ${isCopied ? "opacity-0" : "opacity-100"}`
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Clipboard
+};

package/esm/Data/Item.js

@@ -65,10 +65,7 @@ function Item({
 }) {
   const { l } = usePage();
   const strActions = actions.filter((action) => typeof action === "string").map((action, idx) => /* @__PURE__ */ jsx(Action, { action, outline: false, model, sliceName }, idx));
-  const customActions = actions.filter((action) => typeof action !== "string").map((action, idx) => ({
-    key: idx,
-    label: typeof action !== "string" ? action.render() : null
-  }));
+  const customActions = actions.filter((action) => typeof action !== "string").map((action, idx) => ({ key: idx, label: action }));
   const extraCols = columns.filter((column) => {
     const key = typeof column === "string" ? column : column.key;
     return !["id", "status", "createdAt"].includes(key);
@@ -160,7 +157,7 @@ const Action = ({
       children: /* @__PURE__ */ jsx("button", { className: `btn btn-square btn-ghost btn-sm m-1 text-center ${outline && "btn-outline border-dashed"}`, children: /* @__PURE__ */ jsx(AiOutlineDelete, {}) })
     },
     action
-  ) : action.render();
+  ) : action;
 };
 const statusColors = {
   active: "badge-info badge-outline",

package/esm/Data/ListContainer.js

@@ -31,19 +31,12 @@ function ListContainer({
   title,
   sort,
   columns = ["id", "createdAt", "updatedAt"],
-  actions,
+  actions = ["remove", "edit", "view"],
   tools = [],
   renderDashboard,
   renderItem,
   renderTemplate,
-  renderTitle = (model) => model.id ? /* @__PURE__ */ jsxs("h2", { className: "flex items-center justify-center py-3 text-lg sm:justify-start md:text-2xl", children: [
-    sliceName,
-    " - ",
-    model.id
-  ] }) : /* @__PURE__ */ jsxs("h2", { className: "flex items-center justify-center py-3 text-lg sm:justify-start md:text-2xl", children: [
-    "New ",
-    sliceName
-  ] }),
+  renderTitle,
   renderView,
   renderQueryMaker = () => /* @__PURE__ */ jsx(Fragment, {}),
   renderInsight,
@@ -52,7 +45,6 @@ function ListContainer({
   const { l } = usePage();
   const storeUse = st.use;
   const storeDo = st.do;
-  const storeGet = st.get;
   const refName = st.slice[sliceName].refName;
   const [modelName, modelClassName] = [refName, capitalize(refName)];
   if (refName !== sliceName)
@@ -85,6 +77,7 @@ function ListContainer({
   const cnst = getCnstMeta(sliceName);
   const limitOfModel = storeUse[namesOfSlice.limitOfModel]();
   const sortOfModel = storeUse[namesOfSlice.sortOfModel]();
+  const RenderTitle = renderTitle ?? ((model) => `${l(`${refName}.modelName`)} - ${model.id ? model.id : "New"}`);
   const ModelDashboard = () => {
     const summary = storeUse.summary();
     const summaryLoading = storeUse.summaryLoading();
@@ -234,11 +227,11 @@ ${body}`], { type: "text/csv;charset=utf-8" });
       DataCardList,
       {
         sliceName,
-        renderItem: renderItem ?? (({ [sliceName]: model }) => /* @__PURE__ */ jsx("div", { children: model.id }, model.id)),
+        renderItem: renderItem ?? (({ [sliceName]: model }) => null),
         renderLoading,
         renderTemplate,
         renderView,
-        renderTitle,
+        renderTitle: RenderTitle,
         columns,
         actions,
         cardListClassName
@@ -250,11 +243,11 @@ ${body}`], { type: "text/csv;charset=utf-8" });
         sliceName,
         actions,
         renderTemplate,
-        renderTitle,
+        renderTitle: RenderTitle,
         renderView
       }
     ),
-    /* @__PURE__ */ jsx(Model.EditModal, { sliceName, renderTitle, children: RenderTemplate ? /* @__PURE__ */ jsx(RenderTemplate, {}) : null })
+    /* @__PURE__ */ jsx(Model.EditModal, { sliceName, renderTitle: RenderTitle, children: RenderTemplate ? /* @__PURE__ */ jsx(RenderTemplate, {}) : null })
   ] });
 }
 export {

package/esm/Data/QueryMaker.js

@@ -9,7 +9,6 @@ import {
   getFilterQuery,
   getFilterQueryMap,
   getGqlTypeStr,
-  getQueryMap,
   hasTextField
 } from "@akanjs/constant";
 import { useDebounce, usePage } from "@akanjs/next";
@@ -27,9 +26,7 @@ function QueryMaker({ className, sliceName, query }) {
   const storeDo = st.do;
   const cnst = getCnstMeta(sliceName);
   const isModelSearchable = hasTextField(cnst.Full);
-  const summaryRef = cnst.Summary;
   const { subMenu, filter } = st.use.searchParams();
-  const summaryQueryMap = getQueryMap(summaryRef);
   const filterRef = cnst.Filter;
   const filterQueryMap = getFilterQueryMap(filterRef);
   const defaultQuerySetting = { ...isModelSearchable ? searchQuerySetting : byStatusQuerySetting, ...query ?? {} };
@@ -37,12 +34,7 @@ function QueryMaker({ className, sliceName, query }) {
   const [querySetting, setQuerySetting] = useState(defaultQuerySetting);
   const getQuery = useCallback(
     (querySetting2) => {
-      if (summaryQueryMap[querySetting2.queryKey]) {
-        const query2 = typeof summaryQueryMap[querySetting2.queryKey] === "function" ? summaryQueryMap[querySetting2.queryKey]() : summaryQueryMap[querySetting2.queryKey] ?? null;
-        if (!query2)
-          throw new Error(`Query not found`);
-        return query2;
-      } else if (querySetting2.queryKey === "search") {
+      if (querySetting2.queryKey === "search") {
         const query2 = querySetting2.arg;
         return query2;
       } else {
@@ -77,8 +69,8 @@ function QueryMaker({ className, sliceName, query }) {
         Select,
         {
           value: querySetting.queryKey,
-          options: Object.keys(summaryQueryMap).map((queryKey) => ({
-            label: l.qry(sliceName, queryKey),
+          options: Object.keys(filterQueryMap).map((queryKey) => ({
+            label: l.field("summary", queryKey),
             value: queryKey
           })),
           onChange: (queryKey) => {
@@ -111,7 +103,7 @@ function QueryMaker({ className, sliceName, query }) {
         ),
         /* @__PURE__ */ jsx(BiSearch, { className: "size-4 opacity-70" })
       ] })
-    ] }) : summaryQueryMap[querySetting.queryKey] ? null : getFilterArgMetas(filterRef, querySetting.queryKey).map((queryArgMeta, idx) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    ] }) : getFilterArgMetas(filterRef, querySetting.queryKey).map((queryArgMeta, idx) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500", children: l.qarg(sliceName, querySetting.queryKey, queryArgMeta.name) }),
       /* @__PURE__ */ jsx(
         QueryArg,

package/esm/Layout/BottomTab.js

@@ -2,14 +2,21 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "@akanjs/client";
 import { usePage } from "@akanjs/next";
+import { useEffect, useState } from "react";
 import { Link } from "../Link";
 import { BottomInset } from "./BottomInset";
 const BottomTab = ({ className, tabs, height = 64 }) => {
-  const { lang } = usePage();
+  const { lang, path } = usePage();
+  const [isRendered, setIsRendered] = useState(false);
   const isActiveTab = (tabHref) => {
+    if (!isRendered)
+      return false;
     const locationPath = window.location.pathname.startsWith(`/${lang}`) ? window.location.pathname.slice(lang.length + 1) === "" ? "/" : window.location.pathname.slice(lang.length + 1) : window.location.pathname;
     return tabHref === "/" ? locationPath === tabHref : locationPath.startsWith(tabHref);
   };
+  useEffect(() => {
+    setIsRendered(true);
+  }, []);
   return /* @__PURE__ */ jsx(BottomInset, { className: "h-full", children: /* @__PURE__ */ jsx(
     "div",
     {

package/esm/Model/AdminPanel.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { Data } from "../Data";
+function AdminPanel({
+  sliceName,
+  components,
+  summaryColumns = ["totalAdmin"],
+  insightColumns = ["count"],
+  renderInsight = ({ insight }) => /* @__PURE__ */ jsx(Data.Insight, { insight, sliceName, columns: insightColumns }),
+  renderDashboard = ({ summary }) => /* @__PURE__ */ jsx(Data.Dashboard, { summary, sliceName, columns: summaryColumns, queryMap: {} }),
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Data.ListContainer,
+    {
+      sliceName,
+      renderItem: components.Unit.General,
+      renderInsight,
+      renderDashboard,
+      renderTemplate: components.Template.General,
+      renderView: (model) => /* @__PURE__ */ jsx(components.View.General, { ...{ [sliceName]: model } }),
+      ...props
+    }
+  );
+}
+export {
+  AdminPanel as default
+};

package/esm/Model/index.js

@@ -1,4 +1,5 @@
 import {
+  AdminPanel,
   Edit,
   EditModal,
   EditWrapper,
@@ -26,7 +27,8 @@ const Model = {
   ViewWrapper,
   ViewEditModal,
   Edit,
-  New
+  New,
+  AdminPanel
 };
 export {
   Model

package/esm/Model/index_.js

@@ -12,7 +12,9 @@ const ViewWrapper = lazy(() => import("./ViewWrapper"));
 const ViewEditModal = lazy(() => import("./ViewEditModal"));
 const Edit = lazy(() => import("./Edit"));
 const New = lazy(() => import("./New"));
+const AdminPanel = lazy(() => import("./AdminPanel"));
 export {
+  AdminPanel,
   Edit,
   EditModal,
   EditWrapper,

package/esm/Signal/Listener.js

@@ -10,9 +10,9 @@ const ListenerResult = ({ status, data }) => {
   const dataStr = typeof data === "object" ? JSON.stringify(data, null, 2) : data;
   const ref = useRef(null);
   useEffect(() => {
-    if (ref.current) {
-      ref.current.scrollTop = ref.current.scrollHeight;
-    }
+    if (!ref.current)
+      return;
+    ref.current.scrollTop = ref.current.scrollHeight;
   }, [dataStr]);
   return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsx(

package/esm/Signal/Message.js

@@ -136,7 +136,7 @@ const MessageTry = ({ sigRef, gqlMeta, gqlArgMetas, uploadArgMetas }) => {
   const [uploadRequest, setUploadRequest] = useState({});
   const [stopListen, setStopListen] = useState(null);
   const [messages, setMessages] = useState("");
-  const [response, setResponse] = useState({ status: "ready", data: null });
+  const [response, setResponse] = useState({ status: "ready", data: "" });
   const onSend = async () => {
     const request = { ...JSON.parse(gqlRequest), ...uploadRequest };
     const argData = [...gqlArgMetas, ...uploadArgMetas].sort((a, b) => a.idx - b.idx).map((argMeta) => request[argMeta.name]);
@@ -148,7 +148,7 @@ const MessageTry = ({ sigRef, gqlMeta, gqlArgMetas, uploadArgMetas }) => {
     const request = { ...JSON.parse(gqlRequest), ...uploadRequest };
     const fetchFn = fetch[`listen${capitalize(gqlMeta.key)}`].bind(fetch);
     setResponse({ status: "loading", data: messages });
-    const stopListen2 = fetchFn(({ event, data }) => {
+    const stopListen2 = fetchFn((data) => {
       setMessages(
         (prev) => typeof data === "boolean" ? data : typeof data === "string" ? `${prev}
 ${data}` : typeof data === "object" ? [...prev && prev.length ? [...prev] : [], data] : data

package/esm/Signal/PubSub.js

@@ -135,18 +135,15 @@ const PubSubTry = ({ sigRef, gqlMeta, gqlArgMetas, uploadArgMetas }) => {
   const [gqlRequest, setGqlRequest] = useState(requestExample);
   const [uploadRequest, setUploadRequest] = useState({});
   const [unsubscribe, setUnsubscribe] = useState(null);
-  const [messages, setMessages] = useState(null);
-  const [response, setResponse] = useState({
-    status: "ready",
-    data: null
-  });
+  const [messages, setMessages] = useState("");
+  const [response, setResponse] = useState({ status: "ready", data: "" });
   const onSubscribe = () => {
-    setResponse({ status: "loading", data: null });
+    setResponse({ status: "loading", data: "" });
     const request = { ...JSON.parse(gqlRequest), ...uploadRequest };
     const argData = [...gqlArgMetas, ...uploadArgMetas].sort((a, b) => a.idx - b.idx).map((argMeta) => request[argMeta.name]);
     const fetchFn = fetch[`subscribe${capitalize(gqlMeta.key)}`].bind(fetch);
     setResponse({ status: "loading", data: messages });
-    const unsubscribe2 = fetchFn([...argData], (data) => {
+    const unsubscribe2 = fetchFn(...argData, (data) => {
       setMessages(
         (prev) => typeof data === "boolean" ? data : typeof data === "string" ? `${prev}
 ${data}` : typeof data === "object" ? [

package/esm/System/CSR.js

@@ -1,6 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx, device, getPathInfo, router, useCsr } from "@akanjs/client";
+import { serverTranslator } from "@akanjs/dictionary";
 import { usePushNoti } from "@akanjs/next";
 import { st } from "@akanjs/store";
 import { animated } from "@akanjs/ui";
@@ -38,10 +39,11 @@ const CSRProvider = ({
       of,
       loader: async () => {
         const { lang } = await params;
-        return { lang };
+        const dictionary = await serverTranslator.getDictionary(lang);
+        return { lang, dictionary };
       },
-      render: ({ lang }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Client.Wrapper, { theme, children: /* @__PURE__ */ jsx(
+      render: ({ lang, dictionary }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Client.Wrapper, { theme, lang, dictionary, children: /* @__PURE__ */ jsx(
           CSRWrapper,
           {
             className,

package/esm/System/Client.js

@@ -5,6 +5,7 @@ import {
   clsx,
   defaultPageState,
   device,
+  dictionaryContext,
   getPathInfo,
   initAuth,
   pathContext,
@@ -22,14 +23,18 @@ import { ThemeProvider, useTheme } from "next-themes";
 import { useEffect, useState } from "react";
 import { Gtag } from "./Gtag";
 import { Messages } from "./Messages";
+import { Reconnect } from "./Reconnect";
 const Client = () => {
   return /* @__PURE__ */ jsx(Fragment, {});
 };
-const ClientWrapper = ({ children, theme }) => {
+const ClientWrapper = ({ children, theme, lang = "en", dictionary = {} }) => {
   useEffect(() => {
     Logger.rawLog(logo);
   }, []);
-  return /* @__PURE__ */ jsx(ThemeProvider, { defaultTheme: theme, children });
+  return /* @__PURE__ */ jsx(ThemeProvider, { defaultTheme: theme, children: /* @__PURE__ */ jsxs(dictionaryContext.Provider, { value: dictionary, children: [
+    children,
+    /* @__PURE__ */ jsx(Reconnect, {})
+  ] }) });
 };
 Client.Wrapper = ClientWrapper;
 const ClientPathWrapper = ({

package/esm/System/Common.js

@@ -1,8 +1,7 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx } from "react/jsx-runtime";
 import "dayjs/locale/ko";
 import { getAccount } from "@akanjs/client";
 import { Load } from "../Load";
-import { Reconnect } from "./Reconnect";
 const Common = () => {
   return /* @__PURE__ */ jsx(Fragment, {});
 };
@@ -15,33 +14,30 @@ const CommonWrapper = ({
   fetchSelf = (props) => fetch.getSelf?.(props)
 }) => {
   const account = getAccount();
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__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
-      }
-    ),
-    /* @__PURE__ */ jsx(Reconnect, {})
-  ] });
+  return /* @__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/Reconnect.js

@@ -17,7 +17,7 @@ const Reconnect = () => {
     setConnectStatus((prev) => prev === "normal" || prev === "initial" ? "disconnected" : prev);
     setTimeout(() => {
       setConnectStatus((prev) => prev === "disconnected" ? "connecting" : prev);
-    }, 3e3);
+    }, 2e3);
   }, []);
   useEffect(() => {
     const io = client.getIo();

package/esm/System/SSR.js

@@ -1,5 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx, router } from "@akanjs/client";
+import { serverTranslator } from "@akanjs/dictionary";
 import { Suspense } from "react";
 import { Load } from "../Load";
 import { ClientBridge, ClientInner, ClientNextBridge, ClientPathWrapper, ClientWrapper } from "./Client";
@@ -31,11 +32,13 @@ const SSRProvider = ({
       of,
       loader: async () => {
         const { lang } = await params;
+        await serverTranslator.init(lang);
         if (!router.isInitialized)
           router.init({ type: "next", side: "server", lang, prefix });
-        return { lang };
+        const dictionary = await serverTranslator.getDictionary(lang);
+        return { lang, dictionary };
       },
-      render: ({ lang }) => /* @__PURE__ */ jsx(
+      render: ({ lang, dictionary }) => /* @__PURE__ */ jsx(
         Common.Wrapper,
         {
           fetch,
@@ -53,7 +56,7 @@ const SSRProvider = ({
               fonts,
               prefix,
               layoutStyle,
-              children: /* @__PURE__ */ jsxs(ClientWrapper, { theme, children: [
+              children: /* @__PURE__ */ jsxs(ClientWrapper, { theme, lang, dictionary, children: [
                 children,
                 /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(ClientInner, {}) }),
                 /* @__PURE__ */ jsxs(Suspense, { fallback: null, children: [

package/esm/System/ThemeToggle.js

@@ -16,7 +16,7 @@ const ThemeToggle = () => {
     return null;
   }
   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: capitalize(theme ?? "") }),
+    /* @__PURE__ */ jsx("span", { className: "text-base-content mr-2 text-sm whitespace-nowrap", children: capitalize(theme ?? "") }),
     /* @__PURE__ */ jsx("input", { type: "checkbox", className: "toggle toggle-sm", checked: theme === "dark", onChange: handleTheme })
   ] }) });
 };

package/esm/index.js

@@ -12,6 +12,7 @@ import { BottomSheet } from "./BottomSheet";
 import { Button } from "./Button";
 import { ClientSide } from "./ClientSide";
 import { Copy } from "./Copy";
+import { Clipboard } from "./Clipboard";
 import { CsrImage } from "./CsrImage";
 import { DatePicker } from "./DatePicker";
 import { DragAction } from "./DragAction";
@@ -44,6 +45,7 @@ export {
   BottomSheet,
   Button,
   ClientSide,
+  Clipboard,
   Copy,
   CsrImage,
   Data,