@vemjs/renderer-vecto 0.1.1 → 0.1.2

package/dist/WorkspaceExplorer.js

@@ -45,6 +45,22 @@ export class WorkspaceExplorer extends UIComponent {
     onDidOpenDirectory(cb) {
         this.openDirectoryCallbacks.push(cb);
     }
+    flattenFiles(nodes) {
+        const list = [];
+        const recurse = (nodeList, prefix) => {
+            for (const node of nodeList) {
+                const path = prefix ? `${prefix}/${node.label}` : node.label;
+                if (node.children && node.children.length > 0) {
+                    recurse(node.children, path);
+                }
+                else if (!node.children || node.children.length === 0) {
+                    list.push(path);
+                }
+            }
+        };
+        recurse(nodes, '');
+        return list;
+    }
     async handleOpenFolder() {
         if (typeof window === 'undefined' || !window.showDirectoryPicker) {
             console.warn('File System Access API is not supported in this environment.');
@@ -53,6 +69,12 @@ export class WorkspaceExplorer extends UIComponent {
         try {
             const rootHandle = await window.showDirectoryPicker();
             const nodes = await this.fsHandler.readDirectory(rootHandle);
+            // Cache all file paths for search plugins (like Telescope)
+            const fileList = this.flattenFiles(nodes);
+            const activeState = this.getActiveEditorState();
+            if (activeState) {
+                activeState.projectFiles = fileList;
+            }
             this.treeView = new TreeView({
                 nodes,
                 width: this.leftPanel.width,
@@ -85,8 +107,58 @@ export class WorkspaceExplorer extends UIComponent {
             console.error('Error selecting directory:', err);
         }
     }
+    getActiveEditorState() {
+        return this.workspace.getActiveLayout()?.getActiveState() || null;
+    }
+    lastSidebarPosition = 'left';
+    lastSidebarWidth = 240;
+    syncLayout(activeState) {
+        const layout = activeState.layoutConfig;
+        this.remove(this.panelGroup);
+        this.panelGroup = new PanelGroup({
+            direction: 'horizontal',
+            width: this.width,
+            height: this.height,
+        });
+        this.leftPanel = new Panel({
+            minSize: 150,
+            defaultSize: layout.sidebarWidth / Math.max(1, this.width),
+        });
+        this.rightPanel = new Panel({ minSize: 300 });
+        if (layout.sidebarPosition === 'left') {
+            this.leftPanel.add(this.openBtn);
+            if (this.treeView)
+                this.leftPanel.add(this.treeView);
+            this.rightPanel.add(this.workspace);
+            this.panelGroup.addPanel(this.leftPanel);
+            this.panelGroup.addPanel(this.rightPanel);
+        }
+        else if (layout.sidebarPosition === 'right') {
+            this.leftPanel.add(this.openBtn);
+            if (this.treeView)
+                this.leftPanel.add(this.treeView);
+            this.rightPanel.add(this.workspace);
+            this.panelGroup.addPanel(this.rightPanel);
+            this.panelGroup.addPanel(this.leftPanel);
+        }
+        else {
+            this.rightPanel.add(this.workspace);
+            this.panelGroup.addPanel(this.rightPanel);
+        }
+        this.add(this.panelGroup);
+    }
     update(dt, time) {
         super.update(dt, time);
+        const activeState = this.getActiveEditorState();
+        if (activeState) {
+            const layout = activeState.layoutConfig;
+            if (layout.sidebarPosition !== this.lastSidebarPosition ||
+                layout.sidebarWidth !== this.lastSidebarWidth) {
+                this.lastSidebarPosition = layout.sidebarPosition;
+                this.lastSidebarWidth = layout.sidebarWidth;
+                this.syncLayout(activeState);
+            }
+        }
         if (this.panelGroup.width !== this.width || this.panelGroup.height !== this.height) {
             this.panelGroup.width = this.width;
             this.panelGroup.height = this.height;
@@ -102,14 +174,32 @@ export class WorkspaceExplorer extends UIComponent {
             this.workspace.height = this.rightPanel.height;
         }
     }
-    render(_r) {
-        _r.beginPath();
-        _r.moveTo(0, 0);
-        _r.lineTo(this.leftPanel.width, 0);
-        _r.lineTo(this.leftPanel.width, this.height);
-        _r.lineTo(0, this.height);
-        _r.closePath();
-        _r.fill('#090d16'); // deep slate sidebar background
+    render(r) {
+        const activeState = this.getActiveEditorState();
+        if (!activeState)
+            return;
+        const theme = activeState.theme;
+        const layout = activeState.layoutConfig;
+        // Apply button styling
+        this.openBtn.bg = theme.statusBarBg;
+        this.openBtn.hoverBg = theme.statusBarBg;
+        this.openBtn.color = theme.fg;
+        if (this.treeView) {
+            /* eslint-disable-next-line no-underscore-dangle */
+            this.treeView._color = theme.fg;
+            /* eslint-disable-next-line no-underscore-dangle */
+            this.treeView._selColor = theme.accent + '33';
+        }
+        if (layout.sidebarPosition !== 'hidden') {
+            const startX = layout.sidebarPosition === 'left' ? 0 : this.width - this.leftPanel.width;
+            r.beginPath();
+            r.moveTo(startX, 0);
+            r.lineTo(startX + this.leftPanel.width, 0);
+            r.lineTo(startX + this.leftPanel.width, this.height);
+            r.lineTo(startX, this.height);
+            r.closePath();
+            r.fill(theme.sidebarBg);
+        }
     }
 }
 //# sourceMappingURL=WorkspaceExplorer.js.map

package/dist/WorkspaceExplorer.js.map

@@ -1 +1 @@
-{"version":3,"file":"WorkspaceExplorer.js","sourceRoot":"","sources":["../src/WorkspaceExplorer.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"WorkspaceExplorer.js","sourceRoot":"","sources":["../src/WorkspaceExplorer.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vemjs/renderer-vecto",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "VectoUI integration renderer for the Vem text editor",
   "type": "module",
   "main": "./dist/index.js",

package/src/CommandBar.ts

@@ -58,12 +58,19 @@ export class CommandBar extends UIComponent {
   }
 
   public render(r: IRenderer): void {
+    const theme = this.editorState.theme;
+
+    // Sync theme colors dynamically
+    this.prefixText.color = theme.accent;
+    this.input.color = theme.statusBarFg;
+    this.input.bg = theme.statusBarBg;
+
     r.beginPath();
     r.moveTo(0, 0);
     r.lineTo(this.width, 0);
     r.lineTo(this.width, this.height);
     r.lineTo(0, this.height);
     r.closePath();
-    r.fill('#1e293b'); // slate-800
+    r.fill(theme.statusBarBg);
   }
 }

package/src/VemEditorEntity.ts

@@ -57,28 +57,46 @@ export class VemEditorEntity extends UIComponent {
     const buffer = this.editorState.getBuffer();
     const cursor = this.editorState.getCursor();
     const lineCount = buffer.getLineCount();
+    const theme = this.editorState.theme;
+    const layout = this.editorState.layoutConfig;
 
     // 1. Calculate gutter width dynamically
     const maxLineDigits = Math.max(2, lineCount.toString().length);
     const gutterWidth = maxLineDigits * this.charWidth + 15;
 
-    // 2. Set line numbers text
+    // 2. Sync theme colors
+    this.gutterText.color = theme.gutterFg;
+    this.bodyText.color = theme.fg;
+
+    // 3. Set line numbers text
     const lineNums: string[] = [];
     for (let i = 1; i <= lineCount; i++) {
       lineNums.push(i.toString().padStart(maxLineDigits, ' '));
     }
     this.gutterText.setText(lineNums.join('\n'));
-    this.gutterText.setPosition(5, 5);
 
-    // 3. Set editor body text
-    const spans = buffer.getLines().map((line, idx) => {
+    // 4. Set editor body text
+    const spans: any[] = [];
+    const lines = buffer.getLines();
+    lines.forEach((line, idx) => {
       const suffix = idx === lineCount - 1 ? '' : '\n';
-      return { text: line + suffix };
+      const highlight = (this.editorState as any).highlightLine;
+      if (highlight) {
+        const lineSpans = highlight(line, idx);
+        if (lineSpans.length > 0) {
+          const lastSpan = { ...lineSpans[lineSpans.length - 1] };
+          lastSpan.text += suffix;
+          spans.push(...lineSpans.slice(0, -1), lastSpan);
+        } else {
+          spans.push({ text: suffix });
+        }
+      } else {
+        spans.push({ text: line + suffix });
+      }
     });
     this.bodyText.setSpans(spans);
-    this.bodyText.setPosition(gutterWidth + 5, 5);
 
-    // 4. Handle viewport scrolling to keep cursor visible
+    // 5. Handle viewport scrolling to keep cursor visible
     const visibleLines = Math.floor((this.height - 35) / this.lineHeight); // reserve 35px for status bar
     if (cursor.line >= this.scrollY + visibleLines) {
       this.scrollY = cursor.line - visibleLines + 1;
@@ -86,13 +104,9 @@ export class VemEditorEntity extends UIComponent {
       this.scrollY = cursor.line;
     }
 
-    // Update children scroll positions
-    const scrollOffsetY = -this.scrollY * this.lineHeight;
-    this.gutterText.setPosition(5, 5 + scrollOffsetY);
-    this.bodyText.setPosition(gutterWidth + 5, 5 + scrollOffsetY);
-
-    // 5. Handle CommandBar visibility
-    if (this.editorState.getMode() === 'COMMAND') {
+    // 6. Position and layout based on statusBarPosition
+    const hasCommandBar = this.editorState.getMode() === 'COMMAND';
+    if (hasCommandBar) {
       if (!this.children.includes(this.commandBar)) {
         this.add(this.commandBar);
       }
@@ -102,6 +116,17 @@ export class VemEditorEntity extends UIComponent {
         this.remove(this.commandBar);
       }
     }
+
+    const scrollOffsetY = -this.scrollY * this.lineHeight;
+    if (layout.statusBarPosition === 'top') {
+      this.commandBar.setPosition(0, 0);
+      this.gutterText.setPosition(5, 5 + scrollOffsetY + 30);
+      this.bodyText.setPosition(gutterWidth + 5, 5 + scrollOffsetY + 30);
+    } else {
+      this.commandBar.setPosition(0, this.height - 30);
+      this.gutterText.setPosition(5, 5 + scrollOffsetY);
+      this.bodyText.setPosition(gutterWidth + 5, 5 + scrollOffsetY);
+    }
   }
 
   public setAutocompleteItems(items: { label: string; detail?: string }[]): void {
@@ -140,6 +165,9 @@ export class VemEditorEntity extends UIComponent {
   }
 
   public render(r: IRenderer): void {
+    const theme = this.editorState.theme;
+    const layout = this.editorState.layoutConfig;
+
     // 1. Draw editor background
     r.beginPath();
     r.moveTo(0, 0);
@@ -147,7 +175,7 @@ export class VemEditorEntity extends UIComponent {
     r.lineTo(this.width, this.height);
     r.lineTo(0, this.height);
     r.closePath();
-    r.fill('#0f172a'); // slate-900
+    r.fill(theme.bg);
 
     const lineCount = this.editorState.getBuffer().getLineCount();
     const maxLineDigits = Math.max(2, lineCount.toString().length);
@@ -160,11 +188,28 @@ export class VemEditorEntity extends UIComponent {
     r.lineTo(gutterWidth, this.height);
     r.lineTo(0, this.height);
     r.closePath();
-    r.fill('#1e293b'); // slate-800
+    r.fill(theme.gutterBg);
+
+    // Apply scrolling transformation (with offset if statusBar is top)
+    const contentOffsetY = layout.statusBarPosition === 'top' ? 30 : 0;
 
-    // Apply scrolling transformation for cursor and selections
     r.save();
-    r.translate(0, -this.scrollY * this.lineHeight);
+    r.translate(0, -this.scrollY * this.lineHeight + contentOffsetY);
+
+    // 2.5. Draw Gutter Decorations (Git diff signs)
+    const decs = (this.editorState as any).gutterDecorations;
+    if (decs && decs.size > 0) {
+      for (let l = 0; l < lineCount; l++) {
+        const dec = decs.get(l);
+        if (dec) {
+          const decY = 5 + l * this.lineHeight;
+          r.beginPath();
+          r.roundRect(1, decY + 2, 3, this.lineHeight - 4, 1.5);
+          r.closePath();
+          r.fill(dec.color);
+        }
+      }
+    }
 
     // 3. Draw Visual Mode selections
     const selection = this.editorState.getVisualSelection();
@@ -191,7 +236,7 @@ export class VemEditorEntity extends UIComponent {
         r.lineTo(x + w, y + h);
         r.lineTo(x, y + h);
         r.closePath();
-        r.fill('rgba(56, 189, 248, 0.3)'); // sky-400 opacity
+        r.fill(theme.accent + '44'); // Theme accent with 25% opacity
       };
 
       if (type === 'line') {
@@ -259,40 +304,102 @@ export class VemEditorEntity extends UIComponent {
       r.lineTo(cursorX + 2, cursorY + this.lineHeight);
       r.lineTo(cursorX, cursorY + this.lineHeight);
       r.closePath();
-      r.fill('#f43f5e'); // rose-500
+      r.fill(theme.accent);
     } else {
       r.moveTo(cursorX, cursorY);
       r.lineTo(cursorX + this.charWidth, cursorY);
       r.lineTo(cursorX + this.charWidth, cursorY + this.lineHeight);
       r.lineTo(cursorX, cursorY + this.lineHeight);
       r.closePath();
-      r.fill('rgba(56, 189, 248, 0.7)'); // sky-400 opacity
+      r.fill(theme.accent + '88'); // 50% opacity accent
     }
 
     r.restore(); // Restore scroll transform
 
-    // 5. Draw status bar at the bottom
+    // 5. Draw status bar
     const statusBarHeight = 30;
-    const statusY = this.height - statusBarHeight;
+    const statusY = layout.statusBarPosition === 'top' ? 0 : this.height - statusBarHeight;
     r.beginPath();
     r.moveTo(0, statusY);
     r.lineTo(this.width, statusY);
-    r.lineTo(this.width, this.height);
-    r.lineTo(0, this.height);
+    r.lineTo(this.width, statusY + statusBarHeight);
+    r.lineTo(0, statusY + statusBarHeight);
     r.closePath();
-    r.fill('#1e293b'); // slate-800
+    r.fill(theme.statusBarBg);
+
+    const sl = this.editorState.statuslineLayout;
+    if (
+      mode !== 'COMMAND' &&
+      ((sl.left && sl.left.length > 0) || (sl.right && sl.right.length > 0))
+    ) {
+      // Custom statusline layout (lualine-like)
+      let startX = 0;
+      if (sl.left) {
+        for (const segment of sl.left) {
+          const textWidth = (r as any).measureText
+            ? (r as any).measureText(segment.text).width
+            : segment.text.length * 8;
+          const font = segment.bold ? 'bold 12px monospace' : '12px monospace';
+          const color = segment.color || theme.statusBarFg;
+
+          if (segment.bg) {
+            const blockWidth = textWidth + 20;
+            r.beginPath();
+            r.moveTo(startX, statusY);
+            r.lineTo(startX + blockWidth, statusY);
+            r.lineTo(startX + blockWidth, statusY + statusBarHeight);
+            r.lineTo(startX, statusY + statusBarHeight);
+            r.closePath();
+            r.fill(segment.bg);
+
+            r.fillText(segment.text, startX + 10, statusY + 18, font, color);
+            startX += blockWidth;
+          } else {
+            r.fillText(segment.text, startX + 10, statusY + 18, font, color);
+            startX += textWidth + 15;
+          }
+        }
+      }
 
-    if (mode !== 'COMMAND') {
+      let endX = this.width;
+      if (sl.right) {
+        for (const segment of sl.right) {
+          const textWidth = (r as any).measureText
+            ? (r as any).measureText(segment.text).width
+            : segment.text.length * 8;
+          const font = segment.bold ? 'bold 12px monospace' : '12px monospace';
+          const color = segment.color || theme.statusBarFg;
+
+          if (segment.bg) {
+            const blockWidth = textWidth + 20;
+            endX -= blockWidth;
+            r.beginPath();
+            r.moveTo(endX, statusY);
+            r.lineTo(endX + blockWidth, statusY);
+            r.lineTo(endX + blockWidth, statusY + statusBarHeight);
+            r.lineTo(endX, statusY + statusBarHeight);
+            r.closePath();
+            r.fill(segment.bg);
+
+            r.fillText(segment.text, endX + 10, statusY + 18, font, color);
+          } else {
+            endX -= textWidth + 15;
+            r.fillText(segment.text, endX + 10, statusY + 18, font, color);
+          }
+        }
+      }
+    } else if (mode !== 'COMMAND') {
+      // Default fallback status bar
       const modeText = `-- ${mode} --`;
       const posText = `${cursor.line + 1}:${cursor.character + 1}`;
       const pendingKeys = this.editorState.getPendingKeys();
       const pendingText = pendingKeys.length > 0 ? pendingKeys.join('') : '';
 
-      r.fillText(modeText, 10, statusY + 18, 'bold 12px monospace', '#38bdf8');
+      r.fillText(modeText, 10, statusY + 18, 'bold 12px monospace', theme.accent);
       if (pendingText) {
-        r.fillText(pendingText, 120, statusY + 18, '12px monospace', '#e2e8f0');
+        r.fillText(pendingText, 120, statusY + 18, '12px monospace', theme.statusBarFg);
       }
-      r.fillText(posText, this.width - 60, statusY + 18, '12px monospace', '#94a3b8');
+      r.fillText(posText, this.width - 60, statusY + 18, '12px monospace', theme.statusBarFg);
     }
 
     // 6. Draw autocomplete popup menu
@@ -308,23 +415,24 @@ export class VemEditorEntity extends UIComponent {
 
       // Translate coordinates from buffer space to screen space
       let popupX = cursorX;
-      let popupY = cursorY + this.lineHeight - this.scrollY * this.lineHeight;
+      let popupY = cursorY + this.lineHeight - this.scrollY * this.lineHeight + contentOffsetY;
 
       // Adjust positioning if it overflows screen boundaries
       if (popupX + popupWidth > this.width) {
         popupX = Math.max(gutterWidth + 5, this.width - popupWidth - 5);
       }
-      if (popupY + popupHeight > statusY) {
-        // Render above the cursor if it would overlay/go past the status bar
+      if (layout.statusBarPosition === 'bottom' && popupY + popupHeight > statusY) {
         popupY = cursorY - this.scrollY * this.lineHeight - popupHeight;
+      } else if (layout.statusBarPosition === 'top' && popupY < 30) {
+        popupY = cursorY + this.lineHeight - this.scrollY * this.lineHeight + 30;
       }
 
       // Draw background panel
       r.beginPath();
       r.roundRect(popupX, popupY, popupWidth, popupHeight, 4);
       r.closePath();
-      r.fill('#1e293b'); // slate-800
-      r.stroke('#475569', 1.2); // slate-600 border
+      r.fill(theme.statusBarBg);
+      r.stroke(theme.accent + '88', 1.2);
 
       // Draw menu items
       r.save();
@@ -342,10 +450,10 @@ export class VemEditorEntity extends UIComponent {
           r.lineTo(popupX + popupWidth - 2, itemY + 18);
           r.lineTo(popupX + 2, itemY + 18);
           r.closePath();
-          r.fill('#334155'); // slate-700
+          r.fill(theme.accent + '44');
         }
 
-        const labelColor = i === this.selectedAutocompleteIndex ? '#38bdf8' : '#f8fafc'; // sky-400 or slate-50
+        const labelColor = i === this.selectedAutocompleteIndex ? theme.accent : theme.fg;
         r.fillText(item.label, popupX + 8, itemY + 13, '12px monospace', labelColor);
         if (item.detail) {
           r.fillText(
@@ -353,11 +461,131 @@ export class VemEditorEntity extends UIComponent {
             popupX + 8 + item.label.length * 7.5,
             itemY + 13,
             '10px monospace',
-            '#64748b',
+            theme.gutterFg,
           );
         }
       }
       r.restore();
     }
+
+    // 7. Draw centered Floating Popup Picker Modal (Telescope-like)
+    const popup = this.editorState.activePopup;
+    if (popup) {
+      const modalW = Math.min(550, this.width - 40);
+      const modalH = Math.min(380, this.height - 80);
+      const modalX = (this.width - modalW) / 2;
+      const modalY = (this.height - modalH) / 2;
+
+      // Draw modal backdrop shade
+      r.beginPath();
+      r.roundRect(0, 0, this.width, this.height, 0);
+      r.closePath();
+      r.fill('rgba(15, 23, 42, 0.6)'); // Translucent dark overlay
+
+      // Draw main panel
+      r.beginPath();
+      r.roundRect(modalX, modalY, modalW, modalH, 6);
+      r.closePath();
+      r.fill(theme.bg);
+      r.stroke(theme.accent, 1.5);
+
+      // Title
+      r.fillText(
+        popup.title.toUpperCase(),
+        modalX + 15,
+        modalY + 28,
+        'bold 13px Outfit, monospace',
+        theme.accent,
+      );
+
+      // Input Search Bar
+      r.beginPath();
+      r.roundRect(modalX + 15, modalY + 42, modalW - 30, 28, 4);
+      r.closePath();
+      r.fill(theme.statusBarBg);
+      r.stroke(theme.accent + '44', 1);
+
+      const queryText = `> ${this.editorState.popupFilterText}`;
+      r.fillText(queryText, modalX + 25, modalY + 60, '13px monospace', theme.fg);
+
+      // Draw flashing block cursor in search bar
+      const cursorOffset = (r as any).measureText
+        ? (r as any).measureText(queryText).width
+        : queryText.length * 8;
+      r.beginPath();
+      r.roundRect(modalX + 25 + cursorOffset + 2, modalY + 48, 8, 15, 0);
+      r.closePath();
+      r.fill(theme.accent);
+
+      // Divider line
+      r.beginPath();
+      r.moveTo(modalX + 15, modalY + 82);
+      r.lineTo(modalX + modalW - 15, modalY + 82);
+      r.closePath();
+      r.stroke(theme.gutterBg, 1.2);
+
+      // Render filtered list items
+      const items = this.editorState.getFilteredPopupItems();
+      const listStartY = modalY + 95;
+      const itemH = 22;
+      const maxVisibleItems = 11;
+      const startIndex = Math.max(
+        0,
+        Math.min(
+          this.editorState.activePopupIndex - Math.floor(maxVisibleItems / 2),
+          items.length - maxVisibleItems,
+        ),
+      );
+
+      r.save();
+      r.clip(modalX + 15, modalY + 85, modalW - 30, modalH - 100);
+
+      for (let i = 0; i < Math.min(maxVisibleItems, items.length); i++) {
+        const itemIdx = startIndex + i;
+        const item = items[itemIdx];
+        if (!item) break;
+
+        const rowY = listStartY + i * itemH;
+
+        if (itemIdx === this.editorState.activePopupIndex) {
+          // Draw active row highlight background
+          r.beginPath();
+          r.roundRect(modalX + 15, rowY, modalW - 30, itemH, 4);
+          r.closePath();
+          r.fill(theme.accent + '33');
+        }
+
+        const labelColor = itemIdx === this.editorState.activePopupIndex ? theme.accent : theme.fg;
+        r.fillText(
+          item.label,
+          modalX + 25,
+          rowY + 15,
+          itemIdx === this.editorState.activePopupIndex ? 'bold 12px monospace' : '12px monospace',
+          labelColor,
+        );
+
+        if (item.detail) {
+          const detailX = modalX + modalW - 35 - item.detail.length * 7.5;
+          r.fillText(
+            item.detail,
+            Math.max(modalX + 250, detailX),
+            rowY + 15,
+            '10px monospace',
+            theme.gutterFg,
+          );
+        }
+      }
+      r.restore();
+
+      // Draw item counts indicator
+      const countText = `${this.editorState.activePopupIndex + 1}/${items.length}`;
+      r.fillText(
+        countText,
+        modalX + modalW - 20 - countText.length * 7.5,
+        modalY + 28,
+        '11px monospace',
+        theme.gutterFg,
+      );
+    }
   }
 }