npm - groove-dev - Versions diffs - 0.16.0 → 0.16.2 - Mend

groove-dev 0.16.0 → 0.16.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (211) hide show

package/packages/gui/dist/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>GROOVE</title>
-    <script type="module" crossorigin src="/assets/index-Dxg9hdf3.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-Gfb8Zxy9.css">
+    <script type="module" crossorigin src="/assets/index-DeXW9EFU.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BhjOFLBc.css">
   </head>
   <body>
     <div id="root"></div>

package/packages/gui/package.json CHANGED Viewed

@@ -23,6 +23,9 @@
     "@codemirror/state": "^6.6.0",
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.41.0",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-web-links": "^0.12.0",
+    "@xterm/xterm": "^6.0.0",
     "@xyflow/react": "^12.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

package/packages/gui/src/components/EditorTabs.jsx CHANGED Viewed

@@ -29,7 +29,7 @@ export default function EditorTabs() {
             style={{
               ...styles.tab,
               color: isActive ? 'var(--text-bright)' : 'var(--text-primary)',
-              borderBottom: isActive ? '2px solid var(--accent)' : '2px solid transparent',
+              borderBottom: isActive ? '1px solid var(--accent)' : '1px solid transparent',
               background: isActive ? 'var(--bg-active)' : 'transparent',
             }}
           >

package/packages/gui/src/components/FileTree.jsx CHANGED Viewed

@@ -1,7 +1,7 @@
 // GROOVE GUI — File Tree (expandable directory browser)
 // FSL-1.1-Apache-2.0 — see LICENSE
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { useGrooveStore } from '../stores/groove';
 const FILE_COLORS = {
@@ -15,14 +15,14 @@ const FILE_COLORS = {
   rust: '#e06c75',
   go: '#33afbc',
   shell: '#4ae168',
-  yaml: '#e06c75',
   text: '#abb2bf',
 };
-function TreeNode({ entry, depth, activeFile, expandedDirs, onToggleDir, onFileClick }) {
+function TreeNode({ entry, depth, activeFile, expandedDirs, onToggleDir, onFileClick, onContextMenu, renamingPath, renameValue, onRenameChange, onRenameSubmit, onRenameCancel }) {
   const isDir = entry.type === 'dir';
   const isExpanded = expandedDirs.has(entry.path);
   const isActive = !isDir && entry.path === activeFile;
+  const isRenaming = renamingPath === entry.path;
   const treeCache = useGrooveStore((s) => s.editorTreeCache);
   const children = treeCache[entry.path] || [];
@@ -30,6 +30,7 @@ function TreeNode({ entry, depth, activeFile, expandedDirs, onToggleDir, onFileC
     <>
       <div
         onClick={() => isDir ? onToggleDir(entry.path, entry.hasChildren) : onFileClick(entry.path)}
+        onContextMenu={(e) => onContextMenu(e, entry)}
         style={{
           ...styles.row,
           paddingLeft: 12 + depth * 16,
@@ -42,14 +43,29 @@ function TreeNode({ entry, depth, activeFile, expandedDirs, onToggleDir, onFileC
         ) : (
           <span style={{ ...styles.fileDot, background: FILE_COLORS[entry.language] || FILE_COLORS.text }} />
         )}
-        <span style={{
-          ...styles.name,
-          color: isDir ? 'var(--text-primary)' : (isActive ? 'var(--text-bright)' : 'var(--text-primary)'),
-          fontWeight: isDir ? 600 : 400,
-        }}>
-          {entry.name}
-        </span>
-        {!isDir && entry.size > 0 && (
+        {isRenaming ? (
+          <input
+            autoFocus
+            value={renameValue}
+            onChange={(e) => onRenameChange(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') onRenameSubmit();
+              if (e.key === 'Escape') onRenameCancel();
+            }}
+            onBlur={onRenameCancel}
+            onClick={(e) => e.stopPropagation()}
+            style={styles.renameInput}
+          />
+        ) : (
+          <span style={{
+            ...styles.name,
+            color: isDir ? 'var(--text-primary)' : (isActive ? 'var(--text-bright)' : 'var(--text-primary)'),
+            fontWeight: isDir ? 600 : 400,
+          }}>
+            {entry.name}
+          </span>
+        )}
+        {!isDir && !isRenaming && entry.size > 0 && (
           <span style={styles.size}>{formatSize(entry.size)}</span>
         )}
       </div>
@@ -62,6 +78,12 @@ function TreeNode({ entry, depth, activeFile, expandedDirs, onToggleDir, onFileC
           expandedDirs={expandedDirs}
           onToggleDir={onToggleDir}
           onFileClick={onFileClick}
+          onContextMenu={onContextMenu}
+          renamingPath={renamingPath}
+          renameValue={renameValue}
+          onRenameChange={onRenameChange}
+          onRenameSubmit={onRenameSubmit}
+          onRenameCancel={onRenameCancel}
         />
       ))}
     </>
@@ -74,15 +96,97 @@ function formatSize(bytes) {
   return `${(bytes / (1024 * 1024)).toFixed(1)}M`;
 }
+// --- Context Menu ---
+function ContextMenu({ x, y, entry, onClose, onAction }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const handle = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) onClose();
+    };
+    document.addEventListener('mousedown', handle);
+    return () => document.removeEventListener('mousedown', handle);
+  }, [onClose]);
+  const isDir = entry?.type === 'dir';
+  const items = [
+    ...(isDir ? [
+      { label: 'New File Here', action: 'newFileIn' },
+      { label: 'New Folder Here', action: 'newDirIn' },
+      { sep: true },
+    ] : []),
+    { label: 'Rename', action: 'rename' },
+    { label: 'Delete', action: 'delete', danger: true },
+  ];
+  return (
+    <div ref={ref} style={{ ...styles.contextMenu, left: x, top: y }}>
+      {items.map((item, i) =>
+        item.sep ? (
+          <div key={i} style={styles.contextSep} />
+        ) : (
+          <div
+            key={item.action}
+            onClick={() => { onAction(item.action, entry); onClose(); }}
+            style={{
+              ...styles.contextItem,
+              color: item.danger ? 'var(--red)' : 'var(--text-primary)',
+            }}
+          >
+            {item.label}
+          </div>
+        )
+      )}
+    </div>
+  );
+}
+// --- Inline New-Item Input ---
+function InlineInput({ placeholder, onSubmit, onCancel, depth }) {
+  const [value, setValue] = useState('');
+  return (
+    <div style={{ ...styles.row, paddingLeft: 12 + (depth || 0) * 16 }}>
+      <input
+        autoFocus
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && value.trim()) onSubmit(value.trim());
+          if (e.key === 'Escape') onCancel();
+        }}
+        onBlur={onCancel}
+        style={styles.renameInput}
+      />
+    </div>
+  );
+}
+// --- Main FileTree ---
 export default function FileTree() {
   const treeCache = useGrooveStore((s) => s.editorTreeCache);
   const activeFile = useGrooveStore((s) => s.editorActiveFile);
   const fetchTreeDir = useGrooveStore((s) => s.fetchTreeDir);
   const openFile = useGrooveStore((s) => s.openFile);
+  const createFile = useGrooveStore((s) => s.createFile);
+  const createDir = useGrooveStore((s) => s.createDir);
+  const deleteFile = useGrooveStore((s) => s.deleteFile);
+  const renameFile = useGrooveStore((s) => s.renameFile);
   const [expandedDirs, setExpandedDirs] = useState(new Set(['']));
   const [filter, setFilter] = useState('');
+  // Context menu state
+  const [contextMenu, setContextMenu] = useState(null); // { x, y, entry }
+  // Inline creation state
+  const [creating, setCreating] = useState(null); // { type: 'file'|'dir', parentPath: '' }
+  // Rename state
+  const [renamingPath, setRenamingPath] = useState(null);
+  const [renameValue, setRenameValue] = useState('');
   // Fetch root on mount
   useEffect(() => {
     fetchTreeDir('');
@@ -103,15 +207,111 @@ export default function FileTree() {
     });
   }, [fetchTreeDir, treeCache]);
+  const onContextMenu = useCallback((e, entry) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setContextMenu({ x: e.clientX, y: e.clientY, entry });
+  }, []);
+  const handleContextAction = useCallback(async (action, entry) => {
+    const parentDir = entry.path.includes('/') ? entry.path.split('/').slice(0, -1).join('/') : '';
+    switch (action) {
+      case 'newFileIn':
+        setCreating({ type: 'file', parentPath: entry.path });
+        // Ensure dir is expanded
+        setExpandedDirs((prev) => {
+          const next = new Set(prev);
+          next.add(entry.path);
+          if (!treeCache[entry.path]) fetchTreeDir(entry.path);
+          return next;
+        });
+        break;
+      case 'newDirIn':
+        setCreating({ type: 'dir', parentPath: entry.path });
+        setExpandedDirs((prev) => {
+          const next = new Set(prev);
+          next.add(entry.path);
+          if (!treeCache[entry.path]) fetchTreeDir(entry.path);
+          return next;
+        });
+        break;
+      case 'rename':
+        setRenamingPath(entry.path);
+        setRenameValue(entry.name);
+        break;
+      case 'delete':
+        if (confirm(`Delete "${entry.name}"?`)) {
+          await deleteFile(entry.path);
+        }
+        break;
+    }
+  }, [deleteFile, fetchTreeDir, treeCache]);
+  const handleCreate = useCallback(async (name) => {
+    if (!creating) return;
+    const fullPath = creating.parentPath ? `${creating.parentPath}/${name}` : name;
+    const ok = creating.type === 'file'
+      ? await createFile(fullPath)
+      : await createDir(fullPath);
+    setCreating(null);
+    if (ok && creating.type === 'file') openFile(fullPath);
+  }, [creating, createFile, createDir, openFile]);
+  const handleRenameSubmit = useCallback(async () => {
+    if (!renamingPath || !renameValue.trim()) { setRenamingPath(null); return; }
+    const parentDir = renamingPath.includes('/') ? renamingPath.split('/').slice(0, -1).join('/') : '';
+    const newPath = parentDir ? `${parentDir}/${renameValue.trim()}` : renameValue.trim();
+    if (newPath !== renamingPath) {
+      await renameFile(renamingPath, newPath);
+    }
+    setRenamingPath(null);
+  }, [renamingPath, renameValue, renameFile]);
+  // Handle root-level context menu (right-click on empty space)
+  const handleTreeContextMenu = useCallback((e) => {
+    // Only if click is on the tree background, not a node
+    if (e.target === e.currentTarget) {
+      e.preventDefault();
+      setContextMenu({ x: e.clientX, y: e.clientY, entry: { type: 'dir', path: '', name: 'root' } });
+    }
+  }, []);
   const rootEntries = treeCache[''] || [];
-  // Client-side filter
+  // Client-side filter — search all cached entries recursively
   const filtered = filter
     ? rootEntries.filter((e) => e.name.toLowerCase().includes(filter.toLowerCase()))
     : rootEntries;
+  // Calculate inline input depth based on parent
+  const creatingDepth = creating
+    ? (creating.parentPath === '' ? 0 : creating.parentPath.split('/').length)
+    : 0;
   return (
     <div style={styles.container}>
+      {/* Toolbar */}
+      <div style={styles.toolbar}>
+        <span style={styles.toolbarTitle}>FILES</span>
+        <div style={styles.toolbarActions}>
+          <button
+            onClick={() => setCreating({ type: 'file', parentPath: '' })}
+            title="New File"
+            style={styles.toolbarBtn}
+          >
+            +f
+          </button>
+          <button
+            onClick={() => setCreating({ type: 'dir', parentPath: '' })}
+            title="New Folder"
+            style={styles.toolbarBtn}
+          >
+            +d
+          </button>
+        </div>
+      </div>
       {/* Search */}
       <div style={styles.searchWrap}>
         <input
@@ -124,24 +324,62 @@ export default function FileTree() {
       </div>
       {/* Tree */}
-      <div style={styles.tree}>
-        {filtered.length === 0 && (
+      <div style={styles.tree} onContextMenu={handleTreeContextMenu}>
+        {filtered.length === 0 && !creating && (
           <div style={styles.empty}>
             {rootEntries.length === 0 ? 'Loading...' : 'No matches'}
           </div>
         )}
-        {filtered.map((entry) => (
-          <TreeNode
-            key={entry.path}
-            entry={entry}
+        {/* Inline creation at root level */}
+        {creating && creating.parentPath === '' && (
+          <InlineInput
+            placeholder={creating.type === 'file' ? 'filename.ext' : 'folder-name'}
+            onSubmit={handleCreate}
+            onCancel={() => setCreating(null)}
             depth={0}
-            activeFile={activeFile}
-            expandedDirs={expandedDirs}
-            onToggleDir={onToggleDir}
-            onFileClick={openFile}
           />
+        )}
+        {filtered.map((entry) => (
+          <React.Fragment key={entry.path}>
+            <TreeNode
+              entry={entry}
+              depth={0}
+              activeFile={activeFile}
+              expandedDirs={expandedDirs}
+              onToggleDir={onToggleDir}
+              onFileClick={openFile}
+              onContextMenu={onContextMenu}
+              renamingPath={renamingPath}
+              renameValue={renameValue}
+              onRenameChange={setRenameValue}
+              onRenameSubmit={handleRenameSubmit}
+              onRenameCancel={() => setRenamingPath(null)}
+            />
+            {/* Inline creation inside this dir */}
+            {creating && creating.parentPath === entry.path && expandedDirs.has(entry.path) && (
+              <InlineInput
+                placeholder={creating.type === 'file' ? 'filename.ext' : 'folder-name'}
+                onSubmit={handleCreate}
+                onCancel={() => setCreating(null)}
+                depth={1}
+              />
+            )}
+          </React.Fragment>
         ))}
       </div>
+      {/* Context Menu */}
+      {contextMenu && (
+        <ContextMenu
+          x={contextMenu.x}
+          y={contextMenu.y}
+          entry={contextMenu.entry}
+          onClose={() => setContextMenu(null)}
+          onAction={handleContextAction}
+        />
+      )}
     </div>
   );
 }
@@ -150,9 +388,29 @@ const styles = {
   container: {
     display: 'flex', flexDirection: 'column',
     height: '100%', background: 'var(--bg-chrome)',
+    position: 'relative',
+  },
+  toolbar: {
+    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+    padding: '6px 10px',
+    borderBottom: '1px solid var(--border)',
+  },
+  toolbarTitle: {
+    fontSize: 10, fontWeight: 700, letterSpacing: 1,
+    color: 'var(--text-dim)', textTransform: 'uppercase',
+  },
+  toolbarActions: {
+    display: 'flex', gap: 2,
+  },
+  toolbarBtn: {
+    background: 'none', border: 'none',
+    color: 'var(--text-dim)', fontSize: 11, fontWeight: 600,
+    cursor: 'pointer', fontFamily: 'var(--font)',
+    padding: '2px 5px', borderRadius: 3,
+    lineHeight: 1,
   },
   searchWrap: {
-    padding: '8px 8px 6px',
+    padding: '6px 8px',
     borderBottom: '1px solid var(--border)',
   },
   searchInput: {
@@ -190,4 +448,31 @@ const styles = {
     padding: 16, textAlign: 'center',
     fontSize: 11, color: 'var(--text-dim)',
   },
+  renameInput: {
+    flex: 1, padding: '2px 6px',
+    background: 'var(--bg-base)', border: '1px solid var(--accent)',
+    borderRadius: 2, color: 'var(--text-bright)',
+    fontSize: 12, fontFamily: 'var(--font)',
+    outline: 'none', minWidth: 0,
+  },
+  // Context menu
+  contextMenu: {
+    position: 'fixed', zIndex: 300,
+    background: 'var(--bg-surface)',
+    border: '1px solid var(--border)',
+    borderRadius: 4, padding: '4px 0',
+    minWidth: 160,
+    boxShadow: '0 8px 24px rgba(0,0,0,0.4)',
+    fontFamily: 'var(--font)',
+  },
+  contextItem: {
+    padding: '6px 14px', fontSize: 11,
+    cursor: 'pointer',
+    transition: 'background 0.08s',
+  },
+  contextSep: {
+    height: 1, background: 'var(--border)',
+    margin: '4px 0',
+  },
 };

package/packages/gui/src/components/MediaViewer.jsx ADDED Viewed

@@ -0,0 +1,104 @@
+// GROOVE GUI — Media Viewer (images + video)
+// FSL-1.1-Apache-2.0 — see LICENSE
+import React from 'react';
+const IMAGE_EXTS = new Set(['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'ico', 'bmp', 'avif']);
+const VIDEO_EXTS = new Set(['mp4', 'webm', 'mov', 'avi', 'mkv', 'ogv']);
+export function isMediaFile(path) {
+  const ext = path.split('.').pop()?.toLowerCase();
+  return IMAGE_EXTS.has(ext) || VIDEO_EXTS.has(ext);
+}
+export function isImageFile(path) {
+  const ext = path.split('.').pop()?.toLowerCase();
+  return IMAGE_EXTS.has(ext);
+}
+export default function MediaViewer({ path }) {
+  const ext = path.split('.').pop()?.toLowerCase();
+  const rawUrl = `/api/files/raw?path=${encodeURIComponent(path)}`;
+  const filename = path.split('/').pop();
+  const isImage = IMAGE_EXTS.has(ext);
+  const isVideo = VIDEO_EXTS.has(ext);
+  return (
+    <div style={styles.container}>
+      <div style={styles.header}>
+        <span style={styles.filename}>{filename}</span>
+        <span style={styles.badge}>{ext.toUpperCase()}</span>
+      </div>
+      <div style={styles.preview}>
+        {isImage && (
+          <img
+            src={rawUrl}
+            alt={filename}
+            style={styles.image}
+            draggable={false}
+          />
+        )}
+        {isVideo && (
+          <video
+            src={rawUrl}
+            controls
+            style={styles.video}
+          >
+            Your browser does not support this video format.
+          </video>
+        )}
+      </div>
+      <div style={styles.footer}>
+        <a href={rawUrl} target="_blank" rel="noopener noreferrer" style={styles.link}>
+          Open in new tab
+        </a>
+      </div>
+    </div>
+  );
+}
+const styles = {
+  container: {
+    flex: 1, display: 'flex', flexDirection: 'column',
+    background: 'var(--bg-base)', overflow: 'hidden',
+  },
+  header: {
+    padding: '10px 16px',
+    borderBottom: '1px solid var(--border)',
+    display: 'flex', alignItems: 'center', gap: 8,
+  },
+  filename: {
+    fontSize: 12, color: 'var(--text-bright)', fontWeight: 500,
+  },
+  badge: {
+    fontSize: 9, fontWeight: 700, letterSpacing: 0.5,
+    color: 'var(--text-dim)', background: 'var(--bg-active)',
+    padding: '2px 6px', borderRadius: 3,
+  },
+  preview: {
+    flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center',
+    overflow: 'auto', padding: 24,
+    background: 'repeating-conic-gradient(var(--bg-surface) 0% 25%, var(--bg-base) 0% 50%) 50% / 20px 20px',
+  },
+  image: {
+    maxWidth: '100%', maxHeight: '100%',
+    objectFit: 'contain', borderRadius: 4,
+    boxShadow: '0 4px 16px rgba(0,0,0,0.3)',
+  },
+  video: {
+    maxWidth: '100%', maxHeight: '100%',
+    borderRadius: 4, outline: 'none',
+    boxShadow: '0 4px 16px rgba(0,0,0,0.3)',
+  },
+  footer: {
+    padding: '8px 16px',
+    borderTop: '1px solid var(--border)',
+    display: 'flex', alignItems: 'center',
+  },
+  link: {
+    fontSize: 11, color: 'var(--accent)',
+    textDecoration: 'none', fontFamily: 'var(--font)',
+  },
+};