@ecmaos/coreutils 0.3.1 → 0.4.2

package/dist/commands/view.js

@@ -1,36 +1,40 @@
 import path from 'path';
 import chalk from 'chalk';
+import { marked } from 'marked';
+import '@alenaksu/json-viewer';
 import { TerminalCommand } from '../shared/terminal-command.js';
 import { writelnStderr, writelnStdout } from '../shared/helpers.js';
 function detectFileType(filePath) {
     const ext = path.extname(filePath).toLowerCase();
     // PDF
-    if (ext === '.pdf') {
+    if (ext === '.pdf')
         return 'pdf';
-    }
+    // Markdown
+    const markdownExts = ['.md', '.markdown', '.mdown', '.mkd', '.mkdn'];
+    if (markdownExts.includes(ext))
+        return 'markdown';
+    // JSON
+    const jsonExts = ['.json', '.jsonl', '.jsonc', '.jsonld'];
+    if (jsonExts.includes(ext))
+        return 'json';
     // Images
     const imageExts = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg', '.ico', '.tiff', '.tif'];
-    if (imageExts.includes(ext)) {
+    if (imageExts.includes(ext))
         return 'image';
-    }
     // Audio
     const audioExts = ['.mp3', '.wav', '.ogg', '.oga', '.opus', '.m4a', '.aac', '.flac', '.webm', '.wma', '.aiff', '.aif', '.3gp', '.amr'];
-    if (audioExts.includes(ext)) {
+    if (audioExts.includes(ext))
         return 'audio';
-    }
     // Video
     const videoExts = ['.mp4', '.webm', '.ogg', '.ogv', '.mov', '.avi', '.mkv', '.m4v', '.flv', '.wmv', '.3gp'];
-    if (videoExts.includes(ext)) {
+    if (videoExts.includes(ext))
         return 'video';
-    }
-    // Default to image for unknown types (might be an image without extension)
-    return 'image';
+    return 'application/octet-stream';
 }
 function getMimeType(filePath, fileType) {
     const ext = path.extname(filePath).toLowerCase();
-    if (fileType === 'pdf') {
+    if (fileType === 'pdf')
         return 'application/pdf';
-    }
     if (fileType === 'image') {
         const mimeTypes = {
             '.jpg': 'image/jpeg',
@@ -81,11 +85,13 @@ function getMimeType(filePath, fileType) {
         };
         return mimeTypes[ext] || 'video/mp4';
     }
+    if (fileType === 'json')
+        return 'application/json';
     return 'application/octet-stream';
 }
 function printUsage(process, terminal) {
     const usage = `Usage: view [OPTIONS] [FILE...]
-View files in a new window. Supports PDF, images, audio, and video files.
+View files in a new window. Supports PDF, markdown, JSON, images, audio, and video files.
 
   --help                   display this help and exit
   
@@ -102,13 +108,15 @@ Audio/Video Options (for audio and video files):
 
 Examples:
   view document.pdf                    view a PDF file
+  view README.md                       view a markdown file
+  view data.json                       view a JSON file
   view image.png                       view an image
   view song.mp3                        view/play an audio file
   view movie.mp4                       view/play a video file
-  view --loop music.mp3               play audio in a loop
-  view --no-autoplay video.mp4        load video without auto-playing
-  view --volume 50 track.mp3         play at 50% volume
-  view --fullscreen movie.mp4         play video in fullscreen mode`;
+  view --loop music.mp3                play audio in a loop
+  view --no-autoplay video.mp4         load video without auto-playing
+  view --volume 50 track.mp3           play at 50% volume
+  view --fullscreen movie.mp4          play video in fullscreen mode`;
     writelnStderr(process, terminal, usage);
 }
 async function loadAudioMetadata(audioElement) {
@@ -158,6 +166,10 @@ function formatDuration(seconds) {
     }
     return `${minutes}:${secs.toString().padStart(2, '0')}`;
 }
+function generateRandomClass(prefix) {
+    const randomSuffix = Math.random().toString(36).substring(2, 8);
+    return `${prefix}-${randomSuffix}`;
+}
 export function createCommand(kernel, shell, terminal) {
     return new TerminalCommand({
         command: 'view',
@@ -272,7 +284,278 @@ export function createCommand(kernel, shell, terminal) {
                     const windowTitle = files.length > 1
                         ? `${path.basename(file)} (${files.indexOf(file) + 1}/${files.length})`
                         : path.basename(file);
-                    if (fileType === 'pdf') {
+                    if (fileType === 'markdown') {
+                        // Read and parse markdown file
+                        const markdownText = new TextDecoder().decode(fileData);
+                        const htmlContent = await marked.parse(markdownText);
+                        const containerClass = generateRandomClass('markdown-container');
+                        const container = document.createElement('div');
+                        container.className = containerClass;
+                        container.style.width = '100%';
+                        container.style.height = '100%';
+                        container.style.display = 'flex';
+                        container.style.flexDirection = 'column';
+                        container.style.background = '#1e1e1e';
+                        container.style.overflow = 'auto';
+                        container.style.padding = '40px';
+                        container.style.boxSizing = 'border-box';
+                        container.style.fontFamily = "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif";
+                        container.style.color = '#e0e0e0';
+                        container.style.lineHeight = '1.6';
+                        const contentWrapper = document.createElement('div');
+                        contentWrapper.style.maxWidth = '800px';
+                        contentWrapper.style.margin = '0 auto';
+                        contentWrapper.style.width = '100%';
+                        contentWrapper.innerHTML = htmlContent;
+                        const style = document.createElement('style');
+                        style.textContent = `
+              .${containerClass} h1, .${containerClass} h2, .${containerClass} h3, .${containerClass} h4, .${containerClass} h5, .${containerClass} h6 { color: #fff; margin-top: 1.5em; margin-bottom: 0.5em; }
+              .${containerClass} h1 { font-size: 2em; border-bottom: 1px solid #444; padding-bottom: 0.3em; }
+              .${containerClass} h2 { font-size: 1.5em; border-bottom: 1px solid #444; padding-bottom: 0.3em; }
+              .${containerClass} h3 { font-size: 1.25em; }
+              .${containerClass} code { background-color: #2d2d2d; padding: 2px 6px; border-radius: 3px; font-family: 'Courier New', monospace; color: #f8f8f2; }
+              .${containerClass} pre { background-color: #2d2d2d; padding: 16px; border-radius: 6px; overflow-x: auto; }
+              .${containerClass} pre code { background-color: transparent; padding: 0; }
+              .${containerClass} a { color: #4a9eff; text-decoration: none; }
+              .${containerClass} a:hover { text-decoration: underline; }
+              .${containerClass} blockquote { border-left: 4px solid #4a9eff; padding-left: 16px; margin-left: 0; color: #b0b0b0; }
+              .${containerClass} table { border-collapse: collapse; width: 100%; margin: 1em 0; }
+              .${containerClass} th, .${containerClass} td { border: 1px solid #444; padding: 8px 12px; text-align: left; }
+              .${containerClass} th { background-color: #2d2d2d; font-weight: bold; }
+              .${containerClass} tr:nth-child(even) { background-color: #252525; }
+              .${containerClass} img { max-width: 100%; height: auto; }
+              .${containerClass} ul, .${containerClass} ol { padding-left: 2em; }
+              .${containerClass} hr { border: none; border-top: 1px solid #444; margin: 2em 0; }
+            `;
+                        container.appendChild(style);
+                        container.appendChild(contentWrapper);
+                        const win = kernel.windows.create({
+                            title: windowTitle,
+                            width: 900,
+                            height: 700,
+                            max: false
+                        });
+                        win.mount(container);
+                        await writelnStdout(process, terminal, chalk.green(`Viewing: ${file}`));
+                    }
+                    else if (fileType === 'json') {
+                        // Read and parse JSON file
+                        const jsonText = new TextDecoder().decode(fileData);
+                        let jsonData;
+                        try {
+                            jsonData = JSON.parse(jsonText);
+                        }
+                        catch (error) {
+                            await writelnStderr(process, terminal, chalk.red(`view: invalid JSON in ${file}: ${error instanceof Error ? error.message : 'Unknown error'}`));
+                            continue;
+                        }
+                        const containerClass = generateRandomClass('json-container');
+                        const container = document.createElement('div');
+                        container.className = containerClass;
+                        container.style.width = '100%';
+                        container.style.height = '100%';
+                        container.style.display = 'flex';
+                        container.style.flexDirection = 'column';
+                        container.style.background = '#2a2f3a';
+                        container.style.overflow = 'hidden';
+                        const buttonBar = document.createElement('div');
+                        buttonBar.style.cssText = `
+              display: flex;
+              flex-wrap: wrap;
+              gap: 6px;
+              padding: 6px;
+              background: #2a2f3a;
+              border-bottom: 1px solid #3c3c3c;
+              align-items: center;
+            `;
+                        const createInput = (placeholder) => {
+                            const input = document.createElement('input');
+                            input.type = 'text';
+                            input.placeholder = placeholder;
+                            input.style.cssText = `
+                background: #263040;
+                border: 1px solid #3c3c3c;
+                border-radius: 3px;
+                color: #fff;
+                padding: 0 8px;
+                font-size: 11px;
+                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+                width: 120px;
+                height: 22px;
+                box-sizing: border-box;
+                line-height: 22px;
+                margin: 0;
+                vertical-align: middle;
+              `;
+                            return input;
+                        };
+                        const createButton = (text) => {
+                            const button = document.createElement('button');
+                            button.textContent = text;
+                            button.style.cssText = `
+                background: #263040;
+                border: 1px solid #263040;
+                border-radius: 3px;
+                color: #fff;
+                cursor: pointer;
+                font-size: 11px;
+                font-weight: 600;
+                padding: 0;
+                height: 22px;
+                box-sizing: border-box;
+                line-height: 22px;
+                white-space: nowrap;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding-left: 8px;
+                padding-right: 8px;
+                margin: 0;
+                vertical-align: middle;
+              `;
+                            button.onmouseenter = () => {
+                                button.style.background = '#333';
+                                button.style.borderColor = '#333';
+                            };
+                            button.onmouseleave = () => {
+                                button.style.background = '#263040';
+                                button.style.borderColor = '#263040';
+                            };
+                            button.onmousedown = () => {
+                                button.style.background = '#263040';
+                            };
+                            button.onmouseup = () => {
+                                button.style.background = '#333';
+                            };
+                            return button;
+                        };
+                        const createSection = (label) => {
+                            const section = document.createElement('div');
+                            section.style.cssText = `
+                display: flex;
+                align-items: center;
+                gap: 4px;
+                height: 22px;
+              `;
+                            const labelEl = document.createElement('span');
+                            labelEl.textContent = label;
+                            labelEl.style.cssText = `
+                color: #f8f8f2;
+                font-size: 11px;
+                font-weight: 600;
+                width: 50px;
+                flex-shrink: 0;
+                line-height: 22px;
+                display: flex;
+                align-items: center;
+                height: 22px;
+              `;
+                            section.appendChild(labelEl);
+                            return section;
+                        };
+                        const filterSection = createSection('Filter:');
+                        const filterInput = createInput('Regex or path');
+                        filterSection.appendChild(filterInput);
+                        const expandSection = createSection('Expand:');
+                        const expandInput = createInput('Regex or path');
+                        const expandButton = createButton('Expand');
+                        const expandAllButton = createButton('Expand All');
+                        expandSection.appendChild(expandInput);
+                        expandSection.appendChild(expandButton);
+                        expandSection.appendChild(expandAllButton);
+                        const collapseSection = createSection('Collapse:');
+                        const collapseInput = createInput('Regex or path');
+                        const collapseButton = createButton('Collapse');
+                        const collapseAllButton = createButton('Collapse All');
+                        collapseSection.appendChild(collapseInput);
+                        collapseSection.appendChild(collapseButton);
+                        collapseSection.appendChild(collapseAllButton);
+                        buttonBar.appendChild(filterSection);
+                        buttonBar.appendChild(expandSection);
+                        buttonBar.appendChild(collapseSection);
+                        const jsonViewer = document.createElement('json-viewer');
+                        jsonViewer.style.width = '100%';
+                        jsonViewer.style.flex = '1';
+                        jsonViewer.style.padding = '0.5rem';
+                        jsonViewer.style.overflow = 'auto';
+                        jsonViewer.data = jsonData;
+                        jsonViewer.style.setProperty('--background-color', '#2a2f3a');
+                        jsonViewer.style.setProperty('--color', '#f8f8f2');
+                        jsonViewer.style.setProperty('--font-family', "'Courier New', monospace");
+                        jsonViewer.style.setProperty('--string-color', '#a3eea0');
+                        jsonViewer.style.setProperty('--number-color', '#d19a66');
+                        jsonViewer.style.setProperty('--boolean-color', '#4ba7ef');
+                        jsonViewer.style.setProperty('--null-color', '#df9cf3');
+                        jsonViewer.style.setProperty('--property-color', '#6fb3d2');
+                        jsonViewer.style.setProperty('--preview-color', '#deae8f');
+                        jsonViewer.style.setProperty('--highlight-color', '#c92a2a');
+                        filterInput.addEventListener('input', () => {
+                            const value = filterInput.value.trim();
+                            if (value) {
+                                try {
+                                    const regex = new RegExp(value);
+                                    jsonViewer.filter(regex);
+                                }
+                                catch {
+                                    jsonViewer.filter(value);
+                                }
+                            }
+                            else {
+                                jsonViewer.resetFilter();
+                            }
+                        });
+                        expandButton.onclick = () => {
+                            const value = expandInput.value.trim();
+                            if (value) {
+                                try {
+                                    const regex = new RegExp(value);
+                                    jsonViewer.expand(regex);
+                                }
+                                catch {
+                                    jsonViewer.expand(value);
+                                }
+                            }
+                        };
+                        expandAllButton.onclick = () => {
+                            jsonViewer.expandAll();
+                        };
+                        collapseButton.onclick = () => {
+                            const value = collapseInput.value.trim();
+                            if (value) {
+                                try {
+                                    const regex = new RegExp(value);
+                                    jsonViewer.collapse(regex);
+                                }
+                                catch {
+                                    jsonViewer.collapse(value);
+                                }
+                            }
+                        };
+                        collapseAllButton.onclick = () => {
+                            jsonViewer.collapseAll();
+                        };
+                        const handleEnterKey = (input, button) => {
+                            input.addEventListener('keydown', (e) => {
+                                if (e.key === 'Enter') {
+                                    button.click();
+                                }
+                            });
+                        };
+                        handleEnterKey(expandInput, expandButton);
+                        handleEnterKey(collapseInput, collapseButton);
+                        container.appendChild(buttonBar);
+                        container.appendChild(jsonViewer);
+                        // Create window
+                        const win = kernel.windows.create({
+                            title: windowTitle,
+                            width: 900,
+                            height: 700,
+                            max: false
+                        });
+                        win.mount(container);
+                        await writelnStdout(process, terminal, chalk.green(`Viewing: ${file}`));
+                    }
+                    else if (fileType === 'pdf') {
                         // Convert PDF to base64 and display in object tag
                         // Use chunked encoding to avoid argument limit issues with large files
                         const uint8Array = new Uint8Array(fileData);
@@ -284,41 +567,73 @@ export function createCommand(kernel, shell, terminal) {
                         }
                         const base64Data = btoa(binaryString);
                         const dataUrl = `data:application/pdf;base64,${base64Data}`;
-                        const pdfHtml = `
-              <div style="width:100%;height:100%;display:flex;flex-direction:column;background:#1e1e1e;overflow:hidden;">
-                <object data="${dataUrl}" type="application/pdf" style="width:100%;height:100%;flex:1;">
-                  <p style="color:#fff;padding:20px;text-align:center;">
-                    Your browser does not support PDFs. 
-                    <a href="${dataUrl}" style="color:#4a9eff;" download="${path.basename(file)}">Download PDF</a>
-                  </p>
-                </object>
-              </div>
-            `;
-                        kernel.windows.create({
+                        const containerClass = generateRandomClass('pdf-container');
+                        const container = document.createElement('div');
+                        container.className = containerClass;
+                        container.style.width = '100%';
+                        container.style.height = '100%';
+                        container.style.display = 'flex';
+                        container.style.flexDirection = 'column';
+                        container.style.background = '#1e1e1e';
+                        container.style.overflow = 'hidden';
+                        const object = document.createElement('object');
+                        object.data = dataUrl;
+                        object.type = 'application/pdf';
+                        object.style.width = '100%';
+                        object.style.height = '100%';
+                        object.style.flex = '1';
+                        const fallback = document.createElement('p');
+                        fallback.style.color = '#fff';
+                        fallback.style.padding = '20px';
+                        fallback.style.textAlign = 'center';
+                        fallback.textContent = 'Your browser does not support PDFs. ';
+                        const downloadLink = document.createElement('a');
+                        downloadLink.href = dataUrl;
+                        downloadLink.download = path.basename(file);
+                        downloadLink.style.color = '#4a9eff';
+                        downloadLink.textContent = 'Download PDF';
+                        fallback.appendChild(downloadLink);
+                        object.appendChild(fallback);
+                        container.appendChild(object);
+                        const win = kernel.windows.create({
                             title: windowTitle,
-                            html: pdfHtml,
                             width: 800,
                             height: 600,
                             max: false
                         });
+                        win.mount(container);
                         await writelnStdout(process, terminal, chalk.green(`Viewing: ${file}`));
                     }
                     else if (fileType === 'image') {
                         // Display image directly
                         const blob = new Blob([new Uint8Array(fileData)], { type: mimeType });
                         const url = URL.createObjectURL(blob);
-                        const imageHtml = `
-              <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#1e1e1e;overflow:auto;padding:20px;box-sizing:border-box;">
-                <img src="${url}" style="max-width:100%;max-height:100%;object-fit:contain;" alt="${path.basename(file)}" />
-              </div>
-            `;
-                        kernel.windows.create({
+                        const containerClass = generateRandomClass('image-container');
+                        const container = document.createElement('div');
+                        container.className = containerClass;
+                        container.style.width = '100%';
+                        container.style.height = '100%';
+                        container.style.display = 'flex';
+                        container.style.alignItems = 'center';
+                        container.style.justifyContent = 'center';
+                        container.style.background = '#1e1e1e';
+                        container.style.overflow = 'auto';
+                        container.style.padding = '20px';
+                        container.style.boxSizing = 'border-box';
+                        const img = document.createElement('img');
+                        img.src = url;
+                        img.alt = path.basename(file);
+                        img.style.maxWidth = '100%';
+                        img.style.maxHeight = '100%';
+                        img.style.objectFit = 'contain';
+                        container.appendChild(img);
+                        const win = kernel.windows.create({
                             title: windowTitle,
-                            html: imageHtml,
                             width: 800,
                             height: 600,
                             max: false
                         });
+                        win.mount(container);
                         await writelnStdout(process, terminal, chalk.green(`Viewing: ${file}`));
                     }
                     else if (fileType === 'audio') {
@@ -362,29 +677,50 @@ export function createCommand(kernel, shell, terminal) {
                         else {
                             // Create a simple audio player window
                             const audioId = `audio-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-                            const audioHtml = `
-                <div style="width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#1e1e1e;color:#fff;font-family:monospace;padding:20px;box-sizing:border-box;">
-                  <div style="font-size:18px;margin-bottom:20px;text-align:center;word-break:break-word;">${path.basename(file)}</div>
-                  <audio id="${audioId}" src="${url}" ${options.autoplay ? 'autoplay' : ''} ${options.loop ? 'loop' : ''} ${options.muted ? 'muted' : ''} controls style="width:100%;max-width:600px;"></audio>
-                </div>
-                <script>
-                  (function() {
-                    const audio = document.getElementById('${audioId}');
-                    if (audio) {
-                      audio.volume = ${options.volume / 100};
-                      audio.addEventListener('play', () => console.log('Playing: ${file}'));
-                      audio.addEventListener('ended', () => console.log('Finished: ${file}'));
-                    }
-                  })();
-                </script>
-              `;
-                            kernel.windows.create({
+                            const containerClass = generateRandomClass('audio-container');
+                            const container = document.createElement('div');
+                            container.className = containerClass;
+                            container.style.width = '100%';
+                            container.style.height = '100%';
+                            container.style.display = 'flex';
+                            container.style.flexDirection = 'column';
+                            container.style.alignItems = 'center';
+                            container.style.justifyContent = 'center';
+                            container.style.background = '#1e1e1e';
+                            container.style.color = '#fff';
+                            container.style.fontFamily = 'monospace';
+                            container.style.padding = '20px';
+                            container.style.boxSizing = 'border-box';
+                            const title = document.createElement('div');
+                            title.textContent = path.basename(file);
+                            title.style.fontSize = '18px';
+                            title.style.marginBottom = '20px';
+                            title.style.textAlign = 'center';
+                            title.style.wordBreak = 'break-word';
+                            const audio = document.createElement('audio');
+                            audio.id = audioId;
+                            audio.src = url;
+                            audio.controls = true;
+                            audio.style.width = '100%';
+                            audio.style.maxWidth = '600px';
+                            if (options.autoplay)
+                                audio.autoplay = true;
+                            if (options.loop)
+                                audio.loop = true;
+                            if (options.muted)
+                                audio.muted = true;
+                            audio.volume = options.volume / 100;
+                            audio.addEventListener('play', () => console.log(`Playing: ${file}`));
+                            audio.addEventListener('ended', () => console.log(`Finished: ${file}`));
+                            container.appendChild(title);
+                            container.appendChild(audio);
+                            const win = kernel.windows.create({
                                 title: windowTitle,
-                                html: audioHtml,
                                 width: 500,
                                 height: 200,
                                 max: false
                             });
+                            win.mount(container);
                             if (duration > 0) {
                                 const durationStr = formatDuration(duration);
                                 await writelnStdout(process, terminal, chalk.green(`Playing: ${file} (${durationStr})`));
@@ -446,26 +782,32 @@ export function createCommand(kernel, shell, terminal) {
                         // Ensure minimum size
                         windowWidth = Math.max(windowWidth, 320);
                         windowHeight = Math.max(windowHeight, 180);
-                        // Build video attributes
-                        const videoAttrs = [];
+                        const containerClass = generateRandomClass('video-container');
+                        const container = document.createElement('div');
+                        container.className = containerClass;
+                        container.style.width = '100%';
+                        container.style.height = '100%';
+                        const video = document.createElement('video');
+                        video.src = url;
+                        video.style.width = '100%';
+                        video.style.height = '100%';
+                        video.style.objectFit = 'contain';
                         if (options.autoplay)
-                            videoAttrs.push('autoplay');
+                            video.autoplay = true;
                         if (options.controls)
-                            videoAttrs.push('controls');
+                            video.controls = true;
                         if (options.loop)
-                            videoAttrs.push('loop');
+                            video.loop = true;
                         if (options.muted)
-                            videoAttrs.push('muted');
-                        videoAttrs.push('style="width:100%;height:100%;object-fit:contain"');
-                        const videoHtml = `<video src="${url}" ${videoAttrs.join(' ')}></video>`;
-                        // Create window
-                        kernel.windows.create({
+                            video.muted = true;
+                        container.appendChild(video);
+                        const win = kernel.windows.create({
                             title: windowTitle,
-                            html: videoHtml,
                             width: windowWidth,
                             height: windowHeight,
                             max: options.fullscreen
                         });
+                        win.mount(container);
                         if (duration > 0) {
                             const minutes = Math.floor(duration / 60);
                             const seconds = Math.floor(duration % 60);