v3.24.0

changelog.md

@@ -1,5 +1,146 @@
 # Changelog
 
+## 2026-01-01 - 3.24.0 - feat(workspace)
+add workspace bottom bar, terminal tab manager, and run-process integration
+
+- Add dees-workspace-bottombar component and export; bottom bar emits run-process events to launch processes.
+- Introduce terminal interfaces (IRunProcessEventDetail, ITerminalTab, ICreateTerminalTabOptions, etc.) and a TerminalTabManager to manage multiple terminal tabs and lifecycle.
+- Integrate bottombar into dees-workspace: layout refactor (workspace-outer), move/adjust resize handles and panels, and handle @run-process to create terminal tabs and focus terminal panel.
+- Enhance dees-workspace-terminal: tabbed terminal UI, new public APIs (createProcessTab, writeToTab, sendInputToTab), theme updates, and improved disposal/cleanup behavior.
+- Update module exports to include bottombar and additional terminal sub-exports (interfaces, terminal-tab-manager).
+
+## 2025-12-31 - 3.23.0 - feat(workspace)
+add resizable file tree and terminal panes with draggable handles and public layout APIs
+
+- Introduce reactive state for currentFileTreeWidth, currentTerminalHeight, isDraggingFileTree and isDraggingTerminal
+- Add mouse event handlers (mousedown/move/up) to drag-resize the file tree and terminal with min/max clamping
+- Dispatch window resize event after resizing to notify Monaco/editor of layout changes
+- Clean up resize event listeners in disconnectedCallback
+- Initialize current sizes from component properties in firstUpdated
+- Expose public layout methods: setFileTreeWidth, setTerminalHeight, resetLayout
+
+## 2025-12-31 - 3.22.0 - feat(workspace)
+add resizable markdown editor/preview split with draggable handle and markdown outlet styling/demo
+
+- Introduce a flexible split layout for the workspace markdown editor with a draggable resize handle (splitRatio, minPanelSize, dragging state, mouse handlers and cleanup).
+- Enhance dees-workspace-markdown: switch from grid to flex, add resize handle UI, prevent pointer selection while dragging, notify Monaco on resize.
+- Add comprehensive styling and demo content for dees-workspace-markdownoutlet (dark/light themed markdown styles, syntax highlighting classes, and demo scenarios).
+- Fix typescript-intellisense monaco model update: only set model value when content actually changed to avoid cursor resets.
+- Add markdown outlet demo helper and numerous screenshot/image assets (.playwright-mcp) for demos/documentation.
+
+## 2025-12-31 - 3.21.0 - feat(terminal)
+add dynamic bright/dark theming for terminal components and terminal preview
+
+- Add bright/dark theme PNG assets under .playwright-mcp for previews.
+- Replace hardcoded terminal background/colors with cssManager.bdTheme in workspace terminal and preview styles.
+- Introduce getTerminalTheme helper to compute xterm theme for bright/dark modes.
+- Subscribe to themeManager.themeObservable and apply updates to xterm (terminal.options.theme) so terminals update live on theme change.
+- Remove hardcoded background property/CSS var and unused background accessor from workspace terminal.
+- Ensure proper cleanup: unsubscribe theme subscriptions and dispose terminals in disconnectedCallback.
+
+## 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
+
+- Add IFileWatcher interface and watch(...) signature to IExecutionEnvironment.
+- Implement watch(...) in WebContainerEnvironment using WebContainer's fs.watch and return a stop() handle.
+- dees-editor-filetree: start/stop file watcher, debounce auto-refresh on FS changes, cleanup on disconnect, and track last execution environment.
+- Add clipboard state (copy/cut) and related UI/menu enhancements for file operations (new file/folder, rename, delete, copy/paste).
+- dees-icon: default to Lucide icons when no prefix is provided.
+- dees-contextmenu: remove 'lucide:' prefix usage in templates and avoid awaiting windowLayer.destroy() to provide instant visual feedback.
+- Menu item shape adjusted (use { divider: true } for dividers) and various menu icon name updates.
+
+## 2025-12-31 - 3.17.0 - feat(editor)
+add file explorer toolbar, empty-space context menu, editor auto-save, save-all, and keyboard save shortcuts
+
+- Added filetree toolbar with New File / New Folder actions and toolbar styling
+- Added right-click context menu for empty filetree space to create files/folders
+- Implemented editor menu button with context menu (Auto Save toggle, Save, Save All)
+- Added auto-save toggle with 2s interval and cleanup on disconnect
+- Implemented Save and Save All APIs that persist files and update IntelliSense manager
+- Added keyboard shortcuts: Cmd/Ctrl+S to save active file and Cmd/Ctrl+Shift+S to save all
+- Made tabs scrollable with a tabs container and added an editor menu button
+
+## 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
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.13.1",
+  "version": "3.24.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
+        specifier: 1.6.1
-        version: 1.2.0
+        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
+        specifier: 0.55.1
-        version: 0.52.2
+        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

@@ -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', 'dees-editor');
+  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.13.1',
+  version: '3.24.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-filetree/dees-editor-filetree.ts

@@ -1,538 +0,0 @@
-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';
-
-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 createNewFile(parentPath: string) {
-    const fileName = prompt('Enter 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 = prompt('Enter 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

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

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

@@ -1,102 +0,0 @@
-import {
-  DeesElement,
-  property,
-  html,
-  customElement,
-  type TemplateResult,
-  css,
-  cssManager,
-  domtools
-} from '@design.estate/dees-element';
-import { themeDefaultStyles } from '../../00theme.js';
-import { DeesEditorMonaco } from '../dees-editor-monaco/dees-editor-monaco.js';
-
-const deferred = domtools.plugins.smartpromise.defer();
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'dees-editormarkdown': DeesEditorMarkdown;
-  }
-}
-
-@customElement('dees-editormarkdown')
-export class DeesEditorMarkdown extends DeesElement {
-  public static demo = () => html`<dees-editormarkdown></dees-editormarkdown>`;
-
-  public static styles = [
-    themeDefaultStyles,
-    cssManager.defaultStyles,
-    css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
-      .gridcontainer {
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        display: grid;
-        grid-template-columns: 60% 40%;
-      }
-      .editorContainer {
-        position: relative;
-      }
-      .outletContainer {
-        background: #111;
-        color: #fff;
-        font-family: 'Roboto Slab';
-        padding: 20px;
-        overflow-y: scroll;
-      }
-    `,
-  ];
-
-  public render() {
-    return html`
-      <div class="gridcontainer">
-        <div class="editorContainer">
-          <dees-editor-monaco
-            .language=${'markdown'}
-            .content=${`# a test content
-
-This is test content that is of longer form an hopefully starts to wrap when I need it. And yes, it does perfectly. nice.
-
-Test | Hello
---- | ---
-Yeah | So good
-
-This is real asset I think. Why would we want to leave that on the table? Can you tell my that?
-
-Why are we here?
-
-Do you know?
-
-> note:
-There is something going on.
-
-\`\`\`typescript
-const hello = 'yes'
-\`\`\`
-`}
-            wordWrap="bounded"
-          ></dees-editor-monaco>
-        </div>
-        <div class="outletContainer">
-          <dees-editormarkdownoutlet></dees-editormarkdownoutlet>
-        </div>
-      </div>
-    `;
-  }
-
-  public async firstUpdated(_changedPropertiesArg) {
-    await super.firstUpdated(_changedPropertiesArg);
-    const editor = this.shadowRoot.querySelector('dees-editor-monaco') as DeesEditorMonaco;
-
-    // lets care about wiring the markdown stuff.
-    const markdownOutlet = this.shadowRoot.querySelector('dees-editormarkdownoutlet');
-    const smartmarkdownInstance = new domtools.plugins.smartmarkdown.SmartMarkdown();
-    const mdParsedResult = await smartmarkdownInstance.getMdParsedResultFromMarkdown('loading...')
-    editor.contentSubject.subscribe(async contentArg => {
-      await mdParsedResult.updateFromMarkdownString(contentArg)
-      const html = mdParsedResult.html;
-      markdownOutlet.updateHtmlText(html);
-    })
-  }
-}

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/dees-editor-markdownoutlet.ts

@@ -1,42 +0,0 @@
-import { customElement, DeesElement, html, type TemplateResult } from '@design.estate/dees-element';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'dees-editormarkdownoutlet': DeesEditorMarkdownOutlet;
-  }
-}
-
-@customElement('dees-editormarkdownoutlet')
-export class DeesEditorMarkdownOutlet extends DeesElement {
-  // DEMO
-  public static demo = () => html`<dees-editormarkdownoutlet></dees-editormarkdownoutlet>`;
-
-  // INSTANCE
-  private outlet: HTMLElement;
-
-  public render(): TemplateResult {
-    return html`
-      <div class="outlet markdown-body">
-        <h1>Hi there</h1>
-      </div>
-    `;
-  }
-
-  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
-    await super.firstUpdated(_changedProperties);
-    const styleElement = document.createElement('style');
-    const cssText = await (
-      await fetch('https://unpkg.com/github-markdown-css@5.1.0/github-markdown-dark.css')
-    ).text();
-    styleElement.textContent = cssText;
-    this.shadowRoot.append(styleElement);
-  }
-
-  public async updateHtmlText(htmlTextArg: string) {
-    await this.updateComplete;
-    if (!this.outlet) {
-      this.outlet = this.shadowRoot.querySelector('.outlet');
-    }
-    this.outlet.innerHTML = htmlTextArg;
-  }
-}

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/dees-editor-monaco.ts

@@ -1,153 +0,0 @@
-import {
-  DeesElement,
-  property,
-  html,
-  customElement,
-  type TemplateResult,
-  css,
-  cssManager,
-} from '@design.estate/dees-element';
-import * as domtools from '@design.estate/dees-domtools';
-import { MONACO_VERSION } from './version.js';
-import { themeDefaultStyles } from '../../00theme.js';
-
-import type * as monaco from 'monaco-editor';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'dees-editor-monaco': DeesEditorMonaco;
-  }
-}
-
-@customElement('dees-editor-monaco')
-export class DeesEditorMonaco extends DeesElement {
-  // DEMO
-  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: Object
-  })
-  accessor contentSubject = new domtools.plugins.smartrx.rxjs.Subject<string>();
-
-  @property({
-    type: Boolean
-  })
-  accessor wordWrap: monaco.editor.IStandaloneEditorConstructionOptions['wordWrap'] = 'off';
-
-  private monacoThemeSubscription: domtools.plugins.smartrx.rxjs.Subscription | null = null;
-
-  constructor() {
-    super();
-    domtools.DomTools.setupDomTools();
-  }
-
-  public static styles = [
-    themeDefaultStyles,
-    cssManager.defaultStyles,
-    css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
-      :host {
-      }
-
-      * {
-        box-sizing: border-box;
-      }
-
-      #container {
-        position: absolute;
-        height: 100%;
-        width: 100%;
-      }
-    `,
-  ];
-
-  public render(): TemplateResult {
-    return html`
-      <div class="mainbox">
-        <div id="container"></div>
-      </div>
-    `;
-  }
-
-  public async firstUpdated(
-    _changedProperties: Map<string | number | symbol, unknown>
-  ): Promise<void> {
-    super.firstUpdated(_changedProperties);
-    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();
-      const scriptUrl = `${monacoCdnBase}/min/vs/loader.js`;
-      const script = document.createElement('script');
-      script.src = scriptUrl;
-      script.onload = () => {
-        DeesEditorMonaco.monacoDeferred.resolve();
-      };
-      document.head.appendChild(script);
-    }
-    await DeesEditorMonaco.monacoDeferred.promise;
-
-    (window as any).require.config({
-      paths: { vs: `${monacoCdnBase}/min/vs` },
-    });
-    (window as any).require(['vs/editor/editor.main'], async () => {
-      // Get current theme from domtools
-      const domtoolsInstance = await this.domtoolsPromise;
-      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,
-        theme: initialTheme,
-        useShadowDOM: true,
-        fontSize: 16,
-        automaticLayout: true,
-        wordWrap: this.wordWrap
-      });
-
-      // Subscribe to theme changes
-      this.monacoThemeSubscription = domtoolsInstance.themeManager.themeObservable.subscribe((goBright: boolean) => {
-        const newTheme = goBright ? 'vs' : 'vs-dark';
-        editor.updateOptions({ theme: newTheme });
-      });
-
-      this.editorDeferred.resolve(editor);
-    });
-    const css = await (
-      await fetch(`${monacoCdnBase}/min/vs/editor/editor.main.css`)
-    ).text();
-    const styleElement = document.createElement('style');
-    styleElement.textContent = css;
-    this.shadowRoot.append(styleElement);
-
-
-    // editor is setup let do the rest
-    const editor = await this.editorDeferred.promise;
-    editor.onDidChangeModelContent(async eventArg => {
-      this.contentSubject.next(editor.getValue());
-    });
-    this.contentSubject.next(editor.getValue());
-  }
-
-  public async disconnectedCallback(): Promise<void> {
-    await super.disconnectedCallback();
-    if (this.monacoThemeSubscription) {
-      this.monacoThemeSubscription.unsubscribe();
-      this.monacoThemeSubscription = null;
-    }
-  }
-}

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

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

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

@@ -1,601 +0,0 @@
-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 } from '../../00group-runtime/index.js';
-import { WebContainerEnvironment } from '../../00group-runtime/index.js';
-import '../dees-editor-monaco/dees-editor-monaco.js';
-import '../dees-editor-filetree/dees-editor-filetree.js';
-import '../../dees-terminal/dees-terminal.js';
-import '../../dees-icon/dees-icon.js';
-import { DeesEditorMonaco } from '../dees-editor-monaco/dees-editor-monaco.js';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'dees-editor-workspace': DeesEditorWorkspace;
-  }
-}
-
-interface IOpenFile {
-  path: string;
-  name: string;
-  content: string;
-  modified: boolean;
-}
-
-@customElement('dees-editor-workspace')
-export class DeesEditorWorkspace extends DeesElement {
-  public static demo = () => {
-    const env = new WebContainerEnvironment();
-    return html`
-      <div style="width: 100%; height: 600px; position: relative;">
-        <dees-editor-workspace .executionEnvironment=${env}></dees-editor-workspace>
-      </div>
-    `;
-  };
-
-  // INSTANCE
-  @property({ type: Object })
-  accessor executionEnvironment: IExecutionEnvironment | null = null;
-
-  @property({ type: Boolean })
-  accessor showFileTree: boolean = true;
-
-  @property({ type: Boolean })
-  accessor showTerminal: boolean = true;
-
-  @property({ type: Number })
-  accessor fileTreeWidth: number = 250;
-
-  @property({ type: Number })
-  accessor terminalHeight: number = 200;
-
-  @state()
-  accessor openFiles: IOpenFile[] = [];
-
-  @state()
-  accessor activeFilePath: string = '';
-
-  @state()
-  accessor isTerminalCollapsed: boolean = false;
-
-  @state()
-  accessor isFileTreeCollapsed: boolean = false;
-
-  @state()
-  accessor isInitializing: boolean = true;
-
-  private editorElement: DeesEditorMonaco | null = null;
-  private initializationStarted: boolean = false;
-
-  public static styles = [
-    themeDefaultStyles,
-    cssManager.defaultStyles,
-    css`
-      :host {
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(0 0% 7%)')};
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      }
-
-      .workspace-container {
-        display: grid;
-        height: 100%;
-        width: 100%;
-      }
-
-      .workspace-container.with-filetree.with-terminal {
-        grid-template-columns: auto 1fr;
-        grid-template-rows: 1fr auto;
-        grid-template-areas:
-          "filetree editor"
-          "filetree terminal";
-      }
-
-      .workspace-container.with-filetree:not(.with-terminal) {
-        grid-template-columns: auto 1fr;
-        grid-template-rows: 1fr;
-        grid-template-areas: "filetree editor";
-      }
-
-      .workspace-container:not(.with-filetree).with-terminal {
-        grid-template-columns: 1fr;
-        grid-template-rows: 1fr auto;
-        grid-template-areas:
-          "editor"
-          "terminal";
-      }
-
-      .workspace-container:not(.with-filetree):not(.with-terminal) {
-        grid-template-columns: 1fr;
-        grid-template-rows: 1fr;
-        grid-template-areas: "editor";
-      }
-
-      .filetree-panel {
-        grid-area: filetree;
-        position: relative;
-        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')};
-        overflow: hidden;
-        transition: width 0.2s ease;
-      }
-
-      .filetree-panel.collapsed {
-        width: 0 !important;
-        border-right: none;
-      }
-
-      .editor-panel {
-        grid-area: editor;
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-      }
-
-      .terminal-panel {
-        grid-area: terminal;
-        position: relative;
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')};
-        overflow: hidden;
-        transition: height 0.2s ease;
-      }
-
-      .terminal-panel.collapsed {
-        height: 32px !important;
-      }
-
-      .panel-header {
-        height: 32px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 0 8px;
-        background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 8%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')};
-        font-size: 12px;
-        font-weight: 500;
-        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
-      }
-
-      .panel-header-title {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-      }
-
-      .panel-header-actions {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-      }
-
-      .panel-action {
-        width: 24px;
-        height: 24px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 4px;
-        cursor: pointer;
-        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
-        transition: all 0.15s ease;
-      }
-
-      .panel-action:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 18%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 80%)')};
-      }
-
-      .tabs-bar {
-        display: flex;
-        align-items: stretch;
-        height: 36px;
-        background: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(0 0% 8%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')};
-        overflow-x: auto;
-      }
-
-      .tab {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        padding: 0 12px;
-        min-width: 120px;
-        max-width: 200px;
-        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')};
-        cursor: pointer;
-        font-size: 12px;
-        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
-        background: ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 10%)')};
-        transition: all 0.15s ease;
-      }
-
-      .tab:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 92%)', 'hsl(0 0% 12%)')};
-      }
-
-      .tab.active {
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
-        border-bottom: 2px solid ${cssManager.bdTheme('hsl(210 100% 50%)', 'hsl(210 100% 60%)')};
-      }
-
-      .tab-name {
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .tab-close {
-        width: 16px;
-        height: 16px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 4px;
-        opacity: 0;
-        transition: all 0.15s ease;
-      }
-
-      .tab:hover .tab-close {
-        opacity: 1;
-      }
-
-      .tab-close:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 25%)')};
-      }
-
-      .tab-modified {
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        background: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
-      }
-
-      .editor-content {
-        flex: 1;
-        position: relative;
-      }
-
-      .terminal-content {
-        position: absolute;
-        top: 32px;
-        left: 0;
-        right: 0;
-        bottom: 0;
-      }
-
-      .empty-state {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 50%)')};
-        font-size: 14px;
-        gap: 8px;
-      }
-
-      .empty-state dees-icon {
-        width: 48px;
-        height: 48px;
-        opacity: 0.5;
-      }
-
-      .initializing {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
-        font-size: 14px;
-        gap: 12px;
-      }
-
-      dees-editor-filetree {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-      }
-
-      dees-editor-monaco {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-      }
-
-      dees-terminal {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-      }
-    `,
-  ];
-
-  public render(): TemplateResult {
-    const containerClasses = [
-      'workspace-container',
-      this.showFileTree && !this.isFileTreeCollapsed ? 'with-filetree' : '',
-      this.showTerminal ? 'with-terminal' : '',
-    ].filter(Boolean).join(' ');
-
-    if (this.isInitializing) {
-      return html`
-        <div class="initializing">
-          <dees-icon .icon=${'lucide:loader2'} iconSize="32"></dees-icon>
-          <span>Initializing workspace...</span>
-        </div>
-      `;
-    }
-
-    return html`
-      <div class="${containerClasses}">
-        ${this.showFileTree ? html`
-          <div
-            class="filetree-panel ${this.isFileTreeCollapsed ? 'collapsed' : ''}"
-            style="width: ${this.isFileTreeCollapsed ? 0 : this.fileTreeWidth}px"
-          >
-            <dees-editor-filetree
-              .executionEnvironment=${this.executionEnvironment}
-              .selectedPath=${this.activeFilePath}
-              @file-select=${this.handleFileSelect}
-            ></dees-editor-filetree>
-          </div>
-        ` : ''}
-
-        <div class="editor-panel">
-          <div class="tabs-bar">
-            ${this.openFiles.map(file => html`
-              <div
-                class="tab ${file.path === this.activeFilePath ? 'active' : ''}"
-                @click=${() => this.activateFile(file.path)}
-              >
-                ${file.modified ? html`<span class="tab-modified"></span>` : ''}
-                <span class="tab-name">${file.name}</span>
-                <span class="tab-close" @click=${(e: Event) => this.closeFile(e, file.path)}>
-                  <dees-icon .icon=${'lucide:x'} iconSize="12"></dees-icon>
-                </span>
-              </div>
-            `)}
-          </div>
-          <div class="editor-content">
-            ${this.openFiles.length === 0 ? html`
-              <div class="empty-state">
-                <dees-icon .icon=${'lucide:fileCode'} iconSize="48"></dees-icon>
-                <span>Select a file to edit</span>
-              </div>
-            ` : html`
-              <dees-editor-monaco
-                .content=${this.getActiveFileContent()}
-                .language=${this.getLanguageFromPath(this.activeFilePath)}
-                @content-change=${this.handleContentChange}
-              ></dees-editor-monaco>
-            `}
-          </div>
-        </div>
-
-        ${this.showTerminal ? html`
-          <div
-            class="terminal-panel ${this.isTerminalCollapsed ? 'collapsed' : ''}"
-            style="height: ${this.isTerminalCollapsed ? 32 : this.terminalHeight}px"
-          >
-            <div class="panel-header">
-              <div class="panel-header-title">
-                <dees-icon .icon=${'lucide:terminal'} iconSize="14"></dees-icon>
-                Terminal
-              </div>
-              <div class="panel-header-actions">
-                <div class="panel-action" @click=${this.toggleTerminal}>
-                  <dees-icon
-                    .icon=${this.isTerminalCollapsed ? 'lucide:chevronUp' : 'lucide:chevronDown'}
-                    iconSize="14"
-                  ></dees-icon>
-                </div>
-              </div>
-            </div>
-            <div class="terminal-content">
-              <dees-terminal
-                .executionEnvironment=${this.executionEnvironment}
-                .setupCommand=${''}
-              ></dees-terminal>
-            </div>
-          </div>
-        ` : ''}
-      </div>
-    `;
-  }
-
-  public async firstUpdated() {
-    if (this.executionEnvironment) {
-      await this.initializeWorkspace();
-    }
-  }
-
-  public async updated(changedProperties: Map<string, any>) {
-    if (changedProperties.has('executionEnvironment') && this.executionEnvironment) {
-      await this.initializeWorkspace();
-    }
-  }
-
-  private async initializeWorkspace() {
-    if (!this.executionEnvironment) return;
-
-    // Prevent double initialization
-    if (this.initializationStarted) return;
-    this.initializationStarted = true;
-
-    this.isInitializing = true;
-
-    try {
-      if (!this.executionEnvironment.ready) {
-        await this.executionEnvironment.init();
-      }
-    } catch (error) {
-      console.error('Failed to initialize workspace:', error);
-      // Reset flag to allow retry
-      this.initializationStarted = false;
-    } finally {
-      this.isInitializing = false;
-    }
-  }
-
-  private async handleFileSelect(e: CustomEvent<{ path: string; name: string }>) {
-    const { path, name } = e.detail;
-    await this.openFile(path, name);
-  }
-
-  private async openFile(path: string, name: string) {
-    // Check if already open
-    const existingFile = this.openFiles.find(f => f.path === path);
-    if (existingFile) {
-      this.activeFilePath = path;
-      return;
-    }
-
-    // Load file content
-    if (!this.executionEnvironment) return;
-
-    try {
-      const content = await this.executionEnvironment.readFile(path);
-      this.openFiles = [
-        ...this.openFiles,
-        { path, name, content, modified: false },
-      ];
-      this.activeFilePath = path;
-    } catch (error) {
-      console.error(`Failed to open file ${path}:`, error);
-    }
-  }
-
-  private activateFile(path: string) {
-    this.activeFilePath = path;
-  }
-
-  private closeFile(e: Event, path: string) {
-    e.stopPropagation();
-
-    const fileIndex = this.openFiles.findIndex(f => f.path === path);
-    if (fileIndex === -1) return;
-
-    // Check for unsaved changes
-    const file = this.openFiles[fileIndex];
-    if (file.modified) {
-      const confirmed = confirm(`${file.name} has unsaved changes. Close anyway?`);
-      if (!confirmed) return;
-    }
-
-    this.openFiles = this.openFiles.filter(f => f.path !== path);
-
-    // If closing the active file, activate another one
-    if (this.activeFilePath === path) {
-      if (this.openFiles.length > 0) {
-        const newIndex = Math.min(fileIndex, this.openFiles.length - 1);
-        this.activeFilePath = this.openFiles[newIndex].path;
-      } else {
-        this.activeFilePath = '';
-      }
-    }
-  }
-
-  private getActiveFileContent(): string {
-    const file = this.openFiles.find(f => f.path === this.activeFilePath);
-    return file?.content || '';
-  }
-
-  private handleContentChange(e: CustomEvent) {
-    const newContent = e.detail;
-    const fileIndex = this.openFiles.findIndex(f => f.path === this.activeFilePath);
-    if (fileIndex === -1) return;
-
-    const file = this.openFiles[fileIndex];
-    if (file.content !== newContent) {
-      this.openFiles = [
-        ...this.openFiles.slice(0, fileIndex),
-        { ...file, content: newContent, modified: true },
-        ...this.openFiles.slice(fileIndex + 1),
-      ];
-    }
-  }
-
-  private getLanguageFromPath(path: string): string {
-    const ext = path.split('.').pop()?.toLowerCase();
-    const languageMap: Record<string, string> = {
-      ts: 'typescript',
-      tsx: 'typescript',
-      js: 'javascript',
-      jsx: 'javascript',
-      json: 'json',
-      html: 'html',
-      css: 'css',
-      scss: 'scss',
-      less: 'less',
-      md: 'markdown',
-      yaml: 'yaml',
-      yml: 'yaml',
-      xml: 'xml',
-      sql: 'sql',
-      py: 'python',
-      sh: 'shell',
-      bash: 'shell',
-    };
-    return languageMap[ext || ''] || 'plaintext';
-  }
-
-  private toggleTerminal() {
-    this.isTerminalCollapsed = !this.isTerminalCollapsed;
-  }
-
-  public async saveActiveFile(): Promise<void> {
-    const file = this.openFiles.find(f => f.path === this.activeFilePath);
-    if (!file || !this.executionEnvironment) return;
-
-    try {
-      await this.executionEnvironment.writeFile(file.path, file.content);
-      const fileIndex = this.openFiles.findIndex(f => f.path === this.activeFilePath);
-      this.openFiles = [
-        ...this.openFiles.slice(0, fileIndex),
-        { ...file, modified: false },
-        ...this.openFiles.slice(fileIndex + 1),
-      ];
-    } catch (error) {
-      console.error('Failed to save file:', error);
-    }
-  }
-
-  public async saveAllFiles(): Promise<void> {
-    if (!this.executionEnvironment) return;
-
-    for (const file of this.openFiles.filter(f => f.modified)) {
-      try {
-        await this.executionEnvironment.writeFile(file.path, file.content);
-      } catch (error) {
-        console.error(`Failed to save ${file.path}:`, error);
-      }
-    }
-
-    this.openFiles = this.openFiles.map(f => ({ ...f, modified: false }));
-  }
-}

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

@@ -1 +0,0 @@
-export * from './dees-editor-workspace.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 '../../00group-workspace/dees-workspace-monaco/dees-workspace-monaco.js';
-import { DeesEditorMonaco } from '../../00group-editor/dees-editor-monaco/dees-editor-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-runtime/environments/WebContainerEnvironment.ts

@@ -1,5 +1,5 @@
 import * as webcontainer from '@webcontainer/api';
-import type { IExecutionEnvironment, IFileEntry, IProcessHandle } from '../interfaces/IExecutionEnvironment.js';
+import type { IExecutionEnvironment, IFileEntry, IFileWatcher, IProcessHandle } from '../interfaces/IExecutionEnvironment.js';
 
 /**
  * WebContainer-based execution environment.
@@ -123,6 +123,22 @@ export class WebContainerEnvironment implements IExecutionEnvironment {
     }
   }
 
+  public watch(
+    path: string,
+    callback: (event: 'rename' | 'change', filename: string | null) => void,
+    options?: { recursive?: boolean }
+  ): IFileWatcher {
+    this.ensureReady();
+    const watcher = this.container!.fs.watch(
+      path,
+      { recursive: options?.recursive ?? false },
+      callback
+    );
+    return {
+      stop: () => watcher.close(),
+    };
+  }
+
   // ============ Process Execution ============
 
   public async spawn(command: string, args: string[] = []): Promise<IProcessHandle> {

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

@@ -7,6 +7,14 @@ export interface IFileEntry {
   path: string;
 }
 
+/**
+ * Handle to a file system watcher
+ */
+export interface IFileWatcher {
+  /** Stop watching for changes */
+  stop(): void;
+}
+
 /**
  * Handle to a spawned process with I/O streams
  */
@@ -68,6 +76,19 @@ export interface IExecutionEnvironment {
    */
   exists(path: string): Promise<boolean>;
 
+  /**
+   * Watch a file or directory for changes
+   * @param path - Absolute path to watch
+   * @param callback - Called when changes occur
+   * @param options - Optional: { recursive: true } to watch subdirectories
+   * @returns Watcher handle with stop() method
+   */
+  watch(
+    path: string,
+    callback: (event: 'rename' | 'change', filename: string | null) => void,
+    options?: { recursive?: boolean }
+  ): IFileWatcher;
+
   // ============ Process Execution ============
 
   /**

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 { DeesWorkspaceTerminal } = await import('../../00group-workspace/dees-workspace-terminal/dees-workspace-terminal.js');
-    const terminal = new DeesTerminal();
+    const terminal = new DeesWorkspaceTerminal();
     terminal.setupCommand = this.terminalSetupCommand;
     this.currentTerminal = terminal;
     maincontainer.appendChild(terminal);
@@ -417,7 +417,6 @@ export class DeesSimpleAppDash extends DeesElement {
     terminal.style.opacity = '0';
     terminal.style.transform = 'translateY(8px) scale(0.99)';
     terminal.style.transition = 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)';
-    terminal.background = 'hsl(220 13% 8%)';
     terminal.style.boxShadow = '0 25px 50px -12px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.05)';
     terminal.style.maxWidth = `calc(${maincontainer.clientWidth}px -240px)`;
     terminal.style.maxHeight = `calc(${maincontainer.clientHeight}px - 24px)`;

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

@@ -0,0 +1,491 @@
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  cssManager,
+  state,
+} from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+import type { IExecutionEnvironment } from '../../00group-runtime/index.js';
+import '../../dees-icon/dees-icon.js';
+import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
+import type { IRunProcessEventDetail } from '../dees-workspace-terminal/interfaces.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-workspace-bottombar': DeesWorkspaceBottombar;
+  }
+}
+
+interface IOutdatedPackage {
+  name: string;
+  current: string;
+  wanted: string;
+  latest: string;
+  type: 'dependencies' | 'devDependencies';
+}
+
+@customElement('dees-workspace-bottombar')
+export class DeesWorkspaceBottombar extends DeesElement {
+  // INSTANCE
+  @property({ type: Object })
+  accessor executionEnvironment: IExecutionEnvironment | null = null;
+
+  // Script runner state
+  @state()
+  accessor scripts: Record<string, string> = {};
+
+  // Package checker state
+  @state()
+  accessor packageStatus: 'checking' | 'up-to-date' | 'updates-available' | 'error' | 'idle' = 'idle';
+
+  @state()
+  accessor outdatedPackages: IOutdatedPackage[] = [];
+
+  @state()
+  accessor isCheckingPackages: boolean = false;
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        height: 24px;
+        flex-shrink: 0;
+      }
+
+      .bottom-bar {
+        height: 24px;
+        display: flex;
+        align-items: center;
+        padding: 0 8px;
+        gap: 4px;
+        background: ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 6%)')};
+        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')};
+        font-size: 11px;
+        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
+      }
+
+      .widget {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 2px 6px;
+        border-radius: 3px;
+        cursor: pointer;
+        transition: background 0.15s ease, color 0.15s ease;
+        white-space: nowrap;
+      }
+
+      .widget:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
+      }
+
+      .widget dees-icon {
+        flex-shrink: 0;
+      }
+
+      .widget-separator {
+        width: 1px;
+        height: 14px;
+        background: ${cssManager.bdTheme('hsl(0 0% 80%)', 'hsl(0 0% 20%)')};
+        margin: 0 4px;
+      }
+
+      .widget.running {
+        color: ${cssManager.bdTheme('hsl(210 100% 45%)', 'hsl(210 100% 60%)')};
+      }
+
+      .widget.up-to-date {
+        color: ${cssManager.bdTheme('hsl(142 70% 35%)', 'hsl(142 70% 50%)')};
+      }
+
+      .widget.updates-available {
+        color: ${cssManager.bdTheme('hsl(38 92% 45%)', 'hsl(38 92% 55%)')};
+      }
+
+      .widget.error {
+        color: ${cssManager.bdTheme('hsl(0 70% 50%)', 'hsl(0 70% 60%)')};
+      }
+
+      @keyframes spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+      }
+
+      .spinning {
+        animation: spin 1s linear infinite;
+      }
+
+      .spacer {
+        flex: 1;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="bottom-bar">
+        <!-- Script Runner Widget -->
+        <div
+          class="widget"
+          @click=${this.handleScriptClick}
+          title="Run script"
+        >
+          <dees-icon
+            .icon=${'lucide:play'}
+            iconSize="12"
+          ></dees-icon>
+          <span>Scripts</span>
+        </div>
+
+        <div class="widget-separator"></div>
+
+        <!-- Package Checker Widget -->
+        <div
+          class="widget ${this.getPackageStatusClass()}"
+          @click=${this.handlePackageClick}
+          title="${this.getPackageTooltip()}"
+        >
+          <dees-icon
+            .icon=${this.getPackageIcon()}
+            iconSize="12"
+            class="${this.isCheckingPackages ? 'spinning' : ''}"
+          ></dees-icon>
+          <span>${this.getPackageStatusText()}</span>
+        </div>
+
+        <div class="spacer"></div>
+
+        <!-- Future widgets can be added here -->
+      </div>
+    `;
+  }
+
+  async firstUpdated() {
+    await this.loadScripts();
+    await this.checkPackages();
+  }
+
+  async updated(changedProperties: Map<string, any>) {
+    if (changedProperties.has('executionEnvironment') && this.executionEnvironment) {
+      await this.loadScripts();
+      await this.checkPackages();
+    }
+  }
+
+  // ========== Script Runner ==========
+
+  private async loadScripts(): Promise<void> {
+    if (!this.executionEnvironment) return;
+
+    try {
+      const packageJsonExists = await this.executionEnvironment.exists('/package.json');
+      if (!packageJsonExists) {
+        this.scripts = {};
+        return;
+      }
+
+      const content = await this.executionEnvironment.readFile('/package.json');
+      const packageJson = JSON.parse(content);
+      this.scripts = packageJson.scripts || {};
+    } catch (error) {
+      console.warn('Failed to load scripts from package.json:', error);
+      this.scripts = {};
+    }
+  }
+
+  private async handleScriptClick(e: MouseEvent): Promise<void> {
+    e.stopPropagation();
+
+    const scriptNames = Object.keys(this.scripts);
+    if (scriptNames.length === 0) {
+      return;
+    }
+
+    const menuItems = scriptNames.map(name => ({
+      name: name,
+      iconName: 'lucide:terminal' as const,
+      action: async () => {
+        await this.runScript(name);
+      },
+    }));
+
+    await DeesContextmenu.openContextMenuWithOptions(e, menuItems);
+  }
+
+  private async runScript(scriptName: string): Promise<void> {
+    if (!this.executionEnvironment) return;
+
+    // Emit run-process event for the workspace to create a terminal tab
+    const detail: IRunProcessEventDetail = {
+      type: 'script',
+      label: scriptName,
+      command: 'pnpm',
+      args: ['run', scriptName],
+      metadata: { scriptName },
+    };
+
+    this.dispatchEvent(new CustomEvent('run-process', {
+      bubbles: true,
+      composed: true,
+      detail,
+    }));
+  }
+
+  // ========== Package Checker ==========
+
+  private async checkPackages(): Promise<void> {
+    if (!this.executionEnvironment) {
+      this.packageStatus = 'idle';
+      return;
+    }
+
+    try {
+      const packageJsonExists = await this.executionEnvironment.exists('/package.json');
+      if (!packageJsonExists) {
+        this.packageStatus = 'idle';
+        return;
+      }
+
+      this.packageStatus = 'checking';
+      this.isCheckingPackages = true;
+
+      // Run pnpm outdated --json
+      const process = await this.executionEnvironment.spawn('pnpm', ['outdated', '--json']);
+
+      let output = '';
+      await process.output.pipeTo(
+        new WritableStream({
+          write: (chunk) => {
+            output += chunk;
+          },
+        })
+      );
+
+      const exitCode = await process.exit;
+
+      // pnpm outdated returns exit code 1 if there are outdated packages
+      if (exitCode === 0) {
+        // No outdated packages
+        this.packageStatus = 'up-to-date';
+        this.outdatedPackages = [];
+      } else {
+        // Parse outdated packages
+        try {
+          const outdatedData = JSON.parse(output);
+          this.outdatedPackages = this.parseOutdatedPackages(outdatedData);
+          this.packageStatus = this.outdatedPackages.length > 0 ? 'updates-available' : 'up-to-date';
+        } catch {
+          // If parsing fails but exit code is 1, assume there are updates
+          this.packageStatus = 'updates-available';
+          this.outdatedPackages = [];
+        }
+      }
+    } catch (error) {
+      console.warn('Failed to check for package updates:', error);
+      this.packageStatus = 'error';
+    } finally {
+      this.isCheckingPackages = false;
+    }
+  }
+
+  private parseOutdatedPackages(data: any): IOutdatedPackage[] {
+    const packages: IOutdatedPackage[] = [];
+
+    // pnpm outdated --json returns an object with package names as keys
+    if (typeof data === 'object' && data !== null) {
+      for (const [name, info] of Object.entries(data)) {
+        const pkgInfo = info as any;
+        packages.push({
+          name,
+          current: pkgInfo.current || 'unknown',
+          wanted: pkgInfo.wanted || pkgInfo.current || 'unknown',
+          latest: pkgInfo.latest || pkgInfo.wanted || 'unknown',
+          type: pkgInfo.dependencyType === 'devDependencies' ? 'devDependencies' : 'dependencies',
+        });
+      }
+    }
+
+    return packages;
+  }
+
+  private async handlePackageClick(e: MouseEvent): Promise<void> {
+    e.stopPropagation();
+
+    if (this.isCheckingPackages) return;
+
+    const menuItems: Parameters<typeof DeesContextmenu.openContextMenuWithOptions>[1] = [];
+
+    // Refresh option - show output in terminal
+    menuItems.push({
+      name: 'Check for updates',
+      iconName: 'lucide:refreshCw',
+      action: async () => {
+        // Create terminal tab to show pnpm outdated output
+        const detail: IRunProcessEventDetail = {
+          type: 'package-update',
+          label: 'check packages',
+          command: 'pnpm',
+          args: ['outdated'],
+        };
+
+        this.dispatchEvent(new CustomEvent('run-process', {
+          bubbles: true,
+          composed: true,
+          detail,
+        }));
+
+        // Also refresh the widget status silently after a delay
+        setTimeout(() => this.checkPackages(), 3000);
+      },
+    });
+
+    if (this.outdatedPackages.length > 0) {
+      menuItems.push({ divider: true });
+
+      // Show outdated packages (max 10)
+      const displayPackages = this.outdatedPackages.slice(0, 10);
+      for (const pkg of displayPackages) {
+        menuItems.push({
+          name: `${pkg.name}: ${pkg.current} → ${pkg.latest}`,
+          iconName: 'lucide:package',
+          action: async () => {
+            // Update single package
+            await this.updatePackage(pkg.name);
+          },
+        });
+      }
+
+      if (this.outdatedPackages.length > 10) {
+        menuItems.push({
+          name: `... and ${this.outdatedPackages.length - 10} more`,
+          iconName: 'lucide:moreHorizontal',
+          action: async () => {},
+        });
+      }
+
+      menuItems.push({ divider: true });
+
+      menuItems.push({
+        name: 'Update all packages',
+        iconName: 'lucide:arrowUpCircle',
+        action: async () => {
+          await this.updateAllPackages();
+        },
+      });
+    }
+
+    await DeesContextmenu.openContextMenuWithOptions(e, menuItems);
+  }
+
+  private async updatePackage(packageName: string): Promise<void> {
+    if (!this.executionEnvironment) return;
+
+    // Emit run-process event for the workspace to create a terminal tab
+    const detail: IRunProcessEventDetail = {
+      type: 'package-update',
+      label: `update ${packageName}`,
+      command: 'pnpm',
+      args: ['update', packageName],
+      metadata: { packageName },
+    };
+
+    this.dispatchEvent(new CustomEvent('run-process', {
+      bubbles: true,
+      composed: true,
+      detail,
+    }));
+  }
+
+  private async updateAllPackages(): Promise<void> {
+    if (!this.executionEnvironment) return;
+
+    // Emit run-process event for the workspace to create a terminal tab
+    const detail: IRunProcessEventDetail = {
+      type: 'package-update',
+      label: 'update all',
+      command: 'pnpm',
+      args: ['update'],
+    };
+
+    this.dispatchEvent(new CustomEvent('run-process', {
+      bubbles: true,
+      composed: true,
+      detail,
+    }));
+  }
+
+  // ========== Helper Methods ==========
+
+  private getPackageStatusClass(): string {
+    if (this.isCheckingPackages) return '';
+    return this.packageStatus;
+  }
+
+  private getPackageIcon(): string {
+    if (this.isCheckingPackages) return 'lucide:loader2';
+
+    switch (this.packageStatus) {
+      case 'up-to-date':
+        return 'lucide:checkCircle';
+      case 'updates-available':
+        return 'lucide:alertCircle';
+      case 'error':
+        return 'lucide:xCircle';
+      default:
+        return 'lucide:package';
+    }
+  }
+
+  private getPackageStatusText(): string {
+    if (this.isCheckingPackages) return 'Checking...';
+
+    switch (this.packageStatus) {
+      case 'up-to-date':
+        return 'Up to date';
+      case 'updates-available':
+        return `${this.outdatedPackages.length} update${this.outdatedPackages.length !== 1 ? 's' : ''}`;
+      case 'error':
+        return 'Check failed';
+      default:
+        return 'Packages';
+    }
+  }
+
+  private getPackageTooltip(): string {
+    if (this.isCheckingPackages) return 'Checking for package updates...';
+
+    switch (this.packageStatus) {
+      case 'up-to-date':
+        return 'All packages are up to date';
+      case 'updates-available':
+        return `${this.outdatedPackages.length} package update${this.outdatedPackages.length !== 1 ? 's' : ''} available`;
+      case 'error':
+        return 'Failed to check for updates. Click to retry.';
+      default:
+        return 'Click to check for package updates';
+    }
+  }
+
+  // ========== Public Methods ==========
+
+  /**
+   * Manually trigger a package check
+   */
+  public async refreshPackageStatus(): Promise<void> {
+    await this.checkPackages();
+  }
+
+  /**
+   * Manually reload scripts from package.json
+   */
+  public async refreshScripts(): Promise<void> {
+    await this.loadScripts();
+  }
+}

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

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

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

@@ -0,0 +1,938 @@
+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, IFileWatcher } 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-workspace-filetree': DeesWorkspaceFiletree;
+  }
+}
+
+interface ITreeNode extends IFileEntry {
+  children?: ITreeNode[];
+  expanded?: boolean;
+  level: number;
+}
+
+@customElement('dees-workspace-filetree')
+export class DeesWorkspaceFiletree extends DeesElement {
+  public static demo = () => html`
+    <div style="width: 300px; height: 400px; position: relative;">
+      <dees-workspace-filetree></dees-workspace-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;
+
+  // Clipboard state for copy/paste operations
+  private clipboardPath: string | null = null;
+  private clipboardOperation: 'copy' | 'cut' | null = null;
+
+  // File watcher for auto-refresh
+  private fileWatcher: IFileWatcher | null = null;
+  private refreshDebounceTimeout: ReturnType<typeof setTimeout> | null = null;
+  private lastExecutionEnvironment: IExecutionEnvironment | null = null;
+
+  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;
+      }
+
+      .filetree-toolbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 36px;
+        padding: 0 12px;
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')};
+        background: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(0 0% 8%)')};
+        position: sticky;
+        top: 0;
+        z-index: 1;
+      }
+
+      .toolbar-title {
+        font-size: 11px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
+      }
+
+      .toolbar-actions {
+        display: flex;
+        gap: 4px;
+      }
+
+      .toolbar-button {
+        padding: 4px;
+        border-radius: 4px;
+        cursor: pointer;
+        opacity: 0.7;
+        transition: opacity 0.15s, background 0.15s;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: ${cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 70%)')};
+      }
+
+      .toolbar-button:hover {
+        opacity: 1;
+        background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.08)', 'hsl(0 0% 100% / 0.1)')};
+      }
+    `,
+  ];
+
+  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>
+      `;
+    }
+
+    return html`
+      <div class="filetree-toolbar">
+        <span class="toolbar-title">Explorer</span>
+        <div class="toolbar-actions">
+          <div class="toolbar-button" @click=${() => this.createNewFile('/')} title="New File">
+            <dees-icon .icon=${'lucide:filePlus'} iconSize="16"></dees-icon>
+          </div>
+          <div class="toolbar-button" @click=${() => this.createNewFolder('/')} title="New Folder">
+            <dees-icon .icon=${'lucide:folderPlus'} iconSize="16"></dees-icon>
+          </div>
+        </div>
+      </div>
+      ${this.treeData.length === 0
+        ? html`<div class="empty">No files found.</div>`
+        : html`
+            <div class="tree-container" @contextmenu=${this.handleEmptySpaceContextMenu}>
+              ${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') {
+      // Directory-specific options
+      menuItems.push(
+        {
+          name: 'New File',
+          iconName: 'filePlus',
+          action: async () => this.createNewFile(node.path),
+        },
+        {
+          name: 'New Folder',
+          iconName: 'folderPlus',
+          action: async () => this.createNewFolder(node.path),
+        },
+        { divider: true }
+      );
+    }
+
+    // Common options for both files and directories
+    menuItems.push(
+      {
+        name: 'Rename',
+        iconName: 'pencil',
+        action: async () => this.renameItem(node),
+      },
+      {
+        name: 'Duplicate',
+        iconName: 'files',
+        action: async () => this.duplicateItem(node),
+      },
+      {
+        name: 'Copy',
+        iconName: 'copy',
+        action: async () => this.copyItem(node),
+      }
+    );
+
+    // Paste option (only for directories and when clipboard has content)
+    if (node.type === 'directory' && this.clipboardPath) {
+      menuItems.push({
+        name: 'Paste',
+        iconName: 'clipboard',
+        action: async () => this.pasteItem(node.path),
+      });
+    }
+
+    menuItems.push(
+      { divider: true },
+      {
+        name: 'Delete',
+        iconName: 'trash2',
+        action: async () => this.deleteItem(node),
+      }
+    );
+
+    await DeesContextmenu.openContextMenuWithOptions(e, menuItems);
+  }
+
+  private async handleEmptySpaceContextMenu(e: MouseEvent) {
+    // Only trigger if clicking on the container itself, not a tree item
+    const target = e.target as HTMLElement;
+    if (target.closest('.tree-item')) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    const menuItems: any[] = [
+      {
+        name: 'New File',
+        iconName: 'filePlus',
+        action: async () => this.createNewFile('/'),
+      },
+      {
+        name: 'New Folder',
+        iconName: 'folderPlus',
+        action: async () => this.createNewFolder('/'),
+      },
+    ];
+
+    // Add Paste option if clipboard has content
+    if (this.clipboardPath) {
+      menuItems.push(
+        { divider: true },
+        {
+          name: 'Paste',
+          iconName: 'clipboard',
+          action: async () => this.pasteItem('/'),
+        }
+      );
+    }
+
+    await DeesContextmenu.openContextMenuWithOptions(e, menuItems);
+  }
+
+  private async showInputModal(options: {
+    heading: string;
+    label: string;
+    value?: string;
+    buttonName?: string;
+  }): Promise<string | null> {
+    return new Promise(async (resolve) => {
+      const modal = await DeesModal.createAndShow({
+        heading: options.heading,
+        width: 'small',
+        content: html`
+          <dees-input-text
+            .label=${options.label}
+            .value=${options.value || ''}
+          ></dees-input-text>
+        `,
+        menuOptions: [
+          {
+            name: 'Cancel',
+            action: async (modalRef) => {
+              await modalRef.destroy();
+              resolve(null);
+            },
+          },
+          {
+            name: options.buttonName || 'Create',
+            action: async (modalRef) => {
+              // Query the input element directly and read its value
+              const contentEl = modalRef.shadowRoot?.querySelector('.modal .content');
+              const inputElement = contentEl?.querySelector('dees-input-text') as DeesInputText | null;
+              const inputValue = inputElement?.value?.trim() || '';
+
+              await modalRef.destroy();
+              resolve(inputValue || 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);
+    }
+  }
+
+  /**
+   * Rename a file or folder
+   */
+  private async renameItem(node: ITreeNode) {
+    if (!this.executionEnvironment) return;
+
+    const newName = await this.showInputModal({
+      heading: 'Rename',
+      label: 'New name',
+      value: node.name,
+      buttonName: 'Rename',
+    });
+    if (!newName || newName === node.name) return;
+
+    // Calculate new path
+    const parentPath = node.path.substring(0, node.path.lastIndexOf('/')) || '/';
+    const newPath = parentPath === '/' ? `/${newName}` : `${parentPath}/${newName}`;
+
+    try {
+      if (node.type === 'file') {
+        // For files: read content, write to new path, delete old
+        const content = await this.executionEnvironment.readFile(node.path);
+        await this.executionEnvironment.writeFile(newPath, content);
+        await this.executionEnvironment.rm(node.path);
+      } else {
+        // For directories: recursively copy contents then delete old
+        await this.copyDirectoryContents(node.path, newPath);
+        await this.executionEnvironment.rm(node.path, { recursive: true });
+      }
+      await this.refresh();
+      this.dispatchEvent(
+        new CustomEvent('item-renamed', {
+          detail: { oldPath: node.path, newPath, type: node.type },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    } catch (error) {
+      console.error('Failed to rename item:', error);
+    }
+  }
+
+  /**
+   * Duplicate a file or folder
+   */
+  private async duplicateItem(node: ITreeNode) {
+    if (!this.executionEnvironment) return;
+
+    const parentPath = node.path.substring(0, node.path.lastIndexOf('/')) || '/';
+    let newName: string;
+
+    if (node.type === 'file') {
+      // Add _copy before extension
+      const lastDot = node.name.lastIndexOf('.');
+      if (lastDot > 0) {
+        const baseName = node.name.substring(0, lastDot);
+        const ext = node.name.substring(lastDot);
+        newName = `${baseName}_copy${ext}`;
+      } else {
+        newName = `${node.name}_copy`;
+      }
+    } else {
+      newName = `${node.name}_copy`;
+    }
+
+    const newPath = parentPath === '/' ? `/${newName}` : `${parentPath}/${newName}`;
+
+    try {
+      if (node.type === 'file') {
+        const content = await this.executionEnvironment.readFile(node.path);
+        await this.executionEnvironment.writeFile(newPath, content);
+      } else {
+        await this.copyDirectoryContents(node.path, newPath);
+      }
+      await this.refresh();
+      this.dispatchEvent(
+        new CustomEvent('item-duplicated', {
+          detail: { sourcePath: node.path, newPath, type: node.type },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    } catch (error) {
+      console.error('Failed to duplicate item:', error);
+    }
+  }
+
+  /**
+   * Copy item path to clipboard
+   */
+  private async copyItem(node: ITreeNode) {
+    this.clipboardPath = node.path;
+    this.clipboardOperation = 'copy';
+  }
+
+  /**
+   * Paste copied item to target directory
+   */
+  private async pasteItem(targetPath: string) {
+    if (!this.executionEnvironment || !this.clipboardPath) return;
+
+    // Get the name from clipboard path
+    const name = this.clipboardPath.split('/').pop() || 'pasted';
+    const newPath = targetPath === '/' ? `/${name}` : `${targetPath}/${name}`;
+
+    try {
+      // Check if source exists
+      if (!(await this.executionEnvironment.exists(this.clipboardPath))) {
+        console.error('Source file no longer exists');
+        this.clipboardPath = null;
+        this.clipboardOperation = null;
+        return;
+      }
+
+      // Check if it's a file or directory by trying to read as file
+      try {
+        const content = await this.executionEnvironment.readFile(this.clipboardPath);
+        await this.executionEnvironment.writeFile(newPath, content);
+      } catch {
+        // If reading fails, it's a directory
+        await this.copyDirectoryContents(this.clipboardPath, newPath);
+      }
+
+      await this.refresh();
+      this.dispatchEvent(
+        new CustomEvent('item-pasted', {
+          detail: { sourcePath: this.clipboardPath, targetPath: newPath },
+          bubbles: true,
+          composed: true,
+        })
+      );
+
+      // Clear clipboard after paste
+      this.clipboardPath = null;
+      this.clipboardOperation = null;
+    } catch (error) {
+      console.error('Failed to paste item:', error);
+    }
+  }
+
+  /**
+   * Recursively copy directory contents to a new path
+   */
+  private async copyDirectoryContents(sourcePath: string, destPath: string) {
+    if (!this.executionEnvironment) return;
+
+    // Create destination directory
+    await this.executionEnvironment.mkdir(destPath);
+
+    // Read source directory contents
+    const entries = await this.executionEnvironment.readDir(sourcePath);
+
+    for (const entry of entries) {
+      const srcEntryPath = sourcePath === '/' ? `/${entry.name}` : `${sourcePath}/${entry.name}`;
+      const destEntryPath = destPath === '/' ? `/${entry.name}` : `${destPath}/${entry.name}`;
+
+      if (entry.type === 'directory') {
+        await this.copyDirectoryContents(srcEntryPath, destEntryPath);
+      } else {
+        const content = await this.executionEnvironment.readFile(srcEntryPath);
+        await this.executionEnvironment.writeFile(destEntryPath, content);
+      }
+    }
+  }
+
+  public async firstUpdated() {
+    await this.loadTree();
+  }
+
+  public async updated(changedProperties: Map<string, any>) {
+    if (changedProperties.has('executionEnvironment')) {
+      // Stop watching the old environment
+      if (this.lastExecutionEnvironment !== this.executionEnvironment) {
+        this.stopFileWatcher();
+        this.lastExecutionEnvironment = this.executionEnvironment;
+      }
+
+      if (this.executionEnvironment) {
+        await this.loadTree();
+        this.startFileWatcher();
+      }
+    }
+  }
+
+  public async disconnectedCallback() {
+    await super.disconnectedCallback();
+    this.stopFileWatcher();
+    if (this.refreshDebounceTimeout) {
+      clearTimeout(this.refreshDebounceTimeout);
+      this.refreshDebounceTimeout = null;
+    }
+  }
+
+  private startFileWatcher() {
+    if (!this.executionEnvironment || this.fileWatcher) return;
+
+    try {
+      this.fileWatcher = this.executionEnvironment.watch(
+        '/',
+        (_event, _filename) => {
+          // Debounce refresh to avoid excessive updates
+          if (this.refreshDebounceTimeout) {
+            clearTimeout(this.refreshDebounceTimeout);
+          }
+          this.refreshDebounceTimeout = setTimeout(() => {
+            this.refresh();
+          }, 300);
+        },
+        { recursive: true }
+      );
+    } catch (error) {
+      console.warn('File watching not supported:', error);
+    }
+  }
+
+  private stopFileWatcher() {
+    if (this.fileWatcher) {
+      this.fileWatcher.stop();
+      this.fileWatcher = null;
+    }
+  }
+
+  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-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

@@ -0,0 +1,255 @@
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  cssManager,
+  domtools,
+  state,
+} from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+import { DeesWorkspaceMonaco } from '../dees-workspace-monaco/dees-workspace-monaco.js';
+
+const deferred = domtools.plugins.smartpromise.defer();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-workspace-markdown': DeesWorkspaceMarkdown;
+  }
+}
+
+@customElement('dees-workspace-markdown')
+export class DeesWorkspaceMarkdown extends DeesElement {
+  public static demo = () => html`<dees-workspace-markdown></dees-workspace-markdown>`;
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+
+      .splitContainer {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+      }
+
+      .editorContainer {
+        position: relative;
+        height: 100%;
+        min-width: 100px;
+        overflow: hidden;
+      }
+
+      .resizeHandle {
+        width: 6px;
+        height: 100%;
+        background: ${cssManager.bdTheme('#e5e7eb', '#30363d')};
+        cursor: col-resize;
+        flex-shrink: 0;
+        transition: background 0.15s ease;
+        position: relative;
+      }
+
+      .resizeHandle:hover,
+      .resizeHandle.dragging {
+        background: ${cssManager.bdTheme('#3b82f6', '#58a6ff')};
+      }
+
+      .resizeHandle::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 2px;
+        height: 32px;
+        background: ${cssManager.bdTheme('#9ca3af', '#6e7681')};
+        border-radius: 1px;
+        opacity: 0.6;
+      }
+
+      .resizeHandle:hover::after,
+      .resizeHandle.dragging::after {
+        background: ${cssManager.bdTheme('#ffffff', '#ffffff')};
+        opacity: 1;
+      }
+
+      .outletContainer {
+        position: relative;
+        height: 100%;
+        min-width: 100px;
+        background: ${cssManager.bdTheme('#ffffff', '#0d1117')};
+        color: ${cssManager.bdTheme('#24292f', '#e6edf3')};
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
+        padding: 20px;
+        overflow-y: auto;
+        box-sizing: border-box;
+      }
+
+      /* Prevent text selection while dragging */
+      .splitContainer.dragging {
+        user-select: none;
+      }
+
+      .splitContainer.dragging .editorContainer,
+      .splitContainer.dragging .outletContainer {
+        pointer-events: none;
+      }
+    `,
+  ];
+
+  /**
+   * Initial split ratio for the editor (left) panel.
+   * Value from 0 to 100 representing percentage width.
+   * Default is 50 (50/50 split).
+   */
+  @property({ type: Number })
+  accessor splitRatio: number = 50;
+
+  /**
+   * Minimum width percentage for either panel.
+   */
+  @property({ type: Number })
+  accessor minPanelSize: number = 10;
+
+  @state()
+  accessor currentSplitRatio: number = 50;
+
+  @state()
+  accessor isDragging: boolean = false;
+
+  private resizeHandleElement: HTMLElement;
+  private containerElement: HTMLElement;
+
+  public render() {
+    return html`
+      <div class="splitContainer ${this.isDragging ? 'dragging' : ''}">
+        <div class="editorContainer" style="width: ${this.currentSplitRatio}%">
+          <dees-workspace-monaco
+            .language=${'markdown'}
+            .content=${`# a test content
+
+This is test content that is of longer form an hopefully starts to wrap when I need it. And yes, it does perfectly. nice.
+
+Test | Hello
+--- | ---
+Yeah | So good
+
+This is real asset I think. Why would we want to leave that on the table? Can you tell my that?
+
+Why are we here?
+
+Do you know?
+
+> note:
+There is something going on.
+
+\`\`\`typescript
+const hello = 'yes'
+\`\`\`
+`}
+            wordWrap="bounded"
+          ></dees-workspace-monaco>
+        </div>
+        <div
+          class="resizeHandle ${this.isDragging ? 'dragging' : ''}"
+          @mousedown=${this.handleMouseDown}
+        ></div>
+        <div class="outletContainer" style="width: ${100 - this.currentSplitRatio}%">
+          <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
+        </div>
+      </div>
+    `;
+  }
+
+  public async firstUpdated(_changedPropertiesArg) {
+    await super.firstUpdated(_changedPropertiesArg);
+
+    // Initialize current ratio from property
+    this.currentSplitRatio = this.splitRatio;
+
+    // Cache elements
+    this.containerElement = this.shadowRoot.querySelector('.splitContainer');
+    this.resizeHandleElement = this.shadowRoot.querySelector('.resizeHandle');
+
+    const editor = this.shadowRoot.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
+
+    // Wire up markdown rendering
+    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 => {
+      await mdParsedResult.updateFromMarkdownString(contentArg)
+      const html = mdParsedResult.html;
+      markdownOutlet.updateHtmlText(html);
+    });
+  }
+
+  private handleMouseDown = (e: MouseEvent) => {
+    e.preventDefault();
+    this.isDragging = true;
+
+    document.addEventListener('mousemove', this.handleMouseMove);
+    document.addEventListener('mouseup', this.handleMouseUp);
+  };
+
+  private handleMouseMove = (e: MouseEvent) => {
+    if (!this.isDragging || !this.containerElement) return;
+
+    const containerRect = this.containerElement.getBoundingClientRect();
+    const containerWidth = containerRect.width;
+    const mouseX = e.clientX - containerRect.left;
+
+    // Calculate percentage, accounting for the resize handle width (6px)
+    let newRatio = (mouseX / containerWidth) * 100;
+
+    // Clamp to min/max
+    newRatio = Math.max(this.minPanelSize, Math.min(100 - this.minPanelSize, newRatio));
+
+    this.currentSplitRatio = newRatio;
+  };
+
+  private handleMouseUp = () => {
+    this.isDragging = false;
+    document.removeEventListener('mousemove', this.handleMouseMove);
+    document.removeEventListener('mouseup', this.handleMouseUp);
+
+    // Trigger resize on monaco editor
+    const editor = this.shadowRoot.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
+    if (editor) {
+      // Monaco needs to be notified of size changes
+      window.dispatchEvent(new Event('resize'));
+    }
+  };
+
+  async disconnectedCallback() {
+    await super.disconnectedCallback();
+    // Clean up event listeners
+    document.removeEventListener('mousemove', this.handleMouseMove);
+    document.removeEventListener('mouseup', this.handleMouseUp);
+  }
+
+  /**
+   * Programmatically set the split ratio
+   */
+  public setSplitRatio(ratio: number) {
+    this.currentSplitRatio = Math.max(this.minPanelSize, Math.min(100 - this.minPanelSize, ratio));
+  }
+
+  /**
+   * Reset to initial split ratio
+   */
+  public resetSplitRatio() {
+    this.currentSplitRatio = this.splitRatio;
+  }
+}

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.demo.ts

@@ -0,0 +1,289 @@
+import { html, css } from '@design.estate/dees-element';
+import '@design.estate/dees-wcctools/demotools';
+import '../../dees-panel/dees-panel.js';
+import type { DeesWorkspaceMarkdownoutlet } from './dees-workspace-markdownoutlet.js';
+
+export const demoFunc = () => html`
+  <dees-demowrapper>
+    <style>
+      ${css`
+        .demo-container {
+          display: flex;
+          flex-direction: column;
+          gap: 24px;
+          padding: 24px;
+          max-width: 900px;
+          margin: 0 auto;
+        }
+      `}
+    </style>
+
+    <div class="demo-container">
+      <!-- Demo 1: Headings -->
+      <dees-panel
+        .title=${'Headings'}
+        .subtitle=${'All heading levels from H1 to H6'}
+        .runAfterRender=${async (panelEl: HTMLElement) => {
+          const outlet = panelEl.querySelector('dees-workspace-markdownoutlet') as DeesWorkspaceMarkdownoutlet;
+          await outlet?.updateHtmlText(`
+            <h1>Heading Level 1</h1>
+            <h2>Heading Level 2</h2>
+            <h3>Heading Level 3</h3>
+            <h4>Heading Level 4</h4>
+            <h5>Heading Level 5</h5>
+            <h6>Heading Level 6</h6>
+          `);
+        }}
+      >
+        <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
+      </dees-panel>
+
+      <!-- Demo 2: Text Formatting -->
+      <dees-panel
+        .title=${'Text Formatting'}
+        .subtitle=${'Bold, italic, links, code, and keyboard input'}
+        .runAfterRender=${async (panelEl: HTMLElement) => {
+          const outlet = panelEl.querySelector('dees-workspace-markdownoutlet') as DeesWorkspaceMarkdownoutlet;
+          await outlet?.updateHtmlText(`
+            <p>This is a paragraph with <strong>bold text</strong> and <em>italic text</em>.</p>
+            <p>You can also use <strong><em>bold italic</em></strong> for emphasis.</p>
+            <p>Here's a <a href="#">link example</a> and some <code>inline code</code>.</p>
+            <p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text.</p>
+            <hr>
+            <p>Above is a horizontal rule separator.</p>
+          `);
+        }}
+      >
+        <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
+      </dees-panel>
+
+      <!-- Demo 3: Lists -->
+      <dees-panel
+        .title=${'Lists'}
+        .subtitle=${'Ordered, unordered, and task lists'}
+        .runAfterRender=${async (panelEl: HTMLElement) => {
+          const outlet = panelEl.querySelector('dees-workspace-markdownoutlet') as DeesWorkspaceMarkdownoutlet;
+          await outlet?.updateHtmlText(`
+            <h3>Unordered List</h3>
+            <ul>
+              <li>First item</li>
+              <li>Second item
+                <ul>
+                  <li>Nested item 1</li>
+                  <li>Nested item 2</li>
+                </ul>
+              </li>
+              <li>Third item</li>
+            </ul>
+
+            <h3>Ordered List</h3>
+            <ol>
+              <li>Step one</li>
+              <li>Step two</li>
+              <li>Step three</li>
+            </ol>
+
+            <h3>Task List</h3>
+            <ul>
+              <li class="task-list-item"><input type="checkbox" checked disabled> Completed task</li>
+              <li class="task-list-item"><input type="checkbox" disabled> Pending task</li>
+              <li class="task-list-item"><input type="checkbox" disabled> Another task</li>
+            </ul>
+          `);
+        }}
+      >
+        <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
+      </dees-panel>
+
+      <!-- Demo 4: Code Blocks -->
+      <dees-panel
+        .title=${'Code Blocks'}
+        .subtitle=${'Syntax highlighted code examples'}
+        .runAfterRender=${async (panelEl: HTMLElement) => {
+          const outlet = panelEl.querySelector('dees-workspace-markdownoutlet') as DeesWorkspaceMarkdownoutlet;
+          await outlet?.updateHtmlText(`
+            <p>Inline code: <code>const greeting = "Hello, World!";</code></p>
+
+            <h3>TypeScript Example</h3>
+            <pre><code><span class="hljs-keyword">import</span> { html, css } <span class="hljs-keyword">from</span> <span class="hljs-string">'@design.estate/dees-element'</span>;
+
+<span class="hljs-keyword">interface</span> <span class="hljs-title">IUser</span> {
+  <span class="hljs-attr">name</span>: <span class="hljs-built_in">string</span>;
+  <span class="hljs-attr">email</span>: <span class="hljs-built_in">string</span>;
+  <span class="hljs-attr">age</span>?: <span class="hljs-built_in">number</span>;
+}
+
+<span class="hljs-keyword">const</span> <span class="hljs-title">getUser</span> = <span class="hljs-keyword">async</span> (<span class="hljs-attr">id</span>: <span class="hljs-built_in">string</span>): <span class="hljs-built_in">Promise</span>&lt;IUser&gt; =&gt; {
+  <span class="hljs-keyword">const</span> response = <span class="hljs-keyword">await</span> fetch(\`/api/users/\${id}\`);
+  <span class="hljs-keyword">return</span> response.json();
+};</code></pre>
+
+            <h3>JSON Example</h3>
+            <pre><code>{
+  <span class="hljs-attr">"name"</span>: <span class="hljs-string">"dees-catalog"</span>,
+  <span class="hljs-attr">"version"</span>: <span class="hljs-string">"3.0.0"</span>,
+  <span class="hljs-attr">"dependencies"</span>: {
+    <span class="hljs-attr">"@design.estate/dees-element"</span>: <span class="hljs-string">"^2.0.0"</span>
+  }
+}</code></pre>
+          `);
+        }}
+      >
+        <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
+      </dees-panel>
+
+      <!-- Demo 5: Tables -->
+      <dees-panel
+        .title=${'Tables'}
+        .subtitle=${'Styled tables with alternating rows'}
+        .runAfterRender=${async (panelEl: HTMLElement) => {
+          const outlet = panelEl.querySelector('dees-workspace-markdownoutlet') as DeesWorkspaceMarkdownoutlet;
+          await outlet?.updateHtmlText(`
+            <table>
+              <thead>
+                <tr>
+                  <th>Feature</th>
+                  <th>Status</th>
+                  <th>Priority</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>Dark mode support</td>
+                  <td>Completed</td>
+                  <td>High</td>
+                </tr>
+                <tr>
+                  <td>Responsive design</td>
+                  <td>In Progress</td>
+                  <td>Medium</td>
+                </tr>
+                <tr>
+                  <td>Accessibility</td>
+                  <td>Planned</td>
+                  <td>High</td>
+                </tr>
+                <tr>
+                  <td>Documentation</td>
+                  <td>In Progress</td>
+                  <td>Low</td>
+                </tr>
+              </tbody>
+            </table>
+          `);
+        }}
+      >
+        <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
+      </dees-panel>
+
+      <!-- Demo 6: Blockquotes & Alerts -->
+      <dees-panel
+        .title=${'Blockquotes & Alerts'}
+        .subtitle=${'Quotes and GitHub-style alerts'}
+        .runAfterRender=${async (panelEl: HTMLElement) => {
+          const outlet = panelEl.querySelector('dees-workspace-markdownoutlet') as DeesWorkspaceMarkdownoutlet;
+          await outlet?.updateHtmlText(`
+            <blockquote>
+              <p>This is a standard blockquote. It's great for highlighting important information or quotes from other sources.</p>
+            </blockquote>
+
+            <div class="markdown-alert markdown-alert-note">
+              <p><strong>Note:</strong> This is an informational note to draw attention to important details.</p>
+            </div>
+
+            <div class="markdown-alert markdown-alert-tip">
+              <p><strong>Tip:</strong> Here's a helpful tip to improve your workflow.</p>
+            </div>
+
+            <div class="markdown-alert markdown-alert-important">
+              <p><strong>Important:</strong> This information is crucial for understanding the topic.</p>
+            </div>
+
+            <div class="markdown-alert markdown-alert-warning">
+              <p><strong>Warning:</strong> Be careful when performing this action.</p>
+            </div>
+
+            <div class="markdown-alert markdown-alert-caution">
+              <p><strong>Caution:</strong> This action may have unintended consequences.</p>
+            </div>
+          `);
+        }}
+      >
+        <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
+      </dees-panel>
+
+      <!-- Demo 7: Full Document -->
+      <dees-panel
+        .title=${'Full Document'}
+        .subtitle=${'A complete markdown document example'}
+        .runAfterRender=${async (panelEl: HTMLElement) => {
+          const outlet = panelEl.querySelector('dees-workspace-markdownoutlet') as DeesWorkspaceMarkdownoutlet;
+          await outlet?.updateHtmlText(`
+            <h1>Getting Started Guide</h1>
+            <p>Welcome to the <strong>dees-catalog</strong> component library. This guide will help you get up and running quickly.</p>
+
+            <h2>Installation</h2>
+            <p>Install the package using your preferred package manager:</p>
+            <pre><code><span class="hljs-comment"># Using pnpm (recommended)</span>
+pnpm add @design.estate/dees-catalog
+
+<span class="hljs-comment"># Using npm</span>
+npm install @design.estate/dees-catalog</code></pre>
+
+            <h2>Basic Usage</h2>
+            <p>Import and use components in your TypeScript files:</p>
+            <pre><code><span class="hljs-keyword">import</span> { DeesButton } <span class="hljs-keyword">from</span> <span class="hljs-string">'@design.estate/dees-catalog'</span>;
+
+<span class="hljs-comment">// Use in your templates</span>
+html\`&lt;dees-button&gt;Click me&lt;/dees-button&gt;\`</code></pre>
+
+            <div class="markdown-alert markdown-alert-tip">
+              <p><strong>Tip:</strong> Check the demo showcase for live examples of all components.</p>
+            </div>
+
+            <h2>Available Components</h2>
+            <table>
+              <thead>
+                <tr>
+                  <th>Component</th>
+                  <th>Description</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td><code>dees-button</code></td>
+                  <td>Primary button component</td>
+                </tr>
+                <tr>
+                  <td><code>dees-input-text</code></td>
+                  <td>Text input field</td>
+                </tr>
+                <tr>
+                  <td><code>dees-table</code></td>
+                  <td>Data table with sorting</td>
+                </tr>
+                <tr>
+                  <td><code>dees-modal</code></td>
+                  <td>Modal dialog</td>
+                </tr>
+              </tbody>
+            </table>
+
+            <h2>Next Steps</h2>
+            <ul>
+              <li>Explore the <a href="#">component documentation</a></li>
+              <li>Check out the <a href="#">theming guide</a></li>
+              <li>Join our <a href="#">community Discord</a></li>
+            </ul>
+
+            <blockquote>
+              <p>"The best component library is one that gets out of your way." — Design Systems Team</p>
+            </blockquote>
+          `);
+        }}
+      >
+        <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
+      </dees-panel>
+    </div>
+  </dees-demowrapper>
+`;

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

@@ -0,0 +1,406 @@
+import {
+  customElement,
+  DeesElement,
+  html,
+  type TemplateResult,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+import { demoFunc } from './dees-workspace-markdownoutlet.demo.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-workspace-markdownoutlet': DeesWorkspaceMarkdownoutlet;
+  }
+}
+
+@customElement('dees-workspace-markdownoutlet')
+export class DeesWorkspaceMarkdownoutlet extends DeesElement {
+  // DEMO
+  public static demo = demoFunc;
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
+        font-size: 16px;
+        line-height: 1.6;
+        color: ${cssManager.bdTheme('#24292f', '#e6edf3')};
+      }
+
+      .outlet {
+        word-wrap: break-word;
+      }
+
+      /* Headings */
+      h1, h2, h3, h4, h5, h6 {
+        margin-top: 24px;
+        margin-bottom: 16px;
+        font-weight: 600;
+        line-height: 1.25;
+        color: ${cssManager.bdTheme('#1f2328', '#f0f6fc')};
+      }
+
+      h1 {
+        font-size: 2em;
+        padding-bottom: 0.3em;
+        border-bottom: 1px solid ${cssManager.bdTheme('#d1d9e0', '#30363d')};
+      }
+
+      h2 {
+        font-size: 1.5em;
+        padding-bottom: 0.3em;
+        border-bottom: 1px solid ${cssManager.bdTheme('#d1d9e0', '#30363d')};
+      }
+
+      h3 {
+        font-size: 1.25em;
+      }
+
+      h4 {
+        font-size: 1em;
+      }
+
+      h5 {
+        font-size: 0.875em;
+      }
+
+      h6 {
+        font-size: 0.85em;
+        color: ${cssManager.bdTheme('#656d76', '#8b949e')};
+      }
+
+      /* Paragraphs and text */
+      p {
+        margin-top: 0;
+        margin-bottom: 16px;
+      }
+
+      /* Links */
+      a {
+        color: ${cssManager.bdTheme('#0969da', '#58a6ff')};
+        text-decoration: none;
+      }
+
+      a:hover {
+        text-decoration: underline;
+      }
+
+      /* Strong and emphasis */
+      strong {
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#1f2328', '#f0f6fc')};
+      }
+
+      em {
+        font-style: italic;
+      }
+
+      /* Lists */
+      ul, ol {
+        margin-top: 0;
+        margin-bottom: 16px;
+        padding-left: 2em;
+      }
+
+      li {
+        margin-top: 4px;
+      }
+
+      li + li {
+        margin-top: 4px;
+      }
+
+      ul ul, ul ol, ol ul, ol ol {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+
+      /* Blockquotes */
+      blockquote {
+        margin: 0 0 16px 0;
+        padding: 0 1em;
+        color: ${cssManager.bdTheme('#656d76', '#8b949e')};
+        border-left: 4px solid ${cssManager.bdTheme('#d1d9e0', '#30363d')};
+      }
+
+      blockquote > :first-child {
+        margin-top: 0;
+      }
+
+      blockquote > :last-child {
+        margin-bottom: 0;
+      }
+
+      /* Inline code */
+      code {
+        padding: 0.2em 0.4em;
+        margin: 0;
+        font-size: 85%;
+        font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+        background-color: ${cssManager.bdTheme('rgba(175, 184, 193, 0.2)', 'rgba(110, 118, 129, 0.4)')};
+        border-radius: 6px;
+        white-space: break-spaces;
+      }
+
+      /* Code blocks */
+      pre {
+        margin-top: 0;
+        margin-bottom: 16px;
+        padding: 16px;
+        overflow: auto;
+        font-size: 85%;
+        line-height: 1.45;
+        font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+        background-color: ${cssManager.bdTheme('#f6f8fa', '#161b22')};
+        border-radius: 6px;
+        word-wrap: normal;
+      }
+
+      pre code {
+        display: block;
+        padding: 0;
+        margin: 0;
+        overflow: visible;
+        line-height: inherit;
+        word-wrap: normal;
+        background-color: transparent;
+        border: 0;
+        font-size: 100%;
+        white-space: pre;
+      }
+
+      /* Tables */
+      table {
+        width: max-content;
+        max-width: 100%;
+        margin-top: 0;
+        margin-bottom: 16px;
+        border-spacing: 0;
+        border-collapse: collapse;
+        overflow: auto;
+        display: block;
+      }
+
+      table th {
+        font-weight: 600;
+        padding: 6px 13px;
+        border: 1px solid ${cssManager.bdTheme('#d1d9e0', '#30363d')};
+        background-color: ${cssManager.bdTheme('#f6f8fa', '#161b22')};
+        color: ${cssManager.bdTheme('#1f2328', '#e6edf3')};
+      }
+
+      table td {
+        padding: 6px 13px;
+        border: 1px solid ${cssManager.bdTheme('#d1d9e0', '#30363d')};
+        color: ${cssManager.bdTheme('#1f2328', '#e6edf3')};
+      }
+
+      table tr {
+        background-color: ${cssManager.bdTheme('#ffffff', '#0d1117')};
+        border-top: 1px solid ${cssManager.bdTheme('#d1d9e0', '#21262d')};
+      }
+
+      table tr:nth-child(2n) {
+        background-color: ${cssManager.bdTheme('#f6f8fa', '#161b22')};
+      }
+
+      /* Horizontal rules */
+      hr {
+        height: 4px;
+        padding: 0;
+        margin: 24px 0;
+        background-color: ${cssManager.bdTheme('#d1d9e0', '#30363d')};
+        border: 0;
+        border-radius: 2px;
+      }
+
+      /* Images */
+      img {
+        max-width: 100%;
+        box-sizing: border-box;
+        border-radius: 6px;
+      }
+
+      /* Task lists */
+      .task-list-item {
+        list-style-type: none;
+      }
+
+      .task-list-item input {
+        margin: 0 0.2em 0.25em -1.4em;
+        vertical-align: middle;
+      }
+
+      /* Definition lists */
+      dl {
+        padding: 0;
+      }
+
+      dl dt {
+        padding: 0;
+        margin-top: 16px;
+        font-size: 1em;
+        font-style: italic;
+        font-weight: 600;
+      }
+
+      dl dd {
+        padding: 0 16px;
+        margin-bottom: 16px;
+      }
+
+      /* Keyboard input */
+      kbd {
+        display: inline-block;
+        padding: 3px 5px;
+        font-size: 11px;
+        font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+        line-height: 10px;
+        color: ${cssManager.bdTheme('#1f2328', '#e6edf3')};
+        vertical-align: middle;
+        background-color: ${cssManager.bdTheme('#f6f8fa', '#161b22')};
+        border: 1px solid ${cssManager.bdTheme('#d1d9e0', '#30363d')};
+        border-radius: 6px;
+        box-shadow: inset 0 -1px 0 ${cssManager.bdTheme('#d1d9e0', '#30363d')};
+      }
+
+      /* Footnotes */
+      .footnotes {
+        font-size: 12px;
+        color: ${cssManager.bdTheme('#656d76', '#8b949e')};
+        border-top: 1px solid ${cssManager.bdTheme('#d1d9e0', '#30363d')};
+        padding-top: 16px;
+        margin-top: 32px;
+      }
+
+      /* Alerts/Admonitions */
+      .markdown-alert {
+        padding: 8px 16px;
+        margin-bottom: 16px;
+        border-left: 4px solid;
+        border-radius: 6px;
+      }
+
+      .markdown-alert-note {
+        border-color: ${cssManager.bdTheme('#0969da', '#58a6ff')};
+        background-color: ${cssManager.bdTheme('rgba(9, 105, 218, 0.1)', 'rgba(56, 139, 253, 0.1)')};
+      }
+
+      .markdown-alert-warning {
+        border-color: ${cssManager.bdTheme('#bf8700', '#d29922')};
+        background-color: ${cssManager.bdTheme('rgba(191, 135, 0, 0.1)', 'rgba(187, 128, 9, 0.1)')};
+      }
+
+      .markdown-alert-important {
+        border-color: ${cssManager.bdTheme('#8250df', '#a371f7')};
+        background-color: ${cssManager.bdTheme('rgba(130, 80, 223, 0.1)', 'rgba(163, 113, 247, 0.1)')};
+      }
+
+      .markdown-alert-caution {
+        border-color: ${cssManager.bdTheme('#cf222e', '#f85149')};
+        background-color: ${cssManager.bdTheme('rgba(207, 34, 46, 0.1)', 'rgba(248, 81, 73, 0.1)')};
+      }
+
+      .markdown-alert-tip {
+        border-color: ${cssManager.bdTheme('#1a7f37', '#3fb950')};
+        background-color: ${cssManager.bdTheme('rgba(26, 127, 55, 0.1)', 'rgba(46, 160, 67, 0.1)')};
+      }
+
+      /* Syntax highlighting for code blocks */
+      .hljs-comment,
+      .hljs-quote {
+        color: ${cssManager.bdTheme('#6a737d', '#8b949e')};
+      }
+
+      .hljs-keyword,
+      .hljs-selector-tag,
+      .hljs-addition {
+        color: ${cssManager.bdTheme('#d73a49', '#ff7b72')};
+      }
+
+      .hljs-number,
+      .hljs-string,
+      .hljs-meta .hljs-meta-string,
+      .hljs-literal,
+      .hljs-doctag,
+      .hljs-regexp {
+        color: ${cssManager.bdTheme('#032f62', '#a5d6ff')};
+      }
+
+      .hljs-title,
+      .hljs-section,
+      .hljs-name,
+      .hljs-selector-id,
+      .hljs-selector-class {
+        color: ${cssManager.bdTheme('#6f42c1', '#d2a8ff')};
+      }
+
+      .hljs-attribute,
+      .hljs-attr,
+      .hljs-variable,
+      .hljs-template-variable,
+      .hljs-class .hljs-title,
+      .hljs-type {
+        color: ${cssManager.bdTheme('#005cc5', '#79c0ff')};
+      }
+
+      .hljs-symbol,
+      .hljs-bullet,
+      .hljs-subst,
+      .hljs-meta,
+      .hljs-meta .hljs-keyword,
+      .hljs-selector-attr,
+      .hljs-selector-pseudo,
+      .hljs-link {
+        color: ${cssManager.bdTheme('#e36209', '#ffa657')};
+      }
+
+      .hljs-built_in,
+      .hljs-deletion {
+        color: ${cssManager.bdTheme('#b31d28', '#ffa198')};
+      }
+
+      .hljs-formula {
+        background-color: ${cssManager.bdTheme('#f6f8fa', '#161b22')};
+      }
+
+      .hljs-emphasis {
+        font-style: italic;
+      }
+
+      .hljs-strong {
+        font-weight: bold;
+      }
+    `,
+  ];
+
+  // INSTANCE
+  private outlet: HTMLElement;
+
+  public render(): TemplateResult {
+    return html`
+      <div class="outlet">
+        <h1>Markdown Preview</h1>
+        <p>Content will appear here when markdown is parsed.</p>
+      </div>
+    `;
+  }
+
+  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
+    await super.firstUpdated(_changedProperties);
+    this.outlet = this.shadowRoot.querySelector('.outlet');
+  }
+
+  public async updateHtmlText(htmlTextArg: string) {
+    await this.updateComplete;
+    if (!this.outlet) {
+      this.outlet = this.shadowRoot.querySelector('.outlet');
+    }
+    this.outlet.innerHTML = htmlTextArg;
+  }
+}

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

@@ -0,0 +1,245 @@
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+import { MONACO_VERSION } from './version.js';
+import { themeDefaultStyles } from '../../00theme.js';
+
+import type * as monaco from 'monaco-editor';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-workspace-monaco': DeesWorkspaceMonaco;
+  }
+}
+
+@customElement('dees-workspace-monaco')
+export class DeesWorkspaceMonaco extends DeesElement {
+  // DEMO
+  public static demo = () => html`<dees-workspace-monaco></dees-workspace-monaco>`;
+
+  // STATIC
+  public static monacoDeferred: ReturnType<typeof domtools.plugins.smartpromise.defer>;
+
+  // INSTANCE
+  public editorDeferred = domtools.plugins.smartpromise.defer<monaco.editor.IStandaloneCodeEditor>();
+
+  @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
+  })
+  accessor contentSubject = new domtools.plugins.smartrx.rxjs.Subject<string>();
+
+  @property({
+    type: Boolean
+  })
+  accessor wordWrap: monaco.editor.IStandaloneEditorConstructionOptions['wordWrap'] = 'off';
+
+  private monacoThemeSubscription: domtools.plugins.smartrx.rxjs.Subscription | null = null;
+  private isUpdatingFromExternal: boolean = false;
+
+  constructor() {
+    super();
+    domtools.DomTools.setupDomTools();
+  }
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
+      :host {
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      #container {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="mainbox">
+        <div id="container"></div>
+      </div>
+    `;
+  }
+
+  public async firstUpdated(
+    _changedProperties: Map<string | number | symbol, unknown>
+  ): Promise<void> {
+    super.firstUpdated(_changedProperties);
+    const container = this.shadowRoot.getElementById('container');
+    const monacoCdnBase = `https://cdn.jsdelivr.net/npm/monaco-editor@${MONACO_VERSION}`;
+
+    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 = () => {
+        DeesWorkspaceMonaco.monacoDeferred.resolve();
+      };
+      document.head.appendChild(script);
+    }
+    await DeesWorkspaceMonaco.monacoDeferred.promise;
+
+    (window as any).require.config({
+      paths: { vs: `${monacoCdnBase}/min/vs` },
+    });
+    (window as any).require(['vs/editor/editor.main'], async () => {
+      // Get current theme from domtools
+      const domtoolsInstance = await this.domtoolsPromise;
+      const isBright = domtoolsInstance.themeManager.goBrightBoolean;
+      const initialTheme = isBright ? 'vs' : 'vs-dark';
+
+      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,
+        hover: {
+          enabled: true,
+          delay: 300,
+          sticky: true,
+          above: false,
+        },
+      });
+
+      // Subscribe to theme changes
+      this.monacoThemeSubscription = domtoolsInstance.themeManager.themeObservable.subscribe((goBright: boolean) => {
+        const newTheme = goBright ? 'vs' : 'vs-dark';
+        editor.updateOptions({ theme: newTheme });
+      });
+
+      this.editorDeferred.resolve(editor);
+    });
+    const css = await (
+      await fetch(`${monacoCdnBase}/min/vs/editor/editor.main.css`)
+    ).text();
+    const styleElement = document.createElement('style');
+    styleElement.textContent = css;
+    this.shadowRoot.append(styleElement);
+
+
+    // editor is setup let do the rest
+    const editor = await this.editorDeferred.promise;
+    editor.onDidChangeModelContent(async eventArg => {
+      // 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) {
+      this.monacoThemeSubscription.unsubscribe();
+      this.monacoThemeSubscription = null;
+    }
+  }
+}

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-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-workspace/dees-workspace-terminal-preview/dees-workspace-terminal-preview.ts

@@ -0,0 +1,395 @@
+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;
+  private terminalThemeSubscription: any = null;
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        height: 200px;
+      }
+
+      .terminal-preview {
+        height: 100%;
+        border-radius: 8px;
+        overflow: hidden;
+        background: ${cssManager.bdTheme('#ffffff', '#000000')};
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')};
+        display: flex;
+        flex-direction: column;
+      }
+
+      .terminal-header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 12px;
+        background: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(0 0% 10%)')};
+        font-size: 12px;
+        font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
+        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')};
+        flex-shrink: 0;
+      }
+
+      .terminal-header-icon {
+        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 50%)')};
+      }
+
+      .terminal-header-command {
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', '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: ${cssManager.bdTheme('#ffffff', '#000000')};
+        color: ${cssManager.bdTheme('#333333', '#ffffff')};
+        display: none;
+        position: absolute;
+        white-space: nowrap;
+        z-index: 1;
+      }
+
+      .xterm .composition-view.active {
+        display: block;
+      }
+
+      .xterm .xterm-viewport {
+        background-color: ${cssManager.bdTheme('#ffffff', '#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: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(0 0% 8%)')};
+      }
+
+      .xterm .xterm-viewport::-webkit-scrollbar-thumb {
+        background: ${cssManager.bdTheme('hsl(0 0% 80%)', 'hsl(0 0% 25%)')};
+        border-radius: 4px;
+      }
+
+      .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 70%)', '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>
+    `;
+  }
+
+  /**
+   * Get terminal theme colors based on bright/dark mode
+   */
+  private getTerminalTheme(isBright: boolean) {
+    return isBright
+      ? {
+          background: '#ffffff',
+          foreground: '#333333',
+          cursor: '#333333',
+          cursorAccent: '#ffffff',
+          selectionBackground: 'rgba(0, 0, 0, 0.2)',
+        }
+      : {
+          background: '#000000',
+          foreground: '#cccccc',
+          cursor: '#cccccc',
+          cursorAccent: '#000000',
+          selectionBackground: 'rgba(255, 255, 255, 0.2)',
+        };
+  }
+
+  public async firstUpdated(
+    _changedProperties: Map<string | number | symbol, unknown>
+  ): Promise<void> {
+    super.firstUpdated(_changedProperties);
+
+    const container = this.shadowRoot?.getElementById('xterm-container');
+    if (!container) return;
+
+    // Get current theme from domtools
+    const domtoolsInstance = await this.domtoolsPromise;
+    const isBright = domtoolsInstance.themeManager.goBrightBoolean;
+
+    // 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: this.getTerminalTheme(isBright),
+      scrollback: 1000,
+    });
+
+    // Subscribe to theme changes
+    this.terminalThemeSubscription = domtoolsInstance.themeManager.themeObservable.subscribe((goBright: boolean) => {
+      if (this.terminal) {
+        this.terminal.options.theme = this.getTerminalTheme(goBright);
+      }
+    });
+
+    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.terminalThemeSubscription) {
+      this.terminalThemeSubscription.unsubscribe();
+      this.terminalThemeSubscription = 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

@@ -0,0 +1,860 @@
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  cssManager,
+  state,
+} from '@design.estate/dees-element';
+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 '../../dees-icon/dees-icon.js';
+import { TerminalTabManager } from './terminal-tab-manager.js';
+import type {
+  ITerminalTab,
+  ICreateTerminalTabOptions,
+  TTerminalTabType,
+} from './interfaces.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-workspace-terminal': DeesWorkspaceTerminal;
+  }
+}
+
+@customElement('dees-workspace-terminal')
+export class DeesWorkspaceTerminal extends DeesElement {
+  public static demo = () => {
+    const env = new WebContainerEnvironment();
+    return html`<dees-workspace-terminal .executionEnvironment=${env}></dees-workspace-terminal>`;
+  };
+
+  // INSTANCE
+  private resizeObserver: ResizeObserver;
+  private tabManager: TerminalTabManager;
+
+  /**
+   * The execution environment (required).
+   * Use WebContainerEnvironment for browser-based execution.
+   */
+  @property({ type: Object })
+  accessor executionEnvironment: IExecutionEnvironment | null = null;
+
+  @property()
+  accessor setupCommand = '';
+
+  /**
+   * Environment variables to set in the shell
+   */
+  @property()
+  accessor environmentVariables: { [key: string]: string } = {};
+
+  /**
+   * Width of the tab bar in pixels
+   */
+  @property({ type: Number })
+  accessor tabBarWidth: number = 160;
+
+  /**
+   * Whether to show the tab bar
+   */
+  @property({ type: Boolean })
+  accessor showTabBar: boolean = true;
+
+  // Tab state
+  @state()
+  accessor tabs: ITerminalTab[] = [];
+
+  @state()
+  accessor activeTabId: string | null = null;
+
+  // Theme subscription for dynamic theme updates
+  private terminalThemeSubscription: any = null;
+  private isBright: boolean = false;
+
+  /**
+   * 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();
+    this.tabManager = new TerminalTabManager();
+    this.resizeObserver = new ResizeObserver(() => {
+      this.handleResize();
+    });
+  }
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        background: ${cssManager.bdTheme('#ffffff', '#000000')};
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      .terminal-container {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        height: 100%;
+      }
+
+      .terminal-content {
+        flex: 1;
+        position: relative;
+        overflow: hidden;
+        background: ${cssManager.bdTheme('#ffffff', '#000000')};
+      }
+
+      #active-terminal-container {
+        position: absolute;
+        top: 20px;
+        left: 20px;
+        right: 20px;
+        bottom: 20px;
+      }
+
+      /* Tab bar on the right side */
+      .tab-bar {
+        display: flex;
+        flex-direction: column;
+        background: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(0 0% 7%)')};
+        border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')};
+        flex-shrink: 0;
+        overflow: hidden;
+      }
+
+      .tab-bar-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px 10px;
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')};
+        font-size: 11px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
+      }
+
+      .tab-bar-title {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .tab-bar-actions {
+        display: flex;
+        gap: 2px;
+      }
+
+      .tab-action {
+        width: 22px;
+        height: 22px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        cursor: pointer;
+        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
+        transition: all 0.15s ease;
+      }
+
+      .tab-action:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 15%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 80%)')};
+      }
+
+      .tab-list {
+        flex: 1;
+        overflow-y: auto;
+        padding: 4px;
+      }
+
+      .terminal-tab {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 10px;
+        margin-bottom: 2px;
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 12px;
+        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 60%)')};
+        transition: all 0.15s ease;
+      }
+
+      .terminal-tab:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 12%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 25%)', 'hsl(0 0% 80%)')};
+      }
+
+      .terminal-tab.active {
+        background: ${cssManager.bdTheme('hsl(210 100% 95%)', 'hsl(210 30% 15%)')};
+        color: ${cssManager.bdTheme('hsl(210 100% 40%)', 'hsl(210 100% 70%)')};
+      }
+
+      .terminal-tab.exited {
+        opacity: 0.7;
+      }
+
+      .tab-icon {
+        flex-shrink: 0;
+      }
+
+      .tab-icon.running {
+        color: ${cssManager.bdTheme('hsl(142 70% 40%)', 'hsl(142 70% 55%)')};
+      }
+
+      .tab-label {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .exit-badge {
+        font-size: 10px;
+        padding: 1px 5px;
+        border-radius: 8px;
+        font-weight: 600;
+        flex-shrink: 0;
+      }
+
+      .exit-badge.success {
+        background: ${cssManager.bdTheme('hsl(142 70% 90%)', 'hsl(142 30% 20%)')};
+        color: ${cssManager.bdTheme('hsl(142 70% 35%)', 'hsl(142 70% 60%)')};
+      }
+
+      .exit-badge.error {
+        background: ${cssManager.bdTheme('hsl(0 70% 93%)', 'hsl(0 30% 20%)')};
+        color: ${cssManager.bdTheme('hsl(0 70% 45%)', 'hsl(0 70% 60%)')};
+      }
+
+      .tab-close {
+        width: 18px;
+        height: 18px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        opacity: 0;
+        transition: all 0.15s ease;
+        flex-shrink: 0;
+      }
+
+      .terminal-tab:hover .tab-close {
+        opacity: 0.6;
+      }
+
+      .tab-close:hover {
+        opacity: 1 !important;
+        background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 25%)')};
+        color: ${cssManager.bdTheme('hsl(0 70% 50%)', 'hsl(0 70% 60%)')};
+      }
+
+      .empty-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 50%)')};
+        font-size: 13px;
+        gap: 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: ${cssManager.bdTheme('#ffffff', '#000000')};
+        color: ${cssManager.bdTheme('#333333', '#ffffff')};
+        display: none;
+        position: absolute;
+        white-space: nowrap;
+        z-index: 1;
+      }
+
+      .xterm .composition-view.active {
+        display: block;
+      }
+
+      .xterm .xterm-viewport {
+        background-color: ${cssManager.bdTheme('#ffffff', '#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;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const activeTab = this.activeTabId ? this.tabManager.getTab(this.activeTabId) : null;
+
+    return html`
+      <div class="terminal-container">
+        <!-- Main terminal area -->
+        <div class="terminal-content">
+          ${activeTab ? html`
+            <div id="active-terminal-container"></div>
+          ` : html`
+            <div class="empty-state">
+              <dees-icon .icon=${'lucide:terminal'} iconSize="32"></dees-icon>
+              <span>No terminal open</span>
+            </div>
+          `}
+        </div>
+
+        <!-- Vertical tab bar on the right -->
+        ${this.showTabBar ? html`
+          <div class="tab-bar" style="width: ${this.tabBarWidth}px">
+            <div class="tab-bar-header">
+              <span class="tab-bar-title">Terminals</span>
+              <div class="tab-bar-actions">
+                <div class="tab-action" @click=${this.handleAddTab} title="New Terminal">
+                  <dees-icon .icon=${'lucide:plus'} iconSize="14"></dees-icon>
+                </div>
+              </div>
+            </div>
+
+            <div class="tab-list">
+              ${this.tabs.map(tab => html`
+                <div
+                  class="terminal-tab ${tab.id === this.activeTabId ? 'active' : ''} ${tab.exited ? 'exited' : ''}"
+                  @click=${() => this.switchToTab(tab.id)}
+                >
+                  <dees-icon
+                    .icon=${tab.iconName}
+                    iconSize="14"
+                    class="tab-icon ${tab.process && !tab.exited ? 'running' : ''}"
+                  ></dees-icon>
+                  <span class="tab-label">${tab.label}</span>
+                  ${tab.exited ? html`
+                    <span class="exit-badge ${tab.exitCode === 0 ? 'success' : 'error'}">
+                      ${tab.exitCode}
+                    </span>
+                  ` : ''}
+                  ${tab.closeable ? html`
+                    <span class="tab-close" @click=${(e: Event) => this.handleTabClose(e, tab.id)}>
+                      <dees-icon .icon=${'lucide:x'} iconSize="12"></dees-icon>
+                    </span>
+                  ` : ''}
+                </div>
+              `)}
+            </div>
+          </div>
+        ` : ''}
+      </div>
+    `;
+  }
+
+  public async firstUpdated(): Promise<void> {
+    const domtoolsInstance = await this.domtoolsPromise;
+
+    // Get current theme
+    this.isBright = domtoolsInstance.themeManager.goBrightBoolean;
+
+    // Subscribe to theme changes
+    this.terminalThemeSubscription = domtoolsInstance.themeManager.themeObservable.subscribe(
+      (goBright: boolean) => {
+        this.isBright = goBright;
+        this.tabManager.updateAllThemes(goBright);
+      }
+    );
+
+    // Create default shell tab
+    await this.createShellTab();
+  }
+
+  async connectedCallback(): Promise<void> {
+    await super.connectedCallback();
+    this.resizeObserver.observe(this);
+  }
+
+  async disconnectedCallback(): Promise<void> {
+    this.resizeObserver.unobserve(this);
+    if (this.terminalThemeSubscription) {
+      this.terminalThemeSubscription.unsubscribe();
+      this.terminalThemeSubscription = null;
+    }
+    this.tabManager.disposeAll();
+    await super.disconnectedCallback();
+  }
+
+  // ========== Tab Management ==========
+
+  private async handleAddTab(): Promise<void> {
+    await this.createShellTab();
+  }
+
+  private handleTabClose(e: Event, tabId: string): void {
+    e.stopPropagation();
+    this.closeTab(tabId);
+  }
+
+  private switchToTab(tabId: string): void {
+    if (tabId === this.activeTabId) return;
+
+    const tab = this.tabManager.getTab(tabId);
+    if (!tab) return;
+
+    const previousTabId = this.activeTabId;
+
+    // Detach current terminal from DOM
+    if (this.activeTabId) {
+      this.detachActiveTerminal();
+    }
+
+    // Update active tab
+    this.activeTabId = tabId;
+    this.tabs = this.tabManager.getAllTabs();
+
+    // Wait for render then attach new terminal
+    this.updateComplete.then(() => {
+      this.attachTerminalToContainer(tab);
+
+      // Dispatch event
+      this.dispatchEvent(
+        new CustomEvent('tab-switched', {
+          bubbles: true,
+          composed: true,
+          detail: { tabId, previousTabId },
+        })
+      );
+    });
+  }
+
+  private detachActiveTerminal(): void {
+    const container = this.shadowRoot?.getElementById('active-terminal-container');
+    if (container) {
+      container.innerHTML = '';
+    }
+  }
+
+  private attachTerminalToContainer(tab: ITerminalTab): void {
+    const container = this.shadowRoot?.getElementById('active-terminal-container');
+    if (!container) return;
+
+    // Clear container
+    container.innerHTML = '';
+
+    // Open terminal in container
+    tab.terminal.open(container);
+    tab.fitAddon.fit();
+    tab.terminal.focus();
+  }
+
+  private handleResize(): void {
+    if (this.activeTabId) {
+      const tab = this.tabManager.getTab(this.activeTabId);
+      if (tab) {
+        tab.fitAddon.fit();
+      }
+    }
+  }
+
+  // ========== Process Management ==========
+
+  private async spawnProcessForTab(
+    tab: ITerminalTab,
+    command: string,
+    args: string[] = []
+  ): Promise<void> {
+    if (!this.executionEnvironment) {
+      tab.terminal.write('\x1b[31m');
+      tab.terminal.write('❌ No execution environment available.\r\n');
+      tab.terminal.write('\x1b[0m');
+      return;
+    }
+
+    try {
+      // Initialize environment if needed
+      if (!this.executionEnvironment.ready) {
+        tab.terminal.write('Initializing environment...\r\n');
+        await this.executionEnvironment.init();
+      }
+
+      // Spawn process
+      const process = await this.executionEnvironment.spawn(command, args);
+
+      // Set up output piping
+      process.output.pipeTo(
+        new WritableStream({
+          write: (data) => {
+            tab.terminal.write(data);
+          },
+        })
+      );
+
+      // Set up input for interactive processes
+      const inputWriter = process.input.getWriter();
+      tab.terminal.onData((data) => {
+        inputWriter.write(data);
+      });
+
+      // Store process reference
+      this.tabManager.setTabProcess(tab.id, process, inputWriter);
+      this.tabs = this.tabManager.getAllTabs();
+
+      // Handle process exit
+      process.exit.then((exitCode) => {
+        this.handleProcessExit(tab.id, exitCode);
+      });
+    } catch (error) {
+      tab.terminal.write('\x1b[31m');
+      tab.terminal.write(`❌ Failed to spawn process: ${error}\r\n`);
+      tab.terminal.write('\x1b[0m');
+      console.error('Failed to spawn process:', error);
+    }
+  }
+
+  private handleProcessExit(tabId: string, exitCode: number): void {
+    const tab = this.tabManager.getTab(tabId);
+    if (!tab) return;
+
+    // Update tab state
+    this.tabManager.markTabExited(tabId, exitCode);
+
+    // Write exit message to terminal
+    const message =
+      exitCode === 0
+        ? '\r\n\x1b[32m[Process completed successfully]\x1b[0m\r\n'
+        : `\r\n\x1b[31m[Process exited with code ${exitCode}]\x1b[0m\r\n`;
+    tab.terminal.write(message);
+
+    // Update state to trigger re-render
+    this.tabs = this.tabManager.getAllTabs();
+
+    // Dispatch event
+    this.dispatchEvent(
+      new CustomEvent('process-complete', {
+        bubbles: true,
+        composed: true,
+        detail: { tabId, exitCode },
+      })
+    );
+  }
+
+  // ========== Public API ==========
+
+  /**
+   * Create a new shell tab
+   */
+  public async createShellTab(label?: string): Promise<string> {
+    const tab = this.tabManager.createTab(
+      {
+        type: 'shell',
+        label: label || `bash ${this.tabManager.getTabCount() + 1}`,
+        closeable: this.tabManager.getTabCount() > 0, // First tab not closeable
+      },
+      this.isBright
+    );
+
+    this.tabs = this.tabManager.getAllTabs();
+
+    // Switch to new tab
+    this.switchToTab(tab.id);
+
+    // Wait for DOM update then spawn shell
+    await this.updateComplete;
+    await this.spawnProcessForTab(tab, 'jsh');
+
+    // Run setup command if this is the first tab
+    if (this.tabManager.getTabCount() === 1 && this.setupCommand) {
+      await this.waitForPrompt(tab.terminal, '~/');
+      if (tab.inputWriter) {
+        tab.inputWriter.write(this.setupCommand);
+      }
+    }
+
+    // Dispatch event
+    this.dispatchEvent(
+      new CustomEvent('tab-created', {
+        bubbles: true,
+        composed: true,
+        detail: { tabId: tab.id },
+      })
+    );
+
+    return tab.id;
+  }
+
+  /**
+   * Create a terminal tab for running a process
+   */
+  public async createProcessTab(options: ICreateTerminalTabOptions): Promise<string> {
+    const tab = this.tabManager.createTab(options, this.isBright);
+
+    this.tabs = this.tabManager.getAllTabs();
+
+    // Switch to new tab if requested (default: true)
+    if (options.switchToTab !== false) {
+      this.switchToTab(tab.id);
+    }
+
+    // Wait for DOM update
+    await this.updateComplete;
+
+    // Spawn process if command provided
+    if (options.command) {
+      await this.spawnProcessForTab(tab, options.command, options.args);
+    }
+
+    // Dispatch event
+    this.dispatchEvent(
+      new CustomEvent('tab-created', {
+        bubbles: true,
+        composed: true,
+        detail: { tabId: tab.id },
+      })
+    );
+
+    return tab.id;
+  }
+
+  /**
+   * Get the currently active tab
+   */
+  public getActiveTab(): ITerminalTab | null {
+    if (!this.activeTabId) return null;
+    return this.tabManager.getTab(this.activeTabId) || null;
+  }
+
+  /**
+   * Get all tabs
+   */
+  public getTabs(): ITerminalTab[] {
+    return this.tabManager.getAllTabs();
+  }
+
+  /**
+   * Switch to a specific tab by ID
+   */
+  public selectTab(tabId: string): boolean {
+    if (!this.tabManager.hasTab(tabId)) return false;
+    this.switchToTab(tabId);
+    return true;
+  }
+
+  /**
+   * Close a tab by ID
+   */
+  public closeTab(tabId: string): boolean {
+    const tab = this.tabManager.getTab(tabId);
+    if (!tab || !tab.closeable) return false;
+
+    // If closing active tab, switch to another
+    if (tabId === this.activeTabId) {
+      const allTabs = this.tabManager.getAllTabs();
+      const currentIndex = allTabs.findIndex((t) => t.id === tabId);
+      const nextTab = allTabs[currentIndex + 1] || allTabs[currentIndex - 1];
+
+      if (nextTab) {
+        this.switchToTab(nextTab.id);
+      } else {
+        this.activeTabId = null;
+        this.detachActiveTerminal();
+      }
+    }
+
+    // Close the tab
+    this.tabManager.closeTab(tabId);
+    this.tabs = this.tabManager.getAllTabs();
+
+    // Dispatch event
+    this.dispatchEvent(
+      new CustomEvent('tab-closed', {
+        bubbles: true,
+        composed: true,
+        detail: { tabId },
+      })
+    );
+
+    return true;
+  }
+
+  /**
+   * Write data to a tab's terminal
+   */
+  public writeToTab(tabId: string, data: string): boolean {
+    const tab = this.tabManager.getTab(tabId);
+    if (!tab) return false;
+    tab.terminal.write(data);
+    return true;
+  }
+
+  /**
+   * Send input to a tab's process (if interactive)
+   */
+  public sendInputToTab(tabId: string, data: string): boolean {
+    const tab = this.tabManager.getTab(tabId);
+    if (!tab || !tab.inputWriter) return false;
+    tab.inputWriter.write(data);
+    return true;
+  }
+
+  // ========== Utility Methods ==========
+
+  public async waitForPrompt(term: Terminal, prompt: string): Promise<void> {
+    return new Promise<void>((resolve) => {
+      const checkPrompt = () => {
+        const lines = term.buffer.active;
+        for (let i = 0; i < lines.length; i++) {
+          const line = lines.getLine(i);
+          if (line && line.translateToString().includes(prompt)) {
+            setTimeout(() => {
+              resolve();
+            }, 100);
+            return;
+          }
+        }
+        setTimeout(checkPrompt, 100);
+      };
+
+      checkPrompt();
+    });
+  }
+
+  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 this.executionEnvironment.writeFile('/source.env', envFile);
+  }
+
+  /**
+   * Get the underlying execution environment.
+   */
+  public getExecutionEnvironment(): IExecutionEnvironment | null {
+    return this.executionEnvironment;
+  }
+}

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

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

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

@@ -0,0 +1,126 @@
+import type { Terminal } from 'xterm';
+import type { FitAddon } from 'xterm-addon-fit';
+import type { IProcessHandle } from '../../00group-runtime/index.js';
+
+/**
+ * Type of terminal tab based on its source/purpose
+ */
+export type TTerminalTabType =
+  | 'shell'           // Default interactive shell (jsh)
+  | 'script'          // Script from package.json
+  | 'package-update'  // Package update process
+  | 'custom';         // External process from API
+
+/**
+ * Represents a single terminal tab instance
+ */
+export interface ITerminalTab {
+  /** Unique identifier for the tab */
+  id: string;
+
+  /** Display label for the tab */
+  label: string;
+
+  /** Icon name (lucide icon) */
+  iconName: string;
+
+  /** Type of terminal process */
+  type: TTerminalTabType;
+
+  /** Whether the tab can be closed */
+  closeable: boolean;
+
+  /** xterm.js Terminal instance */
+  terminal: Terminal;
+
+  /** FitAddon for this terminal */
+  fitAddon: FitAddon;
+
+  /** Process handle (if process is running) */
+  process: IProcessHandle | null;
+
+  /** Process input writer (for interactive terminals) */
+  inputWriter: WritableStreamDefaultWriter<string> | null;
+
+  /** Whether the process has exited */
+  exited: boolean;
+
+  /** Exit code (if process has exited) */
+  exitCode: number | null;
+
+  /** Timestamp when tab was created */
+  createdAt: number;
+
+  /** Optional metadata for script tabs */
+  metadata?: {
+    scriptName?: string;
+    packageName?: string;
+    command?: string;
+  };
+}
+
+/**
+ * Options for creating a new terminal tab
+ */
+export interface ICreateTerminalTabOptions {
+  /** Display label (auto-generated if not provided) */
+  label?: string;
+
+  /** Tab type */
+  type: TTerminalTabType;
+
+  /** Icon name override */
+  iconName?: string;
+
+  /** Whether the tab can be closed (default: true for non-shell) */
+  closeable?: boolean;
+
+  /** Command to spawn (default: 'jsh' for shell type) */
+  command?: string;
+
+  /** Command arguments */
+  args?: string[];
+
+  /** Additional metadata */
+  metadata?: ITerminalTab['metadata'];
+
+  /** Whether to switch to this tab after creation (default: true) */
+  switchToTab?: boolean;
+}
+
+/**
+ * Event detail for terminal tab events
+ */
+export interface ITerminalTabEventDetail {
+  tabId: string;
+}
+
+/**
+ * Event detail for tab switch events
+ */
+export interface ITerminalTabSwitchEventDetail {
+  tabId: string;
+  previousTabId: string | null;
+}
+
+/**
+ * Event detail for process completion
+ */
+export interface ITerminalProcessCompleteEventDetail {
+  tabId: string;
+  exitCode: number;
+}
+
+/**
+ * Event detail for run-process events from bottom bar
+ */
+export interface IRunProcessEventDetail {
+  type: TTerminalTabType;
+  label: string;
+  command: string;
+  args?: string[];
+  metadata?: {
+    scriptName?: string;
+    packageName?: string;
+  };
+}

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

@@ -0,0 +1,243 @@
+import { Terminal } from 'xterm';
+import { FitAddon } from 'xterm-addon-fit';
+import type { ITerminalTab, ICreateTerminalTabOptions, TTerminalTabType } from './interfaces.js';
+
+/**
+ * Manages terminal tabs lifecycle and state
+ */
+export class TerminalTabManager {
+  private tabs: Map<string, ITerminalTab> = new Map();
+  private tabCounter: number = 0;
+
+  /**
+   * Generate unique tab ID
+   */
+  private generateTabId(): string {
+    this.tabCounter++;
+    return `terminal-${this.tabCounter}-${Date.now()}`;
+  }
+
+  /**
+   * Get default label for tab type
+   */
+  private getDefaultLabel(type: TTerminalTabType, metadata?: ITerminalTab['metadata']): string {
+    switch (type) {
+      case 'shell':
+        return 'bash';
+      case 'script':
+        return metadata?.scriptName || 'script';
+      case 'package-update':
+        return metadata?.packageName ? `update ${metadata.packageName}` : 'update';
+      case 'custom':
+        return metadata?.command || 'process';
+      default:
+        return 'terminal';
+    }
+  }
+
+  /**
+   * Get default icon for tab type
+   */
+  private getDefaultIcon(type: TTerminalTabType): string {
+    switch (type) {
+      case 'shell':
+        return 'lucide:terminal';
+      case 'script':
+        return 'lucide:play';
+      case 'package-update':
+        return 'lucide:packageCheck';
+      case 'custom':
+        return 'lucide:code';
+      default:
+        return 'lucide:terminal';
+    }
+  }
+
+  /**
+   * Get terminal theme configuration
+   */
+  private getTerminalTheme(isBright: boolean): any {
+    if (isBright) {
+      return {
+        background: '#ffffff',
+        foreground: '#333333',
+        cursor: '#333333',
+        cursorAccent: '#ffffff',
+        selection: 'rgba(0, 0, 0, 0.2)',
+        black: '#000000',
+        red: '#cd3131',
+        green: '#00bc00',
+        yellow: '#949800',
+        blue: '#0451a5',
+        magenta: '#bc05bc',
+        cyan: '#0598bc',
+        white: '#555555',
+        brightBlack: '#666666',
+        brightRed: '#cd3131',
+        brightGreen: '#14ce14',
+        brightYellow: '#b5ba00',
+        brightBlue: '#0451a5',
+        brightMagenta: '#bc05bc',
+        brightCyan: '#0598bc',
+        brightWhite: '#a5a5a5',
+      };
+    } else {
+      return {
+        background: '#000000',
+        foreground: '#ffffff',
+        cursor: '#ffffff',
+        cursorAccent: '#000000',
+        selection: 'rgba(255, 255, 255, 0.2)',
+      };
+    }
+  }
+
+  /**
+   * Create a new tab instance
+   */
+  createTab(options: ICreateTerminalTabOptions, isBright: boolean): ITerminalTab {
+    const id = this.generateTabId();
+    const type = options.type;
+
+    // Create xterm.js Terminal instance
+    const terminal = new Terminal({
+      convertEol: true,
+      cursorBlink: true,
+      theme: this.getTerminalTheme(isBright),
+      fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+      fontSize: 13,
+      lineHeight: 1.2,
+    });
+
+    // Create FitAddon
+    const fitAddon = new FitAddon();
+    terminal.loadAddon(fitAddon);
+
+    const tab: ITerminalTab = {
+      id,
+      label: options.label || this.getDefaultLabel(type, options.metadata),
+      iconName: options.iconName || this.getDefaultIcon(type),
+      type,
+      closeable: options.closeable ?? (type !== 'shell'),
+      terminal,
+      fitAddon,
+      process: null,
+      inputWriter: null,
+      exited: false,
+      exitCode: null,
+      createdAt: Date.now(),
+      metadata: options.metadata,
+    };
+
+    this.tabs.set(id, tab);
+    return tab;
+  }
+
+  /**
+   * Get tab by ID
+   */
+  getTab(id: string): ITerminalTab | undefined {
+    return this.tabs.get(id);
+  }
+
+  /**
+   * Get all tabs as array (ordered by creation time)
+   */
+  getAllTabs(): ITerminalTab[] {
+    return Array.from(this.tabs.values()).sort((a, b) => a.createdAt - b.createdAt);
+  }
+
+  /**
+   * Get the number of tabs
+   */
+  getTabCount(): number {
+    return this.tabs.size;
+  }
+
+  /**
+   * Check if tab exists
+   */
+  hasTab(id: string): boolean {
+    return this.tabs.has(id);
+  }
+
+  /**
+   * Close and cleanup a tab
+   */
+  closeTab(id: string): boolean {
+    const tab = this.tabs.get(id);
+    if (!tab) return false;
+
+    // Kill process if still running
+    if (tab.process && !tab.exited) {
+      try {
+        tab.process.kill();
+      } catch (e) {
+        console.warn('Failed to kill process:', e);
+      }
+    }
+
+    // Dispose terminal
+    try {
+      tab.terminal.dispose();
+    } catch (e) {
+      console.warn('Failed to dispose terminal:', e);
+    }
+
+    this.tabs.delete(id);
+    return true;
+  }
+
+  /**
+   * Rename a tab
+   */
+  renameTab(id: string, newLabel: string): boolean {
+    const tab = this.tabs.get(id);
+    if (!tab) return false;
+
+    tab.label = newLabel;
+    return true;
+  }
+
+  /**
+   * Update tab process state to exited
+   */
+  markTabExited(id: string, exitCode: number): void {
+    const tab = this.tabs.get(id);
+    if (!tab) return;
+
+    tab.exited = true;
+    tab.exitCode = exitCode;
+  }
+
+  /**
+   * Set process for a tab
+   */
+  setTabProcess(id: string, process: ITerminalTab['process'], inputWriter: ITerminalTab['inputWriter']): void {
+    const tab = this.tabs.get(id);
+    if (!tab) return;
+
+    tab.process = process;
+    tab.inputWriter = inputWriter;
+  }
+
+  /**
+   * Update theme for all terminals
+   */
+  updateAllThemes(isBright: boolean): void {
+    const theme = this.getTerminalTheme(isBright);
+    for (const tab of this.tabs.values()) {
+      tab.terminal.options.theme = theme;
+    }
+  }
+
+  /**
+   * Dispose all tabs and cleanup
+   */
+  disposeAll(): void {
+    for (const [id] of this.tabs) {
+      this.closeTab(id);
+    }
+    this.tabs.clear();
+  }
+}

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

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

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

@@ -0,0 +1,453 @@
+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 notFoundPackages: Set<string> = new Set(); // Packages checked but not found
+  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;
+    if (this.notFoundPackages.has(packageName)) return; // Skip packages we already checked
+
+    try {
+      let typesLoaded = await this.tryLoadPackageTypes(packageName);
+      if (!typesLoaded) {
+        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);
+      }
+    } 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`;
+      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) {
+          // 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 - if any exist, load all .d.ts files
+      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)) {
+          await this.loadAllDtsFilesFromPackage(basePath);
+          return true;
+        }
+      }
+
+      return false;
+    } catch (error) {
+      console.error(`Failed to load package types for ${packageName}:`, error);
+      return false;
+    }
+  }
+
+  /**
+   * 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;
+
+    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('@')
+      ? `@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)) {
+        // Load all .d.ts files from the @types package
+        await this.loadAllDtsFilesFromPackage(basePath);
+        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) {
+      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);
+    }
+  }
+
+  /**
+   * 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) {
+      // Only update if content actually changed (prevents cursor reset)
+      if (existingModel.getValue() !== content) {
+        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-workspace/index.ts

@@ -0,0 +1,9 @@
+// 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';
+export * from './dees-workspace-bottombar/index.js';

ts_web/elements/dees-contextmenu/dees-contextmenu.ts

@@ -246,7 +246,7 @@ export class DeesContextmenu extends DeesElement {
               @mouseleave=${() => this.handleMenuItemLeave()}
             >
               ${menuItem.iconName ? html`
-                <dees-icon .icon="${`lucide:${menuItem.iconName}`}"></dees-icon>
+                <dees-icon .icon="${menuItem.iconName}"></dees-icon>
               ` : ''}
               <span class="menuitem-text">${menuItem.name}</span>
               ${menuItem.shortcut && !hasSubmenu ? html`
@@ -436,8 +436,9 @@ export class DeesContextmenu extends DeesElement {
     }
 
     // Only destroy window layer if this is not a submenu
+    // Don't await - let cleanup happen in background for instant visual feedback
     if (this.windowLayer && !this.parentMenu) {
-      await this.windowLayer.destroy();
+      this.windowLayer.destroy();
     }
 
     this.style.opacity = '0';

ts_web/elements/dees-icon/dees-icon.ts

@@ -268,9 +268,9 @@ export class DeesIcon extends DeesElement {
         name: iconStr.substring(7) // Remove 'lucide:' prefix
       };
     } else {
-      // For backward compatibility, assume FontAwesome if no prefix
+      // Default to Lucide when no prefix is provided
       return {
-        type: 'fa',
+        type: 'lucide',
         name: iconStr
       };
     }

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

@@ -1,434 +0,0 @@
-import {
-  DeesElement,
-  property,
-  html,
-  customElement,
-  type TemplateResult,
-  css,
-  cssManager,
-} from '@design.estate/dees-element';
-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';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'dees-terminal': DeesTerminal;
-  }
-}
-
-@customElement('dees-terminal')
-export class DeesTerminal extends DeesElement {
-  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 environmentVariables: { [key: string]: string } = {};
-
-  @property()
-  accessor background: string = '#000000';
-
-  /**
-   * 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();
-    this.resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        // Handle the resize event
-        console.log(`Terminal Resized`);
-        this.handleResize();
-      }
-    });
-  }
-
-  public static styles = [
-    themeDefaultStyles,
-    cssManager.defaultStyles,
-    css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
-      :host {
-        padding: 20px;
-        background: var(--dees-terminal-background, #000000);
-        position: absolute;
-        height: 100%;
-        width: 100%;
-      }
-
-      * {
-        box-sizing: border-box;
-      }
-
-      #container {
-        position: absolute;
-        height: calc(100% - 40px);
-        width: calc(100% - 40px);
-      }
-      /**
-      * Copyright (c) 2014 The xterm.js authors. All rights reserved.
-      * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
-      * https://github.com/chjj/term.js
-      * @license MIT
-      *
-      * Permission is hereby granted, free of charge, to any person obtaining a copy
-      * of this software and associated documentation files (the "Software"), to deal
-      * in the Software without restriction, including without limitation the rights
-      * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-      * copies of the Software, and to permit persons to whom the Software is
-      * furnished to do so, subject to the following conditions:
-      *
-      * The above copyright notice and this permission notice shall be included in
-      * all copies or substantial portions of the Software.
-      *
-      * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-      * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-      * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-      * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-      * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-      * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-      * THE SOFTWARE.
-      *
-      * Originally forked from (with the author's permission):
-      *   Fabrice Bellard's javascript vt100 for jslinux:
-      *   http://bellard.org/jslinux/
-      *   Copyright (c) 2011 Fabrice Bellard
-      *   The original design remains. The terminal itself
-      *   has been extended to include xterm CSI codes, among
-      *   other features.
-      */
-
-      /**
-      *  Default styles for xterm.js
-      */
-
-      .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;
-        /**
-          * The z-index of the helpers must be higher than the canvases in order for
-          * IMEs to appear on top.
-          */
-        z-index: 5;
-      }
-
-      .xterm .xterm-helper-textarea {
-        padding: 0;
-        border: 0;
-        margin: 0;
-        /* Move textarea out of the screen to the far left, so that the cursor is not visible */
-        position: absolute;
-        opacity: 0;
-        left: -9999em;
-        top: 0;
-        width: 0;
-        height: 0;
-        z-index: -5;
-        /** Prevent wrapping so the IME appears against the textarea at the correct position */
-        white-space: nowrap;
-        overflow: hidden;
-        resize: none;
-      }
-
-      .xterm .composition-view {
-        /* TODO: Composition position got messed up somewhere */
-        background: var(--dees-terminal-background, #000000);
-        color: #fff;
-        display: none;
-        position: absolute;
-        white-space: nowrap;
-        z-index: 1;
-      }
-
-      .xterm .composition-view.active {
-        display: block;
-      }
-
-      .xterm .xterm-viewport {
-        /* On OS X this is required in order for the scroll bar to appear fully opaque */
-        background-color: var(--dees-terminal-background, #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 {
-        /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
-        cursor: default;
-      }
-
-      .xterm.xterm-cursor-pointer {
-        cursor: pointer;
-      }
-
-      .xterm.column-select.focus {
-        /* Column selection mode */
-        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;
-      }
-    `,
-  ];
-
-  public render(): TemplateResult {
-    return html`
-      <div class="mainbox">
-        <div id="container"></div>
-      </div>
-    `;
-  }
-
-  private fitAddon: FitAddon;
-  private terminal: Terminal | null = null;
-
-  public async firstUpdated(
-    _changedProperties: Map<string | number | symbol, unknown>
-  ): Promise<void> {
-    const domtools = await this.domtoolsPromise;
-    super.firstUpdated(_changedProperties);
-
-    // Sync CSS variable with background property
-    this.style.setProperty('--dees-terminal-background', this.background);
-
-    const container = this.shadowRoot.getElementById('container');
-
-    const term = new Terminal({
-      convertEol: true,
-      cursorBlink: true,
-      theme: {
-        background: this.background,
-      },
-    });
-    this.terminal = term;
-    this.fitAddon = new FitAddon();
-    term.loadAddon(this.fitAddon);
-
-    // Open the terminal in #terminal-container
-    term.open(container);
-
-    // Make the terminal's size and geometry fit the size of #terminal-container
-    this.fitAddon.fit();
-
-    // 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;
-    }
-
-    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) {
-          term.write(data);
-        },
-      })
-    );
-    const input = shellProcess.input.getWriter();
-    term.onData((data) => {
-      input.write(data);
-    });
-
-    await this.waitForPrompt(term, '~/');
-
-    // 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> {
-    await super.connectedCallback();
-    this.resizeObserver.observe(this);
-  }
-
-  async disconnectedCallback(): Promise<void> {
-    this.resizeObserver.unobserve(this);
-    await super.disconnectedCallback();
-  }
-
-  handleResize() {
-    this.fitAddon.fit();
-  }
-
-  public async waitForPrompt(term: Terminal, prompt: string): Promise<void> {
-    return new Promise<void>((resolve) => {
-      const checkPrompt = () => {
-        const lines = term.buffer.active;
-        for (let i = 0; i < lines.length; i++) {
-          const line = lines.getLine(i);
-          if (line && line.translateToString().includes(prompt)) {
-            setTimeout(() => {
-              resolve();
-            }, 100);
-            return;
-          }
-        }
-        setTimeout(checkPrompt, 100); // check every 100 ms
-      };
-  
-      checkPrompt();
-    });
-  }
-
-  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`;
-    }
-
-    // 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/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';

tsconfig.json

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