@akanjs/ui 0.9.42 → 0.9.44

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/Data/CardList.d.ts

@@ -21,7 +21,7 @@ interface CardListProps<T extends string, Input, Full extends {
     init?: FetchInitForm<Input, Full, Filter>;
     sliceName: string;
     columns: DataColumn<any>[];
-    actions?: DataAction<Light>[] | ((item: Light, idx: number) => DataAction<Light>[]);
+    actions?: DataAction[] | ((item: Light, idx: number) => DataAction[]);
     renderItem: (args: DataItemProps<T, Full, Light>) => ReactNode;
     renderLoading?: () => ReactNode;
     renderTemplate?: (props: any) => ReactNode | null;

package/Data/Dashboard.d.ts

@@ -1,5 +1,4 @@
-import { StoreOf } from "@akanjs/store";
-export interface DashboardProps<T extends string, State, SL extends StoreOf<T, State>> {
+export interface DashboardProps<T extends string, State> {
     className?: string;
     summary: {
         [key: string]: any;
@@ -12,4 +11,4 @@ export interface DashboardProps<T extends string, State, SL extends StoreOf<T, S
     presents?: string[];
     hidePresents?: boolean;
 }
-export default function Dashboard<T extends string, State, SL extends StoreOf<T, State>>({ className, summary, sliceName, queryMap, columns, presents, hidePresents, }: DashboardProps<T, State, SL>): import("react/jsx-runtime").JSX.Element;
+export default function Dashboard<T extends string, State>({ className, summary, sliceName, queryMap, columns, presents, hidePresents, }: DashboardProps<T, State>): import("react/jsx-runtime").JSX.Element;

package/Data/Item.d.ts

@@ -1,6 +1,6 @@
 import { Dayjs } from "@akanjs/base";
 import { DataAction, DataColumn } from "@akanjs/client";
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 export declare const convToAntdColumn: (column: DataColumn<any>) => {
     key: string;
     dataIndex: string;
@@ -37,7 +37,7 @@ interface ItemProps<T extends string, Full extends {
     onClick?: () => void;
     cover?: ReactNode;
     title?: ReactNode;
-    actions?: DataAction<Light>[];
+    actions?: DataAction[];
     columns?: DataColumn<any>[];
     children?: ReactNode;
 }
@@ -61,7 +61,7 @@ interface ActionProps<T extends string, M extends {
 }, L extends {
     id: string;
 }> {
-    action: DataAction<L>;
+    action: DataAction;
     model: L;
     sliceName: string;
 }
@@ -71,4 +71,4 @@ export declare const Action: <T extends string, M extends {
     id: string;
 }>({ action, model, sliceName, outline, }: ActionProps<T, M, L> & {
     outline?: boolean;
-}) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}) => import("react/jsx-runtime").JSX.Element | null | undefined;

package/Data/ListContainer.d.ts

@@ -2,7 +2,7 @@ import { DataAction, DataColumn, DataTool, ModelInsightProps, ModelProps } from
 import { SortType } from "@akanjs/constant";
 import { type FetchInitForm } from "@akanjs/signal";
 import { ReactNode } from "react";
-interface ListContainerProps<T extends string, State, Input, Full extends {
+export interface ListContainerProps<T extends string, State, Input, Full extends {
     id: string;
 }, Light extends {
     id: string;
@@ -14,20 +14,25 @@ interface ListContainerProps<T extends string, State, Input, Full extends {
         [key: string]: any;
     };
     init?: FetchInitForm<Input, Full, Sort>;
-    sliceName: string;
+    sliceName: T;
     create?: boolean;
     title?: string;
     sort?: SortType;
     columns?: DataColumn<any>[];
     tools?: DataTool[] | ((modelList: Light[]) => DataTool[]);
-    actions?: DataAction<Light>[] | ((item: Light, idx: number) => DataAction<Light>[]);
-    renderDashboard?: ({ summary, hidePresents }: any) => ReactNode;
+    actions?: DataAction[] | ((item: Light, idx: number) => DataAction[]);
+    renderDashboard?: ({ summary, hidePresents, }: {
+        summary: {
+            [key: string]: any;
+        };
+        hidePresents?: boolean;
+    }) => ReactNode;
     renderItem?: (props: ModelProps<any, any>) => ReactNode;
     renderTemplate?: (props: any) => ReactNode | null;
     renderTitle?: (model: Full) => string | ReactNode;
     renderView?: (model: Full) => ReactNode | null;
     renderQueryMaker?: () => ReactNode;
-    renderInsight?: (props: ModelInsightProps<any>) => ReactNode;
+    renderInsight?: (props: ModelInsightProps) => ReactNode;
     renderLoading?: () => ReactNode;
 }
 export default function ListContainer<T extends string, State, Input, Full extends {
@@ -35,4 +40,3 @@ export default function ListContainer<T extends string, State, Input, Full exten
 }, Light extends {
     id: string;
 }, Sort extends SortType>({ className, cardListClassName, type, query, init, create, sliceName, title, sort, columns, actions, tools, renderDashboard, renderItem, renderTemplate, renderTitle, renderView, renderQueryMaker, renderInsight, renderLoading, }: ListContainerProps<T, State, Input, Full, Light, Sort>): import("react/jsx-runtime").JSX.Element;
-export {};

package/Data/TableList.d.ts

@@ -15,7 +15,7 @@ interface TableListProps<T extends string, Input, Full extends {
     renderTemplate?: (props: any) => ReactNode | null;
     renderTitle?: (model: Full) => string | ReactNode;
     renderView?: (model: Full) => ReactNode | null;
-    actions?: DataAction<Light>[] | ((item: Light, idx: number) => DataAction<Light>[]);
+    actions?: DataAction[] | ((item: Light, idx: number) => DataAction[]);
     onItemClick?: (item: Light, idx: number) => void;
 }
 export default function TableList<T extends string, Input, Full extends {

package/Model/AdminPanel.d.ts

@@ -0,0 +1,31 @@
+import { type SortType } from "@akanjs/constant";
+import type { ListContainerProps } from "../Data/ListContainer";
+interface AdminPanelProps<T extends string, State, Input, Full extends {
+    id: string;
+}, Light extends {
+    id: string;
+}, Sort extends SortType> extends ListContainerProps<T, State, Input, Full, Light, Sort> {
+    sliceName: T;
+    components: {
+        Template: {
+            [key: string]: any;
+        };
+        Unit: {
+            [key: string]: any;
+        };
+        View: {
+            [key: string]: any;
+        };
+    };
+    queryMap?: {
+        [key: string]: any;
+    };
+    summaryColumns?: string[];
+    insightColumns?: string[];
+}
+export default function AdminPanel<T extends string, State, Input, Full extends {
+    id: string;
+}, Light extends {
+    id: string;
+}, 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/Model/index.d.ts

@@ -12,4 +12,5 @@ export declare const Model: {
     ViewEditModal: typeof import("./ViewEditModal").default;
     Edit: typeof import("./Edit").default;
     New: typeof import("./New").default;
+    AdminPanel: typeof import("./AdminPanel").default;
 };

package/Model/index_.d.ts

@@ -11,3 +11,4 @@ export declare const ViewWrapper: typeof import("./ViewWrapper").default;
 export declare const ViewEditModal: typeof import("./ViewEditModal").default;
 export declare const Edit: typeof import("./Edit").default;
 export declare const New: typeof import("./New").default;
+export declare const AdminPanel: typeof import("./AdminPanel").default;

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/Item.js

@@ -89,10 +89,7 @@ function Item({
 }) {
   const { l } = (0, import_next.usePage)();
   const strActions = actions.filter((action) => typeof action === "string").map((action, idx) => /* @__PURE__ */ (0, import_jsx_runtime.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);
@@ -184,7 +181,7 @@ const Action = ({
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: `btn btn-square btn-ghost btn-sm m-1 text-center ${outline && "btn-outline border-dashed"}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlineDelete, {}) })
     },
     action
-  ) : action.render();
+  ) : action;
 };
 const statusColors = {
   active: "badge-info badge-outline",

package/cjs/Data/ListContainer.js

@@ -57,19 +57,12 @@ function ListContainer({
   title,
   sort,
   columns = ["id", "createdAt", "updatedAt"],
-  actions,
+  actions = ["remove", "edit", "view"],
   tools = [],
   renderDashboard,
   renderItem,
   renderTemplate,
-  renderTitle = (model) => model.id ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h2", { className: "flex items-center justify-center py-3 text-lg sm:justify-start md:text-2xl", children: [
-    sliceName,
-    " - ",
-    model.id
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}),
   renderInsight,
@@ -78,7 +71,6 @@ function ListContainer({
   const { l } = (0, import_next.usePage)();
   const storeUse = import_store.st.use;
   const storeDo = import_store.st.do;
-  const storeGet = import_store.st.get;
   const refName = import_store.st.slice[sliceName].refName;
   const [modelName, modelClassName] = [refName, (0, import_common.capitalize)(refName)];
   if (refName !== sliceName)
@@ -111,6 +103,7 @@ function ListContainer({
   const cnst = (0, import_constant.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();
@@ -260,11 +253,11 @@ ${body}`], { type: "text/csv;charset=utf-8" });
       import_CardList.default,
       {
         sliceName,
-        renderItem: renderItem ?? (({ [sliceName]: model }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: model.id }, model.id)),
+        renderItem: renderItem ?? (({ [sliceName]: model }) => null),
         renderLoading,
         renderTemplate,
         renderView,
-        renderTitle,
+        renderTitle: RenderTitle,
         columns,
         actions,
         cardListClassName
@@ -276,10 +269,10 @@ ${body}`], { type: "text/csv;charset=utf-8" });
         sliceName,
         actions,
         renderTemplate,
-        renderTitle,
+        renderTitle: RenderTitle,
         renderView
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Model.Model.EditModal, { sliceName, renderTitle, children: RenderTemplate ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RenderTemplate, {}) : null })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Model.Model.EditModal, { sliceName, renderTitle: RenderTitle, children: RenderTemplate ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RenderTemplate, {}) : null })
   ] });
 }

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,8 +84,8 @@ function QueryMaker({ className, sliceName, query }) {
         import_Select.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) => {
@@ -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

@@ -0,0 +1,46 @@
+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 AdminPanel_exports = {};
+__export(AdminPanel_exports, {
+  default: () => AdminPanel
+});
+module.exports = __toCommonJS(AdminPanel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_Data = require("../Data");
+function AdminPanel({
+  sliceName,
+  components,
+  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: {} }),
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_Data.Data.ListContainer,
+    {
+      sliceName,
+      renderItem: components.Unit.General,
+      renderInsight,
+      renderDashboard,
+      renderTemplate: components.Template.General,
+      renderView: (model) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(components.View.General, { ...{ [sliceName]: model } }),
+      ...props
+    }
+  );
+}

package/cjs/Model/index.js

@@ -34,5 +34,6 @@ const Model = {
   ViewWrapper: import_index.ViewWrapper,
   ViewEditModal: import_index.ViewEditModal,
   Edit: import_index.Edit,
-  New: import_index.New
+  New: import_index.New,
+  AdminPanel: import_index.AdminPanel
 };

package/cjs/Model/index_.js

@@ -27,6 +27,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var index_exports = {};
 __export(index_exports, {
+  AdminPanel: () => AdminPanel,
   Edit: () => Edit,
   EditModal: () => EditModal,
   EditWrapper: () => EditWrapper,
@@ -56,3 +57,4 @@ const ViewWrapper = (0, import_next.lazy)(() => import("./ViewWrapper"));
 const ViewEditModal = (0, import_next.lazy)(() => import("./ViewEditModal"));
 const Edit = (0, import_next.lazy)(() => import("./Edit"));
 const New = (0, import_next.lazy)(() => import("./New"));
+const AdminPanel = (0, import_next.lazy)(() => import("./AdminPanel"));

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

@@ -39,14 +39,18 @@ 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 = {} }) => {
   (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 = ({