@kritzel/editor 0.4.31 → 0.4.33

package/dist/components/{p-DZsSiMnA.js → p-BeCy6w6M.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-Dzr6X2aj.js';
+import { a as KritzelMouseButton, d as defineCustomElement$3 } from './p-CqHKGLYE.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-BZ0ReYAA.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-dUcCDLDF.js';
+import { a as KritzelIconRegistry, d as defineCustomElement$2 } from './p-B6Z_VKKH.js';
 
 /**
  * Represents a visual selection box used for multi-object selection on the canvas.
@@ -22165,7 +22165,6 @@ class Mark {
         if (!type)
             throw new RangeError(`There is no mark type ${json.type} in this schema`);
         let mark = type.create(json.attrs);
-        type.checkAttrs(mark.attrs);
         return mark;
     }
     /**
@@ -23145,11 +23144,11 @@ class Node {
     */
     check() {
         this.type.checkContent(this.content);
-        this.type.checkAttrs(this.attrs);
+        checkAttrs(this.type.attrs, this.attrs, "node", this.type.name);
         let copy = Mark.none;
         for (let i = 0; i < this.marks.length; i++) {
             let mark = this.marks[i];
-            mark.type.checkAttrs(mark.attrs);
+            checkAttrs(mark.type.attrs, mark.attrs, "mark", mark.type.name);
             copy = mark.addToSet(copy);
         }
         if (!Mark.sameSet(copy, this.marks))
@@ -23190,7 +23189,6 @@ class Node {
         }
         let content = Fragment.fromJSON(schema, json.content);
         let node = schema.nodeType(json.type).create(json.attrs, content, marks);
-        node.type.checkAttrs(node.attrs);
         return node;
     }
 }
@@ -23240,6 +23238,15 @@ function wrapMarks(marks, str) {
         str = marks[i].type.name + "(" + str + ")";
     return str;
 }
+function checkAttrs(attrs, values, type, name) {
+    for (let attr in values)
+        if (!(attr in attrs))
+            throw new RangeError(`Unsupported attribute ${attr} for ${type} of type ${name}`);
+    for (let attr in attrs) {
+        if (attrs[attr].validate)
+            attrs[attr].validate(values[attr]);
+    }
+}
 
 /**
 Instances of this class represent a match state of a node type's
@@ -23694,27 +23701,21 @@ function defaultAttrs(attrs) {
 function computeAttrs(attrs, value) {
     let built = Object.create(null);
     for (let name in attrs) {
+        let attr = attrs[name];
         let given = value && value[name];
         if (given === undefined) {
-            let attr = attrs[name];
             if (attr.hasDefault)
                 given = attr.default;
             else
                 throw new RangeError("No value supplied for attribute " + name);
         }
+        else if (attr.validate) {
+            attr.validate(given);
+        }
         built[name] = given;
     }
     return built;
 }
-function checkAttrs(attrs, values, type, name) {
-    for (let attr in values)
-        if (!(attr in attrs))
-            throw new RangeError(`Unsupported attribute ${attr} for ${type} of type ${name}`);
-    for (let attr in attrs) {
-        if (attrs[attr].validate)
-            attrs[attr].validate(values[attr]);
-    }
-}
 function initAttrs(typeName, attrs) {
     let result = Object.create(null);
     if (attrs)
@@ -23886,11 +23887,9 @@ let NodeType$1 = class NodeType {
             throw new RangeError(`Invalid content for node ${this.name}: ${content.toString().slice(0, 50)}`);
     }
     /**
-    @internal
+    @internal no longer useful, but called by old prosemirror-view versions
     */
-    checkAttrs(attrs) {
-        checkAttrs(this.attrs, attrs, "node", this.name);
-    }
+    checkAttrs(attrs) { }
     /**
     Check whether the given mark type is allowed in this node.
     */
@@ -24037,12 +24036,6 @@ class MarkType {
                 return set[i];
     }
     /**
-    @internal
-    */
-    checkAttrs(attrs) {
-        checkAttrs(this.attrs, attrs, "mark", this.name);
-    }
-    /**
     Queries whether a given mark type is
     [excluded](https://prosemirror.net/docs/ref/#model.MarkSpec.excludes) by this one.
     */
@@ -30734,7 +30727,8 @@ function nodeLen(node) {
 }
 function isIgnorable(dom, dir) {
     let desc = dom.pmViewDesc;
-    return desc && desc.size == 0 && (dir < 0 || dom.nextSibling || dom.nodeName != "BR");
+    return desc ? desc.size == 0 && (dir < 0 || dom.nextSibling || dom.nodeName != "BR")
+        : dom.nodeType == 1 && dom.contentEditable == "false";
 }
 function skipIgnoredNodes(view, dir) {
     return dir < 0 ? skipIgnoredNodesBefore(view) : skipIgnoredNodesAfter(view);
@@ -31323,12 +31317,11 @@ function addContext(slice, context) {
         if (!type || type.hasRequiredAttrs())
             break;
         try {
-            type.checkAttrs(array[i + 1]);
+            content = Fragment.from(type.create(array[i + 1], content));
         }
         catch (e) {
             break;
         }
-        content = Fragment.from(type.create(array[i + 1], content));
         openStart++;
         openEnd++;
     }
@@ -31808,7 +31801,7 @@ editHandlers.compositionstart = editHandlers.compositionupdate = view => {
     if (!view.composing) {
         view.domObserver.flush();
         let { state } = view, $pos = state.selection.$to;
-        if (state.selection instanceof TextSelection &&
+        if (state.selection instanceof TextSelection && state.selection.empty &&
             (state.storedMarks ||
                 (!$pos.textOffset && $pos.parentOffset && $pos.nodeBefore.marks.some(m => m.type.spec.inclusive === false)) ||
                 chrome && windows$1 && selectionBeforeUneditable(view))) { // Issue #1500
@@ -33445,9 +33438,7 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
     // as being an iOS enter press), just dispatch an Enter key instead.
     if (((ios && view.input.lastIOSEnter > Date.now() - 225 &&
         (!inlineChange || addedNodes.some(n => n.nodeName == "DIV" || n.nodeName == "P"))) ||
-        (!inlineChange && $from.pos < parse.doc.content.size &&
-            (!$from.sameParent($to) || !$from.parent.inlineContent) &&
-            $from.pos < $to.pos && !/\S/.test(parse.doc.textBetween($from.pos, $to.pos, "", "")))) &&
+        (!inlineChange && looksLikeEnter(parse.doc, $from.pos, $to.pos))) &&
         view.someProp("handleKeyDown", f => f(view, keyEvent(13, "Enter")))) {
         view.input.lastIOSEnter = 0;
         return;
@@ -33598,6 +33589,16 @@ function looksLikeBackspace(old, start, end, $newStart, $newEnd) {
     // The fragments after the join point must match
     return $newStart.parent.content.cut($newStart.parentOffset).eq($next.parent.content);
 }
+function looksLikeEnter(content, from, to) {
+    let newTextlines = 0, newLeaves = 0;
+    content.nodesBetween(from, to, (node, pos) => {
+        if (node.isTextblock && pos >= from && pos < to)
+            newTextlines++;
+        else if (node.isText ? /\S/.test(node.text.slice(Math.max(0, from - pos), Math.min(node.nodeSize, to - pos))) : node.isLeaf)
+            newLeaves++;
+    });
+    return newLeaves == 0 && newTextlines == 1;
+}
 function skipClosingAndOpening($pos, fromEnd, mayOpen) {
     let depth = $pos.depth, end = fromEnd ? $pos.end() : $pos.pos;
     while (depth > 0 && (fromEnd || $pos.indexAfter(depth) == $pos.node(depth).childCount)) {
@@ -38067,9 +38068,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 +40238,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 +40274,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 +40291,7 @@ class KritzelDynamicObject extends KritzelBaseObject {
         }
         return false;
     }
-    getFocusHosts() {
+    getEmbeddedContentRoots() {
         const hosts = [];
         if (this.element) {
             hosts.push(this.element);
@@ -40504,11 +40504,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 +40516,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 +40561,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 +41069,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;
@@ -45534,20 +45996,22 @@ const cleanupTransactions = (transactionCleanups, i) => {
           // We need to think about the possibility that the user transforms the
           // Y.Doc in the event.
           if (type._dEH.l.length > 0 && (type._item === null || !type._item.deleted)) {
-            events = events
-              .filter(event =>
-                event.target._item === null || !event.target._item.deleted
-              );
-            events
-              .forEach(event => {
-                event.currentTarget = type;
-                // path is relative to the current target
-                event._path = null;
-              });
-            // sort events by path length so that top-level events are fired first.
-            events
-              .sort((event1, event2) => event1.path.length - event2.path.length);
             fs.push(() => {
+              // The same event instance is shared by all parent types. Hence, we must set
+              // currentTarget right before calling the handlers (see #768).
+              events = events
+                .filter(event =>
+                  event.target._item === null || !event.target._item.deleted
+                );
+              events
+                .forEach(event => {
+                  event.currentTarget = type;
+                  // path is relative to the current target
+                  event._path = null;
+                });
+              // sort events by path length so that top-level events are fired first.
+              events
+                .sort((event1, event2) => event1.path.length - event2.path.length);
               // We don't need to check for events.length
               // because we know it has at least one element
               callEventHandlerListeners(type._dEH, events, transaction);
@@ -45561,6 +46025,7 @@ const cleanupTransactions = (transactionCleanups, i) => {
           }
         });
       });
+      // note the nested fs calls, must not modify fs at this point
       callAll(fs, []);
     } finally {
       // Replace deleted items with ItemDeleted / GC.
@@ -52971,9 +53436,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 +55545,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 +55554,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 +55567,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 +55610,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 +55661,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 +55674,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 +55721,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 +57625,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 +57639,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 +57692,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 +57753,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 +57929,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 +57954,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 +58040,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 +58086,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 +58108,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 +59555,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 +59732,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 +59885,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 +59915,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 +59936,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 +59955,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 +59982,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 +60024,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 +60061,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 +60091,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 +60112,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 +60155,8 @@ class KritzelSvgExportHelper {
             return '';
         }
         const opacity = group.opacity !== 1 ? ` opacity="${group.opacity}"` : '';
-        return `<g${opacity}>
-    ${children}
+        return `<g${opacity}>
+    ${children}
   </g>`;
     }
     /**
@@ -59849,12 +60341,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 +60414,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 +60610,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 +60712,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 +60722,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 +60896,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 +62202,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 +62221,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 +62383,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 +62424,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 +62448,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 +62844,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 +62852,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 +62860,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 +62953,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 +62972,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 +63360,9 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         "user": [{
                 "onUserChange": 0
             }],
+        "tools": [{
+                "onToolsChange": 0
+            }],
         "globalContextMenuItems": [{
                 "onGlobalContextMenuItemsChange": 0
             }],
@@ -62831,6 +63423,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 +63448,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 +63524,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 +63542,9 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         "user": [{
                 "onUserChange": 0
             }],
+        "tools": [{
+                "onToolsChange": 0
+            }],
         "globalContextMenuItems": [{
                 "onGlobalContextMenuItemsChange": 0
             }],