@kritzel/editor 0.4.31 → 0.4.33

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 (197) hide show
  1. package/LICENSE.md +50 -50
  2. package/README.md +5 -5
  3. package/dist/cjs/{index-B92VHWr4.js → index-BAdxtEc7.js} +27 -9
  4. package/dist/cjs/kritzel-active-users_46.cjs.entry.js +1029 -366
  5. package/dist/cjs/kritzel-brush-style.cjs.entry.js +2 -2
  6. package/dist/cjs/kritzel-editor.cjs.js +3 -3
  7. package/dist/cjs/loader.cjs.js +2 -2
  8. package/dist/collection/collection-manifest.json +1 -1
  9. package/dist/collection/components/kritzel-active-users/kritzel-active-users.css +65 -65
  10. package/dist/collection/components/kritzel-avatar/kritzel-avatar.css +58 -58
  11. package/dist/collection/components/kritzel-avatar/kritzel-avatar.js +3 -3
  12. package/dist/collection/components/kritzel-back-to-content/kritzel-back-to-content.css +42 -42
  13. package/dist/collection/components/kritzel-back-to-content/kritzel-back-to-content.js +1 -1
  14. package/dist/collection/components/kritzel-brush-style/kritzel-brush-style.css +42 -42
  15. package/dist/collection/components/kritzel-brush-style/kritzel-brush-style.js +3 -3
  16. package/dist/collection/components/kritzel-button/kritzel-button.css +73 -73
  17. package/dist/collection/components/kritzel-button/kritzel-button.js +2 -2
  18. package/dist/collection/components/kritzel-color/kritzel-color.css +24 -24
  19. package/dist/collection/components/kritzel-color/kritzel-color.js +2 -2
  20. package/dist/collection/components/kritzel-color-palette/kritzel-color-palette.css +46 -46
  21. package/dist/collection/components/kritzel-color-palette/kritzel-color-palette.js +1 -1
  22. package/dist/collection/components/kritzel-context-menu/kritzel-context-menu.css +113 -112
  23. package/dist/collection/components/kritzel-context-menu/kritzel-context-menu.js +1 -1
  24. package/dist/collection/components/kritzel-current-user/kritzel-current-user.css +11 -11
  25. package/dist/collection/components/kritzel-current-user/kritzel-current-user.js +1 -1
  26. package/dist/collection/components/kritzel-current-user-dialog/kritzel-current-user-dialog.css +39 -39
  27. package/dist/collection/components/kritzel-current-user-dialog/kritzel-current-user-dialog.js +1 -1
  28. package/dist/collection/components/kritzel-dialog/kritzel-dialog.css +209 -209
  29. package/dist/collection/components/kritzel-dropdown/kritzel-dropdown.css +190 -190
  30. package/dist/collection/components/kritzel-dropdown/kritzel-dropdown.js +2 -2
  31. package/dist/collection/components/kritzel-editor/kritzel-editor.css +160 -160
  32. package/dist/collection/components/kritzel-editor/kritzel-editor.js +72 -46
  33. package/dist/collection/components/kritzel-export/kritzel-export.css +89 -89
  34. package/dist/collection/components/kritzel-export/kritzel-export.js +1 -1
  35. package/dist/collection/components/kritzel-font/kritzel-font.css +10 -10
  36. package/dist/collection/components/kritzel-font/kritzel-font.js +1 -1
  37. package/dist/collection/components/kritzel-font-family/kritzel-font-family.css +48 -48
  38. package/dist/collection/components/kritzel-font-family/kritzel-font-family.js +2 -2
  39. package/dist/collection/components/kritzel-font-size/kritzel-font-size.css +30 -30
  40. package/dist/collection/components/kritzel-font-size/kritzel-font-size.js +1 -1
  41. package/dist/collection/components/kritzel-input/kritzel-input.css +69 -69
  42. package/dist/collection/components/kritzel-input/kritzel-input.js +1 -1
  43. package/dist/collection/components/kritzel-line-endings/kritzel-line-endings.css +60 -60
  44. package/dist/collection/components/kritzel-line-endings/kritzel-line-endings.js +3 -3
  45. package/dist/collection/components/kritzel-loading-overlay/kritzel-loading-overlay.css +54 -54
  46. package/dist/collection/components/kritzel-loading-overlay/kritzel-loading-overlay.js +1 -1
  47. package/dist/collection/components/kritzel-login-dialog/kritzel-login-dialog.css +98 -98
  48. package/dist/collection/components/kritzel-login-dialog/kritzel-login-dialog.js +1 -1
  49. package/dist/collection/components/kritzel-master-detail/kritzel-master-detail.css +190 -190
  50. package/dist/collection/components/kritzel-master-detail/kritzel-master-detail.js +3 -3
  51. package/dist/collection/components/kritzel-menu/kritzel-menu.css +35 -34
  52. package/dist/collection/components/kritzel-menu/kritzel-menu.js +1 -1
  53. package/dist/collection/components/kritzel-menu-item/kritzel-menu-item.css +166 -166
  54. package/dist/collection/components/kritzel-menu-item/kritzel-menu-item.js +3 -3
  55. package/dist/collection/components/kritzel-more-menu/kritzel-more-menu.css +58 -58
  56. package/dist/collection/components/kritzel-more-menu/kritzel-more-menu.js +4 -4
  57. package/dist/collection/components/kritzel-notification-card/kritzel-notification-card.css +101 -101
  58. package/dist/collection/components/kritzel-numeric-input/kritzel-numeric-input.css +102 -102
  59. package/dist/collection/components/kritzel-numeric-input/kritzel-numeric-input.js +1 -1
  60. package/dist/collection/components/kritzel-opacity-slider/kritzel-opacity-slider.css +85 -85
  61. package/dist/collection/components/kritzel-opacity-slider/kritzel-opacity-slider.js +1 -1
  62. package/dist/collection/components/kritzel-pill-tabs/kritzel-pill-tabs.css +68 -68
  63. package/dist/collection/components/kritzel-pill-tabs/kritzel-pill-tabs.js +2 -2
  64. package/dist/collection/components/kritzel-portal/kritzel-portal.js +1 -1
  65. package/dist/collection/components/kritzel-settings/kritzel-settings.css +137 -137
  66. package/dist/collection/components/kritzel-settings/kritzel-settings.js +1 -1
  67. package/dist/collection/components/kritzel-shape-fill/kritzel-shape-fill.css +47 -47
  68. package/dist/collection/components/kritzel-shape-fill/kritzel-shape-fill.js +4 -4
  69. package/dist/collection/components/kritzel-share-dialog/kritzel-share-dialog.css +150 -150
  70. package/dist/collection/components/kritzel-share-dialog/kritzel-share-dialog.js +2 -2
  71. package/dist/collection/components/kritzel-slide-toggle/kritzel-slide-toggle.css +48 -48
  72. package/dist/collection/components/kritzel-slide-toggle/kritzel-slide-toggle.js +1 -1
  73. package/dist/collection/components/kritzel-split-button/kritzel-split-button.css +78 -78
  74. package/dist/collection/components/kritzel-split-button/kritzel-split-button.js +3 -3
  75. package/dist/collection/components/kritzel-stroke-size/kritzel-stroke-size.css +37 -37
  76. package/dist/collection/components/kritzel-stroke-size/kritzel-stroke-size.js +1 -1
  77. package/dist/collection/components/kritzel-tool-config/kritzel-tool-config.css +38 -38
  78. package/dist/collection/components/kritzel-tool-config/kritzel-tool-config.js +1 -1
  79. package/dist/collection/components/kritzel-toolbar/kritzel-toolbar.css +347 -347
  80. package/dist/collection/components/kritzel-toolbar/kritzel-toolbar.js +12 -16
  81. package/dist/collection/components/kritzel-tooltip/kritzel-tooltip.css +18 -18
  82. package/dist/collection/components/kritzel-tooltip/kritzel-tooltip.js +2 -2
  83. package/dist/collection/components/kritzel-utility-panel/kritzel-utility-panel.css +45 -45
  84. package/dist/collection/components/kritzel-utility-panel/kritzel-utility-panel.js +1 -1
  85. package/dist/collection/components/kritzel-workspace-manager/kritzel-workspace-manager.css +16 -16
  86. package/dist/collection/components/kritzel-workspace-manager/kritzel-workspace-manager.js +1 -1
  87. package/dist/collection/components/kritzel-zoom-panel/kritzel-zoom-panel.css +72 -72
  88. package/dist/collection/components/kritzel-zoom-panel/kritzel-zoom-panel.js +1 -1
  89. package/dist/components/index.js +1 -1
  90. package/dist/components/kritzel-active-users.js +1 -1
  91. package/dist/components/kritzel-avatar.js +1 -1
  92. package/dist/components/kritzel-awareness-cursors.js +1 -1
  93. package/dist/components/kritzel-back-to-content.js +1 -1
  94. package/dist/components/kritzel-brush-style.js +4 -4
  95. package/dist/components/kritzel-button.js +1 -1
  96. package/dist/components/kritzel-color-palette.js +1 -1
  97. package/dist/components/kritzel-color.js +1 -1
  98. package/dist/components/kritzel-context-menu.js +1 -1
  99. package/dist/components/kritzel-current-user-dialog.js +1 -1
  100. package/dist/components/kritzel-current-user.js +1 -1
  101. package/dist/components/kritzel-cursor-trail.js +1 -1
  102. package/dist/components/kritzel-dialog.js +1 -1
  103. package/dist/components/kritzel-dropdown.js +1 -1
  104. package/dist/components/kritzel-editor.js +108 -81
  105. package/dist/components/kritzel-engine.js +1 -1
  106. package/dist/components/kritzel-export.js +1 -1
  107. package/dist/components/kritzel-font-family.js +1 -1
  108. package/dist/components/kritzel-font-size.js +1 -1
  109. package/dist/components/kritzel-font.js +1 -1
  110. package/dist/components/kritzel-icon.js +1 -1
  111. package/dist/components/kritzel-input.js +1 -1
  112. package/dist/components/kritzel-line-endings.js +1 -1
  113. package/dist/components/kritzel-loading-overlay.js +1 -1
  114. package/dist/components/kritzel-login-dialog.js +1 -1
  115. package/dist/components/kritzel-master-detail.js +1 -1
  116. package/dist/components/kritzel-menu-item.js +1 -1
  117. package/dist/components/kritzel-menu.js +1 -1
  118. package/dist/components/kritzel-more-menu.js +1 -1
  119. package/dist/components/kritzel-notification-card.js +1 -1
  120. package/dist/components/kritzel-numeric-input.js +1 -1
  121. package/dist/components/kritzel-opacity-slider.js +1 -1
  122. package/dist/components/kritzel-pill-tabs.js +1 -1
  123. package/dist/components/kritzel-portal.js +1 -1
  124. package/dist/components/kritzel-settings.js +1 -1
  125. package/dist/components/kritzel-shape-fill.js +1 -1
  126. package/dist/components/kritzel-share-dialog.js +1 -1
  127. package/dist/components/kritzel-slide-toggle.js +1 -1
  128. package/dist/components/kritzel-split-button.js +1 -1
  129. package/dist/components/kritzel-stroke-size.js +1 -1
  130. package/dist/components/kritzel-tool-config.js +1 -1
  131. package/dist/components/kritzel-toolbar.js +1 -1
  132. package/dist/components/kritzel-tooltip.js +1 -1
  133. package/dist/components/kritzel-utility-panel.js +1 -1
  134. package/dist/components/kritzel-watermark.js +1 -1
  135. package/dist/components/kritzel-workspace-manager.js +1 -1
  136. package/dist/components/kritzel-zoom-panel.js +1 -1
  137. package/dist/components/{p-CrIEmItB.js → p-2DAZSvN6.js} +5 -5
  138. package/dist/components/{p-CmjXRLdr.js → p-2gylYpXk.js} +7 -7
  139. package/dist/components/{p-BN8VWPlq.js → p-B-Divd0Q.js} +7 -7
  140. package/dist/components/{p-R1D8Sr0l.js → p-B-U13Ew1.js} +3 -3
  141. package/dist/components/{p-BZ_KnHdR.js → p-B1rmcPZr.js} +7 -7
  142. package/dist/components/{p-B_gT0lCn.js → p-B2-SxV8E.js} +3 -3
  143. package/dist/components/p-B6Z_VKKH.js +214 -0
  144. package/dist/components/{p-CVxGF4bJ.js → p-B8tHdknP.js} +5 -5
  145. package/dist/components/{p-CoNexfpB.js → p-BDsuJNT_.js} +3 -3
  146. package/dist/components/{p-BvG3JO85.js → p-BMi-i7sC.js} +3 -3
  147. package/dist/components/{p-Cy_cLtOP.js → p-BZ0ReYAA.js} +18 -14
  148. package/dist/components/{p-DZsSiMnA.js → p-BeCy6w6M.js} +770 -173
  149. package/dist/components/{p-4-qLegHb.js → p-Bipc1XvF.js} +4 -4
  150. package/dist/components/{p-CS3YZVYE.js → p-BmFJelgk.js} +2 -2
  151. package/dist/components/{p-DqOC_Yck.js → p-BpvSYxxN.js} +6 -6
  152. package/dist/components/{p-peZjvnkK.js → p-C0ns8IPO.js} +2 -2
  153. package/dist/components/{p-ClfOtiNp.js → p-C1_r9nJU.js} +3 -3
  154. package/dist/components/{p-GbCxpbQ6.js → p-C2ySiAXO.js} +3 -3
  155. package/dist/components/{p-B3Tqoyl9.js → p-C3KlONnT.js} +3 -3
  156. package/dist/components/{p-B5xYV1o3.js → p-C68YXjuL.js} +2 -2
  157. package/dist/components/{p-DJxgPPfs.js → p-CCuNN278.js} +3 -3
  158. package/dist/components/{p-Ds0uNtwQ.js → p-CNH7N3Aq.js} +4 -4
  159. package/dist/components/{p-DVv8ChhE.js → p-CO1cJlfg.js} +4 -4
  160. package/dist/components/{p-Cp4e4oTE.js → p-CqHKGLYE.js} +2 -2
  161. package/dist/components/{p-Blq9a1ni.js → p-CrEWqua9.js} +6 -6
  162. package/dist/components/{p-CvaxFYS0.js → p-Cv2nqOL8.js} +8 -8
  163. package/dist/components/{p-CzUeIini.js → p-D-1ixLxq.js} +13 -13
  164. package/dist/components/{p-BfMlwIcG.js → p-DF8p-DxR.js} +3 -3
  165. package/dist/components/{p-QEue33R5.js → p-DQ3VKzAS.js} +3 -3
  166. package/dist/components/{p-Ckqh1tqY.js → p-DRe-rTlX.js} +27 -31
  167. package/dist/components/{p-McY5wZ0h.js → p-DSyb29RF.js} +2 -2
  168. package/dist/components/{p-D0tPTPkR.js → p-DYDruZIw.js} +3 -3
  169. package/dist/components/{p-kOINnzaR.js → p-D_JxJxQ6.js} +7 -7
  170. package/dist/components/{p-BDjRSoAc.js → p-Dko_6jIh.js} +2 -2
  171. package/dist/components/{p-BjFrt1q0.js → p-DnHvqeyr.js} +3 -3
  172. package/dist/components/{p-BrGJIoGK.js → p-DqMikMrS.js} +3 -3
  173. package/dist/components/p-DsnHq8en.js +55 -0
  174. package/dist/components/{p-DXZBWJBt.js → p-DxFNLy9X.js} +4 -4
  175. package/dist/components/{p-5qkOM1RJ.js → p-Dzr6X2aj.js} +16 -4
  176. package/dist/components/{p-DXuf225S.js → p-HbHo7awi.js} +3 -3
  177. package/dist/components/{p-CwBxnzYu.js → p-Qbk7xE91.js} +3 -3
  178. package/dist/components/{p-h_uh_Njf.js → p-VYGV0cr3.js} +3 -3
  179. package/dist/components/{p-DyRJFg4w.js → p-YGBl60lb.js} +2 -2
  180. package/dist/components/{p-hQwVRh0t.js → p-clFfXKKn.js} +7 -7
  181. package/dist/components/{p-SLnqczCS.js → p-dUcCDLDF.js} +3 -3
  182. package/dist/components/{p-B6UJztrf.js → p-kXnNX65j.js} +4 -4
  183. package/dist/esm/{index-OjbYJz-P.js → index-YR-6hzAW.js} +27 -10
  184. package/dist/esm/kritzel-active-users_46.entry.js +1029 -366
  185. package/dist/esm/kritzel-brush-style.entry.js +2 -2
  186. package/dist/esm/kritzel-editor.js +4 -4
  187. package/dist/esm/loader.js +3 -3
  188. package/dist/kritzel-editor/kritzel-editor.esm.js +4 -4
  189. package/dist/kritzel-editor/{p-501047d8.entry.js → p-3a0f60b0.entry.js} +2 -2
  190. package/dist/kritzel-editor/{p-OjbYJz-P.js → p-YR-6hzAW.js} +27 -10
  191. package/dist/kritzel-editor/{p-60319edb.entry.js → p-adc45d46.entry.js} +1029 -366
  192. package/dist/types/components/kritzel-editor/kritzel-editor.d.ts +9 -2
  193. package/dist/types/components.d.ts +15 -15
  194. package/dist/types/stencil-public-runtime.d.ts +61 -55
  195. package/package.json +3 -3
  196. package/dist/components/p-BGmTmdLe.js +0 -167
  197. package/dist/components/p-DOJCDPVD.js +0 -55
@@ -1,4 +1,4 @@
1
- import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
1
+ import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
2
2
 
3
3
  const kritzelAvatarCss = () => `:host{display:inline-flex;justify-content:center;align-items:center;border-radius:50%;overflow:hidden;user-select:none;flex-shrink:0}.avatar-image{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}.avatar-initials{display:flex;justify-content:center;align-items:center;width:100%;height:100%;border-radius:50%;color:var(--kritzel-avatar-initials-color, #ffffff);font-weight:var(--kritzel-avatar-initials-font-weight, 500);font-family:var(--kritzel-avatar-initials-font-family, sans-serif);line-height:1}.avatar-default{display:flex;justify-content:center;align-items:center;width:100%;height:100%;border-radius:50%;background-color:var(--kritzel-avatar-default-background, #e0e0e0);color:var(--kritzel-avatar-default-color, #9e9e9e)}.avatar-default svg{width:60%;height:60%}:host(.has-image){border:var(--kritzel-avatar-border, none)}:host(.has-initials){border:var(--kritzel-avatar-border, none)}:host(.has-default){border:var(--kritzel-avatar-border, none)}`;
4
4
 
@@ -91,16 +91,16 @@ const KritzelAvatar = /*@__PURE__*/ proxyCustomElement(class KritzelAvatar exten
91
91
  height: `${this.size}px`,
92
92
  fontSize: `${Math.round(this.size * 0.4)}px`,
93
93
  };
94
- return (h(Host, { key: 'ceb67b8110efb4a4d5727c6fdcce4bd64f333be3', style: containerStyles, class: {
94
+ return (h(Host, { key: 'd66c2ec474fed4b7b07687f1a02d0d97f893b689', style: containerStyles, class: {
95
95
  'has-image': !!showImage,
96
96
  'has-initials': !!showInitials,
97
97
  'has-default': !!showDefaultIcon,
98
- }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: 'aeb37def9c124f3e03ee30fbfe30c47a79c76e18', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
98
+ }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: 'd2aefda3897b2278c0d640c75084335f6786bd3b', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
99
99
  if (el) {
100
100
  el.referrerPolicy = 'no-referrer';
101
101
  el.crossOrigin = 'anonymous';
102
102
  }
103
- }, onError: this.handleImageError })), showInitials && (h("span", { key: '536eb291d7e029d5db419d0360e0ef307cea5edf', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: '71dc33191e8da37cd02cbd60832d52be9dcb8146', class: "avatar-default" }, h("svg", { key: '9ddcf26c9a77579d3924324e736e14f7ae02bff2', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: 'df408a91dcc03e2172bb7b9877772efa9dea8575', 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" }))))));
103
+ }, onError: this.handleImageError })), showInitials && (h("span", { key: '1837201e58bcb96877981f0970edcc39ba6058e6', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: '9578696c0b5ca200ccf82586e49e42ab57909aee', class: "avatar-default" }, h("svg", { key: 'cf521d25aa25a6f8af921d6179a99077a42752ef', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: 'cbf16a181e4ba351c6337355b067ecd1d7787f28', 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" }))))));
104
104
  }
105
105
  static get watchers() { return {
106
106
  "user": [{
@@ -1,4 +1,4 @@
1
- import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
1
+ import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
2
2
  import { KritzelHTMLHelper, ObjectHelper } from '@kritzel/engine';
3
3
 
4
4
  const KritzelPortal = /*@__PURE__*/ proxyCustomElement(class KritzelPortal extends H {
@@ -285,7 +285,7 @@ const KritzelPortal = /*@__PURE__*/ proxyCustomElement(class KritzelPortal exten
285
285
  this.portal.style.visibility = 'visible';
286
286
  }
287
287
  render() {
288
- return (h(Host, { key: 'c92b863d46e8a96b44d318288471ad11ae04d1f4', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: 'd207f238571b877145c0c445e9d184cb1c4a4e2b' })));
288
+ return (h(Host, { key: 'e37e3fb0de2910fabd9379f372e477ecac929d1d', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '86f8720d298201b66efea2475634ec7506b33d9c' })));
289
289
  }
290
290
  static get watchers() { return {
291
291
  "anchor": [{
@@ -1,9 +1,9 @@
1
- import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
2
- import { d as defineCustomElement$3 } from './p-BGmTmdLe.js';
3
- import { d as defineCustomElement$2 } from './p-BN8VWPlq.js';
4
- import { d as defineCustomElement$1 } from './p-CS3YZVYE.js';
1
+ import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
2
+ import { d as defineCustomElement$3 } from './p-B6Z_VKKH.js';
3
+ import { d as defineCustomElement$2 } from './p-B-Divd0Q.js';
4
+ import { d as defineCustomElement$1 } from './p-BmFJelgk.js';
5
5
 
6
- const kritzelMenuCss = () => `:host{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-menu-background-color, #ffffff);width:var(--kritzel-menu-width, 200px);padding:var(--kritzel-menu-padding, 8px);border-radius:var(--kritzel-menu-border-radius, 12px);box-shadow:var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-menu-border, 1px solid #ebebeb);z-index:2;gap:var(--kritzel-menu-gap, 4px);overflow-y:auto;scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin;max-height:var(--kritzel-portal-max-height, 300px);box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:none;clip-path:inset(0 round var(--kritzel-menu-border-radius, 12px))}:host:focus-visible{outline:auto}.has-open-child-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3}`;
6
+ const kritzelMenuCss = () => `:host{position:relative;display:flex;flex-direction:column;font-family:var(--kritzel-menu-font-family, var(--kritzel-global-font-family, sans-serif));background-color:var(--kritzel-menu-background-color, #ffffff);width:var(--kritzel-menu-width, 200px);padding:var(--kritzel-menu-padding, 8px);border-radius:var(--kritzel-menu-border-radius, 12px);box-shadow:var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-menu-border, 1px solid #ebebeb);z-index:2;gap:var(--kritzel-menu-gap, 4px);overflow-y:auto;scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin;max-height:var(--kritzel-portal-max-height, 300px);box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:none;clip-path:inset(0 round var(--kritzel-menu-border-radius, 12px))}:host:focus-visible{outline:auto}.has-open-child-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3}`;
7
7
 
8
8
  const KritzelMenu = /*@__PURE__*/ proxyCustomElement(class KritzelMenu extends H {
9
9
  constructor(registerHost) {
@@ -70,7 +70,7 @@ const KritzelMenu = /*@__PURE__*/ proxyCustomElement(class KritzelMenu extends H
70
70
  this.itemCloseChildMenu.emit(event.detail);
71
71
  };
72
72
  render() {
73
- return (h(Host, { key: 'f9512c13eb4865b9953887d44f08b565eff5a247', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: 'c6dd6edce412716e9f2076670f5ec1eeb8f53dab', 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 })))));
73
+ return (h(Host, { key: 'fc7816cfb7a4f88f95f5abe4c9dcbccd920ad6e7', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: 'fb36bc0122d79b4929356280fe5213dd00535eae', 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 })))));
74
74
  }
75
75
  static get style() { return kritzelMenuCss(); }
76
76
  }, [513, "kritzel-menu", {
@@ -1,7 +1,7 @@
1
- import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
1
+ import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
2
2
  import { KritzelHTMLHelper } from '@kritzel/engine';
3
3
 
4
- const kritzelDialogCss = () => `:host{display:contents}.dialog-content{text-align:start;line-height:normal}.backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10002;display:flex;align-items:center;justify-content:center;background-color:var(--kritzel-dialog-backdrop-color, rgba(0, 0, 0, 0.5));opacity:1;transition:opacity 150ms ease-out}.backdrop.is-animating{opacity:0}.dialog-content{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-dialog-background-color, #ffffff);border-radius:var(--kritzel-dialog-border-radius, 12px);box-shadow:var(--kritzel-dialog-box-shadow, 0 4px 20px rgba(0, 0, 0, 0.15));border:var(--kritzel-dialog-border, 1px solid #ebebeb);max-height:var(--kritzel-dialog-max-height, 90vh);max-width:var(--kritzel-dialog-max-width, 90vw);overflow:hidden;transform:scale(1);opacity:1;transition:transform 200ms ease-out, opacity 200ms ease-out;font-family:var(--kritzel-dialog-font-family, sans-serif)}.dialog-content.is-animating{transform:scale(0.95);opacity:0}.dialog-content.size-small{width:var(--kritzel-dialog-width-small, 320px);height:var(--kritzel-dialog-height-small, auto)}.dialog-content.size-medium{width:var(--kritzel-dialog-width-medium, 480px);height:var(--kritzel-dialog-height-medium, auto)}.dialog-content.size-large{width:var(--kritzel-dialog-width-large, 640px);height:var(--kritzel-dialog-height-large, auto)}.dialog-content.size-fullscreen{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}.backdrop.contained-fullscreen{background-color:transparent}.dialog-content.contained-fullscreen{border-radius:0}.dialog-content.contained-fullscreen .dialog-body{display:flex;flex-direction:column}.dialog-content.contained-fullscreen .dialog-body ::slotted(*){flex:1;min-height:0}@media (max-width: 576px), (max-height: 576px) and (orientation: landscape){.backdrop:has(.fullscreen-on-mobile){background-color:transparent}.dialog-content.fullscreen-on-mobile{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}.dialog-content.fullscreen-on-mobile .dialog-body{display:flex;flex-direction:column}.dialog-content.fullscreen-on-mobile .dialog-body ::slotted(*){flex:1;min-height:0}}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:var(--kritzel-dialog-header-padding, 16px 20px);border-bottom:var(--kritzel-dialog-header-border, 1px solid #ebebeb);gap:12px}.dialog-title{margin:0;font-size:var(--kritzel-dialog-title-font-size, 18px);font-weight:var(--kritzel-dialog-title-font-weight, 600);color:var(--kritzel-dialog-title-color, #1a1a1a);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.close-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--kritzel-dialog-close-button-border-radius, 6px);background-color:var(--kritzel-dialog-close-button-background, transparent);color:var(--kritzel-dialog-close-button-color, #666666);cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 150ms ease, color 150ms ease;flex-shrink:0;-webkit-tap-highlight-color:transparent}.close-button:hover{background-color:var(--kritzel-dialog-close-button-hover-background, #f5f5f5);color:var(--kritzel-dialog-close-button-hover-color, #1a1a1a)}.close-button:active{background-color:var(--kritzel-dialog-close-button-active-background, #ebebeb)}.close-button:focus-visible{outline:revert;outline-offset:revert}.dialog-body{padding:var(--kritzel-dialog-body-padding, 20px);overflow-y:auto;flex:1;min-height:0;scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}.dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--kritzel-dialog-footer-gap, 8px);padding:var(--kritzel-dialog-footer-padding, 16px 20px);border-top:var(--kritzel-dialog-footer-border, 1px solid #ebebeb)}::slotted([slot='header']){flex:1}::slotted([slot='footer']){display:contents}`;
4
+ const kritzelDialogCss = () => `:host{display:contents}.dialog-content{text-align:start;line-height:normal}.backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10002;display:flex;align-items:center;justify-content:center;background-color:var(--kritzel-dialog-backdrop-color, rgba(0, 0, 0, 0.5));opacity:1;transition:opacity 150ms ease-out}.backdrop.is-animating{opacity:0}.dialog-content{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-dialog-background-color, #ffffff);border-radius:var(--kritzel-dialog-border-radius, 12px);box-shadow:var(--kritzel-dialog-box-shadow, 0 4px 20px rgba(0, 0, 0, 0.15));border:var(--kritzel-dialog-border, 1px solid #ebebeb);max-height:var(--kritzel-dialog-max-height, 90vh);max-width:var(--kritzel-dialog-max-width, 90vw);overflow:hidden;transform:scale(1);opacity:1;transition:transform 200ms ease-out, opacity 200ms ease-out;font-family:var(--kritzel-dialog-font-family, var(--kritzel-global-font-family, sans-serif))}.dialog-content.is-animating{transform:scale(0.95);opacity:0}.dialog-content.size-small{width:var(--kritzel-dialog-width-small, 320px);height:var(--kritzel-dialog-height-small, auto)}.dialog-content.size-medium{width:var(--kritzel-dialog-width-medium, 480px);height:var(--kritzel-dialog-height-medium, auto)}.dialog-content.size-large{width:var(--kritzel-dialog-width-large, 640px);height:var(--kritzel-dialog-height-large, auto)}.dialog-content.size-fullscreen{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}.backdrop.contained-fullscreen{background-color:transparent}.dialog-content.contained-fullscreen{border-radius:0}.dialog-content.contained-fullscreen .dialog-body{display:flex;flex-direction:column}.dialog-content.contained-fullscreen .dialog-body ::slotted(*){flex:1;min-height:0}@media (max-width: 576px), (max-height: 576px) and (orientation: landscape){.backdrop:has(.fullscreen-on-mobile){background-color:transparent}.dialog-content.fullscreen-on-mobile{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}.dialog-content.fullscreen-on-mobile .dialog-body{display:flex;flex-direction:column}.dialog-content.fullscreen-on-mobile .dialog-body ::slotted(*){flex:1;min-height:0}}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:var(--kritzel-dialog-header-padding, 16px 20px);border-bottom:var(--kritzel-dialog-header-border, 1px solid #ebebeb);gap:12px}.dialog-title{margin:0;font-size:var(--kritzel-dialog-title-font-size, 18px);font-weight:var(--kritzel-dialog-title-font-weight, 600);color:var(--kritzel-dialog-title-color, #1a1a1a);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.close-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--kritzel-dialog-close-button-border-radius, 6px);background-color:var(--kritzel-dialog-close-button-background, transparent);color:var(--kritzel-dialog-close-button-color, #666666);cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 150ms ease, color 150ms ease;flex-shrink:0;-webkit-tap-highlight-color:transparent}.close-button:hover{background-color:var(--kritzel-dialog-close-button-hover-background, #f5f5f5);color:var(--kritzel-dialog-close-button-hover-color, #1a1a1a)}.close-button:active{background-color:var(--kritzel-dialog-close-button-active-background, #ebebeb)}.close-button:focus-visible{outline:revert;outline-offset:revert}.dialog-body{padding:var(--kritzel-dialog-body-padding, 20px);overflow-y:auto;flex:1;min-height:0;scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}.dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--kritzel-dialog-footer-gap, 8px);padding:var(--kritzel-dialog-footer-padding, 16px 20px);border-top:var(--kritzel-dialog-footer-border, 1px solid #ebebeb)}::slotted([slot='header']){flex:1}::slotted([slot='footer']){display:contents}`;
5
5
 
6
6
  const KritzelDialog = /*@__PURE__*/ proxyCustomElement(class KritzelDialog extends H {
7
7
  constructor(registerHost) {
@@ -1,5 +1,5 @@
1
- import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
2
- import { d as defineCustomElement$1 } from './p-R1D8Sr0l.js';
1
+ import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
2
+ import { d as defineCustomElement$1 } from './p-B-U13Ew1.js';
3
3
 
4
4
  const kritzelFontFamilyCss = () => `:host{display:flex;align-items:flex-start;gap:8px;padding:0;box-sizing:border-box;width:100%}.font-style-button{display:flex;justify-content:center;align-items:center;width:42px;height:32px;padding:0;border:none;outline:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:0;color:var(--control-text-color);font-weight:bold;-webkit-tap-highlight-color:transparent}.font-style-button:not(:last-child){border-right:1px solid #333333}.font-style-button:hover{background-color:var(--control-hover-bg)}.font-style-button:active{background-color:var(--control-active-bg)}.font-style-button.selected,.font-style-button.selected:hover,.font-style-button.selected:active{background-color:var(--control-selected-bg);color:var(--control-selected-color)}.font-style-button.italic-text{font-style:italic}`;
5
5
 
@@ -46,7 +46,7 @@ const KritzelFontFamily = /*@__PURE__*/ proxyCustomElement(class KritzelFontFami
46
46
  label: option.label,
47
47
  style: { fontFamily: option.cssFontFamily ?? option.value },
48
48
  }));
49
- return (h(Host, { key: '42b2805b1d2df47a1b2336dffac32ee50740809e' }, h("kritzel-dropdown", { key: '3e1f019b2ecacea061f687c93f4fdd6a384b93b7', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: selectedFontFamily } })));
49
+ return (h(Host, { key: '059350f34370f7a291f47a42721ca5d9bb82df49' }, h("kritzel-dropdown", { key: 'fbd8cf1ae463c7e9b76d0ac754a41de54397058e', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: selectedFontFamily } })));
50
50
  }
51
51
  static get watchers() { return {
52
52
  "fontOptions": [{
@@ -1,6 +1,6 @@
1
- import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
1
+ import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
2
2
  import { KritzelColorHelper } from '@kritzel/engine';
3
- import { d as defineCustomElement$1 } from './p-DVv8ChhE.js';
3
+ import { d as defineCustomElement$1 } from './p-CO1cJlfg.js';
4
4
 
5
5
  const kritzelColorPaletteCss = () => `:host{display:flex;align-items:flex-start;gap:8px;padding:0;width:100%;box-sizing:border-box}.color-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center;overflow:hidden;height:40px;transition:height 0.1s ease-in-out}.color-grid.expanded{height:500px}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.color-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-color-palette-selected-background-color)}`;
6
6
 
@@ -45,7 +45,7 @@ const KritzelColorPalette = /*@__PURE__*/ proxyCustomElement(class KritzelColorP
45
45
  render() {
46
46
  const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
47
47
  const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
48
- return (h(Host, { key: '4d04acd9a67ac1c302bd0ded5fdfe431d0cacf26' }, h("div", { key: 'bb873b67d0e4f05353af87e1518df9525d20a28b', class: {
48
+ return (h(Host, { key: 'cfdd5136f512aed23198d4a55c628ccd675f08c9' }, h("div", { key: 'bb5445f68b9d17268c6def7cfc4a2dd1fb971c53', class: {
49
49
  'color-grid': true,
50
50
  'expanded': this.isExpanded,
51
51
  }, style: {
@@ -1,6 +1,6 @@
1
- import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
1
+ import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
2
2
 
3
- const kritzelLoadingOverlayCss = () => `:host{position:absolute;inset:0;z-index:var(--kritzel-editor-loading-overlay-z-index, 1);display:block;pointer-events:none}.loading-overlay{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;gap:10px;background-color:var(--kritzel-editor-loading-overlay-background, rgba(255, 255, 255, 0.6));color:var(--kritzel-editor-loading-overlay-color, #333);font-family:var(--kritzel-font-family, sans-serif);font-size:1.25rem;opacity:0;pointer-events:none;visibility:hidden;transition:opacity 300ms ease, visibility 0s linear 300ms}.loading-overlay.visible{opacity:1;pointer-events:all;visibility:visible;transition:opacity 300ms ease, visibility 0s linear 0s}.loading-spinner{width:20px;height:20px;box-sizing:border-box;display:block;flex-shrink:0;border:2px solid var(--kritzel-editor-loading-overlay-spinner-color, #cccccc);border-top-color:var(--kritzel-editor-loading-overlay-spinner-active-color, #333333);border-radius:50%;animation:kritzel-loading-spin 0.6s linear infinite}@keyframes kritzel-loading-spin{to{transform:rotate(360deg)}}`;
3
+ const kritzelLoadingOverlayCss = () => `:host{position:absolute;inset:0;z-index:var(--kritzel-editor-loading-overlay-z-index, 1);display:block;pointer-events:none}.loading-overlay{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;gap:10px;background-color:var(--kritzel-editor-loading-overlay-background, rgba(255, 255, 255, 0.6));color:var(--kritzel-editor-loading-overlay-color, #333);font-family:var(--kritzel-global-font-family, sans-serif);font-size:1.25rem;opacity:0;pointer-events:none;visibility:hidden;transition:opacity 300ms ease, visibility 0s linear 300ms}.loading-overlay.visible{opacity:1;pointer-events:all;visibility:visible;transition:opacity 300ms ease, visibility 0s linear 0s}.loading-spinner{width:20px;height:20px;box-sizing:border-box;display:block;flex-shrink:0;border:2px solid var(--kritzel-editor-loading-overlay-spinner-color, #cccccc);border-top-color:var(--kritzel-editor-loading-overlay-spinner-active-color, #333333);border-radius:50%;animation:kritzel-loading-spin 0.6s linear infinite}@keyframes kritzel-loading-spin{to{transform:rotate(360deg)}}`;
4
4
 
5
5
  const KritzelLoadingOverlay = /*@__PURE__*/ proxyCustomElement(class KritzelLoadingOverlay extends H {
6
6
  constructor(registerHost) {
@@ -19,7 +19,7 @@ const KritzelLoadingOverlay = /*@__PURE__*/ proxyCustomElement(class KritzelLoad
19
19
  */
20
20
  text = 'Loading...';
21
21
  render() {
22
- return (h(Host, { key: '9db6a5b128b4ba9e4e196e0bf9fff6b7853ef7c9' }, h("div", { key: 'e113ed032c0c7349b6e452d5c12d9ffb42d2dbb7', class: { 'loading-overlay': true, visible: this.visible }, "aria-hidden": this.visible ? 'false' : 'true' }, h("span", { key: '55a601348ab9269125cb2043fb6e568ce8fe6b44', class: "loading-spinner" }), this.text)));
22
+ return (h(Host, { key: '1d00fc91ac568b7472121a37abe353dcee3db25c' }, h("div", { key: '5a32738aa35b799249694ef3fdd7a59ed7f06fee', class: { 'loading-overlay': true, visible: this.visible }, "aria-hidden": this.visible ? 'false' : 'true' }, h("span", { key: '9cc309802bf617f02d02d7017e8194634393b870', class: "loading-spinner" }), this.text)));
23
23
  }
24
24
  static get style() { return kritzelLoadingOverlayCss(); }
25
25
  }, [513, "kritzel-loading-overlay", {
@@ -1,4 +1,4 @@
1
- import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
1
+ import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
2
2
 
3
3
  const kritzelInputCss = () => `:host{display:block}.input-container{display:flex;flex-direction:column;gap:6px}.input-label{font-size:14px;font-weight:500;color:var(--kritzel-text-input-label-color, #333333)}.input-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-text-input-border-color, #ebebeb);border-radius:var(--kritzel-text-input-border-radius, 6px);overflow:hidden;background:var(--kritzel-text-input-background, #ffffff);transition:border-color 150ms ease}.input-wrapper:hover:not(:focus-within){border-color:var(--kritzel-text-input-hover-border-color, #cccccc)}.input-wrapper:focus-within{border-color:var(--kritzel-text-input-focus-border-color, #007AFF);border-width:2px}.text-input{flex:1;padding:10px 12px;border:none;outline:none;font-size:14px;font-family:inherit;background:transparent;color:var(--kritzel-text-input-text-color, #333333);box-sizing:border-box}.text-input::placeholder{color:var(--kritzel-text-input-placeholder-color, #999999)}.text-input::selection{background-color:var(--kritzel-text-input-selection-background, #007AFF);color:var(--kritzel-text-input-selection-color, #ffffff)}.text-input:disabled{cursor:not-allowed;opacity:0.6}.input-suffix{padding:10px 12px;background:var(--kritzel-text-input-suffix-background, #f5f5f5);color:var(--kritzel-text-input-suffix-color, #666666);font-size:14px;border-left:1px solid var(--kritzel-text-input-border-color, #ebebeb);flex-shrink:0}`;
4
4
 
@@ -39,7 +39,7 @@ const KritzelInput = /*@__PURE__*/ proxyCustomElement(class KritzelInput extends
39
39
  this.valueChange.emit(input.value);
40
40
  };
41
41
  render() {
42
- return (h(Host, { key: '27ea9df44ddfe332bfda4f8b70308ffbfbf3e63c' }, h("div", { key: '8970766380273b32d0c8ffc32310e95d34b5ed35', class: "input-container" }, this.label && h("label", { key: '7b05115cd7eac552d8b420a10c0039b48b100f55', class: "input-label" }, this.label), h("div", { key: '5c764a97dada35dd74cce61a43dd39edcca07c5d', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, h("input", { key: '4613cba3f6ba722c641c9f2d355fe4b9c9f795f2', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && h("span", { key: '3b4942c5cd0298d97b0c3e8e86c82297f1134718', class: "input-suffix" }, this.suffix)))));
42
+ return (h(Host, { key: '7294192b97df384f321825a8fa30c822f79b6f29' }, h("div", { key: 'c355a4ee26adf0ab71d27e1697eddc1f9533d665', class: "input-container" }, this.label && h("label", { key: '75ee613cdbd20acc6dbd16642bd4dac9058309aa', class: "input-label" }, this.label), h("div", { key: '0395860993deda5cd57d8a185df8b36a52742841', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, h("input", { key: 'a12d80b4d51bcd1526b49119fb2b20ad9343d71b', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && h("span", { key: 'b682a1764795c2f9039b78e866be09609f7d0d80', class: "input-suffix" }, this.suffix)))));
43
43
  }
44
44
  static get watchers() { return {
45
45
  "value": [{
@@ -1,4 +1,4 @@
1
- import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
1
+ import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
2
2
  import { KritzelHTMLHelper } from '@kritzel/engine';
3
3
 
4
4
  const kritzelTooltipCss = () => `:host{width:auto}.tooltip-content{position:relative;padding:8px 12px;border-radius:4px;width:fit-content;background-color:var(--kritzel-tooltip-background-color, #ffffff);color:var(--kritzel-tooltip-color, #000000);padding:var(--kritzel-tooltip-padding, 12px);border:var(--kritzel-tooltip-border, 1px solid #ebebeb);border-radius:var(--kritzel-tooltip-border-radius, 16px);white-space:nowrap;box-shadow:var(--kritzel-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12))}`;
@@ -140,14 +140,14 @@ const KritzelTooltip = /*@__PURE__*/ proxyCustomElement(class KritzelTooltip ext
140
140
  }
141
141
  }
142
142
  render() {
143
- return (h(Host, { key: 'aa1367fd2af71357855814087a3d3c69e77e326f', style: {
143
+ return (h(Host, { key: '9c80a8831cdc03e08b4fe19c8c0aabd036fd5a23', style: {
144
144
  position: 'fixed',
145
145
  zIndex: '9999',
146
146
  transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
147
147
  visibility: this.isVisible ? 'visible' : 'hidden',
148
148
  left: `${this.positionX}px`,
149
149
  bottom: `${this.positionY}px`,
150
- } }, h("div", { key: 'da84f59a18173fa4c93b4c2b8ace6102b0067e17', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: 'a68910ec2f7c2243043aea21489e3c68b6b09966' }))));
150
+ } }, h("div", { key: '0f5907b4bf740e6242a07e00790685265ee7767b', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: 'e1074787847d96b7a725fcb04902ccc7e6827984' }))));
151
151
  }
152
152
  static get watchers() { return {
153
153
  "triggerElement": [{
@@ -1,6 +1,6 @@
1
- import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
2
- import { d as defineCustomElement$2 } from './p-peZjvnkK.js';
3
- import { d as defineCustomElement$1 } from './p-BGmTmdLe.js';
1
+ import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
2
+ import { d as defineCustomElement$2 } from './p-C0ns8IPO.js';
3
+ import { d as defineCustomElement$1 } from './p-B6Z_VKKH.js';
4
4
 
5
5
  const kritzelLoginDialogCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-width-small:380px}.login-content{display:flex;flex-direction:column;gap:20px}.login-subtitle{font-size:13px;color:var(--kritzel-login-dialog-subtitle-color, #666666);margin:0;line-height:1.5;text-align:center}.login-providers{display:flex;flex-direction:column;gap:10px}.provider-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 16px;border:1px solid var(--kritzel-login-dialog-button-border-color, #e0e0e0);border-radius:8px;background:var(--kritzel-login-dialog-button-background, #ffffff);color:var(--kritzel-login-dialog-button-text-color, #333333);font-size:14px;font-weight:500;font-family:inherit;cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;-webkit-tap-highlight-color:transparent}.provider-button:hover:not(:disabled){background:var(--kritzel-login-dialog-button-hover-background, #f5f5f5);border-color:var(--kritzel-login-dialog-button-hover-border-color, #cccccc)}.provider-button:active:not(:disabled){background:var(--kritzel-login-dialog-button-active-background, #ebebeb)}.provider-button:focus-visible{outline:revert;outline-offset:revert}.provider-button.is-disabled{opacity:0.5;cursor:default;pointer-events:none}.provider-button.is-loading{cursor:default}.provider-label{flex-shrink:0}.provider-button.is-loading .provider-label{opacity:0.7}@keyframes kritzel-login-spin{to{transform:rotate(360deg)}}.spinner{width:20px;height:20px;box-sizing:border-box;display:block;flex-shrink:0;border:2px solid var(--kritzel-login-dialog-spinner-color, #cccccc);border-top-color:var(--kritzel-login-dialog-spinner-active-color, #333333);border-radius:50%;animation:kritzel-login-spin 0.6s linear infinite}`;
6
6
 
@@ -53,7 +53,7 @@ const KritzelLoginDialog = /*@__PURE__*/ proxyCustomElement(class KritzelLoginDi
53
53
  this.dialogClosed.emit();
54
54
  };
55
55
  render() {
56
- return (h(Host, { key: '09738ca8deef6d44233b7f29bed5c63d1ec151e6' }, h("kritzel-dialog", { key: '3acdc31c0954837f3590d1087dc7a5597a177012', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: 'ec57c43e11a1800799b0bf5ac33fdd68cd03e746', class: "login-content" }, this.subtitle && (h("p", { key: 'ac1d59da1f857d7eb64d70a9a3f650bdb74c864c', class: "login-subtitle" }, this.subtitle)), h("div", { key: '0cf4e38f32f25a1f40b5e28b28784b5d53302cc3', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
56
+ return (h(Host, { key: '68f2b90426d32b12ac1e03dbed2f0c6f5e34eb9e' }, h("kritzel-dialog", { key: '2f6b6134ac984237593e587b0480d71fbdc9789e', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: 'd078c5cc1ef8465da47021b6562783a01d50f574', class: "login-content" }, this.subtitle && (h("p", { key: 'd42b498c43796703b2f92a5aaae2505113008e0e', class: "login-subtitle" }, this.subtitle)), h("div", { key: '1e6484c63e5bf6799ad566d753cc1e2bc4b518ff', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
57
57
  'provider-button': true,
58
58
  'is-loading': this.loadingProvider === provider.name,
59
59
  'is-disabled': this.loadingProvider !== null && this.loadingProvider !== provider.name,
@@ -1,7 +1,7 @@
1
- import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
1
+ import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
2
2
  import { KritzelColorHelper } from '@kritzel/engine';
3
3
 
4
- const kritzelColorCss = () => `:host{display:flex}.checkerboard-bg{background:repeating-conic-gradient( var(--kritzel-checkerboard-color-dark, #ccc) 0% 25%, var(--kritzel-checkerboard-color-light, #fff) 0% 50% ) 50% / 8px 8px;position:relative;overflow:hidden}.color-circle{width:24px;height:24px;border-radius:50%;box-sizing:border-box;display:block}.color-circle.white{border:1px solid var(--kritzel-color-palette-circle-border-color, #dddcdc)}`;
4
+ const kritzelColorCss = () => `:host{display:flex}.checkerboard-bg{background:repeating-conic-gradient( var(--kritzel-checkerboard-color-dark, #ccc) 0% 25%, var(--kritzel-checkerboard-color-light, #fff) 0% 50% ) 50% / 8px 8px;position:relative;overflow:hidden}.color-circle{width:24px;height:24px;border-radius:50%;box-sizing:border-box;display:block}.color-circle.white{border:1px solid var(--kritzel-color-palette-circle-border-color, #dddcdc)}`;
5
5
 
6
6
  const KritzelColorComponent = /*@__PURE__*/ proxyCustomElement(class KritzelColorComponent extends H {
7
7
  constructor(registerHost) {
@@ -48,13 +48,13 @@ const KritzelColorComponent = /*@__PURE__*/ proxyCustomElement(class KritzelColo
48
48
  render() {
49
49
  const resolvedColor = this.resolveColor();
50
50
  const isColorVeryLight = this.isLightColor(resolvedColor);
51
- return (h(Host, { key: 'b0543e30ee8a4a79aa0487f207eb8174b2b26e08' }, h("div", { key: 'e88eb0d0eb80ba925b94c16637ed168e1b0c76fb', class: "checkerboard-bg", style: {
51
+ return (h(Host, { key: 'b75cfa0ca9d5927fe9cb1331f7e4163abc34c0c1' }, h("div", { key: '197ec4d1daaf5804b69907b8de074784686face4', class: "checkerboard-bg", style: {
52
52
  width: `${this.size}px`,
53
53
  height: `${this.size}px`,
54
54
  borderRadius: '50%',
55
55
  display: 'inline-block',
56
56
  position: 'relative',
57
- } }, h("div", { key: '86381f69b78fc987c581daf19302049fb137afb7', class: {
57
+ } }, h("div", { key: 'ed8b7dc412569d05c747014a32948930c392b980', class: {
58
58
  'color-circle': true,
59
59
  'white': isColorVeryLight,
60
60
  }, style: {
@@ -1,4 +1,4 @@
1
- import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
1
+ import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
2
2
 
3
3
  var KritzelMouseButton;
4
4
  (function (KritzelMouseButton) {
@@ -79,7 +79,7 @@ const KritzelCursorTrail = /*@__PURE__*/ proxyCustomElement(class KritzelCursorT
79
79
  }
80
80
  }
81
81
  render() {
82
- return (h(Host, { key: '707e81b135931233131a830d6fc63e721e381287' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: 'b262b0e3a0cf3b1887ee6acedb2f00d72e95db7e', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
82
+ return (h(Host, { key: '39d026a0d4c444564f146a90ea1a51181d0652b7' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: '927e52cd0828a548ba58e0e783b1d148a40c968c', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
83
83
  position: 'absolute',
84
84
  left: '0',
85
85
  top: '0',
@@ -1,8 +1,8 @@
1
- import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
1
+ import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
2
2
  import { g as getDefaultExportFromCjs } from './p-BFTU3MAI.js';
3
- import { d as defineCustomElement$3 } from './p-peZjvnkK.js';
4
- import { d as defineCustomElement$2 } from './p-BGmTmdLe.js';
5
- import { d as defineCustomElement$1 } from './p-DyRJFg4w.js';
3
+ import { d as defineCustomElement$3 } from './p-C0ns8IPO.js';
4
+ import { d as defineCustomElement$2 } from './p-B6Z_VKKH.js';
5
+ import { d as defineCustomElement$1 } from './p-YGBl60lb.js';
6
6
 
7
7
  var browser = {};
8
8
 
@@ -3204,9 +3204,9 @@ const KritzelShareDialog = /*@__PURE__*/ proxyCustomElement(class KritzelShareDi
3204
3204
  this.dialogClosed.emit();
3205
3205
  };
3206
3206
  render() {
3207
- return (h(Host, { key: '49c70b80298550025811e6714c1dd9ee064a689e' }, h("kritzel-dialog", { key: 'f0e1f4824c9f80aeb5264259e521da5e134c18b0', dialogTitle: this.terms['share.dialogTitle'] ?? 'Share Workspace', size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, h("div", { key: '89f2701613d0ab7ae91eed39759927ceec40bf75', class: "share-content" }, h("div", { key: 'bca0039ca39d019698c1a1a5d4020957d4ef73b1', class: "share-section" }, h("div", { key: 'c985d3dc0c95bc83ebb32f6b841b97a88473cc6d', class: "share-row" }, h("div", { key: '624bc298e8e67de4d68f92d03a4e0dee9055acce', class: "share-label-group" }, h("label", { key: 'eb9683c17734d9c3fdc6215ac8d9947e5df89780', class: "share-label" }, this.terms['share.linkSharing.label'] ?? 'Link sharing'), h("p", { key: '01c3a175c08728ba7f6d9d69208c5d8d34d6e453', class: "share-description" }, this.internalIsPublic
3207
+ return (h(Host, { key: 'b7a8be6921198400c95003928dfed03acd3866b6' }, h("kritzel-dialog", { key: '742e50d49ee54ba135279d6d34c78fa05645744e', dialogTitle: this.terms['share.dialogTitle'] ?? 'Share Workspace', size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, h("div", { key: 'e16420d7eea180e42c5491f8314ba0106b1b572a', class: "share-content" }, h("div", { key: '0cc6522bcb123d722e29420ba8462af21e933fb7', class: "share-section" }, h("div", { key: 'da9c8954fca7b9c6a73776a702e917d517229cc8', class: "share-row" }, h("div", { key: '40760b33ca59a51d746ed76673219a26126ae60c', class: "share-label-group" }, h("label", { key: 'de6b6409a3c487560e3491e1f3c87cb66c34fa61', class: "share-label" }, this.terms['share.linkSharing.label'] ?? 'Link sharing'), h("p", { key: '6c0db50f81c1de442eb87322e5d562868819adac', class: "share-description" }, this.internalIsPublic
3208
3208
  ? (this.terms['share.linkSharing.enabledDescription'] ?? 'Anyone with the link can access this workspace.')
3209
- : (this.terms['share.linkSharing.disabledDescription'] ?? 'Link sharing is disabled. Only you can access this workspace.'))), h("kritzel-slide-toggle", { key: 'e41bb690cab9e1eef3619f2277e66aa17ee6f66b', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: this.terms['share.linkSharing.toggleLabel'] ?? 'Enable link sharing' }))), this.internalIsPublic && (h("div", { key: '8e3fdd4c7b13ef9484ab84d90fc84ee8a357da47', class: "share-section" }, h("div", { key: '344605384f1ae60cd199b54a43c8cd4b5c5b58c9', class: "share-url-container" }, h("input", { key: '790f096274d408d507ced3590db469b62eabd885', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), h("button", { key: '8954c73a9bd586bb5457a9a15974bd2f98e52d27', 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: '45e0664c85ebc868a918382c0470e75ce41c5f5b', name: this.copySuccess ? 'check' : 'copy', size: 18 }))), this.qrCodeDataUrl && (h("div", { key: 'ea7785f9addf1d203ed75c7abf1ee1956f9fa56e', class: "share-qr-container" }, h("img", { key: '968f07d4b54d720cbbe959a201e418fbc22a3449', class: "share-qr-image", src: this.qrCodeDataUrl, alt: "QR code for share link" })))))))));
3209
+ : (this.terms['share.linkSharing.disabledDescription'] ?? 'Link sharing is disabled. Only you can access this workspace.'))), h("kritzel-slide-toggle", { key: '57492b1e6576c2b842809ac8b29c67ad4bcb66f1', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: this.terms['share.linkSharing.toggleLabel'] ?? 'Enable link sharing' }))), this.internalIsPublic && (h("div", { key: '9a6be392c660e13c6add3b671509f169a4ccb52e', class: "share-section" }, h("div", { key: '8ff6565cca2cf53ea7568ef4d2a1a0705daa8fa3', class: "share-url-container" }, h("input", { key: '3f8dffdf23a5b6f0744b63b5ceb9c488904b6c11', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), h("button", { key: 'c6a629ef64ddfe2f7fa15dbbcaf344573e8085b9', 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: 'b748074ec82f1d97d0b0ea03366ee0353900512c', name: this.copySuccess ? 'check' : 'copy', size: 18 }))), this.qrCodeDataUrl && (h("div", { key: '444f8d53ea5ba95b35bd0882e0e91dba2edfdbc6', class: "share-qr-container" }, h("img", { key: 'a11e1dc20306392266794f765bb709f05f17d4a0', class: "share-qr-image", src: this.qrCodeDataUrl, alt: "QR code for share link" })))))))));
3210
3210
  }
3211
3211
  static get watchers() { return {
3212
3212
  "isPublic": [{
@@ -1,11 +1,11 @@
1
- import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
1
+ import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
2
2
  import { KRITZEL_VERSION, CURRENT_APP_STATE_SCHEMA_VERSION, CURRENT_WORKSPACE_SCHEMA_VERSION } from '@kritzel/engine';
3
- import { d as defineCustomElement$6 } from './p-peZjvnkK.js';
4
- import { d as defineCustomElement$5 } from './p-R1D8Sr0l.js';
5
- import { d as defineCustomElement$4 } from './p-BGmTmdLe.js';
6
- import { d as defineCustomElement$3 } from './p-CVxGF4bJ.js';
7
- import { d as defineCustomElement$2 } from './p-McY5wZ0h.js';
8
- import { d as defineCustomElement$1 } from './p-DyRJFg4w.js';
3
+ import { d as defineCustomElement$6 } from './p-C0ns8IPO.js';
4
+ import { d as defineCustomElement$5 } from './p-B-U13Ew1.js';
5
+ import { d as defineCustomElement$4 } from './p-B6Z_VKKH.js';
6
+ import { d as defineCustomElement$3 } from './p-B8tHdknP.js';
7
+ import { d as defineCustomElement$2 } from './p-DSyb29RF.js';
8
+ import { d as defineCustomElement$1 } from './p-YGBl60lb.js';
9
9
 
10
10
  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-tab-panel{display:none}.settings-tab-panel.is-active{display:block}.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)}`;
11
11
 
@@ -224,7 +224,7 @@ const KritzelSettings = /*@__PURE__*/ proxyCustomElement(class KritzelSettings e
224
224
  return (h("div", { class: "settings-categories-wrapper" }, h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'general' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.general.title', 'General Settings')), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.general.theme.label', 'Theme')), h("p", { class: "settings-description" }, this.t('settings.general.theme.description', 'Select a registered color theme for the editor interface.')), h("kritzel-dropdown", { options: this.availableThemes.map(t => ({ value: t, label: t })), value: this.theme, onValueChanged: this.handleThemeChange })), this.availableLocales.length > 0 && (h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.general.language.label', 'Language')), h("p", { class: "settings-description" }, this.t('settings.general.language.description', 'Select the display language for the editor interface.')), h("kritzel-dropdown", { options: this.availableLocales.map(l => ({ value: l.code, label: l.label })), value: this.locale, onValueChanged: this.handleLocaleChange }))), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.general.lockDrawingScale.label', 'Lock Drawing Scale')), h("p", { class: "settings-description" }, this.t('settings.general.lockDrawingScale.description', 'When enabled, drawn objects maintain a fixed visual size regardless of the current zoom level.')), h("kritzel-slide-toggle", { checked: this.lockDrawingScale, label: this.t('settings.general.lockDrawingScale.label', 'Lock Drawing Scale'), onCheckedChange: this.handleLockDrawingScaleChange }))))), h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'viewport' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.viewport.title', 'Viewport Settings')), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.minZoom.label', 'Minimum Zoom Level')), h("p", { class: "settings-description" }, this.t('settings.viewport.minZoom.description', 'Sets the minimum zoom level. Lower values allow zooming out further to see more of the canvas.')), h("kritzel-numeric-input", { value: this.scaleMin, min: 0.0001, max: 1, step: 0.0001, onValueChange: this.handleScaleMinChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.maxZoom.label', 'Maximum Zoom Level')), h("p", { class: "settings-description" }, this.t('settings.viewport.maxZoom.description', 'Sets the maximum zoom level. Higher values allow zooming in closer for detailed work.')), h("kritzel-numeric-input", { value: this.scaleMax, min: 1, max: 1000, step: 1, onValueChange: this.handleScaleMaxChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryLeft.label', 'Viewport Boundary Left')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryLeft.description', 'Left boundary in world coordinates. Set to limit how far left the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryLeft, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryLeftChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryRight.label', 'Viewport Boundary Right')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryRight.description', 'Right boundary in world coordinates. Set to limit how far right the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryRight, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryRightChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryTop.label', 'Viewport Boundary Top')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryTop.description', 'Top boundary in world coordinates. Set to limit how far up the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryTop, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryTopChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryBottom.label', 'Viewport Boundary Bottom')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryBottom.description', 'Bottom boundary in world coordinates. Set to limit how far down the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryBottom, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryBottomChange }))))), h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'shortcuts' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.shortcuts.title', 'Keyboard Shortcuts')), h("div", { class: "shortcuts-list" }, Array.from(this.groupShortcutsByCategory()).map(([category, shortcuts]) => (h("div", { class: "shortcuts-category", key: category }, h("h4", { class: "shortcuts-category-title" }, category), h("div", { class: "shortcuts-group" }, shortcuts.map(shortcut => (h("div", { class: "shortcut-item", key: shortcut.key + shortcut.label }, h("span", { class: "shortcut-label" }, shortcut.label), h("kbd", { class: "shortcut-key" }, this.formatKeyCombo(shortcut)))))))))))), h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'developer' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.developer.title', 'Developer Options')), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showViewportInfo.label', 'Show Viewport Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showViewportInfo.description', 'Display viewport debug information such as position, zoom level, and boundaries.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showViewportInfo, label: this.t('settings.developer.showViewportInfo.label', 'Show Viewport Info'), onCheckedChange: this.handleDebugInfoChange('showViewportInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showObjectInfo.label', 'Show Object Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showObjectInfo.description', 'Display debug information about objects on the canvas.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showObjectInfo, label: this.t('settings.developer.showObjectInfo.label', 'Show Object Info'), onCheckedChange: this.handleDebugInfoChange('showObjectInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showSyncProviderInfo.label', 'Show Sync Provider Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showSyncProviderInfo.description', 'Display debug information about the sync provider connection status.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showSyncProviderInfo, label: this.t('settings.developer.showSyncProviderInfo.label', 'Show Sync Provider Info'), onCheckedChange: this.handleDebugInfoChange('showSyncProviderInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showMigrationInfo.label', 'Show Migration Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showMigrationInfo.description', 'Display debug information about data migrations.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showMigrationInfo, label: this.t('settings.developer.showMigrationInfo.label', 'Show Migration Info'), onCheckedChange: this.handleDebugInfoChange('showMigrationInfo') }))))), h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'about' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.about.title', 'About')), h("p", null, this.t('settings.about.description', 'Kritzel - A drawing application')), h("p", { class: "version-info" }, "Version ", KRITZEL_VERSION), h("p", { class: "version-info" }, "App-State Schema v", CURRENT_APP_STATE_SCHEMA_VERSION), h("p", { class: "version-info" }, "Workspace Schema v", CURRENT_WORKSPACE_SCHEMA_VERSION)))));
225
225
  }
226
226
  render() {
227
- return (h(Host, { key: '0461408163ca90999eef2885be2496264cae94ac' }, h("kritzel-dialog", { key: 'bbeb801a3024887d9e4aff94128f50d15a0a6820', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: 'ee2013cb3e7588b0b25c0f6175e79290de21cf09', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
227
+ return (h(Host, { key: 'a3b62913565f4823bd379da67d81545c58c49d20' }, h("kritzel-dialog", { key: 'e688b2d81f985905f65b756becb336b7d14ca8f5', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: '1f6db30412514bee5b087d8365eca91d76002ef8', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
228
228
  }
229
229
  static get watchers() { return {
230
230
  "settings": [{
@@ -1,16 +1,16 @@
1
- import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
1
+ import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
2
2
  import { KritzelToolConfigHelper, resolveTextToolAvailableFonts, KritzelFontRegistry, KritzelColorHelper } from '@kritzel/engine';
3
- import { d as defineCustomElement$b } from './p-DVv8ChhE.js';
4
- import { d as defineCustomElement$a } from './p-GbCxpbQ6.js';
5
- import { d as defineCustomElement$9 } from './p-R1D8Sr0l.js';
6
- import { d as defineCustomElement$8 } from './p-BDjRSoAc.js';
7
- import { d as defineCustomElement$7 } from './p-ClfOtiNp.js';
8
- import { d as defineCustomElement$6 } from './p-BfMlwIcG.js';
9
- import { d as defineCustomElement$5 } from './p-BGmTmdLe.js';
10
- import { d as defineCustomElement$4 } from './p-CoNexfpB.js';
11
- import { d as defineCustomElement$3 } from './p-h_uh_Njf.js';
12
- import { d as defineCustomElement$2 } from './p-BvG3JO85.js';
13
- import { d as defineCustomElement$1 } from './p-DXuf225S.js';
3
+ import { d as defineCustomElement$b } from './p-CO1cJlfg.js';
4
+ import { d as defineCustomElement$a } from './p-C2ySiAXO.js';
5
+ import { d as defineCustomElement$9 } from './p-B-U13Ew1.js';
6
+ import { d as defineCustomElement$8 } from './p-Dko_6jIh.js';
7
+ import { d as defineCustomElement$7 } from './p-C1_r9nJU.js';
8
+ import { d as defineCustomElement$6 } from './p-DF8p-DxR.js';
9
+ import { d as defineCustomElement$5 } from './p-B6Z_VKKH.js';
10
+ import { d as defineCustomElement$4 } from './p-BDsuJNT_.js';
11
+ import { d as defineCustomElement$3 } from './p-VYGV0cr3.js';
12
+ import { d as defineCustomElement$2 } from './p-BMi-i7sC.js';
13
+ import { d as defineCustomElement$1 } from './p-HbHo7awi.js';
14
14
 
15
15
  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%}`;
16
16
 
@@ -273,7 +273,7 @@ const KritzelToolConfig = /*@__PURE__*/ proxyCustomElement(class KritzelToolConf
273
273
  ])), shouldShowExpandButton && (h("div", { style: {
274
274
  display: 'flex',
275
275
  alignItems: 'flex-start',
276
- } }, h("button", { class: "expand-toggle", onClick: this.handleToggleExpand, title: this.isExpanded ? (this.terms['toolConfig.collapse'] ?? 'Collapse') : (this.terms['toolConfig.expand'] ?? 'Expand') }, h("kritzel-icon", { name: this.isExpanded ? 'chevron-up' : 'chevron-down' })))))));
276
+ } }, h("button", { class: "expand-toggle", onClick: this.handleToggleExpand, title: this.isExpanded ? (this.terms['toolConfig.collapse'] ?? 'Collapse') : (this.terms['toolConfig.expand'] ?? 'Expand') }, h("kritzel-icon", { name: this.isExpanded ? 'chevronUp' : 'chevronDown' })))))));
277
277
  }
278
278
  static get watchers() { return {
279
279
  "tool": [{
@@ -1,5 +1,5 @@
1
- import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
2
- import { d as defineCustomElement$1 } from './p-BDjRSoAc.js';
1
+ import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
2
+ import { d as defineCustomElement$1 } from './p-Dko_6jIh.js';
3
3
 
4
4
  const kritzelFontSizeCss = () => `:host{display:flex;align-items:flex-start;gap:8px;padding:0;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:4px;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;border-radius:50%}.size-container:hover{background-color:var(--kritzel-font-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-font-size-selected-background-color, #e0e0e0)}`;
5
5
 
@@ -29,7 +29,7 @@ const KritzelFontSize = /*@__PURE__*/ proxyCustomElement(class KritzelFontSize e
29
29
  render() {
30
30
  const color = 'var(--kritzel-global-text-primary)';
31
31
  const sizes = this.sizes ?? [];
32
- return (h(Host, { key: 'c9c651548fe820f1703e8d560bde2ed0be368fab' }, sizes.map(size => (h("div", { tabIndex: 0, class: {
32
+ return (h(Host, { key: 'e8309800110db6b59eb1c43ede2e4e94d085f380' }, sizes.map(size => (h("div", { tabIndex: 0, class: {
33
33
  'size-container': true,
34
34
  'selected': this.selectedSize === size,
35
35
  }, onClick: () => this.handleSizeClick(size), onKeyDown: event => this.handleKeyDown(event, size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size, color: color }))))));
@@ -1,7 +1,7 @@
1
- import { p as proxyCustomElement, t as transformTag, H, h, d as Host } from './p-5qkOM1RJ.js';
2
- import { d as defineCustomElement$1 } from './p-4-qLegHb.js';
1
+ import { p as proxyCustomElement, t as transformTag, H, h, d as Host } from './p-Dzr6X2aj.js';
2
+ import { d as defineCustomElement$1 } from './p-Bipc1XvF.js';
3
3
 
4
- const kritzelActiveUsersCss = () => `:host{display:inline-flex;align-items:center}.avatars{display:flex;align-items:center}.avatar-wrapper{position:relative;transition:margin-left 200ms ease}.avatar-wrapper kritzel-avatar{border-radius:50%;box-shadow:0 0 0 2px var(--kritzel-active-users-avatar-border-color, #ffffff)}.avatars:hover .avatar-wrapper{margin-left:-6px !important}.avatar-tooltip{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:12px;padding:4px 8px;background-color:var(--kritzel-active-users-tooltip-background, #333333);color:var(--kritzel-active-users-tooltip-color, #ffffff);font-family:sans-serif;font-size:12px;font-weight:500;border-radius:4px;white-space:nowrap;width:max-content;pointer-events:none;opacity:0;transition:opacity 150ms ease}.avatar-wrapper:hover .avatar-tooltip,.overflow-count:hover .avatar-tooltip{opacity:1}.overflow-count{position:relative;margin-left:8px;font-family:sans-serif;font-size:var(--kritzel-active-users-overflow-font-size, 14px);font-weight:500;color:var(--kritzel-active-users-overflow-color, #666666);white-space:nowrap;cursor:default}.overflow-count .avatar-tooltip{white-space:nowrap;text-align:left;margin-top:20px}`;
4
+ const kritzelActiveUsersCss = () => `:host{display:inline-flex;align-items:center}.avatars{display:flex;align-items:center}.avatar-wrapper{position:relative;transition:margin-left 200ms ease}.avatar-wrapper kritzel-avatar{border-radius:50%;box-shadow:0 0 0 2px var(--kritzel-active-users-avatar-border-color, #ffffff)}.avatars:hover .avatar-wrapper{margin-left:-6px !important}.avatar-tooltip{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:12px;padding:4px 8px;background-color:var(--kritzel-active-users-tooltip-background, #333333);color:var(--kritzel-active-users-tooltip-color, #ffffff);font-family:var(--kritzel-active-users-font-family, var(--kritzel-global-font-family, sans-serif));font-size:12px;font-weight:500;border-radius:4px;white-space:nowrap;width:max-content;pointer-events:none;opacity:0;transition:opacity 150ms ease}.avatar-wrapper:hover .avatar-tooltip,.overflow-count:hover .avatar-tooltip{opacity:1}.overflow-count{position:relative;margin-left:8px;font-family:var(--kritzel-active-users-font-family, var(--kritzel-global-font-family, sans-serif));font-size:var(--kritzel-active-users-overflow-font-size, 14px);font-weight:500;color:var(--kritzel-active-users-overflow-color, #666666);white-space:nowrap;cursor:default}.overflow-count .avatar-tooltip{white-space:nowrap;text-align:left;margin-top:20px}`;
5
5
 
6
6
  const KritzelActiveUsers = /*@__PURE__*/ proxyCustomElement(class KritzelActiveUsers extends H {
7
7
  constructor(registerHost) {