kritzel-stencil 0.3.12 → 0.3.14

package/dist/cjs/kritzel-active-users_42.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-CFnj_FXt.js');
-var schema_constants = require('./schema.constants-CzfoUWxF.js');
+var index = require('./index-Xav9JFHg.js');
+var schema_constants = require('./schema.constants-DJQTjcy7.js');
 var Y = require('yjs');
 require('y-indexeddb');
 require('y-websocket');
@@ -629,7 +629,7 @@ const KritzelColorPalette = class {
 };
 KritzelColorPalette.style = kritzelColorPaletteCss();
 
-const kritzelContextMenuCss = () => `:host{display:block}.menu-container{display:flex;flex-direction:column;gap:var(--kritzel-context-menu-item-spacing, 2px);background-color:var(--kritzel-context-menu-background-color, #ffffff);border-radius:var(--kritzel-context-menu-border-radius, 12px);box-shadow:var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));border:var(--kritzel-context-menu-border, 1px solid #ebebeb);padding:var(--kritzel-context-menu-padding, 4px);min-width:var(--kritzel-context-menu-min-width, 140px)}.menu-item-wrapper{position:relative}.menu-item{display:flex;align-items:center;gap:var(--kritzel-context-menu-item-gap, 8px);background:none;border:none;text-align:left;padding:var(--kritzel-context-menu-item-padding, 8px);border-radius:var(--kritzel-context-menu-item-border-radius, 12px);cursor:var(--kritzel-global-pointer-cursor, pointer);font-size:var(--kritzel-context-menu-item-font-size, 14px);color:var(--kritzel-context-menu-item-color, #333333);white-space:nowrap;-webkit-tap-highlight-color:transparent;width:100%}.menu-item:not(.disabled):hover,.menu-item.submenu-open{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item:not(.disabled):active{background-color:var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%))}.menu-item.disabled{color:var(--kritzel-context-menu-item-disabled-color, #aaaaaa)}.menu-item.has-children.disabled{cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-context-menu-item-color, #333333)}.menu-item kritzel-icon{opacity:0.8;flex-shrink:0}.menu-item.disabled kritzel-icon{opacity:0.4}.menu-item.has-children.disabled kritzel-icon{opacity:0.8}.label{flex-grow:1}.submenu-arrow{margin-left:auto;opacity:0.5}.menu-divider{height:1px;background-color:var(--kritzel-context-menu-divider-color, rgba(0, 0, 0, 0.1));margin:var(--kritzel-context-menu-divider-margin, 4px 8px)}.submenu-container{position:absolute;top:0;left:100%;margin-left:4px;display:flex;flex-direction:column;gap:var(--kritzel-context-menu-item-spacing, 2px);background-color:var(--kritzel-context-menu-background-color, #ffffff);border-radius:var(--kritzel-context-menu-border-radius, 12px);box-shadow:var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));border:var(--kritzel-context-menu-border, 1px solid #ebebeb);padding:var(--kritzel-context-menu-padding, 4px);min-width:120px}.submenu-container.position-left{left:auto;right:100%;margin-left:0;margin-right:4px}`;
+const kritzelContextMenuCss = () => `:host{display:block}.menu-container{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--kritzel-context-menu-item-spacing, 2px);background-color:var(--kritzel-context-menu-background-color, #ffffff);border-radius:var(--kritzel-context-menu-border-radius, 12px);box-shadow:var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));border:var(--kritzel-context-menu-border, 1px solid #ebebeb);padding:var(--kritzel-context-menu-padding, 4px);min-width:var(--kritzel-context-menu-min-width, 140px)}.menu-item-wrapper{position:relative}.menu-item{display:flex;align-items:center;gap:var(--kritzel-context-menu-item-gap, 8px);background:none;border:none;text-align:left;padding:var(--kritzel-context-menu-item-padding, 8px);border-radius:var(--kritzel-context-menu-item-border-radius, 12px);cursor:var(--kritzel-global-pointer-cursor, pointer);font-size:var(--kritzel-context-menu-item-font-size, 14px);color:var(--kritzel-context-menu-item-color, #333333);white-space:nowrap;-webkit-tap-highlight-color:transparent;width:100%;min-width:0}.menu-item:not(.disabled):hover,.menu-item.submenu-open{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item:not(.disabled):active{background-color:var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%))}.menu-item.disabled{color:var(--kritzel-context-menu-item-disabled-color, #aaaaaa)}.menu-item.has-children.disabled{cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-context-menu-item-color, #333333)}.menu-item kritzel-icon{opacity:0.8;flex-shrink:0}.menu-item.disabled kritzel-icon{opacity:0.4}.menu-item.has-children.disabled kritzel-icon{opacity:0.8}.label{flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.submenu-arrow{margin-left:auto;opacity:0.5}.menu-divider{height:1px;background-color:var(--kritzel-context-menu-divider-color, rgba(0, 0, 0, 0.1));margin:var(--kritzel-context-menu-divider-margin, 4px 8px)}.submenu-container{position:absolute;top:0;left:100%;z-index:2;margin-left:4px;display:flex;flex-direction:column;gap:var(--kritzel-context-menu-item-spacing, 2px);background-color:var(--kritzel-context-menu-background-color, #ffffff);border-radius:var(--kritzel-context-menu-border-radius, 12px);box-shadow:var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));border:var(--kritzel-context-menu-border, 1px solid #ebebeb);padding:var(--kritzel-context-menu-padding, 4px);min-width:120px}.submenu-container.position-left{left:auto;right:100%;margin-left:0;margin-right:4px}`;
 
 const VIEWPORT_PADDING = 8;
 const SUBMENU_DELAY = 150;
@@ -750,6 +750,11 @@ const KritzelContextMenu = class {
         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())) {
@@ -861,7 +866,8 @@ const KritzelContextMenu = class {
     }
     renderSubmenu(processedChildren, path) {
         const position = this.submenuPositions[path] === 'left' ? 'left' : 'right';
-        return (index.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 (index.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) {
@@ -879,67 +885,65 @@ KritzelContextMenu.style = kritzelContextMenuCss();
 
 class KritzelToolConfigHelper {
     static getToolConfig(tool) {
-        const toolConstructorName = tool?.constructor?.name;
-        if (tool instanceof schema_constants.KritzelSelectionTool || toolConstructorName === 'KritzelSelectionTool') {
-            return tool.getToolConfig();
-        }
-        if (tool instanceof schema_constants.KritzelBrushTool || toolConstructorName === 'KritzelBrushTool') {
-            return {
-                type: 'brush',
-                colorProperty: 'color',
-                sizeProperty: 'size',
-                opacityProperty: 'opacity',
-                paletteSource: 'palette',
-                sizesSource: 'sizes',
-                controls: [
-                    { type: 'stroke-size', propertyName: 'size' },
-                ],
-            };
-        }
-        if (tool instanceof schema_constants.KritzelLineTool || toolConstructorName === 'KritzelLineTool') {
-            return {
-                type: 'line',
-                colorProperty: 'color',
-                sizeProperty: 'size',
-                opacityProperty: 'opacity',
-                paletteSource: 'palette',
-                sizesSource: 'sizes',
-                controls: [
-                    { type: 'stroke-size', propertyName: 'size' },
-                    { type: 'line-endings', propertyName: 'arrows', additionalProps: {} },
-                ],
-            };
-        }
-        if (tool instanceof schema_constants.KritzelShapeTool || toolConstructorName === 'KritzelShapeTool') {
-            return {
-                type: 'shape',
-                colorProperty: 'strokeColor',
-                sizeProperty: 'strokeWidth',
-                opacityProperty: 'opacity',
-                paletteSource: 'palette',
-                sizesSource: 'sizes',
-                controls: [
-                    { type: 'stroke-size', propertyName: 'strokeWidth' },
-                    { type: 'shape-fill', propertyName: 'fillColor', additionalProps: {} },
-                ],
-            };
-        }
-        if (tool instanceof schema_constants.KritzelTextTool || toolConstructorName === 'KritzelTextTool') {
-            return {
-                type: 'text',
-                colorProperty: 'fontColor',
-                sizeProperty: 'fontSize',
-                opacityProperty: 'opacity',
-                paletteSource: 'palette',
-                sizesSource: 'sizes',
-                controls: [
-                    { type: 'font-size', propertyName: 'fontSize', additionalProps: {} },
-                    { type: 'font-family', propertyName: 'fontFamily' },
-                ],
-            };
+        switch (tool?.toolType) {
+            case 'selection':
+                return 'getToolConfig' in tool && typeof tool.getToolConfig === 'function'
+                    ? tool.getToolConfig()
+                    : null;
+            case 'brush':
+                return {
+                    type: 'brush',
+                    colorProperty: 'color',
+                    sizeProperty: 'size',
+                    opacityProperty: 'opacity',
+                    paletteSource: 'palette',
+                    sizesSource: 'sizes',
+                    controls: [
+                        { type: 'stroke-size', propertyName: 'size' },
+                    ],
+                };
+            case 'line':
+                return {
+                    type: 'line',
+                    colorProperty: 'color',
+                    sizeProperty: 'size',
+                    opacityProperty: 'opacity',
+                    paletteSource: 'palette',
+                    sizesSource: 'sizes',
+                    controls: [
+                        { type: 'stroke-size', propertyName: 'size' },
+                        { type: 'line-endings', propertyName: 'arrows', additionalProps: {} },
+                    ],
+                };
+            case 'shape':
+                return {
+                    type: 'shape',
+                    colorProperty: 'strokeColor',
+                    sizeProperty: 'strokeWidth',
+                    opacityProperty: 'opacity',
+                    paletteSource: 'palette',
+                    sizesSource: 'sizes',
+                    controls: [
+                        { type: 'stroke-size', propertyName: 'strokeWidth' },
+                        { type: 'shape-fill', propertyName: 'fillColor', additionalProps: {} },
+                    ],
+                };
+            case 'text':
+                return {
+                    type: 'text',
+                    colorProperty: 'fontColor',
+                    sizeProperty: 'fontSize',
+                    opacityProperty: 'opacity',
+                    paletteSource: 'palette',
+                    sizesSource: 'sizes',
+                    controls: [
+                        { type: 'font-size', propertyName: 'fontSize', additionalProps: {} },
+                        { type: 'font-family', propertyName: 'fontFamily' },
+                    ],
+                };
+            default:
+                return null;
         }
-        // Tool is not configurable (e.g., selection, eraser, image)
-        return null;
     }
 }
 
@@ -1898,7 +1902,7 @@ const KritzelDialog = class {
 };
 KritzelDialog.style = kritzelDialogCss();
 
-const kritzelDropdownCss = () => `:host{display:inline-flex;vertical-align:middle;width:100%;position:relative}.dropdown-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-dropdown-border-color, #ebebeb);border-radius:6px;overflow:visible;height:38px;width:100%;position:relative}.dropdown-wrapper:hover:not(:focus-within){border-color:var(--kritzel-dropdown-hover-border-color, #cccccc)}.dropdown-container{flex:1;height:100%;min-width:0}.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;height:100%;width:100%;box-sizing:border-box;border-radius:6px;border:none;background-color:var(--kritzel-dropdown-background, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;font-size:inherit;font-family:inherit;color:var(--kritzel-dropdown-text-color, #333333);-webkit-tap-highlight-color:transparent;text-align:left}.dropdown-trigger:focus-visible{outline:revert}.dropdown-trigger.has-suffix-border{border-right:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-right-radius:0;border-bottom-right-radius:0}.dropdown-trigger.has-prefix-border{border-left:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.dropdown-trigger-arrow{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;transition:transform 0.2s ease}.dropdown-trigger-arrow svg{width:100%;height:100%}.dropdown-trigger.is-open .dropdown-trigger-arrow{transform:rotate(180deg)}.dropdown-trigger.is-open.open-up .dropdown-trigger-arrow{transform:rotate(0deg)}.dropdown-menu{position:absolute;left:0;right:0;margin:0;padding:4px 0;list-style:none;background-color:var(--kritzel-dropdown-background, #ffffff);border:1px solid var(--kritzel-global-border-color, #ebebeb);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;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity 0.15s ease,     transform 0.15s ease,     visibility 0.15s;outline:none}.dropdown-menu.open-down{top:calc(100% + 4px);bottom:auto;transform:translateY(-8px)}.dropdown-menu.open-up{bottom:calc(100% + 4px);top:auto;transform:translateY(8px)}.dropdown-menu.is-open{opacity:1;visibility:inherit;transform:translateY(0)}.dropdown-menu.open-up{box-shadow:var(--kritzel-controls-box-shadow, 0 -4px 12px rgba(0, 0, 0, 0.15))}.dropdown-option{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-dropdown-text-color, #333333);transition:background-color 0.1s ease;-webkit-tap-highlight-color:transparent}.dropdown-option.is-focused{background-color:var(--kritzel-dropdown-hover-background-color, #f0f0f0)}.dropdown-option.is-selected{font-weight:600;background-color:var(--kritzel-dropdown-selected-background-color, #007bff1a)}.dropdown-option-check{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--kritzel-dropdown-accent-color, #007bff)}.dropdown-option-check svg{width:100%;height:100%}.dropdown-menu{scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}::slotted(*){height:100%;box-sizing:border-box}`;
+const kritzelDropdownCss = () => `:host{display:inline-flex;vertical-align:middle;width:100%;position:relative}.dropdown-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-dropdown-border-color, #ebebeb);border-radius:var(--kritzel-dropdown-border-radius, 6px);overflow:visible;height:38px;width:100%;position:relative}.dropdown-wrapper:hover:not(:focus-within){border-color:var(--kritzel-dropdown-hover-border-color, #cccccc)}.dropdown-container{flex:1;height:100%;min-width:0}.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;height:100%;width:100%;box-sizing:border-box;border-radius:var(--kritzel-dropdown-border-radius, 6px);border:none;background-color:var(--kritzel-dropdown-background, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;font-size:inherit;font-family:inherit;color:var(--kritzel-dropdown-text-color, #333333);-webkit-tap-highlight-color:transparent;text-align:left}.dropdown-trigger:focus-visible{outline:revert}.dropdown-trigger.has-suffix-border{border-right:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-right-radius:0;border-bottom-right-radius:0}.dropdown-trigger.has-prefix-border{border-left:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.dropdown-trigger-arrow{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;transition:transform 0.2s ease}.dropdown-trigger-arrow svg{width:100%;height:100%}.dropdown-trigger.is-open .dropdown-trigger-arrow{transform:rotate(180deg)}.dropdown-trigger.is-open.open-up .dropdown-trigger-arrow{transform:rotate(0deg)}.dropdown-menu{position:absolute;left:0;right:0;margin:0;padding:4px 0;list-style:none;background-color:var(--kritzel-dropdown-background, #ffffff);border:1px solid var(--kritzel-global-border-color, #ebebeb);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;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity 0.15s ease,     transform 0.15s ease,     visibility 0.15s;outline:none}.dropdown-menu.open-down{top:calc(100% + 4px);bottom:auto;transform:translateY(-8px)}.dropdown-menu.open-up{bottom:calc(100% + 4px);top:auto;transform:translateY(8px)}.dropdown-menu.is-open{opacity:1;visibility:inherit;transform:translateY(0)}.dropdown-menu.open-up{box-shadow:var(--kritzel-controls-box-shadow, 0 -4px 12px rgba(0, 0, 0, 0.15))}.dropdown-option{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-dropdown-text-color, #333333);transition:background-color 0.1s ease;-webkit-tap-highlight-color:transparent}.dropdown-option.is-focused{background-color:var(--kritzel-dropdown-hover-background-color, #f0f0f0)}.dropdown-option.is-selected{font-weight:600;background-color:var(--kritzel-dropdown-selected-background-color, #007bff1a)}.dropdown-option-check{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--kritzel-dropdown-accent-color, #007bff)}.dropdown-option-check svg{width:100%;height:100%}.dropdown-menu{scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}::slotted(*){height:100%;box-sizing:border-box}`;
 
 const KritzelDropdown = class {
     constructor(hostRef) {
@@ -2175,12 +2179,10 @@ const ABSOLUTE_SCALE_MAX = 1000;
 const ABSOLUTE_SCALE_MIN = 0.0001;
 
 /**
- * Default sync configuration - IndexedDB
+ * Default sync configuration - None
  */
 const DEFAULT_SYNC_CONFIG = {
-    providers: [
-        schema_constants.IndexedDBSyncProvider
-    ],
+    providers: [],
 };
 
 const kritzelEditorCss = () => `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;text-align:start;line-height:normal}kritzel-controls{position:absolute;left:0;right:0;margin-inline:auto;width:max-content;max-width:calc(100% - 16px);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}.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}.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}`;
@@ -2372,15 +2374,7 @@ const KritzelEditor = class {
     /** 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. */
@@ -2509,12 +2503,18 @@ const KritzelEditor = class {
     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);
     }
@@ -2524,6 +2524,12 @@ const KritzelEditor = class {
     async zoomTo(scale, worldX, worldY) {
         return this.engineRef.zoomTo(scale, worldX, worldY);
     }
+    async zoomIn(factor = 1.6, duration = 200) {
+        return this.engineRef.zoomIn(factor, duration);
+    }
+    async zoomOut(factor = 1.6, duration = 200) {
+        return this.engineRef.zoomOut(factor, duration);
+    }
     async getViewport() {
         return this.engineRef.getViewport();
     }
@@ -2609,14 +2615,14 @@ const KritzelEditor = class {
     async redo() {
         return this.engineRef.redo();
     }
-    async getScreenshot(format = 'png') {
-        return this.engineRef.getScreenshot(format);
+    async getScreenshot(format = 'png', options) {
+        return this.engineRef.getScreenshot(format, options);
     }
-    async exportViewportAsPng() {
-        return this.engineRef.exportViewportAsPng();
+    async exportViewportAsPng(options) {
+        return this.engineRef.exportViewportAsPng(options);
     }
-    async exportViewportAsSvg() {
-        return this.engineRef.exportViewportAsSvg();
+    async exportViewportAsSvg(options) {
+        return this.engineRef.exportViewportAsSvg(options);
     }
     async exportSelectedObjectsAsPng() {
         return this.engineRef.exportSelectedObjectsAsPng();
@@ -2968,31 +2974,31 @@ const KritzelEditor = class {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
-        return (index.h(index.Host, { key: '440621eb23598732c63d4be92ae16785d84b3d6f', style: {
+        return (index.h(index.Host, { key: 'ffacaea5d3df12a3a8b448d31db3c5949053156c', style: {
                 opacity: this.isEditorVisible ? '1' : '0',
                 visibility: this.isEditorVisible ? 'visible' : 'hidden',
                 transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out',
-            } }, index.h("div", { key: 'b20c930c8094f7ab9db8fdb09428cf34a2cab024', class: "top-left-buttons" }, index.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) }), index.h("kritzel-back-to-content", { key: 'a3cbb86082c2f0768b7457ec25740d27200e287b', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), index.h("kritzel-engine", { key: '82e611de33c40997943e1fd702f0b601fadbf591', ref: el => {
+            } }, index.h("div", { key: '669eafee25b4f84c39469738a1337c21ab03e388', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: 'd6feb4a71c3286830fbe53a533f283c8af9a0385', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-back-to-content", { key: '5bd0e6263d51119b197292b69879c1ae437f92fc', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), index.h("kritzel-engine", { key: '468f17137c51c90fd61c9179d13c449b1ac8feb9', 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) }), index.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) }), index.h("kritzel-controls", { key: '848c30b27fb916c8480b41745bd6ec844e0b23a2', 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) }), index.h("div", { key: '1259089ca70c634621f7e2db274868b12a3e5e8a', class: "top-right-buttons" }, index.h("kritzel-settings", { key: 'b38b01040714827a5d824694b481edb8094eafd8', ref: el => {
+            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: 'e998d60679c767d15617bd7ecde5ee77e781a92f', class: "top-right-buttons" }, index.h("kritzel-settings", { key: '43b9cdb2d10de789cc03d2a9ef5df870b8ca7bfe', 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) }), index.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) }), index.h("kritzel-export", { key: '74669624a1e5177125ef00e1667c880ce47cbce4', 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) }), index.h("kritzel-active-users", { key: '7d0b70c7347e7fda4e96a59b27b8fb6c2eb77f49', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: 'ed364648df937fb1e84d850953fee51f6e54e95e', user: this.user }), shouldShowLoginButton && (index.h("kritzel-button", { key: 'dd24afa0746a311ac4a27000281fef28bddf844a', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in")), index.h("kritzel-more-menu", { key: '713da1a5313809083470a8a23c0531e9e198c4bd', items: this.moreMenuItems, visible: this.isMoreMenuVisible }), index.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) }), index.h("kritzel-active-users", { key: '18d925f32d021ff6713accb22d0594d259d70f2e', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: 'bddd5c29c5f17cced47276c237c04cfdb711da38', user: this.user }), shouldShowLoginButton && (index.h("kritzel-button", { key: '4eb6c85459f59863d6e644ecf21c2295da71bafc', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in")), index.h("kritzel-more-menu", { key: 'a5a323ec248bebc7bc07898f344e0926fac8db17', items: this.moreMenuItems, visible: this.isMoreMenuVisible }), index.h("kritzel-share-dialog", { key: '8cb3ddad95d36f5b7ad59d8c4f057df93cb2bfe3', ref: el => {
                 if (el) {
                     this.shareDialogRef = el;
                 }
-            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: 'f5b59522082824bc236784a9083f1d425852d487', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: '35395d0faadcfeb021fba685aa46e180e47d2be2', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -20679,6 +20685,87 @@ class KritzelViewport {
             this.setViewport(centerWorldX, centerWorldY, scale);
         }
     }
+    /**
+     * Zooms in by a fixed step, centered on the current viewport center,
+     * with a smooth animation. The resulting scale is clamped to the allowed range.
+     * @param factor - Multiplicative zoom-in step
+     * @param duration - Animation duration in milliseconds
+     */
+    zoomIn(factor, duration) {
+        this.animateZoomAroundViewportCenter(factor, duration);
+    }
+    /**
+     * Zooms out by a fixed step, centered on the current viewport center,
+     * with a smooth animation. The resulting scale is clamped to the allowed range.
+     * @param factor - Multiplicative zoom-out step
+     * @param duration - Animation duration in milliseconds
+     */
+    zoomOut(factor, duration) {
+        this.animateZoomAroundViewportCenter(1 / factor, duration);
+    }
+    /**
+     * Smoothly zooms around the viewport center, keeping the center world point
+     * fixed for the entire animation. The translation is recomputed from the fixed
+     * center point on every frame (rather than interpolated independently), which
+     * guarantees the center never drifts and the viewport does not jump.
+     * The resulting scale is clamped to the allowed range and the translation is
+     * clamped to the viewport boundaries.
+     * @param scaleFactor - Multiplicative scale factor (>1 zooms in, <1 zooms out)
+     * @param duration - Animation duration in milliseconds
+     */
+    animateZoomAroundViewportCenter(scaleFactor, duration) {
+        this.cancelViewportAnimation();
+        const state = this._core.store.state;
+        const startScale = state.scale;
+        const effectiveMinScale = this.getEffectiveMinScale();
+        const targetScale = Math.min(state.scaleMax, Math.max(effectiveMinScale, startScale * scaleFactor));
+        // The world point currently under the viewport center stays fixed.
+        const centerScreenX = state.viewportWidth / 2;
+        const centerScreenY = state.viewportHeight / 2;
+        const centerWorldX = (centerScreenX - state.translateX) / startScale;
+        const centerWorldY = (centerScreenY - state.translateY) / startScale;
+        if (targetScale === startScale || duration <= 0) {
+            this.applyZoomAroundCenter(targetScale, centerScreenX, centerScreenY, centerWorldX, centerWorldY);
+            state.isScaling = true;
+            this._core.rerender();
+            this._debounceUpdate();
+            this._debounceEndScaling();
+            return;
+        }
+        const startTime = performance.now();
+        state.isScaling = true;
+        const animate = (currentTime) => {
+            const elapsed = currentTime - startTime;
+            const progress = Math.min(elapsed / duration, 1);
+            // easeInOutCubic for a smooth ramp in and out
+            const eased = progress < 0.5 ? 4 * progress * progress * progress : 1 - Math.pow(-2 * progress + 2, 3) / 2;
+            const frameScale = startScale + (targetScale - startScale) * eased;
+            this.applyZoomAroundCenter(frameScale, centerScreenX, centerScreenY, centerWorldX, centerWorldY);
+            this._core.rerender();
+            if (progress < 1) {
+                this._animationFrameId = requestAnimationFrame(animate);
+            }
+            else {
+                this._animationFrameId = null;
+                state.isScaling = false;
+                this._core.rerender();
+                this._debounceUpdate();
+            }
+        };
+        this._animationFrameId = requestAnimationFrame(animate);
+    }
+    /**
+     * Applies a single zoom step that keeps the given world point anchored to the
+     * given screen point at the specified scale, clamped to the viewport boundaries.
+     */
+    applyZoomAroundCenter(scale, screenX, screenY, worldX, worldY) {
+        const state = this._core.store.state;
+        state.scale = scale;
+        const clamped = this.clampTranslate(screenX - worldX * scale, screenY - worldY * scale);
+        state.translateX = clamped.translateX;
+        state.translateY = clamped.translateY;
+        state.hasViewportChanged = true;
+    }
     /**
      * Centers a given object in the viewport without changing the scale.
      * The object's center point will be positioned at the viewport center.
@@ -20935,22 +21022,21 @@ class KritzelViewport {
         return true;
     }
     /**
-     * Centers and fits ALL objects in the viewport, including objects not currently rendered.
-     * Calculates the combined bounding box of all objects and optionally animates the viewport to show them.
+     * Centers and fits the provided objects in the viewport.
+     * Calculates the combined bounding box of the provided objects and optionally animates the viewport to show them.
+     * @param objects - Objects to include in the fit operation.
      * @param animate - Whether to animate the viewport transition (default: true)
-     * @returns true if objects were found and viewport was adjusted, false if no objects exist
+     * @returns true if at least one object was provided and viewport was adjusted, false otherwise
      */
-    centerFitAllObjects(animate = true) {
-        const allObjects = this._core.store.allNonSelectionObjects;
-        if (allObjects.length === 0) {
+    centerFitObjects(objects, animate = true) {
+        if (objects.length === 0) {
             return false;
         }
-        // Calculate combined bounds of all objects
         let minX = Infinity;
         let minY = Infinity;
         let maxX = -Infinity;
         let maxY = -Infinity;
-        for (const obj of allObjects) {
+        for (const obj of objects) {
             const bounds = obj.rotatedBoundingBox;
             minX = Math.min(minX, bounds.x);
             minY = Math.min(minY, bounds.y);
@@ -20973,6 +21059,15 @@ class KritzelViewport {
         this.animateViewportTo(targetTranslateX, targetTranslateY, clampedScale, animate ? 150 : 0);
         return true;
     }
+    /**
+     * Centers and fits ALL objects in the viewport, including objects not currently rendered.
+     * Calculates the combined bounding box of all objects and optionally animates the viewport to show them.
+     * @param animate - Whether to animate the viewport transition (default: true)
+     * @returns true if objects were found and viewport was adjusted, false if no objects exist
+     */
+    centerFitAllObjects(animate = true) {
+        return this.centerFitObjects(this._core.store.allNonSelectionObjects, animate);
+    }
 }
 
 /** The amount of pixels to move an object when using arrow key nudging. */
@@ -26497,8 +26592,18 @@ const KritzelEngine = class {
     }
     /** 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) {
@@ -26975,6 +27080,9 @@ const KritzelEngine = class {
         object.scale = object.scale ?? this.core.store.state.scale;
         object.zIndex = this.core.store.currentZIndex;
         object.workspaceId = this.core.store.state.activeWorkspace.id;
+        if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelImage')) {
+            await object.prepareForInsert();
+        }
         // Handle KritzelText: recreate the editor now that _core is available
         // The editor's dispatchTransaction callback needs _core for persisting changes
         if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelText')) {
@@ -27059,6 +27167,12 @@ const KritzelEngine = class {
         if (objects.length === 0) {
             return [];
         }
+        for (const object of objects) {
+            object._core = this.core;
+            if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelImage')) {
+                await object.prepareForInsert();
+            }
+        }
         this.core.store.objects.transaction(() => {
             for (const object of objects) {
                 object.id = object.generateId();
@@ -27223,6 +27337,14 @@ const KritzelEngine = class {
         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.
@@ -27240,6 +27362,16 @@ const KritzelEngine = class {
     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.
@@ -27267,6 +27399,22 @@ const KritzelEngine = class {
     async zoomTo(scale, worldX, worldY) {
         this.viewport.zoomTo(scale, worldX, worldY);
     }
+    /**
+     * Zooms in by a fixed step, centered on the current viewport center, with a smooth animation.
+     * @param factor - Multiplicative zoom-in step.
+     * @param duration - Animation duration in milliseconds.
+     */
+    async zoomIn(factor, duration) {
+        this.viewport.zoomIn(factor, duration);
+    }
+    /**
+     * Zooms out by a fixed step, centered on the current viewport center, with a smooth animation.
+     * @param factor - Multiplicative zoom-out step.
+     * @param duration - Animation duration in milliseconds.
+     */
+    async zoomOut(factor, duration) {
+        this.viewport.zoomOut(factor, duration);
+    }
     /**
      * Returns the current viewport state including position, scale, and dimensions.
      * @returns The current viewport state.
@@ -27303,11 +27451,14 @@ const KritzelEngine = class {
     /**
      * Captures a screenshot of the current viewport as a data URL.
      * @param format - The image format: `'png'` (default) or `'svg'`.
+     * @param options - Optional screenshot settings.
+     * @param options.includeBackground - Whether to include the canvas background in the export. Defaults to `true`. Set to `false` for a transparent background.
      * @returns A data URL string of the captured image.
      */
-    async getScreenshot(format = 'png') {
+    async getScreenshot(format = 'png', options) {
         if (!this.host)
             return null;
+        const includeBackground = options?.includeBackground ?? true;
         // Save critical state before screenshot to restore after
         const savedState = {
             objects: this.core.store.objects,
@@ -27319,7 +27470,7 @@ const KritzelEngine = class {
             translateY: this.core.store.state.translateY,
             scale: this.core.store.state.scale,
         };
-        const options = {
+        const screenshotOptions = {
             filter: (node) => {
                 // Exclude the context menu, debug panel, and awareness cursors from the screenshot
                 if (node.tagName === 'KRITZEL-CONTEXT-MENU') {
@@ -27334,13 +27485,16 @@ const KritzelEngine = class {
                 return true;
             },
         };
+        if (!includeBackground) {
+            screenshotOptions.backgroundColor = 'transparent';
+        }
         let result;
         try {
             if (format === 'svg') {
-                result = await toSvg(this.host, options);
+                result = await toSvg(this.host, screenshotOptions);
             }
             else {
-                result = await toPng(this.host, options);
+                result = await toPng(this.host, screenshotOptions);
             }
         }
         finally {
@@ -27357,14 +27511,18 @@ const KritzelEngine = class {
         }
         return result;
     }
-    /** Exports the current viewport as a PNG file and triggers a browser download. */
-    async exportViewportAsPng() {
+    /**
+     * Exports the current viewport as a PNG file and triggers a browser download.
+     * @param options - Optional export settings.
+     * @param options.includeBackground - Whether to include the canvas background. Defaults to `true`.
+     */
+    async exportViewportAsPng(options) {
         try {
             const activeWorkspaceName = this.core.store.state?.activeWorkspace?.name || 'workspace';
             // timestamp format: YYYY-MM-DDTHH-mm-ss-sssZ, clearing colons/dots for safe filename
             const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
             const filename = `${activeWorkspaceName}-${timestamp}.png`;
-            const dataUrl = await this.getScreenshot('png');
+            const dataUrl = await this.getScreenshot('png', options);
             if (!dataUrl) {
                 console.error('Failed to export viewport as PNG: screenshot could not be generated');
                 return;
@@ -27378,14 +27536,18 @@ const KritzelEngine = class {
             console.error('Failed to export viewport as PNG:', error);
         }
     }
-    /** Exports the current viewport as an SVG file and triggers a browser download. */
-    async exportViewportAsSvg() {
+    /**
+     * Exports the current viewport as an SVG file and triggers a browser download.
+     * @param options - Optional export settings.
+     * @param options.includeBackground - Whether to include the canvas background. Defaults to `true`.
+     */
+    async exportViewportAsSvg(options) {
         try {
             const activeWorkspaceName = this.core.store.state?.activeWorkspace?.name || 'workspace';
             // timestamp format: YYYY-MM-DDTHH-mm-ss-sssZ, clearing colons/dots for safe filename
             const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
             const filename = `${activeWorkspaceName}-${timestamp}.svg`;
-            const dataUrl = await this.getScreenshot('svg');
+            const dataUrl = await this.getScreenshot('svg', options);
             if (!dataUrl) {
                 console.error('Failed to export viewport as SVG: screenshot could not be generated');
                 return;
@@ -28663,6 +28825,12 @@ const KritzelEngine = class {
         "user": [{
                 "onUserChange": 0
             }],
+        "globalContextMenuItems": [{
+                "onGlobalContextMenuItemsChange": 0
+            }],
+        "objectContextMenuItems": [{
+                "onObjectContextMenuItemsChange": 0
+            }],
         "scaleMax": [{
                 "validateScaleMax": 0
             }],
@@ -28706,7 +28874,7 @@ const KritzelEngine = class {
 };
 KritzelEngine.style = kritzelEngineCss();
 
-const kritzelExportCss = () => `:host{display:flex;flex-direction:column;min-height:0}.export-content{display:flex;flex-direction:column;gap:16px;padding:0;flex:1}.export-content kritzel-pill-tabs{align-self:center}.export-tab-content{display:flex;flex-direction:column;gap:16px;min-height:330px}.format-selection{display:flex;flex-direction:column;gap:6px}.format-selection label{font-size:14px;font-weight:500;color:var(--kritzel-global-text-primary, #333)}.export-primary-button{width:100%;padding:12px 24px;background-color:var(--kritzel-global-primary-color, #007AFF);color:var(--kritzel-global-primary-text-color, #fff);border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color 0.2s ease;-webkit-tap-highlight-color:transparent}.export-primary-button:hover{background-color:var(--kritzel-global-primary-hover-color, #0066d6)}.export-primary-button:focus-visible{outline:revert;outline-offset:revert}.preview-container{width:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;margin-bottom:8px}.preview-container img{max-width:100%;max-height:250px;object-fit:contain;box-shadow:0 4px 8px rgba(0, 0, 0, 0.15);border-radius:4px;border:1px solid var(--kritzel-global-border-color, #dbdbdb)}.export-content p{margin:0;color:var(--kritzel-global-text-secondary, #666)}@media (max-width: 576px){.export-tab-content{flex:1;min-height:0}}`;
+const kritzelExportCss = () => `:host{display:flex;flex-direction:column;min-height:0}.export-content{display:flex;flex-direction:column;gap:16px;padding:0;flex:1}.export-content kritzel-pill-tabs{align-self:center}.export-tab-content{display:flex;flex-direction:column;gap:16px;min-height:330px}.format-selection{display:flex;flex-direction:column;gap:6px}.format-selection label{font-size:14px;font-weight:500;color:var(--kritzel-global-text-primary, #333)}.export-primary-button{width:100%;padding:12px 24px;background-color:var(--kritzel-global-primary-color, #007AFF);color:var(--kritzel-global-primary-text-color, #fff);border:none;border-radius:var(--kritzel-button-border-radius, 8px);font-size:14px;font-weight:600;cursor:pointer;transition:background-color 0.2s ease;-webkit-tap-highlight-color:transparent}.export-primary-button:hover{background-color:var(--kritzel-global-primary-hover-color, #0066d6)}.export-primary-button:focus-visible{outline:revert;outline-offset:revert}.preview-container{width:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;margin-bottom:8px}.preview-container img{max-width:100%;max-height:250px;object-fit:contain;box-shadow:0 4px 8px rgba(0, 0, 0, 0.15);border-radius:4px;border:1px solid var(--kritzel-global-border-color, #dbdbdb)}.export-content p{margin:0;color:var(--kritzel-global-text-secondary, #666)}@media (max-width: 576px){.export-tab-content{flex:1;min-height:0}}`;
 
 const KritzelExport = class {
     constructor(hostRef) {
@@ -28902,7 +29070,7 @@ const KritzelIcon = class {
 };
 KritzelIcon.style = kritzelIconCss();
 
-const kritzelInputCss = () => `:host{display:block}.input-container{display:flex;flex-direction:column;gap:6px}.input-label{font-size:14px;font-weight:500;color:var(--kritzel-text-input-label-color, #333333)}.input-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-text-input-border-color, #ebebeb);border-radius:6px;overflow:hidden;background:var(--kritzel-text-input-background, #ffffff);transition:border-color 150ms ease}.input-wrapper:hover:not(:focus-within){border-color:var(--kritzel-text-input-hover-border-color, #cccccc)}.input-wrapper:focus-within{border-color:var(--kritzel-text-input-focus-border-color, #007AFF);border-width:2px}.text-input{flex:1;padding:10px 12px;border:none;outline:none;font-size:14px;font-family:inherit;background:transparent;color:var(--kritzel-text-input-text-color, #333333);box-sizing:border-box}.text-input::placeholder{color:var(--kritzel-text-input-placeholder-color, #999999)}.text-input::selection{background-color:var(--kritzel-text-input-selection-background, #007AFF);color:var(--kritzel-text-input-selection-color, #ffffff)}.text-input:disabled{cursor:not-allowed;opacity:0.6}.input-suffix{padding:10px 12px;background:var(--kritzel-text-input-suffix-background, #f5f5f5);color:var(--kritzel-text-input-suffix-color, #666666);font-size:14px;border-left:1px solid var(--kritzel-text-input-border-color, #ebebeb);flex-shrink:0}`;
+const kritzelInputCss = () => `:host{display:block}.input-container{display:flex;flex-direction:column;gap:6px}.input-label{font-size:14px;font-weight:500;color:var(--kritzel-text-input-label-color, #333333)}.input-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-text-input-border-color, #ebebeb);border-radius:var(--kritzel-text-input-border-radius, 6px);overflow:hidden;background:var(--kritzel-text-input-background, #ffffff);transition:border-color 150ms ease}.input-wrapper:hover:not(:focus-within){border-color:var(--kritzel-text-input-hover-border-color, #cccccc)}.input-wrapper:focus-within{border-color:var(--kritzel-text-input-focus-border-color, #007AFF);border-width:2px}.text-input{flex:1;padding:10px 12px;border:none;outline:none;font-size:14px;font-family:inherit;background:transparent;color:var(--kritzel-text-input-text-color, #333333);box-sizing:border-box}.text-input::placeholder{color:var(--kritzel-text-input-placeholder-color, #999999)}.text-input::selection{background-color:var(--kritzel-text-input-selection-background, #007AFF);color:var(--kritzel-text-input-selection-color, #ffffff)}.text-input:disabled{cursor:not-allowed;opacity:0.6}.input-suffix{padding:10px 12px;background:var(--kritzel-text-input-suffix-background, #f5f5f5);color:var(--kritzel-text-input-suffix-color, #666666);font-size:14px;border-left:1px solid var(--kritzel-text-input-border-color, #ebebeb);flex-shrink:0}`;
 
 const KritzelInput = class {
     constructor(hostRef) {
@@ -29450,7 +29618,7 @@ const KritzelMoreMenu = class {
 };
 KritzelMoreMenu.style = kritzelMoreMenuCss();
 
-const kritzelNumericInputCss = () => `:host{display:block}.input-container{display:flex;flex-direction:column;gap:6px}.input-label{font-size:14px;font-weight:500;color:var(--kritzel-numeric-input-label-color, #333333)}.input-wrapper{display:flex;position:relative}.numeric-input{flex:1;padding:8px 36px 8px 12px;border:1px solid var(--kritzel-numeric-input-border-color, #ebebeb);border-radius:6px;font-size:14px;color:var(--kritzel-numeric-input-text-color, #333333);background-color:var(--kritzel-numeric-input-input-background, #ffffff);outline:none;transition:border-color 150ms ease;box-sizing:border-box}.numeric-input::-webkit-outer-spin-button,.numeric-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.numeric-input[type='number']{-moz-appearance:textfield}.numeric-input::selection{background-color:var(--kritzel-numeric-input-selection-background, #007AFF);color:var(--kritzel-numeric-input-selection-color, #ffffff)}.numeric-input:hover{border-color:var(--kritzel-numeric-input-hover-border-color, #cccccc)}.numeric-input:focus{border-color:var(--kritzel-numeric-input-focus-border-color, #0066ff);border-width:2px;padding:7px 35px 7px 11px}.spinner-buttons{position:absolute;right:1px;top:1px;bottom:1px;display:flex;flex-direction:column;border-left:1px solid var(--kritzel-numeric-input-border-color, #ebebeb);border-radius:0 5px 5px 0;overflow:hidden}.spinner-button{flex:1;display:flex;align-items:center;justify-content:center;width:24px;padding:0;border:none;background-color:var(--kritzel-numeric-input-spinner-background, #f5f5f5);color:var(--kritzel-numeric-input-spinner-color, #666666);cursor:pointer;transition:background-color 150ms ease}.spinner-button:hover{background-color:var(--kritzel-numeric-input-spinner-hover-background, #ebebeb)}.spinner-button:active{background-color:var(--kritzel-numeric-input-spinner-active-background, #dddddd)}.spinner-up{border-bottom:1px solid var(--kritzel-numeric-input-border-color, #ebebeb)}.spinner-icon{width:10px;height:6px}`;
+const kritzelNumericInputCss = () => `:host{display:block}.input-container{display:flex;flex-direction:column;gap:6px}.input-label{font-size:14px;font-weight:500;color:var(--kritzel-numeric-input-label-color, #333333)}.input-wrapper{display:flex;position:relative}.numeric-input{flex:1;padding:8px 36px 8px 12px;border:1px solid var(--kritzel-numeric-input-border-color, #ebebeb);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);outline:none;transition:border-color 150ms ease;box-sizing:border-box}.numeric-input::-webkit-outer-spin-button,.numeric-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.numeric-input[type='number']{-moz-appearance:textfield}.numeric-input::selection{background-color:var(--kritzel-numeric-input-selection-background, #007AFF);color:var(--kritzel-numeric-input-selection-color, #ffffff)}.numeric-input:hover{border-color:var(--kritzel-numeric-input-hover-border-color, #cccccc)}.numeric-input:focus{border-color:var(--kritzel-numeric-input-focus-border-color, #0066ff);border-width:2px;padding:7px 35px 7px 11px}.spinner-buttons{position:absolute;right:1px;top:1px;bottom:1px;display:flex;flex-direction:column;border-left:1px solid var(--kritzel-numeric-input-border-color, #ebebeb);border-radius:0 var(--kritzel-numeric-input-spinner-border-radius, 5px) var(--kritzel-numeric-input-spinner-border-radius, 5px) 0;overflow:hidden}.spinner-button{flex:1;display:flex;align-items:center;justify-content:center;width:24px;padding:0;border:none;background-color:var(--kritzel-numeric-input-spinner-background, #f5f5f5);color:var(--kritzel-numeric-input-spinner-color, #666666);cursor:pointer;transition:background-color 150ms ease}.spinner-button:hover{background-color:var(--kritzel-numeric-input-spinner-hover-background, #ebebeb)}.spinner-button:active{background-color:var(--kritzel-numeric-input-spinner-active-background, #dddddd)}.spinner-up{border-bottom:1px solid var(--kritzel-numeric-input-border-color, #ebebeb)}.spinner-icon{width:10px;height:6px}`;
 
 const KritzelNumericInput = class {
     constructor(hostRef) {
@@ -29949,7 +30117,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.3.12';
+const KRITZEL_VERSION = '0.3.14';
 
 const kritzelSettingsCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}.shortcuts-list{display:flex;flex-direction:column;gap:24px}.shortcuts-category{display:flex;flex-direction:column;gap:8px}.shortcuts-category-title{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.shortcuts-group{display:flex;flex-direction:column;gap:4px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-item-bg, rgba(0, 0, 0, 0.02))}.shortcut-label{font-size:14px;color:var(--kritzel-settings-content-text-color, #666666)}.shortcut-key{font-family:monospace;font-size:12px;padding:2px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-key-bg, #f0f0f0);color:var(--kritzel-settings-shortcut-key-color, #333333);border:1px solid var(--kritzel-settings-shortcut-key-border, #ddd)}`;