@kritzel/engine 0.4.31 → 0.4.32

package/dist/components/kritzel-engine.js

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-CfSx6HU_.js';
-import { a as KritzelMouseButton, d as defineCustomElement$4 } from './p-YP8wAcF4.js';
-import { K as KritzelBaseObject, h as KritzelMathHelper, c as KritzelColorHelper, i as KritzelGeometryHelper, D as DEFAULT_COLOR_PALETTE, a as KritzelPath, b as KritzelLine, O as ObjectHelper, d as KritzelThemeManager, g as defineCustomElement$5 } from './p-BvRGQvVI.js';
-import { A as ABSOLUTE_SCALE_MAX, a as ABSOLUTE_SCALE_MIN, d as defineCustomElement$2 } from './p-B2Htv9ou.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-CJ5B8cMK.js';
+import { a as KritzelMouseButton, d as defineCustomElement$4 } from './p-9YjkpHyU.js';
+import { K as KritzelBaseObject, h as KritzelMathHelper, c as KritzelColorHelper, i as KritzelGeometryHelper, D as DEFAULT_COLOR_PALETTE, a as KritzelPath, b as KritzelLine, O as ObjectHelper, d as KritzelThemeManager, g as defineCustomElement$5 } from './p-DXnF4FeS.js';
+import { A as ABSOLUTE_SCALE_MAX, a as ABSOLUTE_SCALE_MIN, d as defineCustomElement$2 } from './p-Bnuu1qip.js';
 import * as Y from 'yjs';
-import { K as KritzelIconRegistry, d as defineCustomElement$3 } from './p-fx6msYHJ.js';
+import { K as KritzelIconRegistry, a as defineCustomElement$3 } from './p-BIUT0gBe.js';
 
 class KritzelDevicesHelper {
     static isTouchDevice() {
@@ -17181,7 +17181,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;
@@ -17217,7 +17217,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
@@ -17234,7 +17234,7 @@ class KritzelDynamicObject extends KritzelBaseObject {
         }
         return false;
     }
-    getFocusHosts() {
+    getEmbeddedContentRoots() {
         const hosts = [];
         if (this.element) {
             hosts.push(this.element);
@@ -17447,11 +17447,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
@@ -17459,6 +17459,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.
@@ -17491,6 +17504,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();
+        }
+    }
+}
+
 /**
  * Represents a selection group that manages multiple selected objects on the canvas.
  * The selection group allows batch operations like move, resize, and rotate on multiple objects simultaneously.
@@ -19631,7 +20090,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.`);
@@ -19640,7 +20099,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
@@ -19653,12 +20112,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
@@ -21874,9 +22333,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;
                     }
@@ -43322,6 +43780,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;
@@ -45146,9 +45607,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).
@@ -45736,11 +46204,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());
         }
     }
@@ -45785,8 +46255,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) {
@@ -45796,19 +46268,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
@@ -45843,7 +46315,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;
@@ -46768,7 +47241,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);
@@ -46782,15 +47255,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);
             }
@@ -46829,16 +47308,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) {
@@ -46876,7 +47369,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;
@@ -47052,13 +47545,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;
@@ -47077,7 +47570,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();
@@ -47163,8 +47656,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
@@ -47210,14 +47702,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);
@@ -47238,14 +47724,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);
             }
         }
     }
@@ -48691,13 +49171,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);
@@ -48855,8 +49329,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>`;
     }
     /**
@@ -49008,8 +49482,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>`;
     }
     /**
@@ -49038,6 +49512,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);
         }
@@ -49056,10 +49533,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>`;
     }
     /**
@@ -49075,10 +49552,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>`;
     }
     /**
@@ -49102,18 +49579,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>`;
     }
     /**
@@ -49144,10 +49621,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>`;
     }
     /**
@@ -49181,9 +49658,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>`;
     }
     /**
@@ -49211,8 +49688,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>`;
     }
     /**
@@ -49232,19 +49709,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>`;
     }
     /**
@@ -49264,8 +49752,8 @@ class KritzelSvgExportHelper {
             return '';
         }
         const opacity = group.opacity !== 1 ? ` opacity="${group.opacity}"` : '';
-        return `<g${opacity}>
-    ${children}
+        return `<g${opacity}>
+    ${children}
   </g>`;
     }
     /**
@@ -49450,12 +49938,26 @@ const KritzelEngine$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEngine ext
     /** 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;
@@ -49509,6 +50011,12 @@ const KritzelEngine$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEngine ext
     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) {
@@ -49699,7 +50207,7 @@ const KritzelEngine$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEngine ext
         }
         const hoveredObject = this.core.getObjectFromPointerEvent(ev);
         if (hoveredObject &&
-            ObjectHelper.isClass(hoveredObject, 'KritzelDynamicObject') &&
+            ObjectHelper.isKritzelEmbeddedObject(hoveredObject) &&
             KritzelWheelHelper.shouldKeepWheelInDynamicObject(ev, hoveredObject)) {
             return;
         }
@@ -49801,7 +50309,7 @@ const KritzelEngine$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEngine ext
             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);
@@ -49811,13 +50319,7 @@ const KritzelEngine$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEngine ext
         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;
         }
@@ -49991,7 +50493,7 @@ const KritzelEngine$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEngine ext
      * 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}`);
@@ -51297,9 +51799,13 @@ const KritzelEngine$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEngine ext
     _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();
@@ -51312,6 +51818,37 @@ const KritzelEngine$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEngine ext
         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;
@@ -51443,6 +51980,8 @@ const KritzelEngine$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEngine ext
         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);
@@ -51482,7 +52021,9 @@ const KritzelEngine$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEngine ext
             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();
@@ -51504,6 +52045,20 @@ const KritzelEngine$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEngine ext
             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
@@ -51886,7 +52441,7 @@ const KritzelEngine$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEngine ext
             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';
@@ -51894,7 +52449,7 @@ const KritzelEngine$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEngine ext
         // 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);
             }
         });
@@ -51902,7 +52457,7 @@ const KritzelEngine$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEngine ext
         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();
                 }
             }
@@ -51995,7 +52550,7 @@ const KritzelEngine$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEngine ext
                     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',
@@ -52014,7 +52569,37 @@ const KritzelEngine$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEngine ext
                     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',
@@ -52372,6 +52957,9 @@ const KritzelEngine$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEngine ext
         "user": [{
                 "onUserChange": 0
             }],
+        "tools": [{
+                "onToolsChange": 0
+            }],
         "globalContextMenuItems": [{
                 "onGlobalContextMenuItemsChange": 0
             }],
@@ -52432,6 +53020,7 @@ const KritzelEngine$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEngine ext
         "syncConfig": [16],
         "assetStorageConfig": [16],
         "user": [16],
+        "tools": [16],
         "globalContextMenuItems": [16],
         "objectContextMenuItems": [16],
         "scaleMax": [1026, "scale-max"],
@@ -52456,7 +53045,7 @@ const KritzelEngine$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEngine ext
         "beginSceneBootstrap": [64],
         "endSceneBootstrap": [64],
         "registerTool": [64],
-        "changeActiveTool": [64],
+        "setActiveTool": [64],
         "disable": [64],
         "enable": [64],
         "delete": [64],
@@ -52532,7 +53121,8 @@ const KritzelEngine$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEngine ext
         "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
@@ -52549,6 +53139,9 @@ const KritzelEngine$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEngine ext
         "user": [{
                 "onUserChange": 0
             }],
+        "tools": [{
+                "onToolsChange": 0
+            }],
         "globalContextMenuItems": [{
                 "onGlobalContextMenuItemsChange": 0
             }],
@@ -52638,4 +53231,4 @@ function defineCustomElement$1() {
 const KritzelEngine = KritzelEngine$1;
 const defineCustomElement = defineCustomElement$1;
 
-export { AssetNotFoundError as A, KritzelFontRegistry as B, DEFAULT_SYNC_CONFIG as C, DEFAULT_STROKE_SIZES as D, EN_LOCALE as E, DE_LOCALE as F, FR_LOCALE as G, KritzelAlignment as H, IndexedDBAssetProvider as I, runMigrations as J, KritzelText as K, KritzelEngine, APP_STATE_MIGRATIONS as L, WORKSPACE_MIGRATIONS as M, CURRENT_APP_STATE_SCHEMA_VERSION as N, CURRENT_WORKSPACE_SCHEMA_VERSION as O, resolveTextToolAvailableFonts as P, ShapeType as S, WORKSPACE_EXPORT_VERSION as W, DEFAULT_FONT_SIZES as a, DEFAULT_TEXT_TOOL_AVAILABLE_FONTS as b, KritzelImage as c, KritzelGroup as d, defineCustomElement, KritzelShape as e, KritzelDynamicObject as f, KritzelSelectionGroup as g, KritzelSelectionBox 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, KritzelKeyboardHelper as q, KritzelDevicesHelper as r, KritzelHTMLHelper as s, KritzelSelectionTool as t, KritzelAssetResolver as u, KritzelWorkspace as v, KritzelAnchorManager as w, KritzelLocalizationManager as x, KritzelLicenseManager as y, KritzelDynamicObjectRendererRegistry as z };
+export { AssetNotFoundError as A, KritzelDynamicObjectRendererRegistry as B, KritzelFontRegistry as C, DEFAULT_STROKE_SIZES as D, DEFAULT_SYNC_CONFIG as E, EN_LOCALE as F, DE_LOCALE as G, FR_LOCALE as H, IndexedDBAssetProvider as I, KritzelAlignment as J, KritzelText as K, KritzelEngine, runMigrations as L, APP_STATE_MIGRATIONS as M, WORKSPACE_MIGRATIONS as N, CURRENT_APP_STATE_SCHEMA_VERSION as O, CURRENT_WORKSPACE_SCHEMA_VERSION as P, resolveTextToolAvailableFonts as Q, ShapeType as S, WORKSPACE_EXPORT_VERSION as W, DEFAULT_FONT_SIZES as a, DEFAULT_TEXT_TOOL_AVAILABLE_FONTS as b, KritzelImage as c, KritzelGroup as d, defineCustomElement, KritzelShape as e, KritzelDynamicObject as f, KritzelIframeObject as g, KritzelSelectionGroup as h, KritzelSelectionBox as i, KritzelBaseTool as j, KritzelBrushTool as k, KritzelLineTool as l, KritzelEraserTool as m, KritzelImageTool as n, KritzelTextTool as o, KritzelShapeTool as p, KritzelCursorHelper as q, KritzelKeyboardHelper as r, KritzelDevicesHelper as s, KritzelHTMLHelper as t, KritzelSelectionTool as u, KritzelAssetResolver as v, KritzelWorkspace as w, KritzelAnchorManager as x, KritzelLocalizationManager as y, KritzelLicenseManager as z };