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 52a7fcca..cdb94e1c 100644
--- a/app/web/src/nova/ed/panel/popup/script/monaco.tsx
+++ b/app/web/src/nova/ed/panel/popup/script/monaco.tsx
@@ -85,19 +85,24 @@ export const EdScriptMonaco: FC<{}> = () => {
             if (meta) {
               const imports = declareScope(p, meta, editor, monaco);
 
-              let model = monaco.editor.createModel(
-                `\
-// #region imports
-${imports}
-// #endregion
+              let cur = "page";
+              monaco.editor.getModels().forEach((model) => {
+                if (
+                  model.uri.path === `/${cur}_${active.item_id}_src_src.tsx`
+                ) {
+                  editor.setModel(model);
+                }
+              });
 
-${val}
-`,
-                "typescript",
-                monaco.Uri.parse(`file:///active.tsx`)
-              );
-              editor.setModel(model);
-              editor.trigger("fold", "editor.foldAllMarkerRegions", {});
+              if (imports) {
+                const range = new monaco.Range(
+                  1,
+                  0,
+                  imports.split("\n").length + 1,
+                  0
+                );
+                (editor as any).setHiddenAreas([range]);
+              }
 
               await jsMount(editor, monaco, p);
             }
@@ -184,13 +189,20 @@ ${val}
       language={
         { css: "scss", js: "typescript", html: "html" }[p.ui.popup.script.mode]
       }
-      onChange={(val) => {
+      onChange={(value) => {
         return;
-        local.value = val || "";
+        if ((value || "").includes("/** IMPORT BOUNDARY **/")) {
+          const valparts = (value || "").split("/** IMPORT BOUNDARY **/\n");
+          if (valparts.length === 2) local.value = valparts[1];
+        } else {
+          local.value = value || "";
+        }
+
         local.render();
         clearTimeout(scriptEdit.timeout);
 
         const applyChanges = async () => {
+          const value = local.value;
           const meta = getActiveMeta(p);
           const type = p.ui.popup.script.mode;
           if (meta && meta.mitem) {
@@ -207,7 +219,7 @@ ${val}
                 type: "prop",
                 prop_kind: p.ui.popup.script.prop_kind,
                 prop_name: p.ui.popup.script.prop_name,
-                value: compress(encode.encode(val || "")),
+                value: compress(encode.encode(value || "")),
                 ...arg,
               });
             } else if (p.ui.popup.script.type === "prop-instance") {
@@ -216,7 +228,7 @@ ${val}
                 mode: type,
                 prop_name: p.ui.popup.script.prop_name,
                 item_id: active.item_id,
-                value: compress(encode.encode(val || "")),
+                value: compress(encode.encode(value || "")),
                 ...arg,
               });
             } else {
@@ -224,7 +236,7 @@ ${val}
                 type: "adv",
                 mode: type,
                 item_id: active.item_id,
-                value: compress(encode.encode(val || "")),
+                value: compress(encode.encode(value || "")),
                 ...arg,
               });
             }
diff --git a/app/web/src/nova/ed/panel/popup/script/scope/add-scope.tsx b/app/web/src/nova/ed/panel/popup/script/scope/add-scope.tsx
index 1a447054..ceffb518 100644
--- a/app/web/src/nova/ed/panel/popup/script/scope/add-scope.tsx
+++ b/app/web/src/nova/ed/panel/popup/script/scope/add-scope.tsx
@@ -21,14 +21,8 @@ export const addScope = (
     const arg = extractLoc(uri.path.split("_"), p);
     model.onDidChangeContent((e) => {
       const text = model.getValue();
-      console.log(arg, text);
-      // const models = monaco.editor.getModels().filter((e) => {
-      //   return e.uri.toString().startsWith("ts:scope~");
-      // });
-      // models.forEach((model) => {
-      //   console.log(model?.getValue());
-      // });
-      // modifyJS(p, type, arg.loc, text);
+      console.log(arg);
+      console.warn(text);
     });
   }
 };
diff --git a/app/web/src/nova/ed/panel/popup/script/scope/scope.tsx b/app/web/src/nova/ed/panel/popup/script/scope/scope.tsx
index 9491123c..9730c7aa 100644
--- a/app/web/src/nova/ed/panel/popup/script/scope/scope.tsx
+++ b/app/web/src/nova/ed/panel/popup/script/scope/scope.tsx
@@ -35,11 +35,55 @@ export const declareScope = (
   const paths: IMeta[][] = [];
 
   map_childs(metas, entry, paths);
-  const import_map = extract_import_map(paths, meta, p, monaco);
+
+  let cur = "page";
+  const import_map = extract_import_map(cur, paths, meta, p, monaco);
+  gen_content(cur, p, paths, import_map, monaco);
   return import_map[active.item_id];
 };
 
+const gen_content = (
+  cur: string,
+  p: PG,
+  paths: IMeta[][],
+  import_map: Record<string, string>,
+  monaco: Monaco
+) => {
+  const added = new Set<string>();
+  for (const path of paths) {
+    let idx = 0;
+    let last_import = "";
+    for (const m of path) {
+      if (!import_map[m.item.id]) {
+        if (idx === 0) {
+          break;
+        }
+      } else {
+        last_import = import_map[m.item.id];
+      }
+
+      if (!added.has(m.item.id) && m.item.adv?.js) {
+        added.add(m.item.id);
+        const content = `\
+${last_import}
+/** IMPORT BOUNDARY **/
+${m.item.adv.js}
+`;
+
+        addScope(
+          p,
+          monaco,
+          `file:///${cur}_${m.item.id}_src_src.tsx`,
+          content
+        );
+      }
+      idx++;
+    }
+  }
+};
+
 const extract_import_map = (
+  cur: string,
   paths: IMeta[][],
   meta: IMeta,
   p: PG,
@@ -47,8 +91,6 @@ const extract_import_map = (
 ) => {
   const added = new Set<string>();
 
-  let cur = "page";
-
   const import_map = {} as Record<string, string>;
   for (const path of paths) {
     const imports = new Set<string>();
@@ -75,9 +117,10 @@ export const ${k}: typeof _local & { render: ()=>void } = _local;
               addScope(
                 p,
                 monaco,
-                `file:///${cur}_${v.id}_${v.type}_${k}.d.ts`,
+                `file:///${cur}_${v.id}_${v.type}_${k}.tsx`,
                 `\
 ${[...imports].join("\n")}
+/** IMPORT BOUNDARY **/
 ${src}`
               );
             }
diff --git a/app/web/src/utils/script/mount.tsx b/app/web/src/utils/script/mount.tsx
index 30190cdd..9206e874 100644
--- a/app/web/src/utils/script/mount.tsx
+++ b/app/web/src/utils/script/mount.tsx
@@ -61,6 +61,7 @@ export const jsMount = async (editor: MonacoEditor, monaco: Monaco, p?: PG) => {
             const args = r.path.split("_");
             if (args.length === 4) {
               const { cur, id, meta } = extractLoc(args, p);
+              console.log(cur, id, meta.item.name);
             }
           }
         }
@@ -183,7 +184,7 @@ export const jsMount = async (editor: MonacoEditor, monaco: Monaco, p?: PG) => {
 export const extractLoc = (args: string[], p: PG) => {
   const [_cur, id, type, _varname] = args;
   const cur = _cur.substring(1);
-  const varname = _varname.substring(0, _varname.length - ".d.ts".length);
+  const varname = _varname.substring(0, _varname.length - ".tsx".length);
 
   let meta = p.page.meta[id];
   if (cur !== "page") {