mrmd-editor 0.7.0 → 0.8.0

package/src/term-pty-client.js

@@ -15,6 +15,7 @@
  * @property {string} [cwd] - Working directory
  * @property {string} [venv] - Virtual environment path
  * @property {string} [filePath] - Associated file path
+ * @property {string} [shell] - Preferred shell (e.g. powershell, wsl, cmd)
  * @property {Function} [onData] - Callback for data from PTY
  * @property {Function} [onConnect] - Callback when connected
  * @property {Function} [onDisconnect] - Callback when disconnected
@@ -36,6 +37,7 @@ export class PtyClient {
       cwd: config.cwd || null,
       venv: config.venv || null,
       filePath: config.filePath || null,
+      shell: config.shell || null,
       onData: config.onData || (() => {}),
       onConnect: config.onConnect || (() => {}),
       onDisconnect: config.onDisconnect || (() => {}),
@@ -56,6 +58,10 @@ export class PtyClient {
     this.maxReconnectAttempts = 10;
     this.baseReconnectDelay = 1000;
     this.reconnectTimeout = null;
+
+    // Small-input batching (typing) to reduce WS frame overhead on tunneled/mobile connections.
+    this._writeBuffer = '';
+    this._writeTimer = null;
   }
 
   /**
@@ -88,6 +94,9 @@ export class PtyClient {
     if (this.config.filePath) {
       params.set('file_path', this.config.filePath);
     }
+    if (this.config.shell) {
+      params.set('shell', this.config.shell);
+    }
 
     return `${protocol}//${host}/api/pty?${params.toString()}`;
   }
@@ -124,7 +133,20 @@ export class PtyClient {
       };
 
       this.ws.onmessage = (event) => {
-        this.config.onData(event.data);
+        // Handle both text and binary messages. Text is the normal case
+        // (PTY sends terminal output as text). Binary may arrive if the
+        // tunnel proxy incorrectly marks a frame as binary — convert to
+        // string so xterm.js can render it (xterm doesn't handle Blobs).
+        const data = event.data;
+        if (typeof data === 'string') {
+          this.config.onData(data);
+        } else if (data instanceof Blob) {
+          data.text().then(text => this.config.onData(text));
+        } else if (data instanceof ArrayBuffer) {
+          this.config.onData(new TextDecoder().decode(data));
+        } else {
+          this.config.onData(data);
+        }
       };
 
       this.ws.onerror = (event) => {
@@ -136,6 +158,11 @@ export class PtyClient {
         console.log('[PtyClient] Disconnected, code:', event.code);
         this.connected = false;
         this.ws = null;
+        if (this._writeTimer) {
+          clearTimeout(this._writeTimer);
+          this._writeTimer = null;
+        }
+        this._writeBuffer = '';
         this.config.onDisconnect(event.code, event.reason);
 
         // Attempt reconnection if not intentionally closed
@@ -172,16 +199,87 @@ export class PtyClient {
   }
 
   /**
-   * Send data to the PTY (user input)
+   * Flush any buffered small-input writes.
+   */
+  _flushWriteBuffer() {
+    if (!this._writeBuffer) return;
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+      this._writeBuffer = '';
+      return;
+    }
+
+    const buffered = this._writeBuffer;
+    this._writeBuffer = '';
+    this.ws.send(JSON.stringify({ type: 'input', data: buffered }));
+  }
+
+  /**
+   * Send data to the PTY (user input).
+   * Large payloads (pastes) are chunked to avoid overwhelming the terminal
+   * renderer and WebSocket tunnel on markco.dev.
+   *
    * @param {string} data - Input data
    */
   write(data) {
-    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
-      this.ws.send(JSON.stringify({
-        type: 'input',
-        data: data,
-      }));
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return;
+
+    // Small inputs (normal typing/control sequences): buffer briefly so
+    // rapid keypresses are batched into fewer WS frames.
+    if (data.length <= 4096) {
+      this._writeBuffer += data;
+      if (!this._writeTimer) {
+        this._writeTimer = setTimeout(() => {
+          this._writeTimer = null;
+          this._flushWriteBuffer();
+        }, 8);
+      }
+      return;
+    }
+
+    // Preserve input ordering: flush any pending small-input batch first.
+    if (this._writeTimer) {
+      clearTimeout(this._writeTimer);
+      this._writeTimer = null;
+    }
+    this._flushWriteBuffer();
+
+    // Large paste: chunk it to prevent UI freeze.
+    // xterm.js may wrap pastes in bracketed paste markers (\x1b[200~ ... \x1b[201~).
+    // We preserve those: send a leading marker once, chunk the body, send trailing marker.
+    const BPS = '\x1b[200~';
+    const BPE = '\x1b[201~';
+    let body = data;
+    let hasBracket = false;
+
+    if (body.startsWith(BPS) && body.endsWith(BPE)) {
+      hasBracket = true;
+      body = body.slice(BPS.length, -BPE.length);
     }
+
+    const CHUNK_SIZE = 2048;
+    const CHUNK_DELAY_MS = 6;
+    let offset = 0;
+    const ws = this.ws;
+
+    if (hasBracket) {
+      ws.send(JSON.stringify({ type: 'input', data: BPS }));
+    }
+
+    const sendNext = () => {
+      if (!ws || ws.readyState !== WebSocket.OPEN) return;
+      if (offset >= body.length) {
+        if (hasBracket) {
+          ws.send(JSON.stringify({ type: 'input', data: BPE }));
+        }
+        return;
+      }
+      const chunk = body.slice(offset, offset + CHUNK_SIZE);
+      offset += CHUNK_SIZE;
+      ws.send(JSON.stringify({ type: 'input', data: chunk }));
+      setTimeout(sendNext, CHUNK_DELAY_MS);
+    };
+
+    sendNext();
   }
 
   /**
@@ -211,6 +309,12 @@ export class PtyClient {
       this.reconnectTimeout = null;
     }
 
+    if (this._writeTimer) {
+      clearTimeout(this._writeTimer);
+      this._writeTimer = null;
+    }
+    this._writeBuffer = '';
+
     if (this.ws) {
       this.ws.close();
       this.ws = null;

package/src/term-widget.js

@@ -146,15 +146,23 @@ class TerminalWidget extends WidgetType {
 
     // Get theme from CSS variables
     const theme = this._getThemeFromCSS();
+    const isMobile = /iPhone|iPad|Android|Mobile/i.test(navigator.userAgent);
 
     // Create terminal
     const term = new Terminal({
       cursorBlink: true,
-      fontSize: 14,
-      fontFamily: '"SF Mono", "Fira Code", "Monaco", "Inconsolata", monospace',
-      scrollback: 10000,
+      cursorStyle: 'block',
+      cursorInactiveStyle: 'outline',
+      fontSize: isMobile ? 13 : 14,
+      fontFamily: '"Monaspace Neon Var", "SF Mono", "Fira Code", "Monaco", "Inconsolata", monospace',
+      scrollback: isMobile ? 5000 : 50000,
       convertEol: true,
       theme: theme,
+      drawBoldTextInBrightColors: !isMobile,
+      allowTransparency: false,
+      smoothScrollDuration: 0,
+      fastScrollModifier: 'alt',
+      fastScrollSensitivity: isMobile ? 3 : 5,
     });
 
     this.xtermInstance = term;
@@ -176,6 +184,37 @@ class TerminalWidget extends WidgetType {
     // Open terminal
     term.open(container);
 
+    // Renderer addons: prefer WebGL on desktop, fallback to Canvas, then DOM.
+    let rendererLoaded = false;
+    if (!isMobile && typeof WebglAddon !== 'undefined') {
+      try {
+        const webgl = new WebglAddon.WebglAddon();
+        webgl.onContextLoss(() => {
+          try { webgl.dispose(); } catch (e) {}
+          console.warn('[term] WebGL context lost, falling back to canvas/DOM');
+          if (typeof CanvasAddon !== 'undefined') {
+            try {
+              term.loadAddon(new CanvasAddon.CanvasAddon());
+            } catch (canvasErr) {
+              console.warn('[term] Canvas addon failed, using DOM fallback:', canvasErr);
+            }
+          }
+        });
+        term.loadAddon(webgl);
+        rendererLoaded = true;
+      } catch (e) {
+        console.warn('[term] WebGL failed:', e);
+      }
+    }
+
+    if (!rendererLoaded && typeof CanvasAddon !== 'undefined') {
+      try {
+        term.loadAddon(new CanvasAddon.CanvasAddon());
+      } catch (e) {
+        console.warn('[term] Canvas addon failed, using DOM fallback:', e);
+      }
+    }
+
     // Fit to container
     if (this.fitAddon) {
       setTimeout(() => {
@@ -266,6 +305,7 @@ class TerminalWidget extends WidgetType {
       cwd: this.config.cwd,
       venv: this.config.venv,
       filePath: this.block.filePath,
+      shell: this.config.shell,
       onData: (data) => {
         term.write(data);
       },

package/src/widgets/theme-utils.js

@@ -9,7 +9,7 @@
  * 1. Explicit config (config.appearance.widgetTheme)
  * 2. CodeMirror theme class (.cm-theme-dark)
  * 3. System preference (prefers-color-scheme)
- * 4. Default: 'midnight' (dark)
+ * 4. Default: 'plain-light'
  *
  * ## Watching for Changes
  *
@@ -20,7 +20,7 @@
  * @module widgets/theme-utils
  */
 
-import { getTheme, midnightTheme, daylightTheme } from './theme.js';
+import { getTheme, getDefaultTokens } from './theme.js';
 
 // #region DETECTION
 
@@ -31,12 +31,12 @@ import { getTheme, midnightTheme, daylightTheme } from './theme.js';
  * 1. Explicit theme name passed as parameter
  * 2. CodeMirror theme class on the editor element
  * 3. System color scheme preference
- * 4. Default: 'midnight'
+ * 4. Default: 'plain-light'
  *
  * @param {Object} [options]
  * @param {string} [options.themeName] - Explicit theme name (highest priority)
  * @param {HTMLElement} [options.editorElement] - Editor DOM element to check for .cm-theme-dark
- * @returns {string} Theme name ('midnight', 'daylight', etc.)
+ * @returns {string} Theme name ('plain-light', 'plain-dark', etc.)
  *
  * @example
  * // Detect based on CodeMirror and system preference
@@ -57,25 +57,25 @@ export function detectTheme({ themeName, editorElement } = {}) {
     // CodeMirror adds this class when using oneDark or similar dark themes
     const hasDarkTheme = editorElement.closest('.cm-theme-dark') !== null;
     if (hasDarkTheme) {
-      return 'midnight';
+      return 'plain-dark';
     }
 
     // If there's any cm-theme class but not dark, assume light
     const hasAnyTheme = editorElement.matches('[class*="cm-theme"]') ||
       editorElement.closest('[class*="cm-theme"]') !== null;
     if (hasAnyTheme) {
-      return 'daylight';
+      return 'plain-light';
     }
   }
 
   // 3. System preference
   if (typeof window !== 'undefined' && window.matchMedia) {
     const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    return prefersDark ? 'midnight' : 'daylight';
+    return prefersDark ? 'plain-dark' : 'plain-light';
   }
 
   // 4. Default
-  return 'midnight';
+  return 'plain-light';
 }
 
 /**
@@ -208,7 +208,7 @@ const THEME_FONTS_ID = 'mrmd-widget-theme-fonts';
  *
  * @example
  * // Apply by name
- * applyTheme('midnight');
+ * applyTheme('plain-light');
  *
  * // Apply custom theme object
  * applyTheme({
@@ -224,12 +224,14 @@ export function applyTheme(themeOrName, { target, useStyleTag = true } = {}) {
     : themeOrName;
 
   if (!theme) {
-    console.warn(`Theme "${themeOrName}" not found, using midnight`);
-    return applyTheme('midnight', { target, useStyleTag });
+    console.warn(`Theme "${themeOrName}" not found, using plain-light`);
+    return applyTheme('plain-light', { target, useStyleTag });
   }
 
   // Get token values (exclude name, description, fontFace, isDark)
-  const tokens = {};
+  // Merge with token defaults so newly added tokens are always present,
+  // even for older themes that don't define them yet.
+  const tokens = getDefaultTokens();
   for (const [key, value] of Object.entries(theme)) {
     if (key.startsWith('--')) {
       tokens[key] = value;
@@ -330,7 +332,7 @@ export function removeThemeStyles() {
  * @returns {string} CSS string with :root variables and optional font-face
  *
  * @example
- * const css = generateThemeCSS('midnight');
+ * const css = generateThemeCSS('plain-light');
  * // :root {
  * //   --widget-surface: rgba(0, 0, 0, 0.35);
  * //   ...
@@ -346,11 +348,17 @@ export function generateThemeCSS(themeOrName, { includeFontFace = true } = {}) {
     : themeOrName;
 
   if (!theme) {
-    return generateThemeCSS('midnight', { includeFontFace });
+    return generateThemeCSS('plain-light', { includeFontFace });
   }
 
-  const vars = Object.entries(theme)
-    .filter(([k]) => k.startsWith('--'))
+  const tokens = getDefaultTokens();
+  for (const [key, value] of Object.entries(theme)) {
+    if (key.startsWith('--')) {
+      tokens[key] = value;
+    }
+  }
+
+  const vars = Object.entries(tokens)
     .map(([k, v]) => `  ${k}: ${v};`)
     .join('\n');