kritzel-stencil 0.0.104 → 0.0.106

package/dist/cjs/kritzel-brush-style_18.cjs.entry.js

@@ -22,7 +22,7 @@ const KritzelBrushStyle = class {
             value: option.value,
             label: option.label,
         }));
-        return (index.h(index.Host, { key: 'cb9a9485596d25280c6d96e30296ed8c6b3de0e1' }, index.h("kritzel-dropdown", { key: 'b2f22f627e91228ca42bcd2898b468fcb994d5f8', options: dropdownOptions, value: this.type, onValueChanged: event => this.handleDropdownValueChange(event) }, index.h("button", { key: '1a8ab8cc0917bcdcbbbd485354853b80dd2f9a7f', class: "brush-style-button", slot: "prefix" }, index.h("kritzel-icon", { key: '62238f43f6a88a0a01d47e56d48179834edc4fc1', name: this.type, size: 16 })))));
+        return (index.h(index.Host, { key: 'd7af382fe6f613aa16a5146785990ad2faa17f60' }, index.h("kritzel-dropdown", { key: '6d6d330d415c210058834b2968774b3db2ab7fc4', options: dropdownOptions, value: this.type, onValueChanged: event => this.handleDropdownValueChange(event) }, index.h("button", { key: 'c9fb33795b8e25f68c1d2ae248dc82a6de29e199', class: "brush-style-button", slot: "prefix" }, index.h("kritzel-icon", { key: '975c95b545a1c27ae2984405ac298592eec9743d', name: this.type, size: 16 })))));
     }
 };
 KritzelBrushStyle.style = kritzelBrushStyleCss;
@@ -60,13 +60,13 @@ const KritzelColor = class {
     }
     render() {
         const isColorVeryLight = this.isLightColor(this.value);
-        return (index.h(index.Host, { key: 'e913815994a30d97f92781e742c4a13de19e59fe' }, index.h("div", { key: 'e0cc40b10dcb298f5b86be7d4283d6bffbd08c2c', class: "checkerboard-bg", style: {
+        return (index.h(index.Host, { key: '606cfb813de66c495b2a2ff1e54aac4a5f761ab8' }, index.h("div", { key: '066d364e6e025b245c896603f68a15962684f78b', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, index.h("div", { key: '5e0a092a6d3463d852a1760d125fba04494e0d90', class: {
+            } }, index.h("div", { key: '500d1a781d0b7a1777a7a43f89be8c6217726584', class: {
                 'color-circle': true,
                 'white': isColorVeryLight,
             }, style: {
@@ -108,7 +108,7 @@ const KritzelColorPalette = class {
     render() {
         const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
         const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
-        return (index.h(index.Host, { key: '0f0d176e1c8b199a973dbdb23b84e4a8d4d57f59' }, index.h("div", { key: '1d4707cdb30752d21a5058dbbef5fb32934bd3bd', class: {
+        return (index.h(index.Host, { key: '9590fbda0cb20e767880c49323350b12c7d287e4' }, index.h("div", { key: '9fd8699050018a90919c0045630b766183abb42e', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {
@@ -136,7 +136,7 @@ const KritzelContextMenu = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'dfbafed8ab0ab62e8124763431e00283ddfc9aaa' }, index.h("div", { key: 'd0d7cf6241d24bd85ca2f4d2aa3e23aeb4283d82', class: "menu-container" }, this.items.map(item => (index.h("button", { key: `${item.label}-${this.items.indexOf(item)}`, class: { 'menu-item': true, 'disabled': typeof item.disabled === 'function' ? item.disabled() : item.disabled }, onClick: () => this.handleItemClick(item), onTouchStart: () => this.handleItemClick(item), disabled: typeof item.disabled === 'function' ? item.disabled() : item.disabled }, item.icon && index.h("kritzel-icon", { name: item.icon, size: 16 }), index.h("span", { class: "label" }, item.label)))))));
+        return (index.h(index.Host, { key: 'db318a0936f89f202ef5101447b723c0ba7aa139' }, index.h("div", { key: '53da01021464f605e08c5f910997bb8f21d481a1', class: "menu-container" }, this.items.map(item => (index.h("button", { key: `${item.label}-${this.items.indexOf(item)}`, class: { 'menu-item': true, 'disabled': typeof item.disabled === 'function' ? item.disabled() : item.disabled }, onClick: () => this.handleItemClick(item), onTouchStart: () => this.handleItemClick(item), disabled: typeof item.disabled === 'function' ? item.disabled() : item.disabled }, item.icon && index.h("kritzel-icon", { name: item.icon, size: 16 }), index.h("span", { class: "label" }, item.label)))))));
     }
     get hostElement() { return index.getElement(this); }
 };
@@ -175,14 +175,14 @@ const KritzelControlBrushConfig = class {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (index.h(index.Host, { key: '1658cc6062f9a62c11a7011e36bd5f892653f691' }, index.h("div", { key: 'bfafd20ebc6f7541e6a0952b555e3aefd0524086', style: {
+        return (index.h(index.Host, { key: '29f0492264283879fd86195fc0db8e5a8f352a0f' }, index.h("div", { key: 'c5bde66ab565eb717bf302f3f97d08ed0b261289', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, index.h("kritzel-brush-style", { key: '6530b0fbee10db66f6dfd0e482e2a95279f303eb', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), index.h("button", { key: 'f16a4c5aefb298228d29576d6bf8a0632301169d', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, index.h("kritzel-icon", { key: '138726189ee12b0d15dedfdbd07019701712ea3b', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-color-palette", { key: 'ca15a07a28ad955d49289299265e1b62da508cfd', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), index.h("kritzel-stroke-size", { key: '1017df7a36bad69af055fe08e685a1be3ff48b4b', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, index.h("kritzel-brush-style", { key: 'e78ec70c5d0eb24933543e12389f1a3db4c3b8f2', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), index.h("button", { key: '9fbde247a8ed3cf43ef0bd0b269f8562dfac56a0', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, index.h("kritzel-icon", { key: '3cf37dd520fabd632cfd7d764254467d563670e1', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-color-palette", { key: 'daa59edce48e683a52a39ae4062fe811908dc685', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), index.h("kritzel-stroke-size", { key: 'b71bfb1176c35c24c15827ebc89dcac56bb42f0e', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
     }
     static get watchers() { return {
         "tool": ["handleToolChange"]
@@ -214,14 +214,14 @@ const KritzelControlTextConfig = class {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (index.h(index.Host, { key: '27d47c47987fb7644313a4face4a7023dfbe454d' }, index.h("div", { key: '835b8072267da18b39a5c02a6c989e1f7b81e9a5', style: {
+        return (index.h(index.Host, { key: '4a530500af6a26013d286f995987c8321c3565ec' }, index.h("div", { key: '98499852c8c2b95e2485058c8d0d114dfc4c133d', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, index.h("kritzel-font-family", { key: 'b7a0bde2e9cf53c9ae7c3a32b424825ca9f757c4', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), index.h("button", { key: '41aba583656195c4825a15ddc12c5e1efed0d8d2', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, index.h("kritzel-icon", { key: '5ff979420066703b5d5e886d12f89687392006e3', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-color-palette", { key: '30fbcc05f80b15fba7f1f5ac6413732d0149ee9b', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), index.h("kritzel-font-size", { key: '2a0d3c4578316b37bc1a25b6e065ecf565eca2b3', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, index.h("kritzel-font-family", { key: '21a06dd2a43b47219bf9fd983cbd75af75a7489d', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), index.h("button", { key: 'dfef40e171b4c2c5c771a017448ae2c22597834b', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, index.h("kritzel-icon", { key: 'ce3f80a32af959676b3dd16faedf195e9686fff3', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-color-palette", { key: '61dd15d6577784511b7abce9fe9e0c38c10a99fa', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), index.h("kritzel-font-size", { key: '162b9e3b4c342b4c224ec20bba61adbe168a638f', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
     }
 };
 KritzelControlTextConfig.style = kritzelControlTextConfigCss;
@@ -316,2023 +316,6 @@ class KritzelMathHelper {
     }
 }
 
-/** Detect free variable `global` from Node.js. */
-var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
-
-/** Detect free variable `self`. */
-var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
-
-/** Used as a reference to the global object. */
-var root = freeGlobal || freeSelf || Function('return this')();
-
-/** Built-in value references. */
-var Symbol = root.Symbol;
-
-/** Used for built-in method references. */
-var objectProto$b = Object.prototype;
-
-/** Used to check objects for own properties. */
-var hasOwnProperty$8 = objectProto$b.hasOwnProperty;
-
-/**
- * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
- * of values.
- */
-var nativeObjectToString$1 = objectProto$b.toString;
-
-/** Built-in value references. */
-var symToStringTag$1 = Symbol ? Symbol.toStringTag : undefined;
-
-/**
- * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
- *
- * @private
- * @param {*} value The value to query.
- * @returns {string} Returns the raw `toStringTag`.
- */
-function getRawTag(value) {
-  var isOwn = hasOwnProperty$8.call(value, symToStringTag$1),
-      tag = value[symToStringTag$1];
-
-  try {
-    value[symToStringTag$1] = undefined;
-    var unmasked = true;
-  } catch (e) {}
-
-  var result = nativeObjectToString$1.call(value);
-  if (unmasked) {
-    if (isOwn) {
-      value[symToStringTag$1] = tag;
-    } else {
-      delete value[symToStringTag$1];
-    }
-  }
-  return result;
-}
-
-/** Used for built-in method references. */
-var objectProto$a = Object.prototype;
-
-/**
- * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
- * of values.
- */
-var nativeObjectToString = objectProto$a.toString;
-
-/**
- * Converts `value` to a string using `Object.prototype.toString`.
- *
- * @private
- * @param {*} value The value to convert.
- * @returns {string} Returns the converted string.
- */
-function objectToString(value) {
-  return nativeObjectToString.call(value);
-}
-
-/** `Object#toString` result references. */
-var nullTag = '[object Null]',
-    undefinedTag = '[object Undefined]';
-
-/** Built-in value references. */
-var symToStringTag = Symbol ? Symbol.toStringTag : undefined;
-
-/**
- * The base implementation of `getTag` without fallbacks for buggy environments.
- *
- * @private
- * @param {*} value The value to query.
- * @returns {string} Returns the `toStringTag`.
- */
-function baseGetTag(value) {
-  if (value == null) {
-    return value === undefined ? undefinedTag : nullTag;
-  }
-  return (symToStringTag && symToStringTag in Object(value))
-    ? getRawTag(value)
-    : objectToString(value);
-}
-
-/**
- * Checks if `value` is object-like. A value is object-like if it's not `null`
- * and has a `typeof` result of "object".
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
- * @example
- *
- * _.isObjectLike({});
- * // => true
- *
- * _.isObjectLike([1, 2, 3]);
- * // => true
- *
- * _.isObjectLike(_.noop);
- * // => false
- *
- * _.isObjectLike(null);
- * // => false
- */
-function isObjectLike(value) {
-  return value != null && typeof value == 'object';
-}
-
-/**
- * Checks if `value` is classified as an `Array` object.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an array, else `false`.
- * @example
- *
- * _.isArray([1, 2, 3]);
- * // => true
- *
- * _.isArray(document.body.children);
- * // => false
- *
- * _.isArray('abc');
- * // => false
- *
- * _.isArray(_.noop);
- * // => false
- */
-var isArray = Array.isArray;
-
-/**
- * Checks if `value` is the
- * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
- * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an object, else `false`.
- * @example
- *
- * _.isObject({});
- * // => true
- *
- * _.isObject([1, 2, 3]);
- * // => true
- *
- * _.isObject(_.noop);
- * // => true
- *
- * _.isObject(null);
- * // => false
- */
-function isObject(value) {
-  var type = typeof value;
-  return value != null && (type == 'object' || type == 'function');
-}
-
-/** `Object#toString` result references. */
-var asyncTag = '[object AsyncFunction]',
-    funcTag$2 = '[object Function]',
-    genTag$1 = '[object GeneratorFunction]',
-    proxyTag = '[object Proxy]';
-
-/**
- * Checks if `value` is classified as a `Function` object.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a function, else `false`.
- * @example
- *
- * _.isFunction(_);
- * // => true
- *
- * _.isFunction(/abc/);
- * // => false
- */
-function isFunction(value) {
-  if (!isObject(value)) {
-    return false;
-  }
-  // The use of `Object#toString` avoids issues with the `typeof` operator
-  // in Safari 9 which returns 'object' for typed arrays and other constructors.
-  var tag = baseGetTag(value);
-  return tag == funcTag$2 || tag == genTag$1 || tag == asyncTag || tag == proxyTag;
-}
-
-/** Used to detect overreaching core-js shims. */
-var coreJsData = root['__core-js_shared__'];
-
-/** Used to detect methods masquerading as native. */
-var maskSrcKey = (function() {
-  var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || '');
-  return uid ? ('Symbol(src)_1.' + uid) : '';
-}());
-
-/**
- * Checks if `func` has its source masked.
- *
- * @private
- * @param {Function} func The function to check.
- * @returns {boolean} Returns `true` if `func` is masked, else `false`.
- */
-function isMasked(func) {
-  return !!maskSrcKey && (maskSrcKey in func);
-}
-
-/** Used for built-in method references. */
-var funcProto$1 = Function.prototype;
-
-/** Used to resolve the decompiled source of functions. */
-var funcToString$1 = funcProto$1.toString;
-
-/**
- * Converts `func` to its source code.
- *
- * @private
- * @param {Function} func The function to convert.
- * @returns {string} Returns the source code.
- */
-function toSource(func) {
-  if (func != null) {
-    try {
-      return funcToString$1.call(func);
-    } catch (e) {}
-    try {
-      return (func + '');
-    } catch (e) {}
-  }
-  return '';
-}
-
-/**
- * Used to match `RegExp`
- * [syntax characters](http://ecma-international.org/ecma-262/7.0/#sec-patterns).
- */
-var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
-
-/** Used to detect host constructors (Safari). */
-var reIsHostCtor = /^\[object .+?Constructor\]$/;
-
-/** Used for built-in method references. */
-var funcProto = Function.prototype,
-    objectProto$9 = Object.prototype;
-
-/** Used to resolve the decompiled source of functions. */
-var funcToString = funcProto.toString;
-
-/** Used to check objects for own properties. */
-var hasOwnProperty$7 = objectProto$9.hasOwnProperty;
-
-/** Used to detect if a method is native. */
-var reIsNative = RegExp('^' +
-  funcToString.call(hasOwnProperty$7).replace(reRegExpChar, '\\$&')
-  .replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$'
-);
-
-/**
- * The base implementation of `_.isNative` without bad shim checks.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a native function,
- *  else `false`.
- */
-function baseIsNative(value) {
-  if (!isObject(value) || isMasked(value)) {
-    return false;
-  }
-  var pattern = isFunction(value) ? reIsNative : reIsHostCtor;
-  return pattern.test(toSource(value));
-}
-
-/**
- * Gets the value at `key` of `object`.
- *
- * @private
- * @param {Object} [object] The object to query.
- * @param {string} key The key of the property to get.
- * @returns {*} Returns the property value.
- */
-function getValue(object, key) {
-  return object == null ? undefined : object[key];
-}
-
-/**
- * Gets the native function at `key` of `object`.
- *
- * @private
- * @param {Object} object The object to query.
- * @param {string} key The key of the method to get.
- * @returns {*} Returns the function if it's native, else `undefined`.
- */
-function getNative(object, key) {
-  var value = getValue(object, key);
-  return baseIsNative(value) ? value : undefined;
-}
-
-/* Built-in method references that are verified to be native. */
-var WeakMap = getNative(root, 'WeakMap');
-
-/** Built-in value references. */
-var objectCreate = Object.create;
-
-/**
- * The base implementation of `_.create` without support for assigning
- * properties to the created object.
- *
- * @private
- * @param {Object} proto The object to inherit from.
- * @returns {Object} Returns the new object.
- */
-var baseCreate = (function() {
-  function object() {}
-  return function(proto) {
-    if (!isObject(proto)) {
-      return {};
-    }
-    if (objectCreate) {
-      return objectCreate(proto);
-    }
-    object.prototype = proto;
-    var result = new object;
-    object.prototype = undefined;
-    return result;
-  };
-}());
-
-var defineProperty = (function() {
-  try {
-    var func = getNative(Object, 'defineProperty');
-    func({}, '', {});
-    return func;
-  } catch (e) {}
-}());
-
-/**
- * A specialized version of `_.forEach` for arrays without support for
- * iteratee shorthands.
- *
- * @private
- * @param {Array} [array] The array to iterate over.
- * @param {Function} iteratee The function invoked per iteration.
- * @returns {Array} Returns `array`.
- */
-function arrayEach(array, iteratee) {
-  var index = -1,
-      length = array == null ? 0 : array.length;
-
-  while (++index < length) {
-    if (iteratee(array[index], index, array) === false) {
-      break;
-    }
-  }
-  return array;
-}
-
-/** Used as references for various `Number` constants. */
-var MAX_SAFE_INTEGER$1 = 9007199254740991;
-
-/** Used to detect unsigned integer values. */
-var reIsUint = /^(?:0|[1-9]\d*)$/;
-
-/**
- * Checks if `value` is a valid array-like index.
- *
- * @private
- * @param {*} value The value to check.
- * @param {number} [length=MAX_SAFE_INTEGER] The upper bounds of a valid index.
- * @returns {boolean} Returns `true` if `value` is a valid index, else `false`.
- */
-function isIndex(value, length) {
-  var type = typeof value;
-  length = length == null ? MAX_SAFE_INTEGER$1 : length;
-
-  return !!length &&
-    (type == 'number' ||
-      (type != 'symbol' && reIsUint.test(value))) &&
-        (value > -1 && value % 1 == 0 && value < length);
-}
-
-/**
- * The base implementation of `assignValue` and `assignMergeValue` without
- * value checks.
- *
- * @private
- * @param {Object} object The object to modify.
- * @param {string} key The key of the property to assign.
- * @param {*} value The value to assign.
- */
-function baseAssignValue(object, key, value) {
-  if (key == '__proto__' && defineProperty) {
-    defineProperty(object, key, {
-      'configurable': true,
-      'enumerable': true,
-      'value': value,
-      'writable': true
-    });
-  } else {
-    object[key] = value;
-  }
-}
-
-/**
- * Performs a
- * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
- * comparison between two values to determine if they are equivalent.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to compare.
- * @param {*} other The other value to compare.
- * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
- * @example
- *
- * var object = { 'a': 1 };
- * var other = { 'a': 1 };
- *
- * _.eq(object, object);
- * // => true
- *
- * _.eq(object, other);
- * // => false
- *
- * _.eq('a', 'a');
- * // => true
- *
- * _.eq('a', Object('a'));
- * // => false
- *
- * _.eq(NaN, NaN);
- * // => true
- */
-function eq(value, other) {
-  return value === other || (value !== value && other !== other);
-}
-
-/** Used for built-in method references. */
-var objectProto$8 = Object.prototype;
-
-/** Used to check objects for own properties. */
-var hasOwnProperty$6 = objectProto$8.hasOwnProperty;
-
-/**
- * Assigns `value` to `key` of `object` if the existing value is not equivalent
- * using [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
- * for equality comparisons.
- *
- * @private
- * @param {Object} object The object to modify.
- * @param {string} key The key of the property to assign.
- * @param {*} value The value to assign.
- */
-function assignValue(object, key, value) {
-  var objValue = object[key];
-  if (!(hasOwnProperty$6.call(object, key) && eq(objValue, value)) ||
-      (value === undefined && !(key in object))) {
-    baseAssignValue(object, key, value);
-  }
-}
-
-/** Used as references for various `Number` constants. */
-var MAX_SAFE_INTEGER = 9007199254740991;
-
-/**
- * Checks if `value` is a valid array-like length.
- *
- * **Note:** This method is loosely based on
- * [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength).
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a valid length, else `false`.
- * @example
- *
- * _.isLength(3);
- * // => true
- *
- * _.isLength(Number.MIN_VALUE);
- * // => false
- *
- * _.isLength(Infinity);
- * // => false
- *
- * _.isLength('3');
- * // => false
- */
-function isLength(value) {
-  return typeof value == 'number' &&
-    value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
-}
-
-/**
- * Checks if `value` is array-like. A value is considered array-like if it's
- * not a function and has a `value.length` that's an integer greater than or
- * equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is array-like, else `false`.
- * @example
- *
- * _.isArrayLike([1, 2, 3]);
- * // => true
- *
- * _.isArrayLike(document.body.children);
- * // => true
- *
- * _.isArrayLike('abc');
- * // => true
- *
- * _.isArrayLike(_.noop);
- * // => false
- */
-function isArrayLike(value) {
-  return value != null && isLength(value.length) && !isFunction(value);
-}
-
-/** Used for built-in method references. */
-var objectProto$7 = Object.prototype;
-
-/**
- * Checks if `value` is likely a prototype object.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a prototype, else `false`.
- */
-function isPrototype(value) {
-  var Ctor = value && value.constructor,
-      proto = (typeof Ctor == 'function' && Ctor.prototype) || objectProto$7;
-
-  return value === proto;
-}
-
-/**
- * The base implementation of `_.times` without support for iteratee shorthands
- * or max array length checks.
- *
- * @private
- * @param {number} n The number of times to invoke `iteratee`.
- * @param {Function} iteratee The function invoked per iteration.
- * @returns {Array} Returns the array of results.
- */
-function baseTimes(n, iteratee) {
-  var index = -1,
-      result = Array(n);
-
-  while (++index < n) {
-    result[index] = iteratee(index);
-  }
-  return result;
-}
-
-/** `Object#toString` result references. */
-var argsTag$2 = '[object Arguments]';
-
-/**
- * The base implementation of `_.isArguments`.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an `arguments` object,
- */
-function baseIsArguments(value) {
-  return isObjectLike(value) && baseGetTag(value) == argsTag$2;
-}
-
-/** Used for built-in method references. */
-var objectProto$6 = Object.prototype;
-
-/** Used to check objects for own properties. */
-var hasOwnProperty$5 = objectProto$6.hasOwnProperty;
-
-/** Built-in value references. */
-var propertyIsEnumerable$1 = objectProto$6.propertyIsEnumerable;
-
-/**
- * Checks if `value` is likely an `arguments` object.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an `arguments` object,
- *  else `false`.
- * @example
- *
- * _.isArguments(function() { return arguments; }());
- * // => true
- *
- * _.isArguments([1, 2, 3]);
- * // => false
- */
-var isArguments = baseIsArguments(function() { return arguments; }()) ? baseIsArguments : function(value) {
-  return isObjectLike(value) && hasOwnProperty$5.call(value, 'callee') &&
-    !propertyIsEnumerable$1.call(value, 'callee');
-};
-
-/**
- * This method returns `false`.
- *
- * @static
- * @memberOf _
- * @since 4.13.0
- * @category Util
- * @returns {boolean} Returns `false`.
- * @example
- *
- * _.times(2, _.stubFalse);
- * // => [false, false]
- */
-function stubFalse() {
-  return false;
-}
-
-/** Detect free variable `exports`. */
-var freeExports$2 = typeof exports == 'object' && exports && !exports.nodeType && exports;
-
-/** Detect free variable `module`. */
-var freeModule$1 = freeExports$2 && typeof module == 'object' && module && !module.nodeType && module;
-
-/** Detect the popular CommonJS extension `module.exports`. */
-var moduleExports$1 = freeModule$1 && freeModule$1.exports === freeExports$2;
-
-/** Built-in value references. */
-var Buffer = moduleExports$1 ? root.Buffer : undefined;
-
-/* Built-in method references for those with the same name as other `lodash` methods. */
-var nativeIsBuffer = Buffer ? Buffer.isBuffer : undefined;
-
-/**
- * Checks if `value` is a buffer.
- *
- * @static
- * @memberOf _
- * @since 4.3.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a buffer, else `false`.
- * @example
- *
- * _.isBuffer(new Buffer(2));
- * // => true
- *
- * _.isBuffer(new Uint8Array(2));
- * // => false
- */
-var isBuffer = nativeIsBuffer || stubFalse;
-
-/** `Object#toString` result references. */
-var argsTag$1 = '[object Arguments]',
-    arrayTag$1 = '[object Array]',
-    boolTag$2 = '[object Boolean]',
-    dateTag$2 = '[object Date]',
-    errorTag$1 = '[object Error]',
-    funcTag$1 = '[object Function]',
-    mapTag$4 = '[object Map]',
-    numberTag$2 = '[object Number]',
-    objectTag$2 = '[object Object]',
-    regexpTag$2 = '[object RegExp]',
-    setTag$4 = '[object Set]',
-    stringTag$2 = '[object String]',
-    weakMapTag$2 = '[object WeakMap]';
-
-var arrayBufferTag$2 = '[object ArrayBuffer]',
-    dataViewTag$3 = '[object DataView]',
-    float32Tag$2 = '[object Float32Array]',
-    float64Tag$2 = '[object Float64Array]',
-    int8Tag$2 = '[object Int8Array]',
-    int16Tag$2 = '[object Int16Array]',
-    int32Tag$2 = '[object Int32Array]',
-    uint8Tag$2 = '[object Uint8Array]',
-    uint8ClampedTag$2 = '[object Uint8ClampedArray]',
-    uint16Tag$2 = '[object Uint16Array]',
-    uint32Tag$2 = '[object Uint32Array]';
-
-/** Used to identify `toStringTag` values of typed arrays. */
-var typedArrayTags = {};
-typedArrayTags[float32Tag$2] = typedArrayTags[float64Tag$2] =
-typedArrayTags[int8Tag$2] = typedArrayTags[int16Tag$2] =
-typedArrayTags[int32Tag$2] = typedArrayTags[uint8Tag$2] =
-typedArrayTags[uint8ClampedTag$2] = typedArrayTags[uint16Tag$2] =
-typedArrayTags[uint32Tag$2] = true;
-typedArrayTags[argsTag$1] = typedArrayTags[arrayTag$1] =
-typedArrayTags[arrayBufferTag$2] = typedArrayTags[boolTag$2] =
-typedArrayTags[dataViewTag$3] = typedArrayTags[dateTag$2] =
-typedArrayTags[errorTag$1] = typedArrayTags[funcTag$1] =
-typedArrayTags[mapTag$4] = typedArrayTags[numberTag$2] =
-typedArrayTags[objectTag$2] = typedArrayTags[regexpTag$2] =
-typedArrayTags[setTag$4] = typedArrayTags[stringTag$2] =
-typedArrayTags[weakMapTag$2] = false;
-
-/**
- * The base implementation of `_.isTypedArray` without Node.js optimizations.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a typed array, else `false`.
- */
-function baseIsTypedArray(value) {
-  return isObjectLike(value) &&
-    isLength(value.length) && !!typedArrayTags[baseGetTag(value)];
-}
-
-/**
- * The base implementation of `_.unary` without support for storing metadata.
- *
- * @private
- * @param {Function} func The function to cap arguments for.
- * @returns {Function} Returns the new capped function.
- */
-function baseUnary(func) {
-  return function(value) {
-    return func(value);
-  };
-}
-
-/** Detect free variable `exports`. */
-var freeExports$1 = typeof exports == 'object' && exports && !exports.nodeType && exports;
-
-/** Detect free variable `module`. */
-var freeModule = freeExports$1 && typeof module == 'object' && module && !module.nodeType && module;
-
-/** Detect the popular CommonJS extension `module.exports`. */
-var moduleExports = freeModule && freeModule.exports === freeExports$1;
-
-/** Detect free variable `process` from Node.js. */
-var freeProcess = moduleExports && freeGlobal.process;
-
-/** Used to access faster Node.js helpers. */
-var nodeUtil = (function() {
-  try {
-    // Use `util.types` for Node.js 10+.
-    var types = freeModule && freeModule.require && freeModule.require('util').types;
-
-    if (types) {
-      return types;
-    }
-
-    // Legacy `process.binding('util')` for Node.js < 10.
-    return freeProcess && freeProcess.binding && freeProcess.binding('util');
-  } catch (e) {}
-}());
-
-/* Node.js helper references. */
-var nodeIsTypedArray = nodeUtil && nodeUtil.isTypedArray;
-
-/**
- * Checks if `value` is classified as a typed array.
- *
- * @static
- * @memberOf _
- * @since 3.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a typed array, else `false`.
- * @example
- *
- * _.isTypedArray(new Uint8Array);
- * // => true
- *
- * _.isTypedArray([]);
- * // => false
- */
-var isTypedArray = nodeIsTypedArray ? baseUnary(nodeIsTypedArray) : baseIsTypedArray;
-
-/** Used for built-in method references. */
-var objectProto$5 = Object.prototype;
-
-/** Used to check objects for own properties. */
-var hasOwnProperty$4 = objectProto$5.hasOwnProperty;
-
-/**
- * Creates an array of the enumerable property names of the array-like `value`.
- *
- * @private
- * @param {*} value The value to query.
- * @param {boolean} inherited Specify returning inherited property names.
- * @returns {Array} Returns the array of property names.
- */
-function arrayLikeKeys(value, inherited) {
-  var isArr = isArray(value),
-      isArg = !isArr && isArguments(value),
-      isBuff = !isArr && !isArg && isBuffer(value),
-      isType = !isArr && !isArg && !isBuff && isTypedArray(value),
-      skipIndexes = isArr || isArg || isBuff || isType,
-      result = skipIndexes ? baseTimes(value.length, String) : [],
-      length = result.length;
-
-  for (var key in value) {
-    if ((hasOwnProperty$4.call(value, key)) &&
-        !(skipIndexes && (
-           // Safari 9 has enumerable `arguments.length` in strict mode.
-           key == 'length' ||
-           // Node.js 0.10 has enumerable non-index properties on buffers.
-           (isBuff && (key == 'offset' || key == 'parent')) ||
-           // PhantomJS 2 has enumerable non-index properties on typed arrays.
-           (isType && (key == 'buffer' || key == 'byteLength' || key == 'byteOffset')) ||
-           // Skip index properties.
-           isIndex(key, length)
-        ))) {
-      result.push(key);
-    }
-  }
-  return result;
-}
-
-/**
- * Creates a unary function that invokes `func` with its argument transformed.
- *
- * @private
- * @param {Function} func The function to wrap.
- * @param {Function} transform The argument transform.
- * @returns {Function} Returns the new function.
- */
-function overArg(func, transform) {
-  return function(arg) {
-    return func(transform(arg));
-  };
-}
-
-/* Built-in method references for those with the same name as other `lodash` methods. */
-var nativeKeys = overArg(Object.keys, Object);
-
-/** Used for built-in method references. */
-var objectProto$4 = Object.prototype;
-
-/** Used to check objects for own properties. */
-var hasOwnProperty$3 = objectProto$4.hasOwnProperty;
-
-/**
- * The base implementation of `_.keys` which doesn't treat sparse arrays as dense.
- *
- * @private
- * @param {Object} object The object to query.
- * @returns {Array} Returns the array of property names.
- */
-function baseKeys(object) {
-  if (!isPrototype(object)) {
-    return nativeKeys(object);
-  }
-  var result = [];
-  for (var key in Object(object)) {
-    if (hasOwnProperty$3.call(object, key) && key != 'constructor') {
-      result.push(key);
-    }
-  }
-  return result;
-}
-
-/**
- * Creates an array of the own enumerable property names of `object`.
- *
- * **Note:** Non-object values are coerced to objects. See the
- * [ES spec](http://ecma-international.org/ecma-262/7.0/#sec-object.keys)
- * for more details.
- *
- * @static
- * @since 0.1.0
- * @memberOf _
- * @category Object
- * @param {Object} object The object to query.
- * @returns {Array} Returns the array of property names.
- * @example
- *
- * function Foo() {
- *   this.a = 1;
- *   this.b = 2;
- * }
- *
- * Foo.prototype.c = 3;
- *
- * _.keys(new Foo);
- * // => ['a', 'b'] (iteration order is not guaranteed)
- *
- * _.keys('hi');
- * // => ['0', '1']
- */
-function keys(object) {
-  return isArrayLike(object) ? arrayLikeKeys(object) : baseKeys(object);
-}
-
-/* Built-in method references that are verified to be native. */
-var nativeCreate = getNative(Object, 'create');
-
-/**
- * Removes all key-value entries from the hash.
- *
- * @private
- * @name clear
- * @memberOf Hash
- */
-function hashClear() {
-  this.__data__ = nativeCreate ? nativeCreate(null) : {};
-  this.size = 0;
-}
-
-/**
- * Removes `key` and its value from the hash.
- *
- * @private
- * @name delete
- * @memberOf Hash
- * @param {Object} hash The hash to modify.
- * @param {string} key The key of the value to remove.
- * @returns {boolean} Returns `true` if the entry was removed, else `false`.
- */
-function hashDelete(key) {
-  var result = this.has(key) && delete this.__data__[key];
-  this.size -= result ? 1 : 0;
-  return result;
-}
-
-/** Used to stand-in for `undefined` hash values. */
-var HASH_UNDEFINED$1 = '__lodash_hash_undefined__';
-
-/** Used for built-in method references. */
-var objectProto$3 = Object.prototype;
-
-/** Used to check objects for own properties. */
-var hasOwnProperty$2 = objectProto$3.hasOwnProperty;
-
-/**
- * Gets the hash value for `key`.
- *
- * @private
- * @name get
- * @memberOf Hash
- * @param {string} key The key of the value to get.
- * @returns {*} Returns the entry value.
- */
-function hashGet(key) {
-  var data = this.__data__;
-  if (nativeCreate) {
-    var result = data[key];
-    return result === HASH_UNDEFINED$1 ? undefined : result;
-  }
-  return hasOwnProperty$2.call(data, key) ? data[key] : undefined;
-}
-
-/** Used for built-in method references. */
-var objectProto$2 = Object.prototype;
-
-/** Used to check objects for own properties. */
-var hasOwnProperty$1 = objectProto$2.hasOwnProperty;
-
-/**
- * Checks if a hash value for `key` exists.
- *
- * @private
- * @name has
- * @memberOf Hash
- * @param {string} key The key of the entry to check.
- * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
- */
-function hashHas(key) {
-  var data = this.__data__;
-  return nativeCreate ? (data[key] !== undefined) : hasOwnProperty$1.call(data, key);
-}
-
-/** Used to stand-in for `undefined` hash values. */
-var HASH_UNDEFINED = '__lodash_hash_undefined__';
-
-/**
- * Sets the hash `key` to `value`.
- *
- * @private
- * @name set
- * @memberOf Hash
- * @param {string} key The key of the value to set.
- * @param {*} value The value to set.
- * @returns {Object} Returns the hash instance.
- */
-function hashSet(key, value) {
-  var data = this.__data__;
-  this.size += this.has(key) ? 0 : 1;
-  data[key] = (nativeCreate && value === undefined) ? HASH_UNDEFINED : value;
-  return this;
-}
-
-/**
- * Creates a hash object.
- *
- * @private
- * @constructor
- * @param {Array} [entries] The key-value pairs to cache.
- */
-function Hash(entries) {
-  var index = -1,
-      length = entries == null ? 0 : entries.length;
-
-  this.clear();
-  while (++index < length) {
-    var entry = entries[index];
-    this.set(entry[0], entry[1]);
-  }
-}
-
-// Add methods to `Hash`.
-Hash.prototype.clear = hashClear;
-Hash.prototype['delete'] = hashDelete;
-Hash.prototype.get = hashGet;
-Hash.prototype.has = hashHas;
-Hash.prototype.set = hashSet;
-
-/**
- * Removes all key-value entries from the list cache.
- *
- * @private
- * @name clear
- * @memberOf ListCache
- */
-function listCacheClear() {
-  this.__data__ = [];
-  this.size = 0;
-}
-
-/**
- * Gets the index at which the `key` is found in `array` of key-value pairs.
- *
- * @private
- * @param {Array} array The array to inspect.
- * @param {*} key The key to search for.
- * @returns {number} Returns the index of the matched value, else `-1`.
- */
-function assocIndexOf(array, key) {
-  var length = array.length;
-  while (length--) {
-    if (eq(array[length][0], key)) {
-      return length;
-    }
-  }
-  return -1;
-}
-
-/** Used for built-in method references. */
-var arrayProto = Array.prototype;
-
-/** Built-in value references. */
-var splice = arrayProto.splice;
-
-/**
- * Removes `key` and its value from the list cache.
- *
- * @private
- * @name delete
- * @memberOf ListCache
- * @param {string} key The key of the value to remove.
- * @returns {boolean} Returns `true` if the entry was removed, else `false`.
- */
-function listCacheDelete(key) {
-  var data = this.__data__,
-      index = assocIndexOf(data, key);
-
-  if (index < 0) {
-    return false;
-  }
-  var lastIndex = data.length - 1;
-  if (index == lastIndex) {
-    data.pop();
-  } else {
-    splice.call(data, index, 1);
-  }
-  --this.size;
-  return true;
-}
-
-/**
- * Gets the list cache value for `key`.
- *
- * @private
- * @name get
- * @memberOf ListCache
- * @param {string} key The key of the value to get.
- * @returns {*} Returns the entry value.
- */
-function listCacheGet(key) {
-  var data = this.__data__,
-      index = assocIndexOf(data, key);
-
-  return index < 0 ? undefined : data[index][1];
-}
-
-/**
- * Checks if a list cache value for `key` exists.
- *
- * @private
- * @name has
- * @memberOf ListCache
- * @param {string} key The key of the entry to check.
- * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
- */
-function listCacheHas(key) {
-  return assocIndexOf(this.__data__, key) > -1;
-}
-
-/**
- * Sets the list cache `key` to `value`.
- *
- * @private
- * @name set
- * @memberOf ListCache
- * @param {string} key The key of the value to set.
- * @param {*} value The value to set.
- * @returns {Object} Returns the list cache instance.
- */
-function listCacheSet(key, value) {
-  var data = this.__data__,
-      index = assocIndexOf(data, key);
-
-  if (index < 0) {
-    ++this.size;
-    data.push([key, value]);
-  } else {
-    data[index][1] = value;
-  }
-  return this;
-}
-
-/**
- * Creates an list cache object.
- *
- * @private
- * @constructor
- * @param {Array} [entries] The key-value pairs to cache.
- */
-function ListCache(entries) {
-  var index = -1,
-      length = entries == null ? 0 : entries.length;
-
-  this.clear();
-  while (++index < length) {
-    var entry = entries[index];
-    this.set(entry[0], entry[1]);
-  }
-}
-
-// Add methods to `ListCache`.
-ListCache.prototype.clear = listCacheClear;
-ListCache.prototype['delete'] = listCacheDelete;
-ListCache.prototype.get = listCacheGet;
-ListCache.prototype.has = listCacheHas;
-ListCache.prototype.set = listCacheSet;
-
-/* Built-in method references that are verified to be native. */
-var Map$1 = getNative(root, 'Map');
-
-/**
- * Removes all key-value entries from the map.
- *
- * @private
- * @name clear
- * @memberOf MapCache
- */
-function mapCacheClear() {
-  this.size = 0;
-  this.__data__ = {
-    'hash': new Hash,
-    'map': new (Map$1 || ListCache),
-    'string': new Hash
-  };
-}
-
-/**
- * Checks if `value` is suitable for use as unique object key.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is suitable, else `false`.
- */
-function isKeyable(value) {
-  var type = typeof value;
-  return (type == 'string' || type == 'number' || type == 'symbol' || type == 'boolean')
-    ? (value !== '__proto__')
-    : (value === null);
-}
-
-/**
- * Gets the data for `map`.
- *
- * @private
- * @param {Object} map The map to query.
- * @param {string} key The reference key.
- * @returns {*} Returns the map data.
- */
-function getMapData(map, key) {
-  var data = map.__data__;
-  return isKeyable(key)
-    ? data[typeof key == 'string' ? 'string' : 'hash']
-    : data.map;
-}
-
-/**
- * Removes `key` and its value from the map.
- *
- * @private
- * @name delete
- * @memberOf MapCache
- * @param {string} key The key of the value to remove.
- * @returns {boolean} Returns `true` if the entry was removed, else `false`.
- */
-function mapCacheDelete(key) {
-  var result = getMapData(this, key)['delete'](key);
-  this.size -= result ? 1 : 0;
-  return result;
-}
-
-/**
- * Gets the map value for `key`.
- *
- * @private
- * @name get
- * @memberOf MapCache
- * @param {string} key The key of the value to get.
- * @returns {*} Returns the entry value.
- */
-function mapCacheGet(key) {
-  return getMapData(this, key).get(key);
-}
-
-/**
- * Checks if a map value for `key` exists.
- *
- * @private
- * @name has
- * @memberOf MapCache
- * @param {string} key The key of the entry to check.
- * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
- */
-function mapCacheHas(key) {
-  return getMapData(this, key).has(key);
-}
-
-/**
- * Sets the map `key` to `value`.
- *
- * @private
- * @name set
- * @memberOf MapCache
- * @param {string} key The key of the value to set.
- * @param {*} value The value to set.
- * @returns {Object} Returns the map cache instance.
- */
-function mapCacheSet(key, value) {
-  var data = getMapData(this, key),
-      size = data.size;
-
-  data.set(key, value);
-  this.size += data.size == size ? 0 : 1;
-  return this;
-}
-
-/**
- * Creates a map cache object to store key-value pairs.
- *
- * @private
- * @constructor
- * @param {Array} [entries] The key-value pairs to cache.
- */
-function MapCache(entries) {
-  var index = -1,
-      length = entries == null ? 0 : entries.length;
-
-  this.clear();
-  while (++index < length) {
-    var entry = entries[index];
-    this.set(entry[0], entry[1]);
-  }
-}
-
-// Add methods to `MapCache`.
-MapCache.prototype.clear = mapCacheClear;
-MapCache.prototype['delete'] = mapCacheDelete;
-MapCache.prototype.get = mapCacheGet;
-MapCache.prototype.has = mapCacheHas;
-MapCache.prototype.set = mapCacheSet;
-
-/**
- * Appends the elements of `values` to `array`.
- *
- * @private
- * @param {Array} array The array to modify.
- * @param {Array} values The values to append.
- * @returns {Array} Returns `array`.
- */
-function arrayPush(array, values) {
-  var index = -1,
-      length = values.length,
-      offset = array.length;
-
-  while (++index < length) {
-    array[offset + index] = values[index];
-  }
-  return array;
-}
-
-/** Built-in value references. */
-var getPrototype = overArg(Object.getPrototypeOf, Object);
-
-/**
- * Removes all key-value entries from the stack.
- *
- * @private
- * @name clear
- * @memberOf Stack
- */
-function stackClear() {
-  this.__data__ = new ListCache;
-  this.size = 0;
-}
-
-/**
- * Removes `key` and its value from the stack.
- *
- * @private
- * @name delete
- * @memberOf Stack
- * @param {string} key The key of the value to remove.
- * @returns {boolean} Returns `true` if the entry was removed, else `false`.
- */
-function stackDelete(key) {
-  var data = this.__data__,
-      result = data['delete'](key);
-
-  this.size = data.size;
-  return result;
-}
-
-/**
- * Gets the stack value for `key`.
- *
- * @private
- * @name get
- * @memberOf Stack
- * @param {string} key The key of the value to get.
- * @returns {*} Returns the entry value.
- */
-function stackGet(key) {
-  return this.__data__.get(key);
-}
-
-/**
- * Checks if a stack value for `key` exists.
- *
- * @private
- * @name has
- * @memberOf Stack
- * @param {string} key The key of the entry to check.
- * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
- */
-function stackHas(key) {
-  return this.__data__.has(key);
-}
-
-/** Used as the size to enable large array optimizations. */
-var LARGE_ARRAY_SIZE = 200;
-
-/**
- * Sets the stack `key` to `value`.
- *
- * @private
- * @name set
- * @memberOf Stack
- * @param {string} key The key of the value to set.
- * @param {*} value The value to set.
- * @returns {Object} Returns the stack cache instance.
- */
-function stackSet(key, value) {
-  var data = this.__data__;
-  if (data instanceof ListCache) {
-    var pairs = data.__data__;
-    if (!Map$1 || (pairs.length < LARGE_ARRAY_SIZE - 1)) {
-      pairs.push([key, value]);
-      this.size = ++data.size;
-      return this;
-    }
-    data = this.__data__ = new MapCache(pairs);
-  }
-  data.set(key, value);
-  this.size = data.size;
-  return this;
-}
-
-/**
- * Creates a stack cache object to store key-value pairs.
- *
- * @private
- * @constructor
- * @param {Array} [entries] The key-value pairs to cache.
- */
-function Stack(entries) {
-  var data = this.__data__ = new ListCache(entries);
-  this.size = data.size;
-}
-
-// Add methods to `Stack`.
-Stack.prototype.clear = stackClear;
-Stack.prototype['delete'] = stackDelete;
-Stack.prototype.get = stackGet;
-Stack.prototype.has = stackHas;
-Stack.prototype.set = stackSet;
-
-/** Detect free variable `exports`. */
-var freeExports = typeof exports == 'object' && exports && !exports.nodeType && exports;
-
-/** Detect free variable `module`. */
-freeExports && typeof module == 'object' && module && !module.nodeType && module;
-
-/**
- * Creates a clone of  `buffer`.
- *
- * @private
- * @param {Buffer} buffer The buffer to clone.
- * @param {boolean} [isDeep] Specify a deep clone.
- * @returns {Buffer} Returns the cloned buffer.
- */
-function cloneBuffer(buffer, isDeep) {
-  {
-    return buffer.slice();
-  }
-}
-
-/**
- * A specialized version of `_.filter` for arrays without support for
- * iteratee shorthands.
- *
- * @private
- * @param {Array} [array] The array to iterate over.
- * @param {Function} predicate The function invoked per iteration.
- * @returns {Array} Returns the new filtered array.
- */
-function arrayFilter(array, predicate) {
-  var index = -1,
-      length = array == null ? 0 : array.length,
-      resIndex = 0,
-      result = [];
-
-  while (++index < length) {
-    var value = array[index];
-    if (predicate(value, index, array)) {
-      result[resIndex++] = value;
-    }
-  }
-  return result;
-}
-
-/**
- * This method returns a new empty array.
- *
- * @static
- * @memberOf _
- * @since 4.13.0
- * @category Util
- * @returns {Array} Returns the new empty array.
- * @example
- *
- * var arrays = _.times(2, _.stubArray);
- *
- * console.log(arrays);
- * // => [[], []]
- *
- * console.log(arrays[0] === arrays[1]);
- * // => false
- */
-function stubArray() {
-  return [];
-}
-
-/** Used for built-in method references. */
-var objectProto$1 = Object.prototype;
-
-/** Built-in value references. */
-var propertyIsEnumerable = objectProto$1.propertyIsEnumerable;
-
-/* Built-in method references for those with the same name as other `lodash` methods. */
-var nativeGetSymbols = Object.getOwnPropertySymbols;
-
-/**
- * Creates an array of the own enumerable symbols of `object`.
- *
- * @private
- * @param {Object} object The object to query.
- * @returns {Array} Returns the array of symbols.
- */
-var getSymbols = !nativeGetSymbols ? stubArray : function(object) {
-  if (object == null) {
-    return [];
-  }
-  object = Object(object);
-  return arrayFilter(nativeGetSymbols(object), function(symbol) {
-    return propertyIsEnumerable.call(object, symbol);
-  });
-};
-
-/**
- * The base implementation of `getAllKeys` and `getAllKeysIn` which uses
- * `keysFunc` and `symbolsFunc` to get the enumerable property names and
- * symbols of `object`.
- *
- * @private
- * @param {Object} object The object to query.
- * @param {Function} keysFunc The function to get the keys of `object`.
- * @param {Function} symbolsFunc The function to get the symbols of `object`.
- * @returns {Array} Returns the array of property names and symbols.
- */
-function baseGetAllKeys(object, keysFunc, symbolsFunc) {
-  var result = keysFunc(object);
-  return isArray(object) ? result : arrayPush(result, symbolsFunc(object));
-}
-
-/**
- * Creates an array of own enumerable property names and symbols of `object`.
- *
- * @private
- * @param {Object} object The object to query.
- * @returns {Array} Returns the array of property names and symbols.
- */
-function getAllKeys(object) {
-  return baseGetAllKeys(object, keys, getSymbols);
-}
-
-/* Built-in method references that are verified to be native. */
-var DataView$1 = getNative(root, 'DataView');
-
-/* Built-in method references that are verified to be native. */
-var Promise$1 = getNative(root, 'Promise');
-
-/* Built-in method references that are verified to be native. */
-var Set$1 = getNative(root, 'Set');
-
-/** `Object#toString` result references. */
-var mapTag$3 = '[object Map]',
-    objectTag$1 = '[object Object]',
-    promiseTag = '[object Promise]',
-    setTag$3 = '[object Set]',
-    weakMapTag$1 = '[object WeakMap]';
-
-var dataViewTag$2 = '[object DataView]';
-
-/** Used to detect maps, sets, and weakmaps. */
-var dataViewCtorString = toSource(DataView$1),
-    mapCtorString = toSource(Map$1),
-    promiseCtorString = toSource(Promise$1),
-    setCtorString = toSource(Set$1),
-    weakMapCtorString = toSource(WeakMap);
-
-/**
- * Gets the `toStringTag` of `value`.
- *
- * @private
- * @param {*} value The value to query.
- * @returns {string} Returns the `toStringTag`.
- */
-var getTag = baseGetTag;
-
-// Fallback for data views, maps, sets, and weak maps in IE 11 and promises in Node.js < 6.
-if ((DataView$1 && getTag(new DataView$1(new ArrayBuffer(1))) != dataViewTag$2) ||
-    (Map$1 && getTag(new Map$1) != mapTag$3) ||
-    (Promise$1 && getTag(Promise$1.resolve()) != promiseTag) ||
-    (Set$1 && getTag(new Set$1) != setTag$3) ||
-    (WeakMap && getTag(new WeakMap) != weakMapTag$1)) {
-  getTag = function(value) {
-    var result = baseGetTag(value),
-        Ctor = result == objectTag$1 ? value.constructor : undefined,
-        ctorString = Ctor ? toSource(Ctor) : '';
-
-    if (ctorString) {
-      switch (ctorString) {
-        case dataViewCtorString: return dataViewTag$2;
-        case mapCtorString: return mapTag$3;
-        case promiseCtorString: return promiseTag;
-        case setCtorString: return setTag$3;
-        case weakMapCtorString: return weakMapTag$1;
-      }
-    }
-    return result;
-  };
-}
-
-/** Used for built-in method references. */
-var objectProto = Object.prototype;
-
-/** Used to check objects for own properties. */
-var hasOwnProperty = objectProto.hasOwnProperty;
-
-/**
- * Initializes an array clone.
- *
- * @private
- * @param {Array} array The array to clone.
- * @returns {Array} Returns the initialized clone.
- */
-function initCloneArray(array) {
-  var length = array.length,
-      result = new array.constructor(length);
-
-  // Add properties assigned by `RegExp#exec`.
-  if (length && typeof array[0] == 'string' && hasOwnProperty.call(array, 'index')) {
-    result.index = array.index;
-    result.input = array.input;
-  }
-  return result;
-}
-
-/** Built-in value references. */
-var Uint8Array$1 = root.Uint8Array;
-
-/**
- * Creates a clone of `arrayBuffer`.
- *
- * @private
- * @param {ArrayBuffer} arrayBuffer The array buffer to clone.
- * @returns {ArrayBuffer} Returns the cloned array buffer.
- */
-function cloneArrayBuffer(arrayBuffer) {
-  var result = new arrayBuffer.constructor(arrayBuffer.byteLength);
-  new Uint8Array$1(result).set(new Uint8Array$1(arrayBuffer));
-  return result;
-}
-
-/**
- * Creates a clone of `dataView`.
- *
- * @private
- * @param {Object} dataView The data view to clone.
- * @param {boolean} [isDeep] Specify a deep clone.
- * @returns {Object} Returns the cloned data view.
- */
-function cloneDataView(dataView, isDeep) {
-  var buffer = cloneArrayBuffer(dataView.buffer) ;
-  return new dataView.constructor(buffer, dataView.byteOffset, dataView.byteLength);
-}
-
-/** Used to match `RegExp` flags from their coerced string values. */
-var reFlags = /\w*$/;
-
-/**
- * Creates a clone of `regexp`.
- *
- * @private
- * @param {Object} regexp The regexp to clone.
- * @returns {Object} Returns the cloned regexp.
- */
-function cloneRegExp(regexp) {
-  var result = new regexp.constructor(regexp.source, reFlags.exec(regexp));
-  result.lastIndex = regexp.lastIndex;
-  return result;
-}
-
-/** Used to convert symbols to primitives and strings. */
-var symbolProto = Symbol ? Symbol.prototype : undefined,
-    symbolValueOf = symbolProto ? symbolProto.valueOf : undefined;
-
-/**
- * Creates a clone of the `symbol` object.
- *
- * @private
- * @param {Object} symbol The symbol object to clone.
- * @returns {Object} Returns the cloned symbol object.
- */
-function cloneSymbol(symbol) {
-  return symbolValueOf ? Object(symbolValueOf.call(symbol)) : {};
-}
-
-/**
- * Creates a clone of `typedArray`.
- *
- * @private
- * @param {Object} typedArray The typed array to clone.
- * @param {boolean} [isDeep] Specify a deep clone.
- * @returns {Object} Returns the cloned typed array.
- */
-function cloneTypedArray(typedArray, isDeep) {
-  var buffer = cloneArrayBuffer(typedArray.buffer) ;
-  return new typedArray.constructor(buffer, typedArray.byteOffset, typedArray.length);
-}
-
-/** `Object#toString` result references. */
-var boolTag$1 = '[object Boolean]',
-    dateTag$1 = '[object Date]',
-    mapTag$2 = '[object Map]',
-    numberTag$1 = '[object Number]',
-    regexpTag$1 = '[object RegExp]',
-    setTag$2 = '[object Set]',
-    stringTag$1 = '[object String]',
-    symbolTag$1 = '[object Symbol]';
-
-var arrayBufferTag$1 = '[object ArrayBuffer]',
-    dataViewTag$1 = '[object DataView]',
-    float32Tag$1 = '[object Float32Array]',
-    float64Tag$1 = '[object Float64Array]',
-    int8Tag$1 = '[object Int8Array]',
-    int16Tag$1 = '[object Int16Array]',
-    int32Tag$1 = '[object Int32Array]',
-    uint8Tag$1 = '[object Uint8Array]',
-    uint8ClampedTag$1 = '[object Uint8ClampedArray]',
-    uint16Tag$1 = '[object Uint16Array]',
-    uint32Tag$1 = '[object Uint32Array]';
-
-/**
- * Initializes an object clone based on its `toStringTag`.
- *
- * **Note:** This function only supports cloning values with tags of
- * `Boolean`, `Date`, `Error`, `Map`, `Number`, `RegExp`, `Set`, or `String`.
- *
- * @private
- * @param {Object} object The object to clone.
- * @param {string} tag The `toStringTag` of the object to clone.
- * @param {boolean} [isDeep] Specify a deep clone.
- * @returns {Object} Returns the initialized clone.
- */
-function initCloneByTag(object, tag, isDeep) {
-  var Ctor = object.constructor;
-  switch (tag) {
-    case arrayBufferTag$1:
-      return cloneArrayBuffer(object);
-
-    case boolTag$1:
-    case dateTag$1:
-      return new Ctor(+object);
-
-    case dataViewTag$1:
-      return cloneDataView(object);
-
-    case float32Tag$1: case float64Tag$1:
-    case int8Tag$1: case int16Tag$1: case int32Tag$1:
-    case uint8Tag$1: case uint8ClampedTag$1: case uint16Tag$1: case uint32Tag$1:
-      return cloneTypedArray(object);
-
-    case mapTag$2:
-      return new Ctor;
-
-    case numberTag$1:
-    case stringTag$1:
-      return new Ctor(object);
-
-    case regexpTag$1:
-      return cloneRegExp(object);
-
-    case setTag$2:
-      return new Ctor;
-
-    case symbolTag$1:
-      return cloneSymbol(object);
-  }
-}
-
-/**
- * Initializes an object clone.
- *
- * @private
- * @param {Object} object The object to clone.
- * @returns {Object} Returns the initialized clone.
- */
-function initCloneObject(object) {
-  return (typeof object.constructor == 'function' && !isPrototype(object))
-    ? baseCreate(getPrototype(object))
-    : {};
-}
-
-/** `Object#toString` result references. */
-var mapTag$1 = '[object Map]';
-
-/**
- * The base implementation of `_.isMap` without Node.js optimizations.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a map, else `false`.
- */
-function baseIsMap(value) {
-  return isObjectLike(value) && getTag(value) == mapTag$1;
-}
-
-/* Node.js helper references. */
-var nodeIsMap = nodeUtil && nodeUtil.isMap;
-
-/**
- * Checks if `value` is classified as a `Map` object.
- *
- * @static
- * @memberOf _
- * @since 4.3.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a map, else `false`.
- * @example
- *
- * _.isMap(new Map);
- * // => true
- *
- * _.isMap(new WeakMap);
- * // => false
- */
-var isMap = nodeIsMap ? baseUnary(nodeIsMap) : baseIsMap;
-
-/** `Object#toString` result references. */
-var setTag$1 = '[object Set]';
-
-/**
- * The base implementation of `_.isSet` without Node.js optimizations.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a set, else `false`.
- */
-function baseIsSet(value) {
-  return isObjectLike(value) && getTag(value) == setTag$1;
-}
-
-/* Node.js helper references. */
-var nodeIsSet = nodeUtil && nodeUtil.isSet;
-
-/**
- * Checks if `value` is classified as a `Set` object.
- *
- * @static
- * @memberOf _
- * @since 4.3.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a set, else `false`.
- * @example
- *
- * _.isSet(new Set);
- * // => true
- *
- * _.isSet(new WeakSet);
- * // => false
- */
-var isSet = nodeIsSet ? baseUnary(nodeIsSet) : baseIsSet;
-
-/** `Object#toString` result references. */
-var argsTag = '[object Arguments]',
-    arrayTag = '[object Array]',
-    boolTag = '[object Boolean]',
-    dateTag = '[object Date]',
-    errorTag = '[object Error]',
-    funcTag = '[object Function]',
-    genTag = '[object GeneratorFunction]',
-    mapTag = '[object Map]',
-    numberTag = '[object Number]',
-    objectTag = '[object Object]',
-    regexpTag = '[object RegExp]',
-    setTag = '[object Set]',
-    stringTag = '[object String]',
-    symbolTag = '[object Symbol]',
-    weakMapTag = '[object WeakMap]';
-
-var arrayBufferTag = '[object ArrayBuffer]',
-    dataViewTag = '[object DataView]',
-    float32Tag = '[object Float32Array]',
-    float64Tag = '[object Float64Array]',
-    int8Tag = '[object Int8Array]',
-    int16Tag = '[object Int16Array]',
-    int32Tag = '[object Int32Array]',
-    uint8Tag = '[object Uint8Array]',
-    uint8ClampedTag = '[object Uint8ClampedArray]',
-    uint16Tag = '[object Uint16Array]',
-    uint32Tag = '[object Uint32Array]';
-
-/** Used to identify `toStringTag` values supported by `_.clone`. */
-var cloneableTags = {};
-cloneableTags[argsTag] = cloneableTags[arrayTag] =
-cloneableTags[arrayBufferTag] = cloneableTags[dataViewTag] =
-cloneableTags[boolTag] = cloneableTags[dateTag] =
-cloneableTags[float32Tag] = cloneableTags[float64Tag] =
-cloneableTags[int8Tag] = cloneableTags[int16Tag] =
-cloneableTags[int32Tag] = cloneableTags[mapTag] =
-cloneableTags[numberTag] = cloneableTags[objectTag] =
-cloneableTags[regexpTag] = cloneableTags[setTag] =
-cloneableTags[stringTag] = cloneableTags[symbolTag] =
-cloneableTags[uint8Tag] = cloneableTags[uint8ClampedTag] =
-cloneableTags[uint16Tag] = cloneableTags[uint32Tag] = true;
-cloneableTags[errorTag] = cloneableTags[funcTag] =
-cloneableTags[weakMapTag] = false;
-
-/**
- * The base implementation of `_.clone` and `_.cloneDeep` which tracks
- * traversed objects.
- *
- * @private
- * @param {*} value The value to clone.
- * @param {boolean} bitmask The bitmask flags.
- *  1 - Deep clone
- *  2 - Flatten inherited properties
- *  4 - Clone symbols
- * @param {Function} [customizer] The function to customize cloning.
- * @param {string} [key] The key of `value`.
- * @param {Object} [object] The parent object of `value`.
- * @param {Object} [stack] Tracks traversed objects and their clone counterparts.
- * @returns {*} Returns the cloned value.
- */
-function baseClone(value, bitmask, customizer, key, object, stack) {
-  var result;
-  if (result !== undefined) {
-    return result;
-  }
-  if (!isObject(value)) {
-    return value;
-  }
-  var isArr = isArray(value);
-  if (isArr) {
-    result = initCloneArray(value);
-  } else {
-    var tag = getTag(value),
-        isFunc = tag == funcTag || tag == genTag;
-
-    if (isBuffer(value)) {
-      return cloneBuffer(value);
-    }
-    if (tag == objectTag || tag == argsTag || (isFunc && !object)) {
-      result = (isFunc) ? {} : initCloneObject(value);
-    } else {
-      if (!cloneableTags[tag]) {
-        return object ? value : {};
-      }
-      result = initCloneByTag(value, tag);
-    }
-  }
-  // Check for circular references and return its corresponding clone.
-  stack || (stack = new Stack);
-  var stacked = stack.get(value);
-  if (stacked) {
-    return stacked;
-  }
-  stack.set(value, result);
-
-  if (isSet(value)) {
-    value.forEach(function(subValue) {
-      result.add(baseClone(subValue, bitmask, customizer, subValue, value, stack));
-    });
-  } else if (isMap(value)) {
-    value.forEach(function(subValue, key) {
-      result.set(key, baseClone(subValue, bitmask, customizer, key, value, stack));
-    });
-  }
-
-  var keysFunc = (getAllKeys)
-    ;
-
-  var props = isArr ? undefined : keysFunc(value);
-  arrayEach(props || value, function(subValue, key) {
-    if (props) {
-      key = subValue;
-      subValue = value[key];
-    }
-    // Recursively populate clone (susceptible to call stack limits).
-    assignValue(result, key, baseClone(subValue, bitmask, customizer, key, value, stack));
-  });
-  return result;
-}
-
-/** Used to compose bitmasks for cloning. */
-var CLONE_DEEP_FLAG = 1,
-    CLONE_SYMBOLS_FLAG = 4;
-
-/**
- * This method is like `_.clone` except that it recursively clones `value`.
- *
- * @static
- * @memberOf _
- * @since 1.0.0
- * @category Lang
- * @param {*} value The value to recursively clone.
- * @returns {*} Returns the deep cloned value.
- * @see _.clone
- * @example
- *
- * var objects = [{ 'a': 1 }, { 'b': 2 }];
- *
- * var deep = _.cloneDeep(objects);
- * console.log(deep[0] === objects[0]);
- * // => false
- */
-function cloneDeep(value) {
-  return baseClone(value, CLONE_DEEP_FLAG | CLONE_SYMBOLS_FLAG);
-}
-
 var __rest = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -2345,25 +328,13 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 class ObjectHelper {
-    static safeStringify(obj, indent = 2) {
-        const seen = new WeakSet();
-        return JSON.stringify(obj, (_key, value) => {
-            if (typeof value === 'object' && value !== null) {
-                if (seen.has(value)) {
-                    return undefined;
-                }
-                seen.add(value);
-            }
-            return value;
-        }, indent);
-    }
     static generateUUID() {
         return Math.random().toString(36).substr(2, 9);
     }
     static clone(objOrObjs) {
         const cloneObject = (obj) => {
-            const rest = __rest(obj, ["_store", "_elementRef", "totalWidth", "totalHeight"]);
-            return cloneDeep(rest);
+            const remainingProps = __rest(obj, ["_store", "_elementRef", "totalWidth", "totalHeight"]);
+            return structuredClone(remainingProps);
         };
         if (Array.isArray(objOrObjs)) {
             return objOrObjs.map(cloneObject);
@@ -2483,7 +454,7 @@ class KritzelBaseObject {
     get centerY() {
         return this.translateY + this.totalHeight / 2;
     }
-    constructor(store) {
+    constructor() {
         this.__class__ = 'KritzelBaseObject';
         this.visible = true;
         this.borderWidth = 0;
@@ -2496,9 +467,14 @@ class KritzelBaseObject {
         this.isMounted = false;
         this.zIndex = 0;
         this.debugInfoVisible = false;
-        this._store = store;
         this.id = this.generateId();
     }
+    static create(store) {
+        const object = new KritzelBaseObject();
+        object._store = store;
+        object.zIndex = store.currentZIndex;
+        return object;
+    }
     mount(element) {
         if (this.isMounted) {
             return;
@@ -2557,12 +533,8 @@ class KritzelBaseObject {
 }
 
 class KritzelPath extends KritzelBaseObject {
-    get viewBox() {
-        return `${this.x} ${this.y} ${this.width} ${this.height}`;
-    }
-    constructor(store, options) {
-        var _a, _b, _c, _d, _e, _f;
-        super(store);
+    constructor() {
+        super(...arguments);
         this.__class__ = 'KritzelPath';
         this.stroke = 'none';
         this.lineSlack = 0.5;
@@ -2573,16 +545,26 @@ class KritzelPath extends KritzelBaseObject {
         this.scale = 1;
         this.visible = true;
         this.debugInfoVisible = true;
-        this.options = options;
-        this.points = (_a = options === null || options === void 0 ? void 0 : options.points) !== null && _a !== void 0 ? _a : [];
-        this.translateX = (_b = options === null || options === void 0 ? void 0 : options.translateX) !== null && _b !== void 0 ? _b : 0;
-        this.translateY = (_c = options === null || options === void 0 ? void 0 : options.translateY) !== null && _c !== void 0 ? _c : 0;
-        this.scale = (_d = options === null || options === void 0 ? void 0 : options.scale) !== null && _d !== void 0 ? _d : 1;
-        this.strokeWidth = (_e = options === null || options === void 0 ? void 0 : options.strokeWidth) !== null && _e !== void 0 ? _e : 8;
-        this.fill = (_f = options === null || options === void 0 ? void 0 : options.fill) !== null && _f !== void 0 ? _f : '#000000';
-        this.zIndex = 9999;
-        this.d = this.generateSvgPath();
-        this.updateDimensions();
+    }
+    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) {
@@ -2729,7 +711,7 @@ class KritzelBrushTool extends KritzelBaseTool {
             this._store.state.isDrawing = true;
             const x = event.clientX - this._store.offsetX;
             const y = event.clientY - this._store.offsetY;
-            this._store.state.currentPath = new KritzelPath(this._store, {
+            this._store.state.currentPath = KritzelPath.create(this._store, {
                 points: [[x, y]],
                 translateX: -this._store.state.translateX,
                 translateY: -this._store.state.translateY,
@@ -2743,7 +725,7 @@ class KritzelBrushTool extends KritzelBaseTool {
         if (this._store.state.isDrawing) {
             const x = event.clientX - this._store.offsetX;
             const y = event.clientY - this._store.offsetY;
-            this._store.state.currentPath = new KritzelPath(this._store, {
+            this._store.state.currentPath = KritzelPath.create(this._store, {
                 points: [...this._store.state.currentPath.points, [x, y]],
                 translateX: -this._store.state.translateX,
                 translateY: -this._store.state.translateY,
@@ -2769,7 +751,7 @@ class KritzelBrushTool extends KritzelBaseTool {
             const x = Math.round(event.touches[0].clientX - this._store.offsetX);
             const y = Math.round(event.touches[0].clientY - this._store.offsetY);
             this._store.state.isDrawing = true;
-            this._store.state.currentPath = new KritzelPath(this._store, {
+            this._store.state.currentPath = KritzelPath.create(this._store, {
                 points: [[x, y]],
                 translateX: -this._store.state.translateX,
                 translateY: -this._store.state.translateY,
@@ -2784,7 +766,7 @@ class KritzelBrushTool extends KritzelBaseTool {
         if (this._store.state.touchCount === 1) {
             const x = Math.round(event.touches[0].clientX - this._store.offsetX);
             const y = Math.round(event.touches[0].clientY - this._store.offsetY);
-            this._store.state.currentPath = new KritzelPath(this._store, {
+            this._store.state.currentPath = KritzelPath.create(this._store, {
                 points: [...this._store.state.currentPath.points, [x, y]],
                 translateX: -this._store.state.translateX,
                 translateY: -this._store.state.translateY,
@@ -2812,8 +794,8 @@ class KritzelText extends KritzelBaseObject {
     get isReadonly() {
         return !(this._store.state.activeTool instanceof KritzelTextTool);
     }
-    constructor(store, fontSize, fontFamily) {
-        super(store);
+    constructor(config) {
+        super();
         this.__class__ = 'KritzelText';
         this.value = '';
         this.fontFamily = 'Arial';
@@ -2823,16 +805,33 @@ class KritzelText extends KritzelBaseObject {
         this.isNew = true;
         this.debugInfoVisible = true;
         this.rows = 1;
-        this.fontSize = fontSize;
-        this.fontFamily = fontFamily;
-        this.translateX = 0;
-        this.translateY = 0;
-        this.width = this.initialWidth / (this._store.state.scale < 0 ? this._store.state.scale : 1);
-        this.height = (this.fontSize * 1.2) / (this._store.state.scale < 0 ? this._store.state.scale : 1);
-        this.padding = 5;
-        this.backgroundColor = 'transparent';
-        this.scale = this._store.state.scale;
-        this.value = ' ';
+        if (config) {
+            this.value = config.value || ' ';
+            this.translateX = config.translateX || 0;
+            this.translateY = config.translateY || 0;
+            this.fontSize = config.fontSize || 8;
+            this.fontFamily = config.fontFamily || 'Arial';
+            this.fontColor = config.fontColor || '#000000';
+            this.height = config.height || (this.fontSize * 1.2);
+            this.width = config.width || 0;
+            this.scale = config.scale || 1;
+        }
+    }
+    static create(store, fontSize, fontFamily) {
+        const object = new KritzelText();
+        object._store = store;
+        object.fontSize = fontSize;
+        object.fontFamily = fontFamily;
+        object.translateX = 0;
+        object.translateY = 0;
+        object.width = object.initialWidth / (object._store.state.scale < 0 ? object._store.state.scale : 1);
+        object.height = (object.fontSize * 1.2) / (object._store.state.scale < 0 ? object._store.state.scale : 1);
+        object.padding = 5;
+        object.backgroundColor = 'transparent';
+        object.scale = object._store.state.scale;
+        object.value = ' ';
+        object.zIndex = store.currentZIndex;
+        return object;
     }
     mount(element) {
         if ((this.isMounted && this.elementRef === element) || this.isInViewport() === false) {
@@ -2984,7 +983,7 @@ class KritzelTextTool extends KritzelBaseTool {
         }
         const clientX = event.clientX - this._store.offsetX;
         const clientY = event.clientY - this._store.offsetY;
-        const text = new KritzelText(this._store, this.fontSize, this.fontFamily);
+        const text = KritzelText.create(this._store, this.fontSize, this.fontFamily);
         text.fontColor = this.fontColor;
         text.translateX = (clientX - this._store.state.translateX) / this._store.state.scale;
         text.translateY = (clientY - this._store.state.translateY) / this._store.state.scale;
@@ -3021,7 +1020,7 @@ class KritzelTextTool extends KritzelBaseTool {
         }
         const clientX = Math.round(event.touches[0].clientX - this._store.offsetX);
         const clientY = Math.round(event.touches[0].clientY - this._store.offsetY);
-        const text = new KritzelText(this._store, this.fontSize, this.fontFamily);
+        const text = KritzelText.create(this._store, this.fontSize, this.fontFamily);
         text.fontColor = this.fontColor;
         text.translateX = (clientX - this._store.state.translateX) / this._store.state.scale;
         text.translateY = (clientY - this._store.state.translateY) / this._store.state.scale;
@@ -3126,11 +1125,11 @@ const KritzelControls = class {
     render() {
         var _a, _b;
         const hasNoConfig = ((_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.config) === undefined || ((_b = this.activeControl) === null || _b === void 0 ? void 0 : _b.config) === null;
-        return (index.h(index.Host, { key: '2b13783ef0f1638ad76bfcef22c17c3eeb849d67' }, index.h("kritzel-utility-panel", { key: '1babeb88133cebc9057c85723b812b99152316c6', style: {
+        return (index.h(index.Host, { key: 'ed654553a1d3f5d2b5e85e3b3bce4a5705cc51e3' }, index.h("kritzel-utility-panel", { key: '9db82dacbe7360acba1b58b15536c7fed0c1f0dd', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, onUndo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.undo(); }, onRedo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.redo(); }, onDelete: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.delete(); } }), index.h("div", { key: '8fafebdf6726dd2bffe85cb2b3ada5f4885a2bf8', class: "kritzel-controls" }, this.controls.map(control => {
+            }, onUndo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.undo(); }, onRedo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.redo(); }, onDelete: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.delete(); } }), index.h("div", { key: '193a4efd69c51425dc0c8b142c8fba7c6f133077', class: "kritzel-controls" }, this.controls.map(control => {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             if (control.type === 'tool') {
                 return (index.h("button", { class: {
@@ -3233,7 +1232,7 @@ const KritzelCursorTrail = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '604f5c39a01f3aea870861de0a93cd162302d7b2' }, this.cursorTrailPoints.length > 1 && (index.h("svg", { key: '6f69f0b5a871010581b73bff51b2ef7341389f5a', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
+        return (index.h(index.Host, { key: 'c0a9b9ebe1634ba020024efed6446791d6a65a2f' }, this.cursorTrailPoints.length > 1 && (index.h("svg", { key: '50c73784eaffe743823bc6a75524fa4dc98566a8', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
                 position: 'absolute',
                 left: '0',
                 top: '0',
@@ -3337,7 +1336,7 @@ const KritzelDropdown = class {
             'has-suffix-border': this.hasSuffixContent,
             'has-prefix-border': this.hasPrefixContent,
         };
-        return (index.h(index.Host, { key: '1e4df5425e205d3709d93d71f2e7a47844a5b0f2' }, index.h("div", { key: '6e0d6fa7b35d1d9d61cf2174828d0d0f0d242683', class: "dropdown-wrapper" }, index.h("slot", { key: '07565dc0982498a9b026bc36f285eb728b5c771b', name: "prefix", ref: el => this.prefixSlotElement = el, onSlotchange: this.evaluatePrefixContent }), index.h("select", { key: 'ba618a1166681f36aae554242192e375286ba7e8', class: selectClasses, style: Object.assign(Object.assign({}, this.selectStyles), { width: this.width }), onInput: this.handleSelectChange }, this.options.map(option => (index.h("option", { value: option.value, style: option.style, selected: option.value === this.internalValue }, option.label)))), index.h("slot", { key: '2731003fa214cb3aa968b48db36ab1816d563425', name: "suffix", ref: el => this.suffixSlotElement = el, onSlotchange: this.evaluateSuffixContent }))));
+        return (index.h(index.Host, { key: '32c5f5a4f807c1e316c91b795c005b8d30ce6189' }, index.h("div", { key: 'b1cbeff18e688da4a2f7472be290b9527a619f07', class: "dropdown-wrapper" }, index.h("slot", { key: 'b3bbb7e21c6f5620cab41aa4b1c7206b6c75fd86', name: "prefix", ref: el => this.prefixSlotElement = el, onSlotchange: this.evaluatePrefixContent }), index.h("select", { key: '8b2dcdc125bee59cf29fce7c980b755e78d5816e', class: selectClasses, style: Object.assign(Object.assign({}, this.selectStyles), { width: this.width }), onInput: this.handleSelectChange }, this.options.map(option => (index.h("option", { value: option.value, style: option.style, selected: option.value === this.internalValue }, option.label)))), index.h("slot", { key: '8d83f0dea41ac959bf2392948efef33bb70d0154', name: "suffix", ref: el => this.suffixSlotElement = el, onSlotchange: this.evaluateSuffixContent }))));
     }
     static get watchers() { return {
         "value": ["externalValueChanged"],
@@ -3490,18 +1489,23 @@ class KritzelEraserTool extends KritzelBaseTool {
 }
 
 class KritzelImage extends KritzelBaseObject {
-    constructor(store, img) {
-        super(store);
+    constructor() {
+        super(...arguments);
         this.__class__ = 'KritzelImage';
+        this.src = '';
         this.debugInfoVisible = true;
-        this.img = img;
-        this.x = 0;
-        this.y = 0;
-        this.translateX = 0;
-        this.translateY = 0;
-        this.width = img.width;
-        this.height = img.height;
-        this.scale = this._store.state.scale;
+    }
+    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) {
@@ -3897,6 +1901,7 @@ class KritzelRotationHandler extends KritzelBaseHandler {
             const currentRotation = Math.atan2(groupCenterY - cursorY, groupCenterX - cursorX);
             this.rotation = currentRotation - this.initialRotation;
             this._store.state.selectionGroup.rotate(this.rotation);
+            this._store.rerender();
             clearTimeout(this._store.state.longTouchTimeout);
         }
     }
@@ -3965,17 +1970,23 @@ class KritzelGeometryHelper {
 }
 
 class KrtizelSelectionBox extends KritzelBaseObject {
-    constructor(store) {
-        super(store);
+    constructor() {
+        super(...arguments);
         this.__class__ = 'KrtizelSelectionBox';
         this.objects = [];
-        this.backgroundColor = 'var(--kritzel-selection-box-background-color, rgba(14, 17, 17, 0.2))';
-        this.borderColor = 'var(--kritzel-selection-box-border-color, rgba(14, 17, 17, 0.5))';
-        this.borderWidth = 2;
-        this.scale = this._store.state.scale;
-        this.height = 0;
-        this.width = 0;
-        this.zIndex = 9999;
+    }
+    static create(store) {
+        const object = new KrtizelSelectionBox();
+        object._store = store;
+        object.id = object.generateId();
+        object.scale = store.state.scale;
+        object.zIndex = 99999;
+        object.backgroundColor = 'var(--kritzel-selection-box-background-color, rgba(14, 17, 17, 0.2))';
+        object.borderColor = 'var(--kritzel-selection-box-border-color, rgba(14, 17, 17, 0.5))';
+        object.borderWidth = 2;
+        object.height = 0;
+        object.width = 0;
+        return object;
     }
 }
 
@@ -4077,7 +2088,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         let clientX, clientY;
         clientX = event.clientX - this._store.offsetX;
         clientY = event.clientY - this._store.offsetY;
-        const selectionBox = new KrtizelSelectionBox(this._store);
+        const selectionBox = KrtizelSelectionBox.create(this._store);
         this.startX = (clientX - this._store.state.translateX) / this._store.state.scale;
         this.startY = (clientY - this._store.state.translateY) / this._store.state.scale;
         selectionBox.translateX = this.startX;
@@ -4098,7 +2109,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         clientY = Math.round(firstTouch.clientY - this._store.offsetY);
         this.touchStartX = clientX;
         this.touchStartY = clientY;
-        const selectionBox = new KrtizelSelectionBox(this._store);
+        const selectionBox = KrtizelSelectionBox.create(this._store);
         this.startX = (clientX - this._store.state.translateX) / this._store.state.scale;
         this.startY = (clientY - this._store.state.translateY) / this._store.state.scale;
         selectionBox.translateX = this.startX;
@@ -4160,7 +2171,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
             return;
         }
         selectedObjects.forEach(o => (o.selected = false));
-        this._store.state.selectionGroup = new KritzelSelectionGroup(this._store);
+        this._store.state.selectionGroup = KritzelSelectionGroup.create(this._store);
         this._store.state.selectionGroup.addOrRemove(selectedObject);
         this._store.state.selectionGroup.selected = true;
         this._store.state.selectionGroup.rotation = this._store.state.selectionGroup.objects[0].rotation;
@@ -4171,7 +2182,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         if (selectedObjects.length === 0) {
             return;
         }
-        this._store.state.selectionGroup = new KritzelSelectionGroup(this._store);
+        this._store.state.selectionGroup = KritzelSelectionGroup.create(this._store);
         selectedObjects.forEach(o => {
             o.selected = false;
             this._store.state.selectionGroup.addOrRemove(o);
@@ -4311,7 +2322,7 @@ class KritzelSelectionTool extends KritzelBaseTool {
             return object;
         }
         else {
-            const group = new KritzelSelectionGroup(this._store);
+            const group = KritzelSelectionGroup.create(this._store);
             group.translateX = 0;
             group.translateY = 0;
             group.addOrRemove(object);
@@ -4353,16 +2364,16 @@ class KritzelReviver {
                 let revivedObj;
                 switch (obj.__class__) {
                     case 'KritzelPath':
-                        revivedObj = new KritzelPath(this._store).revive(obj);
+                        revivedObj = KritzelPath.create(this._store).revive(obj);
                         break;
                     case 'KritzelText':
-                        revivedObj = new KritzelText(this._store, obj.fontSize, obj.fontFamily).revive(obj);
+                        revivedObj = KritzelText.create(this._store, obj.fontSize, obj.fontFamily).revive(obj);
                         break;
                     case 'KritzelImage':
-                        revivedObj = new KritzelImage(this._store, obj.img).revive(obj);
+                        revivedObj = KritzelImage.create(this._store).revive(obj);
                         break;
                     case 'KritzelSelectionGroup':
-                        revivedObj = new KritzelSelectionGroup(this._store).revive(obj);
+                        revivedObj = KritzelSelectionGroup.create(this._store).revive(obj);
                         break;
                     case 'KritzelBrushTool':
                         revivedObj = new KritzelBrushTool(this._store);
@@ -4397,17 +2408,23 @@ class KritzelReviver {
 }
 
 class KritzelSelectionGroup extends KritzelBaseObject {
-    constructor(store) {
-        super(store);
+    constructor() {
+        super(...arguments);
         this.__class__ = 'KritzelSelectionGroup';
         this.objects = [];
         this.unchangedObjects = [];
-        this.scale = this._store.state.scale;
-        this.zIndex = 99999;
     }
     get length() {
         return this.objects.length;
     }
+    static create(store) {
+        const object = new KritzelSelectionGroup();
+        object._store = store;
+        object.id = object.generateId();
+        object.scale = store.state.scale;
+        object.zIndex = 99999;
+        return object;
+    }
     addOrRemove(object) {
         const index = this.objects.findIndex(obj => obj.id === object.id);
         if (index === -1) {
@@ -4461,13 +2478,13 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         const heightScaleFactor = height / this.height;
         const deltaX = x - this.translateX;
         const deltaY = y - this.translateY;
-        this.objects.forEach(obj => {
-            const updatedWidth = obj.width * widthScaleFactor;
-            const updatedHeight = obj.height * heightScaleFactor;
-            const updatedX = obj.translateX + deltaX + (obj.translateX - this.translateX) * (widthScaleFactor - 1);
-            const updatedY = obj.translateY + deltaY + (obj.translateY - this.translateY) * (heightScaleFactor - 1);
-            obj.resize(updatedX, updatedY, updatedWidth, updatedHeight);
-            this._store.state.objectsOctree.update(obj);
+        this.objects.forEach(child => {
+            const updatedWidth = child.width * widthScaleFactor;
+            const updatedHeight = child.height * heightScaleFactor;
+            const updatedX = child.translateX + deltaX + (child.translateX - this.translateX) * (widthScaleFactor - 1);
+            const updatedY = child.translateY + deltaY + (child.translateY - this.translateY) * (heightScaleFactor - 1);
+            child.resize(updatedX, updatedY, updatedWidth, updatedHeight);
+            this._store.state.objectsOctree.update(child);
         });
         this.refreshObjectDimensions();
         this.unchangedObjects = ObjectHelper.clone(this.objects);
@@ -4488,10 +2505,11 @@ class KritzelSelectionGroup extends KritzelBaseObject {
             child.translateX = centerX + rotatedX - child.totalWidth / 2 / child.scale;
             child.translateY = centerY + rotatedY - child.totalHeight / 2 / child.scale;
             child.rotation = this.objects.length === 1 ? value : value + unchangedChild.rotation;
+            this._store.state.objectsOctree.update(child);
         });
     }
     copy() {
-        const selectionGroup = new KritzelSelectionGroup(this._store);
+        const selectionGroup = KritzelSelectionGroup.create(this._store);
         let currentZIndex = this._store.currentZIndex;
         this.objects.forEach(obj => {
             const copiedObject = obj.copy();
@@ -4630,7 +2648,8 @@ class KritzelImageTool extends KritzelBaseTool {
         return { scaledWidth, scaledHeight };
     }
     createKritzelImage(img, width, height) {
-        const image = new KritzelImage(this._store, img);
+        const image = KritzelImage.create(this._store);
+        image.src = img.src;
         image.width = width;
         image.height = height;
         image.zIndex = this._store.currentZIndex;
@@ -4638,7 +2657,7 @@ class KritzelImageTool extends KritzelBaseTool {
         return image;
     }
     addImageToStore(image) {
-        const selectionGroup = new KritzelSelectionGroup(this._store);
+        const selectionGroup = KritzelSelectionGroup.create(this._store);
         selectionGroup.addOrRemove(image);
         selectionGroup.selected = true;
         const addImageCommand = new AddObjectCommand(this._store, this, image);
@@ -4793,6 +2812,7 @@ const KritzelEditor = class {
         this.controls = DEFAULT_KRITZEL_CONTROLS;
         this.customSvgIcons = {};
         this.hideControls = false;
+        this.text = null;
     }
     handleTouchStart(event) {
         if (event.cancelable) {
@@ -4802,13 +2822,52 @@ const KritzelEditor = class {
     componentWillLoad() {
         this.registerCustomSvgIcons();
     }
+    addTextObject() {
+        const obj = new KritzelText({
+            translateX: 100,
+            translateY: 100,
+            width: 200,
+            height: 50,
+            value: 'New Text',
+            fontSize: 16,
+            fontFamily: 'Arial',
+            fontColor: '#000000',
+            scale: 1,
+        });
+        this.engineRef.addObject(obj).then((text) => this.text = text);
+    }
+    getTextObject() {
+        var _a;
+        this.engineRef.getObjectById(((_a = this.text) === null || _a === void 0 ? void 0 : _a.id) || '').then((object) => {
+            console.log('Retrieved Text Object:', object);
+        });
+    }
+    updateTextObject() {
+        const updatedText = {
+            value: 'Updated Text',
+            translateX: 150,
+            translateY: 150,
+            rotation: Math.PI / 2
+        };
+        this.engineRef.updateObject(this.text, updatedText)
+            .then((text) => {
+            this.text = text;
+            console.log('Updated Text Object:', text);
+        });
+    }
+    removeTextObject() {
+        this.engineRef.removeObject(this.text).then((text) => {
+            console.log('Text Object removed', text);
+            this.text = null;
+        });
+    }
     registerCustomSvgIcons() {
         for (const [name, svg] of Object.entries(this.customSvgIcons)) {
             KritzelIconRegistry.register(name, svg);
         }
     }
     render() {
-        return (index.h(index.Host, { key: '3a2846ec3573702162d669a130420f5b0dca97bd' }, index.h("kritzel-engine", { key: '853d5558e2886c62a3a07109be23145978a0a88f' }), index.h("kritzel-controls", { key: 'eb4d48e6768b4808d3efc43ceb104de72475a4f2', controls: this.controls, style: this.hideControls ? { display: 'none' } : { display: 'flex' } })));
+        return (index.h(index.Host, { key: '3e54e232dd459dcebf3322dcba5ac2f1936ef23a' }, index.h("div", { key: '5c7f90645dfe6010187a709a657b5366d0e6d402', class: "button-panel", style: { position: 'absolute', top: '0', left: '0', zIndex: '10', display: 'flex', flexDirection: 'row' } }, index.h("button", { key: 'b8c22edc7b752f176c8bee4af186692100d09e1c', onClick: () => this.addTextObject() }, "Add Text"), index.h("button", { key: 'd38091f4142392ab4d1ed3e4b26c9e4a38ded104', onClick: () => this.getTextObject() }, "Get Text"), index.h("button", { key: '2f2bacf47603b5fb50a782bf24a8e6b3954d77e2', onClick: () => this.updateTextObject() }, "Update Text"), index.h("button", { key: '5ce49401b19a3730b30a24aaee6474f8ff8ed94f', onClick: () => this.removeTextObject() }, "Remove Text"), index.h("button", { key: '38870ef7c6776a37c742722fc96c37055c9e2ae3', onClick: () => this.engineRef.selectObjects([this.text]) }, "Select Text"), index.h("button", { key: '9a95113343e746cac85a0643a7633bf1030987b5', onClick: () => this.engineRef.selectAllObjectsInViewport() }, "Select All"), index.h("button", { key: 'c2caf8b0f02ad07d9b7f2166ed04e17daff10786', onClick: () => this.engineRef.clearSelection() }, "Clear Selection")), index.h("kritzel-engine", { key: 'c3174bc087b7875744f222d9fd03c68f06ce2522', ref: el => (this.engineRef = el) }), index.h("kritzel-controls", { key: 'b22337b1d0cb2f703f69c197a3c2b50a21a7a9b1', controls: this.controls, style: this.hideControls ? { display: 'none' } : { display: 'flex' } })));
     }
     get host() { return index.getElement(this); }
 };
@@ -5183,11 +3242,11 @@ class KritzelOctree {
         ];
     }
     intersects(a, b) {
-        return !((a.x >= b.x + b.width || // a is completely to the right of b
+        return !(a.x >= b.x + b.width || // a is completely to the right of b
             a.x + a.width <= b.x || // a is completely to the left of b
             a.y >= b.y + b.height || // a is completely below b
             a.y + a.height <= b.y // a is completely above b
-        ));
+        );
     }
 }
 
@@ -5350,9 +3409,6 @@ class KritzelStore {
             }
         }
     }
-    clearSelection() {
-        this.history.executeCommand(new RemoveSelectionGroupCommand(this, this.state.selectionGroup));
-    }
     delete() {
         if (!this.state.selectionGroup) {
             return;
@@ -5429,7 +3485,23 @@ class KritzelStore {
         });
         this.history.executeCommand(new BatchCommand(this, this, decreaseZIndexCommands));
     }
-    selectAllInViewport() {
+    selectObjects(objects) {
+        if (objects.length === 0) {
+            return;
+        }
+        const selectionGroup = KritzelSelectionGroup.create(this);
+        objects.forEach(obj => {
+            obj.selected = false;
+            selectionGroup.addOrRemove(obj);
+        });
+        selectionGroup.selected = true;
+        this.state.selectionGroup = selectionGroup;
+        if (objects.length === 1) {
+            selectionGroup.rotation = selectionGroup.objects[0].rotation;
+        }
+        this.history.executeCommand(new AddSelectionGroupCommand(this, this, selectionGroup));
+    }
+    selectAllObjectsInViewport() {
         const objectsInViewport = this._state.objectsOctree
             .query({
             x: -this._state.translateX / this._state.scale,
@@ -5441,17 +3513,29 @@ class KritzelStore {
         })
             .filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KrtizelSelectionBox) && !(o instanceof KritzelContextMenu));
         if (objectsInViewport.length > 0) {
-            const selectionGroup = new KritzelSelectionGroup(this);
+            const selectionGroup = KritzelSelectionGroup.create(this);
             objectsInViewport.forEach(obj => {
                 obj.selected = false;
                 selectionGroup.addOrRemove(obj);
             });
             selectionGroup.selected = true;
             this.state.isSelecting = false;
+            if (objectsInViewport.length === 1) {
+                selectionGroup.rotation = selectionGroup.objects[0].rotation;
+            }
             this.history.executeCommand(new AddSelectionGroupCommand(this, this, selectionGroup));
             this.setState('activeTool', KritzelToolRegistry.getTool('selection'));
         }
     }
+    clearSelection() {
+        const command = new RemoveSelectionGroupCommand(this, this.state.selectionGroup);
+        this.history.executeCommand(command);
+        this.state.selectionGroup = null;
+        this.state.selectionBox = null;
+        this.state.isSelecting = false;
+        this.state.isResizeHandleSelected = false;
+        this.state.isRotationHandleSelected = false;
+    }
     resetActiveText() {
         if (this.state.activeText && this.state.activeText.value === ' ') {
             this.deleteObject(this.state.activeText.id, false);
@@ -5486,15 +3570,6 @@ class KritzelStore {
         }
         return null;
     }
-    resetSelection() {
-        this.state.selectionGroup = null;
-        this.state.selectionBox = null;
-        this.state.isSelecting = false;
-        this.state.isResizeHandleSelected = false;
-        this.state.isRotationHandleSelected = false;
-        this._state.objectsOctree.remove(obj => obj instanceof KritzelSelectionGroup);
-        this.rerender();
-    }
 }
 
 class KritzelKeyHandler extends KritzelBaseHandler {
@@ -5634,7 +3709,7 @@ class KritzelContextMenuHandler extends KritzelBaseHandler {
         }
         const selectedObject = this._store.getObjectFromPointerEvent(event, '.object');
         if (selectedObject && !(selectedObject instanceof KritzelSelectionGroup)) {
-            this._store.state.selectionGroup = new KritzelSelectionGroup(this._store);
+            this._store.state.selectionGroup = KritzelSelectionGroup.create(this._store);
             this._store.state.selectionGroup.addOrRemove(selectedObject);
             this._store.state.selectionGroup.selected = true;
             this._store.state.selectionGroup.rotation = selectedObject.rotation;
@@ -5691,7 +3766,7 @@ const KritzelEngine = class {
                     this.paste(x, y);
                 },
             },
-            { label: 'Select All', icon: 'select-all', action: () => this.selectAllInViewport() },
+            { label: 'Select All', icon: 'select-all', action: () => this.selectAllObjectsInViewport() },
         ];
         this.objectContextMenuItems = [
             { label: 'Copy', icon: 'copy', action: () => this.copy() },
@@ -5716,7 +3791,7 @@ const KritzelEngine = class {
         this.keyHandler = new KritzelKeyHandler(this.store);
         this.store.onStateChange('activeTool', (activeTool) => {
             if (!(activeTool instanceof KritzelSelectionTool)) {
-                this.store.resetSelection();
+                this.store.clearSelection();
             }
             this.store.state.skipContextMenu = false;
             this.activeToolChange.emit(activeTool);
@@ -5902,9 +3977,6 @@ const KritzelEngine = class {
     async moveToBottom() {
         this.store.moveToBottom();
     }
-    async selectAllInViewport() {
-        this.store.selectAllInViewport();
-    }
     async undo() {
         this.store.history.undo();
     }
@@ -5916,21 +3988,63 @@ const KritzelEngine = class {
         this.store.state.selectionBox = null;
         this.store.state.isSelecting = false;
     }
+    async getObjectById(id) {
+        const object = this.store.objects.find(obj => obj.id === id);
+        return object || null;
+    }
+    async addObject(object) {
+        this.store.deselectAllObjects();
+        object.id = object.generateId();
+        object._store = this.store;
+        object.zIndex = this.store.currentZIndex;
+        const command = new AddObjectCommand(this.store, this, object);
+        this.store.history.executeCommand(command);
+        return object;
+    }
+    async updateObject(object, updatedProperties) {
+        this.store.deselectAllObjects();
+        const command = new UpdateObjectCommand(this.store, this, object, updatedProperties);
+        this.store.history.executeCommand(command);
+        return object;
+    }
+    async removeObject(object) {
+        this.store.deselectAllObjects();
+        const command = new RemoveObjectCommand(this.store, this, object);
+        this.store.history.executeCommand(command);
+        return object;
+    }
+    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);
+    }
+    async selectAllObjectsInViewport() {
+        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.selectAllObjectsInViewport();
+    }
+    async clearSelection() {
+        this.store.clearSelection();
+    }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
         const computedStyle = window.getComputedStyle(this.host);
         const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
         const baseHandleSize = parseFloat(baseHandleSizePx);
         const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
-        return (index.h(index.Host, { key: '81d2f8efadded214fde44f3dbaea3b678d0b182b' }, index.h("div", { key: '6657555d40bff3b5d44733e286c4076a82ca2e98', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, index.h("div", { key: 'e0cf766f7e8c8e7856a6b55c9c24272fa865c86e' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
-            _a.translateX), index.h("div", { key: '6c979eb953d01507fd29013d9186618f8f14588b' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
-            _b.translateY), index.h("div", { key: '3be6ea4a5b5eef5d07ddc48aa8ac2e57edbe0887' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
-            _c.viewportWidth), index.h("div", { key: '70aed9d3ee1227ba2a4f54a95eda27cb748f4b9f' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
-            _d.viewportHeight), index.h("div", { key: 'c2e79c4245e9f107e5512472030684e0ed617d1a' }, "ObjectsInViewport. ", this.store.objects.length), index.h("div", { key: '66f4284c2d4fd5dae03ffa9b641a28b2528ea117' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
-            _e.scale), index.h("div", { key: 'e4518d18cf923b57dceb38c07f409471bc178e9d' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
-            _g.name), index.h("div", { key: '47ea576f9c78f3bfb3e03649a88ec0f7b544f2d7' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), index.h("div", { key: 'fe92910fd861170651688fedbdc2f15829c15a58' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), index.h("div", { key: 'cbe7e87d9a3be8acd47dd45f1b69314a8a9c536a' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), index.h("div", { key: '722a58415ae67530dfe611e03a34f30e4c1db64e' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), index.h("div", { key: 'd9686a405ee05480c17358afb865a39bd64a2346' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), index.h("div", { key: '383f8e4a9e98b891507ff95416a20279e4d79431' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: 'fbda2b9f1ba4fe9daefb7f8b36d25d297b47a764' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: 'c1bb88c228cd6bbd2bdb0fe6bb3fd9b47d92bc2e' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: '26c77aadc8cda5f27f746d0c38049d830127c81e' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: '885725248c47714a49769b94ba48a3a0f59a7f97' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: '035d1c72d476ea9f8110145a25084eca59cfbedc' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: 'd6ac0024bec7d64ca327e6a5760e427e88269b8d' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
-            _m.cursorX), index.h("div", { key: 'b3bdd26eb7d5ac0fdfda0f13b7d4cde9f3712954' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
-            _o.cursorY)), index.h("div", { key: '186591f736514dcdb96f22d5ab3d14347a4c51ae', class: "origin", style: {
+        return (index.h(index.Host, { key: '0c20c50e3ad8ac088902881c35c406ad2f0787d5' }, index.h("div", { key: 'a89d76b5f6a10cbc54c40d034a08b3ceb99be063', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, index.h("div", { key: '94345439d02de7d005bb92abb377b7ebeb91fcdb' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
+            _a.translateX), index.h("div", { key: '1e2e3ffc6ad760f089f4d02d94dfeb09bb5725cb' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
+            _b.translateY), index.h("div", { key: '36d6170934959e19b95326d84b32c9abe2385edc' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
+            _c.viewportWidth), index.h("div", { key: '57e5d37af3fd1f6ad24ea89ca525a6f0bc8e014b' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
+            _d.viewportHeight), index.h("div", { key: '8281e788e350db75bbf1fe12dd8c17b91b429135' }, "ObjectsInViewport. ", this.store.objects.length), index.h("div", { key: '9f42aad27d0a266cbc720d1e13292bea5be84770' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
+            _e.scale), index.h("div", { key: '76848c1a0eb2379ee0d0314523a540dbeb3d0697' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
+            _g.name), index.h("div", { key: '77f8ff0b660227f7b25c12b74d70946bc1f66e78' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), index.h("div", { key: '229e94fee90a847a853419ae61bc131221313fc6' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), index.h("div", { key: 'f31784916ab54f9a5eda02cffebe55a1f9aaa51f' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), index.h("div", { key: '4611a6dd48f1033d42fc3b7813634cbc16bf9b3b' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), index.h("div", { key: '14388f4b5cca60d8a2d8d474f941b53a78ad327d' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), index.h("div", { key: '2f3dcd488855413e392f56718af640e369d99fae' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: '2cd0e44a1d13eaf5d3a942f75a727a074bf37622' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: '99d51cf25e02c9d06865bf1f847c704ad8a32110' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: '87ab9908a318b238ad1fb00e91dba9c485038443' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: '20f291bf45ba06b4107002e288b93f8f61ef9520' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: '52244f4f0d368e7bc183eed4c65abe536d134f44' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: '641edd47e7bccc7514ed6aeac3ecbead95568dde' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
+            _m.cursorX), index.h("div", { key: 'bf0826a9cbc800ca0f13d4de4da7dbb21241498f' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
+            _o.cursorY)), index.h("div", { key: '5659cb254f57b79ca8e33ab11a8087d5ca5088dc', 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 => {
@@ -5960,7 +4074,7 @@ const KritzelEngine = class {
                         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 }, index.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 && (index.h("img", { ref: el => object.mount(el), src: object.img.src, style: {
+                    }, viewBox: object === null || object === void 0 ? void 0 : object.viewBox }, index.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 && (index.h("img", { ref: el => object.mount(el), src: object.src, style: {
                         width: '100%',
                         height: '100%',
                         userSelect: 'none',
@@ -6027,7 +4141,7 @@ const KritzelEngine = class {
                         fill: 'transparent',
                         cursor: 'grab',
                     }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("g", { style: { display: this.store.state.debugInfo.showObjectInfo ? 'block' : 'none', pointerEvents: 'none' } }, index.h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.debugInfoVisible ? 'block' : 'none' } }, index.h("div", { style: { width: '100%', height: '100%' } }, index.h("div", { style: { whiteSpace: 'nowrap' } }, "zIndex: ", object.zIndex), index.h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), index.h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), index.h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), index.h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), index.h("div", { style: { whiteSpace: 'nowrap' } }, "scale: ", object.scale), index.h("div", { style: { whiteSpace: 'nowrap' } }, "rotation: ", object.rotation)))))));
-            }), index.h("svg", { key: '76788f88c63996a85778fac600f568e651f2604f', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
+            }), index.h("svg", { key: '05a35ebb17312d00a4065dc6dc76f3a93a72eff4', 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',
@@ -6037,12 +4151,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 }, index.h("path", { key: 'e0356205729f20a61f5bbac14393d4d607a7c865', 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 && (index.h("kritzel-context-menu", { key: '23ab721c25518e6c6a6e6e163fa0753e054cb5e7', 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 }, index.h("path", { key: 'cb232e2697ce6ede2e4d9ed2e1b433ccde3961b5', 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 && (index.h("kritzel-context-menu", { key: 'e41b88a78bbd25f692fbdba88fda80993055a078', 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 && index.h("kritzel-cursor-trail", { key: '01f90ff856d6a3b0812ce47796fd59dbbf0cd52d' })));
+            }, onActionSelected: event => this.handleContextMenuAction(event) })), ((_2 = this.store.state) === null || _2 === void 0 ? void 0 : _2.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && index.h("kritzel-cursor-trail", { key: '1d96c0d7fa94ddcf5820fd76fbaf69c54b1face2' })));
     }
     get host() { return index.getElement(this); }
 };
@@ -6058,7 +4172,7 @@ const KritzelFont = class {
         this.color = '#000000';
     }
     render() {
-        return (index.h(index.Host, { key: '6f25832892d8042464751360cc9e2307193f5407' }, index.h("div", { key: '3d2ec48a6a3b3e347c8cc1ab6f129bfacd984776', class: "font-preview", style: {
+        return (index.h(index.Host, { key: 'b4ebef665dacaca67e0a7574a15eae851e40ba3d' }, index.h("div", { key: '3af8906e1092fe333daf52da9e0da7a764fc47e3', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
                 fontSize: `${this.size}px`,
                 color: this.color
@@ -6103,7 +4217,7 @@ const KritzelFontFamily = class {
             label: option.label,
             style: { fontFamily: option.value },
         }));
-        return (index.h(index.Host, { key: '7ab677468a605e6b23466b73c1c93e258cf85c1a' }, index.h("kritzel-dropdown", { key: '5c2528687d1e5068d958b9f663cb0ceb46a2794e', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } }, index.h("button", { key: 'ab422c954569515f636031ddaaea2ec5f13a7bdc', class: "font-style-button", slot: "suffix" }, "B"), index.h("button", { key: '884116c86f3d710df58f82c10294f66aae95829e', class: "font-style-button italic-text", slot: "suffix" }, "I"))));
+        return (index.h(index.Host, { key: 'f420ff18156d54bfc475148a7d9aae0f1441408c' }, index.h("kritzel-dropdown", { key: '6b54fb8265a0eb59a6a681c6a2b7a95fb222671c', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } }, index.h("button", { key: 'b853c75a425c7baafa7a8e749c90c0b08884375c', class: "font-style-button", slot: "suffix" }, "B"), index.h("button", { key: '68dea850dd1d1f38db727d8be0eec3481890c571', class: "font-style-button italic-text", slot: "suffix" }, "I"))));
     }
 };
 KritzelFontFamily.style = kritzelFontFamilyCss;
@@ -6123,7 +4237,7 @@ const KritzelFontSize = class {
         this.sizeChange.emit(size);
     }
     render() {
-        return (index.h(index.Host, { key: '20ad8f22858732c62838693c7b135dc92dbc5910' }, this.sizes.map(size => (index.h("div", { class: {
+        return (index.h(index.Host, { key: 'daf7a1f16f96dfcbaaaa2ba43b77c99565c9893d' }, this.sizes.map(size => (index.h("div", { class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, index.h("kritzel-font", { fontFamily: this.fontFamily, size: size }))))));
@@ -6167,7 +4281,7 @@ const KritzelStrokeSize = class {
         this.sizeChange.emit(size);
     }
     render() {
-        return (index.h(index.Host, { key: '2e2a4d38920e25e1e60788deabe4912b510d0b10' }, this.sizes.map(size => (index.h("div", { class: {
+        return (index.h(index.Host, { key: 'ee73f8679fa8e1f99bc01f31fb5cd8935fa597a8' }, this.sizes.map(size => (index.h("div", { class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, index.h("kritzel-color", { value: '#000000', size: size }))))));
@@ -6216,23 +4330,23 @@ const KritzelTooltip = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '30db4852719464fcb9c6964c34992e87a364caa3', style: {
+        return (index.h(index.Host, { key: 'd0ec1b12583a5e69a022ed4538060a0fe609b4fc', style: {
                 position: 'fixed',
                 zIndex: '9999',
                 transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
                 visibility: this.isVisible ? 'visible' : 'hidden',
                 left: !this.isMobileView ? `${this.positionX}px` : '50%',
                 marginBottom: `${this.offsetY + this.arrowSize}px`,
-            } }, index.h("div", { key: '3f270c9bdb1a5282f67034618123a5d61f9f8b40', class: "tooltip-content", onClick: event => event.stopPropagation() }, index.h("slot", { key: 'bd4a11782eb2e263f21a8ab57ad64eb4fd4fe7ec' }), index.h("div", { key: '4ede173979b8e0335fb3a012b662a694dc09ea28', class: "tooltip-arrow-wrapper", style: {
+            } }, index.h("div", { key: 'f4edf3ee17d5074aff60808dada77ddb601ea33d', class: "tooltip-content", onClick: event => event.stopPropagation() }, index.h("slot", { key: '947ea9110ccb0ed4a02684d7a51b04da8df6c909' }), index.h("div", { key: 'bffda8ba16f67e54cb581f96f355b5ddefca5792', class: "tooltip-arrow-wrapper", style: {
                 position: 'fixed',
                 left: this.arrowOffset,
                 bottom: `-${this.arrowSize * 2}px`,
-            } }, index.h("div", { key: 'c96993f91dde76cc5feb0c42dd4e599837121bf7', class: "tooltip-arrow", style: {
+            } }, index.h("div", { key: '76d33735507f0164dc68173f02c3ca2d45070744', class: "tooltip-arrow", style: {
                 borderLeft: `${this.arrowSize}px solid transparent`,
                 borderRight: `${this.arrowSize}px solid transparent`,
                 borderTop: `${this.arrowSize}px solid var(--kritzel-controls-tooltip-background-color, #ffffff)`,
                 filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',
-            } }), index.h("div", { key: '888f9d44f58969b3f50db04f1cd3d49008872b55', class: "tooltip-arrow-rect", style: {
+            } }), index.h("div", { key: '8f1913c9ed12f8a3171963cfb0360241fab21302', class: "tooltip-arrow-rect", style: {
                 position: 'relative',
                 width: `${this.arrowSize * 2}px`,
                 height: `${this.arrowSize}px`,
@@ -6266,7 +4380,7 @@ const KritzelUtilityPanel = class {
         this.redo.emit();
     }
     render() {
-        return (index.h(index.Host, { key: '496ed78323c9899ad363e7f7732a1464d99e1b3b' }, index.h("button", { key: '7b6b9cd238a8d254f032d5752f184d567e9a3096', class: "utility-button", onClick: event => this.handleUndo(event) }, index.h("kritzel-icon", { key: '8ac19f36c6b82f7cc4a0249e60cf429f75c09218', name: "undo" })), index.h("button", { key: '1164727510a968356042507c1e302b85a135baf8', class: "utility-button", onClick: event => this.handleRedo(event) }, index.h("kritzel-icon", { key: '1c6cc414d5841a06853f99316eee7a0a609d5c92', name: "redo" })), index.h("div", { key: 'e6f3342569b1c6b5a6b267cc215bc8e5d259e302', class: "utility-separator" }), index.h("button", { key: '0aa486a543df924c224f3637857cdcdb06f995ea', class: "utility-button" }, index.h("kritzel-icon", { key: '9ee324e03f5df5297916549743539f7f19950768', name: "delete", onClick: () => this.delete.emit() }))));
+        return (index.h(index.Host, { key: 'c295ba2931094213a276ca2ccf002fea4a17a9a5' }, index.h("button", { key: 'ad636f88a4fb8540e0a5607b505fa157257a0cd4', class: "utility-button", onClick: event => this.handleUndo(event) }, index.h("kritzel-icon", { key: '9a6ebf66cafddeb5fd191ffe374831ad583598ae', name: "undo" })), index.h("button", { key: '334cb5c195b6da4992f08964f31f412172f3904d', class: "utility-button", onClick: event => this.handleRedo(event) }, index.h("kritzel-icon", { key: '5f3528d7cfdee42ed8203c8cb09f54550ab57810', name: "redo" })), index.h("div", { key: 'f859dcfd8a576323a2d52fc1bf3787b8ac589532', class: "utility-separator" }), index.h("button", { key: '30e28fc71e12caca42effe63fc033f84b9b07d02', class: "utility-button" }, index.h("kritzel-icon", { key: 'f448f23126e2d29a1be44d88e39c7dd6d5927ca2', name: "delete", onClick: () => this.delete.emit() }))));
     }
 };
 KritzelUtilityPanel.style = kritzelUtilityPanelCss;