kritzel-stencil 0.0.128 → 0.0.130

package/dist/collection/components/shared/kritzel-stroke-size/kritzel-stroke-size.js

@@ -9,7 +9,7 @@ export class KritzelStrokeSize {
         this.sizeChange.emit(size);
     }
     render() {
-        return (h(Host, { key: '0185d3243c35c49169324c98f87df6a286fc3d31' }, this.sizes.map(size => (h("div", { class: {
+        return (h(Host, { key: 'f9f0fe49963655a2beeffe5c369ccbe018c8aa5e' }, this.sizes.map(size => (h("div", { class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: '#000000', size: size }))))));

package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.js

@@ -37,23 +37,23 @@ export class KritzelTooltip {
         }
     }
     render() {
-        return (h(Host, { key: '7610e8185e037813cc363daa3212a4164a20daaf', style: {
+        return (h(Host, { key: '6eb67bcfd08234affe3724dff4d94ddf7907a1a7', style: {
                 position: 'fixed',
                 zIndex: '9999',
                 transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
                 visibility: this.isVisible ? 'visible' : 'hidden',
                 left: !this.isMobileView ? `${this.positionX}px` : '50%',
                 marginBottom: `${this.offsetY + this.arrowSize}px`,
-            } }, h("div", { key: 'bd5c1f0f7ff3afddfcf2469277189d026e79b453', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: '547e5a8fcb8131225461881a1ad0125fa4b0d55b' }), h("div", { key: 'de1d30c31667a81a36873d32bec20fcc911ec89f', class: "tooltip-arrow-wrapper", style: {
+            } }, h("div", { key: '9314b30b71200776e3728027b2ac7332cf4ab669', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: '80cb8d0a8a91d9c816580cedc02fc9382fb07f8c' }), h("div", { key: '87fb2399463a0eb7beb1ca0f2c2867d8ff033f3a', class: "tooltip-arrow-wrapper", style: {
                 position: 'fixed',
                 left: this.arrowOffset,
                 bottom: `-${this.arrowSize * 2}px`,
-            } }, h("div", { key: 'ebbf83bd4d35e252b0258a7c81ebcef48ac10004', class: "tooltip-arrow", style: {
+            } }, h("div", { key: 'fc3953ad9b6aa5a4b2228653573fc3a7e37c0487', class: "tooltip-arrow", style: {
                 borderLeft: `${this.arrowSize}px solid transparent`,
                 borderRight: `${this.arrowSize}px solid transparent`,
                 borderTop: `${this.arrowSize}px solid var(--kritzel-controls-tooltip-background-color, #ffffff)`,
                 filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',
-            } }), h("div", { key: '918ca46c438657dc4f72ccc73f81d58076d637c5', class: "tooltip-arrow-rect", style: {
+            } }), h("div", { key: '5b8e4e3eb90c4c47c47fa47dc96e4149794e1732', class: "tooltip-arrow-rect", style: {
                 position: 'relative',
                 width: `${this.arrowSize * 2}px`,
                 height: `${this.arrowSize}px`,

package/dist/collection/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.js

@@ -28,14 +28,14 @@ export class KritzelControlBrushConfig {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (h(Host, { key: 'd099d1c6722678fdfb06c34eb0860e8819dd17ca' }, h("div", { key: '0856f0150666415ee452a0fcec5c76b6d25b82c4', style: {
+        return (h(Host, { key: 'a1f04aba4ed04e91c7b375e0f88bcff4fea1cba4' }, h("div", { key: 'c7cd734c96498c8cd6a27321fb6d11773e7aa8a9', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, h("kritzel-brush-style", { key: '364e6026d1b280a02c3618c7ded11f40c7e3cba4', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), h("button", { key: 'fc58c9ceb9e92ef8c79836e686b9a64653f91210', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: 'ab219c72a9ace56853c725ba75767be2079a3c10', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: '8757c754217a3de88dad2c465ff748571716ae64', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("kritzel-stroke-size", { key: '056b227dd9a92b06588816739b55a80f5ce80835', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, h("kritzel-brush-style", { key: '67958dc2a34302eb23fabbafea3c7dc7863f1984', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), h("button", { key: '5c84a72d9f337dff253a161abe19acb832275272', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: 'b3e0c44db35b53a584757e18b507df09f30bfa8a', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: 'eb098094ae69aa5901244f9686a3eb990271c07d', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("kritzel-stroke-size", { key: '18ae184b282ca2ec6511a6ac0065914edf66f91b', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
     }
     static get is() { return "kritzel-control-brush-config"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-control-text-config/kritzel-control-text-config.js

@@ -19,14 +19,14 @@ export class KritzelControlTextConfig {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (h(Host, { key: 'f0d35cc43f1fe58a5a26f21dad99f1a733b66cce' }, h("div", { key: 'efc7d31c11460015a41185b4215e9ff45970abdd', style: {
+        return (h(Host, { key: 'a5c0e3eb4343637d758888d7d2a0843549fa0c25' }, h("div", { key: '1d4d42af117ed9da1a91d1747a7d6f6531e0de9b', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, h("kritzel-font-family", { key: '7f7d3ccb061d4b0e5e0f181ba4224f3de430a88c', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), h("button", { key: '6676fcfa245874d54fa9933888c242c6f611c58c', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, h("kritzel-icon", { key: '0734f636889c77f9087a2de2899a28ebd8df30a2', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: '68373ef79578d6a73028da681f1e3b0e8e3e5874', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), h("kritzel-font-size", { key: '56e6828f6ceaac3d37910b7d092a30bacbd84519', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, h("kritzel-font-family", { key: 'b19e1edcbc7bafb0829d3e173d33cff37d2a5959', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), h("button", { key: 'ca3dce970ee5dd1a7c8c617127777859b45380c4', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, h("kritzel-icon", { key: '241d82cd06db8d20794a369a4df6e6a71531131a', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: 'ec82e5c09046e70e904cc1ec9716c53bec9cac2b', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), h("kritzel-font-size", { key: '1cbddf6e6de21bd62f3803cca9e21ef9e01f15c0', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
     }
     static get is() { return "kritzel-control-text-config"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-controls/kritzel-controls.css

@@ -4,6 +4,11 @@
   user-select: none;
 }
 
+:host(.mobile) {
+  --kritzel-controls-control-hover-background-color: transparent;
+  --kritzel-controls-control-active-background-color: transparent;
+}
+
 .kritzel-controls {
   display: flex;
   flex-direction: row;
@@ -39,18 +44,10 @@
   background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));
 }
 
-:host(.mobile) .kritzel-control:hover {
-  background-color: unset;
-}
-
 .kritzel-control:active {
   background-color: var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%));
 }
 
-:host(.mobile) .kritzel-control:active {
-  background-color: unset;
-}
-
 .kritzel-control.selected,
 .kritzel-control.selected:hover,
 .kritzel-control.selected:active {

package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js

@@ -93,13 +93,13 @@ export class KritzelControls {
     render() {
         var _a, _b;
         const hasNoConfig = ((_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.config) === undefined || ((_b = this.activeControl) === null || _b === void 0 ? void 0 : _b.config) === null;
-        return (h(Host, { key: 'af04746b6eaa04a51482cd9d25ba3ab303d631f1', class: {
+        return (h(Host, { key: '7ab1f3e176848cb9a34be7e7b90e13c2a861d78b', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: 'd6ecb1087a332162f3fc809ed4321fc48f72c3e7', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: 'f168b27cb9cc3a1a7d0028055cd58c60cec9776f', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, onUndo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.undo(); }, onRedo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.redo(); }, onDelete: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.delete(); } })), h("div", { key: '34723e47249d53fd544848d2d577deba4df1f131', class: "kritzel-controls" }, this.controls.map(control => {
+            }, onUndo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.undo(); }, onRedo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.redo(); }, onDelete: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.delete(); } })), h("div", { key: '9e568217b23632d73b051350d7f795f0cd7ab9ed', class: "kritzel-controls" }, this.controls.map(control => {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             if (control.type === 'tool') {
                 return (h("button", { class: {

package/dist/collection/components/ui/kritzel-utility-panel/kritzel-utility-panel.js

@@ -13,7 +13,7 @@ export class KritzelUtilityPanel {
         this.redo.emit();
     }
     render() {
-        return (h(Host, { key: 'cf7b5c501b6535fda22b17ea218e90bd60223c6e' }, h("button", { key: '05db2cee7f2e191674167ef503e70718200bf904', class: "utility-button", onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '10412c038b9d4e66851c8a0c9b51b99607bac397', name: "undo" })), h("button", { key: 'edf0289de8ce5cddd9341bc1855eae095274226c', class: "utility-button", onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '46263e3d3f166b224c9a18ba383085e020fac51a', name: "redo" })), h("div", { key: '3a6c0eca21f44887683d6308ca5741b095eceb77', class: "utility-separator" }), h("button", { key: 'ced83e0c47fc920edabdc5b3379a8805f1827374', class: "utility-button" }, h("kritzel-icon", { key: 'd49c6412d778d34fe21e86482f2114631621106a', name: "delete", onClick: () => this.delete.emit() }))));
+        return (h(Host, { key: '134058928a840d11fdc39849b35f08b21840fc0c' }, h("button", { key: '8d80cb496983b0709c06bacb12ca6819789aa47d', class: "utility-button", onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: 'c6733ef61ab6a272f80a580243fdd15063b8bf0c', name: "undo" })), h("button", { key: 'dc6147152bccd43ea54b9af20d019d305e550987', class: "utility-button", onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '3ab8bced0f398a8d5f053cb0f388199fd2148bfc', name: "redo" })), h("div", { key: 'ebbfd25fb69faf2b669de20dc74a3dcabc01f489', class: "utility-separator" }), h("button", { key: 'd86caf8a7f2c2bc899b09871f555973137693eb9', class: "utility-button" }, h("kritzel-icon", { key: 'e1b4e9eef3d3ab2a2ddd1688818d4bcd2d7226c1', name: "delete", onClick: () => this.delete.emit() }))));
     }
     static get is() { return "kritzel-utility-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.js

@@ -1,55 +1,17 @@
-import { Host, h } from "@stencil/core";
 import { KritzelWorkspace } from "../../../classes/workspace.class";
 import { ObjectHelper } from "../../../helpers/object.helper";
+import { Host, h } from "@stencil/core";
 export class KritzelWorkspaceManager {
     constructor() {
         this.workspaces = [];
-        this.editingIndex = null;
+        this.childMenuAnchor = null;
+        this.openChildMenuItem = null;
         this.newWorkspace = null;
-        this.kritzelEngine = null;
-        this.handleNewWorkspace = async () => {
-            var _a;
-            await ((_a = this.splitButtonRef) === null || _a === void 0 ? void 0 : _a.openMenu());
-            requestAnimationFrame(() => {
-                this.newWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');
-                this.editingIndex = 0;
-            });
-        };
-        this.handleMenuClosed = () => {
-            this.editingIndex = null;
-            this.newWorkspace = null;
-        };
-        this.handleSave = async (item) => {
-            const workspace = item.value;
-            const updatedWorkspace = Object.assign(Object.assign({}, workspace), { name: item.label });
-            if (this.newWorkspace) {
-                await this.kritzelEngine.createWorkspace(updatedWorkspace);
-                this.selectWorkspace(updatedWorkspace);
-            }
-            else {
-                await this.kritzelEngine.updateWorkspace(updatedWorkspace);
-            }
-            this.editingIndex = null;
-            this.newWorkspace = null;
-        };
-        this.handleRename = (index) => {
-            this.editingIndex = index;
-        };
-        this.handleDelete = async (workspaceToDelete) => {
-            var _a;
-            await this.kritzelEngine.deleteWorkspace(workspaceToDelete);
-            if (((_a = this.activeWorkspace) === null || _a === void 0 ? void 0 : _a.id) === workspaceToDelete.id) {
-                const newActiveWorkspace = this.sortedWorkspaces.find(w => w.id !== workspaceToDelete.id) || null;
-                this.selectWorkspace(newActiveWorkspace);
-            }
-        };
+        this.editingItemId = null;
+        this.kritzelEngineRef = null;
     }
     get sortedWorkspaces() {
-        const uniqueWorkspaces = [...new Map(this.workspaces.map(workspace => [workspace.id, workspace])).values()];
-        return [this.newWorkspace, ...uniqueWorkspaces].filter(ws => ws !== null).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
-    }
-    get activeItemIndex() {
-        return this.sortedWorkspaces.findIndex(ws => { var _a; return ws.id === ((_a = this.activeWorkspace) === null || _a === void 0 ? void 0 : _a.id); });
+        return [this.newWorkspace, ...this.workspaces].filter(ws => ws != null).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
     }
     async componentWillLoad() {
         await this.initializeEngine();
@@ -57,42 +19,100 @@ export class KritzelWorkspaceManager {
     }
     async initializeEngine() {
         await customElements.whenDefined('kritzel-engine');
-        this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');
-        if (!this.kritzelEngine) {
+        this.kritzelEngineRef = this.host.parentElement.querySelector('kritzel-engine');
+        if (!this.kritzelEngineRef) {
             throw new Error('kritzel-engine not found in parent element.');
         }
     }
-    handleSelect(workspace) {
-        this.selectWorkspace(workspace);
-    }
-    selectWorkspace(workspace) {
-        if (this.editingIndex !== null)
+    async select(item, parent) {
+        if (this.editingItemId) {
+            return;
+        }
+        if (item.action) {
+            item.action(item, parent);
             return;
-        this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id === workspace.id);
-        this.workspaceChange.emit(workspace);
+        }
+        this.workspaceChange.emit(item.value);
+    }
+    async add() {
+        this.newWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');
+        this.editingItemId = this.newWorkspace.id;
+        await this.splitButtonRef.open();
+    }
+    edit(item) {
+        this.openChildMenuItem = null;
+        this.childMenuAnchor = null;
+        requestAnimationFrame(() => {
+            this.editingItemId = item.id;
+        });
+    }
+    async save(item) {
+        if (this.newWorkspace) {
+            await this.kritzelEngineRef.createWorkspace(Object.assign(Object.assign({}, item.value), { name: item.label }));
+            this.workspaceChange.emit(this.newWorkspace);
+        }
+        else {
+            await this.kritzelEngineRef.updateWorkspace(Object.assign(Object.assign({}, item.value), { name: item.label }));
+        }
+        this.editingItemId = null;
+        this.newWorkspace = null;
+    }
+    cancel() {
+        this.newWorkspace = null;
+        this.editingItemId = null;
+    }
+    async delete(item) {
+        this.openChildMenuItem = null;
+        this.childMenuAnchor = null;
+        await this.kritzelEngineRef.deleteWorkspace(item.value);
+    }
+    toggleChildMenu(item, anchor) {
+        this.openChildMenuItem = item;
+        this.childMenuAnchor = anchor;
+    }
+    closeChildMenu() {
+        this.openChildMenuItem = null;
+        this.childMenuAnchor = null;
+    }
+    closeMenu() {
+        this.cancel();
+        this.closeChildMenu();
     }
     render() {
-        const workspaceSelectionOptions = this.sortedWorkspaces.map((ws, index) => ({
-            label: ws.name,
-            value: ws,
-            select: () => this.handleSelect(ws),
-            cancel: this.handleMenuClosed,
-            save: this.handleSave,
-            children: [
-                {
-                    label: 'Rename',
-                    value: 'rename',
-                    select: () => this.handleRename(index),
-                },
-                {
-                    label: 'Delete',
-                    value: 'delete',
-                    disabled: this.sortedWorkspaces.length <= 1,
-                    select: () => this.handleDelete(ws),
-                },
-            ],
-        }));
-        return (h(Host, { key: '1703451717d5583d6520edfbcdbe38a5b8f6840f' }, h("kritzel-split-button", { key: 'efd5d9b714ee72b23fd28c9b20ea6985957fe9b9', ref: el => (this.splitButtonRef = el), buttonIcon: "plus", options: workspaceSelectionOptions, activeItemIndex: this.activeItemIndex, editingIndex: this.editingIndex, onButtonClick: this.handleNewWorkspace, onMenuClosed: this.handleMenuClosed })));
+        console.log('render workspace manager');
+        const menuItems = this.sortedWorkspaces
+            .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())
+            .filter(ws => ws !== null)
+            .map(ws => {
+            var _a, _b, _c, _d;
+            return {
+                id: ws.id,
+                label: ws.name,
+                value: ws,
+                isEditing: this.editingItemId === ws.id,
+                isSelected: ((_a = this.activeWorkspace) === null || _a === void 0 ? void 0 : _a.id) === ws.id,
+                isNewItem: ((_b = this.newWorkspace) === null || _b === void 0 ? void 0 : _b.id) === ws.id,
+                isChildMenuOpen: ((_c = this.openChildMenuItem) === null || _c === void 0 ? void 0 : _c.id) === ws.id,
+                childMenuAnchor: ((_d = this.openChildMenuItem) === null || _d === void 0 ? void 0 : _d.id) === ws.id ? this.childMenuAnchor : null,
+                children: [
+                    {
+                        id: `${ws.id}-rename`,
+                        label: 'Rename',
+                        value: 'rename',
+                        action: (_item, parent) => this.edit(parent),
+                    },
+                    {
+                        id: `${ws.id}-delete`,
+                        label: 'Delete',
+                        value: 'delete',
+                        action: (_item, parent) => this.delete(parent),
+                    },
+                ],
+            };
+        });
+        return (h(Host, null, h("kritzel-split-button", { ref: el => (this.splitButtonRef = el), items: menuItems, mainButtonDisabled: this.editingItemId != null, onButtonClick: () => this.add(), onItemSelect: event => this.select(event.detail.item, event.detail.parent), onItemToggleChildMenu: event => this.toggleChildMenu(event.detail.item, event.detail.childMenuAnchor), onItemSave: event => this.save(event.detail), onItemCancel: () => this.cancel(), onItemCloseChildMenu: () => this.closeChildMenu(), onClose: () => {
+                this.closeMenu();
+            } })));
     }
     static get is() { return "kritzel-workspace-manager"; }
     static get encapsulation() { return "shadow"; }
@@ -108,13 +128,13 @@ export class KritzelWorkspaceManager {
     }
     static get properties() {
         return {
-            "workspaces": {
+            "activeWorkspace": {
                 "type": "unknown",
-                "attribute": "workspaces",
+                "attribute": "active-workspace",
                 "mutable": false,
                 "complexType": {
-                    "original": "KritzelWorkspace[]",
-                    "resolved": "KritzelWorkspace[]",
+                    "original": "KritzelWorkspace",
+                    "resolved": "KritzelWorkspace",
                     "references": {
                         "KritzelWorkspace": {
                             "location": "import",
@@ -130,16 +150,15 @@ export class KritzelWorkspaceManager {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
+                "setter": false
             },
-            "activeWorkspace": {
+            "workspaces": {
                 "type": "unknown",
-                "attribute": "active-workspace",
-                "mutable": true,
+                "attribute": "workspaces",
+                "mutable": false,
                 "complexType": {
-                    "original": "KritzelWorkspace",
-                    "resolved": "KritzelWorkspace",
+                    "original": "KritzelWorkspace[]",
+                    "resolved": "KritzelWorkspace[]",
                     "references": {
                         "KritzelWorkspace": {
                             "location": "import",
@@ -155,14 +174,17 @@ export class KritzelWorkspaceManager {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "defaultValue": "[]"
             }
         };
     }
     static get states() {
         return {
-            "editingIndex": {},
-            "newWorkspace": {}
+            "childMenuAnchor": {},
+            "openChildMenuItem": {},
+            "newWorkspace": {},
+            "editingItemId": {}
         };
     }
     static get events() {

package/dist/collection/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.js.map

@@ -1 +1 @@
-{"version":3,"file":"kritzel-workspace-manager.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\r\nimport { KritzelWorkspace } from '../../../classes/workspace.class';\r\nimport { ObjectHelper } from '../../../helpers/object.helper';\r\nimport { KritzelMenuItem } from '../../../interfaces/menu-item.interface';\r\n\r\n@Component({\r\n  tag: 'kritzel-workspace-manager',\r\n  styleUrl: 'kritzel-workspace-manager.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelWorkspaceManager {\r\n  @Prop()\r\n  workspaces: KritzelWorkspace[] = [];\r\n\r\n  @Prop({ mutable: true })\r\n  activeWorkspace: KritzelWorkspace;\r\n\r\n  @State()\r\n  editingIndex: number | null = null;\r\n\r\n  @State()\r\n  newWorkspace: KritzelWorkspace | null = null;\r\n\r\n  @Event()\r\n  isWorkspaceManagerReady: EventEmitter<void>;\r\n\r\n  @Event()\r\n  workspaceChange: EventEmitter<KritzelWorkspace>;\r\n\r\n  @Element()\r\n  host!: HTMLElement;\r\n\r\n  kritzelEngine: HTMLKritzelEngineElement | null = null;\r\n\r\n  splitButtonRef!: HTMLKritzelSplitButtonElement;\r\n\r\n  get sortedWorkspaces() {\r\n    const uniqueWorkspaces = [...new Map(this.workspaces.map(workspace => [workspace.id, workspace])).values()];\r\n    return [this.newWorkspace, ...uniqueWorkspaces].filter(ws => ws !== null).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());\r\n  }\r\n\r\n  get activeItemIndex() {\r\n    return this.sortedWorkspaces.findIndex(ws => ws.id === this.activeWorkspace?.id);\r\n  }\r\n\r\n  async componentWillLoad() {\r\n    await this.initializeEngine();\r\n    this.isWorkspaceManagerReady.emit();\r\n  }\r\n\r\n  private async initializeEngine() {\r\n    await customElements.whenDefined('kritzel-engine');\r\n    this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');\r\n\r\n    if (!this.kritzelEngine) {\r\n      throw new Error('kritzel-engine not found in parent element.');\r\n    }\r\n  }\r\n\r\n  private handleSelect(workspace: KritzelWorkspace) {\r\n    this.selectWorkspace(workspace);\r\n  }\r\n\r\n  private handleNewWorkspace = async () => {\r\n    await this.splitButtonRef?.openMenu();\r\n\r\n    requestAnimationFrame(() => {\r\n      this.newWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');\r\n      this.editingIndex = 0;\r\n    });\r\n  };\r\n\r\n  private handleMenuClosed = () => {\r\n    this.editingIndex = null;\r\n    this.newWorkspace = null;\r\n  };\r\n\r\n  private handleSave = async (item: KritzelMenuItem<KritzelWorkspace>) => {\r\n    const workspace = item.value;\r\n    const updatedWorkspace = { ...workspace, name: item.label };\r\n\r\n    if (this.newWorkspace) {\r\n      await this.kritzelEngine.createWorkspace(updatedWorkspace);\r\n      this.selectWorkspace(updatedWorkspace);\r\n    } else {\r\n      await this.kritzelEngine.updateWorkspace(updatedWorkspace);\r\n    }\r\n    this.editingIndex = null;\r\n    this.newWorkspace = null;\r\n  };\r\n\r\n  private handleRename = (index: number) => {\r\n    this.editingIndex = index;\r\n  };\r\n\r\n  private handleDelete = async (workspaceToDelete: KritzelWorkspace) => {\r\n    await this.kritzelEngine.deleteWorkspace(workspaceToDelete);\r\n\r\n    if (this.activeWorkspace?.id === workspaceToDelete.id) {\r\n      const newActiveWorkspace = this.sortedWorkspaces.find(w => w.id !== workspaceToDelete.id) || null;\r\n      this.selectWorkspace(newActiveWorkspace);\r\n    }\r\n  };\r\n\r\n  private selectWorkspace(workspace: KritzelWorkspace) {\r\n    if (this.editingIndex !== null) return;\r\n    this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id === workspace.id);\r\n    this.workspaceChange.emit(workspace);\r\n  }\r\n\r\n  render() {\r\n    const workspaceSelectionOptions: KritzelMenuItem<KritzelWorkspace>[] = this.sortedWorkspaces.map((ws, index) => ({\r\n      label: ws.name,\r\n      value: ws,\r\n      select: () => this.handleSelect(ws),\r\n      cancel: this.handleMenuClosed,\r\n      save: this.handleSave,\r\n      children: [\r\n        {\r\n          label: 'Rename',\r\n          value: 'rename',\r\n          select: () => this.handleRename(index),\r\n        },\r\n        {\r\n          label: 'Delete',\r\n          value: 'delete',\r\n          disabled: this.sortedWorkspaces.length <= 1,\r\n          select: () => this.handleDelete(ws),\r\n        },\r\n      ],\r\n    }));\r\n\r\n    return (\r\n      <Host>\r\n        <kritzel-split-button\r\n          ref={el => (this.splitButtonRef = el)}\r\n          buttonIcon=\"plus\"\r\n          options={workspaceSelectionOptions}\r\n          activeItemIndex={this.activeItemIndex}\r\n          editingIndex={this.editingIndex}\r\n          onButtonClick={this.handleNewWorkspace}\r\n          onMenuClosed={this.handleMenuClosed}\r\n        ></kritzel-split-button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"kritzel-workspace-manager.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.tsx"],"names":[],"mappings":"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","sourcesContent":["import { KritzelWorkspace } from '../../../classes/workspace.class';\r\nimport { ObjectHelper } from '../../../helpers/object.helper';\r\nimport { IKritzelMenuItem } from '../../../interfaces/menu-item.interface';\r\nimport { Host, h, Component, State, Prop, Event, EventEmitter, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-workspace-manager',\r\n  styleUrl: 'kritzel-workspace-manager.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelWorkspaceManager {\r\n  @Element() host!: HTMLElement;\r\n\r\n  @Prop() activeWorkspace: KritzelWorkspace;\r\n  @Prop() workspaces: KritzelWorkspace[] = [];\r\n\r\n  @Event() isWorkspaceManagerReady: EventEmitter<void>;\r\n  @Event() workspaceChange: EventEmitter<KritzelWorkspace>;\r\n\r\n  @State() childMenuAnchor: HTMLElement = null;\r\n  @State() openChildMenuItem: IKritzelMenuItem = null;\r\n  @State() newWorkspace: KritzelWorkspace | null = null;\r\n  @State() editingItemId: string | null = null;\r\n\r\n  kritzelEngineRef: HTMLKritzelEngineElement | null = null;\r\n  splitButtonRef!: HTMLKritzelSplitButtonElement;\r\n\r\n  get sortedWorkspaces() {\r\n    return [this.newWorkspace, ...this.workspaces].filter(ws => ws != null).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());\r\n  }\r\n\r\n  async componentWillLoad() {\r\n    await this.initializeEngine();\r\n    this.isWorkspaceManagerReady.emit();\r\n  }\r\n\r\n  private async initializeEngine() {\r\n    await customElements.whenDefined('kritzel-engine');\r\n    this.kritzelEngineRef = this.host.parentElement.querySelector('kritzel-engine');\r\n\r\n    if (!this.kritzelEngineRef) {\r\n      throw new Error('kritzel-engine not found in parent element.');\r\n    }\r\n  }\r\n\r\n  private async select(item: IKritzelMenuItem, parent: IKritzelMenuItem) {\r\n    if (this.editingItemId) {\r\n      return;\r\n    }\r\n\r\n    if (item.action) {\r\n      item.action(item, parent);\r\n      return;\r\n    }\r\n\r\n    this.workspaceChange.emit(item.value);\r\n  }\r\n\r\n  private async add() {\r\n    this.newWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');\r\n    this.editingItemId = this.newWorkspace.id;\r\n    await this.splitButtonRef.open();\r\n  }\r\n\r\n  private edit(item: IKritzelMenuItem) {\r\n    this.openChildMenuItem = null;\r\n    this.childMenuAnchor = null;\r\n    requestAnimationFrame(() => {\r\n      this.editingItemId = item.id;\r\n    });\r\n  }\r\n\r\n  private async save(item: IKritzelMenuItem) {\r\n    if (this.newWorkspace) {\r\n      await this.kritzelEngineRef.createWorkspace({ ...item.value, name: item.label });\r\n      this.workspaceChange.emit(this.newWorkspace);\r\n    } else {\r\n      await this.kritzelEngineRef.updateWorkspace({ ...item.value, name: item.label });\r\n    }\r\n\r\n    this.editingItemId = null;\r\n    this.newWorkspace = null;\r\n  }\r\n\r\n  private cancel() {\r\n    this.newWorkspace = null;\r\n    this.editingItemId = null;\r\n  }\r\n\r\n  private async delete(item: IKritzelMenuItem) {\r\n    this.openChildMenuItem = null;\r\n    this.childMenuAnchor = null;\r\n    await this.kritzelEngineRef.deleteWorkspace(item.value);\r\n  }\r\n\r\n  private toggleChildMenu(item: IKritzelMenuItem, anchor: HTMLElement) {\r\n    this.openChildMenuItem = item;\r\n    this.childMenuAnchor = anchor;\r\n  }\r\n\r\n  private closeChildMenu() {\r\n    this.openChildMenuItem = null;\r\n    this.childMenuAnchor = null;\r\n  }\r\n\r\n  private closeMenu() {\r\n    this.cancel();\r\n    this.closeChildMenu();\r\n  }\r\n\r\n  render() {\r\n    console.log('render workspace manager');\r\n    const menuItems = this.sortedWorkspaces\r\n      .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())\r\n      .filter(ws => ws !== null)\r\n      .map(ws => {\r\n        return {\r\n          id: ws.id,\r\n          label: ws.name,\r\n          value: ws,\r\n          isEditing: this.editingItemId === ws.id,\r\n          isSelected: this.activeWorkspace?.id === ws.id,\r\n          isNewItem: this.newWorkspace?.id === ws.id,\r\n          isChildMenuOpen: this.openChildMenuItem?.id === ws.id,\r\n          childMenuAnchor: this.openChildMenuItem?.id === ws.id ? this.childMenuAnchor : null,\r\n          children: [\r\n            {\r\n              id: `${ws.id}-rename`,\r\n              label: 'Rename',\r\n              value: 'rename',\r\n              action: (_item, parent) => this.edit(parent),\r\n            },\r\n            {\r\n              id: `${ws.id}-delete`,\r\n              label: 'Delete',\r\n              value: 'delete',\r\n              action: (_item, parent) => this.delete(parent),\r\n            },\r\n          ],\r\n        };\r\n      });\r\n\r\n    return (\r\n      <Host>\r\n        <kritzel-split-button\r\n          ref={el => (this.splitButtonRef = el)}\r\n          items={menuItems}\r\n          mainButtonDisabled={this.editingItemId != null}\r\n          onButtonClick={() => this.add()}\r\n          onItemSelect={event => this.select(event.detail.item, event.detail.parent)}\r\n          onItemToggleChildMenu={event => this.toggleChildMenu(event.detail.item, event.detail.childMenuAnchor)}\r\n          onItemSave={event => this.save(event.detail)}\r\n          onItemCancel={() => this.cancel()}\r\n          onItemCloseChildMenu={() => this.closeChildMenu()}\r\n          onClose={() => {\r\n            this.closeMenu();\r\n          }}\r\n        ></kritzel-split-button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/configs/default-engine-state.js

@@ -4,7 +4,7 @@ export const DEFAULT_ENGINE_STATE = {
     activeText: null,
     currentPath: null,
     copiedObjects: null,
-    objectsOctree: null,
+    objectsMap: null,
     selectionBox: null,
     selectionGroup: null,
     resizeHandleType: null,

package/dist/collection/configs/default-engine-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"default-engine-state.js","sourceRoot":"","sources":["../../src/configs/default-engine-state.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,oBAAoB,GAAuB;IACtD,eAAe,EAAE,IAAI;IACrB,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,WAAW,EAAE,IAAI;IACjB,aAAa,EAAE,IAAI;IACnB,aAAa,EAAE,IAAI;IACnB,YAAY,EAAE,IAAI;IAClB,cAAc,EAAE,IAAI;IACpB,gBAAgB,EAAE,IAAI;IACtB,kBAAkB,EAAE,KAAK;IACzB,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,WAAW,EAAE,KAAK;IAClB,UAAU,EAAE,KAAK;IACjB,sBAAsB,EAAE,KAAK;IAC7B,UAAU,EAAE,KAAK;IACjB,wBAAwB,EAAE,KAAK;IAC/B,UAAU,EAAE,KAAK;IACjB,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,gBAAgB,EAAE,KAAK;IACvB,oBAAoB,EAAE,KAAK;IAC3B,gBAAgB,EAAE,EAAE;IACpB,YAAY,EAAE,CAAC;IACf,YAAY,EAAE,CAAC;IACf,eAAe,EAAE,KAAK;IACtB,SAAS,EAAE;QACT,cAAc,EAAE,KAAK;QACrB,gBAAgB,EAAE,KAAK;QACvB,WAAW,EAAE,KAAK;QAClB,WAAW,EAAE,KAAK;KACnB;IACD,IAAI,EAAE,IAAI;IACV,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,CAAC;IACX,KAAK,EAAE,CAAC;IACR,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,CAAC;IACX,SAAS,EAAE,KAAK;IAChB,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,CAAC;IACb,aAAa,EAAE,GAAG;IAClB,aAAa,EAAE,CAAC;IAChB,UAAU,EAAE,CAAC;IACb,aAAa,EAAE,GAAG;IAClB,aAAa,EAAE,CAAC;IAChB,aAAa,EAAE,CAAC;IAChB,cAAc,EAAE,CAAC;IACjB,iBAAiB,EAAE,IAAI;IACvB,gBAAgB,EAAE,IAAI;IACtB,cAAc,EAAE,GAAG;IACnB,QAAQ,EAAE,IAAI,GAAG,EAAwB;IACzC,UAAU,EAAE,EAAE;CACf,CAAC","sourcesContent":["import { KritzelEngineState } from \"../interfaces/engine-state.interface\";\r\n\r\nexport const DEFAULT_ENGINE_STATE: KritzelEngineState = {\r\n  activeWorkspace: null,\r\n  activeTool: null,\r\n  activeText: null,\r\n  currentPath: null,\r\n  copiedObjects: null,\r\n  objectsOctree: null,\r\n  selectionBox: null,\r\n  selectionGroup: null,\r\n  resizeHandleType: null,\r\n  hasViewportChanged: false,\r\n  isReady: false,\r\n  isEnabled: true,\r\n  isScaling: false,\r\n  isPanning: false,\r\n  isFocused: false,\r\n  isSelecting: false,\r\n  isResizing: false,\r\n  isResizeHandleSelected: false,\r\n  isRotating: false,\r\n  isRotationHandleSelected: false,\r\n  isDragging: false,\r\n  isDrawing: false,\r\n  isErasing: false,\r\n  isWriting: false,\r\n  isCtrlKeyPressed: false,\r\n  isContextMenuVisible: false,\r\n  contextMenuItems: [],\r\n  contextMenuX: 0,\r\n  contextMenuY: 0,\r\n  skipContextMenu: false,\r\n  debugInfo: {\r\n    showObjectInfo: false,\r\n    showViewportInfo: false,\r\n    logCommands: false,\r\n    logDatabase: false,\r\n  },\r\n  host: null,\r\n  pointerX: 0,\r\n  pointerY: 0,\r\n  scale: 1,\r\n  scaleMax: 1,\r\n  scaleMin: 1,\r\n  scaleStep: 0.075,\r\n  startX: 0,\r\n  startY: 0,\r\n  translateX: 0,\r\n  translateXMax: 400,\r\n  translateXMin: 0,\r\n  translateY: 0,\r\n  translateYMax: 400,\r\n  translateYMin: 0,\r\n  viewportWidth: 0,\r\n  viewportHeight: 0,\r\n  historyBufferSize: 1000,\r\n  longTouchTimeout: null,\r\n  longTouchDelay: 300,\r\n  pointers: new Map<number, PointerEvent>(),\r\n  workspaces: [],\r\n};"]}
+{"version":3,"file":"default-engine-state.js","sourceRoot":"","sources":["../../src/configs/default-engine-state.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,oBAAoB,GAAuB;IACtD,eAAe,EAAE,IAAI;IACrB,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,WAAW,EAAE,IAAI;IACjB,aAAa,EAAE,IAAI;IACnB,UAAU,EAAE,IAAI;IAChB,YAAY,EAAE,IAAI;IAClB,cAAc,EAAE,IAAI;IACpB,gBAAgB,EAAE,IAAI;IACtB,kBAAkB,EAAE,KAAK;IACzB,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,WAAW,EAAE,KAAK;IAClB,UAAU,EAAE,KAAK;IACjB,sBAAsB,EAAE,KAAK;IAC7B,UAAU,EAAE,KAAK;IACjB,wBAAwB,EAAE,KAAK;IAC/B,UAAU,EAAE,KAAK;IACjB,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,gBAAgB,EAAE,KAAK;IACvB,oBAAoB,EAAE,KAAK;IAC3B,gBAAgB,EAAE,EAAE;IACpB,YAAY,EAAE,CAAC;IACf,YAAY,EAAE,CAAC;IACf,eAAe,EAAE,KAAK;IACtB,SAAS,EAAE;QACT,cAAc,EAAE,KAAK;QACrB,gBAAgB,EAAE,KAAK;QACvB,WAAW,EAAE,KAAK;QAClB,WAAW,EAAE,KAAK;KACnB;IACD,IAAI,EAAE,IAAI;IACV,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,CAAC;IACX,KAAK,EAAE,CAAC;IACR,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,CAAC;IACX,SAAS,EAAE,KAAK;IAChB,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,CAAC;IACb,aAAa,EAAE,GAAG;IAClB,aAAa,EAAE,CAAC;IAChB,UAAU,EAAE,CAAC;IACb,aAAa,EAAE,GAAG;IAClB,aAAa,EAAE,CAAC;IAChB,aAAa,EAAE,CAAC;IAChB,cAAc,EAAE,CAAC;IACjB,iBAAiB,EAAE,IAAI;IACvB,gBAAgB,EAAE,IAAI;IACtB,cAAc,EAAE,GAAG;IACnB,QAAQ,EAAE,IAAI,GAAG,EAAwB;IACzC,UAAU,EAAE,EAAE;CACf,CAAC","sourcesContent":["import { KritzelEngineState } from \"../interfaces/engine-state.interface\";\r\n\r\nexport const DEFAULT_ENGINE_STATE: KritzelEngineState = {\r\n  activeWorkspace: null,\r\n  activeTool: null,\r\n  activeText: null,\r\n  currentPath: null,\r\n  copiedObjects: null,\r\n  objectsMap: null,\r\n  selectionBox: null,\r\n  selectionGroup: null,\r\n  resizeHandleType: null,\r\n  hasViewportChanged: false,\r\n  isReady: false,\r\n  isEnabled: true,\r\n  isScaling: false,\r\n  isPanning: false,\r\n  isFocused: false,\r\n  isSelecting: false,\r\n  isResizing: false,\r\n  isResizeHandleSelected: false,\r\n  isRotating: false,\r\n  isRotationHandleSelected: false,\r\n  isDragging: false,\r\n  isDrawing: false,\r\n  isErasing: false,\r\n  isWriting: false,\r\n  isCtrlKeyPressed: false,\r\n  isContextMenuVisible: false,\r\n  contextMenuItems: [],\r\n  contextMenuX: 0,\r\n  contextMenuY: 0,\r\n  skipContextMenu: false,\r\n  debugInfo: {\r\n    showObjectInfo: false,\r\n    showViewportInfo: false,\r\n    logCommands: false,\r\n    logDatabase: false,\r\n  },\r\n  host: null,\r\n  pointerX: 0,\r\n  pointerY: 0,\r\n  scale: 1,\r\n  scaleMax: 1,\r\n  scaleMin: 1,\r\n  scaleStep: 0.075,\r\n  startX: 0,\r\n  startY: 0,\r\n  translateX: 0,\r\n  translateXMax: 400,\r\n  translateXMin: 0,\r\n  translateY: 0,\r\n  translateYMax: 400,\r\n  translateYMin: 0,\r\n  viewportWidth: 0,\r\n  viewportHeight: 0,\r\n  historyBufferSize: 1000,\r\n  longTouchTimeout: null,\r\n  longTouchDelay: 300,\r\n  pointers: new Map<number, PointerEvent>(),\r\n  workspaces: [],\r\n};"]}

package/dist/collection/helpers/keyboard.helper.js

@@ -27,5 +27,23 @@ export class KritzelKeyboardHelper {
             meta.setAttribute('content', newContent);
         }
     }
+    static onKeyboardVisibleChanged(callback) {
+        if ('visualViewport' in window) {
+            const VIEWPORT_VS_CLIENT_HEIGHT_RATIO = 0.75;
+            const onResize = (event) => {
+                const target = event.target;
+                const isOpen = (target.height * target.scale) / window.screen.height < VIEWPORT_VS_CLIENT_HEIGHT_RATIO;
+                callback(isOpen);
+            };
+            window.visualViewport.addEventListener('resize', onResize);
+            return () => window.visualViewport.removeEventListener('resize', onResize);
+        }
+        else {
+            // Fallback for older browsers does not provide a reliable event-based mechanism.
+            console.warn('Listening for keyboard visibility changes is not reliably supported in this browser.');
+            // Return a no-op cleanup function.
+            return () => { };
+        }
+    }
 }
 //# sourceMappingURL=keyboard.helper.js.map

package/dist/collection/helpers/keyboard.helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard.helper.js","sourceRoot":"","sources":["../../src/helpers/keyboard.helper.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,qBAAqB;IAChC,MAAM,CAAC,iBAAiB;QACtB,IAAI,QAAQ,CAAC,aAAa,YAAY,WAAW,EAAE,CAAC;YAClD,QAAQ,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;QAChC,CAAC;IACH,CAAC;IAED,MAAM,CAAC,uBAAuB;QAC5B,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,sEAAsE,CAAC,CAAC;QAC5G,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;YAClD,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,oCAAoC,CAAC,EAAE,CAAC;gBACnE,cAAc,IAAI,sCAAsC,CAAC;YAC3D,CAAC;YACD,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC;IAED,MAAM,CAAC,wBAAwB;QAC7B,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,sEAAsE,CAAC,CAAC;QAC5G,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;YAClD,IAAI,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC,gDAAgD,EAAE,EAAE,CAAC,CAAC;YAC9F,UAAU,GAAG,UAAU;iBACpB,OAAO,CAAC,WAAW,EAAE,GAAG,CAAC;iBACzB,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;iBACjB,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;iBACjB,IAAI,EAAE,CAAC;YACV,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC;CACF","sourcesContent":["export class KritzelKeyboardHelper {\r\n  static forceHideKeyboard(): void {\r\n    if (document.activeElement instanceof HTMLElement) {\r\n      document.activeElement.blur();\r\n    }\r\n  }\r\n\r\n  static enableInteractiveWidget(): void {\r\n    const meta = document.querySelector('meta[name=\"viewport\"][content*=\"interactive-widget=resizes-content\"]');\r\n    if (meta) {\r\n      let currentContent = meta.getAttribute('content');\r\n      if (!currentContent.includes('interactive-widget=resizes-content')) {\r\n        currentContent += ', interactive-widget=resizes-content';\r\n      }\r\n      meta.setAttribute('content', currentContent);\r\n    }\r\n  }\r\n\r\n  static disableInteractiveWidget(): void {\r\n    const meta = document.querySelector('meta[name=\"viewport\"][content*=\"interactive-widget=resizes-content\"]');\r\n    if (meta) {\r\n      let currentContent = meta.getAttribute('content');\r\n      let newContent = currentContent.replace(/\\s*interactive-widget=resizes-content\\s*[,;]?/g, '');\r\n      newContent = newContent\r\n        .replace(/,(\\s*,)+/g, ',')\r\n        .replace(/^,/, '')\r\n        .replace(/,$/, '')\r\n        .trim();\r\n      meta.setAttribute('content', newContent);\r\n    }\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"keyboard.helper.js","sourceRoot":"","sources":["../../src/helpers/keyboard.helper.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,qBAAqB;IAChC,MAAM,CAAC,iBAAiB;QACtB,IAAI,QAAQ,CAAC,aAAa,YAAY,WAAW,EAAE,CAAC;YAClD,QAAQ,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;QAChC,CAAC;IACH,CAAC;IAED,MAAM,CAAC,uBAAuB;QAC5B,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,sEAAsE,CAAC,CAAC;QAC5G,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;YAClD,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,oCAAoC,CAAC,EAAE,CAAC;gBACnE,cAAc,IAAI,sCAAsC,CAAC;YAC3D,CAAC;YACD,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC;IAED,MAAM,CAAC,wBAAwB;QAC7B,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,sEAAsE,CAAC,CAAC;QAC5G,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;YAClD,IAAI,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC,gDAAgD,EAAE,EAAE,CAAC,CAAC;YAC9F,UAAU,GAAG,UAAU;iBACpB,OAAO,CAAC,WAAW,EAAE,GAAG,CAAC;iBACzB,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;iBACjB,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;iBACjB,IAAI,EAAE,CAAC;YACV,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC;IAED,MAAM,CAAC,wBAAwB,CAAC,QAAmC;QACjE,IAAI,gBAAgB,IAAI,MAAM,EAAE,CAAC;YAC/B,MAAM,+BAA+B,GAAG,IAAI,CAAC;YAC7C,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;gBAChC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAwB,CAAC;gBAC9C,MAAM,MAAM,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,+BAA+B,CAAC;gBACvG,QAAQ,CAAC,MAAM,CAAC,CAAC;YACnB,CAAC,CAAC;YAEF,MAAM,CAAC,cAAc,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;YAC3D,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,cAAc,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC7E,CAAC;aAAM,CAAC;YACN,iFAAiF;YACjF,OAAO,CAAC,IAAI,CAAC,sFAAsF,CAAC,CAAC;YACrG,mCAAmC;YACnC,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;QAClB,CAAC;IACH,CAAC;CACF","sourcesContent":["export class KritzelKeyboardHelper {\r\n  static forceHideKeyboard(): void {\r\n    if (document.activeElement instanceof HTMLElement) {\r\n      document.activeElement.blur();\r\n    }\r\n  }\r\n\r\n  static enableInteractiveWidget(): void {\r\n    const meta = document.querySelector('meta[name=\"viewport\"][content*=\"interactive-widget=resizes-content\"]');\r\n    if (meta) {\r\n      let currentContent = meta.getAttribute('content');\r\n      if (!currentContent.includes('interactive-widget=resizes-content')) {\r\n        currentContent += ', interactive-widget=resizes-content';\r\n      }\r\n      meta.setAttribute('content', currentContent);\r\n    }\r\n  }\r\n\r\n  static disableInteractiveWidget(): void {\r\n    const meta = document.querySelector('meta[name=\"viewport\"][content*=\"interactive-widget=resizes-content\"]');\r\n    if (meta) {\r\n      let currentContent = meta.getAttribute('content');\r\n      let newContent = currentContent.replace(/\\s*interactive-widget=resizes-content\\s*[,;]?/g, '');\r\n      newContent = newContent\r\n        .replace(/,(\\s*,)+/g, ',')\r\n        .replace(/^,/, '')\r\n        .replace(/,$/, '')\r\n        .trim();\r\n      meta.setAttribute('content', newContent);\r\n    }\r\n  }\r\n\r\n  static onKeyboardVisibleChanged(callback: (isOpen: boolean) => void): () => void {\r\n    if ('visualViewport' in window) {\r\n      const VIEWPORT_VS_CLIENT_HEIGHT_RATIO = 0.75;\r\n      const onResize = (event: Event) => {\r\n        const target = event.target as VisualViewport;\r\n        const isOpen = (target.height * target.scale) / window.screen.height < VIEWPORT_VS_CLIENT_HEIGHT_RATIO;\r\n        callback(isOpen);\r\n      };\r\n\r\n      window.visualViewport.addEventListener('resize', onResize);\r\n      return () => window.visualViewport.removeEventListener('resize', onResize);\r\n    } else {\r\n      // Fallback for older browsers does not provide a reliable event-based mechanism.\r\n      console.warn('Listening for keyboard visibility changes is not reliably supported in this browser.');\r\n      // Return a no-op cleanup function.\r\n      return () => {};\r\n    }\r\n  }\r\n}\r\n"]}

package/dist/collection/index.js

@@ -16,6 +16,7 @@ export * from './classes/tools/image-tool.class';
 export * from './classes/tools/text-tool.class';
 export * from './classes/tools/selection-tool.class';
 export * from './interfaces/toolbar-control.interface';
+export * from './interfaces/menu-item.interface';
 export * from './configs/default-brush-tool.config';
 export * from './configs/default-text-tool.config';
 //# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAE9C,cAAc,kCAAkC,CAAC;AACjD,cAAc,mCAAmC,CAAC;AAClD,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,sCAAsC,CAAC;AAErD,cAAc,wCAAwC,CAAC;AAEvD,cAAc,qCAAqC,CAAC;AACpD,cAAc,oCAAoC,CAAC","sourcesContent":["/**\r\n * @fileoverview entry point for your component library\r\n *\r\n * This is the entry point for your component library. Use this file to export utilities,\r\n * constants or data structure that accompany your components.\r\n *\r\n * DO NOT use this file to export your components. Instead, use the recommended approaches\r\n * to consume components of this package as outlined in the `README.md`.\r\n */\r\n\r\nexport type * from './components';\r\n\r\nexport * from './classes/objects/text.class';\r\nexport * from './classes/objects/path.class';\r\nexport * from './classes/objects/image.class';\r\n\r\nexport * from './classes/tools/brush-tool.class';\r\nexport * from './classes/tools/eraser-tool.class';\r\nexport * from './classes/tools/image-tool.class';\r\nexport * from './classes/tools/text-tool.class';\r\nexport * from './classes/tools/selection-tool.class';\r\n\r\nexport * from './interfaces/toolbar-control.interface';\r\n\r\nexport * from './configs/default-brush-tool.config';\r\nexport * from './configs/default-text-tool.config';\r\n\r\n\r\n\r\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAE9C,cAAc,kCAAkC,CAAC;AACjD,cAAc,mCAAmC,CAAC;AAClD,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,sCAAsC,CAAC;AAErD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AAEjD,cAAc,qCAAqC,CAAC;AACpD,cAAc,oCAAoC,CAAC","sourcesContent":["/**\r\n * @fileoverview entry point for your component library\r\n *\r\n * This is the entry point for your component library. Use this file to export utilities,\r\n * constants or data structure that accompany your components.\r\n *\r\n * DO NOT use this file to export your components. Instead, use the recommended approaches\r\n * to consume components of this package as outlined in the `README.md`.\r\n */\r\n\r\nexport type * from './components';\r\n\r\nexport * from './classes/objects/text.class';\r\nexport * from './classes/objects/path.class';\r\nexport * from './classes/objects/image.class';\r\n\r\nexport * from './classes/tools/brush-tool.class';\r\nexport * from './classes/tools/eraser-tool.class';\r\nexport * from './classes/tools/image-tool.class';\r\nexport * from './classes/tools/text-tool.class';\r\nexport * from './classes/tools/selection-tool.class';\r\n\r\nexport * from './interfaces/toolbar-control.interface';\r\nexport * from './interfaces/menu-item.interface';\r\n\r\nexport * from './configs/default-brush-tool.config';\r\nexport * from './configs/default-text-tool.config';\r\n\r\n\r\n\r\n\r\n"]}

package/dist/collection/interfaces/engine-state.interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"engine-state.interface.js","sourceRoot":"","sources":["../../src/interfaces/engine-state.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { KritzelBaseObject } from \"../classes/objects/base-object.class\";\r\nimport { KritzelPath } from \"../classes/objects/path.class\";\r\nimport { KrtizelSelectionBox } from \"../classes/objects/selection-box.class\";\r\nimport { KritzelSelectionGroup } from \"../classes/objects/selection-group.class\";\r\nimport { KritzelText } from \"../classes/objects/text.class\";\r\nimport { KritzelOctree } from \"../classes/structures/octree.structure\";\r\nimport { KritzelBaseTool } from \"../classes/tools/base-tool.class\";\r\nimport { KritzelWorkspace } from \"../classes/workspace.class\";\r\nimport { KritzelHandleType } from \"../enums/handle-type.enum\";\r\nimport { ContextMenuItem } from \"./context-menu-item.interface\";\r\nimport { KritzelDebugInfo } from \"./debug-info.interface\";\r\n\r\nexport interface KritzelEngineState {\r\n  activeWorkspace: KritzelWorkspace;\r\n  activeTool: KritzelBaseTool;\r\n  activeText: KritzelText;\r\n  currentPath?: KritzelPath;\r\n  copiedObjects?: KritzelSelectionGroup;\r\n  objectsOctree: KritzelOctree<KritzelBaseObject<Element>>;\r\n  selectionBox?: KrtizelSelectionBox;\r\n  selectionGroup?: KritzelSelectionGroup;\r\n  resizeHandleType: KritzelHandleType;\r\n  hasViewportChanged: boolean;\r\n  isReady: boolean;\r\n  isEnabled: boolean;\r\n  isScaling: boolean;\r\n  isPanning: boolean;\r\n  isFocused: boolean;\r\n  isSelecting: boolean;\r\n  isResizing: boolean;\r\n  isResizeHandleSelected: boolean;\r\n  isRotating: boolean;\r\n  isRotationHandleSelected: boolean;\r\n  isDragging: boolean;\r\n  isDrawing: boolean;\r\n  isErasing: boolean;\r\n  isWriting: boolean;\r\n  isCtrlKeyPressed: boolean;\r\n  isContextMenuVisible: boolean;\r\n  contextMenuItems: ContextMenuItem[];\r\n  contextMenuX: number;\r\n  contextMenuY: number;\r\n  skipContextMenu: boolean;\r\n  debugInfo: KritzelDebugInfo;\r\n  host: HTMLElement;\r\n  pointerX: number;\r\n  pointerY: number;\r\n  scale: number;\r\n  scaleMax: number;\r\n  scaleMin: number;\r\n  scaleStep: number;\r\n  startX: number;\r\n  startY: number;\r\n  translateX: number;\r\n  translateXMax: number;\r\n  translateXMin: number;\r\n  translateY: number;\r\n  translateYMax: number;\r\n  translateYMin: number;\r\n  viewportWidth: number;\r\n  viewportHeight: number;\r\n  historyBufferSize: number;\r\n  longTouchTimeout: number;\r\n  longTouchDelay: number;\r\n  pointers: Map<number, PointerEvent>;\r\n  workspaces: KritzelWorkspace[];\r\n}"]}
+{"version":3,"file":"engine-state.interface.js","sourceRoot":"","sources":["../../src/interfaces/engine-state.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { KritzelBaseObject } from \"../classes/objects/base-object.class\";\r\nimport { KritzelPath } from \"../classes/objects/path.class\";\r\nimport { KrtizelSelectionBox } from \"../classes/objects/selection-box.class\";\r\nimport { KritzelSelectionGroup } from \"../classes/objects/selection-group.class\";\r\nimport { KritzelText } from \"../classes/objects/text.class\";\r\nimport { KritzelObjectMap } from \"../classes/structures/object-map.structure\";\r\nimport { KritzelBaseTool } from \"../classes/tools/base-tool.class\";\r\nimport { KritzelWorkspace } from \"../classes/workspace.class\";\r\nimport { KritzelHandleType } from \"../enums/handle-type.enum\";\r\nimport { ContextMenuItem } from \"./context-menu-item.interface\";\r\nimport { KritzelDebugInfo } from \"./debug-info.interface\";\r\n\r\nexport interface KritzelEngineState {\r\n  activeWorkspace: KritzelWorkspace;\r\n  activeTool: KritzelBaseTool;\r\n  activeText: KritzelText;\r\n  currentPath?: KritzelPath;\r\n  copiedObjects?: KritzelSelectionGroup;\r\n  objectsMap: KritzelObjectMap<KritzelBaseObject<Element>>;\r\n  selectionBox?: KrtizelSelectionBox;\r\n  selectionGroup?: KritzelSelectionGroup;\r\n  resizeHandleType: KritzelHandleType;\r\n  hasViewportChanged: boolean;\r\n  isReady: boolean;\r\n  isEnabled: boolean;\r\n  isScaling: boolean;\r\n  isPanning: boolean;\r\n  isFocused: boolean;\r\n  isSelecting: boolean;\r\n  isResizing: boolean;\r\n  isResizeHandleSelected: boolean;\r\n  isRotating: boolean;\r\n  isRotationHandleSelected: boolean;\r\n  isDragging: boolean;\r\n  isDrawing: boolean;\r\n  isErasing: boolean;\r\n  isWriting: boolean;\r\n  isCtrlKeyPressed: boolean;\r\n  isContextMenuVisible: boolean;\r\n  contextMenuItems: ContextMenuItem[];\r\n  contextMenuX: number;\r\n  contextMenuY: number;\r\n  skipContextMenu: boolean;\r\n  debugInfo: KritzelDebugInfo;\r\n  host: HTMLElement;\r\n  pointerX: number;\r\n  pointerY: number;\r\n  scale: number;\r\n  scaleMax: number;\r\n  scaleMin: number;\r\n  scaleStep: number;\r\n  startX: number;\r\n  startY: number;\r\n  translateX: number;\r\n  translateXMax: number;\r\n  translateXMin: number;\r\n  translateY: number;\r\n  translateYMax: number;\r\n  translateYMin: number;\r\n  viewportWidth: number;\r\n  viewportHeight: number;\r\n  historyBufferSize: number;\r\n  longTouchTimeout: number;\r\n  longTouchDelay: number;\r\n  pointers: Map<number, PointerEvent>;\r\n  workspaces: KritzelWorkspace[];\r\n}"]}

package/dist/collection/interfaces/menu-item.interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.interface.js","sourceRoot":"","sources":["../../src/interfaces/menu-item.interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface KritzelMenuItem<T = any> {\r\n  value: T;\r\n  label: string;\r\n  select?: (item: KritzelMenuItem) => void;\r\n  save?: (item: KritzelMenuItem) => void;\r\n  cancel?: (item: KritzelMenuItem) => void;\r\n  disabled?: boolean;\r\n  children?: KritzelMenuItem[];\r\n}"]}
+{"version":3,"file":"menu-item.interface.js","sourceRoot":"","sources":["../../src/interfaces/menu-item.interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface IKritzelMenuItem<T = any> {\r\n  id: string;\r\n  label: string;\r\n  value?: T;\r\n  children?: IKritzelMenuItem[];\r\n  isSelectable?: boolean;\r\n  isSelected?: boolean;\r\n  isEditing?: boolean;\r\n  isDisabled?: boolean;\r\n  isChildMenuOpen?: boolean;\r\n  isNewItem?: boolean;\r\n  childMenuAnchor?: HTMLElement;\r\n  unchangedState?: Partial<IKritzelMenuItem>;\r\n  action?: (item: IKritzelMenuItem, parent: IKritzelMenuItem) => void;\r\n}\r\n\r\nexport interface IKritzelMenuItemSelectEvent {\r\n  item: IKritzelMenuItem;\r\n  parent: IKritzelMenuItem;\r\n}\r\n\r\nexport interface IKritzelMenuItemToggleChildMenuEvent {\r\n  item: IKritzelMenuItem;\r\n  childMenuAnchor: HTMLElement;\r\n}\r\n"]}

package/dist/components/index.d.ts

@@ -31,6 +31,8 @@ export { KritzelIcon as KritzelIcon } from '../types/components/shared/kritzel-i
 export { defineCustomElement as defineCustomElementKritzelIcon } from './kritzel-icon';
 export { KritzelMenu as KritzelMenu } from '../types/components/shared/kritzel-menu/kritzel-menu';
 export { defineCustomElement as defineCustomElementKritzelMenu } from './kritzel-menu';
+export { KritzelMenuItem as KritzelMenuItem } from '../types/components/shared/kritzel-menu-item/kritzel-menu-item';
+export { defineCustomElement as defineCustomElementKritzelMenuItem } from './kritzel-menu-item';
 export { KritzelPortal as KritzelPortal } from '../types/components/shared/kritzel-portal/kritzel-portal';
 export { defineCustomElement as defineCustomElementKritzelPortal } from './kritzel-portal';
 export { KritzelSplitButton as KritzelSplitButton } from '../types/components/shared/kritzel-split-button/kritzel-split-button';

package/dist/components/index.js

@@ -1,6 +1,6 @@
 export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-BqrTPNyu.js';
-export { b as KritzelBrushTool, a as KritzelPath, K as KritzelText, c as KritzelTextTool } from './p-B7VrEdgP.js';
-export { a as KritzelEraserTool, K as KritzelImage, b as KritzelImageTool, c as KritzelSelectionTool } from './p-D-zg05gA.js';
+export { b as KritzelBrushTool, a as KritzelPath, K as KritzelText, c as KritzelTextTool } from './p-C9-70hiF.js';
+export { a as KritzelEraserTool, K as KritzelImage, b as KritzelImageTool, c as KritzelSelectionTool } from './p-jGaWxggY.js';
 export { D as DEFAULT_BRUSH_CONFIG, a as DEFAULT_TEXT_CONFIG, KritzelEditor, defineCustomElement as defineCustomElementKritzelEditor } from './kritzel-editor.js';
 export { KritzelBrushStyle, defineCustomElement as defineCustomElementKritzelBrushStyle } from './kritzel-brush-style.js';
 export { KritzelColor, defineCustomElement as defineCustomElementKritzelColor } from './kritzel-color.js';
@@ -17,6 +17,7 @@ export { KritzelFontFamily, defineCustomElement as defineCustomElementKritzelFon
 export { KritzelFontSize, defineCustomElement as defineCustomElementKritzelFontSize } from './kritzel-font-size.js';
 export { KritzelIcon, defineCustomElement as defineCustomElementKritzelIcon } from './kritzel-icon.js';
 export { KritzelMenu, defineCustomElement as defineCustomElementKritzelMenu } from './kritzel-menu.js';
+export { KritzelMenuItem, defineCustomElement as defineCustomElementKritzelMenuItem } from './kritzel-menu-item.js';
 export { KritzelPortal, defineCustomElement as defineCustomElementKritzelPortal } from './kritzel-portal.js';
 export { KritzelSplitButton, defineCustomElement as defineCustomElementKritzelSplitButton } from './kritzel-split-button.js';
 export { KritzelStrokeSize, defineCustomElement as defineCustomElementKritzelStrokeSize } from './kritzel-stroke-size.js';

package/dist/components/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/kritzel-control-brush-config.js

@@ -1,4 +1,4 @@
-import { K as KritzelControlBrushConfig$1, d as defineCustomElement$1 } from './p-a7KmQzo4.js';
+import { K as KritzelControlBrushConfig$1, d as defineCustomElement$1 } from './p-Cb1IUD_g.js';
 
 const KritzelControlBrushConfig = KritzelControlBrushConfig$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-control-text-config.js

@@ -1,4 +1,4 @@
-import { K as KritzelControlTextConfig$1, d as defineCustomElement$1 } from './p-BaKb8ZLg.js';
+import { K as KritzelControlTextConfig$1, d as defineCustomElement$1 } from './p-Crni2OI4.js';
 
 const KritzelControlTextConfig = KritzelControlTextConfig$1;
 const defineCustomElement = defineCustomElement$1;