iobroker.mywebui 1.42.42 → 1.42.44

package/dist/importmaps/importmap-config.js

@@ -1,36 +1,36 @@
 "use strict";
 const importMapConfig = {
     "imports": {
-        "@node-projects/base-custom-webcomponent": "./node_modules/@node-projects/base-custom-webcomponent/dist/index-min.js",
-        "@node-projects/web-component-designer": "./node_modules/@gokturk413/web-component-designer/dist/index-min.js",
-        "@node-projects/web-component-designer-widgets-wunderbaum": "./node_modules/@gokturk413/web-component-designer-widgets-wunderbaum/dist/index-min.js",
-        "@node-projects/lean-he-esm": "./node_modules/@node-projects/lean-he-esm/lib/index-min.js",
-        "@node-projects/node-html-parser-esm": "./node_modules/@node-projects/node-html-parser-esm/dist/index-min.js",
+        "@node-projects/base-custom-webcomponent": "./libs/@node-projects/base-custom-webcomponent/dist/index-min.js",
+        "@node-projects/web-component-designer": "./libs/@gokturk413/web-component-designer/dist/index-min.js",
+        "@node-projects/web-component-designer-widgets-wunderbaum": "./libs/@gokturk413/web-component-designer-widgets-wunderbaum/dist/index-min.js",
+        "@node-projects/lean-he-esm": "./libs/@node-projects/lean-he-esm/lib/index-min.js",
+        "@node-projects/node-html-parser-esm": "./libs/@node-projects/node-html-parser-esm/dist/index-min.js",
         "dock-spawn-ts": "./node_modules/dock-spawn-ts/lib/js/index-webcomponent-min.js",
-        "a_@node-projects/base-custom-webcomponent": "./node_modules/@node-projects/base-custom-webcomponent/dist/index.js",
-        "a_@node-projects/web-component-designer": "./node_modules/@gokturk413/web-component-designer/dist/index.js",
-        "a_@node-projects/web-component-designer-widgets-wunderbaum": "./node_modules/@gokturk413/web-component-designer-widgets-wunderbaum/dist/index.js",
-        "a_@node-projects/lean-he-esm": "./node_modules/@node-projects/lean-he-esm/lib/index.js",
-        "a_@node-projects/node-html-parser-esm": "./node_modules/@node-projects/node-html-parser-esm/dist/index.js",
+        "a_@node-projects/base-custom-webcomponent": "./libs/@node-projects/base-custom-webcomponent/dist/index.js",
+        "a_@node-projects/web-component-designer": "./libs/@gokturk413/web-component-designer/dist/index.js",
+        "a_@node-projects/web-component-designer-widgets-wunderbaum": "./libs/@gokturk413/web-component-designer-widgets-wunderbaum/dist/index.js",
+        "a_@node-projects/lean-he-esm": "./libs/@node-projects/lean-he-esm/lib/index.js",
+        "a_@node-projects/node-html-parser-esm": "./libs/@node-projects/node-html-parser-esm/dist/index.js",
         "a_dock-spawn-ts": "./node_modules/dock-spawn-ts/lib/js/index-webcomponent.js",
         "monaco-editor/": "./node_modules/monaco-editor/",
-        "@node-projects/web-component-designer/": "./node_modules/@gokturk413/web-component-designer/",
+        "@node-projects/web-component-designer/": "./libs/@gokturk413/web-component-designer/",
         "@adobe/css-tools": "./node_modules/@adobe/css-tools/dist/esm/adobe-css-tools.mjs",
         "esprima-next": "./node_modules/esprima-next/dist/esprima.js",
-        "@node-projects/": "./node_modules/@node-projects/",
-        "@node-projects/web-component-designer-htmlparserservice-nodehtmlparser": "./node_modules/@gokturk413/web-component-designer-htmlparserservice-nodehtmlparser/dist/service/htmlParserService/NodeHtmlParserService.js",
-        "@node-projects/web-component-designer-codeview-monaco": "./node_modules/@gokturk413/web-component-designer-codeview-monaco/dist/widgets/codeView/code-view-monaco.js",
-        "@node-projects/web-component-designer-stylesheetservice-css-tools": "./node_modules/@node-projects/web-component-designer-stylesheetservice-css-tools/dist/service/stylesheetservice/CssToolsStylesheetService.js",
-        "@node-projects/web-component-designer-visualization-addons": "./node_modules/@gokturk413/web-component-designer-visualization-addons/dist/index.js",
-        "@node-projects/propertygrid.webcomponent": "./node_modules/@node-projects/propertygrid.webcomponent/dist/index.js",
-        "@node-projects/splitview.webcomponent": "./node_modules/@node-projects/splitview.webcomponent/dist/index.js",
-        "@gokturk413/web-component-designer": "./node_modules/@gokturk413/web-component-designer/dist/index-min.js",
-        "@gokturk413/web-component-designer/": "./node_modules/@gokturk413/web-component-designer/",
-        "@gokturk413/web-component-designer-widgets-wunderbaum": "./node_modules/@gokturk413/web-component-designer-widgets-wunderbaum/dist/index-min.js",
-        "@gokturk413/web-component-designer-visualization-addons": "./node_modules/@gokturk413/web-component-designer-visualization-addons/dist/index.js",
-        "@gokturk413/web-component-designer-codeview-monaco": "./node_modules/@gokturk413/web-component-designer-codeview-monaco/dist/widgets/codeView/code-view-monaco.js",
-        "@gokturk413/web-component-designer-htmlparserservice-nodehtmlparser": "./node_modules/@gokturk413/web-component-designer-htmlparserservice-nodehtmlparser/dist/service/htmlParserService/NodeHtmlParserService.js",
-        "@gokturk413/": "./node_modules/@gokturk413/",
+        "@node-projects/": "./libs/@node-projects/",
+        "@node-projects/web-component-designer-htmlparserservice-nodehtmlparser": "./libs/@gokturk413/web-component-designer-htmlparserservice-nodehtmlparser/dist/service/htmlParserService/NodeHtmlParserService.js",
+        "@node-projects/web-component-designer-codeview-monaco": "./libs/@gokturk413/web-component-designer-codeview-monaco/dist/widgets/codeView/code-view-monaco.js",
+        "@node-projects/web-component-designer-stylesheetservice-css-tools": "./libs/@node-projects/web-component-designer-stylesheetservice-css-tools/dist/service/stylesheetservice/CssToolsStylesheetService.js",
+        "@node-projects/web-component-designer-visualization-addons": "./libs/@gokturk413/web-component-designer-visualization-addons/dist/index.js",
+        "@node-projects/propertygrid.webcomponent": "./libs/@node-projects/propertygrid.webcomponent/dist/index.js",
+        "@node-projects/splitview.webcomponent": "./libs/@node-projects/splitview.webcomponent/dist/index.js",
+        "@gokturk413/web-component-designer": "./libs/@gokturk413/web-component-designer/dist/index-min.js",
+        "@gokturk413/web-component-designer/": "./libs/@gokturk413/web-component-designer/",
+        "@gokturk413/web-component-designer-widgets-wunderbaum": "./libs/@gokturk413/web-component-designer-widgets-wunderbaum/dist/index-min.js",
+        "@gokturk413/web-component-designer-visualization-addons": "./libs/@gokturk413/web-component-designer-visualization-addons/dist/index.js",
+        "@gokturk413/web-component-designer-codeview-monaco": "./libs/@gokturk413/web-component-designer-codeview-monaco/dist/widgets/codeView/code-view-monaco.js",
+        "@gokturk413/web-component-designer-htmlparserservice-nodehtmlparser": "./libs/@gokturk413/web-component-designer-htmlparserservice-nodehtmlparser/dist/service/htmlParserService/NodeHtmlParserService.js",
+        "@gokturk413/": "./libs/@gokturk413/",
         "@iobroker/socket-client/": "./node_modules/@iobroker/socket-client/",
         "@iobroker/socket-client": "./node_modules/@iobroker/socket-client/dist/esm/index.js",
         "tslib": "./node_modules/tslib/tslib.es6.mjs",

package/dist/importmaps/importmap-runtime.js

@@ -1,13 +1,13 @@
 "use strict";
 const importMapRuntime = {
     "imports": {
-        "@node-projects/": "./node_modules/@node-projects/",
-        "@node-projects/web-component-designer": "./node_modules/@gokturk413/web-component-designer/dist/index.js",
-        "@node-projects/base-custom-webcomponent": "./node_modules/@node-projects/base-custom-webcomponent/dist/index.js",
-        "@node-projects/web-component-designer-visualization-addons": "./node_modules/@gokturk413/web-component-designer-visualization-addons/dist/index.js",
-        "@gokturk413/": "./node_modules/@gokturk413/",
-        "@gokturk413/web-component-designer": "./node_modules/@gokturk413/web-component-designer/dist/index.js",
-        "@gokturk413/web-component-designer-visualization-addons": "./node_modules/@gokturk413/web-component-designer-visualization-addons/dist/index.js",
+        "@node-projects/": "./libs/@node-projects/",
+        "@node-projects/web-component-designer": "./libs/@gokturk413/web-component-designer/dist/index.js",
+        "@node-projects/base-custom-webcomponent": "./libs/@node-projects/base-custom-webcomponent/dist/index.js",
+        "@node-projects/web-component-designer-visualization-addons": "./libs/@gokturk413/web-component-designer-visualization-addons/dist/index.js",
+        "@gokturk413/": "./libs/@gokturk413/",
+        "@gokturk413/web-component-designer": "./libs/@gokturk413/web-component-designer/dist/index.js",
+        "@gokturk413/web-component-designer-visualization-addons": "./libs/@gokturk413/web-component-designer-visualization-addons/dist/index.js",
         "@iobroker/socket-client/": "./node_modules/@iobroker/socket-client/",
         "@iobroker/socket-client": "./node_modules/@iobroker/socket-client/dist/esm/index.js",
         "tslib": "./node_modules/tslib/tslib.es6.mjs",

package/io-package.json

@@ -1,7 +1,7 @@
 {
   "common": {
     "name": "mywebui",
-    "version": "1.42.42",
+    "version": "1.42.44",
     "titleLang": {
       "en": "mywebui",
       "de": "mywebui",
@@ -29,6 +29,20 @@
       "zh-cn": "使用万维网传送器的高锰用户接口"
     },
     "news": {
+      "1.42.44": {
+        "en": "feature: multi-project support - project selector with create/delete in solution explorer; existing data stays as 'default' project, new projects under projects/<name>/; runtime preview passes ?project=, plain runtime.html always shows default (kiosk safe)",
+        "az": "yenilik: multi-proyekt dəstəyi - solution explorer-də yarat/sil düymələri ilə proyekt seçici; mövcud data 'default' proyekt kimi qalır, yeni proyektlər projects/<ad>/ altında; runtime önizləmə ?project= ötürür, parametrsiz runtime.html həmişə default göstərir (kiosk təhlükəsiz)",
+        "tr": "yenilik: çoklu proje desteği - solution explorer'da oluştur/sil düğmeleriyle proje seçici; mevcut veri 'default' proje olarak kalır, yeni projeler projects/<ad>/ altında; runtime önizleme ?project= geçirir, parametresiz runtime.html her zaman default gösterir (kiosk güvenli)",
+        "ru": "новое: поддержка нескольких проектов - селектор проектов с созданием/удалением в solution explorer; существующие данные остаются проектом 'default', новые проекты в projects/<имя>/; предпросмотр runtime передаёт ?project=, runtime.html без параметра всегда показывает default (безопасно для киосков)",
+        "de": "Neu: Multi-Projekt-Unterstützung - Projektauswahl mit Erstellen/Löschen im Solution Explorer; bestehende Daten bleiben als 'default'-Projekt, neue Projekte unter projects/<name>/; Runtime-Vorschau übergibt ?project=, runtime.html ohne Parameter zeigt immer default (kiosksicher)"
+      },
+      "1.42.43": {
+        "en": "refactor: all @gokturk413/@node-projects fork packages vendored into www/libs (edited directly in repo, removed from npm dependencies); build script made safe (gulp delAll no longer deletes www frontend sources)",
+        "az": "refaktor: bütün @gokturk413/@node-projects fork paketləri www/libs-ə vendorlandı (birbaşa repo-da redaktə olunur, npm asılılıqlarından çıxarıldı); build scripti təhlükəsiz edildi (gulp delAll artıq www frontend mənbələrini silmir)",
+        "tr": "refaktör: tüm @gokturk413/@node-projects fork paketleri www/libs'e taşındı (doğrudan repo'da düzenleniyor, npm bağımlılıklarından çıkarıldı); build script güvenli hale getirildi (gulp delAll artık www frontend kaynaklarını silmiyor)",
+        "ru": "рефакторинг: все fork-пакеты @gokturk413/@node-projects перенесены в www/libs (редактируются прямо в репозитории, удалены из npm-зависимостей); скрипт сборки сделан безопасным (gulp delAll больше не удаляет исходники frontend в www)",
+        "de": "Refactoring: alle @gokturk413/@node-projects Fork-Pakete nach www/libs verlagert (direkt im Repo bearbeitet, aus npm-Abhängigkeiten entfernt); Build-Skript abgesichert (gulp delAll löscht www-Frontend-Quellen nicht mehr)"
+      },
       "1.42.42": {
         "en": "feature: 'dynamic' tab in property grid for every element (works also with npm manifest widgets) - per-instance dynamic properties with two-way binding; fix: solution explorer drag crash on nodes without data",
         "az": "yenilik: property grid-də hər element üçün 'dynamic' tabı (npm manifest widget-ləri ilə də işləyir) - instance-əsaslı dinamik property-lər iki-tərəfli binding ilə; düzəliş: solution explorer-də data-sız node-ları drag edəndə çökmə",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.mywebui",
-  "version": "1.42.42",
+  "version": "1.42.44",
   "description": "ioBroker mywebui - Custom edited mywebui by gokturk413 with 3D Editor",
   "type": "module",
   "main": "dist/backend/main.js",
@@ -11,7 +11,7 @@
     "start": "web-dev-server --open",
     "startwww": "cd www && web-dev-server --node-resolve --open",
     "copy-three": "node scripts/copy-three.mjs",
-    "build": "npm i && npm run copy-three && npm run reflection && gulp delAll && tsc && gulp",
+    "build": "npm i && npm run copy-three && gulp delAll && tsc && gulp",
     "postinstall": "node setup-scada-utils.js || true",
     "test:ts": "mocha --config test/mocharc.custom.json test/tests/*.js",
     "test:package": "mocha test/package --exit",
@@ -23,7 +23,7 @@
     "lint": "eslint --ext .ts src/",
     "reflection": "npm run reflection-scripts && npm run reflection-props",
     "reflection-scripts": "cross-env typescript-json-schema './dist/frontend/scripting/IobrokerWebuiScriptCommands.d.ts' '*' --ignoreErrors --strictNullChecks --propOrder > ./src/frontend/generated/ScriptCommands.json",
-    "reflection-props": "cp ./node_modules/@gokturk413/web-component-designer-visualization-addons/dist/interfaces/IScriptMultiplexValue.d.ts ./src/frontend/interfaces/ && cross-env typescript-json-schema './src/frontend/interfaces/*.ts' '*' --ignoreErrors --strictNullChecks --propOrder > ./src/frontend/generated/Properties.json",
+    "reflection-props": "cp ./www/libs/@gokturk413/web-component-designer-visualization-addons/dist/interfaces/IScriptMultiplexValue.d.ts ./src/frontend/interfaces/ && cross-env typescript-json-schema './src/frontend/interfaces/*.ts' '*' --ignoreErrors --strictNullChecks --propOrder > ./src/frontend/generated/Properties.json",
     "obfuscate": "node obfuscate-build.js",
     "obfuscate-license": "node build-license-inline.js",
     "obfuscate-all": "npm run obfuscate && npm run obfuscate-license",
@@ -76,20 +76,9 @@
     "@alcalzone/release-script-plugin-iobroker": "^4.0.0",
     "@alcalzone/release-script-plugin-license": "^4.0.0",
     "@blockly/zoom-to-fit": "^7.0.3",
-    "@gokturk413/base-custom-webcomponent": "*",
-    "@gokturk413/propertygrid.webcomponent": "*",
-    "@gokturk413/splitview.webcomponent": "^1.0.1",
-    "@gokturk413/web-component-designer": "*",
-    "@gokturk413/web-component-designer-codeview-monaco": "*",
-    "@gokturk413/web-component-designer-htmlparserservice-nodehtmlparser": "*",
-    "@gokturk413/web-component-designer-visualization-addons": "*",
-    "@gokturk413/web-component-designer-widgets-wunderbaum": "*",
     "@iobroker/socket-client": "^5.0.2",
     "@iobroker/testing": "^5.1.1",
     "@iobroker/webcomponent-selectid-dialog": "^1.0.12",
-    "@node-projects/lean-he-esm": "^3.4.1",
-    "@node-projects/node-html-parser-esm": "^6.4.1",
-    "@node-projects/web-component-designer-stylesheetservice-css-tools": "^0.1.11",
     "@types/json-schema": "^7.0.15",
     "@web/dev-server": "^0.4.6",
     "blockly": "^12.3.1",

package/www/dist/frontend/common/IobrokerHandler.js

@@ -7,12 +7,24 @@ export class IobrokerHandler {
     host;
     connection;
     adapterName = "mywebui";
-    configPath = "config/";
     namespace = "mywebui.0";
     namespaceFiles = this.namespace + '.data';
     namespaceWidgets = this.namespace + '.widgets';
-    imagePrefix = '/' + this.namespaceFiles + '/config/images/';
-    additionalFilePrefix = '/' + this.namespaceFiles + '/config/additionalfiles/';
+    // multi project support: the 'default' project is the legacy flat 'config/' folder,
+    // every other project lives under 'projects/<name>/config/' with the same structure
+    #currentProject = 'default';
+    get currentProject() {
+        return this.#currentProject;
+    }
+    get configPath() {
+        return this.#currentProject === 'default' ? 'config/' : 'projects/' + this.#currentProject + '/config/';
+    }
+    get imagePrefix() {
+        return '/' + this.namespaceFiles + '/' + this.configPath + 'images/';
+    }
+    get additionalFilePrefix() {
+        return '/' + this.namespaceFiles + '/' + this.configPath + 'additionalfiles/';
+    }
     config;
     globalStylesheet;
     fontDeclarationsStylesheet;
@@ -38,6 +50,75 @@ export class IobrokerHandler {
         this.#cache.set('control', new Map());
         this.#cache.set('3dscreen', new Map());
         this.#cache.set('3dcontrol', new Map());
+        // active project: explicit ?project= url parameter wins (used by runtime/kiosk links),
+        // otherwise the config editor remembers the last selection per browser.
+        // plain runtime.html without parameter always shows the 'default' project,
+        // so kiosk displays are not affected by what is edited in the designer.
+        try {
+            const urlProject = new URLSearchParams(window.location.search).get('project');
+            if (urlProject)
+                this.#currentProject = this._cleanProjectName(urlProject);
+            else if (!window.location.pathname.endsWith('runtime.html'))
+                this.#currentProject = this._cleanProjectName(localStorage.getItem('webui-current-project') ?? 'default');
+        }
+        catch (e) {
+            console.warn('could not determine current project', e);
+        }
+    }
+    _cleanProjectName(name) {
+        name = (name ?? '').toString().trim().toLowerCase().replaceAll(' ', '-');
+        if (!/^[a-z0-9_-]+$/.test(name))
+            return 'default';
+        return name;
+    }
+    async getProjects() {
+        if (this._readyPromises)
+            await this.waitForReady();
+        try {
+            const list = await this._getObjectFromFile('projects.json');
+            if (Array.isArray(list?.projects)) {
+                const projects = list.projects.filter(x => /^[a-z0-9_-]+$/.test(x));
+                if (!projects.includes('default'))
+                    projects.unshift('default');
+                return projects;
+            }
+        }
+        catch (e) { }
+        return ['default'];
+    }
+    async createProject(name) {
+        name = (name ?? '').toString().trim().toLowerCase().replaceAll(' ', '-');
+        if (!/^[a-z0-9_-]+$/.test(name))
+            throw new Error('invalid project name (use a-z, 0-9, -, _): ' + name);
+        const projects = await this.getProjects();
+        if (projects.includes(name))
+            throw new Error('project already exists: ' + name);
+        projects.push(name);
+        await this._saveObjectToFile({ projects: projects.filter(x => x !== 'default') }, 'projects.json');
+        await this._saveObjectToFile({ globalStyle: null, globalScript: null, globalConfig: null, fontDeclarations: null }, 'projects/' + name + '/config/config.json');
+        return name;
+    }
+    async removeProject(name) {
+        if (name === 'default')
+            throw new Error("the 'default' project cannot be deleted");
+        const projects = (await this.getProjects()).filter(x => x !== name && x !== 'default');
+        await this._saveObjectToFile({ projects }, 'projects.json');
+        try {
+            await this.connection.deleteFolder(this.namespaceFiles, '/projects/' + name);
+        }
+        catch (e) {
+            console.warn('error deleting project folder', e);
+        }
+        if (this.#currentProject === name)
+            this.setCurrentProject('default');
+    }
+    // switching reloads the page: global style/script/translations/custom controls
+    // are all project scoped, a clean reload is the only safe way to swap them
+    setCurrentProject(name) {
+        localStorage.setItem('webui-current-project', this._cleanProjectName(name));
+        const url = new URL(window.location.href);
+        url.searchParams.delete('project');
+        window.location.href = url.toString();
     }
     getNormalizedSignalName(id, relativeSignalPath, element) {
         return (relativeSignalPath ?? '') + id;

package/www/dist/frontend/config/CommandHandling.js

@@ -14,16 +14,18 @@ export class CommandHandling {
         let commandName = button.dataset['command'];
         let commandParameter = button.dataset['commandParameter'];
         if (commandName === 'runtime') {
+            // preview always opens the project currently active in the editor
+            const projectParam = iobrokerHandler.currentProject !== 'default' ? '?project=' + iobrokerHandler.currentProject : '';
             let target = this.dockManager?.activeDocument?.resolvedElementContent;
             if (target instanceof IobrokerWebuiScreenEditor) {
-                window.open("runtime.html#screenName=" + target.name);
+                window.open("runtime.html" + projectParam + "#screenName=" + target.name);
             }
             else if (target instanceof IobrokerWebui3DScreenEditor) {
                 const scName = target.sceneData?.name || target.getAttribute?.('scene-name') || '';
-                window.open("runtime.html#3dscreen=" + encodeURIComponent(scName));
+                window.open("runtime.html" + projectParam + "#3dscreen=" + encodeURIComponent(scName));
             }
             else {
-                window.open("runtime.html");
+                window.open("runtime.html" + projectParam);
             }
         }
         else if (commandName === 'new') {

package/www/dist/frontend/config/ConfigureWebcomponentDesigner.js

@@ -48,7 +48,7 @@ export function configureDesigner(bindingsHelper) {
     serviceContainer.register("stylesheetService", designerCanvas => new CssToolsStylesheetService(designerCanvas));
     serviceContainer.config.codeViewWidget = CodeViewMonaco;
     serviceContainer.register('elementsService', new JsonFileElementsService('webui', './dist/frontend/elements-webui.json'));
-    serviceContainer.register('elementsService', new JsonFileElementsService('native', './node_modules/@gokturk413/web-component-designer/config/elements-native.json'));
+    serviceContainer.register('elementsService', new JsonFileElementsService('native', './libs/@gokturk413/web-component-designer/config/elements-native.json'));
     serviceContainer.register('propertyService', new IobrokerWebuiPropertiesService());
     serviceContainer.register('propertyService', new IobrokerWebuiSpecialPropertiesService());
     serviceContainer.register('propertyService', new IobrokerWebuiLitPropertiesService());

package/www/dist/frontend/config/IobrokerWebuiSolutionExplorer.js

@@ -26,7 +26,14 @@ import { IobrokerWebuiScreensView } from "./IobrokerWebuiScreensView.js";
 import { convertToXml, parseXml } from "../helper/XmlHelper.js";
 export class IobrokerWebuiSolutionExplorer extends BaseCustomWebComponentConstructorAppend {
     static template = html `
-        <div id="treeDiv" class="" style="overflow: auto; width:100%; height: 100%;">
+        <div style="display: flex; flex-direction: column; width: 100%; height: 100%;">
+            <div id="projectBar">
+                <select id="projectSelect" title="active project"></select>
+                <button id="projectAdd" title="create new project">＋</button>
+                <button id="projectDel" title="delete current project">✕</button>
+            </div>
+            <div id="treeDiv" class="" style="overflow: auto; width:100%; flex: 1;">
+            </div>
         </div>`;
     static style = css `
         * {
@@ -34,6 +41,36 @@ export class IobrokerWebuiSolutionExplorer extends BaseCustomWebComponentConstru
             -webkit-user-select: none;
             cursor: pointer;
         }
+
+        #projectBar {
+            display: flex;
+            gap: 3px;
+            padding: 3px 4px;
+            align-items: center;
+            border-bottom: 1px solid #d0d0d0;
+            background: #f2f2f2;
+            flex-shrink: 0;
+        }
+
+        #projectBar select {
+            flex: 1;
+            min-width: 0;
+            font-size: 12px;
+        }
+
+        #projectBar button {
+            border: 1px solid #b0b0b0;
+            background: white;
+            border-radius: 3px;
+            font-size: 12px;
+            line-height: 16px;
+            width: 22px;
+            padding: 0;
+        }
+
+        #projectBar button:hover {
+            background: #e0e8f0;
+        }
         
         div.wunderbaum span.wb-node i.wb-indent::before {
             content: "";
@@ -85,9 +122,64 @@ export class IobrokerWebuiSolutionExplorer extends BaseCustomWebComponentConstru
     constructor() {
         super();
         this._treeDiv = this._getDomElement('treeDiv');
+        this._projectSelect = this._getDomElement('projectSelect');
+        this._projectAdd = this._getDomElement('projectAdd');
+        this._projectDel = this._getDomElement('projectDel');
         this.shadowRoot.adoptedStyleSheets = [wunderbaumStyle, defaultStyle, IobrokerWebuiSolutionExplorer.style];
         this._createThumbnailTooltip();
     }
+    async _initProjectBar() {
+        const fillSelect = async () => {
+            const projects = await iobrokerHandler.getProjects();
+            this._projectSelect.innerHTML = '';
+            for (const p of projects) {
+                const opt = document.createElement('option');
+                opt.value = p;
+                opt.textContent = p;
+                if (p === iobrokerHandler.currentProject)
+                    opt.selected = true;
+                this._projectSelect.appendChild(opt);
+            }
+            // if the stored project does not exist anymore, fall back to default
+            if (!projects.includes(iobrokerHandler.currentProject))
+                iobrokerHandler.setCurrentProject('default');
+        };
+        await fillSelect();
+        this._projectSelect.onchange = () => {
+            if (this._projectSelect.value !== iobrokerHandler.currentProject)
+                iobrokerHandler.setCurrentProject(this._projectSelect.value);
+        };
+        this._projectAdd.onclick = async () => {
+            const name = prompt('New project name (a-z, 0-9, -, _):');
+            if (!name)
+                return;
+            try {
+                const created = await iobrokerHandler.createProject(name);
+                if (confirm("Project '" + created + "' created. Switch to it now?"))
+                    iobrokerHandler.setCurrentProject(created);
+                else
+                    await fillSelect();
+            }
+            catch (err) {
+                alert(err.message ?? err);
+            }
+        };
+        this._projectDel.onclick = async () => {
+            const current = iobrokerHandler.currentProject;
+            if (current === 'default') {
+                alert("The 'default' project cannot be deleted.");
+                return;
+            }
+            if (!confirm("Delete project '" + current + "' with ALL its screens, controls and files? This cannot be undone!"))
+                return;
+            try {
+                await iobrokerHandler.removeProject(current);
+            }
+            catch (err) {
+                alert(err.message ?? err);
+            }
+        };
+    }
     _createThumbnailTooltip() {
         this._thumbnailTooltip = document.createElement('div');
         this._thumbnailTooltip.className = 'control-thumbnail-tooltip';
@@ -102,6 +194,7 @@ export class IobrokerWebuiSolutionExplorer extends BaseCustomWebComponentConstru
         });
         iobrokerHandler.imagesChanged.on(() => this._refreshNode('images'));
         iobrokerHandler.additionalFilesChanged.on(() => this._refreshAdditionalFilesNode());
+        this._initProjectBar();
         await sleep(100);
         this._loadTree();
         //Preload after a timeout

package/www/dist/frontend/config/importDescriptions.json

@@ -5,6 +5,6 @@
     },
     {
         "name": "inmemory://model/@gokturk413/base-custom-webcomponent.d.ts",
-        "file": "/mywebui/node_modules/@gokturk413/base-custom-webcomponent/dist/BaseCustomWebComponent.d.ts"
+        "file": "/mywebui/libs/@gokturk413/base-custom-webcomponent/dist/BaseCustomWebComponent.d.ts"
     }
 ]

package/www/dist/importmaps/importmap-config.js

@@ -1,45 +1,45 @@
 "use strict";
 const importMapConfig = {
     "imports": {
-        "@node-projects/base-custom-webcomponent": "./node_modules/@gokturk413/base-custom-webcomponent/dist/index.js",
-        "@node-projects/web-component-designer": "./node_modules/@gokturk413/web-component-designer/dist/index-min.js",
-        "@node-projects/web-component-designer-widgets-wunderbaum": "./node_modules/@gokturk413/web-component-designer-widgets-wunderbaum/dist/index-min.js",
-        "@node-projects/lean-he-esm": "./node_modules/@node-projects/lean-he-esm/lib/index-min.js",
-        "@node-projects/node-html-parser-esm": "./node_modules/@node-projects/node-html-parser-esm/dist/index-min.js",
+        "@node-projects/base-custom-webcomponent": "./libs/@gokturk413/base-custom-webcomponent/dist/index.js",
+        "@node-projects/web-component-designer": "./libs/@gokturk413/web-component-designer/dist/index-min.js",
+        "@node-projects/web-component-designer-widgets-wunderbaum": "./libs/@gokturk413/web-component-designer-widgets-wunderbaum/dist/index-min.js",
+        "@node-projects/lean-he-esm": "./libs/@node-projects/lean-he-esm/lib/index-min.js",
+        "@node-projects/node-html-parser-esm": "./libs/@node-projects/node-html-parser-esm/dist/index-min.js",
         "dock-spawn-ts": "./node_modules/dock-spawn-ts/lib/js/index-webcomponent-min.js",
-        "a_@node-projects/base-custom-webcomponent": "./node_modules/@gokturk413/base-custom-webcomponent/dist/index.js",
-        "a_@node-projects/web-component-designer": "./node_modules/@gokturk413/web-component-designer/dist/index.js",
-        "a_@node-projects/web-component-designer-widgets-wunderbaum": "./node_modules/@gokturk413/web-component-designer-widgets-wunderbaum/dist/index.js",
-        "a_@node-projects/lean-he-esm": "./node_modules/@node-projects/lean-he-esm/lib/index.js",
-        "a_@node-projects/node-html-parser-esm": "./node_modules/@node-projects/node-html-parser-esm/dist/index.js",
+        "a_@node-projects/base-custom-webcomponent": "./libs/@gokturk413/base-custom-webcomponent/dist/index.js",
+        "a_@node-projects/web-component-designer": "./libs/@gokturk413/web-component-designer/dist/index.js",
+        "a_@node-projects/web-component-designer-widgets-wunderbaum": "./libs/@gokturk413/web-component-designer-widgets-wunderbaum/dist/index.js",
+        "a_@node-projects/lean-he-esm": "./libs/@node-projects/lean-he-esm/lib/index.js",
+        "a_@node-projects/node-html-parser-esm": "./libs/@node-projects/node-html-parser-esm/dist/index.js",
         "a_dock-spawn-ts": "./node_modules/dock-spawn-ts/lib/js/index-webcomponent.js",
         "monaco-editor/": "./node_modules/monaco-editor/",
-        "@node-projects/web-component-designer/": "./node_modules/@gokturk413/web-component-designer/",
+        "@node-projects/web-component-designer/": "./libs/@gokturk413/web-component-designer/",
         "@adobe/css-tools": "./node_modules/@adobe/css-tools/dist/esm/adobe-css-tools.mjs",
         "esprima-next": "./node_modules/esprima-next/dist/esprima.js",
-        "@node-projects/css-parser": "./node_modules/@node-projects/css-parser/dist/index.js",
-        "@node-projects/": "./node_modules/@node-projects/",
-        "@node-projects/web-component-designer-htmlparserservice-nodehtmlparser": "./node_modules/@gokturk413/web-component-designer-htmlparserservice-nodehtmlparser/dist/service/htmlParserService/NodeHtmlParserService.js",
-        "@node-projects/web-component-designer-codeview-monaco": "./node_modules/@gokturk413/web-component-designer-codeview-monaco/dist/widgets/codeView/code-view-monaco.js",
-        "@node-projects/web-component-designer-stylesheetservice-css-tools": "./node_modules/@node-projects/web-component-designer-stylesheetservice-css-tools/dist/service/stylesheetservice/CssToolsStylesheetService.js",
-        "@gokturk413/web-component-designer-stylesheetservice-css-tools": "./node_modules/@node-projects/web-component-designer-stylesheetservice-css-tools/dist/service/stylesheetservice/CssToolsStylesheetService.js",
-        "@node-projects/web-component-designer-visualization-addons": "./node_modules/@gokturk413/web-component-designer-visualization-addons/dist/index.js",
-        "@node-projects/web-component-designer-visualization-addons/": "./node_modules/@gokturk413/web-component-designer-visualization-addons/",
-        "@node-projects/propertygrid.webcomponent": "./node_modules/@gokturk413/propertygrid.webcomponent/dist/PropertyGrid.js",
-        "@node-projects/splitview.webcomponent": "./node_modules/@gokturk413/splitview.webcomponent/dist/index.js",
-        "@gokturk413/splitview.webcomponent": "./node_modules/@gokturk413/splitview.webcomponent/dist/index.js",
-        "@gokturk413/splitview.webcomponent/": "./node_modules/@gokturk413/splitview.webcomponent/",
-        "@gokturk413/web-component-designer": "./node_modules/@gokturk413/web-component-designer/dist/index-min.js",
-        "@gokturk413/web-component-designer/": "./node_modules/@gokturk413/web-component-designer/",
-        "@gokturk413/web-component-designer-widgets-wunderbaum": "./node_modules/@gokturk413/web-component-designer-widgets-wunderbaum/dist/index-min.js",
-        "@gokturk413/web-component-designer-visualization-addons": "./node_modules/@gokturk413/web-component-designer-visualization-addons/dist/index.js",
-        "@gokturk413/web-component-designer-codeview-monaco": "./node_modules/@gokturk413/web-component-designer-codeview-monaco/dist/widgets/codeView/code-view-monaco.js",
-        "@gokturk413/web-component-designer-htmlparserservice-nodehtmlparser": "./node_modules/@gokturk413/web-component-designer-htmlparserservice-nodehtmlparser/dist/service/htmlParserService/NodeHtmlParserService.js",
-        "@gokturk413/base-custom-webcomponent": "./node_modules/@gokturk413/base-custom-webcomponent/dist/index.js",
-        "@gokturk413/base-custom-webcomponent/": "./node_modules/@gokturk413/base-custom-webcomponent/",
-        "@gokturk413/propertygrid.webcomponent": "./node_modules/@gokturk413/propertygrid.webcomponent/dist/PropertyGrid.js",
-        "@gokturk413/propertygrid.webcomponent/": "./node_modules/@gokturk413/propertygrid.webcomponent/",
-        "@gokturk413/": "./node_modules/@gokturk413/",
+        "@node-projects/css-parser": "./libs/@node-projects/css-parser/dist/index.js",
+        "@node-projects/": "./libs/@node-projects/",
+        "@node-projects/web-component-designer-htmlparserservice-nodehtmlparser": "./libs/@gokturk413/web-component-designer-htmlparserservice-nodehtmlparser/dist/service/htmlParserService/NodeHtmlParserService.js",
+        "@node-projects/web-component-designer-codeview-monaco": "./libs/@gokturk413/web-component-designer-codeview-monaco/dist/widgets/codeView/code-view-monaco.js",
+        "@node-projects/web-component-designer-stylesheetservice-css-tools": "./libs/@node-projects/web-component-designer-stylesheetservice-css-tools/dist/service/stylesheetservice/CssToolsStylesheetService.js",
+        "@gokturk413/web-component-designer-stylesheetservice-css-tools": "./libs/@node-projects/web-component-designer-stylesheetservice-css-tools/dist/service/stylesheetservice/CssToolsStylesheetService.js",
+        "@node-projects/web-component-designer-visualization-addons": "./libs/@gokturk413/web-component-designer-visualization-addons/dist/index.js",
+        "@node-projects/web-component-designer-visualization-addons/": "./libs/@gokturk413/web-component-designer-visualization-addons/",
+        "@node-projects/propertygrid.webcomponent": "./libs/@gokturk413/propertygrid.webcomponent/dist/PropertyGrid.js",
+        "@node-projects/splitview.webcomponent": "./libs/@gokturk413/splitview.webcomponent/dist/index.js",
+        "@gokturk413/splitview.webcomponent": "./libs/@gokturk413/splitview.webcomponent/dist/index.js",
+        "@gokturk413/splitview.webcomponent/": "./libs/@gokturk413/splitview.webcomponent/",
+        "@gokturk413/web-component-designer": "./libs/@gokturk413/web-component-designer/dist/index-min.js",
+        "@gokturk413/web-component-designer/": "./libs/@gokturk413/web-component-designer/",
+        "@gokturk413/web-component-designer-widgets-wunderbaum": "./libs/@gokturk413/web-component-designer-widgets-wunderbaum/dist/index-min.js",
+        "@gokturk413/web-component-designer-visualization-addons": "./libs/@gokturk413/web-component-designer-visualization-addons/dist/index.js",
+        "@gokturk413/web-component-designer-codeview-monaco": "./libs/@gokturk413/web-component-designer-codeview-monaco/dist/widgets/codeView/code-view-monaco.js",
+        "@gokturk413/web-component-designer-htmlparserservice-nodehtmlparser": "./libs/@gokturk413/web-component-designer-htmlparserservice-nodehtmlparser/dist/service/htmlParserService/NodeHtmlParserService.js",
+        "@gokturk413/base-custom-webcomponent": "./libs/@gokturk413/base-custom-webcomponent/dist/index.js",
+        "@gokturk413/base-custom-webcomponent/": "./libs/@gokturk413/base-custom-webcomponent/",
+        "@gokturk413/propertygrid.webcomponent": "./libs/@gokturk413/propertygrid.webcomponent/dist/PropertyGrid.js",
+        "@gokturk413/propertygrid.webcomponent/": "./libs/@gokturk413/propertygrid.webcomponent/",
+        "@gokturk413/": "./libs/@gokturk413/",
         "@iobroker/socket-client/": "./node_modules/@iobroker/socket-client/",
         "@iobroker/socket-client": "./node_modules/@iobroker/socket-client/dist/esm/index.js",
         "tslib": "./node_modules/tslib/tslib.es6.mjs",

package/www/dist/importmaps/importmap-runtime.js

@@ -1,19 +1,19 @@
 "use strict";
 const importMapRuntime = {
     "imports": {
-        "@node-projects/css-parser": "./node_modules/@node-projects/css-parser/dist/index.js",
-        "@node-projects/": "./node_modules/@node-projects/",
-        "@node-projects/web-component-designer": "./node_modules/@gokturk413/web-component-designer/dist/index.js",
-        "@node-projects/base-custom-webcomponent": "./node_modules/@gokturk413/base-custom-webcomponent/dist/index.js",
-        "@node-projects/web-component-designer-visualization-addons": "./node_modules/@gokturk413/web-component-designer-visualization-addons/dist/index.js",
-        "@node-projects/web-component-designer-visualization-addons/": "./node_modules/@gokturk413/web-component-designer-visualization-addons/",
-        "@gokturk413/": "./node_modules/@gokturk413/",
-        "@gokturk413/web-component-designer": "./node_modules/@gokturk413/web-component-designer/dist/index.js",
-        "@gokturk413/web-component-designer-visualization-addons": "./node_modules/@gokturk413/web-component-designer-visualization-addons/dist/index.js",
-        "@gokturk413/base-custom-webcomponent": "./node_modules/@gokturk413/base-custom-webcomponent/dist/index.js",
-        "@gokturk413/base-custom-webcomponent/": "./node_modules/@gokturk413/base-custom-webcomponent/",
-        "@gokturk413/propertygrid.webcomponent": "./node_modules/@gokturk413/propertygrid.webcomponent/dist/PropertyGrid.js",
-        "@gokturk413/propertygrid.webcomponent/": "./node_modules/@gokturk413/propertygrid.webcomponent/",
+        "@node-projects/css-parser": "./libs/@node-projects/css-parser/dist/index.js",
+        "@node-projects/": "./libs/@node-projects/",
+        "@node-projects/web-component-designer": "./libs/@gokturk413/web-component-designer/dist/index.js",
+        "@node-projects/base-custom-webcomponent": "./libs/@gokturk413/base-custom-webcomponent/dist/index.js",
+        "@node-projects/web-component-designer-visualization-addons": "./libs/@gokturk413/web-component-designer-visualization-addons/dist/index.js",
+        "@node-projects/web-component-designer-visualization-addons/": "./libs/@gokturk413/web-component-designer-visualization-addons/",
+        "@gokturk413/": "./libs/@gokturk413/",
+        "@gokturk413/web-component-designer": "./libs/@gokturk413/web-component-designer/dist/index.js",
+        "@gokturk413/web-component-designer-visualization-addons": "./libs/@gokturk413/web-component-designer-visualization-addons/dist/index.js",
+        "@gokturk413/base-custom-webcomponent": "./libs/@gokturk413/base-custom-webcomponent/dist/index.js",
+        "@gokturk413/base-custom-webcomponent/": "./libs/@gokturk413/base-custom-webcomponent/",
+        "@gokturk413/propertygrid.webcomponent": "./libs/@gokturk413/propertygrid.webcomponent/dist/PropertyGrid.js",
+        "@gokturk413/propertygrid.webcomponent/": "./libs/@gokturk413/propertygrid.webcomponent/",
         "@iobroker/socket-client/": "./node_modules/@iobroker/socket-client/",
         "@iobroker/socket-client": "./node_modules/@iobroker/socket-client/dist/esm/index.js",
         "tslib": "./node_modules/tslib/tslib.es6.mjs",