kritzel-stencil 0.3.12 → 0.3.14

package/dist/collection/classes/core/viewport.class.js

@@ -395,6 +395,87 @@ export 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.
@@ -651,22 +732,21 @@ export 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);
@@ -689,4 +769,13 @@ export 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);
+    }
 }

package/dist/collection/classes/objects/image.class.js

@@ -328,6 +328,68 @@ export class KritzelImage extends KritzelBaseObject {
             this.migrateLegacyDataUrlIfNeeded();
         }
     }
+    /**
+     * Prepares image objects for insertion into the canvas while preserving
+     * the standard object-first flow (`new KritzelImage(...); addObject(image)`).
+     *
+     * Behavior:
+     * - If `assetId` is already set, no-op.
+     * - If `src` is set (URL or data URL), uploads bytes through the asset
+     *   resolver, fills `assetId`/`mimeType`, computes dimensions when needed,
+     *   and seeds `resolvedSrc` for immediate rendering.
+     */
+    async prepareForInsert() {
+        if (this.assetId || !this.src) {
+            return;
+        }
+        if (!this._core?.assetResolver) {
+            return;
+        }
+        const source = this.src;
+        const response = await fetch(source);
+        if (!response.ok) {
+            throw new Error(`Failed to load image source: ${source} (HTTP ${response.status})`);
+        }
+        const blob = await response.blob();
+        const mimeType = blob.type || 'image/png';
+        const { naturalWidth, naturalHeight } = await this.measureImageBlob(blob);
+        const asset = await this._core.assetResolver.put(blob, {
+            mimeType,
+            kind: 'image',
+            width: naturalWidth,
+            height: naturalHeight,
+        });
+        this.assetId = asset.id;
+        this.mimeType = asset.mimeType;
+        if (this.width <= 0 || this.height <= 0) {
+            const { scaledWidth, scaledHeight } = this.calculateScaledDimensions({
+                width: naturalWidth,
+                height: naturalHeight,
+            });
+            this.width = scaledWidth;
+            this.height = scaledHeight;
+        }
+        this.resolvedSrc = await this._core.assetResolver.resolve(asset.id);
+        this.loadState = 'ready';
+        this.src = '';
+    }
+    /**
+     * Measures intrinsic image dimensions from a Blob.
+     */
+    async measureImageBlob(blob) {
+        const objectUrl = URL.createObjectURL(blob);
+        try {
+            return await new Promise((resolve, reject) => {
+                const img = new Image();
+                img.onload = () => resolve({ naturalWidth: img.naturalWidth, naturalHeight: img.naturalHeight });
+                img.onerror = err => reject(err);
+                img.src = objectUrl;
+            });
+        }
+        finally {
+            URL.revokeObjectURL(objectUrl);
+        }
+    }
     /**
      * Overrides base mount to kick off asset resolution the first time
      * the image is attached to the DOM. Legacy images persisted with an

package/dist/collection/classes/objects/shape.class.js

@@ -68,6 +68,8 @@ export class KritzelShape extends KritzelBaseObject {
      */
     constructor(config) {
         super();
+        // Always create the editor so setContent() works immediately
+        this.editor = this.createEditor();
         if (config) {
             this.x = config.x ?? 0;
             this.y = config.y ?? 0;
@@ -118,7 +120,6 @@ export class KritzelShape extends KritzelBaseObject {
         object.scaleFactor = 1;
         object.scale = config?.scale ?? core.store.state.scale;
         object.zIndex = core.store.currentZIndex;
-        object.editor = object.createEditor();
         // Compute world-space translateX/Y from screen-space coordinates
         // This follows the same pattern as KritzelPath.updateDimensions()
         object.updateDimensions();

package/dist/collection/classes/tools/base-tool.class.js

@@ -6,6 +6,8 @@
 export class KritzelBaseTool {
     /** Class name identifier used for serialization/deserialization */
     __class__ = this.constructor.name;
+    /** Identifies the tool type for config resolution (survives minification and dual-package bundling) */
+    toolType = 'base';
     /** Human-readable name of the tool */
     name = 'base-tool';
     /** Reference to the Kritzel core instance for accessing store, viewport, and other core functionality */

package/dist/collection/classes/tools/brush-tool.class.js

@@ -9,6 +9,7 @@ import { DEFAULT_STROKE_SIZES } from "../../constants/stroke-size.constants";
  * Supports mouse, touch, and pen input with configurable color, size, and opacity.
  */
 export class KritzelBrushTool extends KritzelBaseTool {
+    toolType = 'brush';
     /** The color of the brush stroke (supports theme-aware light/dark colors) */
     color = DEFAULT_COLOR_PALETTE[0];
     /** The width of the brush stroke in pixels */

package/dist/collection/classes/tools/eraser-tool.class.js

@@ -6,6 +6,7 @@ import { KritzelBaseTool } from "./base-tool.class";
  * and deleted when the gesture completes. Supports mouse, touch, and pen input.
  */
 export class KritzelEraserTool extends KritzelBaseTool {
+    toolType = 'eraser';
     /** Timeout handle for delayed touch start activation to prevent accidental erasing */
     touchStartTimeout = null;
     /**

package/dist/collection/classes/tools/image-tool.class.js

@@ -15,6 +15,7 @@ import imageCompression from "browser-image-compression";
  *      the id to a URL via the asset resolver.
  */
 export class KritzelImageTool extends KritzelBaseTool {
+    toolType = 'image';
     /** Hidden file input element for image selection */
     fileInput = null;
     /** Maximum dimension (width or height) for image compression in pixels */

package/dist/collection/classes/tools/line-tool.class.js

@@ -11,6 +11,7 @@ import { DEFAULT_STROKE_SIZES } from "../../constants/stroke-size.constants";
  * Automatically switches to selection tool after line completion.
  */
 export class KritzelLineTool extends KritzelBaseTool {
+    toolType = 'line';
     /** The stroke color of the line (supports theme-aware light/dark colors) */
     color = DEFAULT_COLOR_PALETTE[0];
     /** The stroke width of the line in pixels */

package/dist/collection/classes/tools/selection-tool.class.js

@@ -22,6 +22,7 @@ import { DEFAULT_COLOR_PALETTE } from "../../constants/color-palette.constants";
  * to specialized handlers (selection, move, resize, rotation, hover, line handle).
  */
 export class KritzelSelectionTool extends KritzelBaseTool {
+    toolType = 'selection';
     /** Handler for selection box and object selection logic */
     selectionHandler;
     /** Handler for moving selected objects */

package/dist/collection/classes/tools/shape-tool.class.js

@@ -11,6 +11,7 @@ import { DEFAULT_STROKE_SIZES } from "../../constants/stroke-size.constants";
  * Automatically switches to selection tool after shape completion.
  */
 export class KritzelShapeTool extends KritzelBaseTool {
+    toolType = 'shape';
     /** The type of shape to create (rectangle, ellipse, etc.) */
     shapeType = ShapeType.Rectangle;
     /** The fill color of the shape (supports theme-aware light/dark colors) */

package/dist/collection/classes/tools/text-tool.class.js

@@ -10,6 +10,7 @@ import { DEFAULT_FONT_SIZES } from "../../constants/stroke-size.constants";
  * Supports configurable font family, size, color, and opacity.
  */
 export class KritzelTextTool extends KritzelBaseTool {
+    toolType = 'text';
     /** Backing field for {@link fontFamily}. */
     _fontFamily = 'Arial';
     /** Backing field for {@link fontSize}. */

package/dist/collection/collection-manifest.json

@@ -47,7 +47,7 @@
   "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.43.4",
+    "version": "4.43.5",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],

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);
     }
@@ -346,6 +344,12 @@ export class KritzelEditor {
     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();
     }
@@ -431,14 +435,14 @@ export class KritzelEditor {
     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();
@@ -790,31 +794,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: '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',
-            } }, 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: '669eafee25b4f84c39469738a1337c21ab03e388', class: "top-left-buttons" }, 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) }), h("kritzel-back-to-content", { key: '5bd0e6263d51119b197292b69879c1ae437f92fc', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), 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) }), 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: '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) }), 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: 'e998d60679c767d15617bd7ecde5ee77e781a92f', class: "top-right-buttons" }, 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) }), 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: '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) }), 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: '18d925f32d021ff6713accb22d0594d259d70f2e', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: 'bddd5c29c5f17cced47276c237c04cfdb711da38', user: this.user }), shouldShowLoginButton && (h("kritzel-button", { key: '4eb6c85459f59863d6e644ecf21c2295da71bafc', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in")), h("kritzel-more-menu", { key: 'a5a323ec248bebc7bc07898f344e0926fac8db17', items: this.moreMenuItems, visible: this.isMoreMenuVisible }), 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 && (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: '35395d0faadcfeb021fba685aa46e180e47d2be2', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -851,7 +855,7 @@ export class KritzelEditor {
                 "setter": false,
                 "reflect": false,
                 "attribute": "scale-max",
-                "defaultValue": "ABSOLUTE_SCALE_MAX"
+                "defaultValue": "1000"
             },
             "scaleMin": {
                 "type": "number",
@@ -871,7 +875,7 @@ export class KritzelEditor {
                 "setter": false,
                 "reflect": false,
                 "attribute": "scale-min",
-                "defaultValue": "ABSOLUTE_SCALE_MIN"
+                "defaultValue": "0.0001"
             },
             "lockDrawingScale": {
                 "type": "boolean",
@@ -1338,7 +1342,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "DEFAULT_SYNC_CONFIG"
+                "defaultValue": "{\n  providers: [],\n}"
             },
             "assetStorageConfig": {
                 "type": "unknown",
@@ -1363,7 +1367,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "DEFAULT_ASSET_STORAGE_CONFIG"
+                "defaultValue": "{\n  providers: [],\n}"
             },
             "cursorTarget": {
                 "type": "unknown",
@@ -1409,8 +1413,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 +2097,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 +2162,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>",
@@ -2215,6 +2276,56 @@ export class KritzelEditor {
                     "tags": []
                 }
             },
+            "zoomIn": {
+                "complexType": {
+                    "signature": "(factor?: number, duration?: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "factor",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "duration",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "zoomOut": {
+                "complexType": {
+                    "signature": "(factor?: number, duration?: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "factor",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "duration",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "getViewport": {
                 "complexType": {
                     "signature": "() => Promise<KritzelViewportState>",
@@ -2875,11 +2986,15 @@ export class KritzelEditor {
             },
             "getScreenshot": {
                 "complexType": {
-                    "signature": "(format?: \"png\" | \"svg\") => Promise<string | null>",
+                    "signature": "(format?: \"png\" | \"svg\", options?: { includeBackground?: boolean; }) => Promise<string | null>",
                     "parameters": [{
                             "name": "format",
                             "type": "\"svg\" | \"png\"",
                             "docs": ""
+                        }, {
+                            "name": "options",
+                            "type": "{ includeBackground?: boolean; }",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -2896,8 +3011,12 @@ export class KritzelEditor {
             },
             "exportViewportAsPng": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
+                    "signature": "(options?: { includeBackground?: boolean; }) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "{ includeBackground?: boolean; }",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",
@@ -2913,8 +3032,12 @@ export class KritzelEditor {
             },
             "exportViewportAsSvg": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
+                    "signature": "(options?: { includeBackground?: boolean; }) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "{ includeBackground?: boolean; }",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",