@kritzel/editor 0.4.31

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

@@ -0,0 +1,117 @@
+import { Host, h } from "@stencil/core";
+export class KritzelFontSize {
+    sizes = [8, 10, 12, 16, 20, 24];
+    selectedSize = null;
+    fontFamily = 'Arial';
+    sizeChange;
+    handleSizeClick(size) {
+        this.selectedSize = size;
+        this.sizeChange.emit(size);
+    }
+    handleKeyDown(event, size) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.handleSizeClick(size);
+        }
+    }
+    render() {
+        const color = 'var(--kritzel-global-text-primary)';
+        const sizes = this.sizes ?? [];
+        return (h(Host, { key: 'c9c651548fe820f1703e8d560bde2ed0be368fab' }, sizes.map(size => (h("div", { tabIndex: 0, class: {
+                'size-container': true,
+                'selected': this.selectedSize === size,
+            }, onClick: () => this.handleSizeClick(size), onKeyDown: event => this.handleKeyDown(event, size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size, color: color }))))));
+    }
+    static get is() { return "kritzel-font-size"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-font-size.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-font-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": "[8, 10, 12, 16, 20, 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"
+            },
+            "fontFamily": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "font-family",
+                "defaultValue": "'Arial'"
+            }
+        };
+    }
+    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-input/kritzel-input.css

@@ -0,0 +1,69 @@
+:host {
+  display: block;
+}
+
+.input-container {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.input-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--kritzel-text-input-label-color, #333333);
+}
+
+.input-wrapper {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--kritzel-text-input-border-color, #ebebeb);
+  border-radius: var(--kritzel-text-input-border-radius, 6px);
+  overflow: hidden;
+  background: var(--kritzel-text-input-background, #ffffff);
+  transition: border-color 150ms ease;
+}
+
+.input-wrapper:hover:not(:focus-within) {
+  border-color: var(--kritzel-text-input-hover-border-color, #cccccc);
+}
+
+.input-wrapper:focus-within {
+  border-color: var(--kritzel-text-input-focus-border-color, #007AFF);
+  border-width: 2px;
+}
+
+.text-input {
+  flex: 1;
+  padding: 10px 12px;
+  border: none;
+  outline: none;
+  font-size: 14px;
+  font-family: inherit;
+  background: transparent;
+  color: var(--kritzel-text-input-text-color, #333333);
+  box-sizing: border-box;
+}
+
+.text-input::placeholder {
+  color: var(--kritzel-text-input-placeholder-color, #999999);
+}
+
+.text-input::selection {
+  background-color: var(--kritzel-text-input-selection-background, #007AFF);
+  color: var(--kritzel-text-input-selection-color, #ffffff);
+}
+
+.text-input:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.input-suffix {
+  padding: 10px 12px;
+  background: var(--kritzel-text-input-suffix-background, #f5f5f5);
+  color: var(--kritzel-text-input-suffix-color, #666666);
+  font-size: 14px;
+  border-left: 1px solid var(--kritzel-text-input-border-color, #ebebeb);
+  flex-shrink: 0;
+}

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

@@ -0,0 +1,198 @@
+import { Host, h } from "@stencil/core";
+export class KritzelInput {
+    /** Current text value */
+    value = '';
+    /** Label text displayed above the input */
+    label = '';
+    /** Placeholder text shown when input is empty */
+    placeholder = '';
+    /** Suffix text displayed after the input (e.g., file extension) */
+    suffix = '';
+    /** Input type */
+    type = 'text';
+    /** Whether the input is disabled */
+    disabled = false;
+    /** Emitted when the value changes */
+    valueChange;
+    inputValue = '';
+    onValueChange(newValue) {
+        this.inputValue = newValue ?? '';
+    }
+    componentWillLoad() {
+        this.inputValue = this.value ?? '';
+    }
+    handleInput = (event) => {
+        const input = event.target;
+        this.inputValue = input.value;
+        this.value = input.value;
+        this.valueChange.emit(input.value);
+    };
+    render() {
+        return (h(Host, { key: '27ea9df44ddfe332bfda4f8b70308ffbfbf3e63c' }, h("div", { key: '8970766380273b32d0c8ffc32310e95d34b5ed35', class: "input-container" }, this.label && h("label", { key: '7b05115cd7eac552d8b420a10c0039b48b100f55', class: "input-label" }, this.label), h("div", { key: '5c764a97dada35dd74cce61a43dd39edcca07c5d', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, h("input", { key: '4613cba3f6ba722c641c9f2d355fe4b9c9f795f2', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && h("span", { key: '3b4942c5cd0298d97b0c3e8e86c82297f1134718', class: "input-suffix" }, this.suffix)))));
+    }
+    static get is() { return "kritzel-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current text value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text displayed above the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text shown when input is empty"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "''"
+            },
+            "suffix": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Suffix text displayed after the input (e.g., file extension)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "suffix",
+                "defaultValue": "''"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'text' | 'email' | 'password' | 'url'",
+                    "resolved": "\"email\" | \"password\" | \"text\" | \"url\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input type"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'text'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "inputValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value changes"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }];
+    }
+}

package/dist/collection/components/kritzel-line-endings/kritzel-line-endings.css

@@ -0,0 +1,60 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.endings-section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.section-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--kritzel-line-endings-label-color, #666666);
+  padding-left: 4px;
+}
+
+.endings-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.ending-option {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 48px;
+  height: 32px;
+  border-radius: 6px;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  border: 2px solid transparent;
+  box-sizing: border-box;
+  background: var(--kritzel-line-endings-option-background, #ffffff);
+  padding: 4px;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+
+.ending-option:hover {
+  background-color: var(--kritzel-line-endings-hover-background-color, #ebebeb);
+}
+
+.ending-option.selected {
+  border-color: var(--kritzel-selection-border-color, #007AFF);
+  background-color: var(--kritzel-line-endings-selected-background-color, #ebebeb);
+}
+
+.ending-option:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3));
+}
+
+.ending-icon {
+  width: 100%;
+  height: 100%;
+}

package/dist/collection/components/kritzel-line-endings/kritzel-line-endings.js

@@ -0,0 +1,165 @@
+import { Host, h } from "@stencil/core";
+export class KritzelLineEndings {
+    /** Available ending styles */
+    styles = ['none', 'triangle'];
+    /** Current line arrow configuration */
+    value;
+    valueChange;
+    getStartEnding() {
+        if (!this.value?.start?.enabled)
+            return 'none';
+        return this.value.start.style ?? 'triangle';
+    }
+    getEndEnding() {
+        if (!this.value?.end?.enabled)
+            return 'none';
+        return this.value.end.style ?? 'triangle';
+    }
+    handleStartChange(type) {
+        const newValue = {
+            ...this.value,
+            start: type === 'none'
+                ? { enabled: false }
+                : { enabled: true, style: type },
+        };
+        this.value = newValue;
+        this.valueChange.emit(newValue);
+    }
+    handleEndChange(type) {
+        const newValue = {
+            ...this.value,
+            end: type === 'none'
+                ? { enabled: false }
+                : { enabled: true, style: type },
+        };
+        this.value = newValue;
+        this.valueChange.emit(newValue);
+    }
+    getEndingPath(type) {
+        switch (type) {
+            case 'triangle':
+                return 'M 0 0 L 10 5 L 0 10 Z';
+            case 'open':
+                return 'M 0 0 L 10 5 L 0 10';
+            case 'diamond':
+                return 'M 0 5 L 5 0 L 10 5 L 5 10 Z';
+            case 'circle':
+                return 'M 10 5 A 5 5 0 1 1 0 5 A 5 5 0 1 1 10 5 Z';
+            default:
+                return '';
+        }
+    }
+    renderEndingIcon(type, isStart) {
+        const color = 'var(--kritzel-global-text-primary)';
+        if (type === 'none') {
+            return (h("svg", { viewBox: "0 0 24 12", class: "ending-icon" }, h("line", { x1: isStart ? 4 : 2, y1: "6", x2: isStart ? 22 : 20, y2: "6", stroke: color, "stroke-width": "2", "stroke-linecap": "round" })));
+        }
+        const path = this.getEndingPath(type);
+        const isOpenStyle = type === 'open';
+        return (h("svg", { viewBox: "0 0 24 12", class: "ending-icon" }, isStart ? (
+        // Start arrow points left
+        h("g", null, h("line", { x1: "12", y1: "6", x2: "22", y2: "6", stroke: color, "stroke-width": "2", "stroke-linecap": "round" }), h("g", { transform: "translate(2, 1) scale(1, 1)" }, h("path", { d: path, fill: isOpenStyle ? 'none' : color, stroke: color, "stroke-width": isOpenStyle ? 2 : 0, "stroke-linecap": "round", "stroke-linejoin": "round", transform: "scale(-1, 1) translate(-10, 0)" })))) : (
+        // End arrow points right
+        h("g", null, h("line", { x1: "2", y1: "6", x2: "12", y2: "6", stroke: color, "stroke-width": "2", "stroke-linecap": "round" }), h("g", { transform: "translate(12, 1)" }, h("path", { d: path, fill: isOpenStyle ? 'none' : color, stroke: color, "stroke-width": isOpenStyle ? 2 : 0, "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
+    }
+    render() {
+        const startEnding = this.getStartEnding();
+        const endEnding = this.getEndEnding();
+        return (h(Host, { key: '580845b2a1bea69bb5c7854ccd1dbb09056f959c' }, h("div", { key: '7cf27d1e567f5c5320b6a78e06acf59b59a05a9c', class: "endings-section" }, h("div", { key: '0b3ef9a2fe9d4eecc7641bd197191143a7fd1fee', class: "endings-row" }, this.styles.map(type => (h("button", { class: {
+                'ending-option': true,
+                'selected': startEnding === type,
+            }, onClick: () => this.handleStartChange(type), title: type === 'none' ? 'No start arrow' : `${type} start arrow` }, this.renderEndingIcon(type, true)))))), h("div", { key: '536f00524bddb99c06407df4616f1a63a82d4fb9', class: "endings-section" }, h("div", { key: 'd1ac8f88a9bee0432def20e0182aeeacd739de83', class: "endings-row" }, this.styles.map(type => (h("button", { class: {
+                'ending-option': true,
+                'selected': endEnding === type,
+            }, onClick: () => this.handleEndChange(type), title: type === 'none' ? 'No end arrow' : `${type} end arrow` }, this.renderEndingIcon(type, false))))))));
+    }
+    static get is() { return "kritzel-line-endings"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-line-endings.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-line-endings.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "styles": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LineEndingType[]",
+                    "resolved": "LineEndingType[]",
+                    "references": {
+                        "LineEndingType": {
+                            "location": "local",
+                            "path": "C:/Projects/kritzel/libs/editor/core/src/components/kritzel-line-endings/kritzel-line-endings.tsx",
+                            "id": "src/components/kritzel-line-endings/kritzel-line-endings.tsx::LineEndingType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Available ending styles"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "['none', 'triangle']"
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "LineArrowConfig | undefined",
+                    "resolved": "LineArrowConfig",
+                    "references": {
+                        "LineArrowConfig": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::LineArrowConfig",
+                            "referenceLocation": "LineArrowConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current line arrow configuration"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "LineArrowConfig",
+                    "resolved": "LineArrowConfig",
+                    "references": {
+                        "LineArrowConfig": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::LineArrowConfig",
+                            "referenceLocation": "LineArrowConfig"
+                        }
+                    }
+                }
+            }];
+    }
+}

package/dist/collection/components/kritzel-loading-overlay/kritzel-loading-overlay.css

@@ -0,0 +1,54 @@
+:host {
+  position: absolute;
+  inset: 0;
+  z-index: var(--kritzel-editor-loading-overlay-z-index, 1);
+  display: block;
+  pointer-events: none;
+}
+
+.loading-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  background-color: var(--kritzel-editor-loading-overlay-background, rgba(255, 255, 255, 0.6));
+  color: var(--kritzel-editor-loading-overlay-color, #333);
+  font-family: var(--kritzel-font-family, sans-serif);
+  font-size: 1.25rem;
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
+  transition:
+    opacity 300ms ease,
+    visibility 0s linear 300ms;
+}
+
+.loading-overlay.visible {
+  opacity: 1;
+  pointer-events: all;
+  visibility: visible;
+  transition:
+    opacity 300ms ease,
+    visibility 0s linear 0s;
+}
+
+.loading-spinner {
+  width: 20px;
+  height: 20px;
+  box-sizing: border-box;
+  display: block;
+  flex-shrink: 0;
+  border: 2px solid var(--kritzel-editor-loading-overlay-spinner-color, #cccccc);
+  border-top-color: var(--kritzel-editor-loading-overlay-spinner-active-color, #333333);
+  border-radius: 50%;
+  animation: kritzel-loading-spin 0.6s linear infinite;
+}
+
+@keyframes kritzel-loading-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}