kritzel-stencil 0.3.42 → 0.3.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (129) hide show
  1. package/dist/cjs/index-Xav9JFHg.js +2 -2
  2. package/dist/cjs/{kritzel-active-users_46.cjs.entry.js → kritzel-active-users_47.cjs.entry.js} +96 -70
  3. package/dist/cjs/loader.cjs.js +1 -1
  4. package/dist/cjs/stencil.cjs.js +1 -1
  5. package/dist/collection/collection-manifest.json +1 -0
  6. package/dist/collection/components/core/kritzel-editor/kritzel-editor.js +9 -16
  7. package/dist/collection/components/core/kritzel-engine/kritzel-engine.css +0 -7
  8. package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +40 -11
  9. package/dist/collection/components/core/kritzel-watermark/kritzel-watermark.js +1 -1
  10. package/dist/collection/components/shared/kritzel-avatar/kritzel-avatar.js +3 -3
  11. package/dist/collection/components/shared/kritzel-button/kritzel-button.js +2 -2
  12. package/dist/collection/components/shared/kritzel-color/kritzel-color.js +2 -2
  13. package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.js +1 -1
  14. package/dist/collection/components/shared/kritzel-font/kritzel-font.js +1 -1
  15. package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.js +1 -1
  16. package/dist/collection/components/shared/kritzel-input/kritzel-input.js +1 -1
  17. package/dist/collection/components/shared/kritzel-master-detail/kritzel-master-detail.js +3 -3
  18. package/dist/collection/components/shared/kritzel-menu/kritzel-menu.js +1 -1
  19. package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.js +2 -2
  20. package/dist/collection/components/shared/kritzel-numeric-input/kritzel-numeric-input.js +1 -1
  21. package/dist/collection/components/shared/kritzel-opacity-slider/kritzel-opacity-slider.js +1 -1
  22. package/dist/collection/components/shared/kritzel-portal/kritzel-portal.js +1 -1
  23. package/dist/collection/components/shared/kritzel-slide-toggle/kritzel-slide-toggle.js +1 -1
  24. package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.js +1 -1
  25. package/dist/collection/components/shared/kritzel-stroke-size/kritzel-stroke-size.js +1 -1
  26. package/dist/collection/components/shared/kritzel-sync-indicator/kritzel-sync-indicator.css +50 -0
  27. package/dist/collection/components/shared/kritzel-sync-indicator/kritzel-sync-indicator.js +66 -0
  28. package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.js +2 -2
  29. package/dist/collection/components/ui/kritzel-back-to-content/kritzel-back-to-content.js +1 -1
  30. package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js +6 -6
  31. package/dist/collection/components/ui/kritzel-current-user/kritzel-current-user.js +1 -1
  32. package/dist/collection/components/ui/kritzel-current-user-dialog/kritzel-current-user-dialog.js +1 -1
  33. package/dist/collection/components/ui/kritzel-export/kritzel-export.js +1 -1
  34. package/dist/collection/components/ui/kritzel-loading-overlay/kritzel-loading-overlay.js +1 -1
  35. package/dist/collection/components/ui/kritzel-login-dialog/kritzel-login-dialog.js +1 -1
  36. package/dist/collection/components/ui/kritzel-more-menu/kritzel-more-menu.js +1 -1
  37. package/dist/collection/components/ui/kritzel-settings/kritzel-settings.js +1 -1
  38. package/dist/collection/components/ui/kritzel-share-dialog/kritzel-share-dialog.js +2 -2
  39. package/dist/collection/components/ui/kritzel-utility-panel/kritzel-utility-panel.js +1 -1
  40. package/dist/collection/components/ui/kritzel-zoom-panel/kritzel-zoom-panel.js +1 -1
  41. package/dist/collection/constants/version.js +1 -1
  42. package/dist/components/index.d.ts +2 -0
  43. package/dist/components/index.js +1 -1
  44. package/dist/components/kritzel-active-users.js +1 -1
  45. package/dist/components/kritzel-avatar.js +1 -1
  46. package/dist/components/kritzel-back-to-content.js +1 -1
  47. package/dist/components/kritzel-button.js +1 -1
  48. package/dist/components/kritzel-color-palette.js +1 -1
  49. package/dist/components/kritzel-color.js +1 -1
  50. package/dist/components/kritzel-controls.js +1 -1
  51. package/dist/components/kritzel-current-user-dialog.js +1 -1
  52. package/dist/components/kritzel-current-user.js +1 -1
  53. package/dist/components/kritzel-editor.js +1 -1
  54. package/dist/components/kritzel-engine.js +1 -1
  55. package/dist/components/kritzel-export.js +1 -1
  56. package/dist/components/kritzel-font-size.js +1 -1
  57. package/dist/components/kritzel-font.js +1 -1
  58. package/dist/components/kritzel-input.js +1 -1
  59. package/dist/components/kritzel-loading-overlay.js +1 -1
  60. package/dist/components/kritzel-login-dialog.js +1 -1
  61. package/dist/components/kritzel-master-detail.js +1 -1
  62. package/dist/components/kritzel-menu-item.js +1 -1
  63. package/dist/components/kritzel-menu.js +1 -1
  64. package/dist/components/kritzel-more-menu.js +1 -1
  65. package/dist/components/kritzel-numeric-input.js +1 -1
  66. package/dist/components/kritzel-opacity-slider.js +1 -1
  67. package/dist/components/kritzel-portal.js +1 -1
  68. package/dist/components/kritzel-settings.js +1 -1
  69. package/dist/components/kritzel-share-dialog.js +1 -1
  70. package/dist/components/kritzel-slide-toggle.js +1 -1
  71. package/dist/components/kritzel-split-button.js +1 -1
  72. package/dist/components/kritzel-stroke-size.js +1 -1
  73. package/dist/components/kritzel-sync-indicator.d.ts +11 -0
  74. package/dist/components/kritzel-sync-indicator.js +1 -0
  75. package/dist/components/kritzel-tool-config.js +1 -1
  76. package/dist/components/kritzel-tooltip.js +1 -1
  77. package/dist/components/kritzel-utility-panel.js +1 -1
  78. package/dist/components/kritzel-watermark.js +1 -1
  79. package/dist/components/kritzel-workspace-manager.js +1 -1
  80. package/dist/components/kritzel-zoom-panel.js +1 -1
  81. package/dist/components/p-894OnDQV.js +1 -0
  82. package/dist/components/{p-BulDbBWB.js → p-9692OaI_.js} +1 -1
  83. package/dist/components/{p-Ds-P2bYH.js → p-B5oHmPJb.js} +1 -1
  84. package/dist/components/{p-BzrxIesp.js → p-B6t5q-V4.js} +1 -1
  85. package/dist/components/{p-DgnK50xO.js → p-B8Xi4Clg.js} +1 -1
  86. package/dist/components/{p-DIMNEOTW.js → p-BDzlx2hB.js} +1 -1
  87. package/dist/components/{p-8xkoVMfO.js → p-BI2ng9I_.js} +1 -1
  88. package/dist/components/{p-DZcwchEg.js → p-BTzlrIxe.js} +1 -1
  89. package/dist/components/{p-CVhcOiEA.js → p-BsANVili.js} +1 -1
  90. package/dist/components/{p-C4XDwGU0.js → p-C2ocjA6D.js} +1 -1
  91. package/dist/components/{p-DSOc0eIT.js → p-C4NrrUfN.js} +1 -1
  92. package/dist/components/p-C7rN6L3d.js +9 -0
  93. package/dist/components/{p-BzJEwFtn.js → p-CWRSGYOE.js} +1 -1
  94. package/dist/components/{p-BLOPBDUF.js → p-Ca-igU1f.js} +1 -1
  95. package/dist/components/{p-zd7zXld8.js → p-CqLgB8JK.js} +1 -1
  96. package/dist/components/{p-D8TOEhPY.js → p-Cr682JI_.js} +1 -1
  97. package/dist/components/{p-Bd_yPNfg.js → p-CsvMgk_f.js} +1 -1
  98. package/dist/components/{p-BKOsmXB5.js → p-CwJwsRR3.js} +1 -1
  99. package/dist/components/{p-1nG2hxfJ.js → p-Cymum41a.js} +1 -1
  100. package/dist/components/p-D2q_wTyG.js +1 -0
  101. package/dist/components/{p-jzuGPW5o.js → p-D30zs0kA.js} +1 -1
  102. package/dist/components/{p-D52oKO_e.js → p-D3y_Hauo.js} +1 -1
  103. package/dist/components/{p-DXcjIb_a.js → p-D5jf8wAu.js} +1 -1
  104. package/dist/components/{p-Bm_BWQa4.js → p-D82VaHce.js} +1 -1
  105. package/dist/components/{p-oGAPPwAL.js → p-DEBwmRTC.js} +1 -1
  106. package/dist/components/{p-Di5dpXrF.js → p-DIazmg6w.js} +1 -1
  107. package/dist/components/{p-yD_3Z3K1.js → p-DJ88BrIW.js} +1 -1
  108. package/dist/components/{p-DEqpY4K2.js → p-DUYmwrWV.js} +1 -1
  109. package/dist/components/{p-B_6RNask.js → p-DgJ0ufzr.js} +1 -1
  110. package/dist/components/{p-CMphprF1.js → p-DkUb2czk.js} +1 -1
  111. package/dist/components/{p-DMAScsJF.js → p-Dlp84thc.js} +1 -1
  112. package/dist/components/{p-CwuGA058.js → p-PSFAfAyd.js} +1 -1
  113. package/dist/components/{p-DPpPd5GI.js → p-e6Zpc9Vp.js} +1 -1
  114. package/dist/components/{p-CGGLMeG_.js → p-s7PqL1NE.js} +1 -1
  115. package/dist/esm/index-Dhio9uis.js +2 -2
  116. package/dist/esm/{kritzel-active-users_46.entry.js → kritzel-active-users_47.entry.js} +96 -71
  117. package/dist/esm/loader.js +1 -1
  118. package/dist/esm/stencil.js +1 -1
  119. package/dist/stencil/p-ad326bf7.entry.js +9 -0
  120. package/dist/stencil/stencil.esm.js +1 -1
  121. package/dist/types/components/core/kritzel-editor/kritzel-editor.d.ts +0 -3
  122. package/dist/types/components/core/kritzel-engine/kritzel-engine.d.ts +4 -1
  123. package/dist/types/components/shared/kritzel-sync-indicator/kritzel-sync-indicator.d.ts +7 -0
  124. package/dist/types/components.d.ts +42 -0
  125. package/dist/types/constants/version.d.ts +1 -1
  126. package/package.json +1 -1
  127. package/dist/components/p-BR0Hnrhc.js +0 -1
  128. package/dist/components/p-hkYKD6tT.js +0 -9
  129. package/dist/stencil/p-5fc166d8.entry.js +0 -9
@@ -136,16 +136,16 @@ const KritzelAvatar = class {
136
136
  height: `${this.size}px`,
137
137
  fontSize: `${Math.round(this.size * 0.4)}px`,
138
138
  };
139
- return (h(Host, { key: '116725d55e4443e80216b3b3251e957d2009b43e', style: containerStyles, class: {
139
+ return (h(Host, { key: 'a25cae3d0597e53606a00855e3175c89ff90d58e', style: containerStyles, class: {
140
140
  'has-image': !!showImage,
141
141
  'has-initials': !!showInitials,
142
142
  'has-default': !!showDefaultIcon,
143
- }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: 'd70ad4eb484404b18c13e066e8c10b3c86918ee5', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
143
+ }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: 'c3288f0ba9e0d8876403244fe3942dd91e685a79', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
144
144
  if (el) {
145
145
  el.referrerPolicy = 'no-referrer';
146
146
  el.crossOrigin = 'anonymous';
147
147
  }
148
- }, onError: this.handleImageError })), showInitials && (h("span", { key: '21a9022cffdb69e0c3626e513cb3c036a9d3a16d', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: '43e676af007bf254b1921f3efcbc7fff4e204359', class: "avatar-default" }, h("svg", { key: 'a7378795539a902e28ca644a80f1ca00cc9f818a', viewBox: "0 0 24 24", fill: "currentColor" }, 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" }))))));
148
+ }, onError: this.handleImageError })), showInitials && (h("span", { key: 'ae0ca459b87e90a1f67abe747b75d8dd61247ead', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: '2a60a0347ae21732828920339f53803330c9c6c6', class: "avatar-default" }, h("svg", { key: 'ee057dc02ae61206164775b35ad1408fe04dfed9', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '2190046ba2e2c659d47f8a7f4a12bb10ae626f07', 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" }))))));
149
149
  }
150
150
  static get watchers() { return {
151
151
  "user": [{
@@ -455,7 +455,7 @@ const KritzelBackToContent = class {
455
455
  this.backToContent.emit();
456
456
  };
457
457
  render() {
458
- return (h(Host, { key: 'ab9e9297f5f26bcf79ec32e51ee0ff2524ad421f' }, h("button", { key: 'c32536edc9943bc9ad66f4fa727338bb01e148a6', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, h("kritzel-icon", { key: 'bd3aa6ffe524ad9093d1e0693574dc2d63c311bd', name: "chevrons-left" }))));
458
+ return (h(Host, { key: '9a087efd5b544a5633b89fcdfa9609a207eb70fc' }, h("button", { key: 'd02c237dd9fe08a5e65b2c72cc47f4444b47338c', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, h("kritzel-icon", { key: '3345e1bd20a1a4e2f6e46b1a365e3405a8304f4e', name: "chevrons-left" }))));
459
459
  }
460
460
  };
461
461
  KritzelBackToContent.style = kritzelBackToContentCss();
@@ -482,11 +482,11 @@ const KritzelButton = class {
482
482
  this.buttonClick.emit();
483
483
  };
484
484
  render() {
485
- return (h(Host, { key: 'b9de2a1261ca0cb491f6980db6a596c48fa45b3a' }, h("button", { key: 'a9507ea0f6a1d9fcb19a7df16bea54cc0ead24f9', type: this.type, class: {
485
+ return (h(Host, { key: 'ee7da1d8d86cdd6f920d15642203265cc93cda4e' }, h("button", { key: '15b1f11be5157c70ef5a4b3cd917bacb8f90ee4a', type: this.type, class: {
486
486
  'kritzel-button': true,
487
487
  [this.variant]: true,
488
488
  'disabled': this.disabled,
489
- }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '8449a26d4f9fe0226c6150a6639c522486b59780' }))));
489
+ }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '8500172bd4540f4fa9c5e629d1ceb1816dcf556a' }))));
490
490
  }
491
491
  };
492
492
  KritzelButton.style = kritzelButtonCss();
@@ -534,13 +534,13 @@ const KritzelColorComponent = class {
534
534
  render() {
535
535
  const resolvedColor = this.resolveColor();
536
536
  const isColorVeryLight = this.isLightColor(resolvedColor);
537
- return (h(Host, { key: 'e39c77c55942b9c615e404efabf4939b2cf05a34' }, h("div", { key: 'ac343295592ea80ca7d3da61ca1244dd1aaa50db', class: "checkerboard-bg", style: {
537
+ return (h(Host, { key: 'a898705a76a25b051b046cb3d5274c1701482a4c' }, h("div", { key: '7d5ce83a17f710a1d808ff7d572b75585caada72', class: "checkerboard-bg", style: {
538
538
  width: `${this.size}px`,
539
539
  height: `${this.size}px`,
540
540
  borderRadius: '50%',
541
541
  display: 'inline-block',
542
542
  position: 'relative',
543
- } }, h("div", { key: '4c87934b3febd4c41874cd290d86a9a9a557e3e5', class: {
543
+ } }, h("div", { key: '8d318c989b7e69bc61dd653688a9e7480c4ee34d', class: {
544
544
  'color-circle': true,
545
545
  'white': isColorVeryLight,
546
546
  }, style: {
@@ -596,7 +596,7 @@ const KritzelColorPalette = class {
596
596
  render() {
597
597
  const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
598
598
  const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
599
- return (h(Host, { key: '16aa405a43b3943473e577c5a6ab86adf4ae1ba9' }, h("div", { key: 'f65bb286889700dc1f0e8d84ff59721071b7b73a', class: {
599
+ return (h(Host, { key: '6e16fdd13c09ab2bcffb83df7ed861560f486518' }, h("div", { key: '48cc257315e13822dcc8bea314d26f1137d9b3cc', class: {
600
600
  'color-grid': true,
601
601
  'expanded': this.isExpanded,
602
602
  }, style: {
@@ -1164,13 +1164,13 @@ const KritzelControls = class {
1164
1164
  // Separate tool controls from config control
1165
1165
  const toolControls = this.internalControls.filter(c => c.type === 'tool' || c.type === 'separator');
1166
1166
  const configControl = this.internalControls.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
1167
- return (h(Host, { key: 'f66fd3057bd88d31d7d585f2c286feb7e33c3611', style: { display: this.visible ? '' : 'none' }, class: {
1167
+ return (h(Host, { key: '5a23a0a1baa407097b18b9bc43f41186c0c333b2', style: { display: this.visible ? '' : 'none' }, class: {
1168
1168
  mobile: this.isTouchDevice,
1169
- } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '4841cd070407422f0081dd528566d3943d2db7cd', style: {
1169
+ } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '6d3878904bd13266be79cef0e0d1ee55d760b3da', style: {
1170
1170
  position: 'absolute',
1171
1171
  bottom: '56px',
1172
1172
  left: '12px',
1173
- }, undoState: this.undoState, terms: this.terms, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '54fb1da3f8b070c4c75e27930c95ca06f46f48f1', class: "kritzel-controls" }, h("div", { key: '9ce27b621a8fb668716f1eb15f3b01302e476d86', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: 'eb9f499b5139c481b5748b09ecf21cd414918a11', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
1173
+ }, undoState: this.undoState, terms: this.terms, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '5e066964eba04ad9b0d1abf36f61b93464254f48', class: "kritzel-controls" }, h("div", { key: '76e49fd459e0a312837ec0b5e552355395b8814e', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: 'd4cffe56418dae5c569a47fe2ffc3f810f221455', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
1174
1174
  // Check if this control has sub-options (split-button)
1175
1175
  if (control.subOptions?.length) {
1176
1176
  const selectedSubOption = this.getSelectedSubOption(control);
@@ -1200,10 +1200,10 @@ const KritzelControls = class {
1200
1200
  'kritzel-control': true,
1201
1201
  'selected': this.activeControl?.name === control?.name,
1202
1202
  }, key: control.name, "data-testid": `tool-${control.name}`, onClick: _event => this.handleControlClick?.(control), "aria-label": control.name.charAt(0).toUpperCase() + control.name.slice(1) }, h("kritzel-icon", { name: control.icon })));
1203
- })), h("div", { key: 'c990abf4ff2970e6519c605135f3fbded691e91a', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
1203
+ })), h("div", { key: '49806e8e06b8756a097eeec53203a55586214a4a', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
1204
1204
  'kritzel-config-container': true,
1205
1205
  'visible': hasConfigUI,
1206
- }, key: configControl.name }, h("div", { key: '1c163b818eed3a76bda9e802b083d2bfe8431c87', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: 'f7252d9aa17bdde580ca31cd558ba93d99822937', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, 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%' } })), h("div", { key: 'ffbf1e35387ee732c6877f8425dbe07234d8233f', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
1206
+ }, key: configControl.name }, h("div", { key: 'da0ec9cf776dee0872bbb7f0369a6a5a56ebb955', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: 'c848a63392d4ed9a30f467512421fbea3096d876', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: 'c7ed50fbdfbdab1847fb8c5c6e73d0e743b45706', 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%' } })), h("div", { key: 'de6c9801d3e9e89674b60b1c4e270b8520014aae', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
1207
1207
  if (el)
1208
1208
  this.configTriggerRef = el;
1209
1209
  }, onKeyDown: event => {
@@ -1212,7 +1212,7 @@ const KritzelControls = class {
1212
1212
  }
1213
1213
  }, style: {
1214
1214
  cursor: 'pointer',
1215
- } }, this.displayValues && (h("div", { key: 'eb272119da9354eb069231c3d29a196c5b0e4aa2', class: "color-container" }, h("kritzel-color", { key: '465b3af943d740b83bd260ee493840edd235a9af', value: this.displayValues.color, theme: this.theme, size: 18, style: {
1215
+ } }, this.displayValues && (h("div", { key: '140bbf567b0bbd2a2fe878536e93d8646a58b209', class: "color-container" }, h("kritzel-color", { key: 'eeb1d94fa41bbc177d39b4158ae3c4c1d692c0ec', value: this.displayValues.color, theme: this.theme, size: 18, style: {
1216
1216
  borderRadius: '50%',
1217
1217
  border: 'none',
1218
1218
  } })))))))));
@@ -1246,7 +1246,7 @@ const KritzelCurrentUser = class {
1246
1246
  /** Resolved localized strings keyed by term key, supplied by the editor. */
1247
1247
  terms = {};
1248
1248
  render() {
1249
- return (h(Host, { key: 'e9746bbb98dbdae8f73ac7129bc1eb772746c576' }, h("kritzel-avatar", { key: '04f493ba649484cd95607c54b77e27134baa3122', user: this.user, size: this.avatarSize })));
1249
+ return (h(Host, { key: '606ff4d621467d24c30d06a2cf9191a883497f1b' }, h("kritzel-avatar", { key: 'a215f36bcfa55e2d649e79ef2e4ae4503ebb325d', user: this.user, size: this.avatarSize })));
1250
1250
  }
1251
1251
  };
1252
1252
  KritzelCurrentUser.style = kritzelCurrentUserCss();
@@ -1287,7 +1287,7 @@ const KritzelCurrentUserDialog = class {
1287
1287
  }
1288
1288
  render() {
1289
1289
  const displayName = this.getDisplayName();
1290
- return (h(Host, { key: '6eb573d072c5c0b47de4a88538a507adf49bd9b4' }, h("kritzel-dialog", { key: '9e85ed790f146ac408023759b1fe87e60bc80282', dialogTitle: this.terms['currentUser.dialogTitle'] ?? 'Account', isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '33a55e6023ad6f63514085d57b7278d4733bd411', class: "user-info" }, h("kritzel-avatar", { key: '4580f83fc6c5bcf8a1ffcd0d635da233817233d3', user: this.user, size: 80 }), displayName && h("div", { key: '5e2b98005e9b4ab7cc3db2dc81f4180e8ba3abea', class: "user-name" }, displayName), this.user?.email && h("div", { key: '1041266c4a4525d2f08c60d59bec5a518de2184b', class: "user-email" }, this.user.email), h("kritzel-button", { key: 'b695c05d24ab9d4d252a45ec496d75d79583ed4d', class: "logout-button", variant: "primary", onButtonClick: this.handleLogout }, this.terms['menu.logout'] ?? 'Logout')))));
1290
+ return (h(Host, { key: '46fa9107dd133e2896a80bf337874b69943156c6' }, h("kritzel-dialog", { key: '9270ec727f41b73fb37eaec2ee601689d3c26292', dialogTitle: this.terms['currentUser.dialogTitle'] ?? 'Account', isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '3c877db40a63bef3624f252ab39842cbc0b9bdc8', class: "user-info" }, h("kritzel-avatar", { key: '821130a92f385de1fa4e796b99830c4c3b317c15', user: this.user, size: 80 }), displayName && h("div", { key: 'e9c44284d50c97aed00523541360dbbaf6e37566', class: "user-name" }, displayName), this.user?.email && h("div", { key: '46f24e37629e6bd1c1dd5c52cfd7281c1d2e2308', class: "user-email" }, this.user.email), h("kritzel-button", { key: '929483c1bb270eb8dcf8e9d9e0d087b8476cd23f', class: "logout-button", variant: "primary", onButtonClick: this.handleLogout }, this.terms['menu.logout'] ?? 'Logout')))));
1291
1291
  }
1292
1292
  };
1293
1293
  KritzelCurrentUserDialog.style = kritzelCurrentUserDialogCss();
@@ -2342,8 +2342,6 @@ const KritzelEditor = class {
2342
2342
  isEditorVisible = false;
2343
2343
  activeNotification;
2344
2344
  isNotificationDismissing = false;
2345
- /** 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. */
2346
- isEngineLoading = true;
2347
2345
  notificationDismissTimeout;
2348
2346
  notificationDismissAnimationTimeout;
2349
2347
  notificationDisplayDurationMs = 5000;
@@ -2770,10 +2768,6 @@ const KritzelEditor = class {
2770
2768
  event.stopPropagation();
2771
2769
  this.awarenessChange.emit(event.detail);
2772
2770
  }
2773
- handleLoadingChange(event) {
2774
- event.stopPropagation();
2775
- this.isEngineLoading = event.detail;
2776
- }
2777
2771
  handleNotificationsChange(event) {
2778
2772
  event.stopPropagation();
2779
2773
  this.clearNotificationDismissAnimationTimer();
@@ -3058,36 +3052,36 @@ const KritzelEditor = class {
3058
3052
  const isLoggedIn = this.isLoggedIn;
3059
3053
  const shouldShowCurrentUser = isLoggedIn;
3060
3054
  const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
3061
- return (h(Host, { key: 'a397bb3a5ab632193a0d6af07054d9235c8af7ba' }, h("kritzel-loading-overlay", { key: '8ac3ec51ec15a7ce3dfac4e1afb7e2d272d6fee2', visible: this.isLoading || !this.isEditorVisible || this.isEngineLoading, text: this.resolvedTerms['engine.loading'] ?? 'Loading...' }), h("div", { key: '0ac709cf7d3e9889f99675f20c1f2ac5bcca55da', class: "editor-content", style: {
3055
+ return (h(Host, { key: '3128b38a04cd636abc1f2466f1ac1aa3dcea2262' }, h("div", { key: 'b1fbb051cb1144fd84f28cfea4ad824f92189dbd', class: "editor-content", style: {
3062
3056
  opacity: this.isEditorVisible ? '1' : '0',
3063
3057
  visibility: this.isEditorVisible ? 'visible' : 'hidden',
3064
3058
  transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out',
3065
- } }, h("div", { key: '019cbb191155260c635cb13a4d94eebbb5913045', class: "top-left-buttons" }, 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) }), h("kritzel-back-to-content", { key: 'b0b625e1cd07f29d9622b03e49cf75c9324b2d38', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: '80868e85dc8a0810750ff5dd04c59057d81fb823', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: '8cfe3895cb8dcd137950daff0e677d397c20817b', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, h("kritzel-notification-card", { key: 'f50a8ff5fba9ee8df8bb0fa5c2b3198ad30fd8cd', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), h("kritzel-engine", { key: '7b31643384b19dfd84b6093a4ccb719dd04b7669', ref: el => {
3059
+ } }, h("div", { key: '2b896fa8bd00a7c68b74df7a9846e8c3e0f6efc4', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: '13244251aa8999d78d275eefe5583d592f3506fc', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, terms: this.resolvedTerms, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: '7d3015918e4af7ee435aee8da37ddfa206cdfd66', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: '49f13f23698db9b804d139e0f35696be06569346', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: '765aa6995398aca3c7738758bedb7d9a7c2f099a', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, h("kritzel-notification-card", { key: 'fe0dfa30aa498a608f9167b01e0a2309dfa67162', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), h("kritzel-engine", { key: '5aeb7979faa8779653ff6a2930d288fd601cb0e9', ref: el => {
3066
3060
  if (el) {
3067
3061
  this.engineRef = el;
3068
3062
  }
3069
- }, 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) }), h("kritzel-controls", { key: '14ee52a07381785c4b8ce1f2e1b7304d44e0e128', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
3063
+ }, 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) }), h("kritzel-controls", { key: 'eda4dc93fe663c8472638190216bea5bf64d7153', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
3070
3064
  if (el) {
3071
3065
  this.controlsRef = el;
3072
3066
  }
3073
- }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'c9ddf5fe7d74f32aff8182ce9dd70931f35a7274', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: '3ede1bacaa3ff6876429347c8edc20939b1ec59e', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: 'af1f5f33065d5693e1c363f6e0d49d43cf839f88', class: "top-right-buttons" }, h("kritzel-settings", { key: 'f281c4b2c47d0fa15e947c2bd9e6e34f6ab064cf', ref: el => {
3067
+ }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'ffdb548da8aac3498b1b3e9bfdc9a41f8c448675', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: 'af6f6a86212195fd3ee13bc33c16574e0a5236a6', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: '0870c0e47838fc99b4041718a431535827e199cf', class: "top-right-buttons" }, h("kritzel-settings", { key: 'b95beb43dbe1a9c99454fc4ff74f0630aca7ad83', ref: el => {
3074
3068
  if (el) {
3075
3069
  this.settingsRef = el;
3076
3070
  }
3077
- }, 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) }), h("kritzel-export", { key: 'aa9f4d755cd429e287bd9dc513f059006e47c037', ref: el => {
3071
+ }, 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) }), h("kritzel-export", { key: 'ef6fea2715ff99226fde937185a693efc2a7dd75', ref: el => {
3078
3072
  if (el) {
3079
3073
  this.exportRef = el;
3080
3074
  }
3081
- }, workspaceName: this.activeWorkspace?.name || 'workspace', terms: this.resolvedTerms, onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: 'e7f019162bf7fa84c591e78c9255ed54d49d624f', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '5b51e312ca1d94717c8eae781435a1c253dfecc3', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (h("kritzel-current-user-dialog", { key: '328297225ea30570baa1aeec8dffda3e5fb90f6e', ref: el => {
3075
+ }, workspaceName: this.activeWorkspace?.name || 'workspace', terms: this.resolvedTerms, onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: '872b7fa12d49410d1c370baed3386a34f89d3e2a', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: 'da19825b4fba6a516803f8330cdfdfac6b6c9db1', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (h("kritzel-current-user-dialog", { key: '9336ce611286d3ecf9318317ab4bedb8c3f79f05', ref: el => {
3082
3076
  if (el) {
3083
3077
  this.currentUserDialogRef = el;
3084
3078
  this.currentUserDialogRef.addEventListener('logoutRequest', this.handleCurrentUserLogout);
3085
3079
  }
3086
- }, user: this.user, terms: this.resolvedTerms })), shouldShowLoginButton && (h("kritzel-button", { key: '719da0f8c343b0e3be80b37318bb27e102ea0f1e', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in')), h("kritzel-more-menu", { key: 'c3d0f82f8e21b53b966fcc99c598051b6e294b6a', items: this.moreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: '49a929e16684131fe4e0c7cc9d5f5ad769b6785c', ref: el => {
3080
+ }, user: this.user, terms: this.resolvedTerms })), shouldShowLoginButton && (h("kritzel-button", { key: 'a9e38ad3e13c785f6a4223ebde95f60451c6515f', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in')), h("kritzel-more-menu", { key: 'b8f63a63ae4e75a70d0069410170af902f2a362b', items: this.moreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: '7a923fd51e8d2bd1e2833e0941622efadd55f881', ref: el => {
3087
3081
  if (el) {
3088
3082
  this.shareDialogRef = el;
3089
3083
  }
3090
- }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '113bd2574096d3e64ff36b2b8d152b28ff4ba8f7', ref: el => {
3084
+ }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: 'ac54c699a94bb2657a6817c37d6220b75d931cd3', ref: el => {
3091
3085
  if (el) {
3092
3086
  this.loginDialogRef = el;
3093
3087
  }
@@ -27417,7 +27411,7 @@ class KritzelWheelHelper {
27417
27411
  }
27418
27412
  }
27419
27413
 
27420
- const kritzelEngineCss = () => `:host{display:block;position:relative;height:100%;width:100%;overflow:hidden;isolation:isolate;background-color:var(--kritzel-engine-background-color, #ffffff);opacity:1;transition:opacity 200ms ease}:host(.is-content-hidden){opacity:0;pointer-events:none}: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}`;
27414
+ const kritzelEngineCss = () => `:host{display:block;position:relative;height:100%;width:100%;overflow:hidden;isolation:isolate;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}`;
27421
27415
 
27422
27416
  const KritzelEngine = class {
27423
27417
  get host() { return getElement(this); }
@@ -27649,8 +27643,10 @@ const KritzelEngine = class {
27649
27643
  notificationsChange;
27650
27644
  /** Emitted when the combined loading state (external `isLoading` prop or internal workspace loading) changes. */
27651
27645
  loadingChange;
27646
+ /** Emitted when remote workspace synchronization is in progress. */
27647
+ syncingChange;
27652
27648
  forceUpdate = 0;
27653
- isContentHidden = true;
27649
+ isSyncing = false;
27654
27650
  /** Manually triggers the `objectsSelectionChange` event. */
27655
27651
  async triggerSelectionChange() {
27656
27652
  this.objectsSelectionChange.emit();
@@ -29107,12 +29103,12 @@ const KritzelEngine = class {
29107
29103
  _objectDistanceFadeCloseMaxScale = 4;
29108
29104
  _objectDistanceFadeCloseMinOpacity = 0;
29109
29105
  syncLoadingState() {
29110
- const isLoading = this._isWorkspaceLoading || this.isLoading;
29111
- this.core.store.state.isLoading = isLoading;
29112
- if (this.isContentHidden !== isLoading) {
29113
- this.isContentHidden = isLoading;
29114
- }
29115
- this.loadingChange.emit(isLoading);
29106
+ this.core.store.state.isLoading = this._isWorkspaceLoading || this.isLoading;
29107
+ this.loadingChange.emit(this.core.store.state.isLoading);
29108
+ }
29109
+ syncSyncingState(isSyncing) {
29110
+ this.isSyncing = isSyncing;
29111
+ this.syncingChange.emit(isSyncing);
29116
29112
  }
29117
29113
  applyToolConfig(tool, toolConfig) {
29118
29114
  Object.entries(toolConfig).forEach(([key, value]) => {
@@ -29159,6 +29155,7 @@ const KritzelEngine = class {
29159
29155
  this.awarenessChange = createEvent(this, "awarenessChange");
29160
29156
  this.notificationsChange = createEvent(this, "notificationsChange");
29161
29157
  this.loadingChange = createEvent(this, "loadingChange");
29158
+ this.syncingChange = createEvent(this, "syncingChange");
29162
29159
  this.core = new KritzelCore(this);
29163
29160
  }
29164
29161
  disconnectedCallback() {
@@ -29387,9 +29384,21 @@ const KritzelEngine = class {
29387
29384
  this._workspaceInitializationTargetKey = targetKey;
29388
29385
  try {
29389
29386
  await initializationPromise;
29390
- // Wait for network providers to sync so overlay stays visible until remote data arrives
29387
+ // Track remote sync in the background without blocking the loading overlay.
29391
29388
  const initializedObjects = this.core.store.objects;
29392
- await initializedObjects?.whenNetworkSynced();
29389
+ const networkSyncPromise = initializedObjects?.whenNetworkSynced();
29390
+ if (networkSyncPromise) {
29391
+ this.syncSyncingState(true);
29392
+ void networkSyncPromise.finally(() => {
29393
+ // Only clear syncing for the currently active object map.
29394
+ if (this.core.store.objects === initializedObjects) {
29395
+ this.syncSyncingState(false);
29396
+ }
29397
+ });
29398
+ }
29399
+ else {
29400
+ this.syncSyncingState(false);
29401
+ }
29393
29402
  }
29394
29403
  finally {
29395
29404
  // Only the most recent init clears loading state to prevent race conditions
@@ -29574,7 +29583,7 @@ const KritzelEngine = class {
29574
29583
  this.emitObjectsInViewportChange();
29575
29584
  }
29576
29585
  }
29577
- return (h(Host, { class: { 'is-content-hidden': this.isContentHidden } }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { class: "debug-panel" }, h("div", null, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", null, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", null, "TranslateX: ", this.core.store.state?.translateX), h("div", null, "TranslateY: ", this.core.store.state?.translateY), h("div", null, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", null, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", null, "PointerCount: ", this.core.store.state.pointers.size), h("div", null, "Scale: ", this.core.store.state?.scale), h("div", null, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", null, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", null, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", null, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", null, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", null, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", null, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", null, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", null, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", null, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", null, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", null, "PointerX: ", this.core.store.state?.pointerX), h("div", null, "PointerY: ", this.core.store.state?.pointerY), h("div", null, "TotalObjects: ", this.core.store.totalObjectCount), h("div", null, "ObjectsInViewport: ", this.core.store.objectsInViewport.length), h("div", null, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", null, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { id: "origin", class: "origin", style: {
29586
+ return (h(Host, null, h("kritzel-loading-overlay", { visible: this.core.store.state.isLoading, text: this.core.localizationManager.translate('engine.loading') }), h("kritzel-sync-indicator", { visible: this.isSyncing, text: "Syncing..." }), this.core.store.state.debugInfo.showViewportInfo && (h("div", { class: "debug-panel" }, h("div", null, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", null, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", null, "TranslateX: ", this.core.store.state?.translateX), h("div", null, "TranslateY: ", this.core.store.state?.translateY), h("div", null, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", null, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", null, "PointerCount: ", this.core.store.state.pointers.size), h("div", null, "Scale: ", this.core.store.state?.scale), h("div", null, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", null, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", null, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", null, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", null, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", null, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", null, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", null, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", null, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", null, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", null, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", null, "PointerX: ", this.core.store.state?.pointerX), h("div", null, "PointerY: ", this.core.store.state?.pointerY), h("div", null, "TotalObjects: ", this.core.store.totalObjectCount), h("div", null, "ObjectsInViewport: ", this.core.store.objectsInViewport.length), h("div", null, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", null, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { id: "origin", class: "origin", style: {
29578
29587
  transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
29579
29588
  } }, visibleObjects?.map(object => {
29580
29589
  const { multiplied: effectiveOpacity, overridden: effectiveOpacityString } = this.getObjectEffectiveOpacity(object, viewportScale);
@@ -30172,7 +30181,7 @@ const KritzelExport = class {
30172
30181
  return (h("div", { class: "export-tab-content" }, 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 })));
30173
30182
  }
30174
30183
  render() {
30175
- return (h(Host, { key: '5706e0f8688777826452ca0cf81e2581f6e2d14a' }, h("kritzel-dialog", { key: '8d0d26a672604aec2b899a7ea05ab40031ac9c43', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: 'a4c3f5a2961aca9dd5cba4045b8bd53635681ab0', class: "export-content" }, 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(), h("button", { key: 'a4b8e1503a0a8e682d10623bc334fcc70b5ea243', class: "export-primary-button", onClick: this.handleExport }, this.terms['export.exportButton'] ?? 'Export')))));
30184
+ return (h(Host, { key: '2f12ec7f4754e3f2aa0364809bdbde60102d76e4' }, h("kritzel-dialog", { key: '0e5929e175ac41dd7f480aabaef2aa109a15f679', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: '6afffd8098e414c117582f3485dbaa348747eb4c', class: "export-content" }, h("kritzel-pill-tabs", { key: 'dd901f356e80fb71033311825e4d83af36b9c561', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport(), h("button", { key: '9fab5c1037cc9187c4f14c9534c8f395fde0d7cf', class: "export-primary-button", onClick: this.handleExport }, this.terms['export.exportButton'] ?? 'Export')))));
30176
30185
  }
30177
30186
  };
30178
30187
  KritzelExport.style = kritzelExportCss();
@@ -30187,7 +30196,7 @@ const KritzelFont = class {
30187
30196
  size = 24;
30188
30197
  color = '#000000';
30189
30198
  render() {
30190
- return (h(Host, { key: '054371cac30a2433611139a670406b0a1e3b99ff' }, h("div", { key: 'b4f2142b3cb31d067f39952a38b6f665f28f63bf', class: "font-preview", style: {
30199
+ return (h(Host, { key: '57369ac95d0c99a52a8580e7659ec10e0e8ab38e' }, h("div", { key: 'e8f128fd7b8d26debb2c4ad2075b27f969d731bd', class: "font-preview", style: {
30191
30200
  fontFamily: this.fontFamily,
30192
30201
  fontSize: `${this.size}px`,
30193
30202
  color: this.color
@@ -30263,7 +30272,7 @@ const KritzelFontSize = class {
30263
30272
  render() {
30264
30273
  const color = 'var(--kritzel-global-text-primary)';
30265
30274
  const sizes = this.sizes ?? [];
30266
- return (h(Host, { key: '56eb19367abe312bac3b626cfcae3b1ff6e90d21' }, sizes.map(size => (h("div", { tabIndex: 0, class: {
30275
+ return (h(Host, { key: '298b8c232c4d96583f4899efea86482ae8ebd319' }, sizes.map(size => (h("div", { tabIndex: 0, class: {
30267
30276
  'size-container': true,
30268
30277
  'selected': this.selectedSize === size,
30269
30278
  }, onClick: () => this.handleSizeClick(size), onKeyDown: event => this.handleKeyDown(event, size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size, color: color }))))));
@@ -30330,7 +30339,7 @@ const KritzelInput = class {
30330
30339
  this.valueChange.emit(input.value);
30331
30340
  };
30332
30341
  render() {
30333
- return (h(Host, { key: '46a0a48902a06ad85edcbaad3679ce3fe9ba850c' }, h("div", { key: 'a6beaf920614aa959d2fbd68b7268afba8637358', class: "input-container" }, this.label && h("label", { key: 'ca6d3fb3c22f1540795dbb0695ddd9b87cc05eee', class: "input-label" }, this.label), h("div", { key: '78d116e82531a9cca996d594792245449bcaf9c8', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, h("input", { key: '0d10d6356dea3a11338172bbe8c3c878eefcc708', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && h("span", { key: '0e6166ba8728efc1035302d7fb048306efbe5a68', class: "input-suffix" }, this.suffix)))));
30342
+ return (h(Host, { key: 'a59aa026922a3267ec7e6177973e80edfa97202c' }, h("div", { key: '46b1f191072bfb2a26579a329f8fd6ec86ca3ef9', class: "input-container" }, this.label && h("label", { key: '5409f811792034be56c3269b31ff374d8ed33de2', class: "input-label" }, this.label), h("div", { key: 'f51219b2a6384aeee63a7c8214821abd853a0ea5', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, h("input", { key: '05c93a526aa2f2d757a7c139fa3a47d84a4e2d95', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && h("span", { key: '91b60b25a7ff750720ff1961e224a035a2d86096', class: "input-suffix" }, this.suffix)))));
30334
30343
  }
30335
30344
  static get watchers() { return {
30336
30345
  "value": [{
@@ -30438,7 +30447,7 @@ const KritzelLoadingOverlay = class {
30438
30447
  */
30439
30448
  text = 'Loading...';
30440
30449
  render() {
30441
- return (h(Host, { key: 'b8c4784803ca5a0e6bf3f25c1d39139307bb6d50' }, h("div", { key: '5a8a2c44f1800c0275d1a94aa0eb5c2854be63b5', class: { 'loading-overlay': true, visible: this.visible }, "aria-hidden": this.visible ? 'false' : 'true' }, h("span", { key: '04e33166e054d7a600a83dacd48e3fb50ab69d22', class: "loading-spinner" }), this.text)));
30450
+ return (h(Host, { key: '30e6a9bd7337d74a2d33f27e8b9facfe1e5fdcce' }, h("div", { key: '4d0f7561372c2b28f748d5338dc28146fd1f8d31', class: { 'loading-overlay': true, visible: this.visible }, "aria-hidden": this.visible ? 'false' : 'true' }, h("span", { key: '303c5037522c00840089d7200a63525cffa05b82', class: "loading-spinner" }), this.text)));
30442
30451
  }
30443
30452
  };
30444
30453
  KritzelLoadingOverlay.style = kritzelLoadingOverlayCss();
@@ -30490,7 +30499,7 @@ const KritzelLoginDialog = class {
30490
30499
  this.dialogClosed.emit();
30491
30500
  };
30492
30501
  render() {
30493
- return (h(Host, { key: '5cedcb4fa0a9026338e930cfbbdbfa1df9853530' }, h("kritzel-dialog", { key: '1502a2dc67630b0a1399ef6e8d1a2fdcd4d50913', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: 'f84a888ccc0b1cb2052e30af56a08910da8d85b5', class: "login-content" }, this.subtitle && (h("p", { key: '971040609c43efea30a7bfd0c1a3de2113f77a2b', class: "login-subtitle" }, this.subtitle)), h("div", { key: 'ecb0c648ce0d9a8ca8b10e6a520273d817c7a0fe', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
30502
+ return (h(Host, { key: 'd2b393ac37292a0cf88d0e18e9768ca666b238b2' }, h("kritzel-dialog", { key: '6e302e9030b5da0baf307fe261285e484b3c1f08', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: 'f32b073d70acb3874dc3ab4c3905543067a543d8', class: "login-content" }, this.subtitle && (h("p", { key: '42a6ec7d6c9ca0a14700bd13cbe8ee9edbbcc18b', class: "login-subtitle" }, this.subtitle)), h("div", { key: 'cbb5497abd1c88fc364ac8bb7c3d356df6df0dad', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
30494
30503
  'provider-button': true,
30495
30504
  'is-loading': this.loadingProvider === provider.name,
30496
30505
  'is-disabled': this.loadingProvider !== null && this.loadingProvider !== provider.name,
@@ -30596,15 +30605,15 @@ const KritzelMasterDetail = class {
30596
30605
  const selectedItem = this.items.find(item => item.id === this.selectedItemId);
30597
30606
  const panelId = 'master-detail-panel';
30598
30607
  const selectedTabId = selectedItem ? `tab-${selectedItem.id}` : undefined;
30599
- return (h(Host, { key: '0edf50b0b853633b88bf481f97f22aceba9e163e' }, h("div", { key: '21a0a3f81e5a60889ccd152c905cb41f52c3e037', class: {
30608
+ return (h(Host, { key: 'e363142a5175b1f711cebfc98cfeedf07cd2c6c3' }, h("div", { key: 'eebf863ecdb4a53289cb56e14c02977375781167', class: {
30600
30609
  'master-detail-container': true,
30601
30610
  'is-mobile-detail-visible': this.showMobileDetail,
30602
- } }, h("nav", { key: '41f88248cc372c8cae4cb50a19edf462a01e43f2', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index) => (h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index), class: {
30611
+ } }, h("nav", { key: '06660d3cd7de29ba46e3437169f99cb00eef1cc6', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index) => (h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index), class: {
30603
30612
  'menu-item': true,
30604
30613
  'is-selected': item.id === this.selectedItemId,
30605
30614
  'is-disabled': !!item.disabled,
30606
30615
  'is-focused': index === this.focusedIndex,
30607
- }, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index), onFocus: () => this.handleFocus(index), onBlur: this.handleBlur }, item.icon && (h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), h("span", { class: "menu-item-label" }, item.label), h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "m9 18 6-6-6-6" }))))))), h("div", { key: 'f8447facf3dfdbd7772823654847e1b90b03f73e', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, h("button", { key: '3edc9784267613e6b3a706739bbb537161e4c747', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, h("kritzel-icon", { key: 'ec0b4691735578525e5863842271366e04b13fb7', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), h("slot", { key: 'c21fbaff78f98859b9756427125b60504d4bb630' })))));
30616
+ }, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index), onFocus: () => this.handleFocus(index), onBlur: this.handleBlur }, item.icon && (h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), h("span", { class: "menu-item-label" }, item.label), h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "m9 18 6-6-6-6" }))))))), h("div", { key: '0d6b6722ecbf64b28d27754161f861edafa3882c', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, h("button", { key: '3d8ac88c0f8a7a840b5560c4917d74ff910a99c8', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, h("kritzel-icon", { key: '03cf6ca5ea2b9d16ff21b1b38fd0b6148d35ff1f', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), h("slot", { key: '3323357889024c0d2126c30d976c3ece7ddd706a' })))));
30608
30617
  }
30609
30618
  static get watchers() { return {
30610
30619
  "selectedItemId": [{
@@ -30677,7 +30686,7 @@ const KritzelMenu = class {
30677
30686
  this.itemCloseChildMenu.emit(event.detail);
30678
30687
  };
30679
30688
  render() {
30680
- return (h(Host, { key: '27a90a3a8549517a2d6e341a5da13496bf714970', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: 'c0c2351fac389f6676b38481eaacee553ca6867a', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (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 })))));
30689
+ return (h(Host, { key: '9edadb795e13a5242a0a086bd78c21f0f420e88c', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: '4925a8698c1ac61787ba8c44beeed46461c62625', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (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 })))));
30681
30690
  }
30682
30691
  };
30683
30692
  KritzelMenu.style = kritzelMenuCss();
@@ -30782,12 +30791,12 @@ const KritzelMenuItem = class {
30782
30791
  ];
30783
30792
  }
30784
30793
  render() {
30785
- return (h(Host, { key: '9d6653a630da5a3da38291d89d6d7d59d6994e02', tabIndex: this.item.isDisabled ? -1 : 0, class: {
30794
+ return (h(Host, { key: '89e05e4ec01b4de48019a2459f625e34669b8429', tabIndex: this.item.isDisabled ? -1 : 0, class: {
30786
30795
  'selected': this.item.isSelected,
30787
30796
  'editing': this.item.isEditing,
30788
30797
  'disabled': this.item.isDisabled,
30789
30798
  'child-open': this.item.isChildMenuOpen,
30790
- }, onClick: this.handleItemSelect }, h("div", { key: '48a1678296e672c6c03fb3e1473c42d3a246d481', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
30799
+ }, onClick: this.handleItemSelect }, h("div", { key: '5de01524315482194c26e4bd4969f2ead4d852ec', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
30791
30800
  }
30792
30801
  static get watchers() { return {
30793
30802
  "item": [{
@@ -30860,7 +30869,7 @@ const KritzelMoreMenu = class {
30860
30869
  this.closeMenu();
30861
30870
  };
30862
30871
  render() {
30863
- return (h(Host, { key: 'b7736b67210f2d2f6b54296dd680104548d61641', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, h("div", { key: '076ecc02a1469bd87cb27f63f1d41183bedb11d4', class: { 'more-menu-wrapper': true, visible: this.visible } }, h("button", { key: 'cefe02e440391eb079af7b8accc367a291e93d6a', class: "more-menu-button", "data-testid": "more-menu-button", onClick: this.toggleMenu, "aria-label": this.terms['moreMenu.ariaLabel'] ?? 'More options' }, h("kritzel-icon", { key: 'cb6f4dd0f37ac0fbf1e1c28a0dc06e097e38ee00', name: this.icon, size: this.iconSize })), h("kritzel-portal", { key: '29099deb5b56b1a1388caa81a3c7104a05ad66a7', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, h("kritzel-menu", { key: 'b77286ec05add0a20bbc46f99ac7210395d0d33d', items: this.visibleItems, onItemSelect: this.handleMenuItemSelect })))));
30872
+ return (h(Host, { key: '4ebbcbdf3464aeeb0585b571b424375e0493c7e9', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, h("div", { key: '080b74a0e4e4d4a2e9dee3d23cce22ea5bed7423', class: { 'more-menu-wrapper': true, visible: this.visible } }, h("button", { key: 'b8bfb586ca544a1c6711ba76fe55246c844f7425', class: "more-menu-button", "data-testid": "more-menu-button", onClick: this.toggleMenu, "aria-label": this.terms['moreMenu.ariaLabel'] ?? 'More options' }, h("kritzel-icon", { key: 'c76314d63048ef91d24e09aab646098c15ec7edf', name: this.icon, size: this.iconSize })), h("kritzel-portal", { key: '07c10d2bdb2b0ded07206efe82bd5e1edc49d736', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, h("kritzel-menu", { key: 'b5a6d63d6f8a0ffb9fae4dcab6bae276b45c46b6', items: this.visibleItems, onItemSelect: this.handleMenuItemSelect })))));
30864
30873
  }
30865
30874
  };
30866
30875
  KritzelMoreMenu.style = kritzelMoreMenuCss();
@@ -31027,7 +31036,7 @@ const KritzelNumericInput = class {
31027
31036
  this.valueChange.emit(newValue);
31028
31037
  };
31029
31038
  render() {
31030
- return (h(Host, { key: '8901e0b56ccbc344420483a4a56663f7cd74d9e8' }, h("div", { key: '5f3d6b5c56007e11383aa69f60f22031b0e8f332', class: "input-container" }, this.label && h("label", { key: '2cb102a5b6c16d068f4f304fbcc6241f79fc0ce8', class: "input-label" }, this.label), h("div", { key: '96441095acc3d9a8e77b6d2bac2ceda683c9c976', class: "input-wrapper" }, 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 }), h("div", { key: '2071e98125a8d014513e93052bd8c1fee17932a5', class: "spinner-buttons" }, h("button", { key: '12422e5285dfb532dbbb6eb1a36dbcb3de50f2bc', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, h("svg", { key: '49ad5625c80fae6706ba4ab91f47bd550481ef74', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: 'ff7d19b61baeb5ba58bb60f2cc629bcec6eb4411', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: 'e4fec28e4fc997e007127f2b30b00cc752433221', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, h("svg", { key: '27bf06cde8de11f4a97090911afd6b8993463112', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: 'ed7071dd79bfe509ebb319ce43ecb3e982dd4157', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
31039
+ return (h(Host, { key: 'eb766b22717d856d096bd1a4a44279f6ac994892' }, h("div", { key: '2394e2b2af48f560e77e7a37b34d00656b0dd344', class: "input-container" }, this.label && h("label", { key: 'd8889aa93d4a86fa841f4da1f0b97411ab039cb1', class: "input-label" }, this.label), h("div", { key: 'b55ae2edf164cdfcdda356119b148c8bfb8fbd24', class: "input-wrapper" }, h("input", { key: 'ee1f1663f19c5ca66d64b6c5142005da318e03e4', 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 }), h("div", { key: '82e127b045e631616e6368c437473bbf9732445d', class: "spinner-buttons" }, h("button", { key: 'e7412dffccbdacbb5743ae2e2e7bd33c68e6fceb', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, h("svg", { key: '7e471bf2bee5d4d161fea2e838b26e2f28bb84d9', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: '69e4c80eed03b2ee2a044d07f35420b7618f4e75', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: 'a0c2350d48c398f7396cebd973438c0e390d0aff', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, h("svg", { key: 'c1f6264d187936d5eb0cc43c0275dc2e2c93b854', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: 'facbdd171b43868ec41b469b0d11d6c9bfcec3aa', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
31031
31040
  }
31032
31041
  static get watchers() { return {
31033
31042
  "value": [{
@@ -31066,7 +31075,7 @@ const KritzelOpacitySlider = class {
31066
31075
  }
31067
31076
  render() {
31068
31077
  const percentage = this.getPercentage();
31069
- return (h(Host, { key: '2dadd8a7c4d1af748e91a6005433288ab231f2e8' }, h("div", { key: '65ae90d95bffff244d97329754cf0cb8f73331fa', class: "opacity-container" }, h("div", { key: '90e95347f7015882112f0653a25347e715233227', class: "slider-wrapper" }, 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: {
31078
+ return (h(Host, { key: 'a175945928dac5ae5b4464c0b11c4d812f8a3ef6' }, h("div", { key: 'a045d452d459577f8d657e00dd9189797dd4de66', class: "opacity-container" }, h("div", { key: '11a4217a4b6e1f0b1981a8fd8e03f505a9d4a3b5', class: "slider-wrapper" }, h("input", { key: '2cbf72a10026c4201727208230b8832ea2309a76', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
31070
31079
  '--slider-progress': `${percentage}%`,
31071
31080
  '--kritzel-opacity-slider-thumb-border-color': this.previewColor,
31072
31081
  } })))));
@@ -31419,7 +31428,7 @@ const KritzelPortal = class {
31419
31428
  this.portal.style.visibility = 'visible';
31420
31429
  }
31421
31430
  render() {
31422
- return (h(Host, { key: '72273b4c7811473072ee27668836a5ddddcfd618', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: 'b4f37ca27c47ab950a4639162fa31a3c2362d6f7' })));
31431
+ return (h(Host, { key: 'f919789973cd7828b393028171594d481113fb45', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '21b837fe7162c0a0a8d01bb5c41d3736a265714c' })));
31423
31432
  }
31424
31433
  static get watchers() { return {
31425
31434
  "anchor": [{
@@ -31433,7 +31442,7 @@ const KritzelPortal = class {
31433
31442
  * This file is auto-generated by the version bump scripts.
31434
31443
  * Do not modify manually.
31435
31444
  */
31436
- const KRITZEL_VERSION = '0.3.42';
31445
+ const KRITZEL_VERSION = '0.3.45';
31437
31446
 
31438
31447
  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)}`;
31439
31448
 
@@ -31658,7 +31667,7 @@ const KritzelSettings = class {
31658
31667
  }
31659
31668
  }
31660
31669
  render() {
31661
- return (h(Host, { key: '7e65885051a30635291bb98fb87addf0bdbca8e8' }, h("kritzel-dialog", { key: 'c795bad227882904d8dda96768e8ccdd7c48df71', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: 'eff1486d14d4b55441b9a52b293da7459771331d', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
31670
+ return (h(Host, { key: '1fb0bca35cb20633f017a927d39e2a66ebfb403b' }, h("kritzel-dialog", { key: '6366a8d8e7f65ef3f715248db3dc7c7e36dd3f4a', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: '2f4891d1ef0b3f130c591790b2e53e7264a61145', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
31662
31671
  }
31663
31672
  static get watchers() { return {
31664
31673
  "settings": [{
@@ -34898,9 +34907,9 @@ const KritzelShareDialog = class {
34898
34907
  this.dialogClosed.emit();
34899
34908
  };
34900
34909
  render() {
34901
- return (h(Host, { key: 'b96c4cc6a9e4778715f496574f307a540285f70c' }, h("kritzel-dialog", { key: '9a9cead56cc50042f59f677c0a846fc9fff01a8b', dialogTitle: this.terms['share.dialogTitle'] ?? 'Share Workspace', size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, h("div", { key: 'f1ffe37126343d84f9cb70f85530596d594c6e04', class: "share-content" }, h("div", { key: 'e1b20fccdb127eb30d240a2812742977b6512113', class: "share-section" }, h("div", { key: 'fb0d4226d638309fd5696dace0cc0c73d82150fc', class: "share-row" }, h("div", { key: '301a27b975bb63610d94e1140aef39aa0594dda6', class: "share-label-group" }, h("label", { key: 'acf694843423d42414951ae88ec7eee541dd8f7f', class: "share-label" }, this.terms['share.linkSharing.label'] ?? 'Link sharing'), h("p", { key: '4c29b6448a27c69fceadb4166bc878216010475f', class: "share-description" }, this.internalIsPublic
34910
+ return (h(Host, { key: '3125a157e71a0f5e5e4762cb4069c457bd7d44f6' }, h("kritzel-dialog", { key: '948007c3f631ac8c6d2b163d8c41e5d85d17990e', dialogTitle: this.terms['share.dialogTitle'] ?? 'Share Workspace', size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, h("div", { key: '6eda07bd40162baba728648e266d819705608990', class: "share-content" }, h("div", { key: 'f693904e3541b2b248ac9a965c4c65d407c63d42', class: "share-section" }, h("div", { key: '5d76c4944fe5e40469de2c92fdbe939936cfede7', class: "share-row" }, h("div", { key: '84d4cbeacaa4b83f1570ed36de8311f9c20225ed', class: "share-label-group" }, h("label", { key: '0b666d1b26bd7a7ec05705be97c6c01b98f3bcab', class: "share-label" }, this.terms['share.linkSharing.label'] ?? 'Link sharing'), h("p", { key: '41b0df856dd7cf80f40ba8e485816a2ca794c23e', class: "share-description" }, this.internalIsPublic
34902
34911
  ? (this.terms['share.linkSharing.enabledDescription'] ?? 'Anyone with the link can access this workspace.')
34903
- : (this.terms['share.linkSharing.disabledDescription'] ?? 'Link sharing is disabled. Only you can access this workspace.'))), h("kritzel-slide-toggle", { key: 'c813213e7cf53125993de209e15c921779c019b6', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: this.terms['share.linkSharing.toggleLabel'] ?? 'Enable link sharing' }))), this.internalIsPublic && (h("div", { key: 'af32cbadc775ce4ca3c79bdc0f8b4351c8723b28', class: "share-section" }, h("div", { key: 'd5c4e2b8a77306a141cc73c37dc6c57b1dc9daa5', class: "share-url-container" }, h("input", { key: 'f2f364c3fabd7f693247f5ad05594bd089a194ea', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), 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') }, h("kritzel-icon", { key: '60c72ee8d789dc14baa4c169f70c78837b0cbd0c', name: this.copySuccess ? 'check' : 'copy', size: 18 }))), this.qrCodeDataUrl && (h("div", { key: 'f5d361b7ed145ab5f4f7b89f9c63046ce831220b', class: "share-qr-container" }, h("img", { key: '5f2d4650dffab907f5a53dfb2fd4c337da3e51ee', class: "share-qr-image", src: this.qrCodeDataUrl, alt: "QR code for share link" })))))))));
34912
+ : (this.terms['share.linkSharing.disabledDescription'] ?? 'Link sharing is disabled. Only you can access this workspace.'))), h("kritzel-slide-toggle", { key: '1e2a9437714bcf3d85e40f4f7a69e027f4c05e9c', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: this.terms['share.linkSharing.toggleLabel'] ?? 'Enable link sharing' }))), this.internalIsPublic && (h("div", { key: 'b64439cced536c440afb93eb4d674221299101ae', class: "share-section" }, h("div", { key: '905ddd55dfef9bb4e2388228237c49d59b633658', class: "share-url-container" }, h("input", { key: '62797e8efa4a918302198c8dbd6fb04bbb13d032', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), h("button", { key: '7a018f0ec803644fefa16a3678cd32503704a3b8', 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') }, h("kritzel-icon", { key: '6321962e43123c7798685821051fd33f702b9156', name: this.copySuccess ? 'check' : 'copy', size: 18 }))), this.qrCodeDataUrl && (h("div", { key: 'db4e5c19d2ece15523a4746a84b62bb3b55177ab', class: "share-qr-container" }, h("img", { key: '403477b5cd526beefabc3576050d399a2520d51b', class: "share-qr-image", src: this.qrCodeDataUrl, alt: "QR code for share link" })))))))));
34904
34913
  }
34905
34914
  static get watchers() { return {
34906
34915
  "isPublic": [{
@@ -34941,7 +34950,7 @@ const KritzelSlideToggle = class {
34941
34950
  }
34942
34951
  };
34943
34952
  render() {
34944
- return (h(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 }, h("div", { key: '385008948ffbdc0f26249d2d833aae8f04eeb6a0', class: "toggle-track" }, h("div", { key: '43929e94335589feb24ee45f1c34a270653dd412', class: "toggle-thumb" }))));
34953
+ return (h(Host, { key: 'e132e2614dcf2c7afc51e8aa064de36ea4a84710', 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 }, h("div", { key: 'c7857aa2b747aba1851f7df1bde3d0469898d32a', class: "toggle-track" }, h("div", { key: '6beb1821fdc265b4fb5d0a6813a33fb768366984', class: "toggle-thumb" }))));
34945
34954
  }
34946
34955
  };
34947
34956
  KritzelSlideToggle.style = kritzelSlideToggleCss();
@@ -35041,7 +35050,7 @@ const KritzelSplitButton = class {
35041
35050
  this.menuScrollTop = event.target.scrollTop;
35042
35051
  };
35043
35052
  render() {
35044
- return (h(Host, { key: 'fa22dc1185ef07d8127d9ee9f6dbe482d126f934', class: { mobile: this.isTouchDevice } }, h("button", { key: 'a48aba702b70e9b24ad5486dde61fa9f9c8f7cdc', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && h("kritzel-icon", { key: '0d1c9a3e9f744541dd6ebe491105f6ee65233543', name: this.buttonIcon })), h("div", { key: 'c9db29f0b9c9cf1974d78f4f60be9e1b0e26c5d2', class: "split-divider" }), 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" }, h("kritzel-icon", { key: 'd860cc503043425860b1234b5d34693bfdd1d5ab', name: this.dropdownIcon })), h("kritzel-portal", { key: 'cd6dda8869aea4205d922fc639073019bbd2b102', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, 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 }))));
35053
+ return (h(Host, { key: 'b3b5b4a63df6e6a4bd2902716a8c26830e31127d', class: { mobile: this.isTouchDevice } }, h("button", { key: 'a25f723f41c1604172fa96d036eab6b80a22add5', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && h("kritzel-icon", { key: '6999b1baefa3c940c2a25772b0c03ab0c809cd79', name: this.buttonIcon })), h("div", { key: 'dcbff30cae4a73b5c214c0ae98b16c8d681b8eed', class: "split-divider" }), h("button", { key: 'bdbe0b300b3c5df31df58574ee055f05787acceb', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled, "aria-label": "Open menu" }, h("kritzel-icon", { key: '66969517639c73140a745bc189730dfa09eafa08', name: this.dropdownIcon })), h("kritzel-portal", { key: '197d002ea78ddb535743d6d2f872b9779dfc462b', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '15f1d42042e2368ff04e54f7872480f9f8841900', 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 }))));
35045
35054
  }
35046
35055
  };
35047
35056
  KritzelSplitButton.style = kritzelSplitButtonCss();
@@ -35062,7 +35071,7 @@ const KritzelStrokeSize = class {
35062
35071
  }
35063
35072
  render() {
35064
35073
  const sizes = this.sizes ?? [];
35065
- return (h(Host, { key: 'ba181d798d2bf7b60308746635d2077ce1353b83' }, h("div", { key: '048fc8934190359b9337747567844ca88925a6ce', class: "size-grid" }, sizes.map(size => (h("div", { tabIndex: 0, class: {
35074
+ return (h(Host, { key: 'a097daf527501b07874b449ac75ecb765cdd81b2' }, h("div", { key: '0e2b3ade9bae7d4f97d5de8ecd44424fe914f3e7', class: "size-grid" }, sizes.map(size => (h("div", { tabIndex: 0, class: {
35066
35075
  'size-container': true,
35067
35076
  'selected': this.selectedSize === size,
35068
35077
  }, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: 'var(--kritzel-global-text-primary)', size: size })))))));
@@ -35070,6 +35079,22 @@ const KritzelStrokeSize = class {
35070
35079
  };
35071
35080
  KritzelStrokeSize.style = kritzelStrokeSizeCss();
35072
35081
 
35082
+ const kritzelSyncIndicatorCss = () => `:host{display:contents}.indicator{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:var(--kritzel-sync-indicator-z-index, 10001);pointer-events:none;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--kritzel-sync-indicator-background, rgba(255, 255, 255, 0.92));color:var(--kritzel-sync-indicator-color, #334155);box-shadow:0 2px 10px rgba(0, 0, 0, 0.12);font-family:var(--kritzel-font-family, sans-serif);font-size:12px;line-height:1;font-weight:500;opacity:0;visibility:hidden}.indicator.visible{opacity:1;visibility:visible}.spinner{width:12px;height:12px;border-radius:50%;border:2px solid var(--kritzel-sync-indicator-spinner-track, rgba(148, 163, 184, 0.35));border-top-color:var(--kritzel-sync-indicator-spinner-color, #2563eb);animation:kritzel-sync-indicator-spin 0.8s linear infinite}@keyframes kritzel-sync-indicator-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;
35083
+
35084
+ const KritzelSyncIndicator = class {
35085
+ constructor(hostRef) {
35086
+ registerInstance(this, hostRef);
35087
+ }
35088
+ /** Whether the indicator is visible. */
35089
+ visible = false;
35090
+ /** The text displayed next to the spinner. */
35091
+ text = 'Syncing...';
35092
+ render() {
35093
+ return (h(Host, { key: '833aa19a39357398a9fc2d97246398b77f1b990f' }, h("div", { key: 'cabb31890ea7c6afdafa6427306caa19a2d8f818', class: { indicator: true, visible: this.visible }, role: "status", "aria-live": "polite", "aria-label": "Synchronizing workspace" }, h("span", { key: '086105d00156d8556d8a78cfb0cec47d65b40a1f', class: "spinner", "aria-hidden": "true" }), h("span", { key: '9934152bb9f55399a20112f4230c4efc1518a2e1' }, this.text))));
35094
+ }
35095
+ };
35096
+ KritzelSyncIndicator.style = kritzelSyncIndicatorCss();
35097
+
35073
35098
  const kritzelToolConfigCss = () => `.expand-toggle{background:none;border:none;cursor:var(--kritzel-global-pointer-cursor, pointer);padding:0;margin:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--kritzel-icon-color, currentColor);transition:transform 0.2s ease}.expand-toggle:hover{opacity:0.7}.expand-toggle:focus{outline:none}.expand-toggle:focus-visible{outline:2px solid var(--kritzel-focus-color, #007acc);outline-offset:2px}.expand-toggle:active{transform:scale(0.95)}.divider{height:1px;background-color:var(--kritzel-divider-color, #e0e0e0);margin:4px 0;width:100%}`;
35074
35099
 
35075
35100
  const KritzelToolConfig = class {
@@ -35443,14 +35468,14 @@ const KritzelTooltip = class {
35443
35468
  }
35444
35469
  }
35445
35470
  render() {
35446
- return (h(Host, { key: '1e318ff48b72ae5e0853a92c61fd4174d6e45271', style: {
35471
+ return (h(Host, { key: 'c0a4b682b3279b8c830dfa758284979e91c0ce2a', style: {
35447
35472
  position: 'fixed',
35448
35473
  zIndex: '9999',
35449
35474
  transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
35450
35475
  visibility: this.isVisible ? 'visible' : 'hidden',
35451
35476
  left: `${this.positionX}px`,
35452
35477
  bottom: `${this.positionY}px`,
35453
- } }, h("div", { key: 'c66c9978787c59de6ca29944f666354fed2ab4c3', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: '664e78076bb988b0829b805aad4393c443db2dc7' }))));
35478
+ } }, h("div", { key: '09fd259d19d42db513161b645aa19206ae81c76a', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: 'f743c0ca8c415d71e0af53cdab8304df60dd9a37' }))));
35454
35479
  }
35455
35480
  static get watchers() { return {
35456
35481
  "triggerElement": [{
@@ -35491,7 +35516,7 @@ const KritzelUtilityPanel = class {
35491
35516
  this.redo.emit();
35492
35517
  }
35493
35518
  render() {
35494
- return (h(Host, { key: '90b96b2f4693016650394e085c1ccf5c61759713' }, 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' }, h("kritzel-icon", { key: '70335427bc3a9a54a994ad22935bde4010d8f96b', name: "undo" })), 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' }, h("kritzel-icon", { key: 'b33336374abb36a7cdb685fb970805ec1f4073e2', name: "redo" })), h("div", { key: '34323fd33574ba65c825687fec5b772facbd2c62', class: "utility-separator" }), h("button", { key: 'aff157ab166ed15b8f9172b5b63f62996ed51c6e', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": this.terms['utility.delete'] ?? 'Delete selected items' }, h("kritzel-icon", { key: '413104d9d493fc47ad5ae8e61af514dfd530f6ee', name: "delete" }))));
35519
+ return (h(Host, { key: '0ea9faf487a37d04097ee64e080f8f9bd8e6c901' }, h("button", { key: 'dbd4c0972188904b4c3cbbbf46c272fde462df0d', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event), "aria-label": this.terms['utility.undo'] ?? 'Undo' }, h("kritzel-icon", { key: '6d7db899d6dc205d5b8dbf9404d916676e8bb345', name: "undo" })), h("button", { key: '290a4d9e67130b24068c0c9a958b5532492b1c03', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event), "aria-label": this.terms['utility.redo'] ?? 'Redo' }, h("kritzel-icon", { key: 'c88c575084ffe6df27d58d2f17e4b50253143158', name: "redo" })), h("div", { key: '195d4a77c76097c0e5fbe56266a3ad7ce246115f', class: "utility-separator" }), h("button", { key: 'c55b7a8f8e355d8ce046784a2e465ab96d5df5b7', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": this.terms['utility.delete'] ?? 'Delete selected items' }, h("kritzel-icon", { key: 'b429e334f6117c6a9c7de642e5290fb848576cd4', name: "delete" }))));
35495
35520
  }
35496
35521
  };
35497
35522
  KritzelUtilityPanel.style = kritzelUtilityPanelCss();
@@ -35512,7 +35537,7 @@ const KritzelWatermark = class {
35512
35537
  label;
35513
35538
  render() {
35514
35539
  const label = this.label ?? this.core.localizationManager.translate('watermark.poweredBy');
35515
- return (h(Host, { key: '0eccc75e51c7ac199e23d8f3a871593f1fb65a17' }, 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)));
35540
+ return (h(Host, { key: '143ea32342e30351c93751714dfd12b725ddca24' }, h("a", { key: '95fb2dfa0d806367e6a71dad3932b321d7ae5a76', class: "watermark-link", href: KRITZEL_WEBSITE_URL, target: "_blank", rel: "noopener noreferrer", part: "watermark", onPointerDown: (ev) => ev.stopPropagation(), onPointerUp: (ev) => ev.stopPropagation() }, label)));
35516
35541
  }
35517
35542
  };
35518
35543
  KritzelWatermark.style = kritzelWatermarkCss();
@@ -35700,9 +35725,9 @@ const KritzelZoomPanel = class {
35700
35725
  return Number.isFinite(this.zoomPercent) ? Math.max(1, Math.round(this.zoomPercent)) : 100;
35701
35726
  }
35702
35727
  render() {
35703
- return (h(Host, { key: '56b65a376d4bd94553416e07f2621192c4457bc2' }, h("div", { key: 'bdbfea3b3ee7e37eeb5c5f03388eb92ed8af9962', class: { panel: true, visible: this.visible } }, h("button", { key: 'de5ad152aaf7965f731bee95170b67e62af94ea2', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomOut'] ?? 'Zoom out', disabled: this.disabled, onClick: this.handleZoomOut }, h("kritzel-icon", { key: '104eb632666c55c032a40e6df2097aaa643fd23b', name: "minus" })), h("span", { key: 'd601b324e26a6c2737138b8f151b13dcdb2d20ab', class: "zoom-level", "aria-live": "polite" }, this.normalizedZoomPercent, "%"), h("button", { key: 'c976d03c69978f2d5cedf2a94b38419ed81088f6', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomIn'] ?? 'Zoom in', disabled: this.disabled, onClick: this.handleZoomIn }, h("kritzel-icon", { key: '844105bd53f3307425789aa6baf0ac3c25407414', name: "plus" })))));
35728
+ return (h(Host, { key: 'e772e5c838c0d0372302f624e5030a7cd04353eb' }, h("div", { key: '69795e24e44cabd3c7ebb65f3e1e1d039fef290e', class: { panel: true, visible: this.visible } }, h("button", { key: 'ceade9417dc5aadb18c6312d190343a1d0538485', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomOut'] ?? 'Zoom out', disabled: this.disabled, onClick: this.handleZoomOut }, h("kritzel-icon", { key: 'ae45acfd6b438bc97c2a7e6b15a256d8600cd51d', name: "minus" })), h("span", { key: '2017b9c99989a26383123210cd402bf80a8591bd', class: "zoom-level", "aria-live": "polite" }, this.normalizedZoomPercent, "%"), h("button", { key: '925420fa6616b5ea1b995e07a989159b28cdbb48', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomIn'] ?? 'Zoom in', disabled: this.disabled, onClick: this.handleZoomIn }, h("kritzel-icon", { key: '569aec9686e6af6aa41d455d29b3eb6fad672f64', name: "plus" })))));
35704
35729
  }
35705
35730
  };
35706
35731
  KritzelZoomPanel.style = kritzelZoomPanelCss();
35707
35732
 
35708
- export { KritzelActiveUsers as kritzel_active_users, KritzelAvatar as kritzel_avatar, KritzelAwarenessCursors as kritzel_awareness_cursors, KritzelBackToContent as kritzel_back_to_content, KritzelButton as kritzel_button, KritzelColorComponent as kritzel_color, KritzelColorPalette as kritzel_color_palette, KritzelContextMenu as kritzel_context_menu, KritzelControls as kritzel_controls, KritzelCurrentUser as kritzel_current_user, KritzelCurrentUserDialog as kritzel_current_user_dialog, KritzelCursorTrail as kritzel_cursor_trail, KritzelDialog as kritzel_dialog, KritzelDropdown as kritzel_dropdown, KritzelEditor as kritzel_editor, KritzelEngine as kritzel_engine, KritzelExport as kritzel_export, KritzelFont as kritzel_font, KritzelFontFamily as kritzel_font_family, KritzelFontSize as kritzel_font_size, KritzelIcon as kritzel_icon, KritzelInput as kritzel_input, KritzelLineEndings as kritzel_line_endings, KritzelLoadingOverlay as kritzel_loading_overlay, KritzelLoginDialog as kritzel_login_dialog, KritzelMasterDetail as kritzel_master_detail, KritzelMenu as kritzel_menu, KritzelMenuItem as kritzel_menu_item, KritzelMoreMenu as kritzel_more_menu, KritzelNotificationCard as kritzel_notification_card, KritzelNumericInput as kritzel_numeric_input, KritzelOpacitySlider as kritzel_opacity_slider, KritzelPillTabs as kritzel_pill_tabs, KritzelPortal as kritzel_portal, KritzelSettings as kritzel_settings, KritzelShapeFill as kritzel_shape_fill, KritzelShareDialog as kritzel_share_dialog, KritzelSlideToggle as kritzel_slide_toggle, KritzelSplitButton as kritzel_split_button, KritzelStrokeSize as kritzel_stroke_size, KritzelToolConfig as kritzel_tool_config, KritzelTooltip as kritzel_tooltip, KritzelUtilityPanel as kritzel_utility_panel, KritzelWatermark as kritzel_watermark, KritzelWorkspaceManager as kritzel_workspace_manager, KritzelZoomPanel as kritzel_zoom_panel };
35733
+ export { KritzelActiveUsers as kritzel_active_users, KritzelAvatar as kritzel_avatar, KritzelAwarenessCursors as kritzel_awareness_cursors, KritzelBackToContent as kritzel_back_to_content, KritzelButton as kritzel_button, KritzelColorComponent as kritzel_color, KritzelColorPalette as kritzel_color_palette, KritzelContextMenu as kritzel_context_menu, KritzelControls as kritzel_controls, KritzelCurrentUser as kritzel_current_user, KritzelCurrentUserDialog as kritzel_current_user_dialog, KritzelCursorTrail as kritzel_cursor_trail, KritzelDialog as kritzel_dialog, KritzelDropdown as kritzel_dropdown, KritzelEditor as kritzel_editor, KritzelEngine as kritzel_engine, KritzelExport as kritzel_export, KritzelFont as kritzel_font, KritzelFontFamily as kritzel_font_family, KritzelFontSize as kritzel_font_size, KritzelIcon as kritzel_icon, KritzelInput as kritzel_input, KritzelLineEndings as kritzel_line_endings, KritzelLoadingOverlay as kritzel_loading_overlay, KritzelLoginDialog as kritzel_login_dialog, KritzelMasterDetail as kritzel_master_detail, KritzelMenu as kritzel_menu, KritzelMenuItem as kritzel_menu_item, KritzelMoreMenu as kritzel_more_menu, KritzelNotificationCard as kritzel_notification_card, KritzelNumericInput as kritzel_numeric_input, KritzelOpacitySlider as kritzel_opacity_slider, KritzelPillTabs as kritzel_pill_tabs, KritzelPortal as kritzel_portal, KritzelSettings as kritzel_settings, KritzelShapeFill as kritzel_shape_fill, KritzelShareDialog as kritzel_share_dialog, KritzelSlideToggle as kritzel_slide_toggle, KritzelSplitButton as kritzel_split_button, KritzelStrokeSize as kritzel_stroke_size, KritzelSyncIndicator as kritzel_sync_indicator, KritzelToolConfig as kritzel_tool_config, KritzelTooltip as kritzel_tooltip, KritzelUtilityPanel as kritzel_utility_panel, KritzelWatermark as kritzel_watermark, KritzelWorkspaceManager as kritzel_workspace_manager, KritzelZoomPanel as kritzel_zoom_panel };