@vemjs/renderer-vecto 0.1.0

package/dist/WorkspaceExplorer.d.ts

@@ -0,0 +1,18 @@
+import { UIComponent } from '@vectojs/ui';
+import type { IRenderer } from '@vectojs/core';
+import { VemWorkspace } from './Workspace';
+export declare class WorkspaceExplorer extends UIComponent {
+    private panelGroup;
+    private leftPanel;
+    private rightPanel;
+    private workspace;
+    private treeView;
+    private openBtn;
+    private fsHandler;
+    constructor(width: number, height: number, initialText?: string);
+    getWorkspace(): VemWorkspace;
+    private handleOpenFolder;
+    update(dt: number, time: number): void;
+    render(_r: IRenderer): void;
+}
+//# sourceMappingURL=WorkspaceExplorer.d.ts.map

package/dist/WorkspaceExplorer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkspaceExplorer.d.ts","sourceRoot":"","sources":["../src/WorkspaceExplorer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAuC,MAAM,aAAa,CAAC;AAC/E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,qBAAa,iBAAkB,SAAQ,WAAW;IAChD,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,SAAS,CAAQ;IACzB,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,SAAS,CAAe;IAChC,OAAO,CAAC,QAAQ,CAAyB;IACzC,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,SAAS,CAAoB;gBAEzB,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM;IAqCxD,YAAY,IAAI,YAAY;YAIrB,gBAAgB;IAkCvB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI;IAyBtC,MAAM,CAAC,EAAE,EAAE,SAAS,GAAG,IAAI;CASnC"}

package/dist/WorkspaceExplorer.js

@@ -0,0 +1,102 @@
+import { UIComponent, PanelGroup, Panel, TreeView, Button } from '@vectojs/ui';
+import { VemWorkspace } from './Workspace';
+import { FileSystemHandler } from './FileSystemHandler';
+export class WorkspaceExplorer extends UIComponent {
+    panelGroup;
+    leftPanel;
+    rightPanel;
+    workspace;
+    treeView = null;
+    openBtn;
+    fsHandler;
+    constructor(width, height, initialText) {
+        super();
+        this.width = width;
+        this.height = height;
+        this.fsHandler = new FileSystemHandler();
+        this.panelGroup = new PanelGroup({
+            direction: 'horizontal',
+            width: width,
+            height: height,
+        });
+        this.leftPanel = new Panel({ minSize: 150, defaultSize: 0.2 });
+        this.rightPanel = new Panel({ minSize: 300 });
+        this.workspace = new VemWorkspace(width * 0.8, height, initialText);
+        this.openBtn = new Button('Open Folder', {
+            onClick: () => this.handleOpenFolder(),
+            bg: '#1e293b', // slate-800
+            hoverBg: '#334155',
+            font: '14px monospace',
+            color: '#e2e8f0',
+        });
+        this.openBtn.width = 120;
+        this.openBtn.height = 35;
+        this.openBtn.setPosition(15, 15);
+        this.leftPanel.add(this.openBtn);
+        this.rightPanel.add(this.workspace);
+        this.panelGroup.addPanel(this.leftPanel);
+        this.panelGroup.addPanel(this.rightPanel);
+        this.add(this.panelGroup);
+    }
+    getWorkspace() {
+        return this.workspace;
+    }
+    async handleOpenFolder() {
+        if (typeof window === 'undefined' || !window.showDirectoryPicker) {
+            console.warn('File System Access API is not supported in this environment.');
+            return;
+        }
+        try {
+            const rootHandle = await window.showDirectoryPicker();
+            const nodes = await this.fsHandler.readDirectory(rootHandle);
+            this.treeView = new TreeView({
+                nodes,
+                width: this.leftPanel.width,
+                height: this.height - 10,
+                font: '13px monospace',
+                color: '#cbd5e1',
+                selectedColor: 'rgba(56, 189, 248, 0.2)',
+                hoverColor: 'rgba(255, 255, 255, 0.05)',
+                onSelect: async (node) => {
+                    const fileHandle = this.fsHandler.getFileHandle(node.id);
+                    if (fileHandle) {
+                        const content = await this.fsHandler.readFile(fileHandle);
+                        this.workspace.addTab(content);
+                    }
+                },
+            });
+            this.leftPanel.remove(this.openBtn);
+            this.leftPanel.add(this.treeView);
+        }
+        catch (err) {
+            console.error('Error selecting directory:', err);
+        }
+    }
+    update(dt, time) {
+        super.update(dt, time);
+        if (this.panelGroup.width !== this.width || this.panelGroup.height !== this.height) {
+            this.panelGroup.width = this.width;
+            this.panelGroup.height = this.height;
+        }
+        if (this.treeView &&
+            (this.treeView.width !== this.leftPanel.width || this.treeView.height !== this.height)) {
+            this.treeView.width = this.leftPanel.width;
+            this.treeView.height = this.height;
+        }
+        if (this.workspace.width !== this.rightPanel.width ||
+            this.workspace.height !== this.rightPanel.height) {
+            this.workspace.width = this.rightPanel.width;
+            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
+    }
+}
+//# sourceMappingURL=WorkspaceExplorer.js.map

package/dist/WorkspaceExplorer.js.map

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

package/dist/WorkspaceLayout.d.ts

@@ -0,0 +1,38 @@
+import { UIComponent, Panel } from '@vectojs/ui';
+import type { IRenderer } from '@vectojs/core';
+import { VemEditorState } from '@vemjs/core';
+import { VemEditorEntity } from './VemEditorEntity';
+export type PaneNode = {
+    type: 'leaf';
+    id: string;
+    state: VemEditorState;
+} | {
+    type: 'split';
+    id: string;
+    direction: 'horizontal' | 'vertical';
+    children: PaneNode[];
+};
+export declare class EditorPane extends Panel {
+    editorState: VemEditorState;
+    editorEntity: VemEditorEntity;
+    constructor(state: VemEditorState);
+    update(dt: number, time: number): void;
+}
+export declare class WorkspaceLayout extends UIComponent {
+    private rootNode;
+    private activePaneId;
+    private layoutRoot;
+    private paneMap;
+    constructor(width: number, height: number, initialText?: string);
+    private bindStateEvents;
+    getActiveState(): VemEditorState | null;
+    splitPane(paneId: string, direction: 'horizontal' | 'vertical'): void;
+    closePane(paneId: string): void;
+    private findParentNode;
+    private findFirstLeaf;
+    rebuildLayout(): void;
+    private buildNode;
+    update(dt: number, time: number): void;
+    render(_r: IRenderer): void;
+}
+//# sourceMappingURL=WorkspaceLayout.d.ts.map

package/dist/WorkspaceLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkspaceLayout.d.ts","sourceRoot":"","sources":["../src/WorkspaceLayout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAc,KAAK,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,KAAK,EAAU,SAAS,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,MAAM,MAAM,QAAQ,GAChB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,cAAc,CAAA;CAAE,GACnD;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,YAAY,GAAG,UAAU,CAAC;IAAC,QAAQ,EAAE,QAAQ,EAAE,CAAA;CAAE,CAAC;AAE9F,qBAAa,UAAW,SAAQ,KAAK;IAC5B,WAAW,EAAE,cAAc,CAAC;IAC5B,YAAY,EAAE,eAAe,CAAC;gBAEzB,KAAK,EAAE,cAAc;IAO1B,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI;CAQ9C;AAED,qBAAa,eAAgB,SAAQ,WAAW;IAC9C,OAAO,CAAC,QAAQ,CAAW;IAC3B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,UAAU,CAAuB;IACzC,OAAO,CAAC,OAAO,CAA+B;gBAElC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM;IAqB/D,OAAO,CAAC,eAAe;IAShB,cAAc,IAAI,cAAc,GAAG,IAAI;IAQvC,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,GAAG,UAAU,GAAG,IAAI;IA0BrE,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IA2BtC,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,aAAa;IAKd,aAAa,IAAI,IAAI;IAS5B,OAAO,CAAC,SAAS;IA0BV,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI;IAQtC,MAAM,CAAC,EAAE,EAAE,SAAS,GAAG,IAAI;CAGnC"}

package/dist/WorkspaceLayout.js

@@ -0,0 +1,165 @@
+import { UIComponent, PanelGroup, Panel } from '@vectojs/ui';
+import { VemEditorState } from '@vemjs/core';
+import { VemEditorEntity } from './VemEditorEntity';
+export class EditorPane extends Panel {
+    editorState;
+    editorEntity;
+    constructor(state) {
+        super();
+        this.editorState = state;
+        this.editorEntity = new VemEditorEntity(state);
+        this.add(this.editorEntity);
+    }
+    update(dt, time) {
+        super.update(dt, time);
+        if (this.editorEntity.width !== this.width || this.editorEntity.height !== this.height) {
+            this.editorEntity.width = this.width;
+            this.editorEntity.height = this.height;
+            this.editorEntity.updateFromState();
+        }
+    }
+}
+export class WorkspaceLayout extends UIComponent {
+    rootNode;
+    activePaneId;
+    layoutRoot = null;
+    paneMap = new Map();
+    constructor(width, height, initialText) {
+        super();
+        this.width = width;
+        this.height = height;
+        const initialId = 'pane-1';
+        const initialState = new VemEditorState(initialText);
+        this.rootNode = {
+            type: 'leaf',
+            id: initialId,
+            state: initialState,
+        };
+        this.activePaneId = initialId;
+        this.paneMap.set(initialId, this.rootNode);
+        this.bindStateEvents(initialId, initialState);
+        this.rebuildLayout();
+    }
+    bindStateEvents(id, state) {
+        state.onSplit((dir) => {
+            this.splitPane(id, dir);
+        });
+        state.onQuit(() => {
+            this.closePane(id);
+        });
+    }
+    getActiveState() {
+        const pane = this.paneMap.get(this.activePaneId);
+        if (pane && pane.type === 'leaf') {
+            return pane.state;
+        }
+        return null;
+    }
+    splitPane(paneId, direction) {
+        const targetNode = this.paneMap.get(paneId);
+        if (!targetNode || targetNode.type !== 'leaf')
+            return;
+        const newId = `pane-${Date.now()}`;
+        const newState = new VemEditorState(targetNode.state.getBuffer().getText());
+        const newLeaf = {
+            type: 'leaf',
+            id: newId,
+            state: newState,
+        };
+        this.paneMap.set(newId, newLeaf);
+        this.bindStateEvents(newId, newState);
+        const oldLeafCopy = { ...targetNode };
+        const splitNode = targetNode;
+        splitNode.type = 'split';
+        splitNode.direction = direction;
+        splitNode.children = [oldLeafCopy, newLeaf];
+        this.activePaneId = newId;
+        this.rebuildLayout();
+    }
+    closePane(paneId) {
+        if (this.rootNode.type === 'leaf')
+            return;
+        const parentNode = this.findParentNode(this.rootNode, paneId);
+        if (!parentNode || parentNode.type !== 'split')
+            return;
+        const sibling = parentNode.children.find((c) => c.id !== paneId);
+        if (!sibling)
+            return;
+        const grandparent = this.findParentNode(this.rootNode, parentNode.id);
+        if (grandparent && grandparent.type === 'split') {
+            const idx = grandparent.children.findIndex((c) => c.id === parentNode.id);
+            grandparent.children[idx] = sibling;
+        }
+        else {
+            this.rootNode = sibling;
+        }
+        this.paneMap.delete(paneId);
+        const remainingLeaf = this.findFirstLeaf(this.rootNode);
+        if (remainingLeaf) {
+            this.activePaneId = remainingLeaf.id;
+        }
+        this.rebuildLayout();
+    }
+    findParentNode(current, childId) {
+        if (current.type === 'leaf')
+            return null;
+        for (const child of current.children) {
+            if (child.id === childId) {
+                return current;
+            }
+            const parent = this.findParentNode(child, childId);
+            if (parent)
+                return parent;
+        }
+        return null;
+    }
+    findFirstLeaf(current) {
+        if (current.type === 'leaf')
+            return current;
+        return this.findFirstLeaf(current.children[0]);
+    }
+    rebuildLayout() {
+        if (this.layoutRoot) {
+            this.remove(this.layoutRoot);
+        }
+        this.layoutRoot = this.buildNode(this.rootNode);
+        this.add(this.layoutRoot);
+    }
+    buildNode(node) {
+        if (node.type === 'leaf') {
+            const pane = new EditorPane(node.state);
+            pane.id = node.id;
+            return pane;
+        }
+        else {
+            const group = new PanelGroup({
+                direction: node.direction,
+                width: this.width,
+                height: this.height,
+            });
+            for (const child of node.children) {
+                const childEntity = this.buildNode(child);
+                if (childEntity instanceof Panel) {
+                    group.addPanel(childEntity);
+                }
+                else {
+                    const p = new Panel();
+                    p.add(childEntity);
+                    group.addPanel(p);
+                }
+            }
+            return group;
+        }
+    }
+    update(dt, time) {
+        super.update(dt, time);
+        if (this.layoutRoot) {
+            this.layoutRoot.width = this.width;
+            this.layoutRoot.height = this.height;
+        }
+    }
+    render(_r) {
+        // Handled by children
+    }
+}
+//# sourceMappingURL=WorkspaceLayout.js.map

package/dist/WorkspaceLayout.js.map

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

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+import type { VemEditorState } from '@vemjs/core';
+export { VemEditorEntity } from './VemEditorEntity';
+export { CommandBar } from './CommandBar';
+export { WorkspaceLayout, EditorPane, type PaneNode } from './WorkspaceLayout';
+export { VemWorkspace } from './Workspace';
+export { WorkspaceExplorer } from './WorkspaceExplorer';
+export declare class VectoRenderer {
+    private editorState;
+    private scene;
+    private editorEntity;
+    constructor(editorState: VemEditorState);
+    attach(canvas: HTMLCanvasElement): void;
+    render(): void;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,qBAAa,aAAa;IACxB,OAAO,CAAC,WAAW,CAAiB;IACpC,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,YAAY,CAAgC;gBAExC,WAAW,EAAE,cAAc;IAIhC,MAAM,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI;IAuBvC,MAAM,IAAI,IAAI;CAKtB"}

package/dist/index.js

@@ -0,0 +1,41 @@
+import { Scene } from '@vectojs/core';
+import { VemEditorEntity } from './VemEditorEntity';
+export { VemEditorEntity } from './VemEditorEntity';
+export { CommandBar } from './CommandBar';
+export { WorkspaceLayout, EditorPane } from './WorkspaceLayout';
+export { VemWorkspace } from './Workspace';
+export { WorkspaceExplorer } from './WorkspaceExplorer';
+export class VectoRenderer {
+    editorState;
+    scene = null;
+    editorEntity = null;
+    constructor(editorState) {
+        this.editorState = editorState;
+    }
+    attach(canvas) {
+        this.scene = new Scene(canvas);
+        this.editorEntity = new VemEditorEntity(this.editorState);
+        this.scene.add(this.editorEntity);
+        this.scene.start();
+        // Listen to changes in the editor state to update rendering properties
+        this.editorState.onChange(() => {
+            if (this.editorEntity) {
+                this.editorEntity.updateFromState();
+            }
+            if (this.editorState.getMode() === 'COMMAND') {
+                setTimeout(() => {
+                    const inputEl = this.scene?.getA11yElement('vem-command-input');
+                    if (inputEl) {
+                        inputEl.focus();
+                    }
+                }, 10);
+            }
+        });
+    }
+    render() {
+        if (this.editorEntity) {
+            this.editorEntity.updateFromState();
+        }
+    }
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,UAAU,EAAiB,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,MAAM,OAAO,aAAa;IAChB,WAAW,CAAiB;IAC5B,KAAK,GAAiB,IAAI,CAAC;IAC3B,YAAY,GAA2B,IAAI,CAAC;IAEpD,YAAY,WAA2B;QACrC,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;IACjC,CAAC;IAEM,MAAM,CAAC,MAAyB;QACrC,IAAI,CAAC,KAAK,GAAG,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC;QAC/B,IAAI,CAAC,YAAY,GAAG,IAAI,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC1D,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAClC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;QAEnB,uEAAuE;QACvE,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,GAAG,EAAE;YAC7B,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;gBACtB,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,CAAC;YACtC,CAAC;YAED,IAAI,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,KAAK,SAAS,EAAE,CAAC;gBAC7C,UAAU,CAAC,GAAG,EAAE;oBACd,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,mBAAmB,CAAC,CAAC;oBAChE,IAAI,OAAO,EAAE,CAAC;wBACX,OAAuB,CAAC,KAAK,EAAE,CAAC;oBACnC,CAAC;gBACH,CAAC,EAAE,EAAE,CAAC,CAAC;YACT,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,MAAM;QACX,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,CAAC;QACtC,CAAC;IACH,CAAC;CACF"}

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@vemjs/renderer-vecto",
+  "version": "0.1.0",
+  "description": "VectoUI integration renderer for the Vem text editor",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsc"
+  },
+  "dependencies": {
+    "@vectojs/core": "0.1.0",
+    "@vectojs/ui": "0.1.1",
+    "@vemjs/core": "workspace:*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/CommandBar.ts

@@ -0,0 +1,69 @@
+import { UIComponent, Text, Input } from '@vectojs/ui';
+import type { IRenderer } from '@vectojs/core';
+import type { VemEditorState } from '@vemjs/core';
+
+export class CommandBar extends UIComponent {
+  private editorState: VemEditorState;
+  private prefixText: Text;
+  private input: Input;
+
+  constructor(editorState: VemEditorState, width: number) {
+    super();
+    this.editorState = editorState;
+    this.width = width;
+    this.height = 30;
+
+    this.prefixText = new Text(':', {
+      font: 'bold 14px monospace',
+      color: '#38bdf8', // sky-400
+    });
+    this.prefixText.setPosition(5, 5);
+
+    this.input = new Input({
+      width: width - 20,
+      height: 25,
+      font: '14px monospace',
+      color: '#e2e8f0',
+      bg: '#1e293b', // slate-800
+      border: 'transparent',
+      onChange: (value) => {
+        // Mirror changes to editorState command buffer
+        (this.editorState as any).commandText = value;
+      },
+    });
+    this.input.id = 'vem-command-input';
+    this.input.setPosition(15, 2);
+
+    // Watch for Escape and Enter on the input component to bridge to editorState
+    this.input.on('keydown', (e: any) => {
+      const key = e.nativeEvent?.key || e.key;
+      if (key === 'Escape') {
+        this.editorState.handleKey('Escape');
+      } else if (key === 'Enter') {
+        this.editorState.handleKey('Enter');
+      }
+    });
+
+    this.add(this.prefixText);
+    this.add(this.input);
+  }
+
+  public updateWidth(width: number): void {
+    this.width = width;
+    this.input.width = width - 20;
+  }
+
+  public clear(): void {
+    this.input.value = '';
+  }
+
+  public render(r: IRenderer): void {
+    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
+  }
+}

package/src/FileSystemHandler.test.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'bun:test';
+import { FileSystemHandler } from './FileSystemHandler';
+
+describe('FileSystemHandler', () => {
+  it('should map directory entries to TreeNode structures and sort folders first', async () => {
+    const mockFileHandle = {
+      kind: 'file',
+      name: 'index.ts',
+      getFile: async () => ({
+        text: async () => 'console.log("hello");',
+      }),
+    };
+
+    const mockSubDirHandle = {
+      kind: 'directory',
+      name: 'components',
+      values: async function* () {
+        yield {
+          kind: 'file',
+          name: 'Button.ts',
+        };
+      },
+    };
+
+    const mockDirHandle = {
+      kind: 'directory',
+      name: 'src',
+      values: async function* () {
+        yield mockFileHandle;
+        yield mockSubDirHandle;
+      },
+    };
+
+    const handler = new FileSystemHandler();
+    const nodes = await handler.readDirectory(mockDirHandle as any);
+
+    expect(nodes.length).toBe(2);
+    // Folder components should be sorted first
+    expect(nodes[0].label).toBe('components');
+    expect(nodes[0].icon).toBe('📁');
+    expect(nodes[1].label).toBe('index.ts');
+    expect(nodes[1].icon).toBe('📄');
+
+    // Test lazy children loading
+    const childrenFunc = nodes[0].children as () => Promise<any[]>;
+    expect(typeof childrenFunc).toBe('function');
+    const children = await childrenFunc();
+    expect(children.length).toBe(1);
+    expect(children[0].label).toBe('Button.ts');
+  });
+});

package/src/FileSystemHandler.ts

@@ -0,0 +1,60 @@
+import type { TreeNode } from '@vectojs/ui';
+
+export class FileSystemHandler {
+  private fileHandles = new Map<string, FileSystemFileHandle>();
+
+  public async readDirectory(
+    dirHandle: FileSystemDirectoryHandle,
+    pathPrefix = '',
+  ): Promise<TreeNode[]> {
+    const nodes: TreeNode[] = [];
+
+    for await (const entry of (dirHandle as any).values()) {
+      const fullPath = pathPrefix ? `${pathPrefix}/${entry.name}` : entry.name;
+
+      if (entry.kind === 'directory') {
+        nodes.push({
+          id: fullPath,
+          label: entry.name,
+          icon: '📁',
+          children: async () => {
+            return this.readDirectory(entry, fullPath);
+          },
+        } as any);
+      } else if (entry.kind === 'file') {
+        this.fileHandles.set(fullPath, entry);
+        nodes.push({
+          id: fullPath,
+          label: entry.name,
+          icon: '📄',
+        });
+      }
+    }
+
+    // Sort: directories first, then files alphabetically
+    nodes.sort((a, b) => {
+      const aIsDir = a.icon === '📁';
+      const bIsDir = b.icon === '📁';
+      if (aIsDir && !bIsDir) return -1;
+      if (!aIsDir && bIsDir) return 1;
+      return a.label.localeCompare(b.label);
+    });
+
+    return nodes;
+  }
+
+  public getFileHandle(path: string): FileSystemFileHandle | undefined {
+    return this.fileHandles.get(path);
+  }
+
+  public async readFile(fileHandle: FileSystemFileHandle): Promise<string> {
+    const file = await fileHandle.getFile();
+    return await file.text();
+  }
+
+  public async saveFile(fileHandle: FileSystemFileHandle, content: string): Promise<void> {
+    const writable = await (fileHandle as any).createWritable();
+    await writable.write(content);
+    await writable.close();
+  }
+}