kritzel-stencil 0.4.30 → 0.4.31

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 (193) hide show
  1. package/LICENSE +21 -21
  2. package/LICENSE.md +49 -49
  3. package/dist/cjs/index.cjs.js +1 -1
  4. package/dist/cjs/kritzel-active-users_46.cjs.entry.js +112 -112
  5. package/dist/cjs/kritzel-brush-style.cjs.entry.js +1 -1
  6. package/dist/cjs/{schema.constants-CcvqL5nJ.js → schema.constants-0ySX0cg3.js} +6 -6
  7. package/dist/collection/components/core/kritzel-awareness-cursors/kritzel-awareness-cursors.css +115 -115
  8. package/dist/collection/components/core/kritzel-awareness-cursors/kritzel-awareness-cursors.js +1 -1
  9. package/dist/collection/components/core/kritzel-cursor-trail/kritzel-cursor-trail.css +10 -10
  10. package/dist/collection/components/core/kritzel-cursor-trail/kritzel-cursor-trail.js +1 -1
  11. package/dist/collection/components/core/kritzel-editor/kritzel-editor.css +160 -160
  12. package/dist/collection/components/core/kritzel-editor/kritzel-editor.js +18 -18
  13. package/dist/collection/components/core/kritzel-engine/kritzel-engine.css +80 -80
  14. package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +21 -21
  15. package/dist/collection/components/core/kritzel-watermark/kritzel-watermark.css +29 -29
  16. package/dist/collection/components/core/kritzel-watermark/kritzel-watermark.js +2 -2
  17. package/dist/collection/components/shared/kritzel-avatar/kritzel-avatar.css +58 -58
  18. package/dist/collection/components/shared/kritzel-avatar/kritzel-avatar.js +3 -3
  19. package/dist/collection/components/shared/kritzel-brush-style/kritzel-brush-style.css +42 -42
  20. package/dist/collection/components/shared/kritzel-brush-style/kritzel-brush-style.js +3 -3
  21. package/dist/collection/components/shared/kritzel-button/kritzel-button.css +73 -73
  22. package/dist/collection/components/shared/kritzel-button/kritzel-button.js +2 -2
  23. package/dist/collection/components/shared/kritzel-color/kritzel-color.css +24 -24
  24. package/dist/collection/components/shared/kritzel-color/kritzel-color.js +2 -2
  25. package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.css +46 -46
  26. package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.js +1 -1
  27. package/dist/collection/components/shared/kritzel-dialog/kritzel-dialog.css +209 -209
  28. package/dist/collection/components/shared/kritzel-dropdown/kritzel-dropdown.css +190 -190
  29. package/dist/collection/components/shared/kritzel-dropdown/kritzel-dropdown.js +2 -2
  30. package/dist/collection/components/shared/kritzel-font/kritzel-font.css +10 -10
  31. package/dist/collection/components/shared/kritzel-font/kritzel-font.js +1 -1
  32. package/dist/collection/components/shared/kritzel-font-family/kritzel-font-family.css +48 -48
  33. package/dist/collection/components/shared/kritzel-font-family/kritzel-font-family.js +2 -2
  34. package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.css +30 -30
  35. package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.js +1 -1
  36. package/dist/collection/components/shared/kritzel-icon/kritzel-icon.css +18 -18
  37. package/dist/collection/components/shared/kritzel-input/kritzel-input.css +69 -69
  38. package/dist/collection/components/shared/kritzel-input/kritzel-input.js +1 -1
  39. package/dist/collection/components/shared/kritzel-line-endings/kritzel-line-endings.css +60 -60
  40. package/dist/collection/components/shared/kritzel-line-endings/kritzel-line-endings.js +3 -3
  41. package/dist/collection/components/shared/kritzel-master-detail/kritzel-master-detail.css +190 -190
  42. package/dist/collection/components/shared/kritzel-master-detail/kritzel-master-detail.js +3 -3
  43. package/dist/collection/components/shared/kritzel-menu/kritzel-menu.css +34 -34
  44. package/dist/collection/components/shared/kritzel-menu/kritzel-menu.js +1 -1
  45. package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.css +166 -166
  46. package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.js +2 -2
  47. package/dist/collection/components/shared/kritzel-numeric-input/kritzel-numeric-input.css +102 -102
  48. package/dist/collection/components/shared/kritzel-numeric-input/kritzel-numeric-input.js +1 -1
  49. package/dist/collection/components/shared/kritzel-opacity-slider/kritzel-opacity-slider.css +85 -85
  50. package/dist/collection/components/shared/kritzel-opacity-slider/kritzel-opacity-slider.js +1 -1
  51. package/dist/collection/components/shared/kritzel-pill-tabs/kritzel-pill-tabs.css +68 -68
  52. package/dist/collection/components/shared/kritzel-pill-tabs/kritzel-pill-tabs.js +2 -2
  53. package/dist/collection/components/shared/kritzel-portal/kritzel-portal.js +1 -1
  54. package/dist/collection/components/shared/kritzel-shape-fill/kritzel-shape-fill.css +47 -47
  55. package/dist/collection/components/shared/kritzel-shape-fill/kritzel-shape-fill.js +4 -4
  56. package/dist/collection/components/shared/kritzel-slide-toggle/kritzel-slide-toggle.css +48 -48
  57. package/dist/collection/components/shared/kritzel-slide-toggle/kritzel-slide-toggle.js +1 -1
  58. package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.css +78 -78
  59. package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.js +1 -1
  60. package/dist/collection/components/shared/kritzel-stroke-size/kritzel-stroke-size.css +37 -37
  61. package/dist/collection/components/shared/kritzel-stroke-size/kritzel-stroke-size.js +1 -1
  62. package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.css +18 -18
  63. package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.js +2 -2
  64. package/dist/collection/components/ui/kritzel-active-users/kritzel-active-users.css +65 -65
  65. package/dist/collection/components/ui/kritzel-back-to-content/kritzel-back-to-content.css +42 -42
  66. package/dist/collection/components/ui/kritzel-back-to-content/kritzel-back-to-content.js +1 -1
  67. package/dist/collection/components/ui/kritzel-context-menu/kritzel-context-menu.css +112 -112
  68. package/dist/collection/components/ui/kritzel-controls/kritzel-controls.css +331 -331
  69. package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js +6 -6
  70. package/dist/collection/components/ui/kritzel-current-user/kritzel-current-user.css +11 -11
  71. package/dist/collection/components/ui/kritzel-current-user/kritzel-current-user.js +1 -1
  72. package/dist/collection/components/ui/kritzel-current-user-dialog/kritzel-current-user-dialog.css +39 -39
  73. package/dist/collection/components/ui/kritzel-current-user-dialog/kritzel-current-user-dialog.js +1 -1
  74. package/dist/collection/components/ui/kritzel-export/kritzel-export.css +89 -89
  75. package/dist/collection/components/ui/kritzel-export/kritzel-export.js +1 -1
  76. package/dist/collection/components/ui/kritzel-loading-overlay/kritzel-loading-overlay.css +54 -54
  77. package/dist/collection/components/ui/kritzel-loading-overlay/kritzel-loading-overlay.js +1 -1
  78. package/dist/collection/components/ui/kritzel-login-dialog/kritzel-login-dialog.css +98 -98
  79. package/dist/collection/components/ui/kritzel-login-dialog/kritzel-login-dialog.js +1 -1
  80. package/dist/collection/components/ui/kritzel-more-menu/kritzel-more-menu.css +58 -58
  81. package/dist/collection/components/ui/kritzel-more-menu/kritzel-more-menu.js +2 -2
  82. package/dist/collection/components/ui/kritzel-notification-card/kritzel-notification-card.css +101 -101
  83. package/dist/collection/components/ui/kritzel-settings/kritzel-settings.css +137 -137
  84. package/dist/collection/components/ui/kritzel-settings/kritzel-settings.js +1 -1
  85. package/dist/collection/components/ui/kritzel-share-dialog/kritzel-share-dialog.css +150 -150
  86. package/dist/collection/components/ui/kritzel-share-dialog/kritzel-share-dialog.js +2 -2
  87. package/dist/collection/components/ui/kritzel-tool-config/kritzel-tool-config.css +38 -38
  88. package/dist/collection/components/ui/kritzel-utility-panel/kritzel-utility-panel.css +45 -45
  89. package/dist/collection/components/ui/kritzel-utility-panel/kritzel-utility-panel.js +1 -1
  90. package/dist/collection/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.css +16 -16
  91. package/dist/collection/components/ui/kritzel-zoom-panel/kritzel-zoom-panel.css +72 -72
  92. package/dist/collection/components/ui/kritzel-zoom-panel/kritzel-zoom-panel.js +1 -1
  93. package/dist/collection/constants/version.js +1 -1
  94. package/dist/collection/helpers/cursor.helper.js +6 -6
  95. package/dist/collection/helpers/svg-export.helper.js +41 -41
  96. package/dist/components/index.js +2 -2
  97. package/dist/components/kritzel-active-users.js +1 -1
  98. package/dist/components/kritzel-avatar.js +1 -1
  99. package/dist/components/kritzel-awareness-cursors.js +1 -1
  100. package/dist/components/kritzel-back-to-content.js +1 -1
  101. package/dist/components/kritzel-brush-style.js +2 -2
  102. package/dist/components/kritzel-button.js +1 -1
  103. package/dist/components/kritzel-color-palette.js +1 -1
  104. package/dist/components/kritzel-color.js +1 -1
  105. package/dist/components/kritzel-controls.js +1 -1
  106. package/dist/components/kritzel-current-user-dialog.js +1 -1
  107. package/dist/components/kritzel-current-user.js +1 -1
  108. package/dist/components/kritzel-cursor-trail.js +1 -1
  109. package/dist/components/kritzel-dialog.js +1 -1
  110. package/dist/components/kritzel-dropdown.js +1 -1
  111. package/dist/components/kritzel-editor.js +51 -51
  112. package/dist/components/kritzel-engine.js +1 -1
  113. package/dist/components/kritzel-export.js +1 -1
  114. package/dist/components/kritzel-font-family.js +1 -1
  115. package/dist/components/kritzel-font-size.js +1 -1
  116. package/dist/components/kritzel-font.js +1 -1
  117. package/dist/components/kritzel-input.js +1 -1
  118. package/dist/components/kritzel-line-endings.js +1 -1
  119. package/dist/components/kritzel-loading-overlay.js +1 -1
  120. package/dist/components/kritzel-login-dialog.js +1 -1
  121. package/dist/components/kritzel-master-detail.js +1 -1
  122. package/dist/components/kritzel-menu-item.js +1 -1
  123. package/dist/components/kritzel-menu.js +1 -1
  124. package/dist/components/kritzel-more-menu.js +1 -1
  125. package/dist/components/kritzel-numeric-input.js +1 -1
  126. package/dist/components/kritzel-opacity-slider.js +1 -1
  127. package/dist/components/kritzel-pill-tabs.js +1 -1
  128. package/dist/components/kritzel-portal.js +1 -1
  129. package/dist/components/kritzel-settings.js +1 -1
  130. package/dist/components/kritzel-shape-fill.js +1 -1
  131. package/dist/components/kritzel-share-dialog.js +1 -1
  132. package/dist/components/kritzel-slide-toggle.js +1 -1
  133. package/dist/components/kritzel-split-button.js +1 -1
  134. package/dist/components/kritzel-stroke-size.js +1 -1
  135. package/dist/components/kritzel-tool-config.js +1 -1
  136. package/dist/components/kritzel-tooltip.js +1 -1
  137. package/dist/components/kritzel-utility-panel.js +1 -1
  138. package/dist/components/kritzel-watermark.js +1 -1
  139. package/dist/components/kritzel-workspace-manager.js +1 -1
  140. package/dist/components/kritzel-zoom-panel.js +1 -1
  141. package/dist/components/{p-DTB3ykgO.js → p-B65Z2K81.js} +1 -1
  142. package/dist/components/{p-4uoSa0Xl.js → p-B6cwfdo3.js} +2 -2
  143. package/dist/components/{p-ChPs27Fd.js → p-BBA9F6Bi.js} +4 -4
  144. package/dist/components/{p-Dvn6ad4a.js → p-BCrNNQKI.js} +1 -1
  145. package/dist/components/{p-CoXN583u.js → p-BGJ-1pXX.js} +3 -3
  146. package/dist/components/{p-CBrn5AIB.js → p-BTRiw0VC.js} +1 -1
  147. package/dist/components/{p-DoxFuOy1.js → p-Bu6TjCs0.js} +2 -2
  148. package/dist/components/{p-Ce1j1-Hg.js → p-BvpI1eL4.js} +3 -3
  149. package/dist/components/{p-CAXR5-S9.js → p-BwC3bHai.js} +4 -4
  150. package/dist/components/{p-DX2nriaq.js → p-C2NV0SgA.js} +1 -1
  151. package/dist/components/{p-BPzdPKWE.js → p-CAGey5Xt.js} +3 -3
  152. package/dist/components/{p-C0FEC_gS.js → p-C_4J10HD.js} +2 -2
  153. package/dist/components/{p-NOWtUeeQ.js → p-C_fBqaep.js} +1 -1
  154. package/dist/components/{p-Ba0c-tu2.js → p-CzibK3BJ.js} +2 -2
  155. package/dist/components/{p-Cm33td2O.js → p-D0SKmg_J.js} +1 -1
  156. package/dist/components/{p-OUl5CA4Y.js → p-D497dAd-.js} +1 -1
  157. package/dist/components/{p-BmBebQMI.js → p-DC7noKZD.js} +7 -7
  158. package/dist/components/{p-CXpv9Rxe.js → p-DGcug5rp.js} +2 -2
  159. package/dist/components/{p-DkHYY72B.js → p-DIE74Wkf.js} +2 -2
  160. package/dist/components/{p-DOTdJ3JQ.js → p-DKkQMbfN.js} +3 -3
  161. package/dist/components/{p-DnmVD1Mz.js → p-DKuxmP3T.js} +2 -2
  162. package/dist/components/{p-bAacqNHq.js → p-DQX5iqJB.js} +2 -2
  163. package/dist/components/{p-DUmLsjKb.js → p-DTzNzE9j.js} +1 -1
  164. package/dist/components/{p-Df3BwVGy.js → p-D_XWdMC3.js} +2 -2
  165. package/dist/components/{p-B38_9BJg.js → p-Da56LiC2.js} +1 -1
  166. package/dist/components/{p-CeffYwAK.js → p-DaE8xcJ8.js} +19 -19
  167. package/dist/components/{p-CYwoBiqy.js → p-DcG-UAoL.js} +50 -50
  168. package/dist/components/{p-BeSKOETx.js → p-Dm6TZsys.js} +2 -2
  169. package/dist/components/{p-DhabvHJM.js → p-DuyNKEne.js} +3 -3
  170. package/dist/components/{p-DFMZEarE.js → p-DyWg1f0y.js} +1 -1
  171. package/dist/components/{p-DN9p3G9K.js → p-FDwfHj3U.js} +3 -3
  172. package/dist/components/{p-DK0anxtL.js → p-P70dtHet.js} +1 -1
  173. package/dist/components/{p-CucCT7Qn.js → p-R6NeY_RA.js} +2 -2
  174. package/dist/components/{p-BFYtCsZu.js → p-XOXeNvvd.js} +2 -2
  175. package/dist/components/{p-jIKskj3S.js → p-ZwkkxMNZ.js} +1 -1
  176. package/dist/components/{p-BprEDRpA.js → p-auUCvUOc.js} +2 -2
  177. package/dist/components/{p-D0Ed8epW.js → p-b5XSApfh.js} +4 -4
  178. package/dist/components/{p-djJSnjAX.js → p-fp1y_eAN.js} +2 -2
  179. package/dist/components/{p-Dpm75DfV.js → p-mCRS0Vii.js} +5 -5
  180. package/dist/components/{p-DOl-95VY.js → p-ml3LLPFB.js} +10 -10
  181. package/dist/components/{p-D_cyY7Nd.js → p-xFCFDper.js} +1 -1
  182. package/dist/esm/index.js +2 -2
  183. package/dist/esm/kritzel-active-users_46.entry.js +112 -112
  184. package/dist/esm/kritzel-brush-style.entry.js +1 -1
  185. package/dist/esm/{schema.constants-De_S50eB.js → schema.constants-D3OqvrMh.js} +6 -6
  186. package/dist/stencil/index.esm.js +2 -2
  187. package/dist/stencil/{p-1a398b42.entry.js → p-307b09bd.entry.js} +112 -112
  188. package/dist/stencil/{p-fb32cd8f.entry.js → p-905f7ab4.entry.js} +1 -1
  189. package/dist/stencil/{p-De_S50eB.js → p-D3OqvrMh.js} +6 -6
  190. package/dist/stencil/stencil.esm.js +1 -1
  191. package/dist/types/constants/version.d.ts +1 -1
  192. package/package.json +2 -1
  193. package/readme.md +10 -10
@@ -1,5 +1,5 @@
1
1
  import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './p-Dhio9uis.js';
2
- import { c as KritzelPath, e as KritzelLine, V as KritzelColorHelper, X as KritzelDevicesHelper, Y as KritzelMouseButton, Z as KritzelHTMLHelper, _ as DEFAULT_STROKE_SIZES, $ as DEFAULT_COLOR_PALETTE, S as ShapeType, I as IndexedDBSyncProvider, q as KritzelSelectionTool, D as DEFAULT_BRUSH_CONFIG, j as KritzelBrushTool, l as KritzelEraserTool, E as DEFAULT_LINE_TOOL_CONFIG, k as KritzelLineTool, o as KritzelShapeTool, C as DEFAULT_TEXT_CONFIG, n as KritzelTextTool, m as KritzelImageTool, O as KritzelAlignment, B as hasRemoteSyncProvider, F as DEFAULT_ASSET_STORAGE_CONFIG, a0 as ObjectHelper, a1 as resolveTextToolAvailableFonts, a2 as ThemeHelper, J as darkTheme, G as lightTheme, a3 as KritzelSelectionGroup, a4 as KritzelSelectionBox, a5 as KritzelIconRegistry, z as KritzelFontRegistry, a6 as KritzelKeyboardHelper, a7 as KritzelBaseHandler, t as KritzelWorkspace, f as KritzelGroup, h as KritzelCustomElement, d as KritzelImage, g as KritzelShape, b as KritzelText, P as runMigrations, U as CURRENT_WORKSPACE_SCHEMA_VERSION, R as WORKSPACE_MIGRATIONS, a8 as KritzelClassHelper, T as CURRENT_APP_STATE_SCHEMA_VERSION, Q as APP_STATE_MIGRATIONS, p as KritzelCursorHelper, a9 as KritzelImageFileHelper, aa as imageCompression, u as KritzelAnchorManager, v as KritzelThemeManager, w as KritzelLocalizationManager, x as KritzelLicenseManager, r as KritzelAssetResolver, ab as KritzelEventHelper, W as WORKSPACE_EXPORT_VERSION, i as KritzelBaseTool } from './p-De_S50eB.js';
2
+ import { c as KritzelPath, e as KritzelLine, V as KritzelColorHelper, X as KritzelDevicesHelper, Y as KritzelMouseButton, Z as KritzelHTMLHelper, _ as DEFAULT_STROKE_SIZES, $ as DEFAULT_COLOR_PALETTE, S as ShapeType, I as IndexedDBSyncProvider, q as KritzelSelectionTool, D as DEFAULT_BRUSH_CONFIG, j as KritzelBrushTool, l as KritzelEraserTool, E as DEFAULT_LINE_TOOL_CONFIG, k as KritzelLineTool, o as KritzelShapeTool, C as DEFAULT_TEXT_CONFIG, n as KritzelTextTool, m as KritzelImageTool, O as KritzelAlignment, B as hasRemoteSyncProvider, F as DEFAULT_ASSET_STORAGE_CONFIG, a0 as ObjectHelper, a1 as resolveTextToolAvailableFonts, a2 as ThemeHelper, J as darkTheme, G as lightTheme, a3 as KritzelSelectionGroup, a4 as KritzelSelectionBox, a5 as KritzelIconRegistry, z as KritzelFontRegistry, a6 as KritzelKeyboardHelper, a7 as KritzelBaseHandler, t as KritzelWorkspace, f as KritzelGroup, h as KritzelCustomElement, d as KritzelImage, g as KritzelShape, b as KritzelText, P as runMigrations, U as CURRENT_WORKSPACE_SCHEMA_VERSION, R as WORKSPACE_MIGRATIONS, a8 as KritzelClassHelper, T as CURRENT_APP_STATE_SCHEMA_VERSION, Q as APP_STATE_MIGRATIONS, p as KritzelCursorHelper, a9 as KritzelImageFileHelper, aa as imageCompression, u as KritzelAnchorManager, v as KritzelThemeManager, w as KritzelLocalizationManager, x as KritzelLicenseManager, r as KritzelAssetResolver, ab as KritzelEventHelper, W as WORKSPACE_EXPORT_VERSION, i as KritzelBaseTool } from './p-D3OqvrMh.js';
3
3
  import * as Y from 'yjs';
4
4
  import 'y-indexeddb';
5
5
  import 'y-websocket';
@@ -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: 'f199b56955b749b868ad8e7940ef3114f1109c37', style: containerStyles, class: {
139
+ return (h(Host, { key: '2aa6089fe51ec346fbd5446bad4190b0f9970f89', 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: '621a58cc965cf6d037f8515e1263bd5bf4098ab0', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
143
+ }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: 'c7c9670f6c3596c6a1e60fea1309da3306fb40f0', 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: '28ff2e8b191c2d476c0f40dd57a2c8ec330ba104', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: 'd2ef56b2fca2a609b5b99bb8d7e8747308ab9699', class: "avatar-default" }, h("svg", { key: '1c1d6e6e306a9938f559016eeb77a67aae42f536', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '2c6af53101c20e137756d1194a3bac04c931066d', 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: 'e9899002b0e210d77c8eeb7f4e359bc518c82076', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: '359b57ab41b24ce2f7163ff782cca167b3078133', class: "avatar-default" }, h("svg", { key: '26f60f955453804ef40fac4cb2982c650c15d236', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '9d872cdf173250f36596eb76c45bdae437f801a7', 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": [{
@@ -158,7 +158,7 @@ const KritzelAvatar = class {
158
158
  };
159
159
  KritzelAvatar.style = kritzelAvatarCss();
160
160
 
161
- const kritzelAwarenessCursorsCss = () => `:host{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1}.awareness-cursor{position:absolute;top:0;left:0;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out, opacity 300ms ease;will-change:transform}.awareness-cursor.stale{opacity:0}.awareness-cursor.tracking-object{transition-duration:0ms}.cursor-arrow{filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.cursor-label{position:absolute;left:16px;top:16px;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;user-select:none}.edge-indicator{position:absolute;top:-12px;left:-12px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out, opacity 300ms ease;will-change:transform;pointer-events:auto;user-select:none;cursor:pointer}.edge-indicator.stale{opacity:0}.edge-indicator.tracking-object{transition-duration:0ms}.edge-arrow{position:absolute;filter:drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));transition:opacity 300ms ease}.edge-arrow.stale{opacity:0}.edge-label{position:absolute;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;opacity:0;transform-origin:center;transition:opacity 150ms ease}.edge-indicator:hover .edge-label{opacity:1}.remote-selection-box{position:absolute;top:0;left:0;border-width:2px;border-style:solid;pointer-events:none;will-change:transform, width, height;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out, width var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out, height var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out}`;
161
+ const kritzelAwarenessCursorsCss = () => `:host{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1}.awareness-cursor{position:absolute;top:0;left:0;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out, opacity 300ms ease;will-change:transform}.awareness-cursor.stale{opacity:0}.awareness-cursor.tracking-object{transition-duration:0ms}.cursor-arrow{filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.cursor-label{position:absolute;left:16px;top:16px;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;user-select:none}.edge-indicator{position:absolute;top:-12px;left:-12px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out, opacity 300ms ease;will-change:transform;pointer-events:auto;user-select:none;cursor:pointer}.edge-indicator.stale{opacity:0}.edge-indicator.tracking-object{transition-duration:0ms}.edge-arrow{position:absolute;filter:drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));transition:opacity 300ms ease}.edge-arrow.stale{opacity:0}.edge-label{position:absolute;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;opacity:0;transform-origin:center;transition:opacity 150ms ease}.edge-indicator:hover .edge-label{opacity:1}.remote-selection-box{position:absolute;top:0;left:0;border-width:2px;border-style:solid;pointer-events:none;will-change:transform, width, height;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out, width var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out, height var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out}`;
162
162
 
163
163
  const STALE_THRESHOLD_MS = 10_000;
164
164
  const REMOVE_THRESHOLD_MS = 30_000;
@@ -363,7 +363,7 @@ const KritzelAwarenessCursors = class {
363
363
  }
364
364
  render() {
365
365
  const cursors = Array.from(this.remoteCursors.values());
366
- return (h(Host, { key: '9be6694250bafe011be27301d1c7a53fc7957657' }, cursors.map(remoteCursor => {
366
+ return (h(Host, { key: 'b157f337127f7e5852acc0d6a246fa42e944a501' }, cursors.map(remoteCursor => {
367
367
  if (!remoteCursor.cursor)
368
368
  return null;
369
369
  // When a remote user is actively drawing, derive cursor position from
@@ -470,7 +470,7 @@ const KritzelBackToContent = class {
470
470
  this.backToContent.emit();
471
471
  };
472
472
  render() {
473
- return (h(Host, { key: '0a41ed93e39193416eebdaf786557bffd4653dd0' }, h("button", { key: '1f621de9699127a095e94d910d5c96328324b299', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, h("kritzel-icon", { key: '8ff49df055a0472edbbc57d84044a2de09b543c8', name: "chevrons-left" }))));
473
+ return (h(Host, { key: '4ce5b0f5458c6bf86537a13cdfe6018cc170ea75' }, h("button", { key: 'b5df62731d6cb4a0834e6962707d84a4ffc1556a', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, h("kritzel-icon", { key: '32e02064526f17fe0f3b52078ee681e60f3cd7e5', name: "chevrons-left" }))));
474
474
  }
475
475
  };
476
476
  KritzelBackToContent.style = kritzelBackToContentCss();
@@ -497,16 +497,16 @@ const KritzelButton = class {
497
497
  this.buttonClick.emit();
498
498
  };
499
499
  render() {
500
- return (h(Host, { key: 'b7d78dad25d41116ac6368c1ff2cd41ee28d9cdc' }, h("button", { key: '88cfd3674e63cd82ea5874205237415a540307b6', type: this.type, class: {
500
+ return (h(Host, { key: 'a5f90834739101961dd128dba592cf53b877bb82' }, h("button", { key: '19cbfaeb85e14fbbc76b517ace1a1e084adbb65d', type: this.type, class: {
501
501
  'kritzel-button': true,
502
502
  [this.variant]: true,
503
503
  'disabled': this.disabled,
504
- }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: 'a7f4fd923800f66bc7ea438f2cbcdfde81b11ae1' }))));
504
+ }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '6e4c7cdfb295aa0dc79e494e5fdeb5527ab80383' }))));
505
505
  }
506
506
  };
507
507
  KritzelButton.style = kritzelButtonCss();
508
508
 
509
- 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)}`;
509
+ 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)}`;
510
510
 
511
511
  const KritzelColorComponent = class {
512
512
  constructor(hostRef) {
@@ -549,13 +549,13 @@ const KritzelColorComponent = class {
549
549
  render() {
550
550
  const resolvedColor = this.resolveColor();
551
551
  const isColorVeryLight = this.isLightColor(resolvedColor);
552
- return (h(Host, { key: '17b5c44e1defe8f3fb41632391be093a12bb899b' }, h("div", { key: '545f4c4fd62dea22a4a5f36108a51d30c57f2652', class: "checkerboard-bg", style: {
552
+ return (h(Host, { key: '230d6fa9bc597920e9b2ebc97d597d4f57df0b92' }, h("div", { key: '3146aac9869f34762c7f86ed8882d62ef01248ce', class: "checkerboard-bg", style: {
553
553
  width: `${this.size}px`,
554
554
  height: `${this.size}px`,
555
555
  borderRadius: '50%',
556
556
  display: 'inline-block',
557
557
  position: 'relative',
558
- } }, h("div", { key: 'bbcb68f6e5f00d9a33b316d52ac86e49911e463c', class: {
558
+ } }, h("div", { key: 'bddf0776144a6bdfca9c005708fa1467e244546b', class: {
559
559
  'color-circle': true,
560
560
  'white': isColorVeryLight,
561
561
  }, style: {
@@ -611,7 +611,7 @@ const KritzelColorPalette = class {
611
611
  render() {
612
612
  const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
613
613
  const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
614
- return (h(Host, { key: '5f25a2ead76106ba2ef9762b4d212d5a9d7ac2a8' }, h("div", { key: '764cc6a55cc1865aaf1c501ee89a161f74fefa1c', class: {
614
+ return (h(Host, { key: '285c0db424b154d1b4ebca2fd4447bb248bc50f5' }, h("div", { key: '703abc3074b886895e963992cbc3084357c06a15', class: {
615
615
  'color-grid': true,
616
616
  'expanded': this.isExpanded,
617
617
  }, style: {
@@ -1180,13 +1180,13 @@ const KritzelControls = class {
1180
1180
  // Separate tool controls from config control
1181
1181
  const toolControls = this.internalControls.filter(c => c.type === 'tool' || c.type === 'separator');
1182
1182
  const configControl = this.internalControls.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
1183
- return (h(Host, { key: '42f84f104e4b008a7c53a5e1ea9290c17ba792d2', style: { display: this.visible ? '' : 'none' }, class: {
1183
+ return (h(Host, { key: 'b24e74fd097649b287ed531539f9870e307e7bd9', style: { display: this.visible ? '' : 'none' }, class: {
1184
1184
  mobile: this.isTouchDevice,
1185
- } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '8f6b3df9db735dfd847da9683db3fbdcc65b08a4', style: {
1185
+ } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: 'f6b0c86a4a56292692ad803f8bfa3ae17bbafb46', style: {
1186
1186
  position: 'absolute',
1187
1187
  bottom: '56px',
1188
1188
  left: '12px',
1189
- }, undoState: this.undoState, terms: this.terms, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '7a314d779882e2b42a39fdb2a52f434ccacff112', class: "kritzel-controls" }, h("div", { key: '23458bc04c2f1a610cff9c5e617d7be2c657bf4f', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: 'b17d817767c92ce7a6edf279759d3f1fb1097911', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
1189
+ }, undoState: this.undoState, terms: this.terms, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: 'ed6cd48baea27dd26136c2325a1e3f5bb2c25583', class: "kritzel-controls" }, h("div", { key: '63396ad42750244a3f19973421396d29593a6ca9', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: 'fe26d6c155cf365d4d84d6bd10f3675cf224afd4', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
1190
1190
  // Check if this control has sub-options (split-button)
1191
1191
  if (control.subOptions?.length) {
1192
1192
  const selectedSubOption = this.getSelectedSubOption(control);
@@ -1216,10 +1216,10 @@ const KritzelControls = class {
1216
1216
  'kritzel-control': true,
1217
1217
  'selected': this.activeControl?.name === control?.name,
1218
1218
  }, 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 })));
1219
- })), h("div", { key: '740b52666bf823b7dc504a1072f68b59f94a3773', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
1219
+ })), h("div", { key: 'ba5b229ad298a52cf3fff9898e52b1facb64fb26', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
1220
1220
  'kritzel-config-container': true,
1221
1221
  'visible': hasConfigUI,
1222
- }, key: configControl.name }, h("div", { key: '7c5697faa2d03931ba9449b58a32e9f06166528e', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: '6e9bc7e5cf77778ec1dd2bee1c415344295acc00', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: 'fbfb910dacd4178aaffca5aa02e4e4422ba1b308', 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: '59d11a83e8c9968ba8d50df4275a892b4b75958c', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
1222
+ }, key: configControl.name }, h("div", { key: '5d8f80c0f0c3a9068196196bbe1d1f7f3ad822d4', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: '986bde3449a3d0f524d11996851c9c1c23ea7732', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: '7338acd8fc97e684b583413d6cf8f22bcedbe5ca', 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: '08e7597220bed80377dc677a6340b037168b7fa3', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
1223
1223
  if (el)
1224
1224
  this.configTriggerRef = el;
1225
1225
  }, onKeyDown: event => {
@@ -1228,7 +1228,7 @@ const KritzelControls = class {
1228
1228
  }
1229
1229
  }, style: {
1230
1230
  cursor: 'pointer',
1231
- } }, this.displayValues && (h("div", { key: '0ce5a0d8f51773b6e31feeee785606d637e06b42', class: "color-container" }, h("kritzel-color", { key: '29cc12dd6677b695b14e76e8a1704da78f910698', value: this.displayValues.color, theme: this.theme, size: 18, style: {
1231
+ } }, this.displayValues && (h("div", { key: 'bec7b1ff440dbd8a3517b4bc0d757aede0877a8e', class: "color-container" }, h("kritzel-color", { key: '3d6af3817779445b6879b7e6626a738dcb3099ec', value: this.displayValues.color, theme: this.theme, size: 18, style: {
1232
1232
  borderRadius: '50%',
1233
1233
  border: 'none',
1234
1234
  } })))))))));
@@ -1262,7 +1262,7 @@ const KritzelCurrentUser = class {
1262
1262
  /** Resolved localized strings keyed by term key, supplied by the editor. */
1263
1263
  terms = {};
1264
1264
  render() {
1265
- return (h(Host, { key: '30f2cedeefdef5817fcced6b84e74b53beba76ec' }, h("kritzel-avatar", { key: '41dc69bfbc13471fc686bb52e269dc98d2bfa3a8', user: this.user, size: this.avatarSize })));
1265
+ return (h(Host, { key: '5cd225e636bc44a9c2418a6e9cf03b4dc220bcd8' }, h("kritzel-avatar", { key: '783d399ad51f40805ed63e3c44a4634066a05666', user: this.user, size: this.avatarSize })));
1266
1266
  }
1267
1267
  };
1268
1268
  KritzelCurrentUser.style = kritzelCurrentUserCss();
@@ -1303,7 +1303,7 @@ const KritzelCurrentUserDialog = class {
1303
1303
  }
1304
1304
  render() {
1305
1305
  const displayName = this.getDisplayName();
1306
- return (h(Host, { key: '33baea01a828422f2bba5c2fba82dd82e5c5b32d' }, h("kritzel-dialog", { key: '5271e1eb5d36b74f8487c040e70424c26f7019f8', dialogTitle: this.terms['currentUser.dialogTitle'] ?? 'Account', isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '901697b9439eb8449f2f5c8e044c194f176633b1', class: "user-info" }, h("kritzel-avatar", { key: '76a17b9a2e4442b36b89747a5f5f168d2c59e7a1', user: this.user, size: 80 }), displayName && h("div", { key: '6aaedb1d2d8ea65de2460c15017d13b4e096223d', class: "user-name" }, displayName), this.user?.email && h("div", { key: '3cb78d0007087a18f798849f244399e5d6137e3b', class: "user-email" }, this.user.email), h("kritzel-button", { key: '67d416a1ac1be41cd6b658f79901cea29a287eb7', class: "logout-button", variant: "primary", onButtonClick: this.handleLogout }, this.terms['menu.logout'] ?? 'Logout')))));
1306
+ return (h(Host, { key: '5e7e3c553dde2d1d049ab0e2f15a60d8ccf41708' }, h("kritzel-dialog", { key: '24e27641ade633adfb76536c34f0bbc885b230f0', dialogTitle: this.terms['currentUser.dialogTitle'] ?? 'Account', isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: 'c9898de33ff63db1d244fe3028fd3ced36ce4f32', class: "user-info" }, h("kritzel-avatar", { key: '09ea2593f5a83c46d1fced68665319467c81786f', user: this.user, size: 80 }), displayName && h("div", { key: '61a0357598bd5ee85084255fcd97cc9f61f48cbd', class: "user-name" }, displayName), this.user?.email && h("div", { key: '761eaf17029b5721dbda7d523918ec1932296f89', class: "user-email" }, this.user.email), h("kritzel-button", { key: '55e6930d2e0975425fc00e40b4150d3116318875', class: "logout-button", variant: "primary", onButtonClick: this.handleLogout }, this.terms['menu.logout'] ?? 'Logout')))));
1307
1307
  }
1308
1308
  };
1309
1309
  KritzelCurrentUserDialog.style = kritzelCurrentUserDialogCss();
@@ -1376,7 +1376,7 @@ const KritzelCursorTrail = class {
1376
1376
  }
1377
1377
  }
1378
1378
  render() {
1379
- return (h(Host, { key: 'b427550b19a3e172cb25d05e34635121b82a61c5' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: '9685b563497e110f36c0feffbfde04ebeb38024b', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
1379
+ return (h(Host, { key: 'cf2cf1c689bdc8ea393a7ea8f32698cfcdb0e375' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: 'df38c45537217982f7fb9513b954f3b0fa27acea', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
1380
1380
  position: 'absolute',
1381
1381
  left: '0',
1382
1382
  top: '0',
@@ -1399,7 +1399,7 @@ const KritzelCursorTrail = class {
1399
1399
  };
1400
1400
  KritzelCursorTrail.style = kritzelCursorTrailCss();
1401
1401
 
1402
- 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}`;
1402
+ 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}`;
1403
1403
 
1404
1404
  const KritzelDialog = class {
1405
1405
  constructor(hostRef) {
@@ -1842,7 +1842,7 @@ const KritzelDialog = class {
1842
1842
  };
1843
1843
  KritzelDialog.style = kritzelDialogCss();
1844
1844
 
1845
- const kritzelDropdownCss = () => `:host{display:inline-flex;vertical-align:middle;width:100%;position:relative}.dropdown-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-dropdown-border-color, #ebebeb);border-radius:var(--kritzel-dropdown-border-radius, 6px);overflow:visible;height:38px;width:100%;position:relative}.dropdown-wrapper:hover:not(:focus-within){border-color:var(--kritzel-dropdown-hover-border-color, #cccccc)}.dropdown-container{flex:1;height:100%;min-width:0}.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;height:100%;width:100%;box-sizing:border-box;border-radius:var(--kritzel-dropdown-border-radius, 6px);border:none;background-color:var(--kritzel-dropdown-background, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;font-size:inherit;font-family:inherit;color:var(--kritzel-dropdown-text-color, #333333);-webkit-tap-highlight-color:transparent;text-align:left}.dropdown-trigger:focus-visible{outline:revert}.dropdown-trigger.has-suffix-border{border-right:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-right-radius:0;border-bottom-right-radius:0}.dropdown-trigger.has-prefix-border{border-left:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.dropdown-trigger-arrow{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;transition:transform 0.2s ease}.dropdown-trigger-arrow svg{width:100%;height:100%}.dropdown-trigger.is-open .dropdown-trigger-arrow{transform:rotate(180deg)}.dropdown-trigger.is-open.open-up .dropdown-trigger-arrow{transform:rotate(0deg)}.dropdown-menu{position:absolute;left:0;right:0;margin:0;padding:4px 0;list-style:none;background-color:var(--kritzel-dropdown-background, #ffffff);border:1px solid var(--kritzel-global-border-color, #ebebeb);border-radius:var(--kritzel-dropdown-menu-border-radius, var(--kritzel-dropdown-border-radius, 6px));box-shadow:var(--kritzel-controls-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));z-index:1000;max-height:240px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;outline:none}.dropdown-menu.open-down{top:calc(100% + 4px);bottom:auto;transform:translateY(-8px)}.dropdown-menu.open-up{bottom:calc(100% + 4px);top:auto;transform:translateY(8px)}.dropdown-menu.is-open{opacity:1;visibility:inherit;transform:translateY(0)}.dropdown-menu.open-up{box-shadow:var(--kritzel-controls-box-shadow, 0 -4px 12px rgba(0, 0, 0, 0.15))}.dropdown-option{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-dropdown-text-color, #333333);transition:background-color 0.1s ease;-webkit-tap-highlight-color:transparent}.dropdown-option.is-focused{background-color:var(--kritzel-dropdown-hover-background-color, #f0f0f0)}.dropdown-option.is-selected{font-weight:600;background-color:var(--kritzel-dropdown-selected-background-color, #007bff1a)}.dropdown-option-check{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--kritzel-dropdown-accent-color, #007bff)}.dropdown-option-check svg{width:100%;height:100%}.dropdown-menu{scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}::slotted(*){height:100%;box-sizing:border-box}`;
1845
+ const kritzelDropdownCss = () => `:host{display:inline-flex;vertical-align:middle;width:100%;position:relative}.dropdown-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-dropdown-border-color, #ebebeb);border-radius:var(--kritzel-dropdown-border-radius, 6px);overflow:visible;height:38px;width:100%;position:relative}.dropdown-wrapper:hover:not(:focus-within){border-color:var(--kritzel-dropdown-hover-border-color, #cccccc)}.dropdown-container{flex:1;height:100%;min-width:0}.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;height:100%;width:100%;box-sizing:border-box;border-radius:var(--kritzel-dropdown-border-radius, 6px);border:none;background-color:var(--kritzel-dropdown-background, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;font-size:inherit;font-family:inherit;color:var(--kritzel-dropdown-text-color, #333333);-webkit-tap-highlight-color:transparent;text-align:left}.dropdown-trigger:focus-visible{outline:revert}.dropdown-trigger.has-suffix-border{border-right:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-right-radius:0;border-bottom-right-radius:0}.dropdown-trigger.has-prefix-border{border-left:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.dropdown-trigger-arrow{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;transition:transform 0.2s ease}.dropdown-trigger-arrow svg{width:100%;height:100%}.dropdown-trigger.is-open .dropdown-trigger-arrow{transform:rotate(180deg)}.dropdown-trigger.is-open.open-up .dropdown-trigger-arrow{transform:rotate(0deg)}.dropdown-menu{position:absolute;left:0;right:0;margin:0;padding:4px 0;list-style:none;background-color:var(--kritzel-dropdown-background, #ffffff);border:1px solid var(--kritzel-global-border-color, #ebebeb);border-radius:var(--kritzel-dropdown-menu-border-radius, var(--kritzel-dropdown-border-radius, 6px));box-shadow:var(--kritzel-controls-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));z-index:1000;max-height:240px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;outline:none}.dropdown-menu.open-down{top:calc(100% + 4px);bottom:auto;transform:translateY(-8px)}.dropdown-menu.open-up{bottom:calc(100% + 4px);top:auto;transform:translateY(8px)}.dropdown-menu.is-open{opacity:1;visibility:inherit;transform:translateY(0)}.dropdown-menu.open-up{box-shadow:var(--kritzel-controls-box-shadow, 0 -4px 12px rgba(0, 0, 0, 0.15))}.dropdown-option{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-dropdown-text-color, #333333);transition:background-color 0.1s ease;-webkit-tap-highlight-color:transparent}.dropdown-option.is-focused{background-color:var(--kritzel-dropdown-hover-background-color, #f0f0f0)}.dropdown-option.is-selected{font-weight:600;background-color:var(--kritzel-dropdown-selected-background-color, #007bff1a)}.dropdown-option-check{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--kritzel-dropdown-accent-color, #007bff)}.dropdown-option-check svg{width:100%;height:100%}.dropdown-menu{scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}::slotted(*){height:100%;box-sizing:border-box}`;
1846
1846
 
1847
1847
  const KritzelDropdown = class {
1848
1848
  constructor(hostRef) {
@@ -2080,7 +2080,7 @@ const KritzelDropdown = class {
2080
2080
  'open-up': this.openDirection === 'up',
2081
2081
  'open-down': this.openDirection === 'down',
2082
2082
  };
2083
- return (h(Host, { key: 'c606b338e55dc66396105fa7b4fbdf372f3866e6' }, h("div", { key: 'aa32b73cac337fa4142ecc124cf039a59e3b3118', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, h("slot", { key: '2cd8e9ef246a24c49d58f76f227f36aed4786178', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), h("div", { key: '80df8155e1907017d508e92f155bab5ae12dffab', class: "dropdown-container", style: { width: this.width } }, h("button", { key: 'd86463de7ec58248f1611d6b5d46f0eafc117f36', type: "button", class: triggerClasses, style: { ...this.selectStyles, ...this.getSelectedStyle() }, onClick: this.toggleMenu, onKeyDown: this.handleTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', ref: el => (this.triggerElement = el) }, h("span", { key: '4ef6a997f7a781fb409e97ed5bd6843d0eaff0bb', class: "dropdown-trigger-label" }, this.getSelectedLabel()), h("span", { key: '6601efcd69d84af1f022d14ede628bac743cc1f1', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, h("svg", { key: '6cb2efe7b4ca890562c10b0e24eb1dfdad90ec24', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: 'a340af5a61dccf5bc29c8a473726b58055c2e9db', points: "6 9 12 15 18 9" }))))), h("slot", { key: '5bd4e5ad4cc4642c7769ecac2106ba82bae626f2', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), h("ul", { key: 'e7a2be8ac261bc5fa1450940e2a57090d6be3315', class: menuClasses, role: "listbox", tabindex: "-1", onKeyDown: this.handleMenuKeyDown, ref: el => (this.menuElement = el) }, this.options.map((option, index) => {
2083
+ return (h(Host, { key: '66ec6cbffa9fd25a7bad62d6e3477c0fe7726861' }, h("div", { key: '6dc1f20070dde95ab54f44d158659e99bd81b834', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, h("slot", { key: 'd9655fc7f5e6a0d74b4a1904a12cc0bf478ccf4e', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), h("div", { key: '325af053df9588e99b493c422a1f369f0af2243a', class: "dropdown-container", style: { width: this.width } }, h("button", { key: '626d54cd8e01221b1cd61e61b9d53b534e7603db', type: "button", class: triggerClasses, style: { ...this.selectStyles, ...this.getSelectedStyle() }, onClick: this.toggleMenu, onKeyDown: this.handleTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', ref: el => (this.triggerElement = el) }, h("span", { key: 'bbc3ec7297ee98c1903cfd547ca20daf3a5f1311', class: "dropdown-trigger-label" }, this.getSelectedLabel()), h("span", { key: '591b71aec72d2e6eaa96e8eb4c91b1f34eb2177a', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, h("svg", { key: '317034d40ceab9ca72090f6a58fc0fa5b92f2db0', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '98867959ff1d7fd5515a3fe400bdc2378013dcb9', points: "6 9 12 15 18 9" }))))), h("slot", { key: 'f9d2f73f7b233a30f57ba4a9209e1a32a8ee5e70', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), h("ul", { key: 'f15048910c0d24855fb1e940d2adc994dee83d06', class: menuClasses, role: "listbox", tabindex: "-1", onKeyDown: this.handleMenuKeyDown, ref: el => (this.menuElement = el) }, this.options.map((option, index) => {
2084
2084
  const isSelected = option.value === this.internalValue;
2085
2085
  const isFocused = index === this.focusedIndex;
2086
2086
  const optionClasses = {
@@ -2127,7 +2127,7 @@ const DEFAULT_SYNC_CONFIG = {
2127
2127
  providers: [IndexedDBSyncProvider],
2128
2128
  };
2129
2129
 
2130
- const kritzelEditorCss = () => `kritzel-editor{display:flex;margin:0;position:relative;container-type:inline-size;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:start;line-height:normal}.editor-content{position:absolute;inset:0}.editor-content>kritzel-engine{position:absolute;inset:0;z-index:0}kritzel-controls{position:absolute;z-index:2;left:0;right:0;margin-inline:auto;width:max-content;max-width:calc(100% - 16px);bottom:var(--kritzel-editor-controls-bottom, 14px);transition:transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out)}kritzel-controls.keyboard-open{transform:var(--kritzel-editor-controls-transform, translateY(300%))}.top-left-buttons{position:absolute;z-index:2;top:var(--kritzel-editor-top-left-buttons-top, 14px);left:var(--kritzel-editor-top-left-buttons-left, 14px);display:flex;align-items:flex-start;gap:8px}.top-center-notification-layer{position:absolute;top:var(--kritzel-editor-top-center-notification-top, 14px);left:0;right:0;z-index:var(--kritzel-editor-top-center-notification-z-index, 10001);display:flex;justify-content:center;pointer-events:none}.top-center-notification-container{width:min(90vw, 420px);pointer-events:auto;animation:kritzel-notification-slide-in var(--kritzel-editor-notification-animation-duration, 220ms) var(--kritzel-editor-notification-animation-easing, cubic-bezier(0.22, 1, 0.36, 1))}.top-center-notification-container.is-dismissing{animation:kritzel-notification-fade-out var(--kritzel-editor-notification-dismiss-animation-duration, 180ms) var(--kritzel-editor-notification-dismiss-animation-easing, ease-in) forwards}@keyframes kritzel-notification-slide-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes kritzel-notification-fade-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-6px)}}@media (prefers-reduced-motion: reduce){.top-center-notification-container{animation:none}}.top-right-buttons{position:absolute;z-index:2;top:var(--kritzel-editor-top-right-buttons-top, 14px);right:var(--kritzel-editor-top-right-buttons-right, 14px);display:flex;align-items:center;gap:8px}.bottom-left-buttons{position:absolute;z-index:2;left:var(--kritzel-editor-top-left-buttons-left, 14px);bottom:var(--kritzel-editor-controls-bottom, 14px);display:flex;align-items:flex-end}@container (max-width: 767px){.bottom-left-buttons{display:none}}.top-right-button{display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;border:var(--kritzel-split-button-border, 1px solid #ebebeb);border-radius:var(--kritzel-split-button-border-radius, 12px);background-color:var(--kritzel-split-button-background-color, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent}.top-right-button:hover{background-color:#f5f5f5}.top-right-button:active{background-color:#ebebeb}`;
2130
+ const kritzelEditorCss = () => `kritzel-editor{display:flex;margin:0;position:relative;container-type:inline-size;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:start;line-height:normal}.editor-content{position:absolute;inset:0}.editor-content>kritzel-engine{position:absolute;inset:0;z-index:0}kritzel-controls{position:absolute;z-index:2;left:0;right:0;margin-inline:auto;width:max-content;max-width:calc(100% - 16px);bottom:var(--kritzel-editor-controls-bottom, 14px);transition:transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out)}kritzel-controls.keyboard-open{transform:var(--kritzel-editor-controls-transform, translateY(300%))}.top-left-buttons{position:absolute;z-index:2;top:var(--kritzel-editor-top-left-buttons-top, 14px);left:var(--kritzel-editor-top-left-buttons-left, 14px);display:flex;align-items:flex-start;gap:8px}.top-center-notification-layer{position:absolute;top:var(--kritzel-editor-top-center-notification-top, 14px);left:0;right:0;z-index:var(--kritzel-editor-top-center-notification-z-index, 10001);display:flex;justify-content:center;pointer-events:none}.top-center-notification-container{width:min(90vw, 420px);pointer-events:auto;animation:kritzel-notification-slide-in var(--kritzel-editor-notification-animation-duration, 220ms) var(--kritzel-editor-notification-animation-easing, cubic-bezier(0.22, 1, 0.36, 1))}.top-center-notification-container.is-dismissing{animation:kritzel-notification-fade-out var(--kritzel-editor-notification-dismiss-animation-duration, 180ms) var(--kritzel-editor-notification-dismiss-animation-easing, ease-in) forwards}@keyframes kritzel-notification-slide-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes kritzel-notification-fade-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-6px)}}@media (prefers-reduced-motion: reduce){.top-center-notification-container{animation:none}}.top-right-buttons{position:absolute;z-index:2;top:var(--kritzel-editor-top-right-buttons-top, 14px);right:var(--kritzel-editor-top-right-buttons-right, 14px);display:flex;align-items:center;gap:8px}.bottom-left-buttons{position:absolute;z-index:2;left:var(--kritzel-editor-top-left-buttons-left, 14px);bottom:var(--kritzel-editor-controls-bottom, 14px);display:flex;align-items:flex-end}@container (max-width: 767px){.bottom-left-buttons{display:none}}.top-right-button{display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;border:var(--kritzel-split-button-border, 1px solid #ebebeb);border-radius:var(--kritzel-split-button-border-radius, 12px);background-color:var(--kritzel-split-button-background-color, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent}.top-right-button:hover{background-color:#f5f5f5}.top-right-button:active{background-color:#ebebeb}`;
2131
2131
 
2132
2132
  const KritzelEditor = class {
2133
2133
  constructor(hostRef) {
@@ -3246,40 +3246,40 @@ const KritzelEditor = class {
3246
3246
  const isLoggedIn = this.isLoggedIn;
3247
3247
  const shouldShowCurrentUser = isLoggedIn;
3248
3248
  const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
3249
- return (h(Host, { key: '247f9ad977943d29333094737c8904253ccab5c7' }, h("div", { key: 'e14e57a04ca7138690a4893f2ac14140e0532fd2', class: "editor-content", style: {
3249
+ return (h(Host, { key: 'de17d63781eceb382671cd545b94c20b50ff7dae' }, h("div", { key: '03387343adfffaca523691b14a4eefe9f7cea50d', class: "editor-content", style: {
3250
3250
  opacity: this.isEditorVisible ? '1' : '0',
3251
3251
  visibility: this.isEditorVisible ? 'visible' : 'hidden',
3252
3252
  transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out',
3253
- } }, h("div", { key: 'd9304408c6336c4b742b0e44d4a6d4dda5b2fad6', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'f44ca859cd70828c77a92607cbe5b9c26fd4a203', 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: '1c65e5fbcc34dd43b7986f6177b8eab2bd709ad8', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: '2f7715f5c7c128ec63f2fe60c508543db7dd571c', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: '357014e172134af3a3d35af9978d14d23fadf7e3', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, h("kritzel-notification-card", { key: '3962a562a8fc10b2bbdc1c8dd741a057e9e6df29', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), this.contextMenuState && this.contextMenuState.items.length > 0 && (h("kritzel-context-menu", { key: '669e6dae09d52e87dc22aa536f6f564f725f6c34', class: "context-menu", items: this.contextMenuState.items, objects: this.contextMenuState.objects, style: {
3253
+ } }, h("div", { key: '433adc2d09490470d954eedde3dc180f721b815d', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: '7706cea4aba3cd56d31ca13f8a6c4f65418229d3', 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: '589e324ddd53bda04883de56768c08d4e2b51ac8', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: '766bb40ecfe9ee4ed0ea58af2b9b5f3cacc43c03', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: '3fc7f19c53c8ef6b3cf9e4f1939c3bc9fba83f19', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, h("kritzel-notification-card", { key: 'a50e340d3a0f897778e9ced24cf1e5410800629c', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), this.contextMenuState && this.contextMenuState.items.length > 0 && (h("kritzel-context-menu", { key: 'e26779ff79b5609fc4a2003486f988818a9ee28f', class: "context-menu", items: this.contextMenuState.items, objects: this.contextMenuState.objects, style: {
3254
3254
  position: 'absolute',
3255
3255
  left: `${this.contextMenuState.position.x}px`,
3256
3256
  top: `${this.contextMenuState.position.y}px`,
3257
3257
  zIndex: '10002',
3258
- }, onActionSelected: event => this.handleContextMenuActionSelected(event), onClose: () => this.hideContextMenu() })), h("kritzel-loading-overlay", { key: '40a32849c45b9b8240b3be427579cb6a6c63fa97', visible: this.isLoadingOverlayVisible, text: this.resolvedTerms['editor.loading'] ?? 'Loading...' }), h("kritzel-engine", { key: '424ec83a0e8e9c8174cd12439fff2b49898b8016', ref: el => {
3258
+ }, onActionSelected: event => this.handleContextMenuActionSelected(event), onClose: () => this.hideContextMenu() })), h("kritzel-loading-overlay", { key: '6202bc489367e704c07eb3c4645193b62093da4a', visible: this.isLoadingOverlayVisible, text: this.resolvedTerms['editor.loading'] ?? 'Loading...' }), h("kritzel-engine", { key: 'fbeadf5c1f4525f0562b53d8cf7ec1ba562b1ccb', ref: el => {
3259
3259
  if (el) {
3260
3260
  this.engineRef = el;
3261
3261
  }
3262
- }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, 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), onContextMenuStateChange: event => this.handleContextMenuStateChange(event), onIsLoadingChange: event => this.handleIsLoadingChange(event) }), h("kritzel-controls", { key: 'e224d9cde14effc67b07f1f18597f45e3dc6d808', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
3262
+ }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, 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), onContextMenuStateChange: event => this.handleContextMenuStateChange(event), onIsLoadingChange: event => this.handleIsLoadingChange(event) }), h("kritzel-controls", { key: 'af180f15c0dfc6941f2f4e90d576869ec14ea088', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
3263
3263
  if (el) {
3264
3264
  this.controlsRef = el;
3265
3265
  }
3266
- }, controls: this.normalizedControls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: '767b369fd2b55329d953d8c55ea897c35b921584', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: 'abaa0a55d433fa1740071f32f8dfc1854c6ed157', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: 'eb9e71d97b2b4663f02a17022494d353fa4f877e', class: "top-right-buttons" }, h("kritzel-settings", { key: '10ef2f68f90a6ceb3ce0a3110245c58da7ee2492', ref: el => {
3266
+ }, controls: this.normalizedControls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'b6d25bd6bed1cc4e946e8363bdbaa861604e7503', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: '97764dd63bfbfabe94d006f67541dabfe19afce2', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: '474f102cbf104a9efc7126703d27fd8918811330', class: "top-right-buttons" }, h("kritzel-settings", { key: 'd472673293acbbca4b45ede7052e45c3bdec1d33', ref: el => {
3267
3267
  if (el) {
3268
3268
  this.settingsRef = el;
3269
3269
  }
3270
- }, 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: 'd72b5006a608570c26a2981d03f4d15e9b0c8b30', ref: el => {
3270
+ }, 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: '5be72e78e161c67962785eb9e290d48a233036ba', ref: el => {
3271
3271
  if (el) {
3272
3272
  this.exportRef = el;
3273
3273
  }
3274
- }, 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: 'cceafd7ae3f289edb351af4e614afca2385e196a', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '042fc9ce8487ea463f0ee77a5749786ed2931f07', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (h("kritzel-current-user-dialog", { key: '7cce7677fbae0a1b897b2135f50e017df5409d32', ref: el => {
3274
+ }, 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: 'f5a31665d21f1f287094ddd84b108a7803e99aaf', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: 'af995a8f06dab87bb66b5d4d677ecc93b5d8b238', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (h("kritzel-current-user-dialog", { key: 'e673867887f4eb38efe521da24cf2c3dbd8e5f3f', ref: el => {
3275
3275
  if (el) {
3276
3276
  this.currentUserDialogRef = el;
3277
3277
  }
3278
- }, user: this.user, terms: this.resolvedTerms, onLogoutRequest: this.handleCurrentUserLogout })), shouldShowLoginButton && h("kritzel-button", { key: '97cf48d83804dfa5220ce38500af3f96687354d2', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in'), h("kritzel-more-menu", { key: '40a757fe355666e9306f2224d9ed9bf2c9b58f7a', items: this.resolvedMoreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: 'abb85b65a9d6196be701d35cbdf8bc3003d36bfe', ref: el => {
3278
+ }, user: this.user, terms: this.resolvedTerms, onLogoutRequest: this.handleCurrentUserLogout })), shouldShowLoginButton && h("kritzel-button", { key: 'f9cc165b4de54a8be293b5fadc86edfdc8839b3a', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in'), h("kritzel-more-menu", { key: '2eed14c8d895b6a89ac2f9e8e4fe55f1e39a4956', items: this.resolvedMoreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: '5f38124c291a8645a1b999d8d3a067fe7bf8d4e3', ref: el => {
3279
3279
  if (el) {
3280
3280
  this.shareDialogRef = el;
3281
3281
  }
3282
- }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '6e8c86420a447b182bcbc23415d64a7fcb32a4a8', ref: el => {
3282
+ }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: 'f7685dff9d664e00a16dfd4811cfe0a44cdd5015', ref: el => {
3283
3283
  if (el) {
3284
3284
  this.loginDialogRef = el;
3285
3285
  }
@@ -27088,8 +27088,8 @@ class KritzelSvgExportHelper {
27088
27088
  .join('\n ');
27089
27089
  const xmlDecl = includeXmlDeclaration ? '<?xml version="1.0" encoding="UTF-8"?>\n' : '';
27090
27090
  const defsContent = defs.length > 0 ? `\n <defs>\n ${defs.join('\n ')}\n </defs>` : '';
27091
- return `${xmlDecl}<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}" width="${viewBoxWidth}" height="${viewBoxHeight}">${defsContent}
27092
- ${elements}
27091
+ return `${xmlDecl}<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}" width="${viewBoxWidth}" height="${viewBoxHeight}">${defsContent}
27092
+ ${elements}
27093
27093
  </svg>`;
27094
27094
  }
27095
27095
  /**
@@ -27241,8 +27241,8 @@ class KritzelSvgExportHelper {
27241
27241
  const orient = end === 'start' ? 'auto-start-reverse' : 'auto';
27242
27242
  const refX = 0;
27243
27243
  const refY = size / 2;
27244
- return `<marker id="${markerId}" markerWidth="${size}" markerHeight="${size}" refX="${refX}" refY="${refY}" orient="${orient}" markerUnits="userSpaceOnUse">
27245
- <path d="${path}" fill="${fill}" transform="scale(${size / 10})"/>
27244
+ return `<marker id="${markerId}" markerWidth="${size}" markerHeight="${size}" refX="${refX}" refY="${refY}" orient="${orient}" markerUnits="userSpaceOnUse">
27245
+ <path d="${path}" fill="${fill}" transform="scale(${size / 10})"/>
27246
27246
  </marker>`;
27247
27247
  }
27248
27248
  /**
@@ -27289,10 +27289,10 @@ class KritzelSvgExportHelper {
27289
27289
  const opacity = path.opacity !== 1 ? ` opacity="${path.opacity}"` : '';
27290
27290
  const scale = this.getObjectScale(path);
27291
27291
  // Path needs to be wrapped in a g with translation since path.d uses local coordinates
27292
- return `<g transform="${transform}"${opacity}>
27293
- <svg viewBox="${path.viewBox}" width="${path.totalWidth / scale}" height="${path.totalHeight / scale}" overflow="visible">
27294
- <path d="${path.d}" fill="${fill || 'none'}" stroke="${stroke || 'none'}"${path.strokeWidth ? ` stroke-width="${path.strokeWidth}"` : ''}/>
27295
- </svg>
27292
+ return `<g transform="${transform}"${opacity}>
27293
+ <svg viewBox="${path.viewBox}" width="${path.totalWidth / scale}" height="${path.totalHeight / scale}" overflow="visible">
27294
+ <path d="${path.d}" fill="${fill || 'none'}" stroke="${stroke || 'none'}"${path.strokeWidth ? ` stroke-width="${path.strokeWidth}"` : ''}/>
27295
+ </svg>
27296
27296
  </g>`;
27297
27297
  }
27298
27298
  /**
@@ -27308,10 +27308,10 @@ class KritzelSvgExportHelper {
27308
27308
  const scale = this.getObjectScale(line);
27309
27309
  const markerStart = line.hasStartArrow ? ` marker-start="url(#${line.startMarkerId})"` : '';
27310
27310
  const markerEnd = line.hasEndArrow ? ` marker-end="url(#${line.endMarkerId})"` : '';
27311
- return `<g transform="${transform}"${opacity}>
27312
- <svg viewBox="${line.viewBox}" width="${line.totalWidth / scale}" height="${line.totalHeight / scale}" overflow="visible">
27313
- <path d="${line.d}" fill="none" stroke="${stroke}" stroke-width="${line.strokeWidth}" stroke-linecap="round"${markerStart}${markerEnd}/>
27314
- </svg>
27311
+ return `<g transform="${transform}"${opacity}>
27312
+ <svg viewBox="${line.viewBox}" width="${line.totalWidth / scale}" height="${line.totalHeight / scale}" overflow="visible">
27313
+ <path d="${line.d}" fill="none" stroke="${stroke}" stroke-width="${line.strokeWidth}" stroke-linecap="round"${markerStart}${markerEnd}/>
27314
+ </svg>
27315
27315
  </g>`;
27316
27316
  }
27317
27317
  /**
@@ -27335,18 +27335,18 @@ class KritzelSvgExportHelper {
27335
27335
  const textHtml = this.prosemirrorToHtml(shape.content, shape, theme);
27336
27336
  if (textHtml) {
27337
27337
  const fontColor = KritzelColorHelper.resolveThemeColor(shape.fontColor, theme);
27338
- textContent = `
27339
- <foreignObject x="${shape.x}" y="${shape.y}" width="${shape.width}" height="${shape.height}">
27340
- <div xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-family: ${shape.fontFamily}; font-size: ${shape.fontSize}px; color: ${fontColor}; overflow: hidden;">
27341
- ${textHtml}
27342
- </div>
27338
+ textContent = `
27339
+ <foreignObject x="${shape.x}" y="${shape.y}" width="${shape.width}" height="${shape.height}">
27340
+ <div xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-family: ${shape.fontFamily}; font-size: ${shape.fontSize}px; color: ${fontColor}; overflow: hidden;">
27341
+ ${textHtml}
27342
+ </div>
27343
27343
  </foreignObject>`;
27344
27344
  }
27345
27345
  }
27346
- return `<g transform="${transform}"${opacity}>
27347
- <svg viewBox="${shape.viewBox}" width="${shape.totalWidth / scale}" height="${shape.totalHeight / scale}" overflow="visible" preserveAspectRatio="none">
27348
- <path d="${pathD}" fill="${fill || 'transparent'}" stroke="${stroke}" stroke-width="${shape.strokeWidth}"/>${textContent}
27349
- </svg>
27346
+ return `<g transform="${transform}"${opacity}>
27347
+ <svg viewBox="${shape.viewBox}" width="${shape.totalWidth / scale}" height="${shape.totalHeight / scale}" overflow="visible" preserveAspectRatio="none">
27348
+ <path d="${pathD}" fill="${fill || 'transparent'}" stroke="${stroke}" stroke-width="${shape.strokeWidth}"/>${textContent}
27349
+ </svg>
27350
27350
  </g>`;
27351
27351
  }
27352
27352
  /**
@@ -27377,10 +27377,10 @@ class KritzelSvgExportHelper {
27377
27377
  // adjusted font-size already accounts for it – keeping both would double-scale
27378
27378
  // the content and overflow the foreignObject.
27379
27379
  const svgFontSizePx = (text.fontSize * (4 / 3) * (text.scaleFactor || 1) / scale).toFixed(4);
27380
- return `<g transform="${transform}"${opacity}>
27381
- <foreignObject x="0" y="0" width="${width}" height="${height}" overflow="visible">
27382
- <div xmlns="http://www.w3.org/1999/xhtml" style="font-family: ${text.fontFamily}; font-size: ${svgFontSizePx}px; color: ${fontColor}; background-color: ${bgColor || 'transparent'}; white-space: pre-wrap; word-wrap: break-word; width: 100%; margin: 0; padding: 0; box-sizing: border-box;">${htmlContent.trim()}</div>
27383
- </foreignObject>
27380
+ return `<g transform="${transform}"${opacity}>
27381
+ <foreignObject x="0" y="0" width="${width}" height="${height}" overflow="visible">
27382
+ <div xmlns="http://www.w3.org/1999/xhtml" style="font-family: ${text.fontFamily}; font-size: ${svgFontSizePx}px; color: ${fontColor}; background-color: ${bgColor || 'transparent'}; white-space: pre-wrap; word-wrap: break-word; width: 100%; margin: 0; padding: 0; box-sizing: border-box;">${htmlContent.trim()}</div>
27383
+ </foreignObject>
27384
27384
  </g>`;
27385
27385
  }
27386
27386
  /**
@@ -27414,9 +27414,9 @@ class KritzelSvgExportHelper {
27414
27414
  return `<tspan x="0" y="${y}" xml:space="preserve">${this.escapeHtml(line)}</tspan>`;
27415
27415
  })
27416
27416
  .join('');
27417
- return `<g transform="${transform}"${opacity}>
27418
- ${bgRect}
27419
- <text font-family="${this.escapeHtml(text.fontFamily)}" font-size="${resolvedFontSizePx}" fill="${fontColor}">${tspans}</text>
27417
+ return `<g transform="${transform}"${opacity}>
27418
+ ${bgRect}
27419
+ <text font-family="${this.escapeHtml(text.fontFamily)}" font-size="${resolvedFontSizePx}" fill="${fontColor}">${tspans}</text>
27420
27420
  </g>`;
27421
27421
  }
27422
27422
  /**
@@ -27444,8 +27444,8 @@ class KritzelSvgExportHelper {
27444
27444
  const width = image.totalWidth / scale;
27445
27445
  const height = image.totalHeight / scale;
27446
27446
  const href = imageDataUrls?.get(image.id) || image.resolvedSrc || image.src || '';
27447
- return `<g transform="${transform}"${opacity}>
27448
- <image href="${href}" x="0" y="0" width="${width}" height="${height}" preserveAspectRatio="xMidYMid meet"/>
27447
+ return `<g transform="${transform}"${opacity}>
27448
+ <image href="${href}" x="0" y="0" width="${width}" height="${height}" preserveAspectRatio="xMidYMid meet"/>
27449
27449
  </g>`;
27450
27450
  }
27451
27451
  /**
@@ -27465,19 +27465,19 @@ class KritzelSvgExportHelper {
27465
27465
  if (rasterSafeForCanvas) {
27466
27466
  // PNG export: render placeholder rect (foreignObject doesn't rasterize to PNG well)
27467
27467
  console.warn('[KritzelCustomElement SVG Export] Custom elements do not serialize well to PNG. Use SVG export or screenshot instead.');
27468
- return `<g transform="${transform}"${opacity}>
27469
- <rect x="0" y="0" width="${width}" height="${height}" fill="#f0f0f0" stroke="#999" stroke-width="1" />
27470
- <text x="${width / 2}" y="${height / 2}" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#999">[Custom Element]</text>
27468
+ return `<g transform="${transform}"${opacity}>
27469
+ <rect x="0" y="0" width="${width}" height="${height}" fill="#f0f0f0" stroke="#999" stroke-width="1" />
27470
+ <text x="${width / 2}" y="${height / 2}" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#999">[Custom Element]</text>
27471
27471
  </g>`;
27472
27472
  }
27473
27473
  // SVG export: use foreignObject to embed HTML
27474
27474
  const html = obj.element?.outerHTML || '<div style="border:1px dashed #ccc">Empty</div>';
27475
- return `<g transform="${transform}"${opacity}>
27476
- <foreignObject x="0" y="0" width="${width}" height="${height}">
27477
- <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;overflow:hidden;">
27478
- ${html}
27479
- </div>
27480
- </foreignObject>
27475
+ return `<g transform="${transform}"${opacity}>
27476
+ <foreignObject x="0" y="0" width="${width}" height="${height}">
27477
+ <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;overflow:hidden;">
27478
+ ${html}
27479
+ </div>
27480
+ </foreignObject>
27481
27481
  </g>`;
27482
27482
  }
27483
27483
  /**
@@ -27497,8 +27497,8 @@ class KritzelSvgExportHelper {
27497
27497
  return '';
27498
27498
  }
27499
27499
  const opacity = group.opacity !== 1 ? ` opacity="${group.opacity}"` : '';
27500
- return `<g${opacity}>
27501
- ${children}
27500
+ return `<g${opacity}>
27501
+ ${children}
27502
27502
  </g>`;
27503
27503
  }
27504
27504
  /**
@@ -30658,7 +30658,7 @@ const KritzelExport = class {
30658
30658
  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 })));
30659
30659
  }
30660
30660
  render() {
30661
- return (h(Host, { key: '61ce7589d0453a1bd9fde8f33a711e06225eacde' }, h("kritzel-dialog", { key: '48da046edabdb5659b6edefaca56adb7531f9862', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: 'b7afc64ad1f558a78aa68c07b4dec65e6ca21c67', class: "export-content" }, h("kritzel-pill-tabs", { key: '59f759ade5a590eda6ba87f89eb433ced62da0cd', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport()), h("div", { key: 'a38bf30c9c5256d417cd3b0baf743e245a8cf3e4', slot: "footer" }, h("button", { key: '3dc9c53416ff9c8ca47df003f41767a2143fa4ef', class: "export-primary-button", onClick: this.handleExport }, this.terms['export.exportButton'] ?? 'Export')))));
30661
+ return (h(Host, { key: '495d4e2ab6dd72661a1046308867b4b8dd8cf0ea' }, h("kritzel-dialog", { key: '616ec1d660c7bdceb6bb4b4ab1190691708059a9', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: 'eca5698b79848cac0e9fc4f13858c8382dd9cae4', class: "export-content" }, h("kritzel-pill-tabs", { key: '3b1d63d270aa29ab08e8a3021b8c0ee23c9076e7', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport()), h("div", { key: 'e5473f00fd9481452426966b5e410afdf3ee8b5a', slot: "footer" }, h("button", { key: 'c799c614e17877fb608445728c547ce2ba6673ab', class: "export-primary-button", onClick: this.handleExport }, this.terms['export.exportButton'] ?? 'Export')))));
30662
30662
  }
30663
30663
  };
30664
30664
  KritzelExport.style = kritzelExportCss();
@@ -30673,7 +30673,7 @@ const KritzelFont = class {
30673
30673
  size = 24;
30674
30674
  color = '#000000';
30675
30675
  render() {
30676
- return (h(Host, { key: '08ef3f41967f34f17cbbc42982b0edbb59edb2e2' }, h("div", { key: 'dc7b64d53dbee634a2da068c618a352e6b43bea7', class: "font-preview", style: {
30676
+ return (h(Host, { key: 'f21767de01c3bcb66832ca66b35507d241f6ed5e' }, h("div", { key: 'a2986382e2d65aa7f56be5b77518bd3be4a2f5c5', class: "font-preview", style: {
30677
30677
  fontFamily: this.fontFamily,
30678
30678
  fontSize: `${this.size}px`,
30679
30679
  color: this.color
@@ -30723,7 +30723,7 @@ const KritzelFontFamily = class {
30723
30723
  label: option.label,
30724
30724
  style: { fontFamily: option.cssFontFamily ?? option.value },
30725
30725
  }));
30726
- return (h(Host, { key: '059350f34370f7a291f47a42721ca5d9bb82df49' }, h("kritzel-dropdown", { key: 'fbd8cf1ae463c7e9b76d0ac754a41de54397058e', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: selectedFontFamily } })));
30726
+ return (h(Host, { key: '42b2805b1d2df47a1b2336dffac32ee50740809e' }, h("kritzel-dropdown", { key: '3e1f019b2ecacea061f687c93f4fdd6a384b93b7', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: selectedFontFamily } })));
30727
30727
  }
30728
30728
  static get watchers() { return {
30729
30729
  "fontOptions": [{
@@ -30757,7 +30757,7 @@ const KritzelFontSize = class {
30757
30757
  render() {
30758
30758
  const color = 'var(--kritzel-global-text-primary)';
30759
30759
  const sizes = this.sizes ?? [];
30760
- return (h(Host, { key: 'c49be084faa8b5eb380ba9bc3382ba8404853e20' }, sizes.map(size => (h("div", { tabIndex: 0, class: {
30760
+ return (h(Host, { key: 'fb1ccc9ae97e997b8d19fda3350913c54ae109b4' }, sizes.map(size => (h("div", { tabIndex: 0, class: {
30761
30761
  'size-container': true,
30762
30762
  'selected': this.selectedSize === size,
30763
30763
  }, onClick: () => this.handleSizeClick(size), onKeyDown: event => this.handleKeyDown(event, size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size, color: color }))))));
@@ -30824,7 +30824,7 @@ const KritzelInput = class {
30824
30824
  this.valueChange.emit(input.value);
30825
30825
  };
30826
30826
  render() {
30827
- return (h(Host, { key: '92393344834011156bda2f682e559e7806864d19' }, h("div", { key: '5d569b8746d9285701259979ec554dbb41df4490', class: "input-container" }, this.label && h("label", { key: 'a27844d3da23d353b0ea2dede3c664fdbcbb6aab', class: "input-label" }, this.label), h("div", { key: 'fab4f3f1bda07c78f39ea96ba87c42be5de08286', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, h("input", { key: '4294687bc9f6006b0b64427c111af08d82ad5ffd', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && h("span", { key: '83adbd2978c92e969fedd9ad75f2c89b017b31a5', class: "input-suffix" }, this.suffix)))));
30827
+ return (h(Host, { key: '9fede62dc5fb2a98e6d01b90ba8badaeb7ce8179' }, h("div", { key: '117a70a874294cfeac95c1d8e5174f6fe5baaca0', class: "input-container" }, this.label && h("label", { key: 'afc0938751e56eb3684c41b28f6fb9fedf7c9849', class: "input-label" }, this.label), h("div", { key: 'fa51b324fa55b20bc3249437edbfffb9b9e86256', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, h("input", { key: 'ff716c017ce3f57f9a494cac2c5c3a4fa39577b5', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && h("span", { key: '5e3aed8888b1581a31f240c7b8c00b741931a5c5', class: "input-suffix" }, this.suffix)))));
30828
30828
  }
30829
30829
  static get watchers() { return {
30830
30830
  "value": [{
@@ -30906,10 +30906,10 @@ const KritzelLineEndings = class {
30906
30906
  render() {
30907
30907
  const startEnding = this.getStartEnding();
30908
30908
  const endEnding = this.getEndEnding();
30909
- return (h(Host, { key: '60115b8a2840ffe21e0846fdc2678c6ba24b22c0' }, h("div", { key: '3b63aa05ca78699172c645fdd404efdc55bc4536', class: "endings-section" }, h("div", { key: '9538369e8d2bb26600d6054ddbbc13d6c960bd56', class: "endings-row" }, this.styles.map(type => (h("button", { class: {
30909
+ return (h(Host, { key: '81e3262408d26a06acb2677698832b89651292a1' }, h("div", { key: '85c67f948075b2d58abfbd9d168a84c89554e81f', class: "endings-section" }, h("div", { key: 'd10a0b1c58fd06926a83cd78e213417aca28d01c', class: "endings-row" }, this.styles.map(type => (h("button", { class: {
30910
30910
  'ending-option': true,
30911
30911
  'selected': startEnding === type,
30912
- }, onClick: () => this.handleStartChange(type), title: type === 'none' ? 'No start arrow' : `${type} start arrow` }, this.renderEndingIcon(type, true)))))), h("div", { key: 'ecec29740c09a61190938bab4955ccde6b84cfa2', class: "endings-section" }, h("div", { key: 'ea054597c3e3566e7921f2c04c07d74e4f4331a1', class: "endings-row" }, this.styles.map(type => (h("button", { class: {
30912
+ }, onClick: () => this.handleStartChange(type), title: type === 'none' ? 'No start arrow' : `${type} start arrow` }, this.renderEndingIcon(type, true)))))), h("div", { key: 'fd99875f3cefa8c4e36e106e836088fa61c75432', class: "endings-section" }, h("div", { key: 'dbcd0a32f278cc0d0317913827034f912a14d2b4', class: "endings-row" }, this.styles.map(type => (h("button", { class: {
30913
30913
  'ending-option': true,
30914
30914
  'selected': endEnding === type,
30915
30915
  }, onClick: () => this.handleEndChange(type), title: type === 'none' ? 'No end arrow' : `${type} end arrow` }, this.renderEndingIcon(type, false))))))));
@@ -30917,7 +30917,7 @@ const KritzelLineEndings = class {
30917
30917
  };
30918
30918
  KritzelLineEndings.style = kritzelLineEndingsCss();
30919
30919
 
30920
- 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)}}`;
30920
+ 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)}}`;
30921
30921
 
30922
30922
  const KritzelLoadingOverlay = class {
30923
30923
  constructor(hostRef) {
@@ -30932,7 +30932,7 @@ const KritzelLoadingOverlay = class {
30932
30932
  */
30933
30933
  text = 'Loading...';
30934
30934
  render() {
30935
- return (h(Host, { key: '6795ffc47d57a27f0b58fb42715080bf47c836af' }, h("div", { key: '5359411fa326444a1bddf6f40a6e2bd0ccf1617d', class: { 'loading-overlay': true, visible: this.visible }, "aria-hidden": this.visible ? 'false' : 'true' }, h("span", { key: 'bd194c6fef9f2fbc4a4e38aee169d0a754e5dc96', class: "loading-spinner" }), this.text)));
30935
+ return (h(Host, { key: '57dcbaddf9f4f165bccb4affeb51305524bc3475' }, h("div", { key: '70092807eee43133de15793886ab4217eb64b846', class: { 'loading-overlay': true, visible: this.visible }, "aria-hidden": this.visible ? 'false' : 'true' }, h("span", { key: 'a8dee6ae64b8f7f979c54cbb3370311c26b8b28b', class: "loading-spinner" }), this.text)));
30936
30936
  }
30937
30937
  };
30938
30938
  KritzelLoadingOverlay.style = kritzelLoadingOverlayCss();
@@ -30984,7 +30984,7 @@ const KritzelLoginDialog = class {
30984
30984
  this.dialogClosed.emit();
30985
30985
  };
30986
30986
  render() {
30987
- return (h(Host, { key: '17fe69ac34171a95bec92dcabc3196fe77549ede' }, h("kritzel-dialog", { key: '38ea1c3ed74675b21456cf8c1bfe1b97be029bf4', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '63b04f629c2d09a1ce6aeab90118bcac50d59fbc', class: "login-content" }, this.subtitle && (h("p", { key: '641597f030c268f2ffc90c914e53fd00fc131c74', class: "login-subtitle" }, this.subtitle)), h("div", { key: 'f36dc7b791d1beada21d7786c108319dedb516b9', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
30987
+ return (h(Host, { key: 'f964c3c57a99921d335384dcf6fcdc6d3bf3f78e' }, h("kritzel-dialog", { key: '5948afd7c79e292d9be6238f2aff44a93d9d124c', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '4e3ce9738e92c7c4184a8dd818e25f08ec201e5d', class: "login-content" }, this.subtitle && (h("p", { key: '2b2abf69302e5381479d48107bbfb4cdb17b7470', class: "login-subtitle" }, this.subtitle)), h("div", { key: '7c3d3b315cf1d9fcf1575c57480c99a8a097a545', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
30988
30988
  'provider-button': true,
30989
30989
  'is-loading': this.loadingProvider === provider.name,
30990
30990
  'is-disabled': this.loadingProvider !== null && this.loadingProvider !== provider.name,
@@ -31090,15 +31090,15 @@ const KritzelMasterDetail = class {
31090
31090
  const selectedItem = this.items.find(item => item.id === this.selectedItemId);
31091
31091
  const panelId = 'master-detail-panel';
31092
31092
  const selectedTabId = selectedItem ? `tab-${selectedItem.id}` : undefined;
31093
- return (h(Host, { key: 'fc187266604f9d48210096a1574bf86482498a40' }, h("div", { key: '2886b386c6e96df671ff4902b2c9f7084f0c3191', class: {
31093
+ return (h(Host, { key: '12ed4886b6b4d8935823d1b80ad7acd29dfccb2a' }, h("div", { key: '1ff2d39a3773ffbd15f8988f3270e8062f546870', class: {
31094
31094
  'master-detail-container': true,
31095
31095
  'is-mobile-detail-visible': this.showMobileDetail,
31096
- } }, h("nav", { key: '94a35861b7c97d7f5f1505e4c25bc7f584c6351f', 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: {
31096
+ } }, h("nav", { key: 'ffeabf0df0568914ad5c101439892daea3dfcedc', 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: {
31097
31097
  'menu-item': true,
31098
31098
  'is-selected': item.id === this.selectedItemId,
31099
31099
  'is-disabled': !!item.disabled,
31100
31100
  'is-focused': index === this.focusedIndex,
31101
- }, 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: 'd55507c8e818314bd548506d1b568357062378db', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, h("button", { key: 'f7bf50b2ecd7093110ee0fc91d49caf468ee9116', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, h("kritzel-icon", { key: 'c809cea0d279439ced7a580ea2a4f44d5ec2b8b6', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), h("slot", { key: '78babf63e193db45e26ea6602ab09dde045bf06e' })))));
31101
+ }, 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: '8c35914271516f61dbd9e1da5109b7f289b752af', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, h("button", { key: 'f2d1891a42abc163e8b16b879a65801d3a99aa0b', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, h("kritzel-icon", { key: '8e59502816ec6051cbc4d1a462ead75502485ae9', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), h("slot", { key: '00d1d2a225d14474a23eb597e98124b0a9c0a369' })))));
31102
31102
  }
31103
31103
  static get watchers() { return {
31104
31104
  "selectedItemId": [{
@@ -31171,7 +31171,7 @@ const KritzelMenu = class {
31171
31171
  this.itemCloseChildMenu.emit(event.detail);
31172
31172
  };
31173
31173
  render() {
31174
- return (h(Host, { key: '0876a6a7e6dbb0daa984d228bac4c8b5d5790580', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: '499dde6694d7b98eb85d9bac314ab7ba2dcf1e71', 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 })))));
31174
+ return (h(Host, { key: '94d4324ed7e4c0db21bd647df470345e1aa218ea', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: '7223b9484ce9f2ffc0177d1249b13d97cb9acfde', 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 })))));
31175
31175
  }
31176
31176
  };
31177
31177
  KritzelMenu.style = kritzelMenuCss();
@@ -31276,12 +31276,12 @@ const KritzelMenuItem = class {
31276
31276
  ];
31277
31277
  }
31278
31278
  render() {
31279
- return (h(Host, { key: '40bfb2f086d24080276f27d879216958dff0388a', tabIndex: this.item.isDisabled ? -1 : 0, class: {
31279
+ return (h(Host, { key: '6c65413fe40115ed31536bba7b060b52e13bbcd3', tabIndex: this.item.isDisabled ? -1 : 0, class: {
31280
31280
  'selected': this.item.isSelected,
31281
31281
  'editing': this.item.isEditing,
31282
31282
  'disabled': this.item.isDisabled,
31283
31283
  'child-open': this.item.isChildMenuOpen,
31284
- }, onClick: this.handleItemSelect }, h("div", { key: '0aa55293dfc2cf1010c020f3f35ee3a3bd662c8a', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
31284
+ }, onClick: this.handleItemSelect }, h("div", { key: '2fcc8bd4c9ed7445e5c32c9d466975175657f11c', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
31285
31285
  }
31286
31286
  static get watchers() { return {
31287
31287
  "item": [{
@@ -31433,7 +31433,7 @@ const KritzelMoreMenu = class {
31433
31433
  this.closeMenu();
31434
31434
  };
31435
31435
  render() {
31436
- return (h(Host, { key: 'ac84e832614f37f51b00f351fe70cf679d53ef15', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, h("div", { key: 'a9ead49428833b9bbaf6cfa9a1550e6df514e3d5', class: { 'more-menu-wrapper': true, visible: this.visible } }, h("button", { key: 'ddf026728d5b3170faeb1b5e291e3e61b13711d5', class: "more-menu-button", "data-testid": "more-menu-button", onClick: this.toggleMenu, "aria-label": this.terms['moreMenu.ariaLabel'] ?? 'More options' }, h("kritzel-icon", { key: 'de7e442b32c755c890579e7254d2cc6dad8bc21a', name: this.icon, size: this.iconSize })), h("kritzel-portal", { key: 'a426494a65dfe42a1d9a2040dcf5202d2daee559', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, h("kritzel-menu", { key: '4b0ba21f8da0d4149ae52e752c6dd1c6fb4ac0cc', items: this.resolveMenuLabels(this.visibleItems), onItemSelect: this.handleMenuItemSelect })))));
31436
+ return (h(Host, { key: '9e8186973bb76bae0c742acf642a0cfc319d3489', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, h("div", { key: '7df4ae3c4234e47edac0c2bfad6163cfd4e3e842', class: { 'more-menu-wrapper': true, visible: this.visible } }, h("button", { key: '87ab50e192932130a1982ace26ba7d623471f6aa', class: "more-menu-button", "data-testid": "more-menu-button", onClick: this.toggleMenu, "aria-label": this.terms['moreMenu.ariaLabel'] ?? 'More options' }, h("kritzel-icon", { key: '2a62ed1579df2cb512d7b73aab93726e3610447f', name: this.icon, size: this.iconSize })), h("kritzel-portal", { key: '873a7ab1b46fc72dc65dfa0009b1e940d0d4c499', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, h("kritzel-menu", { key: '4fe817176a9d72c8a8368354394ab3d9b5e759f3', items: this.resolveMenuLabels(this.visibleItems), onItemSelect: this.handleMenuItemSelect })))));
31437
31437
  }
31438
31438
  static get watchers() { return {
31439
31439
  "items": [{
@@ -31605,7 +31605,7 @@ const KritzelNumericInput = class {
31605
31605
  this.valueChange.emit(newValue);
31606
31606
  };
31607
31607
  render() {
31608
- return (h(Host, { key: '5ebdff964290d1d7f334d7e42e69f2fa09484a27' }, h("div", { key: '8d41fd9c5ba68fbeb927e262d5c2fe61436dee0a', class: "input-container" }, this.label && h("label", { key: 'f1172074424465be27ce5c3b6c3326457daf7fdc', class: "input-label" }, this.label), h("div", { key: 'ffdea4c84fe026c3bbd26bf288aab8a5da809d00', class: "input-wrapper" }, h("input", { key: '0705fa4415727e2689aa0dbfc56f17c9d72e3d18', 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: '8f46261cdb045ff20d171bd0a6c98541f65f079b', class: "spinner-buttons" }, h("button", { key: 'b61a5e60db34972c3242264b9aa872e295a09b38', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, h("svg", { key: '6c5a2be0a96b18ad204196fe59001211deedd038', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: '4905b8ffa669e0b00b050cee94fdb8aac3c477e4', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: 'df2ca8633ca8dbf54ef80a3cffbbcba28534d1fd', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, h("svg", { key: 'd4e8bd93fda3e9b1bd4db79f25c503e1057086a3', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: 'a6e343e373963ca86b703783c88efeb4516e87a9', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
31608
+ return (h(Host, { key: '4964f7fe47f567303e571c5b09c1c4510d141cc2' }, h("div", { key: '9e4a98c5080239c22b387bf73d99300817e6eaf8', class: "input-container" }, this.label && h("label", { key: '81015825486e39f2049028d8398c48df258ab1b9', class: "input-label" }, this.label), h("div", { key: '0ff50909adf10f75422a685409ea39f54a6cf30c', class: "input-wrapper" }, h("input", { key: '652ae7ea7aa9e3cb74dd105e1d3f5c40ee12d922', 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: '22a15867aec1c8850064634ca3f6ee4832e6442e', class: "spinner-buttons" }, h("button", { key: 'e7f0e4a3925785340b397d150020138dbacf29c0', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, h("svg", { key: '48ec248dc8602a8d6431cea1a921afe901bee490', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: '9de7ad843eb38809711c8d99d773978187b19285', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: 'd8666aed8d56d1e95715ac2b8cf0d4eee8134863', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, h("svg", { key: '97d71669bb918deac0f48c4b650dd7700addbdde', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: 'c4314572861775d40644c4475b1403e0958ace67', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
31609
31609
  }
31610
31610
  static get watchers() { return {
31611
31611
  "value": [{
@@ -31615,7 +31615,7 @@ const KritzelNumericInput = class {
31615
31615
  };
31616
31616
  KritzelNumericInput.style = kritzelNumericInputCss();
31617
31617
 
31618
- const kritzelOpacitySliderCss = () => `:host{display:flex;flex-direction:column;padding:0;box-sizing:border-box}.opacity-container{display:flex;align-items:center;width:232px}.slider-wrapper{flex:1;display:flex;align-items:center}.opacity-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient( to right, var(--kritzel-opacity-slider-active-color, #007AFF) 0%, var(--kritzel-opacity-slider-active-color, #007AFF) var(--slider-progress, 100%), var(--kritzel-opacity-slider-track-color, #e0e0e0) var(--slider-progress, 100%), var(--kritzel-opacity-slider-track-color, #e0e0e0) 100% );outline:none;cursor:var(--kritzel-global-pointer-cursor, pointer)}.opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--kritzel-opacity-slider-thumb-color, #ffffff);border:2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:transform 0.1s ease}.opacity-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.opacity-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--kritzel-opacity-slider-thumb-color, #ffffff);border:2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:transform 0.1s ease}.opacity-slider::-moz-range-thumb:hover{transform:scale(1.1)}.opacity-slider::-moz-range-track{height:6px;border-radius:3px;background:transparent}.opacity-slider:focus{outline:none}.opacity-slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}.opacity-slider:focus::-moz-range-thumb{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}`;
31618
+ const kritzelOpacitySliderCss = () => `:host{display:flex;flex-direction:column;padding:0;box-sizing:border-box}.opacity-container{display:flex;align-items:center;width:232px}.slider-wrapper{flex:1;display:flex;align-items:center}.opacity-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient( to right, var(--kritzel-opacity-slider-active-color, #007AFF) 0%, var(--kritzel-opacity-slider-active-color, #007AFF) var(--slider-progress, 100%), var(--kritzel-opacity-slider-track-color, #e0e0e0) var(--slider-progress, 100%), var(--kritzel-opacity-slider-track-color, #e0e0e0) 100% );outline:none;cursor:var(--kritzel-global-pointer-cursor, pointer)}.opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--kritzel-opacity-slider-thumb-color, #ffffff);border:2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:transform 0.1s ease}.opacity-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.opacity-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--kritzel-opacity-slider-thumb-color, #ffffff);border:2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:transform 0.1s ease}.opacity-slider::-moz-range-thumb:hover{transform:scale(1.1)}.opacity-slider::-moz-range-track{height:6px;border-radius:3px;background:transparent}.opacity-slider:focus{outline:none}.opacity-slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}.opacity-slider:focus::-moz-range-thumb{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}`;
31619
31619
 
31620
31620
  const KritzelOpacitySlider = class {
31621
31621
  constructor(hostRef) {
@@ -31644,7 +31644,7 @@ const KritzelOpacitySlider = class {
31644
31644
  }
31645
31645
  render() {
31646
31646
  const percentage = this.getPercentage();
31647
- return (h(Host, { key: '51b1e93e982f29f181f9f542dcc2939fca08d7de' }, h("div", { key: '3376dac02effb137c04efc5aa9de96d4a5b36452', class: "opacity-container" }, h("div", { key: '3d1d2c0fe1b4b4185e37dcbf61a6c3a955fe1356', class: "slider-wrapper" }, h("input", { key: '6c43f519ff5d7bbc17ce7804909e52efc6e9533b', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
31647
+ return (h(Host, { key: 'bc2d07dc28e3bf9599aac57823215445f1b41e4c' }, h("div", { key: '5d4106f36753d27b65b063021311e616185b3b88', class: "opacity-container" }, h("div", { key: '0766e8be775867dea4a6c44a79baf46d1361329c', class: "slider-wrapper" }, h("input", { key: 'ec9f6c6be684b1bb5cfab3574734c69428b22498', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
31648
31648
  '--slider-progress': `${percentage}%`,
31649
31649
  '--kritzel-opacity-slider-thumb-border-color': this.previewColor,
31650
31650
  } })))));
@@ -31709,7 +31709,7 @@ const KritzelPillTabs = class {
31709
31709
  buttons?.[newIndex]?.focus();
31710
31710
  }
31711
31711
  render() {
31712
- return (h(Host, { key: 'f02f93ada5ec002695b62f511c847de201a8cbe4' }, h("div", { key: 'bb08ae773f1b993cb330556a5778d71fc5e91ce1', class: "pill-tabs-container", role: "tablist" }, this.tabs.map((tab, index) => (h("button", { key: tab.id, class: {
31712
+ return (h(Host, { key: '16fce447fb7db0539ba115ef19771ac78f30a302' }, h("div", { key: '95487da922621b18c1ec422eb0d464131dbc28d3', class: "pill-tabs-container", role: "tablist" }, this.tabs.map((tab, index) => (h("button", { key: tab.id, class: {
31713
31713
  'pill-tab': true,
31714
31714
  'selected': this.value === tab.id,
31715
31715
  }, role: "tab", "aria-selected": this.value === tab.id ? 'true' : 'false', tabIndex: this.value === tab.id ? 0 : -1, onClick: () => this.handleTabClick(tab.id), onKeyDown: (e) => this.handleKeyDown(e, index) }, tab.icon && h("kritzel-icon", { name: tab.icon, size: 16 }), h("span", { class: "pill-tab-label" }, tab.label)))))));
@@ -31997,7 +31997,7 @@ const KritzelPortal = class {
31997
31997
  this.portal.style.visibility = 'visible';
31998
31998
  }
31999
31999
  render() {
32000
- return (h(Host, { key: '51633f5b57002a821f73185811626439b0956479', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: 'f5cb7946de5775d1fd64d266f6ba5b952e9d89cb' })));
32000
+ return (h(Host, { key: 'c7f5fd3f34471e089057580a2f34ab4ce25ca0eb', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '4ca64a00a7969d817a5f8eb824b8d8d706989a38' })));
32001
32001
  }
32002
32002
  static get watchers() { return {
32003
32003
  "anchor": [{
@@ -32011,7 +32011,7 @@ const KritzelPortal = class {
32011
32011
  * This file is auto-generated by the version bump scripts.
32012
32012
  * Do not modify manually.
32013
32013
  */
32014
- const KRITZEL_VERSION = '0.4.30';
32014
+ const KRITZEL_VERSION = '0.4.31';
32015
32015
 
32016
32016
  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)}`;
32017
32017
 
@@ -32223,7 +32223,7 @@ const KritzelSettings = class {
32223
32223
  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)))));
32224
32224
  }
32225
32225
  render() {
32226
- return (h(Host, { key: '96981b34953ffdda4cfdfa9e6acc832dedc0c64a' }, h("kritzel-dialog", { key: '792a68aa1fe66780a937a95db802e9c6a2135091', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: 'dc7d99c2b90ea4a86bc23527a39eaec70d95acc8', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
32226
+ return (h(Host, { key: '0ca8d95d2557e4f36f9461295be02ff9d60878d9' }, h("kritzel-dialog", { key: '9396bc5d7ecff839d1df6007fd54b3bb0da31c85', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: 'cf8a0f60c3884dac3e1cd324065030c278f4e119', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
32227
32227
  }
32228
32228
  static get watchers() { return {
32229
32229
  "settings": [{
@@ -32256,10 +32256,10 @@ const KritzelShapeFill = class {
32256
32256
  return (h("svg", { viewBox: "0 0 24 24", class: "fill-icon" }, h("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", fill: strokeColor, stroke: strokeColor, "stroke-width": "2" })));
32257
32257
  }
32258
32258
  render() {
32259
- return (h(Host, { key: '6d38a9af2e4c4c7f86ab994c63fc074007c86b48' }, h("div", { key: 'cf58f26cb0e56e274873d11024209c6908d317bb', class: "fill-row" }, h("button", { key: 'c75eed70fe0c2fcbf0fd136bb6fce75b2dbfb45d', class: {
32259
+ return (h(Host, { key: 'ec214708dd4210e0c36734cb81fba76849114f9b' }, h("div", { key: 'd64bacdb7c50b31f3c460bdf2e939b4159d4d000', class: "fill-row" }, h("button", { key: '812735be08265145a13ab116e7153fd684f8b77f', class: {
32260
32260
  'fill-option': true,
32261
32261
  'selected': this.value === 'transparent',
32262
- }, onClick: () => this.handleFillChange('transparent'), title: "Transparent background" }, this.renderFillIcon('transparent')), h("button", { key: '5d6ede439b5d5e55598cd8c20b5851fb9f210463', class: {
32262
+ }, onClick: () => this.handleFillChange('transparent'), title: "Transparent background" }, this.renderFillIcon('transparent')), h("button", { key: 'cb5caf2db8aece4bef2eebca37e7ac36383bb450', class: {
32263
32263
  'fill-option': true,
32264
32264
  'selected': this.value === 'filled',
32265
32265
  }, onClick: () => this.handleFillChange('filled'), title: "Filled background" }, this.renderFillIcon('filled')))));
@@ -35463,9 +35463,9 @@ const KritzelShareDialog = class {
35463
35463
  this.dialogClosed.emit();
35464
35464
  };
35465
35465
  render() {
35466
- return (h(Host, { key: '13e718f70f46a0c71e70d7330e0bcf655ebb60a3' }, h("kritzel-dialog", { key: 'd96e31d7259cc5c5461d94395ceecfc7491f403f', dialogTitle: this.terms['share.dialogTitle'] ?? 'Share Workspace', size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, h("div", { key: '9a82641540675cb645e5520bfb1624e77b5eb382', class: "share-content" }, h("div", { key: '5eed405aaf5e39f71083e84d2db0c4177722915b', class: "share-section" }, h("div", { key: '2bb736f60448dcae354d2f7931c277fce9fe7964', class: "share-row" }, h("div", { key: 'f2b22b2ce9e3331b0bf142bcb280e3dae064f34d', class: "share-label-group" }, h("label", { key: '58daf90a8b4de173deaba2e93c31791d78c17214', class: "share-label" }, this.terms['share.linkSharing.label'] ?? 'Link sharing'), h("p", { key: 'ba5f9ee772ab44fd4cc9a3066894ee5da10c56d8', class: "share-description" }, this.internalIsPublic
35466
+ return (h(Host, { key: 'f2d1fac8b68b48fe538f069d6cc9f791d5e758ac' }, h("kritzel-dialog", { key: 'a73f7790d5264f09f8bb80c5a320f37429608469', dialogTitle: this.terms['share.dialogTitle'] ?? 'Share Workspace', size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, h("div", { key: '8b0ef0e299b3e5c53279decfdef4ef4e07d7ff9c', class: "share-content" }, h("div", { key: '16daa535eaa416cdf0249f47c056ed21518bfd58', class: "share-section" }, h("div", { key: '5d86fa767aa4daa2ce42980b6398bc54b742be8f', class: "share-row" }, h("div", { key: 'b79717b879cf4999818548bdd91e380b419a81d8', class: "share-label-group" }, h("label", { key: '9cfc62e8891c59c7f15d95bc463873a7cdc175c7', class: "share-label" }, this.terms['share.linkSharing.label'] ?? 'Link sharing'), h("p", { key: 'd1e98dadf980582bcf5bb01b1c43370cec7163b5', class: "share-description" }, this.internalIsPublic
35467
35467
  ? (this.terms['share.linkSharing.enabledDescription'] ?? 'Anyone with the link can access this workspace.')
35468
- : (this.terms['share.linkSharing.disabledDescription'] ?? 'Link sharing is disabled. Only you can access this workspace.'))), h("kritzel-slide-toggle", { key: '7f70df4db90f087d8d7a7efe98012f7bf897975d', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: this.terms['share.linkSharing.toggleLabel'] ?? 'Enable link sharing' }))), this.internalIsPublic && (h("div", { key: '999fe3550e149b7e3f0ebf28f312fa5f676dd945', class: "share-section" }, h("div", { key: 'ff623a78f50b8a5e27a978e05e2ee2ba4ac1991b', class: "share-url-container" }, h("input", { key: '5c3b5c3e82366ebe4f4e7a73c6afa42dbbf39a20', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), h("button", { key: '60ac0315841649722b32d098c787f2a0deeec979', 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: 'eacbd3b75c554d3c62a098ddd45b6723f59521b5', name: this.copySuccess ? 'check' : 'copy', size: 18 }))), this.qrCodeDataUrl && (h("div", { key: 'fc24d6a9673b5b16a35f905023e632a314cef4ce', class: "share-qr-container" }, h("img", { key: '3669f9138336cd4cf51d1e3de5caedaddac518e8', class: "share-qr-image", src: this.qrCodeDataUrl, alt: "QR code for share link" })))))))));
35468
+ : (this.terms['share.linkSharing.disabledDescription'] ?? 'Link sharing is disabled. Only you can access this workspace.'))), h("kritzel-slide-toggle", { key: 'cdd9dbc57880db945c968b79ea3be197d5b9a27f', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: this.terms['share.linkSharing.toggleLabel'] ?? 'Enable link sharing' }))), this.internalIsPublic && (h("div", { key: '146c798e07c1a5f299322dc7ae1968e7fd2b704e', class: "share-section" }, h("div", { key: 'd49008c51f9ed44cf81e7b27f0420f6ebfd93d1b', class: "share-url-container" }, h("input", { key: '2087219bca0d1a0cb1db1c27cf326e8d0b5cda5b', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), h("button", { key: 'fd2111eedfebbb0f1f0121ede24a3ba56029e842', 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: '97d3cd6c4b840661e069beb0064bd2152c240ddf', name: this.copySuccess ? 'check' : 'copy', size: 18 }))), this.qrCodeDataUrl && (h("div", { key: 'a94ce6bc58cdf507140b7732129989314567a6df', class: "share-qr-container" }, h("img", { key: '59d1132df0ada44bc0135bea2e1158b47ece4240', class: "share-qr-image", src: this.qrCodeDataUrl, alt: "QR code for share link" })))))))));
35469
35469
  }
35470
35470
  static get watchers() { return {
35471
35471
  "isPublic": [{
@@ -35506,7 +35506,7 @@ const KritzelSlideToggle = class {
35506
35506
  }
35507
35507
  };
35508
35508
  render() {
35509
- return (h(Host, { key: 'd8a9509138995da84fe798da448f0487d8c082b5', 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: '0966d487def99332139fe6f4a604fff310088d72', class: "toggle-track" }, h("div", { key: 'aeec11224dffa71178f38b0a96a7e15c35f67bcf', class: "toggle-thumb" }))));
35509
+ return (h(Host, { key: 'abd4c432048b99aa83a53f4ea500aa87bf903c15', 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: '6d7f8e656dad480edfce8f4e692a69bf1c0eb91b', class: "toggle-track" }, h("div", { key: '0729a7df4032cd9bb713a6c0e13fc2023c6f2670', class: "toggle-thumb" }))));
35510
35510
  }
35511
35511
  };
35512
35512
  KritzelSlideToggle.style = kritzelSlideToggleCss();
@@ -35606,7 +35606,7 @@ const KritzelSplitButton = class {
35606
35606
  this.menuScrollTop = event.target.scrollTop;
35607
35607
  };
35608
35608
  render() {
35609
- return (h(Host, { key: '37185b37faa1e703f9457d4f4685c7d8ed40b342', class: { mobile: this.isTouchDevice } }, h("button", { key: 'b97d4df106fea68398116f1c44c6d5cd9f31997c', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && h("kritzel-icon", { key: '66dce735d160e23a16727c294f9ccb1bd3cda8c1', name: this.buttonIcon })), h("div", { key: '14ffaf9334090dc10df87d7b8744446be8bb2632', class: "split-divider" }), h("button", { key: '421e23ebb99e7b1ca656c0bc16f602a2a9812264', 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: 'affc13ef766d21030137a7feb44305553845dbfc', name: this.dropdownIcon })), h("kritzel-portal", { key: '326cef4696ebf9986e6c42e18822b90c399b16c2', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: 'e0800efbdefc9dce3dc548523ec10e810f3f7f73', 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 }))));
35609
+ return (h(Host, { key: '3c22426ef12446aa3424d6b4a103edc02bc631f0', class: { mobile: this.isTouchDevice } }, h("button", { key: '5be967c991f55fa6f11f90fb4c5ccd6ada7f7266', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && h("kritzel-icon", { key: 'c055ff3ba358ef2a1d7dac254b7ba8007b463901', name: this.buttonIcon })), h("div", { key: '1d9a060ecdeba49c49762399216709a573481cb3', class: "split-divider" }), h("button", { key: 'ab4fe9d216ccfe2f4418e461c1bd5f5800113125', 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: '88d6617385a697781eb12ae24a75eb2f4f14f790', name: this.dropdownIcon })), h("kritzel-portal", { key: '88a6164d40ecda76541bcb36f946aa4fd239a64d', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '6cb950b17f81864490bdfa0095debd4a7f48b1c0', 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 }))));
35610
35610
  }
35611
35611
  };
35612
35612
  KritzelSplitButton.style = kritzelSplitButtonCss();
@@ -35627,7 +35627,7 @@ const KritzelStrokeSize = class {
35627
35627
  }
35628
35628
  render() {
35629
35629
  const sizes = this.sizes ?? [];
35630
- return (h(Host, { key: '8b12f354a3395cd69c7199115ce998cf2eb26eb2' }, h("div", { key: '39008613327d50b75270dd78ea498113e5e9617b', class: "size-grid" }, sizes.map(size => (h("div", { tabIndex: 0, class: {
35630
+ return (h(Host, { key: '8218bc595e5cc22f45519cb607a20c5375b15004' }, h("div", { key: '2e3d44c1b9b07d49e5da2ea58188bc570b7f8b58', class: "size-grid" }, sizes.map(size => (h("div", { tabIndex: 0, class: {
35631
35631
  'size-container': true,
35632
35632
  'selected': this.selectedSize === size,
35633
35633
  }, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: 'var(--kritzel-global-text-primary)', size: size })))))));
@@ -36043,14 +36043,14 @@ const KritzelTooltip = class {
36043
36043
  }
36044
36044
  }
36045
36045
  render() {
36046
- return (h(Host, { key: '407a2f458626f02808fc9d718046a635de71662b', style: {
36046
+ return (h(Host, { key: 'e887f507f89031ebe7a6bfc1c66bd7c5613fea64', style: {
36047
36047
  position: 'fixed',
36048
36048
  zIndex: '9999',
36049
36049
  transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
36050
36050
  visibility: this.isVisible ? 'visible' : 'hidden',
36051
36051
  left: `${this.positionX}px`,
36052
36052
  bottom: `${this.positionY}px`,
36053
- } }, h("div", { key: '13c00678bd485f1f5bc2676e2c89fd0019f5e089', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: '67937f71c611f36a2c47ee2632a8657ced1d8cc7' }))));
36053
+ } }, h("div", { key: 'b9e5efe7bdef3f8c9cd709e19220322b91f37415', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: 'f36dd5791f0a4996d0a1b488798bb3504ab471f6' }))));
36054
36054
  }
36055
36055
  static get watchers() { return {
36056
36056
  "triggerElement": [{
@@ -36091,7 +36091,7 @@ const KritzelUtilityPanel = class {
36091
36091
  this.redo.emit();
36092
36092
  }
36093
36093
  render() {
36094
- return (h(Host, { key: '3485f5cc7c4f1fd71fe24c2337d0a1f7145012c0' }, h("button", { key: '0a5eb536282df4fec1d7eead330574412640ae8b', 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: '976805f2e645acf710b30a6dc089b93bf3d6efb3', name: "undo" })), h("button", { key: 'dd44f61e16f96e315d62c0e9278b0a09ec7169d7', 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: '4f3fb33d6bc5cfa5c3b23a39c10998efefec51a8', name: "redo" })), h("div", { key: '60124754529de5ac00e6ec281a2402d4c85e1906', class: "utility-separator" }), h("button", { key: '0b3cbd654f5a8c2319547a3314887435dfc5b1f7', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": this.terms['utility.delete'] ?? 'Delete selected items' }, h("kritzel-icon", { key: '7fe136ecc1513895b14e479a5d47e13d398f52b4', name: "delete" }))));
36094
+ return (h(Host, { key: 'f4258951cbf62fc932fa48fbd8aaf2128aef1aed' }, h("button", { key: '953365123f654cd683b810fe82b90e4a57467d1d', 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: 'cac7eade59c64b535a9b55e99feddc2f545246c2', name: "undo" })), h("button", { key: '45b1d0e3559c77215f85e17b46ba5d2fb86e6f50', 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: '7de37e1ebe98a5698b0f22769a5a79948de3df25', name: "redo" })), h("div", { key: 'f9fbd4bfaa66df93fba40089e294cbce70b45dda', class: "utility-separator" }), h("button", { key: '4ccfdc2423de61de4f108cf1a198d62d7d2b24c4', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": this.terms['utility.delete'] ?? 'Delete selected items' }, h("kritzel-icon", { key: '3af4d475defe1712a5e975d0860f849c3015597b', name: "delete" }))));
36095
36095
  }
36096
36096
  };
36097
36097
  KritzelUtilityPanel.style = kritzelUtilityPanelCss();
@@ -36112,7 +36112,7 @@ const KritzelWatermark = class {
36112
36112
  label;
36113
36113
  render() {
36114
36114
  const label = this.label ?? this.core.localizationManager.translate('watermark.poweredBy');
36115
- return (h(Host, { key: '297a488f26fd8637da8d00b98af85cfeda5b0992' }, h("a", { key: '6e3be65773dfda06e9b7ae611cfbb5ff09ba1f91', class: "watermark-link", href: KRITZEL_WEBSITE_URL, target: "_blank", rel: "noopener noreferrer", part: "watermark", onPointerDown: (ev) => ev.stopPropagation(), onPointerUp: (ev) => ev.stopPropagation() }, label)));
36115
+ return (h(Host, { key: 'ab2155c93a729cfe08f2f3a2ec1dc1547f4a98c4' }, h("a", { key: 'cd7b687b3e073a7e6582a62f8feb3ca0aab688c8', class: "watermark-link", href: KRITZEL_WEBSITE_URL, target: "_blank", rel: "noopener noreferrer", part: "watermark", onPointerDown: (ev) => ev.stopPropagation(), onPointerUp: (ev) => ev.stopPropagation() }, label)));
36116
36116
  }
36117
36117
  };
36118
36118
  KritzelWatermark.style = kritzelWatermarkCss();
@@ -36300,7 +36300,7 @@ const KritzelZoomPanel = class {
36300
36300
  return Number.isFinite(this.zoomPercent) ? Math.max(1, Math.round(this.zoomPercent)) : 100;
36301
36301
  }
36302
36302
  render() {
36303
- return (h(Host, { key: '6f39f043da7b8607efcfb0e99d58cebc80d3c031' }, h("div", { key: 'f7c7600760ea8d3d9c6efe26e6b398ba20b12e23', class: { panel: true, visible: this.visible } }, h("button", { key: '18c6ddc87155a36395b296aded7c15c55500a2c8', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomOut'] ?? 'Zoom out', disabled: this.disabled, onClick: this.handleZoomOut }, h("kritzel-icon", { key: '54fea3408bb38c7e5f19877c84fb96a74028693a', name: "minus" })), h("span", { key: 'b2b354eb16a0e2102e9214864c438dfab79d8968', class: "zoom-level", "aria-live": "polite" }, this.normalizedZoomPercent, "%"), h("button", { key: 'ddc3822e478ccfec770dcc5ba900d0276531b1ad', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomIn'] ?? 'Zoom in', disabled: this.disabled, onClick: this.handleZoomIn }, h("kritzel-icon", { key: '2069bf5aba39c362d472f57941ca8ae4f0bedb8a', name: "plus" })))));
36303
+ return (h(Host, { key: 'e5fc3a34076aaeb454d74bc54b029f40d467fc0b' }, h("div", { key: 'a0591585327eb48385948e248970d3e999ee98f9', class: { panel: true, visible: this.visible } }, h("button", { key: '1bbf4f2fbed22f445ab8761c9855adb28cb70a5c', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomOut'] ?? 'Zoom out', disabled: this.disabled, onClick: this.handleZoomOut }, h("kritzel-icon", { key: 'ace269950514105d0cbda2d2e946ddd9831fd889', name: "minus" })), h("span", { key: '0f597c6c620a8f9c3f0877ab1b1e48bb4eef2716', class: "zoom-level", "aria-live": "polite" }, this.normalizedZoomPercent, "%"), h("button", { key: '694fbbee105e73d85e077258caeee5a2206e60a6', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomIn'] ?? 'Zoom in', disabled: this.disabled, onClick: this.handleZoomIn }, h("kritzel-icon", { key: 'c17749be45aedfff9317efd96661dcdfb09f7c7f', name: "plus" })))));
36304
36304
  }
36305
36305
  };
36306
36306
  KritzelZoomPanel.style = kritzelZoomPanelCss();