feat(dees-input-code): add editor status footer with cursor position, line count, and language display

changelog.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2026-04-05 - 3.58.0 - feat(dees-input-code)
+add editor status footer with cursor position, line count, and language display
+
+- Tracks and displays the current cursor line and column in the code editor footer
+- Shows dynamic line count updates as editor content changes
+- Aligns the Monaco editor background with the surrounding tile theme, including light and dark mode updates
+
 ## 2026-04-05 - 3.57.0 - feat(dees-input-fileupload)
 redesign the file upload dropzone with dees-tile integration and themed file list styling
 

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.57.0',
+  version: '3.58.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-input/dees-input-code/dees-input-code.ts

@@ -79,6 +79,12 @@ export class DeesInputCode extends DeesInputBase<string> {
   @state()
   accessor copySuccess: boolean = false;
 
+  @state()
+  accessor lineCount: number = 0;
+
+  @state()
+  accessor cursorPosition: { line: number; column: number } = { line: 1, column: 1 };
+
   private editorElement: DeesWorkspaceMonaco | null = null;
 
   public static styles = [
@@ -223,6 +229,11 @@ export class DeesInputCode extends DeesInputBase<string> {
         height: 100%;
       }
 
+      /* Match Monaco background to tile */
+      dees-workspace-monaco::part(container) {
+        background: var(--dees-color-bg-primary);
+      }
+
       .toolbar-divider {
         width: 1px;
         height: 20px;
@@ -230,6 +241,32 @@ export class DeesInputCode extends DeesInputBase<string> {
         margin: 0 4px;
       }
 
+      /* Footer */
+      .editor-footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 12px;
+        height: 28px;
+        font-size: 11px;
+        color: var(--dees-color-text-muted);
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .footer-left,
+      .footer-right {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .footer-separator {
+        width: 1px;
+        height: 12px;
+        background: var(--dees-color-border-default);
+      }
+
       :host([disabled]) .code-container {
         opacity: 0.5;
         pointer-events: none;
@@ -314,6 +351,16 @@ export class DeesInputCode extends DeesInputBase<string> {
               @content-change=${this.handleContentChange}
             ></dees-workspace-monaco>
           </div>
+          <div slot="footer" class="editor-footer">
+            <div class="footer-left">
+              <span>Ln ${this.cursorPosition.line}, Col ${this.cursorPosition.column}</span>
+              <div class="footer-separator"></div>
+              <span>${this.lineCount} line${this.lineCount !== 1 ? 's' : ''}</span>
+            </div>
+            <div class="footer-right">
+              <span>${(LANGUAGES.find(l => l.key === this.language) || LANGUAGES[0]).label}</span>
+            </div>
+          </div>
         </dees-tile>
       </div>
     `;
@@ -329,6 +376,49 @@ export class DeesInputCode extends DeesInputBase<string> {
           this.changeSubject.next(this as any);
         }
       });
+
+      // Track cursor position and line count
+      const editor = await this.editorElement.editorDeferred.promise;
+
+      // Set initial line count
+      const model = editor.getModel();
+      if (model) {
+        this.lineCount = model.getLineCount();
+        model.onDidChangeContent(() => {
+          this.lineCount = model.getLineCount();
+        });
+      }
+
+      // Track cursor position
+      editor.onDidChangeCursorPosition((e) => {
+        this.cursorPosition = { line: e.position.lineNumber, column: e.position.column };
+      });
+
+      // Override Monaco editor background to match tile
+      const domtoolsInstance = await this.editorElement.domtoolsPromise;
+      const updateEditorBg = (isBright: boolean) => {
+        const bg = isBright ? '#ffffff' : '#0a0a0a';
+        editor.updateOptions({});
+        // Override via Monaco's theme API
+        (window as any).monaco?.editor?.defineTheme?.('dees-light', {
+          base: 'vs',
+          inherit: true,
+          rules: [],
+          colors: { 'editor.background': bg },
+        });
+        (window as any).monaco?.editor?.defineTheme?.('dees-dark', {
+          base: 'vs-dark',
+          inherit: true,
+          rules: [],
+          colors: { 'editor.background': bg },
+        });
+        editor.updateOptions({ theme: isBright ? 'dees-light' : 'dees-dark' });
+      };
+
+      updateEditorBg(domtoolsInstance.themeManager.goBrightBoolean);
+      domtoolsInstance.themeManager.themeObservable.subscribe((goBright: boolean) => {
+        updateEditorBg(goBright);
+      });
     }
   }