@kritzel/editor 0.4.31

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

@@ -0,0 +1,388 @@
+import { Host, h } from "@stencil/core";
+import { KritzelHTMLHelper } from "@kritzel/engine";
+export class KritzelTooltip {
+    host;
+    isVisible = false;
+    anchorElement;
+    triggerElement;
+    offsetY = 24;
+    tooltipClosed;
+    tooltipOpened;
+    positionX = 0;
+    positionY = 0;
+    handleOutsideClick(event) {
+        if (!this.isVisible)
+            return;
+        const path = event.composedPath();
+        const isInsideTooltip = path.some(el => el === this.host);
+        const isOnTrigger = this.triggerElement && path.some(el => el === this.triggerElement);
+        if (!isInsideTooltip && !isOnTrigger) {
+            this.close();
+        }
+    }
+    handleOutsidePointerDown(event) {
+        if (!this.isVisible)
+            return;
+        const path = event.composedPath();
+        const isInsideTooltip = path.some(el => el === this.host);
+        const isOnTrigger = this.triggerElement && path.some(el => el === this.triggerElement);
+        if (!isInsideTooltip && !isOnTrigger) {
+            event.stopPropagation();
+            event.preventDefault();
+            this.close();
+        }
+    }
+    handleCloseAll(event) {
+        if (event.detail !== this.host) {
+            this.close();
+        }
+    }
+    handleWindowResize() {
+        this.calculateAdjustedPosition();
+    }
+    handleTriggerElementChange(newTrigger, oldTrigger) {
+        if (oldTrigger) {
+            oldTrigger.removeEventListener('click', this.handleTriggerClick);
+        }
+        if (newTrigger) {
+            newTrigger.addEventListener('click', this.handleTriggerClick);
+        }
+    }
+    handleVisibilityChange(newValue) {
+        if (newValue) {
+            this.calculateAdjustedPosition();
+            requestAnimationFrame(() => {
+                this.focusContent();
+            });
+        }
+    }
+    async open() {
+        if (this.isVisible)
+            return;
+        document.dispatchEvent(new CustomEvent('kritzelTooltipCloseAll', { detail: this.host }));
+        this.isVisible = true;
+        this.tooltipOpened.emit();
+    }
+    async close() {
+        if (!this.isVisible)
+            return;
+        this.isVisible = false;
+        this.tooltipClosed.emit();
+    }
+    async toggle() {
+        if (this.isVisible) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    async focusContent() {
+        const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);
+        if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+        }
+    }
+    connectedCallback() {
+        if (this.triggerElement) {
+            this.triggerElement.addEventListener('click', this.handleTriggerClick);
+        }
+    }
+    componentDidLoad() {
+        if (this.triggerElement) {
+            this.triggerElement.addEventListener('click', this.handleTriggerClick);
+        }
+    }
+    componentWillLoad() {
+        this.calculateAdjustedPosition();
+    }
+    componentWillUpdate() {
+        this.calculateAdjustedPosition();
+    }
+    disconnectedCallback() {
+        if (this.triggerElement) {
+            this.triggerElement.removeEventListener('click', this.handleTriggerClick);
+        }
+    }
+    handleTriggerClick = (event) => {
+        event.stopPropagation();
+        this.toggle();
+    };
+    calculateAdjustedPosition() {
+        if (this.isVisible && this.anchorElement) {
+            const anchorRect = this.anchorElement.getBoundingClientRect();
+            const tooltipContent = this.host.shadowRoot?.querySelector('.tooltip-content');
+            const tooltipRect = tooltipContent?.getBoundingClientRect();
+            const tooltipWidth = tooltipRect?.width || 0;
+            const viewportPadding = 12; // Minimum distance from viewport edges
+            const anchorCenterX = anchorRect.left + anchorRect.width / 2;
+            // Step 1: Try to center the tooltip above the anchor
+            let idealLeft = anchorCenterX - tooltipWidth / 2;
+            // Step 2: Clamp to viewport bounds
+            const minLeft = viewportPadding;
+            const maxLeft = window.innerWidth - tooltipWidth - viewportPadding;
+            // Apply clamping - adjust if tooltip would overflow
+            this.positionX = Math.max(minLeft, Math.min(idealLeft, maxLeft));
+            // Step 3: Calculate bottom position (distance from viewport bottom to top of anchor + offset)
+            this.positionY = window.innerHeight - anchorRect.top + this.offsetY;
+        }
+    }
+    render() {
+        return (h(Host, { key: 'aa1367fd2af71357855814087a3d3c69e77e326f', style: {
+                position: 'fixed',
+                zIndex: '9999',
+                transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
+                visibility: this.isVisible ? 'visible' : 'hidden',
+                left: `${this.positionX}px`,
+                bottom: `${this.positionY}px`,
+            } }, h("div", { key: 'da84f59a18173fa4c93b4c2b8ace6102b0067e17', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: 'a68910ec2f7c2243043aea21489e3c68b6b09966' }))));
+    }
+    static get is() { return "kritzel-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-tooltip.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "isVisible": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-visible",
+                "defaultValue": "false"
+            },
+            "anchorElement": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "triggerElement": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "offsetY": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "offset-y",
+                "defaultValue": "24"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "positionX": {},
+            "positionY": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tooltipClosed",
+                "name": "tooltipClosed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "tooltipOpened",
+                "name": "tooltipOpened",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "focusContent": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "triggerElement",
+                "methodName": "handleTriggerElementChange"
+            }, {
+                "propName": "isVisible",
+                "methodName": "handleVisibilityChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleOutsideClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "pointerdown",
+                "method": "handleOutsidePointerDown",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "kritzelTooltipCloseAll",
+                "method": "handleCloseAll",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "resize",
+                "method": "handleWindowResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

package/dist/collection/components/kritzel-utility-panel/kritzel-utility-panel.css

@@ -0,0 +1,46 @@
+:host {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 4px;
+  gap: 8px;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  background-color: var(--kritzel-utility-panel-background-color, #e2e2e2);
+  width: fit-content;
+  user-select: none;
+  z-index: 1;
+}
+
+.utility-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 8px 4px;
+  border: none;
+  background: none;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  color: var(--kritzel-utility-panel-button-color, #333333);
+  --kritzel-icon-color: var(--kritzel-utility-panel-button-color, #333333);
+  -webkit-tap-highlight-color: transparent;
+  border-radius: var(--kritzel-utility-panel-button-border-radius, 8px);
+}
+
+.utility-button:hover,
+.utility-button:focus-visible {
+  background-color: var(--kritzel-utility-panel-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
+}
+
+.utility-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.utility-separator {
+  width: 1px;
+  height: 16px;
+  background-color: var(--kritzel-utility-panel-separator-color, hsl(0, 0%, 0%, 8%));
+}

package/dist/collection/components/kritzel-utility-panel/kritzel-utility-panel.js

@@ -0,0 +1,146 @@
+import { Host, h } from "@stencil/core";
+export class KritzelUtilityPanel {
+    undoState = null;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
+    undo;
+    redo;
+    delete;
+    handleUndo(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.undo.emit();
+        }
+    }
+    handleRedo(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.redo.emit();
+    }
+    render() {
+        return (h(Host, { key: '716bf600bb8ef3e1c7663183c2b4d2927e554faf' }, h("button", { key: '64b300d1d10c30d623fce76a919610e7b553c504', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event), "aria-label": this.terms['utility.undo'] ?? 'Undo' }, h("kritzel-icon", { key: '86c0711e5a61f837bf279600e27d896a81ae1d5c', name: "undo" })), h("button", { key: '9052c2023254caca5109364b1c82d42e0900d54b', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event), "aria-label": this.terms['utility.redo'] ?? 'Redo' }, h("kritzel-icon", { key: '03060f21b1551bcdae724b4de03010127647c036', name: "redo" })), h("div", { key: '5ac88e76663bb2d5c90f16b76021123fe64d898a', class: "utility-separator" }), h("button", { key: '7cbbc765c1c4b642d8371a25348d1d886b9b5440', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": this.terms['utility.delete'] ?? 'Delete selected items' }, h("kritzel-icon", { key: 'a8f6c8e8a8783e45d781b50aa7aec51b3f29dd5c', name: "delete" }))));
+    }
+    static get is() { return "kritzel-utility-panel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-utility-panel.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-utility-panel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "undoState": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KritzelUndoState",
+                    "resolved": "KritzelUndoState",
+                    "references": {
+                        "KritzelUndoState": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::KritzelUndoState",
+                            "referenceLocation": "KritzelUndoState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "terms": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Partial<Record<KritzelTermKey, string>>",
+                    "resolved": "\"backToContent.label\" | \"currentUser.dialogTitle\" | \"editor.loading\" | \"export.dialogTitle\" | \"export.exportButton\" | \"export.filename.label\" | \"export.filename.placeholder\" | \"export.format.label\" | \"export.tabs.viewport\" | \"export.tabs.workspace\" | \"login.dialogTitle\" | \"menu.align\" | \"menu.alignBottom\" | \"menu.alignCenterHorizontal\" | \"menu.alignCenterVertical\" | \"menu.alignLeft\" | \"menu.alignRight\" | \"menu.alignTop\" | \"menu.bringToFront\" | \"menu.copy\" | \"menu.cut\" | \"menu.delete\" | \"menu.export\" | \"menu.exportAsPng\" | \"menu.exportAsSvg\" | \"menu.group\" | \"menu.import\" | \"menu.logout\" | \"menu.moveDown\" | \"menu.moveUp\" | \"menu.order\" | \"menu.paste\" | \"menu.selectAll\" | \"menu.sendToBack\" | \"menu.settings\" | \"menu.share\" | \"menu.ungroup\" | \"moreMenu.ariaLabel\" | \"settings.about.description\" | \"settings.about.title\" | \"settings.categories.about\" | \"settings.categories.developer\" | \"settings.categories.general\" | \"settings.categories.shortcuts\" | \"settings.categories.viewport\" | \"settings.developer.showMigrationInfo.description\" | \"settings.developer.showMigrationInfo.label\" | \"settings.developer.showObjectInfo.description\" | \"settings.developer.showObjectInfo.label\" | \"settings.developer.showSyncProviderInfo.description\" | \"settings.developer.showSyncProviderInfo.label\" | \"settings.developer.showViewportInfo.description\" | \"settings.developer.showViewportInfo.label\" | \"settings.developer.title\" | \"settings.dialogTitle\" | \"settings.general.language.description\" | \"settings.general.language.label\" | \"settings.general.lockDrawingScale.description\" | \"settings.general.lockDrawingScale.label\" | \"settings.general.theme.description\" | \"settings.general.theme.label\" | \"settings.general.title\" | \"settings.shortcuts.title\" | \"settings.viewport.boundaryBottom.description\" | \"settings.viewport.boundaryBottom.label\" | \"settings.viewport.boundaryLeft.description\" | \"settings.viewport.boundaryLeft.label\" | \"settings.viewport.boundaryPlaceholder\" | \"settings.viewport.boundaryRight.description\" | \"settings.viewport.boundaryRight.label\" | \"settings.viewport.boundaryTop.description\" | \"settings.viewport.boundaryTop.label\" | \"settings.viewport.maxZoom.description\" | \"settings.viewport.maxZoom.label\" | \"settings.viewport.minZoom.description\" | \"settings.viewport.minZoom.label\" | \"settings.viewport.title\" | \"share.copyLink.copied\" | \"share.copyLink.title\" | \"share.dialogTitle\" | \"share.linkSharing.disabledDescription\" | \"share.linkSharing.enabledDescription\" | \"share.linkSharing.label\" | \"share.linkSharing.toggleLabel\" | \"toolConfig.collapse\" | \"toolConfig.expand\" | \"utility.delete\" | \"utility.redo\" | \"utility.undo\" | \"watermark.poweredBy\" | \"workspace.delete\" | \"workspace.rename\" | \"workspace.sharedTooltip\" | \"zoom.zoomIn\" | \"zoom.zoomOut\" | string",
+                    "references": {
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        },
+                        "KritzelTermKey": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::KritzelTermKey",
+                            "referenceLocation": "KritzelTermKey"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Resolved localized strings keyed by term key, supplied by the editor."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "undo",
+                "name": "undo",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "redo",
+                "name": "redo",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "delete",
+                "name": "delete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/kritzel-workspace-manager/kritzel-workspace-manager.css

@@ -0,0 +1,16 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  z-index: 1;
+}
+
+.manager {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease-out;
+}
+
+.manager.visible {
+  opacity: 1;
+  pointer-events: auto;
+}