@kritzel/engine 0.4.31 → 0.4.32

package/dist/cjs/kritzel-awareness-cursors_5.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-BbbWU2aN.js');
-var engine_constants = require('./engine.constants-CakmdKMW.js');
+var index = require('./index-BrjM5aN2.js');
+var engine_constants = require('./engine.constants-cfbepvaI.js');
 var Y = require('yjs');
 
 function _interopNamespace(e) {
@@ -26,7 +26,7 @@ var Y__namespace = /*#__PURE__*/_interopNamespace(Y);
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
-const kritzelAwarenessCursorsCss = () => `:host{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1}.awareness-cursor{position:absolute;top:0;left:0;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,                opacity 300ms ease;will-change:transform}.awareness-cursor.stale{opacity:0}.awareness-cursor.tracking-object{transition-duration:0ms}.cursor-arrow{filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.cursor-label{position:absolute;left:16px;top:16px;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;user-select:none}.edge-indicator{position:absolute;top:-12px;left:-12px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,                opacity 300ms ease;will-change:transform;pointer-events:auto;user-select:none;cursor:pointer}.edge-indicator.stale{opacity:0}.edge-indicator.tracking-object{transition-duration:0ms}.edge-arrow{position:absolute;filter:drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));transition:opacity 300ms ease}.edge-arrow.stale{opacity:0}.edge-label{position:absolute;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;opacity:0;transform-origin:center;transition:opacity 150ms ease}.edge-indicator:hover .edge-label{opacity:1}.remote-selection-box{position:absolute;top:0;left:0;border-width:2px;border-style:solid;pointer-events:none;will-change:transform, width, height;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,                width var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,                height var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out}`;
+const kritzelAwarenessCursorsCss = () => `:host{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1}.awareness-cursor{position:absolute;top:0;left:0;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,               opacity 300ms ease;will-change:transform}.awareness-cursor.stale{opacity:0}.awareness-cursor.tracking-object{transition-duration:0ms}.cursor-arrow{filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.cursor-label{position:absolute;left:16px;top:16px;white-space:nowrap;font-family:var(--kritzel-awareness-font-family, var(--kritzel-global-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif));font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;user-select:none}.edge-indicator{position:absolute;top:-12px;left:-12px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,               opacity 300ms ease;will-change:transform;pointer-events:auto;user-select:none;cursor:pointer}.edge-indicator.stale{opacity:0}.edge-indicator.tracking-object{transition-duration:0ms}.edge-arrow{position:absolute;filter:drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));transition:opacity 300ms ease}.edge-arrow.stale{opacity:0}.edge-label{position:absolute;white-space:nowrap;font-family:var(--kritzel-awareness-font-family, var(--kritzel-global-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif));font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;opacity:0;transform-origin:center;transition:opacity 150ms ease}.edge-indicator:hover .edge-label{opacity:1}.remote-selection-box{position:absolute;top:0;left:0;border-width:2px;border-style:solid;pointer-events:none;will-change:transform, width, height;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,               width var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,               height var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out}`;
 
 const STALE_THRESHOLD_MS = 10_000;
 const REMOVE_THRESHOLD_MS = 30_000;
@@ -231,7 +231,7 @@ const KritzelAwarenessCursors = class {
     }
     render() {
         const cursors = Array.from(this.remoteCursors.values());
-        return (index.h(index.Host, { key: 'cf00004efc0c60e81bd6b2f19ecb7ca066396980' }, cursors.map(remoteCursor => {
+        return (index.h(index.Host, { key: '2021875ea3e430c04da438dc5b7a2c22f119ea67' }, cursors.map(remoteCursor => {
             if (!remoteCursor.cursor)
                 return null;
             // When a remote user is actively drawing, derive cursor position from
@@ -383,7 +383,7 @@ const KritzelCursorTrail = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '707e81b135931233131a830d6fc63e721e381287' }, this.cursorTrailPoints.length > 1 && (index.h("svg", { key: 'b262b0e3a0cf3b1887ee6acedb2f00d72e95db7e', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
+        return (index.h(index.Host, { key: '39d026a0d4c444564f146a90ea1a51181d0652b7' }, this.cursorTrailPoints.length > 1 && (index.h("svg", { key: '927e52cd0828a548ba58e0e783b1d148a40c968c', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
                 position: 'absolute',
                 left: '0',
                 top: '0',
@@ -18851,6 +18851,9 @@ class KritzelReviver {
                     case 'KritzelDynamicObject':
                         revivedObj = engine_constants.KritzelDynamicObject.create(this._core).deserialize(obj);
                         break;
+                    case 'KritzelIframeObject':
+                        revivedObj = engine_constants.KritzelIframeObject.create(this._core).deserialize(obj);
+                        break;
                     case 'KritzelSelectionGroup':
                         revivedObj = engine_constants.KritzelSelectionGroup.create(this._core).deserialize(obj);
                         break;
@@ -20675,9 +20678,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 (engine_constants.ObjectHelper.isKritzelEmbeddedObject(object) && object.hasFocusedInputElement()) {
+                return object;
+            }
+        }
+        return null;
+    }
     get activeInteractiveDynamicObject() {
-        const interactiveDynamicObject = this.selectedObjects.find(object => engine_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelDynamicObject') && object.hasFocusedInputElement());
-        return interactiveDynamicObject ?? null;
+        return this.activeInteractiveEmbeddedObject;
     }
     /**
      * Gets the path currently being drawn (not yet completed).
@@ -21265,11 +21275,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', engine_constants.KritzelCursorHelper.getCursor({ iconName: 'default' }));
             this._targetElement.style.setProperty('--kritzel-global-pointer-cursor', engine_constants.KritzelCursorHelper.getPointerCursor());
         }
     }
@@ -21314,8 +21326,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) {
@@ -21325,19 +21339,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
@@ -21372,7 +21386,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;
@@ -22297,7 +22312,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);
@@ -22311,15 +22326,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 (engine_constants.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);
             }
@@ -22358,16 +22379,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 engine_constants.KritzelSelectionGroup) && !(o instanceof engine_constants.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 && engine_constants.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) {
@@ -22405,7 +22440,7 @@ class KritzelCore {
      * object set stays exactly what the caller declared.
      */
     detachObject(object) {
-        if (engine_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelDynamicObject')) {
+        if (engine_constants.ObjectHelper.isKritzelEmbeddedObject(object)) {
             object.unmount();
         }
         object.isMounted = false;
@@ -22581,13 +22616,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;
@@ -22606,7 +22641,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();
@@ -22692,8 +22727,7 @@ class KritzelCore {
                 this.removeObject(child);
             });
         }
-        // Unmount dynamic objects before removal
-        if (engine_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelDynamicObject')) {
+        if (engine_constants.ObjectHelper.isKritzelEmbeddedObject(object)) {
             object.unmount();
         }
         // Handle anchor cleanup
@@ -22739,14 +22773,8 @@ class KritzelCore {
         this.removeLocalSelectionGroups();
         this.removeSelectionBox();
         for (const object of selectionGroup.objects ?? []) {
-            if (engine_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelDynamicObject')) {
-                const dynamicObject = object;
-                if (typeof dynamicObject.setIsInteractive === 'function') {
-                    dynamicObject.setIsInteractive(true);
-                }
-                else {
-                    dynamicObject.isInteractive = true;
-                }
+            if (engine_constants.ObjectHelper.isKritzelEmbeddedObject(object)) {
+                object.setIsInteractive(true);
             }
         }
         this._store.objects.insert(selectionGroup);
@@ -22767,14 +22795,8 @@ class KritzelCore {
     teardownSelectionGroup(selectionGroup) {
         selectionGroup.deselectAllChildren?.();
         for (const object of selectionGroup.objects ?? []) {
-            if (engine_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelDynamicObject')) {
-                const dynamicObject = object;
-                if (typeof dynamicObject.setIsInteractive === 'function') {
-                    dynamicObject.setIsInteractive(false);
-                }
-                else {
-                    dynamicObject.isInteractive = false;
-                }
+            if (engine_constants.ObjectHelper.isKritzelEmbeddedObject(object)) {
+                object.setIsInteractive(false);
             }
         }
     }
@@ -24220,13 +24242,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);
@@ -24384,8 +24400,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>`;
     }
     /**
@@ -24537,8 +24553,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>`;
     }
     /**
@@ -24567,6 +24583,9 @@ class KritzelSvgExportHelper {
         if (engine_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelDynamicObject')) {
             return this.dynamicObjectToSvg(object, rasterSafeForCanvas);
         }
+        if (engine_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelIframeObject')) {
+            return this.iframeObjectToSvg(object);
+        }
         if (engine_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelGroup')) {
             return this.groupToSvg(object, theme, imageDataUrls, rasterSafeForCanvas);
         }
@@ -24585,10 +24604,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>`;
     }
     /**
@@ -24604,10 +24623,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>`;
     }
     /**
@@ -24631,18 +24650,18 @@ class KritzelSvgExportHelper {
             const textHtml = this.prosemirrorToHtml(shape.content, shape, theme);
             if (textHtml) {
                 const fontColor = engine_constants.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>`;
     }
     /**
@@ -24673,10 +24692,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>`;
     }
     /**
@@ -24710,9 +24729,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>`;
     }
     /**
@@ -24740,8 +24759,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>`;
     }
     /**
@@ -24761,19 +24780,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>`;
     }
     /**
@@ -24793,8 +24823,8 @@ class KritzelSvgExportHelper {
             return '';
         }
         const opacity = group.opacity !== 1 ? ` opacity="${group.opacity}"` : '';
-        return `<g${opacity}>
-    ${children}
+        return `<g${opacity}>
+    ${children}
   </g>`;
     }
     /**
@@ -24979,12 +25009,26 @@ const KritzelEngine = class {
     /** 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;
@@ -25038,6 +25082,12 @@ const KritzelEngine = class {
     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) {
@@ -25228,7 +25278,7 @@ const KritzelEngine = class {
         }
         const hoveredObject = this.core.getObjectFromPointerEvent(ev);
         if (hoveredObject &&
-            engine_constants.ObjectHelper.isClass(hoveredObject, 'KritzelDynamicObject') &&
+            engine_constants.ObjectHelper.isKritzelEmbeddedObject(hoveredObject) &&
             KritzelWheelHelper.shouldKeepWheelInDynamicObject(ev, hoveredObject)) {
             return;
         }
@@ -25330,7 +25380,7 @@ const KritzelEngine = class {
             return false;
         }
         const object = this.core.store.objects.findById(objectElement.id);
-        if (!object || !engine_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelDynamicObject')) {
+        if (!object || !engine_constants.ObjectHelper.isKritzelEmbeddedObject(object)) {
             return false;
         }
         const isSelected = !!this.core.store.selectionGroup?.objects?.some(selectedObject => selectedObject.id === object.id);
@@ -25340,13 +25390,7 @@ const KritzelEngine = class {
         if (object.isInteractive !== true) {
             return false;
         }
-        const potentialRoots = [];
-        if (object.element instanceof HTMLElement) {
-            potentialRoots.push(object.element);
-        }
-        if (object.elementRef instanceof HTMLElement) {
-            potentialRoots.push(object.elementRef);
-        }
+        const potentialRoots = object.getEmbeddedContentRoots();
         if (potentialRoots.length === 0) {
             return false;
         }
@@ -25520,7 +25564,7 @@ const KritzelEngine = class {
      * 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}`);
@@ -26826,9 +26870,13 @@ const KritzelEngine = class {
     _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();
@@ -26841,6 +26889,37 @@ const KritzelEngine = class {
         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;
@@ -26968,6 +27047,8 @@ const KritzelEngine = class {
         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);
@@ -27007,7 +27088,9 @@ const KritzelEngine = class {
             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();
@@ -27029,6 +27112,20 @@ const KritzelEngine = class {
             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
@@ -27411,7 +27508,7 @@ const KritzelEngine = class {
             if (!engine_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup')) {
                 return 'auto';
             }
-            if (object.objects.length === 1 && engine_constants.KritzelClassHelper.isInstanceOf(object.objects[0], 'KritzelDynamicObject')) {
+            if (object.objects.length === 1 && engine_constants.ObjectHelper.isKritzelEmbeddedObject(object.objects[0])) {
                 return 'none';
             }
             return 'auto';
@@ -27419,7 +27516,7 @@ const KritzelEngine = class {
         // Track visible dynamic objects and unmount culled ones
         const currentVisibleDynamicObjects = new Set();
         visibleObjects.forEach(object => {
-            if (engine_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelDynamicObject')) {
+            if (engine_constants.ObjectHelper.isKritzelEmbeddedObject(object)) {
                 currentVisibleDynamicObjects.add(object.id);
             }
         });
@@ -27427,7 +27524,7 @@ const KritzelEngine = class {
         this._previousVisibleDynamicObjects.forEach(id => {
             if (!currentVisibleDynamicObjects.has(id)) {
                 const object = this.core.store.objects.findById(id);
-                if (object && engine_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelDynamicObject')) {
+                if (object && engine_constants.ObjectHelper.isKritzelEmbeddedObject(object)) {
                     object.unmount();
                 }
             }
@@ -27520,7 +27617,7 @@ const KritzelEngine = class {
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
-                } }, index.h("kritzel-icon", { name: object.loadState === 'error' ? 'image-off' : 'image', size: Math.max(16, Math.min(object.totalWidth, object.totalHeight) * 0.3), style: {
+                } }, index.h("kritzel-icon", { name: object.loadState === 'error' ? 'imageOff' : 'image', size: Math.max(16, Math.min(object.totalWidth, object.totalHeight) * 0.3), style: {
                     color: engine_constants.KritzelColorHelper.resolveThemeColor({ light: '#9ca3af', dark: '#6b7280' }, currentTheme),
                 } }))), engine_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelDynamicObject') && (index.h("div", { ref: el => el && object.mount(el), style: {
                     position: 'absolute',
@@ -27539,7 +27636,37 @@ const KritzelEngine = class {
                     padding: object.padding + 'px',
                     overflow: 'visible',
                     display: 'block',
-                } })), engine_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (index.h("div", { ref: el => el && object.mount(el), style: {
+                } })), engine_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelIframeObject') && (index.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: engine_constants.KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
+                    borderColor: engine_constants.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',
+                } }, index.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',
+                } }), index.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',
+                } }))), engine_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (index.h("div", { ref: el => el && object.mount(el), style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -27897,6 +28024,9 @@ const KritzelEngine = class {
         "user": [{
                 "onUserChange": 0
             }],
+        "tools": [{
+                "onToolsChange": 0
+            }],
         "globalContextMenuItems": [{
                 "onGlobalContextMenuItemsChange": 0
             }],
@@ -27961,6 +28091,20 @@ const KritzelIcon = class {
     name;
     label;
     size = 24;
+    unsubscribe;
+    connectedCallback() {
+        this.unsubscribe?.();
+        this.unsubscribe = engine_constants.KritzelIconRegistry.subscribe(name => {
+            if (name === this.name) {
+                index.forceUpdate(this);
+            }
+        });
+        index.forceUpdate(this);
+    }
+    disconnectedCallback() {
+        this.unsubscribe?.();
+        this.unsubscribe = undefined;
+    }
     render() {
         const svgContent = engine_constants.KritzelIconRegistry.get(this.name);
         if (!svgContent) {
@@ -27976,7 +28120,7 @@ const KritzelIcon = class {
 };
 KritzelIcon.style = kritzelIconCss();
 
-const kritzelWatermarkCss = () => `:host{position:absolute;bottom:var(--kritzel-watermark-offset-bottom, 12px);right:var(--kritzel-watermark-offset-right, 12px);z-index:10000;pointer-events:none}.watermark-link{pointer-events:auto;display:inline-flex;align-items:center;padding:4px 8px;border-radius:var(--kritzel-watermark-border-radius, 6px);font-family:var(--kritzel-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);font-size:var(--kritzel-watermark-font-size, 11px);line-height:1;text-decoration:none;color:var(--kritzel-watermark-color, rgba(60, 60, 60, 0.75));background-color:var(--kritzel-watermark-background, rgba(255, 255, 255, 0.6));box-shadow:var(--kritzel-watermark-box-shadow, 0 1px 2px rgba(0, 0, 0, 0.12));opacity:var(--kritzel-watermark-opacity, 0.85);transition:opacity 150ms ease;user-select:none}.watermark-link:hover{opacity:1}`;
+const kritzelWatermarkCss = () => `:host{position:absolute;bottom:var(--kritzel-watermark-offset-bottom, 12px);right:var(--kritzel-watermark-offset-right, 12px);z-index:10000;pointer-events:none}.watermark-link{pointer-events:auto;display:inline-flex;align-items:center;padding:4px 8px;border-radius:var(--kritzel-watermark-border-radius, 6px);font-family:var(--kritzel-global-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);font-size:var(--kritzel-watermark-font-size, 11px);line-height:1;text-decoration:none;color:var(--kritzel-watermark-color, rgba(60, 60, 60, 0.75));background-color:var(--kritzel-watermark-background, rgba(255, 255, 255, 0.6));box-shadow:var(--kritzel-watermark-box-shadow, 0 1px 2px rgba(0, 0, 0, 0.12));opacity:var(--kritzel-watermark-opacity, 0.85);transition:opacity 150ms ease;user-select:none}.watermark-link:hover{opacity:1}`;
 
 const KritzelWatermark = class {
     constructor(hostRef) {
@@ -27992,7 +28136,7 @@ const KritzelWatermark = class {
     label;
     render() {
         const label = this.label ?? this.core.localizationManager.translate('watermark.poweredBy');
-        return (index.h(index.Host, { key: '2bacbc19d9469c7fcaf5d6b1b3133ec14d3ff864' }, index.h("a", { key: '2de44e340afd092ed388b7575350af1ee9155d58', class: "watermark-link", href: engine_constants.KRITZEL_WEBSITE_URL, target: "_blank", rel: "noopener noreferrer", part: "watermark", onPointerDown: (ev) => ev.stopPropagation(), onPointerUp: (ev) => ev.stopPropagation() }, label)));
+        return (index.h(index.Host, { key: '5bc76650ecd1f82f5ed283d4433b0e5fc8937cab' }, index.h("a", { key: 'b0828f36df618e461794772d2e8f55c0a8cb357e', class: "watermark-link", href: engine_constants.KRITZEL_WEBSITE_URL, target: "_blank", rel: "noopener noreferrer", part: "watermark", onPointerDown: (ev) => ev.stopPropagation(), onPointerUp: (ev) => ev.stopPropagation() }, label)));
     }
 };
 KritzelWatermark.style = kritzelWatermarkCss();