wip fix

app/web/src/nova/ed/logic/ed-global.ts

@@ -123,6 +123,7 @@ export type EdMeta = {
   };
   el?: ReactElement;
   is_layout?: boolean;
+  is_jsx_prop?: boolean;
   /** script related meta **/
   propval?: Record<string, any>;
   idexed_scope: Record<string, any>;

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

@@ -56,7 +56,7 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
                   meta: p.page.meta,
                 },
                 {
-                  isLayout: true,
+                  is_layout: true,
                   mitem: e,
                   parent_item: { id: p.page.root_id },
                   tree_root_id: p.page.root_id,
@@ -129,7 +129,7 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
               tree: p.page.tree,
             },
             {
-              isLayout: false,
+              is_layout: false,
               mitem: e,
               parent_item: { id: p.page.root_id },
               tree_root_id: p.page.root_id,

app/web/src/nova/ed/logic/tree/sync-walk-comp.tsx

@@ -91,7 +91,7 @@ const walkCompTree = async (p: PG, mitem: MItem, loaded: Set<string>) => {
     },
     {
       mitem,
-      isLayout: false,
+      is_layout: false,
       parent_item: { id: "root" },
       portal,
       tree_root_id: "root",

app/web/src/nova/ed/logic/tree/sync-walk.tsx

@@ -69,7 +69,7 @@ export const syncWalkMap = (
     warn_component_loaded?: boolean;
   },
   arg: {
-    isLayout: boolean;
+    is_layout: boolean;
     mitem: MItem | MSection;
     portal: {
       in: Record<string, EdMeta>;
@@ -77,6 +77,7 @@ export const syncWalkMap = (
     };
     parent_item: EdMeta["parent_item"];
     parent_mcomp?: EdMeta["parent_mcomp"];
+    is_jsx_prop?: boolean;
     skip_add_tree?: boolean;
     tree_root_id: string;
     each?: (meta: EdMeta) => void;
@@ -157,7 +158,7 @@ export const syncWalkMap = (
           parent_item,
           parent_mcomp: parent_mcomp,
           idexed_scope: {},
-          is_layout: arg.isLayout,
+          is_layout: arg.is_layout,
         };
         if (item.name.startsWith("⬅")) {
           arg.portal.in[item.name] = meta;
@@ -195,9 +196,10 @@ export const syncWalkMap = (
                   const mcontent = ensurePropContent(mprop, k);
                   if (mcontent) {
                     syncWalkMap(p, {
-                      isLayout: arg.isLayout,
+                      is_layout: arg.is_layout,
                       tree_root_id: arg.tree_root_id,
                       mitem: mcontent,
+                      is_jsx_prop: true,
                       parent_item: { id: item.id, mitem: mitem as MItem },
                       parent_mcomp: { mitem: mitem as MItem, mcomp },
                       portal: arg.portal,
@@ -214,7 +216,7 @@ export const syncWalkMap = (
         const childs = mcomp.get("childs")?.map((e) => e) || [];
         for (const e of childs) {
           syncWalkMap(p, {
-            isLayout: arg.isLayout,
+            is_layout: arg.is_layout,
             tree_root_id: arg.tree_root_id,
             mitem: e,
             parent_item: { id: item.id, mitem: mitem as MItem },
@@ -233,10 +235,11 @@ export const syncWalkMap = (
   }
 
   const meta: EdMeta = {
-    is_layout: arg.isLayout,
+    is_layout: arg.is_layout,
     item,
     mitem: mitem as MItem,
     parent_item,
+    is_jsx_prop: arg.is_jsx_prop,
     parent_mcomp: parent_mcomp,
     idexed_scope: {},
   };
@@ -263,7 +266,7 @@ export const syncWalkMap = (
   const childs = mitem.get("childs")?.map((e) => e) || [];
   for (const e of childs) {
     syncWalkMap(p, {
-      isLayout: arg.isLayout,
+      is_layout: arg.is_layout,
       tree_root_id: arg.tree_root_id,
       mitem: e,
       parent_item: { id: item.id, mitem: mitem as MItem },

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

@@ -22,6 +22,7 @@ export const EdTreeName = ({
   const mitem = node.data?.mitem;
 
   if (!item || !mitem) return <></>;
+  const is_jsx_prop = !!node.data?.is_jsx_prop;
 
   const isRenaming = p.ui.tree.rename_id === item.id;
   return (
@@ -72,7 +73,7 @@ export const EdTreeName = ({
         />
       ) : (
         <div className="flex flex-col">
-          <Name name={node.text} />
+          <Name name={node.text} is_jsx_prop={is_jsx_prop} />
           {/* <div className={"text-[11px] text-gray-500 -mt-1"}>{item.id}</div> */}
         </div>
       )}
@@ -80,7 +81,37 @@ export const EdTreeName = ({
   );
 };
 
-const Name: FC<{ name: string }> = ({ name }) => {
+const Name: FC<{ name: string; is_jsx_prop: boolean }> = ({
+  name,
+  is_jsx_prop,
+}) => {
+  if (is_jsx_prop) {
+    return (
+      <div className="flex items-center space-x-1">
+        <div className="flex text-purple-500 border border-purple-400 items-center justify-center font-mono text-[8px] px-[2px]">
+          PROP
+        </div>
+        <div>{name}</div>
+      </div>
+    );
+  }
+
+  if (name.startsWith("jsx:")) {
+    return (
+      <div className="flex items-center space-x-1">
+        <div className="flex text-purple-500 border border-purple-400 pr-1 items-center justify-center">
+          <div
+            dangerouslySetInnerHTML={{
+              __html: `<svg width="9px" height="9px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.69667 0.0403541C8.90859 0.131038 9.03106 0.354857 8.99316 0.582235L8.0902 6.00001H12.5C12.6893 6.00001 12.8625 6.10701 12.9472 6.27641C13.0319 6.4458 13.0136 6.6485 12.8999 6.80001L6.89997 14.8C6.76167 14.9844 6.51521 15.0503 6.30328 14.9597C6.09135 14.869 5.96888 14.6452 6.00678 14.4178L6.90974 9H2.49999C2.31061 9 2.13748 8.893 2.05278 8.72361C1.96809 8.55422 1.98636 8.35151 2.09999 8.2L8.09997 0.200038C8.23828 0.0156255 8.48474 -0.0503301 8.69667 0.0403541ZM3.49999 8.00001H7.49997C7.64695 8.00001 7.78648 8.06467 7.88148 8.17682C7.97648 8.28896 8.01733 8.43723 7.99317 8.5822L7.33027 12.5596L11.5 7.00001H7.49997C7.353 7.00001 7.21347 6.93534 7.11846 6.8232C7.02346 6.71105 6.98261 6.56279 7.00678 6.41781L7.66968 2.44042L3.49999 8.00001Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`,
+            }}
+          ></div>
+          <div className="font-mono text-[9px]">JSX</div>
+        </div>
+        <div>{name.substring(4)}</div>
+      </div>
+    );
+  }
+
   if (name.startsWith("jsx=")) {
     return (
       <div className="flex items-center space-x-1">
@@ -94,7 +125,6 @@ const Name: FC<{ name: string }> = ({ name }) => {
             `,
           }}
         ></div>
-
         <div>{name.substring(4)}</div>
       </div>
     );