@joinezco/codeblock 0.0.8 → 0.0.10

package/dist/lsps/index.d.ts

@@ -43,6 +43,10 @@ export declare const extOrLanguageToLanguageId: {
     readonly ts: "javascript";
     readonly jsx: "javascript";
     readonly tsx: "javascript";
+    readonly mjs: "javascript";
+    readonly cjs: "javascript";
+    readonly mts: "javascript";
+    readonly cts: "javascript";
     readonly python: "python";
     readonly py: "python";
     readonly ruby: "ruby";
@@ -80,6 +84,7 @@ export declare const extOrLanguageToLanguageId: {
     readonly yaml: "yaml";
     readonly yml: "yaml";
     readonly xml: "xml";
+    readonly svg: "xml";
     readonly markdown: "markdown";
     readonly md: "markdown";
     readonly toml: "toml";

package/dist/lsps/index.js

@@ -30,8 +30,10 @@ const languageSupportMap = {
         return less();
     },
     json: async () => {
-        const { json } = await import('@codemirror/lang-json');
-        return json();
+        // Use JavaScript mode for JSON files — it handles both strict JSON
+        // and lenient JSON-like syntax (unquoted keys, trailing commas, comments)
+        const { javascript } = await import('@codemirror/lang-javascript');
+        return javascript();
     },
     xml: async () => {
         const { xml } = await import('@codemirror/lang-xml');
@@ -147,6 +149,10 @@ export const extOrLanguageToLanguageId = {
     ts: 'javascript',
     jsx: 'javascript',
     tsx: 'javascript',
+    mjs: 'javascript',
+    cjs: 'javascript',
+    mts: 'javascript',
+    cts: 'javascript',
     python: 'python',
     py: 'python',
     ruby: 'ruby',
@@ -184,6 +190,7 @@ export const extOrLanguageToLanguageId = {
     yaml: 'yaml',
     yml: 'yaml',
     xml: 'xml',
+    svg: 'xml',
     markdown: 'markdown',
     md: 'markdown',
     toml: 'toml',

package/dist/lsps/typescript.d.ts

@@ -3,8 +3,10 @@ import { Connection } from '@volar/language-server/browser';
 export type CreateTypescriptEnvironmentArgs = {
     connection: Connection;
     fs: VfsInterface;
+    /** Pre-resolved lib file contents keyed by path, for synchronous cache population */
+    libFiles?: Record<string, string>;
 };
-export declare const createLanguageServer: ({ connection, fs }: CreateTypescriptEnvironmentArgs) => Promise<{
+export declare const createLanguageServer: ({ connection, fs, libFiles }: CreateTypescriptEnvironmentArgs) => Promise<{
     initializeParams: import("vscode-languageserver-protocol").InitializeParams;
     project: import("@volar/language-server").LanguageServerProject;
     languageServicePlugins: import("@volar/language-service").LanguageServicePlugin<any>[];

package/dist/lsps/typescript.js

@@ -10,7 +10,7 @@ function getLanguageServicePlugins(_ts) {
     ];
     return plugins;
 }
-export const createLanguageServer = async ({ connection, fs }) => {
+export const createLanguageServer = async ({ connection, fs, libFiles }) => {
     const server = createServerBase(connection, {
         timer: {
             setImmediate: (callback, ...args) => {
@@ -18,31 +18,22 @@ export const createLanguageServer = async ({ connection, fs }) => {
             },
         },
     });
-    server.fileSystem.install('file', new VolarFs(fs));
-    server.onInitialize((params) => {
-        console.debug('ts server on init', params);
-    });
-    connection.onShutdown(() => {
-        console.debug('ts server shutdown');
-    });
+    const volarFs = new VolarFs(fs);
+    if (libFiles) {
+        volarFs.preloadFromMap(libFiles);
+    }
+    server.fileSystem.install('file', volarFs);
     connection.onInitialize(async (params) => {
         const languageServicePlugins = getLanguageServicePlugins(ts);
         return server.initialize(params, createTypeScriptProject(
         // @ts-ignore
-        ts, undefined, async () => ({
-            // rootUri: params.rootUri,
+        ts, undefined, async (_ctx) => ({
             languagePlugins: []
         })), languageServicePlugins);
     });
     connection.onInitialized(() => {
         server.initialized();
-        const extensions = [
-            '.tsx',
-            '.jsx',
-            '.js',
-            '.ts'
-        ];
-        server.fileWatcher.watchFiles([`**/*.{${extensions.join(',')}}`]);
+        server.fileWatcher.watchFiles(['**/*.{tsx,jsx,js,ts,json}']);
     });
     return server;
 };

package/dist/panels/settings.d.ts

@@ -0,0 +1,22 @@
+import { EditorView } from "@codemirror/view";
+import { Facet, StateField } from "@codemirror/state";
+export interface EditorSettings {
+    theme: 'light' | 'dark' | 'system';
+    fontSize: number;
+    fontFamily: string;
+    autosave: boolean;
+    lineWrap: boolean;
+    lspLogEnabled: boolean;
+    agentUrl: string;
+    terminalEnabled: boolean;
+    maxVisibleLines: number;
+    showLineNumbers: boolean;
+    showFoldGutter: boolean;
+    autoHideToolbar: boolean;
+}
+/** Facet carrying initial settings so settingsField.create() can read them without circular imports. */
+export declare const InitialSettingsFacet: Facet<Partial<EditorSettings>, Partial<EditorSettings>>;
+export declare const updateSettingsEffect: import("@codemirror/state").StateEffectType<Partial<EditorSettings>>;
+export declare const settingsField: StateField<EditorSettings>;
+export declare function resolveThemeDark(theme: EditorSettings['theme']): boolean;
+export declare function createSettingsOverlay(view: EditorView): HTMLElement;

package/dist/panels/settings.js

@@ -0,0 +1,267 @@
+import { EditorView } from "@codemirror/view";
+import { Facet, StateEffect, StateField } from "@codemirror/state";
+import { setThemeEffect, lineWrappingCompartment } from "../editor";
+const defaultSettings = {
+    theme: 'system',
+    fontSize: 16,
+    fontFamily: '',
+    autosave: true,
+    lineWrap: false,
+    lspLogEnabled: false,
+    agentUrl: '',
+    terminalEnabled: false,
+    maxVisibleLines: 0,
+    showLineNumbers: true,
+    showFoldGutter: true,
+    autoHideToolbar: false,
+};
+/** Facet carrying initial settings so settingsField.create() can read them without circular imports. */
+export const InitialSettingsFacet = Facet.define({
+    combine: (values) => Object.assign({}, ...values),
+});
+export const updateSettingsEffect = StateEffect.define();
+export const settingsField = StateField.define({
+    create(state) {
+        const initial = state.facet(InitialSettingsFacet);
+        return { ...defaultSettings, ...initial };
+    },
+    update(value, tr) {
+        for (const e of tr.effects) {
+            if (e.is(updateSettingsEffect)) {
+                return { ...value, ...e.value };
+            }
+        }
+        return value;
+    }
+});
+export function resolveThemeDark(theme) {
+    if (theme === 'system') {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+    return theme === 'dark';
+}
+const themeIcons = {
+    light: '☀️',
+    dark: '🌙',
+    system: '🌓',
+};
+// Settings overlay component (no header — toolbar shows "settings.json" and cog becomes ✕)
+export function createSettingsOverlay(view) {
+    const settings = view.state.field(settingsField);
+    const overlay = document.createElement("div");
+    overlay.className = "cm-settings-overlay";
+    // Theme section
+    const themeSection = document.createElement("div");
+    themeSection.className = "cm-settings-section";
+    const themeTitle = document.createElement("div");
+    themeTitle.className = "cm-settings-section-title";
+    themeTitle.textContent = "Theme";
+    themeSection.appendChild(themeTitle);
+    // Font size
+    const fontSizeRow = document.createElement("div");
+    fontSizeRow.className = "cm-settings-row";
+    const fontSizeLabel = document.createElement("label");
+    fontSizeLabel.textContent = "Font size";
+    const fontSizeControl = document.createElement("div");
+    fontSizeControl.className = "cm-settings-control";
+    const fontSizeRange = document.createElement("input");
+    fontSizeRange.type = "range";
+    fontSizeRange.className = "cm-settings-font-size-range";
+    fontSizeRange.min = "8";
+    fontSizeRange.max = "48";
+    fontSizeRange.step = "1";
+    fontSizeRange.value = String(settings.fontSize);
+    const fontSizeInput = document.createElement("input");
+    fontSizeInput.type = "number";
+    fontSizeInput.className = "cm-settings-font-size-input";
+    fontSizeInput.min = "1";
+    fontSizeInput.max = "128";
+    fontSizeInput.value = String(settings.fontSize);
+    const fontSizePx = document.createElement("span");
+    fontSizePx.textContent = "px";
+    // Use 'change' on the range (fires on mouseup) to avoid feedback loop:
+    // dragging changes font size → overlay relayouts → slider thumb shifts
+    // relative to pointer → triggers another input event → runaway resizing.
+    fontSizeRange.addEventListener("change", () => {
+        const size = Number(fontSizeRange.value);
+        fontSizeInput.value = String(size);
+        view.dispatch({ effects: updateSettingsEffect.of({ fontSize: size }) });
+    });
+    fontSizeInput.addEventListener("input", () => {
+        let size = Number(fontSizeInput.value);
+        if (isNaN(size) || size < 1)
+            return;
+        size = Math.min(128, size);
+        fontSizeRange.value = String(size);
+        view.dispatch({ effects: updateSettingsEffect.of({ fontSize: size }) });
+    });
+    fontSizeControl.appendChild(fontSizeRange);
+    fontSizeControl.appendChild(fontSizeInput);
+    fontSizeControl.appendChild(fontSizePx);
+    fontSizeRow.appendChild(fontSizeLabel);
+    fontSizeRow.appendChild(fontSizeControl);
+    themeSection.appendChild(fontSizeRow);
+    // Font family
+    const fontFamilyRow = document.createElement("div");
+    fontFamilyRow.className = "cm-settings-row";
+    const fontFamilyLabel = document.createElement("label");
+    fontFamilyLabel.textContent = "Font family";
+    const fontFamilySelect = document.createElement("select");
+    fontFamilySelect.className = "cm-settings-select";
+    const fontOptions = [
+        { label: "System default", value: "" },
+        { label: "UbuntuMono Nerd Font", value: '"UbuntuMono NF", monospace' },
+    ];
+    for (const opt of fontOptions) {
+        const option = document.createElement("option");
+        option.value = opt.value;
+        option.textContent = opt.label;
+        if (settings.fontFamily === opt.value)
+            option.selected = true;
+        fontFamilySelect.appendChild(option);
+    }
+    fontFamilySelect.addEventListener("change", () => {
+        view.dispatch({ effects: updateSettingsEffect.of({ fontFamily: fontFamilySelect.value }) });
+    });
+    fontFamilyRow.appendChild(fontFamilyLabel);
+    fontFamilyRow.appendChild(fontFamilySelect);
+    themeSection.appendChild(fontFamilyRow);
+    // Color theme radio — with emoji icons
+    const colorThemeRow = document.createElement("div");
+    colorThemeRow.className = "cm-settings-row";
+    const colorThemeLabel = document.createElement("label");
+    colorThemeLabel.textContent = "Color theme";
+    const radioGroup = document.createElement("div");
+    radioGroup.className = "cm-settings-radio-group";
+    for (const t of ['light', 'dark', 'system']) {
+        const radio = document.createElement("input");
+        radio.type = "radio";
+        radio.name = "cm-color-theme";
+        radio.value = t;
+        radio.id = `cm-theme-${t}`;
+        if (settings.theme === t)
+            radio.checked = true;
+        radio.addEventListener("change", () => {
+            if (radio.checked) {
+                view.dispatch({
+                    effects: [
+                        updateSettingsEffect.of({ theme: t }),
+                        setThemeEffect.of({ dark: resolveThemeDark(t) }),
+                    ]
+                });
+            }
+        });
+        const radioLabel = document.createElement("label");
+        radioLabel.htmlFor = `cm-theme-${t}`;
+        radioLabel.textContent = themeIcons[t];
+        radioLabel.title = t.charAt(0).toUpperCase() + t.slice(1);
+        radioGroup.appendChild(radio);
+        radioGroup.appendChild(radioLabel);
+    }
+    colorThemeRow.appendChild(colorThemeLabel);
+    colorThemeRow.appendChild(radioGroup);
+    themeSection.appendChild(colorThemeRow);
+    overlay.appendChild(themeSection);
+    // Editor section
+    const editorSection = document.createElement("div");
+    editorSection.className = "cm-settings-section";
+    const editorTitle = document.createElement("div");
+    editorTitle.className = "cm-settings-section-title";
+    editorTitle.textContent = "Editor";
+    editorSection.appendChild(editorTitle);
+    const autosaveRow = document.createElement("div");
+    autosaveRow.className = "cm-settings-row";
+    const autosaveLabel = document.createElement("label");
+    autosaveLabel.textContent = "Autosave";
+    autosaveLabel.htmlFor = "cm-autosave";
+    const autosaveCheckbox = document.createElement("input");
+    autosaveCheckbox.type = "checkbox";
+    autosaveCheckbox.id = "cm-autosave";
+    autosaveCheckbox.checked = settings.autosave;
+    autosaveCheckbox.addEventListener("change", () => {
+        view.dispatch({ effects: updateSettingsEffect.of({ autosave: autosaveCheckbox.checked }) });
+    });
+    autosaveRow.appendChild(autosaveLabel);
+    autosaveRow.appendChild(autosaveCheckbox);
+    editorSection.appendChild(autosaveRow);
+    // Line wrap toggle
+    const lineWrapRow = document.createElement("div");
+    lineWrapRow.className = "cm-settings-row";
+    const lineWrapLabel = document.createElement("label");
+    lineWrapLabel.textContent = "Line wrap";
+    lineWrapLabel.htmlFor = "cm-line-wrap";
+    const lineWrapCheckbox = document.createElement("input");
+    lineWrapCheckbox.type = "checkbox";
+    lineWrapCheckbox.id = "cm-line-wrap";
+    lineWrapCheckbox.checked = settings.lineWrap;
+    lineWrapCheckbox.addEventListener("change", () => {
+        view.dispatch({
+            effects: [
+                updateSettingsEffect.of({ lineWrap: lineWrapCheckbox.checked }),
+                lineWrappingCompartment.reconfigure(lineWrapCheckbox.checked ? EditorView.lineWrapping : []),
+            ]
+        });
+    });
+    lineWrapRow.appendChild(lineWrapLabel);
+    lineWrapRow.appendChild(lineWrapCheckbox);
+    editorSection.appendChild(lineWrapRow);
+    // LSP log toggle
+    const lspLogRow = document.createElement("div");
+    lspLogRow.className = "cm-settings-row";
+    const lspLogLabel = document.createElement("label");
+    lspLogLabel.textContent = "LSP server log";
+    lspLogLabel.htmlFor = "cm-lsp-log";
+    const lspLogCheckbox = document.createElement("input");
+    lspLogCheckbox.type = "checkbox";
+    lspLogCheckbox.id = "cm-lsp-log";
+    lspLogCheckbox.checked = settings.lspLogEnabled;
+    lspLogCheckbox.addEventListener("change", () => {
+        view.dispatch({ effects: updateSettingsEffect.of({ lspLogEnabled: lspLogCheckbox.checked }) });
+    });
+    lspLogRow.appendChild(lspLogLabel);
+    lspLogRow.appendChild(lspLogCheckbox);
+    editorSection.appendChild(lspLogRow);
+    overlay.appendChild(editorSection);
+    // AI Agent section
+    const aiSection = document.createElement("div");
+    aiSection.className = "cm-settings-section";
+    const aiTitle = document.createElement("div");
+    aiTitle.className = "cm-settings-section-title";
+    aiTitle.textContent = "AI Agent";
+    aiSection.appendChild(aiTitle);
+    const agentRow = document.createElement("div");
+    agentRow.className = "cm-settings-row";
+    const agentLabel = document.createElement("label");
+    agentLabel.textContent = "Agent URL";
+    const agentInput = document.createElement("input");
+    agentInput.type = "text";
+    agentInput.className = "cm-settings-input";
+    agentInput.placeholder = "OpenAPI-compatible endpoint";
+    agentInput.value = settings.agentUrl;
+    agentInput.addEventListener("change", () => {
+        view.dispatch({ effects: updateSettingsEffect.of({ agentUrl: agentInput.value }) });
+    });
+    agentRow.appendChild(agentLabel);
+    agentRow.appendChild(agentInput);
+    aiSection.appendChild(agentRow);
+    // TODO: integrate via @marimo-team/codemirror-ai
+    overlay.appendChild(aiSection);
+    // Terminal section
+    const termSection = document.createElement("div");
+    termSection.className = "cm-settings-section";
+    const termTitle = document.createElement("div");
+    termTitle.className = "cm-settings-section-title";
+    termTitle.textContent = "Terminal";
+    termSection.appendChild(termTitle);
+    const termRow = document.createElement("div");
+    termRow.className = "cm-settings-row";
+    const termBtn = document.createElement("button");
+    termBtn.className = "cm-settings-button cm-settings-button-disabled";
+    termBtn.textContent = "Terminal (coming soon)";
+    termBtn.disabled = true;
+    termRow.appendChild(termBtn);
+    termSection.appendChild(termRow);
+    // TODO: ghostty-web + wanix integration
+    overlay.appendChild(termSection);
+    return overlay;
+}

package/dist/panels/terminal.d.ts

@@ -0,0 +1,3 @@
+import { EditorView } from "@codemirror/view";
+/** Open (or toggle) the terminal panel on the given editor view. */
+export declare function openTerminal(view: EditorView): Promise<void>;

package/dist/panels/terminal.js

@@ -0,0 +1,76 @@
+import { showPanel } from "@codemirror/view";
+import { terminalCompartment } from "../editor";
+import { settingsField, resolveThemeDark } from "./settings";
+let ghosttyModule = null;
+async function ensureGhostty() {
+    if (ghosttyModule)
+        return ghosttyModule;
+    // Dynamic import — ghostty-web is loaded only when the terminal is opened.
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    const mod = await import('ghostty-web');
+    await mod.init();
+    ghosttyModule = mod;
+    return mod;
+}
+const CLOSE_ICON = '\uf00d'; // nf-fa-close
+function createTerminalPanel(view) {
+    const dom = document.createElement("div");
+    dom.className = "cm-terminal-panel";
+    // Header bar with close button
+    const header = document.createElement("div");
+    header.className = "cm-terminal-header";
+    const title = document.createElement("span");
+    title.className = "cm-terminal-title";
+    title.textContent = "Terminal";
+    header.appendChild(title);
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "cm-terminal-close";
+    closeBtn.style.fontFamily = 'var(--cm-icon-font-family)';
+    closeBtn.textContent = CLOSE_ICON;
+    closeBtn.title = "Close terminal";
+    closeBtn.addEventListener("click", () => {
+        view.dispatch({
+            effects: terminalCompartment.reconfigure([]),
+        });
+    });
+    header.appendChild(closeBtn);
+    dom.appendChild(header);
+    // Terminal container
+    const container = document.createElement("div");
+    container.className = "cm-terminal-container";
+    dom.appendChild(container);
+    let terminal = null;
+    // Lazy-load ghostty-web and mount
+    ensureGhostty().then(({ Terminal }) => {
+        if (!dom.isConnected)
+            return;
+        const settings = view.state.field(settingsField);
+        const dark = resolveThemeDark(settings.theme);
+        terminal = new Terminal({
+            fontSize: settings.fontSize,
+            theme: dark
+                ? { background: '#1e1e1e', foreground: '#d4d4d4' }
+                : { background: '#ffffff', foreground: '#1e1e1e' },
+        });
+        terminal.open(container);
+        terminal.write('\x1b[1;32m$\x1b[0m Terminal ready (no backend connected)\r\n');
+    }).catch((err) => {
+        container.textContent = `Failed to load terminal: ${err.message}`;
+        container.style.padding = '8px';
+        container.style.color = '#f44';
+    });
+    return {
+        dom,
+        top: false,
+        destroy() {
+            terminal?.dispose?.();
+            terminal = null;
+        },
+    };
+}
+/** Open (or toggle) the terminal panel on the given editor view. */
+export async function openTerminal(view) {
+    view.dispatch({
+        effects: terminalCompartment.reconfigure(showPanel.of(createTerminalPanel)),
+    });
+}

package/dist/panels/toolbar.d.ts

@@ -3,18 +3,68 @@ import { StateField } from "@codemirror/state";
 import { HighlightedSearch } from "../utils/search";
 export interface CommandResult {
     id: string;
-    type: 'create-file' | 'rename-file';
+    type: 'create-file' | 'save-as' | 'rename-file' | 'import-local-files' | 'import-local-folder' | 'open-file' | 'settings' | 'open-terminal' | 'file-action';
     icon: string;
+    iconColor?: string;
     query: string;
     requiresInput?: boolean;
+    /** For type 'file-action': callback executed when the command is selected. */
+    action?: (view: EditorView) => void;
 }
-export type SearchResult = HighlightedSearch | CommandResult;
+export interface FileActionEntry {
+    /** File extensions this command applies to (e.g. ['svg']) */
+    extensions: string[];
+    /** Display label */
+    label: string;
+    /** Nerd Font icon glyph */
+    icon: string;
+    /** Callback when selected */
+    action: (view: EditorView) => void;
+}
+/** Register a command that appears when files with matching extensions are open. */
+export declare function registerFileAction(entry: FileActionEntry): void;
+export interface SettingsEntry {
+    id: string;
+    settingKey: string;
+    type: 'settings-toggle' | 'settings-cycle' | 'settings-input';
+    icon: string;
+    currentValue: string;
+}
+export interface BrowseEntry {
+    id: string;
+    type: 'browse-directory' | 'browse-file' | 'browse-parent';
+    icon: string;
+    iconColor?: string;
+    fullPath: string;
+}
+export type SearchResult = HighlightedSearch | CommandResult | BrowseEntry | SettingsEntry;
 export interface NamingMode {
     active: boolean;
-    type: 'create-file' | 'rename-file';
+    type: 'create-file' | 'save-as' | 'rename-file';
     originalQuery: string;
     languageExtension?: string;
 }
+export interface BrowseMode {
+    active: boolean;
+    currentPath: string;
+    filter: string;
+}
+export interface SettingsMode {
+    active: boolean;
+    filter: string;
+    editing: string | null;
+}
+export interface DeleteMode {
+    active: boolean;
+    filePath: string;
+}
+export interface OverwriteMode {
+    active: boolean;
+    filePath: string;
+    action: 'save-as' | 'create-file' | 'rename';
+    /** For rename: the old path to delete after overwrite */
+    oldPath?: string;
+}
 export declare const setSearchResults: import("@codemirror/state").StateEffectType<SearchResult[]>;
 export declare const searchResultsField: StateField<SearchResult[]>;
 export declare const toolbarPanel: (view: EditorView) => Panel;