Merge branch 'master' into boards

2024-11-27 14:22:52 +08:00
parent 2ecdbafacc 624012e96f
commit 57a979b118
24 changed files with 1374 additions and 98 deletions
--- a/boards/default_src/python_pyodide/language/en.js
+++ b/boards/default_src/python_pyodide/language/en.js
@@ -1,5 +1,8 @@
 export const EnMsg = {
-    'PYTHON_PYODIDE_IMAGE': 'Image'
+    'PYTHON_PYODIDE_IMAGE': 'Image',
+    'PYTHON_PYODIDE_LOADING': 'Python3 kernel loading...',
+    'PYTHON_PYODIDE_FILE_SYSTEM': 'Local File System',
+    'PYTHON_PYODIDE_LOAD_FILE_SYSTEM': 'Load Local Folder'
 };

 export const EnCatgories = {};
--- a/boards/default_src/python_pyodide/language/zh-hans.js
+++ b/boards/default_src/python_pyodide/language/zh-hans.js
@@ -1,5 +1,8 @@
 export const ZhHansMsg = {
-    'PYTHON_PYODIDE_IMAGE': '图像'
+    'PYTHON_PYODIDE_IMAGE': '图像',
+    'PYTHON_PYODIDE_LOADING': 'Python3内核载入中...',
+    'PYTHON_PYODIDE_FILE_SYSTEM': '本地文件系统',
+    'PYTHON_PYODIDE_LOAD_FILE_SYSTEM': '载入本地文件夹'
 };

 export const ZhHansCatgories = {};
--- a/boards/default_src/python_pyodide/language/zh-hant.js
+++ b/boards/default_src/python_pyodide/language/zh-hant.js
@@ -1,5 +1,8 @@
 export const ZhHantMsg = {
-    'PYTHON_PYODIDE_IMAGE': '影像'
+    'PYTHON_PYODIDE_IMAGE': '影像',
+    'PYTHON_PYODIDE_LOADING': 'Python3核心載入...',
+    'PYTHON_PYODIDE_FILE_SYSTEM': '本機檔案系統',
+    'PYTHON_PYODIDE_LOAD_FILE_SYSTEM': '載入本機資料夾'
 };

 export const ZhHantCatgories = {};
--- a/boards/default_src/python_pyodide/others/filesystem-file-tree.js
+++ b/boards/default_src/python_pyodide/others/filesystem-file-tree.js
@@ -0,0 +1,45 @@
+import * as path from 'path';
+import { FileTree, Debug } from 'mixly';
+import FileSystemFS from './filesystem-fs';
+
+
+export default class FileSystemFileTree extends FileTree {
+    constructor() {
+        super(new FileSystemFS());
+    }
+
+    async readFolder(inPath) {
+        let output = [];
+        try {
+            const fs = this.getFS();
+            const status = await fs.isDirectory(inPath);
+            if (!status) {
+                return output;
+            }
+            const children = await fs.readDirectory(inPath);
+            for (let data of children) {
+                const dataPath = path.join(inPath, data);
+                const isDirectory = await fs.isDirectory(dataPath);
+                if (isDirectory) {
+                    const isDirEmpty = await fs.isDirectoryEmpty(dataPath);
+                    output.push({
+                        type: 'folder',
+                        id: dataPath,
+                        children: !isDirEmpty,
+                        title: `/${this.getRootFolderName()}${dataPath}`
+                    });
+                } else {
+                    output.push({
+                        type: 'file',
+                        id: dataPath,
+                        children: false,
+                        title: `/${this.getRootFolderName()}${dataPath}`
+                    });
+                }
+            }
+        } catch (error) {
+            Debug.error(error);
+        }
+        return output;
+    }
+}
--- a/boards/default_src/python_pyodide/others/filesystem-fs.js
+++ b/boards/default_src/python_pyodide/others/filesystem-fs.js
@@ -0,0 +1,104 @@
+import { WebAccessFS } from '@zenfs/dom';
+import { FS } from 'mixly';
+
+
+class WebAccessFSExt extends WebAccessFS {
+    constructor(handle) {
+        super(handle);
+    }
+
+    async readFile(path) {
+        const handle = await this.getHandle(path);
+        if (handle instanceof window.FileSystemFileHandle) {
+            const file = await handle.getFile();
+            const text = await file.text();
+            return text;
+        }
+        return '';
+    }
+}
+
+
+export default class FileSystemFS extends FS {
+    #fs_ = null;
+
+    constructor() {
+        super();
+    }
+
+    async showDirectoryPicker() {
+        const directoryHandle = await window.showDirectoryPicker({ mode: 'readwrite' });
+        const permissionStatus = await directoryHandle.requestPermission({ mode: 'readwrite' });
+        if (permissionStatus !== 'granted') {
+            throw new Error('readwrite access to directory not granted');
+        }
+        this.#fs_ = new WebAccessFSExt(directoryHandle);
+        return directoryHandle;
+    }
+
+    async createFile(filePath) {
+        return this.#fs_.createFile(filePath, '');
+    }
+
+    async readFile(path) {
+        return this.#fs_.readFile(path);
+    }
+
+    async writeFile(path, data) {
+        return this.#fs_.writeFile(path, data, 'utf8');
+    }
+
+    async isFile(path) {
+        const stats = await this.#fs_.stat(path);
+        if (stats && stats.mode === 33279) {
+            return true;
+        }
+        return false;
+    }
+
+    async renameFile(oldFilePath, newFilePath) {
+        return await this.#fs_.rename(oldFilePath, newFilePath);
+    }
+
+    async moveFile(oldFilePath, newFilePath) {
+        return this.renameFile(oldFilePath, newFilePath);
+    }
+
+    async deleteFile(filePath) {
+        return this.#fs_.unlink(filePath);
+    }
+
+    async createDirectory(folderPath) {
+        return this.#fs_.mkdir(folderPath, 0o777);
+    }
+
+    async readDirectory(path) {
+        const result = await this.#fs_.readdir(path);
+        return result;
+    }
+
+    async isDirectory(path) {
+        const stats = await this.#fs_.stat(path);
+        if (stats && stats.mode === 16895) {
+            return true;
+        }
+        return false;
+    }
+
+    async isDirectoryEmpty(path) {
+        const result = await this.readDirectory(path);
+        return !result?.length;
+    }
+
+    async renameDirectory(oldFolderPath, newFolderPath) {
+        return this.#fs_.rename(oldFolderPath, newFolderPath);
+    }
+
+    async moveDirectory(oldFolderPath, newFolderPath) {
+        return this.#fs_.rename(oldFolderPath, newFolderPath);
+    }
+
+    async deleteDirectory(folderPath) {
+        return this.#fs_.rmdir(folderPath);
+    }
+}
--- a/boards/default_src/python_pyodide/others/nav-ext.js
+++ b/boards/default_src/python_pyodide/others/nav-ext.js
@@ -1,4 +1,4 @@
-import { app, Nav } from 'mixly';
+import { app, Nav, Debug } from 'mixly';
 import * as Blockly from 'blockly/core';
 import PythonShell from './python-shell';

@@ -16,7 +16,7 @@ NavExt.init = async function () {
            return true;
        },
        callback: () => {
-            PythonShell.run();
+            PythonShell.run().catch(Debug.error);
        },
        scopeType: Nav.Scope.LEFT,
        weight: 4
@@ -31,7 +31,7 @@ NavExt.init = async function () {
            return true;
        },
        callback: () => {
-            PythonShell.stop();
+            PythonShell.stop().catch(Debug.error);
        },
        scopeType: Nav.Scope.LEFT,
        weight: 5
--- a/boards/default_src/python_pyodide/others/python-shell.js
+++ b/boards/default_src/python_pyodide/others/python-shell.js
@@ -1,20 +1,42 @@
+import * as Blockly from 'blockly/core';
 import * as path from 'path';
-// import * as dayjs from 'dayjs';
+import $ from 'jquery';
 import {
    Workspace,
-    Debug,
    Env,
-    Msg
+    Msg,
+    HTMLTemplate,
+    Debug,
+    app
 } from 'mixly';
 import { KernelLoader } from '@basthon/kernel-loader';
 import StatusBarImage from './statusbar-image';
+import StatusBarFileSystem from './statusbar-filesystem';
+import LOADER_TEMPLATE from '../templates/html/loader.html';

-class PythonShell {
+
+export default class PythonShell {
    static {
+        HTMLTemplate.add(
+            'html/statusbar/loader.html',
+            new HTMLTemplate(LOADER_TEMPLATE)
+        );
+
        this.pythonShell = null;
+        this.kernelLoaded = false;
+        this.$loader = $(HTMLTemplate.get('html/statusbar/loader.html').render({
+            msg: {
+                loading: Blockly.Msg.PYTHON_PYODIDE_LOADING
+            }
+        }));
+        this.statusBarImage = null;
+        this.statusBarFileSystem = null;

        this.init = async function () {
-            StatusBarImage.init();
+            const footerBar = app.getFooterBar();
+            const $content = footerBar.getContent();
+            $content.after(this.$loader);
+
            const projectPath = path.relative(Env.indexDirPath, Env.boardDirPath);
            const loader = new KernelLoader({
                rootPath: path.join(projectPath, 'deps'),
@@ -34,16 +56,27 @@ class PythonShell {
            this.pyodide = window.pyodide;
            this.interruptBuffer = new Uint8Array(new ArrayBuffer(1));
            this.pyodide.setInterruptBuffer(this.interruptBuffer);
+            this.kernelLoaded = true;
+            this.$loader.remove();
+            this.$loader = null;
+            this.statusBarImage = StatusBarImage.init();
+            this.statusBarFileSystem = StatusBarFileSystem.init();
        }

-        this.run = function () {
+        this.run = async function () {
+            if (!this.kernelLoaded) {
+                return;
+            }
            const mainWorkspace = Workspace.getMain();
            const editor = mainWorkspace.getEditorsManager().getActive();
            const code = editor.getCode();
            return this.pythonShell.run(code);
        }

-        this.stop = function () {
+        this.stop = async function () {
+            if (!this.kernelLoaded) {
+                return;
+            }
            return this.pythonShell.stop();
        }
    }
@@ -94,6 +127,7 @@ class PythonShell {
            }
        }
    ];
+
    constructor() {
        const mainWorkspace = Workspace.getMain();
        this.#statusBarsManager_ = mainWorkspace.getStatusBarsManager();
@@ -107,6 +141,7 @@ class PythonShell {
        this.#kernel_.addEventListener('eval.finished', () => {
            this.#running_ = false;
            this.#statusBarTerminal_.addValue(`\n==${Msg.Lang['shell.finish']}==`);
+            this.syncfs(false).catch(Debug.error);
        });

        this.#kernel_.addEventListener('eval.output', (data) => {
@@ -169,25 +204,23 @@ class PythonShell {
        editor.setReadOnly(true);
    }

-    run(code) {
-        this.stop()
-            .then(() => {
-                if (code.indexOf('import turtle') !== -1) {
-                    code += '\nturtle.done()\n';
-                }
-                if (code.indexOf('import matplotlib.pyplot') !== -1) {
-                    code += '\nplt.clf()\n';
-                }
-                this.#statusBarsManager_.changeTo('output');
-                this.#statusBarsManager_.show();
-                this.#statusBarTerminal_.setValue(`${Msg.Lang['shell.running']}...\n`);
-                this.#running_ = true;
-                this.#kernel_.dispatchEvent('eval.request', {
-                    code,
-                    interactive: false,
-                });
-            })
-            .catch(Debug.error);
+    async run(code) {
+        await this.stop();
+        await this.syncfs(true);
+        if (code.indexOf('import turtle') !== -1) {
+            code += '\nturtle.done()\n';
+        }
+        if (code.indexOf('import matplotlib.pyplot') !== -1) {
+            code += '\nplt.clf()\n';
+        }
+        this.#statusBarsManager_.changeTo('output');
+        this.#statusBarsManager_.show();
+        this.#statusBarTerminal_.setValue(`${Msg.Lang['shell.running']}...\n`);
+        this.#running_ = true;
+        this.#kernel_.dispatchEvent('eval.request', {
+            code,
+            interactive: false,
+        });
    }

    async stop() {
@@ -210,9 +243,13 @@ class PythonShell {
        }
    }

+    async syncfs(populate = false) {
+        return new Promise((resolve) => {
+            window.pyodide.FS.syncfs(populate, resolve);
+        });
+    }
+
    sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
-}
-
-export default PythonShell;
+}
--- a/boards/default_src/python_pyodide/others/statusbar-filesystem.js
+++ b/boards/default_src/python_pyodide/others/statusbar-filesystem.js
@@ -0,0 +1,478 @@
+import * as Blockly from 'blockly/core';
+import { layer } from 'layui';
+import * as path from 'path';
+import $ from 'jquery';
+import {
+    PageBase,
+    Msg,
+    HTMLTemplate,
+    DragV,
+    StatusBar,
+    ContextMenu,
+    Debug,
+    StatusBarsManager,
+    Workspace
+} from 'mixly';
+import FileSystemFileTree from './filesystem-file-tree';
+import FILE_SYSTEM_TEMPLATE from '../templates/html/statusbar-filesystem.html';
+import FILE_SYSTEM_OPEN_FS_TEMPLATE from '../templates/html/statusbar-filesystem-open-fs.html';
+import FILE_SYSTEM_EDITOR_EMPTY_TEMPLATE from '../templates/html/statusbar-filesystem-editor-empty.html';
+
+
+
+export default class StatusBarFileSystem extends PageBase {
+    static {
+        HTMLTemplate.add(
+            'html/statusbar/statusbar-filesystem.html',
+            new HTMLTemplate(FILE_SYSTEM_TEMPLATE)
+        );
+
+        HTMLTemplate.add(
+            'html/statusbar/statusbar-filesystem-open-fs.html',
+            new HTMLTemplate(FILE_SYSTEM_OPEN_FS_TEMPLATE)
+        );
+
+        HTMLTemplate.add(
+            'html/statusbar/statusbar-filesystem-editor-empty.html',
+            new HTMLTemplate(FILE_SYSTEM_EDITOR_EMPTY_TEMPLATE)
+        );
+
+        this.init = function () {
+            StatusBarsManager.typesRegistry.register(['file-system'], StatusBarFileSystem);
+            const mainWorkspace = Workspace.getMain();
+            const statusBarsManager = mainWorkspace.getStatusBarsManager();
+            statusBarsManager.add('file-system', 'file-system', Blockly.Msg.PYTHON_PYODIDE_FILE_SYSTEM);
+            statusBarsManager.changeTo('output');
+            return statusBarsManager.get('file-system');
+        }
+    }
+
+    #$close_ = null;
+    #$fileTree_ = null;
+    #$editor_ = null;
+    #$openFS_ = null;
+    #$editorEmpty_ = null;
+    #editor_ = null;
+    #fileTree_ = null;
+    #drag_ = null;
+    #fileTreeShown_ = false;
+    #editorShown_ = false;
+    #changed_ = false;
+    #nativefs_ = null;
+
+    constructor() {
+        super();
+        const $content = $(HTMLTemplate.get('html/statusbar/statusbar-filesystem.html').render());
+        this.setContent($content);
+        this.#fileTree_ = new FileSystemFileTree();
+        this.#$fileTree_ = $content.children('.file-tree');
+        this.#$openFS_ = $(HTMLTemplate.get('html/statusbar/statusbar-filesystem-open-fs.html').render({
+            msg: {
+                loadFS: Blockly.Msg.PYTHON_PYODIDE_LOAD_FILE_SYSTEM
+            }
+        }));
+        this.#$fileTree_.append(this.#$openFS_);
+        this.#editor_ = new StatusBar();
+        this.#$editor_ = $content.children('.editor');
+        this.#$editorEmpty_ = $(HTMLTemplate.get('html/statusbar/statusbar-filesystem-editor-empty.html').render());
+        this.#$editor_.append(this.#$editorEmpty_);
+    }
+
+    #addEventsListener_() {
+        this.#drag_ = new DragV(this.getContent()[0], {
+            min: '150px',
+            startSize: '15%',
+            full: [false, false]
+        });
+
+        this.#drag_.bind('sizeChanged', () => {
+            this.resize();
+        });
+
+        this.#$openFS_.children('button').click(() => {
+            this.openFS();
+        });
+
+        this.#fileTree_.bind('beforeSelectLeaf', (selected) => {
+            const filePath = selected[0].id;
+            const mode = this.#editor_.getFileMode(path.extname(filePath));
+            if (!mode) {
+                layer.msg(Msg.Lang['statusbar.ampy.cannotEdit'], { time: 1000 });
+                return false;
+            }
+            this.#editor_.setMode(mode);
+            return true;
+        });
+
+        this.#fileTree_.bind('afterSelectLeaf', async (selected) => {
+            const filePath = selected[0].id;
+            this.#fileTree_.showProgress();
+            const fs = this.#fileTree_.getFS();
+            try {
+                const result = await fs.readFile(filePath);
+                this.showEditor();
+                this.#editor_.setValue(result);
+                this.#editor_.scrollToTop();
+                this.#editor_.focus();
+                this.setStatus(false);
+            } catch (error) {
+                Debug.error(error);
+                this.hideEditor();
+                this.#fileTree_.deselectAll();
+            }
+            this.#fileTree_.hideProgress();
+        });
+
+        this.#fileTree_.bind('afterCreateNode', (folderPath) => {
+            this.#fileTree_.refreshFolder(folderPath);
+        });
+
+        this.#fileTree_.bind('afterDeleteNode', (folderPath) => {
+            this.#fileTree_.refreshFolder(folderPath);
+        });
+
+        this.#fileTree_.bind('afterRenameNode', (folderPath) => {
+            this.#fileTree_.refreshFolder(folderPath);
+        });
+
+        this.#fileTree_.bind('afterRefreshNode', () => {
+            const selectedNodeId = this.#fileTree_.getSelectedNodeId();
+            if (!selectedNodeId) {
+                this.hideEditor();
+            }
+        });
+
+        const fileTreeContextMenu = this.#fileTree_.getContextMenu();
+        const fileTreeMenu = fileTreeContextMenu.getItem('menu');
+
+        fileTreeMenu.add({
+            weight: 7,
+            type: 'copy_path',
+            data: {
+                isHtmlName: true,
+                name: ContextMenu.getItem(Msg.Lang['fileTree.copyPath'], ''),
+                callback: (_, { $trigger }) => {
+                    let outPath = null;
+                    let type = $trigger.attr('type');
+                    if (type === 'root') {
+                        outPath = this.#fileTree_.getRootFolderTitle();
+                    } else {
+                        outPath = $trigger.attr('title');
+                    }
+                    navigator.clipboard.writeText(outPath).catch(Debug.error);
+                }
+            }
+        });
+
+        fileTreeMenu.add({
+            weight: 14,
+            type: 'sep5',
+            preconditionFn: ($trigger) => {
+                const selectedNodeId = this.#fileTree_.getSelectedNodeId();
+                let type = $trigger.attr('type');
+                let id = $trigger.attr('id');
+                if (type === 'file' && selectedNodeId !== id) {
+                    return false;
+                }
+                return true;
+            },
+            data: '---------'
+        });
+
+        fileTreeMenu.add({
+            weight: 15,
+            type: 'refresh',
+            preconditionFn: ($trigger) => {
+                const selectedNodeId = this.#fileTree_.getSelectedNodeId();
+                let type = $trigger.attr('type');
+                let id = $trigger.attr('id');
+                if (type === 'file' && selectedNodeId !== id) {
+                    return false;
+                }
+                return true;
+            },
+            data: {
+                isHtmlName: true,
+                name: ContextMenu.getItem(Msg.Lang['statusbar.ampy.refresh'], ''),
+                callback: (_, { $trigger }) => {
+                    let type = $trigger.attr('type');
+                    if (type === 'root') {
+                        this.#fileTree_.openRootFolder();
+                        this.#fileTree_.refreshFolder('/');
+                    } else if (type === 'folder') {
+                        let id = $trigger.attr('id');
+                        this.#fileTree_.openNode(id);
+                        this.#fileTree_.refreshFolder(id);
+                    } else {
+                        const nodes = this.#fileTree_.getSelectedNodes();
+                        this.#fileTree_.runEvent('afterSelectLeaf', nodes);
+                    }
+                }
+            }
+        });
+
+        fileTreeMenu.add({
+            weight: 16,
+            type: 'sep6',
+            preconditionFn: ($trigger) => {
+                let type = $trigger.attr('type');
+                return ['root'].includes(type);
+            },
+            data: '---------'
+        });
+
+        fileTreeMenu.add({
+            weight: 17,
+            type: 'exit',
+            preconditionFn: ($trigger) => {
+                let type = $trigger.attr('type');
+                return ['root'].includes(type);
+            },
+            data: {
+                isHtmlName: true,
+                name: ContextMenu.getItem(Msg.Lang['statusbar.ampy.exit'], ''),
+                callback: () => {
+                    this.closeFS();
+                }
+            }
+        });
+
+        fileTreeMenu.remove('copy');
+        fileTreeMenu.remove('cut');
+        fileTreeMenu.remove('paste');
+        fileTreeMenu.remove('sep2');
+
+        const editorContextMenu = this.#editor_.getContextMenu();
+        const editorMenu = editorContextMenu.getItem('code');
+
+        editorMenu.empty();
+
+        editorMenu.add({
+            weight: 0,
+            type: 'cut',
+            data: {
+                isHtmlName: true,
+                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.cut'], 'Ctrl+X'),
+                callback: () => this.#editor_.cut()
+            }
+        });
+        editorMenu.add({
+            weight: 1,
+            type: 'copy',
+            data: {
+                isHtmlName: true,
+                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.copy'], 'Ctrl+C'),
+                callback: () => this.#editor_.copy()
+            }
+        });
+        editorMenu.add({
+            weight: 2,
+            type: 'paste',
+            data: {
+                isHtmlName: true,
+                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.paste'], 'Ctrl+V'),
+                callback: () => this.#editor_.paste()
+            }
+        });
+        editorMenu.add({
+            weight: 3,
+            type: 'sep1',
+            data: '---------'
+        });
+        editorMenu.add({
+            weight: 4,
+            type: 'togglecomment',
+            data: {
+                isHtmlName: true,
+                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.togglecomment'], 'Ctrl+/'),
+                callback: () => this.#editor_.commentLine()
+            }
+        });
+
+        editorMenu.add({
+            weight: 6,
+            type: 'sep2',
+            preconditionFn: () => {
+                return this.#changed_;
+            },
+            data: '---------'
+        });
+
+        editorMenu.add({
+            weight: 7,
+            type: 'save',
+            preconditionFn: () => {
+                return this.#changed_;
+            },
+            data: {
+                isHtmlName: true,
+                name: ContextMenu.getItem(Msg.Lang['file.save'], 'Ctrl+S'),
+                callback: async () => {
+                    await this.put();
+                }
+            }
+        });
+
+        const { commands } = this.#editor_.getEditor();
+        commands.addCommand({
+            name: "save",
+            bindKey: "Ctrl-S",
+            exec: async () => {
+                if (!this.#changed_) {
+                    return;
+                }
+                await this.put();
+            }
+        });
+    }
+
+    async put() {
+        this.#fileTree_.showProgress();
+        const id = this.#fileTree_.getSelectedNodeId();
+        const fs = this.#fileTree_.getFS();
+        const [error,] = await fs.writeFile(id, this.#editor_.getValue());
+        this.#fileTree_.hideProgress();
+        if (!error) {
+            this.setStatus(false);
+        }
+    }
+
+    showFileTree() {
+        if (this.#fileTreeShown_) {
+            return;
+        }
+        this.#$openFS_.detach();
+        this.#$fileTree_.empty();
+        this.#$fileTree_.append(this.#fileTree_.getContent());
+        this.#fileTreeShown_ = true;
+    }
+
+    hideFileTree() {
+        if (!this.#fileTreeShown_) {
+            return;
+        }
+        this.#fileTree_.getContent().detach();
+        this.#$fileTree_.empty();
+        this.#$fileTree_.append(this.#$openFS_);
+        this.#fileTreeShown_ = false;
+    }
+
+    showEditor() {
+        if (this.#editorShown_) {
+            return;
+        }
+        this.#$editorEmpty_.detach();
+        this.#$editor_.empty();
+        this.#$editor_.append(this.#editor_.getContent());
+        this.#editorShown_ = true;
+    }
+
+    hideEditor() {
+        if (!this.#editorShown_) {
+            return;
+        }
+        this.#editor_.getContent().detach();
+        this.#$editor_.empty();
+        this.#$editor_.append(this.#$editorEmpty_);
+        this.#editorShown_ = false;
+        this.setStatus(false);
+    }
+
+    getDrag() {
+        return this.#drag_;
+    }
+
+    init() {
+        super.init();
+        this.hideCloseBtn();
+        this.#editor_.init();
+        this.#addEventsListener_();
+        const editor = this.#editor_.getEditor();
+        editor.setReadOnly(false);
+        editor.renderer.setShowGutter(true);
+        editor.setOptions({
+            enableBasicAutocompletion: true,
+            enableSnippets: true,
+            enableLiveAutocompletion: true,
+            newLineMode: 'unix'
+        });
+        editor.on('change', () => {
+            this.setStatus(true);
+        });
+    }
+
+    openFS() {
+        const fs = this.#fileTree_.getFS();
+        fs.showDirectoryPicker()
+            .then((directoryHandle) => {
+                if (!directoryHandle.name) {
+                    return;
+                }
+                const rootPath = '/' + directoryHandle.name;
+                this.#fileTree_.setFolderPath('/');
+                this.#fileTree_.setRootFolderTitle(rootPath);
+                this.#fileTree_.setRootFolderName(directoryHandle.name);
+                this.#fileTree_.openRootFolder();
+                this.showFileTree();
+                return window.pyodide.mountNativeFS(rootPath, directoryHandle);
+            })
+            .then((nativefs) => {
+                this.#nativefs_ = nativefs;
+            })
+            .catch(Debug.error);
+    }
+
+    closeFS() {
+        const rootPath = '/' + this.#fileTree_.getRootFolderTitle();
+        const lookup = window.pyodide.FS.lookupPath(rootPath, {
+            follow_mount: false
+        });
+        if (window.pyodide.FS.isMountpoint(lookup.node)) {
+            window.pyodide.FS.unmount(rootPath);
+        }
+        this.#fileTree_.deselectAll();
+        this.hideFileTree();
+        this.hideEditor();
+        this.setStatus(false);
+    }
+
+    onMounted() {
+        super.onMounted();
+        this.#editor_.onMounted();
+        this.#fileTree_.onMounted();
+        // this.#fileTree_.refreshFolder('/');
+    }
+
+    onUnmounted() {
+        // this.hideEditor();
+        // this.#fileTree_.deselectAll();
+        super.onUnmounted();
+        this.#editor_.onUnmounted();
+        this.#fileTree_.onUnmounted();
+    }
+
+    resize() {
+        super.resize();
+        this.#editor_.resize();
+        this.#fileTree_.resize();
+    }
+
+    setStatus(isChanged) {
+        if (this.#changed_ === isChanged) {
+            return;
+        }
+        this.#changed_ = isChanged;
+    }
+
+    getNativeFS() {
+        return this.#nativefs_;
+    }
+
+    dispose() {
+        this.#editor_.dispose();
+        this.#editor_ = null;
+        this.#fileTree_.dispose();
+        this.#fileTree_ = null;
+        super.dispose();
+    }
+}
--- a/boards/default_src/python_pyodide/others/statusbar-image.js
+++ b/boards/default_src/python_pyodide/others/statusbar-image.js
@@ -10,7 +10,7 @@ import '../language/loader';
 import STATUS_BAR_IMAGE_TEMPLATE from '../templates/html/statusbar-image.html';


-class StatusBarImage extends PageBase {
+export default class StatusBarImage extends PageBase {
    static {
        HTMLTemplate.add(
            'html/statusbar/statusbar-image.html',
@@ -23,6 +23,7 @@ class StatusBarImage extends PageBase {
            const statusBarsManager = mainWorkspace.getStatusBarsManager();
            statusBarsManager.add('images', 'images', Blockly.Msg.PYTHON_PYODIDE_IMAGE);
            statusBarsManager.changeTo('output');
+            return statusBarsManager.get('images');
        }
    }

@@ -164,6 +165,4 @@ class StatusBarImage extends PageBase {
                );
        }
    }
-}
-
-export default StatusBarImage;
+}
--- a/boards/default_src/python_pyodide/package-lock.json
+++ b/boards/default_src/python_pyodide/package-lock.json
@@ -9,7 +9,10 @@
            "version": "1.0.0",
            "license": "Apache 2.0",
            "dependencies": {
-                "@basthon/kernel-loader": "^0.62.21"
+                "@basthon/kernel-loader": "^0.62.21",
+                "@zenfs/core": "^1.4.0",
+                "@zenfs/dom": "^1.0.6",
+                "idb-keyval": "^6.2.1"
            },
            "devDependencies": {
                "buffer": "^6.0.3",
@@ -98,6 +101,20 @@
                "undici-types": "~6.19.2"
            }
        },
+        "node_modules/@types/readable-stream": {
+            "version": "4.0.18",
+            "resolved": "https://registry.npmmirror.com/@types/readable-stream/-/readable-stream-4.0.18.tgz",
+            "integrity": "sha512-21jK/1j+Wg+7jVw1xnSwy/2Q1VgVjWuFssbYGTREPUBeZ+rqVFl2udq0IkxzPC0ZhOzVceUbyIACFZKLqKEBlA==",
+            "dependencies": {
+                "@types/node": "*",
+                "safe-buffer": "~5.1.1"
+            }
+        },
+        "node_modules/@types/readable-stream/node_modules/safe-buffer": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.1.2.tgz",
+            "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
        "node_modules/@types/sql.js": {
            "version": "1.4.4",
            "resolved": "https://registry.npmmirror.com/@types/sql.js/-/sql.js-1.4.4.tgz",
@@ -107,6 +124,106 @@
                "@types/node": "*"
            }
        },
+        "node_modules/@types/wicg-file-system-access": {
+            "version": "2020.9.8",
+            "resolved": "https://registry.npmmirror.com/@types/wicg-file-system-access/-/wicg-file-system-access-2020.9.8.tgz",
+            "integrity": "sha512-ggMz8nOygG7d/stpH40WVaNvBwuyYLnrg5Mbyf6bmsj/8+gb6Ei4ZZ9/4PNpcPNTT8th9Q8sM8wYmWGjMWLX/A==",
+            "optional": true
+        },
+        "node_modules/@xterm/xterm": {
+            "version": "5.5.0",
+            "resolved": "https://registry.npmmirror.com/@xterm/xterm/-/xterm-5.5.0.tgz",
+            "integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==",
+            "optional": true
+        },
+        "node_modules/@zenfs/core": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmmirror.com/@zenfs/core/-/core-1.4.0.tgz",
+            "integrity": "sha512-8nYKm81H/m2VB+/tDkUfhUgTbVixlcPMLrno/6K0sWDlQqKOtt7/31aD+paqBl1SNa+d0Ky5RTNtTo7fU6t/9Q==",
+            "dependencies": {
+                "@types/node": "^20.16.10",
+                "@types/readable-stream": "^4.0.10",
+                "buffer": "^6.0.3",
+                "eventemitter3": "^5.0.1",
+                "readable-stream": "^4.5.2",
+                "utilium": "^1.0.0"
+            },
+            "bin": {
+                "make-index": "scripts/make-index.js",
+                "zenfs-test": "scripts/test.js"
+            },
+            "engines": {
+                "node": ">= 16"
+            },
+            "funding": {
+                "type": "individual",
+                "url": "https://github.com/sponsors/james-pre"
+            },
+            "optionalDependencies": {
+                "minimatch": "^9.0.3"
+            }
+        },
+        "node_modules/@zenfs/core/node_modules/@types/node": {
+            "version": "20.17.8",
+            "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.17.8.tgz",
+            "integrity": "sha512-ahz2g6/oqbKalW9sPv6L2iRbhLnojxjYWspAqhjvqSWBgGebEJT5GvRmk0QXPj3sbC6rU0GTQjPLQkmR8CObvA==",
+            "dependencies": {
+                "undici-types": "~6.19.2"
+            }
+        },
+        "node_modules/@zenfs/core/node_modules/readable-stream": {
+            "version": "4.5.2",
+            "resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-4.5.2.tgz",
+            "integrity": "sha512-yjavECdqeZ3GLXNgRXgeQEdz9fvDDkNKyHnbHRFtOr7/LcfgBcmct7t/ET+HaCTqfh06OzoAxrkN/IfjJBVe+g==",
+            "dependencies": {
+                "abort-controller": "^3.0.0",
+                "buffer": "^6.0.3",
+                "events": "^3.3.0",
+                "process": "^0.11.10",
+                "string_decoder": "^1.3.0"
+            },
+            "engines": {
+                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            }
+        },
+        "node_modules/@zenfs/core/node_modules/string_decoder": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.3.0.tgz",
+            "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+            "dependencies": {
+                "safe-buffer": "~5.2.0"
+            }
+        },
+        "node_modules/@zenfs/dom": {
+            "version": "1.0.6",
+            "resolved": "https://registry.npmmirror.com/@zenfs/dom/-/dom-1.0.6.tgz",
+            "integrity": "sha512-x1m5DVgxF2MLPKihsAvdslsr8plg0PDgtfq3ypjHoQul3oNOoSOQuhLbK6vJSu9WsaLNS2ZGQJz2S7m+KKICnA==",
+            "engines": {
+                "node": ">= 18"
+            },
+            "funding": {
+                "type": "individual",
+                "url": "https://github.com/sponsors/james-pre"
+            },
+            "optionalDependencies": {
+                "fake-indexeddb": "^6.0.0",
+                "file-system-access": "^1.0.4"
+            },
+            "peerDependencies": {
+                "@zenfs/core": "^1.3.0"
+            }
+        },
+        "node_modules/abort-controller": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmmirror.com/abort-controller/-/abort-controller-3.0.0.tgz",
+            "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+            "dependencies": {
+                "event-target-shim": "^5.0.0"
+            },
+            "engines": {
+                "node": ">=6.5"
+            }
+        },
        "node_modules/asn1.js": {
            "version": "4.10.1",
            "resolved": "https://registry.npmmirror.com/asn1.js/-/asn1.js-4.10.1.tgz",
@@ -124,11 +241,16 @@
            "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
            "dev": true
        },
+        "node_modules/balanced-match": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
+            "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+            "optional": true
+        },
        "node_modules/base64-js": {
            "version": "1.5.1",
            "resolved": "https://registry.npmmirror.com/base64-js/-/base64-js-1.5.1.tgz",
            "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-            "dev": true,
            "funding": [
                {
                    "type": "github",
@@ -150,6 +272,15 @@
            "integrity": "sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==",
            "dev": true
        },
+        "node_modules/brace-expansion": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz",
+            "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+            "optional": true,
+            "dependencies": {
+                "balanced-match": "^1.0.0"
+            }
+        },
        "node_modules/brorand": {
            "version": "1.1.0",
            "resolved": "https://registry.npmmirror.com/brorand/-/brorand-1.1.0.tgz",
@@ -228,7 +359,6 @@
            "version": "6.0.3",
            "resolved": "https://registry.npmmirror.com/buffer/-/buffer-6.0.3.tgz",
            "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
-            "dev": true,
            "funding": [
                {
                    "type": "github",
@@ -388,6 +518,27 @@
            "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
            "dev": true
        },
+        "node_modules/event-target-shim": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmmirror.com/event-target-shim/-/event-target-shim-5.0.1.tgz",
+            "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/eventemitter3": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-5.0.1.tgz",
+            "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
+        },
+        "node_modules/events": {
+            "version": "3.3.0",
+            "resolved": "https://registry.npmmirror.com/events/-/events-3.3.0.tgz",
+            "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+            "engines": {
+                "node": ">=0.8.x"
+            }
+        },
        "node_modules/evp_bytestokey": {
            "version": "1.0.3",
            "resolved": "https://registry.npmmirror.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz",
@@ -398,6 +549,55 @@
                "safe-buffer": "^5.1.1"
            }
        },
+        "node_modules/fake-indexeddb": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmmirror.com/fake-indexeddb/-/fake-indexeddb-6.0.0.tgz",
+            "integrity": "sha512-YEboHE5VfopUclOck7LncgIqskAqnv4q0EWbYCaxKKjAvO93c+TJIaBuGy8CBFdbg9nKdpN3AuPRwVBJ4k7NrQ==",
+            "optional": true,
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/fetch-blob": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmmirror.com/fetch-blob/-/fetch-blob-3.2.0.tgz",
+            "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/jimmywarting"
+                },
+                {
+                    "type": "paypal",
+                    "url": "https://paypal.me/jimmywarting"
+                }
+            ],
+            "optional": true,
+            "dependencies": {
+                "node-domexception": "^1.0.0",
+                "web-streams-polyfill": "^3.0.3"
+            },
+            "engines": {
+                "node": "^12.20 || >= 14.13"
+            }
+        },
+        "node_modules/file-system-access": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmmirror.com/file-system-access/-/file-system-access-1.0.4.tgz",
+            "integrity": "sha512-JDlhH+gJfZu/oExmtN4/6VX+q1etlrbJbR5uzoBa4BzfTRQbEXGFuGIBRk3ZcPocko3WdEclZSu+d/SByjG6Rg==",
+            "optional": true,
+            "dependencies": {
+                "@types/wicg-file-system-access": "^2020.9.2",
+                "fetch-blob": "^3.0.0",
+                "node-domexception": "^1.0.0"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "optionalDependencies": {
+                "web-streams-polyfill": "^3.1.0"
+            }
+        },
        "node_modules/hash-base": {
            "version": "3.0.4",
            "resolved": "https://registry.npmmirror.com/hash-base/-/hash-base-3.0.4.tgz",
@@ -432,11 +632,15 @@
                "minimalistic-crypto-utils": "^1.0.1"
            }
        },
+        "node_modules/idb-keyval": {
+            "version": "6.2.1",
+            "resolved": "https://registry.npmmirror.com/idb-keyval/-/idb-keyval-6.2.1.tgz",
+            "integrity": "sha512-8Sb3veuYCyrZL+VBt9LJfZjLUPWVvqn8tG28VqYNFCo43KHcKuq+b4EiXGeuaLAQWL2YmyDgMp2aSpH9JHsEQg=="
+        },
        "node_modules/ieee754": {
            "version": "1.2.1",
            "resolved": "https://registry.npmmirror.com/ieee754/-/ieee754-1.2.1.tgz",
            "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-            "dev": true,
            "funding": [
                {
                    "type": "github",
@@ -506,6 +710,40 @@
            "integrity": "sha512-JIYlbt6g8i5jKfJ3xz7rF0LXmv2TkDxBLUkiBeZ7bAx4GnnNMr8xFpGnOxn6GhTEHx3SjRrZEoU+j04prX1ktg==",
            "dev": true
        },
+        "node_modules/minimatch": {
+            "version": "9.0.5",
+            "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.5.tgz",
+            "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+            "optional": true,
+            "dependencies": {
+                "brace-expansion": "^2.0.1"
+            },
+            "engines": {
+                "node": ">=16 || 14 >=14.17"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/node-domexception": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmmirror.com/node-domexception/-/node-domexception-1.0.0.tgz",
+            "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/jimmywarting"
+                },
+                {
+                    "type": "github",
+                    "url": "https://paypal.me/jimmywarting"
+                }
+            ],
+            "optional": true,
+            "engines": {
+                "node": ">=10.5.0"
+            }
+        },
        "node_modules/parse-asn1": {
            "version": "5.1.7",
            "resolved": "https://registry.npmmirror.com/parse-asn1/-/parse-asn1-5.1.7.tgz",
@@ -545,6 +783,14 @@
                "node": ">=0.12"
            }
        },
+        "node_modules/process": {
+            "version": "0.11.10",
+            "resolved": "https://registry.npmmirror.com/process/-/process-0.11.10.tgz",
+            "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+            "engines": {
+                "node": ">= 0.6.0"
+            }
+        },
        "node_modules/process-nextick-args": {
            "version": "2.0.1",
            "resolved": "https://registry.npmmirror.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -630,7 +876,6 @@
            "version": "5.2.1",
            "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.2.1.tgz",
            "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-            "dev": true,
            "funding": [
                {
                    "type": "github",
@@ -719,11 +964,35 @@
            "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
            "dev": true
        },
+        "node_modules/utilium": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmmirror.com/utilium/-/utilium-1.1.0.tgz",
+            "integrity": "sha512-02uMD58LHEacpSkzx46JZ0FDvFGpSGUYN6mSHY9wqNUi4sZVNzDdUXa9unLLCj5pRxK28HcYqqe/iQToBpmxTw==",
+            "dependencies": {
+                "eventemitter3": "^5.0.1"
+            },
+            "funding": {
+                "type": "individual",
+                "url": "https://github.com/sponsors/james-pre"
+            },
+            "optionalDependencies": {
+                "@xterm/xterm": "^5.5.0"
+            }
+        },
        "node_modules/vm-browserify": {
            "version": "1.1.2",
            "resolved": "https://registry.npmmirror.com/vm-browserify/-/vm-browserify-1.1.2.tgz",
            "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
            "dev": true
+        },
+        "node_modules/web-streams-polyfill": {
+            "version": "3.3.3",
+            "resolved": "https://registry.npmmirror.com/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
+            "integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
+            "optional": true,
+            "engines": {
+                "node": ">= 8"
+            }
        }
    },
    "dependencies": {
@@ -806,6 +1075,22 @@
                "undici-types": "~6.19.2"
            }
        },
+        "@types/readable-stream": {
+            "version": "4.0.18",
+            "resolved": "https://registry.npmmirror.com/@types/readable-stream/-/readable-stream-4.0.18.tgz",
+            "integrity": "sha512-21jK/1j+Wg+7jVw1xnSwy/2Q1VgVjWuFssbYGTREPUBeZ+rqVFl2udq0IkxzPC0ZhOzVceUbyIACFZKLqKEBlA==",
+            "requires": {
+                "@types/node": "*",
+                "safe-buffer": "~5.1.1"
+            },
+            "dependencies": {
+                "safe-buffer": {
+                    "version": "5.1.2",
+                    "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.1.2.tgz",
+                    "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+                }
+            }
+        },
        "@types/sql.js": {
            "version": "1.4.4",
            "resolved": "https://registry.npmmirror.com/@types/sql.js/-/sql.js-1.4.4.tgz",
@@ -815,6 +1100,79 @@
                "@types/node": "*"
            }
        },
+        "@types/wicg-file-system-access": {
+            "version": "2020.9.8",
+            "resolved": "https://registry.npmmirror.com/@types/wicg-file-system-access/-/wicg-file-system-access-2020.9.8.tgz",
+            "integrity": "sha512-ggMz8nOygG7d/stpH40WVaNvBwuyYLnrg5Mbyf6bmsj/8+gb6Ei4ZZ9/4PNpcPNTT8th9Q8sM8wYmWGjMWLX/A==",
+            "optional": true
+        },
+        "@xterm/xterm": {
+            "version": "5.5.0",
+            "resolved": "https://registry.npmmirror.com/@xterm/xterm/-/xterm-5.5.0.tgz",
+            "integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==",
+            "optional": true
+        },
+        "@zenfs/core": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmmirror.com/@zenfs/core/-/core-1.4.0.tgz",
+            "integrity": "sha512-8nYKm81H/m2VB+/tDkUfhUgTbVixlcPMLrno/6K0sWDlQqKOtt7/31aD+paqBl1SNa+d0Ky5RTNtTo7fU6t/9Q==",
+            "requires": {
+                "@types/node": "^20.16.10",
+                "@types/readable-stream": "^4.0.10",
+                "buffer": "^6.0.3",
+                "eventemitter3": "^5.0.1",
+                "minimatch": "^9.0.3",
+                "readable-stream": "^4.5.2",
+                "utilium": "^1.0.0"
+            },
+            "dependencies": {
+                "@types/node": {
+                    "version": "20.17.8",
+                    "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.17.8.tgz",
+                    "integrity": "sha512-ahz2g6/oqbKalW9sPv6L2iRbhLnojxjYWspAqhjvqSWBgGebEJT5GvRmk0QXPj3sbC6rU0GTQjPLQkmR8CObvA==",
+                    "requires": {
+                        "undici-types": "~6.19.2"
+                    }
+                },
+                "readable-stream": {
+                    "version": "4.5.2",
+                    "resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-4.5.2.tgz",
+                    "integrity": "sha512-yjavECdqeZ3GLXNgRXgeQEdz9fvDDkNKyHnbHRFtOr7/LcfgBcmct7t/ET+HaCTqfh06OzoAxrkN/IfjJBVe+g==",
+                    "requires": {
+                        "abort-controller": "^3.0.0",
+                        "buffer": "^6.0.3",
+                        "events": "^3.3.0",
+                        "process": "^0.11.10",
+                        "string_decoder": "^1.3.0"
+                    }
+                },
+                "string_decoder": {
+                    "version": "1.3.0",
+                    "resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.3.0.tgz",
+                    "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+                    "requires": {
+                        "safe-buffer": "~5.2.0"
+                    }
+                }
+            }
+        },
+        "@zenfs/dom": {
+            "version": "1.0.6",
+            "resolved": "https://registry.npmmirror.com/@zenfs/dom/-/dom-1.0.6.tgz",
+            "integrity": "sha512-x1m5DVgxF2MLPKihsAvdslsr8plg0PDgtfq3ypjHoQul3oNOoSOQuhLbK6vJSu9WsaLNS2ZGQJz2S7m+KKICnA==",
+            "requires": {
+                "fake-indexeddb": "^6.0.0",
+                "file-system-access": "^1.0.4"
+            }
+        },
+        "abort-controller": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmmirror.com/abort-controller/-/abort-controller-3.0.0.tgz",
+            "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+            "requires": {
+                "event-target-shim": "^5.0.0"
+            }
+        },
        "asn1.js": {
            "version": "4.10.1",
            "resolved": "https://registry.npmmirror.com/asn1.js/-/asn1.js-4.10.1.tgz",
@@ -834,11 +1192,16 @@
                }
            }
        },
+        "balanced-match": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
+            "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+            "optional": true
+        },
        "base64-js": {
            "version": "1.5.1",
            "resolved": "https://registry.npmmirror.com/base64-js/-/base64-js-1.5.1.tgz",
-            "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-            "dev": true
+            "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
        },
        "bn.js": {
            "version": "5.2.1",
@@ -846,6 +1209,15 @@
            "integrity": "sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==",
            "dev": true
        },
+        "brace-expansion": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz",
+            "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+            "optional": true,
+            "requires": {
+                "balanced-match": "^1.0.0"
+            }
+        },
        "brorand": {
            "version": "1.1.0",
            "resolved": "https://registry.npmmirror.com/brorand/-/brorand-1.1.0.tgz",
@@ -921,7 +1293,6 @@
            "version": "6.0.3",
            "resolved": "https://registry.npmmirror.com/buffer/-/buffer-6.0.3.tgz",
            "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
-            "dev": true,
            "requires": {
                "base64-js": "^1.3.1",
                "ieee754": "^1.2.1"
@@ -1070,6 +1441,21 @@
                }
            }
        },
+        "event-target-shim": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmmirror.com/event-target-shim/-/event-target-shim-5.0.1.tgz",
+            "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ=="
+        },
+        "eventemitter3": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-5.0.1.tgz",
+            "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
+        },
+        "events": {
+            "version": "3.3.0",
+            "resolved": "https://registry.npmmirror.com/events/-/events-3.3.0.tgz",
+            "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="
+        },
        "evp_bytestokey": {
            "version": "1.0.3",
            "resolved": "https://registry.npmmirror.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz",
@@ -1080,6 +1466,34 @@
                "safe-buffer": "^5.1.1"
            }
        },
+        "fake-indexeddb": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmmirror.com/fake-indexeddb/-/fake-indexeddb-6.0.0.tgz",
+            "integrity": "sha512-YEboHE5VfopUclOck7LncgIqskAqnv4q0EWbYCaxKKjAvO93c+TJIaBuGy8CBFdbg9nKdpN3AuPRwVBJ4k7NrQ==",
+            "optional": true
+        },
+        "fetch-blob": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmmirror.com/fetch-blob/-/fetch-blob-3.2.0.tgz",
+            "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
+            "optional": true,
+            "requires": {
+                "node-domexception": "^1.0.0",
+                "web-streams-polyfill": "^3.0.3"
+            }
+        },
+        "file-system-access": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmmirror.com/file-system-access/-/file-system-access-1.0.4.tgz",
+            "integrity": "sha512-JDlhH+gJfZu/oExmtN4/6VX+q1etlrbJbR5uzoBa4BzfTRQbEXGFuGIBRk3ZcPocko3WdEclZSu+d/SByjG6Rg==",
+            "optional": true,
+            "requires": {
+                "@types/wicg-file-system-access": "^2020.9.2",
+                "fetch-blob": "^3.0.0",
+                "node-domexception": "^1.0.0",
+                "web-streams-polyfill": "^3.1.0"
+            }
+        },
        "hash-base": {
            "version": "3.0.4",
            "resolved": "https://registry.npmmirror.com/hash-base/-/hash-base-3.0.4.tgz",
@@ -1111,11 +1525,15 @@
                "minimalistic-crypto-utils": "^1.0.1"
            }
        },
+        "idb-keyval": {
+            "version": "6.2.1",
+            "resolved": "https://registry.npmmirror.com/idb-keyval/-/idb-keyval-6.2.1.tgz",
+            "integrity": "sha512-8Sb3veuYCyrZL+VBt9LJfZjLUPWVvqn8tG28VqYNFCo43KHcKuq+b4EiXGeuaLAQWL2YmyDgMp2aSpH9JHsEQg=="
+        },
        "ieee754": {
            "version": "1.2.1",
            "resolved": "https://registry.npmmirror.com/ieee754/-/ieee754-1.2.1.tgz",
-            "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-            "dev": true
+            "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
        },
        "inherits": {
            "version": "2.0.4",
@@ -1170,6 +1588,21 @@
            "integrity": "sha512-JIYlbt6g8i5jKfJ3xz7rF0LXmv2TkDxBLUkiBeZ7bAx4GnnNMr8xFpGnOxn6GhTEHx3SjRrZEoU+j04prX1ktg==",
            "dev": true
        },
+        "minimatch": {
+            "version": "9.0.5",
+            "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.5.tgz",
+            "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+            "optional": true,
+            "requires": {
+                "brace-expansion": "^2.0.1"
+            }
+        },
+        "node-domexception": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmmirror.com/node-domexception/-/node-domexception-1.0.0.tgz",
+            "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
+            "optional": true
+        },
        "parse-asn1": {
            "version": "5.1.7",
            "resolved": "https://registry.npmmirror.com/parse-asn1/-/parse-asn1-5.1.7.tgz",
@@ -1203,6 +1636,11 @@
                "sha.js": "^2.4.8"
            }
        },
+        "process": {
+            "version": "0.11.10",
+            "resolved": "https://registry.npmmirror.com/process/-/process-0.11.10.tgz",
+            "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="
+        },
        "process-nextick-args": {
            "version": "2.0.1",
            "resolved": "https://registry.npmmirror.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -1291,8 +1729,7 @@
        "safe-buffer": {
            "version": "5.2.1",
            "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.2.1.tgz",
-            "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-            "dev": true
+            "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
        },
        "sha.js": {
            "version": "2.4.11",
@@ -1365,11 +1802,26 @@
            "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
            "dev": true
        },
+        "utilium": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmmirror.com/utilium/-/utilium-1.1.0.tgz",
+            "integrity": "sha512-02uMD58LHEacpSkzx46JZ0FDvFGpSGUYN6mSHY9wqNUi4sZVNzDdUXa9unLLCj5pRxK28HcYqqe/iQToBpmxTw==",
+            "requires": {
+                "@xterm/xterm": "^5.5.0",
+                "eventemitter3": "^5.0.1"
+            }
+        },
        "vm-browserify": {
            "version": "1.1.2",
            "resolved": "https://registry.npmmirror.com/vm-browserify/-/vm-browserify-1.1.2.tgz",
            "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
            "dev": true
+        },
+        "web-streams-polyfill": {
+            "version": "3.3.3",
+            "resolved": "https://registry.npmmirror.com/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
+            "integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
+            "optional": true
        }
    }
 }
--- a/boards/default_src/python_pyodide/package.json
+++ b/boards/default_src/python_pyodide/package.json
@@ -17,7 +17,10 @@
        "vm-browserify": "^1.1.2"
    },
    "dependencies": {
-        "@basthon/kernel-loader": "^0.62.21"
+        "@basthon/kernel-loader": "^0.62.21",
+        "@zenfs/core": "^1.4.0",
+        "@zenfs/dom": "^1.0.6",
+        "idb-keyval": "^6.2.1"
    },
    "main": "./export.js",
    "author": "Mixly Team",
--- a/boards/default_src/python_pyodide/templates/html/loader.html
+++ b/boards/default_src/python_pyodide/templates/html/loader.html
@@ -0,0 +1,24 @@
+<style>
+    div[m-id="{{d.mId}}"] {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        position: absolute;
+        background-color: transparent !important;
+        font-size: 12px;
+        line-height: 12px;
+        color: #fff;
+        bottom: 0;
+        height: var(--footer-height);
+        width: 100%;
+    }
+
+    div[m-id="{{d.mId}}"] > p {
+        margin-left: 5px;
+    }
+</style>
+<div m-id="{{d.mId}}">
+    <div class="ui mini active inline slow loader"></div>
+    <p>{{d.msg.loading}}</p>
+</div>
--- a/boards/default_src/python_pyodide/templates/html/statusbar-filesystem-editor-empty.html
+++ b/boards/default_src/python_pyodide/templates/html/statusbar-filesystem-editor-empty.html
@@ -0,0 +1,26 @@
+<style>
+    div[m-id="{{d.mId}}"] {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+    }
+
+    div[m-id="{{d.mId}}"] > div {
+        width: 150px;
+        height: 150px;
+    }
+
+    html[data-bs-theme=light] div[m-id="{{d.mId}}"] > div {
+        background: url('../common/css/svg/empty/empty-light.svg');
+        background-size: 100% auto;
+    }
+
+    html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > div {
+        background: url('../common/css/svg/empty/empty-dark.svg');
+        background-size: 100% auto;
+    }
+</style>
+<div m-id="{{d.mId}}" class="page-item">
+    <div></div>
+</div>
--- a/boards/default_src/python_pyodide/templates/html/statusbar-filesystem-open-fs.html
+++ b/boards/default_src/python_pyodide/templates/html/statusbar-filesystem-open-fs.html
@@ -0,0 +1,25 @@
+<style>
+    div[m-id="{{d.mId}}"] {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+    }
+
+    div[m-id="{{d.mId}}"] > button {
+        margin: 15px;
+        max-width: 200px;
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: #fff !important;
+        height: 25px;
+        border-radius: 3px;
+    }
+</style>
+<div m-id="{{d.mId}}">
+    <button class="layui-btn layui-btn-xs m-btn self-adaption-btn">{{ d.msg.loadFS }}</button>
+</div>
--- a/boards/default_src/python_pyodide/templates/html/statusbar-filesystem.html
+++ b/boards/default_src/python_pyodide/templates/html/statusbar-filesystem.html
@@ -0,0 +1,31 @@
+<style>
+    div[m-id="{{d.mId}}"] {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+    div[m-id="{{d.mId}}"] > .file-tree {
+        width: 15%;
+        height: 100%;
+        border-right-width: 1px;
+        border-right-style: solid;
+    }
+
+    html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .file-tree {
+        border-right-color: #c9c9c9;
+    }
+
+    html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .file-tree {
+        border-right-color: rgba(128, 128, 128, 0.35);
+    }
+
+    div[m-id="{{d.mId}}"] > .editor {
+        width: 85%;
+        height: 100%;
+    }
+</style>
+<div m-id="{{d.mId}}" class="page-item">
+    <div class="file-tree"></div>
+    <div class="editor"></div>
+</div>
--- a/boards/default_src/python_pyodide/templates/html/statusbar-image.html
+++ b/boards/default_src/python_pyodide/templates/html/statusbar-image.html
@@ -14,6 +14,4 @@
        background-color: #1e1e1e;
    }
 </style>
-<div m-id="{{d.mId}}" class="page-item">
-
-</div>
+<div m-id="{{d.mId}}" class="page-item"></div>