@akanjs/store 0.0.54 → 0.0.56

package/index.mjs

@@ -0,0 +1 @@
+export * from "./src";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akanjs/store",
-  "version": "0.0.54",
+  "version": "0.0.56",
   "type": "commonjs",
   "publishConfig": {
     "access": "public"
@@ -17,5 +17,11 @@
   "dependencies": {
     "react": "^18.3.1",
     "zustand": "^5.0.2"
+  },
+  "exports": {
+    ".": {
+      "require": "./index.js",
+      "import": "./index.mjs"
+    }
   }
 }

package/src/index.mjs

@@ -0,0 +1,2 @@
+export * from "./types";
+export * from "./storeDecorators";

package/src/storeDecorators.mjs

@@ -0,0 +1,1095 @@
+"use client";
+import { DataList } from "@akanjs/base";
+import {
+  applyMixins,
+  capitalize,
+  deepObjectify,
+  isQueryEqual,
+  Logger,
+  lowerlize,
+  pathSet
+} from "@akanjs/common";
+import {
+  getClassMeta,
+  getFieldMetas,
+  getFullModelRef,
+  getLightModelRef
+} from "@akanjs/constant";
+import { msg } from "@akanjs/dictionary";
+import {
+  getGqlOnStorage,
+  immerify
+} from "@akanjs/signal";
+import { useEffect, useRef } from "react";
+import { create } from "zustand";
+import { devtools, subscribeWithSelector } from "zustand/middleware";
+import { immer } from "zustand/middleware/immer";
+const st = {};
+class StoreStorage {
+}
+const getStoreMeta = (storeName) => {
+  const storeMeta = Reflect.getMetadata(storeName, StoreStorage.prototype);
+  if (!storeMeta)
+    throw new Error(`storeMeta is not defined: ${storeName}`);
+  return storeMeta;
+};
+const setStoreMeta = (storeName, storeMeta) => {
+  Reflect.defineMetadata(storeName, storeMeta, StoreStorage.prototype);
+};
+const getStoreNames = () => {
+  const storeNames = Reflect.getMetadataKeys(StoreStorage.prototype);
+  if (!storeNames)
+    throw new Error(`storeNames is not defined`);
+  return storeNames;
+};
+const createState = (gql) => {
+  const [fieldName, className] = [lowerlize(gql.refName), capitalize(gql.refName)];
+  const names = {
+    model: fieldName,
+    Model: className,
+    modelLoading: `${fieldName}Loading`,
+    modelForm: `${fieldName}Form`,
+    modelFormLoading: `${fieldName}FormLoading`,
+    modelSubmit: `${fieldName}Submit`,
+    modelViewAt: `${fieldName}ViewAt`,
+    modelModal: `${fieldName}Modal`,
+    modelOperation: `${fieldName}Operation`,
+    defaultModel: `default${className}`,
+    defaultModelInsight: `default${className}Insight`,
+    modelList: `${fieldName}List`,
+    modelListLoading: `${fieldName}ListLoading`,
+    modelInitList: `${fieldName}InitList`,
+    modelInitAt: `${fieldName}InitAt`,
+    modelSelection: `${fieldName}Selection`,
+    modelInsight: `${fieldName}Insight`,
+    lastPageOfModel: `lastPageOf${className}`,
+    pageOfModel: `pageOf${className}`,
+    limitOfModel: `limitOf${className}`,
+    queryArgsOfModel: `queryArgsOf${className}`,
+    sortOfModel: `sortOf${className}`
+  };
+  const baseState = {
+    [names.model]: null,
+    [names.modelLoading]: true,
+    [names.modelForm]: { ...gql[names.defaultModel] },
+    [names.modelFormLoading]: true,
+    [names.modelSubmit]: { disabled: true, loading: false, times: 0 },
+    [names.modelViewAt]: /* @__PURE__ */ new Date(0),
+    [names.modelModal]: null,
+    [names.modelOperation]: "sleep"
+  };
+  const sliceState = gql.slices.reduce((acc, { sliceName, defaultArgs }) => {
+    const SliceName = capitalize(sliceName);
+    const namesOfSlice = {
+      defaultModel: SliceName.replace(names.Model, names.defaultModel),
+      //clusterInSelf Cluster
+      modelList: sliceName.replace(names.model, names.modelList),
+      modelListLoading: sliceName.replace(names.model, names.modelListLoading),
+      modelInitList: sliceName.replace(names.model, names.modelInitList),
+      modelInitAt: sliceName.replace(names.model, names.modelInitAt),
+      modelSelection: sliceName.replace(names.model, names.modelSelection),
+      modelInsight: sliceName.replace(names.model, names.modelInsight),
+      lastPageOfModel: SliceName.replace(names.Model, names.lastPageOfModel),
+      pageOfModel: SliceName.replace(names.Model, names.pageOfModel),
+      limitOfModel: SliceName.replace(names.Model, names.limitOfModel),
+      queryArgsOfModel: SliceName.replace(names.Model, names.queryArgsOfModel),
+      sortOfModel: SliceName.replace(names.Model, names.sortOfModel)
+    };
+    const singleSliceState = {
+      [namesOfSlice.defaultModel]: { ...gql[names.defaultModel] },
+      [namesOfSlice.modelList]: new DataList(),
+      [namesOfSlice.modelListLoading]: true,
+      [namesOfSlice.modelInitList]: new DataList(),
+      [namesOfSlice.modelInitAt]: /* @__PURE__ */ new Date(0),
+      [namesOfSlice.modelSelection]: new DataList(),
+      [namesOfSlice.modelInsight]: gql[names.defaultModelInsight],
+      [namesOfSlice.lastPageOfModel]: 1,
+      [namesOfSlice.pageOfModel]: 1,
+      [namesOfSlice.limitOfModel]: 20,
+      [namesOfSlice.queryArgsOfModel]: defaultArgs,
+      [namesOfSlice.sortOfModel]: "latest"
+    };
+    return Object.assign(acc, singleSliceState);
+  }, {});
+  return { ...baseState, ...sliceState };
+};
+const createActions = (gql) => {
+  const formSetterActions = makeFormSetter(gql);
+  const baseActions = makeActions(gql);
+  return { ...formSetterActions, ...baseActions };
+};
+const makeFormSetter = (gql) => {
+  const fileGql = getGqlOnStorage("file");
+  const [fieldName, className] = [lowerlize(gql.refName), capitalize(gql.refName)];
+  const modelRef = getFullModelRef(gql.refName);
+  const fieldMetas = getFieldMetas(modelRef);
+  const names = {
+    model: fieldName,
+    Model: className,
+    modelForm: `${fieldName}Form`,
+    writeOnModel: `writeOn${className}`,
+    addModelFiles: `add${className}Files`
+  };
+  const baseSetAction = {
+    [names.writeOnModel]: function(path, value) {
+      this.set((state) => {
+        pathSet(state[names.modelForm], path, value);
+      });
+    }
+  };
+  const fieldSetAction = fieldMetas.reduce((acc, fieldMeta) => {
+    const [fieldKeyName, classKeyName] = [lowerlize(fieldMeta.key), capitalize(fieldMeta.key)];
+    const namesOfField = {
+      field: fieldKeyName,
+      Field: classKeyName,
+      setFieldOnModel: `set${classKeyName}On${className}`,
+      addFieldOnModel: `add${classKeyName}On${className}`,
+      subFieldOnModel: `sub${classKeyName}On${className}`,
+      addOrSubFieldOnModel: `addOrSub${classKeyName}On${className}`,
+      uploadFieldOnModel: `upload${classKeyName}On${className}`
+    };
+    const singleFieldSetAction = {
+      [namesOfField.setFieldOnModel]: function(value) {
+        this.set((state) => {
+          const setValue = fieldMeta.isClass ? immerify(fieldMeta.modelRef, value) : value;
+          state[names.modelForm][namesOfField.field] = setValue;
+        });
+      },
+      ...fieldMeta.isArray ? {
+        [namesOfField.addFieldOnModel]: function(value, options = {}) {
+          const form = this.get()[names.modelForm];
+          const length = form[namesOfField.field].length;
+          if (options.limit && options.limit <= length)
+            return;
+          const idx = options.idx ?? length;
+          const setValue = fieldMeta.isClass ? immerify(fieldMeta.modelRef, value) : value;
+          this.set((state) => {
+            state[names.modelForm][namesOfField.field] = [
+              ...form[namesOfField.field].slice(0, idx),
+              ...Array.isArray(setValue) ? setValue : [setValue],
+              ...form[namesOfField.field].slice(idx)
+            ];
+          });
+        },
+        [namesOfField.subFieldOnModel]: function(idx) {
+          const form = this.get()[names.modelForm];
+          this.set((state) => {
+            state[names.modelForm][namesOfField.field] = typeof idx === "number" ? form[namesOfField.field].filter((_, i) => i !== idx) : form[namesOfField.field].filter((_, i) => !idx.includes(i));
+          });
+        },
+        [namesOfField.addOrSubFieldOnModel]: function(value, options = {}) {
+          const { [names.modelForm]: form } = this.get();
+          const index = form[namesOfField.field].findIndex((v) => v === value);
+          if (index === -1)
+            this[namesOfField.addFieldOnModel](value, options);
+          else
+            this[namesOfField.subFieldOnModel](index);
+        }
+      } : {},
+      ...fieldMeta.name === "File" ? {
+        [namesOfField.uploadFieldOnModel]: async function(fileList, index) {
+          const form = this.get()[names.modelForm];
+          if (!fileList.length)
+            return;
+          const files = await gql[names.addModelFiles](
+            fileList,
+            form.id
+          );
+          if (fieldMeta.isArray) {
+            const idx = index ?? form[namesOfField.field].length;
+            this.set((state) => {
+              state[names.modelForm][namesOfField.field] = [
+                ...form[namesOfField.field].slice(0, idx),
+                ...files,
+                ...form[namesOfField.field].slice(idx)
+              ];
+            });
+          } else {
+            this.set((state) => {
+              state[names.modelForm][namesOfField.field] = files[0];
+            });
+          }
+          files.map((file) => {
+            const intervalKey = setInterval(() => {
+              void (async () => {
+                const currentFile = await fileGql.file(file.id);
+                if (fieldMeta.isArray)
+                  this.set((state) => {
+                    state[names.modelForm][namesOfField.field] = state[names.modelForm][namesOfField.field].map(
+                      (file2) => file2.id === currentFile.id ? currentFile : file2
+                    );
+                  });
+                else
+                  this.set((state) => {
+                    state[names.modelForm][namesOfField.field] = currentFile;
+                  });
+                if (currentFile.status !== "uploading")
+                  clearInterval(intervalKey);
+              })();
+            }, 3e3);
+          });
+        }
+      } : {}
+    };
+    return Object.assign(acc, singleFieldSetAction);
+  }, {});
+  return Object.assign(fieldSetAction, baseSetAction);
+};
+const makeActions = (gql) => {
+  const [fieldName, className] = [lowerlize(gql.refName), capitalize(gql.refName)];
+  const modelRef = getFullModelRef(className);
+  const lightModelRef = getLightModelRef(modelRef);
+  const names = {
+    model: fieldName,
+    _model: `_${fieldName}`,
+    Model: className,
+    purifyModel: `purify${className}`,
+    crystalizeModel: `crystalize${className}`,
+    lightCrystalizeModel: `lightCrystalize${className}`,
+    crystalizeInsight: `crystalize${className}Insight`,
+    modelOperation: `${fieldName}Operation`,
+    defaultModel: `default${className}`,
+    modelInsight: `${fieldName}Insight`,
+    modelForm: `${fieldName}Form`,
+    modelSubmit: `${fieldName}Submit`,
+    modelLoading: `${fieldName}Loading`,
+    modelFormLoading: `${fieldName}FormLoading`,
+    modelList: `${fieldName}List`,
+    modelListLoading: `${fieldName}ListLoading`,
+    modelSelection: `${fieldName}Selection`,
+    createModelInForm: `create${className}InForm`,
+    updateModelInForm: `modify${className}InForm`,
+    createModel: `create${className}`,
+    updateModel: `update${className}`,
+    removeModel: `remove${className}`,
+    checkModelSubmitable: `check${className}Submitable`,
+    submitModel: `submit${className}`,
+    newModel: `new${className}`,
+    editModel: `edit${className}`,
+    mergeModel: `merge${className}`,
+    viewModel: `view${className}`,
+    setModel: `set${className}`,
+    resetModel: `reset${className}`,
+    modelViewAt: `${fieldName}ViewAt`,
+    modelModal: `${fieldName}Modal`,
+    initModel: `init${className}`,
+    modelInitList: `${fieldName}InitList`,
+    modelInitAt: `${fieldName}InitAt`,
+    refreshModel: `refresh${className}`,
+    selectModel: `select${className}`,
+    setPageOfModel: `setPageOf${className}`,
+    addPageOfModel: `addPageOf${className}`,
+    setLimitOfModel: `setLimitOf${className}`,
+    setQueryArgsOfModel: `setQueryArgsOf${className}`,
+    setSortOfModel: `setSortOf${className}`,
+    lastPageOfModel: `lastPageOf${className}`,
+    pageOfModel: `pageOf${className}`,
+    limitOfModel: `limitOf${className}`,
+    queryArgsOfModel: `queryArgsOf${className}`,
+    sortOfModel: `sortOf${className}`
+  };
+  const baseAction = {
+    [names.createModelInForm]: async function({ idx, path, modal, sliceName = names.model, onError, onSuccess } = {}) {
+      const SliceName = capitalize(sliceName);
+      const namesOfSlice = {
+        defaultModel: SliceName.replace(names.Model, names.defaultModel),
+        modelList: sliceName.replace(names.model, names.modelList),
+        modelListLoading: sliceName.replace(names.model, names.modelListLoading),
+        modelInsight: sliceName.replace(names.model, names.modelInsight)
+      };
+      const currentState = this.get();
+      const modelForm = currentState[names.modelForm];
+      const modelList = currentState[namesOfSlice.modelList];
+      const modelListLoading = currentState[namesOfSlice.modelListLoading];
+      const modelInsight = currentState[namesOfSlice.modelInsight];
+      const defaultModel = currentState[namesOfSlice.defaultModel];
+      const modelInput = gql[names.purifyModel](modelForm);
+      if (!modelInput)
+        return;
+      this.set({ [names.modelLoading]: true });
+      const model = await gql[names.createModel](modelInput, { onError });
+      const newModelList = modelListLoading ? modelList : new DataList([...modelList.slice(0, idx ?? 0), model, ...modelList.slice(idx ?? 0)]);
+      const newModelInsight = gql[names.crystalizeInsight]({
+        ...modelInsight,
+        count: modelInsight.count + 1
+      });
+      this.set({
+        [names.modelForm]: immerify(modelRef, defaultModel),
+        [names.model]: model,
+        [names.modelLoading]: false,
+        [namesOfSlice.modelList]: newModelList,
+        [namesOfSlice.modelInsight]: newModelInsight,
+        [names.modelViewAt]: /* @__PURE__ */ new Date(),
+        [names.modelModal]: modal ?? null,
+        ...typeof path === "string" && path ? { [path]: model } : {}
+      });
+      await onSuccess?.(model);
+    },
+    [names.updateModelInForm]: async function({ path, modal, sliceName = names.model, onError, onSuccess } = {}) {
+      const SliceName = capitalize(sliceName);
+      const namesOfSlice = {
+        defaultModel: SliceName.replace(names.Model, names.defaultModel)
+      };
+      const currentState = this.get();
+      const model = currentState[names.model];
+      const modelForm = currentState[names.modelForm];
+      const defaultModel = currentState[namesOfSlice.defaultModel];
+      const modelInput = gql[names.purifyModel](modelForm);
+      if (!modelInput)
+        return;
+      if (model?.id === modelForm.id)
+        this.set({ [names.modelLoading]: modelForm.id });
+      const updatedModel = await gql[names.updateModel](modelForm.id, modelInput, {
+        onError
+      });
+      this.set({
+        ...model?.id === updatedModel.id ? { [names.model]: updatedModel, [names.modelLoading]: false, [names.modelViewAt]: /* @__PURE__ */ new Date() } : {},
+        [names.modelForm]: immerify(modelRef, defaultModel),
+        [names.modelModal]: modal ?? null,
+        ...typeof path === "string" && path ? { [path]: updatedModel } : {}
+      });
+      const updatedLightModel = gql[names.lightCrystalizeModel](updatedModel);
+      gql.slices.forEach(({ sliceName: sliceName2 }) => {
+        const namesOfSlice2 = {
+          modelList: sliceName2.replace(names.model, names.modelList),
+          modelListLoading: sliceName2.replace(names.model, names.modelListLoading)
+        };
+        const currentState2 = this.get();
+        const modelList = currentState2[namesOfSlice2.modelList];
+        const modelListLoading = currentState2[namesOfSlice2.modelListLoading];
+        if (modelListLoading || !modelList.has(updatedModel.id))
+          return;
+        const newModelList = new DataList(modelList).set(updatedLightModel);
+        this.set({ [namesOfSlice2.modelList]: newModelList });
+      });
+      await onSuccess?.(updatedModel);
+    },
+    [names.createModel]: async function(data, { idx, path, modal, sliceName = names.model, onError, onSuccess } = {}) {
+      const SliceName = capitalize(sliceName);
+      const namesOfSlice = {
+        defaultModel: SliceName.replace(names.Model, names.defaultModel),
+        modelList: sliceName.replace(names.model, names.modelList),
+        modelListLoading: sliceName.replace(names.model, names.modelListLoading),
+        modelInsight: sliceName.replace(names.model, names.modelInsight)
+      };
+      const currentState = this.get();
+      const modelList = currentState[namesOfSlice.modelList];
+      const modelListLoading = currentState[namesOfSlice.modelListLoading];
+      const modelInsight = currentState[namesOfSlice.modelInsight];
+      const modelInput = gql[names.purifyModel](data);
+      if (!modelInput)
+        return;
+      this.set({ [names.modelLoading]: true });
+      const model = await gql[names.createModel](modelInput, { onError });
+      const newModelList = modelListLoading ? modelList : new DataList([...modelList.slice(0, idx ?? 0), model, ...modelList.slice(idx ?? 0)]);
+      const newModelInsight = gql[names.crystalizeInsight]({
+        ...modelInsight,
+        count: modelInsight.count + 1
+      });
+      this.set({
+        [names.model]: model,
+        [names.modelLoading]: false,
+        [namesOfSlice.modelList]: newModelList,
+        [namesOfSlice.modelInsight]: newModelInsight,
+        [names.modelViewAt]: /* @__PURE__ */ new Date(),
+        [names.modelModal]: modal ?? null,
+        ...typeof path === "string" && path ? { [path]: model } : {}
+      });
+      await onSuccess?.(model);
+    },
+    [names.updateModel]: async function(id, data, { idx, path, modal, sliceName = names.model, onError, onSuccess } = {}) {
+      const currentState = this.get();
+      const model = currentState[names.model];
+      const modelInput = gql[names.purifyModel](data);
+      if (!modelInput)
+        return;
+      if (model?.id === id)
+        this.set({ [names.modelLoading]: id });
+      const updatedModel = await gql[names.updateModel](id, modelInput, { onError });
+      this.set({
+        ...model?.id === updatedModel.id ? { [names.model]: updatedModel, [names.modelLoading]: false, [names.modelViewAt]: /* @__PURE__ */ new Date() } : {},
+        [names.modelModal]: modal ?? null,
+        ...typeof path === "string" && path ? { [path]: updatedModel } : {}
+      });
+      const updatedLightModel = gql[names.lightCrystalizeModel](updatedModel);
+      gql.slices.forEach(({ sliceName: sliceName2 }) => {
+        const namesOfSlice = {
+          modelList: sliceName2.replace(names.model, names.modelList),
+          modelListLoading: sliceName2.replace(names.model, names.modelListLoading)
+        };
+        const currentState2 = this.get();
+        const modelList = currentState2[namesOfSlice.modelList];
+        const modelListLoading = currentState2[namesOfSlice.modelListLoading];
+        if (modelListLoading || !modelList.has(updatedModel.id))
+          return;
+        const newModelList = new DataList(modelList).set(updatedLightModel);
+        this.set({ [namesOfSlice.modelList]: newModelList });
+      });
+      await onSuccess?.(updatedModel);
+    },
+    [names.removeModel]: async function(id, options) {
+      const { modal, ...fetchPolicyOptions } = options ?? {};
+      const model = await gql[names.removeModel](
+        id,
+        fetchPolicyOptions
+      );
+      const lightModel = gql[names.lightCrystalizeModel](model);
+      gql.slices.forEach(({ sliceName }) => {
+        const namesOfSlice = {
+          modelList: sliceName.replace(names.model, names.modelList),
+          modelListLoading: sliceName.replace(names.model, names.modelListLoading),
+          modelSelection: sliceName.replace(names.model, names.modelSelection),
+          modelInsight: sliceName.replace(names.model, names.modelInsight)
+        };
+        const currentState = this.get();
+        const modelList = currentState[namesOfSlice.modelList];
+        const modelListLoading = currentState[namesOfSlice.modelListLoading];
+        const modelSelection = currentState[namesOfSlice.modelSelection];
+        const modelInsight = currentState[namesOfSlice.modelInsight];
+        if (modelListLoading || !modelList.has(model.id))
+          return;
+        const newModelList = new DataList(modelList);
+        if (model.removedAt) {
+          newModelList.delete(id);
+          const newModelInsight = gql[names.crystalizeInsight]({
+            ...modelInsight,
+            count: modelInsight.count - 1
+          });
+          const newModelSelection = new DataList(modelSelection);
+          newModelSelection.delete(id);
+          this.set({
+            [namesOfSlice.modelList]: newModelList,
+            [namesOfSlice.modelInsight]: newModelInsight,
+            ...modelSelection.has(model.id) ? { [namesOfSlice.modelSelection]: newModelSelection } : {},
+            ...modal !== void 0 ? { [names.modelModal]: modal } : {}
+          });
+        } else {
+          newModelList.set(lightModel);
+          this.set({
+            [namesOfSlice.modelList]: newModelList,
+            ...modal !== void 0 ? { [names.modelModal]: modal } : {}
+          });
+        }
+      });
+    },
+    [names.checkModelSubmitable]: function(disabled) {
+      const currentState = this.get();
+      const modelForm = currentState[names.modelForm];
+      const modelSubmit = currentState[names.modelSubmit];
+      const modelInput = gql[names.purifyModel](modelForm);
+      this.set({ [names.modelSubmit]: { ...modelSubmit, disabled: !modelInput || disabled } });
+    },
+    [names.submitModel]: async function(option) {
+      const currentState = this.get();
+      const modelForm = currentState[names.modelForm];
+      const modelSubmit = currentState[names.modelSubmit];
+      this.set({ [names.modelSubmit]: { ...modelSubmit, loading: true } });
+      if (modelForm.id)
+        await this[names.updateModelInForm](option);
+      else
+        await this[names.createModelInForm](option);
+      this.set({ [names.modelSubmit]: { ...modelSubmit, loading: false, times: modelSubmit.times + 1 } });
+    },
+    [names.newModel]: function(partial = {}, { modal, setDefault, sliceName = names.model } = {}) {
+      const SliceName = capitalize(sliceName);
+      const namesOfSlice = {
+        defaultModel: SliceName.replace(names.Model, names.defaultModel)
+      };
+      const currentState = this.get();
+      const defaultModel = currentState[namesOfSlice.defaultModel];
+      this.set({
+        [names.modelForm]: immerify(modelRef, { ...defaultModel, ...partial }),
+        [namesOfSlice.defaultModel]: setDefault ? immerify(modelRef, { ...defaultModel, ...partial }) : defaultModel,
+        [names.model]: null,
+        [names.modelModal]: modal ?? "edit",
+        [names.modelFormLoading]: false
+      });
+    },
+    [names.editModel]: async function(modelOrId, { modal, onError } = {}) {
+      const id = typeof modelOrId === "string" ? modelOrId : modelOrId.id;
+      this.set({ [names.modelFormLoading]: id, [names.modelModal]: modal ?? "edit" });
+      this.set((state) => {
+        state[names.modelForm].id = id;
+      });
+      const model = await gql[names.model](id, { onError });
+      const modelForm = deepObjectify(model);
+      this.set({
+        [names.model]: model,
+        [names.modelFormLoading]: false,
+        [names.modelViewAt]: /* @__PURE__ */ new Date(),
+        [names.modelForm]: modelForm
+      });
+    },
+    [names.mergeModel]: async function(modelOrId, data, options) {
+      const id = typeof modelOrId === "string" ? modelOrId : modelOrId.id;
+      const currentState = this.get();
+      const model = currentState[names.model];
+      if (id === model?.id)
+        this.set({ modelLoading: id });
+      const updatedModel = await gql[names.mergeModel](modelOrId, data, options);
+      this.set({
+        [names.model]: id === model?.id ? updatedModel : model,
+        [names.modelLoading]: false
+      });
+      const updatedLightModel = gql[names.lightCrystalizeModel](updatedModel);
+      gql.slices.forEach(({ sliceName }) => {
+        const namesOfSlice = {
+          modelList: sliceName.replace(names.model, names.modelList),
+          modelListLoading: sliceName.replace(names.model, names.modelListLoading)
+        };
+        const currentState2 = this.get();
+        const modelList = currentState2[namesOfSlice.modelList];
+        const modelListLoading = currentState2[namesOfSlice.modelListLoading];
+        if (modelListLoading || !modelList.has(updatedModel.id))
+          return;
+        const newModelList = new DataList(modelList).set(updatedLightModel);
+        this.set({ [namesOfSlice.modelList]: newModelList });
+      });
+    },
+    [names.viewModel]: async function(modelOrId, { modal, onError } = {}) {
+      const id = typeof modelOrId === "string" ? modelOrId : modelOrId.id;
+      this.set({ [names.modelModal]: modal ?? "view", [names.modelLoading]: id });
+      const model = await gql[names.model](id, { onError });
+      this.set({ [names.model]: model, [names.modelViewAt]: /* @__PURE__ */ new Date(), [names.modelLoading]: false });
+    },
+    [names.setModel]: function(fullOrLightModel) {
+      const currentState = this.get();
+      const model = currentState[names.model];
+      const isFull = fullOrLightModel instanceof modelRef;
+      if (isFull) {
+        const crystalizedModel = gql[names.crystalizeModel](fullOrLightModel);
+        this.set({ [names.model]: crystalizedModel });
+      } else if (model?.id === fullOrLightModel.id) {
+        const crystalizedModel = gql[names.crystalizeModel]({ ...model, ...fullOrLightModel });
+        this.set({ [names.model]: crystalizedModel });
+      }
+      const lightModel = gql[names.lightCrystalizeModel](fullOrLightModel);
+      gql.slices.forEach(({ sliceName }) => {
+        const namesOfSlice = {
+          modelList: sliceName.replace(names.model, names.modelList),
+          modelListLoading: sliceName.replace(names.model, names.modelListLoading)
+        };
+        const modelList = currentState[namesOfSlice.modelList];
+        const modelListLoading = currentState[namesOfSlice.modelListLoading];
+        if (modelListLoading || !modelList.has(lightModel.id))
+          return;
+        this.set({ [namesOfSlice.modelList]: modelList.set(lightModel).save() });
+      });
+    },
+    [names.resetModel]: function(model) {
+      const currentState = this.get();
+      const defaultModel = currentState[names.defaultModel];
+      this.set({
+        [names.model]: model ?? null,
+        [names.modelViewAt]: /* @__PURE__ */ new Date(0),
+        [names.modelForm]: immerify(modelRef, defaultModel),
+        [names.modelModal]: null
+      });
+      return model ?? null;
+    }
+  };
+  const sliceAction = gql.slices.reduce((acc, { sliceName, argLength }) => {
+    const SliceName = capitalize(sliceName);
+    const namesOfSlice = {
+      defaultModel: SliceName.replace(names.Model, names.defaultModel),
+      modelInsight: sliceName.replace(names.model, names.modelInsight),
+      modelList: sliceName.replace(names.model, names.modelList),
+      modelListLoading: sliceName.replace(names.model, names.modelListLoading),
+      initModel: SliceName.replace(names.Model, names.initModel),
+      modelInitList: SliceName.replace(names.Model, names.modelInitList),
+      modelInitAt: SliceName.replace(names.Model, names.modelInitAt),
+      refreshModel: SliceName.replace(names.Model, names.refreshModel),
+      selectModel: SliceName.replace(names.Model, names.selectModel),
+      setPageOfModel: SliceName.replace(names.Model, names.setPageOfModel),
+      addPageOfModel: SliceName.replace(names.Model, names.addPageOfModel),
+      setLimitOfModel: SliceName.replace(names.Model, names.setLimitOfModel),
+      setQueryArgsOfModel: SliceName.replace(names.Model, names.setQueryArgsOfModel),
+      setSortOfModel: SliceName.replace(names.Model, names.setSortOfModel),
+      lastPageOfModel: SliceName.replace(names.Model, names.lastPageOfModel),
+      pageOfModel: SliceName.replace(names.Model, names.pageOfModel),
+      limitOfModel: SliceName.replace(names.Model, names.limitOfModel),
+      queryArgsOfModel: SliceName.replace(names.Model, names.queryArgsOfModel),
+      sortOfModel: SliceName.replace(names.Model, names.sortOfModel),
+      modelSelection: SliceName.replace(names.Model, names.modelSelection)
+    };
+    const singleSliceAction = {
+      [namesOfSlice.initModel]: async function(...args) {
+        const initArgLength = Math.min(args.length, argLength);
+        const initForm = { invalidate: false, ...args[argLength] ?? {} };
+        const queryArgs = new Array(initArgLength).fill(null).map((_, i) => args[i]);
+        const defaultModel = immerify(modelRef, { ...gql[names.defaultModel], ...initForm.default ?? {} });
+        this.set({ [names.defaultModel]: defaultModel });
+        await this[namesOfSlice.refreshModel](
+          ...initArgLength === argLength ? [...queryArgs, initForm] : queryArgs
+        );
+      },
+      [namesOfSlice.refreshModel]: async function(...args) {
+        const refreshArgLength = Math.min(args.length, argLength);
+        const currentState = this.get();
+        const existingQueryArgs = currentState[namesOfSlice.queryArgsOfModel];
+        const queryArgs = [
+          ...new Array(refreshArgLength).fill(null).map((_, i) => args[i]),
+          ...existingQueryArgs.slice(refreshArgLength, argLength)
+        ];
+        const initForm = args[argLength] ?? {};
+        const {
+          page = currentState[namesOfSlice.pageOfModel],
+          limit = currentState[namesOfSlice.limitOfModel],
+          sort = currentState[namesOfSlice.sortOfModel],
+          invalidate = true
+        } = initForm;
+        const modelOperation = currentState[names.modelOperation];
+        const queryArgsOfModel = currentState[namesOfSlice.queryArgsOfModel];
+        const pageOfModel = currentState[namesOfSlice.pageOfModel];
+        const limitOfModel = currentState[namesOfSlice.limitOfModel];
+        const sortOfModel = currentState[namesOfSlice.sortOfModel];
+        if (!invalidate && !["sleep", "reset"].includes(modelOperation) && isQueryEqual(queryArgs, queryArgsOfModel) && page === pageOfModel && limit === limitOfModel && isQueryEqual(sort, sortOfModel))
+          return;
+        else
+          this.set({ [namesOfSlice.modelListLoading]: true });
+        const [modelDataList, modelInsight] = await Promise.all([
+          gql[namesOfSlice.modelList](
+            ...queryArgs,
+            (page - 1) * limit,
+            limit,
+            sort,
+            { onError: initForm.onError }
+          ),
+          gql[namesOfSlice.modelInsight](...queryArgs, {
+            onError: initForm.onError
+          })
+        ]);
+        const modelList = new DataList(modelDataList);
+        this.set({
+          [namesOfSlice.modelList]: modelList,
+          [namesOfSlice.modelListLoading]: false,
+          [namesOfSlice.modelInsight]: modelInsight,
+          [namesOfSlice.modelInitList]: modelList,
+          [namesOfSlice.modelInitAt]: /* @__PURE__ */ new Date(),
+          [namesOfSlice.lastPageOfModel]: Math.max(Math.floor((modelInsight.count - 1) / limit) + 1, 1),
+          [namesOfSlice.limitOfModel]: limit,
+          [namesOfSlice.queryArgsOfModel]: queryArgs,
+          [namesOfSlice.sortOfModel]: sort,
+          [namesOfSlice.pageOfModel]: page,
+          [names.modelOperation]: "idle"
+        });
+      },
+      [namesOfSlice.selectModel]: function(model, { refresh, remove } = {}) {
+        const models = Array.isArray(model) ? model : [model];
+        const currentState = this.get();
+        const modelSelection = currentState[namesOfSlice.modelSelection];
+        if (refresh)
+          this.set({ [namesOfSlice.modelSelection]: new DataList(models) });
+        else if (remove) {
+          const newModelSelection = new DataList(modelSelection);
+          models.map((model2) => newModelSelection.delete(model2.id));
+          this.set({ [namesOfSlice.modelSelection]: newModelSelection });
+        } else {
+          this.set({ [namesOfSlice.modelSelection]: new DataList([...modelSelection.values, ...models]) });
+        }
+      },
+      [namesOfSlice.setPageOfModel]: async function(page, options) {
+        const currentState = this.get();
+        const queryArgsOfModel = currentState[namesOfSlice.queryArgsOfModel];
+        const pageOfModel = currentState[namesOfSlice.pageOfModel];
+        const limitOfModel = currentState[namesOfSlice.limitOfModel];
+        const sortOfModel = currentState[namesOfSlice.sortOfModel];
+        if (pageOfModel === page)
+          return;
+        this.set({ [namesOfSlice.modelListLoading]: true });
+        const modelDataList = await gql[namesOfSlice.modelList](
+          ...queryArgsOfModel,
+          (page - 1) * limitOfModel,
+          limitOfModel,
+          sortOfModel,
+          options
+        );
+        const modelList = new DataList(modelDataList);
+        this.set({
+          [namesOfSlice.modelList]: modelList,
+          [namesOfSlice.pageOfModel]: page,
+          [namesOfSlice.modelListLoading]: false
+        });
+      },
+      [namesOfSlice.addPageOfModel]: async function(page, options) {
+        const currentState = this.get();
+        const modelList = currentState[namesOfSlice.modelList];
+        const queryArgsOfModel = currentState[namesOfSlice.queryArgsOfModel];
+        const pageOfModel = currentState[namesOfSlice.pageOfModel];
+        const limitOfModel = currentState[namesOfSlice.limitOfModel];
+        const sortOfModel = currentState[namesOfSlice.sortOfModel];
+        if (pageOfModel === page)
+          return;
+        const addFront = page < pageOfModel;
+        const modelDataList = await gql[namesOfSlice.modelList](
+          ...queryArgsOfModel,
+          (page - 1) * limitOfModel,
+          limitOfModel,
+          sortOfModel,
+          options
+        );
+        const newModelList = new DataList(
+          addFront ? [...modelDataList, ...modelList] : [...modelList, ...modelDataList]
+        );
+        this.set({ [namesOfSlice.modelList]: newModelList, [namesOfSlice.pageOfModel]: page });
+      },
+      [namesOfSlice.setLimitOfModel]: async function(limit, options) {
+        const currentState = this.get();
+        const modelInsight = currentState[namesOfSlice.modelInsight];
+        const queryArgsOfModel = currentState[namesOfSlice.queryArgsOfModel];
+        const pageOfModel = currentState[namesOfSlice.pageOfModel];
+        const limitOfModel = currentState[namesOfSlice.limitOfModel];
+        const sortOfModel = currentState[namesOfSlice.sortOfModel];
+        if (limitOfModel === limit)
+          return;
+        const skip = (pageOfModel - 1) * limitOfModel;
+        const page = Math.max(Math.floor((skip - 1) / limit) + 1, 1);
+        const modelDataList = await gql[namesOfSlice.modelList](
+          ...queryArgsOfModel,
+          (page - 1) * limit,
+          limit,
+          sortOfModel,
+          options
+        );
+        const modelList = new DataList(modelDataList);
+        this.set({
+          [namesOfSlice.modelList]: modelList,
+          [namesOfSlice.lastPageOfModel]: Math.max(Math.floor((modelInsight.count - 1) / limit) + 1, 1),
+          [namesOfSlice.limitOfModel]: limit,
+          [namesOfSlice.pageOfModel]: page
+        });
+      },
+      [namesOfSlice.setQueryArgsOfModel]: async function(...args) {
+        const queryArgs = new Array(argLength).fill(null).map((_, i) => args[i]);
+        const options = args[argLength];
+        const currentState = this.get();
+        const queryArgsOfModel = currentState[namesOfSlice.queryArgsOfModel];
+        const limitOfModel = currentState[namesOfSlice.limitOfModel];
+        const sortOfModel = currentState[namesOfSlice.sortOfModel];
+        if (isQueryEqual(queryArgsOfModel, queryArgs)) {
+          Logger.trace(`${namesOfSlice.queryArgsOfModel} store-level cache hit`);
+          return;
+        }
+        this.set({ [namesOfSlice.modelListLoading]: true });
+        const [modelDataList, modelInsight] = await Promise.all([
+          gql[namesOfSlice.modelList](
+            ...queryArgs,
+            0,
+            limitOfModel,
+            sortOfModel,
+            options
+          ),
+          gql[namesOfSlice.modelInsight](...queryArgs, options)
+        ]);
+        const modelList = new DataList(modelDataList);
+        this.set({
+          [namesOfSlice.queryArgsOfModel]: queryArgs,
+          [namesOfSlice.modelList]: modelList,
+          [namesOfSlice.modelInsight]: modelInsight,
+          [namesOfSlice.lastPageOfModel]: Math.max(Math.floor((modelInsight.count - 1) / limitOfModel) + 1, 1),
+          [namesOfSlice.pageOfModel]: 1,
+          [namesOfSlice.modelSelection]: /* @__PURE__ */ new Map(),
+          [namesOfSlice.modelListLoading]: false
+        });
+      },
+      [namesOfSlice.setSortOfModel]: async function(sort, options) {
+        const currentState = this.get();
+        const queryArgsOfModel = currentState[namesOfSlice.queryArgsOfModel];
+        const limitOfModel = currentState[namesOfSlice.limitOfModel];
+        const sortOfModel = currentState[namesOfSlice.sortOfModel];
+        if (sortOfModel === sort)
+          return;
+        this.set({ [namesOfSlice.modelListLoading]: true });
+        const modelDataList = await gql[namesOfSlice.modelList](
+          ...queryArgsOfModel,
+          0,
+          limitOfModel,
+          sort,
+          options
+        );
+        const modelList = new DataList(modelDataList);
+        this.set({
+          [namesOfSlice.modelList]: modelList,
+          [namesOfSlice.sortOfModel]: sort,
+          [namesOfSlice.pageOfModel]: 1,
+          [namesOfSlice.modelListLoading]: false
+        });
+      }
+    };
+    return Object.assign(acc, singleSliceAction);
+  }, {});
+  return { ...baseAction, ...sliceAction };
+};
+const stateOf = (gql, state) => {
+  const applyState = Object.assign(createState(gql), state);
+  const applyAction = createActions(gql);
+  setStoreMeta(gql.refName, {
+    refName: gql.refName,
+    useKeys: Object.keys(applyState),
+    doKeys: Object.keys(applyAction),
+    slices: gql.slices
+  });
+  const applyStore = { ...applyState, ...applyAction };
+  class StateStore {
+    get;
+    set;
+    pick;
+  }
+  Object.keys(applyStore).forEach(
+    (key) => Object.defineProperty(StateStore.prototype, key, { value: applyStore[key] })
+  );
+  return StateStore;
+};
+const scalarStateOf = (refName, state) => {
+  const applyState = state;
+  setStoreMeta(refName, { refName, useKeys: Object.keys(applyState), doKeys: [], slices: [] });
+  class StateStore {
+    get;
+    set;
+    pick;
+  }
+  Object.keys(applyState).forEach(
+    (key) => Object.defineProperty(StateStore.prototype, key, { value: applyState[key] })
+  );
+  return StateStore;
+};
+const Store = (returnsOrObj) => {
+  const refName = typeof returnsOrObj === "object" ? returnsOrObj.name : lowerlize(getClassMeta(returnsOrObj()).refName);
+  const storeMeta = getStoreMeta(refName);
+  return function(target) {
+    const customDoKeys = Object.getOwnPropertyNames(target.prototype).filter((key) => key !== "constructor");
+    setStoreMeta(refName, { ...storeMeta, doKeys: [...storeMeta.doKeys, ...customDoKeys] });
+  };
+};
+const createSelectors = (_store, store = {}) => {
+  store.get = _store.getState;
+  store.set = (s) => {
+    if (typeof s === "function")
+      _store.setState((st2) => {
+        s(st2);
+      });
+    else
+      _store.setState(s);
+  };
+  store.sel = (selectFn, equals) => _store(selectFn, equals);
+  const state = store.get();
+  store.sub = _store.subscribe;
+  const useReference = (selectFn) => {
+    const ref = useRef(selectFn(store.get()));
+    useEffect(() => {
+      return store.sub(selectFn, (val) => ref.current = val);
+    }, []);
+    return ref;
+  };
+  store.ref = useReference;
+  const existingUse = store.use;
+  const existingDo = store.do;
+  const existingSlice = store.slice;
+  if (!existingUse)
+    Object.assign(store, { use: {} });
+  if (!existingDo)
+    Object.assign(store, { do: {} });
+  if (!existingSlice)
+    Object.assign(store, { slice: {} });
+  for (const k of Object.keys(state)) {
+    if (typeof state[k] !== "function") {
+      store.use[k] = () => store.sel((s) => s[k]);
+      const setKey = `set${capitalize(k)}`;
+      if (!state[setKey])
+        store.do[setKey] = (value) => {
+          store.set({ [k]: value });
+        };
+    } else {
+      store.do[k] = async (...args) => {
+        try {
+          Logger.verbose(`${k} action loading...`);
+          const start = Date.now();
+          await state[k](...args);
+          const end = Date.now();
+          Logger.verbose(`=> ${k} action dispatched (${end - start}ms)`);
+        } catch (e) {
+          const errKey = typeof e === "string" ? e : e.message;
+          msg.error(errKey, { key: k });
+          throw e;
+        }
+      };
+    }
+  }
+  const storeNames = getStoreNames();
+  for (const storeName of storeNames) {
+    const [fieldName, className] = [lowerlize(storeName), capitalize(storeName)];
+    const names = {
+      model: fieldName,
+      Model: className,
+      defaultModel: `default${className}`,
+      modelInsight: `${fieldName}Insight`,
+      modelList: `${fieldName}List`,
+      modelListLoading: `${fieldName}ListLoading`,
+      modelInitList: `${fieldName}InitList`,
+      modelInitAt: `${fieldName}InitAt`,
+      pageOfModel: `pageOf${className}`,
+      limitOfModel: `limitOf${className}`,
+      queryArgsOfModel: `queryArgsOf${className}`,
+      sortOfModel: `sortOf${className}`,
+      modelSelection: `${fieldName}Selection`,
+      initModel: `init${className}`,
+      refreshModel: `refresh${className}`,
+      selectModel: `select${className}`,
+      setPageOfModel: `setPageOf${className}`,
+      addPageOfModel: `addPageOf${className}`,
+      setLimitOfModel: `setLimitOf${className}`,
+      setQueryArgsOfModel: `setQueryArgsOf${className}`,
+      setSortOfModel: `setSortOf${className}`,
+      lastPageOfModel: `lastPageOf${className}`
+    };
+    const storeMeta = getStoreMeta(storeName);
+    storeMeta.slices.forEach(({ sliceName, argLength, refName }) => {
+      const SliceName = capitalize(sliceName);
+      const namesOfSliceState = {
+        defaultModel: SliceName.replace(names.Model, names.defaultModel),
+        modelInitList: SliceName.replace(names.Model, names.modelInitList),
+        modelInsight: sliceName.replace(names.model, names.modelInsight),
+        modelList: sliceName.replace(names.model, names.modelList),
+        modelListLoading: sliceName.replace(names.model, names.modelListLoading),
+        modelInitAt: SliceName.replace(names.Model, names.modelInitAt),
+        lastPageOfModel: SliceName.replace(names.Model, names.lastPageOfModel),
+        pageOfModel: SliceName.replace(names.Model, names.pageOfModel),
+        limitOfModel: SliceName.replace(names.Model, names.limitOfModel),
+        queryArgsOfModel: SliceName.replace(names.Model, names.queryArgsOfModel),
+        sortOfModel: SliceName.replace(names.Model, names.sortOfModel),
+        modelSelection: SliceName.replace(names.Model, names.modelSelection)
+      };
+      const namesOfSliceAction = {
+        initModel: SliceName.replace(names.Model, names.initModel),
+        refreshModel: SliceName.replace(names.Model, names.refreshModel),
+        selectModel: SliceName.replace(names.Model, names.selectModel),
+        setPageOfModel: SliceName.replace(names.Model, names.setPageOfModel),
+        addPageOfModel: SliceName.replace(names.Model, names.addPageOfModel),
+        setLimitOfModel: SliceName.replace(names.Model, names.setLimitOfModel),
+        setQueryArgsOfModel: SliceName.replace(names.Model, names.setQueryArgsOfModel),
+        setSortOfModel: SliceName.replace(names.Model, names.setSortOfModel)
+      };
+      store.slice[sliceName] = { do: {}, use: {} };
+      const targetSlice = store.slice[sliceName];
+      Object.keys(namesOfSliceAction).forEach((key) => {
+        targetSlice.do[names[key]] = store.do[namesOfSliceAction[key]];
+      });
+      Object.keys(namesOfSliceState).map((key) => {
+        targetSlice.use[names[key]] = store.use[namesOfSliceState[key]];
+        targetSlice.do[`set${capitalize(names[key])}`] = store.do[`set${capitalize(namesOfSliceState[key])}`];
+      });
+      targetSlice.sliceName = sliceName;
+      targetSlice.refName = refName;
+      targetSlice.argLength = argLength;
+    });
+  }
+  return store;
+};
+const makePicker = (set, get) => (...fields) => {
+  const state = get();
+  const ret = {};
+  for (const field of fields) {
+    const val = state[field];
+    if (!val)
+      throw new Error(`Field ${field} is not ready`);
+    if (typeof val === "string" && val.length === 0)
+      throw new Error(`Field is empty string (${field})`);
+    else if (["self", "me"].includes(field) && !state[field].id?.length)
+      throw new Error("Self or Me Id is not defined");
+    ret[field] = val;
+  }
+  return ret;
+};
+const makeStore = (st2, storeRef, { library } = {}) => {
+  if (library)
+    return st2;
+  const zustandStore = create(
+    devtools(
+      subscribeWithSelector(
+        immer((set, get) => {
+          const store = {};
+          const pick = makePicker(set, get);
+          Object.getOwnPropertyNames(storeRef.prototype).forEach((key) => {
+            const descriptor = Object.getOwnPropertyDescriptor(storeRef.prototype, key);
+            if (descriptor)
+              store[key] = descriptor.value;
+          });
+          Object.assign(store, { set, get, pick });
+          return store;
+        })
+      ),
+      { name: "root", anonymousActionType: "root", type: "root" }
+    )
+  );
+  return createSelectors(zustandStore, st2);
+};
+const MixStore = (s1, s2, s3, s4, s5, s6, s7, s8, s9, s10, s11, s12, s13, s14, s15, s16, s17, s18, s19, s20, s21, s22, s23, s24, s25, s26, s27, s28, s29, s30) => {
+  const stores = [
+    s1,
+    s2,
+    s3,
+    s4,
+    s5,
+    s6,
+    s7,
+    s8,
+    s9,
+    s10,
+    s11,
+    s12,
+    s13,
+    s14,
+    s15,
+    s16,
+    s17,
+    s18,
+    s19,
+    s20,
+    s21,
+    s22,
+    s23,
+    s24,
+    s25,
+    s26,
+    s27,
+    s28,
+    s29,
+    s30
+  ].filter((s) => !!s);
+  class Mix {
+  }
+  applyMixins(Mix, stores);
+  return Mix;
+};
+const rootStoreOf = (store) => {
+  return Object.getPrototypeOf(store);
+};
+const Toast = ({ root, duration = 3 } = {}) => {
+  return function(target, key, descriptor) {
+    const originMethod = descriptor.value;
+    descriptor.value = async function(...args) {
+      try {
+        msg.loading(`${root ? `${root}.` : ""}${key}-loading`, { key, duration });
+        const result = await originMethod.apply(this, args);
+        msg.success(`${root ? `${root}.` : ""}${key}-success`, { key, duration });
+        return result;
+      } catch (err) {
+        const errKey = typeof err === "string" ? err : err.message;
+        msg.error(errKey, { key, duration });
+        Logger.error(`${key} action error return: ${err}`);
+      }
+    };
+  };
+};
+export {
+  MixStore,
+  Store,
+  Toast,
+  createActions,
+  createState,
+  makeStore,
+  rootStoreOf,
+  scalarStateOf,
+  st,
+  stateOf
+};