@kritzel/editor 0.4.31

package/dist/collection/components/kritzel-numeric-input/kritzel-numeric-input.css

@@ -0,0 +1,102 @@
+:host {
+  display: block;
+}
+
+.input-container {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.input-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--kritzel-numeric-input-label-color, #333333);
+}
+
+.input-wrapper {
+  display: flex;
+  position: relative;
+}
+
+.numeric-input {
+  flex: 1;
+  padding: 8px 36px 8px 12px;
+  border: 1px solid var(--kritzel-numeric-input-border-color, #ebebeb);
+  border-radius: var(--kritzel-numeric-input-border-radius, 6px);
+  font-size: 14px;
+  color: var(--kritzel-numeric-input-text-color, #333333);
+  background-color: var(--kritzel-numeric-input-input-background, #ffffff);
+  outline: none;
+  transition: border-color 150ms ease;
+  box-sizing: border-box;
+}
+
+/* Hide native spin buttons */
+.numeric-input::-webkit-outer-spin-button,
+.numeric-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.numeric-input[type='number'] {
+  -moz-appearance: textfield;
+}
+
+.numeric-input::selection {
+  background-color: var(--kritzel-numeric-input-selection-background, #007AFF);
+  color: var(--kritzel-numeric-input-selection-color, #ffffff);
+}
+
+.numeric-input:hover {
+  border-color: var(--kritzel-numeric-input-hover-border-color, #cccccc);
+}
+
+.numeric-input:focus {
+  border-color: var(--kritzel-numeric-input-focus-border-color, #0066ff);
+  border-width: 2px;
+  padding: 7px 35px 7px 11px;
+}
+
+.spinner-buttons {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 1px;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid var(--kritzel-numeric-input-border-color, #ebebeb);
+  border-radius: 0 var(--kritzel-numeric-input-spinner-border-radius, 5px) var(--kritzel-numeric-input-spinner-border-radius, 5px) 0;
+  overflow: hidden;
+}
+
+.spinner-button {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  padding: 0;
+  border: none;
+  background-color: var(--kritzel-numeric-input-spinner-background, #f5f5f5);
+  color: var(--kritzel-numeric-input-spinner-color, #666666);
+  cursor: pointer;
+  transition: background-color 150ms ease;
+}
+
+.spinner-button:hover {
+  background-color: var(--kritzel-numeric-input-spinner-hover-background, #ebebeb);
+}
+
+.spinner-button:active {
+  background-color: var(--kritzel-numeric-input-spinner-active-background, #dddddd);
+}
+
+.spinner-up {
+  border-bottom: 1px solid var(--kritzel-numeric-input-border-color, #ebebeb);
+}
+
+.spinner-icon {
+  width: 10px;
+  height: 6px;
+}

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

@@ -0,0 +1,255 @@
+import { Host, h } from "@stencil/core";
+export class KritzelNumericInput {
+    /** Current numeric value (undefined when cleared) */
+    value;
+    /** Minimum allowed value */
+    min = Number.MIN_SAFE_INTEGER;
+    /** Maximum allowed value */
+    max = Number.MAX_SAFE_INTEGER;
+    /** Step increment for the input */
+    step = 1;
+    /** Label text displayed above the input */
+    label = '';
+    /** Placeholder text shown when input is empty */
+    placeholder = '';
+    /** Emitted when the value changes (after normalization) */
+    valueChange;
+    inputValue = '';
+    onValueChange(newValue) {
+        this.inputValue = this.shouldShowEmpty(newValue) ? '' : String(newValue);
+    }
+    componentWillLoad() {
+        this.inputValue = this.shouldShowEmpty(this.value) ? '' : String(this.value);
+    }
+    shouldShowEmpty(value) {
+        return value === undefined || value === Infinity || value === -Infinity;
+    }
+    normalizeValue(raw) {
+        if (isNaN(raw)) {
+            return this.value ?? 0;
+        }
+        return Math.min(this.max, Math.max(this.min, raw));
+    }
+    getDecimalPlaces() {
+        const stepStr = String(this.step);
+        const decimalIndex = stepStr.indexOf('.');
+        return decimalIndex === -1 ? 0 : stepStr.length - decimalIndex - 1;
+    }
+    roundToStep(value) {
+        const decimals = this.getDecimalPlaces();
+        const factor = Math.pow(10, decimals);
+        return Math.round(value * factor) / factor;
+    }
+    handleInput = (event) => {
+        const input = event.target;
+        this.inputValue = input.value;
+    };
+    handleBlur = () => {
+        this.commitValue();
+    };
+    handleKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            this.commitValue();
+        }
+    };
+    handleInvalid = (event) => {
+        event.preventDefault();
+    };
+    commitValue() {
+        if (this.inputValue.trim() === '') {
+            this.value = undefined;
+            this.valueChange.emit(undefined);
+            return;
+        }
+        const parsed = parseFloat(this.inputValue);
+        const normalized = this.normalizeValue(parsed);
+        this.value = normalized;
+        this.inputValue = String(normalized);
+        this.valueChange.emit(normalized);
+    }
+    handleIncrement = () => {
+        // Commit current input first if needed
+        const currentInput = parseFloat(this.inputValue);
+        const currentValue = !isNaN(currentInput) ? currentInput : (this.value ?? 0);
+        const newValue = this.normalizeValue(this.roundToStep(currentValue + this.step));
+        this.value = newValue;
+        this.inputValue = String(newValue);
+        this.valueChange.emit(newValue);
+    };
+    handleDecrement = () => {
+        // Commit current input first if needed
+        const currentInput = parseFloat(this.inputValue);
+        const currentValue = !isNaN(currentInput) ? currentInput : (this.value ?? 0);
+        const newValue = this.normalizeValue(this.roundToStep(currentValue - this.step));
+        this.value = newValue;
+        this.inputValue = String(newValue);
+        this.valueChange.emit(newValue);
+    };
+    render() {
+        return (h(Host, { key: '273ca34d6be0e76cfd742495cd75172c5112533a' }, h("div", { key: '2ef4be625b4f97c1a65f4e114a161ae092248479', class: "input-container" }, this.label && h("label", { key: '4f3866b2c33327100f6b49e7b12c10ab91601bf3', class: "input-label" }, this.label), h("div", { key: 'cc1608e9638d3ea5434096720731073e8e436e53', class: "input-wrapper" }, h("input", { key: 'f872d2fb83f1ecfc2bbb9edeae97b8a0deccca66', type: "number", class: "numeric-input", title: "", min: this.min === Number.MIN_SAFE_INTEGER ? undefined : this.min, max: this.max === Number.MAX_SAFE_INTEGER ? undefined : this.max, step: this.step, value: this.inputValue, placeholder: this.placeholder, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onInvalid: this.handleInvalid }), h("div", { key: '0893a104eb1b68138de0d77cfe6e644e7fff75d2', class: "spinner-buttons" }, h("button", { key: 'c39596aac8affea11a880835c63975e8cdae6599', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, h("svg", { key: '6cfad1fab40cd65ba54ee5d80d9b08af5676878c', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: '50ca542fa773658823a9bc09ec3226bba02cfac7', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '5c62a5a71555474e94e73b9123023f6cf0f70c81', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, h("svg", { key: '72b12df906ebf5e2d07ec387faeb11567dbca76b', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: 'a85205a5f31392e1db4bc893fad336f5b9775530', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+    }
+    static get is() { return "kritzel-numeric-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-numeric-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-numeric-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Current numeric value (undefined when cleared)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum allowed value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min",
+                "defaultValue": "Number.MIN_SAFE_INTEGER"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum allowed value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "Number.MAX_SAFE_INTEGER"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Step increment for the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step",
+                "defaultValue": "1"
+            },
+            "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": "''"
+            }
+        };
+    }
+    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 (after normalization)"
+                },
+                "complexType": {
+                    "original": "number | undefined",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }];
+    }
+}

package/dist/collection/components/kritzel-opacity-slider/kritzel-opacity-slider.css

@@ -0,0 +1,85 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.opacity-container {
+  display: flex;
+  align-items: center;
+  width: 232px;
+}
+
+.slider-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.opacity-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 6px;
+  border-radius: 3px;
+  background: linear-gradient(
+    to right,
+    var(--kritzel-opacity-slider-active-color, #007AFF) 0%,
+    var(--kritzel-opacity-slider-active-color, #007AFF) var(--slider-progress, 100%),
+    var(--kritzel-opacity-slider-track-color, #e0e0e0) var(--slider-progress, 100%),
+    var(--kritzel-opacity-slider-track-color, #e0e0e0) 100%
+  );
+  outline: none;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+}
+
+.opacity-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--kritzel-opacity-slider-thumb-color, #ffffff);
+  border: 2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  transition: transform 0.1s ease;
+}
+
+.opacity-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.1);
+}
+
+.opacity-slider::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--kritzel-opacity-slider-thumb-color, #ffffff);
+  border: 2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  transition: transform 0.1s ease;
+}
+
+.opacity-slider::-moz-range-thumb:hover {
+  transform: scale(1.1);
+}
+
+.opacity-slider::-moz-range-track {
+  height: 6px;
+  border-radius: 3px;
+  background: transparent;
+}
+
+.opacity-slider:focus {
+  outline: none;
+}
+
+.opacity-slider:focus::-webkit-slider-thumb {
+  box-shadow: 0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3));
+}
+
+.opacity-slider:focus::-moz-range-thumb {
+  box-shadow: 0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3));
+}

package/dist/collection/components/kritzel-opacity-slider/kritzel-opacity-slider.js

@@ -0,0 +1,164 @@
+import { Host, h } from "@stencil/core";
+export class KritzelOpacitySlider {
+    /** Current opacity value (0 to 1) */
+    value = 1;
+    /** Minimum opacity value */
+    min = 0;
+    /** Maximum opacity value */
+    max = 1;
+    /** Step increment */
+    step = 0.01;
+    /** Color to display in the preview (optional) */
+    previewColor = '#000000';
+    valueChange;
+    handleInput(event) {
+        const input = event.target;
+        const newValue = parseFloat(input.value);
+        this.value = newValue;
+        this.valueChange.emit(newValue);
+    }
+    getPercentage() {
+        return Math.round(this.value * 100);
+    }
+    render() {
+        const percentage = this.getPercentage();
+        return (h(Host, { key: '6de0826f246bd01ec2230aac0820439059ad73c9' }, h("div", { key: 'f1f00e8e6162a8731ddeb5a857475d189ba803b1', class: "opacity-container" }, h("div", { key: '964d210f3509480756fc20795a00bda5fcfa0fb7', class: "slider-wrapper" }, h("input", { key: '40123306802ac13259e1ccd98f04739ecafbb3b4', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
+                '--slider-progress': `${percentage}%`,
+                '--kritzel-opacity-slider-thumb-border-color': this.previewColor,
+            } })))));
+    }
+    static get is() { return "kritzel-opacity-slider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-opacity-slider.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-opacity-slider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current opacity value (0 to 1)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "1"
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum opacity value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min",
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum opacity value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "1"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Step increment"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step",
+                "defaultValue": "0.01"
+            },
+            "previewColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color to display in the preview (optional)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "preview-color",
+                "defaultValue": "'#000000'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/kritzel-pill-tabs/kritzel-pill-tabs.css

@@ -0,0 +1,68 @@
+:host {
+  display: block;
+  max-width: 100%;
+}
+
+.pill-tabs-container {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px;
+  max-width: 100%;
+  border-radius: var(--kritzel-pill-tabs-border-radius, 10px);
+  background: var(--kritzel-pill-tabs-background, #f0f0f0);
+  box-sizing: border-box;
+}
+
+.pill-tab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-width: 0;
+  max-width: 100%;
+  padding: 8px 16px;
+  border: none;
+  border-radius: var(--kritzel-pill-tabs-tab-border-radius, 8px);
+  background: var(--kritzel-pill-tabs-tab-background, transparent);
+  color: var(--kritzel-pill-tabs-tab-text-color, #666666);
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
+  white-space: nowrap;
+}
+
+.pill-tab:hover:not(.selected) {
+  background: var(--kritzel-pill-tabs-tab-background-hover, rgba(0, 0, 0, 0.05));
+}
+
+.pill-tab.selected {
+  background: var(--kritzel-pill-tabs-tab-background-selected, #ffffff);
+  color: var(--kritzel-pill-tabs-tab-text-color-selected, #000000);
+  box-shadow: var(--kritzel-pill-tabs-tab-shadow-selected, 0 1px 3px rgba(0, 0, 0, 0.1));
+}
+
+.pill-tab:focus {
+  outline: none;
+}
+
+.pill-tab:focus-visible {
+  box-shadow: 0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3));
+}
+
+.pill-tab-label {
+  display: block;
+  min-width: 0;
+  max-width: var(--kritzel-pill-tabs-tab-label-max-width, 10rem);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1;
+}
+
+/* Icon styling */
+.pill-tab kritzel-icon {
+  flex-shrink: 0;
+}