wip checkpoint

app/web/src/nova/ed/ed-right.tsx

@@ -1,12 +1,12 @@
 import { useGlobal } from "web-utils";
+import { getActiveMeta } from "./logic/active/get-meta";
 import { EDGlobal, active } from "./logic/ed-global";
-import { getMetaById } from "./logic/tree/build";
 import { EdSidePropInstance } from "./panel/side/prop-instance";
 import { EdSideStyle } from "./panel/side/side-style";
 
 export const EdRight = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
-  const meta = getMetaById(p, active.item_id);
+  const meta = getActiveMeta(p);
 
   const isComponent =
     meta?.item.type === "item" &&

app/web/src/nova/ed/logic/active/activate-meta.tsx

@@ -0,0 +1,120 @@
+import { IMeta, PG, active } from "../ed-global";
+
+export const activateMeta = (p: PG, meta: IMeta) => {
+  if (meta.parent?.comp_id) {
+    if (active.comp_id) {
+      if (active.comp_id === meta.parent?.comp_id) {
+        if (meta.item.originalId) {
+          if (
+            meta.item.component?.id &&
+            meta.parent.comp_id === active.comp_id
+          ) {
+            const cmeta = p.comp.list[active.comp_id].meta;
+            for (const val of Object.values(cmeta)) {
+              if (
+                val.item.originalId &&
+                val.item.originalId === meta.item.originalId
+              ) {
+                if (active.item_id !== val.item.id) {
+                  active.item_id = val.item.id;
+                } else {
+                  active.instance.comp_id = active.comp_id;
+                  active.instance.item_id = active.item_id;
+                  active.comp_id = meta.item.component.id;
+                  active.item_id = val.item.originalId;
+                }
+              }
+            }
+          } else if (meta.item.originalId !== active.item_id) {
+            active.item_id = meta.item.originalId;
+          }
+        }
+      } else {
+        if (
+          meta.item.component?.id === active.comp_id &&
+          meta.item.originalId
+        ) {
+          active.item_id = meta.item.originalId;
+        } else if (meta.parent.instance_id) {
+          const pmeta = p.page.meta[meta.parent.instance_id];
+
+          if (pmeta.parent?.comp_id === active.comp_id) {
+            const cmeta = p.comp.list[active.comp_id].meta;
+
+            for (const val of Object.values(cmeta)) {
+              if (
+                val.item.originalId &&
+                val.item.originalId === pmeta.item.originalId
+              ) {
+                if (active.item_id !== val.item.id) {
+                  active.item_id = val.item.id;
+                } else if (pmeta.item.component) {
+                  active.instance.comp_id = active.comp_id;
+                  active.instance.item_id = active.item_id;
+                  active.comp_id = pmeta.item.component?.id;
+                  active.item_id = val.item.originalId;
+                }
+              }
+            }
+          } else {
+            active.comp_id = meta.parent.comp_id;
+            active.item_id = meta.parent.id;
+          }
+        }
+      }
+    } else {
+      if (meta.parent.instance_id) {
+        let parent = meta.parent;
+
+        if (
+          parent.comp_id &&
+          parent.instance_id &&
+          p.page.meta[parent.instance_id] &&
+          !p.page.meta[parent.instance_id].mitem
+        ) {
+          while (parent.comp_id && parent.instance_id) {
+            const par = p.page.meta[parent.instance_id];
+            if (par) {
+              if (par.mitem) {
+                if (active.item_id !== par.item.id) {
+                  active.item_id = par.item.id;
+                } else {
+                  active.instance.comp_id = active.comp_id;
+                  active.instance.item_id = active.item_id;
+                  active.comp_id = parent.comp_id;
+                  const root_id = p.comp.list[parent.comp_id]?.tree.find(
+                    (e) => e.parent === "root"
+                  )?.id as string;
+                  if (root_id) {
+                    active.item_id = root_id;
+                  }
+                }
+                break;
+              }
+              parent = par.parent as any;
+            } else break;
+          }
+        } else {
+          if (active.item_id !== meta.parent.instance_id) {
+            active.item_id = meta.parent.instance_id;
+          } else if (parent.comp_id && meta.item.originalId) {
+            active.instance.comp_id = active.comp_id;
+            active.instance.item_id = active.item_id;
+            active.comp_id = parent.comp_id;
+            active.item_id = meta.item.originalId;
+          }
+        }
+      }
+    }
+  } else {
+    if (active.comp_id) {
+      if (!meta.parent?.comp_id) {
+        active.comp_id = "";
+      } else if (meta.item.originalId) {
+        active.item_id = meta.item.originalId;
+      }
+    } else {
+      active.item_id = meta.item.id;
+    }
+  }
+};

app/web/src/nova/ed/logic/active/get-meta.tsx

@@ -0,0 +1,22 @@
+import { PG, active } from "../ed-global";
+
+export const getMetaById = (p: PG, id: string) => {
+  if (active.comp_id) {
+    if (p.comp.list[active.comp_id] && p.comp.list[active.comp_id].meta) {
+      const meta = p.comp.list[active.comp_id].meta[id];
+      if (meta) {
+        return meta;
+      } else if (p.comp.list[active.comp_id].meta) {
+        for (const v of Object.values(p.comp.list[active.comp_id].meta)) {
+          if (v.item.id === id) return v;
+        }
+      }
+    }
+  } else {
+    return p.page.meta[id];
+  }
+};
+
+export const getActiveMeta = (p: PG) => {
+  return getMetaById(p, active.item_id);
+};

app/web/src/nova/ed/logic/active/is-meta.active.tsx

@@ -0,0 +1,21 @@
+import { getCompMeta } from "../comp/comp-meta";
+import { IMeta, PG, active } from "../ed-global";
+
+export const isMetaActive = (p: PG, meta: IMeta) => {
+  let is_active: boolean = active.item_id === meta.item.id;
+  if (active.comp_id) {
+    if (meta.parent?.comp_id === active.comp_id) {
+      const active_meta = getCompMeta(p, active.item_id, "is_active");
+      if (active_meta) {
+        if (active_meta.item.originalId === meta.item.originalId) {
+          is_active = true;
+        } else if (active_meta.item.id === meta.item.originalId) {
+          is_active = true;
+        }
+      }
+    } else {
+      is_active = active.item_id === meta.item.originalId;
+    }
+  }
+  return is_active;
+};

app/web/src/nova/ed/logic/tree/build.tsx

@@ -102,19 +102,3 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
   }
 };
 
-export const getMetaById = (p: PG, id: string) => {
-  if (active.comp_id) {
-    if (p.comp.list[active.comp_id] && p.comp.list[active.comp_id].meta) {
-      const meta = p.comp.list[active.comp_id].meta[id];
-      if (meta) {
-        return meta;
-      } else if (p.comp.list[active.comp_id].meta) {
-        for (const v of Object.values(p.comp.list[active.comp_id].meta)) {
-          if (v.item.id === id) return v;
-        }
-      }
-    }
-  } else {
-    return p.page.meta[id];
-  }
-};

app/web/src/nova/ed/panel/header/mid/add-item.tsx

@@ -2,8 +2,8 @@ import { createId } from "@paralleldrive/cuid2";
 import { useGlobal, waitUntil } from "web-utils";
 import { IContent, MContent } from "../../../../../utils/types/general";
 import { IItem } from "../../../../../utils/types/item";
+import { getActiveMeta, getMetaById } from "../../../logic/active/get-meta";
 import { EDGlobal, active } from "../../../logic/ed-global";
-import { getMetaById } from "../../../logic/tree/build";
 import { fillID } from "../../../logic/tree/fill-id";
 import { TopBtn } from "../top-btn";
 import { prepSection } from "./prep-section";
@@ -15,12 +15,14 @@ export const EdAddItem = () => {
     <TopBtn
       style="slim"
       onClick={async () => {
-        let meta = getMetaById(p, active.item_id);
+        let meta = getActiveMeta(p);
 
         if (!meta) {
           prepSection(p);
-          await waitUntil(() => getMetaById(p, active.item_id));
+          await waitUntil(() => {
-          meta = getMetaById(p, active.item_id);
+            meta = getActiveMeta(p);
+            return !!meta;
+          });
         }
         if (!meta) return null;
 

app/web/src/nova/ed/panel/header/mid/add-text.tsx

@@ -1,13 +1,13 @@
-import { useGlobal, waitUntil } from "web-utils";
-import { TopBtn } from "../top-btn";
-import { EDGlobal, active } from "../../../logic/ed-global";
-import { getMetaById } from "../../../logic/tree/build";
 import { createId } from "@paralleldrive/cuid2";
-import { IText } from "../../../../../utils/types/text";
+import { useGlobal, waitUntil } from "web-utils";
 import { IContent, MContent } from "../../../../../utils/types/general";
-import { fillID } from "../../../logic/tree/fill-id";
-import { prepSection } from "./prep-section";
 import { IItem } from "../../../../../utils/types/item";
+import { IText } from "../../../../../utils/types/text";
+import { getActiveMeta, getMetaById } from "../../../logic/active/get-meta";
+import { EDGlobal, active } from "../../../logic/ed-global";
+import { fillID } from "../../../logic/tree/fill-id";
+import { TopBtn } from "../top-btn";
+import { prepSection } from "./prep-section";
 
 export const EdAddText = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
@@ -16,12 +16,14 @@ export const EdAddText = () => {
     <TopBtn
       style="slim"
       onClick={async () => {
-        let meta = getMetaById(p, active.item_id);
+        let meta = getActiveMeta(p);
 
         if (!meta) {
           prepSection(p);
-          await waitUntil(() => getMetaById(p, active.item_id));
+          await waitUntil(() => {
-          meta = getMetaById(p, active.item_id);
+            meta = getActiveMeta(p);
+            return !!meta;
+          });
         }
         if (!meta) return null;
 

app/web/src/nova/ed/panel/header/mid/comp-picker.tsx

@@ -4,11 +4,11 @@ import { IContent, MContent } from "../../../../../utils/types/general";
 import { IItem, MItem } from "../../../../../utils/types/item";
 import { MRoot } from "../../../../../utils/types/root";
 import { ISection, MSection } from "../../../../../utils/types/section";
+import { getActiveMeta, getMetaById } from "../../../logic/active/get-meta";
+import { loadComponent } from "../../../logic/comp/load";
 import { EDGlobal, active } from "../../../logic/ed-global";
-import { getMetaById } from "../../../logic/tree/build";
 import { fillID } from "../../../logic/tree/fill-id";
 import { TopBtn } from "../top-btn";
-import { loadComponent } from "../../../logic/comp/load";
 
 export const EdCompPicker = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
@@ -38,7 +38,7 @@ export const EdCompPicker = () => {
             return;
           }
 
-          let active_meta = getMetaById(p, active.item_id);
+          let active_meta = getActiveMeta(p);
           if (!active_meta) {
             alert("Please select an item/section to add component!");
           } else {

app/web/src/nova/ed/panel/main/main-per-item.tsx

@@ -1,6 +1,7 @@
 import { IContent } from "../../../../utils/types/general";
 import { VG } from "../../../vi/render/global";
-import { getCompMeta } from "../../logic/comp/comp-meta";
+import { activateMeta } from "../../logic/active/activate-meta";
+import { isMetaActive } from "../../logic/active/is-meta.active";
 import { PG, active } from "../../logic/ed-global";
 import { treeRebuild } from "../../logic/tree/build";
 
@@ -57,21 +58,7 @@ export const mainPerItemVisit = (
     };
   }
 
-  let is_active: boolean = active.item_id === meta.item.id;
+  let is_active = isMetaActive(p, meta);
-  if (active.comp_id) {
-    if (meta.parent?.comp_id === active.comp_id) {
-      const active_meta = getCompMeta(p, active.item_id, "is_active");
-      if (active_meta) {
-        if (active_meta.item.originalId === meta.item.originalId) {
-          is_active = true;
-        } else if (active_meta.item.id === meta.item.originalId) {
-          is_active = true;
-        }
-      }
-    } else {
-      is_active = active.item_id === meta.item.originalId;
-    }
-  }
 
   let is_component = false;
   if (
@@ -133,122 +120,7 @@ export const mainPerItemVisit = (
       return;
     }
 
-    if (meta.parent?.comp_id) {
+    activateMeta(p, meta);
-      if (active.comp_id) {
-        if (active.comp_id === meta.parent?.comp_id) {
-          if (meta.item.originalId) {
-            if (
-              meta.item.component?.id &&
-              meta.parent.comp_id === active.comp_id
-            ) {
-              const cmeta = p.comp.list[active.comp_id].meta;
-              for (const val of Object.values(cmeta)) {
-                if (
-                  val.item.originalId &&
-                  val.item.originalId === meta.item.originalId
-                ) {
-                  if (active.item_id !== val.item.id) {
-                    active.item_id = val.item.id;
-                  } else {
-                    active.instance.comp_id = active.comp_id;
-                    active.instance.item_id = active.item_id;
-                    active.comp_id = meta.item.component.id;
-                    active.item_id = val.item.originalId;
-                  }
-                }
-              }
-            } else if (meta.item.originalId !== active.item_id) {
-              active.item_id = meta.item.originalId;
-            }
-          }
-        } else {
-          if (
-            meta.item.component?.id === active.comp_id &&
-            meta.item.originalId
-          ) {
-            active.item_id = meta.item.originalId;
-          } else if (meta.parent.instance_id) {
-            const pmeta = p.page.meta[meta.parent.instance_id];
-
-            if (pmeta.parent?.comp_id === active.comp_id) {
-              const cmeta = p.comp.list[active.comp_id].meta;
-
-              for (const val of Object.values(cmeta)) {
-                if (
-                  val.item.originalId &&
-                  val.item.originalId === pmeta.item.originalId
-                ) {
-                  if (active.item_id !== val.item.id) {
-                    active.item_id = val.item.id;
-                  } else if (pmeta.item.component) {
-                    active.instance.comp_id = active.comp_id;
-                    active.instance.item_id = active.item_id;
-                    active.comp_id = pmeta.item.component?.id;
-                    active.item_id = val.item.originalId;
-                  }
-                }
-              }
-            } else {
-              active.comp_id = meta.parent.comp_id;
-              active.item_id = meta.parent.id;
-            }
-          }
-        }
-      } else {
-        if (meta.parent.instance_id) {
-          let parent = meta.parent;
-
-          if (
-            parent.comp_id &&
-            parent.instance_id &&
-            p.page.meta[parent.instance_id] &&
-            !p.page.meta[parent.instance_id].mitem
-          ) {
-            while (parent.comp_id && parent.instance_id) {
-              const par = p.page.meta[parent.instance_id];
-              if (par) {
-                if (par.mitem) {
-                  if (active.item_id !== par.item.id) {
-                    active.item_id = par.item.id;
-                  } else {
-                    active.instance.comp_id = active.comp_id;
-                    active.instance.item_id = active.item_id;
-                    active.comp_id = parent.comp_id;
-                    const root_id = p.comp.list[parent.comp_id]?.tree.find(
-                      (e) => e.parent === "root"
-                    )?.id as string;
-                    if (root_id) {
-                      active.item_id = root_id;
-                    }
-                  }
-                  break;
-                }
-                parent = par.parent as any;
-              } else break;
-            }
-          } else {
-            if (active.item_id !== meta.parent.instance_id) {
-              active.item_id = meta.parent.instance_id;
-            } else if (parent.comp_id && meta.item.originalId) {
-              active.instance.comp_id = active.comp_id;
-              active.instance.item_id = active.item_id;
-              active.comp_id = parent.comp_id;
-              active.item_id = meta.item.originalId;
-            }
-          }
-        }
-      }
-    } else {
-      if (active.comp_id) {
-        if (!meta.parent?.comp_id) {
-          active.comp_id = "";
-        } else if (meta.item.originalId) {
-          active.item_id = meta.item.originalId;
-        }
-      } else {
-        active.item_id = meta.item.id;
-      }
-    }
     active.hover.id = "";
     p.render();
   };

app/web/src/nova/ed/panel/popup/script/monaco.tsx

@@ -7,10 +7,10 @@ import { useGlobal, useLocal } from "web-utils";
 import { jscript } from "../../../../../utils/script/jscript";
 import { jsMount } from "../../../../../utils/script/mount";
 import { monacoTypings } from "../../../../../utils/script/typings";
+import { getActiveMeta } from "../../../logic/active/get-meta";
 import { EDGlobal, IMeta, active } from "../../../logic/ed-global";
-import { getMetaById } from "../../../logic/tree/build";
-import { declareScope } from "./scope";
 import { edMonacoDefaultVal } from "./default-val";
+import { declareScope } from "./scope";
 
 const scriptEdit = {
   timeout: null as any,
@@ -189,7 +189,7 @@ export const EdScriptMonaco: FC<{}> = () => {
         local.render();
         clearTimeout(scriptEdit.timeout);
         scriptEdit.timeout = setTimeout(() => {
-          const meta = getMetaById(p, active.item_id);
+          const meta = getActiveMeta(p);
           const type = p.ui.popup.script.mode;
           if (meta && meta.mitem) {
             let arg = {} as any;

app/web/src/nova/ed/panel/tree/node/item/action/clone.tsx

@@ -1,9 +1,10 @@
 import { syncronize } from "y-pojo";
+import { fillID } from "../../../../../../../render/editor/tools/fill-id";
 import { IContent, MContent } from "../../../../../../../utils/types/general";
 import { IItem } from "../../../../../../../utils/types/item";
-import { fillID } from "../../../../../../../render/editor/tools/fill-id";
+import { getMetaById } from "../../../../../logic/active/get-meta";
 import { PG } from "../../../../../logic/ed-global";
-import { getMetaById, treeRebuild } from "../../../../../logic/tree/build";
+import { treeRebuild } from "../../../../../logic/tree/build";
 
 export const edActionClone = (p: PG, item: IContent) => {
   const mitem = getMetaById(p, item.id)?.mitem;

app/web/src/nova/ed/panel/tree/node/item/action/cut.tsx

@@ -1,6 +1,7 @@
 import { IContent } from "../../../../../../../utils/types/general";
+import { getMetaById } from "../../../../../logic/active/get-meta";
 import { PG } from "../../../../../logic/ed-global";
-import { getMetaById, treeRebuild } from "../../../../../logic/tree/build";
+import { treeRebuild } from "../../../../../logic/tree/build";
 
 export const edActionCut = async (p: PG, item: IContent) => {
   const perm = await navigator.permissions.query({

app/web/src/nova/ed/panel/tree/node/item/action/detach.tsx

@@ -1,8 +1,9 @@
 import { syncronize } from "y-pojo";
-import { IItem } from "../../../../../../../utils/types/item";
-import { PG } from "../../../../../logic/ed-global";
-import { getMetaById, treeRebuild } from "../../../../../logic/tree/build";
 import { fillID } from "../../../../../../../render/editor/tools/fill-id";
+import { IItem } from "../../../../../../../utils/types/item";
+import { getMetaById } from "../../../../../logic/active/get-meta";
+import { PG } from "../../../../../logic/ed-global";
+import { treeRebuild } from "../../../../../logic/tree/build";
 
 export const edActionDetach = (p: PG, item: IItem) => {
   const mitem = getMetaById(p, item.id)?.mitem;

app/web/src/nova/ed/panel/tree/node/item/action/new-comp.tsx

@@ -1,6 +1,7 @@
 import { IItem } from "../../../../../../../utils/types/item";
+import { getMetaById } from "../../../../../logic/active/get-meta";
 import { PG, active } from "../../../../../logic/ed-global";
-import { getMetaById, treeRebuild } from "../../../../../logic/tree/build";
+import { treeRebuild } from "../../../../../logic/tree/build";
 
 export const edActionNewComp = (
   p: PG,

app/web/src/nova/ed/panel/tree/node/item/action/paste.tsx

@@ -2,8 +2,9 @@ import { syncronize } from "y-pojo";
 import { fillID } from "../../../../../../../render/editor/tools/fill-id";
 import { IContent } from "../../../../../../../utils/types/general";
 import { MItem } from "../../../../../../../utils/types/item";
+import { getMetaById } from "../../../../../logic/active/get-meta";
 import { PG, active } from "../../../../../logic/ed-global";
-import { getMetaById, treeRebuild } from "../../../../../logic/tree/build";
+import { treeRebuild } from "../../../../../logic/tree/build";
 
 export const edActionPaste = async (p: PG, item: IContent) => {
   const mitem = getMetaById(p, item.id)?.mitem;

app/web/src/nova/ed/panel/tree/node/item/action/unwrap.tsx

@@ -1,8 +1,9 @@
 import { syncronize } from "y-pojo";
 import { IContent, MContent } from "../../../../../../../utils/types/general";
 import { IItem } from "../../../../../../../utils/types/item";
+import { getMetaById } from "../../../../../logic/active/get-meta";
 import { PG } from "../../../../../logic/ed-global";
-import { getMetaById, treeRebuild } from "../../../../../logic/tree/build";
+import { treeRebuild } from "../../../../../logic/tree/build";
 
 export const edActionUnwrap = (p: PG, item: IItem) => {
   const mitem = getMetaById(p, item.id)?.mitem;

app/web/src/nova/ed/panel/tree/node/item/action/wrap.tsx

@@ -1,10 +1,11 @@
 import { createId } from "@paralleldrive/cuid2";
+import { syncronize } from "y-pojo";
 import { IContent, MContent } from "../../../../../../../utils/types/general";
 import { IItem } from "../../../../../../../utils/types/item";
 import { IText } from "../../../../../../../utils/types/text";
+import { getMetaById } from "../../../../../logic/active/get-meta";
 import { PG } from "../../../../../logic/ed-global";
-import { syncronize } from "y-pojo";
+import { treeRebuild } from "../../../../../logic/tree/build";
-import { getMetaById, treeRebuild } from "../../../../../logic/tree/build";
 
 export const edActionWrap = (p: PG, item: IText | IItem) => {
   const mitem = getMetaById(p, item.id)?.mitem;

app/web/src/nova/ed/panel/tree/node/item/indent-hook.ts

@@ -1,8 +1,8 @@
 import { TreeMethods } from "@minoru/react-dnd-treeview";
 import { useEffect } from "react";
-import { IMeta, PG, active } from "../../../../logic/ed-global";
-import { getMetaById } from "../../../../logic/tree/build";
 import { IContent } from "../../../../../../utils/types/general";
+import { getMetaById } from "../../../../logic/active/get-meta";
+import { IMeta, PG, active } from "../../../../logic/ed-global";
 
 export const expandTreeHook = (
   p: PG,

app/web/src/nova/ed/panel/tree/node/key-map.tsx

@@ -3,7 +3,7 @@ import { KeyboardEvent } from "react";
 import { IContent } from "../../../../../utils/types/general";
 import { PG, active } from "../../../logic/ed-global";
 import { edActionDelete } from "./item/action/del";
-import { getMetaById } from "../../../logic/tree/build";
+import { getMetaById } from "../../../logic/active/get-meta";
 
 export const treeItemKeyMap = (p: PG, prm: RenderParams, item: IContent) => {
   return (e: KeyboardEvent) => {

app/web/src/nova/ed/panel/tree/node/on-drop.tsx

@@ -1,8 +1,8 @@
 import { DropOptions, NodeModel } from "@minoru/react-dnd-treeview";
 import get from "lodash.get";
 import { IContent, MContent } from "../../../../../utils/types/general";
+import { getMetaById } from "../../../logic/active/get-meta";
 import { IMeta, PG, active } from "../../../logic/ed-global";
-import { getMetaById } from "../../../logic/tree/build";
 import { fillID } from "../../../logic/tree/fill-id";
 
 export const nodeOnDrop: (

app/web/src/nova/ed/panel/tree/node/render.tsx

@@ -1,15 +1,14 @@
 import { NodeRender } from "@minoru/react-dnd-treeview";
 import { useGlobal, useLocal } from "web-utils";
+import { IContent } from "../../../../../utils/types/general";
 import { Loading } from "../../../../../utils/ui/loading";
+import { getMetaById } from "../../../logic/active/get-meta";
 import { EDGlobal, IMeta, active } from "../../../logic/ed-global";
-import { getMetaById } from "../../../logic/tree/build";
 import { EdTreeAction } from "./item/action";
 import { EdTreeCtxMenu } from "./item/ctx-menu";
 import { EdTreeIndent } from "./item/indent";
 import { EdTreeName } from "./item/name";
 import { treeItemKeyMap } from "./key-map";
-import { IContent } from "../../../../../utils/types/general";
-import { getCompMeta } from "../../../logic/comp/comp-meta";
 
 export const nodeRender: NodeRender<IMeta> = (node, prm) => {
   const p = useGlobal(EDGlobal, "EDITOR");