feat(editor): add modal prompts for file/folder creation, improve Monaco editor reactivity and add TypeScript IntelliSense support

ts_web/elements/00group-editor/dees-editor-filetree/dees-editor-filetree.ts

@@ -14,6 +14,9 @@ import type { IExecutionEnvironment, IFileEntry } from '../../00group-runtime/in
 import '../../dees-icon/dees-icon.js';
 import '../../dees-contextmenu/dees-contextmenu.js';
 import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
+import { DeesModal } from '../../dees-modal/dees-modal.js';
+import '../../00group-input/dees-input-text/dees-input-text.js';
+import { DeesInputText } from '../../00group-input/dees-input-text/dees-input-text.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -411,8 +414,60 @@ export class DeesEditorFiletree extends DeesElement {
     await DeesContextmenu.openContextMenuWithOptions(e, menuItems);
   }
 
+  private async showInputModal(options: {
+    heading: string;
+    label: string;
+  }): Promise<string | null> {
+    return new Promise(async (resolve) => {
+      let inputValue = '';
+
+      const modal = await DeesModal.createAndShow({
+        heading: options.heading,
+        width: 'small',
+        content: html`
+          <dees-input-text
+            .label=${options.label}
+            @changeSubject=${(e: CustomEvent) => {
+              inputValue = (e.target as DeesInputText).value;
+            }}
+          ></dees-input-text>
+        `,
+        menuOptions: [
+          {
+            name: 'Cancel',
+            action: async (modalRef) => {
+              await modalRef.destroy();
+              resolve(null);
+            },
+          },
+          {
+            name: 'Create',
+            action: async (modalRef) => {
+              await modalRef.destroy();
+              resolve(inputValue.trim() || null);
+            },
+          },
+        ],
+      });
+
+      // Focus the input after modal renders
+      await modal.updateComplete;
+      const contentEl = modal.shadowRoot?.querySelector('.modal .content');
+      if (contentEl) {
+        const inputElement = contentEl.querySelector('dees-input-text') as DeesInputText | null;
+        if (inputElement) {
+          await inputElement.updateComplete;
+          inputElement.focus();
+        }
+      }
+    });
+  }
+
   private async createNewFile(parentPath: string) {
-    const fileName = prompt('Enter file name:');
+    const fileName = await this.showInputModal({
+      heading: 'New File',
+      label: 'File name',
+    });
     if (!fileName || !this.executionEnvironment) return;
 
     const newPath = parentPath === '/' ? `/${fileName}` : `${parentPath}/${fileName}`;
@@ -432,7 +487,10 @@ export class DeesEditorFiletree extends DeesElement {
   }
 
   private async createNewFolder(parentPath: string) {
-    const folderName = prompt('Enter folder name:');
+    const folderName = await this.showInputModal({
+      heading: 'New Folder',
+      label: 'Folder name',
+    });
     if (!folderName || !this.executionEnvironment) return;
 
     const newPath = parentPath === '/' ? `/${folderName}` : `${parentPath}/${folderName}`;