@kritzel/editor 0.4.31

package/dist/components/p-DOJCDPVD.js

@@ -0,0 +1,55 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+
+const kritzelButtonCss = () => `:host{display:inline-block;font-family:sans-serif}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:var(--kritzel-global-pointer-cursor, pointer);display:inline-flex;width:var(--kritzel-button-width, auto);align-items:center;justify-content:center;gap:6px;border-radius:var(--kritzel-button-border-radius, 8px);padding:var(--kritzel-button-padding, 12px 20px);font-size:var(--kritzel-button-font-size, 14px);font-weight:var(--kritzel-button-font-weight, 500);transition:background-color 0.15s ease, opacity 0.15s ease;-webkit-tap-highlight-color:transparent}button.primary{background-color:var(--kritzel-button-primary-background-color, #007AFF);color:var(--kritzel-button-primary-color, #ffffff)}button.primary:hover{background-color:var(--kritzel-button-primary-hover-background-color, #006ae6)}button.primary:active{background-color:var(--kritzel-button-primary-active-background-color, #005bbf)}button.secondary{background-color:var(--kritzel-button-secondary-background-color, #f0f0f0);color:var(--kritzel-button-secondary-color, #333333)}button.secondary:hover{background-color:var(--kritzel-button-secondary-hover-background-color, #e0e0e0)}button.secondary:active{background-color:var(--kritzel-button-secondary-active-background-color, #d0d0d0)}button.text{background-color:transparent;color:var(--kritzel-button-text-color, #007AFF)}button.text:hover{background-color:var(--kritzel-button-text-hover-background-color, rgba(0, 122, 255, 0.08))}button.text:active{background-color:var(--kritzel-button-text-active-background-color, rgba(0, 122, 255, 0.15))}button.disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}`;
+
+const KritzelButton = /*@__PURE__*/ proxyCustomElement(class KritzelButton extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.buttonClick = createEvent(this, "buttonClick");
+    }
+    /** The visual variant of the button */
+    variant = 'primary';
+    /** Whether the button is disabled */
+    disabled = false;
+    /** The type attribute for the native button element */
+    type = 'button';
+    /** Emitted when the button is clicked */
+    buttonClick;
+    handleClick = (event) => {
+        if (this.disabled)
+            return;
+        event.stopPropagation();
+        this.buttonClick.emit();
+    };
+    render() {
+        return (h(Host, { key: '539da53bb3f720cc3a1cf9cfed515b38e88e933b' }, h("button", { key: 'da8c3cfab366087e935bff483e2a909e915b24b2', type: this.type, class: {
+                'kritzel-button': true,
+                [this.variant]: true,
+                'disabled': this.disabled,
+            }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: 'abb8e3b2a2b677530db9a354c4f1788b6baaaca0' }))));
+    }
+    static get style() { return kritzelButtonCss(); }
+}, [769, "kritzel-button", {
+        "variant": [1],
+        "disabled": [4],
+        "type": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-button":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelButton);
+            }
+            break;
+    } });
+}
+
+export { KritzelButton as K, defineCustomElement as d };

package/dist/components/p-DVv8ChhE.js

@@ -0,0 +1,91 @@
+import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+import { KritzelColorHelper } from '@kritzel/engine';
+
+const kritzelColorCss = () => `: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)}`;
+
+const KritzelColorComponent = /*@__PURE__*/ proxyCustomElement(class KritzelColorComponent extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    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 style() { return kritzelColorCss(); }
+}, [513, "kritzel-color", {
+        "value": [1],
+        "theme": [1],
+        "size": [2]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-color"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-color":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelColorComponent);
+            }
+            break;
+    } });
+}
+
+export { KritzelColorComponent as K, defineCustomElement as d };

package/dist/components/p-DXZBWJBt.js

@@ -0,0 +1,70 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+import { d as defineCustomElement$1 } from './p-BGmTmdLe.js';
+
+const kritzelZoomPanelCss = () => `:host{display:block;z-index:1}.panel{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-zoom-panel-gap, 4px);padding:var(--kritzel-zoom-panel-padding, 4px);border:var(--kritzel-zoom-panel-border, 1px solid #ebebeb);border-radius:var(--kritzel-zoom-panel-border-radius, 12px);background-color:var(--kritzel-zoom-panel-background-color, #ffffff);box-shadow:var(--kritzel-zoom-panel-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));opacity:0;pointer-events:none;transition:opacity 0.2s ease-out}.panel.visible{opacity:1;pointer-events:auto}.zoom-level{display:inline-flex;align-items:center;justify-content:center;min-width:46px;color:var(--kritzel-zoom-panel-icon-color, #000000);font-family:var(--kritzel-font-family, sans-serif);font-size:12px;font-weight:500;line-height:1;padding:0 4px;user-select:none}.zoom-button{display:flex;align-items:center;justify-content:center;width:var(--kritzel-zoom-panel-button-size, 32px);height:var(--kritzel-zoom-panel-button-size, 32px);padding:0;border:0;border-radius:var(--kritzel-zoom-panel-button-border-radius, 8px);background:transparent;background-color:transparent;color:var(--kritzel-zoom-panel-icon-color, #000000);--kritzel-icon-color:var(--kritzel-zoom-panel-icon-color, #000000);box-shadow:none;appearance:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent}.zoom-button:hover,.zoom-button:focus-visible{background-color:var(--kritzel-zoom-panel-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.zoom-button:active{background-color:var(--kritzel-zoom-panel-button-active-background-color, hsl(0, 0%, 0%, 8.6%))}.zoom-button:disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}`;
+
+const KritzelZoomPanel = /*@__PURE__*/ proxyCustomElement(class KritzelZoomPanel extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.zoomIn = createEvent(this, "zoomIn");
+        this.zoomOut = createEvent(this, "zoomOut");
+    }
+    /** Whether the zoom panel is visible. */
+    visible = true;
+    /** Whether both zoom buttons are disabled. */
+    disabled = false;
+    /** Current zoom level in percent. */
+    zoomPercent = 100;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
+    /** Emitted when the zoom-in button is clicked. */
+    zoomIn;
+    /** Emitted when the zoom-out button is clicked. */
+    zoomOut;
+    handleZoomIn = () => {
+        if (!this.disabled) {
+            this.zoomIn.emit();
+        }
+    };
+    handleZoomOut = () => {
+        if (!this.disabled) {
+            this.zoomOut.emit();
+        }
+    };
+    get normalizedZoomPercent() {
+        return Number.isFinite(this.zoomPercent) ? Math.max(1, Math.round(this.zoomPercent)) : 100;
+    }
+    render() {
+        return (h(Host, { key: 'aa8e01ab1b510f98b2b53a6ff882fe278969d1b3' }, h("div", { key: 'b652d46eac7add121c64baee132d4d162f4ec657', class: { panel: true, visible: this.visible } }, h("button", { key: '8fe1d17dba12490a6033889b4448b3f330815cdc', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomOut'] ?? 'Zoom out', disabled: this.disabled, onClick: this.handleZoomOut }, h("kritzel-icon", { key: '919c0ca7c58a79fd792cdf504a7565df29043211', name: "minus" })), h("span", { key: '0acb683ebf5f2ea6a66065783ebf10715c588567', class: "zoom-level", "aria-live": "polite" }, this.normalizedZoomPercent, "%"), h("button", { key: 'e0209ca2d8af30c56833b28c394373f83da1fcf8', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomIn'] ?? 'Zoom in', disabled: this.disabled, onClick: this.handleZoomIn }, h("kritzel-icon", { key: '13907bcae5712d23165aa22bfe229f2893b4f74f', name: "plus" })))));
+    }
+    static get style() { return kritzelZoomPanelCss(); }
+}, [513, "kritzel-zoom-panel", {
+        "visible": [4],
+        "disabled": [4],
+        "zoomPercent": [2, "zoom-percent"],
+        "terms": [16]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-zoom-panel", "kritzel-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-zoom-panel":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelZoomPanel);
+            }
+            break;
+        case "kritzel-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelZoomPanel as K, defineCustomElement as d };

package/dist/components/p-DXuf225S.js

@@ -0,0 +1,53 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+import { d as defineCustomElement$1 } from './p-DVv8ChhE.js';
+
+const kritzelStrokeSizeCss = () => `: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)}`;
+
+const KritzelStrokeSize = /*@__PURE__*/ proxyCustomElement(class KritzelStrokeSize extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.sizeChange = createEvent(this, "sizeChange");
+    }
+    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 style() { return kritzelStrokeSizeCss(); }
+}, [513, "kritzel-stroke-size", {
+        "sizes": [16],
+        "selectedSize": [1026, "selected-size"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-stroke-size", "kritzel-color"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-stroke-size":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelStrokeSize);
+            }
+            break;
+        case "kritzel-color":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelStrokeSize as K, defineCustomElement as d };