@kritzel/editor 0.4.31 → 0.4.32

package/dist/components/{p-DZsSiMnA.js → p-CiSc7ASZ.js}

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
-import { a as KritzelMouseButton, d as defineCustomElement$3 } from './p-Cp4e4oTE.js';
-import { a as KritzelBaseObject, b as KritzelLine, c as KritzelMathHelper, e as KritzelGeometryHelper, f as KritzelColorHelper, D as DEFAULT_COLOR_PALETTE, g as KritzelPath, O as ObjectHelper, h as KritzelThemeManager, d as defineCustomElement$4 } from './p-Cy_cLtOP.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-l1BZ4pYI.js';
+import { a as KritzelMouseButton, d as defineCustomElement$3 } from './p-DZ0S2l6Z.js';
+import { a as KritzelBaseObject, b as KritzelLine, c as KritzelMathHelper, e as KritzelGeometryHelper, f as KritzelColorHelper, D as DEFAULT_COLOR_PALETTE, g as KritzelPath, O as ObjectHelper, h as KritzelThemeManager, d as defineCustomElement$4 } from './p-CdwD9F0m.js';
 import { c as commonjsGlobal } from './p-BFTU3MAI.js';
-import { A as ABSOLUTE_SCALE_MAX, a as ABSOLUTE_SCALE_MIN, d as defineCustomElement$1 } from './p-SLnqczCS.js';
-import { a as KritzelIconRegistry, d as defineCustomElement$2 } from './p-BGmTmdLe.js';
+import { A as ABSOLUTE_SCALE_MAX, a as ABSOLUTE_SCALE_MIN, d as defineCustomElement$1 } from './p-BowLPDbq.js';
+import { a as KritzelIconRegistry, d as defineCustomElement$2 } from './p-DSi2HiZW.js';
 
 /**
  * Represents a visual selection box used for multi-object selection on the canvas.
@@ -38067,9 +38067,8 @@ class KritzelSelectionTool extends KritzelBaseTool {
                 }
                 if (selectedObject && selectedObject.isSelected === false && selectedObject?.objects.length === 1) {
                     const firstObj = selectedObject.objects[0];
-                    if (KritzelClassHelper.isInstanceOf(firstObj, 'KritzelDynamicObject')) {
-                        // Selected single dynamic objects hand pointer interaction to their
-                        // embedded DOM content. Unselected dynamic objects remain selectable.
+                    if (ObjectHelper.isKritzelEmbeddedObject(firstObj)) {
+                        // Selected embedded objects hand pointer interaction to their content.
                         if (firstObj.isSelected && this._core.store.selectionGroup?.objects.length === 1)
                             return;
                     }
@@ -40238,7 +40237,7 @@ class KritzelDynamicObject extends KritzelBaseObject {
     }
     applyInteractiveState() {
         const pointerEvents = this.isInteractive ? 'auto' : 'none';
-        const contentCursor = this.isInteractive ? 'auto' : '';
+        const contentCursor = this.isInteractive ? 'var(--kritzel-global-default-cursor, auto)' : '';
         if (this.element) {
             this.element.style.pointerEvents = pointerEvents;
             this.element.style.cursor = contentCursor;
@@ -40274,7 +40273,7 @@ class KritzelDynamicObject extends KritzelBaseObject {
         if (!this.isInteractive) {
             return false;
         }
-        const focusHosts = this.getFocusHosts();
+        const focusHosts = this.getEmbeddedContentRoots();
         // 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
@@ -40291,7 +40290,7 @@ class KritzelDynamicObject extends KritzelBaseObject {
         }
         return false;
     }
-    getFocusHosts() {
+    getEmbeddedContentRoots() {
         const hosts = [];
         if (this.element) {
             hosts.push(this.element);
@@ -40504,11 +40503,11 @@ class KritzelDynamicObject extends KritzelBaseObject {
      * @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 { _core, _elementRef, element, totalWidth, totalHeight, isSelected, isHovered, isMounted, isInteractive, resizing, markedForRemoval, isVisible, rendererData, ...props } = this;
         const cloned = structuredClone(props);
         // Include rendererKey and rendererData for lifecycle-driven rendering
         cloned.rendererKey = this.rendererKey;
-        cloned.rendererData = this.rendererData;
+        cloned.rendererData = this.serializeRendererData();
         // Store HTML as string for fallback/compatibility when renderer is unavailable
         cloned.htmlString = element ? element.outerHTML : '';
         // Capture dimension snapshot at serialization time
@@ -40516,6 +40515,19 @@ class KritzelDynamicObject extends KritzelBaseObject {
         cloned.serializedHeight = this.height;
         return cloned;
     }
+    serializeRendererData() {
+        if (this.rendererKey) {
+            const renderer = KritzelDynamicObjectRendererRegistry.get(this.rendererKey);
+            if (renderer?.onSerialize) {
+                return structuredClone(renderer.onSerialize({
+                    object: this,
+                    container: this.isMounted && this.elementRef instanceof HTMLElement ? this.elementRef : null,
+                    data: this.rendererData,
+                }));
+            }
+        }
+        return structuredClone(this.rendererData);
+    }
     /**
      * Deserializes the dynamic object from a plain object.
      * Reconstructs the element from stored HTML string with fallback to placeholder.
@@ -40548,6 +40560,452 @@ class KritzelDynamicObject extends KritzelBaseObject {
     }
 }
 
+const IFRAME_STATE_MESSAGE = 'kritzel-iframe-state';
+const IFRAME_PARENT_STATE_MESSAGE = 'kritzel-iframe-parent-state';
+const IFRAME_POINTER_MESSAGE = 'kritzel-iframe-pointer';
+const IFRAME_CONTEXT_MENU_MESSAGE = 'kritzel-iframe-contextmenu';
+const SUPPORTED_SANDBOX_TOKENS = new Set([
+    'allow-downloads',
+    'allow-forms',
+    'allow-modals',
+    'allow-orientation-lock',
+    'allow-pointer-lock',
+    'allow-popups',
+    'allow-popups-to-escape-sandbox',
+    'allow-presentation',
+    'allow-same-origin',
+    'allow-scripts',
+    'allow-top-navigation-by-user-activation',
+]);
+const iframePointerBridgeStarts = new WeakMap();
+class KritzelIframeObject extends KritzelBaseObject {
+    __class__ = 'KritzelIframeObject';
+    content = { html: '', css: '', script: '' };
+    loadingContent;
+    isLoading = false;
+    state = {};
+    title = 'Embedded content';
+    sandbox = ['allow-scripts'];
+    borderRadius;
+    boxShadow;
+    get html() { return this.content.html; }
+    set html(value) { this.content = { ...this.content, html: value }; }
+    get css() { return this.content.css; }
+    set css(value) { this.content = { ...this.content, css: value }; }
+    get script() { return this.content.script; }
+    set script(value) { this.content = { ...this.content, script: value }; }
+    messageListener = null;
+    constructor(config) {
+        super();
+        this.content = {
+            html: config?.content?.html ?? config?.html ?? '',
+            css: config?.content?.css ?? config?.css ?? '',
+            script: config?.content?.script ?? config?.script ?? '',
+        };
+        this.loadingContent = config?.loadingContent ? {
+            html: config.loadingContent.html ?? '',
+            css: config.loadingContent.css ?? '',
+            script: config.loadingContent.script ?? '',
+        } : undefined;
+        this.isLoading = config?.isLoading ?? false;
+        this.state = structuredClone(config?.state ?? {});
+        this.title = config?.title ?? 'Embedded content';
+        this.sandbox = this.normalizeSandbox(config?.sandbox);
+        this.borderRadius = config?.borderRadius;
+        this.boxShadow = config?.boxShadow;
+        this.translateX = config?.translateX ?? 0;
+        this.translateY = config?.translateY ?? 0;
+        this.rotation = KritzelMathHelper.degreesToRadians(config?.rotation ?? 0);
+        this.scale = config?.scale ?? 1;
+        this.width = config?.width ?? 0;
+        this.height = config?.height ?? 0;
+    }
+    static create(core, config) {
+        const object = new KritzelIframeObject(config);
+        object._core = core;
+        object.id = object.generateId();
+        object.workspaceId = core.store.state.activeWorkspace.id;
+        object.userId = core.user?.id;
+        object.scale = config?.scale ?? core.store.state.scale;
+        object.zIndex = core.store.currentZIndex;
+        return object;
+    }
+    get sandboxAttribute() {
+        return this.sandbox.join(' ');
+    }
+    mount(iframe) {
+        if (this.isMounted && this.elementRef === iframe) {
+            return;
+        }
+        if (this.isMounted) {
+            this.unmount();
+        }
+        this.elementRef = iframe;
+        this.isMounted = true;
+        iframe.title = this.title;
+        iframe.setAttribute('sandbox', this.sandboxAttribute);
+        iframe.style.pointerEvents = this.isInteractive ? 'auto' : 'none';
+        this.messageListener = event => this.handleMessage(event);
+        window.addEventListener('message', this.messageListener);
+        iframe.srcdoc = this.createSourceDocument();
+        this.onMount(this.createLifecycleContext());
+    }
+    unmount() {
+        if (!this.isMounted) {
+            return;
+        }
+        const nextState = this.onUnmount(this.createLifecycleContext());
+        if (nextState !== undefined) {
+            this.state = structuredClone(nextState);
+        }
+        if (this.messageListener) {
+            window.removeEventListener('message', this.messageListener);
+            this.messageListener = null;
+        }
+        this.isMounted = false;
+        this._elementRef = null;
+    }
+    setContent(content) {
+        this.content = {
+            html: content.html ?? this.content.html,
+            css: content.css ?? this.content.css,
+            script: content.script ?? this.content.script,
+        };
+        this.refreshDocument();
+        this.persistUpdate();
+    }
+    setLoadingContent(content) {
+        this.loadingContent = {
+            html: content.html ?? this.loadingContent?.html ?? '',
+            css: content.css ?? this.loadingContent?.css ?? '',
+            script: content.script ?? this.loadingContent?.script ?? '',
+        };
+        this.refreshDocument();
+        this.persistUpdate();
+    }
+    setLoading(isLoading) {
+        this.isLoading = isLoading;
+        this.refreshDocument();
+        this.persistUpdate();
+    }
+    getActiveContent() {
+        const activeLoadingContent = this.isLoading ? this.loadingContent : undefined;
+        return {
+            html: activeLoadingContent?.html ?? this.content.html,
+            css: activeLoadingContent?.css ?? this.content.css,
+            script: activeLoadingContent?.script ?? this.content.script,
+        };
+    }
+    setState(state) {
+        this.state = structuredClone(state);
+        this.elementRef?.contentWindow?.postMessage({ type: IFRAME_PARENT_STATE_MESSAGE, state: this.state }, '*');
+        this.persistUpdate();
+    }
+    setIsInteractive(isInteractive) {
+        this.isInteractive = isInteractive;
+        if (this.isMounted && this.elementRef) {
+            this.elementRef.style.pointerEvents = isInteractive ? 'auto' : 'none';
+            if (!isInteractive) {
+                this.elementRef.blur();
+            }
+        }
+    }
+    hasFocusedInputElement() {
+        return this.isInteractive && this.isMounted && document.activeElement === this.elementRef;
+    }
+    getEmbeddedContentRoots() {
+        return this.isMounted && this.elementRef instanceof HTMLElement && this.elementRef.tagName === 'IFRAME' ? [this.elementRef] : [];
+    }
+    onMount(_context) { }
+    onSerialize(context) {
+        return context.state;
+    }
+    onUnmount(context) {
+        return context.state;
+    }
+    serialize() {
+        const nextState = this.onSerialize(this.createLifecycleContext());
+        this.state = structuredClone(nextState);
+        const messageListener = this.messageListener;
+        this.messageListener = null;
+        try {
+            const serialized = super.serialize();
+            delete serialized.messageListener;
+            return serialized;
+        }
+        finally {
+            this.messageListener = messageListener;
+        }
+    }
+    deserialize(object) {
+        super.deserialize(object);
+        const nextContent = object.content && typeof object.content === 'object' ? object.content : {};
+        const nextLoadingContent = object.loadingContent && typeof object.loadingContent === 'object' ? object.loadingContent : undefined;
+        this.content = {
+            html: typeof nextContent.html === 'string' ? nextContent.html : typeof object.html === 'string' ? object.html : '',
+            css: typeof nextContent.css === 'string' ? nextContent.css : typeof object.css === 'string' ? object.css : '',
+            script: typeof nextContent.script === 'string' ? nextContent.script : typeof object.script === 'string' ? object.script : '',
+        };
+        this.loadingContent = nextLoadingContent ? {
+            html: typeof nextLoadingContent.html === 'string' ? nextLoadingContent.html : '',
+            css: typeof nextLoadingContent.css === 'string' ? nextLoadingContent.css : '',
+            script: typeof nextLoadingContent.script === 'string' ? nextLoadingContent.script : '',
+        } : undefined;
+        this.isLoading = typeof object.isLoading === 'boolean' ? object.isLoading : false;
+        this.state = object.state && typeof object.state === 'object' ? structuredClone(object.state) : {};
+        this.title = typeof object.title === 'string' ? object.title : 'Embedded content';
+        this.sandbox = this.normalizeSandbox(Array.isArray(object.sandbox) ? object.sandbox.filter((token) => typeof token === 'string') : undefined);
+        this.borderRadius = (typeof object.borderRadius === 'number' || typeof object.borderRadius === 'string') ? object.borderRadius : undefined;
+        this.boxShadow = typeof object.boxShadow === 'string' ? object.boxShadow : undefined;
+        this.messageListener = null;
+        return this;
+    }
+    copy() {
+        const copiedObject = super.copy();
+        copiedObject.content = { ...this.content };
+        copiedObject.loadingContent = this.loadingContent ? { ...this.loadingContent } : undefined;
+        copiedObject.isLoading = this.isLoading;
+        copiedObject.state = structuredClone(this.state);
+        copiedObject.sandbox = [...this.sandbox];
+        copiedObject.borderRadius = this.borderRadius;
+        copiedObject.boxShadow = this.boxShadow;
+        copiedObject.messageListener = null;
+        copiedObject._elementRef = null;
+        return copiedObject;
+    }
+    clone() {
+        const clonedObject = super.clone();
+        clonedObject.content = { ...this.content };
+        clonedObject.loadingContent = this.loadingContent ? { ...this.loadingContent } : undefined;
+        clonedObject.isLoading = this.isLoading;
+        clonedObject.state = structuredClone(this.state);
+        clonedObject.sandbox = [...this.sandbox];
+        clonedObject.borderRadius = this.borderRadius;
+        clonedObject.boxShadow = this.boxShadow;
+        clonedObject.messageListener = null;
+        clonedObject.isMounted = false;
+        clonedObject._elementRef = null;
+        return clonedObject;
+    }
+    adoptTransientStateFrom(previous) {
+        if (!(previous instanceof KritzelIframeObject)) {
+            return;
+        }
+        this.isInteractive = previous.isInteractive;
+        this.isSelected = previous.isSelected;
+        this.isHovered = previous.isHovered;
+        if (!previous.isMounted || !(previous.elementRef instanceof HTMLElement) || previous.elementRef.tagName !== 'IFRAME') {
+            return;
+        }
+        if (previous.messageListener) {
+            window.removeEventListener('message', previous.messageListener);
+        }
+        this._elementRef = previous.elementRef;
+        this.isMounted = true;
+        this.messageListener = event => this.handleMessage(event);
+        window.addEventListener('message', this.messageListener);
+        this.elementRef.style.pointerEvents = this.isInteractive ? 'auto' : 'none';
+        previous.messageListener = null;
+        previous.isMounted = false;
+        previous._elementRef = null;
+    }
+    createLifecycleContext() {
+        return {
+            object: this,
+            iframe: this.isMounted ? this.elementRef : null,
+            state: structuredClone(this.state),
+        };
+    }
+    normalizeSandbox(tokens) {
+        const requestedTokens = tokens ?? ['allow-scripts'];
+        const normalized = requestedTokens.filter(token => SUPPORTED_SANDBOX_TOKENS.has(token));
+        return [...new Set(normalized.length > 0 ? normalized : ['allow-scripts'])];
+    }
+    createSourceDocument() {
+        const activeContent = this.getActiveContent();
+        const state = JSON.stringify(this.state).replace(/</g, '\\u003c');
+        const css = activeContent.css.replace(/<\/style/gi, '<\\/style');
+        const script = activeContent.script.replace(/<\/script/gi, '<\\/script');
+        const computedStyle = this.isMounted ? getComputedStyle(this.elementRef) : null;
+        const defaultCursor = computedStyle?.getPropertyValue('--kritzel-global-default-cursor').trim() || 'auto';
+        const pointerCursor = computedStyle?.getPropertyValue('--kritzel-global-pointer-cursor').trim() || defaultCursor;
+        return `<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <style>
+      :root {
+        --kritzel-iframe-default-cursor: ${defaultCursor};
+        --kritzel-iframe-pointer-cursor: ${pointerCursor};
+      }
+      html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; cursor: var(--kritzel-iframe-default-cursor); }
+      button, button *, a, a *, input, textarea, select { cursor: var(--kritzel-iframe-pointer-cursor) !important; }
+      ${css}
+    </style>
+  </head>
+  <body>
+    ${activeContent.html}
+    <script>
+      const kritzel = globalThis.kritzel = {
+        state: ${state},
+        setState(nextState) {
+          this.state = nextState;
+          parent.postMessage({ type: '${IFRAME_STATE_MESSAGE}', state: nextState }, '*');
+        },
+      };
+      globalThis.addEventListener('message', event => {
+        if (event.data?.type === '${IFRAME_PARENT_STATE_MESSAGE}' && event.data.state && typeof event.data.state === 'object') {
+          kritzel.state = event.data.state;
+          globalThis.dispatchEvent(new CustomEvent('kritzelstatechange', { detail: kritzel.state }));
+        }
+      });
+      let bridgedPointerId = null;
+      const interactiveSelector = 'button, input, textarea, select, a[href], [contenteditable="true"], [contenteditable=""]';
+      const bridgePointerEvent = event => parent.postMessage({
+        type: '${IFRAME_POINTER_MESSAGE}',
+        eventType: event.type,
+        pointerId: event.pointerId,
+        pointerType: event.pointerType,
+        clientX: event.clientX,
+        clientY: event.clientY,
+        screenX: event.screenX,
+        screenY: event.screenY,
+        button: event.button,
+        buttons: event.buttons,
+        shiftKey: event.shiftKey,
+        ctrlKey: event.ctrlKey,
+        altKey: event.altKey,
+        metaKey: event.metaKey,
+      }, '*');
+      document.addEventListener('pointerdown', event => {
+        if (event.target instanceof Element && event.target.closest(interactiveSelector)) return;
+        bridgedPointerId = event.pointerId;
+        event.preventDefault();
+        bridgePointerEvent(event);
+      });
+      document.addEventListener('pointermove', event => {
+        if (event.pointerId !== bridgedPointerId) return;
+        event.preventDefault();
+        bridgePointerEvent(event);
+      });
+      const finishPointerBridge = event => {
+        if (event.pointerId !== bridgedPointerId) return;
+        event.preventDefault();
+        bridgePointerEvent(event);
+        bridgedPointerId = null;
+      };
+      document.addEventListener('pointerup', finishPointerBridge);
+      document.addEventListener('pointercancel', finishPointerBridge);
+      document.addEventListener('contextmenu', event => {
+        event.preventDefault();
+        parent.postMessage({
+          type: '${IFRAME_CONTEXT_MENU_MESSAGE}',
+          clientX: event.clientX,
+          clientY: event.clientY,
+          button: event.button,
+          shiftKey: event.shiftKey,
+          ctrlKey: event.ctrlKey,
+          altKey: event.altKey,
+          metaKey: event.metaKey,
+        }, '*');
+      });
+      ${script}
+    <\/script>
+  </body>
+</html>`;
+    }
+    handleMessage(event) {
+        if (event.source !== this.elementRef?.contentWindow || !event.data || typeof event.data !== 'object') {
+            return;
+        }
+        const message = event.data;
+        if (message.type === IFRAME_POINTER_MESSAGE) {
+            this.dispatchPointerMessage(event.data);
+            return;
+        }
+        if (message.type === IFRAME_CONTEXT_MENU_MESSAGE) {
+            this.dispatchContextMenuMessage(event.data);
+            return;
+        }
+        if (message.type !== IFRAME_STATE_MESSAGE || !message.state || typeof message.state !== 'object') {
+            return;
+        }
+        this.state = structuredClone(message.state);
+        this.persistUpdate();
+    }
+    dispatchPointerMessage(message) {
+        if (!this.isMounted || !this.elementRef || !['pointerdown', 'pointermove', 'pointerup', 'pointercancel'].includes(message.eventType)) {
+            return;
+        }
+        const iframeRect = this.elementRef.getBoundingClientRect();
+        if (message.eventType === 'pointerdown') {
+            const scaleX = this.elementRef.offsetWidth > 0 ? iframeRect.width / this.elementRef.offsetWidth : 1;
+            const scaleY = this.elementRef.offsetHeight > 0 ? iframeRect.height / this.elementRef.offsetHeight : 1;
+            iframePointerBridgeStarts.set(this.elementRef, {
+                pointerId: message.pointerId,
+                clientX: iframeRect.left + message.clientX * scaleX,
+                clientY: iframeRect.top + message.clientY * scaleY,
+                screenX: message.screenX,
+                screenY: message.screenY,
+            });
+        }
+        const bridgeStart = iframePointerBridgeStarts.get(this.elementRef);
+        const hasBridgeStart = bridgeStart?.pointerId === message.pointerId;
+        const clientX = hasBridgeStart ? bridgeStart.clientX + message.screenX - bridgeStart.screenX : iframeRect.left + message.clientX;
+        const clientY = hasBridgeStart ? bridgeStart.clientY + message.screenY - bridgeStart.screenY : iframeRect.top + message.clientY;
+        this.elementRef.dispatchEvent(new PointerEvent(message.eventType, {
+            bubbles: true,
+            composed: true,
+            cancelable: true,
+            pointerId: message.pointerId,
+            pointerType: message.pointerType,
+            clientX,
+            clientY,
+            screenX: message.screenX,
+            screenY: message.screenY,
+            button: message.button,
+            buttons: message.buttons,
+            shiftKey: message.shiftKey,
+            ctrlKey: message.ctrlKey,
+            altKey: message.altKey,
+            metaKey: message.metaKey,
+        }));
+        if (message.eventType === 'pointerup' || message.eventType === 'pointercancel') {
+            iframePointerBridgeStarts.delete(this.elementRef);
+        }
+    }
+    dispatchContextMenuMessage(message) {
+        if (!this.isMounted || !this.elementRef) {
+            return;
+        }
+        const iframeRect = this.elementRef.getBoundingClientRect();
+        // Dispatched as a MouseEvent (not PointerEvent) to mirror how browsers
+        // natively raise 'contextmenu' for both mouse right-click and touch long-press.
+        this.elementRef.dispatchEvent(new MouseEvent('contextmenu', {
+            bubbles: true,
+            composed: true,
+            cancelable: true,
+            clientX: iframeRect.left + message.clientX,
+            clientY: iframeRect.top + message.clientY,
+            button: message.button,
+            shiftKey: message.shiftKey,
+            ctrlKey: message.ctrlKey,
+            altKey: message.altKey,
+            metaKey: message.metaKey,
+        }));
+    }
+    refreshDocument() {
+        if (this.isMounted && this.elementRef) {
+            this.elementRef.srcdoc = this.createSourceDocument();
+        }
+    }
+    persistUpdate() {
+        if (this._core?.store?.objects) {
+            this.update();
+        }
+    }
+}
+
 /**
  * Handles deserialization/revival of Kritzel objects from plain JavaScript objects.
  * This class uses a pattern similar to JSON.parse reviver to reconstruct class instances
@@ -40610,6 +41068,9 @@ class KritzelReviver {
                     case 'KritzelDynamicObject':
                         revivedObj = KritzelDynamicObject.create(this._core).deserialize(obj);
                         break;
+                    case 'KritzelIframeObject':
+                        revivedObj = KritzelIframeObject.create(this._core).deserialize(obj);
+                        break;
                     case 'KritzelSelectionGroup':
                         revivedObj = KritzelSelectionGroup.create(this._core).deserialize(obj);
                         break;
@@ -52971,9 +53432,16 @@ class KritzelStore {
      * Gets the currently selected dynamic object whose focused descendant is an input-like element.
      * @returns The interactive dynamic object with focused input-like content, or null if none matches
      */
+    get activeInteractiveEmbeddedObject() {
+        for (const object of this.selectedObjects) {
+            if (ObjectHelper.isKritzelEmbeddedObject(object) && object.hasFocusedInputElement()) {
+                return object;
+            }
+        }
+        return null;
+    }
     get activeInteractiveDynamicObject() {
-        const interactiveDynamicObject = this.selectedObjects.find(object => KritzelClassHelper.isInstanceOf(object, 'KritzelDynamicObject') && object.hasFocusedInputElement());
-        return interactiveDynamicObject ?? null;
+        return this.activeInteractiveEmbeddedObject;
     }
     /**
      * Gets the path currently being drawn (not yet completed).
@@ -55073,7 +55541,7 @@ class KritzelCursorHelper {
      * The icon is retrieved from the KritzelIconRegistry.
      */
     static getCursor(options) {
-        const iconName = options.iconName === 'default' ? 'mouse-pointer' : options.iconName;
+        const iconName = options.iconName === 'default' ? 'mousePointer' : options.iconName;
         const iconSvg = KritzelIconRegistry.get(iconName);
         if (!iconSvg) {
             console.warn(`Icon "${iconName}" not found in registry.`);
@@ -55082,7 +55550,7 @@ class KritzelCursorHelper {
         const size = options.size || 24;
         const rotation = options.rotation || 0;
         const color = options.color || 'black';
-        // Default cursor (mouse-pointer) has hotspot at (4, 4), others at center
+        // Default cursor (mousePointer) has hotspot at (4, 4), others at center
         const hotspot = options.hotspot || (options.iconName === 'default' ? { x: 4, y: 4 } : { x: size / 2, y: size / 2 });
         // Modify the SVG string to set size and color
         // We replace width and height to match the requested size
@@ -55095,12 +55563,12 @@ class KritzelCursorHelper {
         // We rotate around the center of the SVG canvas
         const center = size / 2;
         // We use a group to apply the rotation
-        const svg = `
-      <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
-        <g transform="rotate(${rotation} ${center} ${center})">
-          ${content}
-        </g>
-      </svg>
+        const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+        <g transform="rotate(${rotation} ${center} ${center})">
+          ${content}
+        </g>
+      </svg>
     `;
         // Encode the SVG for use in a data URI
         // We need to be careful with encoding to ensure it works across browsers
@@ -55138,11 +55606,13 @@ class KritzelCursorManager {
         // Reset cursor on old target
         if (this._targetElement) {
             this._targetElement.style.cursor = '';
+            this._targetElement.style.removeProperty('--kritzel-global-default-cursor');
             this._targetElement.style.removeProperty('--kritzel-global-pointer-cursor');
         }
         this._targetElement = element;
         // Set the pointer cursor CSS variable for child components to use
         if (this._targetElement) {
+            this._targetElement.style.setProperty('--kritzel-global-default-cursor', KritzelCursorHelper.getCursor({ iconName: 'default' }));
             this._targetElement.style.setProperty('--kritzel-global-pointer-cursor', KritzelCursorHelper.getPointerCursor());
         }
     }
@@ -55187,8 +55657,10 @@ class KritzelCursorManager {
         if (!this._shadowRoot)
             return;
         const elementsAtPoint = this._shadowRoot.elementsFromPoint(ev.clientX, ev.clientY);
-        if (!elementsAtPoint || elementsAtPoint.length === 0)
+        if (!elementsAtPoint || elementsAtPoint.length === 0) {
+            this.resetToDefault();
             return;
+        }
         // Check for resize handle overlays (selection group)
         const resizeHandleOverlay = elementsAtPoint.find(el => el.classList.contains('resize-handle-overlay'));
         if (resizeHandleOverlay) {
@@ -55198,19 +55670,19 @@ class KritzelCursorManager {
             const isTopLeft = resizeHandleOverlay.classList.contains('top-left');
             const isBottomRight = resizeHandleOverlay.classList.contains('bottom-right');
             const rotationOffset = (isTopLeft || isBottomRight) ? -45 : 45;
-            this._core.store.state.cursor = { icon: 'move-vertical', rotation: rotationDegrees + rotationOffset };
+            this._core.store.state.cursor = { icon: 'moveVertical', rotation: rotationDegrees + rotationOffset };
             return;
         }
         // Check for rotation handle overlay
         const rotationHandleOverlay = elementsAtPoint.find(el => el.classList.contains('rotation-handle-overlay'));
         if (rotationHandleOverlay) {
-            this._core.store.state.cursor = { icon: 'hand', iconActive: 'hand-grab' };
+            this._core.store.state.cursor = { icon: 'hand', iconActive: 'handGrab' };
             return;
         }
         // Check for line handle overlays (selection line)
         const lineHandleOverlay = elementsAtPoint.find(el => el.classList.contains('selection-line-handle-overlay'));
         if (lineHandleOverlay) {
-            this._core.store.state.cursor = { icon: 'hand', iconActive: 'hand-grab' };
+            this._core.store.state.cursor = { icon: 'hand', iconActive: 'handGrab' };
             return;
         }
         // Reset cursor if not hovering any handle
@@ -55245,7 +55717,8 @@ class KritzelCursorManager {
     cleanup() {
         if (this._targetElement) {
             this._targetElement.style.cursor = '';
-            this._targetElement.style.removeProperty('--kritzel-pointer-cursor');
+            this._targetElement.style.removeProperty('--kritzel-global-default-cursor');
+            this._targetElement.style.removeProperty('--kritzel-global-pointer-cursor');
         }
         this._targetElement = null;
         this._shadowRoot = null;
@@ -57148,7 +57621,7 @@ class KritzelCore {
         this._store.state.translateY = viewportHeight / 2 - (viewport.centerWorldY ?? 0) * scale;
         this._store.state.scale = scale;
         await objectsMap.initialize(this, activeWorkspace.id, this._syncConfig);
-        this.seedWorkspaceObjects(activeWorkspace, objectsMap);
+        await this.seedWorkspaceObjects(activeWorkspace, objectsMap);
         // Set local user in awareness after object map is initialized
         if (this._user) {
             objectsMap.setLocalUser(this._user);
@@ -57162,15 +57635,21 @@ class KritzelCore {
         this.engine.emitObjectsChange();
         this.rerender();
     }
-    seedWorkspaceObjects(workspace, objectsMap) {
+    async seedWorkspaceObjects(workspace, objectsMap) {
         if (!workspace.objects?.length) {
             return;
         }
+        const pendingObjects = workspace.objects.filter(object => !objectsMap.findById(object.id));
+        // Mirrors engine.addObject()/addObjects(): image asset upload is async and must
+        // happen before the (synchronous) Yjs transaction that inserts the objects.
+        for (const object of pendingObjects) {
+            object._core = this;
+            if (KritzelClassHelper.isInstanceOf(object, 'KritzelImage')) {
+                await object.prepareForInsert();
+            }
+        }
         objectsMap.transaction(() => {
-            for (const object of workspace.objects) {
-                if (objectsMap.findById(object.id)) {
-                    continue;
-                }
+            for (const object of pendingObjects) {
                 this.prepareObjectForWorkspace(object, workspace.id, this._store.currentZIndex, this._store.state.scale);
                 objectsMap.insert(object);
             }
@@ -57209,16 +57688,30 @@ class KritzelCore {
      * @param scaleFallback - Scale applied to objects that do not define one
      * @returns The objects that were added, updated and removed
      */
-    reconcileWorkspaceObjects(objectsMap, workspaceId, desiredObjects, nextZIndex, scaleFallback) {
+    async reconcileWorkspaceObjects(objectsMap, workspaceId, desiredObjects, nextZIndex, scaleFallback) {
         const existingObjects = objectsMap.allObjects().filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KritzelSelectionBox));
         const existingById = new Map(existingObjects.map(object => [object.id, object]));
         const desiredIds = new Set();
         const diff = { added: [], updated: [], removed: [] };
+        // Assign IDs up front so the insert-vs-update lookup below is stable, and so the
+        // async image-prepare pass and the (synchronous) transaction agree on identity.
+        for (const object of desiredObjects) {
+            if (!object.id) {
+                object.id = object.generateId();
+            }
+        }
+        // Mirrors engine.addObject()/addObjects(): image asset upload is async and must
+        // happen before the (synchronous) Yjs transaction that inserts the objects.
+        for (const object of desiredObjects) {
+            const existingObject = existingById.get(object.id);
+            const isNewOrReplaced = !existingObject || existingObject !== object;
+            if (isNewOrReplaced && KritzelClassHelper.isInstanceOf(object, 'KritzelImage')) {
+                object._core = this;
+                await object.prepareForInsert();
+            }
+        }
         objectsMap.transaction(() => {
             for (const object of desiredObjects) {
-                if (!object.id) {
-                    object.id = object.generateId();
-                }
                 desiredIds.add(object.id);
                 const existingObject = existingById.get(object.id);
                 if (!existingObject) {
@@ -57256,7 +57749,7 @@ class KritzelCore {
      * object set stays exactly what the caller declared.
      */
     detachObject(object) {
-        if (KritzelClassHelper.isInstanceOf(object, 'KritzelDynamicObject')) {
+        if (ObjectHelper.isKritzelEmbeddedObject(object)) {
             object.unmount();
         }
         object.isMounted = false;
@@ -57432,13 +57925,13 @@ class KritzelCore {
             activeWorkspace.viewport = { centerWorldX, centerWorldY, scale };
         }
     }
-    applyObjectsToActiveWorkspace(workspace, desiredObjects) {
+    async applyObjectsToActiveWorkspace(workspace, desiredObjects) {
         const objectsMap = this._store.objects;
         if (!objectsMap) {
             return null;
         }
         this.clearSelection();
-        const diff = this.reconcileWorkspaceObjects(objectsMap, workspace.id, desiredObjects, () => this._store.currentZIndex, this._store.state.scale);
+        const diff = await this.reconcileWorkspaceObjects(objectsMap, workspace.id, desiredObjects, () => this._store.currentZIndex, this._store.state.scale);
         this._anchorManager.rebuildIndex();
         this.rerender();
         return diff;
@@ -57457,7 +57950,7 @@ class KritzelCore {
         try {
             await objectsMap.initialize(this, workspace.id, this._syncConfig, { headless: true, workspaceName: workspace.name });
             await objectsMap.whenNetworkSynced();
-            return this.reconcileWorkspaceObjects(objectsMap, workspace.id, desiredObjects, () => this.nextZIndexOf(objectsMap), this._store.state.scale);
+            return await this.reconcileWorkspaceObjects(objectsMap, workspace.id, desiredObjects, () => this.nextZIndexOf(objectsMap), this._store.state.scale);
         }
         finally {
             objectsMap.destroy();
@@ -57543,8 +58036,7 @@ class KritzelCore {
                 this.removeObject(child);
             });
         }
-        // Unmount dynamic objects before removal
-        if (KritzelClassHelper.isInstanceOf(object, 'KritzelDynamicObject')) {
+        if (ObjectHelper.isKritzelEmbeddedObject(object)) {
             object.unmount();
         }
         // Handle anchor cleanup
@@ -57590,14 +58082,8 @@ class KritzelCore {
         this.removeLocalSelectionGroups();
         this.removeSelectionBox();
         for (const object of selectionGroup.objects ?? []) {
-            if (KritzelClassHelper.isInstanceOf(object, 'KritzelDynamicObject')) {
-                const dynamicObject = object;
-                if (typeof dynamicObject.setIsInteractive === 'function') {
-                    dynamicObject.setIsInteractive(true);
-                }
-                else {
-                    dynamicObject.isInteractive = true;
-                }
+            if (ObjectHelper.isKritzelEmbeddedObject(object)) {
+                object.setIsInteractive(true);
             }
         }
         this._store.objects.insert(selectionGroup);
@@ -57618,14 +58104,8 @@ class KritzelCore {
     teardownSelectionGroup(selectionGroup) {
         selectionGroup.deselectAllChildren?.();
         for (const object of selectionGroup.objects ?? []) {
-            if (KritzelClassHelper.isInstanceOf(object, 'KritzelDynamicObject')) {
-                const dynamicObject = object;
-                if (typeof dynamicObject.setIsInteractive === 'function') {
-                    dynamicObject.setIsInteractive(false);
-                }
-                else {
-                    dynamicObject.isInteractive = false;
-                }
+            if (ObjectHelper.isKritzelEmbeddedObject(object)) {
+                object.setIsInteractive(false);
             }
         }
     }
@@ -59071,13 +59551,7 @@ class KritzelWheelHelper {
         return this.canElementConsumeWheel(scrollContainer, ev.deltaX, ev.deltaY);
     }
     static getScrollableContainerFromEventPath(path, dynamicObject) {
-        const potentialRoots = [];
-        if (dynamicObject.element instanceof HTMLElement) {
-            potentialRoots.push(dynamicObject.element);
-        }
-        if (dynamicObject.elementRef instanceof HTMLElement) {
-            potentialRoots.push(dynamicObject.elementRef);
-        }
+        const potentialRoots = dynamicObject.getEmbeddedContentRoots();
         const legacyElementRef = dynamicObject.elmeentRef;
         if (legacyElementRef instanceof HTMLElement) {
             potentialRoots.push(legacyElementRef);
@@ -59254,8 +59728,8 @@ class KritzelSvgExportHelper {
             .join('\n  ');
         const xmlDecl = includeXmlDeclaration ? '<?xml version="1.0" encoding="UTF-8"?>\n' : '';
         const defsContent = defs.length > 0 ? `\n  <defs>\n    ${defs.join('\n    ')}\n  </defs>` : '';
-        return `${xmlDecl}<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}" width="${viewBoxWidth}" height="${viewBoxHeight}">${defsContent}
-  ${elements}
+        return `${xmlDecl}<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}" width="${viewBoxWidth}" height="${viewBoxHeight}">${defsContent}
+  ${elements}
 </svg>`;
     }
     /**
@@ -59407,8 +59881,8 @@ class KritzelSvgExportHelper {
         const orient = end === 'start' ? 'auto-start-reverse' : 'auto';
         const refX = 0;
         const refY = size / 2;
-        return `<marker id="${markerId}" markerWidth="${size}" markerHeight="${size}" refX="${refX}" refY="${refY}" orient="${orient}" markerUnits="userSpaceOnUse">
-      <path d="${path}" fill="${fill}" transform="scale(${size / 10})"/>
+        return `<marker id="${markerId}" markerWidth="${size}" markerHeight="${size}" refX="${refX}" refY="${refY}" orient="${orient}" markerUnits="userSpaceOnUse">
+      <path d="${path}" fill="${fill}" transform="scale(${size / 10})"/>
     </marker>`;
     }
     /**
@@ -59437,6 +59911,9 @@ class KritzelSvgExportHelper {
         if (KritzelClassHelper.isInstanceOf(object, 'KritzelDynamicObject')) {
             return this.dynamicObjectToSvg(object, rasterSafeForCanvas);
         }
+        if (KritzelClassHelper.isInstanceOf(object, 'KritzelIframeObject')) {
+            return this.iframeObjectToSvg(object);
+        }
         if (KritzelClassHelper.isInstanceOf(object, 'KritzelGroup')) {
             return this.groupToSvg(object, theme, imageDataUrls, rasterSafeForCanvas);
         }
@@ -59455,10 +59932,10 @@ class KritzelSvgExportHelper {
         const opacity = path.opacity !== 1 ? ` opacity="${path.opacity}"` : '';
         const scale = this.getObjectScale(path);
         // Path needs to be wrapped in a g with translation since path.d uses local coordinates
-        return `<g transform="${transform}"${opacity}>
-    <svg viewBox="${path.viewBox}" width="${path.totalWidth / scale}" height="${path.totalHeight / scale}" overflow="visible">
-      <path d="${path.d}" fill="${fill || 'none'}" stroke="${stroke || 'none'}"${path.strokeWidth ? ` stroke-width="${path.strokeWidth}"` : ''}/>
-    </svg>
+        return `<g transform="${transform}"${opacity}>
+    <svg viewBox="${path.viewBox}" width="${path.totalWidth / scale}" height="${path.totalHeight / scale}" overflow="visible">
+      <path d="${path.d}" fill="${fill || 'none'}" stroke="${stroke || 'none'}"${path.strokeWidth ? ` stroke-width="${path.strokeWidth}"` : ''}/>
+    </svg>
   </g>`;
     }
     /**
@@ -59474,10 +59951,10 @@ class KritzelSvgExportHelper {
         const scale = this.getObjectScale(line);
         const markerStart = line.hasStartArrow ? ` marker-start="url(#${line.startMarkerId})"` : '';
         const markerEnd = line.hasEndArrow ? ` marker-end="url(#${line.endMarkerId})"` : '';
-        return `<g transform="${transform}"${opacity}>
-    <svg viewBox="${line.viewBox}" width="${line.totalWidth / scale}" height="${line.totalHeight / scale}" overflow="visible">
-      <path d="${line.d}" fill="none" stroke="${stroke}" stroke-width="${line.strokeWidth}" stroke-linecap="round"${markerStart}${markerEnd}/>
-    </svg>
+        return `<g transform="${transform}"${opacity}>
+    <svg viewBox="${line.viewBox}" width="${line.totalWidth / scale}" height="${line.totalHeight / scale}" overflow="visible">
+      <path d="${line.d}" fill="none" stroke="${stroke}" stroke-width="${line.strokeWidth}" stroke-linecap="round"${markerStart}${markerEnd}/>
+    </svg>
   </g>`;
     }
     /**
@@ -59501,18 +59978,18 @@ class KritzelSvgExportHelper {
             const textHtml = this.prosemirrorToHtml(shape.content, shape, theme);
             if (textHtml) {
                 const fontColor = KritzelColorHelper.resolveThemeColor(shape.fontColor, theme);
-                textContent = `
-    <foreignObject x="${shape.x}" y="${shape.y}" width="${shape.width}" height="${shape.height}">
-      <div xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-family: ${shape.fontFamily}; font-size: ${shape.fontSize}px; color: ${fontColor}; overflow: hidden;">
-        ${textHtml}
-      </div>
+                textContent = `
+    <foreignObject x="${shape.x}" y="${shape.y}" width="${shape.width}" height="${shape.height}">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-family: ${shape.fontFamily}; font-size: ${shape.fontSize}px; color: ${fontColor}; overflow: hidden;">
+        ${textHtml}
+      </div>
     </foreignObject>`;
             }
         }
-        return `<g transform="${transform}"${opacity}>
-    <svg viewBox="${shape.viewBox}" width="${shape.totalWidth / scale}" height="${shape.totalHeight / scale}" overflow="visible" preserveAspectRatio="none">
-      <path d="${pathD}" fill="${fill || 'transparent'}" stroke="${stroke}" stroke-width="${shape.strokeWidth}"/>${textContent}
-    </svg>
+        return `<g transform="${transform}"${opacity}>
+    <svg viewBox="${shape.viewBox}" width="${shape.totalWidth / scale}" height="${shape.totalHeight / scale}" overflow="visible" preserveAspectRatio="none">
+      <path d="${pathD}" fill="${fill || 'transparent'}" stroke="${stroke}" stroke-width="${shape.strokeWidth}"/>${textContent}
+    </svg>
   </g>`;
     }
     /**
@@ -59543,10 +60020,10 @@ class KritzelSvgExportHelper {
         // adjusted font-size already accounts for it – keeping both would double-scale
         // the content and overflow the foreignObject.
         const svgFontSizePx = (text.fontSize * (4 / 3) * (text.scaleFactor || 1) / scale).toFixed(4);
-        return `<g transform="${transform}"${opacity}>
-    <foreignObject x="0" y="0" width="${width}" height="${height}" overflow="visible">
-      <div xmlns="http://www.w3.org/1999/xhtml" style="font-family: ${text.fontFamily}; font-size: ${svgFontSizePx}px; color: ${fontColor}; background-color: ${bgColor || 'transparent'}; white-space: pre-wrap; word-wrap: break-word; width: 100%; margin: 0; padding: 0; box-sizing: border-box;">${htmlContent.trim()}</div>
-    </foreignObject>
+        return `<g transform="${transform}"${opacity}>
+    <foreignObject x="0" y="0" width="${width}" height="${height}" overflow="visible">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="font-family: ${text.fontFamily}; font-size: ${svgFontSizePx}px; color: ${fontColor}; background-color: ${bgColor || 'transparent'}; white-space: pre-wrap; word-wrap: break-word; width: 100%; margin: 0; padding: 0; box-sizing: border-box;">${htmlContent.trim()}</div>
+    </foreignObject>
   </g>`;
     }
     /**
@@ -59580,9 +60057,9 @@ class KritzelSvgExportHelper {
             return `<tspan x="0" y="${y}" xml:space="preserve">${this.escapeHtml(line)}</tspan>`;
         })
             .join('');
-        return `<g transform="${transform}"${opacity}>
-    ${bgRect}
-    <text font-family="${this.escapeHtml(text.fontFamily)}" font-size="${resolvedFontSizePx}" fill="${fontColor}">${tspans}</text>
+        return `<g transform="${transform}"${opacity}>
+    ${bgRect}
+    <text font-family="${this.escapeHtml(text.fontFamily)}" font-size="${resolvedFontSizePx}" fill="${fontColor}">${tspans}</text>
   </g>`;
     }
     /**
@@ -59610,8 +60087,8 @@ class KritzelSvgExportHelper {
         const width = image.totalWidth / scale;
         const height = image.totalHeight / scale;
         const href = imageDataUrls?.get(image.id) || image.resolvedSrc || image.src || '';
-        return `<g transform="${transform}"${opacity}>
-    <image href="${href}" x="0" y="0" width="${width}" height="${height}" preserveAspectRatio="xMidYMid meet"/>
+        return `<g transform="${transform}"${opacity}>
+    <image href="${href}" x="0" y="0" width="${width}" height="${height}" preserveAspectRatio="xMidYMid meet"/>
   </g>`;
     }
     /**
@@ -59631,19 +60108,30 @@ class KritzelSvgExportHelper {
         if (rasterSafeForCanvas) {
             // PNG export: render placeholder rect (foreignObject doesn't rasterize to PNG well)
             console.warn('[KritzelDynamicObject SVG Export] Dynamic objects do not serialize well to PNG. Use SVG export or screenshot instead.');
-            return `<g transform="${transform}"${opacity}>
-      <rect x="0" y="0" width="${width}" height="${height}" fill="#f0f0f0" stroke="#999" stroke-width="1" />
-      <text x="${width / 2}" y="${height / 2}" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#999">[Dynamic Object]</text>
+            return `<g transform="${transform}"${opacity}>
+      <rect x="0" y="0" width="${width}" height="${height}" fill="#f0f0f0" stroke="#999" stroke-width="1" />
+      <text x="${width / 2}" y="${height / 2}" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#999">[Dynamic Object]</text>
     </g>`;
         }
         // SVG export: use foreignObject to embed HTML
         const html = obj.element?.outerHTML || '<div style="border:1px dashed #ccc">Empty</div>';
-        return `<g transform="${transform}"${opacity}>
-      <foreignObject x="0" y="0" width="${width}" height="${height}">
-        <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;overflow:hidden;">
-          ${html}
-        </div>
-      </foreignObject>
+        return `<g transform="${transform}"${opacity}>
+      <foreignObject x="0" y="0" width="${width}" height="${height}">
+        <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;overflow:hidden;">
+          ${html}
+        </div>
+      </foreignObject>
+    </g>`;
+    }
+    static iframeObjectToSvg(object) {
+        const transform = this.buildTransform(object);
+        const opacity = object.opacity !== 1 ? ` opacity="${object.opacity}"` : '';
+        const scale = this.getObjectScale(object);
+        const width = object.totalWidth / scale;
+        const height = object.totalHeight / scale;
+        return `<g transform="${transform}"${opacity}>
+      <rect x="0" y="0" width="${width}" height="${height}" fill="#f0f0f0" stroke="#999" stroke-width="1" />
+      <text x="${width / 2}" y="${height / 2}" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#999">[Iframe]</text>
     </g>`;
     }
     /**
@@ -59663,8 +60151,8 @@ class KritzelSvgExportHelper {
             return '';
         }
         const opacity = group.opacity !== 1 ? ` opacity="${group.opacity}"` : '';
-        return `<g${opacity}>
-    ${children}
+        return `<g${opacity}>
+    ${children}
   </g>`;
     }
     /**
@@ -59849,12 +60337,26 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     /** Authoritative workspace catalog for this engine instance. When provided, provider-only workspaces are hidden but not deleted. */
     workspaces;
     async onWorkspacesPropChange() {
-        if (!this._isYjsInitialized) {
+        this._workspacesRevision++;
+        if (!this._isYjsInitialized || this._syncInitPromise) {
             return;
         }
-        await this.reconcileProvidedWorkspaces();
-        await this.ensureActiveWorkspaceIsVisible();
-        this.workspacesChange.emit(this.getVisibleWorkspaces());
+        const previousReconciliation = this._workspacePropReconciliationPromise;
+        const reconciliationPromise = (async () => {
+            await previousReconciliation;
+            await this.reconcileProvidedWorkspaces();
+            await this.ensureActiveWorkspaceIsVisible();
+            this.workspacesChange.emit(this.getVisibleWorkspaces());
+        })();
+        this._workspacePropReconciliationPromise = reconciliationPromise;
+        try {
+            await reconciliationPromise;
+        }
+        finally {
+            if (this._workspacePropReconciliationPromise === reconciliationPromise) {
+                this._workspacePropReconciliationPromise = null;
+            }
+        }
     }
     /** Optional unique identifier for namespacing storage keys across multiple editor instances. */
     editorId;
@@ -59908,6 +60410,12 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     onUserChange(newValue) {
         this.core.setUser(newValue);
     }
+    /** Tool definitions to register with this engine instance. */
+    tools = [];
+    onToolsChange() {
+        this._toolsRevision++;
+        void this.registerConfiguredTools();
+    }
     /** Context menu items shown when right-clicking the canvas background. */
     globalContextMenuItems;
     onGlobalContextMenuItemsChange(newValue) {
@@ -60098,7 +60606,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         }
         const hoveredObject = this.core.getObjectFromPointerEvent(ev);
         if (hoveredObject &&
-            ObjectHelper.isClass(hoveredObject, 'KritzelDynamicObject') &&
+            ObjectHelper.isKritzelEmbeddedObject(hoveredObject) &&
             KritzelWheelHelper.shouldKeepWheelInDynamicObject(ev, hoveredObject)) {
             return;
         }
@@ -60200,7 +60708,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
             return false;
         }
         const object = this.core.store.objects.findById(objectElement.id);
-        if (!object || !KritzelClassHelper.isInstanceOf(object, 'KritzelDynamicObject')) {
+        if (!object || !ObjectHelper.isKritzelEmbeddedObject(object)) {
             return false;
         }
         const isSelected = !!this.core.store.selectionGroup?.objects?.some(selectedObject => selectedObject.id === object.id);
@@ -60210,13 +60718,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         if (object.isInteractive !== true) {
             return false;
         }
-        const potentialRoots = [];
-        if (object.element instanceof H) {
-            potentialRoots.push(object.element);
-        }
-        if (object.elementRef instanceof H) {
-            potentialRoots.push(object.elementRef);
-        }
+        const potentialRoots = object.getEmbeddedContentRoots();
         if (potentialRoots.length === 0) {
             return false;
         }
@@ -60390,7 +60892,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
      * Switches the active drawing tool by its registered name.
      * @param toolName - The name the tool was registered with (e.g., 'brush', 'eraser').
      */
-    async changeActiveTool(toolName) {
+    async setActiveTool(toolName) {
         const tool = this.core.toolRegistry.getTool(toolName);
         if (!tool) {
             console.warn(`[KritzelEngine] No tool registered with name: ${toolName}`);
@@ -61696,9 +62198,13 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     _stateChangeListenersRegistered = false;
     _workspaceInitializationPromise = null;
     _workspaceInitializationTargetKey = null;
+    _workspacePropReconciliationPromise = null;
     _syncInitPromise = null;
+    _toolsInitPromise = null;
+    _toolsRevision = 0;
     _syncConfigRevision = 0;
     _assetStorageConfigRevision = 0;
+    _workspacesRevision = 0;
     _hasLoggedUnlicensedWelcomeBanner = false;
     _previousVisibleDynamicObjects = new Set();
     _revealedImageKeys = new Set();
@@ -61711,6 +62217,37 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         undoStackSize: 0,
         redoStackSize: 0,
     };
+    /** Returns a tool registered in this engine instance. */
+    async getTool(toolName) {
+        await this.registerConfiguredTools();
+        return this.core.toolRegistry.getTool(toolName);
+    }
+    async registerConfiguredTools() {
+        if (this._toolsInitPromise) {
+            return this._toolsInitPromise;
+        }
+        this._toolsInitPromise = (async () => {
+            do {
+                const revision = this._toolsRevision;
+                for (const definition of this.tools) {
+                    let toolClass = definition.tool;
+                    if (typeof toolClass !== 'function') {
+                        toolClass = toolClass.constructor;
+                    }
+                    await this.registerTool(definition.name, toolClass, definition.config);
+                }
+                if (revision === this._toolsRevision) {
+                    break;
+                }
+            } while (true);
+        })();
+        try {
+            await this._toolsInitPromise;
+        }
+        finally {
+            this._toolsInitPromise = null;
+        }
+    }
     setLoadingState(isLoading) {
         if (this.core.store.state.isLoading === isLoading) {
             return;
@@ -61842,6 +62379,8 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         this.core.licenseManager.destroy();
     }
     componentWillLoad() {
+        this._toolsRevision++;
+        void this.registerConfiguredTools();
         this.core.setEditorId(this.editorId);
         if (this.themes && this.themes.length > 0) {
             this.core.themeManager.registerThemes(this.themes);
@@ -61881,7 +62420,9 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
             const editorElement = this.host.closest('kritzel-editor');
             this.core.themeManager.setTargetElement(editorElement || this.host);
             // Initialize sync config and Yjs
+            await this.registerConfiguredTools();
             await this.initializeSyncAndWorkspace();
+            await this.waitForWorkspaceAndSceneReady();
             if (this.core.store.state.isReady === false) {
                 this.core.store.state.isReady = true;
                 this.logUnlicensedWelcomeBanner();
@@ -61903,6 +62444,20 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
             this._syncInitPromise = null;
         }
     }
+    async waitForSceneRender() {
+        await new Promise(resolve => {
+            requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+        });
+    }
+    async waitForWorkspaceAndSceneReady() {
+        let observedRevision;
+        do {
+            observedRevision = this._workspacesRevision;
+            await this._workspacePropReconciliationPromise;
+            await this.waitForSceneRender();
+        } while (observedRevision !== this._workspacesRevision ||
+            this._workspacePropReconciliationPromise);
+    }
     /**
      * Initializes the asset storage layer with the latest config. Mirrors
      * the in-flight replay logic of {@link doInitializeSyncAndWorkspace} for
@@ -62285,7 +62840,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
             if (!KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup')) {
                 return 'auto';
             }
-            if (object.objects.length === 1 && KritzelClassHelper.isInstanceOf(object.objects[0], 'KritzelDynamicObject')) {
+            if (object.objects.length === 1 && ObjectHelper.isKritzelEmbeddedObject(object.objects[0])) {
                 return 'none';
             }
             return 'auto';
@@ -62293,7 +62848,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         // Track visible dynamic objects and unmount culled ones
         const currentVisibleDynamicObjects = new Set();
         visibleObjects.forEach(object => {
-            if (KritzelClassHelper.isInstanceOf(object, 'KritzelDynamicObject')) {
+            if (ObjectHelper.isKritzelEmbeddedObject(object)) {
                 currentVisibleDynamicObjects.add(object.id);
             }
         });
@@ -62301,7 +62856,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         this._previousVisibleDynamicObjects.forEach(id => {
             if (!currentVisibleDynamicObjects.has(id)) {
                 const object = this.core.store.objects.findById(id);
-                if (object && KritzelClassHelper.isInstanceOf(object, 'KritzelDynamicObject')) {
+                if (object && ObjectHelper.isKritzelEmbeddedObject(object)) {
                     object.unmount();
                 }
             }
@@ -62394,7 +62949,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
-                } }, h("kritzel-icon", { name: object.loadState === 'error' ? 'image-off' : 'image', size: Math.max(16, Math.min(object.totalWidth, object.totalHeight) * 0.3), style: {
+                } }, h("kritzel-icon", { name: object.loadState === 'error' ? 'imageOff' : 'image', size: Math.max(16, Math.min(object.totalWidth, object.totalHeight) * 0.3), style: {
                     color: KritzelColorHelper.resolveThemeColor({ light: '#9ca3af', dark: '#6b7280' }, currentTheme),
                 } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelDynamicObject') && (h("div", { ref: el => el && object.mount(el), style: {
                     position: 'absolute',
@@ -62413,7 +62968,37 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     padding: object.padding + 'px',
                     overflow: 'visible',
                     display: 'block',
-                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (h("div", { ref: el => el && object.mount(el), style: {
+                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelIframeObject') && (h("div", { style: {
+                    position: 'absolute',
+                    left: '0',
+                    top: '0',
+                    width: object.totalWidth + 'px',
+                    height: object.totalHeight + 'px',
+                    transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
+                    transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
+                    opacity: effectiveOpacityString,
+                    backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
+                    borderColor: KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme),
+                    borderWidth: object.borderWidth + 'px',
+                    borderStyle: 'solid',
+                    borderRadius: object.borderRadius !== undefined ? (typeof object.borderRadius === 'number' ? `${object.borderRadius}px` : object.borderRadius) : undefined,
+                    boxShadow: object.boxShadow,
+                    overflow: 'hidden',
+                    display: 'block',
+                    pointerEvents: object.markedForRemoval ? 'none' : 'auto',
+                } }, h("iframe", { ref: element => element && object.mount(element), title: object.title, sandbox: object.sandboxAttribute, style: {
+                    display: 'block',
+                    width: '100%',
+                    height: '100%',
+                    border: '0',
+                    borderRadius: object.borderRadius !== undefined ? (typeof object.borderRadius === 'number' ? `${object.borderRadius}px` : object.borderRadius) : undefined,
+                    pointerEvents: object.isInteractive ? 'auto' : 'none',
+                } }), h("div", { style: {
+                    position: 'absolute',
+                    inset: '0',
+                    borderRadius: object.borderRadius !== undefined ? (typeof object.borderRadius === 'number' ? `${object.borderRadius}px` : object.borderRadius) : undefined,
+                    pointerEvents: object.isInteractive ? 'none' : 'auto',
+                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (h("div", { ref: el => el && object.mount(el), style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -62771,6 +63356,9 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         "user": [{
                 "onUserChange": 0
             }],
+        "tools": [{
+                "onToolsChange": 0
+            }],
         "globalContextMenuItems": [{
                 "onGlobalContextMenuItemsChange": 0
             }],
@@ -62831,6 +63419,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         "syncConfig": [16],
         "assetStorageConfig": [16],
         "user": [16],
+        "tools": [16],
         "globalContextMenuItems": [16],
         "objectContextMenuItems": [16],
         "scaleMax": [1026, "scale-max"],
@@ -62855,7 +63444,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         "beginSceneBootstrap": [64],
         "endSceneBootstrap": [64],
         "registerTool": [64],
-        "changeActiveTool": [64],
+        "setActiveTool": [64],
         "disable": [64],
         "enable": [64],
         "delete": [64],
@@ -62931,7 +63520,8 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         "getAvailableLocales": [64],
         "getAvailableLocaleOptions": [64],
         "t": [64],
-        "getResolvedTerms": [64]
+        "getResolvedTerms": [64],
+        "getTool": [64]
     }, [[1, "wheel", "handleWheel"], [0, "pointerdown", "handlePointerDown"], [0, "pointermove", "handlePointerMove"], [0, "pointerup", "handlePointerUp"], [0, "pointercancel", "handlePointerCancel"], [1, "pointerleave", "handlePointerLeave"], [1, "longpress", "handleLongPress"], [0, "contextmenu", "handleContextMenu"], [9, "resize", "handleResize"], [8, "keydown", "handleKeyDown"], [8, "keyup", "handleKeyUp"], [8, "copy", "handleCopy"], [8, "cut", "handleCut"], [8, "paste", "handlePaste"], [4, "dblclick", "preventDoubleTapZoomOnTouchDevices"]], {
         "workspaces": [{
                 "onWorkspacesPropChange": 0
@@ -62948,6 +63538,9 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         "user": [{
                 "onUserChange": 0
             }],
+        "tools": [{
+                "onToolsChange": 0
+            }],
         "globalContextMenuItems": [{
                 "onGlobalContextMenuItemsChange": 0
             }],