@joinezco/codeblock 0.0.8 → 0.0.9

package/dist/panels/toolbar.test.js

@@ -1,3 +1,4 @@
+// @vitest-environment jsdom
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { EditorState } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
@@ -13,19 +14,25 @@ vi.mock('../lsps', () => ({
         'go': 'go'
     }
 }));
-vi.mock('../editor', () => ({
-    CodeblockFacet: {
-        of: vi.fn(),
-    },
-    currentFileField: {
-        init: vi.fn(() => ({ path: null, content: '', language: null, loading: false }))
-    },
-    openFileEffect: {
-        of: vi.fn()
-    }
-}));
+vi.mock('../editor', async () => {
+    const { Facet, StateField, StateEffect } = await import('@codemirror/state');
+    return {
+        CodeblockFacet: Facet.define({
+            combine: (values) => values[0],
+        }),
+        currentFileField: StateField.define({
+            create() {
+                return { path: null, content: '', language: null, loading: false };
+            },
+            update(value) {
+                return value;
+            },
+        }),
+        openFileEffect: StateEffect.define(),
+    };
+});
 describe('Toolbar Panel', () => {
-    let view;
+    const ctx = { view: null };
     let mockFs;
     beforeEach(() => {
         mockFs = {
@@ -49,11 +56,10 @@ describe('Toolbar Panel', () => {
                 currentFileField
             ]
         });
-        view = new EditorView({
+        ctx.view = new EditorView({
             state,
             parent: document.createElement('div')
         });
-        console.log(view);
     });
     describe('Command Results Generation', () => {
         it('should generate create file command for any query', () => {

package/dist/rpc/transport.d.ts

@@ -1,11 +1,2 @@
-import { Transport } from "@open-rpc/client-js/build/transports/Transport";
-import type { JSONRPCRequestData } from "@open-rpc/client-js/src/Request";
-export default class MessagePortTransport extends Transport {
-    port: MessagePort;
-    postMessageID: string;
-    constructor(port: MessagePort);
-    private messageHandler;
-    connect(): Promise<void>;
-    sendData(data: JSONRPCRequestData): Promise<any>;
-    close(): void;
-}
+import type { Transport } from "@codemirror/lsp-client";
+export declare function messagePortTransport(port: MessagePort): Transport;

package/dist/rpc/transport.js

@@ -1,38 +1,22 @@
-import { Transport } from "@open-rpc/client-js/build/transports/Transport";
-import { getNotifications } from "@open-rpc/client-js/src/Request";
-export default class MessagePortTransport extends Transport {
-    port;
-    postMessageID;
-    constructor(port) {
-        super();
-        this.port = port;
-        this.postMessageID = `post-message-transport-${Math.random()}`;
-    }
-    messageHandler = (ev) => {
-        console.debug("LSP <<-", ev.data);
-        if (!ev.data.result && ev.data.method !== 'textDocument/publishDiagnostics') {
-            console.debug(ev.data);
-            // this.port.postMessage({ jsonrpc: '2.0', id: ev.data.id, result: null })
-        }
-        else {
-            this.transportRequestManager.resolveResponse(JSON.stringify(ev.data));
+/// Creates a Transport adapter that bridges a MessagePort (which
+/// sends/receives JSON objects) to lsp-client's Transport interface
+/// (which sends/receives JSON strings).
+export function messagePortTransport(port) {
+    let handlers = [];
+    port.addEventListener("message", (ev) => {
+        let msg = typeof ev.data === "string" ? ev.data : JSON.stringify(ev.data);
+        for (let handler of handlers)
+            handler(msg);
+    });
+    return {
+        send(message) {
+            port.postMessage(JSON.parse(message));
+        },
+        subscribe(handler) {
+            handlers.push(handler);
+        },
+        unsubscribe(handler) {
+            handlers = handlers.filter(h => h !== handler);
         }
     };
-    connect() {
-        return new Promise(async (resolve) => {
-            this.port.addEventListener("message", this.messageHandler);
-            resolve();
-        });
-    }
-    async sendData(data) {
-        console.debug("LSP ->>", data);
-        const prom = this.transportRequestManager.addRequest(data, null);
-        const notifications = getNotifications(data);
-        if (this.port) {
-            this.port.postMessage(data.request);
-            this.transportRequestManager.settlePendingRequest(notifications);
-        }
-        return prom;
-    }
-    close() { }
 }

package/dist/themes/index.js

@@ -1,4 +1,10 @@
 import { EditorView } from '@codemirror/view';
+// Font size helpers — all relative to --cm-font-size so changing the
+// base font size in settings automatically scales the entire UI.
+const FS = 'var(--cm-font-size, 16px)';
+const FS_75 = `calc(${FS} * 0.75)`; // 12px at base 16
+const FS_85 = `calc(${FS} * 0.85)`; // ~14px at base 16
+const FS_875 = `calc(${FS} * 0.875)`; // 14px at base 16
 export const codeblockTheme = EditorView.theme({
     "&:not(.cm-focused)": {
         '& .cm-activeLine, & .cm-activeLineGutter': {
@@ -12,7 +18,7 @@ export const codeblockTheme = EditorView.theme({
         border: 'none',
         background: 'transparent',
         outline: 'none',
-        fontSize: '16px',
+        fontSize: FS,
         color: 'var(--cm-toolbar-color)',
         padding: '0 2px 0 6px',
         width: '100%',
@@ -43,10 +49,9 @@ export const codeblockTheme = EditorView.theme({
         '& > .cm-search-result-icon-container': {
             width: 'var(--cm-gutter-width)',
             '& > .cm-search-result-icon': {
-                fontSize: '16px',
-                textAlign: 'right',
+                fontSize: FS,
+                textAlign: 'center',
                 boxSizing: 'border-box',
-                padding: '0 3px 0 5px',
                 width: 'var(--cm-gutter-lineno-width)',
             }
         },
@@ -69,14 +74,23 @@ export const codeblockTheme = EditorView.theme({
     },
     '.cm-toolbar-state-icon-container': {
         width: 'var(--cm-gutter-width)',
+        display: 'flex',
     },
+    // Nerd Font icon glyphs have visual widths (700-920 units) that far exceed
+    // their monospace advance width (500 units), overflowing to the right.
+    // text-align operates on the advance width, not the visual bounds, so
+    // 'right' misaligns the icon. 'center' partially compensates for the
+    // rightward overflow and visually aligns with gutter line numbers.
     '.cm-toolbar-state-icon': {
-        fontSize: '16px',
-        textAlign: 'right',
-        boxSizing: 'border-box',
-        padding: '0 3px 0 5px',
+        fontSize: FS,
         color: 'var(--cm-foreground)',
-        width: 'var(--cm-gutter-lineno-width)'
+        fontFamily: 'var(--cm-icon-font-family)',
+        textAlign: 'center',
+        boxSizing: 'border-box',
+        width: 'var(--cm-gutter-lineno-width)',
+    },
+    '&': {
+        fontSize: FS,
     },
     '.cm-content': {
         padding: 0,
@@ -86,7 +100,7 @@ export const codeblockTheme = EditorView.theme({
         flexDirection: 'column',
         fontFamily: 'var(--cm-font-family)',
         boxShadow: '-12px 12px 1px rgba(0,0,0,0.3)',
-        fontSize: '1rem',
+        fontSize: FS,
         maxWidth: 'min(calc(100% - 2rem), 62ch)',
         border: '2px solid var(--cm-tooltip-border)',
         overflow: 'auto',
@@ -126,7 +140,7 @@ export const codeblockTheme = EditorView.theme({
     '.documentation > *': {
         margin: 0,
         padding: '0.25rem 6px',
-        fontSize: '1rem',
+        fontSize: FS,
     },
     '.documentation > p > code': {
         backgroundColor: 'var(--cm-comment-bg)',
@@ -154,16 +168,169 @@ export const codeblockTheme = EditorView.theme({
         padding: 0,
         background: 'var(--cm-toolbar-background)',
         fontFamily: 'var(--cm-font-family)',
-        fontSize: '1rem',
+        fontSize: FS,
         listStyleType: 'none',
         width: '100%',
         maxHeight: '25vh',
         overflowY: 'auto',
+        zIndex: 200,
     },
     '.cm-gutters': {
         borderRight: 'none',
     },
     '.cm-panels-top': {
-        borderBottom: 'none'
-    }
+        borderBottom: 'none',
+        zIndex: 301,
+    },
+    // CSS border spinner for file loading indicator
+    '.cm-loading': {
+        display: 'inline-block',
+        width: FS,
+        height: FS,
+        border: '2px solid currentColor',
+        borderTopColor: 'transparent',
+        borderRadius: '50%',
+        boxSizing: 'border-box',
+        animation: 'cm-spin 0.8s linear infinite',
+        marginLeft: '4px'
+    },
+    '@keyframes cm-spin': {
+        '0%': { transform: 'rotate(0deg)' },
+        '100%': { transform: 'rotate(360deg)' },
+    },
+    // Settings cog + LSP log button in toolbar (far right)
+    '.cm-toolbar-settings-cog, .cm-toolbar-lsp-log': {
+        border: 'none',
+        background: 'transparent',
+        color: 'var(--cm-toolbar-color)',
+        cursor: 'pointer',
+        padding: '0 6px',
+        fontSize: FS_875,
+        lineHeight: 'inherit',
+        flexShrink: '0',
+        transition: 'transform 0.25s ease',
+    },
+    '.cm-toolbar-settings-cog.cm-cog-active': {
+        transform: 'rotate(90deg)',
+    },
+    // Settings / log overlay — anchored at top, grows downward
+    '.cm-settings-overlay': {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        overflowY: 'auto',
+        background: 'var(--cm-background)',
+        color: 'var(--cm-toolbar-color)',
+        zIndex: 1000,
+        fontFamily: 'var(--cm-font-family)',
+        fontSize: FS,
+    },
+    '.cm-settings-section': {
+        padding: '8px 6px',
+    },
+    '.cm-settings-section-title': {
+        fontWeight: 'bold',
+        marginBottom: '6px',
+        fontSize: FS_85,
+        opacity: '0.7',
+    },
+    '.cm-settings-row': {
+        display: 'flex',
+        alignItems: 'center',
+        marginBottom: '6px',
+        gap: '8px',
+    },
+    '.cm-settings-row > label': {
+        flex: '0 0 auto',
+        whiteSpace: 'nowrap',
+    },
+    '.cm-settings-control': {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '4px',
+    },
+    // Fixed pixel width so font-size changes don't relayout the slider
+    '.cm-settings-font-size-range': {
+        width: '120px',
+        flexShrink: '0',
+    },
+    '.cm-settings-font-size-input': {
+        background: 'var(--cm-background)',
+        color: 'inherit',
+        border: '1px solid var(--cm-tooltip-border)',
+        borderRadius: '2px',
+        padding: '2px 4px',
+        fontSize: 'inherit',
+        fontFamily: 'var(--cm-font-family)',
+        width: '3em',
+        textAlign: 'right',
+    },
+    '.cm-settings-select': {
+        background: 'var(--cm-background)',
+        color: 'inherit',
+        border: '1px solid var(--cm-tooltip-border)',
+        borderRadius: '2px',
+        padding: '2px 4px',
+        fontSize: 'inherit',
+        fontFamily: 'var(--cm-font-family)',
+    },
+    '.cm-settings-radio-group': {
+        display: 'flex',
+        gap: '4px',
+        alignItems: 'center',
+    },
+    '.cm-settings-radio-group label': {
+        marginRight: '6px',
+    },
+    '.cm-settings-input': {
+        background: 'var(--cm-background)',
+        color: 'inherit',
+        border: '1px solid var(--cm-tooltip-border)',
+        borderRadius: '2px',
+        padding: '2px 6px',
+        fontSize: 'inherit',
+        fontFamily: 'var(--cm-font-family)',
+        flex: 1,
+        minWidth: 0,
+    },
+    '.cm-settings-button': {
+        background: 'var(--cm-background)',
+        color: 'inherit',
+        border: '1px solid var(--cm-tooltip-border)',
+        borderRadius: '2px',
+        padding: '4px 8px',
+        fontSize: 'inherit',
+        cursor: 'pointer',
+    },
+    '.cm-settings-button-disabled': {
+        opacity: '0.5',
+        cursor: 'not-allowed',
+    },
+    // LSP log content
+    '.cm-lsp-log-content': {
+        padding: '8px 12px',
+        fontFamily: 'var(--cm-font-family)',
+        fontSize: FS_75,
+        lineHeight: 1.5,
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-all',
+        overflowY: 'auto',
+        flex: 1,
+    },
+    '.cm-lsp-log-entry': {
+        padding: '1px 0',
+    },
+    '.cm-lsp-log-error': {
+        color: 'var(--cm-diagnostic-error-bg)',
+    },
+    '.cm-lsp-log-warn': {
+        color: '#e5a100',
+    },
+    '.cm-lsp-log-info': {
+        opacity: '0.8',
+    },
+    '.cm-lsp-log-log': {
+        opacity: '0.6',
+    },
 });

package/dist/themes/vscode.js

@@ -113,7 +113,7 @@ const darkModeStyles = {
     "--cm-comment": "#6a9955",
     "--cm-link": "#4078f2",
     "--cm-invalid": "#ff0000",
-    "--cm-search-result-color": "var(--cm-angle-bracket)",
+    "--cm-search-result-color": "var(--cm-foreground)",
     "--cm-search-result-color-hover": "#ffffff",
     "--cm-command-result-color": "var(--cm-search-result-color-hover)",
     "--cm-toolbar-background": "var(--cm-toolbar-bg-dark)",
@@ -129,6 +129,7 @@ export const vscodeStyleMod = new StyleModule({
     ":root, .cm-editor[data-theme='light'], [data-theme='light'] .cm-editor": {
         /* Shared */
         "--cm-font-family": 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
+        "--cm-icon-font-family": '"UbuntuMono NF", var(--cm-font-family)',
         /* Defaults to light theme */
         "--cm-background": "#ffffff",
         "--cm-foreground": "#383a42",
@@ -155,7 +156,7 @@ export const vscodeStyleMod = new StyleModule({
         "--cm-link": "#4078f2",
         "--cm-invalid": "#e45649",
         /* Additional UI colors */
-        "--cm-search-result-color": "#838383",
+        "--cm-search-result-color": "var(--cm-foreground)",
         "--cm-search-result-color-hover": "var(--cm-toolbar-color)",
         "--cm-search-result-bg-hover": "#2490e94f",
         "--cm-search-result-color-selected": "#ffffff",

package/dist/utils/fs.d.ts

@@ -23,7 +23,19 @@ export declare namespace Vfs {
 export declare class VolarFs implements FileSystem {
     #private;
     constructor(fs: VfsInterface);
-    stat(uri: URI): Promise<any>;
-    readDirectory(uri: URI): Promise<[string, FileType][]>;
-    readFile(uri: URI): Promise<string>;
+    /**
+     * Synchronously populate the cache from a pre-resolved map of path → content.
+     * This bypasses async VFS reads entirely, ensuring TypeScript gets lib files
+     * immediately on first program creation.
+     */
+    preloadFromMap(files: Record<string, string>): void;
+    stat(uri: URI): Promise<any> | {
+        type: FileType;
+        ctime: number;
+        mtime: number;
+        size: number;
+    };
+    readDirectory(uri: URI): [string, FileType][] | Promise<[string, FileType][]>;
+    readFile(uri: URI): string | Promise<string>;
+    getCacheSize(): number;
 }

package/dist/utils/fs.js

@@ -58,7 +58,6 @@ export var Vfs;
                     let cur = "/";
                     for (const part of parts) {
                         cur = cur === "/" ? `/${part}` : `${cur}/${part}`;
-                        console.log('creating', { cur, abs });
                         const exists = await this.exists(cur);
                         if (exists)
                             continue;
@@ -257,8 +256,8 @@ export var Vfs;
      *                     for better performance with large files.
      */
     Vfs.worker = async (bufferOrUrl) => {
-        const url = new URL('../workers/fs.worker.js', import.meta.url);
-        const worker = new SharedWorker(url, { type: 'module' });
+        // TODO: fix this for non-Vite consumers
+        const worker = new SharedWorker(new URL('../workers/fs.worker.js', import.meta.url), { type: 'module' });
         worker.port.start();
         const proxy = Comlink.wrap(worker.port);
         let fs;
@@ -277,6 +276,7 @@ export var Vfs;
             // Buffer provided - use traditional mount method
             ({ fs } = await proxy.mount(Comlink.transfer({ buffer: bufferOrUrl, mountPoint: "/" }, [bufferOrUrl])));
         }
+        console.debug('Filesystem worker mounted');
         return Comlink.proxy(Vfs.fromMemfs(fs));
     };
     async function* walk(fs, path) {
@@ -295,16 +295,95 @@ export var Vfs;
 })(Vfs || (Vfs = {}));
 export class VolarFs {
     #fs;
+    #fileCache = new Map();
+    #statCache = new Map();
+    #dirCache = new Map();
     constructor(fs) {
         this.#fs = fs;
     }
-    async stat(uri) {
+    /**
+     * Synchronously populate the cache from a pre-resolved map of path → content.
+     * This bypasses async VFS reads entirely, ensuring TypeScript gets lib files
+     * immediately on first program creation.
+     */
+    preloadFromMap(files) {
+        const now = Date.now();
+        for (const [path, content] of Object.entries(files)) {
+            this.#fileCache.set(path, content);
+            this.#statCache.set(path, {
+                type: FileType.File,
+                ctime: now,
+                mtime: now,
+                size: content.length,
+            });
+        }
+        // Build directory tree from file paths
+        const dirChildren = new Map();
+        for (const path of Object.keys(files)) {
+            let dir = path;
+            let child = '';
+            while (true) {
+                const lastSlash = dir.lastIndexOf('/');
+                if (lastSlash < 0)
+                    break;
+                child = dir.substring(lastSlash + 1);
+                dir = dir.substring(0, lastSlash) || '/';
+                if (!dirChildren.has(dir)) {
+                    dirChildren.set(dir, new Map());
+                }
+                const children = dirChildren.get(dir);
+                // First encounter of this child — it's the file itself
+                if (!children.has(child)) {
+                    // If we've already seen this as a parent dir, it's a Directory
+                    children.set(child, dirChildren.has(dir === '/' ? `/${child}` : `${dir}/${child}`) ? FileType.Directory : FileType.File);
+                }
+                if (dir === '/')
+                    break;
+            }
+        }
+        // Update directory type for children that are actually directories
+        for (const [dirPath, children] of dirChildren) {
+            for (const [name] of children) {
+                const fullPath = dirPath === '/' ? `/${name}` : `${dirPath}/${name}`;
+                if (dirChildren.has(fullPath)) {
+                    children.set(name, FileType.Directory);
+                }
+            }
+        }
+        // Cache directory listings and stats
+        for (const [dirPath, children] of dirChildren) {
+            this.#dirCache.set(dirPath, [...children.entries()]);
+            this.#statCache.set(dirPath, {
+                type: FileType.Directory,
+                ctime: now,
+                mtime: now,
+                size: 0,
+            });
+        }
+    }
+    stat(uri) {
+        const cached = this.#statCache.get(uri.path);
+        if (cached)
+            return cached;
         return this.#fs.stat(uri.path);
     }
-    async readDirectory(uri) {
+    readDirectory(uri) {
+        // Only use dirCache for node_modules subtree (stable, preloaded).
+        // Root and user directories must go through live VFS to pick up new files.
+        if (uri.path.startsWith('/node_modules/')) {
+            const cached = this.#dirCache.get(uri.path);
+            if (cached)
+                return cached;
+        }
         return this.#fs.readDir(uri.path);
     }
-    async readFile(uri) {
+    readFile(uri) {
+        const cached = this.#fileCache.get(uri.path);
+        if (cached !== undefined)
+            return cached;
         return this.#fs.readFile(uri.path);
     }
+    getCacheSize() {
+        return this.#fileCache.size;
+    }
 }

package/dist/utils/lsp.d.ts

@@ -1,26 +1,37 @@
 import { VfsInterface } from "../types";
-import { LanguageServerClient } from "@marimo-team/codemirror-languageserver";
 import { Extension } from "@codemirror/state";
-import { LanguageServer } from "@volar/language-server";
-import { EditorView } from "@codemirror/view";
-export type LSPClientExtension = {
-    client: LanguageServerClient;
-} & Extension;
+export declare const FileChangeType: {
+    readonly Created: 1;
+    readonly Changed: 2;
+    readonly Deleted: 3;
+};
+export interface LspLogEntry {
+    timestamp: number;
+    level: 'error' | 'warn' | 'info' | 'log';
+    message: string;
+}
+export declare namespace LspLog {
+    function entries(): readonly LspLogEntry[];
+    function push(level: LspLogEntry['level'], message: string): void;
+    function clear(): void;
+    function subscribe(fn: () => void): () => void;
+}
 export type ClientOptions = {
-    view: EditorView;
     language: string;
     path: string;
     fs: VfsInterface;
+    libFiles?: Record<string, string>;
 };
-export declare const languageServerFactory: Map<string, (args: {
-    fs: VfsInterface;
-}) => Promise<{
-    server: LanguageServer;
-}>>;
 export declare const lspWorkers: Map<string, SharedWorker>;
 export declare namespace LSP {
-    function worker(language: string, fs: VfsInterface): Promise<{
+    function worker(language: string, fs: VfsInterface, libFiles?: Record<string, string>): Promise<{
         worker: SharedWorker;
-    }>;
-    function client({ fs, language, path, view }: ClientOptions): Promise<LSPClientExtension>;
+        lspPort: MessagePort;
+    } | null>;
+    function client({ fs, language, path, libFiles }: ClientOptions): Promise<Extension | null>;
+    /**
+     * Notify all connected LSP clients that a file was created, changed, or deleted.
+     * This sends workspace/didChangeWatchedFiles so the server re-evaluates the project.
+     */
+    function notifyFileChanged(path: string, type?: number): void;
 }