mrmd-editor 0.6.0 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mrmd-editor",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "Markdown editor with realtime collaboration - the core editor package",
   "type": "module",
   "main": "dist/mrmd.cjs",

package/src/cell-controls/widgets.js

@@ -492,6 +492,36 @@ export function injectCellControlsStyles() {
     .${PREFIX}-btn-terminal:hover {
       color: var(--widget-info, #60a5fa);
     }
+
+    /* ---- Mobile: larger touch targets for cell controls ---- */
+    @media (pointer: coarse) {
+      .${PREFIX}-btn {
+        width: 32px;
+        height: 32px;
+        opacity: 0.8;
+      }
+
+      .${PREFIX}-btn svg {
+        width: 16px;
+        height: 16px;
+      }
+
+      .${PREFIX} {
+        gap: 8px;
+        margin-left: 12px;
+      }
+
+      .${PREFIX}-status {
+        padding: 4px 10px;
+        font-size: 12px;
+      }
+
+      .${PREFIX}-gutter {
+        width: 32px;
+        height: 32px;
+        font-size: 14px;
+      }
+    }
   `;
 
   document.head.appendChild(style);

package/src/cells.js

@@ -105,7 +105,7 @@ function parseArtifactLanguage(lang) {
  * @param {string} content - Document content
  * @returns {Array<{
  *   language: string,
- *   session: string|null, // session name if specified (e.g., ```js mysession)
+ *   context: string|null, // execution context if specified (e.g., ```js sandbox)
  *   code: string,
  *   start: number,      // start of opening fence
  *   end: number,        // end of closing fence
@@ -124,7 +124,7 @@ export function findCodeBlocks(content) {
   let inBlock = false;
   let blockStart = 0;
   let blockLanguage = '';
-  let blockSession = null;
+  let blockContext = null;
   let codeStart = 0;
   let blockLine = 0;
   let charOffset = 0;
@@ -134,7 +134,7 @@ export function findCodeBlocks(content) {
     const lineStart = charOffset;
 
     if (!inBlock) {
-      // Look for opening fence: ```language [session]
+      // Look for opening fence: ```language [context]
       // Examples: ```js, ```js sandbox, ```python myenv, ```html:artifact, ```css:myapp
       // Language can include colon for targets (html:name, css:name, js:name, term:session)
       const match = line.match(/^(`{3,})([\w:.-]*)(?:\s+(\S+))?/);
@@ -142,7 +142,7 @@ export function findCodeBlocks(content) {
         inBlock = true;
         blockStart = lineStart;
         blockLanguage = match[2].toLowerCase();
-        blockSession = match[3] || null; // session name after language
+        blockContext = match[3] || null; // optional context name after language
         codeStart = lineStart + line.length + 1; // +1 for newline
         blockLine = i;
       }
@@ -152,10 +152,10 @@ export function findCodeBlocks(content) {
         const codeEnd = lineStart;
         const blockEnd = lineStart + line.length;
 
-        // Parse terminal language for session support
+        // Parse terminal language for named terminal runtime support
         const terminalInfo = parseTerminalLanguage(blockLanguage);
-        // Terminal session can come from term:session or from space-separated session
-        const terminalSession = terminalInfo.sessionName || (terminalInfo.isTerminal ? blockSession : null);
+        // Terminal runtime name can come from term:session or from space-separated context
+        const terminalSession = terminalInfo.sessionName || (terminalInfo.isTerminal ? blockContext : null);
 
         // Parse artifact language for artifact panel support
         const artifactInfo = parseArtifactLanguage(blockLanguage);
@@ -166,7 +166,7 @@ export function findCodeBlocks(content) {
         blocks.push({
           language: blockLanguage,
           baseLanguage: effectiveLanguage, // The language without :target suffix
-          session: blockSession,
+          context: blockContext,
           code: content.slice(codeStart, codeEnd),
           start: blockStart,
           end: blockEnd,
@@ -184,7 +184,7 @@ export function findCodeBlocks(content) {
         });
 
         inBlock = false;
-        blockSession = null;
+        blockContext = null;
       }
     }
 

package/src/ctrl-k-modal.js

@@ -71,8 +71,10 @@ function showCtrlKModal(view) {
   // Get cursor screen coordinates
   const cursorPos = view.state.selection.main.head;
   const coords = view.coordsAtPos(cursorPos);
+  const isMobile = window.matchMedia('(max-width: 768px)').matches;
 
-  if (!coords) {
+  // On desktop, coords are required for positioning. On mobile, CSS handles it.
+  if (!coords && !isMobile) {
     console.warn('[Ctrl-K] Could not get cursor coordinates');
     return;
   }
@@ -83,8 +85,11 @@ function showCtrlKModal(view) {
   // Create modal container
   const modal = document.createElement('div');
   modal.className = 'cm-ctrl-k-modal';
-  modal.style.left = `${coords.left}px`;
-  modal.style.top = `${coords.bottom + 8}px`;
+  // On mobile, CSS positions it as a bottom sheet — don't set inline styles
+  if (!isMobile && coords) {
+    modal.style.left = `${coords.left}px`;
+    modal.style.top = `${coords.bottom + 8}px`;
+  }
 
   // Track expanded/collapsed state
   let isExpanded = false;
@@ -208,10 +213,16 @@ function showCtrlKModal(view) {
 
   modal.appendChild(controls);
 
+  // On mobile: start with controls visible (expanded), skip dragging
+  if (isMobile) {
+    isExpanded = true;
+    modal.classList.add('expanded');
+  }
+
   document.body.appendChild(modal);
   activeModal = modal;
 
-  // Make draggable
+  // Make draggable (desktop only)
   let isDragging = false;
   let dragStartX, dragStartY, modalStartX, modalStartY;
 
@@ -242,16 +253,18 @@ function showCtrlKModal(view) {
     }
   });
 
-  // Adjust position if off-screen
-  requestAnimationFrame(() => {
-    const rect = modal.getBoundingClientRect();
-    if (rect.right > window.innerWidth - 10) {
-      modal.style.left = `${Math.max(10, window.innerWidth - rect.width - 10)}px`;
-    }
-    if (rect.bottom > window.innerHeight - 10) {
-      modal.style.top = `${Math.max(10, coords.top - rect.height - 4)}px`;
-    }
-  });
+  // Adjust position if off-screen (desktop only — mobile uses CSS bottom sheet)
+  if (!isMobile) {
+    requestAnimationFrame(() => {
+      const rect = modal.getBoundingClientRect();
+      if (rect.right > window.innerWidth - 10) {
+        modal.style.left = `${Math.max(10, window.innerWidth - rect.width - 10)}px`;
+      }
+      if (coords && rect.bottom > window.innerHeight - 10) {
+        modal.style.top = `${Math.max(10, coords.top - rect.height - 4)}px`;
+      }
+    });
+  }
 
   // Focus input
   input.focus();
@@ -494,6 +507,169 @@ function injectCtrlKStyles() {
 .cm-ctrl-k-modal.loading .cm-ctrl-k-toggle {
   display: none;
 }
+
+/* ==========================================================================
+   MOBILE: Ctrl-K as a focused, keyboard-aware command bar.
+
+   On mobile, the modal becomes a clean input bar that sits right above
+   the virtual keyboard — like iMessage's text field or Spotlight search.
+   It uses the visualViewport API (via --mobile-vh custom property) to
+   stay visible when the keyboard is open.
+
+   Design: minimal, one clear action. The input is the hero.
+   Settings (quality/thinking) start expanded since there's room.
+   ========================================================================== */
+@media (max-width: 768px) {
+  .cm-ctrl-k-modal {
+    position: fixed !important;
+    left: 0 !important;
+    right: 0 !important;
+    /* Anchor to bottom of visual viewport, not layout viewport */
+    bottom: 0 !important;
+    bottom: calc(100vh - var(--mobile-vh, 100vh)) !important;
+    top: auto !important;
+    min-width: 100%;
+    max-width: 100%;
+    border-radius: 14px 14px 0 0;
+    border: none;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: none;
+    background: var(--bg-secondary, #1c1c1c);
+    animation: cm-ctrl-k-slide-up 0.2s cubic-bezier(0.2, 0, 0, 1);
+    /* Let content size naturally */
+    max-height: none;
+  }
+
+  @keyframes cm-ctrl-k-slide-up {
+    from {
+      transform: translateY(100%);
+      opacity: 0.8;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  /* Header: slim, just close button on the right */
+  .cm-ctrl-k-header {
+    cursor: default;
+    justify-content: flex-end;
+    padding: 6px 8px 0;
+    background: transparent;
+    border-bottom: none;
+    min-height: 0;
+  }
+
+  /* Hide the toggle — controls are always visible on mobile */
+  .cm-ctrl-k-toggle {
+    display: none !important;
+  }
+
+  .cm-ctrl-k-close {
+    width: 36px;
+    height: 36px;
+    font-size: 20px;
+    border-radius: 18px;
+    color: var(--text-muted, #888);
+  }
+
+  .cm-ctrl-k-close:hover {
+    background: rgba(255, 255, 255, 0.06);
+  }
+
+  /* Input: the hero element. Big, clear, inviting. */
+  .cm-ctrl-k-input-wrap {
+    padding: 4px 16px 12px;
+    gap: 10px;
+  }
+
+  .cm-ctrl-k-input {
+    font-size: 17px;  /* Comfortable reading size, prevents iOS zoom */
+    padding: 10px 0;
+    line-height: 1.4;
+    color: var(--text, #e0e0e0);
+  }
+
+  .cm-ctrl-k-input::placeholder {
+    color: var(--text-dim, #555);
+    font-weight: 400;
+  }
+
+  /* Loader: bigger, more visible */
+  .cm-ctrl-k-loader {
+    width: 18px;
+    height: 18px;
+    border-width: 2px;
+  }
+
+  /* Controls: always visible on mobile, no expand/collapse */
+  .cm-ctrl-k-controls {
+    max-height: none !important;
+    overflow: visible !important;
+    padding: 0 16px 12px !important;
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    padding-top: 12px !important;
+    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
+  }
+
+  /* Keep controls visible even when not "expanded" */
+  .cm-ctrl-k-modal:not(.expanded) .cm-ctrl-k-controls {
+    max-height: none !important;
+    padding: 12px 16px !important;
+    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
+    border-top-color: rgba(255, 255, 255, 0.06);
+  }
+
+  .cm-ctrl-k-row {
+    margin-bottom: 10px;
+    gap: 14px;
+  }
+
+  .cm-ctrl-k-label {
+    font-size: 12px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+    color: var(--text-dim, #666);
+    width: 64px;
+  }
+
+  .cm-ctrl-k-btns {
+    gap: 6px;
+    flex: 1;
+    justify-content: flex-start;
+  }
+
+  .cm-ctrl-k-btn {
+    width: 38px;
+    height: 38px;
+    font-size: 14px;
+    font-weight: 500;
+    border-radius: 10px;
+    border-color: rgba(255, 255, 255, 0.1);
+    transition: all 0.15s ease;
+  }
+
+  .cm-ctrl-k-btn.active {
+    border-color: var(--accent, #58a6ff);
+    box-shadow: 0 0 0 1px var(--accent, #58a6ff);
+  }
+
+  /* Loading state */
+  .cm-ctrl-k-modal.loading .cm-ctrl-k-input-wrap {
+    opacity: 0.7;
+  }
+
+  .cm-ctrl-k-modal.loading .cm-ctrl-k-controls {
+    display: none !important;
+  }
+
+  /* Error state */
+  .cm-ctrl-k-modal.error {
+    border-top-color: rgba(255, 80, 80, 0.3);
+  }
+}
 `;
 
   const style = document.createElement('style');

package/src/document-languages.js

@@ -0,0 +1,105 @@
+/**
+ * Document Language Detection
+ *
+ * Scans a document's content for fenced code blocks and extracts
+ * the set of executable programming languages used.
+ *
+ * Used by the notebook-scoped runtimes panel to show only relevant runtimes.
+ *
+ * @module document-languages
+ */
+
+// Languages that have runtimes (executable code blocks)
+const RUNTIME_LANGUAGES = new Set([
+  'python', 'bash', 'javascript', 'julia', 'r', 'shell', 'node', 'typescript',
+]);
+
+// Non-executable languages (display-only, config, or markup)
+const NON_EXECUTABLE_LANGUAGES = new Set([
+  'yaml', 'json', 'toml', 'xml', 'html', 'css', 'mermaid',
+  'output', 'markdown', 'md', 'text', 'txt', 'diff', 'csv',
+  'sql', 'graphql', 'latex', 'tex', 'bibtex',
+]);
+
+// Language alias normalization map
+const LANGUAGE_ALIASES = {
+  py: 'python',
+  python3: 'python',
+  js: 'javascript',
+  node: 'javascript',
+  ts: 'typescript',
+  typescript: 'javascript', // Same runtime as JS
+  jl: 'julia',
+  sh: 'bash',
+  shell: 'bash',
+  zsh: 'bash',
+  rlang: 'r',
+};
+
+/**
+ * Extract the set of executable programming languages from a document.
+ *
+ * Scans for fenced code blocks (``` or ~~~) and collects their language tags,
+ * filtering out non-executable languages (yaml, json, html, css, mermaid, output, etc.)
+ * and normalizing aliases (py → python, js → javascript, etc.)
+ *
+ * @param {string} content - Document content (full markdown text)
+ * @returns {Set<string>} Set of normalized language names (e.g. Set(['python', 'bash']))
+ */
+export function getDocumentLanguages(content) {
+  const languages = new Set();
+  // Match opening fences: ```python or ~~~julia
+  // Also handle ```python config (skip config blocks)
+  const fenceRegex = /^(`{3,}|~{3,})(\w+)(?:\s+(.*))?$/gm;
+  let match;
+
+  while ((match = fenceRegex.exec(content))) {
+    const rawLang = match[2].toLowerCase();
+    const extra = (match[3] || '').trim().toLowerCase();
+
+    // Skip config blocks (```yaml config)
+    if (extra === 'config') continue;
+
+    // Skip non-executable languages
+    if (NON_EXECUTABLE_LANGUAGES.has(rawLang)) continue;
+
+    // Normalize aliases
+    const normalized = LANGUAGE_ALIASES[rawLang] || rawLang;
+
+    // Only include if it's a known runtime language
+    // (to avoid random annotation languages like "diagram" etc.)
+    if (RUNTIME_LANGUAGES.has(rawLang) || RUNTIME_LANGUAGES.has(normalized)) {
+      languages.add(normalized);
+    }
+  }
+
+  return languages;
+}
+
+/**
+ * Map a normalized language name to its display label and badge color.
+ *
+ * @param {string} language - Normalized language name
+ * @returns {{ label: string, badgeClass: string }}
+ */
+export function getLanguageDisplay(language) {
+  const displays = {
+    python: { label: 'Python', badgeClass: 'python' },
+    javascript: { label: 'JavaScript', badgeClass: 'javascript' },
+    bash: { label: 'Bash', badgeClass: 'bash' },
+    julia: { label: 'Julia', badgeClass: 'julia' },
+    r: { label: 'R', badgeClass: 'r' },
+  };
+  return displays[language] || { label: language, badgeClass: language };
+}
+
+/**
+ * Check if a language is executable (has a runtime).
+ *
+ * @param {string} language - Language name (raw or normalized)
+ * @returns {boolean}
+ */
+export function isExecutableLanguage(language) {
+  const normalized = LANGUAGE_ALIASES[language.toLowerCase()] || language.toLowerCase();
+  return RUNTIME_LANGUAGES.has(normalized);
+}

package/src/execution.js

@@ -105,9 +105,6 @@ export class ExecutionManager {
     /** @type {string|null} Default runtime URL for monitor mode */
     this._defaultRuntimeUrl = null;
 
-    /** @type {string} Session name for execution isolation */
-    this._monitorSession = 'default';
-
     /** @type {Map<string, Function>} Unsubscribe functions for monitor status watchers */
     this._monitorUnsubscribes = new Map();
 
@@ -130,9 +127,8 @@ export class ExecutionManager {
    * @param {Y.Doc} options.ydoc - Yjs document
    * @param {string} options.runtimeUrl - Default runtime URL for MRP
    * @param {import('y-protocols/awareness').Awareness} [options.awareness] - For monitor detection
-   * @param {string} [options.session] - Session name for execution isolation (defaults to 'default')
    */
-  enableMonitorMode({ ydoc, runtimeUrl, awareness, session }) {
+  enableMonitorMode({ ydoc, runtimeUrl, awareness }) {
     if (this.coordination) {
       this.coordination.destroy();
     }
@@ -141,9 +137,8 @@ export class ExecutionManager {
     this._defaultRuntimeUrl = runtimeUrl;
     this._monitorMode = true;
     this._awareness = awareness;
-    this._monitorSession = session || 'default';
 
-    console.log('[ExecutionManager] Monitor mode enabled, runtimeUrl:', runtimeUrl, 'session:', this._monitorSession);
+    console.log('[ExecutionManager] Monitor mode enabled, runtimeUrl:', runtimeUrl);
   }
 
   /**
@@ -742,6 +737,9 @@ export class ExecutionManager {
     // Emit start event
     this._emit('cellRun', index, cell, execId);
 
+    // Direct execution output write throttling (reduces CRDT churn for progress bars)
+    let clearChunkFlushTimer = null;
+
     try {
       // Prepare output position
       // Re-read content as it may have changed
@@ -820,22 +818,11 @@ export class ExecutionManager {
 
       // Track current output length in document for replacement
       let currentDocOutputLen = 0;
+      const chunkFlushMs = 100;
+      let chunkFlushTimer = null;
+      let latestProcessedOutput = '';
 
-      const onChunk = (chunk, accumulatedRaw, done) => {
-        if (controller.signal.aborted) return;
-
-        // Process through terminal buffer (handles \r, cursor movement, ANSI)
-        buffer.write(chunk);
-
-        // Get processed output with ANSI codes preserved
-        let processedOutput = buffer.toAnsi();
-
-        // Ensure output ends with newline so closing ``` stays on its own line
-        // This is critical for maintaining valid markdown structure
-        if (processedOutput && !processedOutput.endsWith('\n')) {
-          processedOutput += '\n';
-        }
-
+      const applyProcessedOutput = (processedOutput) => {
         // Get current position - prefer finding by execId for robustness
         let currentOutputStart = outputContentStart;
 
@@ -870,6 +857,61 @@ export class ExecutionManager {
         });
 
         currentDocOutputLen = processedOutput.length;
+      };
+
+      const flushChunkOutputNow = () => {
+        if (chunkFlushTimer) {
+          clearTimeout(chunkFlushTimer);
+          chunkFlushTimer = null;
+        }
+        applyProcessedOutput(latestProcessedOutput);
+      };
+
+      clearChunkFlushTimer = () => {
+        if (chunkFlushTimer) {
+          clearTimeout(chunkFlushTimer);
+          chunkFlushTimer = null;
+        }
+      };
+
+      const scheduleChunkOutputFlush = () => {
+        if (chunkFlushMs === 0) {
+          flushChunkOutputNow();
+          return;
+        }
+        if (chunkFlushTimer) return;
+        chunkFlushTimer = setTimeout(() => {
+          chunkFlushTimer = null;
+          applyProcessedOutput(latestProcessedOutput);
+        }, chunkFlushMs);
+      };
+
+      controller.signal.addEventListener('abort', () => {
+        clearChunkFlushTimer?.();
+      }, { once: true });
+
+      const onChunk = (chunk, accumulatedRaw, done) => {
+        if (controller.signal.aborted) return;
+
+        // Process through terminal buffer (handles \r, cursor movement, ANSI)
+        buffer.write(chunk);
+
+        // Get processed output with ANSI codes preserved
+        let processedOutput = buffer.toAnsi();
+
+        // Ensure output ends with newline so closing ``` stays on its own line
+        // This is critical for maintaining valid markdown structure
+        if (processedOutput && !processedOutput.endsWith('\n')) {
+          processedOutput += '\n';
+        }
+
+        latestProcessedOutput = processedOutput;
+
+        if (done) {
+          flushChunkOutputNow();
+        } else {
+          scheduleChunkOutputFlush();
+        }
 
         this._emit('cellOutput', index, chunk, processedOutput, execId);
       };
@@ -888,6 +930,9 @@ export class ExecutionManager {
             return;
           }
 
+          // Flush pending output so prompt context is visible immediately
+          flushChunkOutputNow();
+
           const stdinExecId = execId;
 
           // Wait for any pending output to be written to the document
@@ -1006,14 +1051,17 @@ export class ExecutionManager {
 
       // Execute with streaming (pass onStdinRequest for input() support)
       // Pass execId so hub runtimes can find the output block
-      // Pass session name for named session support (e.g., ```js sandbox)
+      // Pass context hint for runtime-specific isolation (e.g., ```js sandbox)
       const result = await this.registry.executeStreaming(code, runtimeLanguage, onChunk, onStdinRequest, {
         execId,
         cellId: cell.id || `cell-${index}`,
-        session: cell.session,
+        context: cell.context,
         onAsset,
       });
 
+      // Flush any pending throttled output before final normalization
+      flushChunkOutputNow();
+
       // Final update - find output block by execId for robustness
       content = this.editor.getContent();
       const finalOutputBlock = findOutputBlockByExecId(content, execId);
@@ -1132,6 +1180,7 @@ export class ExecutionManager {
       }
       return execId;
     } finally {
+      clearChunkFlushTimer?.();
       this.running.delete(execId);
       this.buffers.delete(execId);
 
@@ -1176,7 +1225,6 @@ export class ExecutionManager {
       code,
       language,
       runtimeUrl,
-      session: this._monitorSession,
       cellId: cell.id || `cell-${index}`,
     });