@akanjs/ui 0.9.43 → 0.9.45

package/Clipboard.d.ts

@@ -0,0 +1,7 @@
+import { type ReactElement } from "react";
+export interface ClipboardProps {
+    text?: string;
+    clipboardMessage?: string;
+    className?: string;
+}
+export declare const Clipboard: ({ text, className }: ClipboardProps) => ReactElement;

package/Model/AdminPanel.d.ts

@@ -27,5 +27,5 @@ export default function AdminPanel<T extends string, State, Input, Full extends
     id: string;
 }, Light extends {
     id: string;
-}, Sort extends SortType>({ sliceName, components, queryMap, summaryColumns, insightColumns, renderInsight, renderDashboard, ...props }: AdminPanelProps<T, State, Input, Full, Light, Sort>): import("react/jsx-runtime").JSX.Element;
+}, Sort extends SortType>({ sliceName, components, summaryColumns, insightColumns, renderInsight, renderDashboard, ...props }: AdminPanelProps<T, State, Input, Full, Light, Sort>): import("react/jsx-runtime").JSX.Element;
 export {};

package/System/Client.d.ts

@@ -3,7 +3,7 @@ import { type Location, type TransitionStyle } from "@akanjs/client";
 import { HTMLAttributes, RefObject } from "react";
 export declare const Client: {
     (): import("react/jsx-runtime").JSX.Element;
-    Wrapper: ({ children, theme }: ClientWrapperProps) => import("react/jsx-runtime").JSX.Element;
+    Wrapper: ({ children, theme, lang, dictionary }: ClientWrapperProps) => import("react/jsx-runtime").JSX.Element;
     Bridge: ({ env, lang, mePromise, selfPromise, theme, prefix, gaTrackingId }: ClientBridgeProps) => "" | import("react/jsx-runtime").JSX.Element | undefined;
     Inner: () => import("react/jsx-runtime").JSX.Element;
     NextBridge: ({ lang, prefix }: ClientNextBridgeProps) => null;
@@ -11,8 +11,14 @@ export declare const Client: {
 interface ClientWrapperProps {
     children: any;
     theme?: string;
+    lang?: string;
+    dictionary?: {
+        [key: string]: {
+            [key: string]: string;
+        };
+    };
 }
-export declare const ClientWrapper: ({ children, theme }: ClientWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ClientWrapper: ({ children, theme, lang, dictionary }: ClientWrapperProps) => import("react/jsx-runtime").JSX.Element;
 interface ClientPathWrapperProps extends Omit<HTMLAttributes<HTMLDivElement>, "style"> {
     bind?: () => any;
     wrapperRef?: RefObject<HTMLDivElement | null> | null;

package/cjs/Clipboard.js

@@ -0,0 +1,70 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Clipboard_exports = {};
+__export(Clipboard_exports, {
+  Clipboard: () => Clipboard
+});
+module.exports = __toCommonJS(Clipboard_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_client = require("@akanjs/client");
+var import_react = require("react");
+var import_fa = require("react-icons/fa");
+var import_md = require("react-icons/md");
+const Clipboard = ({ text, className }) => {
+  const [isCopied, setIsCopied] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (isCopied) {
+      setTimeout(() => {
+        setIsCopied(false);
+      }, 2e3);
+    }
+  }, [isCopied]);
+  const handleCopy = async () => {
+    if (!text)
+      return;
+    await navigator.clipboard.writeText(text);
+    setIsCopied(true);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      onClick: async () => {
+        await handleCopy();
+      },
+      className: (0, import_client.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__ */ (0, import_jsx_runtime.jsx)(
+          import_fa.FaCheck,
+          {
+            className: `absolute h-4 w-4 transition-opacity duration-300 ${isCopied ? "opacity-100" : "opacity-0"}`
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_md.MdContentCopy,
+          {
+            className: `absolute h-4 w-4 transition-opacity duration-300 ${isCopied ? "opacity-0" : "opacity-100"}`
+          }
+        )
+      ]
+    }
+  );
+};

package/cjs/Data/QueryMaker.js

@@ -41,9 +41,7 @@ function QueryMaker({ className, sliceName, query }) {
   const storeDo = import_store.st.do;
   const cnst = (0, import_constant.getCnstMeta)(sliceName);
   const isModelSearchable = (0, import_constant.hasTextField)(cnst.Full);
-  const summaryRef = cnst.Summary;
   const { subMenu, filter } = import_store.st.use.searchParams();
-  const summaryQueryMap = (0, import_constant.getQueryMap)(summaryRef);
   const filterRef = cnst.Filter;
   const filterQueryMap = (0, import_constant.getFilterQueryMap)(filterRef);
   const defaultQuerySetting = { ...isModelSearchable ? searchQuerySetting : byStatusQuerySetting, ...query ?? {} };
@@ -51,12 +49,7 @@ function QueryMaker({ className, sliceName, query }) {
   const [querySetting, setQuerySetting] = (0, import_react.useState)(defaultQuerySetting);
   const getQuery = (0, import_react.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 {
@@ -91,7 +84,7 @@ function QueryMaker({ className, sliceName, query }) {
         import_Select.Select,
         {
           value: querySetting.queryKey,
-          options: Object.keys(summaryQueryMap).map((queryKey) => ({
+          options: Object.keys(filterQueryMap).map((queryKey) => ({
             label: l.field("summary", queryKey),
             value: queryKey
           })),
@@ -125,7 +118,7 @@ function QueryMaker({ className, sliceName, query }) {
         ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_bi.BiSearch, { className: "size-4 opacity-70" })
       ] })
-    ] }) : summaryQueryMap[querySetting.queryKey] ? null : (0, import_constant.getFilterArgMetas)(filterRef, querySetting.queryKey).map((queryArgMeta, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", children: [
+    ] }) : (0, import_constant.getFilterArgMetas)(filterRef, querySetting.queryKey).map((queryArgMeta, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm text-gray-500", children: l.qarg(sliceName, querySetting.queryKey, queryArgMeta.name) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         QueryArg,

package/cjs/Layout/BottomTab.js

@@ -24,14 +24,21 @@ module.exports = __toCommonJS(BottomTab_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_client = require("@akanjs/client");
 var import_next = require("@akanjs/next");
+var import_react = require("react");
 var import_Link = require("../Link");
 var import_BottomInset = require("./BottomInset");
 const BottomTab = ({ className, tabs, height = 64 }) => {
-  const { lang } = (0, import_next.usePage)();
+  const { lang, path } = (0, import_next.usePage)();
+  const [isRendered, setIsRendered] = (0, import_react.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);
   };
+  (0, import_react.useEffect)(() => {
+    setIsRendered(true);
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_BottomInset.BottomInset, { className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {

package/cjs/Model/AdminPanel.js

@@ -21,17 +21,14 @@ __export(AdminPanel_exports, {
 });
 module.exports = __toCommonJS(AdminPanel_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_common = require("@akanjs/common");
-var import_constant = require("@akanjs/constant");
 var import_Data = require("../Data");
 function AdminPanel({
   sliceName,
   components,
-  queryMap = (0, import_constant.getQueryMap)((0, import_constant.getScalarModelRef)(`${(0, import_common.capitalize)(sliceName)}Summary`)),
   summaryColumns = ["totalAdmin"],
   insightColumns = ["count"],
   renderInsight = ({ insight }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Data.Data.Insight, { insight, sliceName, columns: insightColumns }),
-  renderDashboard = ({ summary }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Data.Data.Dashboard, { summary, sliceName, columns: summaryColumns, queryMap }),
+  renderDashboard = ({ summary }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Data.Data.Dashboard, { summary, sliceName, columns: summaryColumns, queryMap: {} }),
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/cjs/Signal/Listener.js

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

package/cjs/Signal/Message.js

@@ -168,7 +168,7 @@ const MessageTry = ({ sigRef, gqlMeta, gqlArgMetas, uploadArgMetas }) => {
   const [uploadRequest, setUploadRequest] = (0, import_react.useState)({});
   const [stopListen, setStopListen] = (0, import_react.useState)(null);
   const [messages, setMessages] = (0, import_react.useState)("");
-  const [response, setResponse] = (0, import_react.useState)({ status: "ready", data: null });
+  const [response, setResponse] = (0, import_react.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]);
@@ -180,7 +180,7 @@ const MessageTry = ({ sigRef, gqlMeta, gqlArgMetas, uploadArgMetas }) => {
     const request = { ...JSON.parse(gqlRequest), ...uploadRequest };
     const fetchFn = import_signal.fetch[`listen${(0, import_common.capitalize)(gqlMeta.key)}`].bind(import_signal.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/cjs/Signal/PubSub.js

@@ -167,18 +167,15 @@ const PubSubTry = ({ sigRef, gqlMeta, gqlArgMetas, uploadArgMetas }) => {
   const [gqlRequest, setGqlRequest] = (0, import_react.useState)(requestExample);
   const [uploadRequest, setUploadRequest] = (0, import_react.useState)({});
   const [unsubscribe, setUnsubscribe] = (0, import_react.useState)(null);
-  const [messages, setMessages] = (0, import_react.useState)(null);
-  const [response, setResponse] = (0, import_react.useState)({
-    status: "ready",
-    data: null
-  });
+  const [messages, setMessages] = (0, import_react.useState)("");
+  const [response, setResponse] = (0, import_react.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 = import_signal.fetch[`subscribe${(0, import_common.capitalize)(gqlMeta.key)}`].bind(import_signal.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/cjs/System/CSR.js

@@ -24,6 +24,7 @@ __export(CSR_exports, {
 module.exports = __toCommonJS(CSR_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_client = require("@akanjs/client");
+var import_dictionary = require("@akanjs/dictionary");
 var import_next = require("@akanjs/next");
 var import_store = require("@akanjs/store");
 var import_ui = require("@akanjs/ui");
@@ -61,10 +62,11 @@ const CSRProvider = ({
       of,
       loader: async () => {
         const { lang } = await params;
-        return { lang };
+        const dictionary = await import_dictionary.serverTranslator.getDictionary(lang);
+        return { lang, dictionary };
       },
-      render: ({ lang }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Client.Client.Wrapper, { theme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      render: ({ lang, dictionary }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Client.Client.Wrapper, { theme, lang, dictionary, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           CSRWrapper,
           {
             className,

package/cjs/System/Client.js

@@ -30,6 +30,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_base = require("@akanjs/base");
 var import_client = require("@akanjs/client");
 var import_common = require("@akanjs/common");
+var import_dictionary = require("@akanjs/dictionary");
 var import_next = require("@akanjs/next");
 var import_signal = require("@akanjs/signal");
 var import_store = require("@akanjs/store");
@@ -39,14 +40,20 @@ var import_next_themes = require("next-themes");
 var import_react = require("react");
 var import_Gtag = require("./Gtag");
 var import_Messages = require("./Messages");
+var import_Reconnect = require("./Reconnect");
 const Client = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
 };
-const ClientWrapper = ({ children, theme }) => {
+const ClientWrapper = ({ children, theme, lang = "en", dictionary = {} }) => {
+  if (!import_dictionary.serverTranslator.hasTranslator(lang))
+    import_dictionary.serverTranslator.setTranslator(lang, dictionary);
   (0, import_react.useEffect)(() => {
     import_common.Logger.rawLog(import_base.logo);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_next_themes.ThemeProvider, { defaultTheme: theme, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_next_themes.ThemeProvider, { defaultTheme: theme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_client.dictionaryContext.Provider, { value: dictionary, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Reconnect.Reconnect, {})
+  ] }) });
 };
 Client.Wrapper = ClientWrapper;
 const ClientPathWrapper = ({

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/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,7 +69,7 @@ function QueryMaker({ className, sliceName, query }) {
         Select,
         {
           value: querySetting.queryKey,
-          options: Object.keys(summaryQueryMap).map((queryKey) => ({
+          options: Object.keys(filterQueryMap).map((queryKey) => ({
             label: l.field("summary", queryKey),
             value: 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

@@ -1,15 +1,12 @@
 import { jsx } from "react/jsx-runtime";
-import { capitalize } from "@akanjs/common";
-import { getQueryMap, getScalarModelRef } from "@akanjs/constant";
 import { Data } from "../Data";
 function AdminPanel({
   sliceName,
   components,
-  queryMap = getQueryMap(getScalarModelRef(`${capitalize(sliceName)}Summary`)),
   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 }),
+  renderDashboard = ({ summary }) => /* @__PURE__ */ jsx(Data.Dashboard, { summary, sliceName, columns: summaryColumns, queryMap: {} }),
   ...props
 }) {
   return /* @__PURE__ */ jsx(

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,
@@ -13,6 +14,7 @@ import {
   storage
 } from "@akanjs/client";
 import { Logger } from "@akanjs/common";
+import { serverTranslator } from "@akanjs/dictionary";
 import { useFetch } from "@akanjs/next";
 import { fetch } from "@akanjs/signal";
 import { st } from "@akanjs/store";
@@ -22,14 +24,20 @@ 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 = {} }) => {
+  if (!serverTranslator.hasTranslator(lang))
+    serverTranslator.setTranslator(lang, 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,

package/index.d.ts

@@ -12,6 +12,7 @@ export { BottomSheet, type BottomSheetRef } from "./BottomSheet";
 export { Button } from "./Button";
 export { ClientSide } from "./ClientSide";
 export { Copy } from "./Copy";
+export { Clipboard } from "./Clipboard";
 export { CsrImage } from "./CsrImage";
 export { DatePicker } from "./DatePicker";
 export { DragAction } from "./DragAction";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akanjs/ui",
-  "version": "0.9.43",
+  "version": "0.9.45",
   "sourceType": "module",
   "publishConfig": {
     "access": "public"