From 72b1919e29f535159dabaac16a9330a1299644ff Mon Sep 17 00:00:00 2001
From: Juanfran <juanfran.ag@gmail.com>
Date: Fri, 27 Jun 2025 15:17:24 +0200
Subject: [PATCH] :sparkles: Add in-app help to guide users about variant rules

---
 .../images/help-variant-connection.png        | Bin 0 -> 12872 bytes
 .../sidebar/options/menus/component.cljs      |  16 ++-
 .../sidebar/options/menus/component.scss      |  10 +-
 .../options/menus/variants_help_modal.cljs    | 101 ++++++++++++++++++
 .../options/menus/variants_help_modal.scss    |  84 +++++++++++++++
 frontend/translations/en.po                   |  24 +++++
 6 files changed, 233 insertions(+), 2 deletions(-)
 create mode 100644 frontend/resources/images/help-variant-connection.png
 create mode 100644 frontend/src/app/main/ui/workspace/sidebar/options/menus/variants_help_modal.cljs
 create mode 100644 frontend/src/app/main/ui/workspace/sidebar/options/menus/variants_help_modal.scss

diff --git a/frontend/resources/images/help-variant-connection.png b/frontend/resources/images/help-variant-connection.png
new file mode 100644
index 0000000000000000000000000000000000000000..2d743678f71b1896bf6a938fc28b0f0b6e891fd3
GIT binary patch
literal 12872
zcmd^mbyOVRnr-3kt_@8RELf1>G|&VBB)Ej&5?q1>f;8@$U;#pa0Kp}=y95aC8WITZ
zE)B2pyEAj&yKCN^nJ4T0@mQ-DUA<0K*Qs;9@7v$ryTetV%M;+z;sO9b@Kgb=4ge^w
z;L8si6a1vv_=7(955+}YUIr)~qTd7nCg3StTGJzachS>ZdHojaV3>c_JYE5tq>4?k
zaH>d$s#<e$Os^q-i>tbNi=#Sd3%QuYoy4IxF~u?2pj8r~ZCg;NE|-X&Rk42$llkkA
zbH*|xJU%>V)_G`ka2@&fbaK!oX`Sx)qe_Md|2J%p52E~*m>40Pv6t-50D7ttJ14F`
z42F$^gTh=@8Xx8zJc!~%(`LcmEdtO5m6t9}JGw?pB~tX-b{sC{x<D-qm*@b)U|8HV
z`4hNi5PFOvo5tBW-D&t#HF=(=Lk|}OvXM-|M@~w{WS&Bm0Ee#<<9x^lSO`z(>b1A^
zGTkz#FP&d`h*Y{!FwJ9QijX9#kvbbXTb*WY%#IgYFr?;MeGY~!m0;J?!alw$jZk{&
zKix`-VU(;alZVYF(R4~nMUu!MNX5lL^`KNM(6kh4;-LU@r<AGUcDD>Cc-87>$nFzr
zsNOt+nu`9m`OZg`op<;k*{`nhLLw(E_nWN9*j*M2GL&Xf7>8u^*`A>=r;w`dQb3zh
zx1A)4u9$Uorl!P5+VCex992psO&nL`^F4<sDv{|aCJlvo1D;m9vk~_2FuN^;WQn2Q
zWH~A-!LE=(F^)i}>p0X4-$um>caT;~J;m!Cz&Q9RGOX`d{VGP(^&9<>ib8$ALm=!+
zQ`^o9y@{MH+~y%m{?7wA15Z&%^gZ+y6Z#tm?#G!NR8B0;v)%@*4?l+|l&xgbaAJ%!
zAEZ!xeLuJFtL7HWXkOle_u}55+FL1YbmCH7<TCfiN-~nQMp6zhS!n%13gn<=&Mm)2
zrc46i47XApkyE%R5@bEnx$~U;-Neyr=!+~&JtmEJ48OK}mHw%Gk4HQYCRy9M+-G4k
znK_3mA;6o@MLryIxu`Z8#zEyg;1dK>wK7(HsWPMl*PQUb?IeVmO0Vz*l9v^{2(<Bc
z5d87<#m1#y!d^4JXvs6G2{wrTK>cj(q7Ev<Vro=aABxDqwUok)%v0QjH|HHMDr~-&
z>1AHCA2By>i#asm{yC>u#Fv=vIpb?91oLRu+PAPUde@vg-p}N^uaPwX+^>B>tK@Rh
zOHDIkqvNqbw2NgY{bj2J?XRD%aQJf)bvv#{*>eHv)v)BY5*~M|4bSuD`wlMm2aj<u
zMM(-eI1<o;9q|g50@T0Pa?Nq|D>Vf8{uskhwqLx=dp+Hm9;P5c>RWJDtEN#>uZ8b=
zts||}u=>uMk3i~^cofmx0=C<Er+%JjIT=a(Jo)`;ZpWYq|I#_Hj$mTKy8~UsPu`qC
zB4@y%Y!Cw-?PHkcYp1pu+jH*J*JiLV?CRgzr^(*whsWPK>sZ85rRb4#R9`C>M3c!C
zj&x1naKnCEGzNfj?|Oh`U5$xM+!+dm^5k6^z0^z#5?~fE`#j}FOp++Hh$YHI$*>`^
zl;cJLhv$AT;;FAwlKD-0Q|xGCfJG8d>)I?s)h2)Qas$4~=}N!h?DdxIft3LUNxWVa
zo@+RNuDcC;>?#JkO8TbAqc2sznV?5PsTd6>WCr)*Rt}F9J=N4kHdXgWsU&<HpisxW
z7n!W*KK5nZ#Hue9FGG8ub5ykdq|&`>Ym2`L<bkic2sDRejJ?^&UDco|$%#YDg{N*?
zzM~>%<JlE+JFQ4)k>&CH`UIN&Rpz>uD+W?_4-IeMP}ssV6Z;}I;pegp(_ofaZWFG*
z=Y#H>rFImvvPAa+IDAR@8pfka+*daJLFBk3^C*c>Ci{zD*n8B(AozW3_M9#`6#axY
z-)`fJ2Q%bfUri72q*a%G4C|xwc$R7O#(bt+9FQWv(Xq+?{JAseV4pB7NhULpIR9np
zalBVfmkE0XW88dBRq-R*=nuIfkn7KOYK>A&iPIPjw5Fz}qG%zB0BUt<Fg*+U*6+~5
zi^s&q5iv2F4gz_l?9ufz5R2GU<jQx~n@G9t0!Df=4L1Vgi+G}`M_ePr!v`A5$~(@P
zZ_C%858RG~t8WqQuWR@-GT2+Ag~jMiOEVrT-}-FP><}#;S|JiJB*``sIkY$&dBgUr
zO9RC@?<Cz26g{^itSYDSFIM>d9eB}QDP%5IZ86_I2s$X!pS{XyTsJ{%y#I3bx%l7%
zj7p|zyaAJgLFR|#`EdK~2&c*kc%H0(jC^&ezhd;f$>8mX;HOKIU4DPU%#bMz)lFg<
zfs;1t8Hngw)-4;EH~UC<m}|8Eb9fFJzAF^^(KwTgWb@DFRbZvwfWt-GVXV-xKfx3K
zocGVr07R661*S>c57s+0xe8P14s$m3(T00R&>bRYEHnd)2u-KUEezd~SILm#!(kQa
z&!SuaFkAmYL9_`?X=+eL`+1LjY&3SXOz-ulo@qMDnVu_m#+cmg-)*LAy_Gi6Na?*F
z_o*nV9Y+a(a=T7%@8fMt46{W8(dh)9pNAbm?$i?7Mt$E0dMbCZL|paZy5v7?gsSOm
zJyl*(qra541#g2&XM?bi{sjfq*l?q_cjIrBAGaa9ahCn<NfO&A0FmIHU($J1U;?i1
z<v{hYc3sj(e`GJ&=t>JC;HOt{I`U<lS6NqhqGovE0v-R;;lrOck2^K&4dKd~f;Y9x
z%GdxY%t;ly=kyYYNYK6c6{^tejfsRng2jrKFe+z*=rx3Xm!^ajy+~H8HYLE{JH#BM
zB<l$1jJF)>4*7^P^VRa>z@5<Bwp(L_2O4HWCwhk6BGoeTtbWld?UjLXwVtA#ZXho#
z9#?4Z3dJ)|-)`}|(tdv5Yf6>_w`OnNxVDT%PjE8~Q!tH5K$!k?-zq3~TdHN3?`dew
z%8?cerZ^w&{zKYVbf4%x`8`#7(rNw;4LGs6BRx_U@i5zi0kG}7k9_5};(0!TglyQs
z;h$pR{of?msHg)rJCjYXZ;ec9Qs@f}KFvUOh;|P>69Tz&J_VwNf0;X}jFwoefpo~S
zIM!cz)b|RDk8|H`?ww-U-myMe=^iShh+31<^{R$MB{#&nHE>sU2kkW3ViQHXUd_Cl
zC>bSAdp|Yj;P_lG^6i_23%nfb<YDOADkA_ZWv3IVe-VZqc{FolL2@04Tp_5Fc_Y)|
zs5G*>f>_zCxg^qi-yOAI>+LyUmXiP*)k;i=d%T+utG6yUfB9|-dO5=lz^t5v^N3zX
zlz1Vy-Ix7<b;&kEY*_YcVy0Hba-Kr)wC*fK2%Hh`$j2(1<K&IIE~}f2D$3C3tjq3q
zmpJd4@fgdA9&ZMHe`<R$yR})f3m$}l2NgTX7{uH{NQvrHXyp$E{13A_YV6s#H^>{4
z3cZo0TUl&eHp}^Gn`$OuwmW_oG_?M9^PylU1v*wRDh6kR?3Z_=4NooUrQTozBMsK9
z^dc^8xpUqG*MU`Cus7|NQr<rfTBaezyQy!w1EU%Jvvm)zmu{$<^}t;^^-Pqdjfc2(
z=W3~@jHRcAck;~bZI9fbQVKr6YxuOYUE^DdxH(DbtGrJ0q0Se-*ymfUH!U+2Fy0%!
zz(%wJUBi2Ui&%GUX=tyQg?Z8UA2Nneq*0ow*7BuX^nc+^`_B9FdrGx;Q)l(1=oyx^
zT)yCFbL6WT36q6s#~>RQG?=n-F`0_4lKlMd*k98IMY}z70$%iK?q%GE)H;);Q-JiX
zw6KQ_gxtD%{y`9mV9`|jW|djFE*IcOn`rw>y$8d5{ngwVCxkTSM<%bng4Fuql{lB+
zY5GfK*KM6Yaz(P_D8|3ke<_wQB%4k5YycJO?1B6S^GKN)!Xu*$U6iLjUm2DuqbsLN
zffvLpd@7K75)0-B<IEyu8PlQu^D6GZCi3gRh4yn&l7F7G{tNl-pAF>+T-p#r1B1Q5
zjb=4>2GSDgZ`d;kxkl5ryTPY(FYQRbNaX&=a(l^crQ2BFYs<1*A>~a6X2p^;clXN~
zPqWtEFe0y&ADceHiSFcPug={rrInV#!8sjFHvr2lhvsQihl_dL&lv<Ach0FVS6upr
z2EImH{5GFqtdh+;b1Fy$?qDYfZ}Po-bvl$=l)nD&U0#v$ZKi@O4Kft?TW6xEXs9IQ
zs)V7#^ljOb{7kt4XIu@;rLQy=Xf&{1)PLZ8seEC&`!HP?F_SC00WN!e45w=%GN}$T
z!n9k%{z}AK`8CnhHm;PF!J%dvRs8$p@Vh}s5Fey946T>!wMt1I;K!_jr1~@23zfU*
z*DhF0BU0EO_xG*EYP9Wqni?+zn=Zc@d$+DBo$MV%C<%@b{H-#e;iR?t$?>t2z8at3
z6Fb?gJ-DSZi|{EoO#blRf71vF2@$`9e6cNf`I*^wxpK+<IxQNnV!iJZafjd5sNmtc
z|Far<Fxa!Czdxv%$BNmPxvGu?{Klzbz?o}(S^tt&A=L*$wrKPVj7*D8_u6GO4&spc
z<!3U~Oa}R~*f7dBIS<{*Ww7U`wYzPu_0-54?N=GW`3HbI@XP#J;5XAA%c3uf?#r{B
zOYQmVOR~C79^uzPp-)UbhHH7x8_&~A*G3A=t88vkcHPfIjbLD5fyw+VK1AP(v^ASQ
zb9x`6AX4AEDbgnbPM88*bTF)!9WTdL%tDlR{m(;v4R->C#05ynun+-R;~DM+8DKQB
zfH@reAmZ*UExfVtaofHZ0uvZ~aY!h-cqgz#%S-n@)EhH$GHCK;a=ieNNC>!9RCh&2
z{)$uCc`!~3hg(6&V&K`csWwVcD5Ho$RhC!pdIN4mYW_x^M=p;5B5_^3KQXwKXv@6T
zwUm}&s#Btirc*f<|1oXzOg#7gzec2>(LRx-b>bWE`Rs@&ouNjzo45iAURK}xzkMH*
zfF(cE;gHd@9JQ@_2mi(=`{K*MI?u<mK6=-`YA#xH6wRY*EW^E9(c*|nGa~IVqO(v(
zv&>}aW3mUf2B@BVXQBH)BeVZKNb%1??jO*{e_<$u)Zod9)#CJ-+bKsi(><rFj@N)+
z0xqc#Vr9e=^W1}hNNCGxyzWqu<B9LY{AL5~gk2Oz{A4-%A?uge`@<#(V(JYG+1M!`
z5}hKxTgeJ6fS7><jrraX^)aNJz(y!AfwZW`+jHLK`%4j;W9{Dvj+>K}yUwm|me+?i
zg#*=-Q3av-VOGhptmhR{8={zRY2w}|2QRYEm%qAx3;^sX%zpbqK7_!=4UDi@J97Sb
z!Al2EeBPIdTuxfmm^aBjCAKSYp7*H!+=&?}-l8u?7r(}7+L2kGQe`f1OEZmGk}4ho
zw8AE0?ETEv)yrKMdmW~whfEM7ZulpUjCao*9qW-_q>>sX<iXmA>BbOPE9rx=InAB@
zBvCJHA1Qgpuo+#y{H!ZSM^bJq%iiPb_s9!}@pWOuAvviKk8}n*mKw>ZZi7S2ykMN|
z48)ZI?IQqGn{6`>r$>TWWws{>u+c1t{<Ti{^B2YbkMFmY703I_<<{r1sZ)wuW{3m=
zd{<Q5j66$o18ERq)KnzA_lkSFDF9@8D_{UHxD|O2ah$r1HfKRBQcdW<J`x=e_Pr(M
zknj0Xd`N!AfW*U6*^|{TdDX|imMwG1cCsme|LZqC%os-8AU-nSo(?SmVGAmNjf+2Z
zAeK4Sb<0LqC&LQBw4Y;A7N-Wh_Q`{?aH6TLP*jLmGXTaO!*9xOl7ofK#A9Mx7-MUV
zQX{)$=bffJP_JX}XJ2>nWIjK|6#npb=8O<$jOt8&mT4k&V@ZyGCnIoo`>{-QJqpu<
z2ijD_D2?JXcwE2cWN^cGztKq?1?ZT_V1xOU>JOq}<r&B_>&L+Stf=Xht}L-Ls+S(0
z`gW+q*AyY#qjTN)LT`;hXTu_@+f-WbN(9!y;wZ<ds2EPRP9)-{T*@v#j>Wmyc6(qC
zF5#=i7{>~S-je0KCoPf4mHCTowtqw6|M@uRutYUb{7~#hpeZW;dikr=$w2bn%TGA2
zz_P6YkVvbtP`g8fJo<1w1&&i&-PfCj<#v*tb6v}}dT+Lzet<ou)p)GH&i|)7QBwTy
zN+8d{>0Eq=$md8Ckw5{qFTkMRQT~)%oF#k2Mgn5FAsU$_%eWK!s682#!P?q-J~zS0
z+5pQlB;jJtN<4X^;J8BSq<b8xMtPx`i3Zb~yIj&P8l&-hx~<n|@c_2@F3G(#8SPp$
z7@38aI|W%9VwI}svr;x7V_+~)!@hIyt24rOB}R3tE{#-taGy{q{M2uOJNJIOl|a(m
zsROuZpI;$7_&?#h0&I1i$&@$p=AlSwi}+y!XJ+Ua=YQA7{O6xwz~6_ea*gD|4OiwX
zj@Lu;1s{VwH7(Z%TARmAYg%A?|2mjk18<oFlCCD#Tpu1bk;Nv>cg6y(&he3WRt=+)
zYbjtV@&_;0@L4ypFxYVb8aX?bGmC4Wct~{m`vFuv^pmO{c?*{xna%eS!%RFo9&Zg)
zl|rFEUxWUZyrlp;K4)rT%fML;pYuMGeQmH6-TCaGaP@CiD2M$y_f@7Olb%5<7Ye(H
zVcyhDA;#4bN*Mz=DT0#mm@Mhg=DP}9b1p|f`Jwkqg&WVzWoijSSu7^rvc5Kc{amtm
z#)V2JJu_x_`~cUHte~x`;K+Hf_BCqU^$sraRPJQ53XygtArz`o*y8=RocJfgJ&^R<
z^>wu7t}~vdQP%m6HAYuja47o7y+<1PSI@{uJk`zfbRPtjH_jPTJTlxB4VoiEg>??U
z@`j>g&JifqZ@m+#I<HSQ8k)*}0EJp=8A(di$vjBHV`k(L=k~w+hJ1pr-N^XtHc2T?
z#5@eWW{v=Nw8YeS>I^edvam?*85};8e|K5+HvYwor$&mB9p0nhrb4-Asl_8GnSaQ%
zz~Hqvu!%<N&t0fWK+herBkVYpTpq3&&`32DK|q{@^Vq<m&*%e02;&7rc*5&Mj>~5J
zA$acXdL<{O?)L$vk(M9>A;oY(zauPs6zgw1gkpux;qcYYpGgS%SA8|w{-&j<%#1;B
zR%ZA-sr#~(5c-Morr625ev3IP+6};OZ2(F8>f;A4Ce79*kov??|2e)|ZWDOCe38Yl
zi`EQV$lhciXv0TQGuqYzSuSWiejmy8RqR5h8~Z^XtaUF#ZX6Sbx(D|McZn@Clp_W`
z2A6$#c^a{bT4KvSxQ&Wz@S^fjHBxNtMX92a=|K(azf(C#jtf(`{|Kwi0!Yp!UkB`n
zI~v{^wT`mu={$k|-}}qKlG#R$c;{wFAanVnmkA$@$-)Ku1&KO3s`{!9XH)4bF!Vm4
zv2)A*c*Ha;O+xp>QkTp9nc`@}*PkBGg!{dWV&Q(?XzDGv{!Ba^(P8=6p5zfJ(06&>
z*>3lPtus;|Ie0S#IESF708Gl)5#Ym0LS<v=+AFZF=0?}UYA8Oo5$+EyMjZ)}eh#-t
zN;r=5@Xl|0tj#qr^6-hpXTCR`D#e(p>q%ODGFpnE9MAoEPY$MR_2HWCeW||&vP`uF
zbqTbL+hpUu@&{QN+zie5(aZA0KiYh^6-+sDZ^YtQEiv-~i4i6iSq4K@uQUAE#oTrf
zr;u*$TBZ(#dVSqY(Zz1U2upTY3M1pC7X2G-Y;l~7nyER1&#XsTIq7o$X+1><r+s%R
z#;f7<xUdb(Sr2`Qix)aTb`}z|*q^yMjdIpZ)k}sg{<EKHhdyO-zl2;E*6}(NdL&+9
zImR3ohmbK%L}I!Ikcue1Pn}3t7Gj_xFcHC_4v4g4FHwJFTroxAB~_<N%gPEx1!nCA
z6=ANm5G~OH<Q|oq&c@gkw>h85-nYd1W~YnGW&^#yhUxR3W14?OX0G^D52)G)bEm~d
z`vpW2AL!T)-Go~(;%7(92(A?tf()@r{4@D(>5KhZNS6!rb^oJk8&$_(heUe@!s8@2
ziAo{>n*_bcZhK}34lgAMA14Hy{gF(D8kLx*s0P#-K?%W_=HIRzr0{oA^>2g%f!p+y
z*4R#$$e5UYW%w#|^Be(ubzDd~|CVQFI+<$NZM)Gg>yFUbcAx&9*6Qn$kB743K~%R-
zu%1V0^>YCQjD523_fc`q-O(t_fUB0RFNn9{^UJP3;<B?^T%aQz-*~YAcC&P;u&_Q1
z8ITmt1WDm;DmIHSrLuNP!qeYnjiMrd7}{)lwy)aST!;zpdFb5@CCTQefC(sz;AE;^
zH<esBmmvn%A@z^4r<a_^KT8Y5N;jl<Nz^v`NX|T2PN+AAhAfENKJBC2QNJ-8oK&Uy
zQz#0Fv6fr4&Dms1>L>4Ba>vZw8XofaHIQzRK4mNdB>*K)%gowhukG3gLI?({*U7)u
z$rJ<Rx4?Ba-MXc1`AmPAoAptiK`c24$1{s=u{1oaZ@_aMcd?Q(9PQULJt}E1iJvfT
z)R*fmPc&ddp@JJ?Be^$W2)vJ=ToZ$4;1D`0F1^hW7B-P>kg4REcQO>sLOjLV^?^nt
zR|uqslSjEng2ymmA?qp+d1S(#n@(3nW=Mf0=6vkoNcSGm8FXHijuhdslS4`ux2t2c
zli}TEwtf%F!2%M!-0BYuWK5kn6-0<ht+_ub^y8@>kdg*M$k^X=dsZnxvmePEQ^{fU
za6%7}!F@??%xmNd=Ay4Jv=l@zX7gFVfQIrKvUjV8hc%^6-{e`fL#jLtraVu%f<j$^
z5wf_~e);H`>h1FM2IyUKz%}#QV_y9iEbctKwgzG(@sAHuVXe>UKO|!P2o1PXeCF!v
znnHZLh%&1F2N4kZZV6aRE7B*CZllycQyk#<Ji0N+FY={As-Lp@y7Q%{L1q#2g9my1
z#=1C6svz3nlgV`O&5uB!q2z6Br0hL0+e#fviA1WM<<CNvl#gvUwhI5hBX|8vA2H)!
zoR2%2I>kOVCcar`_4?Dj-!-K7=V%%$s|0I4RL!ydWX*7QLoQG_jtazmObgHH6e~CX
z{?L5QeBo>+Y=q6V>CW1_*~H(z*l~RY>>mgpYWs>8P0c`73As@;CrU5Lz~b2Yu<dcH
zFDBrT<EfK8B)Aso(Zrj@@MQRk%K7-~q20AKAp;c&WpG{Uv)vxOrSYU9X`Z%QrZ=yH
zOW(PFZ~W=+HUEe7+V`490~l=<P|laHvG3gz+H>CJuPC#yG`>58yVjLq0h!u%5`X#z
zGD^bgUH-?CD4mw#k#%$54?uE*giMRzZuc=6svkNrJvrDeNcutVQ{G)LtMh!4zU!4=
z87h3!ZYRXtn-E>k`QWF`l!YePI0t$)p@7t8`46Yn4=xoZmZ&v5FV?dV?8{xZOe)5i
zV)<_4&jEB_rJHXKP0uR1%k{YK3l$S%Dij$1D&04Ev_8jJ3>;i%oVwq&w)}5VxorXa
z&HR||(Y;k=Jt!Diyobl}AOV53hAPYJbD?gxe8)LR`Chhq`)`cug?PVo>-|z`bC3Jt
zvkhhTI|V{WViHQvfyv&uFSkSz5KkPyj%Z5Spf?kd9DiwsK{T}#+Y->eX!Pd)43*pL
z_UQ(zgt(l8vUu)hjVrc7k1H;s+gG`w4H_Bsl(Sg7sI%Jcsb1u&St9^swXdW|+OgN{
zA?s&+&`{H_0WW4C{GCpKcDHXDl)})=0<n;vh|HqFY<N%V`|=$^LLIw!`Eb$x+$fHB
z_RJwTl=cnCrA+;*oE*2GhuEA@`z|*U8ae6$E2iVi8b$1n@Rr)+KKM{1LJQlLhar?j
z7~i+0f-?P_YkW$y@d5&mr1&56X3{JF)@M_fc2Z?iEzcHn<)A4^bL}~F3H1vYz>y!K
zcPbDv>bzy*;u|q2za35_-1kDZUn#Ul8nT@TTxC6p&3bmsjg5=l!PD6C=HiMCi1INh
z+}%EjicCr7r2&ka-h~8ydB^A32i5<s9QrLiw6aH|#%FvC!7E}103>IBya2<X5b&V+
zEAg!_O4z4GtVW_+|HoK^GET<WOE1LnIfb}-G9Ao#4--{PgwjlEQu%BzJwk1d-FAq^
zB2;amvv$Q*X&&d~lfN<jQc`p`+Z=KW4US7^>bAWaE961SnMbZiJj=Zr6Z?p$qg~@V
zQ{no{mJGFOr42*+b1}?F!Mg&V=>F>0?7vXIy71dyClcYvJE>BGiomglPe#(e^tB6Z
zw@#n5J$qr(ZO06T{#q5LFS3l5n9l!!$;C$N57qR`*8TXFj`k80WZnY7Y{O0g(%CtG
zV^dcNTav^6r@GVMo3Q^-qWTYqzNI;NvP`paccD-+kol-%_($yB$w$J#c9m`Q{Dec<
z?17X^Geq0TU9<lmHK(hr3naqQCFQFX1^LS7tpGpi3+BriBi-strId%BfS>&BC<W^f
zq<yp!OWaVZpvdqv#3K(0bipTKt=wfMD@5ZCUdpE%dekF=tx`Amm^)%`T@WBS5Wr$N
z16c~;bfwUWDURrmui%DA{o#ENO?c?Vn~A=R#h4E6w4{)=jup6Io3z<BFZKL{NOc4S
z%ko)&V}r|UcY~B%jSuZ)J<*yhi+<_*CfRkYx7o4-tR#Be^a#ca0&v^ZO7s{XbRJkP
z|2elSDEO`?=l*BBE3+v3Pfy%#zug|F>t_{h$Xt24Ixb>iVtb#@uRmuH`$zg&W^pv}
ztyMj5P^flWLDgr#Pydh1<w0b^yoLgFzI_f`q&?46G#3;<{NXZ_aKYlvI1`Yi(i(om
zyppfl0xi{VjKaYSm5JA`0)@RdT9LB3xLU*;kf1kIM4_{$&RbqA!(Km@<cVKyJ|Db2
zv!}-Q^{A42b91x4i?|3y4~B|Yp*}Yf#svDl4Rkc^KY$7dw@QUbiJ_eC)nW0eRe0R^
zFU=&>(ISvYu@Fh5Q4mHb%cCYz@N0u`@Qi}BDl&Z{9r87hPY_L&VMw)9>J1L13wxY~
z+Py&5m*;N66Onkw+vx<SgX#G6!Wlv5hK7D05svLIe!Zp_t%m44;z0pkaU<|p-Zn=X
zy}1j^k(~zsH(P<Oy}*|hucwIszgo<}9*OES)8)}t0C=`t-IX%y6Bq9@S%AO;#aV3e
zg&eX6h<L;-T&-BQ)+|`I_tkInANyqC9_P6jGnePD(ghiNSH`d7eYsktB(JWxqBc$$
zh3=O=`Poi~tl-RbLU>2j={>91-*^td#^0W^_-aGU&5hV|_ftxL-KQeBcT<Coo3l7R
z^RDS?@MX$X_l#-hO#?WaLESS1_0<G|Ar<la@vp<~xmb|(4cCr_bVg0zh7J*(aJ;_j
z{PMoSZGX6qXU{}@G7l0EC__w1?=au8e((w3g~!=Q-&Wt{*KNw>cXaQ12cfSnl_Q0(
z<&`0~6b<4Y+qV~H%a{vP=e!vX^N@Dwb~cFfXQ_9DyT&O+L7cA9)Ilg9X}{<$#eScO
zUgWbMG*{LI3nQU(nU(bLJRDv;Ux8X}w%?P#^!{)hG7z!Ysvb-o^>$B!UNkYPS^gH@
zEJizLKg_=_EWlInSuSwu;<&Ah8v+3p4y+i~pKXWW6%M&<dZ&6f)>&72OS;eHUCp(k
zc22noKRxfs=oC|{4e>#wJlr9wb_xc0{<)LDY~6Tg=VANvkI3D5>PfHc#fZB6gAoP%
zeGx{N7O(S~bz9v=kshM-K(WFF3%W`U+)|4#R1NlW3aV@X6Ic@T1by+p$-glfjpZ-D
z9ua~EX|2Be(WHABhkfH|T&dJ6RE#8wf?V+JMX@hHw9U;IH;Cl)i0P>@|L~MOveBZ(
zcNGQ~cBlCF7?(nD*FH0$U(4cwAz1teEU>)-i(_tQFaC!)G?$+`f5N|S@LTyjB_nNk
zc%W4Kh_#BCYbjVF4}MKqTntC@gM2D}hwNu3kzc64OVZ8fSr30eJZ>wPJ!+6l-q+if
zGcF!jPtG%f<|emT#Lj7lXjFdG69&HidBe=w;=)1Ti;0N3oWAzB8{h*AGbmPz`d)Ij
zuO077fzC0<6C`m#@^cpGL)_$2T0X}$^LfcejoY^4*yaGkSi+9SbX2DM@i({m6!V#?
zh$hf!;3uo{TS8ih&i0K2Y$qdoZUG=BBio)i4O5>gJT#m6x_*|d7oj0A@sZ%TL#97C
z%YA1N6v74_PTdSZAs-bPXx!w?2&hWlqvul-bXwh6j#GbKa66XpSD`sdx^<drD?PMQ
zU;m^q+!TbjxqfgSE-_O+ehQ}99DVA&LTw0`GgoYWucg)Kut9=hcg}TjzJzQZ+N#y2
zZuBB)sB#qz60KkA=OII59Q$=LIv<KmVq`c^K^8nnnwmHNWs{N#;a_eA$(o|BT{%eC
z^jCf-F0WQ47qv~C1ERJVv{n!mx*d!|jDBs*lE<b$7JEE?#+~<5zh1jas<h!$=AkF%
z|0sp5@v<UQKJjA2)@*<_2g#71!Ncha1|Yp_<=bJ7bp|#1G3Yh;^zMS2>ObSY_zz3l
z-;EmoWGGQMH_O|qJ=^Psw~2bhq{2Qc!T?MW161goHpD@I8-qpXR%gB7ai4-kYHQck
z08~4kB=*^WiT(X}@4NMxQ~5PLz>lB%1PkbrlER4IssaE|>xFI}5I%gtkM}}^rdC1-
zDuBzdkDvuXmoeS;yr*zdX&PGO<j%x7eCQW$GycYC1J6$z!4P6UVwfu&Kbxg!#-Vr8
zCd8rSc5S2{+{{r_52`xx$mZJr+=k>%G<fL3K8TX}N?Ag)NPj%n>>IzsRxB=GK0S@g
zXDJ)eCCK!%ODH3cvQ_A4<!$gnlN~6g#L4!`1<CypKpQJS*GI54ugydo#Xm|h$B_JG
z`zv~2<kFvBw}i5Gz5cwE5)2_2TSP!+oAJYWUPw4rt;wp({t8$qz3bhDpaVKxLDDW@
z9k#mRFD1|u^u$N;_0MOR2YQEcjW-)&7fS=ve<>hzAC{KH{6A<&;t`z9p!kMjTZ`}-
z*p)(7EbNNN1a|V}Z&Np&ZgMKLx|0YNPRMxgpI7WFI1VBmpbwgl*xwP_cfPkb?0S<X
z*?SrJC9d2P2egfZMTGT?xw$Nq`s-`ZB1a3K$_wPrqJt1UA0f~3&;W4_nfPBapIl_|
z{kuKO_;P63$}tlvFcDJ{D(=EPSGy5nIY$5+@S2mx&U}(M_Xh;@f-3C{Ro+j<-*R?y
z$j?)2?-W6w&DY~nW^sWrv-M(7Miyc%sa{-4ucAENv$AUZ=zjT7{rMgWu$uZc{(V|-
zSUFql_cBZUEHc#t0ST7vh+ThlfSvW6>2%B*fL+Gn!ayJ|gRQ_WSd^%^oRm|oAX$UQ
z=5Z$EGox;|c<oYgjfsvf>gK=<;N*7g{!3pH_=fl{5gTy2xnb6fi30Hh`;OQZ6=B9g
zXr117(1Iive5AH9ZcW|uoyM=tkIB_DGkI57PEU=S7abrbr!HQ31It~@(0dmD;(#!D
zaHlArTn*#a_tLig_bEh16(%y@qFsd1E`8}ktjk-f0KUt@J|PP5Ys=F3X0@18xtlWe
zOl+m^0~!ZH=c<cB6b1O|{HWY`l00ggpMvHEO&D$&=xMp+ffMXs5+>b!CAN&}Jsh3>
zb$F)a67OL}H$<xfRwuYC;sRr$U<qK=ATnF(|E7oFTtzW6O0l^XmG}kyeSdYitcTND
z*n@-SedxoE$wAkYK~G^@af|uKTu6NK0^>1Gyp??_zl&L)@@udfxwJh*#|ruJvAeU}
zblenwO9+$9=#u<ZCC#fMn#!cu>DB8Ax~wVq*IC`h^$pX1YgP>OSvHQ0d8(pp@!0Rx
zusWXf;bjNoFgsZ)8{`;BMy5AC42@x@qK@KFn|%G~v|Qfy^%I*dk=m=LJjl^Yf5W=F
zjG8#0X8*4H7xJ~it_=b4DkLcI%b9e%cBB2@TO6hK#xfht(r6_bDv-*so-gxO5Dp0J
z02NpLf(hM}M&!yv(4@k7@~FqOf{6=B&$JR>%RzZRw=4WOG+p$;bi!xrlyL&>A{x+n
z!+c-gw<wz><|DGP%U+#B*mtNU6a=mA<Gz1Yk?XV8Vt5P~lziLn-jQx%4oD%vBZF=C
z;<g3`PSDCC&_N~l$6)tQ^7cP^@%|bLYH;fP<|Ve7V=Lj;Nysdt7T4t~<xI2-!)?_3
z36GyG7Kn}H;e}doTm%#`{l_hsQRg@dxmr^?FBwK}7)@!AR{XHpR;n4Iz&;+;GeNMI
z5sJ)G$=Hhh3W|peel)6#lMUEM59LTc9__!Zt&no<3q-0txKPhz;o`DyOgQ2!*=8D!
zBQ>InUMH1slROJ;@o13hNBxBB3MeRvEzjF%iK6jZ8{pLsqO%!{jSZbT8ykHomvYUT
zxayq0TxF%Ci7v1Ot(u&;E6W7L=Xm~vGMS}QZff8D)vB3Wb&oo_N4;_B`z@Q-#14_;
z@Av+M0LGh(v4Fd<opP!Che!2F+;I5Y?tk|Q{pXC0e?81CjD`eH_s40mL~8b+{WY=g
z$!FO}d;=|82SJ^U0{7a%4_cb(X<-TsD9|2XSYA?9(U$_M4Vf8)#w{i&E^fwlt4{9K
z1QDVke>-kL3co*t=TJ)J%EiZ%**q)xeLs0u&Oxf+=K>tgK_ao^2z^@eVG_@^NFRrN
zEgEH1TZn<;%iIm<>Qxqk=s<`|9Pkyw_3M>OF17GnE6$OD#6MN8rCa|d<!$9W8r`cQ
zMns@#xOosT0OWkbzA*7lE$}A%?L=$%fa?J+Qb^&8zy|*e*AqP8dIt-c)W5|Npj8qW
z))$ETXa^zp<h|Ta@=5Mm*e;Cfq6b&5#afCjl}Qvf>6jYU_c<FaNjkG{5|gIPoknIC
z2L&d?aEuc~Z6y_^#fyGU+1O)gs|FgOE6q<y+Vknl>4{_K9oxL)g)PeGPOXk>_3?E=
zVErZTW~hryE;R!W4&4L`KsFoa>tWs7Fv0~-my`i}-kjEd(d@vBQxUMW%4Qn!y`+L&
z#8Ndr$e7L+f@Z(#12q8@<+@D{G(f?V8gm=%4`r=40UDFh{EDSYp#g~&#8yTf+;myS
z1b$LKzT|`(Xv7xkLrE@qX&y`Bx4+Ob7S!~Ymc-5^W134UzkXs)_ckKoX|g8w_>*xM
z77%WEGg38Whn;nG3JQ_2aYq{W7$FZ2qO}Gd2@suZn^#`M_?ck(UFl8Bz*nh1;9FBO
zld?LFG?02|WE!!iMKPcU(&L3SR+R>a<$D~lF)dRye&HTzc-PUyJyQ1md+%hZmM1;t
zEF*D6Tv$Myn%@r|W|DYCbHbcDeE$JIaV$AIzfUIBGlJ}L+x-#8cY9o~ZDui2&%vLD
O08izf!%Jn11O6MH=|7eL

literal 0
HcmV?d00001

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
index e6e3adadc4..d0a3aaf751 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
@@ -37,6 +37,7 @@
    [app.main.ui.hooks :as h]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.assets.common :as cmm]
+   [app.main.ui.workspace.sidebar.options.menus.variants-help-modal]
    [app.util.debug :as dbg]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -963,6 +964,12 @@
          (mf/deps menu-open*)
          #(reset! menu-open* false))
 
+        on-click-variant-title-help
+        (mf/use-fn
+         (fn []
+           (modal/show! {:type :variants-help-modal})
+           (modal/allow-click-outside!)))
+
         update-property-name
         (mf/use-fn
          (mf/deps variant-id)
@@ -1001,8 +1008,15 @@
         [:& title-bar {:collapsable  false
                        :title        (tr "workspace.options.component")
                        :class        (stl/css :title-spacing-component)}
+
          [:span {:class (stl/css :copy-text)}
-          (tr "workspace.options.component.main")]]]
+          (tr "workspace.options.component.main")]
+
+         [:div {:class (stl/css :variants-help-modal-button)}
+          [:> icon-button* {:variant "ghost"
+                            :aria-label (tr "workspace.options.component.variants-help-modal.title")
+                            :on-click on-click-variant-title-help
+                            :icon "help"}]]]]
 
        [:div {:class (stl/css :element-content)}
         [:div {:class (stl/css-case :component-wrapper true
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
index fcf5ea7ed9..e352a32377 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
@@ -32,6 +32,15 @@
   cursor: pointer;
 }
 
+.title-spacing-component {
+  justify-content: flex-start;
+  gap: $s-4;
+}
+
+.variants-help-modal-button {
+  margin-inline-start: auto;
+}
+
 .icon-back {
   @include flexCenter;
   width: $s-12;
@@ -163,7 +172,6 @@
   display: flex;
   align-items: center;
   color: var(--title-foreground-color);
-  margin-right: $s-8;
 }
 
 .swappeable {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/variants_help_modal.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/variants_help_modal.cljs
new file mode 100644
index 0000000000..adf33484b8
--- /dev/null
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/variants_help_modal.cljs
@@ -0,0 +1,101 @@
+
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.workspace.sidebar.options.menus.variants-help-modal
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.main.data.modal :as modal]
+   [app.main.ui.ds.buttons.button :refer [button*]]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
+   [app.main.ui.ds.foundations.typography :as t]
+   [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
+   [app.main.ui.ds.foundations.typography.text :refer [text*]]
+   [app.util.dom :as dom]
+   [app.util.i18n :as i18n :refer [tr]]
+   [rumext.v2 :as mf]))
+
+(mf/defc variants-help-modal
+  {::mf/register modal/components
+   ::mf/register-as :variants-help-modal}
+  []
+  (let [on-close
+        (mf/use-fn
+         (fn [] (modal/hide!)))
+
+        close-dialog-outside
+        (mf/use-fn
+         (fn [event]
+           (when (= (dom/get-target event) (dom/get-current-target event))
+             (modal/hide!))))]
+
+    [:div {:class (stl/css :modal-overlay)
+           :on-click close-dialog-outside}
+     [:div {:class (stl/css :modal-dialog)}
+      [:> icon-button* {:on-click on-close
+                        :class (stl/css :modal-close-btn)
+                        :icon i/close
+                        :variant "action"
+                        :aria-label (tr "labels.close")}]
+      [:> heading* {:level 2
+                    :typography "headline-medium"
+                    :class (stl/css :modal-title)}
+       (tr "workspace.options.component.variants-help-modal.title")]
+
+      [:div {:class (stl/css :modal-content)}
+
+       [:div {:class (stl/css :help-text)}
+
+        [:> text* {:typography t/body-large}
+         (tr "workspace.options.component.variants-help-modal.intro")]
+
+        [:ul {:class (stl/css :rule-list)}
+         [:li {:class (stl/css :rule-item)}
+          [:div {:class (stl/css :rule-item-icon)}
+           [:> icon* {:icon-id i/text-mixed
+                      :size "s"
+                      :aria-hidden true}]]
+
+          [:div {:class (stl/css :rule-item-text)}
+           [:> text* {:as "span"
+                      :typography t/body-large
+                      :class (stl/css :rule-item-highlight)}
+            (tr "workspace.options.component.variants-help-modal.rule1")]]]
+         [:li {:class (stl/css :rule-item)}
+          [:div {:class (stl/css :rule-item-icon)}
+           [:> icon* {:icon-id i/img
+                      :size "s"
+                      :aria-hidden true}]]
+
+          [:> text* {:typography t/body-large
+                     :class (stl/css :rule-item-text)}
+           [:span {:class (stl/css :rule-item-highlight)} (tr "workspace.options.component.variants-help-modal.rule2")]
+           (tr "workspace.options.component.variants-help-modal.rule2.detail")]]
+
+         [:li {:class (stl/css :rule-item)}
+          [:div {:class (stl/css :rule-item-icon)}
+           [:> icon* {:icon-id i/folder
+                      :size "s"
+                      :aria-hidden true}]]
+
+          [:> text* {:class (stl/css :rule-item-text)
+                     :typography t/body-large}
+           [:span {:class (stl/css :rule-item-highlight)} (tr "workspace.options.component.variants-help-modal.rule3")]
+           (tr "workspace.options.component.variants-help-modal.rule3.detail")]]]
+
+        [:> text* {:typography t/body-large}
+         (tr "workspace.options.component.variants-help-modal.outro")]]
+
+       [:div {:class (stl/css :help-image)}
+        [:img {:src "images/help-variant-connection.png"
+               :alt ""}]]]
+
+      [:div {:class (stl/css :button-row)}
+       [:> button* {:variant "primary"
+                    :class (stl/css :modal-accept-btn)
+                    :on-click on-close}
+        (tr "ds.confirm-ok")]]]]))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/variants_help_modal.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/variants_help_modal.scss
new file mode 100644
index 0000000000..542860e8ff
--- /dev/null
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/variants_help_modal.scss
@@ -0,0 +1,84 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@import "refactor/common-refactor.scss";
+
+.modal-overlay {
+  @extend .modal-overlay-base;
+}
+
+.modal-dialog {
+  @extend .modal-container-base;
+
+  max-width: $s-800;
+  width: 100%;
+  max-height: unset;
+}
+
+.modal-title {
+  color: var(--modal-title-foreground-color);
+  margin-bottom: $s-32;
+}
+
+.modal-content {
+  display: flex;
+  color: var(--color-foreground-secondary);
+  padding-block-end: $s-32;
+}
+
+.modal-close-btn {
+  @extend .modal-close-btn-base;
+}
+
+.rule-list {
+  margin: $s-32 0;
+}
+
+.rule-item {
+  display: flex;
+  gap: $s-16;
+  align-items: center;
+  margin-bottom: $s-16;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.rule-item-highlight {
+  color: var(--color-foreground-primary);
+  margin-inline-end: $s-4;
+}
+
+.rule-item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: $s-32;
+  height: $s-32;
+  background: var(--color-background-quaternary);
+  color: var(--color-foreground-secondary);
+  border-radius: 90px;
+}
+
+.rule-item-text {
+  margin: 0;
+}
+
+.button-row {
+  display: flex;
+  justify-content: end;
+  padding-block-start: $s-8;
+}
+
+.help-text {
+  inline-size: 100%;
+}
+
+.help-image img {
+  inline-size: 374px;
+}
diff --git a/frontend/translations/en.po b/frontend/translations/en.po
index 38168aeb8a..fde713a795 100644
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@@ -5530,6 +5530,30 @@ msgstr "[property]=[value], [property]=[value]"
 msgid "workspace.options.component.variant.malformed.structure.title"
 msgstr "Try using the following structure:"
 
+msgid "workspace.options.component.variants-help-modal.title"
+msgstr "How variants stay connected"
+
+msgid "workspace.options.component.variants-help-modal.intro"
+msgstr "To keep changes when switching between variants, Penpot connects layers using these rules:"
+
+msgid "workspace.options.component.variants-help-modal.rule1"
+msgstr "Same name"
+
+msgid "workspace.options.component.variants-help-modal.rule2"
+msgstr "Same type"
+
+msgid "workspace.options.component.variants-help-modal.rule2.detail"
+msgstr "Rectangle, ellipsis, paths and boolean operations count as same type"
+
+msgid "workspace.options.component.variants-help-modal.rule3"
+msgstr "Same hierachy level"
+
+msgid "workspace.options.component.variants-help-modal.rule3.detail"
+msgstr "Goups, boards and layouts are considered equivalent"
+
+msgid "workspace.options.component.variants-help-modal.outro"
+msgstr "Changing any of these (e.g., renaming or moving a layer) breaks the connection, but reverting the change will restore it."
+
 #: src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs:163
 msgid "workspace.options.constraints"
 msgstr "Constraints"