@joinezco/codeblock 0.0.8 → 0.0.10

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%',
@@ -37,17 +43,20 @@ export const codeblockTheme = EditorView.theme({
         color: 'var(--cm-search-result-color)',
         display: 'flex',
         cursor: 'pointer',
+        lineHeight: 1.4,
         '&.cm-command-result': {
             color: 'var(--cm-command-result-color)'
         },
         '& > .cm-search-result-icon-container': {
             width: 'var(--cm-gutter-width)',
+            minWidth: 'var(--cm-icon-col-width, 2ch)',
             '& > .cm-search-result-icon': {
-                fontSize: '16px',
+                fontSize: FS,
                 textAlign: 'right',
+                paddingRight: 'calc(1ch + 3px)',
                 boxSizing: 'border-box',
-                padding: '0 3px 0 5px',
                 width: 'var(--cm-gutter-lineno-width)',
+                minWidth: 'var(--cm-icon-col-width, 2ch)',
             }
         },
         '&:hover': {
@@ -69,14 +78,24 @@ export const codeblockTheme = EditorView.theme({
     },
     '.cm-toolbar-state-icon-container': {
         width: 'var(--cm-gutter-width)',
+        minWidth: 'var(--cm-icon-col-width, 2ch)',
+        display: 'flex',
     },
+    // Icon right-aligned to match CM's right-aligned line numbers.
+    // padding-right: 3px matches CM's .cm-gutterElement right padding.
     '.cm-toolbar-state-icon': {
-        fontSize: '16px',
+        fontSize: FS,
+        color: 'var(--cm-foreground)',
+        fontFamily: 'var(--cm-icon-font-family)',
+        paddingRight: 'calc(1ch + 3px)',
         textAlign: 'right',
         boxSizing: 'border-box',
-        padding: '0 3px 0 5px',
-        color: 'var(--cm-foreground)',
-        width: 'var(--cm-gutter-lineno-width)'
+        width: 'var(--cm-gutter-lineno-width)',
+        minWidth: 'var(--cm-icon-col-width, 2ch)',
+        transition: 'opacity 0.15s ease',
+    },
+    '&': {
+        fontSize: FS,
     },
     '.cm-content': {
         padding: 0,
@@ -86,7 +105,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 +145,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 +173,210 @@ 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',
+        maxHeight: `calc(${FS} * 1.4 * 10)`,
         overflowY: 'auto',
+        zIndex: 200,
     },
     '.cm-gutters': {
         borderRight: 'none',
     },
     '.cm-panels-top': {
-        borderBottom: 'none'
-    }
+        borderBottom: 'none',
+        zIndex: 301,
+    },
+    // CSS border spinner for file loading indicator.
+    // Rendered as a separate element inside .cm-toolbar-state-icon-container,
+    // so it has fixed dimensions and doesn't inherit gutter-width sizing.
+    '.cm-loading': {
+        display: 'inline-block',
+        width: FS,
+        height: FS,
+        border: '2px solid var(--cm-foreground, currentColor)',
+        borderTopColor: 'transparent',
+        borderRadius: '50%',
+        boxSizing: 'border-box',
+        animation: 'cm-spin 0.8s linear infinite',
+        transition: 'opacity 0.15s ease-out',
+        margin: 'auto',
+    },
+    '@keyframes cm-spin': {
+        '0%': { transform: 'rotate(0deg)' },
+        '100%': { transform: 'rotate(360deg)' },
+    },
+    // LSP log button in toolbar (far right)
+    '.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',
+    },
+    // 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',
+    },
+    // Terminal panel
+    '.cm-terminal-panel': {
+        borderTop: '1px solid var(--cm-tooltip-border)',
+        display: 'flex',
+        flexDirection: 'column',
+        height: '200px',
+        minHeight: '80px',
+    },
+    '.cm-terminal-header': {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '2px 6px',
+        background: 'var(--cm-toolbar-background)',
+        fontSize: FS_85,
+        flexShrink: '0',
+    },
+    '.cm-terminal-title': {
+        opacity: '0.7',
+        fontFamily: 'var(--cm-font-family)',
+    },
+    '.cm-terminal-close': {
+        border: 'none',
+        background: 'transparent',
+        color: 'var(--cm-toolbar-color)',
+        cursor: 'pointer',
+        padding: '2px 4px',
+        fontSize: FS_875,
+        lineHeight: '1',
+    },
+    '.cm-terminal-container': {
+        flex: 1,
+        overflow: 'hidden',
+    },
+    // Auto-hide toolbar: JS manages retract/expand by toggling
+    // .cm-toolbar-retracted on .cm-panels-top (see toolbar.ts).
+    // The transition makes expand/retract feel smooth.
+    '& .cm-panels-top.cm-toolbar-retracted': {
+        maxHeight: '0px',
+        overflow: 'hidden',
+        transition: 'max-height 0.15s ease-out',
+    },
 });

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/types.d.ts

@@ -41,6 +41,11 @@ export interface VfsInterface {
      */
     exists: (path: string) => Promise<boolean>;
     stat: (path: string) => Promise<any | undefined>;
+    /**
+     * Deletes a file
+     * @param path A path to a file
+     */
+    unlink: (path: string) => Promise<void>;
 }
 export type FsMountOptions = {
     mount: (args: {

package/dist/utils/fs.d.ts

@@ -10,6 +10,13 @@ export declare namespace Vfs {
     const fromJswasiFs: (jswasiFs: TopLevelFs) => Promise<VfsInterface>;
     const fromMemfs: (fs: FsApi) => VfsInterface;
     const fromNodelike: (fs: typeof promises) => VfsInterface;
+    /**
+     * Create an FSA (File System Access / OPFS) backed filesystem.
+     * Data persists across page reloads via the browser's Origin Private File System.
+     *
+     * @param name - Unique name for the FSA storage bucket (default: 'codeblock')
+     */
+    const fsa: (name?: string) => Promise<VfsInterface>;
     /**
      * Create a filesystem worker with optional snapshot data.
      *
@@ -23,7 +30,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;
 }