kritzel-stencil 0.3.33 → 0.3.35

package/dist/cjs/{kritzel-active-users_45.cjs.entry.js → kritzel-active-users_46.cjs.entry.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-Xav9JFHg.js');
-var schema_constants = require('./schema.constants-BHr5Bcqs.js');
+var schema_constants = require('./schema.constants-Di56GD6q.js');
 var Y = require('yjs');
 require('y-indexeddb');
 require('y-websocket');
@@ -28,6 +28,10 @@ var Y__namespace = /*#__PURE__*/_interopNamespace(Y);
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
 const kritzelActiveUsersCss = () => `:host{display:inline-flex;align-items:center}.avatars{display:flex;align-items:center}.avatar-wrapper{position:relative;transition:margin-left 200ms ease}.avatar-wrapper kritzel-avatar{border-radius:50%;box-shadow:0 0 0 2px var(--kritzel-active-users-avatar-border-color, #ffffff)}.avatars:hover .avatar-wrapper{margin-left:-6px !important}.avatar-tooltip{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:12px;padding:4px 8px;background-color:var(--kritzel-active-users-tooltip-background, #333333);color:var(--kritzel-active-users-tooltip-color, #ffffff);font-family:sans-serif;font-size:12px;font-weight:500;border-radius:4px;white-space:nowrap;width:max-content;pointer-events:none;opacity:0;transition:opacity 150ms ease}.avatar-wrapper:hover .avatar-tooltip,.overflow-count:hover .avatar-tooltip{opacity:1}.overflow-count{position:relative;margin-left:8px;font-family:sans-serif;font-size:var(--kritzel-active-users-overflow-font-size, 14px);font-weight:500;color:var(--kritzel-active-users-overflow-color, #666666);white-space:nowrap;cursor:default}.overflow-count .avatar-tooltip{white-space:nowrap;text-align:left;margin-top:20px}`;
 
 const KritzelActiveUsers = class {
@@ -154,16 +158,16 @@ const KritzelAvatar = class {
             height: `${this.size}px`,
             fontSize: `${Math.round(this.size * 0.4)}px`,
         };
-        return (index.h(index.Host, { key: '4bdbe2c1d5d3a1708189166498ae4e36c19c46ff', style: containerStyles, class: {
+        return (index.h(index.Host, { key: '116725d55e4443e80216b3b3251e957d2009b43e', style: containerStyles, class: {
                 'has-image': !!showImage,
                 'has-initials': !!showInitials,
                 'has-default': !!showDefaultIcon,
-            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (index.h("img", { key: '55c3a13c9d514ea700c6b1a9339cd0dff1828b2b', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
+            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (index.h("img", { key: 'd70ad4eb484404b18c13e066e8c10b3c86918ee5', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
                 if (el) {
                     el.referrerPolicy = 'no-referrer';
                     el.crossOrigin = 'anonymous';
                 }
-            }, onError: this.handleImageError })), showInitials && (index.h("span", { key: 'b60cbe2b94ea1d2cd2a09d10c928290fc1469a4a', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (index.h("span", { key: 'e8a0f49952b5b7e5e4a1fe3d67e68a56081d5e4c', class: "avatar-default" }, index.h("svg", { key: '1fdc256fd53aa5c866bb0e81fdd40393c8a7d69d', viewBox: "0 0 24 24", fill: "currentColor" }, index.h("path", { key: '8f3a5a6775154e46a2f331534fe75671b9ad081a', d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }))))));
+            }, onError: this.handleImageError })), showInitials && (index.h("span", { key: '21a9022cffdb69e0c3626e513cb3c036a9d3a16d', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (index.h("span", { key: '43e676af007bf254b1921f3efcbc7fff4e204359', class: "avatar-default" }, index.h("svg", { key: 'a7378795539a902e28ca644a80f1ca00cc9f818a', viewBox: "0 0 24 24", fill: "currentColor" }, index.h("path", { key: '31548a495a86f033325c98cfcc0ae398b6bb8281', d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }))))));
     }
     static get watchers() { return {
         "user": [{
@@ -473,12 +477,12 @@ const KritzelBackToContent = class {
         this.backToContent.emit();
     };
     render() {
-        return (index.h(index.Host, { key: 'a7d52616642f45a0c0e7b76deb3cc5994184b968' }, index.h("button", { key: '9e7acae2b62f7f66ee0127545ee8ab115f9d340e', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, index.h("kritzel-icon", { key: '6c404376643554cdb86c33957c066dd4580f19f1', name: "chevrons-left" }))));
+        return (index.h(index.Host, { key: 'ab9e9297f5f26bcf79ec32e51ee0ff2524ad421f' }, index.h("button", { key: 'c32536edc9943bc9ad66f4fa727338bb01e148a6', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, index.h("kritzel-icon", { key: 'bd3aa6ffe524ad9093d1e0693574dc2d63c311bd', name: "chevrons-left" }))));
     }
 };
 KritzelBackToContent.style = kritzelBackToContentCss();
 
-const kritzelButtonCss = () => `:host{display:inline-block;font-family:sans-serif}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:var(--kritzel-global-pointer-cursor, pointer);display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--kritzel-button-border-radius, 8px);padding:var(--kritzel-button-padding, 12px 20px);font-size:var(--kritzel-button-font-size, 14px);font-weight:var(--kritzel-button-font-weight, 500);transition:background-color 0.15s ease, opacity 0.15s ease;-webkit-tap-highlight-color:transparent}button.primary{background-color:var(--kritzel-button-primary-background-color, #007AFF);color:var(--kritzel-button-primary-color, #ffffff)}button.primary:hover{background-color:var(--kritzel-button-primary-hover-background-color, #006ae6)}button.primary:active{background-color:var(--kritzel-button-primary-active-background-color, #005bbf)}button.secondary{background-color:var(--kritzel-button-secondary-background-color, #f0f0f0);color:var(--kritzel-button-secondary-color, #333333)}button.secondary:hover{background-color:var(--kritzel-button-secondary-hover-background-color, #e0e0e0)}button.secondary:active{background-color:var(--kritzel-button-secondary-active-background-color, #d0d0d0)}button.text{background-color:transparent;color:var(--kritzel-button-text-color, #007AFF)}button.text:hover{background-color:var(--kritzel-button-text-hover-background-color, rgba(0, 122, 255, 0.08))}button.text:active{background-color:var(--kritzel-button-text-active-background-color, rgba(0, 122, 255, 0.15))}button.disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}`;
+const kritzelButtonCss = () => `:host{display:inline-block;font-family:sans-serif}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:var(--kritzel-global-pointer-cursor, pointer);display:inline-flex;width:var(--kritzel-button-width, auto);align-items:center;justify-content:center;gap:6px;border-radius:var(--kritzel-button-border-radius, 8px);padding:var(--kritzel-button-padding, 12px 20px);font-size:var(--kritzel-button-font-size, 14px);font-weight:var(--kritzel-button-font-weight, 500);transition:background-color 0.15s ease, opacity 0.15s ease;-webkit-tap-highlight-color:transparent}button.primary{background-color:var(--kritzel-button-primary-background-color, #007AFF);color:var(--kritzel-button-primary-color, #ffffff)}button.primary:hover{background-color:var(--kritzel-button-primary-hover-background-color, #006ae6)}button.primary:active{background-color:var(--kritzel-button-primary-active-background-color, #005bbf)}button.secondary{background-color:var(--kritzel-button-secondary-background-color, #f0f0f0);color:var(--kritzel-button-secondary-color, #333333)}button.secondary:hover{background-color:var(--kritzel-button-secondary-hover-background-color, #e0e0e0)}button.secondary:active{background-color:var(--kritzel-button-secondary-active-background-color, #d0d0d0)}button.text{background-color:transparent;color:var(--kritzel-button-text-color, #007AFF)}button.text:hover{background-color:var(--kritzel-button-text-hover-background-color, rgba(0, 122, 255, 0.08))}button.text:active{background-color:var(--kritzel-button-text-active-background-color, rgba(0, 122, 255, 0.15))}button.disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}`;
 
 const KritzelButton = class {
     constructor(hostRef) {
@@ -500,11 +504,11 @@ const KritzelButton = class {
         this.buttonClick.emit();
     };
     render() {
-        return (index.h(index.Host, { key: '0de2b5dcf75de9f5b7de0c6b876bd18733bf21b9' }, index.h("button", { key: '5ab9d80167c6b90add7779d4b1c3ebb80fafaed5', type: this.type, class: {
+        return (index.h(index.Host, { key: 'b9de2a1261ca0cb491f6980db6a596c48fa45b3a' }, index.h("button", { key: 'a9507ea0f6a1d9fcb19a7df16bea54cc0ead24f9', type: this.type, class: {
                 'kritzel-button': true,
                 [this.variant]: true,
                 'disabled': this.disabled,
-            }, disabled: this.disabled, onClick: this.handleClick }, index.h("slot", { key: 'dc105f7d1f87aa55c314d942a1cc6522b272526a' }))));
+            }, disabled: this.disabled, onClick: this.handleClick }, index.h("slot", { key: '8449a26d4f9fe0226c6150a6639c522486b59780' }))));
     }
 };
 KritzelButton.style = kritzelButtonCss();
@@ -552,13 +556,13 @@ const KritzelColorComponent = class {
     render() {
         const resolvedColor = this.resolveColor();
         const isColorVeryLight = this.isLightColor(resolvedColor);
-        return (index.h(index.Host, { key: '0d56c7ad01eddd523ebcf11a32e68367c96090bd' }, index.h("div", { key: '0bef4cb73804b98e6eea6b3cf006c19c8786bdb9', class: "checkerboard-bg", style: {
+        return (index.h(index.Host, { key: 'e39c77c55942b9c615e404efabf4939b2cf05a34' }, index.h("div", { key: 'ac343295592ea80ca7d3da61ca1244dd1aaa50db', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, index.h("div", { key: '5be9714c3ddd56ae77c2870333ff97a59b58bd45', class: {
+            } }, index.h("div", { key: '4c87934b3febd4c41874cd290d86a9a9a557e3e5', class: {
                 'color-circle': true,
                 'white': isColorVeryLight,
             }, style: {
@@ -614,7 +618,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: '6d003ec5b92f586532782144c25ca5a733741f20' }, index.h("div", { key: '031838b45da4916aa91d87c066ac950cfe3a1ddc', class: {
+        return (index.h(index.Host, { key: '16aa405a43b3943473e577c5a6ab86adf4ae1ba9' }, index.h("div", { key: 'f65bb286889700dc1f0e8d84ff59721071b7b73a', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {
@@ -1182,13 +1186,13 @@ const KritzelControls = class {
         // Separate tool controls from config control
         const toolControls = this.internalControls.filter(c => c.type === 'tool' || c.type === 'separator');
         const configControl = this.internalControls.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
-        return (index.h(index.Host, { key: '266e38cdeffb8c22a7f778e865e5fab6b461f5b6', style: { display: this.visible ? '' : 'none' }, class: {
+        return (index.h(index.Host, { key: 'f66fd3057bd88d31d7d585f2c286feb7e33c3611', style: { display: this.visible ? '' : 'none' }, class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: '5e75ece000ac02675d3d226461b7f522dcf5ead9', style: {
+            } }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: '4841cd070407422f0081dd528566d3943d2db7cd', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, undoState: this.undoState, terms: this.terms, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), index.h("div", { key: 'fc98b1675afe1abb6a8d391c4ace34c7f0e46677', class: "kritzel-controls" }, index.h("div", { key: 'b17bc9e9a65646735c56f78a326a281229fa9790', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), index.h("div", { key: '9ab9d5c44e515551d75f27c31875de72e9d3407c', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
+            }, undoState: this.undoState, terms: this.terms, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), index.h("div", { key: '54fb1da3f8b070c4c75e27930c95ca06f46f48f1', class: "kritzel-controls" }, index.h("div", { key: '9ce27b621a8fb668716f1eb15f3b01302e476d86', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), index.h("div", { key: 'eb9f499b5139c481b5748b09ecf21cd414918a11', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
             // Check if this control has sub-options (split-button)
             if (control.subOptions?.length) {
                 const selectedSubOption = this.getSelectedSubOption(control);
@@ -1218,10 +1222,10 @@ const KritzelControls = class {
                     'kritzel-control': true,
                     'selected': this.activeControl?.name === control?.name,
                 }, key: control.name, "data-testid": `tool-${control.name}`, onClick: _event => this.handleControlClick?.(control), "aria-label": control.name.charAt(0).toUpperCase() + control.name.slice(1) }, index.h("kritzel-icon", { name: control.icon })));
-        })), index.h("div", { key: 'fad7512f5d1aa68905a56b8f22d498380f166f9f', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (index.h("div", { class: {
+        })), index.h("div", { key: 'c990abf4ff2970e6519c605135f3fbded691e91a', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (index.h("div", { class: {
                 'kritzel-config-container': true,
                 'visible': hasConfigUI,
-            }, key: configControl.name }, index.h("div", { key: '2ff7cb3ad18608102f3d8188b5936cf00b00451f', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), index.h("kritzel-tooltip", { key: '10f15f717c8573cbad6ea53b412ad56254099ad1', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, index.h("kritzel-tool-config", { key: 'a1b0ed8ecc2696a591e32add642a3d5cb2bf7f4a', tool: this.activeControl.tool, theme: this.theme, engine: this.kritzelEngine, terms: this.terms, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), index.h("div", { key: '7ac8214a3dbad5323a38cad3ff7324b57f9dbfb5', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
+            }, key: configControl.name }, index.h("div", { key: '1c163b818eed3a76bda9e802b083d2bfe8431c87', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), index.h("kritzel-tooltip", { key: 'f7252d9aa17bdde580ca31cd558ba93d99822937', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, index.h("kritzel-tool-config", { key: 'a15a873d8740d5c45a657bb4677a514fe9e183de', tool: this.activeControl.tool, theme: this.theme, engine: this.kritzelEngine, terms: this.terms, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), index.h("div", { key: 'ffbf1e35387ee732c6877f8425dbe07234d8233f', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
                 if (el)
                     this.configTriggerRef = el;
             }, onKeyDown: event => {
@@ -1230,7 +1234,7 @@ const KritzelControls = class {
                 }
             }, style: {
                 cursor: 'pointer',
-            } }, this.displayValues && (index.h("div", { key: '7e64f79859f7f2b03d72bb7a93fb295e7d2b2ac0', class: "color-container" }, index.h("kritzel-color", { key: 'b87d9861949379d84954ef1ecb554e13317b3287', value: this.displayValues.color, theme: this.theme, size: 18, style: {
+            } }, this.displayValues && (index.h("div", { key: 'eb272119da9354eb069231c3d29a196c5b0e4aa2', class: "color-container" }, index.h("kritzel-color", { key: '465b3af943d740b83bd260ee493840edd235a9af', value: this.displayValues.color, theme: this.theme, size: 18, style: {
                 borderRadius: '50%',
                 border: 'none',
             } })))))))));
@@ -1253,7 +1257,6 @@ const KritzelCurrentUser = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
-    get host() { return index.getElement(this); }
     /**
      * The current user to display
      */
@@ -1264,28 +1267,26 @@ const KritzelCurrentUser = class {
     avatarSize = 40;
     /** Resolved localized strings keyed by term key, supplied by the editor. */
     terms = {};
-    dialogRef;
-    handleAvatarClick = (event) => {
-        event.stopPropagation();
-        this.dialogRef?.open();
-    };
     render() {
-        return (index.h(index.Host, { key: 'bdee6b71c08d6ea22aec40e88ba56077882b301d' }, index.h("kritzel-avatar", { key: '97bcaaa6b683c0d26d547ac5cbd9df7814f0cd80', user: this.user, size: this.avatarSize, onClick: this.handleAvatarClick }), index.h("kritzel-current-user-dialog", { key: 'c984ea1803bcf2b06569fd66d12e4e7054235225', ref: el => (this.dialogRef = el), user: this.user, terms: this.terms })));
+        return (index.h(index.Host, { key: 'e9746bbb98dbdae8f73ac7129bc1eb772746c576' }, index.h("kritzel-avatar", { key: '04f493ba649484cd95607c54b77e27134baa3122', user: this.user, size: this.avatarSize })));
     }
 };
 KritzelCurrentUser.style = kritzelCurrentUserCss();
 
-const kritzelCurrentUserDialogCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-width-small:380px}.user-info{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0}.user-name{font-size:18px;font-weight:600;color:var(--kritzel-current-user-dialog-name-color, #333333);text-align:center;margin-top:8px}.user-email{font-size:14px;color:var(--kritzel-current-user-dialog-email-color, #666666);text-align:center}`;
+const kritzelCurrentUserDialogCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-width-small:380px}.user-info{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0}.user-name{font-size:18px;font-weight:600;color:var(--kritzel-current-user-dialog-name-color, #333333);text-align:center;margin-top:8px}.user-email{font-size:14px;color:var(--kritzel-current-user-dialog-email-color, #666666);text-align:center}.logout-button{margin-top:16px;width:100%;--kritzel-button-width:100%;--kritzel-button-primary-background-color:var(--kritzel-current-user-dialog-logout-button-background-color, #007AFF);--kritzel-button-primary-hover-background-color:var(--kritzel-current-user-dialog-logout-button-hover-background-color, #006ae6);--kritzel-button-primary-active-background-color:var(--kritzel-current-user-dialog-logout-button-active-background-color, #005bbf);--kritzel-button-primary-color:var(--kritzel-current-user-dialog-logout-button-color, #ffffff)}`;
 
 const KritzelCurrentUserDialog = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.logoutRequest = index.createEvent(this, "logoutRequest");
     }
     get host() { return index.getElement(this); }
     user;
     /** Resolved localized strings keyed by term key, supplied by the editor. */
     terms = {};
     isDialogOpen = false;
+    /** Emitted when the user clicks the logout action. */
+    logoutRequest;
     async open() {
         this.isDialogOpen = true;
     }
@@ -1295,6 +1296,10 @@ const KritzelCurrentUserDialog = class {
     closeDialog = () => {
         this.isDialogOpen = false;
     };
+    handleLogout = () => {
+        this.logoutRequest.emit();
+        this.closeDialog();
+    };
     getDisplayName() {
         if (!this.user)
             return undefined;
@@ -1304,7 +1309,7 @@ const KritzelCurrentUserDialog = class {
     }
     render() {
         const displayName = this.getDisplayName();
-        return (index.h(index.Host, { key: '042455d68a432e0e218d5b8750fb1d22b0d202fc' }, index.h("kritzel-dialog", { key: '058abbc8e1c38c647cc02e85c272e89693cab22a', dialogTitle: this.terms['currentUser.dialogTitle'] ?? 'Account', isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, index.h("div", { key: 'ee141b2e91f093527e2d8f6649bade8e1a14f130', class: "user-info" }, index.h("kritzel-avatar", { key: '2734bb0d3c69df14d26c204eeaf726174afaabc0', user: this.user, size: 80 }), displayName && index.h("div", { key: '56cbad7a51264ebada0cb029e6455aabb9cb4ae9', class: "user-name" }, displayName), this.user?.email && index.h("div", { key: 'ef9075dfdeb52ce6f90bb41d1348fbdf7dbb93ee', class: "user-email" }, this.user.email)))));
+        return (index.h(index.Host, { key: '6eb573d072c5c0b47de4a88538a507adf49bd9b4' }, index.h("kritzel-dialog", { key: '9e85ed790f146ac408023759b1fe87e60bc80282', dialogTitle: this.terms['currentUser.dialogTitle'] ?? 'Account', isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, index.h("div", { key: '33a55e6023ad6f63514085d57b7278d4733bd411', class: "user-info" }, index.h("kritzel-avatar", { key: '4580f83fc6c5bcf8a1ffcd0d635da233817233d3', user: this.user, size: 80 }), displayName && index.h("div", { key: '5e2b98005e9b4ab7cc3db2dc81f4180e8ba3abea', class: "user-name" }, displayName), this.user?.email && index.h("div", { key: '1041266c4a4525d2f08c60d59bec5a518de2184b', class: "user-email" }, this.user.email), index.h("kritzel-button", { key: 'b695c05d24ab9d4d252a45ec496d75d79583ed4d', class: "logout-button", variant: "primary", onButtonClick: this.handleLogout }, this.terms['menu.logout'] ?? 'Logout')))));
     }
 };
 KritzelCurrentUserDialog.style = kritzelCurrentUserDialogCss();
@@ -2128,7 +2133,7 @@ const DEFAULT_SYNC_CONFIG = {
     providers: [],
 };
 
-const kritzelEditorCss = () => `kritzel-editor{display:flex;margin:0;position:relative;container-type:inline-size;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:start;line-height:normal}kritzel-controls{position:absolute;left:0;right:0;margin-inline:auto;width:max-content;max-width:calc(100% - 16px);bottom:var(--kritzel-editor-controls-bottom, 14px);transition:transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out)}kritzel-controls.keyboard-open{transform:var(--kritzel-editor-controls-transform, translateY(300%))}.top-left-buttons{position:absolute;top:var(--kritzel-editor-top-left-buttons-top, 14px);left:var(--kritzel-editor-top-left-buttons-left, 14px);display:flex;align-items:flex-start;gap:8px}.top-center-notification-layer{position:absolute;top:var(--kritzel-editor-top-center-notification-top, 14px);left:0;right:0;z-index:var(--kritzel-editor-top-center-notification-z-index, 10001);display:flex;justify-content:center;pointer-events:none}.top-center-notification-container{width:min(90vw, 420px);pointer-events:auto;animation:kritzel-notification-slide-in var(--kritzel-editor-notification-animation-duration, 220ms)     var(--kritzel-editor-notification-animation-easing, cubic-bezier(0.22, 1, 0.36, 1))}.top-center-notification-container.is-dismissing{animation:kritzel-notification-fade-out var(--kritzel-editor-notification-dismiss-animation-duration, 180ms)     var(--kritzel-editor-notification-dismiss-animation-easing, ease-in) forwards}@keyframes kritzel-notification-slide-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes kritzel-notification-fade-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-6px)}}@media (prefers-reduced-motion: reduce){.top-center-notification-container{animation:none}}.top-right-buttons{position:absolute;top:var(--kritzel-editor-top-right-buttons-top, 14px);right:var(--kritzel-editor-top-right-buttons-right, 14px);display:flex;align-items:center;gap:8px}.bottom-left-buttons{position:absolute;left:var(--kritzel-editor-top-left-buttons-left, 14px);bottom:var(--kritzel-editor-controls-bottom, 14px);display:flex;align-items:flex-end}@container (max-width: 767px){.bottom-left-buttons{display:none}}.top-right-button{display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;border:var(--kritzel-split-button-border, 1px solid #ebebeb);border-radius:var(--kritzel-split-button-border-radius, 12px);background-color:var(--kritzel-split-button-background-color, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent}.top-right-button:hover{background-color:#f5f5f5}.top-right-button:active{background-color:#ebebeb}`;
+const kritzelEditorCss = () => `kritzel-editor{display:flex;margin:0;position:relative;container-type:inline-size;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:start;line-height:normal}.editor-content{position:absolute;inset:0}kritzel-controls{position:absolute;left:0;right:0;margin-inline:auto;width:max-content;max-width:calc(100% - 16px);bottom:var(--kritzel-editor-controls-bottom, 14px);transition:transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out)}kritzel-controls.keyboard-open{transform:var(--kritzel-editor-controls-transform, translateY(300%))}.top-left-buttons{position:absolute;top:var(--kritzel-editor-top-left-buttons-top, 14px);left:var(--kritzel-editor-top-left-buttons-left, 14px);display:flex;align-items:flex-start;gap:8px}.top-center-notification-layer{position:absolute;top:var(--kritzel-editor-top-center-notification-top, 14px);left:0;right:0;z-index:var(--kritzel-editor-top-center-notification-z-index, 10001);display:flex;justify-content:center;pointer-events:none}.top-center-notification-container{width:min(90vw, 420px);pointer-events:auto;animation:kritzel-notification-slide-in var(--kritzel-editor-notification-animation-duration, 220ms)     var(--kritzel-editor-notification-animation-easing, cubic-bezier(0.22, 1, 0.36, 1))}.top-center-notification-container.is-dismissing{animation:kritzel-notification-fade-out var(--kritzel-editor-notification-dismiss-animation-duration, 180ms)     var(--kritzel-editor-notification-dismiss-animation-easing, ease-in) forwards}@keyframes kritzel-notification-slide-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes kritzel-notification-fade-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-6px)}}@media (prefers-reduced-motion: reduce){.top-center-notification-container{animation:none}}.top-right-buttons{position:absolute;top:var(--kritzel-editor-top-right-buttons-top, 14px);right:var(--kritzel-editor-top-right-buttons-right, 14px);display:flex;align-items:center;gap:8px}.bottom-left-buttons{position:absolute;left:var(--kritzel-editor-top-left-buttons-left, 14px);bottom:var(--kritzel-editor-controls-bottom, 14px);display:flex;align-items:flex-end}@container (max-width: 767px){.bottom-left-buttons{display:none}}.top-right-button{display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;border:var(--kritzel-split-button-border, 1px solid #ebebeb);border-radius:var(--kritzel-split-button-border-radius, 12px);background-color:var(--kritzel-split-button-background-color, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent}.top-right-button:hover{background-color:#f5f5f5}.top-right-button:active{background-color:#ebebeb}`;
 
 const KritzelEditor = class {
     constructor(hostRef) {
@@ -2359,6 +2364,8 @@ const KritzelEditor = class {
     isEditorVisible = false;
     activeNotification;
     isNotificationDismissing = false;
+    /** Combined loading state reported by the engine (external `isLoading` prop or internal workspace loading). Starts true so the overlay is shown until the engine reports otherwise. */
+    isEngineLoading = true;
     notificationDismissTimeout;
     notificationDismissAnimationTimeout;
     notificationDisplayDurationMs = 5000;
@@ -2664,6 +2671,7 @@ const KritzelEditor = class {
     splitButtonRef;
     shareDialogRef;
     loginDialogRef;
+    currentUserDialogRef;
     componentWillLoad() {
         this.loadSettingsFromStorage();
         this.applyTheme();
@@ -2784,6 +2792,10 @@ const KritzelEditor = class {
         event.stopPropagation();
         this.awarenessChange.emit(event.detail);
     }
+    handleLoadingChange(event) {
+        event.stopPropagation();
+        this.isEngineLoading = event.detail;
+    }
     handleNotificationsChange(event) {
         event.stopPropagation();
         this.clearNotificationDismissAnimationTimer();
@@ -2888,15 +2900,7 @@ const KritzelEditor = class {
                 label: this.resolvedTerms['menu.settings'] ?? 'Settings',
                 icon: 'settings',
                 action: () => this.settingsRef.open(),
-            },
-            {
-                id: 'logout',
-                label: this.resolvedTerms['menu.logout'] ?? 'Logout',
-                icon: 'log-out',
-                color: '#ff3b30',
-                isVisible: this.isLoggedIn,
-                action: () => this.logout.emit(),
-            },
+            }
         ];
     }
     handleToggleIsPublic = async (event) => {
@@ -2922,6 +2926,9 @@ const KritzelEditor = class {
     handleProviderLogin = (event) => {
         this.login.emit(event.detail);
     };
+    handleCurrentUserLogout = () => {
+        this.logout.emit();
+    };
     get isLoggedIn() {
         return !!this.user && !this.user.isGuest;
     }
@@ -3073,35 +3080,40 @@ const KritzelEditor = class {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
-        return (index.h(index.Host, { key: '56b172459e6d940229dc1d4f409157e403ad5f27', style: {
+        return (index.h(index.Host, { key: 'a397bb3a5ab632193a0d6af07054d9235c8af7ba' }, index.h("kritzel-loading-overlay", { key: '8ac3ec51ec15a7ce3dfac4e1afb7e2d272d6fee2', visible: this.isLoading || !this.isEditorVisible || this.isEngineLoading, text: this.resolvedTerms['engine.loading'] ?? 'Loading...' }), index.h("div", { key: '0ac709cf7d3e9889f99675f20c1f2ac5bcca55da', class: "editor-content", style: {
                 opacity: this.isEditorVisible ? '1' : '0',
                 visibility: this.isEditorVisible ? 'visible' : 'hidden',
                 transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out',
-            } }, index.h("div", { key: '93a2195c14402f38416b2d377c684e2650418edb', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: '1b42b21bc35e1fc56202e19a78053e46d87ca51a', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, terms: this.resolvedTerms, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-back-to-content", { key: '3b90b69a5b83a6e5593d4f752c4094a2a3af8c4d', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (index.h("div", { key: '9c2ee1e10212145bf2f97a1a7f27746aa18cfc98', class: "top-center-notification-layer", role: "presentation" }, index.h("div", { key: 'a77b025329da64e1f1223a2f749aa2fc60e5c469', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, index.h("kritzel-notification-card", { key: '9ced0bc5213ec8c3387915cd71272a1f56161405', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), index.h("kritzel-engine", { key: '884b7f088e164a51c49158c409904ca5419f2d55', ref: el => {
+            } }, index.h("div", { key: '019cbb191155260c635cb13a4d94eebbb5913045', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: 'b9a60281c57f90dedebd2a01ccc27a689a8f2a09', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, terms: this.resolvedTerms, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-back-to-content", { key: 'b0b625e1cd07f29d9622b03e49cf75c9324b2d38', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (index.h("div", { key: '80868e85dc8a0810750ff5dd04c59057d81fb823', class: "top-center-notification-layer", role: "presentation" }, index.h("div", { key: '8cfe3895cb8dcd137950daff0e677d397c20817b', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, index.h("kritzel-notification-card", { key: 'f50a8ff5fba9ee8df8bb0fa5c2b3198ad30fd8cd', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), index.h("kritzel-engine", { key: '7b31643384b19dfd84b6093a4ccb719dd04b7669', ref: el => {
                 if (el) {
                     this.engineRef = el;
                 }
-            }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, isPanningEnabled: this.isPanningEnabled, isZoomingEnabled: this.isZoomingEnabled, theme: this.theme, themes: this.themes, licenseKey: this.licenseKey, locale: this.locale, locales: this.locales, fallbackLocale: this.fallbackLocale, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event), onNotificationsChange: event => this.handleNotificationsChange(event) }), index.h("kritzel-controls", { key: '3a7c22f037d551636c53190eb07b318c2b857162', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
+            }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, isPanningEnabled: this.isPanningEnabled, isZoomingEnabled: this.isZoomingEnabled, theme: this.theme, themes: this.themes, licenseKey: this.licenseKey, locale: this.locale, locales: this.locales, fallbackLocale: this.fallbackLocale, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event), onNotificationsChange: event => this.handleNotificationsChange(event), onLoadingChange: event => this.handleLoadingChange(event) }), index.h("kritzel-controls", { key: '14ee52a07381785c4b8ce1f2e1b7304d44e0e128', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
                 if (el) {
                     this.controlsRef = el;
                 }
-            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: 'c0dad9086679397c46f5550c38686a9b7d8bae6c', class: "bottom-left-buttons" }, index.h("kritzel-zoom-panel", { key: '1639d6d2092ecd3fbc657dfdcfc3f12c02539329', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), index.h("div", { key: '45313b28a5e4bd75d09980e4765c2241d54fe1df', class: "top-right-buttons" }, index.h("kritzel-settings", { key: '33737a005cd6580505ee741be0dc40bd69873276', ref: el => {
+            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: 'c9ddf5fe7d74f32aff8182ce9dd70931f35a7274', class: "bottom-left-buttons" }, index.h("kritzel-zoom-panel", { key: '3ede1bacaa3ff6876429347c8edc20939b1ec59e', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), index.h("div", { key: 'af1f5f33065d5693e1c363f6e0d49d43cf839f88', class: "top-right-buttons" }, index.h("kritzel-settings", { key: 'f281c4b2c47d0fa15e947c2bd9e6e34f6ab064cf', ref: el => {
                 if (el) {
                     this.settingsRef = el;
                 }
-            }, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], availableLocales: this.availableLocaleOptions, settings: this.currentSettingsConfig, terms: this.resolvedTerms, onSettingsChange: event => this.handleSettingsChange(event) }), index.h("kritzel-export", { key: '9e13001850b15b9ce9d8a502466ed9fa05ac1518', ref: el => {
+            }, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], availableLocales: this.availableLocaleOptions, settings: this.currentSettingsConfig, terms: this.resolvedTerms, onSettingsChange: event => this.handleSettingsChange(event) }), index.h("kritzel-export", { key: 'aa9f4d755cd429e287bd9dc513f059006e47c037', ref: el => {
                 if (el) {
                     this.exportRef = el;
                 }
-            }, workspaceName: this.activeWorkspace?.name || 'workspace', terms: this.resolvedTerms, onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), index.h("kritzel-active-users", { key: 'f2494af1241ecc068ace09b23cfd405c76bd1273', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: '7f199e3493805977b5e5b8d2c736f31729919f96', user: this.user, terms: this.resolvedTerms }), shouldShowLoginButton && (index.h("kritzel-button", { key: 'c6c192ddb1245acc771ac550c1fe3e4f9bc08eab', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in')), index.h("kritzel-more-menu", { key: '869194078a4c90d42c5ebd604bc58b4f55fc4cb6', items: this.moreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), index.h("kritzel-share-dialog", { key: '8daed8fd7267aca056b6a53626c721e2f23cead4', ref: el => {
+            }, workspaceName: this.activeWorkspace?.name || 'workspace', terms: this.resolvedTerms, onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), index.h("kritzel-active-users", { key: 'e7f019162bf7fa84c591e78c9255ed54d49d624f', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: '5b51e312ca1d94717c8eae781435a1c253dfecc3', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (index.h("kritzel-current-user-dialog", { key: '328297225ea30570baa1aeec8dffda3e5fb90f6e', ref: el => {
+                if (el) {
+                    this.currentUserDialogRef = el;
+                    this.currentUserDialogRef.addEventListener('logoutRequest', this.handleCurrentUserLogout);
+                }
+            }, user: this.user, terms: this.resolvedTerms })), shouldShowLoginButton && (index.h("kritzel-button", { key: '719da0f8c343b0e3be80b37318bb27e102ea0f1e', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in')), index.h("kritzel-more-menu", { key: 'c3d0f82f8e21b53b966fcc99c598051b6e294b6a', items: this.moreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), index.h("kritzel-share-dialog", { key: '49a929e16684131fe4e0c7cc9d5f5ad769b6785c', ref: el => {
                 if (el) {
                     this.shareDialogRef = el;
                 }
-            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: 'b65ea0940cee31b152b60881180fab2445c92b0c', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: '113bd2574096d3e64ff36b2b8d152b28ff4ba8f7', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
-            }, providers: this.loginConfig.providers, dialogTitle: this.loginConfig.title ?? this.resolvedTerms['login.dialogTitle'] ?? 'Sign in', subtitle: this.loginConfig.subtitle, onProviderLogin: this.handleProviderLogin })))));
+            }, providers: this.loginConfig.providers, dialogTitle: this.loginConfig.title ?? this.resolvedTerms['login.dialogTitle'] ?? 'Sign in', subtitle: this.loginConfig.subtitle, onProviderLogin: this.handleProviderLogin }))))));
     }
     static get watchers() { return {
         "isEngineReady": [{
@@ -27419,7 +27431,7 @@ class KritzelWheelHelper {
     }
 }
 
-const kritzelEngineCss = () => `:host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.ProseMirror{outline:none}p,h1,h2,h3,h4,h5,h6,blockquote,pre{margin:0;padding:0}.workspace-loading-overlay{position:absolute;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;gap:10px;background-color:var(--kritzel-engine-loading-overlay-background, rgba(255, 255, 255, 0.6));color:var(--kritzel-engine-loading-overlay-color, #333);font-family:var(--kritzel-font-family, sans-serif);font-size:1.25rem;pointer-events:all;animation:workspace-loading-fade-in 200ms ease-out var(--kritzel-engine-loading-overlay-delay, 300ms) forwards;opacity:0}.workspace-loading-spinner{width:20px;height:20px;box-sizing:border-box;display:block;flex-shrink:0;border:2px solid var(--kritzel-engine-loading-overlay-spinner-color, #cccccc);border-top-color:var(--kritzel-engine-loading-overlay-spinner-active-color, #333333);border-radius:50%;animation:workspace-loading-spin 0.6s linear infinite}@keyframes workspace-loading-spin{to{transform:rotate(360deg)}}@keyframes workspace-loading-fade-in{to{opacity:1}}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}.PlaygroundEditorTheme__quote{margin:0;margin-left:20px;margin-bottom:10px;font-size:15px;color:rgb(101, 103, 107);border-left-color:rgb(206, 208, 212);border-left-width:4px;border-left-style:solid;padding-left:16px}`;
+const kritzelEngineCss = () => `:host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.ProseMirror{outline:none}p,h1,h2,h3,h4,h5,h6,blockquote,pre{margin:0;padding:0}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}.PlaygroundEditorTheme__quote{margin:0;margin-left:20px;margin-bottom:10px;font-size:15px;color:rgb(101, 103, 107);border-left-color:rgb(206, 208, 212);border-left-width:4px;border-left-style:solid;padding-left:16px}`;
 
 const KritzelEngine = class {
     get host() { return index.getElement(this); }
@@ -27649,6 +27661,8 @@ const KritzelEngine = class {
     awarenessChange;
     /** Emitted when notifications change. */
     notificationsChange;
+    /** Emitted when the combined loading state (external `isLoading` prop or internal workspace loading) changes. */
+    loadingChange;
     forceUpdate = 0;
     /** Manually triggers the `objectsSelectionChange` event. */
     async triggerSelectionChange() {
@@ -29107,6 +29121,7 @@ const KritzelEngine = class {
     _objectDistanceFadeCloseMinOpacity = 0;
     syncLoadingState() {
         this.core.store.state.isLoading = this._isWorkspaceLoading || this.isLoading;
+        this.loadingChange.emit(this.core.store.state.isLoading);
     }
     applyToolConfig(tool, toolConfig) {
         Object.entries(toolConfig).forEach(([key, value]) => {
@@ -29152,6 +29167,7 @@ const KritzelEngine = class {
         this.viewportChange = index.createEvent(this, "viewportChange");
         this.awarenessChange = index.createEvent(this, "awarenessChange");
         this.notificationsChange = index.createEvent(this, "notificationsChange");
+        this.loadingChange = index.createEvent(this, "loadingChange");
         this.core = new KritzelCore(this);
     }
     disconnectedCallback() {
@@ -29506,7 +29522,7 @@ const KritzelEngine = class {
     }
     render() {
         if (!this.viewport) {
-            return (index.h(index.Host, null, this.core.store.state.isLoading && (index.h("div", { class: "workspace-loading-overlay" }, index.h("span", { class: "workspace-loading-spinner" }), this.core.localizationManager.translate('engine.loading')))));
+            return index.h(index.Host, null);
         }
         const currentTheme = this.core.themeManager.getStoredTheme();
         const computedStyle = window.getComputedStyle(this.host);
@@ -29563,7 +29579,7 @@ const KritzelEngine = class {
                 this.emitObjectsInViewportChange();
             }
         }
-        return (index.h(index.Host, null, this.core.store.state.isLoading && (index.h("div", { class: "workspace-loading-overlay" }, index.h("span", { class: "workspace-loading-spinner" }), "Loading...")), this.core.store.state.debugInfo.showViewportInfo && (index.h("div", { class: "debug-panel" }, index.h("div", null, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), index.h("div", null, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), index.h("div", null, "TranslateX: ", this.core.store.state?.translateX), index.h("div", null, "TranslateY: ", this.core.store.state?.translateY), index.h("div", null, "ViewportWidth: ", this.core.store.state?.viewportWidth), index.h("div", null, "ViewportHeight: ", this.core.store.state?.viewportHeight), index.h("div", null, "PointerCount: ", this.core.store.state.pointers.size), index.h("div", null, "Scale: ", this.core.store.state?.scale), index.h("div", null, "ActiveTool: ", this.core.store.state?.activeTool?.name), index.h("div", null, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), index.h("div", null, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), index.h("div", null, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), index.h("div", null, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), index.h("div", null, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", null, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", null, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", null, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", null, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), index.h("div", null, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), index.h("div", null, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), index.h("div", null, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), index.h("div", null, "PointerX: ", this.core.store.state?.pointerX), index.h("div", null, "PointerY: ", this.core.store.state?.pointerY), index.h("div", null, "TotalObjects: ", this.core.store.totalObjectCount), index.h("div", null, "ObjectsInViewport: ", this.core.store.objectsInViewport.length), index.h("div", null, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), index.h("div", null, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), index.h("div", { id: "origin", class: "origin", style: {
+        return (index.h(index.Host, null, this.core.store.state.debugInfo.showViewportInfo && (index.h("div", { class: "debug-panel" }, index.h("div", null, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), index.h("div", null, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), index.h("div", null, "TranslateX: ", this.core.store.state?.translateX), index.h("div", null, "TranslateY: ", this.core.store.state?.translateY), index.h("div", null, "ViewportWidth: ", this.core.store.state?.viewportWidth), index.h("div", null, "ViewportHeight: ", this.core.store.state?.viewportHeight), index.h("div", null, "PointerCount: ", this.core.store.state.pointers.size), index.h("div", null, "Scale: ", this.core.store.state?.scale), index.h("div", null, "ActiveTool: ", this.core.store.state?.activeTool?.name), index.h("div", null, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), index.h("div", null, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), index.h("div", null, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), index.h("div", null, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), index.h("div", null, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", null, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", null, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", null, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", null, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), index.h("div", null, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), index.h("div", null, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), index.h("div", null, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), index.h("div", null, "PointerX: ", this.core.store.state?.pointerX), index.h("div", null, "PointerY: ", this.core.store.state?.pointerY), index.h("div", null, "TotalObjects: ", this.core.store.totalObjectCount), index.h("div", null, "ObjectsInViewport: ", this.core.store.objectsInViewport.length), index.h("div", null, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), index.h("div", null, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), index.h("div", { id: "origin", class: "origin", style: {
                 transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
             } }, visibleObjects?.map(object => {
             const { multiplied: effectiveOpacity, overridden: effectiveOpacityString } = this.getObjectEffectiveOpacity(object, viewportScale);
@@ -30161,7 +30177,7 @@ const KritzelExport = class {
         return (index.h("div", { class: "export-tab-content" }, index.h("kritzel-input", { label: this.terms['export.filename.label'] ?? 'Filename', value: this.exportFilename, placeholder: this.terms['export.filename.placeholder'] ?? 'Enter filename', suffix: ".json", onValueChange: this.handleFilenameChange })));
     }
     render() {
-        return (index.h(index.Host, { key: 'fd219fffd4d8bb528e6a90055c2b43a5f5a73060' }, index.h("kritzel-dialog", { key: '9f4ba5b05f5ad31084aab457386a86cbc6d4f2bc', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, index.h("div", { key: '920bb8f20b42897680084bde47270b3812e2f3e4', class: "export-content" }, index.h("kritzel-pill-tabs", { key: '7090bd0a371457adceaa4bd7461a616839a66349', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport(), index.h("button", { key: 'ddf36c1e7cb81409c2cecfa6585e0f1dd7aca2c3', class: "export-primary-button", onClick: this.handleExport }, this.terms['export.exportButton'] ?? 'Export')))));
+        return (index.h(index.Host, { key: '5706e0f8688777826452ca0cf81e2581f6e2d14a' }, index.h("kritzel-dialog", { key: '8d0d26a672604aec2b899a7ea05ab40031ac9c43', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, index.h("div", { key: 'a4c3f5a2961aca9dd5cba4045b8bd53635681ab0', class: "export-content" }, index.h("kritzel-pill-tabs", { key: '51a40a8596e492130cc8fa4c977cde916d7d8392', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport(), index.h("button", { key: 'a4b8e1503a0a8e682d10623bc334fcc70b5ea243', class: "export-primary-button", onClick: this.handleExport }, this.terms['export.exportButton'] ?? 'Export')))));
     }
 };
 KritzelExport.style = kritzelExportCss();
@@ -30176,7 +30192,7 @@ const KritzelFont = class {
     size = 24;
     color = '#000000';
     render() {
-        return (index.h(index.Host, { key: 'e37350dd092fb7c81a5624bfdc39c3b9af66b894' }, index.h("div", { key: 'a962ccc23a48f62b86d49ae41b1c9c27bdc9a5b9', class: "font-preview", style: {
+        return (index.h(index.Host, { key: '054371cac30a2433611139a670406b0a1e3b99ff' }, index.h("div", { key: 'b4f2142b3cb31d067f39952a38b6f665f28f63bf', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
                 fontSize: `${this.size}px`,
                 color: this.color
@@ -30252,7 +30268,7 @@ const KritzelFontSize = class {
     render() {
         const color = 'var(--kritzel-global-text-primary)';
         const sizes = this.sizes ?? [];
-        return (index.h(index.Host, { key: 'a314e990b56cb4e819c4d83a139016b1658606b8' }, sizes.map(size => (index.h("div", { tabIndex: 0, class: {
+        return (index.h(index.Host, { key: '56eb19367abe312bac3b626cfcae3b1ff6e90d21' }, sizes.map(size => (index.h("div", { tabIndex: 0, class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size), onKeyDown: event => this.handleKeyDown(event, size) }, index.h("kritzel-font", { fontFamily: this.fontFamily, size: size, color: color }))))));
@@ -30319,7 +30335,7 @@ const KritzelInput = class {
         this.valueChange.emit(input.value);
     };
     render() {
-        return (index.h(index.Host, { key: '7e16272802a5485207721f4f01ddf8e956b56dac' }, index.h("div", { key: 'ab60dacd08c6199db507d896c00cd0c788ecf7fa', class: "input-container" }, this.label && index.h("label", { key: 'e2e5769ca2954442da5a0f2a2abb07847986eac8', class: "input-label" }, this.label), index.h("div", { key: 'e7131f6d1a770cf71de9f7086e3a8a092296b80e', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, index.h("input", { key: '565cb30ed36818badc148475c596b468cdd2a65b', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && index.h("span", { key: 'ec4afb63443b6c89a829e515df7d33066f0f8def', class: "input-suffix" }, this.suffix)))));
+        return (index.h(index.Host, { key: '46a0a48902a06ad85edcbaad3679ce3fe9ba850c' }, index.h("div", { key: 'a6beaf920614aa959d2fbd68b7268afba8637358', class: "input-container" }, this.label && index.h("label", { key: 'ca6d3fb3c22f1540795dbb0695ddd9b87cc05eee', class: "input-label" }, this.label), index.h("div", { key: '78d116e82531a9cca996d594792245449bcaf9c8', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, index.h("input", { key: '0d10d6356dea3a11338172bbe8c3c878eefcc708', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && index.h("span", { key: '0e6166ba8728efc1035302d7fb048306efbe5a68', class: "input-suffix" }, this.suffix)))));
     }
     static get watchers() { return {
         "value": [{
@@ -30412,6 +30428,26 @@ const KritzelLineEndings = class {
 };
 KritzelLineEndings.style = kritzelLineEndingsCss();
 
+const kritzelLoadingOverlayCss = () => `:host{display:contents}.loading-overlay{position:absolute;inset:0;z-index:var(--kritzel-loading-overlay-z-index, 9999);display:flex;align-items:center;justify-content:center;gap:10px;background-color:var(--kritzel-loading-overlay-background, rgba(255, 255, 255, 0.6));color:var(--kritzel-loading-overlay-color, #333);font-family:var(--kritzel-font-family, sans-serif);font-size:1.25rem;opacity:0;pointer-events:none;visibility:hidden}.loading-overlay.visible{pointer-events:all;visibility:visible;animation:kritzel-loading-fade-in 200ms ease-out var(--kritzel-loading-overlay-delay, 300ms) forwards}.loading-spinner{width:20px;height:20px;box-sizing:border-box;display:block;flex-shrink:0;border:2px solid var(--kritzel-loading-overlay-spinner-color, #cccccc);border-top-color:var(--kritzel-loading-overlay-spinner-active-color, #333333);border-radius:50%;animation:kritzel-loading-spin 0.6s linear infinite}@keyframes kritzel-loading-spin{to{transform:rotate(360deg)}}@keyframes kritzel-loading-fade-in{to{opacity:1}}`;
+
+const KritzelLoadingOverlay = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /**
+     * Whether the overlay is visible
+     */
+    visible = false;
+    /**
+     * The text to display next to the spinner
+     */
+    text = 'Loading...';
+    render() {
+        return (index.h(index.Host, { key: 'b8c4784803ca5a0e6bf3f25c1d39139307bb6d50' }, index.h("div", { key: '5a8a2c44f1800c0275d1a94aa0eb5c2854be63b5', class: { 'loading-overlay': true, visible: this.visible }, "aria-hidden": this.visible ? 'false' : 'true' }, index.h("span", { key: '04e33166e054d7a600a83dacd48e3fb50ab69d22', class: "loading-spinner" }), this.text)));
+    }
+};
+KritzelLoadingOverlay.style = kritzelLoadingOverlayCss();
+
 const kritzelLoginDialogCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-width-small:380px}.login-content{display:flex;flex-direction:column;gap:20px}.login-subtitle{font-size:13px;color:var(--kritzel-login-dialog-subtitle-color, #666666);margin:0;line-height:1.5;text-align:center}.login-providers{display:flex;flex-direction:column;gap:10px}.provider-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 16px;border:1px solid var(--kritzel-login-dialog-button-border-color, #e0e0e0);border-radius:8px;background:var(--kritzel-login-dialog-button-background, #ffffff);color:var(--kritzel-login-dialog-button-text-color, #333333);font-size:14px;font-weight:500;font-family:inherit;cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;-webkit-tap-highlight-color:transparent}.provider-button:hover:not(:disabled){background:var(--kritzel-login-dialog-button-hover-background, #f5f5f5);border-color:var(--kritzel-login-dialog-button-hover-border-color, #cccccc)}.provider-button:active:not(:disabled){background:var(--kritzel-login-dialog-button-active-background, #ebebeb)}.provider-button:focus-visible{outline:revert;outline-offset:revert}.provider-button.is-disabled{opacity:0.5;cursor:default;pointer-events:none}.provider-button.is-loading{cursor:default}.provider-label{flex-shrink:0}.provider-button.is-loading .provider-label{opacity:0.7}@keyframes kritzel-login-spin{to{transform:rotate(360deg)}}.spinner{width:20px;height:20px;box-sizing:border-box;display:block;flex-shrink:0;border:2px solid var(--kritzel-login-dialog-spinner-color, #cccccc);border-top-color:var(--kritzel-login-dialog-spinner-active-color, #333333);border-radius:50%;animation:kritzel-login-spin 0.6s linear infinite}`;
 
 const KritzelLoginDialog = class {
@@ -30459,7 +30495,7 @@ const KritzelLoginDialog = class {
         this.dialogClosed.emit();
     };
     render() {
-        return (index.h(index.Host, { key: '6ef65077c95d32fee8da4b70ad2e832ad1bb78f7' }, index.h("kritzel-dialog", { key: '04f3d3350393475c7267d8ca90c0b3f0fce10c38', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, index.h("div", { key: 'c2ed4e339d86dcea23b4a0778b8966a6ae36107a', class: "login-content" }, this.subtitle && (index.h("p", { key: 'ae46baa70526d057b3427459903287489e645e08', class: "login-subtitle" }, this.subtitle)), index.h("div", { key: '1055d5861e5281be234094a3c5c86a6aaf58935f', class: "login-providers" }, this.providers.map(provider => (index.h("button", { key: provider.name, class: {
+        return (index.h(index.Host, { key: '5cedcb4fa0a9026338e930cfbbdbfa1df9853530' }, index.h("kritzel-dialog", { key: '1502a2dc67630b0a1399ef6e8d1a2fdcd4d50913', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, index.h("div", { key: 'f84a888ccc0b1cb2052e30af56a08910da8d85b5', class: "login-content" }, this.subtitle && (index.h("p", { key: '971040609c43efea30a7bfd0c1a3de2113f77a2b', class: "login-subtitle" }, this.subtitle)), index.h("div", { key: 'ecb0c648ce0d9a8ca8b10e6a520273d817c7a0fe', class: "login-providers" }, this.providers.map(provider => (index.h("button", { key: provider.name, class: {
                 'provider-button': true,
                 'is-loading': this.loadingProvider === provider.name,
                 'is-disabled': this.loadingProvider !== null && this.loadingProvider !== provider.name,
@@ -30565,15 +30601,15 @@ const KritzelMasterDetail = class {
         const selectedItem = this.items.find(item => item.id === this.selectedItemId);
         const panelId = 'master-detail-panel';
         const selectedTabId = selectedItem ? `tab-${selectedItem.id}` : undefined;
-        return (index.h(index.Host, { key: 'e094bc3df0e0d1598e84c9a17a033079b1db33f6' }, index.h("div", { key: '79509ba5d63703fe36650b07b5172f77bd6eafde', class: {
+        return (index.h(index.Host, { key: '0edf50b0b853633b88bf481f97f22aceba9e163e' }, index.h("div", { key: '21a0a3f81e5a60889ccd152c905cb41f52c3e037', class: {
                 'master-detail-container': true,
                 'is-mobile-detail-visible': this.showMobileDetail,
-            } }, index.h("nav", { key: '79d200d8c2e54789a33fc88b07c48f034de140ad', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index$1) => (index.h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index$1), class: {
+            } }, index.h("nav", { key: '41f88248cc372c8cae4cb50a19edf462a01e43f2', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index$1) => (index.h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index$1), class: {
                 'menu-item': true,
                 'is-selected': item.id === this.selectedItemId,
                 'is-disabled': !!item.disabled,
                 'is-focused': index$1 === this.focusedIndex,
-            }, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index$1), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index$1), onFocus: () => this.handleFocus(index$1), onBlur: this.handleBlur }, item.icon && (index.h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), index.h("span", { class: "menu-item-label" }, item.label), index.h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("path", { d: "m9 18 6-6-6-6" }))))))), index.h("div", { key: '642b65781509d192330bb2602dd081585d16f76d', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, index.h("button", { key: '18a922dbaad63f05bc3ca7de176de4996b5d7fcb', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, index.h("kritzel-icon", { key: 'b31732cef2ffdb78e67be7ab793aaaf60e373763', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), index.h("slot", { key: '48fe4ae631a8c0b2db9e4a232edb6300d603562c' })))));
+            }, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index$1), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index$1), onFocus: () => this.handleFocus(index$1), onBlur: this.handleBlur }, item.icon && (index.h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), index.h("span", { class: "menu-item-label" }, item.label), index.h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("path", { d: "m9 18 6-6-6-6" }))))))), index.h("div", { key: 'f8447facf3dfdbd7772823654847e1b90b03f73e', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, index.h("button", { key: '3edc9784267613e6b3a706739bbb537161e4c747', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, index.h("kritzel-icon", { key: 'ec0b4691735578525e5863842271366e04b13fb7', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), index.h("slot", { key: 'c21fbaff78f98859b9756427125b60504d4bb630' })))));
     }
     static get watchers() { return {
         "selectedItemId": [{
@@ -30646,7 +30682,7 @@ const KritzelMenu = class {
         this.itemCloseChildMenu.emit(event.detail);
     };
     render() {
-        return (index.h(index.Host, { key: '6dfdc7928ae69aa191b2c64f9db79801e6978e92', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && index.h("div", { key: 'ab8fa25f1b6ee0b7960cb0df84c40b1a7648c4e9', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (index.h("kritzel-menu-item", { key: item.id, "data-testid": `menu-item-${item.id}`, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
+        return (index.h(index.Host, { key: '27a90a3a8549517a2d6e341a5da13496bf714970', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && index.h("div", { key: 'c0c2351fac389f6676b38481eaacee553ca6867a', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (index.h("kritzel-menu-item", { key: item.id, "data-testid": `menu-item-${item.id}`, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
     }
 };
 KritzelMenu.style = kritzelMenuCss();
@@ -30751,12 +30787,12 @@ const KritzelMenuItem = class {
         ];
     }
     render() {
-        return (index.h(index.Host, { key: 'dbdcfcee7fd36fe0b9c405dd3d1641aa62465e53', tabIndex: this.item.isDisabled ? -1 : 0, class: {
+        return (index.h(index.Host, { key: '9d6653a630da5a3da38291d89d6d7d59d6994e02', tabIndex: this.item.isDisabled ? -1 : 0, class: {
                 'selected': this.item.isSelected,
                 'editing': this.item.isEditing,
                 'disabled': this.item.isDisabled,
                 'child-open': this.item.isChildMenuOpen,
-            }, onClick: this.handleItemSelect }, index.h("div", { key: 'ef97c7cf48190c1bbdde0dd9011cc1d5674b7c94', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
+            }, onClick: this.handleItemSelect }, index.h("div", { key: '48a1678296e672c6c03fb3e1473c42d3a246d481', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
     }
     static get watchers() { return {
         "item": [{
@@ -30829,7 +30865,7 @@ const KritzelMoreMenu = class {
         this.closeMenu();
     };
     render() {
-        return (index.h(index.Host, { key: '3e7179c87713cb0087d2d2053f97db8f603f7321', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, index.h("div", { key: '23d6be1ec2c25cd0335c1134f18aad7d5be25c85', class: { 'more-menu-wrapper': true, visible: this.visible } }, index.h("button", { key: 'e3064ba3f7b4c20e8447e16327b73d0f47f3842b', class: "more-menu-button", "data-testid": "more-menu-button", onClick: this.toggleMenu, "aria-label": this.terms['moreMenu.ariaLabel'] ?? 'More options' }, index.h("kritzel-icon", { key: 'feed090efe4f80c62a29c8146c2d7d8041624381', name: this.icon, size: this.iconSize })), index.h("kritzel-portal", { key: '7b1a5db932c7bfb5ea8f4d666571c4f7fbbcd238', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, index.h("kritzel-menu", { key: '65b1225b15a494d49712ad1d2d108e90f09507e9', items: this.visibleItems, onItemSelect: this.handleMenuItemSelect })))));
+        return (index.h(index.Host, { key: 'b7736b67210f2d2f6b54296dd680104548d61641', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, index.h("div", { key: '076ecc02a1469bd87cb27f63f1d41183bedb11d4', class: { 'more-menu-wrapper': true, visible: this.visible } }, index.h("button", { key: 'cefe02e440391eb079af7b8accc367a291e93d6a', class: "more-menu-button", "data-testid": "more-menu-button", onClick: this.toggleMenu, "aria-label": this.terms['moreMenu.ariaLabel'] ?? 'More options' }, index.h("kritzel-icon", { key: 'cb6f4dd0f37ac0fbf1e1c28a0dc06e097e38ee00', name: this.icon, size: this.iconSize })), index.h("kritzel-portal", { key: '29099deb5b56b1a1388caa81a3c7104a05ad66a7', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, index.h("kritzel-menu", { key: 'b77286ec05add0a20bbc46f99ac7210395d0d33d', items: this.visibleItems, onItemSelect: this.handleMenuItemSelect })))));
     }
 };
 KritzelMoreMenu.style = kritzelMoreMenuCss();
@@ -30996,7 +31032,7 @@ const KritzelNumericInput = class {
         this.valueChange.emit(newValue);
     };
     render() {
-        return (index.h(index.Host, { key: '008f18fc5ab81adcd82364706ca7d4c39ea39d77' }, index.h("div", { key: '5d91b2ec6e0458d186d923c422e8f6461ac7c51a', class: "input-container" }, this.label && index.h("label", { key: '45c911f1e11ff8289ab876192511f506eb65c940', class: "input-label" }, this.label), index.h("div", { key: 'f5e0bd1610a4085a291cc1d32787b68066757c69', class: "input-wrapper" }, index.h("input", { key: '897b1af7725f59df86a530836dda802e8cb04038', type: "number", class: "numeric-input", title: "", min: this.min === Number.MIN_SAFE_INTEGER ? undefined : this.min, max: this.max === Number.MAX_SAFE_INTEGER ? undefined : this.max, step: this.step, value: this.inputValue, placeholder: this.placeholder, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onInvalid: this.handleInvalid }), index.h("div", { key: '1acab70c82ff7431f916685084a6e5dd827cdca3', class: "spinner-buttons" }, index.h("button", { key: 'd93c4bec338d49ead87897baf61d2e036999a035', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, index.h("svg", { key: '1e52d43c1eb1e9a43025302a7cd1f3d74c038c36', viewBox: "0 0 10 6", class: "spinner-icon" }, index.h("path", { key: '2a96516390bd9caf5b6a3617d07f7b10e2b42451', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("button", { key: '038cf61f4b8982a17bf5c279d78556872a03efea', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, index.h("svg", { key: '30110c2ad975b51049a902953c52be66c1b7b0af', viewBox: "0 0 10 6", class: "spinner-icon" }, index.h("path", { key: '5abe735234debfa80a983d2fb60eeeaedb1dbf9b', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (index.h(index.Host, { key: '8901e0b56ccbc344420483a4a56663f7cd74d9e8' }, index.h("div", { key: '5f3d6b5c56007e11383aa69f60f22031b0e8f332', class: "input-container" }, this.label && index.h("label", { key: '2cb102a5b6c16d068f4f304fbcc6241f79fc0ce8', class: "input-label" }, this.label), index.h("div", { key: '96441095acc3d9a8e77b6d2bac2ceda683c9c976', class: "input-wrapper" }, index.h("input", { key: '523a5485111077e20faded235df6362e5ea9cfd4', type: "number", class: "numeric-input", title: "", min: this.min === Number.MIN_SAFE_INTEGER ? undefined : this.min, max: this.max === Number.MAX_SAFE_INTEGER ? undefined : this.max, step: this.step, value: this.inputValue, placeholder: this.placeholder, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onInvalid: this.handleInvalid }), index.h("div", { key: '2071e98125a8d014513e93052bd8c1fee17932a5', class: "spinner-buttons" }, index.h("button", { key: '12422e5285dfb532dbbb6eb1a36dbcb3de50f2bc', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, index.h("svg", { key: '49ad5625c80fae6706ba4ab91f47bd550481ef74', viewBox: "0 0 10 6", class: "spinner-icon" }, index.h("path", { key: 'ff7d19b61baeb5ba58bb60f2cc629bcec6eb4411', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("button", { key: 'e4fec28e4fc997e007127f2b30b00cc752433221', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, index.h("svg", { key: '27bf06cde8de11f4a97090911afd6b8993463112', viewBox: "0 0 10 6", class: "spinner-icon" }, index.h("path", { key: 'ed7071dd79bfe509ebb319ce43ecb3e982dd4157', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get watchers() { return {
         "value": [{
@@ -31035,7 +31071,7 @@ const KritzelOpacitySlider = class {
     }
     render() {
         const percentage = this.getPercentage();
-        return (index.h(index.Host, { key: 'e3a18981e5193ecd1ffaae5c807bdf6fa67e9695' }, index.h("div", { key: 'ee5ff0bb1355ca4f7e5d727ab8861933259c1a82', class: "opacity-container" }, index.h("div", { key: '6362fb3dba6910c55f5fe3b2a4245bcbb33dcdbb', class: "slider-wrapper" }, index.h("input", { key: 'f435f00fff7cc17ccdc181f39b29e032f6c5bf8d', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
+        return (index.h(index.Host, { key: '2dadd8a7c4d1af748e91a6005433288ab231f2e8' }, index.h("div", { key: '65ae90d95bffff244d97329754cf0cb8f73331fa', class: "opacity-container" }, index.h("div", { key: '90e95347f7015882112f0653a25347e715233227', class: "slider-wrapper" }, index.h("input", { key: '15836bc089c1725062016677d3b95384d1958431', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
                 '--slider-progress': `${percentage}%`,
                 '--kritzel-opacity-slider-thumb-border-color': this.previewColor,
             } })))));
@@ -31043,7 +31079,7 @@ const KritzelOpacitySlider = class {
 };
 KritzelOpacitySlider.style = kritzelOpacitySliderCss();
 
-const kritzelPillTabsCss = () => `:host{display:block}.pill-tabs-container{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:var(--kritzel-pill-tabs-border-radius, 10px);background:var(--kritzel-pill-tabs-background, #f0f0f0);box-sizing:border-box}.pill-tab{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border:none;border-radius:var(--kritzel-pill-tabs-tab-border-radius, 8px);background:var(--kritzel-pill-tabs-tab-background, transparent);color:var(--kritzel-pill-tabs-tab-text-color, #666666);font-family:inherit;font-size:14px;font-weight:500;cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;white-space:nowrap}.pill-tab:hover:not(.selected){background:var(--kritzel-pill-tabs-tab-background-hover, rgba(0, 0, 0, 0.05))}.pill-tab.selected{background:var(--kritzel-pill-tabs-tab-background-selected, #ffffff);color:var(--kritzel-pill-tabs-tab-text-color-selected, #000000);box-shadow:var(--kritzel-pill-tabs-tab-shadow-selected, 0 1px 3px rgba(0, 0, 0, 0.1))}.pill-tab:focus{outline:none}.pill-tab:focus-visible{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}.pill-tab-label{line-height:1}.pill-tab kritzel-icon{flex-shrink:0}`;
+const kritzelPillTabsCss = () => `:host{display:block;max-width:100%}.pill-tabs-container{display:inline-flex;align-items:center;gap:4px;padding:4px;max-width:100%;border-radius:var(--kritzel-pill-tabs-border-radius, 10px);background:var(--kritzel-pill-tabs-background, #f0f0f0);box-sizing:border-box}.pill-tab{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;max-width:100%;padding:8px 16px;border:none;border-radius:var(--kritzel-pill-tabs-tab-border-radius, 8px);background:var(--kritzel-pill-tabs-tab-background, transparent);color:var(--kritzel-pill-tabs-tab-text-color, #666666);font-family:inherit;font-size:14px;font-weight:500;cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;white-space:nowrap}.pill-tab:hover:not(.selected){background:var(--kritzel-pill-tabs-tab-background-hover, rgba(0, 0, 0, 0.05))}.pill-tab.selected{background:var(--kritzel-pill-tabs-tab-background-selected, #ffffff);color:var(--kritzel-pill-tabs-tab-text-color-selected, #000000);box-shadow:var(--kritzel-pill-tabs-tab-shadow-selected, 0 1px 3px rgba(0, 0, 0, 0.1))}.pill-tab:focus{outline:none}.pill-tab:focus-visible{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}.pill-tab-label{display:block;min-width:0;max-width:var(--kritzel-pill-tabs-tab-label-max-width, 10rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1}.pill-tab kritzel-icon{flex-shrink:0}`;
 
 const KritzelPillTabs = class {
     constructor(hostRef) {
@@ -31388,7 +31424,7 @@ const KritzelPortal = class {
         this.portal.style.visibility = 'visible';
     }
     render() {
-        return (index.h(index.Host, { key: '95fbfde070f33a7f1b59026de7c687a2f6d0119c', style: { display: this.anchor ? 'block' : 'none' } }, index.h("slot", { key: '14af59a35c5caf71079f7afb5ea6f4c5f13b05f8' })));
+        return (index.h(index.Host, { key: '72273b4c7811473072ee27668836a5ddddcfd618', style: { display: this.anchor ? 'block' : 'none' } }, index.h("slot", { key: 'b4f37ca27c47ab950a4639162fa31a3c2362d6f7' })));
     }
     static get watchers() { return {
         "anchor": [{
@@ -31402,7 +31438,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.3.33';
+const KRITZEL_VERSION = '0.3.35';
 
 const kritzelSettingsCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}.shortcuts-list{display:flex;flex-direction:column;gap:24px}.shortcuts-category{display:flex;flex-direction:column;gap:8px}.shortcuts-category-title{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.shortcuts-group{display:flex;flex-direction:column;gap:4px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-item-bg, rgba(0, 0, 0, 0.02))}.shortcut-label{font-size:14px;color:var(--kritzel-settings-content-text-color, #666666)}.shortcut-key{font-family:monospace;font-size:12px;padding:2px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-key-bg, #f0f0f0);color:var(--kritzel-settings-shortcut-key-color, #333333);border:1px solid var(--kritzel-settings-shortcut-key-border, #ddd)}`;
 
@@ -31627,7 +31663,7 @@ const KritzelSettings = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '8b96261465efeabb2eb0cf724d29699de5e230a8' }, index.h("kritzel-dialog", { key: '273a9df290bb97d59000a97f91821e7bad3f3896', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, index.h("kritzel-master-detail", { key: '64d17dfaa2a0baf2d4a5d00fe5fc65ad40c96ec6', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
+        return (index.h(index.Host, { key: '7e65885051a30635291bb98fb87addf0bdbca8e8' }, index.h("kritzel-dialog", { key: 'c795bad227882904d8dda96768e8ccdd7c48df71', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, index.h("kritzel-master-detail", { key: 'eff1486d14d4b55441b9a52b293da7459771331d', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
     }
     static get watchers() { return {
         "settings": [{
@@ -31671,7 +31707,3078 @@ const KritzelShapeFill = class {
 };
 KritzelShapeFill.style = kritzelShapeFillCss();
 
-const kritzelShareDialogCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-width-small:420px}.share-content{display:flex;flex-direction:column;gap:20px}.share-section{display:flex;flex-direction:column;gap:8px}.share-section-revoke{padding-top:12px;border-top:1px solid var(--kritzel-share-dialog-border-color, #e5e5e5)}.share-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.share-label-group{display:flex;flex-direction:column;gap:8px;flex:1}.share-label{font-size:14px;font-weight:600;color:var(--kritzel-share-dialog-label-color, #333333);margin:0}.share-description{font-size:12px;color:var(--kritzel-share-dialog-description-color, #666666);margin:0;line-height:1.4}.share-url-container{display:flex;align-items:center;gap:8px;background:var(--kritzel-share-dialog-input-background, #f5f5f5);border:1px solid var(--kritzel-share-dialog-input-border-color, #e0e0e0);border-radius:6px;padding:4px 4px 4px 12px}.share-url-input{flex:1;border:none;background:transparent;font-size:13px;color:var(--kritzel-share-dialog-input-text-color, #333333);outline:none;min-width:0;padding:8px 0}.share-url-input:focus{outline:none}.share-url-input::selection{background:var(--kritzel-share-dialog-selection-color, #cce5ff)}.copy-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:4px;background:var(--kritzel-share-dialog-copy-button-background, #ffffff);color:var(--kritzel-share-dialog-copy-button-color, #666666);cursor:pointer;transition:all 0.15s ease;flex-shrink:0}.copy-button:hover{background:var(--kritzel-share-dialog-copy-button-hover-background, #e8e8e8);color:var(--kritzel-share-dialog-copy-button-hover-color, #333333)}.copy-button.copy-success{background:var(--kritzel-share-dialog-copy-success-background, #d4edda);color:var(--kritzel-share-dialog-copy-success-color, #28a745)}.revoke-button{align-self:flex-start;padding:8px 16px;border:1px solid var(--kritzel-share-dialog-revoke-button-border-color, #dc3545);border-radius:6px;background:transparent;color:var(--kritzel-share-dialog-revoke-button-color, #dc3545);font-size:13px;font-weight:500;cursor:pointer;transition:all 0.15s ease}.revoke-button:hover{background:var(--kritzel-share-dialog-revoke-button-hover-background, #dc3545);color:var(--kritzel-share-dialog-revoke-button-hover-color, #ffffff)}kritzel-dropdown{--kritzel-dropdown-trigger-padding:8px 12px;--kritzel-dropdown-trigger-font-size:13px}`;
+var browser = {};
+
+var canPromise;
+var hasRequiredCanPromise;
+
+function requireCanPromise () {
+	if (hasRequiredCanPromise) return canPromise;
+	hasRequiredCanPromise = 1;
+	// can-promise has a crash in some versions of react native that dont have
+	// standard global objects
+	// https://github.com/soldair/node-qrcode/issues/157
+
+	canPromise = function () {
+	  return typeof Promise === 'function' && Promise.prototype && Promise.prototype.then
+	};
+	return canPromise;
+}
+
+var qrcode = {};
+
+var utils$1 = {};
+
+var hasRequiredUtils$1;
+
+function requireUtils$1 () {
+	if (hasRequiredUtils$1) return utils$1;
+	hasRequiredUtils$1 = 1;
+	let toSJISFunction;
+	const CODEWORDS_COUNT = [
+	  0, // Not used
+	  26, 44, 70, 100, 134, 172, 196, 242, 292, 346,
+	  404, 466, 532, 581, 655, 733, 815, 901, 991, 1085,
+	  1156, 1258, 1364, 1474, 1588, 1706, 1828, 1921, 2051, 2185,
+	  2323, 2465, 2611, 2761, 2876, 3034, 3196, 3362, 3532, 3706
+	];
+
+	/**
+	 * Returns the QR Code size for the specified version
+	 *
+	 * @param  {Number} version QR Code version
+	 * @return {Number}         size of QR code
+	 */
+	utils$1.getSymbolSize = function getSymbolSize (version) {
+	  if (!version) throw new Error('"version" cannot be null or undefined')
+	  if (version < 1 || version > 40) throw new Error('"version" should be in range from 1 to 40')
+	  return version * 4 + 17
+	};
+
+	/**
+	 * Returns the total number of codewords used to store data and EC information.
+	 *
+	 * @param  {Number} version QR Code version
+	 * @return {Number}         Data length in bits
+	 */
+	utils$1.getSymbolTotalCodewords = function getSymbolTotalCodewords (version) {
+	  return CODEWORDS_COUNT[version]
+	};
+
+	/**
+	 * Encode data with Bose-Chaudhuri-Hocquenghem
+	 *
+	 * @param  {Number} data Value to encode
+	 * @return {Number}      Encoded value
+	 */
+	utils$1.getBCHDigit = function (data) {
+	  let digit = 0;
+
+	  while (data !== 0) {
+	    digit++;
+	    data >>>= 1;
+	  }
+
+	  return digit
+	};
+
+	utils$1.setToSJISFunction = function setToSJISFunction (f) {
+	  if (typeof f !== 'function') {
+	    throw new Error('"toSJISFunc" is not a valid function.')
+	  }
+
+	  toSJISFunction = f;
+	};
+
+	utils$1.isKanjiModeEnabled = function () {
+	  return typeof toSJISFunction !== 'undefined'
+	};
+
+	utils$1.toSJIS = function toSJIS (kanji) {
+	  return toSJISFunction(kanji)
+	};
+	return utils$1;
+}
+
+var errorCorrectionLevel = {};
+
+var hasRequiredErrorCorrectionLevel;
+
+function requireErrorCorrectionLevel () {
+	if (hasRequiredErrorCorrectionLevel) return errorCorrectionLevel;
+	hasRequiredErrorCorrectionLevel = 1;
+	(function (exports) {
+		exports.L = { bit: 1 };
+		exports.M = { bit: 0 };
+		exports.Q = { bit: 3 };
+		exports.H = { bit: 2 };
+
+		function fromString (string) {
+		  if (typeof string !== 'string') {
+		    throw new Error('Param is not a string')
+		  }
+
+		  const lcStr = string.toLowerCase();
+
+		  switch (lcStr) {
+		    case 'l':
+		    case 'low':
+		      return exports.L
+
+		    case 'm':
+		    case 'medium':
+		      return exports.M
+
+		    case 'q':
+		    case 'quartile':
+		      return exports.Q
+
+		    case 'h':
+		    case 'high':
+		      return exports.H
+
+		    default:
+		      throw new Error('Unknown EC Level: ' + string)
+		  }
+		}
+
+		exports.isValid = function isValid (level) {
+		  return level && typeof level.bit !== 'undefined' &&
+		    level.bit >= 0 && level.bit < 4
+		};
+
+		exports.from = function from (value, defaultValue) {
+		  if (exports.isValid(value)) {
+		    return value
+		  }
+
+		  try {
+		    return fromString(value)
+		  } catch (e) {
+		    return defaultValue
+		  }
+		}; 
+	} (errorCorrectionLevel));
+	return errorCorrectionLevel;
+}
+
+var bitBuffer;
+var hasRequiredBitBuffer;
+
+function requireBitBuffer () {
+	if (hasRequiredBitBuffer) return bitBuffer;
+	hasRequiredBitBuffer = 1;
+	function BitBuffer () {
+	  this.buffer = [];
+	  this.length = 0;
+	}
+
+	BitBuffer.prototype = {
+
+	  get: function (index) {
+	    const bufIndex = Math.floor(index / 8);
+	    return ((this.buffer[bufIndex] >>> (7 - index % 8)) & 1) === 1
+	  },
+
+	  put: function (num, length) {
+	    for (let i = 0; i < length; i++) {
+	      this.putBit(((num >>> (length - i - 1)) & 1) === 1);
+	    }
+	  },
+
+	  getLengthInBits: function () {
+	    return this.length
+	  },
+
+	  putBit: function (bit) {
+	    const bufIndex = Math.floor(this.length / 8);
+	    if (this.buffer.length <= bufIndex) {
+	      this.buffer.push(0);
+	    }
+
+	    if (bit) {
+	      this.buffer[bufIndex] |= (0x80 >>> (this.length % 8));
+	    }
+
+	    this.length++;
+	  }
+	};
+
+	bitBuffer = BitBuffer;
+	return bitBuffer;
+}
+
+/**
+ * Helper class to handle QR Code symbol modules
+ *
+ * @param {Number} size Symbol size
+ */
+
+var bitMatrix;
+var hasRequiredBitMatrix;
+
+function requireBitMatrix () {
+	if (hasRequiredBitMatrix) return bitMatrix;
+	hasRequiredBitMatrix = 1;
+	function BitMatrix (size) {
+	  if (!size || size < 1) {
+	    throw new Error('BitMatrix size must be defined and greater than 0')
+	  }
+
+	  this.size = size;
+	  this.data = new Uint8Array(size * size);
+	  this.reservedBit = new Uint8Array(size * size);
+	}
+
+	/**
+	 * Set bit value at specified location
+	 * If reserved flag is set, this bit will be ignored during masking process
+	 *
+	 * @param {Number}  row
+	 * @param {Number}  col
+	 * @param {Boolean} value
+	 * @param {Boolean} reserved
+	 */
+	BitMatrix.prototype.set = function (row, col, value, reserved) {
+	  const index = row * this.size + col;
+	  this.data[index] = value;
+	  if (reserved) this.reservedBit[index] = true;
+	};
+
+	/**
+	 * Returns bit value at specified location
+	 *
+	 * @param  {Number}  row
+	 * @param  {Number}  col
+	 * @return {Boolean}
+	 */
+	BitMatrix.prototype.get = function (row, col) {
+	  return this.data[row * this.size + col]
+	};
+
+	/**
+	 * Applies xor operator at specified location
+	 * (used during masking process)
+	 *
+	 * @param {Number}  row
+	 * @param {Number}  col
+	 * @param {Boolean} value
+	 */
+	BitMatrix.prototype.xor = function (row, col, value) {
+	  this.data[row * this.size + col] ^= value;
+	};
+
+	/**
+	 * Check if bit at specified location is reserved
+	 *
+	 * @param {Number}   row
+	 * @param {Number}   col
+	 * @return {Boolean}
+	 */
+	BitMatrix.prototype.isReserved = function (row, col) {
+	  return this.reservedBit[row * this.size + col]
+	};
+
+	bitMatrix = BitMatrix;
+	return bitMatrix;
+}
+
+var alignmentPattern = {};
+
+/**
+ * Alignment pattern are fixed reference pattern in defined positions
+ * in a matrix symbology, which enables the decode software to re-synchronise
+ * the coordinate mapping of the image modules in the event of moderate amounts
+ * of distortion of the image.
+ *
+ * Alignment patterns are present only in QR Code symbols of version 2 or larger
+ * and their number depends on the symbol version.
+ */
+
+var hasRequiredAlignmentPattern;
+
+function requireAlignmentPattern () {
+	if (hasRequiredAlignmentPattern) return alignmentPattern;
+	hasRequiredAlignmentPattern = 1;
+	(function (exports) {
+		const getSymbolSize = requireUtils$1().getSymbolSize;
+
+		/**
+		 * Calculate the row/column coordinates of the center module of each alignment pattern
+		 * for the specified QR Code version.
+		 *
+		 * The alignment patterns are positioned symmetrically on either side of the diagonal
+		 * running from the top left corner of the symbol to the bottom right corner.
+		 *
+		 * Since positions are simmetrical only half of the coordinates are returned.
+		 * Each item of the array will represent in turn the x and y coordinate.
+		 * @see {@link getPositions}
+		 *
+		 * @param  {Number} version QR Code version
+		 * @return {Array}          Array of coordinate
+		 */
+		exports.getRowColCoords = function getRowColCoords (version) {
+		  if (version === 1) return []
+
+		  const posCount = Math.floor(version / 7) + 2;
+		  const size = getSymbolSize(version);
+		  const intervals = size === 145 ? 26 : Math.ceil((size - 13) / (2 * posCount - 2)) * 2;
+		  const positions = [size - 7]; // Last coord is always (size - 7)
+
+		  for (let i = 1; i < posCount - 1; i++) {
+		    positions[i] = positions[i - 1] - intervals;
+		  }
+
+		  positions.push(6); // First coord is always 6
+
+		  return positions.reverse()
+		};
+
+		/**
+		 * Returns an array containing the positions of each alignment pattern.
+		 * Each array's element represent the center point of the pattern as (x, y) coordinates
+		 *
+		 * Coordinates are calculated expanding the row/column coordinates returned by {@link getRowColCoords}
+		 * and filtering out the items that overlaps with finder pattern
+		 *
+		 * @example
+		 * For a Version 7 symbol {@link getRowColCoords} returns values 6, 22 and 38.
+		 * The alignment patterns, therefore, are to be centered on (row, column)
+		 * positions (6,22), (22,6), (22,22), (22,38), (38,22), (38,38).
+		 * Note that the coordinates (6,6), (6,38), (38,6) are occupied by finder patterns
+		 * and are not therefore used for alignment patterns.
+		 *
+		 * let pos = getPositions(7)
+		 * // [[6,22], [22,6], [22,22], [22,38], [38,22], [38,38]]
+		 *
+		 * @param  {Number} version QR Code version
+		 * @return {Array}          Array of coordinates
+		 */
+		exports.getPositions = function getPositions (version) {
+		  const coords = [];
+		  const pos = exports.getRowColCoords(version);
+		  const posLength = pos.length;
+
+		  for (let i = 0; i < posLength; i++) {
+		    for (let j = 0; j < posLength; j++) {
+		      // Skip if position is occupied by finder patterns
+		      if ((i === 0 && j === 0) || // top-left
+		          (i === 0 && j === posLength - 1) || // bottom-left
+		          (i === posLength - 1 && j === 0)) { // top-right
+		        continue
+		      }
+
+		      coords.push([pos[i], pos[j]]);
+		    }
+		  }
+
+		  return coords
+		}; 
+	} (alignmentPattern));
+	return alignmentPattern;
+}
+
+var finderPattern = {};
+
+var hasRequiredFinderPattern;
+
+function requireFinderPattern () {
+	if (hasRequiredFinderPattern) return finderPattern;
+	hasRequiredFinderPattern = 1;
+	const getSymbolSize = requireUtils$1().getSymbolSize;
+	const FINDER_PATTERN_SIZE = 7;
+
+	/**
+	 * Returns an array containing the positions of each finder pattern.
+	 * Each array's element represent the top-left point of the pattern as (x, y) coordinates
+	 *
+	 * @param  {Number} version QR Code version
+	 * @return {Array}          Array of coordinates
+	 */
+	finderPattern.getPositions = function getPositions (version) {
+	  const size = getSymbolSize(version);
+
+	  return [
+	    // top-left
+	    [0, 0],
+	    // top-right
+	    [size - FINDER_PATTERN_SIZE, 0],
+	    // bottom-left
+	    [0, size - FINDER_PATTERN_SIZE]
+	  ]
+	};
+	return finderPattern;
+}
+
+var maskPattern = {};
+
+/**
+ * Data mask pattern reference
+ * @type {Object}
+ */
+
+var hasRequiredMaskPattern;
+
+function requireMaskPattern () {
+	if (hasRequiredMaskPattern) return maskPattern;
+	hasRequiredMaskPattern = 1;
+	(function (exports) {
+		exports.Patterns = {
+		  PATTERN000: 0,
+		  PATTERN001: 1,
+		  PATTERN010: 2,
+		  PATTERN011: 3,
+		  PATTERN100: 4,
+		  PATTERN101: 5,
+		  PATTERN110: 6,
+		  PATTERN111: 7
+		};
+
+		/**
+		 * Weighted penalty scores for the undesirable features
+		 * @type {Object}
+		 */
+		const PenaltyScores = {
+		  N1: 3,
+		  N2: 3,
+		  N3: 40,
+		  N4: 10
+		};
+
+		/**
+		 * Check if mask pattern value is valid
+		 *
+		 * @param  {Number}  mask    Mask pattern
+		 * @return {Boolean}         true if valid, false otherwise
+		 */
+		exports.isValid = function isValid (mask) {
+		  return mask != null && mask !== '' && !isNaN(mask) && mask >= 0 && mask <= 7
+		};
+
+		/**
+		 * Returns mask pattern from a value.
+		 * If value is not valid, returns undefined
+		 *
+		 * @param  {Number|String} value        Mask pattern value
+		 * @return {Number}                     Valid mask pattern or undefined
+		 */
+		exports.from = function from (value) {
+		  return exports.isValid(value) ? parseInt(value, 10) : undefined
+		};
+
+		/**
+		* Find adjacent modules in row/column with the same color
+		* and assign a penalty value.
+		*
+		* Points: N1 + i
+		* i is the amount by which the number of adjacent modules of the same color exceeds 5
+		*/
+		exports.getPenaltyN1 = function getPenaltyN1 (data) {
+		  const size = data.size;
+		  let points = 0;
+		  let sameCountCol = 0;
+		  let sameCountRow = 0;
+		  let lastCol = null;
+		  let lastRow = null;
+
+		  for (let row = 0; row < size; row++) {
+		    sameCountCol = sameCountRow = 0;
+		    lastCol = lastRow = null;
+
+		    for (let col = 0; col < size; col++) {
+		      let module = data.get(row, col);
+		      if (module === lastCol) {
+		        sameCountCol++;
+		      } else {
+		        if (sameCountCol >= 5) points += PenaltyScores.N1 + (sameCountCol - 5);
+		        lastCol = module;
+		        sameCountCol = 1;
+		      }
+
+		      module = data.get(col, row);
+		      if (module === lastRow) {
+		        sameCountRow++;
+		      } else {
+		        if (sameCountRow >= 5) points += PenaltyScores.N1 + (sameCountRow - 5);
+		        lastRow = module;
+		        sameCountRow = 1;
+		      }
+		    }
+
+		    if (sameCountCol >= 5) points += PenaltyScores.N1 + (sameCountCol - 5);
+		    if (sameCountRow >= 5) points += PenaltyScores.N1 + (sameCountRow - 5);
+		  }
+
+		  return points
+		};
+
+		/**
+		 * Find 2x2 blocks with the same color and assign a penalty value
+		 *
+		 * Points: N2 * (m - 1) * (n - 1)
+		 */
+		exports.getPenaltyN2 = function getPenaltyN2 (data) {
+		  const size = data.size;
+		  let points = 0;
+
+		  for (let row = 0; row < size - 1; row++) {
+		    for (let col = 0; col < size - 1; col++) {
+		      const last = data.get(row, col) +
+		        data.get(row, col + 1) +
+		        data.get(row + 1, col) +
+		        data.get(row + 1, col + 1);
+
+		      if (last === 4 || last === 0) points++;
+		    }
+		  }
+
+		  return points * PenaltyScores.N2
+		};
+
+		/**
+		 * Find 1:1:3:1:1 ratio (dark:light:dark:light:dark) pattern in row/column,
+		 * preceded or followed by light area 4 modules wide
+		 *
+		 * Points: N3 * number of pattern found
+		 */
+		exports.getPenaltyN3 = function getPenaltyN3 (data) {
+		  const size = data.size;
+		  let points = 0;
+		  let bitsCol = 0;
+		  let bitsRow = 0;
+
+		  for (let row = 0; row < size; row++) {
+		    bitsCol = bitsRow = 0;
+		    for (let col = 0; col < size; col++) {
+		      bitsCol = ((bitsCol << 1) & 0x7FF) | data.get(row, col);
+		      if (col >= 10 && (bitsCol === 0x5D0 || bitsCol === 0x05D)) points++;
+
+		      bitsRow = ((bitsRow << 1) & 0x7FF) | data.get(col, row);
+		      if (col >= 10 && (bitsRow === 0x5D0 || bitsRow === 0x05D)) points++;
+		    }
+		  }
+
+		  return points * PenaltyScores.N3
+		};
+
+		/**
+		 * Calculate proportion of dark modules in entire symbol
+		 *
+		 * Points: N4 * k
+		 *
+		 * k is the rating of the deviation of the proportion of dark modules
+		 * in the symbol from 50% in steps of 5%
+		 */
+		exports.getPenaltyN4 = function getPenaltyN4 (data) {
+		  let darkCount = 0;
+		  const modulesCount = data.data.length;
+
+		  for (let i = 0; i < modulesCount; i++) darkCount += data.data[i];
+
+		  const k = Math.abs(Math.ceil((darkCount * 100 / modulesCount) / 5) - 10);
+
+		  return k * PenaltyScores.N4
+		};
+
+		/**
+		 * Return mask value at given position
+		 *
+		 * @param  {Number} maskPattern Pattern reference value
+		 * @param  {Number} i           Row
+		 * @param  {Number} j           Column
+		 * @return {Boolean}            Mask value
+		 */
+		function getMaskAt (maskPattern, i, j) {
+		  switch (maskPattern) {
+		    case exports.Patterns.PATTERN000: return (i + j) % 2 === 0
+		    case exports.Patterns.PATTERN001: return i % 2 === 0
+		    case exports.Patterns.PATTERN010: return j % 3 === 0
+		    case exports.Patterns.PATTERN011: return (i + j) % 3 === 0
+		    case exports.Patterns.PATTERN100: return (Math.floor(i / 2) + Math.floor(j / 3)) % 2 === 0
+		    case exports.Patterns.PATTERN101: return (i * j) % 2 + (i * j) % 3 === 0
+		    case exports.Patterns.PATTERN110: return ((i * j) % 2 + (i * j) % 3) % 2 === 0
+		    case exports.Patterns.PATTERN111: return ((i * j) % 3 + (i + j) % 2) % 2 === 0
+
+		    default: throw new Error('bad maskPattern:' + maskPattern)
+		  }
+		}
+
+		/**
+		 * Apply a mask pattern to a BitMatrix
+		 *
+		 * @param  {Number}    pattern Pattern reference number
+		 * @param  {BitMatrix} data    BitMatrix data
+		 */
+		exports.applyMask = function applyMask (pattern, data) {
+		  const size = data.size;
+
+		  for (let col = 0; col < size; col++) {
+		    for (let row = 0; row < size; row++) {
+		      if (data.isReserved(row, col)) continue
+		      data.xor(row, col, getMaskAt(pattern, row, col));
+		    }
+		  }
+		};
+
+		/**
+		 * Returns the best mask pattern for data
+		 *
+		 * @param  {BitMatrix} data
+		 * @return {Number} Mask pattern reference number
+		 */
+		exports.getBestMask = function getBestMask (data, setupFormatFunc) {
+		  const numPatterns = Object.keys(exports.Patterns).length;
+		  let bestPattern = 0;
+		  let lowerPenalty = Infinity;
+
+		  for (let p = 0; p < numPatterns; p++) {
+		    setupFormatFunc(p);
+		    exports.applyMask(p, data);
+
+		    // Calculate penalty
+		    const penalty =
+		      exports.getPenaltyN1(data) +
+		      exports.getPenaltyN2(data) +
+		      exports.getPenaltyN3(data) +
+		      exports.getPenaltyN4(data);
+
+		    // Undo previously applied mask
+		    exports.applyMask(p, data);
+
+		    if (penalty < lowerPenalty) {
+		      lowerPenalty = penalty;
+		      bestPattern = p;
+		    }
+		  }
+
+		  return bestPattern
+		}; 
+	} (maskPattern));
+	return maskPattern;
+}
+
+var errorCorrectionCode = {};
+
+var hasRequiredErrorCorrectionCode;
+
+function requireErrorCorrectionCode () {
+	if (hasRequiredErrorCorrectionCode) return errorCorrectionCode;
+	hasRequiredErrorCorrectionCode = 1;
+	const ECLevel = requireErrorCorrectionLevel();
+
+	const EC_BLOCKS_TABLE = [
+	// L  M  Q  H
+	  1, 1, 1, 1,
+	  1, 1, 1, 1,
+	  1, 1, 2, 2,
+	  1, 2, 2, 4,
+	  1, 2, 4, 4,
+	  2, 4, 4, 4,
+	  2, 4, 6, 5,
+	  2, 4, 6, 6,
+	  2, 5, 8, 8,
+	  4, 5, 8, 8,
+	  4, 5, 8, 11,
+	  4, 8, 10, 11,
+	  4, 9, 12, 16,
+	  4, 9, 16, 16,
+	  6, 10, 12, 18,
+	  6, 10, 17, 16,
+	  6, 11, 16, 19,
+	  6, 13, 18, 21,
+	  7, 14, 21, 25,
+	  8, 16, 20, 25,
+	  8, 17, 23, 25,
+	  9, 17, 23, 34,
+	  9, 18, 25, 30,
+	  10, 20, 27, 32,
+	  12, 21, 29, 35,
+	  12, 23, 34, 37,
+	  12, 25, 34, 40,
+	  13, 26, 35, 42,
+	  14, 28, 38, 45,
+	  15, 29, 40, 48,
+	  16, 31, 43, 51,
+	  17, 33, 45, 54,
+	  18, 35, 48, 57,
+	  19, 37, 51, 60,
+	  19, 38, 53, 63,
+	  20, 40, 56, 66,
+	  21, 43, 59, 70,
+	  22, 45, 62, 74,
+	  24, 47, 65, 77,
+	  25, 49, 68, 81
+	];
+
+	const EC_CODEWORDS_TABLE = [
+	// L  M  Q  H
+	  7, 10, 13, 17,
+	  10, 16, 22, 28,
+	  15, 26, 36, 44,
+	  20, 36, 52, 64,
+	  26, 48, 72, 88,
+	  36, 64, 96, 112,
+	  40, 72, 108, 130,
+	  48, 88, 132, 156,
+	  60, 110, 160, 192,
+	  72, 130, 192, 224,
+	  80, 150, 224, 264,
+	  96, 176, 260, 308,
+	  104, 198, 288, 352,
+	  120, 216, 320, 384,
+	  132, 240, 360, 432,
+	  144, 280, 408, 480,
+	  168, 308, 448, 532,
+	  180, 338, 504, 588,
+	  196, 364, 546, 650,
+	  224, 416, 600, 700,
+	  224, 442, 644, 750,
+	  252, 476, 690, 816,
+	  270, 504, 750, 900,
+	  300, 560, 810, 960,
+	  312, 588, 870, 1050,
+	  336, 644, 952, 1110,
+	  360, 700, 1020, 1200,
+	  390, 728, 1050, 1260,
+	  420, 784, 1140, 1350,
+	  450, 812, 1200, 1440,
+	  480, 868, 1290, 1530,
+	  510, 924, 1350, 1620,
+	  540, 980, 1440, 1710,
+	  570, 1036, 1530, 1800,
+	  570, 1064, 1590, 1890,
+	  600, 1120, 1680, 1980,
+	  630, 1204, 1770, 2100,
+	  660, 1260, 1860, 2220,
+	  720, 1316, 1950, 2310,
+	  750, 1372, 2040, 2430
+	];
+
+	/**
+	 * Returns the number of error correction block that the QR Code should contain
+	 * for the specified version and error correction level.
+	 *
+	 * @param  {Number} version              QR Code version
+	 * @param  {Number} errorCorrectionLevel Error correction level
+	 * @return {Number}                      Number of error correction blocks
+	 */
+	errorCorrectionCode.getBlocksCount = function getBlocksCount (version, errorCorrectionLevel) {
+	  switch (errorCorrectionLevel) {
+	    case ECLevel.L:
+	      return EC_BLOCKS_TABLE[(version - 1) * 4 + 0]
+	    case ECLevel.M:
+	      return EC_BLOCKS_TABLE[(version - 1) * 4 + 1]
+	    case ECLevel.Q:
+	      return EC_BLOCKS_TABLE[(version - 1) * 4 + 2]
+	    case ECLevel.H:
+	      return EC_BLOCKS_TABLE[(version - 1) * 4 + 3]
+	    default:
+	      return undefined
+	  }
+	};
+
+	/**
+	 * Returns the number of error correction codewords to use for the specified
+	 * version and error correction level.
+	 *
+	 * @param  {Number} version              QR Code version
+	 * @param  {Number} errorCorrectionLevel Error correction level
+	 * @return {Number}                      Number of error correction codewords
+	 */
+	errorCorrectionCode.getTotalCodewordsCount = function getTotalCodewordsCount (version, errorCorrectionLevel) {
+	  switch (errorCorrectionLevel) {
+	    case ECLevel.L:
+	      return EC_CODEWORDS_TABLE[(version - 1) * 4 + 0]
+	    case ECLevel.M:
+	      return EC_CODEWORDS_TABLE[(version - 1) * 4 + 1]
+	    case ECLevel.Q:
+	      return EC_CODEWORDS_TABLE[(version - 1) * 4 + 2]
+	    case ECLevel.H:
+	      return EC_CODEWORDS_TABLE[(version - 1) * 4 + 3]
+	    default:
+	      return undefined
+	  }
+	};
+	return errorCorrectionCode;
+}
+
+var polynomial = {};
+
+var galoisField = {};
+
+var hasRequiredGaloisField;
+
+function requireGaloisField () {
+	if (hasRequiredGaloisField) return galoisField;
+	hasRequiredGaloisField = 1;
+	const EXP_TABLE = new Uint8Array(512);
+	const LOG_TABLE = new Uint8Array(256)
+	/**
+	 * Precompute the log and anti-log tables for faster computation later
+	 *
+	 * For each possible value in the galois field 2^8, we will pre-compute
+	 * the logarithm and anti-logarithm (exponential) of this value
+	 *
+	 * ref {@link https://en.wikiversity.org/wiki/Reed%E2%80%93Solomon_codes_for_coders#Introduction_to_mathematical_fields}
+	 */
+	;(function initTables () {
+	  let x = 1;
+	  for (let i = 0; i < 255; i++) {
+	    EXP_TABLE[i] = x;
+	    LOG_TABLE[x] = i;
+
+	    x <<= 1; // multiply by 2
+
+	    // The QR code specification says to use byte-wise modulo 100011101 arithmetic.
+	    // This means that when a number is 256 or larger, it should be XORed with 0x11D.
+	    if (x & 0x100) { // similar to x >= 256, but a lot faster (because 0x100 == 256)
+	      x ^= 0x11D;
+	    }
+	  }
+
+	  // Optimization: double the size of the anti-log table so that we don't need to mod 255 to
+	  // stay inside the bounds (because we will mainly use this table for the multiplication of
+	  // two GF numbers, no more).
+	  // @see {@link mul}
+	  for (let i = 255; i < 512; i++) {
+	    EXP_TABLE[i] = EXP_TABLE[i - 255];
+	  }
+	}());
+
+	/**
+	 * Returns log value of n inside Galois Field
+	 *
+	 * @param  {Number} n
+	 * @return {Number}
+	 */
+	galoisField.log = function log (n) {
+	  if (n < 1) throw new Error('log(' + n + ')')
+	  return LOG_TABLE[n]
+	};
+
+	/**
+	 * Returns anti-log value of n inside Galois Field
+	 *
+	 * @param  {Number} n
+	 * @return {Number}
+	 */
+	galoisField.exp = function exp (n) {
+	  return EXP_TABLE[n]
+	};
+
+	/**
+	 * Multiplies two number inside Galois Field
+	 *
+	 * @param  {Number} x
+	 * @param  {Number} y
+	 * @return {Number}
+	 */
+	galoisField.mul = function mul (x, y) {
+	  if (x === 0 || y === 0) return 0
+
+	  // should be EXP_TABLE[(LOG_TABLE[x] + LOG_TABLE[y]) % 255] if EXP_TABLE wasn't oversized
+	  // @see {@link initTables}
+	  return EXP_TABLE[LOG_TABLE[x] + LOG_TABLE[y]]
+	};
+	return galoisField;
+}
+
+var hasRequiredPolynomial;
+
+function requirePolynomial () {
+	if (hasRequiredPolynomial) return polynomial;
+	hasRequiredPolynomial = 1;
+	(function (exports) {
+		const GF = requireGaloisField();
+
+		/**
+		 * Multiplies two polynomials inside Galois Field
+		 *
+		 * @param  {Uint8Array} p1 Polynomial
+		 * @param  {Uint8Array} p2 Polynomial
+		 * @return {Uint8Array}    Product of p1 and p2
+		 */
+		exports.mul = function mul (p1, p2) {
+		  const coeff = new Uint8Array(p1.length + p2.length - 1);
+
+		  for (let i = 0; i < p1.length; i++) {
+		    for (let j = 0; j < p2.length; j++) {
+		      coeff[i + j] ^= GF.mul(p1[i], p2[j]);
+		    }
+		  }
+
+		  return coeff
+		};
+
+		/**
+		 * Calculate the remainder of polynomials division
+		 *
+		 * @param  {Uint8Array} divident Polynomial
+		 * @param  {Uint8Array} divisor  Polynomial
+		 * @return {Uint8Array}          Remainder
+		 */
+		exports.mod = function mod (divident, divisor) {
+		  let result = new Uint8Array(divident);
+
+		  while ((result.length - divisor.length) >= 0) {
+		    const coeff = result[0];
+
+		    for (let i = 0; i < divisor.length; i++) {
+		      result[i] ^= GF.mul(divisor[i], coeff);
+		    }
+
+		    // remove all zeros from buffer head
+		    let offset = 0;
+		    while (offset < result.length && result[offset] === 0) offset++;
+		    result = result.slice(offset);
+		  }
+
+		  return result
+		};
+
+		/**
+		 * Generate an irreducible generator polynomial of specified degree
+		 * (used by Reed-Solomon encoder)
+		 *
+		 * @param  {Number} degree Degree of the generator polynomial
+		 * @return {Uint8Array}    Buffer containing polynomial coefficients
+		 */
+		exports.generateECPolynomial = function generateECPolynomial (degree) {
+		  let poly = new Uint8Array([1]);
+		  for (let i = 0; i < degree; i++) {
+		    poly = exports.mul(poly, new Uint8Array([1, GF.exp(i)]));
+		  }
+
+		  return poly
+		}; 
+	} (polynomial));
+	return polynomial;
+}
+
+var reedSolomonEncoder;
+var hasRequiredReedSolomonEncoder;
+
+function requireReedSolomonEncoder () {
+	if (hasRequiredReedSolomonEncoder) return reedSolomonEncoder;
+	hasRequiredReedSolomonEncoder = 1;
+	const Polynomial = requirePolynomial();
+
+	function ReedSolomonEncoder (degree) {
+	  this.genPoly = undefined;
+	  this.degree = degree;
+
+	  if (this.degree) this.initialize(this.degree);
+	}
+
+	/**
+	 * Initialize the encoder.
+	 * The input param should correspond to the number of error correction codewords.
+	 *
+	 * @param  {Number} degree
+	 */
+	ReedSolomonEncoder.prototype.initialize = function initialize (degree) {
+	  // create an irreducible generator polynomial
+	  this.degree = degree;
+	  this.genPoly = Polynomial.generateECPolynomial(this.degree);
+	};
+
+	/**
+	 * Encodes a chunk of data
+	 *
+	 * @param  {Uint8Array} data Buffer containing input data
+	 * @return {Uint8Array}      Buffer containing encoded data
+	 */
+	ReedSolomonEncoder.prototype.encode = function encode (data) {
+	  if (!this.genPoly) {
+	    throw new Error('Encoder not initialized')
+	  }
+
+	  // Calculate EC for this data block
+	  // extends data size to data+genPoly size
+	  const paddedData = new Uint8Array(data.length + this.degree);
+	  paddedData.set(data);
+
+	  // The error correction codewords are the remainder after dividing the data codewords
+	  // by a generator polynomial
+	  const remainder = Polynomial.mod(paddedData, this.genPoly);
+
+	  // return EC data blocks (last n byte, where n is the degree of genPoly)
+	  // If coefficients number in remainder are less than genPoly degree,
+	  // pad with 0s to the left to reach the needed number of coefficients
+	  const start = this.degree - remainder.length;
+	  if (start > 0) {
+	    const buff = new Uint8Array(this.degree);
+	    buff.set(remainder, start);
+
+	    return buff
+	  }
+
+	  return remainder
+	};
+
+	reedSolomonEncoder = ReedSolomonEncoder;
+	return reedSolomonEncoder;
+}
+
+var version = {};
+
+var mode = {};
+
+var versionCheck = {};
+
+/**
+ * Check if QR Code version is valid
+ *
+ * @param  {Number}  version QR Code version
+ * @return {Boolean}         true if valid version, false otherwise
+ */
+
+var hasRequiredVersionCheck;
+
+function requireVersionCheck () {
+	if (hasRequiredVersionCheck) return versionCheck;
+	hasRequiredVersionCheck = 1;
+	versionCheck.isValid = function isValid (version) {
+	  return !isNaN(version) && version >= 1 && version <= 40
+	};
+	return versionCheck;
+}
+
+var regex = {};
+
+var hasRequiredRegex;
+
+function requireRegex () {
+	if (hasRequiredRegex) return regex;
+	hasRequiredRegex = 1;
+	const numeric = '[0-9]+';
+	const alphanumeric = '[A-Z $%*+\\-./:]+';
+	let kanji = '(?:[u3000-u303F]|[u3040-u309F]|[u30A0-u30FF]|' +
+	  '[uFF00-uFFEF]|[u4E00-u9FAF]|[u2605-u2606]|[u2190-u2195]|u203B|' +
+	  '[u2010u2015u2018u2019u2025u2026u201Cu201Du2225u2260]|' +
+	  '[u0391-u0451]|[u00A7u00A8u00B1u00B4u00D7u00F7])+';
+	kanji = kanji.replace(/u/g, '\\u');
+
+	const byte = '(?:(?![A-Z0-9 $%*+\\-./:]|' + kanji + ')(?:.|[\r\n]))+';
+
+	regex.KANJI = new RegExp(kanji, 'g');
+	regex.BYTE_KANJI = new RegExp('[^A-Z0-9 $%*+\\-./:]+', 'g');
+	regex.BYTE = new RegExp(byte, 'g');
+	regex.NUMERIC = new RegExp(numeric, 'g');
+	regex.ALPHANUMERIC = new RegExp(alphanumeric, 'g');
+
+	const TEST_KANJI = new RegExp('^' + kanji + '$');
+	const TEST_NUMERIC = new RegExp('^' + numeric + '$');
+	const TEST_ALPHANUMERIC = new RegExp('^[A-Z0-9 $%*+\\-./:]+$');
+
+	regex.testKanji = function testKanji (str) {
+	  return TEST_KANJI.test(str)
+	};
+
+	regex.testNumeric = function testNumeric (str) {
+	  return TEST_NUMERIC.test(str)
+	};
+
+	regex.testAlphanumeric = function testAlphanumeric (str) {
+	  return TEST_ALPHANUMERIC.test(str)
+	};
+	return regex;
+}
+
+var hasRequiredMode;
+
+function requireMode () {
+	if (hasRequiredMode) return mode;
+	hasRequiredMode = 1;
+	(function (exports) {
+		const VersionCheck = requireVersionCheck();
+		const Regex = requireRegex();
+
+		/**
+		 * Numeric mode encodes data from the decimal digit set (0 - 9)
+		 * (byte values 30HEX to 39HEX).
+		 * Normally, 3 data characters are represented by 10 bits.
+		 *
+		 * @type {Object}
+		 */
+		exports.NUMERIC = {
+		  id: 'Numeric',
+		  bit: 1 << 0,
+		  ccBits: [10, 12, 14]
+		};
+
+		/**
+		 * Alphanumeric mode encodes data from a set of 45 characters,
+		 * i.e. 10 numeric digits (0 - 9),
+		 *      26 alphabetic characters (A - Z),
+		 *   and 9 symbols (SP, $, %, *, +, -, ., /, :).
+		 * Normally, two input characters are represented by 11 bits.
+		 *
+		 * @type {Object}
+		 */
+		exports.ALPHANUMERIC = {
+		  id: 'Alphanumeric',
+		  bit: 1 << 1,
+		  ccBits: [9, 11, 13]
+		};
+
+		/**
+		 * In byte mode, data is encoded at 8 bits per character.
+		 *
+		 * @type {Object}
+		 */
+		exports.BYTE = {
+		  id: 'Byte',
+		  bit: 1 << 2,
+		  ccBits: [8, 16, 16]
+		};
+
+		/**
+		 * The Kanji mode efficiently encodes Kanji characters in accordance with
+		 * the Shift JIS system based on JIS X 0208.
+		 * The Shift JIS values are shifted from the JIS X 0208 values.
+		 * JIS X 0208 gives details of the shift coded representation.
+		 * Each two-byte character value is compacted to a 13-bit binary codeword.
+		 *
+		 * @type {Object}
+		 */
+		exports.KANJI = {
+		  id: 'Kanji',
+		  bit: 1 << 3,
+		  ccBits: [8, 10, 12]
+		};
+
+		/**
+		 * Mixed mode will contain a sequences of data in a combination of any of
+		 * the modes described above
+		 *
+		 * @type {Object}
+		 */
+		exports.MIXED = {
+		  bit: -1
+		};
+
+		/**
+		 * Returns the number of bits needed to store the data length
+		 * according to QR Code specifications.
+		 *
+		 * @param  {Mode}   mode    Data mode
+		 * @param  {Number} version QR Code version
+		 * @return {Number}         Number of bits
+		 */
+		exports.getCharCountIndicator = function getCharCountIndicator (mode, version) {
+		  if (!mode.ccBits) throw new Error('Invalid mode: ' + mode)
+
+		  if (!VersionCheck.isValid(version)) {
+		    throw new Error('Invalid version: ' + version)
+		  }
+
+		  if (version >= 1 && version < 10) return mode.ccBits[0]
+		  else if (version < 27) return mode.ccBits[1]
+		  return mode.ccBits[2]
+		};
+
+		/**
+		 * Returns the most efficient mode to store the specified data
+		 *
+		 * @param  {String} dataStr Input data string
+		 * @return {Mode}           Best mode
+		 */
+		exports.getBestModeForData = function getBestModeForData (dataStr) {
+		  if (Regex.testNumeric(dataStr)) return exports.NUMERIC
+		  else if (Regex.testAlphanumeric(dataStr)) return exports.ALPHANUMERIC
+		  else if (Regex.testKanji(dataStr)) return exports.KANJI
+		  else return exports.BYTE
+		};
+
+		/**
+		 * Return mode name as string
+		 *
+		 * @param {Mode} mode Mode object
+		 * @returns {String}  Mode name
+		 */
+		exports.toString = function toString (mode) {
+		  if (mode && mode.id) return mode.id
+		  throw new Error('Invalid mode')
+		};
+
+		/**
+		 * Check if input param is a valid mode object
+		 *
+		 * @param   {Mode}    mode Mode object
+		 * @returns {Boolean} True if valid mode, false otherwise
+		 */
+		exports.isValid = function isValid (mode) {
+		  return mode && mode.bit && mode.ccBits
+		};
+
+		/**
+		 * Get mode object from its name
+		 *
+		 * @param   {String} string Mode name
+		 * @returns {Mode}          Mode object
+		 */
+		function fromString (string) {
+		  if (typeof string !== 'string') {
+		    throw new Error('Param is not a string')
+		  }
+
+		  const lcStr = string.toLowerCase();
+
+		  switch (lcStr) {
+		    case 'numeric':
+		      return exports.NUMERIC
+		    case 'alphanumeric':
+		      return exports.ALPHANUMERIC
+		    case 'kanji':
+		      return exports.KANJI
+		    case 'byte':
+		      return exports.BYTE
+		    default:
+		      throw new Error('Unknown mode: ' + string)
+		  }
+		}
+
+		/**
+		 * Returns mode from a value.
+		 * If value is not a valid mode, returns defaultValue
+		 *
+		 * @param  {Mode|String} value        Encoding mode
+		 * @param  {Mode}        defaultValue Fallback value
+		 * @return {Mode}                     Encoding mode
+		 */
+		exports.from = function from (value, defaultValue) {
+		  if (exports.isValid(value)) {
+		    return value
+		  }
+
+		  try {
+		    return fromString(value)
+		  } catch (e) {
+		    return defaultValue
+		  }
+		}; 
+	} (mode));
+	return mode;
+}
+
+var hasRequiredVersion;
+
+function requireVersion () {
+	if (hasRequiredVersion) return version;
+	hasRequiredVersion = 1;
+	(function (exports) {
+		const Utils = requireUtils$1();
+		const ECCode = requireErrorCorrectionCode();
+		const ECLevel = requireErrorCorrectionLevel();
+		const Mode = requireMode();
+		const VersionCheck = requireVersionCheck();
+
+		// Generator polynomial used to encode version information
+		const G18 = (1 << 12) | (1 << 11) | (1 << 10) | (1 << 9) | (1 << 8) | (1 << 5) | (1 << 2) | (1 << 0);
+		const G18_BCH = Utils.getBCHDigit(G18);
+
+		function getBestVersionForDataLength (mode, length, errorCorrectionLevel) {
+		  for (let currentVersion = 1; currentVersion <= 40; currentVersion++) {
+		    if (length <= exports.getCapacity(currentVersion, errorCorrectionLevel, mode)) {
+		      return currentVersion
+		    }
+		  }
+
+		  return undefined
+		}
+
+		function getReservedBitsCount (mode, version) {
+		  // Character count indicator + mode indicator bits
+		  return Mode.getCharCountIndicator(mode, version) + 4
+		}
+
+		function getTotalBitsFromDataArray (segments, version) {
+		  let totalBits = 0;
+
+		  segments.forEach(function (data) {
+		    const reservedBits = getReservedBitsCount(data.mode, version);
+		    totalBits += reservedBits + data.getBitsLength();
+		  });
+
+		  return totalBits
+		}
+
+		function getBestVersionForMixedData (segments, errorCorrectionLevel) {
+		  for (let currentVersion = 1; currentVersion <= 40; currentVersion++) {
+		    const length = getTotalBitsFromDataArray(segments, currentVersion);
+		    if (length <= exports.getCapacity(currentVersion, errorCorrectionLevel, Mode.MIXED)) {
+		      return currentVersion
+		    }
+		  }
+
+		  return undefined
+		}
+
+		/**
+		 * Returns version number from a value.
+		 * If value is not a valid version, returns defaultValue
+		 *
+		 * @param  {Number|String} value        QR Code version
+		 * @param  {Number}        defaultValue Fallback value
+		 * @return {Number}                     QR Code version number
+		 */
+		exports.from = function from (value, defaultValue) {
+		  if (VersionCheck.isValid(value)) {
+		    return parseInt(value, 10)
+		  }
+
+		  return defaultValue
+		};
+
+		/**
+		 * Returns how much data can be stored with the specified QR code version
+		 * and error correction level
+		 *
+		 * @param  {Number} version              QR Code version (1-40)
+		 * @param  {Number} errorCorrectionLevel Error correction level
+		 * @param  {Mode}   mode                 Data mode
+		 * @return {Number}                      Quantity of storable data
+		 */
+		exports.getCapacity = function getCapacity (version, errorCorrectionLevel, mode) {
+		  if (!VersionCheck.isValid(version)) {
+		    throw new Error('Invalid QR Code version')
+		  }
+
+		  // Use Byte mode as default
+		  if (typeof mode === 'undefined') mode = Mode.BYTE;
+
+		  // Total codewords for this QR code version (Data + Error correction)
+		  const totalCodewords = Utils.getSymbolTotalCodewords(version);
+
+		  // Total number of error correction codewords
+		  const ecTotalCodewords = ECCode.getTotalCodewordsCount(version, errorCorrectionLevel);
+
+		  // Total number of data codewords
+		  const dataTotalCodewordsBits = (totalCodewords - ecTotalCodewords) * 8;
+
+		  if (mode === Mode.MIXED) return dataTotalCodewordsBits
+
+		  const usableBits = dataTotalCodewordsBits - getReservedBitsCount(mode, version);
+
+		  // Return max number of storable codewords
+		  switch (mode) {
+		    case Mode.NUMERIC:
+		      return Math.floor((usableBits / 10) * 3)
+
+		    case Mode.ALPHANUMERIC:
+		      return Math.floor((usableBits / 11) * 2)
+
+		    case Mode.KANJI:
+		      return Math.floor(usableBits / 13)
+
+		    case Mode.BYTE:
+		    default:
+		      return Math.floor(usableBits / 8)
+		  }
+		};
+
+		/**
+		 * Returns the minimum version needed to contain the amount of data
+		 *
+		 * @param  {Segment} data                    Segment of data
+		 * @param  {Number} [errorCorrectionLevel=H] Error correction level
+		 * @param  {Mode} mode                       Data mode
+		 * @return {Number}                          QR Code version
+		 */
+		exports.getBestVersionForData = function getBestVersionForData (data, errorCorrectionLevel) {
+		  let seg;
+
+		  const ecl = ECLevel.from(errorCorrectionLevel, ECLevel.M);
+
+		  if (Array.isArray(data)) {
+		    if (data.length > 1) {
+		      return getBestVersionForMixedData(data, ecl)
+		    }
+
+		    if (data.length === 0) {
+		      return 1
+		    }
+
+		    seg = data[0];
+		  } else {
+		    seg = data;
+		  }
+
+		  return getBestVersionForDataLength(seg.mode, seg.getLength(), ecl)
+		};
+
+		/**
+		 * Returns version information with relative error correction bits
+		 *
+		 * The version information is included in QR Code symbols of version 7 or larger.
+		 * It consists of an 18-bit sequence containing 6 data bits,
+		 * with 12 error correction bits calculated using the (18, 6) Golay code.
+		 *
+		 * @param  {Number} version QR Code version
+		 * @return {Number}         Encoded version info bits
+		 */
+		exports.getEncodedBits = function getEncodedBits (version) {
+		  if (!VersionCheck.isValid(version) || version < 7) {
+		    throw new Error('Invalid QR Code version')
+		  }
+
+		  let d = version << 12;
+
+		  while (Utils.getBCHDigit(d) - G18_BCH >= 0) {
+		    d ^= (G18 << (Utils.getBCHDigit(d) - G18_BCH));
+		  }
+
+		  return (version << 12) | d
+		}; 
+	} (version));
+	return version;
+}
+
+var formatInfo = {};
+
+var hasRequiredFormatInfo;
+
+function requireFormatInfo () {
+	if (hasRequiredFormatInfo) return formatInfo;
+	hasRequiredFormatInfo = 1;
+	const Utils = requireUtils$1();
+
+	const G15 = (1 << 10) | (1 << 8) | (1 << 5) | (1 << 4) | (1 << 2) | (1 << 1) | (1 << 0);
+	const G15_MASK = (1 << 14) | (1 << 12) | (1 << 10) | (1 << 4) | (1 << 1);
+	const G15_BCH = Utils.getBCHDigit(G15);
+
+	/**
+	 * Returns format information with relative error correction bits
+	 *
+	 * The format information is a 15-bit sequence containing 5 data bits,
+	 * with 10 error correction bits calculated using the (15, 5) BCH code.
+	 *
+	 * @param  {Number} errorCorrectionLevel Error correction level
+	 * @param  {Number} mask                 Mask pattern
+	 * @return {Number}                      Encoded format information bits
+	 */
+	formatInfo.getEncodedBits = function getEncodedBits (errorCorrectionLevel, mask) {
+	  const data = ((errorCorrectionLevel.bit << 3) | mask);
+	  let d = data << 10;
+
+	  while (Utils.getBCHDigit(d) - G15_BCH >= 0) {
+	    d ^= (G15 << (Utils.getBCHDigit(d) - G15_BCH));
+	  }
+
+	  // xor final data with mask pattern in order to ensure that
+	  // no combination of Error Correction Level and data mask pattern
+	  // will result in an all-zero data string
+	  return ((data << 10) | d) ^ G15_MASK
+	};
+	return formatInfo;
+}
+
+var segments = {};
+
+var numericData;
+var hasRequiredNumericData;
+
+function requireNumericData () {
+	if (hasRequiredNumericData) return numericData;
+	hasRequiredNumericData = 1;
+	const Mode = requireMode();
+
+	function NumericData (data) {
+	  this.mode = Mode.NUMERIC;
+	  this.data = data.toString();
+	}
+
+	NumericData.getBitsLength = function getBitsLength (length) {
+	  return 10 * Math.floor(length / 3) + ((length % 3) ? ((length % 3) * 3 + 1) : 0)
+	};
+
+	NumericData.prototype.getLength = function getLength () {
+	  return this.data.length
+	};
+
+	NumericData.prototype.getBitsLength = function getBitsLength () {
+	  return NumericData.getBitsLength(this.data.length)
+	};
+
+	NumericData.prototype.write = function write (bitBuffer) {
+	  let i, group, value;
+
+	  // The input data string is divided into groups of three digits,
+	  // and each group is converted to its 10-bit binary equivalent.
+	  for (i = 0; i + 3 <= this.data.length; i += 3) {
+	    group = this.data.substr(i, 3);
+	    value = parseInt(group, 10);
+
+	    bitBuffer.put(value, 10);
+	  }
+
+	  // If the number of input digits is not an exact multiple of three,
+	  // the final one or two digits are converted to 4 or 7 bits respectively.
+	  const remainingNum = this.data.length - i;
+	  if (remainingNum > 0) {
+	    group = this.data.substr(i);
+	    value = parseInt(group, 10);
+
+	    bitBuffer.put(value, remainingNum * 3 + 1);
+	  }
+	};
+
+	numericData = NumericData;
+	return numericData;
+}
+
+var alphanumericData;
+var hasRequiredAlphanumericData;
+
+function requireAlphanumericData () {
+	if (hasRequiredAlphanumericData) return alphanumericData;
+	hasRequiredAlphanumericData = 1;
+	const Mode = requireMode();
+
+	/**
+	 * Array of characters available in alphanumeric mode
+	 *
+	 * As per QR Code specification, to each character
+	 * is assigned a value from 0 to 44 which in this case coincides
+	 * with the array index
+	 *
+	 * @type {Array}
+	 */
+	const ALPHA_NUM_CHARS = [
+	  '0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
+	  'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M',
+	  'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
+	  ' ', '$', '%', '*', '+', '-', '.', '/', ':'
+	];
+
+	function AlphanumericData (data) {
+	  this.mode = Mode.ALPHANUMERIC;
+	  this.data = data;
+	}
+
+	AlphanumericData.getBitsLength = function getBitsLength (length) {
+	  return 11 * Math.floor(length / 2) + 6 * (length % 2)
+	};
+
+	AlphanumericData.prototype.getLength = function getLength () {
+	  return this.data.length
+	};
+
+	AlphanumericData.prototype.getBitsLength = function getBitsLength () {
+	  return AlphanumericData.getBitsLength(this.data.length)
+	};
+
+	AlphanumericData.prototype.write = function write (bitBuffer) {
+	  let i;
+
+	  // Input data characters are divided into groups of two characters
+	  // and encoded as 11-bit binary codes.
+	  for (i = 0; i + 2 <= this.data.length; i += 2) {
+	    // The character value of the first character is multiplied by 45
+	    let value = ALPHA_NUM_CHARS.indexOf(this.data[i]) * 45;
+
+	    // The character value of the second digit is added to the product
+	    value += ALPHA_NUM_CHARS.indexOf(this.data[i + 1]);
+
+	    // The sum is then stored as 11-bit binary number
+	    bitBuffer.put(value, 11);
+	  }
+
+	  // If the number of input data characters is not a multiple of two,
+	  // the character value of the final character is encoded as a 6-bit binary number.
+	  if (this.data.length % 2) {
+	    bitBuffer.put(ALPHA_NUM_CHARS.indexOf(this.data[i]), 6);
+	  }
+	};
+
+	alphanumericData = AlphanumericData;
+	return alphanumericData;
+}
+
+var byteData;
+var hasRequiredByteData;
+
+function requireByteData () {
+	if (hasRequiredByteData) return byteData;
+	hasRequiredByteData = 1;
+	const Mode = requireMode();
+
+	function ByteData (data) {
+	  this.mode = Mode.BYTE;
+	  if (typeof (data) === 'string') {
+	    this.data = new TextEncoder().encode(data);
+	  } else {
+	    this.data = new Uint8Array(data);
+	  }
+	}
+
+	ByteData.getBitsLength = function getBitsLength (length) {
+	  return length * 8
+	};
+
+	ByteData.prototype.getLength = function getLength () {
+	  return this.data.length
+	};
+
+	ByteData.prototype.getBitsLength = function getBitsLength () {
+	  return ByteData.getBitsLength(this.data.length)
+	};
+
+	ByteData.prototype.write = function (bitBuffer) {
+	  for (let i = 0, l = this.data.length; i < l; i++) {
+	    bitBuffer.put(this.data[i], 8);
+	  }
+	};
+
+	byteData = ByteData;
+	return byteData;
+}
+
+var kanjiData;
+var hasRequiredKanjiData;
+
+function requireKanjiData () {
+	if (hasRequiredKanjiData) return kanjiData;
+	hasRequiredKanjiData = 1;
+	const Mode = requireMode();
+	const Utils = requireUtils$1();
+
+	function KanjiData (data) {
+	  this.mode = Mode.KANJI;
+	  this.data = data;
+	}
+
+	KanjiData.getBitsLength = function getBitsLength (length) {
+	  return length * 13
+	};
+
+	KanjiData.prototype.getLength = function getLength () {
+	  return this.data.length
+	};
+
+	KanjiData.prototype.getBitsLength = function getBitsLength () {
+	  return KanjiData.getBitsLength(this.data.length)
+	};
+
+	KanjiData.prototype.write = function (bitBuffer) {
+	  let i;
+
+	  // In the Shift JIS system, Kanji characters are represented by a two byte combination.
+	  // These byte values are shifted from the JIS X 0208 values.
+	  // JIS X 0208 gives details of the shift coded representation.
+	  for (i = 0; i < this.data.length; i++) {
+	    let value = Utils.toSJIS(this.data[i]);
+
+	    // For characters with Shift JIS values from 0x8140 to 0x9FFC:
+	    if (value >= 0x8140 && value <= 0x9FFC) {
+	      // Subtract 0x8140 from Shift JIS value
+	      value -= 0x8140;
+
+	    // For characters with Shift JIS values from 0xE040 to 0xEBBF
+	    } else if (value >= 0xE040 && value <= 0xEBBF) {
+	      // Subtract 0xC140 from Shift JIS value
+	      value -= 0xC140;
+	    } else {
+	      throw new Error(
+	        'Invalid SJIS character: ' + this.data[i] + '\n' +
+	        'Make sure your charset is UTF-8')
+	    }
+
+	    // Multiply most significant byte of result by 0xC0
+	    // and add least significant byte to product
+	    value = (((value >>> 8) & 0xff) * 0xC0) + (value & 0xff);
+
+	    // Convert result to a 13-bit binary string
+	    bitBuffer.put(value, 13);
+	  }
+	};
+
+	kanjiData = KanjiData;
+	return kanjiData;
+}
+
+var dijkstra = {exports: {}};
+
+var hasRequiredDijkstra;
+
+function requireDijkstra () {
+	if (hasRequiredDijkstra) return dijkstra.exports;
+	hasRequiredDijkstra = 1;
+	(function (module) {
+
+		/******************************************************************************
+		 * Created 2008-08-19.
+		 *
+		 * Dijkstra path-finding functions. Adapted from the Dijkstar Python project.
+		 *
+		 * Copyright (C) 2008
+		 *   Wyatt Baldwin <self@wyattbaldwin.com>
+		 *   All rights reserved
+		 *
+		 * Licensed under the MIT license.
+		 *
+		 *   http://www.opensource.org/licenses/mit-license.php
+		 *
+		 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+		 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+		 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+		 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+		 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+		 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+		 * THE SOFTWARE.
+		 *****************************************************************************/
+		var dijkstra = {
+		  single_source_shortest_paths: function(graph, s, d) {
+		    // Predecessor map for each node that has been encountered.
+		    // node ID => predecessor node ID
+		    var predecessors = {};
+
+		    // Costs of shortest paths from s to all nodes encountered.
+		    // node ID => cost
+		    var costs = {};
+		    costs[s] = 0;
+
+		    // Costs of shortest paths from s to all nodes encountered; differs from
+		    // `costs` in that it provides easy access to the node that currently has
+		    // the known shortest path from s.
+		    // XXX: Do we actually need both `costs` and `open`?
+		    var open = dijkstra.PriorityQueue.make();
+		    open.push(s, 0);
+
+		    var closest,
+		        u, v,
+		        cost_of_s_to_u,
+		        adjacent_nodes,
+		        cost_of_e,
+		        cost_of_s_to_u_plus_cost_of_e,
+		        cost_of_s_to_v,
+		        first_visit;
+		    while (!open.empty()) {
+		      // In the nodes remaining in graph that have a known cost from s,
+		      // find the node, u, that currently has the shortest path from s.
+		      closest = open.pop();
+		      u = closest.value;
+		      cost_of_s_to_u = closest.cost;
+
+		      // Get nodes adjacent to u...
+		      adjacent_nodes = graph[u] || {};
+
+		      // ...and explore the edges that connect u to those nodes, updating
+		      // the cost of the shortest paths to any or all of those nodes as
+		      // necessary. v is the node across the current edge from u.
+		      for (v in adjacent_nodes) {
+		        if (adjacent_nodes.hasOwnProperty(v)) {
+		          // Get the cost of the edge running from u to v.
+		          cost_of_e = adjacent_nodes[v];
+
+		          // Cost of s to u plus the cost of u to v across e--this is *a*
+		          // cost from s to v that may or may not be less than the current
+		          // known cost to v.
+		          cost_of_s_to_u_plus_cost_of_e = cost_of_s_to_u + cost_of_e;
+
+		          // If we haven't visited v yet OR if the current known cost from s to
+		          // v is greater than the new cost we just found (cost of s to u plus
+		          // cost of u to v across e), update v's cost in the cost list and
+		          // update v's predecessor in the predecessor list (it's now u).
+		          cost_of_s_to_v = costs[v];
+		          first_visit = (typeof costs[v] === 'undefined');
+		          if (first_visit || cost_of_s_to_v > cost_of_s_to_u_plus_cost_of_e) {
+		            costs[v] = cost_of_s_to_u_plus_cost_of_e;
+		            open.push(v, cost_of_s_to_u_plus_cost_of_e);
+		            predecessors[v] = u;
+		          }
+		        }
+		      }
+		    }
+
+		    if (typeof d !== 'undefined' && typeof costs[d] === 'undefined') {
+		      var msg = ['Could not find a path from ', s, ' to ', d, '.'].join('');
+		      throw new Error(msg);
+		    }
+
+		    return predecessors;
+		  },
+
+		  extract_shortest_path_from_predecessor_list: function(predecessors, d) {
+		    var nodes = [];
+		    var u = d;
+		    while (u) {
+		      nodes.push(u);
+		      u = predecessors[u];
+		    }
+		    nodes.reverse();
+		    return nodes;
+		  },
+
+		  find_path: function(graph, s, d) {
+		    var predecessors = dijkstra.single_source_shortest_paths(graph, s, d);
+		    return dijkstra.extract_shortest_path_from_predecessor_list(
+		      predecessors, d);
+		  },
+
+		  /**
+		   * A very naive priority queue implementation.
+		   */
+		  PriorityQueue: {
+		    make: function (opts) {
+		      var T = dijkstra.PriorityQueue,
+		          t = {},
+		          key;
+		      opts = opts || {};
+		      for (key in T) {
+		        if (T.hasOwnProperty(key)) {
+		          t[key] = T[key];
+		        }
+		      }
+		      t.queue = [];
+		      t.sorter = opts.sorter || T.default_sorter;
+		      return t;
+		    },
+
+		    default_sorter: function (a, b) {
+		      return a.cost - b.cost;
+		    },
+
+		    /**
+		     * Add a new item to the queue and ensure the highest priority element
+		     * is at the front of the queue.
+		     */
+		    push: function (value, cost) {
+		      var item = {value: value, cost: cost};
+		      this.queue.push(item);
+		      this.queue.sort(this.sorter);
+		    },
+
+		    /**
+		     * Return the highest priority element in the queue.
+		     */
+		    pop: function () {
+		      return this.queue.shift();
+		    },
+
+		    empty: function () {
+		      return this.queue.length === 0;
+		    }
+		  }
+		};
+
+
+		// node.js module exports
+		{
+		  module.exports = dijkstra;
+		} 
+	} (dijkstra));
+	return dijkstra.exports;
+}
+
+var hasRequiredSegments;
+
+function requireSegments () {
+	if (hasRequiredSegments) return segments;
+	hasRequiredSegments = 1;
+	(function (exports) {
+		const Mode = requireMode();
+		const NumericData = requireNumericData();
+		const AlphanumericData = requireAlphanumericData();
+		const ByteData = requireByteData();
+		const KanjiData = requireKanjiData();
+		const Regex = requireRegex();
+		const Utils = requireUtils$1();
+		const dijkstra = requireDijkstra();
+
+		/**
+		 * Returns UTF8 byte length
+		 *
+		 * @param  {String} str Input string
+		 * @return {Number}     Number of byte
+		 */
+		function getStringByteLength (str) {
+		  return unescape(encodeURIComponent(str)).length
+		}
+
+		/**
+		 * Get a list of segments of the specified mode
+		 * from a string
+		 *
+		 * @param  {Mode}   mode Segment mode
+		 * @param  {String} str  String to process
+		 * @return {Array}       Array of object with segments data
+		 */
+		function getSegments (regex, mode, str) {
+		  const segments = [];
+		  let result;
+
+		  while ((result = regex.exec(str)) !== null) {
+		    segments.push({
+		      data: result[0],
+		      index: result.index,
+		      mode: mode,
+		      length: result[0].length
+		    });
+		  }
+
+		  return segments
+		}
+
+		/**
+		 * Extracts a series of segments with the appropriate
+		 * modes from a string
+		 *
+		 * @param  {String} dataStr Input string
+		 * @return {Array}          Array of object with segments data
+		 */
+		function getSegmentsFromString (dataStr) {
+		  const numSegs = getSegments(Regex.NUMERIC, Mode.NUMERIC, dataStr);
+		  const alphaNumSegs = getSegments(Regex.ALPHANUMERIC, Mode.ALPHANUMERIC, dataStr);
+		  let byteSegs;
+		  let kanjiSegs;
+
+		  if (Utils.isKanjiModeEnabled()) {
+		    byteSegs = getSegments(Regex.BYTE, Mode.BYTE, dataStr);
+		    kanjiSegs = getSegments(Regex.KANJI, Mode.KANJI, dataStr);
+		  } else {
+		    byteSegs = getSegments(Regex.BYTE_KANJI, Mode.BYTE, dataStr);
+		    kanjiSegs = [];
+		  }
+
+		  const segs = numSegs.concat(alphaNumSegs, byteSegs, kanjiSegs);
+
+		  return segs
+		    .sort(function (s1, s2) {
+		      return s1.index - s2.index
+		    })
+		    .map(function (obj) {
+		      return {
+		        data: obj.data,
+		        mode: obj.mode,
+		        length: obj.length
+		      }
+		    })
+		}
+
+		/**
+		 * Returns how many bits are needed to encode a string of
+		 * specified length with the specified mode
+		 *
+		 * @param  {Number} length String length
+		 * @param  {Mode} mode     Segment mode
+		 * @return {Number}        Bit length
+		 */
+		function getSegmentBitsLength (length, mode) {
+		  switch (mode) {
+		    case Mode.NUMERIC:
+		      return NumericData.getBitsLength(length)
+		    case Mode.ALPHANUMERIC:
+		      return AlphanumericData.getBitsLength(length)
+		    case Mode.KANJI:
+		      return KanjiData.getBitsLength(length)
+		    case Mode.BYTE:
+		      return ByteData.getBitsLength(length)
+		  }
+		}
+
+		/**
+		 * Merges adjacent segments which have the same mode
+		 *
+		 * @param  {Array} segs Array of object with segments data
+		 * @return {Array}      Array of object with segments data
+		 */
+		function mergeSegments (segs) {
+		  return segs.reduce(function (acc, curr) {
+		    const prevSeg = acc.length - 1 >= 0 ? acc[acc.length - 1] : null;
+		    if (prevSeg && prevSeg.mode === curr.mode) {
+		      acc[acc.length - 1].data += curr.data;
+		      return acc
+		    }
+
+		    acc.push(curr);
+		    return acc
+		  }, [])
+		}
+
+		/**
+		 * Generates a list of all possible nodes combination which
+		 * will be used to build a segments graph.
+		 *
+		 * Nodes are divided by groups. Each group will contain a list of all the modes
+		 * in which is possible to encode the given text.
+		 *
+		 * For example the text '12345' can be encoded as Numeric, Alphanumeric or Byte.
+		 * The group for '12345' will contain then 3 objects, one for each
+		 * possible encoding mode.
+		 *
+		 * Each node represents a possible segment.
+		 *
+		 * @param  {Array} segs Array of object with segments data
+		 * @return {Array}      Array of object with segments data
+		 */
+		function buildNodes (segs) {
+		  const nodes = [];
+		  for (let i = 0; i < segs.length; i++) {
+		    const seg = segs[i];
+
+		    switch (seg.mode) {
+		      case Mode.NUMERIC:
+		        nodes.push([seg,
+		          { data: seg.data, mode: Mode.ALPHANUMERIC, length: seg.length },
+		          { data: seg.data, mode: Mode.BYTE, length: seg.length }
+		        ]);
+		        break
+		      case Mode.ALPHANUMERIC:
+		        nodes.push([seg,
+		          { data: seg.data, mode: Mode.BYTE, length: seg.length }
+		        ]);
+		        break
+		      case Mode.KANJI:
+		        nodes.push([seg,
+		          { data: seg.data, mode: Mode.BYTE, length: getStringByteLength(seg.data) }
+		        ]);
+		        break
+		      case Mode.BYTE:
+		        nodes.push([
+		          { data: seg.data, mode: Mode.BYTE, length: getStringByteLength(seg.data) }
+		        ]);
+		    }
+		  }
+
+		  return nodes
+		}
+
+		/**
+		 * Builds a graph from a list of nodes.
+		 * All segments in each node group will be connected with all the segments of
+		 * the next group and so on.
+		 *
+		 * At each connection will be assigned a weight depending on the
+		 * segment's byte length.
+		 *
+		 * @param  {Array} nodes    Array of object with segments data
+		 * @param  {Number} version QR Code version
+		 * @return {Object}         Graph of all possible segments
+		 */
+		function buildGraph (nodes, version) {
+		  const table = {};
+		  const graph = { start: {} };
+		  let prevNodeIds = ['start'];
+
+		  for (let i = 0; i < nodes.length; i++) {
+		    const nodeGroup = nodes[i];
+		    const currentNodeIds = [];
+
+		    for (let j = 0; j < nodeGroup.length; j++) {
+		      const node = nodeGroup[j];
+		      const key = '' + i + j;
+
+		      currentNodeIds.push(key);
+		      table[key] = { node: node, lastCount: 0 };
+		      graph[key] = {};
+
+		      for (let n = 0; n < prevNodeIds.length; n++) {
+		        const prevNodeId = prevNodeIds[n];
+
+		        if (table[prevNodeId] && table[prevNodeId].node.mode === node.mode) {
+		          graph[prevNodeId][key] =
+		            getSegmentBitsLength(table[prevNodeId].lastCount + node.length, node.mode) -
+		            getSegmentBitsLength(table[prevNodeId].lastCount, node.mode);
+
+		          table[prevNodeId].lastCount += node.length;
+		        } else {
+		          if (table[prevNodeId]) table[prevNodeId].lastCount = node.length;
+
+		          graph[prevNodeId][key] = getSegmentBitsLength(node.length, node.mode) +
+		            4 + Mode.getCharCountIndicator(node.mode, version); // switch cost
+		        }
+		      }
+		    }
+
+		    prevNodeIds = currentNodeIds;
+		  }
+
+		  for (let n = 0; n < prevNodeIds.length; n++) {
+		    graph[prevNodeIds[n]].end = 0;
+		  }
+
+		  return { map: graph, table: table }
+		}
+
+		/**
+		 * Builds a segment from a specified data and mode.
+		 * If a mode is not specified, the more suitable will be used.
+		 *
+		 * @param  {String} data             Input data
+		 * @param  {Mode | String} modesHint Data mode
+		 * @return {Segment}                 Segment
+		 */
+		function buildSingleSegment (data, modesHint) {
+		  let mode;
+		  const bestMode = Mode.getBestModeForData(data);
+
+		  mode = Mode.from(modesHint, bestMode);
+
+		  // Make sure data can be encoded
+		  if (mode !== Mode.BYTE && mode.bit < bestMode.bit) {
+		    throw new Error('"' + data + '"' +
+		      ' cannot be encoded with mode ' + Mode.toString(mode) +
+		      '.\n Suggested mode is: ' + Mode.toString(bestMode))
+		  }
+
+		  // Use Mode.BYTE if Kanji support is disabled
+		  if (mode === Mode.KANJI && !Utils.isKanjiModeEnabled()) {
+		    mode = Mode.BYTE;
+		  }
+
+		  switch (mode) {
+		    case Mode.NUMERIC:
+		      return new NumericData(data)
+
+		    case Mode.ALPHANUMERIC:
+		      return new AlphanumericData(data)
+
+		    case Mode.KANJI:
+		      return new KanjiData(data)
+
+		    case Mode.BYTE:
+		      return new ByteData(data)
+		  }
+		}
+
+		/**
+		 * Builds a list of segments from an array.
+		 * Array can contain Strings or Objects with segment's info.
+		 *
+		 * For each item which is a string, will be generated a segment with the given
+		 * string and the more appropriate encoding mode.
+		 *
+		 * For each item which is an object, will be generated a segment with the given
+		 * data and mode.
+		 * Objects must contain at least the property "data".
+		 * If property "mode" is not present, the more suitable mode will be used.
+		 *
+		 * @param  {Array} array Array of objects with segments data
+		 * @return {Array}       Array of Segments
+		 */
+		exports.fromArray = function fromArray (array) {
+		  return array.reduce(function (acc, seg) {
+		    if (typeof seg === 'string') {
+		      acc.push(buildSingleSegment(seg, null));
+		    } else if (seg.data) {
+		      acc.push(buildSingleSegment(seg.data, seg.mode));
+		    }
+
+		    return acc
+		  }, [])
+		};
+
+		/**
+		 * Builds an optimized sequence of segments from a string,
+		 * which will produce the shortest possible bitstream.
+		 *
+		 * @param  {String} data    Input string
+		 * @param  {Number} version QR Code version
+		 * @return {Array}          Array of segments
+		 */
+		exports.fromString = function fromString (data, version) {
+		  const segs = getSegmentsFromString(data, Utils.isKanjiModeEnabled());
+
+		  const nodes = buildNodes(segs);
+		  const graph = buildGraph(nodes, version);
+		  const path = dijkstra.find_path(graph.map, 'start', 'end');
+
+		  const optimizedSegs = [];
+		  for (let i = 1; i < path.length - 1; i++) {
+		    optimizedSegs.push(graph.table[path[i]].node);
+		  }
+
+		  return exports.fromArray(mergeSegments(optimizedSegs))
+		};
+
+		/**
+		 * Splits a string in various segments with the modes which
+		 * best represent their content.
+		 * The produced segments are far from being optimized.
+		 * The output of this function is only used to estimate a QR Code version
+		 * which may contain the data.
+		 *
+		 * @param  {string} data Input string
+		 * @return {Array}       Array of segments
+		 */
+		exports.rawSplit = function rawSplit (data) {
+		  return exports.fromArray(
+		    getSegmentsFromString(data, Utils.isKanjiModeEnabled())
+		  )
+		}; 
+	} (segments));
+	return segments;
+}
+
+var hasRequiredQrcode;
+
+function requireQrcode () {
+	if (hasRequiredQrcode) return qrcode;
+	hasRequiredQrcode = 1;
+	const Utils = requireUtils$1();
+	const ECLevel = requireErrorCorrectionLevel();
+	const BitBuffer = requireBitBuffer();
+	const BitMatrix = requireBitMatrix();
+	const AlignmentPattern = requireAlignmentPattern();
+	const FinderPattern = requireFinderPattern();
+	const MaskPattern = requireMaskPattern();
+	const ECCode = requireErrorCorrectionCode();
+	const ReedSolomonEncoder = requireReedSolomonEncoder();
+	const Version = requireVersion();
+	const FormatInfo = requireFormatInfo();
+	const Mode = requireMode();
+	const Segments = requireSegments();
+
+	/**
+	 * QRCode for JavaScript
+	 *
+	 * modified by Ryan Day for nodejs support
+	 * Copyright (c) 2011 Ryan Day
+	 *
+	 * Licensed under the MIT license:
+	 *   http://www.opensource.org/licenses/mit-license.php
+	 *
+	//---------------------------------------------------------------------
+	// QRCode for JavaScript
+	//
+	// Copyright (c) 2009 Kazuhiko Arase
+	//
+	// URL: http://www.d-project.com/
+	//
+	// Licensed under the MIT license:
+	//   http://www.opensource.org/licenses/mit-license.php
+	//
+	// The word "QR Code" is registered trademark of
+	// DENSO WAVE INCORPORATED
+	//   http://www.denso-wave.com/qrcode/faqpatent-e.html
+	//
+	//---------------------------------------------------------------------
+	*/
+
+	/**
+	 * Add finder patterns bits to matrix
+	 *
+	 * @param  {BitMatrix} matrix  Modules matrix
+	 * @param  {Number}    version QR Code version
+	 */
+	function setupFinderPattern (matrix, version) {
+	  const size = matrix.size;
+	  const pos = FinderPattern.getPositions(version);
+
+	  for (let i = 0; i < pos.length; i++) {
+	    const row = pos[i][0];
+	    const col = pos[i][1];
+
+	    for (let r = -1; r <= 7; r++) {
+	      if (row + r <= -1 || size <= row + r) continue
+
+	      for (let c = -1; c <= 7; c++) {
+	        if (col + c <= -1 || size <= col + c) continue
+
+	        if ((r >= 0 && r <= 6 && (c === 0 || c === 6)) ||
+	          (c >= 0 && c <= 6 && (r === 0 || r === 6)) ||
+	          (r >= 2 && r <= 4 && c >= 2 && c <= 4)) {
+	          matrix.set(row + r, col + c, true, true);
+	        } else {
+	          matrix.set(row + r, col + c, false, true);
+	        }
+	      }
+	    }
+	  }
+	}
+
+	/**
+	 * Add timing pattern bits to matrix
+	 *
+	 * Note: this function must be called before {@link setupAlignmentPattern}
+	 *
+	 * @param  {BitMatrix} matrix Modules matrix
+	 */
+	function setupTimingPattern (matrix) {
+	  const size = matrix.size;
+
+	  for (let r = 8; r < size - 8; r++) {
+	    const value = r % 2 === 0;
+	    matrix.set(r, 6, value, true);
+	    matrix.set(6, r, value, true);
+	  }
+	}
+
+	/**
+	 * Add alignment patterns bits to matrix
+	 *
+	 * Note: this function must be called after {@link setupTimingPattern}
+	 *
+	 * @param  {BitMatrix} matrix  Modules matrix
+	 * @param  {Number}    version QR Code version
+	 */
+	function setupAlignmentPattern (matrix, version) {
+	  const pos = AlignmentPattern.getPositions(version);
+
+	  for (let i = 0; i < pos.length; i++) {
+	    const row = pos[i][0];
+	    const col = pos[i][1];
+
+	    for (let r = -2; r <= 2; r++) {
+	      for (let c = -2; c <= 2; c++) {
+	        if (r === -2 || r === 2 || c === -2 || c === 2 ||
+	          (r === 0 && c === 0)) {
+	          matrix.set(row + r, col + c, true, true);
+	        } else {
+	          matrix.set(row + r, col + c, false, true);
+	        }
+	      }
+	    }
+	  }
+	}
+
+	/**
+	 * Add version info bits to matrix
+	 *
+	 * @param  {BitMatrix} matrix  Modules matrix
+	 * @param  {Number}    version QR Code version
+	 */
+	function setupVersionInfo (matrix, version) {
+	  const size = matrix.size;
+	  const bits = Version.getEncodedBits(version);
+	  let row, col, mod;
+
+	  for (let i = 0; i < 18; i++) {
+	    row = Math.floor(i / 3);
+	    col = i % 3 + size - 8 - 3;
+	    mod = ((bits >> i) & 1) === 1;
+
+	    matrix.set(row, col, mod, true);
+	    matrix.set(col, row, mod, true);
+	  }
+	}
+
+	/**
+	 * Add format info bits to matrix
+	 *
+	 * @param  {BitMatrix} matrix               Modules matrix
+	 * @param  {ErrorCorrectionLevel}    errorCorrectionLevel Error correction level
+	 * @param  {Number}    maskPattern          Mask pattern reference value
+	 */
+	function setupFormatInfo (matrix, errorCorrectionLevel, maskPattern) {
+	  const size = matrix.size;
+	  const bits = FormatInfo.getEncodedBits(errorCorrectionLevel, maskPattern);
+	  let i, mod;
+
+	  for (i = 0; i < 15; i++) {
+	    mod = ((bits >> i) & 1) === 1;
+
+	    // vertical
+	    if (i < 6) {
+	      matrix.set(i, 8, mod, true);
+	    } else if (i < 8) {
+	      matrix.set(i + 1, 8, mod, true);
+	    } else {
+	      matrix.set(size - 15 + i, 8, mod, true);
+	    }
+
+	    // horizontal
+	    if (i < 8) {
+	      matrix.set(8, size - i - 1, mod, true);
+	    } else if (i < 9) {
+	      matrix.set(8, 15 - i - 1 + 1, mod, true);
+	    } else {
+	      matrix.set(8, 15 - i - 1, mod, true);
+	    }
+	  }
+
+	  // fixed module
+	  matrix.set(size - 8, 8, 1, true);
+	}
+
+	/**
+	 * Add encoded data bits to matrix
+	 *
+	 * @param  {BitMatrix}  matrix Modules matrix
+	 * @param  {Uint8Array} data   Data codewords
+	 */
+	function setupData (matrix, data) {
+	  const size = matrix.size;
+	  let inc = -1;
+	  let row = size - 1;
+	  let bitIndex = 7;
+	  let byteIndex = 0;
+
+	  for (let col = size - 1; col > 0; col -= 2) {
+	    if (col === 6) col--;
+
+	    while (true) {
+	      for (let c = 0; c < 2; c++) {
+	        if (!matrix.isReserved(row, col - c)) {
+	          let dark = false;
+
+	          if (byteIndex < data.length) {
+	            dark = (((data[byteIndex] >>> bitIndex) & 1) === 1);
+	          }
+
+	          matrix.set(row, col - c, dark);
+	          bitIndex--;
+
+	          if (bitIndex === -1) {
+	            byteIndex++;
+	            bitIndex = 7;
+	          }
+	        }
+	      }
+
+	      row += inc;
+
+	      if (row < 0 || size <= row) {
+	        row -= inc;
+	        inc = -inc;
+	        break
+	      }
+	    }
+	  }
+	}
+
+	/**
+	 * Create encoded codewords from data input
+	 *
+	 * @param  {Number}   version              QR Code version
+	 * @param  {ErrorCorrectionLevel}   errorCorrectionLevel Error correction level
+	 * @param  {ByteData} data                 Data input
+	 * @return {Uint8Array}                    Buffer containing encoded codewords
+	 */
+	function createData (version, errorCorrectionLevel, segments) {
+	  // Prepare data buffer
+	  const buffer = new BitBuffer();
+
+	  segments.forEach(function (data) {
+	    // prefix data with mode indicator (4 bits)
+	    buffer.put(data.mode.bit, 4);
+
+	    // Prefix data with character count indicator.
+	    // The character count indicator is a string of bits that represents the
+	    // number of characters that are being encoded.
+	    // The character count indicator must be placed after the mode indicator
+	    // and must be a certain number of bits long, depending on the QR version
+	    // and data mode
+	    // @see {@link Mode.getCharCountIndicator}.
+	    buffer.put(data.getLength(), Mode.getCharCountIndicator(data.mode, version));
+
+	    // add binary data sequence to buffer
+	    data.write(buffer);
+	  });
+
+	  // Calculate required number of bits
+	  const totalCodewords = Utils.getSymbolTotalCodewords(version);
+	  const ecTotalCodewords = ECCode.getTotalCodewordsCount(version, errorCorrectionLevel);
+	  const dataTotalCodewordsBits = (totalCodewords - ecTotalCodewords) * 8;
+
+	  // Add a terminator.
+	  // If the bit string is shorter than the total number of required bits,
+	  // a terminator of up to four 0s must be added to the right side of the string.
+	  // If the bit string is more than four bits shorter than the required number of bits,
+	  // add four 0s to the end.
+	  if (buffer.getLengthInBits() + 4 <= dataTotalCodewordsBits) {
+	    buffer.put(0, 4);
+	  }
+
+	  // If the bit string is fewer than four bits shorter, add only the number of 0s that
+	  // are needed to reach the required number of bits.
+
+	  // After adding the terminator, if the number of bits in the string is not a multiple of 8,
+	  // pad the string on the right with 0s to make the string's length a multiple of 8.
+	  while (buffer.getLengthInBits() % 8 !== 0) {
+	    buffer.putBit(0);
+	  }
+
+	  // Add pad bytes if the string is still shorter than the total number of required bits.
+	  // Extend the buffer to fill the data capacity of the symbol corresponding to
+	  // the Version and Error Correction Level by adding the Pad Codewords 11101100 (0xEC)
+	  // and 00010001 (0x11) alternately.
+	  const remainingByte = (dataTotalCodewordsBits - buffer.getLengthInBits()) / 8;
+	  for (let i = 0; i < remainingByte; i++) {
+	    buffer.put(i % 2 ? 0x11 : 0xEC, 8);
+	  }
+
+	  return createCodewords(buffer, version, errorCorrectionLevel)
+	}
+
+	/**
+	 * Encode input data with Reed-Solomon and return codewords with
+	 * relative error correction bits
+	 *
+	 * @param  {BitBuffer} bitBuffer            Data to encode
+	 * @param  {Number}    version              QR Code version
+	 * @param  {ErrorCorrectionLevel} errorCorrectionLevel Error correction level
+	 * @return {Uint8Array}                     Buffer containing encoded codewords
+	 */
+	function createCodewords (bitBuffer, version, errorCorrectionLevel) {
+	  // Total codewords for this QR code version (Data + Error correction)
+	  const totalCodewords = Utils.getSymbolTotalCodewords(version);
+
+	  // Total number of error correction codewords
+	  const ecTotalCodewords = ECCode.getTotalCodewordsCount(version, errorCorrectionLevel);
+
+	  // Total number of data codewords
+	  const dataTotalCodewords = totalCodewords - ecTotalCodewords;
+
+	  // Total number of blocks
+	  const ecTotalBlocks = ECCode.getBlocksCount(version, errorCorrectionLevel);
+
+	  // Calculate how many blocks each group should contain
+	  const blocksInGroup2 = totalCodewords % ecTotalBlocks;
+	  const blocksInGroup1 = ecTotalBlocks - blocksInGroup2;
+
+	  const totalCodewordsInGroup1 = Math.floor(totalCodewords / ecTotalBlocks);
+
+	  const dataCodewordsInGroup1 = Math.floor(dataTotalCodewords / ecTotalBlocks);
+	  const dataCodewordsInGroup2 = dataCodewordsInGroup1 + 1;
+
+	  // Number of EC codewords is the same for both groups
+	  const ecCount = totalCodewordsInGroup1 - dataCodewordsInGroup1;
+
+	  // Initialize a Reed-Solomon encoder with a generator polynomial of degree ecCount
+	  const rs = new ReedSolomonEncoder(ecCount);
+
+	  let offset = 0;
+	  const dcData = new Array(ecTotalBlocks);
+	  const ecData = new Array(ecTotalBlocks);
+	  let maxDataSize = 0;
+	  const buffer = new Uint8Array(bitBuffer.buffer);
+
+	  // Divide the buffer into the required number of blocks
+	  for (let b = 0; b < ecTotalBlocks; b++) {
+	    const dataSize = b < blocksInGroup1 ? dataCodewordsInGroup1 : dataCodewordsInGroup2;
+
+	    // extract a block of data from buffer
+	    dcData[b] = buffer.slice(offset, offset + dataSize);
+
+	    // Calculate EC codewords for this data block
+	    ecData[b] = rs.encode(dcData[b]);
+
+	    offset += dataSize;
+	    maxDataSize = Math.max(maxDataSize, dataSize);
+	  }
+
+	  // Create final data
+	  // Interleave the data and error correction codewords from each block
+	  const data = new Uint8Array(totalCodewords);
+	  let index = 0;
+	  let i, r;
+
+	  // Add data codewords
+	  for (i = 0; i < maxDataSize; i++) {
+	    for (r = 0; r < ecTotalBlocks; r++) {
+	      if (i < dcData[r].length) {
+	        data[index++] = dcData[r][i];
+	      }
+	    }
+	  }
+
+	  // Apped EC codewords
+	  for (i = 0; i < ecCount; i++) {
+	    for (r = 0; r < ecTotalBlocks; r++) {
+	      data[index++] = ecData[r][i];
+	    }
+	  }
+
+	  return data
+	}
+
+	/**
+	 * Build QR Code symbol
+	 *
+	 * @param  {String} data                 Input string
+	 * @param  {Number} version              QR Code version
+	 * @param  {ErrorCorretionLevel} errorCorrectionLevel Error level
+	 * @param  {MaskPattern} maskPattern     Mask pattern
+	 * @return {Object}                      Object containing symbol data
+	 */
+	function createSymbol (data, version, errorCorrectionLevel, maskPattern) {
+	  let segments;
+
+	  if (Array.isArray(data)) {
+	    segments = Segments.fromArray(data);
+	  } else if (typeof data === 'string') {
+	    let estimatedVersion = version;
+
+	    if (!estimatedVersion) {
+	      const rawSegments = Segments.rawSplit(data);
+
+	      // Estimate best version that can contain raw splitted segments
+	      estimatedVersion = Version.getBestVersionForData(rawSegments, errorCorrectionLevel);
+	    }
+
+	    // Build optimized segments
+	    // If estimated version is undefined, try with the highest version
+	    segments = Segments.fromString(data, estimatedVersion || 40);
+	  } else {
+	    throw new Error('Invalid data')
+	  }
+
+	  // Get the min version that can contain data
+	  const bestVersion = Version.getBestVersionForData(segments, errorCorrectionLevel);
+
+	  // If no version is found, data cannot be stored
+	  if (!bestVersion) {
+	    throw new Error('The amount of data is too big to be stored in a QR Code')
+	  }
+
+	  // If not specified, use min version as default
+	  if (!version) {
+	    version = bestVersion;
+
+	  // Check if the specified version can contain the data
+	  } else if (version < bestVersion) {
+	    throw new Error('\n' +
+	      'The chosen QR Code version cannot contain this amount of data.\n' +
+	      'Minimum version required to store current data is: ' + bestVersion + '.\n'
+	    )
+	  }
+
+	  const dataBits = createData(version, errorCorrectionLevel, segments);
+
+	  // Allocate matrix buffer
+	  const moduleCount = Utils.getSymbolSize(version);
+	  const modules = new BitMatrix(moduleCount);
+
+	  // Add function modules
+	  setupFinderPattern(modules, version);
+	  setupTimingPattern(modules);
+	  setupAlignmentPattern(modules, version);
+
+	  // Add temporary dummy bits for format info just to set them as reserved.
+	  // This is needed to prevent these bits from being masked by {@link MaskPattern.applyMask}
+	  // since the masking operation must be performed only on the encoding region.
+	  // These blocks will be replaced with correct values later in code.
+	  setupFormatInfo(modules, errorCorrectionLevel, 0);
+
+	  if (version >= 7) {
+	    setupVersionInfo(modules, version);
+	  }
+
+	  // Add data codewords
+	  setupData(modules, dataBits);
+
+	  if (isNaN(maskPattern)) {
+	    // Find best mask pattern
+	    maskPattern = MaskPattern.getBestMask(modules,
+	      setupFormatInfo.bind(null, modules, errorCorrectionLevel));
+	  }
+
+	  // Apply mask pattern
+	  MaskPattern.applyMask(maskPattern, modules);
+
+	  // Replace format info bits with correct values
+	  setupFormatInfo(modules, errorCorrectionLevel, maskPattern);
+
+	  return {
+	    modules: modules,
+	    version: version,
+	    errorCorrectionLevel: errorCorrectionLevel,
+	    maskPattern: maskPattern,
+	    segments: segments
+	  }
+	}
+
+	/**
+	 * QR Code
+	 *
+	 * @param {String | Array} data                 Input data
+	 * @param {Object} options                      Optional configurations
+	 * @param {Number} options.version              QR Code version
+	 * @param {String} options.errorCorrectionLevel Error correction level
+	 * @param {Function} options.toSJISFunc         Helper func to convert utf8 to sjis
+	 */
+	qrcode.create = function create (data, options) {
+	  if (typeof data === 'undefined' || data === '') {
+	    throw new Error('No input text')
+	  }
+
+	  let errorCorrectionLevel = ECLevel.M;
+	  let version;
+	  let mask;
+
+	  if (typeof options !== 'undefined') {
+	    // Use higher error correction level as default
+	    errorCorrectionLevel = ECLevel.from(options.errorCorrectionLevel, ECLevel.M);
+	    version = Version.from(options.version);
+	    mask = MaskPattern.from(options.maskPattern);
+
+	    if (options.toSJISFunc) {
+	      Utils.setToSJISFunction(options.toSJISFunc);
+	    }
+	  }
+
+	  return createSymbol(data, version, errorCorrectionLevel, mask)
+	};
+	return qrcode;
+}
+
+var canvas = {};
+
+var utils = {};
+
+var hasRequiredUtils;
+
+function requireUtils () {
+	if (hasRequiredUtils) return utils;
+	hasRequiredUtils = 1;
+	(function (exports) {
+		function hex2rgba (hex) {
+		  if (typeof hex === 'number') {
+		    hex = hex.toString();
+		  }
+
+		  if (typeof hex !== 'string') {
+		    throw new Error('Color should be defined as hex string')
+		  }
+
+		  let hexCode = hex.slice().replace('#', '').split('');
+		  if (hexCode.length < 3 || hexCode.length === 5 || hexCode.length > 8) {
+		    throw new Error('Invalid hex color: ' + hex)
+		  }
+
+		  // Convert from short to long form (fff -> ffffff)
+		  if (hexCode.length === 3 || hexCode.length === 4) {
+		    hexCode = Array.prototype.concat.apply([], hexCode.map(function (c) {
+		      return [c, c]
+		    }));
+		  }
+
+		  // Add default alpha value
+		  if (hexCode.length === 6) hexCode.push('F', 'F');
+
+		  const hexValue = parseInt(hexCode.join(''), 16);
+
+		  return {
+		    r: (hexValue >> 24) & 255,
+		    g: (hexValue >> 16) & 255,
+		    b: (hexValue >> 8) & 255,
+		    a: hexValue & 255,
+		    hex: '#' + hexCode.slice(0, 6).join('')
+		  }
+		}
+
+		exports.getOptions = function getOptions (options) {
+		  if (!options) options = {};
+		  if (!options.color) options.color = {};
+
+		  const margin = typeof options.margin === 'undefined' ||
+		    options.margin === null ||
+		    options.margin < 0
+		    ? 4
+		    : options.margin;
+
+		  const width = options.width && options.width >= 21 ? options.width : undefined;
+		  const scale = options.scale || 4;
+
+		  return {
+		    width: width,
+		    scale: width ? 4 : scale,
+		    margin: margin,
+		    color: {
+		      dark: hex2rgba(options.color.dark || '#000000ff'),
+		      light: hex2rgba(options.color.light || '#ffffffff')
+		    },
+		    type: options.type,
+		    rendererOpts: options.rendererOpts || {}
+		  }
+		};
+
+		exports.getScale = function getScale (qrSize, opts) {
+		  return opts.width && opts.width >= qrSize + opts.margin * 2
+		    ? opts.width / (qrSize + opts.margin * 2)
+		    : opts.scale
+		};
+
+		exports.getImageWidth = function getImageWidth (qrSize, opts) {
+		  const scale = exports.getScale(qrSize, opts);
+		  return Math.floor((qrSize + opts.margin * 2) * scale)
+		};
+
+		exports.qrToImageData = function qrToImageData (imgData, qr, opts) {
+		  const size = qr.modules.size;
+		  const data = qr.modules.data;
+		  const scale = exports.getScale(size, opts);
+		  const symbolSize = Math.floor((size + opts.margin * 2) * scale);
+		  const scaledMargin = opts.margin * scale;
+		  const palette = [opts.color.light, opts.color.dark];
+
+		  for (let i = 0; i < symbolSize; i++) {
+		    for (let j = 0; j < symbolSize; j++) {
+		      let posDst = (i * symbolSize + j) * 4;
+		      let pxColor = opts.color.light;
+
+		      if (i >= scaledMargin && j >= scaledMargin &&
+		        i < symbolSize - scaledMargin && j < symbolSize - scaledMargin) {
+		        const iSrc = Math.floor((i - scaledMargin) / scale);
+		        const jSrc = Math.floor((j - scaledMargin) / scale);
+		        pxColor = palette[data[iSrc * size + jSrc] ? 1 : 0];
+		      }
+
+		      imgData[posDst++] = pxColor.r;
+		      imgData[posDst++] = pxColor.g;
+		      imgData[posDst++] = pxColor.b;
+		      imgData[posDst] = pxColor.a;
+		    }
+		  }
+		}; 
+	} (utils));
+	return utils;
+}
+
+var hasRequiredCanvas;
+
+function requireCanvas () {
+	if (hasRequiredCanvas) return canvas;
+	hasRequiredCanvas = 1;
+	(function (exports) {
+		const Utils = requireUtils();
+
+		function clearCanvas (ctx, canvas, size) {
+		  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+		  if (!canvas.style) canvas.style = {};
+		  canvas.height = size;
+		  canvas.width = size;
+		  canvas.style.height = size + 'px';
+		  canvas.style.width = size + 'px';
+		}
+
+		function getCanvasElement () {
+		  try {
+		    return document.createElement('canvas')
+		  } catch (e) {
+		    throw new Error('You need to specify a canvas element')
+		  }
+		}
+
+		exports.render = function render (qrData, canvas, options) {
+		  let opts = options;
+		  let canvasEl = canvas;
+
+		  if (typeof opts === 'undefined' && (!canvas || !canvas.getContext)) {
+		    opts = canvas;
+		    canvas = undefined;
+		  }
+
+		  if (!canvas) {
+		    canvasEl = getCanvasElement();
+		  }
+
+		  opts = Utils.getOptions(opts);
+		  const size = Utils.getImageWidth(qrData.modules.size, opts);
+
+		  const ctx = canvasEl.getContext('2d');
+		  const image = ctx.createImageData(size, size);
+		  Utils.qrToImageData(image.data, qrData, opts);
+
+		  clearCanvas(ctx, canvasEl, size);
+		  ctx.putImageData(image, 0, 0);
+
+		  return canvasEl
+		};
+
+		exports.renderToDataURL = function renderToDataURL (qrData, canvas, options) {
+		  let opts = options;
+
+		  if (typeof opts === 'undefined' && (!canvas || !canvas.getContext)) {
+		    opts = canvas;
+		    canvas = undefined;
+		  }
+
+		  if (!opts) opts = {};
+
+		  const canvasEl = exports.render(qrData, canvas, opts);
+
+		  const type = opts.type || 'image/png';
+		  const rendererOpts = opts.rendererOpts || {};
+
+		  return canvasEl.toDataURL(type, rendererOpts.quality)
+		}; 
+	} (canvas));
+	return canvas;
+}
+
+var svgTag = {};
+
+var hasRequiredSvgTag;
+
+function requireSvgTag () {
+	if (hasRequiredSvgTag) return svgTag;
+	hasRequiredSvgTag = 1;
+	const Utils = requireUtils();
+
+	function getColorAttrib (color, attrib) {
+	  const alpha = color.a / 255;
+	  const str = attrib + '="' + color.hex + '"';
+
+	  return alpha < 1
+	    ? str + ' ' + attrib + '-opacity="' + alpha.toFixed(2).slice(1) + '"'
+	    : str
+	}
+
+	function svgCmd (cmd, x, y) {
+	  let str = cmd + x;
+	  if (typeof y !== 'undefined') str += ' ' + y;
+
+	  return str
+	}
+
+	function qrToPath (data, size, margin) {
+	  let path = '';
+	  let moveBy = 0;
+	  let newRow = false;
+	  let lineLength = 0;
+
+	  for (let i = 0; i < data.length; i++) {
+	    const col = Math.floor(i % size);
+	    const row = Math.floor(i / size);
+
+	    if (!col && !newRow) newRow = true;
+
+	    if (data[i]) {
+	      lineLength++;
+
+	      if (!(i > 0 && col > 0 && data[i - 1])) {
+	        path += newRow
+	          ? svgCmd('M', col + margin, 0.5 + row + margin)
+	          : svgCmd('m', moveBy, 0);
+
+	        moveBy = 0;
+	        newRow = false;
+	      }
+
+	      if (!(col + 1 < size && data[i + 1])) {
+	        path += svgCmd('h', lineLength);
+	        lineLength = 0;
+	      }
+	    } else {
+	      moveBy++;
+	    }
+	  }
+
+	  return path
+	}
+
+	svgTag.render = function render (qrData, options, cb) {
+	  const opts = Utils.getOptions(options);
+	  const size = qrData.modules.size;
+	  const data = qrData.modules.data;
+	  const qrcodesize = size + opts.margin * 2;
+
+	  const bg = !opts.color.light.a
+	    ? ''
+	    : '<path ' + getColorAttrib(opts.color.light, 'fill') +
+	      ' d="M0 0h' + qrcodesize + 'v' + qrcodesize + 'H0z"/>';
+
+	  const path =
+	    '<path ' + getColorAttrib(opts.color.dark, 'stroke') +
+	    ' d="' + qrToPath(data, size, opts.margin) + '"/>';
+
+	  const viewBox = 'viewBox="' + '0 0 ' + qrcodesize + ' ' + qrcodesize + '"';
+
+	  const width = !opts.width ? '' : 'width="' + opts.width + '" height="' + opts.width + '" ';
+
+	  const svgTag = '<svg xmlns="http://www.w3.org/2000/svg" ' + width + viewBox + ' shape-rendering="crispEdges">' + bg + path + '</svg>\n';
+
+	  if (typeof cb === 'function') {
+	    cb(null, svgTag);
+	  }
+
+	  return svgTag
+	};
+	return svgTag;
+}
+
+var hasRequiredBrowser;
+
+function requireBrowser () {
+	if (hasRequiredBrowser) return browser;
+	hasRequiredBrowser = 1;
+	const canPromise = requireCanPromise();
+
+	const QRCode = requireQrcode();
+	const CanvasRenderer = requireCanvas();
+	const SvgRenderer = requireSvgTag();
+
+	function renderCanvas (renderFunc, canvas, text, opts, cb) {
+	  const args = [].slice.call(arguments, 1);
+	  const argsNum = args.length;
+	  const isLastArgCb = typeof args[argsNum - 1] === 'function';
+
+	  if (!isLastArgCb && !canPromise()) {
+	    throw new Error('Callback required as last argument')
+	  }
+
+	  if (isLastArgCb) {
+	    if (argsNum < 2) {
+	      throw new Error('Too few arguments provided')
+	    }
+
+	    if (argsNum === 2) {
+	      cb = text;
+	      text = canvas;
+	      canvas = opts = undefined;
+	    } else if (argsNum === 3) {
+	      if (canvas.getContext && typeof cb === 'undefined') {
+	        cb = opts;
+	        opts = undefined;
+	      } else {
+	        cb = opts;
+	        opts = text;
+	        text = canvas;
+	        canvas = undefined;
+	      }
+	    }
+	  } else {
+	    if (argsNum < 1) {
+	      throw new Error('Too few arguments provided')
+	    }
+
+	    if (argsNum === 1) {
+	      text = canvas;
+	      canvas = opts = undefined;
+	    } else if (argsNum === 2 && !canvas.getContext) {
+	      opts = text;
+	      text = canvas;
+	      canvas = undefined;
+	    }
+
+	    return new Promise(function (resolve, reject) {
+	      try {
+	        const data = QRCode.create(text, opts);
+	        resolve(renderFunc(data, canvas, opts));
+	      } catch (e) {
+	        reject(e);
+	      }
+	    })
+	  }
+
+	  try {
+	    const data = QRCode.create(text, opts);
+	    cb(null, renderFunc(data, canvas, opts));
+	  } catch (e) {
+	    cb(e);
+	  }
+	}
+
+	browser.create = QRCode.create;
+	browser.toCanvas = renderCanvas.bind(null, CanvasRenderer.render);
+	browser.toDataURL = renderCanvas.bind(null, CanvasRenderer.renderToDataURL);
+
+	// only svg for now.
+	browser.toString = renderCanvas.bind(null, function (data, _, opts) {
+	  return SvgRenderer.render(data, opts)
+	});
+	return browser;
+}
+
+var browserExports = requireBrowser();
+var QRCode = /*@__PURE__*/getDefaultExportFromCjs(browserExports);
+
+const kritzelShareDialogCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-width-small:420px}.share-content{display:flex;flex-direction:column;gap:20px}.share-section{display:flex;flex-direction:column;gap:8px}.share-section-revoke{padding-top:12px;border-top:1px solid var(--kritzel-share-dialog-border-color, #e5e5e5)}.share-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.share-label-group{display:flex;flex-direction:column;gap:8px;flex:1}.share-label{font-size:14px;font-weight:600;color:var(--kritzel-share-dialog-label-color, #333333);margin:0}.share-description{font-size:12px;color:var(--kritzel-share-dialog-description-color, #666666);margin:0;line-height:1.4}.share-url-container{display:flex;align-items:center;gap:8px;background:var(--kritzel-share-dialog-input-background, #f5f5f5);border:1px solid var(--kritzel-share-dialog-input-border-color, #e0e0e0);border-radius:6px;padding:4px 4px 4px 12px}.share-qr-container{display:flex;justify-content:center;margin-top:16px;margin-bottom:16px}.share-qr-image{width:180px;height:180px;border-radius:8px;border:1px solid var(--kritzel-share-dialog-qr-border-color, #e0e0e0);background:var(--kritzel-share-dialog-qr-background, #ffffff);padding:8px;box-sizing:border-box}.share-url-input{flex:1;border:none;background:transparent;font-size:13px;color:var(--kritzel-share-dialog-input-text-color, #333333);outline:none;min-width:0;padding:8px 0}.share-url-input:focus{outline:none}.share-url-input::selection{background:var(--kritzel-share-dialog-selection-color, #cce5ff)}.copy-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:4px;background:var(--kritzel-share-dialog-copy-button-background, #ffffff);color:var(--kritzel-share-dialog-copy-button-color, #666666);cursor:pointer;transition:all 0.15s ease;flex-shrink:0}.copy-button:hover{background:var(--kritzel-share-dialog-copy-button-hover-background, #e8e8e8);color:var(--kritzel-share-dialog-copy-button-hover-color, #333333)}.copy-button.copy-success{background:var(--kritzel-share-dialog-copy-success-background, #d4edda);color:var(--kritzel-share-dialog-copy-success-color, #28a745)}.revoke-button{align-self:flex-start;padding:8px 16px;border:1px solid var(--kritzel-share-dialog-revoke-button-border-color, #dc3545);border-radius:6px;background:transparent;color:var(--kritzel-share-dialog-revoke-button-color, #dc3545);font-size:13px;font-weight:500;cursor:pointer;transition:all 0.15s ease}.revoke-button:hover{background:var(--kritzel-share-dialog-revoke-button-hover-background, #dc3545);color:var(--kritzel-share-dialog-revoke-button-hover-color, #ffffff)}kritzel-dropdown{--kritzel-dropdown-trigger-padding:8px 12px;--kritzel-dropdown-trigger-font-size:13px}`;
 
 const KritzelShareDialog = class {
     constructor(hostRef) {
@@ -31692,10 +34799,16 @@ const KritzelShareDialog = class {
     terms = {};
     onIsPublicChange(newValue) {
         this.internalIsPublic = newValue;
+        void this.updateQrCodeDataUrl();
+    }
+    onWorkspaceIdChange() {
+        void this.updateQrCodeDataUrl();
     }
     isDialogOpen = false;
     internalIsPublic = false;
     copySuccess = false;
+    qrCodeDataUrl = '';
+    qrCodeUpdateSequence = 0;
     /**
      * Emitted when the user toggles the public sharing state.
      */
@@ -31710,6 +34823,7 @@ const KritzelShareDialog = class {
     async open() {
         this.internalIsPublic = this.isPublic;
         this.isDialogOpen = true;
+        await this.updateQrCodeDataUrl();
     }
     /**
      * Closes the share dialog.
@@ -31721,8 +34835,37 @@ const KritzelShareDialog = class {
         const enabled = event.detail;
         // Update local state optimistically for immediate UI feedback
         this.internalIsPublic = enabled;
+        void this.updateQrCodeDataUrl();
         this.toggleIsPublic.emit(enabled);
     };
+    async updateQrCodeDataUrl() {
+        if (!this.internalIsPublic) {
+            this.qrCodeDataUrl = '';
+            return;
+        }
+        const shareUrl = this.getShareUrl();
+        if (!shareUrl) {
+            this.qrCodeDataUrl = '';
+            return;
+        }
+        const sequence = ++this.qrCodeUpdateSequence;
+        try {
+            const dataUrl = await QRCode.toDataURL(shareUrl, {
+                margin: 1,
+                width: 180,
+            });
+            if (sequence !== this.qrCodeUpdateSequence) {
+                return;
+            }
+            this.qrCodeDataUrl = dataUrl;
+        }
+        catch {
+            if (sequence !== this.qrCodeUpdateSequence) {
+                return;
+            }
+            this.qrCodeDataUrl = '';
+        }
+    }
     getShareUrl() {
         if (!this.workspaceId)
             return '';
@@ -31760,13 +34903,16 @@ const KritzelShareDialog = class {
         this.dialogClosed.emit();
     };
     render() {
-        return (index.h(index.Host, { key: '031cf5d1ab48f2791454d4c7348352295359d225' }, index.h("kritzel-dialog", { key: 'cdce63c86ca329a97d1f1787adcb2b92bbfa40f9', dialogTitle: this.terms['share.dialogTitle'] ?? 'Share Workspace', size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, index.h("div", { key: 'dbb62b3cb175358955b11f6c2d74b0b0eecf212e', class: "share-content" }, index.h("div", { key: '8dc0eaea9644b60ff33812dac20def226fa14232', class: "share-section" }, index.h("div", { key: 'd3cfbf05c28a01681b1223edb6f0b73998ccfd08', class: "share-row" }, index.h("div", { key: '2400f062f92dd918341391cf71086c2676f7fc66', class: "share-label-group" }, index.h("label", { key: 'ab01691b9f53f59f92116a2994b6e3551d347c7b', class: "share-label" }, this.terms['share.linkSharing.label'] ?? 'Link sharing'), index.h("p", { key: 'fd830ad21e32e4fc5d8ba97d5cea7ef8da15fba4', class: "share-description" }, this.internalIsPublic
+        return (index.h(index.Host, { key: 'b96c4cc6a9e4778715f496574f307a540285f70c' }, index.h("kritzel-dialog", { key: '9a9cead56cc50042f59f677c0a846fc9fff01a8b', dialogTitle: this.terms['share.dialogTitle'] ?? 'Share Workspace', size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, index.h("div", { key: 'f1ffe37126343d84f9cb70f85530596d594c6e04', class: "share-content" }, index.h("div", { key: 'e1b20fccdb127eb30d240a2812742977b6512113', class: "share-section" }, index.h("div", { key: 'fb0d4226d638309fd5696dace0cc0c73d82150fc', class: "share-row" }, index.h("div", { key: '301a27b975bb63610d94e1140aef39aa0594dda6', class: "share-label-group" }, index.h("label", { key: 'acf694843423d42414951ae88ec7eee541dd8f7f', class: "share-label" }, this.terms['share.linkSharing.label'] ?? 'Link sharing'), index.h("p", { key: '4c29b6448a27c69fceadb4166bc878216010475f', class: "share-description" }, this.internalIsPublic
             ? (this.terms['share.linkSharing.enabledDescription'] ?? 'Anyone with the link can access this workspace.')
-            : (this.terms['share.linkSharing.disabledDescription'] ?? 'Link sharing is disabled. Only you can access this workspace.'))), index.h("kritzel-slide-toggle", { key: '6f1a71ba524b34753ccd5437eab00bfcbeffdd79', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: this.terms['share.linkSharing.toggleLabel'] ?? 'Enable link sharing' }))), this.internalIsPublic && (index.h("div", { key: '298680e1afdf0094c5393aa95c4983a0a8dd5e18', class: "share-section" }, index.h("div", { key: '546645a748cf9a42df0c8163f2478ef31445273a', class: "share-url-container" }, index.h("input", { key: '9d5b93d762d1cd899f3fc8041380bae603a4919c', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), index.h("button", { key: '747a7ca4a25827de6934b7df30cabc2db4583e1b', class: { 'copy-button': true, 'copy-success': this.copySuccess }, onClick: this.handleCopyUrl, title: this.copySuccess ? (this.terms['share.copyLink.copied'] ?? 'Copied!') : (this.terms['share.copyLink.title'] ?? 'Copy link') }, index.h("kritzel-icon", { key: '096ca9a0527796462769dc9d42dd81d8f97f2865', name: this.copySuccess ? 'check' : 'copy', size: 18 })))))))));
+            : (this.terms['share.linkSharing.disabledDescription'] ?? 'Link sharing is disabled. Only you can access this workspace.'))), index.h("kritzel-slide-toggle", { key: 'c813213e7cf53125993de209e15c921779c019b6', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: this.terms['share.linkSharing.toggleLabel'] ?? 'Enable link sharing' }))), this.internalIsPublic && (index.h("div", { key: 'af32cbadc775ce4ca3c79bdc0f8b4351c8723b28', class: "share-section" }, index.h("div", { key: 'd5c4e2b8a77306a141cc73c37dc6c57b1dc9daa5', class: "share-url-container" }, index.h("input", { key: 'f2f364c3fabd7f693247f5ad05594bd089a194ea', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), index.h("button", { key: 'd27a6f00e6b14bff3f4c8d1694cc8a38eebc5ec0', class: { 'copy-button': true, 'copy-success': this.copySuccess }, onClick: this.handleCopyUrl, title: this.copySuccess ? (this.terms['share.copyLink.copied'] ?? 'Copied!') : (this.terms['share.copyLink.title'] ?? 'Copy link') }, index.h("kritzel-icon", { key: '60c72ee8d789dc14baa4c169f70c78837b0cbd0c', name: this.copySuccess ? 'check' : 'copy', size: 18 }))), this.qrCodeDataUrl && (index.h("div", { key: 'f5d361b7ed145ab5f4f7b89f9c63046ce831220b', class: "share-qr-container" }, index.h("img", { key: '5f2d4650dffab907f5a53dfb2fd4c337da3e51ee', class: "share-qr-image", src: this.qrCodeDataUrl, alt: "QR code for share link" })))))))));
     }
     static get watchers() { return {
         "isPublic": [{
                 "onIsPublicChange": 0
+            }],
+        "workspaceId": [{
+                "onWorkspaceIdChange": 0
             }]
     }; }
 };
@@ -31800,7 +34946,7 @@ const KritzelSlideToggle = class {
         }
     };
     render() {
-        return (index.h(index.Host, { key: '5850c758ccf3263b21c397219bf2301fa088087d', class: { checked: this.checked, disabled: this.disabled }, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label, onClick: this.handleToggle, onKeyDown: this.handleKeyDown }, index.h("div", { key: 'df0adeca0447a13d5499219ac9d27b526252fdbe', class: "toggle-track" }, index.h("div", { key: '3938239bbdca29e62ed72229dfcf1904fcbaa983', class: "toggle-thumb" }))));
+        return (index.h(index.Host, { key: '00160c9cfdafa0d53f3acfb1fb235b29abf2622a', class: { checked: this.checked, disabled: this.disabled }, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label, onClick: this.handleToggle, onKeyDown: this.handleKeyDown }, index.h("div", { key: '385008948ffbdc0f26249d2d833aae8f04eeb6a0', class: "toggle-track" }, index.h("div", { key: '43929e94335589feb24ee45f1c34a270653dd412', class: "toggle-thumb" }))));
     }
 };
 KritzelSlideToggle.style = kritzelSlideToggleCss();
@@ -31900,7 +35046,7 @@ const KritzelSplitButton = class {
         this.menuScrollTop = event.target.scrollTop;
     };
     render() {
-        return (index.h(index.Host, { key: 'd6856a86b3be4d9a22c5e78df1bda19113cb988b', class: { mobile: this.isTouchDevice } }, index.h("button", { key: 'd26026af275a8bd5717254223d5829e3d7f02bcb', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && index.h("kritzel-icon", { key: '1b3e2f4c2f8245b281d0f85458fd6bcc0cc73c59', name: this.buttonIcon })), index.h("div", { key: 'b002b904e168d62075fa086c88df72e36cc8e8c2', class: "split-divider" }), index.h("button", { key: 'd39084da6775613f2c896f3fa1ae4e216505bacc', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled, "aria-label": "Open menu" }, index.h("kritzel-icon", { key: 'b1bc427b0d7cd26a283dbeb772dee0a6d2ca172c', name: this.dropdownIcon })), index.h("kritzel-portal", { key: 'e76300f48a23772a5923ea2cbd0824590302e7e7', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, index.h("kritzel-menu", { key: 'f110b9315ec63dca9bb1b615136b2d3e284567ba', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
+        return (index.h(index.Host, { key: 'fa22dc1185ef07d8127d9ee9f6dbe482d126f934', class: { mobile: this.isTouchDevice } }, index.h("button", { key: 'a48aba702b70e9b24ad5486dde61fa9f9c8f7cdc', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && index.h("kritzel-icon", { key: '0d1c9a3e9f744541dd6ebe491105f6ee65233543', name: this.buttonIcon })), index.h("div", { key: 'c9db29f0b9c9cf1974d78f4f60be9e1b0e26c5d2', class: "split-divider" }), index.h("button", { key: '57addfd5228b7c7668be902c53683d12c976b89b', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled, "aria-label": "Open menu" }, index.h("kritzel-icon", { key: 'd860cc503043425860b1234b5d34693bfdd1d5ab', name: this.dropdownIcon })), index.h("kritzel-portal", { key: 'cd6dda8869aea4205d922fc639073019bbd2b102', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, index.h("kritzel-menu", { key: '1ef1c2b319662e7a2af15b46362addcc75bceb68', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
     }
 };
 KritzelSplitButton.style = kritzelSplitButtonCss();
@@ -31921,7 +35067,7 @@ const KritzelStrokeSize = class {
     }
     render() {
         const sizes = this.sizes ?? [];
-        return (index.h(index.Host, { key: 'bde2cc986aebbe869a3eea026654229dee0d3e0e' }, index.h("div", { key: 'f84c4b844b865080f4e0e245bbccc6d77ac3f049', class: "size-grid" }, sizes.map(size => (index.h("div", { tabIndex: 0, class: {
+        return (index.h(index.Host, { key: 'ba181d798d2bf7b60308746635d2077ce1353b83' }, index.h("div", { key: '048fc8934190359b9337747567844ca88925a6ce', class: "size-grid" }, sizes.map(size => (index.h("div", { tabIndex: 0, class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, index.h("kritzel-color", { value: 'var(--kritzel-global-text-primary)', size: size })))))));
@@ -32302,14 +35448,14 @@ const KritzelTooltip = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'ba4d13171aa25acac6c615ee12f35eab96d0aad6', style: {
+        return (index.h(index.Host, { key: '1e318ff48b72ae5e0853a92c61fd4174d6e45271', 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.positionX}px`,
                 bottom: `${this.positionY}px`,
-            } }, index.h("div", { key: '923168164a018b08eac4246d88c7f8648b71d078', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, index.h("slot", { key: 'aafad8ab026d591ebb9e2aeffa15d07718eba261' }))));
+            } }, index.h("div", { key: 'c66c9978787c59de6ca29944f666354fed2ab4c3', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, index.h("slot", { key: '664e78076bb988b0829b805aad4393c443db2dc7' }))));
     }
     static get watchers() { return {
         "triggerElement": [{
@@ -32350,7 +35496,7 @@ const KritzelUtilityPanel = class {
         this.redo.emit();
     }
     render() {
-        return (index.h(index.Host, { key: '22f3826d57b4d8f0e476951a860bde3dbc6c7200' }, index.h("button", { key: 'c3259c5e924b3cf74920dc4676ec8a682c3273e8', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event), "aria-label": this.terms['utility.undo'] ?? 'Undo' }, index.h("kritzel-icon", { key: 'ab4e9da6b60d9fa470fd8f5002f2acd5a758a8ba', name: "undo" })), index.h("button", { key: 'd17e25e78831b5ee13596cc2639cfbb5bd75a1cb', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event), "aria-label": this.terms['utility.redo'] ?? 'Redo' }, index.h("kritzel-icon", { key: '7ae8cec39ffab1303d76315ab85ac575b886b233', name: "redo" })), index.h("div", { key: 'f54e0262f133ad0eed0bbf853b67edd6c2f5e87f', class: "utility-separator" }), index.h("button", { key: '162d6e85965338b5700e661595dc6da6131ebccf', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": this.terms['utility.delete'] ?? 'Delete selected items' }, index.h("kritzel-icon", { key: 'dc00247ed45f09b86ad9314395f56e70d1122a4b', name: "delete" }))));
+        return (index.h(index.Host, { key: '90b96b2f4693016650394e085c1ccf5c61759713' }, index.h("button", { key: '325e3a869061ce7fda2d86e74250f4ea7414da8e', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event), "aria-label": this.terms['utility.undo'] ?? 'Undo' }, index.h("kritzel-icon", { key: '70335427bc3a9a54a994ad22935bde4010d8f96b', name: "undo" })), index.h("button", { key: 'cf3000675d594ffe64f947b57e5aabe084be32a7', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event), "aria-label": this.terms['utility.redo'] ?? 'Redo' }, index.h("kritzel-icon", { key: 'b33336374abb36a7cdb685fb970805ec1f4073e2', name: "redo" })), index.h("div", { key: '34323fd33574ba65c825687fec5b772facbd2c62', class: "utility-separator" }), index.h("button", { key: 'aff157ab166ed15b8f9172b5b63f62996ed51c6e', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": this.terms['utility.delete'] ?? 'Delete selected items' }, index.h("kritzel-icon", { key: '413104d9d493fc47ad5ae8e61af514dfd530f6ee', name: "delete" }))));
     }
 };
 KritzelUtilityPanel.style = kritzelUtilityPanelCss();
@@ -32371,7 +35517,7 @@ const KritzelWatermark = class {
     label;
     render() {
         const label = this.label ?? this.core.localizationManager.translate('watermark.poweredBy');
-        return (index.h(index.Host, { key: '975534180d82064e38fa0289a2955e97a4ca0a08' }, index.h("a", { key: 'c59723d1f5bf3089256c0b610d0574bfc385ef85', class: "watermark-link", href: KRITZEL_WEBSITE_URL, target: "_blank", rel: "noopener noreferrer", part: "watermark", onPointerDown: (ev) => ev.stopPropagation(), onPointerUp: (ev) => ev.stopPropagation() }, label)));
+        return (index.h(index.Host, { key: '0eccc75e51c7ac199e23d8f3a871593f1fb65a17' }, index.h("a", { key: '2029f8b56ba8609ca621447eac0df9d30ebfbbbe', class: "watermark-link", href: KRITZEL_WEBSITE_URL, target: "_blank", rel: "noopener noreferrer", part: "watermark", onPointerDown: (ev) => ev.stopPropagation(), onPointerUp: (ev) => ev.stopPropagation() }, label)));
     }
 };
 KritzelWatermark.style = kritzelWatermarkCss();
@@ -32559,7 +35705,7 @@ const KritzelZoomPanel = class {
         return Number.isFinite(this.zoomPercent) ? Math.max(1, Math.round(this.zoomPercent)) : 100;
     }
     render() {
-        return (index.h(index.Host, { key: '00d5c674581d4efa40da3a2ad5cbdd8295406590' }, index.h("div", { key: 'c7a4158f57b8062f37ee69f7b198442ec357d746', class: { panel: true, visible: this.visible } }, index.h("button", { key: 'e20344f5e522d481185a9dab7afdb2668cf44408', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomOut'] ?? 'Zoom out', disabled: this.disabled, onClick: this.handleZoomOut }, index.h("kritzel-icon", { key: '4fc1eeb78669894b0939a96c5e6945cea5056ac1', name: "minus" })), index.h("span", { key: 'ed26096e2ca76fe91b50d73ea6c9481996d01590', class: "zoom-level", "aria-live": "polite" }, this.normalizedZoomPercent, "%"), index.h("button", { key: '42609c6e8558b7d9e9e348b864639ead6c4cc9bb', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomIn'] ?? 'Zoom in', disabled: this.disabled, onClick: this.handleZoomIn }, index.h("kritzel-icon", { key: '3a321afb57f532ef867bae73751314f3fd355214', name: "plus" })))));
+        return (index.h(index.Host, { key: '56b65a376d4bd94553416e07f2621192c4457bc2' }, index.h("div", { key: 'bdbfea3b3ee7e37eeb5c5f03388eb92ed8af9962', class: { panel: true, visible: this.visible } }, index.h("button", { key: 'de5ad152aaf7965f731bee95170b67e62af94ea2', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomOut'] ?? 'Zoom out', disabled: this.disabled, onClick: this.handleZoomOut }, index.h("kritzel-icon", { key: '104eb632666c55c032a40e6df2097aaa643fd23b', name: "minus" })), index.h("span", { key: 'd601b324e26a6c2737138b8f151b13dcdb2d20ab', class: "zoom-level", "aria-live": "polite" }, this.normalizedZoomPercent, "%"), index.h("button", { key: 'c976d03c69978f2d5cedf2a94b38419ed81088f6', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomIn'] ?? 'Zoom in', disabled: this.disabled, onClick: this.handleZoomIn }, index.h("kritzel-icon", { key: '844105bd53f3307425789aa6baf0ac3c25407414', name: "plus" })))));
     }
 };
 KritzelZoomPanel.style = kritzelZoomPanelCss();
@@ -32587,6 +35733,7 @@ exports.kritzel_font_size = KritzelFontSize;
 exports.kritzel_icon = KritzelIcon;
 exports.kritzel_input = KritzelInput;
 exports.kritzel_line_endings = KritzelLineEndings;
+exports.kritzel_loading_overlay = KritzelLoadingOverlay;
 exports.kritzel_login_dialog = KritzelLoginDialog;
 exports.kritzel_master_detail = KritzelMasterDetail;
 exports.kritzel_menu = KritzelMenu;