kritzel-stencil 0.1.83 → 0.1.86

package/dist/cjs/kritzel-brush-style.cjs.entry.js

@@ -23,7 +23,7 @@ const KritzelBrushStyle = class {
             value: option.value,
             label: option.label,
         }));
-        return (index.h(index.Host, { key: '66ecc7850e816be6f0c38e2a53d96493e8141a7c' }, index.h("kritzel-dropdown", { key: '792caa0c4ff4c8ee3c5dfd404ba5456e6a4c16e4', options: dropdownOptions, value: this.type, onValueChanged: event => this.handleDropdownValueChange(event) }, index.h("button", { key: '7c82f747c86846c19635be47c797371300855f5e', class: "brush-style-button", slot: "prefix" }, index.h("kritzel-icon", { key: '59d4863c0660d0c6281031321e11518c57d8ae71', name: this.type, size: 16 })))));
+        return (index.h(index.Host, { key: '126d6ebbd4b90eef936ccb90905da373a5f9b3ac' }, index.h("kritzel-dropdown", { key: '22e8e49b74c43b410384e247d4b0c779b1ee7b2e', options: dropdownOptions, value: this.type, onValueChanged: event => this.handleDropdownValueChange(event) }, index.h("button", { key: '0b00fc066db7a2afb5ab101bc20badbb8c065d4a', class: "brush-style-button", slot: "prefix" }, index.h("kritzel-icon", { key: 'ed074981009c37c86a22cbc70656663060c22553', name: this.type, size: 16 })))));
     }
 };
 KritzelBrushStyle.style = kritzelBrushStyleCss();

package/dist/cjs/{workspace.migrations-K5oVASsb.js → workspace.migrations-Dj-FiYEO.js}

@@ -20158,12 +20158,12 @@ class KritzelCursorHelper {
         // We rotate around the center of the SVG canvas
         const center = size / 2;
         // We use a group to apply the rotation
-        const svg = `
-      <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
-        <g transform="rotate(${rotation} ${center} ${center})">
-          ${content}
-        </g>
-      </svg>
+        const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+        <g transform="rotate(${rotation} ${center} ${center})">
+          ${content}
+        </g>
+      </svg>
     `;
         // Encode the SVG for use in a data URI
         // We need to be careful with encoding to ensure it works across browsers

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

@@ -1,115 +1,115 @@
-:host {
-  display: block;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.awareness-cursor {
-  position: absolute;
-  top: 0;
-  left: 0;
-  transition: transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,
-              opacity 300ms ease;
-  will-change: transform;
-}
-
-.awareness-cursor.stale {
-  opacity: 0;
-}
-
-.awareness-cursor.tracking-object {
-  transition-duration: 0ms;
-}
-
-.cursor-arrow {
-  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
-}
-
-.cursor-label {
-  position: absolute;
-  left: 16px;
-  top: 16px;
-  white-space: nowrap;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  font-size: var(--kritzel-awareness-cursor-label-font-size, 12px);
-  color: var(--kritzel-awareness-cursor-label-text-color, #ffffff);
-  padding: 2px 8px;
-  border-radius: 4px;
-  line-height: 1.4;
-  font-weight: 500;
-  pointer-events: none;
-  user-select: none;
-}
-
-.edge-indicator {
-  position: absolute;
-  top: -12px;
-  left: -12px;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,
-              opacity 300ms ease;
-  will-change: transform;
-  pointer-events: auto;
-  user-select: none;
-  cursor: pointer;
-}
-
-.edge-indicator.stale {
-  opacity: 0;
-}
-
-.edge-indicator.tracking-object {
-  transition-duration: 0ms;
-}
-
-.edge-arrow {
-  position: absolute;
-  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
-  transition: opacity 300ms ease;
-}
-
-.edge-arrow.stale {
-  opacity: 0;
-}
-
-.edge-label {
-  position: absolute;
-  white-space: nowrap;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  font-size: var(--kritzel-awareness-cursor-label-font-size, 12px);
-  color: var(--kritzel-awareness-cursor-label-text-color, #ffffff);
-  padding: 2px 8px;
-  border-radius: 4px;
-  line-height: 1.4;
-  font-weight: 500;
-  pointer-events: none;
-  opacity: 0;
-  transform-origin: center;
-  transition: opacity 150ms ease;
-}
-
-.edge-indicator:hover .edge-label {
-  opacity: 1;
-}
-
-.remote-selection-box {
-  position: absolute;
-  top: 0;
-  left: 0;
-  border-width: 2px;
-  border-style: solid;
-  pointer-events: none;
-  will-change: transform, width, height;
-  transition: transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,
-              width var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,
-              height var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out;
-}
+:host {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.awareness-cursor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,
+              opacity 300ms ease;
+  will-change: transform;
+}
+
+.awareness-cursor.stale {
+  opacity: 0;
+}
+
+.awareness-cursor.tracking-object {
+  transition-duration: 0ms;
+}
+
+.cursor-arrow {
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
+}
+
+.cursor-label {
+  position: absolute;
+  left: 16px;
+  top: 16px;
+  white-space: nowrap;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: var(--kritzel-awareness-cursor-label-font-size, 12px);
+  color: var(--kritzel-awareness-cursor-label-text-color, #ffffff);
+  padding: 2px 8px;
+  border-radius: 4px;
+  line-height: 1.4;
+  font-weight: 500;
+  pointer-events: none;
+  user-select: none;
+}
+
+.edge-indicator {
+  position: absolute;
+  top: -12px;
+  left: -12px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,
+              opacity 300ms ease;
+  will-change: transform;
+  pointer-events: auto;
+  user-select: none;
+  cursor: pointer;
+}
+
+.edge-indicator.stale {
+  opacity: 0;
+}
+
+.edge-indicator.tracking-object {
+  transition-duration: 0ms;
+}
+
+.edge-arrow {
+  position: absolute;
+  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
+  transition: opacity 300ms ease;
+}
+
+.edge-arrow.stale {
+  opacity: 0;
+}
+
+.edge-label {
+  position: absolute;
+  white-space: nowrap;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: var(--kritzel-awareness-cursor-label-font-size, 12px);
+  color: var(--kritzel-awareness-cursor-label-text-color, #ffffff);
+  padding: 2px 8px;
+  border-radius: 4px;
+  line-height: 1.4;
+  font-weight: 500;
+  pointer-events: none;
+  opacity: 0;
+  transform-origin: center;
+  transition: opacity 150ms ease;
+}
+
+.edge-indicator:hover .edge-label {
+  opacity: 1;
+}
+
+.remote-selection-box {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-width: 2px;
+  border-style: solid;
+  pointer-events: none;
+  will-change: transform, width, height;
+  transition: transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,
+              width var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,
+              height var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out;
+}

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

@@ -185,7 +185,7 @@ export class KritzelAwarenessCursors {
         void _ty;
         void this.objectVersion;
         const cursors = Array.from(this.remoteCursors.values());
-        return (h(Host, { key: '1743084eadda932b5aaf89552f500b90e194a79f' }, cursors.map(remoteCursor => {
+        return (h(Host, { key: '7147977660886684c8030075206790de5597c342' }, cursors.map(remoteCursor => {
             if (!remoteCursor.cursor)
                 return null;
             // When a remote user is actively drawing, derive cursor position from

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

@@ -1,10 +1,10 @@
-:host {
-  display: block;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  pointer-events: none;
-  z-index: 9000;
-}
+:host {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+  z-index: 9000;
+}

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

@@ -63,7 +63,7 @@ export class KritzelCursorTrail {
         }
     }
     render() {
-        return (h(Host, { key: 'b0f5c795c4803e27a49d7f76f3fedea818967049' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: '6ff883be1aecfb302bc9ecb3b7562617d753d5ba', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
+        return (h(Host, { key: '2e40e68375f4b8b4531181d249c1638a01d9dac5' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: 'c015f003cc5f4c5c532803846fa5201edf4c211a', 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.css

@@ -1,72 +1,72 @@
-kritzel-editor{
-  display: flex;
-  margin: 0;
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  touch-action: manipulation;
-  user-select: none;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;           
-}
-
-kritzel-controls {
-  position: absolute;
-  bottom: var(--kritzel-editor-controls-bottom, 14px);
-  transition: transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out);
-}
-
-kritzel-controls.keyboard-open {
-  transform: var(--kritzel-editor-controls-transform, translateY(300%));
-}
-
-.top-left-buttons {
-  position: absolute;
-  top: var(--kritzel-editor-top-left-buttons-top, 14px);
-  left: var(--kritzel-editor-top-left-buttons-left, 14px);
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  z-index: 10000;
-}
-
-.top-right-buttons {
-  position: absolute;
-  top: var(--kritzel-editor-top-right-buttons-top, 14px);
-  right: var(--kritzel-editor-top-right-buttons-right, 14px);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  z-index: 10000;
-}
-
-.top-right-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 50px;
-  height: 50px;
-  padding: 0;
-  border: var(--kritzel-split-button-border, 1px solid #ebebeb);
-  border-radius: var(--kritzel-split-button-border-radius, 12px);
-  background-color: var(--kritzel-split-button-background-color, #ffffff);
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  box-shadow: var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
-  transition: background-color 150ms ease;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.top-right-button:hover {
-  background-color: #f5f5f5;
-}
-
-.top-right-button:active {
-  background-color: #ebebeb;
+kritzel-editor{
+  display: flex;
+  margin: 0;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  touch-action: manipulation;
+  user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;           
+}
+
+kritzel-controls {
+  position: absolute;
+  bottom: var(--kritzel-editor-controls-bottom, 14px);
+  transition: transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out);
+}
+
+kritzel-controls.keyboard-open {
+  transform: var(--kritzel-editor-controls-transform, translateY(300%));
+}
+
+.top-left-buttons {
+  position: absolute;
+  top: var(--kritzel-editor-top-left-buttons-top, 14px);
+  left: var(--kritzel-editor-top-left-buttons-left, 14px);
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  z-index: 10000;
+}
+
+.top-right-buttons {
+  position: absolute;
+  top: var(--kritzel-editor-top-right-buttons-top, 14px);
+  right: var(--kritzel-editor-top-right-buttons-right, 14px);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  z-index: 10000;
+}
+
+.top-right-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  height: 50px;
+  padding: 0;
+  border: var(--kritzel-split-button-border, 1px solid #ebebeb);
+  border-radius: var(--kritzel-split-button-border-radius, 12px);
+  background-color: var(--kritzel-split-button-background-color, #ffffff);
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  box-shadow: var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
+  transition: background-color 150ms ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.top-right-button:hover {
+  background-color: #f5f5f5;
+}
+
+.top-right-button:active {
+  background-color: #ebebeb;
 }

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

@@ -715,27 +715,27 @@ export class KritzelEditor {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = !!this.loginConfig && !isLoggedIn;
-        return (h(Host, { key: '1e3c220506d14f276ca246365c2bda79110c6c35' }, h("div", { key: '154b45141b995f749adb52a11dc3363ab2989475', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: '22519269ea7227a1a7a05d2f282bbcd2466edf5d', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: 'e89f0609dfd031cb040fd80a1f60ecb56d56734c', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: '0b3acdf827d48c9589fb8170b49a602beb273684', ref: el => {
+        return (h(Host, { key: 'd8a67f8c972b419312aa79fa94309a4c3c28e559' }, h("div", { key: '8d6014bb9f6782112ede03b004ec7f2e1e30cc61', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: '3aeb146fa84ff212d48eef81f9699d9050d95955', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: '341a7383c54d378e3a7ed484852751d08df73f3e', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: 'b081b6e393f7523f9c41f17bed67ab2f0ba307e0', ref: el => {
                 if (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, isLoading: this.isLoading, 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: '324ba00f982938abc7a3f4dc47368f3b9bad665e', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: 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, isLoading: this.isLoading, 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: 'e27061ec3d8b9b612cb6da6d4a7467361058f2ba', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => {
                 if (el) {
                     this.controlsRef = el;
                 }
-            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: '0c4662e92cbe90a958f8704e6db0375915d9c634', class: "top-right-buttons" }, h("kritzel-settings", { key: 'e0422c1a02bc895bafd4b777d4d593afcfdf335b', ref: el => {
+            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: '620b5c46a8a9bc33be69d91cb8e147358b7be117', class: "top-right-buttons" }, h("kritzel-settings", { key: 'ef39941ab724501ffdb8b5425b7882494e8b35ba', ref: el => {
                 if (el) {
                     this.settingsRef = el;
                 }
-            }, shortcuts: this.shortcuts, editorId: this.editorId, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: '72f59ec2eab76d753bb64475f199f0fa33e935d4', ref: el => {
+            }, shortcuts: this.shortcuts, editorId: this.editorId, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: '643c6d287068705a523e602e207a2bc562c58cd2', ref: el => {
                 if (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: 'c60411370947fc408b5e9d7adade3e28210b8d47', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '4783940d3d4f9c2a7e8156c0713f29cb8b043125', user: this.user }), shouldShowLoginButton && h("kritzel-button", { key: 'bdb727d5641f8cda3711856086e1b9aa8533a5a6', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in"), h("kritzel-more-menu", { key: '3afa57ea46636c92cc7232dfe22a27cace85766e', items: this.moreMenuItems }), h("kritzel-share-dialog", { key: '852f9980fa3b89ceb5b6d8bde1bdd5598d3dc6e4', ref: 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: '6cfdae4fe8f4c902a3b37d1d27c1d80d2780d8fd', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '145ff28fe73069f3e47f5bde42741ccb0d33d635', user: this.user }), shouldShowLoginButton && h("kritzel-button", { key: 'f30dc2bd31b8862cba7124090eb7e5a9a0621371', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in"), h("kritzel-more-menu", { key: 'd23ed0f6b4cc993e37d1838f277a95fc3ae0fe36', items: this.moreMenuItems }), h("kritzel-share-dialog", { key: '9b9eacdf41a5546abcaba336e0dca1185465ecb4', ref: el => {
                 if (el) {
                     this.shareDialogRef = el;
                 }
-            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: 'cdccbb7ef0b9932c0747545a18071f22e5683d8c', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: 'dd97a5b6e94433f550b016713d77d98e89bc23c3', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -937,7 +937,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "{\r\n    showViewportInfo: false,\r\n    showObjectInfo: false,\r\n    showSyncProviderInfo: true,\r\n    showMigrationInfo: true,\r\n  }"
+                "defaultValue": "{\n    showViewportInfo: false,\n    showObjectInfo: false,\n    showSyncProviderInfo: true,\n    showMigrationInfo: true,\n  }"
             },
             "user": {
                 "type": "unknown",
@@ -1010,7 +1010,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    {\r\n      name: 'selection',\r\n      type: 'tool',\r\n      isDefault: true,\r\n      tool: KritzelSelectionTool,\r\n      icon: 'cursor',\r\n    },\r\n    {\r\n      name: 'brush',\r\n      type: 'tool',\r\n      tool: KritzelBrushTool,\r\n      icon: 'pen',\r\n      config: DEFAULT_BRUSH_CONFIG,\r\n    },\r\n    {\r\n      name: 'eraser',\r\n      type: 'tool',\r\n      tool: KritzelEraserTool,\r\n      icon: 'eraser',\r\n    },\r\n    {\r\n      name: 'line',\r\n      type: 'tool',\r\n      tool: KritzelLineTool,\r\n      icon: 'arrow',\r\n      config: DEFAULT_LINE_TOOL_CONFIG,\r\n    },\r\n    {\r\n      name: 'shape',\r\n      type: 'tool',\r\n      tool: KritzelShapeTool,\r\n      icon: 'shape-rectangle',\r\n      config: DEFAULT_SHAPE_CONFIG,\r\n      subOptions: [\r\n        { id: 'rectangle', icon: 'shape-rectangle', label: 'Rectangle', value: ShapeType.Rectangle, toolProperty: 'shapeType' },\r\n        { id: 'ellipse', icon: 'shape-ellipse', label: 'Ellipse', value: ShapeType.Ellipse, toolProperty: 'shapeType' },\r\n        { id: 'triangle', icon: 'shape-triangle', label: 'Triangle', value: ShapeType.Triangle, toolProperty: 'shapeType' },\r\n      ],\r\n    },\r\n    {\r\n      name: 'text',\r\n      type: 'tool',\r\n      tool: KritzelTextTool,\r\n      icon: 'type',\r\n      config: DEFAULT_TEXT_CONFIG,\r\n    },\r\n    {\r\n      name: 'image',\r\n      type: 'tool',\r\n      tool: KritzelImageTool,\r\n      icon: 'image',\r\n    },\r\n    {\r\n      name: 'config',\r\n      type: 'config',\r\n    },\r\n  ]"
+                "defaultValue": "[\n    {\n      name: 'selection',\n      type: 'tool',\n      isDefault: true,\n      tool: KritzelSelectionTool,\n      icon: 'cursor',\n    },\n    {\n      name: 'brush',\n      type: 'tool',\n      tool: KritzelBrushTool,\n      icon: 'pen',\n      config: DEFAULT_BRUSH_CONFIG,\n    },\n    {\n      name: 'eraser',\n      type: 'tool',\n      tool: KritzelEraserTool,\n      icon: 'eraser',\n    },\n    {\n      name: 'line',\n      type: 'tool',\n      tool: KritzelLineTool,\n      icon: 'arrow',\n      config: DEFAULT_LINE_TOOL_CONFIG,\n    },\n    {\n      name: 'shape',\n      type: 'tool',\n      tool: KritzelShapeTool,\n      icon: 'shape-rectangle',\n      config: DEFAULT_SHAPE_CONFIG,\n      subOptions: [\n        { id: 'rectangle', icon: 'shape-rectangle', label: 'Rectangle', value: ShapeType.Rectangle, toolProperty: 'shapeType' },\n        { id: 'ellipse', icon: 'shape-ellipse', label: 'Ellipse', value: ShapeType.Ellipse, toolProperty: 'shapeType' },\n        { id: 'triangle', icon: 'shape-triangle', label: 'Triangle', value: ShapeType.Triangle, toolProperty: 'shapeType' },\n      ],\n    },\n    {\n      name: 'text',\n      type: 'tool',\n      tool: KritzelTextTool,\n      icon: 'type',\n      config: DEFAULT_TEXT_CONFIG,\n    },\n    {\n      name: 'image',\n      type: 'tool',\n      tool: KritzelImageTool,\n      icon: 'image',\n    },\n    {\n      name: 'config',\n      type: 'config',\n    },\n  ]"
             },
             "globalContextMenuItems": {
                 "type": "unknown",
@@ -1035,7 +1035,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    {\r\n      label: 'Paste',\r\n      icon: 'paste',\r\n      disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,\r\n      action: menu => this.engineRef.paste(menu.x, menu.y),\r\n    },\r\n    {\r\n      label: 'Select All',\r\n      icon: 'select-all',\r\n      disabled: async () => (await this.engineRef.getObjectsInViewport()).length === 0,\r\n      action: () => this.selectAllObjectsInViewport(),\r\n    },\r\n  ]"
+                "defaultValue": "[\n    {\n      label: 'Paste',\n      icon: 'paste',\n      disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,\n      action: menu => this.engineRef.paste(menu.x, menu.y),\n    },\n    {\n      label: 'Select All',\n      icon: 'select-all',\n      disabled: async () => (await this.engineRef.getObjectsInViewport()).length === 0,\n      action: () => this.selectAllObjectsInViewport(),\n    },\n  ]"
             },
             "objectContextMenuItems": {
                 "type": "unknown",
@@ -1060,7 +1060,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    { label: 'Copy', icon: 'copy', group: 'clipboard', action: () => this.engineRef.copy() },\r\n    {\r\n      label: 'Paste',\r\n      icon: 'paste',\r\n      group: 'clipboard',\r\n      disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,\r\n      action: (menu, _) => this.engineRef.paste(menu.x, menu.y),\r\n    },\r\n    {\r\n      label: 'Order',\r\n      icon: 'ordering',\r\n      group: 'other',\r\n      children: [\r\n        { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.engineRef.bringToFront() },\r\n        { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },\r\n        { label: 'Move Up', icon: 'arrow-up-from-dot', action: () => this.engineRef.bringForward() },\r\n        { label: 'Move Down', icon: 'arrow-down-from-dot', action: () => this.engineRef.sendBackward() },\r\n      ],\r\n    },\r\n    {\r\n      label: 'Align',\r\n      icon: 'align',\r\n      group: 'other',\r\n      disabled: async () => (await this.engineRef.getSelectedObjects()).length < 2,\r\n      children: [\r\n        { label: 'Align Left', icon: 'align-start-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.StartHorizontal) },\r\n        { label: 'Align Center Horizontally', icon: 'align-center-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterHorizontal) },\r\n        { label: 'Align Right', icon: 'align-end-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.EndHorizontal) },\r\n        { label: 'Align Top', icon: 'align-start-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.StartVertical) },\r\n        { label: 'Align Center Vertically', icon: 'align-center-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterVertical) },\r\n        { label: 'Align Bottom', icon: 'align-end-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.EndVertical) },\r\n      ],\r\n    },\r\n    {\r\n      label: 'Group',\r\n      icon: 'group',\r\n      group: 'other',\r\n      children: [\r\n        {\r\n          label: 'Group',\r\n          icon: 'group',\r\n          disabled: async () => (await this.engineRef.getSelectedObjects()).length < 2,\r\n          action: () => this.engineRef.group(),\r\n        },\r\n        {\r\n          label: 'Ungroup',\r\n          icon: 'ungroup',\r\n          disabled: async () => {\r\n            const selectedObjects = await this.engineRef.getSelectedObjects();\r\n            return !selectedObjects.some(obj => obj.__class__ === 'KritzelGroup');\r\n          },\r\n          action: () => this.engineRef.ungroup(),\r\n        },\r\n      ],\r\n    },\r\n    {\r\n      label: 'Export',\r\n      icon: 'download',\r\n      group: 'export',\r\n      children: [\r\n        { label: 'Export as SVG', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsSvg() },\r\n        { label: 'Export as PNG', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsPng() },\r\n      ],\r\n    },\r\n    { label: 'Delete', icon: 'delete', group: 'edit', action: () => this.engineRef.delete() },\r\n  ]"
+                "defaultValue": "[\n    { label: 'Copy', icon: 'copy', group: 'clipboard', action: () => this.engineRef.copy() },\n    {\n      label: 'Paste',\n      icon: 'paste',\n      group: 'clipboard',\n      disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,\n      action: (menu, _) => this.engineRef.paste(menu.x, menu.y),\n    },\n    {\n      label: 'Order',\n      icon: 'ordering',\n      group: 'other',\n      children: [\n        { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.engineRef.bringToFront() },\n        { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },\n        { label: 'Move Up', icon: 'arrow-up-from-dot', action: () => this.engineRef.bringForward() },\n        { label: 'Move Down', icon: 'arrow-down-from-dot', action: () => this.engineRef.sendBackward() },\n      ],\n    },\n    {\n      label: 'Align',\n      icon: 'align',\n      group: 'other',\n      disabled: async () => (await this.engineRef.getSelectedObjects()).length < 2,\n      children: [\n        { label: 'Align Left', icon: 'align-start-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.StartHorizontal) },\n        { label: 'Align Center Horizontally', icon: 'align-center-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterHorizontal) },\n        { label: 'Align Right', icon: 'align-end-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.EndHorizontal) },\n        { label: 'Align Top', icon: 'align-start-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.StartVertical) },\n        { label: 'Align Center Vertically', icon: 'align-center-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterVertical) },\n        { label: 'Align Bottom', icon: 'align-end-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.EndVertical) },\n      ],\n    },\n    {\n      label: 'Group',\n      icon: 'group',\n      group: 'other',\n      children: [\n        {\n          label: 'Group',\n          icon: 'group',\n          disabled: async () => (await this.engineRef.getSelectedObjects()).length < 2,\n          action: () => this.engineRef.group(),\n        },\n        {\n          label: 'Ungroup',\n          icon: 'ungroup',\n          disabled: async () => {\n            const selectedObjects = await this.engineRef.getSelectedObjects();\n            return !selectedObjects.some(obj => obj.__class__ === 'KritzelGroup');\n          },\n          action: () => this.engineRef.ungroup(),\n        },\n      ],\n    },\n    {\n      label: 'Export',\n      icon: 'download',\n      group: 'export',\n      children: [\n        { label: 'Export as SVG', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsSvg() },\n        { label: 'Export as PNG', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsPng() },\n      ],\n    },\n    { label: 'Delete', icon: 'delete', group: 'edit', action: () => this.engineRef.delete() },\n  ]"
             },
             "customSvgIcons": {
                 "type": "unknown",
@@ -1148,7 +1148,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "{\r\n    appStateId: 'kritzel-app-test',\r\n    providers: [HocuspocusSyncProvider, IndexedDBSyncProvider]\r\n  }"
+                "defaultValue": "{\n    appStateId: 'kritzel-app-test',\n    providers: [HocuspocusSyncProvider, IndexedDBSyncProvider]\n  }"
             },
             "loginConfig": {
                 "type": "unknown",
@@ -1173,7 +1173,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "{\r\n    providers: [\r\n      {\r\n        label: 'Sign in with Google',\r\n        icon: 'google',\r\n        name: 'Google',\r\n      }\r\n    ]\r\n  }"
+                "defaultValue": "{\n    providers: [\n      {\n        label: 'Sign in with Google',\n        icon: 'google',\n        name: 'Google',\n      }\n    ]\n  }"
             },
             "isLoading": {
                 "type": "boolean",