wip fix comp prop

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

@@ -137,11 +137,28 @@ export const ScriptMonaco = () => {
         if (kind === "value") {
           val = mprop.get("value");
         } else if (kind === "gen") {
-          val = mprop.get("gen") || "";
+          val =
+            mprop.get("gen") ||
+            `\
+async () => {
+  return \`""\`;
+}`;
         } else if (kind === "visible") {
-          val = mprop.get("visible") || "";
+          val = mprop.get("visible") || "true";
         } else if (kind === "option") {
-          val = mprop.get("meta")?.get("options") || "";
+          val =
+            mprop.get("meta")?.get("options") ||
+            `\
+[
+  {
+    label: "yes",
+    value: "y"
+  },
+  {
+    label: "no",
+    value: "n"
+  },
+]`;
         }
       }
     }

app/web/src/nova/ed/panel/popup/script/pop-script.tsx

@@ -3,7 +3,7 @@ import { jscript } from "../../../../../utils/script/jscript";
 import { Loading } from "../../../../../utils/ui/loading";
 import { Modal } from "../../../../../utils/ui/modal";
 import { EDGlobal } from "../../../logic/ed-global";
-import { propPopover } from "../../side/prop-comp/prop-popover";
+import { propPopover } from "../../side/prop-comp/prop-form";
 import { ScriptWorkbench } from "./workbench";
 
 export const EdPopScript = () => {

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

@@ -12,7 +12,7 @@ import { IItem } from "../../../../utils/types/item";
 import { FMCompDef } from "../../../../utils/types/meta-fn";
 import { EDGlobal, EdMeta } from "../../logic/ed-global";
 import { EdPropCompTreeItem, PropItem } from "./prop-comp/tree-item";
-import { propPopover } from "./prop-comp/prop-popover";
+import { propPopover } from "./prop-comp/prop-form";
 
 const propRef = {
   el: null as any,

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

@@ -4,12 +4,16 @@ import { useGlobal, useLocal } from "web-utils";
 import { TypedMap } from "yjs-types";
 import { createEditScript } from "./edit-script";
 import { EDGlobal } from "../../../logic/ed-global";
+import { createId } from "@paralleldrive/cuid2";
+import { IItem, MItem } from "../../../../../utils/types/item";
+import { MContent } from "../../../../../utils/types/general";
+import { fillID } from "../../../logic/tree/fill-id";
 
 export const propPopover = {
   name: "",
 };
 
-export const EdPropPopover: FC<{ mprop: FMCompDef; name: string }> = ({
+export const EdPropPopoverForm: FC<{ mprop: FMCompDef; name: string }> = ({
   mprop,
   name,
 }) => {
@@ -43,7 +47,28 @@ export const EdPropPopover: FC<{ mprop: FMCompDef; name: string }> = ({
                 " px-2 cursor-pointer"
               )}
               onClick={() => {
+                if (e.type === "content-element") {
+                  mmeta.doc?.transact(() => {
                     mmeta.set("type", e.type as any);
+                    if (!mprop.get("content")) {
+                      const json = {
+                        id: createId(),
+                        name: `jsx-content`,
+                        type: "item",
+                        dim: { w: "full", h: "full" },
+                        childs: [],
+                        adv: {
+                          css: "",
+                        },
+                      } as IItem;
+                      const map = new Y.Map() as MItem;
+                      syncronize(map as any, fillID(json));
+                      mprop.set("content", map);
+                    }
+                  });
+                } else {
+                  mmeta.set("type", e.type as any);
+                }
               }}
             >
               {e.label}

app/web/src/nova/ed/panel/side/prop-comp/tree-item.tsx

@@ -3,7 +3,7 @@ import { FC } from "react";
 import { MItem } from "../../../../../utils/types/item";
 import { FMCompDef, FNCompDef } from "../../../../../utils/types/meta-fn";
 import { Popover } from "../../../../../utils/ui/popover";
-import { EdPropPopover, propPopover } from "./prop-popover";
+import { EdPropPopoverForm, propPopover } from "./prop-form";
 import { TypedMap } from "yjs-types";
 
 export type PropItem = {
@@ -18,11 +18,11 @@ export const EdPropCompTreeItem: FC<{
   params: Parameters<NodeRender<PropItem>>[1];
   render: () => void;
 }> = ({ node, params, render }) => {
-  if (node.id === "root" || node.id === "proot") {
+  if (node.id === "root") {
     return <></>;
   }
   return (
-    <div className="flex items-stretch border-b text-[14px]">
+    <div className="flex items-stretch border-b text-[14px] min-h-[27px]">
       <div
         ref={params.handleRef}
         className="cursor-pointer flex items-center justify-center text-slate-300 hover:bg-blue-100 hover:text-slate-600 border-r"
@@ -57,8 +57,10 @@ export const EdPropCompTreeItem: FC<{
             }
             render();
           }}
-          content={<EdPropPopover mprop={node.data.mprop} name={node.text} />}
-          className="flex-1 pl-1 hover:bg-blue-100 cursor-pointer"
+          content={
+            <EdPropPopoverForm mprop={node.data.mprop} name={node.text} />
+          }
+          className="flex-1 pl-1 hover:bg-blue-100 cursor-pointer items-center flex"
         >
           {node.text}
         </Popover>
@@ -71,12 +73,15 @@ export const EdPropCompTreeItem: FC<{
           if (confirm("Are you sure ?")) {
             const mprop = node.data?.mprop;
             if (mprop) {
-            const parent = mprop.parent as TypedMap<Record<string, FMCompDef>>;
+              const parent = mprop.parent as TypedMap<
+                Record<string, FMCompDef>
+              >;
               parent.forEach((m, idx) => {
                 if (mprop === m) {
                   parent.delete(idx);
                 }
-            });}
+              });
+            }
           }
         }}
       >