kritzel-stencil 0.1.72 → 0.1.74

package/dist/collection/components/core/kritzel-awareness-cursors/kritzel-awareness-cursors.js

@@ -0,0 +1,347 @@
+import { Host, h } from "@stencil/core";
+import { KritzelPath } from "../../../classes/objects/path.class";
+import { KritzelLine } from "../../../classes/objects/line.class";
+const STALE_THRESHOLD_MS = 10_000;
+const REMOVE_THRESHOLD_MS = 30_000;
+const CLEANUP_INTERVAL_MS = 3_000;
+export class KritzelAwarenessCursors {
+    core;
+    showEdgeIndicators = true;
+    edgeIndicatorPadding = 8;
+    remoteCursors = new Map();
+    objectVersion = 0;
+    cleanupIntervalId;
+    objectChangeRafId = null;
+    componentDidLoad() {
+        this.core.store.state.objects?.onAwarenessChange(states => {
+            this.handleAwarenessChange(states);
+        });
+        this.core.store.state.objects?.onObjectsChange(() => {
+            this.handleRemoteObjectChange();
+        });
+        this.cleanupIntervalId = setInterval(() => {
+            this.cleanupStaleCursors();
+        }, CLEANUP_INTERVAL_MS);
+    }
+    disconnectedCallback() {
+        if (this.cleanupIntervalId) {
+            clearInterval(this.cleanupIntervalId);
+        }
+        if (this.objectChangeRafId !== null) {
+            cancelAnimationFrame(this.objectChangeRafId);
+        }
+    }
+    handleAwarenessChange(states) {
+        const localClientId = this.core.store.state.objects?.localClientId;
+        const now = Date.now();
+        const updated = new Map(this.remoteCursors);
+        // Track which clientIds are still present
+        const activeClientIds = new Set();
+        states.forEach((state, clientId) => {
+            if (clientId === localClientId)
+                return;
+            if (!state.user)
+                return;
+            activeClientIds.add(clientId);
+            const user = state.user;
+            const cursor = state.cursor;
+            const activeObjectId = state.activeObjectId || null;
+            const selectionBox = state.selectionBox || null;
+            updated.set(clientId, {
+                clientId,
+                user,
+                cursor,
+                activeObjectId,
+                selectionBox,
+                lastUpdated: now,
+            });
+        });
+        // Remove cursors for disconnected clients
+        for (const clientId of updated.keys()) {
+            if (!activeClientIds.has(clientId)) {
+                updated.delete(clientId);
+            }
+        }
+        this.remoteCursors = updated;
+    }
+    cleanupStaleCursors() {
+        const now = Date.now();
+        let changed = false;
+        const updated = new Map(this.remoteCursors);
+        for (const [clientId, cursor] of updated) {
+            if (now - cursor.lastUpdated > REMOVE_THRESHOLD_MS) {
+                updated.delete(clientId);
+                changed = true;
+            }
+        }
+        if (changed) {
+            this.remoteCursors = updated;
+        }
+    }
+    isStale(cursor) {
+        return Date.now() - cursor.lastUpdated > STALE_THRESHOLD_MS;
+    }
+    hasActiveDrawingCursors() {
+        for (const cursor of this.remoteCursors.values()) {
+            if (cursor.activeObjectId)
+                return true;
+        }
+        return false;
+    }
+    handleRemoteObjectChange() {
+        if (!this.hasActiveDrawingCursors())
+            return;
+        // Debounce via rAF to batch multiple rapid Yjs updates into a single re-render
+        if (this.objectChangeRafId !== null)
+            return;
+        this.objectChangeRafId = requestAnimationFrame(() => {
+            this.objectChangeRafId = null;
+            this.objectVersion++;
+        });
+    }
+    getActiveObjectTip(objectId) {
+        const obj = this.core.store.state.objects?.findById(objectId);
+        if (!obj)
+            return null;
+        if (obj instanceof KritzelPath && !obj.isCompleted) {
+            const lastPoint = obj.points[obj.points.length - 1];
+            if (!lastPoint)
+                return null;
+            return {
+                x: (lastPoint[0] - obj.x) / obj.scale + obj.translateX,
+                y: (lastPoint[1] - obj.y) / obj.scale + obj.translateY,
+            };
+        }
+        if (obj instanceof KritzelLine && !obj.isCompleted) {
+            return {
+                x: (obj.endX - obj.x) / obj.scale + obj.translateX,
+                y: (obj.endY - obj.y) / obj.scale + obj.translateY,
+            };
+        }
+        // Shapes normalize their bounding box (x/y always top-left, width/height
+        // always positive), so we can't determine which corner the user is actively
+        // dragging. Fall back to the throttled awareness cursor position instead.
+        return null;
+    }
+    worldToScreen(worldX, worldY) {
+        const { scale, translateX, translateY } = this.core.store.state;
+        return {
+            x: worldX * scale + translateX,
+            y: worldY * scale + translateY,
+        };
+    }
+    isInViewport(screenX, screenY) {
+        const { viewportWidth, viewportHeight } = this.core.store.state;
+        return screenX >= 0 && screenX <= viewportWidth && screenY >= 0 && screenY <= viewportHeight;
+    }
+    clampToEdge(screenX, screenY) {
+        const { viewportWidth, viewportHeight } = this.core.store.state;
+        const padding = this.edgeIndicatorPadding; // 8px
+        // Clamp symmetrically
+        const clampedX = Math.max(padding, Math.min(viewportWidth - padding, screenX));
+        const clampedY = Math.max(padding, Math.min(viewportHeight - padding, screenY));
+        // Determine nearest edge to position avatar inside
+        const distLeft = clampedX - padding;
+        const distRight = (viewportWidth - padding) - clampedX;
+        const distTop = clampedY - padding;
+        const distBottom = (viewportHeight - padding) - clampedY;
+        let edge = 'top';
+        const minDist = Math.min(distLeft, distRight, distTop, distBottom);
+        if (minDist === distLeft)
+            edge = 'left';
+        else if (minDist === distRight)
+            edge = 'right';
+        else if (minDist === distTop)
+            edge = 'top';
+        else
+            edge = 'bottom';
+        const angle = Math.atan2(screenY - clampedY, screenX - clampedX);
+        return { x: clampedX, y: clampedY, angle, edge };
+    }
+    getUserDisplayName(user) {
+        if (user.displayName)
+            return user.displayName;
+        if (user.firstName || user.lastName) {
+            return [user.firstName, user.lastName].filter(Boolean).join(' ');
+        }
+        return 'Unknown';
+    }
+    render() {
+        // Read reactive viewport state so Stencil re-renders on pan/zoom
+        const _scale = this.core.store.state.scale;
+        const _tx = this.core.store.state.translateX;
+        const _ty = this.core.store.state.translateY;
+        // Suppress unused variable warnings — these reads trigger Stencil reactivity
+        void _scale;
+        void _tx;
+        void _ty;
+        void this.objectVersion;
+        const cursors = Array.from(this.remoteCursors.values());
+        return (h(Host, { key: 'b8676d9a7a3d4a79ea8ad9763355ecf4c2f90e17' }, cursors.map(remoteCursor => {
+            if (!remoteCursor.cursor)
+                return null;
+            // When a remote user is actively drawing, derive cursor position from
+            // the object's latest coordinates (synced via Yjs) instead of the
+            // throttled awareness cursor position
+            let screen;
+            let trackingObject = false;
+            if (remoteCursor.activeObjectId) {
+                const tip = this.getActiveObjectTip(remoteCursor.activeObjectId);
+                if (tip) {
+                    trackingObject = true;
+                    screen = this.worldToScreen(tip.x, tip.y);
+                }
+                else {
+                    screen = this.worldToScreen(remoteCursor.cursor.x, remoteCursor.cursor.y);
+                }
+            }
+            else {
+                screen = this.worldToScreen(remoteCursor.cursor.x, remoteCursor.cursor.y);
+            }
+            const inViewport = this.isInViewport(screen.x, screen.y);
+            const stale = this.isStale(remoteCursor);
+            const color = remoteCursor.user.color || '#6B7280';
+            if (inViewport) {
+                return this.renderCursor(remoteCursor, screen.x, screen.y, color, stale, trackingObject);
+            }
+            if (this.showEdgeIndicators) {
+                return this.renderEdgeIndicator(remoteCursor, screen.x, screen.y, color, stale, trackingObject);
+            }
+            return null;
+        }), cursors.map(remoteCursor => {
+            if (!remoteCursor.selectionBox)
+                return null;
+            const color = remoteCursor.user.color || '#6B7280';
+            const box = remoteCursor.selectionBox;
+            const topLeft = this.worldToScreen(box.x, box.y);
+            const { scale } = this.core.store.state;
+            const screenWidth = box.width * scale;
+            const screenHeight = box.height * scale;
+            return (h("div", { key: `selection-box-${remoteCursor.clientId}`, class: "remote-selection-box", style: {
+                    transform: `translate(${topLeft.x}px, ${topLeft.y}px)`,
+                    width: `${screenWidth}px`,
+                    height: `${screenHeight}px`,
+                    backgroundColor: `color-mix(in srgb, ${color} 20%, transparent)`,
+                    borderColor: `color-mix(in srgb, ${color} 50%, transparent)`,
+                } }));
+        })));
+    }
+    renderCursor(cursor, screenX, screenY, color, stale, trackingObject) {
+        return (h("div", { key: `cursor-${cursor.clientId}`, class: { 'awareness-cursor': true, stale, 'tracking-object': trackingObject }, style: { transform: `translate(${screenX}px, ${screenY}px)` } }, h("svg", { class: "cursor-arrow", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M5 3L19 12L12 13L9 20L5 3Z", fill: color, stroke: "#ffffff", "stroke-width": "1.5", "stroke-linejoin": "round" })), h("span", { class: "cursor-label", style: { backgroundColor: color } }, this.getUserDisplayName(cursor.user))));
+    }
+    renderEdgeIndicator(cursor, screenX, screenY, color, stale, trackingObject) {
+        const clamped = this.clampToEdge(screenX, screenY);
+        const arrowDeg = (clamped.angle * 180) / Math.PI + 90;
+        // Position the username label opposite to the edge
+        const labelOffset = 20;
+        let labelX = 0;
+        let labelY = 0;
+        // Default transform origin is somewhat arbitrary without explicit layout
+        // We'll calculate simple translations relative to center point
+        if (clamped.edge === 'left') {
+            labelX = labelOffset;
+        }
+        else if (clamped.edge === 'right') {
+            labelX = -labelOffset;
+        }
+        else if (clamped.edge === 'top') {
+            labelY = labelOffset;
+        }
+        else if (clamped.edge === 'bottom') {
+            labelY = -labelOffset;
+        }
+        const displayName = this.getUserDisplayName(cursor.user);
+        return (h("div", { key: `edge-${cursor.clientId}`, class: { 'edge-indicator': true, stale, 'tracking-object': trackingObject }, style: {
+                transform: `translate(${clamped.x}px, ${clamped.y}px)`,
+            } }, h("svg", { class: "edge-arrow", width: "16", height: "16", viewBox: "0 0 16 16", style: { transform: `rotate(${arrowDeg}deg)` } }, h("path", { d: "M8 1L14 13H2L8 1Z", fill: color, stroke: "#ffffff", "stroke-width": "1.5", "stroke-linejoin": "round" })), h("span", { class: "edge-label", style: {
+                backgroundColor: color,
+                transform: `translate(${labelX}px, ${labelY}px)`,
+            } }, displayName)));
+    }
+    static get is() { return "kritzel-awareness-cursors"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-awareness-cursors.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-awareness-cursors.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "core": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KritzelCore",
+                    "resolved": "KritzelCore",
+                    "references": {
+                        "KritzelCore": {
+                            "location": "import",
+                            "path": "../../../classes/core/core.class",
+                            "id": "src/classes/core/core.class.ts::KritzelCore",
+                            "referenceLocation": "KritzelCore"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "showEdgeIndicators": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-edge-indicators",
+                "defaultValue": "true"
+            },
+            "edgeIndicatorPadding": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "edge-indicator-padding",
+                "defaultValue": "8"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "remoteCursors": {},
+            "objectVersion": {}
+        };
+    }
+}

package/dist/collection/components/core/kritzel-cursor-trail/kritzel-cursor-trail.js

@@ -63,7 +63,7 @@ export class KritzelCursorTrail {
         }
     }
     render() {
-        return (h(Host, { key: '603a385702512357af1fbcc778b29feecf8cf208' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: '5f7e4478599d482e624b77a752f601088b343f4e', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
+        return (h(Host, { key: 'b6a9e84ce49dd72f353e0b87ae0bc02b0e5aeb1e' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: '238ea314a937d556c75ae080495c2e6559340c6f', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
                 position: 'absolute',
                 left: '0',
                 top: '0',

package/dist/collection/components/core/kritzel-editor/kritzel-editor.js

@@ -180,7 +180,7 @@ export class KritzelEditor {
     isControlsVisible = true;
     isUtilityPanelVisible = true;
     syncConfig = {
-        providers: [IndexedDBSyncProvider],
+        providers: [IndexedDBSyncProvider]
     };
     /** Optional login configuration. When provided, a "Sign in" button is shown that opens a login dialog with the configured providers. */
     loginConfig;
@@ -697,7 +697,7 @@ export class KritzelEditor {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = !!this.loginConfig && !isLoggedIn;
-        return (h(Host, { key: '84231308ca4b12863139aeeafa754d544345df3f' }, h("div", { key: 'b8cdd2862e9bd892dfeed356e85d608759307bf7', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: '2bce2b9564f5a083ba32667718685310d060f23a', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: 'b013213fc04fe86eefcc324911693fcffb8eea51', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: '7338446462bfdc3995c0897704e9594a875895e1', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.currentTheme, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event) }), h("kritzel-controls", { key: '97b9d8805446afc101f01d99bc96bc24a7054722', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: '0986b1e82b8fbf989e716fe07a401faca618f642', class: "top-right-buttons" }, h("kritzel-settings", { key: '6f4cfe92bb54f0de291b0a0482742b859e86ecf3', ref: el => (this.settingsRef = el), shortcuts: this.shortcuts, editorId: this.editorId, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: 'd669ecae49f721e765d1f8d2f6725633c28cd635', ref: el => (this.exportRef = el), workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: 'e44843dcdc9c0ff1e760aadac3f2ec79a7371aba', users: this.activeUsers }), shouldShowCurrentUser && (h("kritzel-current-user", { key: '123f7968427b4420c8e29749b6ec679e1df92e95', user: this.user })), shouldShowLoginButton && h("kritzel-button", { key: '35b611178e9dfcc3c78a7495965d2844aa33435d', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in"), h("kritzel-more-menu", { key: 'bec3ebf5a7a6d40fc334ef34d9b2c030e0c1faf2', items: this.moreMenuItems }), h("kritzel-share-dialog", { key: 'ba72f6cc43372cc7fe93090fd6254391494443ff', ref: el => (this.shareDialogRef = el), isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '319bf700bd96bbdec9d566a7e054cdce4de2a251', ref: el => (this.loginDialogRef = el), providers: this.loginConfig.providers, dialogTitle: this.loginConfig.title, subtitle: this.loginConfig.subtitle, onProviderLogin: this.handleProviderLogin })))));
+        return (h(Host, { key: 'd1944655652eb2939e3696ed70050baaca0871e2' }, h("div", { key: 'ce5dfd9b8f8d9927e9a6ace4056f9053163c7e0a', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'e127a667c6e4e853bb4f0c9ffd0edaa6d80d9dfa', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: 'a9abb378f3c79f356d2164cbddf6badba10188a8', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: 'c5f764580f3623eeb9381e54769a891a48c04620', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.currentTheme, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event) }), h("kritzel-controls", { key: '2479b6979d5b2b6c55a873bd1d8468b5fd967f72', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'ec6ac72ba154abe0738259464f20cae9e7dbdd9e', class: "top-right-buttons" }, h("kritzel-settings", { key: 'f68f791d673b30331e55f358b9c71b3e2a9a8388', ref: el => (this.settingsRef = el), shortcuts: this.shortcuts, editorId: this.editorId, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: 'dfe5a051caccee504df4f347705303fa1f812556', ref: el => (this.exportRef = el), workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: '48983a14d3902cd238cf0d9ed302ed561a655a9a', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '589bdc895741a2d17f60c4b549d14fe8fff74c17', user: this.user }), shouldShowLoginButton && h("kritzel-button", { key: '50414a9d7ade623678c767ce63c49f5e99336bed', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in"), h("kritzel-more-menu", { key: 'db3069ee0b093acd238750df81c6f426139c9b87', items: this.moreMenuItems }), h("kritzel-share-dialog", { key: 'e16057838f00b2c3f239e794b4310bd2690d16e2', ref: el => (this.shareDialogRef = el), isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: 'a6d1fc06c983542c6af95e7bb4b2b2d522a03605', ref: el => (this.loginDialogRef = el), providers: this.loginConfig.providers, dialogTitle: this.loginConfig.title, subtitle: this.loginConfig.subtitle, onProviderLogin: this.handleProviderLogin })))));
     }
     static get is() { return "kritzel-editor"; }
     static get originalStyleUrls() {
@@ -1106,7 +1106,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "{\r\n    providers: [IndexedDBSyncProvider],\r\n  }"
+                "defaultValue": "{\r\n    providers: [IndexedDBSyncProvider]\r\n  }"
             },
             "loginConfig": {
                 "type": "unknown",