wip checkpoint

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

@@ -12,7 +12,7 @@ export const EdRight = () => {
     meta?.item.type === "item" &&
     meta?.item.component?.id &&
     meta?.item.component.id !== active.comp_id;
-  const showProp = isComponent && p.ui.side.prop;
+
   return (
     <div
       className={cx(

app/web/src/nova/ed/logic/comp/load.tsx

@@ -142,6 +142,13 @@ export const updateComponentMeta = async (
       meta,
       on: {
         visit(m) {
+          if (m.item.originalId) {
+            m.item.id = m.item.originalId;
+            meta[m.item.id] = m;
+            delete meta[m.item.originalId];
+            delete m.item.originalId;
+          }
+
           pushTreeNode(p, m, meta, tree);
 
           if (m.parent) {
@@ -151,11 +158,18 @@ export const updateComponentMeta = async (
               }
             } else {
               const parent = meta[m.parent.id];
-
+              if (parent && parent.mitem) {
-              if (parent.mitem) {
                 parent.mitem.get("childs")?.forEach((child) => {
-                  if (child.get("id") === m.item.id) {
+                  const cid = child.get("id");
-                    m.mitem = child;
+                  if (cid) {
+                    if (
+                      cid === m.item.id ||
+                      (m.instances &&
+                        m.instances[cid] &&
+                        m.instances[cid][m.item.id])
+                    ) {
+                      m.mitem = child;
+                    }
                   }
                 });
               }

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

@@ -104,8 +104,16 @@ 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])
+    if (p.comp.list[active.comp_id] && p.comp.list[active.comp_id].meta) {
-      return p.comp.list[active.comp_id].meta[id];
+      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/main/main-per-item.tsx

@@ -25,6 +25,7 @@ export const mainPerItemVisit = (
         e.currentTarget.blur();
       }
     };
+
     parts.props.onBlur = (e) => {
       p.page.prevent_rebuild = false;
       p.render();
@@ -79,7 +80,16 @@ export const mainPerItemVisit = (
   );
   parts.props.onPointerOver = (e) => {
     e.stopPropagation();
-    active.hover.id = meta.item.id;
+
+    if (active.comp_id) {
+      if (meta.parent?.comp_id === active.comp_id && meta.item.originalId) {
+        active.hover.id = meta.item.originalId;
+      } else {
+        active.hover.id = meta.item.id;
+      }
+    } else {
+      active.hover.id = meta.item.id;
+    }
     active.hover.renderMain();
     active.hover.renderTree();
   };
@@ -122,8 +132,15 @@ export const mainPerItemVisit = (
           }
         } else if (meta.parent?.comp_id === active.comp_id) {
           active.item_id = meta.item.originalId || meta.item.id;
-        } else {
+        } else if (m) {
-          active.comp_id = "";
+          if (m.mitem) {
+            active.comp_id = "";
+          } else if (m.parent?.comp_id && m.parent?.instance_id) {
+            const pmeta = p.page.meta[m.parent.instance_id];
+            if (pmeta.item.originalId) {
+              active.item_id = pmeta.item.originalId;
+            }
+          }
         }
       } else {
         if (m) {
@@ -141,7 +158,7 @@ const getOuterMeta = (p: { meta: Record<string, IMeta> }, meta: IMeta) => {
 
   if (cur.jsx_prop) return meta;
 
-  while (cur?.parent?.instance_id) {
+  while (cur?.parent?.instance_id && p.meta[cur?.parent?.instance_id]) {
     cur = p.meta[cur?.parent?.instance_id];
   }
 

app/web/src/nova/ed/panel/side/prop-instance.tsx

@@ -17,21 +17,35 @@ export const EdSidePropInstance: FC<{ meta: IMeta }> = ({ meta }) => {
     showJSX: false,
   });
 
-  const item = meta?.item as IItem;
+  let _meta = meta;
-  if (!item) return null;
+  if (active.comp_id) {
+    if (
+      p.comp.list[active.comp_id] &&
+      p.comp.list[active.comp_id].meta &&
+      meta.item.originalId
+    ) {
+      const m = p.comp.list[active.comp_id].meta[meta.item.originalId];
+      if (m) {
+        _meta = m;
+      }
+    }
+  }
+
+  const item = _meta?.item as IItem;
+  if (!item) return <>Warning: Item not found</>;
 
   let filtered = [] as { mprop: FMCompDef; name: string }[];
-  const mprops = meta.mitem?.get("component")?.get("props");
+  const mprops = _meta.mitem?.get("component")?.get("props");
-  const comp_id = meta.mitem?.get("component")?.get("id") || "";
+  const comp_id = _meta.mitem?.get("component")?.get("id") || "";
 
-  if (!p.comp.list[comp_id]) return null;
+  if (!p.comp.list[comp_id]) return <>Warning: Component not found</>;
   const mcprops = p.comp.list[comp_id].doc
     .getMap("map")
     .get("root")
     ?.get("component")
     ?.get("props");
 
-  if (mprops && meta.mitem && mcprops) {
+  if (mprops && _meta.mitem && mcprops) {
     mcprops.forEach((m, key) => {
       let mprop = mprops.get(key);
 
@@ -67,12 +81,12 @@ export const EdSidePropInstance: FC<{ meta: IMeta }> = ({ meta }) => {
     <div className="flex flex-1 flex-col text-[12px]">
       <div className="flex border-b p-1 h-[28px] items-center bg-slate-50 justify-between select-none">
         <div className="flex-1 overflow-hidden mr-2 text-ellipsis whitespace-nowrap">
-          {meta.item.name}
+          {_meta.item.name}
         </div>
         <div
           className="border px-1 cursor-pointer bg-white hover:bg-blue-100"
           onClick={() => {
-            const item = meta.item as IItem;
+            const item = _meta.item as IItem;
 
             const comp_id = item.component?.id;
 

app/web/src/nova/vi/meta/comp.tsx

@@ -84,7 +84,7 @@ export const genComp = (p: GenMetaP, arg: GenMetaArg) => {
                 name,
               },
               parent: {
-                item,
+                item: meta.item,
                 instance_id: item.id,
                 comp: pcomp.comp,
               },

app/web/src/nova/vi/meta/meta.ts

@@ -44,7 +44,7 @@ export const genMeta = (p: GenMetaP, arg: GenMetaArg) => {
   }
   if (item.id) {
     if (p.set_meta !== false) {
-      p.meta[item.id] = meta;
+      p.meta[meta.item.id] = meta;
     }
   } 
 
@@ -54,7 +54,7 @@ export const genMeta = (p: GenMetaP, arg: GenMetaArg) => {
         item: v,
         is_root: false,
         parent: {
-          item,
+          item: meta.item,
           instance_id: arg.parent?.instance_id,
           comp: arg.parent?.comp,
         },