Merge pull request #301 from Avad3/patch-1

Major bug fix

.github/workflows/docker.yml

@@ -19,7 +19,9 @@ jobs:
       packages: write
     steps:
       - name: Checkout repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
+        with:
+          submodules: true
       - name: Setup docker buildx
         uses: docker/setup-buildx-action@v3
       - name: Login To registry ${{ env.REGISTRY }}

.gitignore

@@ -10,7 +10,7 @@ node_modules/
 package-lock.json
 
 #external assets
-database_assets/
+database_assets/*
 !database_assets/com.nebula.gruvbox/
 !database_assets/com.nebula.lightTheme/
 !database_assets/com.nebula.oled/

CHANGELOG.md

@@ -20,3 +20,17 @@
 
 - Bugfix: themes with caps don't uninstall - fixed
 - Rewrite: InstalledThemes and InstalledPlugins are now in Astro instead of Svelte
+
+# 9.0.4
+
+- General Bugfixes
+- Removes Svelte except for 2 componenents
+- Scramjet :rocket:
+
+# 9.1.0
+
+- Rewrites everything in the [utils/](./src/utils) folder
+- Bugfixes
+- Better logging
+- Mobile nav jank is gone
+- Component cleanup

LICENSE

@@ -0,0 +1,661 @@
+                    GNU AFFERO GENERAL PUBLIC LICENSE
+                       Version 3, 19 November 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+  A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate.  Many developers of free software are heartened and
+encouraged by the resulting cooperation.  However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+  The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community.  It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server.  Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+  An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals.  This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU Affero General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Remote Network Interaction; Use with the GNU General Public License.
+
+  Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software.  This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU Affero General Public License from time to time.  Such new versions
+will be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published
+    by the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source.  For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code.  There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for the
+specific requirements.
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU AGPL, see
+<https://www.gnu.org/licenses/>.

astro.config.ts

@@ -2,12 +2,12 @@ import { fileURLToPath } from "node:url";
 import node from "@astrojs/node";
 import svelte from "@astrojs/svelte";
 import tailwind from "@astrojs/tailwind";
-import sitemap from "@astrojs/sitemap";
 import { baremuxPath } from "@mercuryworkshop/bare-mux/node";
 import { epoxyPath } from "@mercuryworkshop/epoxy-transport";
 import { libcurlPath } from "@mercuryworkshop/libcurl-transport";
 import playformCompress from "@playform/compress";
 import { uvPath } from "@titaniumnetwork-dev/ultraviolet";
+import { scramjetPath } from "@mercuryworkshop/scramjet";
 import icon from "astro-icon";
 import { defineConfig, envField } from "astro/config";
 import { viteStaticCopy } from "vite-plugin-static-copy";
@@ -74,6 +74,11 @@ export default defineConfig({
                         dest: "libcurl",
                         overwrite: false
                     },
+                    {
+                        src: `${scramjetPath}/**/*`.replace(/\\/g, "/"),
+                        dest: "scram",
+                        overwrite: false 
+                    },
                     {
                         src: `${baremuxPath}/**/*`.replace(/\\/g, "/"),
                         dest: "baremux",

config.example.toml

@@ -3,8 +3,12 @@ enabled = false # Turn on or off the marketplace entirely
 psk = "CHANGEME" # Change this to something more secure.
 level = 1
 
+[seo]
+enabled = false
+domain = "https://nebulaproxy.io"
+
 [db]
-name = "database" # Your databsae name
+name = "database" # Your database name
 username = "username" # The username of your DB (SQLITE just ignores this)
 password = "password" # The password to your DB (SQLITE ignores this)
 postgres = false # Enable to use postgres over sqlite (recommended for large prod instances)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "nebula",
   "type": "module",
-  "version": "9.0.3",
+  "version": "9.1.0",
   "private": true,
   "scripts": {
     "dev": "astro dev --host 0.0.0.0 & tsx --watch server/server.ts",
@@ -21,45 +21,45 @@
     "@astrojs/check": "^0.9.4",
     "@astrojs/node": "^9.0.0",
     "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/svelte": "^7.0.1",
-    "@astrojs/tailwind": "^5.1.3",
+    "@astrojs/svelte": "^7.0.2",
+    "@astrojs/tailwind": "^5.1.4",
     "@fastify/compress": "^8.0.1",
     "@fastify/helmet": "^13.0.0",
     "@fastify/middie": "^9.0.2",
     "@fastify/multipart": "^9.0.1",
     "@fastify/static": "^8.0.3",
-    "@iconify-json/ph": "^1.2.1",
+    "@iconify-json/ph": "^1.2.2",
     "@mercuryworkshop/bare-mux": "^2.1.7",
-    "@mercuryworkshop/epoxy-transport": "2.1.26",
-    "@mercuryworkshop/libcurl-transport": "^1.3.14",
+    "@mercuryworkshop/epoxy-transport": "^2.1.27",
+    "@mercuryworkshop/libcurl-transport": "^1.3.15",
     "@playform/compress": "^0.1.6",
-    "@svelte-drama/suspense": "0.6.6",
     "@titaniumnetwork-dev/ultraviolet": "^3.2.10",
-    "@types/node": "^22.10.1",
+    "@mercuryworkshop/scramjet": "https://github.com/MercuryWorkshop/scramjet/releases/download/latest/mercuryworkshop-scramjet-1.0.2-dev.tgz",
+    "@types/node": "^22.10.2",
     "@types/sequelize": "^4.28.20",
-    "astro": "^5.0.2",
-    "astro-icon": "^1.1.4",
+    "astro": "^5.1.1",
+    "astro-icon": "^1.1.5",
     "astro-seo": "^0.8.4",
-    "chalk": "^5.3.0",
-    "fastify": "^5.1.0",
+    "chalk": "^5.4.1",
+    "fastify": "^5.2.0",
     "gradient-string": "^3.0.0",
-    "nanostores": "^0.11.3",
     "pg": "^8.13.1",
     "pg-hstore": "^2.3.4",
     "sequelize": "^6.37.5",
     "smol-toml": "^1.3.1",
     "sqlite3": "^5.1.7",
-    "svelte": "^5.5.3",
+    "svelte": "^5.16.0",
     "svelte-french-toast": "^1.2.0",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^3.4.17",
     "typescript": "^5.7.2",
     "vite-plugin-static-copy": "^2.2.0",
     "wisp-server-node": "^1.1.7"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
-    "@changesets/cli": "^2.27.10",
-    "bufferutil": "^4.0.8",
+    "@changesets/cli": "^2.27.11",
+    "bufferutil": "^4.0.9",
+    "ora": "^8.1.1",
     "sharp": "^0.33.5",
     "tsx": "^4.19.2"
   }

public/sw.js

@@ -1,10 +1,16 @@
 importScripts("/uv/uv.bundle.js");
 importScripts("/uv/uv.config.js");
+importScripts('/scram/scramjet.wasm.js');
+importScripts('/scram/scramjet.shared.js');
+importScripts('/scram/scramjet.worker.js');
 importScripts("/workerware/workerware.js");
 importScripts(__uv$config.sw || "/uv/uv.sw.js");
 const uv = new UVServiceWorker();
 const ww = new WorkerWare({ debug: false });
-
+const sj = new ScramjetServiceWorker();
+(async function () {
+        await sj.loadConfig();
+})();
 //me when Firefox (thanks vk6)
 if (navigator.userAgent.includes("Firefox")) {
     Object.defineProperty(globalThis, "crossOriginIsolated", {
@@ -57,7 +63,11 @@ self.addEventListener("fetch", function (event) {
             }
             if (event.request.url.startsWith(location.origin + __uv$config.prefix)) {
                 return await uv.fetch(event);
-            } else {
+            } 
+            else if (sj.route(event)) {
+                return await sj.fetch(event);
+            }
+            else {
                 return await fetch(event.request);
             }
         })()

server/dbSetup.ts

@@ -73,7 +73,18 @@ async function setupDB(db: ModelStatic<CatalogModel>) {
             tags: ["Theme", "Simple", "Dark", "Retro"],
             payload: "retro.css",
             type: "theme"
-        }
+        },
+        /* {
+            package_name: 'gyatt',
+            title: 'gyatt',
+            image: 'gyatt',
+            author: "nebuka",
+            version: "2",
+            description: "e",
+            tags: [ "e" ],
+            payload: "gyatt.js",
+            type: "plugin-page"
+        } */
         //To add plugins: plugin types consist of plugin-sw (workerware) & plugin-page (uv.config.inject)
     ];
     const dbItems = await db.findAll();

src/components/Header.astro

@@ -2,7 +2,6 @@
 import { MARKETPLACE_ENABLED } from "astro:env/client";
 import { Icon } from "astro-icon/components";
 import { getLangFromUrl, useTranslations } from "../i18n/utils";
-import { isMobileNavOpen } from "../store.js";
 import HeaderButton from "./HeaderButton.astro";
 import Logo from "./Logo.astro";
 const lang = getLangFromUrl(Astro.url);
@@ -56,7 +55,7 @@ const t = useTranslations(lang);
       </HeaderButton>
     </div>
     {/* Mobile hamburger menu */}
-    <div class="flex lg:hidden" id="mobileNavTrigger" transition:persist>
+    <div class="flex lg:hidden cursor-pointer" id="mobileNavTrigger">
       <Icon
         name="ph:text-align-justify-bold"
         class="h-9 w-9 text-text-color"
@@ -70,50 +69,3 @@ const t = useTranslations(lang);
     </div>
   </div>
 </div>
-<script>
-  import { isMobileNavOpen } from "../store.js";
-  let isMobileNavOpenLocal = true;
-  const right_caret = document.getElementById("right_caret");
-  const hamburger_menu = document.getElementById("hamburger_menu");
-  const mobileNavTrigger = document.getElementById("mobileNavTrigger");
-  // Create a copy of the nano store so we can make this a toggle
-
-  // Set the store to true when the button is clicked
-  function openDialog() {
-    if (isMobileNavOpenLocal == false) {
-      isMobileNavOpen.set(true);
-      if (hamburger_menu && right_caret) {
-        hamburger_menu.style.display = "none";
-        right_caret.style.display = "block";
-      }
-    } else {
-      isMobileNavOpen.set(false);
-      if (hamburger_menu && right_caret) {
-        hamburger_menu.style.display = "block";
-        right_caret.style.display = "none";
-      }
-    }
-  }
-
-  isMobileNavOpen.subscribe((open) => {
-    if (open) {
-      isMobileNavOpenLocal = true;
-      if (hamburger_menu && right_caret) {
-        hamburger_menu.style.display = "none";
-        right_caret.style.display = "block";
-      }
-    } else {
-      isMobileNavOpenLocal = false;
-      if (hamburger_menu && right_caret) {
-        hamburger_menu.style.display = "block";
-        right_caret.style.display = "none";
-      }
-    }
-  });
-
-  // Add an event listener to the button
-
-  if (mobileNavTrigger) {
-    mobileNavTrigger.addEventListener("click", openDialog);
-  }
-</script>

src/components/Loading.astro

@@ -1,7 +1,7 @@
 <div class="w-full h-full bg-primary text-navbar-text-color flex justify-center items-center">
     <svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="0 0 400 400" width="400" height="400" fill="#5e17eb" class="animate-pulse-brighter w-48 h-48">
         <g id="svgg">
-        <path id="path0" fill-rule="evenodd" class="s0" d="m213.6 84c1 0.3 3.4 0.7 5.1 1 1.8 0.2 4.1 0.7 5.2 1 13.2 4.1 20.3 6.8 24.5 9.1 0.6 0.3 2.3 1.2 3.8 2 2.8 1.4 13.1 8 14.4 9.2 0.5 0.3 2.3 1.9 4.2 3.5 6.7 5.5 15.5 14.9 19.2 20.4 1 1.4 2 2.7 2.2 2.8 0.3 0.1 0.5 0.5 0.5 0.8 0 0.3 1.2 2.2 2.5 4.3 2.3 3.4 7.8 14.3 9.8 19.3 0.8 2.1 0.9 2.2 10 4.9 5.6 1.6 11.1 3.4 11.7 3.8 0.3 0.2 2.4 1.1 4.7 1.9 11.1 4.1 23 12.5 27.3 19.4 5.5 8.7 3.6 20.5-4.5 28.5-3.1 3-7.5 6.4-8.4 6.4-0.3 0-0.7 0.2-0.8 0.5-1.1 2.3-23.3 11.2-35.9 14.3-3.2 0.9-3.5 1.2-5.7 6.8-7.5 19-25.5 40.6-42.3 51.1-1.6 1-3.1 2-3.3 2.2-0.1 0.2-0.9 0.7-1.7 1.2-0.8 0.4-2.2 1.2-2.9 1.6-0.8 0.4-1.6 1-1.8 1.1-0.5 0.5-4.1 2.2-8.1 3.9-1.8 0.8-3.8 1.6-4.5 2-0.7 0.3-3.1 1.1-5.2 1.8-8.3 2.6-9.8 3-21 4.9-6.4 1.1-25.3 1.3-30.5 0.3-1.9-0.3-5.8-1.1-8.6-1.6-6.8-1.3-12.7-3-20-5.7-3.3-1.2-18-8.8-19.7-10.1-0.9-0.7-4.1-3.1-7.1-5.2-5.7-4.1-17.9-15.9-20.7-20-0.9-1.2-2-2.7-2.5-3.2-3.2-3.3-13.7-21.7-13.7-24.1 0-0.6-0.2-1.2-0.6-1.4-0.3-0.2-0.8-1.2-1-2.3-0.4-1.9-1.7-2.7-6.5-3.8-23.2-5.6-43.1-17.2-48.6-28.5-7.1-14.4 4.5-31.3 27.3-39.7 1.8-0.7 4.1-1.6 5.2-2 3.7-1.5 8-2.9 19.5-6.2 1.6-0.5 2.8-1.2 2.8-1.7 0-2.4 9.8-21.6 13.1-25.7 0.2-0.4 1.4-1.8 2.5-3.2 13.8-18.1 30.2-30.6 50.6-38.8 4.3-1.7 6-2.3 14.3-4.5 5.5-1.6 11.2-2.4 18.4-2.9 7.9-0.5 24-0.2 26.8 0.6zm-29.7 17.3c-0.2 0.1-7.3 1.7-12.9 2.7-1.7 0.4-4.3 1.2-5.8 1.9-1.5 0.6-3.9 1.5-5.5 2-1.5 0.4-3.3 1.3-4 2-0.7 0.7-1.7 1.2-2.3 1.2-1.2 0-9.5 4.5-9.8 5.3-0.2 0.3-0.5 0.6-0.9 0.6-1.9 0-19.6 16-23.8 21.6-9.3 12.2-16.1 27.4-19.2 42.7-2 10.1-1.1 37.5 1.4 41.4 0 0.1 3.7 0.9 8.1 1.8 9.5 1.9 12.8 2.4 34.6 4.9 38.5 4.5 107.9 2.2 138.3-4.5 1.4-0.3 4.1-0.9 6.1-1.3 4.2-0.8 3.4 0.2 4.9-7.1 1.6-8.3 1.7-27 0.1-34.6-1.5-7.1-3.2-13.4-3.7-14.2-0.3-0.4-0.7-1.5-0.9-2.6-2.8-12.1-19.2-34.1-33-44.3-2.9-2.1-5.5-4-5.8-4.3-2.8-2.2-4.9-3.1-7.2-3.1-2.1 0-2.6-0.2-2.7-1.3-0.2-1.5-5.7-4.5-6.3-3.5-0.7 1.1-2.4 0.6-2.7-0.7-0.4-1.3-1.2-1.6-5.8-2.1-1.6-0.2-4-0.9-5.5-1.6-3.9-1.8-5.3-2.2-10.2-2.6-4.6-0.4-25.2-0.7-25.5-0.3zm74.3 42.2c7.4 9.8 4.8 23.5-4.6 24.9-6.9 1-20.9-5.8-21-10.2 0-0.2-0.3-0.8-0.8-1.3-6.4-6.8-5-20.8 2.4-24.1 6.7-2.9 17.2 1.8 24 10.7zm-176.4 36.4c-0.1-0.1-4.6 1.1-5.9 1.6-0.7 0.3-3 1.2-5.1 2-9.9 3.8-15.1 6.8-19.6 11.5-3.4 3.5-3.3 4.5 0.5 8.7 1 1 11.3 7.6 12 7.6 0.2 0 1.7 0.6 3.4 1.3 1.6 0.8 3.6 1.6 4.3 1.9 1.8 0.8 9.3 3.3 9.9 3.3 0.3 0 0.3-2 0-4.4-0.6-5.6-0.6-24.5 0.1-29.6 0.3-2.1 0.5-3.9 0.4-3.9zm229.3-0.3c-0.2 0 0 1 0.2 2.1 0.6 2.8 0.6 31.3 0 34-0.5 2.2-0.4 2.2 1.3 1.8 3.1-0.7 12.9-4.5 18.3-7 8.5-4 14.3-10.1 12.6-13.3-1.1-2.1-6.7-7.2-7.9-7.2-0.4 0-0.9-0.2-1-0.5-0.4-1.1-11.8-6.1-19.2-8.5-2.3-0.7-4.2-1.4-4.3-1.4zm-199.4 63.4l-3.1-0.4 1.8 3.2c0.9 1.8 1.9 3.4 2.2 3.5 0.3 0.1 0.5 0.6 0.5 1.1 0 0.4 0.6 1.5 1.3 2.3 0.7 0.9 1.5 1.9 1.8 2.2 0.3 0.4 0.8 1.2 1.1 1.7 6.2 10.7 35.6 33.5 43.3 33.5 0.2 0 1.3 0.4 2.5 0.9 2.5 1.2 10.6 3.4 15.3 4.2 9.5 1.8 11.6 2.1 17.4 2.1 6.6 0 16.4-1.3 22.9-3 2.2-0.5 5.2-1.3 6.8-1.7 1.6-0.3 3.2-0.9 3.5-1.2 0.4-0.3 1.1-0.6 1.6-0.6 2.3 0 22-10.6 24-12.9 0.2-0.2 2.2-1.9 4.5-3.7 5.7-4.5 11.8-11 17.1-18.4 1.6-2.3 3.2-4.5 3.6-4.9 0.4-0.4 0.7-1 0.7-1.2 0-0.2 0.8-1.9 1.9-3.6 1.1-1.7 1.9-3.2 1.9-3.4 0-0.2-3.8 0.4-11 1.6-31.7 5.4-85.1 6.7-126.9 3.1-9.6-0.8-23.1-2.3-27.8-3.2-2.2-0.4-5.3-0.9-6.9-1.2z"/>
+        <path id="path0" fill="currentColor" fill-rule="evenodd" class="s0" d="m213.6 84c1 0.3 3.4 0.7 5.1 1 1.8 0.2 4.1 0.7 5.2 1 13.2 4.1 20.3 6.8 24.5 9.1 0.6 0.3 2.3 1.2 3.8 2 2.8 1.4 13.1 8 14.4 9.2 0.5 0.3 2.3 1.9 4.2 3.5 6.7 5.5 15.5 14.9 19.2 20.4 1 1.4 2 2.7 2.2 2.8 0.3 0.1 0.5 0.5 0.5 0.8 0 0.3 1.2 2.2 2.5 4.3 2.3 3.4 7.8 14.3 9.8 19.3 0.8 2.1 0.9 2.2 10 4.9 5.6 1.6 11.1 3.4 11.7 3.8 0.3 0.2 2.4 1.1 4.7 1.9 11.1 4.1 23 12.5 27.3 19.4 5.5 8.7 3.6 20.5-4.5 28.5-3.1 3-7.5 6.4-8.4 6.4-0.3 0-0.7 0.2-0.8 0.5-1.1 2.3-23.3 11.2-35.9 14.3-3.2 0.9-3.5 1.2-5.7 6.8-7.5 19-25.5 40.6-42.3 51.1-1.6 1-3.1 2-3.3 2.2-0.1 0.2-0.9 0.7-1.7 1.2-0.8 0.4-2.2 1.2-2.9 1.6-0.8 0.4-1.6 1-1.8 1.1-0.5 0.5-4.1 2.2-8.1 3.9-1.8 0.8-3.8 1.6-4.5 2-0.7 0.3-3.1 1.1-5.2 1.8-8.3 2.6-9.8 3-21 4.9-6.4 1.1-25.3 1.3-30.5 0.3-1.9-0.3-5.8-1.1-8.6-1.6-6.8-1.3-12.7-3-20-5.7-3.3-1.2-18-8.8-19.7-10.1-0.9-0.7-4.1-3.1-7.1-5.2-5.7-4.1-17.9-15.9-20.7-20-0.9-1.2-2-2.7-2.5-3.2-3.2-3.3-13.7-21.7-13.7-24.1 0-0.6-0.2-1.2-0.6-1.4-0.3-0.2-0.8-1.2-1-2.3-0.4-1.9-1.7-2.7-6.5-3.8-23.2-5.6-43.1-17.2-48.6-28.5-7.1-14.4 4.5-31.3 27.3-39.7 1.8-0.7 4.1-1.6 5.2-2 3.7-1.5 8-2.9 19.5-6.2 1.6-0.5 2.8-1.2 2.8-1.7 0-2.4 9.8-21.6 13.1-25.7 0.2-0.4 1.4-1.8 2.5-3.2 13.8-18.1 30.2-30.6 50.6-38.8 4.3-1.7 6-2.3 14.3-4.5 5.5-1.6 11.2-2.4 18.4-2.9 7.9-0.5 24-0.2 26.8 0.6zm-29.7 17.3c-0.2 0.1-7.3 1.7-12.9 2.7-1.7 0.4-4.3 1.2-5.8 1.9-1.5 0.6-3.9 1.5-5.5 2-1.5 0.4-3.3 1.3-4 2-0.7 0.7-1.7 1.2-2.3 1.2-1.2 0-9.5 4.5-9.8 5.3-0.2 0.3-0.5 0.6-0.9 0.6-1.9 0-19.6 16-23.8 21.6-9.3 12.2-16.1 27.4-19.2 42.7-2 10.1-1.1 37.5 1.4 41.4 0 0.1 3.7 0.9 8.1 1.8 9.5 1.9 12.8 2.4 34.6 4.9 38.5 4.5 107.9 2.2 138.3-4.5 1.4-0.3 4.1-0.9 6.1-1.3 4.2-0.8 3.4 0.2 4.9-7.1 1.6-8.3 1.7-27 0.1-34.6-1.5-7.1-3.2-13.4-3.7-14.2-0.3-0.4-0.7-1.5-0.9-2.6-2.8-12.1-19.2-34.1-33-44.3-2.9-2.1-5.5-4-5.8-4.3-2.8-2.2-4.9-3.1-7.2-3.1-2.1 0-2.6-0.2-2.7-1.3-0.2-1.5-5.7-4.5-6.3-3.5-0.7 1.1-2.4 0.6-2.7-0.7-0.4-1.3-1.2-1.6-5.8-2.1-1.6-0.2-4-0.9-5.5-1.6-3.9-1.8-5.3-2.2-10.2-2.6-4.6-0.4-25.2-0.7-25.5-0.3zm74.3 42.2c7.4 9.8 4.8 23.5-4.6 24.9-6.9 1-20.9-5.8-21-10.2 0-0.2-0.3-0.8-0.8-1.3-6.4-6.8-5-20.8 2.4-24.1 6.7-2.9 17.2 1.8 24 10.7zm-176.4 36.4c-0.1-0.1-4.6 1.1-5.9 1.6-0.7 0.3-3 1.2-5.1 2-9.9 3.8-15.1 6.8-19.6 11.5-3.4 3.5-3.3 4.5 0.5 8.7 1 1 11.3 7.6 12 7.6 0.2 0 1.7 0.6 3.4 1.3 1.6 0.8 3.6 1.6 4.3 1.9 1.8 0.8 9.3 3.3 9.9 3.3 0.3 0 0.3-2 0-4.4-0.6-5.6-0.6-24.5 0.1-29.6 0.3-2.1 0.5-3.9 0.4-3.9zm229.3-0.3c-0.2 0 0 1 0.2 2.1 0.6 2.8 0.6 31.3 0 34-0.5 2.2-0.4 2.2 1.3 1.8 3.1-0.7 12.9-4.5 18.3-7 8.5-4 14.3-10.1 12.6-13.3-1.1-2.1-6.7-7.2-7.9-7.2-0.4 0-0.9-0.2-1-0.5-0.4-1.1-11.8-6.1-19.2-8.5-2.3-0.7-4.2-1.4-4.3-1.4zm-199.4 63.4l-3.1-0.4 1.8 3.2c0.9 1.8 1.9 3.4 2.2 3.5 0.3 0.1 0.5 0.6 0.5 1.1 0 0.4 0.6 1.5 1.3 2.3 0.7 0.9 1.5 1.9 1.8 2.2 0.3 0.4 0.8 1.2 1.1 1.7 6.2 10.7 35.6 33.5 43.3 33.5 0.2 0 1.3 0.4 2.5 0.9 2.5 1.2 10.6 3.4 15.3 4.2 9.5 1.8 11.6 2.1 17.4 2.1 6.6 0 16.4-1.3 22.9-3 2.2-0.5 5.2-1.3 6.8-1.7 1.6-0.3 3.2-0.9 3.5-1.2 0.4-0.3 1.1-0.6 1.6-0.6 2.3 0 22-10.6 24-12.9 0.2-0.2 2.2-1.9 4.5-3.7 5.7-4.5 11.8-11 17.1-18.4 1.6-2.3 3.2-4.5 3.6-4.9 0.4-0.4 0.7-1 0.7-1.2 0-0.2 0.8-1.9 1.9-3.6 1.1-1.7 1.9-3.2 1.9-3.4 0-0.2-3.8 0.4-11 1.6-31.7 5.4-85.1 6.7-126.9 3.1-9.6-0.8-23.1-2.3-27.8-3.2-2.2-0.4-5.3-0.9-6.9-1.2z"/>
         </g>
     </svg>
 </div>

src/components/MobileNavigation.astro

@@ -7,10 +7,7 @@ const t = useTranslations(lang);
 import { MARKETPLACE_ENABLED } from "astro:env/client";
 ---
 
-<div
-  class="h-full mt-16 flex w-full flex-col justify-evenly bg-navbar-color m-auto"
-  id="mobileNavMenu"
->
+<div class="h-full mt-16 flex w-full flex-col justify-evenly bg-navbar-color m-auto" id="mobilenav">
   <HeaderButton text={t("header.home")} route={`/${lang}/`}>
     <Icon
       name="ph:house-bold"
@@ -47,12 +44,59 @@ import { MARKETPLACE_ENABLED } from "astro:env/client";
     />
   </HeaderButton>
 </div>
-<script>
-  import { fade } from "astro:transitions";
-  import { isMobileNavOpen } from "../store.js";
-  function closeMobileNav() {
-    isMobileNavOpen.set(false);
+<style is:global>
+    #mobilenav {
+        -webkit-transition-duration: 600ms;
+        transition-duration: 600ms;
+        transform: translateX(100%);
     }
-  const mobileNavMenu = document.getElementById("mobileNavMenu");
-  mobileNavMenu!.addEventListener("click", closeMobileNav);
+    #mobilenavwrapper {
+        -webkit-transition-duration: 600ms;
+        transition-duration: 600ms;
+        transform: translateX(100%);
+    }
+</style>
+<script>
+    import { EventHandler } from "@utils/events";
+    import { Elements } from "@utils/index";
+    
+    const init = async () => {
+        const els = Elements.select([
+            { type: 'id', val: 'mobileNavTrigger' },
+            { type: 'id', val: 'right_caret' },
+            { type: 'id', val: 'hamburger_menu' },
+            { type: 'id', val: 'mobilenavwrapper' },
+            { type: 'id', val: 'mobilenav' }
+        ]);
+        const trigger = Elements.exists<HTMLDivElement>(await els.next());
+        const rightCaret = Elements.exists<SVGElement>(await els.next());
+        const hamburgerMenu = Elements.exists<SVGElement>(await els.next());
+        const wrapper = Elements.exists<HTMLDivElement>(await els.next());
+        const mnm = Elements.exists<HTMLDivElement>(await els.next());
+        let isOpen = false;
+        Elements.attachEvent(trigger, "click", async () => {
+            console.log(isOpen); 
+            if (isOpen) {
+                rightCaret.style.display = "none";
+                hamburgerMenu.style.display = "block"; 
+                mnm.style.transform = "translateX(100%)";
+                wrapper.style.transform = "translateX(100%)";
+                isOpen = false;
+            }
+            else { 
+                hamburgerMenu.style.display = "none";
+                rightCaret.style.display = "block";
+                mnm.style.display = "flex";
+                mnm.style.transform = "translateX(0%)";
+                wrapper.style.transform = "translateX(0%)";
+                isOpen = true;
+            }
+        });
+    }
+    new EventHandler({
+        events: {
+            "astro:page-load": init 
+        },
+        logging: false 
+    }).bind();
 </script>

src/components/catalog/CatalogCard.astro

@@ -0,0 +1,58 @@
+---
+interface Props {
+    page: number | string | undefined;
+    lang: string;
+}
+interface Asset {
+    title: string;
+    description: string;
+    author: string;
+    image: string;
+    tags: [];
+    version: string;
+    background_image: string | null;
+    background_video: string | null;
+    payload: string;
+    type: "theme" | "plugin-sw" | "plugin-page";
+}
+const { page, lang } = Astro.props;
+const getAssets = async () => {
+    const res = await fetch(new URL(`/api/catalog-assets?page=${page}`, Astro.url));
+    const data = await res.json();
+    return data.assets;
+};
+const assets = await getAssets();
+---
+<div class="text-3xl font-roboto font-bold text-text-color p-10">
+    {Object.keys(assets).length > 0 && (
+        <div class="flex flex-row gap-6 flex-wrap justify-center">
+            {Object.entries(assets).map((asset) => {
+                const pName = asset[0];
+                const a = asset[1] as unknown as Asset;
+                return (
+                    <a href={`/${lang}/catalog/package/${pName}`}>
+                            <div class="bg-navbar-color w-64 rounded-3xl shadow-lg overflow-hidden transition-transform duration-300 hover:scale-105 text-text-color">
+                                <img src={`/packages/${pName}/${a.image}`} alt={a.title} class="w-full h-40 object-cover" />
+                                <div class="p-6 text-sm">
+                                    <p class="font-semibold text-2xl mb-2"> {a.title} </p>
+                                    <p class="mb-4"> {a.description} </p>
+                                    <div class="flex flex-wrap gap-2 mb-4 w-full">
+                                        {a.tags.map((tag) => (
+                                            <p class="bg-navbar-text-color text-navbar-color font-bold px-3 py-1 rounded-md text-center"> { tag } </p>
+                                        ))}
+                                    </div>
+                                    <p> 
+                                        <strong>Version: </strong> { a.version } 
+                                    </p>
+                                    <p> 
+                                        <strong>Type: </strong> { a.type === "plugin-page" || a.type === "plugin-sw" ? "plugin" : a.type } 
+                                    </p>
+                                </div>
+                            </div>
+                        </a>
+                    )
+                }
+            )}
+        </div>
+    )}
+</div>

src/components/catalog/CatalogCard.svelte

@@ -1,50 +0,0 @@
-<script lang="ts">
-import { Suspense, createSuspense } from "@svelte-drama/suspense";
-const suspend = createSuspense();
-import { Settings } from "@utils/settings/index";
-export let page;
-export let lang;
-async function getAssets() {
-    const response = await fetch("/api/catalog-assets?page=" + page);
-    const data = await response.json();
-    return data.assets;
-}
-const assets = getAssets();
-</script>
-
-<div class="text-3xl font-roboto font-bold text-text-color p-10">
-    <Suspense>
-        {#snippet loading()}
-            <p class="text-4xl"> Loading... </p>
-        {/snippet}
-        {#snippet children(suspend)}
-            {#await suspend(assets) then data}
-                {#if Object.keys(data).length > 0}
-                    <div class="flex flex-row gap-6 flex-wrap justify-center">
-                        {#each Object.entries(data) as [key, asset]}
-                            <a href={`/${lang}/catalog/package/${key}`}>
-                                <div class="bg-navbar-color w-64 rounded-3xl shadow-lg overflow-hidden transition-transform duration-300 hover:scale-105">
-                                    <img src={`/packages/${key}/${asset.image}`} alt={asset.title} class="w-full h-40 object-cover" />
-                                    <div class="p-6 text-sm">
-                                        <p class="font-semibold text-2xl mb-2"> {asset.title} </p>
-                                        <p class="mb-4"> {asset.description} </p>
-                                        <div class="flex flex-wrap gap-2 mb-4 w-full">
-                                            {#each asset.tags as tag}
-                                                <p class="bg-navbar-text-color text-navbar-color font-bold px-3 py-1 rounded-md text-center"> {tag} </p>
-                                            {/each}
-                                        </div>
-                                        <div>
-                                            <strong>Version:</strong>
-                                            {asset.version}
-                                        </div>
-                                        <div><strong>Type:</strong> {asset.type === "plugin-page" || asset.type === "plugin-sw" ? "plugin" : asset.type}</div>
-                                    </div>
-                                </div>
-                            </a>
-                        {/each}
-                    </div>
-                {/if}
-            {/await}
-        {/snippet}
-    </Suspense>
-</div>

src/components/catalog/InstalledPlugins.astro

@@ -2,7 +2,11 @@
 </div>
 <div class="w-0 h-0 visibility-none hidden"> <asset-loader1 /> </div>
 <script>
-    type Assets = {
+    import { Elements } from "@utils/index";
+    import { Marketplace } from "@utils/marketplace";
+    import { SettingsVals } from "@utils/values";
+
+    type Item = {
         description: string,
         image: string,
         package_name: string,
@@ -14,12 +18,12 @@
         type: string,
         version: string
     }
-    import { Settings, settings } from "@utils/settings";
-    async function getItem(item: any) {
+
+    const getItem = async (item: any) => {
         try {
-            const res = await fetch(new URL(`/api/packages/${item}`, window.location.origin));
+            const res = await fetch(new URL(`/api/packages/${item.name}`, window.location.origin));
             const data = await res.json();
-            return { ...data, package_name: item }
+            return { ...data, package_name: item.name }
         }
         catch (err: any) {
             console.log(`Err in themes: ${err}`);
@@ -27,77 +31,77 @@
         }
     }
 
-    async function getAssets() {
-        const items = JSON.parse(localStorage.getItem(Settings.PluginSettings.plugins) as string) || [];
-        const promises = items.map(getItem);
-        const dataArray = await Promise.all(promises);
-        const accumulatedData = dataArray.filter((data) => data !== null);
-        return accumulatedData;
-    } 
+    const constructElements = async (item: Item, parent: HTMLDivElement, marketplace: Marketplace) => {
+        const main = document.createElement("div");
+        main.classList.add("rounded-3xl", "bg-navbar-color", "w-64", "flex", "flex-col", "cursor-pointer", "border-text-color");
+        main.dataset.name = item.package_name
 
-    const attachDeleteEvent = (elem: HTMLElement, mainElem: HTMLElement, parentElem: HTMLElement, asset: Assets) => {
-        elem.addEventListener("click", () => {
-            settings.marketPlaceSettings.uninstall(asset.type === "page" ? "plugin-page" : "plugin-sw", asset.package_name);
-            parentElem.removeChild(mainElem);
+        const click = document.createElement("div");
+        click.classList.add("w-full"); 
+
+        const img = document.createElement("img");
+        img.classList.add("aspect-[16/9]", "rounded-t-3xl");
+        img.src = `/packages/${item.package_name}/${item.image}`;
+        img.alt = `${item.type}-${item.package_name}`;
+        img.loading = "lazy";
+
+        const info = document.createElement("div");
+        info.classList.add("h-2/6", "text-center", "content-center", "p-3", "font-semibold", "items-center", "flex", "flex-col");
+
+        const infoTitle = document.createElement("p");
+        infoTitle.classList.add("text-2xl");
+        infoTitle.innerHTML = item.title;
+
+        const infoInner = document.createElement("div");
+        infoInner.classList.add("flex", "flex-row");
+
+        const infoInnerDelete = document.createElement("div");
+        infoInnerDelete.classList.add("h-8", "w-8", "cursor-pointer");
+        // This is cursed yes. SVG's SUUUCK
+        infoInnerDelete.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256"><path fill="currentColor" d="M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M112 168a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm0-120H96v-8a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8Z" /></svg>`; 
+
+        const infoInnerOpen = document.createElement("a");
+        infoInnerOpen.classList.add("h-8", "w-8", "cursor-pointer");
+        infoInnerOpen.href = `../catalog/package/${item.package_name}`;
+        infoInnerOpen.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256"><path fill="currentColor" d="M192 136v72a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h72a8 8 0 0 1 0 16H48v128h128v-72a8 8 0 0 1 16 0m32-96a8 8 0 0 0-8-8h-64a8 8 0 0 0-5.66 13.66L172.69 72l-42.35 42.34a8 8 0 0 0 11.32 11.32L184 83.31l26.34 26.35A8 8 0 0 0 224 104Z" /></svg>`;
+
+        click.appendChild(img);
+        infoInner.appendChild(infoInnerDelete);
+        infoInner.appendChild(infoInnerOpen);
+        info.appendChild(infoTitle);
+        info.appendChild(infoInner);
+        main.appendChild(click);
+        main.appendChild(info);
+        parent.appendChild(main);
+        
+
+        Elements.attachEvent(infoInnerDelete, "click", async () => {
+            await marketplace.uninstallPlugin({ name: item.package_name, type: item.type as "page" | "serviceWorker" })
+            parent.removeChild(main);
         });
     }
 
-    const createElem = (asset: Assets) => {
-        const parent = document.getElementById("parent");
-        const mainDiv = document.createElement("div");
-        mainDiv.classList.add("rounded-3xl", "bg-navbar-color", "w-64", "flex", "flex-col", "cursor-pointer");
-
-        const clickDiv = document.createElement("div");
-        clickDiv.classList.add("w-full");
-        const imgDiv = document.createElement("img");
-        imgDiv.classList.add("aspect-[16/9]", "rounded-t-3xl");
-        imgDiv.src = `/packages/${asset.package_name}/${asset.image}`;
-        imgDiv.alt = `${asset.type}-${asset.title}`;
-        clickDiv.appendChild(imgDiv);
-
-        const infoDiv = document.createElement("div");
-        infoDiv.classList.add("h-2/6", "text-center", "content-center", "p-3", "font-semibold", "items-center", "flex", "flex-col");
-        const infoTitle = document.createElement("p");
-        infoTitle.classList.add("text-2xl");
-        infoTitle.innerHTML = asset.title;
-
-        const elemInfoMain = document.createElement("div");
-        elemInfoMain.classList.add("flex", "flex-row");
-        const deleteButton = document.createElement("div");
-        deleteButton.classList.add("h-8", "w-8", "cursor-pointer");
-        attachDeleteEvent(deleteButton, mainDiv, parent!, asset);
-        //FUCK SVG's
-        const deleteButtonSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256"><path fill="currentColor" d="M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M112 168a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm0-120H96v-8a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8Z" /></svg>`
-        deleteButton.innerHTML= deleteButtonSVG;
-        elemInfoMain.appendChild(deleteButton);
-
-        const openButton = document.createElement("a");
-        openButton.classList.add("h-8", "w-8", "cursor-pointer");
-        openButton.href = `../catalog/package/${asset.package_name}`
-        const openButtonSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256"><path fill="currentColor" d="M192 136v72a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h72a8 8 0 0 1 0 16H48v128h128v-72a8 8 0 0 1 16 0m32-96a8 8 0 0 0-8-8h-64a8 8 0 0 0-5.66 13.66L172.69 72l-42.35 42.34a8 8 0 0 0 11.32 11.32L184 83.31l26.34 26.35A8 8 0 0 0 224 104Z" /></svg>`
-        openButton.innerHTML = openButtonSVG;
-        elemInfoMain.appendChild(openButton);
-
-        infoDiv.appendChild(elemInfoMain);
-        infoDiv.appendChild(infoTitle);
-        
-
-        mainDiv.appendChild(clickDiv);
-        mainDiv.appendChild(infoDiv);
-        parent?.appendChild(mainDiv);
-        console.log(mainDiv);
-    }
-    
-    //I don't actually want this to run on every page but defining a custom component is an easy way around it.
-    class AssetLoader extends HTMLElement {
-        constructor() {
-            super();
-            (async function() {
-                const assets = await getAssets();
-                console.log(assets);
-                assets.map((asset) => { createElem(asset); });
-            })();
+    const init = async () => {
+        await Marketplace.ready();
+        const mp = Marketplace.getInstances().next().value!;
+        const els = Elements.select([
+            { type: 'id', val: 'parent' }
+        ]);
+        const itemsJSON = JSON.parse(await mp.getValueFromStore(SettingsVals.marketPlace.plugins)) || [];
+        const filteredItems = itemsJSON.filter((dat: any) => dat.remove !== true);
+        const itemPromises = filteredItems.map(getItem);
+        const itemsArray = await Promise.all(itemPromises);
+        return {
+            items: itemsArray.filter((data) => data !== null),
+            elements: els,
+            marketplace: mp
         }
     }
-    customElements.define('asset-loader1', AssetLoader);
+
+    Elements.createCustomElement("asset-loader1", async () => {
+        const { items, elements, marketplace } = await init();
+        const parentElem = Elements.exists<HTMLDivElement>(await elements.next());
+        const promises = items.map(item => constructElements(item, parentElem, marketplace));
+        await Promise.all(promises);
+    });
 </script>

src/components/catalog/InstalledThemes.astro

@@ -1,16 +1,23 @@
 <div id="parent" class="flex flex-row flex-wrap gap-4 items-center font-roboto justify-center">
-    <div class="rounded-3xl bg-navbar-color w-64 flex flex-col cursor-pointer">
-        <div class="w-full" id="main-theme">
-            <img src="/classic_theme.png" alt="Classic nebula" class="aspect-[16/9] rounded-t-3xl"/>
+    <div id="main-theme" class="rounded-3xl bg-navbar-color w-64 flex flex-col cursor-pointer">
+        <div class="w-full">
+            <img src="/classic_theme.png" alt="Classic nebula" class="aspect-[16/9] rounded-t-3xl" loading="eager" />
         </div>
         <div class="h-2/6 text-center content-center p-3 font-semibold items-center flex flex-col text-2xl">
             Classic Nebula
         </div>
     </div>
 </div>
-<div class="w-0 h-0 visibility-none hidden"> <asset-loader /> </div>
+<div class="w-0 h-0 visibility-none hidden"> 
+    <asset-loader /> 
+</div>
+
 <script>
-    type Assets = {
+    import { Elements } from "@utils/index";
+    import { Marketplace } from "@utils/marketplace";
+    import { SettingsVals } from "@utils/values";
+
+    type Item = {
         description: string,
         image: string,
         package_name: string,
@@ -22,8 +29,8 @@
         type: string,
         version: string
     }
-    import { Settings, settings } from "@utils/settings";
-    async function getItem(item: any) {
+
+    const getItem = async (item: any) => {
         try {
             const res = await fetch(new URL(`/api/packages/${item}`, window.location.origin));
             const data = await res.json();
@@ -35,88 +42,97 @@
         }
     }
 
-    async function getAssets() {
-        const items = JSON.parse(localStorage.getItem(Settings.AppearanceSettings.themes) as string) || [];
-        const promises = items.map(getItem);
-        const dataArray = await Promise.all(promises);
-        const accumulatedData = dataArray.filter((data) => data !== null);
-        return accumulatedData;
-    }
+    const constructElements = async (item: Item, mainTheme: HTMLDivElement, parent: HTMLDivElement, marketplace: Marketplace) => {
+        const main = document.createElement("div");
+        main.classList.add("rounded-3xl", "bg-navbar-color", "w-64", "flex", "flex-col", "cursor-pointer", "border-text-color");
+        main.dataset.name = item.package_name
 
-    const attachThemeEvent = (elem: HTMLElement, def: boolean | Assets) => {
-        elem.addEventListener("click", () => {
-            if (def === true || def === false) return settings.marketPlaceSettings.changeTheme(def);
-            settings.marketPlaceSettings.changeTheme(false, def.payload, def.background_video, def.background_image, def.package_name);
-        });
-    };
+        const click = document.createElement("div");
+        click.classList.add("w-full"); 
 
-    const attachDeleteEvent = (elem: HTMLElement, mainElem: HTMLElement, parentElem: HTMLElement, asset: Assets) => {
-        elem.addEventListener("click", () => {
-            settings.marketPlaceSettings.uninstall("theme", asset.package_name);
-            settings.marketPlaceSettings.changeTheme(true);
-            parentElem.removeChild(mainElem);
-        });
-    }
+        const img = document.createElement("img");
+        img.classList.add("aspect-[16/9]", "rounded-t-3xl");
+        img.src = `/packages/${item.package_name}/${item.image}`;
+        img.alt = `${item.type}-${item.package_name}`;
+        img.loading = "lazy";
 
-    const createElem = (asset: Assets) => {
-        const parent = document.getElementById("parent");
-        const mainDiv = document.createElement("div");
-        mainDiv.classList.add("rounded-3xl", "bg-navbar-color", "w-64", "flex", "flex-col", "cursor-pointer");
+        const info = document.createElement("div");
+        info.classList.add("h-2/6", "text-center", "content-center", "p-3", "font-semibold", "items-center", "flex", "flex-col");
 
-        const clickDiv = document.createElement("div");
-        clickDiv.classList.add("w-full");
-        attachThemeEvent(clickDiv, asset);
-        const imgDiv = document.createElement("img");
-        imgDiv.classList.add("aspect-[16/9]", "rounded-t-3xl");
-        imgDiv.src = `/packages/${asset.package_name}/${asset.image}`;
-        imgDiv.alt = `${asset.type}-${asset.title}`;
-        clickDiv.appendChild(imgDiv);
-
-        const infoDiv = document.createElement("div");
-        infoDiv.classList.add("h-2/6", "text-center", "content-center", "p-3", "font-semibold", "items-center", "flex", "flex-col");
         const infoTitle = document.createElement("p");
         infoTitle.classList.add("text-2xl");
-        infoTitle.innerHTML = asset.title;
+        infoTitle.innerHTML = item.title;
 
-        const elemInfoMain = document.createElement("div");
-        elemInfoMain.classList.add("flex", "flex-row");
-        const deleteButton = document.createElement("div");
-        deleteButton.classList.add("h-8", "w-8", "cursor-pointer");
-        attachDeleteEvent(deleteButton, mainDiv, parent!, asset);
-        //FUCK SVG's
-        const deleteButtonSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256"><path fill="currentColor" d="M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M112 168a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm0-120H96v-8a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8Z" /></svg>`
-        deleteButton.innerHTML= deleteButtonSVG;
-        elemInfoMain.appendChild(deleteButton);
+        const infoInner = document.createElement("div");
+        infoInner.classList.add("flex", "flex-row");
 
-        const openButton = document.createElement("a");
-        openButton.classList.add("h-8", "w-8", "cursor-pointer");
-        openButton.href = `../catalog/package/${asset.package_name}`
-        const openButtonSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256"><path fill="currentColor" d="M192 136v72a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h72a8 8 0 0 1 0 16H48v128h128v-72a8 8 0 0 1 16 0m32-96a8 8 0 0 0-8-8h-64a8 8 0 0 0-5.66 13.66L172.69 72l-42.35 42.34a8 8 0 0 0 11.32 11.32L184 83.31l26.34 26.35A8 8 0 0 0 224 104Z" /></svg>`
-        openButton.innerHTML = openButtonSVG;
-        elemInfoMain.appendChild(openButton);
+        const infoInnerDelete = document.createElement("div");
+        infoInnerDelete.classList.add("h-8", "w-8", "cursor-pointer");
+        // This is cursed yes. SVG's SUUUCK
+        infoInnerDelete.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256"><path fill="currentColor" d="M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M112 168a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm0-120H96v-8a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8Z" /></svg>`; 
 
-        infoDiv.appendChild(elemInfoMain);
-        infoDiv.appendChild(infoTitle);
+        const infoInnerOpen = document.createElement("a");
+        infoInnerOpen.classList.add("h-8", "w-8", "cursor-pointer");
+        infoInnerOpen.href = `../catalog/package/${item.package_name}`;
+        infoInnerOpen.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256"><path fill="currentColor" d="M192 136v72a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h72a8 8 0 0 1 0 16H48v128h128v-72a8 8 0 0 1 16 0m32-96a8 8 0 0 0-8-8h-64a8 8 0 0 0-5.66 13.66L172.69 72l-42.35 42.34a8 8 0 0 0 11.32 11.32L184 83.31l26.34 26.35A8 8 0 0 0 224 104Z" /></svg>`;
+
+        click.appendChild(img);
+        infoInner.appendChild(infoInnerDelete);
+        infoInner.appendChild(infoInnerOpen);
+        info.appendChild(infoTitle);
+        info.appendChild(infoInner);
+        main.appendChild(click);
+        main.appendChild(info);
+        parent.appendChild(main);
         
         
-        mainDiv.appendChild(clickDiv);
-        mainDiv.appendChild(infoDiv);
-        parent?.appendChild(mainDiv);
-        console.log(mainDiv);
+        Elements.attachEvent(mainTheme, "click", () => {
+            marketplace.theme({ type: 'remove' });
+        });
+        
+        Elements.attachEvent(click, "click", async () => {
+            await marketplace.theme(
+                { 
+                    type: 'normal', 
+                    payload: item.payload, 
+                    sources: {
+                        video: item.background_video,
+                        bg: item.background_image
+                    },
+                    name: item.package_name
+                }
+            );
+        });
+
+        Elements.attachEvent(infoInnerDelete, "click", async () => {
+            await marketplace.uninstallTheme({ name: item.package_name });
+            parent.removeChild(main);
+            await marketplace.theme({ type: 'remove' });
+        });
     }
 
-    //I don't actually want this to run on every page but defining a custom component is an easy way around it.
-    class AssetLoader extends HTMLElement {
-        constructor() {
-            super();
-            (async function() {
-                const mainElem = document.getElementById("main-theme");
-                try { attachThemeEvent(mainElem!, true) } catch(_) {}
-                const assets = await getAssets();
-                console.log(assets);
-                assets.map((asset) => { createElem(asset); });
-            })();
+    const init = async () => {
+        await Marketplace.ready();
+        const mp = Marketplace.getInstances().next().value!;
+        const els = Elements.select([
+            { type: 'id', val: 'main-theme' },
+            { type: 'id', val: 'parent' }
+        ]);
+        const itemsJSON = JSON.parse(await mp.getValueFromStore(SettingsVals.marketPlace.themes)) || [];
+        const itemPromises = itemsJSON.map(getItem);
+        const itemsArray = await Promise.all(itemPromises);
+        return {
+            items: itemsArray.filter((data) => data !== null),
+            elements: els,
+            marketplace: mp
         }
     }
-    customElements.define('asset-loader', AssetLoader);
+
+    Elements.createCustomElement("asset-loader", async () => {
+        const { items, elements, marketplace } = await init();
+        const mainTheme = Elements.exists<HTMLDivElement>(await elements.next()); 
+        const parentElem = Elements.exists<HTMLDivElement>(await elements.next());
+        const promises = items.map(item => constructElements(item, mainTheme, parentElem, marketplace));
+        await Promise.all(promises);
+    });
 </script>

src/components/settings/Loader.astro

@@ -1,25 +1,70 @@
 <script>
-    import { settings, Settings } from "@utils/settings/index";
-    import { loadProxyScripts, setTransport, initSw, setSWStuff } from "@utils/registerSW";
-    // This loads the settings in a nice way
-    settings.tabSettings.cloakTab(localStorage.getItem(Settings.TabSettings.tabCloak) as string || "default");
-    settings.proxySettings.changeProxy(localStorage.getItem(Settings.ProxySettings.proxy) as string || "automatic");
-    settings.proxySettings.openIn(localStorage.getItem(Settings.ProxySettings.openIn) as string || "embed");
-    settings.proxySettings.setSearchEngine(localStorage.getItem(Settings.ProxySettings.searchEngine) as string || "ddg");
-    settings.proxySettings.setWispURL(localStorage.getItem(Settings.ProxySettings.wispServerURL) as string || "default");
-    settings.proxySettings.setTransport(localStorage.getItem(Settings.ProxySettings.transport) as string || "libcurl");
-    settings.marketPlaceSettings.changeTheme(false, undefined, localStorage.getItem(Settings.AppearanceSettings.video) as string, localStorage.getItem(Settings.AppearanceSettings.image) as string, localStorage.getItem(Settings.AppearanceSettings.themeName) as string);
-    document.addEventListener("astro:after-swap", function() {
-        settings.tabSettings.cloakTab(localStorage.getItem(Settings.TabSettings.tabCloak) as string || "default");
-        //settings.marketPlaceSettings.changeTheme(false);
+    import { EventHandler } from "@utils/events";
+    import { SW, createProxyScripts, checkProxyScripts, createBareMuxConn, setTransport } from "@utils/serviceWorker";
+    import { Settings } from "@utils/settings";
+    import { log } from "@utils/index";
+    import { Marketplace } from "@utils/marketplace";
+    import { SettingsVals } from "@utils/values";
+    const titleText = ` 
+     _   _      _           _         ____                  _               
+    | \\ | | ___| |__  _   _| | __ _  / ___|  ___ _ ____   _(_) ___ ___  ___ 
+    |  \\| |/ _ \\ '_ \\| | | | |/ _' | \\___ \\ / _ \\ '__\\ \\ / / |/ __/ _ \\/ __|
+    | |\\  |  __/ |_) | |_| | | (_| |  ___) |  __/ |   \\ V /| | (_|  __/\\__ \\
+    |_| \\_|\\___|_.__/ \\__,_|_|\\__,_| |____/ \\___|_|    \\_/ |_|\\___\\___||___/
+    `;
+    const info = "Hello developer or curious individual & welcome to the console! \nThere isn't a whole lot here for you unless you have run into an error.";
+    const sysInfo = `In which case please include the info below when opening the issue: \n\nOS: ${navigator.platform} \nBrowser: ${navigator.userAgent} \nService workers: ${"serviceWorker" in navigator ? "Yes" : "No"}`
+    const init = async (): Promise<Marketplace> => {
+        log({ type: 'normal', bg: false, prefix: false }, titleText);
+        log({ type: 'normal', bg: true, prefix: false }, info);
+        log({ type: 'normal', bg: true, prefix: false }, sysInfo);
+        log({ type: 'info', bg: true, prefix: true }, "General init...");
+        for (const script of createProxyScripts()) {
+            document.body.appendChild(script);
+        }
+        await checkProxyScripts();
+        const conn = await createBareMuxConn("/baremux/worker.js");
+        const sw = new SW(conn);
+        const mp = new Marketplace();
+        const { serviceWorker, bareMuxConn, sj } = await sw.getSWInfo();
+        log({ type: 'info', bg: true, prefix: true }, `General init completed! \n\nServiceWorker: ${serviceWorker.active?.state} \nBareMuxConn: ${bareMuxConn ? 'Active': 'Not active'} \nScramjetController: ${sj ? 'Active' : 'Not active'}`);
+        return mp;
+    }
+    
+    const handleTheme = async (marketplace: Marketplace) => {
+        const name = await marketplace.getValueFromStore(SettingsVals.marketPlace.appearance.theme.name);
+        const payload = await marketplace.getValueFromStore(SettingsVals.marketPlace.appearance.theme.payload);
+        const video = await marketplace.getValueFromStore(SettingsVals.marketPlace.appearance.video);
+        const image = await marketplace.getValueFromStore(SettingsVals.marketPlace.appearance.image);
+        if (name !== null) {
+            marketplace.theme({
+                type: 'normal',
+                name: name,
+                payload: payload,
+                sources: {
+                    video: video,
+                    bg: image 
+                }
             });
-    document.addEventListener("DOMContentLoaded", async () => {
-        const conn = await loadProxyScripts();
-        await setTransport(
-            conn,
-            localStorage.getItem(Settings.ProxySettings.transport) as string
-        );
-        const sw = await initSw();
-        await setSWStuff({sw, conn});
+        }
+    }
+
+    const initSettings = async (marketplace: Marketplace) => {
+        log({ type: 'info', bg: true, prefix: true }, "Initializing settings...");
+        for await (const _ of Settings.initDefaults());
+        await handleTheme(marketplace);
+        log({ type: 'info', bg: true, prefix: true }, "Initialized Settings!");
+    }
+
+    const eventHandler = new EventHandler({
+        events: {
+            "DOMContentLoaded": async () => {
+                const mp = await init();
+                await initSettings(mp);
+            }
+        },
+        logging: true 
     });
+    //bind the events
+    eventHandler.bind();
 </script>

src/components/toasts/Toast.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { type Position, type Props, type ToastType } from "@utils/toast.ts";
+import { type ToastPosition, type Props, type TType } from "@utils/index";
 import toast from "svelte-french-toast";
 export let toastProp: Props;
 function handleToast(toastProp: Props) {

src/env.d.ts

@@ -1,3 +1,45 @@
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
 /// <reference types="@titaniumnetwork-dev/ultraviolet/client" />
+interface SJOptions {
+    prefix: string;
+    globals?: {
+        wrapfn: string;
+        wrapthisfn: string;
+        trysetfn: string;
+        importfn: string;
+        rewritefn: string;
+        metafn: string;
+        setrealmfn: string;
+        pushsourcemapfn: string;
+    };
+    files: {
+        wasm: string;
+        shared: string;
+        worker: string;
+        client: string;
+        sync: string;
+    };
+    flags?: {
+        serviceworkers?: boolean;
+        syncxhr?: boolean;
+        naiiveRewriter?: boolean;
+        strictRewrites?: boolean;
+        rewriterLogs?: boolean;
+        captureErrors?: boolean;
+        cleanErrors?: boolean;
+        scramitize?: boolean;
+        sourcemaps?: boolean;
+    };
+    siteFlags?: {};
+    codec?: {
+        encode: string;
+        decode: string;
+    };
+}
+
+declare class ScramjetController {
+    constructor(opts: SJOptions);
+    init(): Promise<void>;
+    encodeUrl(term: string): string;
+}

src/layouts/Layout.astro

@@ -84,11 +84,7 @@ const Host = Astro.url.host;
     <div class="h-full z-10 w-full fixed">
       <slot />
     </div>
-    <div
-      id="mobileNavMenu"
-      class="w-full fixed inset-0 h-[calc(100%-4rem)] z-20"
-      transition:persist
-    >
+    <div id="mobilenavwrapper" class="w-full fixed inset-0 h-[calc(100%-4rem)] z-20">
       <MobileNavigation />
     </div>
     <video
@@ -107,31 +103,6 @@ const Host = Astro.url.host;
       id="nebulaImage"
       transition:persist
     /> 
-    <script>
-      import { isMobileNavOpen } from "../store.js";
-      const mobileNavMenu = document.getElementById("mobileNavMenu");
-      // Listen to changes in the store, and show/hide the mobile navigation accordingly
-      isMobileNavOpen.subscribe((open) => {
-        if (open) {
-          if (mobileNavMenu) {
-            mobileNavMenu.style.display = "block";
-            mobileNavMenu.style.transform = "translateX(0%)";
-          }
-        } else {
-          if (mobileNavMenu) {
-            mobileNavMenu.style.transform = "translateX(100%)";
-          }
-        }
-      });
-    </script>
-    <style>
-      #mobileNavMenu {
-        -webkit-transition-duration: 600ms;
-        transition-duration: 600ms;
-        transform: translateX(100%);
-      }
-    </style>
-
     <style is:global>
       .roboto {
         font-family: var(--font-family), Roboto, sans-serif;

src/pages/[lang]/catalog/[...page].astro

@@ -1,8 +1,8 @@
 ---
-import CatalogCard from "@components/catalog/CatalogCard.svelte";
+import CatalogCard from "@components/catalog/CatalogCard.astro";
 import Layout from "@layouts/Layout.astro";
 import { getLangFromUrl, useTranslations } from "../../../i18n/utils";
-import Pagnation from "./pagnation.astro";
+import Pagination from "./pagination.astro";
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
 
@@ -22,7 +22,7 @@ const lastPage = assetsJson.pages;
           <h1 class="text-3xl md:text-5xl font-bold"> Nebula Catalog </h1>
           <p class="text-l md:text-xl max-md:text-center max-md:p-2"> The Nebula Catalog is a place for you to find user-created themes and plugins. </p>
       </div>
-      <CatalogCard client:only="svelte" page={page} lang={lang} />
+      <CatalogCard page={page} lang={lang} />
     <div class="flex flex-row pb-8 gap-4 font-roboto">
       {/* The first page. If the user is on this page, or the one after it, don't show it. */}
       {parseInt(page!) > 2 && (
@@ -39,8 +39,8 @@ const lastPage = assetsJson.pages;
       <a href={`/${lang}/catalog/${nextPage}`} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md">{nextPage}</a>
         )
       }
-      {/* Pagnation input */}
-      <Pagnation />
+      {/* Pagination input */}
+      <Pagination />
       {/* The last page. If the user is on this page, don't show it. */}
       {page != lastPage && (
       <a href={`/${lang}/catalog/${assetsJson.pages}`} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md">

src/pages/[lang]/catalog/package/[...packageName].astro

@@ -89,97 +89,97 @@ const assetsJson = await response.json();
       )
     }
   </div>
-  <variable-define
-    data-assets={JSON.stringify(assetsJson)}
-    data-name={packageName}
-    data-type={assetsJson.type}></variable-define>
+  <package-vars data-assets={JSON.stringify(assetsJson)} data-name={packageName} data-type={assetsJson.type}></package-vars>
 </Layout>
 <script>
-  import { pageLoad } from "@utils/events";
-  import { settings, Settings, type PackageType } from "@utils/settings/index";
-  import type { SWPagePlugin } from "@utils/settings/types";
-  let packageName: string;
-  let assetsJson: any;
-  let packageType: string;
-  //some weird trickery to get the variables.
-  class VariableDefiner extends HTMLElement {
-    constructor() {
-      super();
-      assetsJson = this.dataset.assets;
-      packageName = this.dataset.name as string;
-      packageType = this.dataset.type as PackageType;
+    import { Elements } from "@utils/index";
+    import { Marketplace } from "@utils/marketplace"; 
+
+    const init = async () => {
+        await Marketplace.ready();
+        const marketplace = Marketplace.getInstances().next().value!;
+        const elements = Elements.select([
+            { type: 'id', val: 'install' },
+            { type: 'id', val: 'uninstall' }
+        ]);
+        return { marketplace, elements };
+    }; 
+
+     const handleThemes = async (marketplace: Marketplace, name: string, assets: any) => {
+        const { exists } = await marketplace.getThemes(name);
+        if (!exists) {
+            await marketplace.installTheme({ name: name });
+            await marketplace.theme({
+                type: 'normal',
+                payload: assets.payload,
+                name: name,
+                sources: {
+                    video: assets.background_video,
+                    bg: assets.background_image
+                }
+            });
+        }
+        else {
+            await marketplace.theme({ type: 'remove', name: name });
+            await marketplace.uninstallTheme({ name: name });
         }
     } 
-  customElements.define("variable-define", VariableDefiner);
-  const fn = () => {
-    const cssItems =
-      JSON.parse(
-        localStorage.getItem(Settings.AppearanceSettings.themes) as string
-      ) || [];
-    const cssItemExists = cssItems.indexOf(packageName) !== -1;
-    const pluginItems =
-      JSON.parse(
-        localStorage.getItem(Settings.PluginSettings.plugins) as string
-      ) || [];
-    //@ts-ignore
-    const pluginItemExists = pluginItems.find(
-      //@ts-ignore
-      ({ name, remove }) => name === packageName && remove !== true
-    );
-    const installButton = document.getElementById(
-      "install"
-    ) as HTMLButtonElement;
-    const uninstallButton = document.getElementById(
-      "uninstall"
-    ) as HTMLButtonElement;
-    const payload = assetsJson ? JSON.parse(assetsJson) : undefined;
-    if (cssItemExists || pluginItemExists) {
-      uninstallButton.classList.remove("hidden");
-      installButton.classList.add("hidden");
+
+     const handlePlugins = async (marketplace: Marketplace, name: string, assets: any) => {
+         const { plug } = await marketplace.getPlugins(name);
+         console.log(plug);
+         console.log(assets);
+         if (!plug || plug.remove === true) {
+             await marketplace.installPlugin({
+                 name: name,
+                 src: assets.payload,
+                 type: assets.type === "plugin-page" ? "page": "serviceWorker"
+             });
+             return;
          }
-    installButton.addEventListener("click", () => {
-      console.log(payload);
-      settings.marketPlaceSettings
-        .install(
-          payload.type === "theme"
-            ? {
-                theme: {
-                  payload: payload.payload,
-                  video: payload.background_video,
-                  bgImage: payload.background_image,
-                },
+         await marketplace.uninstallPlugin({
+             name: name,
+             type: assets.type === "plugin-page" ? "page": "serviceWorker"
+         });
      }
-            : payload.type === "plugin-page"
-              ? {
-                  plugin: {
-                    name: packageName,
-                    src: payload.payload,
-                    type: "page",
-                  },
-                }
-              : {
-                  plugin: {
-                    name: packageName,
-                    src: payload.payload,
-                    type: "serviceWorker",
-                  },
-                },
-          packageName,
-          payload.payload
-        )
-        .then(() => {
+
+    Elements.createCustomElement("package-vars", 
+        async(datasets) => { 
+            const { marketplace, elements } = await init();
+            const { dataAssets, dataName, dataType } = { dataAssets: datasets![0].val, dataName: datasets![1].val, dataType: datasets![2].val };
+            const { exists: themeExists } = await marketplace.getThemes(dataName!);
+            const { plug } = await marketplace.getPlugins(dataName!);
+            console.log(dataName);
+            const installButton = Elements.exists<HTMLButtonElement>(await elements.next());
+            const uninstallButton = Elements.exists<HTMLButtonElement>(await elements.next());
+
+            Elements.attachEvent(installButton, "click", async () => {
+                dataType?.startsWith("plugin") 
+                    ? await handlePlugins(marketplace, dataName!, JSON.parse(dataAssets!) || []) 
+                    : await handleThemes(marketplace, dataName!, JSON.parse(dataAssets!) || []);
                 installButton.classList.add("hidden");
                 uninstallButton.classList.remove("hidden");
             });
-    });
-    uninstallButton.addEventListener("click", () => {
-      settings.marketPlaceSettings
-        .uninstall(packageType as PackageType, packageName)
-        .then(() => {
+
+            Elements.attachEvent(uninstallButton, "click", async () => {
+                dataType?.startsWith("plugin") 
+                    ? await handlePlugins(marketplace, dataName!, JSON.parse(dataAssets!) || [])
+                    : await handleThemes(marketplace, dataName!, JSON.parse(dataAssets!) || []);
                 uninstallButton.classList.add("hidden");
                 installButton.classList.remove("hidden");
             });
-    });
-  };
-  pageLoad(fn);
+            
+            if (themeExists || (plug && plug.remove === false || plug.remove === undefined)) {
+                installButton.classList.add("hidden");
+                uninstallButton.classList.remove("hidden");
+            }
+        },
+        //Pull in the data elements.
+        [
+            { name: 'assets' },
+            { name: 'name' },
+            { name: 'type' }
+        ]
+    );
+
 </script>

src/pages/[lang]/catalog/pagination.astro

@@ -0,0 +1,27 @@
+<input
+  class="w-10 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+  type="number"
+  id="pageinationInput"
+  placeholder="..."
+/>
+<script>
+    import { EventHandler } from "@utils/events";
+    import { Elements } from "@utils/index";
+    import { navigate } from "astro:transitions/client";
+    new EventHandler({
+        events: {
+            "astro:page-load": async () => {
+                const el = Elements.select([
+                    { type: 'id', val: 'pageinationInput' }
+                ]);
+                const input = Elements.exists<HTMLInputElement>(await el.next());
+                Elements.attachEvent(input, "keyup", (event?: Event) => {
+                    const e = event as KeyboardEvent | undefined;
+                    if (e?.key) return navigate(`${input.value}`);
+                });
+            }
+        },
+        logging: false
+    })
+    .bind();
+</script>

src/pages/[lang]/catalog/pagnation.astro

@@ -1,17 +0,0 @@
-<input
-  class="w-10 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-  type="number"
-  id="pagnation_input"
-  placeholder="..."
-/>
-<script>
-import { pageLoad } from "@utils/events";
-pageLoad(() => {
-    const pagenationInput = document.getElementById('pagnation_input') as HTMLInputElement;
-    pagenationInput?.addEventListener("keyup", function (event) {
-        if (event.key === "Enter") {
-            window.location.href = pagenationInput?.value;
-        }
-    });
-  });
-</script>

src/pages/[lang]/games.astro

@@ -3,16 +3,25 @@ import Layout from "@layouts/Layout.astro";
 ---
 
 <Layout title="Chango Games">
-    <iframe id="chango" class="w-full h-full"></iframe>
+    <iframe id="chango" class="w-full h-full" src="/loading"></iframe>
 </Layout>
 <script>
-    import { setTransport, getSWStuff } from "@utils/registerSW.ts"; //../../utils/registerSW.ts
-    import { Settings } from "@utils/settings/index";
-    import { pageLoad } from "@utils/events";
-    pageLoad(async () => {
-        const { conn } = getSWStuff();
-        const iframe = document.getElementById("chango") as HTMLIFrameElement;
-        await setTransport(conn, localStorage.getItem(Settings.ProxySettings.transport) as string);
-        if (iframe) return iframe.src = __uv$config!.prefix + __uv$config.encodeUrl!("https://radon.games");
-    });
+    import { EventHandler } from "@utils/events";
+    import { Elements } from "@utils/index";
+    
+    const init = async () => {
+        const el = Elements.select([
+            { type: 'id', val: 'chango' }
+        ]);
+        const chango = Elements.exists<HTMLIFrameElement>(await el.next());
+        chango.src = `${__uv$config.prefix}${__uv$config.encodeUrl!("https://radon.games/games/")}`
+    };
+
+    new EventHandler({
+        events: {
+            "astro:page-load": init
+        },
+        logging: false
+    })
+    .bind();
 </script>

src/pages/[lang]/index.astro

@@ -8,19 +8,13 @@ import { VERSION } from "astro:env/client";
 ---
 
 <Layout title="Home">
-  <div
-    class="flex flex-wrap mt-16 justify-center content-center w-full bg-primary fixed inset-0 h-[calc(100%-4rem)] z-0 flex-col items-center"
-  >
-    <div
-      class="w-full flex flex-col justify-center items-center content-center h-2/4"
-    >
+  <div class="flex flex-wrap mt-16 justify-center content-center w-full bg-primary fixed inset-0 h-[calc(100%-4rem)] z-0 flex-col items-center">
+    <div class="w-full flex flex-col justify-center items-center content-center h-2/4">
       <div class="flex flex-row items-center mb-8">
         <div class="h-32 w-32 fill-navbar-text-color">
           <Logo />
         </div>
-        <h1
-          class="font-roboto whitespace-nowrap text-navbar-text-color sm:visible text-5xl sm:text-7xl roboto"
-        >
+        <h1 class="font-roboto whitespace-nowrap text-navbar-text-color sm:visible text-5xl sm:text-7xl roboto">
           nebula.
         </h1>
       </div>
@@ -41,113 +35,145 @@ import { VERSION } from "astro:env/client";
       src="/loading"></iframe>
     <div
       id="version"
-      class="flex flex-row w-full absolute bottom-4 pr-4 pl-4 text-text-color h-6 justify-between font-roboto"
+      class="flex flex-row w-full absolute bottom-4 pr-4 pl-4 text-text-color h-6 justify-between items-center font-roboto"
     >
       <p>Version: {VERSION}</p>
+      <div class="hidden md:flex gap-2 flex-grow ml-16 justify-center items-center"> 
+          <p> Having problems? </p>
+        <button id="reset" class="underline underline-offset-4 hover:decoration-input-border-color active:decoration-input-text">
+            Click here to reset your instance
+        </button> 
+      </div>
       <p>&copy; Nebula Services 2024</p>
     </div>
   </div>
 </Layout>
 <script>
-  import { setTransport, getSWStuff } from "@utils/registerSW"; //../../utils/registerSW.ts
-  import { pageLoad } from "@utils/events";
-  import { SupportedSites } from "@utils/siteSupport";
-  import {
-    SearchEngines,
-    Settings,
-    cloak,
-    settings,
-  } from "@utils/settings/index";
-  import { search } from "@utils/search"; //../../utils/search.ts
+    import { EventHandler } from "@utils/events";
+    import { SupportedSites, SearchEngines, SettingsVals } from "@utils/values";
+    import { search, Elements } from "@utils/index";
     import { BareClient } from "@mercuryworkshop/bare-mux";
+    import { defaultStore } from "@utils/storage";
+    import { SW } from "@utils/serviceWorker";
+    import { Marketplace } from "@utils/marketplace";
+
     type Suggestion = {
         phrase: string;
     };
-  async function proxy(term: string) {
-    const searchEngine = localStorage.getItem(
-      Settings.ProxySettings.searchEngine
-    );
-    const openIn = localStorage.getItem(Settings.ProxySettings.openIn);
-    let proxyUrl: any =
-      __uv$config!.prefix +
-      __uv$config.encodeUrl!(
-        search(
-          term,
-          searchEngine ? SearchEngines[searchEngine] : SearchEngines.ddg
-        )
-      );
-    if (openIn === "a:b" || openIn === "blob") {
-      return cloak(
-        openIn as string,
-        "https://google.com",
-        `${window.location.origin}${proxyUrl}`
-      );
-    } else if (openIn === "direct") {
-      return (window.location.href = proxyUrl as string);
-    } else {
-      return proxyUrl;
-    }
-  }
-  async function uv(iframe: HTMLIFrameElement, term: string) {
-    const { sw, conn } = getSWStuff(); 
-    await setTransport(
-      conn,
-      localStorage.getItem(Settings.ProxySettings.transport) as string
-    );
-    await settings.marketPlaceSettings.handlePlugins(sw);
+
+    const init = async (): Promise<void> => {
+        const bc = new BareClient();
+        const se = Elements.select([
+            { type: 'id', val: 'reset' },
+            { type: 'id', val: 'nebula-input' },
+            { type: 'id', val: 'omnibox' },
+            { type: 'id', val: 'version' },
+            { type: 'id', val: 'neb-iframe' }
+        ]);
+    
+        const reset = Elements.exists<HTMLButtonElement>(await se.next());
+        Elements.attachEvent(reset, "click", async () => {
+            const t = await navigator.serviceWorker.getRegistrations();
+            t.map(async (reg) => {
+                await reg.unregister();
+            });
+            localStorage.clear();
+            window.location.href = "/";
+        });
+
+        const input = Elements.exists<HTMLInputElement>(await se.next());
+        const omnibox = Elements.exists<HTMLDivElement>(await se.next());
+        const copyright = Elements.exists<HTMLDivElement>(await se.next());
+        const iframe = Elements.exists<HTMLIFrameElement>(await se.next());
+        const prox = async (input: string, prox: "uv" | "sj") => {
+            await Marketplace.ready();
+            const mp = Marketplace.getInstances().next().value!;
+            const sw = SW.getInstances().next().value as SW; 
             iframe.classList.remove("hidden");
-    const url = await proxy(term);
-    if (url) {
-      iframe.src = url;
+            const val = search(
+                input, 
+                defaultStore.getVal(SettingsVals.proxy.searchEngine) 
+                ? SearchEngines[defaultStore.getVal(SettingsVals.proxy.searchEngine)]
+                : SearchEngines.ddg
+            );
+            const { serviceWorker } = await sw.getSWInfo();
+            mp.handlePlugins(serviceWorker);
+            switch(prox) {
+                case "uv": {
+                    iframe.src = `${__uv$config.prefix}${__uv$config.encodeUrl!(val)}`;
+                    break;
+                }
+                case "sj": {
+                    const { sj } = await sw.getSWInfo();
+                    iframe.src = sj.encodeUrl(val);
+                    break;
                 }
             }
-  //we need to rerun this on every page load
-  pageLoad(async () => {
-    const input = document.getElementById("nebula-input") as HTMLInputElement;
-    const iframe = document.getElementById("neb-iframe") as HTMLIFrameElement;
-    const omnibox = document.getElementById("omnibox") as HTMLDivElement;
-    const copyright = document.getElementById("version") as HTMLDivElement;
-    const client = new BareClient();
-    input?.addEventListener("keypress", async function (event: any) {
+        }
+        input.addEventListener("keypress", async (event: any) => {
             if (event.key === "Enter") {
                 copyright.classList.add("hidden");
-        if (
-          localStorage.getItem(Settings.ProxySettings.proxy) === "automatic"
-        ) {
-          const key = SupportedSites[input?.value];
-          switch (key) {
-            case "uv":
-              uv(iframe, input?.value);
-              break;
-            default:
-              uv(iframe, input?.value);
+                if (defaultStore.getVal(SettingsVals.proxy.proxy.key) === SettingsVals.proxy.proxy.available.automatic) {
+                    switch(SupportedSites[input.value]) {
+                        case "uv": {
+                            prox(input.value, "uv");
+                            break;
+                        }
+                        case "sj": {
+                            prox(input.value, "sj");
+                            break;
+                        }
+                        default: {
+                            prox(input.value, "uv");
+                        }
+                    }
+                }
+
+                switch(defaultStore.getVal("proxy") as "uv" | "sj") {
+                    case "uv": {
+                        prox(input.value, "uv");
+                        break;
+                    }
+                    case "sj": {
+                        prox(input.value, "sj");
                         break;
                     }
-        } else if (
-          localStorage.getItem(Settings.ProxySettings.proxy) === "uv"
-        ) {
-          uv(iframe, input?.value);
                 }
             }
         });
-    input?.addEventListener("input", async function () {
+
+        input.addEventListener("input", async () => {
+            if (input.value.length < 3) {
                 omnibox.innerHTML = "";
-      const value = input?.value;
-      input.classList.remove("rounded-b-2xl");
-      omnibox.classList.remove("hidden");
-      if (value.length === 0) {
-        input.classList.add("rounded-b-2xl");
                 omnibox.classList.add("hidden");
+                input.classList.add("rounded-b-2xl");
+                return;
+            }
+
+            omnibox.classList.remove("hidden");
+            input.classList.remove("rounded-b-2xl");
+            const data = await bc.fetch(`https://api.duckduckgo.com/ac?q=${encodeURIComponent(input.value)}&format=json`);
+            const res = await data.json();
+            const fData = res.slice(0, 6); // Trim to only the first 6 results.
+            if (fData.length <= 0) {
+                omnibox.classList.add("hidden");
+                input.classList.add("rounded-b-2xl");
+                return;
             }
-      if (value.length >= 3) {
-        const data = await client.fetch(`https://api.duckduckgo.com/ac?q=${encodeURIComponent(value)}&format=json`);
-        const dataRes = await data.json();
-        const filteredData = dataRes.slice(0, 8); //Trim to only about 8 results. Any more and our omnibox dies
-        if (filteredData) {
             omnibox.innerHTML = "";
-          filteredData.map((results: Suggestion) => {
-            let span = document.createElement("span");
-            let pTag = document.createElement("p");
+            fData.map((res: Suggestion) => {
+                const span = document.createElement("span") as HTMLSpanElement;
+                const p = document.createElement("p") as HTMLParagraphElement;
+                p.classList.add(
+                    "cursor-pointer",
+                    "text-ellipsis",
+                    "text-center",
+                    "w-full",
+                    "overflow-hidden",
+                    "whitespace-nowrap"
+                );
+                p.innerText = res.phrase;
+
                 span.classList.add(
                     "cursor-pointer",
                     "font-roboto",
@@ -169,31 +195,23 @@ import { VERSION } from "astro:env/client";
                     "hover:bg-lighter",
                     "active:bg-primary"
                 );
-            span.addEventListener("click", function () {
-              //When the box is clicked, we want to fill the omnibox and hit enter. This allows us to re-use the existing event listener on the input.
-              const event = new KeyboardEvent("keypress", {
-                key: "Enter",
-                code: "Enter",
-                which: 13,
-                keyCode: 13,
-              });
-              input.value = results.phrase;
-              input.dispatchEvent(event);
-            });
-            pTag.classList.add(
-              "cursor-pointer",
-              "text-ellipsis",
-              "text-center",
-              "w-full",
-              "overflow-hidden",
-              "whitespace-nowrap"
+                span.addEventListener("click", () => {
+                    input.value = res.phrase;
+                    input.dispatchEvent(
+                        new KeyboardEvent("keypress", { key: "Enter", code: "Enter" })
                     );
-            pTag.innerText = results.phrase;
-            span.appendChild(pTag);
+                });
+                span.appendChild(p);
                 omnibox.appendChild(span);
             });
-        }
-      }
-    });
         }); 
+    }
+
+    new EventHandler({
+        events: {
+            "astro:page-load": init
+        },
+        logging: false
+    })
+    .bind();
 </script>

src/pages/[lang]/settings/credits.astro

@@ -1,9 +1,7 @@
 ---
-import InstalledThemes from "@components/catalog/InstalledThemes.svelte";
 import Layout from "@layouts/Layout.astro";
 import SettingsLayout from "@layouts/SettingsLayout.astro";
 import SettingsSection from "@layouts/SettingsSection.astro";
-import { Icon } from "astro-icon/components";
 import { getLangFromUrl, useTranslations } from "../../../i18n/utils";
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);

src/pages/[lang]/settings/misc.astro

@@ -32,72 +32,53 @@ const t = useTranslations(lang);
             both={{enabled: false}}
         />
         <SettingsCard
-            title="Proxy Catalog"
-            description="Whether or not to proxy the Catalog"
-            input={{input: false}}
-            button={{name: 'Set', id: 'setmp' }}
-            select={{
-                select: true,
-                name: 'mp',
-                options: [
-                    {name: 'False', value: 'false', disabled: false},
-                    {name: 'True', value: 'true', disabled: false}
-                ]
-                }}
-                both={{enabled: false}}
-            />
-        <SettingsCard
-            title="Catalog URL"
-            description="Change which marketplace your using"
-            input={{
-                input: true,
-                required: true,
-                placeholder: `${origin}/api/catalog-assets`
-            }}
-            button={{name: 'Change', id: 'setcataloghostname' }}
-            select={{select: false}}
-            both={{enabled: false}}
+            title="Reset instance"
+            description="Reset your instance if your having troubles or problems."
+            input={{ input: false }}
+            button={{ name: 'Reset', id: 'resetinstance' }}
+            select={{ select: false }}
+            both={{ enabled: false }}
         />
     </SettingsSection>
   </SettingsLayout>
-  <ToastWrapper client:load>
-    <Toast toastProp={{
-            toastType: 'success',
-            text: 'Catalog is now proxied',
-            class: 'mpMessage'
-        }}
-    client:load />
-    <Toast toastProp={{
-        toastType: 'success',
-        text: 'Catalog URL set!',
-        class: 'cataloghostnameSuccess'
-        }}
-    client:load />
-    <Toast toastProp={{
-        toastType: 'error',
-        text: "Catalog doesn't exist!",
-        class: 'cataloghosnameError'
-      }}
-    client:load/>
-  </ToastWrapper>
-<script>
-    import { toast } from "@utils/toast.ts";
-    import { settings, Settings as SettingsEnum } from "@utils/settings/index";
-    import { pageLoad } from "@utils/events";
+ <script>
+    import { EventHandler } from "@utils/events";
     import { navigate } from "astro:transitions/client";
-    function setup() {
-        const lang = JSON.parse(localStorage.getItem('selectedLanguage') as string) || JSON.parse('{"value": "en_US"}');
-        const languageVal = document.getElementById('lang') as HTMLSelectElement;
-        languageVal!.value = lang.value;
-    }
-    pageLoad(() => {
-        setup();
-        const languageChange = document.getElementById('setlang') as HTMLButtonElement;
-        const languageVal = document.getElementById('lang') as HTMLSelectElement;
-        languageChange?.addEventListener('click', () => {
-            const language = {value: languageVal.value}
-            localStorage.setItem("selectedLanguage", JSON.stringify(language));
-            navigate(`${window.location.origin}/${languageVal.value}/settings/misc`)
+    import { defaultStore } from "@utils/storage";
+    import { SettingsVals } from "@utils/values";
+    import { Elements } from "@utils/index";
+
+    const handler = async () => {
+        const els = Elements.select([
+            { type: 'id', val: 'lang' },
+            { type: 'id', val: 'setlang' },
+            { type: 'id', val: 'resetinstance' }
+        ]);
+        const lang = defaultStore.getVal(SettingsVals.i18n.lang);
+        const val = Elements.exists<HTMLSelectElement>(await els.next());
+        const button = Elements.exists<HTMLButtonElement>(await els.next());
+        val.value = lang || "en_US";
+        Elements.attachEvent(button, "click", () => {
+            defaultStore.setVal(SettingsVals.i18n.lang, val.value);
+            navigate(`${window.location.origin}/${val.value}/settings/misc`);
         });
+
+        const resetButton = Elements.exists<HTMLButtonElement>(await els.next());
+        Elements.attachEvent(resetButton, "click", async () => {
+            const t = await navigator.serviceWorker.getRegistrations();
+            t.map(async (reg) => {
+                await reg.unregister();
+            });
+            localStorage.clear();
+            window.location.href = "/";
+        });
+    }
+
+    new EventHandler({
+        events: {
+            "astro:page-load": handler
+        },
+        logging: false
     })
+    .bind();
 </script>

src/pages/[lang]/settings/pr.astro

@@ -34,7 +34,7 @@ import { MARKETPLACE_ENABLED } from "astro:env/client";
             options: [
               { name: "Automatic", value: "automatic", disabled: false },
               { name: "Ultraviolet", value: "uv", disabled: false },
-              { name: "Scramjet (COMING SOON)", value: "sj", disabled: true },
+              { name: "Scramjet (BETA)", value: "sj", disabled: false },
             ],
             }}
             both={{enabled: false}}
@@ -176,90 +176,92 @@ import { MARKETPLACE_ENABLED } from "astro:env/client";
   </ToastWrapper>
 </Layout>
 <script>
-  import { toast } from "@utils/toast.ts";
-  import { settings, Settings as SettingsEnum } from "@utils/settings/index";
-  import { pageLoad } from "@utils/events";
-  function setup(
-    proxySelectVal: HTMLSelectElement,
-      //openInVal: HTMLSelectElement,
-    searchEngineVal: HTMLSelectElement,
-    wispServerVal: HTMLSelectElement,
-      transportVal: HTMLSelectElement,
-      customUrl: HTMLInputElement
-  ) {
-    proxySelectVal.value = localStorage.getItem(
-      SettingsEnum.ProxySettings.proxy
-    ) as string;
-      //openInVal.value = localStorage.getItem(
-          //SettingsEnum.ProxySettings.openIn
-          //) as string;
-    searchEngineVal.value = localStorage.getItem(
-      SettingsEnum.ProxySettings.searchEngine
-    ) as string;
-    wispServerVal.value = localStorage.getItem(SettingsEnum.ProxySettings.wispServerURL) as string;
-    if (wispServerVal.value === "custom") {
-        customUrl.classList.remove("hidden");
-        customUrl.value = localStorage.getItem("customWispUrl") as string;
+  import { EventHandler } from "@utils/events";
+  import { Elements, toast } from "@utils/index";
+  import { defaultStore } from "@utils/storage";
+  import { SettingsVals } from "@utils/values";
+  import { Settings } from "@utils/settings";
+  import { setTransport, SW } from "@utils/serviceWorker";
+
+  const init = async (): Promise<AsyncGenerator> => {
+      return Elements.select([
+          { type: 'id', val: 'setproxy' },
+          { type: 'id', val: 'proxy' },
+          { type: 'id', val: 'setsearchengine' },
+          { type: 'id', val: 'searchengine' },
+          { type: 'id', val: 'setwispurl' },
+          { type: 'id', val: 'wispurl' },
+          { type: 'id', val: 'inputOnSelectValuecustom' },
+          { type: 'id', val: 'settransport' },
+          { type: 'id', val: 'transport' },
+      ]);
   }
-    transportVal.value = localStorage.getItem(
-      SettingsEnum.ProxySettings.transport
-    ) as string;
-  }
-  pageLoad(() => {
-    const proxyButton = document.getElementById("setproxy") as HTMLButtonElement;
-    const proxySelectVal = document.getElementById("proxy") as HTMLSelectElement;
-      //const openInButton = document.getElementById("setopenin") as HTMLButtonElement;
-      //const openInVal = document.getElementById("openin") as HTMLSelectElement;
-    const searchEngineButton = document.getElementById("setsearchengine") as HTMLButtonElement;
-    const searchEngineVal = document.getElementById("searchengine") as HTMLSelectElement;
-    const wispServerButton = document.getElementById("setwispurl") as HTMLButtonElement;
-    const wispServerVal = document.getElementById("wispurl") as HTMLSelectElement;
-    const transportButton = document.getElementById("settransport") as HTMLButtonElement;
-    const transportVal = document.getElementById("transport") as HTMLSelectElement;
-    const customWispUrl = document.getElementById("inputOnSelectValuecustom") as HTMLInputElement;
-    setup(
-      proxySelectVal,
-        //openInVal,
-      searchEngineVal,
-      wispServerVal,
-        transportVal,
-        customWispUrl
-    );
-    proxyButton.addEventListener("click", () => {
-      settings.proxySettings.changeProxy(proxySelectVal.value);
+
+  const handleProxy = async (vals: AsyncGenerator) => {
+      const button = Elements.exists<HTMLButtonElement>(await vals.next());
+      const selectEl = Elements.exists<HTMLSelectElement>(await vals.next());
+      selectEl.value = defaultStore.getVal(SettingsVals.proxy.proxy.key);
+      Elements.attachEvent(button, "click", () => {
+          Settings.proxy.change(selectEl.value as "uv" | "sj" | "automatic");
           toast(".proxyMessage");
       });
-      //openInButton.addEventListener("click", () => {
-          //  settings.proxySettings.openIn(openInVal.value);
-          //toast(".openInMessage");
-          //});
-    searchEngineButton.addEventListener("click", () => {
-      settings.proxySettings.setSearchEngine(searchEngineVal.value);
+  }
+
+  const handleSearchEngine = async (vals: AsyncGenerator) => {
+      const button = Elements.exists<HTMLButtonElement>(await vals.next());
+      const selectEl = Elements.exists<HTMLSelectElement>(await vals.next());
+      selectEl.value = defaultStore.getVal(SettingsVals.proxy.searchEngine);
+      Elements.attachEvent(button, "click", () => {
+          Settings.proxy.searchEngine(selectEl.value);
           toast(".searchEngineMessage");
       });
-    wispServerButton.addEventListener("click", () => {
-        if (wispServerVal.value === "custom") {
-            settings.proxySettings.setWispURL(wispServerVal.value);
-            if (customWispUrl.classList.contains('hidden')) {
-                customWispUrl.classList.remove("hidden");
-                customWispUrl.value = localStorage.getItem("customWispUrl") as string;
   }
-            else { 
-                localStorage.setItem("customWispUrl", customWispUrl.value);
+
+  const handleWispServers = async (vals: AsyncGenerator) => {
+
+      const handleCustom = async (c: HTMLInputElement, removeClass: boolean) => { 
+          if (!removeClass) return c.classList.add("hidden");
+          const sw = SW.getInstances().next().value as SW;
+          const { bareMuxConn } = await sw.getSWInfo();
+          c.classList.remove("hidden");
+          if (c.value === "") return c.value = defaultStore.getVal("customWispUrl");
+          defaultStore.setVal("customWispUrl", c.value);
+          await setTransport(bareMuxConn);
           toast(".wispUrlMessage");
       }
-        }
-        else {
-            if (!customWispUrl.classList.contains('hidden')) {
-                customWispUrl.classList.add("hidden");
-            }
-            settings.proxySettings.setWispURL(wispServerVal.value);
+    
+      const button = Elements.exists<HTMLButtonElement>(await vals.next());
+      const selectEl = Elements.exists<HTMLSelectElement>(await vals.next());
+      const custom = Elements.exists<HTMLInputElement>(await vals.next());
+      selectEl.value = defaultStore.getVal(SettingsVals.proxy.wispServer);
+      Elements.attachEvent(button, "click", () => {
+          Settings.proxy.wisp(selectEl.value);
+          selectEl.value === "custom" ? handleCustom(custom, true) : handleCustom(custom, false)
           toast(".wispUrlMessage");
-        }
       });
-    transportButton.addEventListener("click", () => {
-      settings.proxySettings.setTransport(transportVal.value);
+  };
+
+  const handleTransports = async (vals: AsyncGenerator) => {
+      const button = Elements.exists<HTMLButtonElement>(await vals.next());
+      const selectEl = Elements.exists<HTMLSelectElement>(await vals.next());
+      selectEl.value = defaultStore.getVal(SettingsVals.proxy.transport.key);
+      Elements.attachEvent(button, "click", () => {
+          Settings.proxy.transport(selectEl.value as "libcurl" | "epoxy");
           toast(".transportMessage");
       });
-  });
+  };
+
+  new EventHandler({
+      events: {
+          "astro:page-load": async () => {
+              const v = await init();
+              await handleProxy(v);
+              await handleSearchEngine(v);
+              await handleWispServers(v);
+              await  handleTransports(v);
+          }
+      },
+      logging: false
+  })
+  .bind();
 </script>

src/pages/[lang]/settings/tab.astro

@@ -1,7 +1,5 @@
 ---
 import SettingsCard from "@components/settings/SettingsCard.astro";
-import Toast from "@components/toasts/Toast.svelte";
-import ToastWrapper from "@components/toasts/ToastWrapper.svelte";
 import Layout from "@layouts/Layout.astro";
 import SettingsLayout from "@layouts/SettingsLayout.astro";
 import SettingsSection from "@layouts/SettingsSection.astro";
@@ -43,36 +41,55 @@ const t = useTranslations(lang);
         </div>
     </SettingsSection>
   </SettingsLayout> 
-  { /* The toast notifications :D */ }
-  <ToastWrapper client:load>
-    <Toast toastProp={{toastType: "success", text: "Successfully set cloak!", class: "cloakMessageSuccess"}} client:load />
-    <Toast toastProp={{toastType: "success", text: "Saved your option for next time! \n Opening in new tab...", class: "abCloakMessage"}} client:load />
-  </ToastWrapper>
 </Layout>
 
 <script>
-    import { toast } from "@utils/toast.ts"; //A helper function so we don't have to run this logic everytime.
-    import { settings, Settings as SettingsEnum } from "@utils/settings/index";
-    import { pageLoad } from "@utils/events";
-    function setup(cloakValue: HTMLSelectElement, abValue: HTMLSelectElement) {
-        const cloakLocal = localStorage.getItem(SettingsEnum.TabSettings.tabCloak);
-        const abCloakLocal = localStorage.getItem(SettingsEnum.TabSettings.abblob);
-        cloakLocal === "default" ? cloakValue.value = "reset" : cloakValue.value = cloakLocal as string;
-        abValue.value = abCloakLocal as string || 'a:b';
+    import { Elements } from "@utils/index";
+    import { EventHandler } from "@utils/events";
+    import { defaultStore } from "@utils/storage";
+    import { Settings } from "@utils/settings";
+    import { SettingsVals } from "@utils/values";
+
+    const init = async (): Promise<AsyncGenerator> => {
+        const vals = Elements.select([
+            { type: 'id', val: 'cloak' },
+            { type: 'id', val: 'cloakselect' },
+            { type: 'id', val: 'aboutblankbutton' },
+            { type: 'id', val: 'aboutblank' }
+        ]);
+        return vals;
     }
-    pageLoad(() => {
-        const cloakButton = document.getElementById("cloak") as HTMLButtonElement;
-        const cloakValue = document.getElementById("cloakselect") as HTMLSelectElement;
-        const abButton = document.getElementById("aboutblankbutton") as HTMLButtonElement;
-        const abValue = document.getElementById("aboutblank") as HTMLSelectElement;
-        setup(cloakValue, abValue);
-        cloakButton.addEventListener("click", () => {
-            settings.tabSettings.cloakTab(cloakValue.value);
-            toast('.cloakMessageSuccess');
+
+    const handleCloak = async (vals: AsyncGenerator) => { 
+        const button = Elements.exists<HTMLButtonElement>(await vals.next());
+        const val = Elements.exists<HTMLSelectElement>(await vals.next());
+        defaultStore.getVal(SettingsVals.tab.cloak) === "default" ? val.value = "reset" : val.value = defaultStore.getVal(SettingsVals.tab.cloak) || "reset";
+        // These have generics, but they can be inferred
+        Elements.attachEvent(button, "click", () => {
+            Settings.tab.cloak(val.value);
         });
-        abButton.addEventListener("click", () => {
-            toast('.abCloakMessage');
-            settings.tabSettings.abCloak(abValue.value);
+    };
+
+    const handleAB = async (vals: AsyncGenerator) => {
+        const button = Elements.exists<HTMLButtonElement>(await vals.next()); 
+        const val = Elements.exists<HTMLSelectElement>(await vals.next());
+        val.value = defaultStore.getVal(SettingsVals.tab.ab) || 'a:b';
+        Elements.attachEvent(button, "click", () => {
+            if (val.value === "a:b") return Settings.tab.ab("https://www.google.com");
+            Settings.tab.blob("https://www.google.com");
         });
+    }
+ 
+    new EventHandler({
+        events: {
+            "astro:page-load": async () => {
+                const v = await init();
+                await handleCloak(v);
+                await handleAB(v);
+            }
+        },
+        // Enable ONLY for debugging. Otherwise it will throw errors when we don't want them
+        logging: false 
     })
+    .bind();
 </script>

src/pages/index.astro

@@ -7,41 +7,48 @@ import Layout from "@layouts/Layout.astro";
     <Loading />
 </Layout>
 <script>
-  import { pageLoad } from "@utils/events";
-  pageLoad(() => {
-    let currentLang = localStorage.getItem("selectedLanguage");
-    const redirect = (loc: any) => (window.location.href = loc);
+    import { EventHandler } from "@utils/events";
+    import { defaultStore } from "@utils/storage";
+    import { SettingsVals } from "@utils/values";
+    import { navigate } from "astro:transitions/client";
+    const eHandler = new EventHandler({
+        events: {
+            "DOMContentLoaded": () => {
+                let currentLang = defaultStore.getVal(SettingsVals.i18n.lang);
                 if (currentLang) {
                     try {
-            let parsed = JSON.parse(currentLang).value;
-            switch (parsed) {
+                        switch (currentLang) {
                             case "en_US":
-                    redirect("/en_US/");
+                                navigate("/en_US/");
                                 break;
                             case "jp":
-                    redirect("/jp/");
+                                navigate("/jp/");
                                 break;
                             default:
-                redirect("/en_US/");
-                break;
+                                navigate("/en_US/");
                         }
-        } catch {
+                    } 
+                    catch {
                         localStorage.clear();
                         window.location.reload();
                     }
-        } else {
+                } 
+                else {
                     if (navigator.language.includes("ja")) {
-                localStorage.setItem("selectedLanguage", JSON.stringify({ value: "jp" }));
-                redirect("/jp/");
-            } else {
-                localStorage.setItem(
-                    "selectedLanguage",
-                    JSON.stringify({ value: "en_US" })
-                );
-                redirect("/en_US/");
+                        defaultStore.setVal("selectedLanguage", SettingsVals.i18n.languages.jp);
+                        navigate("/jp/");
+                    } 
+                    else {
+                        defaultStore.setVal("selectedLanguage", SettingsVals.i18n.languages.en);
+                        navigate("/en_US/");
                     }
                 }
+            }
+        },
+        logging: false
     });
+    //Bind the events.
+    eHandler.bind();
 </script>
 <noscript>
     JavaScript is required to run this app.

src/pages/loading.astro

@@ -7,7 +7,7 @@ import Layout from "@layouts/Layout.astro";
     <LoadingComponent />
 </Layout>
 <script>
-    import { pageLoad } from "@utils/events";
+    import { EventHandler } from "@utils/events";
     import { navigate } from "astro:transitions/client";
     function isComingFromIframe() {
         try {
@@ -17,11 +17,19 @@ import Layout from "@layouts/Layout.astro";
             return true;
         }
     }
-    pageLoad(() => {
+
+    const eHandle = new EventHandler({
+        events: {
+            "DOMContentLoaded": (() => {
                 const isIframe = isComingFromIframe();
                 if (!isIframe) {
-            console.log("Assuming request isn't coming from iFrame. Redirecting...");
-            navigate('/');
+                    console.log("Assuming request isn't coming from iframe. Redirecting...");
+                    //navigate("/");
                 }
+            }),
+        },
+        logging: false
     });
+    //Handle the events
+    eHandle.bind();
 </script>

src/store.js

@@ -1,3 +0,0 @@
-import { atom } from "nanostores";
-
-export const isMobileNavOpen = atom(false);

src/utils/events.ts

@@ -1,13 +1,54 @@
-function pageLoad(fn: () => void, logging?: boolean) {
-    document.addEventListener("astro:page-load", () => {
-        try {
-            fn();
-        } catch (err) {
-            if (logging) {
-                console.error(err);
-            }
-        }
-    });
+type Event = "astro:page-load" | "astro:before-swap" | "astro:after-swap" | "DOMContentLoaded";
+interface Events {
+    events: {
+        "astro:page-load"?: () => unknown; 
+        "astro:before-swap"?: () => unknown;
+        "astro:after-swap"?: () => unknown;
+        "DOMContentLoaded"?: () => unknown;
+    };
+    logging: boolean;
 }
 
-export { pageLoad };
+/**
+ * This class creates an event handler for us with optional logging
+ *
+ * @example
+ * const eventHandler = new EventHandler({
+ *     events: {
+ *         "astro:page-load": () => { console.log("After page load") },
+ *         "astro:before-swap": () => {},
+ *         "astro:after-swap": () => {},
+ *         "DOMContentLoaded": () => {}
+ *     }, // Pass any number of these : D (they are all optional)
+ *     logging: false // Set this to true to enable logging when things go wrong.
+ * });
+ *
+ * eventHandler.bind(); // Attaches every event you passed.
+ */
+class EventHandler {
+    #eventItems: Events;
+    constructor(items: Events) {
+        this.#eventItems = items;
+    }
+    #attachEvent(items: Events, eventType: Event, fn: () => unknown) {
+        if (items.logging) return document.addEventListener(eventType, async () => await fn());
+        document.addEventListener(eventType, async () => {
+            try {
+                await fn();
+            }
+            catch (_) {}
+        });
+    }
+    /**
+     * Binds the events you passed when creating the class to the document. If none are passed, an error is thrown.
+    */
+    bind(): void | Error {
+        const events = Object.entries(this.#eventItems.events);
+        if (!events || events.length === 0) throw new Error('No events added!');
+        events.map((event) => {
+            this.#attachEvent(this.#eventItems, event[0] as Event, event[1]);
+        });
+    }
+}
+
+export { EventHandler, type Events }

src/utils/index.ts

@@ -0,0 +1,187 @@
+type TType = "success" | "error" | "multiline";
+type ToastPosition = "top" 
+    | "top-start"
+    | "top-end"
+    | "center"
+    | "center-start"
+    | "center-end"
+    | "bottom"
+    | "bottom-start"
+    | "bottom-end";
+
+interface Props {
+    TType: TType;
+    text: string;
+    class: string;
+    id?: string;
+    duration?: number;
+    emoji?: any;
+    position?: ToastPosition;
+}
+
+/**
+    * This allows us to call our toast notifs.
+    *
+    * @example
+    * import { toast } from "@utils/index";
+    * toast(".toastMessage");
+*/
+function toast(query: string) {
+    const wrapper = document.getElementById("toastwrapper") as HTMLDivElement;
+    wrapper.classList.remove("hidden");
+    //this is a really hacky solution for toast notifications LOL
+    const element = document.querySelector(query) as HTMLElement;
+    //click the element
+    element.click();
+}
+
+type Items = {
+    type: "id" | "class" | "generic",
+    val: string 
+}
+
+type ElementDatasets = {
+    name: string,
+    val: string | undefined 
+}
+
+class Elements {
+    /** 
+        * An async generator function to get your objects quickly and easily.
+        *
+        * @example
+        * const items = selectElements(items: [{ type: "id", val: "iframe" }]);
+        * for await (const item of items) {
+            * console.log(item) // Perform some action on this item (OR pause and continue when needed!)
+        * }
+    */
+    static async *select(items: Items[]) {
+        for (const item in items) {
+            switch (items[item].type) {
+                case "id": 
+                    yield document.getElementById(items[item].val) as HTMLElement;
+                    break;
+                case "class":
+                    yield document.getElementsByClassName(items[item].val);
+                    break;
+                case "generic":
+                    yield document.getElementsByName(items[item].val);
+                    break;
+            }
+        }
+    };
+
+    static exists<RetType>(elem: any): RetType {
+        if (elem.value) return elem.value as RetType;
+        throw new Error(`Something is WRONG. The element doesn't exist!`);
+    }
+    
+    static attachEvent<Element extends HTMLElement, EType extends keyof HTMLElementEventMap>(item: Element, event: EType, fn: (event?: Event) => unknown) {
+        item.addEventListener(event, fn);
+    }
+
+    static createCustomElement(name: string, fn: (datasets?: ElementDatasets[]) => unknown, datasets?: Omit<ElementDatasets, "val">[]) {
+        class CustomEl extends HTMLElement {
+            dat: ElementDatasets[] = [];
+            constructor() {
+                super();
+                if (datasets) {
+                    datasets.forEach((data) => {
+                        this.dat.push({ name: data.name, val: this.dataset[data.name] });
+                    });
+                }
+                (async () => await fn(this.dat))();
+            }
+        }
+
+        if (customElements.get(name)) return log({ type: "error", bg: true, prefix: false, throw: false }, `An element with the name ${name} already exists! This WILL not work! And`);
+
+        log({ type: 'info', bg: false, prefix: true }, `Creating custom element with the name ${name}`);
+        customElements.define(name, CustomEl);
+    }
+}
+
+/**
+    * Allows use to turn a basic phrase into a full URL. Mainly used when ther user enters something in for use in UV/SJ
+    *
+    * @example
+    * import { search } from "@utils/index";
+    * search("YES", "https://www.google.com/search?q=%s");
+*/
+function search(input: string, template: string) {
+    try { return new URL(input).toString() } catch (_) {};
+
+    try {
+        const url = new URL(`http://${input}`);
+        if (url.hostname.includes(".")) return url.toString();
+    } catch (_) {};
+
+    return template.replace("%s", encodeURIComponent(input));
+}
+
+type LogOpts = { type: "normal" | "warn" | "info", bg: boolean, prefix: boolean } | { type: "error", bg: boolean, prefix: boolean, throw: boolean }
+/**
+    * Custom built log function with styles applied.
+    *
+    * @example
+    * import { log } from "@utils/index";
+    * log("info", opts: { bg: true, prefix: false }, message: "This is an example"); // BG can be true or false when BG is false, most of the time it reverts back to normal styling (except for the "normal" mode). When prefix is true, this adds a prefix of the type of message used.
+*/
+const log = (type: LogOpts, message: string): void => {
+    const styles = {
+        warn: {
+            bg: {
+                color: "#ffffff",
+                bg: "#cc3300"
+            },
+            normal: "#ffffff"
+        },
+        error: {
+            bg: {
+                color: "#ffffff",
+                bg: "#cc0000"
+            },
+            normal: "#ffffff"
+        },
+        info: {
+            bg: {
+                color: "#ffffff",
+                bg: "#088F8F"
+            },
+            normal: "#088F8F"
+        },
+        normal: {
+            bg: {
+                color: "#ffffff",
+                bg: "#7967dd"
+            },
+            normal: "#7967dd"
+        }
+    }
+    switch(type.type) {
+        case "info": 
+            console.info(`%c${type.prefix ? `Info: ${message}` : message}`, `${type.bg ? `color: ${styles.info.bg.color}; background-color: ${styles.info.bg.bg}; padding: 2px 10px; font-weight: bold;` : `color: ${styles.info.normal}; font-weight: bold;`}`);
+            break;
+        case "error":
+            if (type.throw) throw new Error(message);
+            console.error(`%c${type.prefix ? `Error: ${message}` : message }`, `${type.bg ? `color: ${styles.error.bg.color}; background-color: ${styles.error.bg.bg}; padding: 2px 10px;` : `color: ${styles.error.normal};`}`);
+            break;
+        case "warn": 
+            console.warn(`%c${type.prefix ? `Warning: ${message}` : message}`, `${type.bg ? `color: ${styles.warn.bg.color}; background-color: ${styles.warn.bg.bg}; padding: 2px 10px;` : `color: ${styles.warn.normal};`}`);
+            break;
+        case "normal": 
+            console.log(`%c${message}`, `${type.bg ? `color: ${styles.normal.bg.color}; background-color: ${styles.normal.bg.bg}; padding: 2px 10px; font-weight: bold;` : `color: ${styles.normal.normal}; font-weight: bold;`}`);
+            break;
+    }
+};
+
+
+export { 
+    type TType, 
+    type ToastPosition, 
+    type Props, 
+    toast,
+    search,
+    log,
+    Elements
+};

src/utils/marketplace.ts

@@ -0,0 +1,306 @@
+import { Elements, log } from "./index";
+import { StoreManager } from "./storage";
+import { SettingsVals } from "./values";
+
+type PluginType = "page" | "serviceWorker";
+type MarketplacePluginType = "plugin-page" | "plugin-sw";
+type PackageType = "theme" | MarketplacePluginType;
+
+interface Plug {
+    name: string;
+    src: string;
+    type: PluginType;
+    remove?: boolean;
+}
+interface SWPagePlugin extends Omit<Plug, "name" | "src"> {
+    host: string;
+    html: string;
+    injectTo: "head" | "body";
+}
+
+type SWPluginFunction<T extends unknown> = (args: T) => void | unknown;
+
+type Events =
+    | "abortpayment"
+    | "activate"
+    | "backgroundfetchabort"
+    | "backgroundfetchclick"
+    | "backgroundfetchfail"
+    | "backgroundfetchsuccess"
+    | "canmakepayment"
+    | "contentdelete"
+    | "cookiechange"
+    | "fetch"
+    | "install"
+    | "message"
+    | "messageerror"
+    | "notificationclick"
+    | "notificationclose"
+    | "paymentrequest"
+    | "periodicsync"
+    | "push"
+    | "pushsubscriptionchange"
+    | "sync";
+
+interface SWPlugin extends Omit<Plug, "src"> {
+    function: string | SWPluginFunction<any>;
+    events: Events[];
+}
+
+interface Theme {
+    name: string;
+    payload: string;
+    video?: string;
+    bgImage?: string;
+};
+
+/**
+    * A class where for all of the Marketplace handlers.
+    * It creates it's own StoreManager where all of it's values will live.
+    * And it has 2 static items. instances and getInstances.
+    *
+    * @example
+    * //Create a new Marketplace instance
+    * const mp = new Marketplace();
+    * //Use one of the very many methods available.
+    * 
+    * //Get all instances of a Marketplace is as easy as:
+    * // const mp = Marketplace.getInstances.next().value;
+    * // Consume and use the class.
+*/
+class Marketplace {
+    //create our own subsidized StoreManager with it's own prefix so the marketplace stuff NEVER touches the other data
+    #storage: StoreManager<"nebula||marketplace">;
+    static #instances = new Set();
+    constructor() {
+        this.#storage = new StoreManager("nebula||marketplace");
+        log({ type: 'info', bg: true, prefix: true }, 'Marketplace instance created and ready!');
+        Marketplace.#instances.add(this);
+    }
+    
+    /**
+        * A static method to aquire an instance of a marketplace object.
+        *
+        * @example
+        * //Get the first insatnce available. 
+        * const mp = Marketplace.getInstances.next().value
+        *
+        * @example
+        * // Iterate over every instance
+        * for (const instance of Marketplace.getInstances()) {
+            * // Do some work
+        * }
+    */
+    static *getInstances() {
+        //Marketplace.instances.forEach((val) => yield val);
+        for (const item of Marketplace.#instances.keys()) {
+            yield item! as Marketplace;
+        }
+    }
+
+    /**
+        * Detect if our Marketplace is ready or not. If it's not, don't resolve until it IS
+    */
+    static ready(): Promise<boolean> { 
+        return new Promise((resolve) => {
+            const t = setInterval(() => {
+                if (Marketplace.#instances.size !== 0) {
+                    clearInterval(t);
+                    resolve(true);
+                }
+            }, 100);
+        });
+    }
+
+    async getValueFromStore(val: string): Promise<string> {
+        return this.#storage.getVal(val);
+    }
+
+
+    async getThemes(name?: string): Promise<{themes: any, theme: string, exists: Boolean}> {
+        const themes = JSON.parse(this.#storage.getVal(SettingsVals.marketPlace.themes)) || [];
+        const theme = themes.find((t: any) => t === name);
+        const exists = themes.indexOf(name) !== -1;
+        return { themes, theme, exists };
+    } 
+
+    async getPlugins(pname?: string): Promise<{plugins: any, plug: any}> {
+        const plugins = JSON.parse(this.#storage.getVal(SettingsVals.marketPlace.plugins)) || [];
+        const plug = plugins.find(({ name } : { name: string }) => name === pname );
+        return { plugins, plug }
+    }
+    
+    /**
+        * Install a theme into both localstorage AND set the theme.
+        *
+        * @example
+        * const mp = new Marketplace() // OR get an instances from getInstances()
+        * mp.installTheme({
+            * name: "testTheme",
+            * payload: "/packages/testTheme/index.css",
+            * // video: if you have a bg video, pass it here.
+            * //bgImage: pass the BG image here if you have one
+        * });
+    */
+    async installTheme(theme: Omit<Theme, "payload">) {
+        const { themes, exists } = await this.getThemes(theme.name);
+        if (exists) return log({ type: 'error', bg: false, prefix: false, throw: true }, `${theme.name} is already installed!`)
+        themes.push(theme.name);
+        this.#storage.setVal(SettingsVals.marketPlace.themes, JSON.stringify(themes));
+    }
+
+    async installPlugin(plugin: Plug) {
+        let { plugins, plug } = await this.getPlugins(plugin.name);
+        if (plug && plug.remove) { plug.remove = false; console.log(plug); return this.#storage.setVal(SettingsVals.marketPlace.plugins, JSON.stringify(plugins)) };
+        plugins.push({ name: plugin.name, src: plugin.src, type: plugin.type } as unknown as Plug);
+        this.#storage.setVal(SettingsVals.marketPlace.plugins, JSON.stringify(plugins));
+    }
+
+    async uninstallTheme(theme: Omit<Theme, "payload" | "video" | "bgImage">) {
+        const { themes: items, exists } = await this.getThemes(theme.name);
+        if (!exists) return log({ type: 'error', bg: false, prefix: false, throw: true }, `Theme: ${theme.name} is not installed!`);
+        const idx = items.indexOf(theme.name);
+        items.splice(idx, 1);
+        this.#storage.setVal(SettingsVals.marketPlace.themes, JSON.stringify(items));
+    }
+
+    async uninstallPlugin(plug: Omit<Plug, "src">) {
+        let { plugins: items, plug: plugin } = await this.getPlugins(plug.name);
+
+        if (!plugin) return log({ type: 'error', bg: false, prefix: false, throw: true }, `Plugin: ${plug.name} is not installed!`);
+        plugin.remove = true;
+        this.#storage.setVal(SettingsVals.marketPlace.plugins, JSON.stringify(items));
+    }
+
+    async handlePlugins(worker: ServiceWorkerRegistration) {
+        let { plugins } = await this.getPlugins();
+
+        const pagePlugins: SWPagePlugin[] = [];
+        const swPlugins: SWPlugin[] = [];
+        if (plugins.length === 0) return log({ type: 'info', bg: false, prefix: true }, 'No plugins to add! Exiting.');
+        plugins.map(async (plugin: Plug) => {
+            if (plugin.type === "page") {
+                const script = await fetch(`/packages/${plugin.name}/${plugin.src}`);
+                const scriptRes = await script.text();
+                console.log(scriptRes);
+                const evaledScript = eval(scriptRes);
+                console.log(evaledScript);
+                const inject = (await evaledScript()) as unknown as SWPagePlugin;
+                if (!plugin.remove) {
+                    pagePlugins.push({
+                        host: inject.host,
+                        html: inject.html,
+                        injectTo: inject.injectTo,
+                        type: 'page'
+                    });
+                }
+                else {
+                    plugins = plugins.filter(({ name }: { name: string }) => name !== plugin.name);
+                    pagePlugins.push({
+                        remove: true,
+                        host: inject.host,
+                        html: inject.html,
+                        injectTo: inject.injectTo,
+                        type: 'page'
+                    });
+                }
+                worker.active?.postMessage(pagePlugins);
+            }
+            
+            if (plugin.type === "serviceWorker") {
+                const s = await fetch(`/packages/${plugin.name}/${plugin.src}`);
+                const sRes = await s.text();
+                const eScript = eval(sRes);
+                const inject = (await eScript()) as unknown as SWPlugin;
+                if (!plugin.remove) {
+                    swPlugins.push({
+                        function: inject.function.toString(),
+                        name: plugin.name,
+                        events: inject.events,
+                        type: 'serviceWorker'
+                    });
+                }
+                else {
+                    plugins = plugins.filter(({ name }: { name: string }) => name !== plugin.name);
+                    swPlugins.push({
+                        remove: true,
+                        function: inject.function.toString(),
+                        name: plugin.name,
+                        events: inject.events,
+                        type: 'serviceWorker'
+                    });
+                }
+                worker.active?.postMessage(swPlugins);
+            }
+            this.#storage.setVal(SettingsVals.marketPlace.plugins, JSON.stringify(plugins));
+        });
+    }
+    
+    async theme(opts: { type: 'normal', payload: string, sources?: { video?: string, bg?: string }, name: string } | { type: 'remove', payload?: string, sources?: { video?: string, bg?: string }, name?: string }) {
+        const elems = Elements.select([
+            { type: 'id', val: 'stylesheet' },
+            { type: 'id', val: 'nebulaVideo' },
+            { type: 'id', val: 'nebulaImage' }
+        ]);
+        const s = Elements.exists<HTMLLinkElement>(await elems.next());
+        const nv = Elements.exists<HTMLVideoElement>(await elems.next());
+        const ni = Elements.exists<HTMLImageElement>(await elems.next());
+        
+        const nvl = this.#storage.getVal(SettingsVals.marketPlace.appearance.video);
+        const nil = this.#storage.getVal(SettingsVals.marketPlace.appearance.image);
+        const tsp = this.#storage.getVal(SettingsVals.marketPlace.appearance.theme.payload);
+        const tsn = this.#storage.getVal(SettingsVals.marketPlace.appearance.theme.name);
+        
+        const reset = (style: boolean) => {
+            const st = this.#storage;
+            if (style) {
+                st.removeVal(SettingsVals.marketPlace.appearance.theme.name);
+                st.removeVal(SettingsVals.marketPlace.appearance.theme.payload);
+                s.href = "/nebula.css";
+            }
+            st.removeVal(SettingsVals.marketPlace.appearance.video);
+            nv.src = "";
+            st.removeVal(SettingsVals.marketPlace.appearance.image);
+            ni.style.display = "none";
+            ni.src = "";
+        }
+
+        if (opts.type === 'remove') return reset(true);
+        
+        if (opts.sources?.video || nvl) {
+            reset(false);
+            if (!nvl) this.#storage.setVal(SettingsVals.marketPlace.appearance.video, opts.sources?.video || nvl);
+            nv.src = `/packages/${opts.name}/${opts.sources?.video ? opts.sources.video : nvl}`
+        }
+        if (opts.sources?.bg || nil) {
+            reset(false);
+            if (!nil) this.#storage.setVal(SettingsVals.marketPlace.appearance.image, opts.sources?.bg || nil);
+            ni.style.display = "block";
+            ni.src = `/packages/${opts.name}/${opts.sources?.bg ? opts.sources.bg : nil}`
+        }
+
+        if (opts.payload) {
+           if (tsp !== opts.payload) {
+               this.#storage.setVal(SettingsVals.marketPlace.appearance.theme.payload, opts.payload);
+               this.#storage.setVal(SettingsVals.marketPlace.appearance.theme.name, opts.name);
+           }
+           s.href = `/packages/${opts.name}/${opts.payload}`;
+        }
+        else {
+            if (tsp) return s.href = `/packages/${tsn}/${tsp}`;
+        }
+    }
+}
+
+export { 
+    Marketplace,
+    type PluginType,
+    type MarketplacePluginType,
+    type PackageType,
+    type Plug, 
+    type SWPagePlugin,
+    type SWPluginFunction,
+    type Events,
+    type SWPlugin,
+    type Theme
+}

src/utils/marketplaceUserTypes.ts

@@ -1,4 +1,4 @@
-import { type SWPluginFunction as PluginFunction, type SWPagePlugin, type SWPlugin } from "./types";
+import { type SWPluginFunction as PluginFunction, type SWPagePlugin, type SWPlugin } from "./marketplace";
 
 interface PagePlugin extends Omit<SWPagePlugin, "type"> {}
 interface ServiceWorkerPlugin extends Omit<SWPlugin, "type"> {}

src/utils/registerSW.ts

@@ -1,86 +0,0 @@
-import { BareMuxConnection } from "@mercuryworkshop/bare-mux";
-import { Settings, WispServerURLS } from "./settings/index";
-
-let baremuxConn: BareMuxConnection;
-let swReg: ServiceWorkerRegistration;
-
-function loadProxyScripts() {
-    //wrap everything in a promise to avoid race conditions
-    return new Promise<BareMuxConnection>((resolve) => {
-        const conn = new BareMuxConnection("/baremux/worker.js");
-        if (typeof __uv$config !== "undefined") {
-            return resolve(conn);
-        }
-        const uvBundle = document.createElement("script");
-        uvBundle.src = "/uv/uv.bundle.js";
-        uvBundle.defer = true;
-        document.body.appendChild(uvBundle);
-        const uvConfig = document.createElement("script");
-        uvConfig.src = "/uv/uv.config.js";
-        uvConfig.defer = true;
-        document.body.appendChild(uvConfig);
-        const checkScript = setInterval(() => {
-            if (typeof __uv$config !== "undefined") {
-                clearInterval(checkScript);
-                resolve(conn);
-            }
-        }, 100);
-    });
-}
-
-function setTransport(conn: BareMuxConnection, transport?: string) {
-    //wrap in a promise so we don't register sw until a transport is set.
-    const wispServer = localStorage.getItem(Settings.ProxySettings.wispServerURL);
-    return new Promise<void>((resolve) => {
-        console.log(`Wisp server set: ${wispServer ? WispServerURLS[wispServer] : WispServerURLS.default}`)
-        switch (transport) {
-            case "epoxy":
-                conn.setTransport("/epoxy/index.mjs", [
-                    { wisp: wispServer ? WispServerURLS[wispServer] : WispServerURLS.default }
-                ]);
-                break;
-            case "libcurl":
-                conn.setTransport("/libcurl/index.mjs", [
-                    { wisp: wispServer ? WispServerURLS[wispServer] : WispServerURLS.default }
-                ]);
-                break;
-        }
-        resolve();
-    });
-}
-
-function initSw() {
-    //this is wrapped in a promise to mostly solve the bare-mux v1 problems
-    return new Promise<ServiceWorkerRegistration>((resolve) => {
-        if ("serviceWorker" in navigator) {
-            navigator.serviceWorker.ready.then(async (reg) => {
-                console.debug("Service worker ready!");
-                resolve(reg);
-            });
-            navigator.serviceWorker.register("/sw.js", { scope: "/" });
-        }
-    });
-}
-
-interface SWStuff {
-    sw: ServiceWorkerRegistration;
-    conn: BareMuxConnection;
-}
-
-function setSWStuff(stuff: SWStuff): Promise<void> {
-    return new Promise<void>((resolve) => {
-        swReg = stuff.sw;
-        baremuxConn = stuff.conn;
-        resolve();
-    });
-}
-
-function getSWStuff(): SWStuff {
-    const stuff: SWStuff = {
-        sw: swReg,
-        conn: baremuxConn
-    };
-    return stuff;
-}
-
-export { initSw, setTransport, loadProxyScripts, setSWStuff, getSWStuff };

src/utils/search.ts

@@ -1,27 +0,0 @@
-function search(input: string, template: string) {
-    try {
-        // input is a valid URL:
-        // eg: https://example.com, https://example.com/test?q=param
-        return new URL(input).toString();
-    } catch (err) {
-        // input was not a valid URL
-    }
-
-    try {
-        // input is a valid URL when http:// is added to the start:
-        // eg: example.com, https://example.com/test?q=param
-        const url = new URL(`http://${input}`);
-        // only if the hostname has a TLD/subdomain
-        if (url.hostname.includes(".")) return url.toString();
-    } catch (err) {
-        // input was not valid URL
-    }
-
-    // input may have been a valid URL, however the hostname was invalid
-
-    // Attempts to convert the input to a fully qualified URL have failed
-    // Treat the input as a search query
-    return template.replace("%s", encodeURIComponent(input));
-}
-
-export { search };

src/utils/serviceWorker.ts

@@ -0,0 +1,188 @@
+import { BareMuxConnection } from "@mercuryworkshop/bare-mux";
+import { defaultStore } from "./storage";
+import { SettingsVals, WispServers } from "./values";
+import { log } from "./index";
+
+/**
+    * Creates a script element and returns it for usage or more modification.
+    *
+    * @example
+    * const script = createScript("/scram/scramjet.controller.js", true);
+    * document.body.appendChild(script);
+*/
+const createScript = (src: string, defer?: boolean): HTMLScriptElement => {
+    const script = document.createElement('script') as HTMLScriptElement;
+    script.src = src;
+    if (defer) script.defer = defer;
+    return script;
+};
+
+/**
+    * A generator function to create and load our proxy scripts. Allows us to pause and continue when needed.
+    *
+    * @example
+    * const proxyScripts = createProxyScripts();
+    * if (proxyScripts.next().value) document.body.appendChild(proxyScripts.next().value)
+    * // We can now check to see if that script is there or not and then continue after.
+*/
+function* createProxyScripts() {
+    const uv = createScript("/uv/uv.bundle.js", true);
+    yield uv;
+    const uvConfig = createScript("/uv/uv.config.js", true);
+    yield uvConfig;
+    const sj = createScript("/scram/scramjet.controller.js", true);
+    yield sj;
+};
+
+/**
+    * Function that resolves ONLY when uv and Scramjet are not undefined. This prevents us from using these values before they are added and executed.
+    *
+    * @example
+    * await checkProxyScripts();
+    * @example 
+    * checkProxyScripts().then(() => { // Do something });
+*/
+const checkProxyScripts = (): Promise<void> => {
+    return new Promise((resolve) => {
+        const checkScript = setInterval(() => {
+            if (typeof __uv$config !== "undefined" && typeof ScramjetController !== "undefined") {
+                clearInterval(checkScript);
+                resolve();
+            }
+        }, 100);
+    });
+};
+
+/** 
+    * Creates a bareMux connection an returns it the instantiated instance as a promise.
+    *
+    * @example
+    * const conn = createBareMuxConn("/baremux/worker.js");
+*/
+const createBareMuxConn = (worker: string): Promise<BareMuxConnection> => {
+    return new Promise<BareMuxConnection>((resolve) => {
+        const conn = new BareMuxConnection(worker);
+        resolve(conn);
+    });
+};
+
+/**
+    * Sets a transport via an already active BareMux connection. The options are libcurl or epoxy and returns a void promise.
+    *
+    *
+    * @example 
+    * const conn = createBareMuxConn("/baremux/worker.js");
+    * setTransport(conn, "libcurl");
+*/
+const setTransport = (conn: BareMuxConnection,  transport?: "libcurl" | "epoxy"): Promise<void> => {
+    const server = defaultStore.getVal(SettingsVals.proxy.wispServer); 
+    return new Promise((resolve) => {
+        log({ type: 'info', bg: false, prefix: false }, `Set transport: ${transport ? transport : "libcurl"}`);
+        log({ type: 'info', bg: false, prefix: false }, `Set wisp server at: ${server ? WispServers[server]: WispServers.default }`);
+        if (transport === "epoxy") return resolve(conn.setTransport("/epoxy/index.mjs", [ { wisp: server ? WispServers[server] : WispServers.default }]));
+        if (transport === "libcurl") return resolve(conn.setTransport("/libcurl/index.mjs", [ { wisp: server ? WispServers[server] : WispServers.default }]));
+    });
+};
+
+type SWInit = {
+    serviceWorker: ServiceWorkerRegistration;
+    sj: ScramjetController;
+    bareMuxConn: BareMuxConnection;
+}
+
+/**
+    * This class automatically sets up and registers our service worker.
+    *
+    * @example
+    * const sw = new SW();
+    * sw.getSWInfo() // Returns an object with the service worker, scramjet controller instance and the baremux connection all in one method
+    * sw.setSWInfo() // Allows one to override the info returned from getSWInfo() should be used sparingly or never.
+*/
+class SW {
+    #init!: SWInit;
+    #ready: boolean = false;
+    static #instances = new Set();
+    constructor(conn: BareMuxConnection) {
+        SW.#instances.add(this);
+        const sj = (): ScramjetController => {
+            const sj = new ScramjetController({
+                prefix: '/~/scramjet',
+                files: {
+                    wasm: "/scram/scramjet.wasm.js",
+                    worker: "/scram/scramjet.worker.js",
+                    client: "/scram/scramjet.client.js",
+                    shared: "/scram/scramjet.shared.js",
+                    sync: "/scram/scramjet.sync.js"
+                },
+                flags: {
+                    rewriterLogs: false
+                }
+            });
+            return sj;
+        }
+        if ("serviceWorker" in navigator) {
+            (async () => { await navigator.serviceWorker.getRegistrations() })();
+            const scram = sj();
+            (async () => await scram.init())();
+            navigator.serviceWorker.ready.then(async (reg) => {
+                log({ type: 'info', prefix: true, bg: false }, 'ServiceWorker ready and active!');
+                this.#init = { serviceWorker: reg, sj: scram, bareMuxConn: conn };
+                this.#ready = true;
+            });
+            navigator.serviceWorker.register("/sw.js", { scope: '/' });
+        }
+        else {
+            throw new Error('Your browser is not supported! This website uses Service Workers heavily.');
+        }
+    }
+
+    /**
+        * Static method to get an already existing SW class
+        *
+        *
+        * @example
+        * SW.getInstances.next().value // Get the first instance.
+        *
+        * @example 
+        * // Loop through every instance
+        * for (const sw of SW.getInstances()) {
+            * console.log(sw) // DO some real work
+        * }
+    */
+    static *getInstances() {
+        for (const value of SW.#instances.keys()) {
+            yield value as SW;
+        }
+    }
+    /**
+        * Allows you to overrid the items set. Should be used sparingly or never.
+    */
+    setSWInfo(items: SWInit): void {
+        this.#init = { serviceWorker: items.serviceWorker, sj: items.sj, bareMuxConn: items.bareMuxConn };
+        this.#ready = true;
+    }
+    
+    /**
+        * Returns a promise that resolves to the serviceWorker, scramjet controller and bareMux Connection ONLY when these values are ready.
+        *
+        * @example
+        * const sw = new SW(conn); // "conn" must be a baremux connection that you created.
+        * const swInfo = await sw.getSWInfo();
+        *
+        * @example
+        * const sw = new SW(conn); // "conn" must be a baremux connection that you created
+        * sw.getInfo().then((info) => { // Do something with said info }
+    */
+    getSWInfo(): Promise<SWInit> {
+        return new Promise((resolve) => {
+            const checkState = setInterval(() => {
+                if (this.#ready) {
+                    clearInterval(checkState);
+                    resolve(this.#init);
+                }
+            }, 100);
+        });
+    }
+}
+
+export { createScript, createProxyScripts, checkProxyScripts, createBareMuxConn, setTransport, SW }; 

src/utils/settings.ts

@@ -0,0 +1,109 @@
+import { defaultStore } from "./storage";
+import { SettingsVals, WispServers } from "./values";
+import { Marketplace } from "./marketplace";
+import { setTransport, SW } from "./serviceWorker";
+
+const tab = {
+    ab: (redirect: string) => {
+        window.location.replace(redirect);
+        const win = window.open();
+        const iframe = win!.document.createElement("iframe") as HTMLIFrameElement;
+        win!.document.body.setAttribute('style', 'margin: 0; height: 100vh; width: 100%;');
+        iframe.setAttribute('style', 'border: none; width: 100%; height: 100%; margin: 0;');
+        iframe.src = window.location.href;
+        win!.document.body.appendChild(iframe);
+    },
+    blob: (redirect: string) => {
+        const content = `
+            <!DOCTYPE html>
+            <html>
+                <head>
+                    <style type="text/css">
+                        body, html {
+                            margin: 0;
+                            padding: 0;
+                            height: 100%;
+                            width: 100%;
+                            overflow: hidden;
+                        }
+                    </style>
+                </head>
+                <body>
+                    <iframe style="border: none; width: 100%; height: 100%;" src="${window.location.href}"></iframe>
+                </body>
+            </html>
+        `;
+        window.location.replace(redirect);
+        const blob = new Blob([content], { type: 'text/html' });
+        window.open(URL.createObjectURL(blob), "_blank");
+    },
+    cloak: (cloak: string) => {
+        const fElem = document.getElementById("favicon")! as HTMLLinkElement;
+        const c = (title: string, href: string) => {
+            document.title = title;
+            fElem.href = href;
+        }
+        switch(cloak) {
+            case "google": {
+                c("Google", "/cloaks/google.png");
+                break;
+            }
+            case "wikipedia": {
+                c("Wikipedia", "/cloaks/wikipedia.ico");
+                break;
+            }
+            case "canvas": {
+                c("Dashboard", "/cloaks/canvas.ico");
+                break;
+            }
+            case "classroom": {
+                c("Home", "/cloaks/classroom.ico");
+                break;
+            }
+            case "powerschool": {
+                c("PowerSchool", "/cloaks/ps.ico");
+                break;
+            }
+            case "reset": {
+                defaultStore.setVal(SettingsVals.tab.cloak, "default");
+                window.location.reload();
+            }
+            default: {
+                return;
+            }
+        }
+    }
+}
+
+const proxy = {
+    change: (proxy: "uv" | "sj" | "automatic") => {
+        defaultStore.setVal(SettingsVals.proxy.proxy.key, proxy);
+    },
+    searchEngine: (s: string) => {
+        defaultStore.setVal(SettingsVals.proxy.searchEngine, s);
+    },
+    wisp: (s: string) => {
+        defaultStore.setVal(SettingsVals.proxy.wispServer, s);
+    },
+    transport: async (t: "libcurl" | "epoxy") => {
+        const sw = SW.getInstances().next().value!;
+        const { bareMuxConn } = await sw.getSWInfo();
+        await setTransport(bareMuxConn, t as "libcurl" | "epoxy");
+        defaultStore.setVal(SettingsVals.proxy.transport.key, t);
+    }
+}
+
+async function* initDefaults() {
+    yield proxy.change(defaultStore.getVal(SettingsVals.proxy.proxy.key) ? defaultStore.getVal(SettingsVals.proxy.proxy.key) as "uv" | "sj" | "automatic" : "automatic");
+    yield proxy.wisp(defaultStore.getVal(SettingsVals.proxy.wispServer) ? defaultStore.getVal(SettingsVals.proxy.wispServer) : "default");
+    yield proxy.transport(defaultStore.getVal(SettingsVals.proxy.transport.key) ? defaultStore.getVal(SettingsVals.proxy.transport.key) as "libcurl" | "epoxy" : "libcurl");
+    yield proxy.searchEngine(defaultStore.getVal(SettingsVals.proxy.searchEngine) ? defaultStore.getVal(SettingsVals.proxy.searchEngine) : "ddg");
+}
+
+const Settings = {
+    tab,
+    proxy,
+    initDefaults
+}
+
+export { Settings };

src/utils/settings/index.ts

@@ -1,54 +0,0 @@
-//Combine all of the other settings into one object. And export that (along with types and other things)
-import {
-    AppearanceSettings,
-    MarketPlaceExtras,
-    PluginSettings,
-    marketPlaceSettings
-} from "./marketplace/index";
-import { ProxySettings, proxySettings } from "./proxy";
-import { TabSettings, cloak, tabSettings } from "./tab";
-import {
-    type AbCloaks,
-    type OpenIn,
-    type Package,
-    type PackageType,
-    type Proxy,
-    type SearchEngine,
-    SearchEngines,
-    type TabCloaks,
-    type Transport,
-    WispServerURLS,
-    wispUrl
-} from "./types";
-
-const Settings = {
-    AppearanceSettings,
-    TabSettings,
-    ProxySettings,
-    MarketPlaceExtras,
-    PluginSettings
-};
-
-const settings = {
-    marketPlaceSettings,
-    tabSettings,
-    proxySettings
-};
-
-//export all of the stuffs
-export {
-    Settings,
-    settings,
-    SearchEngines,
-    WispServerURLS,
-    wispUrl,
-    cloak,
-    type TabCloaks,
-    type AbCloaks,
-    type OpenIn,
-    type Proxy,
-    type Transport,
-    type PackageType,
-    type Package,
-    type SearchEngine
-};

src/utils/settings/marketplace/index.ts

@@ -1,224 +0,0 @@
-//marketplace code & handlers
-import { Settings } from "../index";
-import {
-    type Package,
-    type PackageType,
-    type Plugin,
-    type PluginType,
-    type SWPagePlugin,
-    type SWPlugin
-} from "../types";
-const AppearanceSettings = {
-    themes: "nebula||themes",
-    themeName: "nebula||themeName",
-    stylePayload: "nebula||stylepayload",
-    video: "nebula||video",
-    image: "nebula||image"
-};
-
-const PluginSettings = {
-    plugins: "nebula||plugins"
-};
-
-const MarketPlaceExtras = {
-    proxy: "nebula||marketplaceProxy",
-    hostname: "nebula||marketplaceHostname"
-};
-
-const marketPlaceSettings = {
-    install: function (p: Package, packageName: string, payload?: any) {
-        return new Promise<void>((resolve) => {
-            if (p.theme) {
-                let themes = localStorage.getItem(AppearanceSettings.themes) as any;
-                themes ? (themes = JSON.parse(themes)) : (themes = []);
-                if (!themes.find((theme: any) => theme === packageName)) {
-                    themes.push(packageName);
-                    localStorage.setItem(AppearanceSettings.themes, JSON.stringify(themes));
-                    this.changeTheme(false, payload, p.theme.video, p.theme.bgImage, packageName);
-                }
-                resolve();
-            }
-            if (p.plugin) {
-                let plugins = localStorage.getItem(PluginSettings.plugins) as any;
-                plugins ? (plugins = JSON.parse(plugins)) : (plugins = []);
-                //@ts-ignore
-                const plugin = plugins.find(({ name }) => name === packageName) as Plugin;
-                if (!plugin) {
-                    plugins.push({
-                        name: packageName,
-                        src: p.plugin.src,
-                        type: p.plugin.type
-                    } as unknown as Plugin);
-                    localStorage.setItem(PluginSettings.plugins, JSON.stringify(plugins));
-                } else if (plugin && plugin.remove) {
-                    plugin.remove = false;
-                    localStorage.setItem(Settings.PluginSettings.plugins, JSON.stringify(plugins));
-                }
-                resolve();
-            }
-        });
-    },
-    uninstall: function (p: PackageType, packageName: string) {
-        console.log(p);
-        return new Promise<void>((resolve) => {
-            if (p === "theme") {
-                let items = localStorage.getItem(AppearanceSettings.themes) as any;
-                items ? (items = JSON.parse(items)) : (items = []);
-                if (items.find((theme: any) => theme === packageName)) {
-                    const idx = items.indexOf(packageName.toLowerCase());
-                    items.splice(idx, 1);
-                    localStorage.setItem(AppearanceSettings.themes, JSON.stringify(items));
-                    this.changeTheme(true);
-                }
-                resolve();
-            }
-            if (p === "plugin-page" || p === "plugin-sw") {
-                let plugins = localStorage.getItem(PluginSettings.plugins) as any;
-                plugins ? (plugins = JSON.parse(plugins)) : (plugins = []);
-                //@ts-ignore
-                const plugin = plugins.find(({ name }) => name === packageName.toLowerCase());
-                if (plugin) {
-                    plugin.remove = true;
-                    localStorage.setItem(PluginSettings.plugins, JSON.stringify(plugins));
-                }
-                resolve();
-            }
-        });
-    },
-    handlePlugins: function (worker: never | ServiceWorkerRegistration) {
-        return new Promise<void>((resolve) => {
-            let plugins =
-                JSON.parse(localStorage.getItem(Settings.PluginSettings.plugins) as string) || [];
-            const swPagePlugins: SWPagePlugin[] = [];
-            const swPlugins: SWPlugin[] = [];
-            if (plugins.length === 0) {
-                console.log("Plugin length is not greater then 0. Resolving.");
-                return resolve();
-            }
-            plugins.forEach(async (plugin: Plugin) => {
-                if (plugin.type === "page") {
-                    const pluginScript = await fetch(
-                        `/packages/${plugin.name.toLowerCase()}/${plugin.src}`
-                    ).then((res) => res.text());
-                    const script = eval(pluginScript);
-                    const inject = (await script()) as unknown as SWPagePlugin;
-                    if (plugin.remove) {
-                        plugins = plugins.filter(
-                            //@ts-ignore freaking types BRO
-                            ({ name }) => name !== plugin.name.toLowerCase()
-                        );
-                        swPagePlugins.push({
-                            remove: true,
-                            host: inject.host,
-                            html: inject.html,
-                            injectTo: inject.injectTo,
-                            type: "page"
-                        });
-                    } else {
-                        swPagePlugins.push({
-                            host: inject.host,
-                            html: inject.html,
-                            injectTo: inject.injectTo,
-                            type: "page"
-                        });
-                    }
-                    //only resolve AFTER we have postMessaged to the SW.
-                    worker.active?.postMessage(swPagePlugins);
-                } else if (plugin.type === "serviceWorker") {
-                    const pluginScript = await fetch(
-                        `/packages/${plugin.name.toLowerCase()}/${plugin.src}`
-                    ).then((res) => res.text());
-                    const script = eval(pluginScript);
-                    const inject = (await script()) as unknown as SWPlugin;
-                    if (plugin.remove) {
-                        plugins = plugins.filter(
-                            //@ts-ignore
-                            ({ name }) => name !== plugin.name.toLowerCase()
-                        );
-                        swPlugins.push({
-                            remove: true,
-                            function: inject.function.toString(),
-                            name: plugin.name,
-                            events: inject.events,
-                            type: "serviceWorker"
-                        });
-                    } else {
-                        swPlugins.push({
-                            function: inject.function.toString(),
-                            name: plugin.name,
-                            events: inject.events,
-                            type: "serviceWorker"
-                        });
-                    }
-                    worker.active?.postMessage(swPlugins);
-                }
-                localStorage.setItem(Settings.PluginSettings.plugins, JSON.stringify(plugins));
-                resolve();
-            });
-        });
-    },
-    changeTheme: async function (
-        reset: Boolean,
-        payload?: any,
-        videoSource?: string,
-        bgSource?: string,
-        name?: string
-    ) {
-        async function resetCSS() {
-            const stylesheet = document.getElementById("stylesheet")! as HTMLLinkElement;
-            localStorage.removeItem(AppearanceSettings.stylePayload);
-            localStorage.removeItem(AppearanceSettings.themeName);
-            stylesheet.href = "/nebula.css";
-        }
-        function resetVideo() {
-            localStorage.removeItem(AppearanceSettings.video);
-            const source = document.getElementById("nebulaVideo")! as HTMLVideoElement;
-            source.src = "";
-        }
-        function resetBGImage() {
-            localStorage.removeItem(AppearanceSettings.image);
-            const image = document.getElementById("nebulaImage")! as HTMLImageElement;
-            image.style.display = "none";
-            image.src = "";
-        }
-        if (reset === true) {
-            await resetCSS();
-            resetBGImage();
-            resetVideo();
-        }
-        if (videoSource || localStorage.getItem(AppearanceSettings.video)) {
-            resetBGImage();
-            resetVideo();
-            const source = document.getElementById("nebulaVideo")! as HTMLVideoElement;
-            if (!localStorage.getItem(AppearanceSettings.video)) {
-                localStorage.setItem(AppearanceSettings.video, videoSource as string);
-            }
-            source.src = `/packages/${name}/${videoSource ? videoSource : localStorage.getItem(AppearanceSettings.video)}`;
-        }
-        if (bgSource || localStorage.getItem(AppearanceSettings.image)) {
-            resetVideo();
-            resetBGImage();
-            const image = document.getElementById("nebulaImage")! as HTMLImageElement;
-            if (!localStorage.getItem(AppearanceSettings.image)) {
-                localStorage.setItem(AppearanceSettings.image, bgSource as string);
-            }
-            image.style.display = "block";
-            image.src = `/packages/${name}/${bgSource ? bgSource : localStorage.getItem(AppearanceSettings.image)}`;
-        }
-        if (payload) {
-            const stylesheet = document.getElementById("stylesheet")! as HTMLLinkElement;
-            if (localStorage.getItem(AppearanceSettings.stylePayload) !== payload) {
-                localStorage.setItem(AppearanceSettings.stylePayload, payload);
-                localStorage.setItem(AppearanceSettings.themeName, name as string);
-            }
-            stylesheet.href = `/packages/${name}/${localStorage.getItem(AppearanceSettings.stylePayload)}`;
-        } else {
-            if (localStorage.getItem(AppearanceSettings.stylePayload)) {
-                const stylesheet = document.getElementById("stylesheet")! as HTMLLinkElement;
-                stylesheet.href = `/packages/${localStorage.getItem(AppearanceSettings.themeName)}/${localStorage.getItem(AppearanceSettings.stylePayload)}`;
-            }
-        }
-    }
-};
-
-export { AppearanceSettings, PluginSettings, MarketPlaceExtras, marketPlaceSettings };

src/utils/settings/marketplace/types.ts

@@ -1,65 +0,0 @@
-//Where all of our types live. Expect to see these exported and used in other files tons.
-type PluginType = "page" | "serviceWorker";
-type MarketplacePluginType = "plugin-page" | "plugin-sw";
-type PackageType = "theme" | MarketplacePluginType;
-
-interface Plug {
-    name: string;
-    src: string;
-    type: PluginType;
-    remove?: boolean;
-}
-interface SWPagePlugin extends Omit<Plug, "name" | "src"> {
-    host: string;
-    html: string;
-    injectTo: "head" | "body";
-}
-
-type SWPluginFunction<T extends unknown> = (args: T) => void | unknown;
-
-type Events =
-    | "abortpayment"
-    | "activate"
-    | "backgroundfetchabort"
-    | "backgroundfetchclick"
-    | "backgroundfetchfail"
-    | "backgroundfetchsuccess"
-    | "canmakepayment"
-    | "contentdelete"
-    | "cookiechange"
-    | "fetch"
-    | "install"
-    | "message"
-    | "messageerror"
-    | "notificationclick"
-    | "notificationclose"
-    | "paymentrequest"
-    | "periodicsync"
-    | "push"
-    | "pushsubscriptionchange"
-    | "sync";
-
-interface SWPlugin extends Omit<Plug, "src"> {
-    function: string | SWPluginFunction<any>;
-    events: Events[];
-}
-
-interface Package {
-    theme?: {
-        payload: string;
-        video?: string;
-        bgImage?: string;
-    };
-    plugin?: Plug;
-}
-
-export {
-    type PluginType,
-    type MarketplacePluginType,
-    type PackageType,
-    type Plug as Plugin,
-    type SWPagePlugin,
-    type SWPlugin,
-    type Package,
-    type SWPluginFunction
-};

src/utils/settings/proxy.ts

@@ -1,29 +0,0 @@
-//Proxy specific settings.
-import { type OpenIn, type Proxy, type SearchEngine, type Transport } from "./types";
-const ProxySettings = {
-    proxy: "nebula||proxy",
-    openIn: "nebula||open",
-    searchEngine: "nebula||searchEngine",
-    wispServerURL: "nebula||wisp",
-    transport: "nebula||transport"
-};
-
-const proxySettings = {
-    changeProxy: function (proxy: Proxy | string) {
-        localStorage.setItem(ProxySettings.proxy, proxy);
-    },
-    openIn: function (type: OpenIn | string) {
-        localStorage.setItem(ProxySettings.openIn, type);
-    },
-    setSearchEngine: function (searchEngine: SearchEngine | string) {
-        localStorage.setItem(ProxySettings.searchEngine, searchEngine);
-    },
-    setWispURL: function (server: string) {
-        localStorage.setItem(ProxySettings.wispServerURL, server);
-    },
-    setTransport: function (transport: Transport | string) {
-        localStorage.setItem(ProxySettings.transport, transport);
-    }
-};
-
-export { ProxySettings, proxySettings };

src/utils/settings/tab.ts

@@ -1,83 +0,0 @@
-//Tab specific settings.
-import { type AbCloaks, type TabCloaks } from "./types";
-const TabSettings = {
-    tabCloak: "nebula||tabCloak",
-    abblob: "nebula||abBlob"
-};
-
-function cloak(cloak: AbCloaks | string, redirect: string, url: string) {
-    switch (cloak) {
-        case "a:b":
-            window.location.replace(redirect);
-            const win = window.open();
-            win!.document.body.style.margin = "0";
-            win!.document.body.style.height = "100vh";
-            const iframe = win!.document.createElement("iframe");
-            iframe.style.border = "none";
-            iframe.style.width = "100%";
-            iframe.style.height = "100%";
-            iframe.style.margin = "0";
-            iframe.src = url;
-            win!.document.body.appendChild(iframe);
-            break;
-        case "blob":
-            const htmlContent = `
-                <!DOCTYPE html>
-                <html>
-                <head>
-                <style type="text/css">
-                body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; }
-                </style>
-                </head>
-                <body>
-                <iframe style="border: none; width: 100%; height: 100vh;" src="${window.location.href}"></iframe>
-                </body>
-                </html>
-            `;
-            window.location.replace("https://google.com");
-            const blob = new Blob([htmlContent], { type: "text/html" });
-            const blobURL = URL.createObjectURL(blob);
-            window.open(blobURL, "_blank");
-            break;
-    }
-}
-
-const tabSettings = {
-    cloakTab: function (cloak: TabCloaks | string) {
-        const faviconElement = document.getElementById("favicon") as HTMLLinkElement;
-        localStorage.setItem(TabSettings.tabCloak, cloak);
-        switch (cloak) {
-            case "google":
-                document.title = "Google";
-                faviconElement.href = "/cloaks/google.png";
-                break;
-            case "wikipedia":
-                document.title = "Wikipedia";
-                faviconElement.href = "/cloaks/wikipedia.ico";
-                break;
-            case "canvas":
-                document.title = "Dashboard";
-                faviconElement.href = "/cloaks/canvas.ico";
-                break;
-            case "classroom":
-                document.title = "Home";
-                faviconElement.href = "/cloaks/classroom.png";
-                break;
-            case "powerschool":
-                document.title = "PowerSchool";
-                faviconElement.href = "/cloaks/ps.ico";
-                break;
-            case "reset":
-                //force a reset of favicon & title
-                localStorage.setItem("nebula||tabCloak", "default");
-                window.location.reload();
-            default:
-                return;
-        }
-    },
-    abCloak: function (type: AbCloaks | string) {
-        localStorage.setItem(TabSettings.abblob, type);
-        cloak(type as AbCloaks, "https://google.com", window.location.href);
-    }
-};
-export { tabSettings, TabSettings, cloak };

src/utils/settings/types.ts

@@ -1,43 +0,0 @@
-import {
-    type Package,
-    type PackageType,
-    type Plugin,
-    type PluginType,
-    type SWPagePlugin,
-    type SWPlugin
-} from "./marketplace/types";
-const wispUrl = (location.protocol === "https:" ? "wss://" : "ws://") + location.host + "/wisp/";
-type TabCloaks = "default" | "google" | "wikipedia" | "canvas" | "classroom" | "powerschool";
-type AbCloaks = "a:b" | "blob";
-type OpenIn = "a:b" | "blob" | "direct" | "embed";
-type Proxy = "automatic" | "uv" | "rh";
-type Transport = "epoxy" | "libcurl";
-const SearchEngines: Record<string, string> = {
-    ddg: "https://duckduckgo.com/?q=%s",
-    google: "https://google.com/search?q=%s",
-    bing: "https://bing.com/search?q=%s"
-};
-type SearchEngine = "ddg" | "google" | "bing";
-const WispServerURLS: Record<string, string> = {
-    default: wispUrl,
-    ruby: "wss://ruby.rubynetwork.co/wisp/",
-    custom: localStorage.getItem("customWispUrl") as string
-};
-
-export {
-    type TabCloaks,
-    type AbCloaks,
-    type OpenIn,
-    type Proxy,
-    type Transport,
-    type PackageType,
-    type Package,
-    type PluginType,
-    type Plugin,
-    type SWPagePlugin,
-    type SWPlugin,
-    SearchEngines,
-    type SearchEngine,
-    WispServerURLS,
-    wispUrl
-};

src/utils/siteSupport.ts

@@ -1,13 +0,0 @@
-import type { Proxy } from "./settings";
-type ProxyChoices = Exclude<Proxy, "automatic">;
-
-const SupportedSites: Record<string, ProxyChoices> = {
-    "discord.gg": "uv",
-    "discord.com": "uv",
-    "spotify.com": "uv",
-    "spotify.link": "uv",
-    "youtube.com": "uv",
-    "youtu.be": "uv"
-};
-
-export { SupportedSites };

src/utils/storage.ts

@@ -0,0 +1,40 @@
+import { log } from "./index";
+/**
+    * This class will create a new StoreManager with an appended prefix to it. The generic is there to tell you what that prefix ***is***
+    *
+    * **Note: there is already a defaultStore available! In most situations, you'll want to use that.**
+    *
+    * <code> 
+    * const newStore = new StoreManager("incog");
+    * 
+    * // Appends the prefix to the key passed. (EX: "incog||test")
+    * // Will return a string.
+    * newStore.getVal("test") 
+    * 
+    * // As stated above the prefix will automatically be appended to the key param (EX: "incog||test")
+    * newStore.setVal("test", "newVal");
+    * </code>
+*/
+class StoreManager<Prefix extends string /* This is here so I know what prefix is appended. It's inferred from the constructor */> {
+    #prefix: Prefix;
+    constructor(pref: Prefix) {
+        this.#prefix = pref;
+    }  
+    getVal(key: string): string {
+        log({ type: 'info', bg: true, prefix: true }, `Getting key: ${key} \nFull key: ${this.#prefix}||${key}`);
+        return localStorage.getItem(`${this.#prefix}||${key}`) as string;
+    }
+    setVal(key: string, val: string): void {
+        log({ type: 'info', bg: false, prefix: true }, `Setting ${key} with value: ${val}`);
+        localStorage.setItem(`${this.#prefix}||${key}`, val);
+    }
+    removeVal(key: string): void {
+        log({ type: 'info', bg: true, prefix: true }, `Removing ${this.#prefix}||${key}`);
+        localStorage.removeItem(`${this.#prefix}||${key}`);
+    }
+}
+
+//this is done so I can see the prefix used.
+const defaultStore = new StoreManager("nebula");
+
+export { StoreManager, defaultStore };

src/utils/toast.ts

@@ -1,28 +0,0 @@
-type ToastType = "success" | "error" | "multiline";
-type Position =
-    | "top-left"
-    | "top-middle"
-    | "top-right"
-    | "bottom-left"
-    | "bottom-right"
-    | "bottom-center";
-interface Props {
-    toastType: ToastType;
-    text: string;
-    class: string;
-    id?: string;
-    duration?: number;
-    emoji?: any;
-    position?: Position;
-}
-
-function toast(query: string) {
-    const wrapper = document.getElementById("toastwrapper") as HTMLDivElement;
-    wrapper.classList.remove("hidden");
-    //this is a really hacky solution for toast notifications LOL
-    const element = document.querySelector(query) as HTMLElement;
-    //click the element
-    element.click();
-}
-
-export { type ToastType, type Position, type Props, toast };

src/utils/values.ts

@@ -0,0 +1,121 @@
+import { defaultStore } from "./storage"
+
+type cloaks = "default" | "google" | "wikipedia" | "canvas" | "classroom" | "powerschool";
+
+// Where all of our values like Search Engines, WispServers & SupportedSites live.
+const SearchEngines: Record<string, string> = {
+    ddg: "https://duckduckgo.com/?q=%s",
+    google: "https://google.com/search?q=%s",
+    bing: "https://bing.com/search?q=%s"
+}
+
+const WispServers: Record<string, string> = {
+    "default": (location.protocol === "https:" ? "wss://" : "ws://") + location.host + "/wisp/",
+    "ruby": "wss://ruby.rubynetwork.co/wisp/",
+    "wisp.run": "wss://wisp.run/",
+    "custom": defaultStore.getVal("customWispUrl")
+}
+
+const SupportedSites: Record<string, "uv" | "sj"> = {
+    "discord.gg": "sj",
+    "discord.com": "sj",
+    "spotify.com": "sj",
+    "spotify.link": "sj",
+    "youtube.com": "uv",
+    "youtu.be": "uv",
+    "google.com": "uv"
+};
+
+interface SettingsVals {
+    i18n: {
+        lang: "selectedLanguage",
+        languages: {
+            en: string,
+            jp: string
+        }
+    },
+    proxy: {
+        wispServer: string,
+        proxy: {
+            key: string,
+            available: {
+                uv: string;
+                sj: string;
+                automatic: string
+            }
+        },
+        searchEngine: string,
+        transport: {
+            key: string,
+            available: { 
+                epoxy: string; 
+                libcurl: string;
+            }
+        },
+    },
+    tab: {
+        cloak: string;
+        ab: string;
+    },
+    marketPlace: {
+        themes: string;
+        plugins: string;
+        appearance: {
+            video: string;
+            image: string;
+            theme: {
+                payload: string;
+                name: string;
+            }
+        }
+    }
+}
+/**
+    * This object allows us to access things such as the wisp server url and other things that aren't just one offs
+*/
+const SettingsVals: SettingsVals = {
+    i18n: {
+        lang: "selectedLanguage",
+        languages: {
+            en: "en_US",
+            jp: "jp"
+        }
+    },
+    proxy: {
+        wispServer: "wispServer",
+        proxy: { 
+            key: "proxy",
+            available: {
+                sj: "sj",
+                uv: "uv",
+                automatic: "automatic"
+            }
+        },
+        searchEngine: "searchEngine",
+        transport: {
+            key: "transport",
+            available: {
+                epoxy: "epoxy",
+                libcurl: "libcurl"
+            }
+        }
+    },
+    tab: {
+        cloak: "cloak",
+        ab: "aboutblank"
+    },
+    marketPlace: {
+        themes: "themes",
+        plugins: "plugins",
+        appearance: {
+            video: "video",
+            image: "image",
+            theme: {
+                name: "themeName",
+                payload: "themePayload"
+            }
+        }
+    }
+}
+
+export { SearchEngines, WispServers, SupportedSites, SettingsVals, type cloaks }