@node-projects/web-component-designer 0.0.242 → 0.0.244

package/dist/elements/controls/SimpleSplitView.js

@@ -9,6 +9,7 @@ export class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
       height: 100%;
       width: 100%;
       grid-template-rows: calc(var(--split) * 1%) 5px calc(((100 - var(--split)) * 1%) - 5px);
+      grid-template-columns: 100%;
       display: grid;
       align-items: center;
     }

package/dist/elements/documentContainer.d.ts

@@ -26,7 +26,7 @@ export declare class DocumentContainer extends BaseCustomWebComponentLazyAppend
         name: string;
         newStyle: string;
         oldStyle: string;
-        changeSource: 'extern' | 'styleupdate';
+        changeSource: 'extern' | 'styleupdate' | 'undo';
     }>;
     onContentChanged: TypedEvent<void>;
     private _serviceContainer;

package/dist/elements/item/DesignItem.d.ts

@@ -71,7 +71,7 @@ export declare class DesignItem implements IDesignItem {
     constructor(node: Node, parsedNode: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer);
     openGroup(title: string): ChangeGroup;
     getOrCreateDesignItem(node: Node): IDesignItem;
-    static GetOrCreateDesignItem(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem;
+    static GetOrCreateDesignItem(node: Node, parsedNode: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem;
     static GetDesignItem(node: Node): IDesignItem;
     setStyle(name: string, value?: string | null, important?: boolean): void;
     removeStyle(name: string): void;

package/dist/elements/item/DesignItem.js

@@ -215,7 +215,7 @@ export class DesignItem {
         const grp = this.openGroup('set content');
         this.clearChildren();
         let t = document.createTextNode(value);
-        let di = DesignItem.GetOrCreateDesignItem(t, this.serviceContainer, this.instanceServiceContainer);
+        let di = DesignItem.GetOrCreateDesignItem(t, t, this.serviceContainer, this.instanceServiceContainer);
         if (this.nodeType == NodeType.TextNode) {
             const idx = this.parent.indexOf(this);
             const parent = this.parent;
@@ -236,7 +236,7 @@ export class DesignItem {
             range.selectNode(document.body);
             const fragment = range.createContextualFragment(value);
             for (const n of fragment.childNodes) {
-                let di = DesignItem.GetOrCreateDesignItem(n, this.serviceContainer, this.instanceServiceContainer);
+                let di = DesignItem.GetOrCreateDesignItem(n, n, this.serviceContainer, this.instanceServiceContainer);
                 this.insertChild(di);
             }
             grp.commit();
@@ -324,14 +324,18 @@ export class DesignItem {
         return this.instanceServiceContainer.undoService.openGroup(title);
     }
     getOrCreateDesignItem(node) {
-        return DesignItem.GetOrCreateDesignItem(node, this.serviceContainer, this.instanceServiceContainer);
+        return DesignItem.GetOrCreateDesignItem(node, node, this.serviceContainer, this.instanceServiceContainer);
     }
-    static GetOrCreateDesignItem(node, serviceContainer, instanceServiceContainer) {
+    static GetOrCreateDesignItem(node, parsedNode, serviceContainer, instanceServiceContainer) {
         if (!node)
             return null;
         let designItem = DesignItem._designItemMap.get(node);
         if (!designItem) {
-            designItem = new DesignItem(node, node, serviceContainer, instanceServiceContainer);
+            let dis = serviceContainer.designItemService;
+            if (dis)
+                designItem = dis.createDesignItem(node, parsedNode, serviceContainer, instanceServiceContainer);
+            else
+                designItem = new DesignItem(node, parsedNode, serviceContainer, instanceServiceContainer);
         }
         return designItem;
     }

package/dist/elements/services/ServiceContainer.d.ts

@@ -40,6 +40,7 @@ import { IStylesheetService } from './stylesheetService/IStylesheetService.js';
 import { IDesignerCanvas } from '../widgets/designerView/IDesignerCanvas.js';
 import { IDesignItemDocumentPositionService } from './designItemDocumentPositionService/IDesignItemDocumentPositionService.js';
 import { IDragDropService } from './dragDropService/IDragDropService.js';
+import { IDesignItemService } from './designItemService/IDesignItemService.js';
 interface ServiceNameMap {
     "propertyService": IPropertiesService;
     "containerService": IPlacementService;
@@ -61,6 +62,7 @@ interface ServiceNameMap {
     "elementInteractionService": IElementInteractionService;
     "propertyGroupsService": IPropertyTabsService;
     "dragDropService": IDragDropService;
+    "designItemService": IDesignItemService;
     "undoService": (designerCanvas: IDesignerCanvas) => IUndoService;
     "selectionService": (designerCanvas: IDesignerCanvas) => ISelectionService;
     "contentService": (designerCanvas: IDesignerCanvas) => IContentService;
@@ -104,5 +106,6 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
     get copyPasteService(): ICopyPasteService;
     get modelCommandService(): IModelCommandService;
     get demoProviderService(): IDemoProviderService;
+    get designItemService(): IDesignItemService;
 }
 export {};

package/dist/elements/services/ServiceContainer.js

@@ -85,4 +85,7 @@ export class ServiceContainer extends BaseServiceContainer {
     get demoProviderService() {
         return this.getLastService('demoProviderService');
     }
+    get designItemService() {
+        return this.getLastService('designItemService');
+    }
 }

package/dist/elements/services/designItemService/DesignItemService.d.ts

@@ -0,0 +1,7 @@
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
+import { ServiceContainer } from "../ServiceContainer.js";
+import { IDesignItemService } from "./IDesignItemService.js";
+export declare class DesignItemService implements IDesignItemService {
+    createDesignItem(node: Node, parsedNode: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem;
+}

package/dist/elements/services/designItemService/DesignItemService.js

@@ -0,0 +1,6 @@
+import { DesignItem } from "../../item/DesignItem.js";
+export class DesignItemService {
+    createDesignItem(node, parsedNode, serviceContainer, instanceServiceContainer) {
+        return new DesignItem(node, parsedNode, serviceContainer, instanceServiceContainer);
+    }
+}

package/dist/elements/services/designItemService/IDesignItemService.d.ts

@@ -0,0 +1,6 @@
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
+import { ServiceContainer } from "../ServiceContainer.js";
+export interface IDesignItemService {
+    createDesignItem(node: Node, parsedNode: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem;
+}

package/dist/elements/services/designItemService/IDesignItemService.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/services/dragDropService/DragDropService.js

@@ -65,7 +65,7 @@ export class DragDropService {
                 //check we don't try to move a item over one of its children..
             }
             else {
-                newContainerElementDesignItem = DesignItem.GetOrCreateDesignItem(e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                newContainerElementDesignItem = DesignItem.GetOrCreateDesignItem(e, e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
                 const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
                 newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
                 if (newContainerService) {

package/dist/elements/services/htmlParserService/LitElementParserService.js

@@ -47,7 +47,7 @@ export class LitElementParserService {
                     element = document.createElement(item.rawTagName);
                 manualCreatedElement = true;
             }
-            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
+            designItem = DesignItem.GetOrCreateDesignItem(element, item, serviceContainer, instanceServiceContainer);
             let style = '';
             let attr = item.attributes;
             for (let a in attr) {
@@ -80,11 +80,11 @@ export class LitElementParserService {
         else if (item.nodeType == 3) {
             this._parseDiv.innerHTML = item.rawText;
             let element = this._parseDiv.childNodes[0];
-            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
+            designItem = DesignItem.GetOrCreateDesignItem(element, item, serviceContainer, instanceServiceContainer);
         }
         else if (item.nodeType == 8) {
             let element = document.createComment(item.rawText);
-            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
+            designItem = DesignItem.GetOrCreateDesignItem(element, item, serviceContainer, instanceServiceContainer);
         }
         return designItem;
     }

package/dist/elements/services/htmlParserService/NodeHtmlParserService.js

@@ -37,7 +37,7 @@ export class NodeHtmlParserService {
                     element = document.createElement(item.rawTagName);
                 manualCreatedElement = true;
             }
-            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
+            designItem = DesignItem.GetOrCreateDesignItem(element, item, serviceContainer, instanceServiceContainer);
             if (!snippet && instanceServiceContainer.designItemDocumentPositionService)
                 instanceServiceContainer.designItemDocumentPositionService.setPosition(designItem, { start: item.range[0], length: item.range[1] - item.range[0] });
             let style = '';
@@ -74,13 +74,13 @@ export class NodeHtmlParserService {
         else if (item.nodeType == 3) {
             this._parseDiv.innerHTML = item.rawText;
             let element = this._parseDiv.childNodes[0];
-            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
+            designItem = DesignItem.GetOrCreateDesignItem(element, item, serviceContainer, instanceServiceContainer);
             if (!snippet && instanceServiceContainer.designItemDocumentPositionService)
                 instanceServiceContainer.designItemDocumentPositionService.setPosition(designItem, { start: item.range[0], length: item.range[1] - item.range[0] });
         }
         else if (item.nodeType == 8) {
             let element = document.createComment(item.rawText);
-            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
+            designItem = DesignItem.GetOrCreateDesignItem(element, item, serviceContainer, instanceServiceContainer);
             if (!snippet && instanceServiceContainer.designItemDocumentPositionService)
                 instanceServiceContainer.designItemDocumentPositionService.setPosition(designItem, { start: item.range[0], length: item.range[1] - item.range[0] });
         }

package/dist/elements/services/stylesheetService/AbstractStylesheetService.d.ts

@@ -32,12 +32,13 @@ export declare abstract class AbstractStylesheetService implements IStylesheetSe
     abstract insertDeclarationIntoRule(rule: IStyleRule, property: string, value: string, important: boolean): boolean;
     abstract removeDeclarationFromRule(rule: IStyleRule, property: string): boolean;
     abstract updateCompleteStylesheet(name: string, newStyle: string): any;
+    abstract updateCompleteStylesheetWithoutUndo(name: string, newStyle: string): any;
     abstract updateDeclarationValueWithoutUndo(declaration: IStyleDeclaration, value: string, important: boolean): any;
     stylesheetChanged: TypedEvent<{
         name: string;
         newStyle: string;
         oldStyle: string;
-        changeSource: 'extern' | 'styleupdate';
+        changeSource: 'extern' | 'styleupdate' | 'undo';
     }>;
     stylesheetsChanged: TypedEvent<void>;
     protected elementMatchesASelector(designItem: IDesignItem, selectors: string[]): boolean;

package/dist/elements/services/stylesheetService/AbstractStylesheetService.js

@@ -1,6 +1,5 @@
 import { TypedEvent } from "@node-projects/base-custom-webcomponent";
 import { DesignerCanvas } from '../../widgets/designerView/designerCanvas.js';
-import { StylesheetStyleChangeAction } from "../undoService/transactionItems/StylesheetStyleChangeAction.js";
 export class AbstractStylesheetService {
     _stylesheets = new Map();
     _documentStylesheets = new Map();
@@ -74,13 +73,7 @@ export class AbstractStylesheetService {
         return stylesheets;
     }
     updateDeclarationValue(declaration, value, important) {
-        if (!declaration.stylesheet.designItem) {
-            const action = new StylesheetStyleChangeAction(this, declaration, value, declaration.value);
-            this._instanceServiceContainer.undoService.execute(action);
-        }
-        else {
-            this.updateDeclarationValueWithoutUndo(declaration, value, important);
-        }
+        this.updateDeclarationValueWithoutUndo(declaration, value, important);
     }
     stylesheetChanged = new TypedEvent();
     stylesheetsChanged = new TypedEvent();

package/dist/elements/services/stylesheetService/CssToolsStylesheetService.d.ts

@@ -36,5 +36,7 @@ export declare class CssToolsStylesheetService extends AbstractStylesheetService
     removeDeclarationFromRule(rule: IRuleWithAST, property: string): boolean;
     private updateStylesheet;
     updateCompleteStylesheet(name: string, newStyle: string): void;
+    updateCompleteStylesheetWithoutUndo(name: string, newStyle: string, noUndo?: boolean): void;
+    private updateCompleteStylesheetInternal;
 }
 export {};

package/dist/elements/services/stylesheetService/CssToolsStylesheetService.js

@@ -57,6 +57,15 @@ export class CssToolsStylesheetService extends AbstractStylesheetService {
         declaration.ast.value = important ? value + ' !important' : value;
         let ss = this._allStylesheets.get(declaration.parent.stylesheetName);
         this.updateStylesheet(ss);
+        /*
+        declaration.ast.value = important ? value + ' !important' : value;
+        let ss = declaration.ast;
+        while (ss?.parent)
+            ss = ss?.parent;
+        let obj = { ast: ss, stylesheet: declaration.stylesheet };
+        this._allStylesheets.set(declaration.parent.stylesheetName, obj)
+        this.updateStylesheet(obj);
+        */
     }
     insertDeclarationIntoRule(rule, property, value, important) {
         rule.ast.declarations.push({
@@ -85,6 +94,12 @@ export class CssToolsStylesheetService extends AbstractStylesheetService {
             this.stylesheetChanged.emit({ name: ss.stylesheet.name, newStyle: ss.stylesheet.content, oldStyle: old, changeSource: 'styleupdate' });
     }
     updateCompleteStylesheet(name, newStyle) {
+        this.updateCompleteStylesheetInternal(name, newStyle, 'styleupdate');
+    }
+    updateCompleteStylesheetWithoutUndo(name, newStyle, noUndo = false) {
+        this.updateCompleteStylesheetInternal(name, newStyle, 'undo');
+    }
+    updateCompleteStylesheetInternal(name, newStyle, changeSource) {
         const ss = this._allStylesheets.get(name);
         if (ss.stylesheet.content != newStyle) {
             const old = ss.stylesheet.content;
@@ -93,7 +108,7 @@ export class CssToolsStylesheetService extends AbstractStylesheetService {
                 ss.stylesheet.designItem.content = ss.stylesheet.content;
             }
             else
-                this.stylesheetChanged.emit({ name: ss.stylesheet.name, newStyle: ss.stylesheet.content, oldStyle: old, changeSource: 'styleupdate' });
+                this.stylesheetChanged.emit({ name: ss.stylesheet.name, newStyle: ss.stylesheet.content, oldStyle: old, changeSource });
         }
     }
 }

package/dist/elements/services/stylesheetService/CssTreeStylesheetService.d.ts

@@ -45,6 +45,8 @@ export declare class CssTreeStylesheetService extends AbstractStylesheetService
     insertDeclarationIntoRule(rule: IRuleWithAST, property: string, value: string, important: boolean): boolean;
     removeDeclarationFromRule(rule: IRuleWithAST, property: string): boolean;
     updateCompleteStylesheet(name: string, newStyle: string): void;
+    updateCompleteStylesheetWithoutUndo(name: string, newStyle: string, noUndo?: boolean): void;
+    private updateCompleteStylesheetInternal;
     private rulesFromAST;
     private astHasChildren;
     private buildSelectorString;

package/dist/elements/services/stylesheetService/CssTreeStylesheetService.js

@@ -113,6 +113,12 @@ export class CssTreeStylesheetService extends AbstractStylesheetService {
         return true;
     }
     updateCompleteStylesheet(name, newStyle) {
+        this.updateCompleteStylesheetInternal(name, newStyle, 'styleupdate');
+    }
+    updateCompleteStylesheetWithoutUndo(name, newStyle, noUndo = false) {
+        this.updateCompleteStylesheetInternal(name, newStyle, 'undo');
+    }
+    updateCompleteStylesheetInternal(name, newStyle, changeSource) {
         const ss = this._allStylesheets.get(name);
         if (ss.stylesheet.content != newStyle) {
             const old = ss.stylesheet.content;
@@ -121,7 +127,7 @@ export class CssTreeStylesheetService extends AbstractStylesheetService {
                 ss.stylesheet.designItem.content = ss.stylesheet.content;
             }
             else
-                this.stylesheetChanged.emit({ name: ss.stylesheet.name, newStyle: ss.stylesheet.content, oldStyle: old, changeSource: 'styleupdate' });
+                this.stylesheetChanged.emit({ name: ss.stylesheet.name, newStyle: ss.stylesheet.content, oldStyle: old, changeSource });
         }
     }
     /* Section covers the internal traversal creation of rules and declarations */

package/dist/elements/services/stylesheetService/IStylesheetService.d.ts

@@ -31,11 +31,12 @@ export interface IStylesheetService {
     insertDeclarationIntoRule(rule: IStyleRule, property: string, value: string, important: boolean): boolean;
     removeDeclarationFromRule(rule: IStyleRule, property: string): boolean;
     updateCompleteStylesheet(name: string, newStyle: string): void;
+    updateCompleteStylesheetWithoutUndo(name: string, newStyle: string): void;
     stylesheetChanged: TypedEvent<{
         name: string;
         newStyle: string;
         oldStyle: string;
-        changeSource: 'extern' | 'styleupdate';
+        changeSource: 'extern' | 'styleupdate' | 'undo';
     }>;
     stylesheetsChanged: TypedEvent<void>;
 }

package/dist/elements/services/undoService/transactionItems/StylesheetChangedAction.js

@@ -12,10 +12,10 @@ export class StylesheetChangedAction {
         return [];
     }
     undo() {
-        this.stylesheetService.updateCompleteStylesheet(this.name, this.oldValue);
+        this.stylesheetService.updateCompleteStylesheetWithoutUndo(this.name, this.oldValue);
     }
     do() {
-        this.stylesheetService.updateCompleteStylesheet(this.name, this.newValue);
+        this.stylesheetService.updateCompleteStylesheetWithoutUndo(this.name, this.newValue);
     }
     name;
     newValue;

package/dist/elements/widgets/codeView/code-view-code-mirror copy.d.ts

@@ -0,0 +1,25 @@
+import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { ICodeView } from './ICodeView.js';
+import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js';
+import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
+import { IDisposable } from '../../../interfaces/IDisposable.js';
+export declare class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend implements ICodeView, IDisposable {
+    canvasElement: HTMLElement;
+    elementsToPackages: Map<string, string>;
+    code: string;
+    onTextChanged: any;
+    mode: string;
+    private _codeMirrorEditor;
+    private _editor;
+    static readonly style: any;
+    static readonly template: any;
+    constructor();
+    dispose(): void;
+    executeCommand(command: IUiCommand): void;
+    canExecuteCommand(command: IUiCommand): boolean;
+    focusEditor(): void;
+    ready(): void;
+    update(code: any): void;
+    getText(): string;
+    setSelection(position: IStringPosition): void;
+}

package/dist/elements/widgets/codeView/code-view-code-mirror copy.js

@@ -0,0 +1,106 @@
+import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { CommandType } from '../../../commandHandling/CommandType.js';
+export class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
+    canvasElement;
+    elementsToPackages;
+    code;
+    onTextChanged = new TypedEvent();
+    mode = 'xml';
+    _codeMirrorEditor;
+    _editor;
+    static style = css `
+    :host {
+      display: block;
+      height: 100%;
+      width: 100%;
+    }`;
+    static template = html `
+    <div  style="width: 100%; height: 100%; overflow: auto;">
+      <div id="textarea"></div>
+    </div>`;
+    constructor() {
+        super();
+        this._restoreCachedInititalValues();
+        import("codemirror/lib/codemirror.css", { with: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, ...this.shadowRoot.adoptedStyleSheets]);
+        import("codemirror/addon/fold/foldgutter.css", { with: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, ...this.shadowRoot.adoptedStyleSheets]);
+        this.style.display = 'block';
+        this._editor = this._getDomElement('textarea');
+    }
+    dispose() {
+    }
+    executeCommand(command) {
+        switch (command.type) {
+            case CommandType.undo:
+                this._codeMirrorEditor.undo();
+                break;
+            case CommandType.redo:
+                this._codeMirrorEditor.redo();
+                break;
+            case CommandType.copy:
+                const text = this._codeMirrorEditor.getSelection();
+                navigator.clipboard.writeText(text);
+                break;
+            case CommandType.paste:
+                navigator.clipboard.readText().then(text => {
+                    this._codeMirrorEditor.replaceSelection(text);
+                });
+                break;
+            case CommandType.cut:
+                const textc = this._codeMirrorEditor.getSelection();
+                navigator.clipboard.writeText(textc);
+                this._codeMirrorEditor.replaceSelection('');
+                break;
+            case CommandType.delete:
+                this._codeMirrorEditor.replaceSelection('');
+                break;
+        }
+    }
+    canExecuteCommand(command) {
+        switch (command.type) {
+            case CommandType.undo:
+            case CommandType.redo:
+            case CommandType.copy:
+            case CommandType.paste:
+            case CommandType.cut:
+            case CommandType.delete:
+                return true;
+        }
+        return false;
+    }
+    focusEditor() {
+        requestAnimationFrame(() => {
+            this.focus();
+            this._codeMirrorEditor.focus();
+        });
+    }
+    ready() {
+        const config = {
+            tabSize: 3,
+            lineNumbers: true,
+            mode: this.mode,
+            //@ts-ignore
+            htmlMode: true,
+            lineWrapping: true,
+            //@ts-ignore
+            extraKeys: { "Ctrl-Q": function (cm) { cm.foldCode(cm.getCursor()); } },
+            foldGutter: true,
+            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
+        };
+        //@ts-ignore
+        this._codeMirrorEditor = CodeMirror(this._editor, config);
+        this._codeMirrorEditor.setSize('100%', '100%');
+        this._codeMirrorEditor.on('change', () => this.onTextChanged.emit(this._codeMirrorEditor.getValue()));
+    }
+    update(code) {
+        this._codeMirrorEditor.setValue(code);
+    }
+    getText() {
+        return this._codeMirrorEditor.getValue();
+    }
+    setSelection(position) {
+        let point1 = this._codeMirrorEditor.posFromIndex(position.start);
+        let point2 = this._codeMirrorEditor.posFromIndex(position.start + position.length);
+        this._codeMirrorEditor.setSelection(point1, point2);
+    }
+}
+customElements.define('node-projects-code-view-code-mirror', CodeViewCodeMirror);

package/dist/elements/widgets/codeView/code-view-code-mirror-6.d.ts

@@ -0,0 +1,25 @@
+import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { ICodeView } from './ICodeView.js';
+import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js';
+import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
+import { IDisposable } from '../../../interfaces/IDisposable.js';
+export declare class CodeViewCodeMirror6 extends BaseCustomWebComponentLazyAppend implements ICodeView, IDisposable {
+    canvasElement: HTMLElement;
+    elementsToPackages: Map<string, string>;
+    code: string;
+    onTextChanged: TypedEvent<string>;
+    mode: string;
+    private _editor;
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    private _cm;
+    constructor();
+    ready(): void;
+    dispose(): void;
+    executeCommand(command: IUiCommand): Promise<void>;
+    canExecuteCommand(command: IUiCommand): boolean;
+    focusEditor(): void;
+    update(code: any): void;
+    getText(): string;
+    setSelection(position: IStringPosition): void;
+}

package/dist/elements/widgets/codeView/code-view-code-mirror-6.js

@@ -0,0 +1,102 @@
+import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { CommandType } from '../../../commandHandling/CommandType.js';
+export class CodeViewCodeMirror6 extends BaseCustomWebComponentLazyAppend {
+    canvasElement;
+    elementsToPackages;
+    code;
+    onTextChanged = new TypedEvent();
+    mode = 'xml';
+    _editor;
+    static style = css `
+    :host {
+      display: block;
+      height: 100%;
+      width: 100%;
+      background: white;
+    }
+    .cm-editor {
+      height: 100%
+    }`;
+    static template = html `
+    <div id="container" style="width: 100%; height: 100%; overflow: auto;">
+    </div>`;
+    _cm;
+    constructor() {
+        super();
+        this._restoreCachedInititalValues();
+        import("codemirror").then(async (cm) => {
+            this._cm = cm;
+            let js = await import("@codemirror/lang-javascript");
+            let html = await import("@codemirror/lang-html");
+            this._editor = new cm.EditorView({
+                extensions: [cm.basicSetup, js.javascript(), html.html()],
+                parent: this._getDomElement('container')
+            });
+        });
+    }
+    ready() {
+        /* this._codeMirrorEditor.on('change', () => this.onTextChanged.emit(this._codeMirrorEditor.getValue()))*/
+    }
+    dispose() {
+    }
+    async executeCommand(command) {
+        let cmds = await import("@codemirror/commands");
+        switch (command.type) {
+            case CommandType.undo:
+                cmds.undo(this._editor);
+                break;
+            case CommandType.redo:
+                cmds.redo(this._editor);
+                break;
+            case CommandType.copy:
+                const text = this._codeMirrorEditor.getSelection();
+                navigator.clipboard.writeText(text);
+                break;
+            case CommandType.paste:
+                navigator.clipboard.readText().then(text => {
+                    this._codeMirrorEditor.replaceSelection(text);
+                });
+                break;
+            case CommandType.cut:
+                const textc = this._codeMirrorEditor.getSelection();
+                navigator.clipboard.writeText(textc);
+                this._codeMirrorEditor.replaceSelection('');
+                break;
+            case CommandType.delete:
+                this._codeMirrorEditor.replaceSelection('');
+                break;
+        }
+    }
+    canExecuteCommand(command) {
+        switch (command.type) {
+            case CommandType.undo:
+            case CommandType.redo:
+            case CommandType.copy:
+            case CommandType.paste:
+            case CommandType.cut:
+            case CommandType.delete:
+                return true;
+        }
+        return false;
+    }
+    focusEditor() {
+        requestAnimationFrame(() => {
+            this.focus();
+            this._editor.focus();
+        });
+    }
+    update(code) {
+        this._editor.dispatch({
+            changes: { from: 0, to: this._editor.state.doc.length, insert: code }
+        });
+    }
+    getText() {
+        return this._editor.state.doc.toString();
+    }
+    setSelection(position) {
+        this._editor.dispatch({
+            selection: { anchor: position.start, head: position.start + position.length }
+        });
+    }
+}
+customElements.define('node-projects-code-view-code-mirror-6', CodeViewCodeMirror6);

package/dist/elements/widgets/debugView/debug-view.d.ts

@@ -6,10 +6,13 @@ export declare class DebugView extends BaseCustomWebComponentConstructorAppend {
     private _ready;
     computedStyle: CSSStyleDeclaration;
     createsStackingContext: boolean;
-    createsStackingContextReason: any;
-    parentStackingContext: any;
+    createsStackingContextReason: string;
+    parentStackingContext: Element;
+    parentStackingContextText: string;
     selectedElementOffsetParent: Element;
+    selectedElementOffsetParentText: string;
     constructor();
     ready(): void;
+    _clickLink(e: MouseEvent, target: 'offsetParent' | 'stackingContextParent'): void;
     update(designItem: IDesignItem): void;
 }

package/dist/elements/widgets/debugView/debug-view.js

@@ -1,4 +1,5 @@
 import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
+import { DesignItem } from "../../item/DesignItem.js";
 function generateSelector(element) {
     let selector, tag = element.nodeName.toLowerCase();
     if (element.id) {
@@ -109,27 +110,57 @@ export class DebugView extends BaseCustomWebComponentConstructorAppend {
     static template = html `
         <div>
             <table>
-                <tr><td colspan="2">Styling</td></tr>
-                <tr><td>display</td><td>[[this.computedStyle.display]]</td></tr>
-                <tr><td>position</td><td>[[this.computedStyle.position]]</td></tr>
-                <tr><td>visibility</td><td>[[this.computedStyle.visibity]]</td></tr>
-                <tr><td>pointerEvents</td><td>[[this.computedStyle.pointerEvents]]</td></tr>
-                <tr><td>zIndex</td><td>[[this.computedStyle.zIndex]]</td></tr>
-                <tr><td colspan="2">Context</td></tr>
-                <tr><td>offsetParent</td><td>[[this.selectedElementOffsetParent]]</td></tr>
-                <tr><td>createsStackingContext</td><td>[[this.createsStackingContext]]</td></tr>
-                <tr><td>stackingContextReason</td><td>[[this.createsStackingContextReason]]</td></tr>
-                <tr><td>stackingContextParent</td><td>[[this.parentStackingContext]]</td></tr>
+                    <tr><th colspan="2">Styling</th></tr>
+                    <tr><td>display</td><td>[[?this.computedStyle.display]]</td></tr>
+                    <tr><td>position</td><td>[[?this.computedStyle.position]]</td></tr>
+                    <tr><td>visibility</td><td>[[?this.computedStyle.visibility]]</td></tr>
+                    <tr><td>pointerEvents</td><td>[[?this.computedStyle.pointerEvents]]</td></tr>
+                    <tr><td>zIndex</td><td>[[?this.computedStyle.zIndex]]</td></tr>
+                    <tr><th colspan="2">Context</th></tr>
+                    <tr><td>offsetParent</td><td class="lnk" @click="[[this._clickLink(event, 'offsetParent')]]">[[?this.selectedElementOffsetParentText]]</td></tr>
+                    <tr><td>createsStackingContext</td><td>[[this.createsStackingContext]]</td></tr>
+                    <tr><td>stackingContextReason</td><td>[[this.createsStackingContextReason]]</td></tr>
+                    <tr><td>stackingContextParent</td><td class="lnk" @click="[[this._clickLink(event, 'stackingContextParent')]]">[[?this.parentStackingContextText]]</td></tr>
             </table>
         </div> 
     `;
-    static style = css ``;
+    static style = css `
+    table {
+        font-family: Arial, Helvetica, sans-serif;
+        border-collapse: collapse;
+        width: 100%;
+      }
+      
+      table td, table th {
+        border: 1px solid #ddd;
+        padding: 2px 4px;
+      }
+      
+      table tr:nth-child(even){background-color: #f2f2f2;}
+      
+      table tr:hover {background-color: #ddd;}
+      
+      table th {
+        text-align: left;
+        background-color: #989898;
+        color: white;
+      }
+      
+      .lnk {
+        color: blue;
+      }
+      .lnk:hover {
+        text-decoration: underline;
+        cursor: pointer;
+      }`;
     _ready;
     computedStyle;
     createsStackingContext;
     createsStackingContextReason;
     parentStackingContext;
+    parentStackingContextText;
     selectedElementOffsetParent;
+    selectedElementOffsetParentText;
     constructor() {
         super();
         this._restoreCachedInititalValues();
@@ -139,21 +170,59 @@ export class DebugView extends BaseCustomWebComponentConstructorAppend {
         this._bindingsParse();
         this._ready = true;
     }
+    _clickLink(e, target) {
+        if (target == 'offsetParent') {
+            if (this.selectedElementOffsetParent) {
+                let di = DesignItem.GetDesignItem(this.selectedElementOffsetParent);
+                di.instanceServiceContainer.selectionService.setSelectedElements([di]);
+            }
+        }
+        else if (target == 'stackingContextParent') {
+            if (this.parentStackingContext) {
+                let di = DesignItem.GetDesignItem(this.parentStackingContext);
+                di.instanceServiceContainer.selectionService.setSelectedElements([di]);
+            }
+        }
+    }
     update(designItem) {
         if (this._ready) {
             requestAnimationFrame(() => {
-                let element = designItem.element;
-                this.computedStyle = getComputedStyle(designItem.element);
-                this.selectedElementOffsetParent = generateSelector(designItem.element.offsetParent);
-                if (element && element.nodeType === 1) {
-                    const closest = getClosestStackingContext(element);
-                    this.createsStackingContext = element === closest.node;
-                    this.createsStackingContextReason = this.createsStackingContext ? closest.reason : 'not a stacking context';
-                    let parentContext = closest.node;
-                    if (this.createsStackingContext && element.nodeName !== 'HTML') {
-                        parentContext = getClosestStackingContext(element.parentNode).node;
+                let element = designItem?.element;
+                if (element) {
+                    this.computedStyle = getComputedStyle(designItem.element);
+                    this.selectedElementOffsetParent = designItem.element.offsetParent;
+                    if (this.selectedElementOffsetParent == designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element) {
+                        this.selectedElementOffsetParentText = null;
+                        this.selectedElementOffsetParent = null;
                     }
-                    this.parentStackingContext = generateSelector(parentContext);
+                    else
+                        this.selectedElementOffsetParentText = generateSelector(designItem.element.offsetParent);
+                    if (element && element.nodeType === 1) {
+                        const closest = getClosestStackingContext(element);
+                        this.createsStackingContext = element === closest.node;
+                        this.createsStackingContextReason = this.createsStackingContext ? closest.reason : 'not a stacking context';
+                        this.parentStackingContext = closest.node;
+                        if (this.createsStackingContext && element.nodeName !== 'HTML') {
+                            this.parentStackingContext = getClosestStackingContext(element.parentNode).node;
+                        }
+                        if (this.parentStackingContext == designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element.parentElement.parentElement) {
+                            this.parentStackingContextText = null;
+                            this.parentStackingContext = null;
+                        }
+                        else
+                            this.parentStackingContextText = generateSelector(this.parentStackingContext);
+                    }
+                }
+                else {
+                    //@ts-ignore
+                    this.computedStyle = {};
+                    this.createsStackingContext = false;
+                    this.createsStackingContextReason = '';
+                    this.createsStackingContext = false;
+                    this.selectedElementOffsetParent = null;
+                    this.selectedElementOffsetParentText = null;
+                    this.parentStackingContext = null;
+                    this.parentStackingContextText = null;
                 }
                 this._bindingsRefresh();
             });

package/dist/elements/widgets/designerView/designerCanvas.js

@@ -534,7 +534,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         if (designItemDocumentPositionService) {
             this.instanceServiceContainer.register("designItemDocumentPositionService", designItemDocumentPositionService(this));
         }
-        this.rootDesignItem = DesignItem.GetOrCreateDesignItem(this._canvas, this.serviceContainer, this.instanceServiceContainer);
+        this.rootDesignItem = DesignItem.GetOrCreateDesignItem(this._canvas, this._canvas, this.serviceContainer, this.instanceServiceContainer);
         const contentService = this.serviceContainer.getLastService('contentService');
         if (contentService) {
             this.instanceServiceContainer.register("contentService", contentService(this));
@@ -544,7 +544,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             const instance = stylesheetService(this);
             this.instanceServiceContainer.register("stylesheetService", instance);
             this.instanceServiceContainer.stylesheetService.stylesheetChanged.on((ss) => {
-                if (ss.changeSource == 'extern') {
+                if (ss.changeSource != 'undo') {
                     const ssca = new StylesheetChangedAction(this.instanceServiceContainer.stylesheetService, ss.name, ss.newStyle, ss.oldStyle);
                     this.instanceServiceContainer.undoService.execute(ssca);
                 }
@@ -998,7 +998,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         return currentElement;
     }
     showHoverExtension(element, event) {
-        const currentDesignItem = DesignItem.GetOrCreateDesignItem(element, this.serviceContainer, this.instanceServiceContainer);
+        const currentDesignItem = DesignItem.GetOrCreateDesignItem(element, element, this.serviceContainer, this.instanceServiceContainer);
         if (this._lastHoverDesignItem != currentDesignItem) {
             if (this._lastHoverDesignItem)
                 this.extensionManager.removeExtension(this._lastHoverDesignItem, ExtensionType.MouseOver);
@@ -1043,7 +1043,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             return;
         }
         this.clickOverlay.style.cursor = this._canvas.style.cursor;
-        const currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, this.serviceContainer, this.instanceServiceContainer);
+        const currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, currentElement, this.serviceContainer, this.instanceServiceContainer);
         this.showHoverExtension(currentDesignItem.element, event);
         //TODO: needed ??
         if (currentElement && DomHelper.getHost(currentElement.parentNode) === this.overlayLayer) {

package/dist/elements/widgets/designerView/extensions/ExtensionManager.js

@@ -30,7 +30,7 @@ export class ExtensionManager {
     _selectedElementsChanged(selectionChangedEvent) {
         if (selectionChangedEvent.oldSelectedElements && selectionChangedEvent.oldSelectedElements.length) {
             if (selectionChangedEvent.oldSelectedElements[0].parent) {
-                const primaryContainer = DesignItem.GetOrCreateDesignItem(selectionChangedEvent.oldSelectedElements[0].parent.element, this.designerCanvas.serviceContainer, this.designerCanvas.instanceServiceContainer);
+                const primaryContainer = DesignItem.GetOrCreateDesignItem(selectionChangedEvent.oldSelectedElements[0].parent.element, selectionChangedEvent.oldSelectedElements[0].parent.element, this.designerCanvas.serviceContainer, this.designerCanvas.instanceServiceContainer);
                 this.removeExtension(primaryContainer, ExtensionType.PrimarySelectionContainer);
                 this.removeExtension(selectionChangedEvent.oldSelectedElements[0], ExtensionType.PrimarySelection);
                 this.removeExtensions(selectionChangedEvent.oldSelectedElements, false, ExtensionType.Selection);
@@ -39,7 +39,7 @@ export class ExtensionManager {
         if (selectionChangedEvent.selectedElements && selectionChangedEvent.selectedElements.length) {
             this.applyExtensions(selectionChangedEvent.selectedElements, ExtensionType.Selection);
             this.applyExtension(selectionChangedEvent.selectedElements[0], ExtensionType.PrimarySelection);
-            const primaryContainer = DesignItem.GetOrCreateDesignItem(selectionChangedEvent.selectedElements[0].parent.element, this.designerCanvas.serviceContainer, this.designerCanvas.instanceServiceContainer);
+            const primaryContainer = DesignItem.GetOrCreateDesignItem(selectionChangedEvent.selectedElements[0].parent.element, selectionChangedEvent.selectedElements[0].parent.element, this.designerCanvas.serviceContainer, this.designerCanvas.instanceServiceContainer);
             this.applyExtension(primaryContainer, ExtensionType.PrimarySelectionContainer);
         }
         //this.refreshExtensions(selectionChangedEvent.selectedElements);

package/dist/elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.js

@@ -11,7 +11,7 @@ export class ItemsBelowContextMenu {
         return [];
     }
     _select(designerView, element) {
-        const item = DesignItem.GetOrCreateDesignItem(element, designerView.serviceContainer, designerView.instanceServiceContainer);
+        const item = DesignItem.GetOrCreateDesignItem(element, element, designerView.serviceContainer, designerView.instanceServiceContainer);
         designerView.instanceServiceContainer.selectionService.setSelectedElements([item]);
     }
 }

package/dist/elements/widgets/designerView/tools/MagicWandSelectorTool.js

@@ -46,7 +46,7 @@ export class MagicWandSelectorTool {
                     point.y = elementRect.y + elementRect.height;
                     const p4 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
                     if (p1 && p2 && p3 && p4) {
-                        const desItem = DesignItem.GetOrCreateDesignItem(e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                        const desItem = DesignItem.GetOrCreateDesignItem(e, e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
                         if (designerCanvas.instanceServiceContainer.selectionService.selectedElements)
                             inSelectionElements.push(...designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                         inSelectionElements.push(desItem);

package/dist/elements/widgets/designerView/tools/PointerTool.js

@@ -39,7 +39,7 @@ export class PointerTool {
                 }
             }
             let newEl = designerCanvas.serviceContainer.elementAtPointService.getElementAtPoint(designerCanvas, { x: event.x, y: event.y });
-            const designItem = DesignItem.GetOrCreateDesignItem(newEl, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+            const designItem = DesignItem.GetOrCreateDesignItem(newEl, newEl, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
             if (!designerCanvas.instanceServiceContainer.selectionService.isSelected(designItem)) {
                 designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([designItem]);
             }
@@ -98,7 +98,7 @@ export class PointerTool {
         if (!currentElement)
             return;
         const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
-        const currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+        const currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, currentElement, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
         if (this._actionType == null) {
             this._initialPoint = currentPoint;
             this._initialOffset = designerCanvas.getNormalizedOffsetInElement(event, currentElement);
@@ -166,7 +166,7 @@ export class PointerTool {
                     }
                     let currentElement = elements[idx];
                     if (currentElement)
-                        currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                        currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, currentElement, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
                 }
             }
         }
@@ -379,7 +379,7 @@ export class PointerTool {
                 //check we don't try to move a item over one of its children..
             }
             else {
-                newContainerElementDesignItem = DesignItem.GetOrCreateDesignItem(e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                newContainerElementDesignItem = DesignItem.GetOrCreateDesignItem(e, e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
                 const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
                 newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
                 if (newContainerService) {

package/dist/elements/widgets/designerView/tools/RectangleSelectorTool.js

@@ -68,7 +68,7 @@ export class RectangleSelectorTool {
                     point.y = elementRect.y + elementRect.height;
                     const p4 = p3 && this._rect.isPointInFill(point);
                     if (p4) {
-                        const desItem = DesignItem.GetOrCreateDesignItem(e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                        const desItem = DesignItem.GetOrCreateDesignItem(e, e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
                         if (designerCanvas.instanceServiceContainer.selectionService.selectedElements)
                             inSelectionElements.push(...designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                         inSelectionElements.push(desItem);

package/dist/elements/widgets/treeView/treeView.js

@@ -220,7 +220,7 @@ export class TreeView extends BaseCustomWebComponentLazyAppend {
     _selectDesignerElement(item) {
         let index = item.dataset.index;
         let el = this._items[index].ref;
-        let d = DesignItem.GetOrCreateDesignItem(el, this._rootItem.serviceContainer, this._rootItem.instanceServiceContainer);
+        let d = DesignItem.GetOrCreateDesignItem(el, el, this._rootItem.serviceContainer, this._rootItem.instanceServiceContainer);
         d.instanceServiceContainer.selectionService.setSelectedElements([d]);
     }
     _highlight(element) {

package/dist/index.d.ts

@@ -45,6 +45,8 @@ export * from "./elements/services/demoProviderService/DemoProviderService.js";
 export type { IDemoProviderService } from "./elements/services/demoProviderService/IDemoProviderService.js";
 export * from "./elements/services/designItemDocumentPositionService/DesignItemDocumentPositionService.js";
 export type { IDesignItemDocumentPositionService } from "./elements/services/designItemDocumentPositionService/IDesignItemDocumentPositionService.js";
+export * from "./elements/services/designItemService/DesignItemService.js";
+export type { IDesignItemService } from "./elements/services/designItemService/IDesignItemService.js";
 export * from "./elements/services/dragDropService/ExternalDragDropService.js";
 export type { IExternalDragDropService } from "./elements/services/dragDropService/IExternalDragDropService.js";
 export * from "./elements/services/dragDropService/DragDropService.js";
@@ -126,7 +128,6 @@ export * from "./elements/services/undoService/transactionItems/DeleteAction.js"
 export * from "./elements/services/undoService/transactionItems/InsertAction.js";
 export * from "./elements/services/undoService/transactionItems/InsertChildAction.js";
 export * from "./elements/services/undoService/transactionItems/StylesheetChangedAction.js";
-export * from "./elements/services/undoService/transactionItems/StylesheetStyleChangeAction.js";
 export * from "./elements/services/undoService/transactionItems/SetDesignItemsAction.js";
 export * from "./elements/services/BaseServiceContainer.js";
 export * from "./elements/services/InstanceServiceContainer.js";

package/dist/index.js

@@ -29,6 +29,7 @@ export * from "./elements/services/copyPasteService/CopyPasteService.js";
 export * from "./elements/services/copyPasteService/CopyPasteAsJsonService.js";
 export * from "./elements/services/demoProviderService/DemoProviderService.js";
 export * from "./elements/services/designItemDocumentPositionService/DesignItemDocumentPositionService.js";
+export * from "./elements/services/designItemService/DesignItemService.js";
 export * from "./elements/services/dragDropService/ExternalDragDropService.js";
 export * from "./elements/services/dragDropService/DragDropService.js";
 export * from "./elements/services/elementsService/JsonFileElementsService.js";
@@ -87,7 +88,6 @@ export * from "./elements/services/undoService/transactionItems/DeleteAction.js"
 export * from "./elements/services/undoService/transactionItems/InsertAction.js";
 export * from "./elements/services/undoService/transactionItems/InsertChildAction.js";
 export * from "./elements/services/undoService/transactionItems/StylesheetChangedAction.js";
-export * from "./elements/services/undoService/transactionItems/StylesheetStyleChangeAction.js";
 export * from "./elements/services/undoService/transactionItems/SetDesignItemsAction.js";
 export * from "./elements/services/BaseServiceContainer.js";
 export * from "./elements/services/InstanceServiceContainer.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.242",
+  "version": "0.0.244",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -13,10 +13,10 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.11.0"
+    "@node-projects/base-custom-webcomponent": "^0.13.0"
   },
   "devDependencies": {
-    "@adobe/css-tools": "4.3.0-beta.1",
+    "@adobe/css-tools": "4.3.0-rc.1",
     "@node-projects/lean-he-esm": "^3.3.0",
     "@node-projects/node-html-parser-esm": "^6.1.5",
     "@papyrs/stylo": "^0.0.45",
@@ -24,17 +24,17 @@
     "@types/css-tree": "^2.3.1",
     "@types/jquery": "^3.5.16",
     "@types/jquery.fancytree": "0.0.7",
-    "@types/node": "^20.3.3",
-    "ace-builds": "^1.23.1",
+    "@types/node": "^20.4.5",
+    "ace-builds": "^1.23.4",
     "codemirror": "^5.0.0",
     "css-tree": "^2.3.1",
     "esprima-next": "^5.8.4",
     "html2canvas": "*",
-    "jest": "^29.5.0",
+    "jest": "^29.6.2",
     "jquery": "^3.7.0",
     "jquery.fancytree": "^2.38.3",
     "mdn-data": "^2.0.32",
-    "monaco-editor": "^0.39.0",
+    "monaco-editor": "^0.40.0",
     "ts-jest": "^29.1.1",
     "typescript": "^5.1.6",
     "typescript-lit-html-plugin": "^0.9.0"