@kritzel/editor 0.4.31

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

@@ -0,0 +1,89 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.export-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding:0;
+  flex: 1;
+}
+
+.export-content kritzel-pill-tabs {
+  align-self: center;
+}
+
+.export-tab-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-height: 330px;
+}
+
+.format-selection {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.format-selection label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--kritzel-global-text-primary, #333);
+}
+
+.export-primary-button {
+  width: 100%;
+  padding: 12px 24px;
+  background-color: var(--kritzel-global-primary-color, #007AFF);
+  color: var(--kritzel-global-primary-text-color, #fff);
+  border: none;
+  border-radius: var(--kritzel-button-border-radius, 8px);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.export-primary-button:hover {
+  background-color: var(--kritzel-global-primary-hover-color, #0066d6);
+}
+
+.export-primary-button:focus-visible {
+  outline: revert;
+  outline-offset: revert;
+}
+
+.preview-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  margin-bottom: 8px; 
+}
+
+.preview-container img {
+  max-width: 100%;
+  max-height: 250px;
+  object-fit: contain;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  border: 1px solid var(--kritzel-global-border-color, #dbdbdb);
+}
+
+.export-content p {
+  margin: 0;
+  color: var(--kritzel-global-text-secondary, #666);
+}
+
+@media (max-width: 576px) {
+  .export-tab-content {
+    flex: 1;
+    min-height: 0;
+  }
+}

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

@@ -0,0 +1,246 @@
+import { Host, h } from "@stencil/core";
+export class KritzelExport {
+    /**
+     * The name of the current workspace, used as default filename
+     */
+    workspaceName = 'workspace';
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
+    isDialogOpen = false;
+    previewUrl;
+    isLoading = false;
+    activeTab = 'viewport';
+    exportFilename = '';
+    viewportExportFormat = 'png';
+    exportPng;
+    exportSvg;
+    exportJson;
+    get tabs() {
+        return [
+            { id: 'viewport', label: this.terms['export.tabs.viewport'] ?? 'Export Viewport' },
+            { id: 'workspace', label: this.terms['export.tabs.workspace'] ?? 'Export Workspace' },
+        ];
+    }
+    viewportFormatOptions = [
+        { value: 'png', label: 'PNG' },
+        { value: 'svg', label: 'SVG' },
+    ];
+    async open(previewUrl) {
+        this.previewUrl = previewUrl;
+        this.activeTab = 'viewport';
+        this.viewportExportFormat = 'png';
+        this.exportFilename = this.generateDefaultFilename();
+        this.isDialogOpen = true;
+    }
+    async close() {
+        this.closeDialog();
+    }
+    generateDefaultFilename() {
+        const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5);
+        return `${this.workspaceName}-${timestamp}`;
+    }
+    handleFilenameChange = (event) => {
+        this.exportFilename = event.detail;
+    };
+    closeDialog = () => {
+        this.isDialogOpen = false;
+    };
+    handleTabChange = (event) => {
+        this.activeTab = event.detail;
+    };
+    handleViewportFormatChange = (event) => {
+        this.viewportExportFormat = event.detail;
+    };
+    handleExport = () => {
+        if (this.activeTab === 'viewport') {
+            if (this.viewportExportFormat === 'png') {
+                this.exportPng.emit();
+            }
+            else {
+                this.exportSvg.emit();
+            }
+        }
+        else {
+            this.exportJson.emit(this.exportFilename || this.generateDefaultFilename());
+        }
+        this.closeDialog();
+    };
+    renderViewportExport() {
+        return (h("div", { class: "export-tab-content" }, this.previewUrl && (h("div", { class: "preview-container" }, h("img", { src: this.previewUrl, alt: "Viewport Preview" }))), h("kritzel-input", { label: this.terms['export.filename.label'] ?? 'Filename', value: this.exportFilename, placeholder: this.terms['export.filename.placeholder'] ?? 'Enter filename', suffix: `.${this.viewportExportFormat}`, onValueChange: this.handleFilenameChange }), h("div", { class: "format-selection" }, h("label", null, this.terms['export.format.label'] ?? 'Format'), h("kritzel-dropdown", { options: this.viewportFormatOptions, value: this.viewportExportFormat, forceOpenDirection: "up", onValueChanged: this.handleViewportFormatChange }))));
+    }
+    renderWorkspaceExport() {
+        return (h("div", { class: "export-tab-content" }, h("kritzel-input", { label: this.terms['export.filename.label'] ?? 'Filename', value: this.exportFilename, placeholder: this.terms['export.filename.placeholder'] ?? 'Enter filename', suffix: ".json", onValueChange: this.handleFilenameChange })));
+    }
+    render() {
+        return (h(Host, { key: '60baf80591c9456aa32443a43f9af102ed711494' }, h("kritzel-dialog", { key: 'f8c744284000b356dc9c3de12252c0358909c9de', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: '9f5f5e56302cc9c1d1c173757fe720871e085ca0', class: "export-content" }, h("kritzel-pill-tabs", { key: '3976ad59d19c90c8d1a605815cb7d90cebede5e3', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport()), h("div", { key: '992dad8deb946feebd453d452f0e7338dbdb2236', slot: "footer" }, h("button", { key: '8c9d907a82a45e9ad2b48618ff6e812c804d7252', class: "export-primary-button", onClick: this.handleExport }, this.terms['export.exportButton'] ?? 'Export')))));
+    }
+    static get is() { return "kritzel-export"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-export.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-export.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "workspaceName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the current workspace, used as default filename"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "workspace-name",
+                "defaultValue": "'workspace'"
+            },
+            "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 states() {
+        return {
+            "isDialogOpen": {},
+            "previewUrl": {},
+            "isLoading": {},
+            "activeTab": {},
+            "exportFilename": {},
+            "viewportExportFormat": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "exportPng",
+                "name": "exportPng",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "exportSvg",
+                "name": "exportSvg",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "exportJson",
+                "name": "exportJson",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "(previewUrl?: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "previewUrl",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "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": []
+                }
+            }
+        };
+    }
+}

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

@@ -0,0 +1,10 @@
+:host {
+  display: block;
+}
+
+.font-preview {
+  color: var(--kritzel-font-size-text-color, #333333);
+  line-height: 1;
+  text-align: center;
+  font-weight: bold;
+}

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

@@ -0,0 +1,89 @@
+import { Host, h } from "@stencil/core";
+export class KritzelFont {
+    fontFamily = 'Arial, sans-serif';
+    size = 24;
+    color = '#000000';
+    render() {
+        return (h(Host, { key: 'b594153b199a9ed859b0b74dccaa8f242f6e388d' }, h("div", { key: 'f1888af3f0342a38c3d5a887ef66adef63b35a87', class: "font-preview", style: {
+                fontFamily: this.fontFamily,
+                fontSize: `${this.size}px`,
+                color: this.color
+            } }, "A")));
+    }
+    static get is() { return "kritzel-font"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-font.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-font.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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, sans-serif'"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "24"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'#000000'"
+            }
+        };
+    }
+}

package/dist/collection/components/kritzel-font-family/kritzel-font-family.css

@@ -0,0 +1,48 @@
+:host {
+  display: flex; 
+  align-items: flex-start; 
+  gap: 8px; 
+  padding: 0; 
+  box-sizing: border-box; 
+  width: 100%;
+}
+
+.font-style-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 42px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: none;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  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);
+}
+
+.font-style-button.italic-text {
+  font-style: italic;
+}

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

@@ -0,0 +1,122 @@
+import { Host, h } from "@stencil/core";
+export class KritzelFontFamily {
+    fontOptions = [];
+    selectedFontFamily;
+    fontFamilyChange;
+    handleFontOptionsChange() {
+        this.ensureValidSelectedFont(this.resolveFontOptions());
+    }
+    componentWillLoad() {
+        this.ensureValidSelectedFont(this.resolveFontOptions());
+    }
+    handleDropdownValueChange = (event) => {
+        this.fontFamilyChange.emit(event.detail);
+    };
+    ensureValidSelectedFont(options) {
+        if (options.length === 0) {
+            return;
+        }
+        const normalizedSelected = this.selectedFontFamily?.trim().toLocaleLowerCase();
+        const isValidCurrentFont = options.some(opt => opt.value.trim().toLocaleLowerCase() === normalizedSelected);
+        if (!normalizedSelected || !isValidCurrentFont) {
+            this.selectedFontFamily = options[0].value;
+        }
+    }
+    resolveFontOptions() {
+        return this.fontOptions;
+    }
+    render() {
+        const fontOptions = this.resolveFontOptions();
+        const selectedOption = fontOptions.find(option => option.value === this.selectedFontFamily);
+        const selectedFontFamily = selectedOption?.cssFontFamily ?? this.selectedFontFamily;
+        const dropdownOptions = fontOptions.map(option => ({
+            value: option.value,
+            label: option.label,
+            style: { fontFamily: option.cssFontFamily ?? option.value },
+        }));
+        return (h(Host, { key: '42b2805b1d2df47a1b2336dffac32ee50740809e' }, h("kritzel-dropdown", { key: '3e1f019b2ecacea061f687c93f4fdd6a384b93b7', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: selectedFontFamily } })));
+    }
+    static get is() { return "kritzel-font-family"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-font-family.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-font-family.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "fontOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "FontOption[]",
+                    "resolved": "FontOption[]",
+                    "references": {
+                        "FontOption": {
+                            "location": "local",
+                            "path": "C:/Projects/kritzel/libs/editor/core/src/components/kritzel-font-family/kritzel-font-family.tsx",
+                            "id": "src/components/kritzel-font-family/kritzel-font-family.tsx::FontOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "selectedFontFamily": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-font-family"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "fontFamilyChange",
+                "name": "fontFamilyChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "fontOptions",
+                "methodName": "handleFontOptionsChange"
+            }];
+    }
+}

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

@@ -0,0 +1,30 @@
+:host {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.size-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  border: 2px solid transparent;
+  box-sizing: border-box;
+  border-radius: 50%;
+}
+
+.size-container:hover {
+  background-color: var(--kritzel-font-size-hover-background-color, #ebebeb);
+}
+
+.size-container.selected {
+  border-color: var(--kritzel-selection-border-color, #007AFF);
+  background-color: var(--kritzel-font-size-selected-background-color, #e0e0e0);
+}
+