diff --git a/app/web/src/nova/ed/logic/ed-global.ts b/app/web/src/nova/ed/logic/ed-global.ts
index 1c09e22c..fdcdebfc 100644
--- a/app/web/src/nova/ed/logic/ed-global.ts
+++ b/app/web/src/nova/ed/logic/ed-global.ts
@@ -58,7 +58,8 @@ export type EdMeta = {
     id: string;
     mitem?: MItem;
   };
-  parent_comp?: {
+  parent_comp?: { id: string; comp_id: string };
+  parent_mcomp?: {
     mitem: MItem;
     mcomp: MItem;
   };
diff --git a/app/web/src/nova/ed/logic/tree/build.tsx b/app/web/src/nova/ed/logic/tree/build.tsx
index 58d6a23a..77f7be5e 100644
--- a/app/web/src/nova/ed/logic/tree/build.tsx
+++ b/app/web/src/nova/ed/logic/tree/build.tsx
@@ -1,18 +1,6 @@
-import { createId } from "@paralleldrive/cuid2";
-import { decompress } from "wasm-gzip";
-import { syncronize } from "y-pojo";
-import { TypedArray, TypedMap } from "yjs-types";
-import { MContent } from "../../../../utils/types/general";
-import { IItem, MItem } from "../../../../utils/types/item";
-import {
-  FMCompDef,
-  FMComponent,
-  FNCompDef,
-  FNComponent,
-} from "../../../../utils/types/meta-fn";
-import { DComp } from "../../../../utils/types/root";
-import { MSection } from "../../../../utils/types/section";
 import { EdMeta, PG } from "../ed-global";
+import { walkLoad, walkMap } from "./load-walk";
+import { loadComponent, syncWalkLoad, syncWalkMap } from "./sync-walk";
 
 export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
   const doc = p.page.doc;
@@ -28,24 +16,57 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
       const loaded = new Set<string>();
       await Promise.all(
         sections.map((e) => {
-          return walkLoad(p, e, loaded);
+          return syncWalkLoad(p, e, loaded);
         })
       );
     }
+
+    const portal = {
+      in: {} as Record<string, EdMeta>,
+      out: {} as Record<string, EdMeta>,
+    };
+
+    let root_id = "root";
+    if (p.site.layout) {
+      const loaded = new Set<string>();
+      await Promise.all(
+        p.site.layout.childs.map((e) =>
+          walkLoad(p.comp, e, loaded, (id) => loadComponent(p, id))
+        )
+      );
+      p.site.layout.childs.map((e) =>
+        walkMap(
+          { meta: p.page.meta, comps: p.comp.map },
+          {
+            isLayout: true,
+            item: e,
+            parent_item: { id: "root" },
+            portal,
+            each(meta) {
+              if (meta.item.name === "content") {
+                root_id = meta.item.id;
+              }
+            },
+          }
+        )
+      );
+    }
+
     doc.transact(async () => {
       p.page.entry = [];
       p.page.tree = [];
       p.page.meta = {};
 
-      const portal = {
-        in: {} as Record<string, EdMeta>,
-        out: {} as Record<string, EdMeta>,
-      };
       const sections = root.get("childs");
       if (sections) {
         sections.map((e) => {
           p.page.entry.push(e.get("id"));
-          walkMap(p, { mitem: e, parent_item: { id: "root" }, portal });
+          syncWalkMap(p, {
+            isLayout: false,
+            mitem: e,
+            parent_item: { id: root_id },
+            portal,
+          });
         });
 
         for (const [k, portal_out] of Object.entries(portal.out)) {
@@ -68,309 +89,3 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
     p.page.render();
   }
 };
-
-const mapItem = (mitem: MContent, item: any) => {
-  mitem.forEach((e, k) => {
-    if (k !== "childs") {
-      let val = e;
-      if (typeof e === "object" && e) {
-        if ((e as any).toJSON) {
-          val = e.toJSON() as any;
-        }
-      }
-      item[k] = val;
-    } else {
-      if (!item[k]) item[k] = [];
-      const childs = e as unknown as TypedArray<{}>;
-      childs.forEach((c) => {
-        item[k].push({ id: c.get("id") });
-      });
-    }
-  });
-};
-
-const walkLoad = async (p: PG, mitem: MItem, loaded: Set<string>) => {
-  const mcomp = mitem.get("component");
-  if (mcomp) {
-    const id = mcomp.get("id");
-    const comp = mcomp.toJSON() as FNComponent;
-    if (id) {
-      loaded.add(id);
-      if (!p.comp.list[id]) {
-        await loadComponent(p, comp.id);
-      }
-
-      const pcomp = p.comp.list[id];
-      if (pcomp) {
-        const pitem = pcomp.doc.getMap("map").get("root");
-        if (pitem && !loaded.has(id)) {
-          await walkLoad(p, pitem, loaded);
-        }
-      }
-    }
-
-    for (const [propName, prop] of Object.entries(comp.props || {})) {
-      if (prop.meta?.type === "content-element") {
-        const mprop = mcomp.get("props")?.get(propName);
-        if (mprop) {
-          const mcontent = ensurePropContent(mprop, propName);
-          if (mcontent) {
-            await walkLoad(p, mcontent, loaded);
-          }
-        }
-      }
-    }
-  }
-
-  for (const e of mitem.get("childs")?.map((e) => e) || []) {
-    await walkLoad(p, e, loaded);
-  }
-};
-
-const walkMap = (
-  p: PG,
-  arg: {
-    mitem: MItem | MSection;
-    portal: {
-      in: Record<string, EdMeta>;
-      out: Record<string, EdMeta>;
-    };
-    parent_item: EdMeta["parent_item"];
-    parent_comp?: EdMeta["parent_comp"];
-    skip_add_tree?: boolean;
-  }
-) => {
-  const { mitem, parent_item, parent_comp } = arg;
-
-  const item = {} as unknown as IItem;
-  let override_id = "";
-  const id = mitem.get("id");
-
-  let skip_tree = arg.skip_add_tree;
-  let skip_tree_child = skip_tree;
-  if (id && p.ui.tree.item_loading.includes(id)) {
-    skip_tree_child = true;
-  }
-
-  if (parent_comp && id) {
-    const fcomp = parent_comp.mitem.get("component");
-    if (fcomp) {
-      const ref_ids = fcomp.get("ref_ids");
-
-      if (ref_ids) {
-        let ref_id = ref_ids.get(id);
-
-        if (!ref_id) {
-          ref_id = createId();
-          ref_ids.set(id, ref_id);
-        }
-        override_id = ref_id;
-      }
-    }
-  }
-
-  mapItem(mitem, item);
-
-  if (override_id) {
-    item.id = override_id;
-  }
-
-  const item_comp = item.component;
-  const mitem_comp = mitem.get("component");
-  const metaNotFound = () => {
-    if (!skip_tree) {
-      p.page.tree.push({
-        id: item.id,
-        parent: parent_item.id,
-        text: item.name,
-      });
-    }
-  };
-
-  if (item_comp && item_comp.id && parent_item.id !== "root") {
-    if (!p.comp.list[item_comp.id]) {
-      return;
-    }
-
-    const ref_comp = p.comp.list[item_comp.id];
-
-    if (ref_comp && mitem_comp) {
-      const mcomp = ref_comp.doc.getMap("map").get("root");
-
-      if (mcomp) {
-        let ref_ids: Record<string, string> = item_comp.ref_ids;
-        if (!ref_ids) {
-          mitem_comp.set("ref_ids", new Y.Map() as any);
-          ref_ids = {};
-        }
-        const original_id = item.id;
-        mapItem(mcomp, item);
-        item.id = original_id;
-
-        const meta: EdMeta = {
-          item,
-          mitem: mitem as MItem,
-          parent_item,
-          parent_comp,
-          indexedScope: {},
-        };
-        p.page.meta[item.id] = meta;
-
-        if (!skip_tree) {
-          p.page.tree.push({
-            id: item.id,
-            parent: parent_item.id,
-            text: item.name,
-            data: meta,
-          });
-        }
-
-        const mprops = mcomp.get("component")?.get("props")?.toJSON() as Record<
-          string,
-          FNCompDef
-        >;
-
-        if (mprops) {
-          const mitem_comp = mitem.get("component");
-          if (mitem_comp) {
-            const mitem_props = ensureMItemProps(mitem_comp, item_comp);
-            if (mitem_props) {
-              for (const [k, v] of Object.entries(mprops)) {
-                const mprop = ensureMProp(mitem_props, k, v);
-                item_comp.props[k] = v;
-                if (mprop && v.meta?.type === "content-element") {
-                  const mcontent = ensurePropContent(mprop, k);
-                  if (mcontent) {
-                    walkMap(p, {
-                      mitem: mcontent,
-                      parent_item: { id: item.id, mitem: mitem as MItem },
-                      parent_comp: { mitem: mitem as MItem, mcomp },
-                      portal: arg.portal,
-                      skip_add_tree: skip_tree_child,
-                    });
-                  }
-                }
-              }
-            }
-          }
-        }
-
-        const childs = mcomp.get("childs")?.map((e) => e) || [];
-        for (const e of childs) {
-          walkMap(p, {
-            mitem: e,
-            parent_item: { id: item.id, mitem: mitem as MItem },
-            parent_comp: { mitem: mitem as MItem, mcomp },
-            skip_add_tree: true,
-            portal: arg.portal,
-          });
-        }
-        return;
-      }
-    }
-
-    metaNotFound();
-    return;
-  }
-
-  const meta: EdMeta = {
-    item,
-    mitem: mitem as MItem,
-    parent_item,
-    parent_comp,
-    indexedScope: {},
-  };
-
-  if (item.name.startsWith("⬅")) {
-    arg.portal.in[item.name] = meta;
-  }
-  if (item.name.startsWith("⮕")) {
-    arg.portal.out[item.name] = meta;
-  }
-
-  p.page.meta[item.id] = meta;
-
-  if (!skip_tree) {
-    p.page.tree.push({
-      id: item.id,
-      parent: parent_item.id,
-      text: item.name,
-      data: meta,
-    });
-  }
-
-  const childs = mitem.get("childs")?.map((e) => e) || [];
-  for (const e of childs) {
-    walkMap(p, {
-      mitem: e,
-      parent_item: { id: item.id, mitem: mitem as MItem },
-      parent_comp: arg.parent_comp,
-      portal: arg.portal,
-      skip_add_tree: skip_tree_child,
-    });
-  }
-};
-
-export const loadComponent = async (p: PG, id_comp: string) => {
-  const cur = await p.sync.comp.load(id_comp);
-  if (cur && cur.snapshot) {
-    const doc = new Y.Doc() as DComp;
-    if (cur.snapshot) {
-      Y.applyUpdate(doc as any, decompress(cur.snapshot));
-      p.comp.map[id_comp] = {
-        id: id_comp,
-        item: doc.getMap("map").get("root")?.toJSON() as IItem,
-      };
-      p.comp.list[id_comp] = { comp: cur, doc };
-      return true;
-    }
-  }
-  return false;
-};
-
-const ensurePropContent = (mprop: FMCompDef, k: string) => {
-  let mcontent = mprop.get("content");
-  if (!mcontent) {
-    const newcontent = new Y.Map();
-    syncronize(newcontent, {
-      id: createId(),
-      name: k,
-      type: "item",
-      dim: { w: "full", h: "full" },
-      childs: [],
-      adv: {
-        css: "",
-      },
-    });
-    mprop.set("content", newcontent as MItem);
-    mcontent = mprop.get("content");
-  }
-  return mcontent;
-};
-
-const ensureMProp = (
-  mitem_props: TypedMap<Record<string, FMCompDef>>,
-  k: string,
-  v: FNCompDef
-) => {
-  let mprop = mitem_props.get(k);
-  if (!mprop) {
-    const newprop = new Y.Map();
-    syncronize(newprop, v);
-    mitem_props.set(k, newprop as FMCompDef);
-    mprop = mitem_props.get(k);
-  }
-  return mprop;
-};
-
-const ensureMItemProps = (mitem_comp: FMComponent, item_comp: FNComponent) => {
-  let mitem_props = mitem_comp.get("props");
-  if (!mitem_props) {
-    mitem_comp.set("props", new Y.Map() as any);
-    mitem_props = mitem_comp.get("props");
-  }
-  if (!item_comp.props) {
-    item_comp.props = {};
-  }
-  return mitem_props;
-};
diff --git a/app/web/src/nova/ed/logic/tree/load-walk.tsx b/app/web/src/nova/ed/logic/tree/load-walk.tsx
new file mode 100644
index 00000000..e5b81ec5
--- /dev/null
+++ b/app/web/src/nova/ed/logic/tree/load-walk.tsx
@@ -0,0 +1,193 @@
+import { createId } from "@paralleldrive/cuid2";
+import { IContent } from "../../../../utils/types/general";
+import { IItem } from "../../../../utils/types/item";
+import { FNComponent } from "../../../../utils/types/meta-fn";
+import { EdMeta, PG } from "../ed-global";
+
+export const walkLoad = async (
+  p: { map: PG["comp"]["map"] },
+  item: IContent,
+  loaded: Set<string>,
+  loadComponent: (id: string) => Promise<boolean>
+) => {
+  if (item.type === "item" && item.component?.id) {
+    const id = item.component?.id;
+    const comp = item.component as FNComponent;
+
+    if (id && comp) {
+      const isFirstLoaded = !loaded.has(id);
+      loaded.add(id);
+      if (!p.map[id]) {
+        await loadComponent(comp.id);
+      }
+      if (p.map[id] && isFirstLoaded) {
+        await walkLoad(p, p.map[id].item, loaded, loadComponent);
+      }
+    }
+
+    for (const [propName, prop] of Object.entries(comp.props || {})) {
+      if (prop.meta?.type === "content-element") {
+        const mprop = comp.props[propName];
+        if (mprop) {
+          const mcontent = mprop.content;
+          if (mcontent) {
+            await walkLoad(p, mcontent, loaded, loadComponent);
+          }
+        }
+      }
+    }
+  }
+
+  if (item.type !== "text") {
+    await Promise.all(
+      item.childs.map((e) => walkLoad(p, e, loaded, loadComponent))
+    );
+  }
+};
+
+export const walkMap = (
+  p: {
+    meta: Record<string, EdMeta>;
+    comps: Record<string, { id: string; item: IItem }>;
+  },
+  arg: {
+    isLayout: boolean;
+    item: IContent;
+    parent_item: { id: string };
+    portal: {
+      in: Record<string, EdMeta>;
+      out: Record<string, EdMeta>;
+    };
+    each?: (meta: EdMeta) => void;
+    parent_comp?: { id: string; comp_id: string };
+  }
+) => {
+  const { parent_item, parent_comp } = arg;
+
+  let override_id = "";
+  const id = arg.item.id;
+
+  if (parent_comp && id) {
+    const cmeta = p.meta[parent_comp.id];
+    if (cmeta && cmeta.item.type === "item") {
+      const comp = cmeta.item.component;
+      if (comp) {
+        const ref_ids = comp.ref_ids;
+        if (ref_ids) {
+          let ref_id = ref_ids[id];
+          if (!ref_id) {
+            ref_id = createId();
+            ref_ids[id] = ref_id;
+          }
+          override_id = ref_id;
+        }
+      }
+    }
+  }
+
+  let item = mapItem(arg.item);
+  if (override_id) {
+    item.id = override_id;
+  }
+
+  const item_comp = item.component;
+
+  if (item_comp && item_comp.id && parent_item.id !== "root") {
+    const comp_ref = p.comps[item_comp.id];
+
+    if (!comp_ref) {
+      console.error("Component failed to load: ", item_comp.id);
+      return;
+    }
+    const mcomp = comp_ref.item;
+
+    if (mcomp) {
+      let ref_ids: Record<string, string> = item_comp.ref_ids;
+      if (!ref_ids) {
+        ref_ids = {};
+        item_comp.ref_ids = ref_ids;
+      }
+      const original_id = item.id;
+      item = mapItem(mcomp);
+      item.id = original_id;
+
+      const meta: EdMeta = {
+        item,
+        parent_item,
+        indexedScope: {},
+        isLayout: arg.isLayout,
+      };
+      if (item.name.startsWith("⬅")) {
+        arg.portal.in[item.name] = meta;
+      }
+      if (item.name.startsWith("⮕")) {
+        arg.portal.out[item.name] = meta;
+      }
+      if (arg.each) arg.each(meta);
+      p.meta[item.id] = meta;
+
+      if (item_comp.props) {
+        for (const [k, mprop] of Object.entries(item_comp.props)) {
+          if (mprop.meta?.type === "content-element" && mprop.content) {
+            walkMap(p, {
+              isLayout: arg.isLayout,
+              item: mprop.content,
+              parent_item: { id: item.id },
+              portal: arg.portal,
+              parent_comp: { id: item.id, comp_id: item_comp.id },
+            });
+          }
+        }
+      }
+
+      for (const c of mcomp.childs) {
+        walkMap(p, {
+          isLayout: arg.isLayout,
+          item: c,
+          parent_item: { id: item.id },
+          portal: arg.portal,
+          parent_comp: { id: item.id, comp_id: item_comp.id },
+        });
+      }
+    }
+    return;
+  }
+
+  const meta: EdMeta = {
+    item,
+    parent_item,
+    indexedScope: {},
+    parent_comp,
+    isLayout: arg.isLayout,
+  };
+  if (item.name.startsWith("⬅")) {
+    arg.portal.in[item.name] = meta;
+  }
+  if (item.name.startsWith("⮕")) {
+    arg.portal.out[item.name] = meta;
+  }
+  if (arg.each) arg.each(meta);
+  p.meta[item.id] = meta;
+
+  for (const c of item.childs) {
+    walkMap(p, {
+      isLayout: arg.isLayout,
+      item: c,
+      parent_item: { id: item.id },
+      portal: arg.portal,
+      parent_comp,
+    });
+  }
+};
+
+const mapItem = (item: IContent) => {
+  return {
+    ...item,
+    childs:
+      item.type !== "text"
+        ? (item.childs.map((e) => {
+            id: e.id;
+          }) as any)
+        : undefined,
+  } as IItem;
+};
diff --git a/app/web/src/nova/ed/logic/tree/sync-walk.tsx b/app/web/src/nova/ed/logic/tree/sync-walk.tsx
new file mode 100644
index 00000000..691d65bd
--- /dev/null
+++ b/app/web/src/nova/ed/logic/tree/sync-walk.tsx
@@ -0,0 +1,340 @@
+import { createId } from "@paralleldrive/cuid2";
+import { decompress } from "wasm-gzip";
+import { syncronize } from "y-pojo";
+import { TypedArray, TypedMap } from "yjs-types";
+import { MContent } from "../../../../utils/types/general";
+import { IItem, MItem } from "../../../../utils/types/item";
+import {
+  FMCompDef,
+  FMComponent,
+  FNCompDef,
+  FNComponent,
+} from "../../../../utils/types/meta-fn";
+import { DComp } from "../../../../utils/types/root";
+import { MSection } from "../../../../utils/types/section";
+import { EdMeta, PG } from "../ed-global";
+
+export const syncWalkLoad = async (
+  p: PG,
+  mitem: MItem,
+  loaded: Set<string>
+) => {
+  const mcomp = mitem.get("component");
+  if (mcomp) {
+    const id = mcomp.get("id");
+    const comp = mcomp.toJSON() as FNComponent;
+    if (id) {
+      const isFirstLoaded = !loaded.has(id);
+      loaded.add(id);
+      if (!p.comp.list[id]) {
+        await loadComponent(p, comp.id);
+      }
+
+      const pcomp = p.comp.list[id];
+      if (pcomp) {
+        const pitem = pcomp.doc.getMap("map").get("root");
+        if (pitem && isFirstLoaded) {
+          await syncWalkLoad(p, pitem, loaded);
+        }
+      }
+    }
+
+    for (const [propName, prop] of Object.entries(comp.props || {})) {
+      if (prop.meta?.type === "content-element") {
+        const mprop = mcomp.get("props")?.get(propName);
+        if (mprop) {
+          const mcontent = ensurePropContent(mprop, propName);
+          if (mcontent) {
+            await syncWalkLoad(p, mcontent, loaded);
+          }
+        }
+      }
+    }
+  }
+
+  for (const e of mitem.get("childs")?.map((e) => e) || []) {
+    await syncWalkLoad(p, e, loaded);
+  }
+};
+
+export const syncWalkMap = (
+  p: PG,
+  arg: {
+    isLayout: boolean;
+    mitem: MItem | MSection;
+    portal: {
+      in: Record<string, EdMeta>;
+      out: Record<string, EdMeta>;
+    };
+    parent_item: EdMeta["parent_item"];
+    parent_mcomp?: EdMeta["parent_mcomp"];
+    skip_add_tree?: boolean;
+    each?: (meta: EdMeta) => void;
+  }
+) => {
+  const { mitem, parent_item, parent_mcomp } = arg;
+  const item = {} as unknown as IItem;
+
+  let override_id = "";
+  const id = mitem.get("id");
+
+  let skip_tree = arg.skip_add_tree;
+  let skip_tree_child = skip_tree;
+  if (id && p.ui.tree.item_loading.includes(id)) {
+    skip_tree_child = true;
+  }
+
+  if (parent_mcomp && id) {
+    const fcomp = parent_mcomp.mitem.get("component");
+    if (fcomp) {
+      const ref_ids = fcomp.get("ref_ids");
+
+      if (ref_ids) {
+        let ref_id = ref_ids.get(id);
+
+        if (!ref_id) {
+          ref_id = createId();
+          ref_ids.set(id, ref_id);
+        }
+        override_id = ref_id;
+      }
+    }
+  }
+
+  mapItem(mitem, item);
+
+  if (override_id) {
+    item.id = override_id;
+  }
+
+  const item_comp = item.component;
+  const mitem_comp = mitem.get("component");
+  const metaNotFound = () => {
+    if (!skip_tree) {
+      p.page.tree.push({
+        id: item.id,
+        parent: parent_item.id,
+        text: item.name,
+      });
+    }
+  };
+
+  if (item_comp && item_comp.id && parent_item.id !== "root") {
+    if (!p.comp.list[item_comp.id]) {
+      console.error("Component failed to load: ", item_comp.id);
+      return;
+    }
+
+    const ref_comp = p.comp.list[item_comp.id];
+
+    if (ref_comp && mitem_comp) {
+      const mcomp = ref_comp.doc.getMap("map").get("root");
+
+      if (mcomp) {
+        let ref_ids: Record<string, string> = item_comp.ref_ids;
+        if (!ref_ids) {
+          mitem_comp.set("ref_ids", new Y.Map() as any);
+          ref_ids = {};
+        }
+        const original_id = item.id;
+        mapItem(mcomp, item);
+        item.id = original_id;
+
+        const meta: EdMeta = {
+          item,
+          mitem: mitem as MItem,
+          parent_item,
+          parent_mcomp: parent_mcomp,
+          indexedScope: {},
+          isLayout: arg.isLayout,
+        };
+        if (item.name.startsWith("⬅")) {
+          arg.portal.in[item.name] = meta;
+        }
+        if (item.name.startsWith("⮕")) {
+          arg.portal.out[item.name] = meta;
+        }
+        if (arg.each) arg.each(meta);
+        p.page.meta[item.id] = meta;
+
+        if (!skip_tree) {
+          p.page.tree.push({
+            id: item.id,
+            parent: parent_item.id,
+            text: item.name,
+            data: meta,
+          });
+        }
+
+        const mprops = mcomp.get("component")?.get("props")?.toJSON() as Record<
+          string,
+          FNCompDef
+        >;
+
+        if (mprops) {
+          const mitem_comp = mitem.get("component");
+          if (mitem_comp) {
+            const mitem_props = ensureMItemProps(mitem_comp, item_comp);
+            if (mitem_props) {
+              for (const [k, v] of Object.entries(mprops)) {
+                const mprop = ensureMProp(mitem_props, k, v);
+                item_comp.props[k] = v;
+                if (mprop && v.meta?.type === "content-element") {
+                  const mcontent = ensurePropContent(mprop, k);
+                  if (mcontent) {
+                    syncWalkMap(p, {
+                      isLayout: arg.isLayout,
+                      mitem: mcontent,
+                      parent_item: { id: item.id, mitem: mitem as MItem },
+                      parent_mcomp: { mitem: mitem as MItem, mcomp },
+                      portal: arg.portal,
+                      skip_add_tree: skip_tree_child,
+                    });
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        const childs = mcomp.get("childs")?.map((e) => e) || [];
+        for (const e of childs) {
+          syncWalkMap(p, {
+            isLayout: arg.isLayout,
+            mitem: e,
+            parent_item: { id: item.id, mitem: mitem as MItem },
+            parent_mcomp: { mitem: mitem as MItem, mcomp },
+            skip_add_tree: true,
+            portal: arg.portal,
+          });
+        }
+        return;
+      }
+    }
+
+    metaNotFound();
+    return;
+  }
+
+  const meta: EdMeta = {
+    item,
+    mitem: mitem as MItem,
+    parent_item,
+    parent_mcomp: parent_mcomp,
+    indexedScope: {},
+  };
+
+  if (item.name.startsWith("⬅")) {
+    arg.portal.in[item.name] = meta;
+  }
+  if (item.name.startsWith("⮕")) {
+    arg.portal.out[item.name] = meta;
+  }
+  if (arg.each) arg.each(meta);
+  p.page.meta[item.id] = meta;
+
+  if (!skip_tree) {
+    p.page.tree.push({
+      id: item.id,
+      parent: parent_item.id,
+      text: item.name,
+      data: meta,
+    });
+  }
+
+  const childs = mitem.get("childs")?.map((e) => e) || [];
+  for (const e of childs) {
+    syncWalkMap(p, {
+      isLayout: arg.isLayout,
+      mitem: e,
+      parent_item: { id: item.id, mitem: mitem as MItem },
+      parent_mcomp: arg.parent_mcomp,
+      portal: arg.portal,
+      skip_add_tree: skip_tree_child,
+    });
+  }
+};
+
+export const loadComponent = async (p: PG, id_comp: string) => {
+  const cur = await p.sync.comp.load(id_comp);
+  if (cur && cur.snapshot) {
+    const doc = new Y.Doc() as DComp;
+    if (cur.snapshot) {
+      Y.applyUpdate(doc as any, decompress(cur.snapshot));
+      p.comp.map[id_comp] = {
+        id: id_comp,
+        item: doc.getMap("map").get("root")?.toJSON() as IItem,
+      };
+      p.comp.list[id_comp] = { comp: cur, doc };
+      return true;
+    }
+  }
+  return false;
+};
+
+const ensurePropContent = (mprop: FMCompDef, k: string) => {
+  let mcontent = mprop.get("content");
+  if (!mcontent) {
+    const newcontent = new Y.Map();
+    syncronize(newcontent, {
+      id: createId(),
+      name: k,
+      type: "item",
+      dim: { w: "full", h: "full" },
+      childs: [],
+      adv: {
+        css: "",
+      },
+    });
+    mprop.set("content", newcontent as MItem);
+    mcontent = mprop.get("content");
+  }
+  return mcontent;
+};
+
+const ensureMProp = (
+  mitem_props: TypedMap<Record<string, FMCompDef>>,
+  k: string,
+  v: FNCompDef
+) => {
+  let mprop = mitem_props.get(k);
+  if (!mprop) {
+    const newprop = new Y.Map();
+    syncronize(newprop, v);
+    mitem_props.set(k, newprop as FMCompDef);
+    mprop = mitem_props.get(k);
+  }
+  return mprop;
+};
+
+const ensureMItemProps = (mitem_comp: FMComponent, item_comp: FNComponent) => {
+  let mitem_props = mitem_comp.get("props");
+  if (!mitem_props) {
+    mitem_comp.set("props", new Y.Map() as any);
+    mitem_props = mitem_comp.get("props");
+  }
+  if (!item_comp.props) {
+    item_comp.props = {};
+  }
+  return mitem_props;
+};
+
+const mapItem = (mitem: MContent, item: any) => {
+  mitem.forEach((e, k) => {
+    if (k !== "childs") {
+      let val = e;
+      if (typeof e === "object" && e) {
+        if ((e as any).toJSON) {
+          val = e.toJSON() as any;
+        }
+      }
+      item[k] = val;
+    } else {
+      if (!item[k]) item[k] = [];
+      const childs = e as unknown as TypedArray<{}>;
+      childs.forEach((c) => {
+        item[k].push({ id: c.get("id") });
+      });
+    }
+  });
+};
diff --git a/app/web/src/nova/ed/panel/popup/script/monaco.tsx b/app/web/src/nova/ed/panel/popup/script/monaco.tsx
index 209ba1be..67e20cc1 100644
--- a/app/web/src/nova/ed/panel/popup/script/monaco.tsx
+++ b/app/web/src/nova/ed/panel/popup/script/monaco.tsx
@@ -66,9 +66,9 @@ export const ScriptMonaco = () => {
   } else if (
     item.type === "item" &&
     item.component?.id &&
-    meta.parent_comp?.mitem
+    meta.parent_mcomp?.mitem
   ) {
-    mitem = meta.parent_comp?.mitem;
+    mitem = meta.parent_mcomp?.mitem;
 
     if (!mitem) {
       active.item_id = "";