kritzel-stencil 0.4.9 → 0.4.10

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 (136) hide show
  1. package/dist/cjs/index.cjs.js +1 -1
  2. package/dist/cjs/kritzel-active-users_47.cjs.entry.js +61 -59
  3. package/dist/cjs/loader.cjs.js +1 -1
  4. package/dist/cjs/{schema.constants-ByNZ_qAj.js → schema.constants-C6PknABJ.js} +20 -6
  5. package/dist/cjs/stencil.cjs.js +1 -1
  6. package/dist/collection/components/core/kritzel-editor/kritzel-editor.js +14 -10
  7. package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +1 -1
  8. package/dist/collection/components/core/kritzel-watermark/kritzel-watermark.js +1 -1
  9. package/dist/collection/components/shared/kritzel-avatar/kritzel-avatar.js +3 -3
  10. package/dist/collection/components/shared/kritzel-button/kritzel-button.js +2 -2
  11. package/dist/collection/components/shared/kritzel-color/kritzel-color.js +2 -2
  12. package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.js +1 -1
  13. package/dist/collection/components/shared/kritzel-font/kritzel-font.js +1 -1
  14. package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.js +1 -1
  15. package/dist/collection/components/shared/kritzel-input/kritzel-input.js +1 -1
  16. package/dist/collection/components/shared/kritzel-master-detail/kritzel-master-detail.js +3 -3
  17. package/dist/collection/components/shared/kritzel-menu/kritzel-menu.js +1 -1
  18. package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.js +2 -2
  19. package/dist/collection/components/shared/kritzel-numeric-input/kritzel-numeric-input.js +1 -1
  20. package/dist/collection/components/shared/kritzel-opacity-slider/kritzel-opacity-slider.js +1 -1
  21. package/dist/collection/components/shared/kritzel-portal/kritzel-portal.js +1 -1
  22. package/dist/collection/components/shared/kritzel-slide-toggle/kritzel-slide-toggle.js +1 -1
  23. package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.js +1 -1
  24. package/dist/collection/components/shared/kritzel-stroke-size/kritzel-stroke-size.js +1 -1
  25. package/dist/collection/components/shared/kritzel-sync-indicator/kritzel-sync-indicator.css +5 -5
  26. package/dist/collection/components/shared/kritzel-sync-indicator/kritzel-sync-indicator.js +1 -1
  27. package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.js +2 -2
  28. package/dist/collection/components/ui/kritzel-back-to-content/kritzel-back-to-content.js +1 -1
  29. package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js +7 -7
  30. package/dist/collection/components/ui/kritzel-current-user/kritzel-current-user.js +2 -2
  31. package/dist/collection/components/ui/kritzel-current-user-dialog/kritzel-current-user-dialog.js +2 -2
  32. package/dist/collection/components/ui/kritzel-export/kritzel-export.js +2 -2
  33. package/dist/collection/components/ui/kritzel-loading-overlay/kritzel-loading-overlay.css +6 -6
  34. package/dist/collection/components/ui/kritzel-loading-overlay/kritzel-loading-overlay.js +1 -1
  35. package/dist/collection/components/ui/kritzel-login-dialog/kritzel-login-dialog.js +1 -1
  36. package/dist/collection/components/ui/kritzel-more-menu/kritzel-more-menu.js +2 -2
  37. package/dist/collection/components/ui/kritzel-settings/kritzel-settings.js +2 -2
  38. package/dist/collection/components/ui/kritzel-share-dialog/kritzel-share-dialog.js +3 -3
  39. package/dist/collection/components/ui/kritzel-tool-config/kritzel-tool-config.js +1 -1
  40. package/dist/collection/components/ui/kritzel-utility-panel/kritzel-utility-panel.js +2 -2
  41. package/dist/collection/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.js +1 -1
  42. package/dist/collection/components/ui/kritzel-zoom-panel/kritzel-zoom-panel.js +2 -2
  43. package/dist/collection/constants/version.js +1 -1
  44. package/dist/collection/locales/de-locale.js +2 -2
  45. package/dist/collection/locales/en-locale.js +2 -2
  46. package/dist/collection/locales/fr-locale.js +2 -2
  47. package/dist/collection/themes/dark-theme.js +7 -0
  48. package/dist/collection/themes/light-theme.js +7 -0
  49. package/dist/components/index.js +3 -3
  50. package/dist/components/kritzel-active-users.js +1 -1
  51. package/dist/components/kritzel-avatar.js +1 -1
  52. package/dist/components/kritzel-awareness-cursors.js +1 -1
  53. package/dist/components/kritzel-back-to-content.js +1 -1
  54. package/dist/components/kritzel-button.js +1 -1
  55. package/dist/components/kritzel-color-palette.js +1 -1
  56. package/dist/components/kritzel-color.js +1 -1
  57. package/dist/components/kritzel-controls.js +1 -1
  58. package/dist/components/kritzel-current-user-dialog.js +1 -1
  59. package/dist/components/kritzel-current-user.js +1 -1
  60. package/dist/components/kritzel-editor.js +49 -45
  61. package/dist/components/kritzel-engine.js +1 -1
  62. package/dist/components/kritzel-export.js +1 -1
  63. package/dist/components/kritzel-font-size.js +1 -1
  64. package/dist/components/kritzel-font.js +1 -1
  65. package/dist/components/kritzel-input.js +1 -1
  66. package/dist/components/kritzel-loading-overlay.js +1 -1
  67. package/dist/components/kritzel-login-dialog.js +1 -1
  68. package/dist/components/kritzel-master-detail.js +1 -1
  69. package/dist/components/kritzel-menu-item.js +1 -1
  70. package/dist/components/kritzel-menu.js +1 -1
  71. package/dist/components/kritzel-more-menu.js +1 -1
  72. package/dist/components/kritzel-numeric-input.js +1 -1
  73. package/dist/components/kritzel-opacity-slider.js +1 -1
  74. package/dist/components/kritzel-portal.js +1 -1
  75. package/dist/components/kritzel-settings.js +1 -1
  76. package/dist/components/kritzel-share-dialog.js +1 -1
  77. package/dist/components/kritzel-slide-toggle.js +1 -1
  78. package/dist/components/kritzel-split-button.js +1 -1
  79. package/dist/components/kritzel-stroke-size.js +1 -1
  80. package/dist/components/kritzel-sync-indicator.js +1 -1
  81. package/dist/components/kritzel-tool-config.js +1 -1
  82. package/dist/components/kritzel-tooltip.js +1 -1
  83. package/dist/components/kritzel-utility-panel.js +1 -1
  84. package/dist/components/kritzel-watermark.js +1 -1
  85. package/dist/components/kritzel-workspace-manager.js +1 -1
  86. package/dist/components/kritzel-zoom-panel.js +1 -1
  87. package/dist/components/{p-8xkoVMfO.js → p-2WiGyky4.js} +2 -2
  88. package/dist/components/{p-DuVkk58V.js → p-30g2W_Gx.js} +3 -3
  89. package/dist/components/{p-DXcjIb_a.js → p-4SPnZZkH.js} +3 -3
  90. package/dist/components/{p-CURiiQfq.js → p-7I4Uzjrw.js} +14 -0
  91. package/dist/components/{p-9m1cAVwG.js → p-B-585egz.js} +3 -3
  92. package/dist/components/{p-dVfh-Sy9.js → p-BP6Fo3rt.js} +2 -2
  93. package/dist/components/{p-C2CeSrTm.js → p-BPsKYMH6.js} +1 -1
  94. package/dist/components/{p-BRGufCki.js → p-BX1aRLEi.js} +3 -3
  95. package/dist/components/{p-DW7WW4EN.js → p-B_lZQo3s.js} +3 -3
  96. package/dist/components/{p-oGAPPwAL.js → p-BoN700-O.js} +2 -2
  97. package/dist/components/{p-BzJEwFtn.js → p-BozrueXV.js} +1 -1
  98. package/dist/components/{p-6rQICkGr.js → p-Bvv1pGFD.js} +1 -1
  99. package/dist/components/{p-ZPPtEla5.js → p-C6e7eOEb.js} +15 -27
  100. package/dist/components/{p-CM1duewg.js → p-CAoN_STZ.js} +2 -2
  101. package/dist/components/{p-CVhcOiEA.js → p-CM65T33m.js} +3 -3
  102. package/dist/components/{p-8ScektIm.js → p-COylwYw1.js} +16 -16
  103. package/dist/components/{p-BYO6pz8T.js → p-CZ99VWQc.js} +1 -1
  104. package/dist/components/{p-DrQRChp3.js → p-CaBbajU2.js} +2 -2
  105. package/dist/components/{p-BzrxIesp.js → p-CrHvaLRV.js} +1 -1
  106. package/dist/components/{p-BqWiEmYI.js → p-D-UkGru5.js} +4 -4
  107. package/dist/components/{p-CoY7emAj.js → p-DB58Oa5V.js} +2 -2
  108. package/dist/components/{p-yD_3Z3K1.js → p-DBqoPgev.js} +1 -1
  109. package/dist/components/{p-DIMNEOTW.js → p-DKGg-76-.js} +1 -1
  110. package/dist/components/{p-DgnK50xO.js → p-DVXTPI71.js} +1 -1
  111. package/dist/components/{p-D7H8oxZb.js → p-DdabFzSa.js} +5 -5
  112. package/dist/components/{p-CMZ09rB1.js → p-Dt7-I2Xz.js} +3 -3
  113. package/dist/components/{p-CwuGA058.js → p-DtnMdWWB.js} +1 -1
  114. package/dist/components/{p-Cj0NElII.js → p-Dv4pZx8G.js} +1 -1
  115. package/dist/components/{p-BO9BvTtK.js → p-DwMqCX2P.js} +2 -2
  116. package/dist/components/{p-Cr2z2UBL.js → p-Dy3uucl_.js} +7 -7
  117. package/dist/components/{p-Ckm1Aq0V.js → p-GKmqCI8r.js} +2 -2
  118. package/dist/components/{p-DSOc0eIT.js → p-PjPPCHVL.js} +1 -1
  119. package/dist/components/{p-U9FjWrp-.js → p-ShJrZeyt.js} +1 -1
  120. package/dist/components/{p-lQ7nfhOy.js → p-bAacqNHq.js} +1 -1
  121. package/dist/components/{p-BU-FZuj0.js → p-vqEUQ-4Q.js} +3 -3
  122. package/dist/components/{p-CXJZxJvp.js → p-x3z0Cz1B.js} +3 -3
  123. package/dist/esm/index.js +2 -2
  124. package/dist/esm/kritzel-active-users_47.entry.js +61 -59
  125. package/dist/esm/loader.js +1 -1
  126. package/dist/esm/{schema.constants-1t45c2_U.js → schema.constants-C-oQbvCY.js} +20 -6
  127. package/dist/esm/stencil.js +1 -1
  128. package/dist/stencil/index.esm.js +2 -2
  129. package/dist/stencil/{p-1t45c2_U.js → p-C-oQbvCY.js} +20 -6
  130. package/dist/stencil/{p-f5f088ea.entry.js → p-be87f9d3.entry.js} +61 -59
  131. package/dist/stencil/stencil.esm.js +1 -1
  132. package/dist/types/components/core/kritzel-editor/kritzel-editor.d.ts +2 -0
  133. package/dist/types/constants/version.d.ts +1 -1
  134. package/dist/types/interfaces/localization.interface.d.ts +1 -1
  135. package/dist/types/interfaces/theme.interface.d.ts +11 -5
  136. package/package.json +1 -1
@@ -1,4 +1,4 @@
1
- import { K as KritzelPortal$1, d as defineCustomElement$1 } from './p-C2CeSrTm.js';
1
+ import { K as KritzelPortal$1, d as defineCustomElement$1 } from './p-BPsKYMH6.js';
2
2
 
3
3
  const KritzelPortal = KritzelPortal$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { K as KritzelSettings$1, d as defineCustomElement$1 } from './p-D7H8oxZb.js';
1
+ import { K as KritzelSettings$1, d as defineCustomElement$1 } from './p-DdabFzSa.js';
2
2
 
3
3
  const KritzelSettings = KritzelSettings$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { K as KritzelShareDialog$1, d as defineCustomElement$1 } from './p-DW7WW4EN.js';
1
+ import { K as KritzelShareDialog$1, d as defineCustomElement$1 } from './p-B_lZQo3s.js';
2
2
 
3
3
  const KritzelShareDialog = KritzelShareDialog$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { K as KritzelSlideToggle$1, d as defineCustomElement$1 } from './p-BzJEwFtn.js';
1
+ import { K as KritzelSlideToggle$1, d as defineCustomElement$1 } from './p-BozrueXV.js';
2
2
 
3
3
  const KritzelSlideToggle = KritzelSlideToggle$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { K as KritzelSplitButton$1, d as defineCustomElement$1 } from './p-DuVkk58V.js';
1
+ import { K as KritzelSplitButton$1, d as defineCustomElement$1 } from './p-30g2W_Gx.js';
2
2
 
3
3
  const KritzelSplitButton = KritzelSplitButton$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { K as KritzelStrokeSize$1, d as defineCustomElement$1 } from './p-Ckm1Aq0V.js';
1
+ import { K as KritzelStrokeSize$1, d as defineCustomElement$1 } from './p-GKmqCI8r.js';
2
2
 
3
3
  const KritzelStrokeSize = KritzelStrokeSize$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { K as KritzelSyncIndicator$1, d as defineCustomElement$1 } from './p-CM1duewg.js';
1
+ import { K as KritzelSyncIndicator$1, d as defineCustomElement$1 } from './p-CAoN_STZ.js';
2
2
 
3
3
  const KritzelSyncIndicator = KritzelSyncIndicator$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { a as KritzelToolConfig$1, d as defineCustomElement$1 } from './p-Cr2z2UBL.js';
1
+ import { a as KritzelToolConfig$1, d as defineCustomElement$1 } from './p-Dy3uucl_.js';
2
2
 
3
3
  const KritzelToolConfig = KritzelToolConfig$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { K as KritzelTooltip$1, d as defineCustomElement$1 } from './p-DrQRChp3.js';
1
+ import { K as KritzelTooltip$1, d as defineCustomElement$1 } from './p-CaBbajU2.js';
2
2
 
3
3
  const KritzelTooltip = KritzelTooltip$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { K as KritzelUtilityPanel$1, d as defineCustomElement$1 } from './p-6rQICkGr.js';
1
+ import { K as KritzelUtilityPanel$1, d as defineCustomElement$1 } from './p-Bvv1pGFD.js';
2
2
 
3
3
  const KritzelUtilityPanel = KritzelUtilityPanel$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { K as KritzelWatermark$1, d as defineCustomElement$1 } from './p-CwuGA058.js';
1
+ import { K as KritzelWatermark$1, d as defineCustomElement$1 } from './p-DtnMdWWB.js';
2
2
 
3
3
  const KritzelWatermark = KritzelWatermark$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { K as KritzelWorkspaceManager$1, d as defineCustomElement$1 } from './p-CXJZxJvp.js';
1
+ import { K as KritzelWorkspaceManager$1, d as defineCustomElement$1 } from './p-x3z0Cz1B.js';
2
2
 
3
3
  const KritzelWorkspaceManager = KritzelWorkspaceManager$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { K as KritzelZoomPanel$1, d as defineCustomElement$1 } from './p-U9FjWrp-.js';
1
+ import { K as KritzelZoomPanel$1, d as defineCustomElement$1 } from './p-ShJrZeyt.js';
2
2
 
3
3
  const KritzelZoomPanel = KritzelZoomPanel$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
2
- import { d as defineCustomElement$1 } from './p-DgnK50xO.js';
2
+ import { d as defineCustomElement$1 } from './p-DVXTPI71.js';
3
3
 
4
4
  const kritzelFontSizeCss = () => `:host{display:flex;align-items:flex-start;gap:8px;padding:0;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:4px;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;border-radius:50%}.size-container:hover{background-color:var(--kritzel-font-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-font-size-selected-background-color, #e0e0e0)}`;
5
5
 
@@ -29,7 +29,7 @@ const KritzelFontSize = /*@__PURE__*/ proxyCustomElement(class KritzelFontSize e
29
29
  render() {
30
30
  const color = 'var(--kritzel-global-text-primary)';
31
31
  const sizes = this.sizes ?? [];
32
- return (h(Host, { key: '56eb19367abe312bac3b626cfcae3b1ff6e90d21' }, sizes.map(size => (h("div", { tabIndex: 0, class: {
32
+ return (h(Host, { key: '9d6592f049c25e9dfa2f6f3a270feb2440aa7f35' }, sizes.map(size => (h("div", { tabIndex: 0, class: {
33
33
  'size-container': true,
34
34
  'selected': this.selectedSize === size,
35
35
  }, onClick: () => this.handleSizeClick(size), onKeyDown: event => this.handleKeyDown(event, size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size, color: color }))))));
@@ -1,8 +1,8 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
2
2
  import { K as KritzelDevicesHelper } from './p-jGOpkGDl.js';
3
3
  import { d as defineCustomElement$4 } from './p-CdR76C4L.js';
4
- import { d as defineCustomElement$2, a as defineCustomElement$3 } from './p-BqWiEmYI.js';
5
- import { d as defineCustomElement$1 } from './p-C2CeSrTm.js';
4
+ import { d as defineCustomElement$2, a as defineCustomElement$3 } from './p-D-UkGru5.js';
5
+ import { d as defineCustomElement$1 } from './p-BPsKYMH6.js';
6
6
 
7
7
  const kritzelSplitButtonCss = () => `:host{position:relative;display:flex;align-items:center;font-family:sans-serif;z-index:1;padding:var(--kritzel-split-button-padding, 4px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-split-button-border, 1px solid #ebebeb);gap:var(--kritzel-split-button-gap, 4px)}:host(.mobile){--kritzel-split-button-hover-background-color:transparent}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;color:var(--kritzel-split-button-color, #000000);-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:var(--kritzel-global-pointer-cursor, pointer);text-align:center;display:flex;align-items:center;justify-content:center;pointer-events:all;-webkit-tap-highlight-color:transparent}.split-main-button,.split-menu-button{height:auto;display:flex;align-items:center;padding:var(--kritzel-split-button-padding, 8px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);font-size:var(--kritzel-split-button-font-size, 14px)}.split-main-button:hover,.split-menu-button:hover{background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button:focus,.split-menu-button:focus{background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button{gap:var(--kritzel-split-button-gap, 4px)}.split-menu-button{border-left:none;justify-content:center}.split-divider{width:var(--kritzel-split-button-divider-width, 1px);height:24px;background-color:var(--kritzel-split-button-divider-background-color, hsl(0, 0%, 0%, 4.3%))}:disabled{pointer-events:none;opacity:0.5}`;
8
8
 
@@ -103,7 +103,7 @@ const KritzelSplitButton = /*@__PURE__*/ proxyCustomElement(class KritzelSplitBu
103
103
  this.menuScrollTop = event.target.scrollTop;
104
104
  };
105
105
  render() {
106
- return (h(Host, { key: 'fa22dc1185ef07d8127d9ee9f6dbe482d126f934', class: { mobile: this.isTouchDevice } }, h("button", { key: 'a48aba702b70e9b24ad5486dde61fa9f9c8f7cdc', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && h("kritzel-icon", { key: '0d1c9a3e9f744541dd6ebe491105f6ee65233543', name: this.buttonIcon })), h("div", { key: 'c9db29f0b9c9cf1974d78f4f60be9e1b0e26c5d2', class: "split-divider" }), h("button", { key: '57addfd5228b7c7668be902c53683d12c976b89b', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled, "aria-label": "Open menu" }, h("kritzel-icon", { key: 'd860cc503043425860b1234b5d34693bfdd1d5ab', name: this.dropdownIcon })), h("kritzel-portal", { key: 'cd6dda8869aea4205d922fc639073019bbd2b102', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '1ef1c2b319662e7a2af15b46362addcc75bceb68', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
106
+ return (h(Host, { key: 'f7f5019b32f4514a4ccf5bd07742658e3d05020a', class: { mobile: this.isTouchDevice } }, h("button", { key: '361007b4281edfe2bf18f28f7c4f19ba1f251b49', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && h("kritzel-icon", { key: '17d4fad6cfa070225daa67dfc648d4ac64091e90', name: this.buttonIcon })), h("div", { key: 'c18107b7d557525092c28ff5d7336ebb3648b672', class: "split-divider" }), h("button", { key: 'c7a9a67d832f026fa8e21eff7ea5935cd72862ed', 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: '5b40284c8f04fba80ca606b0af201040efe53880', name: this.dropdownIcon })), h("kritzel-portal", { key: '62bd7f26c020497f2131759d0d1ef9d18e817b37', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: 'a1a11a0ae33f9626db3cd56fbb881c613f1ab78c', 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 }))));
107
107
  }
108
108
  static get style() { return kritzelSplitButtonCss(); }
109
109
  }, [513, "kritzel-split-button", {
@@ -91,16 +91,16 @@ const KritzelAvatar = /*@__PURE__*/ proxyCustomElement(class KritzelAvatar exten
91
91
  height: `${this.size}px`,
92
92
  fontSize: `${Math.round(this.size * 0.4)}px`,
93
93
  };
94
- return (h(Host, { key: '116725d55e4443e80216b3b3251e957d2009b43e', style: containerStyles, class: {
94
+ return (h(Host, { key: '90ce966bb2a374e68c544906c8c746df6cc01038', style: containerStyles, class: {
95
95
  'has-image': !!showImage,
96
96
  'has-initials': !!showInitials,
97
97
  'has-default': !!showDefaultIcon,
98
- }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: 'd70ad4eb484404b18c13e066e8c10b3c86918ee5', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
98
+ }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: '6799f4ad45c7d40ebaf640f191171ed6a5f14ae9', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
99
99
  if (el) {
100
100
  el.referrerPolicy = 'no-referrer';
101
101
  el.crossOrigin = 'anonymous';
102
102
  }
103
- }, onError: this.handleImageError })), showInitials && (h("span", { key: '21a9022cffdb69e0c3626e513cb3c036a9d3a16d', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: '43e676af007bf254b1921f3efcbc7fff4e204359', class: "avatar-default" }, h("svg", { key: 'a7378795539a902e28ca644a80f1ca00cc9f818a', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '31548a495a86f033325c98cfcc0ae398b6bb8281', d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }))))));
103
+ }, onError: this.handleImageError })), showInitials && (h("span", { key: '98cdcda64b900994b61a03179be9f2af17c489e8', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: '64e6a6ee67017c927dce0b51810a5bb02fc0d6d1', class: "avatar-default" }, h("svg", { key: '42f99637a3c23aaf10fa7c99753347ede1d518c0', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '28b52a68b36e98b0e14891fd225457be65f1bb46', d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }))))));
104
104
  }
105
105
  static get watchers() { return {
106
106
  "user": [{
@@ -166,10 +166,17 @@ const lightTheme = {
166
166
  },
167
167
  engine: {
168
168
  backgroundColor: '#ffffff',
169
+ },
170
+ editor: {
169
171
  loadingOverlayBackground: 'rgba(255, 255, 255, 0.85)',
170
172
  loadingOverlayColor: '#333333',
171
173
  loadingOverlaySpinnerActiveColor: '#333333',
172
174
  loadingOverlaySpinnerColor: '#cccccc',
175
+ syncIndicatorBackground: 'rgba(255, 255, 255, 0.92)',
176
+ syncIndicatorColor: '#334155',
177
+ syncIndicatorSpinnerColor: '#007AFF',
178
+ syncIndicatorSpinnerTrack: 'rgba(148, 163, 184, 0.35)',
179
+ syncIndicatorZIndex: '10001',
173
180
  },
174
181
  snap: {
175
182
  indicatorFill: 'rgba(59, 130, 246, 0.3)',
@@ -505,10 +512,17 @@ const darkTheme = {
505
512
  },
506
513
  engine: {
507
514
  backgroundColor: '#1a1a1a',
515
+ },
516
+ editor: {
508
517
  loadingOverlayBackground: 'rgba(26, 26, 26, 0.85)',
509
518
  loadingOverlayColor: '#e0e0e0',
510
519
  loadingOverlaySpinnerActiveColor: '#e0e0e0',
511
520
  loadingOverlaySpinnerColor: '#555555',
521
+ syncIndicatorBackground: 'rgba(30, 30, 30, 0.95)',
522
+ syncIndicatorColor: '#e0e0e0',
523
+ syncIndicatorSpinnerColor: '#0A84FF',
524
+ syncIndicatorSpinnerTrack: 'rgba(160, 160, 160, 0.3)',
525
+ syncIndicatorZIndex: '10001',
512
526
  },
513
527
  snap: {
514
528
  indicatorFill: 'rgba(10, 132, 255, 0.35)',
@@ -1,6 +1,6 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
2
- import { a as KritzelColorHelper } from './p-CURiiQfq.js';
3
- import { d as defineCustomElement$1 } from './p-CMZ09rB1.js';
2
+ import { a as KritzelColorHelper } from './p-7I4Uzjrw.js';
3
+ import { d as defineCustomElement$1 } from './p-Dt7-I2Xz.js';
4
4
 
5
5
  const kritzelColorPaletteCss = () => `:host{display:flex;align-items:flex-start;gap:8px;padding:0;width:100%;box-sizing:border-box}.color-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center;overflow:hidden;height:40px;transition:height 0.1s ease-in-out}.color-grid.expanded{height:500px}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.color-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-color-palette-selected-background-color)}`;
6
6
 
@@ -45,7 +45,7 @@ const KritzelColorPalette = /*@__PURE__*/ proxyCustomElement(class KritzelColorP
45
45
  render() {
46
46
  const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
47
47
  const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
48
- return (h(Host, { key: '16aa405a43b3943473e577c5a6ab86adf4ae1ba9' }, h("div", { key: 'f65bb286889700dc1f0e8d84ff59721071b7b73a', class: {
48
+ return (h(Host, { key: '9a637b3a6946384a889f54dc3a635da7ff014439' }, h("div", { key: '4db8bbc7a234bfed26b60ed306a5f999875e2195', class: {
49
49
  'color-grid': true,
50
50
  'expanded': this.isExpanded,
51
51
  }, style: {
@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transf
2
2
  import { d as defineCustomElement$5 } from './p-DX2nriaq.js';
3
3
  import { d as defineCustomElement$4 } from './p-Df3BwVGy.js';
4
4
  import { d as defineCustomElement$3 } from './p-CdR76C4L.js';
5
- import { d as defineCustomElement$2 } from './p-DSOc0eIT.js';
5
+ import { d as defineCustomElement$2 } from './p-PjPPCHVL.js';
6
6
  import { d as defineCustomElement$1 } from './p-D09kgc5Q.js';
7
7
 
8
8
  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}}`;
@@ -87,7 +87,7 @@ const KritzelExport = /*@__PURE__*/ proxyCustomElement(class KritzelExport exten
87
87
  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 })));
88
88
  }
89
89
  render() {
90
- return (h(Host, { key: '0bc45e80716be4a7b19ae12a6464a641b5bd4550' }, h("kritzel-dialog", { key: 'f336f8b1e4ae10954d48ca67da88504faf06b295', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: 'e2d1209652bb54fb7f623e50bc4bbbb703083b76', class: "export-content" }, h("kritzel-pill-tabs", { key: 'dd78430b78d1e8c4ac0a76e8a6a5d48bebf5e889', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport()), h("div", { key: 'd04221d9f98a066d538f98f8c9409c558fdfa29f', slot: "footer" }, h("button", { key: '5cbb062756f29a897088d6647c6b8eae9f5781e2', class: "export-primary-button", onClick: this.handleExport }, this.terms['export.exportButton'] ?? 'Export')))));
90
+ return (h(Host, { key: '64a9957ef87799215f9274213ead958a895dd8ef' }, h("kritzel-dialog", { key: '59ad70cc7d2834f5ecac3a659189390015cd26cb', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: 'fc9247f5b3848def87e6f6a6044d3fb1e63594ac', class: "export-content" }, h("kritzel-pill-tabs", { key: '54da74bbbd206b5e596865081cc5fe65bf8a776f', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport()), h("div", { key: 'b8e748034496936bf000a8eb111f52d58bf28d20', slot: "footer" }, h("button", { key: 'b7a59f3882146b45a0eb8395ea1c45cb41af0f34', class: "export-primary-button", onClick: this.handleExport }, this.terms['export.exportButton'] ?? 'Export')))));
91
91
  }
92
92
  static get style() { return kritzelExportCss(); }
93
93
  }, [513, "kritzel-export", {
@@ -286,7 +286,7 @@ const KritzelPortal = /*@__PURE__*/ proxyCustomElement(class KritzelPortal exten
286
286
  this.portal.style.visibility = 'visible';
287
287
  }
288
288
  render() {
289
- return (h(Host, { key: '72273b4c7811473072ee27668836a5ddddcfd618', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: 'b4f37ca27c47ab950a4639162fa31a3c2362d6f7' })));
289
+ return (h(Host, { key: '489a752e48d96c2607defa40a39477675685b60a', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '13c6b7567039b8c8c78de27e3d9aeda30a798de1' })));
290
290
  }
291
291
  static get watchers() { return {
292
292
  "anchor": [{
@@ -1,8 +1,8 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
2
2
  import { K as KritzelDevicesHelper } from './p-jGOpkGDl.js';
3
3
  import { d as defineCustomElement$4 } from './p-CdR76C4L.js';
4
- import { d as defineCustomElement$2, a as defineCustomElement$3 } from './p-BqWiEmYI.js';
5
- import { d as defineCustomElement$1 } from './p-C2CeSrTm.js';
4
+ import { d as defineCustomElement$2, a as defineCustomElement$3 } from './p-D-UkGru5.js';
5
+ import { d as defineCustomElement$1 } from './p-BPsKYMH6.js';
6
6
 
7
7
  const kritzelMoreMenuCss = () => `:host{display:inline-flex;z-index:1}.more-menu-wrapper{display:inline-flex;padding:var(--kritzel-more-menu-padding, 4px);background-color:var(--kritzel-more-menu-background-color, #ffffff);border-radius:var(--kritzel-more-menu-border-radius, 12px);box-shadow:var(--kritzel-more-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-more-menu-border, 1px solid #ebebeb);opacity:0;pointer-events:none;transition:opacity 0.2s ease-out}.more-menu-wrapper.visible{opacity:1;pointer-events:auto}:host(.mobile){--kritzel-more-menu-button-hover-background-color:transparent;--kritzel-more-menu-button-active-background-color:transparent}.more-menu-button{display:flex;align-items:center;justify-content:center;width:var(--kritzel-more-menu-button-width, 40px);height:var(--kritzel-more-menu-button-height, 40px);padding:0;border:none;border-radius:var(--kritzel-more-menu-inner-border-radius, 12px);background-color:transparent;cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:none;transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--kritzel-more-menu-button-color, currentColor)}.more-menu-button:hover{background-color:var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.more-menu-button:focus-visible{background-color:var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.more-menu-button:active{background-color:var(--kritzel-more-menu-button-active-background-color, hsl(0, 0%, 0%, 4.3%))}`;
8
8
 
@@ -150,7 +150,7 @@ const KritzelMoreMenu = /*@__PURE__*/ proxyCustomElement(class KritzelMoreMenu e
150
150
  this.closeMenu();
151
151
  };
152
152
  render() {
153
- return (h(Host, { key: 'dbfe312eccd24901ffc68179ef93ba0a94a765c5', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, h("div", { key: '33bd535bb58ae32a32d44133a109fdd3667b4947', class: { 'more-menu-wrapper': true, visible: this.visible } }, h("button", { key: '23dbae51d73b92b181721bdef4a44049ec6484c5', class: "more-menu-button", "data-testid": "more-menu-button", onClick: this.toggleMenu, "aria-label": this.terms['moreMenu.ariaLabel'] ?? 'More options' }, h("kritzel-icon", { key: 'bda7c092b57af366b5d6b882cbab991cd9bb77ba', name: this.icon, size: this.iconSize })), h("kritzel-portal", { key: '2959ac3e6e0a5598c735ce7a01619bda8753039f', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, h("kritzel-menu", { key: 'a5481a1bc02dc059dc0ad188b93b9eaf9b56e98f', items: this.resolveMenuLabels(this.visibleItems), onItemSelect: this.handleMenuItemSelect })))));
153
+ return (h(Host, { key: '3eaf5dac0beb1f08100c9f57f63a2bdbef6e592d', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, h("div", { key: '30e4426b7d3a06ec45f0159f6403862bf4106723', class: { 'more-menu-wrapper': true, visible: this.visible } }, h("button", { key: '037b715fadad3b674f07bd9225acc4075b2d41b3', class: "more-menu-button", "data-testid": "more-menu-button", onClick: this.toggleMenu, "aria-label": this.terms['moreMenu.ariaLabel'] ?? 'More options' }, h("kritzel-icon", { key: 'b68b306b5b913ff36d220604a70626aa8468215c', name: this.icon, size: this.iconSize })), h("kritzel-portal", { key: 'dc86c2679956f2dfc66d000b183d99865291b6d3', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, h("kritzel-menu", { key: '9bd661fceea95df4d307e497d64365fcb854e8ce', items: this.resolveMenuLabels(this.visibleItems), onItemSelect: this.handleMenuItemSelect })))));
154
154
  }
155
155
  static get watchers() { return {
156
156
  "items": [{
@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transf
2
2
  import { g as getDefaultExportFromCjs } from './p-BFTU3MAI.js';
3
3
  import { d as defineCustomElement$3 } from './p-DX2nriaq.js';
4
4
  import { d as defineCustomElement$2 } from './p-CdR76C4L.js';
5
- import { d as defineCustomElement$1 } from './p-BzJEwFtn.js';
5
+ import { d as defineCustomElement$1 } from './p-BozrueXV.js';
6
6
 
7
7
  var browser = {};
8
8
 
@@ -3204,9 +3204,9 @@ const KritzelShareDialog = /*@__PURE__*/ proxyCustomElement(class KritzelShareDi
3204
3204
  this.dialogClosed.emit();
3205
3205
  };
3206
3206
  render() {
3207
- return (h(Host, { key: '75deaa66e6a6f640506985a8b3a2746892b5da07' }, h("kritzel-dialog", { key: '237413c9302e3756c5f7653e69326fac80d9e181', dialogTitle: this.terms['share.dialogTitle'] ?? 'Share Workspace', size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, h("div", { key: '295394b851cc2210fece6f3e297dfbc0c516b0f7', class: "share-content" }, h("div", { key: 'df64d71f9c7a7064d36db6d0a196071f1e8835a9', class: "share-section" }, h("div", { key: '9db4902a5edd917efb5ad6c183f0862b12313635', class: "share-row" }, h("div", { key: '8ead1d363d3430a4e65fa3b5835401b0e20006db', class: "share-label-group" }, h("label", { key: '2f3c28a3909eab86a123ba6cf7386b79894717c5', class: "share-label" }, this.terms['share.linkSharing.label'] ?? 'Link sharing'), h("p", { key: '3167ae1ed6ff52abc531eafdd905f1397807f551', class: "share-description" }, this.internalIsPublic
3207
+ return (h(Host, { key: 'f6028ad618f04e3be65c816f4b53c4ccaa93fc71' }, h("kritzel-dialog", { key: '7dabab65955f287650de4ba484e37f4ccdd7c57e', dialogTitle: this.terms['share.dialogTitle'] ?? 'Share Workspace', size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, h("div", { key: '321e2b17048dea20528c0f34f39a462548c64689', class: "share-content" }, h("div", { key: 'b31bbe2f686f5fe2fdc03189ffb98082683fff63', class: "share-section" }, h("div", { key: '2c864e00aa4c2da0a7f8ee6c83f149e6e93610a5', class: "share-row" }, h("div", { key: 'cbee03ac7ec9ee82f22c77d3681d4a540a0780a3', class: "share-label-group" }, h("label", { key: '3be7c8dc2ac2f7dbfe6458a902b14a887895fdc3', class: "share-label" }, this.terms['share.linkSharing.label'] ?? 'Link sharing'), h("p", { key: 'c7401bc76fdccbafc6c7c4e37380fc75f35b3a99', class: "share-description" }, this.internalIsPublic
3208
3208
  ? (this.terms['share.linkSharing.enabledDescription'] ?? 'Anyone with the link can access this workspace.')
3209
- : (this.terms['share.linkSharing.disabledDescription'] ?? 'Link sharing is disabled. Only you can access this workspace.'))), h("kritzel-slide-toggle", { key: '3ff608b262e2ff3fa779f7d1e9a4ee3c0b9a16c0', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: this.terms['share.linkSharing.toggleLabel'] ?? 'Enable link sharing' }))), this.internalIsPublic && (h("div", { key: '355261384b0ed386f3b48c041bcf0039db0534c1', class: "share-section" }, h("div", { key: 'ad3d975c650757d0b6dbd5317c9bac4f98029e0c', class: "share-url-container" }, h("input", { key: '0da2cc9cb30f1da8bcab3aa82c679b8d685641bd', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), h("button", { key: 'aee232b7a70b524d52a4b4cf9074c099d29a5300', 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: 'c151baf7b890dbf51c4f4831d60b0ebb1a5d05fa', name: this.copySuccess ? 'check' : 'copy', size: 18 }))), this.qrCodeDataUrl && (h("div", { key: '63b43efe3dc5929054af9e5ee7f64d093864b3b0', class: "share-qr-container" }, h("img", { key: '9d3b0418eb80ff8c7e9106ad86d7cc211d017504', class: "share-qr-image", src: this.qrCodeDataUrl, alt: "QR code for share link" })))))))));
3209
+ : (this.terms['share.linkSharing.disabledDescription'] ?? 'Link sharing is disabled. Only you can access this workspace.'))), h("kritzel-slide-toggle", { key: '52ae14da0d79797e9ad73f1ffbac003fd1395f47', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: this.terms['share.linkSharing.toggleLabel'] ?? 'Enable link sharing' }))), this.internalIsPublic && (h("div", { key: 'bd44618680db14d7d95f0c1bbc4441a103e9f15a', class: "share-section" }, h("div", { key: '659cd6b2e2e719d76f692a8dc5a8c0855e5d246d', class: "share-url-container" }, h("input", { key: '76be432ecaad753cb7043aad912d8aa1770afb61', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), h("button", { key: 'ef75a04964fb481fae2f6e924497eb2adedc100d', 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: '06bbdc32d4348ca6d75dbbe11ba74d94e1c86882', name: this.copySuccess ? 'check' : 'copy', size: 18 }))), this.qrCodeDataUrl && (h("div", { key: '9246e86b26a9794738a29e6a6bfe6c4812339449', class: "share-qr-container" }, h("img", { key: '90e18eee230c23e0bfd773c9b8a6967803ae10dc', class: "share-qr-image", src: this.qrCodeDataUrl, alt: "QR code for share link" })))))))));
3210
3210
  }
3211
3211
  static get watchers() { return {
3212
3212
  "isPublic": [{
@@ -26,11 +26,11 @@ const KritzelButton = /*@__PURE__*/ proxyCustomElement(class KritzelButton exten
26
26
  this.buttonClick.emit();
27
27
  };
28
28
  render() {
29
- return (h(Host, { key: 'b9de2a1261ca0cb491f6980db6a596c48fa45b3a' }, h("button", { key: 'a9507ea0f6a1d9fcb19a7df16bea54cc0ead24f9', type: this.type, class: {
29
+ return (h(Host, { key: '51621006f6b085db2b43accf52192f0674d2c50c' }, h("button", { key: '01ab2d96abe5ad34285e59f6fec66f6b21e91849', type: this.type, class: {
30
30
  'kritzel-button': true,
31
31
  [this.variant]: true,
32
32
  'disabled': this.disabled,
33
- }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '8449a26d4f9fe0226c6150a6639c522486b59780' }))));
33
+ }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '4b085139ea85ad9f836059f4cf2dde15b948e0e2' }))));
34
34
  }
35
35
  static get style() { return kritzelButtonCss(); }
36
36
  }, [769, "kritzel-button", {
@@ -32,7 +32,7 @@ const KritzelSlideToggle = /*@__PURE__*/ proxyCustomElement(class KritzelSlideTo
32
32
  }
33
33
  };
34
34
  render() {
35
- return (h(Host, { key: '00160c9cfdafa0d53f3acfb1fb235b29abf2622a', class: { checked: this.checked, disabled: this.disabled }, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label, onClick: this.handleToggle, onKeyDown: this.handleKeyDown }, h("div", { key: '385008948ffbdc0f26249d2d833aae8f04eeb6a0', class: "toggle-track" }, h("div", { key: '43929e94335589feb24ee45f1c34a270653dd412', class: "toggle-thumb" }))));
35
+ return (h(Host, { key: 'e310e7bc8c115feadaa2494a6a543719f1b25245', 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: 'fef37a1b373bf438cbacbf6537640269c2ab6b59', class: "toggle-track" }, h("div", { key: '4e140f83a8802e04c0b42e76f5e5719efd5a1cbc', class: "toggle-thumb" }))));
36
36
  }
37
37
  static get style() { return kritzelSlideToggleCss(); }
38
38
  }, [513, "kritzel-slide-toggle", {
@@ -33,7 +33,7 @@ const KritzelUtilityPanel = /*@__PURE__*/ proxyCustomElement(class KritzelUtilit
33
33
  this.redo.emit();
34
34
  }
35
35
  render() {
36
- return (h(Host, { key: '001ee010d714513a4b5027f84cac4586c64e2260' }, h("button", { key: '6ba6cbf100e2ad9f81de6416b85f981cd1467f1c', 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: 'b246d3964623e57e9458e5f0266a2f9e0565c646', name: "undo" })), h("button", { key: '1f5015fbd2fd84508bc8b8f295d35960bf31af5b', 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: 'b3694d884707c6844a0036610990cdcfa74c6931', name: "redo" })), h("div", { key: '4f8f4725213d1453af11dc3b4c9ff271f1933df5', class: "utility-separator" }), h("button", { key: '5eba2c56dd96698538a48a8ea9f32fcf8b4d8402', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": this.terms['utility.delete'] ?? 'Delete selected items' }, h("kritzel-icon", { key: '268a186e4e7eaa1ea874ef23e72df511f86b0343', name: "delete" }))));
36
+ return (h(Host, { key: '57c1a6746e4d5b319bb368c9d0bfc52a31d8c8de' }, h("button", { key: '5fb00d62b68de41feda9fafb3eec46cc0b85ba0e', 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: '5ed2c36405ac7113ac697de9102aaf7067127e2a', name: "undo" })), h("button", { key: '0d58c8cbbb8e9547b9416dbf81a2c8011208dc6c', 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: '70264118cbe0f54335a02941fdc868f63476cd1c', name: "redo" })), h("div", { key: '6eed6a603b8bc62e55b1f6fe82e7d035d1f5833c', class: "utility-separator" }), h("button", { key: 'd11195da7a86496afcca26105a6a0f066b1b2340', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": this.terms['utility.delete'] ?? 'Delete selected items' }, h("kritzel-icon", { key: '5e4c731f90863b4db917c67ac7e87c2945c7bcaa', name: "delete" }))));
37
37
  }
38
38
  static get style() { return kritzelUtilityPanelCss(); }
39
39
  }, [513, "kritzel-utility-panel", {
@@ -1,19 +1,17 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
2
- import { a as KritzelMouseButton, d as defineCustomElement$5 } from './p-Cm33td2O.js';
3
- import { K as KritzelBaseObject, e as KritzelMathHelper, f as KritzelGeometryHelper, a as KritzelPath, b as KritzelLine, d as defineCustomElement$6 } from './p-lQ7nfhOy.js';
2
+ import { a as KritzelMouseButton, d as defineCustomElement$3 } from './p-Cm33td2O.js';
3
+ import { K as KritzelBaseObject, e as KritzelMathHelper, f as KritzelGeometryHelper, a as KritzelPath, b as KritzelLine, d as defineCustomElement$4 } from './p-bAacqNHq.js';
4
4
  import { c as commonjsGlobal } from './p-BFTU3MAI.js';
5
- import { a as KritzelColorHelper, D as DEFAULT_COLOR_PALETTE, K as KritzelThemeManager } from './p-CURiiQfq.js';
5
+ import { a as KritzelColorHelper, D as DEFAULT_COLOR_PALETTE, K as KritzelThemeManager } from './p-7I4Uzjrw.js';
6
6
  import { K as KritzelDevicesHelper } from './p-jGOpkGDl.js';
7
7
  import { K as KritzelFontRegistry, r as resolveTextToolAvailableFonts } from './p-DJkKlUyZ.js';
8
- import { A as ABSOLUTE_SCALE_MAX, a as ABSOLUTE_SCALE_MIN, d as defineCustomElement$1 } from './p-CwuGA058.js';
8
+ import { A as ABSOLUTE_SCALE_MAX, a as ABSOLUTE_SCALE_MIN, d as defineCustomElement$1 } from './p-DtnMdWWB.js';
9
9
  import { K as KritzelWorkspace, W as WORKSPACE_EXPORT_VERSION } from './p-DAwPPDMS.js';
10
10
  import { K as KritzelHTMLHelper } from './p-WUdQqYnu.js';
11
11
  import { O as ObjectHelper } from './p-DPONTran.js';
12
12
  import * as Y from 'yjs';
13
13
  import { a as CURRENT_WORKSPACE_SCHEMA_VERSION, C as CURRENT_APP_STATE_SCHEMA_VERSION } from './p-CW-VyJgK.js';
14
- import { K as KritzelIconRegistry, d as defineCustomElement$4 } from './p-CdR76C4L.js';
15
- import { d as defineCustomElement$3 } from './p-CoY7emAj.js';
16
- import { d as defineCustomElement$2 } from './p-CM1duewg.js';
14
+ import { K as KritzelIconRegistry, d as defineCustomElement$2 } from './p-CdR76C4L.js';
17
15
 
18
16
  class KritzelKeyboardHelper {
19
17
  static forceHideKeyboard() {
@@ -23400,8 +23398,8 @@ const EN_LOCALE = {
23400
23398
  'toolConfig.expand': 'Expand',
23401
23399
  // More menu button
23402
23400
  'moreMenu.ariaLabel': 'More options',
23403
- // Engine
23404
- 'engine.loading': 'Loading...',
23401
+ // Editor
23402
+ 'editor.loading': 'Loading...',
23405
23403
  // Watermark
23406
23404
  'watermark.poweredBy': 'Powered by Kritzel',
23407
23405
  },
@@ -23520,8 +23518,8 @@ const DE_LOCALE = {
23520
23518
  'toolConfig.expand': 'Ausklappen',
23521
23519
  // More menu button
23522
23520
  'moreMenu.ariaLabel': 'Weitere Optionen',
23523
- // Engine
23524
- 'engine.loading': 'Wird geladen...',
23521
+ // Editor
23522
+ 'editor.loading': 'Wird geladen...',
23525
23523
  // Watermark
23526
23524
  'watermark.poweredBy': 'Bereitgestellt von Kritzel',
23527
23525
  },
@@ -23640,8 +23638,8 @@ const FR_LOCALE = {
23640
23638
  'toolConfig.expand': 'Développer',
23641
23639
  // More menu button
23642
23640
  'moreMenu.ariaLabel': "Plus d'options",
23643
- // Engine
23644
- 'engine.loading': 'Chargement...',
23641
+ // Editor
23642
+ 'editor.loading': 'Chargement...',
23645
23643
  // Watermark
23646
23644
  'watermark.poweredBy': 'Propulsé par Kritzel',
23647
23645
  },
@@ -51070,7 +51068,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
51070
51068
  this.emitObjectsInViewportChange();
51071
51069
  }
51072
51070
  }
51073
- return (h(Host, null, h("kritzel-loading-overlay", { visible: this.core.store.state.isLoading, text: this.core.localizationManager.translate('engine.loading') }), h("kritzel-sync-indicator", { visible: this.isSyncing, text: "Syncing..." }), this.core.store.state.debugInfo.showViewportInfo && (h("div", { class: "debug-panel", style: {
51071
+ return (h(Host, null, this.core.store.state.debugInfo.showViewportInfo && (h("div", { class: "debug-panel", style: {
51074
51072
  color: 'var(--kritzel-global-text-primary)',
51075
51073
  } }, h("div", null, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", null, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", null, "TranslateX: ", this.core.store.state?.translateX), h("div", null, "TranslateY: ", this.core.store.state?.translateY), h("div", null, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", null, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", null, "PointerCount: ", this.core.store.state.pointers.size), h("div", null, "Scale: ", this.core.store.state?.scale), h("div", null, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", null, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", null, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", null, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", null, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", null, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", null, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", null, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", null, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", null, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", null, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", null, "PointerX: ", this.core.store.state?.pointerX), h("div", null, "PointerY: ", this.core.store.state?.pointerY), h("div", null, "TotalObjects: ", this.core.store.totalObjectCount), h("div", null, "ObjectsInViewport: ", this.core.store.objectsInViewport.length), h("div", null, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", null, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { id: "origin", class: "origin", style: {
51076
51074
  transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
@@ -51772,7 +51770,7 @@ function defineCustomElement() {
51772
51770
  if (typeof customElements === "undefined") {
51773
51771
  return;
51774
51772
  }
51775
- const components = ["kritzel-engine", "kritzel-awareness-cursors", "kritzel-cursor-trail", "kritzel-icon", "kritzel-loading-overlay", "kritzel-sync-indicator", "kritzel-watermark"];
51773
+ const components = ["kritzel-engine", "kritzel-awareness-cursors", "kritzel-cursor-trail", "kritzel-icon", "kritzel-watermark"];
51776
51774
  components.forEach(tagName => { switch (tagName) {
51777
51775
  case "kritzel-engine":
51778
51776
  if (!customElements.get(transformTag(tagName))) {
@@ -51780,26 +51778,16 @@ function defineCustomElement() {
51780
51778
  }
51781
51779
  break;
51782
51780
  case "kritzel-awareness-cursors":
51783
- if (!customElements.get(transformTag(tagName))) {
51784
- defineCustomElement$6();
51785
- }
51786
- break;
51787
- case "kritzel-cursor-trail":
51788
- if (!customElements.get(transformTag(tagName))) {
51789
- defineCustomElement$5();
51790
- }
51791
- break;
51792
- case "kritzel-icon":
51793
51781
  if (!customElements.get(transformTag(tagName))) {
51794
51782
  defineCustomElement$4();
51795
51783
  }
51796
51784
  break;
51797
- case "kritzel-loading-overlay":
51785
+ case "kritzel-cursor-trail":
51798
51786
  if (!customElements.get(transformTag(tagName))) {
51799
51787
  defineCustomElement$3();
51800
51788
  }
51801
51789
  break;
51802
- case "kritzel-sync-indicator":
51790
+ case "kritzel-icon":
51803
51791
  if (!customElements.get(transformTag(tagName))) {
51804
51792
  defineCustomElement$2();
51805
51793
  }
@@ -1,6 +1,6 @@
1
1
  import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-B43upypT.js';
2
2
 
3
- const kritzelSyncIndicatorCss = () => `:host{display:contents}.indicator{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:var(--kritzel-sync-indicator-z-index, 10001);pointer-events:none;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--kritzel-sync-indicator-background, rgba(255, 255, 255, 0.92));color:var(--kritzel-sync-indicator-color, #334155);box-shadow:0 2px 10px rgba(0, 0, 0, 0.12);font-family:var(--kritzel-font-family, sans-serif);font-size:12px;line-height:1;font-weight:500;opacity:0;visibility:hidden}.indicator.visible{opacity:1;visibility:visible}.spinner{width:12px;height:12px;border-radius:50%;border:2px solid var(--kritzel-sync-indicator-spinner-track, rgba(148, 163, 184, 0.35));border-top-color:var(--kritzel-sync-indicator-spinner-color, #2563eb);animation:kritzel-sync-indicator-spin 0.8s linear infinite}@keyframes kritzel-sync-indicator-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;
3
+ 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)}}`;
4
4
 
5
5
  const KritzelSyncIndicator = /*@__PURE__*/ proxyCustomElement(class KritzelSyncIndicator extends H {
6
6
  constructor(registerHost) {
@@ -15,7 +15,7 @@ const KritzelSyncIndicator = /*@__PURE__*/ proxyCustomElement(class KritzelSyncI
15
15
  /** The text displayed next to the spinner. */
16
16
  text = 'Syncing...';
17
17
  render() {
18
- return (h(Host, { key: '585d5fd13116c093e5221164e36e6e986a63da58' }, h("div", { key: 'd4e0d9e51db002b8ea201a0564c22916809c346d', class: { indicator: true, visible: this.visible }, role: "status", "aria-live": "polite", "aria-label": "Synchronizing workspace" }, h("span", { key: 'b82f4c363ee31ae697e435fc8eb6ce0e2f3df1ab', class: "spinner", "aria-hidden": "true" }), h("span", { key: 'f39e04332aaf622dad69d0e5d6b6e90ee5df3ed1' }, this.text))));
18
+ return (h(Host, { key: '05e825ee1c08fe02008b8e1adfe9e09a7996f221' }, h("div", { key: 'ea1635896f643c16713d35d6efd3abf486b1fbe2', class: { indicator: true, visible: this.visible }, role: "status", "aria-live": "polite", "aria-label": "Synchronizing workspace" }, h("span", { key: '7b57ea67d6f2c40dc74e966c16ebe9d95c75394a', class: "spinner", "aria-hidden": "true" }), h("span", { key: 'fc16405b02d96213d0025239b6e863883192ada5' }, this.text))));
19
19
  }
20
20
  static get style() { return kritzelSyncIndicatorCss(); }
21
21
  }, [513, "kritzel-sync-indicator", {
@@ -102,15 +102,15 @@ const KritzelMasterDetail = /*@__PURE__*/ proxyCustomElement(class KritzelMaster
102
102
  const selectedItem = this.items.find(item => item.id === this.selectedItemId);
103
103
  const panelId = 'master-detail-panel';
104
104
  const selectedTabId = selectedItem ? `tab-${selectedItem.id}` : undefined;
105
- return (h(Host, { key: '0edf50b0b853633b88bf481f97f22aceba9e163e' }, h("div", { key: '21a0a3f81e5a60889ccd152c905cb41f52c3e037', class: {
105
+ return (h(Host, { key: '0166376f16ebb098049cd2ef5539a86086a5570e' }, h("div", { key: 'f5091fe672bc4751c8f66d43baa5c1fc86fca034', class: {
106
106
  'master-detail-container': true,
107
107
  'is-mobile-detail-visible': this.showMobileDetail,
108
- } }, h("nav", { key: '41f88248cc372c8cae4cb50a19edf462a01e43f2', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index) => (h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index), class: {
108
+ } }, h("nav", { key: '66f5c61ea0308ea9ae1339526e86dcf1ee51fc0a', 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: {
109
109
  'menu-item': true,
110
110
  'is-selected': item.id === this.selectedItemId,
111
111
  'is-disabled': !!item.disabled,
112
112
  'is-focused': index === this.focusedIndex,
113
- }, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index), onFocus: () => this.handleFocus(index), onBlur: this.handleBlur }, item.icon && (h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), h("span", { class: "menu-item-label" }, item.label), h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "m9 18 6-6-6-6" }))))))), h("div", { key: 'f8447facf3dfdbd7772823654847e1b90b03f73e', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, h("button", { key: '3edc9784267613e6b3a706739bbb537161e4c747', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, h("kritzel-icon", { key: 'ec0b4691735578525e5863842271366e04b13fb7', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), h("slot", { key: 'c21fbaff78f98859b9756427125b60504d4bb630' })))));
113
+ }, 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: 'e8f762ad87fdcf401ec717538bf1e979b22a9f15', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, h("button", { key: '958360d57a1fad0953bc3865503e86c1d8aa24e3', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, h("kritzel-icon", { key: 'c65eb947f80aafec99b367dae7ea72b1a77acdac', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), h("slot", { key: '44557fddf513fffd86c7a1b28b71a41fef7701f1' })))));
114
114
  }
115
115
  static get watchers() { return {
116
116
  "selectedItemId": [{