@kritzel/engine 0.4.31 → 0.4.33

package/dist/stencil/{p-BU9Mv7y0.js → p-C8PnHbLt.js}

@@ -2,7 +2,7 @@ const NAMESPACE = 'stencil';
 const BUILD = /* stencil */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, state: true, updatable: true};
 
 /*
- Stencil Client Platform v4.44.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.45.1 | MIT Licensed | https://stenciljs.com
  */
 
 
@@ -835,7 +835,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       if (idxInOld >= 0) {
         elmToMove = oldCh[idxInOld];
         if (elmToMove.$tag$ !== newStartVnode.$tag$) {
-          node = createElm(oldCh && oldCh[newStartIdx], newVNode2, idxInOld);
+          node = createElm(oldCh && oldCh[newStartIdx], newVNode2, newStartIdx);
         } else {
           patch(elmToMove, newStartVnode, isInitialRender);
           oldCh[idxInOld] = void 0;
@@ -1114,6 +1114,17 @@ var postUpdateComponent = (hostRef) => {
     hostRef.$flags$ &= -517;
   }
 };
+var forceUpdate = (ref) => {
+  var _a;
+  {
+    const hostRef = getHostRef(ref);
+    const isConnected = (_a = hostRef == null ? void 0 : hostRef.$hostElement$) == null ? void 0 : _a.isConnected;
+    if (isConnected && (hostRef.$flags$ & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
+      scheduleUpdate(hostRef, false);
+    }
+    return isConnected;
+  }
+};
 var appDidLoad = (who) => {
   nextTick(() => emitEvent(win, "appload", { detail: { namespace: NAMESPACE } }));
 };
@@ -1259,21 +1270,26 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
                 }
                 return;
               }
-              const setterSetVal = () => {
+              const parsedValue = parsePropertyValue(
+                newValue,
+                memberFlags);
+              const setterSetVal = (val) => {
                 const currentValue = ref.$lazyInstance$[memberName];
                 if (!ref.$instanceValues$.get(memberName) && currentValue) {
                   ref.$instanceValues$.set(memberName, currentValue);
                 }
-                ref.$lazyInstance$[memberName] = parsePropertyValue(
-                  newValue,
-                  memberFlags);
+                ref.$lazyInstance$[memberName] = val;
                 setValue(this, memberName, ref.$lazyInstance$[memberName], cmpMeta);
               };
               if (ref.$lazyInstance$) {
-                setterSetVal();
+                setterSetVal(parsedValue);
               } else {
+                ref.$instanceValues$.set(memberName, parsedValue);
                 ref.$fetchedCbList$.push(() => {
-                  setterSetVal();
+                  const pendingValue = ref.$instanceValues$.get(memberName);
+                  if (ref.$lazyInstance$[memberName] !== pendingValue) {
+                    setterSetVal(pendingValue);
+                  }
                 });
               }
             }
@@ -1327,8 +1343,9 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
           if (isBooleanTarget) {
             newValue = newValue === null || newValue === "false" ? false : true;
           }
+          const currentValue = propMemberFlags & 4096 /* Setter */ ? hostRef.$instanceValues$.get(propName) : this[propName];
           const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
-          if (!isSpuriousBooleanRemoval && newValue != this[propName] && (!propDesc.get || !!propDesc.set)) {
+          if (!isSpuriousBooleanRemoval && newValue != currentValue && (!propDesc.get || !!propDesc.set)) {
             this[propName] = newValue;
           }
         });
@@ -1699,4 +1716,4 @@ function transformTag(tag) {
   return tag;
 }
 
-export { Host as H, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
+export { Host as H, bootstrapLazy as b, createEvent as c, forceUpdate as f, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };

package/dist/stencil/stencil.esm.js

@@ -1,9 +1,9 @@
-import { p as promiseResolve, b as bootstrapLazy } from './p-BU9Mv7y0.js';
-export { s as setNonce } from './p-BU9Mv7y0.js';
+import { p as promiseResolve, b as bootstrapLazy } from './p-C8PnHbLt.js';
+export { s as setNonce } from './p-C8PnHbLt.js';
 import { g as globalScripts } from './p-DQuL1Twl.js';
 
 /*
- Stencil Client Patch Browser v4.44.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.45.1 | MIT Licensed | https://stenciljs.com
  */
 
 var patchBrowser = () => {
@@ -17,5 +17,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["p-f0a8b7af",[[513,"kritzel-engine",{"workspaces":[16],"editorId":[1,"editor-id"],"activeWorkspaceId":[1,"active-workspace-id"],"syncConfig":[16],"assetStorageConfig":[16],"user":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"cursorTarget":[16],"lockDrawingScale":[4,"lock-drawing-scale"],"theme":[1],"licenseKey":[1,"license-key"],"themes":[16],"locale":[1],"locales":[16],"fallbackLocale":[1,"fallback-locale"],"viewportBoundaryLeft":[2,"viewport-boundary-left"],"viewportBoundaryRight":[2,"viewport-boundary-right"],"viewportBoundaryTop":[2,"viewport-boundary-top"],"viewportBoundaryBottom":[2,"viewport-boundary-bottom"],"debugInfo":[16],"isPanningEnabled":[4,"is-panning-enabled"],"isZoomingEnabled":[4,"is-zooming-enabled"],"forceUpdate":[32],"triggerSelectionChange":[64],"beginSceneBootstrap":[64],"endSceneBootstrap":[64],"registerTool":[64],"changeActiveTool":[64],"disable":[64],"enable":[64],"delete":[64],"copy":[64],"cut":[64],"paste":[64],"bringForward":[64],"sendBackward":[64],"bringToFront":[64],"sendToBack":[64],"alignObjects":[64],"group":[64],"ungroup":[64],"undo":[64],"redo":[64],"hideContextMenu":[64],"openContextMenu":[64],"getObjectById":[64],"getAllObjects":[64],"findObjects":[64],"getObjectsTotalCount":[64],"addObject":[64],"addObjects":[64],"updateObject":[64],"removeObject":[64],"removeObjects":[64],"getSelectedObjects":[64],"getDisplayableShortcuts":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"panToObject":[64],"backToContent":[64],"centerAllObjects":[64],"centerObjects":[64],"setViewport":[64],"panTo":[64],"zoomTo":[64],"zoomIn":[64],"zoomOut":[64],"getViewport":[64],"screenToWorld":[64],"worldToScreen":[64],"getObjectsInViewport":[64],"getScreenshot":[64],"exportViewportAsPng":[64],"exportViewportAsSvg":[64],"getSelectedObjectSupportedExportFormats":[64],"canExportSelectedObjectAs":[64],"exportSelectedObject":[64],"exportAsJson":[64],"importFromJson":[64],"loadObjectsFromJson":[64],"downloadAsJson":[64],"importFromFile":[64],"cancelImportFromFile":[64],"setActiveWorkspace":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64],"getIsPublic":[64],"loadSharedWorkspace":[64],"reinitSync":[64],"saveSettings":[64],"loadSettings":[64],"registerLocales":[64],"configureLocales":[64],"setLocale":[64],"getLocale":[64],"getAvailableLocales":[64],"getAvailableLocaleOptions":[64],"t":[64],"getResolvedTerms":[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}],"activeWorkspaceId":[{"onActiveWorkspaceIdChange":0}],"syncConfig":[{"onSyncConfigChange":0}],"assetStorageConfig":[{"onAssetStorageConfigChange":0}],"user":[{"onUserChange":0}],"globalContextMenuItems":[{"onGlobalContextMenuItemsChange":0}],"objectContextMenuItems":[{"onObjectContextMenuItemsChange":0}],"scaleMax":[{"validateScaleMax":0}],"scaleMin":[{"validateScaleMin":0}],"cursorTarget":[{"onCursorTargetChange":0}],"lockDrawingScale":[{"onLockDrawingScaleChange":0}],"theme":[{"onThemeChange":0}],"licenseKey":[{"onLicenseKeyChange":0}],"themes":[{"onThemesChange":0}],"locale":[{"onLocaleChange":0}],"locales":[{"onLocalesChange":0}],"fallbackLocale":[{"onFallbackLocaleChange":0}],"viewportBoundaryLeft":[{"onViewportBoundaryLeftChange":0}],"viewportBoundaryRight":[{"onViewportBoundaryRightChange":0}],"viewportBoundaryTop":[{"onViewportBoundaryTopChange":0}],"viewportBoundaryBottom":[{"onViewportBoundaryBottomChange":0}],"debugInfo":[{"onDebugInfoChange":0}]}],[513,"kritzel-awareness-cursors",{"core":[16],"showEdgeIndicators":[4,"show-edge-indicators"],"edgeIndicatorPadding":[2,"edge-indicator-padding"],"remoteCursors":[32],"objectVersion":[32]}],[513,"kritzel-cursor-trail",{"core":[16],"cursorTrailPoints":[32],"isLeftButtonDown":[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[513,"kritzel-icon",{"name":[1],"label":[1],"size":[2]}],[513,"kritzel-watermark",{"core":[16],"label":[1]}]]]], options);
+  return bootstrapLazy([["p-40097a38",[[513,"kritzel-engine",{"workspaces":[16],"editorId":[1,"editor-id"],"activeWorkspaceId":[1,"active-workspace-id"],"syncConfig":[16],"assetStorageConfig":[16],"user":[16],"tools":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"cursorTarget":[16],"lockDrawingScale":[4,"lock-drawing-scale"],"theme":[1],"licenseKey":[1,"license-key"],"themes":[16],"locale":[1],"locales":[16],"fallbackLocale":[1,"fallback-locale"],"viewportBoundaryLeft":[2,"viewport-boundary-left"],"viewportBoundaryRight":[2,"viewport-boundary-right"],"viewportBoundaryTop":[2,"viewport-boundary-top"],"viewportBoundaryBottom":[2,"viewport-boundary-bottom"],"debugInfo":[16],"isPanningEnabled":[4,"is-panning-enabled"],"isZoomingEnabled":[4,"is-zooming-enabled"],"forceUpdate":[32],"triggerSelectionChange":[64],"beginSceneBootstrap":[64],"endSceneBootstrap":[64],"registerTool":[64],"setActiveTool":[64],"disable":[64],"enable":[64],"delete":[64],"copy":[64],"cut":[64],"paste":[64],"bringForward":[64],"sendBackward":[64],"bringToFront":[64],"sendToBack":[64],"alignObjects":[64],"group":[64],"ungroup":[64],"undo":[64],"redo":[64],"hideContextMenu":[64],"openContextMenu":[64],"getObjectById":[64],"getAllObjects":[64],"findObjects":[64],"getObjectsTotalCount":[64],"addObject":[64],"addObjects":[64],"updateObject":[64],"removeObject":[64],"removeObjects":[64],"getSelectedObjects":[64],"getDisplayableShortcuts":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"panToObject":[64],"backToContent":[64],"centerAllObjects":[64],"centerObjects":[64],"setViewport":[64],"panTo":[64],"zoomTo":[64],"zoomIn":[64],"zoomOut":[64],"getViewport":[64],"screenToWorld":[64],"worldToScreen":[64],"getObjectsInViewport":[64],"getScreenshot":[64],"exportViewportAsPng":[64],"exportViewportAsSvg":[64],"getSelectedObjectSupportedExportFormats":[64],"canExportSelectedObjectAs":[64],"exportSelectedObject":[64],"exportAsJson":[64],"importFromJson":[64],"loadObjectsFromJson":[64],"downloadAsJson":[64],"importFromFile":[64],"cancelImportFromFile":[64],"setActiveWorkspace":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64],"getIsPublic":[64],"loadSharedWorkspace":[64],"reinitSync":[64],"saveSettings":[64],"loadSettings":[64],"registerLocales":[64],"configureLocales":[64],"setLocale":[64],"getLocale":[64],"getAvailableLocales":[64],"getAvailableLocaleOptions":[64],"t":[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}],"activeWorkspaceId":[{"onActiveWorkspaceIdChange":0}],"syncConfig":[{"onSyncConfigChange":0}],"assetStorageConfig":[{"onAssetStorageConfigChange":0}],"user":[{"onUserChange":0}],"tools":[{"onToolsChange":0}],"globalContextMenuItems":[{"onGlobalContextMenuItemsChange":0}],"objectContextMenuItems":[{"onObjectContextMenuItemsChange":0}],"scaleMax":[{"validateScaleMax":0}],"scaleMin":[{"validateScaleMin":0}],"cursorTarget":[{"onCursorTargetChange":0}],"lockDrawingScale":[{"onLockDrawingScaleChange":0}],"theme":[{"onThemeChange":0}],"licenseKey":[{"onLicenseKeyChange":0}],"themes":[{"onThemesChange":0}],"locale":[{"onLocaleChange":0}],"locales":[{"onLocalesChange":0}],"fallbackLocale":[{"onFallbackLocaleChange":0}],"viewportBoundaryLeft":[{"onViewportBoundaryLeftChange":0}],"viewportBoundaryRight":[{"onViewportBoundaryRightChange":0}],"viewportBoundaryTop":[{"onViewportBoundaryTopChange":0}],"viewportBoundaryBottom":[{"onViewportBoundaryBottomChange":0}],"debugInfo":[{"onDebugInfoChange":0}]}],[513,"kritzel-awareness-cursors",{"core":[16],"showEdgeIndicators":[4,"show-edge-indicators"],"edgeIndicatorPadding":[2,"edge-indicator-padding"],"remoteCursors":[32],"objectVersion":[32]}],[513,"kritzel-cursor-trail",{"core":[16],"cursorTrailPoints":[32],"isLeftButtonDown":[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[513,"kritzel-icon",{"name":[1],"label":[1],"size":[2]}],[513,"kritzel-watermark",{"core":[16],"label":[1]}]]]], options);
 });

package/dist/types/classes/core/store.class.d.ts

@@ -5,7 +5,7 @@ import { KritzelText } from '../objects/text.class';
 import { KritzelShape } from '../objects/shape.class';
 import { KritzelPath } from '../objects/path.class';
 import { KritzelLine } from '../objects/line.class';
-import { KritzelDynamicObject } from '../objects/dynamic-object.class';
+import { KritzelEmbeddedObject } from '../../interfaces/embedded-object.interface';
 import { StateChangeListener, StatePropertyKey } from '../../types/state.types';
 import { KritzelObjectMap } from '../structures/object-map.structure';
 import { KritzelBaseObject } from '../objects/base-object.class';
@@ -135,7 +135,8 @@ export declare 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 activeInteractiveDynamicObject(): KritzelDynamicObject | null;
+    get activeInteractiveEmbeddedObject(): KritzelEmbeddedObject | null;
+    get activeInteractiveDynamicObject(): KritzelEmbeddedObject | null;
     /**
      * Gets the path currently being drawn (not yet completed).
      * @returns The incomplete path object, or null if no path is being drawn

package/dist/types/classes/objects/dynamic-object.class.d.ts

@@ -1,5 +1,6 @@
 import { KritzelCore } from '../core/core.class';
 import { KritzelBaseObject } from './base-object.class';
+import { KritzelEmbeddedObject } from '../../interfaces/embedded-object.interface';
 /**
  * Configuration options for creating a KritzelDynamicObject instance.
  */
@@ -19,7 +20,7 @@ export interface KritzelDynamicObjectConfig {
  * Extends KritzelBaseObject to inherit common object functionality like positioning,
  * scaling, and lifecycle management.
  */
-export declare class KritzelDynamicObject extends KritzelBaseObject<HTMLElement> {
+export declare class KritzelDynamicObject extends KritzelBaseObject<HTMLElement> implements KritzelEmbeddedObject {
     __class__: string;
     /** The HTML element to be rendered on the canvas. */
     element: HTMLElement;
@@ -80,7 +81,7 @@ export declare class KritzelDynamicObject extends KritzelBaseObject<HTMLElement>
      * currently owns focus.
      */
     hasFocusedInputElement(): boolean;
-    private getFocusHosts;
+    getEmbeddedContentRoots(): HTMLElement[];
     /**
      * Returns true when the given host (or, via the flat tree, one of its shadow descendants)
      * currently contains a focused input-like element.
@@ -137,6 +138,7 @@ export declare class KritzelDynamicObject extends KritzelBaseObject<HTMLElement>
      * @returns A serializable object with htmlString and dimension snapshots
      */
     serialize(): any;
+    private serializeRendererData;
     /**
      * Deserializes the dynamic object from a plain object.
      * Reconstructs the element from stored HTML string with fallback to placeholder.

package/dist/types/classes/objects/iframe.class.d.ts

@@ -0,0 +1,76 @@
+import { KritzelEmbeddedObject } from '../../interfaces/embedded-object.interface';
+import { KritzelCore } from '../core/core.class';
+import { KritzelBaseObject } from './base-object.class';
+export interface KritzelIframeContent {
+    html: string;
+    css: string;
+    script: string;
+}
+export interface KritzelIframeObjectConfig extends Partial<KritzelIframeContent> {
+    content?: Partial<KritzelIframeContent>;
+    loadingContent?: Partial<KritzelIframeContent>;
+    isLoading?: boolean;
+    state?: Record<string, unknown>;
+    title?: string;
+    sandbox?: string[];
+    translateX?: number;
+    translateY?: number;
+    rotation?: number;
+    scale?: number;
+    width?: number;
+    height?: number;
+    borderRadius?: number | string;
+    boxShadow?: string;
+}
+export interface KritzelIframeObjectLifecycleContext {
+    object: KritzelIframeObject;
+    iframe: HTMLIFrameElement | null;
+    state: Record<string, unknown>;
+}
+export declare class KritzelIframeObject extends KritzelBaseObject<HTMLIFrameElement> implements KritzelEmbeddedObject {
+    __class__: string;
+    content: KritzelIframeContent;
+    loadingContent?: KritzelIframeContent;
+    isLoading: boolean;
+    state: Record<string, unknown>;
+    title: string;
+    sandbox: string[];
+    borderRadius?: number | string;
+    boxShadow?: string;
+    get html(): string;
+    set html(value: string);
+    get css(): string;
+    set css(value: string);
+    get script(): string;
+    set script(value: string);
+    private messageListener;
+    constructor(config?: KritzelIframeObjectConfig);
+    static create(core: KritzelCore, config?: KritzelIframeObjectConfig): KritzelIframeObject;
+    get sandboxAttribute(): string;
+    mount(iframe: HTMLIFrameElement): void;
+    unmount(): void;
+    setContent(content: Partial<KritzelIframeContent>): void;
+    setLoadingContent(content: Partial<KritzelIframeContent>): void;
+    setLoading(isLoading: boolean): void;
+    getActiveContent(): KritzelIframeContent;
+    setState(state: Record<string, unknown>): void;
+    setIsInteractive(isInteractive: boolean): void;
+    hasFocusedInputElement(): boolean;
+    getEmbeddedContentRoots(): HTMLElement[];
+    protected onMount(_context: KritzelIframeObjectLifecycleContext): void;
+    protected onSerialize(context: KritzelIframeObjectLifecycleContext): Record<string, unknown>;
+    protected onUnmount(context: KritzelIframeObjectLifecycleContext): Record<string, unknown> | undefined;
+    serialize(): Record<string, unknown>;
+    deserialize<T>(object: Record<string, unknown>): T;
+    copy(): KritzelIframeObject;
+    clone(): KritzelIframeObject;
+    adoptTransientStateFrom(previous: KritzelBaseObject<any>): void;
+    private createLifecycleContext;
+    private normalizeSandbox;
+    private createSourceDocument;
+    private handleMessage;
+    private dispatchPointerMessage;
+    private dispatchContextMenuMessage;
+    private refreshDocument;
+    private persistUpdate;
+}

package/dist/types/classes/registries/icon-registry.class.d.ts

@@ -4,7 +4,9 @@
  */
 export declare class KritzelIconRegistry {
     /** Internal storage for registered icons, mapping icon names to their SVG content. */
-    private static registry;
+    private static get registry();
+    private static get listeners();
+    static subscribe(listener: (name: string) => void): () => void;
     /**
      * Registers a single icon with the given name and SVG content.
      * If an icon with the same name already exists, it will be overwritten and a warning will be logged.
@@ -19,21 +21,88 @@ export declare class KritzelIconRegistry {
      * @param name - The unique identifier of the icon to retrieve.
      * @returns The SVG markup string if the icon exists, or `undefined` if not found.
      */
-    static get(name: string): string | undefined;
+    static get(name: KritzelIconName): string | undefined;
     /**
      * Registers multiple icons at once from an object mapping names to SVG content.
      * This is a convenience method for bulk registration.
      *
      * @param icons - An object where keys are icon names and values are SVG markup strings.
      */
-    static registerIcons(icons: {
-        [key: string]: string;
-    }): void;
+    static registerIcons(icons: KritzelSvgIconMap): void;
     /**
      * Checks whether an icon with the given name is registered.
      *
      * @param name - The unique identifier of the icon to check.
      * @returns `true` if the icon exists in the registry, `false` otherwise.
      */
-    static has(name: string): boolean;
+    static has(name: KritzelIconName): boolean;
 }
+export declare const defaultIcons: {
+    cursor: string;
+    pen: string;
+    arrow: string;
+    arrowUpFromDot: string;
+    arrowDownFromDot: string;
+    highlighter: string;
+    eraser: string;
+    type: string;
+    shapes: string;
+    shapeRectangle: string;
+    shapeEllipse: string;
+    shapeTriangle: string;
+    image: string;
+    imageOff: string;
+    chevronDown: string;
+    chevronUp: string;
+    chevronLeft: string;
+    chevronRight: string;
+    chevronsLeft: string;
+    copy: string;
+    paste: string;
+    cut: string;
+    delete: string;
+    bringToFront: string;
+    sendToBack: string;
+    selectAll: string;
+    download: string;
+    upload: string;
+    undo: string;
+    redo: string;
+    plus: string;
+    minus: string;
+    ellipsisVertical: string;
+    x: string;
+    check: string;
+    group: string;
+    ungroup: string;
+    moveVertical: string;
+    hand: string;
+    handGrab: string;
+    mousePointer: string;
+    pointer: string;
+    settings: string;
+    share: string;
+    palette: string;
+    command: string;
+    info: string;
+    ordering: string;
+    layoutTemplate: string;
+    align: string;
+    alignStartHorizontal: string;
+    alignCenterHorizontal: string;
+    alignEndHorizontal: string;
+    alignStartVertical: string;
+    alignCenterVertical: string;
+    alignEndVertical: string;
+    viewport: string;
+    logOut: string;
+    usersRound: string;
+    google: string;
+    facebook: string;
+    github: string;
+    braces: string;
+    heart: string;
+};
+export type KritzelDefaultIconName = keyof typeof defaultIcons;
+export type KritzelIconName = KritzelDefaultIconName | (string & NonNullable<unknown>);
+export type KritzelSvgIconMap = Partial<Record<KritzelDefaultIconName, string>> & Record<string, string>;

package/dist/types/components/kritzel-engine/kritzel-engine.d.ts

@@ -24,6 +24,7 @@ import { IKritzelUser } from '../../interfaces/user.interface';
 import { KritzelNotification } from '../../interfaces/notification.interface';
 import { KritzelContextMenuState } from '../../interfaces/context-menu-state.interface';
 import { KritzelObjectExportFormat } from '../../interfaces/object-export.interface';
+import { KritzelToolDefinition } from '../../interfaces/tool.interface';
 export declare class KritzelEngine {
     host: HTMLElement;
     private activeImportFileInput?;
@@ -53,6 +54,9 @@ export declare class KritzelEngine {
     /** The current user for awareness broadcasting (name, id, cursor position). */
     user?: IKritzelUser;
     onUserChange(newValue: IKritzelUser | undefined): void;
+    /** Tool definitions to register with this engine instance. */
+    tools: KritzelToolDefinition[];
+    onToolsChange(): void;
     /** Context menu items shown when right-clicking the canvas background. */
     globalContextMenuItems?: ContextMenuItem[];
     onGlobalContextMenuItemsChange(newValue: ContextMenuItem[] | undefined): void;
@@ -190,7 +194,7 @@ export declare class KritzelEngine {
      * Switches the active drawing tool by its registered name.
      * @param toolName - The name the tool was registered with (e.g., 'brush', 'eraser').
      */
-    changeActiveTool(toolName: string): Promise<void>;
+    setActiveTool(toolName: string): Promise<void>;
     /** Disables all user interaction with the engine (pointer, keyboard, etc.). */
     disable(): Promise<void>;
     /** Re-enables user interaction after a call to `disable()`. */
@@ -618,9 +622,13 @@ export declare class KritzelEngine {
     private _stateChangeListenersRegistered;
     private _workspaceInitializationPromise;
     private _workspaceInitializationTargetKey;
+    private _workspacePropReconciliationPromise;
     private _syncInitPromise;
+    private _toolsInitPromise;
+    private _toolsRevision;
     private _syncConfigRevision;
     private _assetStorageConfigRevision;
+    private _workspacesRevision;
     private _hasLoggedUnlicensedWelcomeBanner;
     private _previousVisibleDynamicObjects;
     private _revealedImageKeys;
@@ -628,6 +636,9 @@ export declare class KritzelEngine {
     private _sceneBootstrapTransitionEnabled;
     private _sceneBootstrapTransitionTimer;
     private readonly _defaultUndoState;
+    /** Returns a tool registered in this engine instance. */
+    getTool(toolName: string): Promise<KritzelBaseTool | null>;
+    private registerConfiguredTools;
     private setLoadingState;
     private isNetworkAvailable;
     private emitContextMenuStateChange;
@@ -649,6 +660,8 @@ export declare class KritzelEngine {
     componentWillLoad(): void;
     componentDidLoad(): Promise<void>;
     private initializeSyncAndWorkspace;
+    private waitForSceneRender;
+    private waitForWorkspaceAndSceneReady;
     /**
      * Initializes the asset storage layer with the latest config. Mirrors
      * the in-flight replay logic of {@link doInitializeSyncAndWorkspace} for

package/dist/types/components/kritzel-icon/kritzel-icon.d.ts

@@ -1,6 +1,10 @@
+import { KritzelIconName } from '../../classes/registries/icon-registry.class';
 export declare class KritzelIcon {
-    name: string;
+    name: KritzelIconName;
     label?: string;
     size: number;
+    private unsubscribe?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -10,6 +10,7 @@ import { KritzelWorkspace } from "./classes/core/workspace.class";
 import { KritzelSyncConfig } from "./interfaces/sync-config.interface";
 import { KritzelAssetStorageConfig } from "./interfaces/asset-storage-config.interface";
 import { IKritzelUser } from "./interfaces/user.interface";
+import { KritzelToolDefinition } from "./interfaces/tool.interface";
 import { ContextMenuItem } from "./interfaces/context-menu-item.interface";
 import { KritzelTheme, ThemeName } from "./interfaces/theme.interface";
 import { KritzelLocale, KritzelTermKey, KritzelTermVars, LocaleCode } from "./interfaces/localization.interface";
@@ -32,11 +33,13 @@ import { KritzelLine } from "./classes/objects/line.class";
 import { KritzelShortcut } from "./interfaces/shortcut.interface";
 import { KritzelObjectExportFormat } from "./interfaces/object-export.interface";
 import { KritzelSettingsConfig } from "./interfaces/settings.interface";
+import { KritzelIconName } from "./classes/registries/icon-registry.class";
 export { KritzelCore } from "./classes/core/core.class";
 export { KritzelWorkspace } from "./classes/core/workspace.class";
 export { KritzelSyncConfig } from "./interfaces/sync-config.interface";
 export { KritzelAssetStorageConfig } from "./interfaces/asset-storage-config.interface";
 export { IKritzelUser } from "./interfaces/user.interface";
+export { KritzelToolDefinition } from "./interfaces/tool.interface";
 export { ContextMenuItem } from "./interfaces/context-menu-item.interface";
 export { KritzelTheme, ThemeName } from "./interfaces/theme.interface";
 export { KritzelLocale, KritzelTermKey, KritzelTermVars, LocaleCode } from "./interfaces/localization.interface";
@@ -59,6 +62,7 @@ export { KritzelLine } from "./classes/objects/line.class";
 export { KritzelShortcut } from "./interfaces/shortcut.interface";
 export { KritzelObjectExportFormat } from "./interfaces/object-export.interface";
 export { KritzelSettingsConfig } from "./interfaces/settings.interface";
+export { KritzelIconName } from "./classes/registries/icon-registry.class";
 export namespace Components {
     interface KritzelAwarenessCursors {
         "core": KritzelCore;
@@ -146,11 +150,6 @@ export namespace Components {
           * @returns `true` if objects were provided and the viewport was adjusted, `false` otherwise.
          */
         "centerObjects": (objects: KritzelBaseObject[], animate?: boolean) => Promise<boolean>;
-        /**
-          * Switches the active drawing tool by its registered name.
-          * @param toolName - The name the tool was registered with (e.g., 'brush', 'eraser').
-         */
-        "changeActiveTool": (toolName: string) => Promise<void>;
         /**
           * Deselects all currently selected objects.
          */
@@ -302,6 +301,10 @@ export namespace Components {
           * Returns the currently selected objects. Returns an empty array if nothing is selected.
          */
         "getSelectedObjects": () => Promise<KritzelBaseObject<any>[]>;
+        /**
+          * Returns a tool registered in this engine instance.
+         */
+        "getTool": (toolName: string) => Promise<KritzelBaseTool | null>;
         /**
           * Returns the current viewport state including position, scale, and dimensions.
           * @returns The current viewport state.
@@ -481,6 +484,11 @@ export namespace Components {
           * @param object - The object to move. If omitted, applies to the current selection.
          */
         "sendToBack": (object?: KritzelBaseObject<any>) => Promise<void>;
+        /**
+          * Switches the active drawing tool by its registered name.
+          * @param toolName - The name the tool was registered with (e.g., 'brush', 'eraser').
+         */
+        "setActiveTool": (toolName: string) => Promise<void>;
         /**
           * Switches the active workspace in the engine by ID.
           * @param id - The unique ID of the workspace to activate
@@ -517,6 +525,11 @@ export namespace Components {
           * An array of available themes for the editor.
          */
         "themes"?: KritzelTheme[];
+        /**
+          * Tool definitions to register with this engine instance.
+          * @default []
+         */
+        "tools": KritzelToolDefinition[];
         /**
           * Manually triggers the `objectsSelectionChange` event.
          */
@@ -598,7 +611,7 @@ export namespace Components {
     }
     interface KritzelIcon {
         "label"?: string;
-        "name": string;
+        "name": KritzelIconName;
         /**
           * @default 24
          */
@@ -867,6 +880,11 @@ declare namespace LocalJSX {
           * An array of available themes for the editor.
          */
         "themes"?: KritzelTheme[];
+        /**
+          * Tool definitions to register with this engine instance.
+          * @default []
+         */
+        "tools"?: KritzelToolDefinition[];
         /**
           * The current user for awareness broadcasting (name, id, cursor position).
          */
@@ -898,7 +916,7 @@ declare namespace LocalJSX {
     }
     interface KritzelIcon {
         "label"?: string;
-        "name"?: string;
+        "name"?: KritzelIconName;
         /**
           * @default 24
          */
@@ -944,7 +962,7 @@ declare namespace LocalJSX {
         "isZoomingEnabled": boolean;
     }
     interface KritzelIconAttributes {
-        "name": string;
+        "name": KritzelIconName;
         "label": string;
         "size": number;
     }

package/dist/types/constants/version.d.ts

@@ -3,4 +3,4 @@
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-export declare const KRITZEL_VERSION = "0.4.31";
+export declare const KRITZEL_VERSION = "0.4.33";

package/dist/types/helpers/cursor.helper.d.ts

@@ -1,3 +1,4 @@
+import { KritzelIconName } from '../classes/registries/icon-registry.class';
 export declare class KritzelCursorHelper {
     private static _pointerCursor;
     /**
@@ -10,7 +11,7 @@ export declare class KritzelCursorHelper {
      * The icon is retrieved from the KritzelIconRegistry.
      */
     static getCursor(options: {
-        iconName: string;
+        iconName: KritzelIconName | 'default';
         rotation?: number;
         color?: string;
         size?: number;

package/dist/types/helpers/object.helper.d.ts

@@ -1,7 +1,9 @@
+import { KritzelEmbeddedObject } from '../interfaces/embedded-object.interface';
 export declare class ObjectHelper {
     static generateUUID(length?: number): string;
     static isEmpty(obj: any): boolean;
     static isClass<T>(object: unknown, className: string): object is T;
+    static isKritzelEmbeddedObject(object: unknown): object is KritzelEmbeddedObject;
     static isKritzelExportable(object: unknown): object is {
         getSupportedExportFormats(): string[];
         exportAs(format: string, context: unknown): Promise<string | null>;

package/dist/types/helpers/svg-export.helper.d.ts

@@ -171,6 +171,7 @@ export declare class KritzelSvgExportHelper {
      * @returns SVG element string
      */
     private static dynamicObjectToSvg;
+    private static iframeObjectToSvg;
     /**
      * Converts a KritzelGroup to SVG by recursively converting children.
      * @param group - The group object

package/dist/types/helpers/wheel.helper.d.ts

@@ -1,6 +1,6 @@
-import { KritzelDynamicObject } from '../classes/objects/dynamic-object.class';
+import { KritzelEmbeddedObject } from '../interfaces/embedded-object.interface';
 export declare class KritzelWheelHelper {
-    static shouldKeepWheelInDynamicObject(ev: WheelEvent, dynamicObject: KritzelDynamicObject): boolean;
+    static shouldKeepWheelInDynamicObject(ev: WheelEvent, dynamicObject: KritzelEmbeddedObject): boolean;
     private static getScrollableContainerFromEventPath;
     private static isScrollableElement;
     private static canElementConsumeWheel;

package/dist/types/index.d.ts

@@ -17,6 +17,7 @@ export * from './classes/objects/line.class';
 export * from './classes/objects/group.class';
 export * from './classes/objects/shape.class';
 export * from './classes/objects/dynamic-object.class';
+export * from './classes/objects/iframe.class';
 export * from './classes/objects/selection-group.class';
 export * from './classes/objects/selection-box.class';
 export * from './classes/tools/base-tool.class';
@@ -53,10 +54,12 @@ export * from './classes/registries/dynamic-object-renderer.registry';
 export * from './classes/registries/font-registry.class';
 export * from './classes/registries/icon-registry.class';
 export * from './interfaces/toolbar-item.interface';
+export * from './interfaces/tool.interface';
 export * from './interfaces/menu-item.interface';
 export * from './interfaces/object-export.interface';
 export * from './interfaces/object-change-event.interface';
 export * from './interfaces/dynamic-object-renderer.interface';
+export * from './interfaces/embedded-object.interface';
 export * from './interfaces/sync-provider.interface';
 export * from './interfaces/sync-config.interface';
 export * from './interfaces/asset.interface';

package/dist/types/interfaces/context-menu-item.interface.d.ts

@@ -1,4 +1,5 @@
 import { KritzelBaseObject } from "../classes/objects/base-object.class";
+import { KritzelIconName } from "../classes/registries/icon-registry.class";
 import { KritzelTermKey } from "./localization.interface";
 export interface ContextMenuItem {
     /**
@@ -11,7 +12,7 @@ export interface ContextMenuItem {
         x: number;
         y: number;
     }, objects: KritzelBaseObject[]) => void;
-    icon?: string;
+    icon?: KritzelIconName;
     group?: string;
     children?: ContextMenuItem[];
     isVisible?: boolean | ((menu: {

package/dist/types/interfaces/dynamic-object-renderer.interface.d.ts

@@ -29,6 +29,13 @@ export interface KritzelDynamicObjectRenderer {
      * @param changedProperties - Array of property names that changed
      */
     onUpdate?(context: KritzelDynamicObjectRenderContext, changedProperties: string[]): void;
+    /**
+     * Called when the object is serialized, including clipboard copy and workspace export.
+     * Return JSON-safe state that can recreate behavior when the object is revived.
+     * @param context - Render context with object, mounted container when available, and current data
+     * @returns Serializable renderer data to persist on the object
+     */
+    onSerialize?(context: KritzelDynamicObjectRenderContext): unknown;
     /**
      * Called when the object leaves the viewport, is deleted, or workspace is unloaded.
      * Renderer must clean up event listeners, timers, framework instances, and remove DOM.