chore: update online playground

diff --git a/packages/online-playground/public/logo-mp.png b/packages/online-playground/public/logo-mp.png
new file mode 100644 (file)
index 0000000..b169760
Binary files /dev/null and b/packages/online-playground/public/logo-mp.png differ

diff --git a/packages/online-playground/public/logo-mp.svg b/packages/online-playground/public/logo-mp.svg
new file mode 100644 (file)
index 0000000..afabae3
--- /dev/null
+++ b/packages/online-playground/public/logo-mp.svg
@@ -0,0 +1,44 @@
+<svg width="194" height="31" viewBox="0 0 194 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.38789 12.1437C8.47603 14.5334 10.9402 15.7499 12.8915 14.8606C14.8427 13.972 15.5428 11.3145 14.4546 8.92554C13.3665 6.53659 8.77085 0.638086 6.81896 1.52669C4.86775 2.4153 6.29974 9.75477 7.38789 12.1437Z" fill="#62A50A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8321 12.1437C14.7439 14.5334 12.2797 15.7499 10.3285 14.8606C8.37728 13.972 7.67716 11.3145 8.76531 8.92554C9.85346 6.53659 14.4498 0.638086 16.401 1.52669C18.3522 2.4153 16.9202 9.75477 15.8321 12.1437Z" fill="#62A50A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4225 10.3983C15.4225 13.0241 13.684 15.152 11.5401 15.152C9.39626 15.152 7.65771 13.0234 7.65771 10.3983C7.65771 7.77319 9.39557 0.5 11.5401 0.5C13.6846 0.5 15.4225 7.7725 15.4225 10.3983Z" fill="#79C90F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3529 30.4993C18.0919 30.4993 22.7462 28.8319 22.7462 21.2715C22.7462 13.711 18.0919 7.50735 12.3529 7.50735C6.61388 7.50735 1.96301 13.7117 1.96301 21.2721C1.96301 28.8326 6.61318 30.5 12.3522 30.5L12.3529 30.4993Z" fill="url(#paint0_linear_584_333)"/>
+<path d="M12.4985 21.8438C12.4032 21.8438 12.3059 21.8383 12.2078 21.8266C11.5622 21.7527 11.0748 21.4772 10.7579 21.0077C10.6937 20.9131 10.7192 20.784 10.8138 20.7198C10.9091 20.6563 11.0375 20.6811 11.1017 20.7757C11.351 21.1451 11.728 21.3543 12.2548 21.4144C12.7878 21.4751 13.2435 21.3446 13.6488 21.0153C13.7372 20.9428 13.8677 20.9566 13.9402 21.0457C14.012 21.1348 13.9988 21.2646 13.9098 21.3371C13.4955 21.674 13.0219 21.8432 12.4985 21.8432V21.8438Z" fill="#010101"/>
+<path d="M8.98884 27.2245L7.13705 25.2975L8.44269 23.909C8.55662 23.7875 8.55109 23.5969 8.42957 23.4823C8.30805 23.3684 8.11749 23.3739 8.00288 23.4954L6.71864 24.8618L4.929 22.999C4.81369 22.8788 4.62244 22.8747 4.5023 22.9907C4.38216 23.106 4.37802 23.2972 4.49401 23.4174L6.30506 25.3023L5.42405 26.2393C5.31013 26.3608 5.31565 26.5513 5.43717 26.6659C5.49517 26.7205 5.56973 26.7481 5.64361 26.7481C5.7237 26.7481 5.80449 26.7164 5.86387 26.6528L6.72347 25.738L8.55385 27.6429C8.61323 27.7044 8.69194 27.7355 8.77135 27.7355C8.8466 27.7355 8.92186 27.7071 8.98055 27.6512C9.10069 27.5359 9.10483 27.3447 8.98884 27.2245Z" fill="#ECB732"/>
+<path d="M20.1375 22.9907C20.0174 22.8754 19.8261 22.8788 19.7108 22.999L17.9212 24.8618L16.6369 23.4954C16.523 23.3739 16.3318 23.3677 16.2102 23.4823C16.0887 23.5962 16.0832 23.7875 16.1971 23.909L17.5028 25.2975L15.651 27.2245C15.5357 27.3447 15.5391 27.5359 15.6593 27.6512C15.7179 27.7072 15.7932 27.7355 15.8685 27.7355C15.9479 27.7355 16.0266 27.7044 16.086 27.6429L17.9163 25.738L18.7759 26.6528C18.8353 26.7164 18.9154 26.7481 18.9962 26.7481C19.0701 26.7481 19.1446 26.7212 19.2026 26.666C19.3242 26.552 19.3297 26.3608 19.2158 26.2393L18.3347 25.3023L20.1458 23.4174C20.2611 23.2973 20.2577 23.106 20.1375 22.9907Z" fill="#ECB732"/>
+<path d="M14.1225 9.94949C14.0113 9.83764 13.8304 9.83764 13.7186 9.94949L12.3888 11.2793L11.059 9.94949C10.9478 9.83764 10.7669 9.83764 10.6551 9.94949C10.5432 10.0607 10.5432 10.2416 10.6551 10.3534L11.9849 11.6832L11.1743 12.4938C11.0624 12.605 11.0624 12.7859 11.1743 12.8977C11.2302 12.9536 11.3034 12.9813 11.3759 12.9813C11.4484 12.9813 11.5223 12.9536 11.5775 12.8977L12.3881 12.0871L13.1987 12.8977C13.2546 12.9536 13.3278 12.9813 13.4003 12.9813C13.4728 12.9813 13.5467 12.9536 13.6019 12.8977C13.7137 12.7865 13.7137 12.6056 13.6019 12.4938L12.7913 11.6832L14.1211 10.3534C14.233 10.2422 14.233 10.0613 14.1211 9.94949H14.1225Z" fill="#ECB732"/>
+<path d="M18.2388 14.9504C18.2388 14.9504 14.5864 15.3336 14.1804 16.5737C13.7744 17.8137 14.4959 19.9783 16.8186 20.1585C19.1406 20.3387 21.0124 20.0459 21.5986 18.5124C22.1848 16.9796 22.2269 15.8949 22.162 15.4234C22.0715 14.7695 19.3215 14.7467 18.2388 14.9497V14.9504Z" fill="#101217"/>
+<path d="M6.47011 14.9504C5.38817 14.7474 2.63742 14.7702 2.54698 15.424C2.48207 15.8949 2.52419 16.9796 3.11038 18.5131C3.69657 20.0459 5.56769 20.3393 7.89036 20.1591C10.2123 19.9789 10.9339 17.8144 10.5286 16.5743C10.1226 15.3343 6.47011 14.9511 6.47011 14.9511V14.9504Z" fill="#101217"/>
+<path d="M20.7417 13.8008C19.1862 13.8457 15.0379 14.793 13.7979 15.1085C13.1862 15.2639 12.6953 15.2825 12.3549 15.2618C12.0145 15.2832 11.5236 15.2646 10.9118 15.1085C9.67177 14.793 5.52356 13.8457 3.96798 13.8008C2.41239 13.7559 1.17235 13.4853 1.19513 14.7025C1.21792 15.9198 2.48006 18.8286 2.48006 18.8286C2.48006 18.8286 3.1567 20.3842 4.71228 20.7226C6.26786 21.0609 8.71136 20.929 9.78501 20.0238C10.9346 19.0544 11.3406 17.1605 11.3406 17.1605C11.3406 17.1605 11.5236 16.5902 12.3555 16.6303C13.1869 16.5902 13.3698 17.1605 13.3698 17.1605C13.3698 17.1605 13.7758 19.0544 14.9254 20.0238C15.999 20.929 18.4426 21.0609 19.9981 20.7226C21.5537 20.3842 22.2304 18.8286 22.2304 18.8286C22.2304 18.8286 23.4932 15.9205 23.5153 14.7025C23.5381 13.4853 22.298 13.7559 20.7424 13.8008H20.7417ZM7.89042 20.1585C5.56844 20.3387 3.69663 20.0459 3.11044 18.5124C2.52425 16.9796 2.48213 15.8949 2.54703 15.4234C2.63748 14.7695 5.38754 14.7467 6.47016 14.9497C6.47016 14.9497 10.1226 15.3329 10.5286 16.573C10.9346 17.813 10.2131 19.9776 7.89042 20.1578V20.1585ZM21.5986 18.5124C21.0124 20.0452 19.1413 20.3387 16.8186 20.1585C14.4966 19.9782 13.7751 17.8137 14.1804 16.5736C14.5864 15.3336 18.2389 14.9504 18.2389 14.9504C19.3208 14.7474 22.0716 14.7702 22.162 15.424C22.2269 15.8949 22.1848 16.9796 21.5986 18.5131V18.5124Z" fill="#2E3442"/>
+<path opacity="0.2" d="M21.5734 17.0783C21.791 16.5165 21.6927 15.9546 21.3538 15.8234C21.0149 15.6921 20.5638 16.0412 20.3462 16.603C20.1287 17.1649 20.227 17.7267 20.5659 17.858C20.9047 17.9892 21.3558 17.6401 21.5734 17.0783Z" fill="white"/>
+<path opacity="0.2" d="M19.7558 17.953C19.8975 17.587 19.8334 17.2211 19.6126 17.1356C19.3917 17.0501 19.0979 17.2774 18.9562 17.6433C18.8145 18.0092 18.8786 18.3751 19.0994 18.4606C19.3202 18.5461 19.6141 18.3189 19.7558 17.953Z" fill="white"/>
+<path opacity="0.2" d="M20.3522 18.3317C20.4195 18.1579 20.3758 17.9788 20.2546 17.9319C20.1333 17.8849 19.9804 17.9878 19.9131 18.1617C19.8457 18.3356 19.8894 18.5146 20.0107 18.5616C20.1319 18.6085 20.2848 18.5056 20.3522 18.3317Z" fill="white"/>
+<path d="M11.1411 2.51126L0 7.6413V7.88917L8.91922 9.80378L22.0384 4.67306V4.42519L11.1411 2.51126Z" fill="#7B859B"/>
+<path d="M21.5235 4.81244C21.9819 6.2175 22.0675 7.73304 21.763 9.1816C21.888 9.22372 21.9902 9.3259 22.0261 9.46261C22.072 9.63836 21.9954 9.81682 21.8496 9.90827C21.895 9.95816 21.9343 10.0167 21.9669 10.0833C22.0663 10.2884 22.0981 10.5639 22.038 10.8511C22.009 10.9892 21.9365 11.1114 21.8454 11.2164C21.8095 11.2585 21.7694 11.2978 21.7287 11.3344C21.6755 11.3814 21.6203 11.4242 21.5657 11.4622C21.429 11.5567 21.2985 11.621 21.2288 11.6527C21.1957 11.6679 21.1756 11.6755 21.1756 11.6755C21.1756 11.6755 21.157 11.6569 21.1266 11.6223C21.0755 11.5643 20.9913 11.4628 20.9112 11.3351C20.8767 11.2799 20.8428 11.2198 20.8131 11.1556C20.7938 11.1142 20.7759 11.0707 20.7607 11.0272C20.7096 10.8829 20.6854 10.7268 20.7179 10.5742C20.7793 10.2808 20.925 10.0364 21.1038 9.89C21.1604 9.84374 21.2212 9.80646 21.2827 9.7816C21.2851 9.7806 21.2876 9.77962 21.29 9.77866C21.2692 9.74508 21.253 9.70787 21.2425 9.66768C21.1858 9.45088 21.3156 9.22993 21.5317 9.17331C21.5746 9.16227 21.6174 9.15812 21.6595 9.16089C21.8549 8.23707 21.8929 7.28425 21.7672 6.34662C21.6968 5.82188 21.5752 5.31163 21.4088 4.82141L21.5235 4.81244Z" fill="#FFD908"/>
+<path d="M11.1418 2.75916L0 7.88919L8.91922 9.80381L22.0384 4.67308L11.1418 2.75916Z" fill="#576073"/>
+<path d="M4.40908 12.6885C5.25074 12.219 7.85939 10.8124 11.6298 10.5281C17.02 10.1216 18.254 10.8837 19.1357 11.1267C19.4022 11.1999 19.5561 11.2986 19.5741 11.4236L16.8385 5.63625C16.4843 4.9062 14.5156 4.53121 11.3281 4.62496C8.14064 4.81246 5.60942 6.68743 5.44752 7.29885L3.96996 13.1587C3.94993 13.0165 4.10805 12.8563 4.40908 12.6878V12.6885Z" fill="url(#paint1_linear_584_333)"/>
+<path d="M38.5156 8.18743H43.0053L46.8139 17.4744H46.9896L50.7982 8.18743H55.2879V23.1873H51.7577V13.9735H51.6332L48.0297 23.092H45.7738L42.1704 13.9222H42.0459V23.1873H38.5156V8.18743Z" fill="white"/>
+<path d="M60.7206 23.3777C60.0028 23.3777 59.3656 23.2581 58.809 23.0188C58.2572 22.7747 57.8202 22.4085 57.4979 21.9202C57.1806 21.427 57.0219 20.8094 57.0219 20.0672C57.0219 19.4422 57.1317 18.9148 57.3515 18.4852C57.5712 18.0555 57.8739 17.7064 58.2597 17.4378C58.6454 17.1693 59.0897 16.9666 59.5927 16.8299C60.0956 16.6883 60.6327 16.5931 61.204 16.5443C61.8436 16.4857 62.3587 16.4246 62.7494 16.3612C63.14 16.2928 63.4232 16.1976 63.599 16.0755C63.7796 15.9486 63.8699 15.7703 63.8699 15.5409V15.5042C63.8699 15.1283 63.7406 14.8377 63.4818 14.6327C63.223 14.4276 62.8739 14.3251 62.4344 14.3251C61.9608 14.3251 61.5799 14.4276 61.2918 14.6327C61.0038 14.8377 60.8207 15.1209 60.7425 15.4823L57.4394 15.3651C57.537 14.6815 57.7885 14.0712 58.1937 13.534C58.6039 12.9921 59.1654 12.5673 59.8783 12.2596C60.5961 11.9472 61.4579 11.7909 62.4637 11.7909C63.1815 11.7909 63.8431 11.8764 64.4486 12.0472C65.054 12.2133 65.5814 12.4574 66.0306 12.7797C66.4798 13.097 66.8265 13.4877 67.0706 13.9515C67.3196 14.4154 67.4441 14.9452 67.4441 15.5409V23.1873H64.075V21.6199H63.9871C63.7869 22.0007 63.5306 22.323 63.2181 22.5867C62.9105 22.8503 62.5467 23.0481 62.1268 23.1799C61.7118 23.3118 61.243 23.3777 60.7206 23.3777ZM61.8265 21.034C62.2122 21.034 62.5589 20.9558 62.8665 20.7996C63.179 20.6433 63.4281 20.4285 63.6136 20.1551C63.7991 19.8767 63.8919 19.5545 63.8919 19.1883V18.119C63.7894 18.1727 63.6649 18.2215 63.5184 18.2654C63.3768 18.3094 63.2205 18.3509 63.0496 18.3899C62.8787 18.429 62.703 18.4632 62.5223 18.4925C62.3416 18.5218 62.1683 18.5486 62.0023 18.5731C61.6654 18.6268 61.3773 18.7098 61.138 18.8221C60.9037 18.9344 60.723 19.0809 60.5961 19.2615C60.474 19.4373 60.413 19.6473 60.413 19.8914C60.413 20.2625 60.5448 20.5457 60.8085 20.741C61.077 20.9363 61.4164 21.034 61.8265 21.034Z" fill="white"/>
+<path d="M79.4557 15.3724L76.1672 15.4603C76.133 15.2259 76.0402 15.0184 75.8888 14.8377C75.7375 14.6522 75.5397 14.5082 75.2956 14.4056C75.0563 14.2982 74.778 14.2445 74.4606 14.2445C74.0456 14.2445 73.6916 14.3275 73.3986 14.4935C73.1106 14.6595 72.969 14.8841 72.9738 15.1673C72.969 15.3871 73.0569 15.5775 73.2375 15.7386C73.4231 15.8997 73.7526 16.0291 74.2263 16.1268L76.3942 16.5369C77.5172 16.7518 78.3522 17.1082 78.8991 17.6063C79.4508 18.1043 79.7291 18.7635 79.734 19.5838C79.7291 20.3553 79.4996 21.0266 79.0456 21.5979C78.5963 22.1692 77.9811 22.6135 77.1999 22.9309C76.4186 23.2434 75.5251 23.3997 74.5192 23.3997C72.9128 23.3997 71.6457 23.0701 70.718 22.4109C69.7952 21.7468 69.2678 20.8582 69.136 19.7449L72.6736 19.657C72.7517 20.0672 72.9543 20.3797 73.2815 20.5945C73.6086 20.8094 74.0261 20.9168 74.5339 20.9168C74.9929 20.9168 75.3664 20.8313 75.6545 20.6604C75.9426 20.4895 76.089 20.2625 76.0939 19.9793C76.089 19.7254 75.9767 19.5227 75.757 19.3714C75.5373 19.2151 75.1931 19.0931 74.7243 19.0052L72.7614 18.6316C71.6335 18.4266 70.7937 18.0482 70.2419 17.4964C69.6902 16.9398 69.4168 16.2318 69.4216 15.3724C69.4168 14.6205 69.6169 13.9784 70.0222 13.4462C70.4275 12.9091 71.0037 12.4989 71.7507 12.2157C72.4978 11.9325 73.3791 11.7909 74.3947 11.7909C75.9181 11.7909 77.1193 12.1107 77.9982 12.7504C78.8771 13.3851 79.3629 14.2591 79.4557 15.3724Z" fill="white"/>
+<path d="M87.8473 11.9374V14.5741H80.7502V11.9374H87.8473ZM82.237 9.2421H85.8185V19.6497C85.8185 19.8694 85.8527 20.0476 85.9211 20.1844C85.9943 20.3162 86.0993 20.4114 86.236 20.47C86.3727 20.5237 86.5363 20.5506 86.7267 20.5506C86.8635 20.5506 87.0075 20.5384 87.1589 20.5139C87.3151 20.4847 87.4323 20.4602 87.5104 20.4407L88.0524 23.0261C87.8815 23.075 87.6398 23.136 87.3273 23.2092C87.0197 23.2825 86.6511 23.3289 86.2214 23.3484C85.3815 23.3874 84.6613 23.2898 84.0607 23.0554C83.4651 22.8162 83.0085 22.4451 82.6911 21.9422C82.3786 21.4392 82.2273 20.8069 82.237 20.0452V9.2421Z" fill="white"/>
+<path d="M94.8126 23.3997C93.6358 23.3997 92.6202 23.1677 91.7657 22.7039C90.9161 22.2351 90.2619 21.5686 89.8029 20.7044C89.3488 19.8352 89.1217 18.8025 89.1217 17.6063C89.1217 16.4442 89.3512 15.4286 89.8102 14.5594C90.2692 13.6854 90.9161 13.0067 91.7511 12.5233C92.586 12.035 93.5699 11.7909 94.7027 11.7909C95.5035 11.7909 96.2359 11.9154 96.9 12.1644C97.564 12.4135 98.1377 12.7821 98.6211 13.2704C99.1045 13.7587 99.4805 14.3617 99.749 15.0794C100.018 15.7923 100.152 16.6102 100.152 17.533V18.4266H90.3742V16.3465H96.8194C96.8145 15.9657 96.7242 15.6263 96.5484 15.3285C96.3726 15.0306 96.1309 14.7987 95.8233 14.6327C95.5206 14.4618 95.1715 14.3763 94.776 14.3763C94.3756 14.3763 94.0167 14.4667 93.6993 14.6473C93.3819 14.8231 93.1305 15.0648 92.9449 15.3724C92.7594 15.6751 92.6617 16.0194 92.652 16.4051V18.5218C92.652 18.9808 92.7423 19.3836 92.923 19.7303C93.1036 20.0721 93.36 20.3382 93.692 20.5286C94.024 20.719 94.4195 20.8142 94.8785 20.8142C95.1959 20.8142 95.484 20.7703 95.7427 20.6824C96.0015 20.5945 96.2237 20.4651 96.4092 20.2942C96.5948 20.1233 96.7339 19.9134 96.8267 19.6643L100.115 19.7596C99.9785 20.4969 99.6782 21.1389 99.2144 21.6858C98.7554 22.2278 98.1524 22.6502 97.4053 22.9529C96.6583 23.2507 95.794 23.3997 94.8126 23.3997Z" fill="white"/>
+<path d="M101.981 23.1873V11.9374H105.46V13.9881H105.577C105.782 13.246 106.117 12.6942 106.581 12.3329C107.044 11.9667 107.584 11.7836 108.199 11.7836C108.365 11.7836 108.536 11.7958 108.712 11.8202C108.888 11.8397 109.051 11.8715 109.203 11.9154V15.0282C109.032 14.9696 108.807 14.9232 108.529 14.889C108.255 14.8548 108.011 14.8377 107.796 14.8377C107.372 14.8377 106.988 14.933 106.647 15.1234C106.31 15.3089 106.044 15.5702 105.848 15.9071C105.658 16.2391 105.563 16.6297 105.563 17.0789V23.1873H101.981Z" fill="white"/>
+<path d="M110.662 23.1873V11.9374H114.244V23.1873H110.662ZM112.456 10.6264C111.953 10.6264 111.521 10.4604 111.16 10.1283C110.799 9.79141 110.618 9.38614 110.618 8.91252C110.618 8.44377 110.799 8.04339 111.16 7.71136C111.521 7.37445 111.953 7.20599 112.456 7.20599C112.964 7.20599 113.396 7.37445 113.753 7.71136C114.114 8.04339 114.295 8.44377 114.295 8.91252C114.295 9.38614 114.114 9.79141 113.753 10.1283C113.396 10.4604 112.964 10.6264 112.456 10.6264Z" fill="white"/>
+<path d="M120.105 16.7713V23.1873H116.523V11.9374H119.929V14.0028H120.053C120.302 13.3143 120.727 12.7748 121.328 12.3842C121.928 11.9887 122.644 11.7909 123.474 11.7909C124.265 11.7909 124.951 11.9691 125.532 12.3256C126.118 12.6771 126.572 13.1703 126.894 13.805C127.221 14.4349 127.382 15.1722 127.378 16.0169V23.1873H123.796V16.72C123.801 16.0951 123.642 15.6068 123.32 15.2552C123.003 14.9037 122.561 14.7279 121.994 14.7279C121.618 14.7279 121.286 14.8109 120.998 14.9769C120.715 15.138 120.495 15.37 120.339 15.6727C120.188 15.9754 120.11 16.3416 120.105 16.7713Z" fill="white"/>
+<path d="M134.839 27.6403C133.77 27.6403 132.854 27.4914 132.092 27.1936C131.331 26.8957 130.733 26.488 130.298 25.9704C129.863 25.4529 129.602 24.8669 129.514 24.2126L132.905 24.0222C132.969 24.2517 133.086 24.4519 133.257 24.6228C133.433 24.7937 133.66 24.9255 133.938 25.0183C134.221 25.1111 134.553 25.1574 134.934 25.1574C135.535 25.1574 136.03 25.011 136.421 24.718C136.816 24.4299 137.014 23.9246 137.014 23.2019V21.2244H136.89C136.748 21.5711 136.533 21.8811 136.245 22.1546C135.957 22.428 135.598 22.6428 135.169 22.7991C134.744 22.9553 134.255 23.0334 133.704 23.0334C132.883 23.0334 132.131 22.843 131.448 22.4622C130.769 22.0764 130.225 21.4807 129.815 20.6751C129.409 19.8645 129.207 18.8221 129.207 17.5477C129.207 16.2342 129.417 15.1527 129.837 14.3031C130.257 13.4486 130.806 12.8163 131.485 12.4061C132.168 11.996 132.903 11.7909 133.689 11.7909C134.28 11.7909 134.785 11.8934 135.205 12.0985C135.63 12.2987 135.979 12.5575 136.253 12.8749C136.526 13.1923 136.733 13.5218 136.875 13.8636H136.978V11.9374H140.544V23.2312C140.544 24.1833 140.305 24.9866 139.827 25.6408C139.348 26.2951 138.679 26.7907 137.82 27.1276C136.961 27.4694 135.967 27.6403 134.839 27.6403ZM134.949 20.4261C135.383 20.4261 135.754 20.3113 136.062 20.0818C136.37 19.8523 136.607 19.5227 136.773 19.0931C136.939 18.6634 137.022 18.1483 137.022 17.5477C137.022 16.9373 136.939 16.4124 136.773 15.973C136.611 15.5287 136.375 15.1869 136.062 14.9476C135.754 14.7083 135.383 14.5887 134.949 14.5887C134.505 14.5887 134.129 14.7108 133.821 14.9549C133.513 15.1991 133.279 15.5433 133.118 15.9876C132.962 16.4271 132.883 16.9471 132.883 17.5477C132.883 18.1483 132.964 18.6634 133.125 19.0931C133.286 19.5227 133.518 19.8523 133.821 20.0818C134.129 20.3113 134.505 20.4261 134.949 20.4261Z" fill="white"/>
+<path d="M145.196 23.1873V8.18743H151.393C152.516 8.18743 153.485 8.40715 154.3 8.8466C155.121 9.28117 155.753 9.88907 156.197 10.6703C156.642 11.4467 156.864 12.35 156.864 13.3802C156.864 14.4154 156.637 15.3211 156.183 16.0975C155.733 16.869 155.091 17.4671 154.256 17.8919C153.421 18.3167 152.43 18.5291 151.283 18.5291H147.46V15.6727H150.609C151.156 15.6727 151.612 15.5775 151.979 15.3871C152.35 15.1966 152.63 14.9305 152.821 14.5887C153.011 14.242 153.106 13.8392 153.106 13.3802C153.106 12.9164 153.011 12.516 152.821 12.1791C152.63 11.8373 152.35 11.5736 151.979 11.3881C151.607 11.2025 151.151 11.1098 150.609 11.1098H148.822V23.1873H145.196Z" fill="#FFE56D"/>
+<path d="M158.651 23.1873V11.9374H162.232V23.1873H158.651ZM160.445 10.6264C159.942 10.6264 159.51 10.4604 159.149 10.1283C158.788 9.79141 158.607 9.38614 158.607 8.91252C158.607 8.44377 158.788 8.04339 159.149 7.71136C159.51 7.37445 159.942 7.20599 160.445 7.20599C160.953 7.20599 161.385 7.37445 161.742 7.71136C162.103 8.04339 162.284 8.44377 162.284 8.91252C162.284 9.38614 162.103 9.79141 161.742 10.1283C161.385 10.4604 160.953 10.6264 160.445 10.6264Z" fill="#FFE56D"/>
+<path d="M168.093 16.7713V23.1873H164.512V11.9374H167.918V14.0028H168.042C168.291 13.3143 168.716 12.7748 169.317 12.3842C169.917 11.9887 170.633 11.7909 171.463 11.7909C172.254 11.7909 172.94 11.9691 173.521 12.3256C174.107 12.6771 174.561 13.1703 174.883 13.805C175.21 14.4349 175.371 15.1722 175.366 16.0169V23.1873H171.785V16.72C171.79 16.0951 171.631 15.6068 171.309 15.2552C170.991 14.9037 170.55 14.7279 169.983 14.7279C169.607 14.7279 169.275 14.8109 168.987 14.9769C168.704 15.138 168.484 15.37 168.328 15.6727C168.176 15.9754 168.098 16.3416 168.093 16.7713Z" fill="#FFE56D"/>
+<path d="M177.584 23.1873V11.9374H181.165V23.1873H177.584ZM179.378 10.6264C178.875 10.6264 178.443 10.4604 178.082 10.1283C177.72 9.79141 177.54 9.38614 177.54 8.91252C177.54 8.44377 177.72 8.04339 178.082 7.71136C178.443 7.37445 178.875 7.20599 179.378 7.20599C179.886 7.20599 180.318 7.37445 180.675 7.71136C181.036 8.04339 181.217 8.44377 181.217 8.91252C181.217 9.38614 181.036 9.79141 180.675 10.1283C180.318 10.4604 179.886 10.6264 179.378 10.6264Z" fill="#FFE56D"/>
+<path d="M186.616 23.3777C185.898 23.3777 185.261 23.2581 184.705 23.0188C184.153 22.7747 183.716 22.4085 183.394 21.9202C183.076 21.427 182.918 20.8094 182.918 20.0672C182.918 19.4422 183.027 18.9148 183.247 18.4852C183.467 18.0555 183.77 17.7064 184.155 17.4378C184.541 17.1693 184.985 16.9666 185.488 16.8299C185.991 16.6883 186.528 16.5931 187.1 16.5443C187.739 16.4857 188.254 16.4246 188.645 16.3612C189.036 16.2928 189.319 16.1976 189.495 16.0755C189.675 15.9486 189.766 15.7703 189.766 15.5409V15.5042C189.766 15.1283 189.636 14.8377 189.377 14.6327C189.119 14.4276 188.77 14.3251 188.33 14.3251C187.856 14.3251 187.476 14.4276 187.188 14.6327C186.899 14.8377 186.716 15.1209 186.638 15.4823L183.335 15.3651C183.433 14.6815 183.684 14.0712 184.089 13.534C184.5 12.9921 185.061 12.5673 185.774 12.2596C186.492 11.9472 187.354 11.7909 188.359 11.7909C189.077 11.7909 189.739 11.8764 190.344 12.0472C190.95 12.2133 191.477 12.4574 191.926 12.7797C192.375 13.097 192.722 13.4877 192.966 13.9515C193.215 14.4154 193.34 14.9452 193.34 15.5409V23.1873H189.971V21.6199H189.883C189.683 22.0007 189.426 22.323 189.114 22.5867C188.806 22.8503 188.442 23.0481 188.022 23.1799C187.607 23.3118 187.139 23.3777 186.616 23.3777ZM187.722 21.034C188.108 21.034 188.455 20.9558 188.762 20.7996C189.075 20.6433 189.324 20.4285 189.509 20.1551C189.695 19.8767 189.788 19.5545 189.788 19.1883V18.119C189.685 18.1727 189.561 18.2215 189.414 18.2654C189.272 18.3094 189.116 18.3509 188.945 18.3899C188.774 18.429 188.599 18.4632 188.418 18.4925C188.237 18.5218 188.064 18.5486 187.898 18.5731C187.561 18.6268 187.273 18.7098 187.034 18.8221C186.799 18.9344 186.619 19.0809 186.492 19.2615C186.37 19.4373 186.309 19.6473 186.309 19.8914C186.309 20.2625 186.44 20.5457 186.704 20.741C186.973 20.9363 187.312 21.034 187.722 21.034Z" fill="#FFE56D"/>
+<defs>
+<linearGradient id="paint0_linear_584_333" x1="12.3546" y1="7.50735" x2="12.3546" y2="30.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFE66D"/>
+<stop offset="1" stop-color="#FFD66D"/>
+</linearGradient>
+<linearGradient id="paint1_linear_584_333" x1="18.3499" y1="8.12533" x2="4.23302" y2="9.67262" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7C879C"/>
+<stop offset="1" stop-color="#626D83"/>
+</linearGradient>
+</defs>
+</svg>

diff --git a/packages/online-playground/src/App.vue b/packages/online-playground/src/App.vue
index 9ba307009bb53f4d723088b13bb365d33c5c16d3..55ca49a1344b9d20538881f99ed7733f50b4f05e 100644 (file)
--- a/packages/online-playground/src/App.vue
+++ b/packages/online-playground/src/App.vue
@@ -136,6 +136,21 @@ onMounted(() => {
 </template>
 
 <style>
+:root {
+  --c-branding: #987a00;
+  --c-branding-dark: #5ad26c;
+
+  --color-branding: var(--c-branding);
+  --color-branding-dark: var(--c-branding-dark);
+}
+
+.dark {
+  --c-branding: #ffe166;
+
+  --color-branding: var(--c-branding);
+  --color-branding-dark: var(--c-branding-dark);
+}
+
 .dark {
   color-scheme: dark;
 }
@@ -161,3 +176,10 @@ button {
   background-color: transparent;
 }
 </style>
+
+<style scoped>
+.vue-repl :deep(.split-pane) {
+  --color-branding: var(--c-branding);
+  --color-branding-dark: var(--c-branding-dark);
+}
+</style>

diff --git a/packages/online-playground/src/Header.vue b/packages/online-playground/src/Header.vue
index 6d60acaf3136f2882de62a3c30e5649d29a31b02..317408313e3736e1486fc37b99479dd81a62f501 100644 (file)
--- a/packages/online-playground/src/Header.vue
+++ b/packages/online-playground/src/Header.vue
@@ -53,8 +53,10 @@ function toggleDark() {
 <template>
   <nav>
     <h1>
-      <img alt="logo" src="/logo.svg" />
-      <span>Pinia Playground</span>
+      <a href="https://masteringpinia.com" target="_blank">
+        <img alt="logo" src="/logo-mp.png" />
+        <span>Pinia Playground</span>
+      </a>
     </h1>
     <div class="links">
       <VersionSelect v-model="store.state.typescriptVersion" pkg="typescript">
@@ -88,6 +90,7 @@ function toggleDark() {
           <img src="/logo-vue.svg" alt="Vue" class="version-logo" />
         </template>
       </VersionSelect>
+
       <button
         title="Toggle development production mode"
         class="toggle-dev"
@@ -111,7 +114,7 @@ function toggleDark() {
         <Download />
       </button>
       <a
-        href="https://github.com/vuejs/core/tree/main/packages/sfc-playground"
+        href="https://github.com/vuejs/pinia/tree/main/packages/online-playground"
         target="_blank"
         title="View on GitHub"
         class="github"
@@ -163,19 +166,48 @@ h1 {
   place-items: center;
 }
 
+h1 a {
+  color: var(--color-branding);
+  text-decoration: none;
+}
+
 h1 img {
   height: 24px;
   margin-right: 10px;
+
+  animation: hithere 4s ease 5;
+  /* animation-delay: 5s; */
+}
+@keyframes hithere {
+  78% {
+    transform: scale(1);
+  }
+  79% {
+    transform: scale(1.2);
+  }
+  82%,
+  86% {
+    transform: rotate(-20deg) scale(1.2);
+  }
+  85% {
+    transform: rotate(20deg) scale(1.2);
+  }
+  91% {
+    transform: rotate(0deg) scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
 }
 
-@media (max-width: 560px) {
+@media (max-width: 570px) {
   h1 span {
-    font-size: 0.9em;
+    display: none;
   }
 }
 
-@media (max-width: 520px) {
-  h1 span {
+@media (max-width: 770px) {
+  btn.download {
     display: none;
   }
 }
@@ -257,7 +289,7 @@ h1 img {
 }
 
 .versions a:hover {
-  color: var(--green);
+  color: var(--color-branding);
 }
 
 .versions.expanded {

diff --git a/packages/online-playground/src/VersionSelect.vue b/packages/online-playground/src/VersionSelect.vue
index 1c5c452493dbec68151b2d8d2e5070a1c7761e95..2232594c0d503ddd48f67dde049bc1519b06ef15 100644 (file)
--- a/packages/online-playground/src/VersionSelect.vue
+++ b/packages/online-playground/src/VersionSelect.vue
@@ -111,7 +111,6 @@ onMounted(() => {
 }
 
 .active-version .number {
-  color: var(--green);
   margin-left: 4px;
 }