@joinezco/codeblock 0.0.9 → 0.0.10

package/dist/editor.d.ts

@@ -5,7 +5,22 @@ import { VfsInterface } from "./types";
 import { ExtensionOrLanguage } from "./lsps";
 import { SearchIndex } from "./utils/search";
 import { TypescriptDefaultsConfig } from "./utils/typescript-defaults";
+import type { EditorSettings } from "./panels/settings";
 export type { CommandResult, BrowseEntry } from "./panels/toolbar";
+declare class FileChangeBus {
+    private listeners;
+    subscribe(path: string, view: EditorView, callback: (content: string) => void): () => void;
+    /** Notify all listeners for `path` except the source view. */
+    notify(path: string, content: string, sourceView: EditorView): void;
+}
+export declare const fileChangeBus: FileChangeBus;
+type SettingsChangeCallback = (settings: Partial<import("./panels/settings").EditorSettings>) => void;
+declare class SettingsChangeBus {
+    private listeners;
+    subscribe(view: EditorView, callback: SettingsChangeCallback): () => void;
+    notify(settings: Partial<import("./panels/settings").EditorSettings>, sourceView: EditorView): void;
+}
+export declare const settingsChangeBus: SettingsChangeBus;
 export type CodeblockConfig = {
     fs: VfsInterface;
     cwd?: string;
@@ -15,6 +30,7 @@ export type CodeblockConfig = {
     index?: SearchIndex;
     language?: ExtensionOrLanguage;
     dark?: boolean;
+    settings?: Partial<EditorSettings>;
     typescript?: TypescriptDefaultsConfig & {
         /** Resolves a TypeScript lib name (e.g. "es5") to its `.d.ts` file content */
         resolveLib: (name: string) => Promise<string>;
@@ -31,8 +47,12 @@ export declare const languageServerCompartment: Compartment;
 export declare const indentationCompartment: Compartment;
 export declare const readOnlyCompartment: Compartment;
 export declare const lineWrappingCompartment: Compartment;
+export declare const terminalCompartment: Compartment;
+export declare const lineNumbersCompartment: Compartment;
+export declare const foldGutterCompartment: Compartment;
 export declare const openFileEffect: import("@codemirror/state").StateEffectType<{
     path: string;
+    skipSave?: boolean;
 }>;
 export declare const fileLoadedEffect: import("@codemirror/state").StateEffectType<{
     path: string;
@@ -42,6 +62,7 @@ export declare const fileLoadedEffect: import("@codemirror/state").StateEffectTy
 export declare const setThemeEffect: import("@codemirror/state").StateEffectType<{
     dark: boolean;
 }>;
+export declare const toggleSvgPreviewEffect: import("@codemirror/state").StateEffectType<void>;
 export declare const currentFileField: StateField<{
     path: string | null;
     content: string;
@@ -49,11 +70,11 @@ export declare const currentFileField: StateField<{
     loading: boolean;
 }>;
 export declare const renderMarkdownCode: (code: any, parser: any, highlighter: HighlightStyle) => string;
-export declare const codeblock: ({ content, fs, cwd, filepath, language, toolbar, index, typescript }: CodeblockConfig) => (Extension | StateField<import(".").EditorSettings> | StateField<import("./panels/toolbar").SearchResult[]> | StateField<{
+export declare const codeblock: ({ content, fs, cwd, filepath, language, toolbar, index, dark, settings, typescript }: CodeblockConfig) => (Extension | StateField<EditorSettings> | StateField<import("./panels/toolbar").SearchResult[]> | StateField<{
     path: string | null;
     content: string;
     language: ExtensionOrLanguage | null;
     loading: boolean;
 }>)[];
 export declare const basicSetup: Extension;
-export declare function createCodeblock({ parent, fs, filepath, language, content, cwd, toolbar, index, dark, typescript }: CreateCodeblockArgs): EditorView;
+export declare function createCodeblock({ parent, fs, filepath, language, content, cwd, toolbar, index, dark, settings, typescript }: CreateCodeblockArgs): EditorView;

package/dist/editor.js

@@ -9,14 +9,59 @@ import { completionKeymap, closeBrackets, closeBracketsKeymap } from "@codemirro
 import { bracketMatching, defaultHighlightStyle, foldGutter, foldKeymap, indentOnInput, indentUnit, syntaxHighlighting } from "@codemirror/language";
 import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
 import { extOrLanguageToLanguageId, getLanguageSupport } from "./lsps";
-import { lintKeymap } from "@codemirror/lint";
+import { lintKeymap, setDiagnostics } from "@codemirror/lint";
 import { highlightCode } from "@lezer/highlight";
 import { LSP, FileChangeType } from "./utils/lsp";
 import { prefillTypescriptDefaults, getCachedLibFiles } from "./utils/typescript-defaults";
-import { toolbarPanel, searchResultsField } from "./panels/toolbar";
-import { settingsField } from "./panels/footer";
+import { toolbarPanel, searchResultsField, registerFileAction } from "./panels/toolbar";
+import { settingsField, updateSettingsEffect, resolveThemeDark, InitialSettingsFacet } from "./panels/settings";
 import { StyleModule } from "style-mod";
 import { dirname } from "path-browserify";
+class FileChangeBus {
+    listeners = new Map();
+    subscribe(path, view, callback) {
+        let set = this.listeners.get(path);
+        if (!set) {
+            set = new Set();
+            this.listeners.set(path, set);
+        }
+        const listener = { view, callback };
+        set.add(listener);
+        return () => {
+            set.delete(listener);
+            if (set.size === 0)
+                this.listeners.delete(path);
+        };
+    }
+    /** Notify all listeners for `path` except the source view. */
+    notify(path, content, sourceView) {
+        const set = this.listeners.get(path);
+        if (!set)
+            return;
+        for (const listener of set) {
+            if (listener.view !== sourceView) {
+                listener.callback(content);
+            }
+        }
+    }
+}
+export const fileChangeBus = new FileChangeBus();
+class SettingsChangeBus {
+    listeners = new Set();
+    subscribe(view, callback) {
+        const entry = { view, callback };
+        this.listeners.add(entry);
+        return () => this.listeners.delete(entry);
+    }
+    notify(settings, sourceView) {
+        for (const entry of this.listeners) {
+            if (entry.view !== sourceView) {
+                entry.callback(settings);
+            }
+        }
+    }
+}
+export const settingsChangeBus = new SettingsChangeBus();
 export const CodeblockFacet = Facet.define({
     combine: (values) => values[0]
 });
@@ -27,11 +72,16 @@ export const languageServerCompartment = new Compartment();
 export const indentationCompartment = new Compartment();
 export const readOnlyCompartment = new Compartment();
 export const lineWrappingCompartment = new Compartment();
+export const terminalCompartment = new Compartment();
+export const lineNumbersCompartment = new Compartment();
+export const foldGutterCompartment = new Compartment();
 // Effects + Fields for async file handling
 export const openFileEffect = StateEffect.define();
 export const fileLoadedEffect = StateEffect.define();
 // Light mode/dark mode theme toggle
 export const setThemeEffect = StateEffect.define();
+// SVG preview toggle
+export const toggleSvgPreviewEffect = StateEffect.define();
 // Holds the current file lifecycle
 export const currentFileField = StateField.define({
     create(state) {
@@ -97,23 +147,36 @@ export const renderMarkdownCode = (code, parser, highlighter) => {
     return result.getHTML();
 };
 // Main codeblock factory
-export const codeblock = ({ content, fs, cwd, filepath, language, toolbar = true, index, typescript }) => [
-    configCompartment.of(CodeblockFacet.of({ content, fs, filepath, cwd, language, toolbar, index, typescript })),
-    currentFileField,
-    languageSupportCompartment.of([]),
-    languageServerCompartment.of([]),
-    indentationCompartment.of(indentUnit.of("    ")),
-    readOnlyCompartment.of(EditorState.readOnly.of(false)),
-    lineWrappingCompartment.of([]),
-    tooltips({ position: "fixed" }),
-    showPanel.of(toolbar ? toolbarPanel : null),
-    settingsField,
-    codeblockTheme,
-    codeblockView,
-    keymap.of(navigationKeymap.concat([indentWithTab])),
-    vscodeLightDark,
-    searchResultsField,
-];
+export const codeblock = ({ content, fs, cwd, filepath, language, toolbar = true, index, dark, settings, typescript }) => {
+    // Merge dark flag into initial settings for backward compat
+    const resolvedSettings = { ...settings };
+    if (dark !== undefined && !('theme' in resolvedSettings)) {
+        resolvedSettings.theme = dark ? 'dark' : 'light';
+    }
+    const showLineNums = resolvedSettings.showLineNumbers !== false; // default true
+    const showFold = resolvedSettings.showFoldGutter !== false; // default true
+    return [
+        configCompartment.of(CodeblockFacet.of({ content, fs, filepath, cwd, language, toolbar, index, dark, settings, typescript })),
+        InitialSettingsFacet.of(resolvedSettings),
+        currentFileField,
+        languageSupportCompartment.of([]),
+        languageServerCompartment.of([]),
+        indentationCompartment.of(indentUnit.of("    ")),
+        readOnlyCompartment.of(EditorState.readOnly.of(false)),
+        lineWrappingCompartment.of([]),
+        terminalCompartment.of([]),
+        lineNumbersCompartment.of(showLineNums ? [lineNumbers(), highlightActiveLineGutter()] : []),
+        foldGutterCompartment.of(showFold ? [foldGutter()] : []),
+        tooltips({ position: "fixed" }),
+        showPanel.of(toolbar ? toolbarPanel : null),
+        settingsField,
+        codeblockTheme,
+        codeblockView,
+        keymap.of(navigationKeymap.concat([indentWithTab])),
+        vscodeLightDark,
+        searchResultsField,
+    ];
+};
 // ViewPlugin reacts to field state & effects, with microtask scheduling to avoid nested updates
 // Inject @font-face for Nerd Font icons (idempotent)
 let nerdFontInjected = false;
@@ -135,23 +198,184 @@ const codeblockView = ViewPlugin.define((view) => {
     StyleModule.mount(document, vscodeStyleMod);
     injectNerdFontFace();
     let { fs } = view.state.facet(CodeblockFacet);
+    // Flag to suppress save when receiving external file updates
+    let receivingExternalUpdate = false;
+    // Flag to suppress re-broadcast when receiving settings from another editor
+    let receivingExternalSettings = false;
+    // Subscription cleanup for file change notifications
+    let unsubscribeFileChanges = null;
+    // Subscribe to settings changes from other editors
+    const unsubscribeSettings = settingsChangeBus.subscribe(view, (partial) => {
+        receivingExternalSettings = true;
+        try {
+            const effects = [updateSettingsEffect.of(partial)];
+            if ('theme' in partial && partial.theme) {
+                effects.push(setThemeEffect.of({ dark: resolveThemeDark(partial.theme) }));
+            }
+            if ('lineWrap' in partial) {
+                effects.push(lineWrappingCompartment.reconfigure(partial.lineWrap ? EditorView.lineWrapping : []));
+            }
+            if ('showLineNumbers' in partial) {
+                effects.push(lineNumbersCompartment.reconfigure(partial.showLineNumbers ? [lineNumbers(), highlightActiveLineGutter()] : []));
+            }
+            if ('showFoldGutter' in partial) {
+                effects.push(foldGutterCompartment.reconfigure(partial.showFoldGutter ? [foldGutter()] : []));
+            }
+            // autoHideToolbar is handled by the toolbar panel's JS event handlers,
+            // not CSS classes — the updateSettingsEffect propagation is sufficient.
+            view.dispatch({ effects });
+        }
+        finally {
+            receivingExternalSettings = false;
+        }
+    });
     // Debounced save
     const save = debounce(async () => {
         const fileState = view.state.field(currentFileField);
         if (fileState.path) {
+            const content = view.state.doc.toString();
             // confirm parent exists
             const parent = dirname(fileState.path);
             if (parent) {
                 await fs.mkdir(parent, { recursive: true }).catch(console.error);
             }
-            await fs.writeFile(fileState.path, view.state.doc.toString()).catch(console.error);
+            await fs.writeFile(fileState.path, content).catch(console.error);
             LSP.notifyFileChanged(fileState.path, FileChangeType.Changed);
+            // Notify other views of the same file
+            fileChangeBus.notify(fileState.path, content, view);
         }
     }, 500);
+    // Subscribe to external file changes for the given path
+    function subscribeToFileChanges(path) {
+        // Unsubscribe from previous file
+        if (unsubscribeFileChanges) {
+            unsubscribeFileChanges();
+            unsubscribeFileChanges = null;
+        }
+        unsubscribeFileChanges = fileChangeBus.subscribe(path, view, (newContent) => {
+            const currentContent = view.state.doc.toString();
+            if (newContent === currentContent)
+                return; // No change
+            receivingExternalUpdate = true;
+            try {
+                view.dispatch({
+                    changes: { from: 0, to: view.state.doc.length, insert: newContent }
+                });
+            }
+            finally {
+                receivingExternalUpdate = false;
+            }
+        });
+    }
     // Guard to prevent duplicate opens for same path while loading
     let opening = null;
-    // Track the path of the currently loaded file for correct save-on-switch
-    let activePath = view.state.field(currentFileField).path;
+    // Track the path of the currently loaded file for correct save-on-switch.
+    // Only set AFTER a file has actually been loaded (not during initial loading state).
+    const initialFile = view.state.field(currentFileField);
+    let activePath = (initialFile.loading) ? null : initialFile.path;
+    // Preview element for images/SVGs
+    let previewEl = null;
+    let svgViewMode = 'preview';
+    const IMAGE_EXTENSIONS = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp', 'ico', 'avif']);
+    const SVG_EXTENSION = 'svg';
+    function hideScroller() {
+        const scroller = view.dom.querySelector('.cm-scroller');
+        if (scroller) {
+            // CodeMirror sets `display: flex !important` on .cm-scroller,
+            // so we can't use display:none. Hide via collapse instead.
+            scroller.style.visibility = 'hidden';
+            scroller.style.height = '0';
+            scroller.style.overflow = 'hidden';
+            scroller.style.position = 'absolute';
+        }
+    }
+    function showScroller() {
+        const scroller = view.dom.querySelector('.cm-scroller');
+        if (scroller) {
+            scroller.style.visibility = '';
+            scroller.style.height = '';
+            scroller.style.overflow = '';
+            scroller.style.position = '';
+        }
+    }
+    function removePreview() {
+        if (previewEl) {
+            previewEl.remove();
+            previewEl = null;
+        }
+        svgViewMode = 'preview';
+        showScroller();
+    }
+    function showImagePreview(content) {
+        removePreview();
+        previewEl = document.createElement('div');
+        previewEl.className = 'cm-image-preview';
+        previewEl.style.cssText = 'display:flex;align-items:center;justify-content:center;padding:16px;min-height:200px;overflow:auto;background:var(--cm-background, #1e1e1e);';
+        const img = document.createElement('img');
+        if (content.startsWith('data:') || content.startsWith('http') || content.startsWith('blob:')) {
+            img.src = content;
+        }
+        else {
+            const msg = document.createElement('div');
+            msg.style.cssText = 'color:var(--cm-toolbar-color, #ccc);text-align:center;';
+            msg.textContent = 'Image preview unavailable (import from disk to view)';
+            previewEl.appendChild(msg);
+            view.dom.appendChild(previewEl);
+            return;
+        }
+        img.style.maxWidth = '100%';
+        img.style.maxHeight = '400px';
+        img.style.objectFit = 'contain';
+        previewEl.appendChild(img);
+        hideScroller();
+        view.dom.appendChild(previewEl);
+    }
+    function renderSvgInto(container, content) {
+        container.innerHTML = '';
+        try {
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(content, 'image/svg+xml');
+            const svgEl = doc.documentElement;
+            if (svgEl.tagName === 'svg') {
+                svgEl.style.maxWidth = '100%';
+                svgEl.style.maxHeight = '300px';
+                svgEl.removeAttribute('width');
+                svgEl.removeAttribute('height');
+                container.appendChild(document.importNode(svgEl, true));
+            }
+            else {
+                container.textContent = 'Invalid SVG';
+                container.style.color = 'var(--cm-toolbar-color, #ccc)';
+            }
+        }
+        catch {
+            container.textContent = 'SVG parse error';
+            container.style.color = 'var(--cm-toolbar-color, #ccc)';
+        }
+    }
+    function showSvgView(content, mode) {
+        removePreview();
+        svgViewMode = mode;
+        previewEl = document.createElement('div');
+        previewEl.className = 'cm-svg-preview';
+        if (mode === 'preview') {
+            // Preview mode: hide editor, show rendered SVG
+            hideScroller();
+            previewEl.style.cssText = 'padding:16px;display:flex;align-items:center;justify-content:center;overflow:auto;background:var(--cm-background, #1e1e1e);min-height:200px;';
+            renderSvgInto(previewEl, content);
+        }
+        else {
+            // Source mode: show editor, hide preview
+            showScroller();
+            previewEl.style.display = 'none';
+        }
+        view.dom.appendChild(previewEl);
+    }
+    function updateSvgPreview() {
+        if (!previewEl || !previewEl.classList.contains('cm-svg-preview') || previewEl.style.display === 'none')
+            return;
+        renderSvgInto(previewEl, view.state.doc.toString());
+    }
     async function setLanguageSupport(language) {
         if (!language)
             return;
@@ -218,7 +442,7 @@ const codeblockView = ViewPlugin.define((view) => {
             }
             const unit = detectIndentationUnit(content) || "    ";
             // Lazily pre-fill TypeScript lib definitions when a TS/JS file is first opened
-            const tsExtensions = ['ts', 'tsx', 'js', 'jsx'];
+            const tsExtensions = ['ts', 'tsx', 'js', 'jsx', 'mjs', 'cjs', 'mts', 'cts'];
             const { typescript } = view.state.facet(CodeblockFacet);
             let libFiles;
             if (typescript?.resolveLib && ext && tsExtensions.includes(ext)) {
@@ -227,16 +451,51 @@ const codeblockView = ViewPlugin.define((view) => {
             else {
                 libFiles = getCachedLibFiles();
             }
-            let lsp = lang ? await LSP.client({ language: lang, path, fs, libFiles }) : null;
+            let lsp = null;
+            if (lang) {
+                try {
+                    lsp = await LSP.client({ language: lang, path, fs, libFiles });
+                }
+                catch (lspErr) {
+                    // Gracefully degrade when LSP is unavailable (e.g. missing worker, test environment)
+                    console.warn("LSP unavailable for this view:", lspErr);
+                }
+            }
             activePath = path;
-            safeDispatch(view, {
-                changes: { from: 0, to: view.state.doc.length, insert: content },
-                effects: [
-                    indentationCompartment.reconfigure(indentUnit.of(unit)),
-                    fileLoadedEffect.of({ path, content, language: lang }),
-                    languageServerCompartment.reconfigure(lsp ? [lsp] : []),
-                ]
-            });
+            // Check for image/SVG files
+            const isRasterImage = ext ? IMAGE_EXTENSIONS.has(ext) : false;
+            const isSvg = ext === SVG_EXTENSION;
+            // Clear stale diagnostics from previous file
+            safeDispatch(view, setDiagnostics(view.state, []));
+            if (isRasterImage) {
+                // Raster image: show preview, hide editor content
+                safeDispatch(view, {
+                    changes: { from: 0, to: view.state.doc.length, insert: content },
+                    effects: [
+                        fileLoadedEffect.of({ path, content, language: null }),
+                        readOnlyCompartment.reconfigure(EditorState.readOnly.of(true)),
+                    ]
+                });
+                showImagePreview(content);
+            }
+            else {
+                // Remove any existing preview
+                removePreview();
+                safeDispatch(view, {
+                    changes: { from: 0, to: view.state.doc.length, insert: content },
+                    effects: [
+                        indentationCompartment.reconfigure(indentUnit.of(unit)),
+                        fileLoadedEffect.of({ path, content, language: lang }),
+                        languageServerCompartment.reconfigure(lsp ? [lsp] : []),
+                    ]
+                });
+                // SVG: show live preview below the editor
+                if (isSvg) {
+                    showSvgView(content, 'preview');
+                }
+            }
+            // Subscribe to changes from other views of the same file
+            subscribeToFileChanges(path);
         }
         catch (e) {
             console.error("Failed to open file", e);
@@ -257,12 +516,25 @@ const codeblockView = ViewPlugin.define((view) => {
         update(u) {
             // React to explicit openFileEffect requests
             for (let e of u.transactions.flatMap(t => t.effects)) {
-                if (e.is(openFileEffect))
+                if (e.is(openFileEffect)) {
+                    // Cancel debounced save immediately to prevent it from writing
+                    // the old document content to the wrong (new) file path
+                    save.cancel();
+                    if (e.value.skipSave) {
+                        // Caller already handled file operations (e.g. rename) —
+                        // clear activePath so handleOpen won't save-on-switch
+                        activePath = null;
+                    }
                     queueMicrotask(() => handleOpen(e.value.path));
+                }
                 if (e.is(setThemeEffect)) {
                     const dark = e.value.dark;
                     u.view.dom.setAttribute('data-theme', dark ? 'dark' : 'light');
                 }
+                if (e.is(toggleSvgPreviewEffect)) {
+                    const newMode = svgViewMode === 'preview' ? 'source' : 'preview';
+                    showSvgView(view.state.doc.toString(), newMode);
+                }
             }
             // Keep read-only in sync with loading state without dispatching new transactions
             const prev = u.startState.field(currentFileField);
@@ -271,21 +543,46 @@ const codeblockView = ViewPlugin.define((view) => {
                 // Reconfigure readOnly via compartment inside the same update when possible
                 safeDispatch(view, { effects: readOnlyCompartment.reconfigure(EditorState.readOnly.of(next.loading)) });
             }
-            if (u.docChanged && u.state.field(settingsField).autosave)
+            if (u.docChanged && !receivingExternalUpdate && u.state.field(settingsField).autosave)
                 save();
+            // Live SVG preview update
+            if (u.docChanged && previewEl?.classList.contains('cm-svg-preview')) {
+                updateSvgPreview();
+            }
+            // Broadcast settings changes to other editors (unless we received them externally)
+            const prevSettings = u.startState.field(settingsField);
+            const nextSettings = u.state.field(settingsField);
+            if (prevSettings !== nextSettings && !receivingExternalSettings) {
+                // Compute the diff
+                const diff = {};
+                for (const key of Object.keys(nextSettings)) {
+                    if (prevSettings[key] !== nextSettings[key]) {
+                        diff[key] = nextSettings[key];
+                    }
+                }
+                if (Object.keys(diff).length > 0) {
+                    settingsChangeBus.notify(diff, view);
+                }
+            }
             // If fs changed via facet reconfig, refresh handle references
             const newFs = u.state.facet(CodeblockFacet).fs;
             if (fs !== newFs)
                 fs = newFs;
+        },
+        destroy() {
+            if (unsubscribeFileChanges) {
+                unsubscribeFileChanges();
+                unsubscribeFileChanges = null;
+            }
+            unsubscribeSettings();
+            removePreview();
+            save.cancel();
         }
     };
 });
 export const basicSetup = (() => [
-    lineNumbers(),
-    highlightActiveLineGutter(),
     highlightSpecialChars(),
     history(),
-    foldGutter(),
     drawSelection(),
     dropCursor(),
     EditorState.allowMultipleSelections.of(true),
@@ -307,10 +604,18 @@ export const basicSetup = (() => [
         ...lintKeymap
     ])
 ])();
-export function createCodeblock({ parent, fs, filepath, language, content = '', cwd = '/', toolbar = true, index, dark, typescript }) {
+export function createCodeblock({ parent, fs, filepath, language, content = '', cwd = '/', toolbar = true, index, dark, settings, typescript }) {
     const state = EditorState.create({
         doc: content,
-        extensions: [basicSetup, codeblock({ content, fs, filepath, cwd, language, toolbar, index, dark, typescript })]
+        extensions: [basicSetup, codeblock({ content, fs, filepath, cwd, language, toolbar, index, dark, settings, typescript })]
     });
-    return new EditorView({ state, parent });
+    const view = new EditorView({ state, parent });
+    return view;
 }
+// --- File-extension-specific toolbar commands ---
+registerFileAction({
+    extensions: ['svg'],
+    label: 'SVG > Toggle preview',
+    icon: '\udb82\ude1b', // nf-md-image_outline (󰈛)
+    action: (view) => view.dispatch({ effects: toggleSvgPreviewEffect.of(undefined) }),
+});

package/dist/index.d.ts

@@ -1,5 +1,6 @@
-export { createCodeblock, codeblock, basicSetup, type CodeblockConfig, CodeblockFacet, setThemeEffect } from "./editor";
-export { settingsField, updateSettingsEffect, type EditorSettings } from "./panels/footer";
+export { createCodeblock, codeblock, basicSetup, type CodeblockConfig, CodeblockFacet, setThemeEffect, fileChangeBus, settingsChangeBus, lineNumbersCompartment, foldGutterCompartment, toggleSvgPreviewEffect } from "./editor";
+export { settingsField, updateSettingsEffect, InitialSettingsFacet, type EditorSettings } from "./panels/settings";
+export { registerFileAction, type FileActionEntry } from "./panels/toolbar";
 export { LspLog, type LspLogEntry } from "./utils/lsp";
 export { Vfs as CodeblockFS } from './utils/fs';
 export * from './utils/snapshot';

package/dist/index.js

@@ -1,5 +1,6 @@
-export { createCodeblock, codeblock, basicSetup, CodeblockFacet, setThemeEffect } from "./editor";
-export { settingsField, updateSettingsEffect } from "./panels/footer";
+export { createCodeblock, codeblock, basicSetup, CodeblockFacet, setThemeEffect, fileChangeBus, settingsChangeBus, lineNumbersCompartment, foldGutterCompartment, toggleSvgPreviewEffect } from "./editor";
+export { settingsField, updateSettingsEffect, InitialSettingsFacet } from "./panels/settings";
+export { registerFileAction } from "./panels/toolbar";
 export { LspLog } from "./utils/lsp";
 export { Vfs as CodeblockFS } from './utils/fs';
 export * from './utils/snapshot';

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/panels/{footer.d.ts → settings.d.ts}

@@ -1,5 +1,5 @@
 import { EditorView } from "@codemirror/view";
-import { StateField } from "@codemirror/state";
+import { Facet, StateField } from "@codemirror/state";
 export interface EditorSettings {
     theme: 'light' | 'dark' | 'system';
     fontSize: number;
@@ -9,7 +9,13 @@ export interface EditorSettings {
     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;