@kritzel/editor 0.4.31

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

@@ -0,0 +1,207 @@
+import { h, Host } from "@stencil/core";
+export class KritzelAvatar {
+    /** Full user object. If provided, individual props are ignored. */
+    user;
+    /** Direct prop: user's display name (used for initials fallback) */
+    name;
+    /** Avatar diameter in pixels */
+    size = 32;
+    /** Background color for initials fallback */
+    color;
+    /** Tracks whether the image failed to load */
+    imageError = false;
+    retryCount = 0;
+    maxRetries = 3;
+    retryTimer;
+    userChanged() {
+        this.resetImageState();
+    }
+    profileImageUrlChanged() {
+        this.resetImageState();
+    }
+    resetImageState() {
+        this.imageError = false;
+        this.retryCount = 0;
+        clearTimeout(this.retryTimer);
+    }
+    disconnectedCallback() {
+        clearTimeout(this.retryTimer);
+    }
+    getImageUrl() {
+        return this.user?.profileImageUrl;
+    }
+    getDisplayName() {
+        if (this.user) {
+            return (this.user.displayName ??
+                ([this.user.firstName, this.user.lastName].filter(Boolean).join(' ') ||
+                    this.user.email));
+        }
+        return this.name;
+    }
+    getInitials() {
+        const displayName = this.getDisplayName();
+        if (!displayName)
+            return undefined;
+        const parts = displayName.trim().split(/\s+/);
+        if (parts.length >= 2) {
+            return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+        }
+        return parts[0][0]?.toUpperCase();
+    }
+    getBackgroundColor() {
+        return this.user?.color ?? this.color ?? this.generateColorFromName();
+    }
+    generateColorFromName() {
+        const name = this.getDisplayName() || '';
+        let hash = 0;
+        for (let i = 0; i < name.length; i++) {
+            hash = name.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        const hue = Math.abs(hash % 360);
+        return `hsl(${hue}, 45%, 55%)`;
+    }
+    handleImageError = () => {
+        if (this.retryCount < this.maxRetries) {
+            this.retryCount++;
+            const delay = 1000 * Math.pow(2, this.retryCount - 1);
+            this.retryTimer = setTimeout(() => {
+                this.imageError = false;
+            }, delay);
+        }
+        this.imageError = true;
+    };
+    render() {
+        const imageUrl = this.getImageUrl();
+        const initials = this.getInitials();
+        const showImage = imageUrl && !this.imageError;
+        const showInitials = !showImage && initials;
+        const showDefaultIcon = !showImage && !showInitials;
+        const containerStyles = {
+            width: `${this.size}px`,
+            height: `${this.size}px`,
+            fontSize: `${Math.round(this.size * 0.4)}px`,
+        };
+        return (h(Host, { key: 'ceb67b8110efb4a4d5727c6fdcce4bd64f333be3', style: containerStyles, class: {
+                'has-image': !!showImage,
+                'has-initials': !!showInitials,
+                'has-default': !!showDefaultIcon,
+            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: 'aeb37def9c124f3e03ee30fbfe30c47a79c76e18', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
+                if (el) {
+                    el.referrerPolicy = 'no-referrer';
+                    el.crossOrigin = 'anonymous';
+                }
+            }, onError: this.handleImageError })), showInitials && (h("span", { key: '536eb291d7e029d5db419d0360e0ef307cea5edf', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: '71dc33191e8da37cd02cbd60832d52be9dcb8146', class: "avatar-default" }, h("svg", { key: '9ddcf26c9a77579d3924324e736e14f7ae02bff2', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: 'df408a91dcc03e2172bb7b9877772efa9dea8575', d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }))))));
+    }
+    static get is() { return "kritzel-avatar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-avatar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-avatar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "user": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IKritzelUser",
+                    "resolved": "IKritzelUser",
+                    "references": {
+                        "IKritzelUser": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::IKritzelUser",
+                            "referenceLocation": "IKritzelUser"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Full user object. If provided, individual props are ignored."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Direct prop: user's display name (used for initials fallback)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Avatar diameter in pixels"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "32"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Background color for initials fallback"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "imageError": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "user",
+                "methodName": "userChanged"
+            }, {
+                "propName": "profileImageUrl",
+                "methodName": "profileImageUrlChanged"
+            }];
+    }
+}

package/dist/collection/components/kritzel-back-to-content/kritzel-back-to-content.css

@@ -0,0 +1,42 @@
+:host {
+  display: block;
+  z-index: var(--kritzel-back-to-content-z-index, 1000);
+}
+
+.back-to-content-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--kritzel-back-to-content-height, 50px);
+  box-sizing: border-box;
+  gap: var(--kritzel-back-to-content-gap, 6px);
+  padding: var(--kritzel-back-to-content-padding, 0 16px);
+  border: var(--kritzel-back-to-content-border, 1px solid #ebebeb);
+  border-radius: var(--kritzel-back-to-content-border-radius, 12px);
+  background-color: var(--kritzel-back-to-content-background-color, #ffffff);
+  color: var(--kritzel-back-to-content-color, #000000);
+  font-size: var(--kritzel-back-to-content-font-size, 14px);
+  font-weight: var(--kritzel-back-to-content-font-weight, 500);
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  box-shadow: var(--kritzel-back-to-content-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease-out, transform 0.2s ease-out, background-color 0.15s ease-out;
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
+}
+
+.back-to-content-button.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+@media (hover: hover) {
+  .back-to-content-button:hover {
+    background-color: var(--kritzel-back-to-content-hover-background-color, hsl(0, 0%, 0%, 4.3%));
+  }
+}
+
+.back-to-content-button:active {
+  background-color: var(--kritzel-back-to-content-active-background-color, hsl(0, 0%, 0%, 8.6%));
+}

package/dist/collection/components/kritzel-back-to-content/kritzel-back-to-content.js

@@ -0,0 +1,95 @@
+import { Host, h } from "@stencil/core";
+export class KritzelBackToContent {
+    /**
+     * Whether the button is visible
+     */
+    visible = false;
+    /**
+     * The text to display on the button
+     */
+    text = 'Back to content';
+    /**
+     * Emitted when the button is clicked
+     */
+    backToContent;
+    handleClick = () => {
+        this.backToContent.emit();
+    };
+    render() {
+        return (h(Host, { key: 'c5c829f14100bd2d658f0dc1e32553f9adccb129' }, h("button", { key: 'a3cde6688b78466c79721d55b087c91490c6c378', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, h("kritzel-icon", { key: '8c31350e301b6852f2e9cf9d897281ff118587c7', name: "chevrons-left" }))));
+    }
+    static get is() { return "kritzel-back-to-content"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-back-to-content.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-back-to-content.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "visible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the button is visible"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "visible",
+                "defaultValue": "false"
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The text to display on the button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text",
+                "defaultValue": "'Back to content'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "backToContent",
+                "name": "backToContent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/kritzel-brush-style/kritzel-brush-style.css

@@ -0,0 +1,43 @@
+:host {
+  display: flex; 
+  align-items: flex-start; 
+  gap: 8px; 
+  padding: 8px; 
+  box-sizing: border-box; 
+  width: 100%;
+}
+
+.brush-style-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 42px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: none;
+  border-radius: 0; 
+  color: var(--control-text-color);
+  font-weight: bold;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.font-style-button:not(:last-child) {
+  border-right: 1px solid #333333; 
+}
+
+.font-style-button:hover {
+  background-color: var(--control-hover-bg);
+}
+
+.font-style-button:active {
+  background-color: var(--control-active-bg);
+}
+
+.font-style-button.selected,
+.font-style-button.selected:hover,
+.font-style-button.selected:active {
+  background-color: var(--control-selected-bg);
+  color: var(--control-selected-color);
+}

package/dist/collection/components/kritzel-brush-style/kritzel-brush-style.js

@@ -0,0 +1,97 @@
+import { Host, h } from "@stencil/core";
+export class KritzelBrushStyle {
+    type = 'pen';
+    brushOptions = [
+        { value: 'pen', label: 'Pen' },
+        { value: 'highlighter', label: 'Highlighter' },
+    ];
+    typeChange;
+    handleDropdownValueChange(event) {
+        this.typeChange.emit(event.detail);
+    }
+    render() {
+        const dropdownOptions = this.brushOptions.map(option => ({
+            value: option.value,
+            label: option.label,
+        }));
+        return (h(Host, { key: '51a7f84685032fd8fc967b22bee7c0711e811a54' }, h("kritzel-dropdown", { key: 'e49d7062c695458d345738d88a0adfc96b575e61', options: dropdownOptions, value: this.type, onValueChanged: event => this.handleDropdownValueChange(event) }, h("button", { key: 'ebbbf1a55b89e91012ca44c5cf30acfb77332b50', class: "brush-style-button", slot: "prefix" }, h("kritzel-icon", { key: 'dae002c9ab5e3486c726202426eb076a8f33b109', name: this.type, size: 16 })))));
+    }
+    static get is() { return "kritzel-brush-style"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-brush-style.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-brush-style.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'pen' | 'highlighter'",
+                    "resolved": "\"highlighter\" | \"pen\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'pen'"
+            },
+            "brushOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BrushStyleOption[]",
+                    "resolved": "BrushStyleOption[]",
+                    "references": {
+                        "BrushStyleOption": {
+                            "location": "local",
+                            "path": "C:/Projects/kritzel/libs/editor/core/src/components/kritzel-brush-style/kritzel-brush-style.tsx",
+                            "id": "src/components/kritzel-brush-style/kritzel-brush-style.tsx::BrushStyleOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\r\n    { value: 'pen', label: 'Pen' },\r\n    { value: 'highlighter', label: 'Highlighter' },\r\n  ]"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "typeChange",
+                "name": "typeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "'pen' | 'highlighter'",
+                    "resolved": "\"highlighter\" | \"pen\"",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,73 @@
+: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;
+}

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

@@ -0,0 +1,118 @@
+import { Host, h } from "@stencil/core";
+export class KritzelButton {
+    /** 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 is() { return "kritzel-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'text'",
+                    "resolved": "\"primary\" | \"secondary\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The visual variant of the button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'primary'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the button is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'button' | 'submit' | 'reset'",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type attribute for the native button element"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'button'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "buttonClick",
+                "name": "buttonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}