NullVoxPopuli

[OkLab Color Picker](https://limber.glimdown.com/edit?c=JYWwDg9gTgLgBAYQuCA7Apq%2BAzKy4DkAAgOYA2oI6UA9AMbKQZYEDcAUKJLHAN5wwoAQzoBrdABM4AXzi58xcpWo1BI0cFQk2nFD34AxaCBly8JguhAAjagFowUUMBjAAbugDOO9tgCuqHSuaAIQAMowAJ5k6AAU-AAyADRwQinWKUJkYAAWQjIAlHzscHBQ6DB%2BUKhwAAYQomRC1rEAJLwJ0gCkcO1C3b281gM0g1m5-V0FtRzS7OwMqJ7wwlrocAC8xaUJAFxwsQxk0EUbAHx1FBhCUHYkwhLAmDCxJaVwmnANTdahZcAkHIwJJvUrtGDhKIxeJwAB08KO0BSezgdgAjAAGDGFaQpUGDCERaJxfjw2GIqDI-aY7HSApzUrTEGlIT7Q4QY5QU4XWpXdA3O4PJ5YV7vD41b7NP5OQHA-HgyHEmFkimZfborE4vFihVE6GkhEcpGpamaukMuBMt7WNkU7mXTT8273ISPZ6i96fSW-CH-WXM966qEkuGGznpdU0rVweW8QnB5Vh402uBR81vK0s7J5W1GrmbHl8gUut0i-G%2BmVAgNguOK-Wh8l5zLZ1lwWn07WB2t6kMqpupFum9sWq1zBZoZZwAxPMhSLYAHhgVjATSXZze88ebjgdCank8GwARAB3Fw5OyeOhZdCH9di%2Bc-dBkO9iuDzzxgISoM68XhEVBCFQ0jSPONAfl%2BL73uB36-kQbhZH46DAV0oHQZB7ybu4O57geh6rCQN7ofeW7YUI%2B5Hpe16HnAyzEke1jqPcEABBI%2BywY46BuE8x7AbeoFbkRGGaGAfjwFEYDoEe%2BE3jRS5gEeGKwmi1EAVQGywapSGyCAmhHhqGLUSAQgAB5HjS1HwWQiHqX%2BlmIcBgn8e46GgY%2Bz4bjQAkbrRMTobCp4wOelExHwMavnAjwfk0kT7NgMTGawYWviQQhgNS5QgIl%2BKlKeEiBUOXQcOF2VwG52zhRFwBRUIMVwPcwASEVFUpWlqYZU14VZACqB2C4ViePsdDPNQHWvrl%2BWplihUlaU9USHYS7gKu6B2EcfggEs%2BwACwYmAxlwDte2prgHAzXAADa4mSdJAC6oXjTkBWJbIJUWmKsLSeV4WRSuNX7HNo1ii1%2ByKWi7WvSVsLBesvBnTk6AAkC%2BwAMzg%2BFb0yB5PnoOuoGLb9a6nbuZGeHAADyADSCTNEYUAmOgxlLqgEik0gKDMPAsOlEQahiJIO55psoUoltACssKi2qcDIwAbBGqI0s2ExDjIp2lH4YASEIS5C7EWswEI9qBVVjackL%2BtCGrb748tLm0yYRBoAgeRrDZxueLCGv61pjnTk%2BUj-oBkmHgk1FwQhkm-u7pvQLCnSyEQHFcegx42dJccCDkJsUsBcA0L7M4B5pR5CGHdmR3GWcexSsL9AnSfcWnX4EbXmfZ3muf5yV85%2B7OcCB2ph7WGXEdu1XMdQLCwz1%2BUyep7%2B6c%2BuPOeyF34U94X-fF4e4x5CPVkV9HNe73X-cNynTdrLXLZt9XHery5ND2%2Bhv6RJvR-3x5Nvazj7Bjuwi5ly2w3PkHI5RsBHiBDAMAA0aA0GoMAOg3BXB3xADQSAyxPA0AAEwYmwVtGgDQaqrTzBeT8Q0sG3gAJKoGwMYbWwAQghCQGbMI5CvCgSEC%2BDcfh3L3goI5ZYeAtBnASKhQQaASAXCqqVRGMAMD7lhHAAAKlXMo6AOKeGeKTHIEBjyyNlF8KAEUbiiFSALM2xwGgezgAkOqEAvBmHwAAL2oBAP4aB0CwnxK5YALkBHdyEZIs4QhxHCKkR8UmgAcAnuOgTAXhPALQgHYcoEgFGeEALgEcAAo5DqsISIqR4CuLwEoqhMBACYBKTQK6BoAVEQVkMgBSAjWGYszfm1hRLijgI4EQrghofHgCQBxpN5AmBuK0qQdhFJbT%2BAAammd4%2B8NAAn8L8YEiRIjrBhOCZEuAUTrAH3SUkuwkQnzHGPOkrJOS8k1UKXAYpEAlFhCDheIO2SzyZ3WD0oI9SyCpDAI4CAxlQA-1RNMuZ4L05JVKL4l8oFeFwrAXnbhMKSLE3IoeaKzEYC3h8ZTam1h7apFJgAHwpCSxy2KRLwGxvRRieAWJsW7MGCx0BeKOUIaJalj98U02MHCzyzk3jeWDH5LFnSuavh%2BtFf6ThGolWBm1Kwo0xxijoXTL67xpV-TyQ1QGdVUrUglmjd4GMyqSrFNq2qcUGb6sVYpUWJqxQACs-DLGANgSIJCsDPH2OBIadhbAwGPHE1AKr8TCQlSVFpUAJDUGpEdTwHI9UlQevsUWu0Er4gxlSqN4V4ZyJRliPa%2Bq02TQxNNb6VVfq1QORAMQ4aYVgVFQA1QQCf7riAA&format=gjs)

[nested reactivity](https://limber.glimdown.com/edit?c=JYWwDg9gTgLgBAYQuCA7Apq%2BAzKy4DkAAgOYA2oI6UA9AMbKQZYEDcAUKJLHAN5wwoAQzoBrdABM4AXzi58BdCABG1ALQT06MGsEjxEtpxQ9%2BdEQAtJMuXhCFSFEFVp6xwVCSNdo8fmQhzMiQwAE8beXsCNwNdCAgyZQgAD28TPzg0CLsHJVVaEAgJYGxgaiN2BlQAZ3ghaoApAGUAeQA5OABeOAAKZIBKLoA%2BOGb2gDpaqA8SEtC%2BgBo4VABXMjIlgCZ%2BjnYydHhgKW6ABg4q2rgSFaOES3Qu5fQAdzgAdXQhUQBZITAenaVNCXa5HABi0EefUGnRGoIkdzoVnGJAO0LgAH4Mb14YjkdU0cklkcANQkwYAMgpcAABkc1AASXhHaQ0wGVMj1apwAAygSEZCaMCEMAe6GSotQEm5SBQzD87DgcBoNDgLVQZHCHgAbgKjiL0NznlZUHAiEIACri%2BBIoSeQ2Ks3mJHWR2ouoAviOpVQA4rKCmmKSHr8IQALgEFmA1XGQigJBjlutMkBSuk7EdKrk0FE3N9hVFcFqBt6RE02n6S2UK3gvoJMG5MAgcHzEELxdFmdVxswZvLYDgtvt1UdRACQRC8wIcYT437BEGyl2SqHqIAQlCYSMYFGY8pxso4CTugQMUYVxY7aiAIKb4aR6Ox2NHk9njgXq-oNcAJXQ2DvsIPnujxBhIIZwMoEaKFgwC%2BpqTzPAQKbvnAjoADyiuAnKikM3pwGhyhQEMBFEXhaHFNquFKtR%2BHVjATamrwvBZAQdAUGISE7o%2Bq7oNe0jSEMPFwOOApwEIsZoTQdEMVRNG0TWDF8Mxpqsexoicbu4w8T%2Bf78YJl72sJ-JkBBknSWgsk0QRClZExLFscAHFAVpBnrnpQkiSZ%2B7KGZNmoJZ%2BE0BRAVMQEJBwAAREQzpWFIYB4GAEYRc5Qj8XhoUQOFEXxRAA5ZNF9xxQlSUpbGaVWaU6BkNKBzEfsqJSkMQi9DlYDUDAoT9JJ9WYBIQxMfUYwdFxiZldIkmVdV9YBWhk01TAdXoA1fWHj0rXtZ13VLb1-W8INrTDZp3n8RNZRTbVGYVWd82LctTW9L62BdTQPWNUx8IQlAKUnTQc3TWRf21Whr0rQ9f7PSDu0fZCI0Hj9gMLZd1FobUoT7AFSoI3wEHQJoUARgAjGAyRFgkRysHAYBCBIxSeBGJzjAArPmFPpnJcDjJIwCilIvB4TRSRQHjEYAMzE6TFBSL6EgoTRbPIzQqPo%2BhNCYWA2HoLh6YZuK3DwJo2BCGsNqctU3IACJKM21q9TKjBoJgCpKkQoFwP2IHCGIwb8JBhAeNzwCicoSHSKmZqu0mEqPAQ-swIHJlCBUH72re3SeoBsOR-Ax6EBS56Dq5X4Adumnu90oHgb7BCtoWQnB8hjraZb2jwWnW7Of2B4voQACE%2BfoWrGszeZjHKYQDlObDPF8QJQk1w8Qi%2BfRFlkSPSn2WpGncYXa7uYXLZW4WPlSX5w9%2BevKkT%2BpzlN1o6uhHvn4HwWDyrf2mrPSPuFkXyQRCiWZY76dCYrDfs-EzRZ2AbwTOVoJTgJoLJSSg8DRawzDQAAVOgxU6DsxfSjCQCwFACFx08AXT83IhAkBIHWaowBtRVVCNgmgQIag2kLscXoqAijoHbnzJUXDNBaVNtUHk0YYCxhpj0RQxQeYLhQvWC0oB0AQBrD0dOIw%2BHURKL0HuAieEHxgP6VAstljcKEVyURtRxitnoVIrmsj%2BiOmkFsRmJxASyD2AcOAhRHgYFeN8GsIpgBoBaMoAkUB6FQDUSAQJcc0CWJgEsCAYTqCRN4Y6bAkIegXHgDE4UcTTQQH-HkoJ8SxGDE0UqaozxuZIh6CUgp4wOptQqfzQc9QHisSjNVBJBAwxtOTqiMCDTgmoCaTOA4Yd2aEU%2BKIExK4Onj0vJ7UUUBzYikThGSpcl9jwCpr6LAjwRloHGfGA44x9mOzaNw%2BZWj-w9B7pcrAi5fRfFuYM4MTyYBTLkjMt5bT5Y0QNkbMgMB%2BnsxXMCBI6BxhhSkSsVABkJD7CkMcwMoQ2oECWGippGKeF4XlumUOuxCjjGSeE2xEhAgrCoFgcYABHFY1BQhNCqugOgTYokECSBIUIC4lj8Ebt0iQCSIyCCZUsR01QVjKEEFoMVUAJVCrjCIVZ6zhQKqVcS9gQA&format=gjs)

Thanks for working on this!!! idk if it helps, but here is one I did recently: https://github.com/NullVoxPopuli/limber/pull/1151/files#diff-3e25f191965223d42cb624fe00b4c07962b76a6e591b7131f1645961097e790e

hello @MehulKChaudhari !! is this something you're still wanting to finish? this looks like good content!

I need to fix PR commenting from forks, but | Project | Preview URL[^note] | Manage | | ------- | ------------------ | ------ | | Limber | https://tutorial-/depedent-select-dropdowns.limber-glimdown.pages.dev | [on...

example: this should be able to work: [`import { toBlob } from 'html-to-image'`](http://localhost:4200/?t=%23%23%20Importing%20from%20Modules%0AThis%20example%3A%0A%20-%20imports%20from%20a%20third%20party%20library%20(external%20%2F%20on%20npm)%0A%20-%20imports%20from%20the%20host%20app%0A%0A%60%60%60gjs%20live%0Aimport%20Component%20from%20%27%40glimmer%2Fcomponent%27%3B%0Aimport%20%7B%20action%20%7D%20from%20%27%40ember%2Fobject%27%3B%0Aimport%20%7B%20on%20%7D%20from%20%27%40ember%2Fmodifier%27%3B%0Aimport%20%7B%20toBlob%20%7D%20from%20%27html-to-image%27%3B%0A%0Aimport%20Menu%20from%20%27limber%2Fcomponents%2Flimber%2Fmenu%27%3B%0A%0Aexport%20default%20class%20CopyMenu%20extends%20Component%20%7B%0A%20%20%40action%0A%20%20copyAsText(event)%20%7B%0A%20%20%20%20let%20code%20%3D%20getSnippetElement(event)%3B%0A%0A%20%20%20%20navigator.clipboard.writeText(code.innerText)%3B%0A%20%20%7D%0A%0A%20%20%40action%0A%20%20async%20copyAsImage(event)%20%7B%0A%20%20%20%20let%20code%20%3D%20getSnippetElement(event)%3B%0A%0A%20%20%20%20await%20withExtraStyles(code%2C%20()%20%3D%3E%20toClipboard(code))%3B%0A%20%20%7D%0A%0A%0A%20%20%3Ctemplate%3E%0A%20%20%20%20%3CMenu%3E%0A%20%20%20%20%20%20%3C%3Atrigger%3E%F0%9F%93%8B%3C%2F%3Atrigger%3E%0A%0A%20%20%20%20%20%20%3C%3Aoptions%20as%20%7CItem%7C%3E%0A%20%20%20%20%20%20%20%20%3CItem%20%7B%7Bon%20%27click%27%20this.copyAsText%7D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20Copy%20as%20text%0A%20%20%20%20%20%20%20%20%3C%2FItem%3E%0A%20%20%20%20%20%20%20%20%3CItem%20%7B%7Bon%20%27click%27%20this.copyAsImage%7D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20Copy%20as%20image%0A%20%20%20%20%20%20%20%20%3C%2FItem%3E%0A%20%20%20%20%20%20%3C%2F%3Aoptions%3E%0A%20%20%20%20%3C%2FMenu%3E%0A%20%20%3C%2Ftemplate%3E%0A%7D%0A%0A%2F*************************************************%0A%20*%0A%20*%20Helpers%20and%20stuff%0A%20*%0A%20*%20********************************************%2F%0A%0Afunction%20getSnippetElement(event)%20%7B%0A%20%20let%20target%20%3D%20event.target%3B%0A%0A%20%20%2F**%0A%20%20%20*%20This%20component%20has%20intimate%20knowledge%0A%20%20%20*%20of%20how%20we%20build%20markdown%20previews%20in%0A%20%20%20*%20markdown-to-ember.ts%0A%20%20%20*%0A%20%20%20*%20We%20can%27t%20select%20the%20pre%20tag%20directly%2C%20otherwise%20html-to-image%0A%20%20%20*%20loses%20the%20padding%2C%20border-radius%2C%20shadow%0A%20%20%20*%2F%0A%20%20let%20code%20%3D%20target.closest(%27.glimdown-snippet%27)%3B%0A%0A%20%20if%20(!code)%20%7B%0A%20%20%20%20return%20target.closest(%27%5Bdata-test-output%5D%27)%3B%0A%20%20%7D%0A%0A%20%20return%20code%3B%0A%7D%0A%0Aasync%20function%20withExtraStyles(target%2C%20next)%20%7B%0A%20%20let%20pre%20%3D%20target.querySelector(%27pre%27)%3B%0A%0A%20%20if%20(!pre)%20%7B%0A%20%20%20%20return%20await%20next()%3B%0A%20%20%7D%0A%0A%20%20pre.classList.add(%27shadow-lg%27)%3B%0A%20%20pre.style.margin%20%3D%20%270%27%3B%0A%0A%20%20try%20%7B%0A%20%20%20%20await%20next()%3B%0A%20%20%7D%20finally%20%7B%0A%20%20%20%20pre.classList.remove(%27shadow-lg%27)%3B%0A%20%20%20%20pre.setAttribute(%27style%27%2C%20%27%27)%3B%0A%20%20%7D%0A%7D%0A%0Aasync%20function%20toClipboard(target)%20%7B%0A%20%20let%20backgroundColor%20%3D%20%27%23ffffff%27%3B%0A%20%20let%20canCopyToImage%20%3D%20%27ClipboardItem%27%20in%20window%3B%0A%20%20let%20filter%20%3D%20(node)%20%3D%3E%20%7B%0A%20%20%20%20if%20(node%20instanceof%20Text)%20return%20true%3B%0A%0A%20%20%20%20return%20!node.hasAttribute(%27data-test-copy-menu%27)%3B%0A%20%20%7D%3B%0A%0A%20%20let%20box%20%3D%20target.getBoundingClientRect()%3B%0A%0A%20%20let%20options%20%3D%20%7B%0A%20%20%20%20filter%2C%0A%20%20%20%20backgroundColor%2C%0A%20%20%20%20%2F%2F%20tell%20html-to-image%20to%20include%20margins%20in%20dimensions%0A%20%20%20%20%2F%2F%20html-to-image%20does%20not%20make%20adjustments%20if%20margins%20exist%20anyway%0A%20%20%20%20width%3A%20box.width%20%2B%2032%2C%0A%20%20%20%20height%3A%20box.height%20%2B%2032%2C%0A%20%20%20%20style%3A%20%7B%0A%20%20%20%20%20%20%2F%2F%20m-0%0A%20%20%20%20%20%20%2F%2F%20make%20margin%20uniform%20all%20the%20way%20around%0A%20%20%20%20%20%20margin%3A%20%271rem%27%2C%0A%20%20%20%20%7D%2C%0A%20%20%7D%3B%0A%0A%20%20if%20(!canCopyToImage)%20%7B%0A%20%20%20%20let%20image%20%3D%20new%20Image()%3B%0A%20%20%20%20let%20dataUri%20%3D%20await%20toPng(target%2C%20options)%3B%0A%0A%20%20%20%20image.src%20%3D%20dataUri%3B%0A%0A%20%20%20%20let%20w%20%3D%20window.open(%27%27)%3B%0A%0A%20%20%20%20w%3F.document.write(%0A%20%20%20%20%20%20%60Your%20browser%20does%20not%20yet%20support%20%60%20%2B%0A%20%20%20%20%20%20%20%20%60%3Ca%20target%3D%22_blank%22%20href%3D%22https%3A%2F%2Fcaniuse.com%2F%3Fsearch%3DClipboardItem%22%3EClipboardItem%3C%2Fa%3E.%20%3Cbr%3E%3Cbr%3E%60%20%2B%0A%20%20%20%20%20%20%20%20image.outerHTML%0A%20%20%20%20)%3B%0A%0A%20%20%20%20return%3B%0A%20%20%7D%0A%0A%20%20let%20blob%20%3D%20await%20toBlob(target%2C%20options)%3B%0A%0A%20%20%2F%2F%20Works%20in%20chrome-based%20browsers%20only%20%3A(%0A%20%20%2F%2F%20eslint-disable-next-line%20%40typescript-eslint%2Fban-ts-comment%0A%20%20%2F%2F%20%40ts-ignore%0A%20%20navigator.clipboard.write(%5Bnew%20ClipboardItem(%7B%20%27image%2Fpng%27%3A%20blob%20%7D)%5D)%3B%0A%7D%0A%0A%60%60%60 ) Also, importing components from from the app should be doable as well

In case browsers don't support script[type=module] properly, or import maps: https://github.com/guybedford/es-module-shims For re-writing imports in scripts without jscodeshift or silly regex: https://github.com/guybedford/es-module-lexer Example of dynamic updating of the import-map: https://github.com/huozhi/devjar/blob/main/lib/module.js

Allowing service worker composition: https://mswjs.io/docs/recipes/merging-service-workers/

I love this suggestion! I think what I want to provide a way to do is something that ultimately looks like this, keeping in mind that _classes_ are not the...

This has been implemented in ember-resources -- idk if you want to write up tutorial text? could be helpful for others! https://github.com/NullVoxPopuli/ember-resources/blob/main/ember-resources/CHANGELOG.md#640