wip fix

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

@@ -60,7 +60,8 @@ export const EdPropPopoverForm: FC<{
         closing && "hidden"
       )}
     >
-      <div className="px-2 py-1 flex space-x-1">
+      <div className="flex justify-between px-2 py-1">
+        <div className="flex space-x-1">
           {[
             { label: "TXT", type: "text" },
             { label: "OPT", type: "option" },
@@ -106,6 +107,54 @@ export const EdPropPopoverForm: FC<{
             );
           })}
         </div>
+
+        {type === "text" && (
+          <div
+            className="flex cursor-pointer items-center space-x-1 select-none"
+            onClick={() => {
+              mprop.doc?.transact(() => {
+                (mprop.parent as any)?.forEach((p: any, k: string) => {
+                  console.log(k, p);
+
+                  if (k === name) {
+                    p.set("is_name", !p.get("is_name"));
+                  } else {
+                    p.set("is_name", false);
+                  }
+                });
+              });
+            }}
+          >
+            <span
+              className={cx(
+                css`
+                  width: 17px;
+                `,
+                mprop.get("is_name") && "text-green-500"
+              )}
+            >
+              {!mprop.get("is_name") ? (
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                >
+                  <path d="M8 7C5.23858 7 3 9.23858 3 12C3 14.7614 5.23858 17 8 17H16C18.7614 17 21 14.7614 21 12C21 9.23858 18.7614 7 16 7H8ZM8 5H16C19.866 5 23 8.13401 23 12C23 15.866 19.866 19 16 19H8C4.13401 19 1 15.866 1 12C1 8.13401 4.13401 5 8 5ZM8 15C6.34315 15 5 13.6569 5 12C5 10.3431 6.34315 9 8 9C9.65685 9 11 10.3431 11 12C11 13.6569 9.65685 15 8 15Z"></path>
+                </svg>
+              ) : (
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                >
+                  <path d="M8 5H16C19.866 5 23 8.13401 23 12C23 15.866 19.866 19 16 19H8C4.13401 19 1 15.866 1 12C1 8.13401 4.13401 5 8 5ZM16 15C17.6569 15 19 13.6569 19 12C19 10.3431 17.6569 9 16 9C14.3431 9 13 10.3431 13 12C13 13.6569 14.3431 15 16 15Z"></path>
+                </svg>
+              )}
+            </span>
+            <span className="text-xs">Default Name</span>
+          </div>
+        )}
+      </div>
       <div className="border-t border-slate-300 px-2 pt-2 pb-1 flex flex-col items-stretch">
         <div className="uppercase text-xs text-slate-500">Name</div>
         <input

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

@@ -140,6 +140,18 @@ const Name: FC<{ name: string; is_jsx_prop: boolean; meta?: IMeta }> = ({
   meta,
 }) => {
   if (is_jsx_prop) {
+    let comp_label = "";
+    for (const prop of Object.values(meta?.item.component?.props || {})) {
+      if (prop.is_name) {
+        try {
+          eval(`comp_label = ${prop.valueBuilt}`);
+        } catch (e) {}
+        if (typeof comp_label !== "string" && typeof comp_label !== "number") {
+          comp_label = "asdas";
+        }
+      }
+    }
+
     return (
       <div className={cx("flex items-center space-x-1 pr-1")}>
         <Tooltip
@@ -148,7 +160,10 @@ const Name: FC<{ name: string; is_jsx_prop: boolean; meta?: IMeta }> = ({
         >
           P
         </Tooltip>
-        <div className="flex-1">{name}</div>
+        <div className="flex-1">
+          {name}
+          {comp_label && `: ${comp_label}`}
+        </div>
         {meta && meta.mitem && <GenerateJSX meta={meta} />}
         {meta && !meta.mitem && (
           <Tooltip

app/web/src/utils/types/meta-fn.ts

@@ -34,6 +34,7 @@ export type FNCompDef = {
   valueBuilt: any;
   gen?: string;
   genBuilt?: string;
+  is_name?: boolean;
   jsxCalledBy?: string[];
   content?: IItem;
   visible?: string;