mrmd-editor 0.5.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mrmd-editor",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "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/config/schema.js

@@ -389,11 +389,12 @@ export function normalizeOptions(options = {}) {
   if (options.javascript === true) {
     config.runtimes.javascript = { type: 'builtin' };
   } else if (options.javascript === false) {
-    // Explicitly disabled
+    // Explicitly disabled (even if provided via options.runtimes)
+    delete config.runtimes.javascript;
   } else if (options.javascript && typeof options.javascript === 'object') {
     config.runtimes.javascript = { type: 'custom', instance: options.javascript };
-  } else if (options.javascript === undefined) {
-    // Default: enable builtin
+  } else if (options.javascript === undefined && !config.runtimes.javascript) {
+    // Default: enable builtin only when no JS runtime was already provided
     config.runtimes.javascript = { type: 'builtin' };
   }
 

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

@@ -17,6 +17,37 @@ import { pendingStdinRequests } from './output-widget.js';
 import { MonitorCoordination, EXECUTION_STATUS } from './monitor-coordination.js';
 import * as Y from 'yjs';
 
+const STATIC_IMPORT_ERROR_RE = /import declarations may only appear at top level of a module/i;
+const UNDEFINED_VAR_RE = /\bis not defined\b/i;
+
+function buildJavaScriptImportHint(errorText, runtimeLanguage) {
+  const language = String(runtimeLanguage || '').toLowerCase();
+  const isJavaScriptLike = language === 'javascript' || language === 'js' || language === 'node' || language === 'typescript' || language === 'ts';
+  const text = String(errorText || '');
+  if (!isJavaScriptLike) {
+    return '';
+  }
+
+  if (STATIC_IMPORT_ERROR_RE.test(text)) {
+    return [
+      '',
+      '[Hint: JavaScript cells run as scripts (eval), not ES modules.]',
+      "[Use dynamic import: const pkg = await import('https://cdn.skypack.dev/lodash')]",
+      '[For a cached helper, open Help > JavaScript Imports and copy loadPkg().]',
+    ].join('\n');
+  }
+
+  if (UNDEFINED_VAR_RE.test(text)) {
+    return [
+      '',
+      '[Hint: For cross-cell JS variables, bind imports to globals.]',
+      "[Example: d3 = await globalThis.loadPkg('d3', 'https://cdn.skypack.dev/d3@7')]",
+    ].join('\n');
+  }
+
+  return '';
+}
+
 /**
  * Execution Manager
  *
@@ -74,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();
 
@@ -99,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();
     }
@@ -110,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);
   }
 
   /**
@@ -735,7 +761,17 @@ export class ExecutionManager {
         if (m === 'mermaid') return 'html'; // Mermaid renders to HTML/SVG
         return m;
       }) : null;
-      const outputTag = outputType ? `output:${execId}:${outputType}` : `output:${execId}`;
+      let outputTag;
+      if (!outputType) {
+        outputTag = `output:${execId}`;
+      } else {
+        const outputTagParts = [`output:${execId}`, outputType];
+        if (outputType === 'css') {
+          // Let CSS widgets scope selector matching to where this CSS actually targets.
+          outputTagParts.push(artifact && artifactName ? 'artifact' : 'main');
+        }
+        outputTag = outputTagParts.join(':');
+      }
 
       if (existingOutput) {
         // Replace existing output block with new one that has our execId
@@ -965,11 +1001,11 @@ 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,
       });
 
@@ -983,8 +1019,10 @@ export class ExecutionManager {
         // Handle errors
         let outputWithError = finalOutput;
         if (result.error) {
-          const errorText = `\n[Error: ${result.error.message || result.stderr}]`;
-          outputWithError = finalOutput + errorText;
+          const rawError = result.error.message || result.stderr || String(result.error);
+          const errorText = `\n[Error: ${rawError}]`;
+          const runtimeHint = buildJavaScriptImportHint(rawError, runtimeLanguage);
+          outputWithError = finalOutput + errorText + runtimeHint;
           this._emit('cellError', index, result.error, execId);
         }
 
@@ -1133,7 +1171,6 @@ export class ExecutionManager {
       code,
       language,
       runtimeUrl,
-      session: this._monitorSession,
       cellId: cell.id || `cell-${index}`,
     });