@kritzel/editor 0.4.31

package/dist/collection/components/kritzel-split-button/kritzel-split-button.css

@@ -0,0 +1,78 @@
+:host {
+  position: relative;
+  display: flex;
+  align-items: center;
+  font-family: sans-serif;
+  z-index: 1;
+  padding: var(--kritzel-split-button-padding, 4px);
+  background-color: var(--kritzel-split-button-background-color, #ffffff);
+  border-radius: var(--kritzel-split-button-border-radius, 12px);
+  box-shadow: var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
+  border: var(--kritzel-split-button-border, 1px solid #ebebeb);
+  gap: var(--kritzel-split-button-gap, 4px);
+}
+
+:host(.mobile){
+  --kritzel-split-button-hover-background-color: transparent;
+}
+
+button {
+  border: none;
+  background-color: transparent;
+  padding: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  color: var(--kritzel-split-button-color, #000000);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: all;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.split-main-button,
+.split-menu-button {
+  height: auto;
+  display: flex;
+  align-items: center;
+  padding: var(--kritzel-split-button-padding, 8px);
+  background-color: var(--kritzel-split-button-background-color, #ffffff);
+  border-radius: var(--kritzel-split-button-border-radius, 12px);
+  font-size: var(--kritzel-split-button-font-size, 14px);
+}
+
+.split-main-button:hover,
+.split-menu-button:hover {
+  background-color: var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
+}
+
+.split-main-button:focus,
+.split-menu-button:focus {
+  background-color: var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
+}
+
+.split-main-button {
+  gap: var(--kritzel-split-button-gap, 4px);
+}
+
+.split-menu-button {
+  border-left: none;
+  justify-content: center;
+}
+
+.split-divider {
+  width: var(--kritzel-split-button-divider-width, 1px);
+  height: 24px;
+  background-color: var(--kritzel-split-button-divider-background-color, hsl(0, 0%, 0%, 4.3%));
+}
+
+:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}

package/dist/collection/components/kritzel-split-button/kritzel-split-button.js

@@ -0,0 +1,433 @@
+import { h, Host } from "@stencil/core";
+import { KritzelDevicesHelper } from "@kritzel/engine";
+export class KritzelSplitButton {
+    host;
+    buttonIcon = 'plus';
+    dropdownIcon = 'chevron-down';
+    items = [];
+    mainButtonDisabled = false;
+    menuButtonDisabled = false;
+    mainButtonClick;
+    itemSelect;
+    itemSave;
+    itemCancel;
+    itemToggleChildMenu;
+    itemCloseChildMenu;
+    menuOpen;
+    menuClose;
+    isMenuOpen = false;
+    isTouchDevice = KritzelDevicesHelper.isTouchDevice();
+    anchorElement;
+    menuScrollTop = 0;
+    splitMenuButtonRef;
+    menuRef;
+    async open() {
+        if (this.isMenuOpen)
+            return;
+        window.dispatchEvent(new CustomEvent('kritzel-dismiss-menus'));
+        this.isMenuOpen = true;
+        this.anchorElement = this.host;
+        this.menuOpen.emit();
+    }
+    async close() {
+        this.closeMenu();
+    }
+    async focusMenu() {
+        if (this.menuRef) {
+            await this.menuRef.setFocus();
+        }
+    }
+    handleButtonClick = (event) => {
+        event.stopPropagation();
+        this.mainButtonClick.emit();
+    };
+    toggleMenu = (event) => {
+        event.stopPropagation();
+        if (this.isMenuOpen) {
+            this.closeMenu();
+        }
+        else {
+            this.openMenu(event);
+        }
+    };
+    openMenu = (event) => {
+        event.stopPropagation();
+        window.dispatchEvent(new CustomEvent('kritzel-dismiss-menus'));
+        this.isMenuOpen = true;
+        this.anchorElement = this.host;
+        this.menuOpen.emit();
+        requestAnimationFrame(() => {
+            this.menuRef?.setScrollTop(this.menuScrollTop);
+        });
+    };
+    closeMenu = () => {
+        this.isMenuOpen = false;
+        this.anchorElement = null;
+        this.splitMenuButtonRef?.blur();
+        this.menuClose.emit();
+    };
+    handleItemSelect = event => {
+        this.itemSelect.emit(event.detail);
+    };
+    handleItemSave = event => {
+        this.itemSave.emit(event.detail);
+    };
+    handleItemCancel = event => {
+        this.itemCancel.emit(event.detail);
+    };
+    handleItemToggleChildMenu = event => {
+        this.itemToggleChildMenu.emit(event.detail);
+    };
+    handleItemCloseChildMenu = event => {
+        this.itemCloseChildMenu.emit(event.detail);
+    };
+    handleScroll = event => {
+        this.menuScrollTop = event.target.scrollTop;
+    };
+    render() {
+        return (h(Host, { key: '80f3c3e9287618077ac2a617adf7d6a0de655e7a', class: { mobile: this.isTouchDevice } }, h("button", { key: '91b74d5411e4923f5dff8b664e3de1a8bcfd1889', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && h("kritzel-icon", { key: 'd089a83295928b61604e795db2d4696c463f00e2', name: this.buttonIcon })), h("div", { key: '7aa9f16c44edc37a1fce8ffdfddd78ae9b376024', class: "split-divider" }), h("button", { key: '45c8ee363f4d07c282b4a21381e1af80cf4a52f1', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled, "aria-label": "Open menu" }, h("kritzel-icon", { key: 'bab844ef65aa599a138522d94f1e067e8003ff67', name: this.dropdownIcon })), h("kritzel-portal", { key: '9f7241ef66f83e05c18613f36605dc3b6c41352a', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '034c48192e15d56602b29a7e8d491e15cc01bd41', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
+    }
+    static get is() { return "kritzel-split-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-split-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-split-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "buttonIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-icon",
+                "defaultValue": "'plus'"
+            },
+            "dropdownIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dropdown-icon",
+                "defaultValue": "'chevron-down'"
+            },
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IKritzelMenuItem[]",
+                    "resolved": "IKritzelMenuItem<any>[]",
+                    "references": {
+                        "IKritzelMenuItem": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::IKritzelMenuItem",
+                            "referenceLocation": "IKritzelMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "mainButtonDisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "main-button-disabled",
+                "defaultValue": "false"
+            },
+            "menuButtonDisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "menu-button-disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isMenuOpen": {},
+            "isTouchDevice": {},
+            "anchorElement": {},
+            "menuScrollTop": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mainButtonClick",
+                "name": "mainButtonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "itemSelect",
+                "name": "itemSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "IKritzelMenuItemSelectEvent",
+                    "resolved": "IKritzelMenuItemSelectEvent",
+                    "references": {
+                        "IKritzelMenuItemSelectEvent": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::IKritzelMenuItemSelectEvent",
+                            "referenceLocation": "IKritzelMenuItemSelectEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "itemSave",
+                "name": "itemSave",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "IKritzelMenuItem",
+                    "resolved": "IKritzelMenuItem<any>",
+                    "references": {
+                        "IKritzelMenuItem": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::IKritzelMenuItem",
+                            "referenceLocation": "IKritzelMenuItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "itemCancel",
+                "name": "itemCancel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "IKritzelMenuItem",
+                    "resolved": "IKritzelMenuItem<any>",
+                    "references": {
+                        "IKritzelMenuItem": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::IKritzelMenuItem",
+                            "referenceLocation": "IKritzelMenuItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "itemToggleChildMenu",
+                "name": "itemToggleChildMenu",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "IKritzelMenuItemToggleChildMenuEvent",
+                    "resolved": "IKritzelMenuItemToggleChildMenuEvent",
+                    "references": {
+                        "IKritzelMenuItemToggleChildMenuEvent": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::IKritzelMenuItemToggleChildMenuEvent",
+                            "referenceLocation": "IKritzelMenuItemToggleChildMenuEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "itemCloseChildMenu",
+                "name": "itemCloseChildMenu",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "IKritzelMenuItem",
+                    "resolved": "IKritzelMenuItem<any>",
+                    "references": {
+                        "IKritzelMenuItem": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::IKritzelMenuItem",
+                            "referenceLocation": "IKritzelMenuItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "menuOpen",
+                "name": "menuOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "menuClose",
+                "name": "menuClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "focusMenu": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/kritzel-stroke-size/kritzel-stroke-size.css

@@ -0,0 +1,37 @@
+:host {
+  display: flex;
+  align-items: flex-start;
+  gap: 0;
+  padding: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.size-grid {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 32px);
+  gap: 8px;
+  justify-items: center;
+}
+
+.size-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  border: 2px solid transparent;
+  box-sizing: border-box;
+}
+
+.size-container:hover {
+  background-color: var(--kritzel-stroke-size-hover-background-color, #ebebeb);
+}
+
+.size-container.selected {
+  border-color: var(--kritzel-selection-border-color, #007AFF);
+  background-color: var(--kritzel-stroke-size-selected-background-color, #ebebeb);
+}

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

@@ -0,0 +1,89 @@
+import { Host, h } from "@stencil/core";
+export class KritzelStrokeSize {
+    sizes = [4, 6, 8, 12, 16, 24];
+    selectedSize = null;
+    sizeChange;
+    handleSizeClick(size) {
+        this.selectedSize = size;
+        this.sizeChange.emit(size);
+    }
+    render() {
+        const sizes = this.sizes ?? [];
+        return (h(Host, { key: '826fcdeaedaa3d33be0d6b446941bf92a36b13c3' }, h("div", { key: 'd4fb007d3ad0d31ce4424079ab02a2f4f36b1f61', class: "size-grid" }, sizes.map(size => (h("div", { tabIndex: 0, class: {
+                'size-container': true,
+                'selected': this.selectedSize === size,
+            }, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: 'var(--kritzel-global-text-primary)', size: size })))))));
+    }
+    static get is() { return "kritzel-stroke-size"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-stroke-size.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-stroke-size.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "sizes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[4, 6, 8, 12, 16, 24]"
+            },
+            "selectedSize": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number | null",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-size",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sizeChange",
+                "name": "sizeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/kritzel-tool-config/kritzel-tool-config.css

@@ -0,0 +1,38 @@
+.expand-toggle {
+  background: none;
+  border: none;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  color: var(--kritzel-icon-color, currentColor);
+  transition: transform 0.2s ease;
+}
+
+.expand-toggle:hover {
+  opacity: 0.7;
+}
+
+.expand-toggle:focus {
+  outline: none;
+}
+
+.expand-toggle:focus-visible {
+  outline: 2px solid var(--kritzel-focus-color, #007acc);
+  outline-offset: 2px;
+}
+
+.expand-toggle:active {
+  transform: scale(0.95);
+}
+
+.divider {
+  height: 1px;
+  background-color: var(--kritzel-divider-color, #e0e0e0);
+  margin: 4px 0;
+  width: 100%;
+}