@kritzel/editor 0.4.31

package/dist/collection/components/kritzel-color/kritzel-color.css

@@ -0,0 +1,25 @@
+:host {
+  display: flex;
+}
+
+.checkerboard-bg {
+  background: repeating-conic-gradient(
+      var(--kritzel-checkerboard-color-dark, #ccc) 0% 25%,
+      var(--kritzel-checkerboard-color-light, #fff) 0% 50%
+    )
+    50% / 8px 8px;
+  position: relative;
+  overflow: hidden;
+}
+
+.color-circle {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  box-sizing: border-box;
+  display: block;
+}
+
+.color-circle.white {
+  border: 1px solid var(--kritzel-color-palette-circle-border-color, #dddcdc);
+}

package/dist/collection/components/kritzel-color/kritzel-color.js

@@ -0,0 +1,149 @@
+import { Host, h } from "@stencil/core";
+import { KritzelColorHelper } from "@kritzel/engine";
+export class KritzelColorComponent {
+    value;
+    theme;
+    size = 24;
+    resolveColor() {
+        if (!this.value)
+            return '';
+        if (typeof this.value === 'string')
+            return this.value;
+        return KritzelColorHelper.resolveThemeColor(this.value, this.theme);
+    }
+    isLightColor(hexColor) {
+        if (!hexColor)
+            return false;
+        let r = 0, g = 0, b = 0;
+        let sanitizedHex = hexColor.startsWith('#') ? hexColor.slice(1) : hexColor;
+        if (sanitizedHex.length === 3) {
+            r = parseInt(sanitizedHex[0] + sanitizedHex[0], 16);
+            g = parseInt(sanitizedHex[1] + sanitizedHex[1], 16);
+            b = parseInt(sanitizedHex[2] + sanitizedHex[2], 16);
+        }
+        else if (sanitizedHex.length === 6) {
+            r = parseInt(sanitizedHex.substring(0, 2), 16);
+            g = parseInt(sanitizedHex.substring(2, 4), 16);
+            b = parseInt(sanitizedHex.substring(4, 6), 16);
+        }
+        else {
+            return false;
+        }
+        if (isNaN(r) || isNaN(g) || isNaN(b)) {
+            return false;
+        }
+        const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
+        return luminance > 220;
+    }
+    render() {
+        const resolvedColor = this.resolveColor();
+        const isColorVeryLight = this.isLightColor(resolvedColor);
+        return (h(Host, { key: 'b0543e30ee8a4a79aa0487f207eb8174b2b26e08' }, h("div", { key: 'e88eb0d0eb80ba925b94c16637ed168e1b0c76fb', class: "checkerboard-bg", style: {
+                width: `${this.size}px`,
+                height: `${this.size}px`,
+                borderRadius: '50%',
+                display: 'inline-block',
+                position: 'relative',
+            } }, h("div", { key: '86381f69b78fc987c581daf19302049fb137afb7', class: {
+                'color-circle': true,
+                'white': isColorVeryLight,
+            }, style: {
+                backgroundColor: resolvedColor,
+                width: `${this.size}px`,
+                height: `${this.size}px`,
+                borderRadius: '50%',
+                position: 'absolute',
+                top: '0',
+                left: '0',
+                display: 'inline-block',
+            } }))));
+    }
+    static get is() { return "kritzel-color"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-color.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-color.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | ThemeAwareColor",
+                    "resolved": "ThemeAwareColor | string",
+                    "references": {
+                        "ThemeAwareColor": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::ThemeAwareColor",
+                            "referenceLocation": "ThemeAwareColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ThemeName",
+                    "resolved": "\"dark\" | \"light\" | string & {}",
+                    "references": {
+                        "ThemeName": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::ThemeName",
+                            "referenceLocation": "ThemeName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "24"
+            }
+        };
+    }
+}

package/dist/collection/components/kritzel-color-palette/kritzel-color-palette.css

@@ -0,0 +1,46 @@
+:host {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.color-grid {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(6, 32px);
+  gap: 8px;
+  justify-items: center;
+  overflow: hidden;
+  height: 40px;
+  transition: height 0.1s ease-in-out;
+}
+
+.color-grid.expanded {
+  height: 500px;
+}
+
+.color-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;
+}
+
+.color-container:hover {
+  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);
+}
+
+.color-container.selected {
+  border-color: var(--kritzel-selection-border-color, #007AFF);
+  background-color: var(--kritzel-color-palette-selected-background-color);
+}
+
+

package/dist/collection/components/kritzel-color-palette/kritzel-color-palette.js

@@ -0,0 +1,225 @@
+import { Host, h } from "@stencil/core";
+import { KritzelColorHelper } from "@kritzel/engine";
+export class KritzelColorPalette {
+    colors = [];
+    selectedColor = null;
+    isExpanded = false;
+    isOpaque = false;
+    opacity = 1;
+    theme;
+    colorChange;
+    handleColorClick(color) {
+        this.selectedColor = color;
+        this.colorChange.emit(color);
+    }
+    handleKeyDown(event, color) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.handleColorClick(color);
+        }
+    }
+    calculateHeight() {
+        const colorsPerRow = 6;
+        const rowHeight = 32;
+        const gap = 8;
+        const rowCount = Math.ceil(this.colors.length / colorsPerRow);
+        return `${rowCount * rowHeight + (rowCount - 1) * gap}px`;
+    }
+    areColorsEqual(color1, color2) {
+        if (!color1)
+            return false;
+        return color1.light === color2.light && color1.dark === color2.dark;
+    }
+    render() {
+        const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
+        const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
+        return (h(Host, { key: '4d04acd9a67ac1c302bd0ded5fdfe431d0cacf26' }, h("div", { key: 'bb873b67d0e4f05353af87e1518df9525d20a28b', class: {
+                'color-grid': true,
+                'expanded': this.isExpanded,
+            }, style: {
+                height: expandedHeight,
+            } }, displayedColors.map(color => {
+            return (h("div", { tabIndex: 0, class: {
+                    'color-container': true,
+                    'selected': this.areColorsEqual(this.selectedColor, color),
+                }, onClick: () => this.handleColorClick(color), onKeyDown: event => this.handleKeyDown(event, color) }, h("kritzel-color", { value: KritzelColorHelper.applyOpacity(color, this.opacity, this.theme), theme: this.theme })));
+        }))));
+    }
+    static get is() { return "kritzel-color-palette"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-color-palette.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-color-palette.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "colors": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ThemeAwareColor[]",
+                    "resolved": "ThemeAwareColor[]",
+                    "references": {
+                        "ThemeAwareColor": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::ThemeAwareColor",
+                            "referenceLocation": "ThemeAwareColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "selectedColor": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "ThemeAwareColor | null",
+                    "resolved": "ThemeAwareColor",
+                    "references": {
+                        "ThemeAwareColor": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::ThemeAwareColor",
+                            "referenceLocation": "ThemeAwareColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "isExpanded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-expanded",
+                "defaultValue": "false"
+            },
+            "isOpaque": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-opaque",
+                "defaultValue": "false"
+            },
+            "opacity": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "opacity",
+                "defaultValue": "1"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ThemeName",
+                    "resolved": "\"dark\" | \"light\" | string & {}",
+                    "references": {
+                        "ThemeName": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::ThemeName",
+                            "referenceLocation": "ThemeName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "colorChange",
+                "name": "colorChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ThemeAwareColor",
+                    "resolved": "ThemeAwareColor",
+                    "references": {
+                        "ThemeAwareColor": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::ThemeAwareColor",
+                            "referenceLocation": "ThemeAwareColor"
+                        }
+                    }
+                }
+            }];
+    }
+}

package/dist/collection/components/kritzel-context-menu/kritzel-context-menu.css

@@ -0,0 +1,112 @@
+:host {
+  display: block; 
+}
+
+.menu-container {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--kritzel-context-menu-item-spacing, 2px);
+  background-color: var(--kritzel-context-menu-background-color, #ffffff);
+  border-radius: var(--kritzel-context-menu-border-radius, 12px);
+  box-shadow: var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));
+  border: var(--kritzel-context-menu-border, 1px solid #ebebeb);
+  padding: var(--kritzel-context-menu-padding, 4px);
+  min-width: var(--kritzel-context-menu-min-width, 140px);
+}
+
+.menu-item-wrapper {
+  position: relative;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--kritzel-context-menu-item-gap, 8px);
+  background: none;
+  border: none;
+  text-align: left;
+  padding: var(--kritzel-context-menu-item-padding, 8px);
+  border-radius: var(--kritzel-context-menu-item-border-radius, 12px);
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  font-size: var(--kritzel-context-menu-item-font-size, 14px);
+  color: var(--kritzel-context-menu-item-color, #333333);
+  white-space: nowrap;
+  -webkit-tap-highlight-color: transparent;
+  width: 100%;
+  min-width: 0;
+}
+
+.menu-item:not(.disabled):hover,
+.menu-item.submenu-open {
+  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));
+}
+
+.menu-item:not(.disabled):active {
+  background-color: var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%));
+}
+
+.menu-item.disabled {
+  color: var(--kritzel-context-menu-item-disabled-color, #aaaaaa);
+}
+
+.menu-item.has-children.disabled {
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  color: var(--kritzel-context-menu-item-color, #333333);
+}
+
+.menu-item kritzel-icon {
+  opacity: 0.8;
+  flex-shrink: 0;
+}
+
+.menu-item.disabled kritzel-icon {
+  opacity: 0.4;
+}
+
+.menu-item.has-children.disabled kritzel-icon {
+  opacity: 0.8;
+}
+
+.label {
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.submenu-arrow {
+  margin-left: auto;
+  opacity: 0.5;
+}
+
+.menu-divider {
+  height: 1px;
+  background-color: var(--kritzel-context-menu-divider-color, rgba(0, 0, 0, 0.1));
+  margin: var(--kritzel-context-menu-divider-margin, 4px 8px);
+}
+
+.submenu-container {
+  position: absolute;
+  top: 0;
+  left: 100%;
+  z-index: 2;
+  margin-left: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--kritzel-context-menu-item-spacing, 2px);
+  background-color: var(--kritzel-context-menu-background-color, #ffffff);
+  border-radius: var(--kritzel-context-menu-border-radius, 12px);
+  box-shadow: var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));
+  border: var(--kritzel-context-menu-border, 1px solid #ebebeb);
+  padding: var(--kritzel-context-menu-padding, 4px);
+  min-width: 120px;
+}
+
+.submenu-container.position-left {
+  left: auto;
+  right: 100%;
+  margin-left: 0;
+  margin-right: 4px;
+}