kritzel-stencil 0.1.69 → 0.1.71

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-Dc7LOVhs.js');
-var alignment_enum = require('./alignment.enum-D0b0c-AK.js');
+var workspace_migrations = require('./workspace.migrations-Cma2Vh5E.js');
 var Y = require('yjs');
 require('y-websocket');
 require('y-indexeddb');
@@ -249,7 +249,7 @@ const KritzelColorComponent = class {
             return '';
         if (typeof this.value === 'string')
             return this.value;
-        return alignment_enum.KritzelColorHelper.resolveThemeColor(this.value, this.theme);
+        return workspace_migrations.KritzelColorHelper.resolveThemeColor(this.value, this.theme);
     }
     isLightColor(hexColor) {
         if (!hexColor)
@@ -349,7 +349,7 @@ const KritzelColorPalette = class {
             return (index.h("div", { tabIndex: 0, class: {
                     'color-container': true,
                     'selected': this.areColorsEqual(this.selectedColor, color),
-                }, onClick: () => this.handleColorClick(color), onKeyDown: event => this.handleKeyDown(event, color) }, index.h("kritzel-color", { value: alignment_enum.KritzelColorHelper.applyOpacity(color, this.opacity, this.theme), theme: this.theme })));
+                }, onClick: () => this.handleColorClick(color), onKeyDown: event => this.handleKeyDown(event, color) }, index.h("kritzel-color", { value: workspace_migrations.KritzelColorHelper.applyOpacity(color, this.opacity, this.theme), theme: this.theme })));
         }))));
     }
 };
@@ -559,10 +559,10 @@ KritzelContextMenu.style = kritzelContextMenuCss();
 
 class KritzelToolConfigHelper {
     static getToolConfig(tool) {
-        if (tool instanceof alignment_enum.KritzelSelectionTool) {
+        if (tool instanceof workspace_migrations.KritzelSelectionTool) {
             return tool.getToolConfig();
         }
-        if (tool instanceof alignment_enum.KritzelBrushTool) {
+        if (tool instanceof workspace_migrations.KritzelBrushTool) {
             return {
                 type: 'brush',
                 colorProperty: 'color',
@@ -574,7 +574,7 @@ class KritzelToolConfigHelper {
                 ],
             };
         }
-        if (tool instanceof alignment_enum.KritzelLineTool) {
+        if (tool instanceof workspace_migrations.KritzelLineTool) {
             return {
                 type: 'line',
                 colorProperty: 'color',
@@ -587,7 +587,7 @@ class KritzelToolConfigHelper {
                 ],
             };
         }
-        if (tool instanceof alignment_enum.KritzelShapeTool) {
+        if (tool instanceof workspace_migrations.KritzelShapeTool) {
             return {
                 type: 'shape',
                 colorProperty: 'strokeColor',
@@ -600,7 +600,7 @@ class KritzelToolConfigHelper {
                 ],
             };
         }
-        if (tool instanceof alignment_enum.KritzelTextTool) {
+        if (tool instanceof workspace_migrations.KritzelTextTool) {
             return {
                 type: 'text',
                 colorProperty: 'fontColor',
@@ -633,7 +633,7 @@ const KritzelControls = class {
     theme;
     isControlsReady;
     firstConfig = null;
-    isTouchDevice = alignment_enum.KritzelDevicesHelper.isTouchDevice();
+    isTouchDevice = workspace_migrations.KritzelDevicesHelper.isTouchDevice();
     selectedSubOptions = new Map();
     canScrollLeft = false;
     canScrollRight = false;
@@ -654,7 +654,7 @@ const KritzelControls = class {
         this.closeTooltip();
     }
     handleSelectionChange() {
-        if (this.activeControl?.tool instanceof alignment_enum.KritzelSelectionTool) {
+        if (this.activeControl?.tool instanceof workspace_migrations.KritzelSelectionTool) {
             this.updateDisplayValues(this.activeControl.tool);
         }
     }
@@ -701,10 +701,10 @@ const KritzelControls = class {
         const opacity = tool[config.opacityProperty] ?? 1;
         const size = tool[config.sizeProperty];
         const displayValues = {
-            color: alignment_enum.KritzelColorHelper.applyOpacity(color, opacity, this.theme),
+            color: workspace_migrations.KritzelColorHelper.applyOpacity(color, opacity, this.theme),
             size,
         };
-        if (tool instanceof alignment_enum.KritzelTextTool) {
+        if (tool instanceof workspace_migrations.KritzelTextTool) {
             displayValues.fontFamily = tool.fontFamily;
         }
         // Check for equality implementation to prevent unnecessary re-renders
@@ -810,11 +810,11 @@ const KritzelControls = class {
         await this.handleControlClick(control);
     }
     render() {
-        const hasConfigUI = this.activeControl?.tool instanceof alignment_enum.KritzelBrushTool ||
-            this.activeControl?.tool instanceof alignment_enum.KritzelTextTool ||
-            this.activeControl?.tool instanceof alignment_enum.KritzelLineTool ||
-            this.activeControl?.tool instanceof alignment_enum.KritzelShapeTool ||
-            (this.activeControl?.tool instanceof alignment_enum.KritzelSelectionTool && this.activeControl.tool.hasSelection());
+        const hasConfigUI = this.activeControl?.tool instanceof workspace_migrations.KritzelBrushTool ||
+            this.activeControl?.tool instanceof workspace_migrations.KritzelTextTool ||
+            this.activeControl?.tool instanceof workspace_migrations.KritzelLineTool ||
+            this.activeControl?.tool instanceof workspace_migrations.KritzelShapeTool ||
+            (this.activeControl?.tool instanceof workspace_migrations.KritzelSelectionTool && this.activeControl.tool.hasSelection());
         // Separate tool controls from config control
         const toolControls = this.controls.filter(c => c.type === 'tool' || c.type === 'separator');
         const configControl = this.controls.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
@@ -866,7 +866,7 @@ const KritzelControls = class {
                 }
             }, style: {
                 cursor: 'pointer',
-            } }, this.activeControl.tool instanceof alignment_enum.KritzelTextTool && this.displayValues ? (index.h("div", { class: "font-container" }, index.h("kritzel-font", { fontFamily: this.displayValues.fontFamily, size: this.displayValues.size, color: this.displayValues.color }))) : this.displayValues && (index.h("div", { class: "color-container" }, index.h("kritzel-color", { value: this.displayValues.color, theme: this.theme, size: this.displayValues.size, style: {
+            } }, this.activeControl.tool instanceof workspace_migrations.KritzelTextTool && this.displayValues ? (index.h("div", { class: "font-container" }, index.h("kritzel-font", { fontFamily: this.displayValues.fontFamily, size: this.displayValues.size, color: this.displayValues.color }))) : this.displayValues && (index.h("div", { class: "color-container" }, index.h("kritzel-color", { value: this.displayValues.color, theme: this.theme, size: this.displayValues.size, style: {
                 borderRadius: '50%',
                 border: 'none',
             } })))))))));
@@ -949,7 +949,7 @@ const KritzelCursorTrail = class {
     isLeftButtonDown = false;
     handleMouseDown(ev) {
         if (ev.pointerType === 'mouse') {
-            if (ev.button === alignment_enum.KritzelMouseButton.Left) {
+            if (ev.button === workspace_migrations.KritzelMouseButton.Left) {
                 this.isLeftButtonDown = true;
                 this.cursorTrailPoints = [];
             }
@@ -976,7 +976,7 @@ const KritzelCursorTrail = class {
     }
     handlePointerUp(ev) {
         if (ev.pointerType === 'mouse') {
-            if (ev.button === alignment_enum.KritzelMouseButton.Left) {
+            if (ev.button === workspace_migrations.KritzelMouseButton.Left) {
                 this.isLeftButtonDown = false;
                 this.cursorTrailPoints = [];
             }
@@ -1580,14 +1580,14 @@ const KritzelDropdown = class {
 KritzelDropdown.style = kritzelDropdownCss();
 
 const DEFAULT_SHAPE_CONFIG = {
-    shapeType: alignment_enum.ShapeType.Rectangle,
+    shapeType: workspace_migrations.ShapeType.Rectangle,
     fillColor: { light: 'transparent', dark: 'transparent' },
-    strokeColor: alignment_enum.DEFAULT_COLOR_PALETTE[0],
+    strokeColor: workspace_migrations.DEFAULT_COLOR_PALETTE[0],
     strokeWidth: 4,
-    fontColor: alignment_enum.DEFAULT_COLOR_PALETTE[0],
+    fontColor: workspace_migrations.DEFAULT_COLOR_PALETTE[0],
     fontSize: 16,
     fontFamily: 'Arial',
-    palette: [...alignment_enum.DEFAULT_COLOR_PALETTE],
+    palette: [...workspace_migrations.DEFAULT_COLOR_PALETTE],
 };
 
 const ABSOLUTE_SCALE_MAX = 1000;
@@ -1621,6 +1621,12 @@ const KritzelEditor = class {
     viewportBoundaryTop = -Infinity;
     viewportBoundaryBottom = Infinity;
     wheelEnabled = true;
+    debugInfo = {
+        showViewportInfo: false,
+        showObjectInfo: false,
+        showSyncProviderInfo: true,
+        showMigrationInfo: true,
+    };
     user;
     activeUsers;
     controls = [
@@ -1628,52 +1634,52 @@ const KritzelEditor = class {
             name: 'selection',
             type: 'tool',
             isDefault: true,
-            tool: alignment_enum.KritzelSelectionTool,
+            tool: workspace_migrations.KritzelSelectionTool,
             icon: 'cursor',
         },
         {
             name: 'brush',
             type: 'tool',
-            tool: alignment_enum.KritzelBrushTool,
+            tool: workspace_migrations.KritzelBrushTool,
             icon: 'pen',
-            config: alignment_enum.DEFAULT_BRUSH_CONFIG,
+            config: workspace_migrations.DEFAULT_BRUSH_CONFIG,
         },
         {
             name: 'eraser',
             type: 'tool',
-            tool: alignment_enum.KritzelEraserTool,
+            tool: workspace_migrations.KritzelEraserTool,
             icon: 'eraser',
         },
         {
             name: 'line',
             type: 'tool',
-            tool: alignment_enum.KritzelLineTool,
+            tool: workspace_migrations.KritzelLineTool,
             icon: 'arrow',
-            config: alignment_enum.DEFAULT_LINE_TOOL_CONFIG,
+            config: workspace_migrations.DEFAULT_LINE_TOOL_CONFIG,
         },
         {
             name: 'shape',
             type: 'tool',
-            tool: alignment_enum.KritzelShapeTool,
+            tool: workspace_migrations.KritzelShapeTool,
             icon: 'shape-rectangle',
             config: DEFAULT_SHAPE_CONFIG,
             subOptions: [
-                { id: 'rectangle', icon: 'shape-rectangle', label: 'Rectangle', value: alignment_enum.ShapeType.Rectangle, toolProperty: 'shapeType' },
-                { id: 'ellipse', icon: 'shape-ellipse', label: 'Ellipse', value: alignment_enum.ShapeType.Ellipse, toolProperty: 'shapeType' },
-                { id: 'triangle', icon: 'shape-triangle', label: 'Triangle', value: alignment_enum.ShapeType.Triangle, toolProperty: 'shapeType' },
+                { id: 'rectangle', icon: 'shape-rectangle', label: 'Rectangle', value: workspace_migrations.ShapeType.Rectangle, toolProperty: 'shapeType' },
+                { id: 'ellipse', icon: 'shape-ellipse', label: 'Ellipse', value: workspace_migrations.ShapeType.Ellipse, toolProperty: 'shapeType' },
+                { id: 'triangle', icon: 'shape-triangle', label: 'Triangle', value: workspace_migrations.ShapeType.Triangle, toolProperty: 'shapeType' },
             ],
         },
         {
             name: 'text',
             type: 'tool',
-            tool: alignment_enum.KritzelTextTool,
+            tool: workspace_migrations.KritzelTextTool,
             icon: 'type',
-            config: alignment_enum.DEFAULT_TEXT_CONFIG,
+            config: workspace_migrations.DEFAULT_TEXT_CONFIG,
         },
         {
             name: 'image',
             type: 'tool',
-            tool: alignment_enum.KritzelImageTool,
+            tool: workspace_migrations.KritzelImageTool,
             icon: 'image',
         },
         {
@@ -1721,12 +1727,12 @@ const KritzelEditor = class {
             group: 'other',
             disabled: async () => (await this.engineRef.getSelectedObjects()).length < 2,
             children: [
-                { label: 'Align Left', icon: 'align-start-vertical', action: () => this.engineRef.alignObjects(alignment_enum.KritzelAlignment.StartHorizontal) },
-                { label: 'Align Center Horizontally', icon: 'align-center-horizontal', action: () => this.engineRef.alignObjects(alignment_enum.KritzelAlignment.CenterHorizontal) },
-                { label: 'Align Right', icon: 'align-end-vertical', action: () => this.engineRef.alignObjects(alignment_enum.KritzelAlignment.EndHorizontal) },
-                { label: 'Align Top', icon: 'align-start-horizontal', action: () => this.engineRef.alignObjects(alignment_enum.KritzelAlignment.StartVertical) },
-                { label: 'Align Center Vertically', icon: 'align-center-vertical', action: () => this.engineRef.alignObjects(alignment_enum.KritzelAlignment.CenterVertical) },
-                { label: 'Align Bottom', icon: 'align-end-horizontal', action: () => this.engineRef.alignObjects(alignment_enum.KritzelAlignment.EndVertical) },
+                { label: 'Align Left', icon: 'align-start-vertical', action: () => this.engineRef.alignObjects(workspace_migrations.KritzelAlignment.StartHorizontal) },
+                { label: 'Align Center Horizontally', icon: 'align-center-horizontal', action: () => this.engineRef.alignObjects(workspace_migrations.KritzelAlignment.CenterHorizontal) },
+                { label: 'Align Right', icon: 'align-end-vertical', action: () => this.engineRef.alignObjects(workspace_migrations.KritzelAlignment.EndHorizontal) },
+                { label: 'Align Top', icon: 'align-start-horizontal', action: () => this.engineRef.alignObjects(workspace_migrations.KritzelAlignment.StartVertical) },
+                { label: 'Align Center Vertically', icon: 'align-center-vertical', action: () => this.engineRef.alignObjects(workspace_migrations.KritzelAlignment.CenterVertical) },
+                { label: 'Align Bottom', icon: 'align-end-horizontal', action: () => this.engineRef.alignObjects(workspace_migrations.KritzelAlignment.EndVertical) },
             ],
         },
         {
@@ -1766,7 +1772,7 @@ const KritzelEditor = class {
     isControlsVisible = true;
     isUtilityPanelVisible = true;
     syncConfig = {
-        providers: [alignment_enum.IndexedDBSyncProvider],
+        providers: [workspace_migrations.IndexedDBSyncProvider],
     };
     /** Optional login configuration. When provided, a "Sign in" button is shown that opens a login dialog with the configured providers. */
     loginConfig;
@@ -2116,6 +2122,7 @@ const KritzelEditor = class {
         this.viewportBoundaryRight = event.detail.viewportBoundaryRight ?? Infinity;
         this.viewportBoundaryTop = event.detail.viewportBoundaryTop ?? -Infinity;
         this.viewportBoundaryBottom = event.detail.viewportBoundaryBottom ?? Infinity;
+        this.debugInfo = event.detail.debugInfo;
         this.themeChange.emit(event.detail.theme);
     }
     get moreMenuItems() {
@@ -2223,6 +2230,9 @@ const KritzelEditor = class {
                 if (typeof parsed.viewportBoundaryBottom === 'number') {
                     this.viewportBoundaryBottom = parsed.viewportBoundaryBottom;
                 }
+                if (parsed.debugInfo) {
+                    this.debugInfo = { ...this.debugInfo, ...parsed.debugInfo };
+                }
             }
             catch {
                 // Invalid JSON, use prop defaults
@@ -2233,20 +2243,20 @@ const KritzelEditor = class {
         this.shortcuts = await this.engineRef.getDisplayableShortcuts();
     }
     getContentObjects(objects) {
-        return objects.filter(obj => !(obj instanceof alignment_enum.KritzelSelectionGroup) && !(obj instanceof alignment_enum.KritzelSelectionBox));
+        return objects.filter(obj => !(obj instanceof workspace_migrations.KritzelSelectionGroup) && !(obj instanceof workspace_migrations.KritzelSelectionBox));
     }
     registerCustomSvgIcons() {
         for (const [name, svg] of Object.entries(this.customSvgIcons)) {
-            alignment_enum.KritzelIconRegistry.register(name, svg);
+            workspace_migrations.KritzelIconRegistry.register(name, svg);
         }
     }
     listenForMobileKeyboard() {
-        alignment_enum.KritzelKeyboardHelper.onKeyboardVisibleChanged(isOpen => {
+        workspace_migrations.KritzelKeyboardHelper.onKeyboardVisibleChanged(isOpen => {
             this.isVirtualKeyboardOpen = isOpen;
         });
     }
     setOsSpecificCssVariables() {
-        const os = alignment_enum.KritzelDevicesHelper.detectOS();
+        const os = workspace_migrations.KritzelDevicesHelper.detectOS();
         switch (os) {
             case 'iOS':
                 // iOS specific adjustments
@@ -2278,7 +2288,7 @@ const KritzelEditor = class {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = !!this.loginConfig && !isLoggedIn;
-        return (index.h(index.Host, { key: 'ac7aa83139228074f31fe5dc21e9ae87a3ac69dd' }, index.h("div", { key: '41c4d85409a2d119437497d966a8e381f6760fc8', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: '76feeb04f3f2ba5c1786c16462cb1b35b4ae31d2', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-back-to-content", { key: '2763d5bfff7d7380817e09ee893434e45762cf97', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), index.h("kritzel-engine", { key: 'b4ac1436bdead364e0c979d9b2c9425e0d1d716f', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.currentTheme, 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: 'f220efad958bfaefa5e8b1ce564233eee2381ec1', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: '3a70ba67e3866fc32c1be871407b187d3d0eb9b2', class: "top-right-buttons" }, index.h("kritzel-settings", { key: 'b92d2932a768c1bb2120ed02e76632db7b5b302c', ref: el => (this.settingsRef = el), shortcuts: this.shortcuts, editorId: this.editorId, onSettingsChange: event => this.handleSettingsChange(event) }), index.h("kritzel-export", { key: '48d7221954707a7bb6e8d657a5037de422784ff7', ref: el => (this.exportRef = el), workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), index.h("kritzel-active-users", { key: '5dff24dab886d9da046ddb1b6476869d7ef96c87', users: this.activeUsers }), shouldShowCurrentUser && (index.h("kritzel-current-user", { key: '41a3b802c8eb7195744e1beb878a6a124f0f32e9', user: this.user })), shouldShowLoginButton && index.h("kritzel-button", { key: '7db44575d89d2b22cf69e15055be74389c6bb615', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in"), index.h("kritzel-more-menu", { key: '8d25b93f9b0e5f4587f65ee2a384e0915b095db9', items: this.moreMenuItems }), index.h("kritzel-share-dialog", { key: '056f2cbc0e41838b22feaa4c819fe9eb580b0b9b', ref: el => (this.shareDialogRef = el), isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: 'cdcd95c3d961499182ddc188756c70c32fbaef55', ref: el => (this.loginDialogRef = el), providers: this.loginConfig.providers, dialogTitle: this.loginConfig.title, subtitle: this.loginConfig.subtitle, onProviderLogin: this.handleProviderLogin })))));
+        return (index.h(index.Host, { key: '0339b3ea217d55c8192efa53ad8059ff2ffdd578' }, index.h("div", { key: '2149a3f5e251a398e0c7815ebb88d251cbc83d9d', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: '727f465560d3a8aa49ebdfba9251df26b748669a', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-back-to-content", { key: '269748350eef82b390893ed5b8b6516eef85fa1f', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), index.h("kritzel-engine", { key: 'c8248639b41f4500718d745b55c988b9f63fde27', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.currentTheme, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event) }), index.h("kritzel-controls", { key: 'fc1be924d9807aba8aad966bf8ea14785064ed45', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: '12800aa2e7833e838b91d194274344a904d5410b', class: "top-right-buttons" }, index.h("kritzel-settings", { key: 'cb540f195a5a56159999c7d33fccbf94a9d25764', ref: el => (this.settingsRef = el), shortcuts: this.shortcuts, editorId: this.editorId, onSettingsChange: event => this.handleSettingsChange(event) }), index.h("kritzel-export", { key: 'fd17ac3acbf352ee2e1ca797bd72b2d9a4183323', ref: el => (this.exportRef = el), workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), index.h("kritzel-active-users", { key: '74879be875fe6db127f4864f8aad08f39901e053', users: this.activeUsers }), shouldShowCurrentUser && (index.h("kritzel-current-user", { key: 'a4bc322c69f0784c39c043f0089853babbdd1584', user: this.user })), shouldShowLoginButton && index.h("kritzel-button", { key: 'fb89dd330087ee2dd7288285071ee28a97bcec8e', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in"), index.h("kritzel-more-menu", { key: 'bba9421fab99b82143880478329973f33bfb3039', items: this.moreMenuItems }), index.h("kritzel-share-dialog", { key: 'd03c43ce77c16fd3a5cce7aa134d5ef73361d8b3', ref: el => (this.shareDialogRef = el), isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: 'ced23497db2b7abea1f2121085a21ed9208ecba9', ref: el => (this.loginDialogRef = el), providers: this.loginConfig.providers, dialogTitle: this.loginConfig.title, subtitle: this.loginConfig.subtitle, onProviderLogin: this.handleProviderLogin })))));
     }
     static get watchers() { return {
         "isEngineReady": [{
@@ -19692,7 +19702,7 @@ class KritzelViewport {
         if (event.pointerType === 'mouse') {
             const adjustedClientX = event.clientX - this._core.store.offsetX;
             const adjustedClientY = event.clientY - this._core.store.offsetY;
-            if (event.button === alignment_enum.KritzelMouseButton.Right) {
+            if (event.button === workspace_migrations.KritzelMouseButton.Right) {
                 this._core.store.state.isPanning = true;
                 this._core.store.state.startX = adjustedClientX;
                 this._core.store.state.startY = adjustedClientY;
@@ -19708,7 +19718,7 @@ class KritzelViewport {
                 // Clear selection box when scaling starts to prevent it from remaining on screen
                 if (this._core.store.state.isSelecting) {
                     this._core.store.state.isSelecting = false;
-                    this._core.store.state.objects.remove(obj => obj instanceof alignment_enum.KritzelSelectionBox);
+                    this._core.store.state.objects.remove(obj => obj instanceof workspace_migrations.KritzelSelectionBox);
                     this._core.store.setSelectionBox(null);
                     // Clear selection preview state from objects - use selectedObjects for efficiency
                     this._core.store.selectedObjects.forEach(object => {
@@ -20153,7 +20163,7 @@ const NUDGE_AMOUNT = 10;
  * Provides functionality for tool switching, clipboard operations, object manipulation,
  * undo/redo, and navigation via keyboard input.
  */
-class KritzelKeyHandler extends alignment_enum.KritzelBaseHandler {
+class KritzelKeyHandler extends workspace_migrations.KritzelBaseHandler {
     /**
      * Array of registered keyboard shortcuts with their associated actions.
      * Each shortcut defines the key combination, display label, category, optional condition, and action to execute.
@@ -20218,7 +20228,7 @@ class KritzelKeyHandler extends alignment_enum.KritzelBaseHandler {
      * @param index - The zero-based index of the tool to activate from the tool registry.
      */
     switchToolByIndex(index) {
-        const toolInstance = alignment_enum.KritzelToolRegistry.getToolByIndex(index);
+        const toolInstance = workspace_migrations.KritzelToolRegistry.getToolByIndex(index);
         if (toolInstance) {
             this._core.store.setState('activeTool', toolInstance);
             this._core.deselectAllObjects();
@@ -20267,7 +20277,7 @@ class KritzelKeyHandler extends alignment_enum.KritzelBaseHandler {
  * Manages the display and positioning of context menus, selecting appropriate menu items
  * based on whether an object is targeted or the canvas background is right-clicked.
  */
-class KritzelContextMenuHandler extends alignment_enum.KritzelBaseHandler {
+class KritzelContextMenuHandler extends workspace_migrations.KritzelBaseHandler {
     /**
      * Menu items to display when the context menu is opened on the canvas background
      * (i.e., when no object is selected).
@@ -20303,7 +20313,7 @@ class KritzelContextMenuHandler extends alignment_enum.KritzelBaseHandler {
      * @returns void - This method does not return a value; it updates state and triggers a rerender.
      */
     handleContextMenu(event) {
-        if (!(this._core.store.state.activeTool instanceof alignment_enum.KritzelSelectionTool)) {
+        if (!(this._core.store.state.activeTool instanceof workspace_migrations.KritzelSelectionTool)) {
             return;
         }
         if (this._core.store.state.skipContextMenu) {
@@ -20313,13 +20323,13 @@ class KritzelContextMenuHandler extends alignment_enum.KritzelBaseHandler {
         const selectionTool = this._core.store.state.activeTool;
         selectionTool?.moveHandler?.cancelPendingDrag();
         if (this._core.store.selectionBox) {
-            this._core.store.state.objects.remove(object => object instanceof alignment_enum.KritzelSelectionBox);
+            this._core.store.state.objects.remove(object => object instanceof workspace_migrations.KritzelSelectionBox);
             this._core.store.setSelectionBox(null);
             this._core.store.state.isSelecting = false;
         }
         const selectedObject = this._core.getObjectFromPointerEvent(event, '.object');
-        if (selectedObject && !(selectedObject instanceof alignment_enum.KritzelSelectionGroup) && !(selectedObject instanceof alignment_enum.KritzelSelectionBox)) {
-            const selectionGroup = alignment_enum.KritzelSelectionGroup.create(this._core);
+        if (selectedObject && !(selectedObject instanceof workspace_migrations.KritzelSelectionGroup) && !(selectedObject instanceof workspace_migrations.KritzelSelectionBox)) {
+            const selectionGroup = workspace_migrations.KritzelSelectionGroup.create(this._core);
             selectionGroup.addOrRemove(selectedObject);
             selectionGroup.isSelected = true;
             selectionGroup.rotation = selectedObject.rotation;
@@ -20358,7 +20368,7 @@ class KritzelContextMenuHandler extends alignment_enum.KritzelBaseHandler {
  * Extends KritzelBaseObject to inherit common object functionality like positioning,
  * scaling, and lifecycle management.
  */
-class KritzelCustomElement extends alignment_enum.KritzelBaseObject {
+class KritzelCustomElement extends workspace_migrations.KritzelBaseObject {
     __class__ = 'KritzelCustomElement';
     /** The HTML element to be rendered on the canvas. */
     element;
@@ -20502,16 +20512,16 @@ class KritzelReviver {
                 let revivedObj;
                 switch (obj.__class__) {
                     case 'KritzelPath':
-                        revivedObj = alignment_enum.KritzelPath.create(this._core).deserialize(obj);
+                        revivedObj = workspace_migrations.KritzelPath.create(this._core).deserialize(obj);
                         break;
                     case 'KritzelLine':
-                        revivedObj = alignment_enum.KritzelLine.create(this._core).deserialize(obj);
+                        revivedObj = workspace_migrations.KritzelLine.create(this._core).deserialize(obj);
                         break;
                     case 'KritzelText':
-                        revivedObj = alignment_enum.KritzelText.create(this._core, obj.fontSize, obj.fontFamily).deserialize(obj);
+                        revivedObj = workspace_migrations.KritzelText.create(this._core, obj.fontSize, obj.fontFamily).deserialize(obj);
                         break;
                     case 'KritzelShape':
-                        revivedObj = alignment_enum.KritzelShape.create(this._core, {
+                        revivedObj = workspace_migrations.KritzelShape.create(this._core, {
                             shapeType: obj.shapeType,
                             fillColor: obj.fillColor,
                             strokeColor: obj.strokeColor,
@@ -20522,40 +20532,40 @@ class KritzelReviver {
                         }).deserialize(obj);
                         break;
                     case 'KritzelImage':
-                        revivedObj = alignment_enum.KritzelImage.create(this._core).deserialize(obj);
+                        revivedObj = workspace_migrations.KritzelImage.create(this._core).deserialize(obj);
                         break;
                     case 'KritzelCustomElement':
                         revivedObj = KritzelCustomElement.create(this._core).deserialize(obj);
                         break;
                     case 'KritzelSelectionGroup':
-                        revivedObj = alignment_enum.KritzelSelectionGroup.create(this._core).deserialize(obj);
+                        revivedObj = workspace_migrations.KritzelSelectionGroup.create(this._core).deserialize(obj);
                         break;
                     case 'KritzelGroup':
-                        revivedObj = alignment_enum.KritzelGroup.create(this._core).deserialize(obj);
+                        revivedObj = workspace_migrations.KritzelGroup.create(this._core).deserialize(obj);
                         break;
                     case 'KritzelWorkspace':
-                        revivedObj = alignment_enum.KritzelWorkspace.create(this._core, obj).deserialize(obj);
+                        revivedObj = workspace_migrations.KritzelWorkspace.create(this._core, obj).deserialize(obj);
                         break;
                     case 'KritzelBrushTool':
-                        revivedObj = new alignment_enum.KritzelBrushTool(this._core);
+                        revivedObj = new workspace_migrations.KritzelBrushTool(this._core);
                         break;
                     case 'KritzelEraserTool':
-                        revivedObj = new alignment_enum.KritzelEraserTool(this._core);
+                        revivedObj = new workspace_migrations.KritzelEraserTool(this._core);
                         break;
                     case 'KritzelImageTool':
-                        revivedObj = new alignment_enum.KritzelImageTool(this._core);
+                        revivedObj = new workspace_migrations.KritzelImageTool(this._core);
                         break;
                     case 'KritzelSelectionTool':
-                        revivedObj = new alignment_enum.KritzelSelectionTool(this._core);
+                        revivedObj = new workspace_migrations.KritzelSelectionTool(this._core);
                         break;
                     case 'KritzelTextTool':
-                        revivedObj = new alignment_enum.KritzelTextTool(this._core);
+                        revivedObj = new workspace_migrations.KritzelTextTool(this._core);
                         break;
                     case 'KritzelLineTool':
-                        revivedObj = new alignment_enum.KritzelLineTool(this._core);
+                        revivedObj = new workspace_migrations.KritzelLineTool(this._core);
                         break;
                     case 'KritzelShapeTool':
-                        revivedObj = new alignment_enum.KritzelShapeTool(this._core);
+                        revivedObj = new workspace_migrations.KritzelShapeTool(this._core);
                         break;
                     default:
                         revivedObj = obj;
@@ -20610,7 +20620,8 @@ const DEFAULT_ENGINE_CONFIG = {
     debugInfo: {
         showObjectInfo: false,
         showViewportInfo: false,
-        showSyncProviderInfo: true
+        showSyncProviderInfo: true,
+        showMigrationInfo: true
     },
     host: null,
     pointerX: 0,
@@ -20679,32 +20690,32 @@ class AlignmentHelper {
             const offsetX = objBounds.x - obj.translateX;
             const offsetY = objBounds.y - obj.translateY;
             switch (alignment) {
-                case alignment_enum.KritzelAlignment.StartHorizontal:
+                case workspace_migrations.KritzelAlignment.StartHorizontal:
                     // Align left edges to selection's left edge
                     newTranslateX = selectionBounds.minX - offsetX;
                     break;
-                case alignment_enum.KritzelAlignment.CenterHorizontal:
+                case workspace_migrations.KritzelAlignment.CenterHorizontal:
                     // Align centers horizontally
                     const selectionCenterX = (selectionBounds.minX + selectionBounds.maxX) / 2;
                     const objCenterX = objBounds.x + objBounds.width / 2;
                     newTranslateX = obj.translateX + (selectionCenterX - objCenterX);
                     break;
-                case alignment_enum.KritzelAlignment.EndHorizontal:
+                case workspace_migrations.KritzelAlignment.EndHorizontal:
                     // Align right edges to selection's right edge
                     const objRightEdge = objBounds.x + objBounds.width;
                     newTranslateX = obj.translateX + (selectionBounds.maxX - objRightEdge);
                     break;
-                case alignment_enum.KritzelAlignment.StartVertical:
+                case workspace_migrations.KritzelAlignment.StartVertical:
                     // Align top edges to selection's top edge
                     newTranslateY = selectionBounds.minY - offsetY;
                     break;
-                case alignment_enum.KritzelAlignment.CenterVertical:
+                case workspace_migrations.KritzelAlignment.CenterVertical:
                     // Align centers vertically
                     const selectionCenterY = (selectionBounds.minY + selectionBounds.maxY) / 2;
                     const objCenterY = objBounds.y + objBounds.height / 2;
                     newTranslateY = obj.translateY + (selectionCenterY - objCenterY);
                     break;
-                case alignment_enum.KritzelAlignment.EndVertical:
+                case workspace_migrations.KritzelAlignment.EndVertical:
                     // Align bottom edges to selection's bottom edge
                     const objBottomEdge = objBounds.y + objBounds.height;
                     newTranslateY = obj.translateY + (selectionBounds.maxY - objBottomEdge);
@@ -20721,7 +20732,7 @@ class AlignmentHelper {
  */
 const DEFAULT_SYNC_CONFIG = {
     providers: [
-        alignment_enum.IndexedDBSyncProvider
+        workspace_migrations.IndexedDBSyncProvider
     ],
 };
 
@@ -21189,6 +21200,9 @@ class KritzelObjectMap {
         // Initialize document metadata (only if not already set by a previous client)
         const workspaceName = core.store?.state?.activeWorkspace?.name ?? '';
         this.initializeMetadata('workspace', workspaceId, workspaceName);
+        // Run any pending schema migrations before loading data
+        const quietMigrations = !core.store?.state?.debugInfo?.showMigrationInfo;
+        workspace_migrations.runMigrations(this._ydoc, this._metadataMap, { objects: this._objectsMap }, workspace_migrations.WORKSPACE_MIGRATIONS, workspace_migrations.CURRENT_WORKSPACE_SCHEMA_VERSION, { quiet: quietMigrations });
         // Load objects from Yjs
         this.loadFromYjs();
     }
@@ -21206,6 +21220,10 @@ class KritzelObjectMap {
             this._core?.rerender();
             return;
         }
+        // Skip migration transactions — data will be loaded fresh via loadFromYjs()
+        if (event.transaction.origin === 'migration') {
+            return;
+        }
         const changedKeys = Array.from(event.keysChanged);
         const objectsToUpdate = [];
         const selectionGroupsToUpdate = [];
@@ -21220,7 +21238,7 @@ class KritzelObjectMap {
                 if (serialized) {
                     const object = this._reviver.revive(serialized);
                     // Separate SelectionGroups to process them after regular objects
-                    if (object instanceof alignment_enum.KritzelSelectionGroup) {
+                    if (object instanceof workspace_migrations.KritzelSelectionGroup) {
                         selectionGroupsToUpdate.push(object);
                     }
                     else {
@@ -21283,7 +21301,7 @@ class KritzelObjectMap {
                 ...objectsToDelete
             ]);
             // Find any existing SelectionGroups that contain changed objects
-            const existingSelectionGroups = this.quadtree.filter(o => o instanceof alignment_enum.KritzelSelectionGroup && !updatedSelectionGroupIds.has(o.id));
+            const existingSelectionGroups = this.quadtree.filter(o => o instanceof workspace_migrations.KritzelSelectionGroup && !updatedSelectionGroupIds.has(o.id));
             for (const selectionGroup of existingSelectionGroups) {
                 const hasChangedChildren = selectionGroup.objectIds.some(id => changedObjectIds.has(id));
                 if (hasChangedChildren) {
@@ -21327,6 +21345,9 @@ class KritzelObjectMap {
             if (this._metadataMap.get('isPublic') === undefined) {
                 this._metadataMap.set('isPublic', false);
             }
+            if (this._metadataMap.get('schemaVersion') === undefined) {
+                this._metadataMap.set('schemaVersion', workspace_migrations.CURRENT_WORKSPACE_SCHEMA_VERSION);
+            }
             this._metadataMap.set('workspaceId', workspaceId);
             this._metadataMap.set('workspaceName', workspaceName);
         }, 'metadata');
@@ -21533,7 +21554,7 @@ class KritzelObjectMap {
      * @returns `true` if the object should be persisted, `false` otherwise
      */
     isPersistable(object) {
-        if (object instanceof alignment_enum.KritzelSelectionBox) {
+        if (object instanceof workspace_migrations.KritzelSelectionBox) {
             return false;
         }
         return true;
@@ -21744,7 +21765,7 @@ class KritzelStore {
      * @returns The next z-index value to use for new objects
      */
     get currentZIndex() {
-        return Math.max(0, ...this._state.objects.filter(o => !(o instanceof alignment_enum.KritzelSelectionGroup) && !(o instanceof alignment_enum.KritzelSelectionBox)).map(o => o.zIndex)) + 1;
+        return Math.max(0, ...this._state.objects.filter(o => !(o instanceof workspace_migrations.KritzelSelectionGroup) && !(o instanceof workspace_migrations.KritzelSelectionBox)).map(o => o.zIndex)) + 1;
     }
     /**
      * Returns true if viewport boundaries are set to finite values (not Infinity).
@@ -21817,14 +21838,14 @@ class KritzelStore {
      * @returns Array of all regular canvas objects
      */
     get allNonSelectionObjects() {
-        return this.allObjects.filter(o => !(o instanceof alignment_enum.KritzelSelectionGroup) && !(o instanceof alignment_enum.KritzelSelectionBox));
+        return this.allObjects.filter(o => !(o instanceof workspace_migrations.KritzelSelectionGroup) && !(o instanceof workspace_migrations.KritzelSelectionBox));
     }
     /**
      * Gets all currently selected objects (excluding the selection group itself).
      * @returns Array of selected objects
      */
     get selectedObjects() {
-        return this.allObjects.filter(o => !(o instanceof alignment_enum.KritzelSelectionGroup)).filter(o => o.isSelected);
+        return this.allObjects.filter(o => !(o instanceof workspace_migrations.KritzelSelectionGroup)).filter(o => o.isSelected);
     }
     /**
      * Gets the current selection box if one exists.
@@ -21835,7 +21856,7 @@ class KritzelStore {
         if (this._selectionBoxCacheValid) {
             return this._cachedSelectionBox;
         }
-        const selectionBoxes = this._state.objects.filter(o => o instanceof alignment_enum.KritzelSelectionBox);
+        const selectionBoxes = this._state.objects.filter(o => o instanceof workspace_migrations.KritzelSelectionBox);
         this._cachedSelectionBox = selectionBoxes.length > 0 ? selectionBoxes[0] : null;
         this._selectionBoxCacheValid = true;
         return this._cachedSelectionBox;
@@ -21849,7 +21870,7 @@ class KritzelStore {
         if (this._selectionGroupCacheValid) {
             return this._cachedSelectionGroup;
         }
-        const selectionGroups = this._state.objects.filter(o => o instanceof alignment_enum.KritzelSelectionGroup);
+        const selectionGroups = this._state.objects.filter(o => o instanceof workspace_migrations.KritzelSelectionGroup);
         this._cachedSelectionGroup = selectionGroups.length > 0 ? selectionGroups[0] : null;
         this._selectionGroupCacheValid = true;
         return this._cachedSelectionGroup;
@@ -21884,7 +21905,7 @@ class KritzelStore {
      * @returns The text object in editing mode, or null if none
      */
     get activeText() {
-        const activeTexts = this._state.objects.filter(o => o instanceof alignment_enum.KritzelText && o.isEditing);
+        const activeTexts = this._state.objects.filter(o => o instanceof workspace_migrations.KritzelText && o.isEditing);
         return activeTexts.length > 0 ? activeTexts[0] : null;
     }
     /**
@@ -21892,7 +21913,7 @@ class KritzelStore {
      * @returns The shape object in editing mode, or null if none
      */
     get activeShape() {
-        const activeShapes = this._state.objects.filter(o => o instanceof alignment_enum.KritzelShape && o.isEditing);
+        const activeShapes = this._state.objects.filter(o => o instanceof workspace_migrations.KritzelShape && o.isEditing);
         return activeShapes.length > 0 ? activeShapes[0] : null;
     }
     /**
@@ -21900,7 +21921,7 @@ class KritzelStore {
      * @returns The incomplete path object, or null if no path is being drawn
      */
     get currentPath() {
-        const drawingPaths = this._state.objects.filter(o => o instanceof alignment_enum.KritzelPath && o.isCompleted === false);
+        const drawingPaths = this._state.objects.filter(o => o instanceof workspace_migrations.KritzelPath && o.isCompleted === false);
         return drawingPaths.length > 0 ? drawingPaths[0] : null;
     }
     /**
@@ -21908,7 +21929,7 @@ class KritzelStore {
      * @returns The incomplete line object, or null if no line is being drawn
      */
     get currentLine() {
-        const drawingLines = this._state.objects.filter(o => o instanceof alignment_enum.KritzelLine && o.isCompleted === false);
+        const drawingLines = this._state.objects.filter(o => o instanceof workspace_migrations.KritzelLine && o.isCompleted === false);
         return drawingLines.length > 0 ? drawingLines[0] : null;
     }
     /**
@@ -22071,6 +22092,9 @@ class KritzelAppStateMap {
             }
         });
         this._isReady = true;
+        // Run any pending schema migrations before loading data
+        const quietMigrations = !core.store.state.debugInfo.showMigrationInfo;
+        workspace_migrations.runMigrations(this._ydoc, this._metadataMap, { workspaces: this._workspacesMap }, workspace_migrations.APP_STATE_MIGRATIONS, workspace_migrations.CURRENT_APP_STATE_SCHEMA_VERSION, { quiet: quietMigrations });
         // Initialize document metadata (only if not already set by a previous client)
         this.initializeMetadata('state');
         // Load workspaces from Yjs
@@ -22099,7 +22123,7 @@ class KritzelAppStateMap {
         if (instanceId) {
             return instanceId;
         }
-        const generatedInstanceId = alignment_enum.ObjectHelper.generateUUID();
+        const generatedInstanceId = workspace_migrations.ObjectHelper.generateUUID();
         try {
             storage.setItem(storageKey, generatedInstanceId);
         }
@@ -22120,6 +22144,10 @@ class KritzelAppStateMap {
             this._core?.rerender();
             return;
         }
+        // Skip migration transactions — data will be loaded fresh via loadFromYjs()
+        if (event.transaction.origin === 'migration') {
+            return;
+        }
         const changedKeys = Array.from(event.keysChanged);
         const workspacesToUpdate = [];
         const workspacesToDelete = [];
@@ -22157,11 +22185,22 @@ class KritzelAppStateMap {
     /**
      * Reconstructs a KritzelWorkspace instance from its serialized form.
      * Restores all properties including id, name, viewport, and timestamps.
+     * Handles both legacy { translateX, translateY } and new { centerWorldX, centerWorldY } viewport formats.
      * @param serialized - The serialized workspace data object.
      * @returns A fully reconstructed KritzelWorkspace instance.
      */
     reviveWorkspace(serialized) {
-        const workspace = new alignment_enum.KritzelWorkspace(serialized.id, serialized.name, serialized.viewport);
+        let viewport = serialized.viewport;
+        // Backward compatibility: convert legacy translateX/translateY to centerWorldX/centerWorldY
+        if (viewport && 'translateX' in viewport && !('centerWorldX' in viewport)) {
+            const scale = viewport.scale ?? 1;
+            viewport = {
+                centerWorldX: -(viewport.translateX ?? 0) / scale,
+                centerWorldY: -(viewport.translateY ?? 0) / scale,
+                scale,
+            };
+        }
+        const workspace = new workspace_migrations.KritzelWorkspace(serialized.id, serialized.name, viewport);
         workspace._core = this._core;
         workspace.createdAt = new Date(serialized.createdAt);
         workspace.updatedAt = new Date(serialized.updatedAt);
@@ -22183,6 +22222,9 @@ class KritzelAppStateMap {
             if (this._metadataMap.get('isPublic') === undefined) {
                 this._metadataMap.set('isPublic', false);
             }
+            if (this._metadataMap.get('schemaVersion') === undefined) {
+                this._metadataMap.set('schemaVersion', workspace_migrations.CURRENT_APP_STATE_SCHEMA_VERSION);
+            }
         }, 'metadata');
     }
     /**
@@ -22404,7 +22446,7 @@ class KritzelCursorManager {
         this._targetElement = element;
         // Set the pointer cursor CSS variable for child components to use
         if (this._targetElement) {
-            this._targetElement.style.setProperty('--kritzel-global-pointer-cursor', alignment_enum.KritzelCursorHelper.getPointerCursor());
+            this._targetElement.style.setProperty('--kritzel-global-pointer-cursor', workspace_migrations.KritzelCursorHelper.getPointerCursor());
         }
     }
     /**
@@ -22490,7 +22532,7 @@ class KritzelCursorManager {
         const icon = state.cursor?.icon;
         const iconActive = state.cursor?.iconActive ?? icon;
         const rotation = state.cursor?.rotation;
-        const cursor = alignment_enum.KritzelCursorHelper.getCursor({
+        const cursor = workspace_migrations.KritzelCursorHelper.getCursor({
             iconName: isPointerDown ? iconActive : icon,
             rotation: rotation,
         });
@@ -22620,9 +22662,9 @@ class KritzelCore {
         this._editorId = editorId;
         this._store = new KritzelStore(DEFAULT_ENGINE_CONFIG);
         this._appStateMap = new KritzelAppStateMap();
-        this._anchorManager = new alignment_enum.KritzelAnchorManager(this);
+        this._anchorManager = new workspace_migrations.KritzelAnchorManager(this);
         this._cursorManager = new KritzelCursorManager(this);
-        this._themeManager = new alignment_enum.KritzelThemeManager(this);
+        this._themeManager = new workspace_migrations.KritzelThemeManager(this);
     }
     /**
      * Sets the synchronization configuration for collaborative features.
@@ -22640,7 +22682,7 @@ class KritzelCore {
     setEditorId(editorId) {
         this._editorId = editorId;
         // Re-create theme manager so it picks up the new storage key
-        this._themeManager = new alignment_enum.KritzelThemeManager(this);
+        this._themeManager = new workspace_migrations.KritzelThemeManager(this);
     }
     /**
      * Initializes the Yjs document for collaborative editing.
@@ -22719,7 +22761,7 @@ class KritzelCore {
         }
         else {
             // Create fallback workspace
-            activeWorkspace = new alignment_enum.KritzelWorkspace(alignment_enum.ObjectHelper.generateUUID(), 'New Workspace');
+            activeWorkspace = new workspace_migrations.KritzelWorkspace(workspace_migrations.ObjectHelper.generateUUID(), 'New Workspace');
             activeWorkspace._core = this;
             this.saveWorkspaceToAppState(activeWorkspace);
         }
@@ -22737,11 +22779,14 @@ class KritzelCore {
         // Set active workspace
         this._store.state.activeWorkspace = activeWorkspace;
         this._store.state.workspaces = this.loadWorkspacesFromAppState();
-        // Set viewport from workspace
-        const viewport = activeWorkspace.viewport ?? { translateX: 0, translateY: 0, scale: 1 };
-        this._store.state.translateX = viewport.translateX ?? 0;
-        this._store.state.translateY = viewport.translateY ?? 0;
-        this._store.state.scale = viewport.scale ?? 1;
+        // Set viewport from workspace (convert world-space center to screen-space translate)
+        const viewport = activeWorkspace.viewport ?? { centerWorldX: 0, centerWorldY: 0, scale: 1 };
+        const scale = viewport.scale ?? 1;
+        const viewportWidth = this._store.state.viewportWidth;
+        const viewportHeight = this._store.state.viewportHeight;
+        this._store.state.translateX = viewportWidth / 2 - (viewport.centerWorldX ?? 0) * scale;
+        this._store.state.translateY = viewportHeight / 2 - (viewport.centerWorldY ?? 0) * scale;
+        this._store.state.scale = scale;
         await objectsMap.initialize(this, activeWorkspace.id, this._syncConfig);
         // Set local user in awareness after object map is initialized
         if (this._user) {
@@ -22769,7 +22814,7 @@ class KritzelCore {
         let workspace = this.getWorkspaces().find(w => w.id === workspaceId);
         if (!workspace) {
             // Create it if it doesn't exist locally
-            workspace = new alignment_enum.KritzelWorkspace(workspaceId, name);
+            workspace = new workspace_migrations.KritzelWorkspace(workspaceId, name);
             workspace.isPublic = true;
             this.createWorkspace(workspace);
         }
@@ -22796,7 +22841,7 @@ class KritzelCore {
         };
         return this._store.state.objects
             .query(viewportBounds)
-            .filter(obj => !(obj instanceof alignment_enum.KritzelSelectionGroup) && !(obj instanceof alignment_enum.KritzelSelectionBox))
+            .filter(obj => !(obj instanceof workspace_migrations.KritzelSelectionGroup) && !(obj instanceof workspace_migrations.KritzelSelectionBox))
             .sort((a, b) => a.zIndex - b.zIndex);
     }
     /**
@@ -22883,6 +22928,7 @@ class KritzelCore {
     }
     /**
      * Persists the current viewport state to the active workspace.
+     * Converts screen-space translate values to device-independent world-space center coordinates.
      * Validates that the workspace still exists before saving.
      * @param translateX - The X translation of the viewport
      * @param translateY - The Y translation of the viewport
@@ -22898,7 +22944,12 @@ class KritzelCore {
         if (!isValid) {
             return;
         }
-        activeWorkspace.viewport = { translateX, translateY, scale };
+        // Convert screen-space translate to device-independent world-space center
+        const viewportWidth = this._store.state.viewportWidth;
+        const viewportHeight = this._store.state.viewportHeight;
+        const centerWorldX = (viewportWidth / 2 - translateX) / scale;
+        const centerWorldY = (viewportHeight / 2 - translateY) / scale;
+        activeWorkspace.viewport = { centerWorldX, centerWorldY, scale };
         activeWorkspace.updatedAt = new Date();
         this.saveWorkspaceToAppState(activeWorkspace);
     }
@@ -22928,7 +22979,7 @@ class KritzelCore {
      */
     removeObject(object, preserveChildren = false) {
         // Handle KritzelGroup: recursively delete all children first (unless preserveChildren is true)
-        if (alignment_enum.KritzelClassHelper.isInstanceOf(object, 'KritzelGroup') && !preserveChildren) {
+        if (workspace_migrations.KritzelClassHelper.isInstanceOf(object, 'KritzelGroup') && !preserveChildren) {
             // Get children before removing the group
             const children = [...object.children];
             children.forEach(child => {
@@ -22936,7 +22987,7 @@ class KritzelCore {
             });
         }
         // Handle anchor cleanup
-        if (alignment_enum.KritzelClassHelper.isInstanceOf(object, 'KritzelLine')) {
+        if (workspace_migrations.KritzelClassHelper.isInstanceOf(object, 'KritzelLine')) {
             // If removing a line, clean up its anchor index entries
             this._anchorManager.handleLineDeleted(object.id);
         }
@@ -23127,7 +23178,7 @@ class KritzelCore {
         this.removeSelectionGroup();
         this.removeSelectionBox();
         // Create a new selection group for the pasted objects
-        const selectionGroup = alignment_enum.KritzelSelectionGroup.create(this);
+        const selectionGroup = workspace_migrations.KritzelSelectionGroup.create(this);
         // Build a reverse mapping: originalId -> newCopiedObjectId
         // This is used to remap anchor references from original IDs to the copied object IDs
         const originalToNewIdMap = new Map();
@@ -23152,7 +23203,7 @@ class KritzelCore {
                 // Update z-index
                 obj.zIndex = baseZIndex + i;
                 // Handle KritzelGroup: also add pending children with offset
-                if (alignment_enum.KritzelClassHelper.isInstanceOf(obj, 'KritzelGroup')) {
+                if (workspace_migrations.KritzelClassHelper.isInstanceOf(obj, 'KritzelGroup')) {
                     if (obj._pendingChildren.length > 0) {
                         obj._pendingChildren.forEach((child, childIndex) => {
                             // Update workspace
@@ -23180,7 +23231,7 @@ class KritzelCore {
             // Update line anchors to point to the newly pasted objects
             // Only remap if the anchor target was also part of the copied selection
             copiedObjects.forEach(obj => {
-                if (alignment_enum.KritzelClassHelper.isInstanceOf(obj, 'KritzelLine')) {
+                if (workspace_migrations.KritzelClassHelper.isInstanceOf(obj, 'KritzelLine')) {
                     let updated = false;
                     if (obj.startAnchor && originalToNewIdMap.has(obj.startAnchor.objectId)) {
                         obj.startAnchor = { objectId: originalToNewIdMap.get(obj.startAnchor.objectId) };
@@ -23238,7 +23289,7 @@ class KritzelCore {
                 this._store.state.copiedObjectIdMapping = newIdMapping;
             }
         });
-        this._store.setState('activeTool', alignment_enum.KritzelToolRegistry.getTool('selection'));
+        this._store.setState('activeTool', workspace_migrations.KritzelToolRegistry.getTool('selection'));
         this.engine.emitObjectsChange();
         this.rerender();
     }
@@ -23338,12 +23389,12 @@ class KritzelCore {
             return;
         }
         // Create a group from the selected objects
-        const group = alignment_enum.KritzelGroup.createFromObjects(this, selectionGroup.objects);
+        const group = workspace_migrations.KritzelGroup.createFromObjects(this, selectionGroup.objects);
         // Add the group to the object store
         this.addObject(group);
         // Remove the selection group and create a new one with just the group
         this.removeSelectionGroup();
-        const newSelectionGroup = alignment_enum.KritzelSelectionGroup.create(this);
+        const newSelectionGroup = workspace_migrations.KritzelSelectionGroup.create(this);
         newSelectionGroup.addOrRemove(group);
         newSelectionGroup.isSelected = true;
         newSelectionGroup.rotation = group.rotation;
@@ -23360,13 +23411,13 @@ class KritzelCore {
         if (!selectionGroup) {
             return;
         }
-        const groups = selectionGroup.objects.filter(obj => alignment_enum.KritzelClassHelper.isInstanceOf(obj, 'KritzelGroup'));
+        const groups = selectionGroup.objects.filter(obj => workspace_migrations.KritzelClassHelper.isInstanceOf(obj, 'KritzelGroup'));
         if (groups.length === 0) {
             return;
         }
         // Collect all children from all groups
         const allChildren = [];
-        const nonGroupObjects = selectionGroup.objects.filter(obj => !alignment_enum.KritzelClassHelper.isInstanceOf(obj, 'KritzelGroup'));
+        const nonGroupObjects = selectionGroup.objects.filter(obj => !workspace_migrations.KritzelClassHelper.isInstanceOf(obj, 'KritzelGroup'));
         groups.forEach(group => {
             // Get children before removing the group
             const children = group.ungroup();
@@ -23376,7 +23427,7 @@ class KritzelCore {
         });
         // Create a new selection group with all the ungrouped children and non-group objects
         this.removeSelectionGroup();
-        const newSelectionGroup = alignment_enum.KritzelSelectionGroup.create(this);
+        const newSelectionGroup = workspace_migrations.KritzelSelectionGroup.create(this);
         [...allChildren, ...nonGroupObjects].forEach(child => {
             newSelectionGroup.addOrRemove(child);
         });
@@ -23394,7 +23445,7 @@ class KritzelCore {
         if (objects.length === 0) {
             return;
         }
-        const selectionGroup = alignment_enum.KritzelSelectionGroup.create(this);
+        const selectionGroup = workspace_migrations.KritzelSelectionGroup.create(this);
         objects.forEach(obj => {
             obj.isSelected = false;
             selectionGroup.addOrRemove(obj);
@@ -23414,9 +23465,9 @@ class KritzelCore {
     selectAllObjects() {
         const allObjects = this._store.state.objects
             .allObjects()
-            .filter(o => !(o instanceof alignment_enum.KritzelSelectionGroup) && !(o instanceof alignment_enum.KritzelSelectionBox) && !(o instanceof KritzelContextMenu));
+            .filter(o => !(o instanceof workspace_migrations.KritzelSelectionGroup) && !(o instanceof workspace_migrations.KritzelSelectionBox) && !(o instanceof KritzelContextMenu));
         if (allObjects.length > 0) {
-            const selectionGroup = alignment_enum.KritzelSelectionGroup.create(this);
+            const selectionGroup = workspace_migrations.KritzelSelectionGroup.create(this);
             allObjects.forEach(obj => {
                 obj.isSelected = false;
                 selectionGroup.addOrRemove(obj);
@@ -23427,7 +23478,7 @@ class KritzelCore {
                 selectionGroup.rotation = selectionGroup.objects[0].rotation;
             }
             this.addSelectionGroup(selectionGroup);
-            this._store.setState('activeTool', alignment_enum.KritzelToolRegistry.getTool('selection'));
+            this._store.setState('activeTool', workspace_migrations.KritzelToolRegistry.getTool('selection'));
             this.rerender();
         }
     }
@@ -23448,9 +23499,9 @@ class KritzelCore {
         const objectsInViewport = this._store.state.objects
             .query(viewportBounds)
             .filter(o => o.isInViewport())
-            .filter(o => !(o instanceof alignment_enum.KritzelSelectionGroup) && !(o instanceof alignment_enum.KritzelSelectionBox) && !(o instanceof KritzelContextMenu));
+            .filter(o => !(o instanceof workspace_migrations.KritzelSelectionGroup) && !(o instanceof workspace_migrations.KritzelSelectionBox) && !(o instanceof KritzelContextMenu));
         if (objectsInViewport.length > 0) {
-            const selectionGroup = alignment_enum.KritzelSelectionGroup.create(this);
+            const selectionGroup = workspace_migrations.KritzelSelectionGroup.create(this);
             objectsInViewport.forEach(obj => {
                 obj.isSelected = false;
                 selectionGroup.addOrRemove(obj);
@@ -23461,7 +23512,7 @@ class KritzelCore {
                 selectionGroup.rotation = selectionGroup.objects[0].rotation;
             }
             this.addSelectionGroup(selectionGroup);
-            this._store.setState('activeTool', alignment_enum.KritzelToolRegistry.getTool('selection'));
+            this._store.setState('activeTool', workspace_migrations.KritzelToolRegistry.getTool('selection'));
             this.rerender();
         }
     }
@@ -23471,7 +23522,7 @@ class KritzelCore {
      */
     clearSelection() {
         this.removeSelectionGroup();
-        this._store.state.objects.remove(o => o instanceof alignment_enum.KritzelSelectionBox || o instanceof alignment_enum.KritzelSelectionGroup);
+        this._store.state.objects.remove(o => o instanceof workspace_migrations.KritzelSelectionBox || o instanceof workspace_migrations.KritzelSelectionGroup);
         this._store.setSelectionBox(null);
         this._store.setSelectionGroup(null);
         this._store.state.isSelecting = false;
@@ -23613,7 +23664,7 @@ class KritzelCore {
         }
         this.resetActiveText();
         this.clearSelection();
-        this._store.setState('activeTool', alignment_enum.KritzelToolRegistry.getTool('selection'));
+        this._store.setState('activeTool', workspace_migrations.KritzelToolRegistry.getTool('selection'));
     }
     /**
      * Determines whether to display the selection group UI for an object.
@@ -23628,7 +23679,7 @@ class KritzelCore {
         const selectionGroup = this._store.selectionGroup;
         if (!selectionGroup) {
             // During selection phase (no group yet), hide UI for KritzelLine objects
-            return !(object instanceof alignment_enum.KritzelLine);
+            return !(object instanceof workspace_migrations.KritzelLine);
         }
         // Show UI if selection contains more than one object
         if (selectionGroup.objects.length > 1) {
@@ -23637,7 +23688,7 @@ class KritzelCore {
         // Hide UI if selection contains a single KritzelLine
         if (selectionGroup.objects.length === 1) {
             const selectedObject = selectionGroup.objects[0];
-            return !(selectedObject instanceof alignment_enum.KritzelLine);
+            return !(selectedObject instanceof workspace_migrations.KritzelLine);
         }
         return true;
     }
@@ -23649,7 +23700,7 @@ class KritzelCore {
      */
     displaySelectionLineUI(object) {
         // Only show line UI on KritzelLine objects, not on selection groups
-        if (!(object instanceof alignment_enum.KritzelLine)) {
+        if (!(object instanceof workspace_migrations.KritzelLine)) {
             return false;
         }
         // During selection phase (no group yet), show line UI if line is selected
@@ -23663,7 +23714,7 @@ class KritzelCore {
         // Show UI only if selection contains exactly one KritzelLine and it's this object
         if (selectionGroup.objects.length === 1) {
             const selectedObject = selectionGroup.objects[0];
-            return selectedObject instanceof alignment_enum.KritzelLine && selectedObject.id === object.id;
+            return selectedObject instanceof workspace_migrations.KritzelLine && selectedObject.id === object.id;
         }
         return false;
     }
@@ -23747,7 +23798,7 @@ class KritzelSvgExportHelper {
     static flattenObjects(objects) {
         const result = [];
         for (const obj of objects) {
-            if (alignment_enum.KritzelClassHelper.isInstanceOf(obj, 'KritzelGroup')) {
+            if (workspace_migrations.KritzelClassHelper.isInstanceOf(obj, 'KritzelGroup')) {
                 result.push(...this.flattenObjects(obj.children));
             }
             else {
@@ -23765,7 +23816,7 @@ class KritzelSvgExportHelper {
     static collectDefs(objects, theme) {
         const defs = [];
         for (const obj of objects) {
-            if (alignment_enum.KritzelClassHelper.isInstanceOf(obj, 'KritzelLine')) {
+            if (workspace_migrations.KritzelClassHelper.isInstanceOf(obj, 'KritzelLine')) {
                 if (obj.hasStartArrow) {
                     defs.push(this.generateArrowMarker(obj, 'start', theme));
                 }
@@ -23803,22 +23854,22 @@ class KritzelSvgExportHelper {
      * @returns SVG element string, or empty string if object type is not supported
      */
     static objectToSvgElement(object, theme) {
-        if (alignment_enum.KritzelClassHelper.isInstanceOf(object, 'KritzelPath')) {
+        if (workspace_migrations.KritzelClassHelper.isInstanceOf(object, 'KritzelPath')) {
             return this.pathToSvg(object, theme);
         }
-        if (alignment_enum.KritzelClassHelper.isInstanceOf(object, 'KritzelLine')) {
+        if (workspace_migrations.KritzelClassHelper.isInstanceOf(object, 'KritzelLine')) {
             return this.lineToSvg(object, theme);
         }
-        if (alignment_enum.KritzelClassHelper.isInstanceOf(object, 'KritzelShape')) {
+        if (workspace_migrations.KritzelClassHelper.isInstanceOf(object, 'KritzelShape')) {
             return this.shapeToSvg(object, theme);
         }
-        if (alignment_enum.KritzelClassHelper.isInstanceOf(object, 'KritzelText')) {
+        if (workspace_migrations.KritzelClassHelper.isInstanceOf(object, 'KritzelText')) {
             return this.textToSvg(object, theme);
         }
-        if (alignment_enum.KritzelClassHelper.isInstanceOf(object, 'KritzelImage')) {
+        if (workspace_migrations.KritzelClassHelper.isInstanceOf(object, 'KritzelImage')) {
             return this.imageToSvg(object);
         }
-        if (alignment_enum.KritzelClassHelper.isInstanceOf(object, 'KritzelGroup')) {
+        if (workspace_migrations.KritzelClassHelper.isInstanceOf(object, 'KritzelGroup')) {
             return this.groupToSvg(object, theme);
         }
         return '';
@@ -23831,8 +23882,8 @@ class KritzelSvgExportHelper {
      */
     static pathToSvg(path, theme) {
         const transform = this.buildTransform(path);
-        const fill = alignment_enum.KritzelColorHelper.resolveThemeColor(path.fill, theme);
-        const stroke = alignment_enum.KritzelColorHelper.resolveThemeColor(path.stroke, theme);
+        const fill = workspace_migrations.KritzelColorHelper.resolveThemeColor(path.fill, theme);
+        const stroke = workspace_migrations.KritzelColorHelper.resolveThemeColor(path.stroke, theme);
         const opacity = path.opacity !== 1 ? ` opacity="${path.opacity}"` : '';
         // Path needs to be wrapped in a g with translation since path.d uses local coordinates
         return `<g transform="${transform}"${opacity}>
@@ -23849,7 +23900,7 @@ class KritzelSvgExportHelper {
      */
     static lineToSvg(line, theme) {
         const transform = this.buildTransform(line);
-        const stroke = alignment_enum.KritzelColorHelper.resolveThemeColor(line.stroke, theme);
+        const stroke = workspace_migrations.KritzelColorHelper.resolveThemeColor(line.stroke, theme);
         const opacity = line.opacity !== 1 ? ` opacity="${line.opacity}"` : '';
         const markerStart = line.hasStartArrow ? ` marker-start="url(#${line.startMarkerId})"` : '';
         const markerEnd = line.hasEndArrow ? ` marker-end="url(#${line.endMarkerId})"` : '';
@@ -23867,8 +23918,8 @@ class KritzelSvgExportHelper {
      */
     static shapeToSvg(shape, theme) {
         const transform = this.buildTransform(shape);
-        const fill = alignment_enum.KritzelColorHelper.resolveThemeColor(shape.fillColor, theme);
-        const stroke = alignment_enum.KritzelColorHelper.resolveThemeColor(shape.strokeColor, theme);
+        const fill = workspace_migrations.KritzelColorHelper.resolveThemeColor(shape.fillColor, theme);
+        const stroke = workspace_migrations.KritzelColorHelper.resolveThemeColor(shape.strokeColor, theme);
         const opacity = shape.opacity !== 1 ? ` opacity="${shape.opacity}"` : '';
         // Get the SVG path for the shape
         const pathD = shape.getSvgPath();
@@ -23878,7 +23929,7 @@ class KritzelSvgExportHelper {
         else if (shape.content) {
             const textHtml = this.prosemirrorToHtml(shape.content, shape, theme);
             if (textHtml) {
-                const fontColor = alignment_enum.KritzelColorHelper.resolveThemeColor(shape.fontColor, theme);
+                const fontColor = workspace_migrations.KritzelColorHelper.resolveThemeColor(shape.fontColor, theme);
                 textContent = `
     <foreignObject x="${shape.x}" y="${shape.y}" width="${shape.width}" height="${shape.height}">
       <div xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-family: ${shape.fontFamily}; font-size: ${shape.fontSize}px; color: ${fontColor}; overflow: hidden;">
@@ -23902,8 +23953,8 @@ class KritzelSvgExportHelper {
     static textToSvg(text, theme) {
         const transform = this.buildTransform(text);
         const opacity = text.opacity !== 1 ? ` opacity="${text.opacity}"` : '';
-        const fontColor = alignment_enum.KritzelColorHelper.resolveThemeColor(text.fontColor, theme);
-        const bgColor = alignment_enum.KritzelColorHelper.resolveThemeColor(text.backgroundColor, theme);
+        const fontColor = workspace_migrations.KritzelColorHelper.resolveThemeColor(text.fontColor, theme);
+        const bgColor = workspace_migrations.KritzelColorHelper.resolveThemeColor(text.backgroundColor, theme);
         // Convert ProseMirror content to HTML
         const htmlContent = this.prosemirrorToHtml(text.content, text, theme);
         // Calculate dimensions accounting for scale
@@ -25055,6 +25106,13 @@ const KritzelEngine = class {
     onViewportBoundaryBottomChange(newValue) {
         this.core.store.state.viewportBoundaryBottom = newValue ?? Infinity;
     }
+    /** Debug info display options controlling which debug overlays are visible */
+    debugInfo;
+    onDebugInfoChange(newValue) {
+        if (newValue) {
+            this.core.store.state.debugInfo = newValue;
+        }
+    }
     /** When false, wheel events will not trigger viewport pan/zoom. The event still propagates to parent elements. */
     wheelEnabled = true;
     /** Emitted when the engine has fully initialized and is ready for interaction. */
@@ -25107,8 +25165,8 @@ const KritzelEngine = class {
         if (this.core.store.isDisabled) {
             return;
         }
-        if (alignment_enum.KritzelDevicesHelper.isTouchDevice()) {
-            alignment_enum.KritzelEventHelper.onLongPress(ev, (event) => this.longpress.emit(event));
+        if (workspace_migrations.KritzelDevicesHelper.isTouchDevice()) {
+            workspace_migrations.KritzelEventHelper.onLongPress(ev, (event) => this.longpress.emit(event));
         }
         this.host.setPointerCapture(ev.pointerId);
         this.core.store.state.pointers.set(ev.pointerId, ev);
@@ -25242,11 +25300,11 @@ const KritzelEngine = class {
      * @returns The registered tool instance, or `null` if registration failed.
      */
     async registerTool(toolName, toolClass, toolConfig) {
-        if (typeof toolClass !== 'function' || !(toolClass.prototype instanceof alignment_enum.KritzelBaseTool)) {
+        if (typeof toolClass !== 'function' || !(toolClass.prototype instanceof workspace_migrations.KritzelBaseTool)) {
             console.error(`Failed to register tool "${toolName}": Tool class must be a constructor function`);
             return null;
         }
-        const registeredTool = alignment_enum.KritzelToolRegistry.registerTool(toolName, toolClass, this.core);
+        const registeredTool = workspace_migrations.KritzelToolRegistry.registerTool(toolName, toolClass, this.core);
         if (toolConfig) {
             Object.entries(toolConfig).forEach(([key, value]) => {
                 registeredTool[key] = value;
@@ -25348,7 +25406,7 @@ const KritzelEngine = class {
     async hideContextMenu() {
         this.core.store.state.pointers.clear();
         this.core.store.state.isContextMenuVisible = false;
-        this.core.store.state.objects.remove(o => o instanceof alignment_enum.KritzelSelectionBox);
+        this.core.store.state.objects.remove(o => o instanceof workspace_migrations.KritzelSelectionBox);
         this.core.store.setSelectionBox(null);
         this.core.store.state.isSelecting = false;
         this.core.store.state.isEnabled = true;
@@ -25406,7 +25464,7 @@ const KritzelEngine = class {
         object.workspaceId = this.core.store.state.activeWorkspace.id;
         // Handle KritzelText: recreate the editor now that _core is available
         // The editor's dispatchTransaction callback needs _core for persisting changes
-        if (alignment_enum.KritzelClassHelper.isInstanceOf(object, 'KritzelText')) {
+        if (workspace_migrations.KritzelClassHelper.isInstanceOf(object, 'KritzelText')) {
             const pendingContent = object.content;
             object.editor = object.createEditor();
             if (pendingContent) {
@@ -25414,7 +25472,7 @@ const KritzelEngine = class {
             }
         }
         // Handle KritzelGroup: flush pending children into the store
-        if (alignment_enum.KritzelClassHelper.isInstanceOf(object, 'KritzelGroup') && object._pendingChildren.length > 0) {
+        if (workspace_migrations.KritzelClassHelper.isInstanceOf(object, 'KritzelGroup') && object._pendingChildren.length > 0) {
             object.childIds = [];
             // Build a map of old ID → new ID so we can remap anchor references
             const idRemapping = new Map();
@@ -25430,7 +25488,7 @@ const KritzelEngine = class {
             });
             // Remap anchor references in lines before inserting into the store
             object._pendingChildren.forEach(child => {
-                if (alignment_enum.KritzelClassHelper.isInstanceOf(child, 'KritzelLine')) {
+                if (workspace_migrations.KritzelClassHelper.isInstanceOf(child, 'KritzelLine')) {
                     if (child.startAnchor && idRemapping.has(child.startAnchor.objectId)) {
                         child.startAnchor = { objectId: idRemapping.get(child.startAnchor.objectId) };
                     }
@@ -25499,14 +25557,14 @@ const KritzelEngine = class {
      */
     async selectObjects(objects) {
         this.core.store.state.activeTool?.onDeactivate();
-        this.core.store.setState('activeTool', alignment_enum.KritzelToolRegistry.getTool('selection'));
+        this.core.store.setState('activeTool', workspace_migrations.KritzelToolRegistry.getTool('selection'));
         this.core.deselectAllObjects();
         this.core.selectObjects(objects);
     }
     /** Selects all objects currently visible in the viewport. Switches to the selection tool automatically. */
     async selectAllObjectsInViewport() {
         this.core.store.state.activeTool?.onDeactivate();
-        this.core.store.setState('activeTool', alignment_enum.KritzelToolRegistry.getTool('selection'));
+        this.core.store.setState('activeTool', workspace_migrations.KritzelToolRegistry.getTool('selection'));
         this.core.deselectAllObjects();
         this.core.selectAllObjectsInViewport();
     }
@@ -25819,14 +25877,23 @@ const KritzelEngine = class {
         if (!data.__class__ || data.__class__ !== 'KritzelWorkspace') {
             throw new Error('Invalid workspace data: missing or incorrect __class__ identifier');
         }
-        if (data.version && data.version !== alignment_enum.WORKSPACE_EXPORT_VERSION) {
-            console.warn(`Workspace version mismatch: expected ${alignment_enum.WORKSPACE_EXPORT_VERSION}, got ${data.version}`);
+        if (data.version && data.version !== workspace_migrations.WORKSPACE_EXPORT_VERSION) {
+            console.warn(`Workspace version mismatch: expected ${workspace_migrations.WORKSPACE_EXPORT_VERSION}, got ${data.version}`);
         }
         // Create a new workspace with a fresh ID but use the imported name
-        const newWorkspaceId = alignment_enum.ObjectHelper.generateUUID();
+        const newWorkspaceId = workspace_migrations.ObjectHelper.generateUUID();
         const importedName = data.name || 'Imported Workspace';
-        const importedViewport = data.viewport || { translateX: 0, translateY: 0, scale: 1 };
-        const newWorkspace = new alignment_enum.KritzelWorkspace(newWorkspaceId, importedName, importedViewport);
+        let importedViewport = data.viewport || { centerWorldX: 0, centerWorldY: 0, scale: 1 };
+        // Backward compatibility: convert legacy translateX/translateY to centerWorldX/centerWorldY
+        if ('translateX' in importedViewport && !('centerWorldX' in importedViewport)) {
+            const scale = importedViewport.scale ?? 1;
+            importedViewport = {
+                centerWorldX: -(importedViewport.translateX ?? 0) / scale,
+                centerWorldY: -(importedViewport.translateY ?? 0) / scale,
+                scale,
+            };
+        }
+        const newWorkspace = new workspace_migrations.KritzelWorkspace(newWorkspaceId, importedName, importedViewport);
         // Save the new workspace
         this.core.createWorkspace(newWorkspace);
         this.workspacesChange.emit(this.core.store.state.workspaces);
@@ -25864,8 +25931,8 @@ const KritzelEngine = class {
         if (!data.__class__ || data.__class__ !== 'KritzelWorkspace') {
             throw new Error('Invalid workspace data: missing or incorrect __class__ identifier');
         }
-        if (data.version && data.version !== alignment_enum.WORKSPACE_EXPORT_VERSION) {
-            console.warn(`Workspace version mismatch: expected ${alignment_enum.WORKSPACE_EXPORT_VERSION}, got ${data.version}`);
+        if (data.version && data.version !== workspace_migrations.WORKSPACE_EXPORT_VERSION) {
+            console.warn(`Workspace version mismatch: expected ${workspace_migrations.WORKSPACE_EXPORT_VERSION}, got ${data.version}`);
         }
         const currentWorkspaceId = this.core.store.state.activeWorkspace.id;
         let loadedCount = 0;
@@ -26022,7 +26089,7 @@ const KritzelEngine = class {
         const workspaceId = token;
         let workspace = this.core.getWorkspaces().find(w => w.id === workspaceId);
         if (!workspace) {
-            workspace = new alignment_enum.KritzelWorkspace(workspaceId, 'Shared Workspace');
+            workspace = new workspace_migrations.KritzelWorkspace(workspaceId, 'Shared Workspace');
             workspace.isPublic = true;
             this.core.createWorkspace(workspace);
         }
@@ -26062,10 +26129,10 @@ const KritzelEngine = class {
     _syncInitPromise = null;
     _syncConfigRevision = 0;
     get isSelecting() {
-        return this.core.store.state.activeTool instanceof alignment_enum.KritzelSelectionTool && this.core.store.state.isSelecting;
+        return this.core.store.state.activeTool instanceof workspace_migrations.KritzelSelectionTool && this.core.store.state.isSelecting;
     }
     get isSelectionActive() {
-        return this.core.store.state.activeTool instanceof alignment_enum.KritzelSelectionTool && this.core.store.selectionGroup !== null;
+        return this.core.store.state.activeTool instanceof workspace_migrations.KritzelSelectionTool && this.core.store.selectionGroup !== null;
     }
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -26284,9 +26351,9 @@ const KritzelEngine = class {
         this.core.store.onStateChange('activeTool', this._handleActiveToolChange.bind(this));
     }
     _handleActiveToolChange(activeTool) {
-        if (!(activeTool instanceof alignment_enum.KritzelSelectionTool)) {
+        if (!(activeTool instanceof workspace_migrations.KritzelSelectionTool)) {
             this.core.clearSelection();
-            this.core.store.state.objects.remove(o => o instanceof alignment_enum.KritzelSelectionBox);
+            this.core.store.state.objects.remove(o => o instanceof workspace_migrations.KritzelSelectionBox);
             this.core.store.setSelectionBox(null);
             this.core.store.state.isSelecting = false;
             this.core.store.state.isResizeHandleSelected = false;
@@ -26295,7 +26362,7 @@ const KritzelEngine = class {
         this.core.store.state.skipContextMenu = false;
         this.core.store.state.copiedObjects = null;
         this.activeToolChange.emit(activeTool);
-        alignment_enum.KritzelKeyboardHelper.forceHideKeyboard();
+        workspace_migrations.KritzelKeyboardHelper.forceHideKeyboard();
         this.core.rerender();
     }
     render() {
@@ -26326,7 +26393,7 @@ const KritzelEngine = class {
                     position: 'absolute',
                     zIndex: object.zIndex.toString(),
                     pointerEvents: this.core.store.state.isScaling ? 'none' : 'auto',
-                } }, alignment_enum.KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (index.h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
+                } }, workspace_migrations.KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (index.h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
                     height: object?.totalHeight + 'px',
                     width: object?.totalWidth + 'px',
                     left: '0',
@@ -26337,7 +26404,7 @@ const KritzelEngine = class {
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                     overflow: 'visible',
-                }, viewBox: object?.viewBox }, index.h("path", { d: object?.d, fill: alignment_enum.KritzelColorHelper.resolveThemeColor(object.fill, currentTheme), stroke: alignment_enum.KritzelColorHelper.resolveThemeColor(object?.stroke, currentTheme), "shape-rendering": object.isLowRes() ? 'optimizeSpeed' : 'auto' }))), alignment_enum.KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (index.h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
+                }, viewBox: object?.viewBox }, index.h("path", { d: object?.d, fill: workspace_migrations.KritzelColorHelper.resolveThemeColor(object.fill, currentTheme), stroke: workspace_migrations.KritzelColorHelper.resolveThemeColor(object?.stroke, currentTheme), "shape-rendering": object.isLowRes() ? 'optimizeSpeed' : 'auto' }))), workspace_migrations.KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (index.h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
                     height: object?.totalHeight + 'px',
                     width: object?.totalWidth + 'px',
                     left: '0',
@@ -26348,7 +26415,7 @@ const KritzelEngine = class {
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                     overflow: 'visible',
-                }, viewBox: object?.viewBox }, (object.hasStartArrow || object.hasEndArrow) && (index.h("defs", null, object.hasStartArrow && (index.h("marker", { id: object.startMarkerId, markerWidth: object.getArrowSize('start'), markerHeight: object.getArrowSize('start'), refX: 0, refY: object.getArrowSize('start') / 2, orient: "auto-start-reverse", markerUnits: "userSpaceOnUse" }, index.h("path", { d: object.getArrowPath(object.arrows?.start?.style), fill: object.getArrowFill('start'), transform: `scale(${object.getArrowSize('start') / 10})` }))), object.hasEndArrow && (index.h("marker", { id: object.endMarkerId, markerWidth: object.getArrowSize('end'), markerHeight: object.getArrowSize('end'), refX: 0, refY: object.getArrowSize('end') / 2, orient: "auto", markerUnits: "userSpaceOnUse" }, index.h("path", { d: object.getArrowPath(object.arrows?.end?.style), fill: object.getArrowFill('end'), transform: `scale(${object.getArrowSize('end') / 10})` }))))), index.h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: "transparent", "stroke-width": Math.max(object?.strokeWidth || 0, 10), "stroke-linecap": "round" }), index.h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: alignment_enum.KritzelColorHelper.resolveThemeColor(object?.stroke, currentTheme), "stroke-width": object?.strokeWidth, "stroke-linecap": "round", "marker-start": object.hasStartArrow ? `url(#${object.startMarkerId})` : undefined, "marker-end": object.hasEndArrow ? `url(#${object.endMarkerId})` : undefined }))), alignment_enum.KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (index.h("img", { ref: el => object.mount(el), src: object.src, style: {
+                }, viewBox: object?.viewBox }, (object.hasStartArrow || object.hasEndArrow) && (index.h("defs", null, object.hasStartArrow && (index.h("marker", { id: object.startMarkerId, markerWidth: object.getArrowSize('start'), markerHeight: object.getArrowSize('start'), refX: 0, refY: object.getArrowSize('start') / 2, orient: "auto-start-reverse", markerUnits: "userSpaceOnUse" }, index.h("path", { d: object.getArrowPath(object.arrows?.start?.style), fill: object.getArrowFill('start'), transform: `scale(${object.getArrowSize('start') / 10})` }))), object.hasEndArrow && (index.h("marker", { id: object.endMarkerId, markerWidth: object.getArrowSize('end'), markerHeight: object.getArrowSize('end'), refX: 0, refY: object.getArrowSize('end') / 2, orient: "auto", markerUnits: "userSpaceOnUse" }, index.h("path", { d: object.getArrowPath(object.arrows?.end?.style), fill: object.getArrowFill('end'), transform: `scale(${object.getArrowSize('end') / 10})` }))))), index.h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: "transparent", "stroke-width": Math.max(object?.strokeWidth || 0, 10), "stroke-linecap": "round" }), index.h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: workspace_migrations.KritzelColorHelper.resolveThemeColor(object?.stroke, currentTheme), "stroke-width": object?.strokeWidth, "stroke-linecap": "round", "marker-start": object.hasStartArrow ? `url(#${object.startMarkerId})` : undefined, "marker-end": object.hasEndArrow ? `url(#${object.endMarkerId})` : undefined }))), workspace_migrations.KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (index.h("img", { ref: el => object.mount(el), src: object.src, style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -26358,15 +26425,15 @@ const KritzelEngine = class {
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                    backgroundColor: alignment_enum.KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
-                    borderColor: alignment_enum.KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme),
+                    backgroundColor: workspace_migrations.KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
+                    borderColor: workspace_migrations.KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme),
                     borderWidth: object.borderWidth + 'px',
                     borderStyle: 'solid',
                     padding: object.padding + 'px',
                     overflow: 'visible',
                     userSelect: 'none',
                     imageRendering: this.core.store.state.isScaling || this.core.store.state.isPanning ? 'pixelated' : 'auto',
-                }, draggable: false, onDragStart: e => e.preventDefault() })), alignment_enum.KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (index.h("div", { ref: el => object.mount(el), style: {
+                }, draggable: false, onDragStart: e => e.preventDefault() })), workspace_migrations.KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (index.h("div", { ref: el => object.mount(el), style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -26376,14 +26443,14 @@ const KritzelEngine = class {
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                    backgroundColor: alignment_enum.KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
-                    borderColor: alignment_enum.KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme),
+                    backgroundColor: workspace_migrations.KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
+                    borderColor: workspace_migrations.KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme),
                     borderWidth: object.borderWidth + 'px',
                     borderStyle: 'solid',
                     padding: object.padding + 'px',
                     overflow: 'hidden',
                     display: 'block',
-                } })), alignment_enum.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (index.h("div", { ref: el => object.mount(el), style: {
+                } })), workspace_migrations.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (index.h("div", { ref: el => object.mount(el), style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -26393,7 +26460,7 @@ const KritzelEngine = class {
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                } })), alignment_enum.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox') && (index.h("div", { ref: el => object.mount(el), style: {
+                } })), workspace_migrations.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox') && (index.h("div", { ref: el => object.mount(el), style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -26403,11 +26470,11 @@ const KritzelEngine = class {
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                    backgroundColor: alignment_enum.KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
-                    borderColor: alignment_enum.KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme),
+                    backgroundColor: workspace_migrations.KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
+                    borderColor: workspace_migrations.KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme),
                     borderWidth: object.borderWidth + 'px',
                     borderStyle: 'solid',
-                } })), alignment_enum.KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (index.h("div", { style: {
+                } })), workspace_migrations.KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (index.h("div", { style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -26425,9 +26492,9 @@ const KritzelEngine = class {
                     width: 'max-content',
                     transformOrigin: 'top left',
                     transform: `scale(${object.scaleFactor})`,
-                    backgroundColor: alignment_enum.KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
+                    backgroundColor: workspace_migrations.KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
                     overflow: 'visible',
-                } }))), alignment_enum.KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (index.h("div", { ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
+                } }))), workspace_migrations.KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (index.h("div", { ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -26446,7 +26513,7 @@ const KritzelEngine = class {
                     height: '100%',
                     overflow: 'visible',
                     pointerEvents: 'none',
-                }, viewBox: object.viewBox, preserveAspectRatio: "none" }, index.h("path", { d: object.getSvgPath(), fill: alignment_enum.KritzelColorHelper.resolveThemeColor(object.fillColor, currentTheme), stroke: alignment_enum.KritzelColorHelper.resolveThemeColor(object.strokeColor, currentTheme), "stroke-width": object.strokeWidth })), index.h("div", { ref: el => object.mountTextEditor(el), style: {
+                }, viewBox: object.viewBox, preserveAspectRatio: "none" }, index.h("path", { d: object.getSvgPath(), fill: workspace_migrations.KritzelColorHelper.resolveThemeColor(object.fillColor, currentTheme), stroke: workspace_migrations.KritzelColorHelper.resolveThemeColor(object.strokeColor, currentTheme), "stroke-width": object.strokeWidth })), index.h("div", { ref: el => object.mountTextEditor(el), style: {
                     position: 'absolute',
                     top: '0',
                     left: '0',
@@ -26534,7 +26601,7 @@ const KritzelEngine = class {
                 } }), index.h("circle", { class: "rotation-handle-overlay", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.core.store.state?.scale), r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
                     paintOrder: 'fill',
-                } }))))), this.core.displaySelectionLineUI(object) && alignment_enum.KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (index.h("g", { class: "selection-line-ui", style: { pointerEvents: 'none' } }, index.h("g", { class: "selection-line-borders" }, index.h("path", { class: "selection-line-border", d: this.core.anchorManager.computeClippedLinePath(object, true), style: {
+                } }))))), this.core.displaySelectionLineUI(object) && workspace_migrations.KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (index.h("g", { class: "selection-line-ui", style: { pointerEvents: 'none' } }, index.h("g", { class: "selection-line-borders" }, index.h("path", { class: "selection-line-border", d: this.core.anchorManager.computeClippedLinePath(object, true), style: {
                     stroke: 'var(--kritzel-selection-border-color, #007AFF)',
                     strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
                     strokeLinecap: 'round',
@@ -26656,7 +26723,7 @@ const KritzelEngine = class {
                     y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
                 }, this.core.store.selectionGroup?.objects);
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof alignment_enum.KritzelEraserTool && !this.core.store.state.isScaling && index.h("kritzel-cursor-trail", { core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof workspace_migrations.KritzelEraserTool && !this.core.store.state.isScaling && index.h("kritzel-cursor-trail", { core: this.core })));
     }
     static get watchers() { return {
         "workspace": [{
@@ -26697,6 +26764,9 @@ const KritzelEngine = class {
             }],
         "viewportBoundaryBottom": [{
                 "onViewportBoundaryBottomChange": 0
+            }],
+        "debugInfo": [{
+                "onDebugInfoChange": 0
             }]
     }; }
 };
@@ -26884,7 +26954,7 @@ const KritzelIcon = class {
     label;
     size = 24;
     render() {
-        const svgContent = alignment_enum.KritzelIconRegistry.get(this.name);
+        const svgContent = workspace_migrations.KritzelIconRegistry.get(this.name);
         if (!svgContent) {
             console.error(`[kritzel-icon] Icon "${this.name}" not found in registry.`);
             return index.h("span", { class: "error-icon", "aria-label": `Error: Icon ${this.name} not found` }, "?");
@@ -27082,7 +27152,7 @@ const KritzelLoginDialog = class {
 };
 KritzelLoginDialog.style = kritzelLoginDialogCss();
 
-const kritzelMasterDetailCss = () => `:host{display:block;width:100%;height:100%}.master-detail-container{display:flex;width:100%;height:100%;min-height:var(--kritzel-master-detail-min-height, 300px);gap:var(--kritzel-master-detail-gap, 0);background-color:var(--kritzel-master-detail-background-color, transparent)}.master-menu{display:flex;flex-direction:column;width:var(--kritzel-master-detail-menu-width, 200px);min-width:var(--kritzel-master-detail-menu-min-width, 160px);padding:var(--kritzel-master-detail-menu-padding, 8px);background-color:var(--kritzel-master-detail-menu-background-color, #ffffff);border-right:var(--kritzel-master-detail-menu-border-right, 1px solid #ebebeb);gap:var(--kritzel-master-detail-menu-gap, 4px);overflow-y:auto}.menu-item{display:flex;align-items:center;gap:var(--kritzel-master-detail-menu-item-gap, 10px);padding:var(--kritzel-master-detail-menu-item-padding, 10px 12px);border:none;border-radius:var(--kritzel-master-detail-menu-item-border-radius, 6px);background-color:var(--kritzel-master-detail-menu-item-background-color, transparent);color:var(--kritzel-master-detail-menu-item-color, #333333);font-family:inherit;font-size:var(--kritzel-master-detail-menu-item-font-size, 14px);font-weight:var(--kritzel-master-detail-menu-item-font-weight, 400);text-align:left;cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 150ms ease, color 150ms ease;-webkit-tap-highlight-color:transparent}.menu-item:hover:not(.is-disabled){background-color:var(--kritzel-master-detail-menu-item-hover-background-color, #ebebeb)}.menu-item:active:not(.is-disabled){background-color:var(--kritzel-master-detail-menu-item-active-background-color, #e0e0e0)}.menu-item.is-selected{background-color:var(--kritzel-master-detail-menu-item-selected-background-color, #0066cc);color:var(--kritzel-master-detail-menu-item-selected-color, #ffffff);font-weight:var(--kritzel-master-detail-menu-item-selected-font-weight, 500)}.menu-item.is-selected:hover{background-color:var(--kritzel-master-detail-menu-item-selected-hover-background-color, #0052a3)}.menu-item.is-disabled{color:var(--kritzel-master-detail-menu-item-disabled-color, #999999);cursor:not-allowed;opacity:0.6}.menu-item:focus-visible{outline:var(--kritzel-master-detail-menu-item-focus-outline, revert);outline-offset:var(--kritzel-master-detail-menu-item-focus-outline-offset, revert)}.menu-item-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.menu-item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.detail-panel{flex:1;min-height:0;padding:var(--kritzel-master-detail-detail-padding, 16px);background-color:var(--kritzel-master-detail-detail-background-color, #ffffff);overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}.detail-panel:focus{outline:none}.detail-panel:focus-visible{outline:var(--kritzel-master-detail-detail-focus-outline, revert);outline-offset:var(--kritzel-master-detail-detail-focus-outline-offset, revert)}.mobile-back-button{display:none;align-items:center;gap:8px;background:none;border:none;padding:0 0 16px 0;cursor:pointer;color:var(--kritzel-master-detail-back-button-color, #333333);font-weight:500;font-size:14px;font-family:inherit}.mobile-back-icon{display:flex;align-items:center;flex-shrink:0}.menu-item-chevron{display:none;flex-shrink:0;margin-left:auto;color:var(--kritzel-master-detail-menu-item-chevron-color, #999999)}.menu-item-chevron svg{width:16px;height:16px;stroke:currentColor}@media (max-width: 768px){.master-menu{width:100%;border-right:none}.detail-panel{display:none;width:100%}.master-detail-container.is-mobile-detail-visible .master-menu{display:none}.master-detail-container.is-mobile-detail-visible .detail-panel{display:block}.mobile-back-button{display:flex}.menu-item.is-selected{background-color:transparent;color:var(--kritzel-master-detail-menu-item-color, #333333);font-weight:var(--kritzel-master-detail-menu-item-font-weight, 400)}.menu-item.is-selected:hover{background-color:var(--kritzel-master-detail-menu-item-hover-background-color, #ebebeb)}.menu-item-chevron{display:flex;align-items:center}}`;
+const kritzelMasterDetailCss = () => `:host{display:block;width:100%;height:100%}.master-detail-container{display:flex;width:100%;height:100%;min-height:var(--kritzel-master-detail-min-height, 300px);gap:var(--kritzel-master-detail-gap, 0);background-color:var(--kritzel-master-detail-background-color, transparent)}.master-menu{display:flex;flex-direction:column;width:var(--kritzel-master-detail-menu-width, 200px);min-width:var(--kritzel-master-detail-menu-min-width, 160px);padding:var(--kritzel-master-detail-menu-padding, 8px);background-color:var(--kritzel-master-detail-menu-background-color, #ffffff);border-right:var(--kritzel-master-detail-menu-border-right, 1px solid #ebebeb);gap:var(--kritzel-master-detail-menu-gap, 4px);overflow-y:auto}.menu-item{display:flex;align-items:center;gap:var(--kritzel-master-detail-menu-item-gap, 10px);padding:var(--kritzel-master-detail-menu-item-padding, 10px 12px);border:none;border-radius:var(--kritzel-master-detail-menu-item-border-radius, 6px);background-color:var(--kritzel-master-detail-menu-item-background-color, transparent);color:var(--kritzel-master-detail-menu-item-color, #333333);font-family:inherit;font-size:var(--kritzel-master-detail-menu-item-font-size, 14px);font-weight:var(--kritzel-master-detail-menu-item-font-weight, 400);text-align:left;cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 150ms ease, color 150ms ease;-webkit-tap-highlight-color:transparent}.menu-item:hover:not(.is-disabled){background-color:var(--kritzel-master-detail-menu-item-hover-background-color, #ebebeb)}.menu-item:active:not(.is-disabled){background-color:var(--kritzel-master-detail-menu-item-active-background-color, #e0e0e0)}.menu-item.is-selected{background-color:var(--kritzel-master-detail-menu-item-selected-background-color, #0066cc);color:var(--kritzel-master-detail-menu-item-selected-color, #ffffff);font-weight:var(--kritzel-master-detail-menu-item-selected-font-weight, 500)}.menu-item.is-selected:hover{background-color:var(--kritzel-master-detail-menu-item-selected-hover-background-color, #0052a3)}.menu-item.is-disabled{color:var(--kritzel-master-detail-menu-item-disabled-color, #999999);cursor:not-allowed;opacity:0.6}.menu-item:focus-visible{outline:var(--kritzel-master-detail-menu-item-focus-outline, revert);outline-offset:var(--kritzel-master-detail-menu-item-focus-outline-offset, revert)}.menu-item-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.menu-item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.detail-panel{flex:1;min-height:0;padding:var(--kritzel-master-detail-detail-padding, 16px);background-color:var(--kritzel-master-detail-detail-background-color, #ffffff);overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}.detail-panel:focus{outline:none}.detail-panel:focus-visible{outline:var(--kritzel-master-detail-detail-focus-outline, revert);outline-offset:var(--kritzel-master-detail-detail-focus-outline-offset, revert)}.mobile-back-button{display:none;align-items:center;gap:8px;background:none;border:none;padding:0 0 16px 0;cursor:pointer;-webkit-tap-highlight-color:transparent;color:var(--kritzel-master-detail-back-button-color, #333333);font-weight:500;font-size:14px;font-family:inherit}.mobile-back-icon{display:flex;align-items:center;flex-shrink:0}.menu-item-chevron{display:none;flex-shrink:0;margin-left:auto;color:var(--kritzel-master-detail-menu-item-chevron-color, #999999)}.menu-item-chevron svg{width:16px;height:16px;stroke:currentColor}@media (max-width: 768px){.master-menu{width:100%;border-right:none}.detail-panel{display:none;width:100%}.master-detail-container.is-mobile-detail-visible .master-menu{display:none}.master-detail-container.is-mobile-detail-visible .detail-panel{display:block}.mobile-back-button{display:flex}.menu-item.is-selected{background-color:transparent;color:var(--kritzel-master-detail-menu-item-color, #333333);font-weight:var(--kritzel-master-detail-menu-item-font-weight, 400)}.menu-item.is-selected:hover{background-color:var(--kritzel-master-detail-menu-item-hover-background-color, #ebebeb)}.menu-item-chevron{display:flex;align-items:center}}`;
 
 const KritzelMasterDetail = class {
     constructor(hostRef) {
@@ -27296,7 +27366,7 @@ const KritzelMenuItem = class {
             requestAnimationFrame(() => {
                 if (this.inputRef) {
                     this.inputRef.focus();
-                    if (alignment_enum.KritzelDevicesHelper.isIOS()) {
+                    if (workspace_migrations.KritzelDevicesHelper.isIOS()) {
                         const length = this.inputRef.value.length;
                         this.inputRef.setSelectionRange(length, length);
                     }
@@ -27315,7 +27385,7 @@ const KritzelMenuItem = class {
         this.focusInput();
     }
     setDeviceSpecificStyles = () => {
-        const isTouchDevice = alignment_enum.KritzelDevicesHelper.isTouchDevice();
+        const isTouchDevice = workspace_migrations.KritzelDevicesHelper.isTouchDevice();
         if (isTouchDevice) {
             this.host.style.setProperty('--kritzel-menu-item-overlay-background-color', 'transparent');
             this.host.style.setProperty('--kritzel-menu-item-button-hover-background-color', 'transparent');
@@ -27380,7 +27450,7 @@ const KritzelMenuItem = class {
 };
 KritzelMenuItem.style = kritzelMenuItemCss();
 
-const kritzelMoreMenuCss = () => `:host{display:inline-flex;padding:var(--kritzel-more-menu-padding, 4px);background-color:var(--kritzel-more-menu-background-color, #ffffff);border-radius:var(--kritzel-more-menu-border-radius, 12px);box-shadow:var(--kritzel-more-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-more-menu-border, 1px solid #ebebeb)}.more-menu-button{display:flex;align-items:center;justify-content:center;width:var(--kritzel-more-menu-button-width, 40px);height:var(--kritzel-more-menu-button-height, 40px);padding:0;border:none;border-radius:var(--kritzel-more-menu-inner-border-radius, 12px);background-color:transparent;cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:none;transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--kritzel-more-menu-button-color, currentColor)}.more-menu-button:hover{background-color:var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.more-menu-button:focus-visible{background-color:var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.more-menu-button:active{background-color:var(--kritzel-more-menu-button-active-background-color, hsl(0, 0%, 0%, 4.3%))}`;
+const kritzelMoreMenuCss = () => `:host{display:inline-flex;padding:var(--kritzel-more-menu-padding, 4px);background-color:var(--kritzel-more-menu-background-color, #ffffff);border-radius:var(--kritzel-more-menu-border-radius, 12px);box-shadow:var(--kritzel-more-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-more-menu-border, 1px solid #ebebeb)}:host(.mobile){--kritzel-more-menu-button-hover-background-color:transparent;--kritzel-more-menu-button-active-background-color:transparent}.more-menu-button{display:flex;align-items:center;justify-content:center;width:var(--kritzel-more-menu-button-width, 40px);height:var(--kritzel-more-menu-button-height, 40px);padding:0;border:none;border-radius:var(--kritzel-more-menu-inner-border-radius, 12px);background-color:transparent;cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:none;transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--kritzel-more-menu-button-color, currentColor)}.more-menu-button:hover{background-color:var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.more-menu-button:focus-visible{background-color:var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.more-menu-button:active{background-color:var(--kritzel-more-menu-button-active-background-color, hsl(0, 0%, 0%, 4.3%))}`;
 
 const KritzelMoreMenu = class {
     constructor(hostRef) {
@@ -27411,6 +27481,7 @@ const KritzelMoreMenu = class {
      */
     itemSelect;
     menuAnchor = null;
+    isTouchDevice = workspace_migrations.KritzelDevicesHelper.isTouchDevice();
     toggleMenu = (event) => {
         event.stopPropagation();
         if (this.menuAnchor) {
@@ -27436,7 +27507,7 @@ const KritzelMoreMenu = class {
         this.closeMenu();
     };
     render() {
-        return (index.h(index.Host, { key: '01e6914520c01bb58af817148b9a013e906209d8' }, index.h("button", { key: '4e38c8b7f82e8fb06872c4cf84e6611d544f3ea8', class: "more-menu-button", onClick: this.toggleMenu }, index.h("kritzel-icon", { key: 'd682c22f8445bb024dd6fa9ee3dde986b18420e5', name: this.icon, size: this.iconSize })), index.h("kritzel-portal", { key: '117e69ab70d77cb612ac4e4eca196b8a0b03326b', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, index.h("kritzel-menu", { key: 'c440f9a68c199dbfdd33d645bb160908b6699b4e', items: this.visibleItems, onItemSelect: this.handleMenuItemSelect }))));
+        return (index.h(index.Host, { key: '02d18106b6a932cd4508bebc6ada3416f38eafc6', class: { mobile: this.isTouchDevice } }, index.h("button", { key: 'dff3f7bd69f8f1eafbff03b9ecc2f96c85784a85', class: "more-menu-button", onClick: this.toggleMenu }, index.h("kritzel-icon", { key: '28586ce5dd15be347cc59555608a2cbbf2978a2b', name: this.icon, size: this.iconSize })), index.h("kritzel-portal", { key: '3ca9260c3602a639687bc1341736c15a1b5c10a7', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, index.h("kritzel-menu", { key: 'e8e88cc9f827d93d9adcc86ad1041774cfc282af', items: this.visibleItems, onItemSelect: this.handleMenuItemSelect }))));
     }
 };
 KritzelMoreMenu.style = kritzelMoreMenuCss();
@@ -27724,7 +27795,7 @@ const KritzelPortal = class {
         this.calculatePosition();
     }
     portal;
-    id = `portal-${alignment_enum.ObjectHelper.generateUUID()}`;
+    id = `portal-${workspace_migrations.ObjectHelper.generateUUID()}`;
     defaultOffset = 0;
     minLeft = 0;
     themeObserver;
@@ -27923,7 +27994,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.1.69';
+const KRITZEL_VERSION = '0.1.71';
 
 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)}`;
 
@@ -27935,10 +28006,17 @@ const DEFAULT_VIEWPORT_BOUNDARY_LEFT = -Infinity;
 const DEFAULT_VIEWPORT_BOUNDARY_RIGHT = Infinity;
 const DEFAULT_VIEWPORT_BOUNDARY_TOP = -Infinity;
 const DEFAULT_VIEWPORT_BOUNDARY_BOTTOM = Infinity;
+const DEFAULT_DEBUG_INFO = {
+    showViewportInfo: false,
+    showObjectInfo: false,
+    showSyncProviderInfo: true,
+    showMigrationInfo: true,
+};
 const SETTINGS_CATEGORIES = [
     { id: 'general', label: 'General', icon: 'settings' },
     { id: 'viewport', label: 'Viewport', icon: 'viewport' },
     { id: 'shortcuts', label: 'Keyboard Shortcuts', icon: 'command' },
+    { id: 'developer', label: 'Developer Options', icon: 'braces' },
     { id: 'about', label: 'About', icon: 'info' },
 ];
 const KritzelSettings = class {
@@ -27961,6 +28039,7 @@ const KritzelSettings = class {
     viewportBoundaryRight = DEFAULT_VIEWPORT_BOUNDARY_RIGHT;
     viewportBoundaryTop = DEFAULT_VIEWPORT_BOUNDARY_TOP;
     viewportBoundaryBottom = DEFAULT_VIEWPORT_BOUNDARY_BOTTOM;
+    debugInfo = { ...DEFAULT_DEBUG_INFO };
     /** Emitted when settings change */
     settingsChange;
     componentWillLoad() {
@@ -27998,6 +28077,9 @@ const KritzelSettings = class {
                 if (typeof parsed.viewportBoundaryBottom === 'number') {
                     this.viewportBoundaryBottom = parsed.viewportBoundaryBottom;
                 }
+                if (parsed.debugInfo) {
+                    this.debugInfo = { ...DEFAULT_DEBUG_INFO, ...parsed.debugInfo };
+                }
             }
             catch {
                 // Invalid JSON, use defaults
@@ -28014,6 +28096,7 @@ const KritzelSettings = class {
             viewportBoundaryRight: this.viewportBoundaryRight,
             viewportBoundaryTop: this.viewportBoundaryTop,
             viewportBoundaryBottom: this.viewportBoundaryBottom,
+            debugInfo: this.debugInfo,
         };
         localStorage.setItem(this.storageKey, JSON.stringify(settings));
         this.settingsChange.emit(settings);
@@ -28050,6 +28133,10 @@ const KritzelSettings = class {
         this.viewportBoundaryBottom = event.detail ?? DEFAULT_VIEWPORT_BOUNDARY_BOTTOM;
         this.saveSettings();
     };
+    handleDebugInfoChange = (key) => (event) => {
+        this.debugInfo = { ...this.debugInfo, [key]: event.detail };
+        this.saveSettings();
+    };
     async open() {
         this.isDialogOpen = true;
     }
@@ -28093,14 +28180,16 @@ const KritzelSettings = class {
                 return (index.h("div", { class: "settings-content" }, index.h("h3", null, "Viewport Settings"), index.h("div", { class: "settings-group" }, index.h("div", { class: "settings-item" }, index.h("label", { class: "settings-label" }, "Minimum Zoom Level"), index.h("p", { class: "settings-description" }, "Sets the minimum zoom level. Lower values allow zooming out further to see more of the canvas."), index.h("kritzel-numeric-input", { value: this.scaleMin, min: 0.0001, max: 1, step: 0.0001, onValueChange: this.handleScaleMinChange })), index.h("div", { class: "settings-item" }, index.h("label", { class: "settings-label" }, "Maximum Zoom Level"), index.h("p", { class: "settings-description" }, "Sets the maximum zoom level. Higher values allow zooming in closer for detailed work."), index.h("kritzel-numeric-input", { value: this.scaleMax, min: 1, max: 1000, step: 1, onValueChange: this.handleScaleMaxChange })), index.h("div", { class: "settings-item" }, index.h("label", { class: "settings-label" }, "Viewport Boundary Left"), index.h("p", { class: "settings-description" }, "Left boundary in world coordinates. Set to limit how far left the viewport can pan."), index.h("kritzel-numeric-input", { value: this.viewportBoundaryLeft, step: 100, placeholder: "Infinite", onValueChange: this.handleViewportBoundaryLeftChange })), index.h("div", { class: "settings-item" }, index.h("label", { class: "settings-label" }, "Viewport Boundary Right"), index.h("p", { class: "settings-description" }, "Right boundary in world coordinates. Set to limit how far right the viewport can pan."), index.h("kritzel-numeric-input", { value: this.viewportBoundaryRight, step: 100, placeholder: "Infinite", onValueChange: this.handleViewportBoundaryRightChange })), index.h("div", { class: "settings-item" }, index.h("label", { class: "settings-label" }, "Viewport Boundary Top"), index.h("p", { class: "settings-description" }, "Top boundary in world coordinates. Set to limit how far up the viewport can pan."), index.h("kritzel-numeric-input", { value: this.viewportBoundaryTop, step: 100, placeholder: "Infinite", onValueChange: this.handleViewportBoundaryTopChange })), index.h("div", { class: "settings-item" }, index.h("label", { class: "settings-label" }, "Viewport Boundary Bottom"), index.h("p", { class: "settings-description" }, "Bottom boundary in world coordinates. Set to limit how far down the viewport can pan."), index.h("kritzel-numeric-input", { value: this.viewportBoundaryBottom, step: 100, placeholder: "Infinite", onValueChange: this.handleViewportBoundaryBottomChange })))));
             case 'shortcuts':
                 return (index.h("div", { class: "settings-content" }, index.h("h3", null, "Keyboard Shortcuts"), index.h("div", { class: "shortcuts-list" }, Array.from(this.groupShortcutsByCategory()).map(([category, shortcuts]) => (index.h("div", { class: "shortcuts-category", key: category }, index.h("h4", { class: "shortcuts-category-title" }, category), index.h("div", { class: "shortcuts-group" }, shortcuts.map(shortcut => (index.h("div", { class: "shortcut-item", key: shortcut.key + shortcut.label }, index.h("span", { class: "shortcut-label" }, shortcut.label), index.h("kbd", { class: "shortcut-key" }, this.formatKeyCombo(shortcut))))))))))));
+            case 'developer':
+                return (index.h("div", { class: "settings-content" }, index.h("h3", null, "Developer Options"), index.h("div", { class: "settings-group" }, index.h("div", { class: "settings-item" }, index.h("label", { class: "settings-label" }, "Show Viewport Info"), index.h("p", { class: "settings-description" }, "Display viewport debug information such as position, zoom level, and boundaries."), index.h("kritzel-slide-toggle", { checked: this.debugInfo.showViewportInfo, label: "Show Viewport Info", onCheckedChange: this.handleDebugInfoChange('showViewportInfo') })), index.h("div", { class: "settings-item" }, index.h("label", { class: "settings-label" }, "Show Object Info"), index.h("p", { class: "settings-description" }, "Display debug information about objects on the canvas."), index.h("kritzel-slide-toggle", { checked: this.debugInfo.showObjectInfo, label: "Show Object Info", onCheckedChange: this.handleDebugInfoChange('showObjectInfo') })), index.h("div", { class: "settings-item" }, index.h("label", { class: "settings-label" }, "Show Sync Provider Info"), index.h("p", { class: "settings-description" }, "Display debug information about the sync provider connection status."), index.h("kritzel-slide-toggle", { checked: this.debugInfo.showSyncProviderInfo, label: "Show Sync Provider Info", onCheckedChange: this.handleDebugInfoChange('showSyncProviderInfo') })), index.h("div", { class: "settings-item" }, index.h("label", { class: "settings-label" }, "Show Migration Info"), index.h("p", { class: "settings-description" }, "Display debug information about data migrations."), index.h("kritzel-slide-toggle", { checked: this.debugInfo.showMigrationInfo, label: "Show Migration Info", onCheckedChange: this.handleDebugInfoChange('showMigrationInfo') })))));
             case 'about':
-                return (index.h("div", { class: "settings-content" }, index.h("h3", null, "About"), index.h("p", null, "Kritzel - A drawing application"), index.h("p", { class: "version-info" }, "Version ", KRITZEL_VERSION)));
+                return (index.h("div", { class: "settings-content" }, index.h("h3", null, "About"), index.h("p", null, "Kritzel - A drawing application"), index.h("p", { class: "version-info" }, "Version ", KRITZEL_VERSION), index.h("p", { class: "version-info" }, "App-State Schema v", workspace_migrations.CURRENT_APP_STATE_SCHEMA_VERSION), index.h("p", { class: "version-info" }, "Workspace Schema v", workspace_migrations.CURRENT_WORKSPACE_SCHEMA_VERSION)));
             default:
                 return null;
         }
     }
     render() {
-        return (index.h(index.Host, { key: '358564b01ec3dceb48562a7382b5e6a71f82eb5c' }, index.h("kritzel-dialog", { key: 'ae60c37956c2fae6c16c0c75df94a8210e74cecd', isOpen: this.isDialogOpen, dialogTitle: "Settings", size: "large", onDialogClose: this.closeDialog }, index.h("kritzel-master-detail", { key: '5e26848b125e46e0ddad5f145ffeb380b7321d2e', items: SETTINGS_CATEGORIES, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
+        return (index.h(index.Host, { key: 'fc940d4154b06378cf13f7cde5238f4a1ac1d2ba' }, index.h("kritzel-dialog", { key: '0c50f5cb3570eba67ce4c04f9f453361e0c9626a', isOpen: this.isDialogOpen, dialogTitle: "Settings", size: "large", onDialogClose: this.closeDialog }, index.h("kritzel-master-detail", { key: '974adda5868d1261784366b59e285a0c45d265ca', items: SETTINGS_CATEGORIES, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
     }
 };
 KritzelSettings.style = kritzelSettingsCss();
@@ -28300,7 +28389,7 @@ const KritzelSplitButton = class {
     menuOpen;
     menuClose;
     isMenuOpen = false;
-    isTouchDevice = alignment_enum.KritzelDevicesHelper.isTouchDevice();
+    isTouchDevice = workspace_migrations.KritzelDevicesHelper.isTouchDevice();
     anchorElement;
     menuScrollTop = 0;
     splitMenuButtonRef;
@@ -28308,6 +28397,7 @@ const KritzelSplitButton = class {
     async open() {
         if (this.isMenuOpen)
             return;
+        window.dispatchEvent(new CustomEvent('kritzel-dismiss-menus'));
         this.isMenuOpen = true;
         this.anchorElement = this.host;
         this.menuOpen.emit();
@@ -28332,6 +28422,7 @@ const KritzelSplitButton = class {
     };
     openMenu = (event) => {
         event.stopPropagation();
+        window.dispatchEvent(new CustomEvent('kritzel-dismiss-menus'));
         this.isMenuOpen = true;
         this.anchorElement = this.host;
         this.menuOpen.emit();
@@ -28364,7 +28455,7 @@ const KritzelSplitButton = class {
         this.menuScrollTop = event.target.scrollTop;
     };
     render() {
-        return (index.h(index.Host, { key: '2633a815a27551b87f788c61e6e35a043375d164', class: { mobile: this.isTouchDevice } }, index.h("button", { key: 'd7dcb9c63d5cfa9aea13f3c474bdf612206a0c0d', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && index.h("kritzel-icon", { key: '31501575573a05284ad456fee6fa220a2da5cea5', name: this.buttonIcon })), index.h("div", { key: 'a4d4a4d8e12bb9cdea46e224685eecb483cbb638', class: "split-divider" }), index.h("button", { key: 'e762790eeb2c0b7d36b356dcde2a369b66758249', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, index.h("kritzel-icon", { key: 'd57f53e4f8a4b535731b2a02455d1e3088d7ab1f', name: this.dropdownIcon })), index.h("kritzel-portal", { key: '4990a1e523b502712422ff1414b657d0f7c5d8a9', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, index.h("kritzel-menu", { key: 'e28dd4b072b0d13393c6bb350eed67c7d69b985c', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
+        return (index.h(index.Host, { key: '1e85f2b22cde41378d03710bd1332e2eb91ebe5a', class: { mobile: this.isTouchDevice } }, index.h("button", { key: '56573ad5655b2f61e1ebf3c4d85b489375beb62e', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && index.h("kritzel-icon", { key: '335c2f5418e305f3e48e3caabc4c48001ddd5ec3', name: this.buttonIcon })), index.h("div", { key: '733e48020f3b21b22de3774323e5a2d024686c2c', class: "split-divider" }), index.h("button", { key: '650cd557b856b5527910cbdeb6d14fe7a88bc0ab', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, index.h("kritzel-icon", { key: '3aaacbcdd66583e3884fe44777794209753fe594', name: this.dropdownIcon })), index.h("kritzel-portal", { key: 'd0ca70c21dfbf1684ab84650a31aae77df5cb52e', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, index.h("kritzel-menu", { key: '9e38d4d6e1c82b6dca3c6d23fb5c0df12bfbefb4', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
     }
 };
 KritzelSplitButton.style = kritzelSplitButtonCss();
@@ -28441,7 +28532,7 @@ const KritzelToolConfig = class {
     currentOpacity = 1;
     updateTrigger = 0;
     handleSelectionChange() {
-        if (this.tool instanceof alignment_enum.KritzelSelectionTool) {
+        if (this.tool instanceof workspace_migrations.KritzelSelectionTool) {
             this.config = KritzelToolConfigHelper.getToolConfig(this.tool);
             if (this.config) {
                 this.updatePalette();
@@ -28465,10 +28556,10 @@ const KritzelToolConfig = class {
         const opacity = this.currentOpacity;
         const size = this.tool[this.config.sizeProperty];
         const displayValues = {
-            color: alignment_enum.KritzelColorHelper.applyOpacity(color, opacity, this.theme),
+            color: workspace_migrations.KritzelColorHelper.applyOpacity(color, opacity, this.theme),
             size,
         };
-        if (this.tool instanceof alignment_enum.KritzelTextTool) {
+        if (this.tool instanceof workspace_migrations.KritzelTextTool) {
             displayValues.fontFamily = this.tool.fontFamily;
         }
         this.displayValuesChange.emit(displayValues);
@@ -28831,7 +28922,7 @@ const KritzelWorkspaceManager = class {
     }
     async add() {
         await this.splitButtonRef.open();
-        this.newWorkspace = new alignment_enum.KritzelWorkspace(alignment_enum.ObjectHelper.generateUUID(), 'New Workspace');
+        this.newWorkspace = new workspace_migrations.KritzelWorkspace(workspace_migrations.ObjectHelper.generateUUID(), 'New Workspace');
         this.editingItemId = this.newWorkspace.id;
     }
     edit(item) {