commit d96c6c7cafd953ce0806367e0bd660f487d1778a
Author: Alex <8125011+alex-kinokon@users.noreply.github.com>
Date:   Thu Aug 3 20:06:58 2023 -0400

    Public commit

diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..6f576e2
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,4 @@
+CROWDIN_PERSONAL_TOKEN="TOKEN"
+NEXT_PUBLIC_NAME="Extension"
+NEXT_PUBLIC_SUPABASE_URL="https://mysupabase.supabase.co"
+NEXT_PUBLIC_SUPABASE_KEY="TOKEN"
diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000..6f28f55
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,11 @@
+const { extendConfig } = require("@aet/eslint-rules")
+
+module.exports = extendConfig({
+  plugins: ["react", "react-hooks"],
+  rules: {
+    "@typescript-eslint/no-misused-promises": ["error", { checksVoidReturn: false }],
+    "@typescript-eslint/no-unsafe-argument": "off",
+    "@typescript-eslint/no-unsafe-assignment": "off",
+    "@typescript-eslint/no-unsafe-member-access": "off",
+  },
+})
diff --git a/.github/workflows/builds.yml b/.github/workflows/builds.yml
new file mode 100644
index 0000000..bfa5d11
--- /dev/null
+++ b/.github/workflows/builds.yml
@@ -0,0 +1,47 @@
+name: Nightly Build
+
+on:
+  workflow_dispatch
+  # schedule:
+  #   - cron: "0 0 * * *"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Use Node.js 14.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: "14.x"
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Create Release
+        id: create_release
+        uses: actions/create-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: ${{ strftime('%Y-%m-%d-%H-%M-%S', localtime()) }}
+          release_name: Nightly Build ${{ github.sha }}
+          body: Nightly build
+          draft: false
+          prerelease: true
+
+      - name: Upload Release Asset
+        id: upload-release-asset
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
+          asset_path: ./dist
+          asset_name: Nightly Build ${{ github.sha }}.zip
+          asset_content_type: application/zip
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..335bba6
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,149 @@
+src/generated
+eslint-local-rules/index.js
+gecko.zip
+repl.ts
+.jest
+/drafts
+/.1*.**.*
+src/context/temp
+shims
+*.generated
+*.generated.*
+*.module.css.d.ts
+dist/*.html
+dist/app
+dist/vendor
+dist/_locales/*
+!dist/_locales/en_US
+dist/assets/licenses.json
+src/bundle-analyzer
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..0191fc3
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1,3 @@
+public-hoist-pattern[] = *eslint*
+public-hoist-pattern[] = *prettier*
+public-hoist-pattern[] = *immutable*
diff --git a/.vscode/commands.json b/.vscode/commands.json
new file mode 100644
index 0000000..f2ae3f6
--- /dev/null
+++ b/.vscode/commands.json
@@ -0,0 +1,3 @@
+{
+  "commands": []
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..91c4806
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,12 @@
+{
+  "editor.formatOnSave": true,
+  "typescript.inlayHints.parameterNames.enabled": "none",
+  "json.schemas": [
+    {
+      "fileMatch": ["dist/manifest.json"],
+      "url": "https://json.schemastore.org/chrome-manifest.json"
+    }
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "cSpell.words": ["hookz", "submatch", "submatches"]
+}
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..f288702
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,674 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 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 General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is 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.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  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.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  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 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. Use with the GNU Affero General Public License.
+
+  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 Affero 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 special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU 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 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 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 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 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 General Public License for more details.
+
+    You should have received a copy of the GNU 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 the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    <program>  Copyright (C) <year>  <name of author>
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  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 GPL, see
+<https://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<https://www.gnu.org/licenses/why-not-lgpl.html>.
diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..bbac0e3
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,58 @@
+# This file is generated by `make Makefile`
+Makefile: scripts/build-makefile.ts
+	@echo "✨ Building Makefile..."
+	@scripts/build-makefile.ts
+
+makefile: Makefile
+
+src/shared/theme/tokens.generated.ts src/shared/theme/tokens.generated.css: src/shared/theme/tokens.tsx \
+  scripts/build-theme.tsx
+	@echo "✨ Building theme..."
+	@scripts/build-theme.tsx -o $(@D)
+
+theme: src/shared/theme/tokens.generated.ts
+
+src/shared/models/enums.generated.ts src/shared/models/models.generated.ts: src/shared/models/models.yml \
+  ./scripts/build-models.ts
+	@echo "✨ Building models..."
+	@./scripts/build-models.ts
+
+models: src/shared/models/enums.generated.ts
+
+src/vendor/webextension-polyfill/api-metadata.generated.json: src/vendor/webextension-polyfill/LICENSE \
+  src/vendor/webextension-polyfill/README.md \
+  src/vendor/webextension-polyfill/api-metadata.json \
+  src/vendor/webextension-polyfill/package.json \
+  src/vendor/webextension-polyfill/scripts/compress.ts \
+  src/vendor/webextension-polyfill/src/browser-polyfill.js
+	@echo "✨ Building WebExtensionPolyfill..."
+	@./src/vendor/webextension-polyfill/scripts/compress.ts
+
+web-extension-polyfill: src/vendor/webextension-polyfill/api-metadata.generated.json
+
+dist/background.html dist/devtools.html dist/options.html dist/playground.html dist/popup.html dist/reference-bundled.html dist/reference.html: scripts/build-htmls.tsx
+	@echo "✨ Building HTML..."
+	@scripts/build-htmls.tsx
+
+html: dist/background.html
+
+dist/_locales/de_DE/messages.json dist/_locales/en_US/messages.json dist/_locales/es_ES/messages.json dist/_locales/fr_CA/messages.json dist/_locales/fr_FR/messages.json dist/_locales/ja_JP/messages.json dist/_locales/ko_KR/messages.json dist/_locales/zh_CN/messages.json dist/_locales/zh_TW/messages.json src/shared/i18n/data.generated.ts: scripts/build-locales.ts
+	@echo "✨ Building locales..."
+	@scripts/build-locales.ts
+
+locales: dist/_locales/de_DE/messages.json
+
+dist/vendor/sass/index.js: package.json \
+  ./scripts/build-sass.ts
+	@echo "✨ Building sass..."
+	@./scripts/build-sass.ts
+
+sass: dist/vendor/sass/index.js
+
+all: makefile \
+  theme \
+  models \
+  web-extension-polyfill \
+  html \
+  locales \
+  sass
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..bf6f0ef
--- /dev/null
+++ b/README.md
@@ -0,0 +1,15 @@
+# stylebot
+
+A userstyle manager extension.
+
+## Screenshot
+
+<img src="./assets/demo.png" width="700" />
+
+## Development
+
+```sh
+pnpm install
+make all
+pnpm run dev
+```
diff --git a/assets/demo.png b/assets/demo.png
new file mode 100644
index 0000000..d4a7d38
Binary files /dev/null and b/assets/demo.png differ
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000..f859a4b
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,16 @@
+/** @type {import('@babel/core').ConfigFunction} */
+module.exports = api => {
+  if (!api.env("test")) {
+    return {};
+  }
+
+  return {
+    presets: [],
+    plugins: [
+      ["@babel/plugin-transform-typescript", { allowDeclareFields: true }],
+      ["@babel/plugin-proposal-decorators", { version: "legacy" }],
+      "@babel/plugin-transform-modules-commonjs",
+      "babel-plugin-macros",
+    ],
+  };
+};
diff --git a/crowdin.yml b/crowdin.yml
new file mode 100644
index 0000000..0cc584b
--- /dev/null
+++ b/crowdin.yml
@@ -0,0 +1,11 @@
+project_id: "566071"
+api_token_env: CROWDIN_PERSONAL_TOKEN
+base_path: .
+base_url: https://api.crowdin.com
+preserve_hierarchy: true
+files:
+  - source: /src/shared/i18n/resources/en-US/*.json
+    translation: /src/shared/i18n/resources/%locale%/%original_file_name%
+
+  - source: /dist/_locales/en_US/messages.json
+    translation: /dist/_locales/%locale_with_underscore%/%original_file_name%
diff --git a/dist/_locales/en_US/messages.json b/dist/_locales/en_US/messages.json
new file mode 100644
index 0000000..1aefb6d
--- /dev/null
+++ b/dist/_locales/en_US/messages.json
@@ -0,0 +1,11 @@
+{
+  "extName": {
+    "message": "Paletterie"
+  },
+  "description": {
+    "message": "User style manager"
+  },
+  "untitled": {
+    "message": "Untitled"
+  }
+}
diff --git a/dist/assets/fonts/inter/Inter-Black.woff b/dist/assets/fonts/inter/Inter-Black.woff
new file mode 100644
index 0000000..a18593a
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-Black.woff differ
diff --git a/dist/assets/fonts/inter/Inter-Black.woff2 b/dist/assets/fonts/inter/Inter-Black.woff2
new file mode 100644
index 0000000..68f64c9
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-Black.woff2 differ
diff --git a/dist/assets/fonts/inter/Inter-BlackItalic.woff b/dist/assets/fonts/inter/Inter-BlackItalic.woff
new file mode 100644
index 0000000..b6b0194
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-BlackItalic.woff differ
diff --git a/dist/assets/fonts/inter/Inter-BlackItalic.woff2 b/dist/assets/fonts/inter/Inter-BlackItalic.woff2
new file mode 100644
index 0000000..1c9c7ca
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-BlackItalic.woff2 differ
diff --git a/dist/assets/fonts/inter/Inter-Bold.woff b/dist/assets/fonts/inter/Inter-Bold.woff
new file mode 100644
index 0000000..eaf3d4b
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-Bold.woff differ
diff --git a/dist/assets/fonts/inter/Inter-Bold.woff2 b/dist/assets/fonts/inter/Inter-Bold.woff2
new file mode 100644
index 0000000..2846f29
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-Bold.woff2 differ
diff --git a/dist/assets/fonts/inter/Inter-BoldItalic.woff b/dist/assets/fonts/inter/Inter-BoldItalic.woff
new file mode 100644
index 0000000..3275076
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-BoldItalic.woff differ
diff --git a/dist/assets/fonts/inter/Inter-BoldItalic.woff2 b/dist/assets/fonts/inter/Inter-BoldItalic.woff2
new file mode 100644
index 0000000..0b1fe8e
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-BoldItalic.woff2 differ
diff --git a/dist/assets/fonts/inter/Inter-ExtraBold.woff b/dist/assets/fonts/inter/Inter-ExtraBold.woff
new file mode 100644
index 0000000..c2c17ed
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-ExtraBold.woff differ
diff --git a/dist/assets/fonts/inter/Inter-ExtraBold.woff2 b/dist/assets/fonts/inter/Inter-ExtraBold.woff2
new file mode 100644
index 0000000..c24c2bd
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-ExtraBold.woff2 differ
diff --git a/dist/assets/fonts/inter/Inter-ExtraBoldItalic.woff b/dist/assets/fonts/inter/Inter-ExtraBoldItalic.woff
new file mode 100644
index 0000000..c42f705
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-ExtraBoldItalic.woff differ
diff --git a/dist/assets/fonts/inter/Inter-ExtraBoldItalic.woff2 b/dist/assets/fonts/inter/Inter-ExtraBoldItalic.woff2
new file mode 100644
index 0000000..4a81dc7
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-ExtraBoldItalic.woff2 differ
diff --git a/dist/assets/fonts/inter/Inter-ExtraLight.woff b/dist/assets/fonts/inter/Inter-ExtraLight.woff
new file mode 100644
index 0000000..d0de5f3
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-ExtraLight.woff differ
diff --git a/dist/assets/fonts/inter/Inter-ExtraLight.woff2 b/dist/assets/fonts/inter/Inter-ExtraLight.woff2
new file mode 100644
index 0000000..f2ea706
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-ExtraLight.woff2 differ
diff --git a/dist/assets/fonts/inter/Inter-ExtraLightItalic.woff b/dist/assets/fonts/inter/Inter-ExtraLightItalic.woff
new file mode 100644
index 0000000..81f1a28
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-ExtraLightItalic.woff differ
diff --git a/dist/assets/fonts/inter/Inter-ExtraLightItalic.woff2 b/dist/assets/fonts/inter/Inter-ExtraLightItalic.woff2
new file mode 100644
index 0000000..9af717b
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-ExtraLightItalic.woff2 differ
diff --git a/dist/assets/fonts/inter/Inter-Italic.woff b/dist/assets/fonts/inter/Inter-Italic.woff
new file mode 100644
index 0000000..a806b38
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-Italic.woff differ
diff --git a/dist/assets/fonts/inter/Inter-Italic.woff2 b/dist/assets/fonts/inter/Inter-Italic.woff2
new file mode 100644
index 0000000..a619fc5
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-Italic.woff2 differ
diff --git a/dist/assets/fonts/inter/Inter-Light.woff b/dist/assets/fonts/inter/Inter-Light.woff
new file mode 100644
index 0000000..c496464
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-Light.woff differ
diff --git a/dist/assets/fonts/inter/Inter-Light.woff2 b/dist/assets/fonts/inter/Inter-Light.woff2
new file mode 100644
index 0000000..bc4be66
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-Light.woff2 differ
diff --git a/dist/assets/fonts/inter/Inter-LightItalic.woff b/dist/assets/fonts/inter/Inter-LightItalic.woff
new file mode 100644
index 0000000..f84a9de
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-LightItalic.woff differ
diff --git a/dist/assets/fonts/inter/Inter-LightItalic.woff2 b/dist/assets/fonts/inter/Inter-LightItalic.woff2
new file mode 100644
index 0000000..842b2df
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-LightItalic.woff2 differ
diff --git a/dist/assets/fonts/inter/Inter-Medium.woff b/dist/assets/fonts/inter/Inter-Medium.woff
new file mode 100644
index 0000000..d546843
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-Medium.woff differ
diff --git a/dist/assets/fonts/inter/Inter-Medium.woff2 b/dist/assets/fonts/inter/Inter-Medium.woff2
new file mode 100644
index 0000000..f92498a
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-Medium.woff2 differ
diff --git a/dist/assets/fonts/inter/Inter-MediumItalic.woff b/dist/assets/fonts/inter/Inter-MediumItalic.woff
new file mode 100644
index 0000000..459a656
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-MediumItalic.woff differ
diff --git a/dist/assets/fonts/inter/Inter-MediumItalic.woff2 b/dist/assets/fonts/inter/Inter-MediumItalic.woff2
new file mode 100644
index 0000000..0e3019f
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-MediumItalic.woff2 differ
diff --git a/dist/assets/fonts/inter/Inter-Regular.woff b/dist/assets/fonts/inter/Inter-Regular.woff
new file mode 100644
index 0000000..62d3a61
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-Regular.woff differ
diff --git a/dist/assets/fonts/inter/Inter-Regular.woff2 b/dist/assets/fonts/inter/Inter-Regular.woff2
new file mode 100644
index 0000000..6c2b689
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-Regular.woff2 differ
diff --git a/dist/assets/fonts/inter/Inter-SemiBold.woff b/dist/assets/fonts/inter/Inter-SemiBold.woff
new file mode 100644
index 0000000..a815f43
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-SemiBold.woff differ
diff --git a/dist/assets/fonts/inter/Inter-SemiBold.woff2 b/dist/assets/fonts/inter/Inter-SemiBold.woff2
new file mode 100644
index 0000000..611e90c
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-SemiBold.woff2 differ
diff --git a/dist/assets/fonts/inter/Inter-SemiBoldItalic.woff b/dist/assets/fonts/inter/Inter-SemiBoldItalic.woff
new file mode 100644
index 0000000..909e43a
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-SemiBoldItalic.woff differ
diff --git a/dist/assets/fonts/inter/Inter-SemiBoldItalic.woff2 b/dist/assets/fonts/inter/Inter-SemiBoldItalic.woff2
new file mode 100644
index 0000000..545685b
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-SemiBoldItalic.woff2 differ
diff --git a/dist/assets/fonts/inter/Inter-Thin.woff b/dist/assets/fonts/inter/Inter-Thin.woff
new file mode 100644
index 0000000..62bc58c
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-Thin.woff differ
diff --git a/dist/assets/fonts/inter/Inter-Thin.woff2 b/dist/assets/fonts/inter/Inter-Thin.woff2
new file mode 100644
index 0000000..abbc3a5
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-Thin.woff2 differ
diff --git a/dist/assets/fonts/inter/Inter-ThinItalic.woff b/dist/assets/fonts/inter/Inter-ThinItalic.woff
new file mode 100644
index 0000000..700a7f0
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-ThinItalic.woff differ
diff --git a/dist/assets/fonts/inter/Inter-ThinItalic.woff2 b/dist/assets/fonts/inter/Inter-ThinItalic.woff2
new file mode 100644
index 0000000..ab0b200
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-ThinItalic.woff2 differ
diff --git a/dist/assets/fonts/inter/Inter-italic.var.woff2 b/dist/assets/fonts/inter/Inter-italic.var.woff2
new file mode 100644
index 0000000..b826d5a
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-italic.var.woff2 differ
diff --git a/dist/assets/fonts/inter/Inter-roman.var.woff2 b/dist/assets/fonts/inter/Inter-roman.var.woff2
new file mode 100644
index 0000000..6a256a0
Binary files /dev/null and b/dist/assets/fonts/inter/Inter-roman.var.woff2 differ
diff --git a/dist/assets/fonts/inter/Inter.var.woff2 b/dist/assets/fonts/inter/Inter.var.woff2
new file mode 100644
index 0000000..365eedc
Binary files /dev/null and b/dist/assets/fonts/inter/Inter.var.woff2 differ
diff --git a/dist/assets/fonts/inter/LICENSE.txt b/dist/assets/fonts/inter/LICENSE.txt
new file mode 100644
index 0000000..ff80f8c
--- /dev/null
+++ b/dist/assets/fonts/inter/LICENSE.txt
@@ -0,0 +1,94 @@
+Copyright (c) 2016-2020 The Inter Project Authors.
+"Inter" is trademark of Rasmus Andersson.
+https://github.com/rsms/inter
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION AND CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/dist/assets/fonts/inter/inter.css b/dist/assets/fonts/inter/inter.css
new file mode 100644
index 0000000..1cb9bf2
--- /dev/null
+++ b/dist/assets/fonts/inter/inter.css
@@ -0,0 +1,199 @@
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url("Inter-Thin.woff2?v=3.19") format("woff2"),
+    url("Inter-Thin.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 100;
+  font-display: swap;
+  src: url("Inter-ThinItalic.woff2?v=3.19") format("woff2"),
+    url("Inter-ThinItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url("Inter-ExtraLight.woff2?v=3.19") format("woff2"),
+    url("Inter-ExtraLight.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 200;
+  font-display: swap;
+  src: url("Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"),
+    url("Inter-ExtraLightItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("Inter-Light.woff2?v=3.19") format("woff2"),
+    url("Inter-Light.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url("Inter-LightItalic.woff2?v=3.19") format("woff2"),
+    url("Inter-LightItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("Inter-Regular.woff2?v=3.19") format("woff2"),
+    url("Inter-Regular.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("Inter-Italic.woff2?v=3.19") format("woff2"),
+    url("Inter-Italic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("Inter-Medium.woff2?v=3.19") format("woff2"),
+    url("Inter-Medium.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url("Inter-MediumItalic.woff2?v=3.19") format("woff2"),
+    url("Inter-MediumItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("Inter-SemiBold.woff2?v=3.19") format("woff2"),
+    url("Inter-SemiBold.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url("Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"),
+    url("Inter-SemiBoldItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("Inter-Bold.woff2?v=3.19") format("woff2"),
+    url("Inter-Bold.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("Inter-BoldItalic.woff2?v=3.19") format("woff2"),
+    url("Inter-BoldItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url("Inter-ExtraBold.woff2?v=3.19") format("woff2"),
+    url("Inter-ExtraBold.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 800;
+  font-display: swap;
+  src: url("Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"),
+    url("Inter-ExtraBoldItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url("Inter-Black.woff2?v=3.19") format("woff2"),
+    url("Inter-Black.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  src: url("Inter-BlackItalic.woff2?v=3.19") format("woff2"),
+    url("Inter-BlackItalic.woff?v=3.19") format("woff");
+}
+
+/* -------------------------------------------------------
+Variable font.
+Usage:
+
+  html { font-family: 'Inter', sans-serif; }
+  @supports (font-variation-settings: normal) {
+    html { font-family: 'Inter var', sans-serif; }
+  }
+*/
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("Inter-roman.var.woff2?v=3.19") format("woff2");
+}
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("Inter-italic.var.woff2?v=3.19") format("woff2");
+}
+
+/* --------------------------------------------------------------------------
+[EXPERIMENTAL] Multi-axis, single variable font.
+
+Slant axis is not yet widely supported (as of February 2019) and thus this
+multi-axis single variable font is opt-in rather than the default.
+
+When using this, you will probably need to set font-variation-settings
+explicitly, e.g.
+
+  * { font-variation-settings: "slnt" 0deg }
+  .italic { font-variation-settings: "slnt" 10deg }
+
+*/
+@font-face {
+  font-family: "Inter var experimental";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: oblique 0deg 10deg;
+  src: url("Inter.var.woff2?v=3.19") format("woff2");
+}
diff --git a/dist/assets/images/128.png b/dist/assets/images/128.png
new file mode 100755
index 0000000..4cd5d4b
Binary files /dev/null and b/dist/assets/images/128.png differ
diff --git a/dist/assets/images/128w.png b/dist/assets/images/128w.png
new file mode 100755
index 0000000..f4a0aa2
Binary files /dev/null and b/dist/assets/images/128w.png differ
diff --git a/dist/assets/images/16.png b/dist/assets/images/16.png
new file mode 100755
index 0000000..ecf2509
Binary files /dev/null and b/dist/assets/images/16.png differ
diff --git a/dist/assets/images/16w.png b/dist/assets/images/16w.png
new file mode 100755
index 0000000..327d24b
Binary files /dev/null and b/dist/assets/images/16w.png differ
diff --git a/dist/assets/images/19.png b/dist/assets/images/19.png
new file mode 100755
index 0000000..2a1dc4a
Binary files /dev/null and b/dist/assets/images/19.png differ
diff --git a/dist/assets/images/19w.png b/dist/assets/images/19w.png
new file mode 100755
index 0000000..4109ebc
Binary files /dev/null and b/dist/assets/images/19w.png differ
diff --git a/dist/assets/images/256.png b/dist/assets/images/256.png
new file mode 100755
index 0000000..aa8a38a
Binary files /dev/null and b/dist/assets/images/256.png differ
diff --git a/dist/assets/images/256w.png b/dist/assets/images/256w.png
new file mode 100755
index 0000000..357e77b
Binary files /dev/null and b/dist/assets/images/256w.png differ
diff --git a/dist/assets/images/32.png b/dist/assets/images/32.png
new file mode 100755
index 0000000..e997480
Binary files /dev/null and b/dist/assets/images/32.png differ
diff --git a/dist/assets/images/32w.png b/dist/assets/images/32w.png
new file mode 100755
index 0000000..1d41a92
Binary files /dev/null and b/dist/assets/images/32w.png differ
diff --git a/dist/assets/images/38.png b/dist/assets/images/38.png
new file mode 100755
index 0000000..b912910
Binary files /dev/null and b/dist/assets/images/38.png differ
diff --git a/dist/assets/images/38w.png b/dist/assets/images/38w.png
new file mode 100755
index 0000000..8c15172
Binary files /dev/null and b/dist/assets/images/38w.png differ
diff --git a/dist/assets/images/48.png b/dist/assets/images/48.png
new file mode 100755
index 0000000..f932386
Binary files /dev/null and b/dist/assets/images/48.png differ
diff --git a/dist/assets/images/48w.png b/dist/assets/images/48w.png
new file mode 100755
index 0000000..10bd645
Binary files /dev/null and b/dist/assets/images/48w.png differ
diff --git a/dist/assets/images/64.png b/dist/assets/images/64.png
new file mode 100755
index 0000000..e984ebe
Binary files /dev/null and b/dist/assets/images/64.png differ
diff --git a/dist/assets/images/64w.png b/dist/assets/images/64w.png
new file mode 100755
index 0000000..d92b72d
Binary files /dev/null and b/dist/assets/images/64w.png differ
diff --git a/dist/manifest.json b/dist/manifest.json
new file mode 100644
index 0000000..dcb5200
--- /dev/null
+++ b/dist/manifest.json
@@ -0,0 +1,56 @@
+{
+  "name": "__MSG_extName__",
+  "version": "19.11.6",
+  "description": "__MSG_description__",
+  "manifest_version": 2,
+  "default_locale": "en_US",
+  "icons": {
+    "64": "assets/images/64.png",
+    "128": "assets/images/128.png",
+    "256": "assets/images/256.png"
+  },
+  "permissions": [
+    "tabs",
+    "downloads",
+    "webNavigation",
+    "storage",
+    "http://*/",
+    "https://*/",
+    "chrome://favicon/"
+  ],
+  "content_security_policy": "script-src 'unsafe-inline' 'self' http://localhost:8097/; object-src 'self'",
+  "minimum_chrome_version": "90.0",
+  "background": {
+    "page": "background.html",
+    "persistent": true
+  },
+  "devtools_page": "devtools.html",
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "run_at": "document_start",
+      "all_frames": true,
+      "js": ["app/context/index.js"]
+    },
+    {
+      "matches": ["http://userstyles.org/*", "https://userstyles.org/*"],
+      "run_at": "document_end",
+      "all_frames": false,
+      "js": ["app/install/index.js"]
+    }
+  ],
+  "options_ui": {
+    "page": "options.html",
+    "open_in_tab": true
+  },
+  "browser_action": {
+    "default_icon": {
+      "16": "assets/images/16w.png",
+      "19": "assets/images/19w.png",
+      "32": "assets/images/32w.png",
+      "38": "assets/images/38w.png"
+    },
+    "default_title": "__MSG_extName__",
+    "default_popup": "popup.html"
+  }
+}
diff --git a/eslint-local-rules/no-deep-relative-import.ts b/eslint-local-rules/no-deep-relative-import.ts
new file mode 100644
index 0000000..564f53b
--- /dev/null
+++ b/eslint-local-rules/no-deep-relative-import.ts
@@ -0,0 +1,62 @@
+import type { Rule } from "eslint"
+
+interface RuleOptions {
+  /**
+   * The maximum number of times a relative path import can go to the parent directory.
+   */
+  maxDepth?: number
+}
+
+const rule: Rule.RuleModule = {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description:
+        "Bans relative path imports that go to the parent directory too many times",
+      category: "Best Practices",
+      recommended: true,
+    },
+    fixable: "code",
+    schema: [
+      {
+        type: "object",
+        properties: {
+          maxDepth: {
+            type: "integer",
+            minimum: 1,
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+  },
+  create(context) {
+    const { maxDepth = 3 } = (context.options[0] || {}) as RuleOptions
+    const errorMessage = `Relative path imports cannot go to the parent directory more than ${maxDepth} levels`
+
+    return {
+      ImportDeclaration(node) {
+        const { source } = node
+        if (
+          source.type === "Literal" &&
+          typeof source.value === "string" &&
+          source.value.startsWith("..")
+        ) {
+          const depth = source.value.match(/\.\.\//g)?.length ?? 0
+          if (depth > maxDepth) {
+            context.report({
+              node: source,
+              message: errorMessage,
+              fix(fixer) {
+                const newValue = (source.value as string)!.replace(/\.\.\//g, "")
+                return fixer.replaceText(source, `'${newValue}'`)
+              },
+            })
+          }
+        }
+      },
+    }
+  },
+}
+
+export default rule
diff --git a/jest.config.ts b/jest.config.ts
new file mode 100644
index 0000000..94341ad
--- /dev/null
+++ b/jest.config.ts
@@ -0,0 +1,212 @@
+import type { Config } from "@jest/types";
+/*
+ * For a detailed explanation regarding each configuration property and type check, visit:
+ * https://jestjs.io/docs/configuration
+ */
+
+const config: Partial<Config.InitialOptions> & {
+  [key: string]: any;
+} = {
+  // All imported modules in your tests should be mocked automatically
+  // automock: false,
+
+  // Stop running tests after `n` failures
+  // bail: 0,
+
+  // The directory where Jest should store its cached dependency information
+  // cacheDirectory: "/private/var/folders/cz/tgksgqzx1vsg96sc_zk1sql00000gn/T/jest_dx",
+
+  // Automatically clear mock calls, instances, contexts and results before every test
+  clearMocks: true,
+
+  // Indicates whether the coverage information should be collected while executing the test
+  collectCoverage: true,
+
+  // An array of glob patterns indicating a set of files for which coverage information should be collected
+  // collectCoverageFrom: undefined,
+
+  // The directory where Jest should output its coverage files
+  coverageDirectory: ".jest/coverage",
+
+  // An array of regexp pattern strings used to skip coverage collection
+  // coveragePathIgnorePatterns: [
+  //   "/node_modules/"
+  // ],
+
+  // Indicates which provider should be used to instrument code for coverage
+  coverageProvider: "v8",
+
+  // A list of reporter names that Jest uses when writing coverage reports
+  // coverageReporters: [
+  //   "json",
+  //   "text",
+  //   "lcov",
+  //   "clover"
+  // ],
+
+  // An object that configures minimum threshold enforcement for coverage results
+  // coverageThreshold: undefined,
+
+  // A path to a custom dependency extractor
+  // dependencyExtractor: undefined,
+
+  // Make calling deprecated APIs throw helpful error messages
+  // errorOnDeprecated: false,
+
+  // The default configuration for fake timers
+  // fakeTimers: {
+  //   "enableGlobally": false
+  // },
+
+  // Force coverage collection from ignored files using an array of glob patterns
+  // forceCoverageMatch: [],
+
+  // A path to a module which exports an async function that is triggered once before all test suites
+  // globalSetup: undefined,
+
+  // A path to a module which exports an async function that is triggered once after all test suites
+  // globalTeardown: undefined,
+
+  // A set of global variables that need to be available in all test environments
+  // globals: {},
+
+  // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
+  // maxWorkers: "50%",
+
+  // An array of directory names to be searched recursively up from the requiring module's location
+  // moduleDirectories: [
+  //   "node_modules"
+  // ],
+
+  // An array of file extensions your modules use
+  // moduleFileExtensions: [
+  //   "js",
+  //   "mjs",
+  //   "cjs",
+  //   "jsx",
+  //   "ts",
+  //   "tsx",
+  //   "json",
+  //   "node"
+  // ],
+
+  // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
+  moduleNameMapper: {
+    "^~/(.*)$": "<rootDir>/src/$1",
+  },
+
+  // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
+  // modulePathIgnorePatterns: [],
+
+  // Activates notifications for test results
+  // notify: false,
+
+  // An enum that specifies notification mode. Requires { notify: true }
+  // notifyMode: "failure-change",
+
+  // A preset that is used as a base for Jest's configuration
+  // preset: undefined,
+
+  // Run tests from one or more projects
+  // projects: undefined,
+
+  // Use this configuration option to add custom reporters to Jest
+  reporters: [
+    "default",
+    [
+      "jest-html-reporters",
+      {
+        publicPath: ".jest/reports",
+        filename: "index.html",
+        darkTheme: true,
+      },
+    ],
+  ],
+
+  // Automatically reset mock state before every test
+  // resetMocks: false,
+
+  // Reset the module registry before running each individual test
+  // resetModules: false,
+
+  // A path to a custom resolver
+  // resolver: undefined,
+
+  // Automatically restore mock state and implementation before every test
+  // restoreMocks: false,
+
+  // The root directory that Jest should scan for tests and modules within
+  // rootDir: undefined,
+
+  // A list of paths to directories that Jest should use to search for files in
+  // roots: [
+  //   "<rootDir>"
+  // ],
+
+  // Allows you to use a custom runner instead of Jest's default test runner
+  // runner: "jest-runner",
+
+  // The paths to modules that run some code to configure or set up the testing environment before each test
+  // setupFiles: [],
+
+  // A list of paths to modules that run some code to configure or set up the testing framework before each test
+  setupFilesAfterEnv: ["./src/setupTest.ts"],
+
+  // The number of seconds after which a test is considered as slow and reported as such in the results.
+  // slowTestThreshold: 5,
+
+  // A list of paths to snapshot serializer modules Jest should use for snapshot testing
+  // snapshotSerializers: [],
+
+  // The test environment that will be used for testing
+  testEnvironment: "node",
+
+  // Options that will be passed to the testEnvironment
+  // testEnvironmentOptions: {},
+
+  // Adds a location field to test results
+  // testLocationInResults: false,
+
+  // The glob patterns Jest uses to detect test files
+  // testMatch: [
+  //   "**/__tests__/**/*.[jt]s?(x)",
+  //   "**/?(*.)+(spec|test).[tj]s?(x)"
+  // ],
+
+  // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
+  // testPathIgnorePatterns: [
+  //   "/node_modules/"
+  // ],
+
+  // The regexp pattern or array of patterns that Jest uses to detect test files
+  // testRegex: [],
+
+  // This option allows the use of a custom results processor
+  // testResultsProcessor: undefined,
+
+  // This option allows use of a custom test runner
+  // testRunner: "jest-circus/runner",
+
+  // A map from regular expressions to paths to transformers
+  // transform: undefined,
+
+  // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
+  // transformIgnorePatterns: [
+  //   "/node_modules/",
+  //   "\\.pnp\\.[^\\/]+$"
+  // ],
+
+  // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
+  // unmockedModulePathPatterns: undefined,
+
+  // Indicates whether each individual test should be reported during the run
+  // verbose: undefined,
+
+  // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
+  // watchPathIgnorePatterns: [],
+
+  // Whether to use watchman for file crawling
+  // watchman: true,
+};
+
+export default config;
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..8560ad8
--- /dev/null
+++ b/package.json
@@ -0,0 +1,164 @@
+{
+  "name": "extension",
+  "version": "0.1.0",
+  "private": true,
+  "license": "GPL-3.0",
+  "scripts": {
+    "dev": "NODE_ENV=development yarn build apps -w",
+    "build:app": "NODE_ENV=production yarn build apps",
+    "build:gecko": "build-gecko ./dist -name test -o ./gecko.zip",
+    "build": "./scripts/build.sh",
+    "watch": "npm run dev",
+    "codegen": "./scripts/build-gql.ts",
+    "preinstall": "node ./scripts/build-shims.js",
+    "typecheck": "tsc --noEmit --skipLibCheck"
+  },
+  "resolutions": {
+    "cross-fetch": "./shims/cross-fetch",
+    "is-number": "./shims/is-number"
+  },
+  "devDependencies": {
+    "@aet/eslint-rules": "0.0.1-beta.23",
+    "@aet/gql-tools": "0.0.1-beta.3",
+    "@aet/hooks": "npm:@proteria/hooks@^0.0.2",
+    "@aet/icons": "0.0.1-beta.5",
+    "@apollo/client": "^3.7.17",
+    "@babel/core": "^7.22.9",
+    "@babel/template": "^7.22.5",
+    "@babel/types": "^7.22.5",
+    "@csstools/postcss-sass": "^5.0.1",
+    "@emotion/babel-plugin": "^11.11.0",
+    "@emotion/css": "^11.11.2",
+    "@emotion/hash": "^0.9.1",
+    "@emotion/memoize": "^0.8.1",
+    "@emotion/react": "^11.11.1",
+    "@emotion/serialize": "^1.1.2",
+    "@emotion/styled": "^11.11.0",
+    "@graphql-codegen/add": "^5.0.0",
+    "@graphql-codegen/plugin-helpers": "^5.0.1",
+    "@graphql-codegen/typescript": "^4.0.1",
+    "@graphql-codegen/typescript-operations": "^4.0.1",
+    "@graphql-tools/code-file-loader": "^8.0.2",
+    "@graphql-tools/graphql-file-loader": "^8.0.0",
+    "@headlessui/react": "^1.7.16",
+    "@monaco-editor/react": "^4.5.1",
+    "@primer/primitives": "^7.11.14",
+    "@react-hookz/web": "^23.1.0",
+    "@szhsin/react-menu": "4.0.2",
+    "@types/babel-plugin-macros": "^3.1.0",
+    "@types/babel__core": "^7.20.1",
+    "@types/babel__template": "^7.4.1",
+    "@types/chrome": "^0.0.242",
+    "@types/convert-source-map": "^2.0.0",
+    "@types/debug": "^4.1.8",
+    "@types/dedent": "^0.7.0",
+    "@types/element-resize-detector": "^1.1.3",
+    "@types/glob-to-regexp": "^0.4.1",
+    "@types/js-yaml": "^4.0.5",
+    "@types/lodash": "^4.14.196",
+    "@types/lodash-es": "^4.17.8",
+    "@types/node": "^20.4.5",
+    "@types/pouchdb-browser": "^6.1.3",
+    "@types/prettier": "^2.7.3",
+    "@types/react": "^18.2.18",
+    "@types/react-dom": "^18.2.7",
+    "@types/react-helmet": "^6.1.6",
+    "@types/react-window": "^1.8.5",
+    "@types/stylis": "^4.2.0",
+    "@types/ua-parser-js": "^0.7.36",
+    "@types/w3c-css-typed-object-model-level-1": "20180410.0.5",
+    "@types/webextension-polyfill": "^0.10.1",
+    "@vscode/codicons": "^0.0.33",
+    "async-mutex": "^0.4.0",
+    "babel-plugin-macros": "3.1.0",
+    "babel-plugin-transform-minify-gql-template-literals": "1.1.1",
+    "browserslist": "^4.21.10",
+    "comlink": "^4.4.1",
+    "commander": "^11.0.0",
+    "debug": "^4.3.4",
+    "dedent": "1.5.1",
+    "dotenv": "^16.3.1",
+    "esbin": "0.0.1-beta.2",
+    "esbuild": "0.18.17",
+    "esbuild-plugin-sass": "^1.0.1",
+    "eslint": "8.46.0",
+    "eslint-plugin-unicorn": "^48.0.1",
+    "fast-glob": "^3.3.1",
+    "fuse.js": "^6.6.2",
+    "glob-to-regexp": "^0.4.1",
+    "graphiql": "^3.0.5",
+    "graphql": "^16.7.1",
+    "graphql-type-json": "^0.3.2",
+    "hooks.macro": "^1.1.2",
+    "i18next": "^23.4.1",
+    "i18next-http-backend": "2.2.1",
+    "i18next-icu": "^2.3.0",
+    "idb-keyval": "^6.2.1",
+    "immer": "^10.0.2",
+    "intl-messageformat": "^10.5.0",
+    "js-yaml": "^4.1.0",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
+    "lodash.noop": "^3.0.1",
+    "lru-cache": "^10.0.0",
+    "memoize-one": "6.0.0",
+    "monaco-editor": "^0.40.0",
+    "nanoid": "^4.0.2",
+    "normalize.css": "^8.0.1",
+    "postcss": "^8.4.27",
+    "postcss-modules": "^6.0.0",
+    "pouchdb-browser": "^8.0.1",
+    "prettier": "^3.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
+    "react-hot-toast": "^2.4.1",
+    "react-i18next": "^13.0.3",
+    "react-window": "^1.8.9",
+    "reflect-metadata": "0.1.13",
+    "sass": "^1.64.2",
+    "scheduler": "^0.23.0",
+    "src": "npm:lodash.noop@3.0.1",
+    "superjson": "^1.13.1",
+    "tiny-invariant": "^1.3.1",
+    "ts-node": "^10.9.1",
+    "tsconfig-paths": "^4.2.0",
+    "tslib": "^2.6.1",
+    "tua-body-scroll-lock": "^1.4.0",
+    "typed-emitter": "^2.1.0",
+    "typescript": "5.2.0-beta",
+    "typescript-plugin-css-modules": "^5.0.1",
+    "ua-parser-js": "^1.0.35",
+    "use-context-selector": "^1.4.1",
+    "webextension-polyfill": "^0.10.0",
+    "zod": "^3.21.4"
+  },
+  "prettier": {
+    "arrowParens": "avoid",
+    "tabWidth": 2,
+    "printWidth": 90,
+    "semi": false,
+    "singleQuote": false,
+    "trailingComma": "all"
+  },
+  "imports": {
+    "#src/*": "./src/*"
+  },
+  "eslintIgnore": [
+    "dist"
+  ],
+  "pnpm": {
+    "patchedDependencies": {
+      "@apollo/client@3.7.17": "patches/@apollo__client@3.7.17.patch",
+      "@headlessui/react@1.7.16": "patches/@headlessui__react@1.7.16.patch",
+      "i18next-http-backend@2.2.1": "patches/i18next-http-backend@2.2.1.patch",
+      "monaco-editor@0.40.0": "patches/monaco-editor@0.40.0.patch",
+      "@aet/gql-tools@0.0.1-beta.3": "patches/@aet__gql-tools@0.0.1-beta.3.patch"
+    },
+    "overrides": {
+      "cross-fetch": "./shims/cross-fetch",
+      "node-gyp": "./node_modules/lodash.noop",
+      "@graphql-tools/relay-operation-optimizer": "./node_modules/lodash.noop"
+    }
+  }
+}
diff --git a/patches/@aet__gql-tools@0.0.1-beta.3.patch b/patches/@aet__gql-tools@0.0.1-beta.3.patch
new file mode 100644
index 0000000..15782dc
--- /dev/null
+++ b/patches/@aet__gql-tools@0.0.1-beta.3.patch
@@ -0,0 +1,21 @@
+diff --git a/type-graphql.mjs b/type-graphql.mjs
+index 1723cb707fb365a7e68d073093f75960e405a463..4a36c76eeced8c2009c5480a154c150006361e7d 100644
+--- a/type-graphql.mjs
++++ b/type-graphql.mjs
+@@ -3,7 +3,6 @@ import { GraphQLError, GraphQLScalarType, GraphQLFloat, GraphQLBoolean, GraphQLS
+ export { GraphQLFloat as Float, GraphQLID as ID, GraphQLInt as Int } from 'graphql';
+ import { GraphQLBigInt, GraphQLDateTimeISO } from 'graphql-scalars';
+ export { GraphQLBigInt, GraphQLDateTimeISO as GraphQLISODateTime, GraphQLTimestamp } from 'graphql-scalars';
+-import { PubSub as PubSub$1, withFilter } from 'graphql-subscriptions';
+ 
+ class ArgumentValidationError extends GraphQLError {
+     constructor(validationErrors) {
+@@ -903,7 +902,7 @@ class BuildContext {
+     disableInferringDefaultValues;
+     #pubSub;
+     get pubSub() {
+-        return this.#pubSub ?? (this.#pubSub = new PubSub$1());
++        return this.#pubSub;
+     }
+     /**
+      * Set static fields with current building context data
\ No newline at end of file
diff --git a/patches/@apollo__client@3.7.17.patch b/patches/@apollo__client@3.7.17.patch
new file mode 100644
index 0000000..a17184a
--- /dev/null
+++ b/patches/@apollo__client@3.7.17.patch
@@ -0,0 +1,13 @@
+diff --git a/react/context/ApolloProvider.d.ts b/react/context/ApolloProvider.d.ts
+index 3d12c9e1e8bf6b33f603cdb2504142edc818eff7..ccc569dc90b7f0fa40b5347dd33c025894539ba1 100644
+--- a/react/context/ApolloProvider.d.ts
++++ b/react/context/ApolloProvider.d.ts
+@@ -2,7 +2,7 @@ import * as React from 'react';
+ import { ApolloClient } from '../../core';
+ export interface ApolloProviderProps<TCache> {
+     client: ApolloClient<TCache>;
+-    children: React.ReactNode | React.ReactNode[] | null;
++    children?: React.ReactNode | React.ReactNode[] | null;
+ }
+ export declare const ApolloProvider: React.FC<ApolloProviderProps<any>>;
+ //# sourceMappingURL=ApolloProvider.d.ts.map
\ No newline at end of file
diff --git a/patches/@headlessui__react@1.7.16.patch b/patches/@headlessui__react@1.7.16.patch
new file mode 100644
index 0000000..9775e04
--- /dev/null
+++ b/patches/@headlessui__react@1.7.16.patch
@@ -0,0 +1,13 @@
+diff --git a/dist/components/popover/popover.d.ts b/dist/components/popover/popover.d.ts
+index 3c7ee4ecbd5ac4411fbcc19f777876331bb0d640..080665fd90eaeb1370c7ec1e1f3281b6e2301bb3 100644
+--- a/dist/components/popover/popover.d.ts
++++ b/dist/components/popover/popover.d.ts
+@@ -3,7 +3,7 @@ import { Props } from '../../types.js';
+ import { PropsForFeatures, HasDisplayName, RefProp } from '../../utils/render.js';
+ type MouseEvent<T> = Parameters<MouseEventHandler<T>>[0];
+ declare let DEFAULT_POPOVER_TAG: "div";
+-interface PopoverRenderPropArg {
++export interface PopoverRenderPropArg {
+     open: boolean;
+     close(focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null> | MouseEvent<HTMLElement>): void;
+ }
\ No newline at end of file
diff --git a/patches/i18next-http-backend@2.2.1.patch b/patches/i18next-http-backend@2.2.1.patch
new file mode 100644
index 0000000..b38e3c1
--- /dev/null
+++ b/patches/i18next-http-backend@2.2.1.patch
@@ -0,0 +1,22 @@
+diff --git a/esm/getFetch.cjs b/esm/getFetch.cjs
+deleted file mode 100644
+index 9e99af3cae1cb4e1ebb543c510132741bc7036e5..0000000000000000000000000000000000000000
+diff --git a/esm/getFetch.js b/esm/getFetch.js
+new file mode 100644
+index 0000000000000000000000000000000000000000..7b36684e2e54181eb45f5d2b718f3da5a925ea40
+--- /dev/null
++++ b/esm/getFetch.js
+@@ -0,0 +1 @@
++export default globalThis.fetch;
+diff --git a/esm/request.js b/esm/request.js
+index b6a6e8976beab48feaa9eedcd44fc2945f27952d..02ccb089b571bb8627a297abaa131c6657861481 100644
+--- a/esm/request.js
++++ b/esm/request.js
+@@ -1,6 +1,6 @@
+ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+ import { defaults, hasXMLHttpRequest } from './utils.js';
+-import * as fetchNode from './getFetch.cjs';
++import * as fetchNode from './getFetch.js';
+ var fetchApi;
+ if (typeof fetch === 'function') {
+   if (typeof global !== 'undefined' && global.fetch) {
\ No newline at end of file
diff --git a/patches/monaco-editor@0.40.0.patch b/patches/monaco-editor@0.40.0.patch
new file mode 100644
index 0000000..be76fb6
--- /dev/null
+++ b/patches/monaco-editor@0.40.0.patch
@@ -0,0 +1,70 @@
+diff --git a/esm/vs/language/css/css.worker.js b/esm/vs/language/css/css.worker.js
+index 4ba8b6ca8fda98d7f6c23a4e7f46549991b0085a..828be81d67eee01891ca1a8a47378d4877e22243 100644
+--- a/esm/vs/language/css/css.worker.js
++++ b/esm/vs/language/css/css.worker.js
+@@ -17983,6 +17983,9 @@ var cssData = {
+         {
+           "name": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif"
+         },
++        {
++          "name": "system-ui, sans-serif"
++        },
+         {
+           "name": "Arial, Helvetica, sans-serif"
+         },
+@@ -30198,6 +30201,55 @@ var cssData = {
+         "identifier"
+       ]
+     },
++    {
++      "name": "-webkit-font-smoothing",
++      "browsers": [
++        "S4",
++        "C5"
++      ],
++      "values": [
++        {
++          "name": "auto",
++          "description": "Let the browser decide (Uses subpixel anti-aliasing when available; this is the default)"
++        },
++        {
++          "name": "none",
++          "description": "Turn font smoothing off; display text with jagged sharp edges."
++        },
++        {
++          "name": "antialiased",
++          "description": "Smooth the font on the level of the pixel, as opposed to the subpixel. Switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter."
++        },
++        {
++          "name": "subpixel-antialiased",
++          "description": "On most non-retina displays, this will give the sharpest text."
++        }
++      ],
++      "description": "Controls the application of anti-aliasing when fonts are rendered.",
++      "restrictions": [
++          "identifier"
++      ]
++    },
++    {
++      "name": "-moz-osx-font-smoothing",
++      "browsers": [
++        "F25"
++      ],
++      "values": [
++        {
++          "name": "auto",
++          "description": "Allow the browser to select an optimization for font smoothing, typically grayscale."
++        },
++        {
++          "name": "grayscale",
++          "description": "Render text with grayscale antialiasing, as opposed to the subpixel. Switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter."
++        }
++      ],
++      "description": "Controls the application of anti-aliasing when fonts are rendered.",
++      "restrictions": [
++        "identifier"
++      ]
++    },
+     {
+       "name": "-webkit-font-feature-settings",
+       "browsers": [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..172ed81
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,7325 @@
+lockfileVersion: '6.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+overrides:
+  cross-fetch: ./shims/cross-fetch
+  node-gyp: ./node_modules/lodash.noop
+  '@graphql-tools/relay-operation-optimizer': ./node_modules/lodash.noop
+
+patchedDependencies:
+  '@aet/gql-tools@0.0.1-beta.3':
+    hash: 47vkx3rn6phx3mk5fuqtmfzx34
+    path: patches/@aet__gql-tools@0.0.1-beta.3.patch
+  '@apollo/client@3.7.17':
+    hash: t7vxnytrj25ktypmqrdayqgr3y
+    path: patches/@apollo__client@3.7.17.patch
+  '@headlessui/react@1.7.16':
+    hash: nwe5csvy6f3sk73c47zwlim4za
+    path: patches/@headlessui__react@1.7.16.patch
+  i18next-http-backend@2.2.1:
+    hash: oxpqp5jjldpyo63xee6uzmu3na
+    path: patches/i18next-http-backend@2.2.1.patch
+  monaco-editor@0.40.0:
+    hash: ku3o7hkzj5ntzax27c7xlqnuoa
+    path: patches/monaco-editor@0.40.0.patch
+
+devDependencies:
+  '@aet/eslint-rules':
+    specifier: 0.0.1-beta.23
+    version: 0.0.1-beta.23(eslint-plugin-import@2.28.0)(eslint@8.46.0)(typescript@5.2.0-beta)
+  '@aet/gql-tools':
+    specifier: 0.0.1-beta.3
+    version: 0.0.1-beta.3(patch_hash=47vkx3rn6phx3mk5fuqtmfzx34)(graphql@16.7.1)(lodash@4.17.21)
+  '@aet/hooks':
+    specifier: npm:@proteria/hooks@^0.0.2
+    version: /@proteria/hooks@0.0.2(react-dom@18.2.0)(react@18.2.0)
+  '@aet/icons':
+    specifier: 0.0.1-beta.5
+    version: 0.0.1-beta.5
+  '@apollo/client':
+    specifier: ^3.7.17
+    version: 3.7.17(patch_hash=t7vxnytrj25ktypmqrdayqgr3y)(graphql@16.7.1)(react-dom@18.2.0)(react@18.2.0)
+  '@babel/core':
+    specifier: ^7.22.9
+    version: 7.22.9
+  '@babel/template':
+    specifier: ^7.22.5
+    version: 7.22.5
+  '@babel/types':
+    specifier: ^7.22.5
+    version: 7.22.5
+  '@csstools/postcss-sass':
+    specifier: ^5.0.1
+    version: 5.0.1(postcss@8.4.27)
+  '@emotion/babel-plugin':
+    specifier: ^11.11.0
+    version: 11.11.0
+  '@emotion/css':
+    specifier: ^11.11.2
+    version: 11.11.2
+  '@emotion/hash':
+    specifier: ^0.9.1
+    version: 0.9.1
+  '@emotion/memoize':
+    specifier: ^0.8.1
+    version: 0.8.1
+  '@emotion/react':
+    specifier: ^11.11.1
+    version: 11.11.1(@types/react@18.2.18)(react@18.2.0)
+  '@emotion/serialize':
+    specifier: ^1.1.2
+    version: 1.1.2
+  '@emotion/styled':
+    specifier: ^11.11.0
+    version: 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.18)(react@18.2.0)
+  '@graphql-codegen/add':
+    specifier: ^5.0.0
+    version: 5.0.0(graphql@16.7.1)
+  '@graphql-codegen/plugin-helpers':
+    specifier: ^5.0.1
+    version: 5.0.1(graphql@16.7.1)
+  '@graphql-codegen/typescript':
+    specifier: ^4.0.1
+    version: 4.0.1(graphql@16.7.1)
+  '@graphql-codegen/typescript-operations':
+    specifier: ^4.0.1
+    version: 4.0.1(graphql@16.7.1)
+  '@graphql-tools/code-file-loader':
+    specifier: ^8.0.2
+    version: 8.0.2(graphql@16.7.1)
+  '@graphql-tools/graphql-file-loader':
+    specifier: ^8.0.0
+    version: 8.0.0(graphql@16.7.1)
+  '@headlessui/react':
+    specifier: ^1.7.16
+    version: 1.7.16(patch_hash=nwe5csvy6f3sk73c47zwlim4za)(react-dom@18.2.0)(react@18.2.0)
+  '@monaco-editor/react':
+    specifier: ^4.5.1
+    version: 4.5.1(monaco-editor@0.40.0)(react-dom@18.2.0)(react@18.2.0)
+  '@primer/primitives':
+    specifier: ^7.11.14
+    version: 7.11.14
+  '@react-hookz/web':
+    specifier: ^23.1.0
+    version: 23.1.0(react-dom@18.2.0)(react@18.2.0)
+  '@szhsin/react-menu':
+    specifier: 4.0.2
+    version: 4.0.2(react-dom@18.2.0)(react@18.2.0)
+  '@types/babel-plugin-macros':
+    specifier: ^3.1.0
+    version: 3.1.0
+  '@types/babel__core':
+    specifier: ^7.20.1
+    version: 7.20.1
+  '@types/babel__template':
+    specifier: ^7.4.1
+    version: 7.4.1
+  '@types/chrome':
+    specifier: ^0.0.242
+    version: 0.0.242
+  '@types/convert-source-map':
+    specifier: ^2.0.0
+    version: 2.0.0
+  '@types/debug':
+    specifier: ^4.1.8
+    version: 4.1.8
+  '@types/dedent':
+    specifier: ^0.7.0
+    version: 0.7.0
+  '@types/element-resize-detector':
+    specifier: ^1.1.3
+    version: 1.1.3
+  '@types/glob-to-regexp':
+    specifier: ^0.4.1
+    version: 0.4.1
+  '@types/js-yaml':
+    specifier: ^4.0.5
+    version: 4.0.5
+  '@types/lodash':
+    specifier: ^4.14.196
+    version: 4.14.196
+  '@types/lodash-es':
+    specifier: ^4.17.8
+    version: 4.17.8
+  '@types/node':
+    specifier: ^20.4.5
+    version: 20.4.5
+  '@types/pouchdb-browser':
+    specifier: ^6.1.3
+    version: 6.1.3
+  '@types/prettier':
+    specifier: ^2.7.3
+    version: 2.7.3
+  '@types/react':
+    specifier: ^18.2.18
+    version: 18.2.18
+  '@types/react-dom':
+    specifier: ^18.2.7
+    version: 18.2.7
+  '@types/react-helmet':
+    specifier: ^6.1.6
+    version: 6.1.6
+  '@types/react-window':
+    specifier: ^1.8.5
+    version: 1.8.5
+  '@types/stylis':
+    specifier: ^4.2.0
+    version: 4.2.0
+  '@types/ua-parser-js':
+    specifier: ^0.7.36
+    version: 0.7.36
+  '@types/w3c-css-typed-object-model-level-1':
+    specifier: 20180410.0.5
+    version: 20180410.0.5
+  '@types/webextension-polyfill':
+    specifier: ^0.10.1
+    version: 0.10.1
+  '@vscode/codicons':
+    specifier: ^0.0.33
+    version: 0.0.33
+  async-mutex:
+    specifier: ^0.4.0
+    version: 0.4.0
+  babel-plugin-macros:
+    specifier: 3.1.0
+    version: 3.1.0
+  babel-plugin-transform-minify-gql-template-literals:
+    specifier: 1.1.1
+    version: 1.1.1
+  browserslist:
+    specifier: ^4.21.10
+    version: 4.21.10
+  comlink:
+    specifier: ^4.4.1
+    version: 4.4.1
+  commander:
+    specifier: ^11.0.0
+    version: 11.0.0
+  debug:
+    specifier: ^4.3.4
+    version: 4.3.4
+  dedent:
+    specifier: 1.5.1
+    version: 1.5.1(babel-plugin-macros@3.1.0)
+  dotenv:
+    specifier: ^16.3.1
+    version: 16.3.1
+  esbin:
+    specifier: 0.0.1-beta.2
+    version: 0.0.1-beta.2(esbuild@0.18.17)
+  esbuild:
+    specifier: 0.18.17
+    version: 0.18.17
+  esbuild-plugin-sass:
+    specifier: ^1.0.1
+    version: 1.0.1(esbuild@0.18.17)
+  eslint:
+    specifier: 8.46.0
+    version: 8.46.0
+  eslint-plugin-unicorn:
+    specifier: ^48.0.1
+    version: 48.0.1(eslint@8.46.0)
+  fast-glob:
+    specifier: ^3.3.1
+    version: 3.3.1
+  fuse.js:
+    specifier: ^6.6.2
+    version: 6.6.2
+  glob-to-regexp:
+    specifier: ^0.4.1
+    version: 0.4.1
+  graphiql:
+    specifier: ^3.0.5
+    version: 3.0.5(@codemirror/language@6.0.0)(@types/node@20.4.5)(@types/react-dom@18.2.7)(@types/react@18.2.18)(graphql@16.7.1)(react-dom@18.2.0)(react@18.2.0)
+  graphql:
+    specifier: ^16.7.1
+    version: 16.7.1
+  graphql-type-json:
+    specifier: ^0.3.2
+    version: 0.3.2(graphql@16.7.1)
+  hooks.macro:
+    specifier: ^1.1.2
+    version: 1.1.2(react@18.2.0)
+  i18next:
+    specifier: ^23.4.1
+    version: 23.4.1
+  i18next-http-backend:
+    specifier: 2.2.1
+    version: 2.2.1(patch_hash=oxpqp5jjldpyo63xee6uzmu3na)
+  i18next-icu:
+    specifier: ^2.3.0
+    version: 2.3.0(intl-messageformat@10.5.0)
+  idb-keyval:
+    specifier: ^6.2.1
+    version: 6.2.1
+  immer:
+    specifier: ^10.0.2
+    version: 10.0.2
+  intl-messageformat:
+    specifier: ^10.5.0
+    version: 10.5.0
+  js-yaml:
+    specifier: ^4.1.0
+    version: 4.1.0
+  lodash:
+    specifier: ^4.17.21
+    version: 4.17.21
+  lodash-es:
+    specifier: ^4.17.21
+    version: 4.17.21
+  lodash.noop:
+    specifier: ^3.0.1
+    version: 3.0.1
+  lru-cache:
+    specifier: ^10.0.0
+    version: 10.0.0
+  memoize-one:
+    specifier: 6.0.0
+    version: 6.0.0
+  monaco-editor:
+    specifier: ^0.40.0
+    version: 0.40.0(patch_hash=ku3o7hkzj5ntzax27c7xlqnuoa)
+  nanoid:
+    specifier: ^4.0.2
+    version: 4.0.2
+  normalize.css:
+    specifier: ^8.0.1
+    version: 8.0.1
+  postcss:
+    specifier: ^8.4.27
+    version: 8.4.27
+  postcss-modules:
+    specifier: ^6.0.0
+    version: 6.0.0(postcss@8.4.27)
+  pouchdb-browser:
+    specifier: ^8.0.1
+    version: 8.0.1
+  prettier:
+    specifier: ^3.0.0
+    version: 3.0.0
+  react:
+    specifier: ^18.2.0
+    version: 18.2.0
+  react-dom:
+    specifier: ^18.2.0
+    version: 18.2.0(react@18.2.0)
+  react-helmet:
+    specifier: ^6.1.0
+    version: 6.1.0(react@18.2.0)
+  react-hot-toast:
+    specifier: ^2.4.1
+    version: 2.4.1(csstype@3.1.2)(react-dom@18.2.0)(react@18.2.0)
+  react-i18next:
+    specifier: ^13.0.3
+    version: 13.0.3(i18next@23.4.1)(react-dom@18.2.0)(react@18.2.0)
+  react-window:
+    specifier: ^1.8.9
+    version: 1.8.9(react-dom@18.2.0)(react@18.2.0)
+  reflect-metadata:
+    specifier: 0.1.13
+    version: 0.1.13
+  sass:
+    specifier: ^1.64.2
+    version: 1.64.2
+  scheduler:
+    specifier: ^0.23.0
+    version: 0.23.0
+  src:
+    specifier: npm:lodash.noop@3.0.1
+    version: /lodash.noop@3.0.1
+  superjson:
+    specifier: ^1.13.1
+    version: 1.13.1
+  tiny-invariant:
+    specifier: ^1.3.1
+    version: 1.3.1
+  ts-node:
+    specifier: ^10.9.1
+    version: 10.9.1(@types/node@20.4.5)(typescript@5.2.0-beta)
+  tsconfig-paths:
+    specifier: ^4.2.0
+    version: 4.2.0
+  tslib:
+    specifier: ^2.6.1
+    version: 2.6.1
+  tua-body-scroll-lock:
+    specifier: ^1.4.0
+    version: 1.4.0
+  typed-emitter:
+    specifier: ^2.1.0
+    version: 2.1.0
+  typescript:
+    specifier: 5.2.0-beta
+    version: 5.2.0-beta
+  typescript-plugin-css-modules:
+    specifier: ^5.0.1
+    version: 5.0.1(ts-node@10.9.1)(typescript@5.2.0-beta)
+  ua-parser-js:
+    specifier: ^1.0.35
+    version: 1.0.35
+  use-context-selector:
+    specifier: ^1.4.1
+    version: 1.4.1(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)
+  webextension-polyfill:
+    specifier: ^0.10.0
+    version: 0.10.0
+  zod:
+    specifier: ^3.21.4
+    version: 3.21.4
+
+packages:
+
+  /@aashutoshrathi/word-wrap@1.2.6:
+    resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /@adobe/css-tools@4.2.0:
+    resolution: {integrity: sha512-E09FiIft46CmH5Qnjb0wsW54/YQd69LsxeKUOWawmws1XWvyFGURnAChH0mlr7YPFR1ofwvUQfcL0J3lMxXqPA==}
+    dev: true
+
+  /@aet/eslint-rules@0.0.1-beta.23(eslint-plugin-import@2.28.0)(eslint@8.46.0)(typescript@5.2.0-beta):
+    resolution: {integrity: sha512-PY9/+U8z7GylKXrw+dV8TqiaKB8aMLUoZg0on598ZzFdodNHZD3fEr2EslT2i/6Mb7ujpaYxWqiDFpTosKG+UA==}
+    peerDependencies:
+      typescript: ^5.1.6
+    dependencies:
+      '@types/eslint': 8.44.1
+      '@typescript-eslint/eslint-plugin': 6.2.1(@typescript-eslint/parser@6.2.1)(eslint@8.46.0)(typescript@5.2.0-beta)
+      '@typescript-eslint/parser': 6.2.1(eslint@8.46.0)(typescript@5.2.0-beta)
+      aria-query: 5.3.0
+      axe-core: 4.7.2
+      axobject-query: 3.2.1
+      damerau-levenshtein: 1.0.8
+      debug: 4.3.4
+      doctrine: 3.0.0
+      emoji-regex: 10.2.1
+      eslint-config-prettier: 8.9.0(eslint@8.46.0)
+      eslint-define-config: 1.22.0
+      eslint-import-resolver-node: 0.3.7
+      eslint-import-resolver-typescript: 3.5.5(@typescript-eslint/parser@6.2.1)(eslint-import-resolver-node@0.3.7)(eslint-plugin-import@2.28.0)(eslint@8.46.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.2.1)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.46.0)
+      estraverse: 5.3.0
+      is-core-module: 2.12.1
+      is-glob: 4.0.3
+      language-tags: 1.0.8
+      lodash: 4.17.21
+      minimatch: 9.0.3
+      prop-types: 15.8.1
+      resolve: 2.0.0-next.4
+      semver: 7.5.4
+      tsconfig-paths: 4.2.0
+      typescript: 5.2.0-beta
+    transitivePeerDependencies:
+      - eslint
+      - eslint-import-resolver-webpack
+      - eslint-plugin-import
+      - supports-color
+    dev: true
+
+  /@aet/gql-tools@0.0.1-beta.3(patch_hash=47vkx3rn6phx3mk5fuqtmfzx34)(graphql@16.7.1)(lodash@4.17.21):
+    resolution: {integrity: sha512-yPGawDafkm+KZzc09BJNV/Qge3eIK+ZqS8MyFt44YupPbIvLwpUjrI31Glbf/RhC5oyB/iXWwJfj8XBptH1euQ==}
+    hasBin: true
+    peerDependencies:
+      graphql: ^15.0.0 || ^16.5.0
+      lodash: ^4.17.21
+    dependencies:
+      '@graphql-codegen/core': 4.0.0(graphql@16.7.1)
+      '@graphql-codegen/plugin-helpers': 5.0.1(graphql@16.7.1)
+      '@graphql-tools/load': 8.0.0(graphql@16.7.1)
+      '@graphql-tools/utils': 10.0.4(graphql@16.7.1)
+      '@prisma/generator-helper': 5.0.0
+      '@prisma/internals': 5.0.0
+      babel-plugin-macros: 3.1.0
+      class-validator: 0.14.0
+      doctrine: 3.0.0
+      graphql: 16.7.1
+      graphql-language-service: 5.1.7(graphql@16.7.1)
+      graphql-query-complexity: 0.12.0(graphql@16.7.1)
+      graphql-scalars: 1.22.2(graphql@16.7.1)
+      graphql-subscriptions: 2.0.0(graphql@16.7.1)
+      lodash: 4.17.21
+      pluralize: 8.0.0
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    dev: true
+    patched: true
+
+  /@aet/icons@0.0.1-beta.5:
+    resolution: {integrity: sha512-oSccXvjI1p8Y7TotbqsKu+lfZ5jqBtuW3I25D12aaI4wKzP9we3PJIHR53d7q1JkxrSr3JDOIivwzt3K7/nMeA==}
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /@ampproject/remapping@2.2.1:
+    resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.3
+      '@jridgewell/trace-mapping': 0.3.18
+    dev: true
+
+  /@antfu/ni@0.21.4:
+    resolution: {integrity: sha512-O0Uv9LbLDSoEg26fnMDdDRiPwFJnQSoD4WnrflDwKCJm8Cx/0mV4cGxwBLXan5mGIrpK4Dd7vizf4rQm0QCEAA==}
+    hasBin: true
+    dev: true
+
+  /@apollo/client@3.7.17(patch_hash=t7vxnytrj25ktypmqrdayqgr3y)(graphql@16.7.1)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-0EErSHEtKPNl5wgWikHJbKFAzJ/k11O0WO2QyqZSHpdxdAnw7UWHY4YiLbHCFG7lhrD+NTQ3Z/H9Jn4rcikoJA==}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
+      graphql-ws: ^5.5.5
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+      subscriptions-transport-ws: ^0.9.0 || ^0.11.0
+    peerDependenciesMeta:
+      graphql-ws:
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+      subscriptions-transport-ws:
+        optional: true
+    dependencies:
+      '@graphql-typed-document-node/core': 3.2.0(graphql@16.7.1)
+      '@wry/context': 0.7.3
+      '@wry/equality': 0.5.6
+      '@wry/trie': 0.4.3
+      graphql: 16.7.1
+      graphql-tag: 2.12.6(graphql@16.7.1)
+      hoist-non-react-statics: 3.3.2
+      optimism: 0.16.2
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      response-iterator: 0.2.6
+      symbol-observable: 4.0.0
+      ts-invariant: 0.10.3
+      tslib: 2.6.1
+      zen-observable-ts: 1.2.5
+    dev: true
+    patched: true
+
+  /@babel/code-frame@7.22.5:
+    resolution: {integrity: sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/highlight': 7.22.5
+    dev: true
+
+  /@babel/compat-data@7.22.9:
+    resolution: {integrity: sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/core@7.22.9:
+    resolution: {integrity: sha512-G2EgeufBcYw27U4hhoIwFcgc1XU7TlXJ3mv04oOv1WCuo900U/anZSPzEqNjwdjgffkk2Gs0AN0dW1CKVLcG7w==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@ampproject/remapping': 2.2.1
+      '@babel/code-frame': 7.22.5
+      '@babel/generator': 7.22.9
+      '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.22.9)
+      '@babel/helper-module-transforms': 7.22.9(@babel/core@7.22.9)
+      '@babel/helpers': 7.22.6
+      '@babel/parser': 7.22.7
+      '@babel/template': 7.22.5
+      '@babel/traverse': 7.22.8
+      '@babel/types': 7.22.5
+      convert-source-map: 1.9.0
+      debug: 4.3.4
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/generator@7.22.9:
+    resolution: {integrity: sha512-KtLMbmicyuK2Ak/FTCJVbDnkN1SlT8/kceFTiuDiiRUUSMnHMidxSCdG4ndkTOHHpoomWe/4xkvHkEOncwjYIw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.22.5
+      '@jridgewell/gen-mapping': 0.3.3
+      '@jridgewell/trace-mapping': 0.3.18
+      jsesc: 2.5.2
+    dev: true
+
+  /@babel/helper-compilation-targets@7.22.9(@babel/core@7.22.9):
+    resolution: {integrity: sha512-7qYrNM6HjpnPHJbopxmb8hSPoZ0gsX8IvUS32JGVoy+pU9e5N0nLr1VjJoR6kA4d9dmGLxNYOjeB8sUDal2WMw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/compat-data': 7.22.9
+      '@babel/core': 7.22.9
+      '@babel/helper-validator-option': 7.22.5
+      browserslist: 4.21.10
+      lru-cache: 5.1.1
+      semver: 6.3.1
+    dev: true
+
+  /@babel/helper-environment-visitor@7.22.5:
+    resolution: {integrity: sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-function-name@7.22.5:
+    resolution: {integrity: sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.22.5
+      '@babel/types': 7.22.5
+    dev: true
+
+  /@babel/helper-hoist-variables@7.22.5:
+    resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.22.5
+    dev: true
+
+  /@babel/helper-module-imports@7.22.5:
+    resolution: {integrity: sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.22.5
+    dev: true
+
+  /@babel/helper-module-transforms@7.22.9(@babel/core@7.22.9):
+    resolution: {integrity: sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.22.9
+      '@babel/helper-environment-visitor': 7.22.5
+      '@babel/helper-module-imports': 7.22.5
+      '@babel/helper-simple-access': 7.22.5
+      '@babel/helper-split-export-declaration': 7.22.6
+      '@babel/helper-validator-identifier': 7.22.5
+    dev: true
+
+  /@babel/helper-plugin-utils@7.22.5:
+    resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-simple-access@7.22.5:
+    resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.22.5
+    dev: true
+
+  /@babel/helper-split-export-declaration@7.22.6:
+    resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.22.5
+    dev: true
+
+  /@babel/helper-string-parser@7.22.5:
+    resolution: {integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-validator-identifier@7.22.5:
+    resolution: {integrity: sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-validator-option@7.22.5:
+    resolution: {integrity: sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helpers@7.22.6:
+    resolution: {integrity: sha512-YjDs6y/fVOYFV8hAf1rxd1QvR9wJe1pDBZ2AREKq/SDayfPzgk0PBnVuTCE5X1acEpMMNOVUqoe+OwiZGJ+OaA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.22.5
+      '@babel/traverse': 7.22.8
+      '@babel/types': 7.22.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/highlight@7.22.5:
+    resolution: {integrity: sha512-BSKlD1hgnedS5XRnGOljZawtag7H1yPfQp0tdNJCHoH6AZ+Pcm9VvkrK59/Yy593Ypg0zMxH2BxD1VPYUQ7UIw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.22.5
+      chalk: 2.4.2
+      js-tokens: 4.0.0
+    dev: true
+
+  /@babel/parser@7.22.7:
+    resolution: {integrity: sha512-7NF8pOkHP5o2vpmGgNGcfAeCvOYhGLyA3Z4eBQkT1RJlWu47n63bCs93QfJ2hIAFCil7L5P2IWhs1oToVgrL0Q==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.22.5
+    dev: true
+
+  /@babel/plugin-syntax-import-assertions@7.22.5(@babel/core@7.22.9):
+    resolution: {integrity: sha512-rdV97N7KqsRzeNGoWUOK6yUsWarLjE5Su/Snk9IYPU9CwkWHs4t+rTGOvffTR8XGkJMTAdLfO0xVnXm8wugIJg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.22.9
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
+  /@babel/runtime@7.22.6:
+    resolution: {integrity: sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.13.11
+    dev: true
+
+  /@babel/template@7.22.5:
+    resolution: {integrity: sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.22.5
+      '@babel/parser': 7.22.7
+      '@babel/types': 7.22.5
+    dev: true
+
+  /@babel/traverse@7.22.8:
+    resolution: {integrity: sha512-y6LPR+wpM2I3qJrsheCTwhIinzkETbplIgPBbwvqPKc+uljeA5gP+3nP8irdYt1mjQaDnlIcG+dw8OjAco4GXw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.22.5
+      '@babel/generator': 7.22.9
+      '@babel/helper-environment-visitor': 7.22.5
+      '@babel/helper-function-name': 7.22.5
+      '@babel/helper-hoist-variables': 7.22.5
+      '@babel/helper-split-export-declaration': 7.22.6
+      '@babel/parser': 7.22.7
+      '@babel/types': 7.22.5
+      debug: 4.3.4
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/types@7.22.5:
+    resolution: {integrity: sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.22.5
+      '@babel/helper-validator-identifier': 7.22.5
+      to-fast-properties: 2.0.0
+    dev: true
+
+  /@codemirror/language@6.0.0:
+    resolution: {integrity: sha512-rtjk5ifyMzOna1c7PBu7J1VCt0PvA5wy3o8eMVnxMKb7z8KA7JFecvD04dSn14vj/bBaAbqRsGed5OjtofEnLA==}
+    dependencies:
+      '@codemirror/state': 6.2.1
+      '@codemirror/view': 6.15.3
+      '@lezer/common': 1.0.3
+      '@lezer/highlight': 1.1.6
+      '@lezer/lr': 1.3.9
+      style-mod: 4.0.3
+    dev: true
+
+  /@codemirror/state@6.2.1:
+    resolution: {integrity: sha512-RupHSZ8+OjNT38zU9fKH2sv+Dnlr8Eb8sl4NOnnqz95mCFTZUaiRP8Xv5MeeaG0px2b8Bnfe7YGwCV3nsBhbuw==}
+    dev: true
+
+  /@codemirror/view@6.15.3:
+    resolution: {integrity: sha512-chNgR8H7Ipx7AZUt0+Kknk7BCow/ron3mHd1VZdM7hQXiI79+UlWqcxpCiexTxZQ+iSkqndk3HHAclJOcjSuog==}
+    dependencies:
+      '@codemirror/state': 6.2.1
+      style-mod: 4.0.3
+      w3c-keyname: 2.2.8
+    dev: true
+
+  /@cspotcode/source-map-support@0.8.1:
+    resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.9
+    dev: true
+
+  /@csstools/postcss-sass@5.0.1(postcss@8.4.27):
+    resolution: {integrity: sha512-GgQAOe6KfABEIHGh9KFqn/7sX2Dmx554PElvyhRFNADo2QV2N/CzlS+QHrrJmVJzaBn829f4JFcOd67mmYb5Eg==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.4.6
+    dependencies:
+      '@csstools/sass-import-resolve': 1.0.0
+      postcss: 8.4.27
+      sass: 1.64.2
+      source-map: 0.7.4
+    dev: true
+
+  /@csstools/sass-import-resolve@1.0.0:
+    resolution: {integrity: sha512-pH4KCsbtBLLe7eqUrw8brcuFO8IZlN36JjdKlOublibVdAIPHCzEnpBWOVUXK5sCf+DpBi8ZtuWtjF0srybdeA==}
+    engines: {node: '>=4.0.0'}
+    dev: true
+
+  /@emotion/babel-plugin@11.11.0:
+    resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==}
+    dependencies:
+      '@babel/helper-module-imports': 7.22.5
+      '@babel/runtime': 7.22.6
+      '@emotion/hash': 0.9.1
+      '@emotion/memoize': 0.8.1
+      '@emotion/serialize': 1.1.2
+      babel-plugin-macros: 3.1.0
+      convert-source-map: 1.9.0
+      escape-string-regexp: 4.0.0
+      find-root: 1.1.0
+      source-map: 0.5.7
+      stylis: 4.2.0
+    dev: true
+
+  /@emotion/cache@11.11.0:
+    resolution: {integrity: sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==}
+    dependencies:
+      '@emotion/memoize': 0.8.1
+      '@emotion/sheet': 1.2.2
+      '@emotion/utils': 1.2.1
+      '@emotion/weak-memoize': 0.3.1
+      stylis: 4.2.0
+    dev: true
+
+  /@emotion/css@11.11.2:
+    resolution: {integrity: sha512-VJxe1ucoMYMS7DkiMdC2T7PWNbrEI0a39YRiyDvK2qq4lXwjRbVP/z4lpG+odCsRzadlR+1ywwrTzhdm5HNdew==}
+    dependencies:
+      '@emotion/babel-plugin': 11.11.0
+      '@emotion/cache': 11.11.0
+      '@emotion/serialize': 1.1.2
+      '@emotion/sheet': 1.2.2
+      '@emotion/utils': 1.2.1
+    dev: true
+
+  /@emotion/hash@0.9.1:
+    resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==}
+    dev: true
+
+  /@emotion/is-prop-valid@0.8.8:
+    resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==}
+    requiresBuild: true
+    dependencies:
+      '@emotion/memoize': 0.7.4
+    dev: true
+    optional: true
+
+  /@emotion/is-prop-valid@1.2.1:
+    resolution: {integrity: sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==}
+    dependencies:
+      '@emotion/memoize': 0.8.1
+    dev: true
+
+  /@emotion/memoize@0.7.4:
+    resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==}
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@emotion/memoize@0.8.1:
+    resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==}
+    dev: true
+
+  /@emotion/react@11.11.1(@types/react@18.2.18)(react@18.2.0):
+    resolution: {integrity: sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@emotion/babel-plugin': 11.11.0
+      '@emotion/cache': 11.11.0
+      '@emotion/serialize': 1.1.2
+      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0)
+      '@emotion/utils': 1.2.1
+      '@emotion/weak-memoize': 0.3.1
+      '@types/react': 18.2.18
+      hoist-non-react-statics: 3.3.2
+      react: 18.2.0
+    dev: true
+
+  /@emotion/serialize@1.1.2:
+    resolution: {integrity: sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==}
+    dependencies:
+      '@emotion/hash': 0.9.1
+      '@emotion/memoize': 0.8.1
+      '@emotion/unitless': 0.8.1
+      '@emotion/utils': 1.2.1
+      csstype: 3.1.2
+    dev: true
+
+  /@emotion/sheet@1.2.2:
+    resolution: {integrity: sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==}
+    dev: true
+
+  /@emotion/styled@11.11.0(@emotion/react@11.11.1)(@types/react@18.2.18)(react@18.2.0):
+    resolution: {integrity: sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==}
+    peerDependencies:
+      '@emotion/react': ^11.0.0-rc.0
+      '@types/react': '*'
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@emotion/babel-plugin': 11.11.0
+      '@emotion/is-prop-valid': 1.2.1
+      '@emotion/react': 11.11.1(@types/react@18.2.18)(react@18.2.0)
+      '@emotion/serialize': 1.1.2
+      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0)
+      '@emotion/utils': 1.2.1
+      '@types/react': 18.2.18
+      react: 18.2.0
+    dev: true
+
+  /@emotion/unitless@0.8.1:
+    resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
+    dev: true
+
+  /@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.2.0):
+    resolution: {integrity: sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==}
+    peerDependencies:
+      react: '>=16.8.0'
+    dependencies:
+      react: 18.2.0
+    dev: true
+
+  /@emotion/utils@1.2.1:
+    resolution: {integrity: sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==}
+    dev: true
+
+  /@emotion/weak-memoize@0.3.1:
+    resolution: {integrity: sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==}
+    dev: true
+
+  /@esbuild/android-arm64@0.18.17:
+    resolution: {integrity: sha512-9np+YYdNDed5+Jgr1TdWBsozZ85U1Oa3xW0c7TWqH0y2aGghXtZsuT8nYRbzOMcl0bXZXjOGbksoTtVOlWrRZg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-arm@0.18.17:
+    resolution: {integrity: sha512-wHsmJG/dnL3OkpAcwbgoBTTMHVi4Uyou3F5mf58ZtmUyIKfcdA7TROav/6tCzET4A3QW2Q2FC+eFneMU+iyOxg==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-x64@0.18.17:
+    resolution: {integrity: sha512-O+FeWB/+xya0aLg23hHEM2E3hbfwZzjqumKMSIqcHbNvDa+dza2D0yLuymRBQQnC34CWrsJUXyH2MG5VnLd6uw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/darwin-arm64@0.18.17:
+    resolution: {integrity: sha512-M9uJ9VSB1oli2BE/dJs3zVr9kcCBBsE883prage1NWz6pBS++1oNn/7soPNS3+1DGj0FrkSvnED4Bmlu1VAE9g==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/darwin-x64@0.18.17:
+    resolution: {integrity: sha512-XDre+J5YeIJDMfp3n0279DFNrGCXlxOuGsWIkRb1NThMZ0BsrWXoTg23Jer7fEXQ9Ye5QjrvXpxnhzl3bHtk0g==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/freebsd-arm64@0.18.17:
+    resolution: {integrity: sha512-cjTzGa3QlNfERa0+ptykyxs5A6FEUQQF0MuilYXYBGdBxD3vxJcKnzDlhDCa1VAJCmAxed6mYhA2KaJIbtiNuQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/freebsd-x64@0.18.17:
+    resolution: {integrity: sha512-sOxEvR8d7V7Kw8QqzxWc7bFfnWnGdaFBut1dRUYtu+EIRXefBc/eIsiUiShnW0hM3FmQ5Zf27suDuHsKgZ5QrA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-arm64@0.18.17:
+    resolution: {integrity: sha512-c9w3tE7qA3CYWjT+M3BMbwMt+0JYOp3vCMKgVBrCl1nwjAlOMYzEo+gG7QaZ9AtqZFj5MbUc885wuBBmu6aADQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-arm@0.18.17:
+    resolution: {integrity: sha512-2d3Lw6wkwgSLC2fIvXKoMNGVaeY8qdN0IC3rfuVxJp89CRfA3e3VqWifGDfuakPmp90+ZirmTfye1n4ncjv2lg==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-ia32@0.18.17:
+    resolution: {integrity: sha512-1DS9F966pn5pPnqXYz16dQqWIB0dmDfAQZd6jSSpiT9eX1NzKh07J6VKR3AoXXXEk6CqZMojiVDSZi1SlmKVdg==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-loong64@0.18.17:
+    resolution: {integrity: sha512-EvLsxCk6ZF0fpCB6w6eOI2Fc8KW5N6sHlIovNe8uOFObL2O+Mr0bflPHyHwLT6rwMg9r77WOAWb2FqCQrVnwFg==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-mips64el@0.18.17:
+    resolution: {integrity: sha512-e0bIdHA5p6l+lwqTE36NAW5hHtw2tNRmHlGBygZC14QObsA3bD4C6sXLJjvnDIjSKhW1/0S3eDy+QmX/uZWEYQ==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-ppc64@0.18.17:
+    resolution: {integrity: sha512-BAAilJ0M5O2uMxHYGjFKn4nJKF6fNCdP1E0o5t5fvMYYzeIqy2JdAP88Az5LHt9qBoUa4tDaRpfWt21ep5/WqQ==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-riscv64@0.18.17:
+    resolution: {integrity: sha512-Wh/HW2MPnC3b8BqRSIme/9Zhab36PPH+3zam5pqGRH4pE+4xTrVLx2+XdGp6fVS3L2x+DrsIcsbMleex8fbE6g==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-s390x@0.18.17:
+    resolution: {integrity: sha512-j/34jAl3ul3PNcK3pfI0NSlBANduT2UO5kZ7FCaK33XFv3chDhICLY8wJJWIhiQ+YNdQ9dxqQctRg2bvrMlYgg==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-x64@0.18.17:
+    resolution: {integrity: sha512-QM50vJ/y+8I60qEmFxMoxIx4de03pGo2HwxdBeFd4nMh364X6TIBZ6VQ5UQmPbQWUVWHWws5MmJXlHAXvJEmpQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/netbsd-x64@0.18.17:
+    resolution: {integrity: sha512-/jGlhWR7Sj9JPZHzXyyMZ1RFMkNPjC6QIAan0sDOtIo2TYk3tZn5UDrkE0XgsTQCxWTTOcMPf9p6Rh2hXtl5TQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/openbsd-x64@0.18.17:
+    resolution: {integrity: sha512-rSEeYaGgyGGf4qZM2NonMhMOP/5EHp4u9ehFiBrg7stH6BYEEjlkVREuDEcQ0LfIl53OXLxNbfuIj7mr5m29TA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/sunos-x64@0.18.17:
+    resolution: {integrity: sha512-Y7ZBbkLqlSgn4+zot4KUNYst0bFoO68tRgI6mY2FIM+b7ZbyNVtNbDP5y8qlu4/knZZ73fgJDlXID+ohY5zt5g==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-arm64@0.18.17:
+    resolution: {integrity: sha512-bwPmTJsEQcbZk26oYpc4c/8PvTY3J5/QK8jM19DVlEsAB41M39aWovWoHtNm78sd6ip6prilxeHosPADXtEJFw==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-ia32@0.18.17:
+    resolution: {integrity: sha512-H/XaPtPKli2MhW+3CQueo6Ni3Avggi6hP/YvgkEe1aSaxw+AeO8MFjq8DlgfTd9Iz4Yih3QCZI6YLMoyccnPRg==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-x64@0.18.17:
+    resolution: {integrity: sha512-fGEb8f2BSA3CW7riJVurug65ACLuQAzKq0SSqkY2b2yHHH0MzDfbLyKIGzHwOI/gkHcxM/leuSW6D5w/LMNitA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@eslint-community/eslint-utils@4.4.0(eslint@8.46.0):
+    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+    dependencies:
+      eslint: 8.46.0
+      eslint-visitor-keys: 3.4.2
+    dev: true
+
+  /@eslint-community/regexpp@4.6.2:
+    resolution: {integrity: sha512-pPTNuaAG3QMH+buKyBIGJs3g/S5y0caxw0ygM3YyE6yJFySwiGGSzA+mM3KJ8QQvzeLh3blwgSonkFjgQdxzMw==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+    dev: true
+
+  /@eslint/eslintrc@2.1.1:
+    resolution: {integrity: sha512-9t7ZA7NGGK8ckelF0PQCfcxIUzs1Md5rrO6U/c+FIQNanea5UZC0wqKXH4vHBccmu4ZJgZ2idtPeW7+Q2npOEA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.3.4
+      espree: 9.6.1
+      globals: 13.20.0
+      ignore: 5.2.4
+      import-fresh: 3.3.0
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@eslint/js@8.46.0:
+    resolution: {integrity: sha512-a8TLtmPi8xzPkCbp/OGFUo5yhRkHM2Ko9kOWP4znJr0WAhWyThaw3PnwX4vOTWOAMsV2uRt32PPDcEz63esSaA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
+
+  /@floating-ui/core@1.3.1:
+    resolution: {integrity: sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==}
+    dev: true
+
+  /@floating-ui/dom@1.4.5:
+    resolution: {integrity: sha512-96KnRWkRnuBSSFbj0sFGwwOUd8EkiecINVl0O9wiZlZ64EkpyAOG3Xc2vKKNJmru0Z7RqWNymA+6b8OZqjgyyw==}
+    dependencies:
+      '@floating-ui/core': 1.3.1
+    dev: true
+
+  /@floating-ui/react-dom@2.0.1(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-rZtAmSht4Lry6gdhAJDrCp/6rKN7++JnL1/Anbr/DdeyYXQPxvg/ivrbYvJulbRf4vL8b212suwMM2lxbv+RQA==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+    dependencies:
+      '@floating-ui/dom': 1.4.5
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /@formatjs/ecma402-abstract@1.17.0:
+    resolution: {integrity: sha512-6ueQTeJZtwKjmh23bdkq/DMqH4l4bmfvtQH98blOSbiXv/OUiyijSW6jU22IT8BNM1ujCaEvJfTtyCYVH38EMQ==}
+    dependencies:
+      '@formatjs/intl-localematcher': 0.4.0
+      tslib: 2.6.1
+    dev: true
+
+  /@formatjs/fast-memoize@2.2.0:
+    resolution: {integrity: sha512-hnk/nY8FyrL5YxwP9e4r9dqeM6cAbo8PeU9UjyXojZMNvVad2Z06FAVHyR3Ecw6fza+0GH7vdJgiKIVXTMbSBA==}
+    dependencies:
+      tslib: 2.6.1
+    dev: true
+
+  /@formatjs/icu-messageformat-parser@2.6.0:
+    resolution: {integrity: sha512-yT6at0qc0DANw9qM/TU8RZaCtfDXtj4pZM/IC2WnVU80yAcliS3KVDiuUt4jSQAeFL9JS5bc2hARnFmjPdA6qw==}
+    dependencies:
+      '@formatjs/ecma402-abstract': 1.17.0
+      '@formatjs/icu-skeleton-parser': 1.6.0
+      tslib: 2.6.1
+    dev: true
+
+  /@formatjs/icu-skeleton-parser@1.6.0:
+    resolution: {integrity: sha512-eMmxNpoX/J1IPUjPGSZwo0Wh+7CEvdEMddP2Jxg1gQJXfGfht/FdW2D5XDFj3VMbOTUQlDIdZJY7uC6O6gjPoA==}
+    dependencies:
+      '@formatjs/ecma402-abstract': 1.17.0
+      tslib: 2.6.1
+    dev: true
+
+  /@formatjs/intl-localematcher@0.4.0:
+    resolution: {integrity: sha512-bRTd+rKomvfdS4QDlVJ6TA/Jx1F2h/TBVO5LjvhQ7QPPHp19oPNMIum7W2CMEReq/zPxpmCeB31F9+5gl/qtvw==}
+    dependencies:
+      tslib: 2.6.1
+    dev: true
+
+  /@graphiql/react@0.19.3(@codemirror/language@6.0.0)(@types/node@20.4.5)(@types/react-dom@18.2.7)(@types/react@18.2.18)(graphql@16.7.1)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-rpxKcmKPhyGfZo1w9h3+E5FY+LXOn8o5fJxpJd2MbLF8segvvWLtJeXL46Q2IkEFqR4uxf00NUTbCwXjRIVaQQ==}
+    peerDependencies:
+      graphql: ^15.5.0 || ^16.0.0
+      react: ^16.8.0 || ^17 || ^18
+      react-dom: ^16.8.0 || ^17 || ^18
+    dependencies:
+      '@graphiql/toolkit': 0.9.1(@types/node@20.4.5)(graphql@16.7.1)
+      '@headlessui/react': 1.7.16(patch_hash=nwe5csvy6f3sk73c47zwlim4za)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dialog': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dropdown-menu': 2.0.5(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-tooltip': 1.0.6(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@types/codemirror': 5.60.8
+      clsx: 1.2.1
+      codemirror: 5.65.14
+      codemirror-graphql: 2.0.9(@codemirror/language@6.0.0)(codemirror@5.65.14)(graphql@16.7.1)
+      copy-to-clipboard: 3.3.3
+      framer-motion: 6.5.1(react-dom@18.2.0)(react@18.2.0)
+      graphql: 16.7.1
+      graphql-language-service: 5.1.7(graphql@16.7.1)
+      markdown-it: 12.3.2
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      set-value: 4.1.0
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@types/node'
+      - '@types/react'
+      - '@types/react-dom'
+      - graphql-ws
+    dev: true
+
+  /@graphiql/toolkit@0.9.1(@types/node@20.4.5)(graphql@16.7.1):
+    resolution: {integrity: sha512-LVt9pdk0830so50ZnU2Znb2rclcoWznG8r8asqAENzV0U1FM1kuY0sdPpc/rBc9MmmNgnB6A+WZzDhq6dbhTHA==}
+    peerDependencies:
+      graphql: ^15.5.0 || ^16.0.0
+      graphql-ws: '>= 4.5.0'
+    peerDependenciesMeta:
+      graphql-ws:
+        optional: true
+    dependencies:
+      '@n1ru4l/push-pull-async-iterable-iterator': 3.2.0
+      graphql: 16.7.1
+      meros: 1.3.0(@types/node@20.4.5)
+    transitivePeerDependencies:
+      - '@types/node'
+    dev: true
+
+  /@graphql-codegen/add@5.0.0(graphql@16.7.1):
+    resolution: {integrity: sha512-ynWDOsK2yxtFHwcJTB9shoSkUd7YXd6ZE57f0nk7W5cu/nAgxZZpEsnTPEpZB/Mjf14YRGe2uJHQ7AfElHjqUQ==}
+    peerDependencies:
+      graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      '@graphql-codegen/plugin-helpers': 5.0.1(graphql@16.7.1)
+      graphql: 16.7.1
+      tslib: 2.5.3
+    dev: true
+
+  /@graphql-codegen/core@4.0.0(graphql@16.7.1):
+    resolution: {integrity: sha512-JAGRn49lEtSsZVxeIlFVIRxts2lWObR+OQo7V2LHDJ7ohYYw3ilv7nJ8pf8P4GTg/w6ptcYdSdVVdkI8kUHB/Q==}
+    peerDependencies:
+      graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      '@graphql-codegen/plugin-helpers': 5.0.1(graphql@16.7.1)
+      '@graphql-tools/schema': 10.0.0(graphql@16.7.1)
+      '@graphql-tools/utils': 10.0.4(graphql@16.7.1)
+      graphql: 16.7.1
+      tslib: 2.5.3
+    dev: true
+
+  /@graphql-codegen/plugin-helpers@5.0.1(graphql@16.7.1):
+    resolution: {integrity: sha512-6L5sb9D8wptZhnhLLBcheSPU7Tg//DGWgc5tQBWX46KYTOTQHGqDpv50FxAJJOyFVJrveN9otWk9UT9/yfY4ww==}
+    peerDependencies:
+      graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      '@graphql-tools/utils': 10.0.4(graphql@16.7.1)
+      change-case-all: 1.0.15
+      common-tags: 1.8.2
+      graphql: 16.7.1
+      import-from: 4.0.0
+      lodash: 4.17.21
+      tslib: 2.5.3
+    dev: true
+
+  /@graphql-codegen/schema-ast@4.0.0(graphql@16.7.1):
+    resolution: {integrity: sha512-WIzkJFa9Gz28FITAPILbt+7A8+yzOyd1NxgwFh7ie+EmO9a5zQK6UQ3U/BviirguXCYnn+AR4dXsoDrSrtRA1g==}
+    peerDependencies:
+      graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      '@graphql-codegen/plugin-helpers': 5.0.1(graphql@16.7.1)
+      '@graphql-tools/utils': 10.0.4(graphql@16.7.1)
+      graphql: 16.7.1
+      tslib: 2.5.3
+    dev: true
+
+  /@graphql-codegen/typescript-operations@4.0.1(graphql@16.7.1):
+    resolution: {integrity: sha512-GpUWWdBVUec/Zqo23aFLBMrXYxN2irypHqDcKjN78JclDPdreasAEPcIpMfqf4MClvpmvDLy4ql+djVAwmkjbw==}
+    peerDependencies:
+      graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      '@graphql-codegen/plugin-helpers': 5.0.1(graphql@16.7.1)
+      '@graphql-codegen/typescript': 4.0.1(graphql@16.7.1)
+      '@graphql-codegen/visitor-plugin-common': 4.0.1(graphql@16.7.1)
+      auto-bind: 4.0.0
+      graphql: 16.7.1
+      tslib: 2.5.3
+    dev: true
+
+  /@graphql-codegen/typescript@4.0.1(graphql@16.7.1):
+    resolution: {integrity: sha512-3YziQ21dCVdnHb+Us1uDb3pA6eG5Chjv0uTK+bt9dXeMlwYBU8MbtzvQTo4qvzWVC1AxSOKj0rgfNu1xCXqJyA==}
+    peerDependencies:
+      graphql: ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      '@graphql-codegen/plugin-helpers': 5.0.1(graphql@16.7.1)
+      '@graphql-codegen/schema-ast': 4.0.0(graphql@16.7.1)
+      '@graphql-codegen/visitor-plugin-common': 4.0.1(graphql@16.7.1)
+      auto-bind: 4.0.0
+      graphql: 16.7.1
+      tslib: 2.5.3
+    dev: true
+
+  /@graphql-codegen/visitor-plugin-common@4.0.1(graphql@16.7.1):
+    resolution: {integrity: sha512-Bi/1z0nHg4QMsAqAJhds+ForyLtk7A3HQOlkrZNm3xEkY7lcBzPtiOTLBtvziwopBsXUxqeSwVjOOFPLS5Yw1Q==}
+    peerDependencies:
+      graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      '@graphql-codegen/plugin-helpers': 5.0.1(graphql@16.7.1)
+      '@graphql-tools/optimize': 2.0.0(graphql@16.7.1)
+      '@graphql-tools/relay-operation-optimizer': link:node_modules/lodash.noop
+      '@graphql-tools/utils': 10.0.4(graphql@16.7.1)
+      auto-bind: 4.0.0
+      change-case-all: 1.0.15
+      dependency-graph: 0.11.0
+      graphql: 16.7.1
+      graphql-tag: 2.12.6(graphql@16.7.1)
+      parse-filepath: 1.0.2
+      tslib: 2.5.3
+    dev: true
+
+  /@graphql-tools/code-file-loader@8.0.2(graphql@16.7.1):
+    resolution: {integrity: sha512-AKNpkElUL2cWocYpC4DzNEpo6qJw8Lp+L3bKQ/mIfmbsQxgLz5uve6zHBMhDaFPdlwfIox41N3iUSvi77t9e8A==}
+    engines: {node: '>=16.0.0'}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+    dependencies:
+      '@graphql-tools/graphql-tag-pluck': 8.0.2(graphql@16.7.1)
+      '@graphql-tools/utils': 10.0.4(graphql@16.7.1)
+      globby: 11.1.0
+      graphql: 16.7.1
+      tslib: 2.6.1
+      unixify: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@graphql-tools/graphql-file-loader@8.0.0(graphql@16.7.1):
+    resolution: {integrity: sha512-wRXj9Z1IFL3+zJG1HWEY0S4TXal7+s1vVhbZva96MSp0kbb/3JBF7j0cnJ44Eq0ClccMgGCDFqPFXty4JlpaPg==}
+    engines: {node: '>=16.0.0'}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+    dependencies:
+      '@graphql-tools/import': 7.0.0(graphql@16.7.1)
+      '@graphql-tools/utils': 10.0.4(graphql@16.7.1)
+      globby: 11.1.0
+      graphql: 16.7.1
+      tslib: 2.6.1
+      unixify: 1.0.0
+    dev: true
+
+  /@graphql-tools/graphql-tag-pluck@8.0.2(graphql@16.7.1):
+    resolution: {integrity: sha512-U6fE4yEHxuk/nqmPixHpw1WhqdS6aYuaV60m1bEmUmGJNbpAhaMBy01JncpvpF15yZR5LZ0UjkHg+A3Lhoc8YQ==}
+    engines: {node: '>=16.0.0'}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+    dependencies:
+      '@babel/core': 7.22.9
+      '@babel/parser': 7.22.7
+      '@babel/plugin-syntax-import-assertions': 7.22.5(@babel/core@7.22.9)
+      '@babel/traverse': 7.22.8
+      '@babel/types': 7.22.5
+      '@graphql-tools/utils': 10.0.4(graphql@16.7.1)
+      graphql: 16.7.1
+      tslib: 2.6.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@graphql-tools/import@7.0.0(graphql@16.7.1):
+    resolution: {integrity: sha512-NVZiTO8o1GZs6OXzNfjB+5CtQtqsZZpQOq+Uu0w57kdUkT4RlQKlwhT8T81arEsbV55KpzkpFsOZP7J1wdmhBw==}
+    engines: {node: '>=16.0.0'}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+    dependencies:
+      '@graphql-tools/utils': 10.0.4(graphql@16.7.1)
+      graphql: 16.7.1
+      resolve-from: 5.0.0
+      tslib: 2.6.1
+    dev: true
+
+  /@graphql-tools/load@8.0.0(graphql@16.7.1):
+    resolution: {integrity: sha512-Cy874bQJH0FP2Az7ELPM49iDzOljQmK1PPH6IuxsWzLSTxwTqd8dXA09dcVZrI7/LsN26heTY2R8q2aiiv0GxQ==}
+    engines: {node: '>=16.0.0'}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+    dependencies:
+      '@graphql-tools/schema': 10.0.0(graphql@16.7.1)
+      '@graphql-tools/utils': 10.0.4(graphql@16.7.1)
+      graphql: 16.7.1
+      p-limit: 3.1.0
+      tslib: 2.6.1
+    dev: true
+
+  /@graphql-tools/merge@9.0.0(graphql@16.7.1):
+    resolution: {integrity: sha512-J7/xqjkGTTwOJmaJQJ2C+VDBDOWJL3lKrHJN4yMaRLAJH3PosB7GiPRaSDZdErs0+F77sH2MKs2haMMkywzx7Q==}
+    engines: {node: '>=16.0.0'}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+    dependencies:
+      '@graphql-tools/utils': 10.0.4(graphql@16.7.1)
+      graphql: 16.7.1
+      tslib: 2.6.1
+    dev: true
+
+  /@graphql-tools/optimize@2.0.0(graphql@16.7.1):
+    resolution: {integrity: sha512-nhdT+CRGDZ+bk68ic+Jw1OZ99YCDIKYA5AlVAnBHJvMawSx9YQqQAIj4refNc1/LRieGiuWvhbG3jvPVYho0Dg==}
+    engines: {node: '>=16.0.0'}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+    dependencies:
+      graphql: 16.7.1
+      tslib: 2.6.1
+    dev: true
+
+  /@graphql-tools/schema@10.0.0(graphql@16.7.1):
+    resolution: {integrity: sha512-kf3qOXMFcMs2f/S8Y3A8fm/2w+GaHAkfr3Gnhh2LOug/JgpY/ywgFVxO3jOeSpSEdoYcDKLcXVjMigNbY4AdQg==}
+    engines: {node: '>=16.0.0'}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+    dependencies:
+      '@graphql-tools/merge': 9.0.0(graphql@16.7.1)
+      '@graphql-tools/utils': 10.0.4(graphql@16.7.1)
+      graphql: 16.7.1
+      tslib: 2.6.1
+      value-or-promise: 1.0.12
+    dev: true
+
+  /@graphql-tools/utils@10.0.4(graphql@16.7.1):
+    resolution: {integrity: sha512-MF+nZgGROSnFgyOYWhrl2PuJMlIBvaCH48vtnlnDQKSeDc2fUfOzUVloBAQvnYmK9JBmHHks4Pxv25Ybg3r45Q==}
+    engines: {node: '>=16.0.0'}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+    dependencies:
+      '@graphql-typed-document-node/core': 3.2.0(graphql@16.7.1)
+      dset: 3.1.2
+      graphql: 16.7.1
+      tslib: 2.6.1
+    dev: true
+
+  /@graphql-typed-document-node/core@3.2.0(graphql@16.7.1):
+    resolution: {integrity: sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==}
+    peerDependencies:
+      graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+    dependencies:
+      graphql: 16.7.1
+    dev: true
+
+  /@headlessui/react@1.7.16(patch_hash=nwe5csvy6f3sk73c47zwlim4za)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-2MphIAZdSUacZBT6EXk8AJkj+EuvaaJbtCyHTJrPsz8inhzCl7qeNPI1uk1AUvCgWylVtdN8cVVmnhUDPxPy3g==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: ^16 || ^17 || ^18
+      react-dom: ^16 || ^17 || ^18
+    dependencies:
+      client-only: 0.0.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: true
+    patched: true
+
+  /@humanwhocodes/config-array@0.11.10:
+    resolution: {integrity: sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==}
+    engines: {node: '>=10.10.0'}
+    dependencies:
+      '@humanwhocodes/object-schema': 1.2.1
+      debug: 4.3.4
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@humanwhocodes/module-importer@1.0.1:
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
+    dev: true
+
+  /@humanwhocodes/object-schema@1.2.1:
+    resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
+    dev: true
+
+  /@jridgewell/gen-mapping@0.3.3:
+    resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/set-array': 1.1.2
+      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/trace-mapping': 0.3.18
+    dev: true
+
+  /@jridgewell/resolve-uri@3.1.0:
+    resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==}
+    engines: {node: '>=6.0.0'}
+    dev: true
+
+  /@jridgewell/resolve-uri@3.1.1:
+    resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
+    engines: {node: '>=6.0.0'}
+    dev: true
+
+  /@jridgewell/set-array@1.1.2:
+    resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
+    engines: {node: '>=6.0.0'}
+    dev: true
+
+  /@jridgewell/sourcemap-codec@1.4.14:
+    resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
+    dev: true
+
+  /@jridgewell/sourcemap-codec@1.4.15:
+    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
+    dev: true
+
+  /@jridgewell/trace-mapping@0.3.18:
+    resolution: {integrity: sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==}
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.0
+      '@jridgewell/sourcemap-codec': 1.4.14
+    dev: true
+
+  /@jridgewell/trace-mapping@0.3.9:
+    resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.1
+      '@jridgewell/sourcemap-codec': 1.4.15
+    dev: true
+
+  /@lezer/common@1.0.3:
+    resolution: {integrity: sha512-JH4wAXCgUOcCGNekQPLhVeUtIqjH0yPBs7vvUdSjyQama9618IOKFJwkv2kcqdhF0my8hQEgCTEJU0GIgnahvA==}
+    dev: true
+
+  /@lezer/highlight@1.1.6:
+    resolution: {integrity: sha512-cmSJYa2us+r3SePpRCjN5ymCqCPv+zyXmDl0ciWtVaNiORT/MxM7ZgOMQZADD0o51qOaOg24qc/zBViOIwAjJg==}
+    dependencies:
+      '@lezer/common': 1.0.3
+    dev: true
+
+  /@lezer/lr@1.3.9:
+    resolution: {integrity: sha512-XPz6dzuTHlnsbA5M2DZgjflNQ+9Hi5Swhic0RULdp3oOs3rh6bqGZolosVqN/fQIT8uNiepzINJDnS39oweTHQ==}
+    dependencies:
+      '@lezer/common': 1.0.3
+    dev: true
+
+  /@monaco-editor/loader@1.3.3(monaco-editor@0.40.0):
+    resolution: {integrity: sha512-6KKF4CTzcJiS8BJwtxtfyYt9shBiEv32ateQ9T4UVogwn4HM/uPo9iJd2Dmbkpz8CM6Y0PDUpjnZzCwC+eYo2Q==}
+    peerDependencies:
+      monaco-editor: '>= 0.21.0 < 1'
+    dependencies:
+      monaco-editor: 0.40.0(patch_hash=ku3o7hkzj5ntzax27c7xlqnuoa)
+      state-local: 1.0.7
+    dev: true
+
+  /@monaco-editor/react@4.5.1(monaco-editor@0.40.0)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-NNDFdP+2HojtNhCkRfE6/D6ro6pBNihaOzMbGK84lNWzRu+CfBjwzGt4jmnqimLuqp5yE5viHS2vi+QOAnD5FQ==}
+    peerDependencies:
+      monaco-editor: '>= 0.25.0 < 1'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@monaco-editor/loader': 1.3.3(monaco-editor@0.40.0)
+      monaco-editor: 0.40.0(patch_hash=ku3o7hkzj5ntzax27c7xlqnuoa)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /@motionone/animation@10.15.1:
+    resolution: {integrity: sha512-mZcJxLjHor+bhcPuIFErMDNyrdb2vJur8lSfMCsuCB4UyV8ILZLvK+t+pg56erv8ud9xQGK/1OGPt10agPrCyQ==}
+    dependencies:
+      '@motionone/easing': 10.15.1
+      '@motionone/types': 10.15.1
+      '@motionone/utils': 10.15.1
+      tslib: 2.6.1
+    dev: true
+
+  /@motionone/dom@10.12.0:
+    resolution: {integrity: sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==}
+    dependencies:
+      '@motionone/animation': 10.15.1
+      '@motionone/generators': 10.15.1
+      '@motionone/types': 10.15.1
+      '@motionone/utils': 10.15.1
+      hey-listen: 1.0.8
+      tslib: 2.6.1
+    dev: true
+
+  /@motionone/easing@10.15.1:
+    resolution: {integrity: sha512-6hIHBSV+ZVehf9dcKZLT7p5PEKHGhDwky2k8RKkmOvUoYP3S+dXsKupyZpqx5apjd9f+php4vXk4LuS+ADsrWw==}
+    dependencies:
+      '@motionone/utils': 10.15.1
+      tslib: 2.6.1
+    dev: true
+
+  /@motionone/generators@10.15.1:
+    resolution: {integrity: sha512-67HLsvHJbw6cIbLA/o+gsm7h+6D4Sn7AUrB/GPxvujse1cGZ38F5H7DzoH7PhX+sjvtDnt2IhFYF2Zp1QTMKWQ==}
+    dependencies:
+      '@motionone/types': 10.15.1
+      '@motionone/utils': 10.15.1
+      tslib: 2.6.1
+    dev: true
+
+  /@motionone/types@10.15.1:
+    resolution: {integrity: sha512-iIUd/EgUsRZGrvW0jqdst8st7zKTzS9EsKkP+6c6n4MPZoQHwiHuVtTQLD6Kp0bsBLhNzKIBlHXponn/SDT4hA==}
+    dev: true
+
+  /@motionone/utils@10.15.1:
+    resolution: {integrity: sha512-p0YncgU+iklvYr/Dq4NobTRdAPv9PveRDUXabPEeOjBLSO/1FNB2phNTZxOxpi1/GZwYpAoECEa0Wam+nsmhSw==}
+    dependencies:
+      '@motionone/types': 10.15.1
+      hey-listen: 1.0.8
+      tslib: 2.6.1
+    dev: true
+
+  /@n1ru4l/push-pull-async-iterable-iterator@3.2.0:
+    resolution: {integrity: sha512-3fkKj25kEjsfObL6IlKPAlHYPq/oYwUkkQ03zsTTiDjD7vg/RxjdiLeCydqtxHZP0JgsXL3D/X5oAkMGzuUp/Q==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /@nodelib/fs.scandir@2.1.5:
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+    dev: true
+
+  /@nodelib/fs.stat@2.0.5:
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+    dev: true
+
+  /@nodelib/fs.walk@1.2.8:
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.15.0
+    dev: true
+
+  /@opentelemetry/api@1.4.1:
+    resolution: {integrity: sha512-O2yRJce1GOc6PAy3QxFM4NzFiWzvScDC1/5ihYBL6BUEVdq0XMWN01sppE+H6bBXbaFYipjwFLEWLg5PaSOThA==}
+    engines: {node: '>=8.0.0'}
+    dev: true
+
+  /@pkgr/utils@2.4.2:
+    resolution: {integrity: sha512-POgTXhjrTfbTV63DiFXav4lBHiICLKKwDeaKn9Nphwj7WH6m0hMMCaJkMyRWjgtPFyRKRVoMXXjczsTQRDEhYw==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+    dependencies:
+      cross-spawn: 7.0.3
+      fast-glob: 3.3.1
+      is-glob: 4.0.3
+      open: 9.1.0
+      picocolors: 1.0.0
+      tslib: 2.6.1
+    dev: true
+
+  /@primer/primitives@7.11.14:
+    resolution: {integrity: sha512-z/yUTEkbGhvFqoJ8rpLz3pHJfLNRdoyNd/xNdAl/LKqA97Z60tsSVJMfxNMXi3aS9dCIC1dexK5/Gp4y9JrRkg==}
+    dev: true
+
+  /@prisma/debug@5.0.0:
+    resolution: {integrity: sha512-3q/M/KqlQ01/HJXifU/zCNOHkoTWu24kGelMF/IBrRxm7njPqTTbwfnT1dh4JK+nuWM5/Dg1Lv00u2c0l7AHxg==}
+    dependencies:
+      '@types/debug': 4.1.8
+      debug: 4.3.4
+      strip-ansi: 6.0.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@prisma/engines@5.0.0:
+    resolution: {integrity: sha512-kyT/8fd0OpWmhAU5YnY7eP31brW1q1YrTGoblWrhQJDiN/1K+Z8S1kylcmtjqx5wsUGcP1HBWutayA/jtyt+sg==}
+    requiresBuild: true
+    dev: true
+
+  /@prisma/fetch-engine@5.0.0:
+    resolution: {integrity: sha512-eSzHTE0KcMvM5+O1++eaMuVf4D1zwWHdqjWr6D70skCg37q7RYsuty4GFnlWBuqC4aXwVf06EvIxiJ0SQIIeRw==}
+    dependencies:
+      '@prisma/debug': 5.0.0
+      '@prisma/get-platform': 5.0.0
+      execa: 5.1.1
+      find-cache-dir: 3.3.2
+      fs-extra: 11.1.1
+      hasha: 5.2.2
+      http-proxy-agent: 7.0.0
+      https-proxy-agent: 7.0.0
+      kleur: 4.1.5
+      node-fetch: 2.6.12
+      p-filter: 2.1.0
+      p-map: 4.0.0
+      p-retry: 4.6.2
+      progress: 2.0.3
+      rimraf: 3.0.2
+      temp-dir: 2.0.0
+      tempy: 1.0.1
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    dev: true
+
+  /@prisma/generator-helper@5.0.0:
+    resolution: {integrity: sha512-pufQ1mhoH6WzKNtzL79HZDoW4Ql3Lf8QEKVmBoW8e3Tdb50bxpYBYue5LBqp9vNW1xd1pgZO53cNiRfLX2d4Zg==}
+    dependencies:
+      '@prisma/debug': 5.0.0
+      '@types/cross-spawn': 6.0.2
+      cross-spawn: 7.0.3
+      kleur: 4.1.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@prisma/get-platform@5.0.0:
+    resolution: {integrity: sha512-JT/rz/jaMTggDkd9OIma50si9rPLzSFe7XSrV3mKXwtv9t+rdwx5ZhmKJd+Rz6S1vhn/291k21JLfaxOW6u8KQ==}
+    dependencies:
+      '@prisma/debug': 5.0.0
+      escape-string-regexp: 4.0.0
+      execa: 5.1.1
+      fs-jetpack: 5.1.0
+      kleur: 4.1.5
+      replace-string: 3.1.0
+      strip-ansi: 6.0.1
+      tempy: 1.0.1
+      terminal-link: 2.1.1
+      ts-pattern: 4.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@prisma/internals@5.0.0:
+    resolution: {integrity: sha512-VGWyFk6QlSBXT8z65Alq5F3o9E8IiTtaBoa3rmKkGpZjUk85kJy3jZz4xkRv53TaeghGE5rWfwkfak26KtY5yQ==}
+    dependencies:
+      '@antfu/ni': 0.21.4
+      '@opentelemetry/api': 1.4.1
+      '@prisma/debug': 5.0.0
+      '@prisma/engines': 5.0.0
+      '@prisma/fetch-engine': 5.0.0
+      '@prisma/generator-helper': 5.0.0
+      '@prisma/get-platform': 5.0.0
+      '@prisma/prisma-schema-wasm': 4.17.0-26.6b0aef69b7cdfc787f822ecd7cdc76d5f1991584
+      archiver: 5.3.1
+      arg: 5.0.2
+      checkpoint-client: 1.1.24
+      cli-truncate: 2.1.0
+      dotenv: 16.0.3
+      escape-string-regexp: 4.0.0
+      execa: 5.1.1
+      find-up: 5.0.0
+      fp-ts: 2.16.0
+      fs-extra: 11.1.1
+      fs-jetpack: 5.1.0
+      global-dirs: 3.0.1
+      globby: 11.1.0
+      indent-string: 4.0.0
+      is-windows: 1.0.2
+      is-wsl: 2.2.0
+      kleur: 4.1.5
+      new-github-issue-url: 0.2.1
+      node-fetch: 2.6.12
+      npm-packlist: 5.1.3
+      open: 7.4.2
+      p-map: 4.0.0
+      prompts: 2.4.2
+      read-pkg-up: 7.0.1
+      replace-string: 3.1.0
+      resolve: 1.22.2
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      strip-indent: 3.0.0
+      temp-dir: 2.0.0
+      temp-write: 4.0.0
+      tempy: 1.0.1
+      terminal-link: 2.1.1
+      tmp: 0.2.1
+      ts-pattern: 4.3.0
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    dev: true
+
+  /@prisma/prisma-schema-wasm@4.17.0-26.6b0aef69b7cdfc787f822ecd7cdc76d5f1991584:
+    resolution: {integrity: sha512-JFdsnSgBPN8reDTLOI9Vh/6ccCb2aD1LbY/LWQnkcIgNo6IdpzvuM+qRVbBuA6IZP2SdqQI8Lu6RL2P8EFBQUA==}
+    dev: true
+
+  /@proteria/hooks@0.0.2(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-TPKIyjYu2mJIMP/w1PgdywyUpA083DG2EH10YYMFQcCh6ePttRODTCy5onfBhRYyx7SJ1W1/tz0S8KVXxDfDFA==}
+    peerDependencies:
+      js-cookie: ^3.0.5
+      react: ^16.8 || ^17 || ^18
+      react-dom: ^16.8 || ^17 || ^18
+    peerDependenciesMeta:
+      js-cookie:
+        optional: true
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /@radix-ui/primitive@1.0.1:
+    resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==}
+    dependencies:
+      '@babel/runtime': 7.22.6
+    dev: true
+
+  /@radix-ui/react-arrow@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@types/react': 18.2.18
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.18)(react@18.2.0)
+      '@types/react': 18.2.18
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.18)(react@18.2.0):
+    resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@types/react': 18.2.18
+      react: 18.2.0
+    dev: true
+
+  /@radix-ui/react-context@1.0.1(@types/react@18.2.18)(react@18.2.0):
+    resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@types/react': 18.2.18
+      react: 18.2.0
+    dev: true
+
+  /@radix-ui/react-dialog@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-hJtRy/jPULGQZceSAP2Re6/4NpKo8im6V8P2hUqZsdFiSL8l35kYsw3qbRI6Ay5mQd2+wlLqje770eq+RJ3yZg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@types/react': 18.2.18
+      '@types/react-dom': 18.2.7
+      aria-hidden: 1.2.3
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-remove-scroll: 2.5.5(@types/react@18.2.18)(react@18.2.0)
+    dev: true
+
+  /@radix-ui/react-direction@1.0.1(@types/react@18.2.18)(react@18.2.0):
+    resolution: {integrity: sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@types/react': 18.2.18
+      react: 18.2.0
+    dev: true
+
+  /@radix-ui/react-dismissable-layer@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@18.2.18)(react@18.2.0)
+      '@types/react': 18.2.18
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /@radix-ui/react-dropdown-menu@2.0.5(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-xdOrZzOTocqqkCkYo8yRPCib5OkTkqN7lqNCdxwPOdE466DOaNl4N8PkUIlsXthQvW5Wwkd+aEmWpfWlBoDPEw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-menu': 2.0.5(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@types/react': 18.2.18
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /@radix-ui/react-focus-guards@1.0.1(@types/react@18.2.18)(react@18.2.0):
+    resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@types/react': 18.2.18
+      react: 18.2.0
+    dev: true
+
+  /@radix-ui/react-focus-scope@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-upXdPfqI4islj2CslyfUBNlaJCPybbqRHAi1KER7Isel9Q2AtSJ0zRBZv8mWQiFXD2nyAJ4BhC3yXgZ6kMBSrQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@types/react': 18.2.18
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /@radix-ui/react-id@1.0.1(@types/react@18.2.18)(react@18.2.0):
+    resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@types/react': 18.2.18
+      react: 18.2.0
+    dev: true
+
+  /@radix-ui/react-menu@2.0.5(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-Gw4f9pwdH+w5w+49k0gLjN0PfRDHvxmAgG16AbyJZ7zhwZ6PBHKtWohvnSwfusfnK3L68dpBREHpVkj8wEM7ZA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@types/react': 18.2.18
+      '@types/react-dom': 18.2.7
+      aria-hidden: 1.2.3
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-remove-scroll: 2.5.5(@types/react@18.2.18)(react@18.2.0)
+    dev: true
+
+  /@radix-ui/react-popper@1.1.2(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-1CnGGfFi/bbqtJZZ0P/NQY20xdG3E0LALJaLUEoKwPLwl6PPPfbeiCqMVQnhoFRAxjJj4RpBRJzDmUgsex2tSg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@floating-ui/react-dom': 2.0.1(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-arrow': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-use-rect': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/rect': 1.0.1
+      '@types/react': 18.2.18
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /@radix-ui/react-portal@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@types/react': 18.2.18
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /@radix-ui/react-presence@1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@types/react': 18.2.18
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.18)(react@18.2.0)
+      '@types/react': 18.2.18
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /@radix-ui/react-roving-focus@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@types/react': 18.2.18
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /@radix-ui/react-slot@1.0.2(@types/react@18.2.18)(react@18.2.0):
+    resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@types/react': 18.2.18
+      react: 18.2.0
+    dev: true
+
+  /@radix-ui/react-tooltip@1.0.6(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-DmNFOiwEc2UDigsYj6clJENma58OelxD24O4IODoZ+3sQc3Zb+L8w1EP+y9laTuKCLAysPw4fD6/v0j4KNV8rg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@types/react': 18.2.18
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.18)(react@18.2.0):
+    resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@types/react': 18.2.18
+      react: 18.2.0
+    dev: true
+
+  /@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.2.18)(react@18.2.0):
+    resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@types/react': 18.2.18
+      react: 18.2.0
+    dev: true
+
+  /@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.2.18)(react@18.2.0):
+    resolution: {integrity: sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@types/react': 18.2.18
+      react: 18.2.0
+    dev: true
+
+  /@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.2.18)(react@18.2.0):
+    resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@types/react': 18.2.18
+      react: 18.2.0
+    dev: true
+
+  /@radix-ui/react-use-rect@1.0.1(@types/react@18.2.18)(react@18.2.0):
+    resolution: {integrity: sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@radix-ui/rect': 1.0.1
+      '@types/react': 18.2.18
+      react: 18.2.0
+    dev: true
+
+  /@radix-ui/react-use-size@1.0.1(@types/react@18.2.18)(react@18.2.0):
+    resolution: {integrity: sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.18)(react@18.2.0)
+      '@types/react': 18.2.18
+      react: 18.2.0
+    dev: true
+
+  /@radix-ui/react-visually-hidden@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+      '@types/react': 18.2.18
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /@radix-ui/rect@1.0.1:
+    resolution: {integrity: sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==}
+    dependencies:
+      '@babel/runtime': 7.22.6
+    dev: true
+
+  /@react-hookz/deep-equal@1.0.4:
+    resolution: {integrity: sha512-N56fTrAPUDz/R423pag+n6TXWbvlBZDtTehaGFjK0InmN+V2OFWLE/WmORhmn6Ce7dlwH5+tQN1LJFw3ngTJVg==}
+    dev: true
+
+  /@react-hookz/web@23.1.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-fvbURdsa1ukttbLR1ASE/XmqXP09vZ1PiCYppYeR1sNMzCrdkG0iBnjxniFSVjJ8gIw2fRs6nqMTbeBz2uAkuA==}
+    peerDependencies:
+      js-cookie: ^3.0.5
+      react: ^16.8 || ^17 || ^18
+      react-dom: ^16.8 || ^17 || ^18
+    peerDependenciesMeta:
+      js-cookie:
+        optional: true
+    dependencies:
+      '@react-hookz/deep-equal': 1.0.4
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /@szhsin/react-menu@4.0.2(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-cYpktkWng7jCTPKog33w5iYldbaHQso5aJFd+7j3SkhInqYWjxiG0TtxUS0c5yFqLm6woGQEJHiBpiYHIaYMxg==}
+    peerDependencies:
+      react: '>=16.14.0'
+      react-dom: '>=16.14.0'
+    dependencies:
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-transition-state: 2.1.1(react-dom@18.2.0)(react@18.2.0)
+    dev: true
+
+  /@tsconfig/node10@1.0.9:
+    resolution: {integrity: sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==}
+    dev: true
+
+  /@tsconfig/node12@1.0.11:
+    resolution: {integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==}
+    dev: true
+
+  /@tsconfig/node14@1.0.3:
+    resolution: {integrity: sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==}
+    dev: true
+
+  /@tsconfig/node16@1.0.4:
+    resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
+    dev: true
+
+  /@types/babel-plugin-macros@3.1.0:
+    resolution: {integrity: sha512-kxYWx+NISzy46KMgnXUthHJNbcGw9w1jn6e1LZAciTv8KKO5z9z1LakHnXCj5aYrwydZ5dGE3MAgEu4X/MdWkA==}
+    dependencies:
+      '@types/babel__core': 7.20.1
+    dev: true
+
+  /@types/babel__core@7.20.1:
+    resolution: {integrity: sha512-aACu/U/omhdk15O4Nfb+fHgH/z3QsfQzpnvRZhYhThms83ZnAOZz7zZAWO7mn2yyNQaA4xTO8GLK3uqFU4bYYw==}
+    dependencies:
+      '@babel/parser': 7.22.7
+      '@babel/types': 7.22.5
+      '@types/babel__generator': 7.6.4
+      '@types/babel__template': 7.4.1
+      '@types/babel__traverse': 7.20.1
+    dev: true
+
+  /@types/babel__generator@7.6.4:
+    resolution: {integrity: sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==}
+    dependencies:
+      '@babel/types': 7.22.5
+    dev: true
+
+  /@types/babel__template@7.4.1:
+    resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==}
+    dependencies:
+      '@babel/parser': 7.22.7
+      '@babel/types': 7.22.5
+    dev: true
+
+  /@types/babel__traverse@7.20.1:
+    resolution: {integrity: sha512-MitHFXnhtgwsGZWtT68URpOvLN4EREih1u3QtQiN4VdAxWKRVvGCSvw/Qth0M0Qq3pJpnGOu5JaM/ydK7OGbqg==}
+    dependencies:
+      '@babel/types': 7.22.5
+    dev: true
+
+  /@types/chrome@0.0.242:
+    resolution: {integrity: sha512-SeMXBSfcAGX9ezTz7Pro7n/AiNdIH3cetkdbM+Kfg3zD24jmbnm0IAEIxzx8ccqrnJenLCfD7fR+4WIYAbeQHw==}
+    dependencies:
+      '@types/filesystem': 0.0.32
+      '@types/har-format': 1.2.11
+    dev: true
+
+  /@types/codemirror@5.60.8:
+    resolution: {integrity: sha512-VjFgDF/eB+Aklcy15TtOTLQeMjTo07k7KAjql8OK5Dirr7a6sJY4T1uVBDuTVG9VEmn1uUsohOpYnVfgC6/jyw==}
+    dependencies:
+      '@types/tern': 0.23.4
+    dev: true
+
+  /@types/convert-source-map@2.0.0:
+    resolution: {integrity: sha512-QUm4YOC/ENo0VjPVl2o8HGyTbHHQGDOw8PCg3rXBucYHKyZN/XjXRbPFAV1tB2FvM0/wyFoDct4cTIctzKrQFg==}
+    dev: true
+
+  /@types/cross-spawn@6.0.2:
+    resolution: {integrity: sha512-KuwNhp3eza+Rhu8IFI5HUXRP0LIhqH5cAjubUvGXXthh4YYBuP2ntwEX+Cz8GJoZUHlKo247wPWOfA9LYEq4cw==}
+    dependencies:
+      '@types/node': 20.4.5
+    dev: true
+
+  /@types/debug@4.1.8:
+    resolution: {integrity: sha512-/vPO1EPOs306Cvhwv7KfVfYvOJqA/S/AXjaHQiJboCZzcNDb+TIJFN9/2C9DZ//ijSKWioNyUxD792QmDJ+HKQ==}
+    dependencies:
+      '@types/ms': 0.7.31
+    dev: true
+
+  /@types/dedent@0.7.0:
+    resolution: {integrity: sha512-EGlKlgMhnLt/cM4DbUSafFdrkeJoC9Mvnj0PUCU7tFmTjMjNRT957kXCx0wYm3JuEq4o4ZsS5vG+NlkM2DMd2A==}
+    dev: true
+
+  /@types/element-resize-detector@1.1.3:
+    resolution: {integrity: sha512-rqmeHxzNMPar/3IbdQRm+mydv8KlEXUtcp5M47rbZUEjslTjg+bT5+OXCknTCIy1AfvNR0Kio44iMY2zUH65CQ==}
+    dev: true
+
+  /@types/eslint@8.44.1:
+    resolution: {integrity: sha512-XpNDc4Z5Tb4x+SW1MriMVeIsMoONHCkWFMkR/aPJbzEsxqHy+4Glu/BqTdPrApfDeMaXbtNh6bseNgl5KaWrSg==}
+    dependencies:
+      '@types/estree': 1.0.1
+      '@types/json-schema': 7.0.12
+    dev: true
+
+  /@types/estree@1.0.1:
+    resolution: {integrity: sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==}
+    dev: true
+
+  /@types/filesystem@0.0.32:
+    resolution: {integrity: sha512-Yuf4jR5YYMR2DVgwuCiP11s0xuVRyPKmz8vo6HBY3CGdeMj8af93CFZX+T82+VD1+UqHOxTq31lO7MI7lepBtQ==}
+    dependencies:
+      '@types/filewriter': 0.0.29
+    dev: true
+
+  /@types/filewriter@0.0.29:
+    resolution: {integrity: sha512-BsPXH/irW0ht0Ji6iw/jJaK8Lj3FJemon2gvEqHKpCdDCeemHa+rI3WBGq5z7cDMZgoLjY40oninGxqk+8NzNQ==}
+    dev: true
+
+  /@types/glob-to-regexp@0.4.1:
+    resolution: {integrity: sha512-S0mIukll6fbF0tvrKic/jj+jI8SHoSvGU+Cs95b/jzZEnBYCbj+7aJtQ9yeABuK3xP1okwA3jEH9qIRayijnvQ==}
+    dev: true
+
+  /@types/har-format@1.2.11:
+    resolution: {integrity: sha512-T232/TneofqK30AD1LRrrf8KnjLvzrjWDp7eWST5KoiSzrBfRsLrWDPk4STQPW4NZG6v2MltnduBVmakbZOBIQ==}
+    dev: true
+
+  /@types/js-yaml@4.0.5:
+    resolution: {integrity: sha512-FhpRzf927MNQdRZP0J5DLIdTXhjLYzeUTmLAu69mnVksLH9CJY3IuSeEgbKUki7GQZm0WqDkGzyxju2EZGD2wA==}
+    dev: true
+
+  /@types/json-schema@7.0.12:
+    resolution: {integrity: sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==}
+    dev: true
+
+  /@types/json5@0.0.29:
+    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
+    dev: true
+
+  /@types/lodash-es@4.17.8:
+    resolution: {integrity: sha512-euY3XQcZmIzSy7YH5+Unb3b2X12Wtk54YWINBvvGQ5SmMvwb11JQskGsfkH/5HXK77Kr8GF0wkVDIxzAisWtog==}
+    dependencies:
+      '@types/lodash': 4.14.196
+    dev: true
+
+  /@types/lodash@4.14.196:
+    resolution: {integrity: sha512-22y3o88f4a94mKljsZcanlNWPzO0uBsBdzLAngf2tp533LzZcQzb6+eZPJ+vCTt+bqF2XnvT9gejTLsAcJAJyQ==}
+    dev: true
+
+  /@types/ms@0.7.31:
+    resolution: {integrity: sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==}
+    dev: true
+
+  /@types/node@20.4.5:
+    resolution: {integrity: sha512-rt40Nk13II9JwQBdeYqmbn2Q6IVTA5uPhvSO+JVqdXw/6/4glI6oR9ezty/A9Hg5u7JH4OmYmuQ+XvjKm0Datg==}
+    dev: true
+
+  /@types/normalize-package-data@2.4.1:
+    resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
+    dev: true
+
+  /@types/parse-json@4.0.0:
+    resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
+    dev: true
+
+  /@types/postcss-modules-local-by-default@4.0.0:
+    resolution: {integrity: sha512-0VLab/pcLTLcfbxi6THSIMVYcw9hEUBGvjwwaGpW77mMgRXfGF+a76t7BxTGyLh1y68tBvrffp8UWnqvm76+yg==}
+    dependencies:
+      postcss: 8.4.27
+    dev: true
+
+  /@types/postcss-modules-scope@3.0.1:
+    resolution: {integrity: sha512-LNkp3c4ML9EQj2dgslp4i80Jxj72YK3HjYzrTn6ftUVylW1zaKFGqrMlNIyqBmPWmIhZ/Y5r0Y4T49Hk1IuDUg==}
+    dependencies:
+      postcss: 8.4.27
+    dev: true
+
+  /@types/pouchdb-adapter-http@6.1.3:
+    resolution: {integrity: sha512-9Z4TLbF/KJWy/D2sWRPBA+RNU0odQimfdvlDX+EY7rGcd3aVoH8qjD/X0Xcd/0dfBH5pKrNIMFFQgW/TylRCmA==}
+    dependencies:
+      '@types/pouchdb-core': 7.0.11
+    dev: true
+
+  /@types/pouchdb-adapter-idb@6.1.4:
+    resolution: {integrity: sha512-KIAXbkF4uYUz0ZwfNEFLtEkK44mEWopAsD76UhucH92XnJloBysav+TjI4FFfYQyTjoW3S1s6V+Z14CUJZ0F6w==}
+    dependencies:
+      '@types/pouchdb-core': 7.0.11
+    dev: true
+
+  /@types/pouchdb-adapter-websql@6.1.4:
+    resolution: {integrity: sha512-zMJQCtXC40hBsIDRn0GhmpeGMK0f9l/OGWfLguvczROzxxcOD7REI+e6SEmX7gJKw5JuMvlfuHzkQwjmvSJbtg==}
+    dependencies:
+      '@types/pouchdb-core': 7.0.11
+    dev: true
+
+  /@types/pouchdb-browser@6.1.3:
+    resolution: {integrity: sha512-EdYowrWxW9SWBMX/rux2eq7dbHi5Zeyzz+FF/IAsgQKnUxgeCO5VO2j4zTzos0SDyJvAQU+EYRc11r7xGn5tvA==}
+    dependencies:
+      '@types/pouchdb-adapter-http': 6.1.3
+      '@types/pouchdb-adapter-idb': 6.1.4
+      '@types/pouchdb-adapter-websql': 6.1.4
+      '@types/pouchdb-core': 7.0.11
+      '@types/pouchdb-mapreduce': 6.1.7
+      '@types/pouchdb-replication': 6.4.4
+    dev: true
+
+  /@types/pouchdb-core@7.0.11:
+    resolution: {integrity: sha512-KTKj0Taf8pLTj8eW3qBtCd1Fh+/yhEyVo6/1czTN46MnseobdmnqgXtzaKgHMbuLouh+SHK1vM++aMPaG1qTTA==}
+    dependencies:
+      '@types/debug': 4.1.8
+      '@types/pouchdb-find': 7.3.0
+    dev: true
+
+  /@types/pouchdb-find@7.3.0:
+    resolution: {integrity: sha512-sFPli5tBjGX9UfXioik1jUzPdcN84eV82n0lmEFuoPepWqkLjQcyri0eOa++HYOaNPyMDhKFBqEALEZivK2dRg==}
+    dependencies:
+      '@types/pouchdb-core': 7.0.11
+    dev: true
+
+  /@types/pouchdb-mapreduce@6.1.7:
+    resolution: {integrity: sha512-WzBwm7tmO9QhfRzVaWT4v6JQSS/fG2OoUDrWrhX87rPe2Pn6laPvdK5li6myNRxCoI/l5e8Jd+oYBAFnaiFucA==}
+    dependencies:
+      '@types/pouchdb-core': 7.0.11
+    dev: true
+
+  /@types/pouchdb-replication@6.4.4:
+    resolution: {integrity: sha512-BsE5LKpjJK4iAf6Fx5kyrMw+33V+Ip7uWldUnU2BYrrvtR+MLD22dcImm7DZN1st2wPPb91i0XEnQzvP0w1C/Q==}
+    dependencies:
+      '@types/pouchdb-core': 7.0.11
+      '@types/pouchdb-find': 7.3.0
+    dev: true
+
+  /@types/prettier@2.7.3:
+    resolution: {integrity: sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==}
+    dev: true
+
+  /@types/prop-types@15.7.5:
+    resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
+    dev: true
+
+  /@types/react-dom@18.2.7:
+    resolution: {integrity: sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==}
+    dependencies:
+      '@types/react': 18.2.18
+    dev: true
+
+  /@types/react-helmet@6.1.6:
+    resolution: {integrity: sha512-ZKcoOdW/Tg+kiUbkFCBtvDw0k3nD4HJ/h/B9yWxN4uDO8OkRksWTO+EL+z/Qu3aHTeTll3Ro0Cc/8UhwBCMG5A==}
+    dependencies:
+      '@types/react': 18.2.18
+    dev: true
+
+  /@types/react-window@1.8.5:
+    resolution: {integrity: sha512-V9q3CvhC9Jk9bWBOysPGaWy/Z0lxYcTXLtLipkt2cnRj1JOSFNF7wqGpkScSXMgBwC+fnVRg/7shwgddBG5ICw==}
+    dependencies:
+      '@types/react': 18.2.18
+    dev: true
+
+  /@types/react@18.2.18:
+    resolution: {integrity: sha512-da4NTSeBv/P34xoZPhtcLkmZuJ+oYaCxHmyHzwaDQo9RQPBeXV+06gEk2FpqEcsX9XrnNLvRpVh6bdavDSjtiQ==}
+    dependencies:
+      '@types/prop-types': 15.7.5
+      '@types/scheduler': 0.16.3
+      csstype: 3.1.2
+    dev: true
+
+  /@types/retry@0.12.0:
+    resolution: {integrity: sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==}
+    dev: true
+
+  /@types/scheduler@0.16.3:
+    resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==}
+    dev: true
+
+  /@types/semver@7.5.0:
+    resolution: {integrity: sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==}
+    dev: true
+
+  /@types/stylis@4.2.0:
+    resolution: {integrity: sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw==}
+    dev: true
+
+  /@types/tern@0.23.4:
+    resolution: {integrity: sha512-JAUw1iXGO1qaWwEOzxTKJZ/5JxVeON9kvGZ/osgZaJImBnyjyn0cjovPsf6FNLmyGY8Vw9DoXZCMlfMkMwHRWg==}
+    dependencies:
+      '@types/estree': 1.0.1
+    dev: true
+
+  /@types/ua-parser-js@0.7.36:
+    resolution: {integrity: sha512-N1rW+njavs70y2cApeIw1vLMYXRwfBy+7trgavGuuTfOd7j1Yh7QTRc/yqsPl6ncokt72ZXuxEU0PiCp9bSwNQ==}
+    dev: true
+
+  /@types/validator@13.7.17:
+    resolution: {integrity: sha512-aqayTNmeWrZcvnG2MG9eGYI6b7S5fl+yKgPs6bAjOTwPS316R5SxBGKvtSExfyoJU7pIeHJfsHI0Ji41RVMkvQ==}
+    dev: true
+
+  /@types/w3c-css-typed-object-model-level-1@20180410.0.5:
+    resolution: {integrity: sha512-khoqDQqA/fUdK6mEJtQEfMAPCKkk8E1D+ahM/0HCy3mc5L33wJinqQNXu9Uf4+mqzMvORljHg76jvrmwS0bEjA==}
+    dev: true
+
+  /@types/webextension-polyfill@0.10.1:
+    resolution: {integrity: sha512-Sdg+E2F5JUbhkE1qX15QUxpyhfMFKRGJqND9nb1C0gNN4NR7kCV31/1GvNbg6Xe+m/JElJ9/lG5kepMzjGPuQw==}
+    dev: true
+
+  /@typescript-eslint/eslint-plugin@6.2.1(@typescript-eslint/parser@6.2.1)(eslint@8.46.0)(typescript@5.2.0-beta):
+    resolution: {integrity: sha512-iZVM/ALid9kO0+I81pnp1xmYiFyqibAHzrqX4q5YvvVEyJqY+e6rfTXSCsc2jUxGNqJqTfFSSij/NFkZBiBzLw==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha
+      eslint: ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@eslint-community/regexpp': 4.6.2
+      '@typescript-eslint/parser': 6.2.1(eslint@8.46.0)(typescript@5.2.0-beta)
+      '@typescript-eslint/scope-manager': 6.2.1
+      '@typescript-eslint/type-utils': 6.2.1(eslint@8.46.0)(typescript@5.2.0-beta)
+      '@typescript-eslint/utils': 6.2.1(eslint@8.46.0)(typescript@5.2.0-beta)
+      '@typescript-eslint/visitor-keys': 6.2.1
+      debug: 4.3.4
+      eslint: 8.46.0
+      graphemer: 1.4.0
+      ignore: 5.2.4
+      natural-compare: 1.4.0
+      natural-compare-lite: 1.4.0
+      semver: 7.5.4
+      ts-api-utils: 1.0.1(typescript@5.2.0-beta)
+      typescript: 5.2.0-beta
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/parser@6.2.1(eslint@8.46.0)(typescript@5.2.0-beta):
+    resolution: {integrity: sha512-Ld+uL1kYFU8e6btqBFpsHkwQ35rw30IWpdQxgOqOh4NfxSDH6uCkah1ks8R/RgQqI5hHPXMaLy9fbFseIe+dIg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/scope-manager': 6.2.1
+      '@typescript-eslint/types': 6.2.1
+      '@typescript-eslint/typescript-estree': 6.2.1(typescript@5.2.0-beta)
+      '@typescript-eslint/visitor-keys': 6.2.1
+      debug: 4.3.4
+      eslint: 8.46.0
+      typescript: 5.2.0-beta
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/scope-manager@6.2.1:
+    resolution: {integrity: sha512-UCqBF9WFqv64xNsIEPfBtenbfodPXsJ3nPAr55mGPkQIkiQvgoWNo+astj9ZUfJfVKiYgAZDMnM6dIpsxUMp3Q==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dependencies:
+      '@typescript-eslint/types': 6.2.1
+      '@typescript-eslint/visitor-keys': 6.2.1
+    dev: true
+
+  /@typescript-eslint/type-utils@6.2.1(eslint@8.46.0)(typescript@5.2.0-beta):
+    resolution: {integrity: sha512-fTfCgomBMIgu2Dh2Or3gMYgoNAnQm3RLtRp+jP7A8fY+LJ2+9PNpi5p6QB5C4RSP+U3cjI0vDlI3mspAkpPVbQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/typescript-estree': 6.2.1(typescript@5.2.0-beta)
+      '@typescript-eslint/utils': 6.2.1(eslint@8.46.0)(typescript@5.2.0-beta)
+      debug: 4.3.4
+      eslint: 8.46.0
+      ts-api-utils: 1.0.1(typescript@5.2.0-beta)
+      typescript: 5.2.0-beta
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/types@6.2.1:
+    resolution: {integrity: sha512-528bGcoelrpw+sETlyM91k51Arl2ajbNT9L4JwoXE2dvRe1yd8Q64E4OL7vHYw31mlnVsf+BeeLyAZUEQtqahQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dev: true
+
+  /@typescript-eslint/typescript-estree@6.2.1(typescript@5.2.0-beta):
+    resolution: {integrity: sha512-G+UJeQx9AKBHRQBpmvr8T/3K5bJa485eu+4tQBxFq0KoT22+jJyzo1B50JDT9QdC1DEmWQfdKsa8ybiNWYsi0Q==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/types': 6.2.1
+      '@typescript-eslint/visitor-keys': 6.2.1
+      debug: 4.3.4
+      globby: 11.1.0
+      is-glob: 4.0.3
+      semver: 7.5.4
+      ts-api-utils: 1.0.1(typescript@5.2.0-beta)
+      typescript: 5.2.0-beta
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/utils@6.2.1(eslint@8.46.0)(typescript@5.2.0-beta):
+    resolution: {integrity: sha512-eBIXQeupYmxVB6S7x+B9SdBeB6qIdXKjgQBge2J+Ouv8h9Cxm5dHf/gfAZA6dkMaag+03HdbVInuXMmqFB/lKQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.46.0)
+      '@types/json-schema': 7.0.12
+      '@types/semver': 7.5.0
+      '@typescript-eslint/scope-manager': 6.2.1
+      '@typescript-eslint/types': 6.2.1
+      '@typescript-eslint/typescript-estree': 6.2.1(typescript@5.2.0-beta)
+      eslint: 8.46.0
+      semver: 7.5.4
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
+  /@typescript-eslint/visitor-keys@6.2.1:
+    resolution: {integrity: sha512-iTN6w3k2JEZ7cyVdZJTVJx2Lv7t6zFA8DCrJEHD2mwfc16AEvvBWVhbFh34XyG2NORCd0viIgQY1+u7kPI0WpA==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dependencies:
+      '@typescript-eslint/types': 6.2.1
+      eslint-visitor-keys: 3.4.1
+    dev: true
+
+  /@vscode/codicons@0.0.33:
+    resolution: {integrity: sha512-VdgpnD75swH9hpXjd34VBgQ2w2quK63WljodlUcOoJDPKiV+rPjHrcUc2sjLCNKxhl6oKqmsZgwOWcDAY2GKKQ==}
+    dev: true
+
+  /@wry/context@0.7.3:
+    resolution: {integrity: sha512-Nl8WTesHp89RF803Se9X3IiHjdmLBrIvPMaJkl+rKVJAYyPsz1TEUbu89943HpvujtSJgDUx9W4vZw3K1Mr3sA==}
+    engines: {node: '>=8'}
+    dependencies:
+      tslib: 2.6.1
+    dev: true
+
+  /@wry/equality@0.5.6:
+    resolution: {integrity: sha512-D46sfMTngaYlrH+OspKf8mIJETntFnf6Hsjb0V41jAXJ7Bx2kB8Rv8RCUujuVWYttFtHkUNp7g+FwxNQAr6mXA==}
+    engines: {node: '>=8'}
+    dependencies:
+      tslib: 2.6.1
+    dev: true
+
+  /@wry/trie@0.3.2:
+    resolution: {integrity: sha512-yRTyhWSls2OY/pYLfwff867r8ekooZ4UI+/gxot5Wj8EFwSf2rG+n+Mo/6LoLQm1TKA4GRj2+LCpbfS937dClQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      tslib: 2.6.1
+    dev: true
+
+  /@wry/trie@0.4.3:
+    resolution: {integrity: sha512-I6bHwH0fSf6RqQcnnXLJKhkSXG45MFral3GxPaY4uAl0LYDZM+YDVDAiU9bYwjTuysy1S0IeecWtmq1SZA3M1w==}
+    engines: {node: '>=8'}
+    dependencies:
+      tslib: 2.6.1
+    dev: true
+
+  /acorn-jsx@5.3.2(acorn@8.10.0):
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      acorn: 8.10.0
+    dev: true
+
+  /acorn-walk@8.2.0:
+    resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==}
+    engines: {node: '>=0.4.0'}
+    dev: true
+
+  /acorn@8.10.0:
+    resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+    dev: true
+
+  /agent-base@7.1.0:
+    resolution: {integrity: sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==}
+    engines: {node: '>= 14'}
+    dependencies:
+      debug: 4.3.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /aggregate-error@3.1.0:
+    resolution: {integrity: sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==}
+    engines: {node: '>=8'}
+    dependencies:
+      clean-stack: 2.2.0
+      indent-string: 4.0.0
+    dev: true
+
+  /ajv@6.12.6:
+    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+    dev: true
+
+  /ansi-escapes@4.3.2:
+    resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      type-fest: 0.21.3
+    dev: true
+
+  /ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /ansi-styles@3.2.1:
+    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
+    engines: {node: '>=4'}
+    dependencies:
+      color-convert: 1.9.3
+    dev: true
+
+  /ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+    dependencies:
+      color-convert: 2.0.1
+    dev: true
+
+  /anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+    dev: true
+
+  /archiver-utils@2.1.0:
+    resolution: {integrity: sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==}
+    engines: {node: '>= 6'}
+    dependencies:
+      glob: 7.2.3
+      graceful-fs: 4.2.11
+      lazystream: 1.0.1
+      lodash.defaults: 4.2.0
+      lodash.difference: 4.5.0
+      lodash.flatten: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.union: 4.6.0
+      normalize-path: 3.0.0
+      readable-stream: 2.3.8
+    dev: true
+
+  /archiver@5.3.1:
+    resolution: {integrity: sha512-8KyabkmbYrH+9ibcTScQ1xCJC/CGcugdVIwB+53f5sZziXgwUh3iXlAlANMxcZyDEfTHMe6+Z5FofV8nopXP7w==}
+    engines: {node: '>= 10'}
+    dependencies:
+      archiver-utils: 2.1.0
+      async: 3.2.4
+      buffer-crc32: 0.2.13
+      readable-stream: 3.6.2
+      readdir-glob: 1.1.3
+      tar-stream: 2.2.0
+      zip-stream: 4.1.0
+    dev: true
+
+  /arg@4.1.3:
+    resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
+    dev: true
+
+  /arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+    dev: true
+
+  /argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+    dev: true
+
+  /aria-hidden@1.2.3:
+    resolution: {integrity: sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      tslib: 2.6.1
+    dev: true
+
+  /aria-query@5.3.0:
+    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
+    dependencies:
+      dequal: 2.0.3
+    dev: true
+
+  /array-buffer-byte-length@1.0.0:
+    resolution: {integrity: sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==}
+    dependencies:
+      call-bind: 1.0.2
+      is-array-buffer: 3.0.2
+    dev: true
+
+  /array-includes@3.1.6:
+    resolution: {integrity: sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.2.0
+      es-abstract: 1.22.1
+      get-intrinsic: 1.2.1
+      is-string: 1.0.7
+    dev: true
+
+  /array-union@2.1.0:
+    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /array.prototype.findlastindex@1.2.2:
+    resolution: {integrity: sha512-tb5thFFlUcp7NdNF6/MpDk/1r/4awWG1FIz3YqDf+/zJSTezBb+/5WViH41obXULHVpDzoiCLpJ/ZO9YbJMsdw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.2.0
+      es-abstract: 1.22.1
+      es-shim-unscopables: 1.0.0
+      get-intrinsic: 1.2.1
+    dev: true
+
+  /array.prototype.flat@1.3.1:
+    resolution: {integrity: sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.2.0
+      es-abstract: 1.22.1
+      es-shim-unscopables: 1.0.0
+    dev: true
+
+  /array.prototype.flatmap@1.3.1:
+    resolution: {integrity: sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.2.0
+      es-abstract: 1.22.1
+      es-shim-unscopables: 1.0.0
+    dev: true
+
+  /arraybuffer.prototype.slice@1.0.1:
+    resolution: {integrity: sha512-09x0ZWFEjj4WD8PDbykUwo3t9arLn8NIzmmYEJFpYekOAQjpkGSyrQhNoRTcwwcFRu+ycWF78QZ63oWTqSjBcw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      array-buffer-byte-length: 1.0.0
+      call-bind: 1.0.2
+      define-properties: 1.2.0
+      get-intrinsic: 1.2.1
+      is-array-buffer: 3.0.2
+      is-shared-array-buffer: 1.0.2
+    dev: true
+
+  /astral-regex@2.0.0:
+    resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /async-mutex@0.4.0:
+    resolution: {integrity: sha512-eJFZ1YhRR8UN8eBLoNzcDPcy/jqjsg6I1AP+KvWQX80BqOSW1oJPJXDylPUEeMr2ZQvHgnQ//Lp6f3RQ1zI7HA==}
+    dependencies:
+      tslib: 2.6.1
+    dev: true
+
+  /async@3.2.4:
+    resolution: {integrity: sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==}
+    dev: true
+
+  /auto-bind@4.0.0:
+    resolution: {integrity: sha512-Hdw8qdNiqdJ8LqT0iK0sVzkFbzg6fhnQqqfWhBDxcHZvU75+B+ayzTy8x+k5Ix0Y92XOhOUlx74ps+bA6BeYMQ==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /available-typed-arrays@1.0.5:
+    resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /axe-core@4.7.2:
+    resolution: {integrity: sha512-zIURGIS1E1Q4pcrMjp+nnEh+16G56eG/MUllJH8yEvw7asDo7Ac9uhC9KIH5jzpITueEZolfYglnCGIuSBz39g==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /axobject-query@3.2.1:
+    resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==}
+    dependencies:
+      dequal: 2.0.3
+    dev: true
+
+  /babel-plugin-macros@2.8.0:
+    resolution: {integrity: sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==}
+    dependencies:
+      '@babel/runtime': 7.22.6
+      cosmiconfig: 6.0.0
+      resolve: 1.22.2
+    dev: true
+
+  /babel-plugin-macros@3.1.0:
+    resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
+    engines: {node: '>=10', npm: '>=6'}
+    dependencies:
+      '@babel/runtime': 7.22.6
+      cosmiconfig: 7.1.0
+      resolve: 1.22.2
+    dev: true
+
+  /babel-plugin-transform-minify-gql-template-literals@1.1.1:
+    resolution: {integrity: sha512-J4Un0uOHDG8Csa8+7Q0sIAPzwT9OyafS3kAoSBhAjIpuIgsDLZaCQTjaKQr2UryikMvzObwL8FRR6LRTp0oP1w==}
+    dev: true
+
+  /balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+    dev: true
+
+  /base64-js@1.5.1:
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+    dev: true
+
+  /big-integer@1.6.51:
+    resolution: {integrity: sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==}
+    engines: {node: '>=0.6'}
+    dev: true
+
+  /binary-extensions@2.2.0:
+    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /bl@4.1.0:
+    resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
+    dependencies:
+      buffer: 5.7.1
+      inherits: 2.0.4
+      readable-stream: 3.6.2
+    dev: true
+
+  /bplist-parser@0.2.0:
+    resolution: {integrity: sha512-z0M+byMThzQmD9NILRniCUXYsYpjwnlO8N5uCFaCqIOpqRsJCrQL9NK3JsD67CN5a08nF5oIL2bD6loTdHOuKw==}
+    engines: {node: '>= 5.10.0'}
+    dependencies:
+      big-integer: 1.6.51
+    dev: true
+
+  /brace-expansion@1.1.11:
+    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+    dev: true
+
+  /brace-expansion@2.0.1:
+    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+    dependencies:
+      balanced-match: 1.0.2
+    dev: true
+
+  /braces@3.0.2:
+    resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
+    engines: {node: '>=8'}
+    dependencies:
+      fill-range: 7.0.1
+    dev: true
+
+  /browserslist@4.21.10:
+    resolution: {integrity: sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+    dependencies:
+      caniuse-lite: 1.0.30001517
+      electron-to-chromium: 1.4.478
+      node-releases: 2.0.13
+      update-browserslist-db: 1.0.11(browserslist@4.21.10)
+    dev: true
+
+  /buffer-crc32@0.2.13:
+    resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
+    dev: true
+
+  /buffer@5.7.1:
+    resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+    dev: true
+
+  /builtin-modules@3.3.0:
+    resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /bundle-name@3.0.0:
+    resolution: {integrity: sha512-PKA4BeSvBpQKQ8iPOGCSiell+N8P+Tf1DlwqmYhpe2gAhKPHn8EYOxVT+ShuGmhg8lN8XiSlS80yiExKXrURlw==}
+    engines: {node: '>=12'}
+    dependencies:
+      run-applescript: 5.0.0
+    dev: true
+
+  /call-bind@1.0.2:
+    resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==}
+    dependencies:
+      function-bind: 1.1.1
+      get-intrinsic: 1.2.1
+    dev: true
+
+  /callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /camel-case@4.1.2:
+    resolution: {integrity: sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==}
+    dependencies:
+      pascal-case: 3.1.2
+      tslib: 2.6.1
+    dev: true
+
+  /caniuse-lite@1.0.30001517:
+    resolution: {integrity: sha512-Vdhm5S11DaFVLlyiKu4hiUTkpZu+y1KA/rZZqVQfOD5YdDT/eQKlkt7NaE0WGOFgX32diqt9MiP9CAiFeRklaA==}
+    dev: true
+
+  /capital-case@1.0.4:
+    resolution: {integrity: sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==}
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.6.1
+      upper-case-first: 2.0.2
+    dev: true
+
+  /chalk@2.4.2:
+    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
+    engines: {node: '>=4'}
+    dependencies:
+      ansi-styles: 3.2.1
+      escape-string-regexp: 1.0.5
+      supports-color: 5.5.0
+    dev: true
+
+  /chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+    dev: true
+
+  /change-case-all@1.0.15:
+    resolution: {integrity: sha512-3+GIFhk3sNuvFAJKU46o26OdzudQlPNBCu1ZQi3cMeMHhty1bhDxu2WrEilVNYaGvqUtR1VSigFcJOiS13dRhQ==}
+    dependencies:
+      change-case: 4.1.2
+      is-lower-case: 2.0.2
+      is-upper-case: 2.0.2
+      lower-case: 2.0.2
+      lower-case-first: 2.0.2
+      sponge-case: 1.0.1
+      swap-case: 2.0.2
+      title-case: 3.0.3
+      upper-case: 2.0.2
+      upper-case-first: 2.0.2
+    dev: true
+
+  /change-case@4.1.2:
+    resolution: {integrity: sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==}
+    dependencies:
+      camel-case: 4.1.2
+      capital-case: 1.0.4
+      constant-case: 3.0.4
+      dot-case: 3.0.4
+      header-case: 2.0.4
+      no-case: 3.0.4
+      param-case: 3.0.4
+      pascal-case: 3.1.2
+      path-case: 3.0.4
+      sentence-case: 3.0.4
+      snake-case: 3.0.4
+      tslib: 2.6.1
+    dev: true
+
+  /checkpoint-client@1.1.24:
+    resolution: {integrity: sha512-nIOlLhDS7MKs4tUzS3LCm+sE1NgTCVnVrXlD0RRxaoEkkLu8LIWSUNiNWai6a+LK5unLzTyZeTCYX1Smqy0YoA==}
+    dependencies:
+      ci-info: 3.8.0
+      env-paths: 2.2.1
+      fast-write-atomic: 0.2.1
+      make-dir: 3.1.0
+      ms: 2.1.3
+      node-fetch: 2.6.11
+      uuid: 9.0.0
+    transitivePeerDependencies:
+      - encoding
+    dev: true
+
+  /chokidar@3.5.3:
+    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
+    engines: {node: '>= 8.10.0'}
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.2
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
+  /ci-info@3.8.0:
+    resolution: {integrity: sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /class-validator@0.14.0:
+    resolution: {integrity: sha512-ct3ltplN8I9fOwUd8GrP8UQixwff129BkEtuWDKL5W45cQuLd19xqmTLu5ge78YDm/fdje6FMt0hGOhl0lii3A==}
+    dependencies:
+      '@types/validator': 13.7.17
+      libphonenumber-js: 1.10.38
+      validator: 13.9.0
+    dev: true
+
+  /clean-regexp@1.0.0:
+    resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
+    engines: {node: '>=4'}
+    dependencies:
+      escape-string-regexp: 1.0.5
+    dev: true
+
+  /clean-stack@2.2.0:
+    resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /cli-truncate@2.1.0:
+    resolution: {integrity: sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==}
+    engines: {node: '>=8'}
+    dependencies:
+      slice-ansi: 3.0.0
+      string-width: 4.2.3
+    dev: true
+
+  /client-only@0.0.1:
+    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
+    dev: true
+
+  /clsx@1.2.1:
+    resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /codemirror-graphql@2.0.9(@codemirror/language@6.0.0)(codemirror@5.65.14)(graphql@16.7.1):
+    resolution: {integrity: sha512-gl1LR6XSBgZtl7Dr2q4jjRNfhxMF8vn+rnjZTZPf/l+VrQgavY8l3G//hW7s3hWy73iiqkq5LZ4KE1tdaxB/vQ==}
+    peerDependencies:
+      '@codemirror/language': 6.0.0
+      codemirror: ^5.65.3
+      graphql: ^15.5.0 || ^16.0.0
+    dependencies:
+      '@codemirror/language': 6.0.0
+      codemirror: 5.65.14
+      graphql: 16.7.1
+      graphql-language-service: 5.1.7(graphql@16.7.1)
+    dev: true
+
+  /codemirror@5.65.14:
+    resolution: {integrity: sha512-VSNugIBDGt0OU9gDjeVr6fNkoFQznrWEUdAApMlXQNbfE8gGO19776D6MwSqF/V/w/sDwonsQ0z7KmmI9guScg==}
+    dev: true
+
+  /color-convert@1.9.3:
+    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
+    dependencies:
+      color-name: 1.1.3
+    dev: true
+
+  /color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+    dependencies:
+      color-name: 1.1.4
+    dev: true
+
+  /color-name@1.1.3:
+    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
+    dev: true
+
+  /color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+    dev: true
+
+  /comlink@4.4.1:
+    resolution: {integrity: sha512-+1dlx0aY5Jo1vHy/tSsIGpSkN4tS9rZSW8FIhG0JH/crs9wwweswIo/POr451r7bZww3hFbPAKnTpimzL/mm4Q==}
+    dev: true
+
+  /commander@11.0.0:
+    resolution: {integrity: sha512-9HMlXtt/BNoYr8ooyjjNRdIilOTkVJXB+GhxMTtOKwk0R4j4lS4NpjuqmRxroBfnfTSHQIHQB7wryHhXarNjmQ==}
+    engines: {node: '>=16'}
+    dev: true
+
+  /common-tags@1.8.2:
+    resolution: {integrity: sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==}
+    engines: {node: '>=4.0.0'}
+    dev: true
+
+  /commondir@1.0.1:
+    resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
+    dev: true
+
+  /compress-commons@4.1.1:
+    resolution: {integrity: sha512-QLdDLCKNV2dtoTorqgxngQCMA+gWXkM/Nwu7FpeBhk/RdkzimqC3jueb/FDmaZeXh+uby1jkBqE3xArsLBE5wQ==}
+    engines: {node: '>= 10'}
+    dependencies:
+      buffer-crc32: 0.2.13
+      crc32-stream: 4.0.2
+      normalize-path: 3.0.0
+      readable-stream: 3.6.2
+    dev: true
+
+  /concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+    dev: true
+
+  /constant-case@3.0.4:
+    resolution: {integrity: sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==}
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.6.1
+      upper-case: 2.0.2
+    dev: true
+
+  /convert-source-map@1.9.0:
+    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
+    dev: true
+
+  /copy-anything@2.0.6:
+    resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==}
+    dependencies:
+      is-what: 3.14.1
+    dev: true
+
+  /copy-anything@3.0.5:
+    resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
+    engines: {node: '>=12.13'}
+    dependencies:
+      is-what: 4.1.15
+    dev: true
+
+  /copy-to-clipboard@3.3.3:
+    resolution: {integrity: sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==}
+    dependencies:
+      toggle-selection: 1.0.6
+    dev: true
+
+  /core-util-is@1.0.3:
+    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
+    dev: true
+
+  /cosmiconfig@6.0.0:
+    resolution: {integrity: sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@types/parse-json': 4.0.0
+      import-fresh: 3.3.0
+      parse-json: 5.2.0
+      path-type: 4.0.0
+      yaml: 1.10.2
+    dev: true
+
+  /cosmiconfig@7.1.0:
+    resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
+    engines: {node: '>=10'}
+    dependencies:
+      '@types/parse-json': 4.0.0
+      import-fresh: 3.3.0
+      parse-json: 5.2.0
+      path-type: 4.0.0
+      yaml: 1.10.2
+    dev: true
+
+  /crc-32@1.2.2:
+    resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
+    engines: {node: '>=0.8'}
+    hasBin: true
+    dev: true
+
+  /crc32-stream@4.0.2:
+    resolution: {integrity: sha512-DxFZ/Hk473b/muq1VJ///PMNLj0ZMnzye9thBpmjpJKCc5eMgB95aK8zCGrGfQ90cWo561Te6HK9D+j4KPdM6w==}
+    engines: {node: '>= 10'}
+    dependencies:
+      crc-32: 1.2.2
+      readable-stream: 3.6.2
+    dev: true
+
+  /create-require@1.1.1:
+    resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
+    dev: true
+
+  /cross-spawn@7.0.3:
+    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
+    engines: {node: '>= 8'}
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+    dev: true
+
+  /crypto-random-string@2.0.0:
+    resolution: {integrity: sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /css-tree@1.1.3:
+    resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==}
+    engines: {node: '>=8.0.0'}
+    dependencies:
+      mdn-data: 2.0.14
+      source-map: 0.6.1
+    dev: true
+
+  /cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+    dev: true
+
+  /csstype@3.1.2:
+    resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
+    dev: true
+
+  /damerau-levenshtein@1.0.8:
+    resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
+    dev: true
+
+  /debug@3.2.7:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.3
+    dev: true
+
+  /debug@4.3.4:
+    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.2
+    dev: true
+
+  /dedent@1.5.1(babel-plugin-macros@3.1.0):
+    resolution: {integrity: sha512-+LxW+KLWxu3HW3M2w2ympwtqPrqYRzU8fqi6Fhd18fBALe15blJPI/I4+UHveMVG6lJqB4JNd4UG0S5cnVHwIg==}
+    peerDependencies:
+      babel-plugin-macros: ^3.1.0
+    peerDependenciesMeta:
+      babel-plugin-macros:
+        optional: true
+    dependencies:
+      babel-plugin-macros: 3.1.0
+    dev: true
+
+  /deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+    dev: true
+
+  /default-browser-id@3.0.0:
+    resolution: {integrity: sha512-OZ1y3y0SqSICtE8DE4S8YOE9UZOJ8wO16fKWVP5J1Qz42kV9jcnMVFrEE/noXb/ss3Q4pZIH79kxofzyNNtUNA==}
+    engines: {node: '>=12'}
+    dependencies:
+      bplist-parser: 0.2.0
+      untildify: 4.0.0
+    dev: true
+
+  /default-browser@4.0.0:
+    resolution: {integrity: sha512-wX5pXO1+BrhMkSbROFsyxUm0i/cJEScyNhA4PPxc41ICuv05ZZB/MX28s8aZx6xjmatvebIapF6hLEKEcpneUA==}
+    engines: {node: '>=14.16'}
+    dependencies:
+      bundle-name: 3.0.0
+      default-browser-id: 3.0.0
+      execa: 7.2.0
+      titleize: 3.0.0
+    dev: true
+
+  /define-lazy-prop@3.0.0:
+    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /define-properties@1.2.0:
+    resolution: {integrity: sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-property-descriptors: 1.0.0
+      object-keys: 1.1.1
+    dev: true
+
+  /del@6.1.1:
+    resolution: {integrity: sha512-ua8BhapfP0JUJKC/zV9yHHDW/rDoDxP4Zhn3AkA6/xT6gY7jYXJiaeyBZznYVujhZZET+UgcbZiQ7sN3WqcImg==}
+    engines: {node: '>=10'}
+    dependencies:
+      globby: 11.1.0
+      graceful-fs: 4.2.11
+      is-glob: 4.0.3
+      is-path-cwd: 2.2.0
+      is-path-inside: 3.0.3
+      p-map: 4.0.0
+      rimraf: 3.0.2
+      slash: 3.0.0
+    dev: true
+
+  /dependency-graph@0.11.0:
+    resolution: {integrity: sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==}
+    engines: {node: '>= 0.6.0'}
+    dev: true
+
+  /dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+    dev: true
+
+  /diff@4.0.2:
+    resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
+    engines: {node: '>=0.3.1'}
+    dev: true
+
+  /dir-glob@3.0.1:
+    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+    engines: {node: '>=8'}
+    dependencies:
+      path-type: 4.0.0
+    dev: true
+
+  /doctrine@2.1.0:
+    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      esutils: 2.0.3
+    dev: true
+
+  /doctrine@3.0.0:
+    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      esutils: 2.0.3
+    dev: true
+
+  /dot-case@3.0.4:
+    resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==}
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.6.1
+    dev: true
+
+  /dotenv@16.0.3:
+    resolution: {integrity: sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /dotenv@16.3.1:
+    resolution: {integrity: sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /dset@3.1.2:
+    resolution: {integrity: sha512-g/M9sqy3oHe477Ar4voQxWtaPIFw1jTdKZuomOjhCcBx9nHUNn0pu6NopuFFrTh/TRZIKEj+76vLWFu9BNKk+Q==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /electron-to-chromium@1.4.478:
+    resolution: {integrity: sha512-qjTA8djMXd+ruoODDFGnRCRBpID+AAfYWCyGtYTNhsuwxI19s8q19gbjKTwRS5z/LyVf5wICaIiPQGLekmbJbA==}
+    dev: true
+
+  /emoji-regex@10.2.1:
+    resolution: {integrity: sha512-97g6QgOk8zlDRdgq1WxwgTMgEWGVAQvB5Fdpgc1MkNy56la5SKP9GsMXKDOdqwn90/41a8yPwIGk1Y6WVbeMQA==}
+    dev: true
+
+  /emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+    dev: true
+
+  /end-of-stream@1.4.4:
+    resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==}
+    dependencies:
+      once: 1.4.0
+    dev: true
+
+  /enhanced-resolve@5.15.0:
+    resolution: {integrity: sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==}
+    engines: {node: '>=10.13.0'}
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.2.1
+    dev: true
+
+  /entities@2.1.0:
+    resolution: {integrity: sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==}
+    dev: true
+
+  /env-paths@2.2.1:
+    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /errno@0.1.8:
+    resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      prr: 1.0.1
+    dev: true
+    optional: true
+
+  /error-ex@1.3.2:
+    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
+    dependencies:
+      is-arrayish: 0.2.1
+    dev: true
+
+  /es-abstract@1.22.1:
+    resolution: {integrity: sha512-ioRRcXMO6OFyRpyzV3kE1IIBd4WG5/kltnzdxSCqoP8CMGs/Li+M1uF5o7lOkZVFjDs+NLesthnF66Pg/0q0Lw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      array-buffer-byte-length: 1.0.0
+      arraybuffer.prototype.slice: 1.0.1
+      available-typed-arrays: 1.0.5
+      call-bind: 1.0.2
+      es-set-tostringtag: 2.0.1
+      es-to-primitive: 1.2.1
+      function.prototype.name: 1.1.5
+      get-intrinsic: 1.2.1
+      get-symbol-description: 1.0.0
+      globalthis: 1.0.3
+      gopd: 1.0.1
+      has: 1.0.3
+      has-property-descriptors: 1.0.0
+      has-proto: 1.0.1
+      has-symbols: 1.0.3
+      internal-slot: 1.0.5
+      is-array-buffer: 3.0.2
+      is-callable: 1.2.7
+      is-negative-zero: 2.0.2
+      is-regex: 1.1.4
+      is-shared-array-buffer: 1.0.2
+      is-string: 1.0.7
+      is-typed-array: 1.1.12
+      is-weakref: 1.0.2
+      object-inspect: 1.12.3
+      object-keys: 1.1.1
+      object.assign: 4.1.4
+      regexp.prototype.flags: 1.5.0
+      safe-array-concat: 1.0.0
+      safe-regex-test: 1.0.0
+      string.prototype.trim: 1.2.7
+      string.prototype.trimend: 1.0.6
+      string.prototype.trimstart: 1.0.6
+      typed-array-buffer: 1.0.0
+      typed-array-byte-length: 1.0.0
+      typed-array-byte-offset: 1.0.0
+      typed-array-length: 1.0.4
+      unbox-primitive: 1.0.2
+      which-typed-array: 1.1.11
+    dev: true
+
+  /es-set-tostringtag@2.0.1:
+    resolution: {integrity: sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      get-intrinsic: 1.2.1
+      has: 1.0.3
+      has-tostringtag: 1.0.0
+    dev: true
+
+  /es-shim-unscopables@1.0.0:
+    resolution: {integrity: sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==}
+    dependencies:
+      has: 1.0.3
+    dev: true
+
+  /es-to-primitive@1.2.1:
+    resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      is-callable: 1.2.7
+      is-date-object: 1.0.5
+      is-symbol: 1.0.4
+    dev: true
+
+  /esbin@0.0.1-beta.2(esbuild@0.18.17):
+    resolution: {integrity: sha512-44c90x+lr9Nu7q4YA0zM0HXLeR+gqn5+9YXEtlFpB/a7NhcN7aVvxczDbwCs3l8KgaHc8lA4XDjnq2FfZIjSPg==}
+    hasBin: true
+    peerDependencies:
+      esbuild: '>=0.12 <1'
+    dependencies:
+      debug: 4.3.4
+      esbuild: 0.18.17
+      pirates: 4.0.6
+      tsconfig-paths: 4.2.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /esbuild-plugin-sass@1.0.1(esbuild@0.18.17):
+    resolution: {integrity: sha512-YFxjzD9Z1vz92QCJcAmCO15WVCUiOobw9ypdVeMsW+xa6S+zqryLUIh8d3fe/UkRHRO5PODZz/3xDAQuEXZwmQ==}
+    peerDependencies:
+      esbuild: '>=0.11.14'
+    dependencies:
+      css-tree: 1.1.3
+      esbuild: 0.18.17
+      fs-extra: 10.0.0
+      sass: 1.47.0
+      tmp: 0.2.1
+    dev: true
+
+  /esbuild@0.18.17:
+    resolution: {integrity: sha512-1GJtYnUxsJreHYA0Y+iQz2UEykonY66HNWOb0yXYZi9/kNrORUEHVg87eQsCtqh59PEJ5YVZJO98JHznMJSWjg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      '@esbuild/android-arm': 0.18.17
+      '@esbuild/android-arm64': 0.18.17
+      '@esbuild/android-x64': 0.18.17
+      '@esbuild/darwin-arm64': 0.18.17
+      '@esbuild/darwin-x64': 0.18.17
+      '@esbuild/freebsd-arm64': 0.18.17
+      '@esbuild/freebsd-x64': 0.18.17
+      '@esbuild/linux-arm': 0.18.17
+      '@esbuild/linux-arm64': 0.18.17
+      '@esbuild/linux-ia32': 0.18.17
+      '@esbuild/linux-loong64': 0.18.17
+      '@esbuild/linux-mips64el': 0.18.17
+      '@esbuild/linux-ppc64': 0.18.17
+      '@esbuild/linux-riscv64': 0.18.17
+      '@esbuild/linux-s390x': 0.18.17
+      '@esbuild/linux-x64': 0.18.17
+      '@esbuild/netbsd-x64': 0.18.17
+      '@esbuild/openbsd-x64': 0.18.17
+      '@esbuild/sunos-x64': 0.18.17
+      '@esbuild/win32-arm64': 0.18.17
+      '@esbuild/win32-ia32': 0.18.17
+      '@esbuild/win32-x64': 0.18.17
+    dev: true
+
+  /escalade@3.1.1:
+    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /escape-string-regexp@1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
+    dev: true
+
+  /escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /eslint-config-prettier@8.9.0(eslint@8.46.0):
+    resolution: {integrity: sha512-+sbni7NfVXnOpnRadUA8S28AUlsZt9GjgFvABIRL9Hkn8KqNzOp+7Lw4QWtrwn20KzU3wqu1QoOj2m+7rKRqkA==}
+    hasBin: true
+    peerDependencies:
+      eslint: '>=7.0.0'
+    dependencies:
+      eslint: 8.46.0
+    dev: true
+
+  /eslint-define-config@1.22.0:
+    resolution: {integrity: sha512-pckNJppFwC4AX+AGK63aa4sX5BluPwWwHES3fq/ER0jDR2U2czwlngg38B4EQ2ibvofufc+R5QfmdPKI6+74vQ==}
+    engines: {node: ^16.13.0 || >=18.0.0, npm: '>=7.0.0', pnpm: '>= 8.6.0'}
+    dev: true
+
+  /eslint-import-resolver-node@0.3.7:
+    resolution: {integrity: sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==}
+    dependencies:
+      debug: 3.2.7
+      is-core-module: 2.12.1
+      resolve: 1.22.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-import-resolver-typescript@3.5.5(@typescript-eslint/parser@6.2.1)(eslint-import-resolver-node@0.3.7)(eslint-plugin-import@2.28.0)(eslint@8.46.0):
+    resolution: {integrity: sha512-TdJqPHs2lW5J9Zpe17DZNQuDnox4xo2o+0tE7Pggain9Rbc19ik8kFtXdxZ250FVx2kF4vlt2RSf4qlUpG7bhw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '*'
+      eslint-plugin-import: '*'
+    dependencies:
+      debug: 4.3.4
+      enhanced-resolve: 5.15.0
+      eslint: 8.46.0
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.2.1)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.46.0)
+      eslint-plugin-import: 2.28.0(@typescript-eslint/parser@6.2.1)(eslint@8.46.0)
+      get-tsconfig: 4.6.2
+      globby: 13.2.2
+      is-core-module: 2.12.1
+      is-glob: 4.0.3
+      synckit: 0.8.5
+    transitivePeerDependencies:
+      - '@typescript-eslint/parser'
+      - eslint-import-resolver-node
+      - eslint-import-resolver-webpack
+      - supports-color
+    dev: true
+
+  /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.2.1)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.46.0):
+    resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint:
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
+    dependencies:
+      '@typescript-eslint/parser': 6.2.1(eslint@8.46.0)(typescript@5.2.0-beta)
+      debug: 3.2.7
+      eslint: 8.46.0
+      eslint-import-resolver-node: 0.3.7
+      eslint-import-resolver-typescript: 3.5.5(@typescript-eslint/parser@6.2.1)(eslint-import-resolver-node@0.3.7)(eslint-plugin-import@2.28.0)(eslint@8.46.0)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-plugin-import@2.28.0(@typescript-eslint/parser@6.2.1)(eslint@8.46.0):
+    resolution: {integrity: sha512-B8s/n+ZluN7sxj9eUf7/pRFERX0r5bnFA2dCaLHy2ZeaQEAz0k+ZZkFWRFHJAqxfxQDx6KLv9LeIki7cFdwW+Q==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+    dependencies:
+      '@typescript-eslint/parser': 6.2.1(eslint@8.46.0)(typescript@5.2.0-beta)
+      array-includes: 3.1.6
+      array.prototype.findlastindex: 1.2.2
+      array.prototype.flat: 1.3.1
+      array.prototype.flatmap: 1.3.1
+      debug: 3.2.7
+      doctrine: 2.1.0
+      eslint: 8.46.0
+      eslint-import-resolver-node: 0.3.7
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.2.1)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.46.0)
+      has: 1.0.3
+      is-core-module: 2.12.1
+      is-glob: 4.0.3
+      minimatch: 3.1.2
+      object.fromentries: 2.0.6
+      object.groupby: 1.0.0
+      object.values: 1.1.6
+      resolve: 1.22.3
+      semver: 6.3.1
+      tsconfig-paths: 3.14.2
+    transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+    dev: true
+
+  /eslint-plugin-unicorn@48.0.1(eslint@8.46.0):
+    resolution: {integrity: sha512-FW+4r20myG/DqFcCSzoumaddKBicIPeFnTrifon2mWIzlfyvzwyqZjqVP7m4Cqr/ZYisS2aiLghkUWaPg6vtCw==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      eslint: '>=8.44.0'
+    dependencies:
+      '@babel/helper-validator-identifier': 7.22.5
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.46.0)
+      ci-info: 3.8.0
+      clean-regexp: 1.0.0
+      eslint: 8.46.0
+      esquery: 1.5.0
+      indent-string: 4.0.0
+      is-builtin-module: 3.2.1
+      jsesc: 3.0.2
+      lodash: 4.17.21
+      pluralize: 8.0.0
+      read-pkg-up: 7.0.1
+      regexp-tree: 0.1.27
+      regjsparser: 0.10.0
+      semver: 7.5.4
+      strip-indent: 3.0.0
+    dev: true
+
+  /eslint-scope@7.2.2:
+    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+    dev: true
+
+  /eslint-visitor-keys@3.4.1:
+    resolution: {integrity: sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
+
+  /eslint-visitor-keys@3.4.2:
+    resolution: {integrity: sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
+
+  /eslint@8.46.0:
+    resolution: {integrity: sha512-cIO74PvbW0qU8e0mIvk5IV3ToWdCq5FYG6gWPHHkx6gNdjlbAYvtfHmlCMXxjcoVaIdwy/IAt3+mDkZkfvb2Dg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    hasBin: true
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.46.0)
+      '@eslint-community/regexpp': 4.6.2
+      '@eslint/eslintrc': 2.1.1
+      '@eslint/js': 8.46.0
+      '@humanwhocodes/config-array': 0.11.10
+      '@humanwhocodes/module-importer': 1.0.1
+      '@nodelib/fs.walk': 1.2.8
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.3
+      debug: 4.3.4
+      doctrine: 3.0.0
+      escape-string-regexp: 4.0.0
+      eslint-scope: 7.2.2
+      eslint-visitor-keys: 3.4.2
+      espree: 9.6.1
+      esquery: 1.5.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 6.0.1
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      globals: 13.20.0
+      graphemer: 1.4.0
+      ignore: 5.2.4
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      is-path-inside: 3.0.3
+      js-yaml: 4.1.0
+      json-stable-stringify-without-jsonify: 1.0.1
+      levn: 0.4.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.3
+      strip-ansi: 6.0.1
+      text-table: 0.2.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /espree@9.6.1:
+    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      acorn: 8.10.0
+      acorn-jsx: 5.3.2(acorn@8.10.0)
+      eslint-visitor-keys: 3.4.2
+    dev: true
+
+  /esquery@1.5.0:
+    resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
+    engines: {node: '>=0.10'}
+    dependencies:
+      estraverse: 5.3.0
+    dev: true
+
+  /esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+    dependencies:
+      estraverse: 5.3.0
+    dev: true
+
+  /estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+    dev: true
+
+  /esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /execa@5.1.1:
+    resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
+    engines: {node: '>=10'}
+    dependencies:
+      cross-spawn: 7.0.3
+      get-stream: 6.0.1
+      human-signals: 2.1.0
+      is-stream: 2.0.1
+      merge-stream: 2.0.0
+      npm-run-path: 4.0.1
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+      strip-final-newline: 2.0.0
+    dev: true
+
+  /execa@7.2.0:
+    resolution: {integrity: sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==}
+    engines: {node: ^14.18.0 || ^16.14.0 || >=18.0.0}
+    dependencies:
+      cross-spawn: 7.0.3
+      get-stream: 6.0.1
+      human-signals: 4.3.1
+      is-stream: 3.0.0
+      merge-stream: 2.0.0
+      npm-run-path: 5.1.0
+      onetime: 6.0.0
+      signal-exit: 3.0.7
+      strip-final-newline: 3.0.0
+    dev: true
+
+  /fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+    dev: true
+
+  /fast-glob@3.3.1:
+    resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
+    engines: {node: '>=8.6.0'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.5
+    dev: true
+
+  /fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+    dev: true
+
+  /fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+    dev: true
+
+  /fast-write-atomic@0.2.1:
+    resolution: {integrity: sha512-WvJe06IfNYlr+6cO3uQkdKdy3Cb1LlCJSF8zRs2eT8yuhdbSlR9nIt+TgQ92RUxiRrQm+/S7RARnMfCs5iuAjw==}
+    dev: true
+
+  /fastq@1.15.0:
+    resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
+    dependencies:
+      reusify: 1.0.4
+    dev: true
+
+  /file-entry-cache@6.0.1:
+    resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    dependencies:
+      flat-cache: 3.0.4
+    dev: true
+
+  /fill-range@7.0.1:
+    resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      to-regex-range: 5.0.1
+    dev: true
+
+  /find-cache-dir@3.3.2:
+    resolution: {integrity: sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==}
+    engines: {node: '>=8'}
+    dependencies:
+      commondir: 1.0.1
+      make-dir: 3.1.0
+      pkg-dir: 4.2.0
+    dev: true
+
+  /find-root@1.1.0:
+    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
+    dev: true
+
+  /find-up@4.1.0:
+    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
+    engines: {node: '>=8'}
+    dependencies:
+      locate-path: 5.0.0
+      path-exists: 4.0.0
+    dev: true
+
+  /find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+    dev: true
+
+  /flat-cache@3.0.4:
+    resolution: {integrity: sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    dependencies:
+      flatted: 3.2.7
+      rimraf: 3.0.2
+    dev: true
+
+  /flatted@3.2.7:
+    resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==}
+    dev: true
+
+  /for-each@0.3.3:
+    resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
+    dependencies:
+      is-callable: 1.2.7
+    dev: true
+
+  /fp-ts@2.16.0:
+    resolution: {integrity: sha512-bLq+KgbiXdTEoT1zcARrWEpa5z6A/8b7PcDW7Gef3NSisQ+VS7ll2Xbf1E+xsgik0rWub/8u0qP/iTTjj+PhxQ==}
+    dev: true
+
+  /framer-motion@6.5.1(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==}
+    peerDependencies:
+      react: '>=16.8 || ^17.0.0 || ^18.0.0'
+      react-dom: '>=16.8 || ^17.0.0 || ^18.0.0'
+    dependencies:
+      '@motionone/dom': 10.12.0
+      framesync: 6.0.1
+      hey-listen: 1.0.8
+      popmotion: 11.0.3
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      style-value-types: 5.0.0
+      tslib: 2.6.1
+    optionalDependencies:
+      '@emotion/is-prop-valid': 0.8.8
+    dev: true
+
+  /framesync@6.0.1:
+    resolution: {integrity: sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==}
+    dependencies:
+      tslib: 2.6.1
+    dev: true
+
+  /fs-constants@1.0.0:
+    resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
+    dev: true
+
+  /fs-extra@10.0.0:
+    resolution: {integrity: sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.1.0
+      universalify: 2.0.0
+    dev: true
+
+  /fs-extra@11.1.1:
+    resolution: {integrity: sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==}
+    engines: {node: '>=14.14'}
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.1.0
+      universalify: 2.0.0
+    dev: true
+
+  /fs-jetpack@5.1.0:
+    resolution: {integrity: sha512-Xn4fDhLydXkuzepZVsr02jakLlmoARPy+YWIclo4kh0GyNGUHnTqeH/w/qIsVn50dFxtp8otPL2t/HcPJBbxUA==}
+    dependencies:
+      minimatch: 5.1.6
+    dev: true
+
+  /fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+    dev: true
+
+  /fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /function-bind@1.1.1:
+    resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
+    dev: true
+
+  /function.prototype.name@1.1.5:
+    resolution: {integrity: sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.2.0
+      es-abstract: 1.22.1
+      functions-have-names: 1.2.3
+    dev: true
+
+  /functions-have-names@1.2.3:
+    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
+    dev: true
+
+  /fuse.js@6.6.2:
+    resolution: {integrity: sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /generic-names@4.0.0:
+    resolution: {integrity: sha512-ySFolZQfw9FoDb3ed9d80Cm9f0+r7qj+HJkWjeD9RBfpxEVTlVhol+gvaQB/78WbwYfbnNh8nWHHBSlg072y6A==}
+    dependencies:
+      loader-utils: 3.2.1
+    dev: true
+
+  /gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /get-intrinsic@1.2.1:
+    resolution: {integrity: sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==}
+    dependencies:
+      function-bind: 1.1.1
+      has: 1.0.3
+      has-proto: 1.0.1
+      has-symbols: 1.0.3
+    dev: true
+
+  /get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /get-stream@6.0.1:
+    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /get-symbol-description@1.0.0:
+    resolution: {integrity: sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      get-intrinsic: 1.2.1
+    dev: true
+
+  /get-tsconfig@4.6.2:
+    resolution: {integrity: sha512-E5XrT4CbbXcXWy+1jChlZmrmCwd5KGx502kDCXJJ7y898TtWW9FwoG5HfOLVRKmlmDGkWN2HM9Ho+/Y8F0sJDg==}
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+    dev: true
+
+  /glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+    dependencies:
+      is-glob: 4.0.3
+    dev: true
+
+  /glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+    dependencies:
+      is-glob: 4.0.3
+    dev: true
+
+  /glob-to-regexp@0.4.1:
+    resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
+    dev: true
+
+  /glob@7.2.3:
+    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+    dev: true
+
+  /glob@8.1.0:
+    resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 5.1.6
+      once: 1.4.0
+    dev: true
+
+  /global-dirs@3.0.1:
+    resolution: {integrity: sha512-NBcGGFbBA9s1VzD41QXDG+3++t9Mn5t1FpLdhESY6oKY4gYTFpX4wO3sqGUa0Srjtbfj3szX0RnemmrVRUdULA==}
+    engines: {node: '>=10'}
+    dependencies:
+      ini: 2.0.0
+    dev: true
+
+  /globals@11.12.0:
+    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /globals@13.20.0:
+    resolution: {integrity: sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      type-fest: 0.20.2
+    dev: true
+
+  /globalthis@1.0.3:
+    resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      define-properties: 1.2.0
+    dev: true
+
+  /globby@11.1.0:
+    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
+    engines: {node: '>=10'}
+    dependencies:
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.3.1
+      ignore: 5.2.4
+      merge2: 1.4.1
+      slash: 3.0.0
+    dev: true
+
+  /globby@13.2.2:
+    resolution: {integrity: sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      dir-glob: 3.0.1
+      fast-glob: 3.3.1
+      ignore: 5.2.4
+      merge2: 1.4.1
+      slash: 4.0.0
+    dev: true
+
+  /goober@2.1.13(csstype@3.1.2):
+    resolution: {integrity: sha512-jFj3BQeleOoy7t93E9rZ2de+ScC4lQICLwiAQmKMg9F6roKGaLSHoCDYKkWlSafg138jejvq/mTdvmnwDQgqoQ==}
+    peerDependencies:
+      csstype: ^3.0.10
+    dependencies:
+      csstype: 3.1.2
+    dev: true
+
+  /gopd@1.0.1:
+    resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
+    dependencies:
+      get-intrinsic: 1.2.1
+    dev: true
+
+  /graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+    dev: true
+
+  /graphemer@1.4.0:
+    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
+    dev: true
+
+  /graphiql@3.0.5(@codemirror/language@6.0.0)(@types/node@20.4.5)(@types/react-dom@18.2.7)(@types/react@18.2.18)(graphql@16.7.1)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-R02CKVXPajOmJcg0TAKuRMU8qvwb7ltGDYqbaQMKbLeYYw/wQUrmTxLwdVuRadgRL4ubNzl3q5vKTkQKR5Ay2Q==}
+    peerDependencies:
+      graphql: ^15.5.0 || ^16.0.0
+      react: ^16.8.0 || ^17 || ^18
+      react-dom: ^16.8.0 || ^17 || ^18
+    dependencies:
+      '@graphiql/react': 0.19.3(@codemirror/language@6.0.0)(@types/node@20.4.5)(@types/react-dom@18.2.7)(@types/react@18.2.18)(graphql@16.7.1)(react-dom@18.2.0)(react@18.2.0)
+      '@graphiql/toolkit': 0.9.1(@types/node@20.4.5)(graphql@16.7.1)
+      graphql: 16.7.1
+      graphql-language-service: 5.1.7(graphql@16.7.1)
+      markdown-it: 12.3.2
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@types/node'
+      - '@types/react'
+      - '@types/react-dom'
+      - graphql-ws
+    dev: true
+
+  /graphql-language-service@5.1.7(graphql@16.7.1):
+    resolution: {integrity: sha512-xkawYMJeoNYGhT+SpSH3c2qf6HpGHQ/duDmrseVHBpVCrXAiGnliXGSCC4jyMGgZQ05GytsZ12p0nUo7s6lSSw==}
+    hasBin: true
+    peerDependencies:
+      graphql: ^15.5.0 || ^16.0.0
+    dependencies:
+      graphql: 16.7.1
+      nullthrows: 1.1.1
+      vscode-languageserver-types: 3.17.3
+    dev: true
+
+  /graphql-query-complexity@0.12.0(graphql@16.7.1):
+    resolution: {integrity: sha512-fWEyuSL6g/+nSiIRgIipfI6UXTI7bAxrpPlCY1c0+V3pAEUo1ybaKmSBgNr1ed2r+agm1plJww8Loig9y6s2dw==}
+    peerDependencies:
+      graphql: ^14.6.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      graphql: 16.7.1
+      lodash.get: 4.4.2
+    dev: true
+
+  /graphql-scalars@1.22.2(graphql@16.7.1):
+    resolution: {integrity: sha512-my9FB4GtghqXqi/lWSVAOPiTzTnnEzdOXCsAC2bb5V7EFNQjVjwy3cSSbUvgYOtDuDibd+ZsCDhz+4eykYOlhQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      graphql: 16.7.1
+      tslib: 2.6.1
+    dev: true
+
+  /graphql-subscriptions@2.0.0(graphql@16.7.1):
+    resolution: {integrity: sha512-s6k2b8mmt9gF9pEfkxsaO1lTxaySfKoEJzEfmwguBbQ//Oq23hIXCfR1hm4kdh5hnR20RdwB+s3BCb+0duHSZA==}
+    peerDependencies:
+      graphql: ^15.7.2 || ^16.0.0
+    dependencies:
+      graphql: 16.7.1
+      iterall: 1.3.0
+    dev: true
+
+  /graphql-tag@2.12.6(graphql@16.7.1):
+    resolution: {integrity: sha512-FdSNcu2QQcWnM2VNvSCCDCVS5PpPqpzgFT8+GXzqJuoDd0CBncxCY278u4mhRO7tMgo2JjgJA5aZ+nWSQ/Z+xg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      graphql: ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      graphql: 16.7.1
+      tslib: 2.6.1
+    dev: true
+
+  /graphql-type-json@0.3.2(graphql@16.7.1):
+    resolution: {integrity: sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg==}
+    peerDependencies:
+      graphql: '>=0.8.0'
+    dependencies:
+      graphql: 16.7.1
+    dev: true
+
+  /graphql@16.7.1:
+    resolution: {integrity: sha512-DRYR9tf+UGU0KOsMcKAlXeFfX89UiiIZ0dRU3mR0yJfu6OjZqUcp68NnFLnqQU5RexygFoDy1EW+ccOYcPfmHg==}
+    engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
+    dev: true
+
+  /has-bigints@1.0.2:
+    resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
+    dev: true
+
+  /has-flag@3.0.0:
+    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /has-property-descriptors@1.0.0:
+    resolution: {integrity: sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==}
+    dependencies:
+      get-intrinsic: 1.2.1
+    dev: true
+
+  /has-proto@1.0.1:
+    resolution: {integrity: sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /has-symbols@1.0.3:
+    resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /has-tostringtag@1.0.0:
+    resolution: {integrity: sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-symbols: 1.0.3
+    dev: true
+
+  /has@1.0.3:
+    resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
+    engines: {node: '>= 0.4.0'}
+    dependencies:
+      function-bind: 1.1.1
+    dev: true
+
+  /hasha@5.2.2:
+    resolution: {integrity: sha512-Hrp5vIK/xr5SkeN2onO32H0MgNZ0f17HRNH39WfL0SYUNOTZ5Lz1TJ8Pajo/87dYGEFlLMm7mIc/k/s6Bvz9HQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      is-stream: 2.0.1
+      type-fest: 0.8.1
+    dev: true
+
+  /header-case@2.0.4:
+    resolution: {integrity: sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==}
+    dependencies:
+      capital-case: 1.0.4
+      tslib: 2.6.1
+    dev: true
+
+  /hey-listen@1.0.8:
+    resolution: {integrity: sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==}
+    dev: true
+
+  /hoist-non-react-statics@3.3.2:
+    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
+    dependencies:
+      react-is: 16.13.1
+    dev: true
+
+  /hooks.macro@1.1.2(react@18.2.0):
+    resolution: {integrity: sha512-cekr0kazwaRhTuoiLteb97OkGhwjpW4sGVHKFG+O24qTeGIZmMbVUATww0HMXLwiedUDCQO0nnxsL3YKyGUH+g==}
+    peerDependencies:
+      react: ^16.8.0
+    dependencies:
+      '@babel/helper-module-imports': 7.22.5
+      babel-plugin-macros: 2.8.0
+      react: 18.2.0
+    dev: true
+
+  /hosted-git-info@2.8.9:
+    resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
+    dev: true
+
+  /html-parse-stringify@3.0.1:
+    resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==}
+    dependencies:
+      void-elements: 3.1.0
+    dev: true
+
+  /http-proxy-agent@7.0.0:
+    resolution: {integrity: sha512-+ZT+iBxVUQ1asugqnD6oWoRiS25AkjNfG085dKJGtGxkdwLQrMKU5wJr2bOOFAXzKcTuqq+7fZlTMgG3SRfIYQ==}
+    engines: {node: '>= 14'}
+    dependencies:
+      agent-base: 7.1.0
+      debug: 4.3.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /https-proxy-agent@7.0.0:
+    resolution: {integrity: sha512-0euwPCRyAPSgGdzD1IVN9nJYHtBhJwb6XPfbpQcYbPCwrBidX6GzxmchnaF4sfF/jPb74Ojx5g4yTg3sixlyPw==}
+    engines: {node: '>= 14'}
+    dependencies:
+      agent-base: 7.1.0
+      debug: 4.3.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /human-signals@2.1.0:
+    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
+    engines: {node: '>=10.17.0'}
+    dev: true
+
+  /human-signals@4.3.1:
+    resolution: {integrity: sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==}
+    engines: {node: '>=14.18.0'}
+    dev: true
+
+  /i18next-http-backend@2.2.1(patch_hash=oxpqp5jjldpyo63xee6uzmu3na):
+    resolution: {integrity: sha512-ZXIdn/8NJIBJ0X4hzXfc3STYxKrCKh1fYjji9HPyIpEJfvTvy8/ZlTl8RuTizzCPj2ZcWrfaecyOMKs6bQ7u5A==}
+    dependencies:
+      cross-fetch: link:shims/cross-fetch
+    dev: true
+    patched: true
+
+  /i18next-icu@2.3.0(intl-messageformat@10.5.0):
+    resolution: {integrity: sha512-x+j7kd5nDJCfbU53uwsMfXD7ALPu5uv0bqjAMQ5nVvXRoj1L7gkmswKtM3XDWYo4YUHf1jznlhSdPyy0xEwU+Q==}
+    peerDependencies:
+      intl-messageformat: ^10.3.3
+    dependencies:
+      intl-messageformat: 10.5.0
+    dev: true
+
+  /i18next@23.4.1:
+    resolution: {integrity: sha512-07ekE7hbUrbxTYj97VnBzyhKcGURTJC9p4iWTwCVC8t63T+YrgqQmb/n1LBQMivZYwR61pqS+PC0G2rtENycyQ==}
+    dependencies:
+      '@babel/runtime': 7.22.6
+    dev: true
+
+  /iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+    requiresBuild: true
+    dependencies:
+      safer-buffer: 2.1.2
+    dev: true
+    optional: true
+
+  /icss-utils@5.1.0(postcss@8.4.27):
+    resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      postcss: 8.4.27
+    dev: true
+
+  /idb-keyval@6.2.1:
+    resolution: {integrity: sha512-8Sb3veuYCyrZL+VBt9LJfZjLUPWVvqn8tG28VqYNFCo43KHcKuq+b4EiXGeuaLAQWL2YmyDgMp2aSpH9JHsEQg==}
+    dev: true
+
+  /ieee754@1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+    dev: true
+
+  /ignore-walk@5.0.1:
+    resolution: {integrity: sha512-yemi4pMf51WKT7khInJqAvsIGzoqYXblnsz0ql8tM+yi1EKYTY1evX4NAbJrLL/Aanr2HyZeluqU+Oi7MGHokw==}
+    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+    dependencies:
+      minimatch: 5.1.6
+    dev: true
+
+  /ignore@5.2.4:
+    resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
+    engines: {node: '>= 4'}
+    dev: true
+
+  /image-size@0.5.5:
+    resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==}
+    engines: {node: '>=0.10.0'}
+    hasBin: true
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /immediate@3.3.0:
+    resolution: {integrity: sha512-HR7EVodfFUdQCTIeySw+WDRFJlPcLOJbXfwwZ7Oom6tjsvZ3bOkCDJHehQC3nxJrv7+f9XecwazynjU8e4Vw3Q==}
+    dev: true
+
+  /immer@10.0.2:
+    resolution: {integrity: sha512-Rx3CqeqQ19sxUtYV9CU911Vhy8/721wRFnJv3REVGWUmoAcIwzifTsdmJte/MV+0/XpM35LZdQMBGkRIoLPwQA==}
+    dev: true
+
+  /immutable@4.3.1:
+    resolution: {integrity: sha512-lj9cnmB/kVS0QHsJnYKD1uo3o39nrbKxszjnqS9Fr6NB7bZzW45U6WSGBPKXDL/CvDKqDNPA4r3DoDQ8GTxo2A==}
+    dev: true
+
+  /import-fresh@3.3.0:
+    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
+    engines: {node: '>=6'}
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+    dev: true
+
+  /import-from@4.0.0:
+    resolution: {integrity: sha512-P9J71vT5nLlDeV8FHs5nNxaLbrpfAV5cF5srvbZfpwpcJoM/xZR3hiv+q+SAnuSmuGbXMWud063iIMx/V/EWZQ==}
+    engines: {node: '>=12.2'}
+    dev: true
+
+  /imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+    dev: true
+
+  /indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /inflight@1.0.6:
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    dependencies:
+      once: 1.4.0
+      wrappy: 1.0.2
+    dev: true
+
+  /inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+    dev: true
+
+  /ini@2.0.0:
+    resolution: {integrity: sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /internal-slot@1.0.5:
+    resolution: {integrity: sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      get-intrinsic: 1.2.1
+      has: 1.0.3
+      side-channel: 1.0.4
+    dev: true
+
+  /intl-messageformat@10.5.0:
+    resolution: {integrity: sha512-AvojYuOaRb6r2veOKfTVpxH9TrmjSdc5iR9R5RgBwrDZYSmAAFVT+QLbW3C4V7Qsg0OguMp67Q/EoUkxZzXRGw==}
+    dependencies:
+      '@formatjs/ecma402-abstract': 1.17.0
+      '@formatjs/fast-memoize': 2.2.0
+      '@formatjs/icu-messageformat-parser': 2.6.0
+      tslib: 2.6.1
+    dev: true
+
+  /invariant@2.2.4:
+    resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: true
+
+  /is-absolute@1.0.0:
+    resolution: {integrity: sha512-dOWoqflvcydARa360Gvv18DZ/gRuHKi2NU/wU5X1ZFzdYfH29nkiNZsF3mp4OJ3H4yo9Mx8A/uAGNzpzPN3yBA==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-relative: 1.0.0
+      is-windows: 1.0.2
+    dev: true
+
+  /is-array-buffer@3.0.2:
+    resolution: {integrity: sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==}
+    dependencies:
+      call-bind: 1.0.2
+      get-intrinsic: 1.2.1
+      is-typed-array: 1.1.12
+    dev: true
+
+  /is-arrayish@0.2.1:
+    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+    dev: true
+
+  /is-bigint@1.0.4:
+    resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
+    dependencies:
+      has-bigints: 1.0.2
+    dev: true
+
+  /is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+    dependencies:
+      binary-extensions: 2.2.0
+    dev: true
+
+  /is-boolean-object@1.1.2:
+    resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      has-tostringtag: 1.0.0
+    dev: true
+
+  /is-builtin-module@3.2.1:
+    resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==}
+    engines: {node: '>=6'}
+    dependencies:
+      builtin-modules: 3.3.0
+    dev: true
+
+  /is-callable@1.2.7:
+    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /is-core-module@2.12.1:
+    resolution: {integrity: sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==}
+    dependencies:
+      has: 1.0.3
+    dev: true
+
+  /is-date-object@1.0.5:
+    resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-tostringtag: 1.0.0
+    dev: true
+
+  /is-docker@2.2.1:
+    resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
+    engines: {node: '>=8'}
+    hasBin: true
+    dev: true
+
+  /is-docker@3.0.0:
+    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    hasBin: true
+    dev: true
+
+  /is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-extglob: 2.1.1
+    dev: true
+
+  /is-inside-container@1.0.0:
+    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
+    engines: {node: '>=14.16'}
+    hasBin: true
+    dependencies:
+      is-docker: 3.0.0
+    dev: true
+
+  /is-lower-case@2.0.2:
+    resolution: {integrity: sha512-bVcMJy4X5Og6VZfdOZstSexlEy20Sr0k/p/b2IlQJlfdKAQuMpiv5w2Ccxb8sKdRUNAG1PnHVHjFSdRDVS6NlQ==}
+    dependencies:
+      tslib: 2.6.1
+    dev: true
+
+  /is-negative-zero@2.0.2:
+    resolution: {integrity: sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /is-number-object@1.0.7:
+    resolution: {integrity: sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-tostringtag: 1.0.0
+    dev: true
+
+  /is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+    dev: true
+
+  /is-path-cwd@2.2.0:
+    resolution: {integrity: sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /is-path-inside@3.0.3:
+    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /is-plain-object@2.0.4:
+    resolution: {integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      isobject: 3.0.1
+    dev: true
+
+  /is-primitive@3.0.1:
+    resolution: {integrity: sha512-GljRxhWvlCNRfZyORiH77FwdFwGcMO620o37EOYC0ORWdq+WYNVqW0w2Juzew4M+L81l6/QS3t5gkkihyRqv9w==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /is-regex@1.1.4:
+    resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      has-tostringtag: 1.0.0
+    dev: true
+
+  /is-relative@1.0.0:
+    resolution: {integrity: sha512-Kw/ReK0iqwKeu0MITLFuj0jbPAmEiOsIwyIXvvbfa6QfmN9pkD1M+8pdk7Rl/dTKbH34/XBFMbgD4iMJhLQbGA==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-unc-path: 1.0.0
+    dev: true
+
+  /is-shared-array-buffer@1.0.2:
+    resolution: {integrity: sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==}
+    dependencies:
+      call-bind: 1.0.2
+    dev: true
+
+  /is-stream@2.0.1:
+    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /is-stream@3.0.0:
+    resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dev: true
+
+  /is-string@1.0.7:
+    resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-tostringtag: 1.0.0
+    dev: true
+
+  /is-symbol@1.0.4:
+    resolution: {integrity: sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-symbols: 1.0.3
+    dev: true
+
+  /is-typed-array@1.1.12:
+    resolution: {integrity: sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      which-typed-array: 1.1.11
+    dev: true
+
+  /is-unc-path@1.0.0:
+    resolution: {integrity: sha512-mrGpVd0fs7WWLfVsStvgF6iEJnbjDFZh9/emhRDcGWTduTfNHd9CHeUwH3gYIjdbwo4On6hunkztwOaAw0yllQ==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      unc-path-regex: 0.1.2
+    dev: true
+
+  /is-upper-case@2.0.2:
+    resolution: {integrity: sha512-44pxmxAvnnAOwBg4tHPnkfvgjPwbc5QIsSstNU+YcJ1ovxVzCWpSGosPJOZh/a1tdl81fbgnLc9LLv+x2ywbPQ==}
+    dependencies:
+      tslib: 2.6.1
+    dev: true
+
+  /is-weakref@1.0.2:
+    resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
+    dependencies:
+      call-bind: 1.0.2
+    dev: true
+
+  /is-what@3.14.1:
+    resolution: {integrity: sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==}
+    dev: true
+
+  /is-what@4.1.15:
+    resolution: {integrity: sha512-uKua1wfy3Yt+YqsD6mTUEa2zSi3G1oPlqTflgaPJ7z63vUGN5pxFpnQfeSLMFnJDEsdvOtkp1rUWkYjB4YfhgA==}
+    engines: {node: '>=12.13'}
+    dev: true
+
+  /is-windows@1.0.2:
+    resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /is-wsl@2.2.0:
+    resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
+    engines: {node: '>=8'}
+    dependencies:
+      is-docker: 2.2.1
+    dev: true
+
+  /isarray@1.0.0:
+    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
+    dev: true
+
+  /isarray@2.0.5:
+    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
+    dev: true
+
+  /isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+    dev: true
+
+  /isobject@3.0.1:
+    resolution: {integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /iterall@1.3.0:
+    resolution: {integrity: sha512-QZ9qOMdF+QLHxy1QIpUHUU1D5pS2CG2P69LF6L6CPjPYA/XMOmKV3PZpawHoAjHNyB0swdVTRxdYT4tbBbxqwg==}
+    dev: true
+
+  /js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+    dev: true
+
+  /js-yaml@4.1.0:
+    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
+    hasBin: true
+    dependencies:
+      argparse: 2.0.1
+    dev: true
+
+  /jsesc@0.5.0:
+    resolution: {integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==}
+    hasBin: true
+    dev: true
+
+  /jsesc@2.5.2:
+    resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
+    engines: {node: '>=4'}
+    hasBin: true
+    dev: true
+
+  /jsesc@3.0.2:
+    resolution: {integrity: sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dev: true
+
+  /json-parse-even-better-errors@2.3.1:
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+    dev: true
+
+  /json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+    dev: true
+
+  /json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+    dev: true
+
+  /json5@1.0.2:
+    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
+    hasBin: true
+    dependencies:
+      minimist: 1.2.8
+    dev: true
+
+  /json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dev: true
+
+  /jsonfile@6.1.0:
+    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
+    dependencies:
+      universalify: 2.0.0
+    optionalDependencies:
+      graceful-fs: 4.2.11
+    dev: true
+
+  /kleur@3.0.3:
+    resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /kleur@4.1.5:
+    resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /language-subtag-registry@0.3.22:
+    resolution: {integrity: sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==}
+    dev: true
+
+  /language-tags@1.0.8:
+    resolution: {integrity: sha512-aWAZwgPLS8hJ20lNPm9HNVs4inexz6S2sQa3wx/+ycuutMNE5/IfYxiWYBbi+9UWCQVaXYCOPUl6gFrPR7+jGg==}
+    dependencies:
+      language-subtag-registry: 0.3.22
+    dev: true
+
+  /lazystream@1.0.1:
+    resolution: {integrity: sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==}
+    engines: {node: '>= 0.6.3'}
+    dependencies:
+      readable-stream: 2.3.8
+    dev: true
+
+  /less@4.1.3:
+    resolution: {integrity: sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dependencies:
+      copy-anything: 2.0.6
+      parse-node-version: 1.0.1
+      tslib: 2.6.1
+    optionalDependencies:
+      errno: 0.1.8
+      graceful-fs: 4.2.11
+      image-size: 0.5.5
+      make-dir: 2.1.0
+      mime: 1.6.0
+      needle: 3.2.0
+      source-map: 0.6.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+    dev: true
+
+  /libphonenumber-js@1.10.38:
+    resolution: {integrity: sha512-4NjVXVUmpZ9Zsqq6FXa2+MKI+KAI3tOqA0pxXgXGluhpj4ge5didmbWJpMBqGB3AVGv1SnEtKdGTbxjSEG1kCQ==}
+    dev: true
+
+  /lilconfig@2.1.0:
+    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+    dev: true
+
+  /linkify-it@3.0.3:
+    resolution: {integrity: sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==}
+    dependencies:
+      uc.micro: 1.0.6
+    dev: true
+
+  /loader-utils@3.2.1:
+    resolution: {integrity: sha512-ZvFw1KWS3GVyYBYb7qkmRM/WwL2TQQBxgCK62rlvm4WpVQ23Nb4tYjApUlfjrEGvOs7KHEsmyUn75OHZrJMWPw==}
+    engines: {node: '>= 12.13.0'}
+    dev: true
+
+  /locate-path@5.0.0:
+    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
+    engines: {node: '>=8'}
+    dependencies:
+      p-locate: 4.1.0
+    dev: true
+
+  /locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+    dependencies:
+      p-locate: 5.0.0
+    dev: true
+
+  /lodash-es@4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+    dev: true
+
+  /lodash.camelcase@4.3.0:
+    resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
+    dev: true
+
+  /lodash.defaults@4.2.0:
+    resolution: {integrity: sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==}
+    dev: true
+
+  /lodash.difference@4.5.0:
+    resolution: {integrity: sha512-dS2j+W26TQ7taQBGN8Lbbq04ssV3emRw4NY58WErlTO29pIqS0HmoT5aJ9+TUQ1N3G+JOZSji4eugsWwGp9yPA==}
+    dev: true
+
+  /lodash.flatten@4.4.0:
+    resolution: {integrity: sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g==}
+    dev: true
+
+  /lodash.get@4.4.2:
+    resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
+    dev: true
+
+  /lodash.isplainobject@4.0.6:
+    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+    dev: true
+
+  /lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+    dev: true
+
+  /lodash.noop@3.0.1:
+    resolution: {integrity: sha512-TmYdmu/pebrdTIBDK/FDx9Bmfzs9x0sZG6QIJuMDTqEPfeciLcN13ij+cOd0i9vwJfBtbG9UQ+C7MkXgYxrIJg==}
+    dev: true
+
+  /lodash.union@4.6.0:
+    resolution: {integrity: sha512-c4pB2CdGrGdjMKYLA+XiRDO7Y0PRQbm/Gzg8qMj+QH+pFVAoTp5sBpO0odL3FjoPCGjK96p6qsP+yQoiLoOBcw==}
+    dev: true
+
+  /lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+    dev: true
+
+  /loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+    dependencies:
+      js-tokens: 4.0.0
+    dev: true
+
+  /lower-case-first@2.0.2:
+    resolution: {integrity: sha512-EVm/rR94FJTZi3zefZ82fLWab+GX14LJN4HrWBcuo6Evmsl9hEfnqxgcHCKb9q+mNf6EVdsjx/qucYFIIB84pg==}
+    dependencies:
+      tslib: 2.6.1
+    dev: true
+
+  /lower-case@2.0.2:
+    resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
+    dependencies:
+      tslib: 2.6.1
+    dev: true
+
+  /lru-cache@10.0.0:
+    resolution: {integrity: sha512-svTf/fzsKHffP42sujkO/Rjs37BCIsQVRCeNYIm9WN8rgT7ffoUnRtZCqU+6BqcSBdv8gwJeTz8knJpgACeQMw==}
+    engines: {node: 14 || >=16.14}
+    dev: true
+
+  /lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+    dependencies:
+      yallist: 3.1.1
+    dev: true
+
+  /lru-cache@6.0.0:
+    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
+    engines: {node: '>=10'}
+    dependencies:
+      yallist: 4.0.0
+    dev: true
+
+  /make-dir@2.1.0:
+    resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
+    engines: {node: '>=6'}
+    requiresBuild: true
+    dependencies:
+      pify: 4.0.1
+      semver: 5.7.2
+    dev: true
+    optional: true
+
+  /make-dir@3.1.0:
+    resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
+    engines: {node: '>=8'}
+    dependencies:
+      semver: 6.3.1
+    dev: true
+
+  /make-error@1.3.6:
+    resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
+    dev: true
+
+  /map-cache@0.2.2:
+    resolution: {integrity: sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /markdown-it@12.3.2:
+    resolution: {integrity: sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==}
+    hasBin: true
+    dependencies:
+      argparse: 2.0.1
+      entities: 2.1.0
+      linkify-it: 3.0.3
+      mdurl: 1.0.1
+      uc.micro: 1.0.6
+    dev: true
+
+  /mdn-data@2.0.14:
+    resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
+    dev: true
+
+  /mdurl@1.0.1:
+    resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==}
+    dev: true
+
+  /memoize-one@5.2.1:
+    resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==}
+    dev: true
+
+  /memoize-one@6.0.0:
+    resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
+    dev: true
+
+  /merge-stream@2.0.0:
+    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
+    dev: true
+
+  /merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+    dev: true
+
+  /meros@1.3.0(@types/node@20.4.5):
+    resolution: {integrity: sha512-2BNGOimxEz5hmjUG2FwoxCt5HN7BXdaWyFqEwxPTrJzVdABtrL4TiHTcsWSFAxPQ/tOnEaQEJh3qWq71QRMY+w==}
+    engines: {node: '>=13'}
+    peerDependencies:
+      '@types/node': '>=13'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+    dependencies:
+      '@types/node': 20.4.5
+    dev: true
+
+  /micromatch@4.0.5:
+    resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
+    engines: {node: '>=8.6'}
+    dependencies:
+      braces: 3.0.2
+      picomatch: 2.3.1
+    dev: true
+
+  /mime@1.6.0:
+    resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
+    engines: {node: '>=4'}
+    hasBin: true
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /mimic-fn@2.1.0:
+    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /mimic-fn@4.0.0:
+    resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /min-indent@1.0.1:
+    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /minimatch@3.1.2:
+    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+    dependencies:
+      brace-expansion: 1.1.11
+    dev: true
+
+  /minimatch@5.1.6:
+    resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
+    engines: {node: '>=10'}
+    dependencies:
+      brace-expansion: 2.0.1
+    dev: true
+
+  /minimatch@9.0.3:
+    resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    dependencies:
+      brace-expansion: 2.0.1
+    dev: true
+
+  /minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+    dev: true
+
+  /monaco-editor@0.40.0(patch_hash=ku3o7hkzj5ntzax27c7xlqnuoa):
+    resolution: {integrity: sha512-1wymccLEuFSMBvCk/jT1YDW/GuxMLYwnFwF9CDyYCxoTw2Pt379J3FUhwy9c43j51JdcxVPjwk0jm0EVDsBS2g==}
+    dev: true
+    patched: true
+
+  /ms@2.1.2:
+    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
+    dev: true
+
+  /ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+    dev: true
+
+  /nanoid@3.3.6:
+    resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+    dev: true
+
+  /nanoid@4.0.2:
+    resolution: {integrity: sha512-7ZtY5KTCNheRGfEFxnedV5zFiORN1+Y1N6zvPTnHQd8ENUvfaDBeuJDZb2bN/oXwXxu3qkTXDzy57W5vAmDTBw==}
+    engines: {node: ^14 || ^16 || >=18}
+    hasBin: true
+    dev: true
+
+  /natural-compare-lite@1.4.0:
+    resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
+    dev: true
+
+  /natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+    dev: true
+
+  /needle@3.2.0:
+    resolution: {integrity: sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==}
+    engines: {node: '>= 4.4.x'}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      debug: 3.2.7
+      iconv-lite: 0.6.3
+      sax: 1.2.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+    optional: true
+
+  /new-github-issue-url@0.2.1:
+    resolution: {integrity: sha512-md4cGoxuT4T4d/HDOXbrUHkTKrp/vp+m3aOA7XXVYwNsUNMK49g3SQicTSeV5GIz/5QVGAeYRAOlyp9OvlgsYA==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /no-case@3.0.4:
+    resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
+    dependencies:
+      lower-case: 2.0.2
+      tslib: 2.6.1
+    dev: true
+
+  /node-fetch@2.6.11:
+    resolution: {integrity: sha512-4I6pdBY1EthSqDmJkiNk3JIT8cswwR9nfeW/cPdUagJYEQG7R95WRH74wpz7ma8Gh/9dI9FP+OU+0E4FvtA55w==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+    dependencies:
+      whatwg-url: 5.0.0
+    dev: true
+
+  /node-fetch@2.6.12:
+    resolution: {integrity: sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+    dependencies:
+      whatwg-url: 5.0.0
+    dev: true
+
+  /node-releases@2.0.13:
+    resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
+    dev: true
+
+  /normalize-package-data@2.5.0:
+    resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
+    dependencies:
+      hosted-git-info: 2.8.9
+      resolve: 1.22.2
+      semver: 5.7.2
+      validate-npm-package-license: 3.0.4
+    dev: true
+
+  /normalize-path@2.1.1:
+    resolution: {integrity: sha512-3pKJwH184Xo/lnH6oyP1q2pMd7HcypqqmRs91/6/i2CGtWwIKGCkOOMTm/zXbgTEWHw1uNpNi/igc3ePOYHb6w==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      remove-trailing-separator: 1.1.0
+    dev: true
+
+  /normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /normalize.css@8.0.1:
+    resolution: {integrity: sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==}
+    dev: true
+
+  /npm-bundled@2.0.1:
+    resolution: {integrity: sha512-gZLxXdjEzE/+mOstGDqR6b0EkhJ+kM6fxM6vUuckuctuVPh80Q6pw/rSZj9s4Gex9GxWtIicO1pc8DB9KZWudw==}
+    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+    dependencies:
+      npm-normalize-package-bin: 2.0.0
+    dev: true
+
+  /npm-normalize-package-bin@2.0.0:
+    resolution: {integrity: sha512-awzfKUO7v0FscrSpRoogyNm0sajikhBWpU0QMrW09AMi9n1PoKU6WaIqUzuJSQnpciZZmJ/jMZ2Egfmb/9LiWQ==}
+    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+    dev: true
+
+  /npm-packlist@5.1.3:
+    resolution: {integrity: sha512-263/0NGrn32YFYi4J533qzrQ/krmmrWwhKkzwTuM4f/07ug51odoaNjUexxO4vxlzURHcmYMH1QjvHjsNDKLVg==}
+    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+    hasBin: true
+    dependencies:
+      glob: 8.1.0
+      ignore-walk: 5.0.1
+      npm-bundled: 2.0.1
+      npm-normalize-package-bin: 2.0.0
+    dev: true
+
+  /npm-run-path@4.0.1:
+    resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
+    engines: {node: '>=8'}
+    dependencies:
+      path-key: 3.1.1
+    dev: true
+
+  /npm-run-path@5.1.0:
+    resolution: {integrity: sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      path-key: 4.0.0
+    dev: true
+
+  /nullthrows@1.1.1:
+    resolution: {integrity: sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw==}
+    dev: true
+
+  /object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /object-inspect@1.12.3:
+    resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
+    dev: true
+
+  /object-keys@1.1.1:
+    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /object.assign@4.1.4:
+    resolution: {integrity: sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.2.0
+      has-symbols: 1.0.3
+      object-keys: 1.1.1
+    dev: true
+
+  /object.fromentries@2.0.6:
+    resolution: {integrity: sha512-VciD13dswC4j1Xt5394WR4MzmAQmlgN72phd/riNp9vtD7tp4QQWJ0R4wvclXcafgcYK8veHRed2W6XeGBvcfg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.2.0
+      es-abstract: 1.22.1
+    dev: true
+
+  /object.groupby@1.0.0:
+    resolution: {integrity: sha512-70MWG6NfRH9GnbZOikuhPPYzpUpof9iW2J9E4dW7FXTqPNb6rllE6u39SKwwiNh8lCwX3DDb5OgcKGiEBrTTyw==}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.2.0
+      es-abstract: 1.22.1
+      get-intrinsic: 1.2.1
+    dev: true
+
+  /object.values@1.1.6:
+    resolution: {integrity: sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.2.0
+      es-abstract: 1.22.1
+    dev: true
+
+  /once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+    dependencies:
+      wrappy: 1.0.2
+    dev: true
+
+  /onetime@5.1.2:
+    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
+    engines: {node: '>=6'}
+    dependencies:
+      mimic-fn: 2.1.0
+    dev: true
+
+  /onetime@6.0.0:
+    resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      mimic-fn: 4.0.0
+    dev: true
+
+  /open@7.4.2:
+    resolution: {integrity: sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==}
+    engines: {node: '>=8'}
+    dependencies:
+      is-docker: 2.2.1
+      is-wsl: 2.2.0
+    dev: true
+
+  /open@9.1.0:
+    resolution: {integrity: sha512-OS+QTnw1/4vrf+9hh1jc1jnYjzSG4ttTBB8UxOwAnInG3Uo4ssetzC1ihqaIHjLJnA5GGlRl6QlZXOTQhRBUvg==}
+    engines: {node: '>=14.16'}
+    dependencies:
+      default-browser: 4.0.0
+      define-lazy-prop: 3.0.0
+      is-inside-container: 1.0.0
+      is-wsl: 2.2.0
+    dev: true
+
+  /optimism@0.16.2:
+    resolution: {integrity: sha512-zWNbgWj+3vLEjZNIh/okkY2EUfX+vB9TJopzIZwT1xxaMqC5hRLLraePod4c5n4He08xuXNH+zhKFFCu390wiQ==}
+    dependencies:
+      '@wry/context': 0.7.3
+      '@wry/trie': 0.3.2
+    dev: true
+
+  /optionator@0.9.3:
+    resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      '@aashutoshrathi/word-wrap': 1.2.6
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+    dev: true
+
+  /p-filter@2.1.0:
+    resolution: {integrity: sha512-ZBxxZ5sL2HghephhpGAQdoskxplTwr7ICaehZwLIlfL6acuVgZPm8yBNuRAFBGEqtD/hmUeq9eqLg2ys9Xr/yw==}
+    engines: {node: '>=8'}
+    dependencies:
+      p-map: 2.1.0
+    dev: true
+
+  /p-limit@2.3.0:
+    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
+    engines: {node: '>=6'}
+    dependencies:
+      p-try: 2.2.0
+    dev: true
+
+  /p-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      yocto-queue: 0.1.0
+    dev: true
+
+  /p-locate@4.1.0:
+    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
+    engines: {node: '>=8'}
+    dependencies:
+      p-limit: 2.3.0
+    dev: true
+
+  /p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+    dependencies:
+      p-limit: 3.1.0
+    dev: true
+
+  /p-map@2.1.0:
+    resolution: {integrity: sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /p-map@4.0.0:
+    resolution: {integrity: sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      aggregate-error: 3.1.0
+    dev: true
+
+  /p-retry@4.6.2:
+    resolution: {integrity: sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@types/retry': 0.12.0
+      retry: 0.13.1
+    dev: true
+
+  /p-try@2.2.0:
+    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /param-case@3.0.4:
+    resolution: {integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==}
+    dependencies:
+      dot-case: 3.0.4
+      tslib: 2.6.1
+    dev: true
+
+  /parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+    dependencies:
+      callsites: 3.1.0
+    dev: true
+
+  /parse-filepath@1.0.2:
+    resolution: {integrity: sha512-FwdRXKCohSVeXqwtYonZTXtbGJKrn+HNyWDYVcp5yuJlesTwNH4rsmRZ+GrKAPJ5bLpRxESMeS+Rl0VCHRvB2Q==}
+    engines: {node: '>=0.8'}
+    dependencies:
+      is-absolute: 1.0.0
+      map-cache: 0.2.2
+      path-root: 0.1.1
+    dev: true
+
+  /parse-json@5.2.0:
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@babel/code-frame': 7.22.5
+      error-ex: 1.3.2
+      json-parse-even-better-errors: 2.3.1
+      lines-and-columns: 1.2.4
+    dev: true
+
+  /parse-node-version@1.0.1:
+    resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
+    engines: {node: '>= 0.10'}
+    dev: true
+
+  /pascal-case@3.1.2:
+    resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==}
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.6.1
+    dev: true
+
+  /path-case@3.0.4:
+    resolution: {integrity: sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==}
+    dependencies:
+      dot-case: 3.0.4
+      tslib: 2.6.1
+    dev: true
+
+  /path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /path-is-absolute@1.0.1:
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /path-key@4.0.0:
+    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+    dev: true
+
+  /path-root-regex@0.1.2:
+    resolution: {integrity: sha512-4GlJ6rZDhQZFE0DPVKh0e9jmZ5egZfxTkp7bcRDuPlJXbAwhxcl2dINPUAsjLdejqaLsCeg8axcLjIbvBjN4pQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /path-root@0.1.1:
+    resolution: {integrity: sha512-QLcPegTHF11axjfojBIoDygmS2E3Lf+8+jI6wOVmNVenrKSo3mFdSGiIgdSHenczw3wPtlVMQaFVwGmM7BJdtg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      path-root-regex: 0.1.2
+    dev: true
+
+  /path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /picocolors@1.0.0:
+    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
+    dev: true
+
+  /picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+    dev: true
+
+  /pify@4.0.1:
+    resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
+    engines: {node: '>=6'}
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /pirates@4.0.6:
+    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
+    engines: {node: '>= 6'}
+    dev: true
+
+  /pkg-dir@4.2.0:
+    resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      find-up: 4.1.0
+    dev: true
+
+  /pluralize@8.0.0:
+    resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /popmotion@11.0.3:
+    resolution: {integrity: sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==}
+    dependencies:
+      framesync: 6.0.1
+      hey-listen: 1.0.8
+      style-value-types: 5.0.0
+      tslib: 2.6.1
+    dev: true
+
+  /postcss-load-config@3.1.4(postcss@8.4.27)(ts-node@10.9.1):
+    resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
+    engines: {node: '>= 10'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+    dependencies:
+      lilconfig: 2.1.0
+      postcss: 8.4.27
+      ts-node: 10.9.1(@types/node@20.4.5)(typescript@5.2.0-beta)
+      yaml: 1.10.2
+    dev: true
+
+  /postcss-modules-extract-imports@3.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      postcss: 8.4.27
+    dev: true
+
+  /postcss-modules-local-by-default@4.0.3(postcss@8.4.27):
+    resolution: {integrity: sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      icss-utils: 5.1.0(postcss@8.4.27)
+      postcss: 8.4.27
+      postcss-selector-parser: 6.0.13
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-modules-scope@3.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      postcss: 8.4.27
+      postcss-selector-parser: 6.0.13
+    dev: true
+
+  /postcss-modules-values@4.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      icss-utils: 5.1.0(postcss@8.4.27)
+      postcss: 8.4.27
+    dev: true
+
+  /postcss-modules@6.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-7DGfnlyi/ju82BRzTIjWS5C4Tafmzl3R79YP/PASiocj+aa6yYphHhhKUOEoXQToId5rgyFgJ88+ccOUydjBXQ==}
+    peerDependencies:
+      postcss: ^8.0.0
+    dependencies:
+      generic-names: 4.0.0
+      icss-utils: 5.1.0(postcss@8.4.27)
+      lodash.camelcase: 4.3.0
+      postcss: 8.4.27
+      postcss-modules-extract-imports: 3.0.0(postcss@8.4.27)
+      postcss-modules-local-by-default: 4.0.3(postcss@8.4.27)
+      postcss-modules-scope: 3.0.0(postcss@8.4.27)
+      postcss-modules-values: 4.0.0(postcss@8.4.27)
+      string-hash: 1.1.3
+    dev: true
+
+  /postcss-selector-parser@6.0.13:
+    resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
+    engines: {node: '>=4'}
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+    dev: true
+
+  /postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+    dev: true
+
+  /postcss@8.4.27:
+    resolution: {integrity: sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.6
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+    dev: true
+
+  /pouchdb-browser@8.0.1:
+    resolution: {integrity: sha512-wXObS1Layd/gBRKwa6EBS99tFY9G3VPaMRu8ffWCohkpi9PZCm3z1xeB4P4S9Qecf0u5so+rxvbVVyTtgdhvaQ==}
+    dependencies:
+      immediate: 3.3.0
+      spark-md5: 3.0.2
+      uuid: 8.3.2
+      vuvuzela: 1.0.3
+    dev: true
+
+  /prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+    dev: true
+
+  /prettier@3.0.0:
+    resolution: {integrity: sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dev: true
+
+  /process-nextick-args@2.0.1:
+    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
+    dev: true
+
+  /progress@2.0.3:
+    resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
+    engines: {node: '>=0.4.0'}
+    dev: true
+
+  /prompts@2.4.2:
+    resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
+    engines: {node: '>= 6'}
+    dependencies:
+      kleur: 3.0.3
+      sisteransi: 1.0.5
+    dev: true
+
+  /prop-types@15.8.1:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.1
+    dev: true
+
+  /prr@1.0.1:
+    resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /punycode@2.3.0:
+    resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+    dev: true
+
+  /react-dom@18.2.0(react@18.2.0):
+    resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
+    peerDependencies:
+      react: ^18.2.0
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.2.0
+      scheduler: 0.23.0
+    dev: true
+
+  /react-fast-compare@3.2.2:
+    resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
+    dev: true
+
+  /react-helmet@6.1.0(react@18.2.0):
+    resolution: {integrity: sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==}
+    peerDependencies:
+      react: '>=16.3.0'
+    dependencies:
+      object-assign: 4.1.1
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-fast-compare: 3.2.2
+      react-side-effect: 2.1.2(react@18.2.0)
+    dev: true
+
+  /react-hot-toast@2.4.1(csstype@3.1.2)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: '>=16'
+      react-dom: '>=16'
+    dependencies:
+      goober: 2.1.13(csstype@3.1.2)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    transitivePeerDependencies:
+      - csstype
+    dev: true
+
+  /react-i18next@13.0.3(i18next@23.4.1)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-/t4kt4Y2o+21hbvx+o9zpVnmoiud7KLDncyZFGN0U6TGAWYaXdTsp/ytAHFcKKSAODg4noIMaOO3X7bMgCqLHw==}
+    peerDependencies:
+      i18next: '>= 23.2.3'
+      react: '>= 16.8.0'
+      react-dom: '*'
+      react-native: '*'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+      react-native:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      html-parse-stringify: 3.0.1
+      i18next: 23.4.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /react-is@16.13.1:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+    dev: true
+
+  /react-remove-scroll-bar@2.3.4(@types/react@18.2.18)(react@18.2.0):
+    resolution: {integrity: sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.18
+      react: 18.2.0
+      react-style-singleton: 2.2.1(@types/react@18.2.18)(react@18.2.0)
+      tslib: 2.6.1
+    dev: true
+
+  /react-remove-scroll@2.5.5(@types/react@18.2.18)(react@18.2.0):
+    resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.18
+      react: 18.2.0
+      react-remove-scroll-bar: 2.3.4(@types/react@18.2.18)(react@18.2.0)
+      react-style-singleton: 2.2.1(@types/react@18.2.18)(react@18.2.0)
+      tslib: 2.6.1
+      use-callback-ref: 1.3.0(@types/react@18.2.18)(react@18.2.0)
+      use-sidecar: 1.1.2(@types/react@18.2.18)(react@18.2.0)
+    dev: true
+
+  /react-side-effect@2.1.2(react@18.2.0):
+    resolution: {integrity: sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==}
+    peerDependencies:
+      react: ^16.3.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.2.0
+    dev: true
+
+  /react-style-singleton@2.2.1(@types/react@18.2.18)(react@18.2.0):
+    resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.18
+      get-nonce: 1.0.1
+      invariant: 2.2.4
+      react: 18.2.0
+      tslib: 2.6.1
+    dev: true
+
+  /react-transition-state@2.1.1(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-kQx5g1FVu9knoz1T1WkapjUgFz08qQ/g1OmuWGi3/AoEFfS0kStxrPlZx81urjCXdz2d+1DqLpU6TyLW/Ro04Q==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /react-window@1.8.9(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-+Eqx/fj1Aa5WnhRfj9dJg4VYATGwIUP2ItwItiJ6zboKWA6EX3lYDAXfGF2hyNqplEprhbtjbipiADEcwQ823Q==}
+    engines: {node: '>8.0.0'}
+    peerDependencies:
+      react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@babel/runtime': 7.22.6
+      memoize-one: 5.2.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
+  /react@18.2.0:
+    resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: true
+
+  /read-pkg-up@7.0.1:
+    resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
+    engines: {node: '>=8'}
+    dependencies:
+      find-up: 4.1.0
+      read-pkg: 5.2.0
+      type-fest: 0.8.1
+    dev: true
+
+  /read-pkg@5.2.0:
+    resolution: {integrity: sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@types/normalize-package-data': 2.4.1
+      normalize-package-data: 2.5.0
+      parse-json: 5.2.0
+      type-fest: 0.6.0
+    dev: true
+
+  /readable-stream@2.3.8:
+    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 1.0.0
+      process-nextick-args: 2.0.1
+      safe-buffer: 5.1.2
+      string_decoder: 1.1.1
+      util-deprecate: 1.0.2
+    dev: true
+
+  /readable-stream@3.6.2:
+    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
+    engines: {node: '>= 6'}
+    dependencies:
+      inherits: 2.0.4
+      string_decoder: 1.3.0
+      util-deprecate: 1.0.2
+    dev: true
+
+  /readdir-glob@1.1.3:
+    resolution: {integrity: sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA==}
+    dependencies:
+      minimatch: 5.1.6
+    dev: true
+
+  /readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+    dependencies:
+      picomatch: 2.3.1
+    dev: true
+
+  /reflect-metadata@0.1.13:
+    resolution: {integrity: sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==}
+    dev: true
+
+  /regenerator-runtime@0.13.11:
+    resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
+    dev: true
+
+  /regexp-tree@0.1.27:
+    resolution: {integrity: sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==}
+    hasBin: true
+    dev: true
+
+  /regexp.prototype.flags@1.5.0:
+    resolution: {integrity: sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.2.0
+      functions-have-names: 1.2.3
+    dev: true
+
+  /regjsparser@0.10.0:
+    resolution: {integrity: sha512-qx+xQGZVsy55CH0a1hiVwHmqjLryfh7wQyF5HO07XJ9f7dQMY/gPQHhlyDkIzJKC+x2fUCpCcUODUUUFrm7SHA==}
+    hasBin: true
+    dependencies:
+      jsesc: 0.5.0
+    dev: true
+
+  /remove-trailing-separator@1.1.0:
+    resolution: {integrity: sha512-/hS+Y0u3aOfIETiaiirUFwDBDzmXPvO+jAfKTitUngIPzdKc6Z0LoFjM/CK5PL4C+eKwHohlHAb6H0VFfmmUsw==}
+    dev: true
+
+  /replace-string@3.1.0:
+    resolution: {integrity: sha512-yPpxc4ZR2makceA9hy/jHNqc7QVkd4Je/N0WRHm6bs3PtivPuPynxE5ejU/mp5EhnCv8+uZL7vhz8rkluSlx+Q==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /reserved-words@0.1.2:
+    resolution: {integrity: sha512-0S5SrIUJ9LfpbVl4Yzij6VipUdafHrOTzvmfazSw/jeZrZtQK303OPZW+obtkaw7jQlTQppy0UvZWm9872PbRw==}
+    dev: true
+
+  /resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /resolve-from@5.0.0:
+    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+    dev: true
+
+  /resolve@1.22.2:
+    resolution: {integrity: sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==}
+    hasBin: true
+    dependencies:
+      is-core-module: 2.12.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+    dev: true
+
+  /resolve@1.22.3:
+    resolution: {integrity: sha512-P8ur/gp/AmbEzjr729bZnLjXK5Z+4P0zhIJgBgzqRih7hL7BOukHGtSTA3ACMY467GRFz3duQsi0bDZdR7DKdw==}
+    hasBin: true
+    dependencies:
+      is-core-module: 2.12.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+    dev: true
+
+  /resolve@2.0.0-next.4:
+    resolution: {integrity: sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==}
+    hasBin: true
+    dependencies:
+      is-core-module: 2.12.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+    dev: true
+
+  /response-iterator@0.2.6:
+    resolution: {integrity: sha512-pVzEEzrsg23Sh053rmDUvLSkGXluZio0qu8VT6ukrYuvtjVfCbDZH9d6PGXb8HZfzdNZt8feXv/jvUzlhRgLnw==}
+    engines: {node: '>=0.8'}
+    dev: true
+
+  /retry@0.13.1:
+    resolution: {integrity: sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==}
+    engines: {node: '>= 4'}
+    dev: true
+
+  /reusify@1.0.4:
+    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+    dev: true
+
+  /rimraf@3.0.2:
+    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    hasBin: true
+    dependencies:
+      glob: 7.2.3
+    dev: true
+
+  /run-applescript@5.0.0:
+    resolution: {integrity: sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==}
+    engines: {node: '>=12'}
+    dependencies:
+      execa: 5.1.1
+    dev: true
+
+  /run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+    dependencies:
+      queue-microtask: 1.2.3
+    dev: true
+
+  /rxjs@7.8.1:
+    resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==}
+    requiresBuild: true
+    dependencies:
+      tslib: 2.6.1
+    dev: true
+    optional: true
+
+  /safe-array-concat@1.0.0:
+    resolution: {integrity: sha512-9dVEFruWIsnie89yym+xWTAYASdpw3CJV7Li/6zBewGf9z2i1j31rP6jnY0pHEO4QZh6N0K11bFjWmdR8UGdPQ==}
+    engines: {node: '>=0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      get-intrinsic: 1.2.1
+      has-symbols: 1.0.3
+      isarray: 2.0.5
+    dev: true
+
+  /safe-buffer@5.1.2:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+    dev: true
+
+  /safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+    dev: true
+
+  /safe-regex-test@1.0.0:
+    resolution: {integrity: sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==}
+    dependencies:
+      call-bind: 1.0.2
+      get-intrinsic: 1.2.1
+      is-regex: 1.1.4
+    dev: true
+
+  /safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass@1.47.0:
+    resolution: {integrity: sha512-GtXwvwgD7/6MLUZPnlA5/8cdRgC9SzT5kAnnJMRmEZQFRE3J56Foswig4NyyyQGsnmNvg6EUM/FP0Pe9Y2zywQ==}
+    engines: {node: '>=8.9.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 3.5.3
+      immutable: 4.3.1
+      source-map-js: 1.0.2
+    dev: true
+
+  /sass@1.64.2:
+    resolution: {integrity: sha512-TnDlfc+CRnUAgLO9D8cQLFu/GIjJIzJCGkE7o4ekIGQOH7T3GetiRR/PsTWJUHhkzcSPrARkPI+gNWn5alCzDg==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 3.5.3
+      immutable: 4.3.1
+      source-map-js: 1.0.2
+    dev: true
+
+  /sax@1.2.4:
+    resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
+    dev: true
+
+  /scheduler@0.23.0:
+    resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: true
+
+  /semver@5.7.2:
+    resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
+    hasBin: true
+    dev: true
+
+  /semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+    dev: true
+
+  /semver@7.5.4:
+    resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      lru-cache: 6.0.0
+    dev: true
+
+  /sentence-case@3.0.4:
+    resolution: {integrity: sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==}
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.6.1
+      upper-case-first: 2.0.2
+    dev: true
+
+  /set-value@4.1.0:
+    resolution: {integrity: sha512-zTEg4HL0RwVrqcWs3ztF+x1vkxfm0lP+MQQFPiMJTKVceBwEV0A569Ou8l9IYQG8jOZdMVI1hGsc0tmeD2o/Lw==}
+    engines: {node: '>=11.0'}
+    dependencies:
+      is-plain-object: 2.0.4
+      is-primitive: 3.0.1
+    dev: true
+
+  /shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+    dependencies:
+      shebang-regex: 3.0.0
+    dev: true
+
+  /shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /side-channel@1.0.4:
+    resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
+    dependencies:
+      call-bind: 1.0.2
+      get-intrinsic: 1.2.1
+      object-inspect: 1.12.3
+    dev: true
+
+  /signal-exit@3.0.7:
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+    dev: true
+
+  /sisteransi@1.0.5:
+    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
+    dev: true
+
+  /slash@3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /slash@4.0.0:
+    resolution: {integrity: sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /slice-ansi@3.0.0:
+    resolution: {integrity: sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      ansi-styles: 4.3.0
+      astral-regex: 2.0.0
+      is-fullwidth-code-point: 3.0.0
+    dev: true
+
+  /snake-case@3.0.4:
+    resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==}
+    dependencies:
+      dot-case: 3.0.4
+      tslib: 2.6.1
+    dev: true
+
+  /source-map-js@1.0.2:
+    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /source-map@0.5.7:
+    resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /source-map@0.7.4:
+    resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
+    engines: {node: '>= 8'}
+    dev: true
+
+  /spark-md5@3.0.2:
+    resolution: {integrity: sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw==}
+    dev: true
+
+  /spdx-correct@3.2.0:
+    resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
+    dependencies:
+      spdx-expression-parse: 3.0.1
+      spdx-license-ids: 3.0.13
+    dev: true
+
+  /spdx-exceptions@2.3.0:
+    resolution: {integrity: sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==}
+    dev: true
+
+  /spdx-expression-parse@3.0.1:
+    resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
+    dependencies:
+      spdx-exceptions: 2.3.0
+      spdx-license-ids: 3.0.13
+    dev: true
+
+  /spdx-license-ids@3.0.13:
+    resolution: {integrity: sha512-XkD+zwiqXHikFZm4AX/7JSCXA98U5Db4AFd5XUg/+9UNtnH75+Z9KxtpYiJZx36mUDVOwH83pl7yvCer6ewM3w==}
+    dev: true
+
+  /sponge-case@1.0.1:
+    resolution: {integrity: sha512-dblb9Et4DAtiZ5YSUZHLl4XhH4uK80GhAZrVXdN4O2P4gQ40Wa5UIOPUHlA/nFd2PLblBZWUioLMMAVrgpoYcA==}
+    dependencies:
+      tslib: 2.6.1
+    dev: true
+
+  /state-local@1.0.7:
+    resolution: {integrity: sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==}
+    dev: true
+
+  /string-hash@1.1.3:
+    resolution: {integrity: sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==}
+    dev: true
+
+  /string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+    dev: true
+
+  /string.prototype.trim@1.2.7:
+    resolution: {integrity: sha512-p6TmeT1T3411M8Cgg9wBTMRtY2q9+PNy9EV1i2lIXUN/btt763oIfxwN3RR8VU6wHX8j/1CFy0L+YuThm6bgOg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.2.0
+      es-abstract: 1.22.1
+    dev: true
+
+  /string.prototype.trimend@1.0.6:
+    resolution: {integrity: sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.2.0
+      es-abstract: 1.22.1
+    dev: true
+
+  /string.prototype.trimstart@1.0.6:
+    resolution: {integrity: sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.2.0
+      es-abstract: 1.22.1
+    dev: true
+
+  /string_decoder@1.1.1:
+    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
+    dependencies:
+      safe-buffer: 5.1.2
+    dev: true
+
+  /string_decoder@1.3.0:
+    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
+    dependencies:
+      safe-buffer: 5.2.1
+    dev: true
+
+  /strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+    dependencies:
+      ansi-regex: 5.0.1
+    dev: true
+
+  /strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /strip-final-newline@2.0.0:
+    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /strip-final-newline@3.0.0:
+    resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /strip-indent@3.0.0:
+    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      min-indent: 1.0.1
+    dev: true
+
+  /strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /style-mod@4.0.3:
+    resolution: {integrity: sha512-78Jv8kYJdjbvRwwijtCevYADfsI0lGzYJe4mMFdceO8l75DFFDoqBhR1jVDicDRRaX4//g1u9wKeo+ztc2h1Rw==}
+    dev: true
+
+  /style-value-types@5.0.0:
+    resolution: {integrity: sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==}
+    dependencies:
+      hey-listen: 1.0.8
+      tslib: 2.6.1
+    dev: true
+
+  /stylis@4.2.0:
+    resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
+    dev: true
+
+  /stylus@0.59.0:
+    resolution: {integrity: sha512-lQ9w/XIOH5ZHVNuNbWW8D822r+/wBSO/d6XvtyHLF7LW4KaCIDeVbvn5DF8fGCJAUCwVhVi/h6J0NUcnylUEjg==}
+    hasBin: true
+    dependencies:
+      '@adobe/css-tools': 4.2.0
+      debug: 4.3.4
+      glob: 7.2.3
+      sax: 1.2.4
+      source-map: 0.7.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /superjson@1.13.1:
+    resolution: {integrity: sha512-AVH2eknm9DEd3qvxM4Sq+LTCkSXE2ssfh1t11MHMXyYXFQyQ1HLgVvV+guLTsaQnJU3gnaVo34TohHPulY/wLg==}
+    engines: {node: '>=10'}
+    dependencies:
+      copy-anything: 3.0.5
+    dev: true
+
+  /supports-color@5.5.0:
+    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
+    engines: {node: '>=4'}
+    dependencies:
+      has-flag: 3.0.0
+    dev: true
+
+  /supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+    dependencies:
+      has-flag: 4.0.0
+    dev: true
+
+  /supports-hyperlinks@2.3.0:
+    resolution: {integrity: sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==}
+    engines: {node: '>=8'}
+    dependencies:
+      has-flag: 4.0.0
+      supports-color: 7.2.0
+    dev: true
+
+  /supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /swap-case@2.0.2:
+    resolution: {integrity: sha512-kc6S2YS/2yXbtkSMunBtKdah4VFETZ8Oh6ONSmSd9bRxhqTrtARUCBUiWXH3xVPpvR7tz2CSnkuXVE42EcGnMw==}
+    dependencies:
+      tslib: 2.6.1
+    dev: true
+
+  /symbol-observable@4.0.0:
+    resolution: {integrity: sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==}
+    engines: {node: '>=0.10'}
+    dev: true
+
+  /synckit@0.8.5:
+    resolution: {integrity: sha512-L1dapNV6vu2s/4Sputv8xGsCdAVlb5nRDMFU/E27D44l5U6cw1g0dGd45uLc+OXjNMmF4ntiMdCimzcjFKQI8Q==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    dependencies:
+      '@pkgr/utils': 2.4.2
+      tslib: 2.6.1
+    dev: true
+
+  /tapable@2.2.1:
+    resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /tar-stream@2.2.0:
+    resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
+    engines: {node: '>=6'}
+    dependencies:
+      bl: 4.1.0
+      end-of-stream: 1.4.4
+      fs-constants: 1.0.0
+      inherits: 2.0.4
+      readable-stream: 3.6.2
+    dev: true
+
+  /temp-dir@1.0.0:
+    resolution: {integrity: sha512-xZFXEGbG7SNC3itwBzI3RYjq/cEhBkx2hJuKGIUOcEULmkQExXiHat2z/qkISYsuR+IKumhEfKKbV5qXmhICFQ==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /temp-dir@2.0.0:
+    resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /temp-write@4.0.0:
+    resolution: {integrity: sha512-HIeWmj77uOOHb0QX7siN3OtwV3CTntquin6TNVg6SHOqCP3hYKmox90eeFOGaY1MqJ9WYDDjkyZrW6qS5AWpbw==}
+    engines: {node: '>=8'}
+    dependencies:
+      graceful-fs: 4.2.11
+      is-stream: 2.0.1
+      make-dir: 3.1.0
+      temp-dir: 1.0.0
+      uuid: 3.4.0
+    dev: true
+
+  /tempy@1.0.1:
+    resolution: {integrity: sha512-biM9brNqxSc04Ee71hzFbryD11nX7VPhQQY32AdDmjFvodsRFz/3ufeoTZ6uYkRFfGo188tENcASNs3vTdsM0w==}
+    engines: {node: '>=10'}
+    dependencies:
+      del: 6.1.1
+      is-stream: 2.0.1
+      temp-dir: 2.0.0
+      type-fest: 0.16.0
+      unique-string: 2.0.0
+    dev: true
+
+  /terminal-link@2.1.1:
+    resolution: {integrity: sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      ansi-escapes: 4.3.2
+      supports-hyperlinks: 2.3.0
+    dev: true
+
+  /text-table@0.2.0:
+    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
+    dev: true
+
+  /tiny-invariant@1.3.1:
+    resolution: {integrity: sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==}
+    dev: true
+
+  /title-case@3.0.3:
+    resolution: {integrity: sha512-e1zGYRvbffpcHIrnuqT0Dh+gEJtDaxDSoG4JAIpq4oDFyooziLBIiYQv0GBT4FUAnUop5uZ1hiIAj7oAF6sOCA==}
+    dependencies:
+      tslib: 2.6.1
+    dev: true
+
+  /titleize@3.0.0:
+    resolution: {integrity: sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /tmp@0.2.1:
+    resolution: {integrity: sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==}
+    engines: {node: '>=8.17.0'}
+    dependencies:
+      rimraf: 3.0.2
+    dev: true
+
+  /to-fast-properties@2.0.0:
+    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+    dependencies:
+      is-number: 7.0.0
+    dev: true
+
+  /toggle-selection@1.0.6:
+    resolution: {integrity: sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==}
+    dev: true
+
+  /tr46@0.0.3:
+    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+    dev: true
+
+  /ts-api-utils@1.0.1(typescript@5.2.0-beta):
+    resolution: {integrity: sha512-lC/RGlPmwdrIBFTX59wwNzqh7aR2otPNPR/5brHZm/XKFYKsfqxihXUe9pU3JI+3vGkl+vyCoNNnPhJn3aLK1A==}
+    engines: {node: '>=16.13.0'}
+    peerDependencies:
+      typescript: '>=4.2.0'
+    dependencies:
+      typescript: 5.2.0-beta
+    dev: true
+
+  /ts-invariant@0.10.3:
+    resolution: {integrity: sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      tslib: 2.6.1
+    dev: true
+
+  /ts-node@10.9.1(@types/node@20.4.5)(typescript@5.2.0-beta):
+    resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
+    hasBin: true
+    peerDependencies:
+      '@swc/core': '>=1.2.50'
+      '@swc/wasm': '>=1.2.50'
+      '@types/node': '*'
+      typescript: '>=2.7'
+    peerDependenciesMeta:
+      '@swc/core':
+        optional: true
+      '@swc/wasm':
+        optional: true
+    dependencies:
+      '@cspotcode/source-map-support': 0.8.1
+      '@tsconfig/node10': 1.0.9
+      '@tsconfig/node12': 1.0.11
+      '@tsconfig/node14': 1.0.3
+      '@tsconfig/node16': 1.0.4
+      '@types/node': 20.4.5
+      acorn: 8.10.0
+      acorn-walk: 8.2.0
+      arg: 4.1.3
+      create-require: 1.1.1
+      diff: 4.0.2
+      make-error: 1.3.6
+      typescript: 5.2.0-beta
+      v8-compile-cache-lib: 3.0.1
+      yn: 3.1.1
+    dev: true
+
+  /ts-pattern@4.3.0:
+    resolution: {integrity: sha512-pefrkcd4lmIVR0LA49Imjf9DYLK8vtWhqBPA3Ya1ir8xCW0O2yjL9dsCVvI7pCodLC5q7smNpEtDR2yVulQxOg==}
+    dev: true
+
+  /tsconfig-paths@3.14.2:
+    resolution: {integrity: sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==}
+    dependencies:
+      '@types/json5': 0.0.29
+      json5: 1.0.2
+      minimist: 1.2.8
+      strip-bom: 3.0.0
+    dev: true
+
+  /tsconfig-paths@4.2.0:
+    resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
+    engines: {node: '>=6'}
+    dependencies:
+      json5: 2.2.3
+      minimist: 1.2.8
+      strip-bom: 3.0.0
+    dev: true
+
+  /tslib@2.5.3:
+    resolution: {integrity: sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==}
+    dev: true
+
+  /tslib@2.6.1:
+    resolution: {integrity: sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==}
+    dev: true
+
+  /tua-body-scroll-lock@1.4.0:
+    resolution: {integrity: sha512-pbl411d7RSxjYXt5pB5GdBQ5BraVg1PMvr8BSUXc4buCMeK1OYu7L10PuOU8EhdfWoxGiAfvLrioSQe6Cr9m1g==}
+    dev: true
+
+  /type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      prelude-ls: 1.2.1
+    dev: true
+
+  /type-fest@0.16.0:
+    resolution: {integrity: sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /type-fest@0.20.2:
+    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /type-fest@0.21.3:
+    resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /type-fest@0.6.0:
+    resolution: {integrity: sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /type-fest@0.8.1:
+    resolution: {integrity: sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /typed-array-buffer@1.0.0:
+    resolution: {integrity: sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      get-intrinsic: 1.2.1
+      is-typed-array: 1.1.12
+    dev: true
+
+  /typed-array-byte-length@1.0.0:
+    resolution: {integrity: sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      for-each: 0.3.3
+      has-proto: 1.0.1
+      is-typed-array: 1.1.12
+    dev: true
+
+  /typed-array-byte-offset@1.0.0:
+    resolution: {integrity: sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      available-typed-arrays: 1.0.5
+      call-bind: 1.0.2
+      for-each: 0.3.3
+      has-proto: 1.0.1
+      is-typed-array: 1.1.12
+    dev: true
+
+  /typed-array-length@1.0.4:
+    resolution: {integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==}
+    dependencies:
+      call-bind: 1.0.2
+      for-each: 0.3.3
+      is-typed-array: 1.1.12
+    dev: true
+
+  /typed-emitter@2.1.0:
+    resolution: {integrity: sha512-g/KzbYKbH5C2vPkaXGu8DJlHrGKHLsM25Zg9WuC9pMGfuvT+X25tZQWo5fK1BjBm8+UrVE9LDCvaY0CQk+fXDA==}
+    optionalDependencies:
+      rxjs: 7.8.1
+    dev: true
+
+  /typescript-plugin-css-modules@5.0.1(ts-node@10.9.1)(typescript@5.2.0-beta):
+    resolution: {integrity: sha512-hKXObfwfjx2/myRq4JeQ8D3xIWYTFqusi0hS/Aka7RFX1xQEoEkdOGDWyXNb8LmObawsUzbI30gQnZvqYXCrkA==}
+    peerDependencies:
+      typescript: '>=4.0.0'
+    dependencies:
+      '@types/postcss-modules-local-by-default': 4.0.0
+      '@types/postcss-modules-scope': 3.0.1
+      dotenv: 16.3.1
+      icss-utils: 5.1.0(postcss@8.4.27)
+      less: 4.1.3
+      lodash.camelcase: 4.3.0
+      postcss: 8.4.27
+      postcss-load-config: 3.1.4(postcss@8.4.27)(ts-node@10.9.1)
+      postcss-modules-extract-imports: 3.0.0(postcss@8.4.27)
+      postcss-modules-local-by-default: 4.0.3(postcss@8.4.27)
+      postcss-modules-scope: 3.0.0(postcss@8.4.27)
+      reserved-words: 0.1.2
+      sass: 1.64.2
+      source-map-js: 1.0.2
+      stylus: 0.59.0
+      tsconfig-paths: 4.2.0
+      typescript: 5.2.0-beta
+    transitivePeerDependencies:
+      - supports-color
+      - ts-node
+    dev: true
+
+  /typescript@5.2.0-beta:
+    resolution: {integrity: sha512-z5cq8BXVwaY8cwltw0BiyHRCVXen3QNgIzIcJV4NiLzaWvavxltzFSXd2csO4HoBjlGnuG+/LLbUZ8is3fD6iA==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+    dev: true
+
+  /ua-parser-js@1.0.35:
+    resolution: {integrity: sha512-fKnGuqmTBnIE+/KXSzCn4db8RTigUzw1AN0DmdU6hJovUTbYJKyqj+8Mt1c4VfRDnOVJnENmfYkIPZ946UrSAA==}
+    dev: true
+
+  /uc.micro@1.0.6:
+    resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==}
+    dev: true
+
+  /unbox-primitive@1.0.2:
+    resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
+    dependencies:
+      call-bind: 1.0.2
+      has-bigints: 1.0.2
+      has-symbols: 1.0.3
+      which-boxed-primitive: 1.0.2
+    dev: true
+
+  /unc-path-regex@0.1.2:
+    resolution: {integrity: sha512-eXL4nmJT7oCpkZsHZUOJo8hcX3GbsiDOa0Qu9F646fi8dT3XuSVopVqAcEiVzSKKH7UoDti23wNX3qGFxcW5Qg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /unique-string@2.0.0:
+    resolution: {integrity: sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==}
+    engines: {node: '>=8'}
+    dependencies:
+      crypto-random-string: 2.0.0
+    dev: true
+
+  /universalify@2.0.0:
+    resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==}
+    engines: {node: '>= 10.0.0'}
+    dev: true
+
+  /unixify@1.0.0:
+    resolution: {integrity: sha512-6bc58dPYhCMHHuwxldQxO3RRNZ4eCogZ/st++0+fcC1nr0jiGUtAdBJ2qzmLQWSxbtz42pWt4QQMiZ9HvZf5cg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      normalize-path: 2.1.1
+    dev: true
+
+  /untildify@4.0.0:
+    resolution: {integrity: sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /update-browserslist-db@1.0.11(browserslist@4.21.10):
+    resolution: {integrity: sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+    dependencies:
+      browserslist: 4.21.10
+      escalade: 3.1.1
+      picocolors: 1.0.0
+    dev: true
+
+  /upper-case-first@2.0.2:
+    resolution: {integrity: sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==}
+    dependencies:
+      tslib: 2.6.1
+    dev: true
+
+  /upper-case@2.0.2:
+    resolution: {integrity: sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==}
+    dependencies:
+      tslib: 2.6.1
+    dev: true
+
+  /uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+    dependencies:
+      punycode: 2.3.0
+    dev: true
+
+  /use-callback-ref@1.3.0(@types/react@18.2.18)(react@18.2.0):
+    resolution: {integrity: sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.18
+      react: 18.2.0
+      tslib: 2.6.1
+    dev: true
+
+  /use-context-selector@1.4.1(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0):
+    resolution: {integrity: sha512-Io2ArvcRO+6MWIhkdfMFt+WKQX+Vb++W8DS2l03z/Vw/rz3BclKpM0ynr4LYGyU85Eke+Yx5oIhTY++QR0ZDoA==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '*'
+      react-native: '*'
+      scheduler: '>=0.19.0'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+      react-native:
+        optional: true
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      scheduler: 0.23.0
+    dev: true
+
+  /use-sidecar@1.1.2(@types/react@18.2.18)(react@18.2.0):
+    resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.9.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.18
+      detect-node-es: 1.1.0
+      react: 18.2.0
+      tslib: 2.6.1
+    dev: true
+
+  /util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+    dev: true
+
+  /uuid@3.4.0:
+    resolution: {integrity: sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==}
+    deprecated: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
+    hasBin: true
+    dev: true
+
+  /uuid@8.3.2:
+    resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
+    hasBin: true
+    dev: true
+
+  /uuid@9.0.0:
+    resolution: {integrity: sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==}
+    hasBin: true
+    dev: true
+
+  /v8-compile-cache-lib@3.0.1:
+    resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
+    dev: true
+
+  /validate-npm-package-license@3.0.4:
+    resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
+    dependencies:
+      spdx-correct: 3.2.0
+      spdx-expression-parse: 3.0.1
+    dev: true
+
+  /validator@13.9.0:
+    resolution: {integrity: sha512-B+dGG8U3fdtM0/aNK4/X8CXq/EcxU2WPrPEkJGslb47qyHsxmbggTWK0yEA4qnYVNF+nxNlN88o14hIcPmSIEA==}
+    engines: {node: '>= 0.10'}
+    dev: true
+
+  /value-or-promise@1.0.12:
+    resolution: {integrity: sha512-Z6Uz+TYwEqE7ZN50gwn+1LCVo9ZVrpxRPOhOLnncYkY1ZzOYtrX8Fwf/rFktZ8R5mJms6EZf5TqNOMeZmnPq9Q==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /void-elements@3.1.0:
+    resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /vscode-languageserver-types@3.17.3:
+    resolution: {integrity: sha512-SYU4z1dL0PyIMd4Vj8YOqFvHu7Hz/enbWtpfnVbJHU4Nd1YNYx8u0ennumc6h48GQNeOLxmwySmnADouT/AuZA==}
+    dev: true
+
+  /vuvuzela@1.0.3:
+    resolution: {integrity: sha512-Tm7jR1xTzBbPW+6y1tknKiEhz04Wf/1iZkcTJjSFcpNko43+dFW6+OOeQe9taJIug3NdfUAjFKgUSyQrIKaDvQ==}
+    dev: true
+
+  /w3c-keyname@2.2.8:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+    dev: true
+
+  /webextension-polyfill@0.10.0:
+    resolution: {integrity: sha512-c5s35LgVa5tFaHhrZDnr3FpQpjj1BB+RXhLTYUxGqBVN460HkbM8TBtEqdXWbpTKfzwCcjAZVF7zXCYSKtcp9g==}
+    dev: true
+
+  /webidl-conversions@3.0.1:
+    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+    dev: true
+
+  /whatwg-url@5.0.0:
+    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+    dependencies:
+      tr46: 0.0.3
+      webidl-conversions: 3.0.1
+    dev: true
+
+  /which-boxed-primitive@1.0.2:
+    resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
+    dependencies:
+      is-bigint: 1.0.4
+      is-boolean-object: 1.1.2
+      is-number-object: 1.0.7
+      is-string: 1.0.7
+      is-symbol: 1.0.4
+    dev: true
+
+  /which-typed-array@1.1.11:
+    resolution: {integrity: sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      available-typed-arrays: 1.0.5
+      call-bind: 1.0.2
+      for-each: 0.3.3
+      gopd: 1.0.1
+      has-tostringtag: 1.0.0
+    dev: true
+
+  /which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+    dependencies:
+      isexe: 2.0.0
+    dev: true
+
+  /wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+    dev: true
+
+  /yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+    dev: true
+
+  /yallist@4.0.0:
+    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
+    dev: true
+
+  /yaml@1.10.2:
+    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
+    engines: {node: '>= 6'}
+    dev: true
+
+  /yn@3.1.1:
+    resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /zen-observable-ts@1.2.5:
+    resolution: {integrity: sha512-QZWQekv6iB72Naeake9hS1KxHlotfRpe+WGNbNx5/ta+R3DNjVO2bswf63gXlWDcs+EMd7XY8HfVQyP1X6T4Zg==}
+    dependencies:
+      zen-observable: 0.8.15
+    dev: true
+
+  /zen-observable@0.8.15:
+    resolution: {integrity: sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==}
+    dev: true
+
+  /zip-stream@4.1.0:
+    resolution: {integrity: sha512-zshzwQW7gG7hjpBlgeQP9RuyPGNxvJdzR8SUM3QhxCnLjWN2E7j3dOvpeDcQoETfHx0urRS7EtmVToql7YpU4A==}
+    engines: {node: '>= 10'}
+    dependencies:
+      archiver-utils: 2.1.0
+      compress-commons: 4.1.1
+      readable-stream: 3.6.2
+    dev: true
+
+  /zod@3.21.4:
+    resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}
+    dev: true
diff --git a/scripts/build-apps.ts b/scripts/build-apps.ts
new file mode 100755
index 0000000..9714ceb
--- /dev/null
+++ b/scripts/build-apps.ts
@@ -0,0 +1,300 @@
+#!/usr/bin/env -S node -r esbin
+import "dotenv/config"
+import { promises as fs } from "fs"
+import { resolve } from "path"
+import glob from "fast-glob"
+import { program } from "commander"
+import sass from "esbuild-plugin-sass"
+import * as esbuild from "esbuild"
+import type { PluginItem } from "@babel/core"
+import { c } from "./utils"
+import { cssModules } from "./plugins/esbuild-css-modules"
+import { babelPlugin as babel } from "./plugins/esbuild-babel"
+import { externalDep } from "./plugins/esbuild-external-dep"
+import { stringImport } from "./plugins/esbuild-string-import"
+import { yamlPlugin as yaml } from "./plugins/esbuild-yaml"
+import { alias } from "./plugins/esbuild-alias"
+import { getDefaultTarget } from "./plugins/esbuild-browserslist"
+
+const dist = "dist"
+const SERVE_PORT = 3114
+
+program
+  .option("-g, --grep <pattern>", "only build packages that match <pattern>")
+  .option("-s, --silent", "hide all output")
+  .option(
+    "-e, --env <env>",
+    "set the NODE_ENV environment variable",
+    process.env.NODE_ENV || "production",
+  )
+  .option("-w, --watch", "watch for changes and rebuild")
+  .parse()
+
+const { grep, silent, env, watch } = program.opts()
+const __PROD__ = env === "production"
+
+const log = silent ? () => {} : console.log
+
+async function main() {
+  const queue = new Queue([
+    new Build("src/options/index.tsx", `${dist}/app/options`, { serve: true }),
+    new Build("src/popup/index.tsx", `${dist}/app/popup`),
+    new Build("src/server/index.ts", `${dist}/app/server`, {
+      platform: "node",
+      format: "cjs",
+      splitting: false,
+      minify: false,
+    }),
+    new Build("src/background/index.ts", `${dist}/app/background`),
+    new Build("src/background/compiler.ts", `${dist}/app/background/compiler`),
+    new Build("src/context/index.ts", `${dist}/app/context`, {
+      format: "iife",
+      splitting: false,
+    }),
+    new Build("src/devtools/index.ts", `${dist}/app/devtools`),
+    new Build("src/install/index.ts", `${dist}/app/install`),
+    new Build("src/graphiql/index.tsx", `${dist}/app/playground`),
+    new Build("src/reference/index.tsx", `${dist}/app/reference`, {
+      format: "iife",
+      splitting: false,
+    }),
+  ]).filter(grep ? task => task.entry.includes(grep) : () => true)
+
+  if (!queue.length) {
+    return
+  }
+
+  await queue.run(task => task.clean())
+
+  log(
+    watch ? "Watching" : "Building",
+    `${c.blue(queue.length)} package(s) in ${c.blue(env)}`,
+  )
+  if (queue.length < 5) {
+    log(queue.tasks.map((t, i) => ` ${i + 1}. ${c.green(t.entry)}`).join("\n"))
+  }
+
+  await queue.build()
+
+  if (__PROD__) {
+    await printBundleSize()
+  }
+}
+
+if (require.main === module) {
+  Promise.resolve()
+    .then(() => main())
+    .catch(e => {
+      console.error(e)
+      process.exit(1)
+    })
+}
+
+type BuildOptions = Pick<
+  esbuild.BuildOptions,
+  "entryPoints" | "outdir" | "format" | "splitting" | "platform" | "minify"
+> & {
+  serve?: boolean
+}
+
+export const getBasicOptions = ({
+  entryPoints,
+  minify = __PROD__,
+  plugins = [],
+  babelPlugins = [],
+}: {
+  entryPoints: [string]
+  minify?: boolean
+  plugins?: esbuild.Plugin[]
+  babelPlugins?: PluginItem[]
+}): Partial<esbuild.BuildOptions> => ({
+  entryPoints,
+  define: {
+    ...Object.entries(process.env).reduce(
+      (acc, [key, value]) =>
+        key.startsWith("NEXT_PUBLIC_")
+          ? { ...acc, [`process.env.${key}`]: JSON.stringify(value) }
+          : acc,
+      {} as Record<string, string>,
+    ),
+    "process.env.NODE_ENV": JSON.stringify(env),
+    "process.env.NODE_DEBUG": "false",
+    "process.env.SERVE_PORT": String(SERVE_PORT),
+    "process.browser": "true",
+    global: "globalThis",
+  },
+  bundle: true,
+  format: "esm",
+  external: ["path", "glob", "fs", "util", "monaco-editor"],
+  plugins: [
+    ...plugins,
+    externalDep(["prettier", "sass"]),
+    babel(babelPlugins),
+    yaml(),
+    stringImport(),
+    alias({
+      lodash: require.resolve("lodash-es"),
+      "webextension-polyfill": require.resolve("../src/vendor/webextension-polyfill"),
+      "monaco-editor": require.resolve("../src/options/monaco.ts"),
+
+      // https://github.com/MichalLytek/type-graphql/issues/366#issuecomment-511075437
+      "libphonenumber-js": require.resolve("lodash.noop"),
+      // we never use graphql-subscriptions
+      "graphql-subscriptions": require.resolve("lodash.noop"),
+
+      // Make esbuild use the module version
+      graphql: require.resolve("graphql/index.mjs"),
+
+      ...(entryPoints[0].includes("graphiql") || __PROD__
+        ? {}
+        : {
+            react: require.resolve("../src/vendor/why-did-you-render/index.js"),
+            "react/jsx-runtime": require.resolve(
+              "../src/vendor/why-did-you-render/jsx-runtime",
+            ),
+          }),
+    }),
+    cssModules({
+      generateScopedName: __PROD__
+        ? "[hash:base64:6]"
+        : "[name]__[local]___[hash:base64:5]",
+      localsConvention: "camelCaseOnly",
+    }),
+    sass(),
+  ].filter(Boolean),
+  target: getDefaultTarget(),
+  banner: {
+    js: "/* eslint-disable */",
+  },
+  legalComments: "none",
+  keepNames: false,
+  tsconfig: "./tsconfig.json",
+  sourcemap: "linked",
+  minify,
+  splitting: true,
+  metafile: true,
+  loader: {
+    ".eot": "file",
+    ".png": "file",
+    ".ttf": "file",
+    ".woff": "file",
+    ".woff2": "file",
+  },
+})
+
+async function printBundleSize() {
+  const root = resolve(dist, "app")
+  const files = await glob(["**/*", "!**/*.map", "!**/meta.json"], {
+    cwd: root,
+    onlyFiles: true,
+  })
+  const sizes = await Promise.all(
+    files.map(async file => {
+      const { size } = await fs.stat(resolve(root, file))
+      return { file, size }
+    }),
+  )
+
+  const list = sizes
+    .filter(a => a.size > 50000)
+    .sort((a, b) => b.size - a.size)
+    .slice(0, 10)
+
+  for (const { file, size } of list) {
+    log(
+      c.blue(`./dist/app/${file.padEnd(38, " ")}`),
+      c.green(`${humanFileSize(size).padStart(9, " ")}`),
+    )
+  }
+}
+
+function humanFileSize(bytes: number, si = false, dp = 1) {
+  const thresh = si ? 1000 : 1024
+
+  if (Math.abs(bytes) < thresh) {
+    return bytes + " B"
+  }
+
+  const units = si
+    ? ["kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]
+    : ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"]
+  let u = -1
+  const r = 10 ** dp
+
+  do {
+    bytes /= thresh
+    ++u
+  } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1)
+
+  return bytes.toFixed(dp) + " " + units[u]
+}
+
+class Build {
+  enabled = true
+
+  constructor(
+    readonly entry: string,
+    readonly outdir: string,
+    readonly options?: BuildOptions,
+  ) {}
+
+  disable() {
+    this.enabled = false
+    return this
+  }
+
+  async clean() {
+    if (!this.enabled) return
+
+    await fs.rm(this.outdir, { recursive: true, force: true })
+  }
+
+  async build() {
+    if (!this.enabled) return
+
+    const { outdir, options: { serve, ...options } = {} } = this
+
+    const ctx = await esbuild.context({
+      ...getBasicOptions({
+        entryPoints: [this.entry],
+      }),
+      ...options,
+      outdir,
+    })
+
+    const { metafile } = await ctx.rebuild()
+
+    if (__PROD__) {
+      await fs.writeFile(resolve(outdir, "meta.json"), JSON.stringify(metafile))
+    }
+
+    if (watch) {
+      await ctx.watch()
+      if (serve) {
+        await ctx.serve({ port: SERVE_PORT })
+      }
+    } else {
+      await ctx.dispose()
+    }
+  }
+}
+
+class Queue {
+  constructor(public tasks: readonly Build[]) {}
+
+  get length() {
+    return this.tasks.length
+  }
+
+  filter(predicate: (task: Build) => boolean) {
+    return new Queue(this.tasks.filter(predicate))
+  }
+
+  run(fn: (task: Build) => Promise<void>) {
+    return Promise.all(this.tasks.map(fn))
+  }
+
+  build() {
+    return this.run(task => task.build())
+  }
+}
diff --git a/scripts/build-css-module-def.ts b/scripts/build-css-module-def.ts
new file mode 100755
index 0000000..8a42f2d
--- /dev/null
+++ b/scripts/build-css-module-def.ts
@@ -0,0 +1,29 @@
+#!/usr/bin/env -S node -r esbin
+import fs from "fs"
+import { uniq } from "lodash"
+import { writeFormatted } from "./utils"
+
+const modules = [
+  "src/vendor/allotment/src/allotment.module.css",
+  "src/vendor/allotment/src/sash.module.css",
+]
+
+for (const module of modules) {
+  const source = fs.readFileSync(module, "utf8")
+  const classNames = uniq(
+    Array.from(source.matchAll(/\.([a-z][a-z0-9_-]+)/gi), m => m[1]),
+  )
+
+  writeFormatted(
+    module + ".d.ts",
+    [
+      "// This file is generated by scripts/build-css-module-def.ts",
+      "",
+      "declare const classNames: {", //
+      ...classNames.map(c => `  "${c}": string;`),
+      "}",
+      "",
+      "export default classNames;",
+    ].join("\n"),
+  )
+}
diff --git a/scripts/build-gql.ts b/scripts/build-gql.ts
new file mode 100755
index 0000000..77c2dbf
--- /dev/null
+++ b/scripts/build-gql.ts
@@ -0,0 +1,91 @@
+#!/usr/bin/env -S node -r esbin
+import { promises as fs } from "node:fs"
+import { format } from "prettier"
+import { CodeFileLoader } from "@graphql-tools/code-file-loader"
+import { GraphQLFileLoader } from "@graphql-tools/graphql-file-loader"
+import * as typescript from "@graphql-codegen/typescript"
+import * as typescriptOperations from "@graphql-codegen/typescript-operations"
+import * as add from "@graphql-codegen/add"
+import { plugin as _, codegen, typedDocumentNodePlugin } from "@aet/gql-tools/codegen"
+import { buildSchema } from "./build-schema-file"
+
+async function main() {
+  await buildSchema()
+
+  const scalars: Record<string, string> = {
+    DateTime: "Date",
+  }
+
+  const context = await codegen({
+    schema: {
+      source: "./src/generated/schema.gql",
+      loaders: [new GraphQLFileLoader()],
+    },
+    documents: {
+      source: ["./src/**/*.{ts,tsx}", "!/src/generated/**/*.{ts,tsx}"],
+      loaders: [new CodeFileLoader({ pluckConfig: { skipIndent: true } })],
+    },
+  })
+
+  const content = await context.generate({
+    plugins: [
+      _(typescript, {
+        immutableTypes: true,
+        useTypeImports: true,
+        declarationKind: "interface",
+        allowEnumStringTypes: true,
+        enumsAsTypes: true,
+        scalars,
+      }),
+      _(typescriptOperations, {
+        declarationKind: "interface",
+        allowEnumStringTypes: true,
+        scalars,
+      }),
+      _(add, {
+        content: /* js */ `
+          /* eslint-disable */
+          import { gql as _gql } from "@apollo/client";
+          import type { DocumentNode } from "graphql";
+          export { ApolloClient, useQuery, useApolloClient, useLazyQuery, useMutation } from "@apollo/client";
+
+          export const gql = _gql as unknown as {
+            <K extends keyof DocumentMap>(
+              literals: string | readonly string[],
+              ...args: any[]
+            ): DocumentMap[K];
+            (
+              literals: string | readonly string[],
+              ...args: any[]
+            ): DocumentNode;
+          }
+        `,
+      }),
+      _(typedDocumentNodePlugin, {
+        createDocumentMap: true,
+        exportDocumentNodes: true,
+      }),
+    ],
+    pipeline: [
+      source =>
+        source
+          .replace(/Scalars\['String']\['(in|out)put']/g, "string")
+          .replace(/Scalars\['ID']\['(in|out)put']/g, "string")
+          .replace(/Scalars\['Boolean']\['(in|out)put']/g, "boolean")
+          .replace(/Scalars\['Int']\['(in|out)put']/g, "number")
+          .replace(/Scalars\['Float']\['(in|out)put']/g, "number")
+          .replaceAll("Scalars['DateTime']['input']", "Date")
+          .replaceAll("Scalars['JSON']['input']", "any")
+          .replace(/(\w+) \| `\$\{\1}`/g, " $1")
+          .replace(/: (Input)?Maybe<([['\]\w<> ]+)>/g, ": $2 | null")
+          .replace(/: Array<([\w<> ]+)>/g, ": $1[]")
+          .replace(/export type (\w+) = {/g, "export interface $1 {")
+          .replace(/export type (Make|Maybe|InputMaybe|Exact|Incremental)/g, "type $1"),
+      code => format(code, { parser: "typescript" }),
+    ],
+  })
+
+  await fs.writeFile("./src/generated/graphql.ts", content)
+}
+
+void main()
diff --git a/scripts/build-htmls.tsx b/scripts/build-htmls.tsx
new file mode 100755
index 0000000..4d4ef92
--- /dev/null
+++ b/scripts/build-htmls.tsx
@@ -0,0 +1,91 @@
+#!/usr/bin/env -S node -r esbin
+import fs from "fs"
+import React from "react"
+import { renderToStaticMarkup } from "react-dom/server"
+
+const __DEV__ = process.env.NODE_ENV !== "production"
+
+const Head: FC<{
+  children: React.ReactNode
+}> = ({ children }) => (
+  <head>
+    <meta charSet="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    {children}
+  </head>
+)
+
+const files: {
+  [path: string]: React.ReactElement
+} = {
+  "./dist/background.html": (
+    <html>
+      <Head>
+        <script type="module" src="app/background/index.js" />
+      </Head>
+    </html>
+  ),
+  "./dist/devtools.html": (
+    <html>
+      <Head>
+        <script type="module" src="app/devtools/index.js" />
+      </Head>
+    </html>
+  ),
+  "./dist/options.html": (
+    <html data-theme="github-dark">
+      <Head>
+        <link rel="stylesheet" href="app/options/index.css" />
+        <link rel="stylesheet" href="/vendor/primer/github-dark.css" />
+      </Head>
+      <body>
+        {__DEV__ && (
+          // React DevTools
+          // curl -s http://localhost:8097 | openssl dgst -sha384 -binary | openssl base64 -A
+          <script src="http://localhost:8097" crossOrigin="anonymous" />
+        )}
+        <div id="not-loaded" />
+        <div id="root" />
+        <script type="module" src="app/options/index.js" />
+      </body>
+    </html>
+  ),
+  "./dist/playground.html": (
+    <html>
+      <Head>
+        <link rel="stylesheet" href="app/playground/index.css" />
+      </Head>
+      <body>
+        <div id="root" />
+        <script type="module" src="app/playground/index.js" />
+      </body>
+    </html>
+  ),
+  "./dist/popup.html": (
+    <html>
+      <Head>
+        <link rel="stylesheet" href="app/popup/index.css" />
+      </Head>
+      <body>
+        <div id="root" />
+        <script type="module" src="app/popup/index.js" />
+      </body>
+    </html>
+  ),
+  "./dist/reference.html": (
+    <html>
+      <Head>
+        <link rel="stylesheet" href="app/reference/index.css" />
+      </Head>
+      <body>
+        <div id="root" />
+        <script src="app/reference/index.js" />
+      </body>
+    </html>
+  ),
+}
+
+for (const [path, content] of Object.entries(files)) {
+  const html = "<!DOCTYPE html>" + renderToStaticMarkup(content)
+  fs.writeFileSync(path, html)
+}
diff --git a/scripts/build-license.ts b/scripts/build-license.ts
new file mode 100755
index 0000000..f00865e
--- /dev/null
+++ b/scripts/build-license.ts
@@ -0,0 +1,145 @@
+#!/usr/bin/env -S node -r esbin
+import fs from "node:fs"
+import { resolve } from "node:path"
+import { load } from "js-yaml"
+
+process.chdir(resolve(__dirname, ".."))
+
+const candidates = [
+  "master/LICENSE",
+  "master/LICENCE",
+  "master/LICENSE.md",
+  "master/license.md",
+  "main/LICENSE.txt",
+]
+
+async function getLicense(repo: string) {
+  for (const candidate of candidates) {
+    const path = `https://raw.githubusercontent.com/${repo}/${candidate}`
+    const res = await fetch(path)
+    if (!res.ok) continue
+    const text = await res.text()
+    return text
+  }
+  throw new Error(`Could not find license for ${repo}`)
+}
+
+async function getSDPXLicense(license: string) {
+  const path = `https://raw.githubusercontent.com/spdx/license-list-data/main/text/${license}.txt`
+  const res = await fetch(path)
+  if (!res.ok) throw new Error(`Could not find license ${license}`)
+  const text = await res.text()
+  return text
+}
+
+function getVendorLicenses() {
+  return fs
+    .readdirSync("src/vendor")
+    .map(name => ({ name, path: `src/vendor/${name}/LICENSE` }))
+    .filter(({ path }) => fs.existsSync(path))
+    .map(({ name, path }) => [name, fs.readFileSync(path, "utf8")])
+}
+
+async function getPackageLicense(pkg: string) {
+  const files = ["LICENSE", "LICENCE", "license.md"]
+  for (const file of files) {
+    const path = `node_modules/${pkg}/${file}`
+    if (fs.existsSync(path)) {
+      return fs.readFileSync(path, "utf8")
+    }
+  }
+
+  const pkgJson = JSON.parse(fs.readFileSync(`node_modules/${pkg}/package.json`, "utf8"))
+  const licenseName = pkgJson.license as string
+  if (!licenseName) throw new Error(`Could not find license for ${pkg}`)
+
+  return getSDPXLicense(licenseName)
+}
+
+function getPackageLicenses() {
+  const {
+    dependencies = {},
+    devDependencies = {},
+    peerDependencies = {},
+  } = JSON.parse(fs.readFileSync("package.json", "utf8"))
+  const packages = Object.keys({
+    ...dependencies,
+    ...devDependencies,
+    ...peerDependencies,
+  })
+  return Promise.all(packages.map(async pkg => [pkg, await getPackageLicense(pkg)]))
+}
+
+class Licenses {
+  libs = new Set<string>()
+
+  constructor(readonly json: Record<string, string>) {}
+
+  set(name: string, license: string) {
+    this.libs.add(name)
+    this.json[name] = license
+  }
+
+  async setIfAbsent(name: string, license: () => Promise<string>) {
+    if (!this.json[name]) {
+      const text = await license()
+      this.set(name, text)
+    }
+  }
+
+  assign(others: Record<string, string>) {
+    for (const [name, license] of Object.entries(others)) {
+      this.set(name, license)
+    }
+  }
+
+  purge() {
+    for (const name of Object.keys(this.json)) {
+      if (!this.libs.has(name)) {
+        delete this.json[name]
+      }
+    }
+  }
+
+  toJSON() {
+    return this.json
+  }
+}
+
+async function main() {
+  const outPath = "src/generated/licenses.json"
+  if (!fs.existsSync(outPath)) {
+    fs.writeFileSync(outPath, "{}")
+  }
+  const res = new Licenses(
+    JSON.parse(fs.readFileSync(outPath, "utf8")) as Record<string, string>,
+  )
+  const config = load(fs.readFileSync("src/licenses.yml", "utf8")) as {
+    github: string[]
+    licenses: { [name: string]: string }
+  }
+
+  // res.set("archive", await getSPLicense("AGPL-3.0-or-later"));
+  for (const repo of config.github) {
+    await res.setIfAbsent(repo, () => getLicense(repo))
+  }
+  for (const [name, license] of Object.entries(config.licenses)) {
+    await res.setIfAbsent(name, () => getSDPXLicense(license))
+  }
+  res.assign(Object.fromEntries(getVendorLicenses()))
+  res.assign(Object.fromEntries(await getPackageLicenses()))
+  res.purge()
+
+  fs.writeFileSync(
+    outPath,
+    JSON.stringify(
+      Object.fromEntries(
+        Object.entries(res.toJSON()).sort(([a], [b]) => a.localeCompare(b)),
+      ),
+      null,
+      2,
+    ) + "\n",
+  )
+}
+
+void main()
diff --git a/scripts/build-locales.ts b/scripts/build-locales.ts
new file mode 100755
index 0000000..41d6353
--- /dev/null
+++ b/scripts/build-locales.ts
@@ -0,0 +1,42 @@
+#!/usr/bin/env -S node -r esbin
+import { execSync } from "child_process"
+import { resolve } from "path"
+import en from "../src/shared/i18n/resources/en-US/index.json"
+import { writeFormatted } from "./utils"
+
+const languages = process.argv.slice(2).includes("-f")
+  ? execSync("crowdin list languages --code=locale --plain")
+      .toString()
+      .trim()
+      .split("\n")
+      .concat("en-US")
+      .sort()
+  : ["de-DE", "en-US", "es-ES", "fr-CA", "fr-FR", "ja-JP", "ko-KR", "zh-CN", "zh-TW"]
+
+const keys: string[] = Array.from(
+  (function* keys(
+    obj: Record<string, unknown>,
+    prefixes: string[] = [],
+  ): Generator<string, void, undefined> {
+    for (const [key, value] of Object.entries(obj)) {
+      if (value != null && typeof value === "object") {
+        yield* keys(value as any, prefixes.concat(key))
+      } else {
+        yield prefixes.concat(key).join(".")
+      }
+    }
+  })(en),
+).sort()
+
+const code = [
+  `export const languages = ${JSON.stringify(languages, null, 2)};`,
+  "",
+  "export type TranslationKey =",
+  keys.map(key => "  | " + JSON.stringify(key)).join("\n"),
+  ";\n",
+]
+
+writeFormatted(
+  resolve(__dirname, "../src/shared/i18n/data.generated.ts"),
+  code.join("\n"),
+)
diff --git a/scripts/build-makefile.ts b/scripts/build-makefile.ts
new file mode 100755
index 0000000..98adf9d
--- /dev/null
+++ b/scripts/build-makefile.ts
@@ -0,0 +1,116 @@
+#!/usr/bin/env -S node -r esbin
+import { promises as fs } from "fs"
+import { resolve } from "path"
+import { kebabCase } from "lodash"
+import { sync as glob } from "fast-glob"
+import { ensureArray as arr } from "~/shared/ensureArray"
+// import _ from "dedent";
+
+interface Task {
+  deps: string | string[]
+  target: string | string[]
+  command: string | string[]
+}
+
+// Variables for Makefile
+// $@: The file name of the target of the rule.
+// $<: The name of the first prerequisite.
+// $?: The names of all the prerequisites that are newer than the target, with spaces between them.
+// $^: The names of all the prerequisites, with spaces between them.
+
+const tasks: { [name: string]: () => Task } = {
+  Makefile: (script = "scripts/build-makefile.ts") => ({
+    command: script,
+    target: "Makefile",
+    deps: [script],
+  }),
+
+  theme: (script = "scripts/build-theme.tsx") => ({
+    command: `${script} -o $(@D)`,
+    target: [
+      "src/shared/theme/tokens.generated.ts",
+      "src/shared/theme/tokens.generated.css",
+    ],
+    deps: ["src/shared/theme/tokens.tsx", script],
+  }),
+
+  models: (
+    models = "src/shared/models",
+    source = `${models}/models.yml`,
+    script = "./scripts/build-models.ts",
+  ) => ({
+    command: `${script}`,
+    target: glob(`${models}/*.generated.ts`),
+    deps: [source, script],
+  }),
+
+  WebExtensionPolyfill: (base = "src/vendor/webextension-polyfill") => ({
+    target: `${base}/api-metadata.generated.json`,
+    deps: glob(`${base}/**/*`),
+    command: `./${base}/scripts/compress.ts`,
+  }),
+
+  HTML: (script = "scripts/build-htmls.tsx") => ({
+    target: glob("dist/*.html"),
+    deps: script,
+    command: script,
+  }),
+
+  locales: (script = "scripts/build-locales.ts") => ({
+    target: [
+      ...glob(["dist/_locales/**/*.json", "src/shared/i18n/resources"]),
+      "src/shared/i18n/data.generated.ts",
+    ],
+    deps: script,
+    command: script,
+  }),
+
+  // monaco: (
+  //   script = "./scripts/build-monaco.ts",
+  //   dist = "dist/vendor/monaco-editor/index.js",
+  // ) => ({
+  //   target: dist,
+  //   deps: ["package.json", script],
+  //   command: [script, `touch ${dist}`],
+  // }),
+
+  sass: (script = "./scripts/build-sass.ts") => ({
+    target: "dist/vendor/sass/index.js",
+    deps: ["package.json", script],
+    command: script,
+  }),
+}
+
+async function main() {
+  const sep = " \\\n  "
+
+  function* generate() {
+    yield "# This file is generated by `make Makefile`"
+
+    const instances = Object.entries(tasks).map(([name, t]) => [name, t()] as const)
+    for (const [name, task] of instances) {
+      const { target } = task
+      yield arr(target).join(" ") +
+        ": " +
+        arr(task.deps)
+          .filter(d => !glob(d).some(file => target.includes(file)))
+          .join(sep)
+
+      yield `\t@echo "✨ Building ${name}..."`
+      for (const cmd of arr(task.command)) {
+        yield `\t@${cmd}`
+      }
+      yield ""
+      yield `${kebabCase(name)}: ${arr(target)[0]}`
+      yield ""
+    }
+
+    yield "all: " + instances.map(task => kebabCase(task[0])).join(sep)
+    yield ""
+  }
+
+  const makefile = [...generate()].join("\n")
+  await fs.writeFile(resolve(__dirname, "../Makefile"), makefile)
+}
+
+main()
diff --git a/scripts/build-manifest.ts b/scripts/build-manifest.ts
new file mode 100755
index 0000000..cef965b
--- /dev/null
+++ b/scripts/build-manifest.ts
@@ -0,0 +1,68 @@
+#!/usr/bin/env -S node -r esbin
+import "dotenv/config"
+import fs from "fs"
+import { resolve } from "path"
+import type { Manifest } from "webextension-polyfill"
+
+const manifest: Manifest.WebExtensionManifest = {
+  name: "__MSG_extName__",
+  version: "19.11.6",
+  description: "__MSG_description__",
+  manifest_version: 2,
+  default_locale: "en_US",
+  icons: {
+    64: "assets/images/64.png",
+    128: "assets/images/128.png",
+    256: "assets/images/256.png",
+  },
+  permissions: [
+    "tabs",
+    "downloads",
+    "webNavigation",
+    "storage",
+    "http://*/",
+    "https://*/",
+    "chrome://favicon/",
+  ],
+  content_security_policy:
+    "script-src 'unsafe-inline' 'self' http://localhost:8097/; object-src 'self'",
+  minimum_chrome_version: "90.0",
+  background: {
+    page: "background.html",
+    persistent: true,
+  },
+  devtools_page: "devtools.html",
+  content_scripts: [
+    {
+      matches: ["<all_urls>"],
+      run_at: "document_start",
+      all_frames: true,
+      js: ["app/context/index.js"],
+    },
+    {
+      matches: ["http://userstyles.org/*", "https://userstyles.org/*"],
+      run_at: "document_end",
+      all_frames: false,
+      js: ["app/install/index.js"],
+    },
+  ],
+  options_ui: {
+    page: "options.html",
+    open_in_tab: true,
+  },
+  browser_action: {
+    default_icon: {
+      16: "assets/images/16w.png",
+      19: "assets/images/19w.png",
+      32: "assets/images/32w.png",
+      38: "assets/images/38w.png",
+    },
+    default_title: "__MSG_extName__",
+    default_popup: "popup.html",
+  },
+}
+
+fs.writeFileSync(
+  resolve(__dirname, "../dist", "manifest.json"),
+  JSON.stringify(manifest, null, 2),
+)
diff --git a/scripts/build-models.ts b/scripts/build-models.ts
new file mode 100755
index 0000000..7be769c
--- /dev/null
+++ b/scripts/build-models.ts
@@ -0,0 +1,321 @@
+#!/usr/bin/env -S node -r esbin
+import "dotenv/config"
+import { promises as fs } from "fs"
+import { resolve } from "path"
+import { assign, camelCase } from "lodash"
+import yaml from "js-yaml"
+import { writeFormatted } from "./utils"
+
+// type Outputs = "partial input" | "input" | "object" | "inputAndObject" | "args" | "zod";
+type Output =
+  | ["input", { partial?: boolean; name?: string }] //
+  | ["object"]
+  | ["args"]
+  | ["zod"]
+
+interface Model {
+  as: Output[]
+  extends?: string
+  fields: string
+  extra?: Record<string, string>
+}
+
+const FIELD_REGEX =
+  /^(?<name>\w+)(?<optional>\?)?(:\s*(?<type>[\w\s[\]|]+))?(\s*=\s*(?<defaultValue>.+))?$/
+
+function parseField(field: string) {
+  const groups = field.match(FIELD_REGEX)?.groups
+  if (!groups) {
+    throw new Error(`Invalid field: ${field}`)
+  }
+
+  if (!groups.type && groups.defaultValue) {
+    const v = groups.defaultValue
+    if (v === "true" || v === "false") {
+      groups.type = "boolean"
+    }
+  }
+
+  return groups as {
+    name: string
+    optional?: "?"
+    type: string
+    defaultValue: string
+  }
+}
+
+function parseFields(value: any) {
+  if (typeof value === "object") {
+    value = Object.entries(value)
+      .map(([name, type]) => `${name}: ${type}`)
+      .join("\n")
+  }
+
+  return (value as string).trim().split("\n").map(parseField)
+}
+
+const getInputName = (name: string) => (name.startsWith("Input") ? name : `Input${name}`)
+
+type Generate = Generator<string | false | undefined, void, unknown>
+
+async function main() {
+  const folder = resolve(__dirname, "../src/shared/models")
+  const source = await fs.readFile(resolve(folder, "models.yml"), "utf8")
+  const json = yaml.load(source) as {
+    enums: Record<string, string[]>
+    imports?: string
+    models: Record<string, Model>
+  }
+
+  const models = Object.entries(json.models).map(
+    ([name, { as, extends: _, fields, extra }]) => ({
+      name,
+      as: as.map(t =>
+        Array.isArray(t) ? [t[0], (assign as any)(...t.slice(1))] : [t, {}],
+      ) as Output[],
+      extends: _,
+      fields: parseFields(fields),
+      extra,
+    }),
+  )
+
+  for (const model of models) {
+    if (model.extends) {
+      const parent = models.find(m => m.name === model.extends)
+      if (!parent) {
+        throw new Error(`Could not find parent ${model.extends}`)
+      }
+      model.fields = parent.fields.concat(model.fields)
+    }
+  }
+
+  const importedEnums = new Set<string>()
+  const enumNames = Object.keys(json.enums)
+
+  function getReifiedType(type: string): string {
+    if (type.endsWith("| null")) {
+      type = type.slice(0, -6).trim()
+    }
+    if (type.endsWith("[]")) {
+      return `[${getReifiedType(type.slice(0, -2))}]`
+    }
+    switch (type) {
+      case "string":
+      case "String":
+        return "String"
+      case "int":
+      case "Int":
+        return "Int"
+      case "boolean":
+      case "Boolean":
+        return "Boolean"
+      default:
+        if (enumNames.includes(type)) {
+          importedEnums.add(type)
+        }
+        if (/^\d+$/.test(type)) {
+          return "Int"
+        }
+        return type
+    }
+  }
+
+  function getVirtualType(type: string): string {
+    if (type.endsWith("[]")) {
+      return `${getVirtualType(type.slice(0, -2))}[]`
+    } else if (type.endsWith("| null")) {
+      return `${getVirtualType(type.slice(0, -6).trim())} | null`
+    }
+    switch (type) {
+      case "int":
+      case "Int":
+        return "number"
+      case "ID":
+      case "String":
+        return "string"
+      case "Boolean":
+        return "boolean"
+      default:
+        if (enumNames.includes(type)) {
+          importedEnums.add(type)
+        }
+        return type
+    }
+  }
+
+  function getZodType(type: string): string {
+    if (type.endsWith("[]")) {
+      return `z.array(${getZodType(type.slice(0, -2))})`
+    } else if (type.endsWith("| null")) {
+      return `${getZodType(type.slice(0, -6).trim())}.optional()`
+    }
+    switch (type) {
+      case "int":
+      case "Int":
+        return "z.number()"
+      case "string":
+        return "z.string()"
+      case "boolean":
+        return "z.boolean()"
+      default:
+        if (/^[\d.]+$/.test(type)) {
+          return `z.literal(${type})`
+        }
+
+        if (enumNames.includes(type)) {
+          return `z.nativeEnum(${type})`
+        }
+        return `z.instanceof(${type})`
+    }
+  }
+
+  const banners: string[] = [
+    `import { ArgsType, Field, ID, InputType, Int, ObjectType } from "@aet/gql-tools/macro";`,
+    // `import { z } from "zod";`,
+  ]
+
+  /* eslint-disable @typescript-eslint/consistent-type-imports, @typescript-eslint/no-unused-vars, @typescript-eslint/no-inferrable-types */
+  const getModels = function* (): Generate {
+    for (const model of models) {
+      let attachInputToObject = false
+      for (const type of model.as) {
+        let { name } = model
+        let isInput = false
+        let isPartialInput = false
+
+        switch (type[0]) {
+          case "input":
+            isInput = true
+            isPartialInput = type[1].partial ?? false
+
+            if (
+              Object.keys(type[1]).length === 0 &&
+              model.as.some(t => t[0] === "object")
+            ) {
+              attachInputToObject = true
+              continue
+            } else {
+              name = type[1].name ?? getInputName(name)
+              yield `@InputType("${name}")\n`
+            }
+            break
+
+          case "object":
+            if (attachInputToObject) {
+              yield `/** Input and object type for ${name} */\n`
+              yield `@InputType("${getInputName(name)}")\n`
+            }
+            yield `@ObjectType("${name}")\n`
+            break
+
+          case "args":
+            yield `@ArgsType()\n`
+            break
+
+          case "zod":
+            continue
+        }
+
+        yield `export class ${name} {`
+        for (const field of model.fields) {
+          const optional = field.optional || isPartialInput
+          yield "@Field("
+
+          yield `() => ${getReifiedType(field.type)},`
+          if (optional) {
+            yield "{ nullable: true },"
+          }
+          yield ")\n"
+          if (!field.defaultValue) {
+            yield "declare "
+          }
+          yield `${field.name}`
+          if (optional) {
+            yield "?"
+          }
+          yield ":"
+          yield getVirtualType(field.type)
+          if (isInput && field.defaultValue) {
+            yield ` = ${field.defaultValue}`
+          }
+          yield ";\n\n"
+        }
+
+        let constructorType = name
+        if (model.extra) {
+          const omits: string[] = []
+          for (const [name, type] of Object.entries(model.extra)) {
+            if (type.includes("=")) {
+              omits.push(name.replace(/\?$/, ""))
+            }
+            yield `${name}: ${type}\n`
+          }
+          constructorType = `Omit<${name}, ${omits.map(o => `"${o}"`).join(" | ")}>`
+        }
+
+        yield /* js */ `
+          /**
+           * Create an instance of ${name} from a plain object.
+           */
+          constructor(fields: ${constructorType}) {
+            Object.assign(this, fields);
+          }
+        `
+
+        // if (1 === 3) {
+        //   yield "\n";
+        //   yield `/** Zod schema for ${name} */\n`;
+        //   yield "static zod = z.object({\n";
+        //   for (const field of model.fields) {
+        //     yield `${field.name}: ${getZodType(field.type)},\n`;
+        //   }
+        //   yield `}).strict();`;
+        // }
+
+        yield "}\n\n"
+      }
+    }
+  }
+
+  function* getEnums() {
+    for (const [name, values] of Object.entries(json.enums)) {
+      yield `export const ${name} = {`
+      for (const value of values) {
+        yield `${value}: "${value}",\n`
+      }
+      yield "} as const;\n"
+      yield
+      yield `export type ${name} = typeof ${name}[keyof typeof ${name}];\n`
+      yield
+      yield `export const ${camelCase(name)}s = [${values
+        .map(v => `"${v}"`)
+        .join(", ")}] as ${name}[];\n`
+      yield
+    }
+  }
+
+  await writeTS(resolve(folder, "models.generated.ts"), getModels, () =>
+    banners.concat(
+      importedEnums.size
+        ? `import { ${Array.from(importedEnums)
+            .sort()
+            .join(", ")} } from "./enums.generated";`
+        : [],
+    ),
+  )
+  await writeTS(resolve(folder, "enums.generated.ts"), getEnums, () => [])
+}
+
+async function writeTS(path: string, generator: () => Generate, banner: () => string[]) {
+  const code = Array.from(generator(), x => x ?? "\n").join("")
+  await writeFormatted(path, banner().join("\n") + "\n\n" + code)
+}
+
+if (require.main === module) {
+  Promise.resolve()
+    .then(() => main())
+    .catch(e => {
+      console.error(e)
+      process.exit(1)
+    })
+}
diff --git a/scripts/build-primer-ref.ts b/scripts/build-primer-ref.ts
new file mode 100755
index 0000000..8d44b2f
--- /dev/null
+++ b/scripts/build-primer-ref.ts
@@ -0,0 +1,17 @@
+#!/usr/bin/env -S node -r esbin
+import fs from "fs"
+import { resolve } from "path"
+
+const path = resolve(__dirname, "../dist/reference.html")
+const html = fs
+  .readFileSync(path, "utf8")
+  .replace(/<script src="([\w/.]+)"><\/script>/g, (_, $1) => {
+    const script = fs.readFileSync(resolve(__dirname, "../dist", $1), "utf8")
+    return `<script>${script}</script>`
+  })
+  .replace(/<link rel="stylesheet" href="([\w/.]+)"\/>/, (_, $1) => {
+    const css = fs.readFileSync(resolve(__dirname, "../dist", $1), "utf8")
+    return `<style>${css}</style>`
+  })
+
+fs.writeFileSync(path.replace(".html", "-bundled.html"), html)
diff --git a/scripts/build-sass.ts b/scripts/build-sass.ts
new file mode 100755
index 0000000..ed47707
--- /dev/null
+++ b/scripts/build-sass.ts
@@ -0,0 +1,86 @@
+#!/usr/bin/env -S node -r esbin
+import fs from "fs"
+import { resolve } from "path"
+import * as esbuild from "esbuild"
+import { file } from "./utils"
+import { getDefaultTarget } from "./plugins/esbuild-browserslist"
+
+const outdir = resolve(__dirname, "../dist/vendor/sass")
+fs.rmSync(outdir, { recursive: true, force: true })
+
+const prefix = `
+  let window = globalThis;
+
+  let process = {
+    env: {},
+    stdout: {
+      write: console.log
+    },
+    stderr: {
+      write: console.error,
+    },
+  };
+`
+
+const sass = fs.readFileSync(
+  resolve(__dirname, "../node_modules", "sass/sass.dart.js"),
+  "utf-8",
+)
+
+const replaced: string = sass
+  .replaceAll(/typeof Buffer/g, '"undefined"')
+  .replaceAll("process.stdout.isTTY", "undefined")
+  .replaceAll("self.location", "window.location")
+  .replace(/require\("(chokidar|readline|fs|util)"\)/g, "{}")
+  .replace(
+    /(accept|accept\$1|add|call|toString|parse|write|scope\$1|parse[A-Z]\w+)\$(\d): function\(/g,
+    "$1$$$2(",
+  )
+  .replace(/\w+\.util\.inspect\.custom/g, "Symbol()")
+  .replace(/(\$eq|toString|get\$\w+|join\$0): function\(/g, "$1(")
+  .replace("if (dartNodeIsActuallyNode) {", "if (false) {")
+  // CSP
+  .replaceAll(
+    /new\s+self\.Function\(\s*("[^"\\]*(?:\\.[^"\\]*)*")\s*,\s*("[^"\\]*(?:\\.[^"\\]*)*")\s*\)/g,
+    (_, $1, $2) => `((${JSON.parse($1)}) => { ${JSON.parse($2)} })`,
+  )
+  .replaceAll(
+    /new\s+self\.Function\(\s*("[^"\\]*(?:\\.[^"\\]*)*")\s*,\s*('[^'\\]*(?:\\.[^'\\]*)*')\s*\)/g,
+    (_, $1, $2) =>
+      `((${JSON.parse($1)}) => { ${JSON.parse(
+        '"' + $2.slice(1, -1).replaceAll('"', '\\"') + '"',
+      )} })`,
+  )
+  .trim()
+
+const temporary = file.js(prefix + replaced)
+
+const entry = file.js(/* js */ `
+  import "${temporary.path}";
+  const sass = globalThis._cliPkgExports.pop();
+  sass.load({});
+
+  export default sass;
+`)
+
+try {
+  esbuild.buildSync({
+    entryPoints: [entry.path],
+    outfile: resolve(outdir, "index.js"),
+    bundle: true,
+    minify: true,
+    format: "esm",
+    sourcemap: "external",
+    target: getDefaultTarget(),
+    external: ["fs", "chokidar", "readline"],
+    banner: { js: "/* eslint-disable */" },
+    legalComments: "linked",
+    define: {
+      "process.env.NODE_ENV": '"production"',
+      "process.env.NODE_DEBUG": "undefined",
+    },
+  })
+} finally {
+  temporary.rm()
+  entry.rm()
+}
diff --git a/scripts/build-schema-file.ts b/scripts/build-schema-file.ts
new file mode 100755
index 0000000..afb768e
--- /dev/null
+++ b/scripts/build-schema-file.ts
@@ -0,0 +1,103 @@
+#!/usr/bin/env -S node -r esbin
+import fs from "fs"
+import { build } from "esbuild"
+import { printSchema } from "graphql"
+import type { Visitor } from "@babel/core"
+import { getBasicOptions } from "./build-apps"
+import { file } from "./utils"
+import { dependencies, devDependencies } from "../package.json"
+import type * as schema from "../src/background/graphql/schema"
+
+const output = file.js()
+
+const DEBUG = !!process.env.DEBUG
+
+const babelPlugin: Visitor<{ filename: string }> = {
+  ClassMethod({ node }) {
+    node.params = []
+    node.async = false
+    node.body.body = []
+  },
+  ClassPrivateMethod(path) {
+    path.remove()
+  },
+  ClassProperty({ node }) {
+    node.value = null
+  },
+  FunctionDeclaration({ node }, { filename }) {
+    if (!filename.includes("graphql")) {
+      node.body.body = []
+    }
+  },
+}
+
+export async function buildSchema() {
+  await build({
+    ...getBasicOptions({
+      entryPoints: ["src/background/graphql/schema.ts"],
+      babelPlugins: [() => ({ visitor: babelPlugin })],
+      plugins: [
+        {
+          name: "no-lib",
+          setup(build) {
+            const noop = require.resolve("lodash/noop")
+            const whitelist = new Set([
+              "graphql-type-json",
+              "reflect-metadata",
+              "tslib",
+              "lodash",
+              "@aet/gql-tools/marco",
+              "@aet/gql-tools/type-graphql",
+            ])
+            const noopRes = { path: noop, external: false }
+
+            build.onResolve({ filter: /.*/ }, ({ path }) => {
+              if (
+                path.includes("couchdb") ||
+                path.includes("idb") ||
+                path.includes("compiler") ||
+                path.includes("webextension")
+              ) {
+                return noopRes
+              }
+              if (/^(~|\.\.?)\//.test(path)) {
+                return null
+              }
+              if (whitelist.has(path)) {
+                return { path: require.resolve(path), external: true }
+              }
+              return noopRes
+            })
+          },
+        },
+      ],
+    }),
+    outfile: output.path,
+    target: "node20",
+    format: "cjs",
+    minify: !DEBUG,
+    keepNames: true,
+    legalComments: "none",
+    sourcemap: false,
+    splitting: false,
+    external: Object.keys(dependencies || {})
+      .concat(Object.keys(devDependencies))
+      .concat("@aet/gql-tools/type-graphql"),
+  })
+    .then(() => {
+      const { getSchema } = require("../" + output.path) as typeof schema
+      const result = printSchema(getSchema())
+      fs.writeFileSync("./src/generated/schema.gql", result)
+
+      return result
+    })
+    .finally(() => {
+      if (!DEBUG) {
+        output.rm()
+      }
+    })
+}
+
+if (require.main === module) {
+  void buildSchema()
+}
diff --git a/scripts/build-shims.js b/scripts/build-shims.js
new file mode 100755
index 0000000..393e8a2
--- /dev/null
+++ b/scripts/build-shims.js
@@ -0,0 +1,59 @@
+#!/usr/bin/env node
+/* eslint-disable spaced-comment */
+// @ts-check
+const fs = require("fs")
+const { resolve } = require("path")
+const pkg = require("../package.json")
+
+/**
+ * @param {TemplateStringsArray} args
+ */
+function _([source]) {
+  return {
+    "index.js": `module.exports = ${source};\n`,
+    "index.mjs": `export default ${source};\n`,
+    "package.json": JSON.stringify({ module: "index.mjs", version: "1.0.0" }),
+  }
+}
+
+const { entries, fromEntries } = Object
+
+/**
+ * @param {Record<string, Record<string, string>>} list
+ */
+function createShims(list) {
+  /** @type {Record<string, string>} */
+  const resolutions = fromEntries(
+    entries(pkg.resolutions).filter(([, path]) => !path.startsWith("./shims")),
+  )
+
+  for (const [name, content] of entries(list)) {
+    const dir = resolve(__dirname, "../shims", name)
+    fs.mkdirSync(dir, { recursive: true })
+    content["package.json"] ??= "{}"
+
+    for (let [fileName, text] of entries(content)) {
+      if (fileName === "package.json") {
+        text = JSON.stringify({ name, ...JSON.parse(text) })
+      }
+      fs.writeFileSync(resolve(dir, fileName), text)
+    }
+
+    resolutions[name] = `./shims/${name}`
+  }
+
+  pkg.resolutions =
+    /** @type {any} */
+    (fromEntries(entries(resolutions).sort(([a], [b]) => a.localeCompare(b))))
+
+  fs.writeFileSync(resolve(__dirname, "../package.json"), JSON.stringify(pkg, null, 2))
+}
+
+createShims({
+  "cross-fetch": {
+    "index.js": /*js*/ `module.exports = fetch; const headers = Headers; module.exports.Headers = headers;`,
+    "index.mjs": /*js*/ `export default fetch; const headers = Headers; export { headers as Headers };`,
+    "package.json": JSON.stringify({ module: "index.mjs", version: "1.0.0" }),
+  },
+  "is-number": _/*js*/ `value => typeof value === "number"`,
+})
diff --git a/scripts/build-theme.tsx b/scripts/build-theme.tsx
new file mode 100755
index 0000000..fc5c0ba
--- /dev/null
+++ b/scripts/build-theme.tsx
@@ -0,0 +1,110 @@
+#!/usr/bin/env -S node -r esbin
+import { promises as fs } from "fs"
+import { resolve } from "path"
+import sass from "sass"
+import { kebabCase } from "lodash"
+import { tokenSource } from "~/shared/theme/tokens"
+
+const trim = (s: string) => s.trim()
+
+const [, outdir] = process.argv.slice(2)
+// This file is used to `make theme`.
+namespace primer {
+  // https://github.com/primer/github-vscode-theme/commit/5f08d0cc4de8abc33e13c3f63fe92288824a11cf
+  // prettier-ignore
+  const classic = {
+    black: "#1b1f23",
+    white: "#fff",
+    gray: ["#fafbfc", "#f6f8fa", "#e1e4e8", "#d1d5da", "#959da5", "#6a737d", "#586069", "#444d56", "#2f363d", "#24292e"],
+    blue: ["#f1f8ff", "#dbedff", "#c8e1ff", "#79b8ff", "#2188ff", "#0366d6", "#005cc5", "#044289", "#032f62", "#05264c"],
+    green: ["#f0fff4", "#dcffe4", "#bef5cb", "#85e89d", "#34d058", "#28a745", "#22863a", "#176f2c", "#165c26", "#144620"],
+    yellow: ["#fffdef", "#fffbdd", "#fff5b1", "#ffea7f", "#ffdf5d", "#ffd33d", "#f9c513", "#dbab09", "#b08800", "#735c0f"],
+    orange: ["#fff8f2", "#ffebda", "#ffd1ac", "#ffab70", "#fb8532", "#f66a0a", "#e36209", "#d15704", "#c24e00", "#a04100"],
+    red: ["#ffeef0", "#ffdce0", "#fdaeb7", "#f97583", "#ea4a5a", "#d73a49", "#cb2431", "#b31d28", "#9e1c23", "#86181d"],
+    purple: ["#f5f0ff", "#e6dcfd", "#d1bcf9", "#b392f0", "#8a63d2", "#6f42c1", "#5a32a3", "#4c2889", "#3a1d6e", "#29134e"],
+    pink: ["#ffeef8", "#fedbf0", "#f9b3dd", "#f692ce", "#ec6cb9", "#ea4aaa", "#d03592", "#b93a86", "#99306f", "#6d224f"]
+  };
+
+  function addClassic(css: string, dark: boolean) {
+    const r = (name: string, value?: string) =>
+      (css = css.replace(
+        RegExp(/(--color-NAME: )([^;]+);/.source.replace("NAME", name)),
+        (_, name, originalValue) => `${name}${value ?? originalValue};`,
+      ))
+
+    r("canvas-default", dark ? "#1f2428" : undefined)
+    return css
+  }
+
+  function sassCompile(code: string) {
+    return sass.compileString(code, {
+      loadPaths: [resolve(__dirname, "../node_modules")],
+      style: "compressed",
+    }).css
+  }
+
+  export async function main() {
+    const outputDir = resolve(__dirname, "../dist/vendor/primer")
+    await fs.mkdir(outputDir, { recursive: true })
+
+    const themes = {
+      dark: "dark-default",
+      dark_colorblind: undefined,
+      dark_dimmed: undefined,
+      dark_high_contrast: undefined,
+      dark_tritanopia: undefined,
+      light: "light-default",
+      light_colorblind: undefined,
+      light_high_contrast: undefined,
+      light_tritanopia: undefined,
+    }
+
+    const toRoot = (name: string, themeName = name) =>
+      sassCompile(/* scss */ `
+        @use "@primer/primitives/dist/scss/colors/_${name}.scss" as *;
+        :root[data-theme="github-${themeName}"] {
+          @include primer-colors-${name};
+        }
+      `)
+
+    await Promise.all([
+      ...Object.entries(themes).map(([source, name = source]) =>
+        fs.writeFile(resolve(outputDir, `github-${name}.css`), toRoot(source, name)),
+      ),
+      fs.writeFile(
+        resolve(outputDir, "github-dark.css"),
+        addClassic(toRoot("dark"), true),
+      ),
+      fs.writeFile(
+        resolve(outputDir, "github-light.css"),
+        addClassic(toRoot("light"), false),
+      ),
+    ])
+  }
+}
+
+async function tokens() {
+  const declarations = Object.entries(tokenSource).map(([name, value]) => {
+    const [light, dark] = value.trim().split(",").map(trim)
+    return { name, light, dark }
+  })
+
+  await fs.writeFile(
+    resolve(outdir, "tokens.generated.css"),
+    [
+      "body{",
+      ...declarations.map(({ name, light }) => `--${kebabCase(name)}:${light};`),
+      "}",
+      "body.dark{",
+      ...declarations.map(({ name, dark }) => `--${kebabCase(name)}:${dark};`),
+      "}",
+    ].join(""),
+  )
+}
+
+async function main() {
+  await tokens()
+  await primer.main()
+}
+
+main()
diff --git a/scripts/build.sh b/scripts/build.sh
new file mode 100755
index 0000000..49364cc
--- /dev/null
+++ b/scripts/build.sh
@@ -0,0 +1,29 @@
+#!/bin/sh
+set -e
+
+if [ "$1" = "monaco" ]; then
+  rm -rf "dist/vendor/vs"
+  path=$(dirname "$(node -p "require.resolve('monaco-editor/package.json')")")/min/vs
+  cp -r "$path" "dist/vendor/vs"
+  exit 0
+fi
+
+if [ -z "$1" ]; then
+  export NODE_ENV=production
+  make all
+  echo "✨ Downloading locales..."
+  # crowdin download
+  echo "✨ Building gql..."
+  ./scripts/build-gql.ts
+  echo "✨ Building apps..."
+  ./scripts/build-apps.ts -s
+  echo "✨ Building license..."
+  ./scripts/build-license.ts
+else
+  path=$(find ./scripts -type f -name "build-$1.*")
+  if [ -z "$path" ]; then
+    echo "Unknown task '$1'."
+    exit 1
+  fi
+  $path "$@"
+fi
diff --git a/scripts/plugins/babel-component-name.ts b/scripts/plugins/babel-component-name.ts
new file mode 100644
index 0000000..78082d2
--- /dev/null
+++ b/scripts/plugins/babel-component-name.ts
@@ -0,0 +1,37 @@
+import type { BabelPlugin } from "./esbuild-babel"
+
+export const componentName =
+  (): BabelPlugin =>
+  ({ types: t }) => ({
+    name: "babel-plugin-component-name",
+    visitor: {
+      ReturnStatement(path) {
+        if (!t.isJSXElement(path.node.argument)) return
+
+        const funcParent = path.getFunctionParent()
+        if (funcParent == null || !t.isArrowFunctionExpression(funcParent.node)) return
+
+        let id: string | undefined
+
+        if (
+          t.isCallExpression(funcParent.parent) &&
+          t.isIdentifier(funcParent.parent.callee) &&
+          t.isVariableDeclarator(funcParent.parentPath.parent) &&
+          t.isIdentifier(funcParent.parentPath.parent.id)
+        ) {
+          id = funcParent.parentPath.parent.id.name
+        } else if (
+          t.isVariableDeclarator(funcParent.parent) &&
+          t.isIdentifier(funcParent.parent.id)
+        ) {
+          id = funcParent.parent.id.name
+        }
+
+        if (id != null) {
+          path.node.argument.openingElement.attributes.unshift(
+            t.jsxAttribute(t.jsxIdentifier("data-component"), t.stringLiteral(id)),
+          )
+        }
+      },
+    },
+  })
diff --git a/scripts/plugins/babel-constant-element.ts b/scripts/plugins/babel-constant-element.ts
new file mode 100644
index 0000000..3f0306f
--- /dev/null
+++ b/scripts/plugins/babel-constant-element.ts
@@ -0,0 +1,100 @@
+// https://github.com/babel/babel/blob/c38bf12f010520ea7abe8a286f62922b2d1e1f1b/packages/babel-plugin-transform-react-constant-elements/src/index.ts
+import type { Visitor } from "@babel/core"
+import type { PluginObj, types as t } from "@babel/core"
+
+interface PluginState {
+  isImmutable: boolean
+  mutablePropsAllowed?: boolean
+}
+
+export default (allowMutablePropsOnTags?: string[]): PluginObj => {
+  const HOISTED = new WeakSet()
+
+  const immutabilityVisitor: Visitor<PluginState> = {
+    enter(path, state) {
+      const stop = () => {
+        state.isImmutable = false
+        path.stop()
+      }
+
+      if (path.isJSXClosingElement()) {
+        path.skip()
+        return
+      }
+
+      // Elements with refs are not safe to hoist.
+      if (
+        path.isJSXIdentifier({ name: "ref" }) &&
+        path.parentPath.isJSXAttribute({ name: path.node })
+      ) {
+        return stop()
+      }
+
+      // Ignore identifiers & JSX expressions.
+      if (path.isJSXIdentifier() || path.isIdentifier() || path.isJSXMemberExpression()) {
+        return
+      }
+
+      if (!path.isImmutable()) {
+        // If it's not immutable, it may still be a pure expression, such as string concatenation.
+        // It is still safe to hoist that, so long as its result is immutable.
+        // If not, it is not safe to replace as mutable values (like objects) could be mutated after render.
+        // https://github.com/facebook/react/issues/3226
+        if (path.isPure()) {
+          const { confident, value } = path.evaluate()
+          if (confident) {
+            // We know the result; check its mutability.
+            const isMutable =
+              (!state.mutablePropsAllowed && value && typeof value === "object") ||
+              typeof value === "function"
+            if (!isMutable) {
+              // It evaluated to an immutable value, so we can hoist it.
+              path.skip()
+              return
+            }
+          }
+        }
+        stop()
+      }
+    },
+  }
+
+  return {
+    name: "transform-react-constant-elements",
+
+    visitor: {
+      Program(program) {
+        program.traverse({
+          JSXElement(path) {
+            if (HOISTED.has(path.node)) return
+            HOISTED.add(path.node)
+
+            const state: PluginState = { isImmutable: true }
+
+            // This transform takes the option `allowMutablePropsOnTags`, which is an array
+            // of JSX tags to allow mutable props (such as objects, functions) on. Use sparingly
+            // and only on tags you know will never modify their own props.
+            if (allowMutablePropsOnTags != null) {
+              // Get the element's name. If it's a member expression, we use the last part of the path.
+              // So the option ["FormattedMessage"] would match "Intl.FormattedMessage".
+              let namePath = path.get("openingElement").get("name")
+              while (namePath.isJSXMemberExpression()) {
+                namePath = namePath.get("property")
+              }
+
+              const elementName = (namePath.node as t.JSXIdentifier).name
+              state.mutablePropsAllowed = allowMutablePropsOnTags.includes(elementName)
+            }
+
+            // Traverse all props passed to this element for immutability.
+            path.traverse(immutabilityVisitor, state)
+
+            if (state.isImmutable) {
+              path.hoist(path.scope)
+            }
+          },
+        })
+      },
+    },
+  }
+}
diff --git a/scripts/plugins/babel-dynamic-import.ts b/scripts/plugins/babel-dynamic-import.ts
new file mode 100644
index 0000000..64250f6
--- /dev/null
+++ b/scripts/plugins/babel-dynamic-import.ts
@@ -0,0 +1,54 @@
+import { dirname } from "path"
+import glob from "fast-glob"
+import type { types } from "@babel/core"
+import type { BabelPlugin } from "./esbuild-babel"
+
+const skip = new WeakSet<types.CallExpression>()
+
+export const dynamicImport =
+  (filePath: string): BabelPlugin =>
+  ({ types: t }) => ({
+    name: "dynamic-import",
+    visitor: {
+      Import(path) {
+        if (
+          !t.isCallExpression(path.parent) ||
+          path.parent.arguments.length !== 1 ||
+          skip.has(path.parent)
+        ) {
+          return
+        }
+
+        const [arg] = path.parent.arguments
+        if (!t.isTemplateLiteral(arg)) {
+          return
+        }
+
+        const key = path.scope.generateDeclaredUidIdentifier("key")
+
+        const globText = arg.quasis.map(x => x.value.raw).join("*")
+        const globCandidates = glob.sync(globText, {
+          cwd: dirname(filePath),
+        })
+
+        const clone = t.cloneNode(path.parent, true)
+        skip.add(clone)
+
+        const cond = globCandidates.reduceRight(
+          (accum: types.Expression, cur) =>
+            t.conditionalExpression(
+              t.binaryExpression("===", key, t.stringLiteral(cur)),
+              t.callExpression(t.import(), [t.stringLiteral(cur)]),
+              accum,
+            ),
+          clone,
+        )
+
+        t.cloneNode(path.parent)
+
+        path.parentPath.replaceWith(
+          t.sequenceExpression([t.assignmentExpression("=", key, arg), cond]),
+        )
+      },
+    },
+  })
diff --git a/scripts/plugins/babel-filename.ts b/scripts/plugins/babel-filename.ts
new file mode 100644
index 0000000..677c480
--- /dev/null
+++ b/scripts/plugins/babel-filename.ts
@@ -0,0 +1,30 @@
+import { basename, dirname } from "path"
+import type { BabelPlugin } from "./esbuild-babel"
+
+export const fileName =
+  ({
+    hasFileName,
+    hasDirName,
+    path,
+  }: {
+    hasFileName: boolean
+    hasDirName: boolean
+    path: string
+  }): BabelPlugin =>
+  ({ types: t }) => ({
+    name: "__filename polyfill",
+    visitor: {
+      Program(program) {
+        const assign = (id: string, value: string) =>
+          t.variableDeclaration("var", [
+            t.variableDeclarator(t.identifier(id), t.stringLiteral(value)),
+          ])
+        if (hasFileName) {
+          program.node.body.unshift(assign("__filename", basename(path)))
+        }
+        if (hasDirName) {
+          program.node.body.unshift(assign("__dirname", dirname(path)))
+        }
+      },
+    },
+  })
diff --git a/scripts/plugins/babel-inline-css-vars.ts b/scripts/plugins/babel-inline-css-vars.ts
new file mode 100644
index 0000000..67d6c11
--- /dev/null
+++ b/scripts/plugins/babel-inline-css-vars.ts
@@ -0,0 +1,80 @@
+import hash from "@emotion/hash"
+import type { types } from "@babel/core"
+import { kebabCase } from "lodash"
+import type { BabelPlugin } from "./esbuild-babel"
+
+export const inlineCSSVariables =
+  (): BabelPlugin<{ styles: { id: string; light: string; dark: string }[] }> =>
+  ({ types: t }) => ({
+    name: "inline CSS variables",
+    visitor: {
+      Program: {
+        enter(_, state) {
+          state.styles = []
+        },
+        exit(path, { styles }) {
+          if (!styles.length) return
+
+          const css =
+            `body.light {${styles.map(s => `--${s.id}:${s.light}`).join(";")}}\n` +
+            `body.dark {${styles.map(s => `--${s.id}:${s.dark}`).join(";")}}`
+
+          path.node.body.unshift(
+            t.importDeclaration([], t.stringLiteral(`data:text/css,${encodeURI(css)}`)),
+          )
+        },
+      },
+
+      TaggedTemplateExpression(path, state) {
+        function join(exp: types.Node): string[] | undefined {
+          if (t.isIdentifier(exp)) return [exp.name]
+          if (!t.isMemberExpression(exp) || !t.isIdentifier(exp.property)) return
+          const prev = t.isIdentifier(exp.object) ? [exp.object.name] : join(exp.object)
+          return prev ? [...prev, exp.property.name] : undefined
+        }
+
+        const { expressions: exps } = path.node.quasi
+        for (const [i, exp] of exps.entries()) {
+          if (t.isIdentifier(exp)) {
+            if (exp.name === "DARK_MODE") {
+              exps[i] = t.stringLiteral("body.dark &")
+            } else if (exp.name === "LIGHT_MODE") {
+              exps[i] = t.stringLiteral("body.light &")
+            }
+            continue
+          }
+
+          if (
+            t.isCallExpression(exp) &&
+            t.isIdentifier(exp.callee, { name: "color" }) &&
+            exp.arguments.length === 2 &&
+            t.isStringLiteral(exp.arguments[0]) &&
+            t.isStringLiteral(exp.arguments[1])
+          ) {
+            const [light, dark] = (exp.arguments as babel.types.StringLiteral[]).map(
+              arg => arg.value,
+            )
+            const id = hash(`${light}-${dark}`)
+            state.styles.push({ id, light, dark })
+            exps[i] = t.stringLiteral(`var(--${id})`)
+            continue
+          }
+
+          let ids: string[] | undefined
+          if (
+            t.isMemberExpression(exp) &&
+            t.isIdentifier(exp.property) &&
+            (ids = join(exp))
+          ) {
+            const rest = ids.slice(1).join(".")
+            if (ids[0] === "vars") {
+              exps[i] = t.stringLiteral(`var(--${kebabCase(rest)})`)
+            }
+            if (ids[0] === "token") {
+              exps[i] = t.stringLiteral(`var(--color-${kebabCase(rest)})`)
+            }
+          }
+        }
+      },
+    },
+  })
diff --git a/scripts/plugins/babel-why-did-you-render.ts b/scripts/plugins/babel-why-did-you-render.ts
new file mode 100644
index 0000000..926f435
--- /dev/null
+++ b/scripts/plugins/babel-why-did-you-render.ts
@@ -0,0 +1,106 @@
+import type { NodePath, types } from "@babel/core"
+import type { Node } from "@babel/core"
+import type { BabelPlugin } from "./esbuild-babel"
+
+// useWhyDidYouUpdate
+export const whyDidYouRender =
+  ({
+    hookName,
+    hookPath,
+    ignoredHooks,
+  }: {
+    hookName: string
+    hookPath: string
+    ignoredHooks: string[]
+  }): BabelPlugin =>
+  ({ types: t }) => {
+    const ignored = new WeakSet<Node>()
+
+    function ignore(node: Node) {
+      ignored.add(node)
+      return node
+    }
+
+    return {
+      name: "why-did-you-render",
+      visitor: {
+        Program(path, state) {
+          const id = path.scope.generateUidIdentifier(hookName)
+          path.node.body.unshift(
+            t.importDeclaration(
+              [t.importSpecifier(id, t.identifier(hookName))], //
+              t.stringLiteral(hookPath),
+            ),
+          )
+          state.whyDidYouRenderId = id
+        },
+
+        VariableDeclaration(path, state) {
+          if (ignored.has(path.node)) return
+
+          const decls = path.node.declarations
+          if (decls.length !== 1) return
+
+          const [{ init, id }] = decls
+          if (
+            !t.isCallExpression(init) ||
+            !t.isIdentifier(init.callee) ||
+            !init.callee.name.startsWith("use") ||
+            init.callee.name.length <= 3
+          ) {
+            return
+          }
+
+          if (ignoredHooks.includes(init.callee.name)) {
+            return
+          }
+
+          const findParent = <T extends types.Node>(
+            predicate: (node: types.Node) => node is T,
+          ) => path.findParent(path => predicate(path.node)) as NodePath<T> | undefined
+
+          const parentId =
+            findParent(t.isFunctionDeclaration)?.node.id!.name ??
+            (<types.Identifier>(
+              (<types.VariableDeclarator>findParent(t.isArrowFunctionExpression)?.parent)
+                ?.id
+            ))?.name
+
+          if (!parentId || parentId.startsWith("use")) {
+            return
+          }
+
+          const callee = t.cloneNode(state.whyDidYouRenderId as types.Identifier)
+
+          if (t.isIdentifier(id)) {
+            path.insertAfter(
+              t.callExpression(callee, [
+                t.stringLiteral(parentId),
+                t.stringLiteral(init.callee.name),
+                id,
+              ]),
+            )
+            return
+          }
+
+          const temporaryId = path.scope.generateUidIdentifier(init.callee.name)
+
+          path.replaceWithMultiple([
+            ignore(
+              t.variableDeclaration(path.node.kind, [
+                t.variableDeclarator(temporaryId, init),
+                t.variableDeclarator(id, temporaryId),
+              ]),
+            ),
+            t.expressionStatement(
+              t.callExpression(callee, [
+                t.stringLiteral(parentId),
+                t.stringLiteral(init.callee.name),
+                temporaryId,
+              ]),
+            ),
+          ])
+        },
+      },
+    }
+  }
diff --git a/scripts/plugins/esbuild-alias.ts b/scripts/plugins/esbuild-alias.ts
new file mode 100644
index 0000000..5b833ed
--- /dev/null
+++ b/scripts/plugins/esbuild-alias.ts
@@ -0,0 +1,24 @@
+// https://github.com/igoradamenko/esbuild-plugin-alias/blob/master/index.js
+// MIT License. Copyright (c) 2021 Igor Adamenko
+import type { Plugin } from "esbuild"
+
+export function alias(options: Record<string, string>): Plugin {
+  const aliases = Object.keys(options)
+  const re = new RegExp(`^(${aliases.map(x => escapeRegExp(x)).join("|")})$`)
+
+  return {
+    name: "alias",
+    setup(build) {
+      // we do not register 'file' namespace here, because the root file won't be processed
+      // https://github.com/evanw/esbuild/issues/791
+      build.onResolve({ filter: re }, args => ({
+        path: options[args.path],
+      }))
+    },
+  }
+}
+
+function escapeRegExp(string: string) {
+  // $& means the whole matched string
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+}
diff --git a/scripts/plugins/esbuild-babel.ts b/scripts/plugins/esbuild-babel.ts
new file mode 100644
index 0000000..8910b55
--- /dev/null
+++ b/scripts/plugins/esbuild-babel.ts
@@ -0,0 +1,101 @@
+import fs from "fs"
+import { extname } from "path"
+import * as babel from "@babel/core"
+import type * as esbuild from "esbuild"
+import { fileName } from "./babel-filename"
+import { dynamicImport } from "./babel-dynamic-import"
+import { inlineCSSVariables } from "./babel-inline-css-vars"
+import { componentName } from "./babel-component-name"
+// import { whyDidYouRender } from "./babel-why-did-you-render";
+// import constantElement from "./babel-constant-element";
+
+const __PROD__ = process.env.NODE_ENV === "production"
+
+export type BabelPlugin<T = unknown> = (
+  Babel: typeof babel,
+) => babel.PluginObj<T & babel.PluginPass>
+
+export interface BabelPluginData {
+  path: string
+}
+
+export const babelPlugin = (extraPlugins: babel.PluginItem[] = []): esbuild.Plugin => ({
+  name: "babel",
+  setup(build) {
+    function* getBabelPlugins(
+      path: string,
+      content: string,
+    ): Generator<babel.PluginItem, void, unknown> {
+      const hasFileName = content.includes("__filename")
+      const hasDirName = content.includes("__dirname")
+      if (hasFileName || hasDirName) {
+        yield fileName({ hasFileName, hasDirName, path })
+      }
+      if (!__PROD__ && /<\w/.test(content)) {
+        yield componentName()
+      }
+      // if (!__PROD__ && content.includes("use")) {
+      //   yield whyDidYouRender({
+      //     hookName: "useWhyDidYouUpdate",
+      //     hookPath: resolve(__dirname, "../../src/shared/hooks/useWhy.ts"),
+      //     ignoredHooks: ["useTreeContext"],
+      //   });
+      // }
+      if (content.includes("vars.") || content.includes("token.")) {
+        yield inlineCSSVariables()
+      }
+      if (content.includes("await import(`")) {
+        yield dynamicImport(path)
+      }
+      if (content.includes('.macro"') || content.includes("/macro")) {
+        yield ["babel-plugin-macros", { typeGraphQL: { useParameterDecorator: true } }]
+      }
+      if (content.includes("@emotion")) {
+        yield [require("@emotion/babel-plugin"), { sourceMap: false }]
+      }
+
+      if (__PROD__ && content.includes("gql`")) {
+        yield [require("babel-plugin-transform-minify-gql-template-literals")]
+      }
+    }
+
+    build.onLoad({ filter: /\.tsx?$/ }, args => {
+      if (args.path.includes("node_modules/")) {
+        return null
+      }
+
+      const { path } = args
+      const file = fs.readFileSync(path, "utf-8")
+
+      const plugins: babel.PluginItem[] = Array.from(getBabelPlugins(path, file)).concat(
+        extraPlugins,
+      )
+
+      let code = file
+      const pluginData: BabelPluginData = { path }
+
+      if (plugins.length) {
+        const res = babel.transformSync(file, {
+          filename: path,
+          babelrc: false,
+          configFile: false,
+          parserOpts: {
+            plugins: ["typescript", "decorators-legacy", "jsx", "importAssertions"],
+          },
+          generatorOpts: { decoratorsBeforeExport: true },
+          plugins,
+        })!
+
+        code = res.code!
+      } else {
+        return null
+      }
+
+      return {
+        contents: code,
+        loader: extname(path).slice(1) as any,
+        pluginData,
+      }
+    })
+  },
+})
diff --git a/scripts/plugins/esbuild-browserslist.ts b/scripts/plugins/esbuild-browserslist.ts
new file mode 100644
index 0000000..ae5a893
--- /dev/null
+++ b/scripts/plugins/esbuild-browserslist.ts
@@ -0,0 +1,107 @@
+// https://github.com/nihalgonsalves/esbuild-plugin-browserslist
+// MIT License. Copyright (c) 2021 Nihal Gonsalves
+import { z } from "zod"
+import browserslist from "browserslist"
+
+export function getDefaultTarget() {
+  return getTarget(
+    ["Chrome", "Firefox", "Edge", "Safari"].map(browser => `last 2 ${browser} versions`),
+  )
+}
+
+enum BrowserslistKind {
+  Edge = "edge",
+  Firefox = "firefox",
+  Chrome = "chrome",
+  Safari = "safari",
+  iOS = "ios_saf",
+  Android = "android",
+  AndroidChrome = "and_chr",
+  AndroidFirefox = "and_ff",
+  AndroidUC = "and_uc",
+  AndroidQQ = "and_qq",
+  Samsung = "samsung",
+  Opera = "opera",
+  OperaMini = "op_mini",
+  OperaMobile = "op_mob",
+  IE = "ie",
+  IEMobile = "ie_mob",
+  BlackBerry = "bb",
+  Baidu = "baidu",
+  Kaios = "kaios",
+  Node = "node",
+}
+
+const enum EsbuildEngine {
+  Chrome = "chrome",
+  Edge = "edge",
+  ES = "es",
+  Firefox = "firefox",
+  Hermes = "hermes",
+  IE = "ie",
+  IOS = "ios",
+  Node = "node",
+  Opera = "opera",
+  Rhino = "rhino",
+  Safari = "safari",
+}
+
+const BrowserslistEsbuildMapping: Partial<Record<BrowserslistKind, EsbuildEngine>> = {
+  // exact map
+  [BrowserslistKind.Edge]: EsbuildEngine.Edge,
+  [BrowserslistKind.Firefox]: EsbuildEngine.Firefox,
+  [BrowserslistKind.Chrome]: EsbuildEngine.Chrome,
+  [BrowserslistKind.Safari]: EsbuildEngine.Safari,
+  [BrowserslistKind.iOS]: EsbuildEngine.IOS,
+  [BrowserslistKind.Node]: EsbuildEngine.Node,
+  [BrowserslistKind.IE]: EsbuildEngine.IE,
+  [BrowserslistKind.Opera]: EsbuildEngine.Opera,
+  // approximate mapping
+  [BrowserslistKind.Android]: EsbuildEngine.Chrome,
+  [BrowserslistKind.AndroidChrome]: EsbuildEngine.Chrome,
+  [BrowserslistKind.AndroidFirefox]: EsbuildEngine.Firefox,
+  // the rest have no equivalent for esbuild
+}
+
+const BrowserSchema = z.nativeEnum(BrowserslistKind)
+/** 123 or 123.456 or 123.456.789 */
+const VersionSchema = z.string().regex(/^(\d+\.\d+\.\d+|\d+\.\d+|\d+)$/)
+
+export function getTarget(targets: string[]): string[] {
+  const result = browserslist(targets)
+    .map(entry => {
+      const [rawBrowser, rawVersionOrRange] = entry.split(" ")
+
+      const rawVersionNormalized = rawVersionOrRange
+        // e.g. 13.4-13.7, take the lower range
+        ?.replace(/-[\d.]+$/, "")
+        // all => replace with 1
+        ?.replace("all", "1")
+
+      const browserResult = BrowserSchema.safeParse(rawBrowser)
+      const versionResult = VersionSchema.safeParse(rawVersionNormalized)
+
+      if (!browserResult.success || !versionResult.success) {
+        return
+      }
+
+      const { data: browser } = browserResult
+      const { data: version } = versionResult
+
+      const esbuildTarget = BrowserslistEsbuildMapping[browser]
+
+      if (!esbuildTarget) {
+        return
+      }
+
+      return { target: esbuildTarget, version }
+    })
+    .filter(Boolean)
+    .map(({ target, version }) => `${target}${version}`)
+
+  if (result.length === 0) {
+    throw new Error("Could not resolve any esbuild targets")
+  }
+
+  return result
+}
diff --git a/scripts/plugins/esbuild-css-extract.ts b/scripts/plugins/esbuild-css-extract.ts
new file mode 100644
index 0000000..f8b5bb6
--- /dev/null
+++ b/scripts/plugins/esbuild-css-extract.ts
@@ -0,0 +1,338 @@
+// import { relative, resolve } from "path";
+import type { PluginBuild } from "esbuild"
+import type * as babel from "@babel/core"
+import type { NodePath, types } from "@babel/core"
+import { expression } from "@babel/template"
+import hash from "@emotion/hash"
+import { compile, serialize, stringify } from "stylis"
+import { dropRightWhile } from "lodash"
+
+const NS = "extract-css"
+
+const runtimeArgs = ["Tag", "className", "vars"] as const
+// const root = resolve(__dirname, "../..");
+
+const shared = /* jsx */ `
+  ({ as = Tag, className: cls, style, ...rest }, ref) => {
+    return _jsx(as, {
+      ...rest,
+      ref,
+      style: vars != null ? getStyle({ ...style }, className, vars) : style,
+      className: cx([className, cls])
+    })
+  }
+`
+
+const runtime = /* jsx */ `
+  import { jsx } from "react/jsx-runtime";
+  import { forwardRef, memo } from "react";
+  import { cx } from "@emotion/css";
+
+  const supportsAs = new WeakSet();
+  const _jsx = jsx;
+
+  function getStyle(style, className, vars) {
+    for (let i = 0; i < vars.length; i++) {
+      const name = "--" + className + "-" + i;
+      const variable = vars[i];
+      if (variable !== null) {
+        style[name] = typeof variable === "function" ? variable(props) : variable;
+      }
+    }
+    return style;
+  }
+
+  export default function create(${runtimeArgs.join(", ")}) {
+    const Component = memo(
+      forwardRef(
+        supportsAs.has(Tag)
+          ? ${shared.replace("as, {", "Tag, { as,")}
+          : ${shared}
+      )
+    );
+
+    Component.withComponent = function (Tag) {
+      return create(${runtimeArgs.join(", ")});
+    };
+
+    supportsAs.add(Component);
+
+    return Component;
+  }
+`
+
+const flattenArgs = (args: { [key in (typeof runtimeArgs)[number]]: string }) =>
+  runtimeArgs.map(key => args[key]).join(", ")
+
+const styledComponent = expression({
+  // plugins: ["jsx"],
+  syntacticPlaceholders: true,
+})(
+  "%%create%%(" +
+    flattenArgs({
+      className: "%%className%%",
+      Tag: "%%tag%%",
+      vars: "%%vars%%",
+    }) +
+    ")",
+)
+
+const validParentTypes = new Set<types.Node["type"]>([
+  "ArrayExpression",
+  "BinaryExpression",
+  "CallExpression",
+  "JSXExpressionContainer",
+  "LogicalExpression",
+  "ObjectProperty",
+  "VariableDeclarator",
+])
+
+interface State extends babel.PluginPass {
+  styles: string[]
+  program: types.Program
+  runtimeHelper?: types.Identifier
+}
+
+export function extractCSS(build: PluginBuild, { className }: { className: string }) {
+  const RUNTIME = /^@extract-css\/runtime$/
+
+  build.onResolve({ filter: RUNTIME }, ({ path }) => ({ namespace: NS, path }))
+
+  build.onLoad({ filter: RUNTIME, namespace: NS }, () => ({
+    contents: runtime,
+    loader: "jsx",
+    resolveDir: __dirname,
+  }))
+
+  const plugin = ({ types: t }: typeof babel): babel.PluginObj<State> => {
+    const classNameMap = new WeakMap<types.Expression, string>()
+
+    function isImportedSpecifierFrom(path: NodePath, name: string, module: string) {
+      const declPath = path.scope.getBinding(name)!.path
+      return (
+        t.isImportSpecifier(declPath.node) &&
+        t.isImportDeclaration(declPath.parent) &&
+        declPath.parent.source.value === module
+      )
+    }
+
+    function isDefaultImportedFrom(path: NodePath, name: string, module: string) {
+      const binding = path.scope.getBinding(name)
+      if (!binding) return false
+      const declPath = binding.path
+      return (
+        t.isImportDefaultSpecifier(declPath.node) &&
+        t.isImportDeclaration(declPath.parent) &&
+        declPath.parent.source.value === module
+      )
+    }
+
+    function buildClassName(hash: string, componentName = "styled") {
+      return className.replaceAll("[hash]", hash).replaceAll("[name]", componentName)
+    }
+
+    function getComponentName(path: NodePath): string | undefined {
+      if (t.isVariableDeclarator(path.parent) && t.isIdentifier(path.parent.id)) {
+        return path.parent.id.name
+      }
+    }
+
+    const visitor: babel.Visitor<State> = {
+      TaggedTemplateExpression(path, state) {
+        const { styles } = state
+        const quasiExps = path
+          .get("quasi")
+          .get("expressions") as NodePath<types.Expression>[]
+
+        const { tag, quasi } = path.node
+
+        if (!validParentTypes.has(path.parent.type)) {
+          return
+        }
+
+        function extract(getPrefix: (className: string) => string) {
+          let bailout = false
+          const raws = quasi.quasis.map(q => q.value.raw)
+          const className = buildClassName(
+            hash(JSON.stringify(raws)),
+            getComponentName(path),
+          )
+          const skipInterpolations = new Set<number>()
+
+          const cssText = raws
+            .map((left, i) => {
+              if (bailout) {
+                return null!
+              }
+
+              if (i === raws.length - 1) {
+                return left
+              }
+
+              const exp = quasi.expressions[i]
+              const evaluated = quasiExps[i].evaluate()
+              if (evaluated.confident) {
+                if (
+                  typeof evaluated.value === "string" ||
+                  typeof evaluated.value === "number"
+                ) {
+                  skipInterpolations.add(i)
+                  return left + String(evaluated.value)
+                }
+              }
+
+              if (t.isIdentifier(exp)) {
+                const binding = path.scope.getBinding(exp.name)
+                if (binding) {
+                  const { node } = binding.path
+                  if (t.isVariableDeclarator(node)) {
+                    const cls = classNameMap.get(node.init!)
+                    if (cls) {
+                      skipInterpolations.add(i)
+                      return left + cls
+                    }
+                    if (t.isStringLiteral(node.init)) {
+                      skipInterpolations.add(i)
+                      return left + node.init.value
+                    }
+                  }
+
+                  bailout = true
+                }
+              } else if (t.isStringLiteral(exp)) {
+                skipInterpolations.add(i)
+                return left + exp.value
+              }
+
+              return `${left}var(--${className}-${i})`
+            })
+            .join("")
+
+          const compiled = compile(`${getPrefix(className)}{${cssText}}}`)
+
+          return {
+            className,
+            skipInterpolations,
+            bailout,
+            style: serialize(compiled, stringify),
+          }
+        }
+
+        function processStyled(tag: types.Expression) {
+          const { className, skipInterpolations, style, bailout } = extract(c => `.${c}`)
+          if (bailout) {
+            return
+          }
+
+          styles.push(style)
+
+          if (!state.runtimeHelper) {
+            state.runtimeHelper = path.scope.generateUidIdentifier("create")
+            state.program.body.unshift(
+              t.importDeclaration(
+                [t.importDefaultSpecifier(state.runtimeHelper)],
+                t.stringLiteral("@extract-css/runtime"),
+              ),
+            )
+          }
+
+          const fn = styledComponent({
+            create: state.runtimeHelper,
+            className: t.stringLiteral(className),
+            tag:
+              t.isIdentifier(tag) && /^[a-z]/.test(tag.name)
+                ? t.stringLiteral(tag.name)
+                : tag,
+            vars: quasi.expressions.length
+              ? t.arrayExpression(
+                  dropRightWhile(
+                    quasi.expressions.map((e, i) =>
+                      skipInterpolations.has(i)
+                        ? t.nullLiteral()
+                        : (e as types.Expression),
+                    ),
+                    n => t.isNullLiteral(n),
+                  ),
+                )
+              : t.nullLiteral(),
+          })
+          classNameMap.set(fn, className)
+          const [newPath] = path.replaceWith(fn)
+          newPath.addComment("leading", " @__PURE__ ")
+        }
+
+        if (t.isIdentifier(tag) && tag.name === "keyframes") {
+          if (!isImportedSpecifierFrom(path, tag.name, "@emotion/css")) {
+            return
+          }
+
+          const { className, style, bailout } = extract(c => `@keyframes ${c}`)
+          if (bailout) {
+            return
+          }
+          styles.push(style)
+          path.replaceWith(t.stringLiteral(className))
+        } else if (t.isIdentifier(tag) && tag.name === "css") {
+          if (!isImportedSpecifierFrom(path, tag.name, "@emotion/css")) {
+            return
+          }
+
+          const { className, style, bailout } = extract(c => `.${c}`)
+          if (bailout) {
+            return
+          }
+          styles.push(style)
+          path.replaceWith(t.stringLiteral(className))
+        } else if (
+          t.isMemberExpression(tag) &&
+          t.isIdentifier(tag.object, { name: "styled" }) &&
+          !t.isPrivateName(tag.property)
+        ) {
+          if (!isDefaultImportedFrom(path, tag.object.name, "@emotion/styled")) {
+            return
+          }
+          processStyled(tag.property)
+        } else if (
+          t.isCallExpression(tag) &&
+          t.isIdentifier(tag.callee, { name: "styled" }) &&
+          tag.arguments.length === 1 &&
+          t.isExpression(tag.arguments[0])
+        ) {
+          if (!isDefaultImportedFrom(path, tag.callee.name, "@emotion/styled")) {
+            return
+          }
+          processStyled(tag.arguments[0])
+        }
+      },
+    }
+
+    return {
+      name: "plugin",
+      visitor: {
+        Program: {
+          enter(program, state) {
+            state.styles = []
+            state.program = program.node
+          },
+          exit(program, state) {
+            program.traverse(visitor, state)
+
+            if (state.styles.length) {
+              const css =
+                // `/*./${relative(root, state.filename!)}*/` +
+                state.styles.join("\n")
+              program.node.body.unshift(
+                t.importDeclaration(
+                  [],
+                  t.stringLiteral(`data:text/css,${encodeURI(css)}`),
+                ),
+              )
+            }
+          },
+        },
+      },
+    }
+  }
+
+  return plugin
+}
diff --git a/scripts/plugins/esbuild-css-modules.ts b/scripts/plugins/esbuild-css-modules.ts
new file mode 100644
index 0000000..e876f9d
--- /dev/null
+++ b/scripts/plugins/esbuild-css-modules.ts
@@ -0,0 +1,92 @@
+import { relative, resolve } from "path"
+import { promises as fs } from "fs"
+import type { Plugin } from "esbuild"
+import postcss from "postcss"
+// @ts-expect-error
+import postcssSass from "@csstools/postcss-sass"
+import cssModules from "postcss-modules"
+
+type Options = Parameters<typeof cssModules>[0]
+
+const PLUGIN_NAME = "esbuild-css-modules"
+
+async function buildCSSModule(cssFullPath: string, options: Options) {
+  options = {
+    localsConvention: "camelCaseOnly",
+    ...options,
+  }
+  const source = await fs.readFile(cssFullPath)
+
+  let classNames = {}
+  const { css } = await postcss([
+    postcssSass(),
+    cssModules({
+      getJSON(_, json) {
+        classNames = json
+        return classNames
+      },
+      ...options,
+    }),
+  ]).process(source, {
+    from: cssFullPath,
+    map: false,
+  })
+
+  return {
+    css,
+    classNames,
+  }
+}
+
+const srcDir = resolve(__dirname, "../../src")
+
+const plugin = (options: Options = {}): Plugin => ({
+  name: PLUGIN_NAME,
+  async setup(build) {
+    const memfs = new Map<string, string>()
+    const FS_NAMESPACE = PLUGIN_NAME + "-fs"
+
+    build.onResolve({ filter: /\.modules?\.s?css$/, namespace: "file" }, async args => {
+      const res = await build.resolve(args.path, {
+        kind: "import-statement",
+        resolveDir: args.resolveDir,
+      })
+
+      // This is just the unique ID for this CSS module. We use a relative path to make it easier to debug.
+      const path = relative(srcDir, res.path)
+
+      return {
+        path,
+        namespace: PLUGIN_NAME,
+        pluginData: {
+          realPath: res.path,
+        },
+      }
+    })
+
+    build.onResolve({ filter: /^@css-modules\/.*/ }, ({ path }) => ({
+      path,
+      namespace: FS_NAMESPACE,
+    }))
+
+    build.onLoad({ filter: /./, namespace: FS_NAMESPACE }, ({ path }) => ({
+      contents: memfs.get(path)!,
+      loader: "css",
+    }))
+
+    build.onLoad({ filter: /./, namespace: PLUGIN_NAME }, async args => {
+      const tmpFilePath = "@css-modules/" + args.path
+      const { classNames, css } = await buildCSSModule(args.pluginData.realPath, options)
+      memfs.set(tmpFilePath, css)
+
+      return {
+        contents:
+          `import ${JSON.stringify(tmpFilePath)};\n` +
+          `module.exports = ${JSON.stringify(classNames)};`,
+        loader: "js",
+      }
+    })
+  },
+})
+
+export { plugin as cssModules }
diff --git a/scripts/plugins/esbuild-external-dep.ts b/scripts/plugins/esbuild-external-dep.ts
new file mode 100644
index 0000000..ce164c4
--- /dev/null
+++ b/scripts/plugins/esbuild-external-dep.ts
@@ -0,0 +1,14 @@
+import type * as esbuild from "esbuild"
+
+export const externalDep = (externals: string[]): esbuild.Plugin => ({
+  name: "externalDep",
+  setup(build) {
+    for (const module of externals) {
+      const resolved: esbuild.OnResolveResult = {
+        path: `/vendor/${module}/index.js`,
+        external: true,
+      }
+      build.onResolve({ filter: RegExp(`^${module}$`) }, () => resolved)
+    }
+  },
+})
diff --git a/scripts/plugins/esbuild-monaco-global.ts b/scripts/plugins/esbuild-monaco-global.ts
new file mode 100644
index 0000000..dd501ca
--- /dev/null
+++ b/scripts/plugins/esbuild-monaco-global.ts
@@ -0,0 +1 @@
+module.exports = globalThis.monaco
diff --git a/scripts/plugins/esbuild-string-import.ts b/scripts/plugins/esbuild-string-import.ts
new file mode 100644
index 0000000..1bac414
--- /dev/null
+++ b/scripts/plugins/esbuild-string-import.ts
@@ -0,0 +1,32 @@
+import { dirname } from "path"
+import { promises as fs } from "fs"
+import * as esbuild from "esbuild"
+
+export const stringImport = (): esbuild.Plugin => ({
+  name: "stringImport",
+  setup(build) {
+    build.onResolve({ filter: /\?string$/ }, async ({ path, importer }) => {
+      const resolved = await build.resolve(path.replace(/\?string$/, ""), {
+        kind: "import-statement",
+        importer,
+        resolveDir: dirname(importer),
+      })
+
+      return {
+        namespace: stringImport.name,
+        path: resolved.path,
+      }
+    })
+
+    build.onLoad({ filter: /.*/, namespace: stringImport.name }, async ({ path }) => {
+      let code = await fs.readFile(path, "utf-8")
+      if (build.initialOptions.minify && path.endsWith(".css")) {
+        ;({ code } = await esbuild.transform(code, { loader: "css", minify: true }))
+      }
+      return {
+        contents: code,
+        loader: "text",
+      }
+    })
+  },
+})
diff --git a/scripts/plugins/esbuild-yaml.ts b/scripts/plugins/esbuild-yaml.ts
new file mode 100644
index 0000000..5c7ce0f
--- /dev/null
+++ b/scripts/plugins/esbuild-yaml.ts
@@ -0,0 +1,42 @@
+// MIT License
+// Copyright (c) 2021 Marton Lederer
+// https://github.com/martonlederer/esbuild-plugin-yaml/tree/d8d14d18c999f6507e906a7015ace0c991b507b4
+import { isAbsolute, join } from "path"
+import { TextDecoder } from "util"
+import { promises as fs } from "fs"
+import type { Plugin } from "esbuild"
+import type { LoadOptions } from "js-yaml"
+import yaml from "js-yaml"
+
+interface YamlPluginOptions {
+  loadOptions?: LoadOptions
+}
+
+export const yamlPlugin = (options: YamlPluginOptions = {}): Plugin => ({
+  name: "yaml",
+  setup(build) {
+    // resolve .yaml and .yml files
+    build.onResolve({ filter: /\.(yml|yaml)$/ }, ({ path, resolveDir }) => {
+      if (resolveDir === "") return
+
+      return {
+        path: isAbsolute(path) ? path : join(resolveDir, path),
+        namespace: "yaml",
+      }
+    })
+
+    // load files with "yaml" namespace
+    build.onLoad({ filter: /.*/, namespace: "yaml" }, async ({ path }) => {
+      const yamlContent = await fs.readFile(path)
+      const parsed = yaml.load(
+        new TextDecoder().decode(yamlContent),
+        options?.loadOptions,
+      ) as any
+
+      return {
+        contents: JSON.stringify(parsed),
+        loader: "json",
+      }
+    })
+  },
+})
diff --git a/scripts/utils.ts b/scripts/utils.ts
new file mode 100644
index 0000000..335377d
--- /dev/null
+++ b/scripts/utils.ts
@@ -0,0 +1,89 @@
+import fs from "fs"
+import { extname } from "path"
+import { format } from "prettier"
+
+export function file(extension: string, content = "") {
+  const path = `./.${(Date.now() - 1677e9).toString(36)}${extension}`
+  fs.writeFileSync(path, content)
+
+  process.on("SIGINT", () => fs.unlinkSync(path))
+
+  return {
+    path,
+    rm: () => fs.unlinkSync(path),
+  }
+}
+
+file.js = (content?: string) => file(".js", content)
+
+export function map<T, R>(list: T[], fn: (item: T, index: number) => Promise<R>) {
+  return Promise.all(list.map(fn))
+}
+
+/**
+ * Write a file with Prettier formatting.
+ */
+export async function writeFormatted(path: string, content: string) {
+  const ext = extname(path)
+  const formatted = await format(content, {
+    parser: ext === ".ts" ? "babel-ts" : ext === ".js" ? "babel" : undefined,
+  })
+  return fs.promises.writeFile(path, formatted)
+}
+
+// https://github.com/nathanbabcock/picocolors-browser/tree/d98747d1e7dd58390044ff0696b6d10995a94de3
+// ISC License. Copyright (c) 2021 Alexey Raspopov, Kostiantyn Denysov, Anton Verinov
+export namespace c {
+  const enabled = !("NO_COLOR" in process.env)
+
+  const formatter = (open: string, close: string, replace = open) =>
+    enabled
+      ? (input: number | string) => {
+          const string = "" + input
+          const index = string.indexOf(close, open.length)
+          return index !== -1
+            ? open + replaceClose(string, close, replace, index) + close
+            : open + string + close
+        }
+      : String
+
+  function replaceClose(
+    string: string,
+    close: string,
+    replace: string,
+    index: number,
+  ): string {
+    const start = string.substring(0, index) + replace
+    const end = string.substring(index + close.length)
+    const nextIndex = end.indexOf(close)
+    return nextIndex !== -1
+      ? start + replaceClose(end, close, replace, nextIndex)
+      : start + end
+  }
+
+  export const reset = enabled ? (s: string) => `\x1b[0m${s}\x1b[0m` : String
+  export const bold = formatter("\x1b[1m", "\x1b[22m", "\x1b[22m\x1b[1m")
+  export const dim = formatter("\x1b[2m", "\x1b[22m", "\x1b[22m\x1b[2m")
+  export const italic = formatter("\x1b[3m", "\x1b[23m")
+  export const underline = formatter("\x1b[4m", "\x1b[24m")
+  export const inverse = formatter("\x1b[7m", "\x1b[27m")
+  export const hidden = formatter("\x1b[8m", "\x1b[28m")
+  export const strikethrough = formatter("\x1b[9m", "\x1b[29m")
+  export const black = formatter("\x1b[30m", "\x1b[39m")
+  export const red = formatter("\x1b[31m", "\x1b[39m")
+  export const green = formatter("\x1b[32m", "\x1b[39m")
+  export const yellow = formatter("\x1b[33m", "\x1b[39m")
+  export const blue = formatter("\x1b[34m", "\x1b[39m")
+  export const magenta = formatter("\x1b[35m", "\x1b[39m")
+  export const cyan = formatter("\x1b[36m", "\x1b[39m")
+  export const white = formatter("\x1b[37m", "\x1b[39m")
+  export const gray = formatter("\x1b[90m", "\x1b[39m")
+  export const bgBlack = formatter("\x1b[40m", "\x1b[49m")
+  export const bgRed = formatter("\x1b[41m", "\x1b[49m")
+  export const bgGreen = formatter("\x1b[42m", "\x1b[49m")
+  export const bgYellow = formatter("\x1b[43m", "\x1b[49m")
+  export const bgBlue = formatter("\x1b[44m", "\x1b[49m")
+  export const bgMagenta = formatter("\x1b[45m", "\x1b[49m")
+  export const bgCyan = formatter("\x1b[46m", "\x1b[49m")
+  export const bgWhite = formatter("\x1b[47m", "\x1b[49m")
+}
diff --git a/src/background/compiler.ts b/src/background/compiler.ts
new file mode 100644
index 0000000..41f19a1
--- /dev/null
+++ b/src/background/compiler.ts
@@ -0,0 +1,89 @@
+/* eslint-disable @typescript-eslint/require-await */
+/* eslint-disable @typescript-eslint/no-extraneous-class */
+/* eslint-disable class-methods-use-this */
+import sass, { type OutputStyle } from "sass"
+import UAParser from "ua-parser-js"
+import { expose } from "comlink"
+
+const parser = new UAParser(navigator.userAgent)
+const quote = JSON.stringify
+
+const modules = Object.entries({
+  navigator: () => /* scss */ `
+    $browser: ${quote(parser.getBrowser().name)};
+    $platform: ${quote(navigator.userAgentData?.platform)};
+    $userAgent: ${quote(navigator.userAgent)};
+    $language: ${quote(navigator.language)};
+  `,
+}).map(([key, value]) => ({
+  key,
+  url: new URL(`sass://${key}`),
+  module: {
+    syntax: "scss",
+    get contents() {
+      return value()
+    },
+  } as sass.ImporterResult,
+}))
+
+@expose
+export class Compiler {
+  static async compileSASS(data: string, outputStyle: OutputStyle): Promise<string> {
+    try {
+      let { css } = sass.compileString(data, {
+        style: outputStyle,
+        importers: [
+          {
+            canonicalize: url => modules.find(m => m.key === url)?.url ?? null,
+            load: url => modules.find(m => m.url.href === url.href)?.module ?? null,
+          },
+        ],
+      })
+      // https://github.com/sass/dart-sass/issues/472
+      if (css.charCodeAt(0) === 0xfeff) {
+        css = css.slice(1)
+      }
+      return css
+    } catch (e) {
+      if (process.env.NODE_ENV === "development") {
+        console.log(data)
+        console.error(e.stack)
+      }
+      Object.defineProperty(e, "name", {
+        enumerable: true,
+        value: e.name || "Error",
+      })
+      throw clone(e)
+    }
+  }
+}
+
+function clone(e: any): any {
+  const keys = Reflect.ownKeys(e).concat(Reflect.ownKeys(Object.getPrototypeOf(e)))
+  return Object.fromEntries(
+    keys
+      .map(key => [key, e[key]])
+      .filter(([key, value]) => !key.startsWith("_") && typeof value !== "function")
+      .map(([key, value]) => [
+        key,
+        typeof value === "object" && value != null ? clone(value) : value,
+      ]),
+  )
+}
+
+interface Brand {
+  readonly brand: string
+  readonly version: string
+}
+
+interface NavigatorUAData {
+  readonly brands: Brand[]
+  readonly mobile: boolean
+  readonly platform: string
+}
+
+declare global {
+  interface Navigator {
+    readonly userAgentData: NavigatorUAData
+  }
+}
diff --git a/src/background/compilerBridge.ts b/src/background/compilerBridge.ts
new file mode 100644
index 0000000..6e2afa1
--- /dev/null
+++ b/src/background/compilerBridge.ts
@@ -0,0 +1,33 @@
+import { wrap } from "comlink"
+import { LRUCache } from "lru-cache"
+import type { OutputStyle } from "sass"
+import type { Compiler } from "./compiler"
+
+const worker = wrap<typeof Compiler>(
+  new Worker(new URL("./compiler/compiler.js", import.meta.url).href, { type: "module" }),
+)
+
+const lru = new LRUCache<string, string>({ max: 450 })
+
+export async function compileSASS(
+  source: string,
+  outputStyle: OutputStyle = "compressed",
+  insertCache = true,
+): Promise<string> {
+  if (lru.has(source)) {
+    return lru.get(source)!
+  }
+
+  try {
+    const result = await worker.compileSASS(source, outputStyle)
+    if (insertCache) {
+      lru.set(source, result)
+    }
+    return result
+  } catch (e) {
+    if (process.env.NODE_ENV === "development") {
+      console.error(e.message)
+    }
+    throw e
+  }
+}
diff --git a/src/background/couchdb.ts b/src/background/couchdb.ts
new file mode 100644
index 0000000..16849fc
--- /dev/null
+++ b/src/background/couchdb.ts
@@ -0,0 +1,66 @@
+import PouchDB from "pouchdb-browser"
+import { LAST_SYNC, PASSWORD_KEY, USERNAME_KEY } from "~/shared/constants"
+import type { File } from "~/shared/models"
+
+export const localDb = new PouchDB<File>("styles")
+export let remoteDb: PouchDB.Database<File> | undefined
+let sync: PouchDB.Replication.Sync<File>
+
+export function login(username: string, password: string) {
+  logout()
+
+  remoteDb = new PouchDB<File>(process.env.NEXT_PUBLIC_SERVER_URL, {
+    auth: { username, password },
+  })
+  sync = localDb.sync(remoteDb, {
+    live: true,
+    retry: true,
+  })
+
+  void sync.on
+
+  void sync.on("change", () => {
+    localStorage.setItem(LAST_SYNC, new Date().toISOString())
+  })
+
+  return remoteDb
+}
+
+export function logout() {
+  if (remoteDb) {
+    sync!.cancel()
+    remoteDb = undefined
+  }
+}
+
+const username = localStorage.getItem(USERNAME_KEY)
+const password = localStorage.getItem(PASSWORD_KEY)
+
+if (username && password) {
+  void login(username, password)
+}
+
+export async function getDocs() {
+  const docs = await localDb.allDocs({ include_docs: true })
+  return docs.rows.map(row => row.doc!)
+}
+
+export async function deleteDoc(id: string) {
+  const doc = await localDb.get(id)
+  await localDb.remove(doc)
+}
+
+export async function exists(id: string) {
+  try {
+    await localDb.get(id)
+    return true
+  } catch (e) {
+    if ((e as Error).name === "not_found") {
+      return false
+    } else {
+      throw e
+    }
+  }
+}
+
+Object.assign(globalThis, { localDb, remoteDb })
diff --git a/src/background/graphql/.eslintrc b/src/background/graphql/.eslintrc
new file mode 100644
index 0000000..2a2773f
--- /dev/null
+++ b/src/background/graphql/.eslintrc
@@ -0,0 +1,7 @@
+{
+  "extends": "../../../.eslintrc",
+  "rules": {
+    "class-methods-use-this": "off",
+    "@typescript-eslint/consistent-type-imports": "off"
+  }
+}
diff --git a/src/background/graphql/api.ts b/src/background/graphql/api.ts
new file mode 100644
index 0000000..1ed53b5
--- /dev/null
+++ b/src/background/graphql/api.ts
@@ -0,0 +1,39 @@
+import type { TypedDocumentNode } from "@apollo/client"
+import { type DocumentNode, type ExecutionResult, execute, graphql } from "graphql"
+import { getSchema } from "./schema"
+
+const schema = getSchema()
+
+class GraphQLError extends Error {}
+
+export async function query<T extends TypedDocumentNode<any, any>>(
+  source: string,
+  variableValues: T extends TypedDocumentNode<any, infer K> ? K : never = {} as any,
+): Promise<ExecutionResult<T extends TypedDocumentNode<infer K, any> ? K : never>> {
+  const result = await graphql({ schema, source, variableValues })
+  return result as any
+}
+
+async function executeNode<T extends TypedDocumentNode>(
+  document: DocumentNode,
+  variableValues: T extends TypedDocumentNode<any, infer K> ? K : never = {} as any,
+): Promise<ExecutionResult<T extends TypedDocumentNode<infer K, any> ? K : never>> {
+  const result = await execute({ schema, document, variableValues })
+  return result as any
+}
+export { executeNode as execute }
+
+export async function queryOrThrow<T extends TypedDocumentNode<any, any>>(
+  source: string,
+  variableValues: T extends TypedDocumentNode<any, infer K> ? K : never,
+): Promise<T extends TypedDocumentNode<infer K, any> ? K : never> {
+  const result = await graphql({ schema, source, variableValues })
+  if (result.data) {
+    return result.data as any
+  } else {
+    if (process.env.NODE_ENV === "development") {
+      console.error(result.errors)
+    }
+    throw new GraphQLError(result.errors?.[0].message)
+  }
+}
diff --git a/src/background/graphql/helpers.ts b/src/background/graphql/helpers.ts
new file mode 100644
index 0000000..b5c696b
--- /dev/null
+++ b/src/background/graphql/helpers.ts
@@ -0,0 +1,14 @@
+/* eslint-disable @typescript-eslint/no-unused-vars, class-methods-use-this, @typescript-eslint/consistent-type-imports */
+import type { ClassType } from "@aet/gql-tools/macro"
+import { AutoObjectType } from "@aet/gql-tools/macro"
+
+export function PaginatedResponse<_TItem extends object>(_TItem: ClassType<_TItem>) {
+  @AutoObjectType()
+  abstract class PaginatedResponseClass {
+    items!: _TItem[]
+    total!: number
+    hasMore!: boolean
+  }
+
+  return PaginatedResponseClass
+}
diff --git a/src/background/graphql/resolvers/CloudResolver.ts b/src/background/graphql/resolvers/CloudResolver.ts
new file mode 100644
index 0000000..d76495c
--- /dev/null
+++ b/src/background/graphql/resolvers/CloudResolver.ts
@@ -0,0 +1,64 @@
+import { Arg, AutoObjectType, Int, Mutation, Query, Resolver } from "@aet/gql-tools/macro"
+import { login, logout, remoteDb } from "../../couchdb"
+
+@AutoObjectType()
+class DatabaseInfo {
+  dbName!: string
+  diskFormatVersion?: Int
+  docCount!: Int
+  docDeleteCount?: Int
+  idbAttachmentFormat?: string
+  instantStartTime?: string
+  purgeSeq?: string
+  sizes?: DatabaseSize
+  sqlitePlugin?: boolean
+  updateSeq?: string
+}
+
+@AutoObjectType()
+class DatabaseSize {
+  active!: Int
+  external!: Int
+  file!: Int
+}
+
+@Resolver()
+export class CloudResolver {
+  @Query()
+  async remoteInfo(): Promise<DatabaseInfo | undefined> {
+    if (!remoteDb) return
+
+    try {
+      const info = await remoteDb.info()
+      return {
+        dbName: info.db_name,
+        diskFormatVersion: (info as any).disk_format_version,
+        docCount: info.doc_count,
+        docDeleteCount: (info as any).doc_del_count,
+        idbAttachmentFormat: info.idb_attachment_format,
+        instantStartTime: (info as any).instant_start_time,
+        purgeSeq: (info as any).purge_seq,
+        sizes: (info as any).sizes,
+        sqlitePlugin: info.sqlite_plugin,
+        updateSeq: String(info.update_seq),
+      }
+    } catch {}
+  }
+
+  @Mutation()
+  async login(@Arg() username: string, @Arg() password: string): Promise<boolean> {
+    const db = login(username, password)
+    try {
+      await db.info()
+      return true
+    } catch {
+      return false
+    }
+  }
+
+  @Mutation()
+  logout(): boolean {
+    logout()
+    return true
+  }
+}
diff --git a/src/background/graphql/resolvers/DatabaseResolver.ts b/src/background/graphql/resolvers/DatabaseResolver.ts
new file mode 100644
index 0000000..0b89c2f
--- /dev/null
+++ b/src/background/graphql/resolvers/DatabaseResolver.ts
@@ -0,0 +1,64 @@
+import { Arg, Mutation, Query, Resolver } from "@aet/gql-tools/macro"
+import UAParser from "ua-parser-js"
+import { ClientMetadata, InputExportedV1 } from "~/shared/models/index"
+import { getDocs, localDb } from "../../couchdb"
+import { PreferencesCache } from "./PreferencesResolver"
+
+/**
+ * Handles exporting, importing and synchronizing the database and
+ * preferences.
+ */
+@Resolver()
+export class DatabaseResolver {
+  @Query()
+  async export(): Promise<Record<string, any>> {
+    const { clientName, ...preferences } = PreferencesCache.cache.get()
+    const files: InputExportedV1 = {
+      schema: 1,
+      files: await getDocs(),
+      source: clientName || getDefaultClientName(),
+      preferences,
+    }
+    return files
+  }
+
+  @Mutation()
+  async restore(@Arg() backup: InputExportedV1): Promise<boolean> {
+    const { schema, files, preferences } = backup
+    switch (schema) {
+      case 1:
+        await Promise.all(
+          files.map(file =>
+            localDb.put({
+              _id: file.id,
+              ...file,
+              createdAt: new Date(file.createdAt).valueOf(),
+              updatedAt: new Date(file.updatedAt).valueOf(),
+              state: file.state ?? "None",
+            }),
+          ),
+        )
+        PreferencesCache.cache.set(preferences)
+        return true
+
+      default:
+        throw new Error("Unknown backup schema")
+    }
+  }
+
+  @Query()
+  clientMetadata(): ClientMetadata {
+    const parser = new UAParser(navigator.userAgent)
+    return {
+      browser: parser.getBrowser().name || "Unknown",
+      os: parser.getOS().name || "Unknown",
+    }
+  }
+}
+
+function getDefaultClientName() {
+  const parser = new UAParser(navigator.userAgent)
+  const browser = parser.getBrowser().name || "Unknown"
+  const os = parser.getOS().name || "Unknown"
+  return `${os} ${browser}`
+}
diff --git a/src/background/graphql/resolvers/FileResolver.ts b/src/background/graphql/resolvers/FileResolver.ts
new file mode 100644
index 0000000..fc5a69a
--- /dev/null
+++ b/src/background/graphql/resolvers/FileResolver.ts
@@ -0,0 +1,226 @@
+import {
+  Arg,
+  Args,
+  FieldResolver,
+  ID,
+  Int,
+  Mutation,
+  Query,
+  Resolver,
+  Root,
+} from "@aet/gql-tools/macro"
+import browser from "webextension-polyfill"
+import { customAlphabet } from "nanoid/non-secure"
+import { File, FileFilter, FindFilterArgs, PartialFileInput } from "~/shared/models/index"
+import { FileSortBy, FileState, fileMatches } from "~/shared/models/utils"
+import { statistics } from "../../idb"
+import { deleteDoc, exists, getDocs, localDb } from "../../couchdb"
+import { GLOBAL_STYLE_ID, isGlobalStyle } from "~/shared"
+import { broadcast } from "../utils"
+import { guessFileLanguage } from "../utils/guessLanguage"
+import { PreferencesCache } from "./PreferencesResolver"
+import { isFileLoggingDisabled } from "./StatisticsResolver"
+
+@Resolver(() => File)
+export class FileResolver {
+  private readonly nanoId = customAlphabet("1234567890abcdef", 24)
+
+  @Query()
+  async file(@Arg() id: ID): Promise<File> {
+    return await localDb.get(id)
+  }
+
+  private static fileMatches(file: File, filter: FileFilter) {
+    // To add a filter: (filterExists && !filterMatchesFile) ||
+    return !(
+      (filter.enabled != null && file.enabled !== filter.enabled) ||
+      (filter.tags && !filter.tags.some(tag => file.tags.includes(tag))) ||
+      (filter.url != null && !fileMatches(file, filter.url)) ||
+      (filter.id?.length && !filter.id.includes(file.id)) ||
+      (filter.state != null && file.state !== filter.state) ||
+      (filter.isGlobal != null && isGlobalStyle(file) !== filter.isGlobal)
+    )
+  }
+
+  @Query()
+  async files(
+    @Args() { filter, take, sortBy, logQuery }: FindFilterArgs,
+  ): Promise<File[]> {
+    let files = await getDocs()
+
+    if (filter) {
+      files = files.filter(file => FileResolver.fileMatches(file, filter))
+    }
+
+    if (take) {
+      files = files.slice(0, take)
+    }
+
+    switch (sortBy) {
+      case FileSortBy.Name:
+        files = files.sort((a, b) => a.name.localeCompare(b.name))
+        break
+      case FileSortBy.UpdatedAt:
+        files = files.sort((a, b) => b.updatedAt - a.updatedAt)
+        break
+
+      default:
+      // noop;
+    }
+
+    if (PreferencesCache.cache.get().recordUsageData && logQuery) {
+      files
+        .filter(file => !isFileLoggingDisabled(file.id))
+        .forEach(file => {
+          void statistics.set(file.id, { lastRequested: new Date() })
+        })
+    }
+
+    return files
+  }
+
+  async #newFile(input: PartialFileInput): Promise<File> {
+    const id = this.nanoId()
+    const created = new Date()
+    const file = new File({
+      id,
+      name: input.name! || browser.i18n.getMessage("untitled"),
+      mimeType: "text/x-scss",
+      enabled: true,
+      tags: [],
+      createdAt: created,
+      updatedAt: created,
+      rules: [],
+      hidden: false,
+      state: FileState.None,
+      sections: [
+        {
+          id: this.nanoId(),
+          name: "",
+          code: "",
+          enabled: true,
+        },
+      ],
+      ...input,
+    })
+    await localDb.put({
+      _id: id,
+      ...file,
+    })
+    return file
+  }
+
+  @Mutation()
+  async newFile(@Arg() input: PartialFileInput): Promise<File> {
+    const file = await this.#newFile(input)
+    void broadcast()
+    return file
+  }
+
+  @Mutation()
+  async createGlobalStyle(): Promise<File> {
+    if (await exists(GLOBAL_STYLE_ID)) {
+      throw new Error("Global style already exists")
+    }
+
+    const created = new Date()
+    const file = new File({
+      id: GLOBAL_STYLE_ID,
+      name: "__global__",
+      enabled: true,
+      mimeType: "text/x-scss",
+      tags: ["global"],
+      createdAt: created,
+      updatedAt: created,
+      rules: [],
+      hidden: false,
+      state: FileState.None,
+      sections: [
+        {
+          id: this.nanoId(),
+          name: "",
+          code: "",
+          enabled: true,
+        },
+      ],
+    })
+    await localDb.put({
+      _id: GLOBAL_STYLE_ID,
+      ...file,
+    })
+    void broadcast()
+    return file
+  }
+
+  @Mutation()
+  async newFiles(@Arg() inputs: PartialFileInput[]): Promise<File[]> {
+    const files = await Promise.all(inputs.map(input => this.newFile(input)))
+    void broadcast()
+    return files
+  }
+
+  @Mutation()
+  async deleteFile(@Arg() id: ID) {
+    await deleteDoc(id)
+    void broadcast()
+    return true
+  }
+
+  @Mutation()
+  async deleteFiles(@Arg() ids: ID[]) {
+    await Promise.all(ids.map(id => deleteDoc(id)))
+    void broadcast()
+    return true
+  }
+
+  @Mutation()
+  async setFile(@Arg() id: ID, @Arg() input: PartialFileInput): Promise<File> {
+    const file = await setFile(id, input)
+    void broadcast()
+    return file
+  }
+
+  @Mutation()
+  async setFiles(@Arg() ids: ID[], @Arg() input: PartialFileInput): Promise<File[]> {
+    const files = await Promise.all(ids.map(fileId => setFile(fileId, input)))
+    void broadcast()
+    return files
+  }
+
+  @Mutation()
+  async deleteAllFiles() {
+    await localDb.destroy()
+    void broadcast()
+    return true
+  }
+
+  @FieldResolver()
+  nameLanguage(@Root() file: File): string | undefined {
+    return guessFileLanguage(file)
+  }
+
+  @FieldResolver()
+  lastRequestedAt(@Root() file: File): Date | undefined {
+    return statistics.get(file.id)?.lastRequested
+  }
+
+  @FieldResolver()
+  size(@Root() file: File): Int {
+    return file.sections.reduce((acc, section) => acc + section.code.length, 0)
+  }
+}
+
+export async function setFile(id: ID, input: PartialFileInput): Promise<File> {
+  const existing = await localDb.get(id)!
+  const now = new Date()
+
+  const file = new File({
+    ...existing,
+    ...(input as Partial<File>),
+    updatedAt: now,
+  })
+
+  await localDb.put(file)
+
+  return file
+}
diff --git a/src/background/graphql/resolvers/FindResolver.ts b/src/background/graphql/resolvers/FindResolver.ts
new file mode 100644
index 0000000..17ca4ba
--- /dev/null
+++ b/src/background/graphql/resolvers/FindResolver.ts
@@ -0,0 +1,108 @@
+import { Arg, Query, Resolver } from "@aet/gql-tools/macro"
+import { Match } from "~/shared/models/index"
+import { getDocs } from "~/background/couchdb"
+
+@Resolver()
+export class FindResolver {
+  @Query()
+  async search(
+    @Arg() query: string,
+    @Arg() caseSensitive = false,
+    @Arg() regExp: boolean,
+  ): Promise<Match[]> {
+    if (!query) {
+      return []
+    }
+
+    if (regExp) {
+      return searchRegExp(query)
+    }
+
+    const files = await getDocs()
+    const matches: Match[] = []
+
+    const searchText = caseSensitive ? query : query.toLocaleUpperCase()
+
+    for (const file of files) {
+      const content = file.sections[0].code
+      let prevIndex: number | null | undefined
+
+      // https://stackoverflow.com/questions/69060325
+      const searchFrom = caseSensitive ? content : content.toLocaleUpperCase()
+
+      while (prevIndex !== null) {
+        if (matches.length > 100) {
+          return matches
+        }
+
+        const index = stripInvalid(
+          searchFrom.indexOf(searchText, prevIndex ? prevIndex + 1 : 0),
+        )
+        prevIndex = index
+        if (index == null) continue
+
+        const { line, start } = getLineAround(content, index)
+
+        matches.push({
+          file,
+          line,
+          index,
+          submatch: {
+            match: content.slice(index, index + searchText.length),
+            start: index - start,
+            end: index - start + query.length,
+          },
+        })
+        await (0 as any)
+      }
+    }
+
+    return matches
+  }
+}
+
+function stripInvalid(index: number) {
+  return index === -1 ? null : index
+}
+
+function getLineAround(text: string, index: number) {
+  const start = stripInvalid(text.lastIndexOf("\n", index)) ?? 0
+  const end = stripInvalid(text.indexOf("\n", index)) ?? text.length
+  return {
+    start,
+    line: text.substring(start, end),
+  }
+}
+
+async function searchRegExp(query: string): Promise<Match[]> {
+  const files = await getDocs()
+  const matches: Match[] = []
+  const regexp = new RegExp(query, "g")
+
+  for (const file of files) {
+    const content = file.sections[0].code
+    const prevIndex: number | null = null
+
+    while (prevIndex != null) {
+      for (const matched of content.matchAll(regexp)) {
+        if (matched.index == null) continue
+        const { index } = matched
+
+        const { line, start } = getLineAround(content, index)
+        matches.push({
+          file,
+          line,
+          index,
+          submatch: {
+            match: matched[0],
+            start: index - start,
+            end: index - start + matched[0].length,
+          },
+        })
+      }
+      await (0 as any)
+    }
+  }
+
+  return matches
+}
diff --git a/src/background/graphql/resolvers/PreferencesResolver.ts b/src/background/graphql/resolvers/PreferencesResolver.ts
new file mode 100644
index 0000000..7ec0e6a
--- /dev/null
+++ b/src/background/graphql/resolvers/PreferencesResolver.ts
@@ -0,0 +1,63 @@
+import { Arg, Mutation, Query, Resolver } from "@aet/gql-tools/macro"
+import { InputPreferences, Preferences, defaultPreferences } from "~/shared/models/index"
+import { broadcast } from "../utils"
+
+const PREFS_KEY = "preferences"
+
+@Resolver(() => Preferences)
+export class PreferencesResolver {
+  @Query()
+  preferences(): Preferences {
+    return PreferencesCache.cache.get()
+  }
+
+  @Mutation()
+  setPreferences(@Arg() preferences: InputPreferences): Preferences {
+    return PreferencesCache.cache.set(preferences)
+  }
+}
+
+export class PreferencesCache {
+  private data: Preferences
+  private static _instance: PreferencesCache
+
+  static get cache(): PreferencesCache {
+    return (this._instance ??= new PreferencesCache())
+  }
+
+  constructor() {
+    const text = localStorage.getItem(PREFS_KEY)!
+    const prefs = new Preferences({ ...defaultPreferences })
+    Object.assign(prefs, JSON.parse(text))
+    this.data = prefs
+  }
+
+  get(): Preferences {
+    return this.data
+  }
+
+  set(preferences: Partial<Preferences>): Preferences {
+    Object.assign(this.data, stripUndefined(preferences))
+    if ("enabled" in preferences) {
+      broadcast()
+    }
+    localStorage.setItem(PREFS_KEY, JSON.stringify(this.data))
+    return this.data
+  }
+}
+
+export function getPreference<K extends keyof Preferences>(
+  key: K,
+): Preferences[K] | undefined {
+  try {
+    const text = localStorage.getItem(PREFS_KEY)!
+    const prefs = JSON.parse(text)
+    return prefs[key]
+  } catch {}
+}
+
+function stripUndefined<T extends object>(obj: T): Partial<T> {
+  return Object.fromEntries(
+    Object.entries(obj).filter(([, value]) => value !== undefined),
+  ) as T
+}
diff --git a/src/background/graphql/resolvers/SectionResolver.ts b/src/background/graphql/resolvers/SectionResolver.ts
new file mode 100644
index 0000000..0b1bc10
--- /dev/null
+++ b/src/background/graphql/resolvers/SectionResolver.ts
@@ -0,0 +1,117 @@
+import {
+  Arg,
+  Args,
+  ArgsType,
+  Field,
+  FieldResolver,
+  Query,
+  Resolver,
+  Root,
+} from "@aet/gql-tools/macro"
+import { GraphQLError } from "graphql"
+import { Section } from "~/shared/models/index"
+import { compileSASS } from "../../compilerBridge"
+import { GLOBAL_STYLE_ID } from "~/shared"
+import { localDb } from "~/background/couchdb"
+
+@ArgsType()
+class CompileCode {
+  @Field() code!: string
+  @Field() includeGlobal!: boolean
+  @Field() compressed!: boolean
+  @Field() cache!: boolean
+}
+
+@Resolver(() => Section)
+export class SectionResolver {
+  @FieldResolver()
+  async compiledCode(@Root() section: Section, @Arg() cache = true): Promise<string> {
+    return this.compileCode({
+      code: section.code,
+      includeGlobal: true,
+      compressed: true,
+      cache,
+    })
+  }
+
+  @Query()
+  async compileCode(
+    @Args() { code, includeGlobal, compressed, cache }: CompileCode,
+  ): Promise<string> {
+    let prefix = ""
+    if (includeGlobal) {
+      const style = await localDb.get(GLOBAL_STYLE_ID)
+      const globalStyle =
+        style?.state === null && style?.enabled && style?.sections[0].code
+      prefix = globalStyle ? globalStyle + "\n" : ""
+    }
+
+    const source = prefix + code
+    try {
+      return await compileSASS(source, compressed ? "compressed" : "expanded", cache)
+    } catch (e) {
+      if (e?.name !== "Error") {
+        throw e
+      }
+
+      throw new GraphQLError(e.message, {
+        extensions: getErrorExtension(e as SassException),
+      })
+    }
+  }
+}
+
+export type ErrorExtension = ReturnType<typeof getErrorExtension>
+
+function getErrorExtension(e: SassException) {
+  return {
+    code: "BAD_USER_INPUT" as const,
+    span: {
+      start: {
+        line: e.span.start.line,
+        column: e.span.start.column,
+        offset: e.span.start.offset,
+      },
+      end: {
+        line: e.span.end.line,
+        column: e.span.end.column,
+        offset: e.span.end.offset,
+      },
+    },
+  }
+}
+
+interface SourceFile {
+  url: null
+  _cachedLine: null
+  _decodedChars: Uint32Array
+  _lineStarts: number[]
+}
+
+interface FileLocation {
+  file: SourceFile
+  offset: number
+  column: number
+  line: number
+}
+
+interface FileSpan {
+  _end: number
+  _file$_start: number
+  context: string
+  end: FileLocation
+  file: SourceFile
+  start: FileLocation
+  text: string
+  url: null
+}
+
+interface SassException extends Error {
+  _dartException: {
+    _span: FileSpan
+    _span_exception$_message: string
+  }
+  sassMessage: string
+  sassStack: string
+  span: FileSpan
+}
diff --git a/src/background/graphql/resolvers/StatisticsResolver.ts b/src/background/graphql/resolvers/StatisticsResolver.ts
new file mode 100644
index 0000000..8c43fa2
--- /dev/null
+++ b/src/background/graphql/resolvers/StatisticsResolver.ts
@@ -0,0 +1,31 @@
+import { Arg, FieldResolver, ID, Mutation, Resolver, Root } from "@aet/gql-tools/macro"
+import { statistics } from "../../idb"
+import { File } from "~/shared/models"
+
+@Resolver(() => File)
+export class StatisticsResolver {
+  @Mutation()
+  async toggleDisableLogging(@Arg() fileId: ID, @Arg() value: boolean) {
+    await statistics.update(fileId, data => ({ ...data, disableLogging: value }))
+    return true
+  }
+
+  @Mutation()
+  async resetUsageData(@Arg() fileId?: ID) {
+    if (fileId == null) {
+      await statistics.clear()
+    } else {
+      await statistics.update(fileId, data => ({ ...data, lastRequested: undefined }))
+    }
+    return true
+  }
+
+  @FieldResolver()
+  disabledLogging(@Root() file: File): boolean {
+    return isFileLoggingDisabled(file.id)
+  }
+}
+
+export function isFileLoggingDisabled(fileId: ID) {
+  return statistics.get(fileId)?.disableLogging || false
+}
diff --git a/src/background/graphql/resolvers/TagResolver.ts b/src/background/graphql/resolvers/TagResolver.ts
new file mode 100644
index 0000000..3ae453f
--- /dev/null
+++ b/src/background/graphql/resolvers/TagResolver.ts
@@ -0,0 +1,37 @@
+import { Arg, Mutation, Query, Resolver } from "@aet/gql-tools/macro"
+import { File } from "~/shared/models/index"
+import { getDocs } from "../../couchdb"
+import { setFile } from "./FileResolver"
+
+@Resolver()
+export class TagResolver {
+  @Query()
+  async tags(): Promise<string[]> {
+    const files = await getDocs()
+    return Array.from(new Set(files.flatMap(s => s.tags)))
+  }
+
+  @Mutation()
+  async deleteTag(@Arg() tag: string): Promise<File[]> {
+    return Promise.all(
+      (await getDocs())
+        .filter(file => file.tags.includes(tag))
+        .map(file => {
+          const tags = file.tags.filter(t => t !== tag)
+          return setFile(file.id, { tags })
+        }),
+    )
+  }
+
+  @Mutation()
+  async renameTag(@Arg() oldTag: string, @Arg() newTag: string): Promise<File[]> {
+    return Promise.all(
+      (await getDocs())
+        .filter(file => file.tags.includes(oldTag))
+        .map(file => {
+          const tags = file.tags.map(tag => (tag === oldTag ? newTag : tag))
+          return setFile(file.id, { tags })
+        }),
+    )
+  }
+}
diff --git a/src/background/graphql/schema.ts b/src/background/graphql/schema.ts
new file mode 100644
index 0000000..ae149c2
--- /dev/null
+++ b/src/background/graphql/schema.ts
@@ -0,0 +1,28 @@
+import "reflect-metadata"
+import type { GraphQLSchema } from "graphql"
+import { buildSchema } from "@aet/gql-tools/macro"
+import { FileResolver } from "./resolvers/FileResolver"
+import { SectionResolver } from "./resolvers/SectionResolver"
+import { FindResolver } from "./resolvers/FindResolver"
+import { PreferencesResolver } from "./resolvers/PreferencesResolver"
+import { DatabaseResolver } from "./resolvers/DatabaseResolver"
+import { TagResolver } from "./resolvers/TagResolver"
+import { StatisticsResolver } from "./resolvers/StatisticsResolver"
+import { CloudResolver } from "./resolvers/CloudResolver"
+
+export function getSchema(): GraphQLSchema {
+  return buildSchema({
+    validate: process.env.NODE_ENV !== "production",
+    disableInferringDefaultValues: true,
+    resolvers: [
+      DatabaseResolver,
+      FindResolver,
+      PreferencesResolver,
+      SectionResolver,
+      FileResolver,
+      TagResolver,
+      StatisticsResolver,
+      CloudResolver,
+    ],
+  })
+}
diff --git a/src/background/graphql/utils.ts b/src/background/graphql/utils.ts
new file mode 100644
index 0000000..337854c
--- /dev/null
+++ b/src/background/graphql/utils.ts
@@ -0,0 +1,12 @@
+import browser from "webextension-polyfill"
+import { debounce, flatMap } from "lodash"
+import { updateTabIcons } from "../update"
+
+export const broadcast = debounce(async () => {
+  const tabs = flatMap(
+    await browser.windows.getAll({ populate: true }),
+    window => window.tabs!,
+  )
+  tabs.forEach(tab => updateTabIcons({ ...tab, tabId: tab.id! }))
+  tabs.forEach(tab => browser.tabs.sendMessage(tab.id!, { method: "fileUpdated" }))
+}, 100)
diff --git a/src/background/graphql/utils/guessLanguage.ts b/src/background/graphql/utils/guessLanguage.ts
new file mode 100644
index 0000000..b352894
--- /dev/null
+++ b/src/background/graphql/utils/guessLanguage.ts
@@ -0,0 +1,71 @@
+import sc from "./lang-sc.json" assert { type: "json" }
+import shin from "./lang-shin.json" assert { type: "json" }
+import type { Rule } from "~/shared/models"
+import { RuleType } from "~/shared/models/enums.generated"
+
+const AZ = /^[A-Za-zÀ-ÖØ-öø-ÿ\d ]+$/
+
+// Handles Han unification font problems
+export function guessFileLanguage({ name, rules }: { name: string; rules: Rule[] }) {
+  const chars = name.split("")
+
+  // Fast path
+  if (AZ.test(name)) {
+    return
+  }
+
+  // Check if the name contains Japanese kana characters
+  if (
+    /\p{Script_Extensions=Kana}/u.test(name) ||
+    /\p{Script_Extensions=Hira}/u.test(name) ||
+    chars.some(c => shin.includes(c))
+  ) {
+    return "ja"
+  }
+
+  // Check if the name contains Korean hangul
+  if (/\p{Script_Extensions=Hang}/u.test(name)) {
+    return "ko"
+  }
+
+  // Check if the name contains Simplified Chinese characters
+  if (chars.some(c => sc.includes(c))) {
+    return "zh-CN"
+  }
+
+  const domains = rules
+    .map(r => {
+      try {
+        return r.type === RuleType.Domain
+          ? r.value
+          : r.type === RuleType.URL
+          ? new URL(r.value).hostname
+          : r.type === RuleType.URLPrefix
+          ? new URL(r.value).hostname
+          : null
+      } catch {
+        return null
+      }
+    })
+    .filter(Boolean)
+
+  // Check the domains for TLDs that correspond to a specific language
+  for (const domain of domains) {
+    if (domain.endsWith(".cn")) {
+      return "zh-CN"
+    }
+    if (domain.endsWith(".hk")) {
+      return "zh-HK"
+    }
+    if (domain.endsWith(".tw")) {
+      return "zh-TW"
+    }
+    if (domain.endsWith(".jp")) {
+      return "ja"
+    }
+  }
+
+  if (/\p{Script_Extensions=Hani}/u.test(name)) {
+    return "zh-TW"
+  }
+}
diff --git a/src/background/graphql/utils/lang-sc.json b/src/background/graphql/utils/lang-sc.json
new file mode 100644
index 0000000..44be8ab
--- /dev/null
+++ b/src/background/graphql/utils/lang-sc.json
@@ -0,0 +1,1634 @@
+[
+  "匀",
+  "吊",
+  "户",
+  "册",
+  "泛",
+  "丢",
+  "亘",
+  "凶",
+  "夫",
+  "咤",
+  "污",
+  "伫",
+  "别",
+  "占",
+  "吴",
+  "删",
+  "吕",
+  "兑",
+  "囱",
+  "夹",
+  "妆",
+  "决",
+  "冲",
+  "秃",
+  "灾",
+  "贝",
+  "车",
+  "迤",
+  "见",
+  "两",
+  "并",
+  "并",
+  "仑",
+  "亚",
+  "协",
+  "儿",
+  "恤",
+  "姗",
+  "佛",
+  "冈",
+  "东",
+  "抛",
+  "殁",
+  "况",
+  "卧",
+  "珏",
+  "纠",
+  "芈",
+  "轧",
+  "系",
+  "兖",
+  "侠",
+  "长",
+  "门",
+  "侣",
+  "克",
+  "则",
+  "劲",
+  "侄",
+  "奸",
+  "奂",
+  "尸",
+  "帅",
+  "后",
+  "拐",
+  "汹",
+  "为",
+  "栅",
+  "抵",
+  "杯",
+  "纣",
+  "红",
+  "纪",
+  "纫",
+  "纥",
+  "约",
+  "苎",
+  "计",
+  "订",
+  "讣",
+  "贞",
+  "负",
+  "军",
+  "轨",
+  "俩",
+  "页",
+  "风",
+  "飞",
+  "们",
+  "伥",
+  "闩",
+  "仿",
+  "个",
+  "韦",
+  "幸",
+  "伦",
+  "仓",
+  "冻",
+  "刚",
+  "员",
+  "娱",
+  "剥",
+  "孙",
+  "岛",
+  "师",
+  "宫",
+  "库",
+  "耻",
+  "书",
+  "气",
+  "时",
+  "乌",
+  "泾",
+  "狈",
+  "疱",
+  "佩",
+  "亩",
+  "纷",
+  "纺",
+  "纱",
+  "纹",
+  "纯",
+  "纽",
+  "纰",
+  "级",
+  "纭",
+  "胁",
+  "纳",
+  "纸",
+  "脉",
+  "兹",
+  "刍",
+  "荆",
+  "记",
+  "讦",
+  "讨",
+  "讧",
+  "讪",
+  "讯",
+  "托",
+  "训",
+  "讫",
+  "岂",
+  "财",
+  "贡",
+  "钉",
+  "针",
+  "轩",
+  "钊",
+  "轫",
+  "闪",
+  "阵",
+  "乃",
+  "陕",
+  "回",
+  "只",
+  "饥",
+  "马",
+  "斗",
+  "干",
+  "咱",
+  "伪",
+  "伟",
+  "侦",
+  "侧",
+  "哑",
+  "坚",
+  "垩",
+  "务",
+  "动",
+  "问",
+  "执",
+  "念",
+  "够",
+  "娄",
+  "衔",
+  "妇",
+  "张",
+  "强",
+  "峥",
+  "昆",
+  "雕",
+  "仑",
+  "从",
+  "带",
+  "帐",
+  "专",
+  "屉",
+  "凄",
+  "怅",
+  "舍",
+  "扫",
+  "败",
+  "挂",
+  "启",
+  "扪",
+  "抡",
+  "斩",
+  "挣",
+  "采",
+  "卷",
+  "弃",
+  "栀",
+  "勖",
+  "枭",
+  "杀",
+  "氢",
+  "杆",
+  "凉",
+  "渊",
+  "捆",
+  "凄",
+  "泪",
+  "狰",
+  "沦",
+  "净",
+  "现",
+  "璃",
+  "众",
+  "产",
+  "牵",
+  "朱",
+  "毕",
+  "异",
+  "细",
+  "绅",
+  "组",
+  "终",
+  "钵",
+  "荚",
+  "习",
+  "绊",
+  "弦",
+  "统",
+  "庄",
+  "扎",
+  "绍",
+  "唇",
+  "绋",
+  "绌",
+  "贫",
+  "处",
+  "觅",
+  "规",
+  "访",
+  "轭",
+  "讶",
+  "软",
+  "诀",
+  "这",
+  "讷",
+  "许",
+  "设",
+  "讼",
+  "连",
+  "讹",
+  "术",
+  "衮",
+  "贩",
+  "迳",
+  "责",
+  "贯",
+  "货",
+  "贪",
+  "伧",
+  "伞",
+  "凯",
+  "顶",
+  "剀",
+  "顷",
+  "创",
+  "钗",
+  "鱼",
+  "扣",
+  "鸟",
+  "劳",
+  "钓",
+  "胜",
+  "钏",
+  "勋",
+  "闭",
+  "家",
+  "陈",
+  "陆",
+  "阴",
+  "备",
+  "杰",
+  "围",
+  "尧",
+  "丧",
+  "场",
+  "寻",
+  "报",
+  "岚",
+  "单",
+  "壶",
+  "帧",
+  "哟",
+  "几",
+  "唤",
+  "厕",
+  "乔",
+  "厢",
+  "复",
+  "换",
+  "恶",
+  "扬",
+  "闷",
+  "拣",
+  "惬",
+  "恻",
+  "恼",
+  "挥",
+  "涌",
+  "凑",
+  "减",
+  "枣",
+  "钦",
+  "栋",
+  "壳",
+  "栈",
+  "涡",
+  "汤",
+  "栖",
+  "测",
+  "珐",
+  "发",
+  "浑",
+  "涣",
+  "困",
+  "无",
+  "苏",
+  "砚",
+  "秆",
+  "犹",
+  "痉",
+  "丝",
+  "络",
+  "烟",
+  "给",
+  "绚",
+  "笔",
+  "肃",
+  "华",
+  "笋",
+  "庵",
+  "莱",
+  "肾",
+  "绞",
+  "胀",
+  "结",
+  "绒",
+  "绝",
+  "评",
+  "贵",
+  "词",
+  "买",
+  "证",
+  "贬",
+  "诂",
+  "贸",
+  "诏",
+  "贷",
+  "诅",
+  "诈",
+  "诋",
+  "诉",
+  "诊",
+  "贮",
+  "贴",
+  "贰",
+  "贻",
+  "视",
+  "贲",
+  "轲",
+  "注",
+  "费",
+  "轴",
+  "咏",
+  "贺",
+  "轶",
+  "闵",
+  "闰",
+  "开",
+  "周",
+  "闲",
+  "间",
+  "进",
+  "闲",
+  "队",
+  "邮",
+  "阶",
+  "乡",
+  "阳",
+  "钞",
+  "钙",
+  "钮",
+  "钠",
+  "钧",
+  "钝",
+  "隽",
+  "钤",
+  "云",
+  "韧",
+  "项",
+  "顺",
+  "须",
+  "饪",
+  "饭",
+  "饨",
+  "饮",
+  "饬",
+  "冯",
+  "驭",
+  "佣",
+  "债",
+  "涂",
+  "冢",
+  "传",
+  "吗",
+  "仅",
+  "倾",
+  "啬",
+  "伤",
+  "块",
+  "坞",
+  "偬",
+  "呜",
+  "铲",
+  "呛",
+  "剿",
+  "妈",
+  "园",
+  "媪",
+  "势",
+  "圆",
+  "汇",
+  "损",
+  "抢",
+  "栗",
+  "摇",
+  "干",
+  "愠",
+  "捣",
+  "忾",
+  "厦",
+  "怆",
+  "汇",
+  "彷",
+  "晖",
+  "榨",
+  "晕",
+  "业",
+  "爱",
+  "极",
+  "烦",
+  "炼",
+  "杨",
+  "沟",
+  "桢",
+  "灭",
+  "炀",
+  "枫",
+  "焕",
+  "爷",
+  "岁",
+  "毁",
+  "准",
+  "狮",
+  "沧",
+  "琅",
+  "烟",
+  "珲",
+  "睐",
+  "棱",
+  "睁",
+  "禀",
+  "痹",
+  "节",
+  "盏",
+  "粤",
+  "经",
+  "绢",
+  "莴",
+  "捆",
+  "脚",
+  "绑",
+  "肿",
+  "绥",
+  "虏",
+  "脑",
+  "义",
+  "羡",
+  "荤",
+  "圣",
+  "苇",
+  "蜕",
+  "叶",
+  "肠",
+  "话",
+  "诛",
+  "补",
+  "诡",
+  "询",
+  "诠",
+  "里",
+  "诟",
+  "袅",
+  "较",
+  "载",
+  "诧",
+  "轼",
+  "该",
+  "贼",
+  "轾",
+  "详",
+  "资",
+  "试",
+  "贾",
+  "农",
+  "诗",
+  "贿",
+  "运",
+  "诘",
+  "赀",
+  "游",
+  "夸",
+  "赁",
+  "诙",
+  "赂",
+  "诣",
+  "赅",
+  "达",
+  "诚",
+  "迹",
+  "违",
+  "铀",
+  "铅",
+  "刨",
+  "钩",
+  "过",
+  "铂",
+  "铃",
+  "闸",
+  "邹",
+  "陨",
+  "电",
+  "钴",
+  "钳",
+  "钹",
+  "钚",
+  "钾",
+  "预",
+  "顽",
+  "顿",
+  "顼",
+  "颁",
+  "颂",
+  "饲",
+  "饴",
+  "饱",
+  "饰",
+  "驰",
+  "驮",
+  "驯",
+  "鸠",
+  "呕",
+  "伙",
+  "侥",
+  "叹",
+  "梦",
+  "喽",
+  "夺",
+  "奁",
+  "仆",
+  "啧",
+  "侨",
+  "雇",
+  "妪",
+  "团",
+  "图",
+  "划",
+  "尘",
+  "匮",
+  "厌",
+  "宁",
+  "垫",
+  "堑",
+  "尝",
+  "实",
+  "殷",
+  "态",
+  "对",
+  "畅",
+  "屡",
+  "惯",
+  "崭",
+  "恸",
+  "岖",
+  "惭",
+  "币",
+  "荣",
+  "帼",
+  "杠",
+  "构",
+  "搂",
+  "别",
+  "折",
+  "掴",
+  "彻",
+  "枪",
+  "渐",
+  "涨",
+  "氲",
+  "涟",
+  "滚",
+  "沪",
+  "渔",
+  "渗",
+  "渍",
+  "涤",
+  "汉",
+  "满",
+  "尔",
+  "荦",
+  "狱",
+  "琐",
+  "玛",
+  "疟",
+  "疡",
+  "疯",
+  "愈",
+  "痪",
+  "监",
+  "笺",
+  "筝",
+  "硕",
+  "祯",
+  "绽",
+  "祸",
+  "绾",
+  "种",
+  "综",
+  "绰",
+  "洼",
+  "绫",
+  "窝",
+  "绿",
+  "紧",
+  "缀",
+  "网",
+  "纲",
+  "绮",
+  "绸",
+  "绵",
+  "彩",
+  "纶",
+  "维",
+  "绪",
+  "缁",
+  "罚",
+  "闻",
+  "搜",
+  "苍",
+  "席",
+  "蚀",
+  "莅",
+  "盖",
+  "制",
+  "荪",
+  "诵",
+  "志",
+  "语",
+  "诬",
+  "认",
+  "诫",
+  "误",
+  "说",
+  "诰",
+  "诲",
+  "诱",
+  "诳",
+  "狸",
+  "宾",
+  "赈",
+  "赊",
+  "铰",
+  "赵",
+  "铐",
+  "赶",
+  "银",
+  "局",
+  "铜",
+  "辅",
+  "铭",
+  "辄",
+  "铢",
+  "轻",
+  "铬",
+  "挽",
+  "铨",
+  "衔",
+  "远",
+  "阂",
+  "闺",
+  "逊",
+  "闽",
+  "阁",
+  "阀",
+  "递",
+  "合",
+  "际",
+  "颇",
+  "领",
+  "飒",
+  "饺",
+  "饼",
+  "饵",
+  "饷",
+  "驳",
+  "肮",
+  "鸣",
+  "鸢",
+  "厉",
+  "凤",
+  "唠",
+  "么",
+  "齐",
+  "亿",
+  "哗",
+  "仪",
+  "嘘",
+  "价",
+  "喷",
+  "侬",
+  "侩",
+  "啸",
+  "俭",
+  "叽",
+  "凛",
+  "剧",
+  "刘",
+  "坟",
+  "剑",
+  "坠",
+  "娴",
+  "婵",
+  "妩",
+  "娇",
+  "宽",
+  "审",
+  "层",
+  "帜",
+  "废",
+  "厨",
+  "庙",
+  "厮",
+  "广",
+  "厂",
+  "弹",
+  "惮",
+  "抚",
+  "愤",
+  "捻",
+  "征",
+  "敌",
+  "庆",
+  "挚",
+  "虑",
+  "暂",
+  "扑",
+  "忧",
+  "捞",
+  "样",
+  "戚",
+  "撑",
+  "椁",
+  "怂",
+  "拨",
+  "桩",
+  "欲",
+  "挠",
+  "标",
+  "怜",
+  "悯",
+  "桨",
+  "乐",
+  "溃",
+  "枞",
+  "润",
+  "疮",
+  "涧",
+  "皑",
+  "殇",
+  "皱",
+  "盘",
+  "浆",
+  "热",
+  "眯",
+  "泼",
+  "牦",
+  "奖",
+  "洁",
+  "确",
+  "浇",
+  "莹",
+  "码",
+  "纬",
+  "肤",
+  "致",
+  "缄",
+  "谷",
+  "缅",
+  "缉",
+  "莲",
+  "编",
+  "缘",
+  "荫",
+  "窑",
+  "缐",
+  "穷",
+  "缎",
+  "缓",
+  "蒋",
+  "缍",
+  "范",
+  "骂",
+  "卜",
+  "罢",
+  "葱",
+  "缔",
+  "练",
+  "胶",
+  "虾",
+  "课",
+  "蜗",
+  "诿",
+  "虱",
+  "谄",
+  "调",
+  "谁",
+  "论",
+  "卫",
+  "诤",
+  "冲",
+  "竖",
+  "复",
+  "赔",
+  "赏",
+  "谊",
+  "赋",
+  "谅",
+  "贱",
+  "谈",
+  "账",
+  "谆",
+  "赌",
+  "诞",
+  "贤",
+  "请",
+  "卖",
+  "诸",
+  "赐",
+  "质",
+  "碰",
+  "辉",
+  "辆",
+  "辍",
+  "辈",
+  "辇",
+  "轮",
+  "辎",
+  "适",
+  "锐",
+  "锉",
+  "锋",
+  "闾",
+  "迁",
+  "阅",
+  "邻",
+  "郑",
+  "邓",
+  "腌",
+  "巩",
+  "锌",
+  "颉",
+  "锑",
+  "刮",
+  "销",
+  "养",
+  "铺",
+  "饿",
+  "锄",
+  "馁",
+  "铝",
+  "驼",
+  "驻",
+  "驷",
+  "驶",
+  "驽",
+  "驾",
+  "驹",
+  "驸",
+  "发",
+  "闹",
+  "鱿",
+  "鲁",
+  "鸩",
+  "鸦",
+  "麸",
+  "齿",
+  "俦",
+  "傧",
+  "剂",
+  "吨",
+  "惫",
+  "懔",
+  "哝",
+  "忆",
+  "嗳",
+  "战",
+  "垦",
+  "坛",
+  "拥",
+  "挡",
+  "奋",
+  "挞",
+  "袅",
+  "据",
+  "掳",
+  "导",
+  "择",
+  "宪",
+  "凭",
+  "捡",
+  "机",
+  "历",
+  "烫",
+  "历",
+  "焖",
+  "晓",
+  "淀",
+  "焰",
+  "浓",
+  "朴",
+  "泽",
+  "桦",
+  "浊",
+  "玑",
+  "瓯",
+  "树",
+  "炽",
+  "卢",
+  "椭",
+  "炖",
+  "磷",
+  "桥",
+  "烧",
+  "瞒",
+  "缣",
+  "砖",
+  "萦",
+  "缚",
+  "御",
+  "县",
+  "积",
+  "颖",
+  "稣",
+  "窥",
+  "腻",
+  "蓑",
+  "筑",
+  "笃",
+  "兴",
+  "箬",
+  "舱",
+  "筛",
+  "缢",
+  "荡",
+  "萧",
+  "芜",
+  "蚂",
+  "萤",
+  "裤",
+  "亲",
+  "觎",
+  "谛",
+  "谚",
+  "谏",
+  "讳",
+  "辐",
+  "谋",
+  "辑",
+  "谍",
+  "输",
+  "谐",
+  "谘",
+  "办",
+  "诺",
+  "谒",
+  "谓",
+  "选",
+  "讽",
+  "迟",
+  "谕",
+  "辽",
+  "遗",
+  "猫",
+  "赖",
+  "锭",
+  "表",
+  "锯",
+  "踊",
+  "锰",
+  "错",
+  "钱",
+  "钢",
+  "锡",
+  "录",
+  "铮",
+  "锥",
+  "锦",
+  "阎",
+  "险",
+  "沾",
+  "䩄",
+  "颊",
+  "哄",
+  "颈",
+  "鲍",
+  "频",
+  "鸵",
+  "颔",
+  "鸪",
+  "头",
+  "鸯",
+  "颓",
+  "鸭",
+  "颐",
+  "鸰",
+  "鸳",
+  "馆",
+  "饯",
+  "馄",
+  "龙",
+  "馅",
+  "龟",
+  "骇",
+  "骈",
+  "优",
+  "骆",
+  "偿",
+  "储",
+  "咛",
+  "尝",
+  "吓",
+  "压",
+  "婴",
+  "嫔",
+  "嬷",
+  "尴",
+  "屿",
+  "岭",
+  "帮",
+  "档",
+  "应",
+  "恳",
+  "检",
+  "桧",
+  "戏",
+  "栉",
+  "殓",
+  "泞",
+  "击",
+  "滨",
+  "济",
+  "挤",
+  "拧",
+  "蒙",
+  "涛",
+  "拟",
+  "滥",
+  "搁",
+  "敛",
+  "涩",
+  "毙",
+  "浚",
+  "暧",
+  "营",
+  "灿",
+  "烛",
+  "毁",
+  "烩",
+  "墙",
+  "狞",
+  "获",
+  "环",
+  "瑷",
+  "痨",
+  "疗",
+  "荡",
+  "粪",
+  "了",
+  "矫",
+  "缩",
+  "绩",
+  "缪",
+  "缕",
+  "矶",
+  "缧",
+  "绷",
+  "缝",
+  "总",
+  "纵",
+  "缫",
+  "篓",
+  "聪",
+  "联",
+  "耸",
+  "脓",
+  "脸",
+  "脍",
+  "临",
+  "举",
+  "艰",
+  "姜",
+  "褛",
+  "蔷",
+  "觊",
+  "谜",
+  "谤",
+  "谦",
+  "亏",
+  "讲",
+  "谎",
+  "谣",
+  "谢",
+  "誊",
+  "溪",
+  "蝼",
+  "赚",
+  "赛",
+  "蝈",
+  "购",
+  "趋",
+  "亵",
+  "辖",
+  "辗",
+  " ",
+  "辕",
+  "舆",
+  "还",
+  "迈",
+  "酝",
+  "丑",
+  "镀",
+  "镁",
+  "虽",
+  "锚",
+  "键",
+  "炼",
+  "锲",
+  "韩",
+  "锅",
+  "颗",
+  "锤",
+  "飓",
+  "钟",
+  "喂",
+  "锺",
+  "骋",
+  "锹",
+  "骏",
+  "锻",
+  "鲜",
+  "锾",
+  "鲛",
+  "阔",
+  "鲔",
+  "阕",
+  "鸿",
+  "阑",
+  "鸽",
+  "闱",
+  "板",
+  "隐",
+  "隶",
+  "斋",
+  "丛",
+  "噜",
+  "向",
+  "圹",
+  "垒",
+  "婶",
+  "懑",
+  "扩",
+  "掷",
+  "扰",
+  "撵",
+  "摆",
+  "擞",
+  "熏",
+  "犷",
+  "猎",
+  "槟",
+  "瓮",
+  "柜",
+  "槛",
+  "疠",
+  "柠",
+  "愈",
+  "棹",
+  "欤",
+  "归",
+  "殡",
+  "础",
+  "泻",
+  "沈",
+  "穑",
+  "滤",
+  "秽",
+  "渎",
+  "窜",
+  "溅",
+  "窍",
+  "箫",
+  "浏",
+  "箪",
+  "篑",
+  "简",
+  "粮",
+  "织",
+  "缮",
+  "绕",
+  "缭",
+  "绣",
+  "坛",
+  "翘",
+  "职",
+  "聂",
+  "脐",
+  "膑",
+  "萨",
+  "踪",
+  "蓝",
+  "躯",
+  "转",
+  "借",
+  "辙",
+  "迩",
+  "蛲",
+  "蝉",
+  "酱",
+  "厘",
+  "镕",
+  "觐",
+  "镑",
+  "觞",
+  "锁",
+  "谟",
+  "钨",
+  "谨",
+  "镍",
+  "谬",
+  "镇",
+  "丰",
+  "阖",
+  "赘",
+  "闯",
+  "阗",
+  "蹒",
+  "杂",
+  "雏",
+  "鸡",
+  "秋",
+  "额",
+  "颜",
+  "题",
+  "颚",
+  "颛",
+  "飏",
+  "馏",
+  "馊",
+  "馈",
+  "骑",
+  "松",
+  "鲨",
+  "怀",
+  "鲤",
+  "懒",
+  "鲫",
+  "鹃",
+  "鹅",
+  "拢",
+  "鹄",
+  "旷",
+  "冬",
+  "橱",
+  "椟",
+  "榈",
+  "咽",
+  "橹",
+  "咙",
+  "坏",
+  "潇",
+  "垄",
+  "濑",
+  "坜",
+  "宠",
+  "沥",
+  "庞",
+  "濒",
+  "庐",
+  "惩",
+  "烁",
+  "牍",
+  "犊",
+  "兽",
+  "獭",
+  "玺",
+  "琼",
+  "畴",
+  "蒙",
+  "碍",
+  "祷",
+  "获",
+  "稳",
+  "帘",
+  "签",
+  "檐",
+  "系",
+  "茧",
+  "裆",
+  "绎",
+  "绳",
+  "袄",
+  "绘",
+  "哗",
+  "罗",
+  "谱",
+  "膻",
+  "识",
+  "证",
+  "谭",
+  "腊",
+  "谲",
+  "讥",
+  "艺",
+  "赠",
+  "薮",
+  "赞",
+  "药",
+  "蚁",
+  "蝇",
+  "蝎",
+  "跷",
+  "辚",
+  "轿",
+  "边",
+  "镜",
+  "镝",
+  "铲",
+  "镞",
+  "链",
+  "镗",
+  "镘",
+  "镖",
+  "镙",
+  "锵",
+  "镂",
+  "铿",
+  "关",
+  "陇",
+  "离",
+  "鹊",
+  "难",
+  "鹌",
+  "鹏",
+  "雾",
+  "丽",
+  "韬",
+  "韵",
+  "麹",
+  "类",
+  "愿",
+  "劝",
+  "颠",
+  "飕",
+  "嘤",
+  "馒",
+  "严",
+  "骛",
+  "骗",
+  "胡",
+  "鲸",
+  "鲳",
+  "鹑",
+  "悬",
+  "鹉",
+  "忏",
+  "拦",
+  "搀",
+  "胧",
+  "澜",
+  "牺",
+  "珑",
+  "痒",
+  "症",
+  "矿",
+  "砺",
+  "矾",
+  "砾",
+  "窦",
+  "竞",
+  "筹",
+  "蕴",
+  "篮",
+  "蚝",
+  "褴",
+  "辫",
+  "觉",
+  "缤",
+  "继",
+  "议",
+  "胪",
+  "译",
+  "舰",
+  "赢",
+  "赡",
+  "蔼",
+  "趸",
+  "蔺",
+  "芦",
+  "跶",
+  "苹",
+  "释",
+  "锈",
+  "阐",
+  "飘",
+  "饶",
+  "饥",
+  "骞",
+  "腾",
+  "骚",
+  "鳃",
+  "鳅",
+  "咸",
+  "面",
+  "龃",
+  "出",
+  "龄",
+  "苏",
+  "钟",
+  "铙",
+  "俪",
+  "嗫",
+  "续",
+  "啭",
+  "嚣",
+  "兰",
+  "藓",
+  "蛎",
+  "惧",
+  "慑",
+  "蜡",
+  "摄",
+  "袜",
+  "携",
+  "览",
+  "樱",
+  "谴",
+  "栏",
+  "护",
+  "歼",
+  "赃",
+  "烂",
+  "踌",
+  "癞",
+  "跃",
+  "眬",
+  "轰",
+  "藤",
+  "辩",
+  "缠",
+  "镰",
+  "镭",
+  "铁",
+  "铛",
+  "铎",
+  "镯",
+  "辟",
+  "响",
+  "顾",
+  "驱",
+  "骠",
+  "蓦",
+  "骡",
+  "髅",
+  "鳍",
+  "鳏",
+  "莺",
+  "鹤",
+  "鹞",
+  "龇",
+  "龈",
+  "俨",
+  "呓",
+  "啰",
+  "孪",
+  "巅",
+  "峦",
+  "弯",
+  "摊",
+  "踯",
+  "权",
+  "辔",
+  "欢",
+  "铸",
+  "洒",
+  "鉴",
+  "滩",
+  "鉴",
+  "猡",
+  "霁",
+  "叠",
+  "瘾",
+  "鞑",
+  "癣",
+  "缰",
+  "笼",
+  "颤",
+  "籁",
+  "骄",
+  "聋",
+  "须",
+  "听",
+  "鳖",
+  "脏",
+  "鲢",
+  "袭",
+  "鳔",
+  "衬",
+  "鳗",
+  "读",
+  "鹧",
+  "赎",
+  "鸥",
+  "赝",
+  "鼹",
+  "龉",
+  "龊",
+  "龚",
+  "苏",
+  "岩",
+  "挛",
+  "搅",
+  "签",
+  "缨",
+  "纤",
+  "萝",
+  "蛊",
+  "变",
+  "逦",
+  "镳",
+  "铄",
+  "靥",
+  "显",
+  "餍",
+  "惊",
+  "驿",
+  "验",
+  "脏",
+  "鳝",
+  "鳞",
+  "鳜",
+  "鸶",
+  "霉",
+  null,
+  "坝",
+  "揽",
+  "瘫",
+  "癫",
+  "羁",
+  "让",
+  "谗",
+  "谶",
+  "赣",
+  "酿",
+  "雳",
+  "灵",
+  "霭",
+  "鳄",
+  "鲈",
+  "黩",
+  "艳",
+  "凿",
+  "鹦",
+  "骊",
+  "郁",
+  "鸾",
+  "吁",
+  "颦",
+  "骤",
+  "鬓",
+  "魇",
+  "鹰",
+  "鹭",
+  "硷",
+  "盐",
+  "鳌",
+  "龌",
+  "龋",
+  "厅",
+  "榄",
+  "篱",
+  "箩",
+  "蹑",
+  "衅",
+  "镶",
+  "钥",
+  "颅",
+  "馋",
+  "滦",
+  "瞩",
+  "赞",
+  "驴",
+  "骥",
+  "缆",
+  "躏",
+  "钻",
+  "銮",
+  "锣"
+]
diff --git a/src/background/graphql/utils/lang-shin.json b/src/background/graphql/utils/lang-shin.json
new file mode 100644
index 0000000..bdd0f4e
--- /dev/null
+++ b/src/background/graphql/utils/lang-shin.json
@@ -0,0 +1,327 @@
+[
+  "亜",
+  "悪",
+  "圧",
+  "囲",
+  "為",
+  "壱",
+  "逸",
+  "飲",
+  "隠",
+  "羽",
+  "栄",
+  "営",
+  "鋭",
+  "衛",
+  "益",
+  "駅",
+  "謁",
+  "閲",
+  "円",
+  "塩",
+  "縁",
+  "艶",
+  "応",
+  "桜",
+  "穏",
+  "仮",
+  "価",
+  "禍",
+  "悔",
+  "海",
+  "絵",
+  "壊",
+  "懐",
+  "慨",
+  "概",
+  "拡",
+  "殻",
+  "覚",
+  "楽",
+  "喝",
+  "渇",
+  "褐",
+  "鎌",
+  "缶",
+  "巻",
+  "陥",
+  "間",
+  "勧",
+  "寛",
+  "漢",
+  "関",
+  "歓",
+  "館",
+  "観",
+  "顔",
+  "巌",
+  "気",
+  "祈",
+  "既",
+  "既",
+  "帰",
+  "亀",
+  "器",
+  "偽",
+  "戯",
+  "犠",
+  "拠",
+  "挙",
+  "強",
+  "教",
+  "郷",
+  "響",
+  "尭",
+  "暁",
+  "勤",
+  "謹",
+  "駆",
+  "勲",
+  "薫",
+  "契",
+  "恵",
+  "掲",
+  "渓",
+  "経",
+  "蛍",
+  "軽",
+  "継",
+  "鶏",
+  "芸",
+  "撃",
+  "欠",
+  "研",
+  "県",
+  "倹",
+  "剣",
+  "険",
+  "圏",
+  "検",
+  "権",
+  "顕",
+  "験",
+  "厳",
+  "戸",
+  "呉",
+  "娯",
+  "広",
+  "効",
+  "鉱",
+  "告",
+  "黒",
+  "穀",
+  "砕",
+  "済",
+  "斎",
+  "歳",
+  "剤",
+  "冊",
+  "殺",
+  "雑",
+  "桟",
+  "産",
+  "賛",
+  "糸",
+  "祉",
+  "視",
+  "歯",
+  "飼",
+  "児",
+  "実",
+  "社",
+  "舎",
+  "者",
+  "煮",
+  "釈",
+  "収",
+  "臭",
+  "従",
+  "渋",
+  "獣",
+  "縦",
+  "祝",
+  "粛",
+  "処",
+  "渚",
+  "暑",
+  "署",
+  "緒",
+  "諸",
+  "尚",
+  "祥",
+  "渉",
+  "焼",
+  "証",
+  "奨",
+  "乗",
+  "浄",
+  "剰",
+  "畳",
+  "縄",
+  "壌",
+  "嬢",
+  "穣",
+  "譲",
+  "醸",
+  "神",
+  "真",
+  "慎",
+  "図",
+  "粋",
+  "酔",
+  "穂",
+  "髄",
+  "瀬",
+  "青",
+  "斉",
+  "清",
+  "晴",
+  "靖",
+  "精",
+  "摂",
+  "節",
+  "説",
+  "絶",
+  "専",
+  "戦",
+  "銭",
+  "繊",
+  "祖",
+  "荘",
+  "捜",
+  "挿",
+  "巣",
+  "曽",
+  "痩",
+  "僧",
+  "層",
+  "総",
+  "聡",
+  "騒",
+  "増",
+  "憎",
+  "蔵",
+  "贈",
+  "臓",
+  "即",
+  "続",
+  "対",
+  "帯",
+  "滝",
+  "択",
+  "沢",
+  "琢",
+  "単",
+  "嘆",
+  "団",
+  "弾",
+  "遅",
+  "痴",
+  "鋳",
+  "著",
+  "庁",
+  "徴",
+  "聴",
+  "懲",
+  "勅",
+  "鎮",
+  "塚",
+  "禎",
+  "逓",
+  "鉄",
+  "転",
+  "伝",
+  "都",
+  "稲",
+  "闘",
+  "闘",
+  "徳",
+  "読",
+  "突",
+  "難",
+  "弐",
+  "悩",
+  "脳",
+  "覇",
+  "拝",
+  "廃",
+  "売",
+  "梅",
+  "発",
+  "髪",
+  "抜",
+  "飯",
+  "繁",
+  "晩",
+  "卑",
+  "秘",
+  "碑",
+  "姫",
+  "浜",
+  "賓",
+  "頻",
+  "敏",
+  "瓶",
+  "侮",
+  "福",
+  "払",
+  "仏",
+  "併",
+  "並",
+  "塀",
+  "餅",
+  "辺",
+  "変",
+  "弁",
+  "弁",
+  "弁",
+  "勉",
+  "歩",
+  "舗",
+  "豊",
+  "褒",
+  "墨",
+  "翻",
+  "槙",
+  "毎",
+  "満",
+  "免",
+  "麺",
+  "黙",
+  "訳",
+  "薬",
+  "祐",
+  "予",
+  "揺",
+  "様",
+  "謡",
+  "頼",
+  "覧",
+  "欄",
+  "竜",
+  "隆",
+  "旅",
+  "虜",
+  "両",
+  "猟",
+  "緑",
+  "隣",
+  "涙",
+  "塁",
+  "類",
+  "戻",
+  "霊",
+  "隷",
+  "齢",
+  "暦",
+  "歴",
+  "廉",
+  "練",
+  "錬",
+  "労",
+  "郎",
+  "朗",
+  "廊",
+  "録",
+  ""
+]
diff --git a/src/background/idb.ts b/src/background/idb.ts
new file mode 100644
index 0000000..337b005
--- /dev/null
+++ b/src/background/idb.ts
@@ -0,0 +1,6 @@
+import { Storage } from "~/shared/idb"
+
+export const statistics = await Storage.of<{
+  lastRequested?: Date
+  disableLogging?: boolean
+}>("statistics", "statistics-store")
diff --git a/src/background/index.ts b/src/background/index.ts
new file mode 100644
index 0000000..d76ea13
--- /dev/null
+++ b/src/background/index.ts
@@ -0,0 +1,47 @@
+import { flatMap } from "lodash"
+import browser from "webextension-polyfill"
+import { query } from "./graphql/api"
+import { updateTabIcons } from "./update"
+
+function replaceFiles({ tabId, frameId }: { tabId: number; frameId: number }) {
+  void browser.tabs.sendMessage(tabId, { method: "fileUpdated" }, { frameId })
+}
+
+browser.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
+  const { method, body } = msg
+  if (method === "gql") {
+    query(body.query, body.variables)
+      .then(result => {
+        if (process.env.NODE_ENV === "development") {
+          console.log({ ...body, result })
+        }
+        // @ts-expect-error wrong type
+        sendResponse(result)
+      })
+      .catch(console.error)
+    return true
+  }
+})
+
+browser.webNavigation.onCommitted.addListener(updateTabIcons)
+browser.webNavigation.onHistoryStateUpdated.addListener(info => {
+  void updateTabIcons(info)
+  replaceFiles(info)
+})
+browser.webNavigation.onBeforeNavigate.addListener(updateTabIcons)
+
+browser.tabs.onUpdated.addListener((tabId, info) => {
+  void updateTabIcons({ ...info, tabId, url: info.url, frameId: 0 })
+  if (info.status === "loading") {
+    replaceFiles({ tabId, frameId: 0 })
+  }
+})
+
+const tabs = flatMap(
+  await browser.windows.getAll({ populate: true }),
+  window => window.tabs!,
+)
+
+await Promise.all(
+  tabs.map(tab => updateTabIcons({ tabId: tab.id!, url: tab.url, frameId: 0 })),
+)
diff --git a/src/background/update.ts b/src/background/update.ts
new file mode 100644
index 0000000..5b4d76e
--- /dev/null
+++ b/src/background/update.ts
@@ -0,0 +1,85 @@
+import browser from "webextension-polyfill"
+import type { BackgroundQueryDocument } from "~/generated/graphql"
+import { queryOrThrow } from "./graphql/api"
+
+const gql = String.raw
+
+const BACKGROUND_QUERY = gql`
+  query BackgroundQuery($url: String!) {
+    preferences {
+      enabled
+    }
+    files(filter: { url: $url, enabled: true }) {
+      id
+    }
+  }
+`
+
+export async function updateTabIcons({
+  frameId,
+  tabId,
+  url,
+  status,
+}: {
+  frameId?: number
+  tabId: number
+  url?: string
+  status?: string
+}) {
+  if (
+    !url ||
+    url.startsWith("chrome-error://") ||
+    url.startsWith("chrome-extension://") ||
+    url.startsWith("chrome://newtab/")
+  ) {
+    return
+  }
+
+  const {
+    preferences: { enabled },
+    files,
+  } = await queryOrThrow<BackgroundQueryDocument>(BACKGROUND_QUERY, { url })
+
+  await browser.browserAction.setBadgeBackgroundColor({
+    color: enabled ? [251, 43, 105, 255] : [170, 170, 170, 255],
+  })
+
+  if (frameId && frameId !== 0) {
+    return
+  }
+
+  const count = files.length
+
+  try {
+    if (url === "chrome://newtab/" && status && status !== "complete") return
+
+    if (!(await tabExists(tabId))) return
+
+    const postfix = enabled ? "" : "w"
+
+    await browser.browserAction.setIcon({
+      tabId,
+      path: {
+        16: `assets/images/16${postfix}.png`,
+        32: `assets/images/32${postfix}.png`,
+        19: `assets/images/19${postfix}.png`,
+        38: `assets/images/38${postfix}.png`,
+      },
+    })
+
+    if (count) {
+      await browser.browserAction.setBadgeText({
+        text: `${count}`,
+        tabId,
+      })
+    }
+  } catch {}
+}
+
+async function tabExists(id?: number) {
+  try {
+    return Boolean(id != null && (await browser.tabs.get(id)))
+  } catch {
+    return false
+  }
+}
diff --git a/src/context/index.ts b/src/context/index.ts
new file mode 100644
index 0000000..314713a
--- /dev/null
+++ b/src/context/index.ts
@@ -0,0 +1,181 @@
+// import "./picker";
+import browser from "webextension-polyfill"
+import type { GetCompiledStyleDocument } from "../generated/graphql"
+import { graphql } from "~/shared/messaging"
+
+const BLACKLIST = ["docs.google.com"]
+const REAPPLY = ["wikia.com"]
+const PREVENT_REMOVAL = ["tanstack.com"]
+
+const gql = String.raw
+const isFirefox = navigator.userAgent.includes("Gecko/")
+
+// Global states
+let isExtensionEnabled = false
+let lastIDs = new Set<string>()
+const styleNodes = new WeakSet<Element>()
+const styleNodesMap = new Map<string, HTMLStyleElement>()
+
+const isXMLViewer = () => document.head?.firstElementChild?.id === "xml-viewer-style"
+
+function toggleEnableStyles(state: boolean) {
+  if (state === isExtensionEnabled) return
+
+  isExtensionEnabled = state
+
+  Array.from(document.styleSheets)
+    .filter(({ ownerNode }) => styleNodes.has(ownerNode as Element))
+    .forEach(stylesheet => {
+      stylesheet.disabled = !isExtensionEnabled
+    })
+}
+
+function applyStyles(enabled: boolean, files: { id: string; code: string }[]) {
+  toggleEnableStyles(enabled)
+  if (!enabled) return
+
+  const ids = new Set(files.map(_ => _.id))
+  for (const id of lastIDs) {
+    if (!ids.has(id)) {
+      const node = styleNodesMap.get(id)
+      styleNodesMap.delete(id)
+      node?.remove()
+    }
+  }
+
+  lastIDs = ids
+
+  for (const { id, code } of files) {
+    applyStyle(id, code)
+  }
+
+  if (styleNodesMap.size) {
+    if (!isXMLViewer() && !isFirefox) {
+      function migrate() {
+        // Move <body> before all the attached styles so they can take precedence.
+        const style = Array.from(
+          document.documentElement.querySelectorAll(`:scope > style`),
+        ).find(style => styleNodes.has(style))
+        if (!style) return
+        if (document.body) {
+          document.documentElement.insertBefore(document.body, style)
+        } else {
+          setTimeout(migrate, 1000)
+        }
+      }
+      document.addEventListener("DOMContentLoaded", migrate)
+    }
+  }
+}
+
+function applyStyle(styleId: string, code: string) {
+  const current = styleNodesMap.get(styleId)
+  if (current) {
+    ;(current.childNodes[0] as Text).textContent = code
+    return
+  }
+
+  const namespace = document.documentElement.namespaceURI
+  const node: HTMLStyleElement = document.createElementNS(namespace, "style") as any
+  if (isPatched) {
+    node.dataset.keep = ""
+  }
+  node.appendChild(document.createTextNode(code))
+
+  node.disabled = !isExtensionEnabled
+
+  const clonedNode = document.adoptNode(node)
+  styleNodes.add(clonedNode)
+  if (isFirefox) {
+    setTimeout(() => {
+      document.body.appendChild(clonedNode)
+    }, 29)
+  } else if (isXMLViewer()) {
+    /**
+     * When site response is `application/xml`, Chrome displays our style elements
+     * under document.documentElement as plain text so we need to move them into <head>
+     * (which already is auto-generated at this moment for the XML response).
+     */
+    document.head.appendChild(clonedNode)
+  } else {
+    document.documentElement.appendChild(clonedNode)
+  }
+
+  styleNodes.add(node)
+  styleNodesMap.set(String(styleId), node)
+}
+
+const GET_COMPILED_STYLE = gql`
+  query GetCompiledStyle($url: String!) {
+    preferences {
+      enabled
+    }
+    files(
+      filter: { url: $url, enabled: true, state: None, isGlobal: false }
+      logQuery: true
+    ) {
+      id
+      sections {
+        compiledCode
+      }
+    }
+  }
+` as any as GetCompiledStyleDocument
+
+async function applyCompiledStyle() {
+  const {
+    data: { preferences, files },
+  } = await graphql(GET_COMPILED_STYLE, { url: location.href })
+
+  applyStyles(
+    preferences.enabled ?? true,
+    files.map(file => ({
+      id: file.id,
+      code: file.sections.map(section => section.compiledCode).join("\n"),
+    })),
+  )
+}
+
+function endsWith(text: string, list: string[]) {
+  return list.some(item => text.endsWith(item))
+}
+
+if (!endsWith(location.hostname, BLACKLIST)) {
+  void applyCompiledStyle()
+
+  browser.runtime.onMessage.addListener(req => {
+    if (req.method === "fileUpdated") {
+      void applyCompiledStyle()
+    }
+  })
+}
+
+const isPatched = endsWith(location.hostname, PREVENT_REMOVAL)
+
+// Some React sites remove <style> elements from DOM, so we need to patch them
+if (isPatched) {
+  function patch() {
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    const { removeChild } = Element.prototype
+    Object.defineProperty(document.documentElement, "removeChild", {
+      value(this: Element, child: HTMLElement) {
+        if (child.tagName === "STYLE" && child.dataset.keep != null) {
+          return
+        }
+        return removeChild.call(this, child)
+      },
+    })
+  }
+
+  const script = `(${patch.toString()})()`
+  const scriptNode = document.createElement("script")
+  scriptNode.appendChild(document.createTextNode(script))
+  document.documentElement.appendChild(scriptNode)
+  scriptNode.remove()
+}
+
+// Fix naughty websites
+if (endsWith(location.hostname, REAPPLY)) {
+  setTimeout(applyCompiledStyle, 2000)
+  setTimeout(applyCompiledStyle, 10000)
+}
diff --git a/src/context/picker/LICENSE b/src/context/picker/LICENSE
new file mode 100644
index 0000000..cb19c30
--- /dev/null
+++ b/src/context/picker/LICENSE
@@ -0,0 +1,26 @@
+Code derived from:
+
+1. [https://github.com/liriliri/chobitsu](liriliri/chobitsu)
+2. [https://github.com/liriliri/luna](liriliri/luna)
+
+The MIT License (MIT)
+
+Copyright (c) 2020-present liriliri
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/src/context/picker/index.ts b/src/context/picker/index.ts
new file mode 100644
index 0000000..46a9afa
--- /dev/null
+++ b/src/context/picker/index.ts
@@ -0,0 +1,231 @@
+import { DomHighlighter } from "~/vendor/dom-highlighter"
+import { ValueEmitter } from "~/shared/emitter"
+// eslint-disable-next-line import/no-unresolved
+import css from "~/vendor/dom-highlighter/style.css?string"
+import { createElement } from "~/vendor/dom-highlighter/src/utils"
+
+const isMobile = false
+const hasTouchSupport = "ontouchstart" in globalThis
+const showViewportSizeOnResize = false
+
+const HIDE_CLASSNAME = "__chobitsu-hide__"
+
+function isValidNode(node: Node): boolean {
+  if (node.nodeType === 1) {
+    const { classList } = node as Element
+    if (
+      classList.contains(HIDE_CLASSNAME) ||
+      classList.contains("html2canvas-container")
+    ) {
+      return false
+    }
+  }
+
+  const isValid = !(node.nodeType === 3 && (node.nodeValue || "").trim() === "")
+  if (isValid && node.parentNode) {
+    return isValidNode(node.parentNode)
+  }
+
+  return isValid
+}
+
+function getElementFromPoint(e: any) {
+  if (hasTouchSupport) {
+    const touch = e.touches[0] || e.changedTouches[0]
+    return document.elementFromPoint(touch.clientX, touch.clientY)
+  }
+
+  return document.elementFromPoint(e.clientX, e.clientY)
+}
+
+const viewportSize = createElement("div", {
+  className: HIDE_CLASSNAME,
+  style: {
+    position: "fixed",
+    right: 0,
+    top: 0,
+    background: "#fff",
+    fontSize: 13,
+    opacity: 0.5,
+    padding: "4px 6px",
+  },
+})
+
+function listen<K extends keyof WindowEventMap>(
+  element: Window,
+  type: K,
+  listener: (this: Window, ev: WindowEventMap[K]) => any,
+  options?: boolean | AddEventListenerOptions,
+): () => void
+
+function listen<K extends keyof HTMLElementEventMap>(
+  element: HTMLElement,
+  type: K,
+  listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
+  options?: boolean | AddEventListenerOptions,
+): () => void
+
+function listen(
+  element: EventTarget,
+  type: string,
+  listener: (e: Event) => void,
+  options?: boolean | AddEventListenerOptions,
+) {
+  element.addEventListener(type, listener, options)
+  return () => {
+    element.removeEventListener(type, listener, options)
+  }
+}
+
+export class Picker {
+  onPicked = new ValueEmitter<Node>()
+
+  domHighlighter!: DomHighlighter
+  container!: HTMLDivElement
+  enabled = false
+  disposables: (() => void)[] = []
+
+  constructor() {}
+
+  enable() {
+    if (this.enabled) {
+      return
+    }
+
+    this.container = createElement("div", {
+      className: HIDE_CLASSNAME,
+      style: { all: "initial" },
+    })
+
+    document.documentElement.appendChild(this.container)
+
+    const shadowRoot = this.container.attachShadow({ mode: "open" })
+    const domHighlighterContainer = createElement("div", {
+      style: {
+        position: "fixed",
+        left: 0,
+        top: 0,
+        width: "100%",
+        height: "100%",
+        zIndex: 100000,
+        pointerEvents: "none",
+        fontSize: "13px",
+      },
+    })
+
+    shadowRoot.append(
+      createElement("style", { textContent: css }),
+      domHighlighterContainer,
+    )
+
+    this.domHighlighter = new DomHighlighter(domHighlighterContainer, {
+      monitorResize: true,
+      showInfo: !isMobile,
+    })
+
+    let viewportSizeTimer: number
+
+    this.disposables.push(
+      listen(window, "resize", () => {
+        if (!showViewportSizeOnResize) return
+
+        viewportSize.innerText = `${window.innerWidth}px × ${window.innerHeight}px`
+        if (viewportSizeTimer) {
+          clearTimeout(viewportSizeTimer)
+        } else {
+          document.documentElement.appendChild(viewportSize)
+        }
+        viewportSizeTimer = window.setTimeout(() => {
+          viewportSize.remove()
+          viewportSizeTimer = 0
+        }, 1000)
+      }),
+    )
+
+    this.enabled = true
+
+    const moveListener = (e: TouchEvent | MouseEvent) => {
+      const node = getElementFromPoint(e)
+      if (!node || !isValidNode(node)) {
+        return
+      }
+
+      this.highlightNode(node)
+    }
+
+    const outListener = () => {
+      this.hide()
+    }
+
+    const clickListener = (e: any) => {
+      e.preventDefault()
+      e.stopImmediatePropagation()
+
+      this.onPicked.emit(getElementFromPoint(e)!)
+      this.hide()
+    }
+
+    if (hasTouchSupport) {
+      this.disposables.push(
+        listen(window, "touchstart", moveListener),
+        listen(window, "touchmove", moveListener),
+        listen(window, "touchend", clickListener),
+      )
+    } else {
+      this.disposables.push(
+        listen(window, "mousemove", moveListener),
+        listen(window, "mouseout", outListener),
+        listen(window, "click", clickListener),
+      )
+    }
+  }
+
+  private highlightNode(node: Node) {
+    if (node.nodeType !== 1 && node.nodeType !== 3) {
+      return
+    }
+
+    this.domHighlighter.highlight(node as HTMLElement, {
+      showInfo: !isMobile,
+      showRulers: false,
+      showAccessibilityInfo: !isMobile,
+      showExtensionLines: false,
+      // @ts-expect-error
+      contrastAlgorithm: "aa",
+      contentColor: "rgba(111, 168, 220, .66)",
+      paddingColor: "rgba(147, 196, 125, .55)",
+      borderColor: "rgba(255, 229, 153, .66)",
+      marginColor: "rgba(246, 178, 107, .66)",
+    })
+  }
+
+  hide() {
+    this.domHighlighter.hide()
+  }
+
+  disable() {
+    if (!this.enabled) {
+      return
+    }
+
+    this.domHighlighter.destroy()
+    this.container.remove()
+    this.enabled = false
+    this.disposables.forEach(dispose => dispose())
+  }
+}
+
+const a = new Picker()
+a.onPicked.listen(node => {
+  console.log("picked", node)
+})
+setInterval(() => {
+  if (
+    process.env.NODE_ENV === "development" &&
+    document.body.classList.contains("picker")
+  ) {
+    a.enable()
+  } else {
+    a.disable()
+  }
+}, 500)
diff --git a/src/devtools/index.ts b/src/devtools/index.ts
new file mode 100644
index 0000000..81a5b68
--- /dev/null
+++ b/src/devtools/index.ts
@@ -0,0 +1,39 @@
+import browser from "webextension-polyfill"
+import { graphql } from "~/shared/messaging"
+import type { GetDevToolStyleDocument } from "~/generated/graphql"
+
+const gql = String.raw
+
+const getStyle = gql`
+  query GetDevToolStyle($url: String!) {
+    preferences {
+      enabled
+    }
+    files(filter: { url: $url, enabled: true }, logQuery: true) {
+      sections {
+        compiledCode
+      }
+    }
+  }
+`
+
+void graphql<GetDevToolStyleDocument>(getStyle as any, {
+  url: "chrome-devtools://devtools/bundled/inspector.html",
+})
+  .then(({ data }) => {
+    if (data?.preferences.enabled) {
+      const content = data.files.map(file => file.sections[0].compiledCode).join("\n")
+      browser.devtools.panels.applyStyleSheet(content)
+    }
+  })
+  .catch(err => {
+    console.error(err)
+  })
+
+declare module "webextension-polyfill/namespaces/devtools_panels.d.ts" {
+  namespace DevtoolsPanels {
+    interface Static {
+      applyStyleSheet(css: string): void
+    }
+  }
+}
diff --git a/src/graphiql/index.scss b/src/graphiql/index.scss
new file mode 100644
index 0000000..e96da69
--- /dev/null
+++ b/src/graphiql/index.scss
@@ -0,0 +1,27 @@
+@import "../../node_modules/graphiql/graphiql.min.css";
+
+body {
+  margin: 0;
+}
+#root {
+  height: 100vh;
+}
+.graphiql-container,
+.CodeMirror-info,
+.CodeMirror-lint-tooltip,
+reach-portal {
+  --font-family: system-ui;
+}
+
+button {
+  font-family: inherit;
+}
+
+@media (prefers-color-scheme: dark) {
+  body:not(.graphiql-light) .graphiql-container,
+  body:not(.graphiql-light) .CodeMirror-info,
+  body:not(.graphiql-light) .CodeMirror-lint-tooltip,
+  body:not(.graphiql-light) reach-portal {
+    --color-base: 219deg 19.61% 7.87%;
+  }
+}
diff --git a/src/graphiql/index.tsx b/src/graphiql/index.tsx
new file mode 100644
index 0000000..abb9873
--- /dev/null
+++ b/src/graphiql/index.tsx
@@ -0,0 +1,19 @@
+import "reflect-metadata"
+import "./index.scss"
+import { createRoot } from "react-dom/client"
+import { GraphiQL } from "graphiql"
+import { graphql } from "~/shared/messaging"
+
+const App = () => (
+  <GraphiQL
+    fetcher={async arg => {
+      const result = await graphql(arg.query as any, arg.variables)
+      return result as any
+    }}
+  />
+)
+
+const root = createRoot(document.getElementById("root")!)
+requestAnimationFrame(() => {
+  root.render(<App />)
+})
diff --git a/src/install/.gitignore b/src/install/.gitignore
new file mode 100644
index 0000000..65139e3
--- /dev/null
+++ b/src/install/.gitignore
@@ -0,0 +1 @@
+ref
\ No newline at end of file
diff --git a/src/install/index.ts b/src/install/index.ts
new file mode 100644
index 0000000..336ce12
--- /dev/null
+++ b/src/install/index.ts
@@ -0,0 +1 @@
+export {}
diff --git a/src/licenses.yml b/src/licenses.yml
new file mode 100644
index 0000000..ccf924a
--- /dev/null
+++ b/src/licenses.yml
@@ -0,0 +1,9 @@
+# spellchecker:disable
+github:
+  - hc-oss/react-tag-input-component
+  - johnwalley/allotment
+  - mozilla/webextension-polyfill
+  - okonet/react-container-dimensions
+  - pradel/react-responsive-modal
+licenses:
+  YelyseiLukin/react-files-drag-and-drop: MIT
diff --git a/src/modules.d.ts b/src/modules.d.ts
new file mode 100644
index 0000000..1061678
--- /dev/null
+++ b/src/modules.d.ts
@@ -0,0 +1,24 @@
+declare module "*?string" {
+  const value: string
+  export default value
+}
+
+declare module "*.png" {
+  const value: string
+  export default value
+}
+
+declare module "prettier/esm/standalone.mjs" {
+  export * from "prettier"
+}
+
+declare module "prettier/esm/parser-postcss.mjs" {
+  import type { Plugin } from "prettier"
+  const plugin: Plugin
+  export default plugin
+}
+
+declare module "*.module.css" {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}
diff --git a/src/options/App.tsx b/src/options/App.tsx
new file mode 100644
index 0000000..a9a2dd0
--- /dev/null
+++ b/src/options/App.tsx
@@ -0,0 +1,183 @@
+import { memo, useMemo, useRef } from "react"
+import { css } from "@emotion/css"
+import { useEventListener } from "@aet/hooks"
+import { gql, useQuery } from "~/generated/graphql"
+import { Allotment, type AllotmentHandle, Pane } from "~/vendor/allotment"
+import { token } from "./theme"
+import { Tab as PaneTab, Panels } from "./panels"
+import { Editor } from "./editor"
+import { Sidebar, SidebarTab, useActiveSidebarTab } from "./tabs/Sidebar"
+import { S, useLocalStorageState } from "../shared/hooks/useLocalStorage"
+import { ErrorBoundary } from "~/shared/ErrorBoundary"
+
+export const enum PanelPosition {
+  Right = "Right",
+  Bottom = "Bottom",
+}
+
+const AppQuery = gql<"AppQuery">`
+  query AppQuery {
+    preferences {
+      debugMode
+    }
+  }
+`
+
+const getAllotmentCacheKey = (key: string) => `options.allotment.${key}PaneSize`
+
+export default function App(): React.ReactElement {
+  const [activeTab, setActiveTab] = useLocalStorageState<SidebarTab | null>(
+    S.ActiveTab,
+    SidebarTab.Files,
+  )
+  const [allotmentSize, setAllotmentSize] = useLocalStorageState(
+    getAllotmentCacheKey("tab"),
+    400,
+  )
+  const debugMode = useQuery(AppQuery).data?.preferences.debugMode ?? false
+  const tab = useActiveSidebarTab(activeTab)
+
+  return (
+    <div
+      className={css`
+        background-color: ${token.pageHeaderBg};
+        border-radius: 5px;
+        height: 100%;
+      `}
+    >
+      <Allotment
+        onChange={sizes => {
+          if (sizes.length > 1) {
+            setAllotmentSize(sizes[1])
+          }
+        }}
+        className={css`
+          background-color: ${token.canvas.default};
+        `}
+      >
+        <Pane key="sidebar" minSize={46} maxSize={46}>
+          <Sidebar
+            activeTab={activeTab}
+            setActiveTab={setActiveTab}
+            debugMode={debugMode}
+          />
+        </Pane>
+        {activeTab != null && (
+          <Pane preferredSize={allotmentSize} maxSize={370} key="activeTab">
+            <div
+              className={css`
+                height: 100%;
+              `}
+            >
+              {tab}
+            </div>
+          </Pane>
+        )}
+        <MainPane />
+      </Allotment>
+    </div>
+  )
+}
+
+const MainPane = memo(() => {
+  const allotment = useRef<AllotmentHandle>(null)
+  const paneRef = useRef<HTMLDivElement>(null)
+  const [paneVisible, setPaneVisible] = useLocalStorageState(S.PanelVisible, false)
+  const paneVisibleRef = useRef(paneVisible)
+
+  const [panelPosition, setPanelPosition] = useLocalStorageState(
+    S.PanelPosition,
+    PanelPosition.Bottom,
+  )
+  const [activePaneTab, setActivePaneTab] = useLocalStorageState<PaneTab>(
+    S.ActivePaneTab,
+    PaneTab.Rules,
+  )
+
+  const isRight = panelPosition === PanelPosition.Right
+
+  const [allotmentSizes, setAllotmentSize] = useAllotmentSizes({
+    editor: isRight ? "50%" : "60%",
+    bottomPanel: undefined,
+    rightPanel: undefined,
+  })
+
+  const panelSize = isRight ? allotmentSizes.rightPanel : allotmentSizes.bottomPanel
+
+  const onSubAllotmentSizeChange = (sizes: number[]) => {
+    const paneVisible = paneVisibleRef.current
+    if (!paneVisible) {
+      return
+    }
+    if (sizes.length) {
+      setAllotmentSize("editor", sizes[0])
+    }
+    if (sizes.length > 1) {
+      setAllotmentSize(isRight ? "rightPanel" : "bottomPanel", sizes[1])
+    }
+  }
+
+  useEventListener(window)("keydown", e => {
+    if (e.ctrlKey && e.key === "`") {
+      e.preventDefault()
+      setPaneVisible(!paneVisible)
+      paneVisibleRef.current = !paneVisible
+    }
+  })
+
+  const panelSizeVar = useMemo(
+    () => ({ "--panel-size": panelSize + "px" }) as React.CSSProperties,
+    [panelSize],
+  )
+
+  return (
+    <Allotment
+      key={!isRight ? "middle" : "right"}
+      vertical={!isRight}
+      onChange={onSubAllotmentSizeChange}
+      ref={allotment}
+    >
+      <Pane preferredSize={allotmentSizes.editor} snap key="editor">
+        <ErrorBoundary>
+          <Editor />
+        </ErrorBoundary>
+      </Pane>
+      <Pane
+        ref={paneRef}
+        preferredSize={panelSize}
+        snap
+        key="panel"
+        visible={paneVisible}
+      >
+        <Panels
+          style={panelSizeVar}
+          pane={activePaneTab}
+          setPane={setActivePaneTab}
+          position={panelPosition}
+          setPosition={setPanelPosition}
+        />
+      </Pane>
+    </Allotment>
+  )
+})
+
+function useAllotmentSizes<K extends string>(initialSize: {
+  [key in K]?: string | number
+}) {
+  const keys = Object.keys(initialSize) as K[]
+  const hooks = keys.map(key =>
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useLocalStorageState(getAllotmentCacheKey(key), initialSize[key]),
+  )
+
+  const set = (key: K, size: string | number) => {
+    const keyIndex = keys.indexOf(key)
+    hooks[keyIndex][1](size)
+  }
+
+  const sizes = Object.fromEntries(keys.map((key, index) => [key, hooks[index][0]])) as {
+    [key in K]: string | number
+  }
+
+  return [sizes, set] as const
+}
diff --git a/src/options/Editor/Monaco.tsx b/src/options/Editor/Monaco.tsx
new file mode 100644
index 0000000..82ea370
--- /dev/null
+++ b/src/options/Editor/Monaco.tsx
@@ -0,0 +1,136 @@
+import { css } from "@emotion/css"
+import * as monaco from "monaco-editor"
+import Editor from "@monaco-editor/react"
+import { useAutoCallback } from "hooks.macro"
+import { makeVar, useReactiveVar } from "@apollo/client"
+import { memo, useEffect } from "react"
+import { useTranslation } from "react-i18next"
+import { defineMonacoThemes } from "./themes"
+import { useDisposables } from "~/shared/hooks/useDisposables"
+import type { Morocco } from "./monaco.d"
+import { compilerErrorVars } from "../hooks/useSaveFile"
+import { useMonacoOptions, useMonacoTheme } from "./useOptions"
+
+type Editor = monaco.editor.IStandaloneCodeEditor
+
+const _import = <K extends keyof Morocco.ModuleMap>(name: K) =>
+  new Promise<Morocco.ModuleMap[K]>(resolve =>
+    (globalThis as any).require([name], resolve),
+  )
+
+function decorateMonaco({ editor }: typeof monaco) {
+  defineMonacoThemes({ editor })
+}
+
+interface MonacoProps {
+  editorRef: React.MutableRefObject<Editor | undefined>
+  fileName: string
+  content: string
+  readOnly?: boolean
+  onContentChange(content?: string): void
+}
+
+export const cursorPosition = makeVar<monaco.IPosition | undefined>(undefined)
+export const topLevelSymbols = makeVar<readonly monaco.languages.DocumentSymbol[]>([])
+export const editorMarkers = makeVar<readonly monaco.Uri[]>([])
+
+export const Monaco = memo<MonacoProps>(props => {
+  const { i18n } = useTranslation()
+  const { content, onContentChange, fileName, editorRef, readOnly } = props
+  const theme = useMonacoTheme()
+  const registerDisposable = useDisposables()
+  const compilerErrors = useReactiveVar(compilerErrorVars)
+
+  useEffect(() => {
+    const editor = editorRef.current
+    if (!editor) return
+
+    monaco.editor.setModelMarkers(
+      editor.getModel()!,
+      "compiler",
+      compilerErrors.map(e => ({
+        message: e.message.split("\n")[0],
+        severity: monaco.MarkerSeverity.Error,
+        startLineNumber: e.span.start.line + 1,
+        startColumn: e.span.start.column + 1,
+        endLineNumber: e.span.end.line + 1,
+        endColumn: e.span.end.column + 1,
+        source: "compiler",
+        code: "error",
+      })),
+    )
+  }, [compilerErrors, editorRef])
+
+  useEffect(() => {
+    topLevelSymbols([])
+  }, [fileName])
+
+  const onEditorReady = useAutoCallback(async (editor: Editor) => {
+    if (process.env.NODE_ENV === "development") {
+      Object.assign(globalThis, { editor })
+    }
+
+    const { StandaloneServices } = await _import(
+      "vs/editor/standalone/browser/standaloneServices",
+    )
+    const { ILanguageFeaturesService } = await _import(
+      "vs/editor/common/services/languageFeatures",
+    )
+    const { OutlineModel } = await _import(
+      "vs/editor/contrib/documentSymbols/browser/outlineModel",
+    )
+    const { documentSymbolProvider } = StandaloneServices.get(ILanguageFeaturesService)
+
+    registerDisposable(
+      editor.onDidChangeCursorPosition(async e => {
+        const outline = await OutlineModel.create(
+          documentSymbolProvider,
+          editor.getModel(),
+        )
+        cursorPosition(e.position)
+        topLevelSymbols(outline.getTopLevelSymbols())
+      }),
+      monaco.editor.onDidChangeMarkers(editorMarkers),
+    )
+  })
+
+  const options = useMonacoOptions({ readOnly })
+
+  return (
+    <Editor
+      className={editorClassName}
+      theme={theme}
+      defaultValue={content}
+      path={fileName}
+      options={options}
+      onChange={onContentChange}
+      onMount={editor => {
+        editorRef.current = editor
+        editor.getContainerDomNode().setAttribute("lang", getMonacoLangTag(i18n.language))
+        void onEditorReady(editor)
+      }}
+      beforeMount={decorateMonaco}
+    />
+  )
+})
+
+function getMonacoLangTag(language: string) {
+  switch (language) {
+    case "zh-HK":
+    case "zh-TW":
+      return "zh-hant"
+    case "zh-CN":
+      return "zh-Hans"
+    default:
+      return language
+  }
+}
+
+const editorClassName = css`
+  .monaco-scrollable-element > .scrollbar > .slider {
+    border-radius: 10px;
+  }
+  .monaco-editor .monaco-hover {
+    border-radius: 5px;
+  }
+`
diff --git a/src/options/Editor/Navigation/ItemIcon.tsx b/src/options/Editor/Navigation/ItemIcon.tsx
new file mode 100644
index 0000000..4316386
--- /dev/null
+++ b/src/options/Editor/Navigation/ItemIcon.tsx
@@ -0,0 +1,61 @@
+import * as monaco from "monaco-editor"
+import styled from "@emotion/styled"
+import { css } from "@emotion/css"
+import Icon from "@aet/icons/macro"
+import { color } from "../../theme"
+
+export const CHEVRON = (
+  <Icon
+    icon="VscChevronRight"
+    className={css`
+      margin-left: -4px;
+      margin-right: -4px;
+      margin-bottom: -2px;
+      font-size: 1.2em;
+    `}
+  />
+)
+
+const StyledSymbol = styled(Icon.of("VscSymbolClass"))`
+  font-size: 1.1em;
+  fill: ${color("#d67e00", "#ee9d28")};
+  margin-bottom: -1px;
+`
+
+const StyledModule = styled(Icon.of("VscJson"))`
+  font-size: 1.1em;
+  margin-bottom: -1px;
+`
+
+const StyledVariable = styled(Icon.of("VscSymbolVariable"))`
+  font-size: 1.6em;
+  fill: ${color("#75beff", "#75beff")};
+  margin-bottom: -1px;
+`
+
+const StyledMethod = styled(Icon.of("VscSymbolMethod"))`
+  fill: ${color("#6639ba", "#bc8cff")};
+  font-size: 1.1em;
+  margin-bottom: -1px;
+`
+
+export function ItemKind({
+  kind,
+  className,
+}: {
+  kind: monaco.languages.SymbolKind
+  className?: string
+}) {
+  switch (kind) {
+    case monaco.languages.SymbolKind.Class:
+      return <StyledSymbol className={className} />
+    case monaco.languages.SymbolKind.Module:
+      return <StyledModule className={className} />
+    case monaco.languages.SymbolKind.Variable:
+      return <StyledVariable className={className} />
+    case monaco.languages.SymbolKind.Method:
+      return <StyledMethod className={className} />
+    default:
+      return null
+  }
+}
diff --git a/src/options/Editor/Navigation/index.tsx b/src/options/Editor/Navigation/index.tsx
new file mode 100644
index 0000000..58d8f23
--- /dev/null
+++ b/src/options/Editor/Navigation/index.tsx
@@ -0,0 +1,175 @@
+import type * as monaco from "monaco-editor"
+import type { Range } from "monaco-editor"
+import styled from "@emotion/styled"
+import { css } from "@emotion/css"
+import { Popover } from "@headlessui/react"
+import { memo, useMemo } from "react"
+import { useReactiveVar } from "@apollo/client"
+import { uniqBy } from "lodash"
+import { token, vars } from "../../theme"
+import { getActiveFile, useSelector } from "../../store"
+import { cursorPosition, topLevelSymbols } from "../Monaco"
+import { editorNavigation } from "../../utils/emitter"
+import { CHEVRON, ItemKind } from "./ItemIcon"
+
+const NavContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 1px 12px;
+  font-size: 0.95em;
+  border-bottom: 1px solid var(--separator-border);
+  min-height: 30px;
+`
+const Segment = styled(Popover.Button)`
+  align-items: center;
+  border: none;
+  color: ${token.fg.muted};
+  display: flex;
+  flex-shrink: 0;
+  padding: 3px 1px;
+  gap: 3px;
+  &:hover {
+    color: ${token.fg.default};
+  }
+  &:focus-visible {
+    border-radius: 2px;
+    outline: 1px solid ${token.accent.fg};
+  }
+`
+
+const PopoverContainer = styled.form`
+  background-color: ${token.canvas.overlay};
+  border: 1px solid ${token.border.default};
+  border-radius: 5px;
+  box-shadow: ${token.shadow.large};
+  margin-top: 1px;
+  max-height: 510px;
+  overflow: auto;
+  position: absolute;
+  padding: 5px;
+  z-index: 1;
+`
+
+const NavItem = styled.button`
+  align-items: center;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  flex-shrink: 0;
+  font-size: 1.05em;
+  gap: 5px;
+  padding: 5px;
+  white-space: nowrap;
+  width: 100%;
+  min-width: 80px;
+
+  &:hover {
+    background-color: ${vars.backgroundActive};
+  }
+`
+
+const NavItemText = styled.span`
+  max-width: 185px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`
+
+export const NavView = memo(() => {
+  const symbols = useReactiveVar(topLevelSymbols)
+  const cursor = useReactiveVar(cursorPosition)
+  const { childrenMap, parentMap } = useMemo(() => group(symbols), [symbols])
+
+  const nav = useMemo(
+    () =>
+      uniqBy(
+        symbols.filter(item => (item.range as Range).containsPosition(cursor!)),
+        item => JSON.stringify(item.range),
+      ),
+    [symbols, cursor],
+  )
+
+  const hasStyle = useSelector(state => getActiveFile(state) != null)
+
+  if (!hasStyle) {
+    return null
+  }
+
+  return (
+    <NavContainer>
+      {CHEVRON}
+      {nav.map((item, i, { length }) => {
+        const siblings = childrenMap.get(parentMap.get(item)!)
+
+        return (
+          <Popover
+            className={css`
+              position: relative;
+            `}
+            key={i}
+          >
+            <Segment disabled={!siblings?.length}>
+              <ItemKind kind={item.kind} />
+              {item.name}
+              {i < length - 1 && CHEVRON}
+            </Segment>
+            <PopoverContainer as={Popover.Panel}>
+              {siblings?.map((child, i) => (
+                <NavItem
+                  key={i}
+                  onClick={() => {
+                    editorNavigation.emit({
+                      position: (child.range as Range).getStartPosition(),
+                    })
+                  }}
+                >
+                  <ItemKind
+                    kind={child.kind}
+                    className={css`
+                      font-size: 1.1em !important;
+                    `}
+                  />
+                  <NavItemText title={child.name}>{child.name}</NavItemText>
+                </NavItem>
+              ))}
+            </PopoverContainer>
+          </Popover>
+        )
+      })}
+      {!nav.length && <div>...</div>}
+    </NavContainer>
+  )
+})
+
+type DocumentSymbol = monaco.languages.DocumentSymbol
+
+function group(symbols: readonly DocumentSymbol[]) {
+  const parentMap = new WeakMap<DocumentSymbol, DocumentSymbol>()
+  const childrenMap = new WeakMap<DocumentSymbol, DocumentSymbol[]>()
+
+  const dummyNode = {} as DocumentSymbol
+
+  for (let i = 0; i < symbols.length; i++) {
+    const symbol = symbols[i]
+    for (let j = i + 1; j < symbols.length; j++) {
+      const other = symbols[j]
+      if ((symbol.range as monaco.Range).containsRange(other.range)) {
+        parentMap.set(other, symbol)
+        if (!childrenMap.has(symbol)) {
+          childrenMap.set(symbol, [other])
+        } else {
+          childrenMap.get(symbol)!.push(other)
+        }
+      }
+    }
+  }
+
+  const roots = symbols.filter(item => !parentMap.has(item))
+  roots.forEach(item => {
+    parentMap.set(item, dummyNode)
+  })
+  childrenMap.set(dummyNode, roots)
+
+  return { parentMap, childrenMap }
+}
diff --git a/src/options/Editor/Tabs/CloseDot.tsx b/src/options/Editor/Tabs/CloseDot.tsx
new file mode 100644
index 0000000..b2ee479
--- /dev/null
+++ b/src/options/Editor/Tabs/CloseDot.tsx
@@ -0,0 +1,34 @@
+import { memo } from "react"
+import { css } from "@emotion/css"
+import Icon from "@aet/icons/macro"
+import { useEvent } from "@aet/hooks"
+import { useSelector } from "~/options/store"
+import { useTabCloser } from "./utils"
+import { ButtonWrapper } from "~/shared/styled"
+
+export const TabCloseButton = memo((props: { fileId: string; fileName: string }) => {
+  const { fileId, fileName } = props
+  const close = useTabCloser()
+
+  const isDirty = useSelector(s => s.dirtyFileIds.has(fileId))
+
+  const onClick = useEvent((e: React.MouseEvent) => {
+    e.stopPropagation()
+    void close(fileId, fileName)
+  })
+
+  return (
+    <ButtonWrapper onClick={onClick}>
+      {isDirty ? (
+        <Icon icon="GoDot" />
+      ) : (
+        <Icon
+          icon="MdOutlineClose"
+          className={css`
+            margin-left: 4px;
+          `}
+        />
+      )}
+    </ButtonWrapper>
+  )
+})
diff --git a/src/options/Editor/Tabs/index.tsx b/src/options/Editor/Tabs/index.tsx
new file mode 100644
index 0000000..b57901c
--- /dev/null
+++ b/src/options/Editor/Tabs/index.tsx
@@ -0,0 +1,151 @@
+import { createContext, memo, useContext } from "react"
+import styled from "@emotion/styled"
+import { css, cx } from "@emotion/css"
+import { ControlledMenu, MenuItem } from "@szhsin/react-menu"
+import { useTranslation } from "react-i18next"
+import { useQuery } from "@apollo/client"
+import { useEvent } from "@aet/hooks"
+import { Pill } from "~/shared/styled"
+import { setActiveFileId } from "~/options/store/actions"
+import { getTabs, useDispatch, useSelector } from "~/options/store"
+import { useDropdownMenu } from "~/options/hooks/useDropdownMenu"
+import { EditorTabQuery, useTabsCloser } from "./utils"
+import { isGlobalStyle } from "~/shared"
+import { TabCloseButton } from "./CloseDot"
+
+const TabButton = memo((props: TabProps) => {
+  const { fileId } = props
+  const { t } = useTranslation()
+  const { menu, onMouse: onMenu } = useTabMenu(props)
+  const dispatch = useDispatch()
+
+  const isActive = useSelector(s => s.activeFileId === fileId)
+  const isPreviewFile = useSelector(s => s.previewFileId === fileId)
+
+  const { data } = useQuery(EditorTabQuery, {
+    fetchPolicy: "cache-first",
+    variables: { id: fileId },
+  })
+
+  const file = data?.file
+
+  const name = isGlobalStyle(file) ? t("file.nameGlobalStyle") : file?.name
+
+  return (
+    <StyledTabButton
+      type="button"
+      key={fileId}
+      className={cx({
+        active: isActive,
+        inactive: !isActive,
+        ephemeral: isPreviewFile,
+      })}
+      title={name}
+      onContextMenu={onMenu}
+      lang={file?.nameLanguage || undefined}
+      onClick={useEvent(e => {
+        e.stopPropagation()
+        dispatch(setActiveFileId(fileId))
+      })}
+      tabIndex={0}
+    >
+      <span>{name ?? "..."}</span>
+      {file && <TabCloseButton fileId={file.id} fileName={file.name} />}
+      {menu}
+    </StyledTabButton>
+  )
+})
+
+const EditorTabsContext = createContext<ReturnType<typeof useTabsCloser>>(undefined!)
+
+export const EditorTabs: React.FC = memo(() => {
+  const tabs = useSelector(getTabs)
+  const closers = useTabsCloser(tabs)
+
+  return (
+    <EditorTabsContext.Provider value={closers}>
+      <TabContainer>
+        {tabs.map((file, i, { length }) => (
+          <TabButton
+            fileId={file.id}
+            key={file.id}
+            canCloseOthers={tabs.length > 1}
+            canCloseRight={i < length - 1}
+          />
+        ))}
+      </TabContainer>
+    </EditorTabsContext.Provider>
+  )
+})
+
+interface TabProps {
+  fileId: string
+  canCloseOthers: boolean
+  canCloseRight: boolean
+}
+
+function useTabMenu({ fileId, canCloseOthers, canCloseRight }: TabProps) {
+  const { t } = useTranslation()
+  const ctx = useContext(EditorTabsContext)
+  const { menuProps, onMouse } = useDropdownMenu(css`
+    .szh-menu__item {
+      padding-right: 5px;
+    }
+  `)
+
+  const menu =
+    menuProps.state === "open" ? (
+      <ControlledMenu
+        {...menuProps}
+        className={cx(
+          menuProps.className as string,
+          canCloseRight &&
+            css`
+              .szh-menu--state-open {
+                min-width: 220px;
+              }
+            `,
+        )}
+      >
+        <MenuItem onClick={() => ctx.onCloseTab(fileId)}>{t("tabs.verbClose")}</MenuItem>
+        {canCloseOthers && (
+          <MenuItem onClick={() => ctx.onCloseOthers(fileId)}>
+            {t("tabs.verbCloseOthers")}
+          </MenuItem>
+        )}
+        {canCloseRight && (
+          <MenuItem onClick={() => ctx.onCloseRight(fileId)}>
+            {t("tabs.verbCloseRight")}
+          </MenuItem>
+        )}
+        <MenuItem onClick={() => ctx.onCloseAll()}>{t("tabs.verbCloseAll")}</MenuItem>
+      </ControlledMenu>
+    ) : null
+
+  return { menu, onMouse }
+}
+
+const TabContainer = styled.div`
+  display: flex;
+  gap: 5px;
+  margin-left: 10px;
+  margin-top: 5px;
+`
+
+const StyledTabButton = styled(Pill)`
+  cursor: default;
+  padding-right: 7px;
+  user-select: none;
+  &.inactive {
+    border-color: transparent;
+    background: none;
+  }
+  &.ephemeral {
+    font-style: italic;
+    &:lang(zh),
+    &:lang(ja),
+    &:lang(ko) {
+      font-style: normal;
+    }
+  }
+`
diff --git a/src/options/Editor/Tabs/utils.tsx b/src/options/Editor/Tabs/utils.tsx
new file mode 100644
index 0000000..a70ad48
--- /dev/null
+++ b/src/options/Editor/Tabs/utils.tsx
@@ -0,0 +1,91 @@
+import { useAutoMemo } from "hooks.macro"
+import { useEvent } from "@aet/hooks"
+import { gql, useLazyQuery } from "~/generated/graphql"
+import { closeFile } from "../../store/actions"
+import { useDispatch, useSelector } from "../../store"
+import { useFileSaver } from "../../hooks/useSaveFile"
+import { ConfirmResult, confirmClose } from "../useConfirmClose"
+import type { ReduxFile } from "../../store/state"
+
+export const EditorTabQuery = gql<"EditorTabQuery">`
+  query EditorTabQuery($id: ID!) {
+    file(id: $id) {
+      id
+      name
+      nameLanguage
+    }
+  }
+`
+
+export function useTabsCloser(tabs: ReduxFile[]) {
+  const close = useTabCloser()
+
+  const onCloseMultipleTabs = useEvent(async (fileIds: string[]) => {
+    for (const fileId of fileIds) {
+      if (!(await close(fileId))) {
+        return
+      }
+    }
+  })
+
+  const onCloseTab = useEvent(async (fileId: string, name?: string) => {
+    await close(fileId, name)
+  })
+  const onCloseOthers = useEvent(async (fileId: string) => {
+    await onCloseMultipleTabs(tabs.filter(t => t.id !== fileId).map(t => t.id))
+  })
+  const onCloseRight = useEvent(async (fileId: string) => {
+    const index = tabs.findIndex(t => t.id === fileId)
+    await onCloseMultipleTabs(tabs.slice(index + 1).map(t => t.id))
+  })
+  const onCloseAll = useEvent(async () => {
+    await onCloseMultipleTabs(tabs.map(t => t.id))
+  })
+
+  return useAutoMemo({
+    onCloseMultipleTabs,
+    onCloseTab,
+    onCloseOthers,
+    onCloseRight,
+    onCloseAll,
+  })
+}
+
+export function useTabCloser() {
+  const dirtyFileIds = useSelector(s => s.dirtyFileIds)
+  const dispatch = useDispatch()
+  const save = useFileSaver()
+  const [fetchFileData] = useLazyQuery(EditorTabQuery, { fetchPolicy: "cache-only" })
+
+  const close = useEvent(async (fileId: string, fileName?: string) => {
+    if (!fileId) {
+      return false
+    }
+    if (!dirtyFileIds.has(fileId)) {
+      dispatch(closeFile(fileId))
+      return true
+    }
+
+    if (!fileName) {
+      const { data } = await fetchFileData({ variables: { id: fileId } })
+      if (!data?.file) {
+        return false
+      }
+      fileName = data.file.name
+    }
+
+    switch (await confirmClose(fileName)) {
+      case ConfirmResult.Save:
+        await save(fileId)
+        dispatch(closeFile(fileId))
+        return true
+      case ConfirmResult.Discard:
+        dispatch(closeFile(fileId))
+        return true
+      case ConfirmResult.Cancel:
+        return false
+    }
+  })
+
+  return close
+}
diff --git a/src/options/Editor/index.tsx b/src/options/Editor/index.tsx
new file mode 100644
index 0000000..cc84632
--- /dev/null
+++ b/src/options/Editor/index.tsx
@@ -0,0 +1,120 @@
+import type monaco from "monaco-editor"
+import styled from "@emotion/styled"
+import { memo, useEffect, useRef } from "react"
+import { useEvent, useEventListener } from "@aet/hooks"
+import { gql, useQuery } from "~/generated/graphql"
+import { Monaco } from "./Monaco"
+import { EditorTabs } from "./Tabs"
+import { NavView } from "./Navigation"
+import { LIGHT_MODE, token } from "../theme"
+import { editorNavigation } from "../utils/emitter"
+import { useFileSaver } from "../hooks/useSaveFile"
+import { getActiveFile, useDispatch, useSelector } from "../store"
+import { setFileCode } from "../store/actions"
+import { showErrorToast } from "~/shared/hooks/useShowApolloError"
+import { FileState } from "~/shared/models/enums.generated"
+
+const EDITOR_CONTAINER_QUERY = gql<"EditorContainerQuery">`
+  query EditorContainerQuery($id: ID!) {
+    file(id: $id) {
+      id
+      state
+    }
+    preferences {
+      formatOnSave
+    }
+  }
+`
+
+export const Editor = memo(() => {
+  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>()
+  const style = useSelector(getActiveFile)
+  const dispatch = useDispatch()
+
+  const updateCode = useEvent((code: string) => {
+    dispatch(setFileCode(code))
+  })
+
+  const { data } = useQuery(EDITOR_CONTAINER_QUERY, {
+    variables: { id: style?.id as string },
+    skip: !style?.id,
+    onError: showErrorToast,
+  })
+
+  const save = useFileSaver()
+
+  const isWritable = data?.file?.state === FileState.None
+  const formatOnSave = data?.preferences?.formatOnSave ?? false
+
+  useEffect(
+    () =>
+      editorNavigation.listen(({ fileId: styleId, position }) => {
+        const editor = editorRef.current
+        if (!editor || !style?.id) return
+
+        if (style.id === styleId || styleId == null) {
+          if (typeof position === "number") {
+            position = editor.getModel()!.getPositionAt(position)
+          }
+          editor.setPosition(position)
+          editor.revealLine(position.lineNumber)
+          editor.focus()
+        }
+      }),
+    [style?.id],
+  )
+
+  useEffect(() => {
+    editorRef.current?.focus()
+  }, [style?.id])
+
+  // Meta + S to save
+  useEventListener(window)("keydown", async e => {
+    if (e.metaKey && e.key === "s" && style?.id != null) {
+      e.preventDefault()
+      if (formatOnSave) {
+        await editorRef.current!.getAction("editor.action.formatDocument")!.run()
+      }
+      await new Promise(resolve => setTimeout(resolve, 90))
+      await save(style.id, editorRef.current!.getValue())
+    }
+  })
+
+  // Meta + Shift + P to trigger the command palette in editor
+  useEventListener(window)("keydown", e => {
+    if (e.metaKey && e.shiftKey && e.key === "p") {
+      editorRef.current!.trigger("keyboard", "editor.action.quickCommand", {})
+    }
+  })
+
+  return (
+    <EditorContainer>
+      <EditorTabs />
+      <NavView />
+      <MonacoContainer>
+        {style != null && (
+          <Monaco
+            editorRef={editorRef}
+            fileName={`${style.id}.scss`}
+            content={style.sections[0].code}
+            onContentChange={updateCode}
+            readOnly={!isWritable}
+          />
+        )}
+      </MonacoContainer>
+    </EditorContainer>
+  )
+})
+
+const EditorContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  ${LIGHT_MODE} {
+    background: ${token.canvas.inset};
+  }
+`
+
+const MonacoContainer = styled.div`
+  flex-grow: 1;
+`
diff --git a/src/options/Editor/monaco.d.ts b/src/options/Editor/monaco.d.ts
new file mode 100644
index 0000000..6635736
--- /dev/null
+++ b/src/options/Editor/monaco.d.ts
@@ -0,0 +1,87 @@
+import type * as monaco from "monaco-editor"
+import type { OutlineModel } from "./outlineModel"
+
+declare namespace Morocco {
+  type DocumentSymbolProvider = { __type?: "DocumentSymbolProvider" }
+  type CodeActionProvider = unknown
+  type CodeLensProvider = unknown
+  type DocumentColorProvider = unknown
+  type CompletionItemProvider = unknown
+  type DeclarationProvider = unknown
+  type DefinitionProvider = unknown
+  type DocumentFormattingEditProvider = unknown
+  type DocumentHighlightProvider = unknown
+  type DocumentOnDropEditProvider = unknown
+  type DocumentPasteEditProvider = unknown
+  type DocumentRangeFormattingEditProvider = unknown
+  type DocumentRangeSemanticTokensProvider = unknown
+  type DocumentSemanticTokensProvider = unknown
+  type EvaluatableExpressionProvider = unknown
+  type FoldingRangeProvider = unknown
+  type HoverProvider = unknown
+  type ImplementationProvider = unknown
+  type InlayHintsProvider = unknown
+  type InlineCompletionsProvider = unknown
+  type InlineValuesProvider = unknown
+  type LinkedEditingRangeProvider = unknown
+  type LinkProvider = unknown
+  type OnTypeFormattingEditProvider = unknown
+  type ReferenceProvider = unknown
+  type RenameProvider = unknown
+  type SelectionRangeProvider = unknown
+  type SignatureHelpProvider = unknown
+  type TypeDefinitionProvider = unknown
+
+  type ServiceIdentifier<_T> = { readonly __type: unique symbol }
+
+  interface ILanguageFeaturesService {
+    codeActionProvider: CodeActionProvider
+    codeLensProvider: CodeLensProvider
+    colorProvider: DocumentColorProvider
+    completionProvider: CompletionItemProvider
+    declarationProvider: DeclarationProvider
+    definitionProvider: DefinitionProvider
+    documentFormattingEditProvider: DocumentFormattingEditProvider
+    documentHighlightProvider: DocumentHighlightProvider
+    documentOnDropEditProvider: DocumentOnDropEditProvider
+    documentPasteEditProvider: DocumentPasteEditProvider
+    documentRangeFormattingEditProvider: DocumentRangeFormattingEditProvider
+    documentRangeSemanticTokensProvider: DocumentRangeSemanticTokensProvider
+    documentSemanticTokensProvider: DocumentSemanticTokensProvider
+    documentSymbolProvider: DocumentSymbolProvider
+    evaluatableExpressionProvider: EvaluatableExpressionProvider
+    foldingRangeProvider: FoldingRangeProvider
+    hoverProvider: HoverProvider
+    implementationProvider: ImplementationProvider
+    inlayHintsProvider: InlayHintsProvider
+    inlineCompletionsProvider: InlineCompletionsProvider
+    inlineValuesProvider: InlineValuesProvider
+    linkedEditingRangeProvider: LinkedEditingRangeProvider
+    linkProvider: LinkProvider
+    onTypeFormattingEditProvider: OnTypeFormattingEditProvider
+    referenceProvider: ReferenceProvider
+    renameProvider: RenameProvider
+    selectionRangeProvider: SelectionRangeProvider
+    signatureHelpProvider: SignatureHelpProvider
+    typeDefinitionProvider: TypeDefinitionProvider
+  }
+
+  export interface ModuleMap {
+    "vs/editor/common/services/languageFeatures": {
+      ILanguageFeaturesService: ServiceIdentifier<Readonly<ILanguageFeaturesService>>
+    }
+    "vs/editor/contrib/documentSymbols/browser/outlineModel": {
+      OutlineModel: {
+        create(
+          documentSymbolProvider: DocumentSymbolProvider,
+          model: monaco.editor.ITextModel | null,
+        ): Promise<OutlineModel>
+      }
+    }
+    "vs/editor/standalone/browser/standaloneServices": {
+      StandaloneServices: {
+        get<T>(serviceId: ServiceIdentifier<T>): T
+      }
+    }
+  }
+}
diff --git a/src/options/Editor/outlineModel.d.ts b/src/options/Editor/outlineModel.d.ts
new file mode 100644
index 0000000..8b37bf8
--- /dev/null
+++ b/src/options/Editor/outlineModel.d.ts
@@ -0,0 +1,109 @@
+// https://github.com/microsoft/vscode/blob/4c0cecf300334511c6ef64f40ba584dcbe3a03de/src/vs/editor/contrib/documentSymbols/browser/outlineModel.ts
+/* ---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import type {
+  CancellationToken,
+  IPosition,
+  MarkerSeverity,
+  Uri,
+  editor,
+  languages,
+} from "monaco-editor"
+
+export abstract class TreeElement {
+  abstract id: string
+  abstract children: Map<string, TreeElement>
+  abstract parent: TreeElement | undefined
+
+  remove(): void
+
+  static findId(
+    candidate: languages.DocumentSymbol | string,
+    container: TreeElement,
+  ): string
+  static getElementById(id: string, element: TreeElement): TreeElement | undefined
+  static size(element: TreeElement): number
+  static empty(element: TreeElement): boolean
+}
+
+export interface IOutlineMarker {
+  startLineNumber: number
+  startColumn: number
+  endLineNumber: number
+  endColumn: number
+  severity: MarkerSeverity
+}
+
+export class OutlineElement extends TreeElement {
+  readonly id: string
+  readonly symbol: languages.DocumentSymbol
+  parent: TreeElement | undefined
+  children: Map<string, OutlineElement>
+  marker: { count: number; topSev: MarkerSeverity } | undefined
+
+  constructor(
+    id: string,
+    parent: TreeElement | undefined,
+    symbol: languages.DocumentSymbol,
+  )
+}
+
+export class OutlineGroup extends TreeElement {
+  readonly id: string
+  public parent: TreeElement | undefined
+  readonly label: string
+  readonly order: number
+  children: Map<string, OutlineElement>
+
+  constructor(id: string, parent: TreeElement | undefined, label: string, order: number)
+
+  getItemEnclosingPosition(position: IPosition): OutlineElement | undefined
+
+  private _getItemEnclosingPosition(
+    position: IPosition,
+    children: Map<string, OutlineElement>,
+  ): OutlineElement | undefined
+
+  updateMarker(marker: IOutlineMarker[]): void
+
+  private _updateMarker(markers: IOutlineMarker[], item: OutlineElement): void
+}
+
+export class OutlineModel extends TreeElement {
+  static create(
+    registry: never, // LanguageFeatureRegistry<languages.DocumentSymbolProvider>,
+    textModel: editor.ITextModel,
+    token: CancellationToken,
+  ): Promise<OutlineModel>
+
+  private static _makeOutlineElement(
+    info: languages.DocumentSymbol,
+    container: OutlineGroup | OutlineElement,
+  ): void
+
+  static get(element: TreeElement | undefined): OutlineModel | undefined
+
+  readonly id: "root"
+  readonly parent: undefined
+
+  protected _groups: Map<string, OutlineGroup>
+  children: Map<string, OutlineGroup | OutlineElement>
+
+  readonly uri: Uri
+
+  protected constructor(uri: Uri)
+
+  private _compact(): this
+
+  getTopLevelSymbols(): languages.DocumentSymbol[]
+
+  asListOfDocumentSymbols(): languages.DocumentSymbol[]
+
+  private static _flattenDocumentSymbols(
+    bucket: languages.DocumentSymbol[],
+    entries: languages.DocumentSymbol[],
+    overrideContainerLabel: string,
+  )
+}
diff --git a/src/options/Editor/themes/convert.ts b/src/options/Editor/themes/convert.ts
new file mode 100755
index 0000000..7c365a3
--- /dev/null
+++ b/src/options/Editor/themes/convert.ts
@@ -0,0 +1,19 @@
+#!/usr/bin/env -S node -r esbin
+import fs from "fs"
+import { resolve } from "path"
+
+const file = resolve(__dirname, "githubDark.json")
+const json = JSON.parse(fs.readFileSync(file, "utf8"))
+
+const ensureArray = <T>(value: T | T[]): T[] => (Array.isArray(value) ? value : [value])
+
+json.rules = (
+  json.tokenColors as {
+    scope: string | string[]
+    settings: { [key: string]: string }
+  }[]
+).flatMap(({ settings, scope }) =>
+  ensureArray(scope).map(token => ({ token, ...settings })),
+)
+
+fs.writeFileSync(file, JSON.stringify(json, null, 2))
diff --git a/src/options/Editor/themes/githubDark.json b/src/options/Editor/themes/githubDark.json
new file mode 100644
index 0000000..d8d2671
--- /dev/null
+++ b/src/options/Editor/themes/githubDark.json
@@ -0,0 +1,527 @@
+{
+  "$schema": "vscode://schemas/color-theme",
+  "inherit": true,
+  "base": "vs-dark",
+  "colors": {
+    "activityBar.activeBorder": "#f9826c",
+    "activityBar.background": "#24292e",
+    "activityBar.border": "#1b1f23",
+    "activityBar.foreground": "#e1e4e8",
+    "activityBar.inactiveForeground": "#6a737d",
+    "activityBarBadge.background": "#0366d6",
+    "activityBarBadge.foreground": "#ffffff",
+    "badge.background": "#044289",
+    "badge.foreground": "#c8e1ff",
+    "breadcrumb.activeSelectionForeground": "#d1d5da",
+    "breadcrumb.focusForeground": "#e1e4e8",
+    "breadcrumb.foreground": "#959da5",
+    "breadcrumbPicker.background": "#2b3036",
+    "button.background": "#176f2c",
+    "button.foreground": "#dcffe4",
+    "button.hoverBackground": "#22863a",
+    "button.secondaryBackground": "#444d56",
+    "button.secondaryForeground": "#ffffff",
+    "button.secondaryHoverBackground": "#586069",
+    "checkbox.background": "#444d56",
+    "checkbox.border": "#1b1f23",
+    "debugToolBar.background": "#2b3036",
+    "descriptionForeground": "#959da5",
+    "diffEditor.insertedTextBackground": "#28a74530",
+    "diffEditor.removedTextBackground": "#d73a4930",
+    "dropdown.background": "#2f363d",
+    "dropdown.border": "#1b1f23",
+    "dropdown.foreground": "#e1e4e8",
+    "dropdown.listBackground": "#24292e",
+    "editor.background": "#24292e",
+    "editor.findMatchBackground": "#ffd33d44",
+    "editor.findMatchHighlightBackground": "#ffd33d22",
+    "editor.focusedStackFrameHighlightBackground": "#2b6a3033",
+    "editor.foldBackground": "#58606915",
+    "editor.foreground": "#e1e4e8",
+    "editor.inactiveSelectionBackground": "#3392ff22",
+    "editor.lineHighlightBackground": "#2b3036",
+    "editor.linkedEditingBackground": "#3392ff22",
+    "editor.selectionBackground": "#3392ff44",
+    "editor.selectionHighlightBackground": "#17e5e633",
+    "editor.selectionHighlightBorder": "#17e5e600",
+    "editor.stackFrameHighlightBackground": "#c6902625",
+    "editor.wordHighlightBackground": "#17e5e600",
+    "editor.wordHighlightBorder": "#17e5e699",
+    "editor.wordHighlightStrongBackground": "#17e5e600",
+    "editor.wordHighlightStrongBorder": "#17e5e666",
+    "editorBracketHighlight.foreground1": "#79b8ff",
+    "editorBracketHighlight.foreground2": "#ffab70",
+    "editorBracketHighlight.foreground3": "#b392f0",
+    "editorBracketHighlight.foreground4": "#79b8ff",
+    "editorBracketHighlight.foreground5": "#ffab70",
+    "editorBracketHighlight.foreground6": "#b392f0",
+    "editorBracketMatch.background": "#17e5e650",
+    "editorBracketMatch.border": "#17e5e600",
+    "editorCursor.foreground": "#c8e1ff",
+    "editorError.foreground": "#f97583",
+    "editorGroup.border": "#1b1f23",
+    "editorGroupHeader.tabsBackground": "#1f2428",
+    "editorGroupHeader.tabsBorder": "#1b1f23",
+    "editorGutter.addedBackground": "#28a745",
+    "editorGutter.deletedBackground": "#ea4a5a",
+    "editorGutter.modifiedBackground": "#2188ff",
+    "editorIndentGuide.activeBackground": "#444d56",
+    "editorIndentGuide.background": "#2f363d",
+    "editorLineNumber.activeForeground": "#e1e4e8",
+    "editorLineNumber.foreground": "#444d56",
+    "editorOverviewRuler.border": "#1b1f23",
+    "editorWarning.foreground": "#ffea7f",
+    "editorWhitespace.foreground": "#444d56",
+    "editorWidget.background": "#1f2428",
+    "errorForeground": "#f97583",
+    "focusBorder": "#005cc5",
+    "foreground": "#d1d5da",
+    "gitDecoration.addedResourceForeground": "#34d058",
+    "gitDecoration.conflictingResourceForeground": "#ffab70",
+    "gitDecoration.deletedResourceForeground": "#ea4a5a",
+    "gitDecoration.ignoredResourceForeground": "#6a737d",
+    "gitDecoration.modifiedResourceForeground": "#79b8ff",
+    "gitDecoration.submoduleResourceForeground": "#6a737d",
+    "gitDecoration.untrackedResourceForeground": "#34d058",
+    "input.background": "#2f363d",
+    "input.border": "#1b1f23",
+    "input.foreground": "#e1e4e8",
+    "input.placeholderForeground": "#959da5",
+    "list.activeSelectionBackground": "#39414a",
+    "list.activeSelectionForeground": "#e1e4e8",
+    "list.focusBackground": "#044289",
+    "list.hoverBackground": "#282e34",
+    "list.hoverForeground": "#e1e4e8",
+    "list.inactiveFocusBackground": "#1d2d3e",
+    "list.inactiveSelectionBackground": "#282e34",
+    "list.inactiveSelectionForeground": "#e1e4e8",
+    "notificationCenterHeader.background": "#24292e",
+    "notificationCenterHeader.foreground": "#959da5",
+    "notifications.background": "#2f363d",
+    "notifications.border": "#1b1f23",
+    "notifications.foreground": "#e1e4e8",
+    "notificationsErrorIcon.foreground": "#ea4a5a",
+    "notificationsInfoIcon.foreground": "#79b8ff",
+    "notificationsWarningIcon.foreground": "#ffab70",
+    "panel.background": "#1f2428",
+    "panel.border": "#1b1f23",
+    "panelInput.border": "#2f363d",
+    "panelTitle.activeBorder": "#f9826c",
+    "panelTitle.activeForeground": "#e1e4e8",
+    "panelTitle.inactiveForeground": "#959da5",
+    "peekViewEditor.background": "#1f242888",
+    "peekViewEditor.matchHighlightBackground": "#ffd33d33",
+    "peekViewResult.background": "#1f2428",
+    "peekViewResult.matchHighlightBackground": "#ffd33d33",
+    "pickerGroup.border": "#444d56",
+    "pickerGroup.foreground": "#e1e4e8",
+    "progressBar.background": "#0366d6",
+    "quickInput.background": "#24292e",
+    "quickInput.foreground": "#e1e4e8",
+    "scrollbar.shadow": "#00000088",
+    "scrollbarSlider.activeBackground": "#6a737d88",
+    "scrollbarSlider.background": "#6a737d33",
+    "scrollbarSlider.hoverBackground": "#6a737d44",
+    "settings.headerForeground": "#e1e4e8",
+    "settings.modifiedItemIndicator": "#0366d6",
+    "sideBar.background": "#1f2428",
+    "sideBar.border": "#1b1f23",
+    "sideBar.foreground": "#d1d5da",
+    "sideBarSectionHeader.background": "#1f2428",
+    "sideBarSectionHeader.border": "#1b1f23",
+    "sideBarSectionHeader.foreground": "#e1e4e8",
+    "sideBarTitle.foreground": "#e1e4e8",
+    "statusBar.background": "#24292e",
+    "statusBar.border": "#1b1f23",
+    "statusBar.debuggingBackground": "#931c06",
+    "statusBar.debuggingForeground": "#ffffff",
+    "statusBar.foreground": "#d1d5da",
+    "statusBar.noFolderBackground": "#24292e",
+    "statusBarItem.prominentBackground": "#282e34",
+    "statusBarItem.remoteBackground": "#24292e",
+    "statusBarItem.remoteForeground": "#d1d5da",
+    "tab.activeBackground": "#24292e",
+    "tab.activeBorder": "#24292e",
+    "tab.activeBorderTop": "#f9826c",
+    "tab.activeForeground": "#e1e4e8",
+    "tab.border": "#1b1f23",
+    "tab.hoverBackground": "#24292e",
+    "tab.inactiveBackground": "#1f2428",
+    "tab.inactiveForeground": "#959da5",
+    "tab.unfocusedActiveBorder": "#24292e",
+    "tab.unfocusedActiveBorderTop": "#1b1f23",
+    "tab.unfocusedHoverBackground": "#24292e",
+    "terminal.ansiBlack": "#586069",
+    "terminal.ansiBlue": "#2188ff",
+    "terminal.ansiBrightBlack": "#959da5",
+    "terminal.ansiBrightBlue": "#79b8ff",
+    "terminal.ansiBrightCyan": "#56d4dd",
+    "terminal.ansiBrightGreen": "#85e89d",
+    "terminal.ansiBrightMagenta": "#b392f0",
+    "terminal.ansiBrightRed": "#f97583",
+    "terminal.ansiBrightWhite": "#fafbfc",
+    "terminal.ansiBrightYellow": "#ffea7f",
+    "terminal.ansiCyan": "#39c5cf",
+    "terminal.ansiGreen": "#34d058",
+    "terminal.ansiMagenta": "#b392f0",
+    "terminal.ansiRed": "#ea4a5a",
+    "terminal.ansiWhite": "#d1d5da",
+    "terminal.ansiYellow": "#ffea7f",
+    "terminal.foreground": "#d1d5da",
+    "terminal.tab.activeBorder": "#f9826c",
+    "terminalCursor.background": "#586069",
+    "terminalCursor.foreground": "#79b8ff",
+    "textBlockQuote.background": "#24292e",
+    "textBlockQuote.border": "#444d56",
+    "textCodeBlock.background": "#2f363d",
+    "textLink.activeForeground": "#c8e1ff",
+    "textLink.foreground": "#79b8ff",
+    "textPreformat.foreground": "#d1d5da",
+    "textSeparator.foreground": "#586069",
+    "titleBar.activeBackground": "#24292e",
+    "titleBar.activeForeground": "#e1e4e8",
+    "titleBar.border": "#1b1f23",
+    "titleBar.inactiveBackground": "#1f2428",
+    "titleBar.inactiveForeground": "#959da5",
+    "tree.indentGuidesStroke": "#2f363d"
+  },
+  "rules": [
+    {
+      "token": "comment",
+      "foreground": "#6A737D"
+    },
+    {
+      "token": "punctuation.definition.comment",
+      "foreground": "#6A737D"
+    },
+    {
+      "token": "string.comment",
+      "foreground": "#6A737D"
+    },
+    {
+      "token": "constant",
+      "foreground": "#79B8FF"
+    },
+    {
+      "token": "entity.name.constant",
+      "foreground": "#79B8FF"
+    },
+    {
+      "token": "variable.other.constant",
+      "foreground": "#79B8FF"
+    },
+    {
+      "token": "variable.other.enummember",
+      "foreground": "#79B8FF"
+    },
+    {
+      "token": "variable.language",
+      "foreground": "#79B8FF"
+    },
+    {
+      "token": "entity",
+      "foreground": "#B392F0"
+    },
+    {
+      "token": "entity.name",
+      "foreground": "#B392F0"
+    },
+    {
+      "token": "variable.parameter.function",
+      "foreground": "#E1E4E8"
+    },
+    {
+      "token": "entity.name.tag",
+      "foreground": "#85E89D"
+    },
+    {
+      "token": "keyword",
+      "foreground": "#F97583"
+    },
+    {
+      "token": "storage",
+      "foreground": "#F97583"
+    },
+    {
+      "token": "storage.type",
+      "foreground": "#F97583"
+    },
+    {
+      "token": "storage.modifier.package",
+      "foreground": "#E1E4E8"
+    },
+    {
+      "token": "storage.modifier.import",
+      "foreground": "#E1E4E8"
+    },
+    {
+      "token": "storage.type.java",
+      "foreground": "#E1E4E8"
+    },
+    {
+      "token": "string",
+      "foreground": "#9ECBFF"
+    },
+    {
+      "token": "punctuation.definition.string",
+      "foreground": "#9ECBFF"
+    },
+    {
+      "token": "string punctuation.section.embedded source",
+      "foreground": "#9ECBFF"
+    },
+    {
+      "token": "support",
+      "foreground": "#79B8FF"
+    },
+    {
+      "token": "meta.property-name",
+      "foreground": "#79B8FF"
+    },
+    {
+      "token": "variable",
+      "foreground": "#FFAB70"
+    },
+    {
+      "token": "variable.other",
+      "foreground": "#E1E4E8"
+    },
+    {
+      "token": "invalid.broken",
+      "foreground": "#FDAEB7",
+      "fontStyle": "italic"
+    },
+    {
+      "token": "invalid.deprecated",
+      "foreground": "#FDAEB7",
+      "fontStyle": "italic"
+    },
+    {
+      "token": "invalid.illegal",
+      "foreground": "#FDAEB7",
+      "fontStyle": "italic"
+    },
+    {
+      "token": "invalid.unimplemented",
+      "foreground": "#FDAEB7",
+      "fontStyle": "italic"
+    },
+    {
+      "token": "carriage-return",
+      "foreground": "#24292E",
+      "background": "#F97583",
+      "fontStyle": "italic underline"
+    },
+    {
+      "token": "message.error",
+      "foreground": "#FDAEB7"
+    },
+    {
+      "token": "string variable",
+      "foreground": "#79B8FF"
+    },
+    {
+      "token": "source.regexp",
+      "foreground": "#DBEDFF"
+    },
+    {
+      "token": "string.regexp",
+      "foreground": "#DBEDFF"
+    },
+    {
+      "token": "string.regexp.character-class",
+      "foreground": "#DBEDFF"
+    },
+    {
+      "token": "string.regexp constant.character.escape",
+      "foreground": "#DBEDFF"
+    },
+    {
+      "token": "string.regexp source.ruby.embedded",
+      "foreground": "#DBEDFF"
+    },
+    {
+      "token": "string.regexp string.regexp.arbitrary-repitition",
+      "foreground": "#DBEDFF"
+    },
+    {
+      "token": "string.regexp constant.character.escape",
+      "foreground": "#85E89D",
+      "fontStyle": "bold"
+    },
+    {
+      "token": "support.constant",
+      "foreground": "#79B8FF"
+    },
+    {
+      "token": "support.variable",
+      "foreground": "#79B8FF"
+    },
+    {
+      "token": "meta.module-reference",
+      "foreground": "#79B8FF"
+    },
+    {
+      "token": "punctuation.definition.list.begin.markdown",
+      "foreground": "#FFAB70"
+    },
+    {
+      "token": "markup.heading",
+      "foreground": "#79B8FF",
+      "fontStyle": "bold"
+    },
+    {
+      "token": "markup.heading entity.name",
+      "foreground": "#79B8FF",
+      "fontStyle": "bold"
+    },
+    {
+      "token": "markup.quote",
+      "foreground": "#85E89D"
+    },
+    {
+      "token": "markup.italic",
+      "foreground": "#E1E4E8",
+      "fontStyle": "italic"
+    },
+    {
+      "token": "markup.bold",
+      "foreground": "#E1E4E8",
+      "fontStyle": "bold"
+    },
+    {
+      "token": "markup.underline",
+      "fontStyle": "underline"
+    },
+    {
+      "token": "markup.strikethrough",
+      "fontStyle": "strikethrough"
+    },
+    {
+      "token": "markup.inline.raw",
+      "foreground": "#79B8FF"
+    },
+    {
+      "token": "markup.deleted",
+      "foreground": "#FDAEB7",
+      "background": "#86181D"
+    },
+    {
+      "token": "meta.diff.header.from-file",
+      "foreground": "#FDAEB7",
+      "background": "#86181D"
+    },
+    {
+      "token": "punctuation.definition.deleted",
+      "foreground": "#FDAEB7",
+      "background": "#86181D"
+    },
+    {
+      "token": "markup.inserted",
+      "foreground": "#85E89D",
+      "background": "#144620"
+    },
+    {
+      "token": "meta.diff.header.to-file",
+      "foreground": "#85E89D",
+      "background": "#144620"
+    },
+    {
+      "token": "punctuation.definition.inserted",
+      "foreground": "#85E89D",
+      "background": "#144620"
+    },
+    {
+      "token": "markup.changed",
+      "foreground": "#FFAB70",
+      "background": "#C24E00"
+    },
+    {
+      "token": "punctuation.definition.changed",
+      "foreground": "#FFAB70",
+      "background": "#C24E00"
+    },
+    {
+      "token": "markup.ignored",
+      "foreground": "#2F363D",
+      "background": "#79B8FF"
+    },
+    {
+      "token": "markup.untracked",
+      "foreground": "#2F363D",
+      "background": "#79B8FF"
+    },
+    {
+      "token": "meta.diff.range",
+      "foreground": "#B392F0",
+      "fontStyle": "bold"
+    },
+    {
+      "token": "meta.diff.header",
+      "foreground": "#79B8FF"
+    },
+    {
+      "token": "meta.separator",
+      "foreground": "#79B8FF",
+      "fontStyle": "bold"
+    },
+    {
+      "token": "meta.output",
+      "foreground": "#79B8FF"
+    },
+    {
+      "token": "brackethighlighter.tag",
+      "foreground": "#D1D5DA"
+    },
+    {
+      "token": "brackethighlighter.curly",
+      "foreground": "#D1D5DA"
+    },
+    {
+      "token": "brackethighlighter.round",
+      "foreground": "#D1D5DA"
+    },
+    {
+      "token": "brackethighlighter.square",
+      "foreground": "#D1D5DA"
+    },
+    {
+      "token": "brackethighlighter.angle",
+      "foreground": "#D1D5DA"
+    },
+    {
+      "token": "brackethighlighter.quote",
+      "foreground": "#D1D5DA"
+    },
+    {
+      "token": "brackethighlighter.unmatched",
+      "foreground": "#FDAEB7"
+    },
+    {
+      "token": "constant.other.reference.link",
+      "foreground": "#DBEDFF",
+      "fontStyle": "underline"
+    },
+    {
+      "token": "string.other.link",
+      "foreground": "#DBEDFF",
+      "fontStyle": "underline"
+    },
+    {
+      "token": "token.info-token",
+      "foreground": "#6796E6"
+    },
+    {
+      "token": "token.warn-token",
+      "foreground": "#CD9731"
+    },
+    {
+      "token": "token.error-token",
+      "foreground": "#F44747"
+    },
+    {
+      "token": "token.debug-token",
+      "foreground": "#B267E6"
+    }
+  ]
+}
diff --git a/src/options/Editor/themes/githubDarkDefault.json b/src/options/Editor/themes/githubDarkDefault.json
new file mode 100644
index 0000000..49adc2e
--- /dev/null
+++ b/src/options/Editor/themes/githubDarkDefault.json
@@ -0,0 +1,440 @@
+{
+  "$schema": "vscode://schemas/color-theme",
+  "inherit": true,
+  "base": "vs-dark",
+  "colors": {
+    "activityBar.activeBorder": "#f78166",
+    "activityBar.background": "#0d1117",
+    "activityBar.border": "#30363d",
+    "activityBar.foreground": "#c9d1d9",
+    "activityBar.inactiveForeground": "#8b949e",
+    "activityBarBadge.background": "#1f6feb",
+    "activityBarBadge.foreground": "#f0f6fc",
+    "badge.background": "#1f6feb",
+    "badge.foreground": "#f0f6fc",
+    "breadcrumb.activeSelectionForeground": "#8b949e",
+    "breadcrumb.focusForeground": "#c9d1d9",
+    "breadcrumb.foreground": "#8b949e",
+    "breadcrumbPicker.background": "#161b22",
+    "button.background": "#238636",
+    "button.foreground": "#ffffff",
+    "button.hoverBackground": "#2ea043",
+    "button.secondaryBackground": "#282e33",
+    "button.secondaryForeground": "#c9d1d9",
+    "button.secondaryHoverBackground": "#30363d",
+    "checkbox.background": "#161b22",
+    "checkbox.border": "#30363d",
+    "debugConsole.errorForeground": "#ffa198",
+    "debugConsole.infoForeground": "#8b949e",
+    "debugConsole.sourceForeground": "#e3b341",
+    "debugConsole.warningForeground": "#d29922",
+    "debugConsoleInputIcon.foreground": "#bc8cff",
+    "debugIcon.breakpointForeground": "#f85149",
+    "debugTokenExpression.boolean": "#56d364",
+    "debugTokenExpression.error": "#ffa198",
+    "debugTokenExpression.name": "#79c0ff",
+    "debugTokenExpression.number": "#56d364",
+    "debugTokenExpression.string": "#a5d6ff",
+    "debugTokenExpression.value": "#a5d6ff",
+    "debugToolBar.background": "#161b22",
+    "descriptionForeground": "#8b949e",
+    "diffEditor.insertedLineBackground": "#23863633",
+    "diffEditor.insertedTextBackground": "#2386364d",
+    "diffEditor.removedLineBackground": "#da363333",
+    "diffEditor.removedTextBackground": "#da36334d",
+    "dropdown.background": "#161b22",
+    "dropdown.border": "#30363d",
+    "dropdown.foreground": "#c9d1d9",
+    "dropdown.listBackground": "#161b22",
+    "editor.background": "#0d1117",
+    "editor.findMatchBackground": "#9e6a03",
+    "editor.findMatchHighlightBackground": "#f2cc6080",
+    "editor.focusedStackFrameHighlightBackground": "#2ea04366",
+    "editor.foldBackground": "#6e76811a",
+    "editor.foreground": "#c9d1d9",
+    "editor.lineHighlightBackground": "#6e76811a",
+    "editor.linkedEditingBackground": "#58a6ff12",
+    "editor.selectionHighlightBackground": "#3fb95040",
+    "editor.stackFrameHighlightBackground": "#bb800966",
+    "editor.wordHighlightBackground": "#6e768180",
+    "editor.wordHighlightBorder": "#6e768199",
+    "editor.wordHighlightStrongBackground": "#6e76814d",
+    "editor.wordHighlightStrongBorder": "#6e768199",
+    "editorBracketHighlight.foreground1": "#79c0ff",
+    "editorBracketHighlight.foreground2": "#56d364",
+    "editorBracketHighlight.foreground3": "#e3b341",
+    "editorBracketHighlight.foreground4": "#ffa198",
+    "editorBracketHighlight.foreground5": "#ff9bce",
+    "editorBracketHighlight.foreground6": "#d2a8ff",
+    "editorBracketHighlight.unexpectedBracket.foreground": "#8b949e",
+    "editorBracketMatch.background": "#3fb95040",
+    "editorBracketMatch.border": "#3fb95099",
+    "editorCursor.foreground": "#58a6ff",
+    "editorGroup.border": "#30363d",
+    "editorGroupHeader.tabsBackground": "#010409",
+    "editorGroupHeader.tabsBorder": "#30363d",
+    "editorGutter.addedBackground": "#2ea04366",
+    "editorGutter.deletedBackground": "#f8514966",
+    "editorGutter.modifiedBackground": "#bb800966",
+    "editorIndentGuide.activeBackground": "#c9d1d93d",
+    "editorIndentGuide.background": "#c9d1d91f",
+    "editorInlayHint.background": "#8b949e33",
+    "editorInlayHint.foreground": "#8b949e",
+    "editorInlayHint.typeBackground": "#8b949e33",
+    "editorInlayHint.typeForeground": "#8b949e",
+    "editorLineNumber.activeForeground": "#c9d1d9",
+    "editorLineNumber.foreground": "#6e7681",
+    "editorOverviewRuler.border": "#010409",
+    "editorWhitespace.foreground": "#484f58",
+    "editorWidget.background": "#161b22",
+    "errorForeground": "#f85149",
+    "focusBorder": "#1f6feb",
+    "foreground": "#c9d1d9",
+    "gitDecoration.addedResourceForeground": "#3fb950",
+    "gitDecoration.conflictingResourceForeground": "#db6d28",
+    "gitDecoration.deletedResourceForeground": "#f85149",
+    "gitDecoration.ignoredResourceForeground": "#484f58",
+    "gitDecoration.modifiedResourceForeground": "#d29922",
+    "gitDecoration.submoduleResourceForeground": "#8b949e",
+    "gitDecoration.untrackedResourceForeground": "#3fb950",
+    "icon.foreground": "#8b949e",
+    "input.background": "#0d1117",
+    "input.border": "#30363d",
+    "input.foreground": "#c9d1d9",
+    "input.placeholderForeground": "#484f58",
+    "keybindingLabel.foreground": "#c9d1d9",
+    "list.activeSelectionBackground": "#6e768166",
+    "list.activeSelectionForeground": "#c9d1d9",
+    "list.focusBackground": "#388bfd26",
+    "list.focusForeground": "#c9d1d9",
+    "list.highlightForeground": "#58a6ff",
+    "list.hoverBackground": "#6e76811a",
+    "list.hoverForeground": "#c9d1d9",
+    "list.inactiveFocusBackground": "#388bfd26",
+    "list.inactiveSelectionBackground": "#6e768166",
+    "list.inactiveSelectionForeground": "#c9d1d9",
+    "notificationCenterHeader.background": "#161b22",
+    "notificationCenterHeader.foreground": "#8b949e",
+    "notifications.background": "#161b22",
+    "notifications.border": "#30363d",
+    "notifications.foreground": "#c9d1d9",
+    "notificationsErrorIcon.foreground": "#f85149",
+    "notificationsInfoIcon.foreground": "#58a6ff",
+    "notificationsWarningIcon.foreground": "#d29922",
+    "panel.background": "#010409",
+    "panel.border": "#30363d",
+    "panelInput.border": "#30363d",
+    "panelTitle.activeBorder": "#f78166",
+    "panelTitle.activeForeground": "#c9d1d9",
+    "panelTitle.inactiveForeground": "#8b949e",
+    "peekViewEditor.background": "#6e76811a",
+    "peekViewEditor.matchHighlightBackground": "#bb800966",
+    "peekViewResult.background": "#0d1117",
+    "peekViewResult.matchHighlightBackground": "#bb800966",
+    "pickerGroup.border": "#30363d",
+    "pickerGroup.foreground": "#8b949e",
+    "progressBar.background": "#1f6feb",
+    "quickInput.background": "#161b22",
+    "quickInput.foreground": "#c9d1d9",
+    "scrollbar.shadow": "#484f5833",
+    "scrollbarSlider.activeBackground": "#6e768187",
+    "scrollbarSlider.background": "#6e768133",
+    "scrollbarSlider.hoverBackground": "#6e768145",
+    "settings.headerForeground": "#8b949e",
+    "settings.modifiedItemIndicator": "#bb800966",
+    "sideBar.background": "#010409",
+    "sideBar.border": "#30363d",
+    "sideBar.foreground": "#c9d1d9",
+    "sideBarSectionHeader.background": "#010409",
+    "sideBarSectionHeader.border": "#30363d",
+    "sideBarSectionHeader.foreground": "#c9d1d9",
+    "sideBarTitle.foreground": "#c9d1d9",
+    "statusBar.background": "#0d1117",
+    "statusBar.border": "#30363d",
+    "statusBar.debuggingBackground": "#da3633",
+    "statusBar.debuggingForeground": "#f0f6fc",
+    "statusBar.focusBorder": "#1f6feb80",
+    "statusBar.foreground": "#8b949e",
+    "statusBar.noFolderBackground": "#0d1117",
+    "statusBarItem.activeBackground": "#c9d1d91f",
+    "statusBarItem.focusBorder": "#1f6feb",
+    "statusBarItem.hoverBackground": "#c9d1d914",
+    "statusBarItem.prominentBackground": "#6e768166",
+    "statusBarItem.remoteBackground": "#30363d",
+    "statusBarItem.remoteForeground": "#c9d1d9",
+    "symbolIcon.arrayForeground": "#f0883e",
+    "symbolIcon.booleanForeground": "#58a6ff",
+    "symbolIcon.classForeground": "#f0883e",
+    "symbolIcon.colorForeground": "#79c0ff",
+    "symbolIcon.constructorForeground": "#d2a8ff",
+    "symbolIcon.enumeratorForeground": "#f0883e",
+    "symbolIcon.enumeratorMemberForeground": "#58a6ff",
+    "symbolIcon.eventForeground": "#6e7681",
+    "symbolIcon.fieldForeground": "#f0883e",
+    "symbolIcon.fileForeground": "#d29922",
+    "symbolIcon.folderForeground": "#d29922",
+    "symbolIcon.functionForeground": "#bc8cff",
+    "symbolIcon.interfaceForeground": "#f0883e",
+    "symbolIcon.keyForeground": "#58a6ff",
+    "symbolIcon.keywordForeground": "#ff7b72",
+    "symbolIcon.methodForeground": "#bc8cff",
+    "symbolIcon.moduleForeground": "#ff7b72",
+    "symbolIcon.namespaceForeground": "#ff7b72",
+    "symbolIcon.nullForeground": "#58a6ff",
+    "symbolIcon.numberForeground": "#3fb950",
+    "symbolIcon.objectForeground": "#f0883e",
+    "symbolIcon.operatorForeground": "#79c0ff",
+    "symbolIcon.packageForeground": "#f0883e",
+    "symbolIcon.propertyForeground": "#f0883e",
+    "symbolIcon.referenceForeground": "#58a6ff",
+    "symbolIcon.snippetForeground": "#58a6ff",
+    "symbolIcon.stringForeground": "#79c0ff",
+    "symbolIcon.structForeground": "#f0883e",
+    "symbolIcon.textForeground": "#79c0ff",
+    "symbolIcon.typeParameterForeground": "#79c0ff",
+    "symbolIcon.unitForeground": "#58a6ff",
+    "symbolIcon.variableForeground": "#f0883e",
+    "tab.activeBackground": "#0d1117",
+    "tab.activeBorder": "#0d1117",
+    "tab.activeBorderTop": "#f78166",
+    "tab.activeForeground": "#c9d1d9",
+    "tab.border": "#30363d",
+    "tab.hoverBackground": "#0d1117",
+    "tab.inactiveBackground": "#010409",
+    "tab.inactiveForeground": "#8b949e",
+    "tab.unfocusedActiveBorder": "#0d1117",
+    "tab.unfocusedActiveBorderTop": "#30363d",
+    "tab.unfocusedHoverBackground": "#6e76811a",
+    "terminal.ansiBlack": "#484f58",
+    "terminal.ansiBlue": "#58a6ff",
+    "terminal.ansiBrightBlack": "#6e7681",
+    "terminal.ansiBrightBlue": "#79c0ff",
+    "terminal.ansiBrightCyan": "#56d4dd",
+    "terminal.ansiBrightGreen": "#56d364",
+    "terminal.ansiBrightMagenta": "#d2a8ff",
+    "terminal.ansiBrightRed": "#ffa198",
+    "terminal.ansiBrightWhite": "#f0f6fc",
+    "terminal.ansiBrightYellow": "#e3b341",
+    "terminal.ansiCyan": "#39c5cf",
+    "terminal.ansiGreen": "#3fb950",
+    "terminal.ansiMagenta": "#bc8cff",
+    "terminal.ansiRed": "#ff7b72",
+    "terminal.ansiWhite": "#b1bac4",
+    "terminal.ansiYellow": "#d29922",
+    "terminal.foreground": "#c9d1d9",
+    "textBlockQuote.background": "#010409",
+    "textBlockQuote.border": "#30363d",
+    "textCodeBlock.background": "#6e768166",
+    "textLink.activeForeground": "#58a6ff",
+    "textLink.foreground": "#58a6ff",
+    "textPreformat.foreground": "#8b949e",
+    "textSeparator.foreground": "#21262d",
+    "titleBar.activeBackground": "#0d1117",
+    "titleBar.activeForeground": "#8b949e",
+    "titleBar.border": "#30363d",
+    "titleBar.inactiveBackground": "#010409",
+    "titleBar.inactiveForeground": "#8b949e",
+    "tree.indentGuidesStroke": "#21262d"
+  },
+  "rules": [
+    { "foreground": "#8B949E", "token": "comment" },
+    { "foreground": "#8B949E", "token": "punctuation.definition.comment" },
+    { "foreground": "#8B949E", "token": "string.comment" },
+    { "foreground": "#79C0FF", "token": "constant" },
+    { "foreground": "#79C0FF", "token": "entity.name.constant" },
+    { "foreground": "#79C0FF", "token": "variable.other.constant" },
+    { "foreground": "#79C0FF", "token": "variable.other.enummember" },
+    { "foreground": "#79C0FF", "token": "variable.language" },
+    { "foreground": "#79C0FF", "token": "entity" },
+    { "foreground": "#79C0FF", "token": "attribute.name" },
+    { "foreground": "#FFA657", "token": "entity.name" },
+    { "foreground": "#FFA657", "token": "meta.export.default" },
+    { "foreground": "#FFA657", "token": "meta.definition.variable" },
+    { "foreground": "#C9D1D9", "token": "variable.parameter.function" },
+    { "foreground": "#C9D1D9", "token": "meta.jsx.children" },
+    { "foreground": "#C9D1D9", "token": "meta.block" },
+    { "foreground": "#C9D1D9", "token": "meta.tag.attributes" },
+    { "foreground": "#C9D1D9", "token": "entity.name.constant" },
+    { "foreground": "#C9D1D9", "token": "meta.object.member" },
+    { "foreground": "#C9D1D9", "token": "meta.embedded.expression" },
+    { "foreground": "#D2A8FF", "token": "entity.name.function" },
+    { "foreground": "#7EE787", "token": "tag" },
+    { "foreground": "#7EE787", "token": "support.class.component" },
+    { "foreground": "#FF7B72", "token": "keyword" },
+    { "foreground": "#FF7B72", "token": "storage" },
+    { "foreground": "#FF7B72", "token": "storage.type" },
+    { "foreground": "#C9D1D9", "token": "storage.modifier.package" },
+    { "foreground": "#C9D1D9", "token": "storage.modifier.import" },
+    { "foreground": "#C9D1D9", "token": "storage.type.java" },
+    { "foreground": "#A5D6FF", "token": "string" },
+    {
+      "foreground": "#A5D6FF",
+      "token": "string punctuation.section.embedded source"
+    },
+    { "foreground": "#79C0FF", "token": "support" },
+    { "foreground": "#79C0FF", "token": "meta.property-name" },
+    { "foreground": "#FFA657", "token": "variable" },
+    { "foreground": "#C9D1D9", "token": "variable.other" },
+    {
+      "foreground": "#FFA198",
+      "fontStyle": "italic",
+      "token": "invalid.broken"
+    },
+    {
+      "foreground": "#FFA198",
+      "fontStyle": "italic",
+      "token": "invalid.deprecated"
+    },
+    {
+      "foreground": "#FFA198",
+      "fontStyle": "italic",
+      "token": "invalid.illegal"
+    },
+    {
+      "foreground": "#FFA198",
+      "fontStyle": "italic",
+      "token": "invalid.unimplemented"
+    },
+    {
+      "foreground": "#F0F6FC",
+      "background": "#FF7B72",
+      "fontStyle": "italic underline",
+      "token": "carriage-return"
+    },
+    { "foreground": "#FFA198", "token": "message.error" },
+    { "foreground": "#79C0FF", "token": "string variable" },
+    { "foreground": "#A5D6FF", "token": "source.regexp" },
+    { "foreground": "#A5D6FF", "token": "string.regexp" },
+    { "foreground": "#A5D6FF", "token": "string.regexp.character-class" },
+    {
+      "foreground": "#A5D6FF",
+      "token": "string.regexp constant.character.escape"
+    },
+    {
+      "foreground": "#A5D6FF",
+      "token": "string.regexp source.ruby.embedded"
+    },
+    {
+      "foreground": "#A5D6FF",
+      "token": "string.regexp string.regexp.arbitrary-repitition"
+    },
+    {
+      "foreground": "#7EE787",
+      "fontStyle": "bold",
+      "token": "string.regexp constant.character.escape"
+    },
+    { "foreground": "#79C0FF", "token": "support.constant" },
+    { "foreground": "#79C0FF", "token": "support.variable" },
+    { "foreground": "#7EE787", "token": "support.type.property-name.json" },
+    { "foreground": "#79C0FF", "token": "meta.module-reference" },
+    {
+      "foreground": "#FFA657",
+      "token": "punctuation.definition.list.begin.markdown"
+    },
+    {
+      "foreground": "#79C0FF",
+      "fontStyle": "bold",
+      "token": "markup.heading"
+    },
+    {
+      "foreground": "#79C0FF",
+      "fontStyle": "bold",
+      "token": "markup.heading entity.name"
+    },
+    { "foreground": "#7EE787", "token": "markup.quote" },
+    {
+      "foreground": "#C9D1D9",
+      "fontStyle": "italic",
+      "token": "markup.italic"
+    },
+    { "foreground": "#C9D1D9", "fontStyle": "bold", "token": "markup.bold" },
+    { "fontStyle": "underline", "token": "markup.underline" },
+    { "fontStyle": "strikethrough", "token": "markup.strikethrough" },
+    { "foreground": "#79C0FF", "token": "markup.inline.raw" },
+    {
+      "foreground": "#FFA198",
+      "background": "#490202",
+      "token": "markup.deleted"
+    },
+    {
+      "foreground": "#FFA198",
+      "background": "#490202",
+      "token": "meta.diff.header.from-file"
+    },
+    {
+      "foreground": "#FFA198",
+      "background": "#490202",
+      "token": "punctuation.definition.deleted"
+    },
+    { "foreground": "#FF7B72", "token": "punctuation.section.embedded" },
+    {
+      "foreground": "#7EE787",
+      "background": "#04260F",
+      "token": "markup.inserted"
+    },
+    {
+      "foreground": "#7EE787",
+      "background": "#04260F",
+      "token": "meta.diff.header.to-file"
+    },
+    {
+      "foreground": "#7EE787",
+      "background": "#04260F",
+      "token": "punctuation.definition.inserted"
+    },
+    {
+      "foreground": "#FFA657",
+      "background": "#5A1E02",
+      "token": "markup.changed"
+    },
+    {
+      "foreground": "#FFA657",
+      "background": "#5A1E02",
+      "token": "punctuation.definition.changed"
+    },
+    {
+      "foreground": "#161B22",
+      "background": "#79C0FF",
+      "token": "markup.ignored"
+    },
+    {
+      "foreground": "#161B22",
+      "background": "#79C0FF",
+      "token": "markup.untracked"
+    },
+    {
+      "foreground": "#D2A8FF",
+      "fontStyle": "bold",
+      "token": "meta.diff.range"
+    },
+    { "foreground": "#79C0FF", "token": "meta.diff.header" },
+    {
+      "foreground": "#79C0FF",
+      "fontStyle": "bold",
+      "token": "meta.separator"
+    },
+    { "foreground": "#79C0FF", "token": "meta.output" },
+    { "foreground": "#8B949E", "token": "brackethighlighter.tag" },
+    { "foreground": "#8B949E", "token": "brackethighlighter.curly" },
+    { "foreground": "#8B949E", "token": "brackethighlighter.round" },
+    { "foreground": "#8B949E", "token": "brackethighlighter.square" },
+    { "foreground": "#8B949E", "token": "brackethighlighter.angle" },
+    { "foreground": "#8B949E", "token": "brackethighlighter.quote" },
+    { "foreground": "#FFA198", "token": "brackethighlighter.unmatched" },
+    {
+      "foreground": "#A5D6FF",
+      "fontStyle": "underline",
+      "token": "constant.other.reference.link"
+    },
+    {
+      "foreground": "#A5D6FF",
+      "fontStyle": "underline",
+      "token": "string.other.link"
+    },
+    { "foreground": "#6796E6", "token": "token.info-token" },
+    { "foreground": "#CD9731", "token": "token.warn-token" },
+    { "foreground": "#F44747", "token": "token.error-token" },
+    { "foreground": "#B267E6", "token": "token.debug-token" }
+  ],
+  "encodedTokensColors": []
+}
diff --git a/src/options/Editor/themes/githubLight.json b/src/options/Editor/themes/githubLight.json
new file mode 100644
index 0000000..d41114c
--- /dev/null
+++ b/src/options/Editor/themes/githubLight.json
@@ -0,0 +1,436 @@
+{
+  "$schema": "vscode://schemas/color-theme",
+  "inherit": true,
+  "base": "vs",
+  "colors": {
+    "activityBar.activeBorder": "#fd8c73",
+    "activityBar.background": "#ffffff",
+    "activityBar.border": "#d0d7de",
+    "activityBar.foreground": "#24292f",
+    "activityBar.inactiveForeground": "#57606a",
+    "activityBarBadge.background": "#0969da",
+    "activityBarBadge.foreground": "#ffffff",
+    "badge.background": "#0969da",
+    "badge.foreground": "#ffffff",
+    "breadcrumb.activeSelectionForeground": "#57606a",
+    "breadcrumb.focusForeground": "#24292f",
+    "breadcrumb.foreground": "#57606a",
+    "breadcrumbPicker.background": "#ffffff",
+    "button.background": "#2da44e",
+    "button.foreground": "#ffffff",
+    "button.hoverBackground": "#2c974b",
+    "button.secondaryBackground": "#ebecf0",
+    "button.secondaryForeground": "#24292f",
+    "button.secondaryHoverBackground": "#f3f4f6",
+    "checkbox.background": "#f6f8fa",
+    "checkbox.border": "#d0d7de",
+    "debugConsole.errorForeground": "#cf222e",
+    "debugConsole.infoForeground": "#57606a",
+    "debugConsole.sourceForeground": "#9a6700",
+    "debugConsole.warningForeground": "#7d4e00",
+    "debugConsoleInputIcon.foreground": "#6639ba",
+    "debugIcon.breakpointForeground": "#cf222e",
+    "debugTokenExpression.boolean": "#116329",
+    "debugTokenExpression.error": "#a40e26",
+    "debugTokenExpression.name": "#0550ae",
+    "debugTokenExpression.number": "#116329",
+    "debugTokenExpression.string": "#0a3069",
+    "debugTokenExpression.value": "#0a3069",
+    "debugToolBar.background": "#ffffff",
+    "descriptionForeground": "#57606a",
+    "diffEditor.insertedLineBackground": "#aceebb4d",
+    "diffEditor.insertedTextBackground": "#6fdd8b66",
+    "diffEditor.removedLineBackground": "#ffcecb4d",
+    "diffEditor.removedTextBackground": "#ffaba866",
+    "dropdown.background": "#ffffff",
+    "dropdown.border": "#d0d7de",
+    "dropdown.foreground": "#24292f",
+    "dropdown.listBackground": "#ffffff",
+    "editor.background": "#ffffff",
+    "editor.findMatchBackground": "#bf8700",
+    "editor.findMatchHighlightBackground": "#fae17d80",
+    "editor.focusedStackFrameHighlightBackground": "#4ac26b66",
+    "editor.foldBackground": "#6e77811a",
+    "editor.foreground": "#24292f",
+    "editor.lineHighlightBackground": "#eaeef280",
+    "editor.linkedEditingBackground": "#0969da12",
+    "editor.selectionHighlightBackground": "#4ac26b40",
+    "editor.stackFrameHighlightBackground": "#d4a72c66",
+    "editor.wordHighlightBackground": "#eaeef280",
+    "editor.wordHighlightBorder": "#afb8c199",
+    "editor.wordHighlightStrongBackground": "#afb8c14d",
+    "editor.wordHighlightStrongBorder": "#afb8c199",
+    "editorBracketHighlight.foreground1": "#0969da",
+    "editorBracketHighlight.foreground2": "#1a7f37",
+    "editorBracketHighlight.foreground3": "#9a6700",
+    "editorBracketHighlight.foreground4": "#cf222e",
+    "editorBracketHighlight.foreground5": "#bf3989",
+    "editorBracketHighlight.foreground6": "#8250df",
+    "editorBracketHighlight.unexpectedBracket.foreground": "#57606a",
+    "editorBracketMatch.background": "#4ac26b40",
+    "editorBracketMatch.border": "#4ac26b99",
+    "editorCursor.foreground": "#0969da",
+    "editorGroup.border": "#d0d7de",
+    "editorGroupHeader.tabsBackground": "#f6f8fa",
+    "editorGroupHeader.tabsBorder": "#d0d7de",
+    "editorGutter.addedBackground": "#4ac26b66",
+    "editorGutter.deletedBackground": "#ff818266",
+    "editorGutter.modifiedBackground": "#d4a72c66",
+    "editorIndentGuide.activeBackground": "#24292f3d",
+    "editorIndentGuide.background": "#24292f1f",
+    "editorInlayHint.background": "#afb8c133",
+    "editorInlayHint.foreground": "#57606a",
+    "editorInlayHint.typeBackground": "#afb8c133",
+    "editorInlayHint.typeForeground": "#57606a",
+    "editorLineNumber.activeForeground": "#24292f",
+    "editorLineNumber.foreground": "#8c959f",
+    "editorOverviewRuler.border": "#ffffff",
+    "editorWhitespace.foreground": "#afb8c1",
+    "editorWidget.background": "#ffffff",
+    "errorForeground": "#cf222e",
+    "focusBorder": "#0969da",
+    "foreground": "#24292f",
+    "gitDecoration.addedResourceForeground": "#1a7f37",
+    "gitDecoration.conflictingResourceForeground": "#bc4c00",
+    "gitDecoration.deletedResourceForeground": "#cf222e",
+    "gitDecoration.ignoredResourceForeground": "#6e7781",
+    "gitDecoration.modifiedResourceForeground": "#9a6700",
+    "gitDecoration.submoduleResourceForeground": "#57606a",
+    "gitDecoration.untrackedResourceForeground": "#1a7f37",
+    "icon.foreground": "#57606a",
+    "input.background": "#ffffff",
+    "input.border": "#d0d7de",
+    "input.foreground": "#24292f",
+    "input.placeholderForeground": "#6e7781",
+    "keybindingLabel.foreground": "#24292f",
+    "list.activeSelectionBackground": "#afb8c133",
+    "list.activeSelectionForeground": "#24292f",
+    "list.focusBackground": "#ddf4ff",
+    "list.focusForeground": "#24292f",
+    "list.highlightForeground": "#0969da",
+    "list.hoverBackground": "#eaeef280",
+    "list.hoverForeground": "#24292f",
+    "list.inactiveFocusBackground": "#ddf4ff",
+    "list.inactiveSelectionBackground": "#afb8c133",
+    "list.inactiveSelectionForeground": "#24292f",
+    "notificationCenterHeader.background": "#f6f8fa",
+    "notificationCenterHeader.foreground": "#57606a",
+    "notifications.background": "#ffffff",
+    "notifications.border": "#d0d7de",
+    "notifications.foreground": "#24292f",
+    "notificationsErrorIcon.foreground": "#cf222e",
+    "notificationsInfoIcon.foreground": "#0969da",
+    "notificationsWarningIcon.foreground": "#9a6700",
+    "panel.background": "#f6f8fa",
+    "panel.border": "#d0d7de",
+    "panelInput.border": "#d0d7de",
+    "panelTitle.activeBorder": "#fd8c73",
+    "panelTitle.activeForeground": "#24292f",
+    "panelTitle.inactiveForeground": "#57606a",
+    "pickerGroup.border": "#d0d7de",
+    "pickerGroup.foreground": "#57606a",
+    "progressBar.background": "#0969da",
+    "quickInput.background": "#ffffff",
+    "quickInput.foreground": "#24292f",
+    "scrollbar.shadow": "#6e778133",
+    "scrollbarSlider.activeBackground": "#8c959f87",
+    "scrollbarSlider.background": "#8c959f33",
+    "scrollbarSlider.hoverBackground": "#8c959f45",
+    "settings.headerForeground": "#57606a",
+    "settings.modifiedItemIndicator": "#d4a72c66",
+    "sideBar.background": "#f6f8fa",
+    "sideBar.border": "#d0d7de",
+    "sideBar.foreground": "#24292f",
+    "sideBarSectionHeader.background": "#f6f8fa",
+    "sideBarSectionHeader.border": "#d0d7de",
+    "sideBarSectionHeader.foreground": "#24292f",
+    "sideBarTitle.foreground": "#24292f",
+    "statusBar.background": "#ffffff",
+    "statusBar.border": "#d0d7de",
+    "statusBar.debuggingBackground": "#cf222e",
+    "statusBar.debuggingForeground": "#ffffff",
+    "statusBar.focusBorder": "#0969da80",
+    "statusBar.foreground": "#57606a",
+    "statusBar.noFolderBackground": "#ffffff",
+    "statusBarItem.activeBackground": "#24292f1f",
+    "statusBarItem.focusBorder": "#0969da",
+    "statusBarItem.hoverBackground": "#24292f14",
+    "statusBarItem.prominentBackground": "#afb8c133",
+    "statusBarItem.remoteBackground": "#eaeef2",
+    "statusBarItem.remoteForeground": "#24292f",
+    "symbolIcon.arrayForeground": "#953800",
+    "symbolIcon.booleanForeground": "#0550ae",
+    "symbolIcon.classForeground": "#953800",
+    "symbolIcon.colorForeground": "#0a3069",
+    "symbolIcon.constantForeground": "#116329",
+    "symbolIcon.constructorForeground": "#3e1f79",
+    "symbolIcon.enumeratorForeground": "#953800",
+    "symbolIcon.enumeratorMemberForeground": "#0550ae",
+    "symbolIcon.eventForeground": "#57606a",
+    "symbolIcon.fieldForeground": "#953800",
+    "symbolIcon.fileForeground": "#7d4e00",
+    "symbolIcon.folderForeground": "#7d4e00",
+    "symbolIcon.functionForeground": "#6639ba",
+    "symbolIcon.interfaceForeground": "#953800",
+    "symbolIcon.keyForeground": "#0550ae",
+    "symbolIcon.keywordForeground": "#a40e26",
+    "symbolIcon.methodForeground": "#6639ba",
+    "symbolIcon.moduleForeground": "#a40e26",
+    "symbolIcon.namespaceForeground": "#a40e26",
+    "symbolIcon.nullForeground": "#0550ae",
+    "symbolIcon.numberForeground": "#116329",
+    "symbolIcon.objectForeground": "#953800",
+    "symbolIcon.operatorForeground": "#0a3069",
+    "symbolIcon.packageForeground": "#953800",
+    "symbolIcon.propertyForeground": "#953800",
+    "symbolIcon.referenceForeground": "#0550ae",
+    "symbolIcon.snippetForeground": "#0550ae",
+    "symbolIcon.stringForeground": "#0a3069",
+    "symbolIcon.structForeground": "#953800",
+    "symbolIcon.textForeground": "#0a3069",
+    "symbolIcon.typeParameterForeground": "#0a3069",
+    "symbolIcon.unitForeground": "#0550ae",
+    "symbolIcon.variableForeground": "#953800",
+    "tab.activeBackground": "#ffffff",
+    "tab.activeBorder": "#ffffff",
+    "tab.activeBorderTop": "#fd8c73",
+    "tab.activeForeground": "#24292f",
+    "tab.border": "#d0d7de",
+    "tab.hoverBackground": "#ffffff",
+    "tab.inactiveBackground": "#f6f8fa",
+    "tab.inactiveForeground": "#57606a",
+    "tab.unfocusedActiveBorder": "#ffffff",
+    "tab.unfocusedActiveBorderTop": "#d0d7de",
+    "tab.unfocusedHoverBackground": "#eaeef280",
+    "terminal.ansiBlack": "#24292f",
+    "terminal.ansiBlue": "#0969da",
+    "terminal.ansiBrightBlack": "#57606a",
+    "terminal.ansiBrightBlue": "#218bff",
+    "terminal.ansiBrightCyan": "#3192aa",
+    "terminal.ansiBrightGreen": "#1a7f37",
+    "terminal.ansiBrightMagenta": "#a475f9",
+    "terminal.ansiBrightRed": "#a40e26",
+    "terminal.ansiBrightWhite": "#8c959f",
+    "terminal.ansiBrightYellow": "#633c01",
+    "terminal.ansiCyan": "#1b7c83",
+    "terminal.ansiGreen": "#116329",
+    "terminal.ansiMagenta": "#8250df",
+    "terminal.ansiRed": "#cf222e",
+    "terminal.ansiWhite": "#6e7781",
+    "terminal.ansiYellow": "#4d2d00",
+    "terminal.foreground": "#24292f",
+    "textBlockQuote.background": "#f6f8fa",
+    "textBlockQuote.border": "#d0d7de",
+    "textCodeBlock.background": "#afb8c133",
+    "textLink.activeForeground": "#0969da",
+    "textLink.foreground": "#0969da",
+    "textPreformat.foreground": "#57606a",
+    "textSeparator.foreground": "#d8dee4",
+    "titleBar.activeBackground": "#ffffff",
+    "titleBar.activeForeground": "#57606a",
+    "titleBar.border": "#d0d7de",
+    "titleBar.inactiveBackground": "#f6f8fa",
+    "titleBar.inactiveForeground": "#57606a",
+    "tree.indentGuidesStroke": "#d8dee4"
+  },
+  "rules": [
+    { "foreground": "#6E7781", "token": "comment" },
+    { "foreground": "#6E7781", "token": "punctuation.definition.comment" },
+    { "foreground": "#6E7781", "token": "string.comment" },
+    { "foreground": "#0550AE", "token": "constant" },
+    { "foreground": "#0550AE", "token": "entity.name.constant" },
+    { "foreground": "#0550AE", "token": "variable.other.constant" },
+    { "foreground": "#0550AE", "token": "variable.other.enummember" },
+    { "foreground": "#0550AE", "token": "variable.language" },
+    { "foreground": "#0550AE", "token": "entity" },
+    { "foreground": "#953800", "token": "entity.name" },
+    { "foreground": "#953800", "token": "meta.export.default" },
+    { "foreground": "#953800", "token": "meta.definition.variable" },
+    { "foreground": "#24292F", "token": "variable.parameter.function" },
+    { "foreground": "#24292F", "token": "meta.jsx.children" },
+    { "foreground": "#24292F", "token": "meta.block" },
+    { "foreground": "#24292F", "token": "meta.tag.attributes" },
+    { "foreground": "#24292F", "token": "entity.name.constant" },
+    { "foreground": "#24292F", "token": "meta.object.member" },
+    { "foreground": "#24292F", "token": "meta.embedded.expression" },
+    { "foreground": "#8250DF", "token": "entity.name.function" },
+    { "foreground": "#116329", "token": "entity.name.tag" },
+    { "foreground": "#116329", "token": "support.class.component" },
+    { "foreground": "#CF222E", "token": "keyword" },
+    { "foreground": "#CF222E", "token": "storage" },
+    { "foreground": "#CF222E", "token": "storage.type" },
+    { "foreground": "#24292F", "token": "storage.modifier.package" },
+    { "foreground": "#24292F", "token": "storage.modifier.import" },
+    { "foreground": "#24292F", "token": "storage.type.java" },
+    { "foreground": "#0A3069", "token": "string" },
+    {
+      "foreground": "#0A3069",
+      "token": "string punctuation.section.embedded source"
+    },
+    { "foreground": "#0550AE", "token": "support" },
+    { "foreground": "#0550AE", "token": "meta.property-name" },
+    { "foreground": "#953800", "token": "variable" },
+    { "foreground": "#24292F", "token": "variable.other" },
+    {
+      "foreground": "#82071E",
+      "fontStyle": "italic",
+      "token": "invalid.broken"
+    },
+    {
+      "foreground": "#82071E",
+      "fontStyle": "italic",
+      "token": "invalid.deprecated"
+    },
+    {
+      "foreground": "#82071E",
+      "fontStyle": "italic",
+      "token": "invalid.illegal"
+    },
+    {
+      "foreground": "#82071E",
+      "fontStyle": "italic",
+      "token": "invalid.unimplemented"
+    },
+    {
+      "foreground": "#F6F8FA",
+      "background": "#CF222E",
+      "fontStyle": "italic underline",
+      "token": "carriage-return"
+    },
+    { "foreground": "#82071E", "token": "message.error" },
+    { "foreground": "#0550AE", "token": "string variable" },
+    { "foreground": "#0A3069", "token": "source.regexp" },
+    { "foreground": "#0A3069", "token": "string.regexp" },
+    { "foreground": "#0A3069", "token": "string.regexp.character-class" },
+    {
+      "foreground": "#0A3069",
+      "token": "string.regexp constant.character.escape"
+    },
+    {
+      "foreground": "#0A3069",
+      "token": "string.regexp source.ruby.embedded"
+    },
+    {
+      "foreground": "#0A3069",
+      "token": "string.regexp string.regexp.arbitrary-repitition"
+    },
+    {
+      "foreground": "#116329",
+      "fontStyle": "bold",
+      "token": "string.regexp constant.character.escape"
+    },
+    { "foreground": "#0550AE", "token": "support.constant" },
+    { "foreground": "#0550AE", "token": "support.variable" },
+    { "foreground": "#116329", "token": "support.type.property-name.json" },
+    { "foreground": "#0550AE", "token": "meta.module-reference" },
+    {
+      "foreground": "#953800",
+      "token": "punctuation.definition.list.begin.markdown"
+    },
+    {
+      "foreground": "#0550AE",
+      "fontStyle": "bold",
+      "token": "markup.heading"
+    },
+    {
+      "foreground": "#0550AE",
+      "fontStyle": "bold",
+      "token": "markup.heading entity.name"
+    },
+    { "foreground": "#116329", "token": "markup.quote" },
+    {
+      "foreground": "#24292F",
+      "fontStyle": "italic",
+      "token": "markup.italic"
+    },
+    { "foreground": "#24292F", "fontStyle": "bold", "token": "markup.bold" },
+    { "fontStyle": "underline", "token": "markup.underline" },
+    { "fontStyle": "strikethrough", "token": "markup.strikethrough" },
+    { "foreground": "#0550AE", "token": "markup.inline.raw" },
+    {
+      "foreground": "#82071E",
+      "background": "#FFEBE9",
+      "token": "markup.deleted"
+    },
+    {
+      "foreground": "#82071E",
+      "background": "#FFEBE9",
+      "token": "meta.diff.header.from-file"
+    },
+    {
+      "foreground": "#82071E",
+      "background": "#FFEBE9",
+      "token": "punctuation.definition.deleted"
+    },
+    { "foreground": "#CF222E", "token": "punctuation.section.embedded" },
+    {
+      "foreground": "#116329",
+      "background": "#DAFBE1",
+      "token": "markup.inserted"
+    },
+    {
+      "foreground": "#116329",
+      "background": "#DAFBE1",
+      "token": "meta.diff.header.to-file"
+    },
+    {
+      "foreground": "#116329",
+      "background": "#DAFBE1",
+      "token": "punctuation.definition.inserted"
+    },
+    {
+      "foreground": "#953800",
+      "background": "#FFD8B5",
+      "token": "markup.changed"
+    },
+    {
+      "foreground": "#953800",
+      "background": "#FFD8B5",
+      "token": "punctuation.definition.changed"
+    },
+    {
+      "foreground": "#EAEEF2",
+      "background": "#0550AE",
+      "token": "markup.ignored"
+    },
+    {
+      "foreground": "#EAEEF2",
+      "background": "#0550AE",
+      "token": "markup.untracked"
+    },
+    {
+      "foreground": "#8250DF",
+      "fontStyle": "bold",
+      "token": "meta.diff.range"
+    },
+    { "foreground": "#0550AE", "token": "meta.diff.header" },
+    {
+      "foreground": "#0550AE",
+      "fontStyle": "bold",
+      "token": "meta.separator"
+    },
+    { "foreground": "#0550AE", "token": "meta.output" },
+    { "foreground": "#57606A", "token": "brackethighlighter.tag" },
+    { "foreground": "#57606A", "token": "brackethighlighter.curly" },
+    { "foreground": "#57606A", "token": "brackethighlighter.round" },
+    { "foreground": "#57606A", "token": "brackethighlighter.square" },
+    { "foreground": "#57606A", "token": "brackethighlighter.angle" },
+    { "foreground": "#57606A", "token": "brackethighlighter.quote" },
+    { "foreground": "#82071E", "token": "brackethighlighter.unmatched" },
+    {
+      "foreground": "#0A3069",
+      "fontStyle": "underline",
+      "token": "constant.other.reference.link"
+    },
+    {
+      "foreground": "#0A3069",
+      "fontStyle": "underline",
+      "token": "string.other.link"
+    },
+    { "foreground": "#316BCD", "token": "token.info-token" },
+    { "foreground": "#CD9731", "token": "token.warn-token" },
+    { "foreground": "#CD3131", "token": "token.error-token" },
+    { "foreground": "#800080", "token": "token.debug-token" }
+  ],
+  "encodedTokensColors": []
+}
diff --git a/src/options/Editor/themes/githubLightDefault.json b/src/options/Editor/themes/githubLightDefault.json
new file mode 100644
index 0000000..4b2fcb4
--- /dev/null
+++ b/src/options/Editor/themes/githubLightDefault.json
@@ -0,0 +1,615 @@
+{
+  "$schema": "vscode://schemas/color-theme",
+  "inherit": true,
+  "base": "vs",
+  "colors": {
+    "activityBar.activeBorder": "#fd8c73",
+    "activityBar.background": "#ffffff",
+    "activityBar.border": "#d0d7de",
+    "activityBar.foreground": "#1f2328",
+    "activityBar.inactiveForeground": "#656d76",
+    "activityBarBadge.background": "#0969da",
+    "activityBarBadge.foreground": "#ffffff",
+    "badge.background": "#0969da",
+    "badge.foreground": "#ffffff",
+    "breadcrumb.activeSelectionForeground": "#656d76",
+    "breadcrumb.focusForeground": "#1f2328",
+    "breadcrumb.foreground": "#656d76",
+    "breadcrumbPicker.background": "#ffffff",
+    "button.background": "#1f883d",
+    "button.foreground": "#ffffff",
+    "button.hoverBackground": "#1a7f37",
+    "button.secondaryBackground": "#ebecf0",
+    "button.secondaryForeground": "#24292f",
+    "button.secondaryHoverBackground": "#f3f4f6",
+    "checkbox.background": "#f6f8fa",
+    "checkbox.border": "#d0d7de",
+    "debugConsole.errorForeground": "#cf222e",
+    "debugConsole.infoForeground": "#57606a",
+    "debugConsole.sourceForeground": "#9a6700",
+    "debugConsole.warningForeground": "#7d4e00",
+    "debugConsoleInputIcon.foreground": "#6639ba",
+    "debugIcon.breakpointForeground": "#cf222e",
+    "debugTokenExpression.boolean": "#116329",
+    "debugTokenExpression.error": "#a40e26",
+    "debugTokenExpression.name": "#0550ae",
+    "debugTokenExpression.number": "#116329",
+    "debugTokenExpression.string": "#0a3069",
+    "debugTokenExpression.value": "#0a3069",
+    "debugToolBar.background": "#ffffff",
+    "descriptionForeground": "#656d76",
+    "diffEditor.insertedLineBackground": "#aceebb4d",
+    "diffEditor.insertedTextBackground": "#6fdd8b80",
+    "diffEditor.removedLineBackground": "#ffcecb4d",
+    "diffEditor.removedTextBackground": "#ff818266",
+    "dropdown.background": "#ffffff",
+    "dropdown.border": "#d0d7de",
+    "dropdown.foreground": "#1f2328",
+    "dropdown.listBackground": "#ffffff",
+    "editor.background": "#ffffff",
+    "editor.findMatchBackground": "#bf8700",
+    "editor.findMatchHighlightBackground": "#fae17d80",
+    "editor.focusedStackFrameHighlightBackground": "#4ac26b66",
+    "editor.foldBackground": "#6e77811a",
+    "editor.foreground": "#1f2328",
+    "editor.lineHighlightBackground": "#eaeef280",
+    "editor.linkedEditingBackground": "#0969da12",
+    "editor.selectionHighlightBackground": "#4ac26b40",
+    "editor.stackFrameHighlightBackground": "#d4a72c66",
+    "editor.wordHighlightBackground": "#eaeef280",
+    "editor.wordHighlightBorder": "#afb8c199",
+    "editor.wordHighlightStrongBackground": "#afb8c14d",
+    "editor.wordHighlightStrongBorder": "#afb8c199",
+    "editorBracketHighlight.foreground1": "#0969da",
+    "editorBracketHighlight.foreground2": "#1a7f37",
+    "editorBracketHighlight.foreground3": "#9a6700",
+    "editorBracketHighlight.foreground4": "#cf222e",
+    "editorBracketHighlight.foreground5": "#bf3989",
+    "editorBracketHighlight.foreground6": "#8250df",
+    "editorBracketHighlight.unexpectedBracket.foreground": "#656d76",
+    "editorBracketMatch.background": "#4ac26b40",
+    "editorBracketMatch.border": "#4ac26b99",
+    "editorCursor.foreground": "#0969da",
+    "editorGroup.border": "#d0d7de",
+    "editorGroupHeader.tabsBackground": "#f6f8fa",
+    "editorGroupHeader.tabsBorder": "#d0d7de",
+    "editorGutter.addedBackground": "#4ac26b66",
+    "editorGutter.deletedBackground": "#ff818266",
+    "editorGutter.modifiedBackground": "#d4a72c66",
+    "editorIndentGuide.activeBackground": "#1f23283d",
+    "editorIndentGuide.background": "#1f23281f",
+    "editorInlayHint.background": "#afb8c133",
+    "editorInlayHint.foreground": "#656d76",
+    "editorInlayHint.typeBackground": "#afb8c133",
+    "editorInlayHint.typeForeground": "#656d76",
+    "editorLineNumber.activeForeground": "#1f2328",
+    "editorLineNumber.foreground": "#8c959f",
+    "editorOverviewRuler.border": "#ffffff",
+    "editorWhitespace.foreground": "#afb8c1",
+    "editorWidget.background": "#ffffff",
+    "errorForeground": "#cf222e",
+    "focusBorder": "#0969da",
+    "foreground": "#1f2328",
+    "gitDecoration.addedResourceForeground": "#1a7f37",
+    "gitDecoration.conflictingResourceForeground": "#bc4c00",
+    "gitDecoration.deletedResourceForeground": "#cf222e",
+    "gitDecoration.ignoredResourceForeground": "#6e7781",
+    "gitDecoration.modifiedResourceForeground": "#9a6700",
+    "gitDecoration.submoduleResourceForeground": "#656d76",
+    "gitDecoration.untrackedResourceForeground": "#1a7f37",
+    "icon.foreground": "#656d76",
+    "input.background": "#ffffff",
+    "input.border": "#d0d7de",
+    "input.foreground": "#1f2328",
+    "input.placeholderForeground": "#6e7781",
+    "keybindingLabel.foreground": "#1f2328",
+    "list.activeSelectionBackground": "#afb8c133",
+    "list.activeSelectionForeground": "#1f2328",
+    "list.focusBackground": "#ddf4ff",
+    "list.focusForeground": "#1f2328",
+    "list.highlightForeground": "#0969da",
+    "list.hoverBackground": "#eaeef280",
+    "list.hoverForeground": "#1f2328",
+    "list.inactiveFocusBackground": "#ddf4ff",
+    "list.inactiveSelectionBackground": "#afb8c133",
+    "list.inactiveSelectionForeground": "#1f2328",
+    "minimapSlider.activeBackground": "#8c959f47",
+    "minimapSlider.background": "#8c959f33",
+    "minimapSlider.hoverBackground": "#8c959f3d",
+    "notificationCenterHeader.background": "#f6f8fa",
+    "notificationCenterHeader.foreground": "#656d76",
+    "notifications.background": "#ffffff",
+    "notifications.border": "#d0d7de",
+    "notifications.foreground": "#1f2328",
+    "notificationsErrorIcon.foreground": "#cf222e",
+    "notificationsInfoIcon.foreground": "#0969da",
+    "notificationsWarningIcon.foreground": "#9a6700",
+    "panel.background": "#f6f8fa",
+    "panel.border": "#d0d7de",
+    "panelInput.border": "#d0d7de",
+    "panelTitle.activeBorder": "#fd8c73",
+    "panelTitle.activeForeground": "#1f2328",
+    "panelTitle.inactiveForeground": "#656d76",
+    "pickerGroup.border": "#d0d7de",
+    "pickerGroup.foreground": "#656d76",
+    "progressBar.background": "#0969da",
+    "quickInput.background": "#ffffff",
+    "quickInput.foreground": "#1f2328",
+    "scrollbar.shadow": "#6e778133",
+    "scrollbarSlider.activeBackground": "#8c959f47",
+    "scrollbarSlider.background": "#8c959f33",
+    "scrollbarSlider.hoverBackground": "#8c959f3d",
+    "settings.headerForeground": "#1f2328",
+    "settings.modifiedItemIndicator": "#d4a72c66",
+    "sideBar.background": "#f6f8fa",
+    "sideBar.border": "#d0d7de",
+    "sideBar.foreground": "#1f2328",
+    "sideBarSectionHeader.background": "#f6f8fa",
+    "sideBarSectionHeader.border": "#d0d7de",
+    "sideBarSectionHeader.foreground": "#1f2328",
+    "sideBarTitle.foreground": "#1f2328",
+    "statusBar.background": "#ffffff",
+    "statusBar.border": "#d0d7de",
+    "statusBar.debuggingBackground": "#cf222e",
+    "statusBar.debuggingForeground": "#ffffff",
+    "statusBar.focusBorder": "#0969da80",
+    "statusBar.foreground": "#656d76",
+    "statusBar.noFolderBackground": "#ffffff",
+    "statusBarItem.activeBackground": "#1f23281f",
+    "statusBarItem.focusBorder": "#0969da",
+    "statusBarItem.hoverBackground": "#1f232814",
+    "statusBarItem.prominentBackground": "#afb8c133",
+    "statusBarItem.remoteBackground": "#eaeef2",
+    "statusBarItem.remoteForeground": "#1f2328",
+    "symbolIcon.arrayForeground": "#953800",
+    "symbolIcon.booleanForeground": "#0550ae",
+    "symbolIcon.classForeground": "#953800",
+    "symbolIcon.colorForeground": "#0a3069",
+    "symbolIcon.constantForeground": "#116329",
+    "symbolIcon.constructorForeground": "#3e1f79",
+    "symbolIcon.enumeratorForeground": "#953800",
+    "symbolIcon.enumeratorMemberForeground": "#0550ae",
+    "symbolIcon.eventForeground": "#57606a",
+    "symbolIcon.fieldForeground": "#953800",
+    "symbolIcon.fileForeground": "#7d4e00",
+    "symbolIcon.folderForeground": "#7d4e00",
+    "symbolIcon.functionForeground": "#6639ba",
+    "symbolIcon.interfaceForeground": "#953800",
+    "symbolIcon.keyForeground": "#0550ae",
+    "symbolIcon.keywordForeground": "#a40e26",
+    "symbolIcon.methodForeground": "#6639ba",
+    "symbolIcon.moduleForeground": "#a40e26",
+    "symbolIcon.namespaceForeground": "#a40e26",
+    "symbolIcon.nullForeground": "#0550ae",
+    "symbolIcon.numberForeground": "#116329",
+    "symbolIcon.objectForeground": "#953800",
+    "symbolIcon.operatorForeground": "#0a3069",
+    "symbolIcon.packageForeground": "#953800",
+    "symbolIcon.propertyForeground": "#953800",
+    "symbolIcon.referenceForeground": "#0550ae",
+    "symbolIcon.snippetForeground": "#0550ae",
+    "symbolIcon.stringForeground": "#0a3069",
+    "symbolIcon.structForeground": "#953800",
+    "symbolIcon.textForeground": "#0a3069",
+    "symbolIcon.typeParameterForeground": "#0a3069",
+    "symbolIcon.unitForeground": "#0550ae",
+    "symbolIcon.variableForeground": "#953800",
+    "tab.activeBackground": "#ffffff",
+    "tab.activeBorder": "#ffffff",
+    "tab.activeBorderTop": "#fd8c73",
+    "tab.activeForeground": "#1f2328",
+    "tab.border": "#d0d7de",
+    "tab.hoverBackground": "#ffffff",
+    "tab.inactiveBackground": "#f6f8fa",
+    "tab.inactiveForeground": "#656d76",
+    "tab.unfocusedActiveBorder": "#ffffff",
+    "tab.unfocusedActiveBorderTop": "#d0d7de",
+    "tab.unfocusedHoverBackground": "#eaeef280",
+    "terminal.ansiBlack": "#24292f",
+    "terminal.ansiBlue": "#0969da",
+    "terminal.ansiBrightBlack": "#57606a",
+    "terminal.ansiBrightBlue": "#218bff",
+    "terminal.ansiBrightCyan": "#3192aa",
+    "terminal.ansiBrightGreen": "#1a7f37",
+    "terminal.ansiBrightMagenta": "#a475f9",
+    "terminal.ansiBrightRed": "#a40e26",
+    "terminal.ansiBrightWhite": "#8c959f",
+    "terminal.ansiBrightYellow": "#633c01",
+    "terminal.ansiCyan": "#1b7c83",
+    "terminal.ansiGreen": "#116329",
+    "terminal.ansiMagenta": "#8250df",
+    "terminal.ansiRed": "#cf222e",
+    "terminal.ansiWhite": "#6e7781",
+    "terminal.ansiYellow": "#4d2d00",
+    "terminal.foreground": "#1f2328",
+    "textBlockQuote.background": "#f6f8fa",
+    "textBlockQuote.border": "#d0d7de",
+    "textCodeBlock.background": "#afb8c133",
+    "textLink.activeForeground": "#0969da",
+    "textLink.foreground": "#0969da",
+    "textPreformat.foreground": "#656d76",
+    "textSeparator.foreground": "#d8dee4",
+    "titleBar.activeBackground": "#ffffff",
+    "titleBar.activeForeground": "#656d76",
+    "titleBar.border": "#d0d7de",
+    "titleBar.inactiveBackground": "#f6f8fa",
+    "titleBar.inactiveForeground": "#656d76",
+    "tree.indentGuidesStroke": "#d8dee4"
+  },
+  "rules": [],
+  "tokenColors": [
+    {
+      "scope": ["comment", "punctuation.definition.comment", "string.comment"],
+      "settings": {
+        "foreground": "#6E7781"
+      }
+    },
+    {
+      "scope": ["constant.other.placeholder", "constant.character"],
+      "settings": {
+        "foreground": "#CF222E"
+      }
+    },
+    {
+      "scope": [
+        "constant",
+        "entity.name.constant",
+        "variable.other.constant",
+        "variable.other.enummember",
+        "variable.language",
+        "entity"
+      ],
+      "settings": {
+        "foreground": "#0550AE"
+      }
+    },
+    {
+      "scope": ["entity.name", "meta.export.default", "meta.definition.variable"],
+      "settings": {
+        "foreground": "#953800"
+      }
+    },
+    {
+      "scope": [
+        "variable.parameter.function",
+        "meta.jsx.children",
+        "meta.block",
+        "meta.tag.attributes",
+        "entity.name.constant",
+        "meta.object.member",
+        "meta.embedded.expression"
+      ],
+      "settings": {
+        "foreground": "#1F2328"
+      }
+    },
+    {
+      "scope": "entity.name.function",
+      "settings": {
+        "foreground": "#8250DF"
+      }
+    },
+    {
+      "scope": ["entity.name.tag", "support.class.component"],
+      "settings": {
+        "foreground": "#116329"
+      }
+    },
+    {
+      "scope": "keyword",
+      "settings": {
+        "foreground": "#CF222E"
+      }
+    },
+    {
+      "scope": ["storage", "storage.type"],
+      "settings": {
+        "foreground": "#CF222E"
+      }
+    },
+    {
+      "scope": [
+        "storage.modifier.package",
+        "storage.modifier.import",
+        "storage.type.java"
+      ],
+      "settings": {
+        "foreground": "#1F2328"
+      }
+    },
+    {
+      "scope": ["string", "string punctuation.section.embedded source"],
+      "settings": {
+        "foreground": "#0A3069"
+      }
+    },
+    {
+      "scope": "support",
+      "settings": {
+        "foreground": "#0550AE"
+      }
+    },
+    {
+      "scope": "meta.property-name",
+      "settings": {
+        "foreground": "#0550AE"
+      }
+    },
+    {
+      "scope": "variable",
+      "settings": {
+        "foreground": "#953800"
+      }
+    },
+    {
+      "scope": "variable.other",
+      "settings": {
+        "foreground": "#1F2328"
+      }
+    },
+    {
+      "scope": "invalid.broken",
+      "settings": {
+        "foreground": "#82071E",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "invalid.deprecated",
+      "settings": {
+        "foreground": "#82071E",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "invalid.illegal",
+      "settings": {
+        "foreground": "#82071E",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "invalid.unimplemented",
+      "settings": {
+        "foreground": "#82071E",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "carriage-return",
+      "settings": {
+        "foreground": "#F6F8FA",
+        "background": "#CF222E",
+        "fontStyle": "italic underline"
+      }
+    },
+    {
+      "scope": "message.error",
+      "settings": {
+        "foreground": "#82071E"
+      }
+    },
+    {
+      "scope": "string variable",
+      "settings": {
+        "foreground": "#0550AE"
+      }
+    },
+    {
+      "scope": ["source.regexp", "string.regexp"],
+      "settings": {
+        "foreground": "#0A3069"
+      }
+    },
+    {
+      "scope": [
+        "string.regexp.character-class",
+        "string.regexp constant.character.escape",
+        "string.regexp source.ruby.embedded",
+        "string.regexp string.regexp.arbitrary-repitition"
+      ],
+      "settings": {
+        "foreground": "#0A3069"
+      }
+    },
+    {
+      "scope": "string.regexp constant.character.escape",
+      "settings": {
+        "foreground": "#116329",
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "scope": "support.constant",
+      "settings": {
+        "foreground": "#0550AE"
+      }
+    },
+    {
+      "scope": "support.variable",
+      "settings": {
+        "foreground": "#0550AE"
+      }
+    },
+    {
+      "scope": "support.type.property-name.json",
+      "settings": {
+        "foreground": "#116329"
+      }
+    },
+    {
+      "scope": "meta.module-reference",
+      "settings": {
+        "foreground": "#0550AE"
+      }
+    },
+    {
+      "scope": "punctuation.definition.list.begin.markdown",
+      "settings": {
+        "foreground": "#953800"
+      }
+    },
+    {
+      "scope": ["markup.heading", "markup.heading entity.name"],
+      "settings": {
+        "foreground": "#0550AE",
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "scope": "markup.quote",
+      "settings": {
+        "foreground": "#116329"
+      }
+    },
+    {
+      "scope": "markup.italic",
+      "settings": {
+        "foreground": "#1F2328",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "markup.bold",
+      "settings": {
+        "foreground": "#1F2328",
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "scope": ["markup.underline"],
+      "settings": {
+        "fontStyle": "underline"
+      }
+    },
+    {
+      "scope": ["markup.strikethrough"],
+      "settings": {
+        "fontStyle": "strikethrough"
+      }
+    },
+    {
+      "scope": "markup.inline.raw",
+      "settings": {
+        "foreground": "#0550AE"
+      }
+    },
+    {
+      "scope": [
+        "markup.deleted",
+        "meta.diff.header.from-file",
+        "punctuation.definition.deleted"
+      ],
+      "settings": {
+        "foreground": "#82071E",
+        "background": "#FFEBE9"
+      }
+    },
+    {
+      "scope": ["punctuation.section.embedded"],
+      "settings": {
+        "foreground": "#CF222E"
+      }
+    },
+    {
+      "scope": [
+        "markup.inserted",
+        "meta.diff.header.to-file",
+        "punctuation.definition.inserted"
+      ],
+      "settings": {
+        "foreground": "#116329",
+        "background": "#DAFBE1"
+      }
+    },
+    {
+      "scope": ["markup.changed", "punctuation.definition.changed"],
+      "settings": {
+        "foreground": "#953800",
+        "background": "#FFD8B5"
+      }
+    },
+    {
+      "scope": ["markup.ignored", "markup.untracked"],
+      "settings": {
+        "foreground": "#EAEEF2",
+        "background": "#0550AE"
+      }
+    },
+    {
+      "scope": "meta.diff.range",
+      "settings": {
+        "foreground": "#8250DF",
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "scope": "meta.diff.header",
+      "settings": {
+        "foreground": "#0550AE"
+      }
+    },
+    {
+      "scope": "meta.separator",
+      "settings": {
+        "foreground": "#0550AE",
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "scope": "meta.output",
+      "settings": {
+        "foreground": "#0550AE"
+      }
+    },
+    {
+      "scope": [
+        "brackethighlighter.tag",
+        "brackethighlighter.curly",
+        "brackethighlighter.round",
+        "brackethighlighter.square",
+        "brackethighlighter.angle",
+        "brackethighlighter.quote"
+      ],
+      "settings": {
+        "foreground": "#57606A"
+      }
+    },
+    {
+      "scope": "brackethighlighter.unmatched",
+      "settings": {
+        "foreground": "#82071E"
+      }
+    },
+    {
+      "scope": ["constant.other.reference.link", "string.other.link"],
+      "settings": {
+        "foreground": "#0A3069"
+      }
+    },
+    {
+      "scope": "token.info-token",
+      "settings": {
+        "foreground": "#316BCD"
+      }
+    },
+    {
+      "scope": "token.warn-token",
+      "settings": {
+        "foreground": "#CD9731"
+      }
+    },
+    {
+      "scope": "token.error-token",
+      "settings": {
+        "foreground": "#CD3131"
+      }
+    },
+    {
+      "scope": "token.debug-token",
+      "settings": {
+        "foreground": "#800080"
+      }
+    }
+  ]
+}
diff --git a/src/options/Editor/themes/index.ts b/src/options/Editor/themes/index.ts
new file mode 100644
index 0000000..c42e9d4
--- /dev/null
+++ b/src/options/Editor/themes/index.ts
@@ -0,0 +1,13 @@
+import type monaco from "monaco-editor"
+
+import githubDark from "./githubDark.json"
+import githubDarkDefault from "./githubDarkDefault.json"
+import githubLight from "./githubLight.json"
+import githubLightDefault from "./githubLightDefault.json"
+
+export function defineMonacoThemes({ editor }: Pick<typeof monaco, "editor">) {
+  editor.defineTheme("github-light-default", githubLightDefault as any)
+  editor.defineTheme("github-light", githubLight as any)
+  editor.defineTheme("github-dark-default", githubDarkDefault as any)
+  editor.defineTheme("github-dark", githubDark as any)
+}
diff --git a/src/options/Editor/useConfirmClose.tsx b/src/options/Editor/useConfirmClose.tsx
new file mode 100644
index 0000000..ec69550
--- /dev/null
+++ b/src/options/Editor/useConfirmClose.tsx
@@ -0,0 +1,115 @@
+import styled from "@emotion/styled"
+import { useCallback, useRef, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { css } from "@emotion/css"
+import Icon from "@aet/icons/macro"
+import { Mutex } from "async-mutex"
+import { useEvent } from "@aet/hooks"
+import { Modal } from "~/vendor/react-responsive-modal"
+import { Pill, PrimaryPill } from "~/shared/styled"
+
+export const enum ConfirmResult {
+  Cancel,
+  Save,
+  Discard,
+}
+
+const mutex = new Mutex()
+
+export let confirmClose: (fileName: string) => Promise<ConfirmResult> = () => null!
+
+export function ConfirmClose() {
+  const [fileName, setFileName] = useState<string | null>()
+
+  const { t } = useTranslation()
+  const defer = useRef<(value: ConfirmResult) => void>()
+
+  const onHide = useCallback(() => setFileName(null), [])
+
+  const onSave = useEvent(() => {
+    defer.current!(ConfirmResult.Save)
+    mutex.release()
+    setFileName(null)
+  })
+
+  const onDiscard = useEvent(() => {
+    defer.current!(ConfirmResult.Discard)
+    mutex.release()
+    setFileName(null)
+  })
+
+  const onCancel = useEvent(() => {
+    defer.current!(ConfirmResult.Cancel)
+    mutex.release()
+    setFileName(null)
+  })
+
+  confirmClose = useEvent(async (fileName: string) => {
+    await mutex.acquire()
+    setFileName(fileName)
+
+    return new Promise<ConfirmResult>(resolve => {
+      defer.current = resolve
+    })
+  })
+
+  return (
+    <Modal
+      open={fileName != null}
+      onClose={onHide}
+      center
+      showCloseIcon={false}
+      classNames={{
+        modal: css`
+          max-width: 310px;
+          line-height: 1.45em;
+        `,
+      }}
+    >
+      <div>
+        <div
+          className={css`
+            color: #ecc11e;
+            text-align: center;
+            font-size: 5em;
+            margin-bottom: 10px;
+          `}
+        >
+          <Icon icon="IoWarning" />
+        </div>
+        <Header>{t("editor.closeUnsavedQuestion", { name: fileName })}</Header>
+        <Description>{t("editor.closeUnsavedDescription")}</Description>
+
+        <PrimaryButton tabIndex={0} onClick={onSave}>
+          {t("editor.verbSave")}
+        </PrimaryButton>
+        <Button tabIndex={0} onClick={onDiscard}>
+          {t("editor.verbDoNotSave")}
+        </Button>
+        {separator}
+        <Button tabIndex={0} onClick={onCancel}>
+          {t("cancel")}
+        </Button>
+      </div>
+    </Modal>
+  )
+}
+
+const separator = <div style={{ height: 5 }} />
+
+const Header = styled.h3`
+  font-weight: 600;
+  margin: 0;
+  text-align: center;
+`
+const Description = styled.p`
+  text-align: center;
+`
+const Button = styled(Pill)`
+  margin-top: 5px;
+  width: 100%;
+`
+
+const PrimaryButton = styled(PrimaryPill)`
+  width: 100%;
+`
diff --git a/src/options/Editor/useOptions.ts b/src/options/Editor/useOptions.ts
new file mode 100644
index 0000000..92fb294
--- /dev/null
+++ b/src/options/Editor/useOptions.ts
@@ -0,0 +1,46 @@
+import type * as monaco from "monaco-editor"
+import { useAutoMemo } from "hooks.macro"
+import { gql, useQuery } from "~/generated/graphql"
+import { useDarkMode } from "~/shared/hooks/useDarkMode"
+import { ThemeQuery } from "../SideEffect"
+
+const EDITOR_PREFERENCES = gql<"MonacoEditorPreferences">`
+  query MonacoEditorPreferences {
+    preferences {
+      fontFamily
+      fontSize
+      lineHeight
+      minimap
+      tabSize
+    }
+  }
+`
+
+export function useMonacoOptions({
+  readOnly,
+  minimap,
+}: {
+  readOnly?: boolean
+  minimap?: boolean
+}) {
+  const prefs = useQuery(EDITOR_PREFERENCES).data?.preferences
+
+  return useAutoMemo<monaco.editor.IStandaloneEditorConstructionOptions>({
+    fontFamily: prefs?.fontFamily ?? "SF Mono, monospace",
+    fontSize: prefs?.fontSize ?? 14,
+    lineHeight: prefs?.lineHeight ?? 20,
+    tabSize: prefs?.tabSize ?? 2,
+    readOnly,
+    minimap: {
+      enabled: minimap ?? prefs?.minimap ?? false,
+    },
+  })
+}
+
+export function useMonacoTheme() {
+  const prefs = useQuery(ThemeQuery)?.data?.preferences
+  const darkMode = useDarkMode()
+  return darkMode
+    ? prefs?.darkTheme ?? "github-dark"
+    : prefs?.lightTheme ?? "github-light"
+}
diff --git a/src/options/Panels/Issues.tsx b/src/options/Panels/Issues.tsx
new file mode 100644
index 0000000..7c270b8
--- /dev/null
+++ b/src/options/Panels/Issues.tsx
@@ -0,0 +1,246 @@
+import monaco, { MarkerSeverity, type Uri } from "monaco-editor"
+import styled from "@emotion/styled"
+import { css } from "@emotion/css"
+import Icon from "@aet/icons/macro"
+import { memo, useMemo, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { useReactiveVar } from "@apollo/client"
+import { useEvent } from "@aet/hooks"
+import { gql, useQuery } from "~/generated/graphql"
+import { color, token } from "../theme"
+import { getTabs, useSelector } from "../store"
+import { editorNavigation } from "../utils/emitter"
+import { useOpenFile } from "../hooks/useOpenFile"
+import type { ReduxFile } from "../store/state"
+import { editorMarkers } from "../editor/Monaco"
+
+const InputNameQuery = gql<"IssueFileNameQuery">`
+  query IssueFileNameQuery($id: ID!) {
+    file(id: $id) {
+      id
+      name
+    }
+  }
+`
+
+const SeverityView = memo(({ severity }: { severity: MarkerSeverity }) => {
+  switch (severity) {
+    case MarkerSeverity.Error:
+      return (
+        <Icon
+          icon="VscError"
+          className={css`
+            color: #f97583;
+          `}
+        />
+      )
+    case MarkerSeverity.Warning:
+      return (
+        <Icon
+          icon="VscWarning"
+          className={css`
+            color: ${color("#bf8803", "#ffea7f")};
+          `}
+        />
+      )
+    case MarkerSeverity.Info:
+      return (
+        <Icon
+          icon="VscInfo"
+          className={css`
+            color: #3794ff;
+          `}
+        />
+      )
+    case MarkerSeverity.Hint:
+      return <Icon icon="VscLightbulb" />
+    default:
+      return <span>❓</span>
+  }
+})
+
+const Marker = memo(({ marker }: { marker: monaco.editor.IMarker }) => {
+  const { code } = marker
+  const file = useFileFromUri(marker.resource)
+  const open = useOpenFile()
+
+  const onClick = useEvent(() => {
+    void open(file.id)
+    editorNavigation.emit({
+      fileId: file.id,
+      position: {
+        lineNumber: marker.startLineNumber,
+        column: marker.startColumn,
+      },
+    })
+  })
+
+  return (
+    <IssueItem data-id={file.id} onClick={onClick}>
+      <SeverityView severity={marker.severity} />
+      <MarkerMessage>{marker.message}</MarkerMessage>
+      <MarkerCode>
+        {marker.source}({typeof code === "string" ? code : code?.value})
+      </MarkerCode>
+      <MarkerPosition>
+        [Ln {marker.startLineNumber}, Col {marker.startColumn}]
+      </MarkerPosition>
+    </IssueItem>
+  )
+})
+
+function findFile(files: ReduxFile[], uri: Uri) {
+  return files.find(x => uri.path.startsWith(`/${x.id}.`))!
+}
+
+function useFileFromUri(uri: Uri) {
+  const tabs = useSelector(getTabs)
+  return findFile(tabs, uri)
+}
+
+const FileName = memo(({ uri }: { uri: Uri }) => {
+  const { t } = useTranslation()
+  const matchingFile = useFileFromUri(uri)
+  const { data } = useQuery(InputNameQuery, {
+    variables: { id: matchingFile.id },
+  })
+
+  return <FileNameContainer>{data?.file.name ?? t("file.untitled")}</FileNameContainer>
+})
+
+const FileIssue = memo<{ uri: Uri; markers: monaco.editor.IMarker[] }>(
+  ({ uri, markers }) => {
+    const [collapsed, setCollapsed] = useState(false)
+
+    if (!markers.length) return null
+
+    return (
+      <div>
+        <FileIssueTitle onClick={() => setCollapsed(x => !x)}>
+          <Icon icon={collapsed ? "VscChevronRight" : "VscChevronDown"} />
+          {sass}
+          <FileName uri={uri} /> <Badge>{markers.length}</Badge>
+        </FileIssueTitle>
+        {!collapsed && (
+          <div>
+            {markers.map((marker, i) => (
+              <Marker marker={marker} key={i} />
+            ))}
+          </div>
+        )}
+      </div>
+    )
+  },
+)
+
+export const Issues = memo<ClassNameProp>(({ className }) => {
+  const { t } = useTranslation()
+  const tabs = useSelector(getTabs)
+
+  const changedMarkers = useReactiveVar(editorMarkers)
+  const markersMap = useMemo(
+    () =>
+      new Map(
+        changedMarkers.map(uri => [
+          uri,
+          monaco.editor.getModelMarkers({ resource: uri }),
+        ]),
+      ),
+    [changedMarkers],
+  )
+
+  if (!markersMap.size) {
+    return (
+      <IssuesContainer className={className}>
+        <div
+          className={css`
+            margin: 12px 14px;
+          `}
+        >
+          {t("issues.noIssuesFound")}
+        </div>
+      </IssuesContainer>
+    )
+  }
+
+  return (
+    <IssuesContainer className={className}>
+      {Array.from(markersMap.entries()).map(([uri, markers]) =>
+        findFile(tabs, uri) ? (
+          <FileIssue uri={uri} markers={markers} key={uri.path} />
+        ) : null,
+      )}
+    </IssuesContainer>
+  )
+})
+
+const IssuesContainer = styled.div`
+  margin: 8px 7px;
+  flex-grow: 1;
+  line-height: 1.3em;
+`
+const Hoverable = styled.div`
+  border-radius: 4px;
+  &:hover {
+    background-color: ${color("#eaeef280", "#6e76811a")};
+  }
+`
+const FileIssueTitle = styled(Hoverable)`
+  display: flex;
+  align-items: center;
+  line-height: 1.3em;
+  padding: 3px 10px;
+  margin-top: 5px;
+  cursor: pointer;
+`
+const FileNameContainer = styled.div`
+  margin-left: 5px;
+  margin-right: 5px;
+  user-select: none;
+`
+const IssueItem = styled(Hoverable)`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  padding: 3px 1px;
+  padding-left: 45px;
+  user-select: none;
+`
+const MarkerMessage = styled.div`
+  margin-left: 6px;
+`
+const MarkerCode = styled.div`
+  opacity: 0.7;
+  margin-left: 5px;
+`
+const MarkerPosition = styled.div`
+  opacity: 0.7;
+  margin-left: 5px;
+`
+export const Badge = styled.div`
+  background-color: ${token.accent.emphasis};
+  color: ${color("#fff", "#f0f6fc")};
+  min-width: 1.6em;
+  text-align: center;
+  border-radius: 10px;
+  font-size: 0.9em;
+`
+
+// https://github.com/PKief/vscode-material-icon-theme/blob/main/LICENSE.md
+// The MIT License (MIT). Copyright (c) 2021 Philipp Kief
+export const sass = (
+  <svg
+    viewBox="0 0 500 500"
+    className={css`
+      width: 1.2em;
+      margin-left: 3px;
+    `}
+  >
+    <path
+      d="M419.047 96.227C406.855 48.39 327.54 32.67 252.472 59.336c-44.68 15.876-93.029 40.785-127.81 73.31-41.349 38.675-47.943 72.329-45.216 86.396 9.583 49.621 77.585 82.068 105.535 106.125v.144c-8.246 4.051-68.565 34.585-82.684 65.8-14.893 32.932 2.372 56.556 13.804 59.742 35.424 9.858 71.765-7.866 91.312-37.01 18.852-28.12 17.279-64.422 9.085-82.488 11.3-2.976 24.476-4.313 41.218-2.36 47.248 5.52 56.517 35.017 54.747 47.367s-11.681 19.14-14.998 21.185-4.326 2.767-4.05 4.287c.406 2.216 1.94 2.137 4.758 1.652 3.894-.655 24.804-10.042 25.709-32.827 1.14-28.934-26.587-61.302-75.684-60.45-20.216.354-32.933 2.268-42.123 5.69a82.505 82.505 0 0 0-2.084-2.308c-30.35-32.382-86.46-55.285-84.088-98.823.866-15.824 6.372-57.5 107.817-108.053 83.104-41.414 149.638-30.009 161.135-4.759 16.427 36.079-35.554 103.137-121.857 112.812-32.88 3.684-50.199-9.06-54.499-13.805-4.536-4.995-5.204-5.218-6.909-4.287-2.753 1.534-1.01 5.939 0 8.574 2.583 6.712 13.15 18.603 31.176 24.516 15.863 5.204 54.459 8.062 101.157-9.99 52.282-20.255 93.12-76.523 81.124-123.549zM196.584 339.995c3.92 14.5 3.487 28.016-.564 40.247a65.289 65.289 0 0 1-3.225 7.97c-3.12 6.477-7.315 12.534-12.441 18.132-15.654 17.07-37.508 23.533-46.882 18.092-10.12-5.873-5.047-29.943 13.084-49.11 19.52-20.635 47.602-33.902 47.602-33.902l-.039-.08 2.465-1.35z"
+      fill="#ec407a"
+      stroke="#ec407a"
+      strokeWidth="16.287"
+    />
+  </svg>
+)
diff --git a/src/options/Panels/Preview.tsx b/src/options/Panels/Preview.tsx
new file mode 100644
index 0000000..50116ea
--- /dev/null
+++ b/src/options/Panels/Preview.tsx
@@ -0,0 +1,57 @@
+import { Editor } from "@monaco-editor/react"
+import { memo } from "react"
+import { gql, useQuery } from "~/generated/graphql"
+import { getActiveFile, useSelector } from "../store"
+import type { ReduxFile } from "../store/state"
+import { useDebouncedValue } from "~/shared/hooks/useDebouncedValue"
+import { useMonacoOptions, useMonacoTheme } from "../editor/useOptions"
+
+const PREVIEW_COMPILED = gql<"PreviewCompiledCode">`
+  query PreviewCompiledCode($file: String!) {
+    compileCode(code: $file, includeGlobal: false, cache: false, compressed: false)
+  }
+`
+
+const PreviewTab = memo<{
+  file: ReduxFile
+}>(({ file }) => {
+  const delayedFile = useDebouncedValue(file.sections[0].code, 1000)
+  const theme = useMonacoTheme()
+  const options = useMonacoOptions({
+    readOnly: true,
+    minimap: false,
+  })
+
+  const { data } = useQuery(PREVIEW_COMPILED, {
+    fetchPolicy: "no-cache",
+    skip: !delayedFile,
+    variables: {
+      file: delayedFile,
+    },
+  })
+
+  if (!data) return null
+
+  return (
+    <Editor
+      height="100%"
+      defaultValue={data.compileCode}
+      language="css"
+      theme={theme}
+      options={options}
+    />
+  )
+})
+
+export const Preview = memo<{
+  className?: string
+  active: boolean
+}>(({ className, active }) => {
+  const style = useSelector(getActiveFile)
+
+  return (
+    <div style={{ height: "100%" }} className={className}>
+      {style && active && <PreviewTab file={style} />}
+    </div>
+  )
+})
diff --git a/src/options/Panels/Rules/AddRule.tsx b/src/options/Panels/Rules/AddRule.tsx
new file mode 100644
index 0000000..4223c46
--- /dev/null
+++ b/src/options/Panels/Rules/AddRule.tsx
@@ -0,0 +1,83 @@
+import styled from "@emotion/styled"
+import { useTranslation } from "react-i18next"
+import Icon from "@aet/icons/macro"
+import { memo, useMemo } from "react"
+import { sortBy } from "lodash"
+import { Pill } from "~/shared/styled"
+import { useDomainSuggestions } from "~/options/hooks/useDomainSuggestions"
+import type { Rule } from "~/shared/models"
+import { RuleType } from "~/shared/models/enums.generated"
+import { useActiveFileName } from "~/options/hooks/useFileName"
+import { jaroDistance } from "~/options/tabs/FileTree/stringSimilarity"
+
+export const AddRule = memo<{
+  rules?: Rule[]
+  onAddDomain(domain: string, exclude?: boolean): void
+}>(({ rules, onAddDomain }) => {
+  const { t } = useTranslation()
+  const existingDomains = useMemo(
+    () => rules?.filter(r => r.type === RuleType.Domain).map(r => r.value) ?? [],
+    [rules],
+  )
+  const fileName = useActiveFileName()
+  const suggestions = useDomainSuggestions({ skip: false })
+
+  const list = useMemo(() => {
+    let res = suggestions.map(s => s.hostname).filter(d => !existingDomains.includes(d))
+    if (fileName) {
+      res = sortBy(res, domain => jaroDistance(domain, fileName))
+    }
+    return res
+  }, [suggestions, existingDomains, fileName])
+
+  const onAddEmpty = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    onAddDomain("")
+  }
+
+  return (
+    <AddRuleContainer>
+      <StyledButton onClick={onAddEmpty}>
+        <Icon icon="RiAddFill" />
+        {t("rule.addRule")}
+      </StyledButton>
+
+      <SuggestionContainer>
+        {list.map(domain => (
+          <SuggestionButton key={domain} onClick={() => onAddDomain(domain)}>
+            <Icon icon="RiAddFill" />
+            {domain}
+          </SuggestionButton>
+        ))}
+      </SuggestionContainer>
+    </AddRuleContainer>
+  )
+})
+
+const AddRuleContainer = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+const StyledButton = styled(Pill)`
+  display: flex;
+  align-items: center;
+  margin-top: 12px;
+  padding: 7px 12px 7px 10px;
+  > svg {
+    margin-right: 4px;
+  }
+`
+
+const SuggestionContainer = styled.div`
+  display: flex;
+  flex: 1;
+  overflow: scroll;
+  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
+`
+const SuggestionButton = styled(StyledButton)`
+  font-style: italic;
+  margin-left: 5px;
+  padding: 5px 7px 5px 5px;
+  white-space: nowrap;
+`
diff --git a/src/options/Panels/Rules/Rule.tsx b/src/options/Panels/Rules/Rule.tsx
new file mode 100644
index 0000000..c4b15e4
--- /dev/null
+++ b/src/options/Panels/Rules/Rule.tsx
@@ -0,0 +1,206 @@
+import styled from "@emotion/styled"
+import { css, cx } from "@emotion/css"
+import { useTranslation } from "react-i18next"
+import Icon from "@aet/icons/macro"
+import { useAutoCallback, useAutoMemo } from "hooks.macro"
+import { memo, useState } from "react"
+import { useEventListener } from "@aet/hooks"
+import type { Rule } from "~/shared/models"
+import { RuleType, ruleTypes } from "~/shared/models/utils"
+import { token } from "../../theme"
+import { useDomainSuggestions } from "~/options/hooks/useDomainSuggestions"
+import { useDataList } from "~/shared/hooks/useDatalist"
+
+export const RuleView = memo<{
+  rule: Rule
+  setRule: (rule: Rule) => void
+  onDelete?: () => void
+}>(({ rule, setRule, onDelete }) => {
+  const { t } = useTranslation()
+
+  const isDomain = rule.type === RuleType.Domain
+  const domains = useDomainSuggestions({ skip: !isDomain })
+  const datalist = useDataList(domains, "hostname")
+  const inputEventListeners = useClickableDomainInputEventListeners(rule)
+
+  const getRuleName = useAutoCallback((type: RuleType) => {
+    switch (type) {
+      case RuleType.Domain:
+        return t("rule.domain")
+      case RuleType.Glob:
+        return t("rule.glob")
+      case RuleType.RegExp:
+        return t("rule.regexp")
+      case RuleType.URL:
+        return t("rule.url")
+      case RuleType.URLPrefix:
+        return t("rule.urlPrefix")
+    }
+  })
+
+  const options = useAutoMemo(
+    ruleTypes.map(ruleType => (
+      <option key={ruleType} value={ruleType}>
+        {getRuleName(ruleType)}
+      </option>
+    )),
+  )
+
+  return (
+    <Row>
+      <ToggleCell
+        onClick={() => setRule({ ...rule, exclude: !rule.exclude })}
+        style={{ background: rule.exclude ? "#f8514926" : "#2ea04326" }}
+      >
+        <Checkbox type="checkbox" checked={!rule.exclude} readOnly />
+        <Label>{rule.exclude ? t("rule.excludesLabel") : t("rule.includesLabel")}</Label>
+      </ToggleCell>
+      <RuleTypeCell>
+        <select
+          className={css`
+            border: none;
+            background: transparent;
+            cursor: pointer;
+          `}
+          title={t("rule.ruleType")}
+          value={rule.type}
+          onChange={e => setRule({ ...rule, type: e.target.value as RuleType })}
+        >
+          {options}
+        </select>
+      </RuleTypeCell>
+      <InputCell>
+        <input
+          {...inputEventListeners}
+          type="text"
+          value={rule.value}
+          list={isDomain ? datalist.id : undefined}
+          onChange={e => setRule({ ...rule, value: e.target.value })}
+          className={cx(
+            css`
+              border: none;
+              width: 100%;
+            `,
+            inputEventListeners.className,
+          )}
+        />
+        {datalist.element}
+      </InputCell>
+      {onDelete != null && (
+        <DeleteButtonCell title={t("rule.deleteRule")}>
+          <DeleteButton
+            onClick={e => {
+              e.stopPropagation()
+              onDelete()
+            }}
+          />
+        </DeleteButtonCell>
+      )}
+    </Row>
+  )
+})
+
+function useClickableDomainInputEventListeners(rule: Rule) {
+  const [metaKeyPressed, setMetaKeyPressed] = useState(false)
+
+  useEventListener(window)("keydown", e => {
+    if (e.key === "Meta") {
+      setMetaKeyPressed(true)
+    }
+  })
+  useEventListener(window)("keyup", e => {
+    if (e.key === "Meta") {
+      setMetaKeyPressed(false)
+    }
+  })
+
+  const onClick = useAutoCallback((e: React.MouseEvent) => {
+    if (e.metaKey) {
+      e.preventDefault()
+      e.stopPropagation()
+      window.open(`https://${rule.value}`, "_blank", "noopener,noreferrer")?.focus()
+    }
+  })
+
+  const className = metaKeyPressed
+    ? css`
+        &:hover {
+          color: ${token.accent.fg};
+          text-decoration: underline;
+          cursor: pointer;
+        }
+      `
+    : undefined
+
+  if (rule.type !== RuleType.Domain) {
+    return {}
+  }
+
+  return {
+    onClick,
+    className,
+  }
+}
+
+const Row = styled.tr`
+  display: flex;
+  align-items: center;
+  &:not(:last-of-type) {
+    border-bottom: 1px solid ${token.border.muted};
+  }
+  > td {
+    min-height: 32px;
+  }
+`
+
+const ToggleCell = styled.td`
+  display: flex;
+  align-items: center;
+  text-align: center;
+  min-width: 85px;
+  cursor: pointer;
+`
+
+const Checkbox = styled.input`
+  height: 1px;
+  width: 1px;
+  margin-left: -4px;
+  z-index: -1;
+`
+
+const Label = styled.label`
+  width: 100%;
+  cursor: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const RuleTypeCell = styled.td`
+  background: ${token.canvas.overlay};
+  &:hover {
+    background: ${token.canvas.overlay};
+  }
+`
+
+const InputCell = styled.td`
+  flex-grow: 1;
+  background: ${token.canvas.overlay};
+  &:hover {
+    background: ${token.canvas.overlay};
+  }
+`
+
+const DeleteButtonCell = styled.td`
+  background-color: ${token.danger.subtle};
+  cursor: pointer;
+  &:hover {
+    background-color: ${token.danger.muted};
+    transition: background-color 0.2s;
+  }
+`
+
+const DeleteButton = styled(Icon.of("FaTrashAlt"))`
+  font-size: 1em;
+  margin-bottom: -4px;
+`
diff --git a/src/options/Panels/Rules/index.tsx b/src/options/Panels/Rules/index.tsx
new file mode 100644
index 0000000..3811731
--- /dev/null
+++ b/src/options/Panels/Rules/index.tsx
@@ -0,0 +1,93 @@
+import styled from "@emotion/styled"
+import { useTranslation } from "react-i18next"
+import { memo, useRef } from "react"
+import { useEvent } from "@aet/hooks"
+import { token } from "../../theme"
+import { getActiveFile, getActiveFileRules, useDispatch, useSelector } from "../../store"
+import { addRule, deleteRule, updateRule } from "~/options/store/actions"
+import { RuleView } from "./Rule"
+import { RuleType } from "~/shared/models/enums.generated"
+import { isGlobalStyle } from "~/shared"
+import { AddRule } from "./AddRule"
+
+export const Rules = memo<{ className?: string }>(({ className }) => {
+  const { t } = useTranslation()
+  const isActiveTabGlobal = useSelector(state => isGlobalStyle(getActiveFile(state)))
+
+  const rules = useSelector(getActiveFileRules)
+  const dispatch = useDispatch()
+  const tbody = useRef<HTMLTableSectionElement>(null)
+
+  const onAddDomain = useEvent((domain: string, exclude = false) => {
+    dispatch(
+      addRule({
+        type: RuleType.Domain,
+        value: domain,
+        exclude,
+      }),
+    )
+    setTimeout(() => {
+      const last = tbody.current!.lastElementChild!
+      last.scrollIntoView()
+      last.querySelector<HTMLInputElement>("input[type=text]")!.focus()
+    }, 200)
+  })
+
+  if (isActiveTabGlobal) {
+    return (
+      <RulesContainer className={className}>
+        {t("file.globalFileCannotHaveRules")}
+      </RulesContainer>
+    )
+  }
+
+  return (
+    <RulesContainer className={className}>
+      {Boolean(rules?.length) && (
+        <RuleContainer>
+          <Table>
+            <tbody ref={tbody}>
+              {rules!.map((rule, index, { length }) => (
+                <RuleView
+                  rule={rule}
+                  key={index}
+                  setRule={rule => dispatch(updateRule({ index, rule }))}
+                  onDelete={length === 1 ? undefined : () => dispatch(deleteRule(index))}
+                />
+              ))}
+            </tbody>
+          </Table>
+        </RuleContainer>
+      )}
+
+      <AddRule rules={rules} onAddDomain={onAddDomain} />
+    </RulesContainer>
+  )
+})
+
+const RulesContainer = styled.div`
+  margin: 12px;
+  margin-bottom: 2px;
+  flex-grow: 1;
+`
+
+const RuleContainer = styled.div`
+  max-height: calc(var(--panel-size) - 110px);
+  overflow-y: scroll;
+`
+
+const Table = styled.table`
+  border: 1px solid ${token.border.muted};
+  border-radius: 3px;
+  border-spacing: 0;
+  width: 100%;
+  td {
+    padding: 6px;
+    &:first-of-type {
+      padding-left: 12px;
+    }
+    &:not(:last-child) {
+      border-right: 1px solid ${token.border.muted};
+    }
+  }
+`
diff --git a/src/options/Panels/Statistics.tsx b/src/options/Panels/Statistics.tsx
new file mode 100644
index 0000000..b5d4adb
--- /dev/null
+++ b/src/options/Panels/Statistics.tsx
@@ -0,0 +1,181 @@
+import { css, cx } from "@emotion/css"
+import { memo } from "react"
+import { useTranslation } from "react-i18next"
+import Icon from "@aet/icons/macro"
+import { gql, useMutation, useQuery } from "~/generated/graphql"
+import type * as types from "~/generated/graphql"
+import { relativeTime } from "~/shared/relativeTime"
+import { token } from "../theme"
+import { useSelector } from "../store"
+import { ButtonWrapper } from "~/shared/styled"
+
+const STATISTICS_TAB_QUERY = gql<"StatisticsTabQuery">`
+  query StatisticsTabQuery($id: ID!) {
+    preferences {
+      recordUsageData
+    }
+    file(id: $id) {
+      createdAt
+      updatedAt
+      lastRequestedAt
+      disabledLogging
+    }
+  }
+`
+
+const TOGGLE_DISABLED_LOGGING_MUTATION = gql<"ToggleDisabledLoggingMutation">`
+  mutation ToggleDisabledLoggingMutation($id: ID!, $value: Boolean!) {
+    toggleDisableLogging(fileId: $id, value: $value)
+  }
+`
+
+const DELETE_LAST_REQUESTED_AT_MUTATION = gql<"DeleteLastRequestedAtMutation">`
+  mutation DeleteLastRequestedAtMutation($id: ID!) {
+    resetUsageData(fileId: $id)
+  }
+`
+
+const StatisticsTab = memo<{
+  fileId: string
+  data: types.StatisticsTabQueryQuery
+}>(props => {
+  const { fileId: id, data } = props
+  const { t } = useTranslation()
+  const { recordUsageData } = data.preferences
+  const { createdAt, updatedAt, lastRequestedAt } = data.file
+
+  const [resume] = useMutation(TOGGLE_DISABLED_LOGGING_MUTATION, {
+    refetchQueries: [STATISTICS_TAB_QUERY],
+    variables: { id, value: false },
+  })
+  const [pause] = useMutation(TOGGLE_DISABLED_LOGGING_MUTATION, {
+    refetchQueries: [STATISTICS_TAB_QUERY],
+    variables: { id, value: true },
+  })
+  const [reset] = useMutation(DELETE_LAST_REQUESTED_AT_MUTATION, {
+    variables: { id },
+    refetchQueries: [STATISTICS_TAB_QUERY],
+  })
+
+  return (
+    <div
+      className={css`
+        margin: 10px 20px;
+        line-height: 1.5em;
+      `}
+    >
+      <table
+        className={css`
+          border-collapse: collapse;
+          th {
+            text-align: left;
+            font-weight: 600;
+          }
+          th,
+          td {
+            border: 1px solid ${token.border.muted};
+            padding: 0.3em 0.7em;
+          }
+        `}
+      >
+        <tr>
+          <th>{t("file.labelCreatedDate")}</th>
+          <td>
+            <time title={createdAt.toLocaleString()}>{relativeTime(createdAt)}</time>
+          </td>
+        </tr>
+        <tr>
+          <th>{t("file.labelUpdatedDate")}</th>
+          <td>
+            <time title={updatedAt.toLocaleString()}>{relativeTime(updatedAt)}</time>
+          </td>
+        </tr>
+        <tr>
+          <th>{t("file.labelRequestedDate")}</th>
+          <td>
+            <div
+              className={css`
+                display: flex;
+                align-items: center;
+              `}
+            >
+              {recordUsageData && (
+                <ButtonWrapper
+                  className={cx(
+                    loggingToolIcon,
+                    css`
+                      margin-left: -4px;
+                      margin-right: 3px;
+                    `,
+                  )}
+                >
+                  {data.file.disabledLogging ? (
+                    <Icon icon="VscDebugStart" onClick={() => resume()} />
+                  ) : (
+                    <Icon icon="VscDebugPause" onClick={() => pause()} />
+                  )}
+                </ButtonWrapper>
+              )}
+              <time
+                className={css`
+                  flex: 1;
+                `}
+                title={lastRequestedAt?.toLocaleString()}
+              >
+                {lastRequestedAt ? relativeTime(lastRequestedAt) : t("never")}
+              </time>
+              {lastRequestedAt != null && (
+                <ButtonWrapper
+                  className={cx(
+                    loggingToolIcon,
+                    css`
+                      margin-left: 8px;
+                      margin-right: -3px;
+                      &:hover {
+                        background-color: ${token.danger.subtle};
+                        color: ${token.danger.emphasis};
+                        transition: 0.1s;
+                      }
+                    `,
+                  )}
+                >
+                  <Icon icon="VscTrash" onClick={() => reset()} />
+                </ButtonWrapper>
+              )}
+            </div>
+          </td>
+        </tr>
+      </table>
+    </div>
+  )
+})
+
+const loggingToolIcon = css`
+  border-radius: 2px;
+  cursor: pointer;
+  && {
+    padding: 3px;
+  }
+  &:hover {
+    background-color: ${token.accent.muted};
+    color: ${token.accent.fg};
+  }
+`
+
+export const Statistics = memo<ClassNameProp>(({ className }) => {
+  const fileId = useSelector(state => state.activeFileId)
+  const { data } = useQuery(STATISTICS_TAB_QUERY, {
+    variables: { id: fileId! },
+    skip: !fileId,
+  })
+
+  if (!data || !fileId) {
+    return null
+  }
+
+  return (
+    <div className={className}>
+      <StatisticsTab fileId={fileId} data={data} />
+    </div>
+  )
+})
diff --git a/src/options/Panels/Tags/TagContextMenu.tsx b/src/options/Panels/Tags/TagContextMenu.tsx
new file mode 100644
index 0000000..0c4570c
--- /dev/null
+++ b/src/options/Panels/Tags/TagContextMenu.tsx
@@ -0,0 +1,25 @@
+import { gql } from "@apollo/client"
+import { css } from "@emotion/css"
+import { ControlledMenu, MenuItem } from "@szhsin/react-menu"
+import { useTranslation } from "react-i18next"
+import { useDropdownMenu } from "~/options/hooks/useDropdownMenu"
+
+export function TagContextMenu({ tag }: { tag: string }) {
+  const { t } = useTranslation()
+  const { menuProps } = useDropdownMenu(css`
+    .szh-menu--state-open {
+      min-width: 171px;
+    }
+  `)
+
+  return {
+    menu: (
+      <ControlledMenu {...menuProps}>
+        <MenuItem key="rename" onClick={rename}>
+          <BiRename />
+          {t("editor.verbRename")}
+        </MenuItem>
+      </ControlledMenu>
+    ),
+  }
+}
diff --git a/src/options/Panels/Tags/index.tsx b/src/options/Panels/Tags/index.tsx
new file mode 100644
index 0000000..7e88911
--- /dev/null
+++ b/src/options/Panels/Tags/index.tsx
@@ -0,0 +1,51 @@
+import styled from "@emotion/styled"
+import { css } from "@emotion/css"
+import { useEffect } from "react"
+import { gql, useQuery } from "~/generated/graphql"
+import { getActiveFile, useDispatch, useSelector } from "../../store"
+import { updateTags } from "../../store/actions"
+import { TagsInput } from "~/vendor/react-tag-input-component"
+
+export const CurrentTags = gql<"CurrentTagsQuery">`
+  query CurrentTagsQuery {
+    tags
+  }
+`
+
+export const Tags: FC<ClassNameProp> = ({ className }) => {
+  const dispatch = useDispatch()
+  const tags = useSelector(s => getActiveFile(s)?.tags)
+
+  const { data: tagData, refetch } = useQuery(CurrentTags, {})
+
+  useEffect(() => {
+    void refetch()
+  }, [tags, refetch])
+
+  if (!tags) {
+    return null
+  }
+
+  return (
+    <TagsContainer className={className}>
+      <TagsInput
+        value={tags}
+        onChange={tags => dispatch(updateTags(tags))}
+        suggestions={tagData?.tags}
+        tagRender={({ Tag, defaultProps }) => <Tag {...defaultProps} />}
+        className={css`
+          width: 100%;
+          &:not(:hover) {
+            border-color: transparent;
+          }
+        `}
+      />
+    </TagsContainer>
+  )
+}
+
+const TagsContainer = styled.div`
+  display: flex;
+  margin: 10px 15px;
+  line-height: 1.3em;
+`
diff --git a/src/options/Panels/index.tsx b/src/options/Panels/index.tsx
new file mode 100644
index 0000000..702cf92
--- /dev/null
+++ b/src/options/Panels/index.tsx
@@ -0,0 +1,142 @@
+import styled from "@emotion/styled"
+import Icon from "@aet/icons/macro"
+import { useTranslation } from "react-i18next"
+import { css, cx } from "@emotion/css"
+import { memo } from "react"
+import { PanelPosition } from "../App"
+import { TabButton } from "~/shared/styled"
+import { Rules } from "./rules/index"
+import { Issues } from "./Issues"
+import { Tags } from "./tags/index"
+import { Statistics } from "./Statistics"
+import { getMap } from "../utils/componentMap"
+import { LIGHT_MODE, token } from "../theme"
+import { useSelector } from "../store"
+import { Preview } from "./Preview"
+
+interface PanelProps {
+  pane: Tab
+  position: PanelPosition
+  setPane(pane: Tab): void
+  setPosition(position: PanelPosition): void
+  style?: React.CSSProperties
+}
+
+const positionsToIcon = getMap<
+  PanelPosition,
+  (props: { style?: React.CSSProperties }) => React.ReactElement
+>(() => ({
+  [PanelPosition.Right]: Icon.of("BiDockRight"),
+  [PanelPosition.Bottom]: Icon.of("BiDockBottom"),
+}))
+
+export enum Tab {
+  Rules = "Rules",
+  Issues = "Issues",
+  Tags = "Tags",
+  Statistics = "Statistics",
+  Preview = "Preview",
+}
+
+const tabs = Object.values(Tab)
+
+const PositionToggle = memo<PanelProps & { pos: PanelPosition }>(props => {
+  const { pos, position, setPosition } = props
+  const Icon = positionsToIcon.get(pos)
+
+  return (
+    <TabButton key={pos} onClick={() => setPosition(pos)} active={pos === position}>
+      <Icon style={{ marginRight: 0 }} />
+    </TabButton>
+  )
+})
+
+export const Panels = memo<PanelProps>(props => {
+  const { position, pane, setPane, ...rest } = props
+  const hasFiles = useSelector(s => s.tabs.length > 0)
+
+  const tab = getActiveTab(pane)
+  const { t } = useTranslation()
+
+  function getTabName(tab: Tab) {
+    switch (tab) {
+      case Tab.Rules:
+        return t("editorPane.rules")
+      case Tab.Issues:
+        return t("editorPane.issues")
+      case Tab.Tags:
+        return t("editorPane.tags")
+      case Tab.Statistics:
+        return t("editorPane.statistics")
+      case Tab.Preview:
+        return t("editorPane.preview")
+    }
+  }
+
+  if (position == null || !hasFiles) {
+    return null
+  }
+
+  return (
+    <PanelContainer {...rest}>
+      <Toolbar>
+        <TabContainer>
+          {tabs.map(tab => (
+            <TabButton key={tab} active={tab === pane} onClick={() => setPane(tab)}>
+              {getTabName(tab)}
+            </TabButton>
+          ))}
+        </TabContainer>
+        <PositionToggleContainer>
+          <PositionToggle {...props} pos={PanelPosition.Right} />
+          <PositionToggle {...props} pos={PanelPosition.Bottom} />
+        </PositionToggleContainer>
+      </Toolbar>
+      {tab}
+    </PanelContainer>
+  )
+})
+
+function getActiveTab(activeTab: Tab | null) {
+  return (
+    <>
+      <Rules className={cx(Tab.Rules !== activeTab && hidden)} />
+      <Issues className={cx(Tab.Issues !== activeTab && hidden)} />
+      <Tags className={cx(Tab.Tags !== activeTab && hidden)} />
+      <Statistics className={cx(Tab.Statistics !== activeTab && hidden)} />
+      <Preview
+        className={cx(Tab.Preview !== activeTab && hidden)}
+        active={Tab.Preview === activeTab}
+      />
+    </>
+  )
+}
+
+const hidden = css`
+  display: none !important;
+`
+
+const PanelContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  ${LIGHT_MODE} {
+    background: ${token.canvas.inset};
+  }
+`
+
+const Toolbar = styled.div`
+  display: flex;
+  margin-left: 10px;
+  margin-top: 9px;
+`
+const TabContainer = styled.div`
+  display: flex;
+  gap: 5px;
+  flex-grow: 1;
+`
+const PositionToggleContainer = styled.div`
+  display: flex;
+  font-size: 1.2em;
+  margin-right: 12px;
+`
diff --git a/src/options/SideEffect.tsx b/src/options/SideEffect.tsx
new file mode 100644
index 0000000..a24b547
--- /dev/null
+++ b/src/options/SideEffect.tsx
@@ -0,0 +1,115 @@
+import { useEffect } from "react"
+import { useTranslation } from "react-i18next"
+import { useMountEffect } from "@react-hookz/web"
+import { gql, useQuery } from "~/generated/graphql"
+import { getTabFileIds, useDispatch, useSelector } from "./store"
+import { useDarkMode } from "~/shared/hooks/useDarkMode"
+import { useOpenFile } from "./hooks/useOpenFile"
+import { sideEffects } from "~/shared/sideEffect"
+import { closeFile } from "./store/actions"
+import { Theme } from "~/shared/models/enums.generated"
+import { useActiveFileName } from "./hooks/useFileName"
+
+export default sideEffects([
+  function OpenFromURL() {
+    const openFile = useOpenFile()
+    useMountEffect(async () => {
+      const open = new URL(location.href).searchParams.get("open")
+      if (open) {
+        try {
+          await openFile(open)
+        } finally {
+          history.replaceState(null, "", location.pathname)
+        }
+      }
+    })
+  },
+
+  function DarkModeClassName() {
+    const darkMode = useDarkMode()
+
+    useEffect(() => {
+      document.body.classList.toggle("dark", darkMode)
+      document.body.classList.toggle("light", !darkMode)
+    }, [darkMode])
+  },
+
+  function ThemeProvider() {
+    const darkMode = useDarkMode()
+    const prefs = useQuery(ThemeQuery, {
+      fetchPolicy: "cache-first",
+    }).data?.preferences
+    let theme = prefs?.theme
+    if (!theme || theme === Theme.System) {
+      theme = darkMode ? Theme.Dark : Theme.Light
+    }
+
+    const tokens = prefs
+      ? theme === Theme.Light
+        ? prefs?.lightTheme
+        : prefs?.darkTheme
+      : undefined
+
+    useEffect(() => {
+      if (tokens) {
+        document.documentElement.dataset.theme = tokens
+      }
+    }, [tokens])
+  },
+
+  function Title() {
+    const isUnsaved = useSelector(state => state.dirtyFileIds.has(state.activeFileId!))
+    const fileTitle = useActiveFileName()
+
+    if (fileTitle == null) {
+      document.title = process.env.NEXT_PUBLIC_NAME!
+      return
+    }
+
+    document.title = isUnsaved ? `* ${fileTitle}` : `${fileTitle}`
+  },
+
+  function Language() {
+    const { i18n } = useTranslation()
+
+    useEffect(() => {
+      document.documentElement.lang = i18n.language
+    }, [i18n.language])
+  },
+
+  function SyncState() {
+    const dispatch = useDispatch()
+    const tabs = useSelector(getTabFileIds)
+    const { data: { files } = {} } = useQuery(SyncStateQuery, {
+      fetchPolicy: "network-only",
+      pollInterval: 3000,
+    })
+
+    useEffect(() => {
+      if (!files) return
+
+      const fileIds = new Set(files.map(s => s.id))
+      for (const id of tabs.filter(t => !fileIds.has(t))) {
+        dispatch(closeFile(id))
+      }
+    }, [tabs, dispatch, files])
+  },
+])
+
+export const ThemeQuery = gql<"ThemeQuery">`
+  query ThemeQuery {
+    preferences {
+      theme
+      lightTheme
+      darkTheme
+    }
+  }
+`
+
+const SyncStateQuery = gql<"SyncStateQuery">`
+  query SyncStateQuery {
+    files {
+      id
+    }
+  }
+`
diff --git a/src/options/Tabs/About/index.tsx b/src/options/Tabs/About/index.tsx
new file mode 100644
index 0000000..8640583
--- /dev/null
+++ b/src/options/Tabs/About/index.tsx
@@ -0,0 +1,85 @@
+import Icon from "@aet/icons/macro"
+import { memo, useMemo, useState } from "react"
+import { css, cx } from "@emotion/css"
+import { useEvent } from "@aet/hooks"
+import { Modal } from "~/vendor/react-responsive-modal"
+import { ListItem } from "../FileTree/FileItem"
+
+export const AboutModal = memo<{
+  as: React.ComponentType<{ onClick?: () => void; children: React.ReactNode }>
+}>(({ as: As }) => {
+  const [show, setShow] = useState(false)
+  const [licenseData, setLicenseData] = useState<Record<string, string | null>>()
+  const [selected, setSelected] = useState<string>()
+
+  const onHide = useEvent((e?: React.MouseEvent) => {
+    e?.stopPropagation()
+    setShow(false)
+  })
+  const onShow = useEvent(async () => {
+    setShow(true)
+
+    if (licenseData == null) {
+      const { default: data } = await import("../../../generated/licenses.json", {
+        assert: { type: "json" },
+      })
+      setLicenseData(data)
+      setSelected(Object.keys(data)[0])
+    }
+  })
+
+  const keys = useMemo(() => Object.keys(licenseData ?? {}), [licenseData])
+
+  return (
+    <As onClick={onShow}>
+      <Icon icon="VscInfo" />
+      <Modal open={show} center onClose={onHide}>
+        <div
+          className={css`
+            display: flex;
+            > div {
+              max-height: 80vh;
+              overflow-y: auto;
+            }
+          `}
+        >
+          <div
+            className={css`
+              width: 220px;
+              margin-right: 20px;
+            `}
+          >
+            {keys.map(key => (
+              <ListItem
+                key={key}
+                className={cx({
+                  active: key === selected,
+                })}
+                onClick={() => setSelected(key)}
+              >
+                {key}
+              </ListItem>
+            ))}
+          </div>
+          <div
+            className={css`
+              width: 625px;
+            `}
+          >
+            {selected != null && (
+              <pre
+                className={css`
+                  line-height: 1.45;
+                  margin: 0;
+                  white-space: pre-wrap;
+                `}
+              >
+                {licenseData?.[selected] ?? " "}
+              </pre>
+            )}
+          </div>
+        </div>
+      </Modal>
+    </As>
+  )
+})
diff --git a/src/options/Tabs/Documentation/index.tsx b/src/options/Tabs/Documentation/index.tsx
new file mode 100644
index 0000000..37bbd3f
--- /dev/null
+++ b/src/options/Tabs/Documentation/index.tsx
@@ -0,0 +1,13 @@
+import { useTranslation } from "react-i18next"
+import { Subheading, TabHeader, TabsContainer } from "~/shared/styled"
+
+export const DocumentationTab: FC<ClassNameProp> = ({ className }) => {
+  const { t } = useTranslation()
+  return (
+    <TabsContainer className={className}>
+      <TabHeader>
+        <Subheading>{t("tab.documentation")}</Subheading>
+      </TabHeader>
+    </TabsContainer>
+  )
+}
diff --git a/src/options/Tabs/FileTree/Adder.tsx b/src/options/Tabs/FileTree/Adder.tsx
new file mode 100644
index 0000000..c8b9bcf
--- /dev/null
+++ b/src/options/Tabs/FileTree/Adder.tsx
@@ -0,0 +1,179 @@
+import { memo, useEffect, useRef, useState } from "react"
+import { Popover, type PopoverRenderPropArg } from "@headlessui/react"
+import { useEvent } from "@aet/hooks"
+import styled from "@emotion/styled"
+import { cx } from "@emotion/css"
+import { useTranslation } from "react-i18next"
+import { sortBy } from "lodash"
+import Icon from "@aet/icons/macro"
+import { gql } from "~/generated/graphql"
+import { FILE_FRAGMENT } from "~/options/fragments"
+import { openFile } from "~/options/store/actions"
+import { token } from "~/options/theme"
+import { GET_FILES } from "./index"
+import { removeTypeName } from "~/shared/removeTypeName"
+import { useDispatch } from "~/options/store"
+import { Input, PrimaryPill, SubheadingButton } from "~/shared/styled"
+import { RuleType } from "~/shared/models/enums.generated"
+import { useDataList } from "~/shared/hooks/useDatalist"
+import { jaroDistance } from "./stringSimilarity"
+import { useDomainSuggestions } from "~/options/hooks/useDomainSuggestions"
+import { AddGlobalFileButton } from "./GlobalStyleAdder"
+import { useMutate } from "~/shared/hooks/useMutate"
+
+const CREATE_STYLE = gql<"CreateStyle">`
+  ${FILE_FRAGMENT}
+  mutation CreateStyle($input: PartialFileInput!) {
+    newFile(input: $input) {
+      ...FileFragment
+    }
+  }
+`
+
+export const AddStyle = () => (
+  <Popover>{popoverProps => <AddStyleModel {...popoverProps} />}</Popover>
+)
+
+const AddStyleModel = memo<PopoverRenderPropArg>(({ open: isOpen, close }) => {
+  const { t } = useTranslation()
+  const dispatch = useDispatch()
+
+  const createStyle = useMutate(CREATE_STYLE, {
+    refetchQueries: [{ query: GET_FILES }],
+  })
+
+  const suggestions = useDomainSuggestions({ skip: !isOpen })
+  const datalist = useDataList(suggestions, "hostname")
+
+  const nameInputRef = useRef<HTMLInputElement>(null)
+  const [domain, setDomain] = useState("")
+
+  const onSetDomain = useEvent((e: React.ChangeEvent<HTMLInputElement>) => {
+    const domain = e.target.value
+    const suggestion = suggestions.find(s => s.hostname === domain)
+    setDomain(domain)
+
+    if (suggestion?.title && !nameInputRef.current?.value) {
+      nameInputRef.current!.value = guessSiteName(suggestion.title, domain)
+    }
+  })
+
+  useEffect(() => {
+    if (isOpen) {
+      nameInputRef.current?.focus()
+    } else {
+      setDomain("")
+    }
+  }, [isOpen])
+
+  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    const { data } = await createStyle({
+      input: {
+        name: nameInputRef.current!.value,
+        rules: [
+          {
+            value: domain,
+            type: RuleType.Domain,
+            exclude: false,
+          },
+        ],
+      },
+    })
+
+    dispatch(openFile(removeTypeName(data!.newFile)))
+    close()
+  }
+
+  return (
+    <>
+      <SubheadingButton
+        as={Popover.Button}
+        className={cx({ active: isOpen })}
+        style={{ marginTop: -3 }}
+        title={t("file.createStyle")}
+      >
+        <Icon icon="VscNewFile" />
+      </SubheadingButton>
+
+      <AddStyleModelContainer as={Popover.Panel}>
+        <PopoverArrow />
+        <form onSubmit={onSubmit}>
+          <AddGlobalFileButton onClose={close} />
+          <FormEntry>
+            <FormLabel>{t("file.name")}</FormLabel>
+            <Input required ref={nameInputRef} type="search" />
+          </FormEntry>
+
+          <FormEntry>
+            <FormLabel>{t("rule.domain")}</FormLabel>
+            <Input type="text" list={datalist.id} value={domain} onChange={onSetDomain} />
+            {datalist.element}
+          </FormEntry>
+
+          <PrimaryPill type="submit">{t("editor.verbCreate")}</PrimaryPill>
+        </form>
+      </AddStyleModelContainer>
+    </>
+  )
+})
+
+function guessSiteName(title: string, hostname: string) {
+  const separators = ["—", "–", "-"]
+
+  // Remove TLD, and the first subdomain if it is shorter than 5 characters.
+  const host = hostname.replace(/\.+$/, "").replace(/^[^.]{1,5}\.(.+)$/, "$1")
+
+  for (const separator of separators) {
+    if (!title.includes(separator)) {
+      continue
+    }
+
+    return sortBy(
+      title.split(separator).map(_ => _.trim()),
+      text => jaroDistance(text, host),
+    ).at(-1)!
+  }
+
+  return title || host
+}
+
+const AddStyleModelContainer = styled.form`
+  background-color: ${token.canvas.overlay};
+  border: 1px solid ${token.border.default};
+  border-radius: 5px;
+  box-shadow: ${token.shadow.extraLarge};
+  list-style: none;
+  padding-inline-start: 0;
+  padding: 14px 15px;
+  z-index: 5;
+
+  position: absolute;
+  right: 3px;
+  margin-top: 7px;
+`
+
+const PopoverArrow = styled.div`
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background-color: ${token.canvas.overlay};
+  transform: rotate(45deg);
+  z-index: 1;
+  top: -6px;
+  right: 15px;
+  border: 1px solid ${token.border.default};
+  border-bottom: none;
+  border-right: none;
+`
+
+const FormEntry = styled.div`
+  margin-bottom: 13px;
+`
+
+const FormLabel = styled.label`
+  display: block;
+  margin-bottom: 8px;
+  opacity: 0.8;
+`
diff --git a/src/options/Tabs/FileTree/FileItem.tsx b/src/options/Tabs/FileTree/FileItem.tsx
new file mode 100644
index 0000000..a7bffa7
--- /dev/null
+++ b/src/options/Tabs/FileTree/FileItem.tsx
@@ -0,0 +1,322 @@
+import styled from "@emotion/styled"
+import { css, cx } from "@emotion/css"
+import { useTranslation } from "react-i18next"
+import Icon from "@aet/icons/macro"
+import React, { memo, useEffect, useRef, useState } from "react"
+import { useClickOutside, useEvent } from "@aet/hooks"
+import { gql, useMutation } from "~/generated/graphql"
+import { color, token, vars } from "~/options/theme"
+import { type FileItemHook, useFileItemMenu } from "./FileItemContextMenu"
+import { FileState } from "~/shared/models/enums.generated"
+import { type TreeItem, useTreeContext } from "./index"
+import { useDispatch } from "~/options/store"
+import { renameFile } from "~/options/store/actions"
+import { Favicon } from "./Icon"
+import { isGlobalStyle } from "~/shared"
+import { useInputOnChange } from "~/shared/hooks/useInput"
+
+interface BaseFileItemProps {
+  active: boolean
+  children?: React.ReactNode
+  className?: string
+  item: TreeItem
+  menu: FileItemHook["menu"]
+  onClick: (e?: React.MouseEvent) => void
+  onContextMenu: FileItemHook["onMenu"]
+  readOnly?: boolean
+  style?: React.CSSProperties
+}
+
+const RENAME_FILE = gql<"RenameFile">`
+  mutation RenameFile($id: ID!, $name: String!) {
+    setFile(input: { name: $name }, id: $id) {
+      name
+      id
+    }
+  }
+`
+
+export const AbstractBaseFileItem = memo<
+  Pick<
+    BaseFileItemProps,
+    | "active"
+    | "children"
+    | "className"
+    | "onClick"
+    | "onContextMenu"
+    | "readOnly"
+    | "style"
+  > & {
+    icon?: React.ReactNode
+    item: { id: string; name: string; subLabel?: string | null }
+    lang?: string
+    onRename: (newName: string) => Promise<void>
+    title?: string
+  }
+>(props => {
+  const {
+    active,
+    children,
+    className,
+    icon,
+    item,
+    lang,
+    onContextMenu,
+    onClick,
+    onRename,
+    readOnly,
+    ...rest
+  } = props
+  const { t } = useTranslation()
+  const containerRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const { renamingFileID, setRenamingFileID } = useTreeContext()
+  const renaming = !readOnly && renamingFileID === item.id
+
+  useClickOutside(containerRef, () => setRenamingFileID(null), { skip: !renaming })
+
+  const isGlobal = isGlobalStyle(item)
+  const itemName = isGlobal ? t("file.nameGlobalStyle") : item.name
+  const [input, setInput] = useState(itemName)
+  const onInput = useInputOnChange(setInput)
+
+  const onKeyDown = useEvent(async (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!renaming) return
+
+    if (e.key === "Enter") {
+      const newName = input
+      if (newName !== itemName) {
+        await onRename(newName)
+      }
+
+      setRenamingFileID(null)
+    } else if (e.key === "Escape") {
+      setRenamingFileID(null)
+    }
+  })
+
+  useEffect(() => {
+    if (!renaming) {
+      setInput(itemName)
+    }
+  }, [itemName, renaming])
+
+  useEffect(() => {
+    if (renaming) {
+      inputRef.current?.focus()
+    }
+  }, [renaming, renamingFileID])
+
+  const onEnter = useEvent((e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === "Enter") {
+      onClick()
+    }
+  })
+
+  return (
+    <ListItem
+      {...rest}
+      ref={containerRef}
+      className={cx(
+        { active, renaming },
+        renamingFileID != null && renamingFileID !== item.id && RENAMING_OTHER_FILE,
+        className,
+      )}
+      tabIndex={0}
+      onKeyDown={onEnter}
+      onClick={onClick}
+      onContextMenu={onContextMenu}
+    >
+      {icon}
+      {renaming ? (
+        <Input
+          ref={inputRef}
+          onKeyDown={onKeyDown}
+          onChange={onInput}
+          lang={lang}
+          value={input}
+          tabIndex={-1}
+        />
+      ) : (
+        <ItemLabel
+          className={cx({ renaming })}
+          onKeyDown={onKeyDown}
+          onChange={onInput}
+          lang={lang}
+          tabIndex={-1}
+        >
+          {itemName}
+          {item.subLabel != null && <SubLabel>({item.subLabel})</SubLabel>}
+        </ItemLabel>
+      )}
+      {children}
+    </ListItem>
+  )
+})
+
+const BaseFileItem = memo<BaseFileItemProps>(props => {
+  const { children, className, item, menu, ...rest } = props
+  const { t } = useTranslation()
+  const dispatch = useDispatch()
+
+  const [rename] = useMutation(RENAME_FILE)
+
+  const itemName = isGlobalStyle(item) ? t("file.nameGlobalStyle") : item.name
+
+  const onRename = useEvent(async (newName: string) => {
+    if (newName !== itemName) {
+      await rename({
+        variables: {
+          id: item.id,
+          name: newName,
+        },
+      })
+      dispatch(renameFile(item.id, newName))
+    }
+  })
+
+  return (
+    <AbstractBaseFileItem
+      {...rest}
+      item={item}
+      className={cx(
+        item.enabled === false && DISABLED_FILE,
+        item.state === FileState.Deleted && DELETED_FILE,
+        item.state === FileState.Archived && ARCHIVED_FILE,
+        className,
+      )}
+      onRename={onRename}
+      title={
+        `${itemName}` +
+        (item.enabled === false
+          ? ` (${t("editor.disabled")})`
+          : item.state === FileState.Deleted
+          ? ` (${t("editor.deleted")})`
+          : item.state === FileState.Archived
+          ? ` (${t("editor.archived")})`
+          : "")
+      }
+      lang={item.nameLanguage || undefined}
+      icon={isGlobalStyle(item) ? <GlobeIcon /> : <Favicon item={item} />}
+    >
+      {children}
+      {menu}
+    </AbstractBaseFileItem>
+  )
+})
+
+interface FileItemProps {
+  active: boolean
+  children?: React.ReactNode
+  className?: string
+  item: TreeItem
+  multi: boolean
+  onOpen(id: string): void
+  onToggle(checked: boolean): void
+  readOnly?: boolean
+  selectedFileIds: string[]
+  style?: React.CSSProperties
+}
+
+export const FileItem = memo<FileItemProps>(props => {
+  const { active, item, onOpen, onToggle, multi, selectedFileIds: _, ...rest } = props
+  const { toggleMenu, menu, onMenu } = useFileItemMenu([item.id])
+  const { toggleMultiSelect } = useTreeContext()
+
+  const onClick = useEvent((e?: React.MouseEvent) => {
+    if (multi) {
+      onToggle(!active)
+    } else if (e?.metaKey) {
+      toggleMultiSelect()
+      setTimeout(() => onToggle(true))
+    } else {
+      onOpen(item.id)
+    }
+
+    toggleMenu(false)
+  })
+
+  if (multi) {
+    return (
+      <BaseFileItem
+        {...rest}
+        active={active}
+        item={item}
+        menu={menu}
+        onContextMenu={onMenu}
+        onClick={onClick}
+      />
+    )
+  }
+
+  return (
+    <BaseFileItem
+      {...rest}
+      item={item}
+      active={active}
+      menu={menu}
+      onContextMenu={onMenu}
+      onClick={onClick}
+    />
+  )
+})
+
+const RENAMING_OTHER_FILE = css`
+  opacity: 0.3;
+`
+const DISABLED_FILE = css`
+  font-style: italic;
+`
+const DELETED_FILE = css`
+  opacity: 0.4;
+`
+const ARCHIVED_FILE = css`
+  opacity: 0.6;
+`
+
+export const ListItem = styled.div`
+  border: 1px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 7px 11px;
+  margin-bottom: 1px;
+
+  display: flex;
+  align-items: center;
+  &:hover,
+  &.active:hover {
+    background-color: ${vars.backgroundHover};
+  }
+  &.active {
+    // #282e34, #6e768166
+    background-color: ${color("#afb8c133", "#282e34")};
+  }
+  &.renaming {
+    background-color: transparent;
+    border: 1px solid ${token.accent.emphasis};
+  }
+`
+
+const Input = styled.input`
+  background: transparent;
+  border: none;
+  width: 100%;
+  flex: 1;
+`
+const ItemLabel = styled.div`
+  background: transparent;
+  border: none;
+  width: 100%;
+  flex: 1;
+  margin-left: 2.5px;
+`
+
+const GlobeIcon = styled(Icon.of("BsGlobe"))`
+  margin-right: 4px;
+  font-size: 1.2em;
+`
+
+const SubLabel = styled.span`
+  opacity: 0.5;
+  margin-left: 4px;
+`
diff --git a/src/options/Tabs/FileTree/FileItemContextMenu.tsx b/src/options/Tabs/FileTree/FileItemContextMenu.tsx
new file mode 100644
index 0000000..094a215
--- /dev/null
+++ b/src/options/Tabs/FileTree/FileItemContextMenu.tsx
@@ -0,0 +1,273 @@
+import { memo, useCallback, useEffect, useMemo, useState } from "react"
+import Icon from "@aet/icons/macro"
+import {
+  ControlledMenu,
+  MenuItem as Item,
+  type RadioChangeEvent,
+} from "@szhsin/react-menu"
+import { useTranslation } from "react-i18next"
+import { useIsMounted, useToggle } from "@react-hookz/web"
+import { css } from "@emotion/css"
+import { useEvent } from "@aet/hooks"
+import { gql, useMutation, useQuery } from "~/generated/graphql"
+import { FileState } from "~/shared/models/enums.generated"
+import type * as types from "~/generated/graphql"
+import { GET_FILES, useTreeContext } from "./index"
+import { showErrorToast } from "~/shared/hooks/useShowApolloError"
+import { useDropdownMenu } from "~/options/hooks/useDropdownMenu"
+import { isGlobalStyle } from "~/shared"
+import { closeFile } from "~/options/store/actions"
+import { token } from "~/options/theme"
+import { useDispatch } from "~/options/store"
+import { SubLabelEditor } from "./SubLabelEditor"
+
+const CONTEXT_MENU_SINGLE_QUERY = gql<"ContextMenuSingleQuery">`
+  query ContextMenuSingleQuery($id: ID!) {
+    file(id: $id) {
+      id
+      enabled
+      state
+      icon
+      subLabel
+    }
+  }
+`
+
+const CONTEXT_MENU_MULTIPLE_QUERY = gql<"ContextMenuMultipleQuery">`
+  query ContextMenuMultipleQuery($ids: [ID!]!) {
+    files(filter: { id: $ids }) {
+      id
+      enabled
+      state
+      icon
+      subLabel
+    }
+  }
+`
+
+const UPDATE_FILE = gql<"SetFileFromContextMenu">`
+  mutation SetFileFromContextMenu($ids: [ID!]!, $input: PartialFileInput!) {
+    setFiles(ids: $ids, input: $input) {
+      id
+      enabled
+      state
+    }
+  }
+`
+
+const DELETE_FILE = gql<"DeleteFileFromContextMenu">`
+  mutation DeleteFileFromContextMenu($ids: [ID!]!) {
+    deleteFiles(ids: $ids)
+  }
+`
+
+function useOnMenuItemClick(fn: () => void) {
+  return useEvent((e: RadioChangeEvent) => {
+    e.syntheticEvent.stopPropagation()
+    fn()
+  })
+}
+
+type Files = types.ContextMenuMultipleQueryQuery["files"]
+
+const Menus = memo<{ files: Files; onMount?(): void }>(({ files, onMount }) => {
+  const dispatch = useDispatch()
+  const isMounted = useIsMounted()()
+  const { t } = useTranslation()
+  const [setFiles] = useMutation(UPDATE_FILE, {
+    refetchQueries: [{ query: GET_FILES }],
+  })
+  const ids = useMemo(() => files.map(x => x.id), [files])
+  const { setRenamingFileID, setModifyingIconFileID } = useTreeContext()
+  const [showLabelDialog, setShowLabelDialog] = useToggle(false)
+
+  const closeFiles = useCallback(() => {
+    ids.forEach(id => {
+      dispatch(closeFile(id))
+    })
+  }, [dispatch, ids])
+
+  const [strongDeleteFile] = useMutation(DELETE_FILE, {
+    refetchQueries: [{ query: GET_FILES }],
+    onError: showErrorToast,
+    onCompleted: closeFiles,
+  })
+
+  const update = useEvent(
+    (partial: Omit<types.PartialFileInput, "id">, close?: boolean) => {
+      setFiles({
+        variables: { ids, input: partial },
+        onCompleted: close ? closeFiles : undefined,
+      })
+    },
+  )
+
+  useEffect(() => {
+    if (isMounted) {
+      onMount?.()
+    }
+  }, [isMounted, onMount])
+
+  const enable = useOnMenuItemClick(() => update({ enabled: true }))
+  const disable = useOnMenuItemClick(() => update({ enabled: false }, true))
+  const deleteState = useOnMenuItemClick(() => update({ state: FileState.None }))
+  const hide = useOnMenuItemClick(() => update({ state: FileState.Hidden }))
+  const archive = useOnMenuItemClick(() => update({ state: FileState.Archived }))
+  const deleteFile = useOnMenuItemClick(() => update({ state: FileState.Deleted }, true))
+  const definitelyDelete = useOnMenuItemClick(() =>
+    strongDeleteFile({ variables: { ids } }),
+  )
+  const rename = useOnMenuItemClick(() => setRenamingFileID(ids[0]))
+  const setLabel = useEvent((label: string) => update({ subLabel: label }))
+
+  const modifyIcon = useOnMenuItemClick(() => setModifyingIconFileID(ids[0]))
+
+  const some = (predicate: (file: Files[number]) => boolean) => files.some(predicate)
+  const all: typeof some = predicate => files.every(predicate)
+
+  const globalSelected = some(isGlobalStyle)
+
+  return (
+    <>
+      <SubLabelEditor
+        value={files[0]?.subLabel ?? ""}
+        onChange={setLabel}
+        open={showLabelDialog}
+        onClose={() => setShowLabelDialog(false)}
+      />
+      {files.length === 1 && !globalSelected && (
+        <Item key="rename" onClick={rename}>
+          <Icon icon="BiRename" />
+          {t("editor.verbRename")}
+        </Item>
+      )}
+      {files.length === 1 && !globalSelected && (
+        <Item key="modifyIcon" onClick={() => setShowLabelDialog()}>
+          <Icon icon="BsTags" />
+          {t("editor.verbModifyLabel")}
+        </Item>
+      )}
+      {files.length === 1 && !globalSelected && (
+        <Item key="modifyIcon" onClick={modifyIcon}>
+          <Icon icon="HiStar" />
+          {t("editor.verbModifyIcon")}
+        </Item>
+      )}
+      {some(x => x.state === FileState.None && x.enabled) && (
+        <Item key="disable" onClick={disable}>
+          <Icon icon="VscDebugPause" />
+          {t("editor.verbDisable")}
+        </Item>
+      )}
+      {some(x => x.state === FileState.None && !x.enabled) && (
+        <Item key="enable" onClick={enable}>
+          <Icon icon="FaPlay" />
+          {t("editor.verbEnable")}
+        </Item>
+      )}
+      {all(x => x.state === FileState.None) && (
+        <Item key="unhide" onClick={hide}>
+          <Icon icon="BiHide" />
+          {t("editor.verbHide")}
+        </Item>
+      )}
+      {some(x => x.state === FileState.None) && (
+        <>
+          {!globalSelected && (
+            <Item key="archive" onClick={archive}>
+              <Icon icon="VscArchive" />
+              {t("editor.verbArchive")}
+            </Item>
+          )}
+          <Item key="delete" onClick={deleteFile}>
+            <Icon icon="VscTrash" />
+            {t("editor.verbDelete")}
+          </Item>
+        </>
+      )}
+      {some(x => x.state === FileState.Archived) && !globalSelected && (
+        <Item key="unarchive" onClick={deleteState}>
+          <Icon icon="RiInboxUnarchiveFill" />
+          {t("editor.verbUnarchive")}
+        </Item>
+      )}
+      {all(x => x.state === FileState.Hidden) && (
+        <Item key="unhide" onClick={deleteState}>
+          <Icon icon="BiShow" />
+          {t("editor.verbUnhide")}
+        </Item>
+      )}
+      {all(x => x.state === FileState.Deleted) && (
+        <>
+          <Item key="restore" onClick={deleteState}>
+            <Icon icon="FaTrashRestore" />
+            {t("editor.verbRestore")}
+          </Item>
+          <Item
+            key="permDelete"
+            onClick={definitelyDelete}
+            className={css`
+              color: ${token.danger.fg};
+            `}
+          >
+            <Icon icon="VscTrash" />
+            {t("editor.verbDefinitelyDelete")}
+          </Item>
+        </>
+      )}
+    </>
+  )
+})
+
+export type FileItemHook = ReturnType<typeof useFileItemMenu>
+
+export function useFileItemMenu(ids: string[]) {
+  const isSingular = ids.length === 1
+
+  const [skip, setSkip] = useState(true)
+  const {
+    menuProps,
+    toggleMenu,
+    onMouse: onMenu,
+  } = useDropdownMenu(css`
+    .szh-menu--state-open {
+      min-width: 171px;
+    }
+  `)
+
+  const multiple = useQuery(CONTEXT_MENU_MULTIPLE_QUERY, {
+    fetchPolicy: "cache-first",
+    variables: { ids },
+    skip: skip || isSingular,
+    onError: showErrorToast,
+  })
+
+  const single = useQuery(CONTEXT_MENU_SINGLE_QUERY, {
+    fetchPolicy: "cache-first",
+    variables: { id: ids[0] },
+    skip: skip || !isSingular,
+    onError: showErrorToast,
+  })
+
+  useEffect(() => {
+    if (menuProps.state === "open") {
+      setSkip(false)
+    }
+  }, [menuProps.state])
+
+  const files = isSingular
+    ? single.data?.file
+      ? [single.data.file]
+      : undefined
+    : multiple.data?.files
+
+  return {
+    toggleMenu,
+    onMenu,
+    menu: files != null && (
+      <ControlledMenu {...menuProps}>
+        <Menus files={files} />
+      </ControlledMenu>
+    ),
+  }
+}
diff --git a/src/options/Tabs/FileTree/FilterState.tsx b/src/options/Tabs/FileTree/FilterState.tsx
new file mode 100644
index 0000000..6da147e
--- /dev/null
+++ b/src/options/Tabs/FileTree/FilterState.tsx
@@ -0,0 +1,176 @@
+import { Listbox } from "@headlessui/react"
+import styled from "@emotion/styled"
+import { useTranslation } from "react-i18next"
+import { css, cx } from "@emotion/css"
+import Icon from "@aet/icons/macro"
+import { memo } from "react"
+import { useEvent } from "@aet/hooks"
+import { FileState } from "~/shared/models/enums.generated"
+import type { TreeItem } from "./index"
+import type { TranslationKey } from "~/shared/i18n/data.generated"
+import { S, useLocalStorageState } from "~/shared/hooks/useLocalStorage"
+import { isGlobalStyle } from "~/shared"
+import { color, token } from "~/options/theme"
+
+const enum Filter {
+  Null,
+  Hidden,
+  Archived,
+  Deleted,
+  NoIcon,
+}
+
+export interface FilterState {
+  key: Filter
+  icon: React.ReactElement
+  value: (file: TreeItem) => boolean
+  label: TranslationKey
+}
+
+const filterStates: FilterState[] = [
+  {
+    key: Filter.Null,
+    icon: <Icon icon="VscFiles" />,
+    value: file => file.state === FileState.None,
+    label: "tab.file",
+  },
+  {
+    key: Filter.Hidden,
+    icon: <Icon icon="BiHide" />,
+    value: file => file.state === FileState.Hidden,
+    label: "editor.hidden",
+  },
+  {
+    key: Filter.Archived,
+    icon: <Icon icon="VscArchive" />,
+    value: file => file.state === FileState.Archived,
+    label: "editor.archived",
+  },
+  {
+    key: Filter.Deleted,
+    icon: <Icon icon="VscTrash" />,
+    value: file => file.state === FileState.Deleted,
+    label: "editor.deleted",
+  },
+  {
+    key: Filter.NoIcon,
+    icon: <Icon icon="SlQuestion" />,
+    value: file => !file.icon || (file.icon === ddgEmpty && !isGlobalStyle(file)),
+    label: "editor.noIcon",
+  },
+]
+
+export function useFilterState() {
+  return useLocalStorageState(
+    S.FileTreeFilter,
+    filterStates[0],
+    filter => filter.key,
+    key => filterStates.find(({ key: k }) => k === key)!,
+  )
+}
+
+export const FilterStateSelect = memo<{
+  filterState: FilterState
+  setFilterState: (state: FilterState) => void
+}>(({ filterState, setFilterState }) => {
+  const { t } = useTranslation()
+  const onChange = useEvent((value: Filter) => {
+    setFilterState(filterStates.find(({ key }) => key === value)!)
+  })
+
+  const currentKey = filterState.key
+
+  return (
+    <Listbox name="filterState" value={currentKey} onChange={onChange}>
+      {({ open }) => (
+        <>
+          <SubheadingSelect>
+            {t(filterStates.find(({ key }) => key === currentKey)!.label)}
+            {open ? <Icon icon="VscChevronUp" /> : <Icon icon="VscChevronDown" />}
+          </SubheadingSelect>
+          <SubheadingOptions className={subheadingOptions}>
+            {filterStates.map(({ key, label, icon }) => {
+              const active = key === currentKey
+              return (
+                <Listbox.Option key={key} value={key} className={cx({ active })}>
+                  {active ? (
+                    <Icon icon="BsCheckLg" />
+                  ) : (
+                    icon ?? <svg style={{ width: "1em", height: "1em" }} />
+                  )}
+                  {t(label)}
+                </Listbox.Option>
+              )
+            })}
+          </SubheadingOptions>
+        </>
+      )}
+    </Listbox>
+  )
+})
+
+const SubheadingSelect = styled(Listbox.Button)`
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  flex-grow: 1;
+  font-size: 0.88em;
+  letter-spacing: 0.7px;
+  margin: -2px -5px;
+  margin-top: -6px;
+  opacity: 0.7;
+  text-align: left;
+  text-transform: uppercase;
+  > svg {
+    margin-left: 5px;
+  }
+  > option {
+    text-transform: none;
+  }
+  &:hover {
+    text-decoration: underline;
+  }
+`
+
+const SubheadingOptions = styled(Listbox.Options)`
+  list-style: none;
+  margin-left: -10px;
+  margin-top: 20px;
+  min-width: 240px;
+  padding-inline-start: 0;
+  z-index: 5;
+  padding: 5px;
+`
+
+export const subheadingOptions = css`
+  background-color: ${token.canvas.overlay};
+  border-radius: 5px;
+  border: 1px solid ${token.border.default};
+  box-shadow: ${token.shadow.extraLarge};
+  position: absolute;
+  padding: 5px;
+
+  > li {
+    display: flex;
+    align-items: center;
+    padding: 6px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    &.active {
+      background-color: ${color("#e9e9e9", "#20324e")};
+    }
+    &:hover {
+      background-color: ${color("#ddd", "#20324e")};
+    }
+    &:not(:last-child) {
+      margin-bottom: 2px;
+    }
+    > svg {
+      margin-right: 7px;
+    }
+  }
+`
+
+const ddgEmpty =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkI4OUQxMDdDQTYwMTFFNEJGMThCRkI4NTA4NTkyNkYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkI4OUQxMDhDQTYwMTFFNEJGMThCRkI4NTA4NTkyNkYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCQjg5RDEwNUNBNjAxMUU0QkYxOEJGQjg1MDg1OTI2RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCQjg5RDEwNkNBNjAxMUU0QkYxOEJGQjg1MDg1OTI2RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjGq5lQAAAI0SURBVHja1Jo9jsIwEIW9Fh17gBxgD0B63EPPBXIBDkAP/Ub0XIAeeuiTA3CAHID061mNkWXlPzN28qQRQojkffZkPEn8dT6fBYFiHSv8jDCqVGBkOnL8HKXFSNNbHUrHsuN/DNwKv5c6HjpuQ2EWA40nlokxAvANBszIpS9IHwAYub2OteARDMivjqeOFFOtVbLjwRWODpd5W2s8l6ICgFE/9shzQZRaRzz3KICDjp0Ipx16GARwwIsrtDZNELIhbaZg3obYdwVQgdOmKZ1UG0DUlnOBdXBXeVmROssJAyzdVJLOCktV51867ozrRFy1EieE5mGU3tYFSK3EtBzS6SapzZ+YZsJ0vh+ALYN5wQyxtQEUEcC75jcOCGUAYqLKs2kpwdQQ4DmWRLkfCmIl7ZI0Q4j/GYh8N2CEEBEXgC+ISApesUNwA7BD+ABglQ+AO44yy52fnLN5A1DM1Tx45wLwYf4DkM3UPCgDgHym5kG5mYFyhuZLMwOgB8EBf3R8ezL/8WwAbkQAaQUE1xO+mw2QEV0LLgSX+dy9qQddiA5uIDifrV6qVmIgehJCcJl/2qXfbSVSoorEpRI91vZCRUspDK2T2znImvJ0naD5a1W5r+tGU8H3bHPoIpn2badPE4FoXOFlh5y7Bk6bxmuyy3viFMsW1HVf7w5KNN7a4nS9I4MDJYTrRFudT7r2Z33e1Bc4C5RbDdz2gHWrgb1iZ2LYZo+qVPG+2cMFESLgdps/AQYA9D2Sc4DqpGYAAAAASUVORK5CYII="
diff --git a/src/options/Tabs/FileTree/GlobalStyleAdder.tsx b/src/options/Tabs/FileTree/GlobalStyleAdder.tsx
new file mode 100644
index 0000000..4491405
--- /dev/null
+++ b/src/options/Tabs/FileTree/GlobalStyleAdder.tsx
@@ -0,0 +1,71 @@
+import { memo } from "react"
+import { useTranslation } from "react-i18next"
+import { css } from "@emotion/css"
+import Icon from "@aet/icons/macro"
+import { useEvent } from "@aet/hooks"
+import { gql, useMutation, useQuery } from "~/generated/graphql"
+import { FILE_FRAGMENT } from "~/options/fragments"
+import { openFile } from "~/options/store/actions"
+import { GET_FILES } from "./index"
+import { removeTypeName } from "~/shared/removeTypeName"
+import { useDispatch } from "~/options/store"
+import { Pill } from "~/shared/styled"
+import { GLOBAL_STYLE_ID } from "~/shared"
+
+const CURRENT_GLOBAL_STYLE = gql<"CreateGlobalStyleQuery">`
+  query CreateGlobalStyleQuery($id: ID!) {
+    file(id: $id) {
+      id
+    }
+  }
+`
+
+const CREATE_FILE = gql<"CreateGlobalStyle">`
+  ${FILE_FRAGMENT}
+  mutation CreateGlobalStyle {
+    createGlobalStyle {
+      ...FileFragment
+    }
+  }
+`
+
+export const AddGlobalFileButton = memo(({ onClose }: { onClose: () => void }) => {
+  const { t } = useTranslation()
+  const dispatch = useDispatch()
+
+  const { data } = useQuery(CURRENT_GLOBAL_STYLE, {
+    variables: { id: GLOBAL_STYLE_ID },
+  })
+  const [createFile] = useMutation(CREATE_FILE, {
+    refetchQueries: [{ query: GET_FILES }],
+  })
+
+  const onClick = useEvent(async (e: React.MouseEvent) => {
+    e.preventDefault()
+
+    const { data } = await createFile()
+    dispatch(openFile(removeTypeName(data!.createGlobalStyle)))
+    onClose()
+  })
+
+  if (data?.file) {
+    return null
+  }
+
+  return (
+    <>
+      <Pill
+        type="button"
+        onClick={onClick}
+        className={css`
+          width: 100%;
+        `}
+      >
+        <Icon icon="BsGlobe" />
+        {t("file.createGlobalStyle")}
+      </Pill>
+      <br />
+      <hr />
+    </>
+  )
+})
diff --git a/src/options/Tabs/FileTree/Icon.tsx b/src/options/Tabs/FileTree/Icon.tsx
new file mode 100644
index 0000000..7320549
--- /dev/null
+++ b/src/options/Tabs/FileTree/Icon.tsx
@@ -0,0 +1,74 @@
+import { css } from "@emotion/css"
+import { memo, useMemo } from "react"
+import { RuleType } from "~/shared/models/enums.generated"
+import type { TreeItem } from "./index"
+
+function getFavicon(url: string) {
+  url = url.replace(/@/g, "%40")
+  if (url.startsWith(`chrome://inspect`)) {
+    return defaultFavicon
+  }
+  return `chrome://favicon/size/512/${url}`
+}
+
+export function getFirstDomainRule(rules: TreeItem["rules"]) {
+  return rules.find(rule => rule.type === RuleType.Domain && !rule.exclude)?.value
+}
+
+function getURL(rules: TreeItem["rules"]) {
+  const domain = getFirstDomainRule(rules)
+  if (domain) {
+    return `https://${domain}`
+  }
+
+  const url = rules.find(r => r.type === RuleType.URLPrefix || r.type === RuleType.URL)
+    ?.value
+
+  if (url) {
+    return url
+  }
+}
+
+export const Favicon = memo<{ item: TreeItem }>(({ item }) => {
+  const { rules, icon } = item
+  const url = useMemo(() => getURL(rules), [rules])
+
+  if (!url) {
+    return defaultFavicon
+  }
+
+  const src = icon ?? getFavicon(url)
+
+  return typeof src === "string" ? (
+    <img
+      alt="Favicon"
+      className={css`
+        border-radius: 2px;
+        width: 16px;
+        height: 16px;
+        margin-right: 4px;
+      `}
+      src={src}
+    />
+  ) : (
+    src
+  )
+})
+
+const defaultFavicon = (
+  <svg
+    focusable="false"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    className={css`
+      width: 20px;
+      margin-left: -1px;
+      margin-right: 2px;
+    `}
+  >
+    <path
+      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"
+      fill="#0060f0"
+    />
+  </svg>
+)
diff --git a/src/options/Tabs/FileTree/IconModifier.tsx b/src/options/Tabs/FileTree/IconModifier.tsx
new file mode 100644
index 0000000..f9b1842
--- /dev/null
+++ b/src/options/Tabs/FileTree/IconModifier.tsx
@@ -0,0 +1,325 @@
+import { memo, useEffect, useState } from "react"
+import styled from "@emotion/styled"
+import { useTranslation } from "react-i18next"
+import { css, cx, keyframes } from "@emotion/css"
+import toast from "react-hot-toast"
+import Icon from "@aet/icons/macro"
+import { useEvent } from "@aet/hooks"
+import { gql, useMutation, useQuery } from "~/generated/graphql"
+import { Modal } from "~/vendor/react-responsive-modal"
+import { DangerPill, Input, Pill, PrimaryPill } from "~/shared/styled"
+import { showErrorToast } from "~/shared/hooks/useShowApolloError"
+import { FileInput } from "~/vendor/react-files-drag-and-drop"
+import { useTreeContext } from "./index"
+import { getFirstDomainRule } from "./Icon"
+
+const IconModifierQuery = gql<"IconModifierQuery">`
+  query IconModifierQuery($id: ID!) {
+    file(id: $id) {
+      id
+      icon
+      rules {
+        type
+        value
+        exclude
+      }
+    }
+  }
+`
+
+const IconModifierMutation = gql<"IconModifierMutation">`
+  mutation IconModifierMutation($id: ID!, $icon: String) {
+    setFile(id: $id, input: { icon: $icon }) {
+      id
+      icon
+    }
+  }
+`
+
+async function fetchIcoAsBase64(url: string) {
+  const response = await fetch(url)
+  const contentType = response.headers.get("Content-Type") || "image/x-icon"
+  const arrayBuffer = await response.arrayBuffer()
+  const base64String = window.btoa(
+    new Uint8Array(arrayBuffer).reduce(
+      (data, byte) => data + String.fromCharCode(byte),
+      "",
+    ),
+  )
+  return `data:${contentType};base64,${base64String}`
+}
+
+export const IconModifierModal = memo(() => {
+  const { modifyingIconFileID: fileId, setModifyingIconFileID: setState } =
+    useTreeContext()
+  const onClose = useEvent(() => setState(null))
+  const [loading, setLoading] = useState(false)
+
+  const { t } = useTranslation()
+  const [modified, setModified] = useState(false)
+  const [url, setURL] = useState("")
+  const [image, setImage] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!fileId) {
+      setURL("")
+      setImage(null)
+      setModified(false)
+    }
+  }, [fileId])
+
+  useQuery(IconModifierQuery, {
+    variables: { id: fileId! },
+    skip: !fileId,
+    onError: showErrorToast,
+    onCompleted({ file }) {
+      setImage(file.icon || null)
+      setModified(false)
+      if (!url) {
+        const domain = getFirstDomainRule(file.rules)
+        if (domain) {
+          setURL(domain)
+        }
+      }
+    },
+  })
+
+  const [modifyIcon] = useMutation(IconModifierMutation, {
+    onError: showErrorToast,
+  })
+
+  const onError = useEvent((message: string) => {
+    toast.error(message)
+  })
+
+  const onUpload = useEvent(([file]: File[]) => {
+    const reader = new FileReader()
+    reader.onload = () => {
+      setImage(reader.result as string)
+      setModified(true)
+    }
+    reader.readAsDataURL(file)
+  })
+
+  const onSave = useEvent(async () => {
+    if (!image || !fileId) return
+
+    await modifyIcon({ variables: { id: fileId, icon: image } })
+    onClose()
+  })
+
+  const onDelete = useEvent(async () => {
+    if (!fileId) return
+
+    await modifyIcon({ variables: { id: fileId, icon: null } })
+    onClose()
+  })
+
+  const onDownloadFromURL = useEvent(async (_: unknown, path = url) => {
+    if (!path) return
+
+    try {
+      setLoading(true)
+      const base64 = await fetchIcoAsBase64(path)
+      setModified(true)
+      setImage(base64)
+    } catch (e) {
+      toast.error(e)
+    } finally {
+      setLoading(false)
+    }
+  })
+
+  return (
+    <Modal
+      open={fileId != null}
+      onClose={onClose}
+      center
+      showCloseIcon={false}
+      classNames={{
+        modal: cx(
+          css`
+            max-width: 310px;
+            line-height: 1.45em;
+          `,
+          loading &&
+            css`
+              cursor: wait;
+            `,
+        ),
+      }}
+    >
+      <Header>{t("editor.modifyIcon")}</Header>
+      <FileInput
+        onUpload={onUpload}
+        onError={onError}
+        extensions={[".png", ".jpg", ".jpeg", ".gif", ".svg"]}
+        className={css`
+          display: flex;
+          align-items: center;
+        `}
+      >
+        {({ dragging }) => (
+          <div
+            className={css`
+              margin-top: 10px;
+              margin-bottom: 20px;
+              width: 100%;
+              text-align: center;
+            `}
+          >
+            {dragging ? <Hourglass /> : image ? <Img src={image} /> : <ImportIcon />}
+          </div>
+        )}
+      </FileInput>
+
+      <div
+        className={css`
+          display: flex;
+          margin-bottom: 10px;
+        `}
+      >
+        <Input
+          value={url}
+          onChange={useEvent(e => setURL(e.target.value))}
+          placeholder="URL"
+          onKeyUp={useEvent(e => {
+            const { value } = e.currentTarget
+            if (e.key === "Enter" && value) {
+              void onDownloadFromURL(null, value)
+            }
+          })}
+          className={css`
+            flex: 1;
+          `}
+        />
+
+        <DownloadPill
+          disabled={!url || loading}
+          title={t("editor.downloadIconFromURL")}
+          onClick={onDownloadFromURL}
+        >
+          <Icon icon="FiDownload" />
+        </DownloadPill>
+
+        <DuckDuckGoPill
+          disabled={!url || !/^([\w-]+\.)+\w+$/.test(url) || loading}
+          title={t("editor.downloadIconFromDuckDuckGo")}
+          onClick={useEvent(async () => {
+            await onDownloadFromURL(null, `https://icons.duckduckgo.com/ip3/${url}.ico`)
+          })}
+        >
+          <Icon icon="SiDuckduckgo" />
+        </DuckDuckGoPill>
+      </div>
+
+      <div
+        className={css`
+          height: 20px;
+        `}
+      />
+
+      <PrimaryButton tabIndex={0} onClick={onSave} disabled={!image || !modified}>
+        {t("editor.verbSave")}
+      </PrimaryButton>
+
+      {image && (
+        <DangerButton
+          onClick={onDelete}
+          tabIndex={0}
+          className={css`
+            margin-top: 7px;
+          `}
+        >
+          {t("editor.verbRemoveIcon")}
+        </DangerButton>
+      )}
+
+      <Button
+        tabIndex={0}
+        onClick={onClose}
+        className={css`
+          && {
+            margin-top: 15px;
+          }
+        `}
+      >
+        {t("cancel")}
+      </Button>
+    </Modal>
+  )
+})
+
+const Header = styled.h3`
+  font-weight: 600;
+  margin: 0;
+  margin-bottom: 1em;
+  text-align: center;
+`
+
+const Img = styled.img`
+  max-width: 250px;
+`
+
+const Button = styled(Pill)`
+  margin-top: 5px;
+  width: 100%;
+`
+
+const PrimaryButton = styled(PrimaryPill)`
+  width: 100%;
+`
+const DangerButton = styled(DangerPill)`
+  width: 100%;
+`
+
+const rotation = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+`
+
+const Hourglass = styled(Icon.of("BsHourglassTop"))`
+  color: #5300ff;
+  margin-right: 3px;
+  font-size: 4.2em;
+  animation: ${rotation} 2s infinite linear;
+`
+
+const fadeInOut = keyframes`
+  0% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 0.8;
+  }
+  100% {
+    opacity: 0.4;
+  }
+`
+
+const ImportIcon = styled(Icon.of("TbDragDrop"))`
+  animation: ${fadeInOut} 3s ease-in-out infinite;
+  font-size: 4.2em;
+`
+
+const DownloadPill = styled(Pill)`
+  margin-left: 5px;
+  && > svg {
+    margin-right: -1px;
+    font-size: 1.2em;
+  }
+`
+
+const DuckDuckGoPill = styled(Pill)`
+  color: #de5833;
+  font-size: 1.4em;
+  margin-left: 2px;
+  && > svg {
+    margin-right: -1px;
+    margin-left: -1px;
+  }
+`
diff --git a/src/options/Tabs/FileTree/Sorter.tsx b/src/options/Tabs/FileTree/Sorter.tsx
new file mode 100644
index 0000000..30d9b03
--- /dev/null
+++ b/src/options/Tabs/FileTree/Sorter.tsx
@@ -0,0 +1,199 @@
+import styled from "@emotion/styled"
+import Icon from "@aet/icons/macro"
+import { Listbox } from "@headlessui/react"
+import { css, cx } from "@emotion/css"
+import { findLast } from "lodash"
+import { useTranslation } from "react-i18next"
+import { memo, useMemo } from "react"
+import { useEvent } from "@aet/hooks"
+import { getMap } from "~/options/utils/componentMap"
+import { S, useLocalStorageState } from "~/shared/hooks/useLocalStorage"
+import type { TreeItem } from "./index"
+import type { TranslationKey } from "~/shared/i18n/data.generated"
+import { SubheadingButton } from "~/shared/styled"
+import { subheadingOptions } from "./FilterState"
+
+export const enum SortDirection {
+  Asc = "Asc",
+  Desc = "Desc",
+}
+
+export const enum SortType {
+  Name = "NameAsc",
+  Size = "SizeAsc",
+  LastModified = "LastModified",
+  LastUsed = "LastUsed",
+}
+
+const sortDirectionNames = getMap<SortDirection, TranslationKey>(() => ({
+  [SortDirection.Asc]: "sortBy.asc",
+  [SortDirection.Desc]: "sortBy.desc",
+}))
+
+export const sorters = getMap<
+  SortType,
+  {
+    name: TranslationKey
+    fn: (a: TreeItem, b: TreeItem, asc: boolean) => number
+  }
+>(() => ({
+  [SortType.Name]: {
+    name: "sortBy.name",
+    fn: (a, b, asc) => a.name.localeCompare(b.name) * (asc ? 1 : -1),
+  },
+  [SortType.Size]: {
+    name: "sortBy.size",
+    fn: (a, b, asc) => compareNumber(a.size, b.size, asc),
+  },
+  [SortType.LastModified]: {
+    name: "sortBy.lastModified",
+    fn: (a, b, asc) => compareDate(b.updatedAt, a.updatedAt, asc),
+  },
+  [SortType.LastUsed]: {
+    name: "sortBy.lastUsed",
+    fn: (a, b, asc) => compareDate(a.lastRequestedAt, b.lastRequestedAt, asc),
+  },
+}))
+
+interface SortState {
+  type: SortType
+  order: SortDirection
+}
+
+const defaultSortState: SortState = {
+  type: SortType.LastModified,
+  order: SortDirection.Desc,
+}
+
+export function useSorterState() {
+  return useLocalStorageState(S.FileTreeSorting, defaultSortState)
+}
+
+export const SortStateSelect = memo<{
+  sortBy: SortState
+  onChange: (key: SortState) => void
+}>(({ sortBy, onChange }) => {
+  const { t } = useTranslation()
+
+  const sortValue = useMemo(() => [sortBy.type, sortBy.order], [sortBy])
+
+  return (
+    <Listbox
+      name="filterState"
+      multiple
+      as="div"
+      value={sortValue}
+      onChange={useEvent(e => {
+        const lastType = findLast(e, key => sorters.has(key as SortType)) as
+          | SortType
+          | undefined
+        const lastOrder = findLast(e, key =>
+          sortDirectionNames.has(key as SortDirection),
+        ) as SortDirection | undefined
+        if (lastType !== sortBy.type || lastOrder !== sortBy.order) {
+          onChange({
+            type: lastType ?? sortBy.type,
+            order: lastOrder ?? sortBy.order,
+          })
+        }
+      })}
+    >
+      {({ open }) => (
+        <>
+          <Select>
+            <SubheadingButton className={cx({ active: open })}>
+              <Icon icon="BsSortUp" title={t(sorters.get(sortBy.type).name)} />
+            </SubheadingButton>
+          </Select>
+          <Options
+            className={cx(
+              subheadingOptions,
+              css`
+                li {
+                  padding-left: 8px;
+                  > svg {
+                    margin-right: 5px;
+                  }
+                }
+              `,
+            )}
+          >
+            {sorters.map(({ name }, type) => {
+              const active = type === sortBy.type
+              return (
+                <Listbox.Option key={type} value={type} className={cx({ active })}>
+                  {active ? (
+                    <Icon icon="BsCheckLg" />
+                  ) : (
+                    <svg style={{ width: "1em", height: "1em" }} />
+                  )}
+                  {t(name)}
+                </Listbox.Option>
+              )
+            })}
+            <hr />
+            {[SortDirection.Asc, SortDirection.Desc].map(type => {
+              const active = type === sortBy.order
+              return (
+                <Listbox.Option key={type} value={type} className={cx({ active })}>
+                  {active ? (
+                    <Icon icon="BsCheckLg" />
+                  ) : (
+                    <svg style={{ width: "1em", height: "1em" }} />
+                  )}
+                  {t(sortDirectionNames.get(type))}
+                </Listbox.Option>
+              )
+            })}
+          </Options>
+        </>
+      )}
+    </Listbox>
+  )
+})
+
+const Select = styled(Listbox.Button)`
+  border: none;
+  padding: 0;
+  margin-top: 2px;
+  font-size: 1.1em;
+`
+
+const Options = styled(Listbox.Options)`
+  z-index: 5;
+  right: 10px;
+  margin-top: 3px;
+`
+
+function compareNumber(
+  a: number | null | undefined,
+  b: number | null | undefined,
+  asc: boolean,
+) {
+  if (a == null && b == null) {
+    return 0
+  } else if (a == null) {
+    return asc ? 1 : -1
+  } else if (b == null) {
+    return asc ? -1 : 1
+  } else {
+    return asc ? a - b : b - a
+  }
+}
+function compareDate(
+  a: Date | null | undefined,
+  b: Date | null | undefined,
+  asc: boolean,
+) {
+  if (!a && !b) {
+    return 0
+  } else if (!a) {
+    return asc ? 1 : -1
+  } else if (!b) {
+    return asc ? -1 : 1
+  } else {
+    const dateA = a.getTime()
+    const dateB = b.getTime()
+    return asc ? dateA - dateB : dateB - dateA
+  }
+}
diff --git a/src/options/Tabs/FileTree/SubLabelEditor.tsx b/src/options/Tabs/FileTree/SubLabelEditor.tsx
new file mode 100644
index 0000000..d315ace
--- /dev/null
+++ b/src/options/Tabs/FileTree/SubLabelEditor.tsx
@@ -0,0 +1,159 @@
+import { memo, useEffect, useRef, useState } from "react"
+import { Dialog } from "@headlessui/react"
+import { css } from "@emotion/css"
+import Icon from "@aet/icons/macro"
+import { useTranslation } from "react-i18next"
+import { useEvent } from "@aet/hooks"
+import { DARK_MODE, token } from "~/options/theme"
+import { IconButton, Input, Pill, PrimaryPill } from "~/shared/styled"
+
+export const SubLabelEditor = memo<{
+  open: boolean
+  value: string
+  onChange: (value: string) => void
+  onClose: () => void
+}>(({ open, onClose, value, onChange }) => {
+  const { t } = useTranslation()
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [inputValue, setInputValue] = useState(value)
+
+  useEffect(() => {
+    setInputValue(value)
+  }, [value])
+
+  useEffect(() => {
+    if (open) {
+      inputRef.current?.focus()
+    }
+  }, [open])
+
+  const onConfirm = useEvent(() => {
+    onChange(inputValue)
+    onClose()
+  })
+
+  return (
+    <Dialog
+      className={css`
+        color: ${token.fg.default};
+        position: relative;
+        z-index: 10;
+      `}
+      open={open}
+      onClose={onClose}
+    >
+      <div
+        className={css`
+          position: fixed;
+          inset: 0;
+          background-color: rgba(0, 0, 0, 0.7);
+        `}
+        aria-hidden="true"
+      />
+      <div
+        className={css`
+          position: fixed;
+          inset: 0;
+          overflow-y: auto;
+        `}
+      >
+        <div
+          className={css`
+            display: flex;
+            min-height: 100%;
+            align-items: center;
+            justify-content: center;
+          `}
+        >
+          <Dialog.Panel
+            className={css`
+              width: 100%;
+              max-width: 28rem;
+              border-radius: 0.5rem;
+              background-color: ${token.canvas.default};
+              box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
+              transition: all 0.2s ease-in-out;
+              ${DARK_MODE} {
+                border: 1px solid ${token.border.default};
+              }
+            `}
+          >
+            <Dialog.Title
+              className={css`
+                background: ${token.canvas.overlay};
+                display: flex;
+                align-items: center;
+                font-size: 1em;
+                line-height: 1.5rem;
+                font-weight: 500;
+                margin: 0;
+                padding: 0.4rem 1rem;
+                border-top-left-radius: 0.5rem;
+                border-top-right-radius: 0.5rem;
+              `}
+            >
+              <span
+                className={css`
+                  flex: 1;
+                `}
+              >
+                {t("editor.verbModifyLabel")}
+              </span>
+              <IconButton
+                className={css`
+                  height: 1.75em;
+                  display: flex;
+                  align-items: center;
+                `}
+                onClick={onClose}
+              >
+                <Icon icon="VscClose" />
+              </IconButton>
+            </Dialog.Title>
+
+            <Dialog.Description
+              className={css`
+                padding: 0.3rem 1rem;
+              `}
+            >
+              <Input
+                ref={inputRef}
+                value={inputValue}
+                onChange={e => setInputValue(e.target.value)}
+                onKeyDown={e => {
+                  if (e.key === "Enter" && inputValue !== value) {
+                    onConfirm()
+                  }
+                }}
+              />
+            </Dialog.Description>
+
+            <div
+              className={css`
+                display: flex;
+                text-align: right;
+                justify-content: flex-end;
+                background: ${token.canvas.overlay};
+                border-bottom-left-radius: 0.5rem;
+                border-bottom-right-radius: 0.5rem;
+                padding: 0.5rem 1rem;
+              `}
+            >
+              <Pill onClick={onClose}>Cancel</Pill>
+              <PrimaryPill
+                onClick={onConfirm}
+                disabled={inputValue === value}
+                className={css`
+                  width: auto !important;
+                  margin-left: 7px;
+                `}
+              >
+                Confirmer
+              </PrimaryPill>
+            </div>
+          </Dialog.Panel>
+        </div>
+      </div>
+    </Dialog>
+  )
+})
diff --git a/src/options/Tabs/FileTree/index.tsx b/src/options/Tabs/FileTree/index.tsx
new file mode 100644
index 0000000..c1a65e9
--- /dev/null
+++ b/src/options/Tabs/FileTree/index.tsx
@@ -0,0 +1,247 @@
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
+import styled from "@emotion/styled"
+import Fuse from "fuse.js"
+import Icon from "@aet/icons/macro"
+import { useTranslation } from "react-i18next"
+import { createContext, useContextSelector } from "use-context-selector"
+import { useEvent } from "@aet/hooks"
+import type { FixedSizeList } from "react-window"
+import { type GetFileListQuery, gql, useQuery } from "~/generated/graphql"
+import { LIGHT_MODE, token } from "~/options/theme"
+import { useSelector } from "~/options/store"
+import { SimpleList } from "./lists/SimpleList"
+import { OpenedList } from "./lists/OpenedList"
+import { GroupedList } from "./lists/GroupedList"
+import { AddStyle as AddFile } from "./Adder"
+import { useDebouncedValue } from "~/shared/hooks/useDebouncedValue"
+import { FilterStateSelect, useFilterState } from "./FilterState"
+import { SubheadingButton } from "~/shared/styled"
+import { S, useLocalStorageState } from "~/shared/hooks/useLocalStorage"
+import { IconModifierModal } from "./IconModifier"
+import { SortDirection, SortStateSelect, sorters, useSorterState } from "./Sorter"
+
+export type Tree = GetFileListQuery["files"]
+export type TreeItem = Readonly<Tree[number]>
+
+export const GET_FILES = gql<"GetFileList">`
+  query GetFileList {
+    files(sortBy: UpdatedAt) {
+      enabled
+      icon
+      id
+      lastRequestedAt
+      name
+      nameLanguage
+      size
+      state
+      tags
+      updatedAt
+      subLabel
+      rules {
+        value
+        type
+        exclude
+      }
+    }
+  }
+`
+
+interface TreeContext {
+  selectedFiles: string[]
+  setSelectedFiles: (ids: string[]) => void
+  renamingFileID: string | null
+  setRenamingFileID: (id: string | null) => void
+  modifyingIconFileID: string | null
+  setModifyingIconFileID: (id: string | null) => void
+  toggleMultiSelect: () => void
+}
+
+const TreeContext = createContext<TreeContext>(null!)
+
+/* eslint-disable react-hooks/rules-of-hooks */
+export const useTreeContext = () => ({
+  get selectedFiles() {
+    return useContextSelector(TreeContext, s => s.selectedFiles)
+  },
+  get setSelectedFiles() {
+    return useContextSelector(TreeContext, s => s.setSelectedFiles)
+  },
+  get renamingFileID() {
+    return useContextSelector(TreeContext, s => s.renamingFileID)
+  },
+  get setRenamingFileID() {
+    return useContextSelector(TreeContext, s => s.setRenamingFileID)
+  },
+  get modifyingIconFileID() {
+    return useContextSelector(TreeContext, s => s.modifyingIconFileID)
+  },
+  get setModifyingIconFileID() {
+    return useContextSelector(TreeContext, s => s.setModifyingIconFileID)
+  },
+  get toggleMultiSelect() {
+    return useContextSelector(TreeContext, s => s.toggleMultiSelect)
+  },
+})
+/* eslint-enable react-hooks/rules-of-hooks */
+
+export const FilesTab = memo<ClassNameProp>(({ className }) => {
+  const { t } = useTranslation()
+  const listRef = useRef<FixedSizeList>(null)
+  const activeId = useSelector(s => s.activeFileId)
+  const [filterState, setFilterState] = useFilterState()
+
+  const [sortState, setSortState] = useSorterState()
+  const sortFn = sorters.get(sortState.type).fn
+
+  const [renamingFileID, setRenamingFileID] = useState<string | null>(null)
+  const [multiSelect, setMultiSelect] = useState(false)
+  const [groupView, setGroupView] = useLocalStorageState(S.FileTreeGroupView, false)
+  const [selectedFiles, setSelectedFiles] = useState<string[]>([])
+
+  const [search, setSearch] = useState("")
+  const debouncedSearch = useDebouncedValue(search, 50)
+
+  const [modifyingIconFileID, setModifyingIconFileID] = useState<string | null>(null)
+
+  const toggleMultiSelect = useEvent(() => {
+    if (multiSelect) {
+      setMultiSelect(false)
+      setSelectedFiles([])
+    } else {
+      setMultiSelect(true)
+      setSelectedFiles(activeId ? [activeId] : [])
+    }
+  })
+
+  const toggleGroupView = useCallback(() => {
+    setGroupView(x => !x)
+  }, [setGroupView])
+
+  const { data } = useQuery(GET_FILES)
+
+  const list = useMemo(
+    () =>
+      (data?.files ?? [])
+        .filter(filterState.value)
+        .sort((a, b) => sortFn(a, b, sortState.order === SortDirection.Asc)),
+    [data?.files, filterState, sortFn, sortState],
+  )
+
+  const fuse = useMemo(
+    () =>
+      new Fuse(list, {
+        keys: ["name", "tags", "rules.value"],
+        minMatchCharLength: 2,
+        shouldSort: true,
+        includeScore: true,
+        threshold: 0.2,
+      }),
+    [list],
+  )
+
+  const filteredList = useMemo(
+    () => (debouncedSearch ? fuse.search(debouncedSearch).map(r => r.item) : list),
+    [list, fuse, debouncedSearch],
+  )
+
+  // Scroll to renaming item
+  useEffect(() => {
+    if (!renamingFileID || !listRef.current) return
+
+    const index = filteredList.findIndex(s => s.id === renamingFileID)
+    if (index === -1) return
+
+    listRef.current.scrollToItem(index + 1)
+  }, [renamingFileID, filteredList])
+
+  return (
+    <FilesTabContainer className={className}>
+      <div>
+        <Input
+          type="search"
+          placeholder={t("search.find")}
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+        />
+      </div>
+
+      <Subheader>
+        <FilterStateSelect filterState={filterState} setFilterState={setFilterState} />
+        <SubheaderIcons>
+          <SortStateSelect sortBy={sortState} onChange={setSortState} />
+          {list.length > 1 && (
+            <SubheadingButton>
+              <Icon
+                icon="BiSelectMultiple"
+                style={{ fill: multiSelect ? token.accent.fg : undefined }}
+                onClick={toggleMultiSelect}
+              />
+            </SubheadingButton>
+          )}
+          <SubheadingButton>
+            <Icon
+              icon="VscLayers"
+              onClick={toggleGroupView}
+              style={{ fill: groupView ? token.accent.fg : undefined }}
+            />
+          </SubheadingButton>
+          <AddFile />
+        </SubheaderIcons>
+      </Subheader>
+
+      <TreeContext.Provider
+        value={{
+          selectedFiles,
+          setSelectedFiles,
+          renamingFileID,
+          setRenamingFileID,
+          modifyingIconFileID,
+          setModifyingIconFileID,
+          toggleMultiSelect,
+        }}
+      >
+        <OpenedList data={data} />
+        {groupView ? (
+          <GroupedList list={filteredList} multiSelect={multiSelect} />
+        ) : (
+          <SimpleList list={filteredList} listRef={listRef} multiSelect={multiSelect} />
+        )}
+        <IconModifierModal />
+      </TreeContext.Provider>
+    </FilesTabContainer>
+  )
+})
+
+const FilesTabContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: 5px;
+  padding: 7px 10px;
+  height: 100%;
+
+  ${LIGHT_MODE} {
+    background-color: #f7f8fa;
+  }
+`
+
+const Input = styled.input`
+  background-color: ${token.canvas.overlay};
+  border-radius: 75px;
+  border: 1px solid ${token.border.default};
+  padding: 5px 10px;
+  width: 100%;
+  &:focus {
+    border-color: #5f677a;
+  }
+`
+
+const Subheader = styled.div`
+  display: flex;
+  margin-top: 12px;
+  padding-left: 11px;
+`
+
+const SubheaderIcons = styled.div`
+  display: flex;
+  align-items: center;
+`
diff --git a/src/options/Tabs/FileTree/lists/GroupedList.tsx b/src/options/Tabs/FileTree/lists/GroupedList.tsx
new file mode 100644
index 0000000..444f562
--- /dev/null
+++ b/src/options/Tabs/FileTree/lists/GroupedList.tsx
@@ -0,0 +1,145 @@
+import styled from "@emotion/styled"
+import { memo, useMemo, useState } from "react"
+import { produce } from "immer"
+import { css } from "@emotion/css"
+import Icon from "@aet/icons/macro"
+import { ControlledMenu, MenuItem } from "@szhsin/react-menu"
+import { useTranslation } from "react-i18next"
+import { useAutoMemo } from "hooks.macro"
+import { useEvent } from "@aet/hooks"
+import { gql, useMutation } from "~/generated/graphql"
+import { type Tree, useTreeContext } from "../index"
+import { useFileListRenderer } from "./SimpleList"
+import { S, useLocalStorageState } from "~/shared/hooks/useLocalStorage"
+import { AbstractBaseFileItem } from "../FileItem"
+import { useDropdownMenu } from "~/options/hooks/useDropdownMenu"
+
+const RENAME_TAG_MUTATION = gql<"RenameTag">`
+  mutation RenameTag($oldTag: String!, $newTag: String!) {
+    renameTag(oldTag: $oldTag, newTag: $newTag) {
+      id
+      tags
+    }
+  }
+`
+
+export const GroupedList = memo<{
+  list: Tree
+  multiSelect: boolean
+}>(({ list, multiSelect }) => {
+  const [expandedGroups, setExpandedGroups] = useLocalStorageState(
+    S.FileTreeVisibleGroups,
+    new Set<string>(),
+  )
+
+  const onToggleGroup = useEvent((tag: string) => {
+    setExpandedGroups(groups =>
+      produce(groups, draft => {
+        if (draft.has(tag)) {
+          draft.delete(tag)
+        } else {
+          draft.add(tag)
+        }
+      }),
+    )
+  })
+
+  const tagMap = useMemo(() => {
+    const map = new Map<string, Tree>()
+    for (const item of list) {
+      for (const tag of item.tags) {
+        if (map.has(tag)) {
+          map.get(tag)!.push(item)
+        } else {
+          map.set(tag, [item])
+        }
+      }
+    }
+    return Array.from(map.entries()).sort(([a], [b]) => a.localeCompare(b))
+  }, [list])
+
+  return (
+    <GroupedListContainer>
+      {tagMap.map(([tag, items]) => (
+        <Group
+          expanded={expandedGroups.has(tag)}
+          key={tag}
+          tag={tag}
+          items={items}
+          multiSelect={multiSelect}
+          onToggleGroup={onToggleGroup}
+        />
+      ))}
+    </GroupedListContainer>
+  )
+})
+
+const Group = memo<{
+  tag: string
+  items: Tree
+  multiSelect: boolean
+  expanded: boolean
+  onToggleGroup: (tag: string) => void
+}>(props => {
+  const { t } = useTranslation()
+  const { tag, items, multiSelect, expanded, onToggleGroup } = props
+  const [renderChild, setRenderChild] = useState(expanded)
+  const [renameTag] = useMutation(RENAME_TAG_MUTATION)
+  const { menuProps, onMouse } = useDropdownMenu()
+  const render = useFileListRenderer()
+  const { setRenamingFileID } = useTreeContext()
+
+  if (!renderChild && expanded) {
+    setRenderChild(true)
+  }
+
+  const onStartRename = useEvent(() => {
+    setRenamingFileID(`tag-${tag}`)
+  })
+
+  return (
+    <>
+      {menuProps.state === "open" && (
+        <ControlledMenu {...menuProps}>
+          <MenuItem onClick={onStartRename}>
+            <Icon icon="BiRename" />
+            {t("editor.verbRename")}
+          </MenuItem>
+        </ControlledMenu>
+      )}
+      <AbstractBaseFileItem
+        active={false}
+        key={tag}
+        onClick={useEvent(() => onToggleGroup(tag))}
+        onContextMenu={onMouse}
+        onRename={useEvent(async (name: string) => {
+          await renameTag({ variables: { oldTag: tag, newTag: name } })
+        })}
+        item={useAutoMemo(() => ({ id: `tag-${tag}`, name: tag }))}
+        icon={expanded ? <Icon icon="VscChevronDown" /> : <Icon icon="VscChevronRight" />}
+        className={css`
+          height: 30px;
+          > svg {
+            font-size: 19px;
+            margin: -3px 2px -3px -7px;
+          }
+        `}
+      />
+      {renderChild && (
+        <div style={expanded ? undefined : { display: "none" }}>
+          {items.map(item => render({ item, className: listItemClass, multiSelect }))}
+        </div>
+      )}
+    </>
+  )
+})
+
+const GroupedListContainer = styled.div`
+  overflow-y: scroll;
+`
+
+const listItemClass = css`
+  && {
+    padding: 4px 11px 4px 20px;
+  }
+`
diff --git a/src/options/Tabs/FileTree/lists/OpenedList.tsx b/src/options/Tabs/FileTree/lists/OpenedList.tsx
new file mode 100644
index 0000000..b0e026f
--- /dev/null
+++ b/src/options/Tabs/FileTree/lists/OpenedList.tsx
@@ -0,0 +1,86 @@
+import styled from "@emotion/styled"
+import { memo, useMemo } from "react"
+import { css } from "@emotion/css"
+import Icon from "@aet/icons/macro"
+import { useFileListRenderer } from "./SimpleList"
+import type { GetFileListQuery } from "~/generated/graphql"
+import { getTabs, useSelector } from "~/options/store"
+import { ButtonWrapper } from "~/shared/styled"
+import { TabCloseButton } from "~/options/editor/Tabs/CloseDot"
+import type { TreeItem } from "../index"
+import { token } from "~/options/theme"
+import { useFileSaver } from "~/options/hooks/useSaveFile"
+
+export const OpenedList = memo<{
+  data?: GetFileListQuery
+}>(({ data }) => {
+  const tabs = useSelector(getTabs)
+
+  const list = useMemo(() => {
+    const ids = new Set(tabs.map(t => t.id))
+    return data?.files.filter(s => ids.has(s.id)) ?? []
+  }, [tabs, data?.files])
+
+  const render = useFileListRenderer()
+
+  if (list.length < 2) {
+    return null
+  }
+
+  return (
+    <div>
+      <List>
+        {list.map(item =>
+          render({
+            item,
+            className: listItem,
+            readOnly: true,
+            children: <OpenedTabToolbar item={item} key={item.id} />,
+            multiSelect: false,
+          }),
+        )}
+      </List>
+      <hr />
+    </div>
+  )
+})
+
+const OpenedTabToolbar = memo(({ item }: { item: TreeItem }) => {
+  const isStyleDirty = useSelector(s => s.dirtyFileIds.has(item.id))
+  const save = useFileSaver()
+
+  return (
+    <ButtonContainer>
+      <ButtonWrapper disabled={!isStyleDirty} onClick={() => save(item.id)}>
+        <Icon icon="VscSave" />
+      </ButtonWrapper>
+      <TabCloseButton fileId={item.id} fileName={item.name} />
+    </ButtonContainer>
+  )
+})
+
+const List = styled.div`
+  border-radius: 5px;
+  margin-top: 7px;
+  flex-grow: 1;
+`
+
+const ButtonContainer = styled.div`
+  display: flex;
+  align-items: center;
+  > button {
+    font-size: 1.143em;
+    margin-left: 3px;
+    cursor: pointer;
+    &:hover {
+      color: ${token.accent.fg};
+    }
+  }
+`
+
+const listItem = css`
+  height: 30px;
+  &:not(:hover) ${ButtonContainer} {
+    display: none;
+  }
+`
diff --git a/src/options/Tabs/FileTree/lists/SimpleList.tsx b/src/options/Tabs/FileTree/lists/SimpleList.tsx
new file mode 100644
index 0000000..207276c
--- /dev/null
+++ b/src/options/Tabs/FileTree/lists/SimpleList.tsx
@@ -0,0 +1,94 @@
+import styled from "@emotion/styled"
+import { memo, useCallback } from "react"
+import { useEvent } from "@aet/hooks"
+import { FixedSizeList } from "react-window"
+import { useSelector } from "~/options/store"
+import { FileItem } from "../FileItem"
+import { ContainerDimensions } from "~/vendor/react-container-dimensions"
+import { useOpenFile } from "~/options/hooks/useOpenFile"
+import { type Tree, type TreeItem, useTreeContext } from "../index"
+
+export const SimpleList = memo<{
+  list: Tree
+  listRef?: React.Ref<FixedSizeList>
+  multiSelect: boolean
+}>(({ list, listRef, multiSelect }) => {
+  const render = useFileListRenderer()
+
+  return (
+    <SimpleListContainer>
+      {list.length > 0 && (
+        <ContainerDimensions>
+          {({ height, width, ref }) => (
+            <FixedSizeList<unknown>
+              outerRef={ref}
+              height={height}
+              itemCount={list.length}
+              itemSize={30}
+              width={width}
+              ref={listRef}
+            >
+              {({ index, style }) => render({ item: list[index], style, multiSelect })}
+            </FixedSizeList>
+          )}
+        </ContainerDimensions>
+      )}
+    </SimpleListContainer>
+  )
+})
+
+interface ListRendererProps {
+  children?: React.ReactNode
+  className?: string
+  item: TreeItem
+  multiSelect: boolean
+  readOnly?: boolean
+  style?: React.CSSProperties
+}
+
+export function useFileListRenderer() {
+  const activeId = useSelector(state => state.activeFileId)
+  const open = useOpenFile()
+  const { selectedFiles, setSelectedFiles } = useTreeContext()
+
+  const onToggle = useEvent((checked: boolean, itemId: string) => {
+    if (checked) {
+      setSelectedFiles([...selectedFiles, itemId])
+    } else {
+      setSelectedFiles(selectedFiles.filter(id => id !== itemId))
+    }
+  })
+
+  return useCallback(
+    ({
+      item,
+      style,
+      readOnly,
+      className,
+      children,
+      multiSelect: multi,
+    }: ListRendererProps) => (
+      <FileItem
+        active={multi ? selectedFiles.includes(item.id) : item.id === activeId}
+        className={className}
+        item={item}
+        key={item.id}
+        onOpen={open}
+        onToggle={checked => onToggle(checked, item.id)}
+        readOnly={readOnly}
+        selectedFileIds={selectedFiles}
+        style={style}
+        multi={multi}
+      >
+        {children}
+      </FileItem>
+    ),
+    [selectedFiles, onToggle, open, activeId],
+  )
+}
+
+const SimpleListContainer = styled.div`
+  border-radius: 5px;
+  margin-top: 7px;
+  flex-grow: 1;
+`
diff --git a/src/options/Tabs/FileTree/stringSimilarity.ts b/src/options/Tabs/FileTree/stringSimilarity.ts
new file mode 100644
index 0000000..2ee9f65
--- /dev/null
+++ b/src/options/Tabs/FileTree/stringSimilarity.ts
@@ -0,0 +1,57 @@
+/**
+ * Calculates the Jaro distance between two strings.
+ * The Jaro distance is a measure of similarity between two strings,
+ * based on the number of matching characters and transpositions.
+ *
+ * @param s1 - The first string to compare.
+ * @param s2 - The second string to compare.
+ * @returns The Jaro distance between the two strings, as a number between 0 and 1.
+ */
+export function jaroDistance(s1: string, s2: string): number {
+  const matchWindow = Math.floor(Math.max(s1.length, s2.length) / 2) - 1
+
+  // Initialize arrays to hold matches and transpositions
+  const s1Matches = new Array(s1.length).fill(false)
+  const s2Matches = new Array(s2.length).fill(false)
+  let transpositions = 0
+
+  // Count matching characters
+  let matches = 0
+  for (let i = 0; i < s1.length; i++) {
+    const start = Math.max(0, i - matchWindow)
+    const end = Math.min(i + matchWindow + 1, s2.length)
+    for (let j = start; j < end; j++) {
+      if (!s2Matches[j] && s1[i] === s2[j]) {
+        s1Matches[i] = true
+        s2Matches[j] = true
+        matches++
+        break
+      }
+    }
+  }
+
+  // No matches found
+  if (matches === 0) {
+    return 0
+  }
+
+  // Count transpositions
+  let k = 0
+  for (let i = 0; i < s1.length; i++) {
+    if (s1Matches[i]) {
+      while (!s2Matches[k]) {
+        k++
+      }
+      if (s1[i] !== s2[k]) {
+        transpositions++
+      }
+      k++
+    }
+  }
+
+  transpositions /= 2
+
+  return (
+    (matches / s1.length + matches / s2.length + (matches - transpositions) / matches) / 3
+  )
+}
diff --git a/src/options/Tabs/Market.tsx b/src/options/Tabs/Market.tsx
new file mode 100644
index 0000000..331c1c9
--- /dev/null
+++ b/src/options/Tabs/Market.tsx
@@ -0,0 +1,13 @@
+import { useTranslation } from "react-i18next"
+import { Subheading, TabHeader, TabsContainer } from "~/shared/styled"
+
+export const MarketsTab: FC<ClassNameProp> = ({ className }) => {
+  const { t } = useTranslation()
+  return (
+    <TabsContainer className={className}>
+      <TabHeader>
+        <Subheading>{t("tab.market")}</Subheading>
+      </TabHeader>
+    </TabsContainer>
+  )
+}
diff --git a/src/options/Tabs/Search/SearchResults.tsx b/src/options/Tabs/Search/SearchResults.tsx
new file mode 100644
index 0000000..6342a36
--- /dev/null
+++ b/src/options/Tabs/Search/SearchResults.tsx
@@ -0,0 +1,236 @@
+import { css, cx } from "@emotion/css"
+import styled from "@emotion/styled"
+import Icon from "@aet/icons/macro"
+import { groupBy } from "lodash"
+import { memo, useEffect, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { useEvent, useInitialState } from "@aet/hooks"
+import type * as types from "~/generated/graphql"
+import { color, token, vars } from "../../theme"
+import { Badge, sass } from "../../panels/Issues"
+import { editorNavigation } from "~/options/utils/emitter"
+import { useOpenFile } from "~/options/hooks/useOpenFile"
+import { ms } from "~/shared/wait"
+
+type Match = types.SearchTabQuery["search"][number]
+type SelectedMatchState = ReturnType<typeof useState<Match>>
+
+const Found = styled.span`
+  background-color: ${color("#ffdf5d66", "#ffd33d21")};
+`
+
+const HighlightedText = memo<{ match: Match }>(({ match }) => {
+  const { line, submatch } = match
+  return (
+    <>
+      {line.slice(0, submatch.start)}
+      <Found>{submatch.match}</Found>
+      {line.slice(submatch.end)}
+    </>
+  )
+})
+
+const LineResult = memo<{
+  item: Match
+  onRemove(e: React.MouseEvent<SVGSVGElement, MouseEvent>): void
+  selectState: SelectedMatchState
+}>(({ item, onRemove, selectState: [selected, setSelected] }) => {
+  const open = useOpenFile()
+  const onClick = useEvent(async () => {
+    await open(item.file.id)
+    setSelected(item)
+    await ms(50)
+    editorNavigation.emit({
+      fileId: item.file.id,
+      position: item.index,
+    })
+  })
+
+  return (
+    <button
+      className={cx(
+        css`
+          align-items: center;
+          border: 1px solid transparent;
+          cursor: pointer;
+          display: flex;
+          padding: 2px 14px 2px 2em;
+          text-align: left;
+          user-select: none;
+          width: 100%;
+          &.active,
+          &:hover {
+            background-color: ${vars.backgroundActive};
+          }
+          &.active {
+            border-color: ${token.border.default};
+          }
+        `,
+        { active: selected === item },
+      )}
+      onClick={onClick}
+    >
+      <span
+        className={css`
+          flex-grow: 1;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          opacity: 0.9;
+        `}
+      >
+        <HighlightedText match={item} />
+      </span>
+      <CloseIcon onClick={onRemove} />
+    </button>
+  )
+})
+
+const FileResult = memo<{
+  data: Match[]
+  selectState: SelectedMatchState
+  onClose(): void
+}>(({ data, selectState, onClose }) => {
+  const [collapsed, setCollapsed] = useState(false)
+  const [list, setList] = useInitialState(data)
+  const toggleCollapse = useEvent(() => setCollapsed(!collapsed))
+
+  if (!list.length) {
+    return null
+  }
+
+  return (
+    <div>
+      <button
+        onClick={toggleCollapse}
+        className={css`
+          border: none;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          margin-top: 1px;
+          margin-bottom: 0px;
+          padding: 3px 13px;
+          padding-right: 15px;
+          width: 100%;
+          text-align: left;
+
+          &:not(:hover) {
+            .icons {
+              display: none;
+            }
+          }
+
+          &:hover {
+            background-color: ${token.canvas.overlay};
+            .badge {
+              display: none;
+            }
+          }
+        `}
+      >
+        <Icon icon={collapsed ? "VscChevronRight" : "VscChevronDown"} />
+        {sass}
+        <div
+          className={css`
+            flex: 1;
+            margin-left: 2px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          `}
+        >
+          {list[0].file.name}
+        </div>
+        <Badge
+          className={cx(
+            "badge",
+            css`
+              margin-right: -3px;
+            `,
+          )}
+        >
+          {list.length}
+        </Badge>
+        <CloseIcon className="icons" onClick={onClose} />
+      </button>
+      <div style={collapsed ? { display: "none" } : undefined}>
+        {list.map((item, i) => (
+          <LineResult
+            item={item}
+            key={i}
+            selectState={selectState}
+            onRemove={e => {
+              e.stopPropagation()
+              setList(list.filter((_, j) => j !== i))
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  )
+})
+
+type Grouped = types.SearchTabQuery["search"][]
+
+export const SearchResults = memo<{ data: types.SearchTabQuery }>(({ data }) => {
+  const { t } = useTranslation()
+  const { search } = data
+  const selectState = useState<Match>()
+  const [grouped, setGrouped] = useState<Grouped>([])
+
+  const onClose = useEvent((i: number) => {
+    setGrouped(grouped.filter((_, j) => j !== i))
+  })
+
+  useEffect(() => {
+    setGrouped(Object.values(groupBy(search, v => v.file.id)))
+  }, [search])
+
+  return (
+    <SearchResultsContainer>
+      <div
+        className={css`
+          font-size: 0.96em;
+          padding-left: 15px;
+          opacity: 0.6;
+        `}
+      >
+        {t("search.resultCounter", {
+          count: search.length,
+          fileCount: grouped.length,
+        })}
+      </div>
+      <List>
+        {grouped.map((item, i) => (
+          <FileResult
+            key={i}
+            data={item}
+            selectState={selectState}
+            onClose={() => onClose(i)}
+          />
+        ))}
+      </List>
+    </SearchResultsContainer>
+  )
+})
+
+const SearchResultsContainer = styled.div`
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  overflow: scroll;
+`
+
+const List = styled.div`
+  border-radius: 5px;
+  margin-top: 7px;
+  flex-grow: 1;
+  line-height: 1.5em;
+  overflow: scroll;
+`
+
+const CloseIcon = styled(Icon.of("VscClose"))`
+  min-width: 1em;
+  margin-left: 3px;
+`
diff --git a/src/options/Tabs/Search/index.tsx b/src/options/Tabs/Search/index.tsx
new file mode 100644
index 0000000..23d24a1
--- /dev/null
+++ b/src/options/Tabs/Search/index.tsx
@@ -0,0 +1,130 @@
+import { css } from "@emotion/css"
+import styled from "@emotion/styled"
+import { useFirstMountState } from "@react-hookz/web"
+import { useTranslation } from "react-i18next"
+import { memo } from "react"
+import { useEvent } from "@aet/hooks"
+import { gql, useLazyQuery } from "~/generated/graphql"
+import { token } from "../../theme"
+import { useInputOnChange } from "~/shared/hooks/useInput"
+import { SearchResults } from "./SearchResults"
+import { S, useLocalStorageState } from "~/shared/hooks/useLocalStorage"
+
+const SEARCH_TAB = gql<"SearchTab">`
+  query SearchTab($query: String!, $caseSensitive: Boolean!) {
+    search(query: $query, caseSensitive: $caseSensitive, regExp: false) {
+      file {
+        id
+        name
+      }
+      line
+      index
+      submatch {
+        match
+        start
+        end
+      }
+    }
+  }
+`
+
+export const SearchTab = memo<ClassNameProp>(({ className }) => {
+  const { t } = useTranslation()
+  const [search, setSearch] = useLocalStorageState(S.SearchTabSearch, "")
+  const [replace, setReplace] = useLocalStorageState(S.SearchTabReplace, "")
+
+  const onSearchChange = useInputOnChange(setSearch)
+  const onReplaceChange = useInputOnChange(setReplace)
+
+  const isFirstMount = useFirstMountState()
+
+  const [runSearchTabQuery, { data }] = useLazyQuery(SEARCH_TAB, {
+    variables: {
+      query: search,
+      caseSensitive: false,
+    },
+  })
+
+  const executeSearch = useEvent(() => {
+    runSearchTabQuery({
+      variables: {
+        query: search,
+        caseSensitive: false,
+      },
+    })
+  })
+
+  if (isFirstMount && search) {
+    setTimeout(() => executeSearch(), 0)
+  }
+
+  const onKeydown = useEvent((e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      e.stopPropagation()
+      executeSearch()
+    }
+  })
+
+  return (
+    <SearchTabContainer className={className}>
+      <div
+        className={css`
+          margin: 0 10px;
+          margin-bottom: 5px;
+        `}
+      >
+        <Input
+          type="search"
+          placeholder={t("search.find")}
+          value={search}
+          onKeyDown={onKeydown}
+          onChange={onSearchChange}
+        />
+      </div>
+      {false && (
+        <div
+          className={css`
+            margin: 0 10px;
+          `}
+        >
+          <Input
+            disabled
+            type="search"
+            placeholder={t("search.replaceAll")}
+            value={replace}
+            onKeyDown={onKeydown}
+            onChange={onReplaceChange}
+          />
+        </div>
+      )}
+      {data != null && <SearchResults data={data} />}
+    </SearchTabContainer>
+  )
+})
+
+const SearchTabContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: 5px;
+  padding: 7px 0;
+  height: 100%;
+
+  body.light & {
+    background-color: rgb(247 248 250);
+  }
+`
+
+const Input = styled.input`
+  background-color: ${token.canvas.overlay};
+  border-radius: 75px;
+  border: 1px solid ${token.border.default};
+  padding: 5px 10px;
+  width: 100%;
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
+  &:focus {
+    border-color: #5f677a;
+  }
+`
diff --git a/src/options/Tabs/Settings/Actions.tsx b/src/options/Tabs/Settings/Actions.tsx
new file mode 100644
index 0000000..114cdac
--- /dev/null
+++ b/src/options/Tabs/Settings/Actions.tsx
@@ -0,0 +1,38 @@
+import { useAutoCallback } from "hooks.macro"
+import { useTranslation } from "react-i18next"
+import { memo } from "react"
+import { gql, useMutation } from "~/generated/graphql"
+import { FormEntry } from "./styled"
+import { DangerPill } from "~/shared/styled"
+import { GET_FILES } from "../FileTree"
+
+const DELETE_ALL_FILES = gql<"DeleteAllStyles">`
+  mutation DeleteAllStyles {
+    deleteAllFiles
+  }
+`
+
+export const SettingActions = memo(() => {
+  const { t } = useTranslation()
+  const [deleteAllFiles] = useMutation(DELETE_ALL_FILES, {
+    refetchQueries: [GET_FILES],
+  })
+
+  return (
+    <>
+      <p />
+      <FormEntry>
+        <DangerPill
+          onClick={useAutoCallback(async () => {
+            if (!confirm(t("settings.doYouReallyWantToDeleteAllFiles"))) {
+              return
+            }
+            await deleteAllFiles()
+          })}
+        >
+          {t("settings.deleteAllFiles")}
+        </DangerPill>
+      </FormEntry>
+    </>
+  )
+})
diff --git a/src/options/Tabs/Settings/LocalePicker.tsx b/src/options/Tabs/Settings/LocalePicker.tsx
new file mode 100644
index 0000000..2e44db7
--- /dev/null
+++ b/src/options/Tabs/Settings/LocalePicker.tsx
@@ -0,0 +1,78 @@
+import { css } from "@emotion/css"
+import { memo, useState } from "react"
+import { useTranslation } from "react-i18next"
+import Icon from "@aet/icons/macro"
+import { useUpdateEffect } from "@react-hookz/web"
+import styled from "@emotion/styled"
+import { useEvent } from "@aet/hooks"
+import { getLocale, setLanguage } from "~/shared/i18n"
+import { FormEntry, Input } from "./styled"
+
+const AUTO = "autoDetect"
+
+const endonyms = Object.entries({
+  "en-US": "English",
+  "fr-CA": "Français (Canada)",
+  "es-ES": "Español",
+  "de-DE": "Deutsch",
+  "ja-JP": "日本語",
+  "zh-CN": "简体中文",
+  "zh-TW": "繁體中文",
+})
+
+export const LocalePicker = memo(() => {
+  const { t, i18n } = useTranslation()
+  const [lang, setLang] = useState<string | null>(() => getLocale() ?? AUTO)
+
+  useUpdateEffect(() => {
+    if (lang === AUTO) {
+      setLanguage(null)
+      i18n.changeLanguage(getLocale())
+    } else {
+      setLanguage(lang)
+      i18n.changeLanguage(lang!)
+    }
+  }, [lang])
+
+  return (
+    <FormEntry>
+      <label
+        className={css`
+          display: flex;
+          align-items: center;
+          > svg {
+            margin-bottom: -1px;
+            margin-right: 2px;
+          }
+        `}
+      >
+        <Icon icon="IoLanguage" />
+        <span>{t("preferences.language")}</span>
+      </label>
+      <Select
+        as="select"
+        value={lang ?? AUTO}
+        className={css`
+          padding: 6px 12px;
+        `}
+        onChange={useEvent(e => {
+          const { value } = e.target
+          setLang(value)
+        })}
+      >
+        <option value={AUTO}>{t("preferences.autoDetect")}</option>
+        {endonyms.map(([locale, endonym]) => (
+          <option key={locale} value={locale}>
+            {endonym}
+          </option>
+        ))}
+      </Select>
+    </FormEntry>
+  )
+})
+
+export const Select = styled(Input)`
+  && {
+    padding: 6px 7px;
+  }
+`
diff --git a/src/options/Tabs/Settings/Preferences.tsx b/src/options/Tabs/Settings/Preferences.tsx
new file mode 100644
index 0000000..0958e7c
--- /dev/null
+++ b/src/options/Tabs/Settings/Preferences.tsx
@@ -0,0 +1,315 @@
+import styled from "@emotion/styled"
+import { css } from "@emotion/css"
+import { useAutoCallback } from "hooks.macro"
+import { memo, useCallback, useEffect, useRef, useState } from "react"
+import { useTranslation } from "react-i18next"
+import Icon from "@aet/icons/macro"
+import { toast } from "react-hot-toast"
+import { useEvent } from "@aet/hooks"
+import { gql, useApolloClient, useMutation } from "~/generated/graphql"
+import type * as types from "~/generated/graphql"
+import { Select } from "./LocalePicker"
+import { FormEntry, Input } from "./styled"
+import { ButtonWrapper } from "~/shared/styled"
+import { token } from "~/options/theme"
+
+export const PREFERENCES_FRAGMENT = gql`
+  fragment PreferencesFragment on Preferences {
+    darkTheme
+    debugMode
+    enabled
+    faviconServer
+    fontFamily
+    fontSize
+    formatOnSave
+    lightTheme
+    lineHeight
+    minimap
+    recordUsageData
+    showBadge
+    tabSize
+    theme
+  }
+`
+
+const UPDATE_PREFERENCES = gql<"UpdatePreferences">`
+  ${PREFERENCES_FRAGMENT}
+  mutation UpdatePreferences($preferences: InputPreferences!) {
+    setPreferences(preferences: $preferences) {
+      ...PreferencesFragment
+    }
+  }
+`
+
+const RESET_USAGE_DATA = gql<"ResetUsageData">`
+  mutation ResetUsageData {
+    resetUsageData
+  }
+`
+
+const DelayedInput: React.FC<{
+  type: string
+  value: string
+  onChange: (value: string) => void
+}> = ({ type, value, onChange }) => {
+  const [inputValue, setInputValue] = useState(value)
+  const timeout = useRef<number>()
+
+  useEffect(() => {
+    if (timeout.current) {
+      clearTimeout(timeout.current)
+    }
+    timeout.current = window.setTimeout(() => {
+      onChange(inputValue)
+    }, 400)
+  }, [inputValue, onChange])
+
+  return (
+    <Input
+      type={type}
+      value={inputValue}
+      onChange={useEvent(e => {
+        setInputValue(e.target.value)
+      })}
+    />
+  )
+}
+
+export const Preferences: FC<ClassNameProp & { data: types.SettingsTabQueryQuery }> = ({
+  data,
+}) => {
+  const { t } = useTranslation()
+  const [updatePreferences] = useMutation(UPDATE_PREFERENCES)
+  const update = useAutoCallback((fragment: types.InputPreferences) => {
+    void updatePreferences({ variables: { preferences: fragment } })
+  })
+
+  return (
+    <>
+      <FormEntry>
+        <label>{t("preferences.colorScheme")}</label>
+        <Select
+          as="select"
+          value={data.preferences.theme}
+          className={css`
+            padding: 6px 12px;
+          `}
+          onChange={useEvent(e => {
+            update({ theme: e.target.value as types.Theme })
+          })}
+        >
+          <option value="Dark">🌑 {t("preferences.darkMode")}</option>
+          <option value="Light">☀️ {t("preferences.lightMode")}</option>
+          <option value="System">🌗 {t("preferences.autoDetect")}</option>
+        </Select>
+      </FormEntry>
+
+      <FormEntry>
+        <label>{t("preferences.darkTheme")}</label>
+        <Select
+          as="select"
+          value={data.preferences.darkTheme}
+          className={css`
+            padding: 6px 12px;
+          `}
+          onChange={useEvent(e => {
+            update({ darkTheme: e.target.value as types.Theme })
+          })}
+        >
+          <option value="github-dark">GitHub Dark</option>
+          <option value="github-dark-default">GitHub Dark Default</option>
+        </Select>
+      </FormEntry>
+
+      <FormEntry>
+        <label>{t("preferences.lightTheme")}</label>
+        <Select
+          as="select"
+          value={data.preferences.lightTheme}
+          className={css`
+            padding: 6px 12px;
+          `}
+          onChange={useEvent(e => {
+            update({ lightTheme: e.target.value as types.Theme })
+          })}
+        >
+          <option value="github-light">GitHub Light</option>
+          <option value="github-light-default">GitHub Light Default</option>
+        </Select>
+      </FormEntry>
+
+      <FormEntry>
+        <label>{t("preferences.fontFamily")}</label>
+        <DelayedInput
+          type="text"
+          value={data.preferences.fontFamily}
+          onChange={useEvent(fontFamily => {
+            update({ fontFamily })
+          })}
+        />
+      </FormEntry>
+
+      <FormEntry>
+        <label>{t("preferences.fontSize")}</label>
+        <Input
+          type="number"
+          value={data.preferences.fontSize}
+          onChange={useEvent(e => {
+            update({ fontSize: parseInt(e.target.value) })
+          })}
+        />
+      </FormEntry>
+
+      <FormEntry>
+        <label>{t("preferences.lineHeight")}</label>
+        <Input
+          type="number"
+          value={data.preferences.lineHeight}
+          onChange={useEvent(e => {
+            update({ lineHeight: parseInt(e.target.value) })
+          })}
+        />
+      </FormEntry>
+
+      <FormEntry>
+        <FormEntryLine>
+          <input
+            type="checkbox"
+            checked={data.preferences.formatOnSave}
+            onChange={useEvent(e => {
+              update({ formatOnSave: e.target.checked })
+            })}
+          />
+          <label
+            className={css`
+              margin-left: 8px;
+            `}
+          >
+            {t("preferences.formatOnSave")}
+          </label>
+        </FormEntryLine>
+      </FormEntry>
+
+      <FormEntry>
+        <FormEntryLine>
+          <input
+            type="checkbox"
+            checked={data.preferences.minimap}
+            onChange={useEvent(e => {
+              update({ minimap: e.target.checked })
+            })}
+          />
+          <label
+            className={css`
+              margin-left: 8px;
+            `}
+          >
+            {t("preferences.minimap")}
+          </label>
+        </FormEntryLine>
+      </FormEntry>
+
+      <FormEntry>
+        <FormEntryLine>
+          <input
+            type="checkbox"
+            checked={data.preferences.debugMode}
+            onChange={useEvent(e => {
+              update({ debugMode: e.target.checked })
+            })}
+          />
+          <label
+            className={css`
+              margin-left: 8px;
+            `}
+          >
+            {t("preferences.debugMode")}
+          </label>
+        </FormEntryLine>
+      </FormEntry>
+
+      <UsageDataPreference
+        enabled={data.preferences.recordUsageData}
+        onChange={useEvent(value => {
+          update({ recordUsageData: value })
+        })}
+      />
+    </>
+  )
+}
+
+const UsageDataPreference = memo<{
+  enabled: boolean
+  onChange: (value: boolean) => void
+}>(({ enabled, onChange }) => {
+  const { t } = useTranslation()
+  const client = useApolloClient()
+
+  const resetUsageData = useCallback(async () => {
+    await client.mutate({ mutation: RESET_USAGE_DATA })
+    const { cache } = client
+
+    // https://github.com/apollographql/apollo-client/issues/4724#issuecomment-487373566
+    const ids = Object.values(cache.extract(true))
+      .filter((value: any) => value.__typename === "File")
+      .map(value => cache.identify(value))
+      .filter(Boolean)
+
+    ids.forEach(id => cache.evict({ id, fieldName: "lastRequestedAt" }))
+
+    toast.success(t("preferences.resetUsageDataCompleted"))
+  }, [client, t])
+
+  return (
+    <FormEntry>
+      <FormEntryLine>
+        <input
+          type="checkbox"
+          checked={enabled}
+          onChange={useEvent(e => {
+            onChange(e.target.checked)
+          })}
+        />
+        <label
+          className={css`
+            flex: 1;
+            margin-left: 8px;
+          `}
+        >
+          {t("preferences.recordUsageData")}
+        </label>
+
+        <ButtonWrapper
+          onClick={() => resetUsageData()}
+          title={t("preferences.resetUsageData")}
+          className={css`
+            cursor: pointer;
+            font-size: 1.1em;
+            &:hover {
+              color: ${token.danger.emphasis};
+              transition: 0.2s;
+            }
+          `}
+        >
+          <Icon icon="VscTrash" />
+        </ButtonWrapper>
+      </FormEntryLine>
+      <div
+        className={css`
+          margin-top: 5px;
+          opacity: 0.7;
+          margin-left: 21px;
+          font-size: 0.9em;
+          line-height: 1.3em;
+        `}
+      >
+        {t("preferences.recordUsageDataDescription")}
+      </div>
+    </FormEntry>
+  )
+})
+
+const FormEntryLine = styled.div`
+  display: flex;
+  align-items: center;
+`
diff --git a/src/options/Tabs/Settings/index.tsx b/src/options/Tabs/Settings/index.tsx
new file mode 100644
index 0000000..bdc4222
--- /dev/null
+++ b/src/options/Tabs/Settings/index.tsx
@@ -0,0 +1,43 @@
+import { useTranslation } from "react-i18next"
+import { gql, useQuery } from "~/generated/graphql"
+import type * as types from "~/generated/graphql"
+import { Subheading, TabHeader, TabsContainer } from "~/shared/styled"
+import { LocalePicker } from "./LocalePicker"
+import { SettingActions } from "./Actions"
+import { PREFERENCES_FRAGMENT, Preferences } from "./Preferences"
+
+const SETTINGS_TAB_QUERY = gql<"SettingsTabQuery">`
+  ${PREFERENCES_FRAGMENT}
+  query SettingsTabQuery {
+    preferences {
+      ...PreferencesFragment
+    }
+  }
+`
+
+const Settings: FC<ClassNameProp & { data: types.SettingsTabQueryQuery }> = ({
+  data,
+  className,
+}) => {
+  const { t } = useTranslation()
+  return (
+    <TabsContainer className={className}>
+      <TabHeader>
+        <Subheading>{t("tab.settings")}</Subheading>
+      </TabHeader>
+      <LocalePicker />
+      <Preferences data={data} />
+      <hr />
+      <SettingActions />
+    </TabsContainer>
+  )
+}
+
+export const SettingsTab: FC<ClassNameProp> = props => {
+  const { data } = useQuery(SETTINGS_TAB_QUERY)
+  if (!data) {
+    return null
+  }
+
+  return <Settings data={data} {...props} />
+}
diff --git a/src/options/Tabs/Settings/styled.tsx b/src/options/Tabs/Settings/styled.tsx
new file mode 100644
index 0000000..0f1d176
--- /dev/null
+++ b/src/options/Tabs/Settings/styled.tsx
@@ -0,0 +1,18 @@
+import styled from "@emotion/styled"
+import { Input as BasicInput } from "~/shared/styled"
+
+export const FormEntry = styled.div`
+  margin-top: 6px;
+  margin-bottom: 15px;
+
+  > label {
+    display: block;
+    margin-top: 4px;
+    margin-bottom: 8px;
+    font-size: 0.97em;
+  }
+`
+
+export const Input = styled(BasicInput)`
+  padding: 8px 12px;
+`
diff --git a/src/options/Tabs/Sidebar/Sidebar.tsx b/src/options/Tabs/Sidebar/Sidebar.tsx
new file mode 100644
index 0000000..f55ac74
--- /dev/null
+++ b/src/options/Tabs/Sidebar/Sidebar.tsx
@@ -0,0 +1,104 @@
+import styled from "@emotion/styled"
+import { css, cx } from "@emotion/css"
+import Icon from "@aet/icons/macro"
+import { memo } from "react"
+import type { SidebarTab } from "./index"
+import { LOCAL_STORAGE_KEY } from "~/options/store"
+import { color } from "~/options/theme"
+import { IconButton } from "~/shared/styled"
+import { tabs } from "./data"
+import { AboutModal } from "../About"
+
+function reset(): void {
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i)
+    if (key?.startsWith(LOCAL_STORAGE_KEY)) {
+      localStorage.removeItem(key)
+    }
+  }
+  location.reload()
+}
+
+interface SidebarProps {
+  debugMode: boolean
+  activeTab: SidebarTab | null
+  setActiveTab(tab: SidebarTab | null): void
+}
+
+function useMe() {
+  return { display: "none" }
+}
+
+function BadRender() {
+  const style = useMe()
+  return <div style={style} />
+}
+
+export const Sidebar = memo<SidebarProps>(({ activeTab, setActiveTab, debugMode }) => (
+  <RootContainer>
+    <BadRender />
+    <SidebarContainer>
+      {tabs
+        .entries()
+        .filter(([, { debugOnly }]) => !debugOnly || debugMode)
+        .map(([tab, { icon }]) => (
+          <SidebarIconButton
+            onClick={() => {
+              if (activeTab === tab) {
+                setActiveTab(null)
+              } else {
+                setActiveTab(tab)
+              }
+            }}
+            key={tab}
+            title={tab}
+            className={cx(tab === activeTab && "active")}
+          >
+            {icon}
+          </SidebarIconButton>
+        ))}
+    </SidebarContainer>
+    <AboutModal as={SidebarIconButton as any} />
+
+    {debugMode && (
+      <SidebarIconButton title="Reset" onClick={reset}>
+        <Icon
+          icon="GrPowerReset"
+          className={css`
+            path {
+              stroke: #9da2a6;
+            }
+          `}
+        />
+      </SidebarIconButton>
+    )}
+  </RootContainer>
+))
+
+const RootContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  font-size: 1.8em;
+  height: 100%;
+  margin: 5px 0;
+  padding: 0 5px 12px;
+`
+
+const SidebarContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 5px;
+`
+
+const SidebarIconButton = styled(IconButton)`
+  border: none;
+  padding: 8px 0px;
+  padding-bottom: 2px;
+  width: 100%;
+  &.active,
+  &.active:hover {
+    background-color: ${color("#365c7f", "#162030")};
+    color: #eee;
+  }
+`
diff --git a/src/options/Tabs/Sidebar/data.tsx b/src/options/Tabs/Sidebar/data.tsx
new file mode 100644
index 0000000..c62db47
--- /dev/null
+++ b/src/options/Tabs/Sidebar/data.tsx
@@ -0,0 +1,76 @@
+import { css } from "@emotion/css"
+import Icon from "@aet/icons/macro"
+import { memo } from "react"
+import { SearchTab } from "../Search"
+import { FilesTab } from "../FileTree"
+import { SettingsTab } from "../Settings"
+import { MarketsTab } from "../Market"
+import { DocumentationTab } from "../Documentation"
+import { SyncTab } from "../Sync"
+import { getMap } from "~/options/utils/componentMap"
+
+export enum SidebarTab {
+  Files = "Files",
+  Search = "Search",
+  Documentation = "Documentation",
+  Market = "Market",
+  Playground = "Playground",
+  Sync = "Sync",
+  Settings = "Settings",
+}
+
+interface ComponentData {
+  icon: React.ReactElement
+  debugOnly?: boolean
+  component: React.FC<{ className: string; hidden: boolean }>
+}
+
+export const tabs = getMap<SidebarTab, ComponentData>(() => ({
+  [SidebarTab.Files]: {
+    icon: <Icon icon="MdPalette" />,
+    component: FilesTab,
+  },
+  [SidebarTab.Search]: {
+    icon: <Icon icon="VscSearch" />,
+    component: SearchTab,
+  },
+  [SidebarTab.Documentation]: {
+    icon: <Icon icon="TbBook" />,
+    debugOnly: true,
+    component: DocumentationTab,
+  },
+  [SidebarTab.Market]: {
+    icon: <Icon icon="FiGlobe" />,
+    debugOnly: true,
+    component: MarketsTab,
+  },
+  [SidebarTab.Playground]: {
+    icon: <Icon icon="GrGraphQl" />,
+    debugOnly: true,
+    component: PlaygroundTab,
+  },
+  [SidebarTab.Sync]: {
+    icon: <Icon icon="SlCloudDownload" />,
+    component: SyncTab,
+  },
+  [SidebarTab.Settings]: {
+    icon: <Icon icon="VscGear" />,
+    component: SettingsTab,
+  },
+}))
+
+const PlaygroundTab = memo<ClassNameProp>(({ className }) => (
+  <div className={className}>
+    <iframe
+      title="Playground"
+      className={css`
+        border: none;
+        height: 100%;
+        position: fixed;
+        width: calc(100vw - 50px);
+        z-index: 3300000000;
+      `}
+      src="/playground.html"
+    />
+  </div>
+))
diff --git a/src/options/Tabs/Sidebar/index.tsx b/src/options/Tabs/Sidebar/index.tsx
new file mode 100644
index 0000000..c65daa6
--- /dev/null
+++ b/src/options/Tabs/Sidebar/index.tsx
@@ -0,0 +1,23 @@
+import { css, cx } from "@emotion/css"
+import { SidebarTab, tabs } from "./data"
+export { Sidebar } from "./Sidebar"
+
+export { SidebarTab }
+
+const hidden = css`
+  display: none !important;
+`
+
+export function useActiveSidebarTab(activeTab: SidebarTab | null) {
+  return (
+    <>
+      {tabs.entries().map(([tab, { component: Component }]) => (
+        <Component
+          key={tab}
+          className={cx(tab !== activeTab && hidden)}
+          hidden={tab !== activeTab}
+        />
+      ))}
+    </>
+  )
+}
diff --git a/src/options/Tabs/Sync/Cloud/Auth.tsx b/src/options/Tabs/Sync/Cloud/Auth.tsx
new file mode 100644
index 0000000..93f8f75
--- /dev/null
+++ b/src/options/Tabs/Sync/Cloud/Auth.tsx
@@ -0,0 +1,36 @@
+import { memo } from "react"
+import { Login } from "./Login"
+import { LoggedIn } from "./LoggedIn"
+import { gql, useQuery } from "~/generated/graphql"
+
+export const AuthQuery = gql<"AuthStateQuery">`
+  query AuthStateQuery {
+    remoteInfo {
+      dbName
+      diskFormatVersion
+      docCount
+      docDeleteCount
+      idbAttachmentFormat
+      instantStartTime
+      purgeSeq
+      sizes {
+        active
+        external
+        file
+      }
+      sqlitePlugin
+      updateSeq
+    }
+  }
+`
+
+export const Auth = memo(() => {
+  const { data } = useQuery(AuthQuery)
+  const info = data?.remoteInfo
+
+  if (!info) {
+    return <Login />
+  }
+
+  return <LoggedIn data={info} />
+})
diff --git a/src/options/Tabs/Sync/Cloud/LoggedIn.tsx b/src/options/Tabs/Sync/Cloud/LoggedIn.tsx
new file mode 100644
index 0000000..299929a
--- /dev/null
+++ b/src/options/Tabs/Sync/Cloud/LoggedIn.tsx
@@ -0,0 +1,128 @@
+import { css } from "@emotion/css"
+import styled from "@emotion/styled"
+import { memo } from "react"
+import Icon from "@aet/icons/macro"
+import { useTranslation } from "react-i18next"
+import { useEvent } from "@aet/hooks"
+import { IconButton } from "~/shared/styled"
+import { color } from "~/options/theme"
+import { ErrorBoundary } from "~/shared/ErrorBoundary"
+import { USERNAME_KEY } from "~/shared/constants"
+import { type AuthStateQueryQuery, gql, useMutation } from "~/generated/graphql"
+
+const LogOutMutation = gql<"LogOutMutation">`
+  mutation LogOutMutation {
+    logout
+  }
+`
+
+export const LoggedIn = memo<{
+  data: NonNullable<AuthStateQueryQuery["remoteInfo"]>
+}>(({ data }) => {
+  const { t } = useTranslation()
+  const [logOut] = useMutation(LogOutMutation)
+
+  const onSignOut = useEvent(async () => {
+    await logOut()
+  })
+
+  return (
+    <LoggedInContainer>
+      <Header>
+        <Icon
+          icon="AiOutlineCloud"
+          className={css`
+            font-size: 20px;
+            margin-right: 5px;
+          `}
+        />
+        <ErrorBoundary>
+          <Username>{localStorage.getItem(USERNAME_KEY)}</Username>
+        </ErrorBoundary>
+        <IconButton onClick={onSignOut}>{t("cloud.logout")}</IconButton>
+      </Header>
+
+      <DataContainer>
+        {data.docCount ? (
+          <>
+            <Icon
+              icon="FiRefreshCw"
+              className={css`
+                font-size: 15px;
+                margin-right: 8px;
+                margin-left: 2px;
+              `}
+            />
+            <span>{data.updateSeq}</span>
+            {/* <time style={{ flex: 1 }}>{relativeTime(remoteStatus.lastModified)}</time> */}
+          </>
+        ) : (
+          <NoData />
+        )}
+      </DataContainer>
+
+      <div
+        className={css`
+          margin-bottom: 10px;
+        `}
+      />
+    </LoggedInContainer>
+  )
+})
+
+const NoData = memo(() => {
+  const { t } = useTranslation()
+  return (
+    <div
+      className={css`
+        text-align: center;
+        opacity: 0.575;
+        width: 100%;
+        margin-top: 18px;
+
+        --ellipse-fill: ${color("#f5f5f5", "#272727")};
+        --g-stroke: ${color("#d9d9d9", "#3e3e3e")};
+        --path-fill: ${color("#fafafa", "#1d1d1d")};
+      `}
+    >
+      {/* From ant.design */}
+      <svg width="64" height="41" viewBox="0 0 64 41">
+        <g transform="translate(0 1)" fill="none" fillRule="evenodd">
+          <ellipse fill="var(--ellipse-fill)" cx="32" cy="33" rx="32" ry="7"></ellipse>
+          <g fillRule="nonzero" stroke="var(--g-stroke)">
+            <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" />
+            <path
+              d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+              fill="var(--path-fill)"
+            />
+          </g>
+        </g>
+      </svg>
+      <div
+        className={css`
+          margin: 10px 0;
+        `}
+      >
+        {t("cloud.noFilesFound")}
+      </div>
+    </div>
+  )
+})
+
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 9px;
+`
+const LoggedInContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+const Username = styled.div`
+  flex: 1;
+`
+const DataContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 13px;
+`
diff --git a/src/options/Tabs/Sync/Cloud/Login.tsx b/src/options/Tabs/Sync/Cloud/Login.tsx
new file mode 100644
index 0000000..4056bbc
--- /dev/null
+++ b/src/options/Tabs/Sync/Cloud/Login.tsx
@@ -0,0 +1,137 @@
+import styled from "@emotion/styled"
+import { css } from "@emotion/css"
+import Icon from "@aet/icons/macro"
+import { useTranslation } from "react-i18next"
+import { useState } from "react"
+import { LIGHT_MODE, color, token } from "~/options/theme"
+import { Pill } from "~/shared/styled"
+import { SERVER } from "~/shared/constants"
+import { gql, useMutation } from "~/generated/graphql"
+import { AuthQuery } from "./Auth"
+
+const LoginMutation = gql<"Login">`
+  mutation Login($username: String!, $password: String!) {
+    login(username: $username, password: $password)
+  }
+`
+
+export const Login: FC<{
+  className?: string
+}> = ({ className }) => {
+  const { t } = useTranslation()
+  const [username, setEmail] = useState("")
+  const [password, setPassword] = useState("")
+
+  const [login] = useMutation(LoginMutation, {
+    variables: { username, password },
+    refetchQueries: [AuthQuery],
+  })
+
+  const onLogIn = () => {
+    void login()
+  }
+
+  return (
+    <LoginContainer className={className}>
+      <IconContainer>
+        <Icon
+          icon="AiOutlineCloud"
+          className={css`
+            font-size: 100px;
+          `}
+        />
+      </IconContainer>
+      <LoginFormEntry>
+        <UsernameInput
+          type="text"
+          name="email"
+          value={username}
+          onChange={e => setEmail(e.target.value)}
+          placeholder={t("cloud.email")}
+        />
+        <PasswordInput
+          type="password"
+          name="password"
+          value={password}
+          onChange={e => setPassword(e.target.value)}
+          placeholder={t("cloud.password")}
+        />
+      </LoginFormEntry>
+      <LoginFormEntry>
+        <Label>{t("cloud.server")}</Label>
+        <br />
+        <Select disabled value={SERVER}>
+          <option value={SERVER}>{SERVER}</option>
+        </Select>
+      </LoginFormEntry>
+
+      <FormButtons>
+        <Pill disabled>{t("cloud.register")}</Pill>
+        <LoginButton onClick={() => void onLogIn()} disabled={!username || !password}>
+          {t("cloud.login")}
+        </LoginButton>
+      </FormButtons>
+    </LoginContainer>
+  )
+}
+const LoginContainer = styled.div``
+
+const IconContainer = styled.div`
+  text-align: center;
+`
+
+const LoginFormEntry = styled.div`
+  margin-top: 6px;
+  margin-bottom: 15px;
+`
+const FormButtons = styled(LoginFormEntry)`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+`
+const LoginButton = styled(Pill)`
+  background: ${token.success.emphasis};
+  border-color: ${color("#1b1f2426", "#f0f6fc19")};
+  color: #fff;
+  line-height: 1.3em;
+  &:hover {
+    background: ${color("#2c974b", "#2ea043")};
+    color: #fff;
+    transition: 0.1s;
+  }
+  &:disabled {
+    background: ${token.success.emphasis};
+  }
+`
+const Label = styled.label`
+  display: block;
+  margin-bottom: -6px;
+`
+const Input = styled.input`
+  background-color: ${token.canvas.overlay};
+  border-radius: 5px;
+  border: 1px solid ${token.border.default};
+  padding: 8px 10px;
+  width: 100%;
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
+  &:focus {
+    border-color: #5f677a;
+  }
+`
+const Select = Input.withComponent("select")
+
+const UsernameInput = styled(Input)`
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  ${LIGHT_MODE} {
+    margin-bottom: -1px;
+  }
+`
+
+const PasswordInput = styled(Input)`
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+`
diff --git a/src/options/Tabs/Sync/Cloud/index.tsx b/src/options/Tabs/Sync/Cloud/index.tsx
new file mode 100644
index 0000000..cdbb923
--- /dev/null
+++ b/src/options/Tabs/Sync/Cloud/index.tsx
@@ -0,0 +1,16 @@
+import { useTranslation } from "react-i18next"
+import { Subheading, TabHeader } from "~/shared/styled"
+import { Auth } from "./Auth"
+
+export const CloudTab: FC<ClassNameProp> = ({ className }) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className={className}>
+      <TabHeader>
+        <Subheading>{t("tab.cloud")}</Subheading>
+      </TabHeader>
+      <Auth />
+    </div>
+  )
+}
diff --git a/src/options/Tabs/Sync/Cloud/tos.md b/src/options/Tabs/Sync/Cloud/tos.md
new file mode 100644
index 0000000..5619723
--- /dev/null
+++ b/src/options/Tabs/Sync/Cloud/tos.md
@@ -0,0 +1,3 @@
+<!-- spellchecker:disable -->
+
+## Modalité de service
diff --git a/src/options/Tabs/Sync/Importer/Exporter.tsx b/src/options/Tabs/Sync/Importer/Exporter.tsx
new file mode 100644
index 0000000..367530e
--- /dev/null
+++ b/src/options/Tabs/Sync/Importer/Exporter.tsx
@@ -0,0 +1,32 @@
+import { useTranslation } from "react-i18next"
+import { memo } from "react"
+import { useEvent } from "@aet/hooks"
+import { gql, useLazyQuery } from "~/generated/graphql"
+import { BlockButton } from "~/shared/styled"
+
+function download(content: string, mimeType: string, filename: string) {
+  const a = document.createElement("a")
+  const blob = new Blob([content], { type: mimeType })
+  const url = URL.createObjectURL(blob)
+  a.setAttribute("href", url)
+  a.setAttribute("download", filename)
+  a.click()
+}
+
+const BACKUP_QUERY = gql<"BackupQuery">`
+  query BackupQuery {
+    export
+  }
+`
+
+export const Exporter = memo(() => {
+  const { t } = useTranslation()
+  const [runBackup] = useLazyQuery(BACKUP_QUERY)
+
+  const onExport = useEvent(async () => {
+    const { data } = await runBackup()
+    download(JSON.stringify(data!.export), "application/json", "backup.json")
+  })
+
+  return <BlockButton onClick={onExport}>{t("import.export")}</BlockButton>
+})
diff --git a/src/options/Tabs/Sync/Importer/FileView.tsx b/src/options/Tabs/Sync/Importer/FileView.tsx
new file mode 100644
index 0000000..0f0105d
--- /dev/null
+++ b/src/options/Tabs/Sync/Importer/FileView.tsx
@@ -0,0 +1,230 @@
+import { keyframes } from "@emotion/react"
+import styled from "@emotion/styled"
+import Icon from "@aet/icons/macro"
+import { memo, useEffect, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { toast } from "react-hot-toast"
+import { chunk } from "lodash"
+import { useEvent } from "@aet/hooks"
+import { gql, useMutation } from "~/generated/graphql"
+import { CheckboxState, TristateCheckbox } from "~/options/components/TristateCheckbox"
+import { PrimaryPill } from "~/shared/styled"
+import { token, vars } from "~/options/theme"
+import type { File as IFile } from "~/shared/models"
+import { fromLegacy, v1ToNow } from "./mapFn"
+import { GET_FILES } from "../../FileTree"
+
+const ImportFile = gql<"ImportFile">`
+  mutation ImportFile($inputs: [PartialFileInput!]!) {
+    newFiles(inputs: $inputs) {
+      id
+    }
+  }
+`
+
+export const FileView = memo<{ file: File }>(({ file }) => {
+  const { t } = useTranslation()
+  const [importFile] = useMutation(ImportFile, {
+    refetchQueries: [GET_FILES],
+  })
+  const [importing, setImporting] = useState(false)
+
+  const [content, setContent] = useState<IFile[] | null>(null)
+
+  const [checked, setChecked] = useState<number[]>([])
+  const [imported, setImported] = useState<number[]>([])
+  const [failed, setFailed] = useState<number[]>([])
+
+  const onLoad = useEvent((e: ProgressEvent<FileReader>) => {
+    const context = e.target!.result as string
+    const json = JSON.parse(context)
+    let list: IFile[]
+    if ("directories" in json) {
+      list = fromLegacy(json)
+    } else if (typeof json.schema === "number") {
+      list = v1ToNow(json)
+    } else {
+      toast.error(t("import.invalidFile"))
+      return
+    }
+
+    setContent(list)
+    setChecked(list.map((_, i) => i))
+    setImporting(false)
+    setImported([])
+    setFailed([])
+  })
+
+  useEffect(() => {
+    if (!file) return
+
+    const reader = new FileReader()
+    reader.onload = onLoad
+    reader.readAsText(file)
+    // onLoad is always stable but ESLint doesn’t know
+  }, [onLoad, file])
+
+  const handleSelectAllClick: React.MouseEventHandler<HTMLInputElement> = useEvent(e => {
+    if (e.currentTarget.checked) {
+      setChecked(content!.map((_, i) => i))
+    } else {
+      setChecked([])
+    }
+  })
+
+  const onImport = useEvent(async () => {
+    setImporting(true)
+    for (const indices of chunk(checked, 100)) {
+      try {
+        await importFile({
+          variables: { inputs: indices.map(i => content![i]) },
+        })
+        setImported(imported => [...imported, ...indices])
+      } catch (e) {
+        toast.error(<div style={{ whiteSpace: "pre-line" }}>{e.message}</div>)
+        setFailed(failed => [...failed, ...indices])
+      }
+    }
+    await wait(200)
+    setImporting(false)
+    setImported([])
+  })
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <>
+      <FilesViewContainer>
+        <FileRow>
+          <CheckboxAll
+            checked={
+              checked.length === content.length
+                ? CheckboxState.Checked
+                : checked.length === 0
+                ? CheckboxState.Empty
+                : CheckboxState.Indeterminate
+            }
+            onClick={handleSelectAllClick}
+          />
+          <SelectAll>
+            <FileName>{t("import.selectAll")}</FileName>
+            {importing &&
+              (failed.length ? (
+                <Icon icon="MdOutlineReportGmailerrorred" />
+              ) : imported.length === checked.length ? (
+                <Icon icon="ImCheckmark" />
+              ) : (
+                <Spinner />
+              ))}
+          </SelectAll>
+        </FileRow>
+
+        {content.map((c, i) => (
+          <div key={i}>
+            <FileRow>
+              <Checkbox
+                type="checkbox"
+                checked={checked.includes(i)}
+                disabled={importing}
+                onChange={e => {
+                  if (e.currentTarget.checked) {
+                    setChecked([...checked, i])
+                  } else {
+                    setChecked(checked.filter(x => x !== i))
+                  }
+                }}
+              />
+              <FileName>
+                {c.name}
+                {c.tags.map(t => (
+                  <Tag key={t}>{t}</Tag>
+                ))}
+              </FileName>
+              {importing &&
+                checked.includes(i) &&
+                (failed.includes(i) ? (
+                  <Icon icon="MdOutlineReportGmailerrorred" />
+                ) : imported.includes(i) ? (
+                  <Icon icon="ImCheckmark" />
+                ) : (
+                  <Spinner />
+                ))}
+            </FileRow>
+          </div>
+        ))}
+      </FilesViewContainer>
+      <ImportButton
+        title="Import"
+        disabled={importing || !checked.length}
+        onClick={onImport}
+      >
+        {t("tab.importNFile", { n: checked.length })}
+      </ImportButton>
+    </>
+  )
+})
+
+const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
+
+const SelectAll = styled.label`
+  display: flex;
+  align-items: center;
+  flex: 1;
+  font-weight: 600;
+`
+const FilesViewContainer = styled.div`
+  max-height: 200px;
+  overflow: scroll;
+`
+
+const FileRow = styled.div`
+  display: flex;
+  align-items: center;
+  line-height: 1.7em;
+`
+
+const Checkbox = styled.input`
+  margin-right: 5px;
+`
+
+const CheckboxAll = Checkbox.withComponent(TristateCheckbox)
+
+const ImportButton = styled(PrimaryPill)`
+  margin-top: 15px;
+`
+const FileName = styled.span`
+  display: flex;
+  align-items: center;
+  flex: 1;
+`
+
+const SpinnerRotation = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`
+
+const Spinner = styled.div`
+  width: 14px;
+  height: 14px;
+  border: 2px solid ${token.border.default};
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: ${SpinnerRotation} 1s linear infinite;
+`
+
+const Tag = styled.span`
+  background-color: ${vars.backgroundActive};
+  border-radius: 3px;
+  font-size: 0.8em;
+  line-height: calc(1em + 2px);
+  margin-left: 7px;
+  padding: 0 3px;
+`
diff --git a/src/options/Tabs/Sync/Importer/index.tsx b/src/options/Tabs/Sync/Importer/index.tsx
new file mode 100644
index 0000000..f0f4d1c
--- /dev/null
+++ b/src/options/Tabs/Sync/Importer/index.tsx
@@ -0,0 +1,83 @@
+import styled from "@emotion/styled"
+import { css } from "@emotion/css"
+import { memo, useState } from "react"
+import { useTranslation } from "react-i18next"
+import Icon from "@aet/icons/macro"
+import { FileInput } from "~/vendor/react-files-drag-and-drop"
+import { FileView } from "./FileView"
+import { Exporter } from "./Exporter"
+import { color, token } from "~/options/theme"
+
+export const ImporterTab = memo<{
+  className?: string
+}>(({ className }) => {
+  const { t } = useTranslation()
+  const [file, setFile] = useState<File | null>(null)
+
+  return (
+    <div className={className}>
+      <FormEntry>
+        <Exporter />
+      </FormEntry>
+
+      <FormEntry>
+        <FileInput
+          extensions={[".json"]}
+          onError={() => {}}
+          onUpload={x => setFile(x[0])}
+          label={file ? file.name : null}
+        >
+          {({ dragging, labelId }) =>
+            dragging ? (
+              <Label htmlFor={labelId} className="dragging">
+                <Icon icon="BsHourglassTop" className={iconClass} />
+                {t("import.waiting")}
+              </Label>
+            ) : (
+              <Label htmlFor={labelId}>
+                <Icon icon="TbDragDrop" className={iconClass} />
+                {t("import.dragFileHere")}
+              </Label>
+            )
+          }
+        </FileInput>
+      </FormEntry>
+
+      {file != null && (
+        <FormEntry>
+          <FileView file={file} />
+        </FormEntry>
+      )}
+    </div>
+  )
+})
+
+const FormEntry = styled.div`
+  margin-top: 12px;
+  margin-bottom: 12px;
+`
+
+const Label = styled.label`
+  background: ${token.canvas.overlay};
+  border: 1px solid ${token.border.muted};
+  border-radius: 5px;
+  display: block;
+  padding: 8px 12px;
+  width: 100%;
+  text-align: center;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+  &.dragging {
+    background-color: ${color("#bbb", "#303746")};
+  }
+`
+
+const iconClass = css`
+  margin-bottom: -3px;
+  display: inline-block;
+  font-size: 1.2em;
+  margin-right: 4px;
+`
diff --git a/src/options/Tabs/Sync/Importer/mapFn.ts b/src/options/Tabs/Sync/Importer/mapFn.ts
new file mode 100644
index 0000000..e6fba40
--- /dev/null
+++ b/src/options/Tabs/Sync/Importer/mapFn.ts
@@ -0,0 +1,59 @@
+import type { File, InputExportedV1, Rule } from "~/shared/models"
+import { ruleTypes } from "~/shared/models/enums.generated"
+
+export function fromLegacy(oldJSON: {
+  directories: {
+    id: number
+    name: string
+  }[]
+  files: {
+    name: string
+    content: string
+    createdAt: string
+    updatedAt: string
+    id: number
+    parentId?: number
+    metadata: {
+      enabled: boolean
+      rules: (Omit<Rule, "exclude"> & { negative?: boolean })[]
+    }
+  }[]
+}): File[] {
+  const directoryMap = new Map<number, string>(
+    oldJSON.directories.map(directory => [directory.id, directory.name]),
+  )
+  return oldJSON.files.map(
+    (file): File => ({
+      id: undefined!,
+      name: file.name,
+      enabled: file.metadata.enabled,
+      mimeType: "text/x-scss",
+      hidden: false,
+      rules: file.metadata.rules
+        .filter(({ type }) => ruleTypes.includes(type))
+        .map(({ negative, ...rule }) => ({
+          ...rule,
+          exclude: negative ?? false,
+        })),
+      state: null,
+      createdAt: new Date(file.createdAt),
+      updatedAt: new Date(file.updatedAt),
+      sections: [
+        {
+          id: "0",
+          name: "",
+          code: file.content,
+          enabled: true,
+        },
+      ],
+      tags: (() => {
+        const tag = directoryMap.get(file.parentId ?? 0)
+        return tag ? [tag] : []
+      })(),
+    }),
+  )
+}
+
+export function v1ToNow(value: InputExportedV1): File[] {
+  return value.files
+}
diff --git a/src/options/Tabs/Sync/index.tsx b/src/options/Tabs/Sync/index.tsx
new file mode 100644
index 0000000..12b24ad
--- /dev/null
+++ b/src/options/Tabs/Sync/index.tsx
@@ -0,0 +1,36 @@
+import { memo, useEffect, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { Subheading, TabHeader, TabsContainer } from "~/shared/styled"
+import { CloudTab } from "./Cloud"
+import { ImporterTab } from "./Importer"
+
+export const SyncTab = memo<{
+  className: string
+  hidden: boolean
+}>(({ className, hidden }) => {
+  const { t } = useTranslation()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    if (!hidden && !mounted) {
+      setMounted(true)
+    }
+  }, [hidden])
+
+  if (!mounted) {
+    return null
+  }
+
+  return (
+    <TabsContainer className={className}>
+      <TabHeader>
+        <Subheading>{t("tab.import")}</Subheading>
+      </TabHeader>
+
+      <CloudTab />
+      <br />
+      <hr />
+      <ImporterTab />
+    </TabsContainer>
+  )
+})
diff --git a/src/options/components/TristateCheckbox.tsx b/src/options/components/TristateCheckbox.tsx
new file mode 100644
index 0000000..74e88a8
--- /dev/null
+++ b/src/options/components/TristateCheckbox.tsx
@@ -0,0 +1,35 @@
+import { memo, useEffect, useRef } from "react"
+
+export const enum CheckboxState {
+  Checked,
+  Empty,
+  Indeterminate,
+}
+
+export const TristateCheckbox: React.FC<
+  Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "ref" | "checked"> & {
+    checked: CheckboxState
+  }
+> = memo(({ checked, ...props }) => {
+  const ref = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    const input = ref.current
+    if (!input) {
+      return
+    }
+
+    if (checked === CheckboxState.Checked) {
+      input.checked = true
+      input.indeterminate = false
+    } else if (checked === CheckboxState.Empty) {
+      input.checked = false
+      input.indeterminate = false
+    } else if (checked === CheckboxState.Indeterminate) {
+      input.checked = false
+      input.indeterminate = true
+    }
+  }, [checked])
+
+  return <input ref={ref} type="checkbox" {...props} />
+})
diff --git a/src/options/fragments.ts b/src/options/fragments.ts
new file mode 100644
index 0000000..132750a
--- /dev/null
+++ b/src/options/fragments.ts
@@ -0,0 +1,32 @@
+import { gql } from "@apollo/client"
+
+export const SECTION_FRAGMENT = gql`
+  fragment SectionFragment on Section {
+    id
+    name
+    code
+    enabled
+  }
+`
+
+export const FILE_FRAGMENT = gql`
+  ${SECTION_FRAGMENT}
+  fragment FileFragment on File {
+    id
+    name
+    enabled
+    hidden
+    tags
+    createdAt
+    updatedAt
+    state
+    rules {
+      exclude
+      type
+      value
+    }
+    sections {
+      ...SectionFragment
+    }
+  }
+`
diff --git a/src/options/hooks/useDomainSuggestions.ts b/src/options/hooks/useDomainSuggestions.ts
new file mode 100644
index 0000000..bac484b
--- /dev/null
+++ b/src/options/hooks/useDomainSuggestions.ts
@@ -0,0 +1,63 @@
+import browser from "webextension-polyfill"
+import { useCallback, useEffect, useState } from "react"
+import { sortBy, uniqBy } from "lodash"
+import { useChromeEvent } from "~/shared/hooks/useChromeEvent"
+
+const INVALID_PROTOCOLS = new Set(["chrome:", "chrome-extension:", "about:"])
+
+interface DomainSuggestion {
+  hostname: string
+  title?: string
+}
+
+/**
+ * Returns a list of currently opened hostnames.
+ */
+export function useDomainSuggestions({
+  skip,
+}: {
+  /** Skip fetching suggestions */
+  skip: boolean
+}) {
+  const [suggestions, setSuggestions] = useState<DomainSuggestion[]>([])
+
+  const fetch = useCallback(async () => {
+    const windows = await browser.windows.getAll({ populate: true })
+
+    const tabs = windows
+      .filter(tab => !tab.incognito)
+      .flatMap(tab => tab.tabs || [])
+      .filter(tab => tab.url)
+      .map(tab => {
+        const url = new URL(tab.url!)
+        if (INVALID_PROTOCOLS.has(url.protocol)) {
+          return null
+        }
+
+        return {
+          hostname: url.hostname,
+          title: tab.title,
+        }
+      })
+      .filter(Boolean)
+      .filter(x => x.hostname)
+
+    setSuggestions(sortedUnique(tabs, tab => tab.hostname))
+  }, [])
+
+  useChromeEvent(browser.tabs.onUpdated, fetch)
+
+  useEffect(() => {
+    if (skip) {
+      return
+    }
+
+    void fetch()
+  }, [fetch, skip])
+
+  return suggestions
+}
+
+function sortedUnique<T>(list: T[], by: (value: T) => any) {
+  return sortBy(uniqBy(list, by), by)
+}
diff --git a/src/options/hooks/useDropdownMenu.tsx b/src/options/hooks/useDropdownMenu.tsx
new file mode 100644
index 0000000..5fdd064
--- /dev/null
+++ b/src/options/hooks/useDropdownMenu.tsx
@@ -0,0 +1,74 @@
+import { useState } from "react"
+import { css, cx } from "@emotion/css"
+import { type ControlledMenuProps, useMenuState } from "@szhsin/react-menu"
+import { useAutoMemo } from "hooks.macro"
+import { useEvent } from "@aet/hooks"
+import { token, vars } from "~/options/theme"
+
+export function useDropdownMenu(className?: string) {
+  const [menuState, toggleMenu] = useMenuState({})
+  const [anchorPoint, setAnchorPoint] = useState({ x: 0, y: 0 })
+
+  const onMouse = useEvent((e: React.MouseEvent<Element>) => {
+    e.preventDefault()
+    setAnchorPoint({ x: e.clientX, y: e.clientY })
+    toggleMenu()
+  })
+
+  const menuProps = useAutoMemo<ControlledMenuProps>({
+    ...menuState,
+    portal: true,
+    anchorPoint,
+    direction: "right",
+    onClose: () => toggleMenu(false),
+    className: cx(menuClassName, className),
+  })
+
+  return useAutoMemo({
+    menuProps,
+    toggleMenu,
+    onMouse,
+  })
+}
+
+export const menuClassName = css`
+  .szh-menu--state-open {
+    background-color: ${token.canvas.overlay};
+    border: 1px solid ${token.border.default};
+    border-radius: 5px;
+    box-shadow: ${token.shadow.large};
+    list-style: none;
+    padding-inline-start: 0;
+    padding: 5px;
+    z-index: 5;
+  }
+  .szh-menu__item {
+    align-items: center;
+    border-radius: 3px;
+    cursor: pointer;
+    display: flex;
+    line-height: 1.45em;
+    min-width: 100px;
+    outline: none;
+    padding: 5px 8px;
+    padding-right: 15px;
+    user-select: none;
+    white-space: nowrap;
+    > svg {
+      margin-right: 6px;
+      margin-left: -1px;
+      font-size: 1.2em;
+    }
+    &:hover,
+    &:focus {
+      background-color: ${vars.backgroundActive};
+    }
+    &.szh-menu__item--disabled {
+      opacity: 0.5;
+      cursor: default;
+      &:hover {
+        background: unset;
+      }
+    }
+  }
+`
diff --git a/src/options/hooks/useFileName.ts b/src/options/hooks/useFileName.ts
new file mode 100644
index 0000000..21b464e
--- /dev/null
+++ b/src/options/hooks/useFileName.ts
@@ -0,0 +1,25 @@
+import { gql, useQuery } from "~/generated/graphql"
+import { useSelector } from "../store"
+
+export function useFileName(fileId?: string | null) {
+  const { data: { file } = {} } = useQuery(FileTitleQuery, {
+    variables: { id: fileId! },
+    skip: !fileId,
+  })
+
+  return file?.name
+}
+
+export function useActiveFileName() {
+  const fileId = useSelector(state => state.activeFileId)
+  return useFileName(fileId)
+}
+
+const FileTitleQuery = gql<"FileTitleQuery">`
+  query FileTitleQuery($id: ID!) {
+    file(id: $id) {
+      id
+      name
+    }
+  }
+`
diff --git a/src/options/hooks/useOpenFile.ts b/src/options/hooks/useOpenFile.ts
new file mode 100644
index 0000000..48f9414
--- /dev/null
+++ b/src/options/hooks/useOpenFile.ts
@@ -0,0 +1,34 @@
+import { useEvent } from "@aet/hooks"
+import { gql, useLazyQuery } from "~/generated/graphql"
+import { removeTypeName } from "~/shared/removeTypeName"
+import { useDispatch } from "../store"
+import { openFile } from "../store/actions"
+import { SECTION_FRAGMENT } from "../fragments"
+
+const GET_FILE = gql<"GetFile">`
+  ${SECTION_FRAGMENT}
+  query GetFile($id: ID!) {
+    file(id: $id) {
+      id
+      tags
+      rules {
+        exclude
+        type
+        value
+      }
+      sections {
+        ...SectionFragment
+      }
+    }
+  }
+`
+
+export function useOpenFile() {
+  const [query] = useLazyQuery(GET_FILE)
+  const dispatch = useDispatch()
+
+  return useEvent(async (id: string) => {
+    const { data } = await query({ variables: { id } })
+    dispatch(openFile(removeTypeName(data!.file)))
+  })
+}
diff --git a/src/options/hooks/useSaveFile.tsx b/src/options/hooks/useSaveFile.tsx
new file mode 100644
index 0000000..b1fe445
--- /dev/null
+++ b/src/options/hooks/useSaveFile.tsx
@@ -0,0 +1,83 @@
+import styled from "@emotion/styled"
+import { toast } from "react-hot-toast"
+import invariant from "tiny-invariant"
+import { produce } from "immer"
+import { ApolloError, makeVar } from "@apollo/client"
+import { useEvent } from "@aet/hooks"
+import { gql } from "~/generated/graphql"
+import { currentState, useDispatch } from "../store"
+import { changeDirty } from "../store/actions"
+import { FILE_FRAGMENT, SECTION_FRAGMENT } from "../fragments"
+import { client } from "~/shared/apolloClient"
+import type { ErrorExtension } from "~/background/graphql/resolvers/SectionResolver"
+
+const SAVE_FILE = gql<"SetFile">`
+  ${FILE_FRAGMENT}
+  ${SECTION_FRAGMENT}
+  mutation SetFile($id: ID!, $file: PartialFileInput!) {
+    setFile(id: $id, input: $file) {
+      ...FileFragment
+      sections {
+        ...SectionFragment
+        compiledCode(cache: false)
+      }
+    }
+  }
+`
+
+/**
+ * Saves a file to backend.
+ * @param id File ID
+ * @param newCode New code to save. If not provided, the current code in Redux state will be used.
+ */
+async function saveFile(id: string, newCode?: string) {
+  const draft = currentState.tabs.find(x => x.id === id)
+  invariant(draft != null, "Style not found")
+
+  let { ...file } = draft
+  if (newCode != null) {
+    file = produce(file, draft => {
+      draft.sections[0].code = newCode
+    })
+  }
+
+  const { errors } = await client.mutate({
+    mutation: SAVE_FILE,
+    variables: { id, file },
+  })
+
+  if (errors?.length) {
+    throw errors[0]
+  }
+}
+
+interface CompilationError {
+  span: ErrorExtension["span"]
+  message: string
+}
+
+export const compilerErrorVars = makeVar<CompilationError[]>([])
+
+export function useFileSaver() {
+  const dispatch = useDispatch()
+
+  return useEvent(async (fileId: string, code?: string) => {
+    try {
+      await saveFile(fileId, code)
+      dispatch(changeDirty(fileId, false))
+      compilerErrorVars([])
+    } catch (e) {
+      if (e instanceof ApolloError) {
+        const ext = e.graphQLErrors[0]?.extensions as ErrorExtension
+        if (ext?.code === "BAD_USER_INPUT") {
+          compilerErrorVars([{ span: ext.span, message: e.message }])
+        }
+      }
+      toast.error(<Pre>{e.message}</Pre>)
+    }
+  })
+}
+
+const Pre = styled.pre`
+  margin: 0;
+`
diff --git a/src/options/index.scss b/src/options/index.scss
new file mode 100644
index 0000000..9fc9655
--- /dev/null
+++ b/src/options/index.scss
@@ -0,0 +1,43 @@
+@import "../shared/theme/index.css";
+
+@media (prefers-color-scheme: dark) {
+  #not-loaded {
+    background-color: #111;
+    height: 100vh;
+    width: 100vw;
+    position: fixed;
+    top: 0;
+  }
+}
+html,
+body {
+  height: 100%;
+  width: 100%;
+}
+body.dark {
+  --separator-border: #202930;
+}
+
+body {
+  font-family: var(--font-family);
+  font-size: 14px;
+  margin: 0;
+  background-color: var(--color-canvas-default);
+  color: var(--color-fg-default);
+  overscroll-behavior: none;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid var(--color-border-default);
+}
+
+input,
+textarea {
+  outline: none;
+}
+
+#root {
+  height: 100%;
+  width: 100%;
+}
diff --git a/src/options/index.tsx b/src/options/index.tsx
new file mode 100644
index 0000000..23eb0c9
--- /dev/null
+++ b/src/options/index.tsx
@@ -0,0 +1,64 @@
+import "normalize.css"
+import "../shared/theme/tokens.generated.css"
+import "./index.scss"
+import "./utils/disponsiblestack"
+import { StrictMode, memo } from "react"
+import { ApolloProvider } from "@apollo/client"
+import { createRoot } from "react-dom/client"
+import { type DefaultToastOptions, Toaster } from "react-hot-toast"
+import { I18nextProvider } from "react-i18next"
+import { client } from "~/shared/apolloClient"
+import Options from "./App"
+import { PrimerCSS, color, token } from "./theme"
+import { RootContextProvider } from "./store"
+import SideEffect from "./SideEffect"
+import { cascade } from "~/shared/cascade"
+import { getI18n } from "~/shared/i18n"
+import { ConfirmClose } from "./editor/useConfirmClose"
+
+const i18n = await getI18n()
+
+const Providers = cascade(
+  <ApolloProvider client={client} />,
+  <RootContextProvider />,
+  <I18nextProvider i18n={i18n} />,
+)
+
+const toastOptions: DefaultToastOptions = {
+  style: {
+    background: color("#fff", "#303746"),
+    color: token.fg.default,
+  },
+}
+
+const App = memo(() => (
+  <>
+    <Toaster toastOptions={toastOptions} />
+    <ConfirmClose />
+    <PrimerCSS />
+    <Providers>
+      <SideEffect />
+      <Options />
+    </Providers>
+  </>
+))
+
+const root = document.getElementById("root")!
+
+document.querySelector("not-loaded")?.remove()
+if (navigator.platform === "MacIntel") {
+  document.body.classList.add("platform-mac")
+}
+
+createRoot(root).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
+
+if (process.env.NODE_ENV === "development") {
+  const source = new EventSource(`http://localhost:${process.env.SERVE_PORT}/esbuild`)
+  source.addEventListener("change", () => {
+    location.reload()
+  })
+}
diff --git a/src/options/monaco.ts b/src/options/monaco.ts
new file mode 100644
index 0000000..ad76ace
--- /dev/null
+++ b/src/options/monaco.ts
@@ -0,0 +1,18 @@
+import { loader } from "@monaco-editor/react"
+import { getMonacoLanguage } from "~/shared/i18n"
+
+loader.config({
+  paths: {
+    vs: "/vendor/vs",
+  },
+  "vs/nls": {
+    availableLanguages: {
+      "*": getMonacoLanguage(),
+    },
+  },
+})
+
+const monaco = await loader.init()
+export default monaco
+
+export const { editor, languages, MarkerSeverity } = monaco
diff --git a/src/options/store/actions.ts b/src/options/store/actions.ts
new file mode 100644
index 0000000..f9985f1
--- /dev/null
+++ b/src/options/store/actions.ts
@@ -0,0 +1,43 @@
+import type { Rule } from "~/shared/models"
+import type { ReduxFile } from "./state"
+
+export const SET_ACTIVE_FILE_ID = "SET_ACTIVE_FILE_ID" as const
+export const PATCH_FILES = "PATCH_FILES" as const
+export const OPEN_FILE = "OPEN_FILE" as const
+export const RENAME_FILE = "RENAME_FILE" as const
+export const CHANGE_DIRTY = "CHANGE_DIRTY" as const
+export const UPDATE_RULE = "UPDATE_RULE" as const
+export const DELETE_RULE = "DELETE_RULE" as const
+export const ADD_RULE = "ADD_RULE" as const
+export const UPDATE_FILE_CODE = "UPDATE_FILE_CODE" as const
+export const UPDATE_TAGS = "UPDATE_TAGS" as const
+export const CLOSE_FILE = "CLOSE_FILE" as const
+
+export const setActiveFileId = (id: string) => ({ type: SET_ACTIVE_FILE_ID, id })
+export const openFile = (file: ReduxFile) => ({ type: OPEN_FILE, file })
+export const patchFiles = (
+  patches: (readonly [id: string, patch: Partial<ReduxFile>])[],
+) => ({
+  type: PATCH_FILES,
+  patches,
+})
+export const renameFile = (fileId: string, name: string) => ({
+  type: RENAME_FILE,
+  fileId,
+  name,
+})
+export const changeDirty = (fileId: string, dirty: boolean) => ({
+  type: CHANGE_DIRTY,
+  dirty,
+  fileId,
+})
+export const updateRule = ({ index, rule }: { index: number; rule: Rule }) => ({
+  type: UPDATE_RULE,
+  index,
+  rule,
+})
+export const deleteRule = (index: number) => ({ type: DELETE_RULE, index })
+export const addRule = (rule: Rule) => ({ type: ADD_RULE, rule })
+export const setFileCode = (code: string) => ({ type: UPDATE_FILE_CODE, code })
+export const updateTags = (tags: readonly string[]) => ({ type: UPDATE_TAGS, tags })
+export const closeFile = (fileId: string) => ({ type: CLOSE_FILE, fileId })
diff --git a/src/options/store/hooks.ts b/src/options/store/hooks.ts
new file mode 100644
index 0000000..b2efded
--- /dev/null
+++ b/src/options/store/hooks.ts
@@ -0,0 +1,3 @@
+// import * as actions from "./actions";
+// import * as selectors from "./selectors";
+// import { useSelector } from "./index";
diff --git a/src/options/store/index.tsx b/src/options/store/index.tsx
new file mode 100644
index 0000000..0cd313c
--- /dev/null
+++ b/src/options/store/index.tsx
@@ -0,0 +1,53 @@
+import { useEffect, useMemo, useReducer } from "react"
+import { createContext, useContextSelector } from "use-context-selector"
+import { debounce } from "lodash"
+import json from "superjson"
+import { type RootState, rootReducer } from "./state"
+
+export * from "./selectors"
+
+export const LOCAL_STORAGE_KEY = "options:state"
+const preloadedState: RootState = (() => {
+  try {
+    const state = localStorage.getItem(LOCAL_STORAGE_KEY)
+    if (state) {
+      return json.parse(state)
+    }
+  } catch {}
+
+  return {
+    tabs: [],
+    dirtyFileIds: new Set(),
+  } as RootState
+})()
+
+const saveState = debounce((state: RootState) => {
+  try {
+    localStorage.setItem(LOCAL_STORAGE_KEY, json.stringify(state))
+  } catch {}
+}, 200)
+
+export let currentState: RootState = preloadedState
+
+function useRootContextValue() {
+  const [state, dispatch] = useReducer(rootReducer, preloadedState)
+
+  useEffect(() => {
+    currentState = state
+    saveState(state)
+  }, [state])
+
+  return useMemo(() => ({ state, dispatch }), [state])
+}
+
+const Context = createContext<ReturnType<typeof useRootContextValue>>(null!)
+const { Provider } = Context
+
+export function RootContextProvider({ children }: { children?: React.ReactNode }) {
+  return <Provider value={useRootContextValue()}>{children}</Provider>
+}
+
+export const useDispatch = () => useContextSelector(Context, ({ dispatch }) => dispatch)
+
+export const useSelector = <T,>(selector: (state: RootState) => T): T =>
+  useContextSelector(Context, ({ state }) => selector(state))
diff --git a/src/options/store/selectors.ts b/src/options/store/selectors.ts
new file mode 100644
index 0000000..77297a9
--- /dev/null
+++ b/src/options/store/selectors.ts
@@ -0,0 +1,10 @@
+import type { RootState } from "./state"
+
+export const getActiveFile = (state: RootState) =>
+  state.tabs.find(file => file.id === state.activeFileId)
+
+export const getActiveFileRules = (state: RootState) => getActiveFile(state)?.rules
+
+export const getTabs = (state: RootState) => state.tabs
+
+export const getTabFileIds = (state: RootState) => getTabs(state).map(tab => tab.id)
diff --git a/src/options/store/state.ts b/src/options/store/state.ts
new file mode 100644
index 0000000..bcf002a
--- /dev/null
+++ b/src/options/store/state.ts
@@ -0,0 +1,208 @@
+import assert from "tiny-invariant"
+import { enableMapSet, produce } from "immer"
+import * as A from "./actions"
+import type { File } from "~/shared/models"
+import type { Action } from "./types"
+
+enableMapSet()
+
+export interface ReduxFile extends Pick<File, "id" | "tags" | "rules" | "sections"> {}
+
+export interface RootState {
+  /**
+   * A list of opened files
+   */
+  tabs: ReduxFile[]
+
+  /**
+   * Marks a file as a preview tab.
+   * @see https://github.com/Microsoft/vscode-docs/blob/vnext/release-notes/June_2016.md#preview-editors
+   */
+  previewFileId?: string
+
+  /**
+   * Designates the active file ID.
+   */
+  activeFileId?: string
+
+  dirtyFileIds: Set<string>
+}
+
+/**
+ * Array.prototype.map that returns the original array if no value is *referentially* different.
+ */
+function refEqualMap<T>(array: T[], mapFn: (value: T) => T): T[] {
+  let modified = false
+  const result: T[] = Array(array.length)
+  for (let i = 0; i < array.length; i++) {
+    const value = array[i]
+    const mapped = mapFn(value)
+    if (mapped !== value) {
+      modified = true
+    }
+    result[i] = mapped
+  }
+
+  return modified ? result : array
+}
+
+const updateById = <T extends { id: string }>(
+  array: T[],
+  index: string,
+  mapFn: (value: T) => T,
+): T[] => refEqualMap(array, value => (value.id === index ? mapFn(value) : value))
+
+const assertNever = (_: never): void => {}
+
+function markDirty(fileId: string, state: RootState, isDirty: boolean): RootState {
+  return {
+    ...state,
+    previewFileId: state.previewFileId === fileId ? undefined : state.previewFileId,
+    dirtyFileIds: isDirty
+      ? produce(state.dirtyFileIds, set => set.add(fileId))
+      : produce(state.dirtyFileIds, set => void set.delete(fileId)),
+  }
+}
+
+function updateActiveFile(
+  state: RootState,
+  recipe: (draft: ReduxFile) => void,
+): RootState {
+  const { tabs, activeFileId } = state
+  assert(activeFileId != null)
+
+  const newTabs = updateById(tabs, activeFileId, file => produce(file, recipe))
+  if (newTabs === tabs) {
+    return state
+  }
+
+  return {
+    ...markDirty(activeFileId, state, true),
+    tabs: newTabs,
+  }
+}
+
+export function rootReducer(
+  state: RootState = {
+    tabs: [],
+    dirtyFileIds: new Set(),
+  },
+  action: Action,
+): RootState {
+  const { tabs, activeFileId, previewFileId, dirtyFileIds } = state
+  switch (action.type) {
+    case A.OPEN_FILE: {
+      const { file: style } = action
+      // Tab already exists
+      if (tabs.some(tab => tab.id === style.id)) {
+        return {
+          ...state,
+          activeFileId: style.id,
+        }
+      }
+
+      // There is an ephemeral tab, replace it
+      if (previewFileId != null) {
+        return {
+          ...state,
+          activeFileId: style.id,
+          previewFileId: style.id,
+          tabs: tabs.filter(x => x.id !== state.previewFileId).concat(style),
+        }
+      }
+
+      // Append it to the end of tab list
+      return {
+        ...state,
+        activeFileId: style.id,
+        previewFileId: style.id,
+        tabs: tabs.concat(style),
+      }
+    }
+
+    case A.PATCH_FILES: {
+      if (!action.patches.length) {
+        return state
+      }
+
+      const patches = new Map(action.patches)
+
+      return {
+        ...state,
+        tabs: refEqualMap(tabs, style => {
+          const patch = patches.get(style.id)
+          return patch ? { ...style, ...patch } : style
+        }),
+      }
+    }
+
+    case A.RENAME_FILE: {
+      const { fileId: styleId, name } = action
+      return {
+        ...state,
+        tabs: updateById(tabs, styleId, style => ({ ...style, name })),
+      }
+    }
+
+    case A.UPDATE_FILE_CODE: {
+      return updateActiveFile(state, draft => {
+        draft.sections[0].code = action.code
+      })
+    }
+
+    case A.CHANGE_DIRTY:
+      return markDirty(action.fileId, state, action.dirty)
+
+    case A.CLOSE_FILE: {
+      const { fileId: styleId } = action
+      return {
+        ...state,
+        tabs: tabs.filter(tab => tab.id !== styleId),
+        activeFileId:
+          activeFileId === styleId
+            ? tabs.filter(tab => tab.id !== styleId)[0]?.id
+            : activeFileId,
+        previewFileId: previewFileId === styleId ? undefined : previewFileId,
+        dirtyFileIds: produce(dirtyFileIds, set => void set.delete(styleId)),
+      }
+    }
+
+    case A.SET_ACTIVE_FILE_ID:
+      return {
+        ...state,
+        activeFileId: action.id,
+      }
+
+    case A.UPDATE_RULE: {
+      const { index, rule } = action
+      return updateActiveFile(state, draft => {
+        draft.rules[index] = rule
+      })
+    }
+
+    case A.DELETE_RULE: {
+      const { index } = action
+      return updateActiveFile(state, draft => {
+        draft.rules.splice(index, 1)
+      })
+    }
+
+    case A.ADD_RULE: {
+      const { rule } = action
+      return updateActiveFile(state, draft => {
+        draft.rules.push(rule)
+      })
+    }
+
+    case A.UPDATE_TAGS: {
+      const { tags } = action
+      return updateActiveFile(state, draft => {
+        draft.tags = tags.slice()
+      })
+    }
+
+    default:
+      assertNever(action)
+      return state
+  }
+}
diff --git a/src/options/store/types.d.ts b/src/options/store/types.d.ts
new file mode 100644
index 0000000..e7fbad4
--- /dev/null
+++ b/src/options/store/types.d.ts
@@ -0,0 +1,4 @@
+import type * as actionFile from "./actions"
+
+type ActionFile = typeof actionFile
+type Action = ReturnType<Extract<ActionFile[keyof ActionFile], (...args: any) => any>>
diff --git a/src/options/theme.tsx b/src/options/theme.tsx
new file mode 100644
index 0000000..ad55690
--- /dev/null
+++ b/src/options/theme.tsx
@@ -0,0 +1,78 @@
+/// <reference types="@types/w3c-css-typed-object-model-level-1" />
+import { kebabCase } from "lodash"
+import type primer from "@primer/primitives/dist/json/colors/dark.json"
+import { memo } from "react"
+import { Helmet } from "react-helmet"
+import type { tokenSource } from "~/shared/theme/tokens"
+
+export const vars: {
+  [key in keyof typeof tokenSource]: string
+} = new Proxy({} as any, {
+  get: (_, target: string) => `var(--${kebabCase(target)})`,
+})
+
+export const LIGHT_MODE = "body.light &"
+export const DARK_MODE = "body.dark &"
+
+export type Primer = typeof primer
+
+function getProxy(prefix: string): any {
+  return new Proxy({} as any, {
+    get: (_, target) => {
+      if (typeof target === "symbol") {
+        return
+      }
+      if (target === "toString") {
+        return () => `var(--color-${kebabCase(prefix)})`
+      }
+      return getProxy(prefix + "-" + target)
+    },
+  })
+}
+
+export const token: Primer = getProxy("")
+
+const themes = [
+  "dark",
+  "dark-default",
+  // "dark_colorblind",
+  // "dark_dimmed",
+  // "dark_high_contrast",
+  // "dark_tritanopia",
+  "light",
+  "light-default",
+  // "light_colorblind",
+  // "light_high_contrast",
+  // "light_tritanopia",
+]
+
+export const PrimerCSS = memo(() => (
+  <Helmet>
+    {themes.map(theme => (
+      <link rel="stylesheet" key={theme} href={`/vendor/primer/github-${theme}.css`} />
+    ))}
+  </Helmet>
+))
+
+let rules: [CSSStyleRule, CSSStyleRule]
+const idMap = new Map<string, number>()
+
+export function color(light: string, dark: string) {
+  if (rules == null) {
+    const style = document.createElement("style")
+    style.innerHTML = "body.light{}body.dark{}"
+    document.head.appendChild(style)
+    rules = style.sheet!.cssRules as any
+  }
+
+  const key = `${light}-${dark}`
+  if (idMap.has(key)) {
+    return `var(--c${idMap.get(key)})`
+  }
+
+  idMap.set(key, idMap.size + 1)
+  const id = "--c" + idMap.get(key)!
+  rules[0].style.setProperty(id, light)
+  rules[1].style.setProperty(id, dark)
+  return `var(${id})`
+}
diff --git a/src/options/utils/componentMap.tsx b/src/options/utils/componentMap.tsx
new file mode 100644
index 0000000..84e4e43
--- /dev/null
+++ b/src/options/utils/componentMap.tsx
@@ -0,0 +1,28 @@
+export function getMap<K extends string | number, V>(record: () => Record<K, V>) {
+  let map: Map<K, V> | undefined
+  let entries: [K, V][] | undefined
+
+  function getMap(): Map<K, V> {
+    map ??= new Map(Object.entries(record())) as Map<K, V>
+    return map!
+  }
+
+  function getEntries(): [K, V][] {
+    return (entries ??= Array.from(getMap().entries()))
+  }
+
+  return {
+    get(key: K): V {
+      return getMap().get(key)!
+    },
+    has(key: K): boolean {
+      return getMap().has(key)
+    },
+    entries(): [K, V][] {
+      return getEntries()
+    },
+    map<T>(fn: (value: V, key: K) => T): T[] {
+      return getEntries().map(([key, value]) => fn(value, key))
+    },
+  }
+}
diff --git a/src/options/utils/disponsiblestack.ts b/src/options/utils/disponsiblestack.ts
new file mode 100644
index 0000000..a7e9b52
--- /dev/null
+++ b/src/options/utils/disponsiblestack.ts
@@ -0,0 +1,412 @@
+// @ts-nocheck
+if (!Symbol.dispose) {
+  Object.defineProperty(Symbol, "dispose", {
+    configurable: false,
+    enumerable: false,
+    writable: false,
+    value: Symbol("Symbol.dispose"),
+  })
+}
+
+if (!Symbol.asyncDispose) {
+  Object.defineProperty(Symbol, "asyncDispose", {
+    configurable: false,
+    enumerable: false,
+    writable: false,
+    value: Symbol("Symbol.asyncDispose"),
+  })
+}
+
+// node_modules/suppressed-error/polyfill.js
+class SuppressedError extends Error {
+  constructor(
+    public error: any,
+    public suppressed: any,
+    message?: string,
+  ) {
+    super(message)
+  }
+}
+
+// node_modules/es-abstract/2022/CompletionRecord.js
+type CompletionRecordType = "normal" | "break" | "continue" | "return" | "throw"
+
+class CompletionRecord<T = any> {
+  #Type: CompletionRecordType
+  #Value: T
+
+  constructor(type: CompletionRecordType, value: T) {
+    if (
+      type !== "normal" &&
+      type !== "break" &&
+      type !== "continue" &&
+      type !== "return" &&
+      type !== "throw"
+    ) {
+      throw new SyntaxError(
+        'Assertion failed: `type` must be one of "normal", "break", "continue", "return", or "throw"',
+      )
+    }
+    this.#Type = type
+    this.#Value = value
+  }
+
+  type() {
+    return this.#Type
+  }
+
+  value() {
+    return this.#Value
+  }
+
+  "?"() {
+    const type = this.#Type
+    const value = this.#Value
+    if (type === "normal") {
+      return value
+    }
+    if (type === "throw") {
+      throw value
+    }
+    throw new SyntaxError(
+      'Completion Record is not of type "normal" or "throw": other types not supported',
+    )
+  }
+
+  "!"() {
+    const type = this.#Type
+    if (type !== "normal") {
+      throw new SyntaxError('Assertion failed: Completion Record is not of type "normal"')
+    }
+    return this.#Value
+  }
+}
+
+// node_modules/es-abstract/2022/NormalCompletion.js
+function normalCompletion(value?: unknown) {
+  return new CompletionRecord("normal", value)
+}
+
+const enum Hint {
+  SyncDispose,
+  AsyncDispose,
+}
+
+// node_modules/disposablestack/aos/GetDisposeMethod.js
+function GetDisposeMethod(V: unknown, hint: Hint): () => unknown {
+  if (typeof V !== "object") {
+    throw new TypeError("`V` must be an Object")
+  }
+  let method
+  if (hint === Hint.AsyncDispose && Symbol.asyncDispose) {
+    method = (V as AsyncDisposable)[Symbol.asyncDispose]
+  }
+  if (!method) {
+    method = (V as Disposable)[Symbol.dispose]
+  }
+  return method
+}
+
+// node_modules/disposablestack/aos/CreateDisposableResource.js
+type DisposableResource = ReturnType<typeof createDisposableResource>
+
+function createDisposableResource(V: unknown, hint: Hint, method?: () => unknown) {
+  if (typeof V !== "undefined" && typeof V !== "object") {
+    throw new TypeError("`V` must be an Object")
+  }
+  if (arguments.length < 3) {
+    if (typeof V === "undefined") {
+      throw new TypeError("`V` must not be `undefined` when `method` is not provided")
+    }
+    method = GetDisposeMethod(V, hint)
+    if (typeof method === "undefined") {
+      throw new TypeError(
+        "dispose method must not be `undefined` on `V` when an object `V` is provided",
+      )
+    }
+  } else if (typeof method !== "function") {
+    throw new TypeError("`method`, when provided, must be a function")
+  }
+  return {
+    // step 3
+    "[[ResourceValue]]": V,
+    "[[Hint]]": hint,
+    "[[DisposeMethod]]": method,
+  }
+}
+
+// node_modules/disposablestack/aos/AddDisposableResource.js
+function addDisposableResource(
+  disposeCapability: DisposeCapability,
+  V: unknown,
+  hint: Hint,
+  method?: () => unknown,
+) {
+  let resource
+  if (arguments.length < 4) {
+    if (V == null) {
+      return "unused"
+    }
+    if (typeof V !== "object") {
+      throw new TypeError("`V` must be an Object")
+    }
+    resource = createDisposableResource(V, hint)
+  } else {
+    if (typeof V !== "undefined") {
+      throw new TypeError(
+        "Assertion failed: `V` must be undefined when `method` is present",
+      )
+    }
+    resource = createDisposableResource(undefined, hint, method)
+  }
+  disposeCapability["[[DisposableResourceStack]]"].push(resource)
+  return "unused"
+}
+
+// node_modules/disposablestack/aos/Dispose.js
+function dispose(V: unknown, hint: Hint, method: () => unknown) {
+  if (typeof V !== "undefined" && typeof V !== "object") {
+    throw new SyntaxError("Assertion failed: `V` must be `undefined` or an Object")
+  }
+  if (typeof method !== "undefined" && typeof method !== "function") {
+    throw new SyntaxError("Assertion failed: `method` must be `undefined` or a function")
+  }
+  const result = Reflect.apply(method, V, [])
+  if (hint === Hint.AsyncDispose) {
+    return Promise.resolve(result)
+  }
+}
+
+// node_modules/es-abstract/2022/ThrowCompletion.js
+function throwCompletion(argument: unknown) {
+  return new CompletionRecord("throw", argument)
+}
+
+// node_modules/disposablestack/aos/DisposeResources.js
+function disposeResources(
+  disposeCapability: DisposeCapability,
+  completion: CompletionRecord,
+) {
+  if (!(completion instanceof CompletionRecord)) {
+    throw new TypeError("`completion` must be a Completion Record")
+  }
+  const stack = disposeCapability["[[DisposableResourceStack]]"]
+  let actualHint
+  for (let j = stack.length - 1; j >= 0; j -= 1) {
+    if (!actualHint) {
+      actualHint = stack[j]["[[Hint]]"]
+    } else if (actualHint !== stack[j]["[[Hint]]"]) {
+      throw new SyntaxError("mixed hint stacks are not supported")
+    }
+  }
+  let promise = actualHint === Hint.AsyncDispose && Promise.resolve(completion)
+  const rejecter = function (e: Error) {
+    if (completion.type() === "throw") {
+      const suppressed = completion.value()
+      const error = new SuppressedError(e, suppressed)
+      completion = throwCompletion(error)
+    } else {
+      completion = throwCompletion(e)
+    }
+  }
+  const getPromise = function getPromise2(resource: DisposableResource) {
+    return (promise as Promise<any>).then(() => {
+      const result = dispose(
+        // step 1.a
+        resource["[[ResourceValue]]"],
+        resource["[[Hint]]"],
+        resource["[[DisposeMethod]]"],
+      )
+      if (!result) {
+        throw new SyntaxError(
+          "Assertion failed: non-`async-dispose` resource returned a promise from Dispose",
+        )
+      }
+      return result.then(normalCompletion)
+    }, rejecter)
+  }
+  for (let i = stack.length - 1; i >= 0; i -= 1) {
+    if (actualHint === Hint.AsyncDispose) {
+      promise = getPromise(stack[i]) as Promise<CompletionRecord>
+    } else {
+      const resource = stack[i]
+      try {
+        const result = dispose(
+          // step 1.a
+          resource["[[ResourceValue]]"],
+          resource["[[Hint]]"],
+          resource["[[DisposeMethod]]"],
+        )
+        if (result) {
+          throw new SyntaxError(
+            "Assertion failed: `sync-dispose` resource returned something from Dispose",
+          )
+        }
+      } catch (e) {
+        rejecter(e)
+      }
+    }
+  }
+  return actualHint === Hint.AsyncDispose
+    ? (promise as Promise<CompletionRecord>)
+    : completion
+}
+
+// node_modules/disposablestack/aos/NewDisposeCapability.js
+type DisposeCapability = ReturnType<typeof newDisposeCapability>
+function newDisposeCapability() {
+  return { "[[DisposableResourceStack]]": [] as DisposableResource[] }
+}
+
+// node_modules/disposablestack/DisposableStack/implementation.js
+class DisposableStack {
+  #DisposableState = "pending"
+  #DisposeCapability = newDisposeCapability()
+
+  get disposed() {
+    return this.#DisposableState === "disposed"
+  }
+
+  dispose(): void {
+    if (this.disposed) return
+    this.#markDisposed()
+    return disposeResources(this.#DisposeCapability, normalCompletion())["?"]()
+  }
+
+  use<T extends Disposable | null | undefined>(value: T): T {
+    if (this.disposed) {
+      throw new ReferenceError("a disposed stack cannot use anything new")
+    }
+    addDisposableResource(this.#DisposeCapability, value, Hint.SyncDispose)
+    return value
+  }
+
+  adopt<T>(value: T, onDispose: (value: T) => void): T {
+    if (this.disposed) {
+      throw new ReferenceError("a disposed stack cannot use anything new")
+    }
+    if (typeof onDispose !== "function") {
+      throw new TypeError("`onDispose` must be a function")
+    }
+    addDisposableResource(this.#DisposeCapability, undefined, Hint.SyncDispose, () =>
+      onDispose(value),
+    )
+    return value
+  }
+
+  defer(onDispose: () => void): void {
+    if (this.disposed) {
+      throw new ReferenceError("a disposed stack cannot defer anything new")
+    }
+    if (typeof onDispose !== "function") {
+      throw new TypeError("`onDispose` must be a function")
+    }
+    addDisposableResource(this.#DisposeCapability, undefined, Hint.SyncDispose, onDispose)
+  }
+
+  move(): DisposableStack {
+    if (this.disposed) {
+      throw new ReferenceError("a disposed stack cannot use anything new")
+    }
+    const newDisposableStack = new DisposableStack()
+    newDisposableStack.#DisposeCapability = this.#DisposeCapability
+    this.#DisposeCapability = newDisposeCapability()
+    this.#markDisposed()
+    return newDisposableStack
+  }
+
+  #markDisposed() {
+    this.#DisposableState = "disposed"
+  }
+
+  [Symbol.dispose]() {
+    this.dispose()
+  }
+}
+
+// node_modules/disposablestack/AsyncDisposableStack/implementation.js
+class AsyncDisposableStack implements AsyncDisposableStack {
+  #AsyncDisposableState = "pending"
+  #DisposeCapability = newDisposeCapability()
+
+  get disposed() {
+    return this.#AsyncDisposableState === "disposed"
+  }
+
+  #markDisposed() {
+    this.#AsyncDisposableState = "disposed"
+  }
+
+  async disposeAsync(): Promise<void> {
+    if (this.disposed) {
+      return Promise.resolve()
+    }
+    this.#markDisposed()
+    const completion = await Promise.resolve(
+      disposeResources(this.#DisposeCapability, normalCompletion()),
+    )
+    return completion["?"]()
+  }
+
+  use<T extends AsyncDisposable | Disposable | null | undefined>(value: T): T {
+    if (this.disposed) {
+      throw new ReferenceError("a disposed stack cannot use anything new")
+    }
+    addDisposableResource(this.#DisposeCapability, value, Hint.AsyncDispose)
+    return value
+  }
+
+  adopt<T>(value: T, onDisposeAsync: (value: T) => PromiseLike<void> | void): T {
+    if (this.disposed) {
+      throw new ReferenceError("a disposed stack cannot use anything new")
+    }
+    if (typeof onDisposeAsync !== "function") {
+      throw new TypeError("`onDisposeAsync` must be a function")
+    }
+    const F = () => onDisposeAsync(value)
+    F.value = value
+    addDisposableResource(this.#DisposeCapability, undefined, Hint.AsyncDispose, F)
+    return value
+  }
+
+  defer(onDisposeAsync: () => PromiseLike<void> | void): void {
+    if (this.disposed) {
+      throw new ReferenceError("a disposed stack cannot defer anything new")
+    }
+    if (typeof onDisposeAsync !== "function") {
+      throw new TypeError("`onDispose` must be a function")
+    }
+    addDisposableResource(
+      this.#DisposeCapability,
+      undefined,
+      Hint.AsyncDispose,
+      onDisposeAsync,
+    )
+  }
+
+  move(): AsyncDisposableStack {
+    if (this.disposed) {
+      throw new ReferenceError("a disposed stack cannot use anything new")
+    }
+    const newAsyncDisposableStack = new AsyncDisposableStack()
+    newAsyncDisposableStack.#DisposeCapability = this.#DisposeCapability
+    this.#DisposeCapability = newDisposeCapability()
+    this.#markDisposed()
+    return newAsyncDisposableStack
+  }
+
+  [Symbol.asyncDispose](): Promise<void> {
+    return this.disposeAsync()
+  }
+}
+
+// node_modules/disposablestack/AsyncDisposableStack/polyfill.js
+
+// node_modules/disposablestack/AsyncDisposableStack/shim.js
+
+// node_modules/disposablestack/auto.js
+;(globalThis as any).SuppressedError ??= SuppressedError
+;(globalThis as any).DisposableStack ??= DisposableStack
+;(globalThis as any).AsyncDisposableStack ??= AsyncDisposableStack
+
+export {}
diff --git a/src/options/utils/emitter.ts b/src/options/utils/emitter.ts
new file mode 100644
index 0000000..599be76
--- /dev/null
+++ b/src/options/utils/emitter.ts
@@ -0,0 +1,7 @@
+import type * as monaco from "monaco-editor"
+import { ValueEmitter } from "~/shared/emitter"
+
+export const editorNavigation = new ValueEmitter<{
+  fileId?: string
+  position: number | monaco.IPosition
+}>()
diff --git a/src/popup/App.tsx b/src/popup/App.tsx
new file mode 100644
index 0000000..91753ec
--- /dev/null
+++ b/src/popup/App.tsx
@@ -0,0 +1,75 @@
+import browser from "webextension-polyfill"
+import { memo, useEffect, useMemo } from "react"
+import { useAutoCallback } from "hooks.macro"
+import { groupBy } from "lodash"
+import { useTranslation } from "react-i18next"
+import { gql, useQuery } from "~/generated/graphql"
+import type * as types from "~/generated/graphql"
+import { useChromeEvent } from "~/shared/hooks/useChromeEvent"
+import { Popup } from "./components/style"
+import { StateToggles } from "./components/StateToggles"
+import { Sections } from "./components/Sections"
+import { Footer } from "./components/Footer"
+import { usePopupContext } from "./index"
+
+export type Data = types.GetPopupFilesQuery["files"][number]
+
+export const GET_SECTIONS = gql<"GetPopupFiles">`
+  query GetPopupFiles($url: String!) {
+    preferences {
+      enabled
+    }
+    files(filter: { url: $url, isGlobal: false, state: None }) {
+      id
+      name
+      icon
+      enabled
+      tags
+    }
+  }
+`
+
+export const PopupApp = memo(({ container }: { container: HTMLElement }) => {
+  const { i18n } = useTranslation()
+  const { url } = usePopupContext()
+  const { data: { files } = {}, refetch } = useQuery(GET_SECTIONS, {
+    variables: { url },
+  })
+
+  useEffect(() => {
+    document.documentElement.lang = i18n.language
+  }, [i18n.language])
+
+  useChromeEvent(
+    browser.runtime.onMessage,
+    useAutoCallback((msg: { updatePopup?: boolean }) => {
+      msg.updatePopup && void refetch()
+    }),
+  )
+
+  useEffect(() => {
+    // https://bugs.chromium.org/p/chromium/issues/detail?id=317880
+    document.body.style.minHeight = getComputedStyle(container).height
+    setTimeout(() => {
+      ;(document.activeElement as HTMLElement).blur()
+      document.body.style.marginBottom = 1 + Math.random() / 3 + "px"
+    }, 0)
+  }, [container])
+
+  const list = useMemo(
+    () => Object.entries(groupBy(files ?? [], _ => _.tags[0] ?? "")),
+    [files],
+  )
+
+  if (!files) {
+    return null
+  }
+
+  return (
+    <Popup.Container>
+      <StateToggles />
+      <Sections files={list} />
+      <Footer />
+    </Popup.Container>
+  )
+})
diff --git a/src/popup/components/Entry.tsx b/src/popup/components/Entry.tsx
new file mode 100755
index 0000000..b7af6e2
--- /dev/null
+++ b/src/popup/components/Entry.tsx
@@ -0,0 +1,148 @@
+import styled from "@emotion/styled"
+import { memo } from "react"
+import Icon from "@aet/icons/macro"
+import { css } from "@emotion/css"
+import { useTranslation } from "react-i18next"
+import { gql, useMutation } from "~/generated/graphql"
+import { Favicon } from "./Favicon"
+import { FileActions } from "./style"
+import type { Data } from "../App"
+import { LinkButton } from "./LinkButton"
+import { italic } from "~/shared/theme/styled"
+
+interface EntryProps {
+  tag: string
+  files: Data[]
+}
+
+const LeftClickable = styled.div`
+  display: flex;
+  flex-grow: 1;
+  padding-right: 0.1rem;
+  cursor: pointer;
+`
+
+function edit(section: string) {
+  open(`options.html?open=${section}`, "_blank")
+}
+
+const TOGGLE_FILE = gql<"PopupToggleStyle">`
+  mutation PopupToggleStyle($id: ID!, $enabled: Boolean!) {
+    setFile(id: $id, input: { enabled: $enabled }) {
+      id
+      enabled
+    }
+  }
+`
+
+export const Entry = memo<EntryProps>(({ tag, files }) => {
+  const { t } = useTranslation()
+  const [toggleFile] = useMutation(TOGGLE_FILE)
+
+  return (
+    <EntryContainer>
+      <EntryItem>
+        <LeftClickable>
+          {tag ? (
+            <span style={{ fontWeight: 600 }}> {tag}</span>
+          ) : (
+            <span className={italic}> {t("file.untagged")}</span>
+          )}
+        </LeftClickable>
+      </EntryItem>
+      <SubsectionList>
+        {files.map(s => (
+          <Subsection data-id={s.id} key={s.id}>
+            {Boolean(s.icon) && (
+              <Favicon
+                src={s.icon!}
+                className={css`
+                  height: 19px;
+                  margin-top: 2px;
+                  margin-right: 6px !important;
+                  width: 19px;
+                `}
+              />
+            )}
+            <LeftClickable onClick={() => edit(s.id)}>{s.name}</LeftClickable>
+            <FileActions
+              className={css`
+                min-width: 53px;
+              `}
+            >
+              <LinkButton
+                onClick={() => {
+                  void toggleFile({
+                    variables: {
+                      id: s.id,
+                      enabled: !s.enabled,
+                    },
+                  })
+                }}
+              >
+                {s.enabled ? (
+                  <Icon icon="MdCheckBox" />
+                ) : (
+                  <Icon icon="MdCheckBoxOutlineBlank" />
+                )}
+              </LinkButton>
+              <LinkButton onClick={() => edit(s.id)}>
+                <Icon icon="MdEdit" />
+              </LinkButton>
+            </FileActions>
+          </Subsection>
+        ))}
+      </SubsectionList>
+    </EntryContainer>
+  )
+})
+
+const EntryContainer = styled.div`
+  &:first-child {
+    margin-top: -0.3em;
+  }
+  &:last-child {
+    margin-bottom: -0.3em;
+  }
+`
+
+const EntryItem = styled.div`
+  border-radius: 3px;
+  display: flex;
+  margin-left: -9px;
+  margin-right: -4px;
+  padding: 0.3em 3px 0.3em 9px;
+
+  &:hover {
+    background: rgba(206, 222, 235, 0.3);
+  }
+`
+
+const SubsectionList = styled.ol`
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  // list-style-type: hiragana-iroha;
+`
+
+const Subsection = styled.li`
+  border-radius: 3px;
+  color: #444;
+  display: flex;
+  margin-left: -6px;
+  margin-right: calc(-1px - 3px);
+  padding: 0.18em 3px 0.18em 5px;
+
+  &:hover {
+    background: rgba(167, 182, 194, 0.3);
+  }
+  &:first-child {
+    margin-top: -0.15em;
+  }
+  &:last-child {
+  }
+
+  @media (prefers-color-scheme: dark) {
+    color: #999;
+  }
+`
diff --git a/src/popup/components/Favicon.tsx b/src/popup/components/Favicon.tsx
new file mode 100644
index 0000000..cbcad8d
--- /dev/null
+++ b/src/popup/components/Favicon.tsx
@@ -0,0 +1,53 @@
+import styled from "@emotion/styled"
+
+const failed = new Set<string>()
+
+function onError({ currentTarget: img }: { currentTarget: any }) {
+  if (img.getAttribute("src") !== "#") {
+    failed.add(img.getAttribute("src"))
+    img.src =
+      "data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
+    img.style.background = "linear-gradient(#F8F8F8, #EEE)"
+  }
+}
+
+const EmptyIcon = styled.span`
+  background: linear-gradient(#f8f8f8, #eee);
+  border-radius: 3px;
+  border: 1px solid #e9e9e9;
+  display: inline-block;
+  height: 20px;
+  margin-bottom: -5px;
+  margin-left: -2px;
+  margin-right: 7px;
+  width: 20px;
+`
+
+const Favicon = styled.img`
+  display: inline-block;
+  margin-right: 10px;
+`.withComponent((props: JSX.IntrinsicElements["img"]) => (
+  <img
+    className={props.className}
+    src={props.src!}
+    onError={onError}
+    onClick={props.onClick}
+  />
+))
+
+const Icon = ({
+  src,
+  className,
+  onClick,
+}: {
+  src?: string
+  className?: string
+  onClick?(): void
+}) =>
+  src && !failed.has(src) ? (
+    <Favicon className={className} src={src} onClick={onClick} />
+  ) : (
+    <EmptyIcon className={className} data-src={src} onClick={onClick} />
+  )
+
+export { Icon as Favicon }
diff --git a/src/popup/components/Footer.tsx b/src/popup/components/Footer.tsx
new file mode 100644
index 0000000..062bd01
--- /dev/null
+++ b/src/popup/components/Footer.tsx
@@ -0,0 +1,34 @@
+import { memo, useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { Section } from "./style"
+import { usePopupContext } from "../index"
+
+export const Footer: React.FC = memo(() => {
+  const { t } = useTranslation()
+  const { url } = usePopupContext()
+  const findStylesURL = useMemo(() => {
+    const domain = new URL(url).hostname
+    return (
+      "https://userstyles.org/styles/browse?search_terms=" +
+      encodeURIComponent(domain) +
+      "&type=false"
+    )
+  }, [url])
+
+  return (
+    <Section>
+      {findStylesURL && (
+        <>
+          <a href={findStylesURL} target="_blank" rel="noreferrer">
+            {t("popup.findStylesForSite")}
+          </a>
+          <br />
+        </>
+      )}
+      <a href="options.html" target="_blank" rel="noreferrer">
+        {t("popup.openManage")}
+      </a>
+      <br />
+    </Section>
+  )
+})
diff --git a/src/popup/components/LinkButton.tsx b/src/popup/components/LinkButton.tsx
new file mode 100644
index 0000000..02e4d4c
--- /dev/null
+++ b/src/popup/components/LinkButton.tsx
@@ -0,0 +1,31 @@
+import { cx } from "@emotion/css"
+import { useCallback } from "react"
+
+export function LinkButton(props: {
+  disabled?: boolean
+  class?: string
+  children: React.ReactNode
+  onClick(): void
+  style?: React.CSSProperties
+}) {
+  const { disabled, onClick, style } = props
+
+  return (
+    <a
+      href="#"
+      onClick={useCallback(
+        (e: React.SyntheticEvent) => {
+          e.preventDefault()
+          if (!disabled) {
+            onClick()
+          }
+        },
+        [disabled, onClick],
+      )}
+      className={cx(props.class, { disabled })}
+      style={style}
+    >
+      {props.children}
+    </a>
+  )
+}
diff --git a/src/popup/components/Sections.tsx b/src/popup/components/Sections.tsx
new file mode 100755
index 0000000..03026c5
--- /dev/null
+++ b/src/popup/components/Sections.tsx
@@ -0,0 +1,53 @@
+import styled from "@emotion/styled"
+import { useTranslation } from "react-i18next"
+import { memo } from "react"
+import { Entry } from "./Entry"
+import { Section } from "./style"
+import type { Data } from "../App"
+import { usePopupContext } from "../index"
+
+const isApplicableURL = (url: string) => !!url && /^(file|https?|ftps?):/.test(url)
+
+export const Sections = memo<{ files: [string, Data[]][] }>(({ files }) => {
+  const { t } = useTranslation()
+  const { url } = usePopupContext()
+
+  if (!isApplicableURL(url)) {
+    return (
+      <Section>
+        <NotApplicable>{t("popup.unavailableForURL")}</NotApplicable>
+      </Section>
+    )
+  }
+
+  if (!files.length) {
+    return (
+      <Section>
+        <Installed>{t("popup.noStylesForSite")}</Installed>
+      </Section>
+    )
+  }
+
+  return (
+    <Section>
+      <Installed>
+        {files
+          .slice()
+          .sort(([tagA], [tagB]) => tagA.localeCompare(tagB))
+          .map(([tag, sections]) => (
+            <Entry key={tag} tag={tag} files={sections} />
+          ))}
+      </Installed>
+    </Section>
+  )
+})
+
+const NotApplicable = styled.div`
+  color: #777;
+  font-style: italic;
+  margin: 2px 0 0;
+`
+
+const Installed = styled.div`
+  margin-top: 0.2em;
+`
diff --git a/src/popup/components/StateToggles.tsx b/src/popup/components/StateToggles.tsx
new file mode 100644
index 0000000..97edef4
--- /dev/null
+++ b/src/popup/components/StateToggles.tsx
@@ -0,0 +1,55 @@
+import Icon from "@aet/icons/macro"
+import { useTranslation } from "react-i18next"
+import { gql, useMutation, useQuery } from "~/generated/graphql"
+import { LinkButton } from "./LinkButton"
+import { FileActions, Popup, Section } from "./style"
+
+const PREF = gql<"PopupPreferences">`
+  query PopupPreferences {
+    preferences {
+      enabled
+    }
+  }
+`
+
+const TOGGLE = gql<"PopupToggle">`
+  mutation PopupToggle($enabled: Boolean!) {
+    setPreferences(preferences: { enabled: $enabled }) {
+      enabled
+    }
+  }
+`
+
+const PowerButton: React.FC = () => {
+  const { data: { preferences: prefs } = {} } = useQuery(PREF)
+
+  const [togglePower] = useMutation(TOGGLE, {
+    variables: { enabled: !prefs?.enabled },
+  })
+
+  if (!prefs) return null
+
+  return (
+    <LinkButton
+      style={{ color: prefs.enabled ? "#0bb50b" : "#ccc" }}
+      onClick={() => togglePower()}
+    >
+      <Icon icon="FaPowerOff" />
+    </LinkButton>
+  )
+}
+
+export const StateToggles: React.FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <Section>
+      <Popup.Block>
+        <Popup.EntryLeft>{t("preferences.enabled")}</Popup.EntryLeft>
+        <FileActions>
+          <PowerButton />
+        </FileActions>
+      </Popup.Block>
+    </Section>
+  )
+}
diff --git a/src/popup/components/style.ts b/src/popup/components/style.ts
new file mode 100644
index 0000000..73bf7c3
--- /dev/null
+++ b/src/popup/components/style.ts
@@ -0,0 +1,45 @@
+import styled from "@emotion/styled"
+
+export const FileActions = styled.div`
+  font-size: 1.5em;
+  margin-bottom: -0.1em;
+  a {
+    margin-right: 0.25em;
+    &:focus {
+      color: unset;
+    }
+  }
+`
+
+export const Section = styled.div`
+  border-bottom: 1px solid #ddd;
+  line-height: 1.7em;
+  padding: 0.3em 0 0.5em;
+
+  &:first-of-type {
+    padding-top: 0.2em;
+  }
+
+  &:last-of-type {
+    border-bottom: none;
+    padding-bottom: 0.4em;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border-bottom-color: #222;
+  }
+`
+
+export const Popup = {
+  Container: styled.div`
+    padding: 0 3px 0 8px;
+  `,
+  Block: styled.div`
+    display: flex;
+  `,
+  EntryLeft: styled.div`
+    display: flex;
+    flex-grow: 1;
+    padding-right: 0.1rem;
+  `,
+}
diff --git a/src/popup/index.scss b/src/popup/index.scss
new file mode 100755
index 0000000..ecf389b
--- /dev/null
+++ b/src/popup/index.scss
@@ -0,0 +1,47 @@
+@import "../shared/theme/index.css";
+
+body {
+  font-family:
+    "system-ui",
+    Inter,
+    Source Sans CJK JP,
+    YuGothic,
+    sans-serif;
+  font-size: 14px;
+  letter-spacing: -0.1px;
+  line-height: 1.5em;
+  margin: 4px;
+  min-height: 150px;
+  width: 320px;
+}
+a {
+  color: #106ba3;
+  text-decoration: none;
+  transition: 0.2s;
+}
+a:hover {
+  color: #3976d8;
+}
+
+label {
+  font-weight: unset;
+}
+
+[data-type="confirmed"] {
+  color: red;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #202124;
+    color: #f0f0f0;
+  }
+  a,
+  a:hover {
+    color: #6999fb;
+  }
+}
diff --git a/src/popup/index.tsx b/src/popup/index.tsx
new file mode 100644
index 0000000..13c723b
--- /dev/null
+++ b/src/popup/index.tsx
@@ -0,0 +1,39 @@
+import "./index.scss"
+import "reflect-metadata"
+import { createRoot } from "react-dom/client"
+import browser from "webextension-polyfill"
+import { StrictMode, createContext, useContext } from "react"
+import { ApolloProvider } from "@apollo/client"
+import { I18nextProvider } from "react-i18next"
+import { client } from "~/shared/apolloClient"
+import { PopupApp } from "./App"
+import { getI18n } from "~/shared/i18n"
+import { cascade } from "~/shared/cascade"
+
+document.body.dataset.platform = navigator.platform.split(" ")[0].toLowerCase()
+
+const PopupContext = createContext<{ url: string; tabId: number }>(undefined!)
+export const usePopupContext = () => useContext(PopupContext)
+
+const container = document.getElementById("root")!
+
+void browser.tabs
+  .query({ currentWindow: true, active: true })
+  .then(([tab]) => ({ url: tab.url || "", tabId: tab.id ?? -1 }))
+  .catch(() => ({ tabId: -1, url: "" }))
+  .then(async tab => {
+    const i18n = await getI18n()
+
+    const Providers = cascade(
+      <StrictMode />,
+      <ApolloProvider client={client} />,
+      <I18nextProvider i18n={i18n} />,
+      <PopupContext.Provider value={tab} />,
+    )
+
+    createRoot(container).render(
+      <Providers>
+        <PopupApp container={container} />
+      </Providers>,
+    )
+  })
diff --git a/src/reference/App.tsx b/src/reference/App.tsx
new file mode 100644
index 0000000..0743b12
--- /dev/null
+++ b/src/reference/App.tsx
@@ -0,0 +1,264 @@
+import { kebabCase } from "lodash"
+import { useCallback, useEffect, useRef, useState } from "react"
+import { css, cx } from "@emotion/css"
+import { toast } from "react-hot-toast"
+import styled from "@emotion/styled"
+import { parseColor } from "./utils"
+
+import dark from "../../dist/vendor/primer/github-dark.css?string"
+import dark_colorblind from "../../dist/vendor/primer/github-dark_colorblind.css?string"
+import dark_dimmed from "../../dist/vendor/primer/github-dark_dimmed.css?string"
+import dark_high_contrast from "../../dist/vendor/primer/github-dark_high_contrast.css?string"
+import dark_tritanopia from "../../dist/vendor/primer/github-dark_tritanopia.css?string"
+import light from "../../dist/vendor/primer/github-light.css?string"
+import light_colorblind from "../../dist/vendor/primer/github-light_colorblind.css?string"
+import light_high_contrast from "../../dist/vendor/primer/github-light_high_contrast.css?string"
+import light_tritanopia from "../../dist/vendor/primer/github-light_tritanopia.css?string"
+
+const themes = getTheme({
+  dark,
+  dark_colorblind,
+  dark_dimmed,
+  dark_high_contrast,
+  dark_tritanopia,
+  light,
+  light_colorblind,
+  light_high_contrast,
+  light_tritanopia,
+})
+
+export function CSS() {
+  return (
+    <div>
+      {themes.map(([theme, css]) => (
+        <style key={theme} data-theme={theme} dangerouslySetInnerHTML={{ __html: css }} />
+      ))}
+    </div>
+  )
+}
+
+function getTheme(object: { [key: string]: string }) {
+  return Object.entries(object).map(
+    ([key, css]) => [key, css.replace(/^:root/, "div")] as const,
+  )
+}
+
+const colors = {
+  Foreground: ["fg.default", "fg.muted", "fg.subtle", "fg.onEmphasis"],
+  Canvas: ["canvas.default", "canvas.overlay", "canvas.inset", "canvas.subtle"],
+  Border: ["border.default", "border.muted", "border.subtle"],
+  Shadow: ["shadow.small", "shadow.medium", "shadow.large", "shadow.extraLarge"],
+  Neutral: [
+    "neutral.emphasisPlus",
+    "neutral.emphasis",
+    "neutral.muted",
+    "neutral.subtle",
+  ],
+  Accent: ["accent.fg", "accent.emphasis", "accent.muted", "accent.subtle"],
+  Success: ["success.fg", "success.emphasis", "success.muted", "success.subtle"],
+  Attention: [
+    "attention.fg",
+    "attention.emphasis",
+    "attention.muted",
+    "attention.subtle",
+  ],
+  Severe: ["severe.fg", "severe.emphasis", "severe.muted", "severe.subtle"],
+  Danger: ["danger.fg", "danger.emphasis", "danger.muted", "danger.subtle"],
+  Open: ["open.fg", "open.emphasis", "open.muted", "open.subtle"],
+  Closed: ["closed.fg", "closed.emphasis", "closed.muted", "closed.subtle"],
+  Done: ["done.fg", "done.emphasis", "done.muted", "done.subtle"],
+  Sponsors: ["sponsors.fg", "sponsors.emphasis", "sponsors.muted", "sponsors.subtle"],
+}
+
+function Col({ defaultTheme = "light" }: { defaultTheme?: string }) {
+  const [theme, setTheme] = useState(defaultTheme)
+
+  return (
+    <ColContainer
+      data-theme={"github-" + theme}
+      className={theme.includes("dark") ? "dark" : "light"}
+    >
+      <Select value={theme} onChange={e => setTheme(e.target.value)}>
+        {themes.map(([theme]) => (
+          <option key={theme} value={theme}>
+            {theme}
+          </option>
+        ))}
+      </Select>
+      <Table>
+        <tbody>
+          {Object.entries(colors).map(([name, values]) => (
+            <tr key={name}>
+              <td>{name}</td>
+              {values.map(value => (
+                <td key={value}>
+                  <ColorCell theme={theme} name={name} value={value} />
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </Table>
+    </ColContainer>
+  )
+}
+
+function ColorCell({
+  theme,
+  name,
+  value,
+}: {
+  theme: string
+  name: string
+  value: string
+}) {
+  const css = `var(--color-${kebabCase(value)})`
+
+  const onClick = useCallback(async () => {
+    await navigator.clipboard.writeText(css)
+    toast.success("Copied to clipboard")
+  }, [css])
+
+  switch (name) {
+    case "Foreground":
+      return (
+        <CellDiv
+          onClick={onClick}
+          style={{
+            color: css,
+            ...(theme.includes("light") &&
+              value === "fg.onEmphasis" && {
+                backgroundColor: "#333",
+              }),
+          }}
+        >
+          {value}
+          <ColorHex property="color" />
+        </CellDiv>
+      )
+
+    case "Border":
+      return (
+        <CellDiv
+          onClick={onClick}
+          style={{
+            border: `2px solid`,
+            borderColor: css,
+          }}
+        >
+          {value}
+          <ColorHex property="borderColor" />
+        </CellDiv>
+      )
+
+    case "Shadow":
+      return (
+        <CellDiv onClick={onClick} style={{ boxShadow: css }}>
+          {value}
+          <ColorHex property="boxShadow" />
+        </CellDiv>
+      )
+
+    default:
+      return (
+        <CellDiv onClick={onClick} style={{ backgroundColor: css }}>
+          {value}
+          <ColorHex property="backgroundColor" />
+        </CellDiv>
+      )
+  }
+}
+
+function ColorHex({
+  property,
+}: {
+  property: "backgroundColor" | "color" | "borderColor" | "boxShadow"
+}) {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const parent = ref.current?.parentElement
+    if (!parent) return
+
+    const color = getComputedStyle(parent)[property]
+    const { hex, flip } = parseColor(color.slice(color.indexOf("r")))
+    if (property === "backgroundColor") {
+      parent.classList.toggle("flip", flip)
+    }
+    ref.current!.textContent = hex
+  })
+
+  return <HexContainer ref={ref} />
+}
+
+const HexContainer = styled.div`
+  font-family: D2Coding, monospace;
+  font-size: 0.95em;
+  margin-top: 3px;
+`
+
+export function App() {
+  return (
+    <div>
+      <div
+        className={css`
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          grid-gap: 17px;
+        `}
+      >
+        <Col defaultTheme="light" />
+        <Col defaultTheme="dark" />
+      </div>
+    </div>
+  )
+}
+
+const ColContainer = styled.div`
+  border-radius: 5px;
+  padding: 10px;
+  select {
+    border-radius: 4px;
+    font-size: inherit;
+    padding: 2px 3px;
+  }
+  &.light {
+    background-color: #fff;
+    select {
+      border-color: #ccc;
+    }
+  }
+  &.dark {
+    background-color: #13171d;
+    color: #fff;
+    select {
+      background-color: #222;
+      color: #fff;
+    }
+  }
+`
+
+const CellDiv = styled.div`
+  border-radius: 3px;
+  cursor: pointer;
+  padding: 3px 7px;
+  margin: 2px;
+  &:hover {
+    text-decoration: underline;
+  }
+  &.flip {
+    color: #fcfcfc;
+  }
+`
+
+const Select = styled.select`
+  display: block;
+  max-width: 400px;
+  width: 100%;
+  margin: 0 auto;
+  text-align: center;
+`
+
+const Table = styled.table`
+  margin-top: 10px;
+`
diff --git a/src/reference/index.css b/src/reference/index.css
new file mode 100644
index 0000000..0475557
--- /dev/null
+++ b/src/reference/index.css
@@ -0,0 +1,32 @@
+body {
+  background-color: #e5e5e5;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    "Open Sans",
+    "Helvetica Neue",
+    sans-serif;
+  font-size: 15px;
+}
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #292929;
+  }
+}
+@media screen and (min-width: 1600px) {
+  #root {
+    max-width: 1440px;
+    margin: 40px auto;
+  }
+}
+input,
+select,
+button {
+  font-family: inherit;
+}
diff --git a/src/reference/index.tsx b/src/reference/index.tsx
new file mode 100644
index 0000000..ec41425
--- /dev/null
+++ b/src/reference/index.tsx
@@ -0,0 +1,15 @@
+import "./index.css"
+import { createRoot } from "react-dom/client"
+import { Toaster } from "react-hot-toast"
+import { App, CSS } from "./App"
+
+const app = document.getElementById("root")!
+const root = createRoot(app)
+
+root.render(
+  <>
+    <CSS />
+    <App />
+    <Toaster />
+  </>,
+)
diff --git a/src/reference/monaco-workbench.css b/src/reference/monaco-workbench.css
new file mode 100644
index 0000000..1c3bb9a
--- /dev/null
+++ b/src/reference/monaco-workbench.css
@@ -0,0 +1,2607 @@
+.monaco-workbench.light {
+  --foreground: #444d56;
+  --disabledForeground: rgba(97, 97, 97, 0.5);
+  --errorForeground: #cb2431;
+  --descriptionForeground: #6a737d;
+  --icon-foreground: #424242;
+  --focusBorder: #2188ff;
+  --textSeparator-foreground: #d1d5da;
+  --textLink-foreground: #0366d6;
+  --textLink-activeForeground: #005cc5;
+  --textPreformat-foreground: #586069;
+  --textBlockQuote-background: #fafbfc;
+  --textBlockQuote-border: #e1e4e8;
+  --textCodeBlock-background: #f6f8fa;
+  --widget-shadow: rgba(0, 0, 0, 0.16);
+  --input-background: #fafbfc;
+  --input-foreground: #2f363d;
+  --input-border: #e1e4e8;
+  --inputOption-activeBorder: #007acc;
+  --inputOption-hoverBackground: rgba(184, 184, 184, 0.31);
+  --inputOption-activeBackground: rgba(33, 136, 255, 0.2);
+  --inputOption-activeForeground: #000000;
+  --input-placeholderForeground: #959da5;
+  --inputValidation-infoBackground: #d6ecf2;
+  --inputValidation-infoBorder: #007acc;
+  --inputValidation-warningBackground: #f6f5d2;
+  --inputValidation-warningBorder: #b89500;
+  --inputValidation-errorBackground: #f2dede;
+  --inputValidation-errorBorder: #be1100;
+  --dropdown-background: #fafbfc;
+  --dropdown-listBackground: #ffffff;
+  --dropdown-foreground: #2f363d;
+  --dropdown-border: #e1e4e8;
+  --button-foreground: #ffffff;
+  --button-separator: rgba(255, 255, 255, 0.4);
+  --button-background: #159739;
+  --button-hoverBackground: #138934;
+  --button-secondaryForeground: #1b1f23;
+  --button-secondaryBackground: #e1e4e8;
+  --button-secondaryHoverBackground: #d1d5da;
+  --badge-background: #dbedff;
+  --badge-foreground: #005cc5;
+  --scrollbar-shadow: rgba(106, 115, 125, 0.2);
+  --scrollbarSlider-background: rgba(149, 157, 165, 0.2);
+  --scrollbarSlider-hoverBackground: rgba(149, 157, 165, 0.27);
+  --scrollbarSlider-activeBackground: rgba(149, 157, 165, 0.53);
+  --progressBar-background: #2188ff;
+  --editorError-foreground: #cb2431;
+  --editorWarning-foreground: #f9c513;
+  --editorInfo-foreground: #1a85ff;
+  --editorHint-foreground: #6c6c6c;
+  --sash-hoverBorder: #2188ff;
+  --editor-background: #ffffff;
+  --editor-foreground: #24292e;
+  --editorStickyScroll-background: #ffffff;
+  --editorStickyScrollHover-background: #f0f0f0;
+  --editorWidget-background: #f6f8fa;
+  --editorWidget-foreground: #444d56;
+  --editorWidget-border: #c8c8c8;
+  --quickInput-background: #fafbfc;
+  --quickInput-foreground: #2f363d;
+  --quickInputTitle-background: rgba(0, 0, 0, 0.06);
+  --pickerGroup-foreground: #2f363d;
+  --pickerGroup-border: #e1e4e8;
+  --keybindingLabel-background: rgba(221, 221, 221, 0.4);
+  --keybindingLabel-foreground: #555555;
+  --keybindingLabel-border: rgba(204, 204, 204, 0.4);
+  --keybindingLabel-bottomBorder: rgba(187, 187, 187, 0.4);
+  --editor-selectionBackground: rgba(3, 102, 214, 0.14);
+  --editor-inactiveSelectionBackground: rgba(3, 102, 214, 0.07);
+  --editor-selectionHighlightBackground: rgba(52, 208, 88, 0.25);
+  --editor-selectionHighlightBorder: rgba(52, 208, 88, 0);
+  --editor-findMatchBackground: #ffdf5d;
+  --editor-findMatchHighlightBackground: rgba(255, 223, 93, 0.4);
+  --editor-findRangeHighlightBackground: rgba(180, 180, 180, 0.3);
+  --searchEditor-findMatchBackground: rgba(255, 223, 93, 0.26);
+  --editor-hoverHighlightBackground: rgba(173, 214, 255, 0.15);
+  --editorHoverWidget-background: #f6f8fa;
+  --editorHoverWidget-foreground: #444d56;
+  --editorHoverWidget-border: #c8c8c8;
+  --editorHoverWidget-statusBarBackground: #e6ecf1;
+  --editorLink-activeForeground: #0000ff;
+  --editorInlayHint-foreground: #005cc5;
+  --editorInlayHint-background: rgba(219, 237, 255, 0.6);
+  --editorInlayHint-typeForeground: #005cc5;
+  --editorInlayHint-typeBackground: rgba(219, 237, 255, 0.6);
+  --editorInlayHint-parameterForeground: #005cc5;
+  --editorInlayHint-parameterBackground: rgba(219, 237, 255, 0.6);
+  --editorLightBulb-foreground: #ddb100;
+  --editorLightBulbAutoFix-foreground: #007acc;
+  --diffEditor-insertedTextBackground: rgba(52, 208, 88, 0.13);
+  --diffEditor-removedTextBackground: rgba(215, 58, 73, 0.13);
+  --diffEditor-insertedLineBackground: rgba(155, 185, 85, 0.2);
+  --diffEditor-removedLineBackground: rgba(255, 0, 0, 0.2);
+  --diffEditor-diagonalFill: rgba(34, 34, 34, 0.2);
+  --list-focusBackground: #cce5ff;
+  --list-focusOutline: #2188ff;
+  --list-activeSelectionBackground: #e2e5e9;
+  --list-activeSelectionForeground: #2f363d;
+  --list-inactiveSelectionBackground: #e8eaed;
+  --list-inactiveSelectionForeground: #2f363d;
+  --list-inactiveFocusBackground: #dbedff;
+  --list-hoverBackground: #ebf0f4;
+  --list-hoverForeground: #2f363d;
+  --list-dropBackground: #d6ebff;
+  --list-highlightForeground: #0066bf;
+  --list-focusHighlightForeground: #0066bf;
+  --list-invalidItemForeground: #b89500;
+  --list-errorForeground: #b01011;
+  --list-warningForeground: #855f00;
+  --listFilterWidget-background: #f6f8fa;
+  --listFilterWidget-outline: rgba(0, 0, 0, 0);
+  --listFilterWidget-noMatchesOutline: #be1100;
+  --listFilterWidget-shadow: rgba(0, 0, 0, 0.16);
+  --list-filterMatchBackground: rgba(255, 223, 93, 0.4);
+  --tree-indentGuidesStroke: #e1e4e8;
+  --tree-inactiveIndentGuidesStroke: rgba(225, 228, 232, 0.4);
+  --tree-tableColumnsBorder: rgba(97, 97, 97, 0.13);
+  --tree-tableOddRowsBackground: rgba(68, 77, 86, 0.04);
+  --list-deemphasizedForeground: #8e8e90;
+  --checkbox-background: #fafbfc;
+  --checkbox-selectBackground: #f6f8fa;
+  --checkbox-foreground: #2f363d;
+  --checkbox-border: #d1d5da;
+  --checkbox-selectBorder: #f6f8fa;
+  --quickInputList-focusForeground: #2f363d;
+  --quickInputList-focusBackground: #e2e5e9;
+  --menu-foreground: #2f363d;
+  --menu-background: #fafbfc;
+  --menu-selectionForeground: #2f363d;
+  --menu-selectionBackground: #e2e5e9;
+  --menu-separatorBackground: #d4d4d4;
+  --toolbar-hoverBackground: rgba(184, 184, 184, 0.31);
+  --toolbar-activeBackground: rgba(166, 166, 166, 0.31);
+  --editor-snippetTabstopHighlightBackground: rgba(10, 50, 100, 0.2);
+  --editor-snippetFinalTabstopHighlightBorder: rgba(10, 50, 100, 0.5);
+  --breadcrumb-foreground: #6a737d;
+  --breadcrumb-background: #ffffff;
+  --breadcrumb-focusForeground: #2f363d;
+  --breadcrumb-activeSelectionForeground: #586069;
+  --breadcrumbPicker-background: #fafbfc;
+  --merge-currentHeaderBackground: rgba(64, 200, 174, 0.5);
+  --merge-currentContentBackground: rgba(64, 200, 174, 0.2);
+  --merge-incomingHeaderBackground: rgba(64, 166, 255, 0.5);
+  --merge-incomingContentBackground: rgba(64, 166, 255, 0.2);
+  --merge-commonHeaderBackground: rgba(96, 96, 96, 0.4);
+  --merge-commonContentBackground: rgba(96, 96, 96, 0.16);
+  --editorOverviewRuler-currentContentForeground: rgba(64, 200, 174, 0.5);
+  --editorOverviewRuler-incomingContentForeground: rgba(64, 166, 255, 0.5);
+  --editorOverviewRuler-commonContentForeground: rgba(96, 96, 96, 0.4);
+  --editorOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+  --editorOverviewRuler-selectionHighlightForeground: rgba(160, 160, 160, 0.8);
+  --minimap-findMatchHighlight: #d18616;
+  --minimap-selectionOccurrenceHighlight: #c9c9c9;
+  --minimap-selectionHighlight: #add6ff;
+  --minimap-errorHighlight: rgba(255, 18, 18, 0.7);
+  --minimap-warningHighlight: #f9c513;
+  --minimap-foregroundOpacity: #000000;
+  --minimapSlider-background: rgba(149, 157, 165, 0.1);
+  --minimapSlider-hoverBackground: rgba(149, 157, 165, 0.13);
+  --minimapSlider-activeBackground: rgba(149, 157, 165, 0.27);
+  --problemsErrorIcon-foreground: #cb2431;
+  --problemsWarningIcon-foreground: #f9c513;
+  --problemsInfoIcon-foreground: #1a85ff;
+  --charts-foreground: #444d56;
+  --charts-lines: rgba(68, 77, 86, 0.5);
+  --charts-red: #cb2431;
+  --charts-blue: #1a85ff;
+  --charts-yellow: #f9c513;
+  --charts-orange: #d18616;
+  --charts-green: #388a34;
+  --charts-purple: #652d90;
+  --symbolIcon-arrayForeground: #444d56;
+  --symbolIcon-booleanForeground: #444d56;
+  --symbolIcon-classForeground: #d67e00;
+  --symbolIcon-colorForeground: #444d56;
+  --symbolIcon-constantForeground: #444d56;
+  --symbolIcon-constructorForeground: #652d90;
+  --symbolIcon-enumeratorForeground: #d67e00;
+  --symbolIcon-enumeratorMemberForeground: #007acc;
+  --symbolIcon-eventForeground: #d67e00;
+  --symbolIcon-fieldForeground: #007acc;
+  --symbolIcon-fileForeground: #444d56;
+  --symbolIcon-folderForeground: #444d56;
+  --symbolIcon-functionForeground: #652d90;
+  --symbolIcon-interfaceForeground: #007acc;
+  --symbolIcon-keyForeground: #444d56;
+  --symbolIcon-keywordForeground: #444d56;
+  --symbolIcon-methodForeground: #652d90;
+  --symbolIcon-moduleForeground: #444d56;
+  --symbolIcon-namespaceForeground: #444d56;
+  --symbolIcon-nullForeground: #444d56;
+  --symbolIcon-numberForeground: #444d56;
+  --symbolIcon-objectForeground: #444d56;
+  --symbolIcon-operatorForeground: #444d56;
+  --symbolIcon-packageForeground: #444d56;
+  --symbolIcon-propertyForeground: #444d56;
+  --symbolIcon-referenceForeground: #444d56;
+  --symbolIcon-snippetForeground: #444d56;
+  --symbolIcon-stringForeground: #444d56;
+  --symbolIcon-structForeground: #444d56;
+  --symbolIcon-textForeground: #444d56;
+  --symbolIcon-typeParameterForeground: #444d56;
+  --symbolIcon-unitForeground: #444d56;
+  --symbolIcon-variableForeground: #007acc;
+  --editorHoverWidget-highlightForeground: #0066bf;
+  --editor-lineHighlightBackground: #f6f8fa;
+  --editor-lineHighlightBorder: #eeeeee;
+  --editor-rangeHighlightBackground: rgba(253, 255, 0, 0.2);
+  --editor-symbolHighlightBackground: rgba(255, 223, 93, 0.4);
+  --editorCursor-foreground: #044289;
+  --editorWhitespace-foreground: #d1d5da;
+  --editorIndentGuide-background: #eff2f6;
+  --editorIndentGuide-activeBackground: #d7dbe0;
+  --editorLineNumber-foreground: rgba(27, 31, 35, 0.3);
+  --editorActiveLineNumber-foreground: #0b216f;
+  --editorLineNumber-activeForeground: #24292e;
+  --editorRuler-foreground: #d3d3d3;
+  --editorCodeLens-foreground: #919191;
+  --editorBracketMatch-background: rgba(52, 208, 88, 0.25);
+  --editorBracketMatch-border: rgba(52, 208, 88, 0);
+  --editorOverviewRuler-border: #ffffff;
+  --editorGutter-background: #ffffff;
+  --editorUnnecessaryCode-opacity: rgba(0, 0, 0, 0.47);
+  --editorGhostText-foreground: rgba(0, 0, 0, 0.47);
+  --editorOverviewRuler-rangeHighlightForeground: rgba(0, 122, 204, 0.6);
+  --editorOverviewRuler-errorForeground: rgba(255, 18, 18, 0.7);
+  --editorOverviewRuler-warningForeground: #f9c513;
+  --editorOverviewRuler-infoForeground: #1a85ff;
+  --editorBracketHighlight-foreground1: #005cc5;
+  --editorBracketHighlight-foreground2: #e36209;
+  --editorBracketHighlight-foreground3: #5a32a3;
+  --editorBracketHighlight-foreground4: #005cc5;
+  --editorBracketHighlight-foreground5: #e36209;
+  --editorBracketHighlight-foreground6: #5a32a3;
+  --editorBracketHighlight-unexpectedBracket-foreground: rgba(255, 18, 18, 0.8);
+  --editorBracketPairGuide-background1: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-background2: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-background3: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-background4: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-background5: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-background6: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-activeBackground1: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-activeBackground2: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-activeBackground3: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-activeBackground4: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-activeBackground5: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-activeBackground6: rgba(0, 0, 0, 0);
+  --editorUnicodeHighlight-border: #cea33d;
+  --editorUnicodeHighlight-background: rgba(206, 163, 61, 0.08);
+  --editorOverviewRuler-bracketMatchForeground: #a0a0a0;
+  --editor-foldBackground: rgba(209, 213, 218, 0.07);
+  --editorGutter-foldingControlForeground: #424242;
+  --editor-linkedEditingBackground: rgba(3, 102, 214, 0.07);
+  --editor-wordHighlightBackground: rgba(52, 208, 88, 0);
+  --editor-wordHighlightStrongBackground: rgba(52, 208, 88, 0);
+  --editor-wordHighlightTextBackground: rgba(52, 208, 88, 0);
+  --editor-wordHighlightBorder: rgba(36, 148, 62, 0.6);
+  --editor-wordHighlightStrongBorder: rgba(36, 148, 62, 0.31);
+  --editor-wordHighlightTextBorder: rgba(36, 148, 62, 0.6);
+  --editorOverviewRuler-wordHighlightForeground: rgba(160, 160, 160, 0.8);
+  --editorOverviewRuler-wordHighlightStrongForeground: rgba(192, 160, 192, 0.8);
+  --editorOverviewRuler-wordHighlightTextForeground: rgba(160, 160, 160, 0.8);
+  --peekViewTitle-background: rgba(26, 133, 255, 0.1);
+  --peekViewTitleLabel-foreground: #000000;
+  --peekViewTitleDescription-foreground: #616161;
+  --peekView-border: #1a85ff;
+  --peekViewResult-background: #f3f3f3;
+  --peekViewResult-lineForeground: #646465;
+  --peekViewResult-fileForeground: #1e1e1e;
+  --peekViewResult-selectionBackground: rgba(51, 153, 255, 0.2);
+  --peekViewResult-selectionForeground: #6c6c6c;
+  --peekViewEditor-background: #f2f8fc;
+  --peekViewEditorGutter-background: #f2f8fc;
+  --peekViewEditorStickyScroll-background: #f2f8fc;
+  --peekViewResult-matchHighlightBackground: rgba(234, 92, 0, 0.3);
+  --peekViewEditor-matchHighlightBackground: rgba(245, 216, 2, 0.87);
+  --editorMarkerNavigationError-background: #cb2431;
+  --editorMarkerNavigationError-headerBackground: rgba(203, 36, 49, 0.1);
+  --editorMarkerNavigationWarning-background: #f9c513;
+  --editorMarkerNavigationWarning-headerBackground: rgba(249, 197, 19, 0.1);
+  --editorMarkerNavigationInfo-background: #1a85ff;
+  --editorMarkerNavigationInfo-headerBackground: rgba(26, 133, 255, 0.1);
+  --editorMarkerNavigation-background: #ffffff;
+  --editorSuggestWidget-background: #f6f8fa;
+  --editorSuggestWidget-border: #c8c8c8;
+  --editorSuggestWidget-foreground: #24292e;
+  --editorSuggestWidget-selectedForeground: #2f363d;
+  --editorSuggestWidget-selectedBackground: #e2e5e9;
+  --editorSuggestWidget-highlightForeground: #0066bf;
+  --editorSuggestWidget-focusHighlightForeground: #0066bf;
+  --editorSuggestWidgetStatus-foreground: rgba(36, 41, 46, 0.5);
+  --tab-activeBackground: #ffffff;
+  --tab-unfocusedActiveBackground: #ffffff;
+  --tab-inactiveBackground: #f6f8fa;
+  --tab-unfocusedInactiveBackground: #f6f8fa;
+  --tab-activeForeground: #2f363d;
+  --tab-inactiveForeground: #6a737d;
+  --tab-unfocusedActiveForeground: rgba(47, 54, 61, 0.7);
+  --tab-unfocusedInactiveForeground: rgba(106, 115, 125, 0.5);
+  --tab-hoverBackground: #ffffff;
+  --tab-unfocusedHoverBackground: #ffffff;
+  --tab-border: #e1e4e8;
+  --tab-lastPinnedBorder: #e1e4e8;
+  --tab-activeBorder: #ffffff;
+  --tab-unfocusedActiveBorder: #ffffff;
+  --tab-activeBorderTop: #f9826c;
+  --tab-unfocusedActiveBorderTop: #e1e4e8;
+  --tab-activeModifiedBorder: #33aaee;
+  --tab-inactiveModifiedBorder: rgba(51, 170, 238, 0.5);
+  --tab-unfocusedActiveModifiedBorder: rgba(51, 170, 238, 0.7);
+  --tab-unfocusedInactiveModifiedBorder: rgba(51, 170, 238, 0.25);
+  --editorPane-background: #ffffff;
+  --editorGroupHeader-tabsBackground: #f6f8fa;
+  --editorGroupHeader-tabsBorder: #e1e4e8;
+  --editorGroupHeader-noTabsBackground: #ffffff;
+  --editorGroup-border: #e1e4e8;
+  --editorGroup-dropBackground: rgba(38, 119, 203, 0.18);
+  --editorGroup-dropIntoPromptForeground: #444d56;
+  --editorGroup-dropIntoPromptBackground: #f6f8fa;
+  --sideBySideEditor-horizontalBorder: #e1e4e8;
+  --sideBySideEditor-verticalBorder: #e1e4e8;
+  --panel-background: #f6f8fa;
+  --panel-border: #e1e4e8;
+  --panelTitle-activeForeground: #2f363d;
+  --panelTitle-inactiveForeground: #6a737d;
+  --panelTitle-activeBorder: #f9826c;
+  --panelInput-border: #e1e4e8;
+  --panel-dropBorder: #2f363d;
+  --panelSection-dropBackground: rgba(38, 119, 203, 0.18);
+  --panelSectionHeader-background: rgba(128, 128, 128, 0.2);
+  --panelSection-border: #e1e4e8;
+  --banner-background: #949fae;
+  --banner-foreground: #2f363d;
+  --banner-iconForeground: #1a85ff;
+  --statusBar-foreground: #586069;
+  --statusBar-noFolderForeground: #586069;
+  --statusBar-background: #ffffff;
+  --statusBar-noFolderBackground: #ffffff;
+  --statusBar-border: #e1e4e8;
+  --statusBar-focusBorder: #586069;
+  --statusBar-noFolderBorder: #e1e4e8;
+  --statusBarItem-activeBackground: rgba(255, 255, 255, 0.18);
+  --statusBarItem-focusBorder: #586069;
+  --statusBarItem-hoverBackground: rgba(255, 255, 255, 0.12);
+  --statusBarItem-compactHoverBackground: rgba(255, 255, 255, 0.2);
+  --statusBarItem-prominentForeground: #586069;
+  --statusBarItem-prominentBackground: #e8eaed;
+  --statusBarItem-prominentHoverBackground: rgba(0, 0, 0, 0.3);
+  --statusBarItem-errorBackground: #7a161e;
+  --statusBarItem-errorForeground: #ffffff;
+  --statusBarItem-warningBackground: #9d7904;
+  --statusBarItem-warningForeground: #ffffff;
+  --activityBar-background: #ffffff;
+  --activityBar-foreground: #2f363d;
+  --activityBar-inactiveForeground: #959da5;
+  --activityBar-border: #e1e4e8;
+  --activityBar-activeBorder: #f9826c;
+  --activityBar-dropBorder: #2f363d;
+  --activityBarBadge-background: #2188ff;
+  --activityBarBadge-foreground: #ffffff;
+  --profileBadge-background: #c4c4c4;
+  --profileBadge-foreground: #333333;
+  --statusBarItem-remoteBackground: #ffffff;
+  --statusBarItem-remoteForeground: #586069;
+  --extensionBadge-remoteBackground: #2188ff;
+  --extensionBadge-remoteForeground: #ffffff;
+  --sideBar-background: #f6f8fa;
+  --sideBar-foreground: #586069;
+  --sideBar-border: #e1e4e8;
+  --sideBarTitle-foreground: #2f363d;
+  --sideBar-dropBackground: rgba(38, 119, 203, 0.18);
+  --sideBarSectionHeader-background: #f6f8fa;
+  --sideBarSectionHeader-foreground: #2f363d;
+  --sideBarSectionHeader-border: #e1e4e8;
+  --titleBar-activeForeground: #2f363d;
+  --titleBar-inactiveForeground: #6a737d;
+  --titleBar-activeBackground: #ffffff;
+  --titleBar-inactiveBackground: #f6f8fa;
+  --titleBar-border: #e1e4e8;
+  --menubar-selectionForeground: #2f363d;
+  --menubar-selectionBackground: rgba(184, 184, 184, 0.31);
+  --notifications-foreground: #2f363d;
+  --notifications-background: #fafbfc;
+  --notificationLink-foreground: #0366d6;
+  --notificationCenterHeader-foreground: #6a737d;
+  --notificationCenterHeader-background: #e1e4e8;
+  --notifications-border: #e1e4e8;
+  --notificationsErrorIcon-foreground: #d73a49;
+  --notificationsWarningIcon-foreground: #e36209;
+  --notificationsInfoIcon-foreground: #005cc5;
+  --commandCenter-foreground: #2f363d;
+  --commandCenter-activeForeground: #2f363d;
+  --commandCenter-inactiveForeground: #6a737d;
+  --commandCenter-background: rgba(0, 0, 0, 0.05);
+  --commandCenter-activeBackground: rgba(0, 0, 0, 0.08);
+  --commandCenter-border: rgba(47, 54, 61, 0.2);
+  --commandCenter-activeBorder: rgba(47, 54, 61, 0.3);
+  --commandCenter-inactiveBorder: rgba(106, 115, 125, 0.25);
+  --editorCommentsWidget-resolvedBorder: rgba(97, 97, 97, 0.5);
+  --editorCommentsWidget-unresolvedBorder: #1a85ff;
+  --editorCommentsWidget-rangeBackground: rgba(26, 133, 255, 0.1);
+  --editorCommentsWidget-rangeBorder: rgba(26, 133, 255, 0.4);
+  --editorCommentsWidget-rangeActiveBackground: rgba(26, 133, 255, 0.1);
+  --editorCommentsWidget-rangeActiveBorder: rgba(26, 133, 255, 0.4);
+  --editorGutter-commentRangeForeground: #dbdee3;
+  --editorGutter-commentGlyphForground: #24292e;
+  --debugToolBar-background: #ffffff;
+  --debugIcon-startForeground: #388a34;
+  --editor-stackFrameHighlightBackground: rgba(255, 211, 61, 0.2);
+  --editor-focusedStackFrameHighlightBackground: rgba(40, 167, 69, 0.14);
+  --mergeEditor-change-background: rgba(155, 185, 85, 0.2);
+  --mergeEditor-change-word-background: rgba(156, 204, 44, 0.4);
+  --mergeEditor-changeBase-background: #ffcccc;
+  --mergeEditor-changeBase-word-background: #ffa3a3;
+  --mergeEditor-conflict-unhandledUnfocused-border: #ffa600;
+  --mergeEditor-conflict-unhandledFocused-border: #ffa600;
+  --mergeEditor-conflict-handledUnfocused-border: rgba(134, 134, 134, 0.29);
+  --mergeEditor-conflict-handledFocused-border: rgba(193, 193, 193, 0.8);
+  --mergeEditor-conflict-handled-minimapOverViewRuler: rgba(173, 172, 168, 0.93);
+  --mergeEditor-conflict-unhandled-minimapOverViewRuler: #fcba03;
+  --mergeEditor-conflictingLines-background: rgba(255, 234, 0, 0.28);
+  --mergeEditor-conflict-input1-background: rgba(64, 200, 174, 0.2);
+  --mergeEditor-conflict-input2-background: rgba(64, 166, 255, 0.2);
+  --settings-headerForeground: #2f363d;
+  --settings-settingsHeaderHoverForeground: rgba(47, 54, 61, 0.7);
+  --settings-modifiedItemIndicator: #2188ff;
+  --settings-headerBorder: #e1e4e8;
+  --settings-sashBorder: #e1e4e8;
+  --settings-dropdownBackground: #fafbfc;
+  --settings-dropdownForeground: #2f363d;
+  --settings-dropdownBorder: #e1e4e8;
+  --settings-dropdownListBorder: #c8c8c8;
+  --settings-checkboxBackground: #fafbfc;
+  --settings-checkboxForeground: #2f363d;
+  --settings-checkboxBorder: #d1d5da;
+  --settings-textInputBackground: #fafbfc;
+  --settings-textInputForeground: #2f363d;
+  --settings-textInputBorder: #e1e4e8;
+  --settings-numberInputBackground: #fafbfc;
+  --settings-numberInputForeground: #2f363d;
+  --settings-numberInputBorder: #e1e4e8;
+  --settings-focusedRowBackground: rgba(235, 240, 244, 0.6);
+  --settings-rowHoverBackground: rgba(235, 240, 244, 0.3);
+  --settings-focusedRowBorder: #2188ff;
+  --terminal-foreground: #586069;
+  --terminalCursor-foreground: #005cc5;
+  --terminalCursor-background: #d1d5da;
+  --terminal-selectionBackground: rgba(3, 102, 214, 0.14);
+  --terminal-inactiveSelectionBackground: rgba(3, 102, 214, 0.07);
+  --terminalCommandDecoration-defaultBackground: rgba(0, 0, 0, 0.25);
+  --terminalCommandDecoration-successBackground: #2090d3;
+  --terminalCommandDecoration-errorBackground: #e51400;
+  --terminalOverviewRuler-cursorForeground: rgba(160, 160, 160, 0.8);
+  --terminal-border: #e1e4e8;
+  --terminal-findMatchBackground: #ffdf5d;
+  --terminal-findMatchHighlightBackground: rgba(255, 223, 93, 0.4);
+  --terminalOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+  --terminal-dropBackground: rgba(38, 119, 203, 0.18);
+  --terminal-tab-activeBorder: #f9826c;
+  --testing-iconFailed: #f14c4c;
+  --testing-iconErrored: #f14c4c;
+  --testing-iconPassed: #73c991;
+  --testing-runAction: #73c991;
+  --testing-iconQueued: #cca700;
+  --testing-iconUnset: #848484;
+  --testing-iconSkipped: #848484;
+  --testing-peekBorder: #cb2431;
+  --testing-peekHeaderBackground: rgba(203, 36, 49, 0.1);
+  --testing-message-error-decorationForeground: #cb2431;
+  --testing-message-error-lineBackground: rgba(255, 0, 0, 0.2);
+  --testing-message-info-decorationForeground: rgba(36, 41, 46, 0.5);
+  --welcomePage-tileBackground: #f6f8fa;
+  --welcomePage-tileHoverBackground: #d6dfe8;
+  --welcomePage-tileBorder: rgba(0, 0, 0, 0.1);
+  --welcomePage-progress-background: #fafbfc;
+  --welcomePage-progress-foreground: #0366d6;
+  --walkthrough-stepTitle-foreground: #000000;
+  --welcomeOverlay-background: rgba(255, 255, 255, 0.52);
+  --debugExceptionWidget-border: #a31515;
+  --debugExceptionWidget-background: #f1dfde;
+  --ports-iconRunningProcessForeground: #ffffff;
+  --statusBar-debuggingBackground: #f9826c;
+  --statusBar-debuggingForeground: #ffffff;
+  --statusBar-debuggingBorder: #e1e4e8;
+  --editor-inlineValuesForeground: rgba(0, 0, 0, 0.5);
+  --editor-inlineValuesBackground: rgba(255, 200, 0, 0.2);
+  --editorGutter-modifiedBackground: #2188ff;
+  --editorGutter-addedBackground: #28a745;
+  --editorGutter-deletedBackground: #d73a49;
+  --minimapGutter-modifiedBackground: #2188ff;
+  --minimapGutter-addedBackground: #28a745;
+  --minimapGutter-deletedBackground: #d73a49;
+  --editorOverviewRuler-modifiedForeground: rgba(33, 136, 255, 0.6);
+  --editorOverviewRuler-addedForeground: rgba(40, 167, 69, 0.6);
+  --editorOverviewRuler-deletedForeground: rgba(215, 58, 73, 0.6);
+  --debugIcon-breakpointForeground: #e51400;
+  --debugIcon-breakpointDisabledForeground: #848484;
+  --debugIcon-breakpointUnverifiedForeground: #848484;
+  --debugIcon-breakpointCurrentStackframeForeground: #be8700;
+  --debugIcon-breakpointStackframeForeground: #89d185;
+  --notebook-cellBorderColor: #e8eaed;
+  --notebook-focusedEditorBorder: #2188ff;
+  --notebookStatusSuccessIcon-foreground: #388a34;
+  --notebookEditorOverviewRuler-runningCellForeground: #388a34;
+  --notebookStatusErrorIcon-foreground: #cb2431;
+  --notebookStatusRunningIcon-foreground: #444d56;
+  --notebook-cellToolbarSeparator: rgba(128, 128, 128, 0.35);
+  --notebook-selectedCellBackground: #e8eaed;
+  --notebook-selectedCellBorder: #e8eaed;
+  --notebook-focusedCellBorder: #2188ff;
+  --notebook-inactiveFocusedCellBorder: #e8eaed;
+  --notebook-cellStatusBarItemHoverBackground: rgba(0, 0, 0, 0.08);
+  --notebook-cellInsertionIndicator: #2188ff;
+  --notebookScrollbarSlider-background: rgba(149, 157, 165, 0.2);
+  --notebookScrollbarSlider-hoverBackground: rgba(149, 157, 165, 0.27);
+  --notebookScrollbarSlider-activeBackground: rgba(149, 157, 165, 0.53);
+  --notebook-symbolHighlightBackground: rgba(253, 255, 0, 0.2);
+  --notebook-cellEditorBackground: #f6f8fa;
+  --notebook-editorBackground: #ffffff;
+  --keybindingTable-headerBackground: rgba(68, 77, 86, 0.04);
+  --keybindingTable-rowsBackground: rgba(68, 77, 86, 0.04);
+  --scm-providerBorder: #c8c8c8;
+  --searchEditor-textInputBorder: #e1e4e8;
+  --debugTokenExpression-name: #9b46b0;
+  --debugTokenExpression-value: rgba(108, 108, 108, 0.8);
+  --debugTokenExpression-string: #a31515;
+  --debugTokenExpression-boolean: #0000ff;
+  --debugTokenExpression-number: #098658;
+  --debugTokenExpression-error: #e51400;
+  --debugView-exceptionLabelForeground: #ffffff;
+  --debugView-exceptionLabelBackground: #a31515;
+  --debugView-stateLabelForeground: #444d56;
+  --debugView-stateLabelBackground: rgba(136, 136, 136, 0.27);
+  --debugView-valueChangedHighlight: #569cd6;
+  --debugConsole-infoForeground: #1a85ff;
+  --debugConsole-warningForeground: #f9c513;
+  --debugConsole-errorForeground: #cb2431;
+  --debugConsole-sourceForeground: #444d56;
+  --debugConsoleInputIcon-foreground: #444d56;
+  --debugIcon-pauseForeground: #007acc;
+  --debugIcon-stopForeground: #a1260d;
+  --debugIcon-disconnectForeground: #a1260d;
+  --debugIcon-restartForeground: #388a34;
+  --debugIcon-stepOverForeground: #007acc;
+  --debugIcon-stepIntoForeground: #007acc;
+  --debugIcon-stepOutForeground: #007acc;
+  --debugIcon-continueForeground: #007acc;
+  --debugIcon-stepBackForeground: #007acc;
+  --extensionButton-background: #159739;
+  --extensionButton-foreground: #ffffff;
+  --extensionButton-hoverBackground: #138934;
+  --extensionButton-separator: rgba(255, 255, 255, 0.4);
+  --extensionButton-prominentBackground: #159739;
+  --extensionButton-prominentForeground: #ffffff;
+  --extensionButton-prominentHoverBackground: #138934;
+  --extensionIcon-starForeground: #df6100;
+  --extensionIcon-verifiedForeground: #0366d6;
+  --extensionIcon-preReleaseForeground: #1d9271;
+  --extensionIcon-sponsorForeground: #b51e78;
+  --terminal-ansiBlack: #24292e;
+  --terminal-ansiRed: #d73a49;
+  --terminal-ansiGreen: #28a745;
+  --terminal-ansiYellow: #dbab09;
+  --terminal-ansiBlue: #0366d6;
+  --terminal-ansiMagenta: #5a32a3;
+  --terminal-ansiCyan: #1b7c83;
+  --terminal-ansiWhite: #6a737d;
+  --terminal-ansiBrightBlack: #959da5;
+  --terminal-ansiBrightRed: #cb2431;
+  --terminal-ansiBrightGreen: #22863a;
+  --terminal-ansiBrightYellow: #b08800;
+  --terminal-ansiBrightBlue: #005cc5;
+  --terminal-ansiBrightMagenta: #5a32a3;
+  --terminal-ansiBrightCyan: #3192aa;
+  --terminal-ansiBrightWhite: #d1d5da;
+  --interactive-activeCodeBorder: #1a85ff;
+  --interactive-inactiveCodeBorder: #e8eaed;
+  --gitDecoration-addedResourceForeground: #28a745;
+  --gitDecoration-modifiedResourceForeground: #005cc5;
+  --gitDecoration-deletedResourceForeground: #d73a49;
+  --gitDecoration-renamedResourceForeground: #007100;
+  --gitDecoration-untrackedResourceForeground: #28a745;
+  --gitDecoration-ignoredResourceForeground: #959da5;
+  --gitDecoration-stageModifiedResourceForeground: #895503;
+  --gitDecoration-stageDeletedResourceForeground: #ad0707;
+  --gitDecoration-conflictingResourceForeground: #e36209;
+  --gitDecoration-submoduleResourceForeground: #959da5;
+  --gitlens-gutterBackgroundColor: rgba(0, 0, 0, 0.05);
+  --gitlens-gutterForegroundColor: #747474;
+  --gitlens-gutterUncommittedForegroundColor: rgba(0, 188, 242, 0.6);
+  --gitlens-trailingLineBackgroundColor: rgba(0, 0, 0, 0);
+  --gitlens-trailingLineForegroundColor: rgba(153, 153, 153, 0.35);
+  --gitlens-lineHighlightBackgroundColor: rgba(0, 188, 242, 0.2);
+  --gitlens-lineHighlightOverviewRulerColor: rgba(0, 188, 242, 0.6);
+  --gitlens-openAutolinkedIssueIconColor: #1a7f37;
+  --gitlens-closedAutolinkedIssueIconColor: #8250df;
+  --gitlens-closedPullRequestIconColor: #cf222e;
+  --gitlens-openPullRequestIconColor: #1a7f37;
+  --gitlens-mergedPullRequestIconColor: #8250df;
+  --gitlens-unpublishedChangesIconColor: #35b15e;
+  --gitlens-unpublishedCommitIconColor: #35b15e;
+  --gitlens-unpulledChangesIconColor: #b15e35;
+  --gitlens-decorations-addedForegroundColor: #28a745;
+  --gitlens-decorations-copiedForegroundColor: #007100;
+  --gitlens-decorations-deletedForegroundColor: #d73a49;
+  --gitlens-decorations-ignoredForegroundColor: #959da5;
+  --gitlens-decorations-modifiedForegroundColor: #005cc5;
+  --gitlens-decorations-untrackedForegroundColor: #28a745;
+  --gitlens-decorations-renamedForegroundColor: #007100;
+  --gitlens-decorations-branchAheadForegroundColor: #35b15e;
+  --gitlens-decorations-branchBehindForegroundColor: #b15e35;
+  --gitlens-decorations-branchDivergedForegroundColor: #d8af1b;
+  --gitlens-decorations-branchUpToDateForegroundColor: #586069;
+  --gitlens-decorations-branchUnpublishedForegroundColor: #35b15e;
+  --gitlens-decorations-branchMissingUpstreamForegroundColor: #ad0707;
+  --gitlens-decorations-worktreeView-hasUncommittedChangesForegroundColor: #895503;
+  --gitlens-graphLane1Color: #15a0bf;
+  --gitlens-graphLane2Color: #0669f7;
+  --gitlens-graphLane3Color: #8e00c2;
+  --gitlens-graphLane4Color: #c517b6;
+  --gitlens-graphLane5Color: #d90171;
+  --gitlens-graphLane6Color: #cd0101;
+  --gitlens-graphLane7Color: #f25d2e;
+  --gitlens-graphLane8Color: #f2ca33;
+  --gitlens-graphLane9Color: #7bd938;
+  --gitlens-graphLane10Color: #2ece9d;
+  --gitlens-graphChangesColumnAddedColor: #2da44e;
+  --gitlens-graphChangesColumnDeletedColor: #cf222e;
+  --gitlens-graphMinimapMarkerHeadColor: #04c814;
+  --gitlens-graphScrollMarkerHeadColor: #04c814;
+  --gitlens-graphMinimapMarkerUpstreamColor: #8cd993;
+  --gitlens-graphScrollMarkerUpstreamColor: #8cd993;
+  --gitlens-graphMinimapMarkerHighlightsColor: #f5cc00;
+  --gitlens-graphScrollMarkerHighlightsColor: #f5cc00;
+  --gitlens-graphMinimapMarkerLocalBranchesColor: #3095e8;
+  --gitlens-graphScrollMarkerLocalBranchesColor: #3095e8;
+  --gitlens-graphMinimapMarkerRemoteBranchesColor: #67ace4;
+  --gitlens-graphScrollMarkerRemoteBranchesColor: #67ace4;
+  --gitlens-graphMinimapMarkerStashesColor: #e467e4;
+  --gitlens-graphScrollMarkerStashesColor: #e467e4;
+  --gitlens-graphMinimapMarkerTagsColor: #d2a379;
+  --gitlens-graphScrollMarkerTagsColor: #d2a379;
+  --issues-newIssueDecoration: rgba(0, 0, 0, 0.28);
+  --issues-open: #3fb950;
+  --issues-closed: #cb2431;
+  --pullRequests-merged: #8957e5;
+  --pullRequests-draft: #6e7681;
+  --pullRequests-open: #3fb950;
+  --pullRequests-closed: #cb2431;
+  --pullRequests-notification: #005cc5;
+}
+
+.monaco-workbench.light-default {
+  --foreground: #24292f;
+  --disabledForeground: rgba(97, 97, 97, 0.5);
+  --errorForeground: #cf222e;
+  --descriptionForeground: #57606a;
+  --icon-foreground: #57606a;
+  --focusBorder: #0969da;
+  --textSeparator-foreground: #d8dee4;
+  --textLink-foreground: #0969da;
+  --textLink-activeForeground: #0969da;
+  --textPreformat-foreground: #57606a;
+  --textBlockQuote-background: #f6f8fa;
+  --textBlockQuote-border: #d0d7de;
+  --textCodeBlock-background: rgba(175, 184, 193, 0.2);
+  --widget-shadow: rgba(0, 0, 0, 0.16);
+  --input-background: #ffffff;
+  --input-foreground: #24292f;
+  --input-border: #d0d7de;
+  --inputOption-activeBorder: #007acc;
+  --inputOption-hoverBackground: rgba(184, 184, 184, 0.31);
+  --inputOption-activeBackground: rgba(9, 105, 218, 0.2);
+  --inputOption-activeForeground: #000000;
+  --input-placeholderForeground: #6e7781;
+  --inputValidation-infoBackground: #d6ecf2;
+  --inputValidation-infoBorder: #007acc;
+  --inputValidation-warningBackground: #f6f5d2;
+  --inputValidation-warningBorder: #b89500;
+  --inputValidation-errorBackground: #f2dede;
+  --inputValidation-errorBorder: #be1100;
+  --dropdown-background: #ffffff;
+  --dropdown-listBackground: #ffffff;
+  --dropdown-foreground: #24292f;
+  --dropdown-border: #d0d7de;
+  --button-foreground: #ffffff;
+  --button-separator: rgba(255, 255, 255, 0.4);
+  --button-background: #2da44e;
+  --button-hoverBackground: #2c974b;
+  --button-secondaryForeground: #24292f;
+  --button-secondaryBackground: #ebecf0;
+  --button-secondaryHoverBackground: #f3f4f6;
+  --badge-background: #0969da;
+  --badge-foreground: #ffffff;
+  --scrollbar-shadow: rgba(110, 119, 129, 0.2);
+  --scrollbarSlider-background: rgba(140, 149, 159, 0.2);
+  --scrollbarSlider-hoverBackground: rgba(140, 149, 159, 0.24);
+  --scrollbarSlider-activeBackground: rgba(140, 149, 159, 0.28);
+  --progressBar-background: #0969da;
+  --editorError-foreground: #e51400;
+  --editorWarning-foreground: #bf8803;
+  --editorInfo-foreground: #1a85ff;
+  --editorHint-foreground: #6c6c6c;
+  --sash-hoverBorder: #0969da;
+  --editor-background: #ffffff;
+  --editor-foreground: #24292f;
+  --editorStickyScroll-background: #ffffff;
+  --editorStickyScrollHover-background: #f0f0f0;
+  --editorWidget-background: #ffffff;
+  --editorWidget-foreground: #24292f;
+  --editorWidget-border: #c8c8c8;
+  --quickInput-background: #ffffff;
+  --quickInput-foreground: #24292f;
+  --quickInputTitle-background: rgba(0, 0, 0, 0.06);
+  --pickerGroup-foreground: #57606a;
+  --pickerGroup-border: #d0d7de;
+  --keybindingLabel-background: rgba(221, 221, 221, 0.4);
+  --keybindingLabel-foreground: #24292f;
+  --keybindingLabel-border: rgba(204, 204, 204, 0.4);
+  --keybindingLabel-bottomBorder: rgba(187, 187, 187, 0.4);
+  --editor-selectionBackground: #add6ff;
+  --editor-inactiveSelectionBackground: rgba(173, 214, 255, 0.5);
+  --editor-selectionHighlightBackground: rgba(74, 194, 107, 0.25);
+  --editor-findMatchBackground: #bf8700;
+  --editor-findMatchHighlightBackground: rgba(250, 225, 125, 0.5);
+  --editor-findRangeHighlightBackground: rgba(180, 180, 180, 0.3);
+  --searchEditor-findMatchBackground: rgba(250, 225, 125, 0.33);
+  --editor-hoverHighlightBackground: rgba(173, 214, 255, 0.15);
+  --editorHoverWidget-background: #ffffff;
+  --editorHoverWidget-foreground: #24292f;
+  --editorHoverWidget-border: #c8c8c8;
+  --editorHoverWidget-statusBarBackground: #f2f2f2;
+  --editorLink-activeForeground: #0000ff;
+  --editorInlayHint-foreground: #57606a;
+  --editorInlayHint-background: rgba(175, 184, 193, 0.2);
+  --editorInlayHint-typeForeground: #57606a;
+  --editorInlayHint-typeBackground: rgba(175, 184, 193, 0.2);
+  --editorInlayHint-parameterForeground: #57606a;
+  --editorInlayHint-parameterBackground: rgba(175, 184, 193, 0.2);
+  --editorLightBulb-foreground: #ddb100;
+  --editorLightBulbAutoFix-foreground: #007acc;
+  --diffEditor-insertedTextBackground: rgba(111, 221, 139, 0.5);
+  --diffEditor-removedTextBackground: rgba(255, 129, 130, 0.4);
+  --diffEditor-insertedLineBackground: rgba(172, 238, 187, 0.3);
+  --diffEditor-removedLineBackground: rgba(255, 206, 203, 0.3);
+  --diffEditor-diagonalFill: rgba(34, 34, 34, 0.2);
+  --list-focusBackground: #ddf4ff;
+  --list-focusForeground: #24292f;
+  --list-focusOutline: #0969da;
+  --list-activeSelectionBackground: rgba(175, 184, 193, 0.2);
+  --list-activeSelectionForeground: #24292f;
+  --list-inactiveSelectionBackground: rgba(175, 184, 193, 0.2);
+  --list-inactiveSelectionForeground: #24292f;
+  --list-inactiveFocusBackground: #ddf4ff;
+  --list-hoverBackground: rgba(234, 238, 242, 0.5);
+  --list-hoverForeground: #24292f;
+  --list-dropBackground: #d6ebff;
+  --list-highlightForeground: #0969da;
+  --list-focusHighlightForeground: #0969da;
+  --list-invalidItemForeground: #b89500;
+  --list-errorForeground: #b01011;
+  --list-warningForeground: #855f00;
+  --listFilterWidget-background: #ffffff;
+  --listFilterWidget-outline: rgba(0, 0, 0, 0);
+  --listFilterWidget-noMatchesOutline: #be1100;
+  --listFilterWidget-shadow: rgba(0, 0, 0, 0.16);
+  --list-filterMatchBackground: rgba(250, 225, 125, 0.5);
+  --tree-indentGuidesStroke: #d8dee4;
+  --tree-inactiveIndentGuidesStroke: rgba(216, 222, 228, 0.4);
+  --tree-tableColumnsBorder: rgba(97, 97, 97, 0.13);
+  --tree-tableOddRowsBackground: rgba(36, 41, 47, 0.04);
+  --list-deemphasizedForeground: #8e8e90;
+  --checkbox-background: #f6f8fa;
+  --checkbox-selectBackground: #ffffff;
+  --checkbox-foreground: #24292f;
+  --checkbox-border: #d0d7de;
+  --checkbox-selectBorder: #ffffff;
+  --quickInputList-focusForeground: #24292f;
+  --quickInputList-focusBackground: rgba(175, 184, 193, 0.2);
+  --menu-foreground: #24292f;
+  --menu-background: #ffffff;
+  --menu-selectionForeground: #24292f;
+  --menu-selectionBackground: rgba(175, 184, 193, 0.2);
+  --menu-separatorBackground: #d4d4d4;
+  --toolbar-hoverBackground: rgba(184, 184, 184, 0.31);
+  --toolbar-activeBackground: rgba(166, 166, 166, 0.31);
+  --editor-snippetTabstopHighlightBackground: rgba(10, 50, 100, 0.2);
+  --editor-snippetFinalTabstopHighlightBorder: rgba(10, 50, 100, 0.5);
+  --breadcrumb-foreground: #57606a;
+  --breadcrumb-background: #ffffff;
+  --breadcrumb-focusForeground: #24292f;
+  --breadcrumb-activeSelectionForeground: #57606a;
+  --breadcrumbPicker-background: #ffffff;
+  --merge-currentHeaderBackground: rgba(64, 200, 174, 0.5);
+  --merge-currentContentBackground: rgba(64, 200, 174, 0.2);
+  --merge-incomingHeaderBackground: rgba(64, 166, 255, 0.5);
+  --merge-incomingContentBackground: rgba(64, 166, 255, 0.2);
+  --merge-commonHeaderBackground: rgba(96, 96, 96, 0.4);
+  --merge-commonContentBackground: rgba(96, 96, 96, 0.16);
+  --editorOverviewRuler-currentContentForeground: rgba(64, 200, 174, 0.5);
+  --editorOverviewRuler-incomingContentForeground: rgba(64, 166, 255, 0.5);
+  --editorOverviewRuler-commonContentForeground: rgba(96, 96, 96, 0.4);
+  --editorOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+  --editorOverviewRuler-selectionHighlightForeground: rgba(160, 160, 160, 0.8);
+  --minimap-findMatchHighlight: #d18616;
+  --minimap-selectionOccurrenceHighlight: #c9c9c9;
+  --minimap-selectionHighlight: #add6ff;
+  --minimap-errorHighlight: rgba(255, 18, 18, 0.7);
+  --minimap-warningHighlight: #bf8803;
+  --minimap-foregroundOpacity: #000000;
+  --minimapSlider-background: rgba(140, 149, 159, 0.2);
+  --minimapSlider-hoverBackground: rgba(140, 149, 159, 0.24);
+  --minimapSlider-activeBackground: rgba(140, 149, 159, 0.28);
+  --problemsErrorIcon-foreground: #e51400;
+  --problemsWarningIcon-foreground: #bf8803;
+  --problemsInfoIcon-foreground: #1a85ff;
+  --charts-foreground: #24292f;
+  --charts-lines: rgba(36, 41, 47, 0.5);
+  --charts-red: #e51400;
+  --charts-blue: #1a85ff;
+  --charts-yellow: #bf8803;
+  --charts-orange: #d18616;
+  --charts-green: #388a34;
+  --charts-purple: #652d90;
+  --symbolIcon-arrayForeground: #953800;
+  --symbolIcon-booleanForeground: #0550ae;
+  --symbolIcon-classForeground: #953800;
+  --symbolIcon-colorForeground: #0a3069;
+  --symbolIcon-constantForeground: #116329;
+  --symbolIcon-constructorForeground: #3e1f79;
+  --symbolIcon-enumeratorForeground: #953800;
+  --symbolIcon-enumeratorMemberForeground: #0550ae;
+  --symbolIcon-eventForeground: #57606a;
+  --symbolIcon-fieldForeground: #953800;
+  --symbolIcon-fileForeground: #7d4e00;
+  --symbolIcon-folderForeground: #7d4e00;
+  --symbolIcon-functionForeground: #6639ba;
+  --symbolIcon-interfaceForeground: #953800;
+  --symbolIcon-keyForeground: #0550ae;
+  --symbolIcon-keywordForeground: #a40e26;
+  --symbolIcon-methodForeground: #6639ba;
+  --symbolIcon-moduleForeground: #a40e26;
+  --symbolIcon-namespaceForeground: #a40e26;
+  --symbolIcon-nullForeground: #0550ae;
+  --symbolIcon-numberForeground: #116329;
+  --symbolIcon-objectForeground: #953800;
+  --symbolIcon-operatorForeground: #0a3069;
+  --symbolIcon-packageForeground: #953800;
+  --symbolIcon-propertyForeground: #953800;
+  --symbolIcon-referenceForeground: #0550ae;
+  --symbolIcon-snippetForeground: #0550ae;
+  --symbolIcon-stringForeground: #0a3069;
+  --symbolIcon-structForeground: #953800;
+  --symbolIcon-textForeground: #0a3069;
+  --symbolIcon-typeParameterForeground: #0a3069;
+  --symbolIcon-unitForeground: #0550ae;
+  --symbolIcon-variableForeground: #953800;
+  --editorHoverWidget-highlightForeground: #0969da;
+  --editor-lineHighlightBackground: rgba(234, 238, 242, 0.5);
+  --editor-lineHighlightBorder: #eeeeee;
+  --editor-rangeHighlightBackground: rgba(253, 255, 0, 0.2);
+  --editor-symbolHighlightBackground: rgba(250, 225, 125, 0.5);
+  --editorCursor-foreground: #0969da;
+  --editorWhitespace-foreground: #afb8c1;
+  --editorIndentGuide-background: rgba(36, 41, 47, 0.12);
+  --editorIndentGuide-activeBackground: rgba(36, 41, 47, 0.24);
+  --editorLineNumber-foreground: #8c959f;
+  --editorActiveLineNumber-foreground: #0b216f;
+  --editorLineNumber-activeForeground: #24292f;
+  --editorRuler-foreground: #d3d3d3;
+  --editorCodeLens-foreground: #919191;
+  --editorBracketMatch-background: rgba(74, 194, 107, 0.25);
+  --editorBracketMatch-border: rgba(74, 194, 107, 0.6);
+  --editorOverviewRuler-border: #ffffff;
+  --editorGutter-background: #ffffff;
+  --editorUnnecessaryCode-opacity: rgba(0, 0, 0, 0.47);
+  --editorGhostText-foreground: rgba(0, 0, 0, 0.47);
+  --editorOverviewRuler-rangeHighlightForeground: rgba(0, 122, 204, 0.6);
+  --editorOverviewRuler-errorForeground: rgba(255, 18, 18, 0.7);
+  --editorOverviewRuler-warningForeground: #bf8803;
+  --editorOverviewRuler-infoForeground: #1a85ff;
+  --editorBracketHighlight-foreground1: #0969da;
+  --editorBracketHighlight-foreground2: #1a7f37;
+  --editorBracketHighlight-foreground3: #9a6700;
+  --editorBracketHighlight-foreground4: #cf222e;
+  --editorBracketHighlight-foreground5: #bf3989;
+  --editorBracketHighlight-foreground6: #8250df;
+  --editorBracketHighlight-unexpectedBracket-foreground: #57606a;
+  --editorBracketPairGuide-background1: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-background2: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-background3: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-background4: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-background5: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-background6: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-activeBackground1: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-activeBackground2: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-activeBackground3: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-activeBackground4: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-activeBackground5: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-activeBackground6: rgba(0, 0, 0, 0);
+  --editorUnicodeHighlight-border: #cea33d;
+  --editorUnicodeHighlight-background: rgba(206, 163, 61, 0.08);
+  --editorOverviewRuler-bracketMatchForeground: #a0a0a0;
+  --editor-foldBackground: rgba(110, 119, 129, 0.1);
+  --editorGutter-foldingControlForeground: #57606a;
+  --editor-linkedEditingBackground: rgba(9, 105, 218, 0.07);
+  --editor-wordHighlightBackground: rgba(234, 238, 242, 0.5);
+  --editor-wordHighlightStrongBackground: rgba(175, 184, 193, 0.3);
+  --editor-wordHighlightTextBackground: rgba(234, 238, 242, 0.5);
+  --editor-wordHighlightBorder: rgba(175, 184, 193, 0.6);
+  --editor-wordHighlightStrongBorder: rgba(175, 184, 193, 0.6);
+  --editor-wordHighlightTextBorder: rgba(175, 184, 193, 0.6);
+  --editorOverviewRuler-wordHighlightForeground: rgba(160, 160, 160, 0.8);
+  --editorOverviewRuler-wordHighlightStrongForeground: rgba(192, 160, 192, 0.8);
+  --editorOverviewRuler-wordHighlightTextForeground: rgba(160, 160, 160, 0.8);
+  --peekViewTitle-background: rgba(26, 133, 255, 0.1);
+  --peekViewTitleLabel-foreground: #000000;
+  --peekViewTitleDescription-foreground: #616161;
+  --peekView-border: #1a85ff;
+  --peekViewResult-background: #f3f3f3;
+  --peekViewResult-lineForeground: #646465;
+  --peekViewResult-fileForeground: #1e1e1e;
+  --peekViewResult-selectionBackground: rgba(51, 153, 255, 0.2);
+  --peekViewResult-selectionForeground: #6c6c6c;
+  --peekViewEditor-background: #f2f8fc;
+  --peekViewEditorGutter-background: #f2f8fc;
+  --peekViewEditorStickyScroll-background: #f2f8fc;
+  --peekViewResult-matchHighlightBackground: rgba(234, 92, 0, 0.3);
+  --peekViewEditor-matchHighlightBackground: rgba(245, 216, 2, 0.87);
+  --editorMarkerNavigationError-background: #e51400;
+  --editorMarkerNavigationError-headerBackground: rgba(229, 20, 0, 0.1);
+  --editorMarkerNavigationWarning-background: #bf8803;
+  --editorMarkerNavigationWarning-headerBackground: rgba(191, 136, 3, 0.1);
+  --editorMarkerNavigationInfo-background: #1a85ff;
+  --editorMarkerNavigationInfo-headerBackground: rgba(26, 133, 255, 0.1);
+  --editorMarkerNavigation-background: #ffffff;
+  --editorSuggestWidget-background: #ffffff;
+  --editorSuggestWidget-border: #c8c8c8;
+  --editorSuggestWidget-foreground: #24292f;
+  --editorSuggestWidget-selectedForeground: #24292f;
+  --editorSuggestWidget-selectedBackground: rgba(175, 184, 193, 0.2);
+  --editorSuggestWidget-highlightForeground: #0969da;
+  --editorSuggestWidget-focusHighlightForeground: #0969da;
+  --editorSuggestWidgetStatus-foreground: rgba(36, 41, 47, 0.5);
+  --tab-activeBackground: #ffffff;
+  --tab-unfocusedActiveBackground: #ffffff;
+  --tab-inactiveBackground: #f6f8fa;
+  --tab-unfocusedInactiveBackground: #f6f8fa;
+  --tab-activeForeground: #24292f;
+  --tab-inactiveForeground: #57606a;
+  --tab-unfocusedActiveForeground: rgba(36, 41, 47, 0.7);
+  --tab-unfocusedInactiveForeground: rgba(87, 96, 106, 0.5);
+  --tab-hoverBackground: #ffffff;
+  --tab-unfocusedHoverBackground: rgba(234, 238, 242, 0.5);
+  --tab-border: #d0d7de;
+  --tab-lastPinnedBorder: #d8dee4;
+  --tab-activeBorder: #ffffff;
+  --tab-unfocusedActiveBorder: #ffffff;
+  --tab-activeBorderTop: #fd8c73;
+  --tab-unfocusedActiveBorderTop: #d0d7de;
+  --tab-activeModifiedBorder: #33aaee;
+  --tab-inactiveModifiedBorder: rgba(51, 170, 238, 0.5);
+  --tab-unfocusedActiveModifiedBorder: rgba(51, 170, 238, 0.7);
+  --tab-unfocusedInactiveModifiedBorder: rgba(51, 170, 238, 0.25);
+  --editorPane-background: #ffffff;
+  --editorGroupHeader-tabsBackground: #f6f8fa;
+  --editorGroupHeader-tabsBorder: #d0d7de;
+  --editorGroupHeader-noTabsBackground: #ffffff;
+  --editorGroup-border: #d0d7de;
+  --editorGroup-dropBackground: rgba(38, 119, 203, 0.18);
+  --editorGroup-dropIntoPromptForeground: #24292f;
+  --editorGroup-dropIntoPromptBackground: #ffffff;
+  --sideBySideEditor-horizontalBorder: #d0d7de;
+  --sideBySideEditor-verticalBorder: #d0d7de;
+  --panel-background: #f6f8fa;
+  --panel-border: #d0d7de;
+  --panelTitle-activeForeground: #24292f;
+  --panelTitle-inactiveForeground: #57606a;
+  --panelTitle-activeBorder: #fd8c73;
+  --panelInput-border: #d0d7de;
+  --panel-dropBorder: #24292f;
+  --panelSection-dropBackground: rgba(38, 119, 203, 0.18);
+  --panelSectionHeader-background: rgba(128, 128, 128, 0.2);
+  --panelSection-border: #d0d7de;
+  --banner-background: rgba(113, 129, 145, 0.2);
+  --banner-foreground: #24292f;
+  --banner-iconForeground: #1a85ff;
+  --statusBar-foreground: #57606a;
+  --statusBar-noFolderForeground: #57606a;
+  --statusBar-background: #ffffff;
+  --statusBar-noFolderBackground: #ffffff;
+  --statusBar-border: #d0d7de;
+  --statusBar-focusBorder: rgba(9, 105, 218, 0.5);
+  --statusBar-noFolderBorder: #d0d7de;
+  --statusBarItem-activeBackground: rgba(36, 41, 47, 0.12);
+  --statusBarItem-focusBorder: #0969da;
+  --statusBarItem-hoverBackground: rgba(36, 41, 47, 0.08);
+  --statusBarItem-compactHoverBackground: rgba(255, 255, 255, 0.2);
+  --statusBarItem-prominentForeground: #57606a;
+  --statusBarItem-prominentBackground: rgba(175, 184, 193, 0.2);
+  --statusBarItem-prominentHoverBackground: rgba(0, 0, 0, 0.3);
+  --statusBarItem-errorBackground: #7c141b;
+  --statusBarItem-errorForeground: #ffffff;
+  --statusBarItem-warningBackground: #725102;
+  --statusBarItem-warningForeground: #ffffff;
+  --activityBar-background: #ffffff;
+  --activityBar-foreground: #24292f;
+  --activityBar-inactiveForeground: #57606a;
+  --activityBar-border: #d0d7de;
+  --activityBar-activeBorder: #fd8c73;
+  --activityBar-dropBorder: #24292f;
+  --activityBarBadge-background: #0969da;
+  --activityBarBadge-foreground: #ffffff;
+  --profileBadge-background: #c4c4c4;
+  --profileBadge-foreground: #333333;
+  --statusBarItem-remoteBackground: #eaeef2;
+  --statusBarItem-remoteForeground: #24292f;
+  --extensionBadge-remoteBackground: #0969da;
+  --extensionBadge-remoteForeground: #ffffff;
+  --sideBar-background: #f6f8fa;
+  --sideBar-foreground: #24292f;
+  --sideBar-border: #d0d7de;
+  --sideBarTitle-foreground: #24292f;
+  --sideBar-dropBackground: rgba(38, 119, 203, 0.18);
+  --sideBarSectionHeader-background: #f6f8fa;
+  --sideBarSectionHeader-foreground: #24292f;
+  --sideBarSectionHeader-border: #d0d7de;
+  --titleBar-activeForeground: #57606a;
+  --titleBar-inactiveForeground: #57606a;
+  --titleBar-activeBackground: #ffffff;
+  --titleBar-inactiveBackground: #f6f8fa;
+  --titleBar-border: #d0d7de;
+  --menubar-selectionForeground: #57606a;
+  --menubar-selectionBackground: rgba(184, 184, 184, 0.31);
+  --notifications-foreground: #24292f;
+  --notifications-background: #ffffff;
+  --notificationLink-foreground: #0969da;
+  --notificationCenterHeader-foreground: #57606a;
+  --notificationCenterHeader-background: #f6f8fa;
+  --notifications-border: #d0d7de;
+  --notificationsErrorIcon-foreground: #cf222e;
+  --notificationsWarningIcon-foreground: #9a6700;
+  --notificationsInfoIcon-foreground: #0969da;
+  --commandCenter-foreground: #57606a;
+  --commandCenter-activeForeground: #57606a;
+  --commandCenter-inactiveForeground: #57606a;
+  --commandCenter-background: rgba(0, 0, 0, 0.05);
+  --commandCenter-activeBackground: rgba(0, 0, 0, 0.08);
+  --commandCenter-border: rgba(87, 96, 106, 0.2);
+  --commandCenter-activeBorder: rgba(87, 96, 106, 0.3);
+  --commandCenter-inactiveBorder: rgba(87, 96, 106, 0.25);
+  --editorCommentsWidget-resolvedBorder: rgba(97, 97, 97, 0.5);
+  --editorCommentsWidget-unresolvedBorder: #1a85ff;
+  --editorCommentsWidget-rangeBackground: rgba(26, 133, 255, 0.1);
+  --editorCommentsWidget-rangeBorder: rgba(26, 133, 255, 0.4);
+  --editorCommentsWidget-rangeActiveBackground: rgba(26, 133, 255, 0.1);
+  --editorCommentsWidget-rangeActiveBorder: rgba(26, 133, 255, 0.4);
+  --editorGutter-commentRangeForeground: #e2e4e7;
+  --editorGutter-commentGlyphForground: #24292f;
+  --debugToolBar-background: #ffffff;
+  --debugIcon-startForeground: #388a34;
+  --editor-stackFrameHighlightBackground: rgba(212, 167, 44, 0.4);
+  --editor-focusedStackFrameHighlightBackground: rgba(74, 194, 107, 0.4);
+  --mergeEditor-change-background: rgba(155, 185, 85, 0.2);
+  --mergeEditor-change-word-background: rgba(156, 204, 44, 0.4);
+  --mergeEditor-changeBase-background: #ffcccc;
+  --mergeEditor-changeBase-word-background: #ffa3a3;
+  --mergeEditor-conflict-unhandledUnfocused-border: #ffa600;
+  --mergeEditor-conflict-unhandledFocused-border: #ffa600;
+  --mergeEditor-conflict-handledUnfocused-border: rgba(134, 134, 134, 0.29);
+  --mergeEditor-conflict-handledFocused-border: rgba(193, 193, 193, 0.8);
+  --mergeEditor-conflict-handled-minimapOverViewRuler: rgba(173, 172, 168, 0.93);
+  --mergeEditor-conflict-unhandled-minimapOverViewRuler: #fcba03;
+  --mergeEditor-conflictingLines-background: rgba(255, 234, 0, 0.28);
+  --mergeEditor-conflict-input1-background: rgba(64, 200, 174, 0.2);
+  --mergeEditor-conflict-input2-background: rgba(64, 166, 255, 0.2);
+  --settings-headerForeground: #24292f;
+  --settings-settingsHeaderHoverForeground: rgba(36, 41, 47, 0.7);
+  --settings-modifiedItemIndicator: rgba(212, 167, 44, 0.4);
+  --settings-headerBorder: #d0d7de;
+  --settings-sashBorder: #d0d7de;
+  --settings-dropdownBackground: #ffffff;
+  --settings-dropdownForeground: #24292f;
+  --settings-dropdownBorder: #d0d7de;
+  --settings-dropdownListBorder: #c8c8c8;
+  --settings-checkboxBackground: #f6f8fa;
+  --settings-checkboxForeground: #24292f;
+  --settings-checkboxBorder: #d0d7de;
+  --settings-textInputBackground: #ffffff;
+  --settings-textInputForeground: #24292f;
+  --settings-textInputBorder: #d0d7de;
+  --settings-numberInputBackground: #ffffff;
+  --settings-numberInputForeground: #24292f;
+  --settings-numberInputBorder: #d0d7de;
+  --settings-focusedRowBackground: rgba(234, 238, 242, 0.3);
+  --settings-rowHoverBackground: rgba(234, 238, 242, 0.15);
+  --settings-focusedRowBorder: #0969da;
+  --terminal-foreground: #24292f;
+  --terminal-selectionBackground: #add6ff;
+  --terminal-inactiveSelectionBackground: rgba(173, 214, 255, 0.5);
+  --terminalCommandDecoration-defaultBackground: rgba(0, 0, 0, 0.25);
+  --terminalCommandDecoration-successBackground: #2090d3;
+  --terminalCommandDecoration-errorBackground: #e51400;
+  --terminalOverviewRuler-cursorForeground: rgba(160, 160, 160, 0.8);
+  --terminal-border: #d0d7de;
+  --terminal-findMatchBackground: #bf8700;
+  --terminal-findMatchHighlightBackground: rgba(250, 225, 125, 0.5);
+  --terminalOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+  --terminal-dropBackground: rgba(38, 119, 203, 0.18);
+  --terminal-tab-activeBorder: #ffffff;
+  --testing-iconFailed: #f14c4c;
+  --testing-iconErrored: #f14c4c;
+  --testing-iconPassed: #73c991;
+  --testing-runAction: #73c991;
+  --testing-iconQueued: #cca700;
+  --testing-iconUnset: #848484;
+  --testing-iconSkipped: #848484;
+  --testing-peekBorder: #e51400;
+  --testing-peekHeaderBackground: rgba(229, 20, 0, 0.1);
+  --testing-message-error-decorationForeground: #e51400;
+  --testing-message-error-lineBackground: rgba(255, 0, 0, 0.2);
+  --testing-message-info-decorationForeground: rgba(36, 41, 47, 0.5);
+  --welcomePage-tileBackground: #ffffff;
+  --welcomePage-tileHoverBackground: #e6e6e6;
+  --welcomePage-tileBorder: rgba(0, 0, 0, 0.1);
+  --welcomePage-progress-background: #ffffff;
+  --welcomePage-progress-foreground: #0969da;
+  --walkthrough-stepTitle-foreground: #000000;
+  --welcomeOverlay-background: rgba(255, 255, 255, 0.52);
+  --debugExceptionWidget-border: #a31515;
+  --debugExceptionWidget-background: #f1dfde;
+  --ports-iconRunningProcessForeground: #eaeef2;
+  --statusBar-debuggingBackground: #cf222e;
+  --statusBar-debuggingForeground: #ffffff;
+  --statusBar-debuggingBorder: #d0d7de;
+  --editor-inlineValuesForeground: rgba(0, 0, 0, 0.5);
+  --editor-inlineValuesBackground: rgba(255, 200, 0, 0.2);
+  --editorGutter-modifiedBackground: rgba(212, 167, 44, 0.4);
+  --editorGutter-addedBackground: rgba(74, 194, 107, 0.4);
+  --editorGutter-deletedBackground: rgba(255, 129, 130, 0.4);
+  --minimapGutter-modifiedBackground: rgba(212, 167, 44, 0.4);
+  --minimapGutter-addedBackground: rgba(74, 194, 107, 0.4);
+  --minimapGutter-deletedBackground: rgba(255, 129, 130, 0.4);
+  --editorOverviewRuler-modifiedForeground: rgba(212, 167, 44, 0.24);
+  --editorOverviewRuler-addedForeground: rgba(74, 194, 107, 0.24);
+  --editorOverviewRuler-deletedForeground: rgba(255, 129, 130, 0.24);
+  --debugIcon-breakpointForeground: #cf222e;
+  --debugIcon-breakpointDisabledForeground: #848484;
+  --debugIcon-breakpointUnverifiedForeground: #848484;
+  --debugIcon-breakpointCurrentStackframeForeground: #be8700;
+  --debugIcon-breakpointStackframeForeground: #89d185;
+  --notebook-cellBorderColor: rgba(175, 184, 193, 0.2);
+  --notebook-focusedEditorBorder: #0969da;
+  --notebookStatusSuccessIcon-foreground: #388a34;
+  --notebookEditorOverviewRuler-runningCellForeground: #388a34;
+  --notebookStatusErrorIcon-foreground: #cf222e;
+  --notebookStatusRunningIcon-foreground: #24292f;
+  --notebook-cellToolbarSeparator: rgba(128, 128, 128, 0.35);
+  --notebook-selectedCellBackground: rgba(175, 184, 193, 0.2);
+  --notebook-selectedCellBorder: rgba(175, 184, 193, 0.2);
+  --notebook-focusedCellBorder: #0969da;
+  --notebook-inactiveFocusedCellBorder: rgba(175, 184, 193, 0.2);
+  --notebook-cellStatusBarItemHoverBackground: rgba(0, 0, 0, 0.08);
+  --notebook-cellInsertionIndicator: #0969da;
+  --notebookScrollbarSlider-background: rgba(140, 149, 159, 0.2);
+  --notebookScrollbarSlider-hoverBackground: rgba(140, 149, 159, 0.24);
+  --notebookScrollbarSlider-activeBackground: rgba(140, 149, 159, 0.28);
+  --notebook-symbolHighlightBackground: rgba(253, 255, 0, 0.2);
+  --notebook-cellEditorBackground: #f6f8fa;
+  --notebook-editorBackground: #ffffff;
+  --keybindingTable-headerBackground: rgba(36, 41, 47, 0.04);
+  --keybindingTable-rowsBackground: rgba(36, 41, 47, 0.04);
+  --scm-providerBorder: #c8c8c8;
+  --searchEditor-textInputBorder: #d0d7de;
+  --debugTokenExpression-name: #0550ae;
+  --debugTokenExpression-value: #0a3069;
+  --debugTokenExpression-string: #0a3069;
+  --debugTokenExpression-boolean: #116329;
+  --debugTokenExpression-number: #116329;
+  --debugTokenExpression-error: #a40e26;
+  --debugView-exceptionLabelForeground: #ffffff;
+  --debugView-exceptionLabelBackground: #a31515;
+  --debugView-stateLabelForeground: #24292f;
+  --debugView-stateLabelBackground: rgba(136, 136, 136, 0.27);
+  --debugView-valueChangedHighlight: #569cd6;
+  --debugConsole-infoForeground: #57606a;
+  --debugConsole-warningForeground: #7d4e00;
+  --debugConsole-errorForeground: #cf222e;
+  --debugConsole-sourceForeground: #9a6700;
+  --debugConsoleInputIcon-foreground: #6639ba;
+  --debugIcon-pauseForeground: #007acc;
+  --debugIcon-stopForeground: #a1260d;
+  --debugIcon-disconnectForeground: #a1260d;
+  --debugIcon-restartForeground: #388a34;
+  --debugIcon-stepOverForeground: #007acc;
+  --debugIcon-stepIntoForeground: #007acc;
+  --debugIcon-stepOutForeground: #007acc;
+  --debugIcon-continueForeground: #007acc;
+  --debugIcon-stepBackForeground: #007acc;
+  --extensionButton-background: #2da44e;
+  --extensionButton-foreground: #ffffff;
+  --extensionButton-hoverBackground: #2c974b;
+  --extensionButton-separator: rgba(255, 255, 255, 0.4);
+  --extensionButton-prominentBackground: #2da44e;
+  --extensionButton-prominentForeground: #ffffff;
+  --extensionButton-prominentHoverBackground: #2c974b;
+  --extensionIcon-starForeground: #df6100;
+  --extensionIcon-verifiedForeground: #0969da;
+  --extensionIcon-preReleaseForeground: #1d9271;
+  --extensionIcon-sponsorForeground: #b51e78;
+  --terminal-ansiBlack: #24292f;
+  --terminal-ansiRed: #cf222e;
+  --terminal-ansiGreen: #116329;
+  --terminal-ansiYellow: #4d2d00;
+  --terminal-ansiBlue: #0969da;
+  --terminal-ansiMagenta: #8250df;
+  --terminal-ansiCyan: #1b7c83;
+  --terminal-ansiWhite: #6e7781;
+  --terminal-ansiBrightBlack: #57606a;
+  --terminal-ansiBrightRed: #a40e26;
+  --terminal-ansiBrightGreen: #1a7f37;
+  --terminal-ansiBrightYellow: #633c01;
+  --terminal-ansiBrightBlue: #218bff;
+  --terminal-ansiBrightMagenta: #a475f9;
+  --terminal-ansiBrightCyan: #3192aa;
+  --terminal-ansiBrightWhite: #8c959f;
+  --interactive-activeCodeBorder: #1a85ff;
+  --interactive-inactiveCodeBorder: rgba(175, 184, 193, 0.2);
+  --gitDecoration-addedResourceForeground: #1a7f37;
+  --gitDecoration-modifiedResourceForeground: #9a6700;
+  --gitDecoration-deletedResourceForeground: #cf222e;
+  --gitDecoration-renamedResourceForeground: #007100;
+  --gitDecoration-untrackedResourceForeground: #1a7f37;
+  --gitDecoration-ignoredResourceForeground: #6e7781;
+  --gitDecoration-stageModifiedResourceForeground: #895503;
+  --gitDecoration-stageDeletedResourceForeground: #ad0707;
+  --gitDecoration-conflictingResourceForeground: #bc4c00;
+  --gitDecoration-submoduleResourceForeground: #57606a;
+  --gitlens-gutterBackgroundColor: rgba(0, 0, 0, 0.05);
+  --gitlens-gutterForegroundColor: #747474;
+  --gitlens-gutterUncommittedForegroundColor: rgba(0, 188, 242, 0.6);
+  --gitlens-trailingLineBackgroundColor: rgba(0, 0, 0, 0);
+  --gitlens-trailingLineForegroundColor: rgba(153, 153, 153, 0.35);
+  --gitlens-lineHighlightBackgroundColor: rgba(0, 188, 242, 0.2);
+  --gitlens-lineHighlightOverviewRulerColor: rgba(0, 188, 242, 0.6);
+  --gitlens-openAutolinkedIssueIconColor: #1a7f37;
+  --gitlens-closedAutolinkedIssueIconColor: #8250df;
+  --gitlens-closedPullRequestIconColor: #cf222e;
+  --gitlens-openPullRequestIconColor: #1a7f37;
+  --gitlens-mergedPullRequestIconColor: #8250df;
+  --gitlens-unpublishedChangesIconColor: #35b15e;
+  --gitlens-unpublishedCommitIconColor: #35b15e;
+  --gitlens-unpulledChangesIconColor: #b15e35;
+  --gitlens-decorations-addedForegroundColor: #1a7f37;
+  --gitlens-decorations-copiedForegroundColor: #007100;
+  --gitlens-decorations-deletedForegroundColor: #cf222e;
+  --gitlens-decorations-ignoredForegroundColor: #6e7781;
+  --gitlens-decorations-modifiedForegroundColor: #9a6700;
+  --gitlens-decorations-untrackedForegroundColor: #1a7f37;
+  --gitlens-decorations-renamedForegroundColor: #007100;
+  --gitlens-decorations-branchAheadForegroundColor: #35b15e;
+  --gitlens-decorations-branchBehindForegroundColor: #b15e35;
+  --gitlens-decorations-branchDivergedForegroundColor: #d8af1b;
+  --gitlens-decorations-branchUpToDateForegroundColor: #24292f;
+  --gitlens-decorations-branchUnpublishedForegroundColor: #35b15e;
+  --gitlens-decorations-branchMissingUpstreamForegroundColor: #ad0707;
+  --gitlens-decorations-worktreeView-hasUncommittedChangesForegroundColor: #895503;
+  --gitlens-graphLane1Color: #15a0bf;
+  --gitlens-graphLane2Color: #0669f7;
+  --gitlens-graphLane3Color: #8e00c2;
+  --gitlens-graphLane4Color: #c517b6;
+  --gitlens-graphLane5Color: #d90171;
+  --gitlens-graphLane6Color: #cd0101;
+  --gitlens-graphLane7Color: #f25d2e;
+  --gitlens-graphLane8Color: #f2ca33;
+  --gitlens-graphLane9Color: #7bd938;
+  --gitlens-graphLane10Color: #2ece9d;
+  --gitlens-graphChangesColumnAddedColor: #2da44e;
+  --gitlens-graphChangesColumnDeletedColor: #cf222e;
+  --gitlens-graphMinimapMarkerHeadColor: #04c814;
+  --gitlens-graphScrollMarkerHeadColor: #04c814;
+  --gitlens-graphMinimapMarkerUpstreamColor: #8cd993;
+  --gitlens-graphScrollMarkerUpstreamColor: #8cd993;
+  --gitlens-graphMinimapMarkerHighlightsColor: #f5cc00;
+  --gitlens-graphScrollMarkerHighlightsColor: #f5cc00;
+  --gitlens-graphMinimapMarkerLocalBranchesColor: #3095e8;
+  --gitlens-graphScrollMarkerLocalBranchesColor: #3095e8;
+  --gitlens-graphMinimapMarkerRemoteBranchesColor: #67ace4;
+  --gitlens-graphScrollMarkerRemoteBranchesColor: #67ace4;
+  --gitlens-graphMinimapMarkerStashesColor: #e467e4;
+  --gitlens-graphScrollMarkerStashesColor: #e467e4;
+  --gitlens-graphMinimapMarkerTagsColor: #d2a379;
+  --gitlens-graphScrollMarkerTagsColor: #d2a379;
+  --issues-newIssueDecoration: rgba(0, 0, 0, 0.28);
+  --issues-open: #3fb950;
+  --issues-closed: #cb2431;
+  --pullRequests-merged: #8957e5;
+  --pullRequests-draft: #6e7681;
+  --pullRequests-open: #3fb950;
+  --pullRequests-closed: #cb2431;
+  --pullRequests-notification: #0969da;
+}
+
+.monaco-workbench.dark {
+  --foreground: #d1d5da;
+  --disabledForeground: rgba(204, 204, 204, 0.5);
+  --errorForeground: #f97583;
+  --descriptionForeground: #959da5;
+  --icon-foreground: #c5c5c5;
+  --focusBorder: #005cc5;
+  --textSeparator-foreground: #586069;
+  --textLink-foreground: #79b8ff;
+  --textLink-activeForeground: #c8e1ff;
+  --textPreformat-foreground: #d1d5da;
+  --textBlockQuote-background: #24292e;
+  --textBlockQuote-border: #444d56;
+  --textCodeBlock-background: #2f363d;
+  --widget-shadow: rgba(0, 0, 0, 0.36);
+  --input-background: #2f363d;
+  --input-foreground: #e1e4e8;
+  --input-border: #1b1f23;
+  --inputOption-activeBorder: #007acc;
+  --inputOption-hoverBackground: rgba(90, 93, 94, 0.5);
+  --inputOption-activeBackground: rgba(0, 92, 197, 0.4);
+  --inputOption-activeForeground: #ffffff;
+  --input-placeholderForeground: #959da5;
+  --inputValidation-infoBackground: #063b49;
+  --inputValidation-infoBorder: #007acc;
+  --inputValidation-warningBackground: #352a05;
+  --inputValidation-warningBorder: #b89500;
+  --inputValidation-errorBackground: #5a1d1d;
+  --inputValidation-errorBorder: #be1100;
+  --dropdown-background: #2f363d;
+  --dropdown-listBackground: #24292e;
+  --dropdown-foreground: #e1e4e8;
+  --dropdown-border: #1b1f23;
+  --button-foreground: #dcffe4;
+  --button-separator: rgba(220, 255, 228, 0.4);
+  --button-background: #176f2c;
+  --button-hoverBackground: #22863a;
+  --button-secondaryForeground: #ffffff;
+  --button-secondaryBackground: #444d56;
+  --button-secondaryHoverBackground: #586069;
+  --badge-background: #044289;
+  --badge-foreground: #c8e1ff;
+  --scrollbar-shadow: rgba(0, 0, 0, 0.53);
+  --scrollbarSlider-background: rgba(106, 115, 125, 0.2);
+  --scrollbarSlider-hoverBackground: rgba(106, 115, 125, 0.27);
+  --scrollbarSlider-activeBackground: rgba(106, 115, 125, 0.53);
+  --progressBar-background: #0366d6;
+  --editorError-foreground: #f97583;
+  --editorWarning-foreground: #ffea7f;
+  --editorInfo-foreground: #3794ff;
+  --editorHint-foreground: rgba(238, 238, 238, 0.7);
+  --sash-hoverBorder: #005cc5;
+  --editor-background: #24292e;
+  --editor-foreground: #e1e4e8;
+  --editorStickyScroll-background: #24292e;
+  --editorStickyScrollHover-background: #2a2d2e;
+  --editorWidget-background: #1f2428;
+  --editorWidget-foreground: #d1d5da;
+  --editorWidget-border: #454545;
+  --quickInput-background: #24292e;
+  --quickInput-foreground: #e1e4e8;
+  --quickInputTitle-background: rgba(255, 255, 255, 0.1);
+  --pickerGroup-foreground: #e1e4e8;
+  --pickerGroup-border: #444d56;
+  --keybindingLabel-background: rgba(128, 128, 128, 0.17);
+  --keybindingLabel-foreground: #cccccc;
+  --keybindingLabel-border: rgba(51, 51, 51, 0.6);
+  --keybindingLabel-bottomBorder: rgba(68, 68, 68, 0.6);
+  --editor-selectionBackground: rgba(51, 146, 255, 0.27);
+  --editor-inactiveSelectionBackground: rgba(51, 146, 255, 0.13);
+  --editor-selectionHighlightBackground: rgba(23, 229, 230, 0.2);
+  --editor-selectionHighlightBorder: rgba(23, 229, 230, 0);
+  --editor-findMatchBackground: rgba(255, 211, 61, 0.27);
+  --editor-findMatchHighlightBackground: rgba(255, 211, 61, 0.13);
+  --editor-findRangeHighlightBackground: rgba(58, 61, 65, 0.4);
+  --searchEditor-findMatchBackground: rgba(255, 211, 61, 0.09);
+  --editor-hoverHighlightBackground: rgba(38, 79, 120, 0.25);
+  --editorHoverWidget-background: #1f2428;
+  --editorHoverWidget-foreground: #d1d5da;
+  --editorHoverWidget-border: #454545;
+  --editorHoverWidget-statusBarBackground: #252b30;
+  --editorLink-activeForeground: #4e94ce;
+  --editorInlayHint-foreground: #c8e1ff;
+  --editorInlayHint-background: rgba(4, 66, 137, 0.8);
+  --editorInlayHint-typeForeground: #c8e1ff;
+  --editorInlayHint-typeBackground: rgba(4, 66, 137, 0.8);
+  --editorInlayHint-parameterForeground: #c8e1ff;
+  --editorInlayHint-parameterBackground: rgba(4, 66, 137, 0.8);
+  --editorLightBulb-foreground: #ffcc00;
+  --editorLightBulbAutoFix-foreground: #75beff;
+  --diffEditor-insertedTextBackground: rgba(40, 167, 69, 0.19);
+  --diffEditor-removedTextBackground: rgba(215, 58, 73, 0.19);
+  --diffEditor-insertedLineBackground: rgba(155, 185, 85, 0.2);
+  --diffEditor-removedLineBackground: rgba(255, 0, 0, 0.2);
+  --diffEditor-diagonalFill: rgba(204, 204, 204, 0.2);
+  --list-focusBackground: #044289;
+  --list-focusOutline: #005cc5;
+  --list-activeSelectionBackground: #39414a;
+  --list-activeSelectionForeground: #e1e4e8;
+  --list-inactiveSelectionBackground: #282e34;
+  --list-inactiveSelectionForeground: #e1e4e8;
+  --list-inactiveFocusBackground: #1d2d3e;
+  --list-hoverBackground: #282e34;
+  --list-hoverForeground: #e1e4e8;
+  --list-dropBackground: #062f4a;
+  --list-highlightForeground: #2aaaff;
+  --list-focusHighlightForeground: #2aaaff;
+  --list-invalidItemForeground: #b89500;
+  --list-errorForeground: #f88070;
+  --list-warningForeground: #cca700;
+  --listFilterWidget-background: #1f2428;
+  --listFilterWidget-outline: rgba(0, 0, 0, 0);
+  --listFilterWidget-noMatchesOutline: #be1100;
+  --listFilterWidget-shadow: rgba(0, 0, 0, 0.36);
+  --list-filterMatchBackground: rgba(255, 211, 61, 0.13);
+  --tree-indentGuidesStroke: #2f363d;
+  --tree-inactiveIndentGuidesStroke: rgba(47, 54, 61, 0.4);
+  --tree-tableColumnsBorder: rgba(204, 204, 204, 0.13);
+  --tree-tableOddRowsBackground: rgba(209, 213, 218, 0.04);
+  --list-deemphasizedForeground: #8c8c8c;
+  --checkbox-background: #444d56;
+  --checkbox-selectBackground: #1f2428;
+  --checkbox-foreground: #e1e4e8;
+  --checkbox-border: #1b1f23;
+  --checkbox-selectBorder: #1f2428;
+  --quickInputList-focusForeground: #e1e4e8;
+  --quickInputList-focusBackground: #39414a;
+  --menu-foreground: #e1e4e8;
+  --menu-background: #2f363d;
+  --menu-selectionForeground: #e1e4e8;
+  --menu-selectionBackground: #39414a;
+  --menu-separatorBackground: #606060;
+  --toolbar-hoverBackground: rgba(90, 93, 94, 0.31);
+  --toolbar-activeBackground: rgba(99, 102, 103, 0.31);
+  --editor-snippetTabstopHighlightBackground: rgba(124, 124, 124, 0.3);
+  --editor-snippetFinalTabstopHighlightBorder: #525252;
+  --breadcrumb-foreground: #959da5;
+  --breadcrumb-background: #24292e;
+  --breadcrumb-focusForeground: #e1e4e8;
+  --breadcrumb-activeSelectionForeground: #d1d5da;
+  --breadcrumbPicker-background: #2b3036;
+  --merge-currentHeaderBackground: rgba(64, 200, 174, 0.5);
+  --merge-currentContentBackground: rgba(64, 200, 174, 0.2);
+  --merge-incomingHeaderBackground: rgba(64, 166, 255, 0.5);
+  --merge-incomingContentBackground: rgba(64, 166, 255, 0.2);
+  --merge-commonHeaderBackground: rgba(96, 96, 96, 0.4);
+  --merge-commonContentBackground: rgba(96, 96, 96, 0.16);
+  --editorOverviewRuler-currentContentForeground: rgba(64, 200, 174, 0.5);
+  --editorOverviewRuler-incomingContentForeground: rgba(64, 166, 255, 0.5);
+  --editorOverviewRuler-commonContentForeground: rgba(96, 96, 96, 0.4);
+  --editorOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+  --editorOverviewRuler-selectionHighlightForeground: rgba(160, 160, 160, 0.8);
+  --minimap-findMatchHighlight: #d18616;
+  --minimap-selectionOccurrenceHighlight: #676767;
+  --minimap-selectionHighlight: #264f78;
+  --minimap-errorHighlight: rgba(255, 18, 18, 0.7);
+  --minimap-warningHighlight: #ffea7f;
+  --minimap-foregroundOpacity: #000000;
+  --minimapSlider-background: rgba(106, 115, 125, 0.1);
+  --minimapSlider-hoverBackground: rgba(106, 115, 125, 0.13);
+  --minimapSlider-activeBackground: rgba(106, 115, 125, 0.27);
+  --problemsErrorIcon-foreground: #f97583;
+  --problemsWarningIcon-foreground: #ffea7f;
+  --problemsInfoIcon-foreground: #3794ff;
+  --charts-foreground: #d1d5da;
+  --charts-lines: rgba(209, 213, 218, 0.5);
+  --charts-red: #f97583;
+  --charts-blue: #3794ff;
+  --charts-yellow: #ffea7f;
+  --charts-orange: #d18616;
+  --charts-green: #89d185;
+  --charts-purple: #b180d7;
+  --symbolIcon-arrayForeground: #d1d5da;
+  --symbolIcon-booleanForeground: #d1d5da;
+  --symbolIcon-classForeground: #ee9d28;
+  --symbolIcon-colorForeground: #d1d5da;
+  --symbolIcon-constantForeground: #d1d5da;
+  --symbolIcon-constructorForeground: #b180d7;
+  --symbolIcon-enumeratorForeground: #ee9d28;
+  --symbolIcon-enumeratorMemberForeground: #75beff;
+  --symbolIcon-eventForeground: #ee9d28;
+  --symbolIcon-fieldForeground: #75beff;
+  --symbolIcon-fileForeground: #d1d5da;
+  --symbolIcon-folderForeground: #d1d5da;
+  --symbolIcon-functionForeground: #b180d7;
+  --symbolIcon-interfaceForeground: #75beff;
+  --symbolIcon-keyForeground: #d1d5da;
+  --symbolIcon-keywordForeground: #d1d5da;
+  --symbolIcon-methodForeground: #b180d7;
+  --symbolIcon-moduleForeground: #d1d5da;
+  --symbolIcon-namespaceForeground: #d1d5da;
+  --symbolIcon-nullForeground: #d1d5da;
+  --symbolIcon-numberForeground: #d1d5da;
+  --symbolIcon-objectForeground: #d1d5da;
+  --symbolIcon-operatorForeground: #d1d5da;
+  --symbolIcon-packageForeground: #d1d5da;
+  --symbolIcon-propertyForeground: #d1d5da;
+  --symbolIcon-referenceForeground: #d1d5da;
+  --symbolIcon-snippetForeground: #d1d5da;
+  --symbolIcon-stringForeground: #d1d5da;
+  --symbolIcon-structForeground: #d1d5da;
+  --symbolIcon-textForeground: #d1d5da;
+  --symbolIcon-typeParameterForeground: #d1d5da;
+  --symbolIcon-unitForeground: #d1d5da;
+  --symbolIcon-variableForeground: #75beff;
+  --editorHoverWidget-highlightForeground: #2aaaff;
+  --editor-lineHighlightBackground: #2b3036;
+  --editor-lineHighlightBorder: #282828;
+  --editor-rangeHighlightBackground: rgba(255, 255, 255, 0.04);
+  --editor-symbolHighlightBackground: rgba(255, 211, 61, 0.13);
+  --editorCursor-foreground: #c8e1ff;
+  --editorWhitespace-foreground: #444d56;
+  --editorIndentGuide-background: #2f363d;
+  --editorIndentGuide-activeBackground: #444d56;
+  --editorLineNumber-foreground: #444d56;
+  --editorActiveLineNumber-foreground: #c6c6c6;
+  --editorLineNumber-activeForeground: #e1e4e8;
+  --editorRuler-foreground: #5a5a5a;
+  --editorCodeLens-foreground: #999999;
+  --editorBracketMatch-background: rgba(23, 229, 230, 0.31);
+  --editorBracketMatch-border: rgba(23, 229, 230, 0);
+  --editorOverviewRuler-border: #1b1f23;
+  --editorGutter-background: #24292e;
+  --editorUnnecessaryCode-opacity: rgba(0, 0, 0, 0.67);
+  --editorGhostText-foreground: rgba(255, 255, 255, 0.34);
+  --editorOverviewRuler-rangeHighlightForeground: rgba(0, 122, 204, 0.6);
+  --editorOverviewRuler-errorForeground: rgba(255, 18, 18, 0.7);
+  --editorOverviewRuler-warningForeground: #ffea7f;
+  --editorOverviewRuler-infoForeground: #3794ff;
+  --editorBracketHighlight-foreground1: #79b8ff;
+  --editorBracketHighlight-foreground2: #ffab70;
+  --editorBracketHighlight-foreground3: #b392f0;
+  --editorBracketHighlight-foreground4: #79b8ff;
+  --editorBracketHighlight-foreground5: #ffab70;
+  --editorBracketHighlight-foreground6: #b392f0;
+  --editorBracketHighlight-unexpectedBracket-foreground: rgba(255, 18, 18, 0.8);
+  --editorBracketPairGuide-background1: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-background2: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-background3: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-background4: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-background5: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-background6: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-activeBackground1: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-activeBackground2: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-activeBackground3: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-activeBackground4: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-activeBackground5: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-activeBackground6: rgba(0, 0, 0, 0);
+  --editorUnicodeHighlight-border: #bd9b03;
+  --editorUnicodeHighlight-background: rgba(189, 155, 3, 0.15);
+  --editorOverviewRuler-bracketMatchForeground: #a0a0a0;
+  --editor-foldBackground: rgba(88, 96, 105, 0.08);
+  --editorGutter-foldingControlForeground: #c5c5c5;
+  --editor-linkedEditingBackground: rgba(51, 146, 255, 0.13);
+  --editor-wordHighlightBackground: rgba(23, 229, 230, 0);
+  --editor-wordHighlightStrongBackground: rgba(23, 229, 230, 0);
+  --editor-wordHighlightTextBackground: rgba(23, 229, 230, 0);
+  --editor-wordHighlightBorder: rgba(23, 229, 230, 0.6);
+  --editor-wordHighlightStrongBorder: rgba(23, 229, 230, 0.4);
+  --editor-wordHighlightTextBorder: rgba(23, 229, 230, 0.6);
+  --editorOverviewRuler-wordHighlightForeground: rgba(160, 160, 160, 0.8);
+  --editorOverviewRuler-wordHighlightStrongForeground: rgba(192, 160, 192, 0.8);
+  --editorOverviewRuler-wordHighlightTextForeground: rgba(160, 160, 160, 0.8);
+  --peekViewTitle-background: rgba(55, 148, 255, 0.1);
+  --peekViewTitleLabel-foreground: #ffffff;
+  --peekViewTitleDescription-foreground: rgba(204, 204, 204, 0.7);
+  --peekView-border: #3794ff;
+  --peekViewResult-background: #1f2428;
+  --peekViewResult-lineForeground: #bbbbbb;
+  --peekViewResult-fileForeground: #ffffff;
+  --peekViewResult-selectionBackground: rgba(51, 153, 255, 0.2);
+  --peekViewResult-selectionForeground: #ffffff;
+  --peekViewEditor-background: rgba(31, 36, 40, 0.53);
+  --peekViewEditorGutter-background: rgba(31, 36, 40, 0.53);
+  --peekViewEditorStickyScroll-background: rgba(31, 36, 40, 0.53);
+  --peekViewResult-matchHighlightBackground: rgba(255, 211, 61, 0.2);
+  --peekViewEditor-matchHighlightBackground: rgba(255, 211, 61, 0.2);
+  --editorMarkerNavigationError-background: #f97583;
+  --editorMarkerNavigationError-headerBackground: rgba(249, 117, 131, 0.1);
+  --editorMarkerNavigationWarning-background: #ffea7f;
+  --editorMarkerNavigationWarning-headerBackground: rgba(255, 234, 127, 0.1);
+  --editorMarkerNavigationInfo-background: #3794ff;
+  --editorMarkerNavigationInfo-headerBackground: rgba(55, 148, 255, 0.1);
+  --editorMarkerNavigation-background: #24292e;
+  --editorSuggestWidget-background: #1f2428;
+  --editorSuggestWidget-border: #454545;
+  --editorSuggestWidget-foreground: #e1e4e8;
+  --editorSuggestWidget-selectedForeground: #e1e4e8;
+  --editorSuggestWidget-selectedBackground: #39414a;
+  --editorSuggestWidget-highlightForeground: #2aaaff;
+  --editorSuggestWidget-focusHighlightForeground: #2aaaff;
+  --editorSuggestWidgetStatus-foreground: rgba(225, 228, 232, 0.5);
+  --tab-activeBackground: #24292e;
+  --tab-unfocusedActiveBackground: #24292e;
+  --tab-inactiveBackground: #1f2428;
+  --tab-unfocusedInactiveBackground: #1f2428;
+  --tab-activeForeground: #e1e4e8;
+  --tab-inactiveForeground: #959da5;
+  --tab-unfocusedActiveForeground: rgba(225, 228, 232, 0.5);
+  --tab-unfocusedInactiveForeground: rgba(149, 157, 165, 0.5);
+  --tab-hoverBackground: #24292e;
+  --tab-unfocusedHoverBackground: #24292e;
+  --tab-border: #1b1f23;
+  --tab-lastPinnedBorder: #2f363d;
+  --tab-activeBorder: #24292e;
+  --tab-unfocusedActiveBorder: #24292e;
+  --tab-activeBorderTop: #f9826c;
+  --tab-unfocusedActiveBorderTop: #1b1f23;
+  --tab-activeModifiedBorder: #3399cc;
+  --tab-inactiveModifiedBorder: rgba(51, 153, 204, 0.5);
+  --tab-unfocusedActiveModifiedBorder: rgba(51, 153, 204, 0.5);
+  --tab-unfocusedInactiveModifiedBorder: rgba(51, 153, 204, 0.25);
+  --editorPane-background: #24292e;
+  --editorGroupHeader-tabsBackground: #1f2428;
+  --editorGroupHeader-tabsBorder: #1b1f23;
+  --editorGroupHeader-noTabsBackground: #24292e;
+  --editorGroup-border: #1b1f23;
+  --editorGroup-dropBackground: rgba(83, 89, 93, 0.5);
+  --editorGroup-dropIntoPromptForeground: #d1d5da;
+  --editorGroup-dropIntoPromptBackground: #1f2428;
+  --sideBySideEditor-horizontalBorder: #1b1f23;
+  --sideBySideEditor-verticalBorder: #1b1f23;
+  --panel-background: #1f2428;
+  --panel-border: #1b1f23;
+  --panelTitle-activeForeground: #e1e4e8;
+  --panelTitle-inactiveForeground: #959da5;
+  --panelTitle-activeBorder: #f9826c;
+  --panelInput-border: #2f363d;
+  --panel-dropBorder: #e1e4e8;
+  --panelSection-dropBackground: rgba(83, 89, 93, 0.5);
+  --panelSectionHeader-background: rgba(128, 128, 128, 0.2);
+  --panelSection-border: #1b1f23;
+  --banner-background: #39414a;
+  --banner-foreground: #e1e4e8;
+  --banner-iconForeground: #3794ff;
+  --statusBar-foreground: #d1d5da;
+  --statusBar-noFolderForeground: #d1d5da;
+  --statusBar-background: #24292e;
+  --statusBar-noFolderBackground: #24292e;
+  --statusBar-border: #1b1f23;
+  --statusBar-focusBorder: #d1d5da;
+  --statusBar-noFolderBorder: #1b1f23;
+  --statusBarItem-activeBackground: rgba(255, 255, 255, 0.18);
+  --statusBarItem-focusBorder: #d1d5da;
+  --statusBarItem-hoverBackground: rgba(255, 255, 255, 0.12);
+  --statusBarItem-compactHoverBackground: rgba(255, 255, 255, 0.2);
+  --statusBarItem-prominentForeground: #d1d5da;
+  --statusBarItem-prominentBackground: #282e34;
+  --statusBarItem-prominentHoverBackground: rgba(0, 0, 0, 0.3);
+  --statusBarItem-errorBackground: #d3091d;
+  --statusBarItem-errorForeground: #ffffff;
+  --statusBarItem-warningBackground: #e5bf00;
+  --statusBarItem-warningForeground: #ffffff;
+  --activityBar-background: #24292e;
+  --activityBar-foreground: #e1e4e8;
+  --activityBar-inactiveForeground: #6a737d;
+  --activityBar-border: #1b1f23;
+  --activityBar-activeBorder: #f9826c;
+  --activityBar-dropBorder: #e1e4e8;
+  --activityBarBadge-background: #0366d6;
+  --activityBarBadge-foreground: #ffffff;
+  --profileBadge-background: #4d4d4d;
+  --profileBadge-foreground: #ffffff;
+  --statusBarItem-remoteBackground: #24292e;
+  --statusBarItem-remoteForeground: #d1d5da;
+  --extensionBadge-remoteBackground: #0366d6;
+  --extensionBadge-remoteForeground: #ffffff;
+  --sideBar-background: #1f2428;
+  --sideBar-foreground: #d1d5da;
+  --sideBar-border: #1b1f23;
+  --sideBarTitle-foreground: #e1e4e8;
+  --sideBar-dropBackground: rgba(83, 89, 93, 0.5);
+  --sideBarSectionHeader-background: #1f2428;
+  --sideBarSectionHeader-foreground: #e1e4e8;
+  --sideBarSectionHeader-border: #1b1f23;
+  --titleBar-activeForeground: #e1e4e8;
+  --titleBar-inactiveForeground: #959da5;
+  --titleBar-activeBackground: #24292e;
+  --titleBar-inactiveBackground: #1f2428;
+  --titleBar-border: #1b1f23;
+  --menubar-selectionForeground: #e1e4e8;
+  --menubar-selectionBackground: rgba(90, 93, 94, 0.31);
+  --notifications-foreground: #e1e4e8;
+  --notifications-background: #2f363d;
+  --notificationLink-foreground: #79b8ff;
+  --notificationCenterHeader-foreground: #959da5;
+  --notificationCenterHeader-background: #24292e;
+  --notifications-border: #1b1f23;
+  --notificationsErrorIcon-foreground: #ea4a5a;
+  --notificationsWarningIcon-foreground: #ffab70;
+  --notificationsInfoIcon-foreground: #79b8ff;
+  --commandCenter-foreground: #e1e4e8;
+  --commandCenter-activeForeground: #e1e4e8;
+  --commandCenter-inactiveForeground: #959da5;
+  --commandCenter-background: rgba(255, 255, 255, 0.05);
+  --commandCenter-activeBackground: rgba(255, 255, 255, 0.08);
+  --commandCenter-border: rgba(225, 228, 232, 0.2);
+  --commandCenter-activeBorder: rgba(225, 228, 232, 0.3);
+  --commandCenter-inactiveBorder: rgba(149, 157, 165, 0.25);
+  --editorCommentsWidget-resolvedBorder: rgba(204, 204, 204, 0.5);
+  --editorCommentsWidget-unresolvedBorder: #3794ff;
+  --editorCommentsWidget-rangeBackground: rgba(55, 148, 255, 0.1);
+  --editorCommentsWidget-rangeBorder: rgba(55, 148, 255, 0.4);
+  --editorCommentsWidget-rangeActiveBackground: rgba(55, 148, 255, 0.1);
+  --editorCommentsWidget-rangeActiveBorder: rgba(55, 148, 255, 0.4);
+  --editorGutter-commentRangeForeground: #282e34;
+  --editorGutter-commentGlyphForground: #e1e4e8;
+  --debugToolBar-background: #2b3036;
+  --debugIcon-startForeground: #89d185;
+  --editor-stackFrameHighlightBackground: rgba(198, 144, 38, 0.14);
+  --editor-focusedStackFrameHighlightBackground: rgba(43, 106, 48, 0.2);
+  --mergeEditor-change-background: rgba(155, 185, 85, 0.2);
+  --mergeEditor-change-word-background: rgba(156, 204, 44, 0.2);
+  --mergeEditor-changeBase-background: #4b1818;
+  --mergeEditor-changeBase-word-background: #6f1313;
+  --mergeEditor-conflict-unhandledUnfocused-border: rgba(255, 166, 0, 0.48);
+  --mergeEditor-conflict-unhandledFocused-border: #ffa600;
+  --mergeEditor-conflict-handledUnfocused-border: rgba(134, 134, 134, 0.29);
+  --mergeEditor-conflict-handledFocused-border: rgba(193, 193, 193, 0.8);
+  --mergeEditor-conflict-handled-minimapOverViewRuler: rgba(173, 172, 168, 0.93);
+  --mergeEditor-conflict-unhandled-minimapOverViewRuler: #fcba03;
+  --mergeEditor-conflictingLines-background: rgba(255, 234, 0, 0.28);
+  --mergeEditor-conflict-input1-background: rgba(64, 200, 174, 0.2);
+  --mergeEditor-conflict-input2-background: rgba(64, 166, 255, 0.2);
+  --settings-headerForeground: #e1e4e8;
+  --settings-settingsHeaderHoverForeground: rgba(225, 228, 232, 0.7);
+  --settings-modifiedItemIndicator: #0366d6;
+  --settings-headerBorder: #1b1f23;
+  --settings-sashBorder: #1b1f23;
+  --settings-dropdownBackground: #2f363d;
+  --settings-dropdownForeground: #e1e4e8;
+  --settings-dropdownBorder: #1b1f23;
+  --settings-dropdownListBorder: #454545;
+  --settings-checkboxBackground: #444d56;
+  --settings-checkboxForeground: #e1e4e8;
+  --settings-checkboxBorder: #1b1f23;
+  --settings-textInputBackground: #2f363d;
+  --settings-textInputForeground: #e1e4e8;
+  --settings-textInputBorder: #1b1f23;
+  --settings-numberInputBackground: #2f363d;
+  --settings-numberInputForeground: #e1e4e8;
+  --settings-numberInputBorder: #1b1f23;
+  --settings-focusedRowBackground: rgba(40, 46, 52, 0.6);
+  --settings-rowHoverBackground: rgba(40, 46, 52, 0.3);
+  --settings-focusedRowBorder: #005cc5;
+  --terminal-foreground: #d1d5da;
+  --terminalCursor-foreground: #79b8ff;
+  --terminalCursor-background: #586069;
+  --terminal-selectionBackground: rgba(51, 146, 255, 0.27);
+  --terminal-inactiveSelectionBackground: rgba(51, 146, 255, 0.13);
+  --terminalCommandDecoration-defaultBackground: rgba(255, 255, 255, 0.25);
+  --terminalCommandDecoration-successBackground: #1b81a8;
+  --terminalCommandDecoration-errorBackground: #f14c4c;
+  --terminalOverviewRuler-cursorForeground: rgba(160, 160, 160, 0.8);
+  --terminal-border: #1b1f23;
+  --terminal-findMatchBackground: rgba(255, 211, 61, 0.27);
+  --terminal-findMatchHighlightBackground: rgba(255, 211, 61, 0.13);
+  --terminalOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+  --terminal-dropBackground: rgba(83, 89, 93, 0.5);
+  --terminal-tab-activeBorder: #f9826c;
+  --testing-iconFailed: #f14c4c;
+  --testing-iconErrored: #f14c4c;
+  --testing-iconPassed: #73c991;
+  --testing-runAction: #73c991;
+  --testing-iconQueued: #cca700;
+  --testing-iconUnset: #848484;
+  --testing-iconSkipped: #848484;
+  --testing-peekBorder: #f97583;
+  --testing-peekHeaderBackground: rgba(249, 117, 131, 0.1);
+  --testing-message-error-decorationForeground: #f97583;
+  --testing-message-error-lineBackground: rgba(255, 0, 0, 0.2);
+  --testing-message-info-decorationForeground: rgba(225, 228, 232, 0.5);
+  --welcomePage-tileBackground: #1f2428;
+  --welcomePage-tileHoverBackground: #252b30;
+  --welcomePage-tileBorder: rgba(255, 255, 255, 0.1);
+  --welcomePage-progress-background: #2f363d;
+  --welcomePage-progress-foreground: #79b8ff;
+  --walkthrough-stepTitle-foreground: #ffffff;
+  --welcomeOverlay-background: rgba(0, 0, 0, 0.52);
+  --debugExceptionWidget-border: #a31515;
+  --debugExceptionWidget-background: #420b0d;
+  --ports-iconRunningProcessForeground: #24292e;
+  --statusBar-debuggingBackground: #931c06;
+  --statusBar-debuggingForeground: #ffffff;
+  --statusBar-debuggingBorder: #1b1f23;
+  --editor-inlineValuesForeground: rgba(255, 255, 255, 0.5);
+  --editor-inlineValuesBackground: rgba(255, 200, 0, 0.2);
+  --editorGutter-modifiedBackground: #2188ff;
+  --editorGutter-addedBackground: #28a745;
+  --editorGutter-deletedBackground: #ea4a5a;
+  --minimapGutter-modifiedBackground: #2188ff;
+  --minimapGutter-addedBackground: #28a745;
+  --minimapGutter-deletedBackground: #ea4a5a;
+  --editorOverviewRuler-modifiedForeground: rgba(33, 136, 255, 0.6);
+  --editorOverviewRuler-addedForeground: rgba(40, 167, 69, 0.6);
+  --editorOverviewRuler-deletedForeground: rgba(234, 74, 90, 0.6);
+  --debugIcon-breakpointForeground: #e51400;
+  --debugIcon-breakpointDisabledForeground: #848484;
+  --debugIcon-breakpointUnverifiedForeground: #848484;
+  --debugIcon-breakpointCurrentStackframeForeground: #ffcc00;
+  --debugIcon-breakpointStackframeForeground: #89d185;
+  --notebook-cellBorderColor: #282e34;
+  --notebook-focusedEditorBorder: #005cc5;
+  --notebookStatusSuccessIcon-foreground: #89d185;
+  --notebookEditorOverviewRuler-runningCellForeground: #89d185;
+  --notebookStatusErrorIcon-foreground: #f97583;
+  --notebookStatusRunningIcon-foreground: #d1d5da;
+  --notebook-cellToolbarSeparator: rgba(128, 128, 128, 0.35);
+  --notebook-selectedCellBackground: #282e34;
+  --notebook-selectedCellBorder: #282e34;
+  --notebook-focusedCellBorder: #005cc5;
+  --notebook-inactiveFocusedCellBorder: #282e34;
+  --notebook-cellStatusBarItemHoverBackground: rgba(255, 255, 255, 0.15);
+  --notebook-cellInsertionIndicator: #005cc5;
+  --notebookScrollbarSlider-background: rgba(106, 115, 125, 0.2);
+  --notebookScrollbarSlider-hoverBackground: rgba(106, 115, 125, 0.27);
+  --notebookScrollbarSlider-activeBackground: rgba(106, 115, 125, 0.53);
+  --notebook-symbolHighlightBackground: rgba(255, 255, 255, 0.04);
+  --notebook-cellEditorBackground: #1f2428;
+  --notebook-editorBackground: #24292e;
+  --keybindingTable-headerBackground: rgba(209, 213, 218, 0.04);
+  --keybindingTable-rowsBackground: rgba(209, 213, 218, 0.04);
+  --scm-providerBorder: #454545;
+  --searchEditor-textInputBorder: #1b1f23;
+  --debugTokenExpression-name: #c586c0;
+  --debugTokenExpression-value: rgba(204, 204, 204, 0.6);
+  --debugTokenExpression-string: #ce9178;
+  --debugTokenExpression-boolean: #4e94ce;
+  --debugTokenExpression-number: #b5cea8;
+  --debugTokenExpression-error: #f48771;
+  --debugView-exceptionLabelForeground: #d1d5da;
+  --debugView-exceptionLabelBackground: #6c2022;
+  --debugView-stateLabelForeground: #d1d5da;
+  --debugView-stateLabelBackground: rgba(136, 136, 136, 0.27);
+  --debugView-valueChangedHighlight: #569cd6;
+  --debugConsole-infoForeground: #3794ff;
+  --debugConsole-warningForeground: #ffea7f;
+  --debugConsole-errorForeground: #f97583;
+  --debugConsole-sourceForeground: #d1d5da;
+  --debugConsoleInputIcon-foreground: #d1d5da;
+  --debugIcon-pauseForeground: #75beff;
+  --debugIcon-stopForeground: #f48771;
+  --debugIcon-disconnectForeground: #f48771;
+  --debugIcon-restartForeground: #89d185;
+  --debugIcon-stepOverForeground: #75beff;
+  --debugIcon-stepIntoForeground: #75beff;
+  --debugIcon-stepOutForeground: #75beff;
+  --debugIcon-continueForeground: #75beff;
+  --debugIcon-stepBackForeground: #75beff;
+  --extensionButton-background: #176f2c;
+  --extensionButton-foreground: #dcffe4;
+  --extensionButton-hoverBackground: #22863a;
+  --extensionButton-separator: rgba(220, 255, 228, 0.4);
+  --extensionButton-prominentBackground: #176f2c;
+  --extensionButton-prominentForeground: #dcffe4;
+  --extensionButton-prominentHoverBackground: #22863a;
+  --extensionIcon-starForeground: #ff8e00;
+  --extensionIcon-verifiedForeground: #79b8ff;
+  --extensionIcon-preReleaseForeground: #1d9271;
+  --extensionIcon-sponsorForeground: #d758b3;
+  --terminal-ansiBlack: #586069;
+  --terminal-ansiRed: #ea4a5a;
+  --terminal-ansiGreen: #34d058;
+  --terminal-ansiYellow: #ffea7f;
+  --terminal-ansiBlue: #2188ff;
+  --terminal-ansiMagenta: #b392f0;
+  --terminal-ansiCyan: #39c5cf;
+  --terminal-ansiWhite: #d1d5da;
+  --terminal-ansiBrightBlack: #959da5;
+  --terminal-ansiBrightRed: #f97583;
+  --terminal-ansiBrightGreen: #85e89d;
+  --terminal-ansiBrightYellow: #ffea7f;
+  --terminal-ansiBrightBlue: #79b8ff;
+  --terminal-ansiBrightMagenta: #b392f0;
+  --terminal-ansiBrightCyan: #56d4dd;
+  --terminal-ansiBrightWhite: #fafbfc;
+  --interactive-activeCodeBorder: #3794ff;
+  --interactive-inactiveCodeBorder: #282e34;
+  --gitDecoration-addedResourceForeground: #34d058;
+  --gitDecoration-modifiedResourceForeground: #79b8ff;
+  --gitDecoration-deletedResourceForeground: #ea4a5a;
+  --gitDecoration-renamedResourceForeground: #73c991;
+  --gitDecoration-untrackedResourceForeground: #34d058;
+  --gitDecoration-ignoredResourceForeground: #6a737d;
+  --gitDecoration-stageModifiedResourceForeground: #e2c08d;
+  --gitDecoration-stageDeletedResourceForeground: #c74e39;
+  --gitDecoration-conflictingResourceForeground: #ffab70;
+  --gitDecoration-submoduleResourceForeground: #6a737d;
+  --gitlens-gutterBackgroundColor: rgba(255, 255, 255, 0.07);
+  --gitlens-gutterForegroundColor: #bebebe;
+  --gitlens-gutterUncommittedForegroundColor: rgba(0, 188, 242, 0.6);
+  --gitlens-trailingLineBackgroundColor: rgba(0, 0, 0, 0);
+  --gitlens-trailingLineForegroundColor: rgba(153, 153, 153, 0.35);
+  --gitlens-lineHighlightBackgroundColor: rgba(0, 188, 242, 0.2);
+  --gitlens-lineHighlightOverviewRulerColor: rgba(0, 188, 242, 0.6);
+  --gitlens-openAutolinkedIssueIconColor: #3fb950;
+  --gitlens-closedAutolinkedIssueIconColor: #a371f7;
+  --gitlens-closedPullRequestIconColor: #f85149;
+  --gitlens-openPullRequestIconColor: #3fb950;
+  --gitlens-mergedPullRequestIconColor: #a371f7;
+  --gitlens-unpublishedChangesIconColor: #35b15e;
+  --gitlens-unpublishedCommitIconColor: #35b15e;
+  --gitlens-unpulledChangesIconColor: #b15e35;
+  --gitlens-decorations-addedForegroundColor: #34d058;
+  --gitlens-decorations-copiedForegroundColor: #73c991;
+  --gitlens-decorations-deletedForegroundColor: #ea4a5a;
+  --gitlens-decorations-ignoredForegroundColor: #6a737d;
+  --gitlens-decorations-modifiedForegroundColor: #79b8ff;
+  --gitlens-decorations-untrackedForegroundColor: #34d058;
+  --gitlens-decorations-renamedForegroundColor: #73c991;
+  --gitlens-decorations-branchAheadForegroundColor: #35b15e;
+  --gitlens-decorations-branchBehindForegroundColor: #b15e35;
+  --gitlens-decorations-branchDivergedForegroundColor: #d8af1b;
+  --gitlens-decorations-branchUpToDateForegroundColor: #d1d5da;
+  --gitlens-decorations-branchUnpublishedForegroundColor: #35b15e;
+  --gitlens-decorations-branchMissingUpstreamForegroundColor: #c74e39;
+  --gitlens-decorations-worktreeView-hasUncommittedChangesForegroundColor: #e2c08d;
+  --gitlens-graphLane1Color: #15a0bf;
+  --gitlens-graphLane2Color: #0669f7;
+  --gitlens-graphLane3Color: #8e00c2;
+  --gitlens-graphLane4Color: #c517b6;
+  --gitlens-graphLane5Color: #d90171;
+  --gitlens-graphLane6Color: #cd0101;
+  --gitlens-graphLane7Color: #f25d2e;
+  --gitlens-graphLane8Color: #f2ca33;
+  --gitlens-graphLane9Color: #7bd938;
+  --gitlens-graphLane10Color: #2ece9d;
+  --gitlens-graphChangesColumnAddedColor: #347d39;
+  --gitlens-graphChangesColumnDeletedColor: #c93c37;
+  --gitlens-graphMinimapMarkerHeadColor: #05e617;
+  --gitlens-graphScrollMarkerHeadColor: #05e617;
+  --gitlens-graphMinimapMarkerUpstreamColor: #09ae17;
+  --gitlens-graphScrollMarkerUpstreamColor: #09ae17;
+  --gitlens-graphMinimapMarkerHighlightsColor: #fbff0a;
+  --gitlens-graphScrollMarkerHighlightsColor: #fbff0a;
+  --gitlens-graphMinimapMarkerLocalBranchesColor: #3087cf;
+  --gitlens-graphScrollMarkerLocalBranchesColor: #3087cf;
+  --gitlens-graphMinimapMarkerRemoteBranchesColor: #2b5e88;
+  --gitlens-graphScrollMarkerRemoteBranchesColor: #2b5e88;
+  --gitlens-graphMinimapMarkerStashesColor: #b34db3;
+  --gitlens-graphScrollMarkerStashesColor: #b34db3;
+  --gitlens-graphMinimapMarkerTagsColor: #6b562e;
+  --gitlens-graphScrollMarkerTagsColor: #6b562e;
+  --issues-newIssueDecoration: rgba(255, 255, 255, 0.28);
+  --issues-open: #3fb950;
+  --issues-closed: #cb2431;
+  --pullRequests-merged: #8957e5;
+  --pullRequests-draft: #6e7681;
+  --pullRequests-open: #3fb950;
+  --pullRequests-closed: #cb2431;
+  --pullRequests-notification: #79b8ff;
+}
+
+.monaco-workbench.dark-default {
+  --foreground: #c9d1d9;
+  --disabledForeground: rgba(204, 204, 204, 0.5);
+  --errorForeground: #f85149;
+  --descriptionForeground: #8b949e;
+  --icon-foreground: #8b949e;
+  --focusBorder: #1f6feb;
+  --textSeparator-foreground: #21262d;
+  --textLink-foreground: #58a6ff;
+  --textLink-activeForeground: #58a6ff;
+  --textPreformat-foreground: #8b949e;
+  --textBlockQuote-background: #010409;
+  --textBlockQuote-border: #30363d;
+  --textCodeBlock-background: rgba(110, 118, 129, 0.4);
+  --widget-shadow: rgba(0, 0, 0, 0.36);
+  --input-background: #0d1117;
+  --input-foreground: #c9d1d9;
+  --input-border: #30363d;
+  --inputOption-activeBorder: #007acc;
+  --inputOption-hoverBackground: rgba(90, 93, 94, 0.5);
+  --inputOption-activeBackground: rgba(31, 111, 235, 0.4);
+  --inputOption-activeForeground: #ffffff;
+  --input-placeholderForeground: #6e7681;
+  --inputValidation-infoBackground: #063b49;
+  --inputValidation-infoBorder: #007acc;
+  --inputValidation-warningBackground: #352a05;
+  --inputValidation-warningBorder: #b89500;
+  --inputValidation-errorBackground: #5a1d1d;
+  --inputValidation-errorBorder: #be1100;
+  --dropdown-background: #161b22;
+  --dropdown-listBackground: #161b22;
+  --dropdown-foreground: #c9d1d9;
+  --dropdown-border: #30363d;
+  --button-foreground: #ffffff;
+  --button-separator: rgba(255, 255, 255, 0.4);
+  --button-background: #238636;
+  --button-hoverBackground: #2ea043;
+  --button-secondaryForeground: #c9d1d9;
+  --button-secondaryBackground: #282e33;
+  --button-secondaryHoverBackground: #30363d;
+  --badge-background: #1f6feb;
+  --badge-foreground: #ffffff;
+  --scrollbar-shadow: rgba(72, 79, 88, 0.2);
+  --scrollbarSlider-background: rgba(139, 148, 158, 0.2);
+  --scrollbarSlider-hoverBackground: rgba(139, 148, 158, 0.24);
+  --scrollbarSlider-activeBackground: rgba(139, 148, 158, 0.28);
+  --progressBar-background: #1f6feb;
+  --editorError-foreground: #f14c4c;
+  --editorWarning-foreground: #cca700;
+  --editorInfo-foreground: #3794ff;
+  --editorHint-foreground: rgba(238, 238, 238, 0.7);
+  --sash-hoverBorder: #1f6feb;
+  --editor-background: #0d1117;
+  --editor-foreground: #c9d1d9;
+  --editorStickyScroll-background: #0d1117;
+  --editorStickyScrollHover-background: #2a2d2e;
+  --editorWidget-background: #161b22;
+  --editorWidget-foreground: #c9d1d9;
+  --editorWidget-border: #454545;
+  --quickInput-background: #161b22;
+  --quickInput-foreground: #c9d1d9;
+  --quickInputTitle-background: rgba(255, 255, 255, 0.1);
+  --pickerGroup-foreground: #8b949e;
+  --pickerGroup-border: #30363d;
+  --keybindingLabel-background: rgba(128, 128, 128, 0.17);
+  --keybindingLabel-foreground: #c9d1d9;
+  --keybindingLabel-border: rgba(51, 51, 51, 0.6);
+  --keybindingLabel-bottomBorder: rgba(68, 68, 68, 0.6);
+  --editor-selectionBackground: #264f78;
+  --editor-inactiveSelectionBackground: rgba(38, 79, 120, 0.5);
+  --editor-selectionHighlightBackground: rgba(63, 185, 80, 0.25);
+  --editor-findMatchBackground: #9e6a03;
+  --editor-findMatchHighlightBackground: rgba(242, 204, 96, 0.5);
+  --editor-findRangeHighlightBackground: rgba(58, 61, 65, 0.4);
+  --searchEditor-findMatchBackground: rgba(242, 204, 96, 0.33);
+  --editor-hoverHighlightBackground: rgba(38, 79, 120, 0.25);
+  --editorHoverWidget-background: #161b22;
+  --editorHoverWidget-foreground: #c9d1d9;
+  --editorHoverWidget-border: #454545;
+  --editorHoverWidget-statusBarBackground: #1a2029;
+  --editorLink-activeForeground: #4e94ce;
+  --editorInlayHint-foreground: #8b949e;
+  --editorInlayHint-background: rgba(139, 148, 158, 0.2);
+  --editorInlayHint-typeForeground: #8b949e;
+  --editorInlayHint-typeBackground: rgba(139, 148, 158, 0.2);
+  --editorInlayHint-parameterForeground: #8b949e;
+  --editorInlayHint-parameterBackground: rgba(139, 148, 158, 0.2);
+  --editorLightBulb-foreground: #ffcc00;
+  --editorLightBulbAutoFix-foreground: #75beff;
+  --diffEditor-insertedTextBackground: rgba(63, 185, 80, 0.3);
+  --diffEditor-removedTextBackground: rgba(255, 123, 114, 0.3);
+  --diffEditor-insertedLineBackground: rgba(35, 134, 54, 0.15);
+  --diffEditor-removedLineBackground: rgba(218, 54, 51, 0.15);
+  --diffEditor-diagonalFill: rgba(204, 204, 204, 0.2);
+  --list-focusBackground: rgba(56, 139, 253, 0.15);
+  --list-focusForeground: #c9d1d9;
+  --list-focusOutline: #1f6feb;
+  --list-activeSelectionBackground: rgba(110, 118, 129, 0.4);
+  --list-activeSelectionForeground: #c9d1d9;
+  --list-inactiveSelectionBackground: rgba(110, 118, 129, 0.4);
+  --list-inactiveSelectionForeground: #c9d1d9;
+  --list-inactiveFocusBackground: rgba(56, 139, 253, 0.15);
+  --list-hoverBackground: rgba(110, 118, 129, 0.1);
+  --list-hoverForeground: #c9d1d9;
+  --list-dropBackground: #062f4a;
+  --list-highlightForeground: #58a6ff;
+  --list-focusHighlightForeground: #58a6ff;
+  --list-invalidItemForeground: #b89500;
+  --list-errorForeground: #f88070;
+  --list-warningForeground: #cca700;
+  --listFilterWidget-background: #161b22;
+  --listFilterWidget-outline: rgba(0, 0, 0, 0);
+  --listFilterWidget-noMatchesOutline: #be1100;
+  --listFilterWidget-shadow: rgba(0, 0, 0, 0.36);
+  --list-filterMatchBackground: rgba(242, 204, 96, 0.5);
+  --tree-indentGuidesStroke: #21262d;
+  --tree-inactiveIndentGuidesStroke: rgba(33, 38, 45, 0.4);
+  --tree-tableColumnsBorder: rgba(204, 204, 204, 0.13);
+  --tree-tableOddRowsBackground: rgba(201, 209, 217, 0.04);
+  --list-deemphasizedForeground: #8c8c8c;
+  --checkbox-background: #161b22;
+  --checkbox-selectBackground: #161b22;
+  --checkbox-foreground: #c9d1d9;
+  --checkbox-border: #30363d;
+  --checkbox-selectBorder: #161b22;
+  --quickInputList-focusForeground: #c9d1d9;
+  --quickInputList-focusBackground: rgba(110, 118, 129, 0.4);
+  --menu-foreground: #c9d1d9;
+  --menu-background: #161b22;
+  --menu-selectionForeground: #c9d1d9;
+  --menu-selectionBackground: rgba(110, 118, 129, 0.4);
+  --menu-separatorBackground: #606060;
+  --toolbar-hoverBackground: rgba(90, 93, 94, 0.31);
+  --toolbar-activeBackground: rgba(99, 102, 103, 0.31);
+  --editor-snippetTabstopHighlightBackground: rgba(124, 124, 124, 0.3);
+  --editor-snippetFinalTabstopHighlightBorder: #525252;
+  --breadcrumb-foreground: #8b949e;
+  --breadcrumb-background: #0d1117;
+  --breadcrumb-focusForeground: #c9d1d9;
+  --breadcrumb-activeSelectionForeground: #8b949e;
+  --breadcrumbPicker-background: #161b22;
+  --merge-currentHeaderBackground: rgba(64, 200, 174, 0.5);
+  --merge-currentContentBackground: rgba(64, 200, 174, 0.2);
+  --merge-incomingHeaderBackground: rgba(64, 166, 255, 0.5);
+  --merge-incomingContentBackground: rgba(64, 166, 255, 0.2);
+  --merge-commonHeaderBackground: rgba(96, 96, 96, 0.4);
+  --merge-commonContentBackground: rgba(96, 96, 96, 0.16);
+  --editorOverviewRuler-currentContentForeground: rgba(64, 200, 174, 0.5);
+  --editorOverviewRuler-incomingContentForeground: rgba(64, 166, 255, 0.5);
+  --editorOverviewRuler-commonContentForeground: rgba(96, 96, 96, 0.4);
+  --editorOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+  --editorOverviewRuler-selectionHighlightForeground: rgba(160, 160, 160, 0.8);
+  --minimap-findMatchHighlight: #d18616;
+  --minimap-selectionOccurrenceHighlight: #676767;
+  --minimap-selectionHighlight: #264f78;
+  --minimap-errorHighlight: rgba(255, 18, 18, 0.7);
+  --minimap-warningHighlight: #cca700;
+  --minimap-foregroundOpacity: #000000;
+  --minimapSlider-background: rgba(139, 148, 158, 0.2);
+  --minimapSlider-hoverBackground: rgba(139, 148, 158, 0.24);
+  --minimapSlider-activeBackground: rgba(139, 148, 158, 0.28);
+  --problemsErrorIcon-foreground: #f14c4c;
+  --problemsWarningIcon-foreground: #cca700;
+  --problemsInfoIcon-foreground: #3794ff;
+  --charts-foreground: #c9d1d9;
+  --charts-lines: rgba(201, 209, 217, 0.5);
+  --charts-red: #f14c4c;
+  --charts-blue: #3794ff;
+  --charts-yellow: #cca700;
+  --charts-orange: #d18616;
+  --charts-green: #89d185;
+  --charts-purple: #b180d7;
+  --symbolIcon-arrayForeground: #f0883e;
+  --symbolIcon-booleanForeground: #58a6ff;
+  --symbolIcon-classForeground: #f0883e;
+  --symbolIcon-colorForeground: #79c0ff;
+  --symbolIcon-constantForeground: #c9d1d9;
+  --symbolIcon-constructorForeground: #d2a8ff;
+  --symbolIcon-enumeratorForeground: #f0883e;
+  --symbolIcon-enumeratorMemberForeground: #58a6ff;
+  --symbolIcon-eventForeground: #6e7681;
+  --symbolIcon-fieldForeground: #f0883e;
+  --symbolIcon-fileForeground: #d29922;
+  --symbolIcon-folderForeground: #d29922;
+  --symbolIcon-functionForeground: #bc8cff;
+  --symbolIcon-interfaceForeground: #f0883e;
+  --symbolIcon-keyForeground: #58a6ff;
+  --symbolIcon-keywordForeground: #ff7b72;
+  --symbolIcon-methodForeground: #bc8cff;
+  --symbolIcon-moduleForeground: #ff7b72;
+  --symbolIcon-namespaceForeground: #ff7b72;
+  --symbolIcon-nullForeground: #58a6ff;
+  --symbolIcon-numberForeground: #3fb950;
+  --symbolIcon-objectForeground: #f0883e;
+  --symbolIcon-operatorForeground: #79c0ff;
+  --symbolIcon-packageForeground: #f0883e;
+  --symbolIcon-propertyForeground: #f0883e;
+  --symbolIcon-referenceForeground: #58a6ff;
+  --symbolIcon-snippetForeground: #58a6ff;
+  --symbolIcon-stringForeground: #79c0ff;
+  --symbolIcon-structForeground: #f0883e;
+  --symbolIcon-textForeground: #79c0ff;
+  --symbolIcon-typeParameterForeground: #79c0ff;
+  --symbolIcon-unitForeground: #58a6ff;
+  --symbolIcon-variableForeground: #f0883e;
+  --editorHoverWidget-highlightForeground: #58a6ff;
+  --editor-lineHighlightBackground: rgba(110, 118, 129, 0.1);
+  --editor-lineHighlightBorder: #282828;
+  --editor-rangeHighlightBackground: rgba(255, 255, 255, 0.04);
+  --editor-symbolHighlightBackground: rgba(242, 204, 96, 0.5);
+  --editorCursor-foreground: #58a6ff;
+  --editorWhitespace-foreground: #484f58;
+  --editorIndentGuide-background: rgba(201, 209, 217, 0.12);
+  --editorIndentGuide-activeBackground: rgba(201, 209, 217, 0.24);
+  --editorLineNumber-foreground: #6e7681;
+  --editorActiveLineNumber-foreground: #c6c6c6;
+  --editorLineNumber-activeForeground: #c9d1d9;
+  --editorRuler-foreground: #5a5a5a;
+  --editorCodeLens-foreground: #999999;
+  --editorBracketMatch-background: rgba(63, 185, 80, 0.25);
+  --editorBracketMatch-border: rgba(63, 185, 80, 0.6);
+  --editorOverviewRuler-border: #010409;
+  --editorGutter-background: #0d1117;
+  --editorUnnecessaryCode-opacity: rgba(0, 0, 0, 0.67);
+  --editorGhostText-foreground: rgba(255, 255, 255, 0.34);
+  --editorOverviewRuler-rangeHighlightForeground: rgba(0, 122, 204, 0.6);
+  --editorOverviewRuler-errorForeground: rgba(255, 18, 18, 0.7);
+  --editorOverviewRuler-warningForeground: #cca700;
+  --editorOverviewRuler-infoForeground: #3794ff;
+  --editorBracketHighlight-foreground1: #79c0ff;
+  --editorBracketHighlight-foreground2: #56d364;
+  --editorBracketHighlight-foreground3: #e3b341;
+  --editorBracketHighlight-foreground4: #ffa198;
+  --editorBracketHighlight-foreground5: #ff9bce;
+  --editorBracketHighlight-foreground6: #d2a8ff;
+  --editorBracketHighlight-unexpectedBracket-foreground: #8b949e;
+  --editorBracketPairGuide-background1: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-background2: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-background3: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-background4: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-background5: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-background6: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-activeBackground1: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-activeBackground2: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-activeBackground3: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-activeBackground4: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-activeBackground5: rgba(0, 0, 0, 0);
+  --editorBracketPairGuide-activeBackground6: rgba(0, 0, 0, 0);
+  --editorUnicodeHighlight-border: #bd9b03;
+  --editorUnicodeHighlight-background: rgba(189, 155, 3, 0.15);
+  --editorOverviewRuler-bracketMatchForeground: #a0a0a0;
+  --editor-foldBackground: rgba(110, 118, 129, 0.1);
+  --editorGutter-foldingControlForeground: #8b949e;
+  --editor-linkedEditingBackground: rgba(88, 166, 255, 0.07);
+  --editor-wordHighlightBackground: rgba(110, 118, 129, 0.5);
+  --editor-wordHighlightStrongBackground: rgba(110, 118, 129, 0.3);
+  --editor-wordHighlightTextBackground: rgba(110, 118, 129, 0.5);
+  --editor-wordHighlightBorder: rgba(110, 118, 129, 0.6);
+  --editor-wordHighlightStrongBorder: rgba(110, 118, 129, 0.6);
+  --editor-wordHighlightTextBorder: rgba(110, 118, 129, 0.6);
+  --editorOverviewRuler-wordHighlightForeground: rgba(160, 160, 160, 0.8);
+  --editorOverviewRuler-wordHighlightStrongForeground: rgba(192, 160, 192, 0.8);
+  --editorOverviewRuler-wordHighlightTextForeground: rgba(160, 160, 160, 0.8);
+  --peekViewTitle-background: rgba(55, 148, 255, 0.1);
+  --peekViewTitleLabel-foreground: #ffffff;
+  --peekViewTitleDescription-foreground: rgba(204, 204, 204, 0.7);
+  --peekView-border: #3794ff;
+  --peekViewResult-background: #0d1117;
+  --peekViewResult-lineForeground: #bbbbbb;
+  --peekViewResult-fileForeground: #ffffff;
+  --peekViewResult-selectionBackground: rgba(51, 153, 255, 0.2);
+  --peekViewResult-selectionForeground: #ffffff;
+  --peekViewEditor-background: rgba(110, 118, 129, 0.1);
+  --peekViewEditorGutter-background: rgba(110, 118, 129, 0.1);
+  --peekViewEditorStickyScroll-background: rgba(110, 118, 129, 0.1);
+  --peekViewResult-matchHighlightBackground: rgba(187, 128, 9, 0.4);
+  --peekViewEditor-matchHighlightBackground: rgba(187, 128, 9, 0.4);
+  --editorMarkerNavigationError-background: #f14c4c;
+  --editorMarkerNavigationError-headerBackground: rgba(241, 76, 76, 0.1);
+  --editorMarkerNavigationWarning-background: #cca700;
+  --editorMarkerNavigationWarning-headerBackground: rgba(204, 167, 0, 0.1);
+  --editorMarkerNavigationInfo-background: #3794ff;
+  --editorMarkerNavigationInfo-headerBackground: rgba(55, 148, 255, 0.1);
+  --editorMarkerNavigation-background: #0d1117;
+  --editorSuggestWidget-background: #161b22;
+  --editorSuggestWidget-border: #454545;
+  --editorSuggestWidget-foreground: #c9d1d9;
+  --editorSuggestWidget-selectedForeground: #c9d1d9;
+  --editorSuggestWidget-selectedBackground: rgba(110, 118, 129, 0.4);
+  --editorSuggestWidget-highlightForeground: #58a6ff;
+  --editorSuggestWidget-focusHighlightForeground: #58a6ff;
+  --editorSuggestWidgetStatus-foreground: rgba(201, 209, 217, 0.5);
+  --tab-activeBackground: #0d1117;
+  --tab-unfocusedActiveBackground: #0d1117;
+  --tab-inactiveBackground: #010409;
+  --tab-unfocusedInactiveBackground: #010409;
+  --tab-activeForeground: #c9d1d9;
+  --tab-inactiveForeground: #8b949e;
+  --tab-unfocusedActiveForeground: rgba(201, 209, 217, 0.5);
+  --tab-unfocusedInactiveForeground: rgba(139, 148, 158, 0.5);
+  --tab-hoverBackground: #0d1117;
+  --tab-unfocusedHoverBackground: rgba(110, 118, 129, 0.1);
+  --tab-border: #30363d;
+  --tab-lastPinnedBorder: #21262d;
+  --tab-activeBorder: #0d1117;
+  --tab-unfocusedActiveBorder: #0d1117;
+  --tab-activeBorderTop: #f78166;
+  --tab-unfocusedActiveBorderTop: #30363d;
+  --tab-activeModifiedBorder: #3399cc;
+  --tab-inactiveModifiedBorder: rgba(51, 153, 204, 0.5);
+  --tab-unfocusedActiveModifiedBorder: rgba(51, 153, 204, 0.5);
+  --tab-unfocusedInactiveModifiedBorder: rgba(51, 153, 204, 0.25);
+  --editorPane-background: #0d1117;
+  --editorGroupHeader-tabsBackground: #010409;
+  --editorGroupHeader-tabsBorder: #30363d;
+  --editorGroupHeader-noTabsBackground: #0d1117;
+  --editorGroup-border: #30363d;
+  --editorGroup-dropBackground: rgba(83, 89, 93, 0.5);
+  --editorGroup-dropIntoPromptForeground: #c9d1d9;
+  --editorGroup-dropIntoPromptBackground: #161b22;
+  --sideBySideEditor-horizontalBorder: #30363d;
+  --sideBySideEditor-verticalBorder: #30363d;
+  --panel-background: #010409;
+  --panel-border: #30363d;
+  --panelTitle-activeForeground: #c9d1d9;
+  --panelTitle-inactiveForeground: #8b949e;
+  --panelTitle-activeBorder: #f78166;
+  --panelInput-border: #30363d;
+  --panel-dropBorder: #c9d1d9;
+  --panelSection-dropBackground: rgba(83, 89, 93, 0.5);
+  --panelSectionHeader-background: rgba(128, 128, 128, 0.2);
+  --panelSection-border: #30363d;
+  --banner-background: rgba(110, 118, 129, 0.4);
+  --banner-foreground: #c9d1d9;
+  --banner-iconForeground: #3794ff;
+  --statusBar-foreground: #8b949e;
+  --statusBar-noFolderForeground: #8b949e;
+  --statusBar-background: #0d1117;
+  --statusBar-noFolderBackground: #0d1117;
+  --statusBar-border: #30363d;
+  --statusBar-focusBorder: rgba(31, 111, 235, 0.5);
+  --statusBar-noFolderBorder: #30363d;
+  --statusBarItem-activeBackground: rgba(201, 209, 217, 0.12);
+  --statusBarItem-focusBorder: #1f6feb;
+  --statusBarItem-hoverBackground: rgba(201, 209, 217, 0.08);
+  --statusBarItem-compactHoverBackground: rgba(255, 255, 255, 0.2);
+  --statusBarItem-prominentForeground: #8b949e;
+  --statusBarItem-prominentBackground: rgba(110, 118, 129, 0.4);
+  --statusBarItem-prominentHoverBackground: rgba(0, 0, 0, 0.3);
+  --statusBarItem-errorBackground: #b91007;
+  --statusBarItem-errorForeground: #ffffff;
+  --statusBarItem-warningBackground: #7a6400;
+  --statusBarItem-warningForeground: #ffffff;
+  --activityBar-background: #0d1117;
+  --activityBar-foreground: #c9d1d9;
+  --activityBar-inactiveForeground: #8b949e;
+  --activityBar-border: #30363d;
+  --activityBar-activeBorder: #f78166;
+  --activityBar-dropBorder: #c9d1d9;
+  --activityBarBadge-background: #1f6feb;
+  --activityBarBadge-foreground: #ffffff;
+  --profileBadge-background: #4d4d4d;
+  --profileBadge-foreground: #ffffff;
+  --statusBarItem-remoteBackground: #30363d;
+  --statusBarItem-remoteForeground: #c9d1d9;
+  --extensionBadge-remoteBackground: #1f6feb;
+  --extensionBadge-remoteForeground: #ffffff;
+  --sideBar-background: #010409;
+  --sideBar-foreground: #c9d1d9;
+  --sideBar-border: #30363d;
+  --sideBarTitle-foreground: #c9d1d9;
+  --sideBar-dropBackground: rgba(83, 89, 93, 0.5);
+  --sideBarSectionHeader-background: #010409;
+  --sideBarSectionHeader-foreground: #c9d1d9;
+  --sideBarSectionHeader-border: #30363d;
+  --titleBar-activeForeground: #8b949e;
+  --titleBar-inactiveForeground: #8b949e;
+  --titleBar-activeBackground: #0d1117;
+  --titleBar-inactiveBackground: #010409;
+  --titleBar-border: #30363d;
+  --menubar-selectionForeground: #8b949e;
+  --menubar-selectionBackground: rgba(90, 93, 94, 0.31);
+  --notifications-foreground: #c9d1d9;
+  --notifications-background: #161b22;
+  --notificationLink-foreground: #58a6ff;
+  --notificationCenterHeader-foreground: #8b949e;
+  --notificationCenterHeader-background: #161b22;
+  --notifications-border: #30363d;
+  --notificationsErrorIcon-foreground: #f85149;
+  --notificationsWarningIcon-foreground: #d29922;
+  --notificationsInfoIcon-foreground: #58a6ff;
+  --commandCenter-foreground: #8b949e;
+  --commandCenter-activeForeground: #8b949e;
+  --commandCenter-inactiveForeground: #8b949e;
+  --commandCenter-background: rgba(255, 255, 255, 0.05);
+  --commandCenter-activeBackground: rgba(255, 255, 255, 0.08);
+  --commandCenter-border: rgba(139, 148, 158, 0.2);
+  --commandCenter-activeBorder: rgba(139, 148, 158, 0.3);
+  --commandCenter-inactiveBorder: rgba(139, 148, 158, 0.25);
+  --editorCommentsWidget-resolvedBorder: rgba(204, 204, 204, 0.5);
+  --editorCommentsWidget-unresolvedBorder: #3794ff;
+  --editorCommentsWidget-rangeBackground: rgba(55, 148, 255, 0.1);
+  --editorCommentsWidget-rangeBorder: rgba(55, 148, 255, 0.4);
+  --editorCommentsWidget-rangeActiveBackground: rgba(55, 148, 255, 0.1);
+  --editorCommentsWidget-rangeActiveBorder: rgba(55, 148, 255, 0.4);
+  --editorGutter-commentRangeForeground: #333941;
+  --editorGutter-commentGlyphForground: #c9d1d9;
+  --debugToolBar-background: #161b22;
+  --debugIcon-startForeground: #89d185;
+  --editor-stackFrameHighlightBackground: rgba(187, 128, 9, 0.4);
+  --editor-focusedStackFrameHighlightBackground: rgba(46, 160, 67, 0.4);
+  --mergeEditor-change-background: rgba(155, 185, 85, 0.2);
+  --mergeEditor-change-word-background: rgba(156, 204, 44, 0.2);
+  --mergeEditor-changeBase-background: #4b1818;
+  --mergeEditor-changeBase-word-background: #6f1313;
+  --mergeEditor-conflict-unhandledUnfocused-border: rgba(255, 166, 0, 0.48);
+  --mergeEditor-conflict-unhandledFocused-border: #ffa600;
+  --mergeEditor-conflict-handledUnfocused-border: rgba(134, 134, 134, 0.29);
+  --mergeEditor-conflict-handledFocused-border: rgba(193, 193, 193, 0.8);
+  --mergeEditor-conflict-handled-minimapOverViewRuler: rgba(173, 172, 168, 0.93);
+  --mergeEditor-conflict-unhandled-minimapOverViewRuler: #fcba03;
+  --mergeEditor-conflictingLines-background: rgba(255, 234, 0, 0.28);
+  --mergeEditor-conflict-input1-background: rgba(64, 200, 174, 0.2);
+  --mergeEditor-conflict-input2-background: rgba(64, 166, 255, 0.2);
+  --settings-headerForeground: #c9d1d9;
+  --settings-settingsHeaderHoverForeground: rgba(201, 209, 217, 0.7);
+  --settings-modifiedItemIndicator: rgba(187, 128, 9, 0.4);
+  --settings-headerBorder: #30363d;
+  --settings-sashBorder: #30363d;
+  --settings-dropdownBackground: #161b22;
+  --settings-dropdownForeground: #c9d1d9;
+  --settings-dropdownBorder: #30363d;
+  --settings-dropdownListBorder: #454545;
+  --settings-checkboxBackground: #161b22;
+  --settings-checkboxForeground: #c9d1d9;
+  --settings-checkboxBorder: #30363d;
+  --settings-textInputBackground: #0d1117;
+  --settings-textInputForeground: #c9d1d9;
+  --settings-textInputBorder: #30363d;
+  --settings-numberInputBackground: #0d1117;
+  --settings-numberInputForeground: #c9d1d9;
+  --settings-numberInputBorder: #30363d;
+  --settings-focusedRowBackground: rgba(110, 118, 129, 0.06);
+  --settings-rowHoverBackground: rgba(110, 118, 129, 0.03);
+  --settings-focusedRowBorder: #1f6feb;
+  --terminal-foreground: #c9d1d9;
+  --terminal-selectionBackground: #264f78;
+  --terminal-inactiveSelectionBackground: rgba(38, 79, 120, 0.5);
+  --terminalCommandDecoration-defaultBackground: rgba(255, 255, 255, 0.25);
+  --terminalCommandDecoration-successBackground: #1b81a8;
+  --terminalCommandDecoration-errorBackground: #f14c4c;
+  --terminalOverviewRuler-cursorForeground: rgba(160, 160, 160, 0.8);
+  --terminal-border: #30363d;
+  --terminal-findMatchBackground: #9e6a03;
+  --terminal-findMatchHighlightBackground: rgba(242, 204, 96, 0.5);
+  --terminalOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+  --terminal-dropBackground: rgba(83, 89, 93, 0.5);
+  --terminal-tab-activeBorder: #0d1117;
+  --testing-iconFailed: #f14c4c;
+  --testing-iconErrored: #f14c4c;
+  --testing-iconPassed: #73c991;
+  --testing-runAction: #73c991;
+  --testing-iconQueued: #cca700;
+  --testing-iconUnset: #848484;
+  --testing-iconSkipped: #848484;
+  --testing-peekBorder: #f14c4c;
+  --testing-peekHeaderBackground: rgba(241, 76, 76, 0.1);
+  --testing-message-error-decorationForeground: #f14c4c;
+  --testing-message-error-lineBackground: rgba(255, 0, 0, 0.2);
+  --testing-message-info-decorationForeground: rgba(201, 209, 217, 0.5);
+  --welcomePage-tileBackground: #161b22;
+  --welcomePage-tileHoverBackground: #1a2029;
+  --welcomePage-tileBorder: rgba(255, 255, 255, 0.1);
+  --welcomePage-progress-background: #0d1117;
+  --welcomePage-progress-foreground: #58a6ff;
+  --walkthrough-stepTitle-foreground: #ffffff;
+  --welcomeOverlay-background: rgba(0, 0, 0, 0.52);
+  --debugExceptionWidget-border: #a31515;
+  --debugExceptionWidget-background: #420b0d;
+  --ports-iconRunningProcessForeground: #30363d;
+  --statusBar-debuggingBackground: #da3633;
+  --statusBar-debuggingForeground: #ffffff;
+  --statusBar-debuggingBorder: #30363d;
+  --editor-inlineValuesForeground: rgba(255, 255, 255, 0.5);
+  --editor-inlineValuesBackground: rgba(255, 200, 0, 0.2);
+  --editorGutter-modifiedBackground: rgba(187, 128, 9, 0.4);
+  --editorGutter-addedBackground: rgba(46, 160, 67, 0.4);
+  --editorGutter-deletedBackground: rgba(248, 81, 73, 0.4);
+  --minimapGutter-modifiedBackground: rgba(187, 128, 9, 0.4);
+  --minimapGutter-addedBackground: rgba(46, 160, 67, 0.4);
+  --minimapGutter-deletedBackground: rgba(248, 81, 73, 0.4);
+  --editorOverviewRuler-modifiedForeground: rgba(187, 128, 9, 0.24);
+  --editorOverviewRuler-addedForeground: rgba(46, 160, 67, 0.24);
+  --editorOverviewRuler-deletedForeground: rgba(248, 81, 73, 0.24);
+  --debugIcon-breakpointForeground: #f85149;
+  --debugIcon-breakpointDisabledForeground: #848484;
+  --debugIcon-breakpointUnverifiedForeground: #848484;
+  --debugIcon-breakpointCurrentStackframeForeground: #ffcc00;
+  --debugIcon-breakpointStackframeForeground: #89d185;
+  --notebook-cellBorderColor: rgba(110, 118, 129, 0.4);
+  --notebook-focusedEditorBorder: #1f6feb;
+  --notebookStatusSuccessIcon-foreground: #89d185;
+  --notebookEditorOverviewRuler-runningCellForeground: #89d185;
+  --notebookStatusErrorIcon-foreground: #f85149;
+  --notebookStatusRunningIcon-foreground: #c9d1d9;
+  --notebook-cellToolbarSeparator: rgba(128, 128, 128, 0.35);
+  --notebook-selectedCellBackground: rgba(110, 118, 129, 0.4);
+  --notebook-selectedCellBorder: rgba(110, 118, 129, 0.4);
+  --notebook-focusedCellBorder: #1f6feb;
+  --notebook-inactiveFocusedCellBorder: rgba(110, 118, 129, 0.4);
+  --notebook-cellStatusBarItemHoverBackground: rgba(255, 255, 255, 0.15);
+  --notebook-cellInsertionIndicator: #1f6feb;
+  --notebookScrollbarSlider-background: rgba(139, 148, 158, 0.2);
+  --notebookScrollbarSlider-hoverBackground: rgba(139, 148, 158, 0.24);
+  --notebookScrollbarSlider-activeBackground: rgba(139, 148, 158, 0.28);
+  --notebook-symbolHighlightBackground: rgba(255, 255, 255, 0.04);
+  --notebook-cellEditorBackground: #010409;
+  --notebook-editorBackground: #0d1117;
+  --keybindingTable-headerBackground: rgba(201, 209, 217, 0.04);
+  --keybindingTable-rowsBackground: rgba(201, 209, 217, 0.04);
+  --scm-providerBorder: #454545;
+  --searchEditor-textInputBorder: #30363d;
+  --debugTokenExpression-name: #79c0ff;
+  --debugTokenExpression-value: #a5d6ff;
+  --debugTokenExpression-string: #a5d6ff;
+  --debugTokenExpression-boolean: #56d364;
+  --debugTokenExpression-number: #56d364;
+  --debugTokenExpression-error: #ffa198;
+  --debugView-exceptionLabelForeground: #c9d1d9;
+  --debugView-exceptionLabelBackground: #6c2022;
+  --debugView-stateLabelForeground: #c9d1d9;
+  --debugView-stateLabelBackground: rgba(136, 136, 136, 0.27);
+  --debugView-valueChangedHighlight: #569cd6;
+  --debugConsole-infoForeground: #8b949e;
+  --debugConsole-warningForeground: #d29922;
+  --debugConsole-errorForeground: #ffa198;
+  --debugConsole-sourceForeground: #e3b341;
+  --debugConsoleInputIcon-foreground: #bc8cff;
+  --debugIcon-pauseForeground: #75beff;
+  --debugIcon-stopForeground: #f48771;
+  --debugIcon-disconnectForeground: #f48771;
+  --debugIcon-restartForeground: #89d185;
+  --debugIcon-stepOverForeground: #75beff;
+  --debugIcon-stepIntoForeground: #75beff;
+  --debugIcon-stepOutForeground: #75beff;
+  --debugIcon-continueForeground: #75beff;
+  --debugIcon-stepBackForeground: #75beff;
+  --extensionButton-background: #238636;
+  --extensionButton-foreground: #ffffff;
+  --extensionButton-hoverBackground: #2ea043;
+  --extensionButton-separator: rgba(255, 255, 255, 0.4);
+  --extensionButton-prominentBackground: #238636;
+  --extensionButton-prominentForeground: #ffffff;
+  --extensionButton-prominentHoverBackground: #2ea043;
+  --extensionIcon-starForeground: #ff8e00;
+  --extensionIcon-verifiedForeground: #58a6ff;
+  --extensionIcon-preReleaseForeground: #1d9271;
+  --extensionIcon-sponsorForeground: #d758b3;
+  --terminal-ansiBlack: #484f58;
+  --terminal-ansiRed: #ff7b72;
+  --terminal-ansiGreen: #3fb950;
+  --terminal-ansiYellow: #d29922;
+  --terminal-ansiBlue: #58a6ff;
+  --terminal-ansiMagenta: #bc8cff;
+  --terminal-ansiCyan: #39c5cf;
+  --terminal-ansiWhite: #b1bac4;
+  --terminal-ansiBrightBlack: #6e7681;
+  --terminal-ansiBrightRed: #ffa198;
+  --terminal-ansiBrightGreen: #56d364;
+  --terminal-ansiBrightYellow: #e3b341;
+  --terminal-ansiBrightBlue: #79c0ff;
+  --terminal-ansiBrightMagenta: #d2a8ff;
+  --terminal-ansiBrightCyan: #56d4dd;
+  --terminal-ansiBrightWhite: #ffffff;
+  --interactive-activeCodeBorder: #3794ff;
+  --interactive-inactiveCodeBorder: rgba(110, 118, 129, 0.4);
+  --gitDecoration-addedResourceForeground: #3fb950;
+  --gitDecoration-modifiedResourceForeground: #d29922;
+  --gitDecoration-deletedResourceForeground: #f85149;
+  --gitDecoration-renamedResourceForeground: #73c991;
+  --gitDecoration-untrackedResourceForeground: #3fb950;
+  --gitDecoration-ignoredResourceForeground: #6e7681;
+  --gitDecoration-stageModifiedResourceForeground: #e2c08d;
+  --gitDecoration-stageDeletedResourceForeground: #c74e39;
+  --gitDecoration-conflictingResourceForeground: #db6d28;
+  --gitDecoration-submoduleResourceForeground: #8b949e;
+  --gitlens-gutterBackgroundColor: rgba(255, 255, 255, 0.07);
+  --gitlens-gutterForegroundColor: #bebebe;
+  --gitlens-gutterUncommittedForegroundColor: rgba(0, 188, 242, 0.6);
+  --gitlens-trailingLineBackgroundColor: rgba(0, 0, 0, 0);
+  --gitlens-trailingLineForegroundColor: rgba(153, 153, 153, 0.35);
+  --gitlens-lineHighlightBackgroundColor: rgba(0, 188, 242, 0.2);
+  --gitlens-lineHighlightOverviewRulerColor: rgba(0, 188, 242, 0.6);
+  --gitlens-openAutolinkedIssueIconColor: #3fb950;
+  --gitlens-closedAutolinkedIssueIconColor: #a371f7;
+  --gitlens-closedPullRequestIconColor: #f85149;
+  --gitlens-openPullRequestIconColor: #3fb950;
+  --gitlens-mergedPullRequestIconColor: #a371f7;
+  --gitlens-unpublishedChangesIconColor: #35b15e;
+  --gitlens-unpublishedCommitIconColor: #35b15e;
+  --gitlens-unpulledChangesIconColor: #b15e35;
+  --gitlens-decorations-addedForegroundColor: #3fb950;
+  --gitlens-decorations-copiedForegroundColor: #73c991;
+  --gitlens-decorations-deletedForegroundColor: #f85149;
+  --gitlens-decorations-ignoredForegroundColor: #6e7681;
+  --gitlens-decorations-modifiedForegroundColor: #d29922;
+  --gitlens-decorations-untrackedForegroundColor: #3fb950;
+  --gitlens-decorations-renamedForegroundColor: #73c991;
+  --gitlens-decorations-branchAheadForegroundColor: #35b15e;
+  --gitlens-decorations-branchBehindForegroundColor: #b15e35;
+  --gitlens-decorations-branchDivergedForegroundColor: #d8af1b;
+  --gitlens-decorations-branchUpToDateForegroundColor: #c9d1d9;
+  --gitlens-decorations-branchUnpublishedForegroundColor: #35b15e;
+  --gitlens-decorations-branchMissingUpstreamForegroundColor: #c74e39;
+  --gitlens-decorations-worktreeView-hasUncommittedChangesForegroundColor: #e2c08d;
+  --gitlens-graphLane1Color: #15a0bf;
+  --gitlens-graphLane2Color: #0669f7;
+  --gitlens-graphLane3Color: #8e00c2;
+  --gitlens-graphLane4Color: #c517b6;
+  --gitlens-graphLane5Color: #d90171;
+  --gitlens-graphLane6Color: #cd0101;
+  --gitlens-graphLane7Color: #f25d2e;
+  --gitlens-graphLane8Color: #f2ca33;
+  --gitlens-graphLane9Color: #7bd938;
+  --gitlens-graphLane10Color: #2ece9d;
+  --gitlens-graphChangesColumnAddedColor: #347d39;
+  --gitlens-graphChangesColumnDeletedColor: #c93c37;
+  --gitlens-graphMinimapMarkerHeadColor: #05e617;
+  --gitlens-graphScrollMarkerHeadColor: #05e617;
+  --gitlens-graphMinimapMarkerUpstreamColor: #09ae17;
+  --gitlens-graphScrollMarkerUpstreamColor: #09ae17;
+  --gitlens-graphMinimapMarkerHighlightsColor: #fbff0a;
+  --gitlens-graphScrollMarkerHighlightsColor: #fbff0a;
+  --gitlens-graphMinimapMarkerLocalBranchesColor: #3087cf;
+  --gitlens-graphScrollMarkerLocalBranchesColor: #3087cf;
+  --gitlens-graphMinimapMarkerRemoteBranchesColor: #2b5e88;
+  --gitlens-graphScrollMarkerRemoteBranchesColor: #2b5e88;
+  --gitlens-graphMinimapMarkerStashesColor: #b34db3;
+  --gitlens-graphScrollMarkerStashesColor: #b34db3;
+  --gitlens-graphMinimapMarkerTagsColor: #6b562e;
+  --gitlens-graphScrollMarkerTagsColor: #6b562e;
+  --issues-newIssueDecoration: rgba(255, 255, 255, 0.28);
+  --issues-open: #3fb950;
+  --issues-closed: #cb2431;
+  --pullRequests-merged: #8957e5;
+  --pullRequests-draft: #6e7681;
+  --pullRequests-open: #3fb950;
+  --pullRequests-closed: #cb2431;
+  --pullRequests-notification: #58a6ff;
+}
diff --git a/src/reference/utils.ts b/src/reference/utils.ts
new file mode 100644
index 0000000..883d8ff
--- /dev/null
+++ b/src/reference/utils.ts
@@ -0,0 +1,30 @@
+function splitRGBA(rgbValue: string) {
+  // Extract the numerical values from the string
+  let [r, g, b, a] = rgbValue
+    .replace(/^(rgba?|\(|\)|,|%)+/g, "") // remove extraneous characters
+    .split(",")
+    .map(x => parseFloat(x))
+
+  if (isNaN(a)) {
+    a = 1.0 // default to fully opaque if no alpha value is provided
+  }
+
+  return { r, g, b, a }
+}
+
+const padRound = (n: number) => Math.round(n).toString(16).padStart(2, "0")
+
+export function parseColor(rgbValue: string) {
+  const { r, g, b, a } = splitRGBA(rgbValue)
+
+  let hex = `#${padRound(r)}${padRound(g)}${padRound(b)}`
+
+  if (rgbValue.startsWith("rgba")) {
+    hex += padRound(a * 255)
+  }
+
+  return {
+    hex,
+    flip: r * 0.299 + g * 0.587 + b * 0.114 < 146,
+  }
+}
diff --git a/src/server/docker-compose.yml b/src/server/docker-compose.yml
new file mode 100644
index 0000000..aa9e747
--- /dev/null
+++ b/src/server/docker-compose.yml
@@ -0,0 +1,11 @@
+version: "3.8"
+services:
+  couchserver:
+    image: couchdb
+    ports:
+      - "5984:5984"
+    environment:
+      - COUCHDB_USER=pouch
+      - COUCHDB_PASSWORD=${COUCHDB_PASSWORD}
+    volumes:
+      - ./dbdata:/opt/couchdb/data
diff --git a/src/setupTest.ts b/src/setupTest.ts
new file mode 100644
index 0000000..336ce12
--- /dev/null
+++ b/src/setupTest.ts
@@ -0,0 +1 @@
+export {}
diff --git a/src/shared/ErrorBoundary.tsx b/src/shared/ErrorBoundary.tsx
new file mode 100644
index 0000000..3040ad2
--- /dev/null
+++ b/src/shared/ErrorBoundary.tsx
@@ -0,0 +1,176 @@
+// https://github.com/Chyrain/react-error-boundaries/commit/84c809df2d5f89ab47166857841b02f18ab3fa04
+// MIT License
+// Copyright (c) 2017 Chen HaiYong
+import styled from "@emotion/styled"
+import React from "react"
+import ReactDOM from "react-dom"
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode
+  onError?: (error: Error, info: React.ErrorInfo) => void
+}
+
+export class ErrorBoundary extends React.PureComponent<
+  ErrorBoundaryProps,
+  {
+    hasError: boolean
+    error: Error | null
+    errorInfo: React.ErrorInfo | null
+  }
+> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props)
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    }
+  }
+
+  closeErrorModal = (): void => {
+    this.setState({ hasError: false })
+  }
+
+  override componentDidCatch(error: Error, info: React.ErrorInfo): void {
+    // Update state if error happens
+    this.setState({
+      hasError: true,
+      error,
+      errorInfo: info,
+    })
+
+    // Report errors here
+    const { onError } = this.props
+    if (typeof onError === "function") {
+      try {
+        onError.call(this, error, info)
+      } catch {}
+    }
+  }
+
+  override render(): React.ReactNode {
+    // if state contains error and in development environment we render fallback component
+    if (this.state.hasError) {
+      const { error, errorInfo } = this.state
+      return (
+        <Fallback
+          closeErrorModal={this.closeErrorModal}
+          error={error!}
+          errorInfo={errorInfo!}
+        />
+      )
+    }
+
+    return this.props.children
+  }
+}
+
+class Modal extends React.PureComponent<{ children: React.ReactNode }> {
+  // Create a div that we'll render the modal into. Because each
+  // Modal component has its own element, we can render multiple
+  // modal components into the modal container.
+  private el = document.createElement("div")
+
+  override componentDidMount(): void {
+    // Append the element into the DOM on mount. We'll render
+    // into the modal container element (see the HTML tab).
+    document.body.appendChild(this.el)
+  }
+
+  override componentWillUnmount(): void {
+    // Remove the element from the DOM when we unmount
+    document.body.removeChild(this.el)
+  }
+
+  override render(): React.ReactPortal {
+    // Use a portal to render the children into the element
+    return ReactDOM.createPortal(
+      // Any valid React child: JSX, strings, arrays, etc.
+      this.props.children,
+      // A DOM element
+      this.el,
+    )
+  }
+}
+
+const ErrorBoundaryContainer = styled.div`
+  box-sizing: border-box;
+  background-color: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(2px);
+  color: #fff;
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  overflow-y: auto;
+  padding: 16px 32px;
+  z-index: 5;
+`
+const Button = styled.button`
+  position: absolute;
+  right: 16px;
+  top: 35px;
+  cursor: pointer;
+  min-width: 40px;
+  min-height: 30px;
+  border-radius: 5px;
+  outline-style: none;
+`
+const Pre = styled.pre`
+  font-family: "SF Mono", monospace, sans-serif;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  word-break: break-word;
+  padding: 0 6px;
+  line-height: 1.5em;
+`
+const Hr = styled.hr`
+  border: none;
+  border-top: 1px solid #777;
+`
+const Error = styled(Pre)`
+  border-radius: 3px;
+  background-color: #290000;
+  color: #ff8080;
+`
+const Warning = styled(Pre)`
+  border-radius: 3px;
+  background-color: #332b00;
+  color: #f1ab27;
+`
+
+function parseStack(text?: string) {
+  return text
+    ? text.replaceAll(/([( ])chrome-extension:\/\/.*?\//g, "$1/").replace(/^\n/, "")
+    : null
+}
+
+function Fallback(props: {
+  error: Error
+  errorInfo: React.ErrorInfo
+  closeErrorModal: () => void
+}) {
+  const { error, errorInfo, closeErrorModal } = props
+
+  return (
+    <Modal>
+      <ErrorBoundaryContainer>
+        <Button onClick={closeErrorModal}>Close</Button>
+        <div>
+          <h2>Something went wrong.</h2>
+          <Hr />
+          <p>ErrorMessage</p>
+          <Error>{error.message}</Error>
+          <Hr />
+          <p>Stack</p>
+          <Error>{parseStack(error.stack)}</Error>
+          <Hr />
+          <p>ComponentStack</p>
+          <Warning>{parseStack(errorInfo.componentStack)}</Warning>
+          <Hr />
+        </div>
+      </ErrorBoundaryContainer>
+    </Modal>
+  )
+}
diff --git a/src/shared/apolloClient.ts b/src/shared/apolloClient.ts
new file mode 100644
index 0000000..694b49e
--- /dev/null
+++ b/src/shared/apolloClient.ts
@@ -0,0 +1,62 @@
+import { ApolloClient, type FieldPolicy, HttpLink, InMemoryCache } from "@apollo/client"
+import { sendMessage } from "./messaging"
+
+const dateField: FieldPolicy<Date> = {
+  read: date => (typeof date === "string" ? new Date(date) : date),
+}
+
+export const client = new ApolloClient({
+  cache: new InMemoryCache({
+    typePolicies: {
+      Preferences: {
+        keyFields: [],
+      },
+      File: {
+        merge: true,
+        fields: {
+          createdAt: dateField,
+          updatedAt: dateField,
+          lastRequestedAt: dateField,
+        },
+      },
+      Query: {
+        fields: {
+          file(_, { args, toReference }) {
+            return toReference({ __typename: "File", id: args!.id })
+          },
+          favicon(_, { args, toReference }) {
+            return toReference({ __typename: "Favicon", url: args!.url })
+          },
+        },
+      },
+    },
+  }),
+
+  link: new HttpLink({
+    uri: `${location.origin}/api`,
+    async fetch(_, init) {
+      const body = JSON.parse(init!.body as string)
+      if (process.env.NODE_ENV === "development") {
+        // const { operationName, variables, ...rest } = body
+        // console.log("gql", { ...rest, variables });
+      }
+      const [result, error] = await sendMessage({
+        method: "gql",
+        body,
+      })
+
+      if (process.env.NODE_ENV === "development" && error) {
+        if (result?.errors) console.error(result.errors)
+        console.error(error)
+      }
+
+      return {
+        ok: !error,
+        redirected: false,
+        status: error ? 400 : 200,
+        json: async () => result,
+        text: async () => JSON.stringify(result),
+      } as Response
+    },
+  }),
+})
diff --git a/src/shared/cascade.tsx b/src/shared/cascade.tsx
new file mode 100644
index 0000000..078da34
--- /dev/null
+++ b/src/shared/cascade.tsx
@@ -0,0 +1,12 @@
+import { cloneElement, memo } from "react"
+
+/**
+ * Cascade elements from right to left.
+ */
+export function cascade(
+  ...elements: React.ReactElement[]
+): React.FC<{ children: React.ReactNode }> {
+  return memo(({ children }) =>
+    elements.reduceRight((acc, el) => cloneElement(el, undefined, acc), <>{children}</>),
+  )
+}
diff --git a/src/shared/constants.ts b/src/shared/constants.ts
new file mode 100644
index 0000000..7d1eb17
--- /dev/null
+++ b/src/shared/constants.ts
@@ -0,0 +1,4 @@
+export const USERNAME_KEY = "cloud.username"
+export const PASSWORD_KEY = "cloud.password"
+export const LAST_SYNC = "cloud.lastSync"
+export const SERVER = process.env.NEXT_PUBLIC_SERVER_URL!
diff --git a/src/shared/emitter.ts b/src/shared/emitter.ts
new file mode 100644
index 0000000..40b4705
--- /dev/null
+++ b/src/shared/emitter.ts
@@ -0,0 +1,73 @@
+export class ValueEmitter<T> {
+  private listeners: Set<(value: T) => void> = new Set()
+
+  static empty(): NullEmitter {
+    return new ValueEmitter() as any
+  }
+
+  listen(listener: (value: T) => void): () => void {
+    this.listeners.add(listener)
+    return () => this.listeners.delete(listener)
+  }
+
+  clear() {
+    this.listeners.clear()
+  }
+
+  emit = (value: T): void => {
+    for (const listener of this.listeners) {
+      listener(value)
+    }
+  }
+}
+
+export interface NullEmitter {
+  listen(listener: () => void): () => void
+  clear(): void
+  emit(): void
+}
+
+export type EventMap = {
+  [key: string]: any[]
+}
+
+export class TinyEventEmitter<Events extends EventMap> {
+  #listeners = new Map<keyof Events, Set<(...args: any) => void>>()
+
+  #getListeners(event: keyof Events) {
+    let listeners = this.#listeners.get(event)
+    if (!listeners) {
+      listeners = new Set()
+      this.#listeners.set(event, listeners)
+    }
+    return listeners
+  }
+
+  on<E extends keyof Events>(event: E, listener: (...args: Events[E]) => void): this {
+    this.#getListeners(event).add(listener)
+    return this
+  }
+
+  once<E extends keyof Events>(event: E, listener: (...args: Events[E]) => void): this {
+    const once = (...args: Events[E]) => {
+      this.off(event, once)
+      listener(...args)
+    }
+    return this.on(event, once)
+  }
+
+  off<E extends keyof Events>(event: E, listener: (...args: Events[E]) => void): this {
+    this.#getListeners(event).delete(listener)
+    return this
+  }
+
+  emit<E extends keyof Events>(event: E, ...args: Events[E]): boolean {
+    const listeners = this.#getListeners(event)
+    for (const listener of listeners) {
+      listener(...args)
+    }
+    return listeners.size > 0
+  }
+}
+
+export { TinyEventEmitter as EventEmitter }
diff --git a/src/shared/ensureArray.ts b/src/shared/ensureArray.ts
new file mode 100644
index 0000000..e33ce1f
--- /dev/null
+++ b/src/shared/ensureArray.ts
@@ -0,0 +1,2 @@
+export const ensureArray = <T>(value?: T | T[] | null): T[] =>
+  value == null ? [] : Array.isArray(value) ? value : [value]
diff --git a/src/shared/hooks/useAsyncEffect.ts b/src/shared/hooks/useAsyncEffect.ts
new file mode 100644
index 0000000..cfef1e5
--- /dev/null
+++ b/src/shared/hooks/useAsyncEffect.ts
@@ -0,0 +1,8 @@
+import { useEffect } from "react"
+
+export function useAsyncEffect(effect: () => Promise<void>, deps: React.DependencyList) {
+  useEffect(() => {
+    effect()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps)
+}
diff --git a/src/shared/hooks/useChromeEvent.ts b/src/shared/hooks/useChromeEvent.ts
new file mode 100644
index 0000000..838047c
--- /dev/null
+++ b/src/shared/hooks/useChromeEvent.ts
@@ -0,0 +1,12 @@
+import { useEffect } from "react"
+import type { Events } from "webextension-polyfill"
+
+export function useChromeEvent<T extends (...args: any[]) => any>(
+  event: Events.Event<T>,
+  fn: T,
+) {
+  useEffect(() => {
+    event.addListener(fn)
+    return () => event.removeListener(fn)
+  }, [event, fn])
+}
diff --git a/src/shared/hooks/useDarkMode.ts b/src/shared/hooks/useDarkMode.ts
new file mode 100644
index 0000000..979443d
--- /dev/null
+++ b/src/shared/hooks/useDarkMode.ts
@@ -0,0 +1,33 @@
+import { useEffect, useMemo, useState } from "react"
+import { gql, useQuery } from "~/generated/graphql"
+import { Theme } from "../models/enums.generated"
+import type { Preferences } from "../models"
+
+const DARK_MODE_QUERY = gql<"DarkModeHookQuery">`
+  query DarkModeHookQuery {
+    preferences {
+      theme
+    }
+  }
+`
+
+export function useDarkMode(): boolean {
+  const { data } = useQuery(DARK_MODE_QUERY)
+  const pref = data?.preferences.theme ?? loadPref()?.theme
+  const media = useMemo(() => window.matchMedia("(prefers-color-scheme: dark)"), [])
+  const [systemDarkMode, setSystemDarkMode] = useState(media.matches)
+
+  useEffect(() => {
+    const handler = () => setSystemDarkMode(media.matches)
+    media.addEventListener("change", handler)
+    return () => media.removeEventListener("change", handler)
+  })
+
+  return pref === Theme.System ? systemDarkMode : pref === Theme.Dark ?? false
+}
+
+function loadPref(): Preferences | undefined {
+  try {
+    return JSON.parse(localStorage.getItem("preferences") ?? "{}")
+  } catch {}
+}
diff --git a/src/shared/hooks/useDatalist.tsx b/src/shared/hooks/useDatalist.tsx
new file mode 100644
index 0000000..16a81fa
--- /dev/null
+++ b/src/shared/hooks/useDatalist.tsx
@@ -0,0 +1,34 @@
+import { useId, useMemo } from "react"
+
+export function useDataList(list: string[]): {
+  id: string
+  element: React.ReactElement
+}
+
+export function useDataList<K extends string>(
+  list: { [key in K]: string }[],
+  propertyKey?: K,
+): {
+  id: string
+  element: React.ReactElement
+}
+
+export function useDataList(list: any[], key?: string) {
+  const id = useId()
+
+  const element = useMemo(
+    () => (
+      <datalist id={id}>
+        {key
+          ? list.map(value => <option key={value[key]} value={value[key]} />)
+          : list.map(value => <option key={value} value={value} />)}
+      </datalist>
+    ),
+    [id, list, key],
+  )
+
+  return {
+    id,
+    element,
+  }
+}
diff --git a/src/shared/hooks/useDebouncedValue.ts b/src/shared/hooks/useDebouncedValue.ts
new file mode 100644
index 0000000..938c9f2
--- /dev/null
+++ b/src/shared/hooks/useDebouncedValue.ts
@@ -0,0 +1,24 @@
+import { useEffect, useRef, useState } from "react"
+
+export function useDebouncedValue<T>(value: T, delay: number) {
+  const [debouncedValue, setDebouncedValue] = useState(value)
+  const timeout = useRef<number>()
+
+  useEffect(() => {
+    if (timeout.current) {
+      clearTimeout(timeout.current)
+    }
+
+    timeout.current = window.setTimeout(() => {
+      setDebouncedValue(value)
+    }, delay)
+
+    return () => {
+      if (timeout.current) {
+        clearTimeout(timeout.current)
+      }
+    }
+  }, [value, delay])
+
+  return debouncedValue
+}
diff --git a/src/shared/hooks/useDisposables.ts b/src/shared/hooks/useDisposables.ts
new file mode 100644
index 0000000..c9ae7c2
--- /dev/null
+++ b/src/shared/hooks/useDisposables.ts
@@ -0,0 +1,32 @@
+import type { IDisposable } from "monaco-editor"
+import { useCallback, useEffect, useRef } from "react"
+
+export function useDisposable(fn: () => IDisposable | void, deps: any[]) {
+  const register = useDisposables()
+  useEffect(() => {
+    const disposable = fn()
+    if (disposable) {
+      register(disposable)
+      return () => disposable.dispose()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps)
+}
+
+export function useDisposables() {
+  const disposables = useRef<IDisposable[]>([])
+
+  const register = useCallback((...disposable: IDisposable[]) => {
+    disposables.current.push(...disposable)
+  }, [])
+
+  useEffect(
+    () => () => {
+      disposables.current.forEach(disposable => disposable.dispose())
+      disposables.current = []
+    },
+    [],
+  )
+
+  return register
+}
diff --git a/src/shared/hooks/useInput.tsx b/src/shared/hooks/useInput.tsx
new file mode 100644
index 0000000..ad41c01
--- /dev/null
+++ b/src/shared/hooks/useInput.tsx
@@ -0,0 +1,10 @@
+import { useCallback } from "react"
+
+export function useInputOnChange(setState: (value: string) => void) {
+  return useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setState(e.target.value)
+    },
+    [setState],
+  )
+}
diff --git a/src/shared/hooks/useLocalStorage.ts b/src/shared/hooks/useLocalStorage.ts
new file mode 100644
index 0000000..9bc3057
--- /dev/null
+++ b/src/shared/hooks/useLocalStorage.ts
@@ -0,0 +1,71 @@
+import { identity } from "lodash"
+import { useCallback, useEffect, useState } from "react"
+import { useDebouncedCallback } from "@react-hookz/web"
+import LocalStorage from "../localStorage"
+import { LOCAL_STORAGE_KEY } from "~/options/store"
+
+export enum S {
+  ActiveTab = "options.activeTab",
+  ActivePaneTab = "options.activePaneTab",
+  PanelVisible = "options.panelVisible",
+  PanelPosition = "options.panelPosition",
+  ShowTOS = "cloud.showTOS",
+  SearchTabSearch = "searchTab.search",
+  SearchTabReplace = "searchTab.replace",
+  FileTreeGroupView = "fileTree.groupView",
+  FileTreeFilter = "fileTree.filter",
+  FileTreeVisibleGroups = "fileTree.visibleGroups",
+  FileTreeSorting = "fileTree.sorting",
+}
+
+export function useLocalStorageState<T>(
+  key: string,
+  initialValue: (() => T) | T,
+  serialize: (value: T) => any = identity,
+  hydrate: (value: any) => T = identity,
+) {
+  key = `${LOCAL_STORAGE_KEY}.${key}`
+
+  const getFromLocalStorage = useCallback((): T => {
+    const item = LocalStorage.getItem(key)
+    if (item !== undefined) {
+      return hydrate(item)
+    } else if (typeof initialValue === "function") {
+      return hydrate((initialValue as () => T)())
+    }
+
+    return initialValue
+  }, [key, initialValue])
+
+  const [value, setValue] = useState<T>(getFromLocalStorage)
+
+  const debouncedSet = useDebouncedCallback(
+    (next: T) => {
+      LocalStorage.setItem(key, serialize(next))
+    },
+    [key],
+    80,
+  )
+
+  useEffect(() => {
+    const nextValue = getFromLocalStorage()
+    if (nextValue !== value) {
+      setValue(nextValue)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key, getFromLocalStorage])
+
+  const setter = useCallback(
+    (next: T | ((value: T) => T)) => {
+      if (typeof next === "function") {
+        next = (next as any)(value)
+      }
+
+      debouncedSet(next as T)
+      setValue(next)
+    },
+    [value, debouncedSet],
+  )
+
+  return [value, setter] as const
+}
diff --git a/src/shared/hooks/useMutate.ts b/src/shared/hooks/useMutate.ts
new file mode 100644
index 0000000..835785b
--- /dev/null
+++ b/src/shared/hooks/useMutate.ts
@@ -0,0 +1,31 @@
+import { useCallback } from "react"
+import {
+  type ApolloCache,
+  type ApolloError,
+  type DefaultContext,
+  type MutationHookOptions,
+  type OperationVariables,
+  type TypedDocumentNode,
+  useMutation,
+} from "@apollo/client"
+import toast from "react-hot-toast"
+
+function onError(error: ApolloError) {
+  toast.error(error.message)
+}
+
+/**
+ * Simplified version of `useMutation`.
+ */
+export function useMutate<
+  TData = any,
+  TVariables = OperationVariables,
+  TContext = DefaultContext,
+  TCache extends ApolloCache<any> = ApolloCache<any>,
+>(
+  mutation: TypedDocumentNode<TData, TVariables>,
+  options?: MutationHookOptions<TData, TVariables, TContext, TCache>,
+) {
+  const [mutate] = useMutation<TData, TVariables, TContext, TCache>(mutation, options)
+  return useCallback((variables: TVariables) => mutate({ variables, onError }), [mutate])
+}
diff --git a/src/shared/hooks/useShowApolloError.ts b/src/shared/hooks/useShowApolloError.ts
new file mode 100644
index 0000000..64a69a6
--- /dev/null
+++ b/src/shared/hooks/useShowApolloError.ts
@@ -0,0 +1,15 @@
+import type { ApolloError } from "@apollo/client"
+import { useEffect } from "react"
+import toast from "react-hot-toast"
+
+export function useShowApolloErrorToast(error?: ApolloError) {
+  useEffect(() => {
+    if (error) {
+      toast.error(error.message)
+    }
+  }, [error])
+}
+
+export function showErrorToast(error: ApolloError) {
+  toast.error(error.message)
+}
diff --git a/src/shared/hooks/useWhy.ts b/src/shared/hooks/useWhy.ts
new file mode 100644
index 0000000..bdb7423
--- /dev/null
+++ b/src/shared/hooks/useWhy.ts
@@ -0,0 +1,41 @@
+import { useEffect, useRef } from "react"
+
+const LOG = false
+
+export function useWhyDidYouUpdate(componentName: string, name: string, props: any) {
+  // Get a mutable ref object where we can store props ...
+  // ... for comparison next time this hook runs.
+  const previousProps = useRef<any>()
+
+  useEffect(() => {
+    if (previousProps.current) {
+      // Get all keys from previous and current props
+      const allKeys = Object.keys({ ...previousProps.current, ...props })
+      // Use this object to keep track of changed props
+      const changesObj: Record<string, { from: any; to: any }> = Array.isArray(props)
+        ? ([] as any)
+        : {}
+
+      // Iterate through keys
+      allKeys.forEach(key => {
+        // If previous is different from current
+        if (previousProps.current[key] !== props[key]) {
+          // Add to changesObj
+          changesObj[key] = {
+            from: previousProps.current[key],
+            to: props[key],
+          }
+        }
+      })
+
+      // If changesObj not empty then output to console
+      if (LOG && Object.keys(changesObj).length) {
+        console.log("[why-did-you-update]", `<${componentName}>`, name, changesObj)
+      } else {
+        // console.log("[why-did-you-update]", `<${componentName}>`, name, "⚠️ No changes");
+      }
+    }
+    // Finally update previousProps with current props for next hook call
+    previousProps.current = props
+  })
+}
diff --git a/src/shared/i18n/constants.ts b/src/shared/i18n/constants.ts
new file mode 100644
index 0000000..b5c2636
--- /dev/null
+++ b/src/shared/i18n/constants.ts
@@ -0,0 +1,7 @@
+export const endonyms = Object.entries({
+  "en-US": "English",
+  fr: "Français",
+  es: "Español",
+  de: "Deutsch",
+  ja: "日本語",
+})
diff --git a/src/shared/i18n/index.ts b/src/shared/i18n/index.ts
new file mode 100644
index 0000000..e3efe2f
--- /dev/null
+++ b/src/shared/i18n/index.ts
@@ -0,0 +1,114 @@
+import browser from "webextension-polyfill"
+import i18n from "i18next"
+import ICU from "i18next-icu"
+import HttpApi, { type HttpBackendOptions } from "i18next-http-backend"
+import { initReactI18next } from "react-i18next"
+import { type TranslationKey, languages } from "./data.generated"
+
+declare module "i18next" {
+  interface CustomTypeOptions {
+    defaultNS: "translation"
+    resources: {
+      translation: {
+        [key in TranslationKey]: string
+      }
+    }
+  }
+}
+
+/**
+ * Given a list of wanted locales and a list of available locales,
+ * return the best match.
+ */
+function resolve(preferences: readonly string[], available: readonly string[]) {
+  const resourceLanguages = available.map(locale => locale.split("-")[0])
+
+  for (const locale of preferences) {
+    for (const [i, resource] of available.entries()) {
+      if (locale === resource) {
+        return resource
+      } else if (locale.split("-")[0] === resourceLanguages[i]) {
+        return resource
+      }
+    }
+  }
+
+  return available[0]
+}
+
+const monacoLanguages = new Set([
+  "es",
+  "ja",
+  "ru",
+  "fr",
+  "zh-cn",
+  "de",
+  "it",
+  "ko",
+  "zh-tw",
+])
+
+export function getMonacoLanguage() {
+  const locale = getLocale().toLowerCase()
+  const [language] = locale.split("-")
+  if (monacoLanguages.has(locale)) {
+    return locale
+  } else if (locale === "zh-hk" || locale === "zh-mo") {
+    return "zh-tw"
+  } else if (monacoLanguages.has(language)) {
+    return language
+  }
+  return "en"
+}
+
+export function getLocale(): string {
+  try {
+    const locale = JSON.parse(localStorage.getItem("locale") ?? "null")
+    if (locale && languages.includes(locale)) {
+      return locale
+    }
+  } catch (e) {
+    console.error(e)
+  }
+
+  return resolve([browser.i18n.getUILanguage()], languages)
+}
+
+export function setLanguage(lang: string | null) {
+  try {
+    localStorage.setItem("locale", JSON.stringify(lang))
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+export async function getI18n() {
+  const lang = getLocale()
+  await import(`./resources/${lang}/index.json`)
+
+  await i18n
+    .use(ICU)
+    .use(HttpApi)
+    .use(initReactI18next)
+    .init({
+      lng: lang,
+      fallbackLng: "fr-CA",
+      interpolation: {
+        escapeValue: false,
+      },
+      supportedLngs: languages,
+      backend: {
+        loadPath: "{{lng}}",
+        async request(_, lang, _payload, callback) {
+          try {
+            const { default: json } = await import(`./resources/${lang}/index.json`)
+            callback(null, { status: 200, data: json })
+          } catch (error) {
+            callback(error, { status: 404, data: null! })
+          }
+        },
+      } satisfies HttpBackendOptions,
+    })
+
+  return i18n
+}
diff --git a/src/shared/i18n/resources/.gitignore b/src/shared/i18n/resources/.gitignore
new file mode 100644
index 0000000..eb518f5
--- /dev/null
+++ b/src/shared/i18n/resources/.gitignore
@@ -0,0 +1,3 @@
+/*
+!en-US
+!.gitignore
\ No newline at end of file
diff --git a/src/shared/i18n/resources/en-US/index.json b/src/shared/i18n/resources/en-US/index.json
new file mode 100644
index 0000000..3783844
--- /dev/null
+++ b/src/shared/i18n/resources/en-US/index.json
@@ -0,0 +1,175 @@
+{
+  "meta": {
+    "description": "User style manager"
+  },
+  "yes": "Yes",
+  "no": "No",
+  "cancel": "Cancel",
+  "never": "Never",
+  "rule": {
+    "url": "URL",
+    "urlPrefix": "URL starting with",
+    "domain": "URLs on the domain",
+    "glob": "URLs matching the Glob",
+    "regexp": "URLs matching the regexp",
+    "specify": "Specify",
+    "includesLabel": "Applies to",
+    "excludesLabel": "Unless",
+    "deleteRule": "Delete rule",
+    "addRule": "Add rule",
+    "ruleType": "Rule type"
+  },
+  "file": {
+    "name": "Name",
+    "nameGlobalStyle": "Global",
+    "createGlobalStyle": "Create global style",
+    "createStyle": "Create a stylesheet",
+    "createFile": "Create a file",
+    "globalFileCannotHaveRules": "Global files cannot have rules.",
+    "labelCreatedDate": "Created",
+    "labelUpdatedDate": "Last Updated",
+    "labelRequestedDate": "Last Used",
+    "untitled": "Untitled",
+    "untagged": "Untagged"
+  },
+  "sortBy": {
+    "name": "Name",
+    "size": "Size",
+    "lastModified": "Last modified",
+    "lastUsed": "Last used",
+    "asc": "Ascending",
+    "desc": "Descending"
+  },
+  "editor": {
+    "verbRename": "Rename",
+    "verbCreate": "Create",
+    "verbEnable": "Enable",
+    "verbDisable": "Disable",
+    "verbDelete": "Delete",
+    "verbArchive": "Archive",
+    "verbUnarchive": "Unarchive",
+    "verbDuplicate": "Duplicate",
+    "verbDefinitelyDelete": "Definitely delete",
+    "verbRestore": "Restore",
+    "verbHide": "Hide",
+    "verbUnhide": "Unhide",
+    "verbSave": "Save",
+    "verbDoNotSave": "Don’t save",
+    "verbRemoveIcon": "Remove icon",
+    "verbModifyIcon": "Modify icon",
+    "verbModifyLabel": "Modify label",
+    "downloadIconFromURL": "Download icon from URL",
+    "downloadIconFromDuckDuckGo": "Download icon from DuckDuckGo",
+    "modifyIcon": "Modify icon",
+    "closeUnsavedQuestion": "Do you want to save the changes you made to {name}?",
+    "closeUnsavedDescription": "Your changes will be lost if you don't save them.",
+    "disabled": "Disabled",
+    "archived": "Archived",
+    "deleted": "Deleted",
+    "hidden": "Hidden",
+    "noIcon": "No icon"
+  },
+  "tabs": {
+    "verbClose": "Close",
+    "verbCloseOthers": "Close others",
+    "verbCloseAll": "Close all",
+    "verbCloseRight": "Close to the right",
+    "verbCopyName": "Copy name",
+    "verbCopySourceCode": "Copy source code"
+  },
+  "editorPane": {
+    "rules": "Rules",
+    "issues": "Issues",
+    "tags": "Tags",
+    "statistics": "Statistics",
+    "preview": "Preview"
+  },
+  "issues": {
+    "noIssuesFound": "No issues found."
+  },
+  "import": {
+    "dragFileHere": "Drag a file here",
+    "waiting": "Waiting...",
+    "importingLabel": "Importing...",
+    "invalidFile": "Invalid file format",
+    "selectAll": "Select all",
+    "export": "Export"
+  },
+  "preferences": {
+    "autoDetect": "Auto-detect",
+    "darkMode": "Night mode",
+    "lightMode": "Light mode",
+    "darkTheme": "Dark theme",
+    "lightTheme": "Light theme",
+    "colorScheme": "Color scheme",
+    "enabled": "Enable extension",
+    "language": "Language",
+    "fontFamily": "Font Family",
+    "fontSize": "Font Size",
+    "lineHeight": "Line Height",
+    "minimap": "Show Minimap",
+    "tabSize": "Tab Size",
+    "debugMode": "Debug mode",
+    "clientName": "Client name",
+    "clientNameDescription": "This name is used to identify the backup source",
+    "formatOnSave": "Format on save",
+    "resetUsageData": "Reset usage data.",
+    "resetUsageDataCompleted": "Usage data has been reset.",
+    "recordUsageData": "Record usage data",
+    "recordUsageDataDescription": "This data is stored locally for your reference and never sent to any server."
+  },
+  "tab": {
+    "stylesheet": "Stylesheet",
+    "file": "File",
+    "search": "Search",
+    "documentation": "Documentation",
+    "market": "Market",
+    "playground": "GraphQL playground",
+    "import": "Import",
+    "importNFile": "Import {n, plural, one{1 file} other{{n} files}}",
+    "cloud": "Cloud",
+    "settings": "Settings"
+  },
+  "settings": {
+    "deleteAllFiles": "Delete all files",
+    "populateWithSampleFiles": "Populate with sample files",
+    "doYouReallyWantToDeleteAllFiles": "Do you really want to delete all files?"
+  },
+  "search": {
+    "caseSensitive": "Case sensitive",
+    "resultCounter": "{count} results in {fileCount} files",
+    "wholeWord": "Whole word",
+    "find": "Find",
+    "replace": "Replace",
+    "replaceAll": "Replace All"
+  },
+  "cloud": {
+    "sync": "Sync",
+    "username": "Username",
+    "email": "Email",
+    "password": "Password",
+    "login": "Login",
+    "logout": "Logout",
+    "register": "Register",
+    "upload": "Upload",
+    "download": "Download",
+    "clear": "Clear",
+    "noFilesFound": "No files found.",
+    "filesUploaded": "Files uploaded.",
+    "filesDownloaded": "Files downloaded.",
+    "youHaveSuccessfullySignedUp": "You have successfully signed up.",
+    "youHaveSuccessfullyLoggedIn": "You have successfully logged in.",
+    "youHaveSuccessfullyLoggedOut": "You have successfully logged out.",
+    "server": "Server"
+  },
+  "messages": {
+    "actionSucceeded": "Action succeeded.",
+    "actionFailed": "Action failed."
+  },
+  "popup": {
+    "noStylesForSite": "No styles installed for this site.",
+    "openManage": "Manage installed styles.",
+    "unavailableForURL": "The extension does not work on pages like this.",
+    "findStylesForSite": "Find more styles for this site."
+  }
+}
diff --git a/src/shared/idb.ts b/src/shared/idb.ts
new file mode 100644
index 0000000..ef7e5e4
--- /dev/null
+++ b/src/shared/idb.ts
@@ -0,0 +1,67 @@
+import * as idbKeyVal from "idb-keyval"
+
+export class Storage<T> {
+  cache: Map<string, any>
+
+  private constructor(
+    private store: idbKeyVal.UseStore,
+    allKeys: IDBValidKey[],
+    allValues: any[],
+  ) {
+    this.cache = new Map<string, any>(
+      allKeys.map((key, i) => [key as string, allValues[i]]), //
+    )
+  }
+
+  static async of<T>(dbName: string, storeName: string) {
+    const store = idbKeyVal.createStore(dbName, storeName)
+    const allKeys = await idbKeyVal.keys(store)
+    return new Storage<T>(store, allKeys, await idbKeyVal.getMany(allKeys, store))
+  }
+
+  get(key: string): T | undefined {
+    return this.cache.get(key)
+  }
+
+  has(key: string): boolean {
+    return this.cache.has(key)
+  }
+
+  async update(key: string, updater: (value?: T) => T): Promise<void> {
+    const value = this.get(key)
+    const newValue = updater(value)
+    await this.set(key, typeof newValue === "object" ? newValue : (value as T))
+  }
+
+  async updateAll(updater: (value?: T) => T): Promise<void> {
+    const keys = this.keys()
+    await Promise.all(keys.map(key => this.update(key, updater)))
+  }
+
+  async set(key: string, value: T): Promise<void> {
+    this.cache.set(key, value)
+    await idbKeyVal.set(key, value, this.store)
+  }
+
+  async delete(key: string): Promise<void> {
+    this.cache.delete(key)
+    await idbKeyVal.del(key, this.store)
+  }
+
+  keys(): string[] {
+    return Array.from(this.cache.keys())
+  }
+
+  values(): T[] {
+    return Array.from(this.cache.values())
+  }
+
+  entries(): [string, T][] {
+    return Array.from(this.cache.entries())
+  }
+
+  async clear() {
+    const keys = this.keys()
+    await Promise.all(keys.map(key => this.delete(key)))
+  }
+}
diff --git a/src/shared/index.ts b/src/shared/index.ts
new file mode 100644
index 0000000..676edac
--- /dev/null
+++ b/src/shared/index.ts
@@ -0,0 +1,5 @@
+export const GLOBAL_STYLE_ID = "global"
+
+export function isGlobalStyle(file?: { id: string }) {
+  return file?.id === GLOBAL_STYLE_ID
+}
diff --git a/src/shared/localStorage.ts b/src/shared/localStorage.ts
new file mode 100644
index 0000000..78bf91f
--- /dev/null
+++ b/src/shared/localStorage.ts
@@ -0,0 +1,56 @@
+import json from "superjson"
+
+// https://gist.github.com/paulirish/5558557
+export const hasLocalStorage = (() => {
+  const mod = "TEST_LOCAL_STORAGE"
+  try {
+    localStorage.setItem(mod, mod)
+    localStorage.removeItem(mod)
+    return true
+  } catch (e) {
+    return false
+  }
+})()
+
+export default {
+  *keys() {
+    for (let i = 0; i < localStorage.length; i++) {
+      yield localStorage.key(i)
+    }
+  },
+
+  setItem(key: string, value: any) {
+    localStorage.setItem(key, json.stringify(value))
+  },
+
+  getItem(key: string) {
+    const item = localStorage.getItem(key)
+    if (item != null) {
+      return json.parse(item)
+    }
+  },
+}
+
+if (process.env.NODE_ENV === "development" && hasLocalStorage) {
+  Object.defineProperties(globalThis, {
+    storage: {
+      get() {
+        return Object.fromEntries(
+          Object.entries(localStorage).map(([key, rawValue]) => {
+            let value
+            if (rawValue.startsWith('{"json":')) {
+              value = json.parse(rawValue)
+            } else {
+              try {
+                value = JSON.parse(rawValue)
+              } catch {
+                value = rawValue
+              }
+            }
+            return [key, value]
+          }),
+        )
+      },
+    },
+  })
+}
diff --git a/src/shared/messaging.ts b/src/shared/messaging.ts
new file mode 100644
index 0000000..bf0cd69
--- /dev/null
+++ b/src/shared/messaging.ts
@@ -0,0 +1,31 @@
+import browser from "webextension-polyfill"
+import type { TypedDocumentNode } from "@apollo/client"
+
+export async function sendMessage(message: Record<string, any>) {
+  try {
+    const response = await browser.runtime.sendMessage(message)
+    return [response]
+  } catch (err) {
+    return [undefined, err.message]
+  }
+}
+
+export async function graphql<T extends TypedDocumentNode<any, any>>(
+  query: T,
+  variables: T extends TypedDocumentNode<any, infer K> ? K : never,
+): Promise<T extends TypedDocumentNode<infer K, any> ? { data: K; error?: any } : never> {
+  if (process.env.NODE_ENV === "development") {
+    // console.log({ query, variables });
+  }
+
+  const [result, error] = await sendMessage({
+    method: "gql",
+    body: { query, variables },
+  })
+
+  if (error) {
+    throw Error(error)
+  }
+
+  return result
+}
diff --git a/src/shared/models/index.ts b/src/shared/models/index.ts
new file mode 100644
index 0000000..8398bff
--- /dev/null
+++ b/src/shared/models/index.ts
@@ -0,0 +1,27 @@
+import { registerEnumType } from "@aet/gql-tools/macro"
+import { FileSortBy, FileState, RuleType, Theme } from "./utils"
+import type { Preferences } from "./models.generated"
+export * from "./models.generated"
+
+registerEnumType(RuleType)
+registerEnumType(Theme)
+registerEnumType(FileState)
+registerEnumType(FileSortBy)
+
+export const defaultPreferences: Preferences = {
+  darkTheme: "github-dark",
+  enabled: true,
+  faviconServer: "",
+  fontFamily: "D2Coding, Hiragino Sans, Inconsolata, Consolas",
+  fontSize: 16,
+  formatOnSave: false,
+  lightTheme: "github-light",
+  lineHeight: 24,
+  minimap: false,
+  showBadge: true,
+  tabSize: 2,
+  theme: Theme.System,
+  recordUsageData: false,
+  debugMode: false,
+  clientName: "",
+}
diff --git a/src/shared/models/models.yml b/src/shared/models/models.yml
new file mode 100644
index 0000000..9a7c745
--- /dev/null
+++ b/src/shared/models/models.yml
@@ -0,0 +1,135 @@
+enums:
+  RuleType:
+    - Domain
+    - Glob
+    - RegExp
+    - URL
+    - URLPrefix
+
+  Theme:
+    - Light
+    - Dark
+    - System
+
+  FileState:
+    - None
+    - Hidden
+    - Archived
+    - Deleted
+
+  FileSortBy:
+    - Name
+    - UpdatedAt
+
+models:
+  FileFilter:
+    as: [input, object]
+    fields:
+      id?: ID[]
+      url?: String
+      tags?: String[]
+      state?: FileState
+      enabled?: Boolean
+      isGlobal?: Boolean
+
+  FindFilterArgs:
+    as: [args]
+    fields:
+      filter?: FileFilter
+      take?: Int
+      sortBy?: FileSortBy
+      logQuery?: Boolean
+
+  Preferences:
+    as:
+      - [input, partial: true]
+      - [object]
+    fields:
+      clientName: String
+      darkTheme: String
+      debugMode: Boolean
+      enabled: Boolean
+      faviconServer: String
+      fontFamily: String
+      fontSize: Int
+      formatOnSave: Boolean
+      lightTheme: String
+      lineHeight: Int
+      minimap: Boolean
+      recordUsageData: Boolean
+      showBadge: Boolean
+      tabSize: Int
+      theme: Theme
+
+  Rule:
+    as: [input, object]
+    fields:
+      exclude: Boolean
+      type: RuleType
+      value: String
+
+  Section:
+    as: [input, object]
+    fields:
+      id: ID
+      name: String
+      code: String
+      enabled: Boolean
+
+  File:
+    as:
+      - [input, partial: true, name: PartialFileInput]
+      - [input]
+      - [object]
+    fields:
+      id: ID
+      name: String
+      mimeType: String
+      enabled: Boolean
+      sections: Section[]
+      subLabel?: String
+      tags: String[]
+      rules: Rule[]
+      icon?: String | null
+      hidden: Boolean
+      state: FileState
+      createdAt: Int # Date
+      updatedAt: Int # Date
+
+    extra:
+      schemaVersion?: number = 1
+
+  Metadata:
+    as: [object]
+    fields:
+      version: Int
+
+  Match:
+    as: [object]
+    fields:
+      file: File
+      line: String
+      lineNumber?: Int
+      index: Int
+      submatch: Submatch
+
+  Submatch:
+    as: [object]
+    fields:
+      match: String
+      start: Int
+      end: Int
+
+  ExportedV1:
+    as: [input]
+    fields:
+      schema: 1
+      files: File[]
+      source: String
+      preferences: InputPreferences
+
+  ClientMetadata:
+    as: [object]
+    fields:
+      browser: String
+      os: String
diff --git a/src/shared/models/utils.ts b/src/shared/models/utils.ts
new file mode 100644
index 0000000..749e470
--- /dev/null
+++ b/src/shared/models/utils.ts
@@ -0,0 +1,49 @@
+import globToRegExp from "glob-to-regexp"
+import { partition } from "lodash"
+import { RuleType } from "./enums.generated"
+import type { File, Rule } from "./index"
+
+export * from "./enums.generated"
+
+export function fileMatches(file: File, url: string) {
+  const [includes, excludes] = partition(file.rules, rule => !rule.exclude)
+  return (
+    includes.some(rule => ruleMatches(rule, url)) &&
+    excludes.every(rule => !ruleMatches(rule, url))
+  )
+}
+
+function ruleMatches(rule: Rule, url: string) {
+  switch (rule.type) {
+    case RuleType.URL:
+      return rule.value.includes(url)
+    case RuleType.URLPrefix:
+      return url.startsWith(rule.value)
+    case RuleType.Domain:
+      return getDomains(url).includes(rule.value)
+    case RuleType.Glob:
+      return globToRegExp(rule.value).test(url)
+    case RuleType.RegExp:
+      return toRegExp(rule.value).test(url)
+  }
+}
+
+function getDomains(url: string): string[] {
+  const { hostname } = new URL(url)
+
+  const domains: string[] = [hostname]
+  let index = hostname.indexOf(".")
+  while (index !== -1) {
+    domains.push(hostname.substring(index + 1))
+    index = hostname.indexOf(".", index + 1)
+  }
+
+  return domains
+}
+
+function toRegExp(value: string) {
+  // we want to match the full url, so add ^ and $ if not already present
+  if (value[0] !== "^") value = `^${value}`
+  if (!value.endsWith("$")) value += "$"
+  return RegExp(value)
+}
diff --git a/src/shared/relativeTime.ts b/src/shared/relativeTime.ts
new file mode 100644
index 0000000..edfd47e
--- /dev/null
+++ b/src/shared/relativeTime.ts
@@ -0,0 +1,34 @@
+const formatter = new Intl.RelativeTimeFormat(undefined, {
+  numeric: "auto",
+})
+
+const DIVISIONS: {
+  amount: number
+  name: Intl.RelativeTimeFormatUnit
+}[] = [
+  { amount: 60, name: "seconds" },
+  { amount: 60, name: "minutes" },
+  { amount: 24, name: "hours" },
+  { amount: 7, name: "days" },
+  { amount: 4.34524, name: "weeks" },
+  { amount: 12, name: "months" },
+  { amount: Number.POSITIVE_INFINITY, name: "years" },
+]
+
+export function relativeTime(date: Date | string | number) {
+  if (!(date instanceof Date)) {
+    date = new Date(date)
+  }
+
+  let duration = (date.valueOf() - Date.now()) / 1000
+
+  for (let i = 0; i < DIVISIONS.length; i++) {
+    const division = DIVISIONS[i]
+    if (Math.abs(duration) < division.amount) {
+      return formatter.format(Math.round(duration), division.name)
+    }
+    duration /= division.amount
+  }
+
+  return ""
+}
diff --git a/src/shared/removeTypeName.ts b/src/shared/removeTypeName.ts
new file mode 100644
index 0000000..6892247
--- /dev/null
+++ b/src/shared/removeTypeName.ts
@@ -0,0 +1,16 @@
+export function removeTypeName<T>(obj: T): T {
+  if (Array.isArray(obj)) {
+    return obj.map(removeTypeName) as any
+  } else if (typeof obj === "object" && obj !== null) {
+    const { __typename: _, ...newObj } = obj as any
+    return Object.keys(newObj).reduce(
+      (acc, key) => {
+        acc[key] = removeTypeName(newObj[key])
+        return acc
+      },
+      Object.create(Object.getPrototypeOf(obj)),
+    )
+  } else {
+    return obj
+  }
+}
diff --git a/src/shared/sideEffect.tsx b/src/shared/sideEffect.tsx
new file mode 100644
index 0000000..d97ff22
--- /dev/null
+++ b/src/shared/sideEffect.tsx
@@ -0,0 +1,18 @@
+import { memo } from "react"
+
+export function sideEffects(fns: (() => void)[]) {
+  const components = fns.map(fn =>
+    memo(() => {
+      fn()
+      return null
+    }),
+  )
+
+  return memo(() => (
+    <>
+      {components.map((Component, index) => (
+        <Component key={index} />
+      ))}
+    </>
+  ))
+}
diff --git a/src/shared/styled.tsx b/src/shared/styled.tsx
new file mode 100644
index 0000000..5baa731
--- /dev/null
+++ b/src/shared/styled.tsx
@@ -0,0 +1,185 @@
+import styled from "@emotion/styled"
+import { DARK_MODE, color, token } from "~/options/theme"
+
+export const ButtonWrapper = styled.button`
+  background: transparent;
+  padding: 0;
+  border: none;
+  display: flex;
+`
+
+export const TabsContainer = styled.div`
+  margin: 0 16px;
+  padding: 5px 0;
+`
+
+export const TabHeader = styled.div`
+  display: flex;
+  margin-top: 12px;
+  margin-bottom: 20px;
+`
+
+// use <button> props
+export const TabButton: React.FC<
+  { active: boolean } & React.DetailedHTMLProps<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  >
+> = ({ active, ...props }) => (active ? <Pill {...props} /> : <PillBase {...props} />)
+
+export const IconButton = styled.button`
+  background: transparent;
+  border-radius: 5px;
+  border: none;
+  color: #9da2a6;
+  &:hover,
+  &.active {
+    background-color: ${color("#f6f8fa", "#2b3245")};
+    color: ${token.accent.fg};
+  }
+`
+
+const PillBase = styled.button`
+  align-items: center;
+  background: transparent;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  color: #9da2a6;
+  display: flex;
+  justify-content: center;
+  padding: 5px 10px;
+  &:not(:disabled):hover {
+    background-color: ${color("#e9e7e7", "#2b3245")};
+    color: ${color("#1782ea", "#b2d9ff")};
+  }
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`
+
+export const Pill = styled(PillBase)`
+  background-color: ${token.canvas.overlay};
+  border: 1px solid ${token.border.default};
+  color: ${color("#000", "#c9d1d9")};
+
+  ${DARK_MODE} {
+    border-color: #444a57;
+  }
+
+  > svg {
+    margin-right: 4px;
+  }
+`
+
+export const BlockButton = styled(Pill)`
+  width: 100%;
+  height: 2.3em;
+`
+
+const ButtonPill = (_: {
+  backgroundColor: string
+  boxShadow: string
+  color: string
+  hover: {
+    backgroundColor: string
+    boxShadow: string
+  }
+  active: {
+    backgroundColor: string
+    boxShadow: string
+  }
+  disabled?: {
+    color?: string
+  }
+}) => styled(PillBase)`
+  background-color: ${_.backgroundColor};
+  border: none;
+  box-shadow: ${_.boxShadow};
+  color: ${_.color};
+  width: 100%;
+  line-height: 1.5;
+  transition: 0.1s;
+
+  &[disabled] {
+    color: ${_.disabled?.color ?? token.fg.default};
+    opacity: 0.5;
+  }
+
+  &&:hover {
+    && {
+      background-color: ${_.hover.backgroundColor};
+      box-shadow: ${_.hover.boxShadow};
+      color: ${_.color};
+    }
+  }
+
+  &:active {
+    background-color: ${_.active.backgroundColor};
+    box-shadow: ${_.active.boxShadow};
+  }
+`
+
+export const PrimaryPill = ButtonPill({
+  backgroundColor: "#1e88e5",
+  boxShadow: "0px 2px 4px rgba(30, 136, 229, 0.4)",
+  color: "#fff",
+  hover: {
+    backgroundColor: "#245fb3",
+    boxShadow: "0px 2px 8px rgba(30, 136, 229, 0.6)",
+  },
+  active: {
+    backgroundColor: "#1c4d8c",
+    boxShadow: "none",
+  },
+  disabled: {
+    color: "#fff",
+  },
+})
+
+export const DangerPill = ButtonPill({
+  backgroundColor: "#ad241a",
+  boxShadow: "none",
+  color: "#fff",
+  hover: {
+    backgroundColor: "#c62828",
+    boxShadow: "0px 1px 2px rgba(244, 67, 54, 0.4)",
+  },
+  active: {
+    backgroundColor: "#b71c1c",
+    boxShadow: "none",
+  },
+})
+
+export const Input = styled.input`
+  background-color: ${token.canvas.overlay};
+  border: 1px solid ${token.border.muted};
+  border-radius: 5px;
+  padding: 7px 10px;
+  width: 100%;
+
+  &:focus {
+    border-color: transparent;
+    outline: 1px solid ${token.accent.emphasis};
+    transition: outline 0.1s;
+  }
+`
+
+export const Subheading = styled.div`
+  flex-grow: 1;
+  font-size: 0.88em;
+  opacity: 0.7;
+  text-transform: uppercase;
+  letter-spacing: 0.7px;
+  > option {
+    text-transform: none;
+  }
+`
+
+export const SubheadingButton = styled(IconButton)`
+  svg {
+    font-size: 1.14286em;
+  }
+  margin-top: -5px;
+  height: 1.35em;
+`
diff --git a/src/shared/theme/D2CodingLatin.woff2 b/src/shared/theme/D2CodingLatin.woff2
new file mode 100644
index 0000000..e95e153
Binary files /dev/null and b/src/shared/theme/D2CodingLatin.woff2 differ
diff --git a/src/shared/theme/index.css b/src/shared/theme/index.css
new file mode 100644
index 0000000..18a1f8d
--- /dev/null
+++ b/src/shared/theme/index.css
@@ -0,0 +1,36 @@
+@font-face {
+  font-family: D2Coding;
+  src: url("./D2CodingLatin.woff2?1") format("woff2");
+}
+
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  --font-family-western: -apple-system, BlinkMacSystemFont, Inter, system-ui;
+  --font-family: var(--font-family-western), sans-serif;
+}
+:lang(ja) {
+  --font-family: var(--font-family-western), "Noto Sans CJK JP", sans-serif;
+}
+:lang(zh) {
+  --font-family: var(--font-family-western), "Noto Sans CJK SC", sans-serif;
+}
+:lang(zh-Hant) {
+  --font-family: var(--font-family-western), "Noto Sans CJK TC", sans-serif;
+}
+
+body[data-platform="linux"] {
+  text-shadow: 0.1px 0 currentColor;
+}
+
+select,
+button,
+input,
+textarea {
+  background: inherit;
+  font-family: var(--font-family);
+  font-size: inherit;
+  color: inherit;
+}
diff --git a/src/shared/theme/styled.ts b/src/shared/theme/styled.ts
new file mode 100644
index 0000000..db9be22
--- /dev/null
+++ b/src/shared/theme/styled.ts
@@ -0,0 +1,8 @@
+import { css } from "@emotion/css"
+
+export const italic = css`
+  font-style: italic;
+  &:lang(zh) {
+    font-style: normal;
+  }
+`
diff --git a/src/shared/theme/tokens.tsx b/src/shared/theme/tokens.tsx
new file mode 100644
index 0000000..8e45c95
--- /dev/null
+++ b/src/shared/theme/tokens.tsx
@@ -0,0 +1,4 @@
+export const tokenSource = {
+  backgroundHover: "#ccc, #20324e",
+  backgroundActive: "#ddd, #162337",
+}
diff --git a/src/shared/useForceUpdate.ts b/src/shared/useForceUpdate.ts
new file mode 100644
index 0000000..af1a826
--- /dev/null
+++ b/src/shared/useForceUpdate.ts
@@ -0,0 +1,6 @@
+import { useCallback, useState } from "react"
+
+export function useForceUpdate() {
+  const [, setState] = useState(0)
+  return useCallback(() => setState(state => state + 1), [])
+}
diff --git a/src/shared/wait.ts b/src/shared/wait.ts
new file mode 100644
index 0000000..ef8810d
--- /dev/null
+++ b/src/shared/wait.ts
@@ -0,0 +1 @@
+export const ms = (ms: number) => new Promise<void>(resolve => setTimeout(resolve, ms))
diff --git a/src/types.d.ts b/src/types.d.ts
new file mode 100644
index 0000000..1011492
--- /dev/null
+++ b/src/types.d.ts
@@ -0,0 +1,9 @@
+type FC<T = {}> = (props: T) => React.ReactElement | null
+
+interface ClassNameProp {
+  className?: string
+}
+
+interface Array<T> {
+  filter(predicate: BooleanConstructor): Exclude<T, null | undefined | false | "" | 0>[]
+}
diff --git a/src/vendor/allotment/LICENSE b/src/vendor/allotment/LICENSE
new file mode 100644
index 0000000..5d02114
--- /dev/null
+++ b/src/vendor/allotment/LICENSE
@@ -0,0 +1,23 @@
+MIT License
+
+Copyright (c) 2021 - present John Walley
+Copyright (c) 2021 - present Gobalsky Labs Ltd.
+Copyright (c) 2015 - present Microsoft Corporation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/src/vendor/allotment/README.md b/src/vendor/allotment/README.md
new file mode 100644
index 0000000..28f6c10
--- /dev/null
+++ b/src/vendor/allotment/README.md
@@ -0,0 +1,258 @@
+[![CI status](https://github.com/johnwalley/allotment/actions/workflows/build.yml/badge.svg)](https://github.com/johnwalley/allotment/actions/workflows/build.yml)
+[![GitHub license](https://img.shields.io/npm/l/allotment?style=plastic)](https://github.com/johnwalley/allotment/blob/main/LICENSE)
+[![NPM](https://img.shields.io/npm/v/allotment?style=plastic&color=green)](https://npmjs.com/package/allotment/)
+[![Netlify Status](https://img.shields.io/netlify/17b280b3-d81d-4576-a58d-b7ccc2e66d7c?color=green&style=plastic)](https://allotment-storybook.netlify.app/)
+
+<p align="center">
+    <a href="https://github.com/johnwalley/allotment">
+    <img src="./assets/logo.svg" alt="Logo" height="120">
+  </a>
+  
+  <h3 align="center">Allotment</h3>
+
+  <p align="center">
+    React split-pane component.
+  </p>
+  
+  <p align="center">
+    <img align="center" src="https://user-images.githubusercontent.com/981531/161631194-1e24ea10-f46a-42db-bfdb-89bcfa3fc50b.gif" />
+  </p>
+</p>
+
+- **React-based:** Integrate effortlessly into your existing React-based application.
+- **Industry standard look and feel:** Like VS Code's split view implementation? You're in luck! This component is derived from the same codebase.
+- **Dynamic:** Want to declaratively add and remove panes? We've got you covered.
+
+## Examples
+
+You can find examples of using the library [here](https://allotment-storybook.netlify.app/).
+
+## Getting Started
+
+Allotment is available from npm.
+
+### Prerequisites
+
+Allotment has `react` and `react-dom` as peer dependencies.
+
+```sh
+yarn add react react-dom
+```
+
+### Installation
+
+```sh
+yarn add allotment
+```
+
+## Usage
+
+```jsx
+import React from "react";
+import { Allotment } from "allotment";
+import "allotment/dist/style.css";
+
+export const App = () => (
+  <Allotment>
+    <ComponentA>
+    <ComponentB>
+  </Allotment>
+);
+```
+
+If you want more control over the behaviour of the individual panes you can use the `Allotment.Pane` component. This includes setting the minimum and maximum size of a pane, as well as whether to enable snapping behaviour.
+
+```jsx
+<Allotment>
+  <Allotment.Pane minSize={200}>
+    <ComponentA>
+  </Allotment.Pane>
+  <Allotment.Pane snap>
+    <ComponentB>
+  </Allotment.Pane>
+</Allotment>
+```
+
+## Allotment props
+
+All properties are optional.
+
+### defaultSizes
+
+An array of initial sizes of the panes. If the sum of the sizes differs from the size of the container then the panes' sizes will be scaled proportionally.
+
+```jsx
+<Allotment defaultSizes={[100, 200]}>
+  <div />
+  <div />
+</Allotment>
+```
+
+### maxSize (default: `Infinity`)
+
+Maximum size of any pane.
+
+### minSize (default: `30`)
+
+Minimum size of any pane.
+
+### proportionalLayout (default: `true`)
+
+Resize each view proportionally when resizing container.
+
+### separator (default: `true`)
+
+Whether to render a separator between panes.
+
+### snap (default: `false`)
+
+Enable snap to zero for all panes.
+
+### vertical (default: `false`)
+
+Direction to split. If true then the panes will be stacked vertically, otherwise they will be stacked horizontally.
+
+### onChange
+
+Callback that is fired when the pane sizes change (usually on drag). Recommended to add a debounce function to rate limit the callback. Passed an array of numbers.
+
+### onReset
+
+Callback that is fired whenever the user double clicks a sash.
+
+### onVisibleChange
+
+Callback that is fired whenever the user changes the visibility of a pane by snapping. Note that this will only be called if the new value is different from the current `visible` prop on the Pane.
+
+## Allotment.Pane props
+
+### maxSize
+
+Maximum size of this pane. Overrides `maxSize` set on parent component.
+
+### minSize
+
+Minimum size of this pane. Overrides `minSize` set on parent component.
+
+### priority
+
+The priority of the pane when the layout algorithm runs. Panes with higher priority will be resized first.
+
+Only used when `proportionalLayout` is false.
+
+### preferredSize
+
+Preferred size of this pane. Allotment will attempt to use this size when adding this pane (including on initial mount) as well as when a user double clicks a sash, or the `reset` method is called on the Allotment instance.
+
+The size can either be a number or a string. If it is a number it will be interpreted as a number of pixels. If it is a string it should end in either "px" or "%". If it ends in "px" it will be interpreted as a number of pixels, e.g. "120px". If it ends in "%" it will be interpreted as a percentage of the size of the Allotment component, e.g. "50%".
+
+### snap
+
+Enable snap to zero for this pane. Overrides `snap` set on parent component.
+
+### visible
+
+Whether the pane should be visible.
+
+## Styling
+
+Allotment uses [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for styling.
+You can customize the following default variables.
+
+```css
+:root {
+  --focus-border: #007fd4;
+  --separator-border: #838383;
+}
+```
+
+To control the feedback area size of the dragging area between panes you can call the exported `setSashSize` function with desired size in pixels. Set it to a larger value if you feel it's hard to resize the panes using the mouse. On touch devices the feedback area is always set to 20 pixels
+
+### Programmatic control
+
+You can use a ref to get access to the Allotment component instance and call its reset and resize methods manually:
+
+```jsx
+const ref = React.useRef(ref)
+
+return (
+  <div>
+    <button
+      onClick={() => {
+        ref.current.reset()
+      }}
+    >
+      Reset
+    </button>
+    <button
+      onClick={() => {
+        ref.current.resize([100, 200])
+      }}
+    >
+      Resize
+    </button>
+    <Allotment ref={ref}>
+      <div />
+      <div />
+    </Allotment>
+  </div>
+)
+```
+
+## Frequently asked questions
+
+### It's not working/I don't see anything
+
+The Allotment component takes its width and height from the element which contains it. It does not come with an explicit width or height out of the box. It's easy to end up with a div of height zero by accident. For example, adding allotment to a brand new Create React App project without setting a height on a containing div won't work because the default root div itself has no height.
+
+You should also check that the css has been imported/included, for example at the root of your application:
+
+```jsx
+import "allotment/dist/style.css"
+```
+
+### My content is larger than the containing pane. How can I let the user scroll?
+
+The simplest approach is to place your content inside a new div with width and height `100%` and overflow `auto`. This div will have the same dimensions as the pane it's inside and if its content overflows the browser will provide scrolling behaviour.
+
+### Next.js
+
+If you get an error when importing allotment in a Next.js project consider [not including the module server-side](https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr). Allotment currently only works in a browser. It might be possible to produce sensible results server-side in the future so create an issue requesting this if interested.
+
+### How do I prevent a pane from being resized?
+
+Set `minSize` and `maxSize` props to the same value.
+
+### How do I style the component?
+
+Some common style changes can be made by setting CSS variables.
+
+These include:
+
+| Name                 | Default                     | Description                    |
+| :------------------- | :-------------------------- | :----------------------------- |
+| `--focus-border`     | `#007fd4`                   | Color of the sash when hovered |
+| `--separator-border` | `rgba(128, 128, 128, 0.35)` | Color of the separator         |
+
+For more involved styling you can target the component's child elements.
+
+| Class                          | Description                                                     |
+| :----------------------------- | :-------------------------------------------------------------- |
+| `.split-view`                  | Styles applied to the top-level container                       |
+| `.split-view-horizontal`       | Styles applied to the top-level container if `vertical={false}` |
+| `.split-view-vertical`         | Styles applied to the top-level container if `vertical={true}`  |
+| `.split-view-separator-border` | Styles applied to the top-level container if `separator={true}` |
+| `.split-view-sash-dragging`    | Styles applied to the top-level container if sash is dragging   |
+| `.sash-container`              | Styles applied to the sash container                            |
+| `.sash`                        | Styles applied to the sash                                      |
+| `.sash-active`                 | Styles applied to the sash if being dragged                     |
+| `.sash-disabled`               | Styles applied to the sash if disabled                          |
+| `.sash-horizontal`             | Styles applied to the sash if `vertical={false}`                |
+| `.sash-hover`                  | Styles applied to the sash if being hovered over                |
+| `.sash-mac`                    | Styles applied to the sash if running under macos               |
+| `.sash-maximum`                | Styles applied to the sash if the pane is maximised             |
+| `.sash-minimum`                | Styles applied to the sash if the pane is minimised             |
+| `.sash-vertical`               | Styles applied to the sash if `vertical={true}`                 |
+| `.split-view-container`        | Styles applied to the split view container                      |
+| `.split-view-view`             | Styles applied to the split view view                           |
+| `.split-view-view-visible`     | Styles applied to the split view view if `visible={true}`       |
diff --git a/src/vendor/allotment/package.json b/src/vendor/allotment/package.json
new file mode 100644
index 0000000..136981b
--- /dev/null
+++ b/src/vendor/allotment/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "allotment",
+  "version": "1.18.1",
+  "description": "React split-pane component",
+  "main": "./src/index.tsx",
+  "repository": "https://github.com/johnwalley/allotment.git",
+  "author": "johnwalley <john@walley.org.uk>",
+  "license": "MIT",
+  "homepage": "https://allotment.mulberryhousesoftware.com/",
+  "files": [
+    "dist/*.mjs",
+    "dist/*.js",
+    "dist/*.css",
+    "dist/types/src/**/*.d.ts"
+  ],
+  "scripts": {
+    "build": "rollup -c && yarn build-types",
+    "build-storybook": "build-storybook",
+    "build-types": "tsc",
+    "prepare": "husky install",
+    "release": "standard-version",
+    "storybook": "start-storybook -p 6006",
+    "test": "jest"
+  },
+  "upstream": {
+    "version": 1,
+    "sources": {
+      "main": {
+        "repository": "https://github.com/johnwalley/allotment.git",
+        "commit": "5f64cb0a575df99c7a17ea324235b51e0316dbdd",
+        "branch": "main"
+      }
+    }
+  }
+}
diff --git a/src/vendor/allotment/src/emitter.ts b/src/vendor/allotment/src/emitter.ts
new file mode 100644
index 0000000..9b75a5c
--- /dev/null
+++ b/src/vendor/allotment/src/emitter.ts
@@ -0,0 +1,48 @@
+export class TinyEventEmitter<Events extends { [key: string]: any[] }> {
+  #listeners = new Map<keyof Events, Set<(...args: any) => void>>()
+
+  #getListeners(event: keyof Events) {
+    let listeners = this.#listeners.get(event)
+    if (!listeners) {
+      listeners = new Set()
+      this.#listeners.set(event, listeners)
+    }
+    return listeners
+  }
+
+  on<E extends keyof Events>(
+    event: E,
+    listener: (...args: Events[E]) => void,
+  ): Disposable {
+    this.#getListeners(event).add(listener)
+    return {
+      [Symbol.dispose]: () => this.off(event, listener),
+    }
+  }
+
+  once<E extends keyof Events>(
+    event: E,
+    listener: (...args: Events[E]) => void,
+  ): Disposable {
+    const once = (...args: Events[E]) => {
+      this.off(event, once)
+      listener(...args)
+    }
+    return this.on(event, once)
+  }
+
+  off<E extends keyof Events>(event: E, listener: (...args: Events[E]) => void): this {
+    this.#getListeners(event).delete(listener)
+    return this
+  }
+
+  emit<E extends keyof Events>(event: E, ...args: Events[E]): boolean {
+    const listeners = this.#getListeners(event)
+    for (const listener of listeners) {
+      listener(...args)
+    }
+    return listeners.size > 0
+  }
+}
+
+export { TinyEventEmitter as EventEmitter }
diff --git a/src/vendor/allotment/src/index.module.scss b/src/vendor/allotment/src/index.module.scss
new file mode 100644
index 0000000..65001cc
--- /dev/null
+++ b/src/vendor/allotment/src/index.module.scss
@@ -0,0 +1,135 @@
+:root {
+  --separator-border: rgba(128, 128, 128, 0.35);
+  --focus-border: #007fd4;
+  --sash-size: 4px;
+  --sash-hover-size: 2px;
+}
+
+.splitView {
+  > .sashContainer {
+    height: 100%;
+    pointer-events: none;
+    position: absolute;
+    width: 100%;
+  }
+
+  > .splitViewContainer {
+    height: 100%;
+    position: relative;
+    white-space: nowrap;
+    width: 100%;
+
+    > .splitViewView {
+      overflow: hidden;
+      position: absolute;
+      white-space: initial;
+    }
+  }
+
+  &.vertical > .splitViewContainer > .splitViewView {
+    width: 100%;
+  }
+
+  &.horizontal > .splitViewContainer > .splitViewView {
+    height: 100%;
+  }
+
+  &.separatorBorder //
+    > .splitViewContainer
+    > .splitViewView:not(:first-child)::before {
+    background-color: var(--separator-border);
+    content: " ";
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    z-index: 5;
+  }
+
+  &.separatorBorder.vertical
+    > .splitViewContainer
+    > .splitViewView:not(:first-child)::before {
+    height: 1px;
+    width: 100%;
+  }
+
+  &.separatorBorder.horizontal
+    > .splitViewContainer
+    > .splitViewView:not(:first-child)::before {
+    height: 100%;
+    width: 1px;
+  }
+}
+
+/** Sash */
+
+.sash {
+  position: absolute;
+  z-index: 2;
+  touch-action: none;
+  pointer-events: auto;
+  text-align: initial;
+
+  &.disabled {
+    pointer-events: none;
+    cursor: default !important;
+    pointer-events: none !important;
+  }
+
+  &.vertical {
+    cursor: ew-resize;
+    top: 0;
+    width: var(--sash-size);
+    height: 100%;
+
+    &:before {
+      width: var(--sash-hover-size);
+      left: calc(50% - (var(--sash-hover-size) / 2));
+    }
+    &.minimum {
+      cursor: e-resize;
+    }
+    &.maximum {
+      cursor: w-resize;
+    }
+    &.mac {
+      cursor: col-resize;
+    }
+  }
+
+  &.horizontal {
+    cursor: ns-resize;
+    left: 0;
+    width: 100%;
+    height: var(--sash-size);
+
+    &:before {
+      height: var(--sash-hover-size);
+      top: calc(50% - (var(--sash-hover-size) / 2));
+    }
+    &.minimum {
+      cursor: s-resize;
+    }
+    &.maximum {
+      cursor: n-resize;
+    }
+    &.mac {
+      cursor: row-resize;
+    }
+  }
+
+  &:before {
+    content: "";
+    pointer-events: none;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    transition: background-color 0.1s ease-out;
+    background: transparent;
+  }
+
+  &.hover:before,
+  &.active:before {
+    background: var(--focus-border);
+  }
+}
diff --git a/src/vendor/allotment/src/index.tsx b/src/vendor/allotment/src/index.tsx
new file mode 100644
index 0000000..dfbe734
--- /dev/null
+++ b/src/vendor/allotment/src/index.tsx
@@ -0,0 +1,537 @@
+import { css, cx } from "@emotion/css"
+import { clamp, isEqual } from "lodash"
+import {
+  Children,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
+import useResizeObserver from "./resizeObserver"
+import classNames from "./index.module.scss"
+import { isIOS } from "./platform"
+import { PaneView } from "./paneView"
+import { Orientation, setGlobalSashSize } from "./sash"
+import { LayoutPriority, Sizing, SplitView, type SplitViewOptions } from "./splitView"
+
+export { LayoutPriority } from "./splitView"
+
+const useIsomorphicLayoutEffect =
+  typeof window?.document?.createElement !== "undefined" ? useLayoutEffect : useEffect
+
+const ALLOTMENT_PANE = "Allotment.Pane"
+
+function isPane(item: React.ReactNode | typeof Pane): item is typeof Pane {
+  return (item as any).type.displayName === ALLOTMENT_PANE
+}
+
+function isPaneProps(props: AllotmentProps | PaneProps): props is PaneProps {
+  return (
+    (props as PaneProps).minSize !== undefined ||
+    (props as PaneProps).maxSize !== undefined ||
+    (props as PaneProps).preferredSize !== undefined ||
+    (props as PaneProps).priority !== undefined ||
+    (props as PaneProps).visible !== undefined
+  )
+}
+
+export interface LayoutService {
+  size: number
+}
+
+interface CommonProps {
+  /** Sets a className attribute on the outer component */
+  className?: string
+  /** Maximum size of each element */
+  maxSize?: number
+  /** Minimum size of each element */
+  minSize?: number
+  /** Enable snap to zero size */
+  snap?: boolean
+}
+
+interface PaneProps extends CommonProps {
+  children: React.ReactNode
+  /**
+   * Preferred size of this pane. Allotment will attempt to use this size when adding this pane (including on initial mount) as well as when a user double clicks a sash, or the `reset` method is called on the Allotment instance.
+   * @remarks The size can either be a number or a string. If it is a number it will be interpreted as a number of pixels. If it is a string it should end in either "px" or "%". If it ends in "px" it will be interpreted as a number of pixels, e.g. "120px". If it ends in "%" it will be interpreted as a percentage of the size of the Allotment component, e.g. "50%".
+   */
+  preferredSize?: number | string
+  /**
+   * The priority of the pane when the layout algorithm runs. Panes with higher priority will be resized first.
+   * @remarks Only used when `proportionalLayout` is false.
+   */
+  priority?: LayoutPriority
+  /** Whether the pane should be visible */
+  visible?: boolean
+}
+
+/**
+ * Pane component.
+ */
+export const Pane = forwardRef<HTMLDivElement, PaneProps>(
+  ({ className, children }: PaneProps, ref) => (
+    <div ref={ref} className={cx(classNames.splitViewView, className)}>
+      {children}
+    </div>
+  ),
+)
+
+/* @__PURE__ */ Pane.displayName = ALLOTMENT_PANE
+export type AllotmentHandle = {
+  reset: () => void
+  resize: (sizes: number[]) => void
+}
+
+export interface AllotmentProps extends CommonProps {
+  children: React.ReactNode
+  /** Initial size of each element */
+  defaultSizes?: number[]
+  /** Resize each view proportionally when resizing container */
+  proportionalLayout?: boolean
+  /** Whether to render a separator between panes */
+  separator?: boolean
+  /** Direction to split */
+  vertical?: boolean
+  /** Callback on drag */
+  onChange?: (sizes: number[]) => void
+  /** Callback on reset */
+  onReset?: () => void
+  /** Callback on visibility change */
+  onVisibleChange?: (index: number, visible: boolean) => void
+  /** Callback on drag start */
+  onDragStart?: (sizes: number[]) => void
+  /** Callback on drag end */
+  onDragEnd?: (sizes: number[]) => void
+}
+
+/**
+ * React split-pane component.
+ */
+export const Allotment = forwardRef<AllotmentHandle, AllotmentProps>((props, ref) => {
+  const {
+    children,
+    className,
+    maxSize = Infinity,
+    minSize = 30,
+    proportionalLayout = true,
+    separator = true,
+    defaultSizes,
+    snap = false,
+    vertical = false,
+    onChange,
+    onReset,
+    onVisibleChange,
+    onDragStart,
+    onDragEnd,
+  } = props
+  const containerRef = useRef<HTMLDivElement>(null!)
+  const previousKeys = useRef<string[]>([])
+  const splitViewPropsRef = useRef(new Map<React.Key, PaneProps>())
+  const splitViewRef = useRef<SplitView | null>(null)
+  const splitViewViewRef = useRef(new Map<React.Key, HTMLElement>())
+  const layoutService = useRef<LayoutService>({ size: undefined! })
+  const views = useRef<PaneView[]>([])
+
+  const [dimensionsInitialized, setDimensionsInitialized] = useState(false)
+
+  const childrenArray = useMemo(
+    () => Children.toArray(children).filter(isValidElement),
+    [children],
+  )
+
+  const resizeToPreferredSize = useCallback((index: number): boolean => {
+    const view = views.current?.[index]
+
+    if (typeof view?.preferredSize !== "number") {
+      return false
+    }
+
+    splitViewRef.current?.resizeView(index, Math.round(view.preferredSize))
+
+    return true
+  }, [])
+
+  useImperativeHandle(ref, () => ({
+    reset() {
+      if (onReset) {
+        onReset()
+      } else {
+        splitViewRef.current?.distributeViewSizes()
+
+        for (let index = 0; index < views.current.length; index++) {
+          resizeToPreferredSize(index)
+        }
+      }
+    },
+    resize(sizes) {
+      splitViewRef.current?.resizeViews(sizes)
+    },
+  }))
+
+  useIsomorphicLayoutEffect(() => {
+    let initializeSizes = true
+
+    if (defaultSizes && splitViewViewRef.current.size !== defaultSizes.length) {
+      initializeSizes = false
+
+      console.warn(
+        `Expected ${defaultSizes.length} children based on defaultSizes but found ${splitViewViewRef.current.size}`,
+      )
+    }
+
+    if (initializeSizes && defaultSizes) {
+      previousKeys.current = childrenArray.map(child => child.key as string)
+    }
+
+    const options: SplitViewOptions = {
+      orientation: vertical ? Orientation.Vertical : Orientation.Horizontal,
+      proportionalLayout,
+      ...(initializeSizes &&
+        defaultSizes && {
+          descriptor: {
+            size: defaultSizes.reduce((a, b) => a + b, 0),
+            views: defaultSizes.map((size, index) => {
+              const props = splitViewPropsRef.current.get(previousKeys.current[index])
+
+              const view = new PaneView(layoutService.current, {
+                element: document.createElement("div"),
+                minimumSize: props?.minSize ?? minSize,
+                maximumSize: props?.maxSize ?? maxSize,
+                priority: props?.priority ?? LayoutPriority.Normal,
+                ...(props?.preferredSize && {
+                  preferredSize: props?.preferredSize,
+                }),
+                snap: props?.snap ?? snap,
+              })
+
+              views.current.push(view)
+
+              return {
+                container: [...splitViewViewRef.current.values()][index],
+                size,
+                view,
+              }
+            }),
+          },
+        }),
+    }
+
+    const splitView = new SplitView(
+      containerRef.current,
+      options,
+      onChange,
+      onDragStart,
+      onDragEnd,
+    )
+    splitViewRef.current = splitView
+
+    // splitView.on("sashDragStart", () => {
+    //   containerRef.current?.classList.add("split-view-sash-dragging");
+    // });
+    // splitView.on("sashDragEnd", () => {
+    //   containerRef.current?.classList.remove("split-view-sash-dragging");
+    // });
+
+    splitView.on("sashChange", () => {
+      if (onVisibleChange && splitViewRef.current) {
+        const keys = childrenArray.map(child => child.key as string)
+
+        for (let index = 0; index < keys.length; index++) {
+          const props = splitViewPropsRef.current.get(keys[index])
+
+          if (props?.visible !== undefined) {
+            if (props.visible !== splitViewRef.current.isViewVisible(index)) {
+              onVisibleChange(index, splitViewRef.current.isViewVisible(index))
+            }
+          }
+        }
+      }
+    })
+
+    splitView.on("sashReset", (index: number) => {
+      if (onReset) {
+        onReset()
+      } else {
+        if (resizeToPreferredSize(index)) {
+          return
+        }
+
+        if (resizeToPreferredSize(index + 1)) {
+          return
+        }
+
+        splitViewRef.current?.distributeViewSizes()
+      }
+    })
+
+    return () => {
+      splitView[Symbol.dispose]()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  /**
+   * Add, remove or update views as children change
+   */
+  useIsomorphicLayoutEffect(() => {
+    if (dimensionsInitialized) {
+      const keys = childrenArray.map(child => child.key as string)
+      const panes = [...previousKeys.current]
+
+      const enter = keys.filter(key => !previousKeys.current.includes(key))
+      const update = keys.filter(key => previousKeys.current.includes(key))
+      const exit = previousKeys.current.map(key => !keys.includes(key))
+
+      for (let index = exit.length - 1; index >= 0; index--) {
+        if (exit[index]) {
+          splitViewRef.current?.removeView(index)
+          panes.splice(index, 1)
+          views.current.splice(index, 1)
+        }
+      }
+
+      for (const enterKey of enter) {
+        const props = splitViewPropsRef.current.get(enterKey)
+
+        const view = new PaneView(layoutService.current, {
+          element: document.createElement("div"),
+          minimumSize: props?.minSize ?? minSize,
+          maximumSize: props?.maxSize ?? maxSize,
+          priority: props?.priority ?? LayoutPriority.Normal,
+          ...(props?.preferredSize && {
+            preferredSize: props?.preferredSize,
+          }),
+          snap: props?.snap ?? snap,
+        })
+
+        splitViewRef.current?.addView(
+          splitViewViewRef.current.get(enterKey)!,
+          view,
+          Sizing.Distribute,
+          keys.findIndex(key => key === enterKey),
+        )
+
+        panes.splice(
+          keys.findIndex(key => key === enterKey),
+          0,
+          enterKey,
+        )
+
+        views.current.splice(
+          keys.findIndex(key => key === enterKey),
+          0,
+          view,
+        )
+      }
+
+      // Move panes if order has changed
+      while (!isEqual(keys, panes)) {
+        for (const [i, key] of keys.entries()) {
+          const index = panes.findIndex(pane => pane === key)
+
+          if (index !== i) {
+            splitViewRef.current?.moveView(
+              splitViewViewRef.current.get(key) as HTMLElement,
+              index,
+              i,
+            )
+
+            const tempKey = panes[index]
+            panes.splice(index, 1)
+            panes.splice(i, 0, tempKey)
+
+            break
+          }
+        }
+      }
+
+      for (const enterKey of enter) {
+        const index = keys.findIndex(key => key === enterKey)
+
+        const { preferredSize } = views.current[index]
+
+        if (preferredSize !== undefined) {
+          splitViewRef.current?.resizeView(index, preferredSize)
+        }
+      }
+
+      for (const updateKey of [...enter, ...update]) {
+        const props = splitViewPropsRef.current.get(updateKey)
+        const index = keys.findIndex(key => key === updateKey)
+
+        if (props && isPaneProps(props)) {
+          if (props.visible !== undefined) {
+            if (splitViewRef.current?.isViewVisible(index) !== props.visible) {
+              splitViewRef.current?.setViewVisible(index, props.visible)
+            }
+          }
+        }
+      }
+
+      for (const updateKey of update) {
+        const props = splitViewPropsRef.current.get(updateKey)
+        const index = keys.findIndex(key => key === updateKey)
+
+        if (props && isPaneProps(props)) {
+          if (
+            props.preferredSize !== undefined &&
+            views.current[index].preferredSize !== props.preferredSize
+          ) {
+            views.current[index].preferredSize = props.preferredSize
+          }
+
+          let sizeChanged = false
+
+          if (
+            props.minSize !== undefined &&
+            views.current[index].minimumSize !== props.minSize
+          ) {
+            views.current[index].minimumSize = props.minSize
+            sizeChanged = true
+          }
+
+          if (
+            props.maxSize !== undefined &&
+            views.current[index].maximumSize !== props.maxSize
+          ) {
+            views.current[index].maximumSize = props.maxSize
+            sizeChanged = true
+          }
+
+          if (sizeChanged) {
+            splitViewRef.current?.layout()
+          }
+        }
+      }
+
+      if (enter.length > 0 || exit.length > 0) {
+        previousKeys.current = keys
+      }
+    }
+  }, [childrenArray, dimensionsInitialized, maxSize, minSize, snap])
+
+  useEffect(() => {
+    if (splitViewRef.current) {
+      splitViewRef.current.onDidChange = onChange
+    }
+  }, [onChange])
+
+  useEffect(() => {
+    if (splitViewRef.current) {
+      splitViewRef.current.onDidDragStart = onDragStart
+    }
+  }, [onDragStart])
+
+  useEffect(() => {
+    if (splitViewRef.current) {
+      splitViewRef.current.onDidDragEnd = onDragEnd
+    }
+  }, [onDragEnd])
+
+  useResizeObserver({
+    node: containerRef.current,
+    onResize({ width, height }) {
+      if (width && height) {
+        splitViewRef.current?.layout(vertical ? height : width)
+        layoutService.current.size = vertical ? height : width
+        setDimensionsInitialized(true)
+      }
+    },
+  })
+
+  useIsomorphicLayoutEffect(() => {
+    if (!dimensionsInitialized) {
+      const { height, width } = containerRef.current.getBoundingClientRect()
+      splitViewRef.current?.layout(vertical ? height : width)
+      layoutService.current.size = vertical ? height : width
+      setDimensionsInitialized(true)
+    }
+  }, [dimensionsInitialized, vertical])
+
+  useEffect(() => {
+    if (isIOS) {
+      setSashSize(20)
+    }
+  }, [])
+
+  return (
+    <div
+      ref={containerRef}
+      className={cx(
+        css`
+          height: 100%;
+          overflow: hidden;
+          position: relative;
+          width: 100%;
+        `,
+        classNames.splitView,
+        vertical ? classNames.vertical : classNames.horizontal,
+        separator && classNames.separatorBorder,
+        className,
+      )}
+    >
+      <div className={classNames.splitViewContainer}>
+        {Children.toArray(children).map(child => {
+          if (!isValidElement(child)) {
+            return child
+          }
+
+          // toArray flattens and converts nulls to non-null keys
+          const key = child.key!
+
+          if (isPane(child)) {
+            splitViewPropsRef.current.set(key, child.props)
+
+            return cloneElement(child as React.ReactElement, {
+              key,
+              ref: (el: HTMLElement | null) => {
+                if (el) {
+                  splitViewViewRef.current.set(key, el)
+                } else {
+                  splitViewViewRef.current.delete(key)
+                }
+              },
+            })
+          } else {
+            return (
+              <Pane
+                key={key}
+                ref={(el: HTMLElement | null) => {
+                  if (el) {
+                    splitViewViewRef.current.set(key, el)
+                  } else {
+                    splitViewViewRef.current.delete(key)
+                  }
+                }}
+              >
+                {child}
+              </Pane>
+            )
+          }
+        })}
+      </div>
+    </div>
+  )
+})
+
+/**
+ * Set sash size. This is set in both css and js and this function keeps the two in sync.
+ *
+ * @param sashSize Sash size in pixels
+ */
+export function setSashSize(sashSize: number) {
+  const size = clamp(sashSize, 4, 20)
+  const hoverSize = clamp(sashSize, 1, 8)
+
+  document.documentElement.style.setProperty("--sash-size", size + "px")
+  document.documentElement.style.setProperty("--sash-hover-size", hoverSize + "px")
+
+  setGlobalSashSize(size)
+}
diff --git a/src/vendor/allotment/src/paneView.ts b/src/vendor/allotment/src/paneView.ts
new file mode 100644
index 0000000..bcad7c2
--- /dev/null
+++ b/src/vendor/allotment/src/paneView.ts
@@ -0,0 +1,97 @@
+import type { LayoutService } from "./index"
+import { LayoutPriority, type View } from "./splitView"
+
+const createProportionLayout = (proportion: number, layoutService: LayoutService) => () =>
+  proportion * layoutService.size
+
+const None = () => undefined
+
+interface PaneViewOptions {
+  element: HTMLElement
+  minimumSize?: number
+  maximumSize?: number
+  priority?: LayoutPriority
+  preferredSize?: number | string
+  snap?: boolean
+}
+
+export class PaneView implements View {
+  public minimumSize = 0
+  public maximumSize: number = Number.POSITIVE_INFINITY
+
+  readonly element: HTMLElement
+  readonly priority?: LayoutPriority | undefined
+  readonly snap: boolean
+
+  private getPreferredSize: () => number | undefined
+
+  get preferredSize(): number | undefined {
+    return this.getPreferredSize()
+  }
+
+  set preferredSize(preferredSize: number | string | undefined) {
+    if (typeof preferredSize === "number") {
+      this.getPreferredSize = () => preferredSize
+    } else if (typeof preferredSize === "string") {
+      const trimmedPreferredSize = preferredSize.trim()
+
+      if (trimmedPreferredSize.endsWith("%")) {
+        const proportion = Number(trimmedPreferredSize.slice(0, -1)) / 100
+
+        this.getPreferredSize = createProportionLayout(proportion, this.layoutService)
+      } else if (trimmedPreferredSize.endsWith("px")) {
+        const pixels = Number(trimmedPreferredSize.slice(0, -2)) / 100
+
+        this.getPreferredSize = () => pixels
+      } else if (typeof Number.parseFloat(trimmedPreferredSize) === "number") {
+        const number = Number.parseFloat(trimmedPreferredSize)
+
+        this.getPreferredSize = () => number
+      } else {
+        this.getPreferredSize = None
+      }
+    } else {
+      this.getPreferredSize = None
+    }
+  }
+
+  constructor(
+    private readonly layoutService: LayoutService,
+    options: PaneViewOptions,
+  ) {
+    this.element = options.element
+
+    this.minimumSize = options.minimumSize ?? 30
+    this.maximumSize = options.maximumSize ?? Number.POSITIVE_INFINITY
+
+    if (typeof options.preferredSize === "number") {
+      const { preferredSize } = options
+      this.getPreferredSize = () => preferredSize
+    } else if (typeof options.preferredSize === "string") {
+      const preferredSize = options.preferredSize.trim()
+
+      if (preferredSize.endsWith("%")) {
+        const proportion = Number(preferredSize.slice(0, -1)) / 100
+
+        this.getPreferredSize = createProportionLayout(proportion, layoutService)
+      } else if (preferredSize.endsWith("px")) {
+        const pixels = Number(preferredSize.slice(0, -2))
+
+        this.getPreferredSize = () => pixels
+      } else if (typeof Number.parseFloat(preferredSize) === "number") {
+        const number = Number.parseFloat(preferredSize)
+        this.getPreferredSize = () => number
+      } else {
+        this.getPreferredSize = None
+      }
+    } else {
+      this.getPreferredSize = None
+    }
+
+    this.priority = options.priority ?? LayoutPriority.Normal
+
+    this.snap = options.snap ?? false
+  }
+
+  layout(): void {}
+}
diff --git a/src/vendor/allotment/src/platform.ts b/src/vendor/allotment/src/platform.ts
new file mode 100644
index 0000000..e17521c
--- /dev/null
+++ b/src/vendor/allotment/src/platform.ts
@@ -0,0 +1,14 @@
+export let isIOS = false
+export let isMacintosh = false
+
+// Web environment
+if (typeof navigator === "object") {
+  const { userAgent } = navigator
+  isMacintosh = userAgent.includes("Macintosh")
+  isIOS =
+    (userAgent.includes("Macintosh") ||
+      userAgent.includes("iPad") ||
+      userAgent.includes("iPhone")) &&
+    !!navigator.maxTouchPoints &&
+    navigator.maxTouchPoints > 0
+}
diff --git a/src/vendor/allotment/src/resizeObserver.ts b/src/vendor/allotment/src/resizeObserver.ts
new file mode 100644
index 0000000..9e88d7d
--- /dev/null
+++ b/src/vendor/allotment/src/resizeObserver.ts
@@ -0,0 +1,88 @@
+// https://github.com/ZeeCoder/use-resize-observer
+import { useEffect, useRef } from "react"
+
+type SubscriberResponse = (() => void) | void
+
+function useElement<T extends Element>(
+  fn: (element: T) => SubscriberResponse,
+  element: T | null,
+) {
+  const lastReportRef = useRef<{
+    element: T | null
+    subscriber: typeof fn
+    cleanup?: SubscriberResponse
+  } | null>(null)
+
+  if (
+    lastReportRef.current?.element === element &&
+    lastReportRef.current.subscriber === fn
+  ) {
+    // noop
+  } else {
+    lastReportRef.current?.cleanup?.()
+    lastReportRef.current = {
+      element,
+      subscriber: fn,
+      cleanup: element ? fn(element) : undefined,
+    }
+  }
+
+  useEffect(
+    () => () => {
+      if (lastReportRef.current?.cleanup) {
+        lastReportRef.current.cleanup()
+        lastReportRef.current = null
+      }
+    },
+    [],
+  )
+}
+
+type ObservedSize = {
+  width: number | undefined
+  height: number | undefined
+}
+
+type ResizeHandler = (size: ObservedSize) => void
+
+const { round } = Math
+
+function useResizeObserver<T extends Element>(opts: {
+  node: T | null
+  onResize: ResizeHandler
+}) {
+  const { onResize } = opts
+
+  const onResizeRef = useRef<ResizeHandler | undefined>(undefined)
+  onResizeRef.current = onResize
+
+  // Using a ref to track the previous width / height to avoid unnecessary renders.
+  const previous = useRef<{ width?: number; height?: number }>({})
+
+  useElement<T>(element => {
+    const obs = new ResizeObserver(entries => {
+      const [entry] = entries
+
+      const reportedWidth = entry.contentBoxSize[0].inlineSize
+      const reportedHeight = entry.contentBoxSize[0].blockSize
+
+      const newWidth = reportedWidth ? round(reportedWidth) : undefined
+      const newHeight = reportedHeight ? round(reportedHeight) : undefined
+
+      if (previous.current.width !== newWidth || previous.current.height !== newHeight) {
+        const newSize = { width: newWidth, height: newHeight }
+        previous.current.width = newWidth
+        previous.current.height = newHeight
+        onResizeRef.current?.(newSize)
+      }
+    })
+
+    obs.observe(element, { box: undefined })
+
+    return () => {
+      obs.unobserve(element)
+    }
+  }, opts.node)
+}
+
+export default useResizeObserver
diff --git a/src/vendor/allotment/src/sash.ts b/src/vendor/allotment/src/sash.ts
new file mode 100644
index 0000000..a33505f
--- /dev/null
+++ b/src/vendor/allotment/src/sash.ts
@@ -0,0 +1,321 @@
+import { debounce } from "lodash"
+import { EventEmitter } from "./emitter"
+import { isIOS, isMacintosh } from "./platform"
+import {
+  active,
+  disabled,
+  horizontal,
+  hover,
+  mac,
+  maximum,
+  minimum,
+  sash,
+  vertical,
+} from "./index.module.scss"
+
+export interface SashOptions {
+  /** Whether a sash is horizontal or vertical. */
+  readonly orientation: Orientation
+
+  /** The width or height of a vertical or horizontal sash, respectively. */
+  readonly size?: number
+}
+
+export interface SashEvent {
+  startX: number
+  currentX: number
+  startY: number
+  currentY: number
+}
+
+export const enum Orientation {
+  Vertical,
+  Horizontal,
+}
+
+export const enum SashState {
+  /** Disable any UI interaction. */
+  Disabled,
+
+  /**
+   * Allow dragging down or to the right, depending on the sash orientation.
+   *
+   * Some OSs allow customizing the mouse cursor differently whenever
+   * some resizable component can't be any smaller, but can be larger.
+   */
+  Minimum,
+
+  /**
+   * Allow dragging up or to the left, depending on the sash orientation.
+   *
+   * Some OSs allow customizing the mouse cursor differently whenever
+   * some resizable component can't be any larger, but can be smaller.
+   */
+  Maximum,
+
+  /** Enable dragging. */
+  Enabled,
+}
+
+let globalSize = isIOS ? 20 : 8
+
+const onDidChangeGlobalSize = new EventEmitter<{ change: [size: number] }>()
+
+export function setGlobalSashSize(size: number): void {
+  globalSize = size
+  onDidChangeGlobalSize.emit("change", size)
+}
+
+type SashLayoutProvider = unknown
+
+/** A vertical sash layout provider provides position and height for a sash. */
+export interface VerticalSashLayoutProvider {
+  getVerticalSashLeft(sash: Sash): number
+  getVerticalSashTop?(sash: Sash): number
+  getVerticalSashHeight?(sash: Sash): number
+}
+
+/** A horizontal sash layout provider provides position and width for a sash. */
+export interface HorizontalSashLayoutProvider {
+  getHorizontalSashTop(sash: Sash): number
+  getHorizontalSashLeft?(sash: Sash): number
+  getHorizontalSashWidth?(sash: Sash): number
+}
+
+/**
+ * The {@link Sash} is the UI component which allows the user to resize other
+ * components. It's usually an invisible horizontal or vertical line which, when
+ * hovered, becomes highlighted and can be dragged along the perpendicular dimension
+ * to its direction.
+ */
+export class Sash
+  extends EventEmitter<{
+    enablementChange: [state: SashState]
+    start: [startEvent: SashEvent]
+    change: [changeEvent: SashEvent]
+    end: []
+    reset: []
+  }>
+  implements Disposable
+{
+  private el: HTMLElement
+  private layoutProvider: SashLayoutProvider
+  private orientation!: Orientation
+  private size: number
+  private hoverDelay = 300
+  private hoverDelayer = debounce(el => el.classList.add(hover), this.hoverDelay)
+  private stack = new DisposableStack()
+
+  private _state: SashState = SashState.Enabled
+
+  get state(): SashState {
+    return this._state
+  }
+
+  /**
+   * The state of a sash defines whether it can be interacted with by the user
+   * as well as what mouse cursor to use, when hovered.
+   */
+  set state(state: SashState) {
+    if (this._state === state) {
+      return
+    }
+
+    this.el.classList.toggle(disabled, state === SashState.Disabled)
+    this.el.classList.toggle(minimum, state === SashState.Minimum)
+    this.el.classList.toggle(maximum, state === SashState.Maximum)
+
+    this._state = state
+
+    this.emit("enablementChange", state)
+  }
+
+  /**
+   * Create a new vertical sash.
+   *
+   * @param container A DOM node to append the sash to.
+   * @param verticalLayoutProvider A vertical layout provider.
+   * @param options The options.
+   */
+  constructor(
+    container: HTMLElement,
+    layoutProvider: VerticalSashLayoutProvider,
+    options: SashOptions,
+  )
+
+  /**
+   * Create a new horizontal sash.
+   *
+   * @param container A DOM node to append the sash to.
+   * @param horizontalLayoutProvider A horizontal layout provider.
+   * @param options The options.
+   */
+  constructor(
+    container: HTMLElement,
+    layoutProvider: HorizontalSashLayoutProvider,
+    options: SashOptions,
+  )
+
+  constructor(
+    container: HTMLElement,
+    layoutProvider: SashLayoutProvider,
+    options: SashOptions,
+  ) {
+    super()
+    this.el = document.createElement("div")
+    this.el.classList.add(sash)
+    this.el.dataset.testid = "sash"
+    container.append(this.el)
+
+    if (isMacintosh) {
+      this.el.classList.add(mac)
+    }
+
+    this.el.addEventListener("pointerdown", this.#onPointerStart)
+    this.el.addEventListener("dblclick", this.#onPointerDoublePress)
+    this.el.addEventListener("mouseenter", this.#onMouseEnter)
+    this.el.addEventListener("mouseleave", this.onMouseLeave)
+
+    if (typeof options.size === "number") {
+      this.size = options.size
+
+      if (options.orientation === Orientation.Vertical) {
+        this.el.style.width = `${this.size}px`
+      } else {
+        this.el.style.height = `${this.size}px`
+      }
+    } else {
+      this.size = globalSize
+
+      this.stack.use(
+        onDidChangeGlobalSize.on("change", size => {
+          this.size = size
+          this.layout()
+        }),
+      )
+    }
+
+    this.layoutProvider = layoutProvider
+
+    this.orientation = options.orientation ?? Orientation.Vertical
+
+    if (this.orientation === Orientation.Horizontal) {
+      this.el.classList.add(horizontal)
+      this.el.classList.remove(vertical)
+    } else {
+      this.el.classList.remove(horizontal)
+      this.el.classList.add(vertical)
+    }
+
+    this.layout()
+  }
+
+  #onPointerStart = (event: PointerEvent) => {
+    const startX = event.pageX
+    const startY = event.pageY
+
+    const startEvent: SashEvent = {
+      startX,
+      currentX: startX,
+      startY,
+      currentY: startY,
+    }
+
+    this.el.classList.add(active)
+
+    this.emit("start", startEvent)
+
+    this.el.setPointerCapture(event.pointerId)
+
+    const onPointerMove = (event: PointerEvent) => {
+      event.preventDefault()
+
+      const moveEvent: SashEvent = {
+        startX,
+        currentX: event.pageX,
+        startY,
+        currentY: event.pageY,
+      }
+
+      this.emit("change", moveEvent)
+    }
+
+    const onPointerUp = (event: PointerEvent): void => {
+      event.preventDefault()
+
+      this.el.classList.remove(active)
+      this.hoverDelayer.cancel()
+      this.emit("end")
+
+      this.el.releasePointerCapture(event.pointerId)
+
+      window.removeEventListener("pointermove", onPointerMove)
+      window.removeEventListener("pointerup", onPointerUp)
+    }
+
+    window.addEventListener("pointermove", onPointerMove)
+    window.addEventListener("pointerup", onPointerUp)
+  }
+
+  #onPointerDoublePress = (): void => {
+    this.emit("reset")
+  }
+
+  #onMouseEnter = (): void => {
+    if (this.el.classList.contains(active)) {
+      this.hoverDelayer.cancel()
+      this.el.classList.add(hover)
+    } else {
+      this.hoverDelayer(this.el)
+    }
+  }
+
+  private onMouseLeave = (): void => {
+    this.hoverDelayer.cancel()
+    this.el.classList.remove(hover)
+  }
+
+  /**
+   * Layout the sash. The sash will size and position itself
+   * based on its provided {@link SashLayoutProvider layout provider}.
+   */
+  public layout(): void {
+    if (this.orientation === Orientation.Vertical) {
+      const verticalProvider = this.layoutProvider as VerticalSashLayoutProvider
+
+      this.el.style.left =
+        verticalProvider.getVerticalSashLeft(this) - this.size / 2 + "px"
+
+      if (verticalProvider.getVerticalSashTop) {
+        this.el.style.top = verticalProvider.getVerticalSashTop(this) + "px"
+      }
+
+      if (verticalProvider.getVerticalSashHeight) {
+        this.el.style.height = verticalProvider.getVerticalSashHeight(this) + "px"
+      }
+    } else {
+      const horizontalProvider = this.layoutProvider as HorizontalSashLayoutProvider
+
+      this.el.style.top =
+        horizontalProvider.getHorizontalSashTop(this) - this.size / 2 + "px"
+
+      if (horizontalProvider.getHorizontalSashLeft) {
+        this.el.style.left = horizontalProvider.getHorizontalSashLeft(this) + "px"
+      }
+
+      if (horizontalProvider.getHorizontalSashWidth) {
+        this.el.style.width = horizontalProvider.getHorizontalSashWidth(this) + "px"
+      }
+    }
+  }
+
+  [Symbol.dispose](): void {
+    this.el.removeEventListener("pointerdown", this.#onPointerStart)
+    this.el.removeEventListener("dblclick", this.#onPointerDoublePress)
+    this.el.removeEventListener("mouseenter", this.#onMouseEnter)
+    this.el.removeEventListener("mouseleave", () => this.onMouseLeave)
+
+    this.el.remove()
+    this.stack.dispose()
+  }
+}
diff --git a/src/vendor/allotment/src/splitView.ts b/src/vendor/allotment/src/splitView.ts
new file mode 100644
index 0000000..a921e41
--- /dev/null
+++ b/src/vendor/allotment/src/splitView.ts
@@ -0,0 +1,1222 @@
+import { clamp } from "lodash"
+import { EventEmitter } from "./emitter"
+import { sashContainer, splitViewView } from "./index.module.scss"
+import { type SashEvent as BaseSashEvent, Orientation, Sash, SashState } from "./sash"
+
+interface SashEvent {
+  readonly sash: Sash
+  readonly start: number
+  readonly current: number
+}
+
+/**
+ * When adding or removing views, distribute the delta space among
+ * all other views.
+ */
+type DistributeSizing = { type: "distribute" }
+
+/**
+ * When adding or removing views, split the delta space with another
+ * specific view, indexed by the provided `index`.
+ */
+type SplitSizing = { type: "split"; index: number }
+
+/**
+ * When adding or removing views, assume the view is invisible.
+ */
+type InvisibleSizing = { type: "invisible"; cachedVisibleSize: number }
+
+/**
+ * When adding or removing views, the sizing provides fine grained
+ * control over how other views get resized.
+ */
+export type Sizing = DistributeSizing | SplitSizing | InvisibleSizing
+
+export const Sizing = {
+  /**
+   * When adding or removing views, distribute the delta space among
+   * all other views.
+   */
+  Distribute: { type: "distribute" } as DistributeSizing,
+
+  /**
+   * When adding or removing views, split the delta space with another
+   * specific view, indexed by the provided `index`.
+   */
+  Split(index: number): SplitSizing {
+    return { type: "split", index }
+  },
+
+  /**
+   * When adding or removing views, assume the view is invisible.
+   */
+  Invisible(cachedVisibleSize: number): InvisibleSizing {
+    return { type: "invisible", cachedVisibleSize }
+  },
+}
+
+/** A descriptor for a {@link SplitView} instance. */
+export interface SplitViewDescriptor {
+  /** The layout size of the {@link SplitView}. */
+  size: number
+
+  /**
+   * Descriptors for each {@link View view}.
+   */
+  views: {
+    /** Whether the {@link View view} is visible. */
+    visible?: boolean
+
+    /** The size of the {@link View view}. */
+    size: number
+
+    container: HTMLElement
+    view: View
+  }[]
+}
+
+export interface SplitViewOptions {
+  /** Which axis the views align on. */
+  readonly orientation?: Orientation
+
+  /** Resize each view proportionally when resizing the SplitView. */
+  readonly proportionalLayout?: boolean
+
+  /**
+   * An initial description of this {@link SplitView} instance, allowing
+   * to initialize all views within the ctor.
+   */
+  readonly descriptor?: SplitViewDescriptor
+
+  /** Override the orthogonal size of sashes. */
+  readonly getSashOrthogonalSize?: () => number
+}
+
+export enum LayoutPriority {
+  Normal = "NORMAL",
+  Low = "LOW",
+  High = "HIGH",
+}
+
+/**
+ * The interface to implement for views within a {@link SplitView}.
+ */
+export interface View {
+  /** The DOM element for this view. */
+  readonly element: HTMLElement
+
+  /**
+   * A minimum size for this view.
+   *
+   * @remarks If none, set it to `0`.
+   */
+  readonly minimumSize: number
+
+  /**
+   * A minimum size for this view.
+   *
+   * @remarks If none, set it to `Number.POSITIVE_INFINITY`.
+   */
+  readonly maximumSize: number
+
+  /**
+   * The priority of the view when the {@link SplitView.resize layout} algorithm
+   * runs. Views with higher priority will be resized first.
+   *
+   * @remarks Only used when `proportionalLayout` is false.
+   */
+  readonly priority?: LayoutPriority
+
+  /**
+   * Whether the view will snap whenever the user reaches its minimum size or
+   * attempts to grow it beyond the minimum size.
+   */
+  readonly snap?: boolean
+
+  /**
+   * This will be called by the {@link SplitView} during layout. A view meant to
+   * pass along the layout information down to its descendants.
+   *
+   * @param size The size of this view, in pixels.
+   * @param offset The offset of this view, relative to the start of the {@link SplitView}.
+   */
+  layout(size: number, offset: number): void
+
+  /**
+   * This will be called by the {@link SplitView} whenever this view is made
+   * visible or hidden.
+   *
+   * @param visible Whether the view becomes visible.
+   */
+  setVisible?(visible: boolean): void
+}
+
+type ViewItemSize = number | { cachedVisibleSize: number }
+
+abstract class ViewItem {
+  size: number
+
+  constructor(
+    readonly container: HTMLElement,
+    readonly view: View,
+    size: ViewItemSize,
+  ) {
+    container.classList.add(splitViewView)
+    container.dataset.testid = "split-view-view"
+
+    if (typeof size === "number") {
+      this.size = size
+      this._cachedVisibleSize = undefined
+      container.classList.add("split-view-view-visible")
+    } else {
+      this.size = 0
+      this._cachedVisibleSize = size.cachedVisibleSize
+    }
+  }
+
+  get priority(): LayoutPriority | undefined {
+    return this.view.priority
+  }
+
+  get snap(): boolean {
+    return !!this.view.snap
+  }
+
+  private _cachedVisibleSize: number | undefined = undefined
+  get cachedVisibleSize(): number | undefined {
+    return this._cachedVisibleSize
+  }
+
+  get visible(): boolean {
+    return typeof this._cachedVisibleSize === "undefined"
+  }
+
+  public setVisible(visible: boolean, size?: number): void {
+    if (visible === this.visible) {
+      return
+    }
+
+    if (visible) {
+      this.size = clamp(
+        this._cachedVisibleSize!,
+        this.viewMinimumSize,
+        this.viewMaximumSize,
+      )
+      this._cachedVisibleSize = undefined
+    } else {
+      this._cachedVisibleSize = typeof size === "number" ? size : this.size
+      this.size = 0
+    }
+
+    this.container.classList.toggle("split-view-view-visible", visible)
+
+    if (this.view.setVisible) {
+      this.view.setVisible(visible)
+    }
+  }
+
+  get minimumSize(): number {
+    return this.visible ? this.view.minimumSize : 0
+  }
+  get viewMinimumSize(): number {
+    return this.view.minimumSize
+  }
+
+  get maximumSize(): number {
+    return this.visible ? this.view.maximumSize : 0
+  }
+  get viewMaximumSize(): number {
+    return this.view.maximumSize
+  }
+
+  set enabled(enabled: boolean) {
+    this.container.style.pointerEvents = enabled ? "" : "none"
+  }
+
+  layout(offset: number): void {
+    this.layoutContainer(offset)
+    this.view.layout(this.size, offset)
+  }
+
+  abstract layoutContainer(offset: number): void
+}
+
+class HorizontalViewItem extends ViewItem {
+  layoutContainer(offset: number): void {
+    this.container.style.left = `${offset}px`
+    this.container.style.width = `${this.size}px`
+  }
+}
+
+class VerticalViewItem extends ViewItem {
+  layoutContainer(offset: number): void {
+    this.container.style.top = `${offset}px`
+    this.container.style.height = `${this.size}px`
+  }
+}
+
+interface SashItem {
+  sash: Sash
+}
+
+interface SashDragSnapState {
+  readonly index: number
+  readonly limitDelta: number
+  readonly size: number
+}
+
+interface SashDragState {
+  index: number
+  start: number
+  current: number
+  sizes: number[]
+  minDelta: number
+  maxDelta: number
+  snapBefore: SashDragSnapState | undefined
+  snapAfter: SashDragSnapState | undefined
+}
+
+/**
+ * The {@link SplitView} is the UI component which implements a one dimensional
+ * flex-like layout algorithm for a collection of {@link View} instances, which
+ * are essentially HTMLElement instances with the following size constraints:
+ *
+ * - {@link View.minimumSize}
+ * - {@link View.maximumSize}
+ * - {@link View.snap}
+ *
+ * In case the SplitView doesn't have enough size to fit all views, it will overflow
+ * its content with a scrollbar.
+ *
+ * In between each pair of views there will be a {@link Sash} allowing the user
+ * to resize the views, making sure the constraints are respected.
+ */
+export class SplitView
+  extends EventEmitter<{
+    sashDragStart: []
+    sashDragEnd: []
+    sashReset: [number]
+    sashChange: [number]
+  }>
+  implements Disposable
+{
+  public onDidChange: ((sizes: number[]) => void) | undefined
+  public onDidDragStart: ((sizes: number[]) => void) | undefined
+  public onDidDragEnd: ((sizes: number[]) => void) | undefined
+
+  /** This {@link SplitView}'s orientation. */
+  readonly orientation: Orientation
+
+  #sashContainer: HTMLElement
+  #size = 0
+  #contentSize = 0
+  #proportions: undefined | number[] = undefined
+  #viewItems: ViewItem[] = []
+  #sashItems: SashItem[] = []
+  #sashDragState: SashDragState | undefined
+  #proportionalLayout: boolean
+  readonly #getSashOrthogonalSize: { (): number } | undefined
+
+  #startSnappingEnabled = true
+  get startSnappingEnabled(): boolean {
+    return this.#startSnappingEnabled
+  }
+
+  /**
+   * Enable/disable snapping at the beginning of this {@link SplitView}.
+   */
+  set startSnappingEnabled(startSnappingEnabled: boolean) {
+    if (this.#startSnappingEnabled === startSnappingEnabled) {
+      return
+    }
+
+    this.#startSnappingEnabled = startSnappingEnabled
+    this.updateSashEnablement()
+  }
+
+  #endSnappingEnabled = true
+  get endSnappingEnabled(): boolean {
+    return this.#endSnappingEnabled
+  }
+
+  /**
+   * Enable/disable snapping at the end of this {@link SplitView}.
+   */
+  set endSnappingEnabled(endSnappingEnabled: boolean) {
+    if (this.#endSnappingEnabled === endSnappingEnabled) {
+      return
+    }
+
+    this.#endSnappingEnabled = endSnappingEnabled
+    this.updateSashEnablement()
+  }
+
+  /** Create a new {@link SplitView} instance. */
+  constructor(
+    container: HTMLElement,
+    options: SplitViewOptions = {},
+    onDidChange?: (sizes: number[]) => void,
+    onDidDragStart?: (sizes: number[]) => void,
+    onDidDragEnd?: (sizes: number[]) => void,
+  ) {
+    super()
+
+    this.orientation = options.orientation ?? Orientation.Vertical
+    this.#proportionalLayout = options.proportionalLayout ?? true
+    this.#getSashOrthogonalSize = options.getSashOrthogonalSize
+
+    if (onDidChange) {
+      this.onDidChange = onDidChange
+    }
+
+    if (onDidDragStart) {
+      this.onDidDragStart = onDidDragStart
+    }
+
+    if (onDidDragEnd) {
+      this.onDidDragEnd = onDidDragEnd
+    }
+
+    this.#sashContainer = document.createElement("div")
+
+    this.#sashContainer.classList.add(sashContainer)
+    container.prepend(this.#sashContainer) // Should always be first child
+
+    // We have an existing set of view, add them now
+    if (options.descriptor) {
+      this.#size = options.descriptor.size
+
+      for (const [index, viewDescriptor] of options.descriptor.views.entries()) {
+        const { size } = viewDescriptor
+
+        const { container } = viewDescriptor
+        const { view } = viewDescriptor
+
+        this.addView(container, view, size, index, true)
+      }
+
+      // Initialize content size and proportions for first layout
+      this.#contentSize = this.#viewItems.reduce((r, i) => r + i.size, 0)
+      this.saveProportions()
+    }
+  }
+
+  /**
+   * Add a {@link View view} to this {@link SplitView}.
+   *
+   * @param container The container element.
+   * @param view The view to add.
+   * @param size Either a fixed size, or a dynamic {@link Sizing} strategy.
+   * @param index The index to insert the view on.
+   * @param skipLayout Whether layout should be skipped.
+   */
+  public addView(
+    container: HTMLElement,
+    view: View,
+    size: number | Sizing,
+    index = this.#viewItems.length,
+    skipLayout?: boolean,
+  ) {
+    let viewSize: ViewItemSize
+
+    if (typeof size === "number") {
+      viewSize = size
+    } else if (size.type === "split") {
+      viewSize = this.getViewSize(size.index) / 2
+    } else if (size.type === "invisible") {
+      viewSize = { cachedVisibleSize: size.cachedVisibleSize }
+    } else {
+      viewSize = view.minimumSize
+    }
+
+    const item =
+      this.orientation === Orientation.Vertical
+        ? new VerticalViewItem(container, view, viewSize)
+        : new HorizontalViewItem(container, view, viewSize)
+
+    this.#viewItems.splice(index, 0, item)
+
+    if (this.#viewItems.length > 1) {
+      const sash =
+        this.orientation === Orientation.Vertical
+          ? new Sash(
+              this.#sashContainer,
+              {
+                getHorizontalSashTop: s => this.#getSashPosition(s),
+                getHorizontalSashWidth: this.#getSashOrthogonalSize,
+              },
+              { orientation: Orientation.Horizontal },
+            )
+          : new Sash(
+              this.#sashContainer,
+              {
+                getVerticalSashLeft: s => this.#getSashPosition(s),
+                getVerticalSashHeight: this.#getSashOrthogonalSize,
+              },
+              { orientation: Orientation.Vertical },
+            )
+
+      const sashEventMapper =
+        this.orientation === Orientation.Vertical
+          ? (e: BaseSashEvent) => ({
+              sash,
+              start: e.startY,
+              current: e.currentY,
+            })
+          : (e: BaseSashEvent) => ({
+              sash,
+              start: e.startX,
+              current: e.currentX,
+            })
+
+      sash.on("start", (event: BaseSashEvent) => {
+        this.emit("sashDragStart")
+        this.#onSashStart(sashEventMapper(event))
+        const sizes = this.#viewItems.map(i => i.size)
+        this.onDidDragStart?.(sizes)
+      })
+
+      sash.on("change", (event: BaseSashEvent) =>
+        this.#onSashChange(sashEventMapper(event)),
+      )
+
+      sash.on("end", () => {
+        this.emit("sashDragEnd")
+        this.#onSashEnd(this.#sashItems.findIndex(item => item.sash === sash))
+        const sizes = this.#viewItems.map(i => i.size)
+        this.onDidDragEnd?.(sizes)
+      })
+
+      sash.on("reset", () => {
+        const index = this.#sashItems.findIndex(item => item.sash === sash)
+        const upIndexes = range(index, -1, -1)
+        const downIndexes = range(index + 1, this.#viewItems.length)
+        const snapBeforeIndex = this.#findFirstSnapIndex(upIndexes)
+        const snapAfterIndex = this.#findFirstSnapIndex(downIndexes)
+
+        if (
+          typeof snapBeforeIndex === "number" &&
+          !this.#viewItems[snapBeforeIndex].visible
+        ) {
+          return
+        }
+
+        if (
+          typeof snapAfterIndex === "number" &&
+          !this.#viewItems[snapAfterIndex].visible
+        ) {
+          return
+        }
+
+        this.emit("sashReset", index)
+      })
+
+      const sashItem: SashItem = { sash }
+
+      this.#sashItems.splice(index - 1, 0, sashItem)
+    }
+
+    if (!skipLayout) {
+      this.#relayout()
+    }
+
+    if (!skipLayout && typeof size !== "number" && size.type === "distribute") {
+      this.distributeViewSizes()
+    }
+  }
+
+  /**
+   * Remove a {@link View view} from this {@link SplitView}.
+   *
+   * @param index The index where the {@link View view} is located.
+   * @param sizing Whether to distribute other {@link View view}'s sizes.
+   */
+  public removeView(index: number, sizing?: Sizing): View {
+    if (index < 0 || index >= this.#viewItems.length) {
+      throw new Error("Index out of bounds")
+    }
+
+    // Remove view
+    const [viewItem] = this.#viewItems.splice(index, 1)
+    const { view } = viewItem
+
+    // Remove sash
+    if (this.#viewItems.length >= 1) {
+      const sashIndex = Math.max(index - 1, 0)
+      const [sashItem] = this.#sashItems.splice(sashIndex, 1)
+      sashItem.sash[Symbol.dispose]()
+    }
+
+    this.#relayout()
+
+    if (sizing && sizing.type === "distribute") {
+      this.distributeViewSizes()
+    }
+
+    return view
+  }
+
+  /**
+   * Move a {@link View view} to a different index.
+   *
+   * @param from The source index.
+   * @param to The target index.
+   */
+  public moveView(container: HTMLElement, from: number, to: number): void {
+    const cachedVisibleSize = this.#getViewCachedVisibleSize(from)
+
+    const sizing =
+      typeof cachedVisibleSize === "undefined"
+        ? this.getViewSize(from)
+        : Sizing.Invisible(cachedVisibleSize)
+
+    const view = this.removeView(from)
+    this.addView(container, view, sizing, to)
+  }
+
+  /**
+   * Returns the {@link View view}'s size previously to being hidden.
+   *
+   * @param index The {@link View view} index.
+   */
+  #getViewCachedVisibleSize(index: number): number | undefined {
+    if (index < 0 || index >= this.#viewItems.length) {
+      throw new Error("Index out of bounds")
+    }
+
+    const viewItem = this.#viewItems[index]
+    return viewItem.cachedVisibleSize
+  }
+
+  /**
+   * Layout the {@link SplitView}.
+   *
+   * @param size The entire size of the {@link SplitView}.
+   */
+  public layout(size: number = this.#size): void {
+    const previousSize = Math.max(this.#size, this.#contentSize)
+    this.#size = size
+
+    if (!this.#proportions) {
+      const indexes = range(0, this.#viewItems.length)
+
+      const lowPriorityIndexes = indexes.filter(
+        i => this.#viewItems[i].priority === LayoutPriority.Low,
+      )
+
+      const highPriorityIndexes = indexes.filter(
+        i => this.#viewItems[i].priority === LayoutPriority.High,
+      )
+
+      this.#resize(
+        this.#viewItems.length - 1,
+        size - previousSize,
+        undefined,
+        lowPriorityIndexes,
+        highPriorityIndexes,
+      )
+    } else {
+      for (let i = 0; i < this.#viewItems.length; i++) {
+        const item = this.#viewItems[i]
+
+        item.size = clamp(
+          Math.round(this.#proportions[i] * size),
+          item.minimumSize,
+          item.maximumSize,
+        )
+      }
+    }
+
+    this.distributeEmptySpace()
+    this.#layoutViews()
+  }
+
+  /**
+   * Resize a {@link View view} within the {@link SplitView}.
+   *
+   * @param index The {@link View view} index.
+   * @param size The {@link View view} size.
+   */
+  public resizeView(index: number, size: number): void {
+    if (index < 0 || index >= this.#viewItems.length) {
+      return
+    }
+
+    const indexes = range(0, this.#viewItems.length).filter(i => i !== index)
+
+    const lowPriorityIndexes = [
+      ...indexes.filter(i => this.#viewItems[i].priority === LayoutPriority.Low),
+      index,
+    ]
+
+    const highPriorityIndexes = indexes.filter(
+      i => this.#viewItems[i].priority === LayoutPriority.High,
+    )
+
+    const item = this.#viewItems[index]
+    size = Math.round(size)
+    size = clamp(size, item.minimumSize, Math.min(item.maximumSize, this.#size))
+
+    item.size = size
+    this.#relayout(lowPriorityIndexes, highPriorityIndexes)
+  }
+
+  public resizeViews(sizes: number[]): void {
+    for (let index = 0; index < sizes.length; index++) {
+      const item = this.#viewItems[index]
+      let size = sizes[index]
+
+      size = Math.round(size)
+
+      size = clamp(size, item.minimumSize, Math.min(item.maximumSize, this.#size))
+
+      item.size = size
+    }
+
+    this.#contentSize = this.#viewItems.reduce((r, i) => r + i.size, 0)
+    this.saveProportions()
+    this.layout(this.#size)
+  }
+
+  /**
+   * Returns the size of a {@link View view}.
+   */
+  public getViewSize(index: number): number {
+    if (index < 0 || index >= this.#viewItems.length) {
+      return -1
+    }
+
+    return this.#viewItems[index].size
+  }
+
+  /**
+   * Returns whether the {@link View view} is visible.
+   *
+   * @param index The {@link View view} index.
+   */
+  isViewVisible(index: number): boolean {
+    if (index < 0 || index >= this.#viewItems.length) {
+      throw new Error("Index out of bounds")
+    }
+
+    const viewItem = this.#viewItems[index]
+    return viewItem.visible
+  }
+
+  /**
+   * Set a {@link View view}'s visibility.
+   *
+   * @param index The {@link View view} index.
+   * @param visible Whether the {@link View view} should be visible.
+   */
+  setViewVisible(index: number, visible: boolean): void {
+    if (index < 0 || index >= this.#viewItems.length) {
+      throw new Error("Index out of bounds")
+    }
+
+    const viewItem = this.#viewItems[index]
+    viewItem.setVisible(visible)
+
+    this.distributeEmptySpace(index)
+    this.#layoutViews()
+    this.saveProportions()
+  }
+
+  /**
+   * Distribute the entire {@link SplitView} size among all {@link View views}.
+   */
+  public distributeViewSizes(): void {
+    const flexibleViewItems: ViewItem[] = []
+    let flexibleSize = 0
+
+    for (const item of this.#viewItems) {
+      if (item.maximumSize - item.minimumSize > 0) {
+        flexibleViewItems.push(item)
+        flexibleSize += item.size
+      }
+    }
+
+    const size = Math.floor(flexibleSize / flexibleViewItems.length)
+
+    for (const item of flexibleViewItems) {
+      item.size = clamp(size, item.minimumSize, item.maximumSize)
+    }
+
+    const indexes = range(0, this.#viewItems.length)
+
+    const lowPriorityIndexes = indexes.filter(
+      i => this.#viewItems[i].priority === LayoutPriority.Low,
+    )
+
+    const highPriorityIndexes = indexes.filter(
+      i => this.#viewItems[i].priority === LayoutPriority.High,
+    )
+
+    this.#relayout(lowPriorityIndexes, highPriorityIndexes)
+  }
+
+  public [Symbol.dispose](): void {
+    this.#sashItems.forEach(sashItem => sashItem.sash[Symbol.dispose]())
+    this.#sashItems = []
+
+    this.#sashContainer.remove()
+  }
+
+  #relayout(lowPriorityIndexes?: number[], highPriorityIndexes?: number[]): void {
+    const contentSize = this.#viewItems.reduce((r, i) => r + i.size, 0)
+
+    this.#resize(
+      this.#viewItems.length - 1,
+      this.#size - contentSize,
+      undefined,
+      lowPriorityIndexes,
+      highPriorityIndexes,
+    )
+
+    this.distributeEmptySpace()
+    this.#layoutViews()
+    this.saveProportions()
+  }
+
+  #onSashStart({ sash, start }: SashEvent): void {
+    const index = this.#sashItems.findIndex(item => item.sash === sash)
+
+    const resetSashDragState = (start: number) => {
+      const sizes = this.#viewItems.map(i => i.size)
+
+      let minDelta = Number.NEGATIVE_INFINITY
+      let maxDelta = Number.POSITIVE_INFINITY
+
+      let snapBefore: SashDragSnapState | undefined
+      let snapAfter: SashDragSnapState | undefined
+
+      const upIndexes = range(index, -1, -1)
+      const downIndexes = range(index + 1, this.#viewItems.length)
+
+      const minDeltaUp = upIndexes.reduce(
+        (r, i) => r + (this.#viewItems[i].minimumSize - sizes[i]),
+        0,
+      )
+
+      const maxDeltaUp = upIndexes.reduce(
+        (r, i) => r + (this.#viewItems[i].viewMaximumSize - sizes[i]),
+        0,
+      )
+
+      const maxDeltaDown =
+        downIndexes.length === 0
+          ? Number.POSITIVE_INFINITY
+          : downIndexes.reduce(
+              (r, i) => r + (sizes[i] - this.#viewItems[i].minimumSize),
+              0,
+            )
+
+      const minDeltaDown =
+        downIndexes.length === 0
+          ? Number.NEGATIVE_INFINITY
+          : downIndexes.reduce(
+              (r, i) => r + (sizes[i] - this.#viewItems[i].viewMaximumSize),
+              0,
+            )
+
+      minDelta = Math.max(minDeltaUp, minDeltaDown)
+      maxDelta = Math.min(maxDeltaDown, maxDeltaUp)
+
+      const snapBeforeIndex = this.#findFirstSnapIndex(upIndexes)
+      const snapAfterIndex = this.#findFirstSnapIndex(downIndexes)
+
+      if (typeof snapBeforeIndex === "number") {
+        const viewItem = this.#viewItems[snapBeforeIndex]
+        const halfSize = Math.floor(viewItem.viewMinimumSize / 2)
+
+        snapBefore = {
+          index: snapBeforeIndex,
+          limitDelta: viewItem.visible ? minDelta - halfSize : minDelta + halfSize,
+          size: viewItem.size,
+        }
+      }
+
+      if (typeof snapAfterIndex === "number") {
+        const viewItem = this.#viewItems[snapAfterIndex]
+        const halfSize = Math.floor(viewItem.viewMinimumSize / 2)
+
+        snapAfter = {
+          index: snapAfterIndex,
+          limitDelta: viewItem.visible ? maxDelta + halfSize : maxDelta - halfSize,
+          size: viewItem.size,
+        }
+      }
+
+      this.#sashDragState = {
+        start,
+        current: start,
+        index,
+        sizes,
+        minDelta,
+        maxDelta,
+        snapBefore,
+        snapAfter,
+      }
+    }
+
+    resetSashDragState(start)
+  }
+
+  #onSashChange({ current }: SashEvent): void {
+    const { index, start, sizes, minDelta, maxDelta, snapBefore, snapAfter } =
+      this.#sashDragState!
+
+    this.#sashDragState!.current = current
+
+    const delta = current - start
+
+    // TODO: Should this be conditional on alt?
+    this.#resize(
+      index,
+      delta,
+      sizes,
+      undefined,
+      undefined,
+      minDelta,
+      maxDelta,
+      snapBefore,
+      snapAfter,
+    )
+
+    this.distributeEmptySpace()
+    this.#layoutViews()
+  }
+
+  #onSashEnd = (index: number): void => {
+    this.emit("sashChange", index)
+    this.saveProportions()
+
+    for (const item of this.#viewItems) {
+      item.enabled = true
+    }
+  }
+
+  #getSashPosition(sash: Sash): number {
+    let position = 0
+
+    for (let i = 0; i < this.#sashItems.length; i++) {
+      position += this.#viewItems[i].size
+
+      if (this.#sashItems[i].sash === sash) {
+        return position
+      }
+    }
+
+    return 0
+  }
+
+  #resize(
+    index: number,
+    delta: number,
+    sizes = this.#viewItems.map(i => i.size),
+    lowPriorityIndexes?: number[],
+    highPriorityIndexes?: number[],
+    overloadMinDelta: number = Number.NEGATIVE_INFINITY,
+    overloadMaxDelta: number = Number.POSITIVE_INFINITY,
+    snapBefore?: SashDragSnapState,
+    snapAfter?: SashDragSnapState,
+  ): number {
+    if (index < 0 || index >= this.#viewItems.length) {
+      return 0
+    }
+
+    const upIndexes = range(index, -1, -1)
+    const downIndexes = range(index + 1, this.#viewItems.length)
+
+    if (highPriorityIndexes) {
+      for (const index of highPriorityIndexes) {
+        pushToStart(upIndexes, index)
+        pushToStart(downIndexes, index)
+      }
+    }
+
+    if (lowPriorityIndexes) {
+      for (const index of lowPriorityIndexes) {
+        pushToEnd(upIndexes, index)
+        pushToEnd(downIndexes, index)
+      }
+    }
+
+    const upItems = upIndexes.map(i => this.#viewItems[i])
+    const upSizes = upIndexes.map(i => sizes[i])
+
+    const downItems = downIndexes.map(i => this.#viewItems[i])
+    const downSizes = downIndexes.map(i => sizes[i])
+
+    const minDeltaUp = upIndexes.reduce(
+      (r, i) => r + (this.#viewItems[i].minimumSize - sizes[i]),
+      0,
+    )
+
+    const maxDeltaUp = upIndexes.reduce(
+      (r, i) => r + (this.#viewItems[i].maximumSize - sizes[i]),
+      0,
+    )
+
+    const maxDeltaDown =
+      downIndexes.length === 0
+        ? Number.POSITIVE_INFINITY
+        : downIndexes.reduce((r, i) => r + (sizes[i] - this.#viewItems[i].minimumSize), 0)
+
+    const minDeltaDown =
+      downIndexes.length === 0
+        ? Number.NEGATIVE_INFINITY
+        : downIndexes.reduce((r, i) => r + (sizes[i] - this.#viewItems[i].maximumSize), 0)
+
+    const minDelta = Math.max(minDeltaUp, minDeltaDown, overloadMinDelta)
+    const maxDelta = Math.min(maxDeltaDown, maxDeltaUp, overloadMaxDelta)
+
+    let snapped = false
+
+    if (snapBefore) {
+      const snapView = this.#viewItems[snapBefore.index]
+      const visible = delta >= snapBefore.limitDelta
+      snapped = visible !== snapView.visible
+      snapView.setVisible(visible, snapBefore.size)
+    }
+
+    if (!snapped && snapAfter) {
+      const snapView = this.#viewItems[snapAfter.index]
+      const visible = delta < snapAfter.limitDelta
+      snapped = visible !== snapView.visible
+      snapView.setVisible(visible, snapAfter.size)
+    }
+
+    if (snapped) {
+      return this.#resize(
+        index,
+        delta,
+        sizes,
+        lowPriorityIndexes,
+        highPriorityIndexes,
+        overloadMinDelta,
+        overloadMaxDelta,
+      )
+    }
+
+    delta = clamp(delta, minDelta, maxDelta)
+
+    for (let i = 0, deltaUp = delta; i < upItems.length; i++) {
+      const item = upItems[i]
+
+      const size = clamp(upSizes[i] + deltaUp, item.minimumSize, item.maximumSize)
+
+      const viewDelta = size - upSizes[i]
+
+      deltaUp -= viewDelta
+
+      item.size = size
+    }
+
+    for (let i = 0, deltaDown = delta; i < downItems.length; i++) {
+      const item = downItems[i]
+
+      const size = clamp(downSizes[i] - deltaDown, item.minimumSize, item.maximumSize)
+
+      const viewDelta = size - downSizes[i]
+
+      deltaDown += viewDelta
+      item.size = size
+    }
+
+    return delta
+  }
+
+  private distributeEmptySpace(lowPriorityIndex?: number): void {
+    const contentSize = this.#viewItems.reduce((r, i) => r + i.size, 0)
+    let emptyDelta = this.#size - contentSize
+
+    const indexes = range(this.#viewItems.length - 1, -1, -1)
+
+    if (typeof lowPriorityIndex === "number") {
+      pushToEnd(indexes, lowPriorityIndex)
+    }
+
+    for (let i = 0; emptyDelta !== 0 && i < indexes.length; i++) {
+      const item = this.#viewItems[indexes[i]]
+      const size = clamp(item.size + emptyDelta, item.minimumSize, item.maximumSize)
+
+      const viewDelta = size - item.size
+
+      emptyDelta -= viewDelta
+      item.size = size
+    }
+  }
+
+  #layoutViews(): void {
+    // Save new content size
+    this.#contentSize = this.#viewItems.reduce((r, i) => r + i.size, 0)
+
+    // Layout views
+    let offset = 0
+
+    for (const viewItem of this.#viewItems) {
+      viewItem.layout(offset)
+      offset += viewItem.size
+    }
+
+    this.onDidChange?.(this.#viewItems.map(viewItem => viewItem.size))
+
+    // Layout sashes
+    this.#sashItems.forEach(item => item.sash.layout())
+    this.updateSashEnablement()
+  }
+
+  private saveProportions(): void {
+    if (this.#proportionalLayout && this.#contentSize > 0) {
+      this.#proportions = this.#viewItems.map(i => i.size / this.#contentSize)
+    }
+  }
+
+  private updateSashEnablement(): void {
+    let previous = false
+
+    const collapsesDown = this.#viewItems.map(
+      i => (previous = i.size - i.minimumSize > 0 || previous),
+    )
+
+    previous = false
+
+    const expandsDown = this.#viewItems.map(
+      i => (previous = i.maximumSize - i.size > 0 || previous),
+    )
+
+    const reverseViews = [...this.#viewItems].reverse()
+
+    previous = false
+
+    const collapsesUp = reverseViews
+      .map(i => (previous = i.size - i.minimumSize > 0 || previous))
+      .reverse()
+
+    previous = false
+
+    const expandsUp = reverseViews
+      .map(i => (previous = i.maximumSize - i.size > 0 || previous))
+      .reverse()
+
+    let position = 0
+
+    for (let index = 0; index < this.#sashItems.length; index++) {
+      const { sash } = this.#sashItems[index]
+      const viewItem = this.#viewItems[index]
+
+      position += viewItem.size
+
+      const min = !(collapsesDown[index] && expandsUp[index + 1])
+      const max = !(expandsDown[index] && collapsesUp[index + 1])
+
+      if (min && max) {
+        const upIndexes = range(index, -1, -1)
+        const downIndexes = range(index + 1, this.#viewItems.length)
+        const snapBeforeIndex = this.#findFirstSnapIndex(upIndexes)
+        const snapAfterIndex = this.#findFirstSnapIndex(downIndexes)
+
+        const snappedBefore =
+          typeof snapBeforeIndex === "number" && !this.#viewItems[snapBeforeIndex].visible
+
+        const snappedAfter =
+          typeof snapAfterIndex === "number" && !this.#viewItems[snapAfterIndex].visible
+
+        if (
+          snappedBefore &&
+          collapsesUp[index] &&
+          (position > 0 || this.startSnappingEnabled)
+        ) {
+          sash.state = SashState.Minimum
+        } else if (
+          snappedAfter &&
+          collapsesDown[index] &&
+          (position < this.#contentSize || this.endSnappingEnabled)
+        ) {
+          sash.state = SashState.Maximum
+        } else {
+          sash.state = SashState.Disabled
+        }
+      } else if (min && !max) {
+        sash.state = SashState.Minimum
+      } else if (!min && max) {
+        sash.state = SashState.Maximum
+      } else {
+        sash.state = SashState.Enabled
+      }
+    }
+  }
+
+  #findFirstSnapIndex(indexes: number[]): number | undefined {
+    for (const index of indexes) {
+      const viewItem = this.#viewItems[index]
+
+      if (!viewItem.visible) {
+        continue
+      }
+
+      if (viewItem.snap) {
+        return index
+      }
+    }
+
+    for (const index of indexes) {
+      const viewItem = this.#viewItems[index]
+
+      if (viewItem.visible && viewItem.maximumSize - viewItem.minimumSize > 0) {
+        return undefined
+      }
+
+      if (!viewItem.visible && viewItem.snap) {
+        return index
+      }
+    }
+
+    return undefined
+  }
+}
+
+/**
+ * Pushes an element to the start of the array, if found.
+ */
+function pushToStart<T>(arr: T[], value: T): void {
+  const index = arr.indexOf(value)
+
+  if (index > -1) {
+    arr.splice(index, 1)
+    arr.unshift(value)
+  }
+}
+
+/**
+ * Pushes an element to the end of the array, if found.
+ */
+function pushToEnd<T>(arr: T[], value: T): void {
+  const index = arr.indexOf(value)
+
+  if (index > -1) {
+    arr.splice(index, 1)
+    arr.push(value)
+  }
+}
+
+/**
+ * Returns an array containing an arithmetic progression.
+ *
+ * @param start Specifies the range’s initial value. The start is inclusive (included in the returned array)
+ * @param stop The stop value is exclusive; it is not included in the result
+ * @param step If step is positive, the last element is the largest start + i * step less than stop; if step is negative, the last element is the smallest start + i * step greater than stop
+ */
+function range(start: number, stop: number, step = 1): number[] {
+  const n = Math.max(0, Math.ceil((stop - start) / step))
+  const range = new Array(n)
+
+  let i = -1
+
+  while (++i < n) {
+    range[i] = start + i * step
+  }
+
+  return range
+}
diff --git a/src/vendor/dom-highlighter/LICENSE b/src/vendor/dom-highlighter/LICENSE
new file mode 100644
index 0000000..62e9cc8
--- /dev/null
+++ b/src/vendor/dom-highlighter/LICENSE
@@ -0,0 +1,55 @@
+The MIT License (MIT)
+
+Copyright (c) 2020-present liriliri
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+---
+
+Copyright 2020 The Chromium Authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file.
+
+---
+
+Copyright (C) 2012 Google Inc. All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions
+are met:
+
+1.  Redistributions of source code must retain the above copyright
+    notice, this list of conditions and the following disclaimer.
+2.  Redistributions in binary form must reproduce the above copyright
+    notice, this list of conditions and the following disclaimer in the
+    documentation and/or other materials provided with the distribution.
+3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+    its contributors may be used to endorse or promote products derived
+    from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
diff --git a/src/vendor/dom-highlighter/index.ts b/src/vendor/dom-highlighter/index.ts
new file mode 100644
index 0000000..fc0aec3
--- /dev/null
+++ b/src/vendor/dom-highlighter/index.ts
@@ -0,0 +1,486 @@
+import { camelCase, throttle } from "lodash"
+import { ValueEmitter } from "../../shared/emitter"
+import { hex, parse } from "./src/color"
+import { elementRoles } from "./src/elementRoles"
+import {
+  type ElementInfo,
+  type Highlight,
+  HighlightOverlay,
+  type Path,
+} from "./src/overlay/toolHighlight"
+import type { PathCommands } from "./src/overlay/common"
+
+interface IRect {
+  left: number
+  top: number
+  width: number
+  height: number
+}
+
+export interface IRgb {
+  r: number
+  g: number
+  b: number
+  a?: number
+}
+
+/** IOptions */
+export interface IOptions {
+  /** Whether the rulers should be shown. */
+  showRulers: boolean
+  /** Whether the extension lines from node to the rulers should be shown. */
+  showExtensionLines: boolean
+  /** Whether the node info tooltip should be shown. */
+  showInfo: boolean
+  /** Whether the node styles in the tooltip. */
+  showStyles: boolean
+  /** Whether the a11y info should be shown. */
+  showAccessibilityInfo: boolean
+  /** The color format used to format color styles. */
+  colorFormat: "rgb" | "hsl" | "hex"
+  /** The content box highlight fill color. */
+  contentColor: string | IRgb
+  /** The padding highlight fill color. */
+  paddingColor: string | IRgb
+  /** The border highlight fill color. */
+  borderColor: string | IRgb
+  /** The margin highlight fill color. */
+  marginColor: string | IRgb
+  /** Auto redraw if target element is resized. */
+  monitorResize: boolean | IRgb
+}
+
+class ResizeSensor extends ValueEmitter<ResizeObserverEntry[]> {
+  #observer: ResizeObserver
+
+  constructor(private target: HTMLElement) {
+    super()
+    this.#observer = new ResizeObserver(e => super.emit(e))
+    this.#observer.observe(target)
+  }
+
+  destroy() {
+    this.#observer.unobserve(this.target)
+    super.clear()
+  }
+}
+
+/**
+ * Highlighter for html elements.
+ *
+ * @example
+ * const domHighlighter = new LunaDomHighlighter(container, {
+ *   showRulers: true,
+ *   showExtensionLines: true,
+ *   showInfo: true,
+ * })
+ * domHighlighter.highlight(document.getElementById('test'))
+ * domHighlighter.hide()
+ */
+export class DomHighlighter {
+  private options: IOptions
+  private overlay: HighlightOverlay = new HighlightOverlay(window)
+  private target?: HTMLElement | Text | null
+  private resizeSensor?: ResizeSensor
+  private redraw: () => void
+  private interceptor?: (highlight: Highlight) => Highlight | null
+
+  constructor(container: HTMLElement, options: Partial<IOptions> = {}) {
+    this.options = {
+      showRulers: false,
+      showExtensionLines: false,
+      showInfo: true,
+      showStyles: true,
+      showAccessibilityInfo: true,
+      colorFormat: "hex",
+      contentColor: "rgba(111, 168, 220, .66)",
+      paddingColor: "rgba(147, 196, 125, .55)",
+      borderColor: "rgba(255, 229, 153, .66)",
+      marginColor: "rgba(246, 178, 107, .66)",
+      monitorResize: true,
+      ...options,
+    }
+
+    this.overlay.setContainer(container)
+    this.overlay.setPlatform("mac")
+
+    this.redraw = throttle(() => {
+      this.reset()
+      this.draw()
+    }, 16)
+
+    this.redraw()
+    this.bindEvent()
+  }
+
+  /** Highlight element or text node. */
+  highlight(target: HTMLElement | Text, options?: IOptions) {
+    if (options) {
+      Object.assign(this.options, options)
+    }
+
+    this.target = target
+
+    if (target instanceof HTMLElement && this.options.monitorResize) {
+      if (this.resizeSensor) {
+        this.resizeSensor.destroy()
+      }
+      this.resizeSensor = new ResizeSensor(target)
+      this.resizeSensor.listen(this.redraw)
+    }
+
+    this.redraw()
+  }
+
+  /** Hide highlight. */
+  hide() {
+    this.target = null
+    this.redraw()
+  }
+
+  intercept(interceptor: (highlight: Highlight) => Highlight | null) {
+    this.interceptor = interceptor
+  }
+
+  destroy() {
+    window.removeEventListener("resize", this.redraw)
+    window.removeEventListener("scroll", this.redraw)
+    this.resizeSensor?.destroy()
+  }
+
+  private draw() {
+    const { target } = this
+    if (!target) {
+      return
+    }
+
+    if (target instanceof Text) {
+      this.drawText(target)
+    } else {
+      this.drawElement(target)
+    }
+  }
+
+  private drawText(target: Text) {
+    const { options } = this
+    const range = document.createRange()
+    range.selectNode(target)
+    const { left, top, width, height } = range.getBoundingClientRect()
+    range.detach()
+
+    const highlight: Highlight = {
+      paths: [
+        {
+          path: rectToPath({ left, top, width, height }),
+          fillColor: normalizeColor(options.contentColor),
+          name: "content",
+        },
+      ],
+      showExtensionLines: options.showExtensionLines,
+      showRulers: options.showRulers,
+      colorFormat: undefined!,
+    }
+
+    if (options.showInfo) {
+      highlight.elementInfo = {
+        tagName: "#text",
+        nodeWidth: width,
+        nodeHeight: height,
+      }
+    }
+
+    this.overlay.drawHighlight(highlight)
+  }
+
+  private drawElement(target: HTMLElement): void {
+    let highlight: Highlight = {
+      paths: this.getPaths(target),
+      showExtensionLines: this.options.showExtensionLines,
+      showRulers: this.options.showRulers,
+      colorFormat: this.options.colorFormat,
+    }
+
+    if (this.options.showInfo) {
+      highlight.elementInfo = this.getElementInfo(target)
+    }
+
+    if (this.interceptor) {
+      const result = this.interceptor(highlight)
+      if (result) {
+        highlight = result
+      }
+    }
+    this.overlay.drawHighlight(highlight)
+  }
+
+  private getPaths(target: HTMLElement): Path[] {
+    const { options } = this
+    const computedStyle = window.getComputedStyle(target)
+
+    const { left, top, width, height } = target.getBoundingClientRect()
+
+    const getNumStyle = (name: string) => pxToNum(computedStyle.getPropertyValue(name))
+
+    const ml = getNumStyle("margin-left")
+    const mr = getNumStyle("margin-right")
+    const mt = getNumStyle("margin-top")
+    const mb = getNumStyle("margin-bottom")
+
+    const bl = getNumStyle("border-left-width")
+    const br = getNumStyle("border-right-width")
+    const bt = getNumStyle("border-top-width")
+    const bb = getNumStyle("border-bottom-width")
+
+    const pl = getNumStyle("padding-left")
+    const pr = getNumStyle("padding-right")
+    const pt = getNumStyle("padding-top")
+    const pb = getNumStyle("padding-bottom")
+
+    const contentPath: Path = {
+      path: rectToPath({
+        left: left + bl + pl,
+        top: top + bt + pt,
+        width: width - bl - pl - br - pr,
+        height: height - bt - pt - bb - pb,
+      }),
+      fillColor: normalizeColor(options.contentColor),
+      name: "content",
+    }
+
+    const paddingPath: Path = {
+      path: rectToPath({
+        left: left + bl,
+        top: top + bt,
+        width: width - bl - br,
+        height: height - bt - bb,
+      }),
+      fillColor: normalizeColor(options.paddingColor),
+      name: "padding",
+    }
+
+    const borderPath: Path = {
+      path: rectToPath({
+        left,
+        top,
+        width,
+        height,
+      }),
+      fillColor: normalizeColor(options.borderColor),
+      name: "border",
+    }
+
+    const marginPath: Path = {
+      path: rectToPath({
+        left: left - ml,
+        top: top - mt,
+        width: width + ml + mr,
+        height: height + mt + mb,
+      }),
+      fillColor: normalizeColor(options.marginColor),
+      name: "margin",
+    }
+
+    return [contentPath, paddingPath, borderPath, marginPath]
+  }
+
+  private getElementInfo(target: HTMLElement): ElementInfo {
+    const { width, height } = target.getBoundingClientRect()
+    // svg element's className is not a string
+    let className = target.getAttribute("class") || ""
+    className = className
+      .split(/\s+/)
+      .map(c => "." + c)
+      .join("")
+
+    const elementInfo: ElementInfo = {
+      tagName: target.tagName.toLowerCase(),
+      className,
+      idValue: target.id,
+      nodeWidth: width,
+      nodeHeight: height,
+    }
+
+    if (this.options.showStyles) {
+      elementInfo.style = getStyles(target)
+    }
+
+    if (this.options.showAccessibilityInfo) {
+      Object.assign(elementInfo, getAccessibilityInfo(target))
+    }
+
+    return elementInfo
+  }
+
+  private bindEvent(): void {
+    window.addEventListener("resize", this.redraw)
+    window.addEventListener("scroll", this.redraw)
+  }
+
+  private reset = () => {
+    const viewportWidth = document.documentElement.clientWidth
+    const viewportHeight = document.documentElement.clientHeight
+
+    this.overlay.reset({
+      viewportSize: {
+        width: viewportWidth,
+        height: viewportHeight,
+      },
+      deviceScaleFactor: 1,
+      pageScaleFactor: 1,
+      pageZoomFactor: 1,
+      emulationScaleFactor: 1,
+      scrollX: window.scrollX,
+      scrollY: window.scrollY,
+    })
+  }
+}
+
+// third_party/blink/renderer/core/inspector/inspector_highlight.cc
+function getStyles(target: HTMLElement) {
+  const computedStyle = window.getComputedStyle(target)
+  let hasTextChildren = false
+  const { childNodes } = target
+  for (let i = 0, len = childNodes.length; i < len; i++) {
+    if (childNodes[i].nodeType === 3) {
+      hasTextChildren = true
+    }
+  }
+
+  const properties = []
+  if (hasTextChildren) {
+    properties.push("color", "font-family", "font-size", "line-height")
+  }
+  properties.push("padding", "margin", "background-color")
+
+  return propertiesToValues(computedStyle, properties)
+}
+
+function getAccessibilityInfo(target: HTMLElement): Partial<ElementInfo> {
+  const computedStyle = window.getComputedStyle(target)
+
+  return {
+    showAccessibilityInfo: true,
+    contrast: {
+      contrastAlgorithm: "aa",
+      textOpacity: 0.1,
+      ...(propertiesToValues(
+        computedStyle,
+        ["font-size", "font-weight", "background-color", "text-opacity"],
+        true,
+      ) as {
+        fontSize: string
+        fontWeight: string
+        backgroundColor: string
+        textOpacity?: number
+      }),
+    },
+    isKeyboardFocusable: isFocusable(target),
+    ...getAccessibleNameAndRole(target),
+  }
+}
+
+function isFocusable(target: HTMLElement) {
+  const tagName = target.tagName.toLowerCase()
+
+  if (["a", "button", "input", "textarea", "select", "details"].includes(tagName)) {
+    return true
+  }
+
+  const tabIdx = target.getAttribute("tabindex")
+  if (tabIdx && parseInt(tabIdx, 10) > -1) {
+    return true
+  }
+
+  return false
+}
+
+function getAccessibleNameAndRole(target: HTMLElement) {
+  const tagName = target.tagName.toLowerCase()
+  return {
+    accessibleName:
+      target.getAttribute("labelledby") ||
+      target.getAttribute("aria-label") ||
+      target.getAttribute("title") ||
+      "",
+    accessibleRole:
+      target.getAttribute("role") ||
+      elementRoles.find(([name, , attributes]) => {
+        if (name !== tagName) {
+          return false
+        }
+        if (attributes) {
+          return attributes.every(([attr, value]) => target.getAttribute(attr) === value)
+        }
+        return true
+      })?.[1] ||
+      "generic",
+  }
+}
+
+function rectToPath({ left, top, width, height }: IRect): PathCommands {
+  // prettier-ignore
+  return [
+    "M", left, top,
+    "L", left + width, top,
+    "L", left + width, top + height,
+    "L", left, top + height,
+    "Z",
+  ];
+}
+
+const regRgb = /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/
+const regRgba = /^rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d*(?:\.\d+)?)\)$/
+
+function isColor(color: string) {
+  return regRgb.test(color) || regRgba.test(color)
+}
+
+function rgbToHex(rgb: string) {
+  const color = parse(rgb)
+  const opacity = color.val[3] || 1
+  color.val = color.val.slice(0, 3)
+  color.val.push(Math.round(255 * opacity))
+  return "#" + hex.encode(color.val).toLocaleUpperCase()
+}
+
+function normalizeColor(color: string | IRgb) {
+  if (typeof color === "string") {
+    return color
+  }
+
+  if (color.a) {
+    return `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`
+  }
+
+  return `rgb(${color.r}, ${color.g}, ${color.b})`
+}
+
+function propertiesToValues(
+  computedStyle: CSSStyleDeclaration,
+  properties: string[],
+  useCamelCase = false,
+) {
+  const ret: Record<string, any> = {}
+  for (let property of properties) {
+    let value = (computedStyle as any)[property === "text-opacity" ? "color" : property]
+    if (!value) {
+      return
+    }
+    if (isColor(value)) {
+      value = rgbToHex(value)
+      if (property === "text-opacity") {
+        value = value.slice(7)
+        value = hex.decode(value)[0] / 255
+      }
+    }
+    if (useCamelCase) {
+      property = camelCase(property)
+    }
+    ret[property] = value
+  }
+  return ret
+}
+
+function pxToNum(str: string) {
+  return parseInt(str.replace("px", ""), 10)
+}
diff --git a/src/vendor/dom-highlighter/src/color.ts b/src/vendor/dom-highlighter/src/color.ts
new file mode 100644
index 0000000..4607a8e
--- /dev/null
+++ b/src/vendor/dom-highlighter/src/color.ts
@@ -0,0 +1,81 @@
+import { clamp } from "lodash"
+
+export function parse(colorStr: string) {
+  let match: RegExpMatchArray | null
+
+  let val = [0, 0, 0, 1]
+  let model = "rgb"
+
+  if ((match = colorStr.match(regHexAbbr))) {
+    const [, m] = match
+
+    for (let i = 0; i < 3; i++) {
+      val[i] = parseInt(m[i] + m[i], 16)
+    }
+  } else if ((match = colorStr.match(regHex))) {
+    const [, m] = match
+
+    for (let i = 0; i < 3; i++) {
+      const i2 = i * 2
+      val[i] = parseInt(m.slice(i2, i2 + 2), 16)
+    }
+  } else if ((match = colorStr.match(regRgba))) {
+    for (let i = 0; i < 3; i++) {
+      val[i] = parseInt(match[i + 1], 0)
+    }
+
+    if (match[4]) val[3] = parseFloat(match[4])
+  } else if ((match = colorStr.match(regRgbaPer))) {
+    for (let i = 0; i < 3; i++) {
+      val[i] = Math.round(parseFloat(match[i + 1]) * 2.55)
+    }
+
+    if (match[4]) val[3] = parseFloat(match[4])
+  } else if ((match = colorStr.match(regHsla))) {
+    model = "hsl"
+    val = [
+      ((parseFloat(match[1]) % 360) + 360) % 360,
+      clamp(parseFloat(match[2]), 0, 100),
+      clamp(parseFloat(match[3]), 0, 100),
+      clamp(parseFloat(match[4]), 0, 1),
+    ]
+  }
+
+  return { val, model }
+}
+
+const regHexAbbr = /^#([a-fA-F0-9]{3})$/
+const regHex = /^#([a-fA-F0-9]{6})$/
+const regRgba =
+  /^rgba?\(\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*(?:,\s*([+-]?[\d.]+)\s*)?\)$/
+const regRgbaPer =
+  /^rgba?\(\s*([+-]?[\d.]+)%\s*,\s*([+-]?[\d.]+)%\s*,\s*([+-]?[\d.]+)%\s*(?:,\s*([+-]?[\d.]+)\s*)?\)$/
+const regHsla =
+  /^hsla?\(\s*([+-]?\d*[.]?\d+)(?:deg)?\s*,\s*([+-]?[\d.]+)%\s*,\s*([+-]?[\d.]+)%\s*(?:,\s*([+-]?[\d.]+)\s*)?\)$/
+
+export const hex = {
+  encode(bytes: number[]) {
+    const hex: string[] = []
+
+    for (let i = 0, len = bytes.length; i < len; i++) {
+      const byte = bytes[i]
+      hex.push((byte >>> 4).toString(16))
+      hex.push((byte & 0xf).toString(16))
+    }
+
+    return hex.join("")
+  },
+
+  decode(str: string) {
+    const bytes = []
+
+    let len = str.length
+    if (len % 2 !== 0) len--
+
+    for (let i = 0; i < len; i += 2) {
+      bytes.push(parseInt(str.substr(i, 2), 16))
+    }
+
+    return bytes
+  },
+}
diff --git a/src/vendor/dom-highlighter/src/elementRoles.ts b/src/vendor/dom-highlighter/src/elementRoles.ts
new file mode 100644
index 0000000..d843aca
--- /dev/null
+++ b/src/vendor/dom-highlighter/src/elementRoles.ts
@@ -0,0 +1,88 @@
+export const elementRoles: [string, string, [string, string | number][]?][] = [
+  ["menuitem", "command"],
+  ["rel", "roletype"],
+  ["article", "article"],
+  ["header", "banner"],
+  ["input", "button", [["type", "checkbox"]]],
+  ["summary", "button", [["aria-expanded", "false"]]],
+  ["summary", "button", [["aria-expanded", "true"]]],
+  ["input", "button", [["type", "button"]]],
+  ["input", "button", [["type", "image"]]],
+  ["input", "button", [["type", "reset"]]],
+  ["input", "button", [["type", "submit"]]],
+  ["button", "button"],
+  ["td", "cell"],
+  ["input", "checkbox", [["type", "checkbox"]]],
+  ["th", "columnheader"],
+  ["input", "combobox", [["type", "email"]]],
+  ["input", "combobox", [["type", "search"]]],
+  ["input", "combobox", [["type", "tel"]]],
+  ["input", "combobox", [["type", "text"]]],
+  ["input", "combobox", [["type", "url"]]],
+  ["input", "combobox", [["type", "url"]]],
+  ["select", "combobox"],
+  ["select", "combobox", [["size", 1]]],
+  ["aside", "complementary"],
+  ["footer", "contentinfo"],
+  ["dd", "definition"],
+  ["dialog", "dialog"],
+  ["body", "document"],
+  ["figure", "figure"],
+  ["form", "form"],
+  ["form", "form"],
+  ["form", "form"],
+  ["span", "generic"],
+  ["div", "generic"],
+  ["table", "grid", [["role", "grid"]]],
+  ["td", "gridcell", [["role", "gridcell"]]],
+  ["details", "group"],
+  ["fieldset", "group"],
+  ["optgroup", "group"],
+  ["h1", "heading"],
+  ["h2", "heading"],
+  ["h3", "heading"],
+  ["h4", "heading"],
+  ["h5", "heading"],
+  ["h6", "heading"],
+  ["img", "img"],
+  ["img", "img"],
+  ["a", "link"],
+  ["area", "link"],
+  ["link", "link"],
+  ["menu", "list"],
+  ["ol", "list"],
+  ["ul", "list"],
+  ["select", "listbox"],
+  ["select", "listbox"],
+  ["select", "listbox"],
+  ["datalist", "listbox"],
+  ["li", "listitem"],
+  ["main", "main"],
+  ["math", "math"],
+  ["menuitem", "command"],
+  ["nav", "navigation"],
+  ["option", "option"],
+  ["progress", "progressbar"],
+  ["input", "radio", [["type", "radio"]]],
+  ["section", "region"],
+  ["section", "region"],
+  ["frame", "region"],
+  ["tr", "row"],
+  ["tbody", "rowgroup"],
+  ["tfoot", "rowgroup"],
+  ["thead", "rowgroup"],
+  ["th", "rowheader", [["scope", "row"]]],
+  ["input", "searchbox", [["type", "search"]]],
+  ["hr", "separator"],
+  ["input", "slider", [["type", "range"]]],
+  ["input", "spinbutton", [["type", "number"]]],
+  ["output", "status"],
+  ["table", "table"],
+  ["dfn", "term"],
+  ["input", "textbox"],
+  ["input", "textbox", [["type", "email"]]],
+  ["input", "textbox", [["type", "tel"]]],
+  ["input", "textbox", [["type", "text"]]],
+  ["input", "textbox", [["type", "url"]]],
+  ["textarea", "textbox"],
+]
diff --git a/src/vendor/dom-highlighter/src/module.d.ts b/src/vendor/dom-highlighter/src/module.d.ts
new file mode 100644
index 0000000..6c93729
--- /dev/null
+++ b/src/vendor/dom-highlighter/src/module.d.ts
@@ -0,0 +1,4 @@
+declare module "*.css?string" {
+  const value: string
+  export = value
+}
diff --git a/src/vendor/dom-highlighter/src/overlay/ColorUtils.ts b/src/vendor/dom-highlighter/src/overlay/ColorUtils.ts
new file mode 100644
index 0000000..b9a3910
--- /dev/null
+++ b/src/vendor/dom-highlighter/src/overlay/ColorUtils.ts
@@ -0,0 +1,221 @@
+/**
+ * Combine the two given colors according to alpha blending.
+ */
+function blendColors(fgRGBA: number[], bgRGBA: number[]): number[] {
+  // eslint-disable-next-line prefer-destructuring
+  const alpha = fgRGBA[3]
+  return [
+    (1 - alpha) * bgRGBA[0] + alpha * fgRGBA[0],
+    (1 - alpha) * bgRGBA[1] + alpha * fgRGBA[1],
+    (1 - alpha) * bgRGBA[2] + alpha * fgRGBA[2],
+    alpha + bgRGBA[3] * (1 - alpha),
+  ]
+}
+
+export function rgbaToHsla([r, g, b, a]: number[]): number[] {
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  const diff = max - min
+  const sum = max + min
+
+  let h
+  if (min === max) {
+    h = 0
+  } else if (r === max) {
+    h = (((1 / 6) * (g - b)) / diff + 1) % 1
+  } else if (g === max) {
+    h = ((1 / 6) * (b - r)) / diff + 1 / 3
+  } else {
+    h = ((1 / 6) * (r - g)) / diff + 2 / 3
+  }
+
+  const l = 0.5 * sum
+
+  let s
+  if (l === 0) {
+    s = 0
+  } else if (l === 1) {
+    s = 0
+  } else if (l <= 0.5) {
+    s = diff / sum
+  } else {
+    s = diff / (2 - sum)
+  }
+
+  return [h, s, l, a]
+}
+
+/**
+ * Calculate the luminance of this color using the WCAG algorithm.
+ * See http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+ */
+export function luminance([rSRGB, gSRGB, bSRGB]: number[]): number {
+  const r = rSRGB <= 0.03928 ? rSRGB / 12.92 : Math.pow((rSRGB + 0.055) / 1.055, 2.4)
+  const g = gSRGB <= 0.03928 ? gSRGB / 12.92 : Math.pow((gSRGB + 0.055) / 1.055, 2.4)
+  const b = bSRGB <= 0.03928 ? bSRGB / 12.92 : Math.pow((bSRGB + 0.055) / 1.055, 2.4)
+
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b
+}
+
+/**
+ * Calculate the contrast ratio between a foreground and a background color.
+ * Returns the ratio to 1, for example for two two colors with a contrast ratio of 21:1, this function will return 21.
+ * See http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
+ */
+export function contrastRatio(fgRGBA: number[], bgRGBA: number[]): number {
+  const blendedFg = blendColors(fgRGBA, bgRGBA)
+  const fgLuminance = luminance(blendedFg)
+  const bgLuminance = luminance(bgRGBA)
+  const contrastRatio =
+    (Math.max(fgLuminance, bgLuminance) + 0.05) /
+    (Math.min(fgLuminance, bgLuminance) + 0.05)
+  return contrastRatio
+}
+
+// Constants for basic APCA version.
+// See https://github.com/Myndex/SAPC-APCA
+const mainTRC = 2.4
+const normBgExp = 0.55
+const normFgExp = 0.58
+const revBgExp = 0.62
+const revFgExp = 0.57
+const blkThrs = 0.03
+const blkClmp = 1.45
+const scaleBoW = 1.25
+const scaleWoB = 1.25
+const deltaLuminanceMin = 0.0005
+const loConThresh = 0.078
+const loConFactor = 12.82051282051282
+const loConOffset = 0.06
+const loClip = 0.001
+
+/**
+ * Calculate relative luminance of a color.
+ * See https://github.com/Myndex/SAPC-APCA
+ */
+function luminanceAPCA([rSRGB, gSRGB, bSRGB]: number[]): number {
+  const r = Math.pow(rSRGB, mainTRC)
+  const g = Math.pow(gSRGB, mainTRC)
+  const b = Math.pow(bSRGB, mainTRC)
+
+  return 0.2126729 * r + 0.7151522 * g + 0.072175 * b
+}
+
+/**
+ * Calculate the contrast ratio between a foreground and a background color.
+ * Returns the percentage of the predicted visual contrast.
+ * See https://github.com/Myndex/SAPC-APCA
+ */
+export function contrastRatioAPCA(fgRGBA: number[], bgRGBA: number[]): number {
+  return contrastRatioByLuminanceAPCA(luminanceAPCA(fgRGBA), luminanceAPCA(bgRGBA))
+}
+
+function clampLuminance(value: number): number {
+  return value > blkThrs ? value : value + Math.pow(blkThrs - value, blkClmp)
+}
+
+function contrastRatioByLuminanceAPCA(fgLuminance: number, bgLuminance: number): number {
+  fgLuminance = clampLuminance(fgLuminance)
+  bgLuminance = clampLuminance(bgLuminance)
+  if (Math.abs(fgLuminance - bgLuminance) < deltaLuminanceMin) {
+    return 0
+  }
+  let result = 0
+  if (bgLuminance >= fgLuminance) {
+    // Black text on white.
+    result =
+      (Math.pow(bgLuminance, normBgExp) - Math.pow(fgLuminance, normFgExp)) * scaleBoW
+    result =
+      result < loClip
+        ? 0
+        : result < loConThresh
+        ? result - result * loConFactor * loConOffset
+        : result - loConOffset
+  } else {
+    // White text on black.
+    result =
+      (Math.pow(bgLuminance, revBgExp) - Math.pow(fgLuminance, revFgExp)) * scaleWoB
+    result =
+      result > -loClip
+        ? 0
+        : result > -loConThresh
+        ? result - result * loConFactor * loConOffset
+        : result + loConOffset
+  }
+  return result * 100
+}
+
+// clang-format off
+const contrastAPCALookupTable = [
+  // See https://github.com/Myndex/SAPC-APCA
+  // font size in px | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 weights
+  [12, -1, -1, -1, -1, 100, 90, 80, -1, -1],
+  [14, -1, -1, -1, 100, 90, 80, 60, 60, -1],
+  [16, -1, -1, 100, 90, 80, 60, 55, 50, 50],
+  [18, -1, -1, 90, 80, 60, 55, 50, 40, 40],
+  [24, -1, 100, 80, 60, 55, 50, 40, 38, 35],
+  [30, -1, 90, 70, 55, 50, 40, 38, 35, 40],
+  [36, -1, 80, 60, 50, 40, 38, 35, 30, 25],
+  [48, 100, 70, 55, 40, 38, 35, 30, 25, 20],
+  [60, 90, 60, 50, 38, 35, 30, 25, 20, 20],
+  [72, 80, 55, 40, 35, 30, 25, 20, 20, 20],
+  [96, 70, 50, 35, 30, 25, 20, 20, 20, 20],
+  [120, 60, 40, 30, 25, 20, 20, 20, 20, 20],
+]
+// clang-format on
+
+contrastAPCALookupTable.reverse()
+
+export function getAPCAThreshold(fontSize: string, fontWeight: string): number | null {
+  const size = parseFloat(fontSize.replace("px", ""))
+  const weight = parseFloat(fontWeight)
+
+  // Go over the table backwards to find the first matching font size and then the weight.
+  // Fonts larger than 96px, use the thresholds for 96px.
+  // Fonts smaller than 12px, don't get any threshold meaning the font size needs to be increased.
+  for (const [rowSize, ...rowWeights] of contrastAPCALookupTable) {
+    if (size >= rowSize) {
+      for (const [idx, keywordWeight] of [
+        900, 800, 700, 600, 500, 400, 300, 200, 100,
+      ].entries()) {
+        if (weight >= keywordWeight) {
+          const threshold = rowWeights[rowWeights.length - 1 - idx]
+          return threshold === -1 ? null : threshold
+        }
+      }
+    }
+  }
+
+  return null
+}
+
+function isLargeFont(fontSize: string, fontWeight: string): boolean {
+  const boldWeights = ["bold", "bolder", "600", "700", "800", "900"]
+
+  const fontSizePx = parseFloat(fontSize.replace("px", ""))
+  const isBold = boldWeights.indexOf(fontWeight) !== -1
+
+  const fontSizePt = (fontSizePx * 72) / 96
+  if (isBold) {
+    return fontSizePt >= 14
+  }
+  return fontSizePt >= 18
+}
+
+const contrastThresholds = {
+  largeFont: { aa: 3.0, aaa: 4.5 },
+  normalFont: { aa: 4.5, aaa: 7.0 },
+}
+
+export function getContrastThreshold(
+  fontSize: string,
+  fontWeight: string,
+): {
+  aa: number
+  aaa: number
+} {
+  if (isLargeFont(fontSize, fontWeight)) {
+    return contrastThresholds.largeFont
+  }
+  return contrastThresholds.normalFont
+}
diff --git a/src/vendor/dom-highlighter/src/overlay/common.ts b/src/vendor/dom-highlighter/src/overlay/common.ts
new file mode 100644
index 0000000..c08a1d5
--- /dev/null
+++ b/src/vendor/dom-highlighter/src/overlay/common.ts
@@ -0,0 +1,235 @@
+export type PathCommands = Array<string | number>
+
+export interface Quad {
+  p1: Position
+  p2: Position
+  p3: Position
+  p4: Position
+}
+
+export interface Position {
+  x: number
+  y: number
+}
+
+export interface Bounds {
+  minX: number
+  maxX: number
+  minY: number
+  maxY: number
+  width?: number
+  height?: number
+  allPoints: Position[]
+}
+
+export interface AreaBounds {
+  name: string
+  bounds: { allPoints: Position[] }
+}
+
+interface ViewportSize {
+  width: number
+  height: number
+}
+
+export interface ResetData {
+  viewportSize: ViewportSize
+  visualViewportSize?: ViewportSize
+  deviceScaleFactor: number
+  pageScaleFactor: number
+  pageZoomFactor: number
+  emulationScaleFactor: number
+  scrollX: number
+  scrollY: number
+}
+
+// Overlay class should be used to implement various tools and provide
+// access to globals via the window object it receives in the constructor.
+// Old logic is kept temporarily while the tools are being migrated.
+export class Overlay {
+  protected viewportSize = { width: 800, height: 600 }
+  protected visualViewportSize?: ViewportSize
+  protected deviceScaleFactor = 1
+  protected emulationScaleFactor = 1
+  protected pageScaleFactor = 1
+  protected pageZoomFactor = 1
+  protected scrollX = 0
+  protected scrollY = 0
+  protected style: CSSStyleSheet[]
+  protected canvas?: HTMLCanvasElement
+  protected canvasWidth = 0
+  protected canvasHeight = 0
+  protected platform?: string
+  #window?: Window
+  #document?: Document
+  #context?: CanvasRenderingContext2D | null
+  #installed = false
+
+  constructor(window: Window, style: CSSStyleSheet[] = []) {
+    this.#window = window
+    this.#document = window.document
+    if (!Array.isArray(style)) {
+      style = [style]
+    }
+    this.style = style
+  }
+
+  setCanvas(canvas: HTMLCanvasElement) {
+    this.canvas = canvas
+    this.#context = canvas.getContext("2d")
+  }
+
+  install() {
+    for (const style of this.style) {
+      adoptStyleSheet(style)
+    }
+    this.#installed = true
+  }
+
+  uninstall() {
+    for (const style of this.style) {
+      document.adoptedStyleSheets = document.adoptedStyleSheets.filter(s => s !== style)
+    }
+    this.#installed = false
+  }
+
+  reset(resetData?: ResetData) {
+    if (resetData) {
+      this.viewportSize = resetData.viewportSize
+      this.visualViewportSize = resetData.visualViewportSize
+      this.deviceScaleFactor = resetData.deviceScaleFactor
+      this.pageScaleFactor = resetData.pageScaleFactor
+      this.pageZoomFactor = resetData.pageZoomFactor
+      this.emulationScaleFactor = resetData.emulationScaleFactor
+      this.scrollX = Math.round(resetData.scrollX)
+      this.scrollY = Math.round(resetData.scrollY)
+    }
+    this.resetCanvas()
+  }
+
+  resetCanvas() {
+    if (!this.canvas || !this.#context) {
+      return
+    }
+
+    this.canvas.width = this.deviceScaleFactor * this.viewportSize.width
+    this.canvas.height = this.deviceScaleFactor * this.viewportSize.height
+    this.canvas.style.width = this.viewportSize.width + "px"
+    this.canvas.style.height = this.viewportSize.height + "px"
+
+    this.#context.scale(this.deviceScaleFactor, this.deviceScaleFactor)
+
+    this.canvasWidth = this.viewportSize.width
+    this.canvasHeight = this.viewportSize.height
+  }
+
+  setPlatform(platform: string) {
+    this.platform = platform
+    if (!this.#installed) {
+      this.install()
+    }
+  }
+
+  dispatch(message: unknown[]) {
+    const functionName = message.shift() as string
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ;(this as any)[functionName].apply(this, message)
+  }
+
+  eventHasCtrlOrMeta(event: KeyboardEvent) {
+    return this.platform === "mac"
+      ? event.metaKey && !event.ctrlKey
+      : event.ctrlKey && !event.metaKey
+  }
+
+  get context(): CanvasRenderingContext2D {
+    if (!this.#context) {
+      throw new Error("Context object is missing")
+    }
+    return this.#context
+  }
+
+  get document(): Document {
+    if (!this.#document) {
+      throw new Error("Document object is missing")
+    }
+    return this.#document
+  }
+
+  get window(): Window {
+    if (!this.#window) {
+      throw new Error("Window object is missing")
+    }
+    return this.#window
+  }
+
+  get installed(): boolean {
+    return this.#installed
+  }
+}
+
+export function log(text: string) {
+  let element = document.getElementById("log")
+  if (!element) {
+    element = createChild(document.body, "div")
+    element.id = "log"
+  }
+  createChild(element, "div").textContent = text
+}
+
+export function createChild(
+  parent: HTMLElement,
+  tagName: string,
+  className?: string,
+): HTMLElement {
+  const element = createElement(tagName, className)
+  element.addEventListener(
+    "click",
+    (e: Event) => {
+      e.stopPropagation()
+    },
+    false,
+  )
+  parent.appendChild(element)
+  return element
+}
+
+export function createTextChild(parent: HTMLElement, text: string): Text {
+  const element = document.createTextNode(text)
+  parent.appendChild(element)
+  return element
+}
+
+export function createElement(tagName: string, className?: string) {
+  const element = document.createElement(tagName)
+  if (className) {
+    element.className = className
+  }
+  return element
+}
+
+export function ellipsify(str: string, maxLength: number) {
+  if (str.length <= maxLength) {
+    return String(str)
+  }
+  return str.substr(0, maxLength - 1) + "\u2026"
+}
+
+export function constrainNumber(num: number, min: number, max: number): number {
+  if (num < min) {
+    num = min
+  } else if (num > max) {
+    num = max
+  }
+  return num
+}
+
+declare global {
+  interface Document {
+    adoptedStyleSheets: CSSStyleSheet[]
+  }
+}
+
+export function adoptStyleSheet(styleSheet: CSSStyleSheet) {
+  document.adoptedStyleSheets = [...document.adoptedStyleSheets, styleSheet]
+}
diff --git a/src/vendor/dom-highlighter/src/overlay/cssGridLabelHelpers.ts b/src/vendor/dom-highlighter/src/overlay/cssGridLabelHelpers.ts
new file mode 100644
index 0000000..4f6d7a6
--- /dev/null
+++ b/src/vendor/dom-highlighter/src/overlay/cssGridLabelHelpers.ts
@@ -0,0 +1,1166 @@
+import { luminance } from "./ColorUtils"
+import type { AreaBounds, Bounds, Position } from "./common"
+import { createChild } from "./common"
+import { applyMatrixToPoint, parseHexa } from "./highlightCommon"
+
+/**
+ * There are 12 different types of arrows for labels.
+ *
+ * The first word in an arrow type corresponds to the side of the label
+ * container the arrow is on (e.g. 'left' means the arrow is on the left side of
+ * the container).
+ *
+ * The second word defines where, along that side, the arrow is (e.g. 'top' in
+ * a 'leftTop' type means the arrow is at the top of the left side of the
+ * container).
+ *
+ * Here are 2 examples to illustrate:
+ *
+ *              +----+
+ * rightMid:    |     >
+ *              +----+
+ *
+ *              +----+
+ * bottomRight: |    |
+ *              +--  +
+ *                  \|
+ */
+const GridArrowTypes = {
+  leftTop: "left-top",
+  leftMid: "left-mid",
+  leftBottom: "left-bottom",
+  topLeft: "top-left",
+  topMid: "top-mid",
+  topRight: "top-right",
+  rightTop: "right-top",
+  rightMid: "right-mid",
+  rightBottom: "right-bottom",
+  bottomLeft: "bottom-left",
+  bottomMid: "bottom-mid",
+  bottomRight: "bottom-right",
+} as const
+
+// The size (in px) of a label arrow.
+const gridArrowWidth = 3
+// The minimum distance (in px) a label has to be from the edge of the viewport
+// to avoid being flipped inside the grid.
+const gridPageMargin = 20
+// The minimum distance (in px) 2 labels can be to eachother. This is set to
+// allow 2 consecutive 2-digits labels to not overlap.
+const gridLabelDistance = 20
+// The maximum number of custom line names that can be displayed in a label.
+const maxLineNamesCount = 3
+const defaultLabelColor = "#1A73E8"
+const defaultLabelTextColor = "#121212"
+
+export interface CanvasSize {
+  canvasWidth: number
+  canvasHeight: number
+}
+
+interface PositionData {
+  positions: Position[]
+  hasFirst: boolean
+  hasLast: boolean
+  names?: string[][]
+}
+
+type PositionDataWithNames = PositionData & {
+  names: string[][]
+}
+
+interface TracksPositionData {
+  positive: PositionData
+  negative: PositionData
+}
+
+interface TracksPositionDataWithNames {
+  positive: PositionDataWithNames
+  negative: PositionDataWithNames
+}
+
+interface GridPositionNormalizedData {
+  rows: TracksPositionData
+  columns: TracksPositionData
+  bounds: Bounds
+}
+
+export interface GridPositionNormalizedDataWithNames {
+  rows: TracksPositionDataWithNames
+  columns: TracksPositionDataWithNames
+  bounds: Bounds
+}
+
+interface TrackSize {
+  computedSize: number
+  authoredSize?: number
+  x: number
+  y: number
+}
+
+export interface GridHighlightOptions {
+  gridBorderDash: boolean
+  rowLineDash: boolean
+  columnLineDash: boolean
+  showGridExtensionLines: boolean
+  showPositiveLineNumbers: boolean
+  showNegativeLineNumbers: boolean
+  rowLineColor?: string
+  columnLineColor?: string
+  rowHatchColor: string
+  columnHatchColor: string
+  showLineNames: boolean
+}
+
+export interface GridHighlightConfig {
+  rotationAngle?: number
+  writingMode?: string
+  columnTrackSizes?: TrackSize[]
+  rowTrackSizes?: TrackSize[]
+  positiveRowLineNumberPositions?: Position[]
+  negativeRowLineNumberPositions?: Position[]
+  positiveColumnLineNumberPositions?: Position[]
+  negativeColumnLineNumberPositions?: Position[]
+  rowLineNameOffsets?: { name: string; x: number; y: number }[]
+  columnLineNameOffsets?: { name: string; x: number; y: number }[]
+  gridHighlightConfig?: GridHighlightOptions
+}
+
+interface LabelSize {
+  width: number
+  height: number
+  mainSize: number
+  crossSize: number
+}
+
+export interface GridLabelState {
+  gridLayerCounter: number
+}
+
+/**
+ * Places all of the required grid labels on the overlay. This includes row and
+ * column line number labels, and area labels.
+ */
+export function drawGridLabels(
+  config: GridHighlightConfig,
+  gridBounds: Bounds,
+  areaBounds: AreaBounds[],
+  canvasSize: CanvasSize,
+  labelState: GridLabelState,
+  emulationScaleFactor: number,
+  writingModeMatrix: DOMMatrix | undefined = new DOMMatrix(),
+) {
+  // Find and clear the layer for the node specified in the config, or the default layer:
+  // Each node has a layer for grid labels in order to draw multiple grid highlights
+  // at once.
+  const labelContainerId = `grid-${labelState.gridLayerCounter++}-labels`
+  let labelContainerForNode = document.getElementById(labelContainerId)
+  if (!labelContainerForNode) {
+    const mainLabelLayerContainer = document.getElementById("grid-label-container")
+    if (!mainLabelLayerContainer) {
+      throw new Error("#grid-label-container is not found")
+    }
+    labelContainerForNode = createChild(mainLabelLayerContainer, "div")
+    labelContainerForNode.id = labelContainerId
+  }
+
+  const rowColor =
+    config.gridHighlightConfig && config.gridHighlightConfig.rowLineColor
+      ? config.gridHighlightConfig.rowLineColor
+      : defaultLabelColor
+  const rowTextColor = generateLegibleTextColor(rowColor)
+
+  labelContainerForNode.style.setProperty("--row-label-color", rowColor)
+  labelContainerForNode.style.setProperty("--row-label-text-color", rowTextColor)
+
+  const columnColor =
+    config.gridHighlightConfig && config.gridHighlightConfig.columnLineColor
+      ? config.gridHighlightConfig.columnLineColor
+      : defaultLabelColor
+  const columnTextColor = generateLegibleTextColor(columnColor)
+
+  labelContainerForNode.style.setProperty("--column-label-color", columnColor)
+  labelContainerForNode.style.setProperty("--column-label-text-color", columnTextColor)
+
+  labelContainerForNode.innerText = ""
+
+  // Add the containers for the line and area to the node's layer
+  const areaNameContainer = createChild(labelContainerForNode, "div", "area-names")
+  const lineNameContainer = createChild(labelContainerForNode, "div", "line-names")
+  const lineNumberContainer = createChild(labelContainerForNode, "div", "line-numbers")
+  const trackSizesContainer = createChild(labelContainerForNode, "div", "track-sizes")
+
+  // Draw line numbers and names.
+  const normalizedData = normalizePositionData(config, gridBounds)
+  if (config.gridHighlightConfig && config.gridHighlightConfig.showLineNames) {
+    drawGridLineNames(
+      lineNameContainer,
+      normalizedData as GridPositionNormalizedDataWithNames,
+      canvasSize,
+      emulationScaleFactor,
+      writingModeMatrix,
+      config.writingMode,
+    )
+  } else {
+    drawGridLineNumbers(
+      lineNumberContainer,
+      normalizedData,
+      canvasSize,
+      emulationScaleFactor,
+      writingModeMatrix,
+      config.writingMode,
+    )
+  }
+
+  // Draw area names.
+  drawGridAreaNames(areaNameContainer, areaBounds, writingModeMatrix, config.writingMode)
+
+  if (config.columnTrackSizes) {
+    // Draw column sizes.
+    drawGridTrackSizes(
+      trackSizesContainer,
+      config.columnTrackSizes,
+      "column",
+      canvasSize,
+      emulationScaleFactor,
+      writingModeMatrix,
+      config.writingMode,
+    )
+  }
+  if (config.rowTrackSizes) {
+    // Draw row sizes.
+    drawGridTrackSizes(
+      trackSizesContainer,
+      config.rowTrackSizes,
+      "row",
+      canvasSize,
+      emulationScaleFactor,
+      writingModeMatrix,
+      config.writingMode,
+    )
+  }
+}
+
+/**
+ * This is a generator function used to iterate over grid label positions in a way
+ * that skips the ones that are too close to eachother, in order to avoid overlaps.
+ */
+function* positionIterator(
+  positions: Position[],
+  axis: "x" | "y",
+): Generator<[number, Position]> {
+  let lastEmittedPos = null
+
+  for (const [i, pos] of positions.entries()) {
+    // Only emit the position if this is the first.
+    const isFirst = i === 0
+    // Or if this is the last.
+    const isLast = i === positions.length - 1
+    // Or if there is some minimum distance between the last emitted position.
+    const isFarEnoughFromPrevious =
+      Math.abs(pos[axis] - (lastEmittedPos ? lastEmittedPos[axis] : 0)) >
+      gridLabelDistance
+    // And if there is also some minium distance from the very last position.
+    const isFarEnoughFromLast =
+      !isLast &&
+      Math.abs(positions[positions.length - 1][axis] - pos[axis]) > gridLabelDistance
+
+    if (isFirst || isLast || (isFarEnoughFromPrevious && isFarEnoughFromLast)) {
+      yield [i, pos]
+      lastEmittedPos = pos
+    }
+  }
+}
+
+const last = <T>(array: T[]) => array[array.length - 1]
+const first = <T>(array: T[]) => array[0]
+
+/**
+ * Massage the list of line name positions given by the backend for easier consumption.
+ */
+function normalizeNameData(namePositions: { name: string; x: number; y: number }[]): {
+  positions: { x: number; y: number }[]
+  names: string[][]
+} {
+  const positions = []
+  const names = []
+
+  for (const { name, x, y } of namePositions) {
+    const normalizedX = Math.round(x)
+    const normalizedY = Math.round(y)
+
+    // If the same position already exists, just add the name to the existing entry, as there can be
+    // several custom names for a single line.
+    const existingIndex = positions.findIndex(
+      ({ x, y }) => x === normalizedX && y === normalizedY,
+    )
+    if (existingIndex > -1) {
+      names[existingIndex].push(name)
+    } else {
+      positions.push({ x: normalizedX, y: normalizedY })
+      names.push([name])
+    }
+  }
+
+  return { positions, names }
+}
+
+export interface NormalizePositionDataConfig {
+  positiveRowLineNumberPositions?: Position[]
+  negativeRowLineNumberPositions?: Position[]
+  positiveColumnLineNumberPositions?: Position[]
+  negativeColumnLineNumberPositions?: Position[]
+  rowLineNameOffsets?: { name: string; x: number; y: number }[]
+  columnLineNameOffsets?: { name: string; x: number; y: number }[]
+  gridHighlightConfig?: { showLineNames: boolean }
+}
+
+/**
+ * Take the highlight config and bound objects in, and spits out an object with
+ * the same information, but with 2 key differences:
+ * - the information is organized in a way that makes the rest of the code more
+ *   readable
+ * - all pixel values are rounded to integers in order to safely compare
+ *   positions (on high-dpi monitors floats are passed by the backend, this means
+ *   checking if a position is at either edges of the container can't be done).
+ */
+export function normalizePositionData(
+  config: NormalizePositionDataConfig,
+  bounds: Bounds,
+): GridPositionNormalizedData {
+  const width = Math.round(bounds.maxX - bounds.minX)
+  const height = Math.round(bounds.maxY - bounds.minY)
+
+  const data = {
+    rows: {
+      positive: { positions: [] as Position[], hasFirst: false, hasLast: false },
+      negative: { positions: [] as Position[], hasFirst: false, hasLast: false },
+    },
+    columns: {
+      positive: { positions: [] as Position[], hasFirst: false, hasLast: false },
+      negative: { positions: [] as Position[], hasFirst: false, hasLast: false },
+    },
+    bounds: {
+      minX: Math.round(bounds.minX),
+      maxX: Math.round(bounds.maxX),
+      minY: Math.round(bounds.minY),
+      maxY: Math.round(bounds.maxY),
+      allPoints: bounds.allPoints,
+      width,
+      height,
+    },
+  }
+
+  // Line numbers and line names can't be shown together at once for now.
+  // If showLineNames is set to true, then don't show line numbers, even if the
+  // data is present.
+
+  if (config.gridHighlightConfig && config.gridHighlightConfig.showLineNames) {
+    const rowData = normalizeNameData(config.rowLineNameOffsets || [])
+    const positiveRows: PositionDataWithNames = {
+      positions: rowData.positions,
+      names: rowData.names,
+      hasFirst: rowData.positions.length
+        ? first(rowData.positions).y === data.bounds.minY
+        : false,
+      hasLast: rowData.positions.length
+        ? last(rowData.positions).y === data.bounds.maxY
+        : false,
+    }
+    data.rows.positive = positiveRows
+
+    const columnData = normalizeNameData(config.columnLineNameOffsets || [])
+    const positiveColumns: PositionDataWithNames = {
+      positions: columnData.positions,
+      names: columnData.names,
+      hasFirst: columnData.positions.length
+        ? first(columnData.positions).x === data.bounds.minX
+        : false,
+      hasLast: columnData.positions.length
+        ? last(columnData.positions).x === data.bounds.maxX
+        : false,
+    }
+    data.columns.positive = positiveColumns
+  } else {
+    const normalizeXY = ({ x, y }: { x: number; y: number }) => ({
+      x: Math.round(x),
+      y: Math.round(y),
+    })
+    // TODO (alexrudenko): hasFirst & hasLast checks won't probably work for rotated grids.
+    if (config.positiveRowLineNumberPositions) {
+      data.rows.positive = {
+        positions: config.positiveRowLineNumberPositions.map(normalizeXY),
+        hasFirst:
+          Math.round(first(config.positiveRowLineNumberPositions).y) === data.bounds.minY,
+        hasLast:
+          Math.round(last(config.positiveRowLineNumberPositions).y) === data.bounds.maxY,
+      }
+    }
+
+    if (config.negativeRowLineNumberPositions) {
+      data.rows.negative = {
+        positions: config.negativeRowLineNumberPositions.map(normalizeXY),
+        hasFirst:
+          Math.round(first(config.negativeRowLineNumberPositions).y) === data.bounds.minY,
+        hasLast:
+          Math.round(last(config.negativeRowLineNumberPositions).y) === data.bounds.maxY,
+      }
+    }
+
+    if (config.positiveColumnLineNumberPositions) {
+      data.columns.positive = {
+        positions: config.positiveColumnLineNumberPositions.map(normalizeXY),
+        hasFirst:
+          Math.round(first(config.positiveColumnLineNumberPositions).x) ===
+          data.bounds.minX,
+        hasLast:
+          Math.round(last(config.positiveColumnLineNumberPositions).x) ===
+          data.bounds.maxX,
+      }
+    }
+
+    if (config.negativeColumnLineNumberPositions) {
+      data.columns.negative = {
+        positions: config.negativeColumnLineNumberPositions.map(normalizeXY),
+        hasFirst:
+          Math.round(first(config.negativeColumnLineNumberPositions).x) ===
+          data.bounds.minX,
+        hasLast:
+          Math.round(last(config.negativeColumnLineNumberPositions).x) ===
+          data.bounds.maxX,
+      }
+    }
+  }
+
+  return data
+}
+
+/**
+ * Places the grid row and column number labels on the overlay.
+ *
+ * @param {HTMLElement} container Where to append the labels
+ * @param {GridPositionNormalizedData} data The grid line number data
+ * @param {DOMMatrix=} writingModeMatrix The transformation matrix in case a vertical writing-mode is applied, to map label positions
+ * @param {string=} writingMode The current writing-mode value
+ */
+export function drawGridLineNumbers(
+  container: HTMLElement,
+  data: GridPositionNormalizedData,
+  canvasSize: CanvasSize,
+  emulationScaleFactor: number,
+  writingModeMatrix: DOMMatrix | undefined = new DOMMatrix(),
+  writingMode: string | undefined = "horizontal-tb",
+) {
+  if (!data.columns.positive.names) {
+    for (const [i, pos] of positionIterator(data.columns.positive.positions, "x")) {
+      const element = createLabelElement(container, (i + 1).toString(), "column")
+      placePositiveColumnLabel(
+        element,
+        applyMatrixToPoint(pos, writingModeMatrix),
+        data,
+        writingMode,
+        canvasSize,
+        emulationScaleFactor,
+      )
+    }
+  }
+
+  if (!data.rows.positive.names) {
+    for (const [i, pos] of positionIterator(data.rows.positive.positions, "y")) {
+      const element = createLabelElement(container, (i + 1).toString(), "row")
+      placePositiveRowLabel(
+        element,
+        applyMatrixToPoint(pos, writingModeMatrix),
+        data,
+        writingMode,
+        canvasSize,
+        emulationScaleFactor,
+      )
+    }
+  }
+
+  for (const [i, pos] of positionIterator(data.columns.negative.positions, "x")) {
+    // Negative positions are sorted such that the first position corresponds to the line closest to start edge of the grid.
+    const element = createLabelElement(
+      container,
+      (data.columns.negative.positions.length * -1 + i).toString(),
+      "column",
+    )
+    placeNegativeColumnLabel(
+      element,
+      applyMatrixToPoint(pos, writingModeMatrix),
+      data,
+      writingMode,
+      canvasSize,
+      emulationScaleFactor,
+    )
+  }
+
+  for (const [i, pos] of positionIterator(data.rows.negative.positions, "y")) {
+    // Negative positions are sorted such that the first position corresponds to the line closest to start edge of the grid.
+    const element = createLabelElement(
+      container,
+      (data.rows.negative.positions.length * -1 + i).toString(),
+      "row",
+    )
+    placeNegativeRowLabel(
+      element,
+      applyMatrixToPoint(pos, writingModeMatrix),
+      data,
+      writingMode,
+      canvasSize,
+      emulationScaleFactor,
+    )
+  }
+}
+
+/**
+ * Places the grid track size labels on the overlay.
+ */
+export function drawGridTrackSizes(
+  container: HTMLElement,
+  trackSizes: Array<TrackSize>,
+  direction: "row" | "column",
+  canvasSize: CanvasSize,
+  emulationScaleFactor: number,
+  writingModeMatrix: DOMMatrix | undefined = new DOMMatrix(),
+  writingMode: string | undefined = "horizontal-tb",
+) {
+  const { main, cross } = getAxes(writingMode)
+  const { crossSize } = getCanvasSizes(writingMode, canvasSize)
+
+  for (const { x, y, computedSize, authoredSize } of trackSizes) {
+    const point = applyMatrixToPoint({ x, y }, writingModeMatrix)
+
+    const size = computedSize.toFixed(2)
+    const formattedComputed = `${size.endsWith(".00") ? size.slice(0, -3) : size}px`
+    const element = createLabelElement(
+      container,
+      `${authoredSize ? authoredSize + "·" : ""}${formattedComputed}`,
+      direction,
+    )
+    const labelSize = getLabelSize(element, writingMode)
+
+    let flipIn = point[main] - labelSize.mainSize < gridPageMargin
+    if (direction === "column") {
+      flipIn =
+        writingMode === "vertical-rl"
+          ? crossSize - point[cross] - labelSize.crossSize < gridPageMargin
+          : point[cross] - labelSize.crossSize < gridPageMargin
+    }
+
+    let arrowType = adaptArrowTypeForWritingMode(
+      direction === "column" ? GridArrowTypes.bottomMid : GridArrowTypes.rightMid,
+      writingMode,
+    )
+    arrowType = flipArrowTypeIfNeeded(arrowType, flipIn)
+
+    placeLineLabel(element, arrowType, point.x, point.y, labelSize, emulationScaleFactor)
+  }
+}
+
+/**
+ * Places the grid row and column name labels on the overlay.
+ */
+export function drawGridLineNames(
+  container: HTMLElement,
+  data: GridPositionNormalizedDataWithNames,
+  canvasSize: CanvasSize,
+  emulationScaleFactor: number,
+  writingModeMatrix: DOMMatrix | undefined = new DOMMatrix(),
+  writingMode: string | undefined = "horizontal-tb",
+) {
+  for (const [i, pos] of data.columns.positive.positions.entries()) {
+    const names = data.columns.positive.names[i]
+    const element = createLabelElement(
+      container,
+      makeLineNameLabelContent(names),
+      "column",
+    )
+    placePositiveColumnLabel(
+      element,
+      applyMatrixToPoint(pos, writingModeMatrix),
+      data,
+      writingMode,
+      canvasSize,
+      emulationScaleFactor,
+    )
+  }
+
+  for (const [i, pos] of data.rows.positive.positions.entries()) {
+    const names = data.rows.positive.names[i]
+    const element = createLabelElement(container, makeLineNameLabelContent(names), "row")
+    placePositiveRowLabel(
+      element,
+      applyMatrixToPoint(pos, writingModeMatrix),
+      data,
+      writingMode,
+      canvasSize,
+      emulationScaleFactor,
+    )
+  }
+}
+
+/**
+ * Turn an array of custom line names into DOM content that can be used in a label.
+ */
+function makeLineNameLabelContent(names: string[]): HTMLElement {
+  const content = document.createElement("ul")
+  const namesToDisplay = names.slice(0, maxLineNamesCount)
+
+  for (const name of namesToDisplay) {
+    createChild(content, "li", "line-name").textContent = name
+  }
+
+  return content
+}
+
+/**
+ * Places the grid area name labels on the overlay.
+ */
+export function drawGridAreaNames(
+  container: HTMLElement,
+  areaBounds: AreaBounds[],
+  writingModeMatrix: DOMMatrix | undefined = new DOMMatrix(),
+  writingMode: string | undefined = "horizontal-tb",
+) {
+  for (const { name, bounds } of areaBounds) {
+    const element = createLabelElement(container, name, "row")
+    const { width, height } = getLabelSize(element, writingMode)
+
+    // The list of all points comes from the path created by the backend. This path is a rectangle with its starting point being
+    // the top left corner, which is where we want to place the label (except for vertical-rl writing-mode).
+    const point =
+      writingMode === "vertical-rl" ? bounds.allPoints[3] : bounds.allPoints[0]
+    const corner = applyMatrixToPoint(point, writingModeMatrix)
+
+    const flipX = bounds.allPoints[1].x < bounds.allPoints[0].x
+    const flipY = bounds.allPoints[3].y < bounds.allPoints[0].y
+    element.style.left = corner.x - (flipX ? width : 0) + "px"
+    element.style.top = corner.y - (flipY ? height : 0) + "px"
+  }
+}
+
+/**
+ * Create the necessary DOM for a single label element.
+ */
+function createLabelElement(
+  container: HTMLElement,
+  textContent: string | HTMLElement,
+  direction: "row" | "column",
+): HTMLElement {
+  const wrapper = createChild(container, "div")
+  const element = createChild(wrapper, "div", "grid-label-content")
+  element.dataset.direction = direction
+
+  if (typeof textContent === "string") {
+    element.textContent = textContent
+  } else {
+    element.appendChild(textContent)
+  }
+
+  return element
+}
+
+/**
+ * Get the start and end points of the edge where labels are displayed.
+ */
+function getLabelSideEdgePoints(
+  gridBounds: Bounds,
+  direction: string,
+  side: string,
+): { start: { x: number; y: number }; end: { x: number; y: number } } {
+  const [p1, p2, p3, p4] = gridBounds.allPoints
+
+  // Here are where all the points are in standard, untransformed, horizontal-tb mode:
+  // p1                        p2
+  //   +----------------------+
+  //   |                      |
+  //   +----------------------+
+  // p4                        p3
+
+  if (direction === "row") {
+    return side === "positive" ? { start: p1, end: p4 } : { start: p2, end: p3 }
+  }
+
+  return side === "positive" ? { start: p1, end: p2 } : { start: p4, end: p3 }
+}
+
+/**
+ * Get the name of the main and cross axes depending on the writing mode.
+ * In "normal" horizonta-tb mode, the main axis is the one that goes horizontally from left to right,
+ * hence, the x axis.
+ * In vertical writing modes, the axes are swapped.
+ */
+function getAxes(writingMode: string): { main: "x" | "y"; cross: "x" | "y" } {
+  return writingMode.startsWith("vertical")
+    ? { main: "y", cross: "x" }
+    : { main: "x", cross: "y" }
+}
+
+/**
+ * Get the main and cross sizes of the canvas area depending on the writing mode.
+ * In "normal" horizonta-tb mode, the main axis is the one that goes horizontally from left to right,
+ * hence, the main size of the canvas is its width, and its cross size is its height.
+ * In vertical writing modes, those sizes are swapped.
+ */
+function getCanvasSizes(
+  writingMode: string,
+  canvasSize: CanvasSize,
+): { mainSize: number; crossSize: number } {
+  return writingMode.startsWith("vertical")
+    ? { mainSize: canvasSize.canvasHeight, crossSize: canvasSize.canvasWidth }
+    : { mainSize: canvasSize.canvasWidth, crossSize: canvasSize.canvasHeight }
+}
+
+/**
+ * Determine the position of a positive row label, and place it.
+ */
+function placePositiveRowLabel(
+  element: HTMLElement,
+  pos: Position,
+  data: GridPositionNormalizedData,
+  writingMode: string,
+  canvasSize: CanvasSize,
+  emulationScaleFactor: number,
+) {
+  const { start, end } = getLabelSideEdgePoints(data.bounds, "row", "positive")
+  const { main, cross } = getAxes(writingMode)
+  const { crossSize } = getCanvasSizes(writingMode, canvasSize)
+  const labelSize = getLabelSize(element, writingMode)
+
+  const isAtSharedStartCorner =
+    pos[cross] === start[cross] && data.columns && data.columns.positive.hasFirst
+  const isAtSharedEndCorner =
+    pos[cross] === end[cross] && data.columns && data.columns.negative.hasFirst
+  const isTooCloseToViewportStart = pos[cross] < gridPageMargin
+  const isTooCloseToViewportEnd = crossSize - pos[cross] < gridPageMargin
+  const flipIn = pos[main] - labelSize.mainSize < gridPageMargin
+
+  if (flipIn && (isAtSharedStartCorner || isAtSharedEndCorner)) {
+    element.classList.add("inner-shared-corner")
+  }
+
+  let arrowType = adaptArrowTypeForWritingMode(GridArrowTypes.rightMid, writingMode)
+  if (isTooCloseToViewportStart || isAtSharedStartCorner) {
+    arrowType = adaptArrowTypeForWritingMode(GridArrowTypes.rightTop, writingMode)
+  } else if (isTooCloseToViewportEnd || isAtSharedEndCorner) {
+    arrowType = adaptArrowTypeForWritingMode(GridArrowTypes.rightBottom, writingMode)
+  }
+  arrowType = flipArrowTypeIfNeeded(arrowType, flipIn)
+
+  placeLineLabel(element, arrowType, pos.x, pos.y, labelSize, emulationScaleFactor)
+}
+
+/**
+ * Determine the position of a negative row label, and place it.
+ */
+function placeNegativeRowLabel(
+  element: HTMLElement,
+  pos: Position,
+  data: GridPositionNormalizedData,
+  writingMode: string,
+  canvasSize: CanvasSize,
+  emulationScaleFactor: number,
+) {
+  const { start, end } = getLabelSideEdgePoints(data.bounds, "row", "negative")
+  const { main, cross } = getAxes(writingMode)
+  const { mainSize, crossSize } = getCanvasSizes(writingMode, canvasSize)
+  const labelSize = getLabelSize(element, writingMode)
+
+  const isAtSharedStartCorner =
+    pos[cross] === start[cross] && data.columns && data.columns.positive.hasLast
+  const isAtSharedEndCorner =
+    pos[cross] === end[cross] && data.columns && data.columns.negative.hasLast
+  const isTooCloseToViewportStart = pos[cross] < gridPageMargin
+  const isTooCloseToViewportEnd = crossSize - pos[cross] < gridPageMargin
+  const flipIn = mainSize - pos[main] - labelSize.mainSize < gridPageMargin
+
+  if (flipIn && (isAtSharedStartCorner || isAtSharedEndCorner)) {
+    element.classList.add("inner-shared-corner")
+  }
+
+  let arrowType = adaptArrowTypeForWritingMode(GridArrowTypes.leftMid, writingMode)
+  if (isTooCloseToViewportStart || isAtSharedStartCorner) {
+    arrowType = adaptArrowTypeForWritingMode(GridArrowTypes.leftTop, writingMode)
+  } else if (isTooCloseToViewportEnd || isAtSharedEndCorner) {
+    arrowType = adaptArrowTypeForWritingMode(GridArrowTypes.leftBottom, writingMode)
+  }
+  arrowType = flipArrowTypeIfNeeded(arrowType, flipIn)
+
+  placeLineLabel(element, arrowType, pos.x, pos.y, labelSize, emulationScaleFactor)
+}
+
+/**
+ * Determine the position of a positive column label, and place it.
+ */
+function placePositiveColumnLabel(
+  element: HTMLElement,
+  pos: Position,
+  data: GridPositionNormalizedData,
+  writingMode: string,
+  canvasSize: CanvasSize,
+  emulationScaleFactor: number,
+) {
+  const { start, end } = getLabelSideEdgePoints(data.bounds, "column", "positive")
+  const { main, cross } = getAxes(writingMode)
+  const { mainSize, crossSize } = getCanvasSizes(writingMode, canvasSize)
+  const labelSize = getLabelSize(element, writingMode)
+
+  const isAtSharedStartCorner =
+    pos[main] === start[main] && data.rows && data.rows.positive.hasFirst
+  const isAtSharedEndCorner =
+    pos[main] === end[main] && data.rows && data.rows.negative.hasFirst
+  const isTooCloseToViewportStart = pos[main] < gridPageMargin
+  const isTooCloseToViewportEnd = mainSize - pos[main] < gridPageMargin
+  const flipIn =
+    writingMode === "vertical-rl"
+      ? crossSize - pos[cross] - labelSize.crossSize < gridPageMargin
+      : pos[cross] - labelSize.crossSize < gridPageMargin
+
+  if (flipIn && (isAtSharedStartCorner || isAtSharedEndCorner)) {
+    element.classList.add("inner-shared-corner")
+  }
+
+  let arrowType = adaptArrowTypeForWritingMode(GridArrowTypes.bottomMid, writingMode)
+  if (isTooCloseToViewportStart) {
+    arrowType = adaptArrowTypeForWritingMode(GridArrowTypes.bottomLeft, writingMode)
+  } else if (isTooCloseToViewportEnd) {
+    arrowType = adaptArrowTypeForWritingMode(GridArrowTypes.bottomRight, writingMode)
+  }
+
+  arrowType = flipArrowTypeIfNeeded(arrowType, flipIn)
+
+  placeLineLabel(element, arrowType, pos.x, pos.y, labelSize, emulationScaleFactor)
+}
+
+/**
+ * Determine the position of a negative column label, and place it.
+ */
+function placeNegativeColumnLabel(
+  element: HTMLElement,
+  pos: Position,
+  data: GridPositionNormalizedData,
+  writingMode: string,
+  canvasSize: CanvasSize,
+  emulationScaleFactor: number,
+) {
+  const { start, end } = getLabelSideEdgePoints(data.bounds, "column", "negative")
+  const { main, cross } = getAxes(writingMode)
+  const { mainSize, crossSize } = getCanvasSizes(writingMode, canvasSize)
+  const labelSize = getLabelSize(element, writingMode)
+
+  const isAtSharedStartCorner =
+    pos[main] === start[main] && data.rows && data.rows.positive.hasLast
+  const isAtSharedEndCorner =
+    pos[main] === end[main] && data.rows && data.rows.negative.hasLast
+  const isTooCloseToViewportStart = pos[main] < gridPageMargin
+  const isTooCloseToViewportEnd = mainSize - pos[main] < gridPageMargin
+  const flipIn =
+    writingMode === "vertical-rl"
+      ? pos[cross] - labelSize.crossSize < gridPageMargin
+      : crossSize - pos[cross] - labelSize.crossSize < gridPageMargin
+
+  if (flipIn && (isAtSharedStartCorner || isAtSharedEndCorner)) {
+    element.classList.add("inner-shared-corner")
+  }
+
+  let arrowType = adaptArrowTypeForWritingMode(GridArrowTypes.topMid, writingMode)
+  if (isTooCloseToViewportStart) {
+    arrowType = adaptArrowTypeForWritingMode(GridArrowTypes.topLeft, writingMode)
+  } else if (isTooCloseToViewportEnd) {
+    arrowType = adaptArrowTypeForWritingMode(GridArrowTypes.topRight, writingMode)
+  }
+  arrowType = flipArrowTypeIfNeeded(arrowType, flipIn)
+
+  placeLineLabel(element, arrowType, pos.x, pos.y, labelSize, emulationScaleFactor)
+}
+
+/**
+ * Correctly place a line label element in the page. The given coordinates are
+ * the ones where the arrow of the label needs to point.
+ * Therefore, the width of the text in the label, and the position of the arrow
+ * relative to the label are taken into account here to calculate the final x
+ * and y coordinates of the label DOM element.
+ */
+function placeLineLabel(
+  element: HTMLElement,
+  arrowType: string,
+  x: number,
+  y: number,
+  labelSize: LabelSize,
+  emulationScaleFactor: number,
+) {
+  const { contentLeft, contentTop } = getLabelPositionByArrowType(
+    arrowType,
+    x,
+    y,
+    labelSize.width,
+    labelSize.height,
+    emulationScaleFactor,
+  )
+
+  element.classList.add(arrowType)
+  element.style.left = contentLeft + "px"
+  element.style.top = contentTop + "px"
+}
+
+/**
+ * Given a label element, return its width and height, as well as what the main and cross sizes are depending on
+ * the current writing mode.
+ */
+function getLabelSize(element: HTMLElement, writingMode: string): LabelSize {
+  const width = getAdjustedLabelWidth(element)
+  const { height } = element.getBoundingClientRect()
+  const mainSize = writingMode.startsWith("vertical") ? height : width
+  const crossSize = writingMode.startsWith("vertical") ? width : height
+
+  return { width, height, mainSize, crossSize }
+}
+
+/**
+ * Forces the width of the provided grid label element to be an even
+ * number of pixels to allow centered placement of the arrow
+ */
+function getAdjustedLabelWidth(element: HTMLElement) {
+  let labelWidth = element.getBoundingClientRect().width
+  if (labelWidth % 2 === 1) {
+    labelWidth += 1
+    element.style.width = labelWidth + "px"
+  }
+  return labelWidth
+}
+
+/**
+ * In some cases, a label doesn't fit where it's supposed to be displayed.
+ * This happens when it's too close to the edge of the viewport. When it does,
+ * the label's position is flipped so that instead of being outside the grid, it
+ * moves inside the grid.
+ *
+ * Example of a leftMid arrowType, which is by default outside the grid:
+ *  -----------------------------
+ * |                             |   +------+
+ * |                             |   |      |
+ * |-----------------------------|  <       |
+ * |                             |   |      |
+ * |                             |   +------+
+ *  -----------------------------
+ * When flipped, the label will be drawn inside the grid, so the arrow now needs
+ * to point the other way:
+ *  -----------------------------
+ * |                  +------+   |
+ * |                  |      |   |
+ * |------------------|       >--|
+ * |                  |      |   |
+ * |                  +------+   |
+ *  -----------------------------
+ */
+function flipArrowTypeIfNeeded(arrowType: string, flipIn: boolean): string {
+  if (!flipIn) {
+    return arrowType
+  }
+
+  switch (arrowType) {
+    case GridArrowTypes.leftTop:
+      return GridArrowTypes.rightTop
+    case GridArrowTypes.leftMid:
+      return GridArrowTypes.rightMid
+    case GridArrowTypes.leftBottom:
+      return GridArrowTypes.rightBottom
+    case GridArrowTypes.rightTop:
+      return GridArrowTypes.leftTop
+    case GridArrowTypes.rightMid:
+      return GridArrowTypes.leftMid
+    case GridArrowTypes.rightBottom:
+      return GridArrowTypes.leftBottom
+    case GridArrowTypes.topLeft:
+      return GridArrowTypes.bottomLeft
+    case GridArrowTypes.topMid:
+      return GridArrowTypes.bottomMid
+    case GridArrowTypes.topRight:
+      return GridArrowTypes.bottomRight
+    case GridArrowTypes.bottomLeft:
+      return GridArrowTypes.topLeft
+    case GridArrowTypes.bottomMid:
+      return GridArrowTypes.topMid
+    case GridArrowTypes.bottomRight:
+      return GridArrowTypes.topRight
+  }
+
+  return arrowType
+}
+
+/**
+ * Given an arrow type for the standard horizontal-tb writing-mode, return the corresponding type for a differnet
+ * writing-mode.
+ */
+function adaptArrowTypeForWritingMode(arrowType: string, writingMode: string): string {
+  if (writingMode === "vertical-lr") {
+    switch (arrowType) {
+      case GridArrowTypes.leftTop:
+        return GridArrowTypes.topLeft
+      case GridArrowTypes.leftMid:
+        return GridArrowTypes.topMid
+      case GridArrowTypes.leftBottom:
+        return GridArrowTypes.topRight
+      case GridArrowTypes.topLeft:
+        return GridArrowTypes.leftTop
+      case GridArrowTypes.topMid:
+        return GridArrowTypes.leftMid
+      case GridArrowTypes.topRight:
+        return GridArrowTypes.leftBottom
+      case GridArrowTypes.rightTop:
+        return GridArrowTypes.bottomRight
+      case GridArrowTypes.rightMid:
+        return GridArrowTypes.bottomMid
+      case GridArrowTypes.rightBottom:
+        return GridArrowTypes.bottomLeft
+      case GridArrowTypes.bottomLeft:
+        return GridArrowTypes.rightTop
+      case GridArrowTypes.bottomMid:
+        return GridArrowTypes.rightMid
+      case GridArrowTypes.bottomRight:
+        return GridArrowTypes.rightBottom
+    }
+  }
+
+  if (writingMode === "vertical-rl") {
+    switch (arrowType) {
+      case GridArrowTypes.leftTop:
+        return GridArrowTypes.topRight
+      case GridArrowTypes.leftMid:
+        return GridArrowTypes.topMid
+      case GridArrowTypes.leftBottom:
+        return GridArrowTypes.topLeft
+      case GridArrowTypes.topLeft:
+        return GridArrowTypes.rightTop
+      case GridArrowTypes.topMid:
+        return GridArrowTypes.rightMid
+      case GridArrowTypes.topRight:
+        return GridArrowTypes.rightBottom
+      case GridArrowTypes.rightTop:
+        return GridArrowTypes.bottomRight
+      case GridArrowTypes.rightMid:
+        return GridArrowTypes.bottomMid
+      case GridArrowTypes.rightBottom:
+        return GridArrowTypes.bottomLeft
+      case GridArrowTypes.bottomLeft:
+        return GridArrowTypes.leftTop
+      case GridArrowTypes.bottomMid:
+        return GridArrowTypes.leftMid
+      case GridArrowTypes.bottomRight:
+        return GridArrowTypes.leftBottom
+    }
+  }
+
+  return arrowType
+}
+
+/**
+ * Returns the required properties needed to place a label arrow based on the
+ * arrow type and dimensions of the label
+ */
+function getLabelPositionByArrowType(
+  arrowType: string,
+  x: number,
+  y: number,
+  labelWidth: number,
+  labelHeight: number,
+  emulationScaleFactor: number,
+): { contentTop: number; contentLeft: number } {
+  let contentTop = 0
+  let contentLeft = 0
+  x *= emulationScaleFactor
+  y *= emulationScaleFactor
+  switch (arrowType) {
+    case GridArrowTypes.leftTop:
+      contentTop = y
+      contentLeft = x + gridArrowWidth
+      break
+    case GridArrowTypes.leftMid:
+      contentTop = y - labelHeight / 2
+      contentLeft = x + gridArrowWidth
+      break
+    case GridArrowTypes.leftBottom:
+      contentTop = y - labelHeight
+      contentLeft = x + gridArrowWidth
+      break
+    case GridArrowTypes.rightTop:
+      contentTop = y
+      contentLeft = x - gridArrowWidth - labelWidth
+      break
+    case GridArrowTypes.rightMid:
+      contentTop = y - labelHeight / 2
+      contentLeft = x - gridArrowWidth - labelWidth
+      break
+    case GridArrowTypes.rightBottom:
+      contentTop = y - labelHeight
+      contentLeft = x - labelWidth - gridArrowWidth
+      break
+    case GridArrowTypes.topLeft:
+      contentTop = y + gridArrowWidth
+      contentLeft = x
+      break
+    case GridArrowTypes.topMid:
+      contentTop = y + gridArrowWidth
+      contentLeft = x - labelWidth / 2
+      break
+    case GridArrowTypes.topRight:
+      contentTop = y + gridArrowWidth
+      contentLeft = x - labelWidth
+      break
+    case GridArrowTypes.bottomLeft:
+      contentTop = y - gridArrowWidth - labelHeight
+      contentLeft = x
+      break
+    case GridArrowTypes.bottomMid:
+      contentTop = y - gridArrowWidth - labelHeight
+      contentLeft = x - labelWidth / 2
+      break
+    case GridArrowTypes.bottomRight:
+      contentTop = y - gridArrowWidth - labelHeight
+      contentLeft = x - labelWidth
+      break
+  }
+  return {
+    contentTop,
+    contentLeft,
+  }
+}
+
+/**
+ * Given a background color, generate a color for text to be legible.
+ * This assumes the background color is given as either a "rgba(r, g, b, a)" string or a #rrggbb string.
+ * This is because colors are sent by the backend using blink::Color:Serialized() which follows the logic for
+ * serializing colors from https://html.spec.whatwg.org/#serialization-of-a-color
+ *
+ * In rgba form, the alpha channel is ignored.
+ *
+ * This is made to be small and fast and not require importing the entire Color utility from DevTools as it would make
+ * the overlay bundle unnecessarily big.
+ *
+ * This is also made to generate the defaultLabelTextColor for all of the default label colors that the
+ * OverlayColorGenerator produces.
+ */
+export function generateLegibleTextColor(backgroundColor: string) {
+  let rgb: number[] = []
+
+  // Try to parse it as a #rrggbbaa string first
+  const rgba = parseHexa(backgroundColor + "00")
+  if (rgba.length === 4) {
+    rgb = rgba.slice(0, 3).map(c => c)
+  } else {
+    // Next try to parse as a rgba() string
+    const parsed = backgroundColor.match(/[0-9.]+/g)
+    if (!parsed) {
+      return null
+    }
+    rgb = parsed.slice(0, 3).map(s => parseInt(s, 10) / 255)
+  }
+
+  if (!rgb.length) {
+    return null
+  }
+
+  return luminance(rgb) > 0.2 ? defaultLabelTextColor : "white"
+}
diff --git a/src/vendor/dom-highlighter/src/overlay/highlightCommon.ts b/src/vendor/dom-highlighter/src/overlay/highlightCommon.ts
new file mode 100644
index 0000000..7086556
--- /dev/null
+++ b/src/vendor/dom-highlighter/src/overlay/highlightCommon.ts
@@ -0,0 +1,346 @@
+import { rgbaToHsla } from "./ColorUtils"
+
+import type { Bounds, PathCommands, Quad } from "./common"
+
+export type PathBounds = Bounds & {
+  leftmostXForY: { [key: string]: number }
+  rightmostXForY: { [key: string]: number }
+  topmostYForX: { [key: string]: number }
+  bottommostYForX: { [key: string]: number }
+}
+
+export interface LineStyle {
+  color?: string
+  pattern?: LinePattern
+}
+
+export interface BoxStyle {
+  fillColor?: string
+  hatchColor?: string
+}
+
+export const enum LinePattern {
+  Solid = "solid",
+  Dotted = "dotted",
+  Dashed = "dashed",
+}
+
+export function drawPathWithLineStyle(
+  context: CanvasRenderingContext2D,
+  path: Path2D,
+  lineStyle?: LineStyle,
+  lineWidth = 1,
+) {
+  if (lineStyle && lineStyle.color) {
+    context.save()
+    context.translate(0.5, 0.5)
+    context.lineWidth = lineWidth
+    if (lineStyle.pattern === LinePattern.Dashed) {
+      context.setLineDash([3, 3])
+    }
+    if (lineStyle.pattern === LinePattern.Dotted) {
+      context.setLineDash([2, 2])
+    }
+    context.strokeStyle = lineStyle.color
+    context.stroke(path)
+    context.restore()
+  }
+}
+
+export function fillPathWithBoxStyle(
+  context: CanvasRenderingContext2D,
+  path: Path2D,
+  bounds: PathBounds,
+  angle: number,
+  boxStyle?: BoxStyle,
+) {
+  if (!boxStyle) {
+    return
+  }
+
+  context.save()
+  if (boxStyle.fillColor) {
+    context.fillStyle = boxStyle.fillColor
+    context.fill(path)
+  }
+  if (boxStyle.hatchColor) {
+    hatchFillPath(context, path, bounds, 10, boxStyle.hatchColor, angle, false)
+  }
+  context.restore()
+}
+
+export function buildPath(
+  commands: Array<string | number>,
+  bounds: PathBounds,
+  emulationScaleFactor: number,
+): Path2D {
+  let commandsIndex = 0
+
+  function extractPoints(count: number): number[] {
+    const points = []
+
+    for (let i = 0; i < count; ++i) {
+      const x = Math.round((commands[commandsIndex++] as number) * emulationScaleFactor)
+      bounds.maxX = Math.max(bounds.maxX, x)
+      bounds.minX = Math.min(bounds.minX, x)
+
+      const y = Math.round((commands[commandsIndex++] as number) * emulationScaleFactor)
+      bounds.maxY = Math.max(bounds.maxY, y)
+      bounds.minY = Math.min(bounds.minY, y)
+
+      bounds.leftmostXForY[y] = Math.min(bounds.leftmostXForY[y] || Number.MAX_VALUE, x)
+      bounds.rightmostXForY[y] = Math.max(bounds.rightmostXForY[y] || Number.MIN_VALUE, x)
+      bounds.topmostYForX[x] = Math.min(bounds.topmostYForX[x] || Number.MAX_VALUE, y)
+      bounds.bottommostYForX[x] = Math.max(
+        bounds.bottommostYForX[x] || Number.MIN_VALUE,
+        y,
+      )
+
+      bounds.allPoints.push({ x, y })
+
+      points.push(x, y)
+    }
+
+    return points
+  }
+
+  const commandsLength = commands.length
+  const path = new Path2D()
+  while (commandsIndex < commandsLength) {
+    switch (commands[commandsIndex++]) {
+      case "M":
+        path.moveTo(...(extractPoints(1) as [number, number]))
+        break
+      case "L":
+        path.lineTo(...(extractPoints(1) as [number, number]))
+        break
+      case "C":
+        path.bezierCurveTo(
+          ...(extractPoints(3) as [number, number, number, number, number, number]),
+        )
+        break
+      case "Q":
+        path.quadraticCurveTo(...(extractPoints(2) as [number, number, number, number]))
+        break
+      case "Z":
+        path.closePath()
+        break
+    }
+  }
+
+  return path
+}
+
+export function emptyBounds(): PathBounds {
+  const bounds = {
+    minX: Number.MAX_VALUE,
+    minY: Number.MAX_VALUE,
+    maxX: -Number.MAX_VALUE,
+    maxY: -Number.MAX_VALUE,
+    leftmostXForY: {},
+    rightmostXForY: {},
+    topmostYForX: {},
+    bottommostYForX: {},
+    allPoints: [],
+  }
+  return bounds
+}
+
+export function applyMatrixToPoint(
+  point: { x: number; y: number },
+  matrix: DOMMatrix,
+): { x: number; y: number } {
+  let domPoint = new DOMPoint(point.x, point.y)
+  domPoint = domPoint.matrixTransform(matrix)
+  return { x: domPoint.x, y: domPoint.y }
+}
+
+const HATCH_LINE_LENGTH = 5
+const HATCH_LINE_GAP = 3
+let hatchLinePattern: CanvasPattern
+let hatchLineColor = ""
+
+/**
+ * Draw line hatching at a 45 degree angle for a given
+ * path.
+ *   __________
+ *   |\  \  \ |
+ *   | \  \  \|
+ *   |  \  \  |
+ *   |\  \  \ |
+ *   **********
+ */
+export function hatchFillPath(
+  context: CanvasRenderingContext2D,
+  path: Path2D,
+  bounds: Bounds,
+  delta: number,
+  color: string,
+  rotationAngle: number,
+  flipDirection: boolean | undefined,
+) {
+  // Make the bounds be at most the canvas size if it is bigger in any direction.
+  // Making the bounds bigger than the canvas is useless as what's drawn there won't be visible.
+  if (
+    context.canvas.width < bounds.maxX - bounds.minX ||
+    context.canvas.height < bounds.maxY - bounds.minY
+  ) {
+    bounds = {
+      minX: 0,
+      maxX: context.canvas.width,
+      minY: 0,
+      maxY: context.canvas.height,
+      allPoints: [],
+    }
+  }
+
+  // If we haven't done it yet, initialize an offscreen canvas used to create the dashed line repeated pattern.
+  if (!hatchLinePattern || color !== hatchLineColor) {
+    hatchLineColor = color
+
+    const offscreenCanvas = document.createElement("canvas")
+    offscreenCanvas.width = delta
+    offscreenCanvas.height = HATCH_LINE_LENGTH + HATCH_LINE_GAP
+
+    const offscreenCtx = offscreenCanvas.getContext("2d") as CanvasRenderingContext2D
+    offscreenCtx.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height)
+    offscreenCtx.rect(0, 0, 1, HATCH_LINE_LENGTH)
+    offscreenCtx.fillStyle = color
+    offscreenCtx.fill()
+
+    hatchLinePattern = context.createPattern(offscreenCanvas, "repeat") as CanvasPattern
+  }
+
+  context.save()
+
+  const matrix = new DOMMatrix()
+  hatchLinePattern.setTransform(
+    matrix.scale(flipDirection ? -1 : 1, 1).rotate(0, 0, -45 + rotationAngle),
+  )
+
+  context.fillStyle = hatchLinePattern
+  context.fill(path)
+
+  context.restore()
+}
+
+/**
+ * Given a quad, create the corresponding path object. This also accepts a list of quads to clip from the resulting
+ * path.
+ */
+export function createPathForQuad(
+  outerQuad: Quad,
+  quadsToClip: Quad[],
+  bounds: PathBounds,
+  emulationScaleFactor: number,
+) {
+  let commands = [
+    "M",
+    outerQuad.p1.x,
+    outerQuad.p1.y,
+    "L",
+    outerQuad.p2.x,
+    outerQuad.p2.y,
+    "L",
+    outerQuad.p3.x,
+    outerQuad.p3.y,
+    "L",
+    outerQuad.p4.x,
+    outerQuad.p4.y,
+  ]
+  for (const quad of quadsToClip) {
+    commands = [
+      ...commands,
+      "L",
+      quad.p4.x,
+      quad.p4.y,
+      "L",
+      quad.p3.x,
+      quad.p3.y,
+      "L",
+      quad.p2.x,
+      quad.p2.y,
+      "L",
+      quad.p1.x,
+      quad.p1.y,
+      "L",
+      quad.p4.x,
+      quad.p4.y,
+      "L",
+      outerQuad.p4.x,
+      outerQuad.p4.y,
+    ]
+  }
+  commands.push("Z")
+
+  return buildPath(commands, bounds, emulationScaleFactor)
+}
+
+export function parseHexa(hexa: string): Array<number> {
+  return (hexa.match(/#(\w\w)(\w\w)(\w\w)(\w\w)/) || [])
+    .slice(1)
+    .map(c => parseInt(c, 16) / 255)
+}
+
+export function formatRgba(rgba: number[], colorFormat: "rgb" | "hsl"): string {
+  if (colorFormat === "rgb") {
+    const [r, g, b, a] = rgba
+    // rgb(r g b [ / a])
+    return `rgb(${(r * 255).toFixed()} ${(g * 255).toFixed()} ${(b * 255).toFixed()}${
+      a === 1 ? "" : " / " + Math.round(a * 100) / 100
+    })`
+  }
+
+  if (colorFormat === "hsl") {
+    const [h, s, l, a] = rgbaToHsla(rgba)
+    // hsl(hdeg s l [ / a])
+    return `hsl(${Math.round(h * 360)}deg ${Math.round(s * 100)} ${Math.round(l * 100)}${
+      a === 1 ? "" : " / " + Math.round(a * 100) / 100
+    })`
+  }
+
+  throw new Error("NOT_REACHED")
+}
+
+export function formatColor(hexa: string, colorFormat: string): string {
+  if (colorFormat === "rgb" || colorFormat === "hsl") {
+    return formatRgba(parseHexa(hexa), colorFormat)
+  }
+
+  if (hexa.endsWith("FF")) {
+    // short hex if no alpha
+    return hexa.substr(0, 7)
+  }
+
+  return hexa
+}
+
+export function drawPath(
+  context: CanvasRenderingContext2D,
+  commands: PathCommands,
+  fillColor: string | undefined,
+  outlineColor: string | undefined,
+  outlinePattern: LinePattern | undefined,
+  bounds: PathBounds,
+  emulationScaleFactor: number,
+) {
+  context.save()
+  const path = buildPath(commands, bounds, emulationScaleFactor)
+  if (fillColor) {
+    context.fillStyle = fillColor
+    context.fill(path)
+  }
+  if (outlineColor) {
+    if (outlinePattern === LinePattern.Dashed) {
+      context.setLineDash([3, 3])
+    }
+    if (outlinePattern === LinePattern.Dotted) {
+      context.setLineDash([2, 2])
+    }
+    context.lineWidth = 2
+    context.strokeStyle = outlineColor
+    context.stroke(path)
+  }
+  context.restore()
+  return path
+}
diff --git a/src/vendor/dom-highlighter/src/overlay/toolHighlight.ts b/src/vendor/dom-highlighter/src/overlay/toolHighlight.ts
new file mode 100644
index 0000000..0b1bdfc
--- /dev/null
+++ b/src/vendor/dom-highlighter/src/overlay/toolHighlight.ts
@@ -0,0 +1,724 @@
+import {
+  contrastRatio,
+  contrastRatioAPCA,
+  getAPCAThreshold,
+  getContrastThreshold,
+} from "./ColorUtils"
+import type { Bounds, PathCommands, ResetData } from "./common"
+import {
+  Overlay,
+  constrainNumber,
+  createChild,
+  createElement,
+  createTextChild,
+  ellipsify,
+} from "./common"
+import type { PathBounds } from "./highlightCommon"
+import {
+  drawPath,
+  emptyBounds,
+  formatColor,
+  formatRgba,
+  parseHexa,
+} from "./highlightCommon"
+
+export interface Path {
+  path: PathCommands
+  outlineColor?: string
+  fillColor: string
+  name: string
+}
+
+interface ContrastInfo {
+  backgroundColor: string
+  fontSize: string
+  fontWeight: string
+  contrastAlgorithm: "apca" | "aa" | "aaa"
+  textOpacity: number
+}
+
+export interface ElementInfo {
+  contrast?: ContrastInfo
+  tagName: string
+  idValue?: string
+  className?: string
+  nodeWidth: number
+  nodeHeight: number
+  isLocked?: boolean
+  isLockedAncestor?: boolean
+  style?: { [key: string]: string | undefined }
+  showAccessibilityInfo?: boolean
+  isKeyboardFocusable?: boolean
+  accessibleName?: string
+  accessibleRole?: string
+  layoutObjectName?: string
+}
+
+export interface Highlight {
+  paths: Path[]
+  /** Whether the rulers should be shown. */
+  showRulers: boolean
+  /** Whether the extension lines from node to the rulers should be shown. */
+  showExtensionLines: boolean
+  elementInfo?: ElementInfo
+  /** The color format used to format color styles. */
+  colorFormat: string
+}
+
+export class HighlightOverlay extends Overlay {
+  private tooltip!: HTMLElement
+  private gridLabelState = { gridLayerCounter: 0 }
+  #container!: HTMLElement
+
+  setContainer(container: HTMLElement) {
+    this.#container = container
+  }
+
+  override setPlatform(platform: string) {
+    if (this.container) {
+      this.container.classList.add("platform-" + platform)
+    }
+
+    super.setPlatform(platform)
+  }
+
+  get container(): HTMLElement {
+    return this.#container
+  }
+
+  override reset(resetData: ResetData) {
+    super.reset(resetData)
+    this.tooltip.innerHTML = ""
+    this.gridLabelState.gridLayerCounter = 0
+  }
+
+  override install() {
+    const canvas = this.document.createElement("canvas")
+    this.container.appendChild(canvas)
+
+    const tooltip = this.document.createElement("div")
+    this.container.appendChild(tooltip)
+    this.tooltip = tooltip
+
+    this.setCanvas(canvas)
+
+    super.install()
+  }
+
+  override uninstall() {
+    this.document.body.classList.remove("fill")
+    this.document.body.innerHTML = ""
+
+    super.uninstall()
+  }
+
+  drawHighlight(highlight: Highlight) {
+    this.context.save()
+
+    const bounds = emptyBounds()
+
+    for (let paths = highlight.paths.slice(); paths.length; ) {
+      const path = paths.pop()
+      if (!path) {
+        continue
+      }
+      this.context.save()
+      drawPath(
+        this.context,
+        path.path,
+        path.fillColor,
+        path.outlineColor,
+        undefined,
+        bounds,
+        this.emulationScaleFactor,
+      )
+      if (paths.length) {
+        this.context.globalCompositeOperation = "destination-out"
+        drawPath(
+          this.context,
+          paths[paths.length - 1].path,
+          "red",
+          undefined,
+          undefined,
+          bounds,
+          this.emulationScaleFactor,
+        )
+      }
+      this.context.restore()
+    }
+    this.context.restore()
+
+    this.context.save()
+
+    const rulerAtRight = Boolean(
+      highlight.paths.length &&
+        highlight.showRulers &&
+        bounds.minX < 20 &&
+        bounds.maxX + 20 < this.canvasWidth,
+    )
+    const rulerAtBottom = Boolean(
+      highlight.paths.length &&
+        highlight.showRulers &&
+        bounds.minY < 20 &&
+        bounds.maxY + 20 < this.canvasHeight,
+    )
+
+    if (highlight.showRulers) {
+      this.drawAxis(this.context, rulerAtRight, rulerAtBottom)
+    }
+
+    if (highlight.paths.length) {
+      if (highlight.showExtensionLines) {
+        drawRulers(
+          this.context,
+          bounds,
+          rulerAtRight,
+          rulerAtBottom,
+          undefined,
+          false,
+          this.canvasWidth,
+          this.canvasHeight,
+        )
+      }
+
+      if (highlight.elementInfo) {
+        drawElementTitle(
+          this.tooltip,
+          highlight.elementInfo,
+          highlight.colorFormat,
+          bounds,
+          this.canvasWidth,
+          this.canvasHeight,
+        )
+      }
+    }
+
+    this.context.restore()
+
+    return { bounds }
+  }
+
+  private drawAxis(
+    context: CanvasRenderingContext2D,
+    rulerAtRight: boolean,
+    rulerAtBottom: boolean,
+  ) {
+    context.save()
+
+    const pageFactor =
+      this.pageZoomFactor * this.pageScaleFactor * this.emulationScaleFactor
+    const scrollX = this.scrollX * this.pageScaleFactor
+    const scrollY = this.scrollY * this.pageScaleFactor
+    function zoom(x: number) {
+      return Math.round(x * pageFactor)
+    }
+    function unzoom(x: number) {
+      return Math.round(x / pageFactor)
+    }
+
+    const width = this.canvasWidth / pageFactor
+    const height = this.canvasHeight / pageFactor
+
+    const gridSubStep = 5
+    const gridStep = 50
+
+    {
+      // Draw X grid background
+      context.save()
+      context.fillStyle = gridBackgroundColor
+      if (rulerAtBottom) {
+        context.fillRect(0, zoom(height) - 15, zoom(width), zoom(height))
+      } else {
+        context.fillRect(0, 0, zoom(width), 15)
+      }
+
+      // Clip out backgrounds intersection
+      context.globalCompositeOperation = "destination-out"
+      context.fillStyle = "red"
+      if (rulerAtRight) {
+        context.fillRect(zoom(width) - 15, 0, zoom(width), zoom(height))
+      } else {
+        context.fillRect(0, 0, 15, zoom(height))
+      }
+      context.restore()
+
+      // Draw Y grid background
+      context.fillStyle = gridBackgroundColor
+      if (rulerAtRight) {
+        context.fillRect(zoom(width) - 15, 0, zoom(width), zoom(height))
+      } else {
+        context.fillRect(0, 0, 15, zoom(height))
+      }
+    }
+
+    context.lineWidth = 1
+    context.strokeStyle = darkGridColor
+    context.fillStyle = darkGridColor
+    {
+      // Draw labels.
+      context.save()
+      context.translate(-scrollX, 0.5 - scrollY)
+      const maxY = height + unzoom(scrollY)
+      for (let y = 2 * gridStep; y < maxY; y += 2 * gridStep) {
+        context.save()
+        context.translate(scrollX, zoom(y))
+        context.rotate(-Math.PI / 2)
+        context.fillText(String(y), 2, rulerAtRight ? zoom(width) - 7 : 13)
+        context.restore()
+      }
+      context.translate(0.5, -0.5)
+      const maxX = width + unzoom(scrollX)
+      for (let x = 2 * gridStep; x < maxX; x += 2 * gridStep) {
+        context.save()
+        context.fillText(
+          String(x),
+          zoom(x) + 2,
+          rulerAtBottom ? scrollY + zoom(height) - 7 : scrollY + 13,
+        )
+        context.restore()
+      }
+      context.restore()
+    }
+
+    {
+      // Draw vertical grid
+      context.save()
+      if (rulerAtRight) {
+        context.translate(zoom(width), 0)
+        context.scale(-1, 1)
+      }
+      context.translate(-scrollX, 0.5 - scrollY)
+      const maxY = height + unzoom(scrollY)
+      for (let y = gridStep; y < maxY; y += gridStep) {
+        context.beginPath()
+        context.moveTo(scrollX, zoom(y))
+        const markLength = y % (gridStep * 2) ? 5 : 8
+        context.lineTo(scrollX + markLength, zoom(y))
+        context.stroke()
+      }
+      context.strokeStyle = lightGridColor
+      for (let y = gridSubStep; y < maxY; y += gridSubStep) {
+        if (!(y % gridStep)) {
+          continue
+        }
+        context.beginPath()
+        context.moveTo(scrollX, zoom(y))
+        context.lineTo(scrollX + gridSubStep, zoom(y))
+        context.stroke()
+      }
+      context.restore()
+    }
+
+    {
+      // Draw horizontal grid
+      context.save()
+      if (rulerAtBottom) {
+        context.translate(0, zoom(height))
+        context.scale(1, -1)
+      }
+      context.translate(0.5 - scrollX, -scrollY)
+      const maxX = width + unzoom(scrollX)
+      for (let x = gridStep; x < maxX; x += gridStep) {
+        context.beginPath()
+        context.moveTo(zoom(x), scrollY)
+        const markLength = x % (gridStep * 2) ? 5 : 8
+        context.lineTo(zoom(x), scrollY + markLength)
+        context.stroke()
+      }
+      context.strokeStyle = lightGridColor
+      for (let x = gridSubStep; x < maxX; x += gridSubStep) {
+        if (!(x % gridStep)) {
+          continue
+        }
+        context.beginPath()
+        context.moveTo(zoom(x), scrollY)
+        context.lineTo(zoom(x), scrollY + gridSubStep)
+        context.stroke()
+      }
+      context.restore()
+    }
+
+    context.restore()
+  }
+}
+
+const lightGridColor = "rgba(0,0,0,0.2)"
+const darkGridColor = "rgba(0,0,0,0.7)"
+const gridBackgroundColor = "rgba(255, 255, 255, 0.8)"
+
+/**
+ * Determine the layout type of the highlighted element based on the config.
+ * @param {Object} elementInfo The element information, part of the config object passed to drawHighlight
+ * @return {String|null} The layout type of the object, or null if none was found
+ */
+function getElementLayoutType(elementInfo: ElementInfo): string | null {
+  if (elementInfo.layoutObjectName && elementInfo.layoutObjectName.endsWith("Grid")) {
+    return "grid"
+  }
+
+  if (
+    elementInfo.layoutObjectName &&
+    elementInfo.layoutObjectName === "LayoutNGFlexibleBox"
+  ) {
+    return "flex"
+  }
+
+  return null
+}
+
+/**
+ * Create the DOM node that displays the description of the highlighted element
+ */
+function createElementDescription(
+  elementInfo: ElementInfo,
+  colorFormat: string,
+): Element {
+  const elementInfoElement = createElement("div", "element-info")
+  const elementInfoHeaderElement = createChild(
+    elementInfoElement,
+    "div",
+    "element-info-header",
+  )
+
+  const layoutType = getElementLayoutType(elementInfo)
+  if (layoutType) {
+    createChild(elementInfoHeaderElement, "div", `element-layout-type ${layoutType}`)
+  }
+  const descriptionElement = createChild(
+    elementInfoHeaderElement,
+    "div",
+    "element-description",
+  )
+  const tagNameElement = createChild(descriptionElement, "span", "material-tag-name")
+  tagNameElement.textContent = elementInfo.tagName
+  const nodeIdElement = createChild(descriptionElement, "span", "material-node-id")
+  const maxLength = 80
+  nodeIdElement.textContent = elementInfo.idValue
+    ? "#" + ellipsify(elementInfo.idValue, maxLength)
+    : ""
+  nodeIdElement.classList.toggle("hidden", !elementInfo.idValue)
+
+  const classNameElement = createChild(descriptionElement, "span", "material-class-name")
+  if (nodeIdElement.textContent.length < maxLength) {
+    classNameElement.textContent = ellipsify(
+      elementInfo.className || "",
+      maxLength - nodeIdElement.textContent.length,
+    )
+  }
+  classNameElement.classList.toggle("hidden", !elementInfo.className)
+  const dimensionsElement = createChild(elementInfoHeaderElement, "div", "dimensions")
+  createChild(dimensionsElement, "span", "material-node-width").textContent = String(
+    Math.round(elementInfo.nodeWidth * 100) / 100,
+  )
+  createTextChild(dimensionsElement, "\u00d7")
+  createChild(dimensionsElement, "span", "material-node-height").textContent = String(
+    Math.round(elementInfo.nodeHeight * 100) / 100,
+  )
+
+  const style = elementInfo.style || {}
+  let elementInfoBodyElement: HTMLElement
+
+  if (elementInfo.isLockedAncestor) {
+    addTextRow("Showing content-visibility ancestor", "")
+  }
+
+  if (elementInfo.isLocked) {
+    addTextRow("Descendants are skipped due to content-visibility", "")
+  }
+
+  const { color } = style
+  if (color && color !== "#00000000") {
+    addColorRow("Color", color, colorFormat)
+  }
+
+  const fontFamily = style["font-family"]
+  const fontSize = style["font-size"]
+  if (fontFamily && fontSize !== "0px") {
+    addTextRow("Font", `${fontSize} ${fontFamily}`)
+  }
+
+  const bgcolor = style["background-color"]
+  if (bgcolor && bgcolor !== "#00000000") {
+    addColorRow("Background", bgcolor, colorFormat)
+  }
+
+  const { margin } = style
+  if (margin && margin !== "0px") {
+    addTextRow("Margin", margin)
+  }
+
+  const { padding } = style
+  if (padding && padding !== "0px") {
+    addTextRow("Padding", padding)
+  }
+
+  const cbgColor = elementInfo.contrast ? elementInfo.contrast.backgroundColor : null
+  const hasContrastInfo =
+    color && color !== "#00000000" && cbgColor && cbgColor !== "#00000000"
+
+  if (elementInfo.showAccessibilityInfo) {
+    addSection("Accessibility")
+
+    if (hasContrastInfo && style["color"] && elementInfo.contrast) {
+      addContrastRow(style["color"], elementInfo.contrast)
+    }
+
+    addTextRow("Name", elementInfo.accessibleName)
+    addTextRow("Role", elementInfo.accessibleRole)
+    addIconRow(
+      "Keyboard-focusable",
+      elementInfo.isKeyboardFocusable
+        ? "a11y-icon a11y-icon-ok"
+        : "a11y-icon a11y-icon-not-ok",
+    )
+  }
+
+  function ensureElementInfoBody() {
+    if (!elementInfoBodyElement) {
+      elementInfoBodyElement = createChild(elementInfoElement, "div", "element-info-body")
+    }
+  }
+
+  function addSection(name: string) {
+    ensureElementInfoBody()
+    const rowElement = createChild(
+      elementInfoBodyElement,
+      "div",
+      "element-info-row element-info-section",
+    )
+    const nameElement = createChild(rowElement, "div", "section-name")
+    nameElement.textContent = name
+    createChild(createChild(rowElement, "div", "separator-container"), "div", "separator")
+  }
+
+  function addRow(
+    name: string,
+    rowClassName: string | undefined,
+    valueClassName: string | undefined,
+  ) {
+    ensureElementInfoBody()
+    const rowElement = createChild(elementInfoBodyElement, "div", "element-info-row")
+    if (rowClassName) {
+      rowElement.classList.add(rowClassName)
+    }
+    const nameElement = createChild(rowElement, "div", "element-info-name")
+    nameElement.textContent = name
+    createChild(rowElement, "div", "element-info-gap")
+    return createChild(rowElement, "div", valueClassName || "")
+  }
+
+  function addIconRow(name: string, value: string) {
+    createChild(addRow(name, "", "element-info-value-icon"), "div", value)
+  }
+
+  function addTextRow(name: string, value?: string) {
+    if (value == null) {
+      return
+    }
+    createTextChild(addRow(name, "", "element-info-value-text"), value)
+  }
+
+  function addColorRow(name: string, color: string, colorFormat: string) {
+    const valueElement = addRow(name, "", "element-info-value-color")
+    const swatch = createChild(valueElement, "div", "color-swatch")
+    const inner = createChild(swatch, "div", "color-swatch-inner")
+    inner.style.backgroundColor = color
+    createTextChild(valueElement, formatColor(color, colorFormat))
+  }
+
+  function addContrastRow(fgColor: string, contrast: ContrastInfo) {
+    const parsedFgColor = parseHexa(fgColor)
+    const parsedBgColor = parseHexa(contrast.backgroundColor)
+    // Merge text opacity into the alpha channel of the color.
+    parsedFgColor[3] *= contrast.textOpacity
+    const valueElement = addRow("Contrast", "", "element-info-value-contrast")
+    const sampleText = createChild(valueElement, "div", "contrast-text")
+    sampleText.style.color = formatRgba(parsedFgColor, "rgb")
+    sampleText.style.backgroundColor = contrast.backgroundColor
+    sampleText.textContent = "Aa"
+    const valueSpan = createChild(valueElement, "span")
+    if (contrast.contrastAlgorithm === "apca") {
+      const percentage = contrastRatioAPCA(parsedFgColor, parsedBgColor)
+      const threshold = getAPCAThreshold(contrast.fontSize, contrast.fontWeight)
+      valueSpan.textContent = String(Math.floor(percentage * 100) / 100) + "%"
+      createChild(
+        valueElement,
+        "div",
+        threshold === null || Math.abs(percentage) < threshold
+          ? "a11y-icon a11y-icon-warning"
+          : "a11y-icon a11y-icon-ok",
+      )
+    } else if (
+      contrast.contrastAlgorithm === "aa" ||
+      contrast.contrastAlgorithm === "aaa"
+    ) {
+      const ratio = contrastRatio(parsedFgColor, parsedBgColor)
+      const threshold = getContrastThreshold(contrast.fontSize, contrast.fontWeight)[
+        contrast.contrastAlgorithm
+      ]
+      valueSpan.textContent = String(Math.floor(ratio * 100) / 100)
+      createChild(
+        valueElement,
+        "div",
+        ratio < threshold ? "a11y-icon a11y-icon-warning" : "a11y-icon a11y-icon-ok",
+      )
+    }
+  }
+
+  return elementInfoElement
+}
+
+/**
+ * @param elementInfo The highlight config object passed to drawHighlight
+ * @param colorFormat
+ * @param bounds
+ * @param canvasWidth
+ * @param canvasHeight
+ */
+function drawElementTitle(
+  tooltipContainer: HTMLElement,
+  elementInfo: ElementInfo,
+  colorFormat: string,
+  bounds: Bounds,
+  canvasWidth: number,
+  canvasHeight: number,
+) {
+  // Get the tooltip container and empty it, there can only be one tooltip displayed at the same time.
+  tooltipContainer.innerHTML = ""
+
+  // Create the necessary wrappers.
+  const wrapper = createChild(tooltipContainer, "div")
+  const tooltipContent = createChild(wrapper, "div", "tooltip-content")
+
+  // Create the tooltip content and append it.
+  const tooltip = createElementDescription(elementInfo, colorFormat)
+  tooltipContent.appendChild(tooltip)
+
+  const titleWidth = tooltipContent.offsetWidth
+  const titleHeight = tooltipContent.offsetHeight
+  const arrowHalfWidth = 8
+  const pageMargin = 2
+  const arrowWidth = arrowHalfWidth * 2
+  const arrowInset = arrowHalfWidth + 2
+
+  const containerMinX = pageMargin + arrowInset
+  const containerMaxX = canvasWidth - pageMargin - arrowInset - arrowWidth
+
+  // Left align arrow to the tooltip but ensure it is pointing to the element.
+  // Center align arrow if the inspected element bounds are too narrow.
+  const boundsAreTooNarrow = bounds.maxX - bounds.minX < arrowWidth + 2 * arrowInset
+  let arrowX: number
+  if (boundsAreTooNarrow) {
+    arrowX = (bounds.minX + bounds.maxX) * 0.5 - arrowHalfWidth
+  } else {
+    const xFromLeftBound = bounds.minX + arrowInset
+    const xFromRightBound = bounds.maxX - arrowInset - arrowWidth
+    if (xFromLeftBound > containerMinX && xFromLeftBound < containerMaxX) {
+      arrowX = xFromLeftBound
+    } else {
+      arrowX = constrainNumber(containerMinX, xFromLeftBound, xFromRightBound)
+    }
+  }
+  // Hide arrow if element is completely off the sides of the page.
+  const arrowHidden = arrowX < containerMinX || arrowX > containerMaxX
+
+  let boxX = arrowX - arrowInset
+  boxX = constrainNumber(boxX, pageMargin, canvasWidth - titleWidth - pageMargin)
+
+  let boxY = bounds.minY - arrowHalfWidth - titleHeight
+  let onTop = true
+  if (boxY < 0) {
+    boxY = Math.min(canvasHeight - titleHeight, bounds.maxY + arrowHalfWidth)
+    onTop = false
+  } else if (bounds.minY > canvasHeight) {
+    boxY = canvasHeight - arrowHalfWidth - titleHeight
+  }
+
+  // If tooltip intersects with the bounds, hide it.
+  // Allow bounds to contain the box though for the large elements like <body>.
+  const includes =
+    boxX >= bounds.minX &&
+    boxX + titleWidth <= bounds.maxX &&
+    boxY >= bounds.minY &&
+    boxY + titleHeight <= bounds.maxY
+  const overlaps =
+    boxX < bounds.maxX &&
+    boxX + titleWidth > bounds.minX &&
+    boxY < bounds.maxY &&
+    boxY + titleHeight > bounds.minY
+  if (overlaps && !includes) {
+    tooltipContent.style.display = "none"
+    return
+  }
+
+  tooltipContent.style.top = boxY + "px"
+  tooltipContent.style.left = boxX + "px"
+  if (arrowHidden) {
+    return
+  }
+
+  const tooltipArrow = createChild(tooltipContent, "div", "tooltip-arrow")
+  tooltipArrow.style.clipPath = onTop
+    ? "polygon(0 0, 100% 0, 50% 100%)"
+    : "polygon(50% 0, 0 100%, 100% 100%)"
+  // When tooltip is on-top remove 1px from the arrow's top value to get rid of whitespace produced by the tooltip's border.
+  tooltipArrow.style.top = (onTop ? titleHeight - 1 : -arrowHalfWidth) + "px"
+  tooltipArrow.style.left = arrowX - boxX + "px"
+}
+
+const DEFAULT_RULER_COLOR = "rgba(128, 128, 128, 0.3)"
+
+function drawRulers(
+  context: CanvasRenderingContext2D,
+  bounds: PathBounds,
+  rulerAtRight: boolean,
+  rulerAtBottom: boolean,
+  color: string | undefined,
+  dash: boolean,
+  canvasWidth: number,
+  canvasHeight: number,
+) {
+  context.save()
+  const width = canvasWidth
+  const height = canvasHeight
+  context.strokeStyle = color || DEFAULT_RULER_COLOR
+  context.lineWidth = 1
+  context.translate(0.5, 0.5)
+  if (dash) {
+    context.setLineDash([3, 3])
+  }
+
+  if (rulerAtRight) {
+    for (const y in bounds.rightmostXForY) {
+      context.beginPath()
+      context.moveTo(width, Number(y))
+      context.lineTo(bounds.rightmostXForY[y], Number(y))
+      context.stroke()
+    }
+  } else {
+    for (const y in bounds.leftmostXForY) {
+      context.beginPath()
+      context.moveTo(0, Number(y))
+      context.lineTo(bounds.leftmostXForY[y], Number(y))
+      context.stroke()
+    }
+  }
+
+  if (rulerAtBottom) {
+    for (const x in bounds.bottommostYForX) {
+      context.beginPath()
+      context.moveTo(Number(x), height)
+      context.lineTo(Number(x), bounds.topmostYForX[x])
+      context.stroke()
+    }
+  } else {
+    for (const x in bounds.topmostYForX) {
+      context.beginPath()
+      context.moveTo(Number(x), 0)
+      context.lineTo(Number(x), bounds.topmostYForX[x])
+      context.stroke()
+    }
+  }
+
+  context.restore()
+}
diff --git a/src/vendor/dom-highlighter/src/utils.ts b/src/vendor/dom-highlighter/src/utils.ts
new file mode 100644
index 0000000..99dbdb1
--- /dev/null
+++ b/src/vendor/dom-highlighter/src/utils.ts
@@ -0,0 +1,23 @@
+export function createElement<K extends keyof HTMLElementTagNameMap>(
+  tagName: K,
+  {
+    style,
+    children,
+    ...attributes
+  }: Omit<Partial<HTMLElementTagNameMap[K]>, "style"> & {
+    style?: React.CSSProperties
+    children?: (string | Node)[]
+  },
+) {
+  const element = document.createElement(tagName)
+  if (attributes) {
+    Object.assign(element, attributes)
+  }
+  if (style) {
+    Object.assign(element.style, style)
+  }
+  if (children) {
+    element.append(...children)
+  }
+  return element
+}
diff --git a/src/vendor/dom-highlighter/style.css b/src/vendor/dom-highlighter/style.css
new file mode 100644
index 0000000..7496087
--- /dev/null
+++ b/src/vendor/dom-highlighter/style.css
@@ -0,0 +1,313 @@
+.luna-dom-highlighter {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100000;
+  pointer-events: none;
+  font-size: 13px;
+}
+
+.fill {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.platform-linux {
+  font-family: Roboto, Ubuntu, Arial, sans-serif;
+}
+
+.platform-mac {
+  color: rgb(48, 57, 66);
+  font-family: ".SFNSDisplay-Regular", "BlinkMacSystemFont", "Helvetica Neue",
+    "Lucida Grande", sans-serif;
+}
+
+.platform-windows {
+  font-family: "Segoe UI", Tahoma, sans-serif;
+}
+
+.px {
+  color: rgb(128, 128, 128);
+}
+
+#element-title {
+  position: absolute;
+  z-index: 10;
+}
+
+/* Material */
+.tooltip-content {
+  position: absolute;
+  user-select: none;
+  background-color: #fff;
+  padding: 5px 8px;
+  border: 1px solid #fff;
+  border-radius: 3px;
+  box-sizing: border-box;
+  min-width: 100px;
+  max-width: min(300px, 100% - 4px);
+  z-index: 2;
+  background-clip: padding-box;
+  will-change: transform;
+  text-rendering: optimizeLegibility;
+  pointer-events: none;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
+}
+
+.tooltip-content .tooltip-arrow {
+  background: #fff;
+  width: 15px;
+  height: 8px;
+  position: absolute;
+}
+
+.element-info-section {
+  margin-top: 12px;
+  margin-bottom: 6px;
+}
+
+.section-name {
+  color: #333;
+  font-weight: 500;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  line-height: 12px;
+}
+
+.element-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.element-info-header {
+  display: flex;
+  align-items: center;
+}
+
+.element-info-body {
+  display: flex;
+  flex-direction: column;
+  padding-top: 2px;
+  margin-top: 2px;
+}
+
+.element-info-row {
+  display: flex;
+  line-height: 19px;
+}
+
+.separator-container {
+  display: flex;
+  align-items: center;
+  flex: auto;
+  margin-left: 7px;
+}
+
+.separator {
+  border-top: 1px solid #ddd;
+  width: 100%;
+}
+
+.element-info-name {
+  flex-shrink: 0;
+  color: #666;
+}
+
+.element-info-gap {
+  flex: auto;
+}
+
+.element-info-value-color {
+  display: flex;
+  color: rgb(48, 57, 66);
+  margin-left: 10px;
+  align-items: baseline;
+}
+
+.a11y-icon {
+  width: 16px;
+  height: 16px;
+  background-repeat: no-repeat;
+  display: inline-block;
+}
+
+.element-info-value-contrast {
+  display: flex;
+  align-items: center;
+  text-align: right;
+  color: rgb(48, 57, 66);
+  margin-left: 10px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .tooltip-content {
+    background-color: #1e1e1e;
+    border-color: #1e1e1e;
+  }
+  .tooltip-content .tooltip-arrow {
+    background: #1e1e1e;
+  }
+  .section-name {
+    color: #ccc;
+  }
+  .separator {
+    border-top: 1px solid #333;
+  }
+  .element-info-name {
+    color: #999;
+  }
+  .element-info-value-color {
+    color: #ccc;
+  }
+  .element-info-value-contrast {
+    color: #ccc;
+  }
+}
+
+.element-info-value-contrast .a11y-icon {
+  margin-left: 8px;
+}
+
+.element-info-value-icon {
+  display: flex;
+  align-items: center;
+}
+
+.element-info-value-text {
+  text-align: right;
+  color: rgb(48, 57, 66);
+  margin-left: 10px;
+  align-items: baseline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.color-swatch {
+  display: flex;
+  margin-right: 2px;
+  width: 10px;
+  height: 10px;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+  line-height: 10px;
+}
+
+.color-swatch-inner {
+  flex: auto;
+  border: 1px solid rgb(128, 128, 128 / 60%);
+}
+
+.element-layout-type {
+  margin-right: 10px;
+  width: 16px;
+  height: 16px;
+}
+
+.element-layout-type.grid {
+  background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2.5" y="2.5" width="4" height="4" stroke="%231A73E8"/><rect x="9.5" y="2.5" width="4" height="4" stroke="%231A73E8"/><rect x="9.5" y="9.5" width="4" height="4" stroke="%231A73E8"/><rect x="2.5" y="9.5" width="4" height="4" stroke="%231A73E8"/></svg>');
+}
+
+.element-layout-type.flex {
+  background-image: url('data:image/svg+xml,<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 3.5h8v3H1v-3zm-1 0a1 1 0 011-1h8a1 1 0 011 1v3a1 1 0 01-1 1H1a1 1 0 01-1-1v-3zm12 0h3v3h-3v-3zm-1 0a1 1 0 011-1h3a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-3zm-7 6H1v3h3v-3zm-3-1a1 1 0 00-1 1v3a1 1 0 001 1h3a1 1 0 001-1v-3a1 1 0 00-1-1H1zm6 4v-3h8v3H7zm-1-3a1 1 0 011-1h8a1 1 0 011 1v3a1 1 0 01-1 1H7a1 1 0 01-1-1v-3z" fill="%231A73E8"/></svg>');
+}
+
+.element-description {
+  flex: 1 1;
+  font-weight: bold;
+  word-wrap: break-word;
+  word-break: break-all;
+}
+
+.dimensions {
+  color: hsl(0deg, 0%, 45%);
+  text-align: right;
+  margin-left: 10px;
+}
+
+.material-node-width {
+  margin-right: 2px;
+}
+
+.material-node-height {
+  margin-left: 2px;
+}
+
+.material-tag-name {
+  /* Keep this in sync with inspectorSyntaxHighlight.css (--dom-tag-name-color) */
+  color: rgb(136, 18, 128);
+}
+
+.material-class-name,
+.material-node-id {
+  /* Keep this in sync with inspectorSyntaxHighlight.css (.webkit-html-attribute-value) */
+  color: rgb(26, 26, 166);
+}
+
+.contrast-text {
+  width: 16px;
+  height: 16px;
+  text-align: center;
+  line-height: 16px;
+  margin-right: 8px;
+  border: 1px solid rgb(0, 0, 0 / 10%);
+  padding: 0 1px;
+}
+
+.a11y-icon-not-ok {
+  background-image: url('data:image/svg+xml,<svg fill="none" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="m9 1.5c-4.14 0-7.5 3.36-7.5 7.5s3.36 7.5 7.5 7.5 7.5-3.36 7.5-7.5-3.36-7.5-7.5-7.5zm0 13.5c-3.315 0-6-2.685-6-6 0-1.3875.4725-2.6625 1.2675-3.675l8.4075 8.4075c-1.0125.795-2.2875 1.2675-3.675 1.2675zm4.7325-2.325-8.4075-8.4075c1.0125-.795 2.2875-1.2675 3.675-1.2675 3.315 0 6 2.685 6 6 0 1.3875-.4725 2.6625-1.2675 3.675z" fill="%239e9e9e"/></svg>');
+}
+
+.a11y-icon-warning {
+  background-image: url('data:image/svg+xml,<svg fill="none" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="m8.25 11.25h1.5v1.5h-1.5zm0-6h1.5v4.5h-1.5zm.7425-3.75c-4.14 0-7.4925 3.36-7.4925 7.5s3.3525 7.5 7.4925 7.5c4.1475 0 7.5075-3.36 7.5075-7.5s-3.36-7.5-7.5075-7.5zm.0075 13.5c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6z" fill="%23e37400"/></svg>');
+}
+
+.a11y-icon-ok {
+  background-image: url('data:image/svg+xml,<svg fill="none" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="m9 1.5c-4.14 0-7.5 3.36-7.5 7.5s3.36 7.5 7.5 7.5 7.5-3.36 7.5-7.5-3.36-7.5-7.5-7.5zm0 13.5c-3.3075 0-6-2.6925-6-6s2.6925-6 6-6 6 2.6925 6 6-2.6925 6-6 6zm-1.5-4.35-1.95-1.95-1.05 1.05 3 3 6-6-1.05-1.05z" fill="%230ca40c"/></svg>');
+}
+
+@media (forced-colors: active) {
+  :root,
+  body {
+    background-color: transparent;
+    forced-color-adjust: none;
+  }
+
+  .tooltip-content {
+    border-color: Highlight;
+    background-color: canvas;
+    color: text;
+    forced-color-adjust: none;
+  }
+
+  .tooltip-content::after {
+    background-color: Highlight;
+  }
+
+  .color-swatch-inner,
+  .contrast-text,
+  .separator {
+    border-color: Highlight;
+  }
+
+  .section-name {
+    color: Highlight;
+  }
+
+  .dimensions,
+  .element-info-name,
+  .element-info-value-color,
+  .element-info-value-contrast,
+  .element-info-value-icon,
+  .element-info-value-text,
+  .material-tag-name,
+  .material-class-name,
+  .material-node-id {
+    color: canvastext;
+  }
+}
diff --git a/src/vendor/emotion.ts b/src/vendor/emotion.ts
new file mode 100644
index 0000000..4a3d951
--- /dev/null
+++ b/src/vendor/emotion.ts
@@ -0,0 +1,1404 @@
+// https://github.com/emotion-js/emotion/commit/f3b268f7c52103979402da919c9c0dd3f9e0e189
+// MIT License. Copyright (c) Emotion team and other contributors
+import { basename, normalize, parse, sep } from "node:path"
+import { type Position, SourceMapGenerator } from "source-map"
+import convert from "convert-source-map"
+import findRoot from "find-root"
+import memoize from "@emotion/memoize"
+import { serializeStyles } from "@emotion/serialize"
+import hashString from "@emotion/hash"
+import { addDefault, addNamed } from "@babel/helper-module-imports"
+import escapeRegexp from "escape-string-regexp"
+import { compile } from "stylis"
+import { createMacro } from "babel-plugin-macros"
+import type { CallExpression, Node } from "@babel/types"
+import type {
+  BabelFile,
+  NodePath,
+  ParserOptions,
+  PluginObj,
+  PluginPass,
+  types,
+} from "@babel/core"
+
+type Babel = typeof import("@babel/core")
+type Types = typeof types
+
+interface PluginOptions {
+  sourceMap?: boolean
+  autoLabel?: "dev-only" | "always" | "never"
+  labelFormat?: string
+  cssPropOptimization?: boolean
+  importMap?: { [key: string]: string }
+}
+
+interface PluginStateOptions {
+  cssPropOptimization: boolean
+  autoLabel: PluginOptions["autoLabel"]
+  labelFormat: string
+  sourceMap: boolean
+}
+
+interface PluginState extends PluginPass {
+  emotionSourceMap: boolean
+  transformCssProp: boolean
+  jsxReactImport: { importSource: string; export: string; cssExport: string }
+  opts: PluginStateOptions
+  pluginMacros: {
+    [key: string]: Macro
+  }
+}
+
+// src/utils/label.js
+const invalidClassNameCharacters = /[!"#$%&'()*+,./:;<=>?@[\]^`{|}~]/g
+const sanitizeLabelPart = (labelPart: string) =>
+  labelPart.trim().replace(invalidClassNameCharacters, "-")
+
+function getLabel(
+  identifierName: string | null,
+  labelFormat: string | ((label: { name: string; path: string }) => string) | undefined,
+  filename: string,
+) {
+  if (!identifierName) return null
+  const sanitizedName = sanitizeLabelPart(identifierName)
+  if (!labelFormat) {
+    return sanitizedName
+  }
+  if (typeof labelFormat === "function") {
+    return labelFormat({
+      name: sanitizedName,
+      path: filename,
+    })
+  }
+  const parsedPath = parse(filename)
+  const localDirname = basename(parsedPath.dir)
+  let localFilename = parsedPath.name
+  if (localFilename === "index") {
+    localFilename = localDirname
+  }
+  return labelFormat
+    .replace(/\[local]/gi, sanitizedName)
+    .replace(/\[filename]/gi, sanitizeLabelPart(localFilename))
+    .replace(/\[dirname]/gi, sanitizeLabelPart(localDirname))
+}
+
+function getLabelFromPath(path: NodePath<CallExpression>, state: PluginState, t: Types) {
+  return getLabel(
+    getIdentifierName(path, t),
+    state.opts.labelFormat,
+    state.file.opts.filename!,
+  )
+}
+
+const getObjectPropertyLikeName = (path: NodePath<Node>, t: Types): string | null => {
+  if ((!t.isObjectProperty(path) && !t.isObjectMethod(path)) || path.node.computed) {
+    return null
+  }
+  if (t.isIdentifier(path.node.key)) {
+    return path.node.key.name
+  }
+  if (t.isStringLiteral(path.node.key)) {
+    return path.node.key.value.replace(/\s+/g, "-")
+  }
+  return null
+}
+
+function getDeclaratorName(path: NodePath<Node>, t: Types): string {
+  const parent = path.findParent(
+    p =>
+      p.isVariableDeclarator() ||
+      p.isAssignmentExpression() ||
+      p.isFunctionDeclaration() ||
+      p.isFunctionExpression() ||
+      p.isArrowFunctionExpression() ||
+      p.isObjectProperty() ||
+      p.isObjectMethod(),
+  )
+  if (!parent) {
+    return ""
+  }
+  if (parent.isVariableDeclarator()) {
+    if (t.isIdentifier(parent.node.id)) {
+      return parent.node.id.name
+    }
+    return ""
+  }
+  if (parent.isAssignmentExpression()) {
+    const { left } = parent.node
+    if (t.isIdentifier(left)) {
+      return left.name
+    }
+    if (t.isMemberExpression(left)) {
+      let memberExpression = left
+      let name = ""
+      while (true) {
+        if (!t.isIdentifier(memberExpression.property)) {
+          return ""
+        }
+        name = `${memberExpression.property.name}${name ? `-${name}` : ""}`
+        if (t.isIdentifier(memberExpression.object)) {
+          return `${memberExpression.object.name}-${name}`
+        }
+        if (!t.isMemberExpression(memberExpression.object)) {
+          return ""
+        }
+        memberExpression = memberExpression.object
+      }
+    }
+    return ""
+  }
+  if (parent.isFunctionDeclaration()) {
+    return parent.node.id.name || ""
+  }
+  if (parent.isFunctionExpression()) {
+    if (parent.node.id) {
+      return parent.node.id.name || ""
+    }
+    return getDeclaratorName(parent, t)
+  }
+  if (parent.isArrowFunctionExpression()) {
+    return getDeclaratorName(parent, t)
+  }
+  const objectPropertyLikeName = getObjectPropertyLikeName(parent, t)
+  if (objectPropertyLikeName) {
+    return objectPropertyLikeName
+  }
+  const variableDeclarator = parent.findParent(p => p.isVariableDeclarator())
+  if (!variableDeclarator || !variableDeclarator.get("id").isIdentifier()) {
+    return ""
+  }
+  return variableDeclarator.node.id.name
+}
+
+function getIdentifierName(path: NodePath<CallExpression>, t: Types): string {
+  const objPropertyLikeName = getObjectPropertyLikeName(path.parentPath, t)
+  if (objPropertyLikeName) {
+    return objPropertyLikeName
+  }
+  const classOrClassPropertyParent = path.findParent(
+    p => t.isClassProperty(p) || t.isClass(p),
+  )
+  if (classOrClassPropertyParent) {
+    if (
+      t.isClassProperty(classOrClassPropertyParent) &&
+      classOrClassPropertyParent.node.computed === false &&
+      t.isIdentifier(classOrClassPropertyParent.node.key)
+    ) {
+      return classOrClassPropertyParent.node.key.name
+    }
+    if (t.isClass(classOrClassPropertyParent) && classOrClassPropertyParent.node.id) {
+      return t.isIdentifier(classOrClassPropertyParent.node.id)
+        ? classOrClassPropertyParent.node.id.name
+        : ""
+    }
+  }
+  const declaratorName = getDeclaratorName(path, t)
+  if (declaratorName.charAt(0) === "_") {
+    return ""
+  }
+  return declaratorName
+}
+
+// lib/utils/source-maps.js
+function getGeneratorOptions(file: BabelFile) {
+  return file.opts.generatorOpts ? file.opts.generatorOpts : file.opts
+}
+
+function makeSourceMapGenerator(file: BabelFile) {
+  const generatorOptions = getGeneratorOptions(file)
+  const filename = generatorOptions.sourceFileName!
+  const generator = new SourceMapGenerator({
+    file: filename,
+    sourceRoot: generatorOptions.sourceRoot!,
+  })
+  generator.setSourceContent(filename, file.code)
+  return generator
+}
+
+function getSourceMap(offset: Position, state: PluginState) {
+  const generator = makeSourceMapGenerator(state.file)
+  const generatorOpts = getGeneratorOptions(state.file)
+  if (generatorOpts.sourceFileName && generatorOpts.sourceFileName !== "unknown") {
+    generator.addMapping({
+      generated: {
+        line: 1,
+        column: 0,
+      },
+      source: generatorOpts.sourceFileName,
+      original: offset,
+    })
+
+    return convert.fromObject(generator).toComment({
+      multiline: true,
+    })
+  }
+  return ""
+}
+
+// lib/utils/get-target-class-name.js
+
+const hashArray = (array: string[]) => hashString(array.join(""))
+const getPackageRootPath = memoize(filename => findRoot(filename))
+const separator = new RegExp(escapeRegexp(sep), "g")
+const normalizePath = (path: string) => normalize(path).replace(separator, "/")
+
+function getTargetClassName(state, t: Types) {
+  if (state.emotionTargetClassNameCount === void 0) {
+    state.emotionTargetClassNameCount = 0
+  }
+  const hasFilepath = state.file.opts.filename && state.file.opts.filename !== "unknown"
+  const filename = hasFilepath ? state.file.opts.filename : ""
+  let moduleName = ""
+  let rootPath = filename
+  try {
+    rootPath = getPackageRootPath(filename)
+    moduleName = require(rootPath + "/package.json").name
+  } catch {}
+  const finalPath = filename === rootPath ? "root" : filename.slice(rootPath.length)
+  const positionInFile = state.emotionTargetClassNameCount++
+  const stuffToHash = [moduleName]
+  if (finalPath) {
+    stuffToHash.push(normalizePath(finalPath))
+  } else {
+    stuffToHash.push(state.file.code)
+  }
+  const stableClassName = `e${hashArray(stuffToHash)}${positionInFile}`
+  return stableClassName
+}
+
+// src/utils/object-to-string.js
+function simplifyObject(node, t: Types) {
+  let finalString = ""
+  for (let i = 0; i < node.properties.length; i++) {
+    const property = node.properties[i]
+    if (
+      !t.isObjectProperty(property) ||
+      property.computed ||
+      (!t.isIdentifier(property.key) && !t.isStringLiteral(property.key)) ||
+      (!t.isStringLiteral(property.value) &&
+        !t.isNumericLiteral(property.value) &&
+        !t.isObjectExpression(property.value))
+    ) {
+      return node
+    }
+    const key = property.key.name || property.key.value
+    if (key === "styles") {
+      return node
+    }
+    if (t.isObjectExpression(property.value)) {
+      const simplifiedChild = simplifyObject(property.value, t)
+      if (!t.isStringLiteral(simplifiedChild)) {
+        return node
+      }
+      finalString += `${key}{${simplifiedChild.value}}`
+      continue
+    }
+    const value = property.value.value
+    finalString += serializeStyles([{ [key]: value }]).styles
+  }
+  return t.stringLiteral(finalString)
+}
+
+// src/utils/transform-expression-with-styles.js
+
+// src/utils/minify.js
+const haveSameLocation = (element1, element2) =>
+  element1.line === element2.line && element1.column === element2.column
+
+const isAutoInsertedRule = element =>
+  element.type === "rule" && element.parent && haveSameLocation(element, element.parent)
+
+const toInputTree = (elements, tree) => {
+  for (const element of elements) {
+    const { parent, children } = element
+    if (!parent) {
+      tree.push(element)
+    } else if (!isAutoInsertedRule(element)) {
+      parent.children.push(element)
+    }
+    if (Array.isArray(children)) {
+      element.children = []
+      toInputTree(children, tree)
+    }
+  }
+  return tree
+}
+
+const stringifyTree = elements =>
+  elements
+    .map(element => {
+      switch (element.type) {
+        case "import":
+        case "decl": {
+          return element.value
+        }
+        case "comm": {
+          return element.props === "/" && element.value.includes("@") ? element.value : ""
+        }
+        case "rule": {
+          return `${element.value.replace(/&\f/g, "&")}{${stringifyTree(
+            element.children,
+          )}}`
+        }
+        default: {
+          return `${element.value}{${stringifyTree(element.children)}}`
+        }
+      }
+    })
+    .join("")
+
+const interleave = (strings: string[], interpolations: string[]) =>
+  interpolations.reduce(
+    (array, interp, i) => [...array, interp, ...strings[i + 1]],
+    [strings[0]],
+  )
+
+function getDynamicMatches(str: string) {
+  const re = /xxx(\d+):xxx/gm
+  let match
+  const matches = []
+  while ((match = re.exec(str)) !== null) {
+    if (match !== null) {
+      matches.push({
+        value: match[0],
+        p1: Number.parseInt(match[1], 10),
+        index: match.index,
+      })
+    }
+  }
+  return matches
+}
+
+function replacePlaceholdersWithExpressions(string: string, expressions, t: Types) {
+  const matches = getDynamicMatches(string)
+  if (matches.length === 0) {
+    if (string === "") {
+      return []
+    }
+    return [t.stringLiteral(string)]
+  }
+  const strings = []
+  const finalExpressions = []
+  let cursor = 0
+  for (const [i, { value, p1, index }] of matches.entries()) {
+    const preMatch = string.substring(cursor, index)
+    cursor = cursor + preMatch.length + value.length
+    if (!preMatch && i === 0) {
+      strings.push(t.stringLiteral(""))
+    } else {
+      strings.push(t.stringLiteral(preMatch))
+    }
+    finalExpressions.push(expressions[p1])
+    if (i === matches.length - 1) {
+      strings.push(t.stringLiteral(string.slice(Math.max(0, index + value.length))))
+    }
+  }
+  return interleave(strings, finalExpressions).filter(node => node.value !== "")
+}
+
+function createRawStringFromTemplateLiteral(quasi) {
+  const strs = quasi.quasis.map(x => x.value.cooked)
+  const source = strs
+    .reduce((array, str, i) => {
+      array.push(str)
+      if (i !== strs.length - 1) {
+        array.push(`xxx${i}:xxx`)
+      }
+      return array
+    }, [])
+    .join("")
+    .trim()
+  return source
+}
+
+function minify(path, t: Types) {
+  const quasi = path.node.quasi
+  const raw = createRawStringFromTemplateLiteral(quasi)
+  const minified = stringifyTree(toInputTree(compile(raw), []))
+  const expressions = replacePlaceholdersWithExpressions(
+    minified,
+    quasi.expressions || [],
+    t,
+  )
+  path.replaceWith(t.callExpression(path.node.tag, expressions))
+}
+
+// src/utils/transpiled-output-utils.js
+function getTypeScriptMakeTemplateObjectPath(path) {
+  if (path.node.arguments.length === 0) {
+    return null
+  }
+  const firstArgPath = path.get("arguments")[0]
+  if (
+    firstArgPath.isLogicalExpression() &&
+    firstArgPath.get("left").isIdentifier() &&
+    firstArgPath.get("right").isAssignmentExpression() &&
+    firstArgPath.get("right.right").isCallExpression() &&
+    firstArgPath.get("right.right.callee").isIdentifier() &&
+    firstArgPath.node.right.right.callee.name.includes("makeTemplateObject") &&
+    firstArgPath.node.right.right.arguments.length === 2
+  ) {
+    return firstArgPath.get("right.right")
+  }
+  return null
+}
+function isTaggedTemplateTranspiledByBabel(path) {
+  if (path.node.arguments.length === 0) {
+    return false
+  }
+  const firstArgPath = path.get("arguments")[0]
+  if (!firstArgPath.isCallExpression() || !firstArgPath.get("callee").isIdentifier()) {
+    return false
+  }
+  const calleeName = firstArgPath.node.callee.name
+  if (!calleeName.includes("templateObject")) {
+    return false
+  }
+  const bindingPath = path.scope.getBinding(calleeName).path
+  if (!bindingPath.isFunction()) {
+    return false
+  }
+  const functionBody = bindingPath.get("body.body")
+  if (!functionBody[0].isVariableDeclaration()) {
+    return false
+  }
+  const declarationInit = functionBody[0].get("declarations")[0].get("init")
+  if (!declarationInit.isCallExpression()) {
+    return false
+  }
+  const declarationInitArguments = declarationInit.get("arguments")
+  if (
+    declarationInitArguments.length === 0 ||
+    declarationInitArguments.length > 2 ||
+    declarationInitArguments.some(argPath => !argPath.isArrayExpression())
+  ) {
+    return false
+  }
+  return true
+}
+
+// lib/utils/strings.js
+const appendStringReturningExpressionToArguments = (t: Types, path, expression) => {
+  const lastIndex = path.node.arguments.length - 1
+  const last = path.node.arguments[lastIndex]
+  if (t.isStringLiteral(last)) {
+    if (typeof expression === "string") {
+      path.node.arguments[lastIndex].value += expression
+    } else {
+      path.node.arguments[lastIndex] = t.binaryExpression("+", last, expression)
+    }
+  } else {
+    const makeTemplateObjectCallPath = getTypeScriptMakeTemplateObjectPath(path)
+    if (makeTemplateObjectCallPath) {
+      for (const argPath of makeTemplateObjectCallPath.get("arguments")) {
+        const elements = argPath.get("elements")
+        const lastElement = elements.at(-1)
+        if (typeof expression === "string") {
+          lastElement.replaceWith(t.stringLiteral(lastElement.node.value + expression))
+        } else {
+          lastElement.replaceWith(
+            t.binaryExpression("+", lastElement.node, t.cloneNode(expression)),
+          )
+        }
+      }
+    } else if (!isTaggedTemplateTranspiledByBabel(path)) {
+      if (typeof expression === "string") {
+        path.node.arguments.push(t.stringLiteral(expression))
+      } else {
+        path.node.arguments.push(expression)
+      }
+    }
+  }
+}
+
+const joinStringLiterals = (expressions, t) =>
+  expressions.reduce((finalExpressions, currentExpression, i) => {
+    if (!t.isStringLiteral(currentExpression)) {
+      finalExpressions.push(currentExpression)
+    } else if (t.isStringLiteral(finalExpressions.at(-1))) {
+      finalExpressions.at(-1).value += currentExpression.value
+    } else {
+      finalExpressions.push(currentExpression)
+    }
+    return finalExpressions
+  }, [])
+
+// src/utils/create-node-env-conditional.js
+function createNodeEnvConditional(t, production, development) {
+  return t.conditionalExpression(
+    t.binaryExpression(
+      "===",
+      t.memberExpression(
+        t.memberExpression(t.identifier("process"), t.identifier("env")),
+        t.identifier("NODE_ENV"),
+      ),
+      t.stringLiteral("production"),
+    ),
+    production,
+    development,
+  )
+}
+
+// src/utils/transform-expression-with-styles.js
+const CSS_OBJECT_STRINGIFIED_ERROR =
+  "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."
+
+const transformExpressionWithStyles = ({
+  babel,
+  state,
+  path,
+  shouldLabel,
+  sourceMap = "",
+}: {
+  babel: Babel
+  state: PluginState
+}) => {
+  const autoLabel = state.opts.autoLabel || "dev-only"
+  const t = babel.types
+
+  if (t.isTaggedTemplateExpression(path)) {
+    if (!sourceMap && state.emotionSourceMap && path.node.quasi.loc !== void 0) {
+      sourceMap = getSourceMap(path.node.quasi.loc.start, state)
+    }
+    minify(path, t)
+  }
+
+  if (t.isCallExpression(path)) {
+    const canAppendStrings = path.node.arguments.every(
+      arg => arg.type !== "SpreadElement",
+    )
+    for (const node of path.get("arguments")) {
+      if (t.isObjectExpression(node)) {
+        node.replaceWith(simplifyObject(node.node, t))
+      }
+    }
+    path.node.arguments = joinStringLiterals(path.node.arguments, t)
+
+    if (
+      !sourceMap &&
+      canAppendStrings &&
+      state.emotionSourceMap &&
+      path.node.loc !== void 0
+    ) {
+      sourceMap = getSourceMap(path.node.loc.start, state)
+    }
+    const label =
+      shouldLabel && autoLabel !== "never" ? getLabelFromPath(path, state, t) : null
+
+    if (path.node.arguments.length === 1 && t.isStringLiteral(path.node.arguments[0])) {
+      const cssString = path.node.arguments[0].value.replace(/;$/, "")
+      let res = serializeStyles([
+        `${cssString}${label && autoLabel === "always" ? `;label:${label};` : ""}`,
+      ])
+      const prodNode = t.objectExpression([
+        t.objectProperty(t.identifier("name"), t.stringLiteral(res.name)),
+        t.objectProperty(t.identifier("styles"), t.stringLiteral(res.styles)),
+      ])
+      if (!state.emotionStringifiedCssId) {
+        const uid = state.file.scope.generateUidIdentifier(
+          "__EMOTION_STRINGIFIED_CSS_ERROR__",
+        )
+        state.emotionStringifiedCssId = uid
+        const cssObjectToString = t.functionDeclaration(
+          uid,
+          [],
+          t.blockStatement([
+            t.returnStatement(t.stringLiteral(CSS_OBJECT_STRINGIFIED_ERROR)),
+          ]),
+        )
+        cssObjectToString._compact = true
+        state.file.path.unshiftContainer("body", [cssObjectToString])
+      }
+      if (label && autoLabel === "dev-only") {
+        res = serializeStyles([`${cssString};label:${label};`])
+      }
+      const devNode = t.objectExpression(
+        [
+          t.objectProperty(t.identifier("name"), t.stringLiteral(res.name)),
+          t.objectProperty(t.identifier("styles"), t.stringLiteral(res.styles)),
+          sourceMap && t.objectProperty(t.identifier("map"), t.stringLiteral(sourceMap)),
+          t.objectProperty(
+            t.identifier("toString"),
+            t.cloneNode(state.emotionStringifiedCssId),
+          ),
+        ].filter(Boolean),
+      )
+      return createNodeEnvConditional(t, prodNode, devNode)
+    }
+    if (canAppendStrings && label) {
+      const labelString = `;label:${label};`
+      switch (autoLabel) {
+        case "dev-only": {
+          const labelConditional = createNodeEnvConditional(
+            t,
+            t.stringLiteral(""),
+            t.stringLiteral(labelString),
+          )
+          appendStringReturningExpressionToArguments(t, path, labelConditional)
+          break
+        }
+        case "always": {
+          appendStringReturningExpressionToArguments(t, path, labelString)
+          break
+        }
+      }
+    }
+
+    if (sourceMap) {
+      const sourceMapConditional = createNodeEnvConditional(
+        t,
+        t.stringLiteral(""),
+        t.stringLiteral(sourceMap),
+      )
+      appendStringReturningExpressionToArguments(t, path, sourceMapConditional)
+    }
+  }
+}
+
+// lib/utils/get-styled-options.js
+const getKnownProperties = (t, node) =>
+  new Set(
+    node.properties
+      .filter(n => t.isObjectProperty(n) && !n.computed)
+      .map(n => (t.isIdentifier(n.key) ? n.key.name : n.key.value)),
+  )
+const createObjectSpreadLike = (t, file, ...objs) =>
+  t.callExpression(file.addHelper("extends"), [t.objectExpression([]), ...objs])
+const getStyledOptions = (t, path, state) => {
+  const autoLabel = state.opts.autoLabel || "dev-only"
+  const args = path.node.arguments
+  const optionsArgument = args.length >= 2 ? args[1] : null
+  const prodProperties = []
+  let devProperties = null
+  const knownProperties =
+    optionsArgument && t.isObjectExpression(optionsArgument)
+      ? getKnownProperties(t, optionsArgument)
+      : /* @__PURE__ */ new Set()
+  if (!knownProperties.has("target")) {
+    prodProperties.push(
+      t.objectProperty(
+        t.identifier("target"),
+        t.stringLiteral(getTargetClassName(state, t)),
+      ),
+    )
+  }
+  const label =
+    autoLabel !== "never" && !knownProperties.has("label")
+      ? getLabelFromPath(path, state, t)
+      : null
+  if (label) {
+    const labelNode = t.objectProperty(t.identifier("label"), t.stringLiteral(label))
+    switch (autoLabel) {
+      case "always": {
+        prodProperties.push(labelNode)
+        break
+      }
+      case "dev-only": {
+        devProperties = [labelNode]
+        break
+      }
+    }
+  }
+  if (optionsArgument) {
+    if (
+      t.isConditionalExpression(optionsArgument) &&
+      t.isBinaryExpression(optionsArgument.test) &&
+      t.buildMatchMemberExpression("process.env.NODE_ENV")(optionsArgument.test.left)
+    ) {
+      return optionsArgument
+    }
+    if (!t.isObjectExpression(optionsArgument)) {
+      const prodNode = createObjectSpreadLike(
+        t,
+        state.file,
+        t.objectExpression(prodProperties),
+        optionsArgument,
+      )
+      return devProperties
+        ? createNodeEnvConditional(
+            t,
+            prodNode,
+            t.cloneNode(
+              createObjectSpreadLike(
+                t,
+                state.file,
+                t.objectExpression(prodProperties.concat(devProperties)),
+                optionsArgument,
+              ),
+            ),
+          )
+        : prodNode
+    }
+    prodProperties.unshift(...optionsArgument.properties)
+  }
+  return devProperties
+    ? createNodeEnvConditional(
+        t,
+        t.objectExpression(prodProperties),
+        t.cloneNode(t.objectExpression(prodProperties.concat(devProperties))),
+      )
+    : t.objectExpression(prodProperties)
+}
+
+// lib/utils/add-import.js
+function addImport(state, importSource, importedSpecifier, nameHint) {
+  const cacheKey = ["import", importSource, importedSpecifier].join(":")
+  if (state[cacheKey] === void 0) {
+    let importIdentifier
+    importIdentifier =
+      importedSpecifier === "default"
+        ? addDefault(state.file.path, importSource, {
+            nameHint,
+          })
+        : addNamed(state.file.path, importedSpecifier, importSource, {
+            nameHint,
+          })
+    state[cacheKey] = importIdentifier.name
+  }
+  return {
+    type: "Identifier",
+    name: state[cacheKey],
+  }
+}
+
+// lib/utils/transformer-macro.js
+type Macro = ReturnType<typeof createTransformerMacro>
+
+function createTransformerMacro(transformers3, { importSource }) {
+  const macro = createMacro(
+    ({ path, source, references, state, babel, isEmotionCall }) => {
+      if (!path) {
+        path = state.file.scope.path
+          .get("body")
+          .find(p => p.isImportDeclaration() && p.node.source.value === source)
+      }
+      if (/\/macro$/.test(source)) {
+        path
+          .get("source")
+          .replaceWith(babel.types.stringLiteral(source.replace(/\/macro$/, "")))
+      }
+      if (!isEmotionCall) {
+        state.emotionSourceMap = true
+      }
+      for (const importSpecifierName of Object.keys(references)) {
+        if (transformers3[importSpecifierName]) {
+          for (const reference of references[importSpecifierName].reverse()) {
+            let options
+            let transformer
+            if (Array.isArray(transformers3[importSpecifierName])) {
+              transformer = transformers3[importSpecifierName][0]
+              options = transformers3[importSpecifierName][1]
+            } else {
+              transformer = transformers3[importSpecifierName]
+              options = {}
+            }
+            transformer({
+              state,
+              babel,
+              path,
+              importSource,
+              importSpecifierName,
+              options,
+              reference,
+            })
+          }
+        }
+      }
+      return {
+        keepImports: true,
+      }
+    },
+  )
+  macro.transformers = transformers3
+  return macro
+}
+
+// lib/emotion-macro.js
+const isAlreadyTranspiled = path => {
+  if (!path.isCallExpression()) {
+    return false
+  }
+  const firstArgPath = path.get("arguments.0")
+  if (!firstArgPath) {
+    return false
+  }
+  if (!firstArgPath.isConditionalExpression()) {
+    return false
+  }
+  const alternatePath = firstArgPath.get("alternate")
+  if (!alternatePath.isObjectExpression()) {
+    return false
+  }
+  const properties = new Set(alternatePath.get("properties").map(p => p.node.key.name))
+  return ["name", "styles"].every(p => properties.has(p))
+}
+const createEmotionTransformer =
+  (isPure: boolean) =>
+  ({ state, babel, reference }: { state: PluginState; babel: Babel }) => {
+    const path = reference.parentPath
+    if (isAlreadyTranspiled(path)) {
+      return
+    }
+    if (isPure) {
+      path.addComment("leading", "#__PURE__")
+    }
+    const node = transformExpressionWithStyles({
+      babel,
+      state,
+      path,
+      shouldLabel: true,
+    })
+    if (node) {
+      path.node.arguments[0] = node
+    }
+  }
+const cssTransformers = {
+  css: createEmotionTransformer(true),
+  injectGlobal: createEmotionTransformer(false),
+  keyframes: createEmotionTransformer(true),
+}
+const createEmotionMacro = (importSource: string) =>
+  createTransformerMacro(cssTransformers, {
+    importSource,
+  })
+
+// lib/styled-macro.js
+const getReferencedSpecifier = (path, specifierName) => {
+  const specifiers = path.get("specifiers")
+  return specifierName === "default"
+    ? specifiers.find(p => p.isImportDefaultSpecifier())
+    : specifiers.find(p => p.node.local.name === specifierName)
+}
+
+type StyledTransformer = typeof styledTransformer
+
+const styledTransformer = ({
+  state,
+  babel,
+  path,
+  importSource,
+  reference,
+  importSpecifierName,
+  options: { styledBaseImport, isWeb },
+}: {
+  state: PluginState
+  babel: Babel
+  importSource: string
+  importSpecifierName: string
+  options: {
+    styledBaseImport: [string, string] | null
+    isWeb: boolean
+  }
+}) => {
+  const t = babel.types
+  const getStyledIdentifier = () => {
+    if (
+      !styledBaseImport ||
+      (styledBaseImport[0] === importSource &&
+        styledBaseImport[1] === importSpecifierName)
+    ) {
+      return t.cloneNode(reference.node)
+    }
+    if (path.node) {
+      const referencedSpecifier = getReferencedSpecifier(path, importSpecifierName)
+      if (referencedSpecifier) {
+        referencedSpecifier.remove()
+      }
+      if (path.get("specifiers").length === 0) {
+        path.remove()
+      }
+    }
+    const [baseImportSource, baseSpecifierName] = styledBaseImport
+    return addImport(state, baseImportSource, baseSpecifierName, "styled")
+  }
+  let createStyledComponentPath = null
+  if (t.isMemberExpression(reference.parent) && reference.parent.computed === false) {
+    if (
+      // checks if the first character is lowercase
+      // becasue we don't want to transform the member expression if
+      // it's in primitives/native
+      reference.parent.property.name.charCodeAt(0) > 96
+    ) {
+      reference.parentPath.replaceWith(
+        t.callExpression(getStyledIdentifier(), [
+          t.stringLiteral(reference.parent.property.name),
+        ]),
+      )
+    } else {
+      reference.replaceWith(getStyledIdentifier())
+    }
+    createStyledComponentPath = reference.parentPath
+  } else if (
+    reference.parentPath &&
+    t.isCallExpression(reference.parentPath) &&
+    reference.parent.callee === reference.node
+  ) {
+    reference.replaceWith(getStyledIdentifier())
+    createStyledComponentPath = reference.parentPath
+  }
+  if (!createStyledComponentPath) {
+    return
+  }
+  const styledCallLikeWithStylesPath = createStyledComponentPath.parentPath
+  const node = transformExpressionWithStyles({
+    path: styledCallLikeWithStylesPath,
+    state,
+    babel,
+    shouldLabel: false,
+  })
+  if (node && isWeb) {
+    styledCallLikeWithStylesPath.node.arguments[0] = node
+  }
+  styledCallLikeWithStylesPath.addComment("leading", "#__PURE__")
+  if (isWeb) {
+    createStyledComponentPath.node.arguments[1] = getStyledOptions(
+      t,
+      createStyledComponentPath,
+      state,
+    )
+  }
+}
+
+const createStyledMacro = ({
+  importSource,
+  originalImportSource = importSource,
+  baseImportName = "default",
+  isWeb,
+}: {
+  importSource: string
+  originalImportSource?: string
+  baseImportName?: string
+  isWeb: boolean
+}) =>
+  createTransformerMacro(
+    {
+      default: [
+        styledTransformer,
+        {
+          styledBaseImport: [importSource, baseImportName],
+          isWeb,
+        },
+      ],
+    },
+    {
+      importSource: originalImportSource,
+    },
+  )
+
+// lib/core-macro.js
+const transformCssCallExpression = ({
+  state,
+  babel,
+  path,
+  sourceMap,
+  annotateAsPure = true,
+}) => {
+  const node = transformExpressionWithStyles({
+    babel,
+    state,
+    path,
+    shouldLabel: true,
+    sourceMap,
+  })
+  if (node) {
+    path.replaceWith(node)
+    path.hoist()
+  } else if (annotateAsPure && path.isCallExpression()) {
+    path.addComment("leading", "#__PURE__")
+  }
+}
+const transformCsslessArrayExpression = ({ state, babel, path }) => {
+  const t = babel.types
+  const expressionPath = path.get("value.expression")
+  const sourceMap =
+    state.emotionSourceMap && path.node.loc !== void 0
+      ? getSourceMap(path.node.loc.start, state)
+      : ""
+  expressionPath.replaceWith(
+    t.callExpression(
+      // the name of this identifier doesn't really matter at all
+      // it'll never appear in generated code
+      t.identifier("___shouldNeverAppearCSS"),
+      path.node.value.expression.elements,
+    ),
+  )
+  transformCssCallExpression({
+    babel,
+    state,
+    path: expressionPath,
+    sourceMap,
+    annotateAsPure: false,
+  })
+  if (t.isCallExpression(expressionPath)) {
+    expressionPath.replaceWith(t.arrayExpression(expressionPath.node.arguments))
+  }
+}
+
+const transformCsslessObjectExpression = ({ state, babel, path, cssImport }) => {
+  const t = babel.types
+  const expressionPath = path.get("value.expression")
+  const sourceMap =
+    state.emotionSourceMap && path.node.loc !== void 0
+      ? getSourceMap(path.node.loc.start, state)
+      : ""
+  expressionPath.replaceWith(
+    t.callExpression(
+      // the name of this identifier doesn't really matter at all
+      // it'll never appear in generated code
+      t.identifier("___shouldNeverAppearCSS"),
+      [path.node.value.expression],
+    ),
+  )
+  transformCssCallExpression({
+    babel,
+    state,
+    path: expressionPath,
+    sourceMap,
+  })
+  if (t.isCallExpression(expressionPath)) {
+    expressionPath
+      .get("callee")
+      .replaceWith(addImport(state, cssImport.importSource, cssImport.cssExport, "css"))
+  }
+}
+const cssTransformer = ({
+  state,
+  babel,
+  reference,
+}: {
+  state: PluginState
+  babel: Babel
+}) => {
+  transformCssCallExpression({
+    babel,
+    state,
+    path: reference.parentPath,
+  })
+}
+
+const globalTransformer = ({
+  state,
+  babel,
+  reference,
+  importSource,
+  options,
+}: {
+  state: PluginState
+  babel: Babel
+  importSource: string
+  options: PluginOptions
+}) => {
+  const t = babel.types
+  if (
+    !t.isJSXIdentifier(reference.node) ||
+    !t.isJSXOpeningElement(reference.parentPath.node)
+  ) {
+    return
+  }
+  const stylesPropPath = reference.parentPath
+    .get("attributes")
+    .find(p => t.isJSXAttribute(p.node) && p.node.name.name === "styles")
+  if (!stylesPropPath) {
+    return
+  }
+  if (t.isJSXExpressionContainer(stylesPropPath.node.value)) {
+    if (t.isArrayExpression(stylesPropPath.node.value.expression)) {
+      transformCsslessArrayExpression({
+        state,
+        babel,
+        path: stylesPropPath,
+      })
+    } else if (t.isObjectExpression(stylesPropPath.node.value.expression)) {
+      transformCsslessObjectExpression({
+        state,
+        babel,
+        path: stylesPropPath,
+        cssImport:
+          options.cssExport === void 0
+            ? {
+                importSource: "@emotion/react",
+                cssExport: "css",
+              }
+            : {
+                importSource,
+                cssExport: options.cssExport,
+              },
+      })
+    }
+  }
+}
+const reactTransformers = {
+  // this is an empty function because this transformer is never called
+  // we don't run any transforms on `jsx` directly
+  // instead we use it as a hint to enable css prop optimization
+  jsx: () => {},
+  css: cssTransformer,
+  Global: globalTransformer,
+}
+const core_macro_default = createTransformerMacro(reactTransformers, {
+  importSource: "@emotion/react",
+})
+
+// lib/index.js
+const getCssExport = (reexported, importSource, mapping) => {
+  const cssExport = Object.keys(mapping).find(localExportName => {
+    const [packageName, exportName] = mapping[localExportName].canonicalImport
+    return packageName === "@emotion/react" && exportName === "css"
+  })
+  if (!cssExport) {
+    throw new Error(
+      `You have specified that '${importSource}' re-exports '${reexported}' from '@emotion/react' but it doesn't also re-export 'css' from '@emotion/react', 'css' is necessary for certain optimisations, please re-export it from '${importSource}'`,
+    )
+  }
+  return cssExport
+}
+const webStyledMacro = createStyledMacro({
+  importSource: "@emotion/styled/base",
+  originalImportSource: "@emotion/styled",
+  isWeb: true,
+})
+const nativeStyledMacro = createStyledMacro({
+  importSource: "@emotion/native",
+  originalImportSource: "@emotion/native",
+  isWeb: false,
+})
+const primitivesStyledMacro = createStyledMacro({
+  importSource: "@emotion/primitives",
+  originalImportSource: "@emotion/primitives",
+  isWeb: false,
+})
+
+const vanillaEmotionMacro = createEmotionMacro("@emotion/css")
+
+const transformersSource = {
+  "@emotion/css": cssTransformers,
+  "@emotion/react": reactTransformers,
+  "@emotion/styled": {
+    default: [
+      styledTransformer,
+      {
+        styledBaseImport: ["@emotion/styled/base", "default"],
+        isWeb: true,
+      },
+    ],
+  },
+  "@emotion/primitives": {
+    default: [
+      styledTransformer,
+      {
+        isWeb: false,
+      },
+    ],
+  },
+  "@emotion/native": {
+    default: [
+      styledTransformer,
+      {
+        isWeb: false,
+      },
+    ],
+  },
+}
+
+const AUTO_LABEL_VALUES = ["dev-only", "never", "always"]
+
+export default function (babel: Babel, options: PluginOptions): PluginObj<PluginState> {
+  if (options.autoLabel !== void 0 && !AUTO_LABEL_VALUES.includes(options.autoLabel)) {
+    throw new Error(
+      `The 'autoLabel' option must be undefined, or one of the following: ${AUTO_LABEL_VALUES.map(
+        s => `"${s}"`,
+      ).join(", ")}`,
+    )
+  }
+
+  const t = babel.types
+  return {
+    name: "@emotion",
+    // https://github.com/babel/babel/blob/0c97749e0fe8ad845b902e0b23a24b308b0bf05d/packages/babel-plugin-syntax-jsx/src/index.ts#L9-L18
+    manipulateOptions(_opts, parserOpts: ParserOptions) {
+      const { plugins } = parserOpts
+      if (
+        plugins!.some(p => {
+          const plugin = Array.isArray(p) ? p[0] : p
+          return plugin === "typescript" || plugin === "jsx"
+        })
+      ) {
+        return
+      }
+      plugins!.push("jsx")
+    },
+    visitor: {
+      ImportDeclaration(path, state) {
+        const macro = state.pluginMacros[path.node.source.value]
+        if (macro === void 0) {
+          return
+        }
+        if (t.isImportNamespaceSpecifier(path.node.specifiers[0])) {
+          return
+        }
+        const imports = path.node.specifiers.map(s => ({
+          localName: s.local.name,
+          importedName: s.type === "ImportDefaultSpecifier" ? "default" : s.imported.name,
+        }))
+        let shouldExit = false
+        let hasReferences = false
+        const referencePathsByImportName = imports.reduce(
+          (byName, { importedName, localName }) => {
+            const binding = path.scope.getBinding(localName)
+            if (!binding) {
+              shouldExit = true
+              return byName
+            }
+            byName[importedName] = binding.referencePaths
+            hasReferences = hasReferences || byName[importedName].length > 0
+            return byName
+          },
+          {} as Record<string, NodePath<Node>[]>,
+        )
+        if (!hasReferences || shouldExit) {
+          return
+        }
+        state.file.scope.path.traverse({
+          Identifier() {},
+        })
+        macro({
+          path,
+          references: referencePathsByImportName,
+          state,
+          babel,
+          isEmotionCall: true,
+          isBabelMacrosCall: true,
+        })
+      },
+
+      Program(path, state) {
+        const macros2 = {}
+        const jsxReactImports = [
+          {
+            importSource: "@emotion/react",
+            export: "jsx",
+            cssExport: "css",
+          },
+        ]
+        state.jsxReactImport = jsxReactImports[0]
+        for (const importSource of Object.keys(state.opts.importMap || {})) {
+          const value = state.opts.importMap[importSource]
+          const transformers = {}
+          for (const localExportName of Object.keys(value)) {
+            const { canonicalImport, ...options2 } = value[localExportName]
+            const [packageName, exportName] = canonicalImport
+            if (packageName === "@emotion/react" && exportName === "jsx") {
+              jsxReactImports.push({
+                importSource,
+                export: localExportName,
+                cssExport: getCssExport("jsx", importSource, value),
+              })
+              continue
+            }
+            const packageTransformers = transformersSource[packageName]
+            if (packageTransformers === undefined) {
+              throw new Error(
+                `There is no transformer for the export '${exportName}' in '${packageName}'`,
+              )
+            }
+            let extraOptions
+            if (packageName === "@emotion/react" && exportName === "Global") {
+              extraOptions = {
+                cssExport: getCssExport("Global", importSource, value),
+              }
+            } else if (packageName === "@emotion/styled" && exportName === "default") {
+              extraOptions = {
+                styledBaseImport: undefined,
+              }
+            }
+            const [exportTransformer, defaultOptions] =
+              // $FlowFixMe
+              Array.isArray(packageTransformers[exportName])
+                ? packageTransformers[exportName]
+                : [packageTransformers[exportName]]
+            transformers[localExportName] = [
+              exportTransformer,
+              {
+                ...defaultOptions,
+                ...extraOptions,
+                ...options2,
+              },
+            ]
+          }
+          macros2[importSource] = createTransformerMacro(transformers, {
+            importSource,
+          })
+        }
+
+        state.pluginMacros = {
+          "@emotion/styled": webStyledMacro,
+          "@emotion/react": core_macro_default,
+          "@emotion/primitives": primitivesStyledMacro,
+          "@emotion/native": nativeStyledMacro,
+          "@emotion/css": vanillaEmotionMacro,
+          ...macros2,
+        }
+
+        for (const node of path.node.body) {
+          if (t.isImportDeclaration(node)) {
+            const jsxReactImport = jsxReactImports.find(
+              thing =>
+                node.source.value === thing.importSource &&
+                node.specifiers.some(
+                  x => t.isImportSpecifier(x) && x.imported.name === thing.export,
+                ),
+            )
+            if (jsxReactImport) {
+              state.jsxReactImport = jsxReactImport
+              break
+            }
+          }
+        }
+        state.transformCssProp = state.opts.cssPropOptimization === false ? false : true
+        state.emotionSourceMap = state.opts.sourceMap === false ? false : true
+      },
+
+      JSXAttribute(path, state) {
+        if (path.node.name.name !== "css" || !state.transformCssProp) {
+          return
+        }
+        if (t.isJSXExpressionContainer(path.node.value)) {
+          if (t.isArrayExpression(path.node.value.expression)) {
+            transformCsslessArrayExpression({
+              state,
+              babel,
+              path,
+            })
+          } else if (t.isObjectExpression(path.node.value.expression)) {
+            transformCsslessObjectExpression({
+              state,
+              babel,
+              path,
+              cssImport: state.jsxReactImport,
+            })
+          }
+        }
+      },
+      CallExpression: {
+        exit(path, state) {
+          try {
+            if (
+              t.isMemberExpression(path.node.callee) &&
+              t.isIdentifier(path.node.callee.property) &&
+              path.node.callee.property.name === "withComponent"
+            ) {
+              switch (path.node.arguments.length) {
+                case 1:
+                case 2: {
+                  path.node.arguments[1] = getStyledOptions(t, path, state)
+                }
+              }
+            }
+          } catch (error) {
+            throw path.buildCodeFrameError(error)
+          }
+        },
+      },
+    },
+  }
+}
diff --git a/src/vendor/react-container-dimensions.tsx b/src/vendor/react-container-dimensions.tsx
new file mode 100644
index 0000000..1ee6cb1
--- /dev/null
+++ b/src/vendor/react-container-dimensions.tsx
@@ -0,0 +1,98 @@
+// https://github.com/okonet/react-container-dimensions/commit/a45406e8f704a791718f4c38f568fb9f66966b59
+// The MIT License (MIT)
+//
+// Copyright (c) 2016 Andrey Okonetchnikov
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+import { Component, createRef } from "react"
+import { debounce } from "lodash"
+
+interface ContainerDimensionsProps {
+  children(
+    props: ReturnType<typeof getDomNodeDimensions> & {
+      ref: React.RefObject<HTMLElement>
+    },
+  ): React.ReactNode
+  debounceTime?: number
+}
+
+function getDomNodeDimensions(node: Element) {
+  const { top, right, bottom, left, width, height } = node.getBoundingClientRect()
+  return { top, right, bottom, left, width, height }
+}
+
+export class ContainerDimensions extends Component<
+  ContainerDimensionsProps,
+  { initiated: false } | (DOMRect & { initiated: true })
+> {
+  #parentNode!: HTMLElement
+  #elementResizeDetector!: ResizeObserver
+  #componentIsMounted!: boolean
+  #child = createRef<HTMLElement>()
+  #onResizeDebounced?: () => void
+
+  constructor(props: ContainerDimensionsProps) {
+    super(props)
+    this.state = {
+      initiated: false,
+    }
+    this.onResize = this.onResize.bind(this)
+    if (props.debounceTime != null) {
+      this.#onResizeDebounced = debounce(this.onResize, props.debounceTime)
+    }
+  }
+
+  override componentDidMount() {
+    this.#parentNode = this.#child.current!.parentNode as HTMLElement
+    this.#elementResizeDetector = new ResizeObserver(() => {
+      if (this.props.debounceTime != null) {
+        this.#onResizeDebounced!()
+      } else {
+        this.onResize()
+      }
+    })
+    this.#elementResizeDetector.observe(this.#parentNode)
+
+    this.#componentIsMounted = true
+    this.onResize()
+  }
+
+  override componentWillUnmount() {
+    this.#componentIsMounted = false
+    this.#elementResizeDetector.unobserve(this.#parentNode)
+  }
+
+  onResize = () => {
+    const clientRect = getDomNodeDimensions(this.#parentNode)
+    if (this.#componentIsMounted) {
+      this.setState({
+        initiated: true,
+        ...clientRect,
+      })
+    }
+  }
+
+  override render() {
+    if (!this.state.initiated) {
+      return <div ref={this.#child as React.RefObject<HTMLDivElement>} />
+    }
+
+    return this.props.children({ ...this.state, ref: this.#child })
+  }
+}
diff --git a/src/vendor/react-files-drag-and-drop.tsx b/src/vendor/react-files-drag-and-drop.tsx
new file mode 100644
index 0000000..253e911
--- /dev/null
+++ b/src/vendor/react-files-drag-and-drop.tsx
@@ -0,0 +1,135 @@
+// https://github.com/YelyseiLukin/react-files-drag-and-drop/tree/c290a4bfc216db17137fcb9e31757ef437934025
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import { useId, useRef, useState } from "react"
+
+interface FilesDragAndDropProps {
+  className?: string
+  label?: React.ReactNode
+  multiple?: boolean
+  onUpload(files: File[]): void
+  onError(message: string): void
+  extensions?: string[]
+  children(props: { dragging: boolean; labelId: string }): React.ReactElement
+}
+
+export function FileInput({
+  className,
+  children,
+  multiple,
+  onError,
+  onUpload,
+  extensions: formats,
+}: FilesDragAndDropProps): React.ReactElement {
+  const labelId = useId()
+  const [dragging, setDragging] = useState(false)
+
+  const input = useRef<HTMLInputElement>(null)
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  const handleDragEnter = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    if (e.target !== e.currentTarget) {
+      setDragging(true)
+    }
+  }
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    // if (e.target === e.currentTarget) {
+    setDragging(false)
+    // }
+  }
+
+  const handleUpload = (files: File[]) => {
+    if (
+      formats &&
+      files.some(
+        file =>
+          !formats.some(format => file.name.toLowerCase().endsWith(format.toLowerCase())),
+      )
+    ) {
+      onError(`Only following file formats are acceptable: ${formats?.join(", ")}`)
+      return
+    }
+
+    if (files?.length) {
+      onUpload(files)
+    }
+  }
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    setDragging(false)
+
+    const files = e.dataTransfer?.files ? [...e.dataTransfer.files] : []
+
+    handleUpload(files)
+  }
+
+  const handleSelectFiles = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = [...e.target.files!]
+    handleUpload(files)
+  }
+
+  const openFileDialog = () => {
+    input.current?.click()
+  }
+
+  return (
+    <div
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onClick={openFileDialog}
+      onKeyDown={e => {
+        if (e.key === "Enter") {
+          openFileDialog()
+        }
+      }}
+      className={className}
+      aria-label="Upload files"
+      role="button"
+      tabIndex={0}
+    >
+      {children({ dragging, labelId })}
+      <input
+        type="file"
+        id={labelId}
+        style={{ display: "none" }}
+        accept={formats ? formats.map(format => `.${format}`).join(", ") : undefined}
+        multiple={multiple}
+        onChange={handleSelectFiles}
+      />
+    </div>
+  )
+}
diff --git a/src/vendor/react-responsive-modal/FocusTrap.tsx b/src/vendor/react-responsive-modal/FocusTrap.tsx
new file mode 100644
index 0000000..bfdac59
--- /dev/null
+++ b/src/vendor/react-responsive-modal/FocusTrap.tsx
@@ -0,0 +1,139 @@
+// SPDX-License-Identifier: MIT
+import { useEffect, useRef } from "react"
+
+interface FocusTrapProps {
+  container?: React.RefObject<HTMLElement> | null
+  initialFocusRef?: React.RefObject<HTMLElement>
+}
+
+export function FocusTrap({ container, initialFocusRef }: FocusTrapProps): null {
+  const refLastFocus = useRef<HTMLElement | null>()
+  /**
+   * Handle focus lock on the modal
+   */
+  useEffect(() => {
+    const handleKeyEvent = (event: KeyboardEvent) => {
+      if (container?.current) {
+        tabTrappingKey(event, container.current)
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyEvent)
+    // On mount we focus on the first focusable element in the modal if there is one
+    if (container?.current) {
+      const savePreviousFocus = () => {
+        // First we save the last focused element
+        // only if it's a focusable element
+        if (
+          candidateSelectors.findIndex(
+            selector => document.activeElement?.matches(selector),
+          ) !== -1
+        ) {
+          refLastFocus.current = document.activeElement as HTMLElement
+        }
+      }
+
+      if (initialFocusRef) {
+        savePreviousFocus()
+        // We need to schedule focusing on a next frame - this allows to focus on the modal root
+        requestAnimationFrame(() => {
+          initialFocusRef.current?.focus()
+        })
+      } else {
+        const allTabbingElements = getAllTabbingElements(container.current)
+        if (allTabbingElements[0]) {
+          savePreviousFocus()
+          allTabbingElements[0].focus()
+        }
+      }
+    }
+    return () => {
+      document.removeEventListener("keydown", handleKeyEvent)
+      // On unmount we restore the focus to the last focused element
+      refLastFocus.current?.focus()
+    }
+  }, [container, initialFocusRef])
+
+  return null
+}
+
+// https://github.com/alexandrzavalii/focus-trap-js/blob/master/src/index.js v1.1.0
+const candidateSelectors = [
+  "input",
+  "select",
+  "textarea",
+  "a[href]",
+  "button",
+  "[tabindex]",
+  "audio[controls]",
+  "video[controls]",
+  '[contenteditable]:not([contenteditable="false"])',
+]
+
+function isInput(node: HTMLElement): node is HTMLInputElement {
+  return node.tagName === "INPUT"
+}
+
+function isNotRadioOrTabbableRadio(node: HTMLElement) {
+  if (!isInput(node) || node.type !== "radio" || !node.name) {
+    return true
+  }
+  const radioSet = (node.form ?? node.ownerDocument).querySelectorAll<HTMLInputElement>(
+    `input[type="radio"][name="${node.name}"]`,
+  )
+  const checked = Array.from(radioSet).find(
+    radio => radio.checked && radio.form === node.form,
+  )
+  return checked === node || (checked === undefined && radioSet[0] === node)
+}
+
+function getAllTabbingElements(parentElem: HTMLElement) {
+  const { activeElement } = document
+  return Array.from<HTMLElement>(
+    parentElem.querySelectorAll(candidateSelectors.join(",")),
+  ).filter(
+    node =>
+      activeElement === node ||
+      (!(node as HTMLElement & { disabled?: boolean }).disabled &&
+        getTabindex(node) > -1 &&
+        // check if hidden: offsetParent being null will allow detecting cases where an element is invisible or inside an invisible element,
+        // as long as the element does not use position: fixed. For them, their visibility has to be checked directly as well.
+        !(node.offsetParent === null || getComputedStyle(node).visibility === "hidden") &&
+        isNotRadioOrTabbableRadio(node)),
+  )
+}
+
+function tabTrappingKey(event: KeyboardEvent, parentElem: HTMLElement) {
+  // check if current event keyCode is tab
+  if (!event || event.key !== "Tab") return
+
+  if (!parentElem.contains(event.target as HTMLElement)) {
+    return false
+  }
+
+  const allTabbingElements = getAllTabbingElements(parentElem)
+  const [firstFocusableElement] = allTabbingElements
+  const lastFocusableElement = allTabbingElements.at(-1)!
+
+  if (event.shiftKey && event.target === firstFocusableElement) {
+    lastFocusableElement.focus()
+    event.preventDefault()
+    return true
+  } else if (!event.shiftKey && event.target === lastFocusableElement) {
+    firstFocusableElement.focus()
+    event.preventDefault()
+    return true
+  }
+  return false
+}
+
+function getTabindex(node: HTMLElement) {
+  const tabindexAttr = parseInt(node.getAttribute("tabindex")!, 10)
+
+  if (!isNaN(tabindexAttr)) return tabindexAttr
+  // Browsers do not return tabIndex correctly for contentEditable nodes;
+  // so if they don't have a tabindex attribute specifically set, assume it's 0.
+
+  if (node.hasAttribute("contentEditable")) return 0
+  return node.tabIndex
+}
diff --git a/src/vendor/react-responsive-modal/index.tsx b/src/vendor/react-responsive-modal/index.tsx
new file mode 100644
index 0000000..66f2c1c
--- /dev/null
+++ b/src/vendor/react-responsive-modal/index.tsx
@@ -0,0 +1,493 @@
+// SPDX-License-Identifier: MIT
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import { type Ref, useEffect, useRef, useState } from "react"
+import { createPortal } from "react-dom"
+import { css, cx, keyframes } from "@emotion/css"
+import { lock, unlock } from "tua-body-scroll-lock"
+import { token } from "~/options/theme"
+import { FocusTrap } from "./FocusTrap"
+
+const useScrollLock = (
+  refModal: React.RefObject<HTMLElement>,
+  open: boolean,
+  showPortal: boolean,
+  blockScroll: boolean,
+) => {
+  const oldRef = useRef<HTMLElement | null>(null)
+
+  useEffect(() => {
+    if (open && refModal.current && blockScroll) {
+      oldRef.current = refModal.current
+      unlock(refModal.current)
+    }
+    return () => {
+      if (oldRef.current) {
+        lock(oldRef.current)
+        oldRef.current = null
+      }
+    }
+  }, [open, showPortal, refModal, blockScroll])
+}
+
+let modals: Ref<Element>[] = []
+
+function useModal(ref: Ref<Element>, open: boolean) {
+  useEffect(() => {
+    if (open) {
+      modals.push(ref)
+    }
+    return () => {
+      modals = modals.filter(modal => modal !== ref)
+    }
+  }, [open, ref])
+}
+
+const overlayAnimationIn = keyframes`
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+`
+const overlayAnimationOut = keyframes`
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+`
+const modalAnimationIn = keyframes`
+  0% {
+    transform: scale(0.96);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(100%);
+    opacity: 1;
+  }
+`
+const modalAnimationOut = keyframes`
+  0% {
+    transform: scale(100%);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.96);
+    opacity: 0;
+  }
+`
+
+export interface ModalProps {
+  /**
+   * Control if the modal is open or not.
+   */
+  open: boolean
+  /**
+   * Should the dialog be centered.
+   *
+   * Default to false.
+   */
+  center?: boolean
+  className?: string
+  /**
+   * Is the modal closable when user press esc key.
+   *
+   * Default to true.
+   */
+  closeOnEsc?: boolean
+  /**
+   * Is the modal closable when user click on overlay.
+   *
+   * Default to true.
+   */
+  closeOnOverlayClick?: boolean
+  /**
+   * Whether to block scrolling when dialog is open.
+   *
+   * Default to true.
+   */
+  blockScroll?: boolean
+  /**
+   * Show the close icon.
+   *
+   * Default to true.
+   */
+  showCloseIcon?: boolean
+  /**
+   * id attribute for the close icon button.
+   */
+  closeIconId?: string
+  /**
+   * Custom icon to render (svg, img, etc...).
+   */
+  closeIcon?: React.ReactNode
+  /**
+   * When the modal is open, trap focus within it.
+   *
+   * Default to true.
+   */
+  focusTrapped?: boolean
+  /**
+   * Element to focus when focus trap is used.
+   *
+   * Default to undefined.
+   */
+  initialFocusRef?: React.RefObject<HTMLElement>
+  /**
+   * You can specify a container prop which should be of type `Element`.
+   * The portal will be rendered inside that element.
+   * The default behavior will create a div node and render it at the at the end of document.body.
+   */
+  container?: Element | null
+  /**
+   * An object containing classNames or keyframe name to style the modal.
+   */
+  classNames?: {
+    overlay?: string
+    overlayAnimationIn?: string
+    overlayAnimationOut?: string
+    modalContainer?: string
+    modal?: string
+    modalAnimationIn?: string
+    modalAnimationOut?: string
+    closeButton?: string
+    closeIcon?: string
+  }
+  /**
+   * Animation duration in milliseconds.
+   *
+   * Default to 300.
+   */
+  animationDuration?: number
+  /**
+   * ARIA role for modal
+   *
+   * Default to 'dialog'.
+   */
+  role?: string
+  /**
+   * ARIA label for modal
+   */
+  ariaLabelledby?: string
+  /**
+   * ARIA description for modal
+   */
+  ariaDescribedby?: string
+  /**
+   * id attribute for modal container
+   */
+  containerId?: string
+  /**
+   * id attribute for modal
+   */
+  modalId?: string
+  /**
+   * Callback fired when the Modal is requested to be closed by a click on the overlay or when user press esc key.
+   */
+  onClose: () => void
+  /**
+   * Callback fired when the escape key is pressed.
+   */
+  onEscKeyDown?: (event: KeyboardEvent) => void
+  /**
+   * Callback fired when the overlay is clicked.
+   */
+  onOverlayClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+
+  children?: React.ReactNode
+}
+
+export const Modal = (props: ModalProps) => {
+  const {
+    open,
+    center,
+    blockScroll = true,
+    closeOnEsc = true,
+    closeOnOverlayClick = true,
+    container,
+    className,
+    classNames,
+    showCloseIcon = true,
+    closeIconId,
+    closeIcon,
+    focusTrapped = true,
+    initialFocusRef = undefined,
+    animationDuration = 300,
+    role = "dialog",
+    ariaDescribedby,
+    ariaLabelledby,
+    containerId,
+    modalId,
+    onClose,
+    onEscKeyDown,
+    onOverlayClick,
+    children,
+  } = props
+  const ref = useRef<HTMLDivElement>(null)
+  const refModal = useRef<HTMLDivElement>(null)
+  const refShouldClose = useRef<boolean | null>(null)
+  const refContainer = useRef<HTMLDivElement | null>(null)
+  // Lazily create the ref instance
+  // https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily
+  if (refContainer.current === null && typeof document !== "undefined") {
+    refContainer.current = document.createElement("div")
+  }
+
+  // The value should be false for srr, that way when the component is hydrated client side,
+  // it will match the server rendered content
+  const [showPortal, setShowPortal] = useState(false)
+
+  // Hook used to manage multiple modals opened at the same time
+  useModal(refModal, open)
+
+  // Hook used to manage the scroll
+  useScrollLock(refModal, open, showPortal, blockScroll)
+
+  const handleOpen = () => {
+    if (
+      refContainer.current &&
+      !container &&
+      !document.body.contains(refContainer.current)
+    ) {
+      document.body.appendChild(refContainer.current)
+    }
+
+    document.addEventListener("keydown", handleKeydown)
+  }
+
+  const handleClose = () => {
+    if (
+      refContainer.current &&
+      !container &&
+      document.body.contains(refContainer.current)
+    ) {
+      document.body.removeChild(refContainer.current)
+    }
+    document.removeEventListener("keydown", handleKeydown)
+  }
+
+  const handleKeydown = (event: KeyboardEvent) => {
+    // Only the last modal need to be escaped when pressing the esc key
+    if (event.keyCode !== 27 || modals.at(-1) !== refModal) {
+      return
+    }
+
+    onEscKeyDown?.(event)
+
+    if (closeOnEsc) {
+      onClose()
+    }
+  }
+
+  useEffect(
+    () => () => {
+      if (showPortal) {
+        // When the modal is closed or removed directly, cleanup the listeners
+        handleClose()
+      }
+    },
+    [showPortal],
+  )
+
+  useEffect(() => {
+    // If the open prop is changing, we need to open the modal
+    // This is also called on the first render if the open prop is true when the modal is created
+    if (open && !showPortal) {
+      setShowPortal(true)
+      handleOpen()
+    }
+  }, [open])
+
+  const handleClickOverlay = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    if (refShouldClose.current === null) {
+      refShouldClose.current = true
+    }
+
+    if (!refShouldClose.current) {
+      refShouldClose.current = null
+      return
+    }
+
+    onOverlayClick?.(event)
+
+    if (closeOnOverlayClick) {
+      onClose()
+    }
+
+    refShouldClose.current = null
+  }
+
+  const handleModalEvent = () => {
+    refShouldClose.current = false
+  }
+
+  const containerModal = container ?? refContainer.current
+
+  const overlayAnimation = open
+    ? classNames?.overlayAnimationIn ?? overlayAnimationIn
+    : classNames?.overlayAnimationOut ?? overlayAnimationOut
+
+  const modalAnimation = open
+    ? classNames?.modalAnimationIn ?? modalAnimationIn
+    : classNames?.modalAnimationOut ?? modalAnimationOut
+
+  if (!showPortal || !containerModal) {
+    return null
+  }
+
+  return createPortal(
+    <div
+      className={cx(
+        css`
+          position: fixed;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          z-index: 1000;
+        `,
+        className,
+      )}
+      data-testid="root"
+    >
+      <div
+        className={cx(
+          css`
+            background: rgba(0, 0, 0, 0.5);
+            position: fixed;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            z-index: -1;
+            animation-fill-mode: forwards !important;
+          `,
+          classNames?.overlay,
+        )}
+        data-testid="overlay"
+        aria-hidden={true}
+        style={{
+          animation: `${overlayAnimation} ${animationDuration}ms`,
+        }}
+      />
+      <div
+        ref={refModal}
+        id={containerId}
+        className={cx(
+          css`
+            height: 100%;
+            outline: 0;
+            overflow-x: hidden;
+            overflow-y: auto;
+            text-align: center;
+            /* Used to fix a screen glitch issues with the animation see https://github.com/pradel/react-responsive-modal/issues/495 */
+            animation-fill-mode: forwards !important;
+          `,
+          center &&
+            css`
+              &:after {
+                width: 0;
+                height: 100%;
+                content: "";
+                display: inline-block;
+                vertical-align: middle;
+              }
+            `,
+          classNames?.modalContainer,
+        )}
+        data-testid="modal-container"
+        onClick={handleClickOverlay}
+      >
+        <div
+          ref={ref}
+          className={cx(
+            css`
+              max-width: 800px;
+              display: inline-block;
+              text-align: left;
+              vertical-align: middle;
+              background: #ffffff;
+              box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25);
+              margin: 1.2rem;
+              padding: 1.2rem;
+              position: relative;
+              overflow-y: auto;
+              animation-fill-mode: forwards !important;
+
+              background: ${token.canvas.default};
+              border-radius: 5px;
+
+              body.dark & {
+                border: 1px solid ${token.border.default};
+              }
+            `,
+            classNames?.modal,
+          )}
+          style={{
+            animation: `${modalAnimation} ${animationDuration}ms`,
+          }}
+          onMouseDown={handleModalEvent}
+          onMouseUp={handleModalEvent}
+          onClick={handleModalEvent}
+          onAnimationEnd={() => {
+            if (!open) {
+              setShowPortal(false)
+            }
+          }}
+          id={modalId}
+          role={role}
+          aria-modal="true"
+          aria-labelledby={ariaLabelledby}
+          aria-describedby={ariaDescribedby}
+          tabIndex={-1}
+        >
+          {focusTrapped && (
+            <FocusTrap container={ref} initialFocusRef={initialFocusRef} />
+          )}
+          {children}
+          {showCloseIcon && (
+            <button
+              id={closeIconId}
+              className={cx(
+                css`
+                  position: absolute;
+                  top: 14px;
+                  right: 14px;
+                  border: none;
+                  padding: 0;
+                  cursor: pointer;
+                  background-color: transparent;
+                  display: flex;
+
+                  fill: var(--color-fg-default);
+                `,
+                classNames?.closeButton,
+              )}
+              onClick={onClose}
+              data-testid="close-button"
+            >
+              {closeIcon ? (
+                closeIcon
+              ) : (
+                <svg
+                  className={classNames?.closeIcon}
+                  width={28}
+                  height={28}
+                  viewBox="0 0 36 36"
+                >
+                  <path d="M28.5 9.62L26.38 7.5 18 15.88 9.62 7.5 7.5 9.62 15.88 18 7.5 26.38l2.12 2.12L18 20.12l8.38 8.38 2.12-2.12L20.12 18z" />
+                </svg>
+              )}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>,
+    containerModal,
+  )
+}
+
+export default Modal
diff --git a/src/vendor/react-responsive-modal/package.json b/src/vendor/react-responsive-modal/package.json
new file mode 100644
index 0000000..10623f4
--- /dev/null
+++ b/src/vendor/react-responsive-modal/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "react-responsive-modal",
+  "version": "6.4.1",
+  "description": "A simple responsive and accessible react modal",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "responsive",
+    "modal",
+    "mobile",
+    "flex"
+  ],
+  "repository": "git+https://github.com/pradel/react-responsive-modal.git",
+  "author": "Léo Pradel",
+  "bugs": {
+    "url": "https://github.com/pradel/react-responsive-modal/issues"
+  },
+  "homepage": "https://react-responsive-modal.leopradel.com/",
+  "funding": "https://github.com/sponsors/pradel",
+  "upstream": {
+    "version": 1,
+    "sources": {
+      "main": {
+        "repository": "git@github.com:pradel/react-responsive-modal.git",
+        "commit": "e5c9aac2cc0fb8439262d0f91718953ee1c2d210",
+        "branch": "master"
+      }
+    }
+  }
+}
diff --git a/src/vendor/react-tag-input-component/LICENSE b/src/vendor/react-tag-input-component/LICENSE
new file mode 100644
index 0000000..6bbd919
--- /dev/null
+++ b/src/vendor/react-tag-input-component/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Harsh Zalavadiya
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/src/vendor/react-tag-input-component/SuggestionMenu.tsx b/src/vendor/react-tag-input-component/SuggestionMenu.tsx
new file mode 100644
index 0000000..c4ac37e
--- /dev/null
+++ b/src/vendor/react-tag-input-component/SuggestionMenu.tsx
@@ -0,0 +1,127 @@
+import { css, cx } from "@emotion/css"
+import styled from "@emotion/styled"
+import { useEffect, useMemo, useRef, useState } from "react"
+import { menuClassName } from "~/options/hooks/useDropdownMenu"
+import { token } from "~/options/theme"
+import { useEvent } from "@aet/hooks"
+
+export interface Pos {
+  x: number
+  y: number
+}
+
+export function SuggestionMenu({
+  onAddTag,
+  onClose,
+  inputPos: pos,
+  suggestions = [],
+  inputValue,
+  currentValues: values,
+}: {
+  onAddTag: (tag: string) => void
+  onClose: () => void
+  inputPos: Pos | null
+  suggestions?: string[]
+  inputValue: string
+  currentValues: string[]
+}) {
+  const open = pos != null
+  const menuRef = useRef<HTMLUListElement>(null)
+  const [maxHeight, setMaxHeight] = useState("200px")
+
+  const searchTerm = useMemo(() => inputValue.toUpperCase(), [inputValue])
+  const filteredSuggestions = useMemo(
+    () =>
+      searchTerm
+        ? suggestions.filter(s => s.toUpperCase().includes(searchTerm))
+        : suggestions,
+    [suggestions, searchTerm],
+  )
+
+  useEffect(() => {
+    if (open && menuRef.current) {
+      const { top } = menuRef.current.getBoundingClientRect()
+      setMaxHeight(`calc(100vh - ${top}px - 20px)`)
+    }
+  }, [open])
+
+  if (!pos || !filteredSuggestions.length) {
+    return null
+  }
+
+  return (
+    <Suggestions style={{ position: "fixed", top: pos.y, left: pos.x }}>
+      <div className={menuClassName}>
+        <ul
+          role="menu"
+          aria-label="Menu"
+          ref={menuRef}
+          style={{ maxHeight }}
+          className={cx(
+            "szh-menu",
+            open && "szh-menu--state-open",
+            css`
+              overflow-y: auto;
+            `,
+          )}
+        >
+          {filteredSuggestions
+            .filter(suggestion => !values.includes(suggestion))
+            .map(suggestion => (
+              <Suggestion
+                key={suggestion}
+                suggestion={suggestion}
+                onAddTag={onAddTag}
+                onClose={onClose}
+              />
+            ))}
+        </ul>
+      </div>
+    </Suggestions>
+  )
+}
+
+function Suggestion({
+  suggestion,
+  onAddTag,
+  onClose,
+}: {
+  suggestion: string
+  onAddTag: (tag: string) => void
+  onClose: () => void
+}) {
+  const add = useEvent(() => {
+    onAddTag(suggestion)
+    onClose()
+  })
+
+  return (
+    <li
+      role="menuitem"
+      className={cx(
+        "szh-menu__item",
+        css`
+          &:focus {
+            outline: 1px solid ${token.border.default};
+          }
+        `,
+      )}
+      key={suggestion}
+      tabIndex={0}
+      onClick={add}
+      onKeyDown={e => {
+        if (e.key === "Enter") {
+          add()
+        } else if (e.key === "Escape") {
+          onClose()
+        }
+      }}
+    >
+      {suggestion}
+    </li>
+  )
+}
+
+const Suggestions = styled.div`
+  position: fixed;
+`
diff --git a/src/vendor/react-tag-input-component/Tag.tsx b/src/vendor/react-tag-input-component/Tag.tsx
new file mode 100644
index 0000000..8881670
--- /dev/null
+++ b/src/vendor/react-tag-input-component/Tag.tsx
@@ -0,0 +1,64 @@
+import styled from "@emotion/styled"
+import { token, vars } from "~/options/theme"
+import { useEvent } from "@aet/hooks"
+
+export interface TagRender {
+  (props: { Tag: typeof Tag; defaultProps: TagProps; tag: string }): React.ReactNode
+}
+
+export const defaultTagRender: TagRender = ({ Tag, tag, defaultProps }) => (
+  <Tag key={tag} {...defaultProps} />
+)
+
+interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
+  text: string
+  remove: (text: string) => void
+  disabled?: boolean
+  className?: string
+}
+
+export function Tag({ text, remove, disabled, ...props }: TagProps) {
+  const handleOnRemove: React.MouseEventHandler<HTMLButtonElement> = useEvent(e => {
+    e.stopPropagation()
+    remove(text)
+  })
+
+  return (
+    <TagContainer {...props}>
+      <span>{text}</span>
+      {!disabled && (
+        <Button type="button" onClick={handleOnRemove} aria-label={`Remove ${text}`}>
+          &#10005;
+        </Button>
+      )}
+    </TagContainer>
+  )
+}
+
+const TagContainer = styled.span`
+  align-items: center;
+  background: ${vars.backgroundActive};
+  border-radius: 0.375rem;
+  display: inline-flex;
+  justify-content: center;
+  padding: 0.15rem 0.25rem;
+  padding-left: 0.6rem;
+  user-select: none;
+  &:hover {
+    background-color: ${token.canvas.overlay};
+    color: unset;
+  }
+`
+
+const Button = styled.button`
+  background: none;
+  border: 0;
+  border-radius: 50%;
+  cursor: pointer;
+  line-height: inherit;
+  padding: 0 0.5rem;
+
+  &:hover {
+    color: #e53e3e;
+  }
+`
diff --git a/src/vendor/react-tag-input-component/index.tsx b/src/vendor/react-tag-input-component/index.tsx
new file mode 100644
index 0000000..5e99ed4
--- /dev/null
+++ b/src/vendor/react-tag-input-component/index.tsx
@@ -0,0 +1,218 @@
+import styled from "@emotion/styled"
+import { useCallback, useRef, useState } from "react"
+import { token } from "~/options/theme"
+import { useClickOutside, useEvent } from "@aet/hooks"
+import { type Pos, SuggestionMenu } from "./SuggestionMenu"
+import { Tag, type TagRender, defaultTagRender } from "./Tag"
+
+export interface TagsInputProps {
+  /** className for root element */
+  className?: string
+  /** value for name of input */
+  name?: string
+  /** placeholder for text input */
+  placeholder?: string
+  /** initial tags */
+  value?: string[]
+  /** onChange callback (added/removed) */
+  onChange: (tags: string[]) => void
+  /** input `onBlur` callback */
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void
+  /** when to add tag (i.e. `"Enter"`, `" "`) */
+  separators?: string[]
+  /** disable backspace remove */
+  disableBackspaceRemove?: boolean
+  /** if tag is already added then callback */
+  onExisting?: (tag: string) => void
+  /** on tag removed callback */
+  onRemoved?: (tag: string) => void
+  /** disable input and tags */
+  disabled?: boolean
+  /** Remove the tag but keep the word in the input to edit it on using Backspace Key */
+  isEditOnRemove?: boolean
+  /** Custom validation before adding tag */
+  beforeAddValidate?: (tag: string, existingTags: string[]) => boolean
+  /** input `onKeyUp` callback */
+  onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void
+  /** className for styling input and tags (e.g. `{ tag: "tag-cls", input: "input-cls" }`) */
+  classNames?: {
+    input?: string
+    tag?: string
+  }
+  /** suggestions for tags */
+  suggestions?: string[]
+  /** custom tag renderer */
+  tagRender?: TagRender
+}
+
+const defaultSeparators = ["Enter"]
+
+export const TagsInput = ({
+  beforeAddValidate,
+  className,
+  classNames,
+  disableBackspaceRemove,
+  disabled,
+  isEditOnRemove,
+  name,
+  onBlur,
+  onChange,
+  onExisting,
+  onKeyUp,
+  onRemoved,
+  placeholder,
+  separators = defaultSeparators,
+  suggestions,
+  tagRender = defaultTagRender,
+  value = [],
+}: TagsInputProps) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [input, setInput] = useState("")
+  const [inputPos, setInputPos] = useState<Pos | null>(null)
+  const closeMenu = useCallback(() => setInputPos(null), [])
+
+  const addTag = useEvent((text: string) => {
+    if (beforeAddValidate && !beforeAddValidate(text, value)) {
+      return false
+    }
+
+    if (value.includes(text)) {
+      onExisting?.(text)
+      return false
+    }
+
+    onChange([...value, text])
+    return true
+  })
+
+  useClickOutside(containerRef, () => {
+    setInputPos(null)
+  })
+
+  const handleOnKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useEvent(e => {
+    e.stopPropagation()
+
+    const text = e.currentTarget.value
+
+    if (e.key === "Escape") {
+      setInputPos(null)
+    }
+
+    if (!text && !disableBackspaceRemove && value.length && e.key === "Backspace") {
+      e.currentTarget.value = isEditOnRemove ? `${value.at(-1)} ` : ""
+      onChange([...value.slice(0, -1)])
+    }
+
+    if (text && separators.includes(e.key)) {
+      e.preventDefault()
+      if (addTag(text)) {
+        setInput("")
+      }
+    }
+  })
+
+  const onInputChange = useEvent((e: React.FormEvent<HTMLInputElement>) => {
+    setInput(e.currentTarget.value)
+  })
+
+  const onHandleInput = useEvent((e: React.FormEvent<HTMLInputElement>) => {
+    const { inputType } = e.nativeEvent as InputEvent
+    // Only intercept datalist selection events
+    if (
+      // Gecko
+      inputType === "insertReplacementText" ||
+      // WebKit and Blink
+      inputType === undefined
+    ) {
+      if (addTag(e.currentTarget.value)) {
+        setInput("")
+      }
+    }
+  })
+
+  const onTagRemove = useEvent((text: string) => {
+    onChange(value.filter(tag => tag !== text))
+    onRemoved?.(text)
+  })
+
+  const onInputFocus = useEvent((e: React.FocusEvent<HTMLInputElement>) => {
+    const input = e.currentTarget
+    const { top, left, height } = input.getBoundingClientRect()
+    setInputPos({ x: left, y: top + height })
+  })
+
+  return (
+    <TagsInputContainer ref={containerRef} aria-labelledby={name} className={className}>
+      {value.map(tag =>
+        tagRender({
+          Tag,
+          tag,
+          defaultProps: {
+            className: classNames?.tag,
+            text: tag,
+            remove: onTagRemove,
+            disabled,
+          },
+        }),
+      )}
+
+      <Input
+        className={classNames?.input}
+        disabled={disabled}
+        key="input"
+        name={name}
+        onBlur={onBlur}
+        onFocus={onInputFocus}
+        onInput={onHandleInput}
+        onKeyDown={handleOnKeyDown}
+        onKeyUp={onKeyUp}
+        placeholder={placeholder}
+        type="text"
+        value={input}
+        onChange={onInputChange}
+      />
+
+      <SuggestionMenu
+        onClose={closeMenu}
+        suggestions={suggestions}
+        currentValues={value}
+        onAddTag={addTag}
+        inputValue={input}
+        inputPos={inputPos}
+      />
+    </TagsInputContainer>
+  )
+}
+
+const TagsInputContainer = styled.div`
+  align-items: center;
+  border: 1px solid ${token.border.default};
+  border-radius: 0.375rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  line-height: 1.4;
+  padding: 0.5rem;
+
+  * {
+    box-sizing: border-box;
+    transition: all 0.2s ease;
+  }
+
+  &:focus-within {
+    border-color: #3182ce;
+    box-shadow: #3182ce 0px 0px 0px 1px;
+  }
+`
+
+const Input = styled.input`
+  border: 0;
+  outline: 0;
+  font-size: inherit;
+  line-height: inherit;
+  width: 50%;
+
+  &::-webkit-calendar-picker-indicator {
+    display: none !important;
+  }
+`
diff --git a/src/vendor/react-tag-input-component/package.json b/src/vendor/react-tag-input-component/package.json
new file mode 100644
index 0000000..96543c7
--- /dev/null
+++ b/src/vendor/react-tag-input-component/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "react-tag-input-component",
+  "description": "lightweight component for tag(s) input",
+  "version": "2.0.2",
+  "license": "MIT",
+  "author": "Harsh Zalavadiya",
+  "repository": "https://github.com/hc-oss/react-tag-input-component",
+  "main": "./index.tsx",
+  "upstream": {
+    "version": 1,
+    "sources": {
+      "main": {
+        "repository": "https://github.com/hc-oss/react-tag-input-component.git",
+        "commit": "861e4e760d080d418724bd63d84e9288617ff082",
+        "branch": "master"
+      }
+    }
+  }
+}
diff --git a/src/vendor/webextension-polyfill/LICENSE b/src/vendor/webextension-polyfill/LICENSE
new file mode 100644
index 0000000..a612ad9
--- /dev/null
+++ b/src/vendor/webextension-polyfill/LICENSE
@@ -0,0 +1,373 @@
+Mozilla Public License Version 2.0
+==================================
+
+1. Definitions
+--------------
+
+1.1. "Contributor"
+    means each individual or legal entity that creates, contributes to
+    the creation of, or owns Covered Software.
+
+1.2. "Contributor Version"
+    means the combination of the Contributions of others (if any) used
+    by a Contributor and that particular Contributor's Contribution.
+
+1.3. "Contribution"
+    means Covered Software of a particular Contributor.
+
+1.4. "Covered Software"
+    means Source Code Form to which the initial Contributor has attached
+    the notice in Exhibit A, the Executable Form of such Source Code
+    Form, and Modifications of such Source Code Form, in each case
+    including portions thereof.
+
+1.5. "Incompatible With Secondary Licenses"
+    means
+
+    (a) that the initial Contributor has attached the notice described
+        in Exhibit B to the Covered Software; or
+
+    (b) that the Covered Software was made available under the terms of
+        version 1.1 or earlier of the License, but not also under the
+        terms of a Secondary License.
+
+1.6. "Executable Form"
+    means any form of the work other than Source Code Form.
+
+1.7. "Larger Work"
+    means a work that combines Covered Software with other material, in
+    a separate file or files, that is not Covered Software.
+
+1.8. "License"
+    means this document.
+
+1.9. "Licensable"
+    means having the right to grant, to the maximum extent possible,
+    whether at the time of the initial grant or subsequently, any and
+    all of the rights conveyed by this License.
+
+1.10. "Modifications"
+    means any of the following:
+
+    (a) any file in Source Code Form that results from an addition to,
+        deletion from, or modification of the contents of Covered
+        Software; or
+
+    (b) any new file in Source Code Form that contains any Covered
+        Software.
+
+1.11. "Patent Claims" of a Contributor
+    means any patent claim(s), including without limitation, method,
+    process, and apparatus claims, in any patent Licensable by such
+    Contributor that would be infringed, but for the grant of the
+    License, by the making, using, selling, offering for sale, having
+    made, import, or transfer of either its Contributions or its
+    Contributor Version.
+
+1.12. "Secondary License"
+    means either the GNU General Public License, Version 2.0, the GNU
+    Lesser General Public License, Version 2.1, the GNU Affero General
+    Public License, Version 3.0, or any later versions of those
+    licenses.
+
+1.13. "Source Code Form"
+    means the form of the work preferred for making modifications.
+
+1.14. "You" (or "Your")
+    means an individual or a legal entity exercising rights under this
+    License. For legal entities, "You" includes any entity that
+    controls, is controlled by, or is under common control with You. For
+    purposes of this definition, "control" means (a) the power, direct
+    or indirect, to cause the direction or management of such entity,
+    whether by contract or otherwise, or (b) ownership of more than
+    fifty percent (50%) of the outstanding shares or beneficial
+    ownership of such entity.
+
+2. License Grants and Conditions
+--------------------------------
+
+2.1. Grants
+
+Each Contributor hereby grants You a world-wide, royalty-free,
+non-exclusive license:
+
+(a) under intellectual property rights (other than patent or trademark)
+    Licensable by such Contributor to use, reproduce, make available,
+    modify, display, perform, distribute, and otherwise exploit its
+    Contributions, either on an unmodified basis, with Modifications, or
+    as part of a Larger Work; and
+
+(b) under Patent Claims of such Contributor to make, use, sell, offer
+    for sale, have made, import, and otherwise transfer either its
+    Contributions or its Contributor Version.
+
+2.2. Effective Date
+
+The licenses granted in Section 2.1 with respect to any Contribution
+become effective for each Contribution on the date the Contributor first
+distributes such Contribution.
+
+2.3. Limitations on Grant Scope
+
+The licenses granted in this Section 2 are the only rights granted under
+this License. No additional rights or licenses will be implied from the
+distribution or licensing of Covered Software under this License.
+Notwithstanding Section 2.1(b) above, no patent license is granted by a
+Contributor:
+
+(a) for any code that a Contributor has removed from Covered Software;
+    or
+
+(b) for infringements caused by: (i) Your and any other third party's
+    modifications of Covered Software, or (ii) the combination of its
+    Contributions with other software (except as part of its Contributor
+    Version); or
+
+(c) under Patent Claims infringed by Covered Software in the absence of
+    its Contributions.
+
+This License does not grant any rights in the trademarks, service marks,
+or logos of any Contributor (except as may be necessary to comply with
+the notice requirements in Section 3.4).
+
+2.4. Subsequent Licenses
+
+No Contributor makes additional grants as a result of Your choice to
+distribute the Covered Software under a subsequent version of this
+License (see Section 10.2) or under the terms of a Secondary License (if
+permitted under the terms of Section 3.3).
+
+2.5. Representation
+
+Each Contributor represents that the Contributor believes its
+Contributions are its original creation(s) or it has sufficient rights
+to grant the rights to its Contributions conveyed by this License.
+
+2.6. Fair Use
+
+This License is not intended to limit any rights You have under
+applicable copyright doctrines of fair use, fair dealing, or other
+equivalents.
+
+2.7. Conditions
+
+Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted
+in Section 2.1.
+
+3. Responsibilities
+-------------------
+
+3.1. Distribution of Source Form
+
+All distribution of Covered Software in Source Code Form, including any
+Modifications that You create or to which You contribute, must be under
+the terms of this License. You must inform recipients that the Source
+Code Form of the Covered Software is governed by the terms of this
+License, and how they can obtain a copy of this License. You may not
+attempt to alter or restrict the recipients' rights in the Source Code
+Form.
+
+3.2. Distribution of Executable Form
+
+If You distribute Covered Software in Executable Form then:
+
+(a) such Covered Software must also be made available in Source Code
+    Form, as described in Section 3.1, and You must inform recipients of
+    the Executable Form how they can obtain a copy of such Source Code
+    Form by reasonable means in a timely manner, at a charge no more
+    than the cost of distribution to the recipient; and
+
+(b) You may distribute such Executable Form under the terms of this
+    License, or sublicense it under different terms, provided that the
+    license for the Executable Form does not attempt to limit or alter
+    the recipients' rights in the Source Code Form under this License.
+
+3.3. Distribution of a Larger Work
+
+You may create and distribute a Larger Work under terms of Your choice,
+provided that You also comply with the requirements of this License for
+the Covered Software. If the Larger Work is a combination of Covered
+Software with a work governed by one or more Secondary Licenses, and the
+Covered Software is not Incompatible With Secondary Licenses, this
+License permits You to additionally distribute such Covered Software
+under the terms of such Secondary License(s), so that the recipient of
+the Larger Work may, at their option, further distribute the Covered
+Software under the terms of either this License or such Secondary
+License(s).
+
+3.4. Notices
+
+You may not remove or alter the substance of any license notices
+(including copyright notices, patent notices, disclaimers of warranty,
+or limitations of liability) contained within the Source Code Form of
+the Covered Software, except that You may alter any license notices to
+the extent required to remedy known factual inaccuracies.
+
+3.5. Application of Additional Terms
+
+You may choose to offer, and to charge a fee for, warranty, support,
+indemnity or liability obligations to one or more recipients of Covered
+Software. However, You may do so only on Your own behalf, and not on
+behalf of any Contributor. You must make it absolutely clear that any
+such warranty, support, indemnity, or liability obligation is offered by
+You alone, and You hereby agree to indemnify every Contributor for any
+liability incurred by such Contributor as a result of warranty, support,
+indemnity or liability terms You offer. You may include additional
+disclaimers of warranty and limitations of liability specific to any
+jurisdiction.
+
+4. Inability to Comply Due to Statute or Regulation
+---------------------------------------------------
+
+If it is impossible for You to comply with any of the terms of this
+License with respect to some or all of the Covered Software due to
+statute, judicial order, or regulation then You must: (a) comply with
+the terms of this License to the maximum extent possible; and (b)
+describe the limitations and the code they affect. Such description must
+be placed in a text file included with all distributions of the Covered
+Software under this License. Except to the extent prohibited by statute
+or regulation, such description must be sufficiently detailed for a
+recipient of ordinary skill to be able to understand it.
+
+5. Termination
+--------------
+
+5.1. The rights granted under this License will terminate automatically
+if You fail to comply with any of its terms. However, if You become
+compliant, then the rights granted under this License from a particular
+Contributor are reinstated (a) provisionally, unless and until such
+Contributor explicitly and finally terminates Your grants, and (b) on an
+ongoing basis, if such Contributor fails to notify You of the
+non-compliance by some reasonable means prior to 60 days after You have
+come back into compliance. Moreover, Your grants from a particular
+Contributor are reinstated on an ongoing basis if such Contributor
+notifies You of the non-compliance by some reasonable means, this is the
+first time You have received notice of non-compliance with this License
+from such Contributor, and You become compliant prior to 30 days after
+Your receipt of the notice.
+
+5.2. If You initiate litigation against any entity by asserting a patent
+infringement claim (excluding declaratory judgment actions,
+counter-claims, and cross-claims) alleging that a Contributor Version
+directly or indirectly infringes any patent, then the rights granted to
+You by any and all Contributors for the Covered Software under Section
+2.1 of this License shall terminate.
+
+5.3. In the event of termination under Sections 5.1 or 5.2 above, all
+end user license agreements (excluding distributors and resellers) which
+have been validly granted by You or Your distributors under this License
+prior to termination shall survive termination.
+
+************************************************************************
+*                                                                      *
+*  6. Disclaimer of Warranty                                           *
+*  -------------------------                                           *
+*                                                                      *
+*  Covered Software is provided under this License on an "as is"       *
+*  basis, without warranty of any kind, either expressed, implied, or  *
+*  statutory, including, without limitation, warranties that the       *
+*  Covered Software is free of defects, merchantable, fit for a        *
+*  particular purpose or non-infringing. The entire risk as to the     *
+*  quality and performance of the Covered Software is with You.        *
+*  Should any Covered Software prove defective in any respect, You     *
+*  (not any Contributor) assume the cost of any necessary servicing,   *
+*  repair, or correction. This disclaimer of warranty constitutes an   *
+*  essential part of this License. No use of any Covered Software is   *
+*  authorized under this License except under this disclaimer.         *
+*                                                                      *
+************************************************************************
+
+************************************************************************
+*                                                                      *
+*  7. Limitation of Liability                                          *
+*  --------------------------                                          *
+*                                                                      *
+*  Under no circumstances and under no legal theory, whether tort      *
+*  (including negligence), contract, or otherwise, shall any           *
+*  Contributor, or anyone who distributes Covered Software as          *
+*  permitted above, be liable to You for any direct, indirect,         *
+*  special, incidental, or consequential damages of any character      *
+*  including, without limitation, damages for lost profits, loss of    *
+*  goodwill, work stoppage, computer failure or malfunction, or any    *
+*  and all other commercial damages or losses, even if such party      *
+*  shall have been informed of the possibility of such damages. This   *
+*  limitation of liability shall not apply to liability for death or   *
+*  personal injury resulting from such party's negligence to the       *
+*  extent applicable law prohibits such limitation. Some               *
+*  jurisdictions do not allow the exclusion or limitation of           *
+*  incidental or consequential damages, so this exclusion and          *
+*  limitation may not apply to You.                                    *
+*                                                                      *
+************************************************************************
+
+8. Litigation
+-------------
+
+Any litigation relating to this License may be brought only in the
+courts of a jurisdiction where the defendant maintains its principal
+place of business and such litigation shall be governed by laws of that
+jurisdiction, without reference to its conflict-of-law provisions.
+Nothing in this Section shall prevent a party's ability to bring
+cross-claims or counter-claims.
+
+9. Miscellaneous
+----------------
+
+This License represents the complete agreement concerning the subject
+matter hereof. If any provision of this License is held to be
+unenforceable, such provision shall be reformed only to the extent
+necessary to make it enforceable. Any law or regulation which provides
+that the language of a contract shall be construed against the drafter
+shall not be used to construe this License against a Contributor.
+
+10. Versions of the License
+---------------------------
+
+10.1. New Versions
+
+Mozilla Foundation is the license steward. Except as provided in Section
+10.3, no one other than the license steward has the right to modify or
+publish new versions of this License. Each version will be given a
+distinguishing version number.
+
+10.2. Effect of New Versions
+
+You may distribute the Covered Software under the terms of the version
+of the License under which You originally received the Covered Software,
+or under the terms of any subsequent version published by the license
+steward.
+
+10.3. Modified Versions
+
+If you create software not governed by this License, and you want to
+create a new license for such software, you may create and use a
+modified version of this License if you rename the license and remove
+any references to the name of the license steward (except to note that
+such modified license differs from this License).
+
+10.4. Distributing Source Code Form that is Incompatible With Secondary
+Licenses
+
+If You choose to distribute Source Code Form that is Incompatible With
+Secondary Licenses under the terms of this version of the License, the
+notice described in Exhibit B of this License must be attached.
+
+Exhibit A - Source Code Form License Notice
+-------------------------------------------
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+If it is not possible or desirable to put the notice in a particular
+file, then You may include the notice in a location (such as a LICENSE
+file in a relevant directory) where a recipient would be likely to look
+for such a notice.
+
+You may add additional accurate notices of copyright ownership.
+
+Exhibit B - "Incompatible With Secondary Licenses" Notice
+---------------------------------------------------------
+
+  This Source Code Form is "Incompatible With Secondary Licenses", as
+  defined by the Mozilla Public License, v. 2.0.
diff --git a/src/vendor/webextension-polyfill/README.md b/src/vendor/webextension-polyfill/README.md
new file mode 100644
index 0000000..c37dd32
--- /dev/null
+++ b/src/vendor/webextension-polyfill/README.md
@@ -0,0 +1,404 @@
+# WebExtension `browser` API Polyfill
+
+This library allows extensions that use the Promise-based WebExtension/BrowserExt API being standardized by the
+[W3 Browser Extensions][w3-browserext] group to run on Google Chrome with minimal or no changes.
+
+[![CircleCI](https://circleci.com/gh/mozilla/webextension-polyfill.svg?style=svg)](https://circleci.com/gh/mozilla/webextension-polyfill)
+[![codecov](https://codecov.io/gh/mozilla/webextension-polyfill/branch/master/graph/badge.svg)](https://codecov.io/gh/mozilla/webextension-polyfill)
+[![devDependency Status](https://david-dm.org/mozilla/webextension-polyfill/dev-status.svg)](https://david-dm.org/mozilla/webextension-polyfill#info=devDependencies)
+[![npm version](https://badge.fury.io/js/webextension-polyfill.svg)](https://badge.fury.io/js/webextension-polyfill)
+
+> This library doesn't (and it is not going to) polyfill API methods or options that are missing on Chrome but natively provided
+> on Firefox, and so the extension has to do its own "runtime feature detection" in those cases (and then eventually polyfill the
+> missing feature on its own or enable/disable some of the features accordingly).
+
+[w3-browserext]: https://www.w3.org/community/browserext/
+
+# Table of contents
+
+- [Supported Browsers](#supported-browsers)
+- [Installation](#installation)
+- [Basic Setup](#basic-setup)
+  - [Basic Setup with ES6 module loader](#basic-setup-with-es6-module-loader)
+  - [Basic Setup with module bundlers](#basic-setup-with-module-bundlers)
+  - [Usage with webpack without bundling](#usage-with-webpack-without-bundling)
+- [Using the Promise-based APIs](#using-the-promise-based-apis)
+- [Examples](#examples)
+- [Usage with TypeScript](#usage-with-typescript)
+- [Known Limitations and Incompatibilities](#known-limitations-and-incompatibilities)
+- [Contributing to this project](#contributing-to-this-project)
+
+# Supported Browsers
+
+| Browser                   | Support Level                                                                                        |
+| ------------------------- | ---------------------------------------------------------------------------------------------------- |
+| Chrome                    | _Officially Supported_ (with automated tests)                                                        |
+| Firefox                   | _Officially Supported as a NO-OP_ (with automated tests for comparison with the behaviors on Chrome) |
+| Opera / Edge (>=79.0.309) | _Unofficially Supported_ as a Chrome-compatible target (but not explicitly tested in automation)     |
+
+The polyfill is being tested explicitly (with automated tests that run on every pull request) on **officially supported**
+browsers (that are currently the last stable versions of Chrome and Firefox).
+
+On Firefox, this library is actually acting as a NO-OP: it detects that the `browser` API object is already defined
+and it does not create any custom wrappers.
+Firefox is still included in the automated tests, to ensure that no wrappers are being created when running on Firefox,
+and for comparison with the behaviors implemented by the library on Chrome.
+
+## Installation
+
+A new version of the library is built from this repository and released as an npm package.
+
+The npm package is named after this repo: [webextension-polyfill](https://www.npmjs.com/package/webextension-polyfill).
+
+For the extension that already include a package.json file, the last released version of this library can be quickly installed using:
+
+```
+npm install --save-dev webextension-polyfill
+```
+
+Inside the `dist/` directory of the npm package, there are both the minified and non-minified builds (and their related source map files):
+
+- node_modules/webextension-polyfill/dist/browser-polyfill.js
+- node_modules/webextension-polyfill/dist/browser-polyfill.min.js
+
+For extensions that do not include a package.json file and/or prefer to download and add the library directly into their own code repository, all the versions released on npm are also available for direct download from unpkg.com:
+
+- https://unpkg.com/webextension-polyfill/dist/
+
+and linked to the Github releases:
+
+- https://github.com/mozilla/webextension-polyfill/releases
+
+## Basic Setup
+
+In order to use the polyfill, it must be loaded into any context where `browser` APIs are accessed. The most common cases
+are background and content scripts, which can be specified in `manifest.json` (make sure to include the `browser-polyfill.js` script before any other scripts that use it):
+
+```javascript
+{
+  // ...
+
+  "background": {
+    "scripts": [
+      "browser-polyfill.js",
+      "background.js"
+    ]
+  },
+
+  "content_scripts": [{
+    // ...
+    "js": [
+      "browser-polyfill.js",
+      "content.js"
+    ]
+  }]
+}
+```
+
+For HTML documents, such as `browserAction` popups, or tab pages, it must be
+included more explicitly:
+
+```html
+<!doctype html>
+<html>
+  <head>
+    <script type="application/javascript" src="browser-polyfill.js"></script>
+    <script type="application/javascript" src="popup.js"></script>
+  </head>
+  <!-- ... -->
+</html>
+```
+
+And for dynamically-injected content scripts loaded by `tabs.executeScript`,
+it must be injected by a separate `executeScript` call, unless it has
+already been loaded via a `content_scripts` declaration in
+`manifest.json`:
+
+```javascript
+browser.tabs.executeScript({ file: "browser-polyfill.js" })
+browser.tabs.executeScript({ file: "content.js" }).then(result => {
+  // ...
+})
+```
+
+### Basic Setup with ES6 module loader
+
+The polyfill can also be loaded using the native ES6 module loader available in
+the recent browsers versions.
+
+Be aware that the polyfill module does not export the `browser` API object,
+but defines the `browser` object in the global namespace (i.e. `window`).
+
+```html
+<!doctype html>
+<html>
+  <head>
+    <script type="module" src="browser-polyfill.js"></script>
+    <script type="module" src="background.js"></script>
+  </head>
+  <!-- ... -->
+</html>
+```
+
+```javascript
+// In background.js (loaded after browser-polyfill.js) the `browser`
+// API object is already defined and provides the promise-based APIs.
+browser.runtime.onMessage.addListener(...);
+```
+
+### Basic Setup with module bundlers
+
+This library is built as a **UMD module** (Universal Module Definition), and so it can also be used with module bundlers (and explicitly tested on both **webpack** and **browserify**) or AMD module loaders.
+
+**src/background.js**:
+
+```javascript
+var browser = require("webextension-polyfill")
+
+browser.runtime.onMessage.addListener(async (msg, sender) => {
+  console.log("BG page received message", msg, "from", sender)
+  console.log("Stored data", await browser.storage.local.get())
+})
+
+browser.browserAction.onClicked.addListener(() => {
+  browser.tabs.executeScript({ file: "content.js" })
+})
+```
+
+**src/content.js**:
+
+```javascript
+var browser = require("webextension-polyfill")
+
+browser.storage.local
+  .set({
+    [window.location.hostname]: document.title,
+  })
+  .then(() => {
+    browser.runtime.sendMessage(`Saved document title for ${window.location.hostname}`)
+  })
+```
+
+By using `require("webextension-polyfill")`, the module bundler will use the non-minified version of this library, and the extension is supposed to minify the entire generated bundles as part of its own build steps.
+
+If the extension doesn't minify its own sources, it is still possible to explicitly ask the module bundler to use the minified version of this library, e.g.:
+
+```javascript
+var browser = require("webextension-polyfill/dist/browser-polyfill.min");
+
+...
+```
+
+### Usage with webpack without bundling
+
+The previous section explains how to bundle `webextension-polyfill` in each script. An alternative method is to include a single copy of the library in your extension, and load the library as shown in [Basic Setup](#basic-setup). You will need to install [copy-webpack-plugin](https://www.npmjs.com/package/copy-webpack-plugin):
+
+```sh
+npm install --save-dev copy-webpack-plugin
+```
+
+**In `webpack.config.js`,** import the plugin and configure it this way. It will copy the minified file into your _output_ folder, wherever your other webpack files are generated.
+
+```js
+const CopyWebpackPlugin = require("copy-webpack-plugin")
+
+module.exports = {
+  /* Your regular webpack config, probably including something like this:
+  output: {
+    path: path.join(__dirname, 'distribution'),
+    filename: '[name].js'
+  },
+  */
+  plugins: [
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: "node_modules/webextension-polyfill/dist/browser-polyfill.js",
+        },
+      ],
+    }),
+  ],
+}
+```
+
+And then include the file in each context, using the `manifest.json` just like in [Basic Setup](#basic-setup).
+
+## Using the Promise-based APIs
+
+The Promise-based APIs in the `browser` namespace work, for the most part,
+very similarly to the callback-based APIs in Chrome's `chrome` namespace.
+The major differences are:
+
+- Rather than receiving a callback argument, every async function returns a
+  `Promise` object, which resolves or rejects when the operation completes.
+
+- Rather than checking the `chrome.runtime.lastError` property from every
+  callback, code which needs to explicitly deal with errors registers a
+  separate Promise rejection handler.
+
+- Rather than receiving a `sendResponse` callback to send a response,
+  `onMessage` listeners simply return a Promise whose resolution value is
+  used as a reply.
+
+- Rather than nesting callbacks when a sequence of operations depend on each
+  other, Promise chaining is generally used instead.
+
+- The resulting Promises can be also used with `async` and `await`, rather
+  than dealt with directly.
+
+## Examples
+
+The following code will retrieve a list of URLs patterns from the `storage`
+API, retrieve a list of tabs which match any of them, reload each of those
+tabs, and notify the user that is has been done:
+
+```javascript
+browser.storage.local
+  .get("urls")
+  .then(({ urls }) => {
+    return browser.tabs.query({ url: urls })
+  })
+  .then(tabs => {
+    return Promise.all(Array.from(tabs, tab => browser.tabs.reload(tab.id)))
+  })
+  .then(() => {
+    return browser.notifications.create({
+      type: "basic",
+      iconUrl: "icon.png",
+      title: "Tabs reloaded",
+      message: "Your tabs have been reloaded",
+    })
+  })
+  .catch(error => {
+    console.error(`An error occurred while reloading tabs: ${error.message}`)
+  })
+```
+
+Or, using an async function:
+
+```javascript
+async function reloadTabs() {
+  try {
+    let { urls } = await browser.storage.local.get("urls")
+
+    let tabs = await browser.tabs.query({ url: urls })
+
+    await Promise.all(Array.from(tabs, tab => browser.tabs.reload(tab.id)))
+
+    await browser.notifications.create({
+      type: "basic",
+      iconUrl: "icon.png",
+      title: "Tabs reloaded",
+      message: "Your tabs have been reloaded",
+    })
+  } catch (error) {
+    console.error(`An error occurred while reloading tabs: ${error.message}`)
+  }
+}
+```
+
+It's also possible to use Promises effectively using two-way messaging.
+Communication between a background page and a tab content script, for example,
+looks something like this from the background page side:
+
+```javascript
+browser.tabs.sendMessage(tabId, "get-ids").then(results => {
+  processResults(results)
+})
+```
+
+And like this from the content script:
+
+```javascript
+browser.runtime.onMessage.addListener(msg => {
+  if (msg == "get-ids") {
+    return browser.storage.local.get("idPattern").then(({ idPattern }) => {
+      return Array.from(document.querySelectorAll(idPattern), elem => elem.textContent)
+    })
+  }
+})
+```
+
+or:
+
+```javascript
+browser.runtime.onMessage.addListener(async function (msg) {
+  if (msg == "get-ids") {
+    let { idPattern } = await browser.storage.local.get("idPattern")
+
+    return Array.from(document.querySelectorAll(idPattern), elem => elem.textContent)
+  }
+})
+```
+
+Or vice versa.
+
+## Usage with TypeScript
+
+There are multiple projects that add TypeScript support to your web-extension project:
+
+| Project                                                                                    | Description                                                                                                                                                                                                                    |
+| ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [@types/webextension-polyfill](https://www.npmjs.com/package/@types/webextension-polyfill) | Types and JS-Doc are automatically generated from the mozilla schema files, so it is always up-to-date with the latest APIs. Formerly known as [webextension-polyfill-ts](https://github.com/Lusito/webextension-polyfill-ts). |
+| [web-ext-types](https://github.com/kelseasy/web-ext-types)                                 | Manually maintained types based on MDN's documentation. No JS-Doc included.                                                                                                                                                    |
+| [@types/chrome](https://www.npmjs.com/package/@types/chrome)                               | Manually maintained types and JS-Doc. Only contains types for chrome extensions though!                                                                                                                                        |
+
+## Known Limitations and Incompatibilities
+
+This library tries to minimize the amount of "special handling" that a cross-browser extension has to do to be able to run on the supported browsers from a single codebase, but there are still cases when polyfillling the missing or incompatible behaviors or features is not possible or out of the scope of this polyfill.
+
+This section aims to keep track of the most common issues that an extension may have.
+
+### No callback supported by the Promise-based APIs on Chrome
+
+While some of the asynchronous API methods in Firefox (the ones that return a promise) also support the callback parameter (mostly as a side effect of the backward compatibility with the callback-based APIs available on Chrome), the Promise-based APIs provided by this library do not support the callback parameter (See ["#102 Cannot call browser.storage.local.get with callback"][I-102]).
+
+### No promise returned on Chrome for some API methods
+
+This library takes its knowledge of the APIs to wrap and their signatures from a metadata JSON file:
+[api-metadata.json](api-metadata.json).
+
+If an API method is not yet included in this "API metadata" file, it will not be recognized.
+Promises are not supported for unrecognized APIs, and callbacks have to be used for them.
+
+Chrome-only APIs have no promise version, because extensions that use such APIs
+would not be compatible with Firefox.
+
+File an issue in this repository for API methods that support callbacks in Chrome _and_
+Firefox but are currently missing from the "API metadata" file.
+
+### Issues that happen only when running on Firefox
+
+When an extension that uses this library doesn't behave as expected on Firefox, it is almost never an issue in this polyfill, but an issue with the native implementation in Firefox.
+
+"Firefox only" issues should be reported upstream on Bugzilla:
+
+- https://bugzilla.mozilla.org/enter_bug.cgi?product=WebExtensions&component=Untriaged
+
+### API methods or options that are only available when running in Firefox
+
+This library does not provide any polyfill for API methods and options that are only available on Firefox, and they are actually considered out of the scope of this library.
+
+### tabs.executeScript
+
+On Firefox `browser.tabs.executeScript` returns a promise which resolves to the result of the content script code that has been executed, which can be an immediate value or a Promise.
+
+On Chrome, the `browser.tabs.executeScript` API method as polyfilled by this library also returns a promise which resolves to the result of the content script code, but only immediate values are supported.
+If the content script code result is a Promise, the promise returned by `browser.tabs.executeScript` will be resolved to `undefined`.
+
+### MSEdge support
+
+MSEdge versions >= 79.0.309 are unofficially supported as a Chrome-compatible target (as for Opera or other Chrome-based browsers that also support extensions).
+
+MSEdge versions older than 79.0.309 are **unsupported**, for extension developers that still have to work on extensions for older MSEdge versions, the MSEdge `--ms-preload` manifest key and the [Microsoft Edge Extension Toolkit](https://docs.microsoft.com/en-us/microsoft-edge/extensions/guides/porting-chrome-extensions)'s Chrome API bridge can be used to be able to load the webextension-polyfill without any MSEdge specific changes.
+
+The following Github repository provides some additional detail about this strategy and a minimal test extension that shows how to put it together:
+
+- https://github.com/rpl/example-msedge-extension-with-webextension-polyfill
+
+## Contributing to this project
+
+Read the [contributing section](CONTRIBUTING.md) for additional information about how to build the library from this repository and how to contribute and test changes.
+
+[PR-114]: https://github.com/mozilla/webextension-polyfill/pull/114
+[I-102]: https://github.com/mozilla/webextension-polyfill/issues/102#issuecomment-379365343
diff --git a/src/vendor/webextension-polyfill/api-metadata.json b/src/vendor/webextension-polyfill/api-metadata.json
new file mode 100644
index 0000000..49117ee
--- /dev/null
+++ b/src/vendor/webextension-polyfill/api-metadata.json
@@ -0,0 +1,672 @@
+{
+  "alarms": {
+    "clear": {
+      "minArgs": 0,
+      "maxArgs": 1
+    },
+    "clearAll": {
+      "minArgs": 0,
+      "maxArgs": 0
+    },
+    "get": {
+      "minArgs": 0,
+      "maxArgs": 1
+    },
+    "getAll": {
+      "minArgs": 0,
+      "maxArgs": 0
+    }
+  },
+  "bookmarks": {
+    "create": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "get": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "getChildren": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "getRecent": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "getSubTree": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "getTree": {
+      "minArgs": 0,
+      "maxArgs": 0
+    },
+    "move": {
+      "minArgs": 2,
+      "maxArgs": 2
+    },
+    "remove": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "removeTree": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "search": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "update": {
+      "minArgs": 2,
+      "maxArgs": 2
+    }
+  },
+  "browserAction": {
+    "disable": {
+      "minArgs": 0,
+      "maxArgs": 1,
+      "fallbackToNoCallback": true
+    },
+    "enable": {
+      "minArgs": 0,
+      "maxArgs": 1,
+      "fallbackToNoCallback": true
+    },
+    "getBadgeBackgroundColor": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "getBadgeText": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "getPopup": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "getTitle": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "openPopup": {
+      "minArgs": 0,
+      "maxArgs": 0
+    },
+    "setBadgeBackgroundColor": {
+      "minArgs": 1,
+      "maxArgs": 1,
+      "fallbackToNoCallback": true
+    },
+    "setBadgeText": {
+      "minArgs": 1,
+      "maxArgs": 1,
+      "fallbackToNoCallback": true
+    },
+    "setIcon": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "setPopup": {
+      "minArgs": 1,
+      "maxArgs": 1,
+      "fallbackToNoCallback": true
+    },
+    "setTitle": {
+      "minArgs": 1,
+      "maxArgs": 1,
+      "fallbackToNoCallback": true
+    }
+  },
+  "browsingData": {
+    "remove": {
+      "minArgs": 2,
+      "maxArgs": 2
+    },
+    "removeCache": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "removeCookies": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "removeDownloads": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "removeFormData": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "removeHistory": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "removeLocalStorage": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "removePasswords": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "removePluginData": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "settings": {
+      "minArgs": 0,
+      "maxArgs": 0
+    }
+  },
+  "commands": {
+    "getAll": {
+      "minArgs": 0,
+      "maxArgs": 0
+    }
+  },
+  "contextMenus": {
+    "remove": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "removeAll": {
+      "minArgs": 0,
+      "maxArgs": 0
+    },
+    "update": {
+      "minArgs": 2,
+      "maxArgs": 2
+    }
+  },
+  "cookies": {
+    "get": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "getAll": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "getAllCookieStores": {
+      "minArgs": 0,
+      "maxArgs": 0
+    },
+    "remove": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "set": {
+      "minArgs": 1,
+      "maxArgs": 1
+    }
+  },
+  "devtools": {
+    "inspectedWindow": {
+      "eval": {
+        "minArgs": 1,
+        "maxArgs": 2,
+        "singleCallbackArg": false
+      }
+    },
+    "panels": {
+      "create": {
+        "minArgs": 3,
+        "maxArgs": 3,
+        "singleCallbackArg": true
+      },
+      "elements": {
+        "createSidebarPane": {
+          "minArgs": 1,
+          "maxArgs": 1
+        }
+      }
+    }
+  },
+  "downloads": {
+    "cancel": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "download": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "erase": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "getFileIcon": {
+      "minArgs": 1,
+      "maxArgs": 2
+    },
+    "open": {
+      "minArgs": 1,
+      "maxArgs": 1,
+      "fallbackToNoCallback": true
+    },
+    "pause": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "removeFile": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "resume": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "search": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "show": {
+      "minArgs": 1,
+      "maxArgs": 1,
+      "fallbackToNoCallback": true
+    }
+  },
+  "extension": {
+    "isAllowedFileSchemeAccess": {
+      "minArgs": 0,
+      "maxArgs": 0
+    },
+    "isAllowedIncognitoAccess": {
+      "minArgs": 0,
+      "maxArgs": 0
+    }
+  },
+  "history": {
+    "addUrl": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "deleteAll": {
+      "minArgs": 0,
+      "maxArgs": 0
+    },
+    "deleteRange": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "deleteUrl": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "getVisits": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "search": {
+      "minArgs": 1,
+      "maxArgs": 1
+    }
+  },
+  "i18n": {
+    "detectLanguage": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "getAcceptLanguages": {
+      "minArgs": 0,
+      "maxArgs": 0
+    }
+  },
+  "identity": {
+    "launchWebAuthFlow": {
+      "minArgs": 1,
+      "maxArgs": 1
+    }
+  },
+  "idle": {
+    "queryState": {
+      "minArgs": 1,
+      "maxArgs": 1
+    }
+  },
+  "management": {
+    "get": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "getAll": {
+      "minArgs": 0,
+      "maxArgs": 0
+    },
+    "getSelf": {
+      "minArgs": 0,
+      "maxArgs": 0
+    },
+    "setEnabled": {
+      "minArgs": 2,
+      "maxArgs": 2
+    },
+    "uninstallSelf": {
+      "minArgs": 0,
+      "maxArgs": 1
+    }
+  },
+  "notifications": {
+    "clear": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "create": {
+      "minArgs": 1,
+      "maxArgs": 2
+    },
+    "getAll": {
+      "minArgs": 0,
+      "maxArgs": 0
+    },
+    "getPermissionLevel": {
+      "minArgs": 0,
+      "maxArgs": 0
+    },
+    "update": {
+      "minArgs": 2,
+      "maxArgs": 2
+    }
+  },
+  "pageAction": {
+    "getPopup": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "getTitle": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "hide": {
+      "minArgs": 1,
+      "maxArgs": 1,
+      "fallbackToNoCallback": true
+    },
+    "setIcon": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "setPopup": {
+      "minArgs": 1,
+      "maxArgs": 1,
+      "fallbackToNoCallback": true
+    },
+    "setTitle": {
+      "minArgs": 1,
+      "maxArgs": 1,
+      "fallbackToNoCallback": true
+    },
+    "show": {
+      "minArgs": 1,
+      "maxArgs": 1,
+      "fallbackToNoCallback": true
+    }
+  },
+  "permissions": {
+    "contains": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "getAll": {
+      "minArgs": 0,
+      "maxArgs": 0
+    },
+    "remove": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "request": {
+      "minArgs": 1,
+      "maxArgs": 1
+    }
+  },
+  "runtime": {
+    "getBackgroundPage": {
+      "minArgs": 0,
+      "maxArgs": 0
+    },
+    "getPlatformInfo": {
+      "minArgs": 0,
+      "maxArgs": 0
+    },
+    "openOptionsPage": {
+      "minArgs": 0,
+      "maxArgs": 0
+    },
+    "requestUpdateCheck": {
+      "minArgs": 0,
+      "maxArgs": 0
+    },
+    "sendMessage": {
+      "minArgs": 1,
+      "maxArgs": 3
+    },
+    "sendNativeMessage": {
+      "minArgs": 2,
+      "maxArgs": 2
+    },
+    "setUninstallURL": {
+      "minArgs": 1,
+      "maxArgs": 1
+    }
+  },
+  "sessions": {
+    "getDevices": {
+      "minArgs": 0,
+      "maxArgs": 1
+    },
+    "getRecentlyClosed": {
+      "minArgs": 0,
+      "maxArgs": 1
+    },
+    "restore": {
+      "minArgs": 0,
+      "maxArgs": 1
+    }
+  },
+  "storage": {
+    "local": {
+      "clear": {
+        "minArgs": 0,
+        "maxArgs": 0
+      },
+      "get": {
+        "minArgs": 0,
+        "maxArgs": 1
+      },
+      "getBytesInUse": {
+        "minArgs": 0,
+        "maxArgs": 1
+      },
+      "remove": {
+        "minArgs": 1,
+        "maxArgs": 1
+      },
+      "set": {
+        "minArgs": 1,
+        "maxArgs": 1
+      }
+    },
+    "managed": {
+      "get": {
+        "minArgs": 0,
+        "maxArgs": 1
+      },
+      "getBytesInUse": {
+        "minArgs": 0,
+        "maxArgs": 1
+      }
+    },
+    "sync": {
+      "clear": {
+        "minArgs": 0,
+        "maxArgs": 0
+      },
+      "get": {
+        "minArgs": 0,
+        "maxArgs": 1
+      },
+      "getBytesInUse": {
+        "minArgs": 0,
+        "maxArgs": 1
+      },
+      "remove": {
+        "minArgs": 1,
+        "maxArgs": 1
+      },
+      "set": {
+        "minArgs": 1,
+        "maxArgs": 1
+      }
+    }
+  },
+  "tabs": {
+    "captureVisibleTab": {
+      "minArgs": 0,
+      "maxArgs": 2
+    },
+    "create": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "detectLanguage": {
+      "minArgs": 0,
+      "maxArgs": 1
+    },
+    "discard": {
+      "minArgs": 0,
+      "maxArgs": 1
+    },
+    "duplicate": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "executeScript": {
+      "minArgs": 1,
+      "maxArgs": 2
+    },
+    "get": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "getCurrent": {
+      "minArgs": 0,
+      "maxArgs": 0
+    },
+    "getZoom": {
+      "minArgs": 0,
+      "maxArgs": 1
+    },
+    "getZoomSettings": {
+      "minArgs": 0,
+      "maxArgs": 1
+    },
+    "goBack": {
+      "minArgs": 0,
+      "maxArgs": 1
+    },
+    "goForward": {
+      "minArgs": 0,
+      "maxArgs": 1
+    },
+    "highlight": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "insertCSS": {
+      "minArgs": 1,
+      "maxArgs": 2
+    },
+    "move": {
+      "minArgs": 2,
+      "maxArgs": 2
+    },
+    "query": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "reload": {
+      "minArgs": 0,
+      "maxArgs": 2
+    },
+    "remove": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "removeCSS": {
+      "minArgs": 1,
+      "maxArgs": 2
+    },
+    "sendMessage": {
+      "minArgs": 2,
+      "maxArgs": 3
+    },
+    "setZoom": {
+      "minArgs": 1,
+      "maxArgs": 2
+    },
+    "setZoomSettings": {
+      "minArgs": 1,
+      "maxArgs": 2
+    },
+    "update": {
+      "minArgs": 1,
+      "maxArgs": 2
+    }
+  },
+  "topSites": {
+    "get": {
+      "minArgs": 0,
+      "maxArgs": 0
+    }
+  },
+  "webNavigation": {
+    "getAllFrames": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "getFrame": {
+      "minArgs": 1,
+      "maxArgs": 1
+    }
+  },
+  "webRequest": {
+    "handlerBehaviorChanged": {
+      "minArgs": 0,
+      "maxArgs": 0
+    }
+  },
+  "windows": {
+    "create": {
+      "minArgs": 0,
+      "maxArgs": 1
+    },
+    "get": {
+      "minArgs": 1,
+      "maxArgs": 2
+    },
+    "getAll": {
+      "minArgs": 0,
+      "maxArgs": 1
+    },
+    "getCurrent": {
+      "minArgs": 0,
+      "maxArgs": 1
+    },
+    "getLastFocused": {
+      "minArgs": 0,
+      "maxArgs": 1
+    },
+    "remove": {
+      "minArgs": 1,
+      "maxArgs": 1
+    },
+    "update": {
+      "minArgs": 2,
+      "maxArgs": 2
+    }
+  }
+}
diff --git a/src/vendor/webextension-polyfill/package.json b/src/vendor/webextension-polyfill/package.json
new file mode 100644
index 0000000..684c8a7
--- /dev/null
+++ b/src/vendor/webextension-polyfill/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "webextension-polyfill",
+  "version": "0.10.0",
+  "description": "A lightweight polyfill library for Promise-based WebExtension APIs in Chrome.",
+  "main": "./src/browser-polyfill.js",
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mozilla/webextension-polyfill.git"
+  },
+  "author": "Mozilla",
+  "license": "MPL-2.0",
+  "bugs": {
+    "url": "https://github.com/mozilla/webextension-polyfill/issues"
+  },
+  "homepage": "https://github.com/mozilla/webextension-polyfill",
+  "nyc": {
+    "reporter": [
+      "lcov",
+      "text",
+      "html"
+    ],
+    "instrument": false
+  },
+  "scripts": {
+    "build": "npm run lint && grunt",
+    "prepublish": "npm run build && npm run test",
+    "test": "mocha",
+    "lint": "eslint *.js src/*.js scripts/**/*.js test/**/*.js",
+    "test-coverage": "cross-env COVERAGE=y nyc mocha",
+    "test-minified": "cross-env TEST_MINIFIED_POLYFILL=1 mocha",
+    "test-integration": "tape test/integration/test-*",
+    "test-integration:chrome": "cross-env TEST_BROWSER_TYPE=chrome npm run test-integration",
+    "test-integration:firefox": "cross-env TEST_BROWSER_TYPE=firefox npm run test-integration"
+  },
+  "upstream": {
+    "version": 1,
+    "sources": {
+      "main": {
+        "repository": "https://github.com/mozilla/webextension-polyfill.git",
+        "commit": "0cf8915cb1cd4f7792e1f25f022905a1384ba969",
+        "branch": "master"
+      }
+    }
+  }
+}
diff --git a/src/vendor/webextension-polyfill/scripts/compress.ts b/src/vendor/webextension-polyfill/scripts/compress.ts
new file mode 100755
index 0000000..518e877
--- /dev/null
+++ b/src/vendor/webextension-polyfill/scripts/compress.ts
@@ -0,0 +1,33 @@
+#!/usr/bin/env -S node -r esbin
+import fs from "fs"
+import { resolve } from "path"
+import { mapValues } from "lodash"
+import polyfill from "../api-metadata.json" assert { type: "json" }
+
+function convert(value: any): any {
+  return mapValues(value, value => {
+    if (typeof value === "object" && value != null) {
+      const keyCount = Object.keys(value).length
+      if (
+        value.minArgs != null &&
+        value.maxArgs != null &&
+        (keyCount === 2 || (keyCount === 3 && value.fallbackToNoCallback != null))
+      ) {
+        return [
+          value.minArgs,
+          value.maxArgs,
+          value.fallbackToNoCallback || undefined,
+        ].filter(x => x !== undefined)
+      } else {
+        return convert(value)
+      }
+    }
+
+    return value
+  })
+}
+
+fs.writeFileSync(
+  resolve(__dirname, "../api-metadata.generated.json"),
+  JSON.stringify(convert(polyfill)),
+)
diff --git a/src/vendor/webextension-polyfill/src/browser-polyfill.js b/src/vendor/webextension-polyfill/src/browser-polyfill.js
new file mode 100644
index 0000000..9c3d3bc
--- /dev/null
+++ b/src/vendor/webextension-polyfill/src/browser-polyfill.js
@@ -0,0 +1,592 @@
+/* @@package_name - v@@version - @@timestamp */
+/* -*- Mode: indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set sts=2 sw=2 et tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import apiMetadata from "../api-metadata.generated.json" assert { type: "json" }
+
+function convertMetadata(metadata) {
+  if (Array.isArray(metadata)) {
+    if (metadata.length === 2) {
+      const [minArgs, maxArgs] = metadata
+      return { minArgs, maxArgs }
+    } else if (metadata.length === 3) {
+      const [minArgs, maxArgs, fallbackToNoCallback] = metadata
+      return { minArgs, maxArgs, fallbackToNoCallback }
+    }
+  }
+
+  return metadata
+}
+
+const CHROME_SEND_MESSAGE_CALLBACK_NO_RESPONSE_MESSAGE =
+  "The message port closed before a response was received."
+
+// Wrapping the bulk of this polyfill in a one-time-use function is a minor
+// optimization for Firefox. Since Spidermonkey does not fully parse the
+// contents of a function until the first time it's called, and since it will
+// never actually need to be called, this allows the polyfill to be included
+// in Firefox nearly for free.
+const wrapAPIs = extensionAPIs => {
+  // NOTE: apiMetadata is associated to the content of the api-metadata.json file
+  // at build time by replacing the following "include" with the content of the
+  // JSON file.
+  // const apiMetadata = {
+  //   /* include("api-metadata.json") */
+  // };
+
+  if (Object.keys(apiMetadata).length === 0) {
+    throw new Error("api-metadata.json has not been included in browser-polyfill")
+  }
+
+  /**
+   * A WeakMap subclass which creates and stores a value for any key which does
+   * not exist when accessed, but behaves exactly as an ordinary WeakMap
+   * otherwise.
+   *
+   * @param {function} createItem
+   *        A function which will be called in order to create the value for any
+   *        key which does not exist, the first time it is accessed. The
+   *        function receives, as its only argument, the key being created.
+   */
+  class DefaultWeakMap extends WeakMap {
+    constructor(createItem, items = undefined) {
+      super(items)
+      this.createItem = createItem
+    }
+
+    get(key) {
+      if (!this.has(key)) {
+        this.set(key, this.createItem(key))
+      }
+
+      return super.get(key)
+    }
+  }
+
+  /**
+   * Returns true if the given object is an object with a `then` method, and can
+   * therefore be assumed to behave as a Promise.
+   *
+   * @param {*} value The value to test.
+   * @returns {boolean} True if the value is thenable.
+   */
+  const isThenable = value =>
+    value && typeof value === "object" && typeof value.then === "function"
+
+  /**
+   * Creates and returns a function which, when called, will resolve or reject
+   * the given promise based on how it is called:
+   *
+   * - If, when called, `chrome.runtime.lastError` contains a non-null object,
+   *   the promise is rejected with that value.
+   * - If the function is called with exactly one argument, the promise is
+   *   resolved to that value.
+   * - Otherwise, the promise is resolved to an array containing all of the
+   *   function's arguments.
+   *
+   * @param {object} promise
+   *        An object containing the resolution and rejection functions of a
+   *        promise.
+   * @param {function} promise.resolve
+   *        The promise's resolution function.
+   * @param {function} promise.reject
+   *        The promise's rejection function.
+   * @param {object} metadata
+   *        Metadata about the wrapped method which has created the callback.
+   * @param {boolean} metadata.singleCallbackArg
+   *        Whether or not the promise is resolved with only the first
+   *        argument of the callback, alternatively an array of all the
+   *        callback arguments is resolved. By default, if the callback
+   *        function is invoked with only a single argument, that will be
+   *        resolved to the promise, while all arguments will be resolved as
+   *        an array if multiple are given.
+   *
+   * @returns {function}
+   *        The generated callback function.
+   */
+  const makeCallback =
+    (promise, metadata) =>
+    (...callbackArgs) => {
+      if (extensionAPIs.runtime.lastError) {
+        promise.reject(new Error(extensionAPIs.runtime.lastError.message))
+      } else if (
+        metadata.singleCallbackArg ||
+        (callbackArgs.length <= 1 && metadata.singleCallbackArg !== false)
+      ) {
+        promise.resolve(callbackArgs[0])
+      } else {
+        promise.resolve(callbackArgs)
+      }
+    }
+
+  const pluralizeArguments = numArgs => (numArgs === 1 ? "argument" : "arguments")
+
+  /**
+   * Creates a wrapper function for a method with the given name and metadata.
+   *
+   * @param {string} name
+   *        The name of the method which is being wrapped.
+   * @param {object} metadata
+   *        Metadata about the method being wrapped.
+   * @param {integer} metadata.minArgs
+   *        The minimum number of arguments which must be passed to the
+   *        function. If called with fewer than this number of arguments, the
+   *        wrapper will raise an exception.
+   * @param {integer} metadata.maxArgs
+   *        The maximum number of arguments which may be passed to the
+   *        function. If called with more than this number of arguments, the
+   *        wrapper will raise an exception.
+   * @param {boolean} metadata.singleCallbackArg
+   *        Whether or not the promise is resolved with only the first
+   *        argument of the callback, alternatively an array of all the
+   *        callback arguments is resolved. By default, if the callback
+   *        function is invoked with only a single argument, that will be
+   *        resolved to the promise, while all arguments will be resolved as
+   *        an array if multiple are given.
+   *
+   * @returns {function(object, ...*)}
+   *       The generated wrapper function.
+   */
+  const wrapAsyncFunction = (name, metadata) => {
+    metadata = convertMetadata(metadata)
+
+    return function asyncFunctionWrapper(target, ...args) {
+      if (args.length < metadata.minArgs) {
+        throw new Error(
+          `Expected at least ${metadata.minArgs} ${pluralizeArguments(
+            metadata.minArgs,
+          )} for ${name}(), got ${args.length}`,
+        )
+      }
+
+      if (args.length > metadata.maxArgs) {
+        throw new Error(
+          `Expected at most ${metadata.maxArgs} ${pluralizeArguments(
+            metadata.maxArgs,
+          )} for ${name}(), got ${args.length}`,
+        )
+      }
+
+      return new Promise((resolve, reject) => {
+        if (metadata.fallbackToNoCallback) {
+          // This API method has currently no callback on Chrome, but it return a promise on Firefox,
+          // and so the polyfill will try to call it with a callback first, and it will fallback
+          // to not passing the callback if the first call fails.
+          try {
+            target[name](...args, makeCallback({ resolve, reject }, metadata))
+          } catch (cbError) {
+            console.warn(
+              `${name} API method doesn't seem to support the callback parameter, ` +
+                "falling back to call it without a callback: ",
+              cbError,
+            )
+
+            target[name](...args)
+
+            // Update the API method metadata, so that the next API calls will not try to
+            // use the unsupported callback anymore.
+            metadata.fallbackToNoCallback = false
+            metadata.noCallback = true
+
+            resolve()
+          }
+        } else if (metadata.noCallback) {
+          target[name](...args)
+          resolve()
+        } else {
+          target[name](...args, makeCallback({ resolve, reject }, metadata))
+        }
+      })
+    }
+  }
+  /**
+   * Wraps an existing method of the target object, so that calls to it are
+   * intercepted by the given wrapper function. The wrapper function receives,
+   * as its first argument, the original `target` object, followed by each of
+   * the arguments passed to the original method.
+   *
+   * @param {object} target
+   *        The original target object that the wrapped method belongs to.
+   * @param {function} method
+   *        The method being wrapped. This is used as the target of the Proxy
+   *        object which is created to wrap the method.
+   * @param {function} wrapper
+   *        The wrapper function which is called in place of a direct invocation
+   *        of the wrapped method.
+   *
+   * @returns {Proxy<function>}
+   *        A Proxy object for the given method, which invokes the given wrapper
+   *        method in its place.
+   */
+  const wrapMethod = (target, method, wrapper) =>
+    new Proxy(method, {
+      apply(targetMethod, thisObj, args) {
+        return wrapper.call(thisObj, target, ...args)
+      },
+    })
+
+  const hasOwnProperty = Function.call.bind(Object.prototype.hasOwnProperty)
+
+  /**
+   * Wraps an object in a Proxy which intercepts and wraps certain methods
+   * based on the given `wrappers` and `metadata` objects.
+   *
+   * @param {object} target
+   *        The target object to wrap.
+   *
+   * @param {object} [wrappers = {}]
+   *        An object tree containing wrapper functions for special cases. Any
+   *        function present in this object tree is called in place of the
+   *        method in the same location in the `target` object tree. These
+   *        wrapper methods are invoked as described in {@see wrapMethod}.
+   *
+   * @param {object} [metadata = {}]
+   *        An object tree containing metadata used to automatically generate
+   *        Promise-based wrapper functions for asynchronous. Any function in
+   *        the `target` object tree which has a corresponding metadata object
+   *        in the same location in the `metadata` tree is replaced with an
+   *        automatically-generated wrapper function, as described in
+   *        {@see wrapAsyncFunction}
+   *
+   * @returns {Proxy<object>}
+   */
+  const wrapObject = (target, wrappers = {}, metadata = {}) => {
+    const cache = Object.create(null)
+    const handlers = {
+      has(proxyTarget, prop) {
+        return prop in target || prop in cache
+      },
+
+      get(proxyTarget, prop, receiver) {
+        if (prop in cache) {
+          return cache[prop]
+        }
+
+        if (!(prop in target)) {
+          return undefined
+        }
+
+        let value = target[prop]
+
+        if (typeof value === "function") {
+          // This is a method on the underlying object. Check if we need to do
+          // any wrapping.
+
+          if (typeof wrappers[prop] === "function") {
+            // We have a special-case wrapper for this method.
+            value = wrapMethod(target, target[prop], wrappers[prop])
+          } else if (hasOwnProperty(metadata, prop)) {
+            // This is an async method that we have metadata for. Create a
+            // Promise wrapper for it.
+            const wrapper = wrapAsyncFunction(prop, metadata[prop])
+            value = wrapMethod(target, target[prop], wrapper)
+          } else {
+            // This is a method that we don't know or care about. Return the
+            // original method, bound to the underlying object.
+            value = value.bind(target)
+          }
+        } else if (
+          typeof value === "object" &&
+          value !== null &&
+          (hasOwnProperty(wrappers, prop) || hasOwnProperty(metadata, prop))
+        ) {
+          // This is an object that we need to do some wrapping for the children
+          // of. Create a sub-object wrapper for it with the appropriate child
+          // metadata.
+          value = wrapObject(value, wrappers[prop], metadata[prop])
+        } else if (hasOwnProperty(metadata, "*")) {
+          // Wrap all properties in * namespace.
+          value = wrapObject(value, wrappers[prop], metadata["*"])
+        } else {
+          // We don't need to do any wrapping for this property,
+          // so just forward all access to the underlying object.
+          Object.defineProperty(cache, prop, {
+            configurable: true,
+            enumerable: true,
+            get() {
+              return target[prop]
+            },
+            set(value) {
+              target[prop] = value
+            },
+          })
+
+          return value
+        }
+
+        cache[prop] = value
+        return value
+      },
+
+      set(proxyTarget, prop, value, receiver) {
+        if (prop in cache) {
+          cache[prop] = value
+        } else {
+          target[prop] = value
+        }
+        return true
+      },
+
+      defineProperty(proxyTarget, prop, desc) {
+        return Reflect.defineProperty(cache, prop, desc)
+      },
+
+      deleteProperty(proxyTarget, prop) {
+        return Reflect.deleteProperty(cache, prop)
+      },
+    }
+
+    // Per contract of the Proxy API, the "get" proxy handler must return the
+    // original value of the target if that value is declared read-only and
+    // non-configurable. For this reason, we create an object with the
+    // prototype set to `target` instead of using `target` directly.
+    // Otherwise we cannot return a custom object for APIs that
+    // are declared read-only and non-configurable, such as `chrome.devtools`.
+    //
+    // The proxy handlers themselves will still use the original `target`
+    // instead of the `proxyTarget`, so that the methods and properties are
+    // dereferenced via the original targets.
+    const proxyTarget = Object.create(target)
+    return new Proxy(proxyTarget, handlers)
+  }
+
+  /**
+   * Creates a set of wrapper functions for an event object, which handles
+   * wrapping of listener functions that those messages are passed.
+   *
+   * A single wrapper is created for each listener function, and stored in a
+   * map. Subsequent calls to `addListener`, `hasListener`, or `removeListener`
+   * retrieve the original wrapper, so that  attempts to remove a
+   * previously-added listener work as expected.
+   *
+   * @param {DefaultWeakMap<function, function>} wrapperMap
+   *        A DefaultWeakMap object which will create the appropriate wrapper
+   *        for a given listener function when one does not exist, and retrieve
+   *        an existing one when it does.
+   *
+   * @returns {object}
+   */
+  const wrapEvent = wrapperMap => ({
+    addListener(target, listener, ...args) {
+      target.addListener(wrapperMap.get(listener), ...args)
+    },
+
+    hasListener(target, listener) {
+      return target.hasListener(wrapperMap.get(listener))
+    },
+
+    removeListener(target, listener) {
+      target.removeListener(wrapperMap.get(listener))
+    },
+  })
+
+  const onRequestFinishedWrappers = new DefaultWeakMap(listener => {
+    if (typeof listener !== "function") {
+      return listener
+    }
+
+    /**
+     * Wraps an onRequestFinished listener function so that it will return a
+     * `getContent()` property which returns a `Promise` rather than using a
+     * callback API.
+     *
+     * @param {object} req
+     *        The HAR entry object representing the network request.
+     */
+    return function onRequestFinished(req) {
+      const wrappedReq = wrapObject(
+        req,
+        {} /* wrappers */,
+        {
+          getContent: {
+            minArgs: 0,
+            maxArgs: 0,
+          },
+        },
+      )
+      listener(wrappedReq)
+    }
+  })
+
+  const onMessageWrappers = new DefaultWeakMap(listener => {
+    if (typeof listener !== "function") {
+      return listener
+    }
+
+    /**
+     * Wraps a message listener function so that it may send responses based on
+     * its return value, rather than by returning a sentinel value and calling a
+     * callback. If the listener function returns a Promise, the response is
+     * sent when the promise either resolves or rejects.
+     *
+     * @param {*} message
+     *        The message sent by the other end of the channel.
+     * @param {object} sender
+     *        Details about the sender of the message.
+     * @param {function(*)} sendResponse
+     *        A callback which, when called with an arbitrary argument, sends
+     *        that value as a response.
+     * @returns {boolean}
+     *        True if the wrapped listener returned a Promise, which will later
+     *        yield a response. False otherwise.
+     */
+    return function onMessage(message, sender, sendResponse) {
+      let didCallSendResponse = false
+
+      let wrappedSendResponse
+      const sendResponsePromise = new Promise(resolve => {
+        wrappedSendResponse = function (response) {
+          didCallSendResponse = true
+          resolve(response)
+        }
+      })
+
+      let result
+      try {
+        result = listener(message, sender, wrappedSendResponse)
+      } catch (err) {
+        result = Promise.reject(err)
+      }
+
+      const isResultThenable = result !== true && isThenable(result)
+
+      // If the listener didn't returned true or a Promise, or called
+      // wrappedSendResponse synchronously, we can exit earlier
+      // because there will be no response sent from this listener.
+      if (result !== true && !isResultThenable && !didCallSendResponse) {
+        return false
+      }
+
+      // A small helper to send the message if the promise resolves
+      // and an error if the promise rejects (a wrapped sendMessage has
+      // to translate the message into a resolved promise or a rejected
+      // promise).
+      const sendPromisedResult = promise => {
+        promise
+          .then(
+            msg => {
+              // send the message value.
+              sendResponse(msg)
+            },
+            error => {
+              // Send a JSON representation of the error if the rejected value
+              // is an instance of error, or the object itself otherwise.
+              let message
+              if (
+                error &&
+                (error instanceof Error || typeof error.message === "string")
+              ) {
+                message = error.message
+              } else {
+                message = "An unexpected error occurred"
+              }
+
+              sendResponse({
+                __mozWebExtensionPolyfillReject__: true,
+                message,
+              })
+            },
+          )
+          .catch(err => {
+            // Print an error on the console if unable to send the response.
+            console.error("Failed to send onMessage rejected reply", err)
+          })
+      }
+
+      // If the listener returned a Promise, send the resolved value as a
+      // result, otherwise wait the promise related to the wrappedSendResponse
+      // callback to resolve and send it as a response.
+      if (isResultThenable) {
+        sendPromisedResult(result)
+      } else {
+        sendPromisedResult(sendResponsePromise)
+      }
+
+      // Let Chrome know that the listener is replying.
+      return true
+    }
+  })
+
+  const wrappedSendMessageCallback = ({ reject, resolve }, reply) => {
+    if (extensionAPIs.runtime.lastError) {
+      // Detect when none of the listeners replied to the sendMessage call and resolve
+      // the promise to undefined as in Firefox.
+      // See https://github.com/mozilla/webextension-polyfill/issues/130
+      if (
+        extensionAPIs.runtime.lastError.message ===
+        CHROME_SEND_MESSAGE_CALLBACK_NO_RESPONSE_MESSAGE
+      ) {
+        resolve()
+      } else {
+        reject(new Error(extensionAPIs.runtime.lastError.message))
+      }
+    } else if (reply && reply.__mozWebExtensionPolyfillReject__) {
+      // Convert back the JSON representation of the error into
+      // an Error instance.
+      reject(new Error(reply.message))
+    } else {
+      resolve(reply)
+    }
+  }
+
+  const wrappedSendMessage = (name, metadata, apiNamespaceObj, ...args) => {
+    metadata = convertMetadata(metadata)
+    if (args.length < metadata.minArgs) {
+      throw new Error(
+        `Expected at least ${metadata.minArgs} ${pluralizeArguments(
+          metadata.minArgs,
+        )} for ${name}(), got ${args.length}`,
+      )
+    }
+
+    if (args.length > metadata.maxArgs) {
+      throw new Error(
+        `Expected at most ${metadata.maxArgs} ${pluralizeArguments(
+          metadata.maxArgs,
+        )} for ${name}(), got ${args.length}`,
+      )
+    }
+
+    return new Promise((resolve, reject) => {
+      const wrappedCb = wrappedSendMessageCallback.bind(null, { resolve, reject })
+      args.push(wrappedCb)
+      apiNamespaceObj.sendMessage(...args)
+    })
+  }
+
+  const staticWrappers = {
+    devtools: {
+      network: {
+        onRequestFinished: wrapEvent(onRequestFinishedWrappers),
+      },
+    },
+    runtime: {
+      onMessage: wrapEvent(onMessageWrappers),
+      onMessageExternal: wrapEvent(onMessageWrappers),
+      sendMessage: wrappedSendMessage.bind(null, "sendMessage", [1, 3]),
+    },
+    tabs: {
+      sendMessage: wrappedSendMessage.bind(null, "sendMessage", [2, 3]),
+    },
+  }
+  const settingMetadata = {
+    clear: [1, 1],
+    get: [1, 1],
+    set: [1, 1],
+  }
+  apiMetadata.privacy = {
+    network: { "*": settingMetadata },
+    services: { "*": settingMetadata },
+    websites: { "*": settingMetadata },
+  }
+
+  return wrapObject(extensionAPIs, staticWrappers, apiMetadata)
+}
+
+export default globalThis.browser === undefined ||
+Object.getPrototypeOf(globalThis.browser) !== Object.prototype
+  ? wrapAPIs(globalThis.chrome)
+  : globalThis.browser
diff --git a/src/vendor/why-did-you-render/.gitignore b/src/vendor/why-did-you-render/.gitignore
new file mode 100644
index 0000000..e69de29
diff --git a/src/vendor/why-did-you-render/LICENSE b/src/vendor/why-did-you-render/LICENSE
new file mode 100644
index 0000000..097f430
--- /dev/null
+++ b/src/vendor/why-did-you-render/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018-present, Vitali Zaidman <vzaidman@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/src/vendor/why-did-you-render/README.md b/src/vendor/why-did-you-render/README.md
new file mode 100644
index 0000000..530be46
--- /dev/null
+++ b/src/vendor/why-did-you-render/README.md
@@ -0,0 +1,432 @@
+<p align="center">
+  <img src="images/WDYR-logo.jpg" width="300px" />
+</p>
+
+# Why Did You Render
+
+[![npm version](https://badge.fury.io/js/%40welldone-software%2Fwhy-did-you-render.svg)](https://badge.fury.io/js/%40welldone-software%2Fwhy-did-you-render)
+[![Build Status](https://travis-ci.com/welldone-software/why-did-you-render.svg?branch=master)](https://travis-ci.com/welldone-software/why-did-you-render)
+![NPM](https://img.shields.io/npm/l/@welldone-software/why-did-you-render?style=flat)
+![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/@welldone-software/why-did-you-render)
+[![Coverage Status](https://coveralls.io/repos/github/welldone-software/why-did-you-render/badge.svg?branch=add-e2e-tests-using-cypress)](https://coveralls.io/github/welldone-software/why-did-you-render?branch=add-e2e-tests-using-cypress)
+
+`why-did-you-render` by [Welldone Software](https://welldone.software/) monkey patches **`React`** to notify you about potentially avoidable re-renders. (Works with **`React Native`** as well.)
+
+For example, if you pass `style={{width: '100%'}}` to a big pure component it would always re-render on every element creation:
+
+```jsx
+<BigListPureComponent style={{ width: "100%" }} />
+```
+
+It can also help you to simply track when and why a certain component re-renders.
+
+## Setup
+
+The library was tested [(unit tests and E2E)](<(https://travis-ci.com/welldone-software/why-did-you-render.svg?branch=master)>) with **`React@18`**, `React@17` and `React@16`.
+
+```
+npm install @welldone-software/why-did-you-render --save-dev
+```
+
+or
+
+```
+yarn add --dev @welldone-software/why-did-you-render
+```
+
+If you use the `automatic` JSX transformation, set the library to be the import source, and make sure `preset-react` is in `development` mode.
+
+```js
+;[
+  "@babel/preset-react",
+  {
+    runtime: "automatic",
+    development: process.env.NODE_ENV === "development",
+    importSource: "@welldone-software/why-did-you-render",
+  },
+]
+```
+
+> Notice: Create React App (CRA) ^4 **does use the `automatic` JSX transformation.** > [See the following comment on how to do this step with CRA](https://github.com/welldone-software/why-did-you-render/issues/154#issuecomment-773905769)
+
+Create a `wdyr.js` file and import it as **the first import** in your application.
+
+`wdyr.js`:
+
+```jsx
+import React from "react"
+
+if (process.env.NODE_ENV === "development") {
+  const whyDidYouRender = require("@welldone-software/why-did-you-render")
+  whyDidYouRender(React, {
+    trackAllPureComponents: true,
+  })
+}
+```
+
+> **Notice: The library should _NEVER_ be used in production because it slows down React**
+
+In [Typescript](https://github.com/welldone-software/why-did-you-render/issues/161), call the file wdyr.ts and add the following line to the top of the file to import the package's types:
+
+```tsx
+/// <reference types="@welldone-software/why-did-you-render" />
+```
+
+Import `wdyr` as the first import (even before `react-hot-loader`):
+
+`index.js`:
+
+```jsx
+import "./wdyr" // <--- first import
+
+import "react-hot-loader"
+import { hot } from "react-hot-loader/root"
+
+import React from "react"
+import ReactDOM from "react-dom"
+// ...
+import { App } from "./app"
+// ...
+const HotApp = hot(App)
+// ...
+ReactDOM.render(<HotApp />, document.getElementById("root"))
+```
+
+If you use `trackAllPureComponents` like we suggest, all pure components ([React.PureComponent](https://reactjs.org/docs/react-api.html#reactpurecomponent) or [React.memo](https://reactjs.org/docs/react-api.html#reactmemo)) will be tracked.
+
+Otherwise, add `whyDidYouRender = true` to component classes/functions you want to track. (f.e `Component.whyDidYouRender = true`)
+
+More information about what is tracked can be found in [Tracking Components](#tracking-components).
+
+Can't see any WDYR logs? Check out the [troubleshooting section](#troubleshooting) or search in the [issues](https://github.com/welldone-software/why-did-you-render/issues).
+
+## Custom Hooks
+
+Also, tracking custom hooks is possible by using `trackExtraHooks`. For example if you want to track `useSelector` from React Redux:
+
+`wdyr.js`:
+
+```jsx
+import React from "react"
+
+if (process.env.NODE_ENV === "development") {
+  const whyDidYouRender = require("@welldone-software/why-did-you-render")
+  const ReactRedux = require("react-redux")
+  whyDidYouRender(React, {
+    trackAllPureComponents: true,
+    trackExtraHooks: [[ReactRedux, "useSelector"]],
+  })
+}
+```
+
+> Notice that there's currently a problem with rewriting exports of imported files in `webpack`. A quick workaround can help with it: [#85 - trackExtraHooks cannot set property](https://github.com/welldone-software/why-did-you-render/issues/85).
+
+## Read More
+
+- [Why Did You Render Mr. Big Pure React Component???](http://bit.ly/wdyr1)
+- [**Common fixing scenarios** this library can helps with](http://bit.ly/wdyr02)
+- [**React Hooks** - Understand and fix hooks issues](http://bit.ly/wdyr3)
+- [Why Did You Render v4 Released!](https://medium.com/welldone-software/why-did-you-render-v4-released-48e0f0b99d4c) - TypeScript support, Custom hooks tracking (like React-Redux’s useSelector), Tracking of all pure components.
+
+## Integration With Other Libraries
+
+- [Next.js example](https://github.com/zeit/next.js/tree/canary/examples/with-why-did-you-render)
+- [React-Redux With Hooks](https://medium.com/welldone-software/why-did-you-render-v4-released-48e0f0b99d4c)
+- [Mobx is currently not supported](https://github.com/welldone-software/why-did-you-render/issues/162)
+
+## Sandbox
+
+You can test the library in [the official sandbox](http://bit.ly/wdyr-sb).
+
+And another [official sandbox with hooks tracking](https://codesandbox.io/s/why-did-you-render-sandbox-with-hooks-pyi14)
+
+## Tracking Components
+
+You can track all pure components ([React.PureComponent](https://reactjs.org/docs/react-api.html#reactpurecomponent) or [React.memo](https://reactjs.org/docs/react-api.html#reactmemo)) using the `trackAllPureComponents: true` option.
+
+You can also manually track any component you want by setting `whyDidYouRender` on them like this:
+
+```js
+class BigList extends React.Component {
+  static whyDidYouRender = true
+  render(){
+    return (
+      //some heavy render you want to ensure doesn't happen if its not necessary
+    )
+  }
+}
+```
+
+Or for functional components:
+
+```js
+const BigListPureComponent = props => (
+  <div>//some heavy component you want to ensure doesn't happen if its not necessary</div>
+)
+BigListPureComponent.whyDidYouRender = true
+```
+
+You can also pass an object to specify more advanced tracking settings:
+
+```js
+EnhancedMenu.whyDidYouRender = {
+  logOnDifferentValues: true,
+  customName: "Menu",
+}
+```
+
+- `logOnDifferentValues`:
+
+  Normally, only re-renders that are caused by equal values in props / state trigger notifications:
+
+  ```js
+  render(<Menu a={1} />)
+  render(<Menu a={1} />)
+  ```
+
+  This option will trigger notifications even if they occurred because of different props / state (Thus, because of "legit" re-renders):
+
+  ```js
+  render(<Menu a={1} />)
+  render(<Menu a={2} />)
+  ```
+
+- `customName`:
+
+  Sometimes the name of the component can be missing or very inconvenient. For example:
+
+  ```js
+  withPropsOnChange(
+    withPropsOnChange(
+      withStateHandlers(
+        withPropsOnChange(
+          withState(
+            withPropsOnChange(
+              lifecycle(
+                withPropsOnChange(
+                  withPropsOnChange(
+                    onlyUpdateForKeys(
+                      LoadNamespace(
+                        Connect(
+                          withState(
+                            withState(
+                              withPropsOnChange(
+                                lifecycle(
+                                  withPropsOnChange(
+                                    withHandlers(
+                                      withHandlers(
+                                        withHandlers(
+                                          withHandlers(Connect(lifecycle(Menu))),
+                                        ),
+                                      ),
+                                    ),
+                                  ),
+                                ),
+                              ),
+                            ),
+                          ),
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    ),
+  )
+  ```
+
+## Options
+
+Optionally you can pass in `options` as the second parameter. The following options are available:
+
+- `include: [RegExp, ...]` (`null` by default)
+- `exclude: [RegExp, ...]` (`null` by default)
+- `trackAllPureComponents: false`
+- `trackHooks: true`
+- `trackExtraHooks: []`
+- `logOwnerReasons: true`
+- `logOnDifferentValues: false`
+- `hotReloadBufferMs: 500`
+- `onlyLogs: false`
+- `collapseGroups: false`
+- `titleColor`
+- `diffNameColor`
+- `diffPathColor`
+- `notifier: ({Component, displayName, hookName, prevProps, prevState, prevHook, nextProps, nextState, nextHook, reason, options, ownerDataMap}) => void`
+- `getAdditionalOwnerData: (element) => {...}`
+
+#### include / exclude
+
+##### (default: `null`)
+
+You can include or exclude tracking of components by their displayName using the `include` and `exclude` options.
+
+For example, the following code is used to [track all redundant re-renders that are caused by older React-Redux](http://bit.ly/wdyr04):
+
+```js
+whyDidYouRender(React, { include: [/^ConnectFunction/] })
+```
+
+> _Notice: **exclude** takes priority over both `include` and manually set `whyDidYouRender = `_
+
+#### trackAllPureComponents
+
+##### (default: `false`)
+
+You can track all pure components (both `React.memo` and `React.PureComponent` components)
+
+> _Notice: You can exclude the tracking of any specific component with `whyDidYouRender = false`_
+
+#### trackHooks
+
+##### (default: `true`)
+
+You can turn off tracking of hooks changes.
+
+[Understand and fix hook issues](http://bit.ly/wdyr3).
+
+#### trackExtraHooks
+
+##### (default: `[]`)
+
+Track custom hooks:
+
+```js
+whyDidYouRender(React, {
+  trackExtraHooks: [
+    // notice that 'useSelector' is a named export
+    [ReactRedux, "useSelector"],
+  ],
+})
+```
+
+> There is currently a problem with rewriting exports of imported files in webpack. A workaround is available here: [#85 - trackExtraHooks cannot set property](https://github.com/welldone-software/why-did-you-render/issues/85)
+
+#### logOwnerReasons
+
+##### (default: `true`)
+
+One way of fixing re-render issues is preventing the component's owner from re-rendering.
+
+This option is `true` by default and it lets you view the reasons why an owner component re-renders.
+
+![demo](images/logOwnerReasons.png)
+
+#### logOnDifferentValues
+
+##### (default: `false`)
+
+Normally, you only want logs about component re-renders when they could have been avoided.
+
+With this option, it is possible to track all re-renders.
+
+For example:
+
+```js
+render(<BigListPureComponent a={1} />)
+render(<BigListPureComponent a={2} />)
+// will only log if you use {logOnDifferentValues: true}
+```
+
+#### hotReloadBufferMs
+
+##### (default: `500`)
+
+Time in milliseconds to ignore updates after a hot reload is detected.
+
+When a hot reload is detected, we ignore all updates for `hotReloadBufferMs` to not spam the console.
+
+#### onlyLogs
+
+##### (default: `false`)
+
+If you don't want to use `console.group` to group logs you can print them as simple logs.
+
+#### collapseGroups
+
+##### (default: `false`)
+
+Grouped logs can be collapsed.
+
+#### titleColor / diffNameColor / diffPathColor
+
+##### (default titleColor: `'#058'`)
+
+##### (default diffNameColor: `'blue'`)
+
+##### (default diffPathColor: `'red'`)
+
+Controls the colors used in the console notifications
+
+#### notifier
+
+##### (default: defaultNotifier that is exposed from the library)
+
+You can create a custom notifier if the default one does not suite your needs.
+
+#### getAdditionalOwnerData
+
+##### (default: `undefined`)
+
+You can provide a function that harvests additional data from the original react element. The object returned from this function will be added to the ownerDataMap which can be accessed later within your notifier function override.
+
+## Troubleshooting
+
+### No tracking
+
+- If you are in production, WDYR is probably disabled.
+- Maybe no component is tracked
+  - Check out [Tracking Components](#tracking-components) once again.
+  - If you track all pure components ([React.PureComponent](https://reactjs.org/docs/react-api.html#reactpurecomponent) or [React.memo](https://reactjs.org/docs/react-api.html#reactmemo)), maybe your none of your components are not pure.
+- Maybe you have no issues
+  - Try causing an issue by temporary rendering the whole app twice in it's entry point:
+
+    `index.js`:
+
+    ```jsx
+    const HotApp = hot(App)
+    HotApp.whyDidYouRender = true
+    ReactDOM.render(<HotApp />, document.getElementById("root"))
+    ReactDOM.render(<HotApp />, document.getElementById("root"))
+    ```
+
+### Custom Hooks tracking (like useSelector)
+
+There's currently a problem with rewriting exports of imported files in `webpack`. A quick workaround can help with it: [#85 - trackExtraHooks cannot set property](https://github.com/welldone-software/why-did-you-render/issues/85).
+
+### React-Redux `connect` HOC is spamming the console
+
+Since `connect` hoists statics, if you add WDYR to the inner component, it is also added to the HOC component where complex hooks are running.
+
+To fix this, add the `whyDidYouRender = true` static to a component after the connect:
+
+```js
+  const SimpleComponent = ({a}) => <div data-testid="foo">{a.b}</div>)
+  // not before the connect:
+  // SimpleComponent.whyDidYouRender = true
+  const ConnectedSimpleComponent = connect(
+    state => ({a: state.a})
+  )(SimpleComponent)
+  // after the connect:
+  SimpleComponent.whyDidYouRender = true
+```
+
+### Sourcemaps
+
+To see the library's sourcemaps use the [source-map-loader](https://webpack.js.org/loaders/source-map-loader/).
+
+## Credit
+
+Inspired by the following previous work:
+
+https://github.com/maicki/why-did-you-update which I had the chance to maintain for some time.
+
+https://github.com/garbles/why-did-you-update where [A deep dive into React perf debugging](http://benchling.engineering/deep-dive-react-perf-debugging/) is credited for the idea.
+
+## License
+
+This library is [MIT licensed](./LICENSE).
diff --git a/src/vendor/why-did-you-render/index.js b/src/vendor/why-did-you-render/index.js
new file mode 100644
index 0000000..6be7c4d
--- /dev/null
+++ b/src/vendor/why-did-you-render/index.js
@@ -0,0 +1,3 @@
+/* eslint-disable */
+const { default: _default, ...rest } = require("./index.ts")
+module.exports = Object.assign(_default, rest)
diff --git a/src/vendor/why-did-you-render/index.ts b/src/vendor/why-did-you-render/index.ts
new file mode 100644
index 0000000..9a9cd85
--- /dev/null
+++ b/src/vendor/why-did-you-render/index.ts
@@ -0,0 +1,1357 @@
+/* eslint-disable */
+
+const DEBUG = false
+
+// why-did-you-render/src/index.js
+// @ts-expect-error no types
+import react from "../../../node_modules/react/index.js"
+import {
+  defaults,
+  get,
+  groupBy,
+  has,
+  isError,
+  isPlainObject,
+  noop,
+  sortBy,
+  uniq,
+} from "lodash"
+
+const React = react as typeof import("react")
+const { isValidElement, version } = React
+
+type ExtendedReact = typeof import("react") & {
+  isWDYR?: boolean
+  __REVERT_WHY_DID_YOU_RENDER__?(): void
+}
+
+type WhyDidYouRenderComponentMember = WhyDidYouRenderOptions | boolean
+
+declare module "react" {
+  interface FunctionComponent<P = {}> {
+    whyDidYouRender?: WhyDidYouRenderComponentMember
+  }
+
+  interface VoidFunctionComponent<P = {}> {
+    whyDidYouRender?: WhyDidYouRenderComponentMember
+  }
+
+  interface ExoticComponent<P = {}> {
+    whyDidYouRender?: WhyDidYouRenderComponentMember
+  }
+
+  namespace Component {
+    const whyDidYouRender: WhyDidYouRenderComponentMember
+  }
+}
+
+interface HookDifference {
+  hookName?: string
+  pathString: string
+  diffType: string
+  prevValue: unknown
+  nextValue: unknown
+}
+
+interface UpdateReason {
+  hookDifferences?: HookDifference[]
+  propsDifferences?: HookDifference[]
+  stateDifferences?: HookDifference[]
+}
+
+interface ReasonForUpdate extends UpdateReason {
+  ownerDifferences?: UpdateReason
+}
+
+interface UpdateInfo {
+  Component: React.Component
+  displayName: string
+  prevProps?: unknown
+  prevState?: unknown
+  nextProps?: unknown
+  nextState?: unknown
+  prevHook?: unknown
+  nextHook?: unknown
+  reason: ReasonForUpdate
+  options?: WhyDidYouRenderOptions
+  hookName?: string
+}
+
+type ExtraHookToTrack = [unknown, string]
+
+interface WhyDidYouRenderOptions {
+  include?: RegExp[]
+  exclude?: RegExp[]
+  trackAllPureComponents?: boolean
+  trackHooks?: boolean
+  logOwnerReasons?: boolean
+  trackExtraHooks?: Array<ExtraHookToTrack>
+  logOnDifferentValues?: boolean
+  hotReloadBufferMs?: number
+  onlyLogs?: boolean
+  collapseGroups?: boolean
+  titleColor?: string
+  diffNameColor?: string
+  diffPathColor?: string
+  notifier?: Notifier
+  customName?: string
+}
+
+type Notifier = (options: UpdateInfo) => void
+
+interface OwnerData {
+  Component: React.Component
+  displayName: string
+  props: unknown
+  state: unknown
+  hooks: unknown[]
+  additionalOwnerData?: unknown
+}
+
+// why-did-you-render/src/wdyrStore.js
+export const store: {
+  /* The React object we patch */
+  React: ExtendedReact
+  /* Processed user options for WDYR */
+  options: NormalizedOptions
+  /* The original React.createElement function */
+  origCreateElement: typeof React.createElement
+  /* The original React.createFactory function */
+  origCreateFactory: typeof React.createFactory
+  /* The original React.cloneElement function */
+  origCloneElement: typeof React.cloneElement
+  /* A weak map of all React elements to their WDYR patched react elements */
+  componentsMap: null | WeakMap<any, any>
+  /* A weak map of props to the owner element that passed them */
+  ownerDataMap: WeakMap<any, OwnerData>
+  /* An array of hooks tracked during one render */
+  hooksPerRender: {
+    hook: any
+  }[]
+} = {
+  React: undefined!,
+  options: undefined!,
+  origCreateElement: undefined!,
+  origCreateFactory: undefined!,
+  origCloneElement: undefined!,
+  componentsMap: new WeakMap(),
+  ownerDataMap: new WeakMap(),
+  hooksPerRender: [],
+}
+
+// why-did-you-render/src/consts.js
+enum diffTypes {
+  different = "different",
+  deepEquals = "deepEquals",
+  date = "date",
+  regex = "regex",
+  reactElement = "reactElement",
+  function = "function",
+  same = "same",
+}
+
+const diffTypesDescriptions = {
+  [diffTypes.different]: "different objects",
+  [diffTypes.deepEquals]: "different objects that are equal by value",
+  [diffTypes.date]: "different date objects with the same value",
+  [diffTypes.regex]: "different regular expressions with the same value",
+  [diffTypes.reactElement]:
+    "different React elements (remember that the <jsx/> syntax always produces a *NEW* immutable React element so a component that receives <jsx/> as props always re-renders)",
+  [diffTypes.function]: "different functions with the same name",
+  [diffTypes.same]: "same objects by ref (===)",
+}
+
+const REACT_MEMO_TYPE = Symbol.for("react.memo")
+const REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref")
+const REACT_VERSION = Number(version.split(".")[0]) || 0
+const REACT_STRICT_MODE = REACT_VERSION >= 18 ? 8 : 1
+
+const hasElementType = typeof Element !== "undefined"
+
+function trackDiff(
+  a: unknown,
+  b: unknown,
+  diffsAccumulator: HookDifference[],
+  pathString: string,
+  diffType: diffTypes,
+) {
+  diffsAccumulator.push({
+    diffType,
+    pathString,
+    prevValue: a,
+    nextValue: b,
+  })
+  return diffType !== diffTypes.different
+}
+
+function isGetter(obj: any, prop: string) {
+  return !!Object.getOwnPropertyDescriptor(obj, prop)?.get
+}
+
+const dependenciesMap = new WeakMap()
+
+function accumulateDeepEqualDiffs(
+  a: unknown,
+  b: unknown,
+  diffsAccumulator: HookDifference[],
+  pathString = "",
+  { detailed }: { detailed: boolean },
+): boolean {
+  if (a === b) {
+    if (detailed) {
+      trackDiff(a, b, diffsAccumulator, pathString, diffTypes.same)
+    }
+    return true
+  }
+  if (!a || !b) {
+    return trackDiff(a, b, diffsAccumulator, pathString, diffTypes.different)
+  }
+  if (Array.isArray(a) && Array.isArray(b)) {
+    const arrayLength = a.length
+    if (arrayLength !== b.length) {
+      return trackDiff([...a], [...b], diffsAccumulator, pathString, diffTypes.different)
+    }
+    const arrayItemDiffs: HookDifference[] = []
+    let numberOfDeepEqualsItems = 0
+    for (let i = arrayLength; i--; i > 0) {
+      const diffEquals = accumulateDeepEqualDiffs(
+        a[i],
+        b[i],
+        arrayItemDiffs,
+        `${pathString}[${i}]`,
+        { detailed },
+      )
+      if (diffEquals) {
+        numberOfDeepEqualsItems++
+      }
+    }
+    if (detailed || numberOfDeepEqualsItems !== arrayLength) {
+      diffsAccumulator.push(...arrayItemDiffs)
+    }
+    if (numberOfDeepEqualsItems === arrayLength) {
+      return trackDiff([...a], [...b], diffsAccumulator, pathString, diffTypes.deepEquals)
+    }
+    return trackDiff([...a], [...b], diffsAccumulator, pathString, diffTypes.different)
+  }
+  if (a instanceof Set && b instanceof Set) {
+    if (a.size !== b.size) {
+      return trackDiff(
+        new Set(a),
+        new Set(b),
+        diffsAccumulator,
+        pathString,
+        diffTypes.different,
+      )
+    }
+    for (const valA of a) {
+      if (!b.has(valA)) {
+        return trackDiff(
+          new Set(a),
+          new Set(b),
+          diffsAccumulator,
+          pathString,
+          diffTypes.different,
+        )
+      }
+    }
+    return trackDiff(
+      new Set(a),
+      new Set(b),
+      diffsAccumulator,
+      pathString,
+      diffTypes.deepEquals,
+    )
+  }
+  if (a instanceof Date && b instanceof Date) {
+    return a.getTime() === b.getTime()
+      ? trackDiff(new Date(a), new Date(b), diffsAccumulator, pathString, diffTypes.date)
+      : trackDiff(
+          new Date(a),
+          new Date(b),
+          diffsAccumulator,
+          pathString,
+          diffTypes.different,
+        )
+  }
+  if (a instanceof RegExp && b instanceof RegExp) {
+    return a.toString() === b.toString()
+      ? trackDiff(a, b, diffsAccumulator, pathString, diffTypes.regex)
+      : trackDiff(a, b, diffsAccumulator, pathString, diffTypes.different)
+  }
+  if (hasElementType && a instanceof Element && b instanceof Element) {
+    return trackDiff(a, b, diffsAccumulator, pathString, diffTypes.different)
+  }
+  if (isValidElement(a) && isValidElement(b)) {
+    if (a.type !== b.type) {
+      return trackDiff(a, b, diffsAccumulator, pathString, diffTypes.different)
+    }
+    const reactElementPropsAreDeepEqual = accumulateDeepEqualDiffs(
+      a.props,
+      b.props,
+      [],
+      `${pathString}.props`,
+      { detailed },
+    )
+    return reactElementPropsAreDeepEqual
+      ? trackDiff(a, b, diffsAccumulator, pathString, diffTypes.reactElement)
+      : trackDiff(a, b, diffsAccumulator, pathString, diffTypes.different)
+  }
+  if (typeof a === "function" && typeof b === "function") {
+    if (a.name !== b.name) {
+      return trackDiff(a, b, diffsAccumulator, pathString, diffTypes.different)
+    }
+    const aDependenciesObj = dependenciesMap.get(a)
+    const bDependenciesObj = dependenciesMap.get(b)
+    if (aDependenciesObj && bDependenciesObj) {
+      const dependenciesAreDeepEqual = accumulateDeepEqualDiffs(
+        aDependenciesObj.deps,
+        bDependenciesObj.deps,
+        diffsAccumulator,
+        `${pathString}:parent-hook-${aDependenciesObj.hookName}-deps`,
+        { detailed },
+      )
+      return dependenciesAreDeepEqual
+        ? trackDiff(a, b, diffsAccumulator, pathString, diffTypes.function)
+        : trackDiff(a, b, diffsAccumulator, pathString, diffTypes.different)
+    }
+    return trackDiff(a, b, diffsAccumulator, pathString, diffTypes.function)
+  }
+  if (
+    typeof a === "object" &&
+    typeof b === "object" &&
+    Object.getPrototypeOf(a) === Object.getPrototypeOf(b)
+  ) {
+    const aKeys = Object.getOwnPropertyNames(a)
+    const bKeys = Object.getOwnPropertyNames(b)
+    const allKeys = uniq([...aKeys, ...bKeys])
+    const clonedA = isPlainObject(a) ? { ...a } : a
+    const clonedB = isPlainObject(b) ? { ...b } : b
+    if (allKeys.length !== aKeys.length || allKeys.length !== bKeys.length) {
+      return trackDiff(
+        clonedA,
+        clonedB,
+        diffsAccumulator,
+        pathString,
+        diffTypes.different,
+      )
+    }
+    const relevantKeys = allKeys.filter(key => {
+      if (key === "stack" && isError(a)) {
+        return false
+      }
+      if (isGetter(a, key)) {
+        return false
+      }
+      return true
+    })
+    const keysLength = relevantKeys.length
+    for (let i = keysLength; i--; i > 0) {
+      if (!has(b, relevantKeys[i])) {
+        return trackDiff(
+          clonedA,
+          clonedB,
+          diffsAccumulator,
+          pathString,
+          diffTypes.different,
+        )
+      }
+    }
+    const objectValuesDiffs: HookDifference[] = []
+    let numberOfDeepEqualsObjectValues = 0
+    for (let i = keysLength; i--; i > 0) {
+      const key = relevantKeys[i]
+      const deepEquals = accumulateDeepEqualDiffs(
+        (a as Record<string, unknown>)[key],
+        (b as Record<string, unknown>)[key],
+        objectValuesDiffs,
+        `${pathString}.${key}`,
+        { detailed },
+      )
+      if (deepEquals) {
+        numberOfDeepEqualsObjectValues++
+      }
+    }
+    if (detailed || numberOfDeepEqualsObjectValues !== keysLength) {
+      diffsAccumulator.push(...objectValuesDiffs)
+    }
+    if (numberOfDeepEqualsObjectValues === keysLength) {
+      return trackDiff(
+        clonedA,
+        clonedB,
+        diffsAccumulator,
+        pathString,
+        diffTypes.deepEquals,
+      )
+    }
+    return trackDiff(clonedA, clonedB, diffsAccumulator, pathString, diffTypes.different)
+  }
+  return trackDiff(a, b, diffsAccumulator, pathString, diffTypes.different)
+}
+
+function calculateDeepEqualDiffs(
+  a: unknown,
+  b: unknown,
+  initialPathString?: string,
+  { detailed = false } = {},
+) {
+  try {
+    const diffs: HookDifference[] = []
+    accumulateDeepEqualDiffs(a, b, diffs, initialPathString, { detailed })
+    return diffs
+  } catch (error) {
+    if (
+      (error.message && error.message.match(/stack|recursion/i)) ||
+      error.number === -2146828260
+    ) {
+      console.warn(
+        "Warning: why-did-you-render couldn't handle circular references in props.",
+        error.name,
+        error.message,
+      )
+      return
+    }
+    throw error
+  }
+}
+
+// why-did-you-render/src/printDiff.js
+function printDiff(
+  value1: unknown,
+  value2: unknown,
+  {
+    pathString,
+    consoleLog,
+  }: {
+    pathString: string
+    consoleLog: typeof console.log
+  },
+) {
+  const diffs = calculateDeepEqualDiffs(value1, value2, pathString, { detailed: true })!
+  const keysLength = Math.max(...diffs.map(diff => diff.pathString.length)) + 2
+  Object.entries(groupBy(sortBy(diffs, "pathString"), "diffType")).forEach(
+    ([diffType, diffs2]) => {
+      consoleLog(
+        `%c${diffTypesDescriptions[diffType as diffTypes]}:`,
+        "text-decoration: underline; color: blue;",
+      )
+      diffs2.forEach(diff => {
+        consoleLog(`${diff.pathString}:`.padEnd(keysLength, " "), diff.prevValue)
+      })
+    },
+  )
+}
+
+// why-did-you-render/src/defaultNotifier.js
+const moreInfoUrl = "http://bit.ly/wdyr02"
+const moreInfoHooksUrl = "http://bit.ly/wdyr3"
+let inHotReload = false
+
+function shouldLog(reason: ReasonForUpdate, Component: React.Component<{}, {}, any>) {
+  if (inHotReload) {
+    return false
+  }
+  if (store.options.logOnDifferentValues) {
+    return true
+  }
+  if (Component.whyDidYouRender && Component.whyDidYouRender.logOnDifferentValues) {
+    return true
+  }
+  const hasDifferentValues =
+    reason.propsDifferences?.some(diff => diff.diffType === diffTypes.different) ||
+    reason.stateDifferences?.some(diff => diff.diffType === diffTypes.different) ||
+    reason.hookDifferences?.some(diff => diff.diffType === diffTypes.different)
+  return !hasDifferentValues
+}
+
+function logDifference({
+  Component,
+  displayName,
+  hookName,
+  prefixMessage,
+  diffObjType,
+  differences,
+  values,
+}: {
+  Component: React.Component
+  displayName: string
+  hookName?: string
+  prefixMessage: string
+  diffObjType: "props" | "state" | "hook"
+  differences: HookDifference[]
+  values: { prev: any; next: any }
+}) {
+  const { console } = store.options
+  if (differences?.length) {
+    console.log(
+      { [displayName]: Component },
+      `${prefixMessage} of ${diffObjType} changes:`,
+    )
+    for (const { pathString, diffType, prevValue, nextValue } of differences) {
+      function diffFn() {
+        printDiff(prevValue, nextValue, {
+          pathString,
+          consoleLog: console.log,
+        })
+      }
+      console.group(
+        `%c${
+          diffObjType === "hook" ? `[hook ${hookName} result]` : `${diffObjType}.`
+        }%c${pathString}%c`,
+        `color:${store.options.diffNameColor};`,
+        `color:${store.options.diffPathColor};`,
+        "color:default;",
+      )
+      console.log(
+        `${diffTypesDescriptions[diffType as diffTypes]}. (more info at ${
+          hookName ? moreInfoHooksUrl : moreInfoUrl
+        })`,
+      )
+      console.log({ [`prev ${pathString}`]: prevValue }, "!==", {
+        [`next ${pathString}`]: nextValue,
+      })
+      if (diffType === diffTypes.deepEquals) {
+        console.log({
+          "For detailed diff, right click the following fn, save as global, and run: ":
+            diffFn,
+        })
+      }
+      console.groupEnd()
+    }
+  } else if (differences) {
+    console.log(
+      { [displayName]: Component },
+      `${prefixMessage} the ${diffObjType} object itself changed but its values are all equal.`,
+      diffObjType === "props"
+        ? "This could have been avoided by making the component pure, or by preventing its father from re-rendering."
+        : "This usually means this component called setState when no changes in its state actually occurred.",
+      `More info at ${moreInfoUrl}`,
+    )
+    console.log(
+      `prev ${diffObjType}:`,
+      values.prev,
+      " !== ",
+      values.next,
+      `:next ${diffObjType}`,
+    )
+  }
+}
+
+function defaultNotifier(updateInfo: UpdateInfo) {
+  const {
+    Component,
+    displayName,
+    hookName,
+    prevProps,
+    prevState,
+    prevHook,
+    nextProps,
+    nextState,
+    nextHook,
+    reason,
+  } = updateInfo
+  if (!shouldLog(reason, Component)) {
+    return
+  }
+
+  const { console } = store.options
+  console.group(`%c${displayName}`, `color: ${store.options.titleColor};`)
+
+  let prefixMessage = "Re-rendered because"
+  if (reason.propsDifferences) {
+    logDifference({
+      Component,
+      displayName,
+      prefixMessage,
+      diffObjType: "props",
+      differences: reason.propsDifferences,
+      values: { prev: prevProps, next: nextProps },
+    })
+    prefixMessage = "And because"
+  }
+  if (reason.stateDifferences) {
+    logDifference({
+      Component,
+      displayName,
+      prefixMessage,
+      diffObjType: "state",
+      differences: reason.stateDifferences,
+      values: { prev: prevState, next: nextState },
+    })
+  }
+  if (reason.hookDifferences) {
+    logDifference({
+      Component,
+      displayName,
+      prefixMessage,
+      diffObjType: "hook",
+      differences: reason.hookDifferences,
+      values: { prev: prevHook, next: nextHook },
+      hookName,
+    })
+  }
+  if (reason.propsDifferences && reason.ownerDifferences) {
+    const prevOwnerData = store.ownerDataMap.get(prevProps)!
+    const nextOwnerData = store.ownerDataMap.get(nextProps)!
+    console.group(`Rendered by ${nextOwnerData.displayName}`)
+    let prefixMessage2 = "Re-rendered because"
+    if (reason.ownerDifferences.propsDifferences) {
+      logDifference({
+        Component: nextOwnerData.Component,
+        displayName: nextOwnerData.displayName,
+        prefixMessage: prefixMessage2,
+        diffObjType: "props",
+        differences: reason.ownerDifferences.propsDifferences,
+        values: { prev: prevOwnerData.props, next: nextOwnerData.props },
+      })
+      prefixMessage2 = "And because"
+    }
+    if (reason.ownerDifferences.stateDifferences) {
+      logDifference({
+        Component: nextOwnerData.Component,
+        displayName: nextOwnerData.displayName,
+        prefixMessage: prefixMessage2,
+        diffObjType: "state",
+        differences: reason.ownerDifferences.stateDifferences,
+        values: { prev: prevOwnerData.state, next: nextOwnerData.state },
+      })
+    }
+    if (reason.ownerDifferences.hookDifferences) {
+      reason.ownerDifferences.hookDifferences.forEach(
+        ({ hookName: hookName2, differences }, i) =>
+          logDifference({
+            Component: nextOwnerData.Component,
+            displayName: nextOwnerData.displayName,
+            prefixMessage: prefixMessage2,
+            diffObjType: "hook",
+            differences,
+            values: {
+              prev: prevOwnerData.hooks[i].result,
+              next: nextOwnerData.hooks[i].result,
+            },
+            hookName: hookName2,
+          }),
+      )
+    }
+    console.groupEnd()
+  }
+  if (!reason.propsDifferences && !reason.stateDifferences && !reason.hookDifferences) {
+    console.log(
+      { [displayName]: Component },
+      "Re-rendered although props and state objects are the same.",
+      "This usually means there was a call to this.forceUpdate() inside the component.",
+      `more info at ${moreInfoUrl}`,
+    )
+  }
+  console.groupEnd()
+}
+
+function createDefaultNotifier(hotReloadBufferMs: number) {
+  if (hotReloadBufferMs) {
+    if (typeof module !== "undefined" && module.hot && module.hot.addStatusHandler) {
+      module.hot.addStatusHandler(status => {
+        if (status === "idle") {
+          inHotReload = true
+          setTimeout(() => {
+            inHotReload = false
+          }, hotReloadBufferMs)
+        }
+      })
+    }
+  }
+  return defaultNotifier
+}
+
+// why-did-you-render/src/normalizeOptions.js
+type NormalizedOptions = ReturnType<typeof normalizeOptions>
+
+function normalizeOptions(userOptions: WhyDidYouRenderOptions = {}) {
+  let consoleGroup = console.group
+  let consoleGroupEnd = console.groupEnd
+  if (userOptions.collapseGroups) {
+    consoleGroup = console.groupCollapsed
+  } else if (userOptions.onlyLogs) {
+    consoleGroup = console.log
+    consoleGroupEnd = noop
+  }
+  const notifier =
+    userOptions.notifier ||
+    createDefaultNotifier(
+      "hotReloadBufferMs" in userOptions ? userOptions.hotReloadBufferMs : 500,
+    )
+  return {
+    include: null,
+    exclude: null,
+    notifier,
+    onlyLogs: false,
+    console: {
+      log: console.log,
+      group: consoleGroup,
+      groupEnd: consoleGroupEnd,
+    },
+    logOnDifferentValues: false,
+    logOwnerReasons: true,
+    trackHooks: true,
+    titleColor: "#058",
+    diffNameColor: "blue",
+    diffPathColor: "red",
+    trackExtraHooks: [],
+    trackAllPureComponents: false,
+    ...userOptions,
+  }
+}
+
+// why-did-you-render/src/getDisplayName.js
+function getDisplayName(type: React.ComponentType): string {
+  return (
+    type.displayName ||
+    type.name ||
+    ("type" in type && getDisplayName(type.type)) ||
+    ("render" in type && getDisplayName(type.render)) ||
+    (typeof type === "string" ? type : "Unknown")
+  )
+}
+
+// why-did-you-render/src/getDefaultProps.js
+function getDefaultProps(type: React.ComponentType): unknown {
+  return (
+    type.defaultProps ||
+    ("type" in type && getDefaultProps(type.type)) ||
+    ("render" in type && getDefaultProps(type.render)) ||
+    {}
+  )
+}
+
+// why-did-you-render/src/findObjectsDifferences.js
+const emptyObject = {}
+
+function findObjectsDifferences(
+  userPrevObj: unknown,
+  userNextObj: unknown,
+  { shallow = true } = {},
+) {
+  if (userPrevObj === userNextObj) {
+    return
+  }
+  if (!shallow) {
+    return calculateDeepEqualDiffs(userPrevObj, userNextObj)
+  }
+
+  const prevObj = userPrevObj || emptyObject
+  const nextObj = userNextObj || emptyObject
+  const keysOfBothObjects = Object.keys({ ...prevObj, ...nextObj })
+  return keysOfBothObjects.reduce((result, key) => {
+    const deepEqualDiffs = calculateDeepEqualDiffs(prevObj[key], nextObj[key], key)
+    if (deepEqualDiffs) {
+      result = [...result, ...deepEqualDiffs]
+    }
+    return result
+  }, [] as HookDifference[])
+}
+
+// why-did-you-render/src/getUpdateInfo.js
+function getOwnerDifferences({
+  prevOwnerData,
+  nextOwnerData,
+}: {
+  prevOwnerData?: OwnerData
+  nextOwnerData?: OwnerData
+}) {
+  if (!prevOwnerData || !nextOwnerData) {
+    return
+  }
+
+  const prevOwnerDataHooks =
+    prevOwnerData.hooks.length === nextOwnerData.hooks.length * 2
+      ? prevOwnerData.hooks.slice(prevOwnerData.hooks.length / 2)
+      : prevOwnerData.hooks
+
+  const hookDifferences = prevOwnerDataHooks.map(({ hookName, result }, i) => ({
+    hookName,
+    differences: findObjectsDifferences(result, nextOwnerData.hooks[i].result, {
+      shallow: false,
+    }),
+  }))
+
+  return {
+    propsDifferences: findObjectsDifferences(prevOwnerData.props, nextOwnerData.props),
+    stateDifferences: findObjectsDifferences(prevOwnerData.state, nextOwnerData.state),
+    hookDifferences: hookDifferences.length > 0 ? hookDifferences : undefined,
+  }
+}
+
+function getUpdateReason(
+  prevProps: unknown,
+  prevState: unknown,
+  prevHook: unknown,
+  nextProps: unknown,
+  nextState: unknown,
+  nextHook: unknown,
+): ReasonForUpdate {
+  const prevOwnerData = store.ownerDataMap.get(prevProps)
+  const nextOwnerData = store.ownerDataMap.get(nextProps)
+  return {
+    propsDifferences: findObjectsDifferences(prevProps, nextProps),
+    stateDifferences: findObjectsDifferences(prevState, nextState),
+    hookDifferences: findObjectsDifferences(prevHook, nextHook, { shallow: false }),
+    ownerDifferences: getOwnerDifferences({ prevOwnerData, nextOwnerData }),
+  }
+}
+
+function getUpdateInfo({
+  Component,
+  displayName,
+  hookName,
+  prevProps,
+  prevState,
+  prevHook,
+  nextProps,
+  nextState,
+  nextHook,
+}: Omit<UpdateInfo, "reason">): UpdateInfo {
+  return {
+    Component,
+    displayName,
+    hookName,
+    prevProps,
+    prevState,
+    prevHook,
+    nextProps,
+    nextState,
+    nextHook,
+    reason: getUpdateReason(
+      prevProps,
+      prevState,
+      prevHook,
+      nextProps,
+      nextState,
+      nextHook,
+    ),
+  }
+}
+
+// why-did-you-render/src/utils.js
+function checkIfInsideAStrictModeTree(
+  reactComponentInstance: React.Component<unknown, unknown, unknown>,
+) {
+  let reactInternalFiber =
+    reactComponentInstance &&
+    (reactComponentInstance._reactInternalFiber || reactComponentInstance._reactInternals)
+  while (reactInternalFiber) {
+    if (reactInternalFiber.mode & REACT_STRICT_MODE) {
+      return true
+    }
+    reactInternalFiber = reactInternalFiber.return
+  }
+  return false
+}
+
+function isReactClassComponent(Component: React.ComponentType) {
+  return Component.prototype && !!Component.prototype.isReactComponent
+}
+
+function isMemoComponent(Component: React.ExoticComponent) {
+  return Component.$$typeof === REACT_MEMO_TYPE
+}
+
+function isForwardRefComponent(Component: React.ExoticComponent) {
+  return Component.$$typeof === REACT_FORWARD_REF_TYPE
+}
+
+// why-did-you-render/src/shouldTrack.js
+function shouldInclude(displayName: string) {
+  return (
+    store.options.include &&
+    store.options.include.length > 0 &&
+    store.options.include.some(regex => regex.test(displayName))
+  )
+}
+
+function shouldExclude(displayName: string) {
+  return (
+    store.options.exclude &&
+    store.options.exclude.length > 0 &&
+    store.options.exclude.some(regex => regex.test(displayName))
+  )
+}
+
+function shouldTrack(Component, { isHookChange }) {
+  const displayName = getDisplayName(Component)
+  if (shouldExclude(displayName)) {
+    return false
+  }
+  if (Component.whyDidYouRender === false) {
+    return false
+  }
+  if (
+    isHookChange &&
+    Component.whyDidYouRender &&
+    Component.whyDidYouRender.trackHooks === false
+  ) {
+    return false
+  }
+  return !!(
+    Component.whyDidYouRender ||
+    (store.options.trackAllPureComponents &&
+      ((Component && Component.prototype instanceof store.React.PureComponent) ||
+        isMemoComponent(Component))) ||
+    shouldInclude(displayName)
+  )
+}
+
+// why-did-you-render/src/patches/patchClassComponent.js
+function patchClassComponent(ClassComponent, { displayName, defaultProps }) {
+  class PatchedClassComponent extends ClassComponent {
+    #state: {
+      renderNumber: number
+      isStrictMode?: boolean
+      prevProps?: unknown
+      prevState?: unknown
+    }
+
+    constructor(props: unknown, context: unknown) {
+      super(props, context)
+      this.#state = {
+        renderNumber: 0,
+      }
+      const origRender = super.render || this.render
+      const renderIsABindedFunction = origRender !== ClassComponent.prototype.render
+      if (renderIsABindedFunction) {
+        this.render = () => {
+          PatchedClassComponent.prototype.render.apply(this)
+          return origRender()
+        }
+      }
+    }
+
+    render() {
+      this.#state.renderNumber++
+      if (!("isStrictMode" in this.#state)) {
+        this.#state.isStrictMode = checkIfInsideAStrictModeTree(this)
+      }
+      if (!(this.#state.isStrictMode && this.#state.renderNumber % 2 === 1)) {
+        if (this.#state.prevProps) {
+          const updateInfo = getUpdateInfo({
+            Component: ClassComponent,
+            displayName,
+            prevProps: this.#state.prevProps,
+            prevState: this.#state.prevState,
+            nextProps: this.props,
+            nextState: this.state,
+          })
+          store.options.notifier(updateInfo)
+        }
+        this.#state.prevProps = this.props
+        this.#state.prevState = this.state
+      }
+      return super.render ? super.render() : null
+    }
+  }
+  try {
+    PatchedClassComponent.displayName = displayName
+  } catch (e) {}
+  PatchedClassComponent.defaultProps = defaultProps
+  defaults(PatchedClassComponent, ClassComponent)
+  return PatchedClassComponent
+}
+
+// why-did-you-render/src/patches/patchFunctionalOrStrComponent.js
+var getFunctionalComponentFromStringComponent = componentTypeStr => props =>
+  store.React.createElement(componentTypeStr, props)
+
+function patchFunctionalOrStrComponent(
+  FunctionalOrStringComponent,
+  { isPure, displayName, defaultProps },
+) {
+  const FunctionalComponent =
+    typeof FunctionalOrStringComponent === "string"
+      ? getFunctionalComponentFromStringComponent(FunctionalOrStringComponent)
+      : FunctionalOrStringComponent
+  function WDYRFunctionalComponent() {
+    const nextProps = arguments[0]
+    const ref = store.React.useRef()
+    const prevProps = ref.current
+    ref.current = nextProps
+    if (prevProps) {
+      const updateInfo = getUpdateInfo({
+        Component: FunctionalComponent,
+        displayName,
+        prevProps,
+        nextProps,
+      })
+      const notifiedByHooks =
+        !updateInfo.reason.propsDifferences ||
+        (isPure && updateInfo.reason.propsDifferences.length === 0)
+      if (!notifiedByHooks) {
+        store.options.notifier(updateInfo)
+      }
+    }
+    return FunctionalComponent(...arguments)
+  }
+  try {
+    WDYRFunctionalComponent.displayName = displayName
+  } catch (e) {}
+  WDYRFunctionalComponent.defaultProps = defaultProps
+  WDYRFunctionalComponent.ComponentForHooksTracking = FunctionalComponent
+  defaults(WDYRFunctionalComponent, FunctionalComponent)
+  return WDYRFunctionalComponent
+}
+
+// why-did-you-render/src/patches/patchMemoComponent.js
+function patchMemoComponent(MemoComponent, { displayName, defaultProps }) {
+  const { type: InnerMemoComponent } = MemoComponent
+  const isInnerMemoComponentAClassComponent = isReactClassComponent(InnerMemoComponent)
+  const isInnerMemoComponentForwardRefs = isForwardRefComponent(InnerMemoComponent)
+  const isInnerMemoComponentAnotherMemoComponent = isMemoComponent(InnerMemoComponent)
+  const WrappedFunctionalComponent = isInnerMemoComponentForwardRefs
+    ? InnerMemoComponent.render
+    : InnerMemoComponent
+  const PatchedInnerComponent = isInnerMemoComponentAClassComponent
+    ? patchClassComponent(WrappedFunctionalComponent, { displayName, defaultProps })
+    : isInnerMemoComponentAnotherMemoComponent
+    ? patchMemoComponent(WrappedFunctionalComponent, { displayName, defaultProps })
+    : patchFunctionalOrStrComponent(WrappedFunctionalComponent, {
+        displayName,
+        isPure: true,
+      })
+  try {
+    PatchedInnerComponent.displayName = getDisplayName(WrappedFunctionalComponent)
+  } catch {}
+  PatchedInnerComponent.ComponentForHooksTracking = MemoComponent
+  defaults(PatchedInnerComponent, WrappedFunctionalComponent)
+  const WDYRMemoizedFunctionalComponent = store.React.memo(
+    isInnerMemoComponentForwardRefs
+      ? store.React.forwardRef(PatchedInnerComponent)
+      : PatchedInnerComponent,
+    MemoComponent.compare,
+  )
+  try {
+    WDYRMemoizedFunctionalComponent.displayName = displayName
+  } catch (e) {}
+  WDYRMemoizedFunctionalComponent.defaultProps = defaultProps
+  defaults(WDYRMemoizedFunctionalComponent, MemoComponent)
+  return WDYRMemoizedFunctionalComponent
+}
+
+// why-did-you-render/src/patches/patchForwardRefComponent.js
+function patchForwardRefComponent(ForwardRefComponent, { displayName, defaultProps }) {
+  const { render: InnerForwardRefComponent } = ForwardRefComponent
+  const isInnerComponentMemoized = isMemoComponent(InnerForwardRefComponent)
+  const WrappedFunctionalComponent = isInnerComponentMemoized
+    ? InnerForwardRefComponent.type
+    : InnerForwardRefComponent
+  const WDYRWrappedByReactForwardRefFunctionalComponent = patchFunctionalOrStrComponent(
+    WrappedFunctionalComponent,
+    { isPure: isInnerComponentMemoized, displayName },
+  )
+  WDYRWrappedByReactForwardRefFunctionalComponent.displayName = getDisplayName(
+    WrappedFunctionalComponent,
+  )
+  WDYRWrappedByReactForwardRefFunctionalComponent.ComponentForHooksTracking =
+    WrappedFunctionalComponent
+  defaults(WDYRWrappedByReactForwardRefFunctionalComponent, WrappedFunctionalComponent)
+  const WDYRForwardRefFunctionalComponent = store.React.forwardRef(
+    isInnerComponentMemoized
+      ? store.React.memo(
+          WDYRWrappedByReactForwardRefFunctionalComponent,
+          InnerForwardRefComponent.compare,
+        )
+      : WDYRWrappedByReactForwardRefFunctionalComponent,
+  )
+  try {
+    WDYRForwardRefFunctionalComponent.displayName = displayName
+  } catch (e) {}
+  WDYRForwardRefFunctionalComponent.defaultProps = defaultProps
+  defaults(WDYRForwardRefFunctionalComponent, ForwardRefComponent)
+  return WDYRForwardRefFunctionalComponent
+}
+
+// why-did-you-render/src/whyDidYouRender.js
+var initialHookValue = Symbol("initial-hook-value")
+
+function trackHookChanges(hookName, { path: hookPath }, hookResult) {
+  const nextHook = hookPath ? get(hookResult, hookPath) : hookResult
+  const renderNumberForTheHook = store.React.useRef(true)
+  const isSecondCycleOfRenders =
+    store.hooksPerRender[0] &&
+    store.hooksPerRender[0].renderNumberForTheHook !== renderNumberForTheHook.current
+  if (isSecondCycleOfRenders) {
+    store.hooksPerRender = []
+  }
+  store.hooksPerRender.push({
+    hookName,
+    result: nextHook,
+    renderNumberForTheHook: renderNumberForTheHook.current,
+  })
+
+  renderNumberForTheHook.current++
+
+  const ComponentHookDispatchedFromInstance =
+    store.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED &&
+    store.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner
+      .current
+
+  const prevHookRef = store.React.useRef(initialHookValue)
+  if (!ComponentHookDispatchedFromInstance) {
+    return hookResult
+  }
+  const Component =
+    ComponentHookDispatchedFromInstance.type.ComponentForHooksTracking ||
+    ComponentHookDispatchedFromInstance.type
+  const displayName = getDisplayName(Component)
+  const isShouldTrack = shouldTrack(Component, { isHookChange: true })
+  if (!isShouldTrack) {
+    return hookResult
+  }
+  const newPrevHookRef = prevHookRef.current
+  prevHookRef.current = hookResult
+  if (newPrevHookRef !== initialHookValue) {
+    const notification = getUpdateInfo({
+      Component,
+      displayName,
+      hookName,
+      prevHook: hookPath ? get(newPrevHookRef, hookPath) : newPrevHookRef,
+      nextHook,
+    })
+    if (notification.reason.hookDifferences) {
+      store.options.notifier(notification)
+    }
+  }
+  return hookResult
+}
+
+function createPatchedComponent(Component, { displayName, defaultProps }) {
+  if (isMemoComponent(Component)) {
+    return patchMemoComponent(Component, { displayName, defaultProps })
+  }
+  if (isForwardRefComponent(Component)) {
+    return patchForwardRefComponent(Component, { displayName, defaultProps })
+  }
+  if (isReactClassComponent(Component)) {
+    return patchClassComponent(Component, { displayName, defaultProps })
+  }
+  return patchFunctionalOrStrComponent(Component, {
+    displayName,
+    defaultProps,
+    isPure: false,
+  })
+}
+
+function getPatchedComponent(Component, { displayName, defaultProps }) {
+  const componentsMap = store.componentsMap!
+  if (componentsMap.has(Component)) {
+    return componentsMap.get(Component)
+  }
+  const WDYRPatchedComponent = createPatchedComponent(Component, {
+    displayName,
+    defaultProps,
+  })
+  componentsMap.set(Component, WDYRPatchedComponent)
+  return WDYRPatchedComponent
+}
+
+function getIsSupportedComponentType(Comp: React.ComponentType) {
+  if (!Comp) {
+    return false
+  }
+  if (isMemoComponent(Comp)) {
+    return getIsSupportedComponentType(Comp.type)
+  }
+  if (isForwardRefComponent(Comp)) {
+    return getIsSupportedComponentType(Comp.render)
+  }
+  if (typeof Comp === "function") {
+    return true
+  }
+}
+
+var hooksConfig = {
+  useState: { path: "0" },
+  useReducer: { path: "0" },
+  useContext: void 0,
+  useMemo: { dependenciesPath: "1", dontReport: true },
+  useCallback: { dependenciesPath: "1", dontReport: true },
+}
+export function storeOwnerData(element) {
+  const OwnerInstance =
+    store.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner
+      .current
+  if (OwnerInstance) {
+    const Component = OwnerInstance.type.ComponentForHooksTracking || OwnerInstance.type
+    const displayName = getDisplayName(Component)
+    let additionalOwnerData = {}
+    if (store.options.getAdditionalOwnerData) {
+      additionalOwnerData = store.options.getAdditionalOwnerData(element)
+    }
+    store.ownerDataMap.set(element.props, {
+      Component,
+      displayName,
+      props: OwnerInstance.pendingProps,
+      state: OwnerInstance.stateNode ? OwnerInstance.stateNode.state : null,
+      hooks: store.hooksPerRender,
+      additionalOwnerData,
+    })
+  }
+}
+function resetHooksPerRenderIfNeeded() {
+  let currentOwner = null
+  if (store.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED) {
+    Object.defineProperty(
+      store.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,
+      "current",
+      {
+        get() {
+          return currentOwner
+        },
+        set(value) {
+          currentOwner = value
+          store.hooksPerRender = []
+        },
+      },
+    )
+  }
+}
+function trackHooksIfNeeded() {
+  const hooksSupported = !!store.React.useState
+  if (store.options.trackHooks && hooksSupported) {
+    const nativeHooks = Object.entries(hooksConfig).map(
+      ([hookName, hookTrackingConfig]) => {
+        return [store.React, hookName, hookTrackingConfig]
+      },
+    )
+    const hooksToTrack = [...nativeHooks, ...store.options.trackExtraHooks]
+    hooksToTrack.forEach(([hookParent, hookName, hookTrackingConfig = {}]) => {
+      const originalHook = hookParent[hookName]
+      const newHookName = hookName[0].toUpperCase() + hookName.slice(1)
+      const newHook = function (...args) {
+        const hookResult = originalHook.call(this, ...args)
+        const { dependenciesPath, dontReport } = hookTrackingConfig
+        if (dependenciesPath && typeof hookResult === "function") {
+          dependenciesMap.set(hookResult, {
+            hookName,
+            deps: get(args, dependenciesPath),
+          })
+        }
+        if (!dontReport) {
+          trackHookChanges(hookName, hookTrackingConfig, hookResult)
+        }
+        return hookResult
+      }
+      Object.defineProperty(newHook, "name", { value: newHookName, writable: false })
+      Object.assign(newHook, { originalHook })
+      hookParent[hookName] = newHook
+    })
+  }
+}
+
+export function getWDYRType(origType: React.ComponentType) {
+  const isShouldTrack =
+    getIsSupportedComponentType(origType) &&
+    shouldTrack(origType, { isHookChange: false })
+  if (!isShouldTrack) {
+    return null
+  }
+  const displayName =
+    (origType && origType.whyDidYouRender && origType.whyDidYouRender.customName) ||
+    getDisplayName(origType)
+  const defaultProps = getDefaultProps(origType)
+  const WDYRPatchedComponent = getPatchedComponent(origType, {
+    displayName,
+    defaultProps,
+  })
+  return WDYRPatchedComponent
+}
+
+export default function whyDidYouRender(
+  React: ExtendedReact,
+  userOptions: WhyDidYouRenderOptions,
+): ExtendedReact {
+  if (React.isWDYR) {
+    return React
+  }
+
+  store.React = React
+  store.options = normalizeOptions(userOptions)
+  store.origCreateElement = React.createElement
+  store.origCreateFactory = React.createFactory
+  store.origCloneElement = React.cloneElement
+  store.componentsMap = new WeakMap()
+
+  resetHooksPerRenderIfNeeded()
+  React.createElement = function (origType: any, ...rest: any[]) {
+    const WDYRType = getWDYRType(origType)
+    if (WDYRType) {
+      try {
+        const element = store.origCreateElement.apply(React, [WDYRType, ...rest])
+        if (store.options.logOwnerReasons) {
+          storeOwnerData(element)
+        }
+        return element
+      } catch (e) {
+        store.options.console.log(
+          "whyDidYouRender error. Please file a bug at https://github.com/welldone-software/why-did-you-render/issues.",
+          {
+            errorInfo: {
+              error: e,
+              componentNameOrComponent: origType,
+              rest,
+              options: store.options,
+            },
+          },
+        )
+      }
+    }
+    return store.origCreateElement.apply(React, [origType, ...rest])
+  } as any
+
+  Object.assign(React.createElement, store.origCreateElement)
+
+  react.createFactory = (type: any) => {
+    const factory = React.createElement.bind(null, type)
+    factory.type = type
+    return factory
+  }
+
+  Object.assign(React.createFactory, store.origCreateFactory)
+
+  React.cloneElement = function (...args: any[]) {
+    const element = store.origCloneElement.apply(React, args)
+    if (store.options.logOwnerReasons) {
+      storeOwnerData(element)
+    }
+    return element
+  } as any
+
+  Object.assign(React.cloneElement, store.origCloneElement)
+  trackHooksIfNeeded()
+
+  React.isWDYR = true
+  React.__REVERT_WHY_DID_YOU_RENDER__ = () => {
+    Object.assign(React, {
+      createElement: store.origCreateElement,
+      createFactory: store.origCreateFactory,
+      cloneElement: store.origCloneElement,
+    })
+    store.componentsMap = null
+    const hooksToRevert = [
+      ...Object.keys(hooksConfig).map(hookName => [React, hookName] as const),
+      ...store.options.trackExtraHooks,
+    ]
+    hooksToRevert.forEach(([hookParent, hookName]) => {
+      if (hookParent[hookName].originalHook) {
+        hookParent[hookName] = hookParent[hookName].originalHook
+      }
+    })
+    delete React.__REVERT_WHY_DID_YOU_RENDER__
+    delete React.isWDYR
+  }
+
+  return React
+}
+
+if (DEBUG) {
+  whyDidYouRender(React, {
+    trackAllPureComponents: true,
+  })
+}
+
+Object.assign(whyDidYouRender, React)
diff --git a/src/vendor/why-did-you-render/jsx-runtime.js b/src/vendor/why-did-you-render/jsx-runtime.js
new file mode 100644
index 0000000..e1a1f16
--- /dev/null
+++ b/src/vendor/why-did-you-render/jsx-runtime.js
@@ -0,0 +1,42 @@
+/* eslint-disable*/
+const exports = require("react/jsx-dev-runtime")
+const { jsxs } = require("../../../node_modules/react/jsx-runtime")
+const lib = require("./index").default
+
+const origJsxDev = exports.jsxDEV
+const store = lib.store
+
+module.exports = exports
+
+const wrap = fn =>
+  function jsxDEV(origType, ...rest) {
+    if (store.React && store.React.isWDYR) {
+      const type = lib.getWDYRType(origType)
+      if (type) {
+        try {
+          const element = fn(type, ...rest)
+          if (store.options.logOwnerReasons) {
+            lib.storeOwnerData(element)
+          }
+          return element
+        } catch (e) {
+          store.options.console.log(
+            "whyDidYouRender JSX transform error. Please file a bug at https://github.com/welldone-software/why-did-you-render/issues.",
+            {
+              errorInfo: {
+                error: e,
+                componentNameOrComponent: origType,
+                rest,
+                options: store.options,
+              },
+            },
+          )
+        }
+      }
+    }
+
+    return fn(origType, ...rest)
+  }
+
+exports.jsxDEV = exports.jsx = wrap(origJsxDev)
+exports.jsxsDEV = exports.jsxs = wrap(jsxs)
diff --git a/src/vendor/why-did-you-render/package.json b/src/vendor/why-did-you-render/package.json
new file mode 100644
index 0000000..ebfe7b1
--- /dev/null
+++ b/src/vendor/why-did-you-render/package.json
@@ -0,0 +1,128 @@
+{
+  "name": "@welldone-software/why-did-you-render",
+  "version": "7.0.1",
+  "description": "Monkey patches React to notify you about avoidable re-renders.",
+  "types": "types.d.ts",
+  "files": [
+    "dist",
+    "types.d.ts",
+    "jsx-runtime.js",
+    "jsx-runtime.d.ts",
+    "jsx-dev-runtime.js",
+    "jsx-dev-runtime.d.ts"
+  ],
+  "authors": [
+    "Vitali Zaidman <vzaidman@gmail.com> (https://github.com/vzaidman)"
+  ],
+  "license": "MIT",
+  "repository": "https://github.com/welldone-software/why-did-you-render",
+  "keywords": [
+    "react",
+    "component",
+    "pure",
+    "performance",
+    "render",
+    "update",
+    "tool"
+  ],
+  "scripts": {
+    "start": "cross-env PORT=3003 NODE_ENV=development node demo/serve",
+    "start:classic": "cross-env USE_CLASSIC_JSX=true yarn start",
+    "build": "cross-env NODE_ENV=production rollup --config",
+    "_test": "jest \"./tests\" --config=jest.config.js",
+    "test:react-18": "cross-env USE_REACT_18=true yarn _test",
+    "test:react-18-classic": "cross-env USE_REACT_18=true USE_CLASSIC_JSX=true yarn _test",
+    "test:react-17": "cross-env USE_REACT_17=true yarn _test",
+    "test:react-17-classic": "cross-env USE_REACT_17=true USE_CLASSIC_JSX=true yarn _test",
+    "test:react-16": "cross-env USE_REACT_16=true yarn _test",
+    "test:react-16-classic": "cross-env USE_REACT_16=true USE_CLASSIC_JSX=true yarn _test",
+    "test:quick": "yarn test:react-18",
+    "test:watch": "yarn test:quick --watch",
+    "test": "yarn test:react-18 && yarn test:react-17 && yarn test:react-16 && yarn test:react-18-classic && yarn test:react-17-classic && yarn test:react-16-classic",
+    "test:ci": "yarn test --coverage && coveralls < coverage/lcov.info",
+    "lint": "eslint . --ext=js --max-warnings 0 --cache --cache-location .cache/eslint-cache",
+    "clear": "rimraf .cache dist demo/dist",
+    "watch": "concurrently --names \"Serve,Test\" \"npm:start\" \"npm:test:watch\"",
+    "checkHealth": "yarn lint && yarn test",
+    "version": "yarn checkHealth && yarn build",
+    "postversion": "git push && git push --tags",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run --browser chrome",
+    "_cypress:run:ci": "yarn cypress:run --record --parallel --group main",
+    "_cypress:run:ci:classic": "yarn cypress:run --record --parallel --group classic",
+    "cypress:ci": "start-server-and-test start http://localhost:3003 _cypress:run:ci",
+    "cypress:ci:classic": "start-server-and-test start:classic http://localhost:3003 _cypress:run:ci:classic"
+  },
+  "dependencies": {
+    "lodash": "^4"
+  },
+  "peerDependencies": {
+    "react": "^16 || ^17 || ^18"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.17.6",
+    "@babel/core": "^7.17.8",
+    "@babel/eslint-parser": "^7.17.0",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^21.0.3",
+    "@rollup/plugin-replace": "^4.0.0",
+    "@testing-library/jest-dom": "^5.15.0",
+    "@testing-library/react": "^12.1.2",
+    "@welldone-software/jest-console-handler": "^2.0.1",
+    "acorn-walk": "^8.2.0",
+    "astring": "^1.8.1",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^27.5.1",
+    "concurrently": "^7.1.0",
+    "coveralls": "^3.1.1",
+    "create-react-class": "^15.7.0",
+    "cross-env": "^7.0.3",
+    "cypress": "^9.5.3",
+    "eslint": "^8.12.0",
+    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-jest": "^26.1.3",
+    "eslint-plugin-react": "^7.29.4",
+    "express": "^4.17.3",
+    "express-history-api-fallback": "^2.2.1",
+    "husky": "^7.0.4",
+    "jest": "^27.5.1",
+    "jest-cli": "^27.5.1",
+    "magic-string": "^0.26.1",
+    "nollup": "^0.19.0",
+    "react": "^18.0.0",
+    "react-16": "npm:react@^16.14.0",
+    "react-17": "npm:react@^17.0.2",
+    "react-dom": "^18.0.0",
+    "react-dom-16": "npm:@hot-loader/react-dom@^16.14.0",
+    "react-dom-17": "npm:@hot-loader/react-dom@^17.0.1",
+    "react-hot-loader": "^4.13.0",
+    "react-is": "^18.0.0",
+    "react-is-16": "npm:react-is@^16.13.1",
+    "react-is-17": "npm:react-is@^17.0.2",
+    "react-router-dom": "^6.3.0",
+    "react-router-dom-5": "npm:react-router-dom@^5.3.0",
+    "redux": "^4.1.2",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.70.1",
+    "rollup-plugin-alias": "^2.2.0",
+    "rollup-plugin-commonjs-alternate": "^0.8.0",
+    "rollup-plugin-license": "^2.6.1",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "start-server-and-test": "^1.14.0",
+    "styled-components": "^5.3.5",
+    "typescript": "^4.6.3"
+  },
+  "upstream": {
+    "version": 1,
+    "sources": {
+      "main": {
+        "repository": "https://github.com/welldone-software/why-did-you-render.git",
+        "commit": "0f364e8451f5283e4d59054c96a9e2788f497045",
+        "branch": "master"
+      }
+    }
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..658d832
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "resolveJsonModule": true,
+    "noImplicitOverride": true,
+    "strict": true,
+    "stripInternal": true,
+    "target": "esnext",
+    "useUnknownInCatchVariables": false,
+    "paths": {
+      "~/*": ["./src/*"],
+      "#src/*": ["./src/*"],
+      "#vendor/*": ["./src/vendor/*"]
+    },
+    "plugins": [
+      {
+        "name": "typescript-plugin-css-modules"
+      },
+      {
+        "name": "@aet/gql-tools",
+        "schema": "src/generated/schema.gql",
+        "tag": "gql"
+      }
+    ]
+  },
+  "include": ["src", "eslint-local-rules", "scripts", ".eslintrc.js", "babel.config.js"],
+  "exclude": ["drafts"]
+}