kritzel-stencil 0.3.12 → 0.3.13

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

@@ -194,15 +194,7 @@ export class KritzelEditor {
     /** The element to use as the target for the cursor. Defaults to the editor container if not set. */
     cursorTarget;
     /** Optional login configuration. When provided, a "Sign in" button is shown that opens a login dialog with the configured providers. */
-    loginConfig = {
-        providers: [
-            {
-                label: 'Sign in with Google',
-                icon: 'google',
-                name: 'Google',
-            },
-        ],
-    };
+    loginConfig;
     /** Whether the editor is in a loading state. When true, a loading overlay is displayed. */
     isLoading = false;
     /** Optional unique identifier for namespacing storage keys across multiple editor instances. */
@@ -331,12 +323,18 @@ export class KritzelEditor {
     async centerObjectInViewport(object) {
         return this.engineRef.centerObjectInViewport(object);
     }
+    async panToObject(object) {
+        return this.engineRef.panToObject(object);
+    }
     async backToContent() {
         return this.engineRef.backToContent();
     }
     async centerAllObjects(animate = true) {
         return this.engineRef.centerAllObjects(animate);
     }
+    async centerObjects(objects, animate = true) {
+        return this.engineRef.centerObjects(objects, animate);
+    }
     async setViewport(x, y, scale) {
         return this.engineRef.setViewport(x, y, scale);
     }
@@ -790,31 +788,31 @@ export class KritzelEditor {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
-        return (h(Host, { key: '440621eb23598732c63d4be92ae16785d84b3d6f', style: {
+        return (h(Host, { key: '673bfb4d2d5224c3c3a11bada8afb1c3b90aa03d', style: {
                 opacity: this.isEditorVisible ? '1' : '0',
                 visibility: this.isEditorVisible ? 'visible' : 'hidden',
                 transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out',
-            } }, h("div", { key: 'b20c930c8094f7ab9db8fdb09428cf34a2cab024', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'a6ff7e54fb3d45f4a3b1d009b12d2f6229d14d87', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: 'a3cbb86082c2f0768b7457ec25740d27200e287b', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: '82e611de33c40997943e1fd702f0b601fadbf591', ref: el => {
+            } }, h("div", { key: 'cee9075de7a44953b3d017c334b19151ab7bb926', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'a7a6c246dabe3ddbab3d807a9f0c275bc621363f', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: 'b5452a22f7fd434b8816bdaa117d457b2f1879f3', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: 'a08648ec91f678724171238735b1073ffb53ca73', ref: el => {
                 if (el) {
                     this.engineRef = el;
                 }
-            }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.theme, themes: this.themes, 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: 'eb48df395318bde3fc0bc48784510bf5139bc9e8', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
+            }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.theme, themes: this.themes, 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: 'a7b78a31bda3fe2fe1def6be339894b83ea3ee38', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
                 if (el) {
                     this.controlsRef = el;
                 }
-            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: '1259089ca70c634621f7e2db274868b12a3e5e8a', class: "top-right-buttons" }, h("kritzel-settings", { key: 'b38b01040714827a5d824694b481edb8094eafd8', ref: el => {
+            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: '0b3f4879c44864661a5bf5f126da3a869fa808f5', class: "top-right-buttons" }, h("kritzel-settings", { key: '7da7fb709f2e4a31a6df1f7382a91f4d78dc6e35', ref: el => {
                 if (el) {
                     this.settingsRef = el;
                 }
-            }, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], settings: this.currentSettingsConfig, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: 'a678999cac4f3618c44d1340b6905ec2f3061dd5', ref: el => {
+            }, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], settings: this.currentSettingsConfig, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: 'f362b0181231da30efc927cbebd818a9a64991b0', 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: '7d0b70c7347e7fda4e96a59b27b8fb6c2eb77f49', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: 'ed364648df937fb1e84d850953fee51f6e54e95e', user: this.user }), shouldShowLoginButton && (h("kritzel-button", { key: 'dd24afa0746a311ac4a27000281fef28bddf844a', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in")), h("kritzel-more-menu", { key: '713da1a5313809083470a8a23c0531e9e198c4bd', items: this.moreMenuItems, visible: this.isMoreMenuVisible }), h("kritzel-share-dialog", { key: '37f80fdb7b1087926b72ece7693f816c9f85f746', 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: '1cf065fed9b27ffb19a3695425c797a3bc29fa51', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '7d6e8e227f36164daed7303645bdd490b362b4d0', user: this.user }), shouldShowLoginButton && (h("kritzel-button", { key: '1dcf1f5ae547f4c2c5b7ec88b34bcad0a2a4da28', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in")), h("kritzel-more-menu", { key: 'cb80dea4bb9861b6d627399c9aad64075cb8944b', items: this.moreMenuItems, visible: this.isMoreMenuVisible }), h("kritzel-share-dialog", { key: 'd12bc96d7af23941e4e054dadfddcf6429de6208', ref: el => {
                 if (el) {
                     this.shareDialogRef = el;
                 }
-            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: 'f5b59522082824bc236784a9083f1d425852d487', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '6c29a13069cd74972e94bbc245f26375fa95f4cc', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -851,7 +849,7 @@ export class KritzelEditor {
                 "setter": false,
                 "reflect": false,
                 "attribute": "scale-max",
-                "defaultValue": "ABSOLUTE_SCALE_MAX"
+                "defaultValue": "1000"
             },
             "scaleMin": {
                 "type": "number",
@@ -871,7 +869,7 @@ export class KritzelEditor {
                 "setter": false,
                 "reflect": false,
                 "attribute": "scale-min",
-                "defaultValue": "ABSOLUTE_SCALE_MIN"
+                "defaultValue": "0.0001"
             },
             "lockDrawingScale": {
                 "type": "boolean",
@@ -1338,7 +1336,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "DEFAULT_SYNC_CONFIG"
+                "defaultValue": "{\n  providers: [],\n}"
             },
             "assetStorageConfig": {
                 "type": "unknown",
@@ -1363,7 +1361,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "DEFAULT_ASSET_STORAGE_CONFIG"
+                "defaultValue": "{\n  providers: [],\n}"
             },
             "cursorTarget": {
                 "type": "unknown",
@@ -1409,8 +1407,7 @@ export class KritzelEditor {
                     "text": "Optional login configuration. When provided, a \"Sign in\" button is shown that opens a login dialog with the configured providers."
                 },
                 "getter": false,
-                "setter": false,
-                "defaultValue": "{\n    providers: [\n      {\n        label: 'Sign in with Google',\n        icon: 'google',\n        name: 'Google',\n      },\n    ],\n  }"
+                "setter": false
             },
             "isLoading": {
                 "type": "boolean",
@@ -2094,6 +2091,33 @@ export class KritzelEditor {
                     "tags": []
                 }
             },
+            "panToObject": {
+                "complexType": {
+                    "signature": "(object: KritzelBaseObject) => Promise<void>",
+                    "parameters": [{
+                            "name": "object",
+                            "type": "KritzelBaseObject<HTMLElement | SVGElement>",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KritzelBaseObject": {
+                            "location": "import",
+                            "path": "../../../classes/objects/base-object.class",
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject",
+                            "referenceLocation": "KritzelBaseObject"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "backToContent": {
                 "complexType": {
                     "signature": "() => Promise<boolean>",
@@ -2132,6 +2156,37 @@ export class KritzelEditor {
                     "tags": []
                 }
             },
+            "centerObjects": {
+                "complexType": {
+                    "signature": "(objects: KritzelBaseObject[], animate?: boolean) => Promise<boolean>",
+                    "parameters": [{
+                            "name": "objects",
+                            "type": "KritzelBaseObject<HTMLElement | SVGElement>[]",
+                            "docs": ""
+                        }, {
+                            "name": "animate",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KritzelBaseObject": {
+                            "location": "import",
+                            "path": "../../../classes/objects/base-object.class",
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject",
+                            "referenceLocation": "KritzelBaseObject"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "setViewport": {
                 "complexType": {
                     "signature": "(x: number, y: number, scale: number) => Promise<void>",

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

@@ -93,8 +93,18 @@ export class KritzelEngine {
     }
     /** Context menu items shown when right-clicking the canvas background. */
     globalContextMenuItems;
+    onGlobalContextMenuItemsChange(newValue) {
+        if (this.contextMenuHandler) {
+            this.contextMenuHandler.globalContextMenuItems = newValue ?? [];
+        }
+    }
     /** Context menu items shown when right-clicking a selected object. */
     objectContextMenuItems;
+    onObjectContextMenuItemsChange(newValue) {
+        if (this.contextMenuHandler) {
+            this.contextMenuHandler.objectContextMenuItems = newValue ?? [];
+        }
+    }
     /** Maximum zoom scale allowed. Clamped to the absolute maximum defined by the engine. */
     scaleMax = ABSOLUTE_SCALE_MAX;
     validateScaleMax(newValue) {
@@ -819,6 +829,14 @@ export class KritzelEngine {
         this.core.rerender();
         return object;
     }
+    /**
+     * Pans the viewport to center on the given object without changing the zoom level.
+     * Unlike `centerObjectInViewport`, this moves the camera — not the object.
+     * @param object - The object whose center the viewport should pan to.
+     */
+    async panToObject(object) {
+        this.viewport.panTo(object.centerX, object.centerY);
+    }
     /**
      * Pans and zooms the viewport to fit the nearest content, with padding.
      * Useful when the user has panned away from all objects.
@@ -836,6 +854,16 @@ export class KritzelEngine {
     async centerAllObjects(animate = true) {
         return this.viewport.centerFitAllObjects(animate);
     }
+    /**
+     * Pans and zooms the viewport to fit the provided objects.
+     * Calculates the combined bounding box of the given objects and centers the viewport to show them.
+     * @param objects - The objects to center and fit in the viewport.
+     * @param animate - Whether to animate the viewport transition (default: true).
+     * @returns `true` if objects were provided and the viewport was adjusted, `false` otherwise.
+     */
+    async centerObjects(objects, animate = true) {
+        return this.viewport.centerFitObjects(objects, animate);
+    }
     /**
      * Sets the viewport to center on the given world coordinates at the specified scale.
      * @param x - X position in world coordinates to center on.
@@ -2442,7 +2470,7 @@ export class KritzelEngine {
                 "setter": false,
                 "reflect": false,
                 "attribute": "scale-max",
-                "defaultValue": "ABSOLUTE_SCALE_MAX"
+                "defaultValue": "1000"
             },
             "scaleMin": {
                 "type": "number",
@@ -2462,7 +2490,7 @@ export class KritzelEngine {
                 "setter": false,
                 "reflect": false,
                 "attribute": "scale-min",
-                "defaultValue": "ABSOLUTE_SCALE_MIN"
+                "defaultValue": "0.0001"
             },
             "cursorTarget": {
                 "type": "unknown",
@@ -4077,6 +4105,36 @@ export class KritzelEngine {
                         }]
                 }
             },
+            "panToObject": {
+                "complexType": {
+                    "signature": "(object: KritzelBaseObject) => Promise<void>",
+                    "parameters": [{
+                            "name": "object",
+                            "type": "KritzelBaseObject<HTMLElement | SVGElement>",
+                            "docs": "- The object whose center the viewport should pan to."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KritzelBaseObject": {
+                            "location": "import",
+                            "path": "../../../classes/objects/base-object.class",
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject",
+                            "referenceLocation": "KritzelBaseObject"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Pans the viewport to center on the given object without changing the zoom level.\nUnlike `centerObjectInViewport`, this moves the camera \u2014 not the object.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "object - The object whose center the viewport should pan to."
+                        }]
+                }
+            },
             "backToContent": {
                 "complexType": {
                     "signature": "() => Promise<boolean>",
@@ -4124,6 +4182,46 @@ export class KritzelEngine {
                         }]
                 }
             },
+            "centerObjects": {
+                "complexType": {
+                    "signature": "(objects: KritzelBaseObject[], animate?: boolean) => Promise<boolean>",
+                    "parameters": [{
+                            "name": "objects",
+                            "type": "KritzelBaseObject<HTMLElement | SVGElement>[]",
+                            "docs": "- The objects to center and fit in the viewport."
+                        }, {
+                            "name": "animate",
+                            "type": "boolean",
+                            "docs": "- Whether to animate the viewport transition (default: true)."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KritzelBaseObject": {
+                            "location": "import",
+                            "path": "../../../classes/objects/base-object.class",
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject",
+                            "referenceLocation": "KritzelBaseObject"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Pans and zooms the viewport to fit the provided objects.\nCalculates the combined bounding box of the given objects and centers the viewport to show them.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "objects - The objects to center and fit in the viewport."
+                        }, {
+                            "name": "param",
+                            "text": "animate - Whether to animate the viewport transition (default: true)."
+                        }, {
+                            "name": "returns",
+                            "text": "`true` if objects were provided and the viewport was adjusted, `false` otherwise."
+                        }]
+                }
+            },
             "setViewport": {
                 "complexType": {
                     "signature": "(x: number, y: number, scale: number) => Promise<void>",
@@ -4976,6 +5074,12 @@ export class KritzelEngine {
             }, {
                 "propName": "user",
                 "methodName": "onUserChange"
+            }, {
+                "propName": "globalContextMenuItems",
+                "methodName": "onGlobalContextMenuItemsChange"
+            }, {
+                "propName": "objectContextMenuItems",
+                "methodName": "onObjectContextMenuItemsChange"
             }, {
                 "propName": "scaleMax",
                 "methodName": "validateScaleMax"

package/dist/collection/components/shared/kritzel-dropdown/kritzel-dropdown.css

@@ -9,7 +9,7 @@
   display: flex;
   align-items: center;
   border: 1px solid var(--kritzel-dropdown-border-color, #ebebeb);
-  border-radius: 6px;
+  border-radius: var(--kritzel-dropdown-border-radius, 6px);
   overflow: visible;
   height: 38px;
   width: 100%;
@@ -35,7 +35,7 @@
   height: 100%;
   width: 100%;
   box-sizing: border-box;
-  border-radius: 6px;
+  border-radius: var(--kritzel-dropdown-border-radius, 6px);
   border: none;
   background-color: var(--kritzel-dropdown-background, #ffffff);
   cursor: var(--kritzel-global-pointer-cursor, pointer);
@@ -103,7 +103,7 @@
   list-style: none;
   background-color: var(--kritzel-dropdown-background, #ffffff);
   border: 1px solid var(--kritzel-global-border-color, #ebebeb);
-  border-radius: 6px;
+  border-radius: var(--kritzel-dropdown-menu-border-radius, var(--kritzel-dropdown-border-radius, 6px));
   box-shadow: var(--kritzel-controls-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
   z-index: 1000;
   max-height: 240px;

package/dist/collection/components/shared/kritzel-input/kritzel-input.css

@@ -18,7 +18,7 @@
   display: flex;
   align-items: center;
   border: 1px solid var(--kritzel-text-input-border-color, #ebebeb);
-  border-radius: 6px;
+  border-radius: var(--kritzel-text-input-border-radius, 6px);
   overflow: hidden;
   background: var(--kritzel-text-input-background, #ffffff);
   transition: border-color 150ms ease;

package/dist/collection/components/shared/kritzel-numeric-input/kritzel-numeric-input.css

@@ -23,7 +23,7 @@
   flex: 1;
   padding: 8px 36px 8px 12px;
   border: 1px solid var(--kritzel-numeric-input-border-color, #ebebeb);
-  border-radius: 6px;
+  border-radius: var(--kritzel-numeric-input-border-radius, 6px);
   font-size: 14px;
   color: var(--kritzel-numeric-input-text-color, #333333);
   background-color: var(--kritzel-numeric-input-input-background, #ffffff);
@@ -66,7 +66,7 @@
   display: flex;
   flex-direction: column;
   border-left: 1px solid var(--kritzel-numeric-input-border-color, #ebebeb);
-  border-radius: 0 5px 5px 0;
+  border-radius: 0 var(--kritzel-numeric-input-spinner-border-radius, 5px) var(--kritzel-numeric-input-spinner-border-radius, 5px) 0;
   overflow: hidden;
 }
 

package/dist/collection/components/ui/kritzel-context-menu/kritzel-context-menu.css

@@ -3,6 +3,8 @@
 }
 
 .menu-container {
+  position: relative;
+  z-index: 1;
   display: flex;
   flex-direction: column;
   gap: var(--kritzel-context-menu-item-spacing, 2px);
@@ -33,6 +35,7 @@
   white-space: nowrap;
   -webkit-tap-highlight-color: transparent;
   width: 100%;
+  min-width: 0;
 }
 
 .menu-item:not(.disabled):hover,
@@ -68,6 +71,9 @@
 
 .label {
   flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .submenu-arrow {
@@ -85,6 +91,7 @@
   position: absolute;
   top: 0;
   left: 100%;
+  z-index: 2;
   margin-left: 4px;
   display: flex;
   flex-direction: column;

package/dist/collection/components/ui/kritzel-context-menu/kritzel-context-menu.js

@@ -113,6 +113,11 @@ export class KritzelContextMenu {
         const idx = path.lastIndexOf('.');
         return idx === -1 ? '' : path.substring(0, idx);
     }
+    getMenuDepth(path) {
+        if (!path)
+            return 0;
+        return path.split('.').length;
+    }
     pruneStaleRefs() {
         const openPaths = new Set(this.getOpenSubmenuPaths());
         for (const key of Array.from(this.submenuRefs.keys())) {
@@ -224,7 +229,8 @@ export class KritzelContextMenu {
     }
     renderSubmenu(processedChildren, path) {
         const position = this.submenuPositions[path] === 'left' ? 'left' : 'right';
-        return (h("div", { class: { 'submenu-container': true, 'position-left': position === 'left' }, key: `submenu-${path}`, ref: el => el && this.submenuRefs.set(path, el), onMouseEnter: () => this.handleSubmenuMouseEnter(), onMouseLeave: () => this.handleSubmenuMouseLeave(path) }, this.renderItems(processedChildren, path)));
+        const zIndex = this.getMenuDepth(path) + 1;
+        return (h("div", { class: { 'submenu-container': true, 'position-left': position === 'left' }, key: `submenu-${path}`, style: { zIndex: String(zIndex) }, ref: el => el && this.submenuRefs.set(path, el), onMouseEnter: () => this.handleSubmenuMouseEnter(), onMouseLeave: () => this.handleSubmenuMouseLeave(path) }, this.renderItems(processedChildren, path)));
     }
     render() {
         if (!this.processedItems || this.processedItems.length === 0) {

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

@@ -41,7 +41,7 @@
   background-color: var(--kritzel-global-primary-color, #007AFF);
   color: var(--kritzel-global-primary-text-color, #fff);
   border: none;
-  border-radius: 8px;
+  border-radius: var(--kritzel-button-border-radius, 8px);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;

package/dist/collection/components/ui/kritzel-tool-config/kritzel-tool-config.js

@@ -237,7 +237,7 @@ export class KritzelToolConfig {
                 "mutable": true,
                 "complexType": {
                     "original": "ConfigurableTool",
-                    "resolved": "KritzelBrushTool | KritzelLineTool | KritzelSelectionTool | KritzelShapeTool | KritzelTextTool",
+                    "resolved": "KritzelBaseTool",
                     "references": {
                         "ConfigurableTool": {
                             "location": "import",
@@ -348,7 +348,7 @@ export class KritzelToolConfig {
                 },
                 "complexType": {
                     "original": "ConfigurableTool",
-                    "resolved": "KritzelBrushTool | KritzelLineTool | KritzelSelectionTool | KritzelShapeTool | KritzelTextTool",
+                    "resolved": "KritzelBaseTool",
                     "references": {
                         "ConfigurableTool": {
                             "location": "import",

package/dist/collection/configs/default-asset-storage.config.js

@@ -1,4 +1,3 @@
-import { IndexedDBAssetProvider } from "../classes/providers/assets/indexeddb-asset-provider.class";
 /**
  * Default asset storage configuration. Stores bytes in IndexedDB only,
  * which provides offline-friendly behavior out of the box. Applications
@@ -6,5 +5,5 @@ import { IndexedDBAssetProvider } from "../classes/providers/assets/indexeddb-as
  * (e.g. HttpAssetProvider) so images are available across devices.
  */
 export const DEFAULT_ASSET_STORAGE_CONFIG = {
-    providers: [IndexedDBAssetProvider],
+    providers: [],
 };

package/dist/collection/configs/default-sync.config.js

@@ -1,9 +1,6 @@
-import { IndexedDBSyncProvider } from "../classes/providers/sync/indexeddb-sync-provider.class";
 /**
- * Default sync configuration - IndexedDB
+ * Default sync configuration - None
  */
 export const DEFAULT_SYNC_CONFIG = {
-    providers: [
-        IndexedDBSyncProvider
-    ],
+    providers: [],
 };

package/dist/collection/constants/version.js

@@ -3,4 +3,4 @@
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-export const KRITZEL_VERSION = '0.3.12';
+export const KRITZEL_VERSION = '0.3.13';