kritzel-stencil 0.3.22 → 0.3.24

package/dist/cjs/{schema.constants-IBG5VW_J.js → schema.constants-D8JoUfNc.js}

@@ -36,6 +36,9 @@ class ObjectHelper {
         }
         return Object?.keys(obj).length === 0 && obj?.constructor === Object;
     }
+    static isClass(object, className) {
+        return !!object && object.__class__ === className;
+    }
 }
 
 class KritzelGeometryHelper {
@@ -224,7 +227,8 @@ class KritzelBaseObject {
     isMounted = false;
     isEditable = false;
     isInteractive = false;
-    isDebugInfoVisible = false;
+    isResizable = true;
+    isRotatable = true;
     /**
      * Gets the total width of the object including padding.
      * @returns The width plus double the padding value
@@ -531,21 +535,24 @@ class KritzelBaseObject {
         Object.assign(copiedObject, this);
         copiedObject.id = this.generateId();
         copiedObject.isMounted = false;
+        copiedObject.isSelected = false;
+        copiedObject.isHovered = false;
+        copiedObject.isInteractive = false;
+        copiedObject.resizing = false;
+        copiedObject.markedForRemoval = false;
+        copiedObject.isVisible = true;
         return copiedObject;
     }
     /**
      * Serializes the object to a plain JavaScript object for persistence.
      * Excludes internal references (_core, _elementRef) and computed properties.
-     * DOM elements are cloned if present.
+     * Subclasses should override to handle domain-specific serialization (e.g., HTML elements).
      * @returns A serializable object containing all persistent properties
      */
     serialize() {
-        const { _core, _elementRef, element, totalWidth, totalHeight, ...remainingProps } = this;
-        const clonedProps = structuredClone(remainingProps);
-        if (element && typeof element === 'object' && 'nodeType' in element && element.nodeType === 1) {
-            clonedProps.element = element.cloneNode(true);
-        }
-        return clonedProps;
+        const { _core, _elementRef, element, totalWidth, totalHeight, isSelected, isHovered, isMounted, isInteractive, resizing, markedForRemoval, isVisible, ...remainingProps } = this;
+        // No longer clone raw elements—let subclasses handle serializable payloads
+        return structuredClone(remainingProps);
     }
     /**
      * Restores the object's state from a serialized plain object.
@@ -556,6 +563,14 @@ class KritzelBaseObject {
      */
     deserialize(object) {
         Object.assign(this, object);
+        // Selection/interactivity state is transient UI state and must not survive revival.
+        this.isSelected = false;
+        this.isHovered = false;
+        this.isMounted = false;
+        this.isInteractive = false;
+        this.resizing = false;
+        this.markedForRemoval = false;
+        this.isVisible = true;
         return this;
     }
     /**
@@ -16455,7 +16470,6 @@ class IndexedDBAssetProvider {
     type = 'local';
     name = 'IndexedDBAssetProvider';
     _dbName;
-    _quiet;
     _db = null;
     /** In-memory cache of id -> object URL to avoid re-creating blob URLs. */
     _urlCache = new Map();
@@ -16463,7 +16477,6 @@ class IndexedDBAssetProvider {
     _knownIds = new Set();
     constructor(options) {
         this._dbName = options?.dbName ?? DEFAULT_DB_NAME;
-        this._quiet = options?.quiet ?? false;
     }
     /**
      * Factory helper enabling use as `IndexedDBAssetProvider.with({ dbName: '...' })`
@@ -16478,9 +16491,6 @@ class IndexedDBAssetProvider {
         this._db = await this.openDatabase();
         // Warm up the known-ids cache so canResolve can answer synchronously.
         await this.loadKnownIds();
-        if (!this._quiet) {
-            console.info(`IndexedDBAssetProvider initialized: ${this._dbName}`);
-        }
     }
     destroy() {
         for (const url of this._urlCache.values()) {
@@ -16497,9 +16507,6 @@ class IndexedDBAssetProvider {
             this._db.close();
             this._db = null;
         }
-        if (!this._quiet) {
-            console.info(`IndexedDBAssetProvider destroyed: ${this._dbName}`);
-        }
     }
     canResolve(id) {
         return this._knownIds.has(id);
@@ -16744,9 +16751,13 @@ class KritzelAssetResolver {
     _pending = new Map();
     _flushTimer = null;
     _destroyed = false;
-    _quiet = false;
+    _quiet = true;
     /** Dedupes concurrent resolves of the same id. */
     _resolvePromises = new Map();
+    /** Enables or disables resolver diagnostic logging. */
+    setShowInfo(show) {
+        this._quiet = !show;
+    }
     /**
      * Whether any remote provider is configured. Used by the engine to
      * decide whether to warn about a missing remote provider when Yjs is
@@ -16772,7 +16783,6 @@ class KritzelAssetResolver {
         // Ensure the deferred ready promise exists before any async work so
         // concurrent callers awaiting `ensureReady()` are unblocked together.
         this.getReadyPromise();
-        this._quiet = config?.quiet ?? false;
         const providers = this.instantiateProviders(config?.providers ?? []);
         // Ensure a local provider always exists so uploads can be optimistic
         // and remote misses can be cached for later offline access.
@@ -16805,8 +16815,10 @@ class KritzelAssetResolver {
                 await provider.init();
             }
             catch (err) {
-                console.warn(`[KritzelAssetResolver] Remote provider "${provider.name}" failed to initialize. ` +
-                    `Assets will be served from the local provider until the remote becomes available.`, err);
+                if (this.canLogInfo()) {
+                    console.warn(`[Kritzel] Asset resolver remote provider "${provider.name}" failed to initialize. ` +
+                        `Assets will be served from the local provider until the remote becomes available.`, err);
+                }
             }
         }
         // Re-enqueue any uploads that were interrupted before completing.
@@ -16818,7 +16830,7 @@ class KritzelAssetResolver {
             this._resolveReady = null;
             this._rejectReady = null;
         }
-        if (!this._quiet) {
+        if (this.canLogInfo()) {
             this.logProviderConfiguration();
         }
         if (this._pending.size > 0) {
@@ -16827,8 +16839,8 @@ class KritzelAssetResolver {
     }
     /** Tears down the resolver and all providers. */
     destroy() {
-        if (!this._quiet) {
-            console.info('Asset resolver destroyed');
+        if (this.canLogInfo()) {
+            console.info('[Kritzel] Asset resolver destroyed');
         }
         this._destroyed = true;
         if (this._flushTimer) {
@@ -17024,7 +17036,7 @@ class KritzelAssetResolver {
     // ------------------------------------------------------------------
     logProviderConfiguration() {
         const lines = [
-            `Asset resolver initialized with ${this._providers.length} provider(s):`,
+            `[Kritzel] Asset resolver initialized with ${this._providers.length} provider(s):`,
         ];
         for (const provider of this._providers) {
             const role = provider === this._local ? 'local (primary write target)' : provider.type;
@@ -17083,8 +17095,8 @@ class KritzelAssetResolver {
                 recoveredCount++;
             }
         }
-        if (!this._quiet && recoveredCount > 0) {
-            console.info(`Asset resolver: recovered ${recoveredCount} pending upload(s)`);
+        if (this.canLogInfo() && recoveredCount > 0) {
+            console.info(`[Kritzel] Asset resolver recovered ${recoveredCount} pending upload(s)`);
         }
     }
     scheduleFlush(delayMs) {
@@ -17139,8 +17151,8 @@ class KritzelAssetResolver {
                 });
                 this._pending.delete(key);
                 await this.clearPendingRemote(job.id, job.providerName);
-                if (!this._quiet) {
-                    console.info(`Asset resolver: uploaded ${job.id} to ${provider.name}`);
+                if (this.canLogInfo()) {
+                    console.info(`[Kritzel] Asset resolver uploaded ${job.id} to ${provider.name}`);
                 }
             }
             catch (err) {
@@ -17148,8 +17160,10 @@ class KritzelAssetResolver {
                 const delay = Math.min(MAX_RETRY_DELAY_MS, BASE_RETRY_DELAY_MS * Math.pow(2, job.attempts - 1));
                 job.nextAttemptAt = Date.now() + delay;
                 nextRetryIn = Math.min(nextRetryIn, delay);
-                console.warn(`[KritzelAssetResolver] Upload to ${provider.name} failed for ${job.id} (attempt ${job.attempts}). ` +
-                    `Retrying in ${Math.round(delay / 1000)}s.`, err);
+                if (this.canLogInfo()) {
+                    console.warn(`[Kritzel] Asset resolver upload to ${provider.name} failed for ${job.id} (attempt ${job.attempts}). ` +
+                        `Retrying in ${Math.round(delay / 1000)}s.`, err);
+                }
             }
         }
         if (this._pending.size > 0 && Number.isFinite(nextRetryIn)) {
@@ -17207,6 +17221,9 @@ class KritzelAssetResolver {
         const res = await fetch(dataUrl);
         return res.blob();
     }
+    canLogInfo() {
+        return !this._quiet;
+    }
 }
 
 /**
@@ -17247,7 +17264,6 @@ class KritzelImage extends KritzelBaseObject {
     maxWidth = 300;
     maxHeight = 300;
     maxCompressionSize = 1200;
-    isDebugInfoVisible = true;
     // --- Transient (not persisted to Yjs) ---
     /**
      * URL resolved from the asset storage layer (e.g. a `blob:` or https URL).
@@ -19660,6 +19676,610 @@ class KritzelShape extends KritzelBaseObject {
     }
 }
 
+const KRITZEL_RENDERER_REGISTRY_KEY = '__kritzelCustomElementRendererRegistry__';
+const getGlobalRegistryStore = () => {
+    const globalScope = globalThis;
+    const existing = globalScope[KRITZEL_RENDERER_REGISTRY_KEY];
+    if (existing) {
+        return existing;
+    }
+    const created = {
+        renderers: new Map(),
+    };
+    globalScope[KRITZEL_RENDERER_REGISTRY_KEY] = created;
+    return created;
+};
+/**
+ * Global registry for custom element renderers.
+ * Allows wrapper frameworks (Angular, React, Vue) to register renderer implementations
+ * without coupling to core, and enables deterministic rehydration across reloads and
+ * clipboard paste operations.
+ *
+ * Renderer keys are opaque strings that must be stable (e.g., 'angular-todo', 'react-editor').
+ * When a custom element is deserialized with a rendererKey, the registry is consulted to
+ * resolve the renderer and mount with the persisted rendererData.
+ */
+class KritzelCustomElementRendererRegistry {
+    static get _renderers() {
+        return getGlobalRegistryStore().renderers;
+    }
+    /**
+     * Registers a renderer implementation for a given key.
+     * @param key - Stable identifier for this renderer (e.g., 'angular-my-component')
+     * @param renderer - Renderer implementation with mount/unmount/update handlers
+     */
+    static register(key, renderer) {
+        this._renderers.set(key, renderer);
+    }
+    /**
+     * Retrieves a registered renderer by key.
+     * @param key - Renderer identifier
+     * @returns The registered renderer, or undefined if not found
+     */
+    static get(key) {
+        return this._renderers.get(key);
+    }
+    /**
+     * Unregisters a renderer by key.
+     * @param key - Renderer identifier to remove
+     * @returns True if the renderer was found and removed; false otherwise
+     */
+    static unregister(key) {
+        return this._renderers.delete(key);
+    }
+}
+
+class KritzelHTMLHelper {
+    static getNumericValueFromStyle(element, property) {
+        const value = window.getComputedStyle(element).getPropertyValue(property);
+        return parseFloat(value) || 0;
+    }
+    static isScrollableElement(element) {
+        if (!(element instanceof HTMLElement)) {
+            return false;
+        }
+        const style = window.getComputedStyle(element);
+        const overflowX = style.overflowX;
+        const overflowY = style.overflowY;
+        const overflow = style.overflow;
+        const canScrollX = (overflowX === 'auto' || overflowX === 'scroll' || overflowX === 'overlay') && element.scrollWidth > element.clientWidth;
+        const canScrollY = (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') && element.scrollHeight > element.clientHeight;
+        const canScroll = overflow === 'auto' || overflow === 'scroll' || overflow === 'overlay';
+        return canScrollX || canScrollY || (canScroll && (element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight));
+    }
+    static findScrollableElement(root) {
+        if (!root) {
+            return null;
+        }
+        const visited = new Set();
+        const walk = (element) => {
+            if (visited.has(element)) {
+                return null;
+            }
+            visited.add(element);
+            if (this.isScrollableElement(element)) {
+                return element;
+            }
+            if (element.shadowRoot) {
+                for (const child of Array.from(element.shadowRoot.children)) {
+                    const scrollable = walk(child);
+                    if (scrollable) {
+                        return scrollable;
+                    }
+                }
+            }
+            if (element.tagName === 'SLOT') {
+                for (const assignedElement of element.assignedElements({ flatten: true })) {
+                    const scrollable = walk(assignedElement);
+                    if (scrollable) {
+                        return scrollable;
+                    }
+                }
+            }
+            for (const child of Array.from(element.children)) {
+                const scrollable = walk(child);
+                if (scrollable) {
+                    return scrollable;
+                }
+            }
+            return null;
+        };
+        return walk(root);
+    }
+    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;
+    }
+}
+
+/**
+ * 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 KritzelBaseObject {
+    __class__ = 'KritzelCustomElement';
+    /** The HTML element to be rendered on the canvas. */
+    element;
+    /**
+     * Optional identifier for a registered renderer (e.g., 'angular-component', 'react-default').
+     * When set, mount() resolves the renderer from a global registry and delegates lifecycle.
+     * If null, falls back to DOM element mounting.
+     */
+    rendererKey = null;
+    /**
+     * Custom data payload for the renderer (e.g., Angular component inputs, React props, Vue data).
+     * Only meaningful when rendererKey is set. Captured on unmount and restored on rehydrate.
+     */
+    rendererData;
+    /**
+     * 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 = KritzelMathHelper.degreesToRadians(config.rotation ?? 0);
+            this.scale = config.scale || 1;
+            this.element = config.element ?? this.createPlaceholder();
+            this.height = config.height || 0;
+            this.width = config.width || 0;
+            this.rendererKey = config.rendererKey ?? null;
+            this.rendererData = config.rendererData;
+        }
+    }
+    /**
+     * 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;
+        object.zIndex = core.store.currentZIndex;
+        return object;
+    }
+    /**
+     * Mounts the custom element to a container element in the DOM.
+     * If a renderer is registered for this.rendererKey, delegates to the renderer.
+     * Otherwise, uses the standard DOM element mounting fallback.
+     * 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;
+        }
+        this.applyInteractiveState();
+        if (this.isMounted && this.elementRef === element) {
+            // Renderer-based mounts should not be re-invoked on every engine rerender.
+            if (this.rendererKey) {
+                return;
+            }
+            // For direct DOM fallback, remount only if content was detached.
+            if (this.element.parentElement === element) {
+                return;
+            }
+        }
+        this.elementRef = element;
+        this.isMounted = true;
+        // Try renderer-based approach if a key is set
+        if (this.rendererKey) {
+            const renderer = KritzelCustomElementRendererRegistry.get(this.rendererKey);
+            if (renderer) {
+                element.innerHTML = ''; // Clear container
+                renderer.onMount({
+                    object: this,
+                    container: element,
+                    data: this.rendererData,
+                });
+                this.applyInteractiveState();
+                return;
+            }
+        }
+        // Fallback to standard DOM mounting
+        this.elementRef.innerHTML = '';
+        this.elementRef.appendChild(this.element);
+        this.applyInteractiveState();
+    }
+    /**
+     * Updates interactivity state for embedded HTML content.
+     * When disabling interactivity, any focused descendant is blurred so
+     * keyboard input is released immediately.
+     */
+    setIsInteractive(isInteractive) {
+        const hasChanged = this.isInteractive !== isInteractive;
+        this.isInteractive = isInteractive;
+        this.applyInteractiveState();
+        if (hasChanged && !isInteractive) {
+            this.blurFocusedDescendant();
+        }
+    }
+    applyInteractiveState() {
+        const pointerEvents = this.isInteractive ? 'auto' : 'none';
+        const contentCursor = this.isInteractive ? 'auto' : '';
+        if (this.element) {
+            this.element.style.pointerEvents = pointerEvents;
+            this.element.style.cursor = contentCursor;
+        }
+        if (this.elementRef instanceof HTMLElement) {
+            // Keep the mount container clickable so unselected custom elements can still be selected.
+            this.elementRef.style.pointerEvents = 'auto';
+            this.elementRef.style.cursor = '';
+            Array.from(this.elementRef.children).forEach(child => {
+                if (child instanceof HTMLElement) {
+                    child.style.pointerEvents = pointerEvents;
+                    child.style.cursor = contentCursor;
+                }
+            });
+        }
+    }
+    blurFocusedDescendant() {
+        if (!this.element && !(this.elementRef instanceof HTMLElement)) {
+            return;
+        }
+        const activeElement = this.getDeepActiveElement();
+        const isInsideElement = !!this.element && this.isNodeInsideHost(activeElement, this.element);
+        const isInsideMountedContainer = this.elementRef instanceof HTMLElement && this.isNodeInsideHost(activeElement, this.elementRef);
+        if (activeElement && (isInsideElement || isInsideMountedContainer)) {
+            activeElement.blur();
+        }
+    }
+    /**
+     * Returns true when a text-input-like element inside this custom element
+     * currently owns focus.
+     */
+    hasFocusedInputElement() {
+        if (!this.isInteractive) {
+            return false;
+        }
+        const focusHosts = this.getFocusHosts();
+        // Primary path: locate the focused input-like element by walking from each host through
+        // `:focus` (piercing open shadow roots). This works in real browsers even when the engine
+        // and editor are nested web components, because it never relies on the document-level
+        // active element resolving to a descendant of the host.
+        if (focusHosts.some(host => this.hasFocusedInputDescendant(host))) {
+            return true;
+        }
+        // Fallback path: resolve the deep active element and confirm it is input-like and inside a
+        // host. Covers contenteditable content inside nested shadow roots (which `querySelector`
+        // cannot reach) and test environments that mock the active element without real focus.
+        const activeElement = this.getDeepActiveElement();
+        if (activeElement && this.isInputLikeElement(activeElement) && focusHosts.some(host => this.isNodeInsideHost(activeElement, host))) {
+            return true;
+        }
+        return false;
+    }
+    getFocusHosts() {
+        const hosts = [];
+        if (this.element) {
+            hosts.push(this.element);
+        }
+        if (this.elementRef instanceof HTMLElement) {
+            hosts.push(this.elementRef);
+            const firstChild = this.elementRef.firstElementChild;
+            if (firstChild instanceof HTMLElement) {
+                hosts.push(firstChild);
+            }
+        }
+        return hosts;
+    }
+    /**
+     * Returns true when the given host (or, via the flat tree, one of its shadow descendants)
+     * currently contains a focused input-like element.
+     */
+    hasFocusedInputDescendant(host) {
+        if (this.isInputLikeElement(host) && this.matchesFocus(host)) {
+            return true;
+        }
+        // `:focus-within` crosses shadow boundaries for the host, so it is a cheap guard that tells
+        // us whether focus lives anywhere inside this host before doing the deeper traversal.
+        if (typeof host.matches === 'function') {
+            try {
+                if (!host.matches(':focus-within')) {
+                    return false;
+                }
+            }
+            catch {
+                // Selector unsupported in this environment; fall through to the traversal below.
+            }
+        }
+        return this.findFocusedInputLikeElement(host) !== null;
+    }
+    /**
+     * Walks the `:focus` chain from a tree scope, descending into open shadow roots, and returns
+     * the focused element when it is input-like.
+     */
+    findFocusedInputLikeElement(root) {
+        let focused = null;
+        try {
+            focused = root.querySelector(':focus');
+        }
+        catch {
+            focused = null;
+        }
+        if (!(focused instanceof HTMLElement)) {
+            return null;
+        }
+        if (this.isInputLikeElement(focused)) {
+            return focused;
+        }
+        if (focused.shadowRoot) {
+            return this.findFocusedInputLikeElement(focused.shadowRoot);
+        }
+        return null;
+    }
+    matchesFocus(element) {
+        if (typeof element.matches !== 'function') {
+            return false;
+        }
+        try {
+            return element.matches(':focus');
+        }
+        catch {
+            return false;
+        }
+    }
+    isInputLikeElement(element) {
+        const tag = element.tagName;
+        return (tag === 'INPUT' ||
+            tag === 'TEXTAREA' ||
+            tag === 'SELECT' ||
+            element.isContentEditable);
+    }
+    isNodeInsideHost(node, host) {
+        if (!node) {
+            return false;
+        }
+        let current = node;
+        while (current) {
+            if (current === host) {
+                return true;
+            }
+            if (current.parentNode) {
+                current = current.parentNode;
+                continue;
+            }
+            const root = current.getRootNode();
+            if (root instanceof ShadowRoot) {
+                current = root.host;
+                continue;
+            }
+            break;
+        }
+        return false;
+    }
+    getDeepActiveElement(root = document) {
+        const activeElement = root.activeElement;
+        if (!(activeElement instanceof HTMLElement)) {
+            return null;
+        }
+        if (activeElement.shadowRoot) {
+            const nested = this.getDeepActiveElement(activeElement.shadowRoot);
+            return nested ?? activeElement;
+        }
+        return activeElement;
+    }
+    /**
+     * Unmounts the custom element and performs cleanup.
+     * If a renderer is registered, delegates to renderer.onUnmount and captures returned state.
+     * Otherwise, simply removes from DOM.
+     * Called when object is deleted, viewport culled, or editor is unloading.
+     */
+    unmount() {
+        if (!this.isMounted || !this.elementRef) {
+            return;
+        }
+        // Try renderer-based unmount if renderer is registered
+        if (this.rendererKey) {
+            const renderer = KritzelCustomElementRendererRegistry.get(this.rendererKey);
+            if (renderer) {
+                // Capture any updated data returned by renderer
+                const updatedData = renderer.onUnmount({
+                    object: this,
+                    container: this.elementRef,
+                    data: this.rendererData,
+                });
+                if (updatedData !== undefined) {
+                    this.rendererData = updatedData;
+                }
+            }
+        }
+        this.isMounted = false;
+        this.elementRef = null;
+    }
+    /**
+     * Returns whether the rendered content contains a scrollable element.
+     * Traverses light DOM, open shadow roots, and slotted content so nested
+     * framework components are detected as well.
+     */
+    isElementScrollable() {
+        return !!KritzelHTMLHelper.findScrollableElement(this.element);
+    }
+    /**
+     * Creates a placeholder element when HTML deserialization fails.
+     * Used as fallback to ensure element is always defined.
+     * @returns A div element with placeholder styling
+     */
+    createPlaceholder() {
+        const el = document.createElement('div');
+        el.textContent = '[Custom Element]';
+        el.style.border = '1px dashed #ccc';
+        el.style.display = 'flex';
+        el.style.alignItems = 'center';
+        el.style.justifyContent = 'center';
+        el.style.backgroundColor = '#f9f9f9';
+        el.style.color = '#999';
+        el.style.fontSize = '12px';
+        return el;
+    }
+    /**
+     * 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.isSelected = false;
+        copiedObject.isHovered = false;
+        copiedObject.isInteractive = false;
+        copiedObject.resizing = false;
+        copiedObject.markedForRemoval = false;
+        copiedObject.isVisible = true;
+        copiedObject.element = this.element.cloneNode(true);
+        return copiedObject;
+    }
+    /**
+     * Serializes the custom element to a plain JavaScript object for persistence.
+     * Stores HTML as a string (safe for JSON/Yjs) and captures dimension metadata.
+     * @returns A serializable object with htmlString and dimension snapshots
+     */
+    serialize() {
+        const { _core, _elementRef, element, totalWidth, totalHeight, isSelected, isHovered, isMounted, isInteractive, resizing, markedForRemoval, isVisible, ...props } = this;
+        const cloned = structuredClone(props);
+        // Include rendererKey and rendererData for lifecycle-driven rendering
+        cloned.rendererKey = this.rendererKey;
+        cloned.rendererData = this.rendererData;
+        // Store HTML as string for fallback/compatibility when renderer is unavailable
+        cloned.htmlString = element ? element.outerHTML : '';
+        // Capture dimension snapshot at serialization time
+        cloned.serializedWidth = this.width;
+        cloned.serializedHeight = this.height;
+        return cloned;
+    }
+    /**
+     * Deserializes the custom element from a plain object.
+     * Reconstructs the element from stored HTML string with fallback to placeholder.
+     * @template T - The expected return type
+     * @param object - The serialized object data to restore from
+     * @returns This instance cast to type T
+     */
+    deserialize(object) {
+        super.deserialize(object);
+        // Legacy compatibility: this deprecated field should not persist on revived objects.
+        delete this.allowEmbeddedInteraction;
+        // Restore renderer metadata
+        this.rendererKey = object.rendererKey ?? null;
+        this.rendererData = object.rendererData;
+        // Reconstruct element from stored HTML, or create placeholder
+        if (object.htmlString) {
+            try {
+                const temp = document.createElement('div');
+                temp.innerHTML = object.htmlString;
+                this.element = temp.firstElementChild || this.createPlaceholder();
+            }
+            catch {
+                this.element = this.createPlaceholder();
+            }
+        }
+        else {
+            this.element = this.createPlaceholder();
+        }
+        return this;
+    }
+}
+
 /**
  * Abstract base class for all drawing tools in Kritzel.
  * Provides common functionality and defines the interface that all tools must implement.
@@ -20128,6 +20748,12 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         this._cachedObjectIdsHash = currentHash;
         return this._cachedObjects;
     }
+    syncChildSelectionState(children) {
+        const shouldBeSelected = this.isSelected === true;
+        for (const child of children) {
+            child.isSelected = shouldBeSelected;
+        }
+    }
     /**
      * Gets the number of objects in the selection group.
      * @returns The count of selected objects
@@ -20173,6 +20799,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         for (const object of objects) {
             if (!this._objectIds.includes(object.id)) {
                 this._objectIds.push(object.id);
+                object.isSelected = true;
                 changed = true;
             }
         }
@@ -20200,9 +20827,11 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         const index = this._objectIds.findIndex(id => id === object.id);
         if (index === -1) {
             this._objectIds.push(object.id);
+            object.isSelected = true;
         }
         else {
             this._objectIds.splice(index, 1);
+            object.isSelected = false;
         }
         this._cachedObjects = null; // Invalidate cache
         const children = this.objects; // Get cached objects once
@@ -20234,11 +20863,27 @@ class KritzelSelectionGroup extends KritzelBaseObject {
     /**
      * Sets the isSelected flag to false for all objects in the selection group.
      * Used when clearing or changing the selection state.
+     *
+     * For KritzelGroup members, also clears the isSelected flag on all nested
+     * descendants. A descendant can retain a lingering isSelected from the marquee
+     * preview before it was resolved to its parent group during selection, which
+     * would otherwise leave that object selected after the group is deselected and
+     * cause the whole group to be re-selected on the next interaction.
      */
     deselectAllChildren() {
         const children = this.objects;
+        const descendantIds = new Set();
         for (const obj of children) {
             obj.isSelected = false;
+            if (KritzelClassHelper.isInstanceOf(obj, 'KritzelGroup')) {
+                KritzelGroup.collectDescendantIds(obj, descendantIds);
+            }
+        }
+        if (descendantIds.size > 0) {
+            const descendants = this._core.store.objects.filter(o => descendantIds.has(o.id));
+            for (const descendant of descendants) {
+                descendant.isSelected = false;
+            }
         }
     }
     /**
@@ -20344,6 +20989,8 @@ class KritzelSelectionGroup extends KritzelBaseObject {
     deserialize(object) {
         // First, deserialize all base properties using parent's deserialize
         super.deserialize(object);
+        // Selection groups intentionally persist their selected state.
+        this.isSelected = object.isSelected === true;
         // Restore objectIds through setter
         if (object.objectIds) {
             this.objectIds = object.objectIds;
@@ -20352,6 +20999,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         if (object.unchangedObjectSnapshots) {
             this.unchangedObjectSnapshots = new Map(Object.entries(object.unchangedObjectSnapshots));
         }
+        this.syncChildSelectionState(this.objects);
         return this;
     }
     /**
@@ -22782,10 +23430,9 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         selectionBox.translateX = this.startX;
         selectionBox.translateY = this.startY;
         this._core.store.state.isSelecting = true;
-        this._core.store.objects.remove(o => o instanceof KritzelSelectionBox || (!isAdditive && o instanceof KritzelSelectionGroup && (o.userId == null || o.userId === this._core.user?.id)));
-        this._core.store.setSelectionBox(null);
+        this._core.removeSelectionBox();
         if (!isAdditive) {
-            this._core.store.setSelectionGroup(null);
+            this._core.removeSelectionGroup();
         }
         this._core.store.objects.insert(selectionBox);
         this._core.store.setSelectionBox(selectionBox);
@@ -22814,10 +23461,9 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         selectionBox.translateX = this.startX;
         selectionBox.translateY = this.startY;
         this._core.store.state.isSelecting = true;
-        this._core.store.objects.remove(o => o instanceof KritzelSelectionBox || (!isAdditive && o instanceof KritzelSelectionGroup && (o.userId == null || o.userId === this._core.user?.id)));
-        this._core.store.setSelectionBox(null);
+        this._core.removeSelectionBox();
         if (!isAdditive) {
-            this._core.store.setSelectionGroup(null);
+            this._core.removeSelectionGroup();
         }
         this._core.store.objects.insert(selectionBox);
         this._core.store.setSelectionBox(selectionBox);
@@ -22987,8 +23633,11 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
      */
     clearSelectionPreview() {
         // Only clear previously tracked selected objects - O(k) instead of O(n)
+        const selectedGroupIds = new Set(this._core.store.selectionGroup?.objectIds ?? []);
         for (const obj of this._previouslySelectedObjects) {
-            obj.isSelected = false;
+            if (!selectedGroupIds.has(obj.id)) {
+                obj.isSelected = false;
+            }
         }
         this._previouslySelectedObjects.clear();
     }
@@ -23007,7 +23656,11 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         // Resolve child objects to their parent groups
         const parentGroup = KritzelGroup.findParentGroup(this._core, object.id);
         const objectToSelect = parentGroup || object;
-        objectToSelect.isSelected = false;
+        // When the click resolves to a parent group, clear the child's own flag so
+        // it does not linger as selected and re-select the group on the next interaction.
+        if (parentGroup) {
+            object.isSelected = false;
+        }
         const existingGroup = this._core.store.selectionGroup;
         if (shiftKey && existingGroup) {
             existingGroup.addOrRemove(objectToSelect);
@@ -23052,9 +23705,16 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         const resolvedObjects = new Map();
         for (const obj of selectedObjects) {
             const parentGroup = childToParentMap.get(obj.id);
-            const toSelect = parentGroup || obj;
-            resolvedObjects.set(toSelect.id, toSelect);
-            obj.isSelected = false;
+            if (parentGroup) {
+                // The child was selected (e.g. via marquee preview) but selection is
+                // represented by its parent group. Clear the child's flag so it does
+                // not linger as selected and re-select the group on the next interaction.
+                obj.isSelected = false;
+                resolvedObjects.set(parentGroup.id, parentGroup);
+            }
+            else {
+                resolvedObjects.set(obj.id, obj);
+            }
         }
         const unrolledObjects = Array.from(resolvedObjects.values());
         const filteredObjects = this.filterDescendantsOfSelectedGroups(unrolledObjects);
@@ -23062,12 +23722,16 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         if (shiftKey && existingGroup) {
             existingGroup.addObjects(filteredObjects);
             this.removeDescendantsOfSelectedGroups(existingGroup);
+            this._previouslySelectedObjects.clear();
             this._core.rerender();
         }
         else {
             // Create selection group and set all IDs at once (no per-item refresh)
             const selectionGroup = KritzelSelectionGroup.create(this._core);
             selectionGroup.objectIds = filteredObjects.map(o => o.id);
+            filteredObjects.forEach(obj => {
+                obj.isSelected = true;
+            });
             // Only refresh dimensions and capture snapshots ONCE at the end - O(n) instead of O(n²)
             if (selectionGroup.length === 1) {
                 selectionGroup.rotation = selectionGroup.objects[0].rotation;
@@ -23076,6 +23740,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
             selectionGroup.refreshObjectDimensions();
             selectionGroup.isSelected = true;
             this._core.addSelectionGroup(selectionGroup);
+            this._previouslySelectedObjects.clear();
             this._core.rerender();
         }
     }
@@ -23963,8 +24628,18 @@ class KritzelSelectionTool extends KritzelBaseTool {
                     this._core.removeSelectionGroup();
                     this._core.rerender();
                 }
-                if (selectedObject && selectedObject.isSelected === false && selectedObject?.objects.length === 1 && selectedObject.objects[0].isInteractive) {
-                    return;
+                if (selectedObject && selectedObject.isSelected === false && selectedObject?.objects.length === 1) {
+                    const firstObj = selectedObject.objects[0];
+                    if (KritzelClassHelper.isInstanceOf(firstObj, 'KritzelCustomElement')) {
+                        // Selected single custom elements hand pointer interaction to their
+                        // embedded DOM content. Unselected custom elements remain selectable.
+                        if (firstObj.isSelected && this._core.store.selectionGroup?.objects.length === 1)
+                            return;
+                    }
+                    else if (firstObj.isInteractive) {
+                        // Preserve existing behavior for text/shape edit mode
+                        return;
+                    }
                 }
             }
             this.lineHandleHandler.handlePointerDown(event);
@@ -23976,6 +24651,14 @@ class KritzelSelectionTool extends KritzelBaseTool {
         }
         if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             if (this._core.store.state.isScaling === true) {
+                const activePointerCount = this._core.store.state.pointers.size;
+                // During a real pinch (two active pointers), keep touch handling suspended.
+                // If only one pointer is active, scaling is stale (debounce window after pinch),
+                // so resume normal touch selection behavior immediately.
+                if (activePointerCount === 1) {
+                    this._core.store.state.isScaling = false;
+                    this._savedSelectionGroupForPinch = null;
+                }
                 // A second finger has arrived to start a pinch-zoom gesture. If we
                 // cleared a selection group on the first finger-down, restore it now
                 // so the user's selection is preserved while zooming.
@@ -23984,7 +24667,10 @@ class KritzelSelectionTool extends KritzelBaseTool {
                     this._savedSelectionGroupForPinch = null;
                     this._core.rerender();
                 }
-                return;
+                if (this._core.store.state.isScaling === true) {
+                    return;
+                }
+                // Continue with normal touch handling when scaling was stale.
             }
             if (this._core.store.state.pointers.size === 1) {
                 this._core.store.state.isResizeHandleSelected = this.isHandleSelected(event);
@@ -24016,7 +24702,10 @@ class KritzelSelectionTool extends KritzelBaseTool {
             this.rotationHandler.handlePointerDown(event);
             this.resizeHandler.handlePointerDown(event);
             this.moveHandler.handlePointerDown(event);
-            this.selectionHandler.handlePointerDown(event);
+            // Only process selection handler if we are not scaling (2 pointers)
+            if (this._core.store.state.pointers.size === 1) {
+                this.selectionHandler.handlePointerDown(event);
+            }
             this._core.rerender();
         }
     }
@@ -24090,7 +24779,7 @@ class KritzelSelectionTool extends KritzelBaseTool {
      * @returns A KritzelSelectionGroup containing the object, or null if no object at that location
      */
     getSelectedObject(event) {
-        const path = event.composedPath().slice(1);
+        const path = event.composedPath();
         const objectElement = path.find(element => element.classList && element.classList.contains('object'));
         const object = objectElement?.id ? this._core.findObjectById(objectElement.id) : null;
         if (!object) {
@@ -24100,6 +24789,10 @@ class KritzelSelectionTool extends KritzelBaseTool {
         if (!object.hitTest(x, y)) {
             return null;
         }
+        const currentSelectionGroup = this._core.store.selectionGroup;
+        if (currentSelectionGroup?.objects.some(selectedObject => selectedObject.id === object.id)) {
+            return currentSelectionGroup;
+        }
         if (object instanceof KritzelSelectionGroup) {
             return object;
         }
@@ -24107,7 +24800,7 @@ class KritzelSelectionTool extends KritzelBaseTool {
             const group = KritzelSelectionGroup.create(this._core);
             group.translateX = 0;
             group.translateY = 0;
-            group.addOrRemove(object);
+            group.objectIds = [object.id];
             return group;
         }
     }
@@ -29557,10 +30250,13 @@ exports.KritzelBrushTool = KritzelBrushTool;
 exports.KritzelClassHelper = KritzelClassHelper;
 exports.KritzelColorHelper = KritzelColorHelper;
 exports.KritzelCursorHelper = KritzelCursorHelper;
+exports.KritzelCustomElement = KritzelCustomElement;
+exports.KritzelCustomElementRendererRegistry = KritzelCustomElementRendererRegistry;
 exports.KritzelDevicesHelper = KritzelDevicesHelper;
 exports.KritzelEraserTool = KritzelEraserTool;
 exports.KritzelEventHelper = KritzelEventHelper;
 exports.KritzelGroup = KritzelGroup;
+exports.KritzelHTMLHelper = KritzelHTMLHelper;
 exports.KritzelIconRegistry = KritzelIconRegistry;
 exports.KritzelImage = KritzelImage;
 exports.KritzelImageTool = KritzelImageTool;
@@ -29569,7 +30265,6 @@ exports.KritzelLicenseManager = KritzelLicenseManager;
 exports.KritzelLine = KritzelLine;
 exports.KritzelLineTool = KritzelLineTool;
 exports.KritzelLocalizationManager = KritzelLocalizationManager;
-exports.KritzelMathHelper = KritzelMathHelper;
 exports.KritzelPath = KritzelPath;
 exports.KritzelSelectionBox = KritzelSelectionBox;
 exports.KritzelSelectionGroup = KritzelSelectionGroup;