v3.20.1

changelog.md

@@ -1,5 +1,43 @@
 # Changelog
 
+## 2025-12-31 - 3.20.1 - fix(dees-workspace)
+fix demo wrapper and workspace layout; always render terminal preview
+
+- Import @design.estate/dees-wcctools/demotools and wrap demo content in <dees-demowrapper>
+- Create an absolute-positioned container so the dees-workspace fills 100% height/width
+- Always render dees-workspace-terminal-preview (use empty command when none) to avoid conditional rendering issues
+- Set a fixed height (200px) for the terminal preview in the initializing state
+- Add Playwright demo asset .playwright-mcp/dees-workspace-demo-4k.png
+
+## 2025-12-31 - 3.20.0 - feat(workspace)
+rename editor components to workspace group and move terminal & TypeScript intellisense into workspace
+
+- Renamed components and modules from 00group-editor/dees-editor-* to 00group-workspace/dees-workspace-* (e.g. dees-editor-monaco -> dees-workspace-monaco).
+- Moved terminal implementation from dees-terminal to dees-workspace-terminal and updated related imports/usages.
+- Moved TypeScript intellisense manager into 00group-workspace and updated paths.
+- Updated ts_web elements index to export 00group-workspace instead of 00group-editor and adjusted internal imports accordingly.
+- Updated scripts/update-monaco-version.cjs to write MONACO_VERSION into the new workspace path and updated log tags.
+
+## 2025-12-31 - 3.19.1 - fix(intellisense)
+Debounce TypeScript/JavaScript IntelliSense processing and cache missing packages to reduce work and noisy logs
+
+- Add 500ms debounce in editor workspace to avoid parsing on every keystroke
+- Introduce notFoundPackages cache to skip repeated filesystem checks for packages without types
+- Clear not-found cache when scanning node_modules so newly installed packages are re-detected
+- Remove noisy console logs and make file/directory read errors non-fatal (ignored)
+- Simplify processContentChange signature (removed optional filePath) and remove manual diagnostic refresh logic
+
+## 2025-12-31 - 3.19.0 - feat(dees-editor-workspace)
+improve TypeScript IntelliSense, auto-run workspace init commands, and watch node_modules for new packages
+
+- Execute an onInit command from /npmextra.json on workspace initialization (e.g., run pnpm install).
+- Add npmextra.json and an import test file (importtest.ts) plus a sample dependency in the scaffold to test package imports.
+- Add node_modules watcher with debounce to auto-scan and load package types after installs.
+- Enhance TypeScript IntelliSense: recursively load all .d.ts files from packages and @types packages, add package.json as extra lib, and log progress/errors for debugging.
+- Change processContentChange signature to accept optional filePath and trigger a diagnostic refresh when new types are loaded.
+- Expose scanAndLoadNewPackageTypes to scan top-level and scoped packages and load their types.
+- Add start/stop logic for the node_modules watcher in workspace lifecycle to avoid leaks and handle cleanup.
+
 ## 2025-12-31 - 3.18.0 - feat(filetree)
 add filesystem watch support to WebContainer environment and auto-refresh file tree; improve icon handling and context menu behavior
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.18.0",
+  "version": "3.20.1",
   "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",

scripts/update-monaco-version.cjs

@@ -11,7 +11,7 @@ function resolveMonacoPackageJson() {
     });
     return resolvedPath;
   } catch (error) {
-    console.error('[dees-editor] Unable to resolve monaco-editor/package.json');
+    console.error('[dees-workspace] Unable to resolve monaco-editor/package.json');
     throw error;
   }
 }
@@ -20,25 +20,25 @@ function getMonacoVersion() {
   const monacoPackagePath = resolveMonacoPackageJson();
   const monacoPackage = require(monacoPackagePath);
   if (!monacoPackage.version) {
-    throw new Error('[dees-editor] monaco-editor/package.json does not expose a version field');
+    throw new Error('[dees-workspace] monaco-editor/package.json does not expose a version field');
   }
   return monacoPackage.version;
 }
 
 function writeVersionModule(version) {
-  const targetDir = path.join(projectRoot, 'ts_web', 'elements', '00group-editor', 'dees-editor-monaco');
+  const targetDir = path.join(projectRoot, 'ts_web', 'elements', '00group-workspace', 'dees-workspace-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`;
   fs.writeFileSync(targetFile, fileContent, 'utf8');
-  console.log(`[dees-editor] Wrote ${path.relative(projectRoot, targetFile)} with monaco-editor@${version}`);
+  console.log(`[dees-workspace] Wrote ${path.relative(projectRoot, targetFile)} with monaco-editor@${version}`);
 }
 
 try {
   const version = getMonacoVersion();
   writeVersionModule(version);
 } catch (error) {
-  console.error('[dees-editor] Failed to update Monaco version module.');
+  console.error('[dees-workspace] Failed to update Monaco version module.');
   console.error(error instanceof Error ? error.message : error);
   process.exitCode = 1;
 }

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.18.0',
+  version: '3.20.1',
   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-filetree/index.ts

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

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

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

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

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

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

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

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

@@ -1,6 +0,0 @@
-// Editor Components
-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-monaco/dees-editor-monaco.js';
-import { DeesEditorMonaco } from '../../00group-editor/dees-editor-monaco/dees-editor-monaco.js';
+import '../../00group-workspace/dees-workspace-monaco/dees-workspace-monaco.js';
+import { DeesWorkspaceMonaco } from '../../00group-workspace/dees-workspace-monaco/dees-workspace-monaco.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -77,7 +77,7 @@ export class DeesInputCode extends DeesInputBase<string> {
   @state()
   accessor copySuccess: boolean = false;
 
-  private editorElement: DeesEditorMonaco | null = null;
+  private editorElement: DeesWorkspaceMonaco | null = null;
 
   public static styles = [
     themeDefaultStyles,
@@ -207,7 +207,7 @@ export class DeesInputCode extends DeesInputBase<string> {
         position: relative;
       }
 
-      dees-editor-monaco {
+      dees-workspace-monaco {
         display: block;
       }
 
@@ -295,12 +295,12 @@ export class DeesInputCode extends DeesInputBase<string> {
             </div>
           </div>
           <div class="editor-wrapper">
-            <dees-editor-monaco
+            <dees-workspace-monaco
               .content=${this.value}
               .language=${this.language}
               .wordWrap=${this.wordWrap}
               @content-change=${this.handleContentChange}
-            ></dees-editor-monaco>
+            ></dees-workspace-monaco>
           </div>
         </div>
       </div>
@@ -308,7 +308,7 @@ export class DeesInputCode extends DeesInputBase<string> {
   }
 
   async firstUpdated() {
-    this.editorElement = this.shadowRoot?.querySelector('dees-editor-monaco') as DeesEditorMonaco;
+    this.editorElement = this.shadowRoot?.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
     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: DeesEditorMonaco | null = null;
+    let modalEditorElement: DeesWorkspaceMonaco | 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-monaco
+          <dees-workspace-monaco
             .content=${currentValue}
             .language=${modalLanguage}
             .wordWrap=${modalWordWrap}
-          ></dees-editor-monaco>
+          ></dees-workspace-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-monaco') as DeesEditorMonaco;
+            modalEditorElement = modalRef.shadowRoot?.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
             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-monaco') as DeesEditorMonaco;
+    modalEditorElement = modal.shadowRoot?.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
 
     // Wire up toolbar event handlers
     const toolbar = modal.shadowRoot?.querySelector('.modal-toolbar');

ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts

@@ -14,7 +14,7 @@ import {
   domtools,
 } from '@design.estate/dees-element';
 import '../../dees-icon/dees-icon.js';
-import type { DeesTerminal } from '../../dees-terminal/dees-terminal.js';
+import type { DeesWorkspaceTerminal } from '../../00group-workspace/dees-workspace-terminal/dees-workspace-terminal.js';
 import { themeDefaultStyles } from '../../00theme.js';
 
 declare global {
@@ -393,7 +393,7 @@ export class DeesSimpleAppDash extends DeesElement {
     }
   }
   
-  public currentTerminal: DeesTerminal;
+  public currentTerminal: DeesWorkspaceTerminal;
   public async launchTerminal() {
     const domtools = await this.domtoolsPromise;
     if (this.currentTerminal) {
@@ -401,10 +401,10 @@ export class DeesSimpleAppDash extends DeesElement {
       await this.closeTerminal();
       return;
     }
-    
+
     const maincontainer = this.shadowRoot.querySelector('.maincontainer');
-    const { DeesTerminal } = await import('../../dees-terminal/dees-terminal.js');
-    const terminal = new DeesTerminal();
+    const { DeesWorkspaceTerminal } = await import('../../00group-workspace/dees-workspace-terminal/dees-workspace-terminal.js');
+    const terminal = new DeesWorkspaceTerminal();
     terminal.setupCommand = this.terminalSetupCommand;
     this.currentTerminal = terminal;
     maincontainer.appendChild(terminal);

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

@@ -20,7 +20,7 @@ import { DeesInputText } from '../../00group-input/dees-input-text/dees-input-te
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dees-editor-filetree': DeesEditorFiletree;
+    'dees-workspace-filetree': DeesWorkspaceFiletree;
   }
 }
 
@@ -30,11 +30,11 @@ interface ITreeNode extends IFileEntry {
   level: number;
 }
 
-@customElement('dees-editor-filetree')
-export class DeesEditorFiletree extends DeesElement {
+@customElement('dees-workspace-filetree')
+export class DeesWorkspaceFiletree extends DeesElement {
   public static demo = () => html`
     <div style="width: 300px; height: 400px; position: relative;">
-      <dees-editor-filetree></dees-editor-filetree>
+      <dees-workspace-filetree></dees-workspace-filetree>
     </div>
   `;
 

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

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

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

@@ -9,19 +9,19 @@ import {
   domtools
 } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
-import { DeesEditorMonaco } from '../dees-editor-monaco/dees-editor-monaco.js';
+import { DeesWorkspaceMonaco } from '../dees-workspace-monaco/dees-workspace-monaco.js';
 
 const deferred = domtools.plugins.smartpromise.defer();
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dees-editormarkdown': DeesEditorMarkdown;
+    'dees-workspace-markdown': DeesWorkspaceMarkdown;
   }
 }
 
-@customElement('dees-editormarkdown')
-export class DeesEditorMarkdown extends DeesElement {
-  public static demo = () => html`<dees-editormarkdown></dees-editormarkdown>`;
+@customElement('dees-workspace-markdown')
+export class DeesWorkspaceMarkdown extends DeesElement {
+  public static demo = () => html`<dees-workspace-markdown></dees-workspace-markdown>`;
 
   public static styles = [
     themeDefaultStyles,
@@ -52,7 +52,7 @@ export class DeesEditorMarkdown extends DeesElement {
     return html`
       <div class="gridcontainer">
         <div class="editorContainer">
-          <dees-editor-monaco
+          <dees-workspace-monaco
             .language=${'markdown'}
             .content=${`# a test content
 
@@ -76,10 +76,10 @@ const hello = 'yes'
 \`\`\`
 `}
             wordWrap="bounded"
-          ></dees-editor-monaco>
+          ></dees-workspace-monaco>
         </div>
         <div class="outletContainer">
-          <dees-editormarkdownoutlet></dees-editormarkdownoutlet>
+          <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
         </div>
       </div>
     `;
@@ -87,10 +87,10 @@ const hello = 'yes'
 
   public async firstUpdated(_changedPropertiesArg) {
     await super.firstUpdated(_changedPropertiesArg);
-    const editor = this.shadowRoot.querySelector('dees-editor-monaco') as DeesEditorMonaco;
+    const editor = this.shadowRoot.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
 
     // lets care about wiring the markdown stuff.
-    const markdownOutlet = this.shadowRoot.querySelector('dees-editormarkdownoutlet');
+    const markdownOutlet = this.shadowRoot.querySelector('dees-workspace-markdownoutlet');
     const smartmarkdownInstance = new domtools.plugins.smartmarkdown.SmartMarkdown();
     const mdParsedResult = await smartmarkdownInstance.getMdParsedResultFromMarkdown('loading...')
     editor.contentSubject.subscribe(async contentArg => {

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

@@ -0,0 +1 @@
+export * from './dees-workspace-markdown.js';

ts_web/elements/00group-workspace/dees-workspace-markdownoutlet/dees-workspace-markdownoutlet.ts

@@ -2,14 +2,14 @@ import { customElement, DeesElement, html, type TemplateResult } from '@design.e
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dees-editormarkdownoutlet': DeesEditorMarkdownOutlet;
+    'dees-workspace-markdownoutlet': DeesWorkspaceMarkdownoutlet;
   }
 }
 
-@customElement('dees-editormarkdownoutlet')
-export class DeesEditorMarkdownOutlet extends DeesElement {
+@customElement('dees-workspace-markdownoutlet')
+export class DeesWorkspaceMarkdownoutlet extends DeesElement {
   // DEMO
-  public static demo = () => html`<dees-editormarkdownoutlet></dees-editormarkdownoutlet>`;
+  public static demo = () => html`<dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>`;
 
   // INSTANCE
   private outlet: HTMLElement;

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

@@ -0,0 +1 @@
+export * from './dees-workspace-markdownoutlet.js';

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

@@ -15,14 +15,14 @@ import type * as monaco from 'monaco-editor';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dees-editor-monaco': DeesEditorMonaco;
+    'dees-workspace-monaco': DeesWorkspaceMonaco;
   }
 }
 
-@customElement('dees-editor-monaco')
-export class DeesEditorMonaco extends DeesElement {
+@customElement('dees-workspace-monaco')
+export class DeesWorkspaceMonaco extends DeesElement {
   // DEMO
-  public static demo = () => html`<dees-editor-monaco></dees-editor-monaco>`;
+  public static demo = () => html`<dees-workspace-monaco></dees-workspace-monaco>`;
 
   // STATIC
   public static monacoDeferred: ReturnType<typeof domtools.plugins.smartpromise.defer>;
@@ -98,17 +98,17 @@ export class DeesEditorMonaco extends DeesElement {
     const container = this.shadowRoot.getElementById('container');
     const monacoCdnBase = `https://cdn.jsdelivr.net/npm/monaco-editor@${MONACO_VERSION}`;
 
-    if (!DeesEditorMonaco.monacoDeferred) {
-      DeesEditorMonaco.monacoDeferred = domtools.plugins.smartpromise.defer();
+    if (!DeesWorkspaceMonaco.monacoDeferred) {
+      DeesWorkspaceMonaco.monacoDeferred = domtools.plugins.smartpromise.defer();
       const scriptUrl = `${monacoCdnBase}/min/vs/loader.js`;
       const script = document.createElement('script');
       script.src = scriptUrl;
       script.onload = () => {
-        DeesEditorMonaco.monacoDeferred.resolve();
+        DeesWorkspaceMonaco.monacoDeferred.resolve();
       };
       document.head.appendChild(script);
     }
-    await DeesEditorMonaco.monacoDeferred.promise;
+    await DeesWorkspaceMonaco.monacoDeferred.promise;
 
     (window as any).require.config({
       paths: { vs: `${monacoCdnBase}/min/vs` },

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

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

ts_web/elements/00group-workspace/dees-workspace-terminal-preview/dees-workspace-terminal-preview.ts

@@ -0,0 +1,361 @@
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+import { Terminal } from 'xterm';
+import { FitAddon } from 'xterm-addon-fit';
+import { themeDefaultStyles } from '../../00theme.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-workspace-terminal-preview': DeesWorkspaceTerminalPreview;
+  }
+}
+
+/**
+ * A read-only terminal preview component using xterm.js for rendering.
+ * Used during workspace initialization to show onInit command progress.
+ */
+@customElement('dees-workspace-terminal-preview')
+export class DeesWorkspaceTerminalPreview extends DeesElement {
+  public static demo = () => html`
+    <dees-workspace-terminal-preview
+      .command=${'pnpm install'}
+      .lines=${[
+        'Packages: +42',
+        'Progress: resolved 142, reused 140, downloaded 2, added 42, done',
+        '',
+        'dependencies:',
+        '+ @push.rocks/smartpromise 4.2.3',
+        '+ typescript 5.3.3',
+        '',
+        'Done in 2.3s'
+      ]}
+    ></dees-workspace-terminal-preview>
+  `;
+
+  /**
+   * The command being displayed (shown in header)
+   */
+  @property({ type: String })
+  accessor command: string = '';
+
+  /**
+   * Output lines to display
+   */
+  @property({ type: Array })
+  accessor lines: string[] = [];
+
+  private terminal: Terminal | null = null;
+  private fitAddon: FitAddon | null = null;
+  private lastLineCount: number = 0;
+  private resizeObserver: ResizeObserver | null = null;
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        height: 200px;
+      }
+
+      .terminal-preview {
+        height: 100%;
+        border-radius: 8px;
+        overflow: hidden;
+        background: #000000;
+        border: 1px solid hsl(0 0% 20%);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .terminal-header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 12px;
+        background: hsl(0 0% 10%);
+        font-size: 12px;
+        font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
+        color: hsl(0 0% 60%);
+        border-bottom: 1px solid hsl(0 0% 20%);
+        flex-shrink: 0;
+      }
+
+      .terminal-header-icon {
+        color: hsl(0 0% 50%);
+      }
+
+      .terminal-header-command {
+        color: hsl(0 0% 80%);
+        font-weight: 500;
+      }
+
+      .terminal-container {
+        flex: 1;
+        position: relative;
+        padding: 8px;
+      }
+
+      #xterm-container {
+        position: absolute;
+        top: 8px;
+        left: 8px;
+        right: 8px;
+        bottom: 8px;
+      }
+
+      /* xterm.js styles */
+      .xterm {
+        font-feature-settings: 'liga' 0;
+        position: relative;
+        user-select: none;
+        -ms-user-select: none;
+        -webkit-user-select: none;
+      }
+
+      .xterm.focus,
+      .xterm:focus {
+        outline: none;
+      }
+
+      .xterm .xterm-helpers {
+        position: absolute;
+        top: 0;
+        z-index: 5;
+      }
+
+      .xterm .xterm-helper-textarea {
+        padding: 0;
+        border: 0;
+        margin: 0;
+        position: absolute;
+        opacity: 0;
+        left: -9999em;
+        top: 0;
+        width: 0;
+        height: 0;
+        z-index: -5;
+        white-space: nowrap;
+        overflow: hidden;
+        resize: none;
+      }
+
+      .xterm .composition-view {
+        background: #000000;
+        color: #fff;
+        display: none;
+        position: absolute;
+        white-space: nowrap;
+        z-index: 1;
+      }
+
+      .xterm .composition-view.active {
+        display: block;
+      }
+
+      .xterm .xterm-viewport {
+        background-color: #000000;
+        overflow-y: scroll;
+        cursor: default;
+        position: absolute;
+        right: 0;
+        left: 0;
+        top: 0;
+        bottom: 0;
+      }
+
+      .xterm .xterm-screen {
+        position: relative;
+      }
+
+      .xterm .xterm-screen canvas {
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+
+      .xterm .xterm-scroll-area {
+        visibility: hidden;
+      }
+
+      .xterm-char-measure-element {
+        display: inline-block;
+        visibility: hidden;
+        position: absolute;
+        top: 0;
+        left: -9999em;
+        line-height: normal;
+      }
+
+      .xterm {
+        cursor: text;
+      }
+
+      .xterm.enable-mouse-events {
+        cursor: default;
+      }
+
+      .xterm.xterm-cursor-pointer {
+        cursor: pointer;
+      }
+
+      .xterm.column-select.focus {
+        cursor: crosshair;
+      }
+
+      .xterm .xterm-accessibility,
+      .xterm .xterm-message {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        z-index: 10;
+        color: transparent;
+      }
+
+      .xterm .live-region {
+        position: absolute;
+        left: -9999px;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+      }
+
+      .xterm-dim {
+        opacity: 0.5;
+      }
+
+      .xterm-underline {
+        text-decoration: underline;
+      }
+
+      /* Custom scrollbar for xterm viewport */
+      .xterm .xterm-viewport::-webkit-scrollbar {
+        width: 8px;
+      }
+
+      .xterm .xterm-viewport::-webkit-scrollbar-track {
+        background: hsl(0 0% 8%);
+      }
+
+      .xterm .xterm-viewport::-webkit-scrollbar-thumb {
+        background: hsl(0 0% 25%);
+        border-radius: 4px;
+      }
+
+      .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
+        background: hsl(0 0% 35%);
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="terminal-preview">
+        <div class="terminal-header">
+          <span class="terminal-header-icon">$</span>
+          <span class="terminal-header-command">${this.command || 'Waiting...'}</span>
+        </div>
+        <div class="terminal-container">
+          <div id="xterm-container"></div>
+        </div>
+      </div>
+    `;
+  }
+
+  public async firstUpdated(
+    _changedProperties: Map<string | number | symbol, unknown>
+  ): Promise<void> {
+    super.firstUpdated(_changedProperties);
+
+    const container = this.shadowRoot?.getElementById('xterm-container');
+    if (!container) return;
+
+    // Create xterm terminal in read-only mode
+    this.terminal = new Terminal({
+      convertEol: true,
+      cursorBlink: false,
+      disableStdin: true,
+      fontSize: 12,
+      fontFamily: "'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace",
+      theme: {
+        background: '#000000',
+        foreground: '#cccccc',
+      },
+      scrollback: 1000,
+    });
+
+    this.fitAddon = new FitAddon();
+    this.terminal.loadAddon(this.fitAddon);
+    this.terminal.open(container);
+    this.fitAddon.fit();
+
+    // Set up resize observer to refit terminal
+    this.resizeObserver = new ResizeObserver(() => {
+      if (this.fitAddon) {
+        this.fitAddon.fit();
+      }
+    });
+    this.resizeObserver.observe(container);
+
+    // Write any existing lines
+    this.writeNewLines();
+  }
+
+  public async updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('lines')) {
+      this.writeNewLines();
+    }
+  }
+
+  private writeNewLines() {
+    if (!this.terminal) return;
+
+    // Write only new lines since last update
+    const newLines = this.lines.slice(this.lastLineCount);
+    for (const line of newLines) {
+      this.terminal.writeln(line);
+    }
+    this.lastLineCount = this.lines.length;
+  }
+
+  public async disconnectedCallback(): Promise<void> {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+    if (this.terminal) {
+      this.terminal.dispose();
+      this.terminal = null;
+    }
+    await super.disconnectedCallback();
+  }
+
+  /**
+   * Add a new line to the output
+   */
+  public addLine(line: string) {
+    this.lines = [...this.lines, line];
+  }
+
+  /**
+   * Clear all output lines
+   */
+  public clear() {
+    this.lines = [];
+    this.lastLineCount = 0;
+    if (this.terminal) {
+      this.terminal.clear();
+    }
+  }
+}

ts_web/elements/00group-workspace/dees-workspace-terminal-preview/index.ts

@@ -0,0 +1 @@
+export * from './dees-workspace-terminal-preview.js';

ts_web/elements/00group-workspace/dees-workspace-terminal/dees-workspace-terminal.ts

@@ -11,21 +11,21 @@ import * as domtools from '@design.estate/dees-domtools';
 
 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';
+import { themeDefaultStyles } from '../../00theme.js';
+import type { IExecutionEnvironment } from '../../00group-runtime/index.js';
+import { WebContainerEnvironment } from '../../00group-runtime/index.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dees-terminal': DeesTerminal;
+    'dees-workspace-terminal': DeesWorkspaceTerminal;
   }
 }
 
-@customElement('dees-terminal')
-export class DeesTerminal extends DeesElement {
+@customElement('dees-workspace-terminal')
+export class DeesWorkspaceTerminal extends DeesElement {
   public static demo = () => {
     const env = new WebContainerEnvironment();
-    return html`<dees-terminal .executionEnvironment=${env}></dees-terminal>`;
+    return html`<dees-workspace-terminal .executionEnvironment=${env}></dees-workspace-terminal>`;
   };
 
   // INSTANCE

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

@@ -0,0 +1 @@
+export * from './dees-workspace-terminal.js';

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

@@ -10,21 +10,23 @@ import {
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 import { themeDefaultStyles } from '../../00theme.js';
-import type { IExecutionEnvironment } from '../../00group-runtime/index.js';
+import type { IExecutionEnvironment, IFileWatcher } from '../../00group-runtime/index.js';
 import { WebContainerEnvironment } from '../../00group-runtime/index.js';
 import type { FileSystemTree } from '@webcontainer/api';
-import '../dees-editor-monaco/dees-editor-monaco.js';
-import '../dees-editor-filetree/dees-editor-filetree.js';
-import { DeesEditorFiletree } from '../dees-editor-filetree/dees-editor-filetree.js';
-import '../../dees-terminal/dees-terminal.js';
+import '../dees-workspace-monaco/dees-workspace-monaco.js';
+import '../dees-workspace-filetree/dees-workspace-filetree.js';
+import { DeesWorkspaceFiletree } from '../dees-workspace-filetree/dees-workspace-filetree.js';
+import '../dees-workspace-terminal/dees-workspace-terminal.js';
+import '../dees-workspace-terminal-preview/dees-workspace-terminal-preview.js';
 import '../../dees-icon/dees-icon.js';
-import { DeesEditorMonaco } from '../dees-editor-monaco/dees-editor-monaco.js';
+import { DeesWorkspaceMonaco } from '../dees-workspace-monaco/dees-workspace-monaco.js';
 import { TypeScriptIntelliSenseManager } from './typescript-intellisense.js';
 import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
+import '@design.estate/dees-wcctools/demotools';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dees-editor-workspace': DeesEditorWorkspace;
+    'dees-workspace': DeesWorkspace;
   }
 }
 
@@ -35,8 +37,8 @@ interface IOpenFile {
   modified: boolean;
 }
 
-@customElement('dees-editor-workspace')
-export class DeesEditorWorkspace extends DeesElement {
+@customElement('dees-workspace')
+export class DeesWorkspace extends DeesElement {
   public static demo = () => {
     const env = new WebContainerEnvironment();
 
@@ -56,6 +58,9 @@ export class DeesEditorWorkspace extends DeesElement {
                   build: 'tsc',
                   dev: 'tsc --watch',
                 },
+                dependencies: {
+                  '@push.rocks/smartpromise': '^4.2.3',
+                },
                 devDependencies: {
                   typescript: '^5.0.0',
                 },
@@ -65,6 +70,19 @@ export class DeesEditorWorkspace extends DeesElement {
             ),
           },
         },
+        'npmextra.json': {
+          file: {
+            contents: JSON.stringify(
+              {
+                deesEditorWorkspace: {
+                  onInit: 'pnpm install',
+                },
+              },
+              null,
+              2
+            ),
+          },
+        },
         'tsconfig.json': {
           file: {
             contents: JSON.stringify(
@@ -125,6 +143,28 @@ export function formatName(name: string): string {
 export function createUser(firstName: string, lastName: string): IUser {
   return { firstName, lastName };
 }
+`,
+              },
+            },
+            'importtest.ts': {
+              file: {
+                contents: `// Test npm package imports
+import * as smartpromise from '@push.rocks/smartpromise';
+
+// This should have IntelliSense showing defer() method
+const deferred = smartpromise.defer<string>();
+
+// Test using the deferred promise
+async function testSmartPromise() {
+  setTimeout(() => {
+    deferred.resolve('Hello from smartpromise!');
+  }, 100);
+
+  const result = await deferred.promise;
+  console.log(result);
+}
+
+testSmartPromise();
 `,
               },
             },
@@ -135,13 +175,19 @@ export function createUser(firstName: string, lastName: string): IUser {
       await env.mount(fileTree);
     })();
 
+    // Create container element for proper 100% height like dees-appui-base
+    const containerElement = document.createElement('div');
+    containerElement.style.cssText = 'position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;';
+
+    const workspaceElement = document.createElement('dees-workspace') as DeesWorkspace;
+    workspaceElement.executionEnvironment = env;
+    workspaceElement.initializationPromise = mountPromise;
+    containerElement.appendChild(workspaceElement);
+
     return html`
-      <div style="width: 100%; height: 600px; position: relative;">
-        <dees-editor-workspace
-          .executionEnvironment=${env}
-          .initializationPromise=${mountPromise}
-        ></dees-editor-workspace>
-      </div>
+      <dees-demowrapper>
+        ${containerElement}
+      </dees-demowrapper>
     `;
   };
 
@@ -194,16 +240,28 @@ export function createUser(firstName: string, lastName: string): IUser {
     resource: { path: string };
   }> = [];
 
-  private editorElement: DeesEditorMonaco | null = null;
+  private editorElement: DeesWorkspaceMonaco | null = null;
   private initializationStarted: boolean = false;
   private intelliSenseManager: TypeScriptIntelliSenseManager | null = null;
   private intelliSenseInitialized: boolean = false;
 
+  // node_modules watcher for auto-loading types
+  private nodeModulesWatcher: IFileWatcher | null = null;
+  private nodeModulesDebounceTimeout: ReturnType<typeof setTimeout> | null = null;
+  private intelliSenseDebounceTimeout: ReturnType<typeof setTimeout> | null = null;
+
   // Auto-save functionality
   @state()
   accessor autoSave: boolean = false;
   private autoSaveInterval: ReturnType<typeof setInterval> | null = null;
 
+  // Init terminal preview state
+  @state()
+  accessor initCommand: string = '';
+
+  @state()
+  accessor initOutput: string[] = [];
+
   // Keyboard shortcut handler (bound for proper cleanup)
   private keydownHandler = (e: KeyboardEvent) => {
     // Cmd+S (Mac) or Ctrl+S (Windows/Linux) - Save
@@ -587,6 +645,11 @@ export function createUser(firstName: string, lastName: string): IUser {
         opacity: 0.5;
       }
 
+      @keyframes spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+      }
+
       .initializing {
         display: flex;
         flex-direction: column;
@@ -598,7 +661,18 @@ export function createUser(firstName: string, lastName: string): IUser {
         gap: 12px;
       }
 
-      dees-editor-filetree {
+      .initializing dees-icon {
+        animation: spin 1s linear infinite;
+      }
+
+      .initializing dees-workspace-terminal-preview {
+        margin-top: 24px;
+        width: 80%;
+        max-width: 600px;
+        height: 200px;
+      }
+
+      dees-workspace-filetree {
         position: absolute;
         top: 0;
         left: 0;
@@ -606,7 +680,7 @@ export function createUser(firstName: string, lastName: string): IUser {
         bottom: 0;
       }
 
-      dees-editor-monaco {
+      dees-workspace-monaco {
         position: absolute;
         top: 0;
         left: 0;
@@ -614,7 +688,7 @@ export function createUser(firstName: string, lastName: string): IUser {
         bottom: 0;
       }
 
-      dees-terminal {
+      dees-workspace-terminal {
         position: absolute;
         top: 0;
         left: 0;
@@ -636,6 +710,10 @@ export function createUser(firstName: string, lastName: string): IUser {
         <div class="initializing">
           <dees-icon .icon=${'lucide:loader2'} iconSize="32"></dees-icon>
           <span>Initializing workspace...</span>
+          <dees-workspace-terminal-preview
+            .command=${this.initCommand || ''}
+            .lines=${this.initOutput}
+          ></dees-workspace-terminal-preview>
         </div>
       `;
     }
@@ -647,11 +725,11 @@ export function createUser(firstName: string, lastName: string): IUser {
             class="filetree-panel ${this.isFileTreeCollapsed ? 'collapsed' : ''}"
             style="width: ${this.isFileTreeCollapsed ? 0 : this.fileTreeWidth}px"
           >
-            <dees-editor-filetree
+            <dees-workspace-filetree
               .executionEnvironment=${this.executionEnvironment}
               .selectedPath=${this.activeFilePath}
               @file-select=${this.handleFileSelect}
-            ></dees-editor-filetree>
+            ></dees-workspace-filetree>
           </div>
         ` : ''}
 
@@ -682,12 +760,12 @@ export function createUser(firstName: string, lastName: string): IUser {
                 <span>Select a file to edit</span>
               </div>
             ` : html`
-              <dees-editor-monaco
+              <dees-workspace-monaco
                 .filePath=${this.activeFilePath}
                 .content=${this.getActiveFileContent()}
                 .language=${this.getLanguageFromPath(this.activeFilePath)}
                 @content-change=${this.handleContentChange}
-              ></dees-editor-monaco>
+              ></dees-workspace-monaco>
             `}
           </div>
         </div>
@@ -727,10 +805,10 @@ export function createUser(firstName: string, lastName: string): IUser {
               </div>
             </div>
             <div class="terminal-content" style="display: ${this.activeBottomPanel === 'terminal' ? 'block' : 'none'}">
-              <dees-terminal
+              <dees-workspace-terminal
                 .executionEnvironment=${this.executionEnvironment}
                 .setupCommand=${''}
-              ></dees-terminal>
+              ></dees-workspace-terminal>
             </div>
             <div class="problems-content" style="display: ${this.activeBottomPanel === 'problems' ? 'block' : 'none'}">
               ${this.renderProblemsPanel()}
@@ -753,6 +831,7 @@ export function createUser(firstName: string, lastName: string): IUser {
       clearInterval(this.autoSaveInterval);
       this.autoSaveInterval = null;
     }
+    this.stopNodeModulesWatcher();
   }
 
   public async firstUpdated() {
@@ -783,6 +862,10 @@ export function createUser(firstName: string, lastName: string): IUser {
       } else if (!this.executionEnvironment.ready) {
         await this.executionEnvironment.init();
       }
+
+      // Execute onInit command from npmextra.json if present
+      await this.executeOnInitCommand();
+
       // IntelliSense is initialized lazily when first file is opened (Monaco loads on demand)
     } catch (error) {
       console.error('Failed to initialize workspace:', error);
@@ -793,6 +876,58 @@ export function createUser(firstName: string, lastName: string): IUser {
     }
   }
 
+  /**
+   * Execute onInit command from npmextra.json if present
+   * This allows automatic setup like `pnpm install` on workspace initialization
+   */
+  private async executeOnInitCommand(): Promise<void> {
+    if (!this.executionEnvironment) return;
+
+    try {
+      if (await this.executionEnvironment.exists('/npmextra.json')) {
+        const content = await this.executionEnvironment.readFile('/npmextra.json');
+        const config = JSON.parse(content);
+        const onInit = config?.deesEditorWorkspace?.onInit;
+
+        if (onInit && typeof onInit === 'string') {
+          console.log('Executing onInit command:', onInit);
+
+          // Set command for terminal preview display
+          this.initCommand = onInit;
+          this.initOutput = [];
+
+          // Parse command and args
+          const [cmd, ...args] = onInit.split(' ');
+          const process = await this.executionEnvironment.spawn(cmd, args);
+
+          // Capture stdout/stderr for terminal preview
+          process.output.pipeTo(
+            new WritableStream({
+              write: (data) => {
+                // Split data into lines and append
+                const lines = data.split('\n');
+                for (const line of lines) {
+                  if (line) {
+                    this.initOutput = [...this.initOutput, line];
+                  }
+                }
+              },
+            })
+          );
+
+          // Wait for completion
+          const exitCode = await process.exit;
+          console.log('onInit command completed with exit code:', exitCode);
+
+          // Add completion message
+          this.initOutput = [...this.initOutput, '', `Command completed with exit code: ${exitCode}`];
+        }
+      }
+    } catch (error) {
+      console.warn('Failed to execute onInit command:', error);
+    }
+  }
+
   private async initializeIntelliSense(): Promise<void> {
     if (!this.executionEnvironment) return;
     if (this.intelliSenseInitialized) return;
@@ -816,6 +951,51 @@ export function createUser(firstName: string, lastName: string): IUser {
 
     // Set up marker listener for Problems panel
     this.setupMarkerListener();
+
+    // Start watching node_modules for package installations
+    this.startNodeModulesWatcher();
+
+    // Initial scan for any existing packages
+    await this.intelliSenseManager.scanAndLoadNewPackageTypes();
+  }
+
+  /**
+   * Watch node_modules for changes (e.g., after pnpm install)
+   * and automatically load types for new packages
+   */
+  private startNodeModulesWatcher(): void {
+    if (!this.executionEnvironment || this.nodeModulesWatcher) return;
+
+    try {
+      this.nodeModulesWatcher = this.executionEnvironment.watch(
+        '/node_modules',
+        (_event, _filename) => {
+          // Debounce - pnpm install creates many file changes
+          if (this.nodeModulesDebounceTimeout) {
+            clearTimeout(this.nodeModulesDebounceTimeout);
+          }
+          this.nodeModulesDebounceTimeout = setTimeout(async () => {
+            if (this.intelliSenseManager) {
+              await this.intelliSenseManager.scanAndLoadNewPackageTypes();
+            }
+          }, 2000); // 2 second debounce for package installation
+        },
+        { recursive: true }
+      );
+    } catch (error) {
+      console.warn('Could not watch node_modules:', error);
+    }
+  }
+
+  private stopNodeModulesWatcher(): void {
+    if (this.nodeModulesWatcher) {
+      this.nodeModulesWatcher.stop();
+      this.nodeModulesWatcher = null;
+    }
+    if (this.nodeModulesDebounceTimeout) {
+      clearTimeout(this.nodeModulesDebounceTimeout);
+      this.nodeModulesDebounceTimeout = null;
+    }
   }
 
   private async handleFileSelect(e: CustomEvent<{ path: string; name: string }>) {
@@ -909,10 +1089,15 @@ export function createUser(firstName: string, lastName: string): IUser {
         ...this.openFiles.slice(fileIndex + 1),
       ];
 
-      // Process content for IntelliSense (TypeScript/JavaScript files)
+      // Process content for IntelliSense (debounced to avoid parsing on every keystroke)
       const language = this.getLanguageFromPath(this.activeFilePath);
       if (this.intelliSenseManager && (language === 'typescript' || language === 'javascript')) {
-        this.intelliSenseManager.processContentChange(newContent);
+        if (this.intelliSenseDebounceTimeout) {
+          clearTimeout(this.intelliSenseDebounceTimeout);
+        }
+        this.intelliSenseDebounceTimeout = setTimeout(() => {
+          this.intelliSenseManager?.processContentChange(newContent);
+        }, 500); // 500ms debounce
       }
     }
   }
@@ -1086,7 +1271,7 @@ export function createUser(firstName: string, lastName: string): IUser {
 
     // Wait for editor to be ready, then navigate to the line
     await this.updateComplete;
-    const editorElement = this.shadowRoot?.querySelector('dees-editor-monaco') as DeesEditorMonaco;
+    const editorElement = this.shadowRoot?.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
     if (editorElement) {
       const editor = await editorElement.editorDeferred.promise;
       editor.revealLineInCenter(marker.startLineNumber);

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

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

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

@@ -24,6 +24,7 @@ interface IMonacoTypeScriptAPI {
  */
 export class TypeScriptIntelliSenseManager {
   private loadedLibs: Set<string> = new Set();
+  private notFoundPackages: Set<string> = new Set(); // Packages checked but not found
   private monacoInstance: typeof monaco | null = null;
   private executionEnvironment: IExecutionEnvironment | null = null;
 
@@ -174,13 +175,19 @@ export class TypeScriptIntelliSenseManager {
   public async loadTypesForPackage(packageName: string): Promise<void> {
     if (!this.monacoInstance || !this.executionEnvironment) return;
     if (this.loadedLibs.has(packageName)) return;
+    if (this.notFoundPackages.has(packageName)) return; // Skip packages we already checked
 
     try {
-      const typesLoaded = await this.tryLoadPackageTypes(packageName);
+      let typesLoaded = await this.tryLoadPackageTypes(packageName);
       if (!typesLoaded) {
-        await this.tryLoadAtTypesPackage(packageName);
+        typesLoaded = await this.tryLoadAtTypesPackage(packageName);
+      }
+      if (typesLoaded) {
+        this.loadedLibs.add(packageName);
+      } else {
+        // Cache that this package wasn't found to avoid repeated filesystem checks
+        this.notFoundPackages.add(packageName);
       }
-      this.loadedLibs.add(packageName);
     } catch (error) {
       console.warn(`Failed to load types for ${packageName}:`, error);
     }
@@ -195,26 +202,25 @@ export class TypeScriptIntelliSenseManager {
     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 packageJsonExists = await this.executionEnvironment.exists(packageJsonPath);
+
+      if (packageJsonExists) {
+        const packageJsonContent = await this.executionEnvironment.readFile(packageJsonPath);
+        const packageJson = JSON.parse(packageJsonContent);
+
+        // Add package.json to Monaco so TypeScript can resolve the types field
+        ts.typescriptDefaults.addExtraLib(packageJsonContent, `file://${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;
-          }
+          // Load all .d.ts files from the package, not just the entry point
+          // Modern packages often have multiple declaration files with imports
+          await this.loadAllDtsFilesFromPackage(basePath);
+          return true;
         }
       }
 
-      // Try common locations
+      // Try common locations - if any exist, load all .d.ts files
       const commonPaths = [
         `${basePath}/index.d.ts`,
         `${basePath}/dist/index.d.ts`,
@@ -223,24 +229,62 @@ export class TypeScriptIntelliSenseManager {
 
       for (const dtsPath of commonPaths) {
         if (await this.executionEnvironment.exists(dtsPath)) {
-          const content = await this.executionEnvironment.readFile(dtsPath);
-          ts.typescriptDefaults.addExtraLib(
-            content,
-            `file://${dtsPath}`
-          );
+          await this.loadAllDtsFilesFromPackage(basePath);
           return true;
         }
       }
 
       return false;
-    } catch {
+    } catch (error) {
+      console.error(`Failed to load package types for ${packageName}:`, error);
       return false;
     }
   }
 
-  private async tryLoadAtTypesPackage(packageName: string): Promise<boolean> {
+  /**
+   * Recursively load all .d.ts files from a package directory
+   */
+  private async loadAllDtsFilesFromPackage(basePath: string): Promise<void> {
     const ts = this.tsApi;
-    if (!this.executionEnvironment || !ts) return false;
+    if (!this.executionEnvironment || !ts) return;
+
+    await this.loadDtsFilesFromDirectory(basePath);
+  }
+
+  /**
+   * Recursively load .d.ts files from a directory
+   */
+  private async loadDtsFilesFromDirectory(dirPath: string): Promise<void> {
+    const ts = this.tsApi;
+    if (!this.executionEnvironment || !ts) return;
+
+    try {
+      const entries = await this.executionEnvironment.readDir(dirPath);
+
+      for (const entry of entries) {
+        const fullPath = dirPath === '/' ? `/${entry.name}` : `${dirPath}/${entry.name}`;
+
+        // Skip nested node_modules (shouldn't happen in a package but be safe)
+        if (entry.name === 'node_modules') continue;
+
+        if (entry.type === 'directory') {
+          await this.loadDtsFilesFromDirectory(fullPath);
+        } else if (entry.type === 'file' && entry.name.endsWith('.d.ts')) {
+          try {
+            const content = await this.executionEnvironment.readFile(fullPath);
+            ts.typescriptDefaults.addExtraLib(content, `file://${fullPath}`);
+          } catch {
+            // Ignore files that can't be read
+          }
+        }
+      }
+    } catch {
+      // Directory might not be readable
+    }
+  }
+
+  private async tryLoadAtTypesPackage(packageName: string): Promise<boolean> {
+    if (!this.executionEnvironment) return false;
 
     // Handle scoped packages: @scope/package -> @types/scope__package
     const typesPackageName = packageName.startsWith('@')
@@ -252,11 +296,8 @@ export class TypeScriptIntelliSenseManager {
     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}`
-        );
+        // Load all .d.ts files from the @types package
+        await this.loadAllDtsFilesFromPackage(basePath);
         return true;
       }
       return false;
@@ -270,8 +311,55 @@ export class TypeScriptIntelliSenseManager {
    */
   public async processContentChange(content: string): Promise<void> {
     const imports = this.parseImports(content);
+
     for (const packageName of imports) {
-      await this.loadTypesForPackage(packageName);
+      if (!this.loadedLibs.has(packageName)) {
+        await this.loadTypesForPackage(packageName);
+      }
+    }
+  }
+
+  /**
+   * Scan node_modules for packages and load types for any not yet loaded.
+   * Called when node_modules changes (e.g., after pnpm install).
+   */
+  public async scanAndLoadNewPackageTypes(): Promise<void> {
+    if (!this.executionEnvironment) return;
+
+    // Clear not-found cache so newly installed packages can be detected
+    this.notFoundPackages.clear();
+
+    try {
+      // Check if node_modules exists
+      if (!await this.executionEnvironment.exists('/node_modules')) return;
+
+      // Read top-level node_modules
+      const entries = await this.executionEnvironment.readDir('/node_modules');
+
+      for (const entry of entries) {
+        if (entry.type !== 'directory') continue;
+
+        if (entry.name.startsWith('@')) {
+          // Scoped package - read subdirectories
+          try {
+            const scopedPath = `/node_modules/${entry.name}`;
+            const scopedEntries = await this.executionEnvironment.readDir(scopedPath);
+            for (const scopedEntry of scopedEntries) {
+              if (scopedEntry.type === 'directory') {
+                const packageName = `${entry.name}/${scopedEntry.name}`;
+                await this.loadTypesForPackage(packageName);
+              }
+            }
+          } catch {
+            // Skip if we can't read scoped directory
+          }
+        } else if (!entry.name.startsWith('.')) {
+          // Regular package
+          await this.loadTypesForPackage(entry.name);
+        }
+      }
+    } catch (error) {
+      console.warn('Failed to scan node_modules:', error);
     }
   }
 

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

@@ -0,0 +1,8 @@
+// Workspace Components
+export * from './dees-workspace/index.js';
+export * from './dees-workspace-monaco/index.js';
+export * from './dees-workspace-filetree/index.js';
+export * from './dees-workspace-terminal/index.js';
+export * from './dees-workspace-terminal-preview/index.js';
+export * from './dees-workspace-markdown/index.js';
+export * from './dees-workspace-markdownoutlet/index.js';

ts_web/elements/dees-terminal/index.ts

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

ts_web/elements/index.ts

@@ -6,7 +6,7 @@ export * from './00group-appui/index.js';
 export * from './00group-button/index.js';
 export * from './00group-chart/index.js';
 export * from './00group-dataview/index.js';
-export * from './00group-editor/index.js';
+export * from './00group-workspace/index.js';
 export * from './00group-form/index.js';
 export * from './00group-input/index.js';
 export * from './00group-pdf/index.js';
@@ -34,7 +34,7 @@ export * from './dees-spinner/index.js';
 export * from './dees-statsgrid/index.js';
 export * from './dees-stepper/index.js';
 export * from './dees-table/index.js';
-export * from './dees-terminal/index.js';
+// dees-terminal is now part of 00group-workspace as dees-workspace-terminal
 export * from './dees-toast/index.js';
 export * from './dees-updater/index.js';
 export * from './dees-windowcontrols/index.js';