microboard-ui-temp 0.9.9 → 0.9.11

package/dist/{chunk-zfnz46n9.js → chunk-4r8btzmr.js}

@@ -341014,6 +341014,7 @@ var UiButton = import_react30.forwardRef(({
   return /* @__PURE__ */ import_react30.default.createElement("button", {
     id: id2,
     "data-variant": variant,
+    "data-active": active || undefined,
     className: clsx_default(UiButton_module_default.button, active && UiButton_module_default.active, UiButton_module_default[variant], UiButton_module_default[size2], {
       [UiButton_module_default.topRounded]: rounded === "top",
       [UiButton_module_default.bottomRounded]: rounded === "bottom",
@@ -345741,7 +345742,9 @@ function getController(getBoard2, clipboard, account, appSettings) {
         case 1:
           return tools.middleButtonUp();
         case 2:
-          board.setIsBoardMenuOpen(true);
+          if (!board.tools.getNavigate()) {
+            board.setIsBoardMenuOpen(true);
+          }
           return tools.rightButtonUp();
         default:
           return tools.leftButtonUp();
@@ -444246,8 +444249,7 @@ var Comments = () => {
   }, /* @__PURE__ */ import_react414.default.createElement(Icon, {
     iconName: "Comment",
     width: 18,
-    height: 18,
-    style: { color: "rgba(105, 107, 118, 1)" }
+    height: 18
   }), t11("boardMenu.comments.resolveAll"))));
 };
 
@@ -444538,7 +444540,8 @@ var BoardMenu = () => {
   import_react418.useEffect(() => {
     setIsOpen(board.getIsBoardMenuOpen());
   }, [board.getIsBoardMenuOpen()]);
-  return isOpen ? /* @__PURE__ */ import_react418.default.createElement(UiPanel, {
+  const isNavigate = Boolean(board.tools.getNavigate());
+  return isOpen && !isNavigate ? /* @__PURE__ */ import_react418.default.createElement(UiPanel, {
     onPointerUp: () => shouldUpdatePosition.current = false,
     onPointerDown: () => shouldUpdatePosition.current = false,
     onClick: () => shouldUpdatePosition.current = false,

package/dist/{chunk-dr0g41aw.css → chunk-zhvezs8w.css}

@@ -30,6 +30,7 @@
   --icon-base-secondary: #696b76;
   --icon-accent-purple: #924fe8;
   --scrollbar-thumb: #dee1e8;
+  --skeleton-shimmer: #ffffff80;
   --absolute-position-panel-padding: 12px;
 }
 
@@ -61,6 +62,7 @@
   --icon-base-secondary: #9496a5;
   --icon-accent-purple: #924fe8;
   --scrollbar-thumb: #50525f;
+  --skeleton-shimmer: #ffffff0f;
 }
 
 * {
@@ -158,6 +160,11 @@ button[data-variant="secondary"] {
   }
 }
 
+button[data-variant="secondary"][data-active="true"]:not(:disabled) {
+  background-color: var(--background-hover-subtle-strong);
+  color: #924fe8;
+}
+
 button[data-variant="secondary"]:active:not(:disabled) {
   color: #924fe8;
 }
@@ -606,6 +613,11 @@ button[data-variant="black"] {
   }
 }
 
+.secondary_XNHIwg.active_XNHIwg:not([disabled]) {
+  background-color: var(--background-hover-subtle-strong);
+  color: #924fe8;
+}
+
 .secondary_XNHIwg:active:not(:disabled) {
   color: #924fe8;
   outline: 2px solid #c8b2ff80;
@@ -3193,9 +3205,9 @@ a.link_jFMnzg {
 
 /* src/shared/ui-lib/UiSkeleton/UiSkeleton.module.css */
 .skeleton_4u5Pcg {
+  background-color: var(--background-badge-gray);
   overflow: hidden;
   position: relative;
-  background-color: #eee;
   border-radius: 4px;
   width: 100%;
   height: 100%;
@@ -3205,8 +3217,8 @@ a.link_jFMnzg {
   content: "";
   display: block;
   position: absolute;
+  background: linear-gradient(90deg, transparent, var(--skeleton-shimmer), transparent);
   animation: loading 1.5s infinite;
-  background: linear-gradient(90deg, #0000, #fff6, #0000);
   width: 100%;
   height: 100%;
   top: 0;
@@ -6509,6 +6521,7 @@ td.currentTariff_0VfwRg {
   display: flex;
   white-space: nowrap;
   cursor: pointer;
+  color: var(--text-base-primary);
   background: none;
   border-radius: 6px;
   align-items:  center;
@@ -6522,19 +6535,19 @@ td.currentTariff_0VfwRg {
 
 .icon_9VT5sg {
   display: flex;
-  color: #696b76;
+  color: var(--icon-base-secondary);
   justify-content: center;
   align-items:  center;
 }
 
 .item_9VT5sg:disabled, .item_9VT5sg:disabled .icon_9VT5sg {
-  color: #0a0f2940;
+  color: var(--text-base-quaternary);
   cursor: not-allowed;
 }
 
 @media (hover: hover) {
   .item_9VT5sg:hover:not(:disabled) {
-    background-color: #0a0f290a;
+    background-color: var(--background-hover-subtle);
   }
 }
 
@@ -7327,8 +7340,9 @@ td.currentTariff_0VfwRg {
 /* src/entities/Folder/DraggingItem.module.css */
 .item_f6AqBQ {
   display: flex;
-  background-color: #f7f7f8;
-  border: 1px solid #c8cad0;
+  background-color: var(--background-button-secondary);
+  border: 1px solid var(--border-action-normal);
+  color: var(--text-base-primary);
   align-items:  center;
   gap: 4px;
   padding: 8px 16px;
@@ -8320,6 +8334,7 @@ td.currentTariff_0VfwRg {
 .item_W71HlQ {
   display: flex;
   cursor: pointer;
+  color: var(--text-base-primary);
   background: none;
   border-radius: 6px;
   align-items:  center;
@@ -8332,7 +8347,7 @@ td.currentTariff_0VfwRg {
 
 @media (hover: hover) {
   .item_W71HlQ:hover {
-    background: #e9eaec;
+    background: var(--background-hover-subtle-strong);
   }
 }
 
@@ -8342,7 +8357,7 @@ td.currentTariff_0VfwRg {
 }
 
 .hotkey_W71HlQ {
-  color: #0d112666;
+  color: var(--text-base-quaternary);
   margin-left: auto;
   padding: 0 4px;
   font-family: Manrope;
@@ -8361,7 +8376,7 @@ td.currentTariff_0VfwRg {
 
 .hotkey_W71HlQ {
   text-wrap: nowrap;
-  color: #0000003d;
+  color: var(--text-base-quaternary);
   text-align: right;
 }
 
@@ -8412,6 +8427,8 @@ td.currentTariff_0VfwRg {
 .input_0DxcUg {
   text-align: center;
   outline: none;
+  color: var(--text-base-primary);
+  background: none;
   border: none;
   max-width: 36px;
   height: 100%;
@@ -8425,7 +8442,7 @@ td.currentTariff_0VfwRg {
 
 .input_0DxcUg:not(:focus) {
   cursor: pointer;
-  color: #14151a;
+  color: var(--text-base-primary);
 }
 
 .sizeList_0DxcUg {
@@ -10867,11 +10884,11 @@ input.rename_i3VZwA {
 }
 
 .cardSilhouette_NAp5GQ {
+  border: 2px dashed var(--border-select-primary);
+  background: var(--background-button-tertiary);
   display: flex;
   cursor: pointer;
   position: relative;
-  background: #faf8ff;
-  border: 2px dashed #b78af0;
   border-radius: 12px;
   justify-content: center;
   align-items:  center;
@@ -10885,7 +10902,7 @@ input.rename_i3VZwA {
 }
 
 .cardLabel_NAp5GQ {
-  color: #b78af0;
+  color: var(--text-accent-purple);
   text-align: center;
   pointer-events: none;
   font-size: 14px;
@@ -10900,7 +10917,7 @@ input.rename_i3VZwA {
 }
 
 .diceLabel_NAp5GQ {
-  color: #b78af0;
+  color: var(--text-accent-purple);
   text-align: center;
   pointer-events: none;
   display: flex;
@@ -10942,8 +10959,8 @@ input.rename_i3VZwA {
   cursor: pointer;
   display: flex;
   position: relative;
-  background: #faf8ff;
-  border: 2px dashed #b78af0;
+  background: var(--background-button-tertiary);
+  border: 2px dashed var(--border-select-primary);
   border-radius: 8px;
   justify-content: center;
   align-items:  center;
@@ -10959,9 +10976,9 @@ input.rename_i3VZwA {
 .addFaceBtn_NAp5GQ {
   cursor: pointer;
   display: flex;
-  color: #888;
-  background: #faf8ff;
-  border: 2px dashed #ccc;
+  border: 2px dashed var(--border-action-normal);
+  color: var(--icon-base-secondary);
+  background: var(--background-button-tertiary);
   border-radius: 8px;
   justify-content: center;
   align-items:  center;
@@ -12822,8 +12839,14 @@ input.rename_i3VZwA {
   transform: translateX(-4px);
 }
 
-.btn_G-DvKg:hover {
-  background-color: #0a0f290a;
+.btn_G-DvKg {
+  color: var(--text-base-primary);
+}
+
+@media (hover: hover) {
+  .btn_G-DvKg:hover {
+    background-color: var(--background-hover-subtle);
+  }
 }
 
 /* src/entities/BoardMenu/MouseOrTracpadModal/MouseOrTracpadModal.module.css */

package/dist/example.html

@@ -44,7 +44,7 @@
         document.documentElement.setAttribute("data-theme", t);
       })();
     </script>
-  <link rel="stylesheet" crossorigin href="/chunk-dr0g41aw.css"><script type="module" crossorigin src="/chunk-zfnz46n9.js"></script></head>
+  <link rel="stylesheet" crossorigin href="/chunk-zhvezs8w.css"><script type="module" crossorigin src="/chunk-4r8btzmr.js"></script></head>
 
   <body
     style="

package/dist/index.css

@@ -371,6 +371,11 @@
   }
 }
 
+.secondary_XNHIwg.active_XNHIwg:not([disabled]) {
+  background-color: var(--background-hover-subtle-strong);
+  color: #924fe8;
+}
+
 .secondary_XNHIwg:active:not(:disabled) {
   color: #924fe8;
   outline: 2px solid #c8b2ff80;
@@ -2958,9 +2963,9 @@ a.link_jFMnzg {
 
 /* src/shared/ui-lib/UiSkeleton/UiSkeleton.module.css */
 .skeleton_4u5Pcg {
+  background-color: var(--background-badge-gray);
   overflow: hidden;
   position: relative;
-  background-color: #eee;
   border-radius: 4px;
   width: 100%;
   height: 100%;
@@ -2970,8 +2975,8 @@ a.link_jFMnzg {
   content: "";
   display: block;
   position: absolute;
+  background: linear-gradient(90deg, transparent, var(--skeleton-shimmer), transparent);
   animation: loading 1.5s infinite;
-  background: linear-gradient(90deg, #0000, #fff6, #0000);
   width: 100%;
   height: 100%;
   top: 0;
@@ -6274,6 +6279,7 @@ td.currentTariff_0VfwRg {
   display: flex;
   white-space: nowrap;
   cursor: pointer;
+  color: var(--text-base-primary);
   background: none;
   border-radius: 6px;
   align-items:  center;
@@ -6287,19 +6293,19 @@ td.currentTariff_0VfwRg {
 
 .icon_9VT5sg {
   display: flex;
-  color: #696b76;
+  color: var(--icon-base-secondary);
   justify-content: center;
   align-items:  center;
 }
 
 .item_9VT5sg:disabled, .item_9VT5sg:disabled .icon_9VT5sg {
-  color: #0a0f2940;
+  color: var(--text-base-quaternary);
   cursor: not-allowed;
 }
 
 @media (hover: hover) {
   .item_9VT5sg:hover:not(:disabled) {
-    background-color: #0a0f290a;
+    background-color: var(--background-hover-subtle);
   }
 }
 
@@ -7092,8 +7098,9 @@ td.currentTariff_0VfwRg {
 /* src/entities/Folder/DraggingItem.module.css */
 .item_f6AqBQ {
   display: flex;
-  background-color: #f7f7f8;
-  border: 1px solid #c8cad0;
+  background-color: var(--background-button-secondary);
+  border: 1px solid var(--border-action-normal);
+  color: var(--text-base-primary);
   align-items:  center;
   gap: 4px;
   padding: 8px 16px;
@@ -8085,6 +8092,7 @@ td.currentTariff_0VfwRg {
 .item_W71HlQ {
   display: flex;
   cursor: pointer;
+  color: var(--text-base-primary);
   background: none;
   border-radius: 6px;
   align-items:  center;
@@ -8097,7 +8105,7 @@ td.currentTariff_0VfwRg {
 
 @media (hover: hover) {
   .item_W71HlQ:hover {
-    background: #e9eaec;
+    background: var(--background-hover-subtle-strong);
   }
 }
 
@@ -8107,7 +8115,7 @@ td.currentTariff_0VfwRg {
 }
 
 .hotkey_W71HlQ {
-  color: #0d112666;
+  color: var(--text-base-quaternary);
   margin-left: auto;
   padding: 0 4px;
   font-family: Manrope;
@@ -8126,7 +8134,7 @@ td.currentTariff_0VfwRg {
 
 .hotkey_W71HlQ {
   text-wrap: nowrap;
-  color: #0000003d;
+  color: var(--text-base-quaternary);
   text-align: right;
 }
 
@@ -8177,6 +8185,8 @@ td.currentTariff_0VfwRg {
 .input_0DxcUg {
   text-align: center;
   outline: none;
+  color: var(--text-base-primary);
+  background: none;
   border: none;
   max-width: 36px;
   height: 100%;
@@ -8190,7 +8200,7 @@ td.currentTariff_0VfwRg {
 
 .input_0DxcUg:not(:focus) {
   cursor: pointer;
-  color: #14151a;
+  color: var(--text-base-primary);
 }
 
 .sizeList_0DxcUg {
@@ -10632,11 +10642,11 @@ input.rename_i3VZwA {
 }
 
 .cardSilhouette_NAp5GQ {
+  border: 2px dashed var(--border-select-primary);
+  background: var(--background-button-tertiary);
   display: flex;
   cursor: pointer;
   position: relative;
-  background: #faf8ff;
-  border: 2px dashed #b78af0;
   border-radius: 12px;
   justify-content: center;
   align-items:  center;
@@ -10650,7 +10660,7 @@ input.rename_i3VZwA {
 }
 
 .cardLabel_NAp5GQ {
-  color: #b78af0;
+  color: var(--text-accent-purple);
   text-align: center;
   pointer-events: none;
   font-size: 14px;
@@ -10665,7 +10675,7 @@ input.rename_i3VZwA {
 }
 
 .diceLabel_NAp5GQ {
-  color: #b78af0;
+  color: var(--text-accent-purple);
   text-align: center;
   pointer-events: none;
   display: flex;
@@ -10707,8 +10717,8 @@ input.rename_i3VZwA {
   cursor: pointer;
   display: flex;
   position: relative;
-  background: #faf8ff;
-  border: 2px dashed #b78af0;
+  background: var(--background-button-tertiary);
+  border: 2px dashed var(--border-select-primary);
   border-radius: 8px;
   justify-content: center;
   align-items:  center;
@@ -10724,9 +10734,9 @@ input.rename_i3VZwA {
 .addFaceBtn_NAp5GQ {
   cursor: pointer;
   display: flex;
-  color: #888;
-  background: #faf8ff;
-  border: 2px dashed #ccc;
+  border: 2px dashed var(--border-action-normal);
+  color: var(--icon-base-secondary);
+  background: var(--background-button-tertiary);
   border-radius: 8px;
   justify-content: center;
   align-items:  center;
@@ -12587,8 +12597,14 @@ input.rename_i3VZwA {
   transform: translateX(-4px);
 }
 
-.btn_G-DvKg:hover {
-  background-color: #0a0f290a;
+.btn_G-DvKg {
+  color: var(--text-base-primary);
+}
+
+@media (hover: hover) {
+  .btn_G-DvKg:hover {
+    background-color: var(--background-hover-subtle);
+  }
 }
 
 /* src/entities/BoardMenu/MouseOrTracpadModal/MouseOrTracpadModal.module.css */

package/dist/index.html

@@ -44,7 +44,7 @@
         document.documentElement.setAttribute("data-theme", t);
       })();
     </script>
-  <link rel="stylesheet" crossorigin href="/chunk-dr0g41aw.css"><script type="module" crossorigin src="/chunk-zfnz46n9.js"></script></head>
+  <link rel="stylesheet" crossorigin href="/chunk-zhvezs8w.css"><script type="module" crossorigin src="/chunk-4r8btzmr.js"></script></head>
 
   <body
     style="

package/dist/index.js

@@ -341014,6 +341014,7 @@ var UiButton = import_react30.forwardRef(({
   return /* @__PURE__ */ import_react30.default.createElement("button", {
     id: id2,
     "data-variant": variant,
+    "data-active": active || undefined,
     className: clsx_default(UiButton_module_default.button, active && UiButton_module_default.active, UiButton_module_default[variant], UiButton_module_default[size2], {
       [UiButton_module_default.topRounded]: rounded === "top",
       [UiButton_module_default.bottomRounded]: rounded === "bottom",
@@ -345741,7 +345742,9 @@ function getController(getBoard2, clipboard, account, appSettings) {
         case 1:
           return tools.middleButtonUp();
         case 2:
-          board.setIsBoardMenuOpen(true);
+          if (!board.tools.getNavigate()) {
+            board.setIsBoardMenuOpen(true);
+          }
           return tools.rightButtonUp();
         default:
           return tools.leftButtonUp();
@@ -444246,8 +444249,7 @@ var Comments = () => {
   }, /* @__PURE__ */ import_react414.default.createElement(Icon, {
     iconName: "Comment",
     width: 18,
-    height: 18,
-    style: { color: "rgba(105, 107, 118, 1)" }
+    height: 18
   }), t11("boardMenu.comments.resolveAll"))));
 };
 
@@ -444538,7 +444540,8 @@ var BoardMenu = () => {
   import_react418.useEffect(() => {
     setIsOpen(board.getIsBoardMenuOpen());
   }, [board.getIsBoardMenuOpen()]);
-  return isOpen ? /* @__PURE__ */ import_react418.default.createElement(UiPanel, {
+  const isNavigate = Boolean(board.tools.getNavigate());
+  return isOpen && !isNavigate ? /* @__PURE__ */ import_react418.default.createElement(UiPanel, {
     onPointerUp: () => shouldUpdatePosition.current = false,
     onPointerDown: () => shouldUpdatePosition.current = false,
     onClick: () => shouldUpdatePosition.current = false,

package/dist/spa.css

@@ -374,6 +374,11 @@
   }
 }
 
+.secondary_XNHIwg.active_XNHIwg:not([disabled]) {
+  background-color: var(--background-hover-subtle-strong);
+  color: #924fe8;
+}
+
 .secondary_XNHIwg:active:not(:disabled) {
   color: #924fe8;
   outline: 2px solid #c8b2ff80;
@@ -2961,9 +2966,9 @@ a.link_jFMnzg {
 
 /* src/shared/ui-lib/UiSkeleton/UiSkeleton.module.css */
 .skeleton_4u5Pcg {
+  background-color: var(--background-badge-gray);
   overflow: hidden;
   position: relative;
-  background-color: #eee;
   border-radius: 4px;
   width: 100%;
   height: 100%;
@@ -2973,8 +2978,8 @@ a.link_jFMnzg {
   content: "";
   display: block;
   position: absolute;
+  background: linear-gradient(90deg, transparent, var(--skeleton-shimmer), transparent);
   animation: loading 1.5s infinite;
-  background: linear-gradient(90deg, #0000, #fff6, #0000);
   width: 100%;
   height: 100%;
   top: 0;
@@ -6277,6 +6282,7 @@ td.currentTariff_0VfwRg {
   display: flex;
   white-space: nowrap;
   cursor: pointer;
+  color: var(--text-base-primary);
   background: none;
   border-radius: 6px;
   align-items:  center;
@@ -6290,19 +6296,19 @@ td.currentTariff_0VfwRg {
 
 .icon_9VT5sg {
   display: flex;
-  color: #696b76;
+  color: var(--icon-base-secondary);
   justify-content: center;
   align-items:  center;
 }
 
 .item_9VT5sg:disabled, .item_9VT5sg:disabled .icon_9VT5sg {
-  color: #0a0f2940;
+  color: var(--text-base-quaternary);
   cursor: not-allowed;
 }
 
 @media (hover: hover) {
   .item_9VT5sg:hover:not(:disabled) {
-    background-color: #0a0f290a;
+    background-color: var(--background-hover-subtle);
   }
 }
 
@@ -7095,8 +7101,9 @@ td.currentTariff_0VfwRg {
 /* src/entities/Folder/DraggingItem.module.css */
 .item_f6AqBQ {
   display: flex;
-  background-color: #f7f7f8;
-  border: 1px solid #c8cad0;
+  background-color: var(--background-button-secondary);
+  border: 1px solid var(--border-action-normal);
+  color: var(--text-base-primary);
   align-items:  center;
   gap: 4px;
   padding: 8px 16px;
@@ -8088,6 +8095,7 @@ td.currentTariff_0VfwRg {
 .item_W71HlQ {
   display: flex;
   cursor: pointer;
+  color: var(--text-base-primary);
   background: none;
   border-radius: 6px;
   align-items:  center;
@@ -8100,7 +8108,7 @@ td.currentTariff_0VfwRg {
 
 @media (hover: hover) {
   .item_W71HlQ:hover {
-    background: #e9eaec;
+    background: var(--background-hover-subtle-strong);
   }
 }
 
@@ -8110,7 +8118,7 @@ td.currentTariff_0VfwRg {
 }
 
 .hotkey_W71HlQ {
-  color: #0d112666;
+  color: var(--text-base-quaternary);
   margin-left: auto;
   padding: 0 4px;
   font-family: Manrope;
@@ -8129,7 +8137,7 @@ td.currentTariff_0VfwRg {
 
 .hotkey_W71HlQ {
   text-wrap: nowrap;
-  color: #0000003d;
+  color: var(--text-base-quaternary);
   text-align: right;
 }
 
@@ -8180,6 +8188,8 @@ td.currentTariff_0VfwRg {
 .input_0DxcUg {
   text-align: center;
   outline: none;
+  color: var(--text-base-primary);
+  background: none;
   border: none;
   max-width: 36px;
   height: 100%;
@@ -8193,7 +8203,7 @@ td.currentTariff_0VfwRg {
 
 .input_0DxcUg:not(:focus) {
   cursor: pointer;
-  color: #14151a;
+  color: var(--text-base-primary);
 }
 
 .sizeList_0DxcUg {
@@ -10635,11 +10645,11 @@ input.rename_i3VZwA {
 }
 
 .cardSilhouette_NAp5GQ {
+  border: 2px dashed var(--border-select-primary);
+  background: var(--background-button-tertiary);
   display: flex;
   cursor: pointer;
   position: relative;
-  background: #faf8ff;
-  border: 2px dashed #b78af0;
   border-radius: 12px;
   justify-content: center;
   align-items:  center;
@@ -10653,7 +10663,7 @@ input.rename_i3VZwA {
 }
 
 .cardLabel_NAp5GQ {
-  color: #b78af0;
+  color: var(--text-accent-purple);
   text-align: center;
   pointer-events: none;
   font-size: 14px;
@@ -10668,7 +10678,7 @@ input.rename_i3VZwA {
 }
 
 .diceLabel_NAp5GQ {
-  color: #b78af0;
+  color: var(--text-accent-purple);
   text-align: center;
   pointer-events: none;
   display: flex;
@@ -10710,8 +10720,8 @@ input.rename_i3VZwA {
   cursor: pointer;
   display: flex;
   position: relative;
-  background: #faf8ff;
-  border: 2px dashed #b78af0;
+  background: var(--background-button-tertiary);
+  border: 2px dashed var(--border-select-primary);
   border-radius: 8px;
   justify-content: center;
   align-items:  center;
@@ -10727,9 +10737,9 @@ input.rename_i3VZwA {
 .addFaceBtn_NAp5GQ {
   cursor: pointer;
   display: flex;
-  color: #888;
-  background: #faf8ff;
-  border: 2px dashed #ccc;
+  border: 2px dashed var(--border-action-normal);
+  color: var(--icon-base-secondary);
+  background: var(--background-button-tertiary);
   border-radius: 8px;
   justify-content: center;
   align-items:  center;
@@ -12590,8 +12600,14 @@ input.rename_i3VZwA {
   transform: translateX(-4px);
 }
 
-.btn_G-DvKg:hover {
-  background-color: #0a0f290a;
+.btn_G-DvKg {
+  color: var(--text-base-primary);
+}
+
+@media (hover: hover) {
+  .btn_G-DvKg:hover {
+    background-color: var(--background-hover-subtle);
+  }
 }
 
 /* src/entities/BoardMenu/MouseOrTracpadModal/MouseOrTracpadModal.module.css */
@@ -14551,6 +14567,7 @@ audio::-webkit-media-controls-enclosure {
   --icon-base-secondary: #696b76;
   --icon-accent-purple: #924fe8;
   --scrollbar-thumb: #dee1e8;
+  --skeleton-shimmer: #ffffff80;
   --absolute-position-panel-padding: 12px;
 }
 
@@ -14582,6 +14599,7 @@ audio::-webkit-media-controls-enclosure {
   --icon-base-secondary: #9496a5;
   --icon-accent-purple: #924fe8;
   --scrollbar-thumb: #50525f;
+  --skeleton-shimmer: #ffffff0f;
 }
 
 * {
@@ -14679,6 +14697,11 @@ button[data-variant="secondary"] {
   }
 }
 
+button[data-variant="secondary"][data-active="true"]:not(:disabled) {
+  background-color: var(--background-hover-subtle-strong);
+  color: #924fe8;
+}
+
 button[data-variant="secondary"]:active:not(:disabled) {
   color: #924fe8;
 }

package/dist/spa.js

@@ -341014,6 +341014,7 @@ var UiButton = import_react30.forwardRef(({
   return /* @__PURE__ */ import_react30.default.createElement("button", {
     id: id2,
     "data-variant": variant,
+    "data-active": active || undefined,
     className: clsx_default(UiButton_module_default.button, active && UiButton_module_default.active, UiButton_module_default[variant], UiButton_module_default[size2], {
       [UiButton_module_default.topRounded]: rounded === "top",
       [UiButton_module_default.bottomRounded]: rounded === "bottom",
@@ -345741,7 +345742,9 @@ function getController(getBoard2, clipboard, account, appSettings) {
         case 1:
           return tools.middleButtonUp();
         case 2:
-          board.setIsBoardMenuOpen(true);
+          if (!board.tools.getNavigate()) {
+            board.setIsBoardMenuOpen(true);
+          }
           return tools.rightButtonUp();
         default:
           return tools.leftButtonUp();
@@ -444246,8 +444249,7 @@ var Comments = () => {
   }, /* @__PURE__ */ import_react414.default.createElement(Icon, {
     iconName: "Comment",
     width: 18,
-    height: 18,
-    style: { color: "rgba(105, 107, 118, 1)" }
+    height: 18
   }), t11("boardMenu.comments.resolveAll"))));
 };
 
@@ -444538,7 +444540,8 @@ var BoardMenu = () => {
   import_react418.useEffect(() => {
     setIsOpen(board.getIsBoardMenuOpen());
   }, [board.getIsBoardMenuOpen()]);
-  return isOpen ? /* @__PURE__ */ import_react418.default.createElement(UiPanel, {
+  const isNavigate = Boolean(board.tools.getNavigate());
+  return isOpen && !isNavigate ? /* @__PURE__ */ import_react418.default.createElement(UiPanel, {
     onPointerUp: () => shouldUpdatePosition.current = false,
     onPointerDown: () => shouldUpdatePosition.current = false,
     onClick: () => shouldUpdatePosition.current = false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "microboard-ui-temp",
-  "version": "0.9.9",
+  "version": "0.9.11",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "type": "module",