v3.16.0

changelog.md

@@ -1,5 +1,66 @@
 # Changelog
 
+## 2025-12-30 - 3.16.0 - feat(editor)
+improve TypeScript IntelliSense and module resolution for Monaco editor
+
+- Add file cache (fileCache) and getFileContent() for synchronous access to project files
+- Track and dispose Monaco extra libs (addedExtraLibs) and register project files via addExtraLib to enable TypeScript module resolution
+- Add addFileAsExtraLib logic to register .ts/.tsx files also under .js/.jsx paths so ESM imports resolve to TypeScript sources
+- Use ModuleResolutionKind.Bundler fallback to NodeJs and set compilerOptions (baseUrl '/', allowImportingTsExtensions, resolveJsonModule) to improve resolution
+- Adapt executionEnvironment API usage to readDir/readFile and check entry.type ('directory'|'file') instead of isDirectory/isFile
+- Add a debugging/screenshot asset: .playwright-mcp/module-resolution-fixed.png
+
+## 2025-12-30 - 3.15.0 - feat(editor)
+enable file-backed Monaco models and add Problems panel; lazy-init project TypeScript IntelliSense
+
+- dees-editor-monaco: add `filePath` property and create/get Monaco models with file:// URIs so editors are backed by real models; sync content into models and handle model switching when filePath changes; enable hover config and improved lifecycle handling.
+- dees-editor-workspace: add bottom 'Problems' panel and panel tabs (terminal/problems), diagnosticMarkers state, marker listener, UI for problem list, and navigation to file/position when a problem is clicked; initialize IntelliSense lazily when a file is opened.
+- typescript-intellisense: index project .ts/.js files from the virtual filesystem into Monaco models for cross-file resolution, enable allowNonTsExtensions and set eager model sync so TypeScript processes models eagerly.
+- General: improved handling for language changes, model language switching, and deferred initialization of the IntelliSense manager.
+- Add Playwright test images (workspace screenshots) used by CI/tests.
+
+## 2025-12-30 - 3.14.2 - fix(editor)
+bump monaco-editor to 0.55.1 and adapt TypeScript intellisense integration to the updated Monaco API
+
+- Bumped dependency monaco-editor from 0.52.2 to 0.55.1 in package.json.
+- Generated MONACO_VERSION module updated to 0.55.1 and moved target to ts_web/elements/00group-editor/dees-editor-monaco/version.ts.
+- Refactored TypeScript IntelliSense code to use a typed Monaco TS API (added IMonacoTypeScriptAPI, tsApi getter, and replaced direct monaco.languages.typescript.* calls).
+- Added test/workspace screenshot .playwright-mcp/workspace-test.png (binary asset).
+
+## 2025-12-30 - 3.14.1 - fix(build)
+bump @webcontainer/api and enable skipLibCheck to avoid type-check conflicts
+
+- Updated @webcontainer/api from 1.2.0 to 1.6.1
+- Added "skipLibCheck": true to tsconfig.json compilerOptions to suppress external library type errors
+- No breaking changes expected; this is a build/dev fix
+
+## 2025-12-30 - 3.14.0 - feat(editor)
+add modal prompts for file/folder creation, improve Monaco editor reactivity and add TypeScript IntelliSense support
+
+- Replace window.prompt for new file/folder with DeesModal + DeesInputText (showInputModal) to provide a focused modal input UX.
+- Monaco editor: add language property, handle external content updates without emitting change events (isUpdatingFromExternal), dispatch 'content-change' events, and apply language changes at runtime.
+- Add TypeScriptIntelliSenseManager to load .d.ts/type packages from the virtual filesystem (/node_modules), parse imports, load @types fallbacks, and add file models to Monaco for cross-file IntelliSense.
+- Workspace demo now mounts an initial TypeScript project and exposes initializationPromise to wait for external setup; workspace initializes IntelliSense and processes content changes to keep types up to date.
+- Export typescript-intellisense from workspace index so the manager is available to consumers.
+
+## 2025-12-30 - 3.13.1 - fix(webcontainer)
+prevent double initialization and race conditions when booting WebContainer and loading editor workspace/file tree
+
+- Add loadTreeStarted flag in dees-editor-filetree to avoid double-loading the file tree and reset it on refresh or on error to allow retries.
+- Add initializationStarted flag in dees-editor-workspace to prevent duplicate workspace initialization and reset it on initialization failure to allow retry.
+- Make WebContainerEnvironment use a shared singleton container and a bootPromise so only one WebContainer boot runs per page; instances wait for an ongoing boot instead of booting again.
+- Reset bootPromise/sharedContainer on boot failure and clear them on teardown so subsequent attempts can retry cleanly.
+
+## 2025-12-30 - 3.13.0 - feat(editor/runtime)
+Replace bare editor with Monaco-based editor and add runtime + workspace/filetree integration
+
+- Removed dees-editor-bare and replaced usages with dees-editor-monaco (includes MONACO_VERSION file).
+- Added IExecutionEnvironment interface and WebContainerEnvironment implementation (uses @webcontainer/api) to provide a browser Node/runtime API.
+- Added new components: dees-editor-filetree and dees-editor-workspace to support file tree, multiple open files, and workspace actions wired to the execution environment.
+- dees-terminal updated to accept an executionEnvironment (IExecutionEnvironment), renamed environment -> environmentVariables, provides environmentPromise (deprecated note), and now initializes/uses the provided environment to spawn shell processes and write /source.env.
+- Updated imports/usages across components (dees-input-code, dees-editor-markdown, group index exports) to use the new Monaco editor and runtime modules.
+- Behavioral breaking changes: consumers must supply an IExecutionEnvironment to components that now depend on it (e.g. dees-terminal, workspace, filetree); dees-editor-bare removal is a breaking API change.
+
 ## 2025-12-30 - 3.12.2 - fix(dees-editor-bare)
 make Monaco editor follow domtools theme and clean up theme subscription on disconnect
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.12.2",
+  "version": "3.16.0",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",
@@ -32,13 +32,13 @@
     "@tiptap/extension-underline": "^2.23.0",
     "@tiptap/starter-kit": "^2.23.0",
     "@tsclass/tsclass": "^9.3.0",
-    "@webcontainer/api": "1.2.0",
+    "@webcontainer/api": "1.6.1",
     "apexcharts": "^5.3.6",
     "highlight.js": "11.11.1",
     "ibantools": "^4.5.1",
     "lit": "^3.3.1",
     "lucide": "^0.562.0",
-    "monaco-editor": "0.52.2",
+    "monaco-editor": "0.55.1",
     "pdfjs-dist": "^4.10.38",
     "xterm": "^5.3.0",
     "xterm-addon-fit": "^0.8.0"

pnpm-lock.yaml

@@ -57,8 +57,8 @@ importers:
         specifier: ^9.3.0
         version: 9.3.0
       '@webcontainer/api':
-        specifier: 1.2.0
-        version: 1.2.0
+        specifier: 1.6.1
+        version: 1.6.1
       apexcharts:
         specifier: ^5.3.6
         version: 5.3.6
@@ -75,8 +75,8 @@ importers:
         specifier: ^0.562.0
         version: 0.562.0
       monaco-editor:
-        specifier: 0.52.2
-        version: 0.52.2
+        specifier: 0.55.1
+        version: 0.55.1
       pdfjs-dist:
         specifier: ^4.10.38
         version: 4.10.38
@@ -1760,6 +1760,9 @@ packages:
   '@webcontainer/api@1.2.0':
     resolution: {integrity: sha512-tzoKBd4lLdhHy5GHFpUkl+ndoSba8JqmB7x0ZQFnWfjbcbQOvKQfxA8MEMUYhgqjWHnbrWdAfnBEHz5f5lYG5A==}
 
+  '@webcontainer/api@1.6.1':
+    resolution: {integrity: sha512-2RS2KiIw32BY1Icf6M1DvqSmcon9XICZCDgS29QJb2NmF12ZY2V5Ia+949hMKB3Wno+P/Y8W+sPP59PZeXSELg==}
+
   '@yr/monotone-cubic-spline@1.0.3':
     resolution: {integrity: sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==}
 
@@ -2149,6 +2152,9 @@ packages:
     resolution: {integrity: sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==}
     engines: {node: '>=6'}
 
+  dompurify@3.2.7:
+    resolution: {integrity: sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==}
+
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
@@ -2771,6 +2777,11 @@ packages:
   markdown-table@3.0.4:
     resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
+  marked@14.0.0:
+    resolution: {integrity: sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==}
+    engines: {node: '>= 18'}
+    hasBin: true
+
   matcher@5.0.0:
     resolution: {integrity: sha512-s2EMBOWtXFc8dgqvoAzKJXxNHibcdJMV0gwqKUaw9E2JBJuGUK7DrNKrA6g/i+v72TT16+6sVm5mS3thaMLQUw==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -2981,6 +2992,9 @@ packages:
   monaco-editor@0.52.2:
     resolution: {integrity: sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==}
 
+  monaco-editor@0.55.1:
+    resolution: {integrity: sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==}
+
   mongodb-connection-string-url@3.0.2:
     resolution: {integrity: sha512-rMO7CGo/9BFwyZABcKAWL8UJwH/Kc2x0g72uhDWzG48URRax5TCIcJ7Rc3RZqffZzO/Gwff/jyKwCU9TN8gehA==}
 
@@ -6800,6 +6814,8 @@ snapshots:
 
   '@webcontainer/api@1.2.0': {}
 
+  '@webcontainer/api@1.6.1': {}
+
   '@yr/monotone-cubic-spline@1.0.3': {}
 
   accepts@1.3.8:
@@ -7168,6 +7184,10 @@ snapshots:
     dependencies:
       '@leichtgewicht/ip-codec': 2.0.5
 
+  dompurify@3.2.7:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
   dunder-proto@1.0.1:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -7887,6 +7907,8 @@ snapshots:
 
   markdown-table@3.0.4: {}
 
+  marked@14.0.0: {}
+
   matcher@5.0.0:
     dependencies:
       escape-string-regexp: 5.0.0
@@ -8268,6 +8290,11 @@ snapshots:
 
   monaco-editor@0.52.2: {}
 
+  monaco-editor@0.55.1:
+    dependencies:
+      dompurify: 3.2.7
+      marked: 14.0.0
+
   mongodb-connection-string-url@3.0.2:
     dependencies:
       '@types/whatwg-url': 11.0.5

scripts/update-monaco-version.cjs

@@ -26,7 +26,7 @@ function getMonacoVersion() {
 }
 
 function writeVersionModule(version) {
-  const targetDir = path.join(projectRoot, 'ts_web', 'elements', 'dees-editor');
+  const targetDir = path.join(projectRoot, 'ts_web', 'elements', '00group-editor', 'dees-editor-monaco');
   fs.mkdirSync(targetDir, { recursive: true });
   const targetFile = path.join(targetDir, 'version.ts');
   const fileContent = `// Auto-generated by scripts/update-monaco-version.cjs\nexport const MONACO_VERSION = '${version}';\n`;

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.12.2',
+  version: '3.16.0',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/00group-editor/dees-editor-bare/index.ts

@@ -1 +0,0 @@
-export * from './dees-editor-bare.js';

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

@@ -0,0 +1,596 @@
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  cssManager,
+  state,
+} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+import { themeDefaultStyles } from '../../00theme.js';
+import type { IExecutionEnvironment, IFileEntry } from '../../00group-runtime/index.js';
+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 {
+    'dees-editor-filetree': DeesEditorFiletree;
+  }
+}
+
+interface ITreeNode extends IFileEntry {
+  children?: ITreeNode[];
+  expanded?: boolean;
+  level: number;
+}
+
+@customElement('dees-editor-filetree')
+export class DeesEditorFiletree extends DeesElement {
+  public static demo = () => html`
+    <div style="width: 300px; height: 400px; position: relative;">
+      <dees-editor-filetree></dees-editor-filetree>
+    </div>
+  `;
+
+  // INSTANCE
+  @property({ type: Object })
+  accessor executionEnvironment: IExecutionEnvironment | null = null;
+
+  @property({ type: String })
+  accessor rootPath: string = '/';
+
+  @property({ type: String })
+  accessor selectedPath: string = '';
+
+  @state()
+  accessor treeData: ITreeNode[] = [];
+
+  @state()
+  accessor isLoading: boolean = false;
+
+  @state()
+  accessor errorMessage: string = '';
+
+  private expandedPaths: Set<string> = new Set();
+  private loadTreeStarted: boolean = false;
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow: auto;
+        background: ${cssManager.bdTheme('hsl(0 0% 98%)', 'hsl(0 0% 9%)')};
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-size: 13px;
+      }
+
+      .tree-container {
+        padding: 8px 0;
+      }
+
+      .tree-item {
+        display: flex;
+        align-items: center;
+        padding: 4px 8px;
+        cursor: pointer;
+        user-select: none;
+        border-radius: 4px;
+        margin: 1px 4px;
+        transition: background 0.1s ease;
+      }
+
+      .tree-item:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 14%)')};
+      }
+
+      .tree-item.selected {
+        background: ${cssManager.bdTheme('hsl(210 100% 95%)', 'hsl(210 50% 20%)')};
+        color: ${cssManager.bdTheme('hsl(210 100% 40%)', 'hsl(210 100% 70%)')};
+      }
+
+      .tree-item.selected:hover {
+        background: ${cssManager.bdTheme('hsl(210 100% 92%)', 'hsl(210 50% 25%)')};
+      }
+
+      .indent {
+        display: inline-block;
+        width: 16px;
+        flex-shrink: 0;
+      }
+
+      .expand-icon {
+        width: 16px;
+        height: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
+        transition: transform 0.15s ease;
+      }
+
+      .expand-icon.expanded {
+        transform: rotate(90deg);
+      }
+
+      .expand-icon.hidden {
+        visibility: hidden;
+      }
+
+      .file-icon {
+        width: 16px;
+        height: 16px;
+        margin-right: 6px;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .file-icon dees-icon {
+        width: 16px;
+        height: 16px;
+      }
+
+      .file-icon.folder {
+        color: ${cssManager.bdTheme('hsl(45 80% 45%)', 'hsl(45 70% 55%)')};
+      }
+
+      .file-icon.file {
+        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
+      }
+
+      .file-icon.typescript {
+        color: hsl(211 60% 48%);
+      }
+
+      .file-icon.javascript {
+        color: hsl(53 93% 54%);
+      }
+
+      .file-icon.json {
+        color: hsl(45 80% 50%);
+      }
+
+      .file-icon.html {
+        color: hsl(14 77% 52%);
+      }
+
+      .file-icon.css {
+        color: hsl(228 77% 59%);
+      }
+
+      .file-icon.markdown {
+        color: hsl(0 0% 50%);
+      }
+
+      .file-name {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 85%)')};
+      }
+
+      .loading {
+        padding: 16px;
+        text-align: center;
+        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
+      }
+
+      .error {
+        padding: 16px;
+        text-align: center;
+        color: hsl(0 70% 50%);
+      }
+
+      .empty {
+        padding: 16px;
+        text-align: center;
+        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
+        font-style: italic;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    if (!this.executionEnvironment) {
+      return html`
+        <div class="empty">
+          No execution environment provided.
+        </div>
+      `;
+    }
+
+    if (this.isLoading) {
+      return html`
+        <div class="loading">
+          Loading files...
+        </div>
+      `;
+    }
+
+    if (this.errorMessage) {
+      return html`
+        <div class="error">
+          ${this.errorMessage}
+        </div>
+      `;
+    }
+
+    if (this.treeData.length === 0) {
+      return html`
+        <div class="empty">
+          No files found.
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="tree-container">
+        ${this.renderTree(this.treeData)}
+      </div>
+    `;
+  }
+
+  private renderTree(nodes: ITreeNode[]): TemplateResult[] {
+    return nodes.map(node => this.renderNode(node));
+  }
+
+  private renderNode(node: ITreeNode): TemplateResult {
+    const isDirectory = node.type === 'directory';
+    const isExpanded = this.expandedPaths.has(node.path);
+    const isSelected = node.path === this.selectedPath;
+    const iconClass = this.getFileIconClass(node);
+
+    return html`
+      <div
+        class="tree-item ${isSelected ? 'selected' : ''}"
+        style="padding-left: ${8 + node.level * 16}px"
+        @click=${(e: MouseEvent) => this.handleItemClick(e, node)}
+        @contextmenu=${(e: MouseEvent) => this.handleContextMenu(e, node)}
+      >
+        <span class="expand-icon ${isExpanded ? 'expanded' : ''} ${!isDirectory ? 'hidden' : ''}">
+          <dees-icon .icon=${'lucide:chevronRight'} iconSize="12"></dees-icon>
+        </span>
+        <span class="file-icon ${iconClass}">
+          <dees-icon .icon=${this.getFileIcon(node)} iconSize="16"></dees-icon>
+        </span>
+        <span class="file-name">${node.name}</span>
+      </div>
+      ${isDirectory && isExpanded && node.children
+        ? this.renderTree(node.children)
+        : ''}
+    `;
+  }
+
+  private getFileIcon(node: ITreeNode): string {
+    if (node.type === 'directory') {
+      return this.expandedPaths.has(node.path) ? 'lucide:folderOpen' : 'lucide:folder';
+    }
+
+    const ext = node.name.split('.').pop()?.toLowerCase();
+    switch (ext) {
+      case 'ts':
+      case 'tsx':
+        return 'lucide:fileCode';
+      case 'js':
+      case 'jsx':
+        return 'lucide:fileCode';
+      case 'json':
+        return 'lucide:fileJson';
+      case 'html':
+        return 'lucide:fileCode';
+      case 'css':
+      case 'scss':
+      case 'less':
+        return 'lucide:fileCode';
+      case 'md':
+        return 'lucide:fileText';
+      case 'png':
+      case 'jpg':
+      case 'jpeg':
+      case 'gif':
+      case 'svg':
+        return 'lucide:image';
+      default:
+        return 'lucide:file';
+    }
+  }
+
+  private getFileIconClass(node: ITreeNode): string {
+    if (node.type === 'directory') return 'folder';
+
+    const ext = node.name.split('.').pop()?.toLowerCase();
+    switch (ext) {
+      case 'ts':
+      case 'tsx':
+        return 'typescript';
+      case 'js':
+      case 'jsx':
+        return 'javascript';
+      case 'json':
+        return 'json';
+      case 'html':
+        return 'html';
+      case 'css':
+      case 'scss':
+      case 'less':
+        return 'css';
+      case 'md':
+        return 'markdown';
+      default:
+        return 'file';
+    }
+  }
+
+  private async handleItemClick(e: MouseEvent, node: ITreeNode) {
+    e.stopPropagation();
+
+    if (node.type === 'directory') {
+      await this.toggleDirectory(node);
+    } else {
+      this.selectedPath = node.path;
+      this.dispatchEvent(
+        new CustomEvent('file-select', {
+          detail: { path: node.path, name: node.name },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    }
+  }
+
+  private async toggleDirectory(node: ITreeNode) {
+    if (this.expandedPaths.has(node.path)) {
+      this.expandedPaths.delete(node.path);
+    } else {
+      this.expandedPaths.add(node.path);
+      // Load children if not already loaded
+      if (!node.children || node.children.length === 0) {
+        await this.loadDirectoryContents(node);
+      }
+    }
+    this.requestUpdate();
+  }
+
+  private async loadDirectoryContents(node: ITreeNode) {
+    if (!this.executionEnvironment) return;
+
+    try {
+      const entries = await this.executionEnvironment.readDir(node.path);
+      node.children = this.sortEntries(entries).map(entry => ({
+        ...entry,
+        level: node.level + 1,
+        expanded: false,
+        children: entry.type === 'directory' ? [] : undefined,
+      }));
+    } catch (error) {
+      console.error(`Failed to load directory ${node.path}:`, error);
+    }
+  }
+
+  private async handleContextMenu(e: MouseEvent, node: ITreeNode) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const menuItems = [];
+
+    if (node.type === 'directory') {
+      menuItems.push(
+        {
+          name: 'New File',
+          iconName: 'lucide:filePlus',
+          action: async () => this.createNewFile(node.path),
+        },
+        {
+          name: 'New Folder',
+          iconName: 'lucide:folderPlus',
+          action: async () => this.createNewFolder(node.path),
+        },
+        { name: 'divider' }
+      );
+    }
+
+    menuItems.push({
+      name: 'Delete',
+      iconName: 'lucide:trash2',
+      action: async () => this.deleteItem(node),
+    });
+
+    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 = await this.showInputModal({
+      heading: 'New File',
+      label: 'File name',
+    });
+    if (!fileName || !this.executionEnvironment) return;
+
+    const newPath = parentPath === '/' ? `/${fileName}` : `${parentPath}/${fileName}`;
+    try {
+      await this.executionEnvironment.writeFile(newPath, '');
+      await this.refresh();
+      this.dispatchEvent(
+        new CustomEvent('file-created', {
+          detail: { path: newPath },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    } catch (error) {
+      console.error('Failed to create file:', error);
+    }
+  }
+
+  private async createNewFolder(parentPath: string) {
+    const folderName = await this.showInputModal({
+      heading: 'New Folder',
+      label: 'Folder name',
+    });
+    if (!folderName || !this.executionEnvironment) return;
+
+    const newPath = parentPath === '/' ? `/${folderName}` : `${parentPath}/${folderName}`;
+    try {
+      await this.executionEnvironment.mkdir(newPath);
+      await this.refresh();
+      this.dispatchEvent(
+        new CustomEvent('folder-created', {
+          detail: { path: newPath },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    } catch (error) {
+      console.error('Failed to create folder:', error);
+    }
+  }
+
+  private async deleteItem(node: ITreeNode) {
+    if (!this.executionEnvironment) return;
+
+    const confirmed = confirm(`Delete ${node.name}?`);
+    if (!confirmed) return;
+
+    try {
+      await this.executionEnvironment.rm(node.path, { recursive: node.type === 'directory' });
+      await this.refresh();
+      this.dispatchEvent(
+        new CustomEvent('item-deleted', {
+          detail: { path: node.path, type: node.type },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    } catch (error) {
+      console.error('Failed to delete item:', error);
+    }
+  }
+
+  public async firstUpdated() {
+    await this.loadTree();
+  }
+
+  public async updated(changedProperties: Map<string, any>) {
+    if (changedProperties.has('executionEnvironment') && this.executionEnvironment) {
+      await this.loadTree();
+    }
+  }
+
+  private async loadTree() {
+    if (!this.executionEnvironment) return;
+
+    // Prevent double loading on initial render
+    if (this.loadTreeStarted) return;
+    this.loadTreeStarted = true;
+
+    this.isLoading = true;
+    this.errorMessage = '';
+
+    try {
+      // Wait for environment to be ready
+      if (!this.executionEnvironment.ready) {
+        await this.executionEnvironment.init();
+      }
+
+      const entries = await this.executionEnvironment.readDir(this.rootPath);
+      this.treeData = this.sortEntries(entries).map(entry => ({
+        ...entry,
+        level: 0,
+        expanded: false,
+        children: entry.type === 'directory' ? [] : undefined,
+      }));
+    } catch (error) {
+      this.errorMessage = `Failed to load files: ${error}`;
+      console.error('Failed to load file tree:', error);
+      // Reset flag to allow retry
+      this.loadTreeStarted = false;
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  private sortEntries(entries: IFileEntry[]): IFileEntry[] {
+    return entries.sort((a, b) => {
+      // Directories first
+      if (a.type !== b.type) {
+        return a.type === 'directory' ? -1 : 1;
+      }
+      // Then alphabetically
+      return a.name.localeCompare(b.name);
+    });
+  }
+
+  public async refresh() {
+    this.expandedPaths.clear();
+    this.loadTreeStarted = false; // Reset to allow loading
+    await this.loadTree();
+  }
+
+  public selectFile(path: string) {
+    this.selectedPath = path;
+  }
+}

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

@@ -0,0 +1 @@
+export * from './dees-editor-filetree.js';

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

@@ -9,7 +9,7 @@ import {
   domtools
 } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
-import { DeesEditorBare } from '../dees-editor-bare/dees-editor-bare.js';
+import { DeesEditorMonaco } from '../dees-editor-monaco/dees-editor-monaco.js';
 
 const deferred = domtools.plugins.smartpromise.defer();
 
@@ -52,7 +52,7 @@ export class DeesEditorMarkdown extends DeesElement {
     return html`
       <div class="gridcontainer">
         <div class="editorContainer">
-          <dees-editor-bare
+          <dees-editor-monaco
             .language=${'markdown'}
             .content=${`# a test content
 
@@ -76,7 +76,7 @@ const hello = 'yes'
 \`\`\`
 `}
             wordWrap="bounded"
-          ></dees-editor-bare>
+          ></dees-editor-monaco>
         </div>
         <div class="outletContainer">
           <dees-editormarkdownoutlet></dees-editormarkdownoutlet>
@@ -87,7 +87,7 @@ const hello = 'yes'
 
   public async firstUpdated(_changedPropertiesArg) {
     await super.firstUpdated(_changedPropertiesArg);
-    const editor = this.shadowRoot.querySelector('dees-editor-bare') as DeesEditorBare;
+    const editor = this.shadowRoot.querySelector('dees-editor-monaco') as DeesEditorMonaco;
 
     // lets care about wiring the markdown stuff.
     const markdownOutlet = this.shadowRoot.querySelector('dees-editormarkdownoutlet');

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

@@ -15,27 +15,36 @@ import type * as monaco from 'monaco-editor';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dees-editor-bare': DeesEditorBare;
+    'dees-editor-monaco': DeesEditorMonaco;
   }
 }
 
-@customElement('dees-editor-bare')
-export class DeesEditorBare extends DeesElement {
+@customElement('dees-editor-monaco')
+export class DeesEditorMonaco extends DeesElement {
   // DEMO
-  public static demo = () => html` <dees-editor-bare></dees-editor-bare> `;
+  public static demo = () => html`<dees-editor-monaco></dees-editor-monaco>`;
 
   // STATIC
   public static monacoDeferred: ReturnType<typeof domtools.plugins.smartpromise.defer>;
 
   // INSTANCE
   public editorDeferred = domtools.plugins.smartpromise.defer<monaco.editor.IStandaloneCodeEditor>();
-  public language = 'typescript';
 
   @property({
     type: String
   })
   accessor content = "function hello() {\n\talert('Hello world!');\n}";
 
+  @property({
+    type: String
+  })
+  accessor language = 'typescript';
+
+  @property({
+    type: String
+  })
+  accessor filePath: string = '';
+
   @property({
     type: Object
   })
@@ -47,6 +56,7 @@ export class DeesEditorBare extends DeesElement {
   accessor wordWrap: monaco.editor.IStandaloneEditorConstructionOptions['wordWrap'] = 'off';
 
   private monacoThemeSubscription: domtools.plugins.smartrx.rxjs.Subscription | null = null;
+  private isUpdatingFromExternal: boolean = false;
 
   constructor() {
     super();
@@ -88,17 +98,17 @@ export class DeesEditorBare extends DeesElement {
     const container = this.shadowRoot.getElementById('container');
     const monacoCdnBase = `https://cdn.jsdelivr.net/npm/monaco-editor@${MONACO_VERSION}`;
 
-    if (!DeesEditorBare.monacoDeferred) {
-      DeesEditorBare.monacoDeferred = domtools.plugins.smartpromise.defer();
+    if (!DeesEditorMonaco.monacoDeferred) {
+      DeesEditorMonaco.monacoDeferred = domtools.plugins.smartpromise.defer();
       const scriptUrl = `${monacoCdnBase}/min/vs/loader.js`;
       const script = document.createElement('script');
       script.src = scriptUrl;
       script.onload = () => {
-        DeesEditorBare.monacoDeferred.resolve();
+        DeesEditorMonaco.monacoDeferred.resolve();
       };
       document.head.appendChild(script);
     }
-    await DeesEditorBare.monacoDeferred.promise;
+    await DeesEditorMonaco.monacoDeferred.promise;
 
     (window as any).require.config({
       paths: { vs: `${monacoCdnBase}/min/vs` },
@@ -109,14 +119,35 @@ export class DeesEditorBare extends DeesElement {
       const isBright = domtoolsInstance.themeManager.goBrightBoolean;
       const initialTheme = isBright ? 'vs' : 'vs-dark';
 
-      const editor = ((window as any).monaco.editor as typeof monaco.editor).create(container, {
-        value: this.content,
-        language: this.language,
+      const monacoInstance = (window as any).monaco as typeof monaco;
+
+      // Create or get model with proper file URI for TypeScript IntelliSense
+      let model: monaco.editor.ITextModel | null = null;
+      if (this.filePath) {
+        const uri = monacoInstance.Uri.parse(`file://${this.filePath}`);
+        model = monacoInstance.editor.getModel(uri);
+        if (!model) {
+          model = monacoInstance.editor.createModel(this.content, this.language, uri);
+        } else {
+          model.setValue(this.content);
+        }
+      }
+
+      const editor = (monacoInstance.editor as typeof monaco.editor).create(container, {
+        model: model || undefined,
+        value: model ? undefined : this.content,
+        language: model ? undefined : this.language,
         theme: initialTheme,
         useShadowDOM: true,
         fontSize: 16,
         automaticLayout: true,
-        wordWrap: this.wordWrap
+        wordWrap: this.wordWrap,
+        hover: {
+          enabled: true,
+          delay: 300,
+          sticky: true,
+          above: false,
+        },
       });
 
       // Subscribe to theme changes
@@ -138,11 +169,72 @@ export class DeesEditorBare extends DeesElement {
     // editor is setup let do the rest
     const editor = await this.editorDeferred.promise;
     editor.onDidChangeModelContent(async eventArg => {
-      this.contentSubject.next(editor.getValue());
+      // Don't emit events when we're programmatically updating the content
+      if (this.isUpdatingFromExternal) return;
+
+      const value = editor.getValue();
+      this.contentSubject.next(value);
+      this.dispatchEvent(new CustomEvent('content-change', {
+        detail: value,
+        bubbles: true,
+        composed: true,
+      }));
     });
     this.contentSubject.next(editor.getValue());
   }
 
+  public async updated(changedProperties: Map<string, any>): Promise<void> {
+    super.updated(changedProperties);
+
+    const monacoInstance = (window as any).monaco as typeof monaco;
+    if (!monacoInstance) return;
+
+    // Handle filePath changes - switch to different model
+    if (changedProperties.has('filePath') && this.filePath) {
+      const editor = await this.editorDeferred.promise;
+      const uri = monacoInstance.Uri.parse(`file://${this.filePath}`);
+      let model = monacoInstance.editor.getModel(uri);
+
+      if (!model) {
+        model = monacoInstance.editor.createModel(this.content, this.language, uri);
+      } else {
+        // Update model content if different
+        if (model.getValue() !== this.content) {
+          this.isUpdatingFromExternal = true;
+          model.setValue(this.content);
+          this.isUpdatingFromExternal = false;
+        }
+      }
+
+      // Switch editor to use this model
+      const currentModel = editor.getModel();
+      if (currentModel?.uri.toString() !== uri.toString()) {
+        editor.setModel(model);
+      }
+      return; // filePath change handles content too
+    }
+
+    // Handle content changes (when no filePath or filePath unchanged)
+    if (changedProperties.has('content')) {
+      const editor = await this.editorDeferred.promise;
+      const currentValue = editor.getValue();
+      if (currentValue !== this.content) {
+        this.isUpdatingFromExternal = true;
+        editor.setValue(this.content);
+        this.isUpdatingFromExternal = false;
+      }
+    }
+
+    // Handle language changes
+    if (changedProperties.has('language')) {
+      const editor = await this.editorDeferred.promise;
+      const model = editor.getModel();
+      if (model) {
+        monacoInstance.editor.setModelLanguage(model, this.language);
+      }
+    }
+  }
+
   public async disconnectedCallback(): Promise<void> {
     await super.disconnectedCallback();
     if (this.monacoThemeSubscription) {

ts_web/elements/00group-editor/dees-editor-monaco/index.ts

@@ -0,0 +1 @@
+export * from './dees-editor-monaco.js';

ts_web/elements/00group-editor/dees-editor-monaco/version.ts

@@ -1,2 +1,2 @@
 // Auto-generated by scripts/update-monaco-version.cjs
-export const MONACO_VERSION = '0.52.2';
+export const MONACO_VERSION = '0.55.1';

ts_web/elements/00group-editor/dees-editor-workspace/index.ts

@@ -0,0 +1,2 @@
+export * from './dees-editor-workspace.js';
+export * from './typescript-intellisense.js';

ts_web/elements/00group-editor/dees-editor-workspace/typescript-intellisense.ts

@@ -0,0 +1,362 @@
+import type * as monaco from 'monaco-editor';
+import type { IExecutionEnvironment } from '../../00group-runtime/index.js';
+
+// Monaco TypeScript API types (runtime API still exists, types deprecated in 0.55+)
+interface IExtraLibDisposable {
+  dispose(): void;
+}
+
+interface IMonacoTypeScriptAPI {
+  typescriptDefaults: {
+    setCompilerOptions(options: Record<string, unknown>): void;
+    setDiagnosticsOptions(options: Record<string, unknown>): void;
+    addExtraLib(content: string, filePath?: string): IExtraLibDisposable;
+    setEagerModelSync(value: boolean): void;
+  };
+  ScriptTarget: { ES2020: number };
+  ModuleKind: { ESNext: number };
+  ModuleResolutionKind: { NodeJs: number; Bundler?: number };
+}
+
+/**
+ * Manages TypeScript IntelliSense by loading type definitions
+ * from the virtual filesystem into Monaco.
+ */
+export class TypeScriptIntelliSenseManager {
+  private loadedLibs: Set<string> = new Set();
+  private monacoInstance: typeof monaco | null = null;
+  private executionEnvironment: IExecutionEnvironment | null = null;
+
+  // Cache of file contents for synchronous access and module resolution
+  private fileCache: Map<string, string> = new Map();
+
+  // Track extra libs added for cleanup
+  private addedExtraLibs: Map<string, IExtraLibDisposable> = new Map();
+
+  /**
+   * Get TypeScript API with proper typing for Monaco 0.55+
+   */
+  private get tsApi(): IMonacoTypeScriptAPI | null {
+    if (!this.monacoInstance) return null;
+    return (this.monacoInstance.languages as any).typescript as IMonacoTypeScriptAPI;
+  }
+
+  /**
+   * Initialize with Monaco and execution environment
+   */
+  public async init(
+    monacoInst: typeof monaco,
+    env: IExecutionEnvironment
+  ): Promise<void> {
+    this.monacoInstance = monacoInst;
+    this.executionEnvironment = env;
+    this.configureCompilerOptions();
+    // Load all project TypeScript/JavaScript files into Monaco for cross-file resolution
+    await this.loadAllProjectFiles();
+  }
+
+  /**
+   * Recursively load all .ts/.js files from the virtual filesystem into Monaco
+   */
+  private async loadAllProjectFiles(): Promise<void> {
+    if (!this.executionEnvironment) return;
+    await this.loadFilesFromDirectory('/');
+  }
+
+  /**
+   * Recursively load files from a directory
+   */
+  private async loadFilesFromDirectory(dirPath: string): Promise<void> {
+    if (!this.executionEnvironment) return;
+
+    try {
+      const entries = await this.executionEnvironment.readDir(dirPath);
+
+      for (const entry of entries) {
+        const fullPath = dirPath === '/' ? `/${entry.name}` : `${dirPath}/${entry.name}`;
+
+        // Skip node_modules - too large and handled separately via addExtraLib
+        if (entry.name === 'node_modules') continue;
+
+        if (entry.type === 'directory') {
+          await this.loadFilesFromDirectory(fullPath);
+        } else if (entry.type === 'file') {
+          const ext = entry.name.split('.').pop()?.toLowerCase();
+          if (ext === 'ts' || ext === 'tsx' || ext === 'js' || ext === 'jsx') {
+            try {
+              const content = await this.executionEnvironment.readFile(fullPath);
+              this.addFileModel(fullPath, content);
+            } catch {
+              // Ignore files that can't be read
+            }
+          }
+        }
+      }
+    } catch {
+      // Directory might not exist or not be readable
+    }
+  }
+
+  private configureCompilerOptions(): void {
+    const ts = this.tsApi;
+    if (!ts) return;
+
+    ts.typescriptDefaults.setCompilerOptions({
+      target: ts.ScriptTarget.ES2020,
+      module: ts.ModuleKind.ESNext,
+      // Use Bundler resolution if available (Monaco 0.45+), fallback to NodeJs
+      moduleResolution: ts.ModuleResolutionKind.Bundler ?? ts.ModuleResolutionKind.NodeJs,
+      allowSyntheticDefaultImports: true,
+      esModuleInterop: true,
+      strict: true,
+      noEmit: true,
+      allowJs: true,
+      checkJs: false,
+      allowNonTsExtensions: true,
+      lib: ['es2020', 'dom', 'dom.iterable'],
+      // Set baseUrl to root for resolving absolute imports
+      baseUrl: '/',
+      // Allow importing .ts extensions directly (useful for some setups)
+      allowImportingTsExtensions: true,
+      // Resolve JSON modules
+      resolveJsonModule: true,
+    });
+
+    ts.typescriptDefaults.setDiagnosticsOptions({
+      noSemanticValidation: false,
+      noSyntaxValidation: false,
+    });
+
+    // Enable eager model sync so TypeScript immediately processes all models
+    // This is critical for cross-file IntelliSense to work without requiring edits
+    ts.typescriptDefaults.setEagerModelSync(true);
+  }
+
+  /**
+   * Parse imports from TypeScript/JavaScript content
+   */
+  public parseImports(content: string): string[] {
+    const imports: string[] = [];
+
+    // Match ES6 imports: import { x } from 'package' or import 'package'
+    const importRegex = /import\s+(?:[\w*{}\s,]+from\s+)?['"]([^'"]+)['"]/g;
+    let match: RegExpExecArray | null;
+
+    while ((match = importRegex.exec(content)) !== null) {
+      const importPath = match[1];
+      // Only process non-relative imports (npm packages)
+      if (!importPath.startsWith('.') && !importPath.startsWith('/')) {
+        const packageName = importPath.startsWith('@')
+          ? importPath.split('/').slice(0, 2).join('/') // @scope/package
+          : importPath.split('/')[0]; // package
+        imports.push(packageName);
+      }
+    }
+
+    // Match require calls: require('package')
+    const requireRegex = /require\s*\(\s*['"]([^'"]+)['"]\s*\)/g;
+    while ((match = requireRegex.exec(content)) !== null) {
+      const importPath = match[1];
+      if (!importPath.startsWith('.') && !importPath.startsWith('/')) {
+        const packageName = importPath.startsWith('@')
+          ? importPath.split('/').slice(0, 2).join('/')
+          : importPath.split('/')[0];
+        imports.push(packageName);
+      }
+    }
+
+    return [...new Set(imports)];
+  }
+
+  /**
+   * Load type definitions for a package from virtual FS
+   */
+  public async loadTypesForPackage(packageName: string): Promise<void> {
+    if (!this.monacoInstance || !this.executionEnvironment) return;
+    if (this.loadedLibs.has(packageName)) return;
+
+    try {
+      const typesLoaded = await this.tryLoadPackageTypes(packageName);
+      if (!typesLoaded) {
+        await this.tryLoadAtTypesPackage(packageName);
+      }
+      this.loadedLibs.add(packageName);
+    } catch (error) {
+      console.warn(`Failed to load types for ${packageName}:`, error);
+    }
+  }
+
+  private async tryLoadPackageTypes(packageName: string): Promise<boolean> {
+    const ts = this.tsApi;
+    if (!this.executionEnvironment || !ts) return false;
+
+    const basePath = `/node_modules/${packageName}`;
+
+    try {
+      // Check package.json for types field
+      const packageJsonPath = `${basePath}/package.json`;
+      if (await this.executionEnvironment.exists(packageJsonPath)) {
+        const packageJson = JSON.parse(
+          await this.executionEnvironment.readFile(packageJsonPath)
+        );
+
+        const typesPath = packageJson.types || packageJson.typings;
+        if (typesPath) {
+          const fullTypesPath = `${basePath}/${typesPath}`;
+          if (await this.executionEnvironment.exists(fullTypesPath)) {
+            const content = await this.executionEnvironment.readFile(fullTypesPath);
+            ts.typescriptDefaults.addExtraLib(
+              content,
+              `file://${fullTypesPath}`
+            );
+            return true;
+          }
+        }
+      }
+
+      // Try common locations
+      const commonPaths = [
+        `${basePath}/index.d.ts`,
+        `${basePath}/dist/index.d.ts`,
+        `${basePath}/lib/index.d.ts`,
+      ];
+
+      for (const dtsPath of commonPaths) {
+        if (await this.executionEnvironment.exists(dtsPath)) {
+          const content = await this.executionEnvironment.readFile(dtsPath);
+          ts.typescriptDefaults.addExtraLib(
+            content,
+            `file://${dtsPath}`
+          );
+          return true;
+        }
+      }
+
+      return false;
+    } catch {
+      return false;
+    }
+  }
+
+  private async tryLoadAtTypesPackage(packageName: string): Promise<boolean> {
+    const ts = this.tsApi;
+    if (!this.executionEnvironment || !ts) return false;
+
+    // Handle scoped packages: @scope/package -> @types/scope__package
+    const typesPackageName = packageName.startsWith('@')
+      ? `@types/${packageName.slice(1).replace('/', '__')}`
+      : `@types/${packageName}`;
+
+    const basePath = `/node_modules/${typesPackageName}`;
+
+    try {
+      const indexPath = `${basePath}/index.d.ts`;
+      if (await this.executionEnvironment.exists(indexPath)) {
+        const content = await this.executionEnvironment.readFile(indexPath);
+        ts.typescriptDefaults.addExtraLib(
+          content,
+          `file://${indexPath}`
+        );
+        return true;
+      }
+      return false;
+    } catch {
+      return false;
+    }
+  }
+
+  /**
+   * Process content change and load types for any new imports
+   */
+  public async processContentChange(content: string): Promise<void> {
+    const imports = this.parseImports(content);
+    for (const packageName of imports) {
+      await this.loadTypesForPackage(packageName);
+    }
+  }
+
+  /**
+   * Add a file model to Monaco for cross-file IntelliSense
+   * Also registers the file with TypeScript via addExtraLib for module resolution
+   */
+  public addFileModel(path: string, content: string): void {
+    if (!this.monacoInstance) return;
+
+    // Cache the content for sync access
+    this.fileCache.set(path, content);
+
+    // Create/update the editor model
+    const uri = this.monacoInstance.Uri.parse(`file://${path}`);
+    const existingModel = this.monacoInstance.editor.getModel(uri);
+
+    if (existingModel) {
+      existingModel.setValue(content);
+    } else {
+      const language = this.getLanguageFromPath(path);
+      this.monacoInstance.editor.createModel(content, language, uri);
+    }
+
+    // Also add as extra lib for TypeScript module resolution
+    // This is critical - TypeScript's resolver uses extra libs, not editor models
+    this.addFileAsExtraLib(path, content);
+  }
+
+  /**
+   * Add a file as an extra lib for TypeScript module resolution.
+   * This enables TypeScript to resolve imports to project files.
+   */
+  private addFileAsExtraLib(path: string, content: string): void {
+    const ts = this.tsApi;
+    if (!ts) return;
+
+    // Dispose existing lib if present (for updates)
+    const existing = this.addedExtraLibs.get(path);
+    if (existing) {
+      existing.dispose();
+    }
+
+    // Add the file with its actual path
+    const filePath = `file://${path}`;
+    const disposable = ts.typescriptDefaults.addExtraLib(content, filePath);
+    this.addedExtraLibs.set(path, disposable);
+
+    // For .ts files, also add with .js extension to handle ESM imports
+    // (e.g., import from './utils.js' should resolve to ./utils.ts)
+    if (path.endsWith('.ts') && !path.endsWith('.d.ts')) {
+      const jsPath = path.replace(/\.ts$/, '.js');
+      const jsFilePath = `file://${jsPath}`;
+      const jsDisposable = ts.typescriptDefaults.addExtraLib(content, jsFilePath);
+      this.addedExtraLibs.set(jsPath, jsDisposable);
+      this.fileCache.set(jsPath, content);
+    } else if (path.endsWith('.tsx')) {
+      const jsxPath = path.replace(/\.tsx$/, '.jsx');
+      const jsxFilePath = `file://${jsxPath}`;
+      const jsxDisposable = ts.typescriptDefaults.addExtraLib(content, jsxFilePath);
+      this.addedExtraLibs.set(jsxPath, jsxDisposable);
+      this.fileCache.set(jsxPath, content);
+    }
+  }
+
+  /**
+   * Get cached file content for synchronous access
+   */
+  public getFileContent(path: string): string | undefined {
+    return this.fileCache.get(path);
+  }
+
+  private getLanguageFromPath(path: string): string {
+    const ext = path.split('.').pop()?.toLowerCase();
+    switch (ext) {
+      case 'ts':
+      case 'tsx':
+        return 'typescript';
+      case 'js':
+      case 'jsx':
+        return 'javascript';
+      case 'json':
+        return 'json';
+      default:
+        return 'plaintext';
+    }
+  }
+}

ts_web/elements/00group-editor/index.ts

@@ -1,4 +1,6 @@
 // Editor Components
-export * from './dees-editor-bare/index.js';
+export * from './dees-editor-monaco/index.js';
+export * from './dees-editor-filetree/index.js';
+export * from './dees-editor-workspace/index.js';
 export * from './dees-editor-markdown/index.js';
 export * from './dees-editor-markdownoutlet/index.js';

ts_web/elements/00group-input/dees-input-code/dees-input-code.ts

@@ -12,8 +12,8 @@ import { themeDefaultStyles } from '../../00theme.js';
 import { DeesModal } from '../../dees-modal/dees-modal.js';
 import '../../dees-icon/dees-icon.js';
 import '../../dees-label/dees-label.js';
-import '../../00group-editor/dees-editor-bare/dees-editor-bare.js';
-import { DeesEditorBare } from '../../00group-editor/dees-editor-bare/dees-editor-bare.js';
+import '../../00group-editor/dees-editor-monaco/dees-editor-monaco.js';
+import { DeesEditorMonaco } from '../../00group-editor/dees-editor-monaco/dees-editor-monaco.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -77,7 +77,7 @@ export class DeesInputCode extends DeesInputBase<string> {
   @state()
   accessor copySuccess: boolean = false;
 
-  private editorElement: DeesEditorBare | null = null;
+  private editorElement: DeesEditorMonaco | null = null;
 
   public static styles = [
     themeDefaultStyles,
@@ -207,7 +207,7 @@ export class DeesInputCode extends DeesInputBase<string> {
         position: relative;
       }
 
-      dees-editor-bare {
+      dees-editor-monaco {
         display: block;
       }
 
@@ -295,12 +295,12 @@ export class DeesInputCode extends DeesInputBase<string> {
             </div>
           </div>
           <div class="editor-wrapper">
-            <dees-editor-bare
+            <dees-editor-monaco
               .content=${this.value}
               .language=${this.language}
               .wordWrap=${this.wordWrap}
               @content-change=${this.handleContentChange}
-            ></dees-editor-bare>
+            ></dees-editor-monaco>
           </div>
         </div>
       </div>
@@ -308,7 +308,7 @@ export class DeesInputCode extends DeesInputBase<string> {
   }
 
   async firstUpdated() {
-    this.editorElement = this.shadowRoot?.querySelector('dees-editor-bare') as DeesEditorBare;
+    this.editorElement = this.shadowRoot?.querySelector('dees-editor-monaco') as DeesEditorMonaco;
     if (this.editorElement) {
       // Subscribe to content changes from the editor
       this.editorElement.contentSubject.subscribe((newContent: string) => {
@@ -386,7 +386,7 @@ export class DeesInputCode extends DeesInputBase<string> {
 
   public async openFullscreen() {
     const currentValue = this.value;
-    let modalEditorElement: DeesEditorBare | null = null;
+    let modalEditorElement: DeesEditorMonaco | null = null;
 
     // Modal-specific state
     let modalLanguage = this.language;
@@ -579,11 +579,11 @@ export class DeesInputCode extends DeesInputBase<string> {
           </div>
         </div>
         <div class="modal-editor-wrapper">
-          <dees-editor-bare
+          <dees-editor-monaco
             .content=${currentValue}
             .language=${modalLanguage}
             .wordWrap=${modalWordWrap}
-          ></dees-editor-bare>
+          ></dees-editor-monaco>
         </div>
       `,
       menuOptions: [
@@ -597,7 +597,7 @@ export class DeesInputCode extends DeesInputBase<string> {
           name: 'Save & Close',
           action: async (modalRef) => {
             // Get the editor content from the modal
-            modalEditorElement = modalRef.shadowRoot?.querySelector('dees-editor-bare') as DeesEditorBare;
+            modalEditorElement = modalRef.shadowRoot?.querySelector('dees-editor-monaco') as DeesEditorMonaco;
             if (modalEditorElement) {
               const editor = await modalEditorElement.editorDeferred.promise;
               const newValue = editor.getValue();
@@ -611,7 +611,7 @@ export class DeesInputCode extends DeesInputBase<string> {
 
     // Wait for modal to render
     await new Promise(resolve => setTimeout(resolve, 100));
-    modalEditorElement = modal.shadowRoot?.querySelector('dees-editor-bare') as DeesEditorBare;
+    modalEditorElement = modal.shadowRoot?.querySelector('dees-editor-monaco') as DeesEditorMonaco;
 
     // Wire up toolbar event handlers
     const toolbar = modal.shadowRoot?.querySelector('.modal-toolbar');

ts_web/elements/00group-runtime/environments/WebContainerEnvironment.ts

@@ -0,0 +1,169 @@
+import * as webcontainer from '@webcontainer/api';
+import type { IExecutionEnvironment, IFileEntry, IProcessHandle } from '../interfaces/IExecutionEnvironment.js';
+
+/**
+ * WebContainer-based execution environment.
+ * Runs Node.js and shell commands in the browser using WebContainer API.
+ */
+export class WebContainerEnvironment implements IExecutionEnvironment {
+  // Static shared state - WebContainer only allows ONE boot per page
+  private static sharedContainer: webcontainer.WebContainer | null = null;
+  private static bootPromise: Promise<webcontainer.WebContainer> | null = null;
+
+  private _ready: boolean = false;
+
+  public readonly type = 'webcontainer' as const;
+
+  public get ready(): boolean {
+    return this._ready;
+  }
+
+  private get container(): webcontainer.WebContainer | null {
+    return WebContainerEnvironment.sharedContainer;
+  }
+
+  // ============ Lifecycle ============
+
+  public async init(): Promise<void> {
+    // Already initialized (this instance)
+    if (this._ready && WebContainerEnvironment.sharedContainer) {
+      return;
+    }
+
+    // If boot is in progress (by any instance), wait for it
+    if (WebContainerEnvironment.bootPromise) {
+      await WebContainerEnvironment.bootPromise;
+      this._ready = true;
+      return;
+    }
+
+    // If already booted by another instance, just mark ready
+    if (WebContainerEnvironment.sharedContainer) {
+      this._ready = true;
+      return;
+    }
+
+    // Check if SharedArrayBuffer is available (required for WebContainer)
+    if (typeof SharedArrayBuffer === 'undefined') {
+      throw new Error(
+        'WebContainer requires SharedArrayBuffer which is not available. ' +
+        'Ensure your server sends these headers:\n' +
+        '  Cross-Origin-Opener-Policy: same-origin\n' +
+        '  Cross-Origin-Embedder-Policy: require-corp'
+      );
+    }
+
+    // Start boot process
+    WebContainerEnvironment.bootPromise = webcontainer.WebContainer.boot();
+
+    try {
+      WebContainerEnvironment.sharedContainer = await WebContainerEnvironment.bootPromise;
+      this._ready = true;
+    } catch (error) {
+      // Reset promise on failure so retry is possible
+      WebContainerEnvironment.bootPromise = null;
+      throw error;
+    }
+  }
+
+  public async destroy(): Promise<void> {
+    if (WebContainerEnvironment.sharedContainer) {
+      WebContainerEnvironment.sharedContainer.teardown();
+      WebContainerEnvironment.sharedContainer = null;
+      WebContainerEnvironment.bootPromise = null;
+      this._ready = false;
+    }
+  }
+
+  // ============ Filesystem Operations ============
+
+  public async readFile(path: string): Promise<string> {
+    this.ensureReady();
+    return await this.container!.fs.readFile(path, 'utf-8');
+  }
+
+  public async writeFile(path: string, contents: string): Promise<void> {
+    this.ensureReady();
+    await this.container!.fs.writeFile(path, contents, 'utf-8');
+  }
+
+  public async readDir(path: string): Promise<IFileEntry[]> {
+    this.ensureReady();
+    const entries = await this.container!.fs.readdir(path, { withFileTypes: true });
+
+    return entries.map((entry) => ({
+      type: entry.isDirectory() ? 'directory' as const : 'file' as const,
+      name: entry.name,
+      path: path === '/' ? `/${entry.name}` : `${path}/${entry.name}`,
+    }));
+  }
+
+  public async mkdir(path: string): Promise<void> {
+    this.ensureReady();
+    await this.container!.fs.mkdir(path, { recursive: true });
+  }
+
+  public async rm(path: string, options?: { recursive?: boolean }): Promise<void> {
+    this.ensureReady();
+    await this.container!.fs.rm(path, { recursive: options?.recursive ?? false });
+  }
+
+  public async exists(path: string): Promise<boolean> {
+    this.ensureReady();
+    try {
+      await this.container!.fs.readFile(path);
+      return true;
+    } catch {
+      try {
+        await this.container!.fs.readdir(path);
+        return true;
+      } catch {
+        return false;
+      }
+    }
+  }
+
+  // ============ Process Execution ============
+
+  public async spawn(command: string, args: string[] = []): Promise<IProcessHandle> {
+    this.ensureReady();
+
+    const process = await this.container!.spawn(command, args);
+
+    return {
+      output: process.output as unknown as ReadableStream<string>,
+      input: process.input as unknown as { getWriter(): WritableStreamDefaultWriter<string> },
+      exit: process.exit,
+      kill: () => process.kill(),
+    };
+  }
+
+  // ============ WebContainer-specific methods ============
+
+  /**
+   * Mount files into the virtual filesystem.
+   * This is a WebContainer-specific operation.
+   * @param files - File tree structure to mount
+   */
+  public async mount(files: webcontainer.FileSystemTree): Promise<void> {
+    this.ensureReady();
+    await this.container!.mount(files);
+  }
+
+  /**
+   * Get the underlying WebContainer instance.
+   * Use sparingly - prefer the interface methods.
+   */
+  public getContainer(): webcontainer.WebContainer {
+    this.ensureReady();
+    return this.container!;
+  }
+
+  // ============ Private Helpers ============
+
+  private ensureReady(): void {
+    if (!this._ready || !this.container) {
+      throw new Error('WebContainerEnvironment not initialized. Call init() first.');
+    }
+  }
+}

ts_web/elements/00group-runtime/environments/index.ts

@@ -0,0 +1 @@
+export * from './WebContainerEnvironment.js';

ts_web/elements/00group-runtime/index.ts

@@ -0,0 +1,5 @@
+// Runtime Interfaces
+export * from './interfaces/index.js';
+
+// Environment Implementations
+export * from './environments/index.js';

ts_web/elements/00group-runtime/interfaces/IExecutionEnvironment.ts

@@ -0,0 +1,101 @@
+/**
+ * Represents a file or directory entry in the virtual filesystem
+ */
+export interface IFileEntry {
+  type: 'file' | 'directory';
+  name: string;
+  path: string;
+}
+
+/**
+ * Handle to a spawned process with I/O streams
+ */
+export interface IProcessHandle {
+  /** Stream of output data from the process */
+  output: ReadableStream<string>;
+  /** Input stream to write data to the process */
+  input: { getWriter(): WritableStreamDefaultWriter<string> };
+  /** Promise that resolves with exit code when process terminates */
+  exit: Promise<number>;
+  /** Kill the process */
+  kill(): void;
+}
+
+/**
+ * Abstract execution environment interface.
+ * Implementations can target WebContainer (browser), Backend API (server), or Mock (testing).
+ */
+export interface IExecutionEnvironment {
+  // ============ Filesystem Operations ============
+
+  /**
+   * Read the contents of a file
+   * @param path - Absolute path to the file
+   * @returns File contents as string
+   */
+  readFile(path: string): Promise<string>;
+
+  /**
+   * Write contents to a file (creates or overwrites)
+   * @param path - Absolute path to the file
+   * @param contents - String contents to write
+   */
+  writeFile(path: string, contents: string): Promise<void>;
+
+  /**
+   * List contents of a directory
+   * @param path - Absolute path to the directory
+   * @returns Array of file entries
+   */
+  readDir(path: string): Promise<IFileEntry[]>;
+
+  /**
+   * Create a directory (and parent directories if needed)
+   * @param path - Absolute path to create
+   */
+  mkdir(path: string): Promise<void>;
+
+  /**
+   * Remove a file or directory
+   * @param path - Absolute path to remove
+   * @param options - Optional: { recursive: true } for directories
+   */
+  rm(path: string, options?: { recursive?: boolean }): Promise<void>;
+
+  /**
+   * Check if a path exists
+   * @param path - Absolute path to check
+   */
+  exists(path: string): Promise<boolean>;
+
+  // ============ Process Execution ============
+
+  /**
+   * Spawn a new process
+   * @param command - Command to run (e.g., 'jsh', 'node', 'npm')
+   * @param args - Optional arguments
+   * @returns Process handle with I/O streams
+   */
+  spawn(command: string, args?: string[]): Promise<IProcessHandle>;
+
+  // ============ Lifecycle ============
+
+  /**
+   * Initialize the environment (e.g., boot WebContainer)
+   * Must be called before any other operations
+   */
+  init(): Promise<void>;
+
+  /**
+   * Destroy the environment and clean up resources
+   */
+  destroy(): Promise<void>;
+
+  // ============ State ============
+
+  /** Whether the environment has been initialized and is ready */
+  readonly ready: boolean;
+
+  /** Type identifier for the environment implementation */
+  readonly type: 'webcontainer' | 'backend' | 'mock';
+}

ts_web/elements/00group-runtime/interfaces/index.ts

@@ -0,0 +1 @@
+export * from './IExecutionEnvironment.js';

ts_web/elements/dees-terminal/dees-terminal.ts

@@ -9,11 +9,11 @@ import {
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 
-import * as webcontainer from '@webcontainer/api';
-
 import { Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
 import { themeDefaultStyles } from '../00theme.js';
+import type { IExecutionEnvironment } from '../00group-runtime/index.js';
+import { WebContainerEnvironment } from '../00group-runtime/index.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -23,28 +23,39 @@ declare global {
 
 @customElement('dees-terminal')
 export class DeesTerminal extends DeesElement {
-  public static demo = () => html` <dees-terminal
-    .environment=${{
-      NODE_ENV: 'development',
-      PORT: '3000',
-    }}
-  ></dees-terminal> `;
+  public static demo = () => {
+    const env = new WebContainerEnvironment();
+    return html`<dees-terminal .executionEnvironment=${env}></dees-terminal>`;
+  };
 
   // INSTANCE
   private resizeObserver: ResizeObserver;
 
+  /**
+   * The execution environment (required).
+   * Use WebContainerEnvironment for browser-based execution.
+   */
+  @property({ type: Object })
+  accessor executionEnvironment: IExecutionEnvironment | null = null;
+
   @property()
   accessor setupCommand = `pnpm install @serve.zone/cli && servezone cli\n`;
 
+  /**
+   * Environment variables to set in the shell
+   */
   @property()
-  accessor environment: {[key: string]: string} = {};
+  accessor environmentVariables: { [key: string]: string } = {};
 
   @property()
   accessor background: string = '#000000';
 
-  // exposing webcontainer
-  private webcontainerDeferred = new domtools.plugins.smartpromise.Deferred<webcontainer.WebContainer>();
-  public webcontainerPromise = this.webcontainerDeferred.promise;
+  /**
+   * Promise that resolves when the environment is ready.
+   * @deprecated Use executionEnvironment directly
+   */
+  private environmentDeferred = new domtools.plugins.smartpromise.Deferred<IExecutionEnvironment>();
+  public environmentPromise = this.environmentDeferred.promise;
 
   constructor() {
     super();
@@ -262,6 +273,8 @@ export class DeesTerminal extends DeesElement {
   }
 
   private fitAddon: FitAddon;
+  private terminal: Terminal | null = null;
+
   public async firstUpdated(
     _changedProperties: Map<string | number | symbol, unknown>
   ): Promise<void> {
@@ -280,6 +293,7 @@ export class DeesTerminal extends DeesElement {
         background: this.background,
       },
     });
+    this.terminal = term;
     this.fitAddon = new FitAddon();
     term.loadAddon(this.fitAddon);
 
@@ -289,12 +303,48 @@ export class DeesTerminal extends DeesElement {
     // Make the terminal's size and geometry fit the size of #terminal-container
     this.fitAddon.fit();
 
-    term.write(`dees-terminal custom terminal. \r\n$ `);
+    // Check if execution environment is provided
+    if (!this.executionEnvironment) {
+      term.write('\x1b[31m');  // Red color
+      term.write('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\r\n');
+      term.write('  ❌ No execution environment provided.\r\n');
+      term.write('\r\n');
+      term.write('  Pass an IExecutionEnvironment via the\r\n');
+      term.write('  \'executionEnvironment\' property.\r\n');
+      term.write('\r\n');
+      term.write('  Example:\r\n');
+      term.write('    const env = new WebContainerEnvironment();\r\n');
+      term.write('    <dees-terminal .executionEnvironment=${env}>\r\n');
+      term.write('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\r\n');
+      term.write('\x1b[0m');  // Reset color
+      return;
+    }
 
-    // lets start the webcontainer
-    // Call only once
-    const webcontainerInstance = await webcontainer.WebContainer.boot();
-    const shellProcess = await webcontainerInstance.spawn('jsh');
+    term.write('Initializing execution environment...\r\n');
+
+    // Initialize the execution environment
+    try {
+      await this.executionEnvironment.init();
+      term.write('Environment ready. Starting shell...\r\n');
+    } catch (error) {
+      term.write('\x1b[31m');  // Red color
+      term.write(`\r\n❌ Failed to initialize environment: ${error}\r\n`);
+      term.write('\x1b[0m');  // Reset color
+      console.error('Failed to initialize execution environment:', error);
+      return;
+    }
+
+    // Spawn shell process
+    let shellProcess;
+    try {
+      shellProcess = await this.executionEnvironment.spawn('jsh');
+    } catch (error) {
+      term.write('\x1b[31m');  // Red color
+      term.write(`\r\n❌ Failed to spawn shell: ${error}\r\n`);
+      term.write('\x1b[0m');  // Reset color
+      console.error('Failed to spawn shell:', error);
+      return;
+    }
     shellProcess.output.pipeTo(
       new WritableStream({
         write(data) {
@@ -306,16 +356,24 @@ export class DeesTerminal extends DeesElement {
     term.onData((data) => {
       input.write(data);
     });
+
     await this.waitForPrompt(term, '~/');
-    // lets set the environment variables
-    await this.setEnvironmentVariables(this.environment, webcontainerInstance);
-    input.write(`source source.env\n`);
-    await this.waitForPrompt(term, '~/');
-    // lets run the setup command
-    input.write(this.setupCommand);
-    await this.waitForPrompt(term, '~/');
-    input.write(`clear && echo 'welcome'\n`);
-    this.webcontainerDeferred.resolve(webcontainerInstance);
+
+    // Set environment variables if provided
+    if (Object.keys(this.environmentVariables).length > 0) {
+      await this.setEnvironmentVariables(this.environmentVariables);
+      input.write(`source source.env\n`);
+      await this.waitForPrompt(term, '~/');
+    }
+
+    // Run setup command if provided
+    if (this.setupCommand) {
+      input.write(this.setupCommand);
+      await this.waitForPrompt(term, '~/');
+    }
+
+    input.write(`clear && echo 'Terminal ready.'\n`);
+    this.environmentDeferred.resolve(this.executionEnvironment);
   }
 
   async connectedCallback(): Promise<void> {
@@ -352,17 +410,25 @@ export class DeesTerminal extends DeesElement {
     });
   }
 
-  public async setEnvironmentVariables(envArg: {[key: string]: string}, webcontainerInstanceArg?: webcontainer.WebContainer) {
-    const webcontainerInstance = webcontainerInstanceArg ||await this.webcontainerPromise;
-    let envFile = ``
-    for (const key in envArg) { 
+  public async setEnvironmentVariables(envArg: { [key: string]: string }): Promise<void> {
+    if (!this.executionEnvironment) {
+      throw new Error('No execution environment available');
+    }
+
+    let envFile = '';
+    for (const key in envArg) {
       envFile += `export ${key}="${envArg[key]}"\n`;
     }
 
-    await webcontainerInstance.mount({'source.env': {
-      file: {
-        contents: envFile,
-      }
-    }});
+    // Write the environment file using the filesystem API
+    await this.executionEnvironment.writeFile('/source.env', envFile);
+  }
+
+  /**
+   * Get the underlying execution environment.
+   * Useful for advanced operations like filesystem access.
+   */
+  public getExecutionEnvironment(): IExecutionEnvironment | null {
+    return this.executionEnvironment;
   }
 }

ts_web/elements/index.ts

@@ -10,6 +10,7 @@ export * from './00group-editor/index.js';
 export * from './00group-form/index.js';
 export * from './00group-input/index.js';
 export * from './00group-pdf/index.js';
+export * from './00group-runtime/index.js';
 export * from './00group-simple/index.js';
 
 // Standalone Components

tsconfig.json

@@ -4,7 +4,8 @@
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "esModuleInterop": true,
-    "verbatimModuleSyntax": true
+    "verbatimModuleSyntax": true,
+    "skipLibCheck": true
   },
   "exclude": [
     "dist_*/**/*.d.ts"