vimd 0.5.1 → 0.5.3

package/dist/core/folder-mode/assets/folder-mode.css

@@ -3,6 +3,7 @@
  */
 
 :root {
+  /* Sidebar */
   --sidebar-bg: #252526;
   --sidebar-text: #cccccc;
   --sidebar-text-muted: #858585;
@@ -10,11 +11,24 @@
   --sidebar-selected: #094771;
   --sidebar-border: #3c3c3c;
   --sidebar-header-bg: #3c3c3c;
-  --sidebar-width: 250px;
+  --sidebar-width: 300px;
   --sidebar-min-width: 150px;
   --sidebar-max-width: 500px;
-  --toggle-bar-width: 20px;
   --resizer-width: 4px;
+
+  /* Panel header (light theme) */
+  --panel-header-border: #e0e0e0;
+  --panel-filename-color: #666;
+  --panel-close-color: #999;
+  --panel-close-hover: #333;
+  --panel-active-color: #007acc;
+
+  /* Context menu */
+  --context-menu-bg: #ffffff;
+  --context-menu-border: #e0e0e0;
+  --context-menu-hover: #f5f5f5;
+  --context-menu-text: #333;
+  --context-menu-shadow: rgba(0, 0, 0, 0.15);
 }
 
 * {
@@ -24,6 +38,8 @@
 html, body {
   margin: 0;
   padding: 0;
+  width: 100%;
+  max-width: none;
   height: 100%;
   overflow: hidden;
 }
@@ -31,27 +47,12 @@ html, body {
 /* Container */
 .vimd-container {
   display: flex;
+  width: 100vw;
   height: 100vh;
   overflow: hidden;
   background: #1e1e1e;
 }
 
-/* Toggle bar (visible when sidebar is collapsed) */
-.vimd-sidebar-toggle-bar {
-  width: var(--toggle-bar-width);
-  min-width: var(--toggle-bar-width);
-  background: var(--sidebar-bg);
-  border-right: 1px solid var(--sidebar-border);
-  display: none;
-  flex-direction: column;
-  align-items: center;
-  padding-top: 8px;
-}
-
-.vimd-sidebar-toggle-bar.visible {
-  display: flex;
-}
-
 /* Sidebar */
 .vimd-sidebar {
   width: var(--sidebar-width);
@@ -63,15 +64,6 @@ html, body {
   flex-direction: column;
   position: relative;
   border-right: 1px solid var(--sidebar-border);
-  transition: width 0.15s ease, min-width 0.15s ease, opacity 0.15s ease;
-}
-
-.vimd-sidebar.collapsed {
-  width: 0;
-  min-width: 0;
-  border-right: none;
-  overflow: hidden;
-  opacity: 0;
 }
 
 /* Sidebar header */
@@ -98,26 +90,6 @@ html, body {
   flex: 1;
 }
 
-/* Toggle button */
-.vimd-toggle-btn {
-  background: transparent;
-  border: none;
-  color: var(--sidebar-text);
-  cursor: pointer;
-  padding: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 3px;
-  opacity: 0.7;
-  transition: opacity 0.1s, background 0.1s;
-}
-
-.vimd-toggle-btn:hover {
-  opacity: 1;
-  background: var(--sidebar-hover);
-}
-
 /* File tree */
 .vimd-tree {
   flex: 1;
@@ -238,10 +210,117 @@ html, body {
 
 /* Preview area */
 .vimd-preview {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+  background: #ffffff;
+}
+
+/* Panel */
+.vimd-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: 100px;
+}
+
+/* Split view: Panel 1 (initial 720px, resizable) */
+.vimd-panel.split-panel1 {
+  flex: none;
+  /* width is set by JS */
+}
+
+/* Split view: Panel 2 (takes remaining space) */
+.vimd-panel.split-panel2 {
+  flex: 1;
+}
+
+.vimd-panel-body {
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
-  background: #ffffff;
+}
+
+/* Panel header */
+.vimd-panel-header {
+  display: none;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  height: 28px;
+  padding: 4px 16px;
+  background: transparent;
+  border-bottom: 1px solid var(--panel-header-border);
+  position: relative;
+  flex-shrink: 0;
+}
+
+.vimd-panel-header.visible {
+  display: flex;
+}
+
+.vimd-panel-header.active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--panel-active-color);
+}
+
+.vimd-panel-filename {
+  font-size: 12px;
+  color: var(--panel-filename-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: calc(100% - 30px);
+}
+
+.vimd-panel-filename:hover {
+  overflow: visible;
+  white-space: normal;
+  word-break: break-all;
+}
+
+.vimd-panel-close {
+  background: none;
+  border: none;
+  font-size: 16px;
+  color: var(--panel-close-color);
+  cursor: pointer;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 3px;
+}
+
+.vimd-panel-close:hover {
+  color: var(--panel-close-hover);
+  background: rgba(0, 0, 0, 0.05);
+}
+
+/* Panel resizer (between panels) */
+.vimd-panel-resizer {
+  width: 4px;
+  background: transparent;
+  cursor: ew-resize;
+  flex-shrink: 0;
+  display: none;
+}
+
+.vimd-panel-resizer.visible {
+  display: block;
+}
+
+.vimd-panel-resizer:hover,
+.vimd-panel-resizer.active {
+  background: var(--panel-active-color);
 }
 
 /* Welcome screen */
@@ -274,10 +353,15 @@ html, body {
 .vimd-content {
   display: none;
   padding: 32px;
-  max-width: 900px;
+  max-width: 720px;
   margin: 0 auto;
 }
 
+.vimd-content pre,
+.vimd-content table {
+  overflow-x: auto;
+}
+
 .vimd-content.visible {
   display: block;
 }
@@ -307,3 +391,35 @@ html, body {
   margin: 0;
   font-size: 14px;
 }
+
+/* Context menu */
+.vimd-context-menu {
+  display: none;
+  position: fixed;
+  background: var(--context-menu-bg);
+  border: 1px solid var(--context-menu-border);
+  border-radius: 4px;
+  box-shadow: 0 2px 8px var(--context-menu-shadow);
+  min-width: 150px;
+  z-index: 1000;
+  padding: 4px 0;
+}
+
+.vimd-context-menu.visible {
+  display: block;
+}
+
+.vimd-context-item {
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--context-menu-text);
+}
+
+.vimd-context-item:hover {
+  background: var(--context-menu-hover);
+}
+
+.vimd-context-item.hidden {
+  display: none;
+}

package/dist/core/folder-mode/assets/folder-mode.js

@@ -6,25 +6,53 @@
 
   // Storage keys
   var STORAGE_KEY_EXPANDED = 'vimd-folder-expanded';
-  var STORAGE_KEY_WIDTH = 'vimd-sidebar-width';
+  var STORAGE_KEY_SIDEBAR_WIDTH = 'vimd-sidebar-width';
+  var STORAGE_KEY_STATE = 'vimd-folder-mode-state';
 
   // State
   var fileTree = [];
-  var currentPath = null;
   var ws = null;
   var expandedFolders = new Set();
-  var isResizing = false;
+  var isSidebarResizing = false;
+  var isPanelResizing = false;
+
+  // Panel state
+  var state = {
+    isSplitView: false,
+    panels: [
+      { file: null },
+      { file: null }
+    ],
+    activePanel: 0,
+    panelWidth: 720
+  };
 
   // DOM elements
   var sidebar = document.getElementById('sidebar');
-  var toggleBar = document.getElementById('toggle-bar');
-  var toggleBtn = document.getElementById('toggle-btn');
-  var toggleBtnCollapsed = document.getElementById('toggle-btn-collapsed');
   var fileTreeEl = document.getElementById('file-tree');
+  var preview = document.getElementById('preview');
+  var sidebarResizer = document.getElementById('resizer');
+
+  // Panel elements
+  var panel1 = document.getElementById('panel1');
+  var panel1Header = document.getElementById('panel1-header');
+  var panel1Filename = document.getElementById('panel1-filename');
+  var panel1Close = document.getElementById('panel1-close');
   var welcome = document.getElementById('welcome');
   var welcomeMessage = document.getElementById('welcome-message');
   var content = document.getElementById('content');
-  var resizer = document.getElementById('resizer');
+
+  // Panel 2 elements (created dynamically)
+  var panel2 = null;
+  var panel2Header = null;
+  var panel2Filename = null;
+  var panel2Close = null;
+  var panel2Content = null;
+  var panelResizer = null;
+
+  // Context menu
+  var contextMenu = document.getElementById('context-menu');
+  var contextTarget = null;
 
   /**
    * Initialize the application
@@ -34,6 +62,7 @@
     connectWebSocket();
     setupEventListeners();
     handleInitialPath();
+    updatePanelUI();
   }
 
   /**
@@ -53,13 +82,27 @@
 
     // Load sidebar width
     try {
-      var width = localStorage.getItem(STORAGE_KEY_WIDTH);
+      var width = localStorage.getItem(STORAGE_KEY_SIDEBAR_WIDTH);
       if (width) {
         sidebar.style.width = width + 'px';
       }
     } catch (e) {
       console.warn('[vimd] Failed to load sidebar width:', e);
     }
+
+    // Load panel state
+    try {
+      var savedState = localStorage.getItem(STORAGE_KEY_STATE);
+      if (savedState) {
+        var parsed = JSON.parse(savedState);
+        state.isSplitView = parsed.isSplitView || false;
+        state.panels = parsed.panels || [{ file: null }, { file: null }];
+        state.activePanel = parsed.activePanel || 0;
+        state.panelWidth = parsed.panelWidth || 720;
+      }
+    } catch (e) {
+      console.warn('[vimd] Failed to load panel state:', e);
+    }
   }
 
   /**
@@ -80,13 +123,29 @@
     try {
       var width = parseInt(sidebar.style.width, 10);
       if (width) {
-        localStorage.setItem(STORAGE_KEY_WIDTH, width.toString());
+        localStorage.setItem(STORAGE_KEY_SIDEBAR_WIDTH, width.toString());
       }
     } catch (e) {
       console.warn('[vimd] Failed to save sidebar width:', e);
     }
   }
 
+  /**
+   * Save panel state to localStorage
+   */
+  function savePanelState() {
+    try {
+      localStorage.setItem(STORAGE_KEY_STATE, JSON.stringify({
+        isSplitView: state.isSplitView,
+        panels: state.panels,
+        activePanel: state.activePanel,
+        panelWidth: state.panelWidth
+      }));
+    } catch (e) {
+      console.warn('[vimd] Failed to save panel state:', e);
+    }
+  }
+
   /**
    * Connect to WebSocket server
    */
@@ -126,6 +185,8 @@
         fileTree = msg.data;
         renderTree();
         updateWelcomeMessage();
+        // Restore files after tree loads
+        restoreFilesFromState();
         break;
 
       case 'content':
@@ -141,11 +202,7 @@
         break;
 
       case 'fileDeleted':
-        if (currentPath === msg.data.path) {
-          showWelcome();
-          currentPath = null;
-          updateURL('/');
-        }
+        handleFileDeleted(msg.data.path);
         break;
 
       default:
@@ -153,6 +210,96 @@
     }
   }
 
+  /**
+   * Restore files from saved state
+   */
+  function restoreFilesFromState() {
+    // Check if saved files exist
+    var panel1File = state.panels[0].file;
+    var panel2File = state.panels[1].file;
+
+    // Reset if files don't exist
+    if (panel1File && !fileExists(panel1File)) {
+      state.panels[0].file = null;
+    }
+    if (panel2File && !fileExists(panel2File)) {
+      state.panels[1].file = null;
+    }
+
+    // If both files are gone, reset to single panel welcome
+    if (!state.panels[0].file && !state.panels[1].file) {
+      state.isSplitView = false;
+      state.activePanel = 0;
+      savePanelState();
+      updatePanelUI();
+      return;
+    }
+
+    // Restore split view if needed
+    if (state.isSplitView && state.panels[1].file) {
+      createPanel2();
+    }
+
+    // Restore panel 1 file
+    if (state.panels[0].file) {
+      requestFile(state.panels[0].file, 0);
+    }
+
+    // Restore panel 2 file
+    if (state.isSplitView && state.panels[1].file) {
+      requestFile(state.panels[1].file, 1);
+    }
+
+    updatePanelUI();
+  }
+
+  /**
+   * Check if file exists in tree
+   */
+  function fileExists(path) {
+    function search(nodes) {
+      for (var i = 0; i < nodes.length; i++) {
+        var node = nodes[i];
+        if (node.type === 'file' && node.path === path) {
+          return true;
+        }
+        if (node.type === 'folder' && node.children) {
+          if (search(node.children)) {
+            return true;
+          }
+        }
+      }
+      return false;
+    }
+    return search(fileTree);
+  }
+
+  /**
+   * Handle file deleted event
+   */
+  function handleFileDeleted(path) {
+    var needsUpdate = false;
+
+    if (state.panels[0].file === path) {
+      state.panels[0].file = null;
+      needsUpdate = true;
+    }
+    if (state.panels[1].file === path) {
+      state.panels[1].file = null;
+      needsUpdate = true;
+    }
+
+    if (needsUpdate) {
+      // If both panels are empty, close split view
+      if (!state.panels[0].file && !state.panels[1].file) {
+        closeSplitView();
+      } else {
+        updatePanelUI();
+        savePanelState();
+      }
+    }
+  }
+
   /**
    * Render the file tree
    */
@@ -168,10 +315,8 @@
       fileTreeEl.appendChild(el);
     });
 
-    // Restore selection if current path exists
-    if (currentPath) {
-      updateSelection(currentPath);
-    }
+    // Restore selection
+    updateSelection();
   }
 
   /**
@@ -185,6 +330,7 @@
     item.className = 'vimd-tree-item';
     item.setAttribute('data-path', node.path);
     item.setAttribute('data-depth', depth.toString());
+    item.setAttribute('data-type', node.type);
 
     if (node.type === 'folder') {
       // Folder node
@@ -254,6 +400,13 @@
         selectFile(node.path);
       });
 
+      // Context menu handler for file
+      item.addEventListener('contextmenu', function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        showContextMenu(e, node.path);
+      });
+
       container.appendChild(item);
     }
 
@@ -296,75 +449,133 @@
   }
 
   /**
-   * Select a file
+   * Select a file (open in active panel)
    */
   function selectFile(path) {
-    if (currentPath === path) {
-      return;
-    }
+    openFileInPanel(path, state.activePanel);
+  }
 
-    // Update selection
-    updateSelection(path);
+  /**
+   * Open file in specific panel
+   */
+  function openFileInPanel(path, panelIndex) {
+    state.panels[panelIndex].file = path;
+    state.activePanel = panelIndex;
+    requestFile(path, panelIndex);
+    updateSelection();
+    updatePanelUI();
+    savePanelState();
+    updateURL();
+  }
 
-    // Send to server
+  /**
+   * Request file content from server
+   */
+  function requestFile(path, panelIndex) {
     if (ws && ws.readyState === WebSocket.OPEN) {
-      ws.send(JSON.stringify({ type: 'selectFile', path: path }));
+      ws.send(JSON.stringify({
+        type: 'selectFile',
+        path: path,
+        panelIndex: panelIndex
+      }));
     }
-
-    // Update URL
-    updateURL('/' + encodeURIComponent(path).replace(/%2F/g, '/'));
-
-    currentPath = path;
   }
 
   /**
    * Update visual selection in tree
    */
-  function updateSelection(path) {
+  function updateSelection() {
     // Remove previous selection
     var selected = fileTreeEl.querySelectorAll('.vimd-tree-item.selected');
     selected.forEach(function(el) {
       el.classList.remove('selected');
     });
 
-    // Add new selection
-    var item = fileTreeEl.querySelector('.vimd-tree-item[data-path="' + path + '"]');
-    if (item) {
-      item.classList.add('selected');
-    }
+    // Add selection for all open files
+    state.panels.forEach(function(panel) {
+      if (panel.file) {
+        var item = fileTreeEl.querySelector('.vimd-tree-item[data-path="' + panel.file + '"]');
+        if (item) {
+          item.classList.add('selected');
+        }
+      }
+    });
   }
 
   /**
    * Show file content
    */
   function showContent(path, html) {
-    welcome.classList.add('hidden');
-    content.classList.add('visible');
-    content.innerHTML = html;
+    // Find which panel this content belongs to
+    var panelIndex = -1;
+    for (var i = 0; i < state.panels.length; i++) {
+      if (state.panels[i].file === path) {
+        panelIndex = i;
+        break;
+      }
+    }
 
-    // Update selection
-    updateSelection(path);
-    currentPath = path;
+    if (panelIndex === -1) {
+      // If not found, use active panel
+      panelIndex = state.activePanel;
+      state.panels[panelIndex].file = path;
+    }
+
+    if (panelIndex === 0) {
+      welcome.classList.add('hidden');
+      content.classList.add('visible');
+      content.innerHTML = html;
+      panel1Filename.textContent = getFileName(path);
+      panel1Header.classList.add('visible');
+    } else if (panelIndex === 1 && panel2Content) {
+      panel2Content.innerHTML = html;
+      panel2Content.classList.add('visible');
+      panel2Filename.textContent = getFileName(path);
+      panel2Header.classList.add('visible');
+    }
+
+    updatePanelUI();
 
     // Re-render MathJax if available
     if (window.MathJax && window.MathJax.typeset) {
-      window.MathJax.typeset([content]);
+      if (panelIndex === 0) {
+        window.MathJax.typeset([content]);
+      } else if (panel2Content) {
+        window.MathJax.typeset([panel2Content]);
+      }
     }
   }
 
+  /**
+   * Get file name from path
+   */
+  function getFileName(path) {
+    return path.split('/').pop();
+  }
+
   /**
    * Show welcome screen
    */
-  function showWelcome() {
-    content.classList.remove('visible');
-    content.innerHTML = '';
-    welcome.classList.remove('hidden');
+  function showWelcome(panelIndex) {
+    if (panelIndex === 0 || panelIndex === undefined) {
+      content.classList.remove('visible');
+      content.innerHTML = '';
+      welcome.classList.remove('hidden');
+      panel1Header.classList.remove('visible');
+      panel1Filename.textContent = '';
+    }
+    if (panelIndex === 1 && panel2Content) {
+      panel2Content.classList.remove('visible');
+      panel2Content.innerHTML = '';
+      panel2Header.classList.remove('visible');
+      panel2Filename.textContent = '';
+    }
   }
 
   /**
    * Show error message
    */
-  function showError(type, message) {
+  function showError(_type, message) {
     welcome.classList.add('hidden');
     content.classList.add('visible');
     content.innerHTML = '<div class="vimd-error"><h2>Error</h2><p>' + escapeHtml(message) + '</p></div>';
@@ -384,8 +595,13 @@
   /**
    * Update URL without page reload
    */
-  function updateURL(path) {
-    history.pushState({ path: path }, '', path);
+  function updateURL() {
+    var path = state.panels[state.activePanel].file;
+    if (path) {
+      history.pushState({ path: path }, '', '/' + encodeURIComponent(path).replace(/%2F/g, '/'));
+    } else {
+      history.pushState({ path: '/' }, '', '/');
+    }
   }
 
   /**
@@ -393,12 +609,14 @@
    */
   function handleInitialPath() {
     var path = decodeURIComponent(location.pathname.slice(1));
-    if (path && path !== '') {
+    if (path && path !== '' && !state.panels[0].file) {
       // Wait for tree to load then select file
       var checkTree = setInterval(function() {
         if (fileTree.length > 0) {
           clearInterval(checkTree);
-          selectFile(path);
+          if (fileExists(path)) {
+            selectFile(path);
+          }
         }
       }, 100);
 
@@ -413,86 +631,373 @@
    * Setup event listeners
    */
   function setupEventListeners() {
-    // Sidebar toggle buttons
-    toggleBtn.addEventListener('click', function() {
-      collapseSidebar();
-    });
-
-    toggleBtnCollapsed.addEventListener('click', function() {
-      expandSidebar();
-    });
-
-    // Keyboard shortcut (Ctrl+B or Cmd+B)
-    document.addEventListener('keydown', function(e) {
-      if ((e.ctrlKey || e.metaKey) && e.key === 'b') {
-        e.preventDefault();
-        if (sidebar.classList.contains('collapsed')) {
-          expandSidebar();
-        } else {
-          collapseSidebar();
-        }
-      }
-    });
-
-    // Resizer
-    resizer.addEventListener('mousedown', function(e) {
+    // Sidebar resizer
+    sidebarResizer.addEventListener('mousedown', function(e) {
       e.preventDefault();
-      isResizing = true;
-      resizer.classList.add('active');
+      isSidebarResizing = true;
+      sidebarResizer.classList.add('active');
       document.body.style.cursor = 'ew-resize';
       document.body.style.userSelect = 'none';
     });
 
     document.addEventListener('mousemove', function(e) {
-      if (!isResizing) return;
+      if (isSidebarResizing) {
+        var width = e.clientX;
+        var minWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--sidebar-min-width'), 10) || 150;
+        var maxWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--sidebar-max-width'), 10) || 500;
 
-      var width = e.clientX;
-      var minWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--sidebar-min-width'), 10) || 150;
-      var maxWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--sidebar-max-width'), 10) || 500;
+        if (width >= minWidth && width <= maxWidth) {
+          sidebar.style.width = width + 'px';
+        }
+      }
 
-      if (width >= minWidth && width <= maxWidth) {
-        sidebar.style.width = width + 'px';
+      if (isPanelResizing && panelResizer) {
+        var sidebarWidth = sidebar.offsetWidth;
+        var panelWidth = e.clientX - sidebarWidth;
+        var minPanelWidth = 100;
+        var maxPanelWidth = preview.offsetWidth - minPanelWidth - 4; // 4px for resizer
+
+        if (panelWidth >= minPanelWidth && panelWidth <= maxPanelWidth) {
+          panel1.style.width = panelWidth + 'px';
+          state.panelWidth = panelWidth;
+        }
       }
     });
 
     document.addEventListener('mouseup', function() {
-      if (isResizing) {
-        isResizing = false;
-        resizer.classList.remove('active');
+      if (isSidebarResizing) {
+        isSidebarResizing = false;
+        sidebarResizer.classList.remove('active');
         document.body.style.cursor = '';
         document.body.style.userSelect = '';
         saveSidebarWidth();
       }
+
+      if (isPanelResizing) {
+        isPanelResizing = false;
+        if (panelResizer) {
+          panelResizer.classList.remove('active');
+        }
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+        savePanelState();
+      }
+    });
+
+    // Panel 1 close button
+    panel1Close.addEventListener('click', function(e) {
+      e.stopPropagation();
+      closePanel(0);
+    });
+
+    // Panel 1 activation
+    panel1.addEventListener('click', function() {
+      setActivePanel(0);
+    });
+
+    // Context menu
+    document.addEventListener('click', function() {
+      hideContextMenu();
     });
 
     // Browser history
     window.addEventListener('popstate', function(e) {
       if (e.state && e.state.path) {
-        var path = e.state.path.slice(1); // Remove leading /
-        if (path) {
-          selectFile(path);
+        var path = e.state.path;
+        if (path === '/') {
+          closePanel(state.activePanel);
         } else {
-          showWelcome();
-          currentPath = null;
+          path = path.replace(/^\//, '');
+          if (fileExists(path)) {
+            selectFile(path);
+          }
         }
       }
     });
   }
 
   /**
-   * Collapse sidebar
+   * Set active panel
+   */
+  function setActivePanel(index) {
+    if (state.activePanel !== index) {
+      state.activePanel = index;
+      updatePanelUI();
+      savePanelState();
+      updateURL();
+    }
+  }
+
+  /**
+   * Close panel
+   */
+  function closePanel(index) {
+    if (state.isSplitView) {
+      if (index === 0) {
+        // Move panel 2 to panel 1
+        state.panels[0].file = state.panels[1].file;
+        state.panels[1].file = null;
+
+        // Move content from panel 2 to panel 1
+        if (panel2Content && state.panels[0].file) {
+          content.innerHTML = panel2Content.innerHTML;
+          content.classList.add('visible');
+          welcome.classList.add('hidden');
+          panel1Filename.textContent = getFileName(state.panels[0].file);
+          panel1Header.classList.add('visible');
+        } else {
+          showWelcome(0);
+        }
+      }
+
+      // Close split view
+      closeSplitView();
+    } else {
+      // Single panel - show welcome
+      state.panels[0].file = null;
+      showWelcome(0);
+    }
+
+    // Update sidebar selection and save state
+    updateSelection();
+    savePanelState();
+    updateURL();
+  }
+
+  /**
+   * Close split view
+   */
+  function closeSplitView() {
+    state.isSplitView = false;
+    state.panels[1].file = null;
+    state.activePanel = 0;
+
+    // Remove panel 2
+    if (panel2) {
+      panel2.remove();
+      panel2 = null;
+      panel2Header = null;
+      panel2Filename = null;
+      panel2Close = null;
+      panel2Content = null;
+    }
+
+    // Remove resizer
+    if (panelResizer) {
+      panelResizer.remove();
+      panelResizer = null;
+    }
+
+    // Reset panel 1 to single panel mode
+    panel1.classList.remove('split-panel1');
+    panel1.style.width = '';
+
+    updatePanelUI();
+    savePanelState();
+  }
+
+  /**
+   * Create panel 2 for split view
+   */
+  function createPanel2() {
+    if (panel2) return;
+
+    // Create resizer
+    panelResizer = document.createElement('div');
+    panelResizer.className = 'vimd-panel-resizer visible';
+    panelResizer.addEventListener('mousedown', function(e) {
+      e.preventDefault();
+      isPanelResizing = true;
+      panelResizer.classList.add('active');
+      document.body.style.cursor = 'ew-resize';
+      document.body.style.userSelect = 'none';
+    });
+
+    // Create panel 2
+    panel2 = document.createElement('div');
+    panel2.className = 'vimd-panel split-panel2';
+    panel2.id = 'panel2';
+
+    panel2Header = document.createElement('div');
+    panel2Header.className = 'vimd-panel-header';
+    panel2Header.id = 'panel2-header';
+
+    panel2Filename = document.createElement('span');
+    panel2Filename.className = 'vimd-panel-filename';
+    panel2Filename.id = 'panel2-filename';
+
+    panel2Close = document.createElement('button');
+    panel2Close.className = 'vimd-panel-close';
+    panel2Close.id = 'panel2-close';
+    panel2Close.title = '閉じる';
+    panel2Close.innerHTML = '&times;';
+    panel2Close.addEventListener('click', function(e) {
+      e.stopPropagation();
+      closePanel(1);
+    });
+
+    panel2Header.appendChild(panel2Filename);
+    panel2Header.appendChild(panel2Close);
+
+    var panel2Body = document.createElement('div');
+    panel2Body.className = 'vimd-panel-body';
+
+    panel2Content = document.createElement('article');
+    panel2Content.className = 'vimd-content markdown-body';
+    panel2Content.id = 'content2';
+
+    panel2Body.appendChild(panel2Content);
+    panel2.appendChild(panel2Header);
+    panel2.appendChild(panel2Body);
+
+    // Panel 2 activation
+    panel2.addEventListener('click', function() {
+      setActivePanel(1);
+    });
+
+    // Insert into DOM
+    preview.appendChild(panelResizer);
+    preview.appendChild(panel2);
+
+    // Set panel 1 to split mode
+    panel1.classList.add('split-panel1');
+    panel1.style.width = state.panelWidth + 'px';
+  }
+
+  /**
+   * Open split view
+   */
+  function openSplitView(path) {
+    if (!state.isSplitView) {
+      state.isSplitView = true;
+      state.panelWidth = 720; // Reset to default
+      createPanel2();
+    }
+
+    openFileInPanel(path, 1);
+  }
+
+  /**
+   * Show context menu
+   */
+  function showContextMenu(e, path) {
+    contextTarget = path;
+
+    // Update menu items visibility
+    var openItem = contextMenu.querySelector('[data-action="open"]');
+    var openSplitItem = contextMenu.querySelector('[data-action="open-split"]');
+    var openPanel1Item = contextMenu.querySelector('[data-action="open-panel1"]');
+    var openPanel2Item = contextMenu.querySelector('[data-action="open-panel2"]');
+
+    if (state.isSplitView) {
+      // 2 panels mode
+      openItem.classList.add('hidden');
+      openSplitItem.classList.add('hidden');
+      openPanel1Item.classList.remove('hidden');
+      openPanel2Item.classList.remove('hidden');
+    } else if (state.panels[0].file) {
+      // 1 panel with file
+      openItem.classList.remove('hidden');
+      openSplitItem.classList.remove('hidden');
+      openPanel1Item.classList.add('hidden');
+      openPanel2Item.classList.add('hidden');
+    } else {
+      // Welcome screen
+      openItem.classList.remove('hidden');
+      openSplitItem.classList.add('hidden');
+      openPanel1Item.classList.add('hidden');
+      openPanel2Item.classList.add('hidden');
+    }
+
+    // Position menu
+    contextMenu.style.left = e.clientX + 'px';
+    contextMenu.style.top = e.clientY + 'px';
+    contextMenu.classList.add('visible');
+
+    // Adjust position if off-screen
+    var rect = contextMenu.getBoundingClientRect();
+    if (rect.right > window.innerWidth) {
+      contextMenu.style.left = (window.innerWidth - rect.width - 5) + 'px';
+    }
+    if (rect.bottom > window.innerHeight) {
+      contextMenu.style.top = (window.innerHeight - rect.height - 5) + 'px';
+    }
+  }
+
+  /**
+   * Hide context menu
    */
-  function collapseSidebar() {
-    sidebar.classList.add('collapsed');
-    toggleBar.classList.add('visible');
+  function hideContextMenu() {
+    contextMenu.classList.remove('visible');
+    contextTarget = null;
   }
 
   /**
-   * Expand sidebar
+   * Handle context menu action
    */
-  function expandSidebar() {
-    sidebar.classList.remove('collapsed');
-    toggleBar.classList.remove('visible');
+  function handleContextAction(action) {
+    if (!contextTarget) return;
+
+    switch (action) {
+      case 'open':
+        selectFile(contextTarget);
+        break;
+      case 'open-split':
+        openSplitView(contextTarget);
+        break;
+      case 'open-panel1':
+        openFileInPanel(contextTarget, 0);
+        break;
+      case 'open-panel2':
+        openFileInPanel(contextTarget, 1);
+        break;
+    }
+
+    hideContextMenu();
+  }
+
+  // Setup context menu item click handlers
+  contextMenu.addEventListener('click', function(e) {
+    var item = e.target.closest('.vimd-context-item');
+    if (item) {
+      var action = item.getAttribute('data-action');
+      handleContextAction(action);
+    }
+  });
+
+  /**
+   * Update panel UI based on state
+   */
+  function updatePanelUI() {
+    // Update active panel indicator
+    panel1Header.classList.remove('active');
+    if (panel2Header) {
+      panel2Header.classList.remove('active');
+    }
+
+    if (state.isSplitView) {
+      if (state.activePanel === 0) {
+        panel1Header.classList.add('active');
+      } else if (panel2Header) {
+        panel2Header.classList.add('active');
+      }
+    }
+
+    // Update panel 1 header visibility
+    if (state.panels[0].file) {
+      panel1Header.classList.add('visible');
+    } else {
+      panel1Header.classList.remove('visible');
+    }
+
+    // Update panel 2 header visibility
+    if (panel2Header) {
+      if (state.panels[1].file) {
+        panel2Header.classList.add('visible');
+      } else {
+        panel2Header.classList.remove('visible');
+      }
+    }
   }
 
   /**

package/dist/templates/folder-mode.html

@@ -5,12 +5,12 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="generator" content="vimd">
   <title>vimd - {{folder_name}}</title>
-  <style>
-{{folder_mode_css}}
-  </style>
   <style id="theme-styles">
 {{theme_css}}
   </style>
+  <style>
+{{folder_mode_css}}
+  </style>
 {{#if math_enabled}}
   <style>
   /* Block math centering */
@@ -40,24 +40,10 @@
 </head>
 <body>
   <div class="vimd-container">
-    <!-- Sidebar toggle bar (visible when sidebar is collapsed) -->
-    <div class="vimd-sidebar-toggle-bar" id="toggle-bar">
-      <button class="vimd-toggle-btn" id="toggle-btn-collapsed" title="Open Sidebar (Ctrl+B)">
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-          <path d="M6 2L10 8L6 14" stroke="currentColor" stroke-width="1.5" fill="none"/>
-        </svg>
-      </button>
-    </div>
-
     <!-- Sidebar -->
     <aside class="vimd-sidebar" id="sidebar">
       <div class="vimd-sidebar-header">
         <span class="vimd-folder-name">エクスプローラー</span>
-        <button class="vimd-toggle-btn" id="toggle-btn" title="Close Sidebar (Ctrl+B)">
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-            <path d="M10 2L6 8L10 14" stroke="currentColor" stroke-width="1.5" fill="none"/>
-          </svg>
-        </button>
       </div>
       <div class="vimd-tree" id="file-tree">
         <!-- File tree will be rendered by JavaScript -->
@@ -67,18 +53,35 @@
 
     <!-- Preview -->
     <main class="vimd-preview" id="preview">
-      <div class="vimd-welcome" id="welcome">
-        <div class="vimd-welcome-content">
-          <h1>vimd</h1>
-          <p id="welcome-message">Select a file from the sidebar</p>
+      <!-- Panel 1 -->
+      <div class="vimd-panel" id="panel1">
+        <div class="vimd-panel-header" id="panel1-header">
+          <span class="vimd-panel-filename" id="panel1-filename"></span>
+          <button class="vimd-panel-close" id="panel1-close" title="閉じる">&times;</button>
+        </div>
+        <div class="vimd-panel-body">
+          <div class="vimd-welcome" id="welcome">
+            <div class="vimd-welcome-content">
+              <h1>vimd</h1>
+              <p id="welcome-message">Select a file from the sidebar</p>
+            </div>
+          </div>
+          <article class="vimd-content markdown-body" id="content">
+            <!-- File content will be rendered here -->
+          </article>
         </div>
       </div>
-      <article class="vimd-content markdown-body" id="content">
-        <!-- File content will be rendered here -->
-      </article>
     </main>
   </div>
 
+  <!-- Context Menu -->
+  <div class="vimd-context-menu" id="context-menu">
+    <div class="vimd-context-item" data-action="open">開く</div>
+    <div class="vimd-context-item" data-action="open-split">分割画面で開く</div>
+    <div class="vimd-context-item" data-action="open-panel1">パネル1で開く</div>
+    <div class="vimd-context-item" data-action="open-panel2">パネル2で開く</div>
+  </div>
+
   <script>
 {{folder_mode_js}}
   </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vimd",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "Real-time Markdown preview tool with pandoc (view markdown)",
   "type": "module",
   "keywords": [

package/templates/folder-mode.html

@@ -5,12 +5,12 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="generator" content="vimd">
   <title>vimd - {{folder_name}}</title>
-  <style>
-{{folder_mode_css}}
-  </style>
   <style id="theme-styles">
 {{theme_css}}
   </style>
+  <style>
+{{folder_mode_css}}
+  </style>
 {{#if math_enabled}}
   <style>
   /* Block math centering */
@@ -40,24 +40,10 @@
 </head>
 <body>
   <div class="vimd-container">
-    <!-- Sidebar toggle bar (visible when sidebar is collapsed) -->
-    <div class="vimd-sidebar-toggle-bar" id="toggle-bar">
-      <button class="vimd-toggle-btn" id="toggle-btn-collapsed" title="Open Sidebar (Ctrl+B)">
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-          <path d="M6 2L10 8L6 14" stroke="currentColor" stroke-width="1.5" fill="none"/>
-        </svg>
-      </button>
-    </div>
-
     <!-- Sidebar -->
     <aside class="vimd-sidebar" id="sidebar">
       <div class="vimd-sidebar-header">
         <span class="vimd-folder-name">エクスプローラー</span>
-        <button class="vimd-toggle-btn" id="toggle-btn" title="Close Sidebar (Ctrl+B)">
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-            <path d="M10 2L6 8L10 14" stroke="currentColor" stroke-width="1.5" fill="none"/>
-          </svg>
-        </button>
       </div>
       <div class="vimd-tree" id="file-tree">
         <!-- File tree will be rendered by JavaScript -->
@@ -67,18 +53,35 @@
 
     <!-- Preview -->
     <main class="vimd-preview" id="preview">
-      <div class="vimd-welcome" id="welcome">
-        <div class="vimd-welcome-content">
-          <h1>vimd</h1>
-          <p id="welcome-message">Select a file from the sidebar</p>
+      <!-- Panel 1 -->
+      <div class="vimd-panel" id="panel1">
+        <div class="vimd-panel-header" id="panel1-header">
+          <span class="vimd-panel-filename" id="panel1-filename"></span>
+          <button class="vimd-panel-close" id="panel1-close" title="閉じる">&times;</button>
+        </div>
+        <div class="vimd-panel-body">
+          <div class="vimd-welcome" id="welcome">
+            <div class="vimd-welcome-content">
+              <h1>vimd</h1>
+              <p id="welcome-message">Select a file from the sidebar</p>
+            </div>
+          </div>
+          <article class="vimd-content markdown-body" id="content">
+            <!-- File content will be rendered here -->
+          </article>
         </div>
       </div>
-      <article class="vimd-content markdown-body" id="content">
-        <!-- File content will be rendered here -->
-      </article>
     </main>
   </div>
 
+  <!-- Context Menu -->
+  <div class="vimd-context-menu" id="context-menu">
+    <div class="vimd-context-item" data-action="open">開く</div>
+    <div class="vimd-context-item" data-action="open-split">分割画面で開く</div>
+    <div class="vimd-context-item" data-action="open-panel1">パネル1で開く</div>
+    <div class="vimd-context-item" data-action="open-panel2">パネル2で開く</div>
+  </div>
+
   <script>
 {{folder_mode_js}}
   </script>