kritzel-stencil 0.3.12 → 0.3.13

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 (167) hide show
  1. package/dist/cjs/{index-CFnj_FXt.js → index-Xav9JFHg.js} +1 -1
  2. package/dist/cjs/index.cjs.js +41 -3
  3. package/dist/cjs/kritzel-active-users_42.cjs.entry.js +139 -97
  4. package/dist/cjs/kritzel-brush-style.cjs.entry.js +1 -1
  5. package/dist/cjs/loader.cjs.js +2 -2
  6. package/dist/cjs/{schema.constants-CzfoUWxF.js → schema.constants-CMFOYyBj.js} +22 -42
  7. package/dist/cjs/stencil.cjs.js +3 -3
  8. package/dist/collection/classes/core/viewport.class.js +16 -8
  9. package/dist/collection/classes/objects/shape.class.js +2 -1
  10. package/dist/collection/classes/tools/base-tool.class.js +2 -0
  11. package/dist/collection/classes/tools/brush-tool.class.js +1 -0
  12. package/dist/collection/classes/tools/eraser-tool.class.js +1 -0
  13. package/dist/collection/classes/tools/image-tool.class.js +1 -0
  14. package/dist/collection/classes/tools/line-tool.class.js +1 -0
  15. package/dist/collection/classes/tools/selection-tool.class.js +1 -0
  16. package/dist/collection/classes/tools/shape-tool.class.js +1 -0
  17. package/dist/collection/classes/tools/text-tool.class.js +1 -0
  18. package/dist/collection/collection-manifest.json +1 -1
  19. package/dist/collection/components/core/kritzel-editor/kritzel-editor.js +77 -22
  20. package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +106 -2
  21. package/dist/collection/components/shared/kritzel-dropdown/kritzel-dropdown.css +3 -3
  22. package/dist/collection/components/shared/kritzel-input/kritzel-input.css +1 -1
  23. package/dist/collection/components/shared/kritzel-numeric-input/kritzel-numeric-input.css +2 -2
  24. package/dist/collection/components/ui/kritzel-context-menu/kritzel-context-menu.css +7 -0
  25. package/dist/collection/components/ui/kritzel-context-menu/kritzel-context-menu.js +7 -1
  26. package/dist/collection/components/ui/kritzel-export/kritzel-export.css +1 -1
  27. package/dist/collection/components/ui/kritzel-tool-config/kritzel-tool-config.js +2 -2
  28. package/dist/collection/configs/default-asset-storage.config.js +1 -2
  29. package/dist/collection/configs/default-sync.config.js +2 -5
  30. package/dist/collection/constants/version.js +1 -1
  31. package/dist/collection/helpers/tool-config.helper.js +58 -65
  32. package/dist/collection/interfaces/tool-type.interface.js +1 -0
  33. package/dist/collection/themes/dark-theme.js +5 -0
  34. package/dist/collection/themes/light-theme.js +5 -0
  35. package/dist/components/index.js +1 -1
  36. package/dist/components/kritzel-active-users.js +1 -1
  37. package/dist/components/kritzel-avatar.js +1 -1
  38. package/dist/components/kritzel-awareness-cursors.js +1 -1
  39. package/dist/components/kritzel-back-to-content.js +1 -1
  40. package/dist/components/kritzel-brush-style.js +1 -1
  41. package/dist/components/kritzel-button.js +1 -1
  42. package/dist/components/kritzel-color-palette.js +1 -1
  43. package/dist/components/kritzel-color.js +1 -1
  44. package/dist/components/kritzel-context-menu.js +1 -1
  45. package/dist/components/kritzel-controls.js +1 -1
  46. package/dist/components/kritzel-current-user-dialog.js +1 -1
  47. package/dist/components/kritzel-current-user.js +1 -1
  48. package/dist/components/kritzel-cursor-trail.js +1 -1
  49. package/dist/components/kritzel-dialog.js +1 -1
  50. package/dist/components/kritzel-dropdown.js +1 -1
  51. package/dist/components/kritzel-editor.js +1 -1
  52. package/dist/components/kritzel-engine.js +1 -1
  53. package/dist/components/kritzel-export.js +1 -1
  54. package/dist/components/kritzel-font-family.js +1 -1
  55. package/dist/components/kritzel-font-size.js +1 -1
  56. package/dist/components/kritzel-font.js +1 -1
  57. package/dist/components/kritzel-icon.js +1 -1
  58. package/dist/components/kritzel-input.js +1 -1
  59. package/dist/components/kritzel-line-endings.js +1 -1
  60. package/dist/components/kritzel-login-dialog.js +1 -1
  61. package/dist/components/kritzel-master-detail.js +1 -1
  62. package/dist/components/kritzel-menu-item.js +1 -1
  63. package/dist/components/kritzel-menu.js +1 -1
  64. package/dist/components/kritzel-more-menu.js +1 -1
  65. package/dist/components/kritzel-numeric-input.js +1 -1
  66. package/dist/components/kritzel-opacity-slider.js +1 -1
  67. package/dist/components/kritzel-pill-tabs.js +1 -1
  68. package/dist/components/kritzel-portal.js +1 -1
  69. package/dist/components/kritzel-settings.js +1 -1
  70. package/dist/components/kritzel-shape-fill.js +1 -1
  71. package/dist/components/kritzel-share-dialog.js +1 -1
  72. package/dist/components/kritzel-slide-toggle.js +1 -1
  73. package/dist/components/kritzel-split-button.js +1 -1
  74. package/dist/components/kritzel-stroke-size.js +1 -1
  75. package/dist/components/kritzel-tool-config.js +1 -1
  76. package/dist/components/kritzel-tooltip.js +1 -1
  77. package/dist/components/kritzel-utility-panel.js +1 -1
  78. package/dist/components/kritzel-workspace-manager.js +1 -1
  79. package/dist/components/p-2xYAGd0I.js +1 -0
  80. package/dist/components/{p-DdmJquQr.js → p-B2Os1ya_.js} +1 -1
  81. package/dist/components/p-B2w8X7vn.js +1 -0
  82. package/dist/components/{p-DRB3TZzI.js → p-B4b6TDxp.js} +1 -1
  83. package/dist/components/p-B5xxfwKF.js +1 -0
  84. package/dist/components/p-B9hLySCl.js +1 -0
  85. package/dist/components/{p-D0aom7Yu.js → p-BFYtCsZu.js} +1 -1
  86. package/dist/components/{p-CARNM9pf.js → p-BFoK4W--.js} +1 -1
  87. package/dist/components/{p-x38RbGJA.js → p-BYmp9Ovv.js} +1 -1
  88. package/dist/components/{p-KVG5rztB.js → p-BbactVA0.js} +1 -1
  89. package/dist/components/{p-B_JH91jB.js → p-BfNHpqQ8.js} +1 -1
  90. package/dist/components/{p-DXgUuzXW.js → p-BiG1dxPS.js} +1 -1
  91. package/dist/components/{p-Dov3qOAR.js → p-Bj2laX89.js} +1 -1
  92. package/dist/components/{p-Cr7xOsIZ.js → p-BqwqGFQY.js} +1 -1
  93. package/dist/components/{p-DmTG0Y5h.js → p-BzYU3-MJ.js} +1 -1
  94. package/dist/components/p-C-aFOO5p.js +1 -0
  95. package/dist/components/p-C0TN5IAi.js +1 -0
  96. package/dist/components/{p-RnuCSIt-.js → p-C2SX-XRr.js} +1 -1
  97. package/dist/components/{p-guqEWGgV.js → p-CFgkUYoO.js} +1 -1
  98. package/dist/components/{p-BTSOqHMI.js → p-CHrSFOSI.js} +1 -1
  99. package/dist/components/p-CJOhfMU5.js +1 -0
  100. package/dist/components/{p-DJLJfKY2.js → p-COLHjboZ.js} +1 -1
  101. package/dist/components/{p-CKY7AvGR.js → p-COgo9OWy.js} +1 -1
  102. package/dist/components/{p-Do4UlU4e.js → p-CVzH1Oil.js} +1 -1
  103. package/dist/components/{p-DhAM4qeQ.js → p-CXpv9Rxe.js} +1 -1
  104. package/dist/components/{p-Bp3kdH4l.js → p-CcyIAi9S.js} +1 -1
  105. package/dist/components/{p-COIxq81R.js → p-CmuNn1Tc.js} +1 -1
  106. package/dist/components/{p-DfH7YY2C.js → p-D-sRVAbQ.js} +1 -1
  107. package/dist/components/{p-ZgZqbJ58.js → p-DDYoDSrm.js} +1 -1
  108. package/dist/components/{p-u0b2RJAn.js → p-DEy7zJCe.js} +1 -1
  109. package/dist/components/{p-BPEn0_hr.js → p-DM11KXUT.js} +1 -1
  110. package/dist/components/{p-CJERvHdy.js → p-DbB730vO.js} +1 -1
  111. package/dist/components/{p-C8ggg-5h.js → p-Df3BwVGy.js} +1 -1
  112. package/dist/components/{p-Dx_xz_El.js → p-DlwYHzSj.js} +1 -1
  113. package/dist/components/p-DplAQ6jk.js +9 -0
  114. package/dist/components/{p-CJ2V42sz.js → p-FK7b3BGt.js} +1 -1
  115. package/dist/components/{p-CxtTuKCy.js → p-JhOYwUOj.js} +1 -1
  116. package/dist/components/{p-Dw9sKOsb.js → p-SptaSMno.js} +1 -1
  117. package/dist/components/{p-KjtNlFTl.js → p-UoPj5QjH.js} +1 -1
  118. package/dist/components/{p-CYR9wbJg.js → p-dcAernE1.js} +1 -1
  119. package/dist/components/{p-EFyZdR89.js → p-ijIqLY9g.js} +1 -1
  120. package/dist/components/{p-BI_UUiTr.js → p-skWUIStn.js} +1 -1
  121. package/dist/components/{p-DgtrNOWm.js → p-x6doYeiI.js} +1 -1
  122. package/dist/esm/{index-D9HaikfQ.js → index-Dhio9uis.js} +1 -1
  123. package/dist/esm/index.js +42 -4
  124. package/dist/esm/kritzel-active-users_42.entry.js +139 -97
  125. package/dist/esm/kritzel-brush-style.entry.js +1 -1
  126. package/dist/esm/loader.js +3 -3
  127. package/dist/esm/{schema.constants-BcT1vV4J.js → schema.constants-NrtFvKER.js} +23 -42
  128. package/dist/esm/stencil.js +4 -4
  129. package/dist/stencil/index.esm.js +1 -1
  130. package/dist/stencil/p-9adee165.entry.js +9 -0
  131. package/dist/stencil/p-NrtFvKER.js +1 -0
  132. package/dist/stencil/{p-69298b5f.entry.js → p-fb32cd8f.entry.js} +1 -1
  133. package/dist/stencil/stencil.esm.js +1 -1
  134. package/dist/types/classes/core/viewport.class.d.ts +8 -0
  135. package/dist/types/classes/tools/base-tool.class.d.ts +3 -0
  136. package/dist/types/classes/tools/brush-tool.class.d.ts +1 -0
  137. package/dist/types/classes/tools/eraser-tool.class.d.ts +1 -0
  138. package/dist/types/classes/tools/image-tool.class.d.ts +1 -0
  139. package/dist/types/classes/tools/line-tool.class.d.ts +1 -0
  140. package/dist/types/classes/tools/selection-tool.class.d.ts +1 -0
  141. package/dist/types/classes/tools/shape-tool.class.d.ts +1 -0
  142. package/dist/types/classes/tools/text-tool.class.d.ts +1 -0
  143. package/dist/types/components/core/kritzel-editor/kritzel-editor.d.ts +2 -0
  144. package/dist/types/components/core/kritzel-engine/kritzel-engine.d.ts +16 -0
  145. package/dist/types/components/ui/kritzel-context-menu/kritzel-context-menu.d.ts +1 -0
  146. package/dist/types/components.d.ts +26 -14
  147. package/dist/types/configs/default-asset-storage.config.d.ts +1 -1
  148. package/dist/types/configs/default-sync.config.d.ts +1 -1
  149. package/dist/types/constants/version.d.ts +1 -1
  150. package/dist/types/interfaces/theme.interface.d.ts +8 -3
  151. package/dist/types/interfaces/tool-config.interface.d.ts +3 -6
  152. package/dist/types/interfaces/tool-type.interface.d.ts +1 -0
  153. package/dist/types/interfaces/tool.interface.d.ts +1 -0
  154. package/dist/types/stencil-public-runtime.d.ts +1 -0
  155. package/package.json +1 -1
  156. package/dist/components/p-C0wFAtT_.js +0 -1
  157. package/dist/components/p-CWgI1dA0.js +0 -1
  158. package/dist/components/p-DH-H7om7.js +0 -1
  159. package/dist/components/p-DIiGd0LS.js +0 -1
  160. package/dist/components/p-DLh8x1jK.js +0 -9
  161. package/dist/components/p-Dqjil3Hm.js +0 -1
  162. package/dist/components/p-IiG44Unz.js +0 -1
  163. package/dist/components/p-K7ySy791.js +0 -1
  164. package/dist/stencil/p-0c95e585.entry.js +0 -9
  165. package/dist/stencil/p-BcT1vV4J.js +0 -1
  166. /package/dist/components/{p-BWj1eE2b.js → p-B43upypT.js} +0 -0
  167. /package/dist/stencil/{p-D9HaikfQ.js → p-Dhio9uis.js} +0 -0
@@ -22,7 +22,7 @@ const NAMESPACE = 'stencil';
22
22
  const BUILD = /* stencil */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, state: true, updatable: true};
23
23
 
24
24
  /*
25
- Stencil Client Platform v4.43.4 | MIT Licensed | https://stenciljs.com
25
+ Stencil Client Platform v4.43.5 | MIT Licensed | https://stenciljs.com
26
26
  */
27
27
 
28
28
 
@@ -1,9 +1,9 @@
1
1
  'use strict';
2
2
 
3
- var schema_constants = require('./schema.constants-CzfoUWxF.js');
3
+ var schema_constants = require('./schema.constants-CMFOYyBj.js');
4
4
  var Y = require('yjs');
5
+ var yIndexeddb = require('y-indexeddb');
5
6
  var yWebsocket = require('y-websocket');
6
- require('y-indexeddb');
7
7
 
8
8
  function _interopNamespace(e) {
9
9
  if (e && e.__esModule) return e;
@@ -520,6 +520,44 @@ class InMemorySyncProvider {
520
520
  }
521
521
  }
522
522
 
523
+ /**
524
+ * IndexedDB sync provider for local persistence
525
+ */
526
+ class IndexedDBSyncProvider {
527
+ type = 'local';
528
+ provider;
529
+ isConnected = false;
530
+ constructor(docName, doc, options) {
531
+ const dbName = options?.name || docName;
532
+ this.provider = new yIndexeddb.IndexeddbPersistence(dbName, doc);
533
+ }
534
+ async connect() {
535
+ if (this.isConnected) {
536
+ return;
537
+ }
538
+ return new Promise(resolve => {
539
+ this.provider.on('synced', () => {
540
+ this.isConnected = true;
541
+ resolve();
542
+ });
543
+ });
544
+ }
545
+ disconnect() {
546
+ // IndexedDB doesn't need explicit disconnect
547
+ this.isConnected = false;
548
+ }
549
+ async reconnect() {
550
+ this.disconnect();
551
+ return this.connect();
552
+ }
553
+ destroy() {
554
+ if (this.provider) {
555
+ this.provider.destroy();
556
+ }
557
+ this.isConnected = false;
558
+ }
559
+ }
560
+
523
561
  /**
524
562
  * WebSocket sync provider for real-time collaboration
525
563
  */
@@ -1161,7 +1199,6 @@ exports.DEFAULT_BRUSH_CONFIG = schema_constants.DEFAULT_BRUSH_CONFIG;
1161
1199
  exports.DEFAULT_LINE_TOOL_CONFIG = schema_constants.DEFAULT_LINE_TOOL_CONFIG;
1162
1200
  exports.DEFAULT_TEXT_CONFIG = schema_constants.DEFAULT_TEXT_CONFIG;
1163
1201
  exports.IndexedDBAssetProvider = schema_constants.IndexedDBAssetProvider;
1164
- exports.IndexedDBSyncProvider = schema_constants.IndexedDBSyncProvider;
1165
1202
  Object.defineProperty(exports, "KritzelAlignment", {
1166
1203
  enumerable: true,
1167
1204
  get: function () { return schema_constants.KritzelAlignment; }
@@ -1198,5 +1235,6 @@ exports.BroadcastSyncProvider = BroadcastSyncProvider;
1198
1235
  exports.HocuspocusSyncProvider = HocuspocusSyncProvider;
1199
1236
  exports.HttpAssetProvider = HttpAssetProvider;
1200
1237
  exports.InMemorySyncProvider = InMemorySyncProvider;
1238
+ exports.IndexedDBSyncProvider = IndexedDBSyncProvider;
1201
1239
  exports.PresignedAssetProvider = PresignedAssetProvider;
1202
1240
  exports.WebSocketSyncProvider = WebSocketSyncProvider;
@@ -1,7 +1,7 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-CFnj_FXt.js');
4
- var schema_constants = require('./schema.constants-CzfoUWxF.js');
3
+ var index = require('./index-Xav9JFHg.js');
4
+ var schema_constants = require('./schema.constants-CMFOYyBj.js');
5
5
  var Y = require('yjs');
6
6
  require('y-indexeddb');
7
7
  require('y-websocket');
@@ -629,7 +629,7 @@ const KritzelColorPalette = class {
629
629
  };
630
630
  KritzelColorPalette.style = kritzelColorPaletteCss();
631
631
 
632
- const kritzelContextMenuCss = () => `:host{display:block}.menu-container{display:flex;flex-direction:column;gap:var(--kritzel-context-menu-item-spacing, 2px);background-color:var(--kritzel-context-menu-background-color, #ffffff);border-radius:var(--kritzel-context-menu-border-radius, 12px);box-shadow:var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));border:var(--kritzel-context-menu-border, 1px solid #ebebeb);padding:var(--kritzel-context-menu-padding, 4px);min-width:var(--kritzel-context-menu-min-width, 140px)}.menu-item-wrapper{position:relative}.menu-item{display:flex;align-items:center;gap:var(--kritzel-context-menu-item-gap, 8px);background:none;border:none;text-align:left;padding:var(--kritzel-context-menu-item-padding, 8px);border-radius:var(--kritzel-context-menu-item-border-radius, 12px);cursor:var(--kritzel-global-pointer-cursor, pointer);font-size:var(--kritzel-context-menu-item-font-size, 14px);color:var(--kritzel-context-menu-item-color, #333333);white-space:nowrap;-webkit-tap-highlight-color:transparent;width:100%}.menu-item:not(.disabled):hover,.menu-item.submenu-open{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item:not(.disabled):active{background-color:var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%))}.menu-item.disabled{color:var(--kritzel-context-menu-item-disabled-color, #aaaaaa)}.menu-item.has-children.disabled{cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-context-menu-item-color, #333333)}.menu-item kritzel-icon{opacity:0.8;flex-shrink:0}.menu-item.disabled kritzel-icon{opacity:0.4}.menu-item.has-children.disabled kritzel-icon{opacity:0.8}.label{flex-grow:1}.submenu-arrow{margin-left:auto;opacity:0.5}.menu-divider{height:1px;background-color:var(--kritzel-context-menu-divider-color, rgba(0, 0, 0, 0.1));margin:var(--kritzel-context-menu-divider-margin, 4px 8px)}.submenu-container{position:absolute;top:0;left:100%;margin-left:4px;display:flex;flex-direction:column;gap:var(--kritzel-context-menu-item-spacing, 2px);background-color:var(--kritzel-context-menu-background-color, #ffffff);border-radius:var(--kritzel-context-menu-border-radius, 12px);box-shadow:var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));border:var(--kritzel-context-menu-border, 1px solid #ebebeb);padding:var(--kritzel-context-menu-padding, 4px);min-width:120px}.submenu-container.position-left{left:auto;right:100%;margin-left:0;margin-right:4px}`;
632
+ const kritzelContextMenuCss = () => `:host{display:block}.menu-container{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--kritzel-context-menu-item-spacing, 2px);background-color:var(--kritzel-context-menu-background-color, #ffffff);border-radius:var(--kritzel-context-menu-border-radius, 12px);box-shadow:var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));border:var(--kritzel-context-menu-border, 1px solid #ebebeb);padding:var(--kritzel-context-menu-padding, 4px);min-width:var(--kritzel-context-menu-min-width, 140px)}.menu-item-wrapper{position:relative}.menu-item{display:flex;align-items:center;gap:var(--kritzel-context-menu-item-gap, 8px);background:none;border:none;text-align:left;padding:var(--kritzel-context-menu-item-padding, 8px);border-radius:var(--kritzel-context-menu-item-border-radius, 12px);cursor:var(--kritzel-global-pointer-cursor, pointer);font-size:var(--kritzel-context-menu-item-font-size, 14px);color:var(--kritzel-context-menu-item-color, #333333);white-space:nowrap;-webkit-tap-highlight-color:transparent;width:100%;min-width:0}.menu-item:not(.disabled):hover,.menu-item.submenu-open{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item:not(.disabled):active{background-color:var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%))}.menu-item.disabled{color:var(--kritzel-context-menu-item-disabled-color, #aaaaaa)}.menu-item.has-children.disabled{cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-context-menu-item-color, #333333)}.menu-item kritzel-icon{opacity:0.8;flex-shrink:0}.menu-item.disabled kritzel-icon{opacity:0.4}.menu-item.has-children.disabled kritzel-icon{opacity:0.8}.label{flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.submenu-arrow{margin-left:auto;opacity:0.5}.menu-divider{height:1px;background-color:var(--kritzel-context-menu-divider-color, rgba(0, 0, 0, 0.1));margin:var(--kritzel-context-menu-divider-margin, 4px 8px)}.submenu-container{position:absolute;top:0;left:100%;z-index:2;margin-left:4px;display:flex;flex-direction:column;gap:var(--kritzel-context-menu-item-spacing, 2px);background-color:var(--kritzel-context-menu-background-color, #ffffff);border-radius:var(--kritzel-context-menu-border-radius, 12px);box-shadow:var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));border:var(--kritzel-context-menu-border, 1px solid #ebebeb);padding:var(--kritzel-context-menu-padding, 4px);min-width:120px}.submenu-container.position-left{left:auto;right:100%;margin-left:0;margin-right:4px}`;
633
633
 
634
634
  const VIEWPORT_PADDING = 8;
635
635
  const SUBMENU_DELAY = 150;
@@ -750,6 +750,11 @@ const KritzelContextMenu = class {
750
750
  const idx = path.lastIndexOf('.');
751
751
  return idx === -1 ? '' : path.substring(0, idx);
752
752
  }
753
+ getMenuDepth(path) {
754
+ if (!path)
755
+ return 0;
756
+ return path.split('.').length;
757
+ }
753
758
  pruneStaleRefs() {
754
759
  const openPaths = new Set(this.getOpenSubmenuPaths());
755
760
  for (const key of Array.from(this.submenuRefs.keys())) {
@@ -861,7 +866,8 @@ const KritzelContextMenu = class {
861
866
  }
862
867
  renderSubmenu(processedChildren, path) {
863
868
  const position = this.submenuPositions[path] === 'left' ? 'left' : 'right';
864
- return (index.h("div", { class: { 'submenu-container': true, 'position-left': position === 'left' }, key: `submenu-${path}`, ref: el => el && this.submenuRefs.set(path, el), onMouseEnter: () => this.handleSubmenuMouseEnter(), onMouseLeave: () => this.handleSubmenuMouseLeave(path) }, this.renderItems(processedChildren, path)));
869
+ const zIndex = this.getMenuDepth(path) + 1;
870
+ return (index.h("div", { class: { 'submenu-container': true, 'position-left': position === 'left' }, key: `submenu-${path}`, style: { zIndex: String(zIndex) }, ref: el => el && this.submenuRefs.set(path, el), onMouseEnter: () => this.handleSubmenuMouseEnter(), onMouseLeave: () => this.handleSubmenuMouseLeave(path) }, this.renderItems(processedChildren, path)));
865
871
  }
866
872
  render() {
867
873
  if (!this.processedItems || this.processedItems.length === 0) {
@@ -879,67 +885,65 @@ KritzelContextMenu.style = kritzelContextMenuCss();
879
885
 
880
886
  class KritzelToolConfigHelper {
881
887
  static getToolConfig(tool) {
882
- const toolConstructorName = tool?.constructor?.name;
883
- if (tool instanceof schema_constants.KritzelSelectionTool || toolConstructorName === 'KritzelSelectionTool') {
884
- return tool.getToolConfig();
885
- }
886
- if (tool instanceof schema_constants.KritzelBrushTool || toolConstructorName === 'KritzelBrushTool') {
887
- return {
888
- type: 'brush',
889
- colorProperty: 'color',
890
- sizeProperty: 'size',
891
- opacityProperty: 'opacity',
892
- paletteSource: 'palette',
893
- sizesSource: 'sizes',
894
- controls: [
895
- { type: 'stroke-size', propertyName: 'size' },
896
- ],
897
- };
898
- }
899
- if (tool instanceof schema_constants.KritzelLineTool || toolConstructorName === 'KritzelLineTool') {
900
- return {
901
- type: 'line',
902
- colorProperty: 'color',
903
- sizeProperty: 'size',
904
- opacityProperty: 'opacity',
905
- paletteSource: 'palette',
906
- sizesSource: 'sizes',
907
- controls: [
908
- { type: 'stroke-size', propertyName: 'size' },
909
- { type: 'line-endings', propertyName: 'arrows', additionalProps: {} },
910
- ],
911
- };
912
- }
913
- if (tool instanceof schema_constants.KritzelShapeTool || toolConstructorName === 'KritzelShapeTool') {
914
- return {
915
- type: 'shape',
916
- colorProperty: 'strokeColor',
917
- sizeProperty: 'strokeWidth',
918
- opacityProperty: 'opacity',
919
- paletteSource: 'palette',
920
- sizesSource: 'sizes',
921
- controls: [
922
- { type: 'stroke-size', propertyName: 'strokeWidth' },
923
- { type: 'shape-fill', propertyName: 'fillColor', additionalProps: {} },
924
- ],
925
- };
926
- }
927
- if (tool instanceof schema_constants.KritzelTextTool || toolConstructorName === 'KritzelTextTool') {
928
- return {
929
- type: 'text',
930
- colorProperty: 'fontColor',
931
- sizeProperty: 'fontSize',
932
- opacityProperty: 'opacity',
933
- paletteSource: 'palette',
934
- sizesSource: 'sizes',
935
- controls: [
936
- { type: 'font-size', propertyName: 'fontSize', additionalProps: {} },
937
- { type: 'font-family', propertyName: 'fontFamily' },
938
- ],
939
- };
888
+ switch (tool?.toolType) {
889
+ case 'selection':
890
+ return 'getToolConfig' in tool && typeof tool.getToolConfig === 'function'
891
+ ? tool.getToolConfig()
892
+ : null;
893
+ case 'brush':
894
+ return {
895
+ type: 'brush',
896
+ colorProperty: 'color',
897
+ sizeProperty: 'size',
898
+ opacityProperty: 'opacity',
899
+ paletteSource: 'palette',
900
+ sizesSource: 'sizes',
901
+ controls: [
902
+ { type: 'stroke-size', propertyName: 'size' },
903
+ ],
904
+ };
905
+ case 'line':
906
+ return {
907
+ type: 'line',
908
+ colorProperty: 'color',
909
+ sizeProperty: 'size',
910
+ opacityProperty: 'opacity',
911
+ paletteSource: 'palette',
912
+ sizesSource: 'sizes',
913
+ controls: [
914
+ { type: 'stroke-size', propertyName: 'size' },
915
+ { type: 'line-endings', propertyName: 'arrows', additionalProps: {} },
916
+ ],
917
+ };
918
+ case 'shape':
919
+ return {
920
+ type: 'shape',
921
+ colorProperty: 'strokeColor',
922
+ sizeProperty: 'strokeWidth',
923
+ opacityProperty: 'opacity',
924
+ paletteSource: 'palette',
925
+ sizesSource: 'sizes',
926
+ controls: [
927
+ { type: 'stroke-size', propertyName: 'strokeWidth' },
928
+ { type: 'shape-fill', propertyName: 'fillColor', additionalProps: {} },
929
+ ],
930
+ };
931
+ case 'text':
932
+ return {
933
+ type: 'text',
934
+ colorProperty: 'fontColor',
935
+ sizeProperty: 'fontSize',
936
+ opacityProperty: 'opacity',
937
+ paletteSource: 'palette',
938
+ sizesSource: 'sizes',
939
+ controls: [
940
+ { type: 'font-size', propertyName: 'fontSize', additionalProps: {} },
941
+ { type: 'font-family', propertyName: 'fontFamily' },
942
+ ],
943
+ };
944
+ default:
945
+ return null;
940
946
  }
941
- // Tool is not configurable (e.g., selection, eraser, image)
942
- return null;
943
947
  }
944
948
  }
945
949
 
@@ -1898,7 +1902,7 @@ const KritzelDialog = class {
1898
1902
  };
1899
1903
  KritzelDialog.style = kritzelDialogCss();
1900
1904
 
1901
- 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: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: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: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}`;
1905
+ 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}`;
1902
1906
 
1903
1907
  const KritzelDropdown = class {
1904
1908
  constructor(hostRef) {
@@ -2175,12 +2179,10 @@ const ABSOLUTE_SCALE_MAX = 1000;
2175
2179
  const ABSOLUTE_SCALE_MIN = 0.0001;
2176
2180
 
2177
2181
  /**
2178
- * Default sync configuration - IndexedDB
2182
+ * Default sync configuration - None
2179
2183
  */
2180
2184
  const DEFAULT_SYNC_CONFIG = {
2181
- providers: [
2182
- schema_constants.IndexedDBSyncProvider
2183
- ],
2185
+ providers: [],
2184
2186
  };
2185
2187
 
2186
2188
  const kritzelEditorCss = () => `kritzel-editor{display:flex;margin:0;position:relative;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:start;line-height:normal}kritzel-controls{position:absolute;left:0;right:0;margin-inline:auto;width:max-content;max-width:calc(100% - 16px);bottom:var(--kritzel-editor-controls-bottom, 14px);transition:transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out)}kritzel-controls.keyboard-open{transform:var(--kritzel-editor-controls-transform, translateY(300%))}.top-left-buttons{position:absolute;top:var(--kritzel-editor-top-left-buttons-top, 14px);left:var(--kritzel-editor-top-left-buttons-left, 14px);display:flex;align-items:flex-start;gap:8px}.top-right-buttons{position:absolute;top:var(--kritzel-editor-top-right-buttons-top, 14px);right:var(--kritzel-editor-top-right-buttons-right, 14px);display:flex;align-items:center;gap:8px}.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}`;
@@ -2372,15 +2374,7 @@ const KritzelEditor = class {
2372
2374
  /** The element to use as the target for the cursor. Defaults to the editor container if not set. */
2373
2375
  cursorTarget;
2374
2376
  /** Optional login configuration. When provided, a "Sign in" button is shown that opens a login dialog with the configured providers. */
2375
- loginConfig = {
2376
- providers: [
2377
- {
2378
- label: 'Sign in with Google',
2379
- icon: 'google',
2380
- name: 'Google',
2381
- },
2382
- ],
2383
- };
2377
+ loginConfig;
2384
2378
  /** Whether the editor is in a loading state. When true, a loading overlay is displayed. */
2385
2379
  isLoading = false;
2386
2380
  /** Optional unique identifier for namespacing storage keys across multiple editor instances. */
@@ -2509,12 +2503,18 @@ const KritzelEditor = class {
2509
2503
  async centerObjectInViewport(object) {
2510
2504
  return this.engineRef.centerObjectInViewport(object);
2511
2505
  }
2506
+ async panToObject(object) {
2507
+ return this.engineRef.panToObject(object);
2508
+ }
2512
2509
  async backToContent() {
2513
2510
  return this.engineRef.backToContent();
2514
2511
  }
2515
2512
  async centerAllObjects(animate = true) {
2516
2513
  return this.engineRef.centerAllObjects(animate);
2517
2514
  }
2515
+ async centerObjects(objects, animate = true) {
2516
+ return this.engineRef.centerObjects(objects, animate);
2517
+ }
2518
2518
  async setViewport(x, y, scale) {
2519
2519
  return this.engineRef.setViewport(x, y, scale);
2520
2520
  }
@@ -2968,31 +2968,31 @@ const KritzelEditor = class {
2968
2968
  const isLoggedIn = this.isLoggedIn;
2969
2969
  const shouldShowCurrentUser = isLoggedIn;
2970
2970
  const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
2971
- return (index.h(index.Host, { key: '440621eb23598732c63d4be92ae16785d84b3d6f', style: {
2971
+ return (index.h(index.Host, { key: '673bfb4d2d5224c3c3a11bada8afb1c3b90aa03d', style: {
2972
2972
  opacity: this.isEditorVisible ? '1' : '0',
2973
2973
  visibility: this.isEditorVisible ? 'visible' : 'hidden',
2974
2974
  transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out',
2975
- } }, index.h("div", { key: 'b20c930c8094f7ab9db8fdb09428cf34a2cab024', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: 'a6ff7e54fb3d45f4a3b1d009b12d2f6229d14d87', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-back-to-content", { key: 'a3cbb86082c2f0768b7457ec25740d27200e287b', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), index.h("kritzel-engine", { key: '82e611de33c40997943e1fd702f0b601fadbf591', ref: el => {
2975
+ } }, index.h("div", { key: 'cee9075de7a44953b3d017c334b19151ab7bb926', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: 'a7a6c246dabe3ddbab3d807a9f0c275bc621363f', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-back-to-content", { key: 'b5452a22f7fd434b8816bdaa117d457b2f1879f3', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), index.h("kritzel-engine", { key: 'a08648ec91f678724171238735b1073ffb53ca73', ref: el => {
2976
2976
  if (el) {
2977
2977
  this.engineRef = el;
2978
2978
  }
2979
- }, 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, wheelEnabled: this.wheelEnabled, theme: this.theme, themes: this.themes, 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) }), index.h("kritzel-controls", { key: 'eb48df395318bde3fc0bc48784510bf5139bc9e8', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
2979
+ }, 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, wheelEnabled: this.wheelEnabled, theme: this.theme, themes: this.themes, 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) }), index.h("kritzel-controls", { key: 'a7b78a31bda3fe2fe1def6be339894b83ea3ee38', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
2980
2980
  if (el) {
2981
2981
  this.controlsRef = el;
2982
2982
  }
2983
- }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: '1259089ca70c634621f7e2db274868b12a3e5e8a', class: "top-right-buttons" }, index.h("kritzel-settings", { key: 'b38b01040714827a5d824694b481edb8094eafd8', ref: el => {
2983
+ }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: '0b3f4879c44864661a5bf5f126da3a869fa808f5', class: "top-right-buttons" }, index.h("kritzel-settings", { key: '7da7fb709f2e4a31a6df1f7382a91f4d78dc6e35', ref: el => {
2984
2984
  if (el) {
2985
2985
  this.settingsRef = el;
2986
2986
  }
2987
- }, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], settings: this.currentSettingsConfig, onSettingsChange: event => this.handleSettingsChange(event) }), index.h("kritzel-export", { key: 'a678999cac4f3618c44d1340b6905ec2f3061dd5', ref: el => {
2987
+ }, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], settings: this.currentSettingsConfig, onSettingsChange: event => this.handleSettingsChange(event) }), index.h("kritzel-export", { key: 'f362b0181231da30efc927cbebd818a9a64991b0', ref: el => {
2988
2988
  if (el) {
2989
2989
  this.exportRef = el;
2990
2990
  }
2991
- }, workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), index.h("kritzel-active-users", { key: '7d0b70c7347e7fda4e96a59b27b8fb6c2eb77f49', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: 'ed364648df937fb1e84d850953fee51f6e54e95e', user: this.user }), shouldShowLoginButton && (index.h("kritzel-button", { key: 'dd24afa0746a311ac4a27000281fef28bddf844a', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in")), index.h("kritzel-more-menu", { key: '713da1a5313809083470a8a23c0531e9e198c4bd', items: this.moreMenuItems, visible: this.isMoreMenuVisible }), index.h("kritzel-share-dialog", { key: '37f80fdb7b1087926b72ece7693f816c9f85f746', ref: el => {
2991
+ }, workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), index.h("kritzel-active-users", { key: '1cf065fed9b27ffb19a3695425c797a3bc29fa51', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: '7d6e8e227f36164daed7303645bdd490b362b4d0', user: this.user }), shouldShowLoginButton && (index.h("kritzel-button", { key: '1dcf1f5ae547f4c2c5b7ec88b34bcad0a2a4da28', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in")), index.h("kritzel-more-menu", { key: 'cb80dea4bb9861b6d627399c9aad64075cb8944b', items: this.moreMenuItems, visible: this.isMoreMenuVisible }), index.h("kritzel-share-dialog", { key: 'd12bc96d7af23941e4e054dadfddcf6429de6208', ref: el => {
2992
2992
  if (el) {
2993
2993
  this.shareDialogRef = el;
2994
2994
  }
2995
- }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: 'f5b59522082824bc236784a9083f1d425852d487', ref: el => {
2995
+ }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: '6c29a13069cd74972e94bbc245f26375fa95f4cc', ref: el => {
2996
2996
  if (el) {
2997
2997
  this.loginDialogRef = el;
2998
2998
  }
@@ -20935,22 +20935,21 @@ class KritzelViewport {
20935
20935
  return true;
20936
20936
  }
20937
20937
  /**
20938
- * Centers and fits ALL objects in the viewport, including objects not currently rendered.
20939
- * Calculates the combined bounding box of all objects and optionally animates the viewport to show them.
20938
+ * Centers and fits the provided objects in the viewport.
20939
+ * Calculates the combined bounding box of the provided objects and optionally animates the viewport to show them.
20940
+ * @param objects - Objects to include in the fit operation.
20940
20941
  * @param animate - Whether to animate the viewport transition (default: true)
20941
- * @returns true if objects were found and viewport was adjusted, false if no objects exist
20942
+ * @returns true if at least one object was provided and viewport was adjusted, false otherwise
20942
20943
  */
20943
- centerFitAllObjects(animate = true) {
20944
- const allObjects = this._core.store.allNonSelectionObjects;
20945
- if (allObjects.length === 0) {
20944
+ centerFitObjects(objects, animate = true) {
20945
+ if (objects.length === 0) {
20946
20946
  return false;
20947
20947
  }
20948
- // Calculate combined bounds of all objects
20949
20948
  let minX = Infinity;
20950
20949
  let minY = Infinity;
20951
20950
  let maxX = -Infinity;
20952
20951
  let maxY = -Infinity;
20953
- for (const obj of allObjects) {
20952
+ for (const obj of objects) {
20954
20953
  const bounds = obj.rotatedBoundingBox;
20955
20954
  minX = Math.min(minX, bounds.x);
20956
20955
  minY = Math.min(minY, bounds.y);
@@ -20973,6 +20972,15 @@ class KritzelViewport {
20973
20972
  this.animateViewportTo(targetTranslateX, targetTranslateY, clampedScale, animate ? 150 : 0);
20974
20973
  return true;
20975
20974
  }
20975
+ /**
20976
+ * Centers and fits ALL objects in the viewport, including objects not currently rendered.
20977
+ * Calculates the combined bounding box of all objects and optionally animates the viewport to show them.
20978
+ * @param animate - Whether to animate the viewport transition (default: true)
20979
+ * @returns true if objects were found and viewport was adjusted, false if no objects exist
20980
+ */
20981
+ centerFitAllObjects(animate = true) {
20982
+ return this.centerFitObjects(this._core.store.allNonSelectionObjects, animate);
20983
+ }
20976
20984
  }
20977
20985
 
20978
20986
  /** The amount of pixels to move an object when using arrow key nudging. */
@@ -26497,8 +26505,18 @@ const KritzelEngine = class {
26497
26505
  }
26498
26506
  /** Context menu items shown when right-clicking the canvas background. */
26499
26507
  globalContextMenuItems;
26508
+ onGlobalContextMenuItemsChange(newValue) {
26509
+ if (this.contextMenuHandler) {
26510
+ this.contextMenuHandler.globalContextMenuItems = newValue ?? [];
26511
+ }
26512
+ }
26500
26513
  /** Context menu items shown when right-clicking a selected object. */
26501
26514
  objectContextMenuItems;
26515
+ onObjectContextMenuItemsChange(newValue) {
26516
+ if (this.contextMenuHandler) {
26517
+ this.contextMenuHandler.objectContextMenuItems = newValue ?? [];
26518
+ }
26519
+ }
26502
26520
  /** Maximum zoom scale allowed. Clamped to the absolute maximum defined by the engine. */
26503
26521
  scaleMax = ABSOLUTE_SCALE_MAX;
26504
26522
  validateScaleMax(newValue) {
@@ -27223,6 +27241,14 @@ const KritzelEngine = class {
27223
27241
  this.core.rerender();
27224
27242
  return object;
27225
27243
  }
27244
+ /**
27245
+ * Pans the viewport to center on the given object without changing the zoom level.
27246
+ * Unlike `centerObjectInViewport`, this moves the camera — not the object.
27247
+ * @param object - The object whose center the viewport should pan to.
27248
+ */
27249
+ async panToObject(object) {
27250
+ this.viewport.panTo(object.centerX, object.centerY);
27251
+ }
27226
27252
  /**
27227
27253
  * Pans and zooms the viewport to fit the nearest content, with padding.
27228
27254
  * Useful when the user has panned away from all objects.
@@ -27240,6 +27266,16 @@ const KritzelEngine = class {
27240
27266
  async centerAllObjects(animate = true) {
27241
27267
  return this.viewport.centerFitAllObjects(animate);
27242
27268
  }
27269
+ /**
27270
+ * Pans and zooms the viewport to fit the provided objects.
27271
+ * Calculates the combined bounding box of the given objects and centers the viewport to show them.
27272
+ * @param objects - The objects to center and fit in the viewport.
27273
+ * @param animate - Whether to animate the viewport transition (default: true).
27274
+ * @returns `true` if objects were provided and the viewport was adjusted, `false` otherwise.
27275
+ */
27276
+ async centerObjects(objects, animate = true) {
27277
+ return this.viewport.centerFitObjects(objects, animate);
27278
+ }
27243
27279
  /**
27244
27280
  * Sets the viewport to center on the given world coordinates at the specified scale.
27245
27281
  * @param x - X position in world coordinates to center on.
@@ -28663,6 +28699,12 @@ const KritzelEngine = class {
28663
28699
  "user": [{
28664
28700
  "onUserChange": 0
28665
28701
  }],
28702
+ "globalContextMenuItems": [{
28703
+ "onGlobalContextMenuItemsChange": 0
28704
+ }],
28705
+ "objectContextMenuItems": [{
28706
+ "onObjectContextMenuItemsChange": 0
28707
+ }],
28666
28708
  "scaleMax": [{
28667
28709
  "validateScaleMax": 0
28668
28710
  }],
@@ -28706,7 +28748,7 @@ const KritzelEngine = class {
28706
28748
  };
28707
28749
  KritzelEngine.style = kritzelEngineCss();
28708
28750
 
28709
- const kritzelExportCss = () => `:host{display:flex;flex-direction:column;min-height:0}.export-content{display:flex;flex-direction:column;gap:16px;padding:0;flex:1}.export-content kritzel-pill-tabs{align-self:center}.export-tab-content{display:flex;flex-direction:column;gap:16px;min-height:330px}.format-selection{display:flex;flex-direction:column;gap:6px}.format-selection label{font-size:14px;font-weight:500;color:var(--kritzel-global-text-primary, #333)}.export-primary-button{width:100%;padding:12px 24px;background-color:var(--kritzel-global-primary-color, #007AFF);color:var(--kritzel-global-primary-text-color, #fff);border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color 0.2s ease;-webkit-tap-highlight-color:transparent}.export-primary-button:hover{background-color:var(--kritzel-global-primary-hover-color, #0066d6)}.export-primary-button:focus-visible{outline:revert;outline-offset:revert}.preview-container{width:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;margin-bottom:8px}.preview-container img{max-width:100%;max-height:250px;object-fit:contain;box-shadow:0 4px 8px rgba(0, 0, 0, 0.15);border-radius:4px;border:1px solid var(--kritzel-global-border-color, #dbdbdb)}.export-content p{margin:0;color:var(--kritzel-global-text-secondary, #666)}@media (max-width: 576px){.export-tab-content{flex:1;min-height:0}}`;
28751
+ const kritzelExportCss = () => `:host{display:flex;flex-direction:column;min-height:0}.export-content{display:flex;flex-direction:column;gap:16px;padding:0;flex:1}.export-content kritzel-pill-tabs{align-self:center}.export-tab-content{display:flex;flex-direction:column;gap:16px;min-height:330px}.format-selection{display:flex;flex-direction:column;gap:6px}.format-selection label{font-size:14px;font-weight:500;color:var(--kritzel-global-text-primary, #333)}.export-primary-button{width:100%;padding:12px 24px;background-color:var(--kritzel-global-primary-color, #007AFF);color:var(--kritzel-global-primary-text-color, #fff);border:none;border-radius:var(--kritzel-button-border-radius, 8px);font-size:14px;font-weight:600;cursor:pointer;transition:background-color 0.2s ease;-webkit-tap-highlight-color:transparent}.export-primary-button:hover{background-color:var(--kritzel-global-primary-hover-color, #0066d6)}.export-primary-button:focus-visible{outline:revert;outline-offset:revert}.preview-container{width:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;margin-bottom:8px}.preview-container img{max-width:100%;max-height:250px;object-fit:contain;box-shadow:0 4px 8px rgba(0, 0, 0, 0.15);border-radius:4px;border:1px solid var(--kritzel-global-border-color, #dbdbdb)}.export-content p{margin:0;color:var(--kritzel-global-text-secondary, #666)}@media (max-width: 576px){.export-tab-content{flex:1;min-height:0}}`;
28710
28752
 
28711
28753
  const KritzelExport = class {
28712
28754
  constructor(hostRef) {
@@ -28902,7 +28944,7 @@ const KritzelIcon = class {
28902
28944
  };
28903
28945
  KritzelIcon.style = kritzelIconCss();
28904
28946
 
28905
- const kritzelInputCss = () => `:host{display:block}.input-container{display:flex;flex-direction:column;gap:6px}.input-label{font-size:14px;font-weight:500;color:var(--kritzel-text-input-label-color, #333333)}.input-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-text-input-border-color, #ebebeb);border-radius:6px;overflow:hidden;background:var(--kritzel-text-input-background, #ffffff);transition:border-color 150ms ease}.input-wrapper:hover:not(:focus-within){border-color:var(--kritzel-text-input-hover-border-color, #cccccc)}.input-wrapper:focus-within{border-color:var(--kritzel-text-input-focus-border-color, #007AFF);border-width:2px}.text-input{flex:1;padding:10px 12px;border:none;outline:none;font-size:14px;font-family:inherit;background:transparent;color:var(--kritzel-text-input-text-color, #333333);box-sizing:border-box}.text-input::placeholder{color:var(--kritzel-text-input-placeholder-color, #999999)}.text-input::selection{background-color:var(--kritzel-text-input-selection-background, #007AFF);color:var(--kritzel-text-input-selection-color, #ffffff)}.text-input:disabled{cursor:not-allowed;opacity:0.6}.input-suffix{padding:10px 12px;background:var(--kritzel-text-input-suffix-background, #f5f5f5);color:var(--kritzel-text-input-suffix-color, #666666);font-size:14px;border-left:1px solid var(--kritzel-text-input-border-color, #ebebeb);flex-shrink:0}`;
28947
+ const kritzelInputCss = () => `:host{display:block}.input-container{display:flex;flex-direction:column;gap:6px}.input-label{font-size:14px;font-weight:500;color:var(--kritzel-text-input-label-color, #333333)}.input-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-text-input-border-color, #ebebeb);border-radius:var(--kritzel-text-input-border-radius, 6px);overflow:hidden;background:var(--kritzel-text-input-background, #ffffff);transition:border-color 150ms ease}.input-wrapper:hover:not(:focus-within){border-color:var(--kritzel-text-input-hover-border-color, #cccccc)}.input-wrapper:focus-within{border-color:var(--kritzel-text-input-focus-border-color, #007AFF);border-width:2px}.text-input{flex:1;padding:10px 12px;border:none;outline:none;font-size:14px;font-family:inherit;background:transparent;color:var(--kritzel-text-input-text-color, #333333);box-sizing:border-box}.text-input::placeholder{color:var(--kritzel-text-input-placeholder-color, #999999)}.text-input::selection{background-color:var(--kritzel-text-input-selection-background, #007AFF);color:var(--kritzel-text-input-selection-color, #ffffff)}.text-input:disabled{cursor:not-allowed;opacity:0.6}.input-suffix{padding:10px 12px;background:var(--kritzel-text-input-suffix-background, #f5f5f5);color:var(--kritzel-text-input-suffix-color, #666666);font-size:14px;border-left:1px solid var(--kritzel-text-input-border-color, #ebebeb);flex-shrink:0}`;
28906
28948
 
28907
28949
  const KritzelInput = class {
28908
28950
  constructor(hostRef) {
@@ -29450,7 +29492,7 @@ const KritzelMoreMenu = class {
29450
29492
  };
29451
29493
  KritzelMoreMenu.style = kritzelMoreMenuCss();
29452
29494
 
29453
- const kritzelNumericInputCss = () => `:host{display:block}.input-container{display:flex;flex-direction:column;gap:6px}.input-label{font-size:14px;font-weight:500;color:var(--kritzel-numeric-input-label-color, #333333)}.input-wrapper{display:flex;position:relative}.numeric-input{flex:1;padding:8px 36px 8px 12px;border:1px solid var(--kritzel-numeric-input-border-color, #ebebeb);border-radius:6px;font-size:14px;color:var(--kritzel-numeric-input-text-color, #333333);background-color:var(--kritzel-numeric-input-input-background, #ffffff);outline:none;transition:border-color 150ms ease;box-sizing:border-box}.numeric-input::-webkit-outer-spin-button,.numeric-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.numeric-input[type='number']{-moz-appearance:textfield}.numeric-input::selection{background-color:var(--kritzel-numeric-input-selection-background, #007AFF);color:var(--kritzel-numeric-input-selection-color, #ffffff)}.numeric-input:hover{border-color:var(--kritzel-numeric-input-hover-border-color, #cccccc)}.numeric-input:focus{border-color:var(--kritzel-numeric-input-focus-border-color, #0066ff);border-width:2px;padding:7px 35px 7px 11px}.spinner-buttons{position:absolute;right:1px;top:1px;bottom:1px;display:flex;flex-direction:column;border-left:1px solid var(--kritzel-numeric-input-border-color, #ebebeb);border-radius:0 5px 5px 0;overflow:hidden}.spinner-button{flex:1;display:flex;align-items:center;justify-content:center;width:24px;padding:0;border:none;background-color:var(--kritzel-numeric-input-spinner-background, #f5f5f5);color:var(--kritzel-numeric-input-spinner-color, #666666);cursor:pointer;transition:background-color 150ms ease}.spinner-button:hover{background-color:var(--kritzel-numeric-input-spinner-hover-background, #ebebeb)}.spinner-button:active{background-color:var(--kritzel-numeric-input-spinner-active-background, #dddddd)}.spinner-up{border-bottom:1px solid var(--kritzel-numeric-input-border-color, #ebebeb)}.spinner-icon{width:10px;height:6px}`;
29495
+ const kritzelNumericInputCss = () => `:host{display:block}.input-container{display:flex;flex-direction:column;gap:6px}.input-label{font-size:14px;font-weight:500;color:var(--kritzel-numeric-input-label-color, #333333)}.input-wrapper{display:flex;position:relative}.numeric-input{flex:1;padding:8px 36px 8px 12px;border:1px solid var(--kritzel-numeric-input-border-color, #ebebeb);border-radius:var(--kritzel-numeric-input-border-radius, 6px);font-size:14px;color:var(--kritzel-numeric-input-text-color, #333333);background-color:var(--kritzel-numeric-input-input-background, #ffffff);outline:none;transition:border-color 150ms ease;box-sizing:border-box}.numeric-input::-webkit-outer-spin-button,.numeric-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.numeric-input[type='number']{-moz-appearance:textfield}.numeric-input::selection{background-color:var(--kritzel-numeric-input-selection-background, #007AFF);color:var(--kritzel-numeric-input-selection-color, #ffffff)}.numeric-input:hover{border-color:var(--kritzel-numeric-input-hover-border-color, #cccccc)}.numeric-input:focus{border-color:var(--kritzel-numeric-input-focus-border-color, #0066ff);border-width:2px;padding:7px 35px 7px 11px}.spinner-buttons{position:absolute;right:1px;top:1px;bottom:1px;display:flex;flex-direction:column;border-left:1px solid var(--kritzel-numeric-input-border-color, #ebebeb);border-radius:0 var(--kritzel-numeric-input-spinner-border-radius, 5px) var(--kritzel-numeric-input-spinner-border-radius, 5px) 0;overflow:hidden}.spinner-button{flex:1;display:flex;align-items:center;justify-content:center;width:24px;padding:0;border:none;background-color:var(--kritzel-numeric-input-spinner-background, #f5f5f5);color:var(--kritzel-numeric-input-spinner-color, #666666);cursor:pointer;transition:background-color 150ms ease}.spinner-button:hover{background-color:var(--kritzel-numeric-input-spinner-hover-background, #ebebeb)}.spinner-button:active{background-color:var(--kritzel-numeric-input-spinner-active-background, #dddddd)}.spinner-up{border-bottom:1px solid var(--kritzel-numeric-input-border-color, #ebebeb)}.spinner-icon{width:10px;height:6px}`;
29454
29496
 
29455
29497
  const KritzelNumericInput = class {
29456
29498
  constructor(hostRef) {
@@ -29949,7 +29991,7 @@ const KritzelPortal = class {
29949
29991
  * This file is auto-generated by the version bump scripts.
29950
29992
  * Do not modify manually.
29951
29993
  */
29952
- const KRITZEL_VERSION = '0.3.12';
29994
+ const KRITZEL_VERSION = '0.3.13';
29953
29995
 
29954
29996
  const kritzelSettingsCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}.shortcuts-list{display:flex;flex-direction:column;gap:24px}.shortcuts-category{display:flex;flex-direction:column;gap:8px}.shortcuts-category-title{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.shortcuts-group{display:flex;flex-direction:column;gap:4px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-item-bg, rgba(0, 0, 0, 0.02))}.shortcut-label{font-size:14px;color:var(--kritzel-settings-content-text-color, #666666)}.shortcut-key{font-family:monospace;font-size:12px;padding:2px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-key-bg, #f0f0f0);color:var(--kritzel-settings-shortcut-key-color, #333333);border:1px solid var(--kritzel-settings-shortcut-key-border, #ddd)}`;
29955
29997
 
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-CFnj_FXt.js');
3
+ var index = require('./index-Xav9JFHg.js');
4
4
 
5
5
  const kritzelBrushStyleCss = () => `:host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box;width:100%}.brush-style-button{display:flex;justify-content:center;align-items:center;width:42px;height:32px;padding:0;border:none;outline:none;background:none;border-radius:0;color:var(--control-text-color);font-weight:bold;-webkit-tap-highlight-color:transparent}.font-style-button:not(:last-child){border-right:1px solid #333333}.font-style-button:hover{background-color:var(--control-hover-bg)}.font-style-button:active{background-color:var(--control-active-bg)}.font-style-button.selected,.font-style-button.selected:hover,.font-style-button.selected:active{background-color:var(--control-selected-bg);color:var(--control-selected-color)}`;
6
6