v3.12.2

changelog.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 2025-12-30 - 3.12.2 - fix(dees-editor-bare)
+make Monaco editor follow domtools theme and clean up theme subscription on disconnect
+
+- Set initial Monaco theme from domtools.themeManager.goBrightBoolean instead of hardcoded 'vs-dark'
+- Subscribe to domtools.themeManager.themeObservable to update editor theme dynamically
+- Add monacoThemeSubscription property and unsubscribe in disconnectedCallback to avoid memory leaks
+
+## 2025-12-30 - 3.12.1 - fix(modal)
+fix modal editor layout to prevent overlap by adding relative positioning and reducing height
+
+- Added Playwright screenshots: .playwright-mcp/dees-input-code-demo.png and .playwright-mcp/modal-overlap-issue.png
+- Updated ts_web/elements/00group-input/dees-input-code/dees-input-code.ts: modal-editor-wrapper set position: relative and changed height from calc(100vh - 160px) to calc(100vh - 175px) to avoid overlap
+
 ## 2025-12-30 - 3.12.0 - feat(editor)
 add code input component and editor-bare, replace dees-editor usage, and add modal contentPadding
 

package.json

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

ts_web/00_commitinfo_data.ts

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

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

@@ -46,6 +46,8 @@ export class DeesEditorBare extends DeesElement {
   })
   accessor wordWrap: monaco.editor.IStandaloneEditorConstructionOptions['wordWrap'] = 'off';
 
+  private monacoThemeSubscription: domtools.plugins.smartrx.rxjs.Subscription | null = null;
+
   constructor() {
     super();
     domtools.DomTools.setupDomTools();
@@ -102,15 +104,27 @@ export class DeesEditorBare extends DeesElement {
       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: 'vs-dark',
+        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 (
@@ -128,4 +142,12 @@ export class DeesEditorBare extends DeesElement {
     });
     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-input/dees-input-code/dees-input-code.ts

@@ -541,7 +541,8 @@ export class DeesInputCode extends DeesInputBase<string> {
             margin: 0 4px;
           }
           .modal-editor-wrapper {
-            height: calc(100vh - 160px);
+            position: relative;
+            height: calc(100vh - 175px);
             width: 100%;
           }
         </style>