mrmd-editor 0.6.0 → 0.7.0

package/src/shell/state.js

@@ -69,12 +69,12 @@ function getInitialState() {
     runtimes: {
       // Legacy: single Python runtime info (for backward compat)
       python: null,
-      // New: multiple runtime sessions
+      // Runtime registry
       sessions: {
         // 'shared': { id, url, status, venv, cwd, ... }
         // 'python-8001': { id, url, status, venv, cwd, dedicated: true, port: 8001 }
       },
-      // Document → session attachment
+      // Document → runtime attachment
       attachments: {
         // 'my-notebook': 'shared'
         // 'data-analysis': 'python-8001'
@@ -464,55 +464,55 @@ export class ShellStateManager {
   }
 
   // ===========================================================================
-  // Runtime Session Management
+  // Runtime Attachment Management
   // ===========================================================================
 
   /**
-   * Get the session attached to a document
+   * Get the runtime attached to a document
    * @param {string} docName - Document name
-   * @returns {string} Session ID (defaults to 'shared')
+   * @returns {string} Runtime ID (defaults to 'shared')
    */
-  getDocumentSession(docName) {
+  getDocumentRuntime(docName) {
     return this.get(`runtimes.attachments.${docName}`) || 'shared';
   }
 
   /**
-   * Get session info
-   * @param {string} sessionId - Session ID
+   * Get runtime info
+   * @param {string} runtimeId - Runtime ID
    * @returns {Object|null}
    */
-  getSession(sessionId) {
-    return this.get(`runtimes.sessions.${sessionId}`) || null;
+  getRuntime(runtimeId) {
+    return this.get(`runtimes.sessions.${runtimeId}`) || null;
   }
 
   /**
-   * Get all available sessions
+   * Get all available runtimes
    * @returns {Array<{id: string, info: Object}>}
    */
-  getSessions() {
-    const sessions = this.get('runtimes.sessions') || {};
-    return Object.entries(sessions).map(([id, info]) => ({ id, info }));
+  getRuntimes() {
+    const runtimes = this.get('runtimes.sessions') || {};
+    return Object.entries(runtimes).map(([id, info]) => ({ id, info }));
   }
 
   /**
-   * Attach a document to a session
+   * Attach a document to a runtime
    * @param {string} docName - Document name
-   * @param {string} sessionId - Session ID to attach to
+   * @param {string} runtimeId - Runtime ID to attach to
    */
-  attachDocument(docName, sessionId) {
-    this._set(`runtimes.attachments.${docName}`, sessionId);
+  attachDocument(docName, runtimeId) {
+    this._set(`runtimes.attachments.${docName}`, runtimeId);
   }
 
   /**
-   * Register a runtime session
-   * @param {string} sessionId - Session ID
-   * @param {Object} info - Session info (url, status, venv, cwd, etc.)
+   * Register runtime metadata
+   * @param {string} runtimeId - Runtime ID
+   * @param {Object} info - Runtime info (url, status, venv, cwd, etc.)
    */
-  registerSession(sessionId, info) {
-    this._set(`runtimes.sessions.${sessionId}`, info);
+  registerRuntime(runtimeId, info) {
+    this._set(`runtimes.sessions.${runtimeId}`, info);
 
-    // Also update legacy python state if this is the shared session
-    if (sessionId === 'shared' && info.language === 'python') {
+    // Also update legacy python state if this is the shared runtime
+    if (runtimeId === 'shared' && info.language === 'python') {
       this._set('runtimes.python', {
         language: 'python',
         version: info.version,
@@ -527,20 +527,20 @@ export class ShellStateManager {
   }
 
   /**
-   * Create a new dedicated runtime session
-   * @param {string} docName - Document to attach the session to
+   * Create and attach a runtime
+   * @param {string} docName - Document to attach runtime to
    * @param {'shared'|'dedicated'} mode - Runtime mode
    * @param {string} [venv] - Path to virtual environment (for dedicated runtimes)
-   * @returns {Promise<Object>} Session info
+   * @returns {Promise<Object>} Runtime info
    */
-  async createSession(docName, mode = 'dedicated', venv = null) {
+  async createRuntime(docName, mode = 'dedicated', venv = null) {
     try {
-      const result = await this._client.createSession(docName, mode, venv);
+      const result = await this._client.createRuntimeAttachment(docName, mode, venv);
 
-      const sessionId = result.id || (mode === 'dedicated' ? `python-${result.runtimes?.python?.port || Date.now()}` : 'shared');
+      const runtimeId = result.id || (mode === 'dedicated' ? `python-${result.runtimes?.python?.port || Date.now()}` : 'shared');
 
-      const sessionInfo = {
-        id: sessionId,
+      const runtimeInfo = {
+        id: runtimeId,
         url: result.runtimes?.python?.url || result.sync,
         status: 'ready',
         dedicated: mode === 'dedicated',
@@ -550,15 +550,15 @@ export class ShellStateManager {
         docName,
       };
 
-      // Register the session
-      this.registerSession(sessionId, sessionInfo);
+      // Register runtime
+      this.registerRuntime(runtimeId, runtimeInfo);
 
-      // Attach the document to this session
-      this.attachDocument(docName, sessionId);
+      // Attach document to runtime
+      this.attachDocument(docName, runtimeId);
 
-      return sessionInfo;
+      return runtimeInfo;
     } catch (error) {
-      console.error('Failed to create session:', error);
+      console.error('Failed to create runtime:', error);
       throw error;
     }
   }
@@ -569,9 +569,30 @@ export class ShellStateManager {
    * @returns {string|null} Runtime URL
    */
   getRuntimeUrl(docName) {
-    const sessionId = this.getDocumentSession(docName);
-    const session = this.getSession(sessionId);
-    return session?.url || null;
+    const runtimeId = this.getDocumentRuntime(docName);
+    const runtime = this.getRuntime(runtimeId);
+    return runtime?.url || null;
+  }
+
+  // Legacy aliases
+  getDocumentSession(docName) {
+    return this.getDocumentRuntime(docName);
+  }
+
+  getSession(sessionId) {
+    return this.getRuntime(sessionId);
+  }
+
+  getSessions() {
+    return this.getRuntimes();
+  }
+
+  registerSession(sessionId, info) {
+    this.registerRuntime(sessionId, info);
+  }
+
+  async createSession(docName, mode = 'dedicated', venv = null) {
+    return this.createRuntime(docName, mode, venv);
   }
 
   // ===========================================================================

package/src/shell/styles.js

@@ -601,6 +601,271 @@ export const filePickerStyles = `
 }
 `;
 
+// =============================================================================
+// MOBILE RESPONSIVE STYLES
+// =============================================================================
+
+export const mobileStyles = `
+/* ---- Status Bar: mobile-friendly ---- */
+@media (max-width: 768px) {
+  .mrmd-statusbar {
+    height: auto;
+    min-height: 44px;
+    padding: 8px 12px;
+    gap: 4px;
+    font-size: 13px;
+    flex-wrap: wrap;
+    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
+  }
+
+  .mrmd-statusbar__segment {
+    padding: 8px 12px;
+    min-height: 44px;
+    font-size: 14px;
+  }
+
+  .mrmd-statusbar__segment--files {
+    min-width: 0;
+    flex: 1;
+  }
+
+  .mrmd-statusbar__icon {
+    width: 18px;
+    height: 18px;
+  }
+
+  .mrmd-statusbar__dot {
+    width: 10px;
+    height: 10px;
+  }
+
+  .mrmd-statusbar__badge {
+    font-size: 10px;
+    padding: 2px 6px;
+  }
+
+  .mrmd-statusbar__separator {
+    display: none;
+  }
+
+  .mrmd-statusbar__spacer {
+    display: none;
+  }
+}
+
+/* ---- Menus → Bottom sheets on mobile ---- */
+@media (max-width: 768px) {
+  .mrmd-menu {
+    position: fixed !important;
+    top: auto !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    max-width: 100% !important;
+    min-width: 100% !important;
+    max-height: 70vh;
+    border-radius: 16px 16px 0 0;
+    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.4);
+    padding: 8px 0;
+    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
+    animation: mrmd-slide-up 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  @keyframes mrmd-slide-up {
+    from { transform: translateY(100%); }
+    to { transform: translateY(0); }
+  }
+
+  /* Drag handle at top of bottom sheet */
+  .mrmd-menu::before {
+    content: '';
+    display: block;
+    width: 36px;
+    height: 4px;
+    background: var(--mrmd-fg-muted, #666);
+    border-radius: 2px;
+    margin: 4px auto 8px;
+    opacity: 0.4;
+  }
+
+  .mrmd-menu__header {
+    padding: 12px 20px 8px;
+    font-size: 12px;
+  }
+
+  .mrmd-menu__item {
+    padding: 14px 20px;
+    min-height: 48px;
+    font-size: 15px;
+    gap: 14px;
+  }
+
+  .mrmd-menu__item-icon {
+    width: 22px;
+    height: 22px;
+    font-size: 18px;
+  }
+
+  .mrmd-menu__item-shortcut {
+    display: none; /* Keyboard shortcuts aren't relevant on touch */
+  }
+
+  .mrmd-menu__info {
+    padding: 10px 20px;
+    font-size: 12px;
+  }
+
+  .mrmd-menu__divider {
+    margin: 6px 16px;
+  }
+
+  .mrmd-menu__file {
+    padding: 12px 20px;
+    min-height: 48px;
+    font-size: 15px;
+  }
+}
+
+/* ---- Dialogs: full-screen on mobile ---- */
+@media (max-width: 768px) {
+  .mrmd-dialog-overlay {
+    padding: 0;
+    align-items: flex-end;
+  }
+
+  .mrmd-dialog {
+    min-width: 100%;
+    max-width: 100%;
+    max-height: 90vh;
+    border-radius: 16px 16px 0 0;
+    border: none;
+    border-top: 1px solid var(--mrmd-dialog-border, var(--mrmd-border, #454545));
+    animation: mrmd-slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .mrmd-dialog__header {
+    padding: 16px 20px;
+    position: relative;
+  }
+
+  /* Drag handle */
+  .mrmd-dialog__header::before {
+    content: '';
+    position: absolute;
+    top: 8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 36px;
+    height: 4px;
+    background: var(--mrmd-fg-muted, #888);
+    border-radius: 2px;
+    opacity: 0.4;
+  }
+
+  .mrmd-dialog__title {
+    font-size: 16px;
+    padding-top: 8px;
+  }
+
+  .mrmd-dialog__close {
+    width: 44px;
+    height: 44px;
+    font-size: 22px;
+  }
+
+  .mrmd-dialog__body {
+    padding: 16px 20px;
+  }
+
+  .mrmd-dialog__footer {
+    padding: 16px 20px;
+    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
+    gap: 12px;
+  }
+
+  .mrmd-input {
+    padding: 12px 14px;
+    font-size: 16px; /* Prevents iOS zoom on focus */
+    border-radius: 8px;
+  }
+
+  .mrmd-button {
+    padding: 12px 20px;
+    font-size: 15px;
+    border-radius: 8px;
+    min-height: 44px;
+  }
+}
+
+/* ---- File Picker: full-height on mobile ---- */
+@media (max-width: 768px) {
+  .mrmd-filepicker {
+    min-height: 50vh;
+  }
+
+  .mrmd-filepicker__path {
+    padding: 12px 0;
+    gap: 2px;
+  }
+
+  .mrmd-filepicker__path-segment {
+    padding: 6px 10px;
+    font-size: 14px;
+    min-height: 36px;
+  }
+
+  .mrmd-filepicker__item {
+    padding: 14px 12px;
+    min-height: 52px;
+    font-size: 15px;
+    gap: 14px;
+  }
+
+  .mrmd-filepicker__item-icon {
+    font-size: 20px;
+    width: 28px;
+  }
+
+  .mrmd-filepicker__item-info {
+    font-size: 12px;
+  }
+}
+
+/* ---- Touch-specific: larger targets for coarse pointers ---- */
+@media (pointer: coarse) {
+  .mrmd-statusbar__segment {
+    min-height: 44px;
+  }
+
+  .mrmd-menu__item {
+    min-height: 48px;
+  }
+
+  .mrmd-dialog__close {
+    min-width: 44px;
+    min-height: 44px;
+  }
+
+  .mrmd-button {
+    min-height: 44px;
+  }
+
+  .mrmd-filepicker__item {
+    min-height: 48px;
+  }
+
+  .mrmd-filepicker__path-segment {
+    min-height: 36px;
+  }
+}
+
+/* ---- Shared mobile animation keyframes ---- */
+@keyframes mrmd-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+`;
+
 // =============================================================================
 // ALL STYLES COMBINED
 // =============================================================================
@@ -672,6 +937,7 @@ ${menuStyles}
 ${dialogStyles}
 ${filePickerStyles}
 ${studioStyles}
+${mobileStyles}
 `;
 
 // =============================================================================