From 43fa8efda76599abeabe318cd1609a3faeb99d15 Mon Sep 17 00:00:00 2001
From: DiTus <ditus@o2.pl>
Date: Sat, 21 Mar 2026 23:28:23 +0100
Subject: [PATCH] feat: Implement draggable Trendline Settings Panel with
 Shift+Click and TF layout fixes

---
 css/refined.css          |  48 ++++++
 ignore/line_settings.PNG | Bin 0 -> 15668 bytes
 ignore/text.PNG          | Bin 0 -> 5876 bytes
 index.html               | 152 ++++++++++++++++---
 js/ui/chart.js           |   5 +-
 js/ui/drawing-tools.js   | 312 ++++++++++++++++++++++++++++++++++++++-
 6 files changed, 485 insertions(+), 32 deletions(-)
 create mode 100644 ignore/line_settings.PNG
 create mode 100644 ignore/text.PNG

diff --git a/css/refined.css b/css/refined.css
index 2af2825..c3b5073 100644
--- a/css/refined.css
+++ b/css/refined.css
@@ -217,3 +217,51 @@ body {
     }
 }
 
+/* Trendline Settings Panel */
+#trendlineSettingsPanel input[type=range] {
+    -webkit-appearance: none; 
+    background: transparent; 
+}
+
+#trendlineSettingsPanel input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    background: #ffffff;
+    cursor: pointer;
+    border: 2px solid #1a2333; 
+    margin-top: -4px; 
+}
+
+#trendlineSettingsPanel input[type=range]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 4px;
+    cursor: pointer;
+    background: #2d3a4f;
+    border-radius: 2px;
+}
+
+.color-swatch {
+    width: 20px;
+    height: 20px;
+    border-radius: 3px;
+    cursor: pointer;
+    border: 1px solid transparent;
+    transition: transform 0.1s, border-color 0.1s;
+}
+
+.color-swatch:hover {
+    transform: scale(1.1);
+    border-color: #ffffff;
+}
+
+.color-swatch.active {
+    border-color: #ffffff;
+    box-shadow: 0 0 0 1px #ffffff;
+}
+
+.tl-thickness-btn[data-active="true"], 
+.tl-style-btn[data-active="true"] {
+    background-color: #2d3a4f;
+}
diff --git a/ignore/line_settings.PNG b/ignore/line_settings.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..1f7dabe4fe150f38d3e9e7a53088bc70fb19696d
GIT binary patch
literal 15668
zcmeHucU)6h*RGC^=%_>xu>c3f0*YlEl$Kyr(AWSwDq;pvK<OeR0g~85lb|R#QX-<F
zB1Bq{mW;H3NE4+)BndSMApsH~?Vb>(y|44T-!0!Qzi<A?$|?Ko?7g#}{XA=}v%?PC
zAr}6y;)fYCW-Q#l&*tci88ac^r+e-k@QSZ9^dtB+)Bh-9_l%5M-2w1qw%ab-T{C86
z66Z^uzX#9f`R+UIKVyb^sq!<E?(_1(j2W=1{WiOfqtEd==RHUa_@z&9wXreX2<m!!
zXN%^_H9P0dUBjKduSApb)^Odm@Xn_ucSC=ko$|(6W7pi-Gnbsc_|W#G#)BCfHm9fi
zmJJP13JE(*8b4mG8~vCt@=<{?wtp8evQSK|b3FZeFwTF6;j13m^TGR)9=y-X^Of3;
zp3VjaiIIR+n<*n?WY7(NTCnI|h8LyPwR+Z5bm+e3y?0kU2fwl5gwSV^x)xbM{mRRm
zl&403!F^4^aG#YHL}TDFbCtpR->xc)9B39iGV@82$;Gt1b#Q4ABN=NJEb<H<`{Ka6
zYu2@Igo7oBN<aQ$!s`m==NcxV4a&)53)|Gy^sYub`PXcxT&TLQMQbv1haURnr}A1W
z@!7)RlKID^XBba-KVJH@20Hfnn3r5Su^yN1Qy;htjw`Z_H?4VLPfB7oPtNfofPJV4
zY`bI_|D*Hna3n`3M^9Rt(|t#$ZH|s-bZ@gnomZG_O=z>^ym7I<vta*Jb2$B$fNiM;
zJcJ-hWC-w*cE)+Ff*xgA!n*Fc)Lre#`^|5FzviwP^%bn}@vYV4;4l64){3aF&>a5b
zJFCaldCd(0ut}jB4;sEpo2M4OYmV37n;*a;P^D>3MsM5MetmcJu5TNI=sl7sr3o+s
z7S;zoS#;rV%-jnN)D+O*^uiIda`cR5FaI0!-RT^@5onMEX2T3GwI7u2{FVvd2{ut_
z{%PVjhVnmg6tC(*u={a7llP@V0|$ki<-W-KWS=>sn`tK*3tmET>D1+i#Zw4t-a=a*
z9lFoB+}h?Sh|2v(U^Z*^fQZ)m?ZSX1km{9pQ-;fv@e(^Bc2m>7vuGBft=%ERC6E=p
zjn;*7hkt}#d{Zoox2oytf~sK2O0|D$P2Jk)y2JOl3Ql+Q&C8pL2eU=g@}<wmb3t@C
z_iNBwEyXl<>m>O_RUyjbZFLoiLW&o>?x+g7815lSC4rww92!Hb%BZ(pE^smtIZ`fg
zZ(hO`^XsWlOvHW>ry;csem99Ug;gbzRG2D!0V2^_@=YXe(6yI+S6ct@igHQ#D@avO
z)$+#`b9cQgC5!di$SEB3;kjAvj3c0dA71d2JM<6p^CHbZpQ_3&$a1Htm#55ZQ`fq&
z;BU<Jjcq6`(2%VK?$;=@Zm+!gZL?=(gh)?mIEP^?p73_As{9+HQTY^$0FBI2i#P{t
z(_Cdczh!1Cy8@bjn)r>O{7)Q3a2oX=6b3iOu~GYx_mS<_B=<wGCQnckxs$FtI|UwN
zHP;IInj!Ce=BzRJbl}fm{5N!d^TKluI)vTt!qq3?n&gZ$_-~k9?Ap=}FD~VZA*mB%
zAR?T*I#ReiIP9{BzvYDrk4^g#?J+cIQn8fqT*Z^-+-I$UoGs_FC31O<ie5jO_iQU<
znbGnH44k0~>;!#yGc|iupZkg-WvEK&27j&+$q;xic(8z^g0e4D!?2YDkw28xWGkjA
z)q<e!fmbB<@$m4mpvOo)GzW=j7PzZOF{ngP|HH1AeaV*zBI_96*&vf2zRluWEO1&s
zMcFDMeb1Ldb}4CB$>P6XBGbl+%kFqj^(*<3`3-QD@R+JqSwF~u4OG@Lc0KONGLQ{_
zUAYFNMCH+wl}hu+k+NJ0X#SzZZ>WoZgvGaI&y*DUL;HYCG%AAyHHt_2qo^bVcGi#t
z(+>?Rt|os$X>y{FY5X-!Ry5qNSi`Lv_fGy<5{Lg;BYz5j_1Zzp<ioi-JVl2*eTsM)
zHPE2&V%f)hSF+QiDdHnw{M9LW3elNteDT_8bn2o)H{k|c3t0}RX`mBRh;NBjBiFEl
zxo*=u+jA?1*P*Y-bs8^J+*e6r88N|QDST9|us0uXFYv(Lq?AV9bZgHeW4{3TJ$I*p
z?*FSm)Nv7>MG6@sH%_SvR2#05=R*x4$m-Jc5B#o_@kS^qo+gW5cH4Vu0m_(yC9Z!S
z{eI8Zmp=P*f7i>yP(|w^u#{3H{FS(0`)-`rbSK%kM=9&U#h?x8qE&D*1EgmZD8xY>
zu9W0jH<hG%V`Cdc_txZZw7lrw`TFMt_f>5E4+Z|8rNI9Wv<}G9(p|{=jNKqb6R2xw
zcdn1God5}%FPtK1R`X!|%z!$wzAt0JKAUF`|BO_nH~Twuuj&ykg6%VDl4^e*-pSW_
zisSgbH62x5)V?3H=@5IBV_S4goRi0}Z090(#Hi4>KKn(R8wtkPJlPPZ!sy#l4MH0g
zvN3a3QogYY+fcpWr+OkOCvcpDpMK6s{jm$(X@taMuT{jVs+uK&RcuzUvjb%oa61){
zyJOs1u_H-2d@Q#|wUi`UUcyT{*T=QtNhq)1sdyMFr|nuaIIQ%(of<(7PL|cL(R~lP
z+1utJhC%<^wnQW3CS{tQ|K-*cB0<ksp))&KUFj&$qB2;!wkj3sDo~;B+^U>*e`~-Z
zSOi%3A0_(@r{KS~KLAdn<SkWvTM(dDpr>m!Yv`a5)XiNzQ?R6yznIM$OhUrHQvbW&
zt^YdiWjv}ZOhk)Hicy7mFoej=JfE&wZY}IL=hiJ)QseSb&Y7oD#Vx$yDpN6Zg!eJE
z_J9gcu>`%JU8uNxuK<3)bco5sgW@GFGp2Mx@bSkol(DMzq3!f_xJe(cxDokw6@Y{J
zA<wYA{Rq$Z+@;epxg`qG(hMnL3|X-UrlFZ7J12^NrD%|2Xm!u0$TI-+@o6kYdqb-8
zbjay9N7qm{+aYwf*wtYwgoU4Dlk7MZ@_Jd~2O&%|XT6bbvghwEue4Ty3EiDH<!^sQ
zNrPWl-9FMEs}$q>*S_59BmHOc{|&pp?s`e2%=&&6=&sILb)7P+VkKzGl@oR9TDj6)
ztymfMkGuLU&;P%+(_av!B-DrCM;pX$^Bi^@n-f1%sfR(-9?e(AsDg2_YZBL;1_tTh
zj7ll}UeL|`*mBvi(1p8MH2iMADi9Q(Ej}!1r=6wC$8M~ex`cZa%x)4vAb0Z=5~<xZ
zG7A~z@zUqT+)@YI{VMpr?OfMJs!6=4=>Eu>jv0^sYVDc0$E-bCXXucsP%jklTCE;b
zaYujhj4Bkh&J+7mZwD@{rfncYC5O4W<=Z6ojvYVu`3UZ+(5sg}u~}3Z%HrPcHdMLZ
zD)7Q*Pe+!frK|Ols6O+*`nJhG(3k7p$#|gD-hZXo@kE8uZ<wv$ru!b{&e*;XF+3fn
z0wYhVFx4M%sXvZXQL8CE{98Ed9|8Q209M5)e_xtZVJb&3ROQhS$8I+HN?n6wEa-Qd
ziXNk+XTXrv(8SoRq4=3$p*ctYHE#S{Wa>c%YwN|4O}vhKF5D6gM-_JsJ)39EizAR-
z@Q=2ysZqvOA^tBsz44M?x<zE<vT4!UQ0VQPV%PF%Z({86DfYC^>-^BvdNEk%r%MDC
z*cNmKm^t>b8$ByK8mCcvrG1uHaUwYjGE`u$V%YYmF2=g3g3p1=1H4qIt?;3cZ6)=)
z<EaBrRS@NwTrqTf`+h;;RoUt(A68~r5QUhMyVyRIlm-t^soyju2BuZ--4cxtzlWQq
zUDTH)ne%@qSd~T|y~PS&a^rB_k}qKTNEK36Vt*=k^GA*+a@Ti%PV_9;{o85OF7<zM
zJpZJj{*>GMBj)xmIi6+LzLn#doGGrkW@B?^J(zm^i(9J9#r_Xo06p1(#?*+)88%|E
zcR%}I(zm}my#Et5D<AokDnPUDnhlQ`{51T{D(;695C%6XHqY>%s{SrpHKhyeS*r|g
z68_d9|7PX?v7tCX3#GTZk(`qA!YUshfdVFOwK;ntv^V8h4t-7+EQ1EVNknyFzR(-w
zID@Ro&*21y^Ok(JX1f~+8%wL@f5y3qpaC37#)fc0Wm_@_{f27?^<&yNzVme+n?#eE
zV!~)O3_1f<n_yAg)w?CnJC|ye5z$;;Rf>-i`yuoKj*kUXye9(YYj5mdVxckM=tM8&
zhvEn?pwB?JyjDlxUc6dDmId$(V?@UyX~@|IT|lz1nci-6Ue0M^q{uF63<Rga0OP`p
zv8(k#L6@+k`t<<M@a{O8$usyQK8b;y;kO7xO$0sQx*f#CvV3(H9nY|HH27q88Q#|*
z_Ze+EHmlg)rtjBT5N<%KxLHyf8;XdDA&kVy#?<sf-X{9jT6~e@Qk`rjPc{pDacW-J
zB!i*KTD+}b7%9=CSuJu)3^+-SbDY&J9UG;LTb*H;o#Qw7@~$twM|Cg;YWel)5a=0x
znIGL78+_}ztS!`<(~dRn8gdqVE#o-iN#?oZVEtVw4RVJngRIM+qv*k5=r^zMBYE_F
zHYXEjE`h*r_pgem9NfB+sR41(Qor{l^_w$dP2_Tu3Q;Et8Nb~lwkFA{5Gf$G!UGk$
z{r;R-=BlGHi~%Way^z+!Au4R|;XleVC4Kd4R)!Py*~)!**N2f?C4FB>^NZ7Ul$UT^
z{ke)I*?4t%etmmEGCK4#yH2N`BS~3DicnU@Y_JwAdbMBBue|jPJ$e|{v|Ii?j%X!%
zBpZP%vL_&lR%FvsdAgn!5y)j`cD7^&HZ0we>6Rq9C*#KX9MBJvE%j-!$BA?#bo}7F
ziVwK)c9~2nyM!3Th$fy>h7ZP_z*7e5U;`X<2TsBhRp|JP3YigGn8=h#2ckrhN8Ox(
zmyI>^9=SxFmQRBJR{ajyfW0_~5tz0Xz_Gf-zq(MqK0WA}8WzK|wnns0>UdtjPp0Bs
z`N0ecSH{QF(hG;wJU_d-cxKn+QECuAE{>l0cNgmI_+;AV?$VBC*?Pv<n&#S?$)dfo
zJEJJP7J+GChn=anWS*&OnwQt-mo*;(QmO+STkIAGrs0TTP<u)us<kt)#qWk!c1<9K
z7wA$=-&$L7xBb0ne0Ybb`+S|1IM+(tRkzMo{?_)<yMy_z4(%7?_ER_+g{?R>-SZNC
zbf}*1SLeX5yBfVnSjbxlKR=I`D?Z*H{9%Xb#X)LdOJs`Y<j2#dtYH`Ka49kO5&<~Z
zg?g-ab$C_aa89Xb+p0!hzl(jAOBA#<Djxe<4`1@il=G-Ha9kss8@ifESxvO8u(J%H
zCWf>P1P&&caC7qA+V&gP<+9vJ7qabP<#y(R&qCp)z{y|m-fp<jn803oErp1a9y3)$
zW_u15nQ&K+)a6X1;y?D*C|(v1mqb)+I*VHCaFl{h!h+>TW!x=vVjONfD>1n1cA)(G
z`PFsvxe0X%J|qkA4I!tl-3^}i>*llQe5ah@@GGfC)S}AGlb@c8Zbwi(m&OhwbB2!=
zj)r^ivi2ZzjWY^rwVg1<PSpN0g`>hWUY2pjdYU|ZQ^8<bAaCp-Hx21{zPZyk!U@kx
z|3W4g53Q37j+wQOnQhD@ccLRUO-$+qR;M#4WJX{rRwgRs#tKL7JMxXT;M={6Wp;%;
z9aO6xs>_E#mFy}U86t3pg7qm-z5oe#M|B=MN98*g_E8aBIU(t-8i4x*1hLl#j~CiI
zz~Q5nVs1BrL_q+-Z9uS4A{rN;duvFVypH7$Eae5)jiLuz<G2HTIQKf3Vs)@wjocze
z2GyKH3+SSo`tq`K(tDCu#iK%wDCIdkI}SOKUo2!H+tT0@#=*Q)+GcqhPCAKfx5vxd
zg_E=mH2R2>+JzHkDY7Vgm@W|3ghuNoVMVPQw#hvpdy9O6FH~L*BaqB@;JeEyf_0@{
zjgY%<n3-LZI<aW!D_JY4m^_;;6UhUbbMK|V0LO=OJ-t%$j0DR}Kbdy;rfgUV5N%C6
zKT}#MWiEw+9{rQ{J1H9l%LW83o+HBRk(9*1$H%|Fuse)imWayZp*pH4U9OJpf$f?^
zUd2NXN?xb<(V6dl$}M{``vO_!+1v>OpzURv(TN9Pf$Ie=D8;1{JJrp<9)`Z1ePJ*Q
z&CPFqaB*g9vw9*RFmH2>y><wC)itapM{^O8o_u1b0YC@v2bM&qMD3s!@sFH<MGd19
zeyX$EJkz2l$K>_3gi}nv1Ul<h%t4r4=3@H|0&`X!FOn$VBdF3OW_xul*U!t>UoUus
za_#wGOg<euCr!@MBkqObvC?;#DqdjM#M0J$lGD%liC^kkE&7s>IN8L8bxU!AEMXnz
zisbwfqVa)4n{&Tk8jC)A)o)33D80ua_S#vDQ&@!q_kMN88GvY<QAD}L?7cWM|M_e-
zr>D86hoc>b?zqtWF#0U=>6MXY+KKPWSbh=olv@|}V>&l!L~9a#FtDMZpHKgI0QRAd
zK`ksgYj8zeY&A1q@m`ZiNXk(=_#;dga`FI->UjR>cfyv%b?vOREA1bkVW*h_cB6a*
z!hPj-0CoTzo;uq2YpkMNGdd2J1zWl0;Wer6rFoUc@a*SgS=JBb9`K11VU^@G^!WOW
zANGZXE0(9iCA=mZm=r7B#^g5x#CY$5SChF&ytotPuquqilAUzTEi2W39k~THXltq`
z@P?f<$GmZru(wiV>`V+lhHhhyiQHsJ?1U!3V8EBEQdTCHts!XfAZtbyx7z~%(aw;l
z39-Z^9JK>dMF}uFFDpz!y}!^rvl%Sha7Ad;{pgrM*3|*y6I#++ySnH4eK#>+k3YFv
zaJ#~gX#AD!w<qjFZgaYn?dN2HIZMlmL4?tNFeDZR*#W3ca18A5Zl>UrfGs#oj-ekD
zh0;@c*xiDcc0f<x5<38hQW_%ZA$qtfrEk?&AKsX7QH3J1kt7RD+W-J+@Y66s+2Z0Z
z;QFxnVHlI$ow|_L#2BJ^cb@v?izWmg@~)wxlraKUx$Ja#3Xh$6!~)~l;V*m%Ci#he
z#!$=y^r1&n=Q9n7R|a1K1skE5LkALIFD}>v^an9?4J$)p5;`Xd7R1c_6oc@99oW|K
z%D=ajCatC&KQi3@_^F1JCub$1<OmDD2ks9VE5Od(?qMJK?vuap)aXzZD`KgGBG5^|
z_Vcp9<W!`Ht5}md)m1DHobZ%3#2j;6&>tY|4?{G@Anai$uLy_HFo`$V6T!`<7{ozX
zED462Oxv(B-H?b@e>GMo{qQCnJzjd(9y@sK#B7+sXo6aKDdtC}1%xqt48dt<R9}vu
zOPXa*(k0i&xU=-nGIqS{n)AgU;P|}t3oBi>Ry{uUZOF@nLw91|Eik?l=Nk!*bt%Hr
zb@g8FbKh+(NH|1!TeFv#S(DfD8a$?KqI(`ogi+dppzT5Jem%#3%1GEu+2Y*#zQPOM
zMPWD>@qWbJ;Jss&T@kkC+gyy(4BOvxD>I%~#9?cObyi!)TD^{;dl&LA#)w-AZ7%XP
z!`AoMWD$8MzRMJUmU({IA#td~aI+cL*BYtCEw0MZ46{D4MtxIi<iJ`@6K=GoIvk^G
zDGR+~VDZ$Z=cVSu(`&U5?cE5#1yO660lQ$4VTsYja_6lzGK_taaNKTnYKx%fmS0I&
z>chhyUoriJ>-`TN>TP|MT9aqtZ_l4sUPNp|^nx6hC>Lx1Qt_jUALjRrYQT+_@tE{h
zl4WX{%k@NY{(PQ)&#I4oI~04M`1iXDzs^Ty0OxVtPY(v!>GZG#<y(;FtZq$wDv#h+
z$DO^j6d82F!t3lYs|$h{0?AbSVNB&i2c(Y!zGqHhZ<`L!80l2RP5w}`DK(nhzR;}m
zvRPM1{HAllg@u=@%y_+yK?pX*r^71`KLSW9@`iGKy8Mt!qM<_tG)uoxo0PsXKfa8S
zD;dIn9ts}bDyg+5I;0ZS^oQn!!o`A0m%28TKE4Uq1aX9|v=8A+dPW5$Kh&XMVp$w7
ze`##2Z_yb$U@ZWb3bK5QytiP?W91#^a6L=c0<=?sll@_IdvKC<VTHfQxp^E8Iwzvf
zw9Ou39DzvlPFmxY+s5q1`zrd0^2(;uZhDd!_(aSgd+XH}S5wdN-nEMyTSAXGp0t0A
z8@{QZGuGr-*M!919AszqJmMW#SrNO_)5p;(yBOPVZSB=x?`-PX;;XYG#3n%4f}<yT
z(FKJqQBdCH6oiDIe=*<NSjWVbGiX6{T8Dj?uvwJVxsLA@gCZTZx>O)jhsGYO8o$zc
z3%p;Ps(Tm+*F9yoOf7ETp=>8Z+s(~f?-)b=k&Fr70HL{i+ac(9bm_r0QE#o)q2SxS
zS#?xNJ5{3hvxJBL87#o8WL1Zq51e-!nrw5iKrg6e0n~G{+qBrGoHX(XTaus|p5L>o
z3c-DOn%?$C^I=ML82gcn8#q-z{vysyI{a}<vbk*WS|k4t1J7pnd?p?@T!^n_u}I@r
zFLn*Mec6E-m*Ayu>|+VWq`djsA(u}7xH<FtrA}wg3vX-2%;!l#qaBiIi3ypwpT@m^
zki6M2(&IxIJ4^F^HSge3<dJi<mp_1W2%m1l+FRIb9C2`)_v@r>W6@^=?$YFUzyZ+F
zX1JPlT`k;1orqt%f{{hW?9*nPIk%Z?yh;#5_gcFGoJ?JsQ4(%ELvFX^zE21zN%LMX
z&#~tsq_UGSk<oeVsUMlZx=!bI39}GvXiu{kK8_9;M6)y9xDA?7{2hV>EUJ~9wm4Mn
znPtEOUmMr~^CTzjX!JPKkU03c+x`(%Xc9c}MKjvLYUNs>XS93ffCXk0cBx>UJ-`D~
zHEBrM>p+-P##$9Yr<+;cz5o)D;y|@x9h;~aCpt1SkA&SMxLmb3{UB452nqR>m3c0V
zK1q2$2ds?UusF)^1Ps(71YtA?$(FYpbW0KA?RlFtj08sA!+j_A#`$`JQ%o~TlbBA)
zNE&Gg_>|Oh^$0UFIE)S)tA6$DR!YKwz>Ut!X^pqQ$%vXqe}Gj#13(~jZ-A&7)hTZA
z$G~3b9WC+ezXz@t&uly0Xt8MB<B6~+*x<P4tt8)%mc3;{s>uPEYpm~RS*bl>m~g7(
z2-ENA65^E=>vsu!b^SZ$eW`NsUP2_sp%YHnEnf?yejJ!bzoehp*!z)e2k0wClF%RF
zBa1~Tad9V)^ouNradFi1ZdfLF(7C#A=>y-8Zswp*33a$!6KqqRlkYvJ!{si{0m64J
ztRp3U13k#oV2cSOG4vD79rcTe9#(*vLuzzdhTvFb^9PQ%ks*Xg=dA@8M#<o?q%MTe
z@0vYayf2Jy3lQ6bm`852qWH%%-^t<uqWSd)XpqgU)@q+HAKGFVr3UaVuEU1im#E|A
zVBZ*<Qlk(g-?hM(0am`S{<$F_51}{K$zT3}uqnmk<hO<OJ!;^(^2wvx9<Z{H-D@61
zf(2Q5uJ0a(vqs%$oo&mA==)c}_tw9ZF2lE?m_EoU<)PRtH6a!Myw;G|Fr_WP!J@>_
zPxi1g0}@~dK$hDYQXWGeA7q37T=}D<X>DNjp~@u~j(I@X*2CUPO@K+2fX|S!GeMD}
zo^A)E3r@9Gr5FNWTY7GRJf4Iut4b+LX{<^KrxzumK?Y9{WYXRq+)|hoenZjU>*JVl
z>T0fR!VvCMzS<6$&t&`IKrONeBx-&VY;$3ObjMZUJ4(V&XIKpqP$~@ffou;-n^V#u
zuu8Q=*lVQ#_)r>q5uEy~4sxneU?JdShn=vxFc2a%5?qTx)LF-&sk7{WFEKCtKsG0+
zl~0S5)c_DCI#wDC{;+QP`(ZILI){cowMj5cn<d6ukDE;5HVmW3{efb8z~wRtwl{|a
zTQ|A`<N3WIMB&lKW3bqn_F;6YpYRdbm{QUR$kx?B7Fa^pU4nvPbe&CHOR7?WfM<Pd
zKTl2-Ycwf_K2U52j07dZY9}KUr@j-ek2et?3Led*$35>ZRzQh{B<Z<)xeKTX<g+h1
z7!nUou>AyU9Ws1{!-fZ!I&}sK-(?2Xf&(Rh(ZdaiP#)#Vhg03`BPHG72}l*vRn;yh
z%-ie%$fzX-=0@Dn3JzLbFxUzEINvv5ErgB639ul!4)M9M1;)l4cEDqhHZn}xe`(=u
zMmGoMJV+)Q?svSI*^~fFV7xo$2Jb3geCSgL=o7^cLJAqzaq<Y-nb^7VZXdCDL@egG
z+ZXhuE>-Bf^e*k5v;=U5V#0bk>~@N;c{qVaqL(nV$s>8>6Lpx%*V}_e`v>*QLN!)%
zpT*c^App#?=4Q%xwLA!4NF&kUyvo<j&4N=gTEv+pH@_-Yg8M*D>^VO^+->?M2yIpr
z)QaT$IG8tWEKeaYGquA*$Kj8jxWBOiqaDidNjL&hZvAYX@+KH8p#}#{ohmp-6cACr
zmn;mgKI%}?31%5Ce^PAC01Ms!in3JXQS>D;%uRV2+*Q#Mf2;I=HOh(AhA4Us<}clR
zb^vus=mTT=kj(uIs8$J}-?$_wKJ<+hn7U*nFWq$JmedQ3;eEYtiK*8sItD8Mx4eu(
zumBMZf4NPBT>t}k)r?++8ow!qpx|!Fqxo<Gi-@!u8lQ>jOLR*m;ev8|n#Vy$+xinZ
zqPQt<VvI-jQOIN$w4er`PLnE1`JXjr(o80+{WLFOTbSA#Pra3Tf#E}=@w!YNO#}_<
zc*W{@H$t!0N<_!gI^@CM(>8Y@Z3Z1LLL8Y4u3w+eT>`^z^>^tyn<+A^!Ga7c?R0*-
zJh*UNw$47O2)0H*K?i$u*gQ+xu1yqiZqjxD2g)Q84zzqV@F6Fh!#aa^;*80+=2DSG
z=WHw;JwWQA4QWB}?w{7r;OV=#%dj@jpdM=g9-rgvj;~#9%A5!nha)89&d;xoIfU+)
z(6zdZT@6Z__Q9AkNBzq-T5Wl<F`N?&m6?UMIeUIfQe7x<^*Mb$AIjtF6oQ@J02mnj
z?aPnK`0Rmnv~p+93)^^C6W5P#TeICF78v;ykHr>`)Ix8T#QRV$k&8u-I|JLj&`AE?
zW<jVg_id^Axaj%^#o-2yTEY8qOk<+w6G<l@=jPxPu%rt}1Y_Fom#L?s7XVlLRxFUt
z-kpaq1cR#juj@H#mgO$PPoPade}y>ri~65|Z*ALcduIgPoZkr~8UcF!BLJ-5Zu_Zv
zUPBnO;rb5#`<p|@Z+`#((9NKJNblpF`i_P<jp?hb@4Q*k@4}e_w(m_Wx?ZhtT|K>N
zKc2SOVshN_2y8GJDpZy=1G{QtNL1G%2K9@Pi@_&u1s3c<vA18}LGk`eS395n=?Ovq
zPLlZRF4XJyH@t~<T153x3<S8Ex?-cUy8rt(LD<TXxi=%2ThVWX3Ws$0mWip8jZOtx
zK192MDEfo-$L3tzsYL|;#8a~pNtW7M&PA%`!k(SdRgsEr&E@;Lf;gLsZZ5O|7Q+25
zly+YR_sFdI+ib#zS}5N$W}R(TCyL<&zQjLtSI4Y2u)_}l?k~FmCMP-@OSQkT-)1U<
zQOEQXwYoX<dwD#@pY`wk_&zUepIth-s5#L$pu&ZO6=i-uU%RC&Y_WjH(}LWiHoFN<
zC4vXr$@a`{vSW^WgD{4!+$mQyQkxAfNvT1_BhBR!Ng}Sh<aRYfbPnaoh!l??^N<``
zl4Zc<F@FxfVa2k^caA8Tiyk!4lbjb(8SJ<g;wZJ_qCUJck<{V(M9?c86D%*BA&q_i
zU{I%^^n=~9(ICY;rq~CcFJpPjPFbx0h)o`Qo@JlVCWhXoaZ!QzR=kMQuCQeUd8N&@
zmGJiq+_6rxSKatL>6eGw=;tM&8yh61-$R#`-ae@XSvpf74qKLU$DoV6eHqWkhe#k@
zZNuY1Vo2JqNql&lS)Aj26n55ABB96uFrk62&oww&cbQ0_)#7>l#my9X(8V)mx>okg
zcHE>pwvu@UZW`1|@;!0LX7H6BQN+S^%yZ;N^Oq3O`D4k}691LSGTE8Z9$Hj$9^vVj
zI52auJ`z?I#*ujmGQ;+vE|;gkLkXKlO*ICfvo-)ce6@i=TJ1GZgQUn-MTWkyoHgVe
z5&8xsFxB41-;+qWOg~O~UYiHG*wu$R@j|&i-5+go^l9a`X76cwwA{qCCFfG3=Z6RD
zRSVU-$-y)piYC$PTK;TD!QJNoZE-#4ITXr$Yn^fp%=5wh>JxWf={JoH(jxZ4R)V4X
zAF1gv;45&14cG{8msbcuzm9y-opX%+;MNA{HFks7#xWxRyE+)U0q~gHS#gxeY%tRz
z;_ghB4M)JO^D;lDphp*$r;w7{PYoV{P2OQP)YYpVv=;QcseX-`j2<<)s&mjP9KkpY
zn_RAJTzQI*5g=ReAFQ_GS{OZgm35Q(<h#igofX(HoPG0Be&eLbo8fliRHEQXoySEI
z=XDU{#2&+cYhkt}YisoS|M-vn@9e|f697a;yDZV3?&!%0MOxs%r{`$HXkFDXSSV<0
z`*_oZj3#j0PZgmv?ewvsQ$y^&u4L=Q4_YC?N;2uZ+GzV_o{h$(-t@e#*Yd9sZ`R8X
zKi_YDHXR)rdMlLP-;lBd+z=b324;xvwZT?^)9JJ6<<Bp};S4ZYw9f&yV)fq0!!Vm?
z!9ZkpDM36LuMMs|(e(G$-KlryA~>%~8E%#J$=0?u&%V5MF5Qsc9cp+Wj$X<zGWhht
zUN>XAZhC6e20*?S++6@firjPVq=4$~2>8;n+UmpRuhE`a1HSF(P1`-oddGuKn~c`E
z@UmXZG3dpnvieZd)xit&F2z3}H8b4bEj;a0>P(@musnY-r1;J9$-d0M(^d-D9Wk@v
z6h1|xe4kF%`-;_@#*Ld^#1V*XFPf{d#pF0n@f$qg(OjL@N20&fUhP$CyLU-^>z#OS
dZ-sv3!#VhxG|d8Vr}K>cd+cm7cK>|izX3bRV`%^Y

literal 0
HcmV?d00001

diff --git a/ignore/text.PNG b/ignore/text.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..887eeb885eee8efc45a8517717da7b42d189ebb9
GIT binary patch
literal 5876
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

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 153429d..d888172 100644
--- a/index.html
+++ b/index.html
@@ -24,7 +24,7 @@
         #rightSidebar.collapsed {
             transform: translateX(100%);
         }
-        
+
         /* Tab Styles in Sidebar */
         .sidebar-tab {
             @apply px-4 py-2 text-sm font-medium text-gray-400 hover:text-white transition-colors border-b-2 border-transparent;
@@ -32,7 +32,7 @@
         .sidebar-tab.active {
             @apply text-blue-500 border-blue-500;
         }
-        
+
         /* Hide scrollbar for clean UI */
         .no-scrollbar::-webkit-scrollbar {
             display: none;
@@ -52,14 +52,14 @@
             <button id="mobileMenuBtn" class="md:hidden w-10 h-10 flex items-center justify-center text-[#8fa2b3] hover:text-white hover:bg-[#2d3a4f] rounded-md transition-colors z-50">
                 <span class="material-symbols-outlined text-lg">menu</span>
             </button>
-            
+
             <!-- Search/Symbol Button -->
             <div class="hidden md:flex items-center space-x-3 bg-[#1a2333] px-3 py-1.5 rounded-md cursor-pointer border border-[#2d3a4f]">
                 <span class="material-symbols-outlined text-sm text-[#8fa2b3]">search</span>
                 <span class="font-bold text-sm text-[#dfe2f2]">BTC/USD</span>
                 <span class="material-symbols-outlined text-sm text-[#8fa2b3]">chevron_right</span>
             </div>
-            
+
             <!-- Mobile Search -->
             <div class="md:hidden flex items-center bg-[#1a2333] px-3 py-1.5 rounded-md cursor-pointer border border-[#2d3a4f]">
                 <span class="material-symbols-outlined text-sm text-[#8fa2b3]">search</span>
@@ -67,7 +67,7 @@
                 <span class="material-symbols-outlined text-sm text-[#8fa2b3] ml-2">chevron_right</span>
             </div>
         </div>
-        
+
         <div class="hidden md:flex items-center gap-2 mr-4">
              <div class="w-2 h-2 rounded-full bg-green-500" id="statusDot"></div>
              <span class="text-xs text-[#8fa2b3]" id="statusText">Live</span>
@@ -104,45 +104,149 @@
            <!-- Chart Container -->
             <section class="relative w-full bg-[#0d1421] h-[60vh] md:h-[70vh]" data-purpose="chart-container" id="chartWrapper">
                  <div id="chart" class="w-full h-full"></div>
-                 
+
                  <!-- Horizontal Drawing Toolbar (Top) -->
                  <div class="absolute top-2 left-1/2 -translate-x-1/2 flex flex-row gap-1 z-30 bg-[#1a2333]/80 backdrop-blur border border-[#2d3a4f] p-1 rounded-md shadow-xl" id="drawingToolbar">
-                    <button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('trend_line')" title="Trend Line">
+                    <button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('trend_line', event)" title="Trend Line">
                         <span class="material-symbols-outlined text-sm">call_split</span>
                     </button>
-                    <button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('horizontal_line')" title="Horizontal Line">
+                    <button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('horizontal_line', event)" title="Horizontal Line">
                         <span class="material-symbols-outlined text-sm">swap_horizontal_circle</span>
                     </button>
-                    <button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('vertical_line')" title="Vertical Line">
+                    <button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('vertical_line', event)" title="Vertical Line">
                         <span class="material-symbols-outlined text-sm">swap_vert</span>
                     </button>
-                    <button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('rectangle')" title="Rectangle">
+                    <button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('rectangle', event)" title="Rectangle">
                         <span class="material-symbols-outlined text-sm">crop_square</span>
                     </button>
-                    <button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('text')" title="Text Label">
+                    <button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('text', event)" title="Text Label">
                         <span class="material-symbols-outlined text-sm">text_fields</span>
                     </button>
-                    <button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('arrow_up')" title="Arrow Up">
+                    <button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('arrow_up', event)" title="Arrow Up">
                         <span class="material-symbols-outlined text-sm">arrow_upward</span>
                     </button>
-                    <button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('arrow_down')" title="Arrow Down">
+                    <button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('arrow_down', event)" title="Arrow Down">
                         <span class="material-symbols-outlined text-sm">arrow_downward</span>
                     </button>
-                    <button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('measure')" title="Measure">
+                    <button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('measure', event)" title="Measure">
                         <span class="material-symbols-outlined text-sm">straighten</span>
                     </button>
                     <div class="w-[1px] h-full bg-[#2d3a4f] mx-0.5"></div>
-                    <button class="w-8 h-8 text-red-400 hover:text-red-300 hover:bg-red-900/20 rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('clear')" title="Clear All">
+                    <button class="w-8 h-8 text-red-400 hover:text-red-300 hover:bg-red-900/20 rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('clear', event)" title="Clear All">
                         <span class="material-symbols-outlined text-sm">delete</span>
                     </button>
                  </div>
 
+                 <!-- Trendline Settings Panel -->
+                 <div id="trendlineSettingsPanel" class="hidden absolute top-14 left-1/2 -translate-x-1/2 bg-[#1a2333] border border-[#2d3a4f] rounded-lg shadow-2xl z-50 w-[280px] p-0 text-sm font-['Inter']">
+                    <!-- Drag Handle -->
+                    <div id="tlPanelHeader" class="h-8 flex items-center justify-between px-3 border-b border-[#2d3a4f] cursor-move bg-[#1f2937] rounded-t-lg">
+                        <span class="text-[10px] uppercase tracking-wider font-bold text-gray-400">Settings</span>
+                        <button class="text-gray-500 hover:text-white" onclick="window.toggleTLSettings(false)">
+                            <span class="material-symbols-outlined text-sm">close</span>
+                        </button>
+                    </div>
+                    
+                    <div class="p-4">
+                        <!-- Tabs -->
+                        <div class="flex border-b border-[#2d3a4f] mb-4">
+                            <button class="flex-1 py-2 text-center text-blue-500 border-b-2 border-blue-500 font-medium" id="tlTabStyle" onclick="window.switchTLTab('style')">Style</button>
+                            <button class="flex-1 py-2 text-center text-gray-400 hover:text-white" id="tlTabText" onclick="window.switchTLTab('text')">Text</button>
+                        </div>
+
+                        <!-- Style Tab Content -->
+                        <div id="tlContentStyle">
+                            <!-- Color Grid (Line) -->
+                            <div class="grid grid-cols-8 gap-1 mb-4" id="tlColorGrid">
+                                <!-- Colors injected by JS -->
+                            </div>
+
+                            <!-- Opacity -->
+                            <div class="mb-4">
+                                <div class="flex justify-between text-xs text-gray-400 mb-1">
+                                    <span>Opacity</span>
+                                    <span id="tlOpacityValue">100%</span>
+                                </div>
+                                <input type="range" min="0" max="100" value="100" class="w-full h-1 bg-[#2d3a4f] rounded-lg appearance-none cursor-pointer" id="tlOpacityInput">
+                            </div>
+
+                            <!-- Thickness -->
+                            <div class="mb-4">
+                                <label class="text-xs text-gray-400 mb-1 block">Thickness</label>
+                                <div class="flex bg-[#0d1421] rounded border border-[#2d3a4f] p-1">
+                                    <button class="flex-1 h-6 flex items-center justify-center hover:bg-[#2d3a4f] rounded data-[active=true]:bg-[#2d3a4f] tl-thickness-btn" onclick="window.setTLThickness(1)" data-thickness="1"><div class="w-4 h-[1px] bg-white"></div></button>
+                                    <button class="flex-1 h-6 flex items-center justify-center hover:bg-[#2d3a4f] rounded data-[active=true]:bg-[#2d3a4f] tl-thickness-btn" onclick="window.setTLThickness(2)" data-thickness="2"><div class="w-4 h-[2px] bg-white"></div></button>
+                                    <button class="flex-1 h-6 flex items-center justify-center hover:bg-[#2d3a4f] rounded data-[active=true]:bg-[#2d3a4f] tl-thickness-btn" onclick="window.setTLThickness(3)" data-thickness="3"><div class="w-4 h-[3px] bg-white"></div></button>
+                                    <button class="flex-1 h-6 flex items-center justify-center hover:bg-[#2d3a4f] rounded data-[active=true]:bg-[#2d3a4f] tl-thickness-btn" onclick="window.setTLThickness(4)" data-thickness="4"><div class="w-4 h-[4px] bg-white"></div></button>
+                                </div>
+                            </div>
+
+                            <!-- Line Style -->
+                            <div class="mb-4">
+                                <label class="text-xs text-gray-400 mb-1 block">Line style</label>
+                                <div class="flex bg-[#0d1421] rounded border border-[#2d3a4f] p-1">
+                                    <button class="flex-1 h-6 flex items-center justify-center hover:bg-[#2d3a4f] rounded data-[active=true]:bg-[#2d3a4f] tl-style-btn" onclick="window.setTLStyle(0)" data-style="0"><div class="w-6 border-b border-white"></div></button>
+                                    <button class="flex-1 h-6 flex items-center justify-center hover:bg-[#2d3a4f] rounded data-[active=true]:bg-[#2d3a4f] tl-style-btn" onclick="window.setTLStyle(1)" data-style="1"><div class="w-6 border-b border-dashed border-white"></div></button>
+                                    <button class="flex-1 h-6 flex items-center justify-center hover:bg-[#2d3a4f] rounded data-[active=true]:bg-[#2d3a4f] tl-style-btn" onclick="window.setTLStyle(2)" data-style="2"><div class="w-6 border-b border-dotted border-white"></div></button>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Text Tab Content -->
+                        <div id="tlContentText" class="hidden">
+                            <div class="flex gap-2 mb-4 relative">
+                                 <!-- Text Color Button -->
+                                 <div class="w-8 h-8 rounded border border-[#2d3a4f] cursor-pointer" id="tlTextColorBtn" style="background-color: #2962ff"></div>
+                                 
+                                 <!-- Text Color Picker Popup -->
+                                 <div id="tlTextColorPicker" class="hidden absolute top-10 left-0 bg-[#1a2333] border border-[#2d3a4f] rounded shadow-2xl p-2 z-[60] w-[210px]">
+                                     <div class="grid grid-cols-8 gap-1" id="tlTextColorGrid">
+                                         <!-- Colors injected by JS -->
+                                     </div>
+                                 </div>
+
+                                 <!-- Font Size -->
+                                 <select id="tlFontSize" class="bg-[#0d1421] border border-[#2d3a4f] rounded text-xs px-2 h-8 text-white focus:outline-none">
+                                     <option value="10">10</option>
+                                     <option value="12">12</option>
+                                     <option value="14" selected>14</option>
+                                     <option value="16">16</option>
+                                     <option value="20">20</option>
+                                     <option value="24">24</option>
+                                 </select>
+
+                                 <!-- Style Toggles -->
+                                 <button class="w-8 h-8 border border-[#2d3a4f] rounded flex items-center justify-center hover:bg-[#2d3a4f] data-[active=true]:bg-blue-600" id="tlBoldBtn" onclick="window.toggleTLBold()">B</button>
+                                 <button class="w-8 h-8 border border-[#2d3a4f] rounded flex items-center justify-center hover:bg-[#2d3a4f] italic data-[active=true]:bg-blue-600" id="tlItalicBtn" onclick="window.toggleTLItalic()">I</button>
+                            </div>
+
+                            <textarea id="tlTextInput" class="w-full h-24 bg-[#0d1421] border border-[#2d3a4f] rounded p-2 text-xs text-white focus:border-blue-500 focus:outline-none mb-4" placeholder="Add text"></textarea>
+                            
+                            <div class="flex items-center justify-between mb-4">
+                                <label class="text-xs text-gray-400">Alignment</label>
+                                <div class="flex gap-2">
+                                    <select id="tlAlignVert" class="bg-[#0d1421] border border-[#2d3a4f] rounded text-xs px-2 h-6 text-white focus:outline-none">
+                                        <option value="top">Top</option>
+                                        <option value="middle">Middle</option>
+                                        <option value="bottom">Bottom</option>
+                                    </select>
+                                    <select id="tlAlignHorz" class="bg-[#0d1421] border border-[#2d3a4f] rounded text-xs px-2 h-6 text-white focus:outline-none">
+                                        <option value="left">Left</option>
+                                        <option value="center">Center</option>
+                                        <option value="right">Right</option>
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                 </div>
+
                  <!-- Overlay Controls -->
                  <div class="absolute bottom-4 right-4 flex gap-2 z-10 opacity-0 hover:opacity-100 transition-opacity" id="priceScaleControls">
                         <button class="w-8 h-8 bg-[#1e222d] border border-[#2d3a4f] text-gray-300 flex items-center justify-center rounded hover:bg-[#2d3a4f] transition-colors shadow-lg" id="btnSettings" title="Settings">
                            <span class="material-symbols-outlined text-sm">settings</span>
                         </button>
-                        
+
                         <!-- Settings Popup -->
                       <div class="hidden absolute bottom-10 right-0 bg-[#1a2333] border border-[#2d3a4f] rounded-lg py-2 z-50 w-64 shadow-xl text-sm" id="settingsPopup">
 
@@ -187,7 +291,7 @@
                                     <input type="color" id="candleDownColor" value="#ff9800" class="flex-1 h-6 cursor-pointer">
                                 </div>
                             </div>
-                            
+
                             <!-- Decimals -->
                             <div class="px-4 py-2 flex items-center justify-between">
                                 <label class="text-sm text-gray-300">Decimals</label>
@@ -195,7 +299,7 @@
                             </div>
                      </div>
                  </div>
-                 
+
                  <!-- Navigation Controls -->
                  <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-10 opacity-0 hover:opacity-100 transition-opacity" id="navControls">
                      <button class="w-8 h-8 bg-[#1e222d]/80 backdrop-blur border border-[#2d3a4f] text-white rounded-full flex items-center justify-center hover:bg-blue-600 transition-colors" id="navLeft">
@@ -215,7 +319,7 @@
                 <div class="flex items-center justify-between mb-4">
                     <h2 class="text-lg font-bold flex items-center gap-2">
                         <span class="material-symbols-outlined text-[#b6c4ff]">analytics</span>
-                        Technical Analysis 
+                        Technical Analysis
                         <span id="taInterval" class="text-[10px] bg-blue-600/20 text-blue-400 px-2 py-0.5 rounded ml-2 border border-blue-600/30">1D</span>
                     </h2>
                     <div class="flex items-center gap-2">
@@ -228,7 +332,7 @@
                         </button>
                     </div>
                 </div>
-                
+
                 <div id="taContent" class="grid grid-cols-2 md:grid-cols-4 gap-4">
                     <div class="text-gray-500 text-sm p-4 text-center w-full col-span-full">Loading analysis data...</div>
                 </div>
@@ -304,7 +408,7 @@
                 <span class="material-symbols-outlined">close</span>
              </button>
         </div>
-        
+
         <!-- Desktop Sidebar Toggle -->
         <button id="sidebarToggleBtn" class="md:flex hidden w-8 h-8 bg-[#1a2333] border border-[#2d3a4f] text-gray-300 flex items-center justify-center rounded hover:bg-[#2d3a4f] transition-colors" title="Toggle Sidebar">
             <span class="material-symbols-outlined text-sm">menu</span>
@@ -343,7 +447,7 @@
         window.toggleSidebarDisplay = function(tabName) {
             const sidebar = document.getElementById('rightSidebar');
             if (!sidebar) return;
-            
+
             const isOpen = !sidebar.classList.contains('collapsed');
             const activeTab = document.querySelector('.sidebar-tab.active');
             const currentTabName = activeTab ? activeTab.dataset.tab : null;
@@ -356,7 +460,7 @@
 
             // Otherwise, OPEN it (remove collapsed) and switch tab
             sidebar.classList.remove('collapsed');
-            
+
             if (tabName) {
                 // Find and click the hidden tab button to trigger existing logic
                 const tabBtn = document.querySelector(`.sidebar-tab[data-tab="${tabName}"]`);
@@ -385,7 +489,7 @@
             }
         };
     </script>
-    
+
     <script src="./config.js"></script>
     <script type="module" src="./js/app.js"></script>
 </body>
diff --git a/js/ui/chart.js b/js/ui/chart.js
index 4a3ed7f..e3c572d 100644
--- a/js/ui/chart.js
+++ b/js/ui/chart.js
@@ -458,7 +458,10 @@ export class TradingDashboard {
 
         // Initialize Drawing Manager
         this.drawingManager = new DrawingManager(this, chartContainer);
-        window.activateDrawingTool = (tool) => this.drawingManager.setTool(tool);
+        window.activateDrawingTool = (tool, event) => {
+            const e = event || window.event;
+            this.drawingManager.setTool(tool, e);
+        };
 
         // Setup price format selector change handler
         document.addEventListener("DOMContentLoaded", () => {
diff --git a/js/ui/drawing-tools.js b/js/ui/drawing-tools.js
index 4e7c9d0..1e74bda 100644
--- a/js/ui/drawing-tools.js
+++ b/js/ui/drawing-tools.js
@@ -16,6 +16,23 @@ export class DrawingManager {
         this.dragMode = null; 
         this.isMouseDown = false;
         
+        // Default Settings
+        this.defaults = {
+            trend_line: {
+                color: '#2962ff',
+                width: 2,
+                style: 0, // 0: Solid, 1: Dashed, 2: Dotted
+                opacity: 100,
+                text: '',
+                textColor: '#2962ff',
+                fontSize: 14,
+                bold: false,
+                italic: false,
+                alignVert: 'top',
+                alignHorz: 'left'
+            }
+        };
+
         // Dragging offsets
         this.dragStartPos = null;
         this.startP1 = null;
@@ -24,6 +41,7 @@ export class DrawingManager {
         this.startTime = null;
         
         this.init();
+        this.initSettingsPanel();
     }
 
     init() {
@@ -31,6 +49,18 @@ export class DrawingManager {
         
         // Mouse Events
         container.addEventListener('mousedown', (e) => this.handleMouseDown(e));
+        container.addEventListener('dblclick', (e) => {
+            const pos = this.getMousePos(e);
+            const hit = this.findHit(pos.x, pos.y);
+            if (hit) {
+                this.selectedDrawing = hit.drawing;
+                // Only open panel for supported types
+                if (['trend_line', 'ray', 'rectangle'].includes(hit.drawing.type)) {
+                    this.toggleSettingsPanel(true);
+                }
+                this.update();
+            }
+        });
         window.addEventListener('mousemove', (e) => this.handleMouseMove(e));
         window.addEventListener('mouseup', (e) => this.handleMouseUp(e));
 
@@ -164,7 +194,13 @@ export class DrawingManager {
         });
     }
 
-    setTool(tool) {
+    setTool(tool, event) {
+        // Shift + Click on trend_line button opens settings
+        if (tool === 'trend_line' && event && event.shiftKey) {
+            this.toggleSettingsPanel(true);
+            return;
+        }
+
         this.activeTool = tool;
         
         if (tool === 'cursor') {
@@ -301,12 +337,26 @@ export class DrawingManager {
             return;
         }
         
-        const color = '#2962ff';
+        const defs = this.defaults.trend_line;
+        const color = defs.color;
         const p1 = { time: pos.time, price: pos.price };
         const p2 = { time: pos.time, price: pos.price };
 
         if (this.activeTool === 'trend_line' || this.activeTool === 'ray' || this.activeTool === 'rectangle') {
-            this.currentDrawing = { type: this.activeTool, p1, p2, color };
+            this.currentDrawing = { 
+                type: this.activeTool, p1, p2, 
+                color: defs.color,
+                width: defs.width,
+                style: defs.style,
+                opacity: defs.opacity,
+                text: defs.text,
+                textColor: defs.textColor,
+                fontSize: defs.fontSize,
+                bold: defs.bold,
+                italic: defs.italic,
+                alignVert: defs.alignVert,
+                alignHorz: defs.alignHorz
+            };
         } else if (this.activeTool === 'horizontal_line') {
             this.drawings.push({ type: 'horizontal_line', price: pos.price, color });
             this.setTool(null);
@@ -604,6 +654,20 @@ export class DrawingManager {
         return x1 + ratio * (x2 - x1);
     }
 
+    hexToRgba(hex, opacity) {
+        let r = 0, g = 0, b = 0;
+        if (hex.length === 4) {
+            r = parseInt(hex[1] + hex[1], 16);
+            g = parseInt(hex[2] + hex[2], 16);
+            b = parseInt(hex[3] + hex[3], 16);
+        } else if (hex.length === 7) {
+            r = parseInt(hex.slice(1, 3), 16);
+            g = parseInt(hex.slice(3, 5), 16);
+            b = parseInt(hex.slice(5, 7), 16);
+        }
+        return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`;
+    }
+
     render(target) {
         target.useMediaCoordinateSpace((scope) => {
             const ctx = scope.context;
@@ -615,8 +679,16 @@ export class DrawingManager {
             allDrawings.forEach(d => {
                 const isSelected = d === this.selectedDrawing;
                 ctx.save();
-                ctx.strokeStyle = d.color;
-                ctx.lineWidth = isSelected ? 3 : 2;
+                
+                // Base Style
+                const color = d.opacity !== undefined ? this.hexToRgba(d.color, d.opacity) : d.color;
+                ctx.strokeStyle = color;
+                ctx.lineWidth = d.width || (isSelected ? 3 : 2);
+                
+                if (d.style === 1) ctx.setLineDash([10, 5]); // Dashed
+                else if (d.style === 2) ctx.setLineDash([2, 2]); // Dotted
+                else ctx.setLineDash([]); // Solid
+
                 if (isSelected) { ctx.shadowBlur = 5; ctx.shadowColor = d.color; }
 
                 if (d.type === 'trend_line' || d.type === 'ray') {
@@ -634,7 +706,29 @@ export class DrawingManager {
                             ctx.lineTo(x2, y2);
                         }
                         ctx.stroke();
+
+                        // Render Text if present
+                        if (d.text) {
+                            ctx.save();
+                            ctx.setLineDash([]); // Text should not be dashed
+                            const fontSize = d.fontSize || 14;
+                            const fontStyle = (d.bold ? 'bold ' : '') + (d.italic ? 'italic ' : '');
+                            ctx.font = `${fontStyle}${fontSize}px Inter`;
+                            ctx.fillStyle = d.textColor || color;
+                            ctx.textAlign = d.alignHorz || 'left';
+                            ctx.textBaseline = d.alignVert === 'middle' ? 'middle' : (d.alignVert === 'bottom' ? 'top' : 'bottom');
+                            
+                            const tx = (x1 + x2) / 2;
+                            const ty = (y1 + y2) / 2;
+                            const offset = 10;
+                            const finalTy = d.alignVert === 'top' ? ty - offset : (d.alignVert === 'bottom' ? ty + offset : ty);
+                            
+                            ctx.fillText(d.text, tx, finalTy);
+                            ctx.restore();
+                        }
+
                         if (isSelected) {
+                            ctx.setLineDash([]);
                             ctx.fillStyle = '#ffffff';
                             ctx.beginPath(); ctx.arc(x1, y1, 5, 0, Math.PI * 2); ctx.fill(); ctx.stroke();
                             ctx.beginPath(); ctx.arc(x2, y2, 5, 0, Math.PI * 2); ctx.fill(); ctx.stroke();
@@ -829,8 +923,6 @@ export class DrawingManager {
                         const labelWidth = Math.max(...labelLines.map(l => ctx.measureText(l).width)) + 24;
                         const labelHeight = 65;
                         
-                        // Natural position: Centered horizontally at midpoint, 
-                        // vertically offset from the top/bottom edge.
                         const midX = (x1 + x2) / 2;
                         const topY = Math.min(y1, y2);
                         const bottomY = Math.max(y1, y2);
@@ -881,4 +973,210 @@ export class DrawingManager {
         ctx.quadraticCurveTo(x, y, x + radius, y);
         ctx.closePath();
     }
+
+    initSettingsPanel() {
+        const panel = document.getElementById('trendlineSettingsPanel');
+        const header = document.getElementById('tlPanelHeader');
+        this.activeTLTab = 'style';
+        
+        // Dragging Logic
+        let isDragging = false;
+        let startX, startY, initialX, initialY;
+
+        header.addEventListener('mousedown', (e) => {
+            isDragging = true;
+            startX = e.clientX;
+            startY = e.clientY;
+            
+            const rect = panel.getBoundingClientRect();
+            initialX = rect.left;
+            initialY = rect.top;
+            
+            panel.classList.remove('left-1/2', '-translate-x-1/2', 'top-14');
+            panel.style.left = initialX + 'px';
+            panel.style.top = initialY + 'px';
+            panel.style.margin = '0';
+            
+            e.preventDefault();
+        });
+
+        window.addEventListener('mousemove', (e) => {
+            if (!isDragging) return;
+            const dx = e.clientX - startX;
+            const dy = e.clientY - startY;
+            panel.style.left = (initialX + dx) + 'px';
+            panel.style.top = (initialY + dy) + 'px';
+        });
+
+        window.addEventListener('mouseup', () => {
+            isDragging = false;
+        });
+
+        // Global functions for HTML event handlers
+        window.toggleTLSettings = (show) => this.toggleSettingsPanel(show);
+        
+        window.switchTLTab = (tab) => {
+            this.activeTLTab = tab;
+            document.getElementById('tlTabStyle').className = tab === 'style' ? 'flex-1 py-2 text-center text-blue-500 border-b-2 border-blue-500 font-medium' : 'flex-1 py-2 text-center text-gray-400 hover:text-white';
+            document.getElementById('tlTabText').className = tab === 'text' ? 'flex-1 py-2 text-center text-blue-500 border-b-2 border-blue-500 font-medium' : 'flex-1 py-2 text-center text-gray-400 hover:text-white';
+            
+            document.getElementById('tlContentStyle').className = tab === 'style' ? 'block' : 'hidden';
+            document.getElementById('tlContentText').className = tab === 'text' ? 'block' : 'hidden';
+            
+            const textPicker = document.getElementById('tlTextColorPicker');
+            if (textPicker) textPicker.classList.add('hidden');
+
+            this.updateSettingsPanelUI();
+        };
+
+        window.setTLThickness = (width) => this.applySettings('width', width);
+        window.setTLStyle = (style) => this.applySettings('style', style);
+        window.toggleTLBold = () => {
+            const current = this.selectedDrawing ? this.selectedDrawing.bold : this.defaults.trend_line.bold;
+            this.applySettings('bold', !current);
+        };
+        window.toggleTLItalic = () => {
+            const current = this.selectedDrawing ? this.selectedDrawing.italic : this.defaults.trend_line.italic;
+            this.applySettings('italic', !current);
+        };
+
+        // Initialize Color Grids
+        const colors = [
+            '#ffffff', '#e0e0e0', '#bdbdbd', '#9e9e9e', '#757575', '#616161', '#424242', '#212121', '#000000',
+            '#ef5350', '#ff9800', '#ffeb3b', '#66bb6a', '#009688', '#00bcd4', '#2962ff', '#673ab7', '#9c27b0', '#e91e63',
+            '#ffcdd2', '#ffe0b2', '#fff9c4', '#c8e6c9', '#b2dfdb', '#b2ebf2', '#bbdefb', '#d1c4e9', '#e1bee7', '#f8bbd0',
+            '#ef9a9a', '#ffcc80', '#fff59d', '#a5d6a7', '#80cbc4', '#80deea', '#90caf9', '#b39ddb', '#ce93d8', '#f48fb1',
+            '#e57373', '#ffb74d', '#fff176', '#81c784', '#4db6ac', '#4dd0e1', '#64b5f6', '#9575cd', '#ba68c8', '#f06292',
+            '#f44336', '#fb8c00', '#fdd835', '#4caf50', '#00897b', '#00acc1', '#1e88e5', '#5e35b1', '#8e24aa', '#d81b60',
+            '#c62828', '#ef6c00', '#f9a825', '#2e7d32', '#00695c', '#00838f', '#1565c0', '#4527a0', '#6a1b9a', '#ad1457',
+            '#b71c1c', '#e65100', '#f57f17', '#1b5e20', '#004d40', '#006064', '#0d47a1', '#311b92', '#4a148c', '#880e4f'
+        ];
+
+        const styleGrid = document.getElementById('tlColorGrid');
+        const textGrid = document.getElementById('tlTextColorGrid');
+
+        const populateGrid = (gridEl, key, closePopupEl = null) => {
+            if (!gridEl) return;
+            gridEl.innerHTML = '';
+            colors.forEach(color => {
+                const btn = document.createElement('div');
+                btn.className = 'color-swatch';
+                btn.style.backgroundColor = color;
+                btn.onclick = (e) => {
+                    e.stopPropagation();
+                    this.applySettings(key, color);
+                    if (closePopupEl) closePopupEl.classList.add('hidden');
+                };
+                gridEl.appendChild(btn);
+            });
+        };
+
+        populateGrid(styleGrid, 'color');
+        populateGrid(textGrid, 'textColor', document.getElementById('tlTextColorPicker'));
+        
+        const textColorBtn = document.getElementById('tlTextColorBtn');
+        const textPicker = document.getElementById('tlTextColorPicker');
+        if (textColorBtn && textPicker) {
+            textColorBtn.onclick = (e) => {
+                e.stopPropagation();
+                textPicker.classList.toggle('hidden');
+            };
+        }
+
+        // Bind Inputs
+        document.getElementById('tlOpacityInput').addEventListener('input', (e) => {
+            document.getElementById('tlOpacityValue').textContent = e.target.value + '%';
+            this.applySettings('opacity', parseInt(e.target.value));
+        });
+
+        document.getElementById('tlFontSize').addEventListener('change', (e) => {
+            this.applySettings('fontSize', parseInt(e.target.value));
+        });
+
+        document.getElementById('tlTextInput').addEventListener('input', (e) => {
+            this.applySettings('text', e.target.value);
+        });
+        
+        document.getElementById('tlAlignVert').addEventListener('change', (e) => {
+            this.applySettings('alignVert', e.target.value);
+        });
+        
+        document.getElementById('tlAlignHorz').addEventListener('change', (e) => {
+            this.applySettings('alignHorz', e.target.value);
+        });
+
+        // Close on click outside
+        document.addEventListener('mousedown', (e) => {
+            const panel = document.getElementById('trendlineSettingsPanel');
+            const toolbar = document.getElementById('drawingToolbar');
+            const textPicker = document.getElementById('tlTextColorPicker');
+            
+            if (textPicker && !textPicker.classList.contains('hidden') && !textPicker.contains(e.target) && e.target !== document.getElementById('tlTextColorBtn')) {
+                textPicker.classList.add('hidden');
+            }
+
+            if (panel && !panel.classList.contains('hidden')) {
+                if (!panel.contains(e.target) && !toolbar.contains(e.target)) {
+                    panel.classList.add('hidden');
+                }
+            }
+        });
+    }
+
+    toggleSettingsPanel(show = true) {
+        const panel = document.getElementById('trendlineSettingsPanel');
+        if (!panel) return;
+        
+        if (show) {
+            panel.classList.remove('hidden');
+            this.updateSettingsPanelUI();
+        } else {
+            panel.classList.add('hidden');
+        }
+    }
+
+    updateSettingsPanelUI() {
+        const settings = this.selectedDrawing || this.defaults.trend_line;
+        
+        document.querySelectorAll('#tlColorGrid .color-swatch').forEach(el => {
+            if (el.style.backgroundColor === settings.color) el.classList.add('active'); 
+            else el.classList.remove('active');
+        });
+
+        document.getElementById('tlOpacityInput').value = settings.opacity !== undefined ? settings.opacity : 100;
+        document.getElementById('tlOpacityValue').textContent = (settings.opacity !== undefined ? settings.opacity : 100) + '%';
+        
+        document.querySelectorAll('.tl-thickness-btn').forEach(btn => {
+            btn.setAttribute('data-active', parseInt(btn.dataset.thickness) === settings.width);
+        });
+
+        document.querySelectorAll('.tl-style-btn').forEach(btn => {
+            btn.setAttribute('data-active', parseInt(btn.dataset.style) === settings.style);
+        });
+
+        document.querySelectorAll('#tlTextColorGrid .color-swatch').forEach(el => {
+            if (el.style.backgroundColor === settings.textColor) el.classList.add('active'); 
+            else el.classList.remove('active');
+        });
+
+        if (document.getElementById('tlTextColorBtn')) {
+            document.getElementById('tlTextColorBtn').style.backgroundColor = settings.textColor || settings.color;
+        }
+        document.getElementById('tlFontSize').value = settings.fontSize || 14;
+        document.getElementById('tlTextInput').value = settings.text || '';
+        document.getElementById('tlBoldBtn').setAttribute('data-active', !!settings.bold);
+        document.getElementById('tlItalicBtn').setAttribute('data-active', !!settings.italic);
+        document.getElementById('tlAlignVert').value = settings.alignVert || 'top';
+        document.getElementById('tlAlignHorz').value = settings.alignHorz || 'left';
+    }
+
+    applySettings(key, value) {
+        if (this.selectedDrawing) {
+            this.selectedDrawing[key] = value;
+            this.update();
+        } else {
+            this.defaults.trend_line[key] = value;
+        }
+        this.updateSettingsPanelUI();
+    }
 }