npm - kritzel-stencil - Versions diffs - 0.0.114 → 0.0.116 - Mend

kritzel-stencil 0.0.114 → 0.0.116

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (106) hide show

package/dist/esm/kritzel-brush-style_18.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CGHvfMWF.js';
-import { K as KritzelBaseObject, a as KritzelBaseTool, b as KritzelEventHelper, A as AddObjectCommand, c as KritzelTextTool, d as KritzelMouseButton, e as KritzelBaseCommand, f as KritzelText, O as ObjectHelper, g as KritzelToolRegistry, h as KritzelKeyboardHelper } from './index-rckCSz7Y.js';
+import { K as KritzelBaseTool, a as KritzelEventHelper, b as KritzelPath, A as AddObjectCommand, c as KritzelTextTool, d as KritzelMouseButton, e as KritzelBaseCommand, f as KritzelBaseObject, g as KritzelImage, h as KritzelText, O as ObjectHelper, i as KritzelToolRegistry, j as KritzelKeyboardHelper } from './index-Dn7aP72S.js';
 const kritzelBrushStyleCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box;width:100%}.brush-style-button{display:flex;justify-content:center;align-items:center;width:42px;height:32px;padding:0;border:none;outline:none;background:none;cursor:default;border-radius:0;color:var(--control-text-color);font-weight:bold;-webkit-tap-highlight-color:transparent}.font-style-button:not(:last-child){border-right:1px solid #333333}.font-style-button:hover{background-color:var(--control-hover-bg)}.font-style-button:active{background-color:var(--control-active-bg)}.font-style-button.selected,.font-style-button.selected:hover,.font-style-button.selected:active{background-color:var(--control-selected-bg);color:var(--control-selected-color)}";
@@ -120,7 +120,7 @@ const KritzelColorPalette = class {
 };
 KritzelColorPalette.style = kritzelColorPaletteCss;
-const kritzelContextMenuCss = ":host{display:block}.menu-container{display:flex;flex-direction:column;background-color:var(--kritzel-context-menu-background-color, #ffffff);border-radius:var(--kritzel-context-menu-border-radius, 8px);box-shadow:var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));border:var(--kritzel-context-menu-border, 1px solid hsl(0, 0%, 0%, 4.3%));padding:var(--kritzel-context-menu-padding,4px)}.menu-item{display:flex;align-items:center;gap:var(--kritzel-context-menu-item-gap, 8px);background:none;border:none;text-align:left;padding:var(--kritzel-context-menu-item-padding, 8px);border-radius:var(--kritzel-context-menu-item-border-radius, 8px);cursor:pointer;font-size:var(--kritzel-context-menu-item-font-size, 14px);color:var(--kritzel-context-menu-item-color, #333333);white-space:nowrap;-webkit-tap-highlight-color:transparent}.menu-item:not(.disabled):hover{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item:not(.disabled):active{background-color:var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%))}.menu-item.disabled{color:var(--kritzel-context-menu-item-disabled-color, #aaaaaa);cursor:default}.menu-item kritzel-icon{opacity:0.8;flex-shrink:0}.menu-item.disabled kritzel-icon{opacity:0.4}.label{flex-grow:1}";
+const kritzelContextMenuCss = ":host{display:block}.menu-container{display:flex;flex-direction:column;background-color:var(--kritzel-context-menu-background-color, #ffffff);border-radius:var(--kritzel-context-menu-border-radius, 12px);box-shadow:var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));border:var(--kritzel-context-menu-border, 1px solid #f0f0f0);padding:var(--kritzel-context-menu-padding,4px)}.menu-item{display:flex;align-items:center;gap:var(--kritzel-context-menu-item-gap, 8px);background:none;border:none;text-align:left;padding:var(--kritzel-context-menu-item-padding, 8px);border-radius:var(--kritzel-context-menu-item-border-radius, 12px);cursor:pointer;font-size:var(--kritzel-context-menu-item-font-size, 14px);color:var(--kritzel-context-menu-item-color, #333333);white-space:nowrap;-webkit-tap-highlight-color:transparent}.menu-item:not(.disabled):hover{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item:not(.disabled):active{background-color:var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%))}.menu-item.disabled{color:var(--kritzel-context-menu-item-disabled-color, #aaaaaa);cursor:default}.menu-item kritzel-icon{opacity:0.8;flex-shrink:0}.menu-item.disabled kritzel-icon{opacity:0.4}.label{flex-grow:1}";
 const KritzelContextMenu = class {
     constructor(hostRef) {
@@ -224,145 +224,6 @@ const KritzelControlTextConfig = class {
 };
 KritzelControlTextConfig.style = kritzelControlTextConfigCss;
-var cjs = {};
-var hasRequiredCjs;
-function requireCjs () {
-	if (hasRequiredCjs) return cjs;
-	hasRequiredCjs = 1;
-	(function (exports) {
-		var pe=Object.defineProperty;var ge=e=>pe(e,"__esModule",{value:true});var de=(e,t)=>{ge(e);for(var s in t)pe(e,s,{get:t[s],enumerable:true});};de(exports,{default:()=>ve,getStroke:()=>ne,getStrokeOutlinePoints:()=>te,getStrokePoints:()=>re});function $(e,t,s,x=h=>h){return e*x(.5-t*(.5-s))}function ce(e){return [-e[0],-e[1]]}function l(e,t){return [e[0]+t[0],e[1]+t[1]]}function a(e,t){return [e[0]-t[0],e[1]-t[1]]}function b(e,t){return [e[0]*t,e[1]*t]}function xe(e,t){return [e[0]/t,e[1]/t]}function R(e){return [e[1],-e[0]]}function B(e,t){return e[0]*t[0]+e[1]*t[1]}function me(e,t){return e[0]===t[0]&&e[1]===t[1]}function Se(e){return Math.hypot(e[0],e[1])}function Pe(e){return e[0]*e[0]+e[1]*e[1]}function A(e,t){return Pe(a(e,t))}function G(e){return xe(e,Se(e))}function ae(e,t){return Math.hypot(e[1]-t[1],e[0]-t[0])}function L(e,t,s){let x=Math.sin(s),h=Math.cos(s),y=e[0]-t[0],n=e[1]-t[1],f=y*h-n*x,d=y*x+n*h;return [f+t[0],d+t[1]]}function K(e,t,s){return l(e,b(a(t,e),s))}function ee(e,t,s){return l(e,b(t,s))}var{min:C,PI:ke}=Math,le=.275,V=ke+1e-4;function te(e,t={}){let{size:s=16,smoothing:x=.5,thinning:h=.5,simulatePressure:y=true,easing:n=r=>r,start:f={},end:d={},last:D=false}=t,{cap:S=true,easing:j=r=>r*(2-r)}=f,{cap:q=true,easing:c=r=>--r*r*r+1}=d;if(e.length===0||s<=0)return [];let p=e[e.length-1].runningLength,g=f.taper===false?0:f.taper===true?Math.max(s,p):f.taper,T=d.taper===false?0:d.taper===true?Math.max(s,p):d.taper,oe=Math.pow(s*x,2),_=[],M=[],H=e.slice(0,10).reduce((r,i)=>{let o=i.pressure;if(y){let u=C(1,i.distance/s),W=C(1,1-u);o=C(1,r+(W-r)*(u*le));}return (r+o)/2},e[0].pressure),m=$(s,h,e[e.length-1].pressure,n),U,X=e[0].vector,z=e[0].point,F=z,O=z,E=F,J=false;for(let r=0;r<e.length;r++){let{pressure:i}=e[r],{point:o,vector:u,distance:W,runningLength:I}=e[r];if(r<e.length-1&&p-I<3)continue;if(h){if(y){let v=C(1,W/s),Z=C(1,1-v);i=C(1,H+(Z-H)*(v*le));}m=$(s,h,i,n);}else m=s/2;U===void 0&&(U=m);let fe=I<g?j(I/g):1,be=p-I<T?c((p-I)/T):1;m=Math.max(.01,m*Math.min(fe,be));let se=(r<e.length-1?e[r+1]:e[r]).vector,Y=r<e.length-1?B(u,se):1,he=B(u,X)<0&&!J,ue=Y!==null&&Y<0;if(he||ue){let v=b(R(X),m);for(let Z=1/13,w=0;w<=1;w+=Z)O=L(a(o,v),o,V*w),_.push(O),E=L(l(o,v),o,V*-w),M.push(E);z=O,F=E,ue&&(J=true);continue}if(J=false,r===e.length-1){let v=b(R(u),m);_.push(a(o,v)),M.push(l(o,v));continue}let ie=b(R(K(se,u,Y)),m);O=a(o,ie),(r<=1||A(z,O)>oe)&&(_.push(O),z=O),E=l(o,ie),(r<=1||A(F,E)>oe)&&(M.push(E),F=E),H=i,X=u;}let P=e[0].point.slice(0,2),k=e.length>1?e[e.length-1].point.slice(0,2):l(e[0].point,[1,1]),Q=[],N=[];if(e.length===1){if(!(g||T)||D){let r=ee(P,G(R(a(P,k))),-(U||m)),i=[];for(let o=1/13,u=o;u<=1;u+=o)i.push(L(r,P,V*2*u));return i}}else {if(!(g||T&&e.length===1))if(S)for(let i=1/13,o=i;o<=1;o+=i){let u=L(M[0],P,V*o);Q.push(u);}else {let i=a(_[0],M[0]),o=b(i,.5),u=b(i,.51);Q.push(a(P,o),a(P,u),l(P,u),l(P,o));}let r=R(ce(e[e.length-1].vector));if(T||g&&e.length===1)N.push(k);else if(q){let i=ee(k,r,m);for(let o=1/29,u=o;u<1;u+=o)N.push(L(i,k,V*3*u));}else N.push(l(k,b(r,m)),l(k,b(r,m*.99)),a(k,b(r,m*.99)),a(k,b(r,m)));}return _.concat(N,M.reverse(),Q)}function re(e,t={}){var q;let{streamline:s=.5,size:x=16,last:h=false}=t;if(e.length===0)return [];let y=.15+(1-s)*.85,n=Array.isArray(e[0])?e:e.map(({x:c,y:p,pressure:g=.5})=>[c,p,g]);if(n.length===2){let c=n[1];n=n.slice(0,-1);for(let p=1;p<5;p++)n.push(K(n[0],c,p/4));}n.length===1&&(n=[...n,[...l(n[0],[1,1]),...n[0].slice(2)]]);let f=[{point:[n[0][0],n[0][1]],pressure:n[0][2]>=0?n[0][2]:.25,vector:[1,1],distance:0,runningLength:0}],d=false,D=0,S=f[0],j=n.length-1;for(let c=1;c<n.length;c++){let p=h&&c===j?n[c].slice(0,2):K(S.point,n[c],y);if(me(S.point,p))continue;let g=ae(p,S.point);if(D+=g,c<j&&!d){if(D<x)continue;d=true;}S={point:p,pressure:n[c][2]>=0?n[c][2]:.5,vector:G(a(S.point,p)),distance:g,runningLength:D},f.push(S);}return f[0].vector=((q=f[1])==null?void 0:q.vector)||[0,0],f}function ne(e,t={}){return te(re(e,t),t)}var ve=ne;
-	} (cjs));
-	return cjs;
-}
-var cjsExports = requireCjs();
-class KritzelMathHelper {
-    static average(a, b) {
-        return (a + b) / 2;
-    }
-}
-class KritzelPath extends KritzelBaseObject {
-    constructor() {
-        super(...arguments);
-        this.__class__ = 'KritzelPath';
-        this.stroke = 'none';
-        this.lineSlack = 0.5;
-        this.x = 0;
-        this.y = 0;
-        this.height = 0;
-        this.width = 0;
-        this.scale = 1;
-        this.visible = true;
-        this.debugInfoVisible = true;
-    }
-    get viewBox() {
-        return `${this.x} ${this.y} ${this.width} ${this.height}`;
-    }
-    static create(store, options) {
-        var _a, _b, _c, _d, _e, _f;
-        const object = new KritzelPath();
-        object._store = store;
-        object.id = object.generateId();
-        object.options = options;
-        object.points = (_a = options === null || options === void 0 ? void 0 : options.points) !== null && _a !== void 0 ? _a : [];
-        object.translateX = (_b = options === null || options === void 0 ? void 0 : options.translateX) !== null && _b !== void 0 ? _b : 0;
-        object.translateY = (_c = options === null || options === void 0 ? void 0 : options.translateY) !== null && _c !== void 0 ? _c : 0;
-        object.scale = (_d = options === null || options === void 0 ? void 0 : options.scale) !== null && _d !== void 0 ? _d : 1;
-        object.strokeWidth = (_e = options === null || options === void 0 ? void 0 : options.strokeWidth) !== null && _e !== void 0 ? _e : 8;
-        object.fill = (_f = options === null || options === void 0 ? void 0 : options.fill) !== null && _f !== void 0 ? _f : '#000000';
-        object.zIndex = store.currentZIndex;
-        object.d = object.generateSvgPath();
-        object.updateDimensions();
-        return object;
-    }
-    resize(x, y, width, height) {
-        if (width <= 1 || height <= 1) {
-            return;
-        }
-        const scaleX = width / this.width;
-        const scaleY = height / this.height;
-        this.width = width;
-        this.height = height;
-        this.points = this.points.map(([x, y]) => [x * scaleX, y * scaleY]);
-        this.d = this.generateSvgPath();
-        this.width = Math.max(...this.points.map(p => p[0])) - Math.min(...this.points.map(p => p[0])) + this.strokeWidth;
-        this.height = Math.max(...this.points.map(p => p[1])) - Math.min(...this.points.map(p => p[1])) + this.strokeWidth;
-        this.x = Math.min(...this.points.map(p => p[0])) - this.strokeWidth / 2;
-        this.y = Math.min(...this.points.map(p => p[1])) - this.strokeWidth / 2;
-        this.translateX = x;
-        this.translateY = y;
-    }
-    rotate(value) {
-        super.rotate(value);
-        this.updateDimensions();
-    }
-    updateDimensions() {
-        const rotatedPoints = this.points.map(([x, y]) => {
-            const rotatedX = x * Math.cos(this.rotation) - y * Math.sin(this.rotation);
-            const rotatedY = x * Math.sin(this.rotation) + y * Math.cos(this.rotation);
-            return [rotatedX, rotatedY];
-        });
-        const minX = Math.min(...rotatedPoints.map(p => p[0] - this.strokeWidth / 2));
-        const minY = Math.min(...rotatedPoints.map(p => p[1] - this.strokeWidth / 2));
-        const maxX = Math.max(...rotatedPoints.map(p => p[0] + this.strokeWidth / 2));
-        const maxY = Math.max(...rotatedPoints.map(p => p[1] + this.strokeWidth / 2));
-        this.width = maxX - minX + this.lineSlack; // Add 0.5 to avoid rounding issues
-        this.height = maxY - minY + this.lineSlack; // Add 0.5 to avoid rounding issues
-        this.x = minX;
-        this.y = minY;
-        this.translateX = (this.x + this.translateX) / this.scale;
-        this.translateY = (this.y + this.translateY) / this.scale;
-    }
-    generateSvgPath() {
-        const stroke = this.getStrokeFromPoints(this.points, this.strokeWidth);
-        return this.getSvgPathFromStroke(stroke);
-    }
-    getStrokeFromPoints(points, strokeWidth) {
-        return cjsExports.getStroke(points, {
-            size: strokeWidth,
-            thinning: 0.5,
-            smoothing: 0.5,
-            streamline: 0.5,
-            easing: t => t,
-            simulatePressure: true,
-            last: true,
-            start: {
-                cap: true,
-                taper: 0,
-                easing: t => t,
-            },
-            end: {
-                cap: true,
-                taper: 0,
-                easing: t => t,
-            },
-        });
-    }
-    getSvgPathFromStroke(points, closed = true) {
-        const len = points.length;
-        if (len < 4) {
-            return ``;
-        }
-        let a = points[0];
-        let b = points[1];
-        const c = points[2];
-        let result = `M${a[0].toFixed(2)},${a[1].toFixed(2)} Q${b[0].toFixed(2)},${b[1].toFixed(2)} ${KritzelMathHelper.average(b[0], c[0]).toFixed(2)},${KritzelMathHelper.average(b[1], c[1]).toFixed(2)} T`;
-        for (let i = 2, max = len - 1; i < max; i++) {
-            a = points[i];
-            b = points[i + 1];
-            result += `${KritzelMathHelper.average(a[0], b[0]).toFixed(2)},${KritzelMathHelper.average(a[1], b[1]).toFixed(2)} `;
-        }
-        if (closed) {
-            result += 'Z';
-        }
-        return result;
-    }
-}
 class KritzelBrushTool extends KritzelBaseTool {
     constructor(store) {
         super(store);
@@ -481,7 +342,7 @@ class KritzelDevicesHelper {
     }
 }
-const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select:none}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 8px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid hsl(0, 0%, 0%, 4.3%));border-radius:var(--kritzel-controls-border-radius, 8px);z-index:10000;position:relative}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 8px);padding:var(--kritzel-controls-control-padding, 8px);border:none;outline:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.mobile) .kritzel-control:hover{background-color:unset}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}:host(.mobile) .kritzel-control:active{background-color:unset}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #0E1111) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-divider{width:var(--kritzel-controls-divider-width, 1px);height:var(--kritzel-controls-divider-height, 24px);background-color:var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;width:40px;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:pointer}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #f0f0f0)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #f0f0f0)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{position:fixed;bottom:66px;left:50%;transform:translateX(-50%);z-index:10001}";
+const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select:none}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #f0f0f0);z-index:10000;position:relative}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;outline:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.mobile) .kritzel-control:hover{background-color:unset}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}:host(.mobile) .kritzel-control:active{background-color:unset}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #0E1111) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-divider{width:var(--kritzel-controls-divider-width, 1px);height:var(--kritzel-controls-divider-height, 24px);background-color:var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;width:40px;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:pointer}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #f0f0f0)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #f0f0f0)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{position:fixed;bottom:66px;left:50%;transform:translateX(-50%);z-index:10001}";
 const KritzelControls = class {
     constructor(hostRef) {
@@ -693,7 +554,7 @@ const KritzelCursorTrail = class {
 };
 KritzelCursorTrail.style = kritzelCursorTrailCss;
-const kritzelDropdownCss = ":host{display:inline-flex;vertical-align:middle;width:100%;}.dropdown-wrapper{display:flex;align-items:center;border:1px solid #333333;border-radius:var(--kritzel-controls-control-border-radius, 8px);overflow:hidden;height:32px;width:100%}.custom-select{padding:0 8px;padding-right:30px;height:100%;width:100%;box-sizing:border-box;border-radius:0;border:none;background-color:#fff;cursor:pointer;outline:none;font-size:inherit;color:var(--kritzel-controls-text-color, #333333);-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23333333\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"/></svg>');background-size:16px 16px;background-repeat:no-repeat;background-position:right 8px center}.custom-select.has-suffix-border{border-right:1px solid #333333}.custom-select.has-prefix-border{border-left:1px solid #333333}::slotted(*){height:100%;box-sizing:border-box}";
+const kritzelDropdownCss = ":host{display:inline-flex;vertical-align:middle;width:100%;}.dropdown-wrapper{display:flex;align-items:center;border:1px solid #333333;border-radius:var(--kritzel-controls-control-border-radius, 12px);overflow:hidden;height:32px;width:100%}.custom-select{padding:0 8px;padding-right:30px;height:100%;width:100%;box-sizing:border-box;border-radius:0;border:none;background-color:#fff;cursor:pointer;outline:none;font-size:inherit;color:var(--kritzel-controls-text-color, #333333);-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23333333\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"/></svg>');background-size:16px 16px;background-repeat:no-repeat;background-position:right 8px center}.custom-select.has-suffix-border{border-right:1px solid #333333}.custom-select.has-prefix-border{border-left:1px solid #333333}::slotted(*){height:100%;box-sizing:border-box}";
 const KritzelDropdown = class {
     constructor(hostRef) {
@@ -806,24 +667,24 @@ class KritzelIconRegistry {
 }
 KritzelIconRegistry.registry = new Map();
 KritzelIconRegistry.registerIcons({
-    'cursor': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z"/></svg>',
-    'pen': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></svg>',
-    'highlighter': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-highlighter-icon lucide-highlighter"><path d="m9 11-6 6v3h9l3-3"/><path d="m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4"/></svg>',
-    'eraser': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"/><path d="M22 21H7"/><path d="m5 11 9 9"/></svg>',
-    'type': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/></svg>',
-    'image': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>',
-    'chevron-down': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>',
-    'chevron-up': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>',
-    'copy': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>',
-    'paste': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard-paste-icon lucide-clipboard-paste"><path d="M11 14h10"/><path d="M16 4h2a2 2 0 0 1 2 2v1.344"/><path d="m17 18 4-4-4-4"/><path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"/><rect x="8" y="2" width="8" height="4" rx="1"/></svg>',
-    'cut': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scissors-icon lucide-scissors"><circle cx="6" cy="6" r="3"/><path d="M8.12 8.12 12 12"/><path d="M20 4 8.12 15.88"/><circle cx="6" cy="18" r="3"/><path d="M14.8 14.8 20 20"/></svg>',
-    'delete': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>',
-    'bring-to-front': '<svg  width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-to-line-icon lucide-arrow-up-to-line"><path d="M5 3h14"/><path d="m18 13-6-6-6 6"/><path d="M12 7v14"/></svg>',
-    'send-to-back': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-to-line-icon lucide-arrow-down-to-line"><path d="M12 17V3"/><path d="m6 11 6 6 6-6"/><path d="M19 21H5"/></svg>',
-    'select-all': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-mouse-pointer-icon lucide-square-mouse-pointer"><path d="M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.943.033z"/><path d="M21 11V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6"/></svg>',
-    'download': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>',
-    'undo': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-undo-icon lucide-undo"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/></svg>',
-    'redo': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-redo-icon lucide-redo"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"/></svg>'
+    'cursor': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z"/></svg>',
+    'pen': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></svg>',
+    'highlighter': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-highlighter-icon lucide-highlighter"><path d="m9 11-6 6v3h9l3-3"/><path d="m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4"/></svg>',
+    'eraser': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"/><path d="M22 21H7"/><path d="m5 11 9 9"/></svg>',
+    'type': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/></svg>',
+    'image': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>',
+    'chevron-down': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>',
+    'chevron-up': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>',
+    'copy': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>',
+    'paste': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard-paste-icon lucide-clipboard-paste"><path d="M11 14h10"/><path d="M16 4h2a2 2 0 0 1 2 2v1.344"/><path d="m17 18 4-4-4-4"/><path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"/><rect x="8" y="2" width="8" height="4" rx="1"/></svg>',
+    'cut': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scissors-icon lucide-scissors"><circle cx="6" cy="6" r="3"/><path d="M8.12 8.12 12 12"/><path d="M20 4 8.12 15.88"/><circle cx="6" cy="18" r="3"/><path d="M14.8 14.8 20 20"/></svg>',
+    'delete': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>',
+    'bring-to-front': '<svg  width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-to-line-icon lucide-arrow-up-to-line"><path d="M5 3h14"/><path d="m18 13-6-6-6 6"/><path d="M12 7v14"/></svg>',
+    'send-to-back': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-to-line-icon lucide-arrow-down-to-line"><path d="M12 17V3"/><path d="m6 11 6 6 6-6"/><path d="M19 21H5"/></svg>',
+    'select-all': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-mouse-pointer-icon lucide-square-mouse-pointer"><path d="M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.943.033z"/><path d="M21 11V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6"/></svg>',
+    'download': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>',
+    'undo': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-undo-icon lucide-undo"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/></svg>',
+    'redo': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-redo-icon lucide-redo"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"/></svg>'
 });
 class BatchCommand extends KritzelBaseCommand {
@@ -931,37 +792,6 @@ class KritzelEraserTool extends KritzelBaseTool {
     }
 }
-class KritzelImage extends KritzelBaseObject {
-    constructor() {
-        super(...arguments);
-        this.__class__ = 'KritzelImage';
-        this.src = '';
-        this.debugInfoVisible = true;
-    }
-    static create(store) {
-        const object = new KritzelImage();
-        object._store = store;
-        object.id = object.generateId();
-        object.x = 0;
-        object.y = 0;
-        object.translateX = 0;
-        object.translateY = 0;
-        object.scale = object._store.state.scale;
-        object.zIndex = store.currentZIndex;
-        return object;
-    }
-    resize(x, y, width, height) {
-        if (width <= 1 || height <= 1) {
-            return;
-        }
-        const scaleFactor = height / this.height;
-        this.width = this.width * scaleFactor;
-        this.height = this.height * scaleFactor;
-        this.translateX = x;
-        this.translateY = y;
-    }
-}
 class RemoveSelectionGroupCommand extends KritzelBaseCommand {
     constructor(store, initiator) {
         super(store, initiator);
@@ -2284,6 +2114,7 @@ const kritzelEditorCss = "kritzel-editor{display:flex;margin:0;position:relative
 const KritzelEditor = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.isReady = createEvent(this, "isReady");
         this.controls = DEFAULT_KRITZEL_CONTROLS;
         this.customSvgIcons = {};
         this.hideControls = false;
@@ -2300,6 +2131,9 @@ const KritzelEditor = class {
     async removeObject(object) {
         return this.engineRef.removeObject(object);
     }
+    async getSelectedObjects() {
+        return this.engineRef.getSelectedObjects();
+    }
     async selectObjects(objects) {
         return this.engineRef.selectObjects(objects);
     }
@@ -2321,8 +2155,13 @@ const KritzelEditor = class {
             (_a = this.controlsRef) === null || _a === void 0 ? void 0 : _a.closeTooltip();
         }
     }
-    componentWillLoad() {
+    async onEngineReady() {
+        await customElements.whenDefined('kritzel-editor');
+        await customElements.whenDefined('kritzel-controls');
+        await customElements.whenDefined('kritzel-engine');
         this.registerCustomSvgIcons();
+        console.log('Editor in stencil is read');
+        this.isReady.emit();
     }
     registerCustomSvgIcons() {
         for (const [name, svg] of Object.entries(this.customSvgIcons)) {
@@ -2330,7 +2169,7 @@ const KritzelEditor = class {
         }
     }
     render() {
-        return (h(Host, { key: '5192399124222f7bd8a8d66054e6053befdebdfb' }, h("kritzel-engine", { key: '5fe3019675f579dfd14bb0072422de1e97f4fe18', ref: el => (this.engineRef = el) }), h("kritzel-controls", { key: '99f382d75380d770a634cbdbe873c29bf95a7b08', ref: el => (this.controlsRef = el), controls: this.controls, style: this.hideControls ? { display: 'none' } : { display: 'flex' } })));
+        return (h(Host, { key: '83aa8122498b051ab605dcbfeadb2a2595324ef2' }, h("kritzel-engine", { key: '4ba9ac23b99e0d42d65badc8ddc6be603857267c', ref: el => (this.engineRef = el), onIsEngineReady: () => this.onEngineReady() }), h("kritzel-controls", { key: '2eb28eed27ebec46dc37221b75f888f8bfe7ffbc', ref: el => (this.controlsRef = el), controls: this.controls, style: this.hideControls ? { display: 'none' } : { display: 'flex' } })));
     }
     get host() { return getElement(this); }
 };
@@ -2757,6 +2596,7 @@ const DEFAULT_ENGINE_STATE = {
     selectionGroup: null,
     resizeHandleType: null,
     hasViewportChanged: false,
+    isReady: false,
     isEnabled: true,
     isScaling: false,
     isPanning: false,
@@ -3169,6 +3009,12 @@ class KritzelContextMenuHandler extends KritzelBaseHandler {
     }
 }
+class KritzelClassHelper {
+    static isInstanceOf(object, className) {
+        return object.__class__ === className;
+    }
+}
 const kritzelEngineCss = ":host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}textarea{all:unset;box-sizing:border-box;outline:none !important;border:none !important;overflow:visible}.resize-handle-overlay.top-left,.resize-handle-overlay.bottom-right{cursor:nwse-resize}.resize-handle-overlay.top-right,.resize-handle-overlay.bottom-left{cursor:nesw-resize}.rotation-handle-overlay{cursor:grab}";
 const KritzelEngine = class {
@@ -3180,7 +3026,7 @@ const KritzelEngine = class {
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.engineReady = createEvent(this, "engineReady");
+        this.isEngineReady = createEvent(this, "isEngineReady");
         this.activeToolChange = createEvent(this, "activeToolChange");
         this.globalContextMenuItems = [
             {
@@ -3232,7 +3078,10 @@ const KritzelEngine = class {
     }
     componentDidLoad() {
         this.viewport = new KritzelViewport(this.store, this.host);
-        this.engineReady.emit();
+        if (this.store.state.isReady === false) {
+            this.store.state.isReady = true;
+            this.isEngineReady.emit();
+        }
     }
     handleWheel(ev) {
         var _a, _b;
@@ -3395,6 +3244,7 @@ const KritzelEngine = class {
         this.store.deselectAllObjects();
         object.id = object.generateId();
         object._store = this.store;
+        object.scale = object.scale ? object.scale : this.store.state.scale;
         object.zIndex = this.store.currentZIndex;
         const command = new AddObjectCommand(this.store, this, object);
         this.store.history.executeCommand(command);
@@ -3412,12 +3262,16 @@ const KritzelEngine = class {
         this.store.history.executeCommand(command);
         return object;
     }
+    async getSelectedObjects() {
+        return this.store.state.selectionGroup ? this.store.state.selectionGroup.objects : [];
+    }
     async selectObjects(objects) {
         var _a;
         (_a = this.store.state.activeTool) === null || _a === void 0 ? void 0 : _a.onDeactivate();
         this.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
         this.store.deselectAllObjects();
         this.store.selectObjects(objects);
+        console.log('Selected objects:', objects);
     }
     async selectAllObjectsInViewport() {
         var _a;
@@ -3435,15 +3289,15 @@ const KritzelEngine = class {
         const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
         const baseHandleSize = parseFloat(baseHandleSizePx);
         const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
-        return (h(Host, { key: '46b1c0d4000229b7881636625af38db319ff49ae' }, h("div", { key: '7b91f710711ff1fefd395c38f79004c84a3df74d', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '63568d0cceef92262bbf40f54f84d5003302f7c1' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
-            _a.translateX), h("div", { key: 'cd7a9f6bf33d547b23814468c1d2ae726f5d5576' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
-            _b.translateY), h("div", { key: '42788d635e64f1e1f1da2f6b0ec8cf0fec988769' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
-            _c.viewportWidth), h("div", { key: 'bd674b2a6b13b22ad177d2bc0527a6b2d41d523f' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
-            _d.viewportHeight), h("div", { key: 'faa9581a80b8020ebe4f48cfbea4b0a91a17b1d0' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: '74e9671f7f546debca0884e74e7b5cdbba0810de' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
-            _e.scale), h("div", { key: '7f14af283874e226cfdcdf5bf17c0c4f6935f154' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
-            _g.name), h("div", { key: '5d9bb07762326387a04d99d9d1f0487c809a8d13' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), h("div", { key: '65b54f060f162e328d8756845a991b84cd377fa8' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), h("div", { key: '0593106ef382e3a4b4368f503d435550ee52b686' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), h("div", { key: '2d9102c016bbc89bd3f61b46c364663d822ae773' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), h("div", { key: '5393b7974bf7e8c391ec67945610b0051d155393' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), h("div", { key: '3591db55fdf4b92162f4d516d307b9f42a6f996a' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '2fef15767414c841b320705638328f45ab6e01b7' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '20cf1b12790c3f7112484de2343ed157536f072f' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: 'b23da45c9f13deb827f837651ab4e09cdb435aa9' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '6c3d8cf2aeacf3c9e7930eca83676bfa59f3d2cb' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), h("div", { key: 'c87abe35d1aa55d11d321cec3d78f6722a04d114' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), h("div", { key: '3d371da3b1075c5b116ae0db50ae5b8d22e6c2eb' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
-            _m.cursorX), h("div", { key: '1a426883cfbfd742aa127d7fff92080586f4af62' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
-            _o.cursorY)), h("div", { key: '5de09bb5222a271a3163d7226e012cb86c722a7e', class: "origin", style: {
+        return (h(Host, { key: 'b45e4ad6645643d642c94a91cafaa49a75bb3505' }, h("div", { key: 'c87b2fc89aae574b79b304299383e220a0c80ed2', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '09e6308374584f5e454abe11cd219370c9920f78' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
+            _a.translateX), h("div", { key: 'df5b645b782fdce83c54361aca038a5a638183cd' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
+            _b.translateY), h("div", { key: '12c251313bac25cf0d99090306e269e81949e168' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
+            _c.viewportWidth), h("div", { key: '48bcc8b9318e9ff1ad97ac34c6a1b7bca6b23443' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
+            _d.viewportHeight), h("div", { key: '81d47be11636989548b5b593368e74342abe655d' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: '48313baf47c284b3780bf789fa15daee8b06027a' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
+            _e.scale), h("div", { key: '8e7a32e747f85612cb9a405d596cc39c41048667' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
+            _g.name), h("div", { key: '2c80e5568525c9852cc34f3ac0ffdbc20676feab' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), h("div", { key: 'db6d20659f7ab19baf63842f402018f3e5816e85' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), h("div", { key: '243e6aab8b40c08a4e4d278e1c915b7cd82ffafc' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), h("div", { key: '183bccbf711ae3e29474152e01a77fcfaf29130c' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), h("div", { key: 'c520ed2a0afb60e7fd73be7006e7fdef4d306df1' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), h("div", { key: '9e52bfec4a1ea0ad4ae09f3d006ae8689140da4a' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: 'f917c984963ff98a99068c0286a74fd3910fa2f2' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '5811fa41a32f84aa38b76958e39b8529edc222ee' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '56e074738abaea466381c1a6aa219476dd4eaa89' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '9a9fb9893bec08bb88d9c95a80b9df646ad803ec' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), h("div", { key: 'bfee6adc9b6638a294924051a508c7c75e44aa51' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), h("div", { key: 'c70e2e780804ce63a3ee3839e5da8a6edf0c8f85' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
+            _m.cursorX), h("div", { key: '434f4eafc7182f48bf90390ae719ddc46d3bec48' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
+            _o.cursorY)), h("div", { key: '7997269880dab3dbc8b920f340a3ed01127bd5bf', class: "origin", style: {
                 transform: `matrix(${(_p = this.store.state) === null || _p === void 0 ? void 0 : _p.scale}, 0, 0, ${(_q = this.store.state) === null || _q === void 0 ? void 0 : _q.scale}, ${(_r = this.store.state) === null || _r === void 0 ? void 0 : _r.translateX}, ${(_s = this.store.state) === null || _s === void 0 ? void 0 : _s.translateY})`,
             } }, (_t = this.store.objects) === null || _t === void 0 ? void 0 :
             _t.map(object => {
@@ -3467,17 +3321,17 @@ const KritzelEngine = class {
                         borderStyle: 'solid',
                         padding: object.padding + 'px',
                         overflow: 'visible',
-                    } }, object instanceof KritzelPath && (h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
+                    } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
                         height: object === null || object === void 0 ? void 0 : object.height.toString(),
                         width: object === null || object === void 0 ? void 0 : object.width.toString(),
                         position: 'absolute',
                         overflow: 'visible',
-                    }, viewBox: object === null || object === void 0 ? void 0 : object.viewBox }, h("path", { d: object === null || object === void 0 ? void 0 : object.d, fill: object.fill, stroke: object === null || object === void 0 ? void 0 : object.stroke }))), object instanceof KritzelImage && (h("img", { ref: el => object.mount(el), src: object.src, style: {
+                    }, viewBox: object === null || object === void 0 ? void 0 : object.viewBox }, h("path", { d: object === null || object === void 0 ? void 0 : object.d, fill: object.fill, stroke: object === null || object === void 0 ? void 0 : object.stroke }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("img", { ref: el => object.mount(el), src: object.src, style: {
                         width: '100%',
                         height: '100%',
                         userSelect: 'none',
                         pointerEvents: 'none',
-                    }, draggable: false, onDragStart: e => e.preventDefault() })), object instanceof KritzelText && (h("textarea", { ref: el => object.mount(el), value: object.value, onKeyDown: event => object.handleKeyDown(event), onInput: event => object.handleInput(event), rows: object.rows, style: {
+                    }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("textarea", { ref: el => object.mount(el), value: object.value, onKeyDown: event => object.handleKeyDown(event), onInput: event => object.handleInput(event), rows: object.rows, style: {
                         width: '100%',
                         height: '100%',
                         color: object.fontColor,
@@ -3493,10 +3347,10 @@ const KritzelEngine = class {
                         pointerEvents: object.isReadonly ? 'none' : 'auto',
                         cursor: object.isReadonly ? 'default' : 'text',
                         caretColor: object.isReadonly ? 'transparent' : 'auto',
-                    } })), object instanceof KritzelSelectionGroup && (h("div", { ref: el => object.mount(el), style: {
+                    } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && (h("div", { ref: el => object.mount(el), style: {
                         width: '100%',
                         height: '100%',
-                    } })), object instanceof KrtizelSelectionBox && (h("div", { ref: el => object.mount(el), style: {
+                    } })), KritzelClassHelper.isInstanceOf(object, 'KrtizelSelectionBox') && (h("div", { ref: el => object.mount(el), style: {
                         width: '100%',
                         height: '100%',
                     } }))), h("line", { x1: "0", y1: "0", x2: object.totalWidth, y2: "0", style: {
@@ -3540,7 +3394,7 @@ const KritzelEngine = class {
                         fill: 'transparent',
                         cursor: 'grab',
                     }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), h("g", { style: { display: this.store.state.debugInfo.showObjectInfo ? 'block' : 'none', pointerEvents: 'none' } }, h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.debugInfoVisible ? 'block' : 'none' } }, h("div", { style: { width: '100%', height: '100%' } }, h("div", { style: { whiteSpace: 'nowrap' } }, "zIndex: ", object.zIndex), h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap' } }, "scale: ", object.scale), h("div", { style: { whiteSpace: 'nowrap' } }, "rotation: ", object.rotation)))))));
-            }), h("svg", { key: '684971a4c93f5d8cdf52497d0f3f81dc21ece397', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
+            }), h("svg", { key: '637b9098b88f3ecc36794d64bb205a3f26500598', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
                 height: (_u = this.store.state.currentPath) === null || _u === void 0 ? void 0 : _u.height.toString(),
                 width: (_v = this.store.state.currentPath) === null || _v === void 0 ? void 0 : _v.width.toString(),
                 left: '0',
@@ -3550,12 +3404,12 @@ const KritzelEngine = class {
                 transform: (_x = this.store.state.currentPath) === null || _x === void 0 ? void 0 : _x.transformationMatrix,
                 transformOrigin: 'top left',
                 overflow: 'visible',
-            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, h("path", { key: 'e29e0b110612e569a8fada121d749f66ab5e2aae', d: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.d, fill: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.fill, stroke: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.stroke }))), this.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '81b88db00390e6ba768b7432e941a87ba56e54e5', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, style: {
+            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, h("path", { key: '0f44d2551774e94a74e4d6f5a0e1812baf05bdfb', d: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.d, fill: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.fill, stroke: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.stroke }))), this.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '3c74a2d2cc100a2957f3065388f15238cbf0f92c', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, style: {
                 position: 'fixed',
                 left: `${this.store.state.contextMenuX}px`,
                 top: `${this.store.state.contextMenuY}px`,
                 zIndex: '10000',
-            }, onActionSelected: event => this.handleContextMenuAction(event) })), ((_2 = this.store.state) === null || _2 === void 0 ? void 0 : _2.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && h("kritzel-cursor-trail", { key: '700ef43b524157ef757973fc039b2d74e7920578', store: this.store })));
+            }, onActionSelected: event => this.handleContextMenuAction(event) })), ((_2 = this.store.state) === null || _2 === void 0 ? void 0 : _2.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && h("kritzel-cursor-trail", { key: '8ede38f5f2eff63fc7647836778e3b428106bca5', store: this.store })));
     }
     get host() { return getElement(this); }
 };
@@ -3688,7 +3542,7 @@ const KritzelStrokeSize = class {
 };
 KritzelStrokeSize.style = kritzelStrokeSizeCss;
-const kritzelTooltipCss = ":host{width:auto}.tooltip-content{position:relative;padding:8px 12px;border-radius:4px;width:fit-content;background-color:var(--kritzel-controls-tooltip-background-color, #ffffff);color:var(--kritzel-controls-tooltip-color, #000000);padding:var(--kritzel-controls-tooltip-padding, 8px);border-radius:var(--kritzel-controls-tooltip-border-radius, 8px);white-space:nowrap;box-shadow:var(--kritzel-controls-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12))}";
+const kritzelTooltipCss = ":host{width:auto}.tooltip-content{position:relative;padding:8px 12px;border-radius:4px;width:fit-content;background-color:var(--kritzel-controls-tooltip-background-color, #ffffff);color:var(--kritzel-controls-tooltip-color, #000000);padding:var(--kritzel-controls-tooltip-padding, 8px);border-radius:var(--kritzel-controls-tooltip-border-radius, 16px);white-space:nowrap;box-shadow:var(--kritzel-controls-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12))}";
 const MOBILE_BREAKPOINT = 768;
 const KritzelTooltip = class {
@@ -3757,7 +3611,7 @@ const KritzelTooltip = class {
 };
 KritzelTooltip.style = kritzelTooltipCss;
-const kritzelUtilityPanelCss = ":host{display:flex;flex-direction:row;align-items:center;padding:4px;gap:8px;border-top-left-radius:6px;border-top-right-radius:6px;background-color:rgb(226, 226, 226);width:fit-content;user-select:none}.utility-button{display:flex;justify-content:center;align-items:center;width:28px;height:28px;padding:8px 4px;border:none;outline:none;background:none;cursor:pointer;color:#333333;-webkit-tap-highlight-color:transparent}.utility-separator{width:1px;height:16px;background-color:hsl(0, 0%, 0%, 4.3%)}";
+const kritzelUtilityPanelCss = ":host{display:flex;flex-direction:row;align-items:center;padding:4px;gap:8px;border-top-left-radius:12px;border-top-right-radius:12px;background-color:rgb(226, 226, 226);width:fit-content;user-select:none}.utility-button{display:flex;justify-content:center;align-items:center;width:28px;height:28px;padding:8px 4px;border:none;outline:none;background:none;cursor:pointer;color:#333333;-webkit-tap-highlight-color:transparent}.utility-separator{width:1px;height:16px;background-color:hsl(0, 0%, 0%, 4.3%)}";
 const KritzelUtilityPanel = class {
     constructor(hostRef) {