@akanjs/ui 0.9.41 → 0.9.43

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, queryMap, 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/Reconnect.d.ts

@@ -1,6 +1 @@
-export interface ReconnectProps {
-    path: string;
-    dev?: boolean;
-    fetchPing?: () => Promise<any>;
-}
-export declare const Reconnect: ({ path, dev, fetchPing }: ReconnectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Reconnect: () => import("react/jsx-runtime").JSX.Element | null;

package/System/index.d.ts

@@ -6,6 +6,6 @@ export declare const System: {
     ThemeToggle: () => import("react/jsx-runtime").JSX.Element | null;
     Root: ({ children, st }: import("./Root").RootProps) => import("react/jsx-runtime").JSX.Element;
     SelectLanguage: ({ className, languages }: import("./SelectLanguage").SelectLanguageProps) => import("react/jsx-runtime").JSX.Element;
-    Reconnect: ({ path, dev, fetchPing }: import("./Reconnect").ReconnectProps) => import("react/jsx-runtime").JSX.Element;
+    Reconnect: () => import("react/jsx-runtime").JSX.Element | null;
     DevModeToggle: () => import("react/jsx-runtime").JSX.Element;
 };

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

@@ -92,7 +92,7 @@ function QueryMaker({ className, sliceName, query }) {
         {
           value: querySetting.queryKey,
           options: Object.keys(summaryQueryMap).map((queryKey) => ({
-            label: l.qry(sliceName, queryKey),
+            label: l.field("summary", queryKey),
             value: queryKey
           })),
           onChange: (queryKey) => {

package/cjs/Load/Page.js

@@ -20,6 +20,7 @@ __export(Page_exports, {
   default: () => Page_default
 });
 module.exports = __toCommonJS(Page_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_base = require("@akanjs/base");
 var import_PageCSR = require("./PageCSR");
 const Page = import_base.baseClientEnv.renderMode === "csr" ? import_PageCSR.PageCSR : ({ loader, render }) => {
@@ -27,7 +28,11 @@ const Page = import_base.baseClientEnv.renderMode === "csr" ? import_PageCSR.Pag
     loader().then((data) => {
       resolve(render(data));
     }).catch((error) => {
-      reject(error);
+      const message = error instanceof Error ? error.message : typeof error === "string" ? error : "Unknown error";
+      if (message === "NEXT_REDIRECT")
+        reject(error);
+      else
+        resolve(/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-red-500", children: message }));
     });
   });
   return promise;

package/cjs/Model/AdminPanel.js

@@ -0,0 +1,49 @@
+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_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 }),
+  ...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/System/CSR.js

@@ -154,7 +154,7 @@ const CSRWrapper = ({
             import_ui.animated.div,
             {
               id: "topSafeArea",
-              className: (0, import_client.clsx)("bg-base-100 fixed inset-x-0 top-0", {}),
+              className: (0, import_client.clsx)("bg-base-100 fixed inset-x-0 top-0 max-w-screen", {}),
               ref: topSafeAreaRef,
               style: topSafeArea?.containerStyle
             }
@@ -163,7 +163,7 @@ const CSRWrapper = ({
             import_ui.animated.div,
             {
               id: "topInsetContainer",
-              className: (0, import_client.clsx)("bg-base-100 fixed inset-x-0 isolate", {}),
+              className: (0, import_client.clsx)("bg-base-100 fixed inset-x-0 isolate max-w-screen", {}),
               style: topInset?.containerStyle
             }
           ),
@@ -179,7 +179,7 @@ const CSRWrapper = ({
             import_ui.animated.div,
             {
               id: "bottomInsetContainer",
-              className: (0, import_client.clsx)("fixed inset-x-0 isolate", {}),
+              className: (0, import_client.clsx)("fixed inset-x-0 isolate max-w-screen", {}),
               style: bottomInset?.containerStyle
             }
           ),
@@ -187,7 +187,7 @@ const CSRWrapper = ({
             import_ui.animated.div,
             {
               id: "bottomSafeArea",
-              className: "bg-base-100 fixed inset-x-0",
+              className: "bg-base-100 fixed inset-x-0 max-w-screen",
               ref: bottomSafeAreaRef,
               style: bottomSafeArea?.containerStyle
             }

package/cjs/System/Common.js

@@ -24,7 +24,7 @@ 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_HealthCheck = require("./HealthCheck");
+var import_Reconnect = require("./Reconnect");
 const Common = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
 };
@@ -38,7 +38,6 @@ const CommonWrapper = ({
 }) => {
   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_HealthCheck.HealthCheck, { fetchPing }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Load.Load.Page,
       {
@@ -62,7 +61,8 @@ const CommonWrapper = ({
         },
         render
       }
-    )
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Reconnect.Reconnect, {})
   ] });
 };
 Common.Wrapper = CommonWrapper;

package/cjs/System/Reconnect.js

@@ -32,55 +32,65 @@ __export(Reconnect_exports, {
 });
 module.exports = __toCommonJS(Reconnect_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_client = require("@akanjs/client");
 var import_next = require("@akanjs/next");
 var import_signal = require("@akanjs/signal");
-var import_store = require("@akanjs/store");
 var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
 var import_tb = require("react-icons/tb");
-var import_Image = require("../Image");
-const Reconnect = ({ path, dev = false, fetchPing = () => import_signal.fetch.ping() }) => {
-  const DOTS_LENGTH = 4;
+const DOTS_LENGTH = 4;
+const Reconnect = () => {
+  const { l } = (0, import_next.usePage)();
   const [dots, setDots] = (0, import_react.useState)(0);
-  const connectStatus = import_store.st.use.connectStatus();
+  const [connectStatus, setConnectStatus] = (0, import_react.useState)("initial");
+  const handleConnect = (0, import_react.useCallback)(() => {
+    setConnectStatus((prev) => prev === "normal" || prev === "initial" ? prev : "connected");
+  }, []);
+  const handleDisconnect = (0, import_react.useCallback)(() => {
+    setConnectStatus((prev) => prev === "normal" || prev === "initial" ? "disconnected" : prev);
+    setTimeout(() => {
+      setConnectStatus((prev) => prev === "disconnected" ? "connecting" : prev);
+    }, 3e3);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const io = import_signal.client.getIo();
+    io.socket.on("connect", handleConnect);
+    io.socket.on("disconnect", handleDisconnect);
+    setTimeout(() => {
+      if (connectStatus !== "initial")
+        return;
+      if (import_signal.client.getIo().socket.connected)
+        setConnectStatus("normal");
+      else
+        handleDisconnect();
+    }, 1e3);
+    return () => {
+      io.socket.off("connect", handleConnect);
+      io.socket.off("disconnect", handleDisconnect);
+    };
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (connectStatus === "connected")
+      window.location.reload();
+  }, [connectStatus]);
   (0, import_next.useInterval)(() => {
-    setDots((prev) => (prev + 1) % DOTS_LENGTH);
+    if (connectStatus === "connecting")
+      setDots((prev) => (prev + 1) % DOTS_LENGTH);
   }, 500);
-  const reconnect = async () => {
-    try {
-      import_store.st.do.setConnectStatus("connecting");
-      await fetchPing();
-      import_store.st.do.setConnectStatus("connected");
-      setTimeout(() => {
-        if (!path || path === "/")
-          import_client.router.replace("/");
-        else
-          import_client.router.replace(`/${path}`);
-      }, 500);
-    } catch (e) {
-    }
-  };
-  (0, import_next.useInterval)(async () => {
-    if (!window.location.href.includes("/unknown"))
-      return;
-    if (connectStatus === "connected")
-      return;
-    await reconnect();
-  }, 5e3);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: dev ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex h-screen flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bg-base-300 flex w-4/5 flex-col items-center justify-center rounded-md p-5 md:w-1/3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-3xl font-bold", children: connectStatus === "disconnected" ? "Something's wrong!" : connectStatus === "connecting" ? "Connecting..." : "Connected!" }),
+  if (connectStatus === "initial" || connectStatus === "normal")
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "animate-fadeIn bg-base-100/50 fixed top-0 left-0 flex h-screen w-screen flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bg-base-300 flex w-4/5 flex-col items-center justify-center rounded-md p-5 md:w-1/3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-3xl font-bold whitespace-nowrap", children: connectStatus === "disconnected" ? l("base.somethingWrong") : connectStatus === "connecting" ? l("base.connecting") : l("base.connected") }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center justify-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "py-5", children: connectStatus === "disconnected" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-[150px] text-gray-500", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tb.TbPlugConnectedX, {}) }) }) : connectStatus === "connecting" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "animate-pulse py-5 text-[150px] text-gray-500", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tb.TbPlugConnectedX, {}) }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "animate-pop text-[150px] text-white", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tb.TbPlugConnected, {}) }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "py-5", children: connectStatus === "disconnected" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-[150px] text-gray-500", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tb.TbPlugConnectedX, {}) }) : connectStatus === "connecting" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "animate-pulse py-5 text-[150px] text-gray-500", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tb.TbPlugConnectedX, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "animate-pop text-[150px] text-white", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tb.TbPlugConnected, {}) }) }),
       connectStatus === "connected" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "animate-pop" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-lg", children: "Redirecting to the previous page in some seconds." }) })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-lg", children: l("base.refreshing") }) })
       ] }) : connectStatus === "connecting" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg", children: "Try reconnecting to the server" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg", children: l("base.tryReconnecting") }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center", children: Array.from({ length: DOTS_LENGTH }).map(
           (_, index) => dots >= index ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "visible", children: "." }, index) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "invisible", children: "." }, index)
         ) })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg", children: "Server disconnected." })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg", children: l("base.serverDisconnected") })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
@@ -89,19 +99,11 @@ const Reconnect = ({ path, dev = false, fetchPing = () => import_signal.fetch.pi
           "mt-2 text-center text-sm leading-tight text-gray-500",
           connectStatus === "disconnected" || connectStatus === "connecting" ? "visible" : "invisible"
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-bold", children: "*" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center justify-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: " Maybe your server is having a problem." }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-bold", children: "please check your server status." })
-          ] })
-        ] })
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center justify-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center justify-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: l("base.serverHasProblem") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-bold", children: l("base.checkServerStatus") })
+        ] }) })
       }
     )
-  ] }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex h-screen items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bg-base-300 flex w-4/5 flex-col items-center justify-center rounded-md py-5 md:w-1/3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-3xl font-bold", children: "\uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC5B4\uC694!" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Image.Image, { className: "mt-5", src: "/deadBot.svg", alt: "deadBot", color: "gray", width: 120, height: 120 }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg", children: "\uC11C\uBC84\uC5D0 \uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4." }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg", children: "\uC11C\uBC84\uC5D0 \uC5F0\uACB0\uC744 \uC7AC\uC2DC\uB3C4\uD558\uACE0 \uC788\uC5B4\uC694..." })
-  ] }) }) });
+  ] }) });
 };

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

@@ -78,7 +78,7 @@ function QueryMaker({ className, sliceName, query }) {
         {
           value: querySetting.queryKey,
           options: Object.keys(summaryQueryMap).map((queryKey) => ({
-            label: l.qry(sliceName, queryKey),
+            label: l.field("summary", queryKey),
             value: queryKey
           })),
           onChange: (queryKey) => {

package/esm/Load/Page.js

@@ -1,3 +1,4 @@
+import { jsx } from "react/jsx-runtime";
 import { baseClientEnv } from "@akanjs/base";
 import { PageCSR } from "./PageCSR";
 const Page = baseClientEnv.renderMode === "csr" ? PageCSR : ({ loader, render }) => {
@@ -5,7 +6,11 @@ const Page = baseClientEnv.renderMode === "csr" ? PageCSR : ({ loader, render })
     loader().then((data) => {
       resolve(render(data));
     }).catch((error) => {
-      reject(error);
+      const message = error instanceof Error ? error.message : typeof error === "string" ? error : "Unknown error";
+      if (message === "NEXT_REDIRECT")
+        reject(error);
+      else
+        resolve(/* @__PURE__ */ jsx("div", { className: "text-red-500", children: message }));
     });
   });
   return promise;

package/esm/Model/AdminPanel.js

@@ -0,0 +1,30 @@
+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 }),
+  ...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/System/CSR.js

@@ -131,7 +131,7 @@ const CSRWrapper = ({
             animated.div,
             {
               id: "topSafeArea",
-              className: clsx("bg-base-100 fixed inset-x-0 top-0", {}),
+              className: clsx("bg-base-100 fixed inset-x-0 top-0 max-w-screen", {}),
               ref: topSafeAreaRef,
               style: topSafeArea?.containerStyle
             }
@@ -140,7 +140,7 @@ const CSRWrapper = ({
             animated.div,
             {
               id: "topInsetContainer",
-              className: clsx("bg-base-100 fixed inset-x-0 isolate", {}),
+              className: clsx("bg-base-100 fixed inset-x-0 isolate max-w-screen", {}),
               style: topInset?.containerStyle
             }
           ),
@@ -156,7 +156,7 @@ const CSRWrapper = ({
             animated.div,
             {
               id: "bottomInsetContainer",
-              className: clsx("fixed inset-x-0 isolate", {}),
+              className: clsx("fixed inset-x-0 isolate max-w-screen", {}),
               style: bottomInset?.containerStyle
             }
           ),
@@ -164,7 +164,7 @@ const CSRWrapper = ({
             animated.div,
             {
               id: "bottomSafeArea",
-              className: "bg-base-100 fixed inset-x-0",
+              className: "bg-base-100 fixed inset-x-0 max-w-screen",
               ref: bottomSafeAreaRef,
               style: bottomSafeArea?.containerStyle
             }

package/esm/System/Common.js

@@ -2,7 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "dayjs/locale/ko";
 import { getAccount } from "@akanjs/client";
 import { Load } from "../Load";
-import { HealthCheck } from "./HealthCheck";
+import { Reconnect } from "./Reconnect";
 const Common = () => {
   return /* @__PURE__ */ jsx(Fragment, {});
 };
@@ -16,7 +16,6 @@ const CommonWrapper = ({
 }) => {
   const account = getAccount();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(HealthCheck, { fetchPing }),
     /* @__PURE__ */ jsx(
       Load.Page,
       {
@@ -40,7 +39,8 @@ const CommonWrapper = ({
         },
         render
       }
-    )
+    ),
+    /* @__PURE__ */ jsx(Reconnect, {})
   ] });
 };
 Common.Wrapper = CommonWrapper;

package/esm/System/Reconnect.js

@@ -1,54 +1,64 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { router } from "@akanjs/client";
-import { useInterval } from "@akanjs/next";
-import { fetch } from "@akanjs/signal";
-import { st } from "@akanjs/store";
+import { useInterval, usePage } from "@akanjs/next";
+import { client } from "@akanjs/signal";
 import clsx from "clsx";
-import { useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { TbPlugConnected, TbPlugConnectedX } from "react-icons/tb";
-import { Image } from "../Image";
-const Reconnect = ({ path, dev = false, fetchPing = () => fetch.ping() }) => {
-  const DOTS_LENGTH = 4;
+const DOTS_LENGTH = 4;
+const Reconnect = () => {
+  const { l } = usePage();
   const [dots, setDots] = useState(0);
-  const connectStatus = st.use.connectStatus();
+  const [connectStatus, setConnectStatus] = useState("initial");
+  const handleConnect = useCallback(() => {
+    setConnectStatus((prev) => prev === "normal" || prev === "initial" ? prev : "connected");
+  }, []);
+  const handleDisconnect = useCallback(() => {
+    setConnectStatus((prev) => prev === "normal" || prev === "initial" ? "disconnected" : prev);
+    setTimeout(() => {
+      setConnectStatus((prev) => prev === "disconnected" ? "connecting" : prev);
+    }, 3e3);
+  }, []);
+  useEffect(() => {
+    const io = client.getIo();
+    io.socket.on("connect", handleConnect);
+    io.socket.on("disconnect", handleDisconnect);
+    setTimeout(() => {
+      if (connectStatus !== "initial")
+        return;
+      if (client.getIo().socket.connected)
+        setConnectStatus("normal");
+      else
+        handleDisconnect();
+    }, 1e3);
+    return () => {
+      io.socket.off("connect", handleConnect);
+      io.socket.off("disconnect", handleDisconnect);
+    };
+  }, []);
+  useEffect(() => {
+    if (connectStatus === "connected")
+      window.location.reload();
+  }, [connectStatus]);
   useInterval(() => {
-    setDots((prev) => (prev + 1) % DOTS_LENGTH);
+    if (connectStatus === "connecting")
+      setDots((prev) => (prev + 1) % DOTS_LENGTH);
   }, 500);
-  const reconnect = async () => {
-    try {
-      st.do.setConnectStatus("connecting");
-      await fetchPing();
-      st.do.setConnectStatus("connected");
-      setTimeout(() => {
-        if (!path || path === "/")
-          router.replace("/");
-        else
-          router.replace(`/${path}`);
-      }, 500);
-    } catch (e) {
-    }
-  };
-  useInterval(async () => {
-    if (!window.location.href.includes("/unknown"))
-      return;
-    if (connectStatus === "connected")
-      return;
-    await reconnect();
-  }, 5e3);
-  return /* @__PURE__ */ jsx(Fragment, { children: dev ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "flex h-screen flex-col items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "bg-base-300 flex w-4/5 flex-col items-center justify-center rounded-md p-5 md:w-1/3", children: [
-    /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold", children: connectStatus === "disconnected" ? "Something's wrong!" : connectStatus === "connecting" ? "Connecting..." : "Connected!" }),
+  if (connectStatus === "initial" || connectStatus === "normal")
+    return null;
+  return /* @__PURE__ */ jsx("div", { className: "animate-fadeIn bg-base-100/50 fixed top-0 left-0 flex h-screen w-screen flex-col items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "bg-base-300 flex w-4/5 flex-col items-center justify-center rounded-md p-5 md:w-1/3", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold whitespace-nowrap", children: connectStatus === "disconnected" ? l("base.somethingWrong") : connectStatus === "connecting" ? l("base.connecting") : l("base.connected") }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "py-5", children: connectStatus === "disconnected" ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "text-[150px] text-gray-500", children: /* @__PURE__ */ jsx(TbPlugConnectedX, {}) }) }) : connectStatus === "connecting" ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "animate-pulse py-5 text-[150px] text-gray-500", children: /* @__PURE__ */ jsx(TbPlugConnectedX, {}) }) }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "animate-pop text-[150px] text-white", children: /* @__PURE__ */ jsx(TbPlugConnected, {}) }) }) }),
+      /* @__PURE__ */ jsx("div", { className: "py-5", children: connectStatus === "disconnected" ? /* @__PURE__ */ jsx("div", { className: "text-[150px] text-gray-500", children: /* @__PURE__ */ jsx(TbPlugConnectedX, {}) }) : connectStatus === "connecting" ? /* @__PURE__ */ jsx("div", { className: "animate-pulse py-5 text-[150px] text-gray-500", children: /* @__PURE__ */ jsx(TbPlugConnectedX, {}) }) : /* @__PURE__ */ jsx("div", { className: "animate-pop text-[150px] text-white", children: /* @__PURE__ */ jsx(TbPlugConnected, {}) }) }),
       connectStatus === "connected" ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("div", { className: "animate-pop" }),
-        /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx("span", { className: "text-lg", children: "Redirecting to the previous page in some seconds." }) })
+        /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx("span", { className: "text-lg", children: l("base.refreshing") }) })
       ] }) : connectStatus === "connecting" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center", children: [
-        /* @__PURE__ */ jsx("div", { className: "text-lg", children: "Try reconnecting to the server" }),
+        /* @__PURE__ */ jsx("div", { className: "text-lg", children: l("base.tryReconnecting") }),
         /* @__PURE__ */ jsx("div", { className: "flex items-center", children: Array.from({ length: DOTS_LENGTH }).map(
           (_, index) => dots >= index ? /* @__PURE__ */ jsx("div", { className: "visible", children: "." }, index) : /* @__PURE__ */ jsx("div", { className: "invisible", children: "." }, index)
         ) })
-      ] }) : /* @__PURE__ */ jsx("div", { className: "text-lg", children: "Server disconnected." })
+      ] }) : /* @__PURE__ */ jsx("div", { className: "text-lg", children: l("base.serverDisconnected") })
     ] }),
     /* @__PURE__ */ jsx(
       "div",
@@ -57,21 +67,13 @@ const Reconnect = ({ path, dev = false, fetchPing = () => fetch.ping() }) => {
           "mt-2 text-center text-sm leading-tight text-gray-500",
           connectStatus === "disconnected" || connectStatus === "connecting" ? "visible" : "invisible"
         ),
-        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "font-bold", children: "*" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center", children: [
-            /* @__PURE__ */ jsx("div", { children: " Maybe your server is having a problem." }),
-            /* @__PURE__ */ jsx("div", { className: "font-bold", children: "please check your server status." })
-          ] })
-        ] })
+        children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-2", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center", children: [
+          /* @__PURE__ */ jsx("div", { children: l("base.serverHasProblem") }),
+          /* @__PURE__ */ jsx("div", { className: "font-bold", children: l("base.checkServerStatus") })
+        ] }) })
       }
     )
-  ] }) }) }) : /* @__PURE__ */ jsx("div", { className: "flex h-screen items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "bg-base-300 flex w-4/5 flex-col items-center justify-center rounded-md py-5 md:w-1/3", children: [
-    /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold", children: "\uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC5B4\uC694!" }),
-    /* @__PURE__ */ jsx(Image, { className: "mt-5", src: "/deadBot.svg", alt: "deadBot", color: "gray", width: 120, height: 120 }),
-    /* @__PURE__ */ jsx("div", { className: "text-lg", children: "\uC11C\uBC84\uC5D0 \uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4." }),
-    /* @__PURE__ */ jsx("div", { className: "text-lg", children: "\uC11C\uBC84\uC5D0 \uC5F0\uACB0\uC744 \uC7AC\uC2DC\uB3C4\uD558\uACE0 \uC788\uC5B4\uC694..." })
-  ] }) }) });
+  ] }) });
 };
 export {
   Reconnect

package/package.json

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

package/System/HealthCheck.d.ts

@@ -1,5 +0,0 @@
-interface HealthCheckProps {
-    fetchPing?: () => Promise<any>;
-}
-export declare const HealthCheck: ({ fetchPing }: HealthCheckProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/cjs/System/HealthCheck.js

@@ -1,63 +0,0 @@
-"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 HealthCheck_exports = {};
-__export(HealthCheck_exports, {
-  HealthCheck: () => HealthCheck
-});
-module.exports = __toCommonJS(HealthCheck_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_client = require("@akanjs/client");
-var import_next = require("@akanjs/next");
-var import_signal = require("@akanjs/signal");
-var import_store = require("@akanjs/store");
-var import_react = require("react");
-const HealthCheck = ({ fetchPing = () => import_signal.fetch.ping() }) => {
-  (0, import_react.useEffect)(() => {
-    void (async () => {
-      if (window.location.href.includes("/unknown"))
-        return;
-      const fullPath = import_client.router.getFullPath(false);
-      try {
-        await fetchPing();
-        import_store.st.do.setConnectStatus("connected");
-        if (window.location.href.includes("/unknown")) {
-          import_client.router.back();
-        }
-      } catch (e) {
-        import_store.st.do.setConnectStatus("disconnected");
-        import_client.router.replace(`/unknown?p=${encodeURIComponent(fullPath)}`);
-      }
-    })();
-  }, []);
-  const pingCheck = async function() {
-    try {
-      await fetchPing();
-    } catch (e) {
-      import_store.st.do.setConnectStatus("disconnected");
-      const fullPath = import_client.router.getFullPath(false);
-      import_client.router.replace(`/unknown?p=${encodeURIComponent(fullPath)}`);
-    }
-  };
-  (0, import_next.useInterval)(async () => {
-    if (window.location.href.includes("/unknown"))
-      return;
-    await pingCheck();
-  }, 1e4);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
-};

package/esm/System/HealthCheck.js

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