react-grab 0.1.33 → 0.1.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (450) hide show
  1. package/README.md +22 -22
  2. package/dist/copy-content-BVdIJS-d.d.cts +218 -0
  3. package/dist/copy-content-CZBjwiz6.d.ts +218 -0
  4. package/dist/core/index.cjs +1 -1
  5. package/dist/core/index.d.cts +2 -2
  6. package/dist/core/index.d.ts +2 -2
  7. package/dist/core/index.js +1 -1
  8. package/dist/core--Ufj16_R.js +22 -0
  9. package/dist/core--g1aIj2P.cjs +16 -0
  10. package/dist/core-58frx10s.js +21 -0
  11. package/dist/core-6WHLinaP.cjs +22 -0
  12. package/dist/core-8hT_aem6.cjs +16 -0
  13. package/dist/core-B04T5GVi.js +23 -0
  14. package/dist/core-B0VVBCnw.cjs +16 -0
  15. package/dist/core-B2Fb14V5.cjs +21 -0
  16. package/dist/core-B2KP8L5M.js +22 -0
  17. package/dist/core-B2doJOtN.cjs +16 -0
  18. package/dist/core-B3ei2CmJ.cjs +16 -0
  19. package/dist/core-B4UZXEzF.cjs +16 -0
  20. package/dist/core-B4fokp5c.js +23 -0
  21. package/dist/core-B4mcQjIW.cjs +16 -0
  22. package/dist/core-B4op93Jm.js +16 -0
  23. package/dist/core-B61jKle0.js +22 -0
  24. package/dist/core-B7-ZXWFD.js +21 -0
  25. package/dist/core-B8-HrDOV.js +23 -0
  26. package/dist/core-B8Qoj_Uu.js +16 -0
  27. package/dist/core-BAybPvu0.js +16 -0
  28. package/dist/core-BCoxaMuv.js +22 -0
  29. package/dist/core-BFUbt-Lr.cjs +16 -0
  30. package/dist/core-BFs0o0ry.cjs +16 -0
  31. package/dist/core-BFtyedBy.cjs +21 -0
  32. package/dist/core-BK3dbxMw.cjs +16 -0
  33. package/dist/core-BS6dlci7.js +16 -0
  34. package/dist/core-BSJSAr9t.cjs +23 -0
  35. package/dist/core-BShyP6v6.cjs +23 -0
  36. package/dist/core-BVCK03rH.cjs +16 -0
  37. package/dist/core-BZ-oKEob.cjs +16 -0
  38. package/dist/core-B_AsSPHz.js +23 -0
  39. package/dist/core-Bfp2AINN.cjs +23 -0
  40. package/dist/core-BhZjFvho.js +16 -0
  41. package/dist/core-BhfWpuzf.cjs +16 -0
  42. package/dist/core-BiXQdZjv.cjs +21 -0
  43. package/dist/core-BkCAY-6t.cjs +23 -0
  44. package/dist/core-BkHiZtUw.cjs +16 -0
  45. package/dist/core-BlCRSmTs.cjs +22 -0
  46. package/dist/core-BmWjaBiL.js +16 -0
  47. package/dist/core-BmlPgqbf.js +21 -0
  48. package/dist/core-Bmsc35N2.js +16 -0
  49. package/dist/core-BqGFVds-.cjs +16 -0
  50. package/dist/core-BqlaX0mO.js +16 -0
  51. package/dist/core-Br3-SZtp.cjs +16 -0
  52. package/dist/core-BrTobpFq.js +16 -0
  53. package/dist/core-BrWkCelW.cjs +16 -0
  54. package/dist/core-BtBnSqSp.js +16 -0
  55. package/dist/core-By8r6FNh.js +16 -0
  56. package/dist/core-C-ix7khG.js +22 -0
  57. package/dist/core-C3t1u5we.cjs +16 -0
  58. package/dist/core-C8EAzl4C.cjs +22 -0
  59. package/dist/core-C8gbQjmB.cjs +16 -0
  60. package/dist/core-C9W8Rk56.cjs +21 -0
  61. package/dist/core-CB43TUtW.cjs +22 -0
  62. package/dist/core-CJE2rmiu.js +16 -0
  63. package/dist/core-CMKd1SgC.cjs +16 -0
  64. package/dist/core-CNozueCf.js +16 -0
  65. package/dist/core-CQmdTUA-.js +16 -0
  66. package/dist/core-CSrz73MQ.js +23 -0
  67. package/dist/core-Cc09jN7g.cjs +16 -0
  68. package/dist/core-CcRJXtp4.cjs +16 -0
  69. package/dist/core-CcfWW8Yl.js +16 -0
  70. package/dist/core-CdoXsvsW.js +16 -0
  71. package/dist/core-CeEIf9A2.js +16 -0
  72. package/dist/core-CjcWLnZy.cjs +23 -0
  73. package/dist/core-CjqP4v2-.cjs +23 -0
  74. package/dist/core-CkD3vLFE.cjs +23 -0
  75. package/dist/core-CkiTaENw.cjs +16 -0
  76. package/dist/core-CnAMxMzZ.js +16 -0
  77. package/dist/core-CpZmNWbD.js +21 -0
  78. package/dist/core-CvgdmQ4p.js +22 -0
  79. package/dist/core-CxsODFDQ.cjs +16 -0
  80. package/dist/core-Cy4XMOO0.js +23 -0
  81. package/dist/core-Cz9O7gHH.cjs +16 -0
  82. package/dist/core-D0ky-6qT.cjs +22 -0
  83. package/dist/core-D9-l5I-_.cjs +16 -0
  84. package/dist/core-DEwKIq5J.cjs +16 -0
  85. package/dist/core-DFfTC69x.cjs +16 -0
  86. package/dist/core-DILYG446.js +16 -0
  87. package/dist/core-DKn94t_L.js +16 -0
  88. package/dist/core-DM-_GEhu.js +16 -0
  89. package/dist/core-DO-NwFws.js +16 -0
  90. package/dist/core-DODQNUmx.js +23 -0
  91. package/dist/core-DOPBacgQ.js +16 -0
  92. package/dist/core-DOb5ZaB5.js +16 -0
  93. package/dist/core-DOr6dvSK.cjs +23 -0
  94. package/dist/core-DR0Ro3q8.cjs +16 -0
  95. package/dist/core-DTcMkp10.cjs +16 -0
  96. package/dist/core-DTsROgB4.cjs +23 -0
  97. package/dist/core-DXQG3Wk9.js +23 -0
  98. package/dist/core-DXglqx_w.cjs +22 -0
  99. package/dist/core-DZ9x860t.cjs +16 -0
  100. package/dist/core-DZEKGXRR.js +22 -0
  101. package/dist/core-DZZ5G9na.js +16 -0
  102. package/dist/core-DbA9kq9x.js +21 -0
  103. package/dist/core-DfZtR6Kt.cjs +16 -0
  104. package/dist/core-Dgp8uIuC.js +4569 -0
  105. package/dist/core-DiEmqghi.js +16 -0
  106. package/dist/core-DlRuOC3A.cjs +23 -0
  107. package/dist/core-DnGsYklN.js +16 -0
  108. package/dist/core-DpoYsdkP.js +16 -0
  109. package/dist/core-DujSA1aI.cjs +16 -0
  110. package/dist/core-DxiziFMu.cjs +16 -0
  111. package/dist/core-Dy9ynhXB.js +16 -0
  112. package/dist/core-EHhBxHJ_.js +21 -0
  113. package/dist/core-G6p5b8ak.js +16 -0
  114. package/dist/core-H-_PbkBe.js +16 -0
  115. package/dist/core-JXJ0gE1j.cjs +22 -0
  116. package/dist/core-KoODoP9-.cjs +16 -0
  117. package/dist/core-LXhhDWv1.cjs +16 -0
  118. package/dist/core-QYSP7a25.cjs +16 -0
  119. package/dist/core-RWZw5had.js +23 -0
  120. package/dist/core-SZQqhCwV.js +23 -0
  121. package/dist/core-UpW6Z6Mk.cjs +21 -0
  122. package/dist/core-VscwhGe-.js +16 -0
  123. package/dist/core-WK1KkWG3.js +16 -0
  124. package/dist/core-X5YFIG5j.js +16 -0
  125. package/dist/core-XFT_Fkcw.js +16 -0
  126. package/dist/core-YQNuPG-3.cjs +16 -0
  127. package/dist/core-aViTfdTA.js +16 -0
  128. package/dist/core-b9fESdKU.cjs +16 -0
  129. package/dist/core-bUZ42VWj.cjs +4460 -0
  130. package/dist/core-eHkZbc2W.cjs +16 -0
  131. package/dist/core-gdUwD7JK.js +16 -0
  132. package/dist/core-jYKdSVlJ.cjs +21 -0
  133. package/dist/core-l8_Z4q-L.js +16 -0
  134. package/dist/core-q3XmQbpc.js +16 -0
  135. package/dist/core-rJjaR48p.js +16 -0
  136. package/dist/core-umpo-qTC.cjs +16 -0
  137. package/dist/core-vVsOKocN.js +16 -0
  138. package/dist/core-wQfD_pOM.cjs +23 -0
  139. package/dist/extract-element-css-0f3q-q7b.js +10 -0
  140. package/dist/extract-element-css-6J5DTdGN.cjs +336 -0
  141. package/dist/extract-element-css-B0mG017l.cjs +10 -0
  142. package/dist/extract-element-css-B1yr8Mpm.cjs +10 -0
  143. package/dist/extract-element-css-B3-IjvrV.js +10 -0
  144. package/dist/extract-element-css-BD8JAeoQ.cjs +10 -0
  145. package/dist/extract-element-css-BDBThjvO.cjs +10 -0
  146. package/dist/extract-element-css-BDF8Dsxi.cjs +10 -0
  147. package/dist/extract-element-css-BH2TCwmX.js +10 -0
  148. package/dist/extract-element-css-BIhJpEw3.js +10 -0
  149. package/dist/extract-element-css-BJ5IWmx6.cjs +10 -0
  150. package/dist/extract-element-css-BK5crNDH.js +10 -0
  151. package/dist/extract-element-css-BKago1jD.cjs +10 -0
  152. package/dist/extract-element-css-BOm7HBmq.cjs +10 -0
  153. package/dist/extract-element-css-BSpO2ilP.cjs +10 -0
  154. package/dist/extract-element-css-BUcxktuZ.js +10 -0
  155. package/dist/extract-element-css-BWBXnTPc.js +10 -0
  156. package/dist/extract-element-css-BctgCnqi.cjs +10 -0
  157. package/dist/extract-element-css-BlVzutos.js +10 -0
  158. package/dist/extract-element-css-BmiTc_Mk.js +10 -0
  159. package/dist/extract-element-css-BpXvHRvz.js +10 -0
  160. package/dist/extract-element-css-BvgbpVrI.js +10 -0
  161. package/dist/extract-element-css-C1tUbLOr.js +10 -0
  162. package/dist/extract-element-css-C2PYWNnN.cjs +10 -0
  163. package/dist/extract-element-css-C3RsAz33.js +10 -0
  164. package/dist/extract-element-css-C9TJ3qu4.cjs +10 -0
  165. package/dist/extract-element-css-CAyHke4c.js +10 -0
  166. package/dist/extract-element-css-CBMVWErt.cjs +10 -0
  167. package/dist/extract-element-css-CMVYWMgY.js +10 -0
  168. package/dist/extract-element-css-CUcY2ELh.cjs +10 -0
  169. package/dist/extract-element-css-CWZuIQQk.cjs +10 -0
  170. package/dist/extract-element-css-C_F87DWh.js +10 -0
  171. package/dist/extract-element-css-CcOv00u_.js +10 -0
  172. package/dist/extract-element-css-ClUN8rFQ.js +319 -0
  173. package/dist/extract-element-css-CllNZlHg.cjs +10 -0
  174. package/dist/extract-element-css-Cp3VzwsP.cjs +10 -0
  175. package/dist/extract-element-css-CuxQoy6m.cjs +10 -0
  176. package/dist/extract-element-css-CwaJovy6.js +10 -0
  177. package/dist/extract-element-css-D-ERlFXC.cjs +10 -0
  178. package/dist/extract-element-css-D1aWSxyg.js +10 -0
  179. package/dist/extract-element-css-D5rZpeek.js +10 -0
  180. package/dist/extract-element-css-DE-GktJ-.cjs +10 -0
  181. package/dist/extract-element-css-DGaQuxEj.js +10 -0
  182. package/dist/extract-element-css-DGf1_gmY.cjs +10 -0
  183. package/dist/extract-element-css-DHByDPFC.cjs +10 -0
  184. package/dist/extract-element-css-DMYDBqW4.js +10 -0
  185. package/dist/extract-element-css-DQhNHcHg.cjs +10 -0
  186. package/dist/extract-element-css-DRI296aF.js +10 -0
  187. package/dist/extract-element-css-DTyWMO7X.js +10 -0
  188. package/dist/extract-element-css-D_AtWyYd.cjs +10 -0
  189. package/dist/extract-element-css-DajcFN4D.cjs +10 -0
  190. package/dist/extract-element-css-DbsQg6dD.js +10 -0
  191. package/dist/extract-element-css-DeiBTDrG.js +10 -0
  192. package/dist/extract-element-css-Dg3hSOh_.cjs +10 -0
  193. package/dist/extract-element-css-Do-5VPcW.js +10 -0
  194. package/dist/extract-element-css-DoROI1Lu.js +10 -0
  195. package/dist/extract-element-css-DtPOE8Qf.js +10 -0
  196. package/dist/extract-element-css-DyHXp0kV.js +10 -0
  197. package/dist/extract-element-css-HQfFXyjl.cjs +10 -0
  198. package/dist/extract-element-css-JN4bPqiH.cjs +10 -0
  199. package/dist/extract-element-css-JmWO6AFd.cjs +10 -0
  200. package/dist/extract-element-css-KqQpDZ3u.js +10 -0
  201. package/dist/extract-element-css-LWV4qZnB.js +10 -0
  202. package/dist/extract-element-css-VQDyterf.cjs +10 -0
  203. package/dist/extract-element-css-X8oGGyC9.js +10 -0
  204. package/dist/extract-element-css-_52JSItY.cjs +10 -0
  205. package/dist/extract-element-css-_9FOk1X7.js +10 -0
  206. package/dist/extract-element-css-kWe0BrvE.cjs +10 -0
  207. package/dist/extract-element-css-xgQzkNfU.cjs +10 -0
  208. package/dist/extract-element-css-zpC79GoB.cjs +10 -0
  209. package/dist/freeze-updates-44ijEDa3.cjs +52 -0
  210. package/dist/freeze-updates-B-KM0P-S.js +55 -0
  211. package/dist/freeze-updates-B3BTWdin.js +52 -0
  212. package/dist/freeze-updates-B46IFLUc.js +52 -0
  213. package/dist/freeze-updates-B4Dd2NgX.cjs +55 -0
  214. package/dist/freeze-updates-B4sixfxL.cjs +55 -0
  215. package/dist/freeze-updates-B8XVmCbU.cjs +52 -0
  216. package/dist/freeze-updates-B9KiLr4J.js +53 -0
  217. package/dist/freeze-updates-BBXKN548.cjs +52 -0
  218. package/dist/freeze-updates-BCJY18RM.js +52 -0
  219. package/dist/freeze-updates-BFqQ7DfD.cjs +53 -0
  220. package/dist/freeze-updates-BIu5xw5I.cjs +55 -0
  221. package/dist/freeze-updates-BZyoCSfS.js +53 -0
  222. package/dist/freeze-updates-BgSzy4TP.cjs +52 -0
  223. package/dist/freeze-updates-Bh5uFj9M.cjs +53 -0
  224. package/dist/freeze-updates-Bl_wpv3s.js +53 -0
  225. package/dist/freeze-updates-BlxJUz-r.js +55 -0
  226. package/dist/freeze-updates-BzlaSiwx.js +53 -0
  227. package/dist/freeze-updates-C-n3vnIe.cjs +53 -0
  228. package/dist/freeze-updates-C19JTP7M.js +55 -0
  229. package/dist/freeze-updates-C2oMSGYa.js +55 -0
  230. package/dist/freeze-updates-C5e9EmRj.js +55 -0
  231. package/dist/freeze-updates-CAD_rBn-.cjs +52 -0
  232. package/dist/freeze-updates-CK3vDjxD.js +55 -0
  233. package/dist/freeze-updates-CPL37KUf.cjs +3145 -0
  234. package/dist/freeze-updates-CUfAvadN.js +52 -0
  235. package/dist/freeze-updates-CYI91QSS.js +52 -0
  236. package/dist/freeze-updates-CYLr9HLu.cjs +52 -0
  237. package/dist/freeze-updates-CcGZPbDa.cjs +53 -0
  238. package/dist/freeze-updates-CobOgm67.cjs +55 -0
  239. package/dist/freeze-updates-CqgugC0v.cjs +55 -0
  240. package/dist/freeze-updates-CvoDbgCn.cjs +55 -0
  241. package/dist/freeze-updates-CzNFqLh4.js +55 -0
  242. package/dist/freeze-updates-D-wqPzkS.cjs +53 -0
  243. package/dist/freeze-updates-D2K4dx91.js +55 -0
  244. package/dist/freeze-updates-DDJeC30f.cjs +55 -0
  245. package/dist/freeze-updates-DGd0kTS0.cjs +55 -0
  246. package/dist/freeze-updates-DHwYYvlF.js +52 -0
  247. package/dist/freeze-updates-DI2WrF4x.cjs +53 -0
  248. package/dist/freeze-updates-DISihwcW.cjs +55 -0
  249. package/dist/freeze-updates-DIXfS3oc.js +55 -0
  250. package/dist/freeze-updates-DJ_kd3MS.cjs +52 -0
  251. package/dist/freeze-updates-DQa7cAMD.js +52 -0
  252. package/dist/freeze-updates-DUhtP6Qh.cjs +53 -0
  253. package/dist/freeze-updates-DUrm6t8c.js +52 -0
  254. package/dist/freeze-updates-DVQXyNiy.js +52 -0
  255. package/dist/freeze-updates-DYnenNAx.js +53 -0
  256. package/dist/freeze-updates-D_k5kTsT.js +55 -0
  257. package/dist/freeze-updates-Daef1yLv.js +53 -0
  258. package/dist/freeze-updates-Dh6MIxrS.cjs +52 -0
  259. package/dist/freeze-updates-Diu7g9r6.cjs +52 -0
  260. package/dist/freeze-updates-DjDBr_oh.js +53 -0
  261. package/dist/freeze-updates-DkS4-mx9.cjs +52 -0
  262. package/dist/freeze-updates-DoeDby5W.js +52 -0
  263. package/dist/freeze-updates-Dp5H7855.js +53 -0
  264. package/dist/freeze-updates-DuFU4W3a.cjs +52 -0
  265. package/dist/freeze-updates-F_aGQXqR.js +55 -0
  266. package/dist/freeze-updates-HHHOlV6s.js +52 -0
  267. package/dist/freeze-updates-Iz-KAPxe.js +2755 -0
  268. package/dist/freeze-updates-JRtE2hMi.js +53 -0
  269. package/dist/freeze-updates-QRM0VlPw.cjs +52 -0
  270. package/dist/freeze-updates-RwvSZOO_.cjs +55 -0
  271. package/dist/freeze-updates-Tr7M7QVD.cjs +55 -0
  272. package/dist/freeze-updates-WLO3XKoj.cjs +53 -0
  273. package/dist/freeze-updates-YrXN1_2z.js +52 -0
  274. package/dist/freeze-updates-bnVMmz_x.cjs +53 -0
  275. package/dist/freeze-updates-dlxsMPrr.cjs +55 -0
  276. package/dist/freeze-updates-z2Ak9jr6.js +55 -0
  277. package/dist/index-5bXwDEQz.d.ts +446 -0
  278. package/dist/index-AOuLP5ui.d.cts +203 -0
  279. package/dist/index-B3INoNjJ.d.ts +461 -0
  280. package/dist/index-Beii_ZY2.d.ts +203 -0
  281. package/dist/index-BvBIePAo.d.cts +446 -0
  282. package/dist/index-C188F1-K.d.ts +460 -0
  283. package/dist/index-Cmlk2psk.d.cts +460 -0
  284. package/dist/index-CpD0mJy2.d.cts +461 -0
  285. package/dist/index-D4VTvmm1.d.cts +203 -0
  286. package/dist/index-DASKclJI.d.ts +203 -0
  287. package/dist/index-DZaWv0Sy.d.ts +461 -0
  288. package/dist/index-DxRpK6Tz.d.cts +461 -0
  289. package/dist/index-HrbjUEIv.d.ts +461 -0
  290. package/dist/index-iOOBO4Tu.d.cts +461 -0
  291. package/dist/index.cjs +1 -1
  292. package/dist/index.d.cts +2 -2
  293. package/dist/index.d.ts +2 -2
  294. package/dist/index.global.js +25 -19
  295. package/dist/index.iife.js +25 -19
  296. package/dist/index.js +1 -1
  297. package/dist/primitives.cjs +1 -1
  298. package/dist/primitives.d.cts +13 -2
  299. package/dist/primitives.d.ts +13 -2
  300. package/dist/primitives.js +1 -1
  301. package/dist/renderer-03E_Z-oG.cjs +9 -0
  302. package/dist/renderer-2FkGa8yQ.cjs +9 -0
  303. package/dist/renderer-2qf4XT0a.cjs +9 -0
  304. package/dist/renderer-4WLOXegj.js +9 -0
  305. package/dist/renderer-5OkvqZ27.cjs +9 -0
  306. package/dist/renderer-70hOclWm.js +9 -0
  307. package/dist/renderer-7PW4LWCI.js +9 -0
  308. package/dist/renderer-88pIB89V.cjs +9 -0
  309. package/dist/renderer-9QsCcfWA.cjs +9 -0
  310. package/dist/renderer-B0DLjOcW.js +9 -0
  311. package/dist/renderer-B28zz1-T.cjs +9 -0
  312. package/dist/renderer-B2kpCtoY.cjs +9 -0
  313. package/dist/renderer-BB0mKzDq.cjs +9 -0
  314. package/dist/renderer-BNYQfBKy.cjs +9 -0
  315. package/dist/renderer-BQCd2ezw.js +9 -0
  316. package/dist/renderer-BRyXuhLV.js +9 -0
  317. package/dist/renderer-BSjQmsCr.js +9 -0
  318. package/dist/renderer-BT6S4lrE.js +9 -0
  319. package/dist/renderer-BWb6GNsI.js +9 -0
  320. package/dist/renderer-Bc_LPRgB.js +9 -0
  321. package/dist/renderer-Bi3BGqK6.js +9 -0
  322. package/dist/renderer-Bo9Hj0Nz.cjs +9 -0
  323. package/dist/renderer-BrHbCsT-.cjs +9 -0
  324. package/dist/renderer-BrrTBbU_.cjs +9 -0
  325. package/dist/renderer-BtD4lYaA.cjs +9 -0
  326. package/dist/renderer-BwW5L228.cjs +9 -0
  327. package/dist/renderer-Bzq6OP1Q.cjs +9 -0
  328. package/dist/renderer-C60Irhis.cjs +9 -0
  329. package/dist/renderer-C667p9Ts.js +9 -0
  330. package/dist/renderer-CGDYcfpq.js +9 -0
  331. package/dist/renderer-CJs3DW7F.js +9 -0
  332. package/dist/renderer-CRtXJ6gz.js +9 -0
  333. package/dist/renderer-CSGre_uQ.js +9 -0
  334. package/dist/renderer-CU622nBs.cjs +9 -0
  335. package/dist/renderer-CZU0dUK9.js +9 -0
  336. package/dist/renderer-C_8ChDyN.js +9 -0
  337. package/dist/renderer-CaWdbJaJ.js +9 -0
  338. package/dist/renderer-CbIWDh9l.js +9 -0
  339. package/dist/renderer-Cbq6Rx1G.cjs +9 -0
  340. package/dist/renderer-CeCJd7_M.cjs +9 -0
  341. package/dist/renderer-ChrLxxjc.cjs +9 -0
  342. package/dist/renderer-CrOSekQx.cjs +9 -0
  343. package/dist/renderer-CrbJ1q93.cjs +9 -0
  344. package/dist/renderer-CwxBLDdk.js +9 -0
  345. package/dist/renderer-D2P_eRJ3.js +9 -0
  346. package/dist/renderer-D6bxtXXz.cjs +9 -0
  347. package/dist/renderer-D6oIEAce.cjs +9 -0
  348. package/dist/renderer-D6qViFpF.js +9 -0
  349. package/dist/renderer-D8fyDtUL.cjs +9 -0
  350. package/dist/renderer-DGXjcXzg.js +9 -0
  351. package/dist/renderer-DIQRqnHu.cjs +9 -0
  352. package/dist/renderer-DL6fAUQn.js +9 -0
  353. package/dist/renderer-DNQ9_mCu.js +3887 -0
  354. package/dist/renderer-DNWIs1VC.js +9 -0
  355. package/dist/renderer-DSjEGpz-.js +9 -0
  356. package/dist/renderer-DT7LZQtO.cjs +9 -0
  357. package/dist/renderer-DXeyOozP.js +9 -0
  358. package/dist/renderer-DdIChCSD.cjs +9 -0
  359. package/dist/renderer-DeWbPCuO.cjs +9 -0
  360. package/dist/renderer-Dlno_pdb.js +9 -0
  361. package/dist/renderer-DnYy5FOZ.js +9 -0
  362. package/dist/renderer-Dq7B2igO.js +9 -0
  363. package/dist/renderer-DtkrTfo1.cjs +9 -0
  364. package/dist/renderer-IibG__VV.js +9 -0
  365. package/dist/renderer-JmnYl4I6.js +9 -0
  366. package/dist/renderer-LNHnA-cT.cjs +3887 -0
  367. package/dist/renderer-Q0qVTIQc.js +9 -0
  368. package/dist/renderer-QW3s3A0S.cjs +9 -0
  369. package/dist/renderer-QpKM_dpy.js +9 -0
  370. package/dist/renderer-XmhoGb9V.cjs +9 -0
  371. package/dist/renderer-YUdjQ8nt.cjs +9 -0
  372. package/dist/renderer-_81FJC2J.js +9 -0
  373. package/dist/renderer-aqAvQN6V.cjs +9 -0
  374. package/dist/renderer-bnYZTPia.cjs +9 -0
  375. package/dist/renderer-kJC7KhNe.cjs +9 -0
  376. package/dist/renderer-nXRFY18V.js +9 -0
  377. package/dist/renderer-s5lBiYLe.js +9 -0
  378. package/dist/renderer-y9QnqihM.cjs +9 -0
  379. package/dist/state-7SBySxTA.cjs +9 -0
  380. package/dist/state-8yi9xrye.js +9 -0
  381. package/dist/state-9r5nglSb.js +9 -0
  382. package/dist/state-B0T1D-ks.cjs +9 -0
  383. package/dist/state-BA6QsS82.js +9 -0
  384. package/dist/state-BGtrXdJj.js +9 -0
  385. package/dist/state-BJlvi-2E.cjs +9 -0
  386. package/dist/state-BN964xZ5.js +9 -0
  387. package/dist/state-BO1NAkWD.js +9 -0
  388. package/dist/state-BO3AE8Fe.js +9 -0
  389. package/dist/state-BV9PmYfz.js +9 -0
  390. package/dist/state-BYF5b0D5.js +9 -0
  391. package/dist/state-Baa6Ci7k.js +9 -0
  392. package/dist/state-Bd2gljHi.js +9 -0
  393. package/dist/state-Bd6VTjeM.js +9 -0
  394. package/dist/state-BeBXGZmh.cjs +9 -0
  395. package/dist/state-BfN8pmY2.js +9 -0
  396. package/dist/state-Bpf5_85U.js +9 -0
  397. package/dist/state-BsfONYv7.cjs +9 -0
  398. package/dist/state-C-rvuJYD.cjs +9 -0
  399. package/dist/state-C0Ow0XmM.js +9 -0
  400. package/dist/state-C5Bj0Buz.js +9 -0
  401. package/dist/state-C6EfW8-M.js +9 -0
  402. package/dist/state-C6rrzEh-.cjs +9 -0
  403. package/dist/state-CEnDdOqw.cjs +9 -0
  404. package/dist/state-CGmKE82n.js +9 -0
  405. package/dist/state-CI0P3gEI.js +9 -0
  406. package/dist/state-CI2DgSGN.cjs +9 -0
  407. package/dist/state-CJLktzcx.cjs +9 -0
  408. package/dist/state-CNep2ElU.cjs +9 -0
  409. package/dist/state-CSGI31dx.js +9 -0
  410. package/dist/state-CUcDVMOr.js +1696 -0
  411. package/dist/state-CVzxiIHS.cjs +9 -0
  412. package/dist/state-C_MfICQQ.cjs +9 -0
  413. package/dist/state-CepA6OBG.cjs +9 -0
  414. package/dist/state-CfDNgfQC.cjs +9 -0
  415. package/dist/state-CfWNsT73.cjs +9 -0
  416. package/dist/state-Cl-Qsozk.cjs +9 -0
  417. package/dist/state-Cm5Lwn2E.js +9 -0
  418. package/dist/state-CvjZor_U.cjs +9 -0
  419. package/dist/state-CyD129tM.cjs +9 -0
  420. package/dist/state-CyUr2qMd.js +9 -0
  421. package/dist/state-D-fLHGyJ.js +9 -0
  422. package/dist/state-D0E4SXeX.js +9 -0
  423. package/dist/state-D2TlmfBW.cjs +9 -0
  424. package/dist/state-D6btATEI.js +9 -0
  425. package/dist/state-D9ZV8boi.cjs +9 -0
  426. package/dist/state-DCtMfI4R.cjs +9 -0
  427. package/dist/state-DGLq4GOX.js +9 -0
  428. package/dist/state-DJqo4o5A.js +9 -0
  429. package/dist/state-DMYmMd2O.cjs +9 -0
  430. package/dist/state-DUXEd2RT.cjs +9 -0
  431. package/dist/state-DZl9i9YY.js +9 -0
  432. package/dist/state-DcBwFGAn.js +9 -0
  433. package/dist/state-Dd1plgdI.cjs +9 -0
  434. package/dist/state-Dgh4g_LN.cjs +1293 -0
  435. package/dist/state-DiSiK2-w.cjs +9 -0
  436. package/dist/state-Dr92AOzO.js +9 -0
  437. package/dist/state-Dt428m3l.cjs +9 -0
  438. package/dist/state-DzPMjkFn.js +9 -0
  439. package/dist/state-LIGdfh87.cjs +9 -0
  440. package/dist/state-MC-BcccL.js +9 -0
  441. package/dist/state-P55CkQ4f.cjs +9 -0
  442. package/dist/state-Tb5KTyit.cjs +9 -0
  443. package/dist/state-_frBwcTV.cjs +9 -0
  444. package/dist/state-eM6WYht4.js +9 -0
  445. package/dist/state-nEfTr66e.cjs +9 -0
  446. package/dist/state-tAT5fWsb.cjs +9 -0
  447. package/dist/state-xjSIX0_u.js +9 -0
  448. package/dist/state-ze3D7XUZ.cjs +9 -0
  449. package/dist/styles.css +2 -2
  450. package/package.json +9 -8
@@ -0,0 +1,4569 @@
1
+ /**
2
+ * @license MIT
3
+ *
4
+ * Copyright (c) 2025 Aiden Bai
5
+ *
6
+ * This source code is licensed under the MIT license found in the
7
+ * LICENSE file in the root directory of this source tree.
8
+ */
9
+ import { A as createMemo, C as $TRACK, D as batch, F as getListener, L as on, M as createResource, N as createRoot, O as createComponent, P as createSignal, R as onCleanup, S as $PROXY, a as clampToRange, c as isKeyboardEventTriggeredByInput, g as render, h as memo, i as isMac, k as createEffect, l as isElementConnected, n as saveToolbarState, o as hasTextSelectionInInput, r as isEventFromOverlay, s as hasTextSelectionOnPage, t as loadToolbarState } from "./state-CUcDVMOr.js";
10
+ import { A as nativeRequestAnimationFrame, B as DRAG_SELECTION_COVERAGE_THRESHOLD, E as stripInternalAttributes, F as ARROW_KEYS, J as MODIFIER_KEYS, M as hideFromThirdParties, N as detectCspNonce, P as getTagName, R as DEFAULT_ACTION_ID, S as getNearestComponentName, T as resolveSource, U as FEEDBACK_DURATION_MS, X as NEXTJS_REVALIDATION_DELAY_MS, Y as MOUNT_ROOT_RECHECK_DELAY_MS, Z as OFFSCREEN_POSITION, _ as isRootElement, a as freezeAllAnimations, b as getElementContext, c as unfreezeGlobalAnimations, ct as ZOOM_DETECTION_THRESHOLD, d as getElementAtPosition, f as getElementsAtPoint, g as isValidGrabbableElement, h as clearVisibilityCache, i as unfreezePseudoStates, j as waitUntilNextFrame, k as nativeCancelAnimationFrame, l as openFile, lt as Z_INDEX_OVERLAY, m as suspendPointerEventsFreeze, n as logRecoverableError, o as freezeAnimations, ot as TOOLBAR_DEFAULT_POSITION_RATIO, p as resumePointerEventsFreeze, q as MAX_SESSION_STORAGE_SIZE_BYTES, r as freezePseudoStates, s as freezeGlobalAnimations, st as VERSION, t as freezeUpdates, u as clearElementPositionCache, v as checkIsNextProject, w as getStackContext, y as getComponentDisplayName } from "./freeze-updates-Iz-KAPxe.js";
11
+ import { n as extractElementCss, r as createElementSelector, t as disposeBaselineStyles } from "./extract-element-css-ClUN8rFQ.js";
12
+
13
+ //#region dist/styles.css?css-text
14
+ var styles_default = "/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root, :host {\n --font-sans: \"Geist\", ui-sans-serif, system-ui, sans-serif;\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n --color-black: #000;\n --color-white: #fff;\n --spacing: 0.25rem;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --radius-sm: 0.25rem;\n --ease-out: cubic-bezier(0, 0, 0.2, 1);\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);\n --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);\n --ease-badge-pop: cubic-bezier(0.34, 1.36, 0.64, 1);\n --ease-badge-close: cubic-bezier(0.4, 0, 0.2, 1);\n --ease-text-swap: ease-out;\n --animate-rg-badge-slide: rg-badge-slide 260ms cubic-bezier(0.22, 1, 0.36, 1);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-auto {\n pointer-events: auto;\n }\n .pointer-events-none {\n pointer-events: none;\n }\n .invisible {\n visibility: hidden;\n }\n .visible {\n visibility: visible;\n }\n .touch-hitbox {\n position: relative;\n &::before {\n content: \"\";\n position: absolute;\n display: block;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100%;\n height: 100%;\n min-height: 44px;\n min-width: 44px;\n }\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .static {\n position: static;\n }\n .-top-1 {\n top: calc(var(--spacing) * -1);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .-right-1 {\n right: calc(var(--spacing) * -1);\n }\n .left-0 {\n left: calc(var(--spacing) * 0);\n }\n .z-1 {\n z-index: 1;\n }\n .z-10 {\n z-index: 10;\n }\n .container {\n width: 100%;\n @media (width >= 40rem) {\n max-width: 40rem;\n }\n @media (width >= 48rem) {\n max-width: 48rem;\n }\n @media (width >= 64rem) {\n max-width: 64rem;\n }\n @media (width >= 80rem) {\n max-width: 80rem;\n }\n @media (width >= 96rem) {\n max-width: 96rem;\n }\n }\n .m-0 {\n margin: calc(var(--spacing) * 0);\n }\n .-mx-2 {\n margin-inline: calc(var(--spacing) * -2);\n }\n .-my-1\\.5 {\n margin-block: calc(var(--spacing) * -1.5);\n }\n .mt-0\\.5 {\n margin-top: calc(var(--spacing) * 0.5);\n }\n .mr-1\\.5 {\n margin-right: calc(var(--spacing) * 1.5);\n }\n .mb-1\\.5 {\n margin-bottom: calc(var(--spacing) * 1.5);\n }\n .-ml-\\[2px\\] {\n margin-left: calc(2px * -1);\n }\n .ml-1 {\n margin-left: calc(var(--spacing) * 1);\n }\n .ml-4 {\n margin-left: calc(var(--spacing) * 4);\n }\n .box-border {\n box-sizing: border-box;\n }\n .line-clamp-5 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 5;\n }\n .block {\n display: block;\n }\n .flex {\n display: flex;\n }\n .grid {\n display: grid;\n }\n .hidden {\n display: none;\n }\n .inline {\n display: inline;\n }\n .inline-flex {\n display: inline-flex;\n }\n .size-4 {\n width: calc(var(--spacing) * 4);\n height: calc(var(--spacing) * 4);\n }\n .size-\\[18px\\] {\n width: 18px;\n height: 18px;\n }\n .h-0 {\n height: calc(var(--spacing) * 0);\n }\n .h-2\\.5 {\n height: calc(var(--spacing) * 2.5);\n }\n .h-\\[17px\\] {\n height: 17px;\n }\n .h-fit {\n height: fit-content;\n }\n .h-full {\n height: 100%;\n }\n .max-h-\\[240px\\] {\n max-height: 240px;\n }\n .min-h-0 {\n min-height: calc(var(--spacing) * 0);\n }\n .min-h-4 {\n min-height: calc(var(--spacing) * 4);\n }\n .w-0 {\n width: calc(var(--spacing) * 0);\n }\n .w-\\[calc\\(100\\%\\+16px\\)\\] {\n width: calc(100% + 16px);\n }\n .w-auto {\n width: auto;\n }\n .w-fit {\n width: fit-content;\n }\n .w-full {\n width: 100%;\n }\n .max-w-\\[280px\\] {\n max-width: 280px;\n }\n .max-w-full {\n max-width: 100%;\n }\n .min-w-0 {\n min-width: calc(var(--spacing) * 0);\n }\n .min-w-2\\.5 {\n min-width: calc(var(--spacing) * 2.5);\n }\n .min-w-\\[100px\\] {\n min-width: 100px;\n }\n .min-w-\\[150px\\] {\n min-width: 150px;\n }\n .flex-1 {\n flex: 1;\n }\n .flex-shrink {\n flex-shrink: 1;\n }\n .shrink {\n flex-shrink: 1;\n }\n .shrink-0 {\n flex-shrink: 0;\n }\n .flex-grow {\n flex-grow: 1;\n }\n .origin-center {\n transform-origin: center;\n }\n .scale-75 {\n --tw-scale-x: 75%;\n --tw-scale-y: 75%;\n --tw-scale-z: 75%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .scale-100 {\n --tw-scale-x: 100%;\n --tw-scale-y: 100%;\n --tw-scale-z: 100%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .-rotate-90 {\n rotate: calc(90deg * -1);\n }\n .rotate-0 {\n rotate: 0deg;\n }\n .rotate-90 {\n rotate: 90deg;\n }\n .rotate-180 {\n rotate: 180deg;\n }\n .interactive-scale {\n transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);\n @media (hover: hover) and (pointer: fine) {\n &:hover {\n transform: scale(1.05);\n }\n }\n &:active {\n transform: scale(0.96);\n transition: transform 60ms cubic-bezier(0, 0, 0.2, 1);\n }\n }\n .press-scale {\n transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);\n &:active {\n transform: scale(0.97);\n transition: transform 60ms cubic-bezier(0, 0, 0.2, 1);\n }\n }\n .transform {\n transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n }\n .cursor-grab {\n cursor: grab;\n }\n .cursor-grabbing {\n cursor: grabbing;\n }\n .cursor-pointer {\n cursor: pointer;\n }\n .resize {\n resize: both;\n }\n .resize-none {\n resize: none;\n }\n .\\[scrollbar-width\\:thin\\] {\n scrollbar-width: thin;\n }\n .\\[scrollbar-color\\:transparent_transparent\\] {\n scrollbar-color: transparent transparent;\n }\n .grid-cols-\\[0fr\\] {\n grid-template-columns: 0fr;\n }\n .grid-cols-\\[1fr\\] {\n grid-template-columns: 1fr;\n }\n .grid-rows-\\[0fr\\] {\n grid-template-rows: 0fr;\n }\n .grid-rows-\\[1fr\\] {\n grid-template-rows: 1fr;\n }\n .flex-col {\n flex-direction: column;\n }\n .flex-wrap {\n flex-wrap: wrap;\n }\n .place-items-center {\n place-items: center;\n }\n .items-center {\n align-items: center;\n }\n .items-end {\n align-items: flex-end;\n }\n .items-start {\n align-items: flex-start;\n }\n .justify-between {\n justify-content: space-between;\n }\n .justify-center {\n justify-content: center;\n }\n .justify-end {\n justify-content: flex-end;\n }\n .gap-0\\.5 {\n gap: calc(var(--spacing) * 0.5);\n }\n .gap-1 {\n gap: calc(var(--spacing) * 1);\n }\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n .gap-\\[5px\\] {\n gap: 5px;\n }\n .self-stretch {\n align-self: stretch;\n }\n .truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .overflow-hidden {\n overflow: hidden;\n }\n .overflow-visible {\n overflow: visible;\n }\n .overflow-x-hidden {\n overflow-x: hidden;\n }\n .overflow-y-auto {\n overflow-y: auto;\n }\n .rounded-\\[10px\\] {\n border-radius: 10px;\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-sm {\n border-radius: var(--radius-sm);\n }\n .rounded-t-\\[10px\\] {\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n }\n .rounded-t-none {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n .rounded-l-\\[10px\\] {\n border-top-left-radius: 10px;\n border-bottom-left-radius: 10px;\n }\n .rounded-l-none {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n .rounded-r-\\[10px\\] {\n border-top-right-radius: 10px;\n border-bottom-right-radius: 10px;\n }\n .rounded-r-none {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n .rounded-b-\\[6px\\] {\n border-bottom-right-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n .rounded-b-\\[10px\\] {\n border-bottom-right-radius: 10px;\n border-bottom-left-radius: 10px;\n }\n .rounded-b-none {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .\\[border-width\\:0\\.5px\\] {\n border-width: 0.5px;\n }\n .\\[border-top-width\\:0\\.5px\\] {\n border-top-width: 0.5px;\n }\n .border-none {\n --tw-border-style: none;\n border-style: none;\n }\n .border-solid {\n --tw-border-style: solid;\n border-style: solid;\n }\n .border-\\[\\#B3B3B3\\] {\n border-color: #B3B3B3;\n }\n .border-t-\\[\\#D9D9D9\\] {\n border-top-color: #D9D9D9;\n }\n .bg-\\[\\#FEF2F2\\] {\n background-color: #FEF2F2;\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-black\\/5 {\n background-color: color-mix(in srgb, #000 5%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 5%, transparent);\n }\n }\n .bg-transparent {\n background-color: transparent;\n }\n .bg-white {\n background-color: var(--color-white);\n }\n .p-0 {\n padding: calc(var(--spacing) * 0);\n }\n .px-0\\.5 {\n padding-inline: calc(var(--spacing) * 0.5);\n }\n .px-0\\.25 {\n padding-inline: calc(var(--spacing) * 0.25);\n }\n .px-1\\.5 {\n padding-inline: calc(var(--spacing) * 1.5);\n }\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n .px-\\[3px\\] {\n padding-inline: 3px;\n }\n .py-0\\.25 {\n padding-block: calc(var(--spacing) * 0.25);\n }\n .py-1 {\n padding-block: calc(var(--spacing) * 1);\n }\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n .py-px {\n padding-block: 1px;\n }\n .pt-1\\.5 {\n padding-top: calc(var(--spacing) * 1.5);\n }\n .pb-1 {\n padding-bottom: calc(var(--spacing) * 1);\n }\n .text-left {\n text-align: left;\n }\n .font-sans {\n font-family: var(--font-sans);\n }\n .text-\\[8px\\] {\n font-size: 8px;\n }\n .text-\\[10px\\] {\n font-size: 10px;\n }\n .text-\\[11px\\] {\n font-size: 11px;\n }\n .text-\\[12px\\] {\n font-size: 12px;\n }\n .text-\\[13px\\] {\n font-size: 13px;\n }\n .leading-3 {\n --tw-leading: calc(var(--spacing) * 3);\n line-height: calc(var(--spacing) * 3);\n }\n .leading-3\\.5 {\n --tw-leading: calc(var(--spacing) * 3.5);\n line-height: calc(var(--spacing) * 3.5);\n }\n .leading-4 {\n --tw-leading: calc(var(--spacing) * 4);\n line-height: calc(var(--spacing) * 4);\n }\n .leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .wrap-break-word {\n overflow-wrap: break-word;\n }\n .text-ellipsis {\n text-overflow: ellipsis;\n }\n .whitespace-nowrap {\n white-space: nowrap;\n }\n .text-\\[\\#71717a\\] {\n color: #71717a;\n }\n .text-\\[\\#B3B3B3\\] {\n color: #B3B3B3;\n }\n .text-\\[\\#B91C1C\\] {\n color: #B91C1C;\n }\n .text-\\[\\#B91C1C\\]\\/50 {\n color: color-mix(in oklab, #B91C1C 50%, transparent);\n }\n .text-black {\n color: var(--color-black);\n }\n .text-black\\/25 {\n color: color-mix(in srgb, #000 25%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-black) 25%, transparent);\n }\n }\n .text-black\\/30 {\n color: color-mix(in srgb, #000 30%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-black) 30%, transparent);\n }\n }\n .text-black\\/40 {\n color: color-mix(in srgb, #000 40%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-black) 40%, transparent);\n }\n }\n .text-black\\/50 {\n color: color-mix(in srgb, #000 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-black) 50%, transparent);\n }\n }\n .text-black\\/60 {\n color: color-mix(in srgb, #000 60%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-black) 60%, transparent);\n }\n }\n .text-black\\/70 {\n color: color-mix(in srgb, #000 70%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-black) 70%, transparent);\n }\n }\n .text-black\\/85 {\n color: color-mix(in srgb, #000 85%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-black) 85%, transparent);\n }\n }\n .text-white {\n color: var(--color-white);\n }\n .tabular-nums {\n --tw-numeric-spacing: tabular-nums;\n font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);\n }\n .antialiased {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n .opacity-0 {\n opacity: 0%;\n }\n .opacity-40 {\n opacity: 40%;\n }\n .opacity-100 {\n opacity: 100%;\n }\n .shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n .blur {\n --tw-blur: blur(8px);\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .filter {\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .filter-\\[drop-shadow\\(0px_1px_2px_\\#51515133\\)\\] {\n filter: drop-shadow(0px 1px 2px #51515133);\n }\n .filter-\\[drop-shadow\\(0px_1px_2px_\\#51515140\\)\\] {\n filter: drop-shadow(0px 1px 2px #51515140);\n }\n .backdrop-filter {\n -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n }\n .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-\\[grid-template-columns\\,opacity\\] {\n transition-property: grid-template-columns,opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-\\[grid-template-columns\\] {\n transition-property: grid-template-columns;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-\\[grid-template-rows\\,opacity\\] {\n transition-property: grid-template-rows,opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-\\[grid-template-rows\\] {\n transition-property: grid-template-rows;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-\\[opacity\\,transform\\,margin\\,width\\] {\n transition-property: opacity,transform,margin,width;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-\\[opacity\\,transform\\] {\n transition-property: opacity,transform;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-\\[padding\\,border-radius\\,transform\\] {\n transition-property: padding,border-radius,transform;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-\\[top\\,left\\,width\\,height\\,opacity\\] {\n transition-property: top,left,width,height,opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-\\[transform\\,opacity\\,filter\\] {\n transition-property: transform,opacity,filter;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-\\[transform\\,opacity\\] {\n transition-property: transform,opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-transform {\n transition-property: transform, translate, scale, rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .delay-\\[80ms\\] {\n transition-delay: 80ms;\n }\n .duration-60 {\n --tw-duration: 60ms;\n transition-duration: 60ms;\n }\n .duration-75 {\n --tw-duration: 75ms;\n transition-duration: 75ms;\n }\n .duration-100 {\n --tw-duration: 100ms;\n transition-duration: 100ms;\n }\n .duration-120 {\n --tw-duration: 120ms;\n transition-duration: 120ms;\n }\n .duration-140 {\n --tw-duration: 140ms;\n transition-duration: 140ms;\n }\n .duration-150 {\n --tw-duration: 150ms;\n transition-duration: 150ms;\n }\n .duration-180 {\n --tw-duration: 180ms;\n transition-duration: 180ms;\n }\n .duration-200 {\n --tw-duration: 200ms;\n transition-duration: 200ms;\n }\n .duration-220 {\n --tw-duration: 220ms;\n transition-duration: 220ms;\n }\n .duration-300 {\n --tw-duration: 300ms;\n transition-duration: 300ms;\n }\n .duration-400 {\n --tw-duration: 400ms;\n transition-duration: 400ms;\n }\n .\\[transition-duration\\:500ms\\,400ms\\,500ms\\] {\n transition-duration: 500ms,400ms,500ms;\n }\n .ease-\\[cubic-bezier\\(0\\,0\\,0\\.2\\,1\\)\\] {\n --tw-ease: cubic-bezier(0,0,0.2,1);\n transition-timing-function: cubic-bezier(0,0,0.2,1);\n }\n .ease-badge-pop {\n --tw-ease: var(--ease-badge-pop);\n transition-timing-function: var(--ease-badge-pop);\n }\n .ease-drawer {\n --tw-ease: var(--ease-drawer);\n transition-timing-function: var(--ease-drawer);\n }\n .ease-out {\n --tw-ease: var(--ease-out);\n transition-timing-function: var(--ease-out);\n }\n .ease-spring {\n --tw-ease: var(--ease-spring);\n transition-timing-function: var(--ease-spring);\n }\n .ease-text-swap {\n --tw-ease: var(--ease-text-swap);\n transition-timing-function: var(--ease-text-swap);\n }\n .will-change-\\[opacity\\,transform\\] {\n will-change: opacity,transform;\n }\n .will-change-\\[transform\\,opacity\\,filter\\] {\n will-change: transform,opacity,filter;\n }\n .will-change-transform {\n will-change: transform;\n }\n .contain-layout {\n --tw-contain-layout: layout;\n contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,);\n }\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n .select-none {\n -webkit-user-select: none;\n user-select: none;\n }\n .\\[corner-shape\\:superellipse\\(1\\.25\\)\\] {\n corner-shape: superellipse(1.25);\n }\n .\\[font-synthesis\\:none\\] {\n font-synthesis: none;\n }\n .\\[grid-area\\:1\\/1\\] {\n grid-area: 1/1;\n }\n .group-data-\\[open\\=false\\]\\/badge\\:scale-0 {\n &:is(:where(.group\\/badge)[data-open=\"false\"] *) {\n --tw-scale-x: 0%;\n --tw-scale-y: 0%;\n --tw-scale-z: 0%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n }\n .group-data-\\[open\\=false\\]\\/badge\\:opacity-0 {\n &:is(:where(.group\\/badge)[data-open=\"false\"] *) {\n opacity: 0%;\n }\n }\n .group-data-\\[open\\=false\\]\\/badge\\:blur-\\[2px\\] {\n &:is(:where(.group\\/badge)[data-open=\"false\"] *) {\n --tw-blur: blur(2px);\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n }\n .group-data-\\[open\\=false\\]\\/badge\\:\\[transition-duration\\:180ms\\,180ms\\,180ms\\] {\n &:is(:where(.group\\/badge)[data-open=\"false\"] *) {\n transition-duration: 180ms,180ms,180ms;\n }\n }\n .group-data-\\[open\\=false\\]\\/badge\\:ease-badge-close {\n &:is(:where(.group\\/badge)[data-open=\"false\"] *) {\n --tw-ease: var(--ease-badge-close);\n transition-timing-function: var(--ease-badge-close);\n }\n }\n .group-data-\\[state\\=a\\]\\/badge\\:translate-y-0 {\n &:is(:where(.group\\/badge)[data-state=\"a\"] *) {\n --tw-translate-y: calc(var(--spacing) * 0);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n .group-data-\\[state\\=a\\]\\/badge\\:translate-y-2 {\n &:is(:where(.group\\/badge)[data-state=\"a\"] *) {\n --tw-translate-y: calc(var(--spacing) * 2);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n .group-data-\\[state\\=a\\]\\/badge\\:opacity-0 {\n &:is(:where(.group\\/badge)[data-state=\"a\"] *) {\n opacity: 0%;\n }\n }\n .group-data-\\[state\\=a\\]\\/badge\\:opacity-100 {\n &:is(:where(.group\\/badge)[data-state=\"a\"] *) {\n opacity: 100%;\n }\n }\n .group-data-\\[state\\=a\\]\\/badge\\:blur-\\[2px\\] {\n &:is(:where(.group\\/badge)[data-state=\"a\"] *) {\n --tw-blur: blur(2px);\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n }\n .group-data-\\[state\\=b\\]\\/badge\\:-translate-y-2 {\n &:is(:where(.group\\/badge)[data-state=\"b\"] *) {\n --tw-translate-y: calc(var(--spacing) * -2);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n .group-data-\\[state\\=b\\]\\/badge\\:translate-y-0 {\n &:is(:where(.group\\/badge)[data-state=\"b\"] *) {\n --tw-translate-y: calc(var(--spacing) * 0);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n .group-data-\\[state\\=b\\]\\/badge\\:opacity-0 {\n &:is(:where(.group\\/badge)[data-state=\"b\"] *) {\n opacity: 0%;\n }\n }\n .group-data-\\[state\\=b\\]\\/badge\\:opacity-100 {\n &:is(:where(.group\\/badge)[data-state=\"b\"] *) {\n opacity: 100%;\n }\n }\n .group-data-\\[state\\=b\\]\\/badge\\:blur-\\[2px\\] {\n &:is(:where(.group\\/badge)[data-state=\"b\"] *) {\n --tw-blur: blur(2px);\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n }\n .before\\:\\!min-h-full {\n &::before {\n content: var(--tw-content);\n min-height: 100% !important;\n }\n }\n .before\\:\\!min-w-full {\n &::before {\n content: var(--tw-content);\n min-width: 100% !important;\n }\n }\n .hover\\:\\[scrollbar-color\\:rgba\\(0\\,0\\,0\\,0\\.15\\)_transparent\\] {\n &:hover {\n @media (hover: hover) {\n scrollbar-color: rgba(0,0,0,0.15) transparent;\n }\n }\n }\n .hover\\:bg-\\[\\#F5F5F5\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #F5F5F5;\n }\n }\n }\n .hover\\:bg-\\[\\#FEE2E2\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #FEE2E2;\n }\n }\n }\n .hover\\:bg-black\\/10 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, #000 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 10%, transparent);\n }\n }\n }\n }\n .hover\\:text-black {\n &:hover {\n @media (hover: hover) {\n color: var(--color-black);\n }\n }\n }\n .hover\\:opacity-100 {\n &:hover {\n @media (hover: hover) {\n opacity: 100%;\n }\n }\n }\n .disabled\\:cursor-default {\n &:disabled {\n cursor: default;\n }\n }\n .disabled\\:opacity-40 {\n &:disabled {\n opacity: 40%;\n }\n }\n .data-\\[open\\=true\\]\\:animate-rg-badge-slide {\n &[data-open=\"true\"] {\n animation: var(--animate-rg-badge-slide);\n }\n }\n}\n:host {\n all: initial;\n direction: ltr;\n}\n@keyframes rg-badge-slide {\n from {\n transform: translate(-8.2px, 12.4px);\n }\n to {\n transform: translate(0, 0);\n }\n}\n@media (prefers-reduced-motion: reduce) {\n [data-react-grab-unread-indicator], [data-react-grab-unread-indicator] * {\n animation: none !important;\n transition: none !important;\n }\n}\n@keyframes shake {\n 0%, 100% {\n transform: translateX(0);\n }\n 15% {\n transform: translateX(-3px);\n }\n 30% {\n transform: translateX(3px);\n }\n 45% {\n transform: translateX(-3px);\n }\n 60% {\n transform: translateX(3px);\n }\n 75% {\n transform: translateX(-2px);\n }\n 90% {\n transform: translateX(2px);\n }\n}\n@keyframes success-pop {\n from {\n transform: scale(0.85);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n@keyframes icon-loader-spin {\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n 100% {\n opacity: 0.2;\n }\n}\n.icon-loader-bar {\n animation: icon-loader-spin 0.5s linear infinite;\n}\n@keyframes shimmer {\n 0% {\n background-position: 200% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n}\n.shimmer-text {\n background: linear-gradient( 90deg, #71717a 0%, #a1a1aa 25%, #71717a 50%, #a1a1aa 75%, #71717a 100% );\n background-size: 200% 100%;\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n animation: shimmer 2.5s linear infinite;\n}\n@keyframes clock-flash {\n 0% {\n transform: scale(1);\n }\n 25% {\n transform: scale(1.2);\n }\n 50% {\n transform: scale(0.92);\n }\n 75% {\n transform: scale(1.05);\n }\n 100% {\n transform: scale(1);\n }\n}\n.animate-clock-flash {\n animation: clock-flash 400ms ease-out;\n will-change: transform;\n}\n.animate-shake {\n animation: shake 0.3s ease-out;\n will-change: transform;\n}\n.animate-success-pop {\n animation: success-pop 350ms cubic-bezier(0.34, 1.56, 0.64, 1) both;\n will-change: transform, opacity;\n}\n@supports (-webkit-touch-callout: none) {\n textarea[data-react-grab-input] {\n font-size: 16px;\n }\n}\n@property --tw-scale-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-rotate-x {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-rotate-y {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-rotate-z {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-skew-x {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-skew-y {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-leading {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ordinal {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-slashed-zero {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-numeric-figure {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-numeric-spacing {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-numeric-fraction {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-inset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-offset-width {\n syntax: \"<length>\";\n inherits: false;\n initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n syntax: \"*\";\n inherits: false;\n initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-blur {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-brightness {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-contrast {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-grayscale {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-hue-rotate {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-invert {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-opacity {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-saturate {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-sepia {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-drop-shadow {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-drop-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-drop-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-drop-shadow-size {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-blur {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-brightness {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-contrast {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-grayscale {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-hue-rotate {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-invert {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-opacity {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-saturate {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-sepia {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-duration {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ease {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-contain-size {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-contain-layout {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-contain-paint {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-contain-style {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-content {\n syntax: \"*\";\n initial-value: \"\";\n inherits: false;\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *, ::before, ::after, ::backdrop {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-border-style: solid;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-ordinal: initial;\n --tw-slashed-zero: initial;\n --tw-numeric-figure: initial;\n --tw-numeric-spacing: initial;\n --tw-numeric-fraction: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-backdrop-blur: initial;\n --tw-backdrop-brightness: initial;\n --tw-backdrop-contrast: initial;\n --tw-backdrop-grayscale: initial;\n --tw-backdrop-hue-rotate: initial;\n --tw-backdrop-invert: initial;\n --tw-backdrop-opacity: initial;\n --tw-backdrop-saturate: initial;\n --tw-backdrop-sepia: initial;\n --tw-duration: initial;\n --tw-ease: initial;\n --tw-contain-size: initial;\n --tw-contain-layout: initial;\n --tw-contain-paint: initial;\n --tw-contain-style: initial;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-content: \"\";\n }\n }\n}\n";
15
+
16
+ //#endregion
17
+ //#region ../../node_modules/.pnpm/solid-js@1.9.12/node_modules/solid-js/store/dist/store.js
18
+ const $RAW = Symbol("store-raw"), $NODE = Symbol("store-node"), $HAS = Symbol("store-has"), $SELF = Symbol("store-self");
19
+ function wrap$1(value) {
20
+ let p = value[$PROXY];
21
+ if (!p) {
22
+ Object.defineProperty(value, $PROXY, { value: p = new Proxy(value, proxyTraps$1) });
23
+ if (!Array.isArray(value)) {
24
+ const keys = Object.keys(value), desc = Object.getOwnPropertyDescriptors(value);
25
+ for (let i = 0, l = keys.length; i < l; i++) {
26
+ const prop = keys[i];
27
+ if (desc[prop].get) Object.defineProperty(value, prop, {
28
+ enumerable: desc[prop].enumerable,
29
+ get: desc[prop].get.bind(p)
30
+ });
31
+ }
32
+ }
33
+ }
34
+ return p;
35
+ }
36
+ function isWrappable(obj) {
37
+ let proto;
38
+ return obj != null && typeof obj === "object" && (obj[$PROXY] || !(proto = Object.getPrototypeOf(obj)) || proto === Object.prototype || Array.isArray(obj));
39
+ }
40
+ function unwrap(item, set = /* @__PURE__ */ new Set()) {
41
+ let result, unwrapped, v, prop;
42
+ if (result = item != null && item[$RAW]) return result;
43
+ if (!isWrappable(item) || set.has(item)) return item;
44
+ if (Array.isArray(item)) {
45
+ if (Object.isFrozen(item)) item = item.slice(0);
46
+ else set.add(item);
47
+ for (let i = 0, l = item.length; i < l; i++) {
48
+ v = item[i];
49
+ if ((unwrapped = unwrap(v, set)) !== v) item[i] = unwrapped;
50
+ }
51
+ } else {
52
+ if (Object.isFrozen(item)) item = Object.assign({}, item);
53
+ else set.add(item);
54
+ const keys = Object.keys(item), desc = Object.getOwnPropertyDescriptors(item);
55
+ for (let i = 0, l = keys.length; i < l; i++) {
56
+ prop = keys[i];
57
+ if (desc[prop].get) continue;
58
+ v = item[prop];
59
+ if ((unwrapped = unwrap(v, set)) !== v) item[prop] = unwrapped;
60
+ }
61
+ }
62
+ return item;
63
+ }
64
+ function getNodes(target, symbol) {
65
+ let nodes = target[symbol];
66
+ if (!nodes) Object.defineProperty(target, symbol, { value: nodes = Object.create(null) });
67
+ return nodes;
68
+ }
69
+ function getNode(nodes, property, value) {
70
+ if (nodes[property]) return nodes[property];
71
+ const [s, set] = createSignal(value, {
72
+ equals: false,
73
+ internal: true
74
+ });
75
+ s.$ = set;
76
+ return nodes[property] = s;
77
+ }
78
+ function proxyDescriptor$1(target, property) {
79
+ const desc = Reflect.getOwnPropertyDescriptor(target, property);
80
+ if (!desc || desc.get || !desc.configurable || property === $PROXY || property === $NODE) return desc;
81
+ delete desc.value;
82
+ delete desc.writable;
83
+ desc.get = () => target[$PROXY][property];
84
+ return desc;
85
+ }
86
+ function trackSelf(target) {
87
+ getListener() && getNode(getNodes(target, $NODE), $SELF)();
88
+ }
89
+ function ownKeys(target) {
90
+ trackSelf(target);
91
+ return Reflect.ownKeys(target);
92
+ }
93
+ const proxyTraps$1 = {
94
+ get(target, property, receiver) {
95
+ if (property === $RAW) return target;
96
+ if (property === $PROXY) return receiver;
97
+ if (property === $TRACK) {
98
+ trackSelf(target);
99
+ return receiver;
100
+ }
101
+ const nodes = getNodes(target, $NODE);
102
+ const tracked = nodes[property];
103
+ let value = tracked ? tracked() : target[property];
104
+ if (property === $NODE || property === $HAS || property === "__proto__") return value;
105
+ if (!tracked) {
106
+ const desc = Object.getOwnPropertyDescriptor(target, property);
107
+ if (getListener() && (typeof value !== "function" || target.hasOwnProperty(property)) && !(desc && desc.get)) value = getNode(nodes, property, value)();
108
+ }
109
+ return isWrappable(value) ? wrap$1(value) : value;
110
+ },
111
+ has(target, property) {
112
+ if (property === $RAW || property === $PROXY || property === $TRACK || property === $NODE || property === $HAS || property === "__proto__") return true;
113
+ getListener() && getNode(getNodes(target, $HAS), property)();
114
+ return property in target;
115
+ },
116
+ set() {
117
+ return true;
118
+ },
119
+ deleteProperty() {
120
+ return true;
121
+ },
122
+ ownKeys,
123
+ getOwnPropertyDescriptor: proxyDescriptor$1
124
+ };
125
+ function setProperty(state, property, value, deleting = false) {
126
+ if (!deleting && state[property] === value) return;
127
+ const prev = state[property], len = state.length;
128
+ if (value === void 0) {
129
+ delete state[property];
130
+ if (state[$HAS] && state[$HAS][property] && prev !== void 0) state[$HAS][property].$();
131
+ } else {
132
+ state[property] = value;
133
+ if (state[$HAS] && state[$HAS][property] && prev === void 0) state[$HAS][property].$();
134
+ }
135
+ let nodes = getNodes(state, $NODE), node;
136
+ if (node = getNode(nodes, property, prev)) node.$(() => value);
137
+ if (Array.isArray(state) && state.length !== len) {
138
+ for (let i = state.length; i < len; i++) (node = nodes[i]) && node.$();
139
+ (node = getNode(nodes, "length", len)) && node.$(state.length);
140
+ }
141
+ (node = nodes[$SELF]) && node.$();
142
+ }
143
+ function mergeStoreNode(state, value) {
144
+ const keys = Object.keys(value);
145
+ for (let i = 0; i < keys.length; i += 1) {
146
+ const key = keys[i];
147
+ setProperty(state, key, value[key]);
148
+ }
149
+ }
150
+ function updateArray(current, next) {
151
+ if (typeof next === "function") next = next(current);
152
+ next = unwrap(next);
153
+ if (Array.isArray(next)) {
154
+ if (current === next) return;
155
+ let i = 0, len = next.length;
156
+ for (; i < len; i++) {
157
+ const value = next[i];
158
+ if (current[i] !== value) setProperty(current, i, value);
159
+ }
160
+ setProperty(current, "length", len);
161
+ } else mergeStoreNode(current, next);
162
+ }
163
+ function updatePath(current, path, traversed = []) {
164
+ let part, prev = current;
165
+ if (path.length > 1) {
166
+ part = path.shift();
167
+ const partType = typeof part, isArray = Array.isArray(current);
168
+ if (Array.isArray(part)) {
169
+ for (let i = 0; i < part.length; i++) updatePath(current, [part[i]].concat(path), traversed);
170
+ return;
171
+ } else if (isArray && partType === "function") {
172
+ for (let i = 0; i < current.length; i++) if (part(current[i], i)) updatePath(current, [i].concat(path), traversed);
173
+ return;
174
+ } else if (isArray && partType === "object") {
175
+ const { from = 0, to = current.length - 1, by = 1 } = part;
176
+ for (let i = from; i <= to; i += by) updatePath(current, [i].concat(path), traversed);
177
+ return;
178
+ } else if (path.length > 1) {
179
+ updatePath(current[part], path, [part].concat(traversed));
180
+ return;
181
+ }
182
+ prev = current[part];
183
+ traversed = [part].concat(traversed);
184
+ }
185
+ let value = path[0];
186
+ if (typeof value === "function") {
187
+ value = value(prev, traversed);
188
+ if (value === prev) return;
189
+ }
190
+ if (part === void 0 && value == void 0) return;
191
+ value = unwrap(value);
192
+ if (part === void 0 || isWrappable(prev) && isWrappable(value) && !Array.isArray(value)) mergeStoreNode(prev, value);
193
+ else setProperty(current, part, value);
194
+ }
195
+ function createStore(...[store, options]) {
196
+ const unwrappedStore = unwrap(store || {});
197
+ const isArray = Array.isArray(unwrappedStore);
198
+ const wrappedStore = wrap$1(unwrappedStore);
199
+ function setStore(...args) {
200
+ batch(() => {
201
+ isArray && args.length === 1 ? updateArray(unwrappedStore, args[0]) : updatePath(unwrappedStore, args);
202
+ });
203
+ }
204
+ return [wrappedStore, setStore];
205
+ }
206
+ const producers = /* @__PURE__ */ new WeakMap();
207
+ const setterTraps = {
208
+ get(target, property) {
209
+ if (property === $RAW) return target;
210
+ const value = target[property];
211
+ let proxy;
212
+ return isWrappable(value) ? producers.get(value) || (producers.set(value, proxy = new Proxy(value, setterTraps)), proxy) : value;
213
+ },
214
+ set(target, property, value) {
215
+ setProperty(target, property, unwrap(value));
216
+ return true;
217
+ },
218
+ deleteProperty(target, property) {
219
+ setProperty(target, property, void 0, true);
220
+ return true;
221
+ }
222
+ };
223
+ function produce(fn) {
224
+ return (state) => {
225
+ if (isWrappable(state)) {
226
+ let proxy;
227
+ if (!(proxy = producers.get(state))) producers.set(state, proxy = new Proxy(state, setterTraps));
228
+ fn(proxy);
229
+ }
230
+ return state;
231
+ };
232
+ }
233
+
234
+ //#endregion
235
+ //#region src/utils/strip-translate-from-transform.ts
236
+ const isValidNumber = (value) => typeof value === "number" && !Number.isNaN(value) && Number.isFinite(value);
237
+ const parseMatrixValue = (value) => {
238
+ const trimmedValue = value.trim();
239
+ if (!trimmedValue) return null;
240
+ const parsedValue = parseFloat(trimmedValue);
241
+ return isValidNumber(parsedValue) ? parsedValue : null;
242
+ };
243
+ const parseMatrixValues = (valuesString, expectedLength) => {
244
+ const rawValues = valuesString.split(",");
245
+ if (rawValues.length !== expectedLength) return null;
246
+ const parsedValues = [];
247
+ for (const rawValue of rawValues) {
248
+ const parsedValue = parseMatrixValue(rawValue);
249
+ if (parsedValue === null) return null;
250
+ parsedValues.push(parsedValue);
251
+ }
252
+ return parsedValues;
253
+ };
254
+ const isIdentityMatrix2d = (a, b, c, d) => a === 1 && b === 0 && c === 0 && d === 1;
255
+ const isIdentityMatrix3d = (values) => values[0] === 1 && values[1] === 0 && values[2] === 0 && values[3] === 0 && values[4] === 0 && values[5] === 1 && values[6] === 0 && values[7] === 0 && values[8] === 0 && values[9] === 0 && values[10] === 1 && values[11] === 0 && values[15] === 1;
256
+ const stripTranslateFromTransformString = (transform) => {
257
+ if (!transform || transform === "none") return "none";
258
+ if (transform.startsWith("matrix")) if (transform.startsWith("matrix3d(")) {
259
+ const start = 9;
260
+ const end = transform.length - 1;
261
+ const values = parseMatrixValues(transform.slice(start, end), 16);
262
+ if (values) {
263
+ values[12] = 0;
264
+ values[13] = 0;
265
+ values[14] = 0;
266
+ if (isIdentityMatrix3d(values)) return "none";
267
+ return `matrix3d(${values[0]}, ${values[1]}, ${values[2]}, ${values[3]}, ${values[4]}, ${values[5]}, ${values[6]}, ${values[7]}, ${values[8]}, ${values[9]}, ${values[10]}, ${values[11]}, 0, 0, 0, ${values[15]})`;
268
+ }
269
+ } else {
270
+ const start = 7;
271
+ const end = transform.length - 1;
272
+ const values = parseMatrixValues(transform.slice(start, end), 6);
273
+ if (values) {
274
+ const scaleX = values[0];
275
+ const skewY = values[1];
276
+ const skewX = values[2];
277
+ const scaleY = values[3];
278
+ if (isIdentityMatrix2d(scaleX, skewY, skewX, scaleY)) return "none";
279
+ return `matrix(${scaleX}, ${skewY}, ${skewX}, ${scaleY}, 0, 0)`;
280
+ }
281
+ }
282
+ return "none";
283
+ };
284
+ const stripTranslateFromMatrix = (matrix) => {
285
+ if (matrix.isIdentity) return "none";
286
+ if (matrix.is2D) {
287
+ if (isIdentityMatrix2d(matrix.a, matrix.b, matrix.c, matrix.d)) return "none";
288
+ return `matrix(${matrix.a}, ${matrix.b}, ${matrix.c}, ${matrix.d}, 0, 0)`;
289
+ }
290
+ if (matrix.m11 === 1 && matrix.m12 === 0 && matrix.m13 === 0 && matrix.m14 === 0 && matrix.m21 === 0 && matrix.m22 === 1 && matrix.m23 === 0 && matrix.m24 === 0 && matrix.m31 === 0 && matrix.m32 === 0 && matrix.m33 === 1 && matrix.m34 === 0 && matrix.m44 === 1) return "none";
291
+ return `matrix3d(${matrix.m11}, ${matrix.m12}, ${matrix.m13}, ${matrix.m14}, ${matrix.m21}, ${matrix.m22}, ${matrix.m23}, ${matrix.m24}, ${matrix.m31}, ${matrix.m32}, ${matrix.m33}, ${matrix.m34}, 0, 0, 0, ${matrix.m44})`;
292
+ };
293
+
294
+ //#endregion
295
+ //#region src/utils/create-element-bounds.ts
296
+ let boundsCache = /* @__PURE__ */ new WeakMap();
297
+ let ancestorTransformCache = /* @__PURE__ */ new WeakMap();
298
+ let borderRadiusCache = /* @__PURE__ */ new WeakMap();
299
+ const invalidateBoundsCache = () => {
300
+ boundsCache = /* @__PURE__ */ new WeakMap();
301
+ ancestorTransformCache = /* @__PURE__ */ new WeakMap();
302
+ borderRadiusCache = /* @__PURE__ */ new WeakMap();
303
+ };
304
+ const getAncestorTransformValue = (ancestor, now) => {
305
+ const cached = ancestorTransformCache.get(ancestor);
306
+ if (cached && now - cached.timestamp < 16) return cached.transform;
307
+ const transformValue = window.getComputedStyle(ancestor).transform;
308
+ const resolvedTransform = transformValue && transformValue !== "none" ? transformValue : "none";
309
+ ancestorTransformCache.set(ancestor, {
310
+ transform: resolvedTransform,
311
+ timestamp: now
312
+ });
313
+ return resolvedTransform;
314
+ };
315
+ const getAccumulatedTransform = (element, selfTransform, now) => {
316
+ const hasSelfTransform = selfTransform && selfTransform !== "none";
317
+ let accumulated = null;
318
+ let current = element.parentElement;
319
+ let depth = 0;
320
+ while (current && current !== document.documentElement && depth < 6) {
321
+ const transformValue = getAncestorTransformValue(current, now);
322
+ if (transformValue !== "none") accumulated = accumulated ? new DOMMatrix(transformValue).multiply(accumulated) : new DOMMatrix(transformValue);
323
+ else if (!hasSelfTransform && !accumulated && depth >= 3) return "none";
324
+ current = current.parentElement;
325
+ depth++;
326
+ }
327
+ if (!accumulated) return hasSelfTransform ? stripTranslateFromTransformString(selfTransform) : "none";
328
+ if (hasSelfTransform) accumulated = accumulated.multiply(new DOMMatrix(selfTransform));
329
+ return stripTranslateFromMatrix(accumulated);
330
+ };
331
+ const getCachedBorderRadius = (element, computedStyle, now) => {
332
+ const cached = borderRadiusCache.get(element);
333
+ if (cached && now - cached.timestamp < 200) return cached.borderRadius;
334
+ const borderRadius = (computedStyle ?? window.getComputedStyle(element)).borderRadius || "0px";
335
+ borderRadiusCache.set(element, {
336
+ borderRadius,
337
+ timestamp: now
338
+ });
339
+ return borderRadius;
340
+ };
341
+ const buildBoundsFromRect = (element, rect, style, now) => {
342
+ const transform = getAccumulatedTransform(element, style.transform, now);
343
+ const borderRadius = getCachedBorderRadius(element, style, now);
344
+ if (transform !== "none" && element instanceof HTMLElement) {
345
+ const offsetWidth = element.offsetWidth;
346
+ const offsetHeight = element.offsetHeight;
347
+ if (offsetWidth > 0 && offsetHeight > 0) {
348
+ const centerX = rect.left + rect.width * .5;
349
+ const centerY = rect.top + rect.height * .5;
350
+ return {
351
+ borderRadius,
352
+ height: offsetHeight,
353
+ transform,
354
+ width: offsetWidth,
355
+ x: centerX - offsetWidth * .5,
356
+ y: centerY - offsetHeight * .5
357
+ };
358
+ }
359
+ }
360
+ return {
361
+ borderRadius,
362
+ height: rect.height,
363
+ transform,
364
+ width: rect.width,
365
+ x: rect.left,
366
+ y: rect.top
367
+ };
368
+ };
369
+ const createElementBounds = (element) => {
370
+ const now = performance.now();
371
+ const cached = boundsCache.get(element);
372
+ if (cached && now - cached.timestamp < 16) return cached.bounds;
373
+ const bounds = buildBoundsFromRect(element, element.getBoundingClientRect(), window.getComputedStyle(element), now);
374
+ boundsCache.set(element, {
375
+ bounds,
376
+ timestamp: now
377
+ });
378
+ return bounds;
379
+ };
380
+
381
+ //#endregion
382
+ //#region src/utils/get-bounds-center.ts
383
+ const getBoundsCenter = (bounds) => ({
384
+ x: bounds.x + bounds.width / 2,
385
+ y: bounds.y + bounds.height / 2
386
+ });
387
+
388
+ //#endregion
389
+ //#region src/core/store.ts
390
+ const createInitialStore = (input) => ({
391
+ current: { state: "idle" },
392
+ selectionInteractionLockDepth: 0,
393
+ wasActivatedByToggle: false,
394
+ pendingCommentMode: false,
395
+ keyHoldDuration: input.keyHoldDuration,
396
+ pointer: {
397
+ x: OFFSCREEN_POSITION,
398
+ y: OFFSCREEN_POSITION
399
+ },
400
+ dragStart: {
401
+ x: OFFSCREEN_POSITION,
402
+ y: OFFSCREEN_POSITION
403
+ },
404
+ copyStart: {
405
+ x: OFFSCREEN_POSITION,
406
+ y: OFFSCREEN_POSITION
407
+ },
408
+ copyOffsetFromCenterX: 0,
409
+ detectedElement: null,
410
+ frozenElement: null,
411
+ frozenElements: [],
412
+ frozenDragRect: null,
413
+ lastGrabbedElement: null,
414
+ lastCopiedElement: null,
415
+ selectionFilePath: null,
416
+ selectionLineNumber: null,
417
+ inputText: "",
418
+ viewportVersion: 0,
419
+ grabbedBoxes: [],
420
+ labelInstances: [],
421
+ isTouchMode: false,
422
+ theme: input.theme,
423
+ activationTimestamp: null,
424
+ previouslyFocusedElement: null,
425
+ contextMenuPosition: null,
426
+ contextMenuElement: null,
427
+ contextMenuClickOffset: null
428
+ });
429
+ const createGrabStore = (input) => {
430
+ const [store, setStore] = createStore(createInitialStore(input));
431
+ const updateFrozenElements = (mutator) => {
432
+ setStore(produce((draft) => {
433
+ mutator(draft);
434
+ draft.frozenElement = draft.frozenElements.length > 0 ? draft.frozenElements[0] : null;
435
+ draft.frozenDragRect = null;
436
+ }));
437
+ };
438
+ const clearFrozenElement = () => {
439
+ updateFrozenElements((draft) => {
440
+ draft.frozenElements = [];
441
+ });
442
+ };
443
+ const setActivePhase = (phase) => {
444
+ setStore("current", produce((current) => {
445
+ if (current.state === "active") current.phase = phase;
446
+ }));
447
+ };
448
+ const actions = {
449
+ startHold: (duration) => {
450
+ if (duration !== void 0) setStore("keyHoldDuration", duration);
451
+ setStore("current", {
452
+ state: "holding",
453
+ startedAt: Date.now()
454
+ });
455
+ },
456
+ releaseHold: () => {
457
+ if (store.current.state === "holding") setStore("current", { state: "idle" });
458
+ },
459
+ activate: () => {
460
+ setStore(produce((draft) => {
461
+ draft.current = {
462
+ state: "active",
463
+ phase: "hovering",
464
+ isPromptMode: false,
465
+ isPendingDismiss: false
466
+ };
467
+ draft.activationTimestamp = Date.now();
468
+ draft.previouslyFocusedElement = document.activeElement;
469
+ }));
470
+ },
471
+ deactivate: () => {
472
+ setStore(produce((draft) => {
473
+ draft.current = { state: "idle" };
474
+ draft.wasActivatedByToggle = false;
475
+ draft.pendingCommentMode = false;
476
+ draft.inputText = "";
477
+ draft.frozenElement = null;
478
+ draft.frozenElements = [];
479
+ draft.frozenDragRect = null;
480
+ draft.activationTimestamp = null;
481
+ draft.previouslyFocusedElement = null;
482
+ draft.contextMenuPosition = null;
483
+ draft.contextMenuElement = null;
484
+ draft.contextMenuClickOffset = null;
485
+ draft.lastCopiedElement = null;
486
+ }));
487
+ },
488
+ toggle: () => {
489
+ if (store.activationTimestamp !== null) actions.deactivate();
490
+ else {
491
+ setStore("wasActivatedByToggle", true);
492
+ actions.activate();
493
+ }
494
+ },
495
+ freeze: () => {
496
+ if (store.current.state === "active") {
497
+ const elementToFreeze = store.frozenElement ?? store.detectedElement;
498
+ if (elementToFreeze) setStore("frozenElement", elementToFreeze);
499
+ setActivePhase("frozen");
500
+ }
501
+ },
502
+ unfreeze: () => {
503
+ if (store.current.state === "active") {
504
+ setStore(produce((draft) => {
505
+ draft.frozenElement = null;
506
+ draft.frozenElements = [];
507
+ draft.frozenDragRect = null;
508
+ }));
509
+ setActivePhase("hovering");
510
+ }
511
+ },
512
+ startDrag: (position, shouldPreserveFrozenElements) => {
513
+ if (store.current.state === "active") {
514
+ if (!shouldPreserveFrozenElements) clearFrozenElement();
515
+ setStore("dragStart", {
516
+ x: position.x + window.scrollX,
517
+ y: position.y + window.scrollY
518
+ });
519
+ setActivePhase("dragging-select");
520
+ }
521
+ },
522
+ startDragReposition: () => {
523
+ if (store.current.state === "active" && store.current.phase === "dragging-select") setActivePhase("dragging-reposition");
524
+ },
525
+ stopDragReposition: () => {
526
+ if (store.current.state === "active" && store.current.phase === "dragging-reposition") setActivePhase("dragging-select");
527
+ },
528
+ shiftDragStart: (delta) => {
529
+ if (store.current.state === "active" && store.current.phase === "dragging-reposition") setStore("dragStart", (dragStart) => ({
530
+ x: dragStart.x + delta.x,
531
+ y: dragStart.y + delta.y
532
+ }));
533
+ },
534
+ endDrag: () => {
535
+ if (store.current.state === "active" && (store.current.phase === "dragging-select" || store.current.phase === "dragging-reposition")) {
536
+ setStore("dragStart", {
537
+ x: OFFSCREEN_POSITION,
538
+ y: OFFSCREEN_POSITION
539
+ });
540
+ setActivePhase("justDragged");
541
+ }
542
+ },
543
+ cancelDrag: () => {
544
+ if (store.current.state === "active" && (store.current.phase === "dragging-select" || store.current.phase === "dragging-reposition")) {
545
+ setStore("dragStart", {
546
+ x: OFFSCREEN_POSITION,
547
+ y: OFFSCREEN_POSITION
548
+ });
549
+ setActivePhase("hovering");
550
+ }
551
+ },
552
+ finishJustDragged: () => {
553
+ if (store.current.state === "active" && store.current.phase === "justDragged") setActivePhase("hovering");
554
+ },
555
+ startCopy: () => {
556
+ const wasActive = store.current.state === "active";
557
+ setStore("current", {
558
+ state: "copying",
559
+ startedAt: Date.now(),
560
+ wasActive
561
+ });
562
+ },
563
+ completeCopy: (element) => {
564
+ if (element) setStore("lastCopiedElement", element);
565
+ const wasActive = store.current.state === "copying" ? store.current.wasActive : false;
566
+ setStore("current", {
567
+ state: "justCopied",
568
+ copiedAt: Date.now(),
569
+ wasActive
570
+ });
571
+ },
572
+ finishJustCopied: () => {
573
+ if (store.current.state === "justCopied") if (store.current.wasActive && !store.wasActivatedByToggle) {
574
+ clearFrozenElement();
575
+ setStore("current", {
576
+ state: "active",
577
+ phase: "hovering",
578
+ isPromptMode: false,
579
+ isPendingDismiss: false
580
+ });
581
+ } else actions.deactivate();
582
+ },
583
+ enterPromptMode: (position, element) => {
584
+ const { x: selectionCenterX } = getBoundsCenter(createElementBounds(element));
585
+ setStore("copyStart", position);
586
+ setStore("copyOffsetFromCenterX", position.x - selectionCenterX);
587
+ setStore("pointer", position);
588
+ setStore("frozenElement", element);
589
+ setStore("wasActivatedByToggle", true);
590
+ if (store.current.state !== "active") {
591
+ setStore("current", {
592
+ state: "active",
593
+ phase: "frozen",
594
+ isPromptMode: true,
595
+ isPendingDismiss: false
596
+ });
597
+ setStore("activationTimestamp", Date.now());
598
+ setStore("previouslyFocusedElement", document.activeElement);
599
+ } else setStore("current", produce((current) => {
600
+ if (current.state === "active") {
601
+ current.isPromptMode = true;
602
+ current.phase = "frozen";
603
+ }
604
+ }));
605
+ },
606
+ exitPromptMode: () => {
607
+ if (store.current.state === "active") setStore("current", produce((current) => {
608
+ if (current.state === "active") {
609
+ current.isPromptMode = false;
610
+ current.isPendingDismiss = false;
611
+ }
612
+ }));
613
+ },
614
+ setInputText: (value) => {
615
+ setStore("inputText", value);
616
+ },
617
+ clearInputText: () => {
618
+ setStore("inputText", "");
619
+ },
620
+ setPendingDismiss: (value) => {
621
+ if (store.current.state === "active") setStore("current", produce((current) => {
622
+ if (current.state === "active") current.isPendingDismiss = value;
623
+ }));
624
+ },
625
+ setPointer: (position) => {
626
+ setStore("pointer", position);
627
+ },
628
+ setDetectedElement: (element) => {
629
+ setStore("detectedElement", element);
630
+ },
631
+ setFrozenElement: (element) => {
632
+ updateFrozenElements((draft) => {
633
+ draft.frozenElements = [element];
634
+ });
635
+ },
636
+ setFrozenElements: (elements) => {
637
+ updateFrozenElements((draft) => {
638
+ draft.frozenElements = elements;
639
+ });
640
+ },
641
+ toggleFrozenElement: (element) => {
642
+ updateFrozenElements((draft) => {
643
+ const existingIndex = draft.frozenElements.indexOf(element);
644
+ if (existingIndex >= 0) draft.frozenElements.splice(existingIndex, 1);
645
+ else draft.frozenElements.push(element);
646
+ });
647
+ },
648
+ addFrozenElements: (elements) => {
649
+ updateFrozenElements((draft) => {
650
+ for (const incomingElement of elements) if (!draft.frozenElements.includes(incomingElement)) draft.frozenElements.push(incomingElement);
651
+ });
652
+ },
653
+ setFrozenDragRect: (rect) => {
654
+ setStore("frozenDragRect", rect);
655
+ },
656
+ setCopyStart: (position, element) => {
657
+ const { x: selectionCenterX } = getBoundsCenter(createElementBounds(element));
658
+ setStore("copyStart", position);
659
+ setStore("copyOffsetFromCenterX", position.x - selectionCenterX);
660
+ },
661
+ setLastGrabbed: (element) => {
662
+ setStore("lastGrabbedElement", element);
663
+ },
664
+ clearLastCopied: () => {
665
+ setStore("lastCopiedElement", null);
666
+ },
667
+ setWasActivatedByToggle: (value) => {
668
+ setStore("wasActivatedByToggle", value);
669
+ },
670
+ setPendingCommentMode: (value) => {
671
+ setStore("pendingCommentMode", value);
672
+ },
673
+ setTouchMode: (value) => {
674
+ setStore("isTouchMode", value);
675
+ },
676
+ incrementSelectionInteractionLockDepth: () => {
677
+ setStore("selectionInteractionLockDepth", (currentLockDepth) => currentLockDepth + 1);
678
+ },
679
+ decrementSelectionInteractionLockDepth: () => {
680
+ setStore("selectionInteractionLockDepth", (currentLockDepth) => Math.max(0, currentLockDepth - 1));
681
+ },
682
+ setSelectionSource: (filePath, lineNumber) => {
683
+ setStore(produce((draft) => {
684
+ draft.selectionFilePath = filePath;
685
+ draft.selectionLineNumber = lineNumber;
686
+ }));
687
+ },
688
+ incrementViewportVersion: () => {
689
+ setStore("viewportVersion", (version) => version + 1);
690
+ },
691
+ addGrabbedBox: (box) => {
692
+ setStore("grabbedBoxes", (boxes) => [...boxes, box]);
693
+ },
694
+ removeGrabbedBox: (boxId) => {
695
+ setStore("grabbedBoxes", (boxes) => boxes.filter((box) => box.id !== boxId));
696
+ },
697
+ clearGrabbedBoxes: () => {
698
+ setStore("grabbedBoxes", []);
699
+ },
700
+ addLabelInstance: (instance) => {
701
+ setStore("labelInstances", (instances) => [...instances, instance]);
702
+ },
703
+ updateLabelInstance: (instanceId, status, errorMessage) => {
704
+ const index = store.labelInstances.findIndex((instance) => instance.id === instanceId);
705
+ if (index !== -1) setStore("labelInstances", index, produce((instance) => {
706
+ instance.status = status;
707
+ if (errorMessage !== void 0) instance.errorMessage = errorMessage;
708
+ }));
709
+ },
710
+ removeLabelInstance: (instanceId) => {
711
+ setStore("labelInstances", (instances) => instances.filter((instance) => instance.id !== instanceId));
712
+ },
713
+ clearLabelInstances: () => {
714
+ setStore("labelInstances", []);
715
+ },
716
+ showContextMenu: (position, element) => {
717
+ const { x: centerX, y: centerY } = getBoundsCenter(createElementBounds(element));
718
+ setStore(produce((draft) => {
719
+ draft.contextMenuPosition = position;
720
+ draft.contextMenuElement = element;
721
+ draft.contextMenuClickOffset = {
722
+ x: position.x - centerX,
723
+ y: position.y - centerY
724
+ };
725
+ }));
726
+ },
727
+ hideContextMenu: () => {
728
+ setStore(produce((draft) => {
729
+ draft.contextMenuPosition = null;
730
+ draft.contextMenuElement = null;
731
+ draft.contextMenuClickOffset = null;
732
+ }));
733
+ },
734
+ updateContextMenuPosition: () => {
735
+ const element = store.contextMenuElement;
736
+ const clickOffset = store.contextMenuClickOffset;
737
+ if (!element || !clickOffset) return;
738
+ if (!isElementConnected(element)) return;
739
+ const { x: newCenterX, y: newCenterY } = getBoundsCenter(createElementBounds(element));
740
+ setStore("contextMenuPosition", {
741
+ x: newCenterX + clickOffset.x,
742
+ y: newCenterY + clickOffset.y
743
+ });
744
+ }
745
+ };
746
+ return {
747
+ store,
748
+ actions
749
+ };
750
+ };
751
+
752
+ //#endregion
753
+ //#region src/utils/mount-root.ts
754
+ const ATTRIBUTE_NAME = "data-react-grab";
755
+ const FONT_IMPORT = "@import url(\"https://fonts.googleapis.com/css2?family=Geist:wght@500&display=swap\");";
756
+ const attachHostToBody = (host) => {
757
+ if (!document.body) return;
758
+ const candidateHosts = document.querySelectorAll(`[${ATTRIBUTE_NAME}]`);
759
+ for (const candidate of candidateHosts) {
760
+ if (candidate === host) continue;
761
+ if (candidate.parentNode === host) continue;
762
+ if (!candidate.shadowRoot) candidate.remove();
763
+ }
764
+ document.body.appendChild(host);
765
+ };
766
+ const scheduleHostAttachment = (host) => {
767
+ if (document.body) {
768
+ attachHostToBody(host);
769
+ return;
770
+ }
771
+ const onReady = () => {
772
+ document.removeEventListener("DOMContentLoaded", onReady);
773
+ attachHostToBody(host);
774
+ };
775
+ document.addEventListener("DOMContentLoaded", onReady, { once: true });
776
+ };
777
+ const mountRoot = (cssText) => {
778
+ const mountedHosts = document.querySelectorAll(`[${ATTRIBUTE_NAME}]`);
779
+ for (const mountedHost of mountedHosts) {
780
+ const mountedRoot = mountedHost.shadowRoot?.querySelector(`[${ATTRIBUTE_NAME}]`);
781
+ if (mountedRoot instanceof HTMLDivElement) return mountedRoot;
782
+ mountedHost.remove();
783
+ }
784
+ const host = document.createElement("div");
785
+ host.setAttribute(ATTRIBUTE_NAME, "true");
786
+ hideFromThirdParties(host);
787
+ host.style.zIndex = String(Z_INDEX_OVERLAY);
788
+ host.style.position = "fixed";
789
+ host.style.inset = "0";
790
+ host.style.pointerEvents = "none";
791
+ host.style.contain = "strict";
792
+ const shadowRoot = host.attachShadow({ mode: "open" });
793
+ const styleElement = document.createElement("style");
794
+ const nonce = detectCspNonce();
795
+ if (nonce) styleElement.nonce = nonce;
796
+ styleElement.textContent = `${FONT_IMPORT}\n${cssText ?? ""}`;
797
+ shadowRoot.appendChild(styleElement);
798
+ const root = document.createElement("div");
799
+ root.setAttribute(ATTRIBUTE_NAME, "true");
800
+ shadowRoot.appendChild(root);
801
+ scheduleHostAttachment(host);
802
+ setTimeout(() => {
803
+ attachHostToBody(host);
804
+ }, MOUNT_ROOT_RECHECK_DELAY_MS);
805
+ return root;
806
+ };
807
+
808
+ //#endregion
809
+ //#region src/core/noop-api.ts
810
+ const NOOP = () => {};
811
+ const createNoopApi = () => ({
812
+ activate: NOOP,
813
+ deactivate: NOOP,
814
+ toggle: NOOP,
815
+ comment: NOOP,
816
+ isActive: () => false,
817
+ isEnabled: () => false,
818
+ setEnabled: NOOP,
819
+ getToolbarState: () => null,
820
+ setToolbarState: NOOP,
821
+ onToolbarStateChange: () => NOOP,
822
+ dispose: NOOP,
823
+ copyElement: () => Promise.resolve(false),
824
+ getSource: () => Promise.resolve(null),
825
+ getStackContext: () => Promise.resolve(""),
826
+ getState: () => ({
827
+ isActive: false,
828
+ isDragging: false,
829
+ isCopying: false,
830
+ isPromptMode: false,
831
+ isSelectionBoxVisible: false,
832
+ isDragBoxVisible: false,
833
+ targetElement: null,
834
+ dragBounds: null,
835
+ grabbedBoxes: [],
836
+ labelInstances: [],
837
+ selectionFilePath: null,
838
+ toolbarState: null
839
+ }),
840
+ setOptions: NOOP,
841
+ registerPlugin: NOOP,
842
+ unregisterPlugin: NOOP,
843
+ getPlugins: () => [],
844
+ getDisplayName: () => null
845
+ });
846
+
847
+ //#endregion
848
+ //#region src/core/events.ts
849
+ const createEventListenerManager = () => {
850
+ const abortController = new AbortController();
851
+ const addWindowListener = (type, listener, options = {}) => {
852
+ window.addEventListener(type, listener, {
853
+ ...options,
854
+ signal: abortController.signal
855
+ });
856
+ };
857
+ const addDocumentListener = (type, listener, options = {}) => {
858
+ document.addEventListener(type, listener, {
859
+ ...options,
860
+ signal: abortController.signal
861
+ });
862
+ };
863
+ return {
864
+ signal: abortController.signal,
865
+ abort: () => abortController.abort(),
866
+ addWindowListener,
867
+ addDocumentListener
868
+ };
869
+ };
870
+
871
+ //#endregion
872
+ //#region src/utils/copy-content.ts
873
+ const REACT_GRAB_MIME_TYPE = "application/x-react-grab";
874
+ const escapeHtml = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
875
+ const copyContent = (content, options) => {
876
+ const elementName = options?.componentName ?? "div";
877
+ const reactGrabMetadata = {
878
+ version: VERSION,
879
+ content,
880
+ entries: options?.entries ?? [{
881
+ tagName: options?.tagName,
882
+ componentName: elementName,
883
+ content,
884
+ commentText: options?.commentText
885
+ }],
886
+ timestamp: Date.now()
887
+ };
888
+ const copyHandler = (event) => {
889
+ event.preventDefault();
890
+ event.clipboardData?.setData("text/plain", content);
891
+ event.clipboardData?.setData("text/html", `<meta charset='utf-8'><pre><code>${escapeHtml(content)}</code></pre>`);
892
+ event.clipboardData?.setData(REACT_GRAB_MIME_TYPE, JSON.stringify(reactGrabMetadata));
893
+ };
894
+ document.addEventListener("copy", copyHandler);
895
+ const textarea = document.createElement("textarea");
896
+ textarea.value = content;
897
+ textarea.style.position = "fixed";
898
+ textarea.style.left = "-9999px";
899
+ textarea.ariaHidden = "true";
900
+ document.body.appendChild(textarea);
901
+ textarea.select();
902
+ try {
903
+ if (typeof document.execCommand !== "function") return false;
904
+ return document.execCommand("copy");
905
+ } finally {
906
+ document.removeEventListener("copy", copyHandler);
907
+ textarea.remove();
908
+ }
909
+ };
910
+
911
+ //#endregion
912
+ //#region src/utils/generate-snippet.ts
913
+ const generateSnippet = async (elements, options = {}) => {
914
+ return (await Promise.allSettled(elements.map((element) => getElementContext(element, options)))).map((result) => result.status === "fulfilled" ? result.value : "");
915
+ };
916
+
917
+ //#endregion
918
+ //#region src/utils/join-snippets.ts
919
+ const joinSnippets = (snippets) => {
920
+ if (snippets.length <= 1) return snippets[0] ?? "";
921
+ return snippets.map((snippet, index) => `[${index + 1}]\n${snippet}`).join("\n\n");
922
+ };
923
+
924
+ //#endregion
925
+ //#region src/utils/normalize-error.ts
926
+ const normalizeErrorMessage = (error, fallback = "Unknown error") => error instanceof Error && error.message ? error.message : fallback;
927
+ const normalizeError = (error) => error instanceof Error ? error : new Error(String(error));
928
+
929
+ //#endregion
930
+ //#region src/core/copy.ts
931
+ const tryCopyWithFallback = async (options, hooks, elements, extraPrompt) => {
932
+ let didCopy = false;
933
+ let copiedContent = "";
934
+ await hooks.onBeforeCopy(elements);
935
+ try {
936
+ let generatedContent;
937
+ let entries;
938
+ if (options.getContent) generatedContent = await options.getContent(elements);
939
+ else {
940
+ const rawSnippets = await generateSnippet(elements, { maxLines: options.maxContextLines });
941
+ const snippetElementPairs = (await Promise.all(rawSnippets.map((snippet, index) => snippet.trim() ? hooks.transformSnippet(snippet, elements[index]) : Promise.resolve("")))).map((snippet, index) => ({
942
+ snippet,
943
+ element: elements[index]
944
+ })).filter(({ snippet }) => snippet.trim());
945
+ generatedContent = joinSnippets(snippetElementPairs.map(({ snippet }) => snippet));
946
+ entries = snippetElementPairs.map(({ snippet, element }) => ({
947
+ tagName: element.localName,
948
+ content: snippet,
949
+ commentText: extraPrompt
950
+ }));
951
+ }
952
+ if (generatedContent.trim()) {
953
+ const transformedContent = await hooks.transformCopyContent(generatedContent, elements);
954
+ copiedContent = extraPrompt ? `${extraPrompt}\n\n${transformedContent}` : transformedContent;
955
+ didCopy = copyContent(copiedContent, {
956
+ componentName: options.componentName,
957
+ entries
958
+ });
959
+ }
960
+ } catch (error) {
961
+ hooks.onCopyError(normalizeError(error));
962
+ }
963
+ if (didCopy) hooks.onCopySuccess(elements, copiedContent);
964
+ hooks.onAfterCopy(elements, didCopy);
965
+ return didCopy;
966
+ };
967
+
968
+ //#endregion
969
+ //#region src/utils/get-elements-in-drag.ts
970
+ const calculateIntersectionArea = (rect1, rect2) => {
971
+ const intersectionLeft = Math.max(rect1.left, rect2.left);
972
+ const intersectionTop = Math.max(rect1.top, rect2.top);
973
+ const intersectionRight = Math.min(rect1.right, rect2.right);
974
+ const intersectionBottom = Math.min(rect1.bottom, rect2.bottom);
975
+ return Math.max(0, intersectionRight - intersectionLeft) * Math.max(0, intersectionBottom - intersectionTop);
976
+ };
977
+ const hasIntersection = (rect1, rect2) => {
978
+ return rect1.left < rect2.right && rect1.right > rect2.left && rect1.top < rect2.bottom && rect1.bottom > rect2.top;
979
+ };
980
+ const sortByDocumentOrder = (elements) => {
981
+ return elements.sort((leftElement, rightElement) => {
982
+ if (leftElement === rightElement) return 0;
983
+ const position = leftElement.compareDocumentPosition(rightElement);
984
+ if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
985
+ if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
986
+ return 0;
987
+ });
988
+ };
989
+ const createSamplePoints = (dragRect) => {
990
+ if (dragRect.width <= 0 || dragRect.height <= 0) return [];
991
+ const viewportWidth = window.innerWidth;
992
+ const viewportHeight = window.innerHeight;
993
+ const left = dragRect.x;
994
+ const top = dragRect.y;
995
+ const right = dragRect.x + dragRect.width;
996
+ const bottom = dragRect.y + dragRect.height;
997
+ const centerX = left + dragRect.width / 2;
998
+ const centerY = top + dragRect.height / 2;
999
+ const xCount = clampToRange(Math.ceil(dragRect.width / 32), 3, 20);
1000
+ const yCount = clampToRange(Math.ceil(dragRect.height / 32), 3, 20);
1001
+ const totalGridPoints = xCount * yCount;
1002
+ const scale = totalGridPoints > 100 ? Math.sqrt(100 / totalGridPoints) : 1;
1003
+ const scaledXCount = clampToRange(Math.floor(xCount * scale), 3, 20);
1004
+ const scaledYCount = clampToRange(Math.floor(yCount * scale), 3, 20);
1005
+ const pointKeys = /* @__PURE__ */ new Set();
1006
+ const points = [];
1007
+ const addPoint = (x, y) => {
1008
+ const clampedX = clampToRange(Math.round(x), 0, viewportWidth - 1);
1009
+ const clampedY = clampToRange(Math.round(y), 0, viewportHeight - 1);
1010
+ const key = `${clampedX}:${clampedY}`;
1011
+ if (pointKeys.has(key)) return;
1012
+ pointKeys.add(key);
1013
+ points.push({
1014
+ x: clampedX,
1015
+ y: clampedY
1016
+ });
1017
+ };
1018
+ addPoint(left + 1, top + 1);
1019
+ addPoint(right - 1, top + 1);
1020
+ addPoint(left + 1, bottom - 1);
1021
+ addPoint(right - 1, bottom - 1);
1022
+ addPoint(centerX, top + 1);
1023
+ addPoint(centerX, bottom - 1);
1024
+ addPoint(left + 1, centerY);
1025
+ addPoint(right - 1, centerY);
1026
+ addPoint(centerX, centerY);
1027
+ for (let xIndex = 0; xIndex < scaledXCount; xIndex += 1) {
1028
+ const sampleX = left + (xIndex + .5) / scaledXCount * dragRect.width;
1029
+ for (let yIndex = 0; yIndex < scaledYCount; yIndex += 1) addPoint(sampleX, top + (yIndex + .5) / scaledYCount * dragRect.height);
1030
+ }
1031
+ return points;
1032
+ };
1033
+ const filterElementsInDrag = (dragRect, isValidGrabbableElement, shouldCheckCoverage) => {
1034
+ const dragBounds = {
1035
+ left: dragRect.x,
1036
+ top: dragRect.y,
1037
+ right: dragRect.x + dragRect.width,
1038
+ bottom: dragRect.y + dragRect.height
1039
+ };
1040
+ const candidates = /* @__PURE__ */ new Set();
1041
+ const samplePoints = createSamplePoints(dragRect);
1042
+ suspendPointerEventsFreeze();
1043
+ try {
1044
+ for (const point of samplePoints) {
1045
+ const elementsAtPoint = document.elementsFromPoint(point.x, point.y);
1046
+ for (const candidateElement of elementsAtPoint) candidates.add(candidateElement);
1047
+ }
1048
+ } finally {
1049
+ resumePointerEventsFreeze();
1050
+ }
1051
+ const validCandidates = [];
1052
+ for (const candidateElement of candidates) {
1053
+ if (!shouldCheckCoverage && isRootElement(candidateElement)) continue;
1054
+ if (!isValidGrabbableElement(candidateElement)) continue;
1055
+ validCandidates.push(candidateElement);
1056
+ }
1057
+ const candidateRects = /* @__PURE__ */ new Map();
1058
+ for (const candidateElement of validCandidates) candidateRects.set(candidateElement, candidateElement.getBoundingClientRect());
1059
+ const matchingElements = [];
1060
+ for (const candidateElement of validCandidates) {
1061
+ const elementRect = candidateRects.get(candidateElement);
1062
+ if (elementRect.width <= 0 || elementRect.height <= 0) continue;
1063
+ const elementBounds = {
1064
+ left: elementRect.left,
1065
+ top: elementRect.top,
1066
+ right: elementRect.left + elementRect.width,
1067
+ bottom: elementRect.top + elementRect.height
1068
+ };
1069
+ if (shouldCheckCoverage) {
1070
+ const intersectionArea = calculateIntersectionArea(dragBounds, elementBounds);
1071
+ const elementArea = elementRect.width * elementRect.height;
1072
+ if (elementArea > 0 && intersectionArea / elementArea >= .75) matchingElements.push(candidateElement);
1073
+ } else if (hasIntersection(elementBounds, dragBounds)) matchingElements.push(candidateElement);
1074
+ }
1075
+ return sortByDocumentOrder(matchingElements);
1076
+ };
1077
+ const removeNestedElements = (elements) => {
1078
+ return elements.filter((element) => {
1079
+ return !elements.some((otherElement) => otherElement !== element && otherElement.contains(element));
1080
+ });
1081
+ };
1082
+ const getElementsInDrag = (dragRect, isValidGrabbableElement, shouldCheckCoverage = true) => {
1083
+ return removeNestedElements(filterElementsInDrag(dragRect, isValidGrabbableElement, shouldCheckCoverage));
1084
+ };
1085
+
1086
+ //#endregion
1087
+ //#region src/utils/get-element-anchor-ratio.ts
1088
+ const getElementAnchorRatio = (bounds, pointer) => {
1089
+ if (bounds.width <= 0) return 0;
1090
+ return clampToRange((pointer.x - bounds.x) / bounds.width, 0, 1);
1091
+ };
1092
+
1093
+ //#endregion
1094
+ //#region src/utils/get-visible-bounds-center.ts
1095
+ const getVisibleBoundsCenter = (bounds) => {
1096
+ const viewportWidth = window.innerWidth;
1097
+ const viewportHeight = window.innerHeight;
1098
+ const visibleLeft = Math.max(0, bounds.x);
1099
+ const visibleRight = Math.min(viewportWidth, bounds.x + bounds.width);
1100
+ const visibleTop = Math.max(0, bounds.y);
1101
+ const visibleBottom = Math.min(viewportHeight, bounds.y + bounds.height);
1102
+ return {
1103
+ x: (visibleLeft + visibleRight) / 2,
1104
+ y: (visibleTop + visibleBottom) / 2
1105
+ };
1106
+ };
1107
+
1108
+ //#endregion
1109
+ //#region src/utils/invalidate-interaction-caches.ts
1110
+ const invalidateInteractionCaches = () => {
1111
+ invalidateBoundsCache();
1112
+ clearElementPositionCache();
1113
+ clearVisibilityCache();
1114
+ };
1115
+
1116
+ //#endregion
1117
+ //#region src/utils/create-bounds-from-drag-rect.ts
1118
+ const createBoundsFromDragRect = (dragRect) => ({
1119
+ x: dragRect.pageX - window.scrollX,
1120
+ y: dragRect.pageY - window.scrollY,
1121
+ width: dragRect.width,
1122
+ height: dragRect.height,
1123
+ borderRadius: "0px",
1124
+ transform: "none"
1125
+ });
1126
+ const createPageRectFromBounds = (bounds) => ({
1127
+ pageX: bounds.x + window.scrollX,
1128
+ pageY: bounds.y + window.scrollY,
1129
+ width: bounds.width,
1130
+ height: bounds.height
1131
+ });
1132
+ const createFlatOverlayBounds = (bounds) => ({
1133
+ ...bounds,
1134
+ borderRadius: "0px",
1135
+ transform: "none"
1136
+ });
1137
+
1138
+ //#endregion
1139
+ //#region src/utils/is-c-like-key.ts
1140
+ const C_LIKE_CHARACTERS = new Set([
1141
+ "c",
1142
+ "C",
1143
+ "с",
1144
+ "С",
1145
+ "ȼ",
1146
+ "Ȼ",
1147
+ "ↄ",
1148
+ "Ↄ",
1149
+ "ᴄ",
1150
+ "ᶜ",
1151
+ "ⱼ",
1152
+ "ⅽ",
1153
+ "Ⅽ",
1154
+ "ç",
1155
+ "Ç",
1156
+ "ć",
1157
+ "Ć",
1158
+ "č",
1159
+ "Č",
1160
+ "ĉ",
1161
+ "Ĉ",
1162
+ "ċ",
1163
+ "Ċ"
1164
+ ]);
1165
+ const isCLikeKey = (key, code) => {
1166
+ if (code === "KeyC") return true;
1167
+ if (!key || key.length !== 1) return false;
1168
+ return C_LIKE_CHARACTERS.has(key);
1169
+ };
1170
+
1171
+ //#endregion
1172
+ //#region src/utils/key-matches-code.ts
1173
+ const keyMatchesCode = (targetKey, code) => {
1174
+ if (!targetKey || !code) return false;
1175
+ const normalizedTarget = targetKey.toLowerCase();
1176
+ if (code === "Space") return normalizedTarget === "space" || normalizedTarget === " ";
1177
+ if (code.startsWith("Key")) return code.slice(3).toLowerCase() === normalizedTarget;
1178
+ if (code.startsWith("Digit")) return code.slice(5) === normalizedTarget;
1179
+ return false;
1180
+ };
1181
+
1182
+ //#endregion
1183
+ //#region src/utils/parse-activation-key.ts
1184
+ const MODIFIER_MAP = {
1185
+ meta: "metaKey",
1186
+ cmd: "metaKey",
1187
+ command: "metaKey",
1188
+ win: "metaKey",
1189
+ windows: "metaKey",
1190
+ ctrl: "ctrlKey",
1191
+ control: "ctrlKey",
1192
+ shift: "shiftKey",
1193
+ alt: "altKey",
1194
+ option: "altKey",
1195
+ opt: "altKey"
1196
+ };
1197
+ const parseString = (shortcut) => {
1198
+ const parts = shortcut.split("+").map((part) => part.trim().toLowerCase());
1199
+ const result = {
1200
+ metaKey: false,
1201
+ ctrlKey: false,
1202
+ shiftKey: false,
1203
+ altKey: false,
1204
+ key: null
1205
+ };
1206
+ for (const part of parts) {
1207
+ const modifierKey = MODIFIER_MAP[part];
1208
+ if (modifierKey) result[modifierKey] = true;
1209
+ else result.key = part;
1210
+ }
1211
+ return result;
1212
+ };
1213
+ const parseActivationKey = (activationKey) => {
1214
+ if (typeof activationKey === "function") return activationKey;
1215
+ const parsed = parseString(activationKey);
1216
+ const targetKey = parsed.key;
1217
+ return (event) => {
1218
+ if (targetKey === null) {
1219
+ const metaMatches = parsed.metaKey ? event.metaKey || event.key === "Meta" : true;
1220
+ const ctrlMatches = parsed.ctrlKey ? event.ctrlKey || event.key === "Control" : true;
1221
+ const shiftMatches = parsed.shiftKey ? event.shiftKey || event.key === "Shift" : true;
1222
+ const altMatches = parsed.altKey ? event.altKey || event.key === "Alt" : true;
1223
+ const allRequiredModifiersPressed = metaMatches && ctrlMatches && shiftMatches && altMatches;
1224
+ const requiredModifierCount = [
1225
+ parsed.metaKey,
1226
+ parsed.ctrlKey,
1227
+ parsed.shiftKey,
1228
+ parsed.altKey
1229
+ ].filter(Boolean).length;
1230
+ const pressedModifierCount = [
1231
+ event.metaKey || event.key === "Meta",
1232
+ event.ctrlKey || event.key === "Control",
1233
+ event.shiftKey || event.key === "Shift",
1234
+ event.altKey || event.key === "Alt"
1235
+ ].filter(Boolean).length;
1236
+ return allRequiredModifiersPressed && pressedModifierCount >= requiredModifierCount;
1237
+ }
1238
+ const keyMatches = event.key?.toLowerCase() === targetKey || keyMatchesCode(targetKey, event.code);
1239
+ const modifiersMatch = parsed.metaKey || parsed.ctrlKey || parsed.shiftKey || parsed.altKey ? (parsed.metaKey ? event.metaKey : true) && (parsed.ctrlKey ? event.ctrlKey : true) && (parsed.shiftKey ? event.shiftKey : true) && (parsed.altKey ? event.altKey : true) : !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
1240
+ return keyMatches && modifiersMatch;
1241
+ };
1242
+ };
1243
+ const getModifiersFromActivationKey = (activationKey) => {
1244
+ if (!activationKey || typeof activationKey === "function") return {
1245
+ metaKey: isMac(),
1246
+ ctrlKey: !isMac(),
1247
+ shiftKey: false,
1248
+ altKey: false,
1249
+ key: null
1250
+ };
1251
+ return parseString(activationKey);
1252
+ };
1253
+
1254
+ //#endregion
1255
+ //#region src/utils/is-target-key-combination.ts
1256
+ const isTargetKeyCombination = (event, options) => {
1257
+ if (options.activationKey) return parseActivationKey(options.activationKey)(event);
1258
+ const hasOnlyPlatformModifier = (isMac() ? event.metaKey : event.ctrlKey) && !event.shiftKey && !event.altKey;
1259
+ return Boolean(event.key && hasOnlyPlatformModifier && isCLikeKey(event.key, event.code));
1260
+ };
1261
+
1262
+ //#endregion
1263
+ //#region src/utils/combine-bounds.ts
1264
+ const combineBounds = (boundsList) => {
1265
+ if (boundsList.length === 0) return {
1266
+ x: 0,
1267
+ y: 0,
1268
+ width: 0,
1269
+ height: 0
1270
+ };
1271
+ if (boundsList.length === 1) return boundsList[0];
1272
+ let minX = Infinity;
1273
+ let minY = Infinity;
1274
+ let maxX = -Infinity;
1275
+ let maxY = -Infinity;
1276
+ for (const bounds of boundsList) {
1277
+ minX = Math.min(minX, bounds.x);
1278
+ minY = Math.min(minY, bounds.y);
1279
+ maxX = Math.max(maxX, bounds.x + bounds.width);
1280
+ maxY = Math.max(maxY, bounds.y + bounds.height);
1281
+ }
1282
+ return {
1283
+ x: minX,
1284
+ y: minY,
1285
+ width: maxX - minX,
1286
+ height: maxY - minY
1287
+ };
1288
+ };
1289
+
1290
+ //#endregion
1291
+ //#region src/core/theme.ts
1292
+ const DEFAULT_THEME = {
1293
+ enabled: true,
1294
+ hue: 0,
1295
+ selectionBox: { enabled: true },
1296
+ dragBox: { enabled: true },
1297
+ grabbedBoxes: { enabled: true },
1298
+ elementLabel: { enabled: true },
1299
+ toolbar: { enabled: true }
1300
+ };
1301
+ const deepMergeTheme = (baseTheme, partialTheme) => ({
1302
+ enabled: partialTheme.enabled ?? baseTheme.enabled,
1303
+ hue: partialTheme.hue ?? baseTheme.hue,
1304
+ selectionBox: { enabled: partialTheme.selectionBox?.enabled ?? baseTheme.selectionBox.enabled },
1305
+ dragBox: { enabled: partialTheme.dragBox?.enabled ?? baseTheme.dragBox.enabled },
1306
+ grabbedBoxes: { enabled: partialTheme.grabbedBoxes?.enabled ?? baseTheme.grabbedBoxes.enabled },
1307
+ elementLabel: { enabled: partialTheme.elementLabel?.enabled ?? baseTheme.elementLabel.enabled },
1308
+ toolbar: { enabled: partialTheme.toolbar?.enabled ?? baseTheme.toolbar.enabled }
1309
+ });
1310
+
1311
+ //#endregion
1312
+ //#region src/core/plugin-registry.ts
1313
+ const DEFAULT_OPTIONS = {
1314
+ activationMode: "toggle",
1315
+ keyHoldDuration: 100,
1316
+ allowActivationInsideInput: true,
1317
+ maxContextLines: 3,
1318
+ activationKey: void 0,
1319
+ getContent: void 0,
1320
+ freezeReactUpdates: true
1321
+ };
1322
+ const createPluginRegistry = (initialOptions = {}) => {
1323
+ const plugins = /* @__PURE__ */ new Map();
1324
+ const directOptionOverrides = {};
1325
+ const [store, setStore] = createStore({
1326
+ theme: DEFAULT_THEME,
1327
+ options: {
1328
+ ...DEFAULT_OPTIONS,
1329
+ ...initialOptions
1330
+ },
1331
+ actions: []
1332
+ });
1333
+ const recomputeStore = () => {
1334
+ let mergedTheme = DEFAULT_THEME;
1335
+ let mergedOptions = {
1336
+ ...DEFAULT_OPTIONS,
1337
+ ...initialOptions
1338
+ };
1339
+ const allContextMenuActions = [];
1340
+ for (const { config } of plugins.values()) {
1341
+ if (config.theme) mergedTheme = deepMergeTheme(mergedTheme, config.theme);
1342
+ if (config.options) mergedOptions = {
1343
+ ...mergedOptions,
1344
+ ...config.options
1345
+ };
1346
+ if (config.actions) for (const action of config.actions) allContextMenuActions.push(action);
1347
+ }
1348
+ mergedOptions = {
1349
+ ...mergedOptions,
1350
+ ...directOptionOverrides
1351
+ };
1352
+ setStore("theme", mergedTheme);
1353
+ setStore("options", mergedOptions);
1354
+ setStore("actions", allContextMenuActions);
1355
+ };
1356
+ const setOption = (optionKey, optionValue) => {
1357
+ directOptionOverrides[optionKey] = optionValue;
1358
+ setStore("options", optionKey, optionValue);
1359
+ };
1360
+ const SETTABLE_OPTION_KEYS = [
1361
+ "activationMode",
1362
+ "keyHoldDuration",
1363
+ "allowActivationInsideInput",
1364
+ "maxContextLines",
1365
+ "activationKey",
1366
+ "getContent",
1367
+ "freezeReactUpdates"
1368
+ ];
1369
+ const setOptions = (optionUpdates) => {
1370
+ for (const optionKey of SETTABLE_OPTION_KEYS) if (optionUpdates[optionKey] !== void 0) setOption(optionKey, optionUpdates[optionKey]);
1371
+ };
1372
+ const register = (plugin, api) => {
1373
+ if (plugins.has(plugin.name)) unregister(plugin.name);
1374
+ const config = plugin.setup?.(api, hooks) ?? {};
1375
+ if (plugin.theme) config.theme = config.theme ? deepMergeTheme(deepMergeTheme(DEFAULT_THEME, plugin.theme), config.theme) : plugin.theme;
1376
+ if (plugin.actions) config.actions = [...plugin.actions, ...config.actions ?? []];
1377
+ if (plugin.hooks) config.hooks = config.hooks ? {
1378
+ ...plugin.hooks,
1379
+ ...config.hooks
1380
+ } : plugin.hooks;
1381
+ if (plugin.options) config.options = config.options ? {
1382
+ ...plugin.options,
1383
+ ...config.options
1384
+ } : plugin.options;
1385
+ plugins.set(plugin.name, {
1386
+ plugin,
1387
+ config
1388
+ });
1389
+ recomputeStore();
1390
+ };
1391
+ const unregister = (name) => {
1392
+ const registered = plugins.get(name);
1393
+ if (!registered) return;
1394
+ if (registered.config.cleanup) registered.config.cleanup();
1395
+ plugins.delete(name);
1396
+ recomputeStore();
1397
+ };
1398
+ const getPluginNames = () => {
1399
+ return Array.from(plugins.keys());
1400
+ };
1401
+ const callHook = (hookName, ...args) => {
1402
+ for (const { config } of plugins.values()) {
1403
+ const hook = config.hooks?.[hookName];
1404
+ if (hook) hook(...args);
1405
+ }
1406
+ };
1407
+ const callHookWithHandled = (hookName, ...args) => {
1408
+ let handled = false;
1409
+ for (const { config } of plugins.values()) {
1410
+ const hook = config.hooks?.[hookName];
1411
+ if (hook) {
1412
+ if (hook(...args) === true) handled = true;
1413
+ }
1414
+ }
1415
+ return handled;
1416
+ };
1417
+ const callHookAsync = async (hookName, ...args) => {
1418
+ for (const { config } of plugins.values()) {
1419
+ const hook = config.hooks?.[hookName];
1420
+ if (hook) await hook(...args);
1421
+ }
1422
+ };
1423
+ const callHookReduce = async (hookName, initialValue, ...extraArgs) => {
1424
+ let result = initialValue;
1425
+ for (const { config } of plugins.values()) {
1426
+ const hook = config.hooks?.[hookName];
1427
+ if (hook) result = await hook(result, ...extraArgs);
1428
+ }
1429
+ return result;
1430
+ };
1431
+ const callHookReduceSync = (hookName, initialValue, ...extraArgs) => {
1432
+ let result = initialValue;
1433
+ for (const { config } of plugins.values()) {
1434
+ const hook = config.hooks?.[hookName];
1435
+ if (hook) result = hook(result, ...extraArgs);
1436
+ }
1437
+ return result;
1438
+ };
1439
+ const hooks = {
1440
+ onActivate: () => callHook("onActivate"),
1441
+ onDeactivate: () => callHook("onDeactivate"),
1442
+ onElementHover: (element) => callHook("onElementHover", element),
1443
+ onElementSelect: (element) => {
1444
+ let wasIntercepted = false;
1445
+ let pendingResult;
1446
+ for (const { config } of plugins.values()) {
1447
+ const hook = config.hooks?.onElementSelect;
1448
+ if (hook) {
1449
+ const result = hook(element);
1450
+ if (result === true) wasIntercepted = true;
1451
+ else if (result instanceof Promise) {
1452
+ wasIntercepted = true;
1453
+ pendingResult = result;
1454
+ }
1455
+ }
1456
+ }
1457
+ return {
1458
+ wasIntercepted,
1459
+ pendingResult
1460
+ };
1461
+ },
1462
+ onDragStart: (startX, startY) => callHook("onDragStart", startX, startY),
1463
+ onDragEnd: (elements, bounds) => callHook("onDragEnd", elements, bounds),
1464
+ onBeforeCopy: async (elements) => callHookAsync("onBeforeCopy", elements),
1465
+ transformCopyContent: async (content, elements) => callHookReduce("transformCopyContent", content, elements),
1466
+ onAfterCopy: (elements, success) => callHook("onAfterCopy", elements, success),
1467
+ onCopySuccess: (elements, content) => callHook("onCopySuccess", elements, content),
1468
+ onCopyError: (error) => callHook("onCopyError", error),
1469
+ onStateChange: (state) => callHook("onStateChange", state),
1470
+ onPromptModeChange: (isPromptMode, context) => callHook("onPromptModeChange", isPromptMode, context),
1471
+ onSelectionBox: (visible, bounds, element) => callHook("onSelectionBox", visible, bounds, element),
1472
+ onDragBox: (visible, bounds) => callHook("onDragBox", visible, bounds),
1473
+ onGrabbedBox: (bounds, element) => callHook("onGrabbedBox", bounds, element),
1474
+ onElementLabel: (visible, variant, context) => callHook("onElementLabel", visible, variant, context),
1475
+ onContextMenu: (element, position) => callHook("onContextMenu", element, position),
1476
+ onOpenFile: (filePath, lineNumber) => callHookWithHandled("onOpenFile", filePath, lineNumber),
1477
+ transformHtmlContent: async (html, elements) => callHookReduce("transformHtmlContent", html, elements),
1478
+ transformAgentContext: async (context, elements) => callHookReduce("transformAgentContext", context, elements),
1479
+ transformActionContext: (context) => callHookReduceSync("transformActionContext", context),
1480
+ transformOpenFileUrl: (url, filePath, lineNumber) => callHookReduceSync("transformOpenFileUrl", url, filePath, lineNumber),
1481
+ transformSnippet: async (snippet, element) => callHookReduce("transformSnippet", snippet, element)
1482
+ };
1483
+ return {
1484
+ register,
1485
+ unregister,
1486
+ getPluginNames,
1487
+ setOptions,
1488
+ store,
1489
+ hooks
1490
+ };
1491
+ };
1492
+
1493
+ //#endregion
1494
+ //#region src/core/arrow-navigation.ts
1495
+ const createArrowNavigator = (isValidGrabbableElement, createElementBounds) => {
1496
+ let navigationHistory = [];
1497
+ const findVerticalNext = (currentElement, direction) => {
1498
+ const probePoint = getVisibleBoundsCenter(createElementBounds(currentElement));
1499
+ const elementsAtPoint = getElementsAtPoint(probePoint.x, probePoint.y).filter(isValidGrabbableElement);
1500
+ const currentIndex = elementsAtPoint.indexOf(currentElement);
1501
+ if (currentIndex === -1) return null;
1502
+ return elementsAtPoint[currentIndex + direction] ?? null;
1503
+ };
1504
+ const findUp = (currentElement) => {
1505
+ const nextElement = findVerticalNext(currentElement, 1);
1506
+ if (nextElement) {
1507
+ navigationHistory.push(currentElement);
1508
+ if (navigationHistory.length > 50) navigationHistory = navigationHistory.slice(-50);
1509
+ }
1510
+ return nextElement;
1511
+ };
1512
+ const findDown = (currentElement) => {
1513
+ if (navigationHistory.length > 0) {
1514
+ const previousElement = navigationHistory.pop();
1515
+ if (isElementConnected(previousElement)) return previousElement;
1516
+ }
1517
+ return findVerticalNext(currentElement, -1);
1518
+ };
1519
+ const isSvgInternal = (element) => element instanceof SVGElement && !(element instanceof SVGSVGElement);
1520
+ const hasMeaningfulSize = (element) => {
1521
+ const rect = element.getBoundingClientRect();
1522
+ return rect.width >= 16 || rect.height >= 16;
1523
+ };
1524
+ const doRectsMatch = (rectA, rectB) => Math.abs(rectA.x - rectB.x) <= 2 && Math.abs(rectA.y - rectB.y) <= 2 && Math.abs(rectA.width - rectB.width) <= 2 && Math.abs(rectA.height - rectB.height) <= 2;
1525
+ const isHorizontallyGrabbable = (element) => isValidGrabbableElement(element) && !isSvgInternal(element) && hasMeaningfulSize(element);
1526
+ const findHorizontal = (currentElement, isForward) => {
1527
+ const currentRect = currentElement.getBoundingClientRect();
1528
+ const isVisuallyDistinct = (candidate) => !doRectsMatch(candidate.getBoundingClientRect(), currentRect);
1529
+ const findEdgeDescendant = (parentElement) => {
1530
+ if (parentElement instanceof SVGSVGElement) return null;
1531
+ const children = Array.from(parentElement.children);
1532
+ const ordered = isForward ? children : children.reverse();
1533
+ for (const childElement of ordered) if (isForward) {
1534
+ if (isHorizontallyGrabbable(childElement) && isVisuallyDistinct(childElement)) return childElement;
1535
+ const descendant = findEdgeDescendant(childElement);
1536
+ if (descendant) return descendant;
1537
+ } else {
1538
+ const descendant = findEdgeDescendant(childElement);
1539
+ if (descendant) return descendant;
1540
+ if (isHorizontallyGrabbable(childElement) && isVisuallyDistinct(childElement)) return childElement;
1541
+ }
1542
+ return null;
1543
+ };
1544
+ const getSibling = (element) => isForward ? element.nextElementSibling : element.previousElementSibling;
1545
+ let nextElement = null;
1546
+ if (isForward) nextElement = findEdgeDescendant(currentElement);
1547
+ if (!nextElement) {
1548
+ let searchElement = currentElement;
1549
+ while (searchElement) {
1550
+ let sibling = getSibling(searchElement);
1551
+ while (sibling) {
1552
+ if (isHorizontallyGrabbable(sibling) && isVisuallyDistinct(sibling)) {
1553
+ nextElement = sibling;
1554
+ break;
1555
+ }
1556
+ const descendant = findEdgeDescendant(sibling);
1557
+ if (descendant) {
1558
+ nextElement = descendant;
1559
+ break;
1560
+ }
1561
+ sibling = getSibling(sibling);
1562
+ }
1563
+ if (nextElement) break;
1564
+ const parentElement = searchElement.parentElement;
1565
+ if (!isForward && parentElement && isHorizontallyGrabbable(parentElement)) {
1566
+ nextElement = parentElement;
1567
+ break;
1568
+ }
1569
+ searchElement = parentElement;
1570
+ }
1571
+ }
1572
+ return nextElement;
1573
+ };
1574
+ const findNext = (key, currentElement) => {
1575
+ switch (key) {
1576
+ case "ArrowUp": return findUp(currentElement);
1577
+ case "ArrowDown": return findDown(currentElement);
1578
+ case "ArrowRight": return findHorizontal(currentElement, true);
1579
+ case "ArrowLeft": return findHorizontal(currentElement, false);
1580
+ default: return null;
1581
+ }
1582
+ };
1583
+ const clearHistory = () => {
1584
+ navigationHistory = [];
1585
+ };
1586
+ return {
1587
+ findNext,
1588
+ clearHistory
1589
+ };
1590
+ };
1591
+
1592
+ //#endregion
1593
+ //#region src/core/keyboard-handlers.ts
1594
+ const getRequiredModifiers = (options) => {
1595
+ const { metaKey, ctrlKey, shiftKey, altKey } = getModifiersFromActivationKey(options.activationKey);
1596
+ return {
1597
+ metaKey,
1598
+ ctrlKey,
1599
+ shiftKey,
1600
+ altKey
1601
+ };
1602
+ };
1603
+ const setupKeyboardEventClaimer = () => {
1604
+ const claimedEvents = /* @__PURE__ */ new WeakSet();
1605
+ const originalKeyDescriptor = Object.getOwnPropertyDescriptor(KeyboardEvent.prototype, "key");
1606
+ let didPatch = false;
1607
+ if (originalKeyDescriptor?.get && !originalKeyDescriptor.get.__reactGrabPatched) {
1608
+ didPatch = true;
1609
+ const originalGetter = originalKeyDescriptor.get;
1610
+ const patchedGetter = function() {
1611
+ if (claimedEvents.has(this)) return "";
1612
+ return originalGetter.call(this);
1613
+ };
1614
+ patchedGetter.__reactGrabPatched = true;
1615
+ Object.defineProperty(KeyboardEvent.prototype, "key", {
1616
+ get: patchedGetter,
1617
+ configurable: true
1618
+ });
1619
+ }
1620
+ const restore = () => {
1621
+ if (didPatch && originalKeyDescriptor) Object.defineProperty(KeyboardEvent.prototype, "key", originalKeyDescriptor);
1622
+ };
1623
+ return {
1624
+ claimedEvents,
1625
+ originalKeyDescriptor,
1626
+ restore
1627
+ };
1628
+ };
1629
+
1630
+ //#endregion
1631
+ //#region src/core/auto-scroll.ts
1632
+ const getAutoScrollDirection = (clientX, clientY) => {
1633
+ return {
1634
+ top: clientY < 25,
1635
+ bottom: clientY > window.innerHeight - 25,
1636
+ left: clientX < 25,
1637
+ right: clientX > window.innerWidth - 25
1638
+ };
1639
+ };
1640
+ const createAutoScroller = (getMousePosition, shouldContinue, onScrollStep) => {
1641
+ let animationId = null;
1642
+ const scroll = () => {
1643
+ if (!shouldContinue()) {
1644
+ stop();
1645
+ return;
1646
+ }
1647
+ const position = getMousePosition();
1648
+ const direction = getAutoScrollDirection(position.x, position.y);
1649
+ let scrollDeltaX = 0;
1650
+ let scrollDeltaY = 0;
1651
+ if (direction.top) scrollDeltaY -= 10;
1652
+ if (direction.bottom) scrollDeltaY += 10;
1653
+ if (direction.left) scrollDeltaX -= 10;
1654
+ if (direction.right) scrollDeltaX += 10;
1655
+ if (scrollDeltaX !== 0 || scrollDeltaY !== 0) {
1656
+ const previousScrollX = window.scrollX;
1657
+ const previousScrollY = window.scrollY;
1658
+ window.scrollBy(scrollDeltaX, scrollDeltaY);
1659
+ const didScrollByX = window.scrollX - previousScrollX;
1660
+ const didScrollByY = window.scrollY - previousScrollY;
1661
+ if (didScrollByX !== 0 || didScrollByY !== 0) onScrollStep?.({
1662
+ x: didScrollByX,
1663
+ y: didScrollByY
1664
+ });
1665
+ }
1666
+ if (direction.top || direction.bottom || direction.left || direction.right) animationId = nativeRequestAnimationFrame(scroll);
1667
+ else animationId = null;
1668
+ };
1669
+ const stop = () => {
1670
+ if (animationId !== null) {
1671
+ nativeCancelAnimationFrame(animationId);
1672
+ animationId = null;
1673
+ }
1674
+ };
1675
+ const isActive = () => animationId !== null;
1676
+ return {
1677
+ start: scroll,
1678
+ stop,
1679
+ isActive
1680
+ };
1681
+ };
1682
+
1683
+ //#endregion
1684
+ //#region src/core/logo-svg.ts
1685
+ const LOGO_SVG = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 294 294"><path fill="#ff40e0" d="M145 47c25-20 50-27 67-17 16 9 23 30 20 60 0 2-1 5-1 7l-2 13h-1l-12-4c-8-3-17-5-25-6l-17-3c-10-1-20-1-29-1-10 0-20 0-29 1-6 8-11 16-16 24-5 9-9 17-13 26 4 9 8 18 13 26s10 16 16 24l11 14c5 7 11 13 18 19l10 8s-1 0 0 0l-11 9c-17 14-35 22-49 22-6 0-13-2-18-5-16-9-23-30-20-59 1-3 1-5 1-8-30-12-48-29-48-50 0-18 14-35 41-47 2-1 5-2 7-3 0-2 0-5-1-7-3-30 4-51 20-60 18-10 42-3 68 17M71 201c-1 2-1 4-1 5-2 24 3 41 13 47h1c11 7 30 1 51-15-10-9-18-18-26-29-13-1-26-4-38-8m9-38c-3 9-5 17-7 26 8 2 17 4 25 6-3-5-6-10-9-16-3-5-6-10-9-16m-19-53c-2 1-3 1-5 2-21 10-34 23-34 35 0 13 14 27 39 37 3-12 7-25 12-37-5-12-9-24-12-37m37-10c-8 1-17 3-25 6 2 8 4 16 7 25 3-5 6-11 9-16zm-3-61c-4-1-8 0-12 2-10 7-15 24-13 47 0 2 0 3 1 5 12-4 25-6 38-8 8-10 16-20 26-29-15-11-29-17-40-17m111 2c-4-2-8-3-12-2-11 0-25 5-40 17 10 9 19 19 26 29 13 2 26 4 39 8v-5c3-23-2-40-13-47m-61 23c-7 6-13 13-19 19h37c-6-6-12-13-18-19"/><mask id="a"><path fill="#fff" d="m235 85-133 27 28 133 133-27Z"/></mask><path fill="#ff40e0" d="m137 130 76 11c8 1 9 11 3 15l-28 16-4 32c-1 8-10 10-14 4l-41-66c-3-6 1-13 8-12" mask="url(#a)"/></svg>`;
1686
+
1687
+ //#endregion
1688
+ //#region src/utils/is-extension-context.ts
1689
+ const isExtensionContext = () => {
1690
+ const global = globalThis;
1691
+ return Boolean(global.chrome?.runtime?.id || global.browser?.runtime?.id);
1692
+ };
1693
+
1694
+ //#endregion
1695
+ //#region src/core/log-intro.ts
1696
+ const logIntro = () => {
1697
+ try {
1698
+ const version = "[DEV]";
1699
+ const logoDataUri = `data:image/svg+xml;base64,${btoa(LOGO_SVG)}`;
1700
+ console.log(`%cReact Grab${` v${version}`}%c\nhttps://react-grab.com`, `background: #330039; color: #ffffff; border: 1px solid #d75fcb; padding: 4px 4px 4px 24px; border-radius: 4px; background-image: url("${logoDataUri}"); background-size: 16px 16px; background-repeat: no-repeat; background-position: 4px center; display: inline-block; margin-bottom: 4px;`, "");
1701
+ if (navigator.onLine && !isExtensionContext()) fetch(`https://www.react-grab.com/api/version?source=browser&v=${version}&t=${Date.now()}`, {
1702
+ referrerPolicy: "origin",
1703
+ keepalive: true,
1704
+ priority: "low",
1705
+ cache: "no-store"
1706
+ }).then((response) => response.text()).then((latestVersion) => {
1707
+ if (latestVersion && latestVersion !== version) console.warn(`[React Grab] v${version} is outdated (latest: v${latestVersion}). Run \`npx grab@latest upgrade\` to upgrade.`);
1708
+ }).catch(() => null);
1709
+ } catch {}
1710
+ };
1711
+
1712
+ //#endregion
1713
+ //#region src/utils/get-script-options.ts
1714
+ const isObjectRecord = (value) => {
1715
+ return typeof value === "object" && value !== null;
1716
+ };
1717
+ const parseOptionsFromJson = (rawValue) => {
1718
+ if (!isObjectRecord(rawValue)) return null;
1719
+ const parsedOptions = {};
1720
+ if (typeof rawValue.enabled === "boolean") parsedOptions.enabled = rawValue.enabled;
1721
+ if (rawValue.activationMode === "toggle" || rawValue.activationMode === "hold") parsedOptions.activationMode = rawValue.activationMode;
1722
+ if (typeof rawValue.keyHoldDuration === "number" && Number.isFinite(rawValue.keyHoldDuration)) parsedOptions.keyHoldDuration = rawValue.keyHoldDuration;
1723
+ if (typeof rawValue.allowActivationInsideInput === "boolean") parsedOptions.allowActivationInsideInput = rawValue.allowActivationInsideInput;
1724
+ if (typeof rawValue.maxContextLines === "number" && Number.isFinite(rawValue.maxContextLines)) parsedOptions.maxContextLines = rawValue.maxContextLines;
1725
+ if (typeof rawValue.activationKey === "string") parsedOptions.activationKey = rawValue.activationKey;
1726
+ if (typeof rawValue.freezeReactUpdates === "boolean") parsedOptions.freezeReactUpdates = rawValue.freezeReactUpdates;
1727
+ if (Object.keys(parsedOptions).length === 0) return null;
1728
+ return parsedOptions;
1729
+ };
1730
+ const getScriptOptions = () => {
1731
+ if (typeof window === "undefined") return null;
1732
+ try {
1733
+ const dataOptions = (document.currentScript instanceof HTMLScriptElement ? document.currentScript : null)?.getAttribute("data-options");
1734
+ if (!dataOptions) return null;
1735
+ return parseOptionsFromJson(JSON.parse(dataOptions));
1736
+ } catch {
1737
+ return null;
1738
+ }
1739
+ };
1740
+
1741
+ //#endregion
1742
+ //#region src/utils/is-enter-code.ts
1743
+ const isEnterCode = (code) => code === "Enter" || code === "NumpadEnter";
1744
+
1745
+ //#endregion
1746
+ //#region src/utils/is-position-inside-bounds.ts
1747
+ const isPositionInsideBounds = (position, bounds) => position.x >= bounds.x && position.x <= bounds.x + bounds.width && position.y >= bounds.y && position.y <= bounds.y + bounds.height;
1748
+
1749
+ //#endregion
1750
+ //#region src/core/plugins/create-pending-selection-plugin.ts
1751
+ const createPendingSelectionPlugin = (config) => ({
1752
+ name: config.name,
1753
+ setup: (api, hooks) => {
1754
+ return {
1755
+ actions: [typeof config.contextMenuAction === "function" ? config.contextMenuAction(api, hooks) : config.contextMenuAction],
1756
+ cleanup: config.cleanup
1757
+ };
1758
+ }
1759
+ });
1760
+
1761
+ //#endregion
1762
+ //#region src/core/plugins/copy.ts
1763
+ const copyPlugin = createPendingSelectionPlugin({
1764
+ name: "copy",
1765
+ contextMenuAction: {
1766
+ id: "copy",
1767
+ label: "Copy",
1768
+ shortcut: "C",
1769
+ showInToolbarMenu: true,
1770
+ onAction: (context) => {
1771
+ context.copy?.();
1772
+ }
1773
+ }
1774
+ });
1775
+
1776
+ //#endregion
1777
+ //#region src/core/plugins/comment.ts
1778
+ const commentPlugin = {
1779
+ name: "comment",
1780
+ setup: () => ({ actions: [{
1781
+ id: "comment",
1782
+ label: "Comment",
1783
+ shortcut: "Enter",
1784
+ showInToolbarMenu: true,
1785
+ onAction: (context) => {
1786
+ context.enterPromptMode?.();
1787
+ }
1788
+ }] })
1789
+ };
1790
+
1791
+ //#endregion
1792
+ //#region src/core/plugins/open.ts
1793
+ const openPlugin = {
1794
+ name: "open",
1795
+ actions: [{
1796
+ id: "open",
1797
+ label: "Open",
1798
+ shortcut: "O",
1799
+ enabled: (context) => Boolean(context.filePath),
1800
+ onAction: (context) => {
1801
+ if (!context.filePath) return;
1802
+ if (!context.hooks.onOpenFile(context.filePath, context.lineNumber)) openFile(context.filePath, context.lineNumber, context.hooks.transformOpenFileUrl);
1803
+ context.hideContextMenu();
1804
+ context.cleanup();
1805
+ }
1806
+ }]
1807
+ };
1808
+
1809
+ //#endregion
1810
+ //#region src/utils/append-stack-context.ts
1811
+ const appendStackContext = (content, stackContext) => {
1812
+ if (!stackContext) return content;
1813
+ return `${content}\n${stackContext}`;
1814
+ };
1815
+
1816
+ //#endregion
1817
+ //#region src/core/plugins/copy-html.ts
1818
+ const copyHtmlPlugin = createPendingSelectionPlugin({
1819
+ name: "copy-html",
1820
+ contextMenuAction: (api) => ({
1821
+ id: "copy-html",
1822
+ label: "Copy HTML",
1823
+ showInToolbarMenu: true,
1824
+ onAction: async (context) => {
1825
+ await context.performWithFeedback(async () => {
1826
+ const combinedHtml = context.elements.map((element) => stripInternalAttributes(element.outerHTML)).join("\n\n");
1827
+ const transformedHtml = await context.hooks.transformHtmlContent(combinedHtml, context.elements);
1828
+ if (!transformedHtml) return false;
1829
+ return copyContent(appendStackContext(transformedHtml, await api.getStackContext(context.element)), {
1830
+ componentName: context.componentName,
1831
+ tagName: context.tagName
1832
+ });
1833
+ });
1834
+ }
1835
+ })
1836
+ });
1837
+
1838
+ //#endregion
1839
+ //#region src/core/plugins/copy-styles.ts
1840
+ const copyStylesPlugin = createPendingSelectionPlugin({
1841
+ name: "copy-styles",
1842
+ contextMenuAction: (api) => ({
1843
+ id: "copy-styles",
1844
+ label: "Copy styles",
1845
+ showInToolbarMenu: true,
1846
+ onAction: async (context) => {
1847
+ await context.performWithFeedback(async () => {
1848
+ return copyContent(appendStackContext(context.elements.map(extractElementCss).join("\n\n"), await api.getStackContext(context.element)), {
1849
+ componentName: context.componentName,
1850
+ tagName: context.tagName
1851
+ });
1852
+ });
1853
+ }
1854
+ }),
1855
+ cleanup: disposeBaselineStyles
1856
+ });
1857
+
1858
+ //#endregion
1859
+ //#region src/utils/generate-id.ts
1860
+ const generateId = (prefix) => `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
1861
+
1862
+ //#endregion
1863
+ //#region src/utils/comment-storage.ts
1864
+ const COMMENT_ITEMS_KEY = "react-grab-comment-items";
1865
+ const LEGACY_COMMENT_ITEMS_KEY = "react-grab-history-items";
1866
+ const CLEAR_CONFIRMED_KEY = "react-grab-clear-confirmed";
1867
+ const migrateFromLegacyStorage = () => {
1868
+ try {
1869
+ const legacyData = sessionStorage.getItem(LEGACY_COMMENT_ITEMS_KEY);
1870
+ if (legacyData && !sessionStorage.getItem(COMMENT_ITEMS_KEY)) sessionStorage.setItem(COMMENT_ITEMS_KEY, legacyData);
1871
+ sessionStorage.removeItem(LEGACY_COMMENT_ITEMS_KEY);
1872
+ } catch {}
1873
+ };
1874
+ const loadFromSessionStorage = () => {
1875
+ try {
1876
+ const serialized = sessionStorage.getItem(COMMENT_ITEMS_KEY);
1877
+ if (!serialized) return [];
1878
+ return JSON.parse(serialized).map((commentItem) => ({
1879
+ ...commentItem,
1880
+ elementsCount: Math.max(1, commentItem.elementsCount ?? 1),
1881
+ previewBounds: commentItem.previewBounds ?? [],
1882
+ elementSelectors: commentItem.elementSelectors ?? []
1883
+ }));
1884
+ } catch (error) {
1885
+ logRecoverableError("Failed to load comments from sessionStorage", error);
1886
+ return [];
1887
+ }
1888
+ };
1889
+ const readSessionFlag = (key) => {
1890
+ try {
1891
+ return sessionStorage.getItem(key) === "1";
1892
+ } catch {
1893
+ return false;
1894
+ }
1895
+ };
1896
+ const trimToSizeLimit = (items) => {
1897
+ let trimmedItems = items;
1898
+ while (trimmedItems.length > 0) {
1899
+ const serialized = JSON.stringify(trimmedItems);
1900
+ if (new Blob([serialized]).size <= 2097152) return trimmedItems;
1901
+ trimmedItems = trimmedItems.slice(0, -1);
1902
+ }
1903
+ return trimmedItems;
1904
+ };
1905
+ const persistCommentItems = (nextItems) => {
1906
+ commentItems = trimToSizeLimit(nextItems);
1907
+ try {
1908
+ sessionStorage.setItem(COMMENT_ITEMS_KEY, JSON.stringify(commentItems));
1909
+ } catch (error) {
1910
+ logRecoverableError("Failed to save comments to sessionStorage", error);
1911
+ }
1912
+ return commentItems;
1913
+ };
1914
+ let commentItems = [];
1915
+ let didConfirmClear = false;
1916
+ if (typeof window !== "undefined") {
1917
+ migrateFromLegacyStorage();
1918
+ commentItems = loadFromSessionStorage();
1919
+ didConfirmClear = readSessionFlag(CLEAR_CONFIRMED_KEY);
1920
+ }
1921
+ const loadComments = () => commentItems;
1922
+ const addCommentItem = (item) => persistCommentItems([{
1923
+ ...item,
1924
+ id: generateId("comment")
1925
+ }, ...commentItems].slice(0, 20));
1926
+ const removeCommentItem = (itemId) => {
1927
+ persistCommentItems(commentItems.filter((innerItem) => innerItem.id !== itemId));
1928
+ };
1929
+ const clearComments = () => persistCommentItems([]);
1930
+ const isClearConfirmed = () => didConfirmClear;
1931
+ const confirmClear = () => {
1932
+ didConfirmClear = true;
1933
+ try {
1934
+ sessionStorage.setItem(CLEAR_CONFIRMED_KEY, "1");
1935
+ } catch (error) {
1936
+ logRecoverableError("Failed to save clear preference to sessionStorage", error);
1937
+ }
1938
+ };
1939
+
1940
+ //#endregion
1941
+ //#region src/utils/get-nearest-edge.ts
1942
+ const getNearestEdge = (rect) => {
1943
+ const centerX = rect.left + rect.width / 2;
1944
+ const centerY = rect.top + rect.height / 2;
1945
+ const distanceToTop = centerY;
1946
+ const distanceToBottom = window.innerHeight - centerY;
1947
+ const distanceToLeft = centerX;
1948
+ const distanceToRight = window.innerWidth - centerX;
1949
+ const minimumDistance = Math.min(distanceToTop, distanceToBottom, distanceToLeft, distanceToRight);
1950
+ if (minimumDistance === distanceToTop) return "top";
1951
+ if (minimumDistance === distanceToLeft) return "left";
1952
+ if (minimumDistance === distanceToRight) return "right";
1953
+ return "bottom";
1954
+ };
1955
+
1956
+ //#endregion
1957
+ //#region src/core/index.tsx
1958
+ const builtInPlugins = [
1959
+ copyPlugin,
1960
+ commentPlugin,
1961
+ copyHtmlPlugin,
1962
+ copyStylesPlugin,
1963
+ openPlugin
1964
+ ];
1965
+ let hasInited = false;
1966
+ const toolbarStateChangeCallbacks = /* @__PURE__ */ new Set();
1967
+ const init = (rawOptions) => {
1968
+ if (typeof window === "undefined") return createNoopApi();
1969
+ const initialOptions = {
1970
+ enabled: true,
1971
+ activationMode: "toggle",
1972
+ keyHoldDuration: 100,
1973
+ allowActivationInsideInput: true,
1974
+ maxContextLines: 3,
1975
+ ...getScriptOptions(),
1976
+ ...rawOptions
1977
+ };
1978
+ if (initialOptions.enabled === false || hasInited) return createNoopApi();
1979
+ hasInited = true;
1980
+ logIntro();
1981
+ const { enabled: _enabled, ...settableOptions } = initialOptions;
1982
+ return createRoot((dispose) => {
1983
+ let disposed = false;
1984
+ let disposeRenderer;
1985
+ const pluginRegistry = createPluginRegistry(settableOptions);
1986
+ const { store, actions } = createGrabStore({
1987
+ theme: DEFAULT_THEME,
1988
+ keyHoldDuration: pluginRegistry.store.options.keyHoldDuration ?? 100
1989
+ });
1990
+ const isHoldingKeys = createMemo(() => store.current.state === "holding");
1991
+ const isActivated = createMemo(() => store.current.state === "active");
1992
+ const isFrozenPhase = createMemo(() => store.current.state === "active" && store.current.phase === "frozen");
1993
+ const isDragging = createMemo(() => store.current.state === "active" && (store.current.phase === "dragging-select" || store.current.phase === "dragging-reposition"));
1994
+ const isActivelyDragging = createMemo(() => {
1995
+ if (!isDragging()) return false;
1996
+ const dx = Math.abs(store.pointer.x + window.scrollX - store.dragStart.x);
1997
+ const dy = Math.abs(store.pointer.y + window.scrollY - store.dragStart.y);
1998
+ return dx > 2 || dy > 2;
1999
+ });
2000
+ const isDragRepositioning = createMemo(() => store.current.state === "active" && store.current.phase === "dragging-reposition");
2001
+ const didJustDrag = createMemo(() => store.current.state === "active" && store.current.phase === "justDragged");
2002
+ const isCopying = createMemo(() => store.current.state === "copying");
2003
+ const isSelectionInteractionLocked = createMemo(() => isCopying() || store.selectionInteractionLockDepth > 0);
2004
+ const didJustCopy = createMemo(() => store.current.state === "justCopied");
2005
+ const isPromptMode = createMemo(() => store.current.state === "active" && Boolean(store.current.isPromptMode));
2006
+ const isCommentMode = createMemo(() => store.pendingCommentMode || isPromptMode());
2007
+ const isPendingDismiss = createMemo(() => store.current.state === "active" && Boolean(store.current.isPromptMode) && Boolean(store.current.isPendingDismiss));
2008
+ createEffect(on(isActivated, (activated, previousActivated) => {
2009
+ if (activated && !previousActivated) {
2010
+ freezePseudoStates(store.pointer.x, store.pointer.y);
2011
+ freezeGlobalAnimations();
2012
+ document.body.style.touchAction = "none";
2013
+ } else if (!activated && previousActivated) {
2014
+ unfreezePseudoStates();
2015
+ unfreezeGlobalAnimations();
2016
+ document.body.style.touchAction = "";
2017
+ }
2018
+ }));
2019
+ const savedToolbarState = loadToolbarState();
2020
+ const [isEnabled, setIsEnabled] = createSignal(savedToolbarState ? !savedToolbarState.collapsed : true);
2021
+ const [toolbarShakeCount, setToolbarShakeCount] = createSignal(0);
2022
+ const [selectionLabelShakeCount, setSelectionLabelShakeCount] = createSignal(0);
2023
+ const [currentToolbarState, setCurrentToolbarState] = createSignal(savedToolbarState);
2024
+ const [isToolbarSelectHovered, setIsToolbarSelectHovered] = createSignal(false);
2025
+ const [commentItems, setCommentItems] = createSignal(loadComments());
2026
+ const [commentsDropdownPosition, setCommentsDropdownPosition] = createSignal(null);
2027
+ const [toolbarMenuPosition, setToolbarMenuPosition] = createSignal(null);
2028
+ const [clearPromptPosition, setClearPromptPosition] = createSignal(null);
2029
+ let toolbarElement;
2030
+ let dropdownTrackingFrameId = null;
2031
+ const commentElementMap = /* @__PURE__ */ new Map();
2032
+ const [clockFlashTrigger, setClockFlashTrigger] = createSignal(0);
2033
+ const [isCommentsHoverOpen, setIsCommentsHoverOpen] = createSignal(false);
2034
+ let commentsHoverPreviews = [];
2035
+ let shiftSelectionLabelAnchorRatioByElement = /* @__PURE__ */ new WeakMap();
2036
+ const clearShiftSelectionLabelAnchors = () => {
2037
+ shiftSelectionLabelAnchorRatioByElement = /* @__PURE__ */ new WeakMap();
2038
+ };
2039
+ const stopShiftMultiSelecting = () => {
2040
+ setIsShiftMultiSelecting(false);
2041
+ clearShiftSelectionLabelAnchors();
2042
+ };
2043
+ const updateToolbarState = (updates) => {
2044
+ const currentState = currentToolbarState() ?? loadToolbarState();
2045
+ const newState = {
2046
+ edge: currentState?.edge ?? "bottom",
2047
+ ratio: currentState?.ratio ?? .5,
2048
+ collapsed: currentState?.collapsed ?? false,
2049
+ enabled: currentState?.enabled ?? true,
2050
+ defaultAction: currentState?.defaultAction ?? "comment",
2051
+ ...updates
2052
+ };
2053
+ saveToolbarState(newState);
2054
+ setCurrentToolbarState(newState);
2055
+ for (const callback of toolbarStateChangeCallbacks) callback(newState);
2056
+ };
2057
+ const getMappedCommentElements = (commentItemId) => commentElementMap.get(commentItemId) ?? [];
2058
+ const reacquireCommentElements = (commentItem) => {
2059
+ const selectors = commentItem.elementSelectors ?? [];
2060
+ if (selectors.length === 0) return [];
2061
+ const reacquiredElements = [];
2062
+ for (const selector of selectors) {
2063
+ if (!selector) continue;
2064
+ try {
2065
+ const reacquiredElement = document.querySelector(selector);
2066
+ if (isElementConnected(reacquiredElement)) reacquiredElements.push(reacquiredElement);
2067
+ } catch (error) {
2068
+ logRecoverableError("Invalid stored selector", error);
2069
+ }
2070
+ }
2071
+ return reacquiredElements;
2072
+ };
2073
+ const getConnectedCommentElements = (commentItem) => {
2074
+ const mappedElements = getMappedCommentElements(commentItem.id);
2075
+ const connectedMappedElements = mappedElements.filter((mappedElement) => isElementConnected(mappedElement));
2076
+ if (mappedElements.length > 0 && connectedMappedElements.length === mappedElements.length) return connectedMappedElements;
2077
+ const reacquiredElements = reacquireCommentElements(commentItem);
2078
+ if (reacquiredElements.length > 0) {
2079
+ commentElementMap.set(commentItem.id, reacquiredElements);
2080
+ return reacquiredElements;
2081
+ }
2082
+ return connectedMappedElements;
2083
+ };
2084
+ const getFirstConnectedCommentElement = (commentItem) => getConnectedCommentElements(commentItem)[0];
2085
+ const commentsDisconnectedItemIds = createMemo(() => {
2086
+ commentsDropdownPosition();
2087
+ const disconnectedIds = /* @__PURE__ */ new Set();
2088
+ for (const item of commentItems()) if (getConnectedCommentElements(item).length === 0) disconnectedIds.add(item.id);
2089
+ return disconnectedIds;
2090
+ }, void 0, { equals: (prev, next) => {
2091
+ if (prev.size !== next.size) return false;
2092
+ for (const id of next) if (!prev.has(id)) return false;
2093
+ return true;
2094
+ } });
2095
+ const clearHoldTimer = () => {
2096
+ if (activationHoldState.timerId !== null) {
2097
+ clearTimeout(activationHoldState.timerId);
2098
+ activationHoldState.timerId = null;
2099
+ }
2100
+ };
2101
+ const resetCopyConfirmation = () => {
2102
+ activationHoldState.copyWaiting = false;
2103
+ activationHoldState.holdTimerFired = false;
2104
+ activationHoldState.startTimestamp = null;
2105
+ };
2106
+ createEffect(() => {
2107
+ if (store.current.state !== "holding") {
2108
+ clearHoldTimer();
2109
+ return;
2110
+ }
2111
+ activationHoldState.startTimestamp = Date.now();
2112
+ activationHoldState.timerId = window.setTimeout(() => {
2113
+ activationHoldState.timerId = null;
2114
+ if (activationHoldState.copyWaiting) {
2115
+ activationHoldState.holdTimerFired = true;
2116
+ return;
2117
+ }
2118
+ actions.activate();
2119
+ }, store.keyHoldDuration);
2120
+ onCleanup(clearHoldTimer);
2121
+ });
2122
+ createEffect(() => {
2123
+ if (store.current.state !== "active" || store.current.phase !== "justDragged") return;
2124
+ const timerId = setTimeout(() => {
2125
+ actions.finishJustDragged();
2126
+ }, FEEDBACK_DURATION_MS);
2127
+ onCleanup(() => clearTimeout(timerId));
2128
+ });
2129
+ createEffect(() => {
2130
+ if (store.current.state !== "justCopied") return;
2131
+ const timerId = setTimeout(() => {
2132
+ actions.finishJustCopied();
2133
+ }, FEEDBACK_DURATION_MS);
2134
+ onCleanup(() => clearTimeout(timerId));
2135
+ });
2136
+ createEffect(on(isHoldingKeys, (currentlyHolding, previouslyHolding = false) => {
2137
+ if (!previouslyHolding || currentlyHolding || !isActivated()) return;
2138
+ if (pluginRegistry.store.options.activationMode !== "hold") actions.setWasActivatedByToggle(true);
2139
+ pluginRegistry.hooks.onActivate();
2140
+ }));
2141
+ const preparePromptMode = (element, positionX, positionY) => {
2142
+ setCopyStartPosition(element, positionX, positionY);
2143
+ actions.clearInputText();
2144
+ };
2145
+ const activatePromptMode = () => {
2146
+ const element = store.frozenElement || targetElement();
2147
+ if (element) actions.enterPromptMode({
2148
+ x: store.pointer.x,
2149
+ y: store.pointer.y
2150
+ }, element);
2151
+ };
2152
+ const setCopyStartPosition = (element, positionX, positionY) => {
2153
+ actions.setCopyStart({
2154
+ x: positionX,
2155
+ y: positionY
2156
+ }, element);
2157
+ };
2158
+ const elementDetectionState = {
2159
+ lastDetectionTimestamp: 0,
2160
+ pendingDetectionScheduledAt: 0,
2161
+ latestPointerX: 0,
2162
+ latestPointerY: 0
2163
+ };
2164
+ let dragPreviewDebounceTimerId = null;
2165
+ const [debouncedDragPointer, setDebouncedDragPointer] = createSignal(null);
2166
+ const scheduleDragPreviewUpdate = (clientX, clientY) => {
2167
+ if (dragPreviewDebounceTimerId !== null) clearTimeout(dragPreviewDebounceTimerId);
2168
+ setDebouncedDragPointer(null);
2169
+ dragPreviewDebounceTimerId = window.setTimeout(() => {
2170
+ setDebouncedDragPointer({
2171
+ x: clientX,
2172
+ y: clientY
2173
+ });
2174
+ dragPreviewDebounceTimerId = null;
2175
+ }, 32);
2176
+ };
2177
+ let keydownSpamTimerId = null;
2178
+ const activationHoldState = {
2179
+ timerId: null,
2180
+ startTimestamp: null,
2181
+ copyWaiting: false,
2182
+ holdTimerFired: false
2183
+ };
2184
+ let previousSpaceDragPointerPage = null;
2185
+ const [isShiftMultiSelecting, setIsShiftMultiSelecting] = createSignal(false);
2186
+ let lastWindowFocusTimestamp = 0;
2187
+ let isCopyFeedbackCooldownActive = false;
2188
+ let copyFeedbackCooldownTimerId = null;
2189
+ const startCopyFeedbackCooldown = () => {
2190
+ isCopyFeedbackCooldownActive = true;
2191
+ if (copyFeedbackCooldownTimerId !== null) window.clearTimeout(copyFeedbackCooldownTimerId);
2192
+ copyFeedbackCooldownTimerId = window.setTimeout(() => {
2193
+ isCopyFeedbackCooldownActive = false;
2194
+ copyFeedbackCooldownTimerId = null;
2195
+ }, FEEDBACK_DURATION_MS);
2196
+ };
2197
+ const clearCopyFeedbackCooldown = () => {
2198
+ if (copyFeedbackCooldownTimerId !== null) {
2199
+ window.clearTimeout(copyFeedbackCooldownTimerId);
2200
+ copyFeedbackCooldownTimerId = null;
2201
+ }
2202
+ isCopyFeedbackCooldownActive = false;
2203
+ };
2204
+ let selectionSourceRequestVersion = 0;
2205
+ let componentNameRequestVersion = 0;
2206
+ let componentNameDebounceTimerId = null;
2207
+ let keyboardSelectedElement = null;
2208
+ let pendingDefaultActionId = null;
2209
+ const [isPendingContextMenuSelect, setIsPendingContextMenuSelect] = createSignal(false);
2210
+ const [debouncedElementForComponentName, setDebouncedElementForComponentName] = createSignal(null);
2211
+ const [resolvedComponentName, setResolvedComponentName] = createSignal(void 0);
2212
+ const [arrowNavigationElements, setArrowNavigationElements] = createSignal([]);
2213
+ const [arrowNavigationActiveIndex, setArrowNavigationActiveIndex] = createSignal(0);
2214
+ const arrowNavigator = createArrowNavigator(isValidGrabbableElement, createElementBounds);
2215
+ const autoScroller = createAutoScroller(() => store.pointer, () => isDragging(), (scrollDelta) => {
2216
+ if (isDragRepositioning()) {
2217
+ actions.shiftDragStart(scrollDelta);
2218
+ if (previousSpaceDragPointerPage) {
2219
+ previousSpaceDragPointerPage = {
2220
+ x: previousSpaceDragPointerPage.x + scrollDelta.x,
2221
+ y: previousSpaceDragPointerPage.y + scrollDelta.y
2222
+ };
2223
+ return;
2224
+ }
2225
+ const { pageX, pageY } = toPageCoordinates(store.pointer.x, store.pointer.y);
2226
+ previousSpaceDragPointerPage = {
2227
+ x: pageX,
2228
+ y: pageY
2229
+ };
2230
+ }
2231
+ });
2232
+ const isRendererActive = createMemo(() => isActivated() && !isCopying());
2233
+ const grabbedBoxTimeouts = /* @__PURE__ */ new Map();
2234
+ const showTemporaryGrabbedBox = (bounds, element) => {
2235
+ const boxId = generateId("grabbed");
2236
+ const newBox = {
2237
+ id: boxId,
2238
+ bounds,
2239
+ createdAt: Date.now(),
2240
+ element
2241
+ };
2242
+ actions.addGrabbedBox(newBox);
2243
+ pluginRegistry.hooks.onGrabbedBox(bounds, element);
2244
+ const timeoutId = window.setTimeout(() => {
2245
+ grabbedBoxTimeouts.delete(boxId);
2246
+ actions.removeGrabbedBox(boxId);
2247
+ }, FEEDBACK_DURATION_MS);
2248
+ grabbedBoxTimeouts.set(boxId, timeoutId);
2249
+ };
2250
+ const notifyElementsSelected = async (elements) => {
2251
+ const elementsPayload = await Promise.all(elements.map(async (element) => {
2252
+ const source = await resolveSource(element);
2253
+ let componentName = source?.componentName ?? null;
2254
+ const filePath = source?.filePath;
2255
+ const lineNumber = source?.lineNumber ?? void 0;
2256
+ const columnNumber = source?.columnNumber ?? void 0;
2257
+ if (!componentName) componentName = getComponentDisplayName(element);
2258
+ const textContent = element instanceof HTMLElement ? element.innerText?.slice(0, 100) : void 0;
2259
+ return {
2260
+ tagName: getTagName(element),
2261
+ id: element.id || void 0,
2262
+ className: element.getAttribute("class") || void 0,
2263
+ textContent,
2264
+ componentName: componentName ?? void 0,
2265
+ filePath,
2266
+ lineNumber,
2267
+ columnNumber
2268
+ };
2269
+ }));
2270
+ window.dispatchEvent(new CustomEvent("react-grab:element-selected", { detail: { elements: elementsPayload } }));
2271
+ };
2272
+ const labelFadeTimeouts = /* @__PURE__ */ new Map();
2273
+ const cancelLabelFade = (instanceId) => {
2274
+ const existingTimeout = labelFadeTimeouts.get(instanceId);
2275
+ if (existingTimeout !== void 0) {
2276
+ window.clearTimeout(existingTimeout);
2277
+ labelFadeTimeouts.delete(instanceId);
2278
+ }
2279
+ };
2280
+ const cancelAllLabelFades = () => {
2281
+ for (const timeoutId of labelFadeTimeouts.values()) window.clearTimeout(timeoutId);
2282
+ labelFadeTimeouts.clear();
2283
+ };
2284
+ const scheduleLabelFade = (instanceId) => {
2285
+ cancelLabelFade(instanceId);
2286
+ const timeoutId = window.setTimeout(() => {
2287
+ labelFadeTimeouts.delete(instanceId);
2288
+ actions.updateLabelInstance(instanceId, "fading");
2289
+ setTimeout(() => {
2290
+ labelFadeTimeouts.delete(instanceId);
2291
+ actions.removeLabelInstance(instanceId);
2292
+ }, 150);
2293
+ }, FEEDBACK_DURATION_MS);
2294
+ labelFadeTimeouts.set(instanceId, timeoutId);
2295
+ };
2296
+ const handleLabelInstanceHoverChange = (instanceId, isHovered) => {
2297
+ if (isHovered) cancelLabelFade(instanceId);
2298
+ else {
2299
+ const instance = store.labelInstances.find((labelInstance) => labelInstance.id === instanceId);
2300
+ if (instance && instance.status === "copied") scheduleLabelFade(instanceId);
2301
+ }
2302
+ };
2303
+ const createLabelInstance = (bounds, tagName, componentName, status, options) => {
2304
+ actions.clearLabelInstances();
2305
+ cancelAllLabelFades();
2306
+ const instanceId = generateId("label");
2307
+ const boundsCenterX = bounds.x + bounds.width / 2;
2308
+ const boundsHalfWidth = bounds.width / 2;
2309
+ const mouseX = options?.mouseX;
2310
+ const mouseXOffset = mouseX !== void 0 ? mouseX - boundsCenterX : void 0;
2311
+ const instance = {
2312
+ id: instanceId,
2313
+ bounds,
2314
+ boundsMultiple: options?.boundsMultiple,
2315
+ tagName,
2316
+ componentName,
2317
+ status,
2318
+ createdAt: Date.now(),
2319
+ element: options?.element,
2320
+ elements: options?.elements,
2321
+ mouseX,
2322
+ mouseXOffsetFromCenter: mouseXOffset,
2323
+ mouseXOffsetRatio: mouseXOffset !== void 0 && boundsHalfWidth > 0 ? mouseXOffset / boundsHalfWidth : void 0,
2324
+ hideArrow: options?.hideArrow
2325
+ };
2326
+ actions.addLabelInstance(instance);
2327
+ return instanceId;
2328
+ };
2329
+ const clearAllLabels = () => {
2330
+ cancelAllLabelFades();
2331
+ actions.clearLabelInstances();
2332
+ };
2333
+ const updateLabelAfterCopy = (labelInstanceId, didSucceed, errorMessage) => {
2334
+ if (didSucceed) actions.updateLabelInstance(labelInstanceId, "copied");
2335
+ else actions.updateLabelInstance(labelInstanceId, "error", errorMessage || "Unknown error");
2336
+ scheduleLabelFade(labelInstanceId);
2337
+ };
2338
+ const executeCopyOperation = async (clipboardOperation, labelInstanceId, copiedElement, shouldDeactivateAfter) => {
2339
+ clearCopyFeedbackCooldown();
2340
+ if (store.current.state !== "copying") actions.startCopy();
2341
+ let didSucceed = false;
2342
+ let errorMessage;
2343
+ try {
2344
+ await clipboardOperation();
2345
+ didSucceed = true;
2346
+ } catch (error) {
2347
+ errorMessage = normalizeErrorMessage(error, "Action failed");
2348
+ }
2349
+ if (labelInstanceId) updateLabelAfterCopy(labelInstanceId, didSucceed, errorMessage);
2350
+ if (store.current.state !== "copying") return;
2351
+ if (didSucceed) actions.completeCopy(copiedElement);
2352
+ if (shouldDeactivateAfter) deactivateRenderer();
2353
+ else if (didSucceed) {
2354
+ actions.activate();
2355
+ startCopyFeedbackCooldown();
2356
+ } else actions.unfreeze();
2357
+ };
2358
+ const handleCopySuccessWithComments = (options) => {
2359
+ const { copiedElements, content, extraPrompt, elementName, tagName, componentName } = options;
2360
+ pluginRegistry.hooks.onCopySuccess(copiedElements, content);
2361
+ if (!extraPrompt) return;
2362
+ const hasCopiedElements = copiedElements.length > 0;
2363
+ if (hasCopiedElements) {
2364
+ const currentItems = commentItems();
2365
+ for (const [existingItemId, mappedElements] of commentElementMap.entries()) {
2366
+ if (!(mappedElements.length === copiedElements.length && mappedElements.every((mappedElement, index) => mappedElement === copiedElements[index]))) continue;
2367
+ const existingItem = currentItems.find((item) => item.id === existingItemId);
2368
+ if (!existingItem) continue;
2369
+ if (existingItem.commentText === extraPrompt) {
2370
+ removeCommentItem(existingItemId);
2371
+ commentElementMap.delete(existingItemId);
2372
+ break;
2373
+ }
2374
+ }
2375
+ }
2376
+ const elementSelectors = copiedElements.map((copiedElement, index) => createElementSelector(copiedElement, index === 0));
2377
+ const updatedCommentItems = addCommentItem({
2378
+ content,
2379
+ elementName: elementName ?? "element",
2380
+ tagName: tagName ?? "div",
2381
+ componentName: componentName ?? void 0,
2382
+ elementsCount: copiedElements.length,
2383
+ previewBounds: copiedElements.map((copiedElement) => createElementBounds(copiedElement)),
2384
+ elementSelectors,
2385
+ commentText: extraPrompt,
2386
+ timestamp: Date.now()
2387
+ });
2388
+ setCommentItems(updatedCommentItems);
2389
+ setClockFlashTrigger((previous) => previous + 1);
2390
+ const newestCommentItem = updatedCommentItems[0];
2391
+ if (newestCommentItem && hasCopiedElements) commentElementMap.set(newestCommentItem.id, [...copiedElements]);
2392
+ const currentItemIds = new Set(updatedCommentItems.map((item) => item.id));
2393
+ for (const mapItemId of commentElementMap.keys()) if (!currentItemIds.has(mapItemId)) commentElementMap.delete(mapItemId);
2394
+ };
2395
+ const copyWithFallback = (elements, extraPrompt, resolvedComponentName) => {
2396
+ const firstElement = elements[0];
2397
+ const componentName = resolvedComponentName ?? (firstElement ? getComponentDisplayName(firstElement) : null);
2398
+ const tagName = firstElement ? getTagName(firstElement) : null;
2399
+ const elementName = componentName ?? tagName ?? void 0;
2400
+ return tryCopyWithFallback({
2401
+ maxContextLines: pluginRegistry.store.options.maxContextLines,
2402
+ getContent: pluginRegistry.store.options.getContent,
2403
+ componentName: elementName
2404
+ }, {
2405
+ onBeforeCopy: pluginRegistry.hooks.onBeforeCopy,
2406
+ transformSnippet: pluginRegistry.hooks.transformSnippet,
2407
+ transformCopyContent: pluginRegistry.hooks.transformCopyContent,
2408
+ onAfterCopy: pluginRegistry.hooks.onAfterCopy,
2409
+ onCopySuccess: (copiedElements, content) => {
2410
+ handleCopySuccessWithComments({
2411
+ copiedElements,
2412
+ content,
2413
+ extraPrompt,
2414
+ elementName,
2415
+ tagName,
2416
+ componentName
2417
+ });
2418
+ },
2419
+ onCopyError: pluginRegistry.hooks.onCopyError
2420
+ }, elements, extraPrompt);
2421
+ };
2422
+ const copyElementsToClipboard = async (targetElements, extraPrompt, resolvedComponentName) => {
2423
+ if (targetElements.length === 0) return;
2424
+ const unhandledElements = [];
2425
+ const pendingResults = [];
2426
+ for (const element of targetElements) {
2427
+ const { wasIntercepted, pendingResult } = pluginRegistry.hooks.onElementSelect(element);
2428
+ if (!wasIntercepted) unhandledElements.push(element);
2429
+ if (pendingResult) pendingResults.push(pendingResult);
2430
+ if (pluginRegistry.store.theme.grabbedBoxes.enabled) showTemporaryGrabbedBox(createElementBounds(element), element);
2431
+ }
2432
+ await waitUntilNextFrame();
2433
+ if (unhandledElements.length > 0) await copyWithFallback(unhandledElements, extraPrompt, resolvedComponentName);
2434
+ else if (pendingResults.length > 0) {
2435
+ if (!(await Promise.all(pendingResults)).every(Boolean)) throw new Error("Failed to copy");
2436
+ }
2437
+ notifyElementsSelected(targetElements);
2438
+ };
2439
+ const performCopyWithLabel = (options) => {
2440
+ const { element, cursorX, selectedElements, extraPrompt, shouldDeactivateAfter, onComplete, dragRect: passedDragRect } = options;
2441
+ const allTargetElements = selectedElements ?? [element];
2442
+ const dragRect = passedDragRect ?? store.frozenDragRect;
2443
+ const isMultiSelect = allTargetElements.length > 1;
2444
+ const selectionBounds = dragRect && isMultiSelect ? createBoundsFromDragRect(dragRect) : createFlatOverlayBounds(createElementBounds(element));
2445
+ const labelCursorX = isMultiSelect ? selectionBounds.x + selectionBounds.width / 2 : cursorX;
2446
+ const tagName = getTagName(element);
2447
+ clearCopyFeedbackCooldown();
2448
+ actions.startCopy();
2449
+ const labelInstanceId = tagName ? createLabelInstance(selectionBounds, tagName, void 0, "copying", {
2450
+ element,
2451
+ mouseX: labelCursorX,
2452
+ elements: selectedElements
2453
+ }) : null;
2454
+ getNearestComponentName(element).then(async (componentName) => {
2455
+ await executeCopyOperation(() => copyElementsToClipboard(allTargetElements, extraPrompt, componentName ?? void 0), labelInstanceId, element, shouldDeactivateAfter);
2456
+ onComplete?.();
2457
+ }).catch((error) => {
2458
+ logRecoverableError("Copy operation failed", error);
2459
+ if (labelInstanceId) updateLabelAfterCopy(labelInstanceId, false, normalizeErrorMessage(error, "Action failed"));
2460
+ if (store.current.state === "copying") actions.unfreeze();
2461
+ });
2462
+ };
2463
+ const targetElement = createMemo(() => {
2464
+ store.viewportVersion;
2465
+ if (!isRendererActive() || isActivelyDragging() || isSelectionInteractionLocked()) return null;
2466
+ const element = store.detectedElement;
2467
+ if (!isElementConnected(element)) return null;
2468
+ return element;
2469
+ });
2470
+ const effectiveElement = createMemo(() => store.frozenElement || (isFrozenPhase() ? null : targetElement()));
2471
+ createEffect(() => {
2472
+ const element = store.detectedElement;
2473
+ if (!element) return;
2474
+ const intervalId = setInterval(() => {
2475
+ if (!isElementConnected(element)) actions.setDetectedElement(null);
2476
+ }, 100);
2477
+ onCleanup(() => clearInterval(intervalId));
2478
+ });
2479
+ createEffect(on(effectiveElement, (element) => {
2480
+ if (componentNameDebounceTimerId !== null) {
2481
+ clearTimeout(componentNameDebounceTimerId);
2482
+ componentNameDebounceTimerId = null;
2483
+ }
2484
+ if (!element) {
2485
+ setDebouncedElementForComponentName(null);
2486
+ return;
2487
+ }
2488
+ componentNameDebounceTimerId = window.setTimeout(() => {
2489
+ componentNameDebounceTimerId = null;
2490
+ setDebouncedElementForComponentName(element);
2491
+ }, 100);
2492
+ }));
2493
+ onCleanup(() => {
2494
+ if (componentNameDebounceTimerId !== null) {
2495
+ clearTimeout(componentNameDebounceTimerId);
2496
+ componentNameDebounceTimerId = null;
2497
+ }
2498
+ });
2499
+ createEffect(() => {
2500
+ const elements = store.frozenElements;
2501
+ onCleanup(freezeAnimations(elements));
2502
+ });
2503
+ createEffect(on(isActivated, (activated) => {
2504
+ if (!activated) return;
2505
+ if (!pluginRegistry.store.options.freezeReactUpdates) return;
2506
+ onCleanup(freezeUpdates());
2507
+ }));
2508
+ const getSelectionElement = () => {
2509
+ if (store.isTouchMode && isDragging()) {
2510
+ const detected = store.detectedElement;
2511
+ if (!detected || isRootElement(detected)) return void 0;
2512
+ return detected;
2513
+ }
2514
+ const element = effectiveElement();
2515
+ if (!element || isRootElement(element)) return void 0;
2516
+ return element;
2517
+ };
2518
+ const selectionElement = createMemo(() => getSelectionElement());
2519
+ const isSelectionElementVisible = () => {
2520
+ if (!selectionElement()) return false;
2521
+ if (store.isTouchMode && isDragging()) return isRendererActive();
2522
+ return isRendererActive() && !isActivelyDragging();
2523
+ };
2524
+ const frozenElementsBounds = createMemo(() => {
2525
+ store.viewportVersion;
2526
+ const frozenElements = store.frozenElements;
2527
+ if (frozenElements.length === 0) return [];
2528
+ const dragRect = store.frozenDragRect;
2529
+ if (dragRect && frozenElements.length > 1) return [createBoundsFromDragRect(dragRect)];
2530
+ return frozenElements.filter((element) => element !== null).map((element) => createElementBounds(element));
2531
+ });
2532
+ const pendingShiftSelectionElement = createMemo(() => {
2533
+ if (!isShiftMultiSelecting()) return null;
2534
+ if (store.pendingCommentMode || isPendingContextMenuSelect()) return null;
2535
+ const element = store.detectedElement;
2536
+ if (!isElementConnected(element)) return null;
2537
+ if (isRootElement(element)) return null;
2538
+ if (store.frozenElements.includes(element)) return null;
2539
+ return element;
2540
+ });
2541
+ const pendingShiftSelectionBounds = createMemo(() => {
2542
+ store.viewportVersion;
2543
+ const element = pendingShiftSelectionElement();
2544
+ if (!element) return void 0;
2545
+ return createElementBounds(element);
2546
+ });
2547
+ const selectionBounds = createMemo(() => {
2548
+ store.viewportVersion;
2549
+ const frozenElements = store.frozenElements;
2550
+ if (frozenElements.length > 0) {
2551
+ const frozenBounds = frozenElementsBounds();
2552
+ if (frozenElements.length === 1) {
2553
+ const firstBounds = frozenBounds[0];
2554
+ if (firstBounds) return firstBounds;
2555
+ }
2556
+ const dragRect = store.frozenDragRect;
2557
+ if (dragRect) return frozenBounds[0] ?? createBoundsFromDragRect(dragRect);
2558
+ return createFlatOverlayBounds(combineBounds(frozenBounds));
2559
+ }
2560
+ const element = selectionElement();
2561
+ if (!element) return void 0;
2562
+ return createElementBounds(element);
2563
+ });
2564
+ const toPageCoordinates = (clientX, clientY) => ({
2565
+ pageX: clientX + window.scrollX,
2566
+ pageY: clientY + window.scrollY
2567
+ });
2568
+ const calculateDragDistance = (endX, endY) => {
2569
+ const { pageX: endPageX, pageY: endPageY } = toPageCoordinates(endX, endY);
2570
+ return {
2571
+ x: Math.abs(endPageX - store.dragStart.x),
2572
+ y: Math.abs(endPageY - store.dragStart.y)
2573
+ };
2574
+ };
2575
+ const isDraggingBeyondThreshold = createMemo(() => {
2576
+ if (!isDragging()) return false;
2577
+ const dragDistance = calculateDragDistance(store.pointer.x, store.pointer.y);
2578
+ return dragDistance.x > 2 || dragDistance.y > 2;
2579
+ });
2580
+ const calculateDragRectangle = (endX, endY) => {
2581
+ const { pageX: endPageX, pageY: endPageY } = toPageCoordinates(endX, endY);
2582
+ const dragPageX = Math.min(store.dragStart.x, endPageX);
2583
+ const dragPageY = Math.min(store.dragStart.y, endPageY);
2584
+ const dragWidth = Math.abs(endPageX - store.dragStart.x);
2585
+ const dragHeight = Math.abs(endPageY - store.dragStart.y);
2586
+ return {
2587
+ x: dragPageX - window.scrollX,
2588
+ y: dragPageY - window.scrollY,
2589
+ width: dragWidth,
2590
+ height: dragHeight
2591
+ };
2592
+ };
2593
+ const isSpaceActivationKey = (event) => event.code === "Space" || event.key === " ";
2594
+ const startSpaceDragRepositioning = () => {
2595
+ if (!isDragging()) return;
2596
+ actions.startDragReposition();
2597
+ const { pageX, pageY } = toPageCoordinates(store.pointer.x, store.pointer.y);
2598
+ previousSpaceDragPointerPage = {
2599
+ x: pageX,
2600
+ y: pageY
2601
+ };
2602
+ };
2603
+ const stopSpaceDragRepositioning = () => {
2604
+ actions.stopDragReposition();
2605
+ previousSpaceDragPointerPage = null;
2606
+ };
2607
+ const dragBounds = createMemo(() => {
2608
+ store.viewportVersion;
2609
+ if (!isDraggingBeyondThreshold()) return void 0;
2610
+ const drag = calculateDragRectangle(store.pointer.x, store.pointer.y);
2611
+ return {
2612
+ borderRadius: "0px",
2613
+ height: drag.height,
2614
+ transform: "none",
2615
+ width: drag.width,
2616
+ x: drag.x,
2617
+ y: drag.y
2618
+ };
2619
+ });
2620
+ const dragPreviewBounds = createMemo(() => {
2621
+ store.viewportVersion;
2622
+ if (!isDraggingBeyondThreshold()) return [];
2623
+ const pointer = debouncedDragPointer();
2624
+ if (!pointer) return [];
2625
+ const drag = calculateDragRectangle(pointer.x, pointer.y);
2626
+ const elements = getElementsInDrag(drag, isValidGrabbableElement);
2627
+ return (elements.length > 0 ? elements : getElementsInDrag(drag, isValidGrabbableElement, false)).map((element) => createElementBounds(element));
2628
+ });
2629
+ const selectionBoundsMultiple = createMemo(() => {
2630
+ const previewBounds = dragPreviewBounds();
2631
+ if (previewBounds.length > 0) return previewBounds;
2632
+ const pendingBounds = pendingShiftSelectionBounds();
2633
+ if (pendingBounds) return [...frozenElementsBounds(), pendingBounds];
2634
+ return frozenElementsBounds();
2635
+ });
2636
+ const frozenLabelEntries = createMemo(() => {
2637
+ store.viewportVersion;
2638
+ if (isPromptMode() || store.frozenElements.length < 2) return [];
2639
+ return store.frozenElements.filter(isElementConnected).map((element) => {
2640
+ const bounds = createElementBounds(element);
2641
+ const anchorRatio = shiftSelectionLabelAnchorRatioByElement.get(element);
2642
+ const mouseX = anchorRatio === void 0 ? void 0 : bounds.x + bounds.width * anchorRatio;
2643
+ const componentName = getComponentDisplayName(element) ?? void 0;
2644
+ return {
2645
+ tagName: getTagName(element) || "element",
2646
+ componentName,
2647
+ bounds,
2648
+ mouseX
2649
+ };
2650
+ });
2651
+ });
2652
+ const cursorPosition = createMemo(() => {
2653
+ if (isCopying() || isPromptMode()) {
2654
+ store.viewportVersion;
2655
+ const element = store.frozenElement || targetElement();
2656
+ if (element) return {
2657
+ x: getBoundsCenter(createElementBounds(element)).x + store.copyOffsetFromCenterX,
2658
+ y: store.copyStart.y
2659
+ };
2660
+ return {
2661
+ x: store.copyStart.x,
2662
+ y: store.copyStart.y
2663
+ };
2664
+ }
2665
+ return {
2666
+ x: store.pointer.x,
2667
+ y: store.pointer.y
2668
+ };
2669
+ });
2670
+ const shiftSelectionLabelMouseX = createMemo(() => {
2671
+ if (!isShiftMultiSelecting()) return void 0;
2672
+ if (store.frozenElements.length !== 1) return void 0;
2673
+ store.viewportVersion;
2674
+ const element = store.frozenElements[0];
2675
+ if (!isElementConnected(element)) return void 0;
2676
+ const anchorRatio = shiftSelectionLabelAnchorRatioByElement.get(element);
2677
+ if (anchorRatio === void 0) return void 0;
2678
+ const bounds = createElementBounds(element);
2679
+ return bounds.x + bounds.width * anchorRatio;
2680
+ });
2681
+ createEffect(on(() => [targetElement(), store.lastGrabbedElement], ([currentElement, lastElement]) => {
2682
+ if (lastElement && currentElement && lastElement !== currentElement) actions.setLastGrabbed(null);
2683
+ if (currentElement) pluginRegistry.hooks.onElementHover(currentElement);
2684
+ }));
2685
+ createEffect(on(() => targetElement(), (element) => {
2686
+ const currentVersion = ++selectionSourceRequestVersion;
2687
+ const clearSource = () => {
2688
+ if (selectionSourceRequestVersion === currentVersion) actions.setSelectionSource(null, null);
2689
+ };
2690
+ if (!element) {
2691
+ clearSource();
2692
+ return;
2693
+ }
2694
+ resolveSource(element).then((source) => {
2695
+ if (selectionSourceRequestVersion !== currentVersion) return;
2696
+ if (!source) {
2697
+ clearSource();
2698
+ return;
2699
+ }
2700
+ actions.setSelectionSource(source.filePath, source.lineNumber);
2701
+ }).catch(() => {
2702
+ if (selectionSourceRequestVersion === currentVersion) actions.setSelectionSource(null, null);
2703
+ });
2704
+ }));
2705
+ const publicGrabbedBoxes = createMemo(() => store.grabbedBoxes.map((box) => ({
2706
+ id: box.id,
2707
+ bounds: box.bounds,
2708
+ createdAt: box.createdAt
2709
+ })));
2710
+ const publicLabelInstances = createMemo(() => store.labelInstances.map((instance) => ({
2711
+ id: instance.id,
2712
+ status: instance.status,
2713
+ tagName: instance.tagName,
2714
+ componentName: instance.componentName,
2715
+ createdAt: instance.createdAt
2716
+ })));
2717
+ createEffect(on(createMemo(() => {
2718
+ const active = isActivated();
2719
+ const dragging = isDragging();
2720
+ const copying = isCopying();
2721
+ const inputMode = isPromptMode();
2722
+ const target = targetElement();
2723
+ const drag = dragBounds();
2724
+ const themeEnabled = pluginRegistry.store.theme.enabled;
2725
+ const selectionBoxEnabled = pluginRegistry.store.theme.selectionBox.enabled;
2726
+ const dragBoxEnabled = pluginRegistry.store.theme.dragBox.enabled;
2727
+ const draggingBeyondThreshold = isDraggingBeyondThreshold();
2728
+ const effectiveTarget = effectiveElement();
2729
+ const justCopied = didJustCopy();
2730
+ return {
2731
+ isActive: active,
2732
+ isDragging: dragging,
2733
+ isCopying: copying,
2734
+ isPromptMode: inputMode,
2735
+ isSelectionBoxVisible: Boolean(themeEnabled && selectionBoxEnabled && active && !copying && !justCopied && !dragging && effectiveTarget != null),
2736
+ isDragBoxVisible: Boolean(themeEnabled && dragBoxEnabled && active && !copying && draggingBeyondThreshold),
2737
+ targetElement: target,
2738
+ dragBounds: drag ? {
2739
+ x: drag.x,
2740
+ y: drag.y,
2741
+ width: drag.width,
2742
+ height: drag.height
2743
+ } : null,
2744
+ grabbedBoxes: [...publicGrabbedBoxes()],
2745
+ labelInstances: [...publicLabelInstances()],
2746
+ selectionFilePath: store.selectionFilePath,
2747
+ toolbarState: currentToolbarState()
2748
+ };
2749
+ }), (state) => {
2750
+ pluginRegistry.hooks.onStateChange(state);
2751
+ }));
2752
+ createEffect(on(() => [
2753
+ isPromptMode(),
2754
+ store.pointer.x,
2755
+ store.pointer.y,
2756
+ targetElement()
2757
+ ], ([inputMode, x, y, target]) => {
2758
+ pluginRegistry.hooks.onPromptModeChange(inputMode, {
2759
+ x,
2760
+ y,
2761
+ targetElement: target
2762
+ });
2763
+ }));
2764
+ createEffect(on(() => [
2765
+ selectionVisible(),
2766
+ selectionBounds(),
2767
+ targetElement()
2768
+ ], ([visible, bounds, element]) => {
2769
+ pluginRegistry.hooks.onSelectionBox(Boolean(visible), bounds ?? null, element);
2770
+ }));
2771
+ createEffect(on(() => [dragVisible(), dragBounds()], ([visible, bounds]) => {
2772
+ pluginRegistry.hooks.onDragBox(Boolean(visible), bounds ?? null);
2773
+ }));
2774
+ createEffect(on(() => [
2775
+ labelVisible(),
2776
+ labelVariant(),
2777
+ cursorPosition(),
2778
+ targetElement(),
2779
+ store.selectionFilePath,
2780
+ store.selectionLineNumber
2781
+ ], ([visible, variant, position, element, filePath, lineNumber]) => {
2782
+ pluginRegistry.hooks.onElementLabel(Boolean(visible), variant, {
2783
+ x: position.x,
2784
+ y: position.y,
2785
+ content: "",
2786
+ element: element ?? void 0,
2787
+ tagName: element ? getTagName(element) || void 0 : void 0,
2788
+ filePath: filePath ?? void 0,
2789
+ lineNumber: lineNumber ?? void 0
2790
+ });
2791
+ }));
2792
+ let cursorStyleElement = null;
2793
+ const setCursorOverride = (cursor) => {
2794
+ if (cursor) {
2795
+ if (!cursorStyleElement) {
2796
+ cursorStyleElement = document.createElement("style");
2797
+ cursorStyleElement.setAttribute("data-react-grab-cursor", "");
2798
+ const nonce = detectCspNonce();
2799
+ if (nonce) cursorStyleElement.nonce = nonce;
2800
+ hideFromThirdParties(cursorStyleElement);
2801
+ document.head.appendChild(cursorStyleElement);
2802
+ }
2803
+ cursorStyleElement.textContent = `* { cursor: ${cursor} !important; }`;
2804
+ } else if (cursorStyleElement) {
2805
+ cursorStyleElement.remove();
2806
+ cursorStyleElement = null;
2807
+ }
2808
+ };
2809
+ createEffect(on(() => [
2810
+ isActivated(),
2811
+ isCopying(),
2812
+ isPromptMode()
2813
+ ], ([activated, copying, promptMode]) => {
2814
+ if (copying) setCursorOverride("progress");
2815
+ else if (activated && !promptMode) setCursorOverride("crosshair");
2816
+ else setCursorOverride(null);
2817
+ }));
2818
+ const activateRenderer = () => {
2819
+ const wasInHoldingState = isHoldingKeys();
2820
+ actions.activate();
2821
+ if (!wasInHoldingState) pluginRegistry.hooks.onActivate();
2822
+ };
2823
+ const deactivateRenderer = () => {
2824
+ const wasDragging = isDragging();
2825
+ const previousFocused = store.previouslyFocusedElement;
2826
+ stopSpaceDragRepositioning();
2827
+ actions.deactivate();
2828
+ stopShiftMultiSelecting();
2829
+ clearArrowNavigation();
2830
+ keyboardSelectedElement = null;
2831
+ setIsPendingContextMenuSelect(false);
2832
+ if (wasDragging) document.body.style.userSelect = "";
2833
+ if (keydownSpamTimerId) window.clearTimeout(keydownSpamTimerId);
2834
+ autoScroller.stop();
2835
+ if (previousFocused instanceof HTMLElement && isElementConnected(previousFocused)) previousFocused.focus();
2836
+ pluginRegistry.hooks.onDeactivate();
2837
+ };
2838
+ const forceDeactivateAll = () => {
2839
+ if (isHoldingKeys()) actions.releaseHold();
2840
+ if (isActivated()) deactivateRenderer();
2841
+ clearCopyFeedbackCooldown();
2842
+ };
2843
+ const toggleActivate = () => {
2844
+ actions.setWasActivatedByToggle(true);
2845
+ activateRenderer();
2846
+ };
2847
+ const handleInputSubmit = () => {
2848
+ actions.clearLastCopied();
2849
+ const frozenElements = [...store.frozenElements];
2850
+ const element = store.frozenElement || targetElement();
2851
+ const prompt = isPromptMode() ? store.inputText.trim() : "";
2852
+ if (!element) {
2853
+ deactivateRenderer();
2854
+ return;
2855
+ }
2856
+ const elements = frozenElements.length > 0 ? frozenElements : [element];
2857
+ const firstBounds = elements.map((selectedElement) => createElementBounds(selectedElement))[0];
2858
+ const { x: currentX, y: currentY } = getBoundsCenter(firstBounds);
2859
+ const labelPositionX = currentX + store.copyOffsetFromCenterX;
2860
+ actions.setPointer({
2861
+ x: currentX,
2862
+ y: currentY
2863
+ });
2864
+ actions.exitPromptMode();
2865
+ actions.clearInputText();
2866
+ performCopyWithLabel({
2867
+ element,
2868
+ cursorX: labelPositionX,
2869
+ selectedElements: elements,
2870
+ extraPrompt: prompt || void 0,
2871
+ shouldDeactivateAfter: true
2872
+ });
2873
+ };
2874
+ const handleInputCancel = () => {
2875
+ actions.clearLastCopied();
2876
+ if (!isPromptMode()) return;
2877
+ if (isPendingDismiss()) {
2878
+ actions.clearInputText();
2879
+ deactivateRenderer();
2880
+ return;
2881
+ }
2882
+ actions.setPendingDismiss(true);
2883
+ setSelectionLabelShakeCount((count) => count + 1);
2884
+ };
2885
+ const handleConfirmDismiss = () => {
2886
+ actions.clearInputText();
2887
+ deactivateRenderer();
2888
+ };
2889
+ const handleCancelDismiss = () => {
2890
+ actions.setPendingDismiss(false);
2891
+ };
2892
+ const handleToggleExpand = () => {
2893
+ const element = store.frozenElement || targetElement();
2894
+ if (element) preparePromptMode(element, store.pointer.x, store.pointer.y);
2895
+ activatePromptMode();
2896
+ };
2897
+ const handleToggleActive = () => {
2898
+ if (isActivated()) deactivateRenderer();
2899
+ else if (isEnabled()) {
2900
+ const defaultActionId = currentToolbarState()?.defaultAction ?? "comment";
2901
+ if (defaultActionId === "comment") actions.setPendingCommentMode(true);
2902
+ else {
2903
+ pendingDefaultActionId = defaultActionId;
2904
+ setIsPendingContextMenuSelect(true);
2905
+ }
2906
+ toggleActivate();
2907
+ }
2908
+ };
2909
+ const enterCommentModeForElement = (element, positionX, positionY) => {
2910
+ actions.setPendingCommentMode(false);
2911
+ actions.clearInputText();
2912
+ actions.enterPromptMode({
2913
+ x: positionX,
2914
+ y: positionY
2915
+ }, element);
2916
+ };
2917
+ const openContextMenu = (element, position) => {
2918
+ stopShiftMultiSelecting();
2919
+ actions.showContextMenu(position, element);
2920
+ clearArrowNavigation();
2921
+ dismissAllPopups();
2922
+ pluginRegistry.hooks.onContextMenu(element, position);
2923
+ };
2924
+ const runPendingDefaultAction = (element, position) => {
2925
+ const actionId = pendingDefaultActionId;
2926
+ pendingDefaultActionId = null;
2927
+ if (!actionId) return;
2928
+ const action = pluginRegistry.store.actions.find((registeredAction) => registeredAction.id === actionId);
2929
+ if (!action) {
2930
+ handleSetDefaultAction(DEFAULT_ACTION_ID);
2931
+ openContextMenu(element, position);
2932
+ return;
2933
+ }
2934
+ const elementBounds = createElementBounds(element);
2935
+ const context = buildActionContext({
2936
+ element,
2937
+ filePath: store.selectionFilePath ?? void 0,
2938
+ lineNumber: store.selectionLineNumber ?? void 0,
2939
+ tagName: getTagName(element) || void 0,
2940
+ componentName: resolvedComponentName(),
2941
+ position,
2942
+ shouldDeferHideContextMenu: false,
2943
+ performWithFeedbackOptions: {
2944
+ fallbackBounds: elementBounds,
2945
+ fallbackSelectionBounds: [elementBounds],
2946
+ position
2947
+ }
2948
+ });
2949
+ action.onAction(context);
2950
+ };
2951
+ const handleComment = () => {
2952
+ if (!isEnabled()) return;
2953
+ if (isActivated() && isCommentMode()) {
2954
+ deactivateRenderer();
2955
+ return;
2956
+ }
2957
+ actions.setPendingCommentMode(true);
2958
+ if (!isActivated()) toggleActivate();
2959
+ };
2960
+ const handlePointerMove = (clientX, clientY, isShiftHeld) => {
2961
+ const shouldTrackPendingShiftSelection = isShiftHeld && isShiftMultiSelecting() && !isDragging() && !store.pendingCommentMode && !isPendingContextMenuSelect();
2962
+ if (!isEnabled() || isPromptMode() || isFrozenPhase() && !shouldTrackPendingShiftSelection || isSelectionInteractionLocked() || store.contextMenuPosition !== null) return;
2963
+ actions.setPointer({
2964
+ x: clientX,
2965
+ y: clientY
2966
+ });
2967
+ elementDetectionState.latestPointerX = clientX;
2968
+ elementDetectionState.latestPointerY = clientY;
2969
+ if (shouldTrackPendingShiftSelection) {
2970
+ const candidate = getElementAtPosition(clientX, clientY);
2971
+ if (candidate !== store.detectedElement) actions.setDetectedElement(candidate);
2972
+ return;
2973
+ }
2974
+ const now = performance.now();
2975
+ const isDetectionPending = elementDetectionState.pendingDetectionScheduledAt > 0 && now - elementDetectionState.pendingDetectionScheduledAt < 200;
2976
+ if (now - elementDetectionState.lastDetectionTimestamp >= 32 && !isDetectionPending) {
2977
+ elementDetectionState.lastDetectionTimestamp = now;
2978
+ elementDetectionState.pendingDetectionScheduledAt = now;
2979
+ setTimeout(() => {
2980
+ const candidate = getElementAtPosition(elementDetectionState.latestPointerX, elementDetectionState.latestPointerY);
2981
+ if (candidate !== store.detectedElement) actions.setDetectedElement(candidate);
2982
+ elementDetectionState.pendingDetectionScheduledAt = 0;
2983
+ });
2984
+ }
2985
+ if (isDragging()) {
2986
+ if (isDragRepositioning()) {
2987
+ const { pageX, pageY } = toPageCoordinates(clientX, clientY);
2988
+ if (previousSpaceDragPointerPage) actions.shiftDragStart({
2989
+ x: pageX - previousSpaceDragPointerPage.x,
2990
+ y: pageY - previousSpaceDragPointerPage.y
2991
+ });
2992
+ previousSpaceDragPointerPage = {
2993
+ x: pageX,
2994
+ y: pageY
2995
+ };
2996
+ }
2997
+ scheduleDragPreviewUpdate(clientX, clientY);
2998
+ const direction = getAutoScrollDirection(clientX, clientY);
2999
+ const isNearEdge = direction.top || direction.bottom || direction.left || direction.right;
3000
+ if (isNearEdge && !autoScroller.isActive()) autoScroller.start();
3001
+ else if (!isNearEdge && autoScroller.isActive()) autoScroller.stop();
3002
+ }
3003
+ };
3004
+ const handlePointerDown = (clientX, clientY, isShiftHeld) => {
3005
+ if (!isRendererActive() || isSelectionInteractionLocked()) return false;
3006
+ if (!isShiftHeld && isShiftMultiSelecting()) stopShiftMultiSelecting();
3007
+ actions.startDrag({
3008
+ x: clientX,
3009
+ y: clientY
3010
+ }, isShiftHeld);
3011
+ actions.setPointer({
3012
+ x: clientX,
3013
+ y: clientY
3014
+ });
3015
+ document.body.style.userSelect = "none";
3016
+ scheduleDragPreviewUpdate(clientX, clientY);
3017
+ pluginRegistry.hooks.onDragStart(clientX + window.scrollX, clientY + window.scrollY);
3018
+ return true;
3019
+ };
3020
+ const toggleShiftMultiSelection = (element, pointer) => {
3021
+ const wasElementSelected = store.frozenElements.includes(element);
3022
+ const isFirstFrozenElement = store.frozenElements.length === 0;
3023
+ if (!wasElementSelected) {
3024
+ const anchorRatio = getElementAnchorRatio(createElementBounds(element), pointer);
3025
+ shiftSelectionLabelAnchorRatioByElement.set(element, anchorRatio);
3026
+ if (isFirstFrozenElement) setResolvedComponentName(getComponentDisplayName(element) ?? void 0);
3027
+ }
3028
+ actions.toggleFrozenElement(element);
3029
+ clearElementPositionCache();
3030
+ const isElementStillSelected = store.frozenElements.includes(element);
3031
+ if (!isElementStillSelected) shiftSelectionLabelAnchorRatioByElement.delete(element);
3032
+ if (store.frozenElements.length === 0) {
3033
+ stopShiftMultiSelecting();
3034
+ actions.unfreeze();
3035
+ return;
3036
+ }
3037
+ freezeAllAnimations(store.frozenElements);
3038
+ setIsShiftMultiSelecting(true);
3039
+ actions.setPointer(pointer);
3040
+ actions.setLastGrabbed(isElementStillSelected ? element : store.frozenElements[store.frozenElements.length - 1]);
3041
+ actions.freeze();
3042
+ clearArrowNavigation();
3043
+ };
3044
+ const commitShiftMultiSelection = () => {
3045
+ stopShiftMultiSelecting();
3046
+ const accumulatedElements = store.frozenElements.filter(isElementConnected);
3047
+ if (accumulatedElements.length === 0) {
3048
+ actions.unfreeze();
3049
+ return;
3050
+ }
3051
+ performCopyWithLabel({
3052
+ element: accumulatedElements[0],
3053
+ cursorX: store.pointer.x,
3054
+ selectedElements: accumulatedElements,
3055
+ shouldDeactivateAfter: store.wasActivatedByToggle
3056
+ });
3057
+ };
3058
+ const handleDragSelection = (dragSelectionRect, hasModifierKeyHeld, isShiftHeld) => {
3059
+ const elements = getElementsInDrag(dragSelectionRect, isValidGrabbableElement);
3060
+ const selectedElements = elements.length > 0 ? elements : getElementsInDrag(dragSelectionRect, isValidGrabbableElement, false);
3061
+ if (selectedElements.length === 0) return;
3062
+ const isShiftAccumulating = isShiftHeld && !store.pendingCommentMode && !isPendingContextMenuSelect();
3063
+ if (isShiftAccumulating) actions.addFrozenElements(selectedElements);
3064
+ freezeAllAnimations(isShiftAccumulating ? store.frozenElements : selectedElements);
3065
+ pluginRegistry.hooks.onDragEnd(selectedElements, dragSelectionRect);
3066
+ if (isShiftAccumulating) {
3067
+ const lastElement = selectedElements[selectedElements.length - 1];
3068
+ setIsShiftMultiSelecting(true);
3069
+ clearElementPositionCache();
3070
+ actions.setPointer(getBoundsCenter(createElementBounds(lastElement)));
3071
+ actions.setLastGrabbed(lastElement);
3072
+ actions.freeze();
3073
+ clearArrowNavigation();
3074
+ return;
3075
+ }
3076
+ const firstElement = selectedElements[0];
3077
+ const center = getBoundsCenter(createElementBounds(firstElement));
3078
+ actions.setPointer(center);
3079
+ actions.setFrozenElements(selectedElements);
3080
+ const dragRect = createPageRectFromBounds(dragSelectionRect);
3081
+ actions.setFrozenDragRect(dragRect);
3082
+ actions.freeze();
3083
+ actions.setLastGrabbed(firstElement);
3084
+ if (store.pendingCommentMode) {
3085
+ enterCommentModeForElement(firstElement, center.x, center.y);
3086
+ return;
3087
+ }
3088
+ if (isPendingContextMenuSelect()) {
3089
+ setIsPendingContextMenuSelect(false);
3090
+ if (pendingDefaultActionId) runPendingDefaultAction(firstElement, center);
3091
+ else openContextMenu(firstElement, center);
3092
+ return;
3093
+ }
3094
+ const shouldDeactivateAfter = store.wasActivatedByToggle && !hasModifierKeyHeld;
3095
+ performCopyWithLabel({
3096
+ element: firstElement,
3097
+ cursorX: center.x,
3098
+ selectedElements,
3099
+ shouldDeactivateAfter,
3100
+ dragRect
3101
+ });
3102
+ };
3103
+ const getFrozenElementAtPosition = (position) => {
3104
+ for (const element of store.frozenElements) {
3105
+ if (!isElementConnected(element)) continue;
3106
+ if (isPositionInsideBounds(position, createElementBounds(element))) return element;
3107
+ }
3108
+ return null;
3109
+ };
3110
+ const handleSingleClick = (clientX, clientY, hasModifierKeyHeld, isShiftHeld) => {
3111
+ const validFrozenElement = isElementConnected(store.frozenElement) ? store.frozenElement : null;
3112
+ const validKeyboardSelectedElement = isElementConnected(keyboardSelectedElement) ? keyboardSelectedElement : null;
3113
+ const elementAtPointer = getElementsAtPoint(clientX, clientY).find(isValidGrabbableElement) ?? null;
3114
+ const selectedElementUnderPointer = elementAtPointer ?? (isElementConnected(store.detectedElement) ? store.detectedElement : null);
3115
+ const selectedElement = selectedElementUnderPointer ?? validFrozenElement ?? validKeyboardSelectedElement;
3116
+ if (!selectedElement) return;
3117
+ if (isShiftHeld && !store.pendingCommentMode && !isPendingContextMenuSelect()) {
3118
+ if (elementAtPointer !== null) toggleShiftMultiSelection(elementAtPointer, {
3119
+ x: clientX,
3120
+ y: clientY
3121
+ });
3122
+ return;
3123
+ }
3124
+ let positionX;
3125
+ let positionY;
3126
+ const didResolveFromFrozenElement = selectedElementUnderPointer === null && validFrozenElement === selectedElement;
3127
+ const didResolveFromKeyboardElement = selectedElementUnderPointer === null && validFrozenElement === null && validKeyboardSelectedElement === selectedElement;
3128
+ if (didResolveFromFrozenElement) {
3129
+ positionX = store.pointer.x;
3130
+ positionY = store.pointer.y;
3131
+ } else if (didResolveFromKeyboardElement) {
3132
+ const elementCenter = getBoundsCenter(createElementBounds(selectedElement));
3133
+ positionX = elementCenter.x;
3134
+ positionY = elementCenter.y;
3135
+ } else {
3136
+ positionX = clientX;
3137
+ positionY = clientY;
3138
+ }
3139
+ keyboardSelectedElement = null;
3140
+ if (store.pendingCommentMode) {
3141
+ enterCommentModeForElement(selectedElement, positionX, positionY);
3142
+ return;
3143
+ }
3144
+ if (isPendingContextMenuSelect()) {
3145
+ setIsPendingContextMenuSelect(false);
3146
+ const { wasIntercepted } = pluginRegistry.hooks.onElementSelect(selectedElement);
3147
+ if (wasIntercepted) return;
3148
+ freezeAllAnimations([selectedElement]);
3149
+ actions.setFrozenElement(selectedElement);
3150
+ const position = {
3151
+ x: positionX,
3152
+ y: positionY
3153
+ };
3154
+ actions.setPointer(position);
3155
+ actions.freeze();
3156
+ if (pendingDefaultActionId) runPendingDefaultAction(selectedElement, position);
3157
+ else openContextMenu(selectedElement, position);
3158
+ return;
3159
+ }
3160
+ const shouldDeactivateAfter = store.wasActivatedByToggle && !hasModifierKeyHeld;
3161
+ actions.setLastGrabbed(selectedElement);
3162
+ performCopyWithLabel({
3163
+ element: selectedElement,
3164
+ cursorX: positionX,
3165
+ shouldDeactivateAfter
3166
+ });
3167
+ };
3168
+ const cancelActiveDrag = () => {
3169
+ if (!isDragging()) return;
3170
+ stopSpaceDragRepositioning();
3171
+ actions.cancelDrag();
3172
+ autoScroller.stop();
3173
+ document.body.style.userSelect = "";
3174
+ };
3175
+ const handlePointerUp = (clientX, clientY, hasModifierKeyHeld, isShiftHeld) => {
3176
+ if (!isDragging()) return;
3177
+ if (dragPreviewDebounceTimerId !== null) {
3178
+ clearTimeout(dragPreviewDebounceTimerId);
3179
+ dragPreviewDebounceTimerId = null;
3180
+ }
3181
+ setDebouncedDragPointer(null);
3182
+ const dragDistance = calculateDragDistance(clientX, clientY);
3183
+ const wasDragGesture = dragDistance.x > 2 || dragDistance.y > 2;
3184
+ const dragSelectionRect = wasDragGesture ? calculateDragRectangle(clientX, clientY) : null;
3185
+ if (wasDragGesture) actions.endDrag();
3186
+ else actions.cancelDrag();
3187
+ stopSpaceDragRepositioning();
3188
+ autoScroller.stop();
3189
+ document.body.style.userSelect = "";
3190
+ if (dragSelectionRect) handleDragSelection(dragSelectionRect, hasModifierKeyHeld, isShiftHeld);
3191
+ else handleSingleClick(clientX, clientY, hasModifierKeyHeld, isShiftHeld);
3192
+ };
3193
+ const eventListenerManager = createEventListenerManager();
3194
+ const keyboardClaimer = setupKeyboardEventClaimer();
3195
+ const blockEnterIfNeeded = (event) => {
3196
+ let originalKey;
3197
+ try {
3198
+ originalKey = keyboardClaimer.originalKeyDescriptor?.get ? keyboardClaimer.originalKeyDescriptor.get.call(event) : event.key;
3199
+ } catch {
3200
+ return false;
3201
+ }
3202
+ const isEnterKey = originalKey === "Enter" || isEnterCode(event.code);
3203
+ const isOverlayActive = isActivated() || isHoldingKeys();
3204
+ if (isEnterKey && isOverlayActive && !isPromptMode() && !store.wasActivatedByToggle && clearPromptPosition() === null) {
3205
+ keyboardClaimer.claimedEvents.add(event);
3206
+ event.preventDefault();
3207
+ event.stopImmediatePropagation();
3208
+ return true;
3209
+ }
3210
+ return false;
3211
+ };
3212
+ eventListenerManager.addDocumentListener("keydown", blockEnterIfNeeded, { capture: true });
3213
+ eventListenerManager.addDocumentListener("keyup", blockEnterIfNeeded, { capture: true });
3214
+ eventListenerManager.addDocumentListener("keypress", blockEnterIfNeeded, { capture: true });
3215
+ const clearArrowNavigation = () => {
3216
+ setArrowNavigationElements([]);
3217
+ setArrowNavigationActiveIndex(0);
3218
+ arrowNavigator.clearHistory();
3219
+ };
3220
+ const selectAndFocusElement = (element) => {
3221
+ actions.setFrozenElement(element);
3222
+ actions.freeze();
3223
+ keyboardSelectedElement = element;
3224
+ const center = getBoundsCenter(createElementBounds(element));
3225
+ actions.setPointer(center);
3226
+ if (store.contextMenuPosition !== null) actions.showContextMenu(center, element);
3227
+ };
3228
+ const openArrowNavigationMenu = (anchorElement) => {
3229
+ const probePoint = getVisibleBoundsCenter(createElementBounds(anchorElement));
3230
+ const elementsAtPoint = getElementsAtPoint(probePoint.x, probePoint.y).filter(isValidGrabbableElement).reverse();
3231
+ setArrowNavigationElements(elementsAtPoint);
3232
+ setArrowNavigationActiveIndex(Math.max(0, elementsAtPoint.indexOf(anchorElement)));
3233
+ };
3234
+ const handleArrowNavigationSelect = (index) => {
3235
+ const targetElement = arrowNavigationElements()[index];
3236
+ if (!targetElement) return;
3237
+ setArrowNavigationActiveIndex(index);
3238
+ arrowNavigator.clearHistory();
3239
+ selectAndFocusElement(targetElement);
3240
+ };
3241
+ const handleArrowNavigation = (event) => {
3242
+ if (!isActivated() || isPromptMode()) return false;
3243
+ if (isShiftMultiSelecting()) return false;
3244
+ if (!ARROW_KEYS.has(event.key)) return false;
3245
+ let currentElement = effectiveElement();
3246
+ const isInitialSelection = !currentElement;
3247
+ if (!currentElement) currentElement = getElementAtPosition(window.innerWidth / 2, window.innerHeight / 2);
3248
+ if (!currentElement) return false;
3249
+ if (!(event.key === "ArrowUp" || event.key === "ArrowDown")) {
3250
+ clearArrowNavigation();
3251
+ const nextElement = arrowNavigator.findNext(event.key, currentElement);
3252
+ if (!nextElement && !isInitialSelection) return false;
3253
+ event.preventDefault();
3254
+ event.stopPropagation();
3255
+ selectAndFocusElement(nextElement ?? currentElement);
3256
+ return true;
3257
+ }
3258
+ if (arrowNavigationElements().length === 0) openArrowNavigationMenu(currentElement);
3259
+ const elementToSelect = arrowNavigator.findNext(event.key, currentElement) ?? currentElement;
3260
+ event.preventDefault();
3261
+ event.stopPropagation();
3262
+ selectAndFocusElement(elementToSelect);
3263
+ const newIndex = arrowNavigationElements().indexOf(elementToSelect);
3264
+ if (newIndex !== -1) setArrowNavigationActiveIndex(newIndex);
3265
+ else openArrowNavigationMenu(elementToSelect);
3266
+ return true;
3267
+ };
3268
+ const handleEnterKeyActivation = (event) => {
3269
+ if (!isEnterCode(event.code)) return false;
3270
+ if (isKeyboardEventTriggeredByInput(event)) return false;
3271
+ if (isSelectionInteractionLocked()) return false;
3272
+ const copiedElement = store.lastCopiedElement;
3273
+ if (!isHoldingKeys() && !isPromptMode() && !isActivated() && copiedElement && isElementConnected(copiedElement) && !store.labelInstances.some((instance) => instance.status === "copied" || instance.status === "fading")) {
3274
+ event.preventDefault();
3275
+ event.stopImmediatePropagation();
3276
+ const center = getBoundsCenter(createElementBounds(copiedElement));
3277
+ actions.setPointer(center);
3278
+ preparePromptMode(copiedElement, center.x, center.y);
3279
+ actions.setFrozenElement(copiedElement);
3280
+ actions.clearLastCopied();
3281
+ activatePromptMode();
3282
+ if (!isActivated()) activateRenderer();
3283
+ return true;
3284
+ }
3285
+ if (isHoldingKeys() && !isPromptMode()) {
3286
+ event.preventDefault();
3287
+ event.stopImmediatePropagation();
3288
+ const element = store.frozenElement || targetElement();
3289
+ if (element) preparePromptMode(element, store.pointer.x, store.pointer.y);
3290
+ actions.setPointer({
3291
+ x: store.pointer.x,
3292
+ y: store.pointer.y
3293
+ });
3294
+ if (element) actions.setFrozenElement(element);
3295
+ activatePromptMode();
3296
+ if (keydownSpamTimerId !== null) {
3297
+ window.clearTimeout(keydownSpamTimerId);
3298
+ keydownSpamTimerId = null;
3299
+ }
3300
+ if (!isActivated()) activateRenderer();
3301
+ return true;
3302
+ }
3303
+ return false;
3304
+ };
3305
+ const handleOpenFileShortcut = (event) => {
3306
+ if (event.key?.toLowerCase() !== "o" || isPromptMode()) return false;
3307
+ if (!isActivated() || !(event.metaKey || event.ctrlKey)) return false;
3308
+ const filePath = store.selectionFilePath;
3309
+ const lineNumber = store.selectionLineNumber;
3310
+ if (!filePath) return false;
3311
+ event.preventDefault();
3312
+ event.stopPropagation();
3313
+ if (!pluginRegistry.hooks.onOpenFile(filePath, lineNumber ?? void 0)) openFile(filePath, lineNumber ?? void 0, pluginRegistry.hooks.transformOpenFileUrl);
3314
+ return true;
3315
+ };
3316
+ const arrowNavigationItems = createMemo(() => arrowNavigationElements().map((element) => ({
3317
+ tagName: getTagName(element) || "element",
3318
+ componentName: getComponentDisplayName(element) ?? void 0
3319
+ })));
3320
+ const arrowNavigationState = createMemo(() => ({
3321
+ items: arrowNavigationItems(),
3322
+ activeIndex: arrowNavigationActiveIndex(),
3323
+ isVisible: arrowNavigationElements().length > 0
3324
+ }));
3325
+ const handleActivationKeys = (event) => {
3326
+ if (!pluginRegistry.store.options.allowActivationInsideInput && isKeyboardEventTriggeredByInput(event)) return;
3327
+ if (!isTargetKeyCombination(event, pluginRegistry.store.options)) {
3328
+ if ((event.metaKey || event.ctrlKey) && !MODIFIER_KEYS.includes(event.key) && !isEnterCode(event.code)) {
3329
+ if (isActivated() && !store.wasActivatedByToggle) deactivateRenderer();
3330
+ else if (isHoldingKeys()) {
3331
+ clearHoldTimer();
3332
+ resetCopyConfirmation();
3333
+ actions.releaseHold();
3334
+ }
3335
+ }
3336
+ if (!isEnterCode(event.code) || !isHoldingKeys()) return;
3337
+ }
3338
+ if ((isActivated() || isHoldingKeys()) && !isPromptMode()) {
3339
+ event.preventDefault();
3340
+ if (isEnterCode(event.code)) event.stopImmediatePropagation();
3341
+ }
3342
+ if (isActivated()) {
3343
+ if (store.wasActivatedByToggle && pluginRegistry.store.options.activationMode !== "hold") return;
3344
+ if (event.repeat) return;
3345
+ if (keydownSpamTimerId !== null) window.clearTimeout(keydownSpamTimerId);
3346
+ keydownSpamTimerId = window.setTimeout(() => {
3347
+ deactivateRenderer();
3348
+ }, 200);
3349
+ return;
3350
+ }
3351
+ if (isHoldingKeys() && event.repeat) {
3352
+ if (activationHoldState.copyWaiting) {
3353
+ const shouldActivate = activationHoldState.holdTimerFired;
3354
+ resetCopyConfirmation();
3355
+ if (shouldActivate) actions.activate();
3356
+ }
3357
+ return;
3358
+ }
3359
+ if (isCopying() || didJustCopy()) return;
3360
+ if (!isHoldingKeys()) {
3361
+ let activationDuration = pluginRegistry.store.options.keyHoldDuration ?? 100;
3362
+ if (isKeyboardEventTriggeredByInput(event)) if (hasTextSelectionInInput(event)) activationDuration += 600;
3363
+ else activationDuration += 400;
3364
+ else if (hasTextSelectionOnPage()) activationDuration += 600;
3365
+ resetCopyConfirmation();
3366
+ actions.startHold(activationDuration);
3367
+ }
3368
+ };
3369
+ eventListenerManager.addWindowListener("keydown", (event) => {
3370
+ blockEnterIfNeeded(event);
3371
+ if (!isEnabled()) {
3372
+ if (isTargetKeyCombination(event, pluginRegistry.store.options) && !event.repeat) setToolbarShakeCount((count) => count + 1);
3373
+ return;
3374
+ }
3375
+ const isEnterToActivateInput = isEnterCode(event.code) && isHoldingKeys() && !isPromptMode();
3376
+ const isFromReactGrabInput = isEventFromOverlay(event, "data-react-grab-input");
3377
+ if (isPromptMode() && isTargetKeyCombination(event, pluginRegistry.store.options) && !event.repeat && !isFromReactGrabInput) {
3378
+ event.preventDefault();
3379
+ event.stopPropagation();
3380
+ handleInputCancel();
3381
+ return;
3382
+ }
3383
+ if (event.key === "Escape" && clearPromptPosition() !== null) return;
3384
+ if (event.key === "Escape" && commentsDropdownPosition() !== null) {
3385
+ dismissCommentsDropdown();
3386
+ return;
3387
+ }
3388
+ if (event.key === "Escape" && toolbarMenuPosition() !== null) {
3389
+ dismissToolbarMenu();
3390
+ return;
3391
+ }
3392
+ const isFromOverlay = isEventFromOverlay(event, "data-react-grab-ignore-events") && !isEnterToActivateInput;
3393
+ if (isPromptMode() || isFromOverlay) {
3394
+ if (event.key === "Escape") {
3395
+ if (isPromptMode()) handleInputCancel();
3396
+ else if (store.wasActivatedByToggle) deactivateRenderer();
3397
+ }
3398
+ if (isFromOverlay && ARROW_KEYS.has(event.key)) {
3399
+ if (handleArrowNavigation(event)) return;
3400
+ }
3401
+ return;
3402
+ }
3403
+ if (isDragging() && isSpaceActivationKey(event)) {
3404
+ if (!event.repeat) startSpaceDragRepositioning();
3405
+ event.preventDefault();
3406
+ event.stopPropagation();
3407
+ return;
3408
+ }
3409
+ if (event.key === "Escape") {
3410
+ if (isHoldingKeys() || store.wasActivatedByToggle) {
3411
+ deactivateRenderer();
3412
+ return;
3413
+ }
3414
+ }
3415
+ if (isActivated() && !MODIFIER_KEYS.includes(event.key)) event.preventDefault();
3416
+ const didWindowJustRegainFocus = Date.now() - lastWindowFocusTimestamp < 200;
3417
+ if (handleArrowNavigation(event)) return;
3418
+ if (handleEnterKeyActivation(event)) return;
3419
+ if (handleOpenFileShortcut(event)) return;
3420
+ if (!didWindowJustRegainFocus) handleActivationKeys(event);
3421
+ }, { capture: true });
3422
+ eventListenerManager.addWindowListener("keyup", (event) => {
3423
+ if (blockEnterIfNeeded(event)) return;
3424
+ if (isSpaceActivationKey(event) && isDragRepositioning()) {
3425
+ stopSpaceDragRepositioning();
3426
+ event.preventDefault();
3427
+ event.stopPropagation();
3428
+ }
3429
+ if (event.key === "Shift" && isShiftMultiSelecting()) {
3430
+ if (isDragging()) cancelActiveDrag();
3431
+ commitShiftMultiSelection();
3432
+ return;
3433
+ }
3434
+ if (isEventFromOverlay(event, "data-react-grab-ignore-events")) return;
3435
+ const requiredModifiers = getRequiredModifiers(pluginRegistry.store.options);
3436
+ const isReleasingModifier = requiredModifiers.metaKey || requiredModifiers.ctrlKey ? isMac() ? !event.metaKey : !event.ctrlKey : requiredModifiers.shiftKey && !event.shiftKey || requiredModifiers.altKey && !event.altKey;
3437
+ const isReleasingActivationKey = pluginRegistry.store.options.activationKey ? typeof pluginRegistry.store.options.activationKey === "function" ? pluginRegistry.store.options.activationKey(event) : parseActivationKey(pluginRegistry.store.options.activationKey)(event) : isCLikeKey(event.key, event.code);
3438
+ if (didJustCopy() || isCopyFeedbackCooldownActive) {
3439
+ if (isReleasingActivationKey || isReleasingModifier) {
3440
+ clearCopyFeedbackCooldown();
3441
+ deactivateRenderer();
3442
+ }
3443
+ return;
3444
+ }
3445
+ if (!isHoldingKeys() && !isActivated()) return;
3446
+ if (isPromptMode()) return;
3447
+ const hasCustomShortcut = Boolean(pluginRegistry.store.options.activationKey);
3448
+ const isHoldMode = pluginRegistry.store.options.activationMode === "hold";
3449
+ const isDragGestureInProgress = isDragging();
3450
+ if (isActivated()) {
3451
+ const hasContextMenu = store.contextMenuPosition !== null;
3452
+ if (isReleasingModifier) {
3453
+ if (store.wasActivatedByToggle && pluginRegistry.store.options.activationMode !== "hold") return;
3454
+ if (hasContextMenu) return;
3455
+ deactivateRenderer();
3456
+ } else if (isHoldMode && isReleasingActivationKey) {
3457
+ if (keydownSpamTimerId !== null) {
3458
+ window.clearTimeout(keydownSpamTimerId);
3459
+ keydownSpamTimerId = null;
3460
+ }
3461
+ if (hasContextMenu) return;
3462
+ if (isDragGestureInProgress) return;
3463
+ deactivateRenderer();
3464
+ } else if (!hasCustomShortcut && isReleasingActivationKey && keydownSpamTimerId !== null) {
3465
+ window.clearTimeout(keydownSpamTimerId);
3466
+ keydownSpamTimerId = null;
3467
+ }
3468
+ return;
3469
+ }
3470
+ if (isReleasingActivationKey || isReleasingModifier) {
3471
+ if (store.wasActivatedByToggle && pluginRegistry.store.options.activationMode !== "hold") return;
3472
+ if (isHoldingKeys() || activationHoldState.holdTimerFired && isReleasingModifier) {
3473
+ clearHoldTimer();
3474
+ const heldLongEnoughForActivation = (activationHoldState.startTimestamp ? Date.now() - activationHoldState.startTimestamp : 0) >= 200;
3475
+ const shouldActivateAfterCopy = activationHoldState.holdTimerFired && heldLongEnoughForActivation && (pluginRegistry.store.options.allowActivationInsideInput || !isKeyboardEventTriggeredByInput(event));
3476
+ resetCopyConfirmation();
3477
+ if (shouldActivateAfterCopy) actions.activate();
3478
+ else actions.releaseHold();
3479
+ } else deactivateRenderer();
3480
+ }
3481
+ }, { capture: true });
3482
+ eventListenerManager.addDocumentListener("copy", () => {
3483
+ if (isHoldingKeys()) activationHoldState.copyWaiting = true;
3484
+ });
3485
+ eventListenerManager.addWindowListener("keypress", blockEnterIfNeeded, { capture: true });
3486
+ eventListenerManager.addWindowListener("pointermove", (event) => {
3487
+ if (!event.isPrimary) return;
3488
+ const isTouchPointer = event.pointerType === "touch";
3489
+ actions.setTouchMode(isTouchPointer);
3490
+ if (isEventFromOverlay(event, "data-react-grab-ignore-events")) return;
3491
+ if (store.contextMenuPosition !== null) return;
3492
+ if (isSelectionInteractionLocked()) return;
3493
+ if (isTouchPointer && !isHoldingKeys() && !isActivated()) return;
3494
+ if ((isTouchPointer ? isHoldingKeys() : isActivated()) && !isPromptMode() && isFrozenPhase() && !event.shiftKey && !isShiftMultiSelecting()) {
3495
+ actions.unfreeze();
3496
+ clearArrowNavigation();
3497
+ }
3498
+ handlePointerMove(event.clientX, event.clientY, event.shiftKey);
3499
+ }, { passive: true });
3500
+ eventListenerManager.addWindowListener("pointerdown", (event) => {
3501
+ if (event.button !== 0) return;
3502
+ if (!event.isPrimary) return;
3503
+ actions.setTouchMode(event.pointerType === "touch");
3504
+ if (isEventFromOverlay(event, "data-react-grab-ignore-events")) return;
3505
+ if (store.contextMenuPosition !== null) return;
3506
+ if (toolbarMenuPosition() !== null) return;
3507
+ if (isPromptMode()) {
3508
+ const bounds = selectionBounds();
3509
+ if (bounds && event.clientX >= bounds.x && event.clientX <= bounds.x + bounds.width && event.clientY >= bounds.y && event.clientY <= bounds.y + bounds.height) handleInputSubmit();
3510
+ else handleInputCancel();
3511
+ return;
3512
+ }
3513
+ if (isSelectionInteractionLocked()) {
3514
+ event.preventDefault();
3515
+ event.stopImmediatePropagation();
3516
+ return;
3517
+ }
3518
+ if (handlePointerDown(event.clientX, event.clientY, event.shiftKey)) {
3519
+ if (event.pointerId !== void 0) document.documentElement.setPointerCapture(event.pointerId);
3520
+ event.preventDefault();
3521
+ event.stopImmediatePropagation();
3522
+ }
3523
+ }, { capture: true });
3524
+ eventListenerManager.addWindowListener("pointerup", (event) => {
3525
+ if (event.button !== 0) return;
3526
+ if (!event.isPrimary) return;
3527
+ if (isEventFromOverlay(event, "data-react-grab-ignore-events")) return;
3528
+ if (store.contextMenuPosition !== null) return;
3529
+ const isActive = isRendererActive() || isSelectionInteractionLocked() || isDragging();
3530
+ const hasModifierKeyHeld = event.metaKey || event.ctrlKey;
3531
+ handlePointerUp(event.clientX, event.clientY, hasModifierKeyHeld, event.shiftKey);
3532
+ if (isActive) {
3533
+ event.preventDefault();
3534
+ event.stopImmediatePropagation();
3535
+ }
3536
+ }, { capture: true });
3537
+ eventListenerManager.addWindowListener("contextmenu", (event) => {
3538
+ if (!isRendererActive() || isCopying() || isPromptMode()) return;
3539
+ const isFromOverlay = isEventFromOverlay(event, "data-react-grab-ignore-events");
3540
+ const position = {
3541
+ x: event.clientX,
3542
+ y: event.clientY
3543
+ };
3544
+ const overlayFrozenElement = isFromOverlay && store.frozenElements.length > 1 ? getFrozenElementAtPosition(position) : null;
3545
+ if (isFromOverlay && arrowNavigationElements().length > 0) clearArrowNavigation();
3546
+ else if (isFromOverlay && !overlayFrozenElement) return;
3547
+ if (store.contextMenuPosition !== null) {
3548
+ event.preventDefault();
3549
+ return;
3550
+ }
3551
+ event.preventDefault();
3552
+ event.stopPropagation();
3553
+ const element = overlayFrozenElement ?? getElementAtPosition(event.clientX, event.clientY);
3554
+ if (!element) return;
3555
+ const existingFrozenElements = store.frozenElements;
3556
+ if (existingFrozenElements.length > 1 && existingFrozenElements.includes(element)) freezeAllAnimations(existingFrozenElements);
3557
+ else {
3558
+ freezeAllAnimations([element]);
3559
+ actions.setFrozenElement(element);
3560
+ }
3561
+ actions.setPointer(position);
3562
+ actions.freeze();
3563
+ openContextMenu(element, position);
3564
+ }, { capture: true });
3565
+ eventListenerManager.addWindowListener("pointercancel", (event) => {
3566
+ if (!event.isPrimary) return;
3567
+ cancelActiveDrag();
3568
+ });
3569
+ eventListenerManager.addWindowListener("click", (event) => {
3570
+ if (isEventFromOverlay(event, "data-react-grab-ignore-events")) return;
3571
+ if (store.contextMenuPosition !== null) return;
3572
+ if (isRendererActive() || isCopying() || didJustDrag()) {
3573
+ event.preventDefault();
3574
+ event.stopImmediatePropagation();
3575
+ if (store.wasActivatedByToggle && !isCopying() && !isPromptMode() && !event.shiftKey) if (!isHoldingKeys()) deactivateRenderer();
3576
+ else actions.setWasActivatedByToggle(false);
3577
+ }
3578
+ }, { capture: true });
3579
+ eventListenerManager.addDocumentListener("visibilitychange", () => {
3580
+ if (document.hidden) {
3581
+ actions.clearGrabbedBoxes();
3582
+ const storeActivationTimestamp = store.activationTimestamp;
3583
+ if (isActivated() && !isPromptMode() && storeActivationTimestamp !== null && Date.now() - storeActivationTimestamp > 500) deactivateRenderer();
3584
+ }
3585
+ });
3586
+ eventListenerManager.addWindowListener("blur", () => {
3587
+ cancelActiveDrag();
3588
+ if (isHoldingKeys()) {
3589
+ clearHoldTimer();
3590
+ actions.releaseHold();
3591
+ resetCopyConfirmation();
3592
+ }
3593
+ stopShiftMultiSelecting();
3594
+ });
3595
+ eventListenerManager.addWindowListener("focus", () => {
3596
+ lastWindowFocusTimestamp = Date.now();
3597
+ });
3598
+ eventListenerManager.addWindowListener("focusin", (event) => {
3599
+ if (isEventFromOverlay(event, "data-react-grab")) event.stopPropagation();
3600
+ }, { capture: true });
3601
+ const redetectElementUnderPointer = () => {
3602
+ if (store.isTouchMode && !isHoldingKeys() && !isActivated()) return;
3603
+ if (isEnabled() && !isPromptMode() && !isSelectionInteractionLocked() && !isFrozenPhase() && !isDragging() && store.contextMenuPosition === null && store.frozenElements.length === 0) {
3604
+ const candidate = getElementAtPosition(store.pointer.x, store.pointer.y);
3605
+ actions.setDetectedElement(candidate);
3606
+ }
3607
+ };
3608
+ let boundsRecalcIntervalId = null;
3609
+ let viewportChangeFrameId = null;
3610
+ const handleViewportChange = () => {
3611
+ invalidateInteractionCaches();
3612
+ redetectElementUnderPointer();
3613
+ actions.incrementViewportVersion();
3614
+ actions.updateContextMenuPosition();
3615
+ };
3616
+ eventListenerManager.addWindowListener("scroll", handleViewportChange, { capture: true });
3617
+ let previousViewportWidth = window.innerWidth;
3618
+ let previousViewportHeight = window.innerHeight;
3619
+ eventListenerManager.addWindowListener("resize", () => {
3620
+ const currentViewportWidth = window.innerWidth;
3621
+ const currentViewportHeight = window.innerHeight;
3622
+ if (previousViewportWidth > 0 && previousViewportHeight > 0) {
3623
+ const scaleX = currentViewportWidth / previousViewportWidth;
3624
+ const scaleY = currentViewportHeight / previousViewportHeight;
3625
+ const isUniformScale = Math.abs(scaleX - scaleY) < ZOOM_DETECTION_THRESHOLD;
3626
+ const hasScaleChanged = Math.abs(scaleX - 1) > ZOOM_DETECTION_THRESHOLD;
3627
+ if (isUniformScale && hasScaleChanged) actions.setPointer({
3628
+ x: store.pointer.x * scaleX,
3629
+ y: store.pointer.y * scaleY
3630
+ });
3631
+ }
3632
+ previousViewportWidth = currentViewportWidth;
3633
+ previousViewportHeight = currentViewportHeight;
3634
+ handleViewportChange();
3635
+ });
3636
+ const visualViewport = window.visualViewport;
3637
+ if (visualViewport) {
3638
+ const { signal } = eventListenerManager;
3639
+ visualViewport.addEventListener("resize", handleViewportChange, { signal });
3640
+ visualViewport.addEventListener("scroll", handleViewportChange, { signal });
3641
+ }
3642
+ const scheduleBoundsSync = () => {
3643
+ if (viewportChangeFrameId !== null) return;
3644
+ viewportChangeFrameId = nativeRequestAnimationFrame(() => {
3645
+ viewportChangeFrameId = null;
3646
+ actions.incrementViewportVersion();
3647
+ });
3648
+ };
3649
+ createEffect(() => {
3650
+ if (pluginRegistry.store.theme.enabled && (isActivated() || isCopying() || store.labelInstances.length > 0 || store.grabbedBoxes.length > 0)) {
3651
+ if (boundsRecalcIntervalId !== null) return;
3652
+ boundsRecalcIntervalId = window.setInterval(() => {
3653
+ scheduleBoundsSync();
3654
+ }, 100);
3655
+ return;
3656
+ }
3657
+ if (boundsRecalcIntervalId !== null) {
3658
+ window.clearInterval(boundsRecalcIntervalId);
3659
+ boundsRecalcIntervalId = null;
3660
+ }
3661
+ if (viewportChangeFrameId !== null) {
3662
+ nativeCancelAnimationFrame(viewportChangeFrameId);
3663
+ viewportChangeFrameId = null;
3664
+ }
3665
+ });
3666
+ onCleanup(() => {
3667
+ if (boundsRecalcIntervalId !== null) window.clearInterval(boundsRecalcIntervalId);
3668
+ if (viewportChangeFrameId !== null) nativeCancelAnimationFrame(viewportChangeFrameId);
3669
+ });
3670
+ eventListenerManager.addDocumentListener("copy", (event) => {
3671
+ if (isPromptMode() || isEventFromOverlay(event, "data-react-grab-ignore-events")) return;
3672
+ if (isRendererActive() || isCopying()) event.preventDefault();
3673
+ }, { capture: true });
3674
+ onCleanup(() => {
3675
+ eventListenerManager.abort();
3676
+ if (dragPreviewDebounceTimerId !== null) window.clearTimeout(dragPreviewDebounceTimerId);
3677
+ if (keydownSpamTimerId) window.clearTimeout(keydownSpamTimerId);
3678
+ clearCopyFeedbackCooldown();
3679
+ if (dropdownTrackingFrameId !== null) nativeCancelAnimationFrame(dropdownTrackingFrameId);
3680
+ grabbedBoxTimeouts.forEach((timeoutId) => window.clearTimeout(timeoutId));
3681
+ grabbedBoxTimeouts.clear();
3682
+ cancelAllLabelFades();
3683
+ autoScroller.stop();
3684
+ document.body.style.userSelect = "";
3685
+ document.body.style.touchAction = "";
3686
+ setCursorOverride(null);
3687
+ keyboardClaimer.restore();
3688
+ });
3689
+ const rendererRoot = mountRoot(typeof "/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root, :host {\n --font-sans: \"Geist\", ui-sans-serif, system-ui, sans-serif;\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n --color-black: #000;\n --color-white: #fff;\n --spacing: 0.25rem;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --radius-sm: 0.25rem;\n --ease-out: cubic-bezier(0, 0, 0.2, 1);\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);\n --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);\n --ease-badge-pop: cubic-bezier(0.34, 1.36, 0.64, 1);\n --ease-badge-close: cubic-bezier(0.4, 0, 0.2, 1);\n --ease-text-swap: ease-out;\n --animate-rg-badge-slide: rg-badge-slide 260ms cubic-bezier(0.22, 1, 0.36, 1);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-auto {\n pointer-events: auto;\n }\n .pointer-events-none {\n pointer-events: none;\n }\n .invisible {\n visibility: hidden;\n }\n .visible {\n visibility: visible;\n }\n .touch-hitbox {\n position: relative;\n &::before {\n content: \"\";\n position: absolute;\n display: block;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100%;\n height: 100%;\n min-height: 44px;\n min-width: 44px;\n }\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .static {\n position: static;\n }\n .-top-1 {\n top: calc(var(--spacing) * -1);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .-right-1 {\n right: calc(var(--spacing) * -1);\n }\n .left-0 {\n left: calc(var(--spacing) * 0);\n }\n .z-1 {\n z-index: 1;\n }\n .z-10 {\n z-index: 10;\n }\n .container {\n width: 100%;\n @media (width >= 40rem) {\n max-width: 40rem;\n }\n @media (width >= 48rem) {\n max-width: 48rem;\n }\n @media (width >= 64rem) {\n max-width: 64rem;\n }\n @media (width >= 80rem) {\n max-width: 80rem;\n }\n @media (width >= 96rem) {\n max-width: 96rem;\n }\n }\n .m-0 {\n margin: calc(var(--spacing) * 0);\n }\n .-mx-2 {\n margin-inline: calc(var(--spacing) * -2);\n }\n .-my-1\\.5 {\n margin-block: calc(var(--spacing) * -1.5);\n }\n .mt-0\\.5 {\n margin-top: calc(var(--spacing) * 0.5);\n }\n .mr-1\\.5 {\n margin-right: calc(var(--spacing) * 1.5);\n }\n .mb-1\\.5 {\n margin-bottom: calc(var(--spacing) * 1.5);\n }\n .-ml-\\[2px\\] {\n margin-left: calc(2px * -1);\n }\n .ml-1 {\n margin-left: calc(var(--spacing) * 1);\n }\n .ml-4 {\n margin-left: calc(var(--spacing) * 4);\n }\n .box-border {\n box-sizing: border-box;\n }\n .line-clamp-5 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 5;\n }\n .block {\n display: block;\n }\n .flex {\n display: flex;\n }\n .grid {\n display: grid;\n }\n .hidden {\n display: none;\n }\n .inline {\n display: inline;\n }\n .inline-flex {\n display: inline-flex;\n }\n .size-4 {\n width: calc(var(--spacing) * 4);\n height: calc(var(--spacing) * 4);\n }\n .size-\\[18px\\] {\n width: 18px;\n height: 18px;\n }\n .h-0 {\n height: calc(var(--spacing) * 0);\n }\n .h-2\\.5 {\n height: calc(var(--spacing) * 2.5);\n }\n .h-\\[17px\\] {\n height: 17px;\n }\n .h-fit {\n height: fit-content;\n }\n .h-full {\n height: 100%;\n }\n .max-h-\\[240px\\] {\n max-height: 240px;\n }\n .min-h-0 {\n min-height: calc(var(--spacing) * 0);\n }\n .min-h-4 {\n min-height: calc(var(--spacing) * 4);\n }\n .w-0 {\n width: calc(var(--spacing) * 0);\n }\n .w-\\[calc\\(100\\%\\+16px\\)\\] {\n width: calc(100% + 16px);\n }\n .w-auto {\n width: auto;\n }\n .w-fit {\n width: fit-content;\n }\n .w-full {\n width: 100%;\n }\n .max-w-\\[280px\\] {\n max-width: 280px;\n }\n .max-w-full {\n max-width: 100%;\n }\n .min-w-0 {\n min-width: calc(var(--spacing) * 0);\n }\n .min-w-2\\.5 {\n min-width: calc(var(--spacing) * 2.5);\n }\n .min-w-\\[100px\\] {\n min-width: 100px;\n }\n .min-w-\\[150px\\] {\n min-width: 150px;\n }\n .flex-1 {\n flex: 1;\n }\n .flex-shrink {\n flex-shrink: 1;\n }\n .shrink {\n flex-shrink: 1;\n }\n .shrink-0 {\n flex-shrink: 0;\n }\n .flex-grow {\n flex-grow: 1;\n }\n .origin-center {\n transform-origin: center;\n }\n .scale-75 {\n --tw-scale-x: 75%;\n --tw-scale-y: 75%;\n --tw-scale-z: 75%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .scale-100 {\n --tw-scale-x: 100%;\n --tw-scale-y: 100%;\n --tw-scale-z: 100%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .-rotate-90 {\n rotate: calc(90deg * -1);\n }\n .rotate-0 {\n rotate: 0deg;\n }\n .rotate-90 {\n rotate: 90deg;\n }\n .rotate-180 {\n rotate: 180deg;\n }\n .interactive-scale {\n transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);\n @media (hover: hover) and (pointer: fine) {\n &:hover {\n transform: scale(1.05);\n }\n }\n &:active {\n transform: scale(0.96);\n transition: transform 60ms cubic-bezier(0, 0, 0.2, 1);\n }\n }\n .press-scale {\n transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);\n &:active {\n transform: scale(0.97);\n transition: transform 60ms cubic-bezier(0, 0, 0.2, 1);\n }\n }\n .transform {\n transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n }\n .cursor-grab {\n cursor: grab;\n }\n .cursor-grabbing {\n cursor: grabbing;\n }\n .cursor-pointer {\n cursor: pointer;\n }\n .resize {\n resize: both;\n }\n .resize-none {\n resize: none;\n }\n .\\[scrollbar-width\\:thin\\] {\n scrollbar-width: thin;\n }\n .\\[scrollbar-color\\:transparent_transparent\\] {\n scrollbar-color: transparent transparent;\n }\n .grid-cols-\\[0fr\\] {\n grid-template-columns: 0fr;\n }\n .grid-cols-\\[1fr\\] {\n grid-template-columns: 1fr;\n }\n .grid-rows-\\[0fr\\] {\n grid-template-rows: 0fr;\n }\n .grid-rows-\\[1fr\\] {\n grid-template-rows: 1fr;\n }\n .flex-col {\n flex-direction: column;\n }\n .flex-wrap {\n flex-wrap: wrap;\n }\n .place-items-center {\n place-items: center;\n }\n .items-center {\n align-items: center;\n }\n .items-end {\n align-items: flex-end;\n }\n .items-start {\n align-items: flex-start;\n }\n .justify-between {\n justify-content: space-between;\n }\n .justify-center {\n justify-content: center;\n }\n .justify-end {\n justify-content: flex-end;\n }\n .gap-0\\.5 {\n gap: calc(var(--spacing) * 0.5);\n }\n .gap-1 {\n gap: calc(var(--spacing) * 1);\n }\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n .gap-\\[5px\\] {\n gap: 5px;\n }\n .self-stretch {\n align-self: stretch;\n }\n .truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .overflow-hidden {\n overflow: hidden;\n }\n .overflow-visible {\n overflow: visible;\n }\n .overflow-x-hidden {\n overflow-x: hidden;\n }\n .overflow-y-auto {\n overflow-y: auto;\n }\n .rounded-\\[10px\\] {\n border-radius: 10px;\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-sm {\n border-radius: var(--radius-sm);\n }\n .rounded-t-\\[10px\\] {\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n }\n .rounded-t-none {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n .rounded-l-\\[10px\\] {\n border-top-left-radius: 10px;\n border-bottom-left-radius: 10px;\n }\n .rounded-l-none {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n .rounded-r-\\[10px\\] {\n border-top-right-radius: 10px;\n border-bottom-right-radius: 10px;\n }\n .rounded-r-none {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n .rounded-b-\\[6px\\] {\n border-bottom-right-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n .rounded-b-\\[10px\\] {\n border-bottom-right-radius: 10px;\n border-bottom-left-radius: 10px;\n }\n .rounded-b-none {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .\\[border-width\\:0\\.5px\\] {\n border-width: 0.5px;\n }\n .\\[border-top-width\\:0\\.5px\\] {\n border-top-width: 0.5px;\n }\n .border-none {\n --tw-border-style: none;\n border-style: none;\n }\n .border-solid {\n --tw-border-style: solid;\n border-style: solid;\n }\n .border-\\[\\#B3B3B3\\] {\n border-color: #B3B3B3;\n }\n .border-t-\\[\\#D9D9D9\\] {\n border-top-color: #D9D9D9;\n }\n .bg-\\[\\#FEF2F2\\] {\n background-color: #FEF2F2;\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-black\\/5 {\n background-color: color-mix(in srgb, #000 5%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 5%, transparent);\n }\n }\n .bg-transparent {\n background-color: transparent;\n }\n .bg-white {\n background-color: var(--color-white);\n }\n .p-0 {\n padding: calc(var(--spacing) * 0);\n }\n .px-0\\.5 {\n padding-inline: calc(var(--spacing) * 0.5);\n }\n .px-0\\.25 {\n padding-inline: calc(var(--spacing) * 0.25);\n }\n .px-1\\.5 {\n padding-inline: calc(var(--spacing) * 1.5);\n }\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n .px-\\[3px\\] {\n padding-inline: 3px;\n }\n .py-0\\.25 {\n padding-block: calc(var(--spacing) * 0.25);\n }\n .py-1 {\n padding-block: calc(var(--spacing) * 1);\n }\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n .py-px {\n padding-block: 1px;\n }\n .pt-1\\.5 {\n padding-top: calc(var(--spacing) * 1.5);\n }\n .pb-1 {\n padding-bottom: calc(var(--spacing) * 1);\n }\n .text-left {\n text-align: left;\n }\n .font-sans {\n font-family: var(--font-sans);\n }\n .text-\\[8px\\] {\n font-size: 8px;\n }\n .text-\\[10px\\] {\n font-size: 10px;\n }\n .text-\\[11px\\] {\n font-size: 11px;\n }\n .text-\\[12px\\] {\n font-size: 12px;\n }\n .text-\\[13px\\] {\n font-size: 13px;\n }\n .leading-3 {\n --tw-leading: calc(var(--spacing) * 3);\n line-height: calc(var(--spacing) * 3);\n }\n .leading-3\\.5 {\n --tw-leading: calc(var(--spacing) * 3.5);\n line-height: calc(var(--spacing) * 3.5);\n }\n .leading-4 {\n --tw-leading: calc(var(--spacing) * 4);\n line-height: calc(var(--spacing) * 4);\n }\n .leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .wrap-break-word {\n overflow-wrap: break-word;\n }\n .text-ellipsis {\n text-overflow: ellipsis;\n }\n .whitespace-nowrap {\n white-space: nowrap;\n }\n .text-\\[\\#71717a\\] {\n color: #71717a;\n }\n .text-\\[\\#B3B3B3\\] {\n color: #B3B3B3;\n }\n .text-\\[\\#B91C1C\\] {\n color: #B91C1C;\n }\n .text-\\[\\#B91C1C\\]\\/50 {\n color: color-mix(in oklab, #B91C1C 50%, transparent);\n }\n .text-black {\n color: var(--color-black);\n }\n .text-black\\/25 {\n color: color-mix(in srgb, #000 25%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-black) 25%, transparent);\n }\n }\n .text-black\\/30 {\n color: color-mix(in srgb, #000 30%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-black) 30%, transparent);\n }\n }\n .text-black\\/40 {\n color: color-mix(in srgb, #000 40%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-black) 40%, transparent);\n }\n }\n .text-black\\/50 {\n color: color-mix(in srgb, #000 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-black) 50%, transparent);\n }\n }\n .text-black\\/60 {\n color: color-mix(in srgb, #000 60%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-black) 60%, transparent);\n }\n }\n .text-black\\/70 {\n color: color-mix(in srgb, #000 70%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-black) 70%, transparent);\n }\n }\n .text-black\\/85 {\n color: color-mix(in srgb, #000 85%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-black) 85%, transparent);\n }\n }\n .text-white {\n color: var(--color-white);\n }\n .tabular-nums {\n --tw-numeric-spacing: tabular-nums;\n font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);\n }\n .antialiased {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n .opacity-0 {\n opacity: 0%;\n }\n .opacity-40 {\n opacity: 40%;\n }\n .opacity-100 {\n opacity: 100%;\n }\n .shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n .blur {\n --tw-blur: blur(8px);\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .filter {\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .filter-\\[drop-shadow\\(0px_1px_2px_\\#51515133\\)\\] {\n filter: drop-shadow(0px 1px 2px #51515133);\n }\n .filter-\\[drop-shadow\\(0px_1px_2px_\\#51515140\\)\\] {\n filter: drop-shadow(0px 1px 2px #51515140);\n }\n .backdrop-filter {\n -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n }\n .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-\\[grid-template-columns\\,opacity\\] {\n transition-property: grid-template-columns,opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-\\[grid-template-columns\\] {\n transition-property: grid-template-columns;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-\\[grid-template-rows\\,opacity\\] {\n transition-property: grid-template-rows,opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-\\[grid-template-rows\\] {\n transition-property: grid-template-rows;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-\\[opacity\\,transform\\,margin\\,width\\] {\n transition-property: opacity,transform,margin,width;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-\\[opacity\\,transform\\] {\n transition-property: opacity,transform;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-\\[padding\\,border-radius\\,transform\\] {\n transition-property: padding,border-radius,transform;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-\\[top\\,left\\,width\\,height\\,opacity\\] {\n transition-property: top,left,width,height,opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-\\[transform\\,opacity\\,filter\\] {\n transition-property: transform,opacity,filter;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-\\[transform\\,opacity\\] {\n transition-property: transform,opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-transform {\n transition-property: transform, translate, scale, rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .delay-\\[80ms\\] {\n transition-delay: 80ms;\n }\n .duration-60 {\n --tw-duration: 60ms;\n transition-duration: 60ms;\n }\n .duration-75 {\n --tw-duration: 75ms;\n transition-duration: 75ms;\n }\n .duration-100 {\n --tw-duration: 100ms;\n transition-duration: 100ms;\n }\n .duration-120 {\n --tw-duration: 120ms;\n transition-duration: 120ms;\n }\n .duration-140 {\n --tw-duration: 140ms;\n transition-duration: 140ms;\n }\n .duration-150 {\n --tw-duration: 150ms;\n transition-duration: 150ms;\n }\n .duration-180 {\n --tw-duration: 180ms;\n transition-duration: 180ms;\n }\n .duration-200 {\n --tw-duration: 200ms;\n transition-duration: 200ms;\n }\n .duration-220 {\n --tw-duration: 220ms;\n transition-duration: 220ms;\n }\n .duration-300 {\n --tw-duration: 300ms;\n transition-duration: 300ms;\n }\n .duration-400 {\n --tw-duration: 400ms;\n transition-duration: 400ms;\n }\n .\\[transition-duration\\:500ms\\,400ms\\,500ms\\] {\n transition-duration: 500ms,400ms,500ms;\n }\n .ease-\\[cubic-bezier\\(0\\,0\\,0\\.2\\,1\\)\\] {\n --tw-ease: cubic-bezier(0,0,0.2,1);\n transition-timing-function: cubic-bezier(0,0,0.2,1);\n }\n .ease-badge-pop {\n --tw-ease: var(--ease-badge-pop);\n transition-timing-function: var(--ease-badge-pop);\n }\n .ease-drawer {\n --tw-ease: var(--ease-drawer);\n transition-timing-function: var(--ease-drawer);\n }\n .ease-out {\n --tw-ease: var(--ease-out);\n transition-timing-function: var(--ease-out);\n }\n .ease-spring {\n --tw-ease: var(--ease-spring);\n transition-timing-function: var(--ease-spring);\n }\n .ease-text-swap {\n --tw-ease: var(--ease-text-swap);\n transition-timing-function: var(--ease-text-swap);\n }\n .will-change-\\[opacity\\,transform\\] {\n will-change: opacity,transform;\n }\n .will-change-\\[transform\\,opacity\\,filter\\] {\n will-change: transform,opacity,filter;\n }\n .will-change-transform {\n will-change: transform;\n }\n .contain-layout {\n --tw-contain-layout: layout;\n contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,);\n }\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n .select-none {\n -webkit-user-select: none;\n user-select: none;\n }\n .\\[corner-shape\\:superellipse\\(1\\.25\\)\\] {\n corner-shape: superellipse(1.25);\n }\n .\\[font-synthesis\\:none\\] {\n font-synthesis: none;\n }\n .\\[grid-area\\:1\\/1\\] {\n grid-area: 1/1;\n }\n .group-data-\\[open\\=false\\]\\/badge\\:scale-0 {\n &:is(:where(.group\\/badge)[data-open=\"false\"] *) {\n --tw-scale-x: 0%;\n --tw-scale-y: 0%;\n --tw-scale-z: 0%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n }\n .group-data-\\[open\\=false\\]\\/badge\\:opacity-0 {\n &:is(:where(.group\\/badge)[data-open=\"false\"] *) {\n opacity: 0%;\n }\n }\n .group-data-\\[open\\=false\\]\\/badge\\:blur-\\[2px\\] {\n &:is(:where(.group\\/badge)[data-open=\"false\"] *) {\n --tw-blur: blur(2px);\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n }\n .group-data-\\[open\\=false\\]\\/badge\\:\\[transition-duration\\:180ms\\,180ms\\,180ms\\] {\n &:is(:where(.group\\/badge)[data-open=\"false\"] *) {\n transition-duration: 180ms,180ms,180ms;\n }\n }\n .group-data-\\[open\\=false\\]\\/badge\\:ease-badge-close {\n &:is(:where(.group\\/badge)[data-open=\"false\"] *) {\n --tw-ease: var(--ease-badge-close);\n transition-timing-function: var(--ease-badge-close);\n }\n }\n .group-data-\\[state\\=a\\]\\/badge\\:translate-y-0 {\n &:is(:where(.group\\/badge)[data-state=\"a\"] *) {\n --tw-translate-y: calc(var(--spacing) * 0);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n .group-data-\\[state\\=a\\]\\/badge\\:translate-y-2 {\n &:is(:where(.group\\/badge)[data-state=\"a\"] *) {\n --tw-translate-y: calc(var(--spacing) * 2);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n .group-data-\\[state\\=a\\]\\/badge\\:opacity-0 {\n &:is(:where(.group\\/badge)[data-state=\"a\"] *) {\n opacity: 0%;\n }\n }\n .group-data-\\[state\\=a\\]\\/badge\\:opacity-100 {\n &:is(:where(.group\\/badge)[data-state=\"a\"] *) {\n opacity: 100%;\n }\n }\n .group-data-\\[state\\=a\\]\\/badge\\:blur-\\[2px\\] {\n &:is(:where(.group\\/badge)[data-state=\"a\"] *) {\n --tw-blur: blur(2px);\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n }\n .group-data-\\[state\\=b\\]\\/badge\\:-translate-y-2 {\n &:is(:where(.group\\/badge)[data-state=\"b\"] *) {\n --tw-translate-y: calc(var(--spacing) * -2);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n .group-data-\\[state\\=b\\]\\/badge\\:translate-y-0 {\n &:is(:where(.group\\/badge)[data-state=\"b\"] *) {\n --tw-translate-y: calc(var(--spacing) * 0);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n .group-data-\\[state\\=b\\]\\/badge\\:opacity-0 {\n &:is(:where(.group\\/badge)[data-state=\"b\"] *) {\n opacity: 0%;\n }\n }\n .group-data-\\[state\\=b\\]\\/badge\\:opacity-100 {\n &:is(:where(.group\\/badge)[data-state=\"b\"] *) {\n opacity: 100%;\n }\n }\n .group-data-\\[state\\=b\\]\\/badge\\:blur-\\[2px\\] {\n &:is(:where(.group\\/badge)[data-state=\"b\"] *) {\n --tw-blur: blur(2px);\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n }\n .before\\:\\!min-h-full {\n &::before {\n content: var(--tw-content);\n min-height: 100% !important;\n }\n }\n .before\\:\\!min-w-full {\n &::before {\n content: var(--tw-content);\n min-width: 100% !important;\n }\n }\n .hover\\:\\[scrollbar-color\\:rgba\\(0\\,0\\,0\\,0\\.15\\)_transparent\\] {\n &:hover {\n @media (hover: hover) {\n scrollbar-color: rgba(0,0,0,0.15) transparent;\n }\n }\n }\n .hover\\:bg-\\[\\#F5F5F5\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #F5F5F5;\n }\n }\n }\n .hover\\:bg-\\[\\#FEE2E2\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #FEE2E2;\n }\n }\n }\n .hover\\:bg-black\\/10 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, #000 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 10%, transparent);\n }\n }\n }\n }\n .hover\\:text-black {\n &:hover {\n @media (hover: hover) {\n color: var(--color-black);\n }\n }\n }\n .hover\\:opacity-100 {\n &:hover {\n @media (hover: hover) {\n opacity: 100%;\n }\n }\n }\n .disabled\\:cursor-default {\n &:disabled {\n cursor: default;\n }\n }\n .disabled\\:opacity-40 {\n &:disabled {\n opacity: 40%;\n }\n }\n .data-\\[open\\=true\\]\\:animate-rg-badge-slide {\n &[data-open=\"true\"] {\n animation: var(--animate-rg-badge-slide);\n }\n }\n}\n:host {\n all: initial;\n direction: ltr;\n}\n@keyframes rg-badge-slide {\n from {\n transform: translate(-8.2px, 12.4px);\n }\n to {\n transform: translate(0, 0);\n }\n}\n@media (prefers-reduced-motion: reduce) {\n [data-react-grab-unread-indicator], [data-react-grab-unread-indicator] * {\n animation: none !important;\n transition: none !important;\n }\n}\n@keyframes shake {\n 0%, 100% {\n transform: translateX(0);\n }\n 15% {\n transform: translateX(-3px);\n }\n 30% {\n transform: translateX(3px);\n }\n 45% {\n transform: translateX(-3px);\n }\n 60% {\n transform: translateX(3px);\n }\n 75% {\n transform: translateX(-2px);\n }\n 90% {\n transform: translateX(2px);\n }\n}\n@keyframes success-pop {\n from {\n transform: scale(0.85);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n@keyframes icon-loader-spin {\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n 100% {\n opacity: 0.2;\n }\n}\n.icon-loader-bar {\n animation: icon-loader-spin 0.5s linear infinite;\n}\n@keyframes shimmer {\n 0% {\n background-position: 200% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n}\n.shimmer-text {\n background: linear-gradient( 90deg, #71717a 0%, #a1a1aa 25%, #71717a 50%, #a1a1aa 75%, #71717a 100% );\n background-size: 200% 100%;\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n animation: shimmer 2.5s linear infinite;\n}\n@keyframes clock-flash {\n 0% {\n transform: scale(1);\n }\n 25% {\n transform: scale(1.2);\n }\n 50% {\n transform: scale(0.92);\n }\n 75% {\n transform: scale(1.05);\n }\n 100% {\n transform: scale(1);\n }\n}\n.animate-clock-flash {\n animation: clock-flash 400ms ease-out;\n will-change: transform;\n}\n.animate-shake {\n animation: shake 0.3s ease-out;\n will-change: transform;\n}\n.animate-success-pop {\n animation: success-pop 350ms cubic-bezier(0.34, 1.56, 0.64, 1) both;\n will-change: transform, opacity;\n}\n@supports (-webkit-touch-callout: none) {\n textarea[data-react-grab-input] {\n font-size: 16px;\n }\n}\n@property --tw-scale-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-rotate-x {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-rotate-y {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-rotate-z {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-skew-x {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-skew-y {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-leading {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ordinal {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-slashed-zero {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-numeric-figure {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-numeric-spacing {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-numeric-fraction {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-inset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-offset-width {\n syntax: \"<length>\";\n inherits: false;\n initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n syntax: \"*\";\n inherits: false;\n initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-blur {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-brightness {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-contrast {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-grayscale {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-hue-rotate {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-invert {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-opacity {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-saturate {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-sepia {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-drop-shadow {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-drop-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-drop-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-drop-shadow-size {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-blur {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-brightness {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-contrast {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-grayscale {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-hue-rotate {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-invert {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-opacity {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-saturate {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-backdrop-sepia {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-duration {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ease {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-contain-size {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-contain-layout {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-contain-paint {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-contain-style {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-content {\n syntax: \"*\";\n initial-value: \"\";\n inherits: false;\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *, ::before, ::after, ::backdrop {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-border-style: solid;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-ordinal: initial;\n --tw-slashed-zero: initial;\n --tw-numeric-figure: initial;\n --tw-numeric-spacing: initial;\n --tw-numeric-fraction: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-backdrop-blur: initial;\n --tw-backdrop-brightness: initial;\n --tw-backdrop-contrast: initial;\n --tw-backdrop-grayscale: initial;\n --tw-backdrop-hue-rotate: initial;\n --tw-backdrop-invert: initial;\n --tw-backdrop-opacity: initial;\n --tw-backdrop-saturate: initial;\n --tw-backdrop-sepia: initial;\n --tw-duration: initial;\n --tw-ease: initial;\n --tw-contain-size: initial;\n --tw-contain-layout: initial;\n --tw-contain-paint: initial;\n --tw-contain-style: initial;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-content: \"\";\n }\n }\n}\n" === "string" ? styles_default : "");
3690
+ const isThemeEnabled = createMemo(() => pluginRegistry.store.theme.enabled);
3691
+ const isSelectionBoxThemeEnabled = createMemo(() => pluginRegistry.store.theme.selectionBox.enabled);
3692
+ const isElementLabelThemeEnabled = createMemo(() => pluginRegistry.store.theme.elementLabel.enabled);
3693
+ const isDragBoxThemeEnabled = createMemo(() => pluginRegistry.store.theme.dragBox.enabled);
3694
+ const isSelectionSuppressed = createMemo(() => didJustCopy() || isToolbarSelectHovered() && !isFrozenPhase());
3695
+ const hasDragPreviewBounds = createMemo(() => dragPreviewBounds().length > 0);
3696
+ const selectionVisible = createMemo(() => {
3697
+ if (!isThemeEnabled()) return false;
3698
+ if (!isSelectionBoxThemeEnabled()) return false;
3699
+ if (isSelectionSuppressed()) return false;
3700
+ if (hasDragPreviewBounds()) return true;
3701
+ return isSelectionElementVisible();
3702
+ });
3703
+ const selectionTagName = createMemo(() => {
3704
+ const element = selectionElement();
3705
+ if (!element) return void 0;
3706
+ return getTagName(element) || void 0;
3707
+ });
3708
+ createEffect(on(() => debouncedElementForComponentName(), (element) => {
3709
+ const currentVersion = ++componentNameRequestVersion;
3710
+ if (!element) {
3711
+ setResolvedComponentName(void 0);
3712
+ return;
3713
+ }
3714
+ const fallbackComponentName = getComponentDisplayName(element) ?? void 0;
3715
+ setResolvedComponentName(fallbackComponentName);
3716
+ getNearestComponentName(element).then((name) => {
3717
+ if (componentNameRequestVersion !== currentVersion) return;
3718
+ setResolvedComponentName(name ?? fallbackComponentName);
3719
+ }).catch(() => {
3720
+ if (componentNameRequestVersion !== currentVersion) return;
3721
+ setResolvedComponentName(fallbackComponentName);
3722
+ });
3723
+ }));
3724
+ const selectionLabelVisible = createMemo(() => {
3725
+ if (store.contextMenuPosition !== null) return false;
3726
+ if (!isElementLabelThemeEnabled()) return false;
3727
+ if (isSelectionSuppressed()) return false;
3728
+ return isSelectionElementVisible();
3729
+ });
3730
+ const labelInstanceCache = /* @__PURE__ */ new Map();
3731
+ const recomputeLabelInstance = (instance) => {
3732
+ const hasMultipleElements = instance.elements && instance.elements.length > 1;
3733
+ const instanceElement = instance.element;
3734
+ const newBounds = !hasMultipleElements && instanceElement && document.body.contains(instanceElement) ? createElementBounds(instanceElement) : instance.bounds;
3735
+ const previousInstance = labelInstanceCache.get(instance.id);
3736
+ const boundsUnchanged = previousInstance && previousInstance.bounds.x === newBounds.x && previousInstance.bounds.y === newBounds.y && previousInstance.bounds.width === newBounds.width && previousInstance.bounds.height === newBounds.height;
3737
+ if (previousInstance && previousInstance.status === instance.status && previousInstance.errorMessage === instance.errorMessage && boundsUnchanged) return previousInstance;
3738
+ const newBoundsCenterX = newBounds.x + newBounds.width / 2;
3739
+ const newBoundsHalfWidth = newBounds.width / 2;
3740
+ let newMouseX;
3741
+ if (instance.mouseXOffsetRatio !== void 0 && newBoundsHalfWidth > 0) newMouseX = newBoundsCenterX + instance.mouseXOffsetRatio * newBoundsHalfWidth;
3742
+ else if (instance.mouseXOffsetFromCenter !== void 0) newMouseX = newBoundsCenterX + instance.mouseXOffsetFromCenter;
3743
+ else newMouseX = instance.mouseX ?? newBoundsCenterX;
3744
+ const newCached = {
3745
+ ...instance,
3746
+ bounds: newBounds,
3747
+ mouseX: newMouseX
3748
+ };
3749
+ labelInstanceCache.set(instance.id, newCached);
3750
+ return newCached;
3751
+ };
3752
+ const computedLabelInstances = createMemo(() => {
3753
+ if (!isThemeEnabled()) return [];
3754
+ if (!pluginRegistry.store.theme.grabbedBoxes.enabled) return [];
3755
+ store.viewportVersion;
3756
+ const currentIds = new Set(store.labelInstances.map((instance) => instance.id));
3757
+ for (const cachedId of labelInstanceCache.keys()) if (!currentIds.has(cachedId)) labelInstanceCache.delete(cachedId);
3758
+ return store.labelInstances.map(recomputeLabelInstance);
3759
+ });
3760
+ const computedGrabbedBoxes = createMemo(() => {
3761
+ if (!isThemeEnabled()) return [];
3762
+ if (!pluginRegistry.store.theme.grabbedBoxes.enabled) return [];
3763
+ store.viewportVersion;
3764
+ return store.grabbedBoxes.map((box) => {
3765
+ if (!box.element || !document.body.contains(box.element)) return box;
3766
+ return {
3767
+ ...box,
3768
+ bounds: createElementBounds(box.element)
3769
+ };
3770
+ });
3771
+ });
3772
+ const dragVisible = createMemo(() => isThemeEnabled() && isDragBoxThemeEnabled() && isRendererActive() && isDraggingBeyondThreshold());
3773
+ const labelVariant = createMemo(() => isCopying() ? "processing" : "hover");
3774
+ const labelVisible = createMemo(() => {
3775
+ if (!isThemeEnabled()) return false;
3776
+ const themeEnabled = isElementLabelThemeEnabled();
3777
+ const inPromptMode = isPromptMode();
3778
+ const copying = isCopying();
3779
+ const rendererActive = isRendererActive();
3780
+ const dragging = isDragging();
3781
+ const hasElement = Boolean(effectiveElement());
3782
+ const toolbarSelectHovered = isToolbarSelectHovered();
3783
+ const frozen = isFrozenPhase();
3784
+ if (!themeEnabled) return false;
3785
+ if (inPromptMode) return false;
3786
+ if (toolbarSelectHovered && !frozen) return false;
3787
+ if (copying) return true;
3788
+ return rendererActive && !dragging && hasElement;
3789
+ });
3790
+ const contextMenuBounds = createMemo(() => {
3791
+ store.viewportVersion;
3792
+ const element = store.contextMenuElement;
3793
+ if (!element) return null;
3794
+ return createElementBounds(element);
3795
+ });
3796
+ const contextMenuPosition = createMemo(() => {
3797
+ store.viewportVersion;
3798
+ return store.contextMenuPosition;
3799
+ });
3800
+ const contextMenuTagName = createMemo(() => {
3801
+ const element = store.contextMenuElement;
3802
+ if (!element) return void 0;
3803
+ const frozenCount = store.frozenElements.length;
3804
+ if (frozenCount > 1) return `${frozenCount} elements`;
3805
+ return getTagName(element) || void 0;
3806
+ });
3807
+ const [contextMenuComponentName] = createResource(() => ({
3808
+ element: store.contextMenuElement,
3809
+ frozenCount: store.frozenElements.length
3810
+ }), async ({ element, frozenCount }) => {
3811
+ if (!element) return void 0;
3812
+ if (frozenCount > 1) return void 0;
3813
+ return await getNearestComponentName(element) ?? void 0;
3814
+ });
3815
+ const [contextMenuFilePath] = createResource(() => store.contextMenuElement, async (element) => {
3816
+ if (!element) return null;
3817
+ return resolveSource(element);
3818
+ });
3819
+ const withSelectionInteractionLock = async (operation) => {
3820
+ actions.incrementSelectionInteractionLockDepth();
3821
+ try {
3822
+ return await operation();
3823
+ } finally {
3824
+ actions.decrementSelectionInteractionLockDepth();
3825
+ }
3826
+ };
3827
+ const createPerformWithFeedback = (element, elements, tagName, componentName, options) => {
3828
+ return async (action) => {
3829
+ await withSelectionInteractionLock(async () => {
3830
+ const fallbackBounds = options?.fallbackBounds ?? null;
3831
+ const fallbackSelectionBounds = options?.fallbackSelectionBounds ?? [];
3832
+ const position = options?.position ?? store.contextMenuPosition ?? store.pointer;
3833
+ const frozenBounds = frozenElementsBounds();
3834
+ const singleElementBounds = contextMenuBounds() ?? fallbackBounds;
3835
+ const hasMultipleElements = elements.length > 1;
3836
+ const labelBounds = hasMultipleElements ? createFlatOverlayBounds(combineBounds(frozenBounds)) : singleElementBounds;
3837
+ const shouldDeactivateAfter = store.wasActivatedByToggle;
3838
+ let selectionBoundsForLabel;
3839
+ if (hasMultipleElements) selectionBoundsForLabel = frozenBounds;
3840
+ else if (singleElementBounds) selectionBoundsForLabel = [singleElementBounds];
3841
+ else selectionBoundsForLabel = fallbackSelectionBounds;
3842
+ actions.hideContextMenu();
3843
+ if (labelBounds) {
3844
+ const labelCursorX = hasMultipleElements ? labelBounds.x + labelBounds.width / 2 : position.x;
3845
+ const labelInstanceId = createLabelInstance(labelBounds, tagName || "element", componentName, "copying", {
3846
+ element,
3847
+ mouseX: labelCursorX,
3848
+ elements: hasMultipleElements ? elements : void 0,
3849
+ boundsMultiple: selectionBoundsForLabel
3850
+ });
3851
+ let didSucceed = false;
3852
+ let errorMessage;
3853
+ try {
3854
+ didSucceed = await action();
3855
+ if (!didSucceed) errorMessage = "Failed to copy";
3856
+ } catch (error) {
3857
+ errorMessage = normalizeErrorMessage(error, "Action failed");
3858
+ }
3859
+ updateLabelAfterCopy(labelInstanceId, didSucceed, errorMessage);
3860
+ } else try {
3861
+ await action();
3862
+ } catch (error) {
3863
+ logRecoverableError("Action failed without feedback bounds", error);
3864
+ }
3865
+ if (shouldDeactivateAfter) deactivateRenderer();
3866
+ else actions.unfreeze();
3867
+ });
3868
+ };
3869
+ };
3870
+ const deferHideContextMenu = () => {
3871
+ setTimeout(() => {
3872
+ actions.hideContextMenu();
3873
+ }, 0);
3874
+ };
3875
+ const buildActionContext = (options) => {
3876
+ const { element, filePath, lineNumber, tagName, componentName, position, performWithFeedbackOptions, shouldDeferHideContextMenu, onBeforeCopy, onBeforePrompt, customEnterPromptMode } = options;
3877
+ const elements = store.frozenElements.length > 0 ? store.frozenElements : [element];
3878
+ const hideContextMenuAction = shouldDeferHideContextMenu ? deferHideContextMenu : actions.hideContextMenu;
3879
+ const copyAction = () => {
3880
+ onBeforeCopy?.();
3881
+ performCopyWithLabel({
3882
+ element,
3883
+ cursorX: position.x,
3884
+ selectedElements: elements.length > 1 ? elements : void 0,
3885
+ shouldDeactivateAfter: store.wasActivatedByToggle
3886
+ });
3887
+ hideContextMenuAction();
3888
+ };
3889
+ const defaultEnterPromptMode = () => {
3890
+ clearAllLabels();
3891
+ onBeforePrompt?.();
3892
+ preparePromptMode(element, position.x, position.y);
3893
+ actions.setPointer({
3894
+ x: position.x,
3895
+ y: position.y
3896
+ });
3897
+ actions.setFrozenElement(element);
3898
+ activatePromptMode();
3899
+ if (!isActivated()) activateRenderer();
3900
+ hideContextMenuAction();
3901
+ };
3902
+ const context = {
3903
+ element,
3904
+ elements,
3905
+ filePath,
3906
+ lineNumber,
3907
+ componentName,
3908
+ tagName,
3909
+ enterPromptMode: customEnterPromptMode ?? defaultEnterPromptMode,
3910
+ copy: copyAction,
3911
+ hooks: {
3912
+ transformHtmlContent: pluginRegistry.hooks.transformHtmlContent,
3913
+ onOpenFile: pluginRegistry.hooks.onOpenFile,
3914
+ transformOpenFileUrl: pluginRegistry.hooks.transformOpenFileUrl
3915
+ },
3916
+ performWithFeedback: createPerformWithFeedback(element, elements, tagName, componentName, performWithFeedbackOptions),
3917
+ hideContextMenu: hideContextMenuAction,
3918
+ cleanup: () => {
3919
+ if (store.wasActivatedByToggle) deactivateRenderer();
3920
+ else actions.unfreeze();
3921
+ }
3922
+ };
3923
+ const transformedContext = pluginRegistry.hooks.transformActionContext(context);
3924
+ return {
3925
+ ...context,
3926
+ ...transformedContext
3927
+ };
3928
+ };
3929
+ const contextMenuActionContext = createMemo(() => {
3930
+ const element = store.contextMenuElement;
3931
+ if (!element) return void 0;
3932
+ const fileInfo = contextMenuFilePath();
3933
+ const position = store.contextMenuPosition ?? store.pointer;
3934
+ return buildActionContext({
3935
+ element,
3936
+ filePath: fileInfo?.filePath,
3937
+ lineNumber: fileInfo?.lineNumber ?? void 0,
3938
+ tagName: contextMenuTagName(),
3939
+ componentName: contextMenuComponentName(),
3940
+ position,
3941
+ shouldDeferHideContextMenu: true,
3942
+ onBeforeCopy: () => {
3943
+ keyboardSelectedElement = null;
3944
+ },
3945
+ customEnterPromptMode: () => {
3946
+ clearAllLabels();
3947
+ actions.clearInputText();
3948
+ actions.enterPromptMode(position, element);
3949
+ deferHideContextMenu();
3950
+ }
3951
+ });
3952
+ });
3953
+ const handleContextMenuDismiss = () => {
3954
+ setTimeout(() => {
3955
+ actions.hideContextMenu();
3956
+ deactivateRenderer();
3957
+ }, 0);
3958
+ };
3959
+ const clearCommentsHoverPreviews = () => {
3960
+ for (const { boxId, labelId } of commentsHoverPreviews) {
3961
+ actions.removeGrabbedBox(boxId);
3962
+ if (labelId) actions.removeLabelInstance(labelId);
3963
+ }
3964
+ commentsHoverPreviews = [];
3965
+ };
3966
+ const addCommentItemPreview = (item, previewBounds, previewElements, idPrefix) => {
3967
+ if (previewBounds.length === 0) return;
3968
+ for (const [index, bounds] of previewBounds.entries()) {
3969
+ const previewElement = previewElements[index];
3970
+ const boxId = `${idPrefix}-${item.id}-${index}`;
3971
+ actions.addGrabbedBox({
3972
+ id: boxId,
3973
+ bounds,
3974
+ createdAt: 0,
3975
+ element: previewElement
3976
+ });
3977
+ let labelId = null;
3978
+ if (index === 0) {
3979
+ labelId = `${idPrefix}-label-${item.id}`;
3980
+ actions.addLabelInstance({
3981
+ id: labelId,
3982
+ bounds,
3983
+ tagName: item.tagName,
3984
+ componentName: item.componentName,
3985
+ elementsCount: item.elementsCount,
3986
+ status: "idle",
3987
+ isPromptMode: Boolean(item.commentText),
3988
+ inputValue: item.commentText ?? void 0,
3989
+ createdAt: 0,
3990
+ element: previewElement,
3991
+ mouseX: bounds.x + bounds.width / 2
3992
+ });
3993
+ }
3994
+ commentsHoverPreviews.push({
3995
+ boxId,
3996
+ labelId
3997
+ });
3998
+ }
3999
+ };
4000
+ const showCommentItemPreview = (item, idPrefix) => {
4001
+ const connectedElements = getConnectedCommentElements(item);
4002
+ addCommentItemPreview(item, connectedElements.map((element) => createElementBounds(element)), connectedElements, idPrefix);
4003
+ };
4004
+ const stopTrackingDropdownPosition = () => {
4005
+ if (dropdownTrackingFrameId !== null) {
4006
+ nativeCancelAnimationFrame(dropdownTrackingFrameId);
4007
+ dropdownTrackingFrameId = null;
4008
+ }
4009
+ };
4010
+ const startTrackingDropdownPosition = (computePosition) => {
4011
+ stopTrackingDropdownPosition();
4012
+ const updatePosition = () => {
4013
+ computePosition();
4014
+ dropdownTrackingFrameId = nativeRequestAnimationFrame(updatePosition);
4015
+ };
4016
+ updatePosition();
4017
+ };
4018
+ const computeDropdownAnchor = () => {
4019
+ if (!toolbarElement) return null;
4020
+ const toolbarRect = toolbarElement.getBoundingClientRect();
4021
+ const edge = getNearestEdge(toolbarRect);
4022
+ if (edge === "left" || edge === "right") return {
4023
+ x: edge === "left" ? toolbarRect.right : toolbarRect.left,
4024
+ y: toolbarRect.top + toolbarRect.height / 2,
4025
+ edge,
4026
+ toolbarWidth: toolbarRect.width
4027
+ };
4028
+ return {
4029
+ x: toolbarRect.left + toolbarRect.width / 2,
4030
+ y: edge === "top" ? toolbarRect.bottom : toolbarRect.top,
4031
+ edge,
4032
+ toolbarWidth: toolbarRect.width
4033
+ };
4034
+ };
4035
+ const openTrackedDropdown = (setPosition) => {
4036
+ startTrackingDropdownPosition(() => {
4037
+ const anchor = computeDropdownAnchor();
4038
+ if (anchor) setPosition(anchor);
4039
+ });
4040
+ };
4041
+ const dismissCommentsDropdown = () => {
4042
+ cancelCommentsHoverOpenTimeout();
4043
+ cancelCommentsHoverCloseTimeout();
4044
+ stopTrackingDropdownPosition();
4045
+ clearCommentsHoverPreviews();
4046
+ setCommentsDropdownPosition(null);
4047
+ setIsCommentsHoverOpen(false);
4048
+ };
4049
+ const dismissToolbarMenu = () => {
4050
+ stopTrackingDropdownPosition();
4051
+ setToolbarMenuPosition(null);
4052
+ };
4053
+ const openCommentsDropdown = () => {
4054
+ actions.hideContextMenu();
4055
+ dismissToolbarMenu();
4056
+ dismissClearPrompt();
4057
+ setCommentItems(loadComments());
4058
+ openTrackedDropdown(setCommentsDropdownPosition);
4059
+ };
4060
+ let commentsHoverOpenTimeoutId = null;
4061
+ let commentsHoverCloseTimeoutId = null;
4062
+ const cancelCommentsHoverOpenTimeout = () => {
4063
+ if (commentsHoverOpenTimeoutId !== null) {
4064
+ clearTimeout(commentsHoverOpenTimeoutId);
4065
+ commentsHoverOpenTimeoutId = null;
4066
+ }
4067
+ };
4068
+ const cancelCommentsHoverCloseTimeout = () => {
4069
+ if (commentsHoverCloseTimeoutId !== null) {
4070
+ clearTimeout(commentsHoverCloseTimeoutId);
4071
+ commentsHoverCloseTimeoutId = null;
4072
+ }
4073
+ };
4074
+ const scheduleCommentsHoverClose = () => {
4075
+ commentsHoverCloseTimeoutId = setTimeout(() => {
4076
+ commentsHoverCloseTimeoutId = null;
4077
+ dismissCommentsDropdown();
4078
+ }, 200);
4079
+ };
4080
+ const showClearPrompt = () => {
4081
+ dismissCommentsDropdown();
4082
+ dismissToolbarMenu();
4083
+ openTrackedDropdown(setClearPromptPosition);
4084
+ };
4085
+ const dismissClearPrompt = () => {
4086
+ stopTrackingDropdownPosition();
4087
+ setClearPromptPosition(null);
4088
+ };
4089
+ const dismissAllPopups = () => {
4090
+ dismissCommentsDropdown();
4091
+ dismissToolbarMenu();
4092
+ dismissClearPrompt();
4093
+ };
4094
+ const handleToggleToolbarMenu = () => {
4095
+ if (toolbarMenuPosition() !== null) dismissToolbarMenu();
4096
+ else {
4097
+ actions.hideContextMenu();
4098
+ dismissCommentsDropdown();
4099
+ dismissClearPrompt();
4100
+ openTrackedDropdown(setToolbarMenuPosition);
4101
+ }
4102
+ };
4103
+ const handleSetDefaultAction = (actionId) => {
4104
+ updateToolbarState({ defaultAction: actionId });
4105
+ };
4106
+ const handleToggleComments = () => {
4107
+ cancelCommentsHoverOpenTimeout();
4108
+ cancelCommentsHoverCloseTimeout();
4109
+ if (commentsDropdownPosition() !== null) if (isCommentsHoverOpen()) {
4110
+ clearCommentsHoverPreviews();
4111
+ setIsCommentsHoverOpen(false);
4112
+ } else dismissCommentsDropdown();
4113
+ else {
4114
+ clearCommentsHoverPreviews();
4115
+ openCommentsDropdown();
4116
+ }
4117
+ };
4118
+ const copyCommentItemContent = (item) => {
4119
+ copyContent(item.content, {
4120
+ tagName: item.tagName,
4121
+ componentName: item.componentName ?? item.elementName,
4122
+ commentText: item.commentText
4123
+ });
4124
+ const element = getFirstConnectedCommentElement(item);
4125
+ if (!element) return;
4126
+ clearAllLabels();
4127
+ nativeRequestAnimationFrame(() => {
4128
+ if (!isElementConnected(element)) return;
4129
+ const bounds = createElementBounds(element);
4130
+ const labelId = createLabelInstance(bounds, item.tagName, item.componentName, "copied", {
4131
+ element,
4132
+ mouseX: bounds.x + bounds.width / 2
4133
+ });
4134
+ if (labelId) scheduleLabelFade(labelId);
4135
+ });
4136
+ };
4137
+ const handleCommentItemSelect = (item) => {
4138
+ clearCommentsHoverPreviews();
4139
+ if (isPromptMode()) {
4140
+ actions.exitPromptMode();
4141
+ actions.clearInputText();
4142
+ }
4143
+ const element = getFirstConnectedCommentElement(item);
4144
+ if (item.commentText && element) {
4145
+ const center = getBoundsCenter(createElementBounds(element));
4146
+ actions.enterPromptMode(center, element);
4147
+ actions.setInputText(item.commentText);
4148
+ } else copyCommentItemContent(item);
4149
+ };
4150
+ const handleCommentsCopyAll = () => {
4151
+ clearCommentsHoverPreviews();
4152
+ const currentCommentItems = commentItems();
4153
+ if (currentCommentItems.length === 0) return;
4154
+ const combinedContent = joinSnippets(currentCommentItems.map((commentItem) => commentItem.content));
4155
+ const firstItem = currentCommentItems[0];
4156
+ copyContent(combinedContent, {
4157
+ componentName: firstItem.componentName ?? firstItem.tagName,
4158
+ entries: currentCommentItems.map((commentItem) => ({
4159
+ tagName: commentItem.tagName,
4160
+ componentName: commentItem.componentName ?? commentItem.elementName,
4161
+ content: commentItem.content,
4162
+ commentText: commentItem.commentText
4163
+ }))
4164
+ });
4165
+ if (isClearConfirmed()) handleCommentsClear();
4166
+ else showClearPrompt();
4167
+ clearAllLabels();
4168
+ nativeRequestAnimationFrame(() => {
4169
+ batch(() => {
4170
+ for (const commentItem of currentCommentItems) {
4171
+ const connectedElements = getConnectedCommentElements(commentItem);
4172
+ for (const element of connectedElements) {
4173
+ const bounds = createElementBounds(element);
4174
+ const labelId = generateId("label");
4175
+ actions.addLabelInstance({
4176
+ id: labelId,
4177
+ bounds,
4178
+ tagName: commentItem.tagName,
4179
+ componentName: commentItem.componentName,
4180
+ status: "copied",
4181
+ createdAt: Date.now(),
4182
+ element,
4183
+ mouseX: bounds.x + bounds.width / 2
4184
+ });
4185
+ scheduleLabelFade(labelId);
4186
+ }
4187
+ }
4188
+ });
4189
+ });
4190
+ };
4191
+ const handleCommentItemHover = (commentItemId) => {
4192
+ clearCommentsHoverPreviews();
4193
+ if (!commentItemId) return;
4194
+ const item = commentItems().find((innerItem) => innerItem.id === commentItemId);
4195
+ if (!item) return;
4196
+ showCommentItemPreview(item, "comment-hover");
4197
+ };
4198
+ const handleCommentsButtonHover = (isHovered) => {
4199
+ cancelCommentsHoverOpenTimeout();
4200
+ clearCommentsHoverPreviews();
4201
+ if (isHovered) {
4202
+ cancelCommentsHoverCloseTimeout();
4203
+ if (commentsDropdownPosition() === null && clearPromptPosition() === null) {
4204
+ showAllCommentItemPreviews();
4205
+ commentsHoverOpenTimeoutId = setTimeout(() => {
4206
+ commentsHoverOpenTimeoutId = null;
4207
+ setIsCommentsHoverOpen(true);
4208
+ openCommentsDropdown();
4209
+ }, 200);
4210
+ }
4211
+ } else if (isCommentsHoverOpen()) scheduleCommentsHoverClose();
4212
+ };
4213
+ const handleCommentsDropdownHover = (isHovered) => {
4214
+ if (isHovered) cancelCommentsHoverCloseTimeout();
4215
+ else if (isCommentsHoverOpen()) scheduleCommentsHoverClose();
4216
+ };
4217
+ const handleCommentsCopyAllHover = (isHovered) => {
4218
+ clearCommentsHoverPreviews();
4219
+ if (isHovered) {
4220
+ cancelCommentsHoverCloseTimeout();
4221
+ showAllCommentItemPreviews();
4222
+ } else if (isCommentsHoverOpen()) scheduleCommentsHoverClose();
4223
+ };
4224
+ const showAllCommentItemPreviews = () => {
4225
+ for (const item of commentItems()) showCommentItemPreview(item, "comment-all-hover");
4226
+ };
4227
+ const handleCommentsClear = () => {
4228
+ commentElementMap.clear();
4229
+ setCommentItems(clearComments());
4230
+ dismissCommentsDropdown();
4231
+ };
4232
+ const handleShowContextMenuInstance = (instanceId) => {
4233
+ const instance = store.labelInstances.find((labelInstance) => labelInstance.id === instanceId);
4234
+ if (!instance?.element) return;
4235
+ if (!isElementConnected(instance.element)) return;
4236
+ const contextMenuElement = instance.element;
4237
+ const center = getBoundsCenter(createElementBounds(contextMenuElement));
4238
+ const position = {
4239
+ x: instance.mouseX ?? center.x,
4240
+ y: center.y
4241
+ };
4242
+ const elementsToFreeze = instance.elements && instance.elements.length > 0 ? instance.elements.filter((element) => isElementConnected(element)) : [contextMenuElement];
4243
+ setTimeout(() => {
4244
+ if (!isActivated()) {
4245
+ actions.setWasActivatedByToggle(true);
4246
+ activateRenderer();
4247
+ }
4248
+ actions.setPointer(position);
4249
+ actions.setFrozenElements(elementsToFreeze);
4250
+ if (elementsToFreeze.length > 1 && instance.bounds) actions.setFrozenDragRect(createPageRectFromBounds(instance.bounds));
4251
+ actions.freeze();
4252
+ actions.showContextMenu(position, contextMenuElement);
4253
+ }, 0);
4254
+ };
4255
+ createEffect(() => {
4256
+ const hue = pluginRegistry.store.theme.hue;
4257
+ if (hue !== 0) rendererRoot.style.filter = `hue-rotate(${hue}deg)`;
4258
+ else rendererRoot.style.filter = "";
4259
+ });
4260
+ if (pluginRegistry.store.theme.enabled) import("./renderer-DNQ9_mCu.js").then(({ ReactGrabRenderer }) => {
4261
+ if (disposed) return;
4262
+ disposeRenderer = render(() => {
4263
+ return createComponent(ReactGrabRenderer, {
4264
+ get selectionVisible() {
4265
+ return selectionVisible();
4266
+ },
4267
+ get selectionBounds() {
4268
+ return selectionBounds();
4269
+ },
4270
+ get selectionBoundsMultiple() {
4271
+ return selectionBoundsMultiple();
4272
+ },
4273
+ get selectionShouldSnap() {
4274
+ return store.frozenElements.length > 0 || dragPreviewBounds().length > 0;
4275
+ },
4276
+ get selectionElementsCount() {
4277
+ return store.frozenElements.length;
4278
+ },
4279
+ get frozenLabelEntries() {
4280
+ return frozenLabelEntries();
4281
+ },
4282
+ get selectionFilePath() {
4283
+ return store.selectionFilePath ?? void 0;
4284
+ },
4285
+ get selectionLineNumber() {
4286
+ return store.selectionLineNumber ?? void 0;
4287
+ },
4288
+ get selectionTagName() {
4289
+ return selectionTagName();
4290
+ },
4291
+ get selectionComponentName() {
4292
+ return resolvedComponentName();
4293
+ },
4294
+ get selectionLabelVisible() {
4295
+ return selectionLabelVisible();
4296
+ },
4297
+ selectionLabelStatus: "idle",
4298
+ get selectionArrowNavigationState() {
4299
+ return arrowNavigationState();
4300
+ },
4301
+ onArrowNavigationSelect: handleArrowNavigationSelect,
4302
+ get labelInstances() {
4303
+ return computedLabelInstances();
4304
+ },
4305
+ get dragVisible() {
4306
+ return dragVisible();
4307
+ },
4308
+ get dragBounds() {
4309
+ return dragBounds();
4310
+ },
4311
+ get grabbedBoxes() {
4312
+ return computedGrabbedBoxes();
4313
+ },
4314
+ get mouseX() {
4315
+ return memo(() => store.frozenElements.length > 1)() ? void 0 : shiftSelectionLabelMouseX() ?? cursorPosition().x;
4316
+ },
4317
+ get isFrozen() {
4318
+ return isFrozenPhase() || isActivated() || isToolbarSelectHovered();
4319
+ },
4320
+ get inputValue() {
4321
+ return store.inputText;
4322
+ },
4323
+ get isPromptMode() {
4324
+ return isPromptMode();
4325
+ },
4326
+ onShowContextMenuInstance: handleShowContextMenuInstance,
4327
+ onLabelInstanceHoverChange: handleLabelInstanceHoverChange,
4328
+ get onInputChange() {
4329
+ return actions.setInputText;
4330
+ },
4331
+ onInputSubmit: () => void handleInputSubmit(),
4332
+ onToggleExpand: handleToggleExpand,
4333
+ get isPendingDismiss() {
4334
+ return isPendingDismiss();
4335
+ },
4336
+ get selectionLabelShakeCount() {
4337
+ return selectionLabelShakeCount();
4338
+ },
4339
+ onConfirmDismiss: handleConfirmDismiss,
4340
+ onCancelDismiss: handleCancelDismiss,
4341
+ get toolbarVisible() {
4342
+ return pluginRegistry.store.theme.toolbar.enabled;
4343
+ },
4344
+ get isActive() {
4345
+ return isActivated();
4346
+ },
4347
+ onToggleActive: handleToggleActive,
4348
+ get enabled() {
4349
+ return isEnabled();
4350
+ },
4351
+ get shakeCount() {
4352
+ return toolbarShakeCount();
4353
+ },
4354
+ onToolbarStateChange: (state) => {
4355
+ setCurrentToolbarState(state);
4356
+ if (state.enabled !== isEnabled()) {
4357
+ setIsEnabled(state.enabled);
4358
+ if (!state.enabled) {
4359
+ forceDeactivateAll();
4360
+ dismissAllPopups();
4361
+ }
4362
+ }
4363
+ toolbarStateChangeCallbacks.forEach((callback) => callback(state));
4364
+ },
4365
+ onSubscribeToToolbarStateChanges: (callback) => {
4366
+ toolbarStateChangeCallbacks.add(callback);
4367
+ return () => {
4368
+ toolbarStateChangeCallbacks.delete(callback);
4369
+ };
4370
+ },
4371
+ onToolbarSelectHoverChange: setIsToolbarSelectHovered,
4372
+ onToolbarRef: (element) => {
4373
+ toolbarElement = element;
4374
+ },
4375
+ get contextMenuPosition() {
4376
+ return contextMenuPosition();
4377
+ },
4378
+ get contextMenuBounds() {
4379
+ return contextMenuBounds();
4380
+ },
4381
+ get contextMenuTagName() {
4382
+ return contextMenuTagName();
4383
+ },
4384
+ get contextMenuComponentName() {
4385
+ return contextMenuComponentName();
4386
+ },
4387
+ get contextMenuHasFilePath() {
4388
+ return Boolean(contextMenuFilePath()?.filePath);
4389
+ },
4390
+ get actions() {
4391
+ return pluginRegistry.store.actions;
4392
+ },
4393
+ get actionContext() {
4394
+ return contextMenuActionContext();
4395
+ },
4396
+ onContextMenuDismiss: handleContextMenuDismiss,
4397
+ onContextMenuHide: deferHideContextMenu,
4398
+ get commentItems() {
4399
+ return commentItems();
4400
+ },
4401
+ get commentsDisconnectedItemIds() {
4402
+ return commentsDisconnectedItemIds();
4403
+ },
4404
+ get commentItemCount() {
4405
+ return commentItems().length;
4406
+ },
4407
+ get clockFlashTrigger() {
4408
+ return clockFlashTrigger();
4409
+ },
4410
+ get commentsDropdownPosition() {
4411
+ return commentsDropdownPosition();
4412
+ },
4413
+ get isCommentsPinned() {
4414
+ return memo(() => commentsDropdownPosition() !== null)() && !isCommentsHoverOpen();
4415
+ },
4416
+ onToggleComments: handleToggleComments,
4417
+ onCopyAll: handleCommentsCopyAll,
4418
+ onCopyAllHover: handleCommentsCopyAllHover,
4419
+ onCommentsButtonHover: handleCommentsButtonHover,
4420
+ onCommentItemSelect: handleCommentItemSelect,
4421
+ onCommentItemHover: handleCommentItemHover,
4422
+ onCommentsCopyAll: handleCommentsCopyAll,
4423
+ onCommentsCopyAllHover: handleCommentsCopyAllHover,
4424
+ onCommentsClear: handleCommentsClear,
4425
+ onCommentsDismiss: dismissCommentsDropdown,
4426
+ onCommentsDropdownHover: handleCommentsDropdownHover,
4427
+ get toolbarMenuPosition() {
4428
+ return toolbarMenuPosition();
4429
+ },
4430
+ get toolbarMenuActions() {
4431
+ return pluginRegistry.store.actions.filter((action) => action.showInToolbarMenu === true);
4432
+ },
4433
+ get defaultActionId() {
4434
+ return currentToolbarState()?.defaultAction ?? "comment";
4435
+ },
4436
+ onSetDefaultAction: handleSetDefaultAction,
4437
+ onToggleToolbarMenu: handleToggleToolbarMenu,
4438
+ onToolbarMenuDismiss: dismissToolbarMenu,
4439
+ get clearPromptPosition() {
4440
+ return clearPromptPosition();
4441
+ },
4442
+ onClearCommentsConfirm: () => {
4443
+ confirmClear();
4444
+ dismissClearPrompt();
4445
+ handleCommentsClear();
4446
+ },
4447
+ onClearCommentsCancel: dismissClearPrompt
4448
+ });
4449
+ }, rendererRoot);
4450
+ }).catch((error) => {
4451
+ console.warn("[react-grab] Failed to load renderer:", error);
4452
+ });
4453
+ const copyElementAPI = async (elements) => {
4454
+ const elementsArray = Array.isArray(elements) ? elements : [elements];
4455
+ if (elementsArray.length === 0) return false;
4456
+ return await copyWithFallback(elementsArray);
4457
+ };
4458
+ const api = {
4459
+ activate: () => {
4460
+ actions.setPendingCommentMode(false);
4461
+ if (!isActivated() && isEnabled()) toggleActivate();
4462
+ },
4463
+ deactivate: () => {
4464
+ if (isActivated() || isCopying()) deactivateRenderer();
4465
+ },
4466
+ toggle: () => {
4467
+ if (isActivated()) deactivateRenderer();
4468
+ else if (isEnabled()) toggleActivate();
4469
+ },
4470
+ comment: handleComment,
4471
+ isActive: () => isActivated(),
4472
+ isEnabled: () => isEnabled(),
4473
+ setEnabled: (enabled) => {
4474
+ if (enabled === isEnabled()) return;
4475
+ setIsEnabled(enabled);
4476
+ updateToolbarState({
4477
+ enabled,
4478
+ collapsed: !enabled
4479
+ });
4480
+ if (!enabled) {
4481
+ forceDeactivateAll();
4482
+ dismissAllPopups();
4483
+ }
4484
+ },
4485
+ getToolbarState: () => loadToolbarState(),
4486
+ setToolbarState: (state) => {
4487
+ const currentState = loadToolbarState();
4488
+ const resolvedCollapsed = state.collapsed ?? currentState?.collapsed ?? false;
4489
+ const newState = {
4490
+ edge: state.edge ?? currentState?.edge ?? "bottom",
4491
+ ratio: state.ratio ?? currentState?.ratio ?? .5,
4492
+ collapsed: resolvedCollapsed,
4493
+ enabled: !resolvedCollapsed,
4494
+ defaultAction: state.defaultAction ?? currentState?.defaultAction ?? "comment"
4495
+ };
4496
+ saveToolbarState(newState);
4497
+ setCurrentToolbarState(newState);
4498
+ if (newState.enabled !== isEnabled()) {
4499
+ setIsEnabled(newState.enabled);
4500
+ if (!newState.enabled) {
4501
+ forceDeactivateAll();
4502
+ dismissAllPopups();
4503
+ }
4504
+ }
4505
+ toolbarStateChangeCallbacks.forEach((callback) => callback(newState));
4506
+ },
4507
+ onToolbarStateChange: (callback) => {
4508
+ toolbarStateChangeCallbacks.add(callback);
4509
+ return () => {
4510
+ toolbarStateChangeCallbacks.delete(callback);
4511
+ };
4512
+ },
4513
+ dispose: () => {
4514
+ disposed = true;
4515
+ hasInited = false;
4516
+ disposeRenderer?.();
4517
+ cancelCommentsHoverOpenTimeout();
4518
+ cancelCommentsHoverCloseTimeout();
4519
+ stopTrackingDropdownPosition();
4520
+ toolbarStateChangeCallbacks.clear();
4521
+ dispose();
4522
+ },
4523
+ copyElement: copyElementAPI,
4524
+ getSource: async (element) => {
4525
+ const source = await resolveSource(element);
4526
+ if (!source) return null;
4527
+ return {
4528
+ filePath: source.filePath,
4529
+ lineNumber: source.lineNumber,
4530
+ componentName: source.componentName
4531
+ };
4532
+ },
4533
+ getStackContext,
4534
+ getState: () => ({
4535
+ isActive: isActivated(),
4536
+ isDragging: isDragging(),
4537
+ isCopying: isCopying(),
4538
+ isPromptMode: isPromptMode(),
4539
+ isSelectionBoxVisible: Boolean(selectionVisible()),
4540
+ isDragBoxVisible: Boolean(dragVisible()),
4541
+ targetElement: targetElement(),
4542
+ dragBounds: dragBounds() ?? null,
4543
+ grabbedBoxes: [...publicGrabbedBoxes()],
4544
+ labelInstances: [...publicLabelInstances()],
4545
+ selectionFilePath: store.selectionFilePath,
4546
+ toolbarState: currentToolbarState()
4547
+ }),
4548
+ setOptions: (newOptions) => {
4549
+ pluginRegistry.setOptions(newOptions);
4550
+ },
4551
+ registerPlugin: (plugin) => {
4552
+ pluginRegistry.register(plugin, api);
4553
+ },
4554
+ unregisterPlugin: (name) => {
4555
+ pluginRegistry.unregister(name);
4556
+ },
4557
+ getPlugins: () => pluginRegistry.getPluginNames(),
4558
+ getDisplayName: getComponentDisplayName
4559
+ };
4560
+ for (const plugin of builtInPlugins) pluginRegistry.register(plugin, api);
4561
+ setTimeout(() => {
4562
+ checkIsNextProject(true);
4563
+ }, NEXTJS_REVALIDATION_DELAY_MS);
4564
+ return api;
4565
+ });
4566
+ };
4567
+
4568
+ //#endregion
4569
+ export { generateSnippet as a, DEFAULT_THEME as i, openPlugin as n, copyContent as o, commentPlugin as r, init as t };