vimd 0.4.1 → 0.5.0

package/README.md

@@ -65,10 +65,10 @@
 ### インストール
 
 ```bash
-npm install -g vimd@0.3.11
+npm install -g vimd
 ```
 
-**現在の安定版: v0.2.4**
+**現在のバージョン: v0.5.0**
 
 v0.2.0 からは **pandoc なしで利用可能** になりました。
 高品質な出力が必要な場合のみ pandoc をインストールしてください。
@@ -103,21 +103,12 @@ vimd config
 
 ## バージョン情報
 
-**安定版: v0.2.4**
+**現在のバージョン: v0.5.0**
 
-v0.3.x は内部アーキテクチャを刷新した実験的バージョンです。
-安定した動作を求める場合は v0.2.4 をご利用ください。
-
-安定版のインストール:
-
-```bash
-npm install -g vimd@0.2.4
-```
-
-最新版（実験的）のインストール:
+v0.5.x はフォルダモード（複数ファイルプレビュー）を追加したバージョンです。
 
 ```bash
-npm install -g vimd@latest
+npm install -g vimd
 ```
 
 ---
@@ -127,6 +118,7 @@ npm install -g vimd@latest
 | コマンド            | 説明                           |
 | ------------------- | ------------------------------ |
 | `vimd dev <file>`   | ライブプレビューサーバーを起動 |
+| `vimd dev <folder>` | フォルダモードを起動           |
 | `vimd build <file>` | 静的HTMLを生成                 |
 | `vimd theme`        | テーマを対話的に変更           |
 | `vimd config`       | 設定を対話的に編集             |
@@ -238,6 +230,30 @@ LaTeX ファイルは自動的に検出され、pandoc を使用して変換さ
 
 **注意**: LaTeX プレビューには pandoc が必須です。pandoc がインストールされていない場合、インストールガイドが表示されます。
 
+### フォルダモード
+
+vimd はフォルダ内の複数ファイルを同一ポートで切り替えながらプレビューできます（v0.5.0以降）。
+
+```bash
+# カレントディレクトリをプレビュー
+vimd dev .
+
+# 指定フォルダをプレビュー
+vimd dev ./docs
+```
+
+VSCode風のサイドバーでファイルを選択し、リアルタイムでプレビューを確認できます。
+
+**対応する拡張子**:
+- `.md` (Markdown)
+- `.tex`, `.latex` (LaTeX)
+
+**機能**:
+- ツリー形式のファイル表示（フォルダ展開/折りたたみ可能）
+- サイドバーのリサイズ（ドラッグで幅変更）
+- キーボードショートカット（Ctrl+B でサイドバー表示/非表示）
+- ファイル変更時の自動リロード
+
 ---
 
 ## Why vimd?
@@ -277,3 +293,7 @@ LaTeX ファイルは自動的に検出され、pandoc を使用して変換さ
 ## ライセンス
 
 MIT © notokeishou
+
+### サードパーティライセンス
+
+フォルダモードのアイコンは [vscode-icons](https://github.com/vscode-icons/vscode-icons) を使用しています（CC BY-SA 4.0）。

package/dist/cli/commands/dev.d.ts

@@ -4,6 +4,6 @@ interface DevOptions {
     open?: boolean;
     pandoc?: boolean;
 }
-export declare function devCommand(filePath: string, options: DevOptions): Promise<void>;
+export declare function devCommand(targetPath: string, options: DevOptions): Promise<void>;
 export {};
 //# sourceMappingURL=dev.d.ts.map

package/dist/cli/commands/dev.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dev.d.ts","sourceRoot":"","sources":["../../../src/cli/commands/dev.ts"],"names":[],"mappings":"AAuBA,UAAU,UAAU;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAsB,UAAU,CAC9B,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,UAAU,GAClB,OAAO,CAAC,IAAI,CAAC,CAgLf"}
+{"version":3,"file":"dev.d.ts","sourceRoot":"","sources":["../../../src/cli/commands/dev.ts"],"names":[],"mappings":"AAwBA,UAAU,UAAU;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAsB,UAAU,CAC9B,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,UAAU,GAClB,OAAO,CAAC,IAAI,CAAC,CA2Lf"}

package/dist/cli/commands/dev.js

@@ -3,6 +3,7 @@ import { ConfigLoader } from '../../config/loader.js';
 import { FileWatcher } from '../../core/watcher.js';
 import { MarkdownConverter } from '../../core/converter.js';
 import { WebSocketServer } from '../../core/websocket-server.js';
+import { FolderModeServer } from '../../core/folder-mode/index.js';
 import { PandocDetector } from '../../core/pandoc-detector.js';
 import { ParserFactory } from '../../core/parser/index.js';
 import { Logger } from '../../utils/logger.js';
@@ -18,7 +19,7 @@ function isLatexFile(filePath) {
     const ext = path.extname(filePath).toLowerCase();
     return ext === '.tex' || ext === '.latex';
 }
-export async function devCommand(filePath, options) {
+export async function devCommand(targetPath, options) {
     try {
         Logger.info('Starting vimd dev...');
         // 1. Load configuration
@@ -56,13 +57,21 @@ export async function devCommand(filePath, options) {
         }
         Logger.info(`Theme: ${config.theme}`);
         Logger.info(`Port: ${port}`);
-        // 5. Check file exists first (needed for extension detection)
-        const absolutePath = path.resolve(filePath);
+        // 5. Check target exists and determine mode
+        const absolutePath = path.resolve(targetPath);
         if (!(await fs.pathExists(absolutePath))) {
-            Logger.error(`File not found: ${filePath}`);
+            Logger.error(`Path not found: ${targetPath}`);
             process.exit(1);
         }
-        // 6. Detect file type and determine parser/format
+        const stat = await fs.stat(absolutePath);
+        // 6. Branch: Folder mode or Single file mode
+        if (stat.isDirectory()) {
+            await startFolderMode(absolutePath, port, config, options);
+            return;
+        }
+        // Continue with single file mode
+        const filePath = targetPath;
+        // 7. Detect file type and determine parser/format
         const isLatex = isLatexFile(filePath);
         const fromFormat = isLatex ? 'latex' : 'markdown';
         // 7. Determine parser type (LaTeX requires pandoc)
@@ -172,3 +181,46 @@ export async function devCommand(filePath, options) {
         process.exit(1);
     }
 }
+/**
+ * Start folder mode server
+ */
+async function startFolderMode(folderPath, port, config, _options) {
+    Logger.info('Mode: Folder');
+    Logger.info(`Folder: ${folderPath}`);
+    // Create folder mode server
+    const server = new FolderModeServer({
+        rootPath: folderPath,
+        port: port,
+        theme: config.theme,
+        open: config.open,
+    });
+    const startResult = await server.start();
+    const actualPort = startResult.actualPort;
+    // Open browser if configured
+    if (config.open) {
+        const url = `http://localhost:${actualPort}/`;
+        try {
+            await open(url);
+            Logger.info('Browser opened');
+        }
+        catch {
+            Logger.warn('Failed to open browser automatically');
+        }
+    }
+    // Save session
+    await SessionManager.saveSession({
+        pid: process.pid,
+        port: actualPort,
+        htmlPath: '', // No HTML file in folder mode
+        sourcePath: folderPath,
+        startedAt: new Date().toISOString(),
+    });
+    Logger.info('Press Ctrl+C to stop');
+    // Register cleanup
+    ProcessManager.onExit(async () => {
+        Logger.info('Shutting down...');
+        await server.stop();
+        await SessionManager.removeSession(actualPort);
+        Logger.info('Cleanup complete');
+    });
+}

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

@@ -0,0 +1,308 @@
+/**
+ * Folder mode styles - VSCode-style dark sidebar
+ */
+
+:root {
+  --sidebar-bg: #252526;
+  --sidebar-text: #cccccc;
+  --sidebar-text-muted: #858585;
+  --sidebar-hover: #2a2d2e;
+  --sidebar-selected: #094771;
+  --sidebar-border: #3c3c3c;
+  --sidebar-header-bg: #3c3c3c;
+  --sidebar-width: 250px;
+  --sidebar-min-width: 150px;
+  --sidebar-max-width: 500px;
+  --toggle-bar-width: 20px;
+  --resizer-width: 4px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* Container */
+.vimd-container {
+  display: flex;
+  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);
+  min-width: var(--sidebar-min-width);
+  max-width: var(--sidebar-max-width);
+  background: var(--sidebar-bg);
+  color: var(--sidebar-text);
+  display: flex;
+  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 */
+.vimd-sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: var(--sidebar-header-bg);
+  border-bottom: 1px solid var(--sidebar-border);
+  min-height: 35px;
+}
+
+.vimd-folder-name {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--sidebar-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  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;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 4px 0;
+}
+
+.vimd-tree::-webkit-scrollbar {
+  width: 10px;
+}
+
+.vimd-tree::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.vimd-tree::-webkit-scrollbar-thumb {
+  background: rgba(121, 121, 121, 0.4);
+  border-radius: 5px;
+}
+
+.vimd-tree::-webkit-scrollbar-thumb:hover {
+  background: rgba(121, 121, 121, 0.7);
+}
+
+/* Tree item (file or folder) */
+.vimd-tree-item {
+  display: flex;
+  align-items: center;
+  padding: 3px 8px;
+  cursor: pointer;
+  user-select: none;
+  font-size: 13px;
+  line-height: 22px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.vimd-tree-item:hover {
+  background: var(--sidebar-hover);
+}
+
+.vimd-tree-item.selected {
+  background: var(--sidebar-selected);
+}
+
+.vimd-tree-item.selected:hover {
+  background: var(--sidebar-selected);
+}
+
+/* Tree item icon */
+.vimd-tree-icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 6px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vimd-tree-icon img {
+  width: 16px;
+  height: 16px;
+}
+
+/* Folder chevron */
+.vimd-tree-chevron {
+  width: 16px;
+  height: 16px;
+  margin-right: 2px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--sidebar-text-muted);
+  transition: transform 0.1s;
+}
+
+.vimd-tree-chevron.collapsed {
+  transform: rotate(-90deg);
+}
+
+/* Tree children (nested items) */
+.vimd-tree-children {
+  display: block;
+}
+
+.vimd-tree-children.collapsed {
+  display: none;
+}
+
+/* Indentation */
+.vimd-tree-item[data-depth="0"] { padding-left: 8px; }
+.vimd-tree-item[data-depth="1"] { padding-left: 24px; }
+.vimd-tree-item[data-depth="2"] { padding-left: 40px; }
+.vimd-tree-item[data-depth="3"] { padding-left: 56px; }
+.vimd-tree-item[data-depth="4"] { padding-left: 72px; }
+.vimd-tree-item[data-depth="5"] { padding-left: 88px; }
+
+/* Resizer */
+.vimd-resizer {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: var(--resizer-width);
+  cursor: ew-resize;
+  background: transparent;
+  z-index: 10;
+}
+
+.vimd-resizer:hover,
+.vimd-resizer.active {
+  background: #007acc;
+}
+
+/* Preview area */
+.vimd-preview {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: #ffffff;
+}
+
+/* Welcome screen */
+.vimd-welcome {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  text-align: center;
+}
+
+.vimd-welcome.hidden {
+  display: none;
+}
+
+.vimd-welcome-content h1 {
+  font-size: 48px;
+  font-weight: 300;
+  color: #999;
+  margin: 0 0 16px 0;
+}
+
+.vimd-welcome-content p {
+  font-size: 16px;
+  color: #666;
+  margin: 0;
+}
+
+/* Content area */
+.vimd-content {
+  display: none;
+  padding: 32px;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.vimd-content.visible {
+  display: block;
+}
+
+/* Loading state */
+.vimd-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #666;
+  font-size: 14px;
+}
+
+/* Error state */
+.vimd-error {
+  padding: 32px;
+  color: #d32f2f;
+}
+
+.vimd-error h2 {
+  margin: 0 0 8px 0;
+  font-size: 18px;
+}
+
+.vimd-error p {
+  margin: 0;
+  font-size: 14px;
+}