kritzel-stencil 0.4.24 → 0.4.26

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 (225) hide show
  1. package/LICENSE +21 -21
  2. package/LICENSE.md +49 -49
  3. package/dist/cjs/{index-Dn19mGl-.js → index-Xav9JFHg.js} +13 -49
  4. package/dist/cjs/index.cjs.js +7 -1
  5. package/dist/cjs/{kritzel-active-users_47.cjs.entry.js → kritzel-active-users_46.cjs.entry.js} +112 -217
  6. package/dist/cjs/kritzel-brush-style.cjs.entry.js +2 -2
  7. package/dist/cjs/loader.cjs.js +2 -2
  8. package/dist/cjs/{schema.constants-CY0WWJYd.js → schema.constants-CjN-B633.js} +20 -44
  9. package/dist/cjs/stencil.cjs.js +3 -3
  10. package/dist/collection/classes/providers/sync/hocuspocus-sync-provider.class.js +3 -0
  11. package/dist/collection/classes/providers/sync/websocket-sync-provider.class.js +3 -0
  12. package/dist/collection/collection-manifest.json +1 -2
  13. package/dist/collection/components/core/kritzel-awareness-cursors/kritzel-awareness-cursors.css +115 -115
  14. package/dist/collection/components/core/kritzel-awareness-cursors/kritzel-awareness-cursors.js +1 -1
  15. package/dist/collection/components/core/kritzel-cursor-trail/kritzel-cursor-trail.css +10 -10
  16. package/dist/collection/components/core/kritzel-cursor-trail/kritzel-cursor-trail.js +1 -1
  17. package/dist/collection/components/core/kritzel-editor/kritzel-editor.css +160 -160
  18. package/dist/collection/components/core/kritzel-editor/kritzel-editor.js +18 -20
  19. package/dist/collection/components/core/kritzel-engine/kritzel-engine.css +80 -80
  20. package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +22 -124
  21. package/dist/collection/components/core/kritzel-watermark/kritzel-watermark.css +29 -29
  22. package/dist/collection/components/core/kritzel-watermark/kritzel-watermark.js +2 -2
  23. package/dist/collection/components/shared/kritzel-avatar/kritzel-avatar.css +58 -58
  24. package/dist/collection/components/shared/kritzel-avatar/kritzel-avatar.js +3 -3
  25. package/dist/collection/components/shared/kritzel-brush-style/kritzel-brush-style.css +42 -42
  26. package/dist/collection/components/shared/kritzel-brush-style/kritzel-brush-style.js +3 -3
  27. package/dist/collection/components/shared/kritzel-button/kritzel-button.css +73 -73
  28. package/dist/collection/components/shared/kritzel-button/kritzel-button.js +2 -2
  29. package/dist/collection/components/shared/kritzel-color/kritzel-color.css +24 -24
  30. package/dist/collection/components/shared/kritzel-color/kritzel-color.js +2 -2
  31. package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.css +46 -46
  32. package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.js +1 -1
  33. package/dist/collection/components/shared/kritzel-dialog/kritzel-dialog.css +209 -209
  34. package/dist/collection/components/shared/kritzel-dropdown/kritzel-dropdown.css +190 -190
  35. package/dist/collection/components/shared/kritzel-dropdown/kritzel-dropdown.js +2 -2
  36. package/dist/collection/components/shared/kritzel-font/kritzel-font.css +10 -10
  37. package/dist/collection/components/shared/kritzel-font/kritzel-font.js +1 -1
  38. package/dist/collection/components/shared/kritzel-font-family/kritzel-font-family.css +48 -48
  39. package/dist/collection/components/shared/kritzel-font-family/kritzel-font-family.js +2 -2
  40. package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.css +30 -30
  41. package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.js +1 -1
  42. package/dist/collection/components/shared/kritzel-icon/kritzel-icon.css +18 -18
  43. package/dist/collection/components/shared/kritzel-input/kritzel-input.css +69 -69
  44. package/dist/collection/components/shared/kritzel-input/kritzel-input.js +1 -1
  45. package/dist/collection/components/shared/kritzel-line-endings/kritzel-line-endings.css +60 -60
  46. package/dist/collection/components/shared/kritzel-line-endings/kritzel-line-endings.js +3 -3
  47. package/dist/collection/components/shared/kritzel-master-detail/kritzel-master-detail.css +190 -190
  48. package/dist/collection/components/shared/kritzel-master-detail/kritzel-master-detail.js +3 -3
  49. package/dist/collection/components/shared/kritzel-menu/kritzel-menu.css +34 -34
  50. package/dist/collection/components/shared/kritzel-menu/kritzel-menu.js +1 -1
  51. package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.css +166 -166
  52. package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.js +2 -2
  53. package/dist/collection/components/shared/kritzel-numeric-input/kritzel-numeric-input.css +102 -102
  54. package/dist/collection/components/shared/kritzel-numeric-input/kritzel-numeric-input.js +1 -1
  55. package/dist/collection/components/shared/kritzel-opacity-slider/kritzel-opacity-slider.css +85 -85
  56. package/dist/collection/components/shared/kritzel-opacity-slider/kritzel-opacity-slider.js +1 -1
  57. package/dist/collection/components/shared/kritzel-pill-tabs/kritzel-pill-tabs.css +68 -68
  58. package/dist/collection/components/shared/kritzel-pill-tabs/kritzel-pill-tabs.js +2 -2
  59. package/dist/collection/components/shared/kritzel-portal/kritzel-portal.js +1 -1
  60. package/dist/collection/components/shared/kritzel-shape-fill/kritzel-shape-fill.css +47 -47
  61. package/dist/collection/components/shared/kritzel-shape-fill/kritzel-shape-fill.js +4 -4
  62. package/dist/collection/components/shared/kritzel-slide-toggle/kritzel-slide-toggle.css +48 -48
  63. package/dist/collection/components/shared/kritzel-slide-toggle/kritzel-slide-toggle.js +1 -1
  64. package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.css +78 -78
  65. package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.js +1 -1
  66. package/dist/collection/components/shared/kritzel-stroke-size/kritzel-stroke-size.css +37 -37
  67. package/dist/collection/components/shared/kritzel-stroke-size/kritzel-stroke-size.js +1 -1
  68. package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.css +18 -18
  69. package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.js +2 -2
  70. package/dist/collection/components/ui/kritzel-active-users/kritzel-active-users.css +65 -65
  71. package/dist/collection/components/ui/kritzel-back-to-content/kritzel-back-to-content.css +42 -42
  72. package/dist/collection/components/ui/kritzel-back-to-content/kritzel-back-to-content.js +1 -1
  73. package/dist/collection/components/ui/kritzel-context-menu/kritzel-context-menu.css +112 -112
  74. package/dist/collection/components/ui/kritzel-controls/kritzel-controls.css +331 -331
  75. package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js +6 -6
  76. package/dist/collection/components/ui/kritzel-current-user/kritzel-current-user.css +11 -11
  77. package/dist/collection/components/ui/kritzel-current-user/kritzel-current-user.js +1 -1
  78. package/dist/collection/components/ui/kritzel-current-user-dialog/kritzel-current-user-dialog.css +39 -39
  79. package/dist/collection/components/ui/kritzel-current-user-dialog/kritzel-current-user-dialog.js +1 -1
  80. package/dist/collection/components/ui/kritzel-export/kritzel-export.css +89 -89
  81. package/dist/collection/components/ui/kritzel-export/kritzel-export.js +1 -1
  82. package/dist/collection/components/ui/kritzel-loading-overlay/kritzel-loading-overlay.css +50 -50
  83. package/dist/collection/components/ui/kritzel-loading-overlay/kritzel-loading-overlay.js +1 -1
  84. package/dist/collection/components/ui/kritzel-login-dialog/kritzel-login-dialog.css +98 -98
  85. package/dist/collection/components/ui/kritzel-login-dialog/kritzel-login-dialog.js +1 -1
  86. package/dist/collection/components/ui/kritzel-more-menu/kritzel-more-menu.css +58 -58
  87. package/dist/collection/components/ui/kritzel-more-menu/kritzel-more-menu.js +2 -2
  88. package/dist/collection/components/ui/kritzel-notification-card/kritzel-notification-card.css +101 -101
  89. package/dist/collection/components/ui/kritzel-settings/kritzel-settings.css +137 -137
  90. package/dist/collection/components/ui/kritzel-settings/kritzel-settings.js +1 -1
  91. package/dist/collection/components/ui/kritzel-share-dialog/kritzel-share-dialog.css +150 -150
  92. package/dist/collection/components/ui/kritzel-share-dialog/kritzel-share-dialog.js +2 -2
  93. package/dist/collection/components/ui/kritzel-tool-config/kritzel-tool-config.css +38 -38
  94. package/dist/collection/components/ui/kritzel-utility-panel/kritzel-utility-panel.css +45 -45
  95. package/dist/collection/components/ui/kritzel-utility-panel/kritzel-utility-panel.js +1 -1
  96. package/dist/collection/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.css +16 -16
  97. package/dist/collection/components/ui/kritzel-zoom-panel/kritzel-zoom-panel.css +72 -72
  98. package/dist/collection/components/ui/kritzel-zoom-panel/kritzel-zoom-panel.js +1 -1
  99. package/dist/collection/constants/version.js +1 -1
  100. package/dist/collection/helpers/cursor.helper.js +6 -6
  101. package/dist/collection/helpers/svg-export.helper.js +41 -41
  102. package/dist/components/index.d.ts +0 -2
  103. package/dist/components/index.js +9 -4
  104. package/dist/components/kritzel-active-users.js +1 -1
  105. package/dist/components/kritzel-avatar.js +1 -1
  106. package/dist/components/kritzel-awareness-cursors.js +1 -1
  107. package/dist/components/kritzel-back-to-content.js +1 -1
  108. package/dist/components/kritzel-brush-style.js +4 -4
  109. package/dist/components/kritzel-button.js +1 -1
  110. package/dist/components/kritzel-color-palette.js +1 -1
  111. package/dist/components/kritzel-color.js +1 -1
  112. package/dist/components/kritzel-context-menu.js +1 -1
  113. package/dist/components/kritzel-controls.js +1 -1
  114. package/dist/components/kritzel-current-user-dialog.js +1 -1
  115. package/dist/components/kritzel-current-user.js +1 -1
  116. package/dist/components/kritzel-cursor-trail.js +1 -1
  117. package/dist/components/kritzel-dialog.js +1 -1
  118. package/dist/components/kritzel-dropdown.js +1 -1
  119. package/dist/components/kritzel-editor.js +94 -102
  120. package/dist/components/kritzel-engine.js +1 -1
  121. package/dist/components/kritzel-export.js +1 -1
  122. package/dist/components/kritzel-font-family.js +1 -1
  123. package/dist/components/kritzel-font-size.js +1 -1
  124. package/dist/components/kritzel-font.js +1 -1
  125. package/dist/components/kritzel-icon.js +1 -1
  126. package/dist/components/kritzel-input.js +1 -1
  127. package/dist/components/kritzel-line-endings.js +1 -1
  128. package/dist/components/kritzel-loading-overlay.js +1 -1
  129. package/dist/components/kritzel-login-dialog.js +1 -1
  130. package/dist/components/kritzel-master-detail.js +1 -1
  131. package/dist/components/kritzel-menu-item.js +1 -1
  132. package/dist/components/kritzel-menu.js +1 -1
  133. package/dist/components/kritzel-more-menu.js +1 -1
  134. package/dist/components/kritzel-notification-card.js +1 -1
  135. package/dist/components/kritzel-numeric-input.js +1 -1
  136. package/dist/components/kritzel-opacity-slider.js +1 -1
  137. package/dist/components/kritzel-pill-tabs.js +1 -1
  138. package/dist/components/kritzel-portal.js +1 -1
  139. package/dist/components/kritzel-settings.js +1 -1
  140. package/dist/components/kritzel-shape-fill.js +1 -1
  141. package/dist/components/kritzel-share-dialog.js +1 -1
  142. package/dist/components/kritzel-slide-toggle.js +1 -1
  143. package/dist/components/kritzel-split-button.js +1 -1
  144. package/dist/components/kritzel-stroke-size.js +1 -1
  145. package/dist/components/kritzel-tool-config.js +1 -1
  146. package/dist/components/kritzel-tooltip.js +1 -1
  147. package/dist/components/kritzel-utility-panel.js +1 -1
  148. package/dist/components/kritzel-watermark.js +1 -1
  149. package/dist/components/kritzel-workspace-manager.js +1 -1
  150. package/dist/components/kritzel-zoom-panel.js +1 -1
  151. package/dist/components/{p-BFYT03fw.js → p-B38_9BJg.js} +3 -3
  152. package/dist/components/{p-C9_yBEoX.js → p-B43upypT.js} +10 -30
  153. package/dist/components/{p-Covorf4C.js → p-BFYtCsZu.js} +3 -3
  154. package/dist/components/{p-BppcoKoo.js → p-BPzdPKWE.js} +5 -5
  155. package/dist/components/{p-Cx-L_28S.js → p-Ba0c-tu2.js} +3 -3
  156. package/dist/components/{p-MhQxGUvY.js → p-BeSKOETx.js} +3 -3
  157. package/dist/components/{p-CLAz6RJc.js → p-BprEDRpA.js} +3 -3
  158. package/dist/components/{p-BXUx_C0N.js → p-BsLI_BWq.js} +2 -2
  159. package/dist/components/{p-CSKToqUl.js → p-C0FEC_gS.js} +4 -4
  160. package/dist/components/{p-D2VcPEtL.js → p-CAXR5-S9.js} +6 -6
  161. package/dist/components/{p-DYPA7jpg.js → p-CBrn5AIB.js} +2 -2
  162. package/dist/components/{p-D3BzgkIE.js → p-CSPYkLLH.js} +2 -2
  163. package/dist/components/{p-Ck-87E2G.js → p-CSuU8frA.js} +1 -1
  164. package/dist/components/{p-Di--2boB.js → p-CXpv9Rxe.js} +3 -3
  165. package/dist/components/{p-dAXnRkjA.js → p-Ce1j1-Hg.js} +5 -5
  166. package/dist/components/{p-BrA9NBEE.js → p-CeffYwAK.js} +21 -21
  167. package/dist/components/{p-DT_WBwsw.js → p-ChPs27Fd.js} +6 -6
  168. package/dist/components/{p-3tBE7SyG.js → p-Cm33td2O.js} +2 -2
  169. package/dist/components/{p-BkXQL5Dl.js → p-CoXN583u.js} +5 -5
  170. package/dist/components/{p-Ch-KG9To.js → p-CucCT7Qn.js} +3 -3
  171. package/dist/components/{p-DPsbNStn.js → p-Cva3jIIU.js} +2 -2
  172. package/dist/components/{p-D0Trc3IQ.js → p-D0Ed8epW.js} +5 -5
  173. package/dist/components/{p-DafP9PAA.js → p-DFMZEarE.js} +2 -2
  174. package/dist/components/{p-BShrnlam.js → p-DK0anxtL.js} +2 -2
  175. package/dist/components/{p-zG-WUBGF.js → p-DN9p3G9K.js} +4 -4
  176. package/dist/components/{p-DcUIO14-.js → p-DOTdJ3JQ.js} +4 -4
  177. package/dist/components/{p-CWAChRD5.js → p-DOl-95VY.js} +12 -12
  178. package/dist/components/{p-Dznwo6oc.js → p-DTB3ykgO.js} +2 -2
  179. package/dist/components/{p-BZZ3KRPk.js → p-DUmLsjKb.js} +3 -3
  180. package/dist/components/{p-DwEYMvIn.js → p-DUoQyGKc.js} +66 -178
  181. package/dist/components/{p-QSyeAy8R.js → p-DX2nriaq.js} +2 -2
  182. package/dist/components/{p-BrqSjRJN.js → p-D_cyY7Nd.js} +3 -3
  183. package/dist/components/{p-CHoOe3FD.js → p-Df3BwVGy.js} +3 -3
  184. package/dist/components/{p-CSWCmyzb.js → p-DhabvHJM.js} +5 -5
  185. package/dist/components/{p-o3NYKrVL.js → p-DkHYY72B.js} +3 -3
  186. package/dist/components/{p-vDCa_ZDm.js → p-DnmVD1Mz.js} +3 -3
  187. package/dist/components/{p-fSV6KVTC.js → p-DoxFuOy1.js} +3 -3
  188. package/dist/components/{p-b0J2ktAm.js → p-Dpm75DfV.js} +7 -7
  189. package/dist/components/{p-ME1sDz3f.js → p-Dvn6ad4a.js} +2 -2
  190. package/dist/components/{p-Qdo3E8dr.js → p-NOWtUeeQ.js} +2 -2
  191. package/dist/components/{p-Dp1CD4gK.js → p-OUl5CA4Y.js} +2 -2
  192. package/dist/components/{p-D6JycG-I.js → p-bAacqNHq.js} +3 -3
  193. package/dist/components/{p-DjXQxw9R.js → p-djJSnjAX.js} +3 -3
  194. package/dist/components/{p-1Q4VnThv.js → p-jIKskj3S.js} +3 -3
  195. package/dist/components/{p-DW1B118Q.js → p-m7SeNszM.js} +9 -9
  196. package/dist/esm/{index-2va1Pk9z.js → index-Dhio9uis.js} +13 -49
  197. package/dist/esm/index.js +8 -2
  198. package/dist/{stencil/p-ce6d432e.entry.js → esm/kritzel-active-users_46.entry.js} +113 -217
  199. package/dist/esm/kritzel-brush-style.entry.js +2 -2
  200. package/dist/esm/loader.js +3 -3
  201. package/dist/esm/{schema.constants-DBvUmuDH.js → schema.constants-DfvqHmxc.js} +20 -44
  202. package/dist/esm/stencil.js +4 -4
  203. package/dist/stencil/index.esm.js +8 -2
  204. package/dist/{esm/kritzel-active-users_47.entry.js → stencil/p-5c045d3e.entry.js} +113 -217
  205. package/dist/stencil/{p-DBvUmuDH.js → p-DfvqHmxc.js} +20 -44
  206. package/dist/stencil/{p-2va1Pk9z.js → p-Dhio9uis.js} +11 -47
  207. package/dist/stencil/{p-df06ca3a.entry.js → p-fb32cd8f.entry.js} +2 -2
  208. package/dist/stencil/stencil.esm.js +4 -4
  209. package/dist/types/classes/providers/sync/hocuspocus-sync-provider.class.d.ts +1 -0
  210. package/dist/types/classes/providers/sync/websocket-sync-provider.class.d.ts +1 -0
  211. package/dist/types/components/core/kritzel-editor/kritzel-editor.d.ts +0 -1
  212. package/dist/types/components/core/kritzel-engine/kritzel-engine.d.ts +0 -14
  213. package/dist/types/components.d.ts +0 -42
  214. package/dist/types/constants/version.d.ts +1 -1
  215. package/dist/types/interfaces/sync-provider.interface.d.ts +7 -0
  216. package/dist/types/stencil-public-runtime.d.ts +0 -12
  217. package/loader/index.d.ts +1 -1
  218. package/package.json +1 -1
  219. package/readme.md +10 -10
  220. package/dist/collection/components/shared/kritzel-sync-indicator/kritzel-sync-indicator.css +0 -50
  221. package/dist/collection/components/shared/kritzel-sync-indicator/kritzel-sync-indicator.js +0 -66
  222. package/dist/components/kritzel-sync-indicator.d.ts +0 -11
  223. package/dist/components/kritzel-sync-indicator.js +0 -6
  224. package/dist/components/p-Bxi-Bm49.js +0 -39
  225. package/dist/types/components/shared/kritzel-sync-indicator/kritzel-sync-indicator.d.ts +0 -7
@@ -1,5 +1,5 @@
1
- import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-2va1Pk9z.js';
2
- import { c as KritzelPath, e as KritzelLine, U as KritzelColorHelper, V as KritzelDevicesHelper, X as KritzelMouseButton, Y as KritzelHTMLHelper, Z as DEFAULT_STROKE_SIZES, _ as DEFAULT_COLOR_PALETTE, S as ShapeType, q as KritzelSelectionTool, D as DEFAULT_BRUSH_CONFIG, j as KritzelBrushTool, l as KritzelEraserTool, C as DEFAULT_LINE_TOOL_CONFIG, k as KritzelLineTool, o as KritzelShapeTool, B as DEFAULT_TEXT_CONFIG, n as KritzelTextTool, m as KritzelImageTool, N as KritzelAlignment, z as hasRemoteSyncProvider, E as DEFAULT_ASSET_STORAGE_CONFIG, $ as ObjectHelper, a0 as resolveTextToolAvailableFonts, a1 as ThemeHelper, G as darkTheme, F as lightTheme, a2 as KritzelSelectionGroup, a3 as KritzelSelectionBox, a4 as KritzelIconRegistry, y as KritzelFontRegistry, a5 as KritzelKeyboardHelper, a6 as KritzelBaseHandler, s as KritzelWorkspace, f as KritzelGroup, h as KritzelCustomElement, d as KritzelImage, g as KritzelShape, b as KritzelText, O as runMigrations, T as CURRENT_WORKSPACE_SCHEMA_VERSION, Q as WORKSPACE_MIGRATIONS, a7 as KritzelClassHelper, R as CURRENT_APP_STATE_SCHEMA_VERSION, P as APP_STATE_MIGRATIONS, p as KritzelCursorHelper, a8 as KritzelImageFileHelper, a9 as imageCompression, t as KritzelAnchorManager, u as KritzelThemeManager, v as KritzelLocalizationManager, w as KritzelLicenseManager, r as KritzelAssetResolver, aa as KritzelEventHelper, W as WORKSPACE_EXPORT_VERSION, i as KritzelBaseTool } from './schema.constants-DBvUmuDH.js';
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, U as KritzelColorHelper, V as KritzelDevicesHelper, X as KritzelMouseButton, Y as KritzelHTMLHelper, Z as DEFAULT_STROKE_SIZES, _ as DEFAULT_COLOR_PALETTE, S as ShapeType, q as KritzelSelectionTool, D as DEFAULT_BRUSH_CONFIG, j as KritzelBrushTool, l as KritzelEraserTool, C as DEFAULT_LINE_TOOL_CONFIG, k as KritzelLineTool, o as KritzelShapeTool, B as DEFAULT_TEXT_CONFIG, n as KritzelTextTool, m as KritzelImageTool, N as KritzelAlignment, z as hasRemoteSyncProvider, E as DEFAULT_ASSET_STORAGE_CONFIG, $ as ObjectHelper, a0 as resolveTextToolAvailableFonts, a1 as ThemeHelper, G as darkTheme, F as lightTheme, a2 as KritzelSelectionGroup, a3 as KritzelSelectionBox, a4 as KritzelIconRegistry, y as KritzelFontRegistry, a5 as KritzelKeyboardHelper, a6 as KritzelBaseHandler, s as KritzelWorkspace, f as KritzelGroup, h as KritzelCustomElement, d as KritzelImage, g as KritzelShape, b as KritzelText, O as runMigrations, T as CURRENT_WORKSPACE_SCHEMA_VERSION, Q as WORKSPACE_MIGRATIONS, a7 as KritzelClassHelper, R as CURRENT_APP_STATE_SCHEMA_VERSION, P as APP_STATE_MIGRATIONS, p as KritzelCursorHelper, a8 as KritzelImageFileHelper, a9 as imageCompression, t as KritzelAnchorManager, u as KritzelThemeManager, v as KritzelLocalizationManager, w as KritzelLicenseManager, r as KritzelAssetResolver, aa as KritzelEventHelper, W as WORKSPACE_EXPORT_VERSION, i as KritzelBaseTool } from './p-DfvqHmxc.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: '020217baf0aa2736af33c5a003e89406322e5fdc', style: containerStyles, class: {
139
+ return (h(Host, { key: 'f199b56955b749b868ad8e7940ef3114f1109c37', 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: '2f54dad2260ebf38cfe8c57e28899c98729e7e38', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
143
+ }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: '621a58cc965cf6d037f8515e1263bd5bf4098ab0', 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: 'a97435d30044a37f15ce72ed51439e9c682c0aa3', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: '6d0893d3f15a2d68a93f3fcf1b0fbd36786be0eb', class: "avatar-default" }, h("svg", { key: '688a9a1f88e22f4f3c3085675618b5f5f460d8f7', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: 'd12c67677e162534b2ad92535acc6a836df179c7', 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: '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" }))))));
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: 'b157f337127f7e5852acc0d6a246fa42e944a501' }, cursors.map(remoteCursor => {
366
+ return (h(Host, { key: '9be6694250bafe011be27301d1c7a53fc7957657' }, 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: '612164b48226601d863cb2acdab1d567e9652188' }, h("button", { key: '159a4f4f01934c03c7898f2803bf87d5f0d95aba', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, h("kritzel-icon", { key: 'e7ec1308ab12ca233509a00fc76df17fce1f5700', name: "chevrons-left" }))));
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" }))));
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: 'ef407708a606dab1ac691b6c6f1c319ba5529e3b' }, h("button", { key: '5b26e220334c3ee20e0af433792496568067ca8c', type: this.type, class: {
500
+ return (h(Host, { key: 'b7d78dad25d41116ac6368c1ff2cd41ee28d9cdc' }, h("button", { key: '88cfd3674e63cd82ea5874205237415a540307b6', 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: '5272679ba3b67e3d7c0ec1b2ef0b3829ef4204ba' }))));
504
+ }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: 'a7f4fd923800f66bc7ea438f2cbcdfde81b11ae1' }))));
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: '30141c62ff9860237c22044f2c5101ed6516ff82' }, h("div", { key: '61818f71999a782871d4ec9ba00ef0c77e3c8b54', class: "checkerboard-bg", style: {
552
+ return (h(Host, { key: '17b5c44e1defe8f3fb41632391be093a12bb899b' }, h("div", { key: '545f4c4fd62dea22a4a5f36108a51d30c57f2652', 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: 'a064cc28a354db78f6637c92f38e59ac4ebf1f95', class: {
558
+ } }, h("div", { key: 'bbcb68f6e5f00d9a33b316d52ac86e49911e463c', 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: '0fd02d97504f68ffbbac2fb2b6af702f0de71038' }, h("div", { key: '5f546350d0c2d528165987a177b8bd9d0015ccba', class: {
614
+ return (h(Host, { key: '5f25a2ead76106ba2ef9762b4d212d5a9d7ac2a8' }, h("div", { key: '764cc6a55cc1865aaf1c501ee89a161f74fefa1c', 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: '0c61b173d0a92351de148c9c98b25031f231e1ab', style: { display: this.visible ? '' : 'none' }, class: {
1183
+ return (h(Host, { key: '42f84f104e4b008a7c53a5e1ea9290c17ba792d2', style: { display: this.visible ? '' : 'none' }, class: {
1184
1184
  mobile: this.isTouchDevice,
1185
- } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: 'a696e0af5f126456e610a6353377cb5a68b4fcb4', style: {
1185
+ } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '8f6b3df9db735dfd847da9683db3fbdcc65b08a4', 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: 'ffe96a9b2b73d3e08c7d149fd64b9b209eaf47d3', class: "kritzel-controls" }, h("div", { key: 'a351b3a4a801a4480d2476a6ca34bbbd628525ac', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: '9447a0d4728d4d476113a2bcb94f53a5652f7dd1', 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: '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 => {
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: '31a1d141b1381c9aa0b7f07c1ae7d1606d1a8fc6', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
1219
+ })), h("div", { key: '740b52666bf823b7dc504a1072f68b59f94a3773', 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: 'ed4b6440e5b99b68a29269476de7efa15ecec38f', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: 'cac5417d5e1a8c4ec19fbcf38affb30ac67b521e', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: 'ffba221a22ab50b4c44c0247ef9e86e4b67e5bde', 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: '1f5b90e286d5aa8fcf10aa3987c6c6cd75360d49', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
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 => {
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: '3857f9f2bc30ddac57d108a8021061edc5decb07', class: "color-container" }, h("kritzel-color", { key: '304eda20d9036bf567db7a4f146f1b07a8ca4c34', value: this.displayValues.color, theme: this.theme, size: 18, style: {
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: {
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: '05ff7ea13b5a4850ae49672dfab15280b97e50a1' }, h("kritzel-avatar", { key: '4c33f853508509337033afd7015d7367c5c81d49', user: this.user, size: this.avatarSize })));
1265
+ return (h(Host, { key: '30f2cedeefdef5817fcced6b84e74b53beba76ec' }, h("kritzel-avatar", { key: '41dc69bfbc13471fc686bb52e269dc98d2bfa3a8', 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: 'bb0e0c4181b562bcf6f930508d0799dd24dceb70' }, h("kritzel-dialog", { key: '94b668b6d4c773b30bae2dfad437a0043048dbf3', dialogTitle: this.terms['currentUser.dialogTitle'] ?? 'Account', isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '7023664c08e42668e44d5e1f57fa0d020b65d452', class: "user-info" }, h("kritzel-avatar", { key: '461af0f69cb606ad37f779fc5971296f82e2ff34', user: this.user, size: 80 }), displayName && h("div", { key: '60c6e416942465a9afb872ed12cfec4788c580c9', class: "user-name" }, displayName), this.user?.email && h("div", { key: '74a78e08f1aae64ee7e6ba84ca0eeb2efa1650bc', class: "user-email" }, this.user.email), h("kritzel-button", { key: '2b0bc8ded74baeee7a59b958e1529cd1b8862cd1', class: "logout-button", variant: "primary", onButtonClick: this.handleLogout }, this.terms['menu.logout'] ?? 'Logout')))));
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')))));
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: 'cf2cf1c689bdc8ea393a7ea8f32698cfcdb0e375' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: 'df38c45537217982f7fb9513b954f3b0fa27acea', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
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: {
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: '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) => {
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) => {
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: [],
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:1;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:1;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:1;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:1;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:1;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:1;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:1;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:1;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) {
@@ -2406,7 +2406,6 @@ const KritzelEditor = class {
2406
2406
  contextMenuState;
2407
2407
  normalizedControls = [];
2408
2408
  resolvedMoreMenuItems = [];
2409
- isSyncing = false;
2410
2409
  isLoadingOverlayVisible = false;
2411
2410
  notificationDismissTimeout;
2412
2411
  notificationDismissAnimationTimeout;
@@ -3203,40 +3202,40 @@ const KritzelEditor = class {
3203
3202
  const isLoggedIn = this.isLoggedIn;
3204
3203
  const shouldShowCurrentUser = isLoggedIn;
3205
3204
  const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
3206
- return (h(Host, { key: 'b7b9b3cd6a81c4a7b8aa9730259377c8448336ba' }, h("div", { key: '7714490de58839fffb5a20d355a942dbb4d62409', class: "editor-content", style: {
3205
+ return (h(Host, { key: '10d7810f2db00207f1f024727fb3957dce6496c5' }, h("div", { key: 'f1bced369a6e820d17c89b6e8cdd8f09fc7e084f', class: "editor-content", style: {
3207
3206
  opacity: this.isEditorVisible ? '1' : '0',
3208
3207
  visibility: this.isEditorVisible ? 'visible' : 'hidden',
3209
3208
  transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out',
3210
- } }, h("div", { key: '0e9c1c786beacd19e8ef5a6e519e47efe7bf35f6', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'cd85c3bf1f6b281057d7538cb5d192b8826bc9ee', 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: 'ea0065152125ca3318da9e6fc4c372ae4b71e053', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: 'efde12cf6ed5fe19b651862ef7a123edacfc1e30', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: '3bffe023e9119868ad18a52690272adb073ee3b0', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, h("kritzel-notification-card", { key: 'fcf62343eb401093ae6bfa1298f76d25d48eb0e4', 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: '9de9892adaaf4c123d4636393ccfa13a48730b17', class: "context-menu", items: this.contextMenuState.items, objects: this.contextMenuState.objects, style: {
3209
+ } }, h("div", { key: '42d177987e4d14de10ebb45d673f750022c7d944', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'be583a237b378e0eeb14756fcb0bd9a733b51020', 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: '5713455fd09512085e5048ab3da35499d48c9bbc', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: '41c3fbd197ccca774bb87be7d003374bc548e46e', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: '5634e4cfd0d6cb7accee59e7f239e3d758872202', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, h("kritzel-notification-card", { key: 'b1b2a90199b16e874a54a6435ebb4f873cc8a403', 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: '9b1d0f847171e177a2135454cab0c3761308c396', class: "context-menu", items: this.contextMenuState.items, objects: this.contextMenuState.objects, style: {
3211
3210
  position: 'absolute',
3212
3211
  left: `${this.contextMenuState.position.x}px`,
3213
3212
  top: `${this.contextMenuState.position.y}px`,
3214
3213
  zIndex: '10002',
3215
- }, onActionSelected: event => this.handleContextMenuActionSelected(event), onClose: () => this.hideContextMenu() })), h("kritzel-sync-indicator", { key: 'b0369b8006e4df5b7b395487de085faf11a59ed7', visible: this.isSyncing, text: "Syncing..." }), h("kritzel-loading-overlay", { key: '4509e6fca3da8a8b1a5ac1e82581cfa136ab9913', visible: this.isLoadingOverlayVisible, text: this.resolvedTerms['editor.loading'] ?? 'Loading...' }), h("kritzel-engine", { key: 'ec14d7f4f12dcf08c036a60b3ccc15a9fc558bd7', ref: el => {
3214
+ }, onActionSelected: event => this.handleContextMenuActionSelected(event), onClose: () => this.hideContextMenu() })), h("kritzel-loading-overlay", { key: '693536ad11dbc5080203902f0553d87b628704e9', visible: this.isLoadingOverlayVisible, text: this.resolvedTerms['editor.loading'] ?? 'Loading...' }), h("kritzel-engine", { key: 'd4dacd1803e63417c2d7d9dcd008345e947f2806', ref: el => {
3216
3215
  if (el) {
3217
3216
  this.engineRef = el;
3218
3217
  }
3219
- }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, isPanningEnabled: this.isPanningEnabled, isZoomingEnabled: this.isZoomingEnabled, theme: this.theme, themes: this.themes, licenseKey: this.licenseKey, locale: this.locale, locales: this.locales, fallbackLocale: this.fallbackLocale, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event), onNotificationsChange: event => this.handleNotificationsChange(event), onContextMenuStateChange: event => this.handleContextMenuStateChange(event), onSyncingChange: event => (this.isSyncing = event.detail), onLoadingChange: event => (this.isLoadingOverlayVisible = event.detail) }), h("kritzel-controls", { key: '59413042ba6aff8e972d51e4a04a44893b3a4b97', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
3218
+ }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, isPanningEnabled: this.isPanningEnabled, isZoomingEnabled: this.isZoomingEnabled, theme: this.theme, themes: this.themes, licenseKey: this.licenseKey, locale: this.locale, locales: this.locales, fallbackLocale: this.fallbackLocale, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event), onNotificationsChange: event => this.handleNotificationsChange(event), onContextMenuStateChange: event => this.handleContextMenuStateChange(event), onLoadingChange: event => (this.isLoadingOverlayVisible = event.detail) }), h("kritzel-controls", { key: 'f988a540cae6372b2259167956f81ecfae324bf1', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
3220
3219
  if (el) {
3221
3220
  this.controlsRef = el;
3222
3221
  }
3223
- }, controls: this.normalizedControls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: '4cde7726bc85e97c20687f43673689c6e1825dbd', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: '8b7bd923d0086548325f8c38d0a1c16bb0335ed0', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: 'c445b1efd03ed38e1b75361cd95cdef90f789825', class: "top-right-buttons" }, h("kritzel-settings", { key: 'c7b555a2a35833c362271006089a2632bd5db4f8', ref: el => {
3222
+ }, controls: this.normalizedControls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'c9eca767869cb0504b18b480f14abb4ae9515e6a', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: '9a02ece644a46b9eaa1ce92245df2183bfe7bb5a', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: 'a214d0c6039cfeeda9e4e015e83ca196e4b73b56', class: "top-right-buttons" }, h("kritzel-settings", { key: 'c20518083d832267e85384d14adca6342fa82299', ref: el => {
3224
3223
  if (el) {
3225
3224
  this.settingsRef = el;
3226
3225
  }
3227
- }, 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: '9789c32789c70d817ca894fceee74610c494eede', ref: el => {
3226
+ }, 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: '3306caba17bb638e5285c838539c7862e889dbbd', ref: el => {
3228
3227
  if (el) {
3229
3228
  this.exportRef = el;
3230
3229
  }
3231
- }, 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: '010d5137a3204b5f90ecbfb10c06e4823c0acec3', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '65b04f1d7912cf03baabe5bed8e37db8aaf4fe17', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (h("kritzel-current-user-dialog", { key: 'ffceb4a511e1f51a193d8a3ee9c331d4aa5c270b', ref: el => {
3230
+ }, 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: '1aede3a116f502f017188153803c35e304592575', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '8eaa1d59ca018d1b1190aa01c9fa3d2bd587de4c', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (h("kritzel-current-user-dialog", { key: 'c9a138c1411746654b3a2385c6c5c82b875cf88d', ref: el => {
3232
3231
  if (el) {
3233
3232
  this.currentUserDialogRef = el;
3234
3233
  }
3235
- }, user: this.user, terms: this.resolvedTerms, onLogoutRequest: this.handleCurrentUserLogout })), shouldShowLoginButton && h("kritzel-button", { key: '789427d5e7af880420830f69ec292d5a78831fde', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in'), h("kritzel-more-menu", { key: '053f004ac79f7fa7413238dcd4276f75cb47ce74', items: this.resolvedMoreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: '60f608263145323645f3b292243b63243676680b', ref: el => {
3234
+ }, user: this.user, terms: this.resolvedTerms, onLogoutRequest: this.handleCurrentUserLogout })), shouldShowLoginButton && h("kritzel-button", { key: '9a2900deb52b4d70f1612fb75c5baa9302412ebf', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in'), h("kritzel-more-menu", { key: '027d3c3d847bf975bc5c6f44e9ecf1b452c77bf9', items: this.resolvedMoreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: '461e239bd09abf63b85e6122b1b9f7425da23ec3', ref: el => {
3236
3235
  if (el) {
3237
3236
  this.shareDialogRef = el;
3238
3237
  }
3239
- }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '94e8ccb8da10cc8bfe6bb3debe21af40a47aeea7', ref: el => {
3238
+ }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '1e324fb764ab33047dba85eb34ae51418d081f2c', ref: el => {
3240
3239
  if (el) {
3241
3240
  this.loginDialogRef = el;
3242
3241
  }
@@ -27045,8 +27044,8 @@ class KritzelSvgExportHelper {
27045
27044
  .join('\n ');
27046
27045
  const xmlDecl = includeXmlDeclaration ? '<?xml version="1.0" encoding="UTF-8"?>\n' : '';
27047
27046
  const defsContent = defs.length > 0 ? `\n <defs>\n ${defs.join('\n ')}\n </defs>` : '';
27048
- return `${xmlDecl}<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}" width="${viewBoxWidth}" height="${viewBoxHeight}">${defsContent}
27049
- ${elements}
27047
+ return `${xmlDecl}<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}" width="${viewBoxWidth}" height="${viewBoxHeight}">${defsContent}
27048
+ ${elements}
27050
27049
  </svg>`;
27051
27050
  }
27052
27051
  /**
@@ -27198,8 +27197,8 @@ class KritzelSvgExportHelper {
27198
27197
  const orient = end === 'start' ? 'auto-start-reverse' : 'auto';
27199
27198
  const refX = 0;
27200
27199
  const refY = size / 2;
27201
- return `<marker id="${markerId}" markerWidth="${size}" markerHeight="${size}" refX="${refX}" refY="${refY}" orient="${orient}" markerUnits="userSpaceOnUse">
27202
- <path d="${path}" fill="${fill}" transform="scale(${size / 10})"/>
27200
+ return `<marker id="${markerId}" markerWidth="${size}" markerHeight="${size}" refX="${refX}" refY="${refY}" orient="${orient}" markerUnits="userSpaceOnUse">
27201
+ <path d="${path}" fill="${fill}" transform="scale(${size / 10})"/>
27203
27202
  </marker>`;
27204
27203
  }
27205
27204
  /**
@@ -27246,10 +27245,10 @@ class KritzelSvgExportHelper {
27246
27245
  const opacity = path.opacity !== 1 ? ` opacity="${path.opacity}"` : '';
27247
27246
  const scale = this.getObjectScale(path);
27248
27247
  // Path needs to be wrapped in a g with translation since path.d uses local coordinates
27249
- return `<g transform="${transform}"${opacity}>
27250
- <svg viewBox="${path.viewBox}" width="${path.totalWidth / scale}" height="${path.totalHeight / scale}" overflow="visible">
27251
- <path d="${path.d}" fill="${fill || 'none'}" stroke="${stroke || 'none'}"${path.strokeWidth ? ` stroke-width="${path.strokeWidth}"` : ''}/>
27252
- </svg>
27248
+ return `<g transform="${transform}"${opacity}>
27249
+ <svg viewBox="${path.viewBox}" width="${path.totalWidth / scale}" height="${path.totalHeight / scale}" overflow="visible">
27250
+ <path d="${path.d}" fill="${fill || 'none'}" stroke="${stroke || 'none'}"${path.strokeWidth ? ` stroke-width="${path.strokeWidth}"` : ''}/>
27251
+ </svg>
27253
27252
  </g>`;
27254
27253
  }
27255
27254
  /**
@@ -27265,10 +27264,10 @@ class KritzelSvgExportHelper {
27265
27264
  const scale = this.getObjectScale(line);
27266
27265
  const markerStart = line.hasStartArrow ? ` marker-start="url(#${line.startMarkerId})"` : '';
27267
27266
  const markerEnd = line.hasEndArrow ? ` marker-end="url(#${line.endMarkerId})"` : '';
27268
- return `<g transform="${transform}"${opacity}>
27269
- <svg viewBox="${line.viewBox}" width="${line.totalWidth / scale}" height="${line.totalHeight / scale}" overflow="visible">
27270
- <path d="${line.d}" fill="none" stroke="${stroke}" stroke-width="${line.strokeWidth}" stroke-linecap="round"${markerStart}${markerEnd}/>
27271
- </svg>
27267
+ return `<g transform="${transform}"${opacity}>
27268
+ <svg viewBox="${line.viewBox}" width="${line.totalWidth / scale}" height="${line.totalHeight / scale}" overflow="visible">
27269
+ <path d="${line.d}" fill="none" stroke="${stroke}" stroke-width="${line.strokeWidth}" stroke-linecap="round"${markerStart}${markerEnd}/>
27270
+ </svg>
27272
27271
  </g>`;
27273
27272
  }
27274
27273
  /**
@@ -27292,18 +27291,18 @@ class KritzelSvgExportHelper {
27292
27291
  const textHtml = this.prosemirrorToHtml(shape.content, shape, theme);
27293
27292
  if (textHtml) {
27294
27293
  const fontColor = KritzelColorHelper.resolveThemeColor(shape.fontColor, theme);
27295
- textContent = `
27296
- <foreignObject x="${shape.x}" y="${shape.y}" width="${shape.width}" height="${shape.height}">
27297
- <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;">
27298
- ${textHtml}
27299
- </div>
27294
+ textContent = `
27295
+ <foreignObject x="${shape.x}" y="${shape.y}" width="${shape.width}" height="${shape.height}">
27296
+ <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;">
27297
+ ${textHtml}
27298
+ </div>
27300
27299
  </foreignObject>`;
27301
27300
  }
27302
27301
  }
27303
- return `<g transform="${transform}"${opacity}>
27304
- <svg viewBox="${shape.viewBox}" width="${shape.totalWidth / scale}" height="${shape.totalHeight / scale}" overflow="visible" preserveAspectRatio="none">
27305
- <path d="${pathD}" fill="${fill || 'transparent'}" stroke="${stroke}" stroke-width="${shape.strokeWidth}"/>${textContent}
27306
- </svg>
27302
+ return `<g transform="${transform}"${opacity}>
27303
+ <svg viewBox="${shape.viewBox}" width="${shape.totalWidth / scale}" height="${shape.totalHeight / scale}" overflow="visible" preserveAspectRatio="none">
27304
+ <path d="${pathD}" fill="${fill || 'transparent'}" stroke="${stroke}" stroke-width="${shape.strokeWidth}"/>${textContent}
27305
+ </svg>
27307
27306
  </g>`;
27308
27307
  }
27309
27308
  /**
@@ -27334,10 +27333,10 @@ class KritzelSvgExportHelper {
27334
27333
  // adjusted font-size already accounts for it – keeping both would double-scale
27335
27334
  // the content and overflow the foreignObject.
27336
27335
  const svgFontSizePx = (text.fontSize * (4 / 3) * (text.scaleFactor || 1) / scale).toFixed(4);
27337
- return `<g transform="${transform}"${opacity}>
27338
- <foreignObject x="0" y="0" width="${width}" height="${height}" overflow="visible">
27339
- <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>
27340
- </foreignObject>
27336
+ return `<g transform="${transform}"${opacity}>
27337
+ <foreignObject x="0" y="0" width="${width}" height="${height}" overflow="visible">
27338
+ <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>
27339
+ </foreignObject>
27341
27340
  </g>`;
27342
27341
  }
27343
27342
  /**
@@ -27371,9 +27370,9 @@ class KritzelSvgExportHelper {
27371
27370
  return `<tspan x="0" y="${y}" xml:space="preserve">${this.escapeHtml(line)}</tspan>`;
27372
27371
  })
27373
27372
  .join('');
27374
- return `<g transform="${transform}"${opacity}>
27375
- ${bgRect}
27376
- <text font-family="${this.escapeHtml(text.fontFamily)}" font-size="${resolvedFontSizePx}" fill="${fontColor}">${tspans}</text>
27373
+ return `<g transform="${transform}"${opacity}>
27374
+ ${bgRect}
27375
+ <text font-family="${this.escapeHtml(text.fontFamily)}" font-size="${resolvedFontSizePx}" fill="${fontColor}">${tspans}</text>
27377
27376
  </g>`;
27378
27377
  }
27379
27378
  /**
@@ -27401,8 +27400,8 @@ class KritzelSvgExportHelper {
27401
27400
  const width = image.totalWidth / scale;
27402
27401
  const height = image.totalHeight / scale;
27403
27402
  const href = imageDataUrls?.get(image.id) || image.resolvedSrc || image.src || '';
27404
- return `<g transform="${transform}"${opacity}>
27405
- <image href="${href}" x="0" y="0" width="${width}" height="${height}" preserveAspectRatio="xMidYMid meet"/>
27403
+ return `<g transform="${transform}"${opacity}>
27404
+ <image href="${href}" x="0" y="0" width="${width}" height="${height}" preserveAspectRatio="xMidYMid meet"/>
27406
27405
  </g>`;
27407
27406
  }
27408
27407
  /**
@@ -27422,19 +27421,19 @@ class KritzelSvgExportHelper {
27422
27421
  if (rasterSafeForCanvas) {
27423
27422
  // PNG export: render placeholder rect (foreignObject doesn't rasterize to PNG well)
27424
27423
  console.warn('[KritzelCustomElement SVG Export] Custom elements do not serialize well to PNG. Use SVG export or screenshot instead.');
27425
- return `<g transform="${transform}"${opacity}>
27426
- <rect x="0" y="0" width="${width}" height="${height}" fill="#f0f0f0" stroke="#999" stroke-width="1" />
27427
- <text x="${width / 2}" y="${height / 2}" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#999">[Custom Element]</text>
27424
+ return `<g transform="${transform}"${opacity}>
27425
+ <rect x="0" y="0" width="${width}" height="${height}" fill="#f0f0f0" stroke="#999" stroke-width="1" />
27426
+ <text x="${width / 2}" y="${height / 2}" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#999">[Custom Element]</text>
27428
27427
  </g>`;
27429
27428
  }
27430
27429
  // SVG export: use foreignObject to embed HTML
27431
27430
  const html = obj.element?.outerHTML || '<div style="border:1px dashed #ccc">Empty</div>';
27432
- return `<g transform="${transform}"${opacity}>
27433
- <foreignObject x="0" y="0" width="${width}" height="${height}">
27434
- <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;overflow:hidden;">
27435
- ${html}
27436
- </div>
27437
- </foreignObject>
27431
+ return `<g transform="${transform}"${opacity}>
27432
+ <foreignObject x="0" y="0" width="${width}" height="${height}">
27433
+ <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;overflow:hidden;">
27434
+ ${html}
27435
+ </div>
27436
+ </foreignObject>
27438
27437
  </g>`;
27439
27438
  }
27440
27439
  /**
@@ -27454,8 +27453,8 @@ class KritzelSvgExportHelper {
27454
27453
  return '';
27455
27454
  }
27456
27455
  const opacity = group.opacity !== 1 ? ` opacity="${group.opacity}"` : '';
27457
- return `<g${opacity}>
27458
- ${children}
27456
+ return `<g${opacity}>
27457
+ ${children}
27459
27458
  </g>`;
27460
27459
  }
27461
27460
  /**
@@ -27865,10 +27864,7 @@ const KritzelEngine = class {
27865
27864
  contextMenuStateChange;
27866
27865
  /** Emitted when the combined loading state (external `isLoading` prop or internal workspace loading) changes. */
27867
27866
  loadingChange;
27868
- /** Emitted when remote workspace synchronization is in progress. */
27869
- syncingChange;
27870
27867
  forceUpdate = 0;
27871
- isSyncing = false;
27872
27868
  /** Manually triggers the `objectsSelectionChange` event. */
27873
27869
  async triggerSelectionChange() {
27874
27870
  this.objectsSelectionChange.emit();
@@ -29446,12 +29442,6 @@ const KritzelEngine = class {
29446
29442
  _syncConfigRevision = 0;
29447
29443
  _assetStorageConfigRevision = 0;
29448
29444
  _isWorkspaceLoading = false;
29449
- _syncingRequestId = 0;
29450
- _syncingShowTimeout = null;
29451
- _syncingHideTimeout = null;
29452
- _syncingVisibleSince = null;
29453
- _syncingShowDelayMs = 300;
29454
- _syncingMinimumVisibleMs = 500;
29455
29445
  _hasLoggedUnlicensedWelcomeBanner = false;
29456
29446
  _previousVisibleCustomElements = new Set();
29457
29447
  _revealedImageKeys = new Set();
@@ -29474,66 +29464,6 @@ const KritzelEngine = class {
29474
29464
  this.core.store.state.isLoading = this._isWorkspaceLoading || this.isLoading;
29475
29465
  this.loadingChange.emit(this.core.store.state.isLoading);
29476
29466
  }
29477
- beginSyncingRequest() {
29478
- this._syncingRequestId++;
29479
- this.clearSyncingShowTimeout();
29480
- this.clearSyncingHideTimeout();
29481
- return this._syncingRequestId;
29482
- }
29483
- syncSyncingState(isSyncing, requestId) {
29484
- if (requestId !== this._syncingRequestId) {
29485
- return;
29486
- }
29487
- if (isSyncing) {
29488
- this.clearSyncingHideTimeout();
29489
- if (this.isSyncing || this._syncingShowTimeout !== null) {
29490
- return;
29491
- }
29492
- this._syncingShowTimeout = setTimeout(() => {
29493
- this._syncingShowTimeout = null;
29494
- if (requestId !== this._syncingRequestId || this.isSyncing) {
29495
- return;
29496
- }
29497
- this.isSyncing = true;
29498
- this._syncingVisibleSince = Date.now();
29499
- this.syncingChange.emit(true);
29500
- }, this._syncingShowDelayMs);
29501
- return;
29502
- }
29503
- this.clearSyncingShowTimeout();
29504
- if (!this.isSyncing) {
29505
- return;
29506
- }
29507
- this.clearSyncingHideTimeout();
29508
- const elapsedMs = Date.now() - (this._syncingVisibleSince ?? Date.now());
29509
- const remainingVisibleMs = Math.max(0, this._syncingMinimumVisibleMs - elapsedMs);
29510
- if (remainingVisibleMs === 0) {
29511
- this.finishSyncingState(requestId);
29512
- return;
29513
- }
29514
- this._syncingHideTimeout = setTimeout(() => this.finishSyncingState(requestId), remainingVisibleMs);
29515
- }
29516
- finishSyncingState(requestId) {
29517
- this._syncingHideTimeout = null;
29518
- if (requestId !== this._syncingRequestId || !this.isSyncing) {
29519
- return;
29520
- }
29521
- this.isSyncing = false;
29522
- this._syncingVisibleSince = null;
29523
- this.syncingChange.emit(false);
29524
- }
29525
- clearSyncingShowTimeout() {
29526
- if (this._syncingShowTimeout !== null) {
29527
- clearTimeout(this._syncingShowTimeout);
29528
- this._syncingShowTimeout = null;
29529
- }
29530
- }
29531
- clearSyncingHideTimeout() {
29532
- if (this._syncingHideTimeout !== null) {
29533
- clearTimeout(this._syncingHideTimeout);
29534
- this._syncingHideTimeout = null;
29535
- }
29536
- }
29537
29467
  isNetworkAvailable() {
29538
29468
  return typeof navigator !== 'undefined' && navigator.onLine;
29539
29469
  }
@@ -29639,13 +29569,11 @@ const KritzelEngine = class {
29639
29569
  this.notificationsChange = createEvent(this, "notificationsChange");
29640
29570
  this.contextMenuStateChange = createEvent(this, "contextMenuStateChange");
29641
29571
  this.loadingChange = createEvent(this, "loadingChange");
29642
- this.syncingChange = createEvent(this, "syncingChange");
29643
29572
  this.core = new KritzelCore(this);
29644
29573
  }
29645
29574
  disconnectedCallback() {
29646
29575
  this.throttledPointerMoveMulti.cancel();
29647
29576
  this._revealedImageKeys.clear();
29648
- this.beginSyncingRequest();
29649
29577
  if (this._sceneBootstrapTransitionTimer !== null) {
29650
29578
  clearTimeout(this._sceneBootstrapTransitionTimer);
29651
29579
  this._sceneBootstrapTransitionTimer = null;
@@ -29895,27 +29823,11 @@ const KritzelEngine = class {
29895
29823
  }
29896
29824
  this._isWorkspaceLoading = true;
29897
29825
  this.syncLoadingState();
29898
- const syncingRequestId = this.beginSyncingRequest();
29899
29826
  const initializationPromise = this.core.initializeWorkspace(workspace, options);
29900
29827
  this._workspaceInitializationPromise = initializationPromise;
29901
29828
  this._workspaceInitializationTargetKey = targetKey;
29902
29829
  try {
29903
29830
  await initializationPromise;
29904
- // Track remote sync in the background without blocking the loading overlay.
29905
- const initializedObjects = this.core.store.objects;
29906
- const networkSyncPromise = initializedObjects?.whenNetworkSynced();
29907
- if (networkSyncPromise && this.isNetworkAvailable()) {
29908
- this.syncSyncingState(true, syncingRequestId);
29909
- void networkSyncPromise.finally(() => {
29910
- // Only clear syncing for the currently active object map.
29911
- if (this.core.store.objects === initializedObjects) {
29912
- this.syncSyncingState(false, syncingRequestId);
29913
- }
29914
- });
29915
- }
29916
- else {
29917
- this.syncSyncingState(false, syncingRequestId);
29918
- }
29919
29831
  }
29920
29832
  finally {
29921
29833
  // Only the most recent init clears loading state to prevent race conditions
@@ -30718,7 +30630,7 @@ const KritzelExport = class {
30718
30630
  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 })));
30719
30631
  }
30720
30632
  render() {
30721
- return (h(Host, { key: '68aef5d406aa819577ca773ea3616b93b9dfc9e7' }, h("kritzel-dialog", { key: '5072ac78ce417ed4d057d44f5532c7ac5c0f5dd6', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: '8642b3f39b20a5434a8eb5346fb4a71b9aca39da', class: "export-content" }, h("kritzel-pill-tabs", { key: 'b45da668b2f777a826de32ff2fde51e72f6f3deb', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport()), h("div", { key: '594a6ade24ecd869e23e57228ad2f5eff9ee90a8', slot: "footer" }, h("button", { key: '187c56cfd5f00acedb1dfd337a192495a19b5362', class: "export-primary-button", onClick: this.handleExport }, this.terms['export.exportButton'] ?? 'Export')))));
30633
+ 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')))));
30722
30634
  }
30723
30635
  };
30724
30636
  KritzelExport.style = kritzelExportCss();
@@ -30733,7 +30645,7 @@ const KritzelFont = class {
30733
30645
  size = 24;
30734
30646
  color = '#000000';
30735
30647
  render() {
30736
- return (h(Host, { key: '8e4cf962a3456fb293faa678725e0c86af08bf49' }, h("div", { key: 'acf6986196dffd5c00b7edefa9453259149bf3cf', class: "font-preview", style: {
30648
+ return (h(Host, { key: '08ef3f41967f34f17cbbc42982b0edbb59edb2e2' }, h("div", { key: 'dc7b64d53dbee634a2da068c618a352e6b43bea7', class: "font-preview", style: {
30737
30649
  fontFamily: this.fontFamily,
30738
30650
  fontSize: `${this.size}px`,
30739
30651
  color: this.color
@@ -30783,7 +30695,7 @@ const KritzelFontFamily = class {
30783
30695
  label: option.label,
30784
30696
  style: { fontFamily: option.cssFontFamily ?? option.value },
30785
30697
  }));
30786
- return (h(Host, { key: '42b2805b1d2df47a1b2336dffac32ee50740809e' }, h("kritzel-dropdown", { key: '3e1f019b2ecacea061f687c93f4fdd6a384b93b7', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: selectedFontFamily } })));
30698
+ return (h(Host, { key: '059350f34370f7a291f47a42721ca5d9bb82df49' }, h("kritzel-dropdown", { key: 'fbd8cf1ae463c7e9b76d0ac754a41de54397058e', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: selectedFontFamily } })));
30787
30699
  }
30788
30700
  static get watchers() { return {
30789
30701
  "fontOptions": [{
@@ -30817,7 +30729,7 @@ const KritzelFontSize = class {
30817
30729
  render() {
30818
30730
  const color = 'var(--kritzel-global-text-primary)';
30819
30731
  const sizes = this.sizes ?? [];
30820
- return (h(Host, { key: '18f23b3d58c708a2f385ec539b6a2f02fc33c12a' }, sizes.map(size => (h("div", { tabIndex: 0, class: {
30732
+ return (h(Host, { key: 'c49be084faa8b5eb380ba9bc3382ba8404853e20' }, sizes.map(size => (h("div", { tabIndex: 0, class: {
30821
30733
  'size-container': true,
30822
30734
  'selected': this.selectedSize === size,
30823
30735
  }, onClick: () => this.handleSizeClick(size), onKeyDown: event => this.handleKeyDown(event, size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size, color: color }))))));
@@ -30884,7 +30796,7 @@ const KritzelInput = class {
30884
30796
  this.valueChange.emit(input.value);
30885
30797
  };
30886
30798
  render() {
30887
- return (h(Host, { key: 'b79679b0c9af30caa31423bdadb99819713c567e' }, h("div", { key: '7e54ab560bf19c41cc581e90777f3196931b727a', class: "input-container" }, this.label && h("label", { key: '9d4698d1c145a6aa481b4723d278ceb6e4909344', class: "input-label" }, this.label), h("div", { key: 'b4346d79a9b04ca3e663b490b837af3e8a838075', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, h("input", { key: '686abee5f9444b5227c634bab9743f32d964d74d', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && h("span", { key: 'd0daea49eb781f6c0e6ca310b5f0493e96be5de6', class: "input-suffix" }, this.suffix)))));
30799
+ 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)))));
30888
30800
  }
30889
30801
  static get watchers() { return {
30890
30802
  "value": [{
@@ -30966,10 +30878,10 @@ const KritzelLineEndings = class {
30966
30878
  render() {
30967
30879
  const startEnding = this.getStartEnding();
30968
30880
  const endEnding = this.getEndEnding();
30969
- 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: {
30881
+ 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: {
30970
30882
  'ending-option': true,
30971
30883
  'selected': startEnding === type,
30972
- }, 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: {
30884
+ }, 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: {
30973
30885
  'ending-option': true,
30974
30886
  'selected': endEnding === type,
30975
30887
  }, onClick: () => this.handleEndChange(type), title: type === 'none' ? 'No end arrow' : `${type} end arrow` }, this.renderEndingIcon(type, false))))))));
@@ -30992,7 +30904,7 @@ const KritzelLoadingOverlay = class {
30992
30904
  */
30993
30905
  text = 'Loading...';
30994
30906
  render() {
30995
- return (h(Host, { key: 'bba8ce825e41dff170d9552c28ac996249639ff3' }, h("div", { key: 'af98ab01de836fb6c718f5ceda4a490d91231e66', class: { 'loading-overlay': true, visible: this.visible }, "aria-hidden": this.visible ? 'false' : 'true' }, h("span", { key: '7c04c6abcb445c34f9a036e1797605ef7d575031', class: "loading-spinner" }), this.text)));
30907
+ 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)));
30996
30908
  }
30997
30909
  };
30998
30910
  KritzelLoadingOverlay.style = kritzelLoadingOverlayCss();
@@ -31044,7 +30956,7 @@ const KritzelLoginDialog = class {
31044
30956
  this.dialogClosed.emit();
31045
30957
  };
31046
30958
  render() {
31047
- return (h(Host, { key: 'd805664c63cf0d21c827cd8c4f4e52aeeab55773' }, h("kritzel-dialog", { key: '00be052688de8289cc7940fad83200c4d961d765', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '0dcc0c3e8ae4c058ee76e06d988bd120759f52e1', class: "login-content" }, this.subtitle && (h("p", { key: 'e9a53ce3a50c01426b834cce85438ac676f26ca2', class: "login-subtitle" }, this.subtitle)), h("div", { key: 'dead2054cf268e00e5c4be29a0a953d4dd28db71', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
30959
+ 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: {
31048
30960
  'provider-button': true,
31049
30961
  'is-loading': this.loadingProvider === provider.name,
31050
30962
  'is-disabled': this.loadingProvider !== null && this.loadingProvider !== provider.name,
@@ -31150,15 +31062,15 @@ const KritzelMasterDetail = class {
31150
31062
  const selectedItem = this.items.find(item => item.id === this.selectedItemId);
31151
31063
  const panelId = 'master-detail-panel';
31152
31064
  const selectedTabId = selectedItem ? `tab-${selectedItem.id}` : undefined;
31153
- return (h(Host, { key: 'f54d66ffc0330fa9dc4294f6a21810e3dd5db495' }, h("div", { key: '8f786b099dd5d4b0efcc45cbfb38f37916f60126', class: {
31065
+ return (h(Host, { key: 'fc187266604f9d48210096a1574bf86482498a40' }, h("div", { key: '2886b386c6e96df671ff4902b2c9f7084f0c3191', class: {
31154
31066
  'master-detail-container': true,
31155
31067
  'is-mobile-detail-visible': this.showMobileDetail,
31156
- } }, h("nav", { key: '1a5db5ba8ba393ff7f29b9d438c59acbb6fbd849', 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: {
31068
+ } }, 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: {
31157
31069
  'menu-item': true,
31158
31070
  'is-selected': item.id === this.selectedItemId,
31159
31071
  'is-disabled': !!item.disabled,
31160
31072
  'is-focused': index === this.focusedIndex,
31161
- }, 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: '22943ef64af7b63780fc4a25d0009443b5e1b0ba', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, h("button", { key: '777b26506f739290be2d2267c1bc1381d59475fa', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, h("kritzel-icon", { key: '96fe6b08965d7c5c41673bae0a5c5cc12f575a8f', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), h("slot", { key: '985869d89bb10860e4a4bf221523376b7111ec1d' })))));
31073
+ }, 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' })))));
31162
31074
  }
31163
31075
  static get watchers() { return {
31164
31076
  "selectedItemId": [{
@@ -31231,7 +31143,7 @@ const KritzelMenu = class {
31231
31143
  this.itemCloseChildMenu.emit(event.detail);
31232
31144
  };
31233
31145
  render() {
31234
- return (h(Host, { key: '9ab5256e8888aa48ab6018ffc1109f9614075772', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: '05415b8e7559af7bee51a2dcc62e8ed016fbfc42', 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 })))));
31146
+ 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 })))));
31235
31147
  }
31236
31148
  };
31237
31149
  KritzelMenu.style = kritzelMenuCss();
@@ -31336,12 +31248,12 @@ const KritzelMenuItem = class {
31336
31248
  ];
31337
31249
  }
31338
31250
  render() {
31339
- return (h(Host, { key: '9fd327cadf3c28f51a28d174a1c888c3891cbcbd', tabIndex: this.item.isDisabled ? -1 : 0, class: {
31251
+ return (h(Host, { key: '40bfb2f086d24080276f27d879216958dff0388a', tabIndex: this.item.isDisabled ? -1 : 0, class: {
31340
31252
  'selected': this.item.isSelected,
31341
31253
  'editing': this.item.isEditing,
31342
31254
  'disabled': this.item.isDisabled,
31343
31255
  'child-open': this.item.isChildMenuOpen,
31344
- }, onClick: this.handleItemSelect }, h("div", { key: '080c4fb6e04d6c88d7fa1410a5b86caa4952ed07', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
31256
+ }, onClick: this.handleItemSelect }, h("div", { key: '0aa55293dfc2cf1010c020f3f35ee3a3bd662c8a', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
31345
31257
  }
31346
31258
  static get watchers() { return {
31347
31259
  "item": [{
@@ -31493,7 +31405,7 @@ const KritzelMoreMenu = class {
31493
31405
  this.closeMenu();
31494
31406
  };
31495
31407
  render() {
31496
- return (h(Host, { key: '1c7299e83343fee3daedb5abceb3a341071237db', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, h("div", { key: '1b7f12ee8679d03ef3648cbda4bda16e692a322f', class: { 'more-menu-wrapper': true, visible: this.visible } }, h("button", { key: '71a6270b3b114f1fb030df57075f4adf215914a4', class: "more-menu-button", "data-testid": "more-menu-button", onClick: this.toggleMenu, "aria-label": this.terms['moreMenu.ariaLabel'] ?? 'More options' }, h("kritzel-icon", { key: 'c5ef80ec7d512a24cd45762397ca5c6727d260b3', name: this.icon, size: this.iconSize })), h("kritzel-portal", { key: '9e467825c1c8e81a35403e1d24be0badf1892548', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, h("kritzel-menu", { key: '6e629208a46247d0f5190c376b3feb5dbc54209a', items: this.resolveMenuLabels(this.visibleItems), onItemSelect: this.handleMenuItemSelect })))));
31408
+ 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 })))));
31497
31409
  }
31498
31410
  static get watchers() { return {
31499
31411
  "items": [{
@@ -31665,7 +31577,7 @@ const KritzelNumericInput = class {
31665
31577
  this.valueChange.emit(newValue);
31666
31578
  };
31667
31579
  render() {
31668
- return (h(Host, { key: '7af3efe94c98934dcfe701c516ffc7cea2b4fde9' }, h("div", { key: '81347ea86a62f72b5b7662d90670e2ace98b16e7', class: "input-container" }, this.label && h("label", { key: '35b7650a3c4d1b93dbcb763b0c8f3767e3b519ac', class: "input-label" }, this.label), h("div", { key: '691ade138e5ba2ef51a76b1fc54da51fb7dd7389', class: "input-wrapper" }, h("input", { key: '58445c41cc8be438d1065787d375fb9d271f3873', 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: 'c669fc612696c555b96f046a8c70e75e9650af23', class: "spinner-buttons" }, h("button", { key: 'ae904cc60925d48120405f74d656ee9cbf312d70', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, h("svg", { key: '4a4964336820cfc2128b98bf245556425919dfb6', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: 'f305136d337690b0eaa39983d26a67454e4862da', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: 'c90f2d9a3deac66dc577142f87f73aef491e5f25', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, h("svg", { key: '2a3e33c55b6ace48f15ec56d78c6aab782c64520', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: 'f327413078824800ad061126417a8f25578ba2de', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
31580
+ 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" }))))))));
31669
31581
  }
31670
31582
  static get watchers() { return {
31671
31583
  "value": [{
@@ -31675,7 +31587,7 @@ const KritzelNumericInput = class {
31675
31587
  };
31676
31588
  KritzelNumericInput.style = kritzelNumericInputCss();
31677
31589
 
31678
- 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))}`;
31590
+ 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))}`;
31679
31591
 
31680
31592
  const KritzelOpacitySlider = class {
31681
31593
  constructor(hostRef) {
@@ -31704,7 +31616,7 @@ const KritzelOpacitySlider = class {
31704
31616
  }
31705
31617
  render() {
31706
31618
  const percentage = this.getPercentage();
31707
- return (h(Host, { key: 'f1f0dad662e93506ddfc99e648a3cedc841de730' }, h("div", { key: '7b495a97a92f8fa8b28c33323d60b790781c7271', class: "opacity-container" }, h("div", { key: 'c41d3b0543a3bf78dc15602e0439f56aef21ddbe', class: "slider-wrapper" }, h("input", { key: 'd9ba313d84b91a0f9312ef1ad9fe67cc231073c9', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
31619
+ 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: {
31708
31620
  '--slider-progress': `${percentage}%`,
31709
31621
  '--kritzel-opacity-slider-thumb-border-color': this.previewColor,
31710
31622
  } })))));
@@ -31769,7 +31681,7 @@ const KritzelPillTabs = class {
31769
31681
  buttons?.[newIndex]?.focus();
31770
31682
  }
31771
31683
  render() {
31772
- 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: {
31684
+ 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: {
31773
31685
  'pill-tab': true,
31774
31686
  'selected': this.value === tab.id,
31775
31687
  }, 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)))))));
@@ -32057,7 +31969,7 @@ const KritzelPortal = class {
32057
31969
  this.portal.style.visibility = 'visible';
32058
31970
  }
32059
31971
  render() {
32060
- return (h(Host, { key: '3cdb321c2292fc7927a89efef4f3e4e37d68ac8f', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '54a41f7983405f23e305791bc42513f59c027733' })));
31972
+ return (h(Host, { key: '51633f5b57002a821f73185811626439b0956479', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: 'f5cb7946de5775d1fd64d266f6ba5b952e9d89cb' })));
32061
31973
  }
32062
31974
  static get watchers() { return {
32063
31975
  "anchor": [{
@@ -32071,7 +31983,7 @@ const KritzelPortal = class {
32071
31983
  * This file is auto-generated by the version bump scripts.
32072
31984
  * Do not modify manually.
32073
31985
  */
32074
- const KRITZEL_VERSION = '0.4.24';
31986
+ const KRITZEL_VERSION = '0.4.26';
32075
31987
 
32076
31988
  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)}`;
32077
31989
 
@@ -32283,7 +32195,7 @@ const KritzelSettings = class {
32283
32195
  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)))));
32284
32196
  }
32285
32197
  render() {
32286
- return (h(Host, { key: '830e1761493f6a45dfc8d7a63e260de00418c219' }, h("kritzel-dialog", { key: '35bebb215d583ee21b658c5a926335c6c4ffbbeb', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: '0bfbe1a9de453b9282a4a787aaa243f50c2af620', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
32198
+ 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()))));
32287
32199
  }
32288
32200
  static get watchers() { return {
32289
32201
  "settings": [{
@@ -32316,10 +32228,10 @@ const KritzelShapeFill = class {
32316
32228
  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" })));
32317
32229
  }
32318
32230
  render() {
32319
- return (h(Host, { key: 'ec214708dd4210e0c36734cb81fba76849114f9b' }, h("div", { key: 'd64bacdb7c50b31f3c460bdf2e939b4159d4d000', class: "fill-row" }, h("button", { key: '812735be08265145a13ab116e7153fd684f8b77f', class: {
32231
+ return (h(Host, { key: '6d38a9af2e4c4c7f86ab994c63fc074007c86b48' }, h("div", { key: 'cf58f26cb0e56e274873d11024209c6908d317bb', class: "fill-row" }, h("button", { key: 'c75eed70fe0c2fcbf0fd136bb6fce75b2dbfb45d', class: {
32320
32232
  'fill-option': true,
32321
32233
  'selected': this.value === 'transparent',
32322
- }, onClick: () => this.handleFillChange('transparent'), title: "Transparent background" }, this.renderFillIcon('transparent')), h("button", { key: 'cb5caf2db8aece4bef2eebca37e7ac36383bb450', class: {
32234
+ }, onClick: () => this.handleFillChange('transparent'), title: "Transparent background" }, this.renderFillIcon('transparent')), h("button", { key: '5d6ede439b5d5e55598cd8c20b5851fb9f210463', class: {
32323
32235
  'fill-option': true,
32324
32236
  'selected': this.value === 'filled',
32325
32237
  }, onClick: () => this.handleFillChange('filled'), title: "Filled background" }, this.renderFillIcon('filled')))));
@@ -35523,9 +35435,9 @@ const KritzelShareDialog = class {
35523
35435
  this.dialogClosed.emit();
35524
35436
  };
35525
35437
  render() {
35526
- return (h(Host, { key: '0e6a5c0b25595499bc676008b22a6b27752666f3' }, h("kritzel-dialog", { key: '1770c3cf05e2ff488872da0db990d119f6903f26', dialogTitle: this.terms['share.dialogTitle'] ?? 'Share Workspace', size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, h("div", { key: 'ac629b3c4078c121009d64d7ba29ca8cc0fd7d64', class: "share-content" }, h("div", { key: 'c31fd9bcec831b9105a9784c0764b7d4773fc571', class: "share-section" }, h("div", { key: '1e1177dc959ca3e8e4447e6eda4ed4bf7f2faaff', class: "share-row" }, h("div", { key: 'b82c3a22f22291f2a79b0ebc98825fbc35e849fe', class: "share-label-group" }, h("label", { key: 'f4551050cb0434896f29524b540a7222f48085f2', class: "share-label" }, this.terms['share.linkSharing.label'] ?? 'Link sharing'), h("p", { key: '13ae0f33238041ea949bdd55ac5ba271c58fbdc5', class: "share-description" }, this.internalIsPublic
35438
+ 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
35527
35439
  ? (this.terms['share.linkSharing.enabledDescription'] ?? 'Anyone with the link can access this workspace.')
35528
- : (this.terms['share.linkSharing.disabledDescription'] ?? 'Link sharing is disabled. Only you can access this workspace.'))), h("kritzel-slide-toggle", { key: '9e7b75fe3ae7994fae8a498f1654636481365768', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: this.terms['share.linkSharing.toggleLabel'] ?? 'Enable link sharing' }))), this.internalIsPublic && (h("div", { key: '1fb6f344bc897284c7d942aeddc77968f7af0509', class: "share-section" }, h("div", { key: '23b4889472eeb7c36c5ebf3655883346cb32bf6c', class: "share-url-container" }, h("input", { key: 'ed5b25430b5013c453ea829ce328a5b4adafd2d9', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), h("button", { key: 'ba5b067993e0fab26b149057a4e70f394525cc90', 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: '3f684e493506b62d5c5b32f991c2855f64302e29', name: this.copySuccess ? 'check' : 'copy', size: 18 }))), this.qrCodeDataUrl && (h("div", { key: 'a6314296e3301a1d487d34573fcf581a307cebf4', class: "share-qr-container" }, h("img", { key: '7521ce575728d0418564dc2c407381a536053394', class: "share-qr-image", src: this.qrCodeDataUrl, alt: "QR code for share link" })))))))));
35440
+ : (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" })))))))));
35529
35441
  }
35530
35442
  static get watchers() { return {
35531
35443
  "isPublic": [{
@@ -35566,7 +35478,7 @@ const KritzelSlideToggle = class {
35566
35478
  }
35567
35479
  };
35568
35480
  render() {
35569
- return (h(Host, { key: 'd92f521cf1c7c16db079416dd0943c7bc4f721e9', 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: 'e6086cf26ff3065d1215c548f30318414f710798', class: "toggle-track" }, h("div", { key: '38e6c2edef2fde42ac75063858ad44b83e3f8f7b', class: "toggle-thumb" }))));
35481
+ 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" }))));
35570
35482
  }
35571
35483
  };
35572
35484
  KritzelSlideToggle.style = kritzelSlideToggleCss();
@@ -35666,7 +35578,7 @@ const KritzelSplitButton = class {
35666
35578
  this.menuScrollTop = event.target.scrollTop;
35667
35579
  };
35668
35580
  render() {
35669
- return (h(Host, { key: 'd8dac18091d84994607f96dea4cb09f5823b8477', class: { mobile: this.isTouchDevice } }, h("button", { key: '7601c722ba60bf73e8009c32b40ff88e51680011', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && h("kritzel-icon", { key: '567ea117b77ee0e8a4e023bc80d5cbafd44e7e05', name: this.buttonIcon })), h("div", { key: '53ae4da47818cb474fe659700d59171a9fe1b150', class: "split-divider" }), h("button", { key: '3893a36b2e33c86aa013e4a28a4428ba6ad4bb55', 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: '2dd391e711b37b41ccfe310fc705842fbde80110', name: this.dropdownIcon })), h("kritzel-portal", { key: '5e5d03337b0fd3e11547bb1678595dd1559e0b88', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: 'c50fe3d6591024513e0cb2ecce97f23a34499fe5', 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 }))));
35581
+ 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 }))));
35670
35582
  }
35671
35583
  };
35672
35584
  KritzelSplitButton.style = kritzelSplitButtonCss();
@@ -35687,7 +35599,7 @@ const KritzelStrokeSize = class {
35687
35599
  }
35688
35600
  render() {
35689
35601
  const sizes = this.sizes ?? [];
35690
- return (h(Host, { key: 'c0920f9f5c038774e8515134e5d5a89dc71b11ab' }, h("div", { key: '05dc9a4b9e91114562bdbaede31c37576a9bd6e9', class: "size-grid" }, sizes.map(size => (h("div", { tabIndex: 0, class: {
35602
+ return (h(Host, { key: '8b12f354a3395cd69c7199115ce998cf2eb26eb2' }, h("div", { key: '39008613327d50b75270dd78ea498113e5e9617b', class: "size-grid" }, sizes.map(size => (h("div", { tabIndex: 0, class: {
35691
35603
  'size-container': true,
35692
35604
  'selected': this.selectedSize === size,
35693
35605
  }, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: 'var(--kritzel-global-text-primary)', size: size })))))));
@@ -35695,22 +35607,6 @@ const KritzelStrokeSize = class {
35695
35607
  };
35696
35608
  KritzelStrokeSize.style = kritzelStrokeSizeCss();
35697
35609
 
35698
- const kritzelSyncIndicatorCss = () => `:host{display:contents}.indicator{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:var(--kritzel-editor-sync-indicator-z-index, 10001);pointer-events:none;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--kritzel-editor-sync-indicator-background, rgba(255, 255, 255, 0.92));color:var(--kritzel-editor-sync-indicator-color, #334155);box-shadow:0 2px 10px rgba(0, 0, 0, 0.12);font-family:var(--kritzel-font-family, sans-serif);font-size:12px;line-height:1;font-weight:500;opacity:0;visibility:hidden}.indicator.visible{opacity:1;visibility:visible}.spinner{width:12px;height:12px;border-radius:50%;border:2px solid var(--kritzel-editor-sync-indicator-spinner-track, rgba(148, 163, 184, 0.35));border-top-color:var(--kritzel-editor-sync-indicator-spinner-color, #2563eb);animation:kritzel-sync-indicator-spin 0.8s linear infinite}@keyframes kritzel-sync-indicator-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;
35699
-
35700
- const KritzelSyncIndicator = class {
35701
- constructor(hostRef) {
35702
- registerInstance(this, hostRef);
35703
- }
35704
- /** Whether the indicator is visible. */
35705
- visible = false;
35706
- /** The text displayed next to the spinner. */
35707
- text = 'Syncing...';
35708
- render() {
35709
- return (h(Host, { key: '2622544751cd377f172115f5f73e21e0f0995185' }, h("div", { key: '0cf49cbfbfa4ed0625eeff443ba1e2996a26562e', class: { indicator: true, visible: this.visible }, role: "status", "aria-live": "polite", "aria-label": "Synchronizing workspace" }, h("span", { key: '053ddc85e9ad2210822d3100ecf5d54d7170d470', class: "spinner", "aria-hidden": "true" }), h("span", { key: '94ea7f6be206688e9065d02b1d5c753e3598e9df' }, this.text))));
35710
- }
35711
- };
35712
- KritzelSyncIndicator.style = kritzelSyncIndicatorCss();
35713
-
35714
35610
  const kritzelToolConfigCss = () => `.expand-toggle{background:none;border:none;cursor:var(--kritzel-global-pointer-cursor, pointer);padding:0;margin:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--kritzel-icon-color, currentColor);transition:transform 0.2s ease}.expand-toggle:hover{opacity:0.7}.expand-toggle:focus{outline:none}.expand-toggle:focus-visible{outline:2px solid var(--kritzel-focus-color, #007acc);outline-offset:2px}.expand-toggle:active{transform:scale(0.95)}.divider{height:1px;background-color:var(--kritzel-divider-color, #e0e0e0);margin:4px 0;width:100%}`;
35715
35611
 
35716
35612
  const KritzelToolConfig = class {
@@ -36119,14 +36015,14 @@ const KritzelTooltip = class {
36119
36015
  }
36120
36016
  }
36121
36017
  render() {
36122
- return (h(Host, { key: '2fee8c1343888c34bbed7dd172b946ff732f6fc1', style: {
36018
+ return (h(Host, { key: '407a2f458626f02808fc9d718046a635de71662b', style: {
36123
36019
  position: 'fixed',
36124
36020
  zIndex: '9999',
36125
36021
  transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
36126
36022
  visibility: this.isVisible ? 'visible' : 'hidden',
36127
36023
  left: `${this.positionX}px`,
36128
36024
  bottom: `${this.positionY}px`,
36129
- } }, h("div", { key: 'fe72d28fb81f24309077f30193c84064afcd6ebe', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: 'ee95da259971a58b048780b21a0018fd6731bb03' }))));
36025
+ } }, h("div", { key: '13c00678bd485f1f5bc2676e2c89fd0019f5e089', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: '67937f71c611f36a2c47ee2632a8657ced1d8cc7' }))));
36130
36026
  }
36131
36027
  static get watchers() { return {
36132
36028
  "triggerElement": [{
@@ -36167,7 +36063,7 @@ const KritzelUtilityPanel = class {
36167
36063
  this.redo.emit();
36168
36064
  }
36169
36065
  render() {
36170
- return (h(Host, { key: 'bc0322b40c4ff4fba997f1dc1901edbb934e4a0a' }, h("button", { key: 'ff48698d2757b0d99cacfd4fbaa5a7b0ae8f1604', 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: 'bc6756df10c7979e06cd9ebdb172b5ef54c7bb67', name: "undo" })), h("button", { key: '07afd176ae1b5cb5a65cd097ce4a99a131aee7aa', 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: '4573d7ab91f0cbfa0aafb607050f0b09048d60e1', name: "redo" })), h("div", { key: 'b663c43ef9181f61b12614245a65d063f6d94eaf', class: "utility-separator" }), h("button", { key: '248f7ae7cabbd83585674dcb16124a3f9fa2449b', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": this.terms['utility.delete'] ?? 'Delete selected items' }, h("kritzel-icon", { key: '6cbc48e118c96770333ed3e5947e54e497e93716', name: "delete" }))));
36066
+ 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" }))));
36171
36067
  }
36172
36068
  };
36173
36069
  KritzelUtilityPanel.style = kritzelUtilityPanelCss();
@@ -36188,7 +36084,7 @@ const KritzelWatermark = class {
36188
36084
  label;
36189
36085
  render() {
36190
36086
  const label = this.label ?? this.core.localizationManager.translate('watermark.poweredBy');
36191
- return (h(Host, { key: 'de81b568421f5517fe19897bd4a4a5d58d1f622d' }, h("a", { key: '6278f78180869650afc181aac5c37aa401c09040', class: "watermark-link", href: KRITZEL_WEBSITE_URL, target: "_blank", rel: "noopener noreferrer", part: "watermark", onPointerDown: (ev) => ev.stopPropagation(), onPointerUp: (ev) => ev.stopPropagation() }, label)));
36087
+ 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)));
36192
36088
  }
36193
36089
  };
36194
36090
  KritzelWatermark.style = kritzelWatermarkCss();
@@ -36376,9 +36272,9 @@ const KritzelZoomPanel = class {
36376
36272
  return Number.isFinite(this.zoomPercent) ? Math.max(1, Math.round(this.zoomPercent)) : 100;
36377
36273
  }
36378
36274
  render() {
36379
- return (h(Host, { key: '02de6ea9f2f7b6e057555e3b7e1ee3340cab5fa1' }, h("div", { key: '7531e03a4cfa05165057410e4dde3b4cc695f4de', class: { panel: true, visible: this.visible } }, h("button", { key: '57d324c7ad1c21ee8e107ad41cf1a4b708b0fccc', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomOut'] ?? 'Zoom out', disabled: this.disabled, onClick: this.handleZoomOut }, h("kritzel-icon", { key: '656128018addf58a59f223fab400605aeef4f5a8', name: "minus" })), h("span", { key: '32562a4709f8dea98fe3a80bf8a63722b176a3f4', class: "zoom-level", "aria-live": "polite" }, this.normalizedZoomPercent, "%"), h("button", { key: '4c0c5141597f0265ff4bf9d7bd1105666b6b7a76', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomIn'] ?? 'Zoom in', disabled: this.disabled, onClick: this.handleZoomIn }, h("kritzel-icon", { key: 'f85f69f5b0e214a557dfecb6164f5577af66ca7f', name: "plus" })))));
36275
+ 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" })))));
36380
36276
  }
36381
36277
  };
36382
36278
  KritzelZoomPanel.style = kritzelZoomPanelCss();
36383
36279
 
36384
- export { KritzelActiveUsers as kritzel_active_users, KritzelAvatar as kritzel_avatar, KritzelAwarenessCursors as kritzel_awareness_cursors, KritzelBackToContent as kritzel_back_to_content, KritzelButton as kritzel_button, KritzelColorComponent as kritzel_color, KritzelColorPalette as kritzel_color_palette, KritzelContextMenu as kritzel_context_menu, KritzelControls as kritzel_controls, KritzelCurrentUser as kritzel_current_user, KritzelCurrentUserDialog as kritzel_current_user_dialog, KritzelCursorTrail as kritzel_cursor_trail, KritzelDialog as kritzel_dialog, KritzelDropdown as kritzel_dropdown, KritzelEditor as kritzel_editor, KritzelEngine as kritzel_engine, KritzelExport as kritzel_export, KritzelFont as kritzel_font, KritzelFontFamily as kritzel_font_family, KritzelFontSize as kritzel_font_size, KritzelIcon as kritzel_icon, KritzelInput as kritzel_input, KritzelLineEndings as kritzel_line_endings, KritzelLoadingOverlay as kritzel_loading_overlay, KritzelLoginDialog as kritzel_login_dialog, KritzelMasterDetail as kritzel_master_detail, KritzelMenu as kritzel_menu, KritzelMenuItem as kritzel_menu_item, KritzelMoreMenu as kritzel_more_menu, KritzelNotificationCard as kritzel_notification_card, KritzelNumericInput as kritzel_numeric_input, KritzelOpacitySlider as kritzel_opacity_slider, KritzelPillTabs as kritzel_pill_tabs, KritzelPortal as kritzel_portal, KritzelSettings as kritzel_settings, KritzelShapeFill as kritzel_shape_fill, KritzelShareDialog as kritzel_share_dialog, KritzelSlideToggle as kritzel_slide_toggle, KritzelSplitButton as kritzel_split_button, KritzelStrokeSize as kritzel_stroke_size, KritzelSyncIndicator as kritzel_sync_indicator, KritzelToolConfig as kritzel_tool_config, KritzelTooltip as kritzel_tooltip, KritzelUtilityPanel as kritzel_utility_panel, KritzelWatermark as kritzel_watermark, KritzelWorkspaceManager as kritzel_workspace_manager, KritzelZoomPanel as kritzel_zoom_panel };
36280
+ export { KritzelActiveUsers as kritzel_active_users, KritzelAvatar as kritzel_avatar, KritzelAwarenessCursors as kritzel_awareness_cursors, KritzelBackToContent as kritzel_back_to_content, KritzelButton as kritzel_button, KritzelColorComponent as kritzel_color, KritzelColorPalette as kritzel_color_palette, KritzelContextMenu as kritzel_context_menu, KritzelControls as kritzel_controls, KritzelCurrentUser as kritzel_current_user, KritzelCurrentUserDialog as kritzel_current_user_dialog, KritzelCursorTrail as kritzel_cursor_trail, KritzelDialog as kritzel_dialog, KritzelDropdown as kritzel_dropdown, KritzelEditor as kritzel_editor, KritzelEngine as kritzel_engine, KritzelExport as kritzel_export, KritzelFont as kritzel_font, KritzelFontFamily as kritzel_font_family, KritzelFontSize as kritzel_font_size, KritzelIcon as kritzel_icon, KritzelInput as kritzel_input, KritzelLineEndings as kritzel_line_endings, KritzelLoadingOverlay as kritzel_loading_overlay, KritzelLoginDialog as kritzel_login_dialog, KritzelMasterDetail as kritzel_master_detail, KritzelMenu as kritzel_menu, KritzelMenuItem as kritzel_menu_item, KritzelMoreMenu as kritzel_more_menu, KritzelNotificationCard as kritzel_notification_card, KritzelNumericInput as kritzel_numeric_input, KritzelOpacitySlider as kritzel_opacity_slider, KritzelPillTabs as kritzel_pill_tabs, KritzelPortal as kritzel_portal, KritzelSettings as kritzel_settings, KritzelShapeFill as kritzel_shape_fill, KritzelShareDialog as kritzel_share_dialog, KritzelSlideToggle as kritzel_slide_toggle, KritzelSplitButton as kritzel_split_button, KritzelStrokeSize as kritzel_stroke_size, KritzelToolConfig as kritzel_tool_config, KritzelTooltip as kritzel_tooltip, KritzelUtilityPanel as kritzel_utility_panel, KritzelWatermark as kritzel_watermark, KritzelWorkspaceManager as kritzel_workspace_manager, KritzelZoomPanel as kritzel_zoom_panel };