@kritzel/editor 0.4.31

package/dist/collection/components/kritzel-share-dialog/kritzel-share-dialog.css

@@ -0,0 +1,150 @@
+:host {
+  display: contents;
+}
+
+kritzel-dialog {
+  --kritzel-dialog-width-small: 420px;
+}
+
+.share-content {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.share-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.share-section-revoke {
+  padding-top: 12px;
+  border-top: 1px solid var(--kritzel-share-dialog-border-color, #e5e5e5);
+}
+
+.share-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.share-label-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 1;
+}
+
+.share-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--kritzel-share-dialog-label-color, #333333);
+  margin: 0;
+}
+
+.share-description {
+  font-size: 12px;
+  color: var(--kritzel-share-dialog-description-color, #666666);
+  margin: 0;
+  line-height: 1.4;
+}
+
+/* URL Input Container */
+.share-url-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--kritzel-share-dialog-input-background, #f5f5f5);
+  border: 1px solid var(--kritzel-share-dialog-input-border-color, #e0e0e0);
+  border-radius: 6px;
+  padding: 4px 4px 4px 12px;
+}
+
+.share-qr-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+
+.share-qr-image {
+  width: 180px;
+  height: 180px;
+  border-radius: 8px;
+  border: 1px solid var(--kritzel-share-dialog-qr-border-color, #e0e0e0);
+  background: var(--kritzel-share-dialog-qr-background, #ffffff);
+  padding: 8px;
+  box-sizing: border-box;
+}
+
+.share-url-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  font-size: 13px;
+  color: var(--kritzel-share-dialog-input-text-color, #333333);
+  outline: none;
+  min-width: 0;
+  padding: 8px 0;
+}
+
+.share-url-input:focus {
+  outline: none;
+}
+
+.share-url-input::selection {
+  background: var(--kritzel-share-dialog-selection-color, #cce5ff);
+}
+
+/* Copy Button */
+.copy-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: none;
+  border-radius: 4px;
+  background: var(--kritzel-share-dialog-copy-button-background, #ffffff);
+  color: var(--kritzel-share-dialog-copy-button-color, #666666);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+}
+
+.copy-button:hover {
+  background: var(--kritzel-share-dialog-copy-button-hover-background, #e8e8e8);
+  color: var(--kritzel-share-dialog-copy-button-hover-color, #333333);
+}
+
+.copy-button.copy-success {
+  background: var(--kritzel-share-dialog-copy-success-background, #d4edda);
+  color: var(--kritzel-share-dialog-copy-success-color, #28a745);
+}
+
+/* Revoke Button */
+.revoke-button {
+  align-self: flex-start;
+  padding: 8px 16px;
+  border: 1px solid var(--kritzel-share-dialog-revoke-button-border-color, #dc3545);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--kritzel-share-dialog-revoke-button-color, #dc3545);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.revoke-button:hover {
+  background: var(--kritzel-share-dialog-revoke-button-hover-background, #dc3545);
+  color: var(--kritzel-share-dialog-revoke-button-hover-color, #ffffff);
+}
+
+/* Dropdown styling within the dialog */
+kritzel-dropdown {
+  --kritzel-dropdown-trigger-padding: 8px 12px;
+  --kritzel-dropdown-trigger-font-size: 13px;
+}

package/dist/collection/components/kritzel-share-dialog/kritzel-share-dialog.js

@@ -0,0 +1,308 @@
+import { Host, h } from "@stencil/core";
+import QRCode from "qrcode";
+/**
+ * Share dialog component for managing workspace link sharing.
+ * This is a presentational component that emits events for all actions.
+ * The parent component (kritzel-editor) handles the business logic.
+ */
+export class KritzelShareDialog {
+    host;
+    /**
+     * Whether the workspace is currently public.
+     */
+    isPublic = false;
+    /**
+     * The ID of the workspace being shared. Used to build the share URL.
+     */
+    workspaceId = undefined;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
+    onIsPublicChange(newValue) {
+        this.internalIsPublic = newValue;
+        void this.updateQrCodeDataUrl();
+    }
+    onWorkspaceIdChange() {
+        void this.updateQrCodeDataUrl();
+    }
+    isDialogOpen = false;
+    internalIsPublic = false;
+    copySuccess = false;
+    qrCodeDataUrl = '';
+    qrCodeUpdateSequence = 0;
+    /**
+     * Emitted when the user toggles the public sharing state.
+     */
+    toggleIsPublic;
+    /**
+     * Emitted when the dialog is closed.
+     */
+    dialogClosed;
+    /**
+     * Opens the share dialog.
+     */
+    async open() {
+        this.internalIsPublic = this.isPublic;
+        this.isDialogOpen = true;
+        await this.updateQrCodeDataUrl();
+    }
+    /**
+     * Closes the share dialog.
+     */
+    async close() {
+        this.isDialogOpen = false;
+    }
+    handleToggleChange = (event) => {
+        const enabled = event.detail;
+        // Update local state optimistically for immediate UI feedback
+        this.internalIsPublic = enabled;
+        void this.updateQrCodeDataUrl();
+        this.toggleIsPublic.emit(enabled);
+    };
+    async updateQrCodeDataUrl() {
+        if (!this.internalIsPublic) {
+            this.qrCodeDataUrl = '';
+            return;
+        }
+        const shareUrl = this.getShareUrl();
+        if (!shareUrl) {
+            this.qrCodeDataUrl = '';
+            return;
+        }
+        const sequence = ++this.qrCodeUpdateSequence;
+        try {
+            const dataUrl = await QRCode.toDataURL(shareUrl, {
+                margin: 1,
+                width: 180,
+            });
+            if (sequence !== this.qrCodeUpdateSequence) {
+                return;
+            }
+            this.qrCodeDataUrl = dataUrl;
+        }
+        catch {
+            if (sequence !== this.qrCodeUpdateSequence) {
+                return;
+            }
+            this.qrCodeDataUrl = '';
+        }
+    }
+    getShareUrl() {
+        if (!this.workspaceId)
+            return '';
+        const url = new URL(this.workspaceId, window.location.origin);
+        url.searchParams.set('share', 'true');
+        return url.toString();
+    }
+    handleCopyUrl = async () => {
+        const shareUrl = this.getShareUrl();
+        if (!shareUrl)
+            return;
+        try {
+            await navigator.clipboard.writeText(shareUrl);
+            this.copySuccess = true;
+            setTimeout(() => {
+                this.copySuccess = false;
+            }, 2000);
+        }
+        catch {
+            // Clipboard API failed, fallback to legacy method
+            const textArea = document.createElement('textarea');
+            textArea.value = shareUrl;
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textArea);
+            this.copySuccess = true;
+            setTimeout(() => {
+                this.copySuccess = false;
+            }, 2000);
+        }
+    };
+    closeDialog = () => {
+        this.isDialogOpen = false;
+        this.dialogClosed.emit();
+    };
+    render() {
+        return (h(Host, { key: '49c70b80298550025811e6714c1dd9ee064a689e' }, h("kritzel-dialog", { key: 'f0e1f4824c9f80aeb5264259e521da5e134c18b0', dialogTitle: this.terms['share.dialogTitle'] ?? 'Share Workspace', size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, h("div", { key: '89f2701613d0ab7ae91eed39759927ceec40bf75', class: "share-content" }, h("div", { key: 'bca0039ca39d019698c1a1a5d4020957d4ef73b1', class: "share-section" }, h("div", { key: 'c985d3dc0c95bc83ebb32f6b841b97a88473cc6d', class: "share-row" }, h("div", { key: '624bc298e8e67de4d68f92d03a4e0dee9055acce', class: "share-label-group" }, h("label", { key: 'eb9683c17734d9c3fdc6215ac8d9947e5df89780', class: "share-label" }, this.terms['share.linkSharing.label'] ?? 'Link sharing'), h("p", { key: '01c3a175c08728ba7f6d9d69208c5d8d34d6e453', class: "share-description" }, this.internalIsPublic
+            ? (this.terms['share.linkSharing.enabledDescription'] ?? 'Anyone with the link can access this workspace.')
+            : (this.terms['share.linkSharing.disabledDescription'] ?? 'Link sharing is disabled. Only you can access this workspace.'))), h("kritzel-slide-toggle", { key: 'e41bb690cab9e1eef3619f2277e66aa17ee6f66b', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: this.terms['share.linkSharing.toggleLabel'] ?? 'Enable link sharing' }))), this.internalIsPublic && (h("div", { key: '8e3fdd4c7b13ef9484ab84d90fc84ee8a357da47', class: "share-section" }, h("div", { key: '344605384f1ae60cd199b54a43c8cd4b5c5b58c9', class: "share-url-container" }, h("input", { key: '790f096274d408d507ced3590db469b62eabd885', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), h("button", { key: '8954c73a9bd586bb5457a9a15974bd2f98e52d27', class: { 'copy-button': true, 'copy-success': this.copySuccess }, onClick: this.handleCopyUrl, title: this.copySuccess ? (this.terms['share.copyLink.copied'] ?? 'Copied!') : (this.terms['share.copyLink.title'] ?? 'Copy link') }, h("kritzel-icon", { key: '45e0664c85ebc868a918382c0470e75ce41c5f5b', name: this.copySuccess ? 'check' : 'copy', size: 18 }))), this.qrCodeDataUrl && (h("div", { key: 'ea7785f9addf1d203ed75c7abf1ee1956f9fa56e', class: "share-qr-container" }, h("img", { key: '968f07d4b54d720cbbe959a201e418fbc22a3449', class: "share-qr-image", src: this.qrCodeDataUrl, alt: "QR code for share link" })))))))));
+    }
+    static get is() { return "kritzel-share-dialog"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-share-dialog.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-share-dialog.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "isPublic": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the workspace is currently public."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-public",
+                "defaultValue": "false"
+            },
+            "workspaceId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The ID of the workspace being shared. Used to build the share URL."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "workspace-id",
+                "defaultValue": "undefined"
+            },
+            "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": {},
+            "internalIsPublic": {},
+            "copySuccess": {},
+            "qrCodeDataUrl": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toggleIsPublic",
+                "name": "toggleIsPublic",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user toggles the public sharing state."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "dialogClosed",
+                "name": "dialogClosed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dialog is closed."
+                },
+                "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": "Opens the share dialog.",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the share dialog.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "isPublic",
+                "methodName": "onIsPublicChange"
+            }, {
+                "propName": "workspaceId",
+                "methodName": "onWorkspaceIdChange"
+            }];
+    }
+}

package/dist/collection/components/kritzel-slide-toggle/kritzel-slide-toggle.css

@@ -0,0 +1,48 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  outline: none;
+  z-index: 1;
+  -webkit-tap-highlight-color: transparent;
+}
+
+:host(:focus-visible) .toggle-track {
+  box-shadow: 0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3));
+}
+
+:host(.disabled) {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: default;
+}
+
+.toggle-track {
+  position: relative;
+  width: var(--kritzel-slide-toggle-width, 40px);
+  height: var(--kritzel-slide-toggle-height, 22px);
+  background-color: var(--kritzel-slide-toggle-track-color, #ccc);
+  border-radius: var(--kritzel-slide-toggle-border-radius, 11px);
+  transition: background-color var(--kritzel-slide-toggle-transition-duration, 0.2s) ease;
+}
+
+:host(.checked) .toggle-track {
+  background-color: var(--kritzel-slide-toggle-track-checked-color, #007AFF);
+}
+
+.toggle-thumb {
+  position: absolute;
+  top: 50%;
+  left: 2px;
+  transform: translateY(-50%);
+  width: var(--kritzel-slide-toggle-thumb-size, 18px);
+  height: var(--kritzel-slide-toggle-thumb-size, 18px);
+  background-color: var(--kritzel-slide-toggle-thumb-color, #fff);
+  border-radius: 50%;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  transition: left var(--kritzel-slide-toggle-transition-duration, 0.2s) ease;
+}
+
+:host(.checked) .toggle-thumb {
+  left: calc(var(--kritzel-slide-toggle-width, 40px) - var(--kritzel-slide-toggle-thumb-size, 18px) - 2px);
+}

package/dist/collection/components/kritzel-slide-toggle/kritzel-slide-toggle.js

@@ -0,0 +1,119 @@
+import { Host, h } from "@stencil/core";
+export class KritzelSlideToggle {
+    /** Whether the toggle is checked/on */
+    checked = false;
+    /** Whether the toggle is disabled */
+    disabled = false;
+    /** Label text for accessibility (screen readers) */
+    label;
+    /** Emitted when the toggle state changes */
+    checkedChange;
+    handleToggle = () => {
+        if (this.disabled)
+            return;
+        this.checked = !this.checked;
+        this.checkedChange.emit(this.checked);
+    };
+    handleKeyDown = (event) => {
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this.handleToggle();
+        }
+    };
+    render() {
+        return (h(Host, { key: 'cedab6d6c0ae42325b68c6f17696f7527aa629be', class: { checked: this.checked, disabled: this.disabled }, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label, onClick: this.handleToggle, onKeyDown: this.handleKeyDown }, h("div", { key: '8702a1d196a1a5f9fda7f8d1634fba9a580e3f66', class: "toggle-track" }, h("div", { key: '33e2986727467bcedb31c267a7d6c173e6fc0add', class: "toggle-thumb" }))));
+    }
+    static get is() { return "kritzel-slide-toggle"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-slide-toggle.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-slide-toggle.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the toggle is checked/on"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the toggle is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text for accessibility (screen readers)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "checkedChange",
+                "name": "checkedChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the toggle state changes"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}