kritzel-stencil 0.3.22 → 0.3.24

package/dist/esm/{schema.constants-D35cwCYd.js → schema.constants-B3IqnD8l.js}

@@ -14,6 +14,9 @@ class ObjectHelper {
         }
         return Object?.keys(obj).length === 0 && obj?.constructor === Object;
     }
+    static isClass(object, className) {
+        return !!object && object.__class__ === className;
+    }
 }
 
 class KritzelGeometryHelper {
@@ -202,7 +205,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
@@ -509,21 +513,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.
@@ -534,6 +541,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;
     }
     /**
@@ -16433,7 +16448,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();
@@ -16441,7 +16455,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: '...' })`
@@ -16456,9 +16469,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()) {
@@ -16475,9 +16485,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);
@@ -16722,9 +16729,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
@@ -16750,7 +16761,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.
@@ -16783,8 +16793,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.
@@ -16796,7 +16808,7 @@ class KritzelAssetResolver {
             this._resolveReady = null;
             this._rejectReady = null;
         }
-        if (!this._quiet) {
+        if (this.canLogInfo()) {
             this.logProviderConfiguration();
         }
         if (this._pending.size > 0) {
@@ -16805,8 +16817,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) {
@@ -17002,7 +17014,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;
@@ -17061,8 +17073,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) {
@@ -17117,8 +17129,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) {
@@ -17126,8 +17138,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)) {
@@ -17185,6 +17199,9 @@ class KritzelAssetResolver {
         const res = await fetch(dataUrl);
         return res.blob();
     }
+    canLogInfo() {
+        return !this._quiet;
+    }
 }
 
 /**
@@ -17225,7 +17242,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).
@@ -19638,6 +19654,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.
@@ -20106,6 +20726,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
@@ -20151,6 +20777,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;
             }
         }
@@ -20178,9 +20805,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
@@ -20212,11 +20841,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;
+            }
         }
     }
     /**
@@ -20322,6 +20967,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;
@@ -20330,6 +20977,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         if (object.unchangedObjectSnapshots) {
             this.unchangedObjectSnapshots = new Map(Object.entries(object.unchangedObjectSnapshots));
         }
+        this.syncChildSelectionState(this.objects);
         return this;
     }
     /**
@@ -22760,10 +23408,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);
@@ -22792,10 +23439,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);
@@ -22965,8 +23611,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();
     }
@@ -22985,7 +23634,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);
@@ -23030,9 +23683,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);
@@ -23040,12 +23700,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;
@@ -23054,6 +23718,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
             selectionGroup.refreshObjectDimensions();
             selectionGroup.isSelected = true;
             this._core.addSelectionGroup(selectionGroup);
+            this._previouslySelectedObjects.clear();
             this._core.rerender();
         }
     }
@@ -23941,8 +24606,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);
@@ -23954,6 +24629,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.
@@ -23962,7 +24645,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);
@@ -23994,7 +24680,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();
         }
     }
@@ -24068,7 +24757,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) {
@@ -24078,6 +24767,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;
         }
@@ -24085,7 +24778,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;
         }
     }
@@ -29510,4 +30203,4 @@ const CURRENT_APP_STATE_SCHEMA_VERSION = 2;
 /** Current schema version for workspace Y.Docs (drawable objects). */
 const CURRENT_WORKSPACE_SCHEMA_VERSION = 2;
 
-export { KritzelKeyboardHelper as $, AssetNotFoundError as A, darkTheme as B, DE_LOCALE as C, DEFAULT_BRUSH_CONFIG as D, EN_LOCALE as E, FR_LOCALE as F, KritzelAlignment as G, HocuspocusProvider as H, IndexedDBAssetProvider as I, runMigrations as J, KritzelBaseObject as K, APP_STATE_MIGRATIONS as L, WORKSPACE_MIGRATIONS as M, CURRENT_APP_STATE_SCHEMA_VERSION as N, CURRENT_WORKSPACE_SCHEMA_VERSION as O, KritzelColorHelper as P, KritzelDevicesHelper as Q, KritzelMouseButton as R, ShapeType as S, DEFAULT_STROKE_SIZES as T, DEFAULT_COLOR_PALETTE as U, ObjectHelper as V, WORKSPACE_EXPORT_VERSION as W, ThemeHelper as X, KritzelSelectionGroup as Y, KritzelSelectionBox as Z, KritzelIconRegistry as _, HocuspocusProviderWebsocket as a, KritzelBaseHandler as a0, KritzelMathHelper as a1, KritzelClassHelper as a2, imageCompression as a3, KritzelEventHelper as a4, KritzelText as b, KritzelPath as c, KritzelImage as d, KritzelLine as e, KritzelGroup as f, KritzelShape as g, KritzelBaseTool as h, KritzelBrushTool as i, KritzelLineTool as j, KritzelEraserTool as k, KritzelImageTool as l, KritzelTextTool as m, KritzelShapeTool as n, KritzelCursorHelper as o, KritzelSelectionTool as p, KritzelAssetResolver as q, KritzelWorkspace as r, KritzelAnchorManager as s, KritzelThemeManager as t, KritzelLocalizationManager as u, KritzelLicenseManager as v, DEFAULT_TEXT_CONFIG as w, DEFAULT_LINE_TOOL_CONFIG as x, DEFAULT_ASSET_STORAGE_CONFIG as y, lightTheme as z };
+export { KritzelSelectionGroup as $, AssetNotFoundError as A, DEFAULT_ASSET_STORAGE_CONFIG as B, lightTheme as C, DEFAULT_BRUSH_CONFIG as D, darkTheme as E, EN_LOCALE as F, DE_LOCALE as G, HocuspocusProvider as H, IndexedDBAssetProvider as I, FR_LOCALE as J, KritzelBaseObject as K, KritzelAlignment as L, runMigrations as M, APP_STATE_MIGRATIONS as N, WORKSPACE_MIGRATIONS as O, CURRENT_APP_STATE_SCHEMA_VERSION as P, CURRENT_WORKSPACE_SCHEMA_VERSION as Q, KritzelColorHelper as R, ShapeType as S, KritzelDevicesHelper as T, KritzelMouseButton as U, KritzelHTMLHelper as V, WORKSPACE_EXPORT_VERSION as W, DEFAULT_STROKE_SIZES as X, DEFAULT_COLOR_PALETTE as Y, ObjectHelper as Z, ThemeHelper as _, HocuspocusProviderWebsocket as a, KritzelSelectionBox as a0, KritzelIconRegistry as a1, KritzelKeyboardHelper as a2, KritzelBaseHandler as a3, KritzelClassHelper as a4, imageCompression as a5, KritzelEventHelper as a6, KritzelText as b, KritzelPath as c, KritzelImage as d, KritzelLine as e, KritzelGroup as f, KritzelShape as g, KritzelCustomElement as h, KritzelBaseTool as i, KritzelBrushTool as j, KritzelLineTool as k, KritzelEraserTool as l, KritzelImageTool as m, KritzelTextTool as n, KritzelShapeTool as o, KritzelCursorHelper as p, KritzelSelectionTool as q, KritzelAssetResolver as r, KritzelWorkspace as s, KritzelAnchorManager as t, KritzelThemeManager as u, KritzelLocalizationManager as v, KritzelLicenseManager as w, KritzelCustomElementRendererRegistry as x, DEFAULT_TEXT_CONFIG as y, DEFAULT_LINE_TOOL_CONFIG as z };