kritzel-stencil 0.3.21 → 0.3.23

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-Xav9JFHg.js');
-var schema_constants = require('./schema.constants-IBG5VW_J.js');
+var schema_constants = require('./schema.constants-Lr_zNkox.js');
 var Y = require('yjs');
 require('y-indexeddb');
 require('y-websocket');
@@ -1400,71 +1400,6 @@ const KritzelCursorTrail = class {
 };
 KritzelCursorTrail.style = kritzelCursorTrailCss();
 
-class KritzelHTMLHelper {
-    static getNumericValueFromStyle(element, property) {
-        const value = window.getComputedStyle(element).getPropertyValue(property);
-        return parseFloat(value) || 0;
-    }
-    static getScrollableParent(element) {
-        if (!element) {
-            return window;
-        }
-        const parent = element.parentNode?.host ?? element.parentElement;
-        if (!parent || parent.tagName === 'BODY') {
-            return window;
-        }
-        const style = window.getComputedStyle(parent);
-        if (style.overflow === 'auto' || style.overflowY === 'auto' || style.overflow === 'scroll' || style.overflowY === 'scroll') {
-            return parent;
-        }
-        return this.getScrollableParent(parent);
-    }
-    static isElementInViewport(element) {
-        if (!element) {
-            return false;
-        }
-        const scrollableParent = this.getScrollableParent(element);
-        const rect = element.getBoundingClientRect();
-        if (scrollableParent === window) {
-            const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
-            const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
-            return rect.top >= 0 && rect.left >= 0 && rect.bottom <= viewportHeight && rect.right <= viewportWidth;
-        }
-        const parentRect = scrollableParent.getBoundingClientRect();
-        return rect.top >= parentRect.top && rect.left >= parentRect.left && rect.bottom <= parentRect.bottom && rect.right <= parentRect.right;
-    }
-    static getFocusableElements(root) {
-        if (!root)
-            return [];
-        const focusableElements = [];
-        const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex="-1"])';
-        const isVisible = (el) => {
-            const style = window.getComputedStyle(el);
-            return style.display !== 'none' && style.visibility !== 'hidden';
-        };
-        const find = (element) => {
-            // Check if the element itself is focusable
-            if (element instanceof HTMLElement && element.matches(focusableSelector) && !element.hasAttribute('disabled') && isVisible(element)) {
-                focusableElements.push(element);
-            }
-            // Traverse shadow DOM
-            if (element.shadowRoot) {
-                Array.from(element.shadowRoot.children).forEach(find);
-            }
-            // Traverse slotted content
-            if (element.tagName === 'SLOT') {
-                element.assignedElements({ flatten: true }).forEach(find);
-            }
-            // Traverse light DOM children if there is no shadow root
-            if (!element.shadowRoot) {
-                Array.from(element.children).forEach(find);
-            }
-        };
-        find(root);
-        return focusableElements;
-    }
-}
-
 const kritzelDialogCss = () => `:host{display:contents}.dialog-content{text-align:start;line-height:normal}.backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10002;display:flex;align-items:center;justify-content:center;background-color:var(--kritzel-dialog-backdrop-color, rgba(0, 0, 0, 0.5));opacity:1;transition:opacity 150ms ease-out}.backdrop.is-animating{opacity:0}.dialog-content{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-dialog-background-color, #ffffff);border-radius:var(--kritzel-dialog-border-radius, 12px);box-shadow:var(--kritzel-dialog-box-shadow, 0 4px 20px rgba(0, 0, 0, 0.15));border:var(--kritzel-dialog-border, 1px solid #ebebeb);max-height:var(--kritzel-dialog-max-height, 90vh);max-width:var(--kritzel-dialog-max-width, 90vw);overflow:hidden;transform:scale(1);opacity:1;transition:transform 200ms ease-out,     opacity 200ms ease-out;font-family:var(--kritzel-dialog-font-family, sans-serif)}.dialog-content.is-animating{transform:scale(0.95);opacity:0}.dialog-content.size-small{width:var(--kritzel-dialog-width-small, 320px);height:var(--kritzel-dialog-height-small, auto)}.dialog-content.size-medium{width:var(--kritzel-dialog-width-medium, 480px);height:var(--kritzel-dialog-height-medium, auto)}.dialog-content.size-large{width:var(--kritzel-dialog-width-large, 640px);height:var(--kritzel-dialog-height-large, auto)}.dialog-content.size-fullscreen{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}.backdrop.contained-fullscreen{background-color:transparent}.dialog-content.contained-fullscreen{border-radius:0}.dialog-content.contained-fullscreen .dialog-body{display:flex;flex-direction:column}.dialog-content.contained-fullscreen .dialog-body ::slotted(*){flex:1;min-height:0}@media (max-width: 576px), (max-height: 576px) and (orientation: landscape){.backdrop:has(.fullscreen-on-mobile){background-color:transparent}.dialog-content.fullscreen-on-mobile{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}.dialog-content.fullscreen-on-mobile .dialog-body{display:flex;flex-direction:column}.dialog-content.fullscreen-on-mobile .dialog-body ::slotted(*){flex:1;min-height:0}}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:var(--kritzel-dialog-header-padding, 16px 20px);border-bottom:var(--kritzel-dialog-header-border, 1px solid #ebebeb);gap:12px}.dialog-title{margin:0;font-size:var(--kritzel-dialog-title-font-size, 18px);font-weight:var(--kritzel-dialog-title-font-weight, 600);color:var(--kritzel-dialog-title-color, #1a1a1a);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.close-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--kritzel-dialog-close-button-border-radius, 6px);background-color:var(--kritzel-dialog-close-button-background, transparent);color:var(--kritzel-dialog-close-button-color, #666666);cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 150ms ease,     color 150ms ease;flex-shrink:0;-webkit-tap-highlight-color:transparent}.close-button:hover{background-color:var(--kritzel-dialog-close-button-hover-background, #f5f5f5);color:var(--kritzel-dialog-close-button-hover-color, #1a1a1a)}.close-button:active{background-color:var(--kritzel-dialog-close-button-active-background, #ebebeb)}.close-button:focus-visible{outline:revert;outline-offset:revert}.dialog-body{padding:var(--kritzel-dialog-body-padding, 20px);overflow-y:auto;flex:1;min-height:0;scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}.dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--kritzel-dialog-footer-gap, 8px);padding:var(--kritzel-dialog-footer-padding, 16px 20px);border-top:var(--kritzel-dialog-footer-border, 1px solid #ebebeb)}::slotted([slot='header']){flex:1}::slotted([slot='footer']){display:contents}`;
 
 const KritzelDialog = class {
@@ -1747,7 +1682,7 @@ const KritzelDialog = class {
         const dialogContent = this.host.shadowRoot?.querySelector('.dialog-content');
         if (!dialogContent)
             return;
-        const focusableElements = KritzelHTMLHelper.getFocusableElements(dialogContent);
+        const focusableElements = schema_constants.KritzelHTMLHelper.getFocusableElements(dialogContent);
         const slotElements = this.getSlottedFocusableElements();
         const allFocusable = [...focusableElements, ...slotElements];
         if (allFocusable.length > 0) {
@@ -1764,7 +1699,7 @@ const KritzelDialog = class {
             const assigned = slot.assignedElements({ flatten: true });
             assigned.forEach(el => {
                 // Use KritzelHTMLHelper to find focusable elements including those in nested shadow DOMs
-                const elements = KritzelHTMLHelper.getFocusableElements(el);
+                const elements = schema_constants.KritzelHTMLHelper.getFocusableElements(el);
                 focusable.push(...elements);
             });
         });
@@ -2226,6 +2161,7 @@ const KritzelEditor = class {
         showObjectInfo: false,
         showSyncProviderInfo: true,
         showMigrationInfo: true,
+        showAssetResolverInfo: false,
     };
     user;
     activeUsers;
@@ -3137,31 +3073,31 @@ const KritzelEditor = class {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
-        return (index.h(index.Host, { key: '07fe246b722ca64cfbdd8cc3474e6288c39d1128', style: {
+        return (index.h(index.Host, { key: '56b172459e6d940229dc1d4f409157e403ad5f27', style: {
                 opacity: this.isEditorVisible ? '1' : '0',
                 visibility: this.isEditorVisible ? 'visible' : 'hidden',
                 transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out',
-            } }, index.h("div", { key: '2d0db1e78161edb061779b5875114e901f8e79f8', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: '8fee1d57b0b868b673c41015453fd39a19f8cb43', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, terms: this.resolvedTerms, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-back-to-content", { key: 'f2a0305bf73bd14d7522974b7956a289a0a44258', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (index.h("div", { key: '918fe80193999ec072042500cd1eaf3670f5ed3c', class: "top-center-notification-layer", role: "presentation" }, index.h("div", { key: '0a5609b2b32f9f04bac03618803c14d9a891742c', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, index.h("kritzel-notification-card", { key: 'eb1ff7aeaee3a237baf3ba2d96a10ba03a8bf7fb', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), index.h("kritzel-engine", { key: '8783a87101f308029482ced926a8d2163aae1428', ref: el => {
+            } }, index.h("div", { key: '93a2195c14402f38416b2d377c684e2650418edb', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: '1b42b21bc35e1fc56202e19a78053e46d87ca51a', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, terms: this.resolvedTerms, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-back-to-content", { key: '3b90b69a5b83a6e5593d4f752c4094a2a3af8c4d', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (index.h("div", { key: '9c2ee1e10212145bf2f97a1a7f27746aa18cfc98', class: "top-center-notification-layer", role: "presentation" }, index.h("div", { key: 'a77b025329da64e1f1223a2f749aa2fc60e5c469', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, index.h("kritzel-notification-card", { key: '9ced0bc5213ec8c3387915cd71272a1f56161405', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), index.h("kritzel-engine", { key: '884b7f088e164a51c49158c409904ca5419f2d55', ref: el => {
                 if (el) {
                     this.engineRef = el;
                 }
-            }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, isPanningEnabled: this.isPanningEnabled, isZoomingEnabled: this.isZoomingEnabled, theme: this.theme, themes: this.themes, licenseKey: this.licenseKey, locale: this.locale, locales: this.locales, fallbackLocale: this.fallbackLocale, 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), onNotificationsChange: event => this.handleNotificationsChange(event) }), index.h("kritzel-controls", { key: '73a94f6baef4e0e26be4540ecd44d24588f5761b', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
+            }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, isPanningEnabled: this.isPanningEnabled, isZoomingEnabled: this.isZoomingEnabled, theme: this.theme, themes: this.themes, licenseKey: this.licenseKey, locale: this.locale, locales: this.locales, fallbackLocale: this.fallbackLocale, 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), onNotificationsChange: event => this.handleNotificationsChange(event) }), index.h("kritzel-controls", { key: '3a7c22f037d551636c53190eb07b318c2b857162', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
                 if (el) {
                     this.controlsRef = el;
                 }
-            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: 'b0653098e5e15b81f453a7f3c2b27f137eb38f2e', class: "bottom-left-buttons" }, index.h("kritzel-zoom-panel", { key: '33384aeb6bd32d17fb428bd9ed48e5d588ac60c0', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), index.h("div", { key: '37bed04c062b63a99c930362fb8ce30b58ed8872', class: "top-right-buttons" }, index.h("kritzel-settings", { key: '4e339573e3d8d48bc9803b9dd40a549bd056d147', ref: el => {
+            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: 'c0dad9086679397c46f5550c38686a9b7d8bae6c', class: "bottom-left-buttons" }, index.h("kritzel-zoom-panel", { key: '1639d6d2092ecd3fbc657dfdcfc3f12c02539329', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), index.h("div", { key: '45313b28a5e4bd75d09980e4765c2241d54fe1df', class: "top-right-buttons" }, index.h("kritzel-settings", { key: '33737a005cd6580505ee741be0dc40bd69873276', ref: el => {
                 if (el) {
                     this.settingsRef = el;
                 }
-            }, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], availableLocales: this.availableLocaleOptions, settings: this.currentSettingsConfig, terms: this.resolvedTerms, onSettingsChange: event => this.handleSettingsChange(event) }), index.h("kritzel-export", { key: '2a726ea5b56cd36ecf92bbab17d69d04baf73009', ref: el => {
+            }, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], availableLocales: this.availableLocaleOptions, settings: this.currentSettingsConfig, terms: this.resolvedTerms, onSettingsChange: event => this.handleSettingsChange(event) }), index.h("kritzel-export", { key: '9e13001850b15b9ce9d8a502466ed9fa05ac1518', ref: el => {
                 if (el) {
                     this.exportRef = el;
                 }
-            }, workspaceName: this.activeWorkspace?.name || 'workspace', terms: this.resolvedTerms, onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), index.h("kritzel-active-users", { key: '26d9bbf922b1d4158a0875ba42e7b598011973d5', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: '8179cc3e940c9fd8d97978af2bf52543f661a0fd', user: this.user, terms: this.resolvedTerms }), shouldShowLoginButton && (index.h("kritzel-button", { key: 'd4aa5bc108043eb103754d14f1b5df42ab73f8c4', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in')), index.h("kritzel-more-menu", { key: '17ac617bde379d7484dbeed39ac7168349b634a1', items: this.moreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), index.h("kritzel-share-dialog", { key: '881729b36d34ef3ac3d87fc51ad828fc20fa36cd', ref: el => {
+            }, workspaceName: this.activeWorkspace?.name || 'workspace', terms: this.resolvedTerms, onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), index.h("kritzel-active-users", { key: 'f2494af1241ecc068ace09b23cfd405c76bd1273', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: '7f199e3493805977b5e5b8d2c736f31729919f96', user: this.user, terms: this.resolvedTerms }), shouldShowLoginButton && (index.h("kritzel-button", { key: 'c6c192ddb1245acc771ac550c1fe3e4f9bc08eab', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in')), index.h("kritzel-more-menu", { key: '869194078a4c90d42c5ebd604bc58b4f55fc4cb6', items: this.moreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), index.h("kritzel-share-dialog", { key: '8daed8fd7267aca056b6a53626c721e2f23cead4', ref: el => {
                 if (el) {
                     this.shareDialogRef = el;
                 }
-            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: '5e34b647ac4c3e18981042d765b4d443422c5db3', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: 'b65ea0940cee31b152b60881180fab2445c92b0c', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -21366,7 +21302,7 @@ class KritzelKeyHandler extends schema_constants.KritzelBaseHandler {
         // of running global canvas shortcuts. Escape is the one exception — it
         // still runs through the shortcut system so it can collapse the text
         // selection (handled inside the shortcut's action).
-        if ((this._core.store.activeText || this._core.store.activeShape) && event.key !== 'Escape') {
+        if ((this._core.store.activeText || this._core.store.activeShape || this._core.store.activeInteractiveCustomElement) && event.key !== 'Escape') {
             return;
         }
         const shortcut = this.shortcuts.find(s => s.key === event.key && !!s.ctrl === event.ctrlKey && !!s.shift === event.shiftKey && (!s.condition || s.condition(this._core)));
@@ -21566,120 +21502,6 @@ class KritzelContextMenuHandler extends schema_constants.KritzelBaseHandler {
     }
 }
 
-/**
- * Represents a custom HTML element that can be placed and manipulated on the Kritzel canvas.
- * Extends KritzelBaseObject to inherit common object functionality like positioning,
- * scaling, and lifecycle management.
- */
-class KritzelCustomElement extends schema_constants.KritzelBaseObject {
-    __class__ = 'KritzelCustomElement';
-    /** The HTML element to be rendered on the canvas. */
-    element;
-    /** Whether the element responds to user interactions. Defaults to true. */
-    isInteractive = true;
-    /**
-     * Creates a new KritzelCustomElement instance.
-     * @param config - Optional configuration object for the custom element.
-     * @param config.element - The HTML element to wrap.
-     * @param config.translateX - Initial X position offset. Defaults to 0.
-     * @param config.translateY - Initial Y position offset. Defaults to 0.
-     * @param config.scale - Initial scale factor. Defaults to 1.
-     * @param config.height - Initial height in pixels. Defaults to 0.
-     * @param config.width - Initial width in pixels. Defaults to 0.
-     */
-    constructor(config) {
-        super();
-        if (config) {
-            this.translateX = config.translateX || 0;
-            this.translateY = config.translateY || 0;
-            this.rotation = schema_constants.KritzelMathHelper.degreesToRadians(config.rotation ?? 0);
-            this.scale = config.scale || 1;
-            this.element = config.element;
-            this.height = config.height || 0;
-            this.width = config.width || 0;
-        }
-    }
-    /**
-     * Factory method to create a new KritzelCustomElement with proper core binding.
-     * Generates a unique ID and assigns the element to the active workspace.
-     * @param core - The KritzelCore instance for state management and ID generation.
-     * @param config - Optional configuration object for the custom element.
-     * @param config.element - The HTML element to wrap.
-     * @param config.translateX - Initial X position offset.
-     * @param config.translateY - Initial Y position offset.
-     * @param config.scale - Initial scale factor.
-     * @param config.height - Initial height in pixels.
-     * @param config.width - Initial width in pixels.
-     * @returns A new KritzelBaseObject instance bound to the core.
-     */
-    static create(core, config) {
-        const object = new KritzelCustomElement(config);
-        object._core = core;
-        object.id = object.generateId();
-        object.workspaceId = core.store.state.activeWorkspace.id;
-        object.userId = core.user?.id;
-        return object;
-    }
-    /**
-     * Mounts the custom element to a container element in the DOM.
-     * Clears any existing content in the container and appends this element.
-     * Skips mounting if already mounted to the same container with content attached.
-     * @param element - The container HTML element to mount this custom element into.
-     */
-    mount(element) {
-        if (element === null) {
-            return;
-        }
-        // If already mounted to the same element and content is still attached, skip
-        if (this.isMounted && this.elementRef === element && this.element.parentElement === element) {
-            return;
-        }
-        this.elementRef = element;
-        this.isMounted = true;
-        // Clear existing content and append the element
-        this.elementRef.innerHTML = '';
-        this.elementRef.appendChild(this.element);
-    }
-    /**
-     * Resizes and repositions the custom element on the canvas.
-     * Updates both the internal state and the DOM element's inline styles.
-     * Syncs changes to Yjs for collaborative editing and cross-tab propagation.
-     * @param x - The new X position (translateX) in canvas coordinates.
-     * @param y - The new Y position (translateY) in canvas coordinates.
-     * @param width - The new width in pixels. Must be greater than 1.
-     * @param height - The new height in pixels. Must be greater than 1.
-     */
-    resize(x, y, width, height) {
-        if (width <= 1 || height <= 1) {
-            return;
-        }
-        this.width = width;
-        this.height = height;
-        this.translateX = x;
-        this.translateY = y;
-        if (this.element) {
-            this.element.style.width = `${width}px`;
-            this.element.style.height = `${height}px`;
-        }
-        // Update to sync changes to y.js and propagate to other tabs
-        this._core.store.objects.update(this);
-    }
-    /**
-     * Creates a deep copy of this custom element.
-     * The copy receives a new unique ID, is marked as unmounted,
-     * and contains a cloned copy of the underlying HTML element.
-     * @returns A new KritzelCustomElement instance with copied properties and a cloned DOM element.
-     */
-    copy() {
-        const copiedObject = Object.create(Object.getPrototypeOf(this));
-        Object.assign(copiedObject, this);
-        copiedObject.id = this.generateId();
-        copiedObject.isMounted = false;
-        copiedObject.element = this.element.cloneNode(true);
-        return copiedObject;
-    }
-}
-
 /**
  * Handles deserialization/revival of Kritzel objects from plain JavaScript objects.
  * This class uses a pattern similar to JSON.parse reviver to reconstruct class instances
@@ -21740,7 +21562,7 @@ class KritzelReviver {
                         revivedObj = schema_constants.KritzelImage.create(this._core).deserialize(obj);
                         break;
                     case 'KritzelCustomElement':
-                        revivedObj = KritzelCustomElement.create(this._core).deserialize(obj);
+                        revivedObj = schema_constants.KritzelCustomElement.create(this._core).deserialize(obj);
                         break;
                     case 'KritzelSelectionGroup':
                         revivedObj = schema_constants.KritzelSelectionGroup.create(this._core).deserialize(obj);
@@ -21827,8 +21649,9 @@ const DEFAULT_ENGINE_CONFIG = {
     debugInfo: {
         showObjectInfo: false,
         showViewportInfo: false,
-        showSyncProviderInfo: true,
-        showMigrationInfo: true
+        showSyncProviderInfo: false,
+        showAssetResolverInfo: false,
+        showMigrationInfo: false,
     },
     host: null,
     pointerX: 0,
@@ -22509,7 +22332,8 @@ class KritzelObjectMap {
         const docName = core.editorId ? `kritzel-workspace-${core.editorId}-${workspaceId}` : `kritzel-workspace-${workspaceId}`;
         const finalConfig = config ?? DEFAULT_SYNC_CONFIG;
         // Instantiate providers from configuration
-        const quiet = !core.store?.state?.debugInfo?.showSyncProviderInfo;
+        const showSyncProviderInfo = !!core.store?.state?.debugInfo?.showSyncProviderInfo;
+        const quiet = !showSyncProviderInfo;
         for (const providerConfig of finalConfig.providers) {
             let provider;
             // Check if it's a class constructor or a factory
@@ -22523,6 +22347,10 @@ class KritzelObjectMap {
             }
             this._providers.push(provider);
         }
+        if (showSyncProviderInfo) {
+            const providerList = this._providers.map(p => `${p.constructor.name} (${p.type})`).join(', ');
+            console.info(`[Kritzel] Workspace sync providers initialized for ${docName}: ${providerList || 'none'}`);
+        }
         // captureTimeout is effectively infinite — undo-step boundaries are
         // marked explicitly via markUndoBoundary() in insert/remove/reset and
         // at stroke/gesture boundaries in the tools. This prevents a single
@@ -22563,15 +22391,24 @@ class KritzelObjectMap {
         const networkProviders = this._providers.filter(p => p.type === 'network');
         // Await local providers for immediate data availability
         const localResults = await Promise.allSettled(localProviders.map(p => p.connect()));
+        if (showSyncProviderInfo) {
+            const connectedLocalCount = localResults.filter(result => result.status === 'fulfilled').length;
+            console.info(`[Kritzel] Workspace local providers connected: ${connectedLocalCount}/${localProviders.length}`);
+        }
         localResults.forEach((result, i) => {
-            if (result.status === 'rejected') {
+            if (showSyncProviderInfo && result.status === 'rejected') {
                 console.error(`[Kritzel] Sync provider "${localProviders[i]?.constructor.name}" failed to connect:`, result.reason);
             }
         });
         // Connect network providers in the background (remote data arrives via Yjs observers)
+        if (showSyncProviderInfo && networkProviders.length > 0) {
+            console.info(`[Kritzel] Workspace network providers connecting in background: ${networkProviders.length}`);
+        }
         for (const provider of networkProviders) {
             provider.connect().catch(err => {
-                console.error(`[Kritzel] Network sync provider "${provider.constructor.name}" failed to connect:`, err);
+                if (showSyncProviderInfo) {
+                    console.error(`[Kritzel] Network sync provider "${provider.constructor.name}" failed to connect:`, err);
+                }
             });
         }
         this._isReady = true;
@@ -23462,6 +23299,14 @@ class KritzelStore {
         const activeShapes = this.objects.filter(o => o instanceof schema_constants.KritzelShape && o.isEditing);
         return activeShapes.length > 0 ? activeShapes[0] : null;
     }
+    /**
+     * Gets the currently selected custom element whose focused descendant is an input-like element.
+     * @returns The interactive custom element with focused input-like content, or null if none matches
+     */
+    get activeInteractiveCustomElement() {
+        const interactiveCustomElement = this.selectedObjects.find(object => schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && object.hasFocusedInputElement());
+        return interactiveCustomElement ?? null;
+    }
     /**
      * Gets the path currently being drawn (not yet completed).
      * @returns The incomplete path object, or null if no path is being drawn
@@ -23631,7 +23476,8 @@ class KritzelAppStateMap {
         const docName = core.editorId ? `kritzel-app-state-${core.editorId}-${instanceId}` : `kritzel-app-state-${instanceId}`;
         const finalConfig = config ?? DEFAULT_SYNC_CONFIG;
         // Instantiate providers from configuration
-        const quiet = !core.store.state.debugInfo.showSyncProviderInfo;
+        const showSyncProviderInfo = !!core.store.state.debugInfo.showSyncProviderInfo;
+        const quiet = !showSyncProviderInfo;
         for (const providerConfig of finalConfig.providers) {
             let provider;
             // Check if it's a class constructor or a factory
@@ -23645,6 +23491,10 @@ class KritzelAppStateMap {
             }
             this._providers.push(provider);
         }
+        if (showSyncProviderInfo) {
+            const providerList = this._providers.map(p => `${p.constructor.name} (${p.type})`).join(', ');
+            console.info(`[Kritzel] App-state sync providers initialized for ${docName}: ${providerList || 'none'}`);
+        }
         // Observe changes to workspaces and sync with application state
         this._workspacesObserver = event => {
             this.handleWorkspacesChange(event);
@@ -23657,15 +23507,24 @@ class KritzelAppStateMap {
         const networkProviders = this._providers.filter(p => p.type === 'network');
         // Await local providers for immediate data availability
         const localResults = await Promise.allSettled(localProviders.map(p => p.connect()));
+        if (showSyncProviderInfo) {
+            const connectedLocalCount = localResults.filter(result => result.status === 'fulfilled').length;
+            console.info(`[Kritzel] App-state local providers connected: ${connectedLocalCount}/${localProviders.length}`);
+        }
         localResults.forEach((result, i) => {
-            if (result.status === 'rejected') {
+            if (showSyncProviderInfo && result.status === 'rejected') {
                 console.error(`[Kritzel] Sync provider "${localProviders[i]?.constructor.name}" failed to connect:`, result.reason);
             }
         });
         // Connect network providers in the background (remote data arrives via Yjs observers)
+        if (showSyncProviderInfo && networkProviders.length > 0) {
+            console.info(`[Kritzel] App-state network providers connecting in background: ${networkProviders.length}`);
+        }
         for (const provider of networkProviders) {
             provider.connect().catch(err => {
-                console.error(`[Kritzel] Network sync provider "${provider.constructor.name}" failed to connect:`, err);
+                if (showSyncProviderInfo) {
+                    console.error(`[Kritzel] Network sync provider "${provider.constructor.name}" failed to connect:`, err);
+                }
             });
         }
         this._isReady = true;
@@ -24761,6 +24620,7 @@ class KritzelCore {
         this._clipboardManager = new KritzelClipboardManager(this);
         this._toolRegistry = new KritzelToolRegistry(this);
         this._assetResolver = new schema_constants.KritzelAssetResolver();
+        this._assetResolver.setShowInfo(this._store.state.debugInfo?.showAssetResolverInfo ?? false);
     }
     /**
      * Gets the asset resolver responsible for storing and resolving
@@ -25132,6 +24992,10 @@ class KritzelCore {
                 this.removeObject(child);
             });
         }
+        // Unmount custom elements before removal
+        if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement')) {
+            object.unmount();
+        }
         // Handle anchor cleanup
         if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelLine')) {
             // If removing a line, clean up its anchor index entries
@@ -25172,21 +25036,84 @@ class KritzelCore {
      * @param selectionGroup - The selection group to add
      */
     addSelectionGroup(selectionGroup) {
-        this.removeSelectionGroup();
+        this.removeLocalSelectionGroups();
         this.removeSelectionBox();
+        for (const object of selectionGroup.objects ?? []) {
+            if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement')) {
+                const customElementObject = object;
+                if (typeof customElementObject.setIsInteractive === 'function') {
+                    customElementObject.setIsInteractive(true);
+                }
+                else {
+                    customElementObject.isInteractive = true;
+                }
+            }
+        }
         this._store.objects.insert(selectionGroup);
         this._store.setSelectionGroup(selectionGroup);
         this._kritzelEngine.triggerSelectionChange();
     }
+    /**
+     * Returns whether the provided selection group belongs to the local user context.
+     * Local groups are either explicitly owned by the current user or have no user ID.
+     */
+    isLocalSelectionGroup(selectionGroup) {
+        const localUserId = this._user?.id;
+        return localUserId == null || selectionGroup.userId === localUserId || selectionGroup.userId == null;
+    }
+    /**
+     * Applies deselection teardown side effects to a selection group before removal.
+     */
+    teardownSelectionGroup(selectionGroup) {
+        selectionGroup.deselectAllChildren?.();
+        for (const object of selectionGroup.objects ?? []) {
+            if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement')) {
+                const customElementObject = object;
+                if (typeof customElementObject.setIsInteractive === 'function') {
+                    customElementObject.setIsInteractive(false);
+                }
+                else {
+                    customElementObject.isInteractive = false;
+                }
+            }
+        }
+    }
+    /**
+     * Removes all local selection groups from the store, including orphaned groups
+     * that are no longer referenced by store.selectionGroup.
+     * @returns True when at least one local selection group was removed
+     */
+    removeLocalSelectionGroups() {
+        const allSelectionGroupsInStore = this._store.objects
+            .allObjects()
+            .filter((object) => {
+            return object instanceof schema_constants.KritzelSelectionGroup || schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup');
+        });
+        const allLocalSelectionGroups = allSelectionGroupsInStore.filter(selectionGroup => this.isLocalSelectionGroup(selectionGroup));
+        const currentSelectionGroup = this._store.selectionGroup;
+        if (currentSelectionGroup &&
+            this.isLocalSelectionGroup(currentSelectionGroup) &&
+            !allLocalSelectionGroups.some(group => group.id === currentSelectionGroup.id)) {
+            allLocalSelectionGroups.push(currentSelectionGroup);
+        }
+        if (allLocalSelectionGroups.length === 0) {
+            return false;
+        }
+        for (const selectionGroup of allLocalSelectionGroups) {
+            this.teardownSelectionGroup(selectionGroup);
+        }
+        const localSelectionGroupIds = new Set(allLocalSelectionGroups.map(group => group.id));
+        this._store.objects.remove(object => localSelectionGroupIds.has(object.id));
+        this._store.setSelectionGroup(null);
+        return true;
+    }
     /**
      * Removes the current selection group from the canvas.
      * Clears the cached reference and triggers the selection change event.
      */
     removeSelectionGroup() {
-        const selectionGroup = this._store.selectionGroup;
-        if (selectionGroup) {
-            this._store.objects.remove(object => object.id === selectionGroup.id);
-            this._store.setSelectionGroup(null);
+        const removedAnySelectionGroup = this.removeLocalSelectionGroups();
+        if (removedAnySelectionGroup) {
             this._kritzelEngine.triggerSelectionChange();
         }
     }
@@ -25490,6 +25417,11 @@ class KritzelCore {
             (o instanceof schema_constants.KritzelSelectionGroup && (localUserId == null || o.userId === localUserId || o.userId == null)));
         this._store.setSelectionBox(null);
         this._store.setSelectionGroup(null);
+        for (const object of this._store.allNonSelectionObjects) {
+            if (object.isSelected) {
+                object.isSelected = false;
+            }
+        }
         this._store.state.isSelecting = false;
         this._store.state.isResizeHandleSelected = false;
         this._store.state.isRotationHandleSelected = false;
@@ -25652,6 +25584,11 @@ class KritzelCore {
             // During selection phase (no group yet), hide UI for KritzelLine objects
             return !(object instanceof schema_constants.KritzelLine);
         }
+        // Once a local selection group exists, only the selection-group object
+        // should render group UI (children remain selected but don't render handles).
+        if (!(object instanceof schema_constants.KritzelSelectionGroup) || object.id !== selectionGroup.id) {
+            return false;
+        }
         // Show UI if selection contains more than one object
         if (selectionGroup.objects.length > 1) {
             return true;
@@ -25937,6 +25874,9 @@ class KritzelSvgExportHelper {
         if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelImage')) {
             return this.imageToSvg(object, imageDataUrls);
         }
+        if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement')) {
+            return this.customElementToSvg(object, rasterSafeForCanvas);
+        }
         if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelGroup')) {
             return this.groupToSvg(object, theme, imageDataUrls, rasterSafeForCanvas);
         }
@@ -26103,6 +26043,38 @@ class KritzelSvgExportHelper {
         return `<g transform="${transform}"${opacity}>
     <image href="${href}" x="0" y="0" width="${width}" height="${height}" preserveAspectRatio="xMidYMid meet"/>
   </g>`;
+    }
+    /**
+     * Converts a KritzelCustomElement to SVG.
+     * SVG mode: embeds HTML in foreignObject (best-effort).
+     * PNG/raster mode: renders placeholder rect with warning.
+     * @param obj - The custom element object
+     * @param rasterSafeForCanvas - If true, render placeholder (for PNG export)
+     * @returns SVG element string
+     */
+    static customElementToSvg(obj, rasterSafeForCanvas = false) {
+        const transform = this.buildTransform(obj);
+        const opacity = obj.opacity !== 1 ? ` opacity="${obj.opacity}"` : '';
+        const scale = this.getObjectScale(obj);
+        const width = obj.totalWidth / scale;
+        const height = obj.totalHeight / scale;
+        if (rasterSafeForCanvas) {
+            // PNG export: render placeholder rect (foreignObject doesn't rasterize to PNG well)
+            console.warn('[KritzelCustomElement SVG Export] Custom elements do not serialize well to PNG. Use SVG export or screenshot instead.');
+            return `<g transform="${transform}"${opacity}>
+      <rect x="0" y="0" width="${width}" height="${height}" fill="#f0f0f0" stroke="#999" stroke-width="1" />
+      <text x="${width / 2}" y="${height / 2}" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#999">[Custom Element]</text>
+    </g>`;
+        }
+        // SVG export: use foreignObject to embed HTML
+        const html = obj.element?.outerHTML || '<div style="border:1px dashed #ccc">Empty</div>';
+        return `<g transform="${transform}"${opacity}>
+      <foreignObject x="0" y="0" width="${width}" height="${height}">
+        <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;overflow:hidden;">
+          ${html}
+        </div>
+      </foreignObject>
+    </g>`;
     }
     /**
      * Converts a KritzelGroup to SVG by recursively converting children.
@@ -27174,6 +27146,120 @@ async function toPng(node, options = {}) {
     return canvas.toDataURL();
 }
 
+class KritzelWheelHelper {
+    static shouldKeepWheelInCustomElement(ev, customElement) {
+        // Keep Ctrl+wheel available for viewport zoom gestures.
+        if (ev.ctrlKey || customElement.isSelected !== true) {
+            return false;
+        }
+        const path = typeof ev.composedPath === 'function' ? ev.composedPath() : [];
+        const scrollContainer = this.getScrollableContainerFromEventPath(path, customElement);
+        // No scroll container found inside the custom element: let the wheel
+        // event pass through so the viewport can continue handling it.
+        if (!scrollContainer) {
+            return false;
+        }
+        return this.canElementConsumeWheel(scrollContainer, ev.deltaX, ev.deltaY);
+    }
+    static getScrollableContainerFromEventPath(path, customElement) {
+        const potentialRoots = [];
+        if (customElement.element instanceof HTMLElement) {
+            potentialRoots.push(customElement.element);
+        }
+        if (customElement.elementRef instanceof HTMLElement) {
+            potentialRoots.push(customElement.elementRef);
+        }
+        const legacyElementRef = customElement.elmeentRef;
+        if (legacyElementRef instanceof HTMLElement) {
+            potentialRoots.push(legacyElementRef);
+        }
+        for (const root of potentialRoots) {
+            const rootIndex = path.findIndex(entry => entry === root);
+            if (rootIndex === -1) {
+                continue;
+            }
+            for (const entry of path.slice(0, rootIndex + 1)) {
+                if (!(entry instanceof HTMLElement)) {
+                    continue;
+                }
+                if (this.isScrollableElement(entry)) {
+                    return entry;
+                }
+            }
+        }
+        // Fallback for synthetic/custom wheel events where composedPath is absent
+        // or does not include the custom-element subtree.
+        for (const root of potentialRoots) {
+            if (this.isScrollableElement(root)) {
+                return root;
+            }
+            const firstChild = root.firstElementChild;
+            if (firstChild instanceof HTMLElement && this.isScrollableElement(firstChild)) {
+                return firstChild;
+            }
+        }
+        return null;
+    }
+    static isScrollableElement(element) {
+        const canScrollVertically = element.scrollHeight - element.clientHeight > 0;
+        const canScrollHorizontally = element.scrollWidth - element.clientWidth > 0;
+        if (!canScrollVertically && !canScrollHorizontally) {
+            return false;
+        }
+        const computedStyle = window.getComputedStyle(element);
+        const overflowX = computedStyle.overflowX;
+        const overflowY = computedStyle.overflowY;
+        const allowsVerticalScroll = overflowY !== 'visible' && overflowY !== 'clip';
+        const allowsHorizontalScroll = overflowX !== 'visible' && overflowX !== 'clip';
+        return (canScrollVertically && allowsVerticalScroll) || (canScrollHorizontally && allowsHorizontalScroll);
+    }
+    static canElementConsumeWheel(element, deltaX, deltaY) {
+        const canConsumeVertical = this.canElementConsumeVerticalWheel(element, deltaY);
+        const canConsumeHorizontal = this.canElementConsumeHorizontalWheel(element, deltaX);
+        // Keep wheel events inside the custom element whenever at least one
+        // requested axis can still be consumed by its scroll container.
+        return canConsumeVertical || canConsumeHorizontal;
+    }
+    static canElementConsumeVerticalWheel(element, deltaY) {
+        if (deltaY === 0) {
+            return false;
+        }
+        const maxScrollTop = Math.max(0, element.scrollHeight - element.clientHeight);
+        if (maxScrollTop === 0) {
+            return false;
+        }
+        const epsilon = 1;
+        const scrollingDown = deltaY > 0;
+        const scrollingUp = deltaY < 0;
+        if (scrollingDown) {
+            return element.scrollTop < maxScrollTop - epsilon;
+        }
+        if (scrollingUp) {
+            return element.scrollTop > epsilon;
+        }
+        return false;
+    }
+    static canElementConsumeHorizontalWheel(element, deltaX) {
+        if (deltaX === 0) {
+            return false;
+        }
+        const maxScrollLeft = Math.max(0, element.scrollWidth - element.clientWidth);
+        if (maxScrollLeft === 0) {
+            return false;
+        }
+        const epsilon = 1;
+        const scrollingRight = deltaX > 0;
+        const scrollingLeft = deltaX < 0;
+        if (scrollingRight) {
+            return element.scrollLeft < maxScrollLeft - epsilon;
+        }
+        if (scrollingLeft) {
+            return element.scrollLeft > epsilon;
+        }
+        return false;
+    }
+}
+
 const kritzelEngineCss = () => `:host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.ProseMirror{outline:none}p,h1,h2,h3,h4,h5,h6,blockquote,pre{margin:0;padding:0}.workspace-loading-overlay{position:absolute;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;gap:10px;background-color:var(--kritzel-engine-loading-overlay-background, rgba(255, 255, 255, 0.6));color:var(--kritzel-engine-loading-overlay-color, #333);font-family:var(--kritzel-font-family, sans-serif);font-size:1.25rem;pointer-events:all;animation:workspace-loading-fade-in 200ms ease-out var(--kritzel-engine-loading-overlay-delay, 300ms) forwards;opacity:0}.workspace-loading-spinner{width:20px;height:20px;box-sizing:border-box;display:block;flex-shrink:0;border:2px solid var(--kritzel-engine-loading-overlay-spinner-color, #cccccc);border-top-color:var(--kritzel-engine-loading-overlay-spinner-active-color, #333333);border-radius:50%;animation:workspace-loading-spin 0.6s linear infinite}@keyframes workspace-loading-spin{to{transform:rotate(360deg)}}@keyframes workspace-loading-fade-in{to{opacity:1}}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}.PlaygroundEditorTheme__quote{margin:0;margin-left:20px;margin-bottom:10px;font-size:15px;color:rgb(101, 103, 107);border-left-color:rgb(206, 208, 212);border-left-width:4px;border-left-style:solid;padding-left:16px}`;
 
 const KritzelEngine = class {
@@ -27362,6 +27448,7 @@ const KritzelEngine = class {
     onDebugInfoChange(newValue) {
         if (newValue) {
             this.core.store.state.debugInfo = newValue;
+            this.core.assetResolver.setShowInfo(newValue.showAssetResolverInfo);
         }
     }
     /** When false, non-modified wheel events do not pan the viewport. */
@@ -27415,6 +27502,12 @@ const KritzelEngine = class {
         if (this.core.store.state.isContextMenuVisible) {
             this.hideContextMenu();
         }
+        const hoveredObject = this.core.getObjectFromPointerEvent(ev);
+        if (hoveredObject &&
+            schema_constants.ObjectHelper.isClass(hoveredObject, 'KritzelCustomElement') &&
+            KritzelWheelHelper.shouldKeepWheelInCustomElement(ev, hoveredObject)) {
+            return;
+        }
         if (ev.ctrlKey) {
             if (this.isZoomingEnabled) {
                 this.viewport.handleWheel(ev);
@@ -27431,6 +27524,11 @@ const KritzelEngine = class {
         if (this.core.store.isDisabled) {
             return;
         }
+        // Interactive custom-element content should receive native pointer events
+        // whenever the object is marked interactive.
+        if (this.isEmbeddedCustomElementInteraction(ev)) {
+            return;
+        }
         if (schema_constants.KritzelDevicesHelper.isTouchDevice()) {
             schema_constants.KritzelEventHelper.onLongPress(ev, (event) => this.longpress.emit(event));
         }
@@ -27447,6 +27545,10 @@ const KritzelEngine = class {
         if (this.core.store.isDisabled) {
             return;
         }
+        // Ignore drag/move sequences when their pointerdown was intentionally bypassed.
+        if (ev.buttons > 0 && !this.core.store.state.pointers.has(ev.pointerId)) {
+            return;
+        }
         if (this.core.store.state.pointers.has(ev.pointerId)) {
             this.core.store.state.pointers.set(ev.pointerId, ev);
         }
@@ -27495,6 +27597,56 @@ const KritzelEngine = class {
         this.viewport.handlePointerUp(ev);
         this.core.store.state?.activeTool?.handlePointerUp(ev);
     }
+    isEmbeddedCustomElementInteraction(event) {
+        const path = event.composedPath();
+        const objectElement = path.find((entry) => {
+            return entry instanceof HTMLElement && entry.classList.contains('object');
+        });
+        if (!objectElement?.id) {
+            return false;
+        }
+        const object = this.core.store.objects.findById(objectElement.id);
+        if (!object || !schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement')) {
+            return false;
+        }
+        const isSelected = !!this.core.store.selectionGroup?.objects?.some(selectedObject => selectedObject.id === object.id);
+        if (!isSelected) {
+            return false;
+        }
+        if (object.isInteractive !== true) {
+            return false;
+        }
+        const potentialRoots = [];
+        if (object.element instanceof HTMLElement) {
+            potentialRoots.push(object.element);
+        }
+        if (object.elementRef instanceof HTMLElement) {
+            potentialRoots.push(object.elementRef);
+        }
+        if (potentialRoots.length === 0) {
+            return false;
+        }
+        // Only bypass canvas tool handling when the pointer event came from an
+        // actually interactive descendant inside the custom element subtree.
+        return potentialRoots.some(root => this.isNativeInteractiveEmbeddedTarget(path, root));
+    }
+    isNativeInteractiveEmbeddedTarget(path, customElementRoot) {
+        const interactiveSelector = 'input, button, textarea, select, a[href], [contenteditable="true"], [contenteditable=""]';
+        const rootIndex = path.findIndex(entry => entry === customElementRoot);
+        if (rootIndex === -1) {
+            return false;
+        }
+        for (const entry of path.slice(0, rootIndex)) {
+            if (!(entry instanceof HTMLElement)) {
+                continue;
+            }
+            const interactiveEntry = entry;
+            if (interactiveEntry.matches(interactiveSelector)) {
+                return true;
+            }
+        }
+        return false;
+    }
     handlePointerLeave() {
         this.core.store.objects?.clearCursorPosition();
     }
@@ -27566,7 +27718,7 @@ const KritzelEngine = class {
         void this.core.clipboardManager.paste(undefined, undefined, ev);
     }
     /**
-      * Determines if the engine should handle a keyboard/clipboard shortcut event.
+     * Determines if the engine should handle a keyboard/clipboard shortcut event.
      * Returns true only if:
      * - The event originates from within the engine component, OR
      * - The event target is not an interactive element that needs keyboard input
@@ -28780,6 +28932,8 @@ const KritzelEngine = class {
     _syncConfigRevision = 0;
     _assetStorageConfigRevision = 0;
     _isWorkspaceLoading = false;
+    _hasLoggedUnlicensedWelcomeBanner = false;
+    _previousVisibleCustomElements = new Set();
     _defaultUndoState = {
         canUndo: false,
         canRedo: false,
@@ -28843,6 +28997,14 @@ const KritzelEngine = class {
     }
     disconnectedCallback() {
         this.throttledPointerMoveMulti.cancel();
+        // Unmount all remaining custom elements
+        if (this.core.store.allObjects) {
+            this.core.store.allObjects.forEach(object => {
+                if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement')) {
+                    object.unmount();
+                }
+            });
+        }
         // Clear cursor position in awareness before destroying
         this.core.store.objects?.clearCursorPosition();
         // Clean up current workspace's ObjectMap
@@ -28899,6 +29061,7 @@ const KritzelEngine = class {
             await this.initializeSyncAndWorkspace();
             if (this.core.store.state.isReady === false) {
                 this.core.store.state.isReady = true;
+                this.logUnlicensedWelcomeBanner();
                 this.isEngineReady.emit(this.core.store.state);
             }
         }, 50);
@@ -28938,6 +29101,14 @@ const KritzelEngine = class {
         }
         this._isAssetStorageInitialized = true;
     }
+    logUnlicensedWelcomeBanner() {
+        if (this.core.licenseManager.isLicensed || this._hasLoggedUnlicensedWelcomeBanner) {
+            return;
+        }
+        this._hasLoggedUnlicensedWelcomeBanner = true;
+        console.info('%c👋 Welcome to Kritzel', 'color: #007AFF; font-weight: 700;');
+        console.info(`This version of Kritzel is not licensed. Get a license at: https://kritzel.io`);
+    }
     async doInitializeSyncAndWorkspace() {
         // Capture sync config revision to detect prop updates that happen while
         // initialization is in-flight.
@@ -29141,8 +29312,7 @@ const KritzelEngine = class {
         if (normalizedScale <= this._objectDistanceFadeFarScale) {
             return this._objectDistanceFadeMinOpacity;
         }
-        const progress = (this._objectDistanceFadeNearScale - normalizedScale) /
-            (this._objectDistanceFadeNearScale - this._objectDistanceFadeFarScale);
+        const progress = (this._objectDistanceFadeNearScale - normalizedScale) / (this._objectDistanceFadeNearScale - this._objectDistanceFadeFarScale);
         const smooth = progress * progress * (3 - 2 * progress);
         return 1 - smooth * (1 - this._objectDistanceFadeMinOpacity);
     }
@@ -29153,8 +29323,7 @@ const KritzelEngine = class {
         if (normalizedScale >= this._objectDistanceFadeCloseMaxScale) {
             return this._objectDistanceFadeCloseMinOpacity;
         }
-        const progress = (normalizedScale - this._objectDistanceFadeCloseStartScale) /
-            (this._objectDistanceFadeCloseMaxScale - this._objectDistanceFadeCloseStartScale);
+        const progress = (normalizedScale - this._objectDistanceFadeCloseStartScale) / (this._objectDistanceFadeCloseMaxScale - this._objectDistanceFadeCloseStartScale);
         const smooth = progress * progress * (3 - 2 * progress);
         return 1 - smooth * (1 - this._objectDistanceFadeCloseMinOpacity);
     }
@@ -29164,13 +29333,18 @@ const KritzelEngine = class {
     }
     getObjectEffectiveOpacity(object, viewportScale) {
         const safeObjectOpacity = Number.isFinite(object.opacity) ? object.opacity : 1;
-        const distanceFadeMultiplier = this.shouldApplyDistanceFade(object)
-            ? this.getObjectDistanceFadeMultiplier(object.scale, viewportScale)
-            : 1;
+        const distanceFadeMultiplier = this.shouldApplyDistanceFade(object) ? this.getObjectDistanceFadeMultiplier(object.scale, viewportScale) : 1;
         const multiplied = (object.markedForRemoval ? 0.5 : 1) * safeObjectOpacity * distanceFadeMultiplier;
         const overridden = ((object.markedForRemoval ? 0.5 : safeObjectOpacity) * distanceFadeMultiplier).toString();
         return { multiplied, overridden };
     }
+    getSelectionHandleCapabilities(object) {
+        const selectedObjects = schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') ? object.objects : [object];
+        return {
+            canRenderResizeHandles: selectedObjects.every(selectedObject => selectedObject.isResizable !== false),
+            canRenderRotationHandle: selectedObjects.every(selectedObject => selectedObject.isRotatable !== false),
+        };
+    }
     render() {
         if (!this.viewport) {
             return (index.h(index.Host, null, this.core.store.state.isLoading && (index.h("div", { class: "workspace-loading-overlay" }, index.h("span", { class: "workspace-loading-spinner" }), this.core.localizationManager.translate('engine.loading')))));
@@ -29184,6 +29358,45 @@ const KritzelEngine = class {
         const viewportCenterX = this.core.store.state.viewportWidth / 2 + this.core.store.state.translateX;
         const viewportCenterY = this.core.store.state.viewportHeight / 2 + this.core.store.state.translateY;
         const visibleObjects = this.core.store.objectsInViewport;
+        const getObjectWrapperPointerEvents = (object) => {
+            if (this.core.store.state.isScaling) {
+                return 'none';
+            }
+            if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup')) {
+                return 'none';
+            }
+            return 'auto';
+        };
+        const getSelectionGroupOverlayPointerEvents = (object) => {
+            if (object.markedForRemoval) {
+                return 'none';
+            }
+            if (!schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup')) {
+                return 'auto';
+            }
+            if (object.objects.length === 1 && schema_constants.KritzelClassHelper.isInstanceOf(object.objects[0], 'KritzelCustomElement')) {
+                return 'none';
+            }
+            return 'auto';
+        };
+        // Track visible custom elements and unmount culled ones
+        const currentVisibleCustomElements = new Set();
+        visibleObjects.forEach(object => {
+            if (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement')) {
+                currentVisibleCustomElements.add(object.id);
+            }
+        });
+        // Unmount custom elements that left the viewport
+        this._previousVisibleCustomElements.forEach(id => {
+            if (!currentVisibleCustomElements.has(id)) {
+                const object = this.core.store.objects.findById(id);
+                if (object && schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement')) {
+                    object.unmount();
+                }
+            }
+        });
+        // Update tracking set for next render
+        this._previousVisibleCustomElements = currentVisibleCustomElements;
         this.core.cursorManager.applyCursor();
         if (this.core.store.state.hasViewportChanged) {
             this.viewportChange.emit(this.viewport.getViewport());
@@ -29200,7 +29413,7 @@ const KritzelEngine = class {
                     transformOrigin: 'top left',
                     position: 'absolute',
                     zIndex: object.zIndex.toString(),
-                    pointerEvents: this.core.store.state.isScaling ? 'none' : 'auto',
+                    pointerEvents: getObjectWrapperPointerEvents(object),
                 } }, schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (index.h("svg", { ref: el => el && object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
                     height: object?.totalHeight + 'px',
                     width: object?.totalWidth + 'px',
@@ -29289,7 +29502,7 @@ const KritzelEngine = class {
                     transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
                     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',
+                    pointerEvents: getSelectionGroupOverlayPointerEvents(object),
                 } })), schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox') && (index.h("div", { ref: el => el && object.mount(el), style: {
                     position: 'absolute',
                     left: '0',
@@ -29324,60 +29537,65 @@ const KritzelEngine = class {
                     transform: `scale(${object.scaleFactor})`,
                     backgroundColor: schema_constants.KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
                     overflow: 'visible',
-                } }))), schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (() => {
-                const fillResolved = schema_constants.KritzelColorHelper.resolveThemeColor(object.fillColor, currentTheme);
-                const strokeResolved = schema_constants.KritzelColorHelper.resolveThemeColor(object.strokeColor, currentTheme);
-                const isFilled = !!fillResolved && fillResolved !== 'transparent';
-                const strokeMatchesFill = isFilled && strokeResolved === fillResolved;
-                return (index.h("div", { ref: el => 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',
-                        width: object.totalWidth + 'px',
-                        height: object.totalHeight + 'px',
-                        transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
-                        transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                        pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                        overflow: 'visible',
-                    } }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
-                        position: 'absolute',
-                        top: '0',
-                        left: '0',
-                        width: '100%',
-                        height: '100%',
-                        overflow: 'visible',
-                        pointerEvents: 'none',
-                    }, viewBox: object.viewBox, preserveAspectRatio: "none" }, index.h("path", { d: object.getSvgPath(), fill: schema_constants.KritzelColorHelper.applyOpacity(object.fillColor, effectiveOpacity, currentTheme), stroke: strokeMatchesFill ? 'none' : schema_constants.KritzelColorHelper.applyOpacity(object.strokeColor, effectiveOpacity, currentTheme), "stroke-width": strokeMatchesFill ? 0 : object.strokeWidth })), index.h("div", { ref: el => el && object.mountTextEditor(el), style: {
-                        position: 'absolute',
-                        top: '0',
-                        left: '0',
-                        width: '100%',
-                        height: '100%',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        textAlign: 'center',
-                        overflow: 'hidden',
-                        pointerEvents: object.isEditing ? 'auto' : 'none',
-                    } })));
-            })(), this.core.store.state.debugInfo.showObjectInfo && object.isDebugInfoVisible && (index.h("div", { style: {
+                } }))), schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelShape') &&
+                (() => {
+                    const fillResolved = schema_constants.KritzelColorHelper.resolveThemeColor(object.fillColor, currentTheme);
+                    const strokeResolved = schema_constants.KritzelColorHelper.resolveThemeColor(object.strokeColor, currentTheme);
+                    const isFilled = !!fillResolved && fillResolved !== 'transparent';
+                    const strokeMatchesFill = isFilled && strokeResolved === fillResolved;
+                    return (index.h("div", { ref: el => 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',
+                            width: object.totalWidth + 'px',
+                            height: object.totalHeight + 'px',
+                            transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
+                            transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
+                            pointerEvents: object.markedForRemoval ? 'none' : 'auto',
+                            overflow: 'visible',
+                        } }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+                            position: 'absolute',
+                            top: '0',
+                            left: '0',
+                            width: '100%',
+                            height: '100%',
+                            overflow: 'visible',
+                            pointerEvents: 'none',
+                        }, viewBox: object.viewBox, preserveAspectRatio: "none" }, index.h("path", { d: object.getSvgPath(), fill: schema_constants.KritzelColorHelper.applyOpacity(object.fillColor, effectiveOpacity, currentTheme), stroke: strokeMatchesFill ? 'none' : schema_constants.KritzelColorHelper.applyOpacity(object.strokeColor, effectiveOpacity, currentTheme), "stroke-width": strokeMatchesFill ? 0 : object.strokeWidth })), index.h("div", { ref: el => el && object.mountTextEditor(el), style: {
+                            position: 'absolute',
+                            top: '0',
+                            left: '0',
+                            width: '100%',
+                            height: '100%',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            textAlign: 'center',
+                            overflow: 'hidden',
+                            pointerEvents: object.isEditing ? 'auto' : 'none',
+                        } })));
+                })(), this.core.store.state.debugInfo.showObjectInfo && (index.h("div", { style: {
                     pointerEvents: 'none',
                     position: 'absolute',
                     left: `${object.totalWidth}px`,
                     top: '0',
                     zIndex: (object.zIndex + 2).toString(),
-                } }, index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "Id: ", object.id), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "userId: ", object.userId), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "width: ", object.width), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "height: ", object.height), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateX: ", object.translateX), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateY: ", object.translateY), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "scale: ", object.scale), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "rotationDegrees: ", object.rotationDegrees), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "zIndex: ", object.zIndex), schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (index.h("div", null, index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "assetId: ", object.assetId), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "mimeType: ", object.mimeType))))), (this.core.displaySelectionGroupUI(object) || this.core.displaySelectionLineUI(object)) &&
+                } }, index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "Id: ", object.id), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "userId: ", object.userId), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "width: ", object.width), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "height: ", object.height), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateX: ", object.translateX), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateY: ", object.translateY), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "scale: ", object.scale), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "rotationDegrees: ", object.rotationDegrees), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "zIndex: ", object.zIndex), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "isSelected: ", object.isSelected ? 'true' : 'false'), schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (index.h("div", null, index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "isInteractive: ", object.isInteractive ? 'true' : 'false'))), schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (index.h("div", null, index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "assetId: ", object.assetId), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "mimeType: ", object.mimeType))))), (this.core.displaySelectionGroupUI(object) || this.core.displaySelectionLineUI(object)) &&
                 (() => {
                     const isSelectionGroup = schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup');
                     const localClientId = this.core.store.objects?.localClientId;
                     const awarenessStates = this.core.store.objects?.awareness?.getStates();
-                    const isRemoteSelection = isSelectionGroup && (
-                    // Different user
-                    (object.userId != null && this.core.user?.id != null && object.userId !== this.core.user.id) ||
-                        // Same user but different client that is still actively connected (e.g. same account on another device)
-                        (object.userId != null && this.core.user?.id != null && object.userId === this.core.user.id &&
-                            object.clientId != null && localClientId != null && object.clientId !== localClientId &&
-                            awarenessStates?.has(object.clientId) === true));
+                    const isRemoteSelection = isSelectionGroup &&
+                        // Different user
+                        ((object.userId != null && this.core.user?.id != null && object.userId !== this.core.user.id) ||
+                            // Same user but different client that is still actively connected (e.g. same account on another device)
+                            (object.userId != null &&
+                                this.core.user?.id != null &&
+                                object.userId === this.core.user.id &&
+                                object.clientId != null &&
+                                localClientId != null &&
+                                object.clientId !== localClientId &&
+                                awarenessStates?.has(object.clientId) === true));
                     let remoteUserColor;
                     if (isRemoteSelection) {
                         if (awarenessStates) {
@@ -29396,10 +29614,10 @@ const KritzelEngine = class {
                             }
                         }
                     }
-                    const selectionBorderColor = remoteUserColor
-                        ?? (schema_constants.KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme) || 'var(--kritzel-selection-border-color, #007AFF)');
-                    const selectionHandleStrokeColor = remoteUserColor
-                        ?? 'var(--kritzel-selection-handle-stroke-color, #007AFF)';
+                    const selectionBorderColor = remoteUserColor ?? (schema_constants.KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme) || 'var(--kritzel-selection-border-color, #007AFF)');
+                    const selectionHandleStrokeColor = remoteUserColor ?? 'var(--kritzel-selection-handle-stroke-color, #007AFF)';
+                    const handleScale = object.scale ?? 1;
+                    const { canRenderResizeHandles, canRenderRotationHandle } = this.getSelectionHandleCapabilities(object);
                     return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
                             zIndex: (object.zIndex + 1).toString(),
                             height: object?.totalHeight.toString(),
@@ -29443,50 +29661,50 @@ const KritzelEngine = class {
                                 strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
                                 strokeLinecap: 'square',
                             } })));
-                    })(), !this.isSelecting && !isRemoteSelection && (index.h("g", { class: "selection-group-handles", style: { pointerEvents: 'auto' } }, index.h("rect", { class: "resize-handle top-left", x: `${(-(baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, y: `${(-(baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, width: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, height: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, style: {
+                    })(), !this.isSelecting && !isRemoteSelection && (index.h("g", { class: "selection-group-handles", style: { pointerEvents: 'auto' } }, canRenderResizeHandles && (index.h("g", null, index.h("rect", { class: "resize-handle top-left", x: `${(-(baseHandleSize - 1) * handleScale) / this.core.store.state?.scale}`, y: `${(-(baseHandleSize - 1) * handleScale) / this.core.store.state?.scale}`, width: `${((baseHandleSize - 1) * 2 * handleScale) / this.core.store.state?.scale}`, height: `${((baseHandleSize - 1) * 2 * handleScale) / this.core.store.state?.scale}`, style: {
                             fill: 'var(--kritzel-selection-handle-color, #ffffff)',
                             stroke: selectionHandleStrokeColor,
-                            strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
+                            strokeWidth: `calc(2px * ${handleScale} / ${this.core.store.state?.scale})`,
                             paintOrder: 'fill',
-                        } }), index.h("rect", { class: "resize-handle-overlay top-left", x: `${(-baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, y: `${(-baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, width: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, height: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, style: {
+                        } }), index.h("rect", { class: "resize-handle-overlay top-left", x: `${(-baseHandleTouchSize * handleScale) / this.core.store.state?.scale}`, y: `${(-baseHandleTouchSize * handleScale) / this.core.store.state?.scale}`, width: `${(baseHandleTouchSize * 2 * handleScale) / this.core.store.state?.scale}`, height: `${(baseHandleTouchSize * 2 * handleScale) / this.core.store.state?.scale}`, style: {
                             fill: 'transparent',
                             paintOrder: 'fill',
-                        } }), index.h("rect", { class: "resize-handle top-right", x: `${object.totalWidth - ((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, y: `${(-(baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, width: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, height: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, style: {
+                        } }), index.h("rect", { class: "resize-handle top-right", x: `${object.totalWidth - ((baseHandleSize - 1) * handleScale) / this.core.store.state?.scale}`, y: `${(-(baseHandleSize - 1) * handleScale) / this.core.store.state?.scale}`, width: `${((baseHandleSize - 1) * 2 * handleScale) / this.core.store.state?.scale}`, height: `${((baseHandleSize - 1) * 2 * handleScale) / this.core.store.state?.scale}`, style: {
                             fill: 'var(--kritzel-selection-handle-color, #ffffff)',
                             stroke: selectionHandleStrokeColor,
-                            strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
+                            strokeWidth: `calc(2px * ${handleScale} / ${this.core.store.state?.scale})`,
                             paintOrder: 'fill',
-                        } }), index.h("rect", { class: "resize-handle-overlay top-right", x: `${object.totalWidth - (baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, y: `${(-baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, width: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, height: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, style: {
+                        } }), index.h("rect", { class: "resize-handle-overlay top-right", x: `${object.totalWidth - (baseHandleTouchSize * handleScale) / this.core.store.state?.scale}`, y: `${(-baseHandleTouchSize * handleScale) / this.core.store.state?.scale}`, width: `${(baseHandleTouchSize * 2 * handleScale) / this.core.store.state?.scale}`, height: `${(baseHandleTouchSize * 2 * handleScale) / this.core.store.state?.scale}`, style: {
                             fill: 'transparent',
                             paintOrder: 'fill',
-                        } }), index.h("rect", { class: "resize-handle bottom-left", x: `${(-(baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, y: `${object.totalHeight - ((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, width: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, height: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, style: {
+                        } }), index.h("rect", { class: "resize-handle bottom-left", x: `${(-(baseHandleSize - 1) * handleScale) / this.core.store.state?.scale}`, y: `${object.totalHeight - ((baseHandleSize - 1) * handleScale) / this.core.store.state?.scale}`, width: `${((baseHandleSize - 1) * 2 * handleScale) / this.core.store.state?.scale}`, height: `${((baseHandleSize - 1) * 2 * handleScale) / this.core.store.state?.scale}`, style: {
                             fill: 'var(--kritzel-selection-handle-color, #ffffff)',
                             stroke: selectionHandleStrokeColor,
-                            strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
+                            strokeWidth: `calc(2px * ${handleScale} / ${this.core.store.state?.scale})`,
                             paintOrder: 'fill',
-                        } }), index.h("rect", { class: "resize-handle-overlay bottom-left", x: `${(-baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, y: `${object.totalHeight - (baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, width: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, height: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, style: {
+                        } }), index.h("rect", { class: "resize-handle-overlay bottom-left", x: `${(-baseHandleTouchSize * handleScale) / this.core.store.state?.scale}`, y: `${object.totalHeight - (baseHandleTouchSize * handleScale) / this.core.store.state?.scale}`, width: `${(baseHandleTouchSize * 2 * handleScale) / this.core.store.state?.scale}`, height: `${(baseHandleTouchSize * 2 * handleScale) / this.core.store.state?.scale}`, style: {
                             fill: 'transparent',
                             paintOrder: 'fill',
-                        } }), index.h("rect", { class: "resize-handle bottom-right", x: `${object.totalWidth - ((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, y: `${object.totalHeight - ((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, width: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, height: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, style: {
+                        } }), index.h("rect", { class: "resize-handle bottom-right", x: `${object.totalWidth - ((baseHandleSize - 1) * handleScale) / this.core.store.state?.scale}`, y: `${object.totalHeight - ((baseHandleSize - 1) * handleScale) / this.core.store.state?.scale}`, width: `${((baseHandleSize - 1) * 2 * handleScale) / this.core.store.state?.scale}`, height: `${((baseHandleSize - 1) * 2 * handleScale) / this.core.store.state?.scale}`, style: {
                             fill: 'var(--kritzel-selection-handle-color, #ffffff)',
                             stroke: selectionHandleStrokeColor,
-                            strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
+                            strokeWidth: `calc(2px * ${handleScale} / ${this.core.store.state?.scale})`,
                             paintOrder: 'fill',
-                        } }), index.h("rect", { class: "resize-handle-overlay bottom-right", x: `${object.totalWidth - (baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, y: `${object.totalHeight - (baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, width: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, height: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, style: {
+                        } }), index.h("rect", { class: "resize-handle-overlay bottom-right", x: `${object.totalWidth - (baseHandleTouchSize * handleScale) / this.core.store.state?.scale}`, y: `${object.totalHeight - (baseHandleTouchSize * handleScale) / this.core.store.state?.scale}`, width: `${(baseHandleTouchSize * 2 * handleScale) / this.core.store.state?.scale}`, height: `${(baseHandleTouchSize * 2 * handleScale) / this.core.store.state?.scale}`, style: {
                             fill: 'transparent',
                             paintOrder: 'fill',
-                        } }), index.h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / this.core.store.state?.scale), style: {
+                        } }))), canRenderRotationHandle && (index.h("g", null, index.h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * handleScale) / this.core.store.state?.scale), style: {
                             stroke: selectionBorderColor,
-                            strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
-                        } }), index.h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.core.store.state?.scale), r: `${((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, style: {
+                            strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${handleScale} / ${this.core.store.state?.scale})`,
+                        } }), index.h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * handleScale) / this.core.store.state?.scale), r: `${((baseHandleSize - 1) * handleScale) / this.core.store.state?.scale}`, style: {
                             fill: 'var(--kritzel-selection-handle-color, #ffffff)',
                             stroke: selectionHandleStrokeColor,
-                            strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
+                            strokeWidth: `calc(2px * ${handleScale} / ${this.core.store.state?.scale})`,
                             paintOrder: 'fill',
-                        } }), 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: {
+                        } }), index.h("circle", { class: "rotation-handle-overlay", cx: object.totalWidth / 2, cy: -((15 * handleScale) / this.core.store.state?.scale), r: `${(baseHandleTouchSize * handleScale) / this.core.store.state?.scale}`, style: {
                             fill: 'transparent',
                             paintOrder: 'fill',
-                        } }))))), this.core.displaySelectionLineUI(object) && schema_constants.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) && schema_constants.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: selectionBorderColor,
                             strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
                             strokeLinecap: 'round',
@@ -29611,7 +29829,7 @@ const KritzelEngine = class {
                     }, this.core.store.selectionGroup?.objects || []);
                 }
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.objects?.hasAwareness && index.h("kritzel-awareness-cursors", { core: this.core }), this.core.store.state?.activeTool instanceof schema_constants.KritzelEraserTool && !this.core.store.state.isScaling && index.h("kritzel-cursor-trail", { core: this.core }), !this.core.licenseManager.isLicensed && (index.h("kritzel-watermark", { core: this.core, label: this.core.localizationManager.translate('watermark.poweredBy') }))));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.objects?.hasAwareness && index.h("kritzel-awareness-cursors", { core: this.core }), this.core.store.state?.activeTool instanceof schema_constants.KritzelEraserTool && !this.core.store.state.isScaling && index.h("kritzel-cursor-trail", { core: this.core }), !this.core.licenseManager.isLicensed && index.h("kritzel-watermark", { core: this.core, label: this.core.localizationManager.translate('watermark.poweredBy') })));
     }
     static get watchers() { return {
         "workspace": [{
@@ -30801,7 +31019,7 @@ const KritzelPortal = class {
         this.calculatePosition();
     }
     handleWindowScroll() {
-        const isInViewport = KritzelHTMLHelper.isElementInViewport(this.anchor);
+        const isInViewport = schema_constants.KritzelHTMLHelper.isElementInViewport(this.anchor);
         if (!isInViewport) {
             this.anchor?.blur();
             this.closePortal();
@@ -30827,7 +31045,7 @@ const KritzelPortal = class {
         return activeEl;
     }
     trapFocus(event) {
-        const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);
+        const focusableElements = schema_constants.KritzelHTMLHelper.getFocusableElements(this.host);
         if (focusableElements.length === 0)
             return;
         const firstFocusable = focusableElements[0];
@@ -30853,7 +31071,7 @@ const KritzelPortal = class {
         const firstAssigned = slotEl?.assignedElements({ flatten: true })[0];
         if (!firstAssigned)
             return null;
-        const focusable = KritzelHTMLHelper.getFocusableElements(firstAssigned);
+        const focusable = schema_constants.KritzelHTMLHelper.getFocusableElements(firstAssigned);
         return focusable[0] ?? firstAssigned;
     }
     get lastAddedPortal() {
@@ -31009,7 +31227,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.3.21';
+const KRITZEL_VERSION = '0.3.23';
 
 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)}`;
 
@@ -31025,6 +31243,7 @@ const DEFAULT_DEBUG_INFO = {
     showObjectInfo: false,
     showSyncProviderInfo: true,
     showMigrationInfo: true,
+    showAssetResolverInfo: false,
 };
 const SETTINGS_CATEGORY_IDS = ['general', 'viewport', 'shortcuts', 'developer', 'about'];
 const KritzelSettings = class {
@@ -31233,7 +31452,7 @@ const KritzelSettings = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '6f26bd23bf7bb51653f09b96bafef221c51c2bfa' }, index.h("kritzel-dialog", { key: '49ffda0a422ae1c2c9c8e6e608bce532e7d4099e', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, index.h("kritzel-master-detail", { key: 'ab5dc7952e555cae6f841ef4de2ab50d7039279b', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
+        return (index.h(index.Host, { key: '8b96261465efeabb2eb0cf724d29699de5e230a8' }, index.h("kritzel-dialog", { key: '273a9df290bb97d59000a97f91821e7bad3f3896', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, index.h("kritzel-master-detail", { key: '64d17dfaa2a0baf2d4a5d00fe5fc65ad40c96ec6', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
     }
     static get watchers() { return {
         "settings": [{
@@ -31858,7 +32077,7 @@ const KritzelTooltip = class {
         }
     }
     async focusContent() {
-        const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);
+        const focusableElements = schema_constants.KritzelHTMLHelper.getFocusableElements(this.host);
         if (focusableElements.length > 0) {
             focusableElements[0].focus();
         }